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

package/dist/buffers-modal.js

@@ -1,467 +1,462 @@
+//#region src/buffers-modal.ts
+/**
+* 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.
+*/
 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();
-    }
-  };
+	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 = "◀";
+	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 = "×";
+	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×";
+	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 = "⟲ 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 = .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×" : `${z}× · (${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(".");
+			ensureRow(dot === -1 ? "ungrouped" : name.slice(0, dot), name, dot === -1 ? name : name.slice(dot + 1));
+		}
+		for (const name of rowEls.keys()) if (!present.has(name)) destroyRow(name);
+		if (activeName !== null && !state.buffers.has(activeName)) {
+			activeName = state.buffers.keys().next().value ?? null;
+			if (activeName !== null) client.setBuffers({ [activeName]: { mode: "stream" } });
+			else client.setBuffers({});
+		}
+		highlightActive();
+		if (activeName === null) {
+			titleEl.textContent = "—";
+			dimsEl.textContent = "";
+			return;
+		}
+		const snap = state.buffers.get(activeName);
+		if (snap === void 0) return;
+		titleEl.textContent = snap.label !== void 0 ? `${activeName} — ${snap.label}` : activeName;
+		dimsEl.textContent = `${snap.width}×${snap.height} · ${snap.pixelType} · ${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 ? "▶" : "◀";
+		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();
+		}
+	};
 }
-export {
-  createBuffersModal
-};
+//#endregion
+export { createBuffersModal };
+
 //# sourceMappingURL=buffers-modal.js.map