@three-flatland/devtools 0.1.0-alpha.3

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

@@ -0,0 +1,34 @@
+import { useEffect, useRef } from "react";
+function usePaneButton(parent, title, onClick) {
+  const callbackRef = useRef(onClick);
+  callbackRef.current = onClick;
+  const buttonRef = useRef(null);
+  const mountedRef = useRef(false);
+  if (parent && buttonRef.current === null) {
+    const button = parent.addButton({ title });
+    button.on("click", () => callbackRef.current());
+    buttonRef.current = button;
+  }
+  useEffect(() => {
+    mountedRef.current = true;
+    if (parent && buttonRef.current === null) {
+      const button = parent.addButton({ title });
+      button.on("click", () => callbackRef.current());
+      buttonRef.current = button;
+    }
+    return () => {
+      const button = buttonRef.current;
+      setTimeout(() => {
+        if (!mountedRef.current && button) {
+          button.dispose();
+          if (buttonRef.current === button) buttonRef.current = null;
+        }
+      }, 0);
+      mountedRef.current = false;
+    };
+  }, [parent]);
+}
+export {
+  usePaneButton
+};
+//# sourceMappingURL=use-pane-button.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/use-pane-button.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport type { PaneParent } from './use-pane-input.js'\n\n/**\n * Add a button to a Tweakpane parent. Uses a ref for the callback to avoid stale closures.\n * Uses deferred disposal to survive React strict mode.\n */\nexport function usePaneButton(\n  parent: PaneParent | null,\n  title: string,\n  onClick: () => void,\n): void {\n  const callbackRef = useRef(onClick)\n  callbackRef.current = onClick\n  const buttonRef = useRef<{ dispose(): void } | null>(null)\n  const mountedRef = useRef(false)\n\n  if (parent && buttonRef.current === null) {\n    const button = parent.addButton({ title })\n    button.on('click', () => callbackRef.current())\n    buttonRef.current = button\n  }\n\n  useEffect(() => {\n    mountedRef.current = true\n\n    if (parent && buttonRef.current === null) {\n      const button = parent.addButton({ title })\n      button.on('click', () => callbackRef.current())\n      buttonRef.current = button\n    }\n\n    return () => {\n      const button = buttonRef.current\n      setTimeout(() => {\n        if (!mountedRef.current && button) {\n          button.dispose()\n          if (buttonRef.current === button) buttonRef.current = null\n        }\n      }, 0)\n      mountedRef.current = false\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [parent])\n}\n"],"mappings":"AAAA,SAAS,WAAW,cAAc;AAO3B,SAAS,cACd,QACA,OACA,SACM;AACN,QAAM,cAAc,OAAO,OAAO;AAClC,cAAY,UAAU;AACtB,QAAM,YAAY,OAAmC,IAAI;AACzD,QAAM,aAAa,OAAO,KAAK;AAE/B,MAAI,UAAU,UAAU,YAAY,MAAM;AACxC,UAAM,SAAS,OAAO,UAAU,EAAE,MAAM,CAAC;AACzC,WAAO,GAAG,SAAS,MAAM,YAAY,QAAQ,CAAC;AAC9C,cAAU,UAAU;AAAA,EACtB;AAEA,YAAU,MAAM;AACd,eAAW,UAAU;AAErB,QAAI,UAAU,UAAU,YAAY,MAAM;AACxC,YAAM,SAAS,OAAO,UAAU,EAAE,MAAM,CAAC;AACzC,aAAO,GAAG,SAAS,MAAM,YAAY,QAAQ,CAAC;AAC9C,gBAAU,UAAU;AAAA,IACtB;AAEA,WAAO,MAAM;AACX,YAAM,SAAS,UAAU;AACzB,iBAAW,MAAM;AACf,YAAI,CAAC,WAAW,WAAW,QAAQ;AACjC,iBAAO,QAAQ;AACf,cAAI,UAAU,YAAY,OAAQ,WAAU,UAAU;AAAA,QACxD;AAAA,MACF,GAAG,CAAC;AACJ,iBAAW,UAAU;AAAA,IACvB;AAAA,EAEF,GAAG,CAAC,MAAM,CAAC;AACb;","names":[]}

package/dist/react/use-pane-folder.cjs

