@fluixi/devtools 0.2.0-alpha.5 → 0.2.0-alpha.7

package/dist/kind-filter.cjs

@@ -38,9 +38,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(host, options) {
   const doc = host.ownerDocument;
   const kinds = options.kinds ?? FILTERABLE_KINDS;

package/dist/kind-filter.js

@@ -1,10 +1,10 @@
 /** Every kind a graph can hold, in the order they are offered. */
 export const FILTERABLE_KINDS = [
     'state', 'memo', 'effect', 'store', 'resource', 'component', 'provider', 'control', 'router', 'handler',
-    'context', 'directive',
+    'context', 'directive', 'custom-element', 'module', 'service',
 ];
-/** Only `handler` needs renaming; the other kinds read fine as they are. */
-const LABEL = { handler: 'route' };
+/** Kinds whose name does not read as it is. */
+const LABEL = { handler: 'route', 'custom-element': 'custom element' };
 /**
  * Builds the control inside `host`. Call `destroy` to remove it, it holds a document
  * listener for closing the panel on an outside click.

package/dist/kind-filter.mjs

@@ -11,9 +11,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(host, options) {
   const doc = host.ownerDocument;
   const kinds = options.kinds ?? FILTERABLE_KINDS;

package/dist/observe.cjs

@@ -28,6 +28,7 @@ var import_signal2 = require("@fluixi/reactive/signal");
 // 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__";
@@ -38,12 +39,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 };
@@ -57,13 +62,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(() => {
@@ -103,6 +114,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;
 }
@@ -114,6 +126,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",
@@ -664,7 +685,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]})`;
@@ -681,7 +705,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"
 ]);
 var TREE_CSS = `
 .fx-tree-row {
@@ -797,9 +825,14 @@ 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) {
+  if (readOnce.has(props)) return readOnce.get(props);
   const at = propsLocations(props);
   const out = [];
   for (const name of Object.keys(props)) {
@@ -810,13 +843,25 @@ function readProps(props) {
       ...where ? { at: { line: where[0], column: where[1] } } : {}
     };
     try {
-      report.value = formatValue((0, import_signal2.untrack)(() => props[name]), 200);
+      report.value = formatValue(
+        (0, import_signal2.createRoot)((dispose) => {
+          try {
+            return (0, import_signal2.untrack)(() => props[name]);
+          } finally {
+            dispose();
+          }
+        }),
+        200
+      );
     } catch {
     }
     out.push(report);
   }
-  return out.length ? out : void 0;
+  const reports = out.length ? out : void 0;
+  readOnce.set(props, reports);
+  return reports;
 }
+var readOnce = /* @__PURE__ */ new WeakMap();
 function observeGraph(options = {}) {
   installSourceMarker();
   const origin = options.origin ?? (typeof location === "object" ? location.origin : void 0);
@@ -837,6 +882,10 @@ function observeGraph(options = {}) {
   const boundTo = /* @__PURE__ */ new WeakMap();
   const drivenBy = /* @__PURE__ */ new WeakMap();
   let reaches = /* @__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) => {
@@ -933,7 +982,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;
@@ -943,6 +994,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);
@@ -1078,20 +1151,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();
@@ -1111,6 +1254,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();

package/dist/observe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"observe.d.ts","sourceRoot":"","sources":["../src/observe.ts"],"names":[],"mappings":"AAUA,OAAO,EAIL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAmE,KAAK,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9G,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG9D,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,UAAU,CAAC;AAmDhE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,gFAAgF;IAChF,MAAM,IAAI,MAAM,EAAE,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC,6FAA6F;IAC7F,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC,4EAA4E;IAC5E,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,WAAW,IAAI,MAAM,EAAE,CAAC;IACxB,8EAA8E;IAC9E,UAAU,IAAI,UAAU,EAAE,CAAC;IAC3B,qEAAqE;IACrE,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IACnC,wEAAwE;IACxE,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IACpD;;;OAGG;IACH,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7C,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;IACrD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,sBAAsB,GAAG,SAAS,CAAC;CACtF;AAsED,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CA4tBxE"}
+{"version":3,"file":"observe.d.ts","sourceRoot":"","sources":["../src/observe.ts"],"names":[],"mappings":"AAUA,OAAO,EAKL,KAAK,gBAAgB,EACtB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAmE,KAAK,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAC9G,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AAE1D,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,cAAc,CAAC;AAG9D,OAAO,EAA0B,KAAK,OAAO,EAAE,MAAM,UAAU,CAAC;AAmDhE,MAAM,WAAW,aAAa;IAC5B,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;IACnC,gFAAgF;IAChF,MAAM,IAAI,MAAM,EAAE,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC,6FAA6F;IAC7F,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC,4EAA4E;IAC5E,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B;;;;;;OAMG;IACH,WAAW,IAAI,MAAM,EAAE,CAAC;IACxB,8EAA8E;IAC9E,UAAU,IAAI,UAAU,EAAE,CAAC;IAC3B,qEAAqE;IACrE,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IACnC,wEAAwE;IACxE,MAAM,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IACpD;;;OAGG;IACH,MAAM,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IAC9B;;;;OAIG;IACH,WAAW,CAAC,EAAE,EAAE,MAAM,GAAG,OAAO,EAAE,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7C,MAAM,IAAI,IAAI,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,QAAQ,EAAE,gBAAgB,KAAK,MAAM,IAAI,CAAC;IACrD,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,SAAS,CAAC,EAAE,CAAC,QAAQ,EAAE,sBAAsB,KAAK,sBAAsB,GAAG,SAAS,CAAC;CACtF;AAgGD,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAk2BxE"}

package/dist/observe.js

@@ -8,8 +8,8 @@
 //
 // The graph it fills is the same Map<number, RNode> createGraphView already draws, so a
 // renderer does not care which of the two produced it.
-import { observeReactiveNodes, untrack, } from '@fluixi/reactive/signal';
-import { componentSource, holeLocation, installSourceMarker, propsLocations, takeReactiveSource } from './source.js';
+import { createRoot, observeReactiveNodes, untrack, } from '@fluixi/reactive/signal';
+import { classSource, componentSource, dropReactiveSource, holeLocation, installSourceMarker, propsLocations, takeReactiveSource } from './source.js';
 import { currentCallSite } from './callsite.js';
 import { KIND_OF_BUILTIN } from './instrument.js';
 import { formatValue, shorten } from './format.js';
@@ -81,20 +81,33 @@ const PREFIX = {
     directive: 'd',
     context: 'ctx',
     provider: 'p',
+    // Scopes are always named by what opened them.
+    'custom-element': 'el',
+    module: 'mod',
+    service: 'svc',
 };
 /**
  * Start watching. Nodes made before this returns are not in the graph, so attach before the
  * app's modules load, which in practice means before the entry import.
  */
 /**
- * What a component was handed, read for display.
+ * What a component was handed, read for display, once per props object.
  *
  * Every prop is a getter over whatever the caller wrote, so reading one runs that
  * expression. Untracked, or the read would subscribe whatever is sampling to it and the
- * panel would drive the graph by looking at it. `children` is skipped: reading it builds
- * the subtree, which is a side effect nobody asked for by opening an inspector.
+ * panel would drive the graph by looking at it. And only once: JSX in a prop compiles to a
+ * getter that makes a new memo on each read, which the next sample pulls, building the
+ * component again, and any other prop can reach such a getter (`when={local.trailing != null}`).
+ * Read on every sample, each one added another copy of those components to the graph.
+ * `children` is skipped: reading it builds the subtree.
+ *
+ * Any other getter can build one too (`Show`'s `fallback`), and what it builds is live: its
+ * effects run outside the component, so a context it reads is missing, and they keep running
+ * and throwing on every change. Each read happens in a root disposed as soon as it returns.
  */
 function readProps(props) {
+    if (readOnce.has(props))
+        return readOnce.get(props);
     const at = propsLocations(props);
     const out = [];
     for (const name of Object.keys(props)) {
@@ -106,15 +119,26 @@ function readProps(props) {
             ...(where ? { at: { line: where[0], column: where[1] } } : {}),
         };
         try {
-            report.value = formatValue(untrack(() => props[name]), 200);
+            report.value = formatValue(createRoot((dispose) => {
+                try {
+                    return untrack(() => props[name]);
+                }
+                finally {
+                    dispose();
+                }
+            }), 200);
         }
         catch {
             // A getter that throws is still a prop worth naming.
         }
         out.push(report);
     }
-    return out.length ? out : undefined;
+    const reports = out.length ? out : undefined;
+    readOnce.set(props, reports);
+    return reports;
 }
+/** Each props object's reports, from its first read. */
+const readOnce = new WeakMap();
 export function observeGraph(options = {}) {
     installSourceMarker();
     const origin = options.origin ?? (typeof location === 'object' ? location.origin : undefined);
@@ -175,6 +199,14 @@ export function observeGraph(options = {}) {
     const drivenBy = new WeakMap();
     /** Per node, the elements it drives. Rebuilt each sample, like the descriptions are. */
     let reaches = new Map();
+    /** The kinds a scope node can be. */
+    const SCOPE_KINDS = new Set(['custom-element', 'module', 'service']);
+    /** Each open scope's node, by the identity the runtime handed over. */
+    const scopeIds = new WeakMap();
+    /** The open scope standing for an object, an element, by that object. */
+    const scopeOfTarget = new WeakMap();
+    /** Nodes a class field made, by the instance: they join its scope when it opens. */
+    const fieldsOf = new WeakMap();
     /** Cleared on each sample: the page has moved on. */
     let described = null;
     /**
@@ -343,7 +375,9 @@ export 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 !== undefined)
@@ -357,6 +391,39 @@ export function observeGraph(options = {}) {
                 if (from.source)
                     node.source = from.source;
             }
+            // Made inside an element, module or service: it belongs to that scope, and hangs off it
+            // unless what created it already sits inside the same scope, which keeps the nesting.
+            const scopeId = report.scope ? scopeIds.get(report.scope) : undefined;
+            if (scopeId !== undefined) {
+                node.scope = scopeId;
+                const creator = node.createdIn !== undefined ? graph.get(node.createdIn) : undefined;
+                const insideAlready = node.createdIn === scopeId || creator?.scope === scopeId;
+                if (!insideAlready)
+                    node.createdIn = scopeId;
+            }
+            else if (node.createdIn !== undefined) {
+                // Made after the scope closed, by something inside it: a memo read lazily, an effect
+                // re-running, a row a list adds. It belongs where its creator belongs.
+                const creator = graph.get(node.createdIn);
+                const inherited = creator && SCOPE_KINDS.has(creator.kind) ? creator.id : creator?.scope;
+                if (inherited !== undefined)
+                    node.scope = inherited;
+            }
+            // A class field: made in the constructor, before the element opened its scope. It belongs
+            // to the instance, so it goes in that scope now if it is open, or when it opens.
+            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 !== undefined && graph.has(open)) {
+                    node.scope = open;
+                    node.createdIn = open;
+                }
+            }
             // An effect returns nothing worth showing, so it has no reader and pulses on its runs.
             if (kind !== 'effect' && typeof handle === 'function') {
                 // Not read here: a memo is lazy, and forcing it from inside its own creation would
@@ -537,22 +604,110 @@ export function observeGraph(options = {}) {
             const id = ids.get(target);
             if (id === undefined)
                 return;
-            removed.push({ id, rev: ++revision });
-            revs.delete(id);
-            if (removed.length > REMOVED_LOG)
-                removed.splice(0, removed.length - REMOVED_LOG);
-            // The label goes with it: nothing is left to look the name up in.
-            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) {
+            // Whatever mark is pending was left by the code around this scope, not by what it makes.
+            dropReactiveSource();
+            const id = seq++;
+            const kind = info.kind === 'element' ? 'custom-element' : info.kind;
+            const parentId = parent ? scopeIds.get(parent) : undefined;
+            // Where it was opened: the line that defined the module, built the service, or, for
+            // an element, the one that put it on the page. A bundler's virtual module (the
+            // generated app config, `\0virtual:…`) is nowhere a reader can go, so it is left out.
+            const found = currentCallSite(origin);
+            const site = found && !/\0|__x00__|^virtual:/.test(found.location.file ?? '') ? found : undefined;
+            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: new Set(),
+                writes: new Set(),
+                runs: 0,
+                lastPulse: 0,
+                ...(info.detail ? { value: info.detail, detail: info.detail } : {}),
+                ...(parentId !== undefined ? { scope: parentId, createdIn: parentId } : {}),
+            };
+            const target = info.target;
+            if (kind === 'custom-element') {
+                // The stack here is whatever connected it, often the `define` that upgraded it, so it
+                // says nothing about where the tag is written: that comes off the element at sample.
+                // Where it is defined is the class declaration, which the compiler marked.
+                const defined = target ? classSource(target.constructor) : undefined;
+                if (defined)
+                    node.declaredAt = defined;
+            }
+            else if (site && !site.external) {
+                // Only the app's own line: a package's is where the package opened the scope for it,
+                // which says nothing about this module or service.
+                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 === undefined)
+                return;
+            // What it made goes with it. An element's prop signals have no owner to dispose them,
+            // so they outlived the element as cards pointing at a scope that no longer existed.
+            const ended = new Set([id]);
+            for (let grew = true; grew;) {
+                grew = false;
+                for (const [other, node] of graph) {
+                    if (!ended.has(other) && node.scope !== undefined && 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 === undefined || parentId === node.id)
+                return;
+            node.scope = parentId;
+            node.createdIn = parentId;
+            revs.set(node.id, ++revision);
         },
     });
+    /** Drop a node everywhere it is kept, and log it for a consumer catching up. */
+    function forget(id) {
+        removed.push({ id, rev: ++revision });
+        revs.delete(id);
+        if (removed.length > REMOVED_LOG)
+            removed.splice(0, removed.length - REMOVED_LOG);
+        // The label goes with it: nothing is left to look the name up in.
+        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);
+    }
     /** What this node read on its last run, as ids: the edges the core already holds. */
     const edges = (id, node) => {
         const sources = cores.get(id)?.sources;
@@ -576,6 +731,20 @@ export function observeGraph(options = {}) {
                 revs.set(id, ++revision);
             };
             const now = Date.now();
+            // Where each custom element's tag is written. Stamped by the runtime when the template
+            // makes or hydrates it, which can be after its scope opened: an element the server
+            // rendered upgrades on import, before hydration gets to it.
+            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 : undefined;
+                if (!written?.file)
+                    continue;
+                node.usedAt = { file: written.file, line: written.line, column: written.column };
+                // A new revision without counting as a change: nothing ran, so nothing should pulse.
+                revs.set(id, ++revision);
+            }
             // What the dom reads, per node. Recounted rather than kept: a binding's sources change
             // with every run, and a stale count is worse than none.
             const bindings = new Map();