@fluixi/devtools 0.2.0-alpha.6 → 1.0.0-alpha.99

package/dist/index.mjs

@@ -1,4 +1,4 @@
-/*! @fluixi/devtools v0.2.0-alpha.6 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/devtools v1.0.0-alpha.99 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 
 // src/instrument.ts
 import {
@@ -191,6 +191,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";
@@ -542,6 +544,7 @@ function createReactor() {
 
 // src/observe.ts
 import {
+  createRoot as createRoot2,
   observeReactiveNodes,
   untrack as untrack2
 } from "@fluixi/reactive/signal";
@@ -600,7 +603,14 @@ function callSite(stack, origin) {
   return fallback2 ? { location: { ...fallback2, external: true }, external: true } : void 0;
 }
 function currentCallSite(origin) {
-  return callSite(new Error().stack, origin);
+  const errors = Error;
+  const limit = errors.stackTraceLimit;
+  errors.stackTraceLimit = 50;
+  try {
+    return callSite(new Error().stack, origin);
+  } finally {
+    errors.stackTraceLimit = limit;
+  }
 }
 
 // src/history.ts
@@ -1607,6 +1617,7 @@ var PREFIX = {
   service: "svc"
 };
 function readProps(props) {
+  if (readOnce.has(props)) return readOnce.get(props);
   const at3 = propsLocations(props);
   const out = [];
   for (const name of Object.keys(props)) {
@@ -1617,13 +1628,25 @@ function readProps(props) {
       ...where ? { at: { line: where[0], column: where[1] } } : {}
     };
     try {
-      report.value = formatValue(untrack2(() => props[name]), 200);
+      report.value = formatValue(
+        createRoot2((dispose) => {
+          try {
+            return untrack2(() => 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);
@@ -1631,7 +1654,7 @@ function observeGraph(options = {}) {
   const claims = (node, value) => {
     for (const dep of node.deps) {
       const other = graph.get(dep);
-      if (other?.read && other.read() === value) return false;
+      if (other?.read && readRaw(other) === value) return false;
     }
     return true;
   };
@@ -1649,6 +1672,7 @@ function observeGraph(options = {}) {
   const scopeOfTarget = /* @__PURE__ */ new WeakMap();
   const fieldsOf = /* @__PURE__ */ new WeakMap();
   let described = null;
