@three-flatland/devtools 0.1.0-alpha.3

package/dist/buffers-view.cjs

@@ -0,0 +1,269 @@
+"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 buffers_view_exports = {};
+__export(buffers_view_exports, {
+  addBuffersView: () => addBuffersView
+});
+module.exports = __toCommonJS(buffers_view_exports);
+const THUMB_WIDTH = 240;
+const THUMB_HEIGHT = 120;
+function addBuffersView(parent, client, options = {}) {
+  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 buffer");
+  const nameLabel = document.createElement("span");
+  nameLabel.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 buffer");
+  header.appendChild(prevBtn);
+  header.appendChild(nameLabel);
+  header.appendChild(nextBtn);
+  const body = document.createElement("div");
+  body.style.cssText = "display:none;flex-direction:column;padding:2px 6px 6px;position:relative";
+  const canvas = document.createElement("canvas");
+  canvas.width = THUMB_WIDTH;
+  canvas.height = THUMB_HEIGHT;
+  canvas.style.cssText = `display:block;width:100%;height:${THUMB_HEIGHT}px;background:rgba(0,2,28,0.45);border-radius:2px;image-rendering:pixelated`;
+  const offscreen = document.createElement("canvas");
+  offscreen.width = 1;
+  offscreen.height = 1;
+  const valueLabel = document.createElement("span");
+  valueLabel.style.cssText = [
+    "position:absolute",
+    "left:10px",
+    "bottom:10px",
+    "padding:1px 4px",
+    "font-size:10px",
+    "background:rgba(0,2,28,0.65)",
+    "border-radius:2px",
+    "color:var(--tp-monitor-foreground-color)",
+    "opacity:0.85",
+    "font-family:var(--tp-base-font-family, ui-monospace, monospace)",
+    "font-variant-numeric:tabular-nums",
+    "pointer-events:none"
+  ].join(";");
+  const expandBtn = document.createElement("span");
+  expandBtn.textContent = "\u2922";
+  expandBtn.setAttribute("role", "button");
+  expandBtn.setAttribute("aria-label", "Open fullscreen buffer viewer");
+  expandBtn.title = "Open fullscreen buffer viewer";
+  expandBtn.style.cssText = [
+    "position:absolute",
+    "right:10px",
+    "bottom:10px",
+    "padding:1px 4px",
+    "font-size:11px",
+    "background:rgba(0,2,28,0.65)",
+    "border-radius:2px",
+    "cursor:pointer",
+    "color:var(--tp-monitor-foreground-color)",
+    "user-select:none",
+    "-webkit-user-select:none"
+  ].join(";");
+  body.appendChild(canvas);
+  body.appendChild(valueLabel);
+  body.appendChild(expandBtn);
+  bladeEl.appendChild(header);
+  bladeEl.appendChild(body);
+  let collapsed = true;
+  let paneFolded = false;
+  let activeName = null;
+  let lastRenderedVersion = -1;
+  const ctx = canvas.getContext("2d");
+  let cachedImgData = null;
+  let cachedImgDataW = 0;
+  let cachedImgDataH = 0;
+  const resizeObserver = new ResizeObserver(([entry]) => {
+    if (!entry) return;
+    const dpr = window.devicePixelRatio || 1;
+    const cssW = Math.max(1, Math.round(entry.contentRect.width));
+    const cssH = Math.max(1, Math.round(entry.contentRect.height));
+    const w = Math.max(1, Math.round(cssW * dpr));
+    const h = Math.max(1, Math.round(cssH * dpr));
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+      lastRenderedVersion = -1;
+      const cur = activeName !== null ? client.state.buffers.get(activeName) : void 0;
+      if (cur && !collapsed) renderThumb(cur);
+    }
+  });
+  resizeObserver.observe(canvas);
+  function currentNames() {
+    return Array.from(client.state.buffers.keys());
+  }
+  let modalOpen = false;
+  function syncSelection() {
+    if (modalOpen) return;
+    if (paneFolded || collapsed || activeName === null) {
+      client.setBuffers({});
+      return;
+    }
+    client.setBuffers({ [activeName]: { mode: "thumbnail", thumbSize: 256 } });
+  }
+  function setActive(name) {
+    if (activeName === name) return;
+    activeName = name;
+    nameLabel.textContent = name ?? "\u2014";
+    lastRenderedVersion = -1;
+    syncSelection();
+  }
+  function cycle(delta) {
+    const names = currentNames();
+    if (names.length === 0) return;
+    const idx = activeName === null ? -1 : names.indexOf(activeName);
+    const next = names[(idx + delta + names.length) % names.length];
+    setActive(next);
+  }
+  const toggleCollapse = (e) => {
+    e.stopPropagation();
+    collapsed = !collapsed;
+    body.style.display = collapsed ? "none" : "flex";
+    if (!collapsed) lastRenderedVersion = -1;
+    syncSelection();
+  };
+  header.addEventListener("click", toggleCollapse);
+  prevBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    cycle(-1);
+  });
+  nextBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    cycle(1);
+  });
+  expandBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (activeName !== null && options.onExpand !== void 0) {
+      options.onExpand(activeName);
+    }
+  });
+  function renderThumb(entry) {
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const { width, height, pixels } = entry;
+    if (width === 0 || height === 0 || pixels === null) return;
+    if (offscreen.width !== width || offscreen.height !== height) {
+      offscreen.width = width;
+      offscreen.height = height;
+      cachedImgData = null;
+    }
+    const offCtx = offscreen.getContext("2d");
+    if (!offCtx) return;
+    if (cachedImgData === null || cachedImgDataW !== width || cachedImgDataH !== height) {
+      cachedImgData = offCtx.createImageData(width, height);
+      cachedImgDataW = width;
+      cachedImgDataH = height;
+    }
+    const imgData = cachedImgData;
+    const out = imgData.data;
+    if (pixels instanceof Uint8Array) {
+      out.set(pixels.subarray(0, out.length));
+    } else {
+      const count = width * height;
+      for (let i = 0; i < count; i++) {
+        const o = i * 4;
+        out[o] = Math.round(Math.max(0, Math.min(1, pixels[i * 4] ?? 0)) * 255);
+        out[o + 1] = Math.round(Math.max(0, Math.min(1, pixels[i * 4 + 1] ?? 0)) * 255);
+        out[o + 2] = Math.round(Math.max(0, Math.min(1, pixels[i * 4 + 2] ?? 0)) * 255);
+        out[o + 3] = Math.round(Math.max(0, Math.min(1, pixels[i * 4 + 3] ?? 1)) * 255);
+      }
+    }
+    offCtx.putImageData(imgData, 0, 0);
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(offscreen, 0, 0, canvas.width, canvas.height);
+  }
+  const unsubscribe = client.addListener((state) => {
+    const names = Array.from(state.buffers.keys());
+    bladeEl.style.display = names.length > 0 ? "flex" : "none";
+    if (names.length === 0) {
+      setActive(null);
+    } else if (activeName === null || !names.includes(activeName)) {
+      setActive(names[0]);
+    }
+    const multi = names.length > 1;
+    prevBtn.style.opacity = multi ? "0.8" : "0.25";
+    nextBtn.style.opacity = multi ? "0.8" : "0.25";
+    prevBtn.style.cursor = multi ? "pointer" : "default";
+    nextBtn.style.cursor = multi ? "pointer" : "default";
+    syncSelection();
+    if (collapsed || activeName === null) return;
+    const entry = state.buffers.get(activeName);
+    if (!entry) return;
+    if (entry.version === lastRenderedVersion) return;
+    lastRenderedVersion = entry.version;
+    renderThumb(entry);
+    const lw = entry.srcWidth > 0 ? entry.srcWidth : entry.width;
+    const lh = entry.srcHeight > 0 ? entry.srcHeight : entry.height;
+    valueLabel.textContent = `${lw}\xD7${lh} \xB7 ${entry.pixelType}`;
+    nameLabel.title = `${entry.name}${entry.label ? ` \u2014 ${entry.label}` : ""}`;
+  });
+  return {
+    element: bladeEl,
+    setModalOpen(open) {
+      modalOpen = open;
+      if (!open) syncSelection();
+    },
+    setActiveFromModal(name) {
+      if (activeName === name) return;
+      activeName = name;
+      nameLabel.textContent = name;
+      lastRenderedVersion = -1;
+    },
+    setPaneFolded(folded) {
+      if (paneFolded === folded) return;
+      paneFolded = folded;
+      if (folded) lastRenderedVersion = -1;
+      syncSelection();
+    },
+    dispose() {
+      resizeObserver.disconnect();
+      unsubscribe();
+      blade.dispose();
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addBuffersView
+});
+//# sourceMappingURL=buffers-view.cjs.map

