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

package/dist/create-pane.d.ts

@@ -1,41 +1,41 @@
-import { Pane } from 'tweakpane';
-
+import { Pane } from "tweakpane";
+//#region src/create-pane.d.ts
 interface CreatePaneOptions {
-    /** Custom container element */
-    container?: HTMLElement;
-    /** Pane title (default: 'Controls') */
-    title?: string;
-    /** Default expansion state (default: true) */
-    expanded?: boolean;
-    /**
-     * Who drives the stats-graph render?
-     *  - `'raf'` (default): the pane starts its own `requestAnimationFrame`
-     *    loop. Zero setup; fine for simple apps.
-     *  - `'manual'`: no internal rAF. Call `bundle.update()` from your own
-     *    frame tick — `renderer.setAnimationLoop` callback, R3F `useFrame`,
-     *    or any ticker you already own. Preferred when you have a render
-     *    loop; avoids a second rAF (which Safari throttles).
-     */
-    driver?: 'raf' | 'manual';
+  /** Custom container element */
+  container?: HTMLElement;
+  /** Pane title (default: 'Controls') */
+  title?: string;
+  /** Default expansion state (default: true) */
+  expanded?: boolean;
+  /**
+   * Who drives the stats-graph render?
+   *  - `'raf'` (default): the pane starts its own `requestAnimationFrame`
+   *    loop. Zero setup; fine for simple apps.
+   *  - `'manual'`: no internal rAF. Call `bundle.update()` from your own
+   *    frame tick — `renderer.setAnimationLoop` callback, R3F `useFrame`,
+   *    or any ticker you already own. Preferred when you have a render
+   *    loop; avoids a second rAF (which Safari throttles).
+   */
+  driver?: 'raf' | 'manual';
 }
 interface PaneBundle {
-    pane: Pane;
-    /**
-     * Render a stats-graph frame. Call from your existing animation loop
-     * (R3F `useFrame`, `renderer.setAnimationLoop`, etc.) for shared-tick
-     * visuals — avoids a second `requestAnimationFrame` callback, which
-     * Safari penalises.
-     *
-     * If you never call `update()`, the graph falls back to its own rAF
-     * so the pane works out-of-the-box in apps without a render loop.
-     */
-    update(): void;
-    /**
-     * `true` once `pane.dispose()` has been called. Lets React hooks
-     * detect that a prior cleanup tore the bundle down and decide
-     * whether to recreate (StrictMode mount→cleanup→mount).
-     */
-    readonly disposed: boolean;
+  pane: Pane;
+  /**
+   * Render a stats-graph frame. Call from your existing animation loop
+   * (R3F `useFrame`, `renderer.setAnimationLoop`, etc.) for shared-tick
+   * visuals — avoids a second `requestAnimationFrame` callback, which
+   * Safari penalises.
+   *
+   * If you never call `update()`, the graph falls back to its own rAF
+   * so the pane works out-of-the-box in apps without a render loop.
+   */
+  update(): void;
+  /**
+   * `true` once `pane.dispose()` has been called. Lets React hooks
+   * detect that a prior cleanup tore the bundle down and decide
+   * whether to recreate (StrictMode mount→cleanup→mount).
+   */
+  readonly disposed: boolean;
 }
 declare function claimPane(bundle: PaneBundle): void;
 /**
@@ -62,5 +62,6 @@ declare function claimPane(bundle: PaneBundle): void;
  * ```
  */
 declare function createPane(options?: CreatePaneOptions): PaneBundle;
-
-export { type CreatePaneOptions, type PaneBundle, claimPane, createPane };
+//#endregion
+export { CreatePaneOptions, PaneBundle, claimPane, createPane };
+//# sourceMappingURL=create-pane.d.ts.map

package/dist/create-pane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-pane.d.ts","names":[],"sources":["../src/create-pane.ts"],"mappings":";;UAWiB;;EAEf,YAAY;;EAEZ;;EAEA;;;;;;;;;;EAUA;;UAGe;EACf,MAAM;;;;;;;;;;EAUN;;;;;;WAMS;;iBAqBK,UAAU,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;iBA2BlB,WAAW,UAAS,oBAAyB"}

package/dist/create-pane.js

@@ -1,178 +1,209 @@
-import { Pane } from "tweakpane";
-import { applyTheme, FLATLAND_THEME } from "./theme.js";
+import { createBuffersModal } from "./buffers-modal.js";
+import { addBuffersView } from "./buffers-view.js";
+import { FLATLAND_THEME, applyTheme } from "./theme.js";
 import { registerPlugins } from "./plugins.js";
 import { addStatsGraph } from "./stats-graph.js";
 import { addStatsRow } from "./stats-row.js";
 import { addProviderSwitcher } from "./provider-switcher.js";
 import { addRegistryView } from "./registry-view.js";
-import { addBuffersView } from "./buffers-view.js";
-import { createBuffersModal } from "./buffers-modal.js";
 import { DevtoolsClient } from "./devtools-client.js";
+import { Pane } from "tweakpane";
+//#region src/create-pane.ts
+/**
+* Module-level "unclaimed pane" slot.
+*
+* React 18+ with StrictMode and Suspense can render a component multiple
+* times before the first effect commits (each aborted render discards its
+* `useRef` slots, including `bundleRef`). Because `new Pane()` mounts a
+* wrapper element to `document.body` synchronously, every aborted attempt
+* would leak a pane into the DOM (each with its own RAF loop).
+*
+* This slot tracks the most recent pane that hasn't been "claimed" by a
+* committed `useEffect`. When `createPane` is called again, any still-
+* unclaimed pane is disposed first — cleaning up orphans from the previous
+* discarded render. Once `usePane`'s effect commits, it calls `claimPane`
+* to prevent the current pane from being disposed by future `createPane`
+* calls in unrelated components.
+*/
 let _unclaimedPane = null;
 function claimPane(bundle) {
-  if (_unclaimedPane === bundle) _unclaimedPane = null;
+	if (_unclaimedPane === bundle) _unclaimedPane = null;
 }
