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

package/dist/provider-switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-switcher.d.ts","names":[],"sources":["../src/provider-switcher.ts"],"mappings":";;;UAWiB;WACN,SAAS;EAClB;;iBAGc,oBAAoB,QAAQ,OAAO,WAAW,QAAQ,iBAAiB"}

package/dist/provider-switcher.js

@@ -1,71 +1,71 @@
+//#region src/provider-switcher.ts
 function addProviderSwitcher(parent, client) {
-  const blade = parent.addBlade({ view: "separator" });
-  const bladeEl = blade.element;
-  bladeEl.innerHTML = "";
-  bladeEl.className = "tp-cntv";
-  bladeEl.style.cssText = "display:none";
-  const row = document.createElement("div");
-  row.style.cssText = [
-    "display:grid",
-    "grid-template-columns:auto 1fr auto",
-    "align-items:center",
-    "gap:6px",
-    "height:calc(var(--cnt-usz, 20px) * 1.1)",
-    "padding:0 6px",
-    "font-size:12px",
-    "line-height:1",
-    "color:var(--tp-label-foreground-color)",
-    "font-variant-numeric:tabular-nums",
-    "user-select:none",
-    "-webkit-user-select:none"
-  ].join(";");
-  const arrowStyle = "cursor:pointer;padding:0 4px;opacity:0.8;font-family:ui-monospace,monospace;";
-  const prevBtn = document.createElement("span");
-  prevBtn.textContent = "\u25C0";
-  prevBtn.style.cssText = arrowStyle;
-  prevBtn.setAttribute("role", "button");
-  prevBtn.setAttribute("aria-label", "Previous provider");
-  const label = document.createElement("span");
-  label.style.cssText = "text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
-  const nextBtn = document.createElement("span");
-  nextBtn.textContent = "\u25B6";
-  nextBtn.style.cssText = arrowStyle;
-  nextBtn.setAttribute("role", "button");
-  nextBtn.setAttribute("aria-label", "Next provider");
-  row.appendChild(prevBtn);
-  row.appendChild(label);
-  row.appendChild(nextBtn);
-  bladeEl.appendChild(row);
-  function step(delta) {
-    const providers = client.state.providers;
-    if (providers.length < 2) return;
-    const selected = client.state.selectedProviderId;
-    const idx = Math.max(0, providers.findIndex((p) => p.id === selected));
-    const next = providers[(idx + delta + providers.length) % providers.length];
-    client.selectProvider(next.id);
-  }
-  prevBtn.addEventListener("click", () => step(-1));
-  nextBtn.addEventListener("click", () => step(1));
-  const unsubscribe = client.addListener((s) => {
-    bladeEl.style.display = s.providers.length >= 2 ? "" : "none";
-    const current = s.providers.find((p) => p.id === s.selectedProviderId);
-    if (current) {
-      label.textContent = `${current.kind}:${current.name}`;
-      label.title = `${current.kind}:${current.name} (${current.id.slice(0, 8)})`;
-    } else {
-      label.textContent = "\u2014";
-      label.title = "";
-    }
-  });
-  return {
-    element: bladeEl,
-    dispose() {
-      unsubscribe();
-      blade.dispose();
-    }
-  };
+	const blade = parent.addBlade({ view: "separator" });
+	const bladeEl = blade.element;
+	bladeEl.innerHTML = "";
+	bladeEl.className = "tp-cntv";
+	bladeEl.style.cssText = "display:none";
+	const row = document.createElement("div");
+	row.style.cssText = [
+		"display:grid",
+		"grid-template-columns:auto 1fr auto",
+		"align-items:center",
+		"gap:6px",
+		"height:calc(var(--cnt-usz, 20px) * 1.1)",
+		"padding:0 6px",
+		"font-size:12px",
+		"line-height:1",
+		"color:var(--tp-label-foreground-color)",
+		"font-variant-numeric:tabular-nums",
+		"user-select:none",
+		"-webkit-user-select:none"
+	].join(";");
+	const arrowStyle = "cursor:pointer;padding:0 4px;opacity:0.8;font-family:ui-monospace,monospace;";
+	const prevBtn = document.createElement("span");
+	prevBtn.textContent = "◀";
+	prevBtn.style.cssText = arrowStyle;
+	prevBtn.setAttribute("role", "button");
+	prevBtn.setAttribute("aria-label", "Previous provider");
+	const label = document.createElement("span");
+	label.style.cssText = "text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
+	const nextBtn = document.createElement("span");
+	nextBtn.textContent = "▶";
+	nextBtn.style.cssText = arrowStyle;
+	nextBtn.setAttribute("role", "button");
+	nextBtn.setAttribute("aria-label", "Next provider");
+	row.appendChild(prevBtn);
+	row.appendChild(label);
+	row.appendChild(nextBtn);
+	bladeEl.appendChild(row);
+	function step(delta) {
+		const providers = client.state.providers;
+		if (providers.length < 2) return;
+		const selected = client.state.selectedProviderId;
+		const next = providers[(Math.max(0, providers.findIndex((p) => p.id === selected)) + delta + providers.length) % providers.length];
+		client.selectProvider(next.id);
+	}
+	prevBtn.addEventListener("click", () => step(-1));
+	nextBtn.addEventListener("click", () => step(1));
+	const unsubscribe = client.addListener((s) => {
+		bladeEl.style.display = s.providers.length >= 2 ? "" : "none";
+		const current = s.providers.find((p) => p.id === s.selectedProviderId);
+		if (current) {
+			label.textContent = `${current.kind}:${current.name}`;
+			label.title = `${current.kind}:${current.name} (${current.id.slice(0, 8)})`;
+		} else {
+			label.textContent = "—";
+			label.title = "";
+		}
+	});
+	return {
+		element: bladeEl,
+		dispose() {
+			unsubscribe();
+			blade.dispose();
+		}
+	};
 }
-export {
-  addProviderSwitcher
-};
+//#endregion
+export { addProviderSwitcher };
+
 //# sourceMappingURL=provider-switcher.js.map