package/dist/buffers-view.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/buffers-view.ts"],"sourcesContent":["/**\n * Buffers view — compact one-row preview of the currently-selected\n * debug buffer, with `◀ name ▶` arrows to cycle through every\n * registered entry and a ⤢ \"expand\" icon overlay on the thumbnail\n * that opens (a future) fullscreen modal.\n *\n * Main-pane real estate is tight: there's no grouping UI here. The\n * fullscreen modal is where the group tree / channel toggles / pan &\n * zoom live. Starts collapsed — no pixel readback happens until the\n * user opens the blade.\n */\n\nimport type { FolderApi, Pane } from 'tweakpane'\n\nimport type { BufferSnapshot, DevtoolsClient } from './devtools-client.js'\n\nexport interface BuffersViewHandle {\n  readonly element: HTMLElement\n  /** Tell the view the modal is open/closed. While open, the view\n   *  defers buffer selection to the modal. */\n  setModalOpen(open: boolean): void\n  /** Sync the view's active buffer to match the modal's selection. */\n  setActiveFromModal(name: string): void\n  /** Tell the view the outer pane was folded/unfolded. When folded the\n   *  view unsubscribes regardless of its own collapse state. */\n  setPaneFolded(folded: boolean): void\n  dispose(): void\n}\n\nconst THUMB_WIDTH = 240\n// A bit taller than before now that the size/format text overlays the\n// canvas instead of taking its own row below.\nconst THUMB_HEIGHT = 120\n\nexport interface AddBuffersViewOptions {\n  /**\n   * Invoked when the user clicks the bottom-right ⤢ button. Wired by\n   * `createPane` to open the fullscreen modal viewer with the active\n   * buffer pre-selected. When omitted, the click is a no-op.\n   */\n  onExpand?: (name: string) => void\n}\n\nexport function addBuffersView(\n  parent: Pane | FolderApi,\n  client: DevtoolsClient,\n  options: AddBuffersViewOptions = {},\n): BuffersViewHandle {\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  // Same darker-bg treatment as registry-view to sink debug readouts\n  // visually behind the controls.\n  bladeEl.style.cssText = 'display:none;flex-direction:column;background:rgba(0,0,0,0.3)'\n\n  // Header — identical pattern to registry-view (click to collapse,\n  // arrows cycle with stopPropagation so they don't also toggle).\n  const header = document.createElement('div')\n  header.style.cssText = [\n    'display:grid',\n    'grid-template-columns:2em 1fr 2em',\n    'align-items:center',\n    'padding:4px 6px 6px',\n    'font-size:11px',\n    'color:var(--tp-label-foreground-color)',\n    'user-select:none',\n    '-webkit-user-select:none',\n    'font-variant-numeric:tabular-nums',\n    'cursor:pointer',\n  ].join(';')\n\n  const arrowStyle = 'cursor:pointer;padding:0 4px;opacity:0.8;font-family:ui-monospace,monospace;text-align:center'\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 buffer')\n  const nameLabel = document.createElement('span')\n  nameLabel.style.cssText = 'font-weight:500;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none'\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 buffer')\n  header.appendChild(prevBtn)\n  header.appendChild(nameLabel)\n  header.appendChild(nextBtn)\n\n  // Body — thumbnail canvas with two corner overlays: dimensions/format\n  // bottom-left, expand icon bottom-right. No separate text row, so the\n  // canvas itself gets the full body height.\n  const body = document.createElement('div')\n  body.style.cssText = 'display:none;flex-direction:column;padding:2px 6px 6px;position:relative'\n\n  // Display canvas. Backing dimensions are kept in sync with the\n  // actual rendered CSS box via ResizeObserver — same pattern as\n  // `stats-graph.ts`. Without this, the bitmap stays at its initial\n  // 240×96 intrinsic size and (depending on the parent layout) ends up\n  // displayed unscaled in the upper-left of a stretched-CSS box.\n  const canvas = document.createElement('canvas')\n  canvas.width = THUMB_WIDTH\n  canvas.height = THUMB_HEIGHT\n  canvas.style.cssText = `display:block;width:100%;height:${THUMB_HEIGHT}px;background:rgba(0,2,28,0.45);border-radius:2px;image-rendering:pixelated`\n\n  // Off-screen canvas, sized per source bitmap. Used to materialise\n  // `putImageData` once per frame; we then `drawImage` it onto the\n  // display canvas with an aspect-correct destination rect.\n  const offscreen = document.createElement('canvas')\n  offscreen.width = 1\n  offscreen.height = 1\n\n  // Bottom-left overlay: dimensions + pixel format. Same translucent\n  // chip background as the FPS-graph value badge so the text stays\n  // legible regardless of the buffer's content underneath.\n  const valueLabel = document.createElement('span')\n  valueLabel.style.cssText = [\n    'position:absolute',\n    'left:10px',\n    'bottom:10px',\n    'padding:1px 4px',\n    'font-size:10px',\n    'background:rgba(0,2,28,0.65)',\n    'border-radius:2px',\n    'color:var(--tp-monitor-foreground-color)',\n    'opacity:0.85',\n    'font-family:var(--tp-base-font-family, ui-monospace, monospace)',\n    'font-variant-numeric:tabular-nums',\n    'pointer-events:none',\n  ].join(';')\n\n  // Bottom-right overlay: expand-to-fullscreen button.\n  const expandBtn = document.createElement('span')\n  expandBtn.textContent = '⤢'\n  expandBtn.setAttribute('role', 'button')\n  expandBtn.setAttribute('aria-label', 'Open fullscreen buffer viewer')\n  expandBtn.title = 'Open fullscreen buffer viewer'\n  expandBtn.style.cssText = [\n    'position:absolute',\n    'right:10px',\n    'bottom:10px',\n    'padding:1px 4px',\n    'font-size:11px',\n    'background:rgba(0,2,28,0.65)',\n    'border-radius:2px',\n    'cursor:pointer',\n    'color:var(--tp-monitor-foreground-color)',\n    'user-select:none',\n    '-webkit-user-select:none',\n  ].join(';')\n\n  body.appendChild(canvas)\n  body.appendChild(valueLabel)\n  body.appendChild(expandBtn)\n\n  bladeEl.appendChild(header)\n  bladeEl.appendChild(body)\n\n  // ── State ─────────────────────────────────────────────────────────────\n\n  let collapsed = true\n  let paneFolded = false\n  let activeName: string | null = null\n  let lastRenderedVersion = -1\n  const ctx = canvas.getContext('2d')\n\n  // Cached ImageData reused across paints when dimensions match — without\n  // this, `createImageData(w, h)` allocates a fresh Uint8ClampedArray\n  // (~w*h*4 bytes) every frame, ~400 KB/s of throwaway garbage at 4 Hz\n  // for a 256×96 thumb.\n  let cachedImgData: ImageData | null = null\n  let cachedImgDataW = 0\n  let cachedImgDataH = 0\n\n  // Keep the canvas backing locked to its actual rendered pixel size so\n  // `drawImage(0,0,canvas.width,canvas.height)` truly fills what the\n  // user sees. Re-render the active buffer on resize so a freshly-\n  // expanded blade isn't stuck on a stale stretched bitmap.\n  const resizeObserver = new ResizeObserver(([entry]) => {\n    if (!entry) return\n    const dpr = window.devicePixelRatio || 1\n    const cssW = Math.max(1, Math.round(entry.contentRect.width))\n    const cssH = Math.max(1, Math.round(entry.contentRect.height))\n    const w = Math.max(1, Math.round(cssW * dpr))\n    const h = Math.max(1, Math.round(cssH * dpr))\n    if (canvas.width !== w || canvas.height !== h) {\n      canvas.width = w\n      canvas.height = h\n      lastRenderedVersion = -1 // force a redraw at the new backing size\n      const cur = activeName !== null ? client.state.buffers.get(activeName) : undefined\n      if (cur && !collapsed) renderThumb(cur)\n    }\n  })\n  resizeObserver.observe(canvas)\n\n  function currentNames(): string[] {\n    return Array.from(client.state.buffers.keys())\n  }\n\n  let modalOpen = false\n\n  function syncSelection(): void {\n    if (modalOpen) return\n    if (paneFolded || collapsed || activeName === null) {\n      // Fully idle — provider skips readbacks entirely.\n      client.setBuffers({})\n      return\n    }\n    // Thumbnail panel is visible → ask for a small downsampled preview.\n    client.setBuffers({ [activeName]: { mode: 'thumbnail', thumbSize: 256 } })\n  }\n\n  function setActive(name: string | null): void {\n    if (activeName === name) return\n    activeName = name\n    nameLabel.textContent = name ?? '—'\n    lastRenderedVersion = -1\n    syncSelection()\n  }\n\n  function cycle(delta: number): void {\n    const names = currentNames()\n    if (names.length === 0) return\n    const idx = activeName === null ? -1 : names.indexOf(activeName)\n    const next = names[(idx + delta + names.length) % names.length]!\n    setActive(next)\n  }\n\n  const toggleCollapse = (e: Event): void => {\n    e.stopPropagation()\n    collapsed = !collapsed\n    body.style.display = collapsed ? 'none' : 'flex'\n    if (!collapsed) lastRenderedVersion = -1\n    syncSelection()\n  }\n  header.addEventListener('click', toggleCollapse)\n  prevBtn.addEventListener('click', (e) => { e.stopPropagation(); cycle(-1) })\n  nextBtn.addEventListener('click', (e) => { e.stopPropagation(); cycle(1) })\n  expandBtn.addEventListener('click', (e) => {\n    e.stopPropagation()\n    if (activeName !== null && options.onExpand !== undefined) {\n      options.onExpand(activeName)\n    }\n  })\n\n  // ── Render ────────────────────────────────────────────────────────────\n\n  /**\n   * Paint the latest sample for the currently-selected buffer into the\n   * thumbnail. Float kinds are clamped to [0,1] for the preview;\n   * proper min-max tonemap lives in the fullscreen viewer (TBD).\n   *\n   * Pipeline:\n   *   1. Decode the typed-array sample into RGBA8 inside `offscreen`\n   *      (sized to match the source — 256×4, 64×64, etc.).\n   *   2. Clear the display canvas.\n   *   3. Compute an aspect-correct destination rect inside the display\n   *      canvas (THUMB_WIDTH × THUMB_HEIGHT) and `drawImage` into it.\n   *\n   * Disabling `imageSmoothingEnabled` keeps the upscale crisp instead\n   * of bilinear-blurry — matches the \"image-rendering: pixelated\" hint.\n   */\n  function renderThumb(entry: BufferSnapshot): void {\n    if (!ctx) return\n    ctx.clearRect(0, 0, canvas.width, canvas.height)\n\n    const { width, height, pixels } = entry\n    if (width === 0 || height === 0 || pixels === null) return\n\n    if (offscreen.width !== width || offscreen.height !== height) {\n      offscreen.width = width\n      offscreen.height = height\n      // Backing dims changed → invalidate the ImageData cache.\n      cachedImgData = null\n    }\n    const offCtx = offscreen.getContext('2d')\n    if (!offCtx) return\n\n    if (cachedImgData === null || cachedImgDataW !== width || cachedImgDataH !== height) {\n      cachedImgData = offCtx.createImageData(width, height)\n      cachedImgDataW = width\n      cachedImgDataH = height\n    }\n    const imgData = cachedImgData\n    const out = imgData.data\n\n    // Pixels arrive as display-ready RGBA8 from the worker — copy\n    // directly into the ImageData without any decoder logic.\n    if (pixels instanceof Uint8Array) {\n      out.set(pixels.subarray(0, out.length))\n    } else {\n      // Float32Array fallback (shouldn't happen post-pipeline, but\n      // guard against legacy callers).\n      const count = width * height\n      for (let i = 0; i < count; i++) {\n        const o = i * 4\n        out[o]     = Math.round(Math.max(0, Math.min(1, pixels[i * 4]     ?? 0)) * 255)\n        out[o + 1] = Math.round(Math.max(0, Math.min(1, pixels[i * 4 + 1] ?? 0)) * 255)\n        out[o + 2] = Math.round(Math.max(0, Math.min(1, pixels[i * 4 + 2] ?? 0)) * 255)\n        out[o + 3] = Math.round(Math.max(0, Math.min(1, pixels[i * 4 + 3] ?? 1)) * 255)\n      }\n    }\n\n    offCtx.putImageData(imgData, 0, 0)\n\n    // Stretch to fill: every source pixel maps somewhere in the\n    // viewport. This deliberately distorts (a 256×4 buffer reads as\n    // 4 stretched rows across the full panel) but guarantees you can\n    // SEE every value in a debug thumbnail. Aspect-correct inspection\n    // belongs in the fullscreen viewer.\n    ctx.imageSmoothingEnabled = false\n    ctx.drawImage(offscreen, 0, 0, canvas.width, canvas.height)\n  }\n\n  // ── Listener ──────────────────────────────────────────────────────────\n\n  const unsubscribe = client.addListener((state) => {\n    const names = Array.from(state.buffers.keys())\n\n    // Visibility.\n    bladeEl.style.display = names.length > 0 ? 'flex' : 'none'\n\n    // Establish/repair active selection.\n    if (names.length === 0) {\n      setActive(null)\n    } else if (activeName === null || !names.includes(activeName)) {\n      setActive(names[0]!)\n    }\n\n    // Arrow affordance.\n    const multi = names.length > 1\n    prevBtn.style.opacity = multi ? '0.8' : '0.25'\n    nextBtn.style.opacity = multi ? '0.8' : '0.25'\n    prevBtn.style.cursor = multi ? 'pointer' : 'default'\n    nextBtn.style.cursor = multi ? 'pointer' : 'default'\n\n    // Ensure the provider is streaming the current selection (new\n    // entries appearing while we're expanded should auto-subscribe).\n    syncSelection()\n\n    // Paint.\n    if (collapsed || activeName === null) return\n    const entry = state.buffers.get(activeName)\n    if (!entry) return\n    if (entry.version === lastRenderedVersion) return\n    lastRenderedVersion = entry.version\n    renderThumb(entry)\n    // Prefer source dims for the label — the shipped thumbnail dims\n    // (e.g. 256×16) confuse users who want to know the real buffer size.\n    const lw = entry.srcWidth > 0 ? entry.srcWidth : entry.width\n    const lh = entry.srcHeight > 0 ? entry.srcHeight : entry.height\n    valueLabel.textContent = `${lw}×${lh} · ${entry.pixelType}`\n    nameLabel.title = `${entry.name}${entry.label ? ` — ${entry.label}` : ''}`\n  })\n\n  return {\n    element: bladeEl,\n    setModalOpen(open: boolean) {\n      modalOpen = open\n      if (!open) syncSelection()\n    },\n    setActiveFromModal(name: string) {\n      if (activeName === name) return\n      activeName = name\n      nameLabel.textContent = name\n      lastRenderedVersion = -1\n    },\n    setPaneFolded(folded: boolean) {\n      if (paneFolded === folded) return\n      paneFolded = folded\n      if (folded) lastRenderedVersion = -1\n      syncSelection()\n    },\n    dispose() {\n      resizeObserver.disconnect()\n      unsubscribe()\n      blade.dispose()\n    },\n  }\n}\n\n"],"mappings":"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","names":[]}

