@fluixi/devtools 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/detail-panel.cjs

@@ -0,0 +1,307 @@
+"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);
+
+// src/detail-panel.ts
+var detail_panel_exports = {};
+__export(detail_panel_exports, {
+  DETAIL_PANEL_CSS: () => DETAIL_PANEL_CSS,
+  createDetailPanel: () => createDetailPanel
+});
+module.exports = __toCommonJS(detail_panel_exports);
+
+// src/copy.ts
+function confirmOn(button, said = "copied") {
+  if (!button) return;
+  const was = button.textContent;
+  button.textContent = said;
+  setTimeout(() => {
+    button.textContent = was;
+  }, 1200);
+}
+function fallback(text, button) {
+  try {
+    const doc = button?.ownerDocument ?? document;
+    const area = doc.createElement("textarea");
+    area.value = text;
+    area.setAttribute("readonly", "");
+    area.style.position = "fixed";
+    area.style.opacity = "0";
+    doc.body.appendChild(area);
+    area.select();
+    doc.execCommand("copy");
+    area.remove();
+    confirmOn(button);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function copyText(text, button) {
+  const clipboard = globalThis.navigator?.clipboard;
+  if (clipboard?.writeText) {
+    try {
+      await clipboard.writeText(text);
+      confirmOn(button);
+      return true;
+    } catch {
+    }
+  }
+  return fallback(text, button);
+}
+
+// src/change-view.ts
+var escape = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var SIGN = { added: "+", removed: "−", changed: "~" };
+function pretty(json) {
+  if (!json) return void 0;
+  try {
+    return JSON.stringify(JSON.parse(json), null, 2);
+  } catch {
+    return void 0;
+  }
+}
+function sideOf(text, json, cls) {
+  const block = pretty(json);
+  if (!block) return `<span class="ch-${cls}">${escape(text ?? "")}</span>`;
+  return `<div class="ch-block ch-${cls}"><button type="button" class="ch-copy" title="Copy" data-copy="${escape(block)}">copy</button><pre class="ch-json">${escape(block)}</pre></div>`;
+}
+function changeRows(change, limit = Infinity) {
+  if (!change?.entries?.length) return "";
+  const shown = change.entries.slice(0, limit);
+  const hidden = change.entries.length - shown.length + (change.more ?? 0);
+  const rows = shown.map((entry) => {
+    const from = sideOf(entry.from, entry.fromJson, "from");
+    const to = sideOf(entry.to, entry.toJson, "to");
+    const sides = entry.op === "changed" ? `${from}<span class="ch-arrow">→</span>${to}` : entry.op === "added" ? to : from;
+    const stacked = entry.fromJson || entry.toJson ? " ch-stacked" : "";
+    return `<div class="ch-row ch-${entry.op}${stacked}"><span class="ch-sign">${SIGN[entry.op] ?? "·"}</span><span class="ch-key">${escape(entry.key)}</span><span class="ch-sides">${sides}</span></div>`;
+  }).join("");
+  const size = change.length ? `<div class="ch-size">${change.length.from} → ${change.length.to} items</div>` : "";
+  return `<div class="ch-list">${size}${rows}${hidden > 0 ? `<div class="ch-more">and ${hidden} more</div>` : ""}</div>`;
+}
+function handleCopyClick(event) {
+  const button = event.target?.closest?.(".ch-copy");
+  if (!button) return false;
+  void copyText(button.dataset.copy ?? "", button);
+  return true;
+}
+var CHANGE_CSS = `
+.ch-list { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; }
+.ch-size { color: var(--fx-muted, #8a90a2); margin-bottom: 2px; }
+.ch-row { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; }
+.ch-row.ch-stacked { align-items: flex-start; padding: 3px 0; }
+.ch-sign { flex: none; width: 9px; text-align: center; }
+.ch-added .ch-sign { color: var(--state, #34d399); }
+.ch-removed .ch-sign { color: var(--fx-write, #fb7185); }
+.ch-changed .ch-sign { color: var(--effect, #fbbf24); }
+.ch-key { flex: none; color: var(--fx-muted, #8a90a2); }
+.ch-sides { min-width: 0; flex: 1; overflow-wrap: anywhere; }
+.ch-stacked .ch-sides { display: flex; flex-direction: column; gap: 2px; }
+.ch-from { color: var(--fx-muted, #8a90a2); }
+.ch-row:not(.ch-stacked) .ch-from { text-decoration: line-through; }
+.ch-arrow { color: var(--fx-muted, #8a90a2); margin: 0 4px; }
+.ch-to { color: var(--fx-label, #e7e9ee); }
+.ch-more { color: var(--fx-muted, #8a90a2); margin-top: 2px; }
+/* In the corner: an object can be tall, and a button under it is a scroll away. */
+.ch-block { position: relative; border-radius: 4px; border: 1px solid var(--fx-line, #ffffff14); }
+.ch-block.ch-from { opacity: .72; }
+.ch-json { margin: 0; padding: 5px 7px; overflow-x: auto; white-space: pre; font: inherit; }
+.ch-copy {
+  position: absolute; top: 3px; right: 3px; padding: 1px 6px; cursor: pointer;
+  font: inherit; font-size: 9.5px; opacity: 0; transition: opacity .12s;
+  border: 1px solid var(--fx-line, #ffffff26); border-radius: 3px;
+  background: var(--fx-panel, #14161c); color: var(--fx-muted, #8a90a2);
+}
+.ch-block:hover .ch-copy, .ch-copy:focus { opacity: 1; }
+.ch-copy:hover { color: var(--fx-label, #e7e9ee); }
+`;
+
+// src/detail-panel.ts
+var escape2 = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var clock = (t) => {
+  const d = new Date(t);
+  const pad = (n, w = 2) => String(n).padStart(w, "0");
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+};
+var VERBS = {
+  write: "written",
+  ran: "ran",
+  created: "made",
+  disposed: "gone"
+};
+var MIN_W = 320;
+var MIN_H = 200;
+function draggable(handle, onMove) {
+  handle.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    if (event.target.closest("button")) return;
+    event.preventDefault();
+    event.stopPropagation();
+    handle.setPointerCapture(event.pointerId);
+    let lastX = event.clientX;
+    let lastY = event.clientY;
+    const move = (e) => {
+      onMove(e.clientX - lastX, e.clientY - lastY);
+      lastX = e.clientX;
+      lastY = e.clientY;
+    };
+    const stop = () => {
+      handle.removeEventListener("pointermove", move);
+      handle.removeEventListener("pointerup", stop);
+      handle.removeEventListener("pointercancel", stop);
+      handle.removeEventListener("lostpointercapture", stop);
+      if (handle.hasPointerCapture(event.pointerId)) handle.releasePointerCapture(event.pointerId);
+    };
+    handle.addEventListener("pointermove", move);
+    handle.addEventListener("pointerup", stop);
+    handle.addEventListener("pointercancel", stop);
+    handle.addEventListener("lostpointercapture", stop);
+  });
+}
+function createDetailPanel(host, options = {}) {
+  const panel = host.ownerDocument.createElement("div");
+  panel.className = "dp-panel";
+  panel.hidden = true;
+  panel.innerHTML = '<div class="dp-bar"><span class="dp-title"></span><button type="button" class="dp-close" title="Close" aria-label="Close">✕</button></div><div class="dp-body"></div><div class="dp-grip" title="Drag to resize"></div>';
+  host.appendChild(panel);
+  const title = panel.querySelector(".dp-title");
+  const body = panel.querySelector(".dp-body");
+  const bar = panel.querySelector(".dp-bar");
+  const grip = panel.querySelector(".dp-grip");
+  let x = 0;
+  let y = 0;
+  let width = 520;
+  let height = 380;
+  let open = false;
+  const place = () => {
+    panel.style.left = `${Math.round(x)}px`;
+    panel.style.top = `${Math.round(y)}px`;
+    panel.style.width = `${Math.round(width)}px`;
+    panel.style.height = `${Math.round(height)}px`;
+  };
+  draggable(bar, (dx, dy) => {
+    const view = panel.ownerDocument.defaultView;
+    x = Math.max(0, Math.min((view?.innerWidth ?? width) - 60, x + dx));
+    y = Math.max(0, Math.min((view?.innerHeight ?? height) - 30, y + dy));
+    place();
+  });
+  draggable(grip, (dx, dy) => {
+    width = Math.max(MIN_W, width + dx);
+    height = Math.max(MIN_H, height + dy);
+    place();
+  });
+  panel.querySelector(".dp-close")?.addEventListener("click", () => close());
+  body.addEventListener("click", (e) => {
+    if (handleCopyClick(e)) return;
+    const row = e.target.closest(".dp-node");
+    if (row?.dataset.id) options.onPick?.(Number(row.dataset.id));
+  });
+  function close() {
+    open = false;
+    panel.hidden = true;
+  }
+  return {
+    open(commit, graph) {
+      const nameOf = (e) => graph.get(e.id)?.label ?? e.label ?? `#${e.id}`;
+      const cause = commit.cause;
+      title.textContent = cause ? `${nameOf(cause)} · ${clock(commit.t)}` : `${commit.commit === 0 ? "first render" : `commit ${commit.commit}`} · ${clock(commit.t)}`;
+      const headline = cause && cause.from !== void 0 && cause.to !== void 0 ? `<div class="dp-change"><span class="ch-from">${escape2(cause.from)}</span><span class="ch-arrow">→</span><span class="ch-to">${escape2(cause.to)}</span></div>` : "";
+      const groups = ["write", "ran", "created", "disposed"].map((kind) => {
+        const rows = commit.events.filter((e) => e.kind === kind && e !== cause);
+        if (!rows.length) return "";
+        const seen = /* @__PURE__ */ new Map();
+        for (const event of rows) {
+          const found = seen.get(event.id);
+          if (found) found.count++;
+          else seen.set(event.id, { name: nameOf(event), count: 1 });
+        }
+        const items = [...seen].map(
+          ([id, { name, count }]) => `<button type="button" class="dp-node" data-id="${id}">${escape2(name)}${count > 1 ? ` ×${count}` : ""}</button>`
+        ).join("");
+        return `<div class="dp-group"><div class="dp-verb">${VERBS[kind]}</div><div class="dp-nodes">${items}</div></div>`;
+      }).join("");
+      const node = cause ? graph.get(cause.id) : void 0;
+      const where = (t) => {
+        if (!t.source) return "";
+        const file = (t.source.file ?? "").split("/").pop() ?? "";
+        const out = t.source.compiled;
+        const tail = out && out.line !== t.source.line ? ` · out ${out.line}` : "";
+        return ` — ${file}:${t.source.line ?? ""}${tail}`;
+      };
+      const targets = node?.targets?.length ? `<div class="dp-group"><div class="dp-verb">updates</div><div class="dp-targets">${node.targets.map(
+        (t) => `<div>${escape2(t.name ? `${t.name} of ${t.element}` : t.element)}<span class="dp-where">${escape2(where(t))}</span></div>`
+      ).join("")}</div></div>` : "";
+      body.innerHTML = headline + changeRows(cause?.change) + groups + targets;
+      if (!open) {
+        const view = panel.ownerDocument.defaultView;
+        x = Math.max(12, ((view?.innerWidth ?? 900) - width) / 2);
+        y = Math.max(12, ((view?.innerHeight ?? 600) - height) / 3);
+        place();
+      }
+      open = true;
+      panel.hidden = false;
+    },
+    close,
+    get isOpen() {
+      return open;
+    },
+    destroy() {
+      panel.remove();
+    }
+  };
+}
+var DETAIL_PANEL_CSS = `
+.dp-panel {
+  position: fixed; z-index: 40; display: flex; flex-direction: column;
+  border: 1px solid var(--fx-line, #ffffff26); border-radius: 8px;
+  background: var(--fx-panel, #14161c); color: var(--fx-label, #e7e9ee);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); overflow: hidden;
+}
+.dp-panel[hidden] { display: none; }
+.dp-bar {
+  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
+  cursor: move; user-select: none;
+  border-bottom: 1px solid var(--fx-line, #ffffff1f);
+}
+.dp-title { font-family: ui-monospace, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dp-close {
+  margin-left: auto; width: 22px; height: 20px; padding: 0; cursor: pointer; font: inherit; font-size: 11px;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;
+  background: transparent; color: var(--fx-muted, #8a90a2);
+}
+.dp-close:hover { color: var(--fx-label, #e7e9ee); }
+.dp-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
+.dp-change { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
+.dp-group { margin-top: 10px; }
+.dp-verb { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--fx-muted, #8a90a2); }
+.dp-nodes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+.dp-node {
+  padding: 2px 7px; cursor: pointer; font: inherit; font-family: ui-monospace, monospace; font-size: 11px;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 999px;
+  background: transparent; color: var(--fx-label, #e7e9ee);
+}
+.dp-node:hover { border-color: var(--fx-accent, #5eead4); }
+.dp-targets { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--fx-label, #e7e9ee); }
+.dp-where { color: var(--fx-muted, #8a90a2); }
+/* Bottom-right, where every desktop puts it. */
+.dp-grip {
+  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #ffffff40) 50%);
+}
+${CHANGE_CSS}`;

