From ea2d7bb34a28e5fbc4891dfe81280c392c06f379 Mon Sep 17 00:00:00 2001
From: Eric Mika <eric@ericmika.com>
Date: Mon, 20 Jul 2026 22:16:19 -0400
Subject: [PATCH] Upgrade to Tweakpane 4.

---
 demo/src/entry-client.js |  6 +++---
 package-lock.json        |  8 ++++----
 package.json             |  2 +-
 src/ThreePerf.ts         | 18 +++++++++---------
 4 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/demo/src/entry-client.js b/demo/src/entry-client.js
index 25de80d..85f63c0 100644
--- a/demo/src/entry-client.js
+++ b/demo/src/entry-client.js
@@ -149,9 +149,9 @@ window.onload = () => {
     //
 
     const exampleFolder = perfMonitor.guiFolder.addFolder({ title: 'Example' });
-    exampleFolder.addInput( params, 'cubeCount', { label: 'Cubes', min: 1, max: 10000, step: 1 } ).on( 'change', regenateCubes );
-    exampleFolder.addInput( params, 'postprocessing', { label: 'Postprocessing' } );
-    exampleFolder.addInput( params, 'shadow', { label: 'Shadow' } );
+    exampleFolder.addBinding( params, 'cubeCount', { label: 'Cubes', min: 1, max: 10000, step: 1 } ).on( 'change', regenateCubes );
+    exampleFolder.addBinding( params, 'postprocessing', { label: 'Postprocessing' } );
+    exampleFolder.addBinding( params, 'shadow', { label: 'Shadow' } );
     exampleFolder.addButton({ title: 'Dispose perf' }).on( 'click', () => perfMonitor.dispose() );
 
     //
diff --git a/package-lock.json b/package-lock.json
index 2109639..ca3ea9d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
       "license": "MIT",
       "dependencies": {
         "troika-three-text": "^0.52.0",
-        "tweakpane": "^3.1.10"
+        "tweakpane": "^4.0.5"
       },
       "devDependencies": {
         "@types/three": "^0.170.0",
@@ -1250,9 +1250,9 @@
       "license": "MIT"
     },
     "node_modules/tweakpane": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-3.1.10.tgz",
-      "integrity": "sha512-rqwnl/pUa7+inhI2E9ayGTqqP0EPOOn/wVvSWjZsRbZUItzNShny7pzwL3hVlaN4m9t/aZhsP0aFQ9U5VVR2VQ==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/tweakpane/-/tweakpane-4.0.5.tgz",
+      "integrity": "sha512-rxEXdSI+ArlG1RyO6FghC4ZUX8JkEfz8F3v1JuteXSV0pEtHJzyo07fcDG+NsJfN5L39kSbCYbB9cBGHyuI/tQ==",
       "funding": {
         "url": "https://github.com/sponsors/cocopon"
       }
diff --git a/package.json b/package.json
index d2171e7..7a6962a 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "troika-three-text": "^0.52.0",
-    "tweakpane": "^3.1.10"
+    "tweakpane": "^4.0.5"
   },
   "devDependencies": {
     "@types/three": "^0.170.0",
diff --git a/src/ThreePerf.ts b/src/ThreePerf.ts
index f40d8a7..0f5e702 100644
--- a/src/ThreePerf.ts
+++ b/src/ThreePerf.ts
@@ -288,15 +288,15 @@ export class ThreePerf {
         // @ts-ignore
         this.guiFolder = this.gui.addFolder({ title: 'Settings' });
         const perfFolder = this.guiFolder.addFolder({ title: 'ThreePerf' });
-        perfFolder.addInput( this, 'visible', { label: 'Visible' } );
-        perfFolder.addInput( this, 'enabled', { label: 'Enabled' } );
-        perfFolder.addInput( this, 'anchorX', { label: 'xAnchor', options: { left: 'left', right: 'right' } });
-        perfFolder.addInput( this, 'anchorY', { label: 'yAnchor', options: { top: 'top', bottom: 'bottom' } });
-        perfFolder.addInput( this, 'backgroundOpacity', { label: 'Background opacity', min: 0, max: 1, step: 0.1 } );
-        perfFolder.addInput( this, 'memory', { label: 'Memory' } );
-        perfFolder.addInput( this, 'showGraph', { label: 'Charts' } );
-        perfFolder.addInput( this, 'scale', { label: 'Scale', min: 0.1, max: 2, step: 0.1 } );
-        perfFolder.addInput( this, 'logsPerSecond', { label: 'LogsPerSecond', min: 1, max: 60, step: 1 } );
+        perfFolder.addBinding( this, 'visible', { label: 'Visible' } );
+        perfFolder.addBinding( this, 'enabled', { label: 'Enabled' } );
+        perfFolder.addBinding( this, 'anchorX', { label: 'xAnchor', options: { left: 'left', right: 'right' } });
+        perfFolder.addBinding( this, 'anchorY', { label: 'yAnchor', options: { top: 'top', bottom: 'bottom' } });
+        perfFolder.addBinding( this, 'backgroundOpacity', { label: 'Background opacity', min: 0, max: 1, step: 0.1 } );
+        perfFolder.addBinding( this, 'memory', { label: 'Memory' } );
+        perfFolder.addBinding( this, 'showGraph', { label: 'Charts' } );
+        perfFolder.addBinding( this, 'scale', { label: 'Scale', min: 0.1, max: 2, step: 0.1 } );
+        perfFolder.addBinding( this, 'logsPerSecond', { label: 'LogsPerSecond', min: 1, max: 60, step: 1 } );
 
         //