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

package/dist/buffers-modal.cjs

@@ -1,491 +0,0 @@
-"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_modal_exports = {};
-__export(buffers_modal_exports, {
-  createBuffersModal: () => createBuffersModal
-});
-module.exports = __toCommonJS(buffers_modal_exports);
-function createBuffersModal(client, options = {}) {
-  const root = document.createElement("div");
-  root.style.cssText = [
-    "position:fixed",
-    "inset:0",
-    "z-index:99999",
-    "background:rgba(0,2,28,0.92)",
-    "color:var(--tp-label-foreground-color, #f0edd8)",
-    "font-family:var(--tp-base-font-family, ui-monospace, monospace)",
-    "font-size:12px",
-    "display:none",
-    "flex-direction:column"
-  ].join(";");
-  const header = document.createElement("div");
-  header.style.cssText = [
-    "display:flex",
-    "align-items:center",
-    "gap:12px",
-    "padding:8px 12px",
-    "border-bottom:1px solid rgba(240,237,216,0.08)",
-    "flex:0 0 auto"
-  ].join(";");
-  const sidebarToggle = document.createElement("span");
-  sidebarToggle.textContent = "\u25C0";
-  sidebarToggle.style.cssText = "cursor:pointer;padding:2px 6px;opacity:0.8;user-select:none";
-  sidebarToggle.title = "Toggle sidebar";
-  const titleEl = document.createElement("span");
-  titleEl.style.cssText = "flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap";
-  const dimsEl = document.createElement("span");
-  dimsEl.style.cssText = "opacity:0.7;font-variant-numeric:tabular-nums";
-  const closeBtn = document.createElement("span");
-  closeBtn.textContent = "\xD7";
-  closeBtn.style.cssText = "cursor:pointer;padding:2px 10px;font-size:18px;line-height:1;opacity:0.8;user-select:none";
-  closeBtn.title = "Close";
-  header.appendChild(sidebarToggle);
-  header.appendChild(titleEl);
-  header.appendChild(dimsEl);
-  header.appendChild(closeBtn);
-  const body = document.createElement("div");
-  body.style.cssText = "display:flex;flex:1;min-height:0";
-  const sidebar = document.createElement("div");
-  sidebar.style.cssText = [
-    "display:flex",
-    "flex-direction:column",
-    "width:240px",
-    "border-right:1px solid rgba(240,237,216,0.08)",
-    "overflow-y:auto",
-    "padding:8px 0",
-    "flex:0 0 auto"
-  ].join(";");
-  const main = document.createElement("div");
-  main.style.cssText = "flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-width:0;min-height:0;overflow:hidden;position:relative";
-  const canvas = document.createElement("canvas");
-  canvas.style.cssText = "display:block;background:rgba(0,2,28,0.6);image-rendering:pixelated;max-width:100%;max-height:100%";
-  const ctx = canvas.getContext("2d");
-  const offscreen = document.createElement("canvas");
-  offscreen.width = 1;
-  offscreen.height = 1;
-  const zoomBar = document.createElement("div");
-  zoomBar.style.cssText = [
-    "position:absolute",
-    "top:8px",
-    "left:8px",
-    "display:flex",
-    "gap:6px",
-    "align-items:center",
-    "z-index:1"
-  ].join(";");
-  const zoomInfo = document.createElement("span");
-  zoomInfo.style.cssText = [
-    "padding:3px 8px",
-    "border-radius:4px",
-    "background:rgba(0,0,0,0.6)",
-    "color:#aaa",
-    "font:11px/1.4 monospace",
-    "pointer-events:none",
-    "user-select:none"
-  ].join(";");
-  zoomInfo.textContent = "1.0\xD7";
-  const resetBtn = document.createElement("span");
-  resetBtn.style.cssText = [
-    "padding:3px 8px",
-    "border-radius:4px",
-    "background:rgba(0,0,0,0.6)",
-    "color:#aaa",
-    "font:11px/1.4 monospace",
-    "cursor:pointer",
-    "user-select:none"
-  ].join(";");
-  resetBtn.textContent = "\u27F2 Reset";
-  resetBtn.title = "Reset zoom & pan (double-click also resets)";
-  zoomBar.appendChild(zoomInfo);
-  zoomBar.appendChild(resetBtn);
-  main.appendChild(canvas);
-  main.appendChild(zoomBar);
-  body.appendChild(sidebar);
-  body.appendChild(main);
-  root.appendChild(header);
-  root.appendChild(body);
-  document.body.appendChild(root);
-  let isOpen = false;
-  let activeName = null;
-  let lastRenderedVersion = -1;
-  let sidebarCollapsed = false;
-  const MIN_ZOOM = 0.25;
-  const MAX_ZOOM = 64;
-  let zoom = 1;
-  let panX = 0;
-  let panY = 0;
-  let isDragging = false;
-  let dragStartX = 0;
-  let dragStartY = 0;
-  let panStartX = 0;
-  let panStartY = 0;
-  function updateZoomInfo() {
-    const z = zoom < 10 ? zoom.toFixed(1) : Math.round(zoom).toString();
-    zoomInfo.textContent = zoom === 1 ? "1.0\xD7" : `${z}\xD7 \xB7 (${Math.round(panX)}, ${Math.round(panY)})`;
-    const atIdentity = zoom === 1 && panX === 0 && panY === 0;
-    resetBtn.style.display = atIdentity ? "none" : "inline";
-  }
-  function applyTransform() {
-    canvas.style.transform = `translate(${panX}px, ${panY}px) scale(${zoom})`;
-    canvas.style.transformOrigin = "center center";
-    updateZoomInfo();
-  }
-  function resetTransform() {
-    zoom = 1;
-    panX = 0;
-    panY = 0;
-    applyTransform();
-  }
-  main.addEventListener("wheel", (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15;
-    const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom * factor));
-    if (newZoom === zoom) return;
-    const rect = main.getBoundingClientRect();
-    const mx = e.clientX - rect.left - rect.width / 2;
-    const my = e.clientY - rect.top - rect.height / 2;
-    const ratio = 1 - newZoom / zoom;
-    panX += (mx - panX) * ratio;
-    panY += (my - panY) * ratio;
-    zoom = newZoom;
-    applyTransform();
-  }, { passive: false });
-  main.addEventListener("mousedown", (e) => {
-    if (e.button !== 0) return;
-    isDragging = true;
-    dragStartX = e.clientX;
-    dragStartY = e.clientY;
-    panStartX = panX;
-    panStartY = panY;
-    main.style.cursor = "grabbing";
-    e.preventDefault();
-  });
-  const onMouseMove = (e) => {
-    if (!isDragging) return;
-    panX = panStartX + (e.clientX - dragStartX);
-    panY = panStartY + (e.clientY - dragStartY);
-    applyTransform();
-  };
-  const onMouseUp = () => {
-    if (!isDragging) return;
-    isDragging = false;
-    main.style.cursor = "grab";
-  };
-  window.addEventListener("mousemove", onMouseMove);
-  window.addEventListener("mouseup", onMouseUp);
-  main.addEventListener("dblclick", () => resetTransform());
-  resetBtn.addEventListener("click", () => resetTransform());
-  main.style.cursor = "grab";
-  const rowEls = /* @__PURE__ */ new Map();
-  const groupContainers = /* @__PURE__ */ new Map();
-  function ensureGroup(group) {
-    let el = groupContainers.get(group);
-    if (el !== void 0) return el;
-    el = document.createElement("div");
-    el.style.cssText = "margin:6px 0";
-    const head = document.createElement("div");
-    head.textContent = group;
-    head.style.cssText = "padding:4px 12px;opacity:0.6;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;user-select:none";
-    el.appendChild(head);
-    sidebar.appendChild(el);
-    groupContainers.set(group, el);
-    return el;
-  }
-  function ensureRow(group, name, shortName) {
-    let row = rowEls.get(name);
-    if (row !== void 0) return row;
-    const groupEl = ensureGroup(group);
-    row = document.createElement("div");
-    row.textContent = shortName;
-    row.dataset["name"] = name;
-    row.style.cssText = "padding:4px 12px 4px 22px;cursor:pointer;user-select:none;border-left:2px solid transparent";
-    row.addEventListener("click", () => setActive(name));
-    groupEl.appendChild(row);
-    rowEls.set(name, row);
-    return row;
-  }
-  function destroyRow(name) {
-    const row = rowEls.get(name);
-    if (row === void 0) return;
-    row.remove();
-    rowEls.delete(name);
-  }
-  function highlightActive() {
-    for (const [name, row] of rowEls) {
-      const on = name === activeName;
-      row.style.background = on ? "rgba(71,204,169,0.15)" : "transparent";
-      row.style.borderLeftColor = on ? "var(--tp-button-foreground-color-active, #47cca9)" : "transparent";
-      row.style.color = on ? "var(--tp-label-foreground-color, #f0edd8)" : "rgba(240,237,216,0.7)";
-    }
-  }
-  function paint(snap) {
-    if (ctx === null) return;
-    const { width, height, pixels } = snap;
-    if (width === 0 || height === 0 || pixels === null) {
-      canvas.width = 1;
-      canvas.height = 1;
-      return;
-    }
-    if (offscreen.width !== width || offscreen.height !== height) {
-      offscreen.width = width;
-      offscreen.height = height;
-    }
-    const offCtx = offscreen.getContext("2d");
-    if (offCtx === null) return;
-    const imgData = offCtx.createImageData(width, height);
-    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);
-    if (canvas.width !== width || canvas.height !== height) {
-      canvas.width = width;
-      canvas.height = height;
-    }
-    const fitW = snap.srcWidth > 0 ? snap.srcWidth : width;
-    const fitH = snap.srcHeight > 0 ? snap.srcHeight : height;
-    canvasSrcW = fitW;
-    canvasSrcH = fitH;
-    fitCanvas(fitW, fitH);
-    ctx.imageSmoothingEnabled = false;
-    ctx.drawImage(offscreen, 0, 0);
-  }
-  function refresh() {
-    if (!isOpen) return;
-    const state = client.state;
-    const present = /* @__PURE__ */ new Set();
-    for (const [name] of state.buffers) {
-      present.add(name);
-      const dot = name.indexOf(".");
-      const group = dot === -1 ? "ungrouped" : name.slice(0, dot);
-      const short = dot === -1 ? name : name.slice(dot + 1);
-      ensureRow(group, name, short);
-    }
-    for (const name of rowEls.keys()) {
-      if (!present.has(name)) destroyRow(name);
-    }
-    if (activeName !== null && !state.buffers.has(activeName)) {
-      const first = state.buffers.keys().next().value;
-      activeName = first ?? null;
-      if (activeName !== null) client.setBuffers({ [activeName]: { mode: "stream" } });
-      else client.setBuffers({});
-    }
-    highlightActive();
-    if (activeName === null) {
-      titleEl.textContent = "\u2014";
-      dimsEl.textContent = "";
-      return;
-    }
-    const snap = state.buffers.get(activeName);
-    if (snap === void 0) return;
-    titleEl.textContent = snap.label !== void 0 ? `${activeName} \u2014 ${snap.label}` : activeName;
-    dimsEl.textContent = `${snap.width}\xD7${snap.height} \xB7 ${snap.pixelType} \xB7 ${snap.display}`;
-    if (decoder === null && snap.version !== lastRenderedVersion) {
-      lastRenderedVersion = snap.version;
-      paint(snap);
-    }
-  }
-  function setActive(name) {
-    if (activeName === name) return;
-    activeName = name;
-    lastRenderedVersion = -1;
-    resetTransform();
-    stopDecoder();
-    decoderWidth = 0;
-    decoderHeight = 0;
-    client.setBuffers({ [name]: { mode: "stream" } });
-    options.onActiveChange?.(name);
-    highlightActive();
-    refresh();
-  }
-  const unsubscribe = client.addListener(() => refresh());
-  closeBtn.addEventListener("click", () => close());
-  sidebarToggle.addEventListener("click", () => {
-    sidebarCollapsed = !sidebarCollapsed;
-    sidebar.style.display = sidebarCollapsed ? "none" : "flex";
-    sidebarToggle.textContent = sidebarCollapsed ? "\u25B6" : "\u25C0";
-    refresh();
-  });
-  const onKeydown = (e) => {
-    if (!isOpen) return;
-    if (e.key === "Escape") close();
-  };
-  document.addEventListener("keydown", onKeydown);
-  function fitCanvas(srcW, srcH) {
-    if (srcW <= 0 || srcH <= 0) return;
-    const mainRect = main.getBoundingClientRect();
-    const maxW = Math.max(1, mainRect.width - 32);
-    const maxH = Math.max(1, mainRect.height - 32);
-    const srcAspect = srcW / srcH;
-    const boxAspect = maxW / maxH;
-    let cssW;
-    let cssH;
-    if (srcAspect > boxAspect) {
-      cssW = maxW;
-      cssH = Math.max(1, Math.round(maxW / srcAspect));
-    } else {
-      cssH = maxH;
-      cssW = Math.max(1, Math.round(maxH * srcAspect));
-    }
-    canvas.style.width = `${cssW}px`;
-    canvas.style.height = `${cssH}px`;
-  }
-  let canvasSrcW = 0;
-  let canvasSrcH = 0;
-  const onResize = () => {
-    if (!isOpen || activeName === null) return;
-    const snap = client.state.buffers.get(activeName);
-    if (snap !== void 0) paint(snap);
-  };
-  window.addEventListener("resize", onResize);
-  const mainResizeObserver = new ResizeObserver(() => {
-    if (!isOpen) return;
-    if (canvasSrcW > 0 && canvasSrcH > 0) fitCanvas(canvasSrcW, canvasSrcH);
-  });
-  mainResizeObserver.observe(main);
-  const codecAvailable = typeof VideoDecoder !== "undefined";
-  let decoder = null;
-  let unsubChunks = null;
-  let waitingForKeyFrame = true;
-  function startDecoder(width, height) {
-    stopDecoder();
-    if (!codecAvailable) return;
-    waitingForKeyFrame = true;
-    decoder = new VideoDecoder({
-      output: (frame) => {
-        if (ctx === null) {
-          frame.close();
-          return;
-        }
-        if (canvas.width !== frame.codedWidth || canvas.height !== frame.codedHeight) {
-          canvas.width = frame.codedWidth;
-          canvas.height = frame.codedHeight;
-        }
-        canvasSrcW = frame.codedWidth;
-        canvasSrcH = frame.codedHeight;
-        fitCanvas(frame.codedWidth, frame.codedHeight);
-        ctx.drawImage(frame, 0, 0);
-        frame.close();
-      },
-      error: () => {
-        stopDecoder();
-      }
-    });
-    decoder.configure({
-      codec: "vp09.00.10.08",
-      codedWidth: width,
-      codedHeight: height
-    });
-  }
-  function stopDecoder() {
-    if (decoder !== null && decoder.state !== "closed") {
-      try {
-        decoder.close();
-      } catch {
-      }
-    }
-    decoder = null;
-    waitingForKeyFrame = true;
-  }
-  let decoderWidth = 0;
-  let decoderHeight = 0;
-  function onChunk(chunk) {
-    if (!isOpen) return;
-    if (chunk.name !== activeName) return;
-    if (decoder === null || chunk.width !== decoderWidth || chunk.height !== decoderHeight) {
-      decoderWidth = chunk.width;
-      decoderHeight = chunk.height;
-      startDecoder(chunk.width, chunk.height);
-    }
-    if (decoder === null) return;
-    if (waitingForKeyFrame && !chunk.keyFrame) return;
-    if (chunk.keyFrame) waitingForKeyFrame = false;
-    try {
-      const encoded = new EncodedVideoChunk({
-        type: chunk.keyFrame ? "key" : "delta",
-        timestamp: chunk.capturedAt * 1e3,
-        data: chunk.data
-      });
-      decoder.decode(encoded);
-    } catch {
-      stopDecoder();
-    }
-  }
-  function open(name) {
-    if (isOpen && activeName === name) return;
-    isOpen = true;
-    root.style.display = "flex";
-    options.onOpen?.();
-    setActive(name);
-    client.setBuffers({ [name]: { mode: "stream" } });
-    if (codecAvailable && unsubChunks === null) {
-      unsubChunks = client.addChunkListener(onChunk);
-    }
-  }
-  function close() {
-    if (!isOpen) return;
-    isOpen = false;
-    root.style.display = "none";
-    stopDecoder();
-    if (unsubChunks !== null) {
-      unsubChunks();
-      unsubChunks = null;
-    }
-    client.setBuffers({});
-    options.onClose?.();
-  }
-  return {
-    get isOpen() {
-      return isOpen;
-    },
-    open,
-    close,
-    dispose() {
-      stopDecoder();
-      if (unsubChunks !== null) {
-        unsubChunks();
-        unsubChunks = null;
-      }
-      unsubscribe();
-      mainResizeObserver.disconnect();
-      document.removeEventListener("keydown", onKeydown);
-      window.removeEventListener("resize", onResize);
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-      root.remove();
-      rowEls.clear();
-      groupContainers.clear();
-    }
-  };
-}
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  createBuffersModal
-});
-//# sourceMappingURL=buffers-modal.cjs.map