package/dist/buffers-view.d.cts

@@ -0,0 +1,39 @@
+import { Pane, FolderApi } from 'tweakpane';
+import { DevtoolsClient } from './devtools-client.cjs';
+import 'three-flatland/debug-protocol';
+
+/**
+ * Buffers view — compact one-row preview of the currently-selected
+ * debug buffer, with `◀ name ▶` arrows to cycle through every
+ * registered entry and a ⤢ "expand" icon overlay on the thumbnail
+ * that opens (a future) fullscreen modal.
+ *
+ * Main-pane real estate is tight: there's no grouping UI here. The
+ * fullscreen modal is where the group tree / channel toggles / pan &
+ * zoom live. Starts collapsed — no pixel readback happens until the
+ * user opens the blade.
+ */
+
+interface BuffersViewHandle {
+    readonly element: HTMLElement;
+    /** Tell the view the modal is open/closed. While open, the view
+     *  defers buffer selection to the modal. */
+    setModalOpen(open: boolean): void;
+    /** Sync the view's active buffer to match the modal's selection. */
+    setActiveFromModal(name: string): void;
+    /** Tell the view the outer pane was folded/unfolded. When folded the
+     *  view unsubscribes regardless of its own collapse state. */
+    setPaneFolded(folded: boolean): void;
+    dispose(): void;
+}
+interface AddBuffersViewOptions {
+    /**
+     * Invoked when the user clicks the bottom-right ⤢ button. Wired by
+     * `createPane` to open the fullscreen modal viewer with the active
+     * buffer pre-selected. When omitted, the click is a no-op.
+     */
+    onExpand?: (name: string) => void;
+}
+declare function addBuffersView(parent: Pane | FolderApi, client: DevtoolsClient, options?: AddBuffersViewOptions): BuffersViewHandle;
+
+export { type AddBuffersViewOptions, type BuffersViewHandle, addBuffersView };

