@fluixi/devtools 0.2.0-alpha.7 → 1.0.0-alpha.101

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2026 Fluixi
+Copyright (c) 2026 Ibrahima Touré
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,7 +1,7 @@
 # @fluixi/devtools
 
 Live inspector for the Fluixi reactive graph. Instrument `signal` / `memo` / `effect`, then render
-the dependency graph and watch propagation animate — State → Memo → Effect, glitch-free, lazy.
+the dependency graph and watch propagation animate: State → Memo → Effect, glitch-free, lazy.
 
 ```ts
 import { createReactor, createGraphView, DEVTOOLS_CSS } from '@fluixi/devtools';
@@ -23,13 +23,13 @@ tick();
 
 The instrumented `createSignal`/`createMemo`/`createEffect` wrap the real `@fluixi/reactive`
 primitives. A read is a
-subscription, so edges are recorded from actual reads — it's the genuine dependency graph, not a
+subscription, so edges are recorded from actual reads: it's the genuine dependency graph, not a
 reconstruction. Values are re-read untracked each frame and effects count their own re-runs, so the
 inspector animates exactly as the core propagates.
 
 ## Watching an app you did not write
 
-createReactor hands out its own primitives, so it only sees code written against them. observeGraph() sees an ordinary app: the runtime reports each node as it is made, and the graph fills from plain `import { signal } from '@fluixi/core'`. Call it before the app's modules load — a node made earlier is not in the graph.
+createReactor hands out its own primitives, so it only sees code written against them. observeGraph() sees an ordinary app: the runtime reports each node as it is made, and the graph fills from plain `import { signal } from '@fluixi/core'`. Call it before the app's modules load: a node made earlier is not in the graph.
 
 ```ts
 import { observeGraph, createGraphView } from '@fluixi/devtools';
@@ -42,13 +42,13 @@ tick();
 
 The same Map<number, RNode> the reactor produces, so createGraphView and anything else reading the graph does not care which made it. Dependencies are read off the core node, which already keeps its own sources and observers, so nothing is wrapped and no read is intercepted.
 
-No write edges, because nothing records which computation was running when a setter fired. Render effects are left out — the dom layer makes one per binding. An unwatched runtime pays one null check per node creation and per recompute.
+No write edges, because nothing records which computation was running when a setter fired. Render effects are left out: the dom layer makes one per binding. An unwatched runtime pays one null check per node creation and per recompute.
 
 ## Getting the graph somewhere else
 
-serializeGraph flattens the graph to json — Sets become arrays, the live core node becomes version and state, the reader is dropped — and snapshotToRenderMap turns it back into something the view draws. sample() returns what moved, so a delta is the same call with those ids, and applySnapshot folds one into a graph already on screen.
+serializeGraph flattens the graph to json, Sets become arrays, the live core node becomes version and state, the reader is dropped, and snapshotToRenderMap turns it back into something the view draws. sample() returns what moved, so a delta is the same call with those ids, and applySnapshot folds one into a graph already on screen.
 
-installDevtoolsHook() is for a tool that cannot be imported by the app. It leaves a global behind; when the application's runtime loads it finds it and hands over its own registration function, so the graph is built from the app's copy of the framework rather than the tool's. It has to be installed before the app runs — a browser agent at document_start — because the runtime offers once. It works against a production build too, without names or locations.
+installDevtoolsHook() is for a tool that cannot be imported by the app. It leaves a global behind; when the application's runtime loads it finds it and hands over its own registration function, so the graph is built from the app's copy of the framework rather than the tool's. It has to be installed before the app runs, a browser agent at document_start, because the runtime offers once. It works against a production build too, without names or locations.
 
 ```js
 import { installDevtoolsHook } from '@fluixi/devtools';
@@ -72,7 +72,7 @@ globalThis.__fx_source?.("src/App.ts", 10, 15, "count");
 const count = signal(0);
 ```
 
-A renderer needs nothing else — no compiler, no source file, no ast — and file, line and column are enough for a host to decide how to open it. For example:
+A renderer needs nothing else, no compiler, no source file, no ast, and file, line and column are enough for a host to decide how to open it. For example:
 
 ```ts
 for (const node of reactor.graph.values()) {
@@ -82,9 +82,9 @@ for (const node of reactor.graph.values()) {
 }
 ```
 