package/dist/detail-panel.d.ts

@@ -0,0 +1,17 @@
+import type { Commit } from './history.js';
+import type { RNode } from './instrument.js';
+export interface DetailPanel {
+    /** Show a commit. Opening a second one replaces the first rather than stacking. */
+    open(commit: Commit, graph: Map<number, RNode>): void;
+    close(): void;
+    readonly isOpen: boolean;
+    /** Remove the panel and its listeners. */
+    destroy(): void;
+}
+export interface DetailPanelOptions {
+    /** A node in the panel was clicked — the host can select it on the graph. */
+    onPick?(id: number): void;
+}
+export declare function createDetailPanel(host: HTMLElement, options?: DetailPanelOptions): DetailPanel;
+export declare const DETAIL_PANEL_CSS = "\n.dp-panel {\n  position: fixed; z-index: 40; display: flex; flex-direction: column;\n  border: 1px solid var(--fx-line, #ffffff26); border-radius: 8px;\n  background: var(--fx-panel, #14161c); color: var(--fx-label, #e7e9ee);\n  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); overflow: hidden;\n}\n.dp-panel[hidden] { display: none; }\n.dp-bar {\n  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;\n  cursor: move; user-select: none;\n  border-bottom: 1px solid var(--fx-line, #ffffff1f);\n}\n.dp-title { font-family: ui-monospace, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.dp-close {\n  margin-left: auto; width: 22px; height: 20px; padding: 0; cursor: pointer; font: inherit; font-size: 11px;\n  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;\n  background: transparent; color: var(--fx-muted, #8a90a2);\n}\n.dp-close:hover { color: var(--fx-label, #e7e9ee); }\n.dp-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }\n.dp-change { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }\n.dp-group { margin-top: 10px; }\n.dp-verb { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--fx-muted, #8a90a2); }\n.dp-nodes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }\n.dp-node {\n  padding: 2px 7px; cursor: pointer; font: inherit; font-family: ui-monospace, monospace; font-size: 11px;\n  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 999px;\n  background: transparent; color: var(--fx-label, #e7e9ee);\n}\n.dp-node:hover { border-color: var(--fx-accent, #5eead4); }\n.dp-targets { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--fx-label, #e7e9ee); }\n.dp-where { color: var(--fx-muted, #8a90a2); }\n/* Bottom-right, where every desktop puts it. */\n.dp-grip {\n  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;\n  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #ffffff40) 50%);\n}\n\n.ch-list { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; }\n.ch-size { color: var(--fx-muted, #8a90a2); margin-bottom: 2px; }\n.ch-row { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; }\n.ch-row.ch-stacked { align-items: flex-start; padding: 3px 0; }\n.ch-sign { flex: none; width: 9px; text-align: center; }\n.ch-added .ch-sign { color: var(--state, #34d399); }\n.ch-removed .ch-sign { color: var(--fx-write, #fb7185); }\n.ch-changed .ch-sign { color: var(--effect, #fbbf24); }\n.ch-key { flex: none; color: var(--fx-muted, #8a90a2); }\n.ch-sides { min-width: 0; flex: 1; overflow-wrap: anywhere; }\n.ch-stacked .ch-sides { display: flex; flex-direction: column; gap: 2px; }\n.ch-from { color: var(--fx-muted, #8a90a2); }\n.ch-row:not(.ch-stacked) .ch-from { text-decoration: line-through; }\n.ch-arrow { color: var(--fx-muted, #8a90a2); margin: 0 4px; }\n.ch-to { color: var(--fx-label, #e7e9ee); }\n.ch-more { color: var(--fx-muted, #8a90a2); margin-top: 2px; }\n/* In the corner: an object can be tall, and a button under it is a scroll away. */\n.ch-block { position: relative; border-radius: 4px; border: 1px solid var(--fx-line, #ffffff14); }\n.ch-block.ch-from { opacity: .72; }\n.ch-json { margin: 0; padding: 5px 7px; overflow-x: auto; white-space: pre; font: inherit; }\n.ch-copy {\n  position: absolute; top: 3px; right: 3px; padding: 1px 6px; cursor: pointer;\n  font: inherit; font-size: 9.5px; opacity: 0; transition: opacity .12s;\n  border: 1px solid var(--fx-line, #ffffff26); border-radius: 3px;\n  background: var(--fx-panel, #14161c); color: var(--fx-muted, #8a90a2);\n}\n.ch-block:hover .ch-copy, .ch-copy:focus { opacity: 1; }\n.ch-copy:hover { color: var(--fx-label, #e7e9ee); }\n";
+//# sourceMappingURL=detail-panel.d.ts.map