package/dist/buffers-view.d.ts

@@ -0,0 +1,39 @@
+import { Pane, FolderApi } from 'tweakpane';
+import { DevtoolsClient } from './devtools-client.js';
+import 'three-flatland/debug-protocol';
+
+/**
+ * Buffers view — compact one-row preview of the currently-selected
+ * debug buffer, with `◀ name ▶` arrows to cycle through every
+ * registered entry and a ⤢ "expand" icon overlay on the thumbnail
+ * that opens (a future) fullscreen modal.
+ *
+ * Main-pane real estate is tight: there's no grouping UI here. The
+ * fullscreen modal is where the group tree / channel toggles / pan &
+ * zoom live. Starts collapsed — no pixel readback happens until the
+ * user opens the blade.
+ */
+
+interface BuffersViewHandle {
+    readonly element: HTMLElement;
+    /** Tell the view the modal is open/closed. While open, the view
+     *  defers buffer selection to the modal. */
+    setModalOpen(open: boolean): void;
+    /** Sync the view's active buffer to match the modal's selection. */
+    setActiveFromModal(name: string): void;
+    /** Tell the view the outer pane was folded/unfolded. When folded the
+     *  view unsubscribes regardless of its own collapse state. */
+    setPaneFolded(folded: boolean): void;
+    dispose(): void;
+}
+interface AddBuffersViewOptions {
+    /**
+     * Invoked when the user clicks the bottom-right ⤢ button. Wired by
+     * `createPane` to open the fullscreen modal viewer with the active
+     * buffer pre-selected. When omitted, the click is a no-op.
+     */
+    onExpand?: (name: string) => void;
+}
+declare function addBuffersView(parent: Pane | FolderApi, client: DevtoolsClient, options?: AddBuffersViewOptions): BuffersViewHandle;
+
+export { type AddBuffersViewOptions, type BuffersViewHandle, addBuffersView };