+/**
+* Create a themed Tweakpane instance with collapsible header and stats.
+*
+* Layout:
+*   [Controls ▾]          ← collapsible pane header
+*   ┌─ FPS/MS/MEM graph ─┐ ← always visible (click to cycle)
+*   ├─ Stats (folder) ───┤ ← collapsible: draws, tris
+*   ├─ ...user controls...┤
+*   └────────────────────┘
+*
+* @param options - Title, expansion state, and stats-graph `driver` (see
+*   {@link CreatePaneOptions}). Defaults to a self-ticking `'raf'` pane
+*   titled "Controls".
+* @returns A {@link PaneBundle} — the Tweakpane `pane` plus an `update()`
+*   tick and a `disposed` flag.
+*
+* @example
+* ```typescript
+* const { pane } = createPane({ title: 'Debug' })
+* const folder = pane.addFolder({ title: 'Sprite' })
+* folder.addBinding(state, 'scale', { min: 0.1, max: 4 })
+* ```
+*/
 function createPane(options = {}) {
-  const {
-    title = "Controls",
-    expanded = true,
-    driver = "raf",
-    ...rest
-  } = options;
-  if (_unclaimedPane) {
-    _unclaimedPane.pane.dispose();
-    _unclaimedPane = null;
-  }
-  const pane = new Pane({ title, expanded, ...rest });
-  pane.element.style.zIndex = "1000";
-  const wrapper = pane.element.closest(".tp-dfwv");
-  if (wrapper && wrapper !== pane.element) {
-    wrapper.style.zIndex = "1000";
-  }
-  applyTheme(pane.element, FLATLAND_THEME);
-  registerPlugins(pane);
-  pane.element.classList.add("tp-flatland-dimmable");
-  const header = pane.element.querySelector(".tp-rotv_b");
-  if (header) {
-    const pin = document.createElement("span");
-    pin.className = "tp-flatland-pin";
-    pin.setAttribute("role", "button");
-    pin.setAttribute("aria-label", "Keep pane opaque");
-    pin.setAttribute("aria-pressed", "false");
-    pin.tabIndex = 0;
-    pin.title = "Keep pane opaque";
-    pin.innerHTML = '<svg width="10" height="10" viewBox="0 0 14 14"><circle cx="7" cy="7" r="4"/></svg>';
-    const togglePin = (e) => {
-      e.stopPropagation();
-      e.preventDefault();
-      const pinned = pane.element.classList.toggle("tp-flatland-pinned");
-      pin.setAttribute("aria-pressed", String(pinned));
-    };
-    pin.addEventListener("click", togglePin);
-    pin.addEventListener("mousedown", (e) => {
-      e.stopPropagation();
-    });
-    pin.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") togglePin(e);
-    });
-    header.insertBefore(pin, header.firstChild);
-  }
-  let client = null;
-  let graph = null;
-  let statsRow = null;
-  let providerSwitcher = null;
-  let registryView = null;
-  let buffersView = null;
-  let buffersModal = null;
-  const ACTIVE_FEATURES = ["stats", "env", "registry", "buffers"];
-  let mode = expanded ? "full" : "collapsed";
-  const applyMode = () => {
-    pane.element.classList.toggle("tp-flatland-minimal", mode === "minimal");
-    if (pane.expanded !== (mode !== "collapsed")) {
-      pane.expanded = mode !== "collapsed";
-    }
-    if (modeToggle !== null) {
-      modeToggle.setAttribute("data-mode", mode);
-      modeToggle.setAttribute(
-        "aria-label",
-        mode === "full" ? "Full pane (click for minimal)" : mode === "minimal" ? "Minimal pane (click to collapse)" : "Collapsed (click to expand)"
-      );
-    }
-    const c = client;
-    if (c !== null) {
-      if (mode === "full") c.setFeatures(ACTIVE_FEATURES);
-      else if (mode === "minimal") c.setFeatures(["stats", "env"]);
-      else c.setFeatures([]);
-    }
-    buffersView?.setPaneFolded(mode !== "full");
-  };
-  const cycleMode = () => {
-    mode = mode === "full" ? "minimal" : mode === "minimal" ? "collapsed" : "full";
-    applyMode();
-  };
-  let modeToggle = null;
-  if (header) {
-    modeToggle = document.createElement("span");
-    modeToggle.className = "tp-flatland-mode";
-    modeToggle.setAttribute("role", "button");
-    modeToggle.setAttribute("tabindex", "0");
-    modeToggle.title = "Cycle pane mode: full \u2192 minimal \u2192 collapsed";
-    modeToggle.innerHTML = '<span class="tp-flatland-mode-glyph"></span>';
-    const go = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      cycleMode();
-    };
-    modeToggle.addEventListener("click", go);
-    modeToggle.addEventListener("mousedown", (e) => e.stopPropagation());
-    modeToggle.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") go(e);
-    });
-    header.appendChild(modeToggle);
-    const onHeaderClick = (e) => {
-      const target = e.target;
-      if (target === null) return;
-      if (target.closest(".tp-flatland-pin, .tp-flatland-mode") !== null) return;
-      e.preventDefault();
-      e.stopPropagation();
-      cycleMode();
-    };
-    header.addEventListener("click", onHeaderClick, true);
-  }
-  try {
-    client = new DevtoolsClient({ features: ACTIVE_FEATURES });
-    graph = addStatsGraph(pane, client, { driver });
-    statsRow = addStatsRow(pane, client);
-    providerSwitcher = addProviderSwitcher(pane, client);
-    registryView = addRegistryView(pane, client);
-    buffersModal = createBuffersModal(client, {
-      onActiveChange: (name) => buffersView?.setActiveFromModal(name),
-      onOpen: () => buffersView?.setModalOpen(true),
-      onClose: () => buffersView?.setModalOpen(false)
-    });
-    buffersView = addBuffersView(pane, client, {
-      onExpand: (name) => buffersModal?.open(name)
-    });
-    client.start();
-    graph?.element.classList.add("tp-flatland-minimal-keep");
-    statsRow?.element.classList.add("tp-flatland-minimal-keep");
-    applyMode();
-    pane.on("fold", (ev) => {
-      const desired = ev.expanded ? mode === "collapsed" ? "full" : mode : "collapsed";
-      if (desired !== mode) {
-        mode = desired;
-        applyMode();
-      }
-    });
-  } catch {
-  }
-  let disposed = false;
-  const originalDispose = pane.dispose.bind(pane);
-  pane.dispose = () => {
-    if (disposed) return;
-    disposed = true;
-    graph?.dispose();
-    statsRow?.dispose();
-    providerSwitcher?.dispose();
-    registryView?.dispose();
-    buffersView?.dispose();
-    buffersModal?.dispose();
-    client?.dispose();
-    if (_unclaimedPane === bundle) _unclaimedPane = null;
-    originalDispose();
-  };
-  const bundle = {
-    pane,
-    update: () => graph?.update(),
-    get disposed() {
-      return disposed;
-    }
-  };
-  _unclaimedPane = bundle;
-  return bundle;
+	const { title = "Controls", expanded = true, driver = "raf", ...rest } = options;
+	if (_unclaimedPane) {
+		_unclaimedPane.pane.dispose();
+		_unclaimedPane = null;
+	}
+	const pane = new Pane({
+		title,
+		expanded,
+		...rest
+	});
+	pane.element.style.zIndex = "1000";
+	const wrapper = pane.element.closest(".tp-dfwv");
+	if (wrapper && wrapper !== pane.element) wrapper.style.zIndex = "1000";
+	applyTheme(pane.element, FLATLAND_THEME);
+	registerPlugins(pane);
+	pane.element.classList.add("tp-flatland-dimmable");
+	const header = pane.element.querySelector(".tp-rotv_b");
+	if (header) {
+		const pin = document.createElement("span");
+		pin.className = "tp-flatland-pin";
+		pin.setAttribute("role", "button");
+		pin.setAttribute("aria-label", "Keep pane opaque");
+		pin.setAttribute("aria-pressed", "false");
+		pin.tabIndex = 0;
+		pin.title = "Keep pane opaque";
+		pin.innerHTML = "<svg width=\"10\" height=\"10\" viewBox=\"0 0 14 14\"><circle cx=\"7\" cy=\"7\" r=\"4\"/></svg>";
+		const togglePin = (e) => {
+			e.stopPropagation();
+			e.preventDefault();
+			const pinned = pane.element.classList.toggle("tp-flatland-pinned");
+			pin.setAttribute("aria-pressed", String(pinned));
+		};
+		pin.addEventListener("click", togglePin);
+		pin.addEventListener("mousedown", (e) => {
+			e.stopPropagation();
+		});
+		pin.addEventListener("keydown", (e) => {
+			if (e.key === "Enter" || e.key === " ") togglePin(e);
+		});
+		header.insertBefore(pin, header.firstChild);
+	}
+	let client = null;
+	let graph = null;
+	let statsRow = null;
+	let providerSwitcher = null;
+	let registryView = null;
+	let buffersView = null;
+	let buffersModal = null;
+	const ACTIVE_FEATURES = [
+		"stats",
+		"env",
+		"registry",
+		"buffers"
+	];
+	let mode = expanded ? "full" : "collapsed";
+	const applyMode = () => {
+		pane.element.classList.toggle("tp-flatland-minimal", mode === "minimal");
+		if (pane.expanded !== (mode !== "collapsed")) pane.expanded = mode !== "collapsed";
+		if (modeToggle !== null) {
+			modeToggle.setAttribute("data-mode", mode);
+			modeToggle.setAttribute("aria-label", mode === "full" ? "Full pane (click for minimal)" : mode === "minimal" ? "Minimal pane (click to collapse)" : "Collapsed (click to expand)");
+		}
+		const c = client;
+		if (c !== null) if (mode === "full") c.setFeatures(ACTIVE_FEATURES);
+		else if (mode === "minimal") c.setFeatures(["stats", "env"]);
+		else c.setFeatures([]);
+		buffersView?.setPaneFolded(mode !== "full");
+	};
+	const cycleMode = () => {
+		mode = mode === "full" ? "minimal" : mode === "minimal" ? "collapsed" : "full";
+		applyMode();
+	};
+	let modeToggle = null;
+	if (header) {
+		modeToggle = document.createElement("span");
+		modeToggle.className = "tp-flatland-mode";
+		modeToggle.setAttribute("role", "button");
+		modeToggle.setAttribute("tabindex", "0");
+		modeToggle.title = "Cycle pane mode: full → minimal → collapsed";
+		modeToggle.innerHTML = "<span class=\"tp-flatland-mode-glyph\"></span>";
+		const go = (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			cycleMode();
+		};
+		modeToggle.addEventListener("click", go);
+		modeToggle.addEventListener("mousedown", (e) => e.stopPropagation());
+		modeToggle.addEventListener("keydown", (e) => {
+			if (e.key === "Enter" || e.key === " ") go(e);
+		});
+		header.appendChild(modeToggle);
+		const onHeaderClick = (e) => {
+			const target = e.target;
+			if (target === null) return;
+			if (target.closest(".tp-flatland-pin, .tp-flatland-mode") !== null) return;
+			e.preventDefault();
+			e.stopPropagation();
+			cycleMode();
+		};
+		header.addEventListener("click", onHeaderClick, true);
+	}
+	try {
+		client = new DevtoolsClient({ features: ACTIVE_FEATURES });
+		graph = addStatsGraph(pane, client, { driver });
+		statsRow = addStatsRow(pane, client);
+		providerSwitcher = addProviderSwitcher(pane, client);
+		registryView = addRegistryView(pane, client);
+		buffersModal = createBuffersModal(client, {
+			onActiveChange: (name) => buffersView?.setActiveFromModal(name),
+			onOpen: () => buffersView?.setModalOpen(true),
+			onClose: () => buffersView?.setModalOpen(false)
+		});
+		buffersView = addBuffersView(pane, client, { onExpand: (name) => buffersModal?.open(name) });
+		client.start();
+		graph?.element.classList.add("tp-flatland-minimal-keep");
+		statsRow?.element.classList.add("tp-flatland-minimal-keep");
+		applyMode();
+		pane.on("fold", (ev) => {
+			const desired = ev.expanded ? mode === "collapsed" ? "full" : mode : "collapsed";
+			if (desired !== mode) {
+				mode = desired;
+				applyMode();
+			}
+		});
+	} catch {}
+	let disposed = false;
+	const originalDispose = pane.dispose.bind(pane);
+	pane.dispose = () => {
+		if (disposed) return;
+		disposed = true;
+		graph?.dispose();
+		statsRow?.dispose();
+		providerSwitcher?.dispose();
+		registryView?.dispose();
+		buffersView?.dispose();
+		buffersModal?.dispose();
+		client?.dispose();
+		if (_unclaimedPane === bundle) _unclaimedPane = null;
+		originalDispose();
+	};
+	const bundle = {
+		pane,
+		update: () => graph?.update(),
+		get disposed() {
+			return disposed;
+		}
+	};
+	_unclaimedPane = bundle;
+	return bundle;
 }
