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

package/dist/hook.cjs

@@ -207,6 +207,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__";
@@ -217,12 +218,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 };
@@ -236,13 +241,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(() => {
@@ -282,6 +293,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;
 }
@@ -293,6 +305,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",
@@ -672,7 +693,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]})`;
@@ -689,7 +713,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 {
@@ -805,7 +833,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 at = propsLocations(props);
@@ -845,6 +877,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) => {
@@ -941,7 +977,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;
@@ -951,6 +989,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);
@@ -1086,20 +1146,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();
@@ -1119,6 +1249,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();
@@ -1457,6 +1595,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,

package/dist/hook.d.ts

@@ -5,8 +5,8 @@ export interface DevtoolsHook {
      * Called by the runtime when it loads.
      *
      * `watch` is how the caller says it brought its own devtools. Two copies live on a page
-     * routinely — a browser extension injects one at document_start and an application's own
-     * agent loads another — and the first to arrive owns the hook. Without this the graph is
+     * routinely: a browser extension injects one at document_start and an application's own
+     * agent loads another: and the first to arrive owns the hook. Without this the graph is
      * built by whichever copy got there first, which for an installed extension is a build
      * that knows nothing of the compiler that made the application.
      */
@@ -48,7 +48,7 @@ export interface DevtoolsHook {
      *
      * A number is a node, and covers everywhere it reaches. A string is one element, written
      * as the tree keys them: the tag's id, the index of the root it rendered, then a child
-     * index per step — `12:0/1/2`. Null clears it.
+     * index per step: `12:0/1/2`. Null clears it.
      */
     highlight(target: number | string | null): void;
 }

package/dist/hook.js

@@ -3,7 +3,7 @@
 // A browser extension or a dev-server injection runs this before the application loads. It
 // leaves a global behind; when the app's copy of @fluixi/reactive is first evaluated, the
 // runtime finds it and hands over its own `observeReactiveNodes`. The graph is then built
-// from the app's framework rather than this bundle's — two copies of the runtime each keep
+// from the app's framework rather than this bundle's, two copies of the runtime each keep
 // their own nodes, so watching the wrong one shows an empty graph.
 //
 // The app imports nothing and knows nothing about this. It also works against a production
@@ -25,8 +25,8 @@ export function installDevtoolsHook() {
     const host = globalThis;
     const existing = host[HOOK];
     if (existing) {
-        // Counted, not complained about. Two copies is the ordinary case — an extension injects
-        // one before anything else runs and the application's agent loads another — and `inject`
+        // Counted, not complained about. Two copies is the ordinary case, an extension injects
+        // one before anything else runs and the application's agent loads another, and `inject`
         // sorts out which of them ends up watching.
         existing.copies = (existing.copies ?? 1) + 1;
         return existing;
@@ -47,7 +47,7 @@ export function installDevtoolsHook() {
                 return;
             }
             // The runtime injects the moment it is evaluated, and it brings no devtools of its
-            // own — so an extension's copy starts watching first. The application's agent runs
+            // own: so an extension's copy starts watching first. The application's agent runs
             // straight after, before any of its own modules have made a node, and hands over an
             // observer that matches the compiler that built it. That one takes over.
             if (owned || !runtime.watch)
@@ -95,8 +95,8 @@ export function installDevtoolsHook() {
             // Detection is shared and has to run: it is what notices anything moved at all.
             const changed = observed.sample();
             const cursor = observed.revision;
-            // Kept, not handed out once. The hook can have more than one reader — a dev server
-            // agent polling and a browser panel open at the same time — and draining here gave
+            // Kept, not handed out once. The hook can have more than one reader, a dev server
+            // agent polling and a browser panel open at the same time, and draining here gave
             // each of them whichever events the other had not taken yet. Every event carries a
             // seq, so a reader keeps what is new to it.
             history.push(...observed.takeEvents());

package/dist/hook.mjs

@@ -184,6 +184,7 @@ import {
 // 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__";
@@ -194,12 +195,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 };
@@ -213,13 +218,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(() => {
@@ -259,6 +270,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;
 }
@@ -270,6 +282,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",
@@ -660,7 +681,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]})`;
@@ -677,7 +701,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 {
@@ -793,7 +821,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 at = propsLocations(props);
@@ -833,6 +865,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) => {
@@ -929,7 +965,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;
@@ -939,6 +977,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);
@@ -1074,20 +1134,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();
@@ -1107,6 +1237,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();
@@ -1445,6 +1583,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,