package/dist/provider-switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/provider-switcher.ts"],"sourcesContent":["/**\n * Provider switcher — a single-row blade with ◀ / ▶ arrows + the\n * selected provider's name. Hidden while only one provider is known\n * (the common case); shown automatically whenever two or more appear\n * on the discovery bus.\n */\n\nimport type { FolderApi, Pane } from 'tweakpane'\n\nimport type { DevtoolsClient } from './devtools-client.js'\n\nexport interface ProviderSwitcherHandle {\n  readonly element: HTMLElement\n  dispose(): void\n}\n\nexport function addProviderSwitcher(\n  parent: Pane | FolderApi,\n  client: DevtoolsClient,\n): ProviderSwitcherHandle {\n  // Separator-blade shim so the rack ordering stays correct; we swap\n  // its innards for our own layout (same pattern as stats-graph / row).\n  const blade = parent.addBlade({ view: 'separator' }) as unknown as {\n    element: HTMLElement\n    dispose(): void\n  }\n  const bladeEl = blade.element\n  bladeEl.innerHTML = ''\n  bladeEl.className = 'tp-cntv'\n  bladeEl.style.cssText = 'display:none' // Hidden until >= 2 providers\n\n  const row = document.createElement('div')\n  row.style.cssText = [\n    'display:grid',\n    'grid-template-columns:auto 1fr auto',\n    'align-items:center',\n    'gap:6px',\n    'height:calc(var(--cnt-usz, 20px) * 1.1)',\n    'padding:0 6px',\n    'font-size:12px',\n    'line-height:1',\n    'color:var(--tp-label-foreground-color)',\n    'font-variant-numeric:tabular-nums',\n    'user-select:none',\n    '-webkit-user-select:none',\n  ].join(';')\n\n  const arrowStyle =\n    'cursor:pointer;padding:0 4px;opacity:0.8;font-family:ui-monospace,monospace;'\n  const prevBtn = document.createElement('span')\n  prevBtn.textContent = '◀'\n  prevBtn.style.cssText = arrowStyle\n  prevBtn.setAttribute('role', 'button')\n  prevBtn.setAttribute('aria-label', 'Previous provider')\n\n  const label = document.createElement('span')\n  label.style.cssText = 'text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'\n\n  const nextBtn = document.createElement('span')\n  nextBtn.textContent = '▶'\n  nextBtn.style.cssText = arrowStyle\n  nextBtn.setAttribute('role', 'button')\n  nextBtn.setAttribute('aria-label', 'Next provider')\n\n  row.appendChild(prevBtn)\n  row.appendChild(label)\n  row.appendChild(nextBtn)\n  bladeEl.appendChild(row)\n\n  function step(delta: number): void {\n    const providers = client.state.providers\n    if (providers.length < 2) return\n    const selected = client.state.selectedProviderId\n    const idx = Math.max(0, providers.findIndex((p) => p.id === selected))\n    const next = providers[(idx + delta + providers.length) % providers.length]!\n    client.selectProvider(next.id)\n  }\n\n  prevBtn.addEventListener('click', () => step(-1))\n  nextBtn.addEventListener('click', () => step(1))\n\n  const unsubscribe = client.addListener((s) => {\n    // Visibility: only when multi-provider.\n    bladeEl.style.display = s.providers.length >= 2 ? '' : 'none'\n    const current = s.providers.find((p) => p.id === s.selectedProviderId)\n    if (current) {\n      // Prefix with kind so the user can tell flatland's system provider\n      // apart from a user provider with the same display name.\n      label.textContent = `${current.kind}:${current.name}`\n      label.title = `${current.kind}:${current.name} (${current.id.slice(0, 8)})`\n    } else {\n      label.textContent = '—'\n      label.title = ''\n    }\n  })\n\n  return {\n    element: bladeEl,\n    dispose() {\n      unsubscribe()\n      blade.dispose()\n    },\n  }\n}\n"],"mappings":"AAgBO,SAAS,oBACd,QACA,QACwB;AAGxB,QAAM,QAAQ,OAAO,SAAS,EAAE,MAAM,YAAY,CAAC;AAInD,QAAM,UAAU,MAAM;AACtB,UAAQ,YAAY;AACpB,UAAQ,YAAY;AACpB,UAAQ,MAAM,UAAU;AAExB,QAAM,MAAM,SAAS,cAAc,KAAK;AACxC,MAAI,MAAM,UAAU;AAAA,IAClB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,EAAE,KAAK,GAAG;AAEV,QAAM,aACJ;AACF,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,UAAQ,cAAc;AACtB,UAAQ,MAAM,UAAU;AACxB,UAAQ,aAAa,QAAQ,QAAQ;AACrC,UAAQ,aAAa,cAAc,mBAAmB;AAEtD,QAAM,QAAQ,SAAS,cAAc,MAAM;AAC3C,QAAM,MAAM,UAAU;AAEtB,QAAM,UAAU,SAAS,cAAc,MAAM;AAC7C,UAAQ,cAAc;AACtB,UAAQ,MAAM,UAAU;AACxB,UAAQ,aAAa,QAAQ,QAAQ;AACrC,UAAQ,aAAa,cAAc,eAAe;AAElD,MAAI,YAAY,OAAO;AACvB,MAAI,YAAY,KAAK;AACrB,MAAI,YAAY,OAAO;AACvB,UAAQ,YAAY,GAAG;AAEvB,WAAS,KAAK,OAAqB;AACjC,UAAM,YAAY,OAAO,MAAM;AAC/B,QAAI,UAAU,SAAS,EAAG;AAC1B,UAAM,WAAW,OAAO,MAAM;AAC9B,UAAM,MAAM,KAAK,IAAI,GAAG,UAAU,UAAU,CAAC,MAAM,EAAE,OAAO,QAAQ,CAAC;AACrE,UAAM,OAAO,WAAW,MAAM,QAAQ,UAAU,UAAU,UAAU,MAAM;AAC1E,WAAO,eAAe,KAAK,EAAE;AAAA,EAC/B;AAEA,UAAQ,iBAAiB,SAAS,MAAM,KAAK,EAAE,CAAC;AAChD,UAAQ,iBAAiB,SAAS,MAAM,KAAK,CAAC,CAAC;AAE/C,QAAM,cAAc,OAAO,YAAY,CAAC,MAAM;AAE5C,YAAQ,MAAM,UAAU,EAAE,UAAU,UAAU,IAAI,KAAK;AACvD,UAAM,UAAU,EAAE,UAAU,KAAK,CAAC,MAAM,EAAE,OAAO,EAAE,kBAAkB;AACrE,QAAI,SAAS;AAGX,YAAM,cAAc,GAAG,QAAQ,IAAI,IAAI,QAAQ,IAAI;AACnD,YAAM,QAAQ,GAAG,QAAQ,IAAI,IAAI,QAAQ,IAAI,KAAK,QAAQ,GAAG,MAAM,GAAG,CAAC,CAAC;AAAA,IAC1E,OAAO;AACL,YAAM,cAAc;AACpB,YAAM,QAAQ;AAAA,IAChB;AAAA,EACF,CAAC;AAED,SAAO;AAAA,IACL,SAAS;AAAA,IACT,UAAU;AACR,kBAAY;AACZ,YAAM,QAAQ;AAAA,IAChB;AAAA,EACF;AACF;","names":[]}
+{"version":3,"file":"provider-switcher.js","names":[],"sources":["../src/provider-switcher.ts"],"sourcesContent":["/**\n * Provider switcher — a single-row blade with ◀ / ▶ arrows + the\n * selected provider's name. Hidden while only one provider is known\n * (the common case); shown automatically whenever two or more appear\n * on the discovery bus.\n */\n\nimport type { FolderApi, Pane } from 'tweakpane'\n\nimport type { DevtoolsClient } from './devtools-client.js'\n\nexport interface ProviderSwitcherHandle {\n  readonly element: HTMLElement\n  dispose(): void\n}\n\nexport function addProviderSwitcher(parent: Pane | FolderApi, client: DevtoolsClient): ProviderSwitcherHandle {\n  // Separator-blade shim so the rack ordering stays correct; we swap\n  // its innards for our own layout (same pattern as stats-graph / row).\n  const blade = parent.addBlade({ view: 'separator' }) as unknown as {\n    element: HTMLElement\n    dispose(): void\n  }\n  const bladeEl = blade.element\n  bladeEl.innerHTML = ''\n  bladeEl.className = 'tp-cntv'\n  bladeEl.style.cssText = 'display:none' // Hidden until >= 2 providers\n\n  const row = document.createElement('div')\n  row.style.cssText = [\n    'display:grid',\n    'grid-template-columns:auto 1fr auto',\n    'align-items:center',\n    'gap:6px',\n    'height:calc(var(--cnt-usz, 20px) * 1.1)',\n    'padding:0 6px',\n    'font-size:12px',\n    'line-height:1',\n    'color:var(--tp-label-foreground-color)',\n    'font-variant-numeric:tabular-nums',\n    'user-select:none',\n    '-webkit-user-select:none',\n  ].join(';')\n\n  const arrowStyle = 'cursor:pointer;padding:0 4px;opacity:0.8;font-family:ui-monospace,monospace;'\n  const prevBtn = document.createElement('span')\n  prevBtn.textContent = '◀'\n  prevBtn.style.cssText = arrowStyle\n  prevBtn.setAttribute('role', 'button')\n  prevBtn.setAttribute('aria-label', 'Previous provider')\n\n  const label = document.createElement('span')\n  label.style.cssText = 'text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'\n\n  const nextBtn = document.createElement('span')\n  nextBtn.textContent = '▶'\n  nextBtn.style.cssText = arrowStyle\n  nextBtn.setAttribute('role', 'button')\n  nextBtn.setAttribute('aria-label', 'Next provider')\n\n  row.appendChild(prevBtn)\n  row.appendChild(label)\n  row.appendChild(nextBtn)\n  bladeEl.appendChild(row)\n\n  function step(delta: number): void {\n    const providers = client.state.providers\n    if (providers.length < 2) return\n    const selected = client.state.selectedProviderId\n    const idx = Math.max(\n      0,\n      providers.findIndex((p) => p.id === selected)\n    )\n    const next = providers[(idx + delta + providers.length) % providers.length]!\n    client.selectProvider(next.id)\n  }\n\n  prevBtn.addEventListener('click', () => step(-1))\n  nextBtn.addEventListener('click', () => step(1))\n\n  const unsubscribe = client.addListener((s) => {\n    // Visibility: only when multi-provider.\n    bladeEl.style.display = s.providers.length >= 2 ? '' : 'none'\n    const current = s.providers.find((p) => p.id === s.selectedProviderId)\n    if (current) {\n      // Prefix with kind so the user can tell flatland's system provider\n      // apart from a user provider with the same display name.\n      label.textContent = `${current.kind}:${current.name}`\n      label.title = `${current.kind}:${current.name} (${current.id.slice(0, 8)})`\n    } else {\n      label.textContent = '—'\n      label.title = ''\n    }\n  })\n\n  return {\n    element: bladeEl,\n    dispose() {\n      unsubscribe()\n      blade.dispose()\n    },\n  }\n}\n"],"mappings":";AAgBA,SAAgB,oBAAoB,QAA0B,QAAgD;CAG5G,MAAM,QAAQ,OAAO,SAAS,EAAE,MAAM,YAAY,CAAC;CAInD,MAAM,UAAU,MAAM;CACtB,QAAQ,YAAY;CACpB,QAAQ,YAAY;CACpB,QAAQ,MAAM,UAAU;CAExB,MAAM,MAAM,SAAS,cAAc,KAAK;CACxC,IAAI,MAAM,UAAU;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,GAAG;CAEV,MAAM,aAAa;CACnB,MAAM,UAAU,SAAS,cAAc,MAAM;CAC7C,QAAQ,cAAc;CACtB,QAAQ,MAAM,UAAU;CACxB,QAAQ,aAAa,QAAQ,QAAQ;CACrC,QAAQ,aAAa,cAAc,mBAAmB;CAEtD,MAAM,QAAQ,SAAS,cAAc,MAAM;CAC3C,MAAM,MAAM,UAAU;CAEtB,MAAM,UAAU,SAAS,cAAc,MAAM;CAC7C,QAAQ,cAAc;CACtB,QAAQ,MAAM,UAAU;CACxB,QAAQ,aAAa,QAAQ,QAAQ;CACrC,QAAQ,aAAa,cAAc,eAAe;CAElD,IAAI,YAAY,OAAO;CACvB,IAAI,YAAY,KAAK;CACrB,IAAI,YAAY,OAAO;CACvB,QAAQ,YAAY,GAAG;CAEvB,SAAS,KAAK,OAAqB;EACjC,MAAM,YAAY,OAAO,MAAM;EAC/B,IAAI,UAAU,SAAS,GAAG;EAC1B,MAAM,WAAW,OAAO,MAAM;EAK9B,MAAM,OAAO,WAJD,KAAK,IACf,GACA,UAAU,WAAW,MAAM,EAAE,OAAO,QAAQ,CAEpB,IAAI,QAAQ,UAAU,UAAU,UAAU;EACpE,OAAO,eAAe,KAAK,EAAE;CAC/B;CAEA,QAAQ,iBAAiB,eAAe,KAAK,EAAE,CAAC;CAChD,QAAQ,iBAAiB,eAAe,KAAK,CAAC,CAAC;CAE/C,MAAM,cAAc,OAAO,aAAa,MAAM;EAE5C,QAAQ,MAAM,UAAU,EAAE,UAAU,UAAU,IAAI,KAAK;EACvD,MAAM,UAAU,EAAE,UAAU,MAAM,MAAM,EAAE,OAAO,EAAE,kBAAkB;EACrE,IAAI,SAAS;GAGX,MAAM,cAAc,GAAG,QAAQ,KAAK,GAAG,QAAQ;GAC/C,MAAM,QAAQ,GAAG,QAAQ,KAAK,GAAG,QAAQ,KAAK,IAAI,QAAQ,GAAG,MAAM,GAAG,CAAC,EAAE;EAC3E,OAAO;GACL,MAAM,cAAc;GACpB,MAAM,QAAQ;EAChB;CACF,CAAC;CAED,OAAO;EACL,SAAS;EACT,UAAU;GACR,YAAY;GACZ,MAAM,QAAQ;EAChB;CACF;AACF"}

package/dist/react/devtools-provider.d.ts

@@ -1,12 +1,12 @@
-import { ReactElement } from 'react';
-
+import { ReactElement } from "react";
+//#region src/react/devtools-provider.d.ts
 interface DevtoolsProviderProps {
-    /** Display name shown in the consumer's provider switcher. */
-    name?: string;
-    /** Optional explicit provider id (defaults to a fresh uuid). */
-    id?: string;
-    /** Override the discovery channel name (advanced). */
-    discoveryChannelName?: string;
+  /** Display name shown in the consumer's provider switcher. */
+  name?: string;
+  /** Optional explicit provider id (defaults to a fresh uuid). */
+  id?: string;
+  /** Override the discovery channel name (advanced). */
+  discoveryChannelName?: string;
 }
 /**
  * Mount inside `<Canvas>` to publish stats / registry / buffer feeds.
@@ -35,5 +35,6 @@ interface DevtoolsProviderProps {
  * registered, and R3F's normal auto-render path is untouched.
  */
 declare function DevtoolsProvider(props: DevtoolsProviderProps): ReactElement | null;
-
-export { DevtoolsProvider, type DevtoolsProviderProps };
+//#endregion
+export { DevtoolsProvider, DevtoolsProviderProps };
+//# sourceMappingURL=devtools-provider.d.ts.map

package/dist/react/devtools-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"devtools-provider.d.ts","names":[],"sources":["../../src/react/devtools-provider.tsx"],"mappings":";;UAOiB;;EAEf;;EAEA;;EAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA6Bc,iBAAiB,OAAO,wBAAwB"}