@@ -0,0 +1,48 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_pane_folder_exports = {};
+__export(use_pane_folder_exports, {
+  usePaneFolder: () => usePaneFolder
+});
+module.exports = __toCommonJS(use_pane_folder_exports);
+var import_react = require("react");
+function usePaneFolder(parent, title, options = {}) {
+  const [folder, setFolder] = (0, import_react.useState)(null);
+  const getOptions = (0, import_react.useEffectEvent)(() => options);
+  (0, import_react.useLayoutEffect)(() => {
+    if (!parent) {
+      setFolder(null);
+      return;
+    }
+    const f = parent.addFolder({ expanded: false, ...getOptions(), title });
+    setFolder(f);
+    return () => {
+      try {
+        f.dispose();
+      } catch {
+      }
+    };
+  }, [parent, title]);
+  return folder;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePaneFolder
+});
+//# sourceMappingURL=use-pane-folder.cjs.map

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

@@ -0,0 +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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA0D;AAanD,SAAS,cACd,QACA,OACA,UAAiC,CAAC,GAChB;AAClB,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAA2B,IAAI;AAK3D,QAAM,iBAAa,6BAAe,MAAM,OAAO;AAE/C,oCAAgB,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":[]}

package/dist/react/use-pane-folder.d.cts

@@ -0,0 +1,15 @@
+import { FolderParams, FolderApi } from 'tweakpane';
+import { PaneParent } from './use-pane-input.cjs';
+
+/**
+ * Create a Tweakpane folder underneath `parent`. Disposes on unmount and
+ * recreates when `parent` (or `title`) changes — e.g., when `usePane`
+ * tears down and rebuilds its bundle on a StrictMode remount.
+ *
+ * Returns `null` on the first render before the layout effect commits,
+ * then the FolderApi on the next render. The two renders happen
+ * synchronously before paint, so consumers don't see a flicker.
+ */
+declare function usePaneFolder(parent: PaneParent | null, title: string, options?: Partial<FolderParams>): FolderApi | null;
+
+export { usePaneFolder };

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

@@ -0,0 +1,15 @@
+import { FolderParams, FolderApi } from 'tweakpane';
+import { PaneParent } from './use-pane-input.js';
+
+/**
+ * Create a Tweakpane folder underneath `parent`. Disposes on unmount and
+ * recreates when `parent` (or `title`) changes — e.g., when `usePane`
+ * tears down and rebuilds its bundle on a StrictMode remount.
+ *
+ * Returns `null` on the first render before the layout effect commits,
+ * then the FolderApi on the next render. The two renders happen
+ * synchronously before paint, so consumers don't see a flicker.
+ */
+declare function usePaneFolder(parent: PaneParent | null, title: string, options?: Partial<FolderParams>): FolderApi | null;
+
+export { usePaneFolder };

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

@@ -0,0 +1,24 @@
+import { useEffectEvent, useLayoutEffect, useState } from "react";
+function usePaneFolder(parent, title, options = {}) {
+  const [folder, setFolder] = useState(null);
+  const getOptions = useEffectEvent(() => options);
+  useLayoutEffect(() => {
+    if (!parent) {
+      setFolder(null);
+      return;
+    }
+    const f = parent.addFolder({ expanded: false, ...getOptions(), title });
+    setFolder(f);
+    return () => {
+      try {
+        f.dispose();
+      } catch {
+      }
+    };
+  }, [parent, title]);
+  return folder;
+}
+export {
+  usePaneFolder
+};
+//# sourceMappingURL=use-pane-folder.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,70 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_pane_input_exports = {};
+__export(use_pane_input_exports, {
+  usePaneInput: () => usePaneInput
+});
+module.exports = __toCommonJS(use_pane_input_exports);
+var import_react = require("react");
+function usePaneInput(parent, key, initialValue, options = {}) {
+  const [value, setValueState] = (0, import_react.useState)(initialValue);
+  const paramsRef = (0, import_react.useRef)({ [key]: initialValue });
+  const bindingRef = (0, import_react.useRef)(null);
+  const getOptions = (0, import_react.useEffectEvent)(() => options);
+  const getValue = (0, import_react.useEffectEvent)(() => value);
+  (0, import_react.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 = (0, import_react.useCallback)(
+    (v) => {
+      paramsRef.current[key] = v;
+      setValueState(v);
+      bindingRef.current?.refresh();
+    },
+    [key]
+  );
+  return [value, setValue];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePaneInput
+});
+//# sourceMappingURL=use-pane-input.cjs.map

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