-The compiler wraps every component in a memo, so the graph sees the wrapper rather than the component. A node whose value carries a component's name reports its kind as `component` and takes that name as its label, so the graph reads `App` rather than `m5`. Nothing about the node changes — it is the same memo, with the same dependencies.
+The compiler wraps every component in a memo, so the graph sees the wrapper rather than the component. A node whose value carries a component's name reports its kind as `component` and takes that name as its label, so the graph reads `App` rather than `m5`. Nothing about the node changes: it is the same memo, with the same dependencies.
 
-A component node's `source` is where its tag was written, which is where the node was made — the same meaning `source` has for every other kind. `declaredAt` is where the component itself was declared, which is usually another file. It stands in for `source` when nothing marked the tag, and two components sharing a name are reported without a location rather than with the wrong one.
+A component node's `source` is where its tag was written, which is where the node was made: the same meaning `source` has for every other kind. `declaredAt` is where the component itself was declared, which is usually another file. It stands in for `source` when nothing marked the tag, and two components sharing a name are reported without a location rather than with the wrong one.
 
 ### Making a node the compiler cannot see
 
@@ -105,7 +105,7 @@ A production build should leave `sourceLocations` off and then carries none of i
 - `observeGraph()` → `{ graph, sample(), detach() }`
 - `installDevtoolsHook()` → the global a tool attaches through
 - `serializeGraph(graph, now?, { ids, removed }?)` / `snapshotToRenderMap(snapshot)`
-- `applySnapshot(graph, snapshot)` — fold a full snapshot or a delta into what is drawn
-- `formatValue(value, limit?)` — a printable rendering of any value; never throws
+- `applySnapshot(graph, snapshot)`: fold a full snapshot or a delta into what is drawn
+- `formatValue(value, limit?)`: a printable rendering of any value; never throws
 - `createGraphView(svg)` → `{ update(graph, now?), clear() }`
-- `DEVTOOLS_CSS` — default theme string (override the `fx-*` classes to restyle)
+- `DEVTOOLS_CSS`: default theme string (override the `fx-*` classes to restyle)

package/dist/callsite.cjs

@@ -77,5 +77,12 @@ 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;
+  }
 }

package/dist/callsite.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"callsite.d.ts","sourceRoot":"","sources":["../src/callsite.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AA8D1D;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAgBrE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAErE"}
+{"version":3,"file":"callsite.d.ts","sourceRoot":"","sources":["../src/callsite.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,aAAa,CAAC;AA8D1D;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CACtB,KAAK,EAAE,MAAM,GAAG,SAAS,EACzB,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAgBrE;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,MAAM,CAAC,EAAE,MAAM,GACd;IAAE,QAAQ,EAAE,sBAAsB,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,GAAG,SAAS,CAYrE"}

package/dist/callsite.js

@@ -2,7 +2,7 @@
  * A browser extension's own bundle.
  *
  * The devtools agent carries a copy of this package, so every frame inside it looked like
- * application code and every node reported `chrome-extension://…/agent.js` as its origin.
+ * application code and every node reported `chrome-extension://.../agent.js` as its origin.
  * Nothing under these schemes is ever the page's own source.
  */
 const EXTENSION = ['chrome-extension://', 'moz-extension://', 'safari-web-extension://', 'extension://'];
@@ -87,5 +87,16 @@ export function callSite(stack, origin) {
  * the frames of the creating call are still on the stack.
  */
 export function currentCallSite(origin) {
-    return callSite(new Error().stack, origin);
+    // Deeper than the default ten frames: the reporting machinery and the framework's own calls
+    // can fill those, and the application's frame is the one past them.
+    // A V8 extension, absent from the DOM types; elsewhere it is an ignored property.
+    const errors = Error;
+    const limit = errors.stackTraceLimit;
+    errors.stackTraceLimit = 50;
+    try {
+        return callSite(new Error().stack, origin);
+    }
+    finally {
+        errors.stackTraceLimit = limit;
+    }
 }

package/dist/callsite.mjs

@@ -52,7 +52,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;
+  }
 }
 export {
   callSite,

package/dist/diff.cjs

@@ -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/diff.js

@@ -1,6 +1,6 @@
 // What changed, rather than what the value is now.
 //
-// `todos [{…}] → [{…}, {…}]` says nothing the graph did not. "One row added at index 2, here
+// `todos [{...}] → [{...}, {...}]` says nothing the graph did not. "One row added at index 2, here
 // it is" does. Computed at the write, while both sides are still in hand, afterwards only
 // the new value exists.
 import { formatValue } from './format.js';

package/dist/diff.mjs

@@ -80,6 +80,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/export.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/export.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/format.cjs

@@ -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/format.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../src/format.ts"],"names":[],"mappings":"AAoHA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,SAAM,GAAG,MAAM,CAQ/D;AAED,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,SAAK,GAAG,MAAM,CAExD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAO,GAAG,MAAM,CA4C5D"}
+{"version":3,"file":"format.d.ts","sourceRoot":"","sources":["../src/format.ts"],"names":[],"mappings":"AAwHA;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,SAAM,GAAG,MAAM,CAQ/D;AAED,+CAA+C;AAC/C,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,SAAK,GAAG,MAAM,CAExD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,SAAO,GAAG,MAAM,CA4C5D"}

package/dist/format.js

@@ -98,9 +98,14 @@ function walk(value, depth, seen) {
         }
         const keys = Object.keys(object);
         const shown = keys.slice(0, MAX_ENTRIES).map((key) => {
-            // A getter can throw, and a proxy can refuse. Neither is worth losing the whole value.
+            // A getter is shown, never called: on a component's props it builds the content
+            // (a `children` getter makes fresh nodes per read) and reads signals, so printing it
+            // ran the component's work again on every sample. A proxy can still refuse.
             let read;
             try {
+                const descriptor = Object.getOwnPropertyDescriptor(object, key);
+                if (descriptor?.get)
+                    return `${key}: [getter]`;
                 read = walk(object[key], depth + 1, seen);
             }
             catch {

package/dist/format.mjs

@@ -80,6 +80,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/hook.cjs

@@ -352,7 +352,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
@@ -441,6 +448,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]";
@@ -877,7 +886,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;
   };
@@ -895,6 +904,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];
@@ -1256,6 +1266,7 @@ function observeGraph(options = {}) {
     graph,
     sample() {
       described = null;
+      descendants = null;
       const changed = [];
       const moved = (id) => {
         changed.push(id);
@@ -1311,7 +1322,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;
@@ -1386,17 +1397,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;
     },
@@ -1509,6 +1511,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 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;
+}
 
 // src/highlight.ts
 var LAYER = "fx-highlight-layer";

package/dist/hook.mjs

@@ -330,7 +330,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
@@ -430,6 +437,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]";
@@ -866,7 +875,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;
   };