package/dist/react/devtools-provider.js

@@ -1,38 +1,66 @@
-import { jsx } from "react/jsx-runtime";
+import { createDevtoolsProvider, isDevtoolsActive } from "three-flatland";
 import { useEffect, useRef } from "react";
 import { useFrame } from "@react-three/fiber";
-import {
-  createDevtoolsProvider,
-  isDevtoolsActive
-} from "three-flatland";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/devtools-provider.tsx
+/**
+* Mount inside `<Canvas>` to publish stats / registry / buffer feeds.
+* Drop it next to your scene — no children, no wrapping:
+*
+* ```tsx
+* <Canvas>
+*   <DevtoolsProvider name="basic-sprite" />
+*   <Scene />
+* </Canvas>
+* ```
+*
+* Passive sampler — does NOT take over rendering. Registers a
+* default-phase `useFrame` and snaps `endFrame → beginFrame` once per
+* tick, leaving R3F's auto-render (and any explicit render useFrame
+* like Flatland's `flatland.render(gl)`) completely alone. The
+* `cpuMs` value reported is the inter-tick interval — equivalent to
+* frame time at 60fps, slightly looser than Flatland's internal
+* tight-bracket measurement when stressed (Flatland's number isolates
+* just its `render()` work; ours covers the whole rAF interval).
+*
+* **Safe to leave in production.** The outer component short-circuits
+* when the devtools build gate is false (build-time, terser folds the
+* branch away) or when `isDevtoolsActive()` is false (runtime toggle). In
+* those cases the inner component never mounts, no `useFrame` is
+* registered, and R3F's normal auto-render path is untouched.
+*/
 function DevtoolsProvider(props) {
-  if (process.env.NODE_ENV === "production" && process.env.FL_DEVTOOLS !== "true") return null;
-  if (!isDevtoolsActive()) return null;
-  return /* @__PURE__ */ jsx(DevtoolsProviderActive, { ...props });
+	if (process.env.NODE_ENV === "production" && process.env.FL_DEVTOOLS !== "true") return null;
+	if (!isDevtoolsActive()) return null;
+	return /* @__PURE__ */ jsx(DevtoolsProviderActive, { ...props });
 }