@@ -0,0 +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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+E;AA0CxE,SAAS,aACd,QACA,KACA,cACA,UAA4B,CAAC,GACR;AACrB,QAAM,CAAC,OAAO,aAAa,QAAI,uBAAY,YAAY;AACvD,QAAM,gBAAY,qBAAgC,EAAE,CAAC,GAAG,GAAG,aAAa,CAAC;AACzE,QAAM,iBAAa,qBAAoD,IAAI;AAO3E,QAAM,iBAAa,6BAAe,MAAM,OAAO;AAC/C,QAAM,eAAW,6BAAe,MAAM,KAAK;AAE3C,oCAAgB,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,eAAW;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":[]}

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

@@ -0,0 +1,44 @@
+import { Pane, FolderApi } from 'tweakpane';
+
+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;
+}
+/**
+ * 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.
+ */
+declare function usePaneInput<T>(parent: PaneParent | null, key: string, initialValue: T, options?: PaneInputOptions): [T, (v: T) => void];
+
+export { type PaneInputOptions, type PaneParent, usePaneInput };

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

@@ -0,0 +1,44 @@
+import { Pane, FolderApi } from 'tweakpane';
+
+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;
+}
+/**
+ * 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.
+ */
+declare function usePaneInput<T>(parent: PaneParent | null, key: string, initialValue: T, options?: PaneInputOptions): [T, (v: T) => void];
+
+export { type PaneInputOptions, type PaneParent, usePaneInput };

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

@@ -0,0 +1,46 @@
+import { useCallback, useEffectEvent, useLayoutEffect, useRef, useState } from "react";
+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];
+}
+export {
+  usePaneInput
+};
+//# sourceMappingURL=use-pane-input.js.map

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

@@ -0,0 +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":[]}

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

@@ -0,0 +1,78 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_pane_radio_grid_exports = {};
+__export(use_pane_radio_grid_exports, {
+  usePaneRadioGrid: () => usePaneRadioGrid
+});
+module.exports = __toCommonJS(use_pane_radio_grid_exports);
+var import_react = require("react");
+function usePaneRadioGrid(parent, options) {
+  const { cells, initialValue, groupName, size } = options;
+  const [value, setValueState] = (0, import_react.useState)(initialValue);
+  const bladeRef = (0, import_react.useRef)(null);
+  const cellsRef = (0, import_react.useRef)(cells);
+  cellsRef.current = cells;
+  const mountedRef = (0, import_react.useRef)(false);
+  const ensureBlade = (0, import_react.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();
+  (0, import_react.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 = (0, import_react.useCallback)((v) => {
+    setValueState(v);
+    const blade = bladeRef.current;
+    if (blade && "value" in blade) blade.value = v;
+  }, []);
+  return [value, setValue];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePaneRadioGrid
+});
+//# sourceMappingURL=use-pane-radio-grid.cjs.map

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

@@ -0,0 +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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAyD;AAkClD,SAAS,iBACd,QACA,SACqB;AACrB,QAAM,EAAE,OAAO,cAAc,WAAW,KAAK,IAAI;AACjD,QAAM,CAAC,OAAO,aAAa,QAAI,uBAAY,YAAY;AAEvD,QAAM,eAAW,qBAA0G,IAAI;AAC/H,QAAM,eAAW,qBAAO,KAAK;AAC7B,WAAS,UAAU;AACnB,QAAM,iBAAa,qBAAO,KAAK;AAE/B,QAAM,kBAAc,0BAAY,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,8BAAU,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,eAAW,0BAAY,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":[]}

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

@@ -0,0 +1,35 @@
+import { PaneParent } from './use-pane-input.cjs';
+import 'tweakpane';
+
+interface PaneRadioGridCell<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];
+}
+/**
+ * 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.
+ */
+declare function usePaneRadioGrid<T>(parent: PaneParent | null, options: PaneRadioGridOptions<T>): [T, (v: T) => void];
+
+export { type PaneRadioGridCell, type PaneRadioGridOptions, usePaneRadioGrid };

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

@@ -0,0 +1,35 @@
+import { PaneParent } from './use-pane-input.js';
+import 'tweakpane';
+
+interface PaneRadioGridCell<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];
+}
+/**
+ * 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.
+ */
+declare function usePaneRadioGrid<T>(parent: PaneParent | null, options: PaneRadioGridOptions<T>): [T, (v: T) => void];
+
+export { type PaneRadioGridCell, type PaneRadioGridOptions, usePaneRadioGrid };

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

@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+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];
+}
+export {
+  usePaneRadioGrid
+};
+//# sourceMappingURL=use-pane-radio-grid.js.map

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

@@ -0,0 +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":[]}