package/dist/buffers-view.js

@@ -0,0 +1,245 @@
+const THUMB_WIDTH = 240;
+const THUMB_HEIGHT = 120;
+function addBuffersView(parent, client, options = {}) {
+  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 buffer");
+  const nameLabel = document.createElement("span");
+  nameLabel.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 buffer");
+  header.appendChild(prevBtn);
+  header.appendChild(nameLabel);
+  header.appendChild(nextBtn);
+  const body = document.createElement("div");
+  body.style.cssText = "display:none;flex-direction:column;padding:2px 6px 6px;position:relative";
+  const canvas = document.createElement("canvas");
+  canvas.width = THUMB_WIDTH;
+  canvas.height = THUMB_HEIGHT;
+  canvas.style.cssText = `display:block;width:100%;height:${THUMB_HEIGHT}px;background:rgba(0,2,28,0.45);border-radius:2px;image-rendering:pixelated`;
+  const offscreen = document.createElement("canvas");
+  offscreen.width = 1;
+  offscreen.height = 1;
+  const valueLabel = document.createElement("span");
+  valueLabel.style.cssText = [
+    "position:absolute",
+    "left:10px",
+    "bottom:10px",
+    "padding:1px 4px",
+    "font-size:10px",
+    "background:rgba(0,2,28,0.65)",
+    "border-radius:2px",
+    "color:var(--tp-monitor-foreground-color)",
+    "opacity:0.85",
+    "font-family:var(--tp-base-font-family, ui-monospace, monospace)",
+    "font-variant-numeric:tabular-nums",
+    "pointer-events:none"
+  ].join(";");
+  const expandBtn = document.createElement("span");
+  expandBtn.textContent = "\u2922";
+  expandBtn.setAttribute("role", "button");
+  expandBtn.setAttribute("aria-label", "Open fullscreen buffer viewer");
+  expandBtn.title = "Open fullscreen buffer viewer";
+  expandBtn.style.cssText = [
+    "position:absolute",
+    "right:10px",
+    "bottom:10px",
+    "padding:1px 4px",
+    "font-size:11px",
+    "background:rgba(0,2,28,0.65)",
+    "border-radius:2px",
+    "cursor:pointer",
+    "color:var(--tp-monitor-foreground-color)",
+    "user-select:none",
+    "-webkit-user-select:none"
+  ].join(";");
+  body.appendChild(canvas);
+  body.appendChild(valueLabel);
+  body.appendChild(expandBtn);
+  bladeEl.appendChild(header);
+  bladeEl.appendChild(body);
+  let collapsed = true;
+  let paneFolded = false;
+  let activeName = null;
+  let lastRenderedVersion = -1;
+  const ctx = canvas.getContext("2d");
+  let cachedImgData = null;
+  let cachedImgDataW = 0;
+  let cachedImgDataH = 0;
+  const resizeObserver = new ResizeObserver(([entry]) => {
+    if (!entry) return;
+    const dpr = window.devicePixelRatio || 1;
+    const cssW = Math.max(1, Math.round(entry.contentRect.width));
+    const cssH = Math.max(1, Math.round(entry.contentRect.height));
+    const w = Math.max(1, Math.round(cssW * dpr));
+    const h = Math.max(1, Math.round(cssH * dpr));
+    if (canvas.width !== w || canvas.height !== h) {
+      canvas.width = w;
+      canvas.height = h;
+      lastRenderedVersion = -1;
+      const cur = activeName !== null ? client.state.buffers.get(activeName) : void 0;
+      if (cur && !collapsed) renderThumb(cur);
+    }
+  });
+  resizeObserver.observe(canvas);
+  function currentNames() {
+    return Array.from(client.state.buffers.keys());
+  }
+  let modalOpen = false;
+  function syncSelection() {
+    if (modalOpen) return;
+    if (paneFolded || collapsed || activeName === null) {
+      client.setBuffers({});
+      return;
+    }
+    client.setBuffers({ [activeName]: { mode: "thumbnail", thumbSize: 256 } });
+  }
+  function setActive(name) {
+    if (activeName === name) return;
+    activeName = name;
+    nameLabel.textContent = name ?? "\u2014";
+    lastRenderedVersion = -1;
+    syncSelection();
+  }
+  function cycle(delta) {
+    const names = currentNames();
+    if (names.length === 0) return;
+    const idx = activeName === null ? -1 : names.indexOf(activeName);
+    const next = names[(idx + delta + names.length) % names.length];
+    setActive(next);
+  }
+  const toggleCollapse = (e) => {
+    e.stopPropagation();
+    collapsed = !collapsed;
+    body.style.display = collapsed ? "none" : "flex";
+    if (!collapsed) lastRenderedVersion = -1;
+    syncSelection();
+  };
+  header.addEventListener("click", toggleCollapse);
+  prevBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    cycle(-1);
+  });
+  nextBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    cycle(1);
+  });
+  expandBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    if (activeName !== null && options.onExpand !== void 0) {
+      options.onExpand(activeName);
+    }
+  });
+  function renderThumb(entry) {
+    if (!ctx) return;
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    const { width, height, pixels } = entry;
+    if (width === 0 || height === 0 || pixels === null) return;
+    if (offscreen.width !== width || offscreen.height !== height) {
+      offscreen.width = width;
+      offscreen.height = height;
+      cachedImgData = null;
+    }
+    const offCtx = offscreen.getContext("2d");
+    if (!offCtx) return;
+    if (cachedImgData === null || cachedImgDataW !== width || cachedImgDataH !== height) {
+      cachedImgData = offCtx.createImageData(width, height);
+      cachedImgDataW = width;
+      cachedImgDataH = height;
+    }
+    const imgData = cachedImgData;
+    const out = imgData.data;
+    if (pixels instanceof Uint8Array) {
+      out.set(pixels.subarray(0, out.length));
+    } else {
+      const count = width * height;
+      for (let i = 0; i < count; i++) {
+        const o = i * 4;
+        out[o] = Math.round(Math.max(0, Math.min(1, pixels[i * 4] ?? 0)) * 255);
+        out[o + 1] = Math.round(Math.max(0, Math.min(1, pixels[i * 4 + 1] ?? 0)) * 255);
+        out[o + 2] = Math.round(Math.max(0, Math.min(1, pixels[i * 4 + 2] ?? 0)) * 255);
+        out[o + 3] = Math.round(Math.max(0, Math.min(1, pixels[i * 4 + 3] ?? 1)) * 255);
+      }
+    }
+    offCtx.putImageData(imgData, 0, 0);
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(offscreen, 0, 0, canvas.width, canvas.height);
+  }
+  const unsubscribe = client.addListener((state) => {
+    const names = Array.from(state.buffers.keys());
+    bladeEl.style.display = names.length > 0 ? "flex" : "none";
+    if (names.length === 0) {
+      setActive(null);
+    } else if (activeName === null || !names.includes(activeName)) {
+      setActive(names[0]);
+    }
+    const multi = names.length > 1;
+    prevBtn.style.opacity = multi ? "0.8" : "0.25";
+    nextBtn.style.opacity = multi ? "0.8" : "0.25";
+    prevBtn.style.cursor = multi ? "pointer" : "default";
+    nextBtn.style.cursor = multi ? "pointer" : "default";
+    syncSelection();
+    if (collapsed || activeName === null) return;
+    const entry = state.buffers.get(activeName);
+    if (!entry) return;
+    if (entry.version === lastRenderedVersion) return;
+    lastRenderedVersion = entry.version;
+    renderThumb(entry);
+    const lw = entry.srcWidth > 0 ? entry.srcWidth : entry.width;
+    const lh = entry.srcHeight > 0 ? entry.srcHeight : entry.height;
+    valueLabel.textContent = `${lw}\xD7${lh} \xB7 ${entry.pixelType}`;
+    nameLabel.title = `${entry.name}${entry.label ? ` \u2014 ${entry.label}` : ""}`;
+  });
+  return {
+    element: bladeEl,
+    setModalOpen(open) {
+      modalOpen = open;
+      if (!open) syncSelection();
+    },
+    setActiveFromModal(name) {
+      if (activeName === name) return;
+      activeName = name;
+      nameLabel.textContent = name;
+      lastRenderedVersion = -1;
+    },
+    setPaneFolded(folded) {
+      if (paneFolded === folded) return;
+      paneFolded = folded;
+      if (folded) lastRenderedVersion = -1;
+      syncSelection();
+    },
+    dispose() {
+      resizeObserver.disconnect();
+      unsubscribe();
+      blade.dispose();
+    }
+  };
+}
+export {
+  addBuffersView
+};
+//# sourceMappingURL=buffers-view.js.map