-function DevtoolsProviderActive({
-  name,
-  id,
-  discoveryChannelName
-}) {
-  const handleRef = useRef(null);
-  useFrame((state) => {
-    const h = handleRef.current;
-    if (!h || h.disposed) return;
-    h.endFrame(state.gl);
-    h.beginFrame(performance.now(), state.gl);
-  });
-  useEffect(() => {
-    const handle = createDevtoolsProvider({ name, id, discoveryChannelName });
-    handleRef.current = handle;
-    return () => {
-      handle.dispose();
-      if (handleRef.current === handle) handleRef.current = null;
-    };
-  }, [name, id, discoveryChannelName]);
-  return null;
+function DevtoolsProviderActive({ name, id, discoveryChannelName }) {
+	const handleRef = useRef(null);
+	useFrame((state) => {
+		const h = handleRef.current;
+		if (!h || h.disposed) return;
+		h.endFrame(state.gl);
+		h.beginFrame(performance.now(), state.gl);
+	});
+	useEffect(() => {
+		const handle = createDevtoolsProvider({
+			name,
+			id,
+			discoveryChannelName
+		});
+		handleRef.current = handle;
+		return () => {
+			handle.dispose();
+			if (handleRef.current === handle) handleRef.current = null;
+		};
+	}, [
+		name,
+		id,
+		discoveryChannelName
+	]);
+	return null;
 }
-export {
-  DevtoolsProvider
-};
+//#endregion
+export { DevtoolsProvider };
+
 //# sourceMappingURL=devtools-provider.js.map

package/dist/react/devtools-provider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/devtools-provider.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from 'react'\nimport { useFrame } from '@react-three/fiber'\nimport {\n  createDevtoolsProvider,\n  isDevtoolsActive,\n  type DevtoolsProviderHandle,\n} from 'three-flatland'\n\n// Types the build-time `process.env` reads without requiring @types/node (shadows the global where present; erased at compile).\ndeclare const process: { env: { NODE_ENV?: string; FL_DEVTOOLS?: string } }\n\nexport interface DevtoolsProviderProps {\n  /** Display name shown in the consumer's provider switcher. */\n  name?: string\n  /** Optional explicit provider id (defaults to a fresh uuid). */\n  id?: string\n  /** Override the discovery channel name (advanced). */\n  discoveryChannelName?: string\n}\n\n/**\n * Mount inside `<Canvas>` to publish stats / registry / buffer feeds.\n * Drop it next to your scene — no children, no wrapping:\n *\n * ```tsx\n * <Canvas>\n *   <DevtoolsProvider name=\"basic-sprite\" />\n *   <Scene />\n * </Canvas>\n * ```\n *\n * Passive sampler — does NOT take over rendering. Registers a\n * default-phase `useFrame` and snaps `endFrame → beginFrame` once per\n * tick, leaving R3F's auto-render (and any explicit render useFrame\n * like Flatland's `flatland.render(gl)`) completely alone. The\n * `cpuMs` value reported is the inter-tick interval — equivalent to\n * frame time at 60fps, slightly looser than Flatland's internal\n * tight-bracket measurement when stressed (Flatland's number isolates\n * just its `render()` work; ours covers the whole rAF interval).\n *\n * **Safe to leave in production.** The outer component short-circuits\n * when the devtools build gate is false (build-time, terser folds the\n * branch away) or when `isDevtoolsActive()` is false (runtime toggle). In\n * those cases the inner component never mounts, no `useFrame` is\n * registered, and R3F's normal auto-render path is untouched.\n */\nexport function DevtoolsProvider(\n  props: DevtoolsProviderProps,\n): ReactElement | null {\n  if (process.env.NODE_ENV === 'production' && process.env.FL_DEVTOOLS !== 'true') return null\n  if (!isDevtoolsActive()) return null\n  return <DevtoolsProviderActive {...props} />\n}\n\nfunction DevtoolsProviderActive({\n  name,\n  id,\n  discoveryChannelName,\n}: DevtoolsProviderProps): null {\n  // Provider creation lives in `useEffect` only — never in render. R3F's\n  // concurrent-rendering + StrictMode double-render can throw away renders\n  // before commit, and any side effect we performed in render (like\n  // opening BroadcastChannels) would leak as an orphan. Keeping the only\n  // construction site inside the committed effect guarantees one live\n  // provider per mounted component instance.\n  const handleRef = useRef<DevtoolsProviderHandle | null>(null)\n\n  useFrame((state) => {\n    const h = handleRef.current\n    if (!h || h.disposed) return\n    // Default-phase `useFrame` runs every rAF tick BEFORE R3F's\n    // auto-render (or whatever render useFrame the example registered).\n    // We close the previous tick's window and open the next one, so\n    // `cpuMs` measures the full inter-tick interval. We deliberately\n    // do NOT use `phase: 'render'` — that would steal R3F's render\n    // slot and prevent users from driving their own render path\n    // (Flatland's `flatland.render(gl)`, custom passes, etc.).\n    h.endFrame(state.gl as never)\n    h.beginFrame(performance.now(), state.gl as never)\n  })\n\n  useEffect(() => {\n    const handle = createDevtoolsProvider({ name, id, discoveryChannelName })\n    handleRef.current = handle\n    return () => {\n      handle.dispose()\n      if (handleRef.current === handle) handleRef.current = null\n    }\n  }, [name, id, discoveryChannelName])\n\n  return null\n}\n"],"mappings":"AAmDS;AAnDT,SAAS,WAAW,cAAiC;AACrD,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAwCA,SAAS,iBACd,OACqB;AACrB,MAAI,QAAQ,IAAI,aAAa,gBAAgB,QAAQ,IAAI,gBAAgB,OAAQ,QAAO;AACxF,MAAI,CAAC,iBAAiB,EAAG,QAAO;AAChC,SAAO,oBAAC,0BAAwB,GAAG,OAAO;AAC5C;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAO9B,QAAM,YAAY,OAAsC,IAAI;AAE5D,WAAS,CAAC,UAAU;AAClB,UAAM,IAAI,UAAU;AACpB,QAAI,CAAC,KAAK,EAAE,SAAU;AAQtB,MAAE,SAAS,MAAM,EAAW;AAC5B,MAAE,WAAW,YAAY,IAAI,GAAG,MAAM,EAAW;AAAA,EACnD,CAAC;AAED,YAAU,MAAM;AACd,UAAM,SAAS,uBAAuB,EAAE,MAAM,IAAI,qBAAqB,CAAC;AACxE,cAAU,UAAU;AACpB,WAAO,MAAM;AACX,aAAO,QAAQ;AACf,UAAI,UAAU,YAAY,OAAQ,WAAU,UAAU;AAAA,IACxD;AAAA,EACF,GAAG,CAAC,MAAM,IAAI,oBAAoB,CAAC;AAEnC,SAAO;AACT;","names":[]}
+{"version":3,"file":"devtools-provider.js","names":[],"sources":["../../src/react/devtools-provider.tsx"],"sourcesContent":["import { useEffect, useRef, type ReactElement } from 'react'\nimport { useFrame } from '@react-three/fiber'\nimport { createDevtoolsProvider, isDevtoolsActive, type DevtoolsProviderHandle } from 'three-flatland'\n\n// Types the build-time `process.env` reads without requiring @types/node (shadows the global where present; erased at compile).\ndeclare const process: { env: { NODE_ENV?: string; FL_DEVTOOLS?: string } }\n\nexport interface DevtoolsProviderProps {\n  /** Display name shown in the consumer's provider switcher. */\n  name?: string\n  /** Optional explicit provider id (defaults to a fresh uuid). */\n  id?: string\n  /** Override the discovery channel name (advanced). */\n  discoveryChannelName?: string\n}\n\n/**\n * Mount inside `<Canvas>` to publish stats / registry / buffer feeds.\n * Drop it next to your scene — no children, no wrapping:\n *\n * ```tsx\n * <Canvas>\n *   <DevtoolsProvider name=\"basic-sprite\" />\n *   <Scene />\n * </Canvas>\n * ```\n *\n * Passive sampler — does NOT take over rendering. Registers a\n * default-phase `useFrame` and snaps `endFrame → beginFrame` once per\n * tick, leaving R3F's auto-render (and any explicit render useFrame\n * like Flatland's `flatland.render(gl)`) completely alone. The\n * `cpuMs` value reported is the inter-tick interval — equivalent to\n * frame time at 60fps, slightly looser than Flatland's internal\n * tight-bracket measurement when stressed (Flatland's number isolates\n * just its `render()` work; ours covers the whole rAF interval).\n *\n * **Safe to leave in production.** The outer component short-circuits\n * when the devtools build gate is false (build-time, terser folds the\n * branch away) or when `isDevtoolsActive()` is false (runtime toggle). In\n * those cases the inner component never mounts, no `useFrame` is\n * registered, and R3F's normal auto-render path is untouched.\n */\nexport function DevtoolsProvider(props: DevtoolsProviderProps): ReactElement | null {\n  if (process.env.NODE_ENV === 'production' && process.env.FL_DEVTOOLS !== 'true') return null\n  if (!isDevtoolsActive()) return null\n  return <DevtoolsProviderActive {...props} />\n}\n\nfunction DevtoolsProviderActive({ name, id, discoveryChannelName }: DevtoolsProviderProps): null {\n  // Provider creation lives in `useEffect` only — never in render. R3F's\n  // concurrent-rendering + StrictMode double-render can throw away renders\n  // before commit, and any side effect we performed in render (like\n  // opening BroadcastChannels) would leak as an orphan. Keeping the only\n  // construction site inside the committed effect guarantees one live\n  // provider per mounted component instance.\n  const handleRef = useRef<DevtoolsProviderHandle | null>(null)\n\n  useFrame((state) => {\n    const h = handleRef.current\n    if (!h || h.disposed) return\n    // Default-phase `useFrame` runs every rAF tick BEFORE R3F's\n    // auto-render (or whatever render useFrame the example registered).\n    // We close the previous tick's window and open the next one, so\n    // `cpuMs` measures the full inter-tick interval. We deliberately\n    // do NOT use `phase: 'render'` — that would steal R3F's render\n    // slot and prevent users from driving their own render path\n    // (Flatland's `flatland.render(gl)`, custom passes, etc.).\n    h.endFrame(state.gl as never)\n    h.beginFrame(performance.now(), state.gl as never)\n  })\n\n  useEffect(() => {\n    const handle = createDevtoolsProvider({ name, id, discoveryChannelName })\n    handleRef.current = handle\n    return () => {\n      handle.dispose()\n      if (handleRef.current === handle) handleRef.current = null\n    }\n  }, [name, id, discoveryChannelName])\n\n  return null\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,SAAgB,iBAAiB,OAAmD;CAClF,IAAI,QAAQ,IAAI,aAAa,gBAAgB,QAAQ,IAAI,gBAAgB,QAAQ,OAAO;CACxF,IAAI,CAAC,iBAAiB,GAAG,OAAO;CAChC,OAAO,oBAAC,wBAAD,EAAwB,GAAI,MAAQ,CAAA;AAC7C;AAEA,SAAS,uBAAuB,EAAE,MAAM,IAAI,wBAAqD;CAO/F,MAAM,YAAY,OAAsC,IAAI;CAE5D,UAAU,UAAU;EAClB,MAAM,IAAI,UAAU;EACpB,IAAI,CAAC,KAAK,EAAE,UAAU;EAQtB,EAAE,SAAS,MAAM,EAAW;EAC5B,EAAE,WAAW,YAAY,IAAI,GAAG,MAAM,EAAW;CACnD,CAAC;CAED,gBAAgB;EACd,MAAM,SAAS,uBAAuB;GAAE;GAAM;GAAI;EAAqB,CAAC;EACxE,UAAU,UAAU;EACpB,aAAa;GACX,OAAO,QAAQ;GACf,IAAI,UAAU,YAAY,QAAQ,UAAU,UAAU;EACxD;CACF,GAAG;EAAC;EAAM;EAAI;CAAoB,CAAC;CAEnC,OAAO;AACT"}

package/dist/react/use-fps-graph.d.ts

@@ -1,9 +1,8 @@
-import { PaneParent } from './use-pane-input.js';
-import 'tweakpane';
-
+import { PaneParent } from "./use-pane-input.js";
+//#region src/react/use-fps-graph.d.ts
 interface FpsGraphHandle {
-    begin: () => void;
-    end: () => void;
+  begin: () => void;
+  end: () => void;
 }
 /**
  * Add an FPS graph blade. Returns { begin, end } for use inside useFrame.
@@ -11,5 +10,6 @@ interface FpsGraphHandle {
  * and use paneBundle.fpsGraph directly.
  */
 declare function useFpsGraph(parent: PaneParent | null): FpsGraphHandle;
-
-export { type FpsGraphHandle, useFpsGraph };
+//#endregion
+export { FpsGraphHandle, useFpsGraph };
+//# sourceMappingURL=use-fps-graph.d.ts.map

package/dist/react/use-fps-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-fps-graph.d.ts","names":[],"sources":["../../src/react/use-fps-graph.ts"],"mappings":";;UAIiB;EACf;EACA;;;;;;;iBAQc,YAAY,QAAQ,oBAAoB"}

package/dist/react/use-fps-graph.js

@@ -1,25 +1,31 @@
 import { useEffect, useRef } from "react";
+//#region src/react/use-fps-graph.ts
+/**
+* Add an FPS graph blade. Returns { begin, end } for use inside useFrame.
+* If the pane was created with `fps: true` (default), you can skip this hook
+* and use paneBundle.fpsGraph directly.
+*/
 function useFpsGraph(parent) {
-  const graphRef = useRef(null);
-  useEffect(() => {
-    if (!parent) return;
-    const graph = parent.addBlade({
-      view: "fpsgraph",
-      label: "fps",
-      rows: 2
-    });
-    graphRef.current = graph;
-    return () => {
-      graph.dispose();
-      graphRef.current = null;
-    };
-  }, [parent]);
-  return {
-    begin: () => graphRef.current?.begin(),
-    end: () => graphRef.current?.end()
-  };
+	const graphRef = useRef(null);
+	useEffect(() => {
+		if (!parent) return;
+		const graph = parent.addBlade({
+			view: "fpsgraph",
+			label: "fps",
+			rows: 2
+		});
+		graphRef.current = graph;
+		return () => {
+			graph.dispose();
+			graphRef.current = null;
+		};
+	}, [parent]);
+	return {
+		begin: () => graphRef.current?.begin(),
+		end: () => graphRef.current?.end()
+	};
 }
-export {
-  useFpsGraph
-};
+//#endregion
+export { useFpsGraph };
+
 //# sourceMappingURL=use-fps-graph.js.map

package/dist/react/use-fps-graph.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/react/use-fps-graph.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport type { FpsGraphBladeApi } from '@tweakpane/plugin-essentials'\nimport type { PaneParent } from './use-pane-input.js'\n\nexport interface FpsGraphHandle {\n  begin: () => void\n  end: () => void\n}\n\n/**\n * Add an FPS graph blade. Returns { begin, end } for use inside useFrame.\n * If the pane was created with `fps: true` (default), you can skip this hook\n * and use paneBundle.fpsGraph directly.\n */\nexport function useFpsGraph(parent: PaneParent | null): FpsGraphHandle {\n  const graphRef = useRef<FpsGraphBladeApi | null>(null)\n\n  useEffect(() => {\n    if (!parent) return\n\n    const graph = parent.addBlade({\n      view: 'fpsgraph',\n      label: 'fps',\n      rows: 2,\n    }) as FpsGraphBladeApi\n\n    graphRef.current = graph\n\n    return () => {\n      graph.dispose()\n      graphRef.current = null\n    }\n  }, [parent])\n\n  return {\n    begin: () => graphRef.current?.begin(),\n    end: () => graphRef.current?.end(),\n  }\n}\n"],"mappings":"AAAA,SAAS,WAAW,cAAc;AAc3B,SAAS,YAAY,QAA2C;AACrE,QAAM,WAAW,OAAgC,IAAI;AAErD,YAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,UAAM,QAAQ,OAAO,SAAS;AAAA,MAC5B,MAAM;AAAA,MACN,OAAO;AAAA,MACP,MAAM;AAAA,IACR,CAAC;AAED,aAAS,UAAU;AAEnB,WAAO,MAAM;AACX,YAAM,QAAQ;AACd,eAAS,UAAU;AAAA,IACrB;AAAA,EACF,GAAG,CAAC,MAAM,CAAC;AAEX,SAAO;AAAA,IACL,OAAO,MAAM,SAAS,SAAS,MAAM;AAAA,IACrC,KAAK,MAAM,SAAS,SAAS,IAAI;AAAA,EACnC;AACF;","names":[]}
+{"version":3,"file":"use-fps-graph.js","names":[],"sources":["../../src/react/use-fps-graph.ts"],"sourcesContent":["import { useEffect, useRef } from 'react'\nimport type { FpsGraphBladeApi } from '@tweakpane/plugin-essentials'\nimport type { PaneParent } from './use-pane-input.js'\n\nexport interface FpsGraphHandle {\n  begin: () => void\n  end: () => void\n}\n\n/**\n * Add an FPS graph blade. Returns { begin, end } for use inside useFrame.\n * If the pane was created with `fps: true` (default), you can skip this hook\n * and use paneBundle.fpsGraph directly.\n */\nexport function useFpsGraph(parent: PaneParent | null): FpsGraphHandle {\n  const graphRef = useRef<FpsGraphBladeApi | null>(null)\n\n  useEffect(() => {\n    if (!parent) return\n\n    const graph = parent.addBlade({\n      view: 'fpsgraph',\n      label: 'fps',\n      rows: 2,\n    }) as FpsGraphBladeApi\n\n    graphRef.current = graph\n\n    return () => {\n      graph.dispose()\n      graphRef.current = null\n    }\n  }, [parent])\n\n  return {\n    begin: () => graphRef.current?.begin(),\n    end: () => graphRef.current?.end(),\n  }\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,YAAY,QAA2C;CACrE,MAAM,WAAW,OAAgC,IAAI;CAErD,gBAAgB;EACd,IAAI,CAAC,QAAQ;EAEb,MAAM,QAAQ,OAAO,SAAS;GAC5B,MAAM;GACN,OAAO;GACP,MAAM;EACR,CAAC;EAED,SAAS,UAAU;EAEnB,aAAa;GACX,MAAM,QAAQ;GACd,SAAS,UAAU;EACrB;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO;EACL,aAAa,SAAS,SAAS,MAAM;EACrC,WAAW,SAAS,SAAS,IAAI;CACnC;AACF"}

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

@@ -1,10 +1,10 @@
-import { PaneParent } from './use-pane-input.js';
-import 'tweakpane';
-
+import { PaneParent } from "./use-pane-input.js";
+//#region src/react/use-pane-button.d.ts
 /**
  * Add a button to a Tweakpane parent. Uses a ref for the callback to avoid stale closures.
  * Uses deferred disposal to survive React strict mode.
  */
 declare function usePaneButton(parent: PaneParent | null, title: string, onClick: () => void): void;
-
+//#endregion
 export { usePaneButton };
+//# sourceMappingURL=use-pane-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-pane-button.d.ts","names":[],"sources":["../../src/react/use-pane-button.ts"],"mappings":";;;;;;iBAOgB,cAAc,QAAQ,mBAAmB,eAAe"}

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

@@ -1,34 +1,39 @@
 import { useEffect, useRef } from "react";
+//#region src/react/use-pane-button.ts
+/**
+* Add a button to a Tweakpane parent. Uses a ref for the callback to avoid stale closures.
+* Uses deferred disposal to survive React strict mode.
+*/
 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]);
+	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
-};
+//#endregion
+export { usePaneButton };
+
 //# sourceMappingURL=use-pane-button.js.map

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

