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

package/dist/observe.mjs

@@ -0,0 +1,1345 @@
+// src/observe.ts
+import {
+  observeReactiveNodes,
+  untrack as untrack2
+} from "@fluixi/reactive/signal";
+
+// 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 at = name === void 0 ? { line, column } : { line, column, name };
+    HOLES.set(accessor, at);
+    try {
+      Object.defineProperty(accessor, HOLE_TAG, { value: at, configurable: true });
+    } catch {
+    }
+  }
+  shared.pending = null;
+  return accessor;
+}
+var PROPS = /* @__PURE__ */ new WeakMap();
+function markProps(props, at) {
+  if (props && typeof props === "object") PROPS.set(props, at);
+  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/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 fallback;
+  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 (!fallback && !REPORTING.some((part) => frame.includes(part))) fallback = locate2(frame, origin);
+  }
+  return fallback ? { location: { ...fallback, external: true }, external: true } : void 0;
+}
+function currentCallSite(origin) {
+  return callSite(new Error().stack, origin);
+}
+
+// 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/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;
+}
+
+// src/instrument.ts
+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"
+};
+
+// 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, detail) {
+      if (by === void 0) commit++;
+      push({ kind: "write", id, by, ...detail });
+    },
+    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;
+    }
+  };
+}
+
+// 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 change = diffArray(before, after);
+    return change.entries?.length || change.length ? change : void 0;
+  }
+  if (isPlainObject(before) && isPlainObject(after)) {
+    const change = diffObject(before, after);
+    return change.entries?.length ? change : 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(el) {
+  const tag = el.tagName.toLowerCase();
+  const id = el.id ? `#${el.id}` : "";
+  const raw = typeof el.className === "string" ? el.className : el.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 at = graph.get(id)?.createdIn; at !== void 0 && !seen.has(at); at = graph.get(at)?.createdIn) {
+    if (at === ancestor) return true;
+    seen.add(at);
+  }
+  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 at = element.parentElement; at; at = at.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 at = element.parentElement; at; at = at.parentElement) {
+      if (owners.has(at) || claimed.has(at)) 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 };
+}
+
+// src/plugin.ts
+var plugins = [];
+function devtoolsPlugins() {
+  return plugins;
+}
+
+// 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"
+]);
+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 }, at) => {
+    const node = graph.get(id);
+    if (node) node.order = at;
+  });
+}
+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 at = propsLocations(props);
+  const out = [];
+  for (const name of Object.keys(props)) {
+    if (name === "children") continue;
+    const where = at?.[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 reaches = /* @__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 at = mapped(site.location);
+          if (!seen.some((s) => s.file === at.file && s.line === at.line && s.column === at.column)) {
+            if (seen.length >= SET_SITES) seen.shift();
+            seen.push(at);
+          }
+        }
+      }
+      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 at = holeLocation(accessor);
+      const report = {
+        owner: owner !== void 0 ? through.get(core) ?? owner : void 0,
+        kind,
+        name,
+        element: describeNode(target),
+        target,
+        ...at ? { at } : {}
+      };
+      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]);
+        }
+      }
+      reaches = 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((el) => new WeakRef(el)));
+          const given = handed.get(node.id);
+          if (given) node.props = readProps(given);
+        }
+        const detail = formatValue(raw);
+        const next = shorten(detail);
+        if (next !== node.value || detail !== node.detail) {
+          node.detail = detail;
+          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, at] of revs) if (at > 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 = reaches) => {
+        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 at = node.createdIn;
+          while (at !== void 0 && !seen.has(at)) {
+            if (at === id) return true;
+            seen.add(at);
+            at = graph.get(at)?.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 at = element; at; at = at.parentElement) {
+        const owner = rendering.get(at);
+        if (owner !== void 0 && graph.has(owner)) return owner;
+      }
+      for (let at = element; at; at = at.parentElement) {
+        const id = drivenBy.get(at);
+        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;
+}
+export {
+  observeGraph
+};