+  let descendants = null;
   const rendered = /* @__PURE__ */ new Map();
   const elementsIn = (value) => {
     if (value instanceof Element) return [value];
@@ -2010,6 +2034,7 @@ function observeGraph(options = {}) {
     graph,
     sample() {
       described = null;
+      descendants = null;
       const changed = [];
       const moved = (id) => {
         changed.push(id);
@@ -2065,7 +2090,7 @@ function observeGraph(options = {}) {
           runsAtLastSample.set(node.id, node.runs);
           continue;
         }
-        const raw = node.read();
+        const raw = readRaw(node);
         if (recording) raws.set(node.id, raw);
         edges(node.id, node);
         const stamped = raw?.$name;
@@ -2140,17 +2165,8 @@ function observeGraph(options = {}) {
       if (live.length) return live;
       collect(id);
       if (!live.length) {
-        const inside = (node) => {
-          const seen = /* @__PURE__ */ new Set();
-          let at3 = node.createdIn;
-          while (at3 !== void 0 && !seen.has(at3)) {
-            if (at3 === id) return true;
-            seen.add(at3);
-            at3 = graph.get(at3)?.createdIn;
-          }
-          return false;
-        };
-        for (const node of graph.values()) if (inside(node)) collect(node.id);
+        descendants ??= descendantsByCreator(graph);
+        for (const below of descendants.get(id) ?? []) collect(below);
       }
       return live;
     },
@@ -2263,6 +2279,21 @@ function observeGraph(options = {}) {
   }
   return api;
 }
+function descendantsByCreator(graph) {
+  const out = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    const seen = /* @__PURE__ */ new Set();
+    let at3 = node.createdIn;
+    while (at3 !== void 0 && !seen.has(at3)) {
+      seen.add(at3);
+      let list = out.get(at3);
+      if (!list) out.set(at3, list = []);
+      list.push(node.id);
+      at3 = graph.get(at3)?.createdIn;
+    }
+  }
+  return out;
+}
 
 // src/highlight.ts
 var LAYER = "fx-highlight-layer";

package/dist/inspector.cjs

@@ -122,6 +122,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/inspector.mjs

@@ -106,6 +106,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/instrument.cjs

@@ -194,6 +194,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/instrument.mjs

@@ -176,6 +176,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";

package/dist/observe.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/observe.ts
 var observe_exports = {};
 __export(observe_exports, {
+  descendantsByCreator: () => descendantsByCreator,
   observeGraph: () => observeGraph
 });
 module.exports = __toCommonJS(observe_exports);
@@ -173,7 +174,14 @@ function callSite(stack, origin) {
   return fallback ? { location: { ...fallback, external: true }, external: true } : void 0;
 }
 function currentCallSite(origin) {
-  return callSite(new Error().stack, origin);
+  const errors = Error;
+  const limit = errors.stackTraceLimit;
+  errors.stackTraceLimit = 50;
+  try {
+    return callSite(new Error().stack, origin);
+  } finally {
+    errors.stackTraceLimit = limit;
+  }
 }
 
 // src/instrument.ts
@@ -262,6 +270,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";
@@ -832,6 +842,7 @@ var PREFIX = {
   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)) {
@@ -842,13 +853,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);
@@ -856,7 +879,7 @@ function observeGraph(options = {}) {
   const claims = (node, value) => {
     for (const dep of node.deps) {
       const other = graph.get(dep);
-      if (other?.read && other.read() === value) return false;
+      if (other?.read && readRaw(other) === value) return false;
     }
     return true;
   };
@@ -874,6 +897,7 @@ function observeGraph(options = {}) {
   const scopeOfTarget = /* @__PURE__ */ new WeakMap();
   const fieldsOf = /* @__PURE__ */ new WeakMap();
   let described = null;
+  let descendants = null;
   const rendered = /* @__PURE__ */ new Map();
   const elementsIn = (value) => {
     if (value instanceof Element) return [value];
@@ -1235,6 +1259,7 @@ function observeGraph(options = {}) {
     graph,
     sample() {
       described = null;
+      descendants = null;
       const changed = [];
       const moved = (id) => {
         changed.push(id);
@@ -1290,7 +1315,7 @@ function observeGraph(options = {}) {
           runsAtLastSample.set(node.id, node.runs);
           continue;
         }
-        const raw = node.read();
+        const raw = readRaw(node);
         if (recording) raws.set(node.id, raw);
         edges(node.id, node);
         const stamped = raw?.$name;
@@ -1365,17 +1390,8 @@ function observeGraph(options = {}) {
       if (live.length) return live;
       collect(id);
       if (!live.length) {
-        const inside = (node) => {
-          const seen = /* @__PURE__ */ new Set();
-          let at = node.createdIn;
-          while (at !== void 0 && !seen.has(at)) {
-            if (at === id) return true;
-            seen.add(at);
-            at = graph.get(at)?.createdIn;
-          }
-          return false;
-        };
-        for (const node of graph.values()) if (inside(node)) collect(node.id);
+        descendants ??= descendantsByCreator(graph);
+        for (const below of descendants.get(id) ?? []) collect(below);
       }
       return live;
     },
@@ -1488,3 +1504,18 @@ function observeGraph(options = {}) {
   }
   return api;
 }
+function descendantsByCreator(graph) {
+  const out = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    const seen = /* @__PURE__ */ new Set();
+    let at = node.createdIn;
+    while (at !== void 0 && !seen.has(at)) {
+      seen.add(at);
+      let list = out.get(at);
+      if (!list) out.set(at, list = []);
+      list.push(node.id);
+      at = graph.get(at)?.createdIn;
+    }
+  }
+  return out;
+}

package/dist/observe.d.ts

@@ -77,4 +77,11 @@ export interface ObserveOptions {
     mapSource?: (location: ReactiveSourceLocation) => ReactiveSourceLocation | undefined;
 }
 export declare function observeGraph(options?: ObserveOptions): ObservedGraph;
+/**
+ * What every node created, at any depth, in graph order: the nodes whose `createdIn` chain
+ * passes through it. Built in one pass over the graph, so asking it for each tag of a page is
+ * linear; walking every node's chain once per tag made a sample quadratic, which on a page of a
+ * few thousand nodes took seconds on every keystroke.
+ */
+export declare function descendantsByCreator(graph: Map<number, RNode>): Map<number, number[]>;
 //# sourceMappingURL=observe.d.ts.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;AA0ED,wBAAgB,YAAY,CAAC,OAAO,GAAE,cAAmB,GAAG,aAAa,CAk2BxE"}
+{"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,CA81BxE;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,GAAG,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAcrF"}

package/dist/observe.js

@@ -8,7 +8,7 @@
 //
 // 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 { 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';
@@ -91,14 +91,23 @@ const PREFIX = {
  * 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)) {
@@ -110,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);
@@ -134,7 +154,7 @@ export function observeGraph(options = {}) {
     const claims = (node, value) => {
         for (const dep of node.deps) {
             const other = graph.get(dep);
-            if (other?.read && other.read() === value)
+            if (other?.read && readRaw(other) === value)
                 return false;
         }
         return true;
@@ -189,6 +209,8 @@ export function observeGraph(options = {}) {
     const fieldsOf = new WeakMap();
     /** Cleared on each sample: the page has moved on. */
     let described = null;
+    /** Per sample, like `described`: what each node created, at any depth. */
+    let descendants = null;
     /**
      * What each tag rendered, weakly.
      *
@@ -704,6 +726,7 @@ export function observeGraph(options = {}) {
         graph,
         sample() {
             described = null;
+            descendants = null;
             const changed = [];
             /** Recorded once here, so every consumer can be told about it at its own pace. */
             const moved = (id) => {
@@ -780,7 +803,9 @@ export function observeGraph(options = {}) {
                     runsAtLastSample.set(node.id, node.runs);
                     continue;
                 }
-                const raw = node.read();
+                // Guarded: a memo holding an error rethrows it on every read, and this runs on a
+                // timer, so an unguarded read threw the page's error ten times a second.
+                const raw = readRaw(node);
                 // For the next write to diff against; without it the first change has no entries.
                 if (recording)
                     raws.set(node.id, raw);
@@ -897,20 +922,9 @@ export function observeGraph(options = {}) {
             // A value drives the element its binding was recorded against. A tag that returned
             // nothing usable falls back to where the values inside it reach.
             if (!live.length) {
-                const inside = (node) => {
-                    const seen = new Set();
-                    let at = node.createdIn;
-                    while (at !== undefined && !seen.has(at)) {
-                        if (at === id)
-                            return true;
-                        seen.add(at);
-                        at = graph.get(at)?.createdIn;
-                    }
-                    return false;
-                };
-                for (const node of graph.values())
-                    if (inside(node))
-                        collect(node.id);
+                descendants ??= descendantsByCreator(graph);
+                for (const below of descendants.get(id) ?? [])
+                    collect(below);
             }
             return live;
         },
@@ -1040,3 +1054,25 @@ export function observeGraph(options = {}) {
     }
     return api;
 }
+/**
+ * What every node created, at any depth, in graph order: the nodes whose `createdIn` chain
+ * passes through it. Built in one pass over the graph, so asking it for each tag of a page is
+ * linear; walking every node's chain once per tag made a sample quadratic, which on a page of a
+ * few thousand nodes took seconds on every keystroke.
+ */
+export function descendantsByCreator(graph) {
+    const out = new Map();
+    for (const node of graph.values()) {
+        const seen = new Set();
+        let at = node.createdIn;
+        while (at !== undefined && !seen.has(at)) {
+            seen.add(at);
+            let list = out.get(at);
+            if (!list)
+                out.set(at, (list = []));
+            list.push(node.id);
+            at = graph.get(at)?.createdIn;
+        }
+    }
+    return out;
+}

package/dist/observe.mjs

@@ -1,5 +1,6 @@
 // src/observe.ts
 import {
+  createRoot as createRoot2,
   observeReactiveNodes,
   untrack as untrack2
 } from "@fluixi/reactive/signal";
@@ -152,7 +153,14 @@ function callSite(stack, origin) {
   return fallback ? { location: { ...fallback, external: true }, external: true } : void 0;
 }
 function currentCallSite(origin) {
-  return callSite(new Error().stack, origin);
+  const errors = Error;
+  const limit = errors.stackTraceLimit;
+  errors.stackTraceLimit = 50;
+  try {
+    return callSite(new Error().stack, origin);
+  } finally {
+    errors.stackTraceLimit = limit;
+  }
 }
 
 // src/instrument.ts
@@ -252,6 +260,8 @@ function walk(value, depth, seen) {
     const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
       let read;
       try {
+        const descriptor = Object.getOwnPropertyDescriptor(object, key);
+        if (descriptor?.get) return `${key}: [getter]`;
         read = walk(object[key], depth + 1, seen);
       } catch {
         read = "[unreadable]";
@@ -822,6 +832,7 @@ var PREFIX = {
   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)) {
@@ -832,13 +843,25 @@ function readProps(props) {
       ...where ? { at: { line: where[0], column: where[1] } } : {}
     };
     try {
-      report.value = formatValue(untrack2(() => props[name]), 200);
+      report.value = formatValue(
+        createRoot2((dispose) => {
+          try {
+            return untrack2(() => 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);
@@ -846,7 +869,7 @@ function observeGraph(options = {}) {
   const claims = (node, value) => {
     for (const dep of node.deps) {
       const other = graph.get(dep);
-      if (other?.read && other.read() === value) return false;
+      if (other?.read && readRaw(other) === value) return false;
     }
     return true;
   };
@@ -864,6 +887,7 @@ function observeGraph(options = {}) {
   const scopeOfTarget = /* @__PURE__ */ new WeakMap();
   const fieldsOf = /* @__PURE__ */ new WeakMap();
   let described = null;
+  let descendants = null;
   const rendered = /* @__PURE__ */ new Map();
   const elementsIn = (value) => {
     if (value instanceof Element) return [value];
@@ -1225,6 +1249,7 @@ function observeGraph(options = {}) {
     graph,
     sample() {
       described = null;
+      descendants = null;
       const changed = [];
       const moved = (id) => {
         changed.push(id);
@@ -1280,7 +1305,7 @@ function observeGraph(options = {}) {
           runsAtLastSample.set(node.id, node.runs);
           continue;
         }
-        const raw = node.read();
+        const raw = readRaw(node);
         if (recording) raws.set(node.id, raw);
         edges(node.id, node);
         const stamped = raw?.$name;
@@ -1355,17 +1380,8 @@ function observeGraph(options = {}) {
       if (live.length) return live;
       collect(id);
       if (!live.length) {
-        const inside = (node) => {
-          const seen = /* @__PURE__ */ new Set();
-          let at = node.createdIn;
-          while (at !== void 0 && !seen.has(at)) {
-            if (at === id) return true;
-            seen.add(at);
-            at = graph.get(at)?.createdIn;
-          }
-          return false;
-        };
-        for (const node of graph.values()) if (inside(node)) collect(node.id);
+        descendants ??= descendantsByCreator(graph);
+        for (const below of descendants.get(id) ?? []) collect(below);
       }
       return live;
     },
@@ -1478,6 +1494,22 @@ function observeGraph(options = {}) {
   }
   return api;
 }
+function descendantsByCreator(graph) {
+  const out = /* @__PURE__ */ new Map();
+  for (const node of graph.values()) {
+    const seen = /* @__PURE__ */ new Set();
+    let at = node.createdIn;
+    while (at !== void 0 && !seen.has(at)) {
+      seen.add(at);
+      let list = out.get(at);
+      if (!list) out.set(at, list = []);
+      list.push(node.id);
+      at = graph.get(at)?.createdIn;
+    }
+  }
+  return out;
+}
 export {
+  descendantsByCreator,
   observeGraph
 };

package/dist/plugins/index.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/devtools v0.2.0-alpha.6 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/devtools v1.0.0-alpha.99 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/plugins/index.mjs

@@ -1,4 +1,4 @@
-/*! @fluixi/devtools v0.2.0-alpha.6 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/devtools v1.0.0-alpha.99 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 
 // src/plugin.ts
 var plugins = [];