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

package/dist/index.mjs

@@ -0,0 +1,4544 @@
+/*! @fluixi/devtools v0.2.0-alpha.4 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+
+// 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 MARKER = "__fx_source";
+var COMPONENT_MARKER = "__fx_component";
+var HOLE_MARKER = "__fx_hole";
+var PROPS_MARKER = "__fx_props";
+var MARKS = "__FLUIXI_DEVTOOLS_MARKS__";
+var host = globalThis;
+var shared = host[MARKS] ?? {
+  pending: null,
+  expiring: false,
+  components: /* @__PURE__ */ new Map()
+};
+host[MARKS] = shared;
+function markReactiveSource(file, line, column, name) {
+  const location2 = locate(file, line, column);
+  if (shared.pending && location2.external && !shared.pending.location?.external) return;
+  shared.pending = { name, location: location2 };
+  shared.expiring = false;
+}
+function locate(file, line, column) {
+  const external = !!file && (/^([a-zA-Z]:)?[\\/]/.test(file) || file.includes("node_modules/"));
+  return external ? { file, line, column, external } : { file, line, column };
+}
+function markComponentSource(name, file, line, column) {
+  const seen = shared.components.get(name);
+  const next = locate(file, line, column);
+  if (seen === void 0) {
+    shared.components.set(name, next);
+    return;
+  }
+  if (!seen || seen.file !== file || seen.line !== line) shared.components.set(name, null);
+}
+function componentSource(name) {
+  return shared.components.get(name) ?? void 0;
+}
+function takeReactiveSource() {
+  const mark = shared.pending;
+  if (mark) {
+    if (mark.name !== void 0) shared.pending = { location: mark.location };
+    if (!shared.expiring) {
+      shared.expiring = true;
+      queueMicrotask(() => {
+        shared.expiring = false;
+        shared.pending = null;
+      });
+    }
+  }
+  return mark;
+}
+var HOLES = /* @__PURE__ */ new WeakMap();
+var HOLE_TAG = "__fx_at";
+function markHole(accessor, line, column, name) {
+  if (accessor && (typeof accessor === "object" || typeof accessor === "function")) {
+    const at3 = name === void 0 ? { line, column } : { line, column, name };
+    HOLES.set(accessor, at3);
+    try {
+      Object.defineProperty(accessor, HOLE_TAG, { value: at3, configurable: true });
+    } catch {
+    }
+  }
+  shared.pending = null;
+  return accessor;
+}
+var PROPS = /* @__PURE__ */ new WeakMap();
+function markProps(props, at3) {
+  if (props && typeof props === "object") PROPS.set(props, at3);
+  return props;
+}
+function propsLocations(props) {
+  return props && typeof props === "object" ? PROPS.get(props) : void 0;
+}
+function holeLocation(accessor) {
+  if (!accessor || typeof accessor !== "object" && typeof accessor !== "function") return void 0;
+  return HOLES.get(accessor) ?? accessor[HOLE_TAG];
+}
+function installSourceMarker() {
+  if (typeof host[MARKER] !== "function") host[MARKER] = markReactiveSource;
+  if (typeof host[COMPONENT_MARKER] !== "function") host[COMPONENT_MARKER] = markComponentSource;
+  if (typeof host[HOLE_MARKER] !== "function") host[HOLE_MARKER] = markHole;
+  if (typeof host[PROPS_MARKER] !== "function") host[PROPS_MARKER] = markProps;
+}
+
+// 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 shorten(text, limit = 18) {
+  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 $NODE = /* @__PURE__ */ Symbol.for("signal-node");
+var KIND_OF_BUILTIN = {
+  Show: "control",
+  For: "control",
+  Index: "control",
+  Switch: "control",
+  Match: "control",
+  Portal: "control",
+  Dynamic: "control",
+  ErrorBoundary: "control",
+  Suspense: "control",
+  SuspenseList: "control",
+  Await: "control",
+  Router: "router",
+  Outlet: "router",
+  Redirect: "router",
+  Link: "router"
+};
+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;
+}
+function createReactor() {
+  installSourceMarker();
+  const graph = /* @__PURE__ */ new Map();
+  const runsAtLastSample = /* @__PURE__ */ new Map();
+  const unnamed = /* @__PURE__ */ new Set();
+  const consumerStack = [];
+  let seq = 0;
+  let dispose = () => {
+  };
+  let rootOwner = null;
+  const claims = (node, value) => {
+    for (const dep of node.deps) {
+      const other = graph.get(dep);
+      if (other?.read && other.read() === value) return false;
+    }
+    return true;
+  };
+  const forget = (id) => {
+    const owner = getOwner() ?? rootOwner;
+    if (owner) {
+      runWithOwner(
+        owner,
+        () => onCleanup(() => {
+          graph.delete(id);
+          runsAtLastSample.delete(id);
+          unnamed.delete(id);
+        })
+      );
+    }
+  };
+  const recordRead = (sourceId) => {
+    const c = consumerStack[consumerStack.length - 1];
+    if (c != null) graph.get(c)?.deps.add(sourceId);
+  };
+  const recordWrite = (targetId) => {
+    const c = consumerStack[consumerStack.length - 1];
+    if (c != null && c !== targetId) graph.get(c)?.writes.add(targetId);
+  };
+  const base = (id, named, kind, fallback2) => {
+    const mark = takeReactiveSource();
+    if (!named && !mark?.name) unnamed.add(id);
+    return {
+      id,
+      label: named ?? mark?.name ?? fallback2,
+      kind,
+      deps: /* @__PURE__ */ new Set(),
+      writes: /* @__PURE__ */ new Set(),
+      runs: 0,
+      lastPulse: 0,
+      ...mark?.location ? { source: mark.location } : {}
+    };
+  };
+  const trackedCreateSignal = (value, options) => {
+    const id = seq++;
+    const [get, set] = createSignal(value, options);
+    const node = base(id, options?.name, "state", `s${id}`);
+    node.read = () => untrack(get);
+    node.detail = formatValue(value);
+    node.value = shorten(node.detail);
+    node.core = get[$NODE] ?? null;
+    graph.set(id, node);
+    forget(id);
+    const read = () => {
+      recordRead(id);
+      return get();
+    };
+    const write = (v) => {
+      recordWrite(id);
+      return set(typeof v === "function" ? v(untrack(get)) : v);
+    };
+    return [read, write];
+  };
+  const trackedCreateMemo = (fn, value, options) => {
+    const id = seq++;
+    const node = base(id, options?.name, "memo", `m${id}`);
+    graph.set(id, node);
+    forget(id);
+    const m = createMemo(() => {
+      node.core ??= Signal.subtle.currentComputed();
+      node.deps.clear();
+      node.writes.clear();
+      node.runs++;
+      consumerStack.push(id);
+      try {
+        return fn();
+      } finally {
+        consumerStack.pop();
+      }
+    }, value, options);
+    node.read = () => untrack(m);
+    return () => {
+      recordRead(id);
+      return m();
+    };
+  };
+  const trackedCreateEffect = (fn, options) => {
+    const id = seq++;
+    const node = base(id, options?.name, "effect", `e${id}`);
+    graph.set(id, node);
+    forget(id);
+    createEffect(() => {
+      node.core ??= Signal.subtle.currentComputed();
+      node.deps.clear();
+      node.writes.clear();
+      node.runs++;
+      node.lastPulse = performance.now();
+      consumerStack.push(id);
+      try {
+        fn();
+      } finally {
+        consumerStack.pop();
+      }
+    });
+  };
+  const trackedCreateStore = (initial, options) => {
+    const id = seq++;
+    const [proxy, setter] = createStore(initial, { immutable: true, ...options });
+    const node = base(id, options?.name, "store", `store${id}`);
+    node.read = () => {
+      try {
+        return untrack(() => JSON.stringify(proxy));
+      } catch {
+        return "{…}";
+      }
+    };
+    node.value = "{…}";
+    graph.set(id, node);
+    forget(id);
+    const recording = new Proxy(proxy, {
+      get(t, p, r) {
+        recordRead(id);
+        return Reflect.get(t, p, r);
+      }
+    });
+    const write = (...args) => {
+      recordWrite(id);
+      return setter(...args);
+    };
+    return [recording, write];
+  };
+  const trackedCreateResource = (...args) => {
+    const id = seq++;
+    const last = args[args.length - 1];
+    const name = last && typeof last === "object" && !Array.isArray(last) && typeof last !== "function" ? last.name : void 0;
+    const node = base(id, name, "resource", `res${id}`);
+    const [data, actions] = createResource(...args);
+    node.read = () => {
+      try {
+        return untrack(() => data.loading ? "⏳ loading" : JSON.stringify(data.latest));
+      } catch {
+        return "?";
+      }
+    };
+    node.value = "⏳ loading";
+    graph.set(id, node);
+    forget(id);
+    const accessor = (() => {
+      recordRead(id);
+      return data();
+    });
+    for (const k of ["loading", "error", "latest", "state"]) {
+      Object.defineProperty(accessor, k, { get: () => data[k] });
+    }
+    return [accessor, actions];
+  };
+  const trackedSignal = (value, options) => {
+    const [read, write] = trackedCreateSignal(value, options);
+    Object.defineProperty(read, "set", { value: write });
+    return read;
+  };
+  const trackedMemo = trackedCreateMemo;
+  const trackedEffect = trackedCreateEffect;
+  const trackedStore = (initial, options) => {
+    const [state, set] = trackedCreateStore(initial, options);
+    return new Proxy(state, {
+      get: (target, key) => key === "set" ? set : target[key],
+      has: (target, key) => key === "set" || Reflect.has(target, key)
+    });
+  };
+  const trackedResource = (...args) => {
+    const [accessor, controls] = trackedCreateResource(...args);
+    return Object.assign(accessor, controls);
+  };
+  const api = {
+    createSignal: trackedCreateSignal,
+    createMemo: trackedCreateMemo,
+    createEffect: trackedCreateEffect,
+    createStore: trackedCreateStore,
+    createResource: trackedCreateResource,
+    signal: trackedSignal,
+    memo: trackedMemo,
+    store: trackedStore,
+    effect: trackedEffect,
+    resource: trackedResource
+  };
+  return {
+    graph,
+    run(setup) {
+      dispose();
+      graph.clear();
+      runsAtLastSample.clear();
+      unnamed.clear();
+      seq = 0;
+      consumerStack.length = 0;
+      createRoot((d) => {
+        dispose = d;
+        rootOwner = getOwner();
+        setup(api);
+      });
+    },
+    sample() {
+      const changed = [];
+      const now = Date.now();
+      for (const node of graph.values()) {
+        if (!node.read) {
+          const seen = runsAtLastSample.get(node.id);
+          if (seen !== void 0 && node.runs > seen) {
+            node.lastPulse = now;
+            changed.push(node.id);
+          }
+          runsAtLastSample.set(node.id, node.runs);
+          continue;
+        }
+        const raw = node.read();
+        const stamped = raw?.$name;
+        if (node.kind === "memo" && typeof stamped === "string" && stamped && claims(node, raw)) {
+          node.kind = KIND_OF_BUILTIN[stamped] ?? "component";
+          node.declaredAt = componentSource(stamped);
+          node.source ??= node.declaredAt;
+          if (unnamed.has(node.id)) {
+            node.label = stamped;
+            unnamed.delete(node.id);
+          }
+        }
+        const detail2 = formatValue(raw);
+        const next = shorten(detail2);
+        if (next !== node.value || detail2 !== node.detail) {
+          node.detail = detail2;
+          node.value = next;
+          node.runs++;
+          node.lastPulse = now;
+          changed.push(node.id);
+        }
+        runsAtLastSample.set(node.id, node.runs);
+      }
+      return changed;
+    },
+    dispose() {
+      dispose();
+      dispose = () => {
+      };
+    }
+  };
+}
+
+// src/observe.ts
+import {
+  observeReactiveNodes,
+  untrack as untrack2
+} from "@fluixi/reactive/signal";
+
+// src/callsite.ts
+var EXTENSION = ["chrome-extension://", "moz-extension://", "safari-web-extension://", "extension://"];
+var INTERNAL = [
+  "/packages/reactive/",
+  "/packages/dom/",
+  "/packages/core/",
+  "/packages/devtools/",
+  "/@fluixi/",
+  "node_modules",
+  "fluixi-devtools",
+  ...EXTENSION
+];
+var REPORTING = [
+  "/packages/reactive/src/lib/signal/graph/",
+  "/packages/devtools/",
+  "fluixi-devtools",
+  // Not a fallback either: naming the agent as where a node came from is worse than nothing.
+  ...EXTENSION
+];
+var FRAME = /(?:at\s+(?:[^(]*\()?)([^()\s]+):(\d+):(\d+)\)?$/;
+var isInternal = (frame) => INTERNAL.some((part) => frame.includes(part));
+function locate2(frame, origin) {
+  const match = FRAME.exec(frame);
+  if (!match) return void 0;
+  let file = match[1];
+  if (origin && file.startsWith(origin)) file = file.slice(origin.length);
+  file = file.replace(/^\/@fs\//, "/").replace(/\?.*$/, "").replace(/^\//, "");
+  return file ? { file, line: Number(match[2]), column: Number(match[3]) } : void 0;
+}
+function callSite(stack, origin) {
+  if (!stack) return void 0;
+  let fallback2;
+  for (const line of stack.split("\n")) {
+    const frame = line.trim();
+    if (!frame.startsWith("at ")) continue;
+    if (!isInternal(frame)) {
+      const location2 = locate2(frame, origin);
+      if (location2) return { location: location2, external: false };
+      continue;
+    }
+    if (!fallback2 && !REPORTING.some((part) => frame.includes(part))) fallback2 = locate2(frame, origin);
+  }
+  return fallback2 ? { location: { ...fallback2, external: true }, external: true } : void 0;
+}
+function currentCallSite(origin) {
+  return callSite(new Error().stack, origin);
+}
+
+// src/history.ts
+var OFF = {
+  wrote() {
+  },
+  ran() {
+  },
+  created() {
+  },
+  disposed() {
+  },
+  take: () => [],
+  dropped: 0,
+  clear() {
+  }
+};
+function createHistory(limit) {
+  if (limit <= 0) return OFF;
+  let events = [];
+  let seq = 0;
+  let commit = 0;
+  let dropped = 0;
+  const push = (event) => {
+    events.push({ ...event, seq: seq++, t: Date.now(), commit });
+    if (events.length > limit) {
+      dropped += events.length - limit;
+      events = events.slice(-limit);
+    }
+  };
+  return {
+    wrote(id, by, detail2) {
+      if (by === void 0) commit++;
+      push({ kind: "write", id, by, ...detail2 });
+    },
+    ran(id, by) {
+      push({ kind: "ran", id, by });
+    },
+    created(id, by, label) {
+      push({ kind: "created", id, by, label });
+    },
+    disposed(id, label) {
+      push({ kind: "disposed", id, label });
+    },
+    take() {
+      const taken = events;
+      events = [];
+      return taken;
+    },
+    get dropped() {
+      return dropped;
+    },
+    clear() {
+      events = [];
+      dropped = 0;
+    }
+  };
+}
+function toCommits(events) {
+  const byNumber = /* @__PURE__ */ new Map();
+  for (const event of events) {
+    const bucket = byNumber.get(event.commit);
+    if (bucket) bucket.push(event);
+    else byNumber.set(event.commit, [event]);
+  }
+  return [...byNumber.entries()].sort((a, b) => a[0] - b[0]).map(([commit, group]) => ({
+    commit,
+    t: group[0].t,
+    events: group,
+    cause: group.find((e) => e.kind === "write" && e.by === void 0)
+  }));
+}
+
+// src/diff.ts
+var MAX_ENTRIES2 = 24;
+var ENTRY_VALUE = 120;
+var ENTRY_JSON = 4e3;
+var show = (value) => formatValue(value, ENTRY_VALUE);
+function json(value) {
+  if (value === null || typeof value !== "object") return void 0;
+  try {
+    const text = JSON.stringify(value);
+    return text && text.length <= ENTRY_JSON ? text : void 0;
+  } catch {
+    return void 0;
+  }
+}
+var side = (value, key) => {
+  const text = json(value);
+  return { [key]: show(value), ...text ? { [`${key}Json`]: text } : {} };
+};
+var isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+function same(a, b) {
+  if (Object.is(a, b)) return true;
+  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+  const ka = Object.keys(a);
+  const kb = Object.keys(b);
+  if (ka.length !== kb.length) return false;
+  return ka.every((k) => Object.is(a[k], b[k]));
+}
+function diffArray(before, after) {
+  let head = 0;
+  while (head < before.length && head < after.length && same(before[head], after[head])) head++;
+  let tail = 0;
+  while (tail < before.length - head && tail < after.length - head && same(before[before.length - 1 - tail], after[after.length - 1 - tail])) {
+    tail++;
+  }
+  const entries = [];
+  let skipped = 0;
+  const push = (entry) => {
+    if (entries.length < MAX_ENTRIES2) entries.push(entry);
+    else skipped++;
+  };
+  const removedCount = before.length - head - tail;
+  const addedCount = after.length - head - tail;
+  const overlap = Math.min(removedCount, addedCount);
+  for (let i = 0; i < overlap; i++) {
+    push({
+      key: String(head + i),
+      op: "changed",
+      ...side(before[head + i], "from"),
+      ...side(after[head + i], "to")
+    });
+  }
+  for (let i = overlap; i < addedCount; i++) {
+    push({ key: String(head + i), op: "added", ...side(after[head + i], "to") });
+  }
+  for (let i = overlap; i < removedCount; i++) {
+    push({ key: String(head + i), op: "removed", ...side(before[head + i], "from") });
+  }
+  return {
+    shape: "array",
+    entries,
+    ...skipped ? { more: skipped } : {},
+    ...before.length !== after.length ? { length: { from: before.length, to: after.length } } : {}
+  };
+}
+function diffObject(before, after) {
+  const entries = [];
+  let skipped = 0;
+  const push = (entry) => {
+    if (entries.length < MAX_ENTRIES2) entries.push(entry);
+    else skipped++;
+  };
+  for (const key of /* @__PURE__ */ new Set([...Object.keys(before), ...Object.keys(after)])) {
+    const had = key in before;
+    const has = key in after;
+    if (had && has) {
+      if (!same(before[key], after[key])) {
+        push({ key, op: "changed", ...side(before[key], "from"), ...side(after[key], "to") });
+      }
+    } else if (has) push({ key, op: "added", ...side(after[key], "to") });
+    else push({ key, op: "removed", ...side(before[key], "from") });
+  }
+  return { shape: "object", entries, ...skipped ? { more: skipped } : {} };
+}
+function diffValues(before, after) {
+  if (Array.isArray(before) && Array.isArray(after)) {
+    const change2 = diffArray(before, after);
+    return change2.entries?.length || change2.length ? change2 : void 0;
+  }
+  if (isPlainObject(before) && isPlainObject(after)) {
+    const change2 = diffObject(before, after);
+    return change2.entries?.length ? change2 : void 0;
+  }
+  return void 0;
+}
+
+// src/describe.ts
+var MAX_CLASSES = 2;
+function textOwner(node) {
+  const parent = node.parentElement;
+  return parent ? `text in ${describeElement(parent)}` : "text";
+}
+function describeElement(el2) {
+  const tag = el2.tagName.toLowerCase();
+  const id = el2.id ? `#${el2.id}` : "";
+  const raw = typeof el2.className === "string" ? el2.className : el2.getAttribute("class") ?? "";
+  const classes = raw.split(/\s+/).filter(Boolean).slice(0, MAX_CLASSES).map((c) => `.${c}`).join("");
+  return `${tag}${id}${classes}`;
+}
+function describeNode(target) {
+  const node = target;
+  if (!node || typeof node.nodeType !== "number") return "detached";
+  switch (node.nodeType) {
+    case 1:
+      return describeElement(node);
+    case 3:
+      return textOwner(node);
+    case 8: {
+      const parent = node.parentElement;
+      return parent ? `slot in ${describeElement(parent)}` : "slot";
+    }
+    case 11:
+      return "fragment";
+    default:
+      return node.nodeName?.toLowerCase() ?? "node";
+  }
+}
+
+// src/dom.ts
+var LOC_TAG = "__fx_loc";
+function locationOf(element) {
+  return element[LOC_TAG];
+}
+var DOM_BUDGET = 200;
+function describeElement2(element) {
+  let out = element.tagName.toLowerCase();
+  if (element.id) out += `#${element.id}`;
+  const classes = element.classList;
+  if (classes.length > 0) {
+    out += `.${classes[0]}`;
+    if (classes.length > 1) out += `.${classes[1]}`;
+  }
+  return out;
+}
+function describeAll(graph, roots, writtenBy, kinds, extraFor) {
+  const owners = /* @__PURE__ */ new Map();
+  const writers = /* @__PURE__ */ new Map();
+  const rendered = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    if (kinds.has(node.kind)) {
+      const found = roots(node.id);
+      rendered.set(node.id, found);
+      for (const element of found) if (!owners.has(element)) owners.set(element, node.id);
+      continue;
+    }
+    for (const element of writtenBy(node.id)) {
+      const held = writers.get(element);
+      if (held) held.push(node.id);
+      else writers.set(element, [node.id]);
+    }
+  }
+  const { claimed, containers } = claimOrphans(graph, rendered, writtenBy, kinds, owners);
+  const claims = /* @__PURE__ */ new Map();
+  for (const [element, id] of claimed) {
+    const held = claims.get(id);
+    if (held) held.push(element);
+    else claims.set(id, [element]);
+  }
+  const landing = landings(graph, rendered, writtenBy, kinds, claimed, containers);
+  const out = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    if (!kinds.has(node.kind)) continue;
+    const budget = { left: DOM_BUDGET };
+    const walk2 = (element) => {
+      const owner = owners.get(element) ?? claimed.get(element);
+      const where = locationOf(element);
+      if (owner !== void 0 && owner !== node.id) {
+        return { label: describeElement2(element), children: [], owner, element, ...where ? { at: where } : {} };
+      }
+      if (containers.has(element)) {
+        return { label: describeElement2(element), children: [], container: true, element, ...where ? { at: where } : {} };
+      }
+      const children = [];
+      const kids = element.children;
+      for (let i = 0, n = kids.length; i < n && budget.left > 0; i++) {
+        budget.left -= 1;
+        children.push(walk2(kids[i]));
+      }
+      const writes = writers.get(element);
+      const extra = extraFor?.(element);
+      const inside = landing.get(element)?.filter((id) => within(graph, id, node.id));
+      return {
+        label: describeElement2(element),
+        children,
+        element,
+        ...where ? { at: where } : {},
+        ...writes?.length ? { writes } : {},
+        ...inside?.length ? { inside } : {},
+        ...extra ? { extra } : {}
+      };
+    };
+    out.set(node.id, [...rendered.get(node.id) ?? [], ...claims.get(node.id) ?? []].map(walk2));
+  }
+  return out;
+}
+function within(graph, id, ancestor) {
+  const seen = /* @__PURE__ */ new Set();
+  for (let at3 = graph.get(id)?.createdIn; at3 !== void 0 && !seen.has(at3); at3 = graph.get(at3)?.createdIn) {
+    if (at3 === ancestor) return true;
+    seen.add(at3);
+  }
+  return false;
+}
+function landings(graph, rendered, writtenBy, kinds, claimed, containers) {
+  const claimers = new Set(claimed.values());
+  const landing = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    if (!kinds.has(node.kind) || (rendered.get(node.id) ?? []).length) continue;
+    if (claimers.has(node.id)) continue;
+    let shallowest;
+    let best = Infinity;
+    for (const element of writtenBy(node.id)) {
+      if (containers.has(element)) continue;
+      const depth = depthInDocument(element);
+      if (depth < best) {
+        best = depth;
+        shallowest = element;
+      }
+    }
+    if (!shallowest) continue;
+    const held = landing.get(shallowest);
+    if (held) held.push(node.id);
+    else landing.set(shallowest, [node.id]);
+  }
+  for (const [element, ids] of landing) {
+    landing.set(element, ids.filter((id) => !ids.some((other) => other !== id && within(graph, id, other))));
+  }
+  return landing;
+}
+function tagDepths(graph, kinds) {
+  const depth = /* @__PURE__ */ new Map();
+  const of = (id, seen) => {
+    const held = depth.get(id);
+    if (held !== void 0) return held;
+    if (seen.has(id)) return 0;
+    seen.add(id);
+    const parent = graph.get(id)?.createdIn;
+    const value = parent === void 0 ? 0 : of(parent, seen) + 1;
+    depth.set(id, value);
+    return value;
+  };
+  for (const node of graph.values()) if (kinds.has(node.kind)) of(node.id, /* @__PURE__ */ new Set());
+  return depth;
+}
+function depthInDocument(element) {
+  let steps = 0;
+  for (let at3 = element.parentElement; at3; at3 = at3.parentElement) steps++;
+  return steps;
+}
+function claimOrphans(graph, rendered, writtenBy, kinds, owners) {
+  const depth = tagDepths(graph, kinds);
+  const wraps = (element) => {
+    for (const owned of owners.keys()) if (element !== owned && element.contains(owned)) return true;
+    return false;
+  };
+  const writing = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    if (!kinds.has(node.kind) || (rendered.get(node.id) ?? []).length) continue;
+    for (const element of writtenBy(node.id)) {
+      if (owners.has(element)) continue;
+      const held = writing.get(element);
+      if (held) held.push(node.id);
+      else writing.set(element, [node.id]);
+    }
+  }
+  const claimed = /* @__PURE__ */ new Map();
+  const containers = /* @__PURE__ */ new Set();
+  const covered = (element) => {
+    for (let at3 = element.parentElement; at3; at3 = at3.parentElement) {
+      if (owners.has(at3) || claimed.has(at3)) return true;
+    }
+    return false;
+  };
+  const order = [...writing.keys()].sort((a, b) => depthInDocument(a) - depthInDocument(b));
+  for (const element of order) {
+    if (covered(element)) continue;
+    const ids = writing.get(element);
+    const container = wraps(element);
+    const pick = ids.reduce((best, id) => {
+      const a = depth.get(id) ?? 0;
+      const b = depth.get(best) ?? 0;
+      return container ? a < b ? id : best : a > b ? id : best;
+    });
+    claimed.set(element, pick);
+    if (container) containers.add(element);
+  }
+  return { claimed, containers };
+}
+function withoutElements(nodes) {
+  return nodes.map(({ element, children, ...rest }) => ({
+    ...rest,
+    children: withoutElements(children)
+  }));
+}
+
+// src/plugin.ts
+var plugins = [];
+function registerDevtoolsPlugin(plugin) {
+  const at3 = plugins.findIndex((p) => p.name === plugin.name);
+  if (at3 === -1) plugins.push(plugin);
+  else plugins[at3] = plugin;
+}
+function devtoolsPlugins() {
+  return plugins;
+}
+function annotationOf(node, name) {
+  return node.extra?.[name];
+}
+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;
+}
+function pluginElementBadge(extra) {
+  if (!extra) return void 0;
+  for (const plugin of plugins) {
+    try {
+      const badge = plugin.elementBadge?.(extra);
+      if (badge) return badge;
+    } catch {
+    }
+  }
+  return void 0;
+}
+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
+var TREE_KINDS = /* @__PURE__ */ new Set([
+  "component",
+  "control",
+  "router",
+  "handler",
+  // A component a plugin recognised as providing a context. Still a tag the author wrote,
+  // so leaving it out took it and everything it rendered out of the tree.
+  "provider"
+]);
+function inPageOrder(nodes) {
+  const slots = [];
+  const placed = [];
+  nodes.forEach((node, at3) => {
+    if (node.order !== void 0) {
+      slots.push(at3);
+      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 badges = /* @__PURE__ */ new WeakMap();
+function badgeOf(node) {
+  if (!badges.has(node)) badges.set(node, pluginBadge(node));
+  return badges.get(node);
+}
+function componentTree(graph, options = {}) {
+  const wanted = (node) => TREE_KINDS.has(node.kind) || options.values === true && node.authored !== false;
+  const tagged = inPageOrder([...graph.values()].filter(wanted).sort((a, b) => a.id - b.id));
+  const made = /* @__PURE__ */ new Map();
+  for (const node of tagged) {
+    made.set(node.id, {
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      children: [],
+      ...TREE_KINDS.has(node.kind) ? {} : { value: true },
+      ...node.lazy ? { lazy: true } : {},
+      ...badgeOf(node) ? { badge: badgeOf(node) } : {}
+    });
+  }
+  const owner = (node) => {
+    const seen = /* @__PURE__ */ new Set([node.id]);
+    let at3 = node.createdIn;
+    while (at3 !== void 0 && !seen.has(at3)) {
+      seen.add(at3);
+      const found = made.get(at3);
+      if (found) return found;
+      at3 = graph.get(at3)?.createdIn;
+    }
+    return void 0;
+  };
+  const roots = [];
+  for (const node of tagged) {
+    const parent = owner(node);
+    if (parent) parent.children.push(made.get(node.id));
+    else roots.push(made.get(node.id));
+  }
+  const term = options.filter?.trim().toLowerCase();
+  return term ? keep(roots, term) : roots;
+}
+function keep(nodes, term) {
+  const out = [];
+  for (const node of nodes) {
+    const children = keep(node.children, term);
+    const hit = node.label.toLowerCase().includes(term);
+    if (hit || children.length) out.push({ ...node, children: hit ? node.children : children });
+  }
+  return out;
+}
+var escape = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+function createComponentTree(host2, options = {}) {
+  const empty = options.empty ?? "nothing rendered yet";
+  const shut = /* @__PURE__ */ new Set();
+  let signature = "";
+  const defaulted = /* @__PURE__ */ new Set();
+  let marked = null;
+  let markedKey = null;
+  let values = options.values === true;
+  let filter = "";
+  const doc = host2.ownerDocument;
+  const bar = doc.createElement("label");
+  bar.className = "fx-tree-bar";
+  const box = doc.createElement("input");
+  box.type = "checkbox";
+  box.checked = values;
+  bar.append(box, doc.createTextNode("values"));
+  bar.title = "List the signals and memos each tag declares";
+  const search = doc.createElement("input");
+  search.type = "search";
+  search.className = "fx-tree-search";
+  search.placeholder = "filter by name";
+  search.addEventListener("input", () => {
+    filter = search.value;
+    signature = "";
+  });
+  const list = doc.createElement("div");
+  list.className = "fx-tree-list";
+  host2.replaceChildren(bar, search, list);
+  let last = null;
+  box.addEventListener("change", () => {
+    values = box.checked;
+    signature = "";
+    if (last) api.render(last.graph, last.selected);
+  });
+  const row = (node, depth) => {
+    const has = node.children.length > 0;
+    const open = has && !shut.has(node.key);
+    const twist = has ? open ? "▾" : "▸" : node.prop ? "" : "·";
+    const tag = node.props ? `<span class="fx-tree-props-label">props</span><span class="fx-tree-props-count">${node.children.length}</span>` : node.prop ? `<span class="fx-tree-prop-name">${escape(node.prop.name)}</span>${node.prop.value === void 0 ? "" : `<span class="fx-tree-prop-value">${escape(shorten(node.prop.value, 44))}</span>`}` : node.value ? escape(node.label) : has ? `&lt;${escape(node.label)}&gt;` : `&lt;${escape(node.label)} /&gt;`;
+    const count = has && !open && !node.props ? `<span class="fx-tree-count">${node.children.length}</span>` : "";
+    const chunk = node.lazy ? '<span class="fx-tree-lazy" title="loaded as its own chunk">lazy</span>' : "";
+    const mark = node.badge ? `<span class="fx-tree-plugin" title="${escape(node.badge)}">${escape(node.badge)}</span>` : "";
+    return `<div class="fx-tree-row n-${node.kind}${node.value ? " is-value" : ""}${node.prop ? " is-prop" : ""}${node.props ? " is-props" : ""}" data-key="${escape(node.key)}"${node.id !== void 0 ? ` data-id="${node.id}"` : ""} style="--depth:${depth}"><button type="button" class="fx-tree-twist" data-twist="${escape(node.key)}"${has ? "" : ' tabindex="-1"'}>${twist}</button><span class="fx-tree-tag"${node.prop?.value ? ` title="${escape(node.prop.name)}=${escape(node.prop.value)}"` : ""}>${tag}</span>${mark}${chunk}${count}</div>` + (open ? node.children.map((child) => row(child, depth + 1)).join("") : "");
+  };
+  const pickOf = (rowEl) => {
+    const found = shown.get(rowEl.dataset.key ?? "");
+    if (!found || found.kind !== "element") return void 0;
+    return {
+      key: found.key,
+      label: found.label,
+      ...found.owner !== void 0 ? { owner: found.owner } : {},
+      ...found.writes?.length ? { writes: found.writes } : {},
+      ...found.at ? { at: found.at } : {},
+      ...found.extra ? { extra: found.extra } : {},
+      ...found.element ? { element: found.element } : {}
+    };
+  };
+  const onClick = (event) => {
+    const target = event.target;
+    const twist = target?.closest?.("[data-twist]");
+    if (twist) {
+      const key = twist.dataset.twist ?? "";
+      if (shut.has(key)) shut.delete(key);
+      else shut.add(key);
+      signature = "";
+      event.stopPropagation();
+      return;
+    }
+    const rowEl = target?.closest?.(".fx-tree-row");
+    if (!rowEl) return;
+    if (rowEl.dataset.id) {
+      markedKey = null;
+      options.onSelect?.(Number(rowEl.dataset.id));
+      return;
+    }
+    const held = shown.get(rowEl.dataset.key ?? "");
+    if (held?.props) {
+      if (shut.has(held.key)) shut.delete(held.key);
+      else shut.add(held.key);
+      signature = "";
+      if (last) api.render(last.graph, last.selected);
+      return;
+    }
+    if (held?.prop) {
+      if (held.owner === void 0) return;
+      markedKey = held.key;
+      paint();
+      options.onSelect?.(held.owner);
+      return;
+    }
+    const pick = pickOf(rowEl);
+    if (!pick) return;
+    markedKey = pick.key;
+    paint();
+    options.onPick?.(pick);
+  };
+  const onDouble = (event) => {
+    const rowEl = event.target?.closest?.(".fx-tree-row");
+    if (!rowEl) return;
+    if (rowEl.dataset.id) {
+      options.onReveal?.(Number(rowEl.dataset.id));
+      return;
+    }
+    const pick = pickOf(rowEl);
+    if (pick) options.onRevealPick?.(pick);
+  };
+  let shown = /* @__PURE__ */ new Map();
+  const onOver = (event) => {
+    const rowEl = event.target?.closest?.(".fx-tree-row");
+    const found = rowEl ? shown.get(rowEl.dataset.key ?? "") : void 0;
+    if (!found) {
+      options.onHover?.(null);
+      return;
+    }
+    options.onHover?.(found.id ?? null, found.element, found.id === void 0 ? found.key : void 0);
+  };
+  const onOut = () => options.onHover?.(null);
+  host2.addEventListener("click", onClick);
+  host2.addEventListener("dblclick", onDouble);
+  if (options.onHover) {
+    host2.addEventListener("pointermove", onOver);
+    host2.addEventListener("pointerleave", onOut);
+  }
+  const paint = () => {
+    for (const el2 of list.querySelectorAll(".fx-tree-row")) {
+      const row2 = el2;
+      const id = row2.dataset.id;
+      const on = id !== void 0 ? Number(id) === marked : row2.dataset.key === markedKey;
+      el2.classList.toggle("on", on);
+    }
+  };
+  function rowsFor(nodes, graph) {
+    const byId = /* @__PURE__ */ new Map();
+    const build2 = (node) => {
+      const written = values ? graph.get(node.id)?.props ?? [] : [];
+      const listed = written.map((p, i) => ({
+        key: `${node.id}=${i}`,
+        label: p.name,
+        kind: node.kind,
+        children: [],
+        prop: { name: p.name, ...p.value === void 0 ? {} : { value: p.value } },
+        owner: node.id,
+        ...p.at?.line === void 0 ? {} : { at: { file: p.at.file ?? "", line: p.at.line, column: p.at.column ?? 0 } }
+      }));
+      const group = `${node.id}=props`;
+      if (listed.length && !defaulted.has(group)) {
+        defaulted.add(group);
+        shut.add(group);
+      }
+      const props = listed.length ? [{ key: group, label: "props", kind: node.kind, children: listed, props: true, owner: node.id }] : [];
+      const row2 = {
+        key: String(node.id),
+        label: node.label,
+        kind: node.kind,
+        id: node.id,
+        children: [...props, ...node.children.map(build2)],
+        ...node.value ? { value: true } : {},
+        ...node.lazy ? { lazy: true } : {},
+        ...node.badge ? { badge: node.badge } : {}
+      };
+      byId.set(node.id, row2);
+      return row2;
+    };
+    const roots = nodes.map(build2);
+    const domFor = options.domFor;
+    if (!domFor) return roots;
+    const placed = /* @__PURE__ */ new Set();
+    const done = /* @__PURE__ */ new Set();
+    const uses = /* @__PURE__ */ new Map();
+    const tally = (nodes2) => {
+      for (const node of nodes2) {
+        if (node.owner !== void 0) uses.set(node.owner, (uses.get(node.owner) ?? 0) + 1);
+        tally(node.children);
+      }
+    };
+    for (const row2 of byId.values()) if (row2.id !== void 0) tally(domFor(row2.id));
+    const readerOf = (id, skip) => {
+      const drawn = (from) => {
+        const seen = /* @__PURE__ */ new Set();
+        let at3 = from;
+        while (at3 !== void 0 && !seen.has(at3)) {
+          seen.add(at3);
+          const row2 = byId.get(at3);
+          if (row2 && !row2.value && row2 !== skip) return row2;
+          at3 = graph.get(at3)?.createdIn;
+        }
+        return void 0;
+      };
+      let best;
+      let deepest = -1;
+      for (const [nodeId, node] of graph) {
+        if (nodeId === id || !node.deps.has(id)) continue;
+        const row2 = drawn(nodeId);
+        if (!row2 || row2.id === void 0) continue;
+        const depth = graph.get(row2.id)?.depth ?? 0;
+        if (depth >= deepest) {
+          deepest = depth;
+          best = row2;
+        }
+      }
+      return best;
+    };
+    const again = (row2, key) => ({
+      ...row2,
+      key,
+      children: row2.children.map((child, i) => again(child, `${key}/${i}`))
+    });
+    const expand = (row2) => {
+      if (row2.value || row2.id === void 0) return row2;
+      if (done.has(row2)) return row2;
+      done.add(row2);
+      const dom = domFor(row2.id);
+      if (!dom.length) {
+        row2.children = row2.children.map(expand);
+        return row2;
+      }
+      const walk2 = (node, key) => {
+        const owner = node.owner === void 0 ? void 0 : byId.get(node.owner);
+        if (owner && owner !== row2) {
+          if (done.has(owner)) {
+            const count = uses.get(node.owner) ?? 0;
+            return count > 1 ? again(owner, key) : void 0;
+          }
+          placed.add(owner);
+          return expand(owner);
+        }
+        const kids = [];
+        for (const id of node.writes ?? []) {
+          const value = byId.get(id);
+          if (!value?.value || placed.has(value)) continue;
+          placed.add(value);
+          kids.push(value);
+        }
+        for (const id of node.inside ?? []) {
+          const tag = byId.get(id);
+          if (!tag || tag === row2 || placed.has(tag) || done.has(tag)) continue;
+          placed.add(tag);
+          kids.push(expand(tag));
+        }
+        node.children.forEach((child, i) => {
+          const kid = walk2(child, `${key}/${i}`);
+          if (kid) kids.push(kid);
+        });
+        return {
+          key,
+          label: node.label,
+          kind: "element",
+          children: kids,
+          owner: row2.id,
+          ...node.writes?.length ? { writes: node.writes } : {},
+          ...node.at ? { at: node.at } : {},
+          ...node.extra ? { extra: node.extra } : {},
+          ...pluginElementBadge(node.extra) ? { badge: pluginElementBadge(node.extra) } : {},
+          ...node.element ? { element: node.element } : {}
+        };
+      };
+      const mount = dom.findIndex((node) => node.container);
+      if (mount !== -1) {
+        const node = dom[mount];
+        row2.children = row2.children.map(expand);
+        return {
+          key: `${row2.id}:${mount}`,
+          label: node.label,
+          kind: "element",
+          children: [row2],
+          owner: row2.id,
+          ...node.at ? { at: node.at } : {},
+          ...node.element ? { element: node.element } : {}
+        };
+      }
+      const rendered = dom.map((node, i) => walk2(node, `${row2.id}:${i}`)).filter((node) => node !== void 0);
+      const rest = row2.children.filter((child) => !placed.has(child)).map(expand);
+      const lifted = [];
+      const spare = [];
+      const adopt = /* @__PURE__ */ new Map();
+      for (const child of rest) {
+        const reader = child.value && child.id !== void 0 ? readerOf(child.id, row2) : void 0;
+        if (reader) {
+          const held = adopt.get(reader);
+          if (held) held.push(child);
+          else adopt.set(reader, [child]);
+          placed.add(child);
+          continue;
+        }
+        (child.value || child.prop || child.props ? lifted : spare).push(child);
+      }
+      for (const [reader, values2] of adopt) reader.children.unshift(...values2);
+      row2.children = [...lifted, ...rendered, ...spare];
+      return row2;
+    };
+    const top = roots.map((root) => placed.has(root) ? root : expand(root));
+    return top.filter((_, i) => !placed.has(roots[i]));
+  }
+  const api = {
+    render(graph, selected = null) {
+      last = { graph, selected };
+      const roots = rowsFor(componentTree(graph, { values, filter }), graph);
+      const next = `${values}|${filter}|${[...shut].sort().join(",")}|${roots.map(function label(n) {
+        return `${n.key}:${n.label}:${n.children.map(label).join("+")}`;
+      }).join(",")}`;
+      if (next !== signature) {
+        signature = next;
+        shown = /* @__PURE__ */ new Map();
+        const index = (list2) => {
+          for (const node of list2) {
+            shown.set(node.key, node);
+            index(node.children);
+          }
+        };
+        index(roots);
+        list.innerHTML = roots.length ? roots.map((node) => row(node, 0)).join("") : `<span class="fx-tree-empty">${escape(filter ? `nothing named ${filter}` : empty)}</span>`;
+      }
+      if (selected !== marked) {
+        marked = selected;
+        paint();
+      }
+    },
+    clear() {
+      signature = "";
+      marked = null;
+      shut.clear();
+      list.innerHTML = `<span class="fx-tree-empty">${escape(empty)}</span>`;
+    },
+    destroy() {
+      host2.removeEventListener("click", onClick);
+      host2.removeEventListener("dblclick", onDouble);
+      host2.removeEventListener("pointermove", onOver);
+      host2.removeEventListener("pointerleave", onOut);
+      host2.innerHTML = "";
+    }
+  };
+  return api;
+}
+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/observe.ts
+function stampDocumentOrder(graph, rendered) {
+  const roots = [];
+  for (const node of graph.values()) {
+    if (!TREE_KINDS.has(node.kind)) continue;
+    const element = rendered(node.id)[0];
+    if (element?.isConnected) roots.push({ id: node.id, element });
+  }
+  roots.sort((a, b) => a.element.compareDocumentPosition(b.element) & 4 ? -1 : 1);
+  for (const node of graph.values()) node.order = void 0;
+  roots.forEach(({ id }, at3) => {
+    const node = graph.get(id);
+    if (node) node.order = at3;
+  });
+}
+var REMOVED_LOG = 500;
+var KINDS2 = {
+  signal: "state",
+  memo: "memo",
+  effect: "effect",
+  store: "store",
+  resource: "resource"
+};
+var HISTORY_VALUE = 80;
+var SET_SITES = 8;
+var PREFIX = {
+  state: "s",
+  memo: "m",
+  effect: "e",
+  store: "st",
+  resource: "r",
+  component: "c",
+  // Only the static graph makes these: at runtime control flow is a named memo, and a route
+  // handler never reaches a browser.
+  control: "x",
+  router: "rt",
+  handler: "h",
+  // Never produced here: these are cards a view draws, not nodes anything creates.
+  group: "g",
+  binding: "b",
+  setter: "w",
+  // A plugin's, and it names them itself.
+  directive: "d",
+  context: "ctx",
+  provider: "p"
+};
+function readProps(props) {
+  const at3 = propsLocations(props);
+  const out = [];
+  for (const name of Object.keys(props)) {
+    if (name === "children") continue;
+    const where = at3?.[name];
+    const report = {
+      name,
+      ...where ? { at: { line: where[0], column: where[1] } } : {}
+    };
+    try {
+      report.value = formatValue(untrack2(() => props[name]), 200);
+    } catch {
+    }
+    out.push(report);
+  }
+  return out.length ? out : void 0;
+}
+function observeGraph(options = {}) {
+  installSourceMarker();
+  const origin = options.origin ?? (typeof location === "object" ? location.origin : void 0);
+  const graph = /* @__PURE__ */ new Map();
+  const claims = (node, value) => {
+    for (const dep of node.deps) {
+      const other = graph.get(dep);
+      if (other?.read && other.read() === value) return false;
+    }
+    return true;
+  };
+  const ids = /* @__PURE__ */ new WeakMap();
+  const through = /* @__PURE__ */ new WeakMap();
+  const internals = /* @__PURE__ */ new Set();
+  const targets = /* @__PURE__ */ new WeakMap();
+  const handed = /* @__PURE__ */ new Map();
+  const bindingSites = /* @__PURE__ */ new WeakMap();
+  const boundTo = /* @__PURE__ */ new WeakMap();
+  const drivenBy = /* @__PURE__ */ new WeakMap();
+  let reaches2 = /* @__PURE__ */ new Map();
+  let described = null;
+  const rendered = /* @__PURE__ */ new Map();
+  const elementsIn = (value) => {
+    if (value instanceof Element) return [value];
+    if (value instanceof DocumentFragment) return [...value.children];
+    if (Array.isArray(value)) return value.flatMap(elementsIn);
+    return [];
+  };
+  const cores = /* @__PURE__ */ new Map();
+  const setters = /* @__PURE__ */ new Map();
+  const runsAtLastSample = /* @__PURE__ */ new Map();
+  const unnamed = /* @__PURE__ */ new Set();
+  const recording = (options.history ?? 200) > 0;
+  const wantSites = options.bindingSources ?? true;
+  const mapped = (location2) => {
+    if (!options.mapSource) return location2;
+    try {
+      const found = options.mapSource(location2);
+      return found ? { ...location2, ...found, compiled: { line: location2.line, column: location2.column } } : location2;
+    } catch {
+      return location2;
+    }
+  };
+  const history = createHistory(options.history ?? 200);
+  let seq = 0;
+  const raws = /* @__PURE__ */ new Map();
+  const readRaw = (node) => {
+    if (!node.read) return void 0;
+    try {
+      return untrack2(() => node.read());
+    } catch {
+      return void 0;
+    }
+  };
+  const removed = [];
+  let revision = 0;
+  const revs = /* @__PURE__ */ new Map();
+  let drained = 0;
+  const onDirective = [];
+  const onContext = [];
+  const retyped = /* @__PURE__ */ new Map();
+  const contextSites = /* @__PURE__ */ new Map();
+  const elementExtra = /* @__PURE__ */ new WeakMap();
+  const ancestor = (parents) => {
+    if (!parents) return void 0;
+    for (let i = parents.length - 1; i >= 0; i--) {
+      const key = parents[i];
+      const found = ids.get(key) ?? through.get(key);
+      if (found !== void 0) return found;
+    }
+    return void 0;
+  };
+  const stop = (options.observe ?? observeReactiveNodes)({
+    created(report) {
+      const core = report.node;
+      if (!core || typeof core !== "object") return;
+      if (report.internal) {
+        const owner2 = ancestor(report.parents);
+        if (owner2 !== void 0) through.set(core, owner2);
+        internals.add(core);
+        if (wantSites) {
+          const site2 = currentCallSite(origin);
+          if (site2) bindingSites.set(core, mapped(site2.location));
+        }
+        return;
+      }
+      const id = seq++;
+      const handle = report.handle;
+      const mark = takeReactiveSource();
+      const base = KINDS2[report.kind];
+      const marked = base === "memo" && mark?.name ? KIND_OF_BUILTIN[mark.name] : void 0;
+      const kind = (report.name ? KIND_OF_BUILTIN[report.name] : void 0) ?? marked ?? base;
+      const named = report.name ?? mark?.name;
+      if (!named) unnamed.add(id);
+      const site = mark?.location ? void 0 : currentCallSite(origin);
+      const node = {
+        id,
+        label: named ?? `${PREFIX[kind]}${id}`,
+        kind,
+        // Only a compiler mark means the author wrote this and gave it that name. A name
+        // the runtime supplies, such as `Show.when`, `mapArray` or `row index`, describes framework
+        // machinery, and so does no name at all.
+        authored: mark?.name != null,
+        deps: /* @__PURE__ */ new Set(),
+        // A write edge needs to know which consumer was running when a setter fired, and
+        // nothing observed records that. Reads carry the graph; writes do not.
+        writes: /* @__PURE__ */ new Set(),
+        runs: 0,
+        lastPulse: 0,
+        core,
+        // The application's line is where it was asked for; a package's is where it was made,
+        // and for a node made while that package loaded it is the only thing there is.
+        ...mark?.location ? { source: mark.location } : {},
+        // Mapped, unlike `mark`: these two came off a stack, so they are positions in the
+        // compiled file until a host translates them.
+        ...site && !site.external ? { usedAt: mapped(site.location) } : {},
+        ...site && site.external && !mark?.location ? { source: mapped(site.location) } : {}
+      };
+      const owner = ancestor(report.parents);
+      if (owner !== void 0) node.createdIn = owner;
+      const originId = report.origin ? ids.get(report.origin) : void 0;
+      const from = originId !== void 0 ? graph.get(originId) : void 0;
+      if (from) {
+        node.createdIn = originId;
+        if (from.source) node.source = from.source;
+      }
+      if (kind !== "effect" && typeof handle === "function") {
+        const read = handle;
+        node.read = () => untrack2(read);
+      }
+      ids.set(core, id);
+      if (handle && (typeof handle === "object" || typeof handle === "function")) {
+        ids.set(handle, id);
+      }
+      cores.set(id, core);
+      if (typeof report.set === "function") setters.set(id, report.set);
+      graph.set(id, node);
+      history.created(id, node.createdIn, node.label);
+    },
+    ran(target) {
+      const id = ids.get(target);
+      if (id !== void 0) {
+        const node = graph.get(id);
+        if (node) node.runs++;
+        history.ran(id);
+      }
+    },
+    wrote(target, by) {
+      const writer = by ? ids.get(by) : void 0;
+      const written = ids.get(target);
+      if (written === void 0) return;
+      if (wantSites && writer === void 0) {
+        const node = graph.get(written);
+        const site = currentCallSite(origin);
+        if (node && site) {
+          const seen = node.setAt ??= [];
+          const at3 = mapped(site.location);
+          if (!seen.some((s) => s.file === at3.file && s.line === at3.line && s.column === at3.column)) {
+            if (seen.length >= SET_SITES) seen.shift();
+            seen.push(at3);
+          }
+        }
+      }
+      if (recording) {
+        const node = graph.get(written);
+        const after = node ? readRaw(node) : void 0;
+        const before = raws.get(written);
+        if (node) raws.set(written, after);
+        const shown = node?.detail ?? node?.value;
+        history.wrote(written, writer, {
+          from: shown === void 0 ? void 0 : shorten(shown, HISTORY_VALUE),
+          to: node ? shorten(formatValue(after, HISTORY_VALUE * 2), HISTORY_VALUE) : void 0,
+          // Which row was added is the fact a reader is after.
+          change: diffValues(before, after),
+          label: node?.label
+        });
+      }
+      if (writer === void 0 || writer === written) return;
+      graph.get(writer)?.writes.add(written);
+    },
+    directive(node, target, kind, name, accessor) {
+      if (!onDirective.length) return;
+      const core = node;
+      const owner = core && typeof core === "object" ? ids.get(core) : void 0;
+      const at3 = holeLocation(accessor);
+      const report = {
+        owner: owner !== void 0 ? through.get(core) ?? owner : void 0,
+        kind,
+        name,
+        element: describeNode(target),
+        target,
+        ...at3 ? { at: at3 } : {}
+      };
+      for (const fn of onDirective) {
+        try {
+          fn(report);
+        } catch {
+        }
+      }
+    },
+    contextCreated(id) {
+      if (!onContext.length || contextSites.has(id)) return;
+      const site = currentCallSite(origin);
+      if (site) contextSites.set(id, mapped(site.location));
+    },
+    context(node, id, kind, value) {
+      if (!onContext.length) return;
+      const core = node;
+      const owner = core && typeof core === "object" ? ids.get(core) : void 0;
+      const report = {
+        owner: owner !== void 0 ? through.get(core) ?? owner : void 0,
+        id,
+        name: id.description || "context",
+        ...owner !== void 0 ? { ownerLabel: graph.get(owner)?.label } : {},
+        // Where the context itself was written. The provider's line is a fallback, and it
+        // reads as a lie when two providers share one context.
+        ...contextSites.get(id) ?? graph.get(owner ?? -1)?.source ? { at: contextSites.get(id) ?? graph.get(owner ?? -1)?.source } : {},
+        kind,
+        ...value === void 0 ? {} : { value: formatValue(value) }
+      };
+      for (const fn of onContext) {
+        try {
+          fn(report);
+        } catch {
+        }
+      }
+    },
+    props(node, props) {
+      const core = node;
+      if (!core || typeof core !== "object" || !props) return;
+      const id = ids.get(core);
+      if (id !== void 0) handed.set(id, props);
+    },
+    bound(node, target, kind, name, accessor) {
+      const core = node;
+      if (!core || typeof core !== "object") return;
+      const hole = holeLocation(accessor);
+      const site = hole ? { ...hole, file: bindingSites.get(core)?.file } : bindingSites.get(core);
+      const box = target instanceof Element ? target : target?.parentElement ?? void 0;
+      if (box) boundTo.set(core, new WeakRef(box));
+      targets.set(core, {
+        kind,
+        element: describeNode(target),
+        ...name ? { name } : {},
+        ...site ? { source: site } : {}
+      });
+    },
+    moved(target, origin2, name) {
+      const node = graph.get(ids.get(target) ?? -1);
+      if (!node) return;
+      const owner = ids.get(origin2);
+      if (owner !== void 0 && graph.has(owner)) node.createdIn = owner;
+      if (name) {
+        node.label = name;
+        unnamed.delete(node.id);
+      }
+    },
+    disposed(target) {
+      internals.delete(target);
+      const id = ids.get(target);
+      if (id === void 0) return;
+      removed.push({ id, rev: ++revision });
+      revs.delete(id);
+      if (removed.length > REMOVED_LOG) removed.splice(0, removed.length - REMOVED_LOG);
+      history.disposed(id, graph.get(id)?.label);
+      graph.delete(id);
+      handed.delete(id);
+      raws.delete(id);
+      cores.delete(id);
+      rendered.delete(id);
+      setters.delete(id);
+      runsAtLastSample.delete(id);
+      unnamed.delete(id);
+    }
+  });
+  const edges = (id, node) => {
+    const sources = cores.get(id)?.sources;
+    node.deps.clear();
+    if (!sources) return;
+    for (const source of sources) {
+      const dep = ids.get(source);
+      if (dep !== void 0 && dep !== id) node.deps.add(dep);
+    }
+  };
+  const api = {
+    graph,
+    sample() {
+      described = null;
+      const changed = [];
+      const moved = (id) => {
+        changed.push(id);
+        revs.set(id, ++revision);
+      };
+      const now = Date.now();
+      const bindings = /* @__PURE__ */ new Map();
+      const drives = /* @__PURE__ */ new Map();
+      const seen = /* @__PURE__ */ new Map();
+      for (const internal of internals) {
+        const target = targets.get(internal);
+        const element = boundTo.get(internal);
+        for (const source of internal.sources ?? []) {
+          const id = ids.get(source);
+          if (id === void 0) continue;
+          bindings.set(id, (bindings.get(id) ?? 0) + 1);
+          if (element) {
+            const found = element.deref();
+            if (found && !drivenBy.has(found)) drivenBy.set(found, id);
+            const held = seen.get(id);
+            if (held) held.push(element);
+            else seen.set(id, [element]);
+          }
+          if (!target) continue;
+          const list = drives.get(id);
+          if (list) list.push(target);
+          else drives.set(id, [target]);
+        }
+      }
+      reaches2 = seen;
+      for (const node of graph.values()) {
+        const count = bindings.get(node.id) ?? 0;
+        if (node.bindings !== count) node.bindings = count || void 0;
+        const list = drives.get(node.id);
+        node.targets = list?.length ? list : void 0;
+      }
+      for (const node of graph.values()) {
+        if (!node.read) {
+          edges(node.id, node);
+          const seen2 = runsAtLastSample.get(node.id);
+          if (seen2 === void 0 || node.runs > seen2) {
+            node.lastPulse = now;
+            moved(node.id);
+          }
+          runsAtLastSample.set(node.id, node.runs);
+          continue;
+        }
+        const raw = node.read();
+        if (recording) raws.set(node.id, raw);
+        edges(node.id, node);
+        const stamped = raw?.$name;
+        if (node.kind === "memo" && typeof stamped === "string" && stamped && claims(node, raw)) {
+          node.kind = KIND_OF_BUILTIN[stamped] ?? "component";
+          node.declaredAt = componentSource(stamped);
+          node.source ??= node.declaredAt;
+          if (raw.$lazy) node.lazy = true;
+          if (unnamed.has(node.id)) {
+            node.label = stamped;
+            unnamed.delete(node.id);
+          }
+        }
+        if (TREE_KINDS.has(node.kind)) {
+          const found = elementsIn(raw);
+          if (found.length) rendered.set(node.id, found.map((el2) => new WeakRef(el2)));
+          const given = handed.get(node.id);
+          if (given) node.props = readProps(given);
+        }
+        const detail2 = formatValue(raw);
+        const next = shorten(detail2);
+        if (next !== node.value || detail2 !== node.detail) {
+          node.detail = detail2;
+          node.value = next;
+          if (node.kind === "state") node.runs++;
+          node.lastPulse = now;
+          moved(node.id);
+        }
+        runsAtLastSample.set(node.id, node.runs);
+      }
+      for (const [id, kind] of retyped) {
+        const node = graph.get(id);
+        if (node?.kind === "component" && TREE_KINDS.has(kind)) node.kind = kind;
+      }
+      const unnumbered = () => {
+        for (const node of graph.values()) {
+          if (TREE_KINDS.has(node.kind) && node.order === void 0) return true;
+        }
+        return false;
+      };
+      if (changed.length || unnumbered()) stampDocumentOrder(graph, (of) => api.renderedFor(of));
+      return changed;
+    },
+    get revision() {
+      return revision;
+    },
+    takeRemoved() {
+      const out = removed.filter((entry) => entry.rev > drained).map((entry) => entry.id);
+      drained = revision;
+      return out;
+    },
+    changedSince(rev) {
+      const out = [];
+      for (const [id, at3] of revs) if (at3 > rev) out.push(id);
+      return out;
+    },
+    removedSince(rev) {
+      return removed.filter((entry) => entry.rev > rev).map((entry) => entry.id);
+    },
+    outrun(rev) {
+      return removed.length >= REMOVED_LOG && rev < removed[0].rev;
+    },
+    elementsFor(id) {
+      const live = [];
+      const collect = (from, where = reaches2) => {
+        for (const ref of where.get(from) ?? []) {
+          const found = ref.deref();
+          if (found?.isConnected && !live.includes(found)) live.push(found);
+        }
+      };
+      collect(id, rendered);
+      if (live.length) return live;
+      collect(id);
+      if (!live.length) {
+        const inside = (node) => {
+          const seen = /* @__PURE__ */ new Set();
+          let at3 = node.createdIn;
+          while (at3 !== void 0 && !seen.has(at3)) {
+            if (at3 === id) return true;
+            seen.add(at3);
+            at3 = graph.get(at3)?.createdIn;
+          }
+          return false;
+        };
+        for (const node of graph.values()) if (inside(node)) collect(node.id);
+      }
+      return live;
+    },
+    setValue(id, next) {
+      const node = graph.get(id);
+      const write = setters.get(id);
+      if (!node || node.kind !== "state" || !write) return false;
+      write(next);
+      return true;
+    },
+    renderedFor(id) {
+      const live = [];
+      for (const ref of rendered.get(id) ?? []) {
+        const found = ref.deref();
+        if (found?.isConnected && !live.includes(found)) live.push(found);
+      }
+      return live;
+    },
+    domFor(id) {
+      described ??= describeAll(
+        graph,
+        (of) => api.renderedFor(of),
+        (of) => api.elementsFor(of),
+        TREE_KINDS,
+        (element) => elementExtra.get(element)
+      );
+      return described.get(id) ?? [];
+    },
+    nodeAt(element) {
+      const depth = tagDepths(graph, TREE_KINDS);
+      const rendering = /* @__PURE__ */ new Map();
+      for (const node of graph.values()) {
+        if (!TREE_KINDS.has(node.kind)) continue;
+        for (const found of api.renderedFor(node.id)) {
+          const held = rendering.get(found);
+          if (held === void 0 || (depth.get(node.id) ?? 0) > (depth.get(held) ?? 0)) {
+            rendering.set(found, node.id);
+          }
+        }
+      }
+      for (let at3 = element; at3; at3 = at3.parentElement) {
+        const owner = rendering.get(at3);
+        if (owner !== void 0 && graph.has(owner)) return owner;
+      }
+      for (let at3 = element; at3; at3 = at3.parentElement) {
+        const id = drivenBy.get(at3);
+        if (id !== void 0 && graph.has(id)) return id;
+      }
+      return void 0;
+    },
+    takeEvents() {
+      return history.take();
+    },
+    detach() {
+      stop();
+      internals.clear();
+      graph.clear();
+      cores.clear();
+      rendered.clear();
+      setters.clear();
+      runsAtLastSample.clear();
+      unnamed.clear();
+      raws.clear();
+      history.clear();
+    }
+  };
+  for (const plugin of devtoolsPlugins()) {
+    if (!plugin.collect) continue;
+    const context = {
+      onDirective: (fn) => onDirective.push(fn),
+      onContext: (fn) => onContext.push(fn),
+      annotate: (id, data) => {
+        const node = graph.get(id);
+        if (node) (node.extra ??= {})[plugin.name] = data;
+      },
+      annotation: (id) => graph.get(id)?.extra?.[plugin.name],
+      // Remembered, not applied here. A component is still a memo when its context is
+      // provided, and the promotion that gives it its name only runs while it is one.
+      retype: (id, kind) => retyped.set(id, kind),
+      annotateElement: (target, data) => {
+        if (!target || typeof target !== "object") return;
+        const held = elementExtra.get(target) ?? {};
+        held[plugin.name] = data;
+        elementExtra.set(target, held);
+      },
+      elementAnnotation: (target) => target && typeof target === "object" ? elementExtra.get(target)?.[plugin.name] : void 0,
+      add: (spec) => {
+        const id = seq++;
+        graph.set(id, {
+          id,
+          label: spec.label,
+          kind: spec.kind,
+          deps: new Set(spec.deps ?? []),
+          writes: /* @__PURE__ */ new Set(),
+          runs: 0,
+          lastPulse: 0,
+          authored: spec.authored ?? false,
+          ...spec.createdIn !== void 0 ? { createdIn: spec.createdIn } : {},
+          ...spec.value !== void 0 ? { value: spec.value } : {},
+          ...spec.detail !== void 0 ? { detail: spec.detail } : {},
+          ...spec.source ? { source: spec.source } : {}
+        });
+        return id;
+      }
+    };
+    try {
+      plugin.collect(context);
+    } catch {
+    }
+  }
+  return api;
+}
+
+// src/highlight.ts
+var LAYER = "fx-highlight-layer";
+var overlay = null;
+function build(doc) {
+  const layer = doc.createElement("div");
+  layer.id = LAYER;
+  layer.style.cssText = "position:fixed;inset:0;z-index:2147483646;pointer-events:none;contain:strict;";
+  const label = doc.createElement("div");
+  label.style.cssText = "position:absolute;padding:1px 5px;border-radius:3px;background:#5eead4;color:#07131a;font:11px/1.5 ui-monospace,monospace;white-space:nowrap;";
+  layer.append(label);
+  doc.body.appendChild(layer);
+  return { layer, boxes: [], label };
+}
+function boxIn(overlay2, index) {
+  const held = overlay2.boxes[index];
+  if (held) return held;
+  const box = overlay2.layer.ownerDocument.createElement("div");
+  box.style.cssText = "position:absolute;border:1px solid #5eead4;background:rgba(94,234,212,.16);border-radius:2px;transition:none;";
+  overlay2.layer.append(box);
+  overlay2.boxes.push(box);
+  return box;
+}
+function showHighlight(target, text) {
+  const elements = (Array.isArray(target) ? target : [target]).filter(
+    (el2) => el2?.isConnected
+  );
+  const first = elements[0];
+  const doc = first?.ownerDocument;
+  if (!doc?.body) {
+    hideHighlight();
+    return;
+  }
+  if (!overlay || overlay.layer.ownerDocument !== doc || !overlay.layer.isConnected) {
+    overlay = build(doc);
+  }
+  const { label, layer } = overlay;
+  layer.style.display = "";
+  let top = Infinity;
+  let left = Infinity;
+  let bottom = 0;
+  elements.forEach((element, index) => {
+    const rect = element.getBoundingClientRect();
+    const box = boxIn(overlay, index);
+    box.style.display = "";
+    box.style.left = `${rect.left}px`;
+    box.style.top = `${rect.top}px`;
+    box.style.width = `${rect.width}px`;
+    box.style.height = `${rect.height}px`;
+    top = Math.min(top, rect.top);
+    left = Math.min(left, rect.left);
+    bottom = Math.max(bottom, rect.bottom);
+  });
+  for (let i = elements.length; i < overlay.boxes.length; i++) {
+    overlay.boxes[i].style.display = "none";
+  }
+  if (!text) {
+    label.style.display = "none";
+    return;
+  }
+  label.style.display = "";
+  label.textContent = text;
+  label.style.left = `${Math.max(2, left)}px`;
+  label.style.top = top >= 20 ? `${top - 18}px` : `${bottom + 4}px`;
+}
+function hideHighlight() {
+  if (overlay) overlay.layer.style.display = "none";
+}
+function removeHighlight() {
+  overlay?.layer.remove();
+  overlay = null;
+}
+function startPicking(options) {
+  const doc = options.document ?? globalThis.document;
+  if (!doc?.body) return () => {
+  };
+  const was = doc.body.style.cursor;
+  doc.body.style.cursor = "crosshair";
+  const under = (event) => {
+    const target = event.target;
+    return target?.closest?.(`#${LAYER}`) ? null : target;
+  };
+  const move = (event) => {
+    const element = under(event);
+    const id = options.nodeAt(element);
+    if (element && id !== void 0) showHighlight(element, options.describe?.(id, element));
+    else hideHighlight();
+  };
+  const click = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    const target = under(event);
+    const id = options.nodeAt(target);
+    if (!options.sticky) stop();
+    if (id !== void 0) options.onPick(id, target);
+    else if (!options.sticky) options.onCancel?.();
+  };
+  const key = (event) => {
+    if (event.key !== "Escape") return;
+    stop();
+    options.onCancel?.();
+  };
+  const stop = () => {
+    doc.body.style.cursor = was;
+    doc.removeEventListener("pointermove", move, true);
+    doc.removeEventListener("click", click, true);
+    doc.removeEventListener("keydown", key, true);
+    hideHighlight();
+  };
+  doc.addEventListener("pointermove", move, true);
+  doc.addEventListener("click", click, true);
+  doc.addEventListener("keydown", key, true);
+  return stop;
+}
+
+// src/wire.ts
+var STATE_NAME = { 0: "clean", 1: "check", 2: "dirty" };
+var STATE_CODE = { clean: 0, check: 1, dirty: 2 };
+function serializeGraph(graph, now = Date.now(), options = {}) {
+  const nodes = [];
+  const wanted = options.ids ? new Set(options.ids) : null;
+  for (const node of graph.values()) {
+    if (wanted && !wanted.has(node.id)) continue;
+    const state = typeof node.core?.state === "number" ? STATE_NAME[node.core.state] : void 0;
+    nodes.push({
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      authored: node.authored,
+      deps: [...node.deps],
+      writes: [...node.writes],
+      value: node.value,
+      detail: node.detail,
+      runs: node.runs,
+      lastPulse: node.lastPulse,
+      order: node.order,
+      version: node.core?.version,
+      state,
+      loading: node.loading,
+      lazy: node.lazy,
+      props: node.props,
+      extra: node.extra,
+      source: node.source,
+      declaredAt: node.declaredAt,
+      usedAt: node.usedAt,
+      createdIn: node.createdIn,
+      bindings: node.bindings,
+      targets: node.targets,
+      setAt: node.setAt,
+      // Falls back to what the node already carries, so a relay that re-serialises a
+      // snapshot it received does not drop the description.
+      dom: options.dom?.(node.id) ?? node.dom
+    });
+  }
+  const removed = options.removed ? [...options.removed] : void 0;
+  const events = options.events?.length ? [...options.events] : void 0;
+  const cursor = options.cursor;
+  return wanted ? { t: now, nodes, partial: true, removed, events, cursor } : { t: now, nodes, events, cursor };
+}
+function snapshotToRenderMap(snapshot) {
+  const map = /* @__PURE__ */ new Map();
+  for (const node of snapshot.nodes) {
+    map.set(node.id, {
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      authored: node.authored,
+      deps: new Set(node.deps),
+      writes: new Set(node.writes),
+      value: node.value,
+      detail: node.detail,
+      runs: node.runs,
+      lastPulse: node.lastPulse,
+      order: node.order,
+      core: { version: node.version, state: node.state ? STATE_CODE[node.state] : void 0 },
+      loading: node.loading,
+      lazy: node.lazy,
+      props: node.props,
+      extra: node.extra,
+      source: node.source,
+      declaredAt: node.declaredAt,
+      usedAt: node.usedAt,
+      createdIn: node.createdIn,
+      bindings: node.bindings,
+      targets: node.targets,
+      setAt: node.setAt,
+      dom: node.dom
+    });
+  }
+  return map;
+}
+function applySnapshot(graph, snapshot) {
+  if (!snapshot.partial) return snapshotToRenderMap(snapshot);
+  for (const [id, node] of snapshotToRenderMap(snapshot)) graph.set(id, node);
+  for (const id of snapshot.removed ?? []) graph.delete(id);
+  return graph;
+}
+
+// src/hook.ts
+var HISTORY = 500;
+var HOOK = "__FLUIXI_DEVTOOLS_HOOK__";
+function installDevtoolsHook() {
+  const host2 = globalThis;
+  const existing = host2[HOOK];
+  if (existing) {
+    existing.copies = (existing.copies ?? 1) + 1;
+    return existing;
+  }
+  let observed = null;
+  let owned = false;
+  let version = null;
+  const history = [];
+  const hook = {
+    copies: 1,
+    inject(runtime) {
+      version = runtime.version;
+      if (!observed) {
+        observed = (runtime.watch ?? observeGraph)({ observe: runtime.observeReactiveNodes });
+        owned = runtime.watch !== void 0;
+        return;
+      }
+      if (owned || !runtime.watch) return;
+      observed.detach();
+      observed = runtime.watch({ observe: runtime.observeReactiveNodes });
+      owned = true;
+    },
+    get observed() {
+      return observed;
+    },
+    get version() {
+      return version;
+    },
+    highlight(target) {
+      if (!observed || target === null) {
+        hideHighlight();
+        return;
+      }
+      if (typeof target === "number") {
+        const found = observed.elementsFor(target);
+        if (found.length) showHighlight(found, observed.graph.get(target)?.label);
+        else hideHighlight();
+        return;
+      }
+      const [head, ...steps] = target.split("/");
+      const [tag, root] = (head ?? "").split(":");
+      let node = observed.domFor(Number(tag))[Number(root)];
+      for (const step of steps) node = node?.children[Number(step)];
+      const element = node?.element;
+      if (element) showHighlight(element, element.tagName.toLowerCase());
+      else hideHighlight();
+    },
+    snapshot({ partial = false, since } = {}) {
+      if (!observed) return null;
+      const changed = observed.sample();
+      const cursor = observed.revision;
+      history.push(...observed.takeEvents());
+      if (history.length > HISTORY) history.splice(0, history.length - HISTORY);
+      const events = history.slice();
+      const dom = (id) => {
+        const described = observed.domFor(id);
+        return described.length ? withoutElements(described) : void 0;
+      };
+      const cursors = typeof observed.changedSince === "function";
+      const whole = partial === false || since === void 0 || !cursors || observed.outrun(since);
+      if (whole) {
+        if (partial && !cursors) {
+          return serializeGraph(observed.graph, Date.now(), {
+            ids: changed,
+            removed: observed.takeRemoved(),
+            events,
+            dom
+          });
+        }
+        return serializeGraph(observed.graph, Date.now(), { events, dom, cursor });
+      }
+      return serializeGraph(observed.graph, Date.now(), {
+        ids: observed.changedSince(since),
+        removed: observed.removedSince(since),
+        events,
+        dom,
+        cursor
+      });
+    }
+  };
+  host2[HOOK] = hook;
+  return hook;
+}
+
+// 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/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 = (place2) => {
+  const held = bindingIds.get(place2);
+  if (held !== void 0) return held;
+  const id = -100 - bindingIds.size;
+  bindingIds.set(place2, 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 memo2 = /* @__PURE__ */ new Map();
+  const depth = (id, seen) => {
+    if (memo2.has(id)) return memo2.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);
+    memo2.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 opened2 = /* @__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, at3) => {
+    const next = Math.min(maxZoom(), Math.max(MIN_ZOOM, scale * factor));
+    if (next === scale) return;
+    panX = at3.x - (at3.x - panX) * next / scale;
+    panY = at3.y - (at3.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 walk2 = (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);
+          }
+        }
+      }
+    };
+    walk2(feeds);
+    walk2(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 at3 = target.source;
+        const place2 = `${target.name ?? ""}|${target.element}|${at3?.file ?? ""}:${at3?.line ?? ""}:${at3?.column ?? ""}`;
+        const id = bindingId(place2);
+        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,
+          ...at3 ? { source: at3 } : {}
+        };
+        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((at3, 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 ${(at3.file ?? "").split("/").pop() ?? "?"}:${at3.line ?? ""}${at3.compiled && at3.compiled.line !== at3.line ? `→${at3.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: at3
+        });
+        added = true;
+      });
+    }
+    return added ? shown : graph;
+  }
+  const inProject = (at3) => !!at3?.file && at3.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 keep2 = (n) => VIEW_CARD.has(n.kind) || kinds.has(n.kind);
+    const out = /* @__PURE__ */ new Map();
+    for (const [id, node] of graph) {
+      if (!keep2(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 && keep2(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 at3 = id;
+      let outermost = id;
+      const seen = /* @__PURE__ */ new Set();
+      while (at3 !== void 0 && !seen.has(at3)) {
+        seen.add(at3);
+        if (folded.has(at3) && at3 !== id) outermost = at3;
+        at3 = graph.get(at3)?.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 summary2 = el("title");
+      summary2.textContent = `${node.kind} ${node.label}${node.lazy ? " (lazy)" : ""}${full ? ` = ${full}` : ""}${placeOf(node) ? `
+${placeOf(node).file ?? ""}:${placeOf(node).line ?? ""}:${placeOf(node).column ?? ""}` : ""}`;
+      g.appendChild(summary2);
+      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 at3 = graph.get(id)?.createdIn;
+      while (at3 !== void 0 && !seen.has(at3)) {
+        seen.add(at3);
+        const up = graph.get(at3);
+        if (up?.kind === "store") return true;
+        at3 = 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))) && !opened2.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) {
+      opened2.add(id);
+      closed.delete(id);
+    } else {
+      closed.add(id);
+      opened2.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 place2 = placeOf(node);
+        const where = place2 ? shortSource(place2) : "";
+        if (eles.source.textContent !== where) {
+          eles.source.textContent = where;
+          eles.sourceTitle.textContent = place2 ? `${place2.file ? shortenPath(place2.file, options.root) : ""}:${place2.line ?? ""}:${place2.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 at3 = edgeStaged.get(el2);
+        const age = at3 === void 0 ? Infinity : now - at3;
+        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; }
+`;
+
+// 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, at3) {
+  const card = doc.createElement("div");
+  card.className = "fx-float";
+  const spot = at3 ?? {
+    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() };
+}
+function makeFloatable(pane, options) {
+  const doc = pane.ownerDocument;
+  let card = null;
+  let home = null;
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-float-btn";
+  button.textContent = "⇱";
+  button.title = `Float ${options.title}`;
+  pane.classList.add("fx-floatable");
+  pane.append(button);
+  const keep2 = new MutationObserver(() => {
+    if (button.parentNode !== pane) pane.append(button);
+  });
+  keep2.observe(pane, { childList: true });
+  function dock() {
+    if (!card || !home) return;
+    home.parent.insertBefore(pane, home.before);
+    card.remove();
+    card = null;
+    home = null;
+    pane.classList.remove("fx-floated");
+    button.textContent = "⇱";
+    button.title = `Float ${options.title}`;
+    options.onChange?.(false);
+  }
+  function float() {
+    if (card || !pane.parentNode) return;
+    home = { parent: pane.parentNode, before: pane.nextSibling };
+    const built = floatCard(doc, options.title, options.at);
+    card = built.card;
+    card.append(pane);
+    doc.body.appendChild(card);
+    pane.classList.add("fx-floated");
+    button.textContent = "⇲";
+    button.title = `Put ${options.title} back`;
+    options.onChange?.(true);
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (card) dock();
+    else float();
+  });
+  return {
+    get floating() {
+      return card !== null;
+    },
+    toggle() {
+      if (card) dock();
+      else float();
+      return card !== null;
+    },
+    dock,
+    destroy() {
+      keep2.disconnect();
+      dock();
+      button.remove();
+      pane.classList.remove("fx-floatable");
+    }
+  };
+}
+var FLOAT_CSS = `
+.fx-floatable { position: relative; }
+.fx-float-btn {
+  position: absolute; top: 2px; right: 2px; z-index: 5;
+  width: 18px; height: 18px; padding: 0; line-height: 1;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 4px;
+  cursor: pointer; opacity: 0; transition: opacity .12s;
+}
+.fx-floatable:hover .fx-float-btn, .fx-float-btn:focus-visible { opacity: 1; }
+.fx-float-btn:hover { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }
+
+.fx-float {
+  position: fixed; z-index: 60; display: flex; flex-direction: column;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 8px;
+  box-shadow: 0 12px 34px rgba(0, 0, 0, .5); overflow: hidden;
+}
+.fx-float-bar {
+  display: flex; align-items: center; padding: 4px 8px; cursor: move;
+  font-size: 11px; color: var(--fx-muted, #8a90a2);
+  background: var(--fx-bg, #0f1115); border-bottom: 1px solid var(--fx-line, #262a35);
+  user-select: none;
+}
+/* The pane fills the card, whatever it was sized to in the layout it came from. */
+.fx-float > .fx-floated {
+  flex: 1; min-height: 0; width: auto; height: auto; overflow: auto;
+}
+/* Edges and corners. Thin, and over everything, so a card can be resized from whichever
+   side is reachable. */
+.fx-float-h { position: absolute; z-index: 1; }
+.fx-float-n, .fx-float-s { left: 8px; right: 8px; height: 6px; cursor: ns-resize; }
+.fx-float-e, .fx-float-w { top: 8px; bottom: 8px; width: 6px; cursor: ew-resize; }
+.fx-float-n { top: -3px; }
+.fx-float-s { bottom: -3px; }
+.fx-float-e { right: -3px; }
+.fx-float-w { left: -3px; }
+.fx-float-ne, .fx-float-nw, .fx-float-se, .fx-float-sw { width: 14px; height: 14px; }
+.fx-float-nw { top: -3px; left: -3px; cursor: nwse-resize; }
+.fx-float-ne { top: -3px; right: -3px; cursor: nesw-resize; }
+.fx-float-sw { bottom: -3px; left: -3px; cursor: nesw-resize; }
+.fx-float-se {
+  bottom: 0; right: 0; cursor: nwse-resize;
+  background: linear-gradient(135deg, transparent 50%, var(--fx-line, #262a35) 50%);
+}
+`;
+
+// src/value-pane.ts
+var escape2 = (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 = escape2(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 escape3 = (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 escape3(text);
+  return `<button type="button" class="ins-at" data-file="${escape3(source.file)}" data-line="${source.line ?? ""}" data-column="${source.column ?? ""}" title="Open ${escape3(source.file)}">${escape3(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 same2 = out?.line === source.line && out?.column === source.column;
+  return out && !same2 ? `${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">${escape3(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 = escape3(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>${escape3(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(escape3), bound].filter(Boolean).join(", ")}</b>` : "<i>nothing yet</i>"}</span>`,
+        writes.length ? `<span>✎ writes <b>${escape3(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>${escape3(owner)}</b></span>` : "",
+        reaching.length ? `<span>◨ reaches <b>${escape3(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="${escape3(row.value)}" data-label="${escape3(row.label)}"` : ""} title="${escape3(row.value ?? row.label)}">⌘ ${escape3(row.label)}${row.value ? `=<b>${escape3(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 at3 = where?.file ? bothAt(where, root) : "";
+          return `<span>⇥ ${escape3(p.name)}=<b>${escape3(clip(p.value ?? "", 60))}</b>${at3 ? ` ${place(at3, where, reveals)}` : ""}</span>`;
+        }),
+        made.length ? `<span>▸ made <b>${escape3(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>${escape3(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="${escape3(value)}" title="Click to set ${escape3(node.label)}">${escape3(clip(value))}</div>` : `<div class="ins-val${value.length > 140 ? " ins-more" : ""}"${value.length > 140 ? ` data-full="${escape3(value)}" data-label="${escape3(node.label)}"` : ""} title="${escape3(value)}">${escape3(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">${escape3(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>${escape3(node.label)}</b>${text ? ` ${place(text, where, reveals)}` : ""}</span>`;
+      }).join("");
+      const relations = [
+        owner ? `<span>◧ rendered by <b>${escape3(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="${escape3(row.value)}" data-label="${escape3(row.label)}"` : ""} title="${escape3(row.value ?? row.label)}">⌘ ${escape3(row.label)}${row.value ? `=<b>${escape3(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>${escape3(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">${escape3(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); }
+`;
+
+// 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 escape4 = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var SIGN = { added: "+", removed: "−", changed: "~" };
+function pretty(json2) {
+  if (!json2) return void 0;
+  try {
+    return JSON.stringify(JSON.parse(json2), null, 2);
+  } catch {
+    return void 0;
+  }
+}
+function sideOf(text, json2, cls) {
+  const block = pretty(json2);
+  if (!block) return `<span class="ch-${cls}">${escape4(text ?? "")}</span>`;
+  return `<div class="ch-block ch-${cls}"><button type="button" class="ch-copy" title="Copy" data-copy="${escape4(block)}">copy</button><pre class="ch-json">${escape4(block)}</pre></div>`;
+}
+function changeRows(change2, limit = Infinity) {
+  if (!change2?.entries?.length) return "";
+  const shown = change2.entries.slice(0, limit);
+  const hidden = change2.entries.length - shown.length + (change2.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">${escape4(entry.key)}</span><span class="ch-sides">${sides}</span></div>`;
+  }).join("");
+  const size = change2.length ? `<div class="ch-size">${change2.length.from} → ${change2.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/timeline.ts
+var escape5 = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var clock = (t) => {
+  const d = new Date(t);
+  const pad = (n, width = 2) => String(n).padStart(width, "0");
+  return `${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}.${pad(d.getMilliseconds(), 3)}`;
+};
+function subject(commit, nameOf) {
+  if (!commit.cause) return commit.commit === 0 ? "first render" : "continued";
+  return nameOf(commit.cause);
+}
+function change(commit) {
+  const cause = commit.cause;
+  if (!cause || cause.from === void 0 || cause.to === void 0) return "";
+  return `${cause.from} → ${cause.to}`;
+}
+function detail(commit, nameOf) {
+  const lines = [`${subject(commit, nameOf)} ${change(commit)}`.trim()];
+  const named = (kind, verb) => {
+    const ids = commit.events.filter((e) => e.kind === kind && e !== commit.cause).map(nameOf);
+    if (ids.length) lines.push(`${verb}: ${[...new Set(ids)].join(", ")}`);
+  };
+  named("ran", "ran");
+  named("write", "written");
+  named("created", "made");
+  named("disposed", "gone");
+  return lines.join("\n");
+}
+function summary(commit) {
+  const counts = { ran: 0, created: 0, disposed: 0, write: 0 };
+  for (const event of commit.events) counts[event.kind]++;
+  const writes = counts.write - (commit.cause ? 1 : 0);
+  return [
+    counts.ran && `${counts.ran} ran`,
+    writes > 0 && `${writes} written`,
+    counts.created && `${counts.created} made`,
+    counts.disposed && `${counts.disposed} gone`
+  ].filter(Boolean).join(" · ");
+}
+function createTimeline(host2, options = {}) {
+  const empty = options.empty ?? "nothing has happened yet";
+  const limit = options.limit ?? 100;
+  let events = [];
+  let seen = -1;
+  let selected = null;
+  let filter = "";
+  let signature = "";
+  let paused = false;
+  host2.innerHTML = '<div class="tl-head"><input class="tl-filter" type="search" placeholder="filter by name or value" aria-label="Filter the timeline" /><button type="button" class="tl-pause" title="Stop taking new updates, so the list holds still while you read it">❚❚</button></div><div class="tl-list"></div>';
+  const input = host2.querySelector(".tl-filter");
+  const list = host2.querySelector(".tl-list");
+  const pause = host2.querySelector(".tl-pause");
+  const all = () => toCommits(events).slice(-limit).reverse();
+  const idsOf = (commit) => {
+    const ids = /* @__PURE__ */ new Set();
+    for (const event of commit.events) {
+      ids.add(event.id);
+      if (event.by !== void 0) ids.add(event.by);
+    }
+    return [...ids];
+  };
+  const haystack = (commit, nameOf) => `${detail(commit, nameOf)} ${summary(commit)}`.toLowerCase();
+  const shown = (nameOf) => filter ? all().filter((c) => haystack(c, nameOf).includes(filter)) : all();
+  input.addEventListener("input", () => {
+    filter = input.value.trim().toLowerCase();
+    signature = "";
+  });
+  const showPaused = () => {
+    pause.textContent = paused ? "▶" : "❚❚";
+    pause.classList.toggle("on", paused);
+    pause.title = paused ? "Taking updates again" : "Stop taking new updates, so the list holds still while you read it";
+  };
+  pause.addEventListener("click", () => {
+    paused = !paused;
+    showPaused();
+    signature = "";
+  });
+  list.addEventListener("click", (e) => {
+    if (handleCopyClick(e)) return;
+    const row = e.target?.closest?.(".tl-commit");
+    if (!row) return;
+    const number = Number(row.dataset.commit);
+    if (e.target.classList.contains("tl-more")) {
+      const full = all().find((c) => c.commit === number);
+      if (full) options.onExpand?.(full);
+      return;
+    }
+    selected = selected === number ? null : number;
+    const commit = all().find((c) => c.commit === selected) ?? null;
+    options.onSelect?.(commit ? idsOf(commit) : [], commit);
+    signature = "";
+  });
+  return {
+    setPaused(next) {
+      paused = next;
+      showPaused();
+      signature = "";
+    },
+    get paused() {
+      return paused;
+    },
+    push(incoming) {
+      if (paused) return;
+      let added = false;
+      for (const event of incoming) {
+        if (event.seq <= seen) continue;
+        events.push(event);
+        seen = event.seq;
+        added = true;
+      }
+      if (!added) return;
+      if (events.length > limit * 40) events = events.slice(-limit * 40);
+    },
+    render(graph) {
+      const nameOf = (e) => graph.get(e.id)?.label ?? e.label ?? `#${e.id}`;
+      const rows = shown(nameOf);
+      const next = `${seen}|${selected ?? ""}|${filter}|${rows.length}|${graph.size}`;
+      if (next === signature) return;
+      signature = next;
+      if (!rows.length) {
+        list.innerHTML = `<span class="tl-empty">${escape5(filter ? "nothing matches" : empty)}</span>`;
+        return;
+      }
+      list.innerHTML = rows.map((commit) => {
+        const open = commit.commit === selected;
+        const did = summary(commit);
+        const moved = change(commit);
+        const parts = [
+          ["ran", "ran"],
+          ["write", "written"],
+          ["created", "made"],
+          ["disposed", "gone"]
+        ];
+        const body = parts.map(([kind, verb]) => {
+          const names = [
+            ...new Set(
+              commit.events.filter((e) => e.kind === kind && e !== commit.cause).map(nameOf)
+            )
+          ];
+          return names.length ? `<div class="tl-part"><span class="tl-verb">${verb}</span> ${escape5(names.join(", "))}</div>` : "";
+        }).join("");
+        return `<div class="tl-commit${open ? " selected" : ""}" data-commit="${commit.commit}" title="${escape5(detail(commit, nameOf))}"><div class="tl-line"><span class="tl-caret">${open ? "▾" : "▸"}</span><span class="tl-time">${clock(commit.t)}</span><span class="tl-name">${escape5(subject(commit, nameOf))}</span>` + (did ? `<span class="tl-did">${escape5(did)}</span>` : "") + "</div>" + // Open, the value gets the width and wraps.
+        (open ? `<div class="tl-body">${moved ? `<div class="tl-change">${escape5(moved)}</div>` : ""}${changeRows(commit.cause?.change, 6)}${body}${// Only worth offering when there is more than the row can hold.
+        options.onExpand && (commit.cause?.change || commit.events.length > 6) ? '<button type="button" class="tl-more">open in full</button>' : ""}</div>` : "") + "</div>";
+      }).join("");
+    },
+    selected() {
+      const commit = all().find((c) => c.commit === selected);
+      return commit ? idsOf(commit) : [];
+    },
+    clear() {
+      events = [];
+      seen = -1;
+      selected = null;
+      signature = "";
+      list.innerHTML = `<span class="tl-empty">${escape5(empty)}</span>`;
+    }
+  };
+}
+var TIMELINE_CSS = `
+.tl-head { position: relative; display: flex; gap: 4px; padding: 0 .25rem; }
+.tl-pause {
+  position: absolute; right: .4rem; top: 40%; transform: translateY(-50%);
+  flex: none; width: 26px; cursor: pointer; font: inherit; font-size: 10px;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;
+  background: transparent; color: var(--fx-muted, #8a90a2);
+}
+.tl-pause:hover { color: var(--fx-label, #e7e9ee); }
+.tl-pause.on { color: var(--fx-accent, #5eead4); border-color: var(--fx-accent, #5eead4); }
+.tl-filter {
+  flex: 1; min-width: 0; box-sizing: border-box; padding: 3px 6px;
+  font: inherit; font-size: 11.5px; border-radius: 4px;
+  border: 1px solid var(--fx-line, #ffffff1f);
+  background: var(--fx-input, transparent); color: var(--fx-label, #e7e9ee);
+  padding-inline-end: 2rem;
+}
+.tl-empty { color: var(--fx-muted, #8a90a2); font-size: 12px; }
+.tl-commit { padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 11.5px; }
+.tl-commit:hover { background: var(--fx-hover, #ffffff10); }
+.tl-commit.selected { background: var(--fx-selected, #ffffff1a); }
+.tl-line { display: flex; align-items: baseline; gap: 6px; }
+.tl-caret { color: var(--fx-muted, #8a90a2); font-size: 9px; flex: none; }
+.tl-time { font-family: ui-monospace, monospace; font-size: 10px; color: var(--fx-muted, #8a90a2); flex: none; }
+.tl-name { color: var(--fx-label, #e7e9ee); font-family: ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.tl-did { margin-left: auto; color: var(--fx-muted, #8a90a2); flex: none; }
+.tl-body { margin: 3px 0 2px 15px; }
+/* Wraps: an open entry exists to show the whole value. */
+.tl-change {
+  font-family: ui-monospace, monospace; font-size: 11px;
+  color: var(--fx-accent, #5eead4); overflow-wrap: anywhere; white-space: pre-wrap;
+}
+.tl-part { margin-top: 2px; color: var(--fx-label, #e7e9ee); font-size: 11px; overflow-wrap: anywhere; }
+.tl-verb { color: var(--fx-muted, #8a90a2); }
+.tl-more {
+  margin-top: 5px; padding: 2px 8px; font: inherit; font-size: 10.5px; cursor: pointer;
+  border: 1px solid var(--fx-line, #ffffff1f); border-radius: 4px;
+  background: transparent; color: var(--fx-muted, #8a90a2);
+}
+.tl-more:hover { color: var(--fx-label, #e7e9ee); }
+${CHANGE_CSS}`;
+
+// src/kind-filter.ts
+var FILTERABLE_KINDS = [
+  "state",
+  "memo",
+  "effect",
+  "store",
+  "resource",
+  "component",
+  "provider",
+  "control",
+  "router",
+  "handler",
+  "context",
+  "directive"
+];
+var LABEL = { handler: "route" };
+function createKindFilter(host2, options) {
+  const doc = host2.ownerDocument;
+  const kinds = options.kinds ?? FILTERABLE_KINDS;
+  const on = new Set(kinds);
+  const root = doc.createElement("div");
+  root.className = "fx-kinds";
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-kinds-button fx-dropdown-btn";
+  button.setAttribute("aria-haspopup", "true");
+  button.setAttribute("aria-expanded", "false");
+  button.title = "Choose which kinds of node the graph draws";
+  const caret = doc.createElement("div");
+  caret.className = "fx-dropdown-caret";
+  const panel = doc.createElement("div");
+  panel.className = "fx-kinds-panel";
+  if (options.panelClass) {
+    panel.classList.add(...options.panelClass.split(/\s+/).filter((c) => c));
+  }
+  panel.hidden = true;
+  const all = doc.createElement("input");
+  all.type = "checkbox";
+  const allRow = doc.createElement("label");
+  allRow.className = "fx-kinds-all";
+  allRow.append(all, doc.createTextNode("all"));
+  const boxes = /* @__PURE__ */ new Map();
+  for (const kind of kinds) {
+    const box = doc.createElement("input");
+    box.type = "checkbox";
+    box.checked = true;
+    const row = doc.createElement("label");
+    row.append(box, doc.createTextNode(LABEL[kind] ?? kind));
+    panel.append(row);
+    boxes.set(kind, box);
+  }
+  panel.prepend(allRow);
+  root.append(button, panel);
+  host2.append(root);
+  const everything = () => on.size === kinds.length;
+  const chosen = () => kinds.filter((kind) => on.has(kind));
+  function paint() {
+    const name = options.label ?? "Kinds";
+    button.textContent = everything() ? name : `${name} · ${on.size}`;
+    button.classList.toggle("on", !everything());
+    all.checked = everything();
+    button.appendChild(caret);
+    all.indeterminate = on.size > 0 && !everything();
+    for (const [kind, box] of boxes) box.checked = on.has(kind);
+  }
+  function report() {
+    options.onChange(everything() ? null : chosen());
+  }
+  for (const [kind, box] of boxes) {
+    box.addEventListener("change", () => {
+      if (box.checked) on.add(kind);
+      else on.delete(kind);
+      paint();
+      report();
+    });
+  }
+  all.addEventListener("change", () => {
+    for (const kind of kinds) on.add(kind);
+    paint();
+    report();
+  });
+  const close = () => {
+    panel.hidden = true;
+    button.setAttribute("aria-expanded", "false");
+  };
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    panel.hidden = !panel.hidden;
+    button.setAttribute("aria-expanded", String(!panel.hidden));
+  });
+  panel.addEventListener("click", (event) => event.stopPropagation());
+  const away = () => close();
+  const key = (event) => {
+    if (event.key === "Escape") close();
+  };
+  doc.addEventListener("click", away);
+  doc.addEventListener("keydown", key);
+  paint();
+  return {
+    get selected() {
+      return chosen();
+    },
+    select(next) {
+      on.clear();
+      for (const kind of next ?? kinds) on.add(kind);
+      paint();
+    },
+    destroy() {
+      doc.removeEventListener("click", away);
+      doc.removeEventListener("keydown", key);
+      root.remove();
+    }
+  };
+}
+var KIND_FILTER_CSS = `
+.fx-kinds { position: relative; display: inline-flex; }
+.fx-kinds-button { white-space: nowrap; }
+/* The hidden attribute is display:none from the user agent, which a class setting display outranks. */
+.fx-kinds-panel[hidden] { display: none; }
+.fx-kinds-panel {
+  position: absolute; top: calc(100% + 4px); z-index: 40;
+  display: grid; gap: 2px; padding: 6px 8px; min-width: 132px;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
+  }
+.fx-kinds-panel:not(.fx-panel-left){ right: 0; }
+.fx-kinds-panel.fx-panel-left { left: 0; }
+.fx-kinds-panel label {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.fx-kinds-panel label:hover { color: var(--fx-label, #e7e9ee); }
+.fx-kinds-panel input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.fx-kinds-all {
+  padding-bottom: 4px; margin-bottom: 2px;
+  border-bottom: 1px solid var(--fx-line, #262a35);
+  color: var(--fx-label, #e7e9ee) !important;
+}
+`;
+var DROPDOWN_FILTER_CSS = `
+.fx-dropdown-btn { background-color: transparent; appearance: none; border: 1px solid var(--line-strong); outline: none; border-radius: .25rem; padding-block: .25rem; padding-inline: .875rem; font-size: .75rem; cursor: pointer }
+.fx-dropdown-btn:hover { border-color: color-mix(in oklab, var(--accent) 50%, transparent); background-color: var(--bg); }
+.fx-dropdown-caret { width: 0;height: 0;border-left: .15rem solid transparent; border-right: .15rem solid transparent; border-top: .15rem solid currentColor; transition: transform 0.2s ease; right: .4rem; top: 50%; color: color-mix(in oklab, var(--muted) 50%, transparent); position: absolute; }
+`;
+
+// src/menu.ts
+function createMenu(host2, options) {
+  const doc = host2.ownerDocument;
+  const root = doc.createElement("div");
+  root.className = "fx-menu";
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-menu-button fx-dropdown-btn";
+  button.setAttribute("aria-haspopup", "true");
+  button.setAttribute("aria-expanded", "false");
+  if (options.hint) button.title = options.hint;
+  const caret = doc.createElement("div");
+  caret.className = "fx-dropdown-caret";
+  const panel = doc.createElement("div");
+  panel.className = "fx-menu-panel";
+  if (options.menuClass) {
+    panel.classList.add(...options.menuClass.split(/\s+/).filter((c) => c));
+  }
+  panel.hidden = true;
+  const boxes = /* @__PURE__ */ new Map();
+  for (const item of options.items) {
+    if (item.type === "action") {
+      const run = doc.createElement("button");
+      run.type = "button";
+      run.className = "fx-menu-action";
+      run.textContent = item.label;
+      if (item.hint) run.title = item.hint;
+      run.addEventListener("click", () => {
+        close();
+        item.onRun();
+      });
+      panel.append(run);
+      continue;
+    }
+    const box = doc.createElement("input");
+    box.type = "checkbox";
+    box.checked = item.on === true;
+    const row = doc.createElement("label");
+    if (item.hint) row.title = item.hint;
+    row.append(box, doc.createTextNode(item.label));
+    box.addEventListener("change", () => {
+      paint();
+      item.onChange(box.checked);
+    });
+    panel.append(row);
+    boxes.set(item.label, box);
+  }
+  root.append(button, panel);
+  host2.append(root);
+  function paint() {
+    let on = 0;
+    for (const box of boxes.values()) if (box.checked) on++;
+    button.textContent = on ? `${options.label} · ${on}` : options.label;
+    button.appendChild(caret);
+    button.classList.toggle("on", on > 0);
+  }
+  function close() {
+    panel.hidden = true;
+    button.setAttribute("aria-expanded", "false");
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    panel.hidden = !panel.hidden;
+    button.setAttribute("aria-expanded", String(!panel.hidden));
+  });
+  panel.addEventListener("click", (event) => event.stopPropagation());
+  const away = () => close();
+  const key = (event) => {
+    if (event.key === "Escape") close();
+  };
+  doc.addEventListener("click", away);
+  doc.addEventListener("keydown", key);
+  paint();
+  return {
+    set(label, on) {
+      const box = boxes.get(label);
+      if (!box) return;
+      box.checked = on;
+      paint();
+    },
+    destroy() {
+      doc.removeEventListener("click", away);
+      doc.removeEventListener("keydown", key);
+      root.remove();
+    }
+  };
+}
+var MENU_CSS = `
+/* The button itself is styled by DROPDOWN_FILTER_CSS, shared with the kind filter. */
+.fx-menu { position: relative; display: inline-flex; }
+.fx-menu-button { white-space: nowrap; position: relative; padding-inline-end: 1.1rem; }
+/* hidden is display:none from the user agent, which a class setting display outranks. */
+.fx-menu-panel[hidden] { display: none; }
+.fx-menu-panel {
+  position: absolute; top: calc(100% + 4px); z-index: 40;
+  display: grid; gap: 2px; padding: 6px 8px; min-width: 150px;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
+}
+.fx-menu-panel:not(.fx-panel-left){ right: 0; }
+.fx-menu-panel.fx-panel-left { left: 0; }
+.fx-menu-panel label {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.fx-menu-panel label:hover { color: var(--fx-label, #e7e9ee); }
+.fx-menu-panel input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.fx-menu-action {
+  text-align: left; padding: 2px 0; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 11px; color: var(--fx-muted, #8a90a2);
+  /* A button does not inherit this, so an action read lowercase beside uppercase toggles. */
+  text-transform: inherit; letter-spacing: inherit;
+}
+.fx-menu-action:hover { color: var(--fx-accent, #5eead4); }
+`;
+
+// src/detail-panel.ts
+var escape6 = (text) => text.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]);
+var clock2 = (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_W2 = 320;
+var MIN_H2 = 200;
+function draggable2(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(host2, options = {}) {
+  const panel = host2.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>';
+  host2.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 place2 = () => {
+    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`;
+  };
+  draggable2(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));
+    place2();
+  });
+  draggable2(grip, (dx, dy) => {
+    width = Math.max(MIN_W2, width + dx);
+    height = Math.max(MIN_H2, height + dy);
+    place2();
+  });
+  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)} · ${clock2(commit.t)}` : `${commit.commit === 0 ? "first render" : `commit ${commit.commit}`} · ${clock2(commit.t)}`;
+      const headline = cause && cause.from !== void 0 && cause.to !== void 0 ? `<div class="dp-change"><span class="ch-from">${escape6(cause.from)}</span><span class="ch-arrow">→</span><span class="ch-to">${escape6(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}">${escape6(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>${escape6(t.name ? `${t.name} of ${t.element}` : t.element)}<span class="dp-where">${escape6(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);
+        place2();
+      }
+      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}`;
+
+// src/export.ts
+var at2 = (source) => {
+  if (!source) return void 0;
+  const where = `${source.file ?? ""}:${source.line ?? ""}:${source.column ?? ""}`;
+  const out = source.compiled;
+  const same2 = out?.line === source.line && out?.column === source.column;
+  return out && !same2 ? `${where} (out ${out.line ?? ""}:${out.column ?? ""})` : where;
+};
+function naming(graph) {
+  const seen = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) seen.set(node.label, (seen.get(node.label) ?? 0) + 1);
+  return (id) => {
+    const node = graph.get(id);
+    if (!node) return `#${id}`;
+    return (seen.get(node.label) ?? 0) > 1 ? `${node.label}#${node.id}` : node.label;
+  };
+}
+function exportGraph(graph, options = {}) {
+  const limit = options.limit ?? 400;
+  const name = naming(graph);
+  const nodes = [...graph.values()].map((node) => {
+    let value = node.detail ?? node.value;
+    if (node.read) {
+      try {
+        value = formatValue(node.read(), limit);
+      } catch {
+      }
+    }
+    const feeds = [...node.deps].map(name);
+    const wrote = [...node.writes].map(name);
+    const state = nodeState(node);
+    return {
+      id: node.id,
+      label: node.label,
+      kind: node.kind,
+      ...node.authored === false ? { authored: false } : {},
+      ...value ? { value } : {},
+      ...node.runs ? { runs: node.runs } : {},
+      // Only a node with a core has one; a static node would report a version of 0.
+      ...node.core?.version !== void 0 ? { version: nodeVersion(node) } : {},
+      ...state ? { state } : {},
+      ...feeds.length ? { reads: feeds } : {},
+      ...wrote.length ? { writes: wrote } : {},
+      ...node.createdIn !== void 0 ? { madeIn: name(node.createdIn) } : {},
+      ...at2(node.source) ? { source: at2(node.source) } : {},
+      ...at2(node.declaredAt) ? { declaredAt: at2(node.declaredAt) } : {},
+      ...at2(node.usedAt) ? { usedAt: at2(node.usedAt) } : {},
+      ...node.targets?.length ? {
+        updates: node.targets.map((target) => {
+          const what = target.name ? `${target.name} of ${target.element}` : target.element;
+          const where = at2(target.source);
+          return where ? `${what} — ${where}` : what;
+        })
+      } : {},
+      ...node.setAt?.length ? { setAt: node.setAt.map((s) => at2(s)).filter(Boolean) } : {}
+    };
+  });
+  return {
+    t: Date.now(),
+    from: options.fromSource ? "source" : "running application",
+    nodes,
+    ...options.events?.length ? { events: [...options.events] } : {}
+  };
+}
+function graphToJson(graph, options = {}) {
+  return JSON.stringify(exportGraph(graph, options), null, 2);
+}
+export {
+  CHANGE_CSS,
+  DETAIL_PANEL_CSS,
+  DEVTOOLS_CSS,
+  DROPDOWN_FILTER_CSS,
+  FILTERABLE_KINDS,
+  FLOAT_CSS,
+  INSPECTOR_CSS,
+  KIND_FILTER_CSS,
+  MENU_CSS,
+  TIMELINE_CSS,
+  TREE_CSS,
+  TREE_KINDS,
+  VALUE_PANE_CSS,
+  annotationOf,
+  applySnapshot,
+  callSite,
+  changeRows,
+  componentTree,
+  copyText,
+  createComponentTree,
+  createDetailPanel,
+  createGraphView,
+  createInspector,
+  createKindFilter,
+  createMenu,
+  createReactor,
+  createTimeline,
+  createValuePane,
+  currentCallSite,
+  describeNode,
+  devtoolsPlugins,
+  diffValues,
+  exportGraph,
+  formatValue,
+  graphToJson,
+  handleCopyClick,
+  hideHighlight,
+  indentValue,
+  installDevtoolsHook,
+  makeFloatable,
+  markReactiveSource,
+  nodeState,
+  nodeVersion,
+  observeGraph,
+  pluginBadge,
+  pluginRows,
+  registerDevtoolsPlugin,
+  removeHighlight,
+  serializeGraph,
+  shorten,
+  shortenPath,
+  showHighlight,
+  snapshotToRenderMap,
+  startPicking,
+  toCommits
+};