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

package/dist/inspector.mjs

@@ -0,0 +1,676 @@
+// src/instrument.ts
+import {
+  createSignal,
+  createMemo,
+  createEffect,
+  createResource,
+  createRoot,
+  untrack,
+  onCleanup,
+  getOwner,
+  runWithOwner,
+  Signal
+} from "@fluixi/reactive/signal";
+import { createStore } from "@fluixi/reactive/store";
+
+// src/source.ts
+var MARKS = "__FLUIXI_DEVTOOLS_MARKS__";
+var host = globalThis;
+var shared = host[MARKS] ?? {
+  pending: null,
+  expiring: false,
+  components: /* @__PURE__ */ new Map()
+};
+host[MARKS] = shared;
+
+// src/format.ts
+var MAX_DEPTH = 3;
+var MAX_ENTRIES = 8;
+function domName(v) {
+  if (typeof v?.nodeType !== "number" || typeof v.nodeName !== "string") return null;
+  return v.tagName ? `<${v.tagName.toLowerCase()}>` : `#${v.nodeName.toLowerCase()}`;
+}
+function fnName(v) {
+  return v.name ? `ƒ ${v.name}()` : "ƒ";
+}
+function className(v) {
+  const name = v.constructor?.name;
+  return name && name !== "Object" ? `${name} ` : "";
+}
+function primitive(v) {
+  if (v === null) return "null";
+  switch (typeof v) {
+    case "undefined":
+      return "undefined";
+    case "string":
+      return JSON.stringify(v);
+    case "number":
+    case "boolean":
+      return String(v);
+    case "bigint":
+      return `${v}n`;
+    case "symbol":
+      return v.toString();
+    case "function":
+      return fnName(v);
+    default:
+      return null;
+  }
+}
+function walk(value, depth, seen) {
+  const simple = primitive(value);
+  if (simple !== null) return simple;
+  const object = value;
+  if (seen.has(object)) return "[circular]";
+  const dom = domName(object);
+  if (dom) return dom;
+  if (object instanceof Date) return Number.isNaN(object.getTime()) ? "Invalid Date" : object.toISOString();
+  if (object instanceof RegExp) return String(object);
+  if (object instanceof Error) return `${object.name}: ${object.message}`;
+  if (object instanceof Promise) return "Promise";
+  if (ArrayBuffer.isView(object)) {
+    return `${className(object).trim()}(${object.length ?? ""})`;
+  }
+  if (depth >= MAX_DEPTH) return Array.isArray(object) ? "[…]" : "{…}";
+  seen.add(object);
+  try {
+    if (Array.isArray(object)) {
+      const shown2 = object.slice(0, MAX_ENTRIES).map((item) => walk(item, depth + 1, seen));
+      if (object.length > MAX_ENTRIES) shown2.push("…");
+      return `[${shown2.join(", ")}]`;
+    }
+    if (object instanceof Map) {
+      const shown2 = [];
+      for (const [k, v] of object) {
+        if (shown2.length === MAX_ENTRIES) {
+          shown2.push("…");
+          break;
+        }
+        shown2.push(`${walk(k, depth + 1, seen)} => ${walk(v, depth + 1, seen)}`);
+      }
+      return `Map(${object.size}) {${shown2.join(", ")}}`;
+    }
+    if (object instanceof Set) {
+      const shown2 = [];
+      for (const item of object) {
+        if (shown2.length === MAX_ENTRIES) {
+          shown2.push("…");
+          break;
+        }
+        shown2.push(walk(item, depth + 1, seen));
+      }
+      return `Set(${object.size}) {${shown2.join(", ")}}`;
+    }
+    const keys = Object.keys(object);
+    const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
+      let read;
+      try {
+        read = walk(object[key], depth + 1, seen);
+      } catch {
+        read = "[unreadable]";
+      }
+      return `${key}: ${read}`;
+    });
+    if (keys.length > MAX_ENTRIES) shown.push("…");
+    return `${className(object)}{${shown.join(", ")}}`;
+  } finally {
+    seen.delete(object);
+  }
+}
+function formatValue(value, limit = 240) {
+  let text;
+  try {
+    text = walk(value, 0, /* @__PURE__ */ new Set());
+  } catch {
+    text = "[unreadable]";
+  }
+  return text.length > limit ? `${text.slice(0, limit - 1)}…` : text;
+}
+function indentValue(text, pad = "  ") {
+  const out = [];
+  let depth = 0;
+  let quote = null;
+  let line = "";
+  const flush = () => {
+    if (line.trim()) out.push(pad.repeat(depth) + line.trim());
+    line = "";
+  };
+  for (let i = 0; i < text.length; i++) {
+    const c = text[i];
+    if (quote) {
+      line += c;
+      if (c === quote && text[i - 1] !== "\\") quote = null;
+      continue;
+    }
+    if (c === '"' || c === "'") {
+      quote = c;
+      line += c;
+      continue;
+    }
+    if (c === "{" || c === "[") {
+      line += c;
+      flush();
+      depth++;
+      continue;
+    }
+    if (c === "}" || c === "]") {
+      flush();
+      depth = Math.max(0, depth - 1);
+      line = c;
+      continue;
+    }
+    if (c === ",") {
+      line += c;
+      flush();
+      continue;
+    }
+    line += c;
+  }
+  flush();
+  return out.join("\n");
+}
+
+// src/instrument.ts
+var CORE_STATE = { 0: "clean", 1: "check", 2: "dirty" };
+function nodeVersion(n) {
+  return n.core && typeof n.core.version === "number" ? n.core.version : n.runs;
+}
+function nodeState(n) {
+  return n.core && typeof n.core.state === "number" ? CORE_STATE[n.core.state] : void 0;
+}
+
+// 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 pluginRows(node, graph) {
+  const out = [];
+  for (const plugin of plugins) {
+    if (!plugin.rows) continue;
+    try {
+      out.push(...plugin.rows(node, graph));
+    } catch {
+    }
+  }
+  return out;
+}
+function pluginElementRows(extra) {
+  if (!extra) return [];
+  const out = [];
+  for (const plugin of plugins) {
+    if (!plugin.elementRows) continue;
+    try {
+      out.push(...plugin.elementRows(extra));
+    } catch {
+    }
+  }
+  return out;
+}
+
+// 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/float.ts
+var MIN_W = 240;
+var MIN_H = 160;
+function draggable(handle, onMove, onStart) {
+  handle.addEventListener("pointerdown", (event) => {
+    if (event.button !== 0) return;
+    if (event.target.closest("button")) return;
+    event.preventDefault();
+    handle.setPointerCapture(event.pointerId);
+    const fromX = event.clientX;
+    const fromY = event.clientY;
+    onStart?.();
+    const move = (e) => onMove(e.clientX - fromX, e.clientY - fromY);
+    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);
+  });
+}
+var opened = 0;
+function floatCard(doc, title, at2) {
+  const card = doc.createElement("div");
+  card.className = "fx-float";
+  const spot = at2 ?? {
+    x: 60 + opened % 4 * 28,
+    y: 60 + opened % 4 * 28,
+    width: 360,
+    height: 280
+  };
+  opened += 1;
+  const bar = doc.createElement("div");
+  bar.className = "fx-float-bar";
+  const name = doc.createElement("span");
+  name.textContent = title;
+  bar.append(name);
+  card.append(bar);
+  let x = spot.x;
+  let y = spot.y;
+  let w = spot.width;
+  let h = spot.height;
+  const apply = () => {
+    const view = doc.defaultView;
+    const vw = view?.innerWidth ?? w;
+    const vh = view?.innerHeight ?? h;
+    w = Math.min(Math.max(MIN_W, w), vw);
+    h = Math.min(Math.max(MIN_H, h), vh);
+    x = Math.min(Math.max(0, x), Math.max(0, vw - w));
+    y = Math.min(Math.max(0, y), Math.max(0, vh - h));
+    card.style.left = `${x}px`;
+    card.style.top = `${y}px`;
+    card.style.width = `${w}px`;
+    card.style.height = `${h}px`;
+  };
+  let from = { x, y, w, h };
+  const remember = () => {
+    from = { x, y, w, h };
+  };
+  for (const edge of ["n", "s", "e", "w", "ne", "nw", "se", "sw"]) {
+    const handle = doc.createElement("div");
+    handle.className = `fx-float-h fx-float-${edge}`;
+    card.append(handle);
+    draggable(
+      handle,
+      (dx, dy) => {
+        if (edge.includes("e")) w = from.w + dx;
+        if (edge.includes("s")) h = from.h + dy;
+        if (edge.includes("w")) {
+          w = Math.max(MIN_W, from.w - dx);
+          x = from.x + from.w - w;
+        }
+        if (edge.includes("n")) {
+          h = Math.max(MIN_H, from.h - dy);
+          y = from.y + from.h - h;
+        }
+        apply();
+      },
+      remember
+    );
+  }
+  draggable(
+    bar,
+    (dx, dy) => {
+      x = from.x + dx;
+      y = from.y + dy;
+      apply();
+    },
+    remember
+  );
+  apply();
+  return { card, bar, remove: () => card.remove() };
+}
+
+// src/value-pane.ts
+var escape = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+function createValuePane(host2) {
+  const doc = host2.ownerDocument;
+  let built = null;
+  const close = () => {
+    built?.remove();
+    built = null;
+  };
+  const onKey = (event) => {
+    if (event.key === "Escape") close();
+  };
+  doc.addEventListener("keydown", onKey);
+  return {
+    open(title, text) {
+      close();
+      built = floatCard(doc, title, { x: 80, y: 80, width: 420, height: 320 });
+      const shut = doc.createElement("button");
+      shut.type = "button";
+      shut.className = "vp-close";
+      shut.textContent = "✕";
+      shut.title = "Close";
+      shut.addEventListener("click", close);
+      built.bar.append(shut);
+      const body = doc.createElement("pre");
+      body.className = "vp-body";
+      body.innerHTML = escape(indentValue(text));
+      built.card.append(body);
+      doc.body.appendChild(built.card);
+    },
+    close,
+    get isOpen() {
+      return built !== null;
+    },
+    destroy() {
+      doc.removeEventListener("keydown", onKey);
+      close();
+    }
+  };
+}
+var VALUE_PANE_CSS = `
+.vp-close {
+  margin-left: auto; background: none; border: 0; cursor: pointer;
+  color: var(--fx-muted, #8a90a2); font-size: 12px; line-height: 1; padding: 2px 4px;
+}
+.vp-close:hover { color: var(--fx-label, #e7e9ee); }
+.vp-body {
+  flex: 1; margin: 0; padding: 8px; overflow: auto; white-space: pre;
+  font-family: ui-monospace, monospace; font-size: 11.5px; line-height: 1.5;
+  color: var(--fx-label, #e7e9ee);
+}
+`;
+
+// src/inspector.ts
+var escape2 = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var clip = (text, n = 140) => text.length > n ? `${text.slice(0, n - 1)}…` : text;
+var place = (text, source, live) => {
+  if (!source || !live || !source.file) return escape2(text);
+  return `<button type="button" class="ins-at" data-file="${escape2(source.file)}" data-line="${source.line ?? ""}" data-column="${source.column ?? ""}" title="Open ${escape2(source.file)}">${escape2(text)}</button>`;
+};
+var at = (source, root) => source ? `${source.file ? shortenPath(source.file, root) : ""}:${source.line ?? ""}:${source.column ?? ""}` : "";
+var bothAt = (source, root) => {
+  if (!source) return "";
+  const out = source.compiled;
+  const same = out?.line === source.line && out?.column === source.column;
+  return out && !same ? `${at(source, root)} · out ${out.line ?? ""}:${out.column ?? ""}` : at(source, root);
+};
+function authoredPlace(node) {
+  for (const place2 of [node.source, node.declaredAt, node.usedAt]) {
+    if (place2 && !place2.external) return place2;
+  }
+  return node.declaredAt ?? node.source ?? node.usedAt;
+}
+function reaches(graph, id) {
+  const count = /* @__PURE__ */ new Map();
+  const writesHere = (nodes) => nodes.some((n) => n.writes?.includes(id) || writesHere(n.children));
+  for (const node of graph.values()) {
+    if (node.id === id || !node.dom?.length) continue;
+    if (writesHere(node.dom)) count.set(node.label, (count.get(node.label) ?? 0) + 1);
+  }
+  return [...count].map(([label, n]) => n > 1 ? `${label} ×${n}` : label);
+}
+function valueOf(node, limit) {
+  if (node.read) {
+    try {
+      return formatValue(node.read(), limit);
+    } catch {
+    }
+  }
+  return node.detail ?? node.value ?? "";
+}
+function createInspector(host2, options = {}) {
+  const empty = options.empty ?? "click a node to inspect";
+  const limit = options.limit ?? 600;
+  const reveals = typeof options.onReveal === "function";
+  const root = options.root;
+  const edits = typeof options.onEdit === "function";
+  let editing = null;
+  let field = null;
+  let internals = options.internals === true;
+  let pane = null;
+  const doc = host2.ownerDocument;
+  host2.addEventListener("click", (event) => {
+    const cell = event.target?.closest?.("[data-full]");
+    if (!cell) return;
+    pane ??= createValuePane(host2);
+    pane.open(cell.dataset.label || "value", cell.dataset.full || "");
+  });
+  const header = doc.createElement("div");
+  header.className = "ins-header";
+  const bar = doc.createElement("label");
+  bar.className = "ins-bar";
+  const box = doc.createElement("input");
+  box.type = "checkbox";
+  box.checked = internals;
+  bar.append(box, doc.createTextNode("framework"));
+  bar.title = "Also show where the framework created this, not only where it was written";
+  const body = doc.createElement("div");
+  body.className = "ins-body";
+  header.appendChild(bar);
+  host2.replaceChildren(header, body);
+  box.addEventListener("change", () => {
+    internals = box.checked;
+    signature = "";
+  });
+  if (edits) {
+    host2.addEventListener("click", (event) => {
+      const cell = event.target?.closest?.(".ins-edit");
+      if (!cell || editing !== null) return;
+      const id = Number(cell.dataset.id);
+      editing = id;
+      const input = host2.ownerDocument.createElement("input");
+      field = input;
+      input.className = "ins-input";
+      input.value = cell.dataset.raw ?? "";
+      cell.replaceWith(input);
+      input.focus();
+      input.select();
+      const done = (commit) => {
+        if (editing === null) return;
+        editing = null;
+        field = null;
+        signature = "";
+        if (commit) options.onEdit(id, input.value);
+      };
+      input.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") done(true);
+        else if (e.key === "Escape") done(false);
+      });
+      input.addEventListener("blur", () => done(true));
+    });
+  }
+  if (reveals) {
+    host2.addEventListener("click", (event) => {
+      const button = event.target?.closest?.(".ins-at");
+      if (!button) return;
+      const line = Number(button.dataset.line);
+      const column = Number(button.dataset.column);
+      options.onReveal({
+        file: button.dataset.file,
+        ...Number.isFinite(line) && button.dataset.line ? { line } : {},
+        ...Number.isFinite(column) && button.dataset.column ? { column } : {}
+      });
+    });
+  }
+  let signature = "";
+  return {
+    show(graph, id) {
+      const node = id == null ? void 0 : graph.get(id);
+      if (!node) {
+        if (signature === "empty") return;
+        signature = "empty";
+        body.innerHTML = `<span class="ins-empty">${escape2(empty)}</span>`;
+        return;
+      }
+      const labelOf = (other) => graph.get(other)?.label ?? "?";
+      const reads = [...node.deps].map(labelOf);
+      const feeds = [...graph.values()].filter((n) => n.deps.has(node.id) && n.kind !== "binding").map((n) => n.label);
+      const writes = [...node.writes].map(labelOf);
+      const value = valueOf(node, limit);
+      const state = nodeState(node);
+      const synthetic = node.kind === "binding" || node.kind === "setter" || node.kind === "group";
+      const owner = node.createdIn !== void 0 ? graph.get(node.createdIn)?.label : void 0;
+      const reaching = reaches(graph, node.id);
+      const made = [...graph.values()].filter((n) => n.createdIn === node.id).map((n) => n.label);
+      const bound = node.targets?.length ? node.targets.map((t) => {
+        const where = bothAt(t.source, root);
+        const what = escape2(t.name ? `${t.name} of ${t.element}` : t.element);
+        return where ? `${what} (${place(where, t.source, reveals)})` : what;
+      }).join(", ") : node.bindings ? `${node.bindings} dom binding${node.bindings > 1 ? "s" : ""}` : "";
+      const relations = [
+        `<span>↤ reads ${reads.length ? `<b>${escape2(reads.join(", "))}</b>` : "<i>nothing</i>"}</span>`,
+        // `bound` already carries markup for the places a value reaches, so only the
+        // labels are escaped here.
+        `<span>↦ feeds ${feeds.length || bound ? `<b>${[...feeds.map(escape2), bound].filter(Boolean).join(", ")}</b>` : "<i>nothing yet</i>"}</span>`,
+        writes.length ? `<span>✎ writes <b>${escape2(writes.join(", "))}</b></span>` : "",
+        // Where the value is set from code the graph has no node for.
+        node.setAt?.length ? `<span>⌁ set at <b>${node.setAt.map((w) => place(bothAt(w, root), w, reveals)).join(", ")}</b></span>` : "",
+        owner ? `<span>◧ made in <b>${escape2(owner)}</b></span>` : "",
+        reaching.length ? `<span>◨ reaches <b>${escape2(reaching.join(", "))}</b></span>` : "",
+        ...pluginRows(node, graph).map((row) => {
+          const where = row.at && { ...row.at, file: row.at.file ?? node.source?.file };
+          const text = where?.file ? bothAt(where, root) : "";
+          const more = row.value !== void 0 && row.value.length > 140;
+          return `<span${more ? ` class="ins-more" data-full="${escape2(row.value)}" data-label="${escape2(row.label)}"` : ""} title="${escape2(row.value ?? row.label)}">⌘ ${escape2(row.label)}${row.value ? `=<b>${escape2(clip(row.value))}</b>` : ""}${text ? ` ${place(text, where, reveals)}` : ""}</span>`;
+        }),
+        // What the tag was written with. A prop's position has no file of its own: it was
+        // written on the tag, so it belongs to whichever file that is.
+        ...(node.props ?? []).map((p) => {
+          const where = p.at && { ...p.at, file: p.at.file ?? node.source?.file };
+          const at2 = where?.file ? bothAt(where, root) : "";
+          return `<span>⇥ ${escape2(p.name)}=<b>${escape2(clip(p.value ?? "", 60))}</b>${at2 ? ` ${place(at2, where, reveals)}` : ""}</span>`;
+        }),
+        made.length ? `<span>▸ made <b>${escape2(made.join(", "))}</b></span>` : ""
+      ].filter(Boolean).join("");
+      const next = `${node.id}|${node.kind}|${value}|${node.runs}|${state ?? ""}|${relations}|${at(node.source, root)}|${at(node.usedAt, root)}|${bound}`;
+      if (editing !== null && field?.isConnected !== true) {
+        editing = null;
+        field = null;
+      }
+      if (editing !== null) return;
+      if (next === signature) return;
+      signature = next;
+      body.innerHTML = `<div class="ins-head"><span class="ins-kind n-${node.kind}">${node.kind}</span><b>${escape2(node.label)}</b>` + (synthetic ? '<span class="ins-meta">not a node</span></div>' : `<span class="ins-meta">v${nodeVersion(node)} · ${node.runs} runs${state ? ` · ${state}` : ""}</span></div>`) + (edits && node.kind === "state" ? `<div class="ins-val ins-edit" data-id="${node.id}" data-raw="${escape2(value)}" title="Click to set ${escape2(node.label)}">${escape2(clip(value))}</div>` : `<div class="ins-val${value.length > 140 ? " ins-more" : ""}"${value.length > 140 ? ` data-full="${escape2(value)}" data-label="${escape2(node.label)}"` : ""} title="${escape2(value)}">${escape2(clip(value))}</div>`) + `<div class="ins-rel">${relations}</div>` + // Only when the graph carries one. A snapshot from a build that was not marked has
+      // no locations at all, and an empty line there reads as missing data.
+      (node.source ? `<div class="ins-source">${node.source.external ? "📦" : "📍"} ${place(bothAt(node.source, root), node.source, reveals)}</div>` : "") + // A component is created where its tag is written; where it is declared is somewhere
+      // else, and only worth a line when it is.
+      (node.declaredAt && at(node.declaredAt, root) !== at(node.source, root) ? `<div class="ins-source">◧ declared ${place(at(node.declaredAt, root), node.declaredAt, reveals)}</div>` : "") + // A node a package made on the application's behalf: the package's line is where it
+      // was created, and this is the line that asked for it.
+      (node.usedAt ? `<div class="ins-source">↗ used at ${place(bothAt(node.usedAt, root), node.usedAt, reveals)}</div>` : "") + // Nothing said where it came from at all: the compiler did not mark this project and
+      // the stack had nothing to offer either. Saying so beats a card that just sits there.
+      (!node.source && !node.usedAt && !node.declaredAt ? '<div class="ins-source">— no source: build without sourceLocations</div>' : "");
+    },
+    showElement(graph, pick) {
+      if (!pick) {
+        if (signature === "empty") return;
+        signature = "empty";
+        body.innerHTML = `<span class="ins-empty">${escape2(empty)}</span>`;
+        return;
+      }
+      const owner = pick.owner === void 0 ? void 0 : graph.get(pick.owner);
+      const writers = (pick.writes ?? []).map((id) => graph.get(id)).filter((n) => n !== void 0);
+      const bindingAt = (node) => node.targets?.find((t) => t.element === pick.label || t.element.endsWith(` in ${pick.label}`))?.source;
+      const rows = writers.map((node) => {
+        const where = bindingAt(node);
+        const text = where ? bothAt(where, root) : "";
+        return `<span>⌁ <b>${escape2(node.label)}</b>${text ? ` ${place(text, where, reveals)}` : ""}</span>`;
+      }).join("");
+      const relations = [
+        owner ? `<span>◧ rendered by <b>${escape2(owner.label)}</b></span>` : "<span>◧ rendered by <i>nothing in the graph</i></span>",
+        writers.length ? rows : "<span>⌁ <i>nothing writes here</i></span>",
+        ...pluginElementRows(pick.extra).map((row) => {
+          const where = row.at && { ...row.at, file: row.at.file ?? owner?.source?.file };
+          const text = where?.file ? bothAt(where, root) : "";
+          const more = row.value !== void 0 && row.value.length > 140;
+          return `<span${more ? ` class="ins-more" data-full="${escape2(row.value)}" data-label="${escape2(row.label)}"` : ""} title="${escape2(row.value ?? row.label)}">⌘ ${escape2(row.label)}${row.value ? `=<b>${escape2(clip(row.value))}</b>` : ""}${text ? ` ${place(text, where, reveals)}` : ""}</span>`;
+        })
+      ].join("");
+      const source = pick.at ?? (owner && (owner.declaredAt ?? authoredPlace(owner)));
+      const madeIn = internals && owner?.source && owner.source !== source ? owner.source : void 0;
+      const next = `el|${pick.key}|${pick.label}|${relations}|${at(source, root)}|${at(madeIn, root)}`;
+      if (editing !== null && field?.isConnected !== true) {
+        editing = null;
+        field = null;
+      }
+      if (editing !== null) return;
+      if (next === signature) return;
+      signature = next;
+      body.innerHTML = `<div class="ins-head"><span class="ins-kind n-element">element</span><b>${escape2(pick.label)}</b><span class="ins-meta">not a node</span></div><div class="ins-rel">${relations}</div>` + // The tag's own line. An element has no position of its own in the graph — only the
+      // component that rendered it does — so this is as close as the source gets.
+      (source ? `<div class="ins-source">${source.external ? "📦" : "📍"} ${place(bothAt(source, root), source, reveals)}</div>` : "") + (madeIn ? `<div class="ins-source">📦 made in ${place(bothAt(madeIn, root), madeIn, reveals)}</div>` : "");
+    },
+    clear() {
+      signature = "";
+      body.innerHTML = `<span class="ins-empty">${escape2(empty)}</span>`;
+    }
+  };
+}
+var INSPECTOR_CSS = `
+${VALUE_PANE_CSS}
+/* Anything cut to fit says so, and opens the whole of it. */
+.ins-more { cursor: zoom-in; }
+.ins-header{ display: flex; align-items: center; gap: 8px; padding: .3rem .5rem; }
+.ins-body { padding: .5rem; }
+.ins-more:hover { text-decoration: underline dotted; }
+.ins-empty { color: var(--fx-muted, #8a90a2); font-size: 12px; }
+.ins-bar {
+  display: flex; align-items: center; gap: 5px; margin-bottom: 6px;
+  font-size: 10.5px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.ins-bar:hover { color: var(--fx-label, #e7e9ee); }
+.ins-bar input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.ins-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.ins-head b { font-size: 13px; color: var(--fx-label, #e7e9ee); }
+.ins-kind { font-family: ui-monospace, monospace; font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px; }
+${kindRules((k) => `.ins-kind.n-${k}`, "color")}
+.ins-meta { margin-left: auto; color: var(--fx-muted, #8a90a2); font-family: ui-monospace, monospace; font-size: 10.5px; }
+.ins-val { font-family: ui-monospace, monospace; font-size: 12px; color: var(--fx-label, #e7e9ee); word-break: break-word; }
+.ins-rel { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; color: var(--fx-muted, #8a90a2); font-size: 11.5px; }
+.ins-rel b { color: var(--fx-label, #e7e9ee); font-weight: 600; }
+.ins-rel i { font-style: normal; opacity: .6; }
+.ins-edit { cursor: text; border-bottom: 1px dashed var(--fx-line, #262a35); }
+.ins-edit:hover { border-bottom-color: var(--fx-accent, #5eead4); }
+.ins-input {
+  width: 100%; box-sizing: border-box; padding: 1px 4px;
+  font: inherit; font-family: ui-monospace, monospace;
+  color: var(--fx-label, #e7e9ee); background: var(--fx-bg, #0f1115);
+  border: 1px solid var(--fx-accent, #5eead4); border-radius: 3px;
+}
+.ins-at {
+  font: inherit; color: inherit; background: none; border: 0; padding: 0;
+  cursor: pointer; text-decoration: underline; text-decoration-style: dotted;
+  text-underline-offset: 2px;
+}
+.ins-at:hover { color: var(--fx-accent, #5eead4); }
+.ins-at:focus-visible { outline: 1px solid var(--fx-accent, #5eead4); outline-offset: 1px; }
+.ins-source { margin-top: 6px; font-family: ui-monospace, monospace; font-size: 10.5px; color: var(--fx-muted, #8a90a2); }
+`;
+export {
+  INSPECTOR_CSS,
+  createInspector
+};