more updates

.gitignore

@@ -22,3 +22,5 @@ gh-pages
 *.njsproj
 *.sln
 *.sw?
+package-lock.json
+.qodo

demo/main.tsx

@@ -1,26 +1,29 @@
 import { OrbitControls, PerspectiveCamera, Sky, Stats } from '@react-three/drei'
 import { Canvas } from '@react-three/fiber'
-import React, { useRef } from 'react'
+import React, { useRef, useState } from 'react'
 import { Color, Mesh, MeshStandardMaterial, Vector3 } from 'three'
 import {
   useListBlade,
   usePaneFolder,
   usePaneInput,
   useSliderBlade,
+  useButtonBlade,
   useTextBlade,
   useTweakpane,
 } from '../src'
 import './index.css'
 
 export function App() {
   const meshRef = useRef<Mesh>(null!)
+  const [fruitCount, setFruitCount] = useState(0)
 
   const pane = useTweakpane(
     {
       position: { x: 0, y: 0, z: 0 },
       rotation: { x: 0, y: 0, z: 0 },
       scale: { x: 1, y: 1, z: 1 },
       color: '#ffa500',
+      bool: false,
     },
     {
       title: 'Scene Settings',
@@ -73,6 +76,22 @@ export function App() {
     view: 'list',
   })
 
+  useButtonBlade(pane, {
+    title: 'Add Fruit',
+    label: 'Counter'
+  }, () => {
+    setFruitCount(prev => prev + 1)
+  })
+
+  const [outBool] = usePaneInput(
+    pane,
+    'bool',
+    {
+      label: 'Boolean',
+      value: false
+    }
+  )
+
   const folder = usePaneFolder(pane, {
     title: 'Box Settings',
   })
@@ -170,7 +189,7 @@ export function App() {
       </Canvas>
       <div className="tooltip">
         <h1>
-          {title} {fruit}
+          {title} {fruit} {fruitCount} {outBool ? '✓' : '✗'}
         </h1>
       </div>
     </div>

package.json

@@ -23,43 +23,43 @@
     "node": ">=10"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tweakpane": "^3.1.9"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tweakpane": "^4.0.5"
   },
   "devDependencies": {
-    "@react-three/drei": "^9.70.0",
-    "@react-three/fiber": "^8.13.0",
-    "@rollup/plugin-commonjs": "^25.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.3",
-    "@rollup/plugin-typescript": "^11.1.1",
-    "@size-limit/preset-small-lib": "^8.2.4",
-    "@tweakpane/core": "^1.1.8",
-    "@types/node": "^20.2.5",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@types/three": "^0.152.1",
-    "@vitejs/plugin-react": "^4.0.0",
-    "gh-pages": "^5.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^3.23.0",
+    "@react-three/drei": "^10.0.6",
+    "@react-three/fiber": "^9.1.2",
+    "@rollup/plugin-commonjs": "^28.0.3",
+    "@rollup/plugin-node-resolve": "^16.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "@size-limit/preset-small-lib": "^11.2.0",
+    "@tweakpane/core": "^2.0.5",
+    "@types/node": "^22.14.1",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@types/three": "^0.175.0",
+    "@vitejs/plugin-react": "^4.4.0",
+    "gh-pages": "^6.3.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rollup": "^4.40.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "size-limit": "^8.2.4",
-    "three": "^0.152.2",
+    "size-limit": "^11.2.0",
+    "three": "^0.175.0",
     "tslib": "^2.5.0",
-    "tweakpane": "^3.1.9",
+    "tweakpane": "^4.0.5",
     "typescript": "^5.0.4",
-    "vite": "^4.3.7",
-    "vite-plugin-dts": "^2.3.0",
-    "vite-tsconfig-paths": "^4.2.0"
+    "vite": "^6.3.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vite-tsconfig-paths": "^5.1.4"
   },
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.cjs"
     }
   }
 }

src/hooks/useButtonBlade.ts

@@ -0,0 +1,36 @@
+import { BaseBladeParams } from '@tweakpane/core'
+import { RefObject, useLayoutEffect, useRef } from 'react'
+import { ButtonApi } from 'tweakpane'
+import { FolderInstance } from './usePaneFolder'
+
+interface UseButtonBladeParams extends BaseBladeParams {
+  title: string
+  label?: string
+}
+
+export function useButtonBlade<T extends Object>(
+  paneRef: RefObject<FolderInstance<T>>,
+  params: UseButtonBladeParams,
+  onClick: () => void
+): RefObject<ButtonApi> {
+  const bladeRef = useRef<ButtonApi>(null!)
+
+  useLayoutEffect(() => {
+    const pane = paneRef.current.instance
+    if (pane == null) return
+
+    const blade = pane.addButton({
+      title: params.title,
+      label: params.label,
+    }) as ButtonApi
+
+    blade.on('click', onClick)
+    bladeRef.current = blade
+
+    return () => {
+      if (blade.element) blade.dispose()
+    }
+  }, [])
+
+  return bladeRef
+}

src/hooks/useListBlade.ts