@@ -1 +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":[]}
+{"version":3,"file":"use-pane-button.js","names":[],"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(parent: PaneParent | null, title: string, onClick: () => void): 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":";;;;;;AAOA,SAAgB,cAAc,QAA2B,OAAe,SAA2B;CACjG,MAAM,cAAc,OAAO,OAAO;CAClC,YAAY,UAAU;CACtB,MAAM,YAAY,OAAmC,IAAI;CACzD,MAAM,aAAa,OAAO,KAAK;CAE/B,IAAI,UAAU,UAAU,YAAY,MAAM;EACxC,MAAM,SAAS,OAAO,UAAU,EAAE,MAAM,CAAC;EACzC,OAAO,GAAG,eAAe,YAAY,QAAQ,CAAC;EAC9C,UAAU,UAAU;CACtB;CAEA,gBAAgB;EACd,WAAW,UAAU;EAErB,IAAI,UAAU,UAAU,YAAY,MAAM;GACxC,MAAM,SAAS,OAAO,UAAU,EAAE,MAAM,CAAC;GACzC,OAAO,GAAG,eAAe,YAAY,QAAQ,CAAC;GAC9C,UAAU,UAAU;EACtB;EAEA,aAAa;GACX,MAAM,SAAS,UAAU;GACzB,iBAAiB;IACf,IAAI,CAAC,WAAW,WAAW,QAAQ;KACjC,OAAO,QAAQ;KACf,IAAI,UAAU,YAAY,QAAQ,UAAU,UAAU;IACxD;GACF,GAAG,CAAC;GACJ,WAAW,UAAU;EACvB;CAEF,GAAG,CAAC,MAAM,CAAC;AACb"}

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

