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

package/dist/graph-view.mjs

@@ -0,0 +1,870 @@
+// src/path.ts
+var normalize = (file) => file.replace(/\\/g, "/");
+var ROOTED = /^\/|^(Users|home|var|opt|private|tmp|mnt|srv)\//;
+var WORKSPACE_DIRS = /* @__PURE__ */ new Set(["packages", "apps", "libs", "examples"]);
+function shortenPath(file, root) {
+  const path = normalize(file);
+  if (root) {
+    const base = normalize(root).replace(/\/+$/, "");
+    if (base && path.startsWith(`${base}/`)) return path.slice(base.length + 1);
+    if (base.startsWith("/") && path.startsWith(`${base.slice(1)}/`)) return path.slice(base.length);
+  }
+  const installed = path.lastIndexOf("node_modules/");
+  if (installed >= 0) return path.slice(installed + "node_modules/".length);
+  if (ROOTED.test(path)) {
+    const segments = path.split("/");
+    for (let i = segments.length - 2; i > 0; i--) {
+      if (WORKSPACE_DIRS.has(segments[i])) return segments.slice(i).join("/");
+    }
+  }
+  return path;
+}
+
+// src/plugin.ts
+var plugins = [];
+function pluginBadge(node) {
+  for (const plugin of plugins) {
+    try {
+      const badge = plugin.badge?.(node);
+      if (badge) return badge;
+    } catch {
+    }
+  }
+  return void 0;
+}
+
+// src/palette.ts
+var KIND_COLOR = {
+  state: "#34d399",
+  memo: "#a78bfa",
+  effect: "#fbbf24",
+  store: "#38bdf8",
+  resource: "#fb7185",
+  component: "#f0abfc",
+  provider: "#fb923c",
+  control: "#22d3ee",
+  router: "#818cf8",
+  handler: "#f472b6",
+  context: "#a3e635",
+  directive: "#5eead4",
+  binding: "#5eead4",
+  setter: "#fb7185",
+  group: "#8a90a2",
+  element: "#8a90a2"
+};
+var kindVar = (kind) => `--fx-kind-${kind}`;
+var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
+var KINDS = Object.keys(KIND_COLOR);
+function kindRules(selector, property) {
+  return KINDS.map((kind) => `${selector(kind)} { ${property}: ${kindColor(kind)}; }`).join("\n");
+}
+
+// src/tree.ts
+function inPageOrder(nodes) {
+  const slots = [];
+  const placed = [];
+  nodes.forEach((node, at) => {
+    if (node.order !== void 0) {
+      slots.push(at);
+      placed.push(node);
+    }
+  });
+  if (placed.length < 2) return nodes;
+  placed.sort((a, b) => a.order - b.order);
+  const out = nodes.slice();
+  slots.forEach((slot, i) => out[slot] = placed[i]);
+  return out;
+}
+var TREE_CSS = `
+.fx-tree-row {
+  display: flex; align-items: center; gap: 4px;
+  padding: 1px 6px 1px calc(6px + var(--depth, 0) * 12px);
+  font-family: ui-monospace, monospace; font-size: 11.5px;
+  color: var(--fx-label, #e7e9ee); cursor: pointer; white-space: nowrap;
+}
+.fx-tree-row:hover { background: var(--fx-hover, #1b1e26); }
+.fx-tree-row.on { background: var(--fx-sel, #232838); }
+.fx-tree-twist {
+  width: 12px; padding: 0; border: 0; background: none; cursor: pointer;
+  color: var(--fx-muted, #8a90a2); font-size: 9px; line-height: 1;
+}
+.fx-tree-plugin {
+  font-size: 9px; color: var(--fx-accent, #5eead4);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px; padding: 0 4px;
+  max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.fx-tree-lazy {
+  font-size: 9px; letter-spacing: .04em; color: var(--fx-router, #7dd3fc);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px; padding: 0 4px;
+}
+.fx-tree-count {
+  font-size: 9.5px; color: var(--fx-muted, #8a90a2);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px; padding: 0 4px;
+}
+${kindRules((k) => `.fx-tree-row.n-${k} .fx-tree-tag`, "color")}
+.fx-tree-bar {
+  display: flex; align-items: center; gap: 5px; padding: 2px 8px 5px;
+  font-size: 10.5px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.fx-tree-bar:hover { color: var(--fx-label, #e7e9ee); }
+.fx-tree-bar input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.fx-tree-row.n-element:hover .fx-tree-tag { color: var(--fx-label, #e7e9ee); }
+/* A declared value is listed inside the tag that made it, so it reads quieter than a tag. */
+.fx-tree-row.is-value .fx-tree-tag { font-style: italic; opacity: .85; }
+.fx-tree-search {
+  width: calc(100% - 16px); margin: 0 8px 4px; padding: 2px 6px;
+  font: inherit; font-size: 10.5px;
+  color: var(--fx-label, #e7e9ee); background: var(--fx-bg, #0f1115);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;
+}
+.fx-tree-search:focus { outline: none; border-color: var(--fx-accent, #5eead4); }
+.fx-tree-empty { display: block; padding: 8px; font-size: 11px; color: var(--fx-muted, #8a90a2); }
+/* A prop reads as what was written on the tag, so it is quieter than the tag itself. */
+/* The row that folds a tag's props away. Dashed, because it stands for something written
+   rather than something rendered. */
+.fx-tree-row.is-props .fx-tree-tag {
+  display: inline-flex; align-items: center; gap: 5px;
+  padding: 0 5px; border: 1px dashed var(--fx-line, #262a35); border-radius: 3px;
+  color: var(--fx-muted, #8a90a2); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
+}
+.fx-tree-row.is-props:hover .fx-tree-tag { border-color: var(--fx-accent, #5eead4); color: var(--fx-label, #e7e9ee); }
+.fx-tree-props-count { opacity: .7; }
+
+/* A prop is what was written on the tag above it, so it reads as an aside: the name in a
+   quiet chip, the value beside it, and no marker pretending it opens. */
+.fx-tree-row.is-prop .fx-tree-tag { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
+.fx-tree-prop-name {
+  flex: none; padding: 0 4px; border-radius: 3px;
+  background: var(--fx-chip, rgba(138, 144, 162, .14));
+  color: var(--fx-muted, #8a90a2); font-size: 10px; letter-spacing: .02em;
+}
+.fx-tree-row.is-prop:hover .fx-tree-prop-name { color: var(--fx-label, #e7e9ee); }
+.fx-tree-prop-value {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--fx-label, #e7e9ee); opacity: .75;
+}
+`;
+
+// src/graph-view.ts
+var SVGNS = "http://www.w3.org/2000/svg";
+var COL = 200;
+var ROW = 92;
+var NW = 132;
+var placeOf = (node) => node.source ?? node.usedAt ?? node.declaredAt;
+var shortSource = (s) => {
+  const file = (s.file ?? "").split("/").pop() ?? "";
+  return s.line == null ? file : `${file}:${s.line}`;
+};
+var VALUE_CHARS = 7;
+var fit = (v) => {
+  const text = v ?? "";
+  return text.length > VALUE_CHARS ? text.slice(0, VALUE_CHARS - 1) + "…" : text;
+};
+var NH = 62;
+var PAD = 48;
+var STEP = 110;
+var FLASH = 560;
+var EDGE_FLASH = 260;
+var MIN_ZOOM = 0.2;
+var OVER_NATURAL = 12;
+var MIN_MAX_ZOOM = 8;
+var ABSOLUTE_MAX_ZOOM = 4e3;
+var DRAG_SLOP = 4;
+var KIND_CLASS = { state: "n-state", memo: "n-memo", effect: "n-effect", store: "n-store", resource: "n-resource", component: "n-component", control: "n-control", router: "n-router", handler: "n-handler", group: "n-group", binding: "n-binding", setter: "n-setter", directive: "n-directive", context: "n-context", provider: "n-provider" };
+var KIND_GLYPH = { state: "◆ state", memo: "ƒ memo", effect: "⚡ effect", store: "▤ store", resource: "⟳ resource", component: "◧ component", control: "⑂ control flow", router: "⤳ router", handler: "⇄ route", group: "▤ framework", binding: "⇥ dom", setter: "✎ sets", directive: "⌘ directive", context: "◈ context", provider: "◈ provider" };
+var GROUP_ID = -1;
+var bindingIds = /* @__PURE__ */ new Map();
+var bindingId = (place) => {
+  const held = bindingIds.get(place);
+  if (held !== void 0) return held;
+  const id = -100 - bindingIds.size;
+  bindingIds.set(place, id);
+  return id;
+};
+var setterId = (owner, index) => -1e5 - owner * 32 - index;
+function el(tag, attrs = {}) {
+  const n = document.createElementNS(SVGNS, tag);
+  for (const k in attrs) n.setAttribute(k, String(attrs[k]));
+  return n;
+}
+function computeDepths(graph, deps) {
+  const memo = /* @__PURE__ */ new Map();
+  const depth = (id, seen) => {
+    if (memo.has(id)) return memo.get(id);
+    if (seen.has(id)) return 0;
+    seen.add(id);
+    const node = graph.get(id);
+    let d = 0;
+    if (node) for (const dep of deps(node)) d = Math.max(d, depth(dep, seen) + 1);
+    seen.delete(id);
+    memo.set(id, d);
+    return d;
+  };
+  for (const node of graph.values()) node.depth = depth(node.id, /* @__PURE__ */ new Set());
+}
+function createGraphView(svg, options = {}) {
+  let signature = "";
+  let selected = null;
+  let focused = null;
+  const nodeEls = /* @__PURE__ */ new Map();
+  const edgeEls = [];
+  const staged = /* @__PURE__ */ new Map();
+  const edgeStaged = /* @__PURE__ */ new Map();
+  const stagedFor = /* @__PURE__ */ new Map();
+  let standIn = (id) => id;
+  const opened = /* @__PURE__ */ new Set();
+  const closed = /* @__PURE__ */ new Set();
+  const foldStores = options.collapseStores !== false;
+  let direction = options.direction ?? "horizontal";
+  let groupExternal = options.groupExternal !== false;
+  let showBindings = options.showBindings === true;
+  let kinds = options.kinds ? new Set(options.kinds) : null;
+  const uid = Math.random().toString(36).slice(2, 8);
+  const labelClip = `fx-label-clip-${uid}`;
+  const valueClip = `fx-value-clip-${uid}`;
+  const LABEL_W = 66;
+  const defs = el("defs");
+  const forLabel = el("clipPath", { id: labelClip });
+  forLabel.appendChild(el("rect", { x: 8, y: 0, width: LABEL_W, height: NH }));
+  const sourceClip = `fx-source-clip-${uid}`;
+  const forSource = el("clipPath", { id: sourceClip });
+  forSource.appendChild(el("rect", { x: 8, y: 0, width: NW - 16, height: NH }));
+  const forValue = el("clipPath", { id: valueClip });
+  forValue.appendChild(el("rect", { x: 8 + LABEL_W + 6, y: 0, width: NW - LABEL_W - 10, height: NH }));
+  defs.append(forLabel, forValue, forSource);
+  const viewport = el("g", { class: "fx-viewport" });
+  let edgeLayer = el("g", { class: "fx-edges" });
+  let nodeLayer = el("g", { class: "fx-nodes" });
+  viewport.append(edgeLayer, nodeLayer);
+  svg.append(defs, viewport);
+  const maxZoom = () => {
+    const box = svg.viewBox?.baseVal;
+    const rect = svg.getBoundingClientRect?.();
+    if (!box?.width || !rect?.width || !rect.height) return MIN_MAX_ZOOM;
+    const natural = Math.max(box.width / rect.width, (box.height || 0) / rect.height);
+    return Math.min(ABSOLUTE_MAX_ZOOM, Math.max(MIN_MAX_ZOOM, natural * OVER_NATURAL));
+  };
+  let scale = 1;
+  let panX = 0;
+  let panY = 0;
+  const applyView = () => viewport.setAttribute("transform", `translate(${panX} ${panY}) scale(${scale})`);
+  const toUserSpace = (clientX, clientY) => {
+    const ctm = svg.getScreenCTM?.();
+    if (!ctm) return { x: 0, y: 0 };
+    const point = Object.assign(svg.createSVGPoint(), { x: clientX, y: clientY }).matrixTransform(ctm.inverse());
+    return { x: point.x, y: point.y };
+  };
+  const zoomAt = (factor, at) => {
+    const next = Math.min(maxZoom(), Math.max(MIN_ZOOM, scale * factor));
+    if (next === scale) return;
+    panX = at.x - (at.x - panX) * next / scale;
+    panY = at.y - (at.y - panY) * next / scale;
+    scale = next;
+    applyView();
+  };
+  svg.addEventListener(
+    "wheel",
+    (event) => {
+      event.preventDefault();
+      zoomAt(Math.exp(-event.deltaY * 15e-4), toUserSpace(event.clientX, event.clientY));
+    },
+    { passive: false }
+  );
+  let dragging = null;
+  svg.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    dragging = { x: event.clientX, y: event.clientY, panX, panY, moved: false };
+  });
+  svg.addEventListener("pointermove", (event) => {
+    if (!dragging) return;
+    const dx = event.clientX - dragging.x;
+    const dy = event.clientY - dragging.y;
+    if (!dragging.moved && Math.abs(dx) + Math.abs(dy) < DRAG_SLOP) return;
+    if (!dragging.moved) svg.setPointerCapture?.(event.pointerId);
+    dragging.moved = true;
+    const ratio = svg.getScreenCTM?.()?.a || 1;
+    panX = dragging.panX + dx / ratio;
+    panY = dragging.panY + dy / ratio;
+    applyView();
+  });
+  const endDrag = (event) => {
+    if (dragging?.moved) svg.releasePointerCapture?.(event.pointerId);
+    setTimeout(() => {
+      dragging = null;
+    }, 0);
+  };
+  svg.addEventListener("pointerup", endDrag);
+  svg.addEventListener("pointercancel", endDrag);
+  svg.addEventListener("dblclick", () => {
+    scale = 1;
+    panX = 0;
+    panY = 0;
+    applyView();
+  });
+  function stageWave(graph, now) {
+    const fresh = [];
+    for (const node of graph.values()) {
+      if (!node.lastPulse || stagedFor.get(node.id) === node.lastPulse) continue;
+      stagedFor.set(node.id, node.lastPulse);
+      if (nodeEls.has(node.id)) fresh.push(node.id);
+    }
+    if (!fresh.length) return;
+    const changed = new Set(fresh);
+    const after = /* @__PURE__ */ new Map();
+    for (const { a, b } of edgeEls) {
+      if (changed.has(a) && changed.has(b)) (after.get(a) ?? after.set(a, []).get(a)).push(b);
+    }
+    const fed = new Set([...after.values()].flat());
+    const step = /* @__PURE__ */ new Map();
+    const queue = fresh.filter((id) => !fed.has(id)).map((id) => ({ id, depth: 0 }));
+    if (!queue.length) for (const id of fresh) queue.push({ id, depth: 0 });
+    while (queue.length) {
+      const { id, depth } = queue.shift();
+      if (step.has(id)) continue;
+      step.set(id, depth);
+      for (const next of after.get(id) ?? []) if (!step.has(next)) queue.push({ id: next, depth: depth + 1 });
+    }
+    for (const id of fresh) staged.set(id, now + (step.get(id) ?? 0) * STEP);
+    for (const { a, b, el: el2 } of edgeEls) {
+      const from = step.get(a);
+      const to = step.get(b);
+      if (from === void 0 || to === void 0 || to <= from) continue;
+      edgeStaged.set(el2, now + from * STEP + STEP * 0.35);
+    }
+  }
+  function applySelected() {
+    for (const [id, { g }] of nodeEls) g.classList.toggle("selected", id === selected);
+  }
+  function related(graph, from) {
+    const feeds = /* @__PURE__ */ new Map();
+    const fedBy = /* @__PURE__ */ new Map();
+    const link = (source, target) => {
+      (feeds.get(source) ?? feeds.set(source, /* @__PURE__ */ new Set()).get(source)).add(target);
+      (fedBy.get(target) ?? fedBy.set(target, /* @__PURE__ */ new Set()).get(target)).add(source);
+    };
+    for (const node2 of graph.values()) {
+      for (const dep of node2.deps) link(dep, node2.id);
+      for (const written of node2.writes) link(node2.id, written);
+    }
+    const out = /* @__PURE__ */ new Set([from]);
+    const walk = (edges) => {
+      const queue = [from];
+      while (queue.length) {
+        for (const next of edges.get(queue.pop()) ?? []) {
+          if (!out.has(next)) {
+            out.add(next);
+            queue.push(next);
+          }
+        }
+      }
+    };
+    walk(feeds);
+    walk(fedBy);
+    const node = graph.get(from);
+    if (node?.createdIn !== void 0) out.add(node.createdIn);
+    for (const other of graph.values()) if (other.createdIn === from) out.add(other.id);
+    return out;
+  }
+  function light(set) {
+    if (!set) {
+      svg.classList.remove("fx-hovering");
+      for (const { g } of nodeEls.values()) g.classList.remove("hot");
+      for (const { el: path } of edgeEls) path.classList.remove("hot");
+      return;
+    }
+    svg.classList.add("fx-hovering");
+    for (const [nodeId, { g }] of nodeEls) g.classList.toggle("hot", set.has(nodeId));
+    for (const { a, b, el: path } of edgeEls) path.classList.toggle("hot", set.has(a) && set.has(b));
+  }
+  function hover(graph, id) {
+    if (id === null) return light(focused);
+    const set = new Set([...related(graph, id)].map(standIn));
+    light(set);
+    nodeEls.get(standIn(id))?.g.classList.add("hot");
+  }
+  function withEdges(graph) {
+    if (!showBindings) return graph;
+    const shown = new Map(graph);
+    let added = false;
+    for (const node of graph.values()) {
+      node.targets?.forEach((target) => {
+        const at = target.source;
+        const place = `${target.name ?? ""}|${target.element}|${at?.file ?? ""}:${at?.line ?? ""}:${at?.column ?? ""}`;
+        const id = bindingId(place);
+        const card = shown.get(id) ?? {
+          id,
+          label: target.name ? `${target.name} of ${target.element}` : target.element,
+          kind: "binding",
+          // The card reads the signal, so the arrow runs the way the value does.
+          deps: /* @__PURE__ */ new Set(),
+          writes: /* @__PURE__ */ new Set(),
+          runs: 0,
+          lastPulse: 0,
+          ...at ? { source: at } : {}
+        };
+        card.deps.add(node.id);
+        card.runs = Math.max(card.runs, node.runs);
+        card.lastPulse = Math.max(card.lastPulse, node.lastPulse);
+        shown.set(id, card);
+        added = true;
+      });
+      node.setAt?.forEach((at, i) => {
+        const id = setterId(node.id, i);
+        shown.set(id, {
+          id,
+          // Two handlers in one component can share an original position; the compiled line
+          // is what separates the cards.
+          label: `set at ${(at.file ?? "").split("/").pop() ?? "?"}:${at.line ?? ""}${at.compiled && at.compiled.line !== at.line ? `→${at.compiled.line}` : ""}`,
+          kind: "setter",
+          deps: /* @__PURE__ */ new Set(),
+          // A handler writes the signal, so it gets the write edge a computation would.
+          writes: /* @__PURE__ */ new Set([node.id]),
+          runs: node.runs,
+          // The write edge runs setter → signal, so the wave starts here.
+          lastPulse: node.lastPulse,
+          source: at
+        });
+        added = true;
+      });
+    }
+    return added ? shown : graph;
+  }
+  const inProject = (at) => !!at?.file && at.external !== true;
+  const machinery = (n) => {
+    if (n.authored !== false) return false;
+    if (n.kind === "state" || n.kind === "memo" || n.kind === "effect" || n.kind === "context") {
+      return true;
+    }
+    if (n.kind === "component" || n.kind === "provider") {
+      return !inProject(n.declaredAt) && !inProject(n.source) && !inProject(n.usedAt);
+    }
+    return false;
+  };
+  const VIEW_CARD = /* @__PURE__ */ new Set(["group", "binding", "setter"]);
+  const kindKey = () => kinds ? [...kinds].sort().join("+") : "*";
+  function onlyKinds(graph) {
+    if (!kinds) return graph;
+    const keep = (n) => VIEW_CARD.has(n.kind) || kinds.has(n.kind);
+    const out = /* @__PURE__ */ new Map();
+    for (const [id, node] of graph) {
+      if (!keep(node)) continue;
+      let owner = node.createdIn;
+      const seen = /* @__PURE__ */ new Set();
+      while (owner !== void 0 && !seen.has(owner)) {
+        seen.add(owner);
+        const up = graph.get(owner);
+        if (up && keep(up)) break;
+        owner = up?.createdIn;
+      }
+      out.set(id, owner === node.createdIn ? node : { ...node, createdIn: owner });
+    }
+    return out;
+  }
+  function grouped(graph) {
+    if (!groupExternal) return graph;
+    const outsiders = [...graph.values()].filter(
+      // A card carries the source of whatever made it, often a package. It already hangs off
+      // its signal and must not be moved under the group.
+      (n) => n.source?.external && n.createdIn === void 0 && n.kind !== "binding" && n.kind !== "setter" || machinery(n)
+    );
+    if (!outsiders.length) return graph;
+    const shown = new Map(graph);
+    shown.set(GROUP_ID, {
+      id: GROUP_ID,
+      label: "framework",
+      kind: "group",
+      deps: /* @__PURE__ */ new Set(),
+      writes: /* @__PURE__ */ new Set(),
+      runs: 0,
+      lastPulse: 0
+    });
+    const moved = new Set(outsiders.map((n) => n.id));
+    for (const node of outsiders) shown.set(node.id, { ...node, createdIn: GROUP_ID });
+    for (const [id, node] of graph) {
+      if (moved.has(id) || node.createdIn === void 0) continue;
+      let owner = node.createdIn;
+      const seen = /* @__PURE__ */ new Set();
+      while (owner !== void 0 && moved.has(owner) && !seen.has(owner)) {
+        seen.add(owner);
+        owner = graph.get(owner)?.createdIn;
+      }
+      if (owner !== node.createdIn) shown.set(id, { ...node, createdIn: owner });
+    }
+    return shown;
+  }
+  function rebuild(graph, folded) {
+    edgeLayer.remove();
+    nodeLayer.remove();
+    nodeEls.clear();
+    edgeEls.length = 0;
+    edgeStaged.clear();
+    edgeLayer = el("g", { class: "fx-edges" });
+    nodeLayer = el("g", { class: "fx-nodes" });
+    standIn = (id) => {
+      let at = id;
+      let outermost = id;
+      const seen = /* @__PURE__ */ new Set();
+      while (at !== void 0 && !seen.has(at)) {
+        seen.add(at);
+        if (folded.has(at) && at !== id) outermost = at;
+        at = graph.get(at)?.createdIn;
+      }
+      return outermost;
+    };
+    const visible = /* @__PURE__ */ new Map();
+    const hiddenCount = /* @__PURE__ */ new Map();
+    for (const node of graph.values()) {
+      const shown = standIn(node.id);
+      if (shown === node.id) visible.set(node.id, node);
+      else hiddenCount.set(shown, (hiddenCount.get(shown) ?? 0) + 1);
+    }
+    const readsOf = (node) => {
+      const out = /* @__PURE__ */ new Set();
+      for (const dep of node.deps) {
+        const from = standIn(dep);
+        if (from !== node.id && visible.has(from)) out.add(from);
+      }
+      if (node.createdIn !== void 0) {
+        const owner = standIn(node.createdIn);
+        if (owner !== node.id && visible.has(owner)) out.add(owner);
+      }
+      return out;
+    };
+    computeDepths(visible, readsOf);
+    const byDepth = /* @__PURE__ */ new Map();
+    let maxDepth = 0;
+    for (const node of visible.values()) {
+      const d = node.depth ?? 0;
+      (byDepth.get(d) ?? byDepth.set(d, []).get(d)).push(node);
+      maxDepth = Math.max(maxDepth, d);
+    }
+    for (const [d, nodes] of byDepth) byDepth.set(d, inPageOrder(nodes));
+    let maxRows = 0;
+    for (const nodes of byDepth.values()) maxRows = Math.max(maxRows, nodes.length);
+    const down = direction === "vertical";
+    const STEP_ACROSS = down ? COL + 24 : ROW;
+    const pos = /* @__PURE__ */ new Map();
+    for (const [d, nodes] of byDepth) {
+      const offset = PAD + (maxRows * STEP_ACROSS - nodes.length * STEP_ACROSS) / 2;
+      nodes.forEach(
+        (node, i) => pos.set(
+          node.id,
+          down ? { x: offset + i * STEP_ACROSS, y: PAD + d * (NH + 46) } : { x: PAD + d * COL, y: offset + i * STEP_ACROSS }
+        )
+      );
+    }
+    const curve = (from, to) => {
+      if (down) {
+        const x12 = from.x + NW / 2;
+        const y12 = from.y + NH;
+        const x22 = to.x + NW / 2;
+        const y22 = to.y;
+        const my = (y12 + y22) / 2;
+        return `M ${x12} ${y12} C ${x12} ${my}, ${x22} ${my}, ${x22} ${y22}`;
+      }
+      const x1 = from.x + NW;
+      const y1 = from.y + NH / 2;
+      const x2 = to.x;
+      const y2 = to.y + NH / 2;
+      const mx = (x1 + x2) / 2;
+      return `M ${x1} ${y1} C ${mx} ${y1}, ${mx} ${y2}, ${x2} ${y2}`;
+    };
+    const addEdge = (a, b, kind, d) => {
+      const path = el("path", { class: kind, d });
+      edgeLayer.appendChild(path);
+      edgeEls.push({ a, b, el: path });
+    };
+    for (const node of visible.values()) {
+      const to = pos.get(node.id);
+      const owner = node.createdIn !== void 0 ? standIn(node.createdIn) : void 0;
+      for (const dep of readsOf(node)) {
+        const from = pos.get(dep);
+        const own = dep === owner && !node.deps.has(dep);
+        addEdge(dep, node.id, own ? "fx-oedge" : "fx-edge", curve(from, to));
+      }
+      for (const w of node.writes) {
+        const target = pos.get(standIn(w));
+        if (target && standIn(w) !== node.id) addEdge(node.id, standIn(w), "fx-wedge", curve(to, target));
+      }
+    }
+    for (const node of visible.values()) {
+      const p = pos.get(node.id);
+      const from = node.source?.external ? " n-external" : "";
+      const g = el("g", { class: `fx-node ${KIND_CLASS[node.kind]}${from}`, transform: `translate(${p.x} ${p.y})`, "data-id": node.id });
+      g.appendChild(el("rect", { class: "fx-box", width: NW, height: NH, rx: 12 }));
+      const kind = el("text", { class: "fx-kind", x: 12, y: 20 });
+      kind.textContent = KIND_GLYPH[node.kind];
+      const label = el("text", { class: "fx-label", x: 12, y: 38 });
+      label.setAttribute("clip-path", `url(#${labelClip})`);
+      label.textContent = node.label;
+      const value = el("text", { class: "fx-value", x: 8 + LABEL_W + 6, y: 38 });
+      value.setAttribute("clip-path", `url(#${valueClip})`);
+      value.textContent = fit(node.value);
+      const full = node.detail ?? node.value;
+      if (full) value.appendChild(el("title")).textContent = full;
+      g.append(kind, label, value);
+      if (node.lazy) {
+        const chunk = el("text", { class: "fx-lazy", x: 12, y: 52 });
+        chunk.textContent = "lazy";
+        chunk.appendChild(el("title")).textContent = "loaded as its own chunk";
+        g.appendChild(chunk);
+      }
+      const mark = pluginBadge(node);
+      if (mark) {
+        const badge = el("text", { class: "fx-plugin", x: NW - 12, y: 52, "text-anchor": "end" });
+        badge.textContent = fit(mark);
+        badge.appendChild(el("title")).textContent = mark;
+        g.appendChild(badge);
+      }
+      const summary = el("title");
+      summary.textContent = `${node.kind} ${node.label}${node.lazy ? " (lazy)" : ""}${full ? ` = ${full}` : ""}${placeOf(node) ? `
+${placeOf(node).file ?? ""}:${placeOf(node).line ?? ""}:${placeOf(node).column ?? ""}` : ""}`;
+      g.appendChild(summary);
+      const source = el("text", { class: "fx-source", x: 12, y: 52 });
+      source.setAttribute("clip-path", `url(#${sourceClip})`);
+      const sourceTitle = el("title");
+      source.appendChild(sourceTitle);
+      g.appendChild(source);
+      const inside = hiddenCount.get(node.id) ?? 0;
+      const owns = inside > 0 || [...graph.values()].some((n) => n.createdIn === node.id);
+      if (owns) {
+        const badge = el("text", { class: "fx-fold", x: NW - 12, y: 20, "text-anchor": "end" });
+        badge.textContent = inside > 0 ? `▸ ${inside}` : "▾";
+        badge.appendChild(el("title")).textContent = inside > 0 ? `show ${inside} inside` : "fold what is inside";
+        badge.addEventListener("click", (event) => {
+          event.stopPropagation();
+          toggleFold(node.id);
+        });
+        g.appendChild(badge);
+      }
+      g.addEventListener("click", () => {
+        if (dragging?.moved) return;
+        selected = node.id;
+        applySelected();
+        options.onSelect?.(node);
+      });
+      g.addEventListener("dblclick", (event) => {
+        if (!options.onReveal) return;
+        event.stopPropagation();
+        options.onReveal(node);
+      });
+      g.addEventListener("mouseenter", () => hover(graph, node.id));
+      g.addEventListener("mouseleave", () => hover(graph, null));
+      g.style.cursor = "pointer";
+      nodeLayer.appendChild(g);
+      nodeEls.set(node.id, { g, value, source, sourceTitle });
+    }
+    viewport.append(edgeLayer, nodeLayer);
+    const width = down ? PAD * 2 + maxRows * STEP_ACROSS + NW : PAD * 2 + maxDepth * COL + NW;
+    const height = down ? PAD * 2 + (maxDepth + 1) * (NH + 46) : PAD * 2 + maxRows * ROW;
+    svg.setAttribute("viewBox", `0 0 ${Math.max(width, 400)} ${Math.max(height, 240)}`);
+    applySelected();
+  }
+  let lastGraph = /* @__PURE__ */ new Map();
+  let lastShown = /* @__PURE__ */ new Map();
+  function foldedIn(graph) {
+    const hasChildren = /* @__PURE__ */ new Set();
+    for (const node of graph.values()) if (node.createdIn !== void 0) hasChildren.add(node.createdIn);
+    const inStore = (id) => {
+      const seen = /* @__PURE__ */ new Set();
+      let at = graph.get(id)?.createdIn;
+      while (at !== void 0 && !seen.has(at)) {
+        seen.add(at);
+        const up = graph.get(at);
+        if (up?.kind === "store") return true;
+        at = up?.createdIn;
+      }
+      return false;
+    };
+    const folded = /* @__PURE__ */ new Set();
+    for (const node of graph.values()) {
+      if (!hasChildren.has(node.id)) continue;
+      const byDefault = (node.kind === "group" || foldStores && (node.kind === "store" || inStore(node.id))) && !opened.has(node.id);
+      if (byDefault || closed.has(node.id)) folded.add(node.id);
+    }
+    return folded;
+  }
+  function toggleFold(id) {
+    const folded = foldedIn(grouped(lastGraph)).has(id);
+    if (folded) {
+      opened.add(id);
+      closed.delete(id);
+    } else {
+      closed.add(id);
+      opened.delete(id);
+    }
+    signature = "";
+    scale = 1;
+    panX = 0;
+    panY = 0;
+    applyView();
+    return !folded;
+  }
+  return {
+    // Date.now, matching what the reactor stamps on a node. See instrument.ts.
+    update(graph, now = Date.now()) {
+      lastGraph = graph;
+      const shown = grouped(withEdges(onlyKinds(graph)));
+      lastShown = shown;
+      const folded = foldedIn(shown);
+      let sig = `${[...folded].sort().join(",")}|${groupExternal}|${direction}|${kindKey()}|`;
+      for (const n of shown.values())
+        sig += `${n.id}:${n.kind}:${[...n.deps].sort().join(",")}>${[...n.writes].sort().join(",")}^${n.createdIn ?? ""};`;
+      if (sig !== signature) {
+        signature = sig;
+        rebuild(shown, folded);
+        if (focused) light(focused);
+      }
+      stageWave(shown, now);
+      for (const node of shown.values()) {
+        const eles = nodeEls.get(node.id);
+        if (!eles) continue;
+        const next = fit(node.value);
+        if (eles.value.textContent !== next) eles.value.textContent = next;
+        const place = placeOf(node);
+        const where = place ? shortSource(place) : "";
+        if (eles.source.textContent !== where) {
+          eles.source.textContent = where;
+          eles.sourceTitle.textContent = place ? `${place.file ? shortenPath(place.file, options.root) : ""}:${place.line ?? ""}:${place.column ?? ""}` : "";
+        }
+        const age = now - (staged.get(node.id) ?? node.lastPulse);
+        eles.g.style.setProperty("--pulse", (age >= 0 && age < FLASH ? 1 - age / FLASH : 0).toFixed(3));
+      }
+      for (const { el: el2 } of edgeEls) {
+        const at = edgeStaged.get(el2);
+        const age = at === void 0 ? Infinity : now - at;
+        el2.style.setProperty("--pulse", (age >= 0 && age < EDGE_FLASH ? 1 - age / EDGE_FLASH : 0).toFixed(3));
+      }
+    },
+    clear() {
+      signature = "";
+      selected = null;
+      focused = null;
+      svg.classList.remove("fx-hovering");
+      edgeLayer.replaceChildren();
+      nodeLayer.replaceChildren();
+      nodeEls.clear();
+      edgeEls.length = 0;
+      staged.clear();
+      stagedFor.clear();
+      edgeStaged.clear();
+      options.onSelect?.(null);
+    },
+    select(id) {
+      selected = id;
+      applySelected();
+    },
+    zoomBy(factor) {
+      const box = svg.viewBox?.baseVal;
+      zoomAt(factor, { x: (box?.width ?? 400) / 2, y: (box?.height ?? 240) / 2 });
+    },
+    resetView() {
+      scale = 1;
+      panX = 0;
+      panY = 0;
+      applyView();
+    },
+    toggle: toggleFold,
+    setGroupExternal(next) {
+      if (groupExternal === next) return;
+      groupExternal = next;
+      signature = "";
+      scale = 1;
+      panX = 0;
+      panY = 0;
+      applyView();
+    },
+    get groupExternal() {
+      return groupExternal;
+    },
+    setShowBindings(next) {
+      if (showBindings === next) return;
+      showBindings = next;
+      signature = "";
+    },
+    get showBindings() {
+      return showBindings;
+    },
+    setKinds(next) {
+      const key = next ? [...next].sort().join("+") : "*";
+      if (key === kindKey()) return;
+      kinds = next ? new Set(next) : null;
+      signature = "";
+    },
+    get kinds() {
+      return kinds;
+    },
+    get shown() {
+      return lastShown;
+    },
+    focus(ids) {
+      focused = ids?.length ? new Set(ids.map(standIn)) : null;
+      light(focused);
+    },
+    setDirection(next) {
+      if (direction === next) return;
+      direction = next;
+      signature = "";
+      scale = 1;
+      panX = 0;
+      panY = 0;
+      applyView();
+    },
+    get direction() {
+      return direction;
+    }
+  };
+}
+var DEVTOOLS_CSS = `
+/* An edge carries a pulse while the change is crossing it, so a propagation reads as one
+   thing moving rather than everything lighting at once. */
+.fx-edge {
+  fill: none;
+  stroke: var(--fx-edge, #38415a);
+  stroke-width: calc(1.6px + var(--pulse, 0) * 1.7px);
+  opacity: calc(.75 + var(--pulse, 0) * .25);
+  filter: drop-shadow(0 0 calc(var(--pulse, 0) * 5px) var(--fx-accent, #5eead4));
+}
+.fx-oedge { fill: none; stroke: var(--fx-own, #64748b); stroke-width: 1.2; stroke-dasharray: 1 4; stroke-linecap: round; opacity: .55; }
+.fx-wedge {
+  fill: none;
+  stroke: var(--fx-write, #fb7185);
+  stroke-width: calc(1.4px + var(--pulse, 0) * 1.6px);
+  stroke-dasharray: 3 4;
+  opacity: calc(.65 + var(--pulse, 0) * .35);
+}
+.fx-node { color: var(--fx-accent, #5eead4); filter: drop-shadow(0 0 calc(var(--pulse,0) * 13px) var(--glow, #5eead4)); }
+${kindRules((k) => `.fx-node.n-${k}`, "--glow")}
+.fx-node.n-group { opacity: .8; }
+.fx-node.n-group .fx-box { stroke-dasharray: 4 3; }
+/* Neither is a node: dashed and dimmer, so the reactive shape reads first. */
+.fx-node.n-binding { opacity: .72; }
+.fx-node.n-setter { opacity: .72; }
+.fx-node.n-binding .fx-box, .fx-node.n-setter .fx-box { stroke-dasharray: 3 3; }
+.fx-node.n-external { opacity: .55; }
+.fx-node.n-external .fx-box { stroke-dasharray: 3 2; }
+.fx-box { fill: var(--fx-node-bg, #131722); stroke: var(--glow, #5eead4); stroke-width: 1.4; stroke-opacity: calc(.5 + var(--pulse,0) * .5); }
+.fx-node.selected .fx-box { fill: var(--fx-node-bg-selected, #1a2230); stroke-width: 2.4; }
+.fx-kind { fill: var(--glow, #5eead4); font-family: ui-monospace, monospace; font-size: 9.5px; opacity: .85; }
+.fx-label { fill: var(--fx-label, #e7e9ee); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 13px; font-weight: 600; }
+.fx-value { fill: var(--fx-muted, #8a90a2); font-family: ui-monospace, monospace; font-size: 12px; }
+.fx-source { fill: var(--fx-muted, #8a90a2); font-family: ui-monospace, monospace; font-size: 9.5px; opacity: .75; }
+.fx-plugin { fill: var(--fx-accent, #5eead4); font-family: ui-monospace, monospace; font-size: 9px; opacity: .9; }
+.fx-lazy { fill: var(--fx-router, #7dd3fc); font-family: ui-monospace, monospace; font-size: 9px; letter-spacing: .04em; opacity: .9; }
+.fx-fold { fill: var(--glow, #5eead4); font-family: ui-monospace, monospace; font-size: 10px; cursor: pointer; opacity: .8; }
+.fx-fold:hover { opacity: 1; }
+.fx-node.n-effect .fx-value { fill: var(--effect, #fbbf24); }
+.fx-node.n-resource .fx-value { fill: var(--fx-write, #fb7185); }
+/* Hovering one node is a question about that node: everything it cannot reach steps back. */
+.fx-hovering .fx-node { opacity: .2; transition: opacity .12s ease; }
+.fx-hovering .fx-node.hot { opacity: 1; }
+.fx-hovering .fx-node.n-external.hot { opacity: .7; }
+.fx-hovering .fx-edge, .fx-hovering .fx-oedge, .fx-hovering .fx-wedge { opacity: .08; }
+.fx-hovering .fx-edge.hot { opacity: 1; stroke: var(--fx-accent, #5eead4); }
+.fx-hovering .fx-oedge.hot { opacity: .8; }
+.fx-hovering .fx-wedge.hot { opacity: .9; }
+`;
+export {
+  DEVTOOLS_CSS,
+  createGraphView
+};