package/dist/buffers-modal.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/buffers-modal.ts"],"sourcesContent":["/**\n * Fullscreen buffer viewer.\n *\n * Lives outside the Tweakpane DOM tree — mounts a top-level\n * `<div>` to `document.body` with a high `z-index`, fully blocks\n * interaction with the host page until closed. Layout:\n *\n *   ┌───────────────────────────────────────────┐\n *   │ ◀ tree │                          ⤡ × │   ← header bar\n *   │────────│                                │\n *   │ group1 │            canvas              │\n *   │  • a   │     (aspect-correct)           │\n *   │  • b   │                                │\n *   │ group2 │                                │\n *   │  • c   │                                │\n *   │        │                                │\n *   └───────────────────────────────────────────┘\n *\n * Sidebar (defaults expanded, collapsible via the ◀ at the top-left):\n *   - Group tree: every registered buffer, grouped by `name` prefix.\n *   - Click a buffer to make it active. Active row highlighted.\n *\n * Main area:\n *   - Canvas sized to fill remaining space, source bitmap rendered\n *     aspect-correct (`object-fit: contain` semantics) with the same\n *     decoder pipeline as the in-pane thumbnail.\n *   - Header chips: dimensions, pixel type, display mode.\n *   - `×` button (top-right) closes; `Esc` also closes; outer-click\n *     does not close (modal is intentionally sticky to avoid\n *     accidental dismiss while inspecting).\n *\n * Selection drives `client.setBuffers([activeName])` so only the\n * one buffer the user is looking at gets streamed. Closing the\n * modal restores whatever the in-pane thumbnail's selection was.\n */\n\nimport type { BufferChunkPayload, BufferSnapshot, DevtoolsClient } from './devtools-client.js'\n\nexport interface BuffersModalHandle {\n  /** Show the modal with the given buffer pre-selected. */\n  open(name: string): void\n  /** Close it (no-op if already closed). */\n  close(): void\n  /** True when visible. */\n  readonly isOpen: boolean\n  /** Tear down DOM + listener. */\n  dispose(): void\n}\n\nexport interface BuffersModalOptions {\n  onActiveChange?: (name: string) => void\n  onOpen?: () => void\n  onClose?: () => void\n}\n\n/**\n * Build a fullscreen modal anchored to `document.body`. Returns an\n * imperative handle — the in-pane thumbnail's expand button calls\n * `open(activeName)` to surface it.\n */\nexport function createBuffersModal(\n  client: DevtoolsClient,\n  options: BuffersModalOptions = {},\n): BuffersModalHandle {\n  // ── Root + overlay ────────────────────────────────────────────────────\n\n  const root = document.createElement('div')\n  root.style.cssText = [\n    'position:fixed',\n    'inset:0',\n    'z-index:99999',\n    'background:rgba(0,2,28,0.92)',\n    'color:var(--tp-label-foreground-color, #f0edd8)',\n    'font-family:var(--tp-base-font-family, ui-monospace, monospace)',\n    'font-size:12px',\n    'display:none',\n    'flex-direction:column',\n  ].join(';')\n\n  // ── Header bar ────────────────────────────────────────────────────────\n\n  const header = document.createElement('div')\n  header.style.cssText = [\n    'display:flex',\n    'align-items:center',\n    'gap:12px',\n    'padding:8px 12px',\n    'border-bottom:1px solid rgba(240,237,216,0.08)',\n    'flex:0 0 auto',\n  ].join(';')\n\n  const sidebarToggle = document.createElement('span')\n  sidebarToggle.textContent = '◀'\n  sidebarToggle.style.cssText = 'cursor:pointer;padding:2px 6px;opacity:0.8;user-select:none'\n  sidebarToggle.title = 'Toggle sidebar'\n\n  const titleEl = document.createElement('span')\n  titleEl.style.cssText = 'flex:1;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap'\n\n  const dimsEl = document.createElement('span')\n  dimsEl.style.cssText = 'opacity:0.7;font-variant-numeric:tabular-nums'\n\n  const closeBtn = document.createElement('span')\n  closeBtn.textContent = '×'\n  closeBtn.style.cssText = 'cursor:pointer;padding:2px 10px;font-size:18px;line-height:1;opacity:0.8;user-select:none'\n  closeBtn.title = 'Close'\n\n  header.appendChild(sidebarToggle)\n  header.appendChild(titleEl)\n  header.appendChild(dimsEl)\n  header.appendChild(closeBtn)\n\n  // ── Body: sidebar + main ──────────────────────────────────────────────\n\n  const body = document.createElement('div')\n  body.style.cssText = 'display:flex;flex:1;min-height:0'\n\n  const sidebar = document.createElement('div')\n  sidebar.style.cssText = [\n    'display:flex',\n    'flex-direction:column',\n    'width:240px',\n    'border-right:1px solid rgba(240,237,216,0.08)',\n    'overflow-y:auto',\n    'padding:8px 0',\n    'flex:0 0 auto',\n  ].join(';')\n\n  const main = document.createElement('div')\n  main.style.cssText = 'flex:1;display:flex;align-items:center;justify-content:center;padding:16px;min-width:0;min-height:0;overflow:hidden;position:relative'\n\n  const canvas = document.createElement('canvas')\n  canvas.style.cssText = 'display:block;background:rgba(0,2,28,0.6);image-rendering:pixelated;max-width:100%;max-height:100%'\n  const ctx = canvas.getContext('2d')\n\n  const offscreen = document.createElement('canvas')\n  offscreen.width = 1\n  offscreen.height = 1\n\n  // Zoom info + reset — top-left to avoid conflict with docs page controls\n  const zoomBar = document.createElement('div')\n  zoomBar.style.cssText = [\n    'position:absolute', 'top:8px', 'left:8px',\n    'display:flex', 'gap:6px', 'align-items:center',\n    'z-index:1',\n  ].join(';')\n\n  const zoomInfo = document.createElement('span')\n  zoomInfo.style.cssText = [\n    'padding:3px 8px', 'border-radius:4px',\n    'background:rgba(0,0,0,0.6)', 'color:#aaa',\n    'font:11px/1.4 monospace', 'pointer-events:none',\n    'user-select:none',\n  ].join(';')\n  zoomInfo.textContent = '1.0×'\n\n  const resetBtn = document.createElement('span')\n  resetBtn.style.cssText = [\n    'padding:3px 8px', 'border-radius:4px',\n    'background:rgba(0,0,0,0.6)', 'color:#aaa',\n    'font:11px/1.4 monospace', 'cursor:pointer',\n    'user-select:none',\n  ].join(';')\n  resetBtn.textContent = '⟲ Reset'\n  resetBtn.title = 'Reset zoom & pan (double-click also resets)'\n\n  zoomBar.appendChild(zoomInfo)\n  zoomBar.appendChild(resetBtn)\n\n  main.appendChild(canvas)\n  main.appendChild(zoomBar)\n  body.appendChild(sidebar)\n  body.appendChild(main)\n\n  root.appendChild(header)\n  root.appendChild(body)\n  document.body.appendChild(root)\n\n  // ── State ─────────────────────────────────────────────────────────────\n\n  let isOpen = false\n  let activeName: string | null = null\n  let lastRenderedVersion = -1\n  let sidebarCollapsed = false\n\n  // ── Pan + zoom ─────────────────────────────────────────────────────────\n\n  const MIN_ZOOM = 0.25\n  const MAX_ZOOM = 64\n\n  let zoom = 1\n  let panX = 0\n  let panY = 0\n  let isDragging = false\n  let dragStartX = 0\n  let dragStartY = 0\n  let panStartX = 0\n  let panStartY = 0\n\n  function updateZoomInfo(): void {\n    const z = zoom < 10 ? zoom.toFixed(1) : Math.round(zoom).toString()\n    zoomInfo.textContent = zoom === 1 ? '1.0×' : `${z}× · (${Math.round(panX)}, ${Math.round(panY)})`\n    const atIdentity = zoom === 1 && panX === 0 && panY === 0\n    resetBtn.style.display = atIdentity ? 'none' : 'inline'\n  }\n\n  function applyTransform(): void {\n    canvas.style.transform = `translate(${panX}px, ${panY}px) scale(${zoom})`\n    canvas.style.transformOrigin = 'center center'\n    updateZoomInfo()\n  }\n\n  function resetTransform(): void {\n    zoom = 1\n    panX = 0\n    panY = 0\n    applyTransform()\n  }\n\n  // Prevent page scroll when pointer is over the main area\n  main.addEventListener('wheel', (e) => {\n    e.preventDefault()\n    e.stopPropagation()\n\n    const factor = e.deltaY < 0 ? 1.15 : 1 / 1.15\n    const newZoom = Math.max(MIN_ZOOM, Math.min(MAX_ZOOM, zoom * factor))\n    if (newZoom === zoom) return\n\n    // Zoom toward cursor position\n    const rect = main.getBoundingClientRect()\n    const mx = e.clientX - rect.left - rect.width / 2\n    const my = e.clientY - rect.top - rect.height / 2\n    const ratio = 1 - newZoom / zoom\n    panX += (mx - panX) * ratio\n    panY += (my - panY) * ratio\n    zoom = newZoom\n    applyTransform()\n  }, { passive: false })\n\n  main.addEventListener('mousedown', (e) => {\n    if (e.button !== 0) return\n    isDragging = true\n    dragStartX = e.clientX\n    dragStartY = e.clientY\n    panStartX = panX\n    panStartY = panY\n    main.style.cursor = 'grabbing'\n    e.preventDefault()\n  })\n\n  const onMouseMove = (e: MouseEvent) => {\n    if (!isDragging) return\n    panX = panStartX + (e.clientX - dragStartX)\n    panY = panStartY + (e.clientY - dragStartY)\n    applyTransform()\n  }\n\n  const onMouseUp = () => {\n    if (!isDragging) return\n    isDragging = false\n    main.style.cursor = 'grab'\n  }\n\n  window.addEventListener('mousemove', onMouseMove)\n  window.addEventListener('mouseup', onMouseUp)\n\n  main.addEventListener('dblclick', () => resetTransform())\n  resetBtn.addEventListener('click', () => resetTransform())\n\n  main.style.cursor = 'grab'\n\n  // Track the per-row DOM nodes so we can update highlight without\n  // re-rendering the whole sidebar each batch.\n  const rowEls = new Map<string, HTMLDivElement>()\n\n  // ── Sidebar render ────────────────────────────────────────────────────\n\n  const groupContainers = new Map<string, HTMLDivElement>()\n\n  function ensureGroup(group: string): HTMLDivElement {\n    let el = groupContainers.get(group)\n    if (el !== undefined) return el\n    el = document.createElement('div')\n    el.style.cssText = 'margin:6px 0'\n    const head = document.createElement('div')\n    head.textContent = group\n    head.style.cssText = 'padding:4px 12px;opacity:0.6;font-size:11px;text-transform:uppercase;letter-spacing:0.05em;user-select:none'\n    el.appendChild(head)\n    sidebar.appendChild(el)\n    groupContainers.set(group, el)\n    return el\n  }\n\n  function ensureRow(group: string, name: string, shortName: string): HTMLDivElement {\n    let row = rowEls.get(name)\n    if (row !== undefined) return row\n    const groupEl = ensureGroup(group)\n    row = document.createElement('div')\n    row.textContent = shortName\n    row.dataset['name'] = name\n    row.style.cssText = 'padding:4px 12px 4px 22px;cursor:pointer;user-select:none;border-left:2px solid transparent'\n    row.addEventListener('click', () => setActive(name))\n    groupEl.appendChild(row)\n    rowEls.set(name, row)\n    return row\n  }\n\n  function destroyRow(name: string): void {\n    const row = rowEls.get(name)\n    if (row === undefined) return\n    row.remove()\n    rowEls.delete(name)\n  }\n\n  function highlightActive(): void {\n    for (const [name, row] of rowEls) {\n      const on = name === activeName\n      row.style.background = on ? 'rgba(71,204,169,0.15)' : 'transparent'\n      row.style.borderLeftColor = on ? 'var(--tp-button-foreground-color-active, #47cca9)' : 'transparent'\n      row.style.color = on ? 'var(--tp-label-foreground-color, #f0edd8)' : 'rgba(240,237,216,0.7)'\n    }\n  }\n\n  // ── Render the active buffer into the canvas ──────────────────────────\n\n  function paint(snap: BufferSnapshot): void {\n    if (ctx === null) return\n    const { width, height, pixels } = snap\n    if (width === 0 || height === 0 || pixels === null) {\n      // Size canvas to a placeholder so it still occupies space.\n      canvas.width = 1; canvas.height = 1\n      return\n    }\n\n    if (offscreen.width !== width || offscreen.height !== height) {\n      offscreen.width = width\n      offscreen.height = height\n    }\n    const offCtx = offscreen.getContext('2d')\n    if (offCtx === null) return\n\n    const imgData = offCtx.createImageData(width, height)\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    offCtx.putImageData(imgData, 0, 0)\n\n    // Backing matches displayed pixels at 1:1 (no DPR mul — modal is\n    // about inspection, not pretty rendering, and 1:1 keeps the\n    // pixel grid clearly visible).\n    if (canvas.width !== width || canvas.height !== height) {\n      canvas.width = width\n      canvas.height = height\n    }\n    // Fit the canvas CSS box to the SOURCE aspect — thumbnails are\n    // downsampled, but the modal should still display at native aspect\n    // so the user doesn't see a wildly-stretched preview while the\n    // stream mode warms up.\n    const fitW = snap.srcWidth > 0 ? snap.srcWidth : width\n    const fitH = snap.srcHeight > 0 ? snap.srcHeight : height\n    canvasSrcW = fitW\n    canvasSrcH = fitH\n    fitCanvas(fitW, fitH)\n    ctx.imageSmoothingEnabled = false\n    ctx.drawImage(offscreen, 0, 0)\n  }\n\n  function refresh(): void {\n    if (!isOpen) return\n    const state = client.state\n\n    // Sync the sidebar tree.\n    const present = new Set<string>()\n    for (const [name] of state.buffers) {\n      present.add(name)\n      const dot = name.indexOf('.')\n      const group = dot === -1 ? 'ungrouped' : name.slice(0, dot)\n      const short = dot === -1 ? name : name.slice(dot + 1)\n      ensureRow(group, name, short)\n    }\n    for (const name of rowEls.keys()) {\n      if (!present.has(name)) destroyRow(name)\n    }\n\n    // If active was removed, fall back to first available.\n    if (activeName !== null && !state.buffers.has(activeName)) {\n      const first = state.buffers.keys().next().value\n      activeName = first ?? null\n      // setActive resyncs server filter, but we may be in mid-refresh\n      // so call the underlying setter directly.\n      if (activeName !== null) client.setBuffers({ [activeName]: { mode: 'stream' } })\n      else client.setBuffers({})\n    }\n    highlightActive()\n\n    if (activeName === null) {\n      titleEl.textContent = '—'\n      dimsEl.textContent = ''\n      return\n    }\n    const snap = state.buffers.get(activeName)\n    if (snap === undefined) return\n    titleEl.textContent = snap.label !== undefined ? `${activeName} — ${snap.label}` : activeName\n    dimsEl.textContent = `${snap.width}×${snap.height} · ${snap.pixelType} · ${snap.display}`\n    // In stream mode the VideoDecoder draws directly to the canvas —\n    // don't let paint() overwrite it (pixels are stripped from the\n    // batch so snap.pixels is null, which would clear the canvas).\n    if (decoder === null && snap.version !== lastRenderedVersion) {\n      lastRenderedVersion = snap.version\n      paint(snap)\n    }\n  }\n\n  function setActive(name: string): void {\n    if (activeName === name) return\n    activeName = name\n    lastRenderedVersion = -1\n    resetTransform()\n    stopDecoder()\n    decoderWidth = 0\n    decoderHeight = 0\n    // Modal always wants the live stream — codec fallback is handled\n    // provider-side (falls back to raw broadcasts when WebCodecs is\n    // unavailable).\n    client.setBuffers({ [name]: { mode: 'stream' } })\n    options.onActiveChange?.(name)\n    highlightActive()\n    refresh()\n  }\n\n  // ── Event wiring ──────────────────────────────────────────────────────\n\n  const unsubscribe = client.addListener(() => refresh())\n\n  closeBtn.addEventListener('click', () => close())\n  sidebarToggle.addEventListener('click', () => {\n    sidebarCollapsed = !sidebarCollapsed\n    sidebar.style.display = sidebarCollapsed ? 'none' : 'flex'\n    sidebarToggle.textContent = sidebarCollapsed ? '▶' : '◀'\n    refresh()\n  })\n  const onKeydown = (e: KeyboardEvent) => {\n    if (!isOpen) return\n    if (e.key === 'Escape') close()\n  }\n  document.addEventListener('keydown', onKeydown)\n\n  // Aspect-fit the canvas box inside `main`, given source dimensions.\n  // Shared by `paint()`, the decoder output callback, and the\n  // ResizeObserver below so the CSS box always tracks the container\n  // regardless of which path last touched the canvas.\n  function fitCanvas(srcW: number, srcH: number): void {\n    if (srcW <= 0 || srcH <= 0) return\n    const mainRect = main.getBoundingClientRect()\n    const maxW = Math.max(1, mainRect.width - 32)\n    const maxH = Math.max(1, mainRect.height - 32)\n    const srcAspect = srcW / srcH\n    const boxAspect = maxW / maxH\n    let cssW: number\n    let cssH: number\n    if (srcAspect > boxAspect) {\n      cssW = maxW\n      cssH = Math.max(1, Math.round(maxW / srcAspect))\n    } else {\n      cssH = maxH\n      cssW = Math.max(1, Math.round(maxH * srcAspect))\n    }\n    canvas.style.width = `${cssW}px`\n    canvas.style.height = `${cssH}px`\n  }\n\n  // Track current source dimensions so the ResizeObserver can re-fit\n  // without waiting for a new frame. Set by both paint() (thumbnail\n  // mode) and the decoder output callback (stream mode).\n  let canvasSrcW = 0\n  let canvasSrcH = 0\n\n  // Re-paint on viewport resize so the canvas re-fits its container.\n  const onResize = () => {\n    if (!isOpen || activeName === null) return\n    const snap = client.state.buffers.get(activeName)\n    if (snap !== undefined) paint(snap)\n  }\n  window.addEventListener('resize', onResize)\n\n  // Observe the container itself: sidebar collapse, viewport resize,\n  // or ancestor layout changes can all change `main`'s box without\n  // firing a window resize. Without this, a zoomed-in canvas keeps\n  // its stale CSS size and clips against the shrunken main container.\n  const mainResizeObserver = new ResizeObserver(() => {\n    if (!isOpen) return\n    if (canvasSrcW > 0 && canvasSrcH > 0) fitCanvas(canvasSrcW, canvasSrcH)\n  })\n  mainResizeObserver.observe(main)\n\n  // ── Open / close ──────────────────────────────────────────────────────\n\n  // ── WebCodecs decoder ─────────────────────────────────────────────────\n\n  const codecAvailable = typeof VideoDecoder !== 'undefined'\n  let decoder: VideoDecoder | null = null\n  let unsubChunks: (() => void) | null = null\n  let waitingForKeyFrame = true\n\n  function startDecoder(width: number, height: number): void {\n    stopDecoder()\n    if (!codecAvailable) return\n    waitingForKeyFrame = true\n    decoder = new VideoDecoder({\n      output: (frame) => {\n        if (ctx === null) { frame.close(); return }\n        if (canvas.width !== frame.codedWidth || canvas.height !== frame.codedHeight) {\n          canvas.width = frame.codedWidth\n          canvas.height = frame.codedHeight\n        }\n        canvasSrcW = frame.codedWidth\n        canvasSrcH = frame.codedHeight\n        fitCanvas(frame.codedWidth, frame.codedHeight)\n        ctx.drawImage(frame as unknown as CanvasImageSource, 0, 0)\n        frame.close()\n      },\n      error: () => {\n        stopDecoder()\n      },\n    })\n    decoder.configure({\n      codec: 'vp09.00.10.08',\n      codedWidth: width,\n      codedHeight: height,\n    })\n  }\n\n  function stopDecoder(): void {\n    if (decoder !== null && decoder.state !== 'closed') {\n      try { decoder.close() } catch { /* may already be errored */ }\n    }\n    decoder = null\n    waitingForKeyFrame = true\n  }\n\n  let decoderWidth = 0\n  let decoderHeight = 0\n\n  function onChunk(chunk: BufferChunkPayload): void {\n    if (!isOpen) return\n    if (chunk.name !== activeName) return\n\n    // Start or reconfigure decoder on dimension change\n    if (decoder === null || chunk.width !== decoderWidth || chunk.height !== decoderHeight) {\n      decoderWidth = chunk.width\n      decoderHeight = chunk.height\n      startDecoder(chunk.width, chunk.height)\n    }\n    if (decoder === null) return\n\n    if (waitingForKeyFrame && !chunk.keyFrame) return\n    if (chunk.keyFrame) waitingForKeyFrame = false\n\n    try {\n      const encoded = new EncodedVideoChunk({\n        type: chunk.keyFrame ? 'key' : 'delta',\n        timestamp: chunk.capturedAt * 1000,\n        data: chunk.data,\n      })\n      decoder.decode(encoded)\n    } catch {\n      stopDecoder()\n    }\n  }\n\n  // ── Open / close ──────────────────────────────────────────────────────\n\n  function open(name: string): void {\n    if (isOpen && activeName === name) return\n    isOpen = true\n    root.style.display = 'flex'\n    options.onOpen?.()\n    setActive(name)\n    // setActive short-circuits when re-opening the same target, but\n    // close() already wiped the subscription (and buffers-view may have\n    // switched it to thumbnail). Force stream mode here — no-op when\n    // setActive just set it.\n    client.setBuffers({ [name]: { mode: 'stream' } })\n    if (codecAvailable && unsubChunks === null) {\n      unsubChunks = client.addChunkListener(onChunk)\n    }\n  }\n\n  function close(): void {\n    if (!isOpen) return\n    isOpen = false\n    root.style.display = 'none'\n    stopDecoder()\n    if (unsubChunks !== null) {\n      unsubChunks()\n      unsubChunks = null\n    }\n    // Revert to idle — thumbnail view (if any) will re-subscribe\n    // in thumbnail mode itself when it becomes the active consumer.\n    client.setBuffers({})\n    options.onClose?.()\n  }\n\n  return {\n    get isOpen(): boolean { return isOpen },\n    open,\n    close,\n    dispose() {\n      stopDecoder()\n      if (unsubChunks !== null) {\n        unsubChunks()\n        unsubChunks = null\n      }\n      unsubscribe()\n      mainResizeObserver.disconnect()\n      document.removeEventListener('keydown', onKeydown)\n      window.removeEventListener('resize', onResize)\n      window.removeEventListener('mousemove', onMouseMove)\n      window.removeEventListener('mouseup', onMouseUp)\n      root.remove()\n      rowEls.clear()\n      groupContainers.clear()\n    },\n  }\n}\n\n"],"mappings":"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","names":[]}

package/dist/buffers-modal.d.cts

@@ -1,62 +0,0 @@
-import { DevtoolsClient } from './devtools-client.cjs';
-import 'three-flatland/debug-protocol';
-
-/**
- * Fullscreen buffer viewer.
- *
- * Lives outside the Tweakpane DOM tree — mounts a top-level
- * `<div>` to `document.body` with a high `z-index`, fully blocks
- * interaction with the host page until closed. Layout:
- *
- *   ┌───────────────────────────────────────────┐
- *   │ ◀ tree │                          ⤡ × │   ← header bar
- *   │────────│                                │
- *   │ group1 │            canvas              │
- *   │  • a   │     (aspect-correct)           │
- *   │  • b   │                                │
- *   │ group2 │                                │
- *   │  • c   │                                │
- *   │        │                                │
- *   └───────────────────────────────────────────┘
- *
- * Sidebar (defaults expanded, collapsible via the ◀ at the top-left):
- *   - Group tree: every registered buffer, grouped by `name` prefix.
- *   - Click a buffer to make it active. Active row highlighted.
- *
- * Main area:
- *   - Canvas sized to fill remaining space, source bitmap rendered
- *     aspect-correct (`object-fit: contain` semantics) with the same
- *     decoder pipeline as the in-pane thumbnail.
- *   - Header chips: dimensions, pixel type, display mode.
- *   - `×` button (top-right) closes; `Esc` also closes; outer-click
- *     does not close (modal is intentionally sticky to avoid
- *     accidental dismiss while inspecting).
- *
- * Selection drives `client.setBuffers([activeName])` so only the
- * one buffer the user is looking at gets streamed. Closing the
- * modal restores whatever the in-pane thumbnail's selection was.
- */
-
-interface BuffersModalHandle {
-    /** Show the modal with the given buffer pre-selected. */
-    open(name: string): void;
-    /** Close it (no-op if already closed). */
-    close(): void;
-    /** True when visible. */
-    readonly isOpen: boolean;
-    /** Tear down DOM + listener. */
-    dispose(): void;
-}
-interface BuffersModalOptions {
-    onActiveChange?: (name: string) => void;
-    onOpen?: () => void;
-    onClose?: () => void;
-}
-/**
- * Build a fullscreen modal anchored to `document.body`. Returns an
- * imperative handle — the in-pane thumbnail's expand button calls
- * `open(activeName)` to surface it.
- */
-declare function createBuffersModal(client: DevtoolsClient, options?: BuffersModalOptions): BuffersModalHandle;
-
-export { type BuffersModalHandle, type BuffersModalOptions, createBuffersModal };