@@ -1,6 +1,6 @@
-import { FolderParams, FolderApi } from 'tweakpane';
-import { PaneParent } from './use-pane-input.js';
-
+import { PaneParent } from "./use-pane-input.js";
+import { FolderApi, FolderParams } from "tweakpane";
+//#region src/react/use-pane-folder.d.ts
 /**
  * Create a Tweakpane folder underneath `parent`. Disposes on unmount and
  * recreates when `parent` (or `title`) changes — e.g., when `usePane`
@@ -11,5 +11,6 @@ import { PaneParent } from './use-pane-input.js';
  * synchronously before paint, so consumers don't see a flicker.
  */
 declare function usePaneFolder(parent: PaneParent | null, title: string, options?: Partial<FolderParams>): FolderApi | null;
-
+//#endregion
 export { usePaneFolder };
+//# sourceMappingURL=use-pane-folder.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-pane-folder.d.ts","names":[],"sources":["../../src/react/use-pane-folder.ts"],"mappings":";;;;;;;;;;;;iBAagB,cACd,QAAQ,mBACR,eACA,UAAS,QAAQ,gBAChB"}

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

@@ -1,24 +1,37 @@
 import { useEffectEvent, useLayoutEffect, useState } from "react";
+//#region src/react/use-pane-folder.ts
+/**
+* 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.
+*/
 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;
+	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
-};
+//#endregion
+export { usePaneFolder };
+
 //# sourceMappingURL=use-pane-folder.js.map