@three-flatland/devtools 0.1.0-alpha.3

package/dist/provider-switcher.cjs

@@ -0,0 +1,95 @@
+"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 provider_switcher_exports = {};
+__export(provider_switcher_exports, {
+  addProviderSwitcher: () => addProviderSwitcher
+});
+module.exports = __toCommonJS(provider_switcher_exports);
+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();
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addProviderSwitcher
+});
+//# sourceMappingURL=provider-switcher.cjs.map

package/dist/provider-switcher.cjs.map

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

package/dist/provider-switcher.d.cts

@@ -0,0 +1,18 @@
+import { Pane, FolderApi } from 'tweakpane';
+import { DevtoolsClient } from './devtools-client.cjs';
+import 'three-flatland/debug-protocol';
+
+/**
+ * Provider switcher — a single-row blade with ◀ / ▶ arrows + the
+ * selected provider's name. Hidden while only one provider is known
+ * (the common case); shown automatically whenever two or more appear
+ * on the discovery bus.
+ */
+
+interface ProviderSwitcherHandle {
+    readonly element: HTMLElement;
+    dispose(): void;
+}
+declare function addProviderSwitcher(parent: Pane | FolderApi, client: DevtoolsClient): ProviderSwitcherHandle;
+
+export { type ProviderSwitcherHandle, addProviderSwitcher };

package/dist/provider-switcher.d.ts

@@ -0,0 +1,18 @@
+import { Pane, FolderApi } from 'tweakpane';
+import { DevtoolsClient } from './devtools-client.js';
+import 'three-flatland/debug-protocol';
+
+/**
+ * Provider switcher — a single-row blade with ◀ / ▶ arrows + the
+ * selected provider's name. Hidden while only one provider is known
+ * (the common case); shown automatically whenever two or more appear
+ * on the discovery bus.
+ */
+
+interface ProviderSwitcherHandle {
+    readonly element: HTMLElement;
+    dispose(): void;
+}
+declare function addProviderSwitcher(parent: Pane | FolderApi, client: DevtoolsClient): ProviderSwitcherHandle;
+
+export { type ProviderSwitcherHandle, addProviderSwitcher };

package/dist/provider-switcher.js

@@ -0,0 +1,71 @@
+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();
+    }
+  };
+}
+export {
+  addProviderSwitcher
+};
+//# sourceMappingURL=provider-switcher.js.map

package/dist/provider-switcher.js.map

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

package/dist/react/devtools-provider.cjs

@@ -0,0 +1,59 @@
+"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 devtools_provider_exports = {};
+__export(devtools_provider_exports, {
+  DevtoolsProvider: () => DevtoolsProvider
+});
+module.exports = __toCommonJS(devtools_provider_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_fiber = require("@react-three/fiber");
+var import_three_flatland = require("three-flatland");
+function DevtoolsProvider(props) {
+  if (process.env.NODE_ENV === "production" && process.env.FL_DEVTOOLS !== "true") return null;
+  if (!(0, import_three_flatland.isDevtoolsActive)()) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DevtoolsProviderActive, { ...props });
+}
+function DevtoolsProviderActive({
+  name,
+  id,
+  discoveryChannelName
+}) {
+  const handleRef = (0, import_react.useRef)(null);
+  (0, import_fiber.useFrame)((state) => {
+    const h = handleRef.current;
+    if (!h || h.disposed) return;
+    h.endFrame(state.gl);
+    h.beginFrame(performance.now(), state.gl);
+  });
+  (0, import_react.useEffect)(() => {
+    const handle = (0, import_three_flatland.createDevtoolsProvider)({ name, id, discoveryChannelName });
+    handleRef.current = handle;
+    return () => {
+      handle.dispose();
+      if (handleRef.current === handle) handleRef.current = null;
+    };
+  }, [name, id, discoveryChannelName]);
+  return null;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DevtoolsProvider
+});
+//# sourceMappingURL=devtools-provider.cjs.map

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

