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

package/dist/index.cjs

@@ -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 */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -86,6 +86,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__";
@@ -96,12 +97,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 };
@@ -115,13 +120,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(() => {
@@ -161,6 +172,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;
 }
@@ -606,6 +618,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",
@@ -1098,7 +1119,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]})`;
@@ -1115,7 +1139,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 = [];
@@ -1138,7 +1166,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) {
@@ -1334,7 +1363,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)],
@@ -1453,6 +1483,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 = [];
@@ -1629,7 +1665,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);
@@ -1669,6 +1709,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) => {
@@ -1765,7 +1809,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;
@@ -1775,6 +1821,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 = () => (0, import_signal2.untrack)(read);
@@ -1910,20 +1978,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();
@@ -1943,6 +2081,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();
@@ -2328,6 +2474,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,
@@ -2365,6 +2512,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,
@@ -2517,8 +2665,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) => {
@@ -2779,6 +2927,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;
     }
@@ -3188,6 +3337,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); }
@@ -3646,7 +3800,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.
@@ -3687,8 +3841,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() {
@@ -4059,9 +4213,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;