@@ -884,6 +893,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];
@@ -1245,6 +1255,7 @@ function observeGraph(options = {}) {
     graph,
     sample() {
       described = null;
+      descendants = null;
       const changed = [];
       const moved = (id) => {
         changed.push(id);
@@ -1300,7 +1311,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;
@@ -1375,17 +1386,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;
     },
@@ -1498,6 +1500,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 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;
+}
 
 // src/highlight.ts
 var LAYER = "fx-highlight-layer";

package/dist/index.cjs

@@ -1,4 +1,4 @@
-/*! @fluixi/devtools v0.2.0-alpha.7 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
+/*! @fluixi/devtools v1.0.0-alpha.101 | (c) 2026 Ibrahima Touré and Fluixi contributors | MIT */
 "use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -259,6 +259,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]";
@@ -665,7 +667,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
@@ -1709,7 +1718,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;
   };
@@ -1727,6 +1736,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];
@@ -2088,6 +2098,7 @@ function observeGraph(options = {}) {
     graph,
     sample() {
       described = null;
+      descendants = null;
       const changed = [];
       const moved = (id) => {
         changed.push(id);
@@ -2143,7 +2154,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;
@@ -2218,17 +2229,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;
     },
@@ -2341,6 +2343,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/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -1,20 +1,3 @@
-// @fluixi/devtools: live inspector for the Fluixi reactive graph.
-// Instrumented signal/memo/effect register into a graph; createGraphView renders + animates the
-// State → Memo → Effect propagation.
-//
-//   import { createReactor, createGraphView } from '@fluixi/devtools';
-//
-//   const reactor = createReactor();
-//   reactor.run(({ createSignal, createMemo, createEffect }) => {
-//     const [count, setCount] = createSignal(0, { name: 'count' });
-//     const double = createMemo(() => count() * 2, { name: 'double' });
-//     createEffect(() => console.log(double()), { name: 'log' });
-//     setInterval(() => setCount((n) => n + 1), 1000);
-//   });
-//
-//   const view = createGraphView(svgEl);
-//   const tick = () => { reactor.sample(); view.update(reactor.graph); requestAnimationFrame(tick); };
-//   tick();
 export { createReactor, nodeVersion, nodeState } from './instrument.js';
 export { observeGraph } from './observe.js';
 export { installDevtoolsHook } from './hook.js';