@@ -5,7 +5,7 @@ import {
   normalizeListOptions,
 } from '@tweakpane/core'
 import {
-  MutableRefObject,
+  RefObject,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -23,18 +23,18 @@ interface UseSliderBladeParams<T> extends BaseBladeParams {
 }
 
 export function useListBlade<T extends Object, V>(
-  paneRef: MutableRefObject<PaneInstance<T>>,
+  paneRef: RefObject<PaneInstance<T>>,
   bladeParams: UseSliderBladeParams<V>
-): [V, (value: V) => void, MutableRefObject<ListBladeApi<V>>]
+): [V, (value: V) => void, RefObject<ListBladeApi<V>>]
 
 export function useListBlade<T extends Object, V>(
-  paneRef: MutableRefObject<PaneInstance<T>>,
+  paneRef: RefObject<PaneInstance<T>>,
   bladeParams: UseSliderBladeParams<V>,
   onChange: (event: TpChangeEvent<V>) => void
-): [never, (value: V) => void, MutableRefObject<ListBladeApi<V>>]
+): [never, (value: V) => void, RefObject<ListBladeApi<V>>]
 
 export function useListBlade<T extends Object, V>(
-  paneRef: MutableRefObject<PaneInstance<T>>,
+  paneRef: RefObject<PaneInstance<T>>,
   params: UseSliderBladeParams<V>,
   onChange?: (event: TpChangeEvent<V>) => void
 ) {

src/hooks/usePaneInput.ts

@@ -89,7 +89,7 @@ export function usePaneInput<T extends Object, K extends keyof T>(
       .addBinding(parentRef.current!.params, key, BindingParams)
       .on('change', handler)
 
-    inputRef.current = input
+    inputRef.current = input as InputBindingApi<unknown, T[K]>
     // inputRef.current.controller.importState.arguments = input
     return () => {
       if (input.element) input.dispose()

src/hooks/useSliderBlade.ts

@@ -1,6 +1,6 @@
 import { BaseBladeParams, TpChangeEvent } from '@tweakpane/core'
 import {
-  MutableRefObject,
+  RefObject,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -19,21 +19,21 @@ interface UseSliderBladeParams extends BaseBladeParams {
   value?: number
 }
 
-type BladeRef = MutableRefObject<SliderBladeApi>
+type BladeRef = RefObject<SliderBladeApi>
 
 export function useSliderBlade<T extends Object, V>(
-  paneRef: MutableRefObject<FolderInstance<T>>,
+  paneRef: RefObject<FolderInstance<T>>,
   bladeParams: UseSliderBladeParams
 ): [number, (value: number) => void, BladeRef]
 
 export function useSliderBlade<T extends Object, V>(
-  paneRef: MutableRefObject<FolderInstance<T>>,
+  paneRef: RefObject<FolderInstance<T>>,
   bladeParams: UseSliderBladeParams,
   onChange: (event: TpChangeEvent<number>) => void
 ): [never, (value: number) => void, BladeRef]
 
 export function useSliderBlade<T extends Object>(
-  paneRef: MutableRefObject<FolderInstance<T>>,
+  paneRef: RefObject<FolderInstance<T>>,
   params: UseSliderBladeParams,
   onChange?: (event: TpChangeEvent<number>) => void
 ) {

src/hooks/useTextBlade.ts

@@ -1,5 +1,5 @@
 import {
-  MutableRefObject,
+  RefObject,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -16,21 +16,21 @@ interface UseTextBladeParams<T> extends BaseBladeParams {
   label?: string
 }
 
-type BladeRef<V> = MutableRefObject<TextBladeApi<V>>
+type BladeRef<V> = RefObject<TextBladeApi<V>>
 
 export function useTextBlade<T extends Object, V>(
-  paneRef: MutableRefObject<FolderInstance<T>>,
+  paneRef: RefObject<FolderInstance<T>>,
   bladeParams: UseTextBladeParams<V>
 ): [V, (value: V) => void, BladeRef<T>]
 
 export function useTextBlade<T extends Object, V>(
-  paneRef: MutableRefObject<FolderInstance<T>>,
+  paneRef: RefObject<FolderInstance<T>>,
   bladeParams: UseTextBladeParams<V>,
   onChange: (event: TpChangeEvent<V>) => void
 ): [never, (value: V) => void, BladeRef<T>]
 
 export function useTextBlade<T extends Object, V>(
-  paneRef: MutableRefObject<FolderInstance<T>>,
+  paneRef: RefObject<FolderInstance<T>>,
   params: UseTextBladeParams<V>,
   onChange?: (event: TpChangeEvent<V>) => void
 ) {

src/hooks/useTweakpane.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, useEffect, useLayoutEffect, useRef } from 'react'
+import { RefObject, useEffect, useLayoutEffect, useRef } from 'react'
 import { Pane } from 'tweakpane'
 
 // This one is copied from tweakpane to avoid dist dependency
@@ -29,7 +29,7 @@ export interface PaneInstance<T extends Object> {
 export function useTweakpane<T extends Object>(
   params: T = {} as T,
   paneConfig: PaneConfig = {}
-): MutableRefObject<PaneInstance<T>> {
+): RefObject<PaneInstance<T>> {
   const paneRef = useRef<PaneInstance<T>>({
     instance: null,
     params: params,

src/index.ts

@@ -1,6 +1,7 @@
 export * from './hooks/useListBlade'
 export * from './hooks/useTextBlade'
 export * from './hooks/useSliderBlade'
+export * from './hooks/useButtonBlade'
 export * from './hooks/usePaneFolder'
 export * from './hooks/usePaneInput'
 export * from './hooks/useTweakpane'