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

package/dist/index.mjs

@@ -1,4 +1,4 @@
-/*! @fluixi/devtools v0.2.0-alpha.4 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/devtools v0.2.0-alpha.6 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 
 // src/instrument.ts
 import {
@@ -18,6 +18,7 @@ import { createStore } from "@fluixi/reactive/store";
 // src/source.ts
 var MARKER = "__fx_source";
 var COMPONENT_MARKER = "__fx_component";
+var CLASS_MARKER = "__fx_class";
 var HOLE_MARKER = "__fx_hole";
 var PROPS_MARKER = "__fx_props";
 var MARKS = "__FLUIXI_DEVTOOLS_MARKS__";
@@ -28,12 +29,16 @@ var shared = host[MARKS] ?? {
   components: /* @__PURE__ */ new Map()
 };
 host[MARKS] = shared;
-function markReactiveSource(file, line, column, name) {
+shared.classes ??= /* @__PURE__ */ new WeakMap();
+function markReactiveSource(file, line, column, name, self) {
   const location2 = locate(file, line, column);
   if (shared.pending && location2.external && !shared.pending.location?.external) return;
-  shared.pending = { name, location: location2 };
+  shared.pending = self && typeof self === "object" ? { name, location: location2, self } : { name, location: location2 };
   shared.expiring = false;
 }
+function dropReactiveSource() {
+  shared.pending = null;
+}
 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 };
@@ -47,13 +52,19 @@ function markComponentSource(name, file, line, column) {
   }
   if (!seen || seen.file !== file || seen.line !== line) shared.components.set(name, null);
 }