package/dist/detail-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-panel.d.ts","sourceRoot":"","sources":["../src/detail-panel.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,cAAc,CAAC;AACvD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAE7C,MAAM,WAAW,WAAW;IAC1B,mFAAmF;IACnF,IAAI,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,IAAI,CAAC;IACtD,KAAK,IAAI,IAAI,CAAC;IACd,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC;IACzB,0CAA0C;IAC1C,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC,6EAA6E;IAC7E,MAAM,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AA2DD,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,EAAE,OAAO,GAAE,kBAAuB,GAAG,WAAW,CAwIlG;AAED,eAAO,MAAM,gBAAgB,0vHAsCf,CAAC"}

package/dist/detail-panel.js

@@ -0,0 +1,217 @@
+// One commit, with room to read it.
+//
+// A column beside the graph is the wrong shape for six before-and-after objects, so the full
+// view floats over the page, moved and resized by whoever is reading it.
+//
+// It does not block: the graph keeps updating behind it and stays clickable.
+import { changeRows, handleCopyClick, CHANGE_CSS } from './change-view.js';
+const escape = (text) => text.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);
+const clock = (t) => {
+    const d = new Date(t);
+    const pad = (n, w = 2) => String(n).padStart(w, '0');
+    return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+};
+const VERBS = {
+    write: 'written',
+    ran: 'ran',
+    created: 'made',
+    disposed: 'gone',
+};
+/** So it cannot be resized into a sliver. */
+const MIN_W = 320;
+const MIN_H = 200;
+/**
+ * Pointer capture, for the reason the splitters need it: without it the events stop arriving
+ * when the pointer crosses the graph or an iframe, the release is never seen, and the panel
+ * keeps following the mouse.
+ */
+function draggable(handle, onMove) {
+    handle.addEventListener('pointerdown', (event) => {
+        if (event.button !== 0)
+            return;
+        // Capturing here retargets the following click onto the bar, so the button never hears
+        // it. That is why the close button did nothing.
+        if (event.target.closest('button'))
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        handle.setPointerCapture(event.pointerId);
+        let lastX = event.clientX;
+        let lastY = event.clientY;
+        const move = (e) => {
+            onMove(e.clientX - lastX, e.clientY - lastY);
+            lastX = e.clientX;
+            lastY = e.clientY;
+        };
+        const stop = () => {
+            handle.removeEventListener('pointermove', move);
+            handle.removeEventListener('pointerup', stop);
+            handle.removeEventListener('pointercancel', stop);
+            handle.removeEventListener('lostpointercapture', stop);
+            if (handle.hasPointerCapture(event.pointerId))
+                handle.releasePointerCapture(event.pointerId);
+        };
+        handle.addEventListener('pointermove', move);
+        handle.addEventListener('pointerup', stop);
+        handle.addEventListener('pointercancel', stop);
+        handle.addEventListener('lostpointercapture', stop);
+    });
+}
+export function createDetailPanel(host, options = {}) {
+    const panel = host.ownerDocument.createElement('div');
+    panel.className = 'dp-panel';
+    panel.hidden = true;
+    panel.innerHTML =
+        '<div class="dp-bar"><span class="dp-title"></span>' +
+            '<button type="button" class="dp-close" title="Close" aria-label="Close">✕</button></div>' +
+            '<div class="dp-body"></div>' +
+            '<div class="dp-grip" title="Drag to resize"></div>';
+    host.appendChild(panel);
+    const title = panel.querySelector('.dp-title');
+    const body = panel.querySelector('.dp-body');
+    const bar = panel.querySelector('.dp-bar');
+    const grip = panel.querySelector('.dp-grip');
+    let x = 0;
+    let y = 0;
+    let width = 520;
+    let height = 380;
+    let open = false;
+    const place = () => {
+        panel.style.left = `${Math.round(x)}px`;
+        panel.style.top = `${Math.round(y)}px`;
+        panel.style.width = `${Math.round(width)}px`;
+        panel.style.height = `${Math.round(height)}px`;
+    };
+    draggable(bar, (dx, dy) => {
+        // Clamped, or a panel dragged off the top has no bar left to drag back by.
+        const view = panel.ownerDocument.defaultView;
+        x = Math.max(0, Math.min((view?.innerWidth ?? width) - 60, x + dx));
+        y = Math.max(0, Math.min((view?.innerHeight ?? height) - 30, y + dy));
+        place();
+    });
+    draggable(grip, (dx, dy) => {
+        width = Math.max(MIN_W, width + dx);
+        height = Math.max(MIN_H, height + dy);
+        place();
+    });
+    panel.querySelector('.dp-close')?.addEventListener('click', () => close());
+    body.addEventListener('click', (e) => {
+        // Copy first: the button sits inside a row.
+        if (handleCopyClick(e))
+            return;
+        const row = e.target.closest('.dp-node');
+        if (row?.dataset.id)
+            options.onPick?.(Number(row.dataset.id));
+    });
+    function close() {
+        open = false;
+        panel.hidden = true;
+    }
+    return {
+        open(commit, graph) {
+            const nameOf = (e) => graph.get(e.id)?.label ?? e.label ?? `#${e.id}`;
+            const cause = commit.cause;
+            title.textContent = cause
+                ? `${nameOf(cause)} · ${clock(commit.t)}`
+                : `${commit.commit === 0 ? 'first render' : `commit ${commit.commit}`} · ${clock(commit.t)}`;
+            const headline = cause && cause.from !== undefined && cause.to !== undefined
+                ? `<div class="dp-change"><span class="ch-from">${escape(cause.from)}</span>` +
+                    `<span class="ch-arrow">→</span><span class="ch-to">${escape(cause.to)}</span></div>`
+                : '';
+            // Every event: this view exists because the row could not hold them all.
+            const groups = ['write', 'ran', 'created', 'disposed']
+                .map((kind) => {
+                const rows = commit.events.filter((e) => e.kind === kind && e !== cause);
+                if (!rows.length)
+                    return '';
+                const seen = new Map();
+                for (const event of rows) {
+                    const found = seen.get(event.id);
+                    if (found)
+                        found.count++;
+                    else
+                        seen.set(event.id, { name: nameOf(event), count: 1 });
+                }
+                const items = [...seen]
+                    .map(([id, { name, count }]) => `<button type="button" class="dp-node" data-id="${id}">${escape(name)}${count > 1 ? ` ×${count}` : ''}</button>`)
+                    .join('');
+                return `<div class="dp-group"><div class="dp-verb">${VERBS[kind]}</div><div class="dp-nodes">${items}</div></div>`;
+            })
+                .join('');
+            // Where the value reaches the page — the last step of the chain.
+            const node = cause ? graph.get(cause.id) : undefined;
+            // Both: a template's holes can share one original position, and then only the compiled
+            // line tells them apart.
+            const where = (t) => {
+                if (!t.source)
+                    return '';
+                const file = (t.source.file ?? '').split('/').pop() ?? '';
+                const out = t.source.compiled;
+                const tail = out && out.line !== t.source.line ? ` · out ${out.line}` : '';
+                return ` — ${file}:${t.source.line ?? ''}${tail}`;
+            };
+            const targets = node?.targets?.length
+                ? `<div class="dp-group"><div class="dp-verb">updates</div><div class="dp-targets">${node.targets
+                    .map((t) => `<div>${escape(t.name ? `${t.name} of ${t.element}` : t.element)}` +
+                    `<span class="dp-where">${escape(where(t))}</span></div>`)
+                    .join('')}</div></div>`
+                : '';
+            body.innerHTML = headline + changeRows(cause?.change) + groups + targets;
+            if (!open) {
+                // Once per opening: jumping back to the middle on every entry would be unusable.
+                const view = panel.ownerDocument.defaultView;
+                x = Math.max(12, ((view?.innerWidth ?? 900) - width) / 2);
+                y = Math.max(12, ((view?.innerHeight ?? 600) - height) / 3);
+                place();
+            }
+            open = true;
+            panel.hidden = false;
+        },
+        close,
+        get isOpen() {
+            return open;
+        },
+        destroy() {
+            panel.remove();
+        },
+    };
+}
+export const DETAIL_PANEL_CSS = `
+.dp-panel {
+  position: fixed; z-index: 40; display: flex; flex-direction: column;
+  border: 1px solid var(--fx-line, #ffffff26); border-radius: 8px;
+  background: var(--fx-panel, #14161c); color: var(--fx-label, #e7e9ee);
+  box-shadow: 0 12px 40px rgba(0, 0, 0, .45); overflow: hidden;
+}
+.dp-panel[hidden] { display: none; }
+.dp-bar {
+  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px;
+  cursor: move; user-select: none;
+  border-bottom: 1px solid var(--fx-line, #ffffff1f);
+}
+.dp-title { font-family: ui-monospace, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.dp-close {
+  margin-left: auto; width: 22px; height: 20px; padding: 0; cursor: pointer; font: inherit; font-size: 11px;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;
+  background: transparent; color: var(--fx-muted, #8a90a2);
+}
+.dp-close:hover { color: var(--fx-label, #e7e9ee); }
+.dp-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; }
+.dp-change { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }
+.dp-group { margin-top: 10px; }
+.dp-verb { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--fx-muted, #8a90a2); }
+.dp-nodes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
+.dp-node {
+  padding: 2px 7px; cursor: pointer; font: inherit; font-family: ui-monospace, monospace; font-size: 11px;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 999px;
+  background: transparent; color: var(--fx-label, #e7e9ee);
+}
+.dp-node:hover { border-color: var(--fx-accent, #5eead4); }
+.dp-targets { margin-top: 4px; font-family: ui-monospace, monospace; font-size: 11px; color: var(--fx-label, #e7e9ee); }
+.dp-where { color: var(--fx-muted, #8a90a2); }
+/* Bottom-right, where every desktop puts it. */
+.dp-grip {
+  position: absolute; right: 0; bottom: 0; width: 16px; height: 16px; cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #ffffff40) 50%);
+}
+${CHANGE_CSS}`;