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

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

@@ -1,15 +0,0 @@
-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-input.cjs

@@ -1,70 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,44 +0,0 @@
-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-radio-grid.cjs

@@ -1,78 +0,0 @@
-"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

@@ -1 +0,0 @@
-{"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

@@ -1,35 +0,0 @@
-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.cjs

@@ -1,45 +0,0 @@
-"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_exports = {};
-__export(use_pane_exports, {
-  usePane: () => usePane
-});
-module.exports = __toCommonJS(use_pane_exports);
-var import_react = require("react");
-var import_create_pane = require("../create-pane.js");
-function usePane(options = {}) {
-  const [bundle, setBundle] = (0, import_react.useState)(() => (0, import_create_pane.createPane)(options));
-  const getOptions = (0, import_react.useEffectEvent)(() => options);
-  (0, import_react.useEffect)(() => {
-    if (bundle.disposed) {
-      setBundle((0, import_create_pane.createPane)(getOptions()));
-      return;
-    }
-    (0, import_create_pane.claimPane)(bundle);
-    return () => {
-      bundle.pane.dispose();
-    };
-  }, [bundle]);
-  return bundle;
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  usePane
-});
-//# sourceMappingURL=use-pane.cjs.map

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

@@ -1 +0,0 @@
-{"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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoD;AACpD,yBAAsC;AAqC/B,SAAS,QAAQ,UAA6B,CAAC,GAAe;AAInE,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,UAAM,+BAAW,OAAO,CAAC;AAG9D,QAAM,iBAAa,6BAAe,MAAM,OAAO;AAE/C,8BAAU,MAAM;AACd,QAAI,OAAO,UAAU;AACnB,oBAAU,+BAAW,WAAW,CAAC,CAAC;AAClC;AAAA,IACF;AACA,sCAAU,MAAM;AAChB,WAAO,MAAM;AACX,aAAO,KAAK,QAAQ;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AACT;","names":[]}

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

@@ -1,40 +0,0 @@
-import { CreatePaneOptions, PaneBundle } from '../create-pane.cjs';
-import 'tweakpane';
-
-/**
- * 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 })
- * ```
- */
-declare function usePane(options?: CreatePaneOptions): PaneBundle;
-
-export { usePane };

package/dist/react.cjs

@@ -1,50 +0,0 @@
-"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 react_exports = {};
-__export(react_exports, {
-  DevtoolsClient: () => import_devtools_client.DevtoolsClient,
-  DevtoolsProvider: () => import_devtools_provider.DevtoolsProvider,
-  useFpsGraph: () => import_use_fps_graph.useFpsGraph,
-  usePane: () => import_use_pane.usePane,
-  usePaneButton: () => import_use_pane_button.usePaneButton,
-  usePaneFolder: () => import_use_pane_folder.usePaneFolder,
-  usePaneInput: () => import_use_pane_input.usePaneInput,
-  usePaneRadioGrid: () => import_use_pane_radio_grid.usePaneRadioGrid
-});
-module.exports = __toCommonJS(react_exports);
-var import_use_pane = require("./react/use-pane.js");
-var import_devtools_provider = require("./react/devtools-provider.js");
-var import_use_pane_input = require("./react/use-pane-input.js");
-var import_use_pane_folder = require("./react/use-pane-folder.js");
-var import_use_pane_button = require("./react/use-pane-button.js");
-var import_use_pane_radio_grid = require("./react/use-pane-radio-grid.js");
-var import_use_fps_graph = require("./react/use-fps-graph.js");
-var import_devtools_client = require("./devtools-client.js");
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  DevtoolsClient,
-  DevtoolsProvider,
-  useFpsGraph,
-  usePane,
-  usePaneButton,
-  usePaneFolder,
-  usePaneInput,
-  usePaneRadioGrid
-});
-//# sourceMappingURL=react.cjs.map

package/dist/react.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/react.ts"],"sourcesContent":["export { usePane } from './react/use-pane.js'\nexport { DevtoolsProvider } from './react/devtools-provider.js'\nexport type { DevtoolsProviderProps } from './react/devtools-provider.js'\nexport { usePaneInput } from './react/use-pane-input.js'\nexport type { PaneParent, PaneInputOptions } from './react/use-pane-input.js'\nexport { usePaneFolder } from './react/use-pane-folder.js'\nexport { usePaneButton } from './react/use-pane-button.js'\nexport { usePaneRadioGrid } from './react/use-pane-radio-grid.js'\nexport type { PaneRadioGridCell, PaneRadioGridOptions } from './react/use-pane-radio-grid.js'\nexport { useFpsGraph } from './react/use-fps-graph.js'\nexport type { FpsGraphHandle } from './react/use-fps-graph.js'\nexport type { CreatePaneOptions, PaneBundle } from './create-pane.js'\n// Advanced: re-export the bus consumer so callers can spin up extra\n// consumers next to the one that `usePane` already manages.\nexport { DevtoolsClient } from './devtools-client.js'\nexport type {\n  DevtoolsClientOptions,\n  DevtoolsState,\n  DevtoolsStateListener,\n} from './devtools-client.js'\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAwB;AACxB,+BAAiC;AAEjC,4BAA6B;AAE7B,6BAA8B;AAC9B,6BAA8B;AAC9B,iCAAiC;AAEjC,2BAA4B;AAK5B,6BAA+B;","names":[]}

package/dist/react.d.cts

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

package/dist/react.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/react.ts"],"sourcesContent":["export { usePane } from './react/use-pane.js'\nexport { DevtoolsProvider } from './react/devtools-provider.js'\nexport type { DevtoolsProviderProps } from './react/devtools-provider.js'\nexport { usePaneInput } from './react/use-pane-input.js'\nexport type { PaneParent, PaneInputOptions } from './react/use-pane-input.js'\nexport { usePaneFolder } from './react/use-pane-folder.js'\nexport { usePaneButton } from './react/use-pane-button.js'\nexport { usePaneRadioGrid } from './react/use-pane-radio-grid.js'\nexport type { PaneRadioGridCell, PaneRadioGridOptions } from './react/use-pane-radio-grid.js'\nexport { useFpsGraph } from './react/use-fps-graph.js'\nexport type { FpsGraphHandle } from './react/use-fps-graph.js'\nexport type { CreatePaneOptions, PaneBundle } from './create-pane.js'\n// Advanced: re-export the bus consumer so callers can spin up extra\n// consumers next to the one that `usePane` already manages.\nexport { DevtoolsClient } from './devtools-client.js'\nexport type {\n  DevtoolsClientOptions,\n  DevtoolsState,\n  DevtoolsStateListener,\n} from './devtools-client.js'\n"],"mappings":"AAAA,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAEjC,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AAEjC,SAAS,mBAAmB;AAK5B,SAAS,sBAAsB;","names":[]}