@three-flatland/devtools 0.1.0-alpha.3

package/dist/react/use-pane.cjs

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

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

@@ -0,0 +1,40 @@
+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/use-pane.d.ts

@@ -0,0 +1,40 @@
+import { CreatePaneOptions, PaneBundle } from '../create-pane.js';
+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/use-pane.js

@@ -0,0 +1,21 @@
+import { useEffect, useEffectEvent, useState } from "react";
+import { claimPane, createPane } from "../create-pane.js";
+function usePane(options = {}) {
+  const [bundle, setBundle] = useState(() => createPane(options));
+  const getOptions = useEffectEvent(() => options);
+  useEffect(() => {
+    if (bundle.disposed) {
+      setBundle(createPane(getOptions()));
+      return;
+    }
+    claimPane(bundle);
+    return () => {
+      bundle.pane.dispose();
+    };
+  }, [bundle]);
+  return bundle;
+}
+export {
+  usePane
+};
+//# sourceMappingURL=use-pane.js.map

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

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

package/dist/react.cjs

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

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

@@ -0,0 +1,12 @@
+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.d.ts

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

package/dist/react.js

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

package/dist/react.js.map

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

package/dist/registry-view.cjs

@@ -0,0 +1,371 @@
+"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 registry_view_exports = {};
+__export(registry_view_exports, {
+  addRegistryView: () => addRegistryView
+});
+module.exports = __toCommonJS(registry_view_exports);
+const BAR_HEIGHT = 24;
+const BAR_WIDTH = 240;
+const FILL_BY_KIND = {
+  float: "#47cca9",
+  int: "#47cc6a",
+  uint: "#ffa347",
+  bits: "#d94c87",
+  float2: "#9d7aff",
+  float3: "#9d7aff",
+  float4: "#9d7aff"
+};
+function splitName(name) {
+  const dot = name.indexOf(".");
+  if (dot === -1) return { group: "ungrouped", short: name };
+  return { group: name.slice(0, dot), short: name.slice(dot + 1) };
+}
+function addRegistryView(parent, client) {
+  const blade = parent.addBlade({ view: "separator" });
+  const bladeEl = blade.element;
+  bladeEl.innerHTML = "";
+  bladeEl.className = "tp-cntv";
+  bladeEl.style.cssText = "display:none;flex-direction:column;background:rgba(0,0,0,0.3)";
+  const header = document.createElement("div");
+  header.style.cssText = [
+    "display:grid",
+    "grid-template-columns:2em 1fr 2em",
+    "align-items:center",
+    "padding:4px 6px 6px",
+    "font-size:11px",
+    "color:var(--tp-label-foreground-color)",
+    "user-select:none",
+    "-webkit-user-select:none",
+    "font-variant-numeric:tabular-nums",
+    "cursor:pointer"
+  ].join(";");
+  const arrowStyle = "cursor:pointer;padding:0 4px;opacity:0.8;font-family:ui-monospace,monospace;text-align:center";
+  const prevBtn = document.createElement("span");
+  prevBtn.textContent = "\u25C0";
+  prevBtn.style.cssText = arrowStyle;
+  prevBtn.setAttribute("role", "button");
+  prevBtn.setAttribute("aria-label", "Previous registry group");
+  const groupLabel = document.createElement("span");
+  groupLabel.style.cssText = "font-weight:500;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none";
+  const nextBtn = document.createElement("span");
+  nextBtn.textContent = "\u25B6";
+  nextBtn.style.cssText = arrowStyle;
+  nextBtn.setAttribute("role", "button");
+  nextBtn.setAttribute("aria-label", "Next registry group");
+  header.appendChild(prevBtn);
+  header.appendChild(groupLabel);
+  header.appendChild(nextBtn);
+  const body = document.createElement("div");
+  body.style.cssText = "display:flex;flex-direction:column;gap:4px;padding:2px 6px 6px";
+  bladeEl.appendChild(header);
+  bladeEl.appendChild(body);
+  const groups = /* @__PURE__ */ new Map();
+  let activeGroup = null;
+  let collapsed = true;
+  body.style.display = "none";
+  function syncFilter() {
+    if (collapsed || activeGroup === null) {
+      client.setRegistry([]);
+      return;
+    }
+    const g = groups.get(activeGroup);
+    if (!g) {
+      client.setRegistry([]);
+      return;
+    }
+    const names = [];
+    for (const row of g.entries.values()) names.push(row.name);
+    client.setRegistry(names);
+  }
+  const toggleCollapse = (e) => {
+    e.stopPropagation();
+    collapsed = !collapsed;
+    body.style.display = collapsed ? "none" : "flex";
+    if (!collapsed && activeGroup !== null) {
+      const g = groups.get(activeGroup);
+      if (g) {
+        g.container.style.display = "flex";
+        for (const row of g.entries.values()) row.lastVersion = -1;
+      }
+    }
+    syncFilter();
+  };
+  header.addEventListener("click", toggleCollapse);
+  prevBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    cycle(-1);
+  });
+  nextBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    cycle(1);
+  });
+  function ensureGroup(name) {
+    let g = groups.get(name);
+    if (g) return g;
+    const container = document.createElement("div");
+    container.style.cssText = "display:none;flex-direction:column;gap:4px";
+    body.appendChild(container);
+    g = { group: name, container, entries: /* @__PURE__ */ new Map() };
+    groups.set(name, g);
+    return g;
+  }
+  function destroyGroup(name) {
+    const g = groups.get(name);
+    if (!g) return;
+    g.container.remove();
+    groups.delete(name);
+    if (activeGroup === name) activeGroup = null;
+  }
+  function ensureEntryRow(g, name, shortName) {
+    const existing = g.entries.get(shortName);
+    if (existing) return existing;
+    const row = document.createElement("div");
+    row.style.cssText = "display:flex;flex-direction:column;gap:2px";
+    const head = document.createElement("div");
+    head.style.cssText = [
+      "display:flex",
+      "align-items:baseline",
+      "gap:6px",
+      "font-size:10px",
+      "line-height:1.2",
+      "font-family:var(--tp-base-font-family, ui-monospace, monospace)",
+      "font-variant-numeric:tabular-nums",
+      "color:var(--tp-monitor-foreground-color)"
+    ].join(";");
+    const nameLabel = document.createElement("span");
+    nameLabel.style.cssText = "flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tp-label-foreground-color)";
+    nameLabel.textContent = shortName;
+    const valueLabel = document.createElement("span");
+    valueLabel.style.cssText = "opacity:0.75;white-space:nowrap";
+    head.appendChild(nameLabel);
+    head.appendChild(valueLabel);
+    const canvas = document.createElement("canvas");
+    canvas.width = BAR_WIDTH;
+    canvas.height = BAR_HEIGHT;
+    canvas.style.cssText = `width:100%;height:${BAR_HEIGHT}px;background:rgba(0,2,28,0.45);border-radius:2px`;
+    row.appendChild(head);
+    row.appendChild(canvas);
+    g.container.appendChild(row);
+    const entry = {
+      name,
+      shortName,
+      row,
+      nameLabel,
+      valueLabel,
+      canvas,
+      ctx: canvas.getContext("2d"),
+      lastVersion: -1
+    };
+    g.entries.set(shortName, entry);
+    return entry;
+  }
+  function destroyEntryRow(g, shortName) {
+    const row = g.entries.get(shortName);
+    if (!row) return;
+    row.row.remove();
+    g.entries.delete(shortName);
+  }
+  function setActiveGroup(name) {
+    activeGroup = name;
+    for (const [groupName, g] of groups) {
+      g.container.style.display = groupName === name && !collapsed ? "flex" : "none";
+    }
+    groupLabel.textContent = name ?? "\u2014";
+    if (name !== null) {
+      const g = groups.get(name);
+      if (g) for (const row of g.entries.values()) row.lastVersion = -1;
+    }
+    syncFilter();
+  }
+  function cycle(delta) {
+    const names = Array.from(groups.keys());
+    if (names.length === 0) return;
+    const idx = activeGroup !== null ? names.indexOf(activeGroup) : -1;
+    const next = names[(idx + delta + names.length) % names.length];
+    setActiveGroup(next);
+  }
+  function renderBars(row, kind, sample, isSigned) {
+    const ctx = row.ctx;
+    const w = row.canvas.width;
+    const h = row.canvas.height;
+    let min = Infinity;
+    let max = -Infinity;
+    let sum = 0;
+    const n = sample.length;
+    for (let i = 0; i < n; i++) {
+      const v = sample[i];
+      if (v < min) min = v;
+      if (v > max) max = v;
+      sum += v;
+    }
+    const mean = n > 0 ? sum / n : 0;
+    if (!ctx) return { min, max, mean };
+    ctx.clearRect(0, 0, w, h);
+    if (n === 0 || !Number.isFinite(min) || !Number.isFinite(max)) return { min, max: 0, mean };
+    const zeroY = isSigned ? h / 2 : h;
+    const scale = isSigned ? h / 2 / Math.max(Math.abs(min), Math.abs(max) || 1) : h / (max || 1);
+    ctx.fillStyle = FILL_BY_KIND[kind] ?? "#47cca9";
+    const bw = Math.max(1, w / n);
+    for (let i = 0; i < n; i++) {
+      const v = sample[i];
+      const x = Math.floor(i / n * w);
+      const bh = v * scale;
+      if (isSigned) {
+        if (bh >= 0) ctx.fillRect(x, zeroY - bh, Math.ceil(bw), bh);
+        else ctx.fillRect(x, zeroY, Math.ceil(bw), -bh);
+      } else {
+        ctx.fillRect(x, zeroY - bh, Math.ceil(bw), bh);
+      }
+    }
+    if (isSigned) {
+      ctx.fillStyle = "rgba(240, 237, 216, 0.2)";
+      ctx.fillRect(0, zeroY, w, 1);
+    }
+    return { min, max, mean };
+  }
+  function renderBits(row, sample, count) {
+    const ctx = row.ctx;
+    const w = row.canvas.width;
+    const h = row.canvas.height;
+    if (!ctx) return { ones: 0, total: 0 };
+    ctx.clearRect(0, 0, w, h);
+    const totalBits = count * 32;
+    if (totalBits === 0) return { ones: 0, total: 0 };
+    let ones = 0;
+    const px = w / totalBits;
+    ctx.fillStyle = FILL_BY_KIND.bits;
+    for (let i = 0; i < count; i++) {
+      const word = sample[i] >>> 0;
+      for (let b = 0; b < 32; b++) {
+        if (word >>> b & 1) {
+          ones++;
+          const bitIdx = i * 32 + b;
+          const x = Math.floor(bitIdx * px);
+          ctx.fillRect(x, 2, Math.max(1, Math.ceil(px)), h - 4);
+        }
+      }
+    }
+    return { ones, total: totalBits };
+  }
+  function renderEntry(row, entry) {
+    if (row.lastVersion === entry.version) return;
+    row.lastVersion = entry.version;
+    row.nameLabel.title = `${entry.name} \xB7 ${entry.kind} \xB7 ${entry.count}`;
+    const kind = entry.kind;
+    if (kind === "bits") {
+      const { ones, total } = renderBits(row, entry.sample, entry.count);
+      row.valueLabel.textContent = `${ones} / ${total}`;
+      return;
+    }
+    if (kind === "float2" || kind === "float3" || kind === "float4") {
+      const stride = kind === "float2" ? 2 : kind === "float3" ? 3 : 4;
+      const n = Math.floor(entry.sample.length / stride);
+      const mags = new Float32Array(n);
+      for (let i = 0; i < n; i++) {
+        let sq = 0;
+        for (let c = 0; c < stride; c++) {
+          const v = entry.sample[i * stride + c];
+          sq += v * v;
+        }
+        mags[i] = Math.sqrt(sq);
+      }
+      const stats2 = renderBars(row, kind, mags, false);
+      row.valueLabel.textContent = `${n}\xD7${stride}  \u03BC=${stats2.mean.toFixed(2)}`;
+      return;
+    }
+    const isSigned = kind === "int" || kind === "float";
+    const stats = renderBars(row, kind, entry.sample, isSigned);
+    const fmt = (v) => {
+      if (!Number.isFinite(v)) return "\u2014";
+      if (kind === "uint" || kind === "int") return Math.round(v).toString();
+      return v.toFixed(2);
+    };
+    row.valueLabel.textContent = `\u03BC=${fmt(stats.mean)}  ${fmt(stats.min)}\u2013${fmt(stats.max)}`;
+  }
+  const unsubscribe = client.addListener((state) => {
+    const registry = state.registry;
+    const seen = /* @__PURE__ */ new Map();
+    for (const [name] of registry) {
+      const { group, short } = splitName(name);
+      let bucket = seen.get(group);
+      if (!bucket) {
+        bucket = /* @__PURE__ */ new Set();
+        seen.set(group, bucket);
+      }
+      bucket.add(short);
+    }
+    for (const [groupName, g] of groups) {
+      const bucket = seen.get(groupName);
+      if (!bucket) {
+        destroyGroup(groupName);
+        continue;
+      }
+      for (const shortName of g.entries.keys()) {
+        if (!bucket.has(shortName)) destroyEntryRow(g, shortName);
+      }
+    }
+    for (const [name] of registry) {
+      const { group, short } = splitName(name);
+      const g = ensureGroup(group);
+      ensureEntryRow(g, name, short);
+    }
+    if (groups.size === 0) {
+      activeGroup = null;
+      groupLabel.textContent = "\u2014";
+    } else if (activeGroup === null || !groups.has(activeGroup)) {
+      setActiveGroup(groups.keys().next().value);
+    } else {
+      groupLabel.textContent = activeGroup;
+      const g = groups.get(activeGroup);
+      g.container.style.display = collapsed ? "none" : "flex";
+    }
+    if (!collapsed && activeGroup !== null) {
+      const g = groups.get(activeGroup);
+      if (g) {
+        for (const [shortName, row] of g.entries) {
+          const entry = registry.get(`${activeGroup}.${shortName}`) ?? registry.get(shortName);
+          if (entry) renderEntry(row, entry);
+        }
+      }
+    }
+    const multi = groups.size > 1;
+    const arrowOpacity = multi ? "0.8" : "0.25";
+    const arrowPointer = multi ? "pointer" : "default";
+    prevBtn.style.opacity = arrowOpacity;
+    nextBtn.style.opacity = arrowOpacity;
+    prevBtn.style.cursor = arrowPointer;
+    nextBtn.style.cursor = arrowPointer;
+    bladeEl.style.display = registry.size > 0 ? "flex" : "none";
+    syncFilter();
+  });
+  return {
+    element: bladeEl,
+    dispose() {
+      unsubscribe();
+      groups.clear();
+      blade.dispose();
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addRegistryView
+});
+//# sourceMappingURL=registry-view.cjs.map