@three-flatland/devtools 0.1.0-alpha.3 → 1.0.0-alpha.6

package/dist/react/use-pane-folder.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/use-pane-folder.ts"],"sourcesContent":["import { useEffectEvent, useLayoutEffect, useState } from 'react'\nimport type { FolderApi, FolderParams } from 'tweakpane'\nimport type { PaneParent } from './use-pane-input.js'\n\n/**\n * Create a Tweakpane folder underneath `parent`. Disposes on unmount and\n * recreates when `parent` (or `title`) changes — e.g., when `usePane`\n * tears down and rebuilds its bundle on a StrictMode remount.\n *\n * Returns `null` on the first render before the layout effect commits,\n * then the FolderApi on the next render. The two renders happen\n * synchronously before paint, so consumers don't see a flicker.\n */\nexport function usePaneFolder(\n  parent: PaneParent | null,\n  title: string,\n  options: Partial<FolderParams> = {},\n): FolderApi | null {\n  const [folder, setFolder] = useState<FolderApi | null>(null)\n\n  // Read the latest `options` at (re)create time without making them a\n  // dependency — useEffectEvent captures current props non-reactively, so\n  // changing options doesn't tear down and rebuild the folder.\n  const getOptions = useEffectEvent(() => options)\n\n  useLayoutEffect(() => {\n    if (!parent) {\n      setFolder(null)\n      return\n    }\n    const f = parent.addFolder({ expanded: false, ...getOptions(), title })\n    setFolder(f)\n    return () => {\n      try {\n        f.dispose()\n      } catch {\n        // Parent may have been disposed first (cascade), in which case\n        // the folder is already gone. Ignore.\n      }\n    }\n  }, [parent, title])\n\n  return folder\n}\n"],"mappings":"AAAA,SAAS,gBAAgB,iBAAiB,gBAAgB;AAanD,SAAS,cACd,QACA,OACA,UAAiC,CAAC,GAChB;AAClB,QAAM,CAAC,QAAQ,SAAS,IAAI,SAA2B,IAAI;AAK3D,QAAM,aAAa,eAAe,MAAM,OAAO;AAE/C,kBAAgB,MAAM;AACpB,QAAI,CAAC,QAAQ;AACX,gBAAU,IAAI;AACd;AAAA,IACF;AACA,UAAM,IAAI,OAAO,UAAU,EAAE,UAAU,OAAO,GAAG,WAAW,GAAG,MAAM,CAAC;AACtE,cAAU,CAAC;AACX,WAAO,MAAM;AACX,UAAI;AACF,UAAE,QAAQ;AAAA,MACZ,QAAQ;AAAA,MAGR;AAAA,IACF;AAAA,EACF,GAAG,CAAC,QAAQ,KAAK,CAAC;AAElB,SAAO;AACT;","names":[]}
+{"version":3,"file":"use-pane-folder.js","names":[],"sources":["../../src/react/use-pane-folder.ts"],"sourcesContent":["import { useEffectEvent, useLayoutEffect, useState } from 'react'\nimport type { FolderApi, FolderParams } from 'tweakpane'\nimport type { PaneParent } from './use-pane-input.js'\n\n/**\n * Create a Tweakpane folder underneath `parent`. Disposes on unmount and\n * recreates when `parent` (or `title`) changes — e.g., when `usePane`\n * tears down and rebuilds its bundle on a StrictMode remount.\n *\n * Returns `null` on the first render before the layout effect commits,\n * then the FolderApi on the next render. The two renders happen\n * synchronously before paint, so consumers don't see a flicker.\n */\nexport function usePaneFolder(\n  parent: PaneParent | null,\n  title: string,\n  options: Partial<FolderParams> = {}\n): FolderApi | null {\n  const [folder, setFolder] = useState<FolderApi | null>(null)\n\n  // Read the latest `options` at (re)create time without making them a\n  // dependency — useEffectEvent captures current props non-reactively, so\n  // changing options doesn't tear down and rebuild the folder.\n  const getOptions = useEffectEvent(() => options)\n\n  useLayoutEffect(() => {\n    if (!parent) {\n      setFolder(null)\n      return\n    }\n    const f = parent.addFolder({ expanded: false, ...getOptions(), title })\n    setFolder(f)\n    return () => {\n      try {\n        f.dispose()\n      } catch {\n        // Parent may have been disposed first (cascade), in which case\n        // the folder is already gone. Ignore.\n      }\n    }\n  }, [parent, title])\n\n  return folder\n}\n"],"mappings":";;;;;;;;;;;AAaA,SAAgB,cACd,QACA,OACA,UAAiC,CAAC,GAChB;CAClB,MAAM,CAAC,QAAQ,aAAa,SAA2B,IAAI;CAK3D,MAAM,aAAa,qBAAqB,OAAO;CAE/C,sBAAsB;EACpB,IAAI,CAAC,QAAQ;GACX,UAAU,IAAI;GACd;EACF;EACA,MAAM,IAAI,OAAO,UAAU;GAAE,UAAU;GAAO,GAAG,WAAW;GAAG;EAAM,CAAC;EACtE,UAAU,CAAC;EACX,aAAa;GACX,IAAI;IACF,EAAE,QAAQ;GACZ,QAAQ,CAGR;EACF;CACF,GAAG,CAAC,QAAQ,KAAK,CAAC;CAElB,OAAO;AACT"}

package/dist/react/use-pane-input.d.ts

@@ -1,33 +1,33 @@
-import { Pane, FolderApi } from 'tweakpane';
-
+import { FolderApi, Pane } from "tweakpane";
+//#region src/react/use-pane-input.d.ts
 type PaneParent = Pane | FolderApi;
 interface PaneInputOptions {
-    /** Minimum value (for number inputs, creates a slider) */
-    min?: number;
-    /** Maximum value (for number inputs) */
-    max?: number;
-    /** Step increment */
-    step?: number;
-    /** Named options for list/dropdown binding */
-    options?: Record<string, unknown>;
-    /** Label override (defaults to key) */
-    label?: string;
-    /** Display as color picker */
-    color?: {
-        type: 'float';
-    };
-    /** Inverted range */
-    inverted?: boolean;
-    /**
-     * Render as a read-only monitor (no interactive editor). Value still
-     * updates when `setValue` is called; tweakpane repaints on refresh.
-     */
-    readonly?: boolean;
-    /**
-     * Custom display formatter (e.g. `(v) => v.toFixed(2)`). Forwarded to
-     * tweakpane's native `format` option.
-     */
-    format?: (value: number) => string;
+  /** Minimum value (for number inputs, creates a slider) */
+  min?: number;
+  /** Maximum value (for number inputs) */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Named options for list/dropdown binding */
+  options?: Record<string, unknown>;
+  /** Label override (defaults to key) */
+  label?: string;
+  /** Display as color picker */
+  color?: {
+    type: 'float';
+  };
+  /** Inverted range */
+  inverted?: boolean;
+  /**
+   * Render as a read-only monitor (no interactive editor). Value still
+   * updates when `setValue` is called; tweakpane repaints on refresh.
+   */
+  readonly?: boolean;
+  /**
+   * Custom display formatter (e.g. `(v) => v.toFixed(2)`). Forwarded to
+   * tweakpane's native `format` option.
+   */
+  format?: (value: number) => string;
 }
 /**
  * Bind a Tweakpane input to React state.
@@ -40,5 +40,6 @@ interface PaneInputOptions {
  * re-binds to the new pane. Cleanup disposes the binding immediately.
  */
 declare function usePaneInput<T>(parent: PaneParent | null, key: string, initialValue: T, options?: PaneInputOptions): [T, (v: T) => void];
-
-export { type PaneInputOptions, type PaneParent, usePaneInput };
+//#endregion
+export { PaneInputOptions, PaneParent, usePaneInput };
+//# sourceMappingURL=use-pane-input.d.ts.map

package/dist/react/use-pane-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pane-input.d.ts","names":[],"sources":["../../src/react/use-pane-input.ts"],"mappings":";;KAGY,aAAa,OAAO;UAEf;;EAEf;;EAEA;;EAEA;;EAEA,UAAU;;EAEV;;EAEA;IAAU;;;EAEV;;;;;EAKA;;;;;EAKA,UAAU;;;;;;;;;;;;iBAaI,aAAa,GAC3B,QAAQ,mBACR,aACA,cAAc,GACd,UAAS,oBACP,IAAI,GAAG"}

package/dist/react/use-pane-input.js

@@ -1,46 +1,50 @@
 import { useCallback, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+//#region src/react/use-pane-input.ts
+/**
+* Bind a Tweakpane input to React state.
+* Returns [value, setValue] — setValue updates both React state and the
+* Tweakpane binding.
+*
+* The binding is created in `useLayoutEffect` and rebuilt whenever
+* `parent` or `key` changes — so when `usePane` tears down and rebuilds
+* its bundle (StrictMode, true remount), this hook automatically
+* re-binds to the new pane. Cleanup disposes the binding immediately.
+*/
 function usePaneInput(parent, key, initialValue, options = {}) {
-  const [value, setValueState] = useState(initialValue);
-  const paramsRef = useRef({ [key]: initialValue });
-  const bindingRef = useRef(null);
-  const getOptions = useEffectEvent(() => options);
-  const getValue = useEffectEvent(() => value);
-  useLayoutEffect(() => {
-    if (!parent) {
-      bindingRef.current = null;
-      return;
-    }
-    paramsRef.current[key] = getValue();
-    const { label, ...bindingOpts } = getOptions();
-    const binding = parent.addBinding(paramsRef.current, key, {
-      label: label ?? key,
-      ...bindingOpts
-    });
-    binding.on("change", (ev) => {
-      setValueState(ev.value);
-    });
-    bindingRef.current = binding;
-    return () => {
-      try {
-        binding.dispose();
-      } catch {
-      }
-      if (bindingRef.current === binding) {
-        bindingRef.current = null;
-      }
-    };
-  }, [parent, key]);
-  const setValue = useCallback(
-    (v) => {
-      paramsRef.current[key] = v;
-      setValueState(v);
-      bindingRef.current?.refresh();
-    },
-    [key]
-  );
-  return [value, setValue];
+	const [value, setValueState] = useState(initialValue);
+	const paramsRef = useRef({ [key]: initialValue });
+	const bindingRef = useRef(null);
+	const getOptions = useEffectEvent(() => options);
+	const getValue = useEffectEvent(() => value);
+	useLayoutEffect(() => {
+		if (!parent) {
+			bindingRef.current = null;
+			return;
+		}
+		paramsRef.current[key] = getValue();
+		const { label, ...bindingOpts } = getOptions();
+		const binding = parent.addBinding(paramsRef.current, key, {
+			label: label ?? key,
+			...bindingOpts
+		});
+		binding.on("change", (ev) => {
+			setValueState(ev.value);
+		});
+		bindingRef.current = binding;
+		return () => {
+			try {
+				binding.dispose();
+			} catch {}
+			if (bindingRef.current === binding) bindingRef.current = null;
+		};
+	}, [parent, key]);
+	return [value, useCallback((v) => {
+		paramsRef.current[key] = v;
+		setValueState(v);
+		bindingRef.current?.refresh();
+	}, [key])];
 }
-export {
-  usePaneInput
-};
+//#endregion
+export { usePaneInput };
+
 //# sourceMappingURL=use-pane-input.js.map

package/dist/react/use-pane-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/use-pane-input.ts"],"sourcesContent":["import { useCallback, useEffectEvent, useLayoutEffect, useRef, useState } from 'react'\nimport type { FolderApi, Pane } from 'tweakpane'\n\nexport type PaneParent = Pane | FolderApi\n\nexport interface PaneInputOptions {\n  /** Minimum value (for number inputs, creates a slider) */\n  min?: number\n  /** Maximum value (for number inputs) */\n  max?: number\n  /** Step increment */\n  step?: number\n  /** Named options for list/dropdown binding */\n  options?: Record<string, unknown>\n  /** Label override (defaults to key) */\n  label?: string\n  /** Display as color picker */\n  color?: { type: 'float' }\n  /** Inverted range */\n  inverted?: boolean\n  /**\n   * Render as a read-only monitor (no interactive editor). Value still\n   * updates when `setValue` is called; tweakpane repaints on refresh.\n   */\n  readonly?: boolean\n  /**\n   * Custom display formatter (e.g. `(v) => v.toFixed(2)`). Forwarded to\n   * tweakpane's native `format` option.\n   */\n  format?: (value: number) => string\n}\n\n/**\n * Bind a Tweakpane input to React state.\n * Returns [value, setValue] — setValue updates both React state and the\n * Tweakpane binding.\n *\n * The binding is created in `useLayoutEffect` and rebuilt whenever\n * `parent` or `key` changes — so when `usePane` tears down and rebuilds\n * its bundle (StrictMode, true remount), this hook automatically\n * re-binds to the new pane. Cleanup disposes the binding immediately.\n */\nexport function usePaneInput<T>(\n  parent: PaneParent | null,\n  key: string,\n  initialValue: T,\n  options: PaneInputOptions = {},\n): [T, (v: T) => void] {\n  const [value, setValueState] = useState<T>(initialValue)\n  const paramsRef = useRef<Record<string, unknown>>({ [key]: initialValue })\n  const bindingRef = useRef<{ refresh(): void; dispose(): void } | null>(null)\n\n  // Capture the latest options + value non-reactively, read only when the\n  // binding is (re)created. useEffectEvent avoids touching refs during\n  // render while keeping options/value out of the effect's dep list (so\n  // they don't retrigger setup). tweakpane writes the bound object back on\n  // its own change events; setValue keeps it synced for external updates.\n  const getOptions = useEffectEvent(() => options)\n  const getValue = useEffectEvent(() => value)\n\n  useLayoutEffect(() => {\n    if (!parent) {\n      bindingRef.current = null\n      return\n    }\n\n    // Seed the bound object with the latest value so a recreated binding\n    // shows current state, not the initial.\n    paramsRef.current[key] = getValue()\n    const { label, ...bindingOpts } = getOptions()\n    const binding = parent.addBinding(paramsRef.current, key, {\n      label: label ?? key,\n      ...bindingOpts,\n    } as Record<string, unknown>)\n\n    binding.on('change', (ev: { value: unknown }) => {\n      setValueState(ev.value as T)\n    })\n    bindingRef.current = binding as unknown as { refresh(): void; dispose(): void }\n\n    return () => {\n      try {\n        binding.dispose()\n      } catch {\n        // Parent may have been disposed first (cascade). Ignore.\n      }\n      if (\n        bindingRef.current ===\n        (binding as unknown as { refresh(): void; dispose(): void })\n      ) {\n        bindingRef.current = null\n      }\n    }\n    // options/value are read via useEffectEvent, so they stay out of the\n    // dep list and don't retrigger setup — only parent/key rebind.\n  }, [parent, key])\n\n  const setValue = useCallback(\n    (v: T) => {\n      paramsRef.current[key] = v\n      setValueState(v)\n      bindingRef.current?.refresh()\n    },\n    [key],\n  )\n\n  return [value, setValue]\n}\n"],"mappings":"AAAA,SAAS,aAAa,gBAAgB,iBAAiB,QAAQ,gBAAgB;AA0CxE,SAAS,aACd,QACA,KACA,cACA,UAA4B,CAAC,GACR;AACrB,QAAM,CAAC,OAAO,aAAa,IAAI,SAAY,YAAY;AACvD,QAAM,YAAY,OAAgC,EAAE,CAAC,GAAG,GAAG,aAAa,CAAC;AACzE,QAAM,aAAa,OAAoD,IAAI;AAO3E,QAAM,aAAa,eAAe,MAAM,OAAO;AAC/C,QAAM,WAAW,eAAe,MAAM,KAAK;AAE3C,kBAAgB,MAAM;AACpB,QAAI,CAAC,QAAQ;AACX,iBAAW,UAAU;AACrB;AAAA,IACF;AAIA,cAAU,QAAQ,GAAG,IAAI,SAAS;AAClC,UAAM,EAAE,OAAO,GAAG,YAAY,IAAI,WAAW;AAC7C,UAAM,UAAU,OAAO,WAAW,UAAU,SAAS,KAAK;AAAA,MACxD,OAAO,SAAS;AAAA,MAChB,GAAG;AAAA,IACL,CAA4B;AAE5B,YAAQ,GAAG,UAAU,CAAC,OAA2B;AAC/C,oBAAc,GAAG,KAAU;AAAA,IAC7B,CAAC;AACD,eAAW,UAAU;AAErB,WAAO,MAAM;AACX,UAAI;AACF,gBAAQ,QAAQ;AAAA,MAClB,QAAQ;AAAA,MAER;AACA,UACE,WAAW,YACV,SACD;AACA,mBAAW,UAAU;AAAA,MACvB;AAAA,IACF;AAAA,EAGF,GAAG,CAAC,QAAQ,GAAG,CAAC;AAEhB,QAAM,WAAW;AAAA,IACf,CAAC,MAAS;AACR,gBAAU,QAAQ,GAAG,IAAI;AACzB,oBAAc,CAAC;AACf,iBAAW,SAAS,QAAQ;AAAA,IAC9B;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAEA,SAAO,CAAC,OAAO,QAAQ;AACzB;","names":[]}
+{"version":3,"file":"use-pane-input.js","names":[],"sources":["../../src/react/use-pane-input.ts"],"sourcesContent":["import { useCallback, useEffectEvent, useLayoutEffect, useRef, useState } from 'react'\nimport type { FolderApi, Pane } from 'tweakpane'\n\nexport type PaneParent = Pane | FolderApi\n\nexport interface PaneInputOptions {\n  /** Minimum value (for number inputs, creates a slider) */\n  min?: number\n  /** Maximum value (for number inputs) */\n  max?: number\n  /** Step increment */\n  step?: number\n  /** Named options for list/dropdown binding */\n  options?: Record<string, unknown>\n  /** Label override (defaults to key) */\n  label?: string\n  /** Display as color picker */\n  color?: { type: 'float' }\n  /** Inverted range */\n  inverted?: boolean\n  /**\n   * Render as a read-only monitor (no interactive editor). Value still\n   * updates when `setValue` is called; tweakpane repaints on refresh.\n   */\n  readonly?: boolean\n  /**\n   * Custom display formatter (e.g. `(v) => v.toFixed(2)`). Forwarded to\n   * tweakpane's native `format` option.\n   */\n  format?: (value: number) => string\n}\n\n/**\n * Bind a Tweakpane input to React state.\n * Returns [value, setValue] — setValue updates both React state and the\n * Tweakpane binding.\n *\n * The binding is created in `useLayoutEffect` and rebuilt whenever\n * `parent` or `key` changes — so when `usePane` tears down and rebuilds\n * its bundle (StrictMode, true remount), this hook automatically\n * re-binds to the new pane. Cleanup disposes the binding immediately.\n */\nexport function usePaneInput<T>(\n  parent: PaneParent | null,\n  key: string,\n  initialValue: T,\n  options: PaneInputOptions = {}\n): [T, (v: T) => void] {\n  const [value, setValueState] = useState<T>(initialValue)\n  const paramsRef = useRef<Record<string, unknown>>({ [key]: initialValue })\n  const bindingRef = useRef<{ refresh(): void; dispose(): void } | null>(null)\n\n  // Capture the latest options + value non-reactively, read only when the\n  // binding is (re)created. useEffectEvent avoids touching refs during\n  // render while keeping options/value out of the effect's dep list (so\n  // they don't retrigger setup). tweakpane writes the bound object back on\n  // its own change events; setValue keeps it synced for external updates.\n  const getOptions = useEffectEvent(() => options)\n  const getValue = useEffectEvent(() => value)\n\n  useLayoutEffect(() => {\n    if (!parent) {\n      bindingRef.current = null\n      return\n    }\n\n    // Seed the bound object with the latest value so a recreated binding\n    // shows current state, not the initial.\n    paramsRef.current[key] = getValue()\n    const { label, ...bindingOpts } = getOptions()\n    const binding = parent.addBinding(paramsRef.current, key, {\n      label: label ?? key,\n      ...bindingOpts,\n    } as Record<string, unknown>)\n\n    binding.on('change', (ev: { value: unknown }) => {\n      setValueState(ev.value as T)\n    })\n    bindingRef.current = binding as unknown as { refresh(): void; dispose(): void }\n\n    return () => {\n      try {\n        binding.dispose()\n      } catch {\n        // Parent may have been disposed first (cascade). Ignore.\n      }\n      if (bindingRef.current === (binding as unknown as { refresh(): void; dispose(): void })) {\n        bindingRef.current = null\n      }\n    }\n    // options/value are read via useEffectEvent, so they stay out of the\n    // dep list and don't retrigger setup — only parent/key rebind.\n  }, [parent, key])\n\n  const setValue = useCallback(\n    (v: T) => {\n      paramsRef.current[key] = v\n      setValueState(v)\n      bindingRef.current?.refresh()\n    },\n    [key]\n  )\n\n  return [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;AA0CA,SAAgB,aACd,QACA,KACA,cACA,UAA4B,CAAC,GACR;CACrB,MAAM,CAAC,OAAO,iBAAiB,SAAY,YAAY;CACvD,MAAM,YAAY,OAAgC,GAAG,MAAM,aAAa,CAAC;CACzE,MAAM,aAAa,OAAoD,IAAI;CAO3E,MAAM,aAAa,qBAAqB,OAAO;CAC/C,MAAM,WAAW,qBAAqB,KAAK;CAE3C,sBAAsB;EACpB,IAAI,CAAC,QAAQ;GACX,WAAW,UAAU;GACrB;EACF;EAIA,UAAU,QAAQ,OAAO,SAAS;EAClC,MAAM,EAAE,OAAO,GAAG,gBAAgB,WAAW;EAC7C,MAAM,UAAU,OAAO,WAAW,UAAU,SAAS,KAAK;GACxD,OAAO,SAAS;GAChB,GAAG;EACL,CAA4B;EAE5B,QAAQ,GAAG,WAAW,OAA2B;GAC/C,cAAc,GAAG,KAAU;EAC7B,CAAC;EACD,WAAW,UAAU;EAErB,aAAa;GACX,IAAI;IACF,QAAQ,QAAQ;GAClB,QAAQ,CAER;GACA,IAAI,WAAW,YAAa,SAC1B,WAAW,UAAU;EAEzB;CAGF,GAAG,CAAC,QAAQ,GAAG,CAAC;CAWhB,OAAO,CAAC,OATS,aACd,MAAS;EACR,UAAU,QAAQ,OAAO;EACzB,cAAc,CAAC;EACf,WAAW,SAAS,QAAQ;CAC9B,GACA,CAAC,GAAG,CAGgB,CAAC;AACzB"}

package/dist/react/use-pane-radio-grid.d.ts

@@ -1,24 +1,23 @@
-import { PaneParent } from './use-pane-input.js';
-import 'tweakpane';
-
+import { PaneParent } from "./use-pane-input.js";
+//#region src/react/use-pane-radio-grid.d.ts
 interface PaneRadioGridCell<T> {
-    /** Visible label on the button. */
-    title: string;
-    /** Value emitted by this cell when selected. */
-    value: T;
+  /** Visible label on the button. */
+  title: string;
+  /** Value emitted by this cell when selected. */
+  value: T;
 }
 interface PaneRadioGridOptions<T> {
-    /** Radio-group name. Required by Tweakpane — any unique string works. */
-    groupName?: string;
-    /** Initially-selected value. Must match one of `cells[i].value`. */
-    initialValue: T;
-    /**
-     * Grid cells in row-major order. Default layout is a single row with
-     * `cells.length` columns, matching a top-of-pane toggle bar.
-     */
-    cells: ReadonlyArray<PaneRadioGridCell<T>>;
-    /** Explicit `[cols, rows]`. Defaults to `[cells.length, 1]`. */
-    size?: [number, number];
+  /** Radio-group name. Required by Tweakpane — any unique string works. */
+  groupName?: string;
+  /** Initially-selected value. Must match one of `cells[i].value`. */
+  initialValue: T;
+  /**
+   * Grid cells in row-major order. Default layout is a single row with
+   * `cells.length` columns, matching a top-of-pane toggle bar.
+   */
+  cells: ReadonlyArray<PaneRadioGridCell<T>>;
+  /** Explicit `[cols, rows]`. Defaults to `[cells.length, 1]`. */
+  size?: [number, number];
 }
 /**
  * Render an inline button-bar selector backed by the Tweakpane Essentials
@@ -31,5 +30,6 @@ interface PaneRadioGridOptions<T> {
  * React strict-mode's synchronous cleanup/re-mount pair.
  */
 declare function usePaneRadioGrid<T>(parent: PaneParent | null, options: PaneRadioGridOptions<T>): [T, (v: T) => void];
-
-export { type PaneRadioGridCell, type PaneRadioGridOptions, usePaneRadioGrid };
+//#endregion
+export { PaneRadioGridCell, PaneRadioGridOptions, usePaneRadioGrid };
+//# sourceMappingURL=use-pane-radio-grid.d.ts.map

package/dist/react/use-pane-radio-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pane-radio-grid.d.ts","names":[],"sources":["../../src/react/use-pane-radio-grid.ts"],"mappings":";;UAGiB,kBAAkB;;EAEjC;;EAEA,OAAO;;UAGQ,qBAAqB;;EAEpC;;EAEA,cAAc;;;;;EAKd,OAAO,cAAc,kBAAkB;;EAEvC;;;;;;;;;;;;iBAac,iBAAiB,GAAG,QAAQ,mBAAmB,SAAS,qBAAqB,MAAM,IAAI,GAAG"}

package/dist/react/use-pane-radio-grid.js

@@ -1,54 +1,76 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/react/use-pane-radio-grid.ts
+/**
+* Render an inline button-bar selector backed by the Tweakpane Essentials
+* `radiogrid` blade. Returns `[value, setValue]` — interacting with the
+* pane buttons updates React state, and `setValue` pushes back into the
+* blade. Intended for scene/mode toggles where a dropdown feels too
+* heavyweight and a row of labeled buttons reads better.
+*
+* Disposal is deferred through `setTimeout(0)` so the blade survives
+* React strict-mode's synchronous cleanup/re-mount pair.
+*/
 function usePaneRadioGrid(parent, options) {
-  const { cells, initialValue, groupName, size } = options;
-  const [value, setValueState] = useState(initialValue);
-  const bladeRef = useRef(null);
-  const cellsRef = useRef(cells);
-  cellsRef.current = cells;
-  const mountedRef = useRef(false);
-  const ensureBlade = useCallback(() => {
-    if (!parent || bladeRef.current) return;
-    const [cols, rows] = size ?? [cells.length, 1];
-    const bag = { value: initialValue };
-    const blade = parent.addBlade({
-      view: "radiogrid",
-      groupName: groupName ?? `radio-${Math.random().toString(36).slice(2, 10)}`,
-      size: [cols, rows],
-      cells: (x, y) => {
-        const idx = y * cols + x;
-        const cell = cellsRef.current[idx];
-        return cell ? { title: cell.title, value: cell.value } : { title: "", value: void 0 };
-      },
-      value: bag.value
-    });
-    blade?.on("change", (ev) => {
-      setValueState(ev.value);
-    });
-    bladeRef.current = blade;
-  }, [parent, groupName, initialValue, cells.length, size]);
-  if (parent && bladeRef.current === null) ensureBlade();
-  useEffect(() => {
-    mountedRef.current = true;
-    if (parent && bladeRef.current === null) ensureBlade();
-    return () => {
-      const blade = bladeRef.current;
-      setTimeout(() => {
-        if (!mountedRef.current && blade) {
-          blade.dispose();
-          if (bladeRef.current === blade) bladeRef.current = null;
-        }
-      }, 0);
-      mountedRef.current = false;
-    };
-  }, [parent]);
-  const setValue = useCallback((v) => {
-    setValueState(v);
-    const blade = bladeRef.current;
-    if (blade && "value" in blade) blade.value = v;
-  }, []);
-  return [value, setValue];
+	const { cells, initialValue, groupName, size } = options;
+	const [value, setValueState] = useState(initialValue);
+	const bladeRef = useRef(null);
+	const cellsRef = useRef(cells);
+	cellsRef.current = cells;
+	const mountedRef = useRef(false);
+	const ensureBlade = useCallback(() => {
+		if (!parent || bladeRef.current) return;
+		const [cols, rows] = size ?? [cells.length, 1];
+		const bag = { value: initialValue };
+		const blade = parent.addBlade({
+			view: "radiogrid",
+			groupName: groupName ?? `radio-${Math.random().toString(36).slice(2, 10)}`,
+			size: [cols, rows],
+			cells: (x, y) => {
+				const idx = y * cols + x;
+				const cell = cellsRef.current[idx];
+				return cell ? {
+					title: cell.title,
+					value: cell.value
+				} : {
+					title: "",
+					value: void 0
+				};
+			},
+			value: bag.value
+		});
+		blade?.on("change", (ev) => {
+			setValueState(ev.value);
+		});
+		bladeRef.current = blade;
+	}, [
+		parent,
+		groupName,
+		initialValue,
+		cells.length,
+		size
+	]);
+	if (parent && bladeRef.current === null) ensureBlade();
+	useEffect(() => {
+		mountedRef.current = true;
+		if (parent && bladeRef.current === null) ensureBlade();
+		return () => {
+			const blade = bladeRef.current;
+			setTimeout(() => {
+				if (!mountedRef.current && blade) {
+					blade.dispose();
+					if (bladeRef.current === blade) bladeRef.current = null;
+				}
+			}, 0);
+			mountedRef.current = false;
+		};
+	}, [parent]);
+	return [value, useCallback((v) => {
+		setValueState(v);
+		const blade = bladeRef.current;
+		if (blade && "value" in blade) blade.value = v;
+	}, [])];
 }
-export {
-  usePaneRadioGrid
-};
+//#endregion
+export { usePaneRadioGrid };
+
 //# sourceMappingURL=use-pane-radio-grid.js.map

package/dist/react/use-pane-radio-grid.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/use-pane-radio-grid.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport type { PaneParent } from './use-pane-input.js'\n\nexport interface PaneRadioGridCell<T> {\n  /** Visible label on the button. */\n  title: string\n  /** Value emitted by this cell when selected. */\n  value: T\n}\n\nexport interface PaneRadioGridOptions<T> {\n  /** Radio-group name. Required by Tweakpane — any unique string works. */\n  groupName?: string\n  /** Initially-selected value. Must match one of `cells[i].value`. */\n  initialValue: T\n  /**\n   * Grid cells in row-major order. Default layout is a single row with\n   * `cells.length` columns, matching a top-of-pane toggle bar.\n   */\n  cells: ReadonlyArray<PaneRadioGridCell<T>>\n  /** Explicit `[cols, rows]`. Defaults to `[cells.length, 1]`. */\n  size?: [number, number]\n}\n\n/**\n * Render an inline button-bar selector backed by the Tweakpane Essentials\n * `radiogrid` blade. Returns `[value, setValue]` — interacting with the\n * pane buttons updates React state, and `setValue` pushes back into the\n * blade. Intended for scene/mode toggles where a dropdown feels too\n * heavyweight and a row of labeled buttons reads better.\n *\n * Disposal is deferred through `setTimeout(0)` so the blade survives\n * React strict-mode's synchronous cleanup/re-mount pair.\n */\nexport function usePaneRadioGrid<T>(\n  parent: PaneParent | null,\n  options: PaneRadioGridOptions<T>,\n): [T, (v: T) => void] {\n  const { cells, initialValue, groupName, size } = options\n  const [value, setValueState] = useState<T>(initialValue)\n\n  const bladeRef = useRef<{ dispose(): void; on: (ev: string, fn: (e: { value: T }) => void) => unknown; value?: T } | null>(null)\n  const cellsRef = useRef(cells)\n  cellsRef.current = cells\n  const mountedRef = useRef(false)\n\n  const ensureBlade = useCallback(() => {\n    if (!parent || bladeRef.current) return\n\n    const [cols, rows] = size ?? [cells.length, 1]\n    const bag = { value: initialValue }\n    const blade = (parent as unknown as {\n      addBlade: (opts: Record<string, unknown>) => typeof bladeRef.current\n    }).addBlade({\n      view: 'radiogrid',\n      groupName: groupName ?? `radio-${Math.random().toString(36).slice(2, 10)}`,\n      size: [cols, rows],\n      cells: (x: number, y: number) => {\n        const idx = y * cols + x\n        const cell = cellsRef.current[idx]\n        return cell ? { title: cell.title, value: cell.value } : { title: '', value: undefined }\n      },\n      value: bag.value,\n    })\n\n    blade?.on('change', (ev) => {\n      setValueState(ev.value)\n    })\n    bladeRef.current = blade\n  }, [parent, groupName, initialValue, cells.length, size])\n\n  // Synchronous creation so the toggle bar appears on first paint.\n  if (parent && bladeRef.current === null) ensureBlade()\n\n  useEffect(() => {\n    mountedRef.current = true\n    if (parent && bladeRef.current === null) ensureBlade()\n\n    return () => {\n      const blade = bladeRef.current\n      setTimeout(() => {\n        if (!mountedRef.current && blade) {\n          blade.dispose()\n          if (bladeRef.current === blade) bladeRef.current = null\n        }\n      }, 0)\n      mountedRef.current = false\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parent])\n\n  const setValue = useCallback((v: T) => {\n    setValueState(v)\n    const blade = bladeRef.current as (typeof bladeRef.current & { value?: T }) | null\n    if (blade && 'value' in blade) blade.value = v\n  }, [])\n\n  return [value, setValue]\n}\n"],"mappings":"AAAA,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAkClD,SAAS,iBACd,QACA,SACqB;AACrB,QAAM,EAAE,OAAO,cAAc,WAAW,KAAK,IAAI;AACjD,QAAM,CAAC,OAAO,aAAa,IAAI,SAAY,YAAY;AAEvD,QAAM,WAAW,OAA0G,IAAI;AAC/H,QAAM,WAAW,OAAO,KAAK;AAC7B,WAAS,UAAU;AACnB,QAAM,aAAa,OAAO,KAAK;AAE/B,QAAM,cAAc,YAAY,MAAM;AACpC,QAAI,CAAC,UAAU,SAAS,QAAS;AAEjC,UAAM,CAAC,MAAM,IAAI,IAAI,QAAQ,CAAC,MAAM,QAAQ,CAAC;AAC7C,UAAM,MAAM,EAAE,OAAO,aAAa;AAClC,UAAM,QAAS,OAEZ,SAAS;AAAA,MACV,MAAM;AAAA,MACN,WAAW,aAAa,SAAS,KAAK,OAAO,EAAE,SAAS,EAAE,EAAE,MAAM,GAAG,EAAE,CAAC;AAAA,MACxE,MAAM,CAAC,MAAM,IAAI;AAAA,MACjB,OAAO,CAAC,GAAW,MAAc;AAC/B,cAAM,MAAM,IAAI,OAAO;AACvB,cAAM,OAAO,SAAS,QAAQ,GAAG;AACjC,eAAO,OAAO,EAAE,OAAO,KAAK,OAAO,OAAO,KAAK,MAAM,IAAI,EAAE,OAAO,IAAI,OAAO,OAAU;AAAA,MACzF;AAAA,MACA,OAAO,IAAI;AAAA,IACb,CAAC;AAED,WAAO,GAAG,UAAU,CAAC,OAAO;AAC1B,oBAAc,GAAG,KAAK;AAAA,IACxB,CAAC;AACD,aAAS,UAAU;AAAA,EACrB,GAAG,CAAC,QAAQ,WAAW,cAAc,MAAM,QAAQ,IAAI,CAAC;AAGxD,MAAI,UAAU,SAAS,YAAY,KAAM,aAAY;AAErD,YAAU,MAAM;AACd,eAAW,UAAU;AACrB,QAAI,UAAU,SAAS,YAAY,KAAM,aAAY;AAErD,WAAO,MAAM;AACX,YAAM,QAAQ,SAAS;AACvB,iBAAW,MAAM;AACf,YAAI,CAAC,WAAW,WAAW,OAAO;AAChC,gBAAM,QAAQ;AACd,cAAI,SAAS,YAAY,MAAO,UAAS,UAAU;AAAA,QACrD;AAAA,MACF,GAAG,CAAC;AACJ,iBAAW,UAAU;AAAA,IACvB;AAAA,EAEF,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,WAAW,YAAY,CAAC,MAAS;AACrC,kBAAc,CAAC;AACf,UAAM,QAAQ,SAAS;AACvB,QAAI,SAAS,WAAW,MAAO,OAAM,QAAQ;AAAA,EAC/C,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,OAAO,QAAQ;AACzB;","names":[]}
+{"version":3,"file":"use-pane-radio-grid.js","names":[],"sources":["../../src/react/use-pane-radio-grid.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport type { PaneParent } from './use-pane-input.js'\n\nexport interface PaneRadioGridCell<T> {\n  /** Visible label on the button. */\n  title: string\n  /** Value emitted by this cell when selected. */\n  value: T\n}\n\nexport interface PaneRadioGridOptions<T> {\n  /** Radio-group name. Required by Tweakpane — any unique string works. */\n  groupName?: string\n  /** Initially-selected value. Must match one of `cells[i].value`. */\n  initialValue: T\n  /**\n   * Grid cells in row-major order. Default layout is a single row with\n   * `cells.length` columns, matching a top-of-pane toggle bar.\n   */\n  cells: ReadonlyArray<PaneRadioGridCell<T>>\n  /** Explicit `[cols, rows]`. Defaults to `[cells.length, 1]`. */\n  size?: [number, number]\n}\n\n/**\n * Render an inline button-bar selector backed by the Tweakpane Essentials\n * `radiogrid` blade. Returns `[value, setValue]` — interacting with the\n * pane buttons updates React state, and `setValue` pushes back into the\n * blade. Intended for scene/mode toggles where a dropdown feels too\n * heavyweight and a row of labeled buttons reads better.\n *\n * Disposal is deferred through `setTimeout(0)` so the blade survives\n * React strict-mode's synchronous cleanup/re-mount pair.\n */\nexport function usePaneRadioGrid<T>(parent: PaneParent | null, options: PaneRadioGridOptions<T>): [T, (v: T) => void] {\n  const { cells, initialValue, groupName, size } = options\n  const [value, setValueState] = useState<T>(initialValue)\n\n  const bladeRef = useRef<{\n    dispose(): void\n    on: (ev: string, fn: (e: { value: T }) => void) => unknown\n    value?: T\n  } | null>(null)\n  const cellsRef = useRef(cells)\n  cellsRef.current = cells\n  const mountedRef = useRef(false)\n\n  const ensureBlade = useCallback(() => {\n    if (!parent || bladeRef.current) return\n\n    const [cols, rows] = size ?? [cells.length, 1]\n    const bag = { value: initialValue }\n    const blade = (\n      parent as unknown as {\n        addBlade: (opts: Record<string, unknown>) => typeof bladeRef.current\n      }\n    ).addBlade({\n      view: 'radiogrid',\n      groupName: groupName ?? `radio-${Math.random().toString(36).slice(2, 10)}`,\n      size: [cols, rows],\n      cells: (x: number, y: number) => {\n        const idx = y * cols + x\n        const cell = cellsRef.current[idx]\n        return cell ? { title: cell.title, value: cell.value } : { title: '', value: undefined }\n      },\n      value: bag.value,\n    })\n\n    blade?.on('change', (ev) => {\n      setValueState(ev.value)\n    })\n    bladeRef.current = blade\n  }, [parent, groupName, initialValue, cells.length, size])\n\n  // Synchronous creation so the toggle bar appears on first paint.\n  if (parent && bladeRef.current === null) ensureBlade()\n\n  useEffect(() => {\n    mountedRef.current = true\n    if (parent && bladeRef.current === null) ensureBlade()\n\n    return () => {\n      const blade = bladeRef.current\n      setTimeout(() => {\n        if (!mountedRef.current && blade) {\n          blade.dispose()\n          if (bladeRef.current === blade) bladeRef.current = null\n        }\n      }, 0)\n      mountedRef.current = false\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parent])\n\n  const setValue = useCallback((v: T) => {\n    setValueState(v)\n    const blade = bladeRef.current as (typeof bladeRef.current & { value?: T }) | null\n    if (blade && 'value' in blade) blade.value = v\n  }, [])\n\n  return [value, setValue]\n}\n"],"mappings":";;;;;;;;;;;;AAkCA,SAAgB,iBAAoB,QAA2B,SAAuD;CACpH,MAAM,EAAE,OAAO,cAAc,WAAW,SAAS;CACjD,MAAM,CAAC,OAAO,iBAAiB,SAAY,YAAY;CAEvD,MAAM,WAAW,OAIP,IAAI;CACd,MAAM,WAAW,OAAO,KAAK;CAC7B,SAAS,UAAU;CACnB,MAAM,aAAa,OAAO,KAAK;CAE/B,MAAM,cAAc,kBAAkB;EACpC,IAAI,CAAC,UAAU,SAAS,SAAS;EAEjC,MAAM,CAAC,MAAM,QAAQ,QAAQ,CAAC,MAAM,QAAQ,CAAC;EAC7C,MAAM,MAAM,EAAE,OAAO,aAAa;EAClC,MAAM,QACJ,OAGA,SAAS;GACT,MAAM;GACN,WAAW,aAAa,SAAS,KAAK,OAAO,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,GAAG,EAAE;GACvE,MAAM,CAAC,MAAM,IAAI;GACjB,QAAQ,GAAW,MAAc;IAC/B,MAAM,MAAM,IAAI,OAAO;IACvB,MAAM,OAAO,SAAS,QAAQ;IAC9B,OAAO,OAAO;KAAE,OAAO,KAAK;KAAO,OAAO,KAAK;IAAM,IAAI;KAAE,OAAO;KAAI,OAAO,KAAA;IAAU;GACzF;GACA,OAAO,IAAI;EACb,CAAC;EAED,OAAO,GAAG,WAAW,OAAO;GAC1B,cAAc,GAAG,KAAK;EACxB,CAAC;EACD,SAAS,UAAU;CACrB,GAAG;EAAC;EAAQ;EAAW;EAAc,MAAM;EAAQ;CAAI,CAAC;CAGxD,IAAI,UAAU,SAAS,YAAY,MAAM,YAAY;CAErD,gBAAgB;EACd,WAAW,UAAU;EACrB,IAAI,UAAU,SAAS,YAAY,MAAM,YAAY;EAErD,aAAa;GACX,MAAM,QAAQ,SAAS;GACvB,iBAAiB;IACf,IAAI,CAAC,WAAW,WAAW,OAAO;KAChC,MAAM,QAAQ;KACd,IAAI,SAAS,YAAY,OAAO,SAAS,UAAU;IACrD;GACF,GAAG,CAAC;GACJ,WAAW,UAAU;EACvB;CAEF,GAAG,CAAC,MAAM,CAAC;CAQX,OAAO,CAAC,OANS,aAAa,MAAS;EACrC,cAAc,CAAC;EACf,MAAM,QAAQ,SAAS;EACvB,IAAI,SAAS,WAAW,OAAO,MAAM,QAAQ;CAC/C,GAAG,CAAC,CAEkB,CAAC;AACzB"}

package/dist/react/use-pane.d.ts

@@ -1,6 +1,5 @@
-import { CreatePaneOptions, PaneBundle } from '../create-pane.js';
-import 'tweakpane';
-
+import { CreatePaneOptions, PaneBundle } from "../create-pane.js";
+//#region src/react/use-pane.d.ts
 /**
  * Create a themed Tweakpane instance. Disposes on unmount, recreates on
  * remount. Returns a `PaneBundle` whose identity changes if React tears
@@ -36,5 +35,6 @@ import 'tweakpane';
  * ```
  */
 declare function usePane(options?: CreatePaneOptions): PaneBundle;
-
+//#endregion
 export { usePane };
+//# sourceMappingURL=use-pane.d.ts.map

package/dist/react/use-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-pane.d.ts","names":[],"sources":["../../src/react/use-pane.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAsCgB,QAAQ,UAAS,oBAAyB"}

package/dist/react/use-pane.js

@@ -1,21 +1,56 @@
-import { useEffect, useEffectEvent, useState } from "react";
 import { claimPane, createPane } from "../create-pane.js";
+import { useEffect, useEffectEvent, useState } from "react";
+//#region src/react/use-pane.ts
+/**
+* Create a themed Tweakpane instance. Disposes on unmount, recreates on
+* remount. Returns a `PaneBundle` whose identity changes if React tears
+* the component down and rebuilds it (StrictMode, parent remount,
+* Suspense). Child hooks that depend on the pane (`usePaneFolder`,
+* `usePaneInput`) re-bind when this happens.
+*
+* Lifecycle:
+*   - Render: lazy-creates the bundle into a ref so it's available
+*     synchronously on first paint. Render runs twice in StrictMode but
+*     the ref guard prevents double-creation. Orphans from aborted
+*     concurrent renders are reclaimed by `createPane`'s unclaimed-slot
+*     mechanism.
+*   - Effect: claims the bundle so unrelated `createPane` calls won't
+*     dispose it; cleanup disposes the pane unconditionally.
+*   - Effect re-mount (StrictMode or true remount): the bundle in the
+*     ref is now `disposed`, so we create a fresh one and `force()` a
+*     re-render so consumers receive the new identity.
+*
+* Uses `driver: 'raf'` so the stats graph self-ticks via its own
+* `requestAnimationFrame` loop. This makes `usePane` work regardless
+* of whether it's called inside or outside R3F's `<Canvas>` context.
+*
+* @param options - Same {@link CreatePaneOptions} as `createPane`.
+* @returns A {@link PaneBundle}; its identity changes across teardown and
+*   rebuild so dependent hooks (`usePaneFolder`, `usePaneInput`) re-bind.
+*
+* @example
+* ```tsx
+* const { pane } = usePane()
+* const folder = usePaneFolder(pane, 'Settings')
+* const [speed] = usePaneInput(folder, 'speed', 1, { min: 0, max: 10 })
+* ```
+*/
 function usePane(options = {}) {
-  const [bundle, setBundle] = useState(() => createPane(options));
-  const getOptions = useEffectEvent(() => options);
-  useEffect(() => {
-    if (bundle.disposed) {
-      setBundle(createPane(getOptions()));
-      return;
-    }
-    claimPane(bundle);
-    return () => {
-      bundle.pane.dispose();
-    };
-  }, [bundle]);
-  return bundle;
+	const [bundle, setBundle] = useState(() => createPane(options));
+	const getOptions = useEffectEvent(() => options);
+	useEffect(() => {
+		if (bundle.disposed) {
+			setBundle(createPane(getOptions()));
+			return;
+		}
+		claimPane(bundle);
+		return () => {
+			bundle.pane.dispose();
+		};
+	}, [bundle]);
+	return bundle;
 }
-export {
-  usePane
-};
+//#endregion
+export { usePane };
+
 //# sourceMappingURL=use-pane.js.map

package/dist/react/use-pane.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/use-pane.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useState } from 'react'\nimport { claimPane, createPane } from '../create-pane.js'\nimport type { CreatePaneOptions, PaneBundle } from '../create-pane.js'\n\n/**\n * Create a themed Tweakpane instance. Disposes on unmount, recreates on\n * remount. Returns a `PaneBundle` whose identity changes if React tears\n * the component down and rebuilds it (StrictMode, parent remount,\n * Suspense). Child hooks that depend on the pane (`usePaneFolder`,\n * `usePaneInput`) re-bind when this happens.\n *\n * Lifecycle:\n *   - Render: lazy-creates the bundle into a ref so it's available\n *     synchronously on first paint. Render runs twice in StrictMode but\n *     the ref guard prevents double-creation. Orphans from aborted\n *     concurrent renders are reclaimed by `createPane`'s unclaimed-slot\n *     mechanism.\n *   - Effect: claims the bundle so unrelated `createPane` calls won't\n *     dispose it; cleanup disposes the pane unconditionally.\n *   - Effect re-mount (StrictMode or true remount): the bundle in the\n *     ref is now `disposed`, so we create a fresh one and `force()` a\n *     re-render so consumers receive the new identity.\n *\n * Uses `driver: 'raf'` so the stats graph self-ticks via its own\n * `requestAnimationFrame` loop. This makes `usePane` work regardless\n * of whether it's called inside or outside R3F's `<Canvas>` context.\n *\n * @param options - Same {@link CreatePaneOptions} as `createPane`.\n * @returns A {@link PaneBundle}; its identity changes across teardown and\n *   rebuild so dependent hooks (`usePaneFolder`, `usePaneInput`) re-bind.\n *\n * @example\n * ```tsx\n * const { pane } = usePane()\n * const folder = usePaneFolder(pane, 'Settings')\n * const [speed] = usePaneInput(folder, 'speed', 1, { min: 0, max: 10 })\n * ```\n */\nexport function usePane(options: CreatePaneOptions = {}): PaneBundle {\n  // Lazy initializer creates the bundle once, synchronously on first\n  // render, so it's available for first paint. StrictMode's double-invoke\n  // is absorbed by createPane's unclaimed-slot orphan disposal.\n  const [bundle, setBundle] = useState(() => createPane(options))\n\n  // Latest options read non-reactively when a disposed bundle is rebuilt.\n  const getOptions = useEffectEvent(() => options)\n\n  useEffect(() => {\n    if (bundle.disposed) {\n      setBundle(createPane(getOptions()))\n      return\n    }\n    claimPane(bundle)\n    return () => {\n      bundle.pane.dispose()\n    }\n  }, [bundle])\n\n  return bundle\n}\n"],"mappings":"AAAA,SAAS,WAAW,gBAAgB,gBAAgB;AACpD,SAAS,WAAW,kBAAkB;AAqC/B,SAAS,QAAQ,UAA6B,CAAC,GAAe;AAInE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,MAAM,WAAW,OAAO,CAAC;AAG9D,QAAM,aAAa,eAAe,MAAM,OAAO;AAE/C,YAAU,MAAM;AACd,QAAI,OAAO,UAAU;AACnB,gBAAU,WAAW,WAAW,CAAC,CAAC;AAClC;AAAA,IACF;AACA,cAAU,MAAM;AAChB,WAAO,MAAM;AACX,aAAO,KAAK,QAAQ;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;","names":[]}
+{"version":3,"file":"use-pane.js","names":[],"sources":["../../src/react/use-pane.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useState } from 'react'\nimport { claimPane, createPane } from '../create-pane.js'\nimport type { CreatePaneOptions, PaneBundle } from '../create-pane.js'\n\n/**\n * Create a themed Tweakpane instance. Disposes on unmount, recreates on\n * remount. Returns a `PaneBundle` whose identity changes if React tears\n * the component down and rebuilds it (StrictMode, parent remount,\n * Suspense). Child hooks that depend on the pane (`usePaneFolder`,\n * `usePaneInput`) re-bind when this happens.\n *\n * Lifecycle:\n *   - Render: lazy-creates the bundle into a ref so it's available\n *     synchronously on first paint. Render runs twice in StrictMode but\n *     the ref guard prevents double-creation. Orphans from aborted\n *     concurrent renders are reclaimed by `createPane`'s unclaimed-slot\n *     mechanism.\n *   - Effect: claims the bundle so unrelated `createPane` calls won't\n *     dispose it; cleanup disposes the pane unconditionally.\n *   - Effect re-mount (StrictMode or true remount): the bundle in the\n *     ref is now `disposed`, so we create a fresh one and `force()` a\n *     re-render so consumers receive the new identity.\n *\n * Uses `driver: 'raf'` so the stats graph self-ticks via its own\n * `requestAnimationFrame` loop. This makes `usePane` work regardless\n * of whether it's called inside or outside R3F's `<Canvas>` context.\n *\n * @param options - Same {@link CreatePaneOptions} as `createPane`.\n * @returns A {@link PaneBundle}; its identity changes across teardown and\n *   rebuild so dependent hooks (`usePaneFolder`, `usePaneInput`) re-bind.\n *\n * @example\n * ```tsx\n * const { pane } = usePane()\n * const folder = usePaneFolder(pane, 'Settings')\n * const [speed] = usePaneInput(folder, 'speed', 1, { min: 0, max: 10 })\n * ```\n */\nexport function usePane(options: CreatePaneOptions = {}): PaneBundle {\n  // Lazy initializer creates the bundle once, synchronously on first\n  // render, so it's available for first paint. StrictMode's double-invoke\n  // is absorbed by createPane's unclaimed-slot orphan disposal.\n  const [bundle, setBundle] = useState(() => createPane(options))\n\n  // Latest options read non-reactively when a disposed bundle is rebuilt.\n  const getOptions = useEffectEvent(() => options)\n\n  useEffect(() => {\n    if (bundle.disposed) {\n      setBundle(createPane(getOptions()))\n      return\n    }\n    claimPane(bundle)\n    return () => {\n      bundle.pane.dispose()\n    }\n  }, [bundle])\n\n  return bundle\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCA,SAAgB,QAAQ,UAA6B,CAAC,GAAe;CAInE,MAAM,CAAC,QAAQ,aAAa,eAAe,WAAW,OAAO,CAAC;CAG9D,MAAM,aAAa,qBAAqB,OAAO;CAE/C,gBAAgB;EACd,IAAI,OAAO,UAAU;GACnB,UAAU,WAAW,WAAW,CAAC,CAAC;GAClC;EACF;EACA,UAAU,MAAM;EAChB,aAAa;GACX,OAAO,KAAK,QAAQ;EACtB;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO;AACT"}

package/dist/react.d.ts

@@ -1,12 +1,10 @@
-export { usePane } from './react/use-pane.js';
-export { DevtoolsProvider, DevtoolsProviderProps } from './react/devtools-provider.js';
-export { PaneInputOptions, PaneParent, usePaneInput } from './react/use-pane-input.js';
-export { usePaneFolder } from './react/use-pane-folder.js';
-export { usePaneButton } from './react/use-pane-button.js';
-export { PaneRadioGridCell, PaneRadioGridOptions, usePaneRadioGrid } from './react/use-pane-radio-grid.js';
-export { FpsGraphHandle, useFpsGraph } from './react/use-fps-graph.js';
-export { CreatePaneOptions, PaneBundle } from './create-pane.js';
-export { DevtoolsClient, DevtoolsClientOptions, DevtoolsState, DevtoolsStateListener } from './devtools-client.js';
-import 'react';
-import 'tweakpane';
-import 'three-flatland/debug-protocol';
+import { DevtoolsClient, DevtoolsClientOptions, DevtoolsState, DevtoolsStateListener } from "./devtools-client.js";
+import { CreatePaneOptions, PaneBundle } from "./create-pane.js";
+import { usePane } from "./react/use-pane.js";
+import { DevtoolsProvider, DevtoolsProviderProps } from "./react/devtools-provider.js";
+import { PaneInputOptions, PaneParent, usePaneInput } from "./react/use-pane-input.js";
+import { usePaneFolder } from "./react/use-pane-folder.js";
+import { usePaneButton } from "./react/use-pane-button.js";
+import { PaneRadioGridCell, PaneRadioGridOptions, usePaneRadioGrid } from "./react/use-pane-radio-grid.js";
+import { FpsGraphHandle, useFpsGraph } from "./react/use-fps-graph.js";
+export { type CreatePaneOptions, DevtoolsClient, type DevtoolsClientOptions, DevtoolsProvider, type DevtoolsProviderProps, type DevtoolsState, type DevtoolsStateListener, type FpsGraphHandle, type PaneBundle, type PaneInputOptions, type PaneParent, type PaneRadioGridCell, type PaneRadioGridOptions, useFpsGraph, usePane, usePaneButton, usePaneFolder, usePaneInput, usePaneRadioGrid };

package/dist/react.js

@@ -1,3 +1,4 @@
+import { DevtoolsClient } from "./devtools-client.js";
 import { usePane } from "./react/use-pane.js";
 import { DevtoolsProvider } from "./react/devtools-provider.js";
 import { usePaneInput } from "./react/use-pane-input.js";
@@ -5,15 +6,4 @@ import { usePaneFolder } from "./react/use-pane-folder.js";
 import { usePaneButton } from "./react/use-pane-button.js";
 import { usePaneRadioGrid } from "./react/use-pane-radio-grid.js";
 import { useFpsGraph } from "./react/use-fps-graph.js";
-import { DevtoolsClient } from "./devtools-client.js";
-export {
-  DevtoolsClient,
-  DevtoolsProvider,
-  useFpsGraph,
-  usePane,
-  usePaneButton,
-  usePaneFolder,
-  usePaneInput,
-  usePaneRadioGrid
-};
-//# sourceMappingURL=react.js.map
+export { DevtoolsClient, DevtoolsProvider, useFpsGraph, usePane, usePaneButton, usePaneFolder, usePaneInput, usePaneRadioGrid };

package/dist/registry-view.d.ts

@@ -1,24 +1,11 @@
-import { Pane, FolderApi } from 'tweakpane';
-import { DevtoolsClient } from './devtools-client.js';
-import 'three-flatland/debug-protocol';
-
-/**
- * Registry view — one group visible at a time. Header reads
- * `◀ groupName ▶`; arrows cycle through the groups the provider has
- * published. Below the header, every entry in the active group is
- * stacked (one bar chart per entry) so you see the full module in one
- * glance. Hidden while the registry is empty.
- *
- * Groups are derived from the part of each entry name before the
- * first `.` (`forwardPlus.lightCounts` + `forwardPlus.tileScores` →
- * group `forwardPlus`). Names without a dot land in an `ungrouped`
- * bucket.
- */
-
+import { DevtoolsClient } from "./devtools-client.js";
+import { FolderApi, Pane } from "tweakpane";
+//#region src/registry-view.d.ts
 interface RegistryViewHandle {
-    readonly element: HTMLElement;
-    dispose(): void;
+  readonly element: HTMLElement;
+  dispose(): void;
 }
 declare function addRegistryView(parent: Pane | FolderApi, client: DevtoolsClient): RegistryViewHandle;
-
-export { type RegistryViewHandle, addRegistryView };
+//#endregion
+export { RegistryViewHandle, addRegistryView };
+//# sourceMappingURL=registry-view.d.ts.map

package/dist/registry-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry-view.d.ts","names":[],"sources":["../src/registry-view.ts"],"mappings":";;;UAiBiB;WACN,SAAS;EAClB;;iBAuCc,gBAAgB,QAAQ,OAAO,WAAW,QAAQ,iBAAiB"}