-export {
-  claimPane,
-  createPane
-};
+//#endregion
+export { claimPane, createPane };
+
 //# sourceMappingURL=create-pane.js.map

package/dist/create-pane.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/create-pane.ts"],"sourcesContent":["import { Pane } from 'tweakpane'\nimport { applyTheme, FLATLAND_THEME } from './theme.js'\nimport { registerPlugins } from './plugins.js'\nimport { addStatsGraph, type StatsGraphHandle } from './stats-graph.js'\nimport { addStatsRow, type StatsRowHandle } from './stats-row.js'\nimport { addProviderSwitcher, type ProviderSwitcherHandle } from './provider-switcher.js'\nimport { addRegistryView, type RegistryViewHandle } from './registry-view.js'\nimport { addBuffersView, type BuffersViewHandle } from './buffers-view.js'\nimport { createBuffersModal, type BuffersModalHandle } from './buffers-modal.js'\nimport { DevtoolsClient } from './devtools-client.js'\n\nexport interface CreatePaneOptions {\n  /** Custom container element */\n  container?: HTMLElement\n  /** Pane title (default: 'Controls') */\n  title?: string\n  /** Default expansion state (default: true) */\n  expanded?: boolean\n  /**\n   * Who drives the stats-graph render?\n   *  - `'raf'` (default): the pane starts its own `requestAnimationFrame`\n   *    loop. Zero setup; fine for simple apps.\n   *  - `'manual'`: no internal rAF. Call `bundle.update()` from your own\n   *    frame tick — `renderer.setAnimationLoop` callback, R3F `useFrame`,\n   *    or any ticker you already own. Preferred when you have a render\n   *    loop; avoids a second rAF (which Safari throttles).\n   */\n  driver?: 'raf' | 'manual'\n}\n\nexport interface PaneBundle {\n  pane: Pane\n  /**\n   * Render a stats-graph frame. Call from your existing animation loop\n   * (R3F `useFrame`, `renderer.setAnimationLoop`, etc.) for shared-tick\n   * visuals — avoids a second `requestAnimationFrame` callback, which\n   * Safari penalises.\n   *\n   * If you never call `update()`, the graph falls back to its own rAF\n   * so the pane works out-of-the-box in apps without a render loop.\n   */\n  update(): void\n  /**\n   * `true` once `pane.dispose()` has been called. Lets React hooks\n   * detect that a prior cleanup tore the bundle down and decide\n   * whether to recreate (StrictMode mount→cleanup→mount).\n   */\n  readonly disposed: boolean\n}\n\n/**\n * Module-level \"unclaimed pane\" slot.\n *\n * React 18+ with StrictMode and Suspense can render a component multiple\n * times before the first effect commits (each aborted render discards its\n * `useRef` slots, including `bundleRef`). Because `new Pane()` mounts a\n * wrapper element to `document.body` synchronously, every aborted attempt\n * would leak a pane into the DOM (each with its own RAF loop).\n *\n * This slot tracks the most recent pane that hasn't been \"claimed\" by a\n * committed `useEffect`. When `createPane` is called again, any still-\n * unclaimed pane is disposed first — cleaning up orphans from the previous\n * discarded render. Once `usePane`'s effect commits, it calls `claimPane`\n * to prevent the current pane from being disposed by future `createPane`\n * calls in unrelated components.\n */\nlet _unclaimedPane: PaneBundle | null = null\n\nexport function claimPane(bundle: PaneBundle): void {\n  if (_unclaimedPane === bundle) _unclaimedPane = null\n}\n\n/**\n * Create a themed Tweakpane instance with collapsible header and stats.\n *\n * Layout:\n *   [Controls ▾]          ← collapsible pane header\n *   ┌─ FPS/MS/MEM graph ─┐ ← always visible (click to cycle)\n *   ├─ Stats (folder) ───┤ ← collapsible: draws, tris\n *   ├─ ...user controls...┤\n *   └────────────────────┘\n *\n * @param options - Title, expansion state, and stats-graph `driver` (see\n *   {@link CreatePaneOptions}). Defaults to a self-ticking `'raf'` pane\n *   titled \"Controls\".\n * @returns A {@link PaneBundle} — the Tweakpane `pane` plus an `update()`\n *   tick and a `disposed` flag.\n *\n * @example\n * ```typescript\n * const { pane } = createPane({ title: 'Debug' })\n * const folder = pane.addFolder({ title: 'Sprite' })\n * folder.addBinding(state, 'scale', { min: 0.1, max: 4 })\n * ```\n */\nexport function createPane(options: CreatePaneOptions = {}): PaneBundle {\n  const {\n    title = 'Controls',\n    expanded = true,\n    driver = 'raf',\n    ...rest\n  } = options\n\n  // Dispose any orphaned pane from a previous (aborted) render attempt.\n  if (_unclaimedPane) {\n    _unclaimedPane.pane.dispose()\n    _unclaimedPane = null\n  }\n\n  const pane = new Pane({ title, expanded, ...rest })\n\n  // Ensure pane floats above canvas elements (R3F creates full-viewport divs).\n  // Tweakpane wraps `pane.element` in a `.tp-dfwv` default-wrapper that's the\n  // actual body sibling and stacks against other overlays — z-index on the\n  // inner element would be a no-op. Apply to the wrapper when it exists.\n  pane.element.style.zIndex = '1000'\n  const wrapper = pane.element.closest<HTMLElement>('.tp-dfwv')\n  if (wrapper && wrapper !== pane.element) {\n    wrapper.style.zIndex = '1000'\n  }\n\n  applyTheme(pane.element, FLATLAND_THEME)\n  registerPlugins(pane)\n\n  // Idle-dimming + pin toggle. The pane is translucent while the mouse\n  // isn't over it, fully opaque on hover. Clicking the pin in the header\n  // locks it to fully opaque regardless of hover. See theme.ts for the\n  // CSS that backs the `tp-flatland-dimmable` / `tp-flatland-pinned`\n  // classes and the `tp-flatland-pin` element.\n  pane.element.classList.add('tp-flatland-dimmable')\n  const header = pane.element.querySelector<HTMLElement>('.tp-rotv_b')\n  if (header) {\n    const pin = document.createElement('span')\n    pin.className = 'tp-flatland-pin'\n    pin.setAttribute('role', 'button')\n    pin.setAttribute('aria-label', 'Keep pane opaque')\n    pin.setAttribute('aria-pressed', 'false')\n    pin.tabIndex = 0\n    pin.title = 'Keep pane opaque'\n    pin.innerHTML = '<svg width=\"10\" height=\"10\" viewBox=\"0 0 14 14\"><circle cx=\"7\" cy=\"7\" r=\"4\"/></svg>'\n\n    const togglePin = (e: Event) => {\n      e.stopPropagation()\n      e.preventDefault()\n      const pinned = pane.element.classList.toggle('tp-flatland-pinned')\n      pin.setAttribute('aria-pressed', String(pinned))\n    }\n    pin.addEventListener('click', togglePin)\n    // Stop mousedown so the header button doesn't flash its :active state\n    // (and doesn't gain focus) when clicking the pin.\n    pin.addEventListener('mousedown', (e) => {\n      e.stopPropagation()\n    })\n    pin.addEventListener('keydown', (e) => {\n      if (e.key === 'Enter' || e.key === ' ') togglePin(e)\n    })\n\n    header.insertBefore(pin, header.firstChild)\n  }\n\n  // Always-on stats graph + row, bus-driven. A single `DevtoolsClient`\n  // feeds both. If the bus isn't available in the environment (e.g., a\n  // test runner without BroadcastChannel), the try/catch swallows it\n  // and the pane still works for user controls — just no stats display.\n  let client: DevtoolsClient | null = null\n  let graph: StatsGraphHandle | null = null\n  let statsRow: StatsRowHandle | null = null\n  let providerSwitcher: ProviderSwitcherHandle | null = null\n  let registryView: RegistryViewHandle | null = null\n  let buffersView: BuffersViewHandle | null = null\n  let buffersModal: BuffersModalHandle | null = null\n\n  const ACTIVE_FEATURES: ('stats' | 'env' | 'registry' | 'buffers')[] = ['stats', 'env', 'registry', 'buffers']\n\n  // Three-mode cycle — full → minimal → collapsed → full. Replaces\n  // Tweakpane's binary fold with something more useful: \"minimal\" keeps\n  // only the stats graph + draws/tris row visible (no buffers, no\n  // registry, no provider switcher, no user-added controls) so you can\n  // watch perf numbers without a giant pane covering the viewport, AND\n  // without paying the cost of buffer streaming.\n  type Mode = 'full' | 'minimal' | 'collapsed'\n  let mode: Mode = expanded ? 'full' : 'collapsed'\n\n  const applyMode = (): void => {\n    pane.element.classList.toggle('tp-flatland-minimal', mode === 'minimal')\n    // 'full' and 'minimal' both have the pane expanded at the TP level;\n    // 'collapsed' folds it.\n    if (pane.expanded !== (mode !== 'collapsed')) {\n      pane.expanded = mode !== 'collapsed'\n    }\n    // Our own caret icon reflects the cycle position.\n    if (modeToggle !== null) {\n      modeToggle.setAttribute('data-mode', mode)\n      modeToggle.setAttribute(\n        'aria-label',\n        mode === 'full' ? 'Full pane (click for minimal)'\n        : mode === 'minimal' ? 'Minimal pane (click to collapse)'\n        : 'Collapsed (click to expand)',\n      )\n    }\n    const c = client\n    if (c !== null) {\n      // Feature gating follows the mode:\n      //   full     → everything\n      //   minimal  → stats + env only; no registry, no buffers drain\n      //   collapsed → nothing\n      if (mode === 'full') c.setFeatures(ACTIVE_FEATURES)\n      else if (mode === 'minimal') c.setFeatures(['stats', 'env'])\n      else c.setFeatures([])\n    }\n    // Propagate into the buffers view so it knows to unsubscribe. Both\n    // 'minimal' and 'collapsed' ask the view to treat itself as folded\n    // (no thumbnail stream, no GPU readback on the provider).\n    buffersView?.setPaneFolded(mode !== 'full')\n  }\n\n  const cycleMode = (): void => {\n    mode = mode === 'full' ? 'minimal' : mode === 'minimal' ? 'collapsed' : 'full'\n    applyMode()\n  }\n\n  // Replace Tweakpane's built-in fold caret with our own mode-cycle\n  // button AND intercept clicks anywhere on the pane header so the\n  // native binary-fold behavior doesn't skip 'minimal'. The native\n  // caret is hidden via CSS (.tp-rotv_m display:none).\n  let modeToggle: HTMLElement | null = null\n  if (header) {\n    modeToggle = document.createElement('span')\n    modeToggle.className = 'tp-flatland-mode'\n    modeToggle.setAttribute('role', 'button')\n    modeToggle.setAttribute('tabindex', '0')\n    modeToggle.title = 'Cycle pane mode: full → minimal → collapsed'\n    // Single caret glyph — CSS rotates it based on data-mode so one\n    // visual vocabulary handles all three states. Matches tweakpane's\n    // native rotating-caret convention and gives a screw-head look at\n    // 45° for minimal.\n    modeToggle.innerHTML = '<span class=\"tp-flatland-mode-glyph\"></span>'\n    const go = (e: Event): void => {\n      e.preventDefault()\n      e.stopPropagation()\n      cycleMode()\n    }\n    modeToggle.addEventListener('click', go)\n    modeToggle.addEventListener('mousedown', (e) => e.stopPropagation())\n    modeToggle.addEventListener('keydown', (e) => {\n      if (e.key === 'Enter' || e.key === ' ') go(e)\n    })\n    header.appendChild(modeToggle)\n\n    // Capture-phase click on the header itself — Tweakpane's root\n    // component wires a listener that toggles `expanded`, which would\n    // skip our tri-state. Intercept before it fires, cycle our modes,\n    // stop propagation so the default toggle never runs. Clicks on our\n    // own overlay buttons (pin, mode toggle) already stop propagation\n    // themselves, so they're unaffected.\n    const onHeaderClick = (e: MouseEvent): void => {\n      const target = e.target as HTMLElement | null\n      if (target === null) return\n      // Let clicks on our own interactive children through untouched.\n      if (target.closest('.tp-flatland-pin, .tp-flatland-mode') !== null) return\n      e.preventDefault()\n      e.stopPropagation()\n      cycleMode()\n    }\n    header.addEventListener('click', onHeaderClick, true)\n  }\n\n  try {\n    client = new DevtoolsClient({ features: ACTIVE_FEATURES })\n    graph = addStatsGraph(pane, client, { driver })\n    statsRow = addStatsRow(pane, client)\n    // Hidden until two or more providers announce.\n    providerSwitcher = addProviderSwitcher(pane, client)\n    // Hidden until the provider publishes at least one entry via\n    // `registerDebugArray`.\n    registryView = addRegistryView(pane, client)\n    // Modal is built lazily — `createBuffersModal` mounts the DOM\n    // immediately (display:none) so the first expand is instant.\n    buffersModal = createBuffersModal(client, {\n      onActiveChange: (name) => buffersView?.setActiveFromModal(name),\n      onOpen: () => buffersView?.setModalOpen(true),\n      onClose: () => buffersView?.setModalOpen(false),\n    })\n    // Hidden until the provider publishes at least one debug texture\n    // via `registerDebugTexture`. ⤢ in-blade button calls into the\n    // modal handle.\n    buffersView = addBuffersView(pane, client, {\n      onExpand: (name) => buffersModal?.open(name),\n    })\n    client.start()\n\n    // Mark the always-visible blades so CSS can keep them shown while\n    // hiding everything else in 'minimal' mode.\n    graph?.element.classList.add('tp-flatland-minimal-keep')\n    statsRow?.element.classList.add('tp-flatland-minimal-keep')\n\n    applyMode()\n\n    // Tweakpane still tries to toggle expanded when the user clicks the\n    // header — intercept and redirect through our cycle. The `fold`\n    // event fires from keyboard ⇥-space or external sets; keep it as a\n    // fallback that syncs our mode if something else flips expansion.\n    pane.on('fold', (ev) => {\n      const desired: Mode = ev.expanded\n        ? (mode === 'collapsed' ? 'full' : mode)\n        : 'collapsed'\n      if (desired !== mode) {\n        mode = desired\n        applyMode()\n      }\n    })\n  } catch {\n    // Bus unavailable — skip the stats blades. Pane still usable.\n  }\n\n  // Clean up on dispose. Idempotent: calling `dispose()` twice (e.g.,\n  // once by the user and once by a later `createPane` disposing the\n  // unclaimed slot) no-ops the second time instead of throwing.\n  let disposed = false\n  const originalDispose = pane.dispose.bind(pane)\n  pane.dispose = () => {\n    if (disposed) return\n    disposed = true\n    graph?.dispose()\n    statsRow?.dispose()\n    providerSwitcher?.dispose()\n    registryView?.dispose()\n    buffersView?.dispose()\n    buffersModal?.dispose()\n    client?.dispose()\n    // If the user disposed the pane directly without claiming, free\n    // the slot so the next createPane doesn't try to dispose us again.\n    if (_unclaimedPane === bundle) _unclaimedPane = null\n    originalDispose()\n  }\n\n  const bundle: PaneBundle = {\n    pane,\n    update: () => graph?.update(),\n    get disposed() {\n      return disposed\n    },\n  }\n  _unclaimedPane = bundle\n  return bundle\n}\n"],"mappings":"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","names":[]}
+{"version":3,"file":"create-pane.js","names":[],"sources":["../src/create-pane.ts"],"sourcesContent":["import { Pane } from 'tweakpane'\nimport { applyTheme, FLATLAND_THEME } from './theme.js'\nimport { registerPlugins } from './plugins.js'\nimport { addStatsGraph, type StatsGraphHandle } from './stats-graph.js'\nimport { addStatsRow, type StatsRowHandle } from './stats-row.js'\nimport { addProviderSwitcher, type ProviderSwitcherHandle } from './provider-switcher.js'\nimport { addRegistryView, type RegistryViewHandle } from './registry-view.js'\nimport { addBuffersView, type BuffersViewHandle } from './buffers-view.js'\nimport { createBuffersModal, type BuffersModalHandle } from './buffers-modal.js'\nimport { DevtoolsClient } from './devtools-client.js'\n\nexport interface CreatePaneOptions {\n  /** Custom container element */\n  container?: HTMLElement\n  /** Pane title (default: 'Controls') */\n  title?: string\n  /** Default expansion state (default: true) */\n  expanded?: boolean\n  /**\n   * Who drives the stats-graph render?\n   *  - `'raf'` (default): the pane starts its own `requestAnimationFrame`\n   *    loop. Zero setup; fine for simple apps.\n   *  - `'manual'`: no internal rAF. Call `bundle.update()` from your own\n   *    frame tick — `renderer.setAnimationLoop` callback, R3F `useFrame`,\n   *    or any ticker you already own. Preferred when you have a render\n   *    loop; avoids a second rAF (which Safari throttles).\n   */\n  driver?: 'raf' | 'manual'\n}\n\nexport interface PaneBundle {\n  pane: Pane\n  /**\n   * Render a stats-graph frame. Call from your existing animation loop\n   * (R3F `useFrame`, `renderer.setAnimationLoop`, etc.) for shared-tick\n   * visuals — avoids a second `requestAnimationFrame` callback, which\n   * Safari penalises.\n   *\n   * If you never call `update()`, the graph falls back to its own rAF\n   * so the pane works out-of-the-box in apps without a render loop.\n   */\n  update(): void\n  /**\n   * `true` once `pane.dispose()` has been called. Lets React hooks\n   * detect that a prior cleanup tore the bundle down and decide\n   * whether to recreate (StrictMode mount→cleanup→mount).\n   */\n  readonly disposed: boolean\n}\n\n/**\n * Module-level \"unclaimed pane\" slot.\n *\n * React 18+ with StrictMode and Suspense can render a component multiple\n * times before the first effect commits (each aborted render discards its\n * `useRef` slots, including `bundleRef`). Because `new Pane()` mounts a\n * wrapper element to `document.body` synchronously, every aborted attempt\n * would leak a pane into the DOM (each with its own RAF loop).\n *\n * This slot tracks the most recent pane that hasn't been \"claimed\" by a\n * committed `useEffect`. When `createPane` is called again, any still-\n * unclaimed pane is disposed first — cleaning up orphans from the previous\n * discarded render. Once `usePane`'s effect commits, it calls `claimPane`\n * to prevent the current pane from being disposed by future `createPane`\n * calls in unrelated components.\n */\nlet _unclaimedPane: PaneBundle | null = null\n\nexport function claimPane(bundle: PaneBundle): void {\n  if (_unclaimedPane === bundle) _unclaimedPane = null\n}\n\n/**\n * Create a themed Tweakpane instance with collapsible header and stats.\n *\n * Layout:\n *   [Controls ▾]          ← collapsible pane header\n *   ┌─ FPS/MS/MEM graph ─┐ ← always visible (click to cycle)\n *   ├─ Stats (folder) ───┤ ← collapsible: draws, tris\n *   ├─ ...user controls...┤\n *   └────────────────────┘\n *\n * @param options - Title, expansion state, and stats-graph `driver` (see\n *   {@link CreatePaneOptions}). Defaults to a self-ticking `'raf'` pane\n *   titled \"Controls\".\n * @returns A {@link PaneBundle} — the Tweakpane `pane` plus an `update()`\n *   tick and a `disposed` flag.\n *\n * @example\n * ```typescript\n * const { pane } = createPane({ title: 'Debug' })\n * const folder = pane.addFolder({ title: 'Sprite' })\n * folder.addBinding(state, 'scale', { min: 0.1, max: 4 })\n * ```\n */\nexport function createPane(options: CreatePaneOptions = {}): PaneBundle {\n  const { title = 'Controls', expanded = true, driver = 'raf', ...rest } = options\n\n  // Dispose any orphaned pane from a previous (aborted) render attempt.\n  if (_unclaimedPane) {\n    _unclaimedPane.pane.dispose()\n    _unclaimedPane = null\n  }\n\n  const pane = new Pane({ title, expanded, ...rest })\n\n  // Ensure pane floats above canvas elements (R3F creates full-viewport divs).\n  // Tweakpane wraps `pane.element` in a `.tp-dfwv` default-wrapper that's the\n  // actual body sibling and stacks against other overlays — z-index on the\n  // inner element would be a no-op. Apply to the wrapper when it exists.\n  pane.element.style.zIndex = '1000'\n  const wrapper = pane.element.closest<HTMLElement>('.tp-dfwv')\n  if (wrapper && wrapper !== pane.element) {\n    wrapper.style.zIndex = '1000'\n  }\n\n  applyTheme(pane.element, FLATLAND_THEME)\n  registerPlugins(pane)\n\n  // Idle-dimming + pin toggle. The pane is translucent while the mouse\n  // isn't over it, fully opaque on hover. Clicking the pin in the header\n  // locks it to fully opaque regardless of hover. See theme.ts for the\n  // CSS that backs the `tp-flatland-dimmable` / `tp-flatland-pinned`\n  // classes and the `tp-flatland-pin` element.\n  pane.element.classList.add('tp-flatland-dimmable')\n  const header = pane.element.querySelector<HTMLElement>('.tp-rotv_b')\n  if (header) {\n    const pin = document.createElement('span')\n    pin.className = 'tp-flatland-pin'\n    pin.setAttribute('role', 'button')\n    pin.setAttribute('aria-label', 'Keep pane opaque')\n    pin.setAttribute('aria-pressed', 'false')\n    pin.tabIndex = 0\n    pin.title = 'Keep pane opaque'\n    pin.innerHTML = '<svg width=\"10\" height=\"10\" viewBox=\"0 0 14 14\"><circle cx=\"7\" cy=\"7\" r=\"4\"/></svg>'\n\n    const togglePin = (e: Event) => {\n      e.stopPropagation()\n      e.preventDefault()\n      const pinned = pane.element.classList.toggle('tp-flatland-pinned')\n      pin.setAttribute('aria-pressed', String(pinned))\n    }\n    pin.addEventListener('click', togglePin)\n    // Stop mousedown so the header button doesn't flash its :active state\n    // (and doesn't gain focus) when clicking the pin.\n    pin.addEventListener('mousedown', (e) => {\n      e.stopPropagation()\n    })\n    pin.addEventListener('keydown', (e) => {\n      if (e.key === 'Enter' || e.key === ' ') togglePin(e)\n    })\n\n    header.insertBefore(pin, header.firstChild)\n  }\n\n  // Always-on stats graph + row, bus-driven. A single `DevtoolsClient`\n  // feeds both. If the bus isn't available in the environment (e.g., a\n  // test runner without BroadcastChannel), the try/catch swallows it\n  // and the pane still works for user controls — just no stats display.\n  let client: DevtoolsClient | null = null\n  let graph: StatsGraphHandle | null = null\n  let statsRow: StatsRowHandle | null = null\n  let providerSwitcher: ProviderSwitcherHandle | null = null\n  let registryView: RegistryViewHandle | null = null\n  let buffersView: BuffersViewHandle | null = null\n  let buffersModal: BuffersModalHandle | null = null\n\n  const ACTIVE_FEATURES: ('stats' | 'env' | 'registry' | 'buffers')[] = ['stats', 'env', 'registry', 'buffers']\n\n  // Three-mode cycle — full → minimal → collapsed → full. Replaces\n  // Tweakpane's binary fold with something more useful: \"minimal\" keeps\n  // only the stats graph + draws/tris row visible (no buffers, no\n  // registry, no provider switcher, no user-added controls) so you can\n  // watch perf numbers without a giant pane covering the viewport, AND\n  // without paying the cost of buffer streaming.\n  type Mode = 'full' | 'minimal' | 'collapsed'\n  let mode: Mode = expanded ? 'full' : 'collapsed'\n\n  const applyMode = (): void => {\n    pane.element.classList.toggle('tp-flatland-minimal', mode === 'minimal')\n    // 'full' and 'minimal' both have the pane expanded at the TP level;\n    // 'collapsed' folds it.\n    if (pane.expanded !== (mode !== 'collapsed')) {\n      pane.expanded = mode !== 'collapsed'\n    }\n    // Our own caret icon reflects the cycle position.\n    if (modeToggle !== null) {\n      modeToggle.setAttribute('data-mode', mode)\n      modeToggle.setAttribute(\n        'aria-label',\n        mode === 'full'\n          ? 'Full pane (click for minimal)'\n          : mode === 'minimal'\n            ? 'Minimal pane (click to collapse)'\n            : 'Collapsed (click to expand)'\n      )\n    }\n    const c = client\n    if (c !== null) {\n      // Feature gating follows the mode:\n      //   full     → everything\n      //   minimal  → stats + env only; no registry, no buffers drain\n      //   collapsed → nothing\n      if (mode === 'full') c.setFeatures(ACTIVE_FEATURES)\n      else if (mode === 'minimal') c.setFeatures(['stats', 'env'])\n      else c.setFeatures([])\n    }\n    // Propagate into the buffers view so it knows to unsubscribe. Both\n    // 'minimal' and 'collapsed' ask the view to treat itself as folded\n    // (no thumbnail stream, no GPU readback on the provider).\n    buffersView?.setPaneFolded(mode !== 'full')\n  }\n\n  const cycleMode = (): void => {\n    mode = mode === 'full' ? 'minimal' : mode === 'minimal' ? 'collapsed' : 'full'\n    applyMode()\n  }\n\n  // Replace Tweakpane's built-in fold caret with our own mode-cycle\n  // button AND intercept clicks anywhere on the pane header so the\n  // native binary-fold behavior doesn't skip 'minimal'. The native\n  // caret is hidden via CSS (.tp-rotv_m display:none).\n  let modeToggle: HTMLElement | null = null\n  if (header) {\n    modeToggle = document.createElement('span')\n    modeToggle.className = 'tp-flatland-mode'\n    modeToggle.setAttribute('role', 'button')\n    modeToggle.setAttribute('tabindex', '0')\n    modeToggle.title = 'Cycle pane mode: full → minimal → collapsed'\n    // Single caret glyph — CSS rotates it based on data-mode so one\n    // visual vocabulary handles all three states. Matches tweakpane's\n    // native rotating-caret convention and gives a screw-head look at\n    // 45° for minimal.\n    modeToggle.innerHTML = '<span class=\"tp-flatland-mode-glyph\"></span>'\n    const go = (e: Event): void => {\n      e.preventDefault()\n      e.stopPropagation()\n      cycleMode()\n    }\n    modeToggle.addEventListener('click', go)\n    modeToggle.addEventListener('mousedown', (e) => e.stopPropagation())\n    modeToggle.addEventListener('keydown', (e) => {\n      if (e.key === 'Enter' || e.key === ' ') go(e)\n    })\n    header.appendChild(modeToggle)\n\n    // Capture-phase click on the header itself — Tweakpane's root\n    // component wires a listener that toggles `expanded`, which would\n    // skip our tri-state. Intercept before it fires, cycle our modes,\n    // stop propagation so the default toggle never runs. Clicks on our\n    // own overlay buttons (pin, mode toggle) already stop propagation\n    // themselves, so they're unaffected.\n    const onHeaderClick = (e: MouseEvent): void => {\n      const target = e.target as HTMLElement | null\n      if (target === null) return\n      // Let clicks on our own interactive children through untouched.\n      if (target.closest('.tp-flatland-pin, .tp-flatland-mode') !== null) return\n      e.preventDefault()\n      e.stopPropagation()\n      cycleMode()\n    }\n    header.addEventListener('click', onHeaderClick, true)\n  }\n\n  try {\n    client = new DevtoolsClient({ features: ACTIVE_FEATURES })\n    graph = addStatsGraph(pane, client, { driver })\n    statsRow = addStatsRow(pane, client)\n    // Hidden until two or more providers announce.\n    providerSwitcher = addProviderSwitcher(pane, client)\n    // Hidden until the provider publishes at least one entry via\n    // `registerDebugArray`.\n    registryView = addRegistryView(pane, client)\n    // Modal is built lazily — `createBuffersModal` mounts the DOM\n    // immediately (display:none) so the first expand is instant.\n    buffersModal = createBuffersModal(client, {\n      onActiveChange: (name) => buffersView?.setActiveFromModal(name),\n      onOpen: () => buffersView?.setModalOpen(true),\n      onClose: () => buffersView?.setModalOpen(false),\n    })\n    // Hidden until the provider publishes at least one debug texture\n    // via `registerDebugTexture`. ⤢ in-blade button calls into the\n    // modal handle.\n    buffersView = addBuffersView(pane, client, {\n      onExpand: (name) => buffersModal?.open(name),\n    })\n    client.start()\n\n    // Mark the always-visible blades so CSS can keep them shown while\n    // hiding everything else in 'minimal' mode.\n    graph?.element.classList.add('tp-flatland-minimal-keep')\n    statsRow?.element.classList.add('tp-flatland-minimal-keep')\n\n    applyMode()\n\n    // Tweakpane still tries to toggle expanded when the user clicks the\n    // header — intercept and redirect through our cycle. The `fold`\n    // event fires from keyboard ⇥-space or external sets; keep it as a\n    // fallback that syncs our mode if something else flips expansion.\n    pane.on('fold', (ev) => {\n      const desired: Mode = ev.expanded ? (mode === 'collapsed' ? 'full' : mode) : 'collapsed'\n      if (desired !== mode) {\n        mode = desired\n        applyMode()\n      }\n    })\n  } catch {\n    // Bus unavailable — skip the stats blades. Pane still usable.\n  }\n\n  // Clean up on dispose. Idempotent: calling `dispose()` twice (e.g.,\n  // once by the user and once by a later `createPane` disposing the\n  // unclaimed slot) no-ops the second time instead of throwing.\n  let disposed = false\n  const originalDispose = pane.dispose.bind(pane)\n  pane.dispose = () => {\n    if (disposed) return\n    disposed = true\n    graph?.dispose()\n    statsRow?.dispose()\n    providerSwitcher?.dispose()\n    registryView?.dispose()\n    buffersView?.dispose()\n    buffersModal?.dispose()\n    client?.dispose()\n    // If the user disposed the pane directly without claiming, free\n    // the slot so the next createPane doesn't try to dispose us again.\n    if (_unclaimedPane === bundle) _unclaimedPane = null\n    originalDispose()\n  }\n\n  const bundle: PaneBundle = {\n    pane,\n    update: () => graph?.update(),\n    get disposed() {\n      return disposed\n    },\n  }\n  _unclaimedPane = bundle\n  return bundle\n}\n"],"mappings":"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"}

package/dist/dashboard/app.tsx

@@ -11,6 +11,7 @@ import { HeaderStats } from './panels/header-stats.js'
 import { ProducerSelect } from './panels/producer-select.js'
 import { ProtocolLog } from './panels/protocol-log.js'
 import { RegistryPanel } from './panels/registry.js'
+import { Scrubber } from './panels/scrubber.js'
 import { StatsStrip } from './panels/stats.js'
 
 export function App() {
@@ -25,6 +26,7 @@ export function App() {
       <main class="dashboard-main">
         <section class="dashboard-content">
           <StatsStrip />
+          <Scrubber />
           <div class="dashboard-split">
             <div class="dashboard-split-col">
               <BuffersPanel />

package/dist/dashboard/export.ts

@@ -74,9 +74,7 @@ export async function exportSession(providerId: string | null = null): Promise<v
   const a = document.createElement('a')
   const stamp = new Date().toISOString().replace(/[:.]/g, '-')
   a.href = url
-  a.download = providerId !== null
-    ? `tf-devtools-${providerId}-${stamp}.json`
-    : `tf-devtools-session-${stamp}.json`
+  a.download = providerId !== null ? `tf-devtools-${providerId}-${stamp}.json` : `tf-devtools-session-${stamp}.json`
   document.body.appendChild(a)
   a.click()
   document.body.removeChild(a)