+function markClassSource(constructor, file, line, column) {
+  if (typeof constructor === "function") shared.classes.set(constructor, locate(file, line, column));
+}
+function classSource(constructor) {
+  return typeof constructor === "function" ? shared.classes.get(constructor) : void 0;
+}
 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 (mark.name !== void 0 || mark.self) shared.pending = { location: mark.location };
     if (!shared.expiring) {
       shared.expiring = true;
       queueMicrotask(() => {
@@ -93,6 +104,7 @@ function holeLocation(accessor) {
 function installSourceMarker() {
   if (typeof host[MARKER] !== "function") host[MARKER] = markReactiveSource;
   if (typeof host[COMPONENT_MARKER] !== "function") host[COMPONENT_MARKER] = markComponentSource;
+  if (typeof host[CLASS_MARKER] !== "function") host[CLASS_MARKER] = markClassSource;
   if (typeof host[HOLE_MARKER] !== "function") host[HOLE_MARKER] = markHole;
   if (typeof host[PROPS_MARKER] !== "function") host[PROPS_MARKER] = markProps;
 }
@@ -541,6 +553,15 @@ var INTERNAL = [
   "/packages/dom/",
   "/packages/core/",
   "/packages/devtools/",
+  "/packages/web-components/",
+  "/packages/auth/",
+  "/packages/oauth2/",
+  "/packages/session/",
+  "/packages/router/",
+  "/packages/head/",
+  "/packages/start/",
+  "/packages/server/",
+  "/packages/template-runtime/",
   "/@fluixi/",
   "node_modules",
   "fluixi-devtools",
@@ -1033,7 +1054,10 @@ var KIND_COLOR = {
   binding: "#5eead4",
   setter: "#fb7185",
   group: "#8a90a2",
-  element: "#8a90a2"
+  element: "#8a90a2",
+  "custom-element": "#2dd4bf",
+  module: "#facc15",
+  service: "#60a5fa"
 };
 var kindVar = (kind) => `--fx-kind-${kind}`;
 var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
@@ -1050,7 +1074,11 @@ var TREE_KINDS = /* @__PURE__ */ new Set([
   "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"
+  "provider",
+  // Scopes the runtime reported: what their signals and memos belong to.
+  "custom-element",
+  "module",
+  "service"
 ]);
 function inPageOrder(nodes) {
   const slots = [];
@@ -1073,7 +1101,8 @@ function badgeOf(node) {
   return badges.get(node);
 }
 function componentTree(graph, options = {}) {
-  const wanted = (node) => TREE_KINDS.has(node.kind) || options.values === true && node.authored !== false;
+  const held = (node) => node.scope !== void 0 && (node.kind === "state" || node.kind === "memo" || node.kind === "store");
+  const wanted = (node) => TREE_KINDS.has(node.kind) || options.values === true && (node.authored !== false || held(node));
   const tagged = inPageOrder([...graph.values()].filter(wanted).sort((a, b) => a.id - b.id));
   const made = /* @__PURE__ */ new Map();
   for (const node of tagged) {
@@ -1269,7 +1298,8 @@ function createComponentTree(host2, options = {}) {
       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,
+        // `<fx-counter>` in the graph, where nothing else draws brackets. Here the row adds them.
+        label: node.kind === "custom-element" ? node.label.replace(/^<(.*)>$/, "$1") : node.label,
         kind: node.kind,
         id: node.id,
         children: [...props, ...node.children.map(build2)],
@@ -1388,6 +1418,12 @@ function createComponentTree(host2, options = {}) {
         };
       }
       const rendered = dom.map((node, i) => walk2(node, `${row2.id}:${i}`)).filter((node) => node !== void 0);
+      const self = rendered[0];
+      if (row2.kind === "custom-element" && rendered.length === 1 && self?.kind === "element") {
+        rendered.splice(0, 1, ...self.children);
+        if (self.element) row2.element = self.element;
+        if (self.at) row2.at = self.at;
+      }
       const rest = row2.children.filter((child) => !placed.has(child)).map(expand);
       const lifted = [];
       const spare = [];
@@ -1564,7 +1600,11 @@ var PREFIX = {
   // A plugin's, and it names them itself.
   directive: "d",
   context: "ctx",
-  provider: "p"
+  provider: "p",
+  // Scopes are always named by what opened them.
+  "custom-element": "el",
+  module: "mod",
+  service: "svc"
 };
 function readProps(props) {
   const at3 = propsLocations(props);
@@ -1604,6 +1644,10 @@ function observeGraph(options = {}) {
   const boundTo = /* @__PURE__ */ new WeakMap();
   const drivenBy = /* @__PURE__ */ new WeakMap();
   let reaches2 = /* @__PURE__ */ new Map();
+  const SCOPE_KINDS = /* @__PURE__ */ new Set(["custom-element", "module", "service"]);
+  const scopeIds = /* @__PURE__ */ new WeakMap();
+  const scopeOfTarget = /* @__PURE__ */ new WeakMap();
+  const fieldsOf = /* @__PURE__ */ new WeakMap();
   let described = null;
   const rendered = /* @__PURE__ */ new Map();
   const elementsIn = (value) => {
@@ -1700,7 +1744,9 @@ function observeGraph(options = {}) {
         // 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) } : {}
+        // Not inside a scope: an element's prop is made by the package for the element, and
+        // the package's line says less than the scope it sits in already does.
+        ...site && site.external && !mark?.location && !report.scope ? { source: mapped(site.location) } : {}
       };
       const owner = ancestor(report.parents);
       if (owner !== void 0) node.createdIn = owner;
@@ -1710,6 +1756,28 @@ function observeGraph(options = {}) {
         node.createdIn = originId;
         if (from.source) node.source = from.source;
       }
+      const scopeId = report.scope ? scopeIds.get(report.scope) : void 0;
+      if (scopeId !== void 0) {
+        node.scope = scopeId;
+        const creator = node.createdIn !== void 0 ? graph.get(node.createdIn) : void 0;
+        const insideAlready = node.createdIn === scopeId || creator?.scope === scopeId;
+        if (!insideAlready) node.createdIn = scopeId;
+      } else if (node.createdIn !== void 0) {
+        const creator = graph.get(node.createdIn);
+        const inherited = creator && SCOPE_KINDS.has(creator.kind) ? creator.id : creator?.scope;
+        if (inherited !== void 0) node.scope = inherited;
+      }
+      const self = mark?.self;
+      if (self) {
+        const list = fieldsOf.get(self);
+        if (list) list.push(id);
+        else fieldsOf.set(self, [id]);
+        const open = scopeOfTarget.get(self);
+        if (open !== void 0 && graph.has(open)) {
+          node.scope = open;
+          node.createdIn = open;
+        }
+      }
       if (kind !== "effect" && typeof handle === "function") {
         const read = handle;
         node.read = () => untrack2(read);
@@ -1845,20 +1913,90 @@ function observeGraph(options = {}) {
       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);
+      forget(id);
+    },
+    scope(scope, info, parent) {
+      dropReactiveSource();
+      const id = seq++;
+      const kind = info.kind === "element" ? "custom-element" : info.kind;
+      const parentId = parent ? scopeIds.get(parent) : void 0;
+      const found = currentCallSite(origin);
+      const site = found && !/\0|__x00__|^virtual:/.test(found.location.file ?? "") ? found : void 0;
+      const node = {
+        id,
+        label: info.name,
+        kind,
+        // The author named the element, the module and the service; none of them is plumbing.
+        authored: true,
+        deps: /* @__PURE__ */ new Set(),
+        writes: /* @__PURE__ */ new Set(),
+        runs: 0,
+        lastPulse: 0,
+        ...info.detail ? { value: info.detail, detail: info.detail } : {},
+        ...parentId !== void 0 ? { scope: parentId, createdIn: parentId } : {}
+      };
+      const target = info.target;
+      if (kind === "custom-element") {
+        const defined = target ? classSource(target.constructor) : void 0;
+        if (defined) node.declaredAt = defined;
+      } else if (site && !site.external) {
+        node.usedAt = mapped(site.location);
+      }
+      scopeIds.set(scope, id);
+      if (target && typeof target === "object" && target.nodeType === 1) {
+        rendered.set(id, [new WeakRef(target)]);
+      }
+      graph.set(id, node);
+      history.created(id, node.createdIn, node.label);
+      if (target && typeof target === "object") {
+        scopeOfTarget.set(target, id);
+        for (const field of fieldsOf.get(target) ?? []) {
+          const made = graph.get(field);
+          if (!made) continue;
+          made.scope = id;
+          made.createdIn = id;
+          revs.set(field, ++revision);
+        }
+      }
+    },
+    scopeEnded(scope) {
+      const id = scopeIds.get(scope);
+      if (id === void 0) return;
+      const ended = /* @__PURE__ */ new Set([id]);
+      for (let grew = true; grew; ) {
+        grew = false;
+        for (const [other, node] of graph) {
+          if (!ended.has(other) && node.scope !== void 0 && ended.has(node.scope)) {
+            ended.add(other);
+            grew = true;
+          }
+        }
+      }
+      for (const gone of ended) forget(gone);
+    },
+    scopeAdopted(scope, parent) {
+      const node = graph.get(scopeIds.get(scope) ?? -1);
+      const parentId = scopeIds.get(parent);
+      if (!node || parentId === void 0 || parentId === node.id) return;
+      node.scope = parentId;
+      node.createdIn = parentId;
+      revs.set(node.id, ++revision);
     }
   });
+  function forget(id) {
+    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();
@@ -1878,6 +2016,14 @@ function observeGraph(options = {}) {
         revs.set(id, ++revision);
       };
       const now = Date.now();
+      for (const [id, node] of graph) {
+        if (node.kind !== "custom-element" || node.usedAt) continue;
+        const element = rendered.get(id)?.[0]?.deref();
+        const written = element ? element.__fx_loc : void 0;
+        if (!written?.file) continue;
+        node.usedAt = { file: written.file, line: written.line, column: written.column };
+        revs.set(id, ++revision);
+      }
       const bindings = /* @__PURE__ */ new Map();
       const drives = /* @__PURE__ */ new Map();
       const seen = /* @__PURE__ */ new Map();
@@ -2263,6 +2409,7 @@ function serializeGraph(graph, now = Date.now(), options = {}) {
       declaredAt: node.declaredAt,
       usedAt: node.usedAt,
       createdIn: node.createdIn,
+      scope: node.scope,
       bindings: node.bindings,
       targets: node.targets,
       setAt: node.setAt,
@@ -2300,6 +2447,7 @@ function snapshotToRenderMap(snapshot) {
       declaredAt: node.declaredAt,
       usedAt: node.usedAt,
       createdIn: node.createdIn,
+      scope: node.scope,
       bindings: node.bindings,
       targets: node.targets,
       setAt: node.setAt,
@@ -2452,8 +2600,8 @@ 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 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", "custom-element": "n-custom-element", module: "n-module", service: "n-service" };
+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", "custom-element": "⬡ custom element", module: "▦ module", service: "⚙ service" };
 var GROUP_ID = -1;
 var bindingIds = /* @__PURE__ */ new Map();
 var bindingId = (place2) => {
@@ -2714,6 +2862,7 @@ function createGraphView(svg, options = {}) {
   const inProject = (at3) => !!at3?.file && at3.external !== true;
   const machinery = (n) => {
     if (n.authored !== false) return false;
+    if (n.scope !== void 0) return false;
     if (n.kind === "state" || n.kind === "memo" || n.kind === "effect" || n.kind === "context") {
       return true;
     }
@@ -3123,6 +3272,11 @@ ${kindRules((k) => `.fx-node.n-${k}`, "--glow")}
 .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; }
+/* An element, module or service: a group its signals and memos belong to, so it reads as one. */
+.fx-node.n-custom-element .fx-box, .fx-node.n-module .fx-box, .fx-node.n-service .fx-box {
+  stroke-width: 2.2;
+  fill: color-mix(in oklab, var(--glow, #5eead4) 14%, var(--fx-node-bg, #131722));
+}
 .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); }
@@ -3581,7 +3735,7 @@ function createInspector(host2, options = {}) {
       // 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
+      (node.declaredAt && at(node.declaredAt, root) !== at(node.source, root) ? `<div class="ins-source">◧ ${node.kind === "custom-element" ? "defined at" : "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.
@@ -3622,8 +3776,8 @@ function createInspector(host2, options = {}) {
       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.
+      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() {
@@ -3994,9 +4148,12 @@ var FILTERABLE_KINDS = [
   "router",
   "handler",
   "context",
-  "directive"
+  "directive",
+  "custom-element",
+  "module",
+  "service"
 ];
-var LABEL = { handler: "route" };
+var LABEL = { handler: "route", "custom-element": "custom element" };
 function createKindFilter(host2, options) {
   const doc = host2.ownerDocument;
   const kinds = options.kinds ?? FILTERABLE_KINDS;

package/dist/inspector.cjs

@@ -38,6 +38,7 @@ var shared = host[MARKS] ?? {
   components: /* @__PURE__ */ new Map()
 };
 host[MARKS] = shared;
+shared.classes ??= /* @__PURE__ */ new WeakMap();
 
 // src/format.ts
 var MAX_DEPTH = 3;
@@ -260,7 +261,10 @@ var KIND_COLOR = {
   binding: "#5eead4",
   setter: "#fb7185",
   group: "#8a90a2",
-  element: "#8a90a2"
+  element: "#8a90a2",
+  "custom-element": "#2dd4bf",
+  module: "#facc15",
+  service: "#60a5fa"
 };
 var kindVar = (kind) => `--fx-kind-${kind}`;
 var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
@@ -595,7 +599,7 @@ function createInspector(host2, options = {}) {
       // 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
+      (node.declaredAt && at(node.declaredAt, root) !== at(node.source, root) ? `<div class="ins-source">◧ ${node.kind === "custom-element" ? "defined at" : "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.
@@ -636,8 +640,8 @@ function createInspector(host2, options = {}) {
       if (editing !== null) return;
       if (next === signature) return;
       signature = next;
-      body.innerHTML = `<div class="ins-head"><span class="ins-kind n-element">element</span><b>${escape2(pick.label)}</b><span class="ins-meta">not a node</span></div><div class="ins-rel">${relations}</div>` + // The tag's own line. An element has no position of its own in the graph — only the
-      // component that rendered it does — so this is as close as the source gets.
+      body.innerHTML = `<div class="ins-head"><span class="ins-kind n-element">element</span><b>${escape2(pick.label)}</b><span class="ins-meta">not a node</span></div><div class="ins-rel">${relations}</div>` + // The tag's own line. An element has no position of its own in the graph, only the
+      // component that rendered it does: so this is as close as the source gets.
       (source ? `<div class="ins-source">${source.external ? "📦" : "📍"} ${place(bothAt(source, root), source, reveals)}</div>` : "") + (madeIn ? `<div class="ins-source">📦 made in ${place(bothAt(madeIn, root), madeIn, reveals)}</div>` : "");
     },
     clear() {

package/dist/inspector.d.ts

@@ -6,7 +6,7 @@ export interface Inspector {
     /**
      * Draw an element instead of a node.
      *
-     * An element is not in the graph — nothing computes it — but it is the part of the page a
+     * An element is not in the graph: nothing computes it, but it is the part of the page a
      * reader recognises, and the graph knows which tag rendered it and which values write into
      * it. Those, and the line each binding was written on, are what there is to say.
      */
@@ -44,7 +44,7 @@ export interface InspectorOptions {
      * counts as a value is the application's business, and returns whether it took.
      *
      * Omitted leaves values read-only, which is what a panel reading a snapshot over a wire
-     * wants — there is nothing on the other end to write to.
+     * wants: there is nothing on the other end to write to.
      */
     onEdit?: (id: number, raw: string) => boolean;
     /**

package/dist/inspector.js

@@ -1,8 +1,8 @@
 // What one node is, in words.
 //
 // The graph draws a node in the space of a card: a name, a kind, a clipped value, a file and
-// a line. Everything else about it — the version, the run count, what it reads, what reads
-// it, where it was declared as against where it was used — needs room, and every host that
+// a line. Everything else about it: the version, the run count, what it reads, what reads
+// it, where it was declared as against where it was used, needs room, and every host that
 // draws the graph wants the same answer. So it lives here rather than in each of them.
 //
 // Rendered as html into an element the host owns, and re-rendered only when what it says
@@ -48,7 +48,7 @@ const bothAt = (source, root) => {
 /**
  * The line worth opening for a tag.
  *
- * A component the framework instantiated — a lazy route, a layout the router mounted — was
+ * A component the framework instantiated: a lazy route, a layout the router mounted, was
  * created inside the framework, so `source` is a line in a package. `declaredAt` is where it
  * was actually written. Only one line is shown for an element, so it had better be that one.
  */
@@ -63,7 +63,7 @@ function authoredPlace(node) {
  * The tags this value writes inside, and how many times each.
  *
  * A signal handed to a component through a prop is read by the render effect that binds it,
- * which is machinery the graph does not draw — so there is no edge from the signal to the
+ * which is machinery the graph does not draw: so there is no edge from the signal to the
  * component, and a card for it looks connected only to whatever declared it. The
  * descriptions already say it exactly: each element records the values writing into it, and
  * it sits in the tree of the tag that rendered it.
@@ -255,7 +255,7 @@ export function createInspector(host, options = {}) {
                 .join('');
             const next = `${node.id}|${node.kind}|${value}|${node.runs}|${state ?? ''}|${relations}|${at(node.source, root)}|${at(node.usedAt, root)}|${bound}`;
             // An input that has left the page is not one anybody is typing into. Without this a
-            // commit that never arrived — the panel redrew, the tab changed — would hold the
+            // commit that never arrived: the panel redrew, the tab changed, would hold the
             // inspector on whatever it last wrote, for good.
             if (editing !== null && field?.isConnected !== true) {
                 editing = null;
@@ -285,7 +285,7 @@ export function createInspector(host, options = {}) {
                     // 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>`
+                        ? `<div class="ins-source">◧ ${node.kind === 'custom-element' ? 'defined at' : '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.
@@ -357,8 +357,8 @@ export function createInspector(host, options = {}) {
                     `<b>${escape(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.
+                    // 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>`
                         : '') +

package/dist/inspector.mjs

@@ -22,6 +22,7 @@ var shared = host[MARKS] ?? {
   components: /* @__PURE__ */ new Map()
 };
 host[MARKS] = shared;
+shared.classes ??= /* @__PURE__ */ new WeakMap();
 
 // src/format.ts
 var MAX_DEPTH = 3;
@@ -244,7 +245,10 @@ var KIND_COLOR = {
   binding: "#5eead4",
   setter: "#fb7185",
   group: "#8a90a2",
-  element: "#8a90a2"
+  element: "#8a90a2",
+  "custom-element": "#2dd4bf",
+  module: "#facc15",
+  service: "#60a5fa"
 };
 var kindVar = (kind) => `--fx-kind-${kind}`;
 var kindColor = (kind) => `var(${kindVar(kind)}, ${KIND_COLOR[kind]})`;
@@ -579,7 +583,7 @@ function createInspector(host2, options = {}) {
       // 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
+      (node.declaredAt && at(node.declaredAt, root) !== at(node.source, root) ? `<div class="ins-source">◧ ${node.kind === "custom-element" ? "defined at" : "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.
@@ -620,8 +624,8 @@ function createInspector(host2, options = {}) {
       if (editing !== null) return;
       if (next === signature) return;
       signature = next;
-      body.innerHTML = `<div class="ins-head"><span class="ins-kind n-element">element</span><b>${escape2(pick.label)}</b><span class="ins-meta">not a node</span></div><div class="ins-rel">${relations}</div>` + // The tag's own line. An element has no position of its own in the graph — only the
-      // component that rendered it does — so this is as close as the source gets.
+      body.innerHTML = `<div class="ins-head"><span class="ins-kind n-element">element</span><b>${escape2(pick.label)}</b><span class="ins-meta">not a node</span></div><div class="ins-rel">${relations}</div>` + // The tag's own line. An element has no position of its own in the graph, only the
+      // component that rendered it does: so this is as close as the source gets.
       (source ? `<div class="ins-source">${source.external ? "📦" : "📍"} ${place(bothAt(source, root), source, reveals)}</div>` : "") + (madeIn ? `<div class="ins-source">📦 made in ${place(bothAt(madeIn, root), madeIn, reveals)}</div>` : "");
     },
     clear() {

package/dist/instrument.cjs

@@ -34,6 +34,7 @@ var import_store = require("@fluixi/reactive/store");
 // src/source.ts
 var MARKER = "__fx_source";
 var COMPONENT_MARKER = "__fx_component";
+var CLASS_MARKER = "__fx_class";
 var HOLE_MARKER = "__fx_hole";
 var PROPS_MARKER = "__fx_props";
 var MARKS = "__FLUIXI_DEVTOOLS_MARKS__";
@@ -44,10 +45,11 @@ var shared = host[MARKS] ?? {
   components: /* @__PURE__ */ new Map()
 };
 host[MARKS] = shared;
-function markReactiveSource(file, line, column, name) {
+shared.classes ??= /* @__PURE__ */ new WeakMap();
+function markReactiveSource(file, line, column, name, self) {
   const location = locate(file, line, column);
   if (shared.pending && location.external && !shared.pending.location?.external) return;
-  shared.pending = { name, location };
+  shared.pending = self && typeof self === "object" ? { name, location, self } : { name, location };
   shared.expiring = false;
 }
 function locate(file, line, column) {
@@ -63,13 +65,16 @@ function markComponentSource(name, file, line, column) {
   }
   if (!seen || seen.file !== file || seen.line !== line) shared.components.set(name, null);
 }
+function markClassSource(constructor, file, line, column) {
+  if (typeof constructor === "function") shared.classes.set(constructor, locate(file, line, column));
+}
 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 (mark.name !== void 0 || mark.self) shared.pending = { location: mark.location };
     if (!shared.expiring) {
       shared.expiring = true;
       queueMicrotask(() => {
@@ -102,6 +107,7 @@ function markProps(props, at) {
 function installSourceMarker() {
   if (typeof host[MARKER] !== "function") host[MARKER] = markReactiveSource;
   if (typeof host[COMPONENT_MARKER] !== "function") host[COMPONENT_MARKER] = markComponentSource;
+  if (typeof host[CLASS_MARKER] !== "function") host[CLASS_MARKER] = markClassSource;
   if (typeof host[HOLE_MARKER] !== "function") host[HOLE_MARKER] = markHole;
   if (typeof host[PROPS_MARKER] !== "function") host[PROPS_MARKER] = markProps;
 }

package/dist/instrument.d.ts

@@ -19,7 +19,16 @@ export type NodeKind = 'state' | 'memo' | 'effect' | 'store' | 'resource' | 'com
 /** A component whose job is providing a context. */
  | 'provider'
 /** Not a node: a place in the code that sets a signal. */
- | 'setter';
+ | 'setter'
+/**
+ * A custom element instance: its props and everything its render made. Not `element`,
+ * which the component tree already uses for the DOM element rows it lists.
+ */
+ | 'custom-element'
+/** An app module registered with `defineModule` / `defineApp`. */
+ | 'module'
+/** A service a DI provider built, such as the auth service: its own signals and memos. */
+ | 'service';
 export type NodeState = 'clean' | 'check' | 'dirty';
 /**
  * The names the compiler supplies without an import, and what each one is. A control-flow
@@ -70,6 +79,12 @@ export interface RNode {
         version?: number;
         state?: number;
     } | null;
+    /**
+     * The element, module or service this node belongs to: the id of that scope's node. Set
+     * for what was created while the scope was open, and for the scope nodes themselves when
+     * they sit inside another (a service built by a module).
+     */
+    scope?: number;
     /** Where the author created this node, when the compiler said so. Always optional. */
     source?: ReactiveSourceLocation;
     /**