@@ -0,0 +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":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDS;AAnDT,mBAAqD;AACrD,mBAAyB;AACzB,4BAIO;AAwCA,SAAS,iBACd,OACqB;AACrB,MAAI,QAAQ,IAAI,aAAa,gBAAgB,QAAQ,IAAI,gBAAgB,OAAQ,QAAO;AACxF,MAAI,KAAC,wCAAiB,EAAG,QAAO;AAChC,SAAO,4CAAC,0BAAwB,GAAG,OAAO;AAC5C;AAEA,SAAS,uBAAuB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACF,GAAgC;AAO9B,QAAM,gBAAY,qBAAsC,IAAI;AAE5D,6BAAS,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,8BAAU,MAAM;AACd,UAAM,aAAS,8CAAuB,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":[]}

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

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+
+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;
+}
+/**
+ * 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.
+ */
+declare function DevtoolsProvider(props: DevtoolsProviderProps): ReactElement | null;
+
+export { DevtoolsProvider, type DevtoolsProviderProps };

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

@@ -0,0 +1,39 @@
+import { ReactElement } from 'react';
+
+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;
+}
+/**
+ * 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.
+ */
+declare function DevtoolsProvider(props: DevtoolsProviderProps): ReactElement | null;
+
+export { DevtoolsProvider, type DevtoolsProviderProps };

package/dist/react/devtools-provider.js

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { useFrame } from "@react-three/fiber";
+import {
+  createDevtoolsProvider,
+  isDevtoolsActive
+} from "three-flatland";
+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 });
+}
+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
+};
+//# sourceMappingURL=devtools-provider.js.map

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

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

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

@@ -0,0 +1,49 @@
+"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_fps_graph_exports = {};
+__export(use_fps_graph_exports, {
+  useFpsGraph: () => useFpsGraph
+});
+module.exports = __toCommonJS(use_fps_graph_exports);
+var import_react = require("react");
+function useFpsGraph(parent) {
+  const graphRef = (0, import_react.useRef)(null);
+  (0, import_react.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()
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFpsGraph
+});
+//# sourceMappingURL=use-fps-graph.cjs.map

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

@@ -0,0 +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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAc3B,SAAS,YAAY,QAA2C;AACrE,QAAM,eAAW,qBAAgC,IAAI;AAErD,8BAAU,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":[]}

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

@@ -0,0 +1,15 @@
+import { PaneParent } from './use-pane-input.cjs';
+import 'tweakpane';
+
+interface FpsGraphHandle {
+    begin: () => void;
+    end: () => void;
+}
+/**
+ * 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.
+ */
+declare function useFpsGraph(parent: PaneParent | null): FpsGraphHandle;
+
+export { type FpsGraphHandle, useFpsGraph };

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

@@ -0,0 +1,15 @@
+import { PaneParent } from './use-pane-input.js';
+import 'tweakpane';
+
+interface FpsGraphHandle {
+    begin: () => void;
+    end: () => void;
+}
+/**
+ * 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.
+ */
+declare function useFpsGraph(parent: PaneParent | null): FpsGraphHandle;
+
+export { type FpsGraphHandle, useFpsGraph };

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

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+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()
+  };
+}
+export {
+  useFpsGraph
+};
+//# sourceMappingURL=use-fps-graph.js.map

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

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

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

@@ -0,0 +1,58 @@
+"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_button_exports = {};
+__export(use_pane_button_exports, {
+  usePaneButton: () => usePaneButton
+});
+module.exports = __toCommonJS(use_pane_button_exports);
+var import_react = require("react");
+function usePaneButton(parent, title, onClick) {
+  const callbackRef = (0, import_react.useRef)(onClick);
+  callbackRef.current = onClick;
+  const buttonRef = (0, import_react.useRef)(null);
+  const mountedRef = (0, import_react.useRef)(false);
+  if (parent && buttonRef.current === null) {
+    const button = parent.addButton({ title });
+    button.on("click", () => callbackRef.current());
+    buttonRef.current = button;
+  }
+  (0, import_react.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]);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  usePaneButton
+});
+//# sourceMappingURL=use-pane-button.cjs.map

package/dist/react/use-pane-button.cjs.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;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkC;AAO3B,SAAS,cACd,QACA,OACA,SACM;AACN,QAAM,kBAAc,qBAAO,OAAO;AAClC,cAAY,UAAU;AACtB,QAAM,gBAAY,qBAAmC,IAAI;AACzD,QAAM,iBAAa,qBAAO,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,8BAAU,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-button.d.cts

@@ -0,0 +1,10 @@
+import { PaneParent } from './use-pane-input.cjs';
+import 'tweakpane';
+
+/**
+ * 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;
+
+export { usePaneButton };

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

@@ -0,0 +1,10 @@
+import { PaneParent } from './use-pane-input.js';
+import 'tweakpane';
+
+/**
+ * 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;
+
+export { usePaneButton };