@pyreon/reactivity 0.19.0 → 0.21.0

package/lib/analysis/index.js.html

@@ -5386,7 +5386,7 @@ var drawChart = (function (exports) {
   </script>
   <script>
     /*<!--*/
-    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"3d8fcc8f-1","name":"batch.ts"},{"uid":"3d8fcc8f-3","name":"cell.ts"},{"uid":"3d8fcc8f-5","name":"scope.ts"},{"uid":"3d8fcc8f-7","name":"tracking.ts"},{"uid":"3d8fcc8f-9","name":"effect.ts"},{"uid":"3d8fcc8f-11","name":"computed.ts"},{"uid":"3d8fcc8f-13","name":"createSelector.ts"},{"uid":"3d8fcc8f-15","name":"debug.ts"},{"uid":"3d8fcc8f-17","name":"reactive-trace.ts"},{"uid":"3d8fcc8f-19","name":"signal.ts"},{"uid":"3d8fcc8f-21","name":"store.ts"},{"uid":"3d8fcc8f-23","name":"reconcile.ts"},{"uid":"3d8fcc8f-25","name":"resource.ts"},{"uid":"3d8fcc8f-27","name":"watch.ts"},{"uid":"3d8fcc8f-29","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"3d8fcc8f-1":{"renderedLength":3016,"gzipLength":1167,"brotliLength":0,"metaUid":"3d8fcc8f-0"},"3d8fcc8f-3":{"renderedLength":1636,"gzipLength":786,"brotliLength":0,"metaUid":"3d8fcc8f-2"},"3d8fcc8f-5":{"renderedLength":3026,"gzipLength":1226,"brotliLength":0,"metaUid":"3d8fcc8f-4"},"3d8fcc8f-7":{"renderedLength":2227,"gzipLength":858,"brotliLength":0,"metaUid":"3d8fcc8f-6"},"3d8fcc8f-9":{"renderedLength":7391,"gzipLength":2397,"brotliLength":0,"metaUid":"3d8fcc8f-8"},"3d8fcc8f-11":{"renderedLength":4716,"gzipLength":1476,"brotliLength":0,"metaUid":"3d8fcc8f-10"},"3d8fcc8f-13":{"renderedLength":2244,"gzipLength":981,"brotliLength":0,"metaUid":"3d8fcc8f-12"},"3d8fcc8f-15":{"renderedLength":2469,"gzipLength":1092,"brotliLength":0,"metaUid":"3d8fcc8f-14"},"3d8fcc8f-17":{"renderedLength":2721,"gzipLength":1363,"brotliLength":0,"metaUid":"3d8fcc8f-16"},"3d8fcc8f-19":{"renderedLength":3408,"gzipLength":1476,"brotliLength":0,"metaUid":"3d8fcc8f-18"},"3d8fcc8f-21":{"renderedLength":5232,"gzipLength":1867,"brotliLength":0,"metaUid":"3d8fcc8f-20"},"3d8fcc8f-23":{"renderedLength":2278,"gzipLength":940,"brotliLength":0,"metaUid":"3d8fcc8f-22"},"3d8fcc8f-25":{"renderedLength":1205,"gzipLength":524,"brotliLength":0,"metaUid":"3d8fcc8f-24"},"3d8fcc8f-27":{"renderedLength":1249,"gzipLength":582,"brotliLength":0,"metaUid":"3d8fcc8f-26"},"3d8fcc8f-29":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"3d8fcc8f-28"}},"nodeMetas":{"3d8fcc8f-0":{"id":"/src/batch.ts","moduleParts":{"index.js":"3d8fcc8f-1"},"imported":[],"importedBy":[{"uid":"3d8fcc8f-28"},{"uid":"3d8fcc8f-10"},{"uid":"3d8fcc8f-18"},{"uid":"3d8fcc8f-6"}]},"3d8fcc8f-2":{"id":"/src/cell.ts","moduleParts":{"index.js":"3d8fcc8f-3"},"imported":[],"importedBy":[{"uid":"3d8fcc8f-28"}]},"3d8fcc8f-4":{"id":"/src/scope.ts","moduleParts":{"index.js":"3d8fcc8f-5"},"imported":[],"importedBy":[{"uid":"3d8fcc8f-28"},{"uid":"3d8fcc8f-10"},{"uid":"3d8fcc8f-8"}]},"3d8fcc8f-6":{"id":"/src/tracking.ts","moduleParts":{"index.js":"3d8fcc8f-7"},"imported":[{"uid":"3d8fcc8f-0"}],"importedBy":[{"uid":"3d8fcc8f-28"},{"uid":"3d8fcc8f-10"},{"uid":"3d8fcc8f-12"},{"uid":"3d8fcc8f-8"},{"uid":"3d8fcc8f-24"},{"uid":"3d8fcc8f-18"}]},"3d8fcc8f-8":{"id":"/src/effect.ts","moduleParts":{"index.js":"3d8fcc8f-9"},"imported":[{"uid":"3d8fcc8f-4"},{"uid":"3d8fcc8f-6"}],"importedBy":[{"uid":"3d8fcc8f-28"},{"uid":"3d8fcc8f-10"},{"uid":"3d8fcc8f-12"},{"uid":"3d8fcc8f-24"},{"uid":"3d8fcc8f-26"}]},"3d8fcc8f-10":{"id":"/src/computed.ts","moduleParts":{"index.js":"3d8fcc8f-11"},"imported":[{"uid":"3d8fcc8f-0"},{"uid":"3d8fcc8f-8"},{"uid":"3d8fcc8f-4"},{"uid":"3d8fcc8f-6"}],"importedBy":[{"uid":"3d8fcc8f-28"}]},"3d8fcc8f-12":{"id":"/src/createSelector.ts","moduleParts":{"index.js":"3d8fcc8f-13"},"imported":[{"uid":"3d8fcc8f-8"},{"uid":"3d8fcc8f-6"}],"importedBy":[{"uid":"3d8fcc8f-28"}]},"3d8fcc8f-14":{"id":"/src/debug.ts","moduleParts":{"index.js":"3d8fcc8f-15"},"imported":[],"importedBy":[{"uid":"3d8fcc8f-28"},{"uid":"3d8fcc8f-18"}]},"3d8fcc8f-16":{"id":"/src/reactive-trace.ts","moduleParts":{"index.js":"3d8fcc8f-17"},"imported":[],"importedBy":[{"uid":"3d8fcc8f-28"},{"uid":"3d8fcc8f-18"}]},"3d8fcc8f-18":{"id":"/src/signal.ts","moduleParts":{"index.js":"3d8fcc8f-19"},"imported":[{"uid":"3d8fcc8f-0"},{"uid":"3d8fcc8f-14"},{"uid":"3d8fcc8f-16"},{"uid":"3d8fcc8f-6"}],"importedBy":[{"uid":"3d8fcc8f-28"},{"uid":"3d8fcc8f-24"},{"uid":"3d8fcc8f-20"}]},"3d8fcc8f-20":{"id":"/src/store.ts","moduleParts":{"index.js":"3d8fcc8f-21"},"imported":[{"uid":"3d8fcc8f-18"}],"importedBy":[{"uid":"3d8fcc8f-28"},{"uid":"3d8fcc8f-22"}]},"3d8fcc8f-22":{"id":"/src/reconcile.ts","moduleParts":{"index.js":"3d8fcc8f-23"},"imported":[{"uid":"3d8fcc8f-20"}],"importedBy":[{"uid":"3d8fcc8f-28"}]},"3d8fcc8f-24":{"id":"/src/resource.ts","moduleParts":{"index.js":"3d8fcc8f-25"},"imported":[{"uid":"3d8fcc8f-8"},{"uid":"3d8fcc8f-18"},{"uid":"3d8fcc8f-6"}],"importedBy":[{"uid":"3d8fcc8f-28"}]},"3d8fcc8f-26":{"id":"/src/watch.ts","moduleParts":{"index.js":"3d8fcc8f-27"},"imported":[{"uid":"3d8fcc8f-8"}],"importedBy":[{"uid":"3d8fcc8f-28"}]},"3d8fcc8f-28":{"id":"/src/index.ts","moduleParts":{"index.js":"3d8fcc8f-29"},"imported":[{"uid":"3d8fcc8f-0"},{"uid":"3d8fcc8f-2"},{"uid":"3d8fcc8f-10"},{"uid":"3d8fcc8f-12"},{"uid":"3d8fcc8f-14"},{"uid":"3d8fcc8f-16"},{"uid":"3d8fcc8f-8"},{"uid":"3d8fcc8f-22"},{"uid":"3d8fcc8f-24"},{"uid":"3d8fcc8f-4"},{"uid":"3d8fcc8f-18"},{"uid":"3d8fcc8f-20"},{"uid":"3d8fcc8f-6"},{"uid":"3d8fcc8f-26"}],"importedBy":[],"isEntry":true}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
+    const data = {"version":2,"tree":{"name":"root","children":[{"name":"index.js","children":[{"name":"src","children":[{"uid":"c60e3531-1","name":"batch.ts"},{"uid":"c60e3531-3","name":"cell.ts"},{"uid":"c60e3531-5","name":"reactive-devtools.ts"},{"uid":"c60e3531-7","name":"scope.ts"},{"uid":"c60e3531-9","name":"tracking.ts"},{"uid":"c60e3531-11","name":"effect.ts"},{"uid":"c60e3531-13","name":"computed.ts"},{"uid":"c60e3531-15","name":"createSelector.ts"},{"uid":"c60e3531-17","name":"debug.ts"},{"uid":"c60e3531-19","name":"reactive-trace.ts"},{"uid":"c60e3531-21","name":"signal.ts"},{"uid":"c60e3531-23","name":"store.ts"},{"uid":"c60e3531-25","name":"reconcile.ts"},{"uid":"c60e3531-27","name":"resource.ts"},{"uid":"c60e3531-29","name":"watch.ts"},{"uid":"c60e3531-31","name":"index.ts"}]}]}],"isRoot":true},"nodeParts":{"c60e3531-1":{"renderedLength":3016,"gzipLength":1167,"brotliLength":0,"metaUid":"c60e3531-0"},"c60e3531-3":{"renderedLength":1636,"gzipLength":786,"brotliLength":0,"metaUid":"c60e3531-2"},"c60e3531-5":{"renderedLength":4438,"gzipLength":1940,"brotliLength":0,"metaUid":"c60e3531-4"},"c60e3531-7":{"renderedLength":3026,"gzipLength":1226,"brotliLength":0,"metaUid":"c60e3531-6"},"c60e3531-9":{"renderedLength":2227,"gzipLength":858,"brotliLength":0,"metaUid":"c60e3531-8"},"c60e3531-11":{"renderedLength":7605,"gzipLength":2433,"brotliLength":0,"metaUid":"c60e3531-10"},"c60e3531-13":{"renderedLength":4983,"gzipLength":1524,"brotliLength":0,"metaUid":"c60e3531-12"},"c60e3531-15":{"renderedLength":2244,"gzipLength":981,"brotliLength":0,"metaUid":"c60e3531-14"},"c60e3531-17":{"renderedLength":2469,"gzipLength":1092,"brotliLength":0,"metaUid":"c60e3531-16"},"c60e3531-19":{"renderedLength":2721,"gzipLength":1363,"brotliLength":0,"metaUid":"c60e3531-18"},"c60e3531-21":{"renderedLength":3535,"gzipLength":1513,"brotliLength":0,"metaUid":"c60e3531-20"},"c60e3531-23":{"renderedLength":5232,"gzipLength":1867,"brotliLength":0,"metaUid":"c60e3531-22"},"c60e3531-25":{"renderedLength":2278,"gzipLength":940,"brotliLength":0,"metaUid":"c60e3531-24"},"c60e3531-27":{"renderedLength":1205,"gzipLength":524,"brotliLength":0,"metaUid":"c60e3531-26"},"c60e3531-29":{"renderedLength":1249,"gzipLength":582,"brotliLength":0,"metaUid":"c60e3531-28"},"c60e3531-31":{"renderedLength":0,"gzipLength":0,"brotliLength":0,"metaUid":"c60e3531-30"}},"nodeMetas":{"c60e3531-0":{"id":"/src/batch.ts","moduleParts":{"index.js":"c60e3531-1"},"imported":[],"importedBy":[{"uid":"c60e3531-30"},{"uid":"c60e3531-12"},{"uid":"c60e3531-20"},{"uid":"c60e3531-8"}]},"c60e3531-2":{"id":"/src/cell.ts","moduleParts":{"index.js":"c60e3531-3"},"imported":[],"importedBy":[{"uid":"c60e3531-30"}]},"c60e3531-4":{"id":"/src/reactive-devtools.ts","moduleParts":{"index.js":"c60e3531-5"},"imported":[],"importedBy":[{"uid":"c60e3531-30"},{"uid":"c60e3531-12"},{"uid":"c60e3531-10"},{"uid":"c60e3531-20"}]},"c60e3531-6":{"id":"/src/scope.ts","moduleParts":{"index.js":"c60e3531-7"},"imported":[],"importedBy":[{"uid":"c60e3531-30"},{"uid":"c60e3531-12"},{"uid":"c60e3531-10"}]},"c60e3531-8":{"id":"/src/tracking.ts","moduleParts":{"index.js":"c60e3531-9"},"imported":[{"uid":"c60e3531-0"}],"importedBy":[{"uid":"c60e3531-30"},{"uid":"c60e3531-12"},{"uid":"c60e3531-14"},{"uid":"c60e3531-10"},{"uid":"c60e3531-26"},{"uid":"c60e3531-20"}]},"c60e3531-10":{"id":"/src/effect.ts","moduleParts":{"index.js":"c60e3531-11"},"imported":[{"uid":"c60e3531-4"},{"uid":"c60e3531-6"},{"uid":"c60e3531-8"}],"importedBy":[{"uid":"c60e3531-30"},{"uid":"c60e3531-12"},{"uid":"c60e3531-14"},{"uid":"c60e3531-26"},{"uid":"c60e3531-28"}]},"c60e3531-12":{"id":"/src/computed.ts","moduleParts":{"index.js":"c60e3531-13"},"imported":[{"uid":"c60e3531-0"},{"uid":"c60e3531-10"},{"uid":"c60e3531-4"},{"uid":"c60e3531-6"},{"uid":"c60e3531-8"}],"importedBy":[{"uid":"c60e3531-30"}]},"c60e3531-14":{"id":"/src/createSelector.ts","moduleParts":{"index.js":"c60e3531-15"},"imported":[{"uid":"c60e3531-10"},{"uid":"c60e3531-8"}],"importedBy":[{"uid":"c60e3531-30"}]},"c60e3531-16":{"id":"/src/debug.ts","moduleParts":{"index.js":"c60e3531-17"},"imported":[],"importedBy":[{"uid":"c60e3531-30"},{"uid":"c60e3531-20"}]},"c60e3531-18":{"id":"/src/reactive-trace.ts","moduleParts":{"index.js":"c60e3531-19"},"imported":[],"importedBy":[{"uid":"c60e3531-30"},{"uid":"c60e3531-20"}]},"c60e3531-20":{"id":"/src/signal.ts","moduleParts":{"index.js":"c60e3531-21"},"imported":[{"uid":"c60e3531-0"},{"uid":"c60e3531-16"},{"uid":"c60e3531-4"},{"uid":"c60e3531-18"},{"uid":"c60e3531-8"}],"importedBy":[{"uid":"c60e3531-30"},{"uid":"c60e3531-26"},{"uid":"c60e3531-22"}]},"c60e3531-22":{"id":"/src/store.ts","moduleParts":{"index.js":"c60e3531-23"},"imported":[{"uid":"c60e3531-20"}],"importedBy":[{"uid":"c60e3531-30"},{"uid":"c60e3531-24"}]},"c60e3531-24":{"id":"/src/reconcile.ts","moduleParts":{"index.js":"c60e3531-25"},"imported":[{"uid":"c60e3531-22"}],"importedBy":[{"uid":"c60e3531-30"}]},"c60e3531-26":{"id":"/src/resource.ts","moduleParts":{"index.js":"c60e3531-27"},"imported":[{"uid":"c60e3531-10"},{"uid":"c60e3531-20"},{"uid":"c60e3531-8"}],"importedBy":[{"uid":"c60e3531-30"}]},"c60e3531-28":{"id":"/src/watch.ts","moduleParts":{"index.js":"c60e3531-29"},"imported":[{"uid":"c60e3531-10"}],"importedBy":[{"uid":"c60e3531-30"}]},"c60e3531-30":{"id":"/src/index.ts","moduleParts":{"index.js":"c60e3531-31"},"imported":[{"uid":"c60e3531-0"},{"uid":"c60e3531-2"},{"uid":"c60e3531-12"},{"uid":"c60e3531-14"},{"uid":"c60e3531-16"},{"uid":"c60e3531-4"},{"uid":"c60e3531-18"},{"uid":"c60e3531-10"},{"uid":"c60e3531-24"},{"uid":"c60e3531-26"},{"uid":"c60e3531-6"},{"uid":"c60e3531-20"},{"uid":"c60e3531-22"},{"uid":"c60e3531-8"},{"uid":"c60e3531-28"}],"importedBy":[],"isEntry":true}},"env":{"rollup":"4.23.0"},"options":{"gzip":true,"brotli":false,"sourcemap":false}};
 
     const run = () => {
       const width = window.innerWidth;

package/lib/index.js

@@ -149,6 +149,169 @@ function cell(value) {
 	return new Cell(value);
 }
 
+//#endregion
+//#region src/reactive-devtools.ts
+let _active = false;
+let _nextId = 1;
+const _byId = /* @__PURE__ */ new Map();
+const _subId = /* @__PURE__ */ new WeakMap();
+/** @internal — finalizer callback; prunes the record when a node is GC'd. */
+function _rdPrune(id) {
+	_byId.delete(id);
+}
+const _finalizer = new FinalizationRegistry(_rdPrune);
+const FIRE_CAP = 512;
+let _fireBuf = null;
+let _fireCount = 0;
+const PREVIEW_MAX$1 = 60;
+function preview$1(v) {
+	let s;
+	try {
+		if (v === null) return "null";
+		if (v === void 0) return "undefined";
+		const t = typeof v;
+		if (t === "string") s = JSON.stringify(v);
+		else if (t === "number" || t === "boolean" || t === "bigint") s = String(v);
+		else if (t === "function") s = `[Function ${v.name || "anonymous"}]`;
+		else if (t === "symbol") s = v.toString();
+		else if (Array.isArray(v)) s = `Array(${v.length})`;
+		else {
+			const ctor = v.constructor?.name;
+			let keys = [];
+			try {
+				keys = Object.keys(v).slice(0, 3);
+			} catch {
+				keys = [];
+			}
+			s = `${ctor && ctor !== "Object" ? `${ctor} ` : ""}{${keys.join(", ")}${keys.length === 3 ? ", …" : ""}}`;
+		}
+	} catch {
+		s = "[unstringifiable]";
+	}
+	return s.length > PREVIEW_MAX$1 ? `${s.slice(0, PREVIEW_MAX$1)}…` : s;
+}
+/** Activate the bridge. Idempotent. Called when a devtools client attaches. */
+function activateReactiveDevtools() {
+	_active = true;
+}
+/**
+* Deactivate + drop all retained state. Called when the devtools client
+* disconnects so a closed panel leaves zero residue.
+*/
+function deactivateReactiveDevtools() {
+	_active = false;
+	_byId.clear();
+	_fireBuf = null;
+	_fireCount = 0;
+}
+function isReactiveDevtoolsActive() {
+	return _active;
+}
+/**
+* Register a signal/computed/effect node. `host` is the object carrying
+* the `_s` subscriber Set (the signal read fn itself, or a computed's
+* internal host). `sub` is the notify closure (`recompute`/`run`) whose
+* identity appears in upstream `_s` Sets — used to resolve edges.
+*
+* @internal
+*/
+function _rdRegister(node, kind, host, sub, label) {
+	if (!_active) return void 0;
+	const id = _nextId++;
+	_byId.set(id, {
+		id,
+		kind,
+		name: label ?? `${kind === "signal" ? "signal" : kind}#${id}`,
+		ref: new WeakRef(node),
+		hostRef: host ? new WeakRef(host) : null,
+		fires: 0,
+		lastFire: null
+	});
+	if (sub) _subId.set(sub, id);
+	_finalizer.register(node, id);
+	Object.defineProperty(node, "__pxRdId", {
+		value: id,
+		enumerable: false,
+		configurable: true
+	});
+	return id;
+}
+/**
+* Record that a node fired (signal write / computed recompute / effect
+* run). Bumps counters + appends to the bounded fire buffer.
+*
+* @internal
+*/
+function _rdRecordFire(node) {
+	if (!_active) return;
+	const id = node.__pxRdId;
+	if (id === void 0) return;
+	const rec = _byId.get(id);
+	const ts = typeof performance !== "undefined" && typeof performance.now === "function" ? performance.now() : Date.now();
+	if (rec) {
+		rec.fires++;
+		rec.lastFire = ts;
+	}
+	if (_fireBuf === null) _fireBuf = new Array(FIRE_CAP);
+	_fireBuf[_fireCount % FIRE_CAP] = {
+		id,
+		ts
+	};
+	_fireCount++;
+}
+function resolveSubId(sub) {
+	const direct = sub.__pxRdId;
+	if (direct !== void 0) return direct;
+	return _subId.get(sub);
+}
+/**
+* Fresh snapshot of the live reactive graph. Edges are recomputed from
+* each live node's current subscriber Set — always consistent with the
+* framework's real subscription state, no incremental drift.
+*/
+function getReactiveGraph() {
+	const nodes = [];
+	const edges = [];
+	for (const rec of _byId.values()) {
+		const node = rec.ref.deref();
+		if (!node) continue;
+		const subs = (rec.hostRef?.deref() ?? null)?._s ?? null;
+		const valueStr = rec.kind === "effect" ? "" : preview$1(node._v);
+		nodes.push({
+			id: rec.id,
+			kind: rec.kind,
+			name: rec.name,
+			value: valueStr,
+			subscribers: subs?.size ?? 0,
+			fires: rec.fires,
+			lastFire: rec.lastFire
+		});
+		if (subs) for (const cb of subs) {
+			const to = resolveSubId(cb);
+			if (to !== void 0) edges.push({
+				from: rec.id,
+				to
+			});
+		}
+	}
+	return {
+		nodes,
+		edges
+	};
+}
+/** Bounded recent-fire timeline (oldest → newest). Fresh copy. */
+function getReactiveFires() {
+	if (_fireBuf === null || _fireCount === 0) return [];
+	if (_fireCount <= FIRE_CAP) return _fireBuf.slice(0, _fireCount);
+	const start = _fireCount % FIRE_CAP;
+	const out = [];
+	for (let i = 0; i < FIRE_CAP; i++) {
+		const e = _fireBuf[(start + i) % FIRE_CAP];
+		if (e) out.push(e);
+	}
+	return out;
+}
+
 //#endregion
 //#region src/scope.ts
 var EffectScope = class {
@@ -437,7 +600,10 @@ function effect(fn) {
 	};
 	const run = () => {
 		if (disposed) return;
-		if (process.env.NODE_ENV !== "production") _countSink$2.__pyreon_count__?.("reactivity.effectRun");
+		if (process.env.NODE_ENV !== "production") {
+			_countSink$2.__pyreon_count__?.("reactivity.effectRun");
+			_rdRecordFire(run);
+		}
 		runCleanup();
 		const outerCollector = _innerEffectCollector;
 		const myInners = [];
@@ -462,6 +628,7 @@ function effect(fn) {
 		if (!isFirstRun) scope?.notifyEffectRan();
 		isFirstRun = false;
 	};
+	if (process.env.NODE_ENV !== "production") _rdRegister(run, "effect", null, run, void 0);
 	run();
 	const e = { dispose() {
 		runCleanup();
@@ -560,6 +727,7 @@ function renderEffect(fn) {
 			}
 		} else renderEffectFullTrack(deps, run, trackedFn);
 	};
+	if (process.env.NODE_ENV !== "production") _rdRegister(run, "effect", null, run, void 0);
 	run();
 	const dispose = () => {
 		if (disposed) return;
@@ -621,7 +789,10 @@ function computedLazy(fn) {
 	const read = () => {
 		trackSubscriber(host);
 		if (dirty) {
-			if (process.env.NODE_ENV !== "production") _countSink$1.__pyreon_count__?.("reactivity.computedRecompute");
+			if (process.env.NODE_ENV !== "production") {
+				_countSink$1.__pyreon_count__?.("reactivity.computedRecompute");
+				_rdRecordFire(read);
+			}
 			try {
 				if (tracked) {
 					setSkipDepsCollection(true);
@@ -661,6 +832,7 @@ function computedLazy(fn) {
 			set.delete(updater);
 		};
 	};
+	if (process.env.NODE_ENV !== "production") _rdRegister(read, "derived", host, recompute, void 0);
 	getCurrentScope()?.add({ dispose: read.dispose });
 	return read;
 }
@@ -680,7 +852,10 @@ function computedWithEquals(fn, equals) {
 	let directFns = null;
 	const recompute = () => {
 		if (disposed) return;
-		if (process.env.NODE_ENV !== "production") _countSink$1.__pyreon_count__?.("reactivity.computedRecompute");
+		if (process.env.NODE_ENV !== "production") {
+			_countSink$1.__pyreon_count__?.("reactivity.computedRecompute");
+			_rdRecordFire(read);
+		}
 		cleanupLocalDeps(deps, recompute);
 		try {
 			const next = trackWithLocalDeps(deps, recompute, fn);
@@ -735,6 +910,7 @@ function computedWithEquals(fn, equals) {
 			set.delete(updater);
 		};
 	};
+	if (process.env.NODE_ENV !== "production") _rdRegister(read, "derived", host, recompute, void 0);
 	getCurrentScope()?.add({ dispose: read.dispose });
 	return read;
 }
@@ -1013,7 +1189,10 @@ function _set(newValue) {
 	if (process.env.NODE_ENV !== "production") _countSink.__pyreon_count__?.("reactivity.signalWrite");
 	const prev = this._v;
 	this._v = newValue;
-	if (process.env.NODE_ENV !== "production") _recordSignalWrite(this.label, prev, newValue);
+	if (process.env.NODE_ENV !== "production") {
+		_recordSignalWrite(this.label, prev, newValue);
+		_rdRecordFire(this);
+	}
 	if (isTracing()) try {
 		_notifyTraceListeners(this, prev, newValue);
 	} catch (err) {
@@ -1096,6 +1275,7 @@ function signal(initialValue, options) {
 	read.direct = _directFn;
 	read.debug = _debug;
 	read.label = options?.name;
+	if (process.env.NODE_ENV !== "production") _rdRegister(read, "signal", read, null, read.label);
 	return read;
 }
 
@@ -1416,5 +1596,5 @@ function watch(source, callback, opts = {}) {
 }
 
 //#endregion
-export { Cell, EffectScope, _bind, batch, cell, clearReactiveTrace, computed, createResource, createSelector, createStore, effect, effectScope, getCurrentScope, getReactiveTrace, inspectSignal, isStore, markRaw, nextTick, onCleanup, onScopeDispose, onSignalUpdate, reconcile, renderEffect, runUntracked, runUntracked as untrack, setCurrentScope, setErrorHandler, setSnapshotCapture, shallowReactive, signal, watch, why };
+export { Cell, EffectScope, _bind, activateReactiveDevtools, batch, cell, clearReactiveTrace, computed, createResource, createSelector, createStore, deactivateReactiveDevtools, effect, effectScope, getCurrentScope, getReactiveFires, getReactiveGraph, getReactiveTrace, inspectSignal, isReactiveDevtoolsActive, isStore, markRaw, nextTick, onCleanup, onScopeDispose, onSignalUpdate, reconcile, renderEffect, runUntracked, runUntracked as untrack, setCurrentScope, setErrorHandler, setSnapshotCapture, shallowReactive, signal, watch, why };
 //# sourceMappingURL=index.js.map

package/lib/types/index.d.ts

@@ -209,6 +209,80 @@ declare function why(): void;
  */
 declare function inspectSignal<T>(sig: Signal<T>): SignalDebugInfo<T>;
 //#endregion
+//#region src/reactive-devtools.d.ts
+/**
+ * Reactive devtools bridge — an OPT-IN, leak-free introspection layer
+ * over the live signal / computed / effect graph.
+ *
+ * Powers the `@pyreon/devtools` Signals / Graph / Effects / Console
+ * surfaces. Design constraints (mirroring `reactive-trace.ts`):
+ *
+ *   - **Zero cost until attached.** Every instrumentation entry point
+ *     early-returns on `!_active`. The registry is empty and no work
+ *     happens until a devtools client calls `activateReactiveDevtools()`.
+ *     The single call site per creation/track sits inside the existing
+ *     `process.env.NODE_ENV !== 'production'` gate (tree-shaken in prod)
+ *     and is structurally identical to the perf-harness counter calls
+ *     and `_recordSignalWrite` already on those paths.
+ *   - **No retention / no leak.** Nodes are held via `WeakRef` and
+ *     pruned by a `FinalizationRegistry`. The registry never pins a
+ *     signal/computed/effect alive. Edges + the fire ring buffer hold
+ *     only numeric ids and primitives, never node references or values.
+ *   - **Snapshot on demand.** `getReactiveGraph()` recomputes the edge
+ *     set fresh from the live subscriber Sets — no incremental
+ *     bookkeeping to drift out of sync with `cleanupEffect`.
+ *
+ * Names: signals carry `.label` (set explicitly or by the vite plugin's
+ * dev auto-naming). Computeds/effects have no name in the framework, so
+ * they get a stable synthetic label (`derived#12` / `effect#7`).
+ */
+type ReactiveNodeKind = 'signal' | 'derived' | 'effect';
+interface ReactiveNode {
+  id: number;
+  kind: ReactiveNodeKind;
+  /** Explicit `.label` for signals; synthetic (`derived#id`) otherwise. */
+  name: string;
+  /** Bounded string preview of the current value (signals/derived only). */
+  value: string;
+  /** Live downstream subscriber count. */
+  subscribers: number;
+  /** Total times this node has fired/recomputed since activation. */
+  fires: number;
+  /** `performance.now()` of the most recent fire, or null. */
+  lastFire: number | null;
+}
+interface ReactiveEdge {
+  /** Source node id (the reactive value being read). */
+  from: number;
+  /** Subscriber node id (the computed/effect that read it). */
+  to: number;
+}
+interface ReactiveGraph {
+  nodes: ReactiveNode[];
+  edges: ReactiveEdge[];
+}
+interface ReactiveFire {
+  id: number;
+  /** `performance.now()` at fire time. */
+  ts: number;
+}
+/** Activate the bridge. Idempotent. Called when a devtools client attaches. */
+declare function activateReactiveDevtools(): void;
+/**
+ * Deactivate + drop all retained state. Called when the devtools client
+ * disconnects so a closed panel leaves zero residue.
+ */
+declare function deactivateReactiveDevtools(): void;
+declare function isReactiveDevtoolsActive(): boolean;
+/**
+ * Fresh snapshot of the live reactive graph. Edges are recomputed from
+ * each live node's current subscriber Set — always consistent with the
+ * framework's real subscription state, no incremental drift.
+ */
+declare function getReactiveGraph(): ReactiveGraph;
+/** Bounded recent-fire timeline (oldest → newest). Fresh copy. */
+declare function getReactiveFires(): ReactiveFire[];
+//#endregion
 //#region src/reactive-trace.d.ts
 /**
  * Reactive trace — a bounded, dev-only ring buffer of recent signal
@@ -515,5 +589,5 @@ interface WatchOptions {
  */
 declare function watch<T>(source: () => T, callback: (newVal: T, oldVal: T | undefined) => void | (() => void), opts?: WatchOptions): () => void;
 //#endregion
-export { Cell, type Computed, type ComputedOptions, type Effect, EffectScope, type ReactiveSnapshotCapture, type ReactiveTraceEntry, type ReadonlySignal, type Resource, type Signal, type SignalDebugInfo, type SignalOptions, type WatchOptions, _bind, batch, cell, clearReactiveTrace, computed, createResource, createSelector, createStore, effect, effectScope, getCurrentScope, getReactiveTrace, inspectSignal, isStore, markRaw, nextTick, onCleanup, onScopeDispose, onSignalUpdate, reconcile, renderEffect, runUntracked, runUntracked as untrack, setCurrentScope, setErrorHandler, setSnapshotCapture, shallowReactive, signal, watch, why };
+export { Cell, type Computed, type ComputedOptions, type Effect, EffectScope, type ReactiveEdge, type ReactiveFire, type ReactiveGraph, type ReactiveNode, type ReactiveNodeKind, type ReactiveSnapshotCapture, type ReactiveTraceEntry, type ReadonlySignal, type Resource, type Signal, type SignalDebugInfo, type SignalOptions, type WatchOptions, _bind, activateReactiveDevtools, batch, cell, clearReactiveTrace, computed, createResource, createSelector, createStore, deactivateReactiveDevtools, effect, effectScope, getCurrentScope, getReactiveFires, getReactiveGraph, getReactiveTrace, inspectSignal, isReactiveDevtoolsActive, isStore, markRaw, nextTick, onCleanup, onScopeDispose, onSignalUpdate, reconcile, renderEffect, runUntracked, runUntracked as untrack, setCurrentScope, setErrorHandler, setSnapshotCapture, shallowReactive, signal, watch, why };
 //# sourceMappingURL=index2.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pyreon/reactivity",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Signals-based reactivity system for Pyreon",
   "homepage": "https://github.com/pyreon/pyreon/tree/main/packages/reactivity#readme",
   "bugs": {

package/src/computed.ts

@@ -1,5 +1,6 @@
 import { _markRecompute } from './batch'
 import { _errorHandler } from './effect'
+import { _rdRecordFire, _rdRegister } from './reactive-devtools'
 import { getCurrentScope } from './scope'
 import {
   cleanupEffect,
@@ -108,8 +109,10 @@ function computedLazy<T>(fn: () => T): Computed<T> {
   const read = (): T => {
     trackSubscriber(host)
     if (dirty) {
-      if (process.env.NODE_ENV !== 'production')
+      if (process.env.NODE_ENV !== 'production') {
         _countSink.__pyreon_count__?.('reactivity.computedRecompute')
+        _rdRecordFire(read)
+      }
       try {
         if (tracked) {
           // Deps already established from first run — skip adding to
@@ -161,6 +164,9 @@ function computedLazy<T>(fn: () => T): Computed<T> {
     }
   }
 
+  if (process.env.NODE_ENV !== 'production')
+    _rdRegister(read, 'derived', host, recompute, undefined)
+
   getCurrentScope()?.add({ dispose: read.dispose })
   return read as Computed<T>
 }
@@ -190,8 +196,10 @@ function computedWithEquals<T>(fn: () => T, equals: (prev: T, next: T) => boolea
 
   const recompute = () => {
     if (disposed) return
-    if (process.env.NODE_ENV !== 'production')
+    if (process.env.NODE_ENV !== 'production') {
       _countSink.__pyreon_count__?.('reactivity.computedRecompute')
+      _rdRecordFire(read)
+    }
     cleanupLocalDeps(deps, recompute)
     try {
       const next = trackWithLocalDeps(deps, recompute, fn)
@@ -256,6 +264,9 @@ function computedWithEquals<T>(fn: () => T, equals: (prev: T, next: T) => boolea
     }
   }
 
+  if (process.env.NODE_ENV !== 'production')
+    _rdRegister(read, 'derived', host, recompute, undefined)
+
   getCurrentScope()?.add({ dispose: read.dispose })
   return read as Computed<T>
 }

package/src/effect.ts

@@ -1,3 +1,4 @@
+import { _rdRecordFire, _rdRegister } from './reactive-devtools'
 import { getCurrentScope } from './scope'
 import { _restoreActiveEffect, _setActiveEffect, setDepsCollector, withTracking } from './tracking'
 
@@ -211,8 +212,10 @@ export function effect(fn: () => (() => void) | void): Effect {
 
   const run = () => {
     if (disposed) return
-    if (process.env.NODE_ENV !== 'production')
+    if (process.env.NODE_ENV !== 'production') {
       _countSink.__pyreon_count__?.('reactivity.effectRun')
+      _rdRecordFire(run)
+    }
     // Run previous cleanup before re-running
     runCleanup()
     // Start a new inner-effect collection window. Effects created during
@@ -254,6 +257,9 @@ export function effect(fn: () => (() => void) | void): Effect {
     isFirstRun = false
   }
 
+  if (process.env.NODE_ENV !== 'production')
+    _rdRegister(run, 'effect', null, run, undefined)
+
   run()
 
   const e: Effect = {
@@ -409,6 +415,9 @@ export function renderEffect(fn: () => void): () => void {
     }
   }
 
+  if (process.env.NODE_ENV !== 'production')
+    _rdRegister(run, 'effect', null, run, undefined)
+
   run()
 
   const dispose = () => {

package/src/index.ts

@@ -5,6 +5,20 @@ export { Cell, cell } from './cell'
 export { type Computed, type ComputedOptions, computed } from './computed'
 export { createSelector } from './createSelector'
 export { inspectSignal, onSignalUpdate, why } from './debug'
+export type {
+  ReactiveEdge,
+  ReactiveFire,
+  ReactiveGraph,
+  ReactiveNode,
+  ReactiveNodeKind,
+} from './reactive-devtools'
+export {
+  activateReactiveDevtools,
+  deactivateReactiveDevtools,
+  getReactiveFires,
+  getReactiveGraph,
+  isReactiveDevtoolsActive,
+} from './reactive-devtools'
 export type { ReactiveTraceEntry } from './reactive-trace'
 export { clearReactiveTrace, getReactiveTrace } from './reactive-trace'
 export {

package/src/manifest.ts

@@ -596,6 +596,52 @@ count.set(101)  // logs/reports via handler instead of crashing`,
       ],
       seeAlso: ['effect', 'renderEffect'],
     },
+    {
+      name: 'activateReactiveDevtools',
+      kind: 'function',
+      signature:
+        'activateReactiveDevtools(): void  ·  deactivateReactiveDevtools(): void  ·  isReactiveDevtoolsActive(): boolean',
+      summary:
+        'Opt-in lifecycle for the reactive-devtools bridge — the live signal/computed/effect graph the `@pyreon/devtools` Signals/Graph/Effects/Profiler tabs consume (surfaced on the browser hook as `window.__PYREON_DEVTOOLS__.reactive`). **Zero cost until activated**: every per-primitive instrumentation point early-returns on the inactive flag and sits inside the production dead-code gate, so it tree-shakes out of prod builds entirely (locked by a minified-bundle test) and, in dev, costs one predicted-false branch until a devtools client calls `activate()` — the same risk profile as the adjacent reactive-trace / perf-harness calls. `deactivate()` drops all retained registry + fire-buffer state (a closed panel leaves zero residue). Leak-free by construction: nodes are held via `WeakRef` + `FinalizationRegistry`, never pinned.',
+      example: `import { activateReactiveDevtools, getReactiveGraph } from '@pyreon/reactivity'
+
+// Only AFTER activation are subsequently-created signals tracked.
+activateReactiveDevtools()
+const price = signal(10, { name: '$price' })
+const total = computed(() => price() * 2)
+effect(() => total())
+getReactiveGraph().nodes // → [$price (signal), derived, effect]
+deactivateReactiveDevtools() // → registry cleared`,
+      mistakes: [
+        'Expecting nodes created BEFORE `activate()` to appear — registration is gated on the active flag (mirrors a devtools panel attaching). Activate first, then build/observe the graph',
+        'Calling it in production for app logic — the whole bridge is dev-gated and tree-shaken; `getReactiveGraph()` returns an empty graph in prod builds',
+        'Assuming it tracks compiler-emitted DOM bindings — only user `signal()` / `computed()` / `effect()` are registered; `renderEffect` / `_bind` plumbing is intentionally excluded (it would flood the graph and tax the hottest path)',
+      ],
+      seeAlso: ['getReactiveGraph', 'onSignalUpdate', 'getReactiveTrace'],
+    },
+    {
+      name: 'getReactiveGraph',
+      kind: 'function',
+      signature:
+        'getReactiveGraph(): { nodes: ReactiveNode[]; edges: { from: number; to: number }[] }  ·  getReactiveFires(): { id: number; ts: number }[]',
+      summary:
+        'Fresh snapshot of the live reactive graph + a bounded recent-fire timeline, for the reactive-devtools tabs. `getReactiveGraph()` returns every tracked node (`{ id, kind: "signal"|"derived"|"effect", name, value, subscribers, fires, lastFire }`) plus dependency edges recomputed on demand from the real subscriber `_s` Sets (source → subscriber: signal→derived, derived→effect) — always consistent with the framework’s actual subscription state, no incremental drift. `getReactiveFires()` returns a fixed-size ring buffer of recent fires (`{ id, ts }`, oldest → newest) powering the Effects/Profiler tabs. Both require `activateReactiveDevtools()` first and return empty otherwise. Names come from `signal(v, { name })` / the vite-plugin dev auto-naming; anonymous computeds/effects get a synthetic `derived#id` / `effect#id`.',
+      example: `activateReactiveDevtools()
+const a = signal(1, { name: '$a' })
+const b = computed(() => a() + 1)
+effect(() => b())
+a.set(2)
+getReactiveGraph()
+// nodes: [{ name:'$a', kind:'signal', value:'2', … }, { kind:'derived', … }, { kind:'effect', … }]
+// edges: [{ from:$a, to:derived }, { from:derived, to:effect }]
+getReactiveFires() // → [{ id, ts }, …]  (bounded, chronological)`,
+      mistakes: [
+        'Holding the returned arrays expecting them to update — they are point-in-time snapshots; call again (the devtools panel polls)',
+        'Reading `node.value` for non-string state as the real value — it is a bounded, safely-stringified PREVIEW (never a raw ref — no pinning). Inspect the signal directly for the live value',
+        'Expecting fires for every write in a long-running app — `getReactiveFires()` is a fixed-size ring; older entries roll off',
+      ],
+      seeAlso: ['activateReactiveDevtools', 'getReactiveTrace', 'onSignalUpdate'],
+    },
   ],
   gotchas: [
     {

package/src/reactive-devtools.ts

@@ -0,0 +1,281 @@
+/**
+ * Reactive devtools bridge — an OPT-IN, leak-free introspection layer
+ * over the live signal / computed / effect graph.
+ *
+ * Powers the `@pyreon/devtools` Signals / Graph / Effects / Console
+ * surfaces. Design constraints (mirroring `reactive-trace.ts`):
+ *
+ *   - **Zero cost until attached.** Every instrumentation entry point
+ *     early-returns on `!_active`. The registry is empty and no work
+ *     happens until a devtools client calls `activateReactiveDevtools()`.
+ *     The single call site per creation/track sits inside the existing
+ *     `process.env.NODE_ENV !== 'production'` gate (tree-shaken in prod)
+ *     and is structurally identical to the perf-harness counter calls
+ *     and `_recordSignalWrite` already on those paths.
+ *   - **No retention / no leak.** Nodes are held via `WeakRef` and
+ *     pruned by a `FinalizationRegistry`. The registry never pins a
+ *     signal/computed/effect alive. Edges + the fire ring buffer hold
+ *     only numeric ids and primitives, never node references or values.
+ *   - **Snapshot on demand.** `getReactiveGraph()` recomputes the edge
+ *     set fresh from the live subscriber Sets — no incremental
+ *     bookkeeping to drift out of sync with `cleanupEffect`.
+ *
+ * Names: signals carry `.label` (set explicitly or by the vite plugin's
+ * dev auto-naming). Computeds/effects have no name in the framework, so
+ * they get a stable synthetic label (`derived#12` / `effect#7`).
+ */
+
+export type ReactiveNodeKind = 'signal' | 'derived' | 'effect'
+
+export interface ReactiveNode {
+  id: number
+  kind: ReactiveNodeKind
+  /** Explicit `.label` for signals; synthetic (`derived#id`) otherwise. */
+  name: string
+  /** Bounded string preview of the current value (signals/derived only). */
+  value: string
+  /** Live downstream subscriber count. */
+  subscribers: number
+  /** Total times this node has fired/recomputed since activation. */
+  fires: number
+  /** `performance.now()` of the most recent fire, or null. */
+  lastFire: number | null
+}
+
+export interface ReactiveEdge {
+  /** Source node id (the reactive value being read). */
+  from: number
+  /** Subscriber node id (the computed/effect that read it). */
+  to: number
+}
+
+export interface ReactiveGraph {
+  nodes: ReactiveNode[]
+  edges: ReactiveEdge[]
+}
+
+export interface ReactiveFire {
+  id: number
+  /** `performance.now()` at fire time. */
+  ts: number
+}
+
+// ── Internal node record ─────────────────────────────────────────────────
+
+interface NodeRec {
+  id: number
+  kind: ReactiveNodeKind
+  name: string
+  /** Weak handle to the read fn (signal/computed) — never pins the node. */
+  ref: WeakRef<object>
+  /** Weak handle to the subscriber-set host (signal read fn / computed host). */
+  hostRef: WeakRef<{ _s: Set<() => void> | null }> | null
+  fires: number
+  lastFire: number | null
+}
+
+let _active = false
+let _nextId = 1
+// id → record. Records are pruned by the FinalizationRegistry the moment
+// the underlying node is GC'd, so this Map never retains a dead node.
+const _byId = new Map<number, NodeRec>()
+// Subscriber-callback identity → node id. Lets `getReactiveGraph()`
+// resolve `_s` Set membership (anonymous `recompute`/`run` closures)
+// back to graph nodes for edge extraction. A WeakMap so a disposed
+// effect's closure doesn't keep its id mapping alive.
+const _subId = new WeakMap<object, number>()
+
+/** @internal — finalizer callback; prunes the record when a node is GC'd. */
+export function _rdPrune(id: number): void {
+  _byId.delete(id)
+}
+
+// FinalizationRegistry is baseline since Node 14.6 / all modern browsers
+// / Bun — the same universal-availability assumption the codebase already
+// makes for WeakRef. No env guard (avoids an uncoverable dead branch).
+const _finalizer = new FinalizationRegistry<number>(_rdPrune)
+
+// Bounded fire ring buffer (Effects timeline). Same shape/rationale as
+// reactive-trace.ts — fixed cap, primitives only, never grows.
+const FIRE_CAP = 512
+let _fireBuf: ReactiveFire[] | null = null
+let _fireCount = 0
+
+const PREVIEW_MAX = 60
+
+function preview(v: unknown): string {
+  let s: string
+  try {
+    if (v === null) return 'null'
+    if (v === undefined) return 'undefined'
+    const t = typeof v
+    if (t === 'string') s = JSON.stringify(v) as string
+    else if (t === 'number' || t === 'boolean' || t === 'bigint') s = String(v)
+    else if (t === 'function')
+      s = `[Function ${(v as { name?: string }).name || 'anonymous'}]`
+    else if (t === 'symbol') s = (v as symbol).toString()
+    else if (Array.isArray(v)) s = `Array(${(v as unknown[]).length})`
+    else {
+      const ctor = (v as { constructor?: { name?: string } }).constructor?.name
+      let keys: string[] = []
+      try {
+        keys = Object.keys(v as object).slice(0, 3)
+      } catch {
+        keys = []
+      }
+      s = `${ctor && ctor !== 'Object' ? `${ctor} ` : ''}{${keys.join(', ')}${keys.length === 3 ? ', …' : ''}}`
+    }
+  } catch {
+    s = '[unstringifiable]'
+  }
+  return s.length > PREVIEW_MAX ? `${s.slice(0, PREVIEW_MAX)}…` : s
+}
+
+/** Activate the bridge. Idempotent. Called when a devtools client attaches. */
+export function activateReactiveDevtools(): void {
+  _active = true
+}
+
+/**
+ * Deactivate + drop all retained state. Called when the devtools client
+ * disconnects so a closed panel leaves zero residue.
+ */
+export function deactivateReactiveDevtools(): void {
+  _active = false
+  _byId.clear()
+  _fireBuf = null
+  _fireCount = 0
+}
+
+export function isReactiveDevtoolsActive(): boolean {
+  return _active
+}
+
+// ── Instrumentation entry points (called from the hot paths, but only
+//    after the existing prod gate; each is a no-op until activated) ──────
+
+/**
+ * Register a signal/computed/effect node. `host` is the object carrying
+ * the `_s` subscriber Set (the signal read fn itself, or a computed's
+ * internal host). `sub` is the notify closure (`recompute`/`run`) whose
+ * identity appears in upstream `_s` Sets — used to resolve edges.
+ *
+ * @internal
+ */
+export function _rdRegister(
+  node: object,
+  kind: ReactiveNodeKind,
+  host: { _s: Set<() => void> | null } | null,
+  sub: object | null,
+  label: string | undefined,
+): number | undefined {
+  if (!_active) return undefined
+  const id = _nextId++
+  _byId.set(id, {
+    id,
+    kind,
+    name: label ?? `${kind === 'signal' ? 'signal' : kind}#${id}`,
+    ref: new WeakRef(node),
+    hostRef: host ? new WeakRef(host) : null,
+    fires: 0,
+    lastFire: null,
+  })
+  if (sub) _subId.set(sub, id)
+  _finalizer.register(node, id)
+  // Stash the id on the node so fire events correlate in O(1). Every node
+  // we register is a framework-created function/closure (signal/computed
+  // `read`, effect `run`) — always extensible, so defineProperty cannot
+  // throw here; no defensive try/catch (it would be an uncoverable dead
+  // branch).
+  Object.defineProperty(node, '__pxRdId', {
+    value: id,
+    enumerable: false,
+    configurable: true,
+  })
+  return id
+}
+
+/**
+ * Record that a node fired (signal write / computed recompute / effect
+ * run). Bumps counters + appends to the bounded fire buffer.
+ *
+ * @internal
+ */
+export function _rdRecordFire(node: object): void {
+  if (!_active) return
+  const id = (node as { __pxRdId?: number }).__pxRdId
+  if (id === undefined) return
+  const rec = _byId.get(id)
+  const ts =
+    typeof performance !== 'undefined' && typeof performance.now === 'function'
+      ? performance.now()
+      : Date.now()
+  if (rec) {
+    rec.fires++
+    rec.lastFire = ts
+  }
+  if (_fireBuf === null) _fireBuf = new Array<ReactiveFire>(FIRE_CAP)
+  _fireBuf[_fireCount % FIRE_CAP] = { id, ts }
+  _fireCount++
+}
+
+// ── Snapshot API (consumed by the devtools hook) ─────────────────────────
+
+function resolveSubId(sub: () => void): number | undefined {
+  const direct = (sub as { __pxRdId?: number }).__pxRdId
+  if (direct !== undefined) return direct
+  return _subId.get(sub)
+}
+
+/**
+ * Fresh snapshot of the live reactive graph. Edges are recomputed from
+ * each live node's current subscriber Set — always consistent with the
+ * framework's real subscription state, no incremental drift.
+ */
+export function getReactiveGraph(): ReactiveGraph {
+  const nodes: ReactiveNode[] = []
+  const edges: ReactiveEdge[] = []
+  for (const rec of _byId.values()) {
+    const node = rec.ref.deref()
+    if (!node) continue
+    const host = rec.hostRef?.deref() ?? null
+    const subs = host?._s ?? null
+    // `preview()` is total (its own try/catch returns '[unstringifiable]'),
+    // and `_v` on our registered nodes is a plain property (signal) or a
+    // getter that never throws (computed's getter routes errors through
+    // `_errorHandler` and returns the stale value). No defensive wrapper
+    // here — it would be an uncoverable dead branch.
+    const valueStr =
+      rec.kind === 'effect' ? '' : preview((node as { _v?: unknown })._v)
+    nodes.push({
+      id: rec.id,
+      kind: rec.kind,
+      name: rec.name,
+      value: valueStr,
+      subscribers: subs?.size ?? 0,
+      fires: rec.fires,
+      lastFire: rec.lastFire,
+    })
+    if (subs) {
+      for (const cb of subs) {
+        const to = resolveSubId(cb)
+        if (to !== undefined) edges.push({ from: rec.id, to })
+      }
+    }
+  }
+  return { nodes, edges }
+}
+
+/** Bounded recent-fire timeline (oldest → newest). Fresh copy. */
+export function getReactiveFires(): ReactiveFire[] {
+  if (_fireBuf === null || _fireCount === 0) return []
+  if (_fireCount <= FIRE_CAP) return _fireBuf.slice(0, _fireCount)
+  const start = _fireCount % FIRE_CAP
+  const out: ReactiveFire[] = []
+  for (let i = 0; i < FIRE_CAP; i++) {
+    const e = _fireBuf[(start + i) % FIRE_CAP]
+    if (e) out.push(e)
+  }
+  return out
+}
+

package/src/signal.ts

@@ -1,5 +1,6 @@
 import { batch, enqueuePendingNotification, isBatching } from './batch'
 import { _notifyTraceListeners, isTracing } from './debug'
+import { _rdRecordFire, _rdRegister } from './reactive-devtools'
 import { _recordSignalWrite } from './reactive-trace'
 import { notifySubscribers, trackSubscriber } from './tracking'
 
@@ -95,8 +96,10 @@ function _set(this: SignalFn<unknown>, newValue: unknown) {
   // is opt-in (requires an onSignalUpdate listener) and captures a
   // stack (expensive); this is always-on in dev and intentionally
   // cheap (string preview, no stack).
-  if (process.env.NODE_ENV !== 'production')
+  if (process.env.NODE_ENV !== 'production') {
     _recordSignalWrite(this.label, prev, newValue)
+    _rdRecordFire(this)
+  }
   if (isTracing()) {
     // Trace listeners are user-supplied debug code that fires on every
     // signal write. A throwing listener here would leave `_v` updated but
@@ -231,5 +234,8 @@ export function signal<T>(initialValue: T, options?: SignalOptions): Signal<T> {
   read.debug = _debug as () => SignalDebugInfo<T>
   read.label = options?.name
 
+  if (process.env.NODE_ENV !== 'production')
+    _rdRegister(read, 'signal', read, null, read.label)
+
   return read as unknown as Signal<T>
 }

package/src/tests/manifest-snapshot.test.ts

@@ -74,8 +74,9 @@ describe('gen-docs — reactivity snapshot', () => {
     // isStore, effectScope, getCurrentScope, setCurrentScope,
     // onSignalUpdate, inspectSignal, why, setErrorHandler) + 3 from M4
     // Vue parity (markRaw, shallowReactive, onScopeDispose) + 1
-    // getReactiveTrace (reactive-trace error-report enrichment).
-    expect(Object.keys(record).length).toBe(26)
+    // getReactiveTrace (reactive-trace error-report enrichment) + 2
+    // reactive-devtools bridge (activateReactiveDevtools, getReactiveGraph).
+    expect(Object.keys(record).length).toBe(28)
     expect(Object.keys(record)).toContain('reactivity/signal')
     expect(Object.keys(record)).toContain('reactivity/createResource')
     // Spot-check the flagship API — signal is the core primitive

package/src/tests/reactive-devtools-treeshake.test.ts

@@ -0,0 +1,48 @@
+/**
+ * Tree-shake regression lock for the reactive-devtools instrumentation.
+ *
+ * `signal()` / `computed()` / `effect()` gained `_rdRegister` /
+ * `_rdRecordFire` calls on their hot paths, each inside the existing
+ * `process.env.NODE_ENV !== 'production'` gate. The framework's perf
+ * claims rest on those calls compiling to NOTHING in production builds
+ * (benchmarks run prod bundles). This test bundles each instrumented
+ * module through esbuild with the prod define + minify (what every
+ * modern bundler does for a release build) and asserts every trace of
+ * the devtools bridge is gone — then bundles it dev-mode and asserts
+ * the instrumentation IS present, so the test can't pass for the wrong
+ * reason (the PR #200 bisect lesson).
+ */
+import { build } from 'esbuild'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const SRC = join(dirname(fileURLToPath(import.meta.url)), '..')
+const MARKERS = /RecordFire|RdRegister|pxRdId|reactive-devtools/
+
+async function bundle(entry: string, env: 'production' | 'development') {
+  const r = await build({
+    entryPoints: [join(SRC, entry)],
+    bundle: true,
+    minify: true,
+    write: false,
+    format: 'esm',
+    logLevel: 'silent',
+    define: { 'process.env.NODE_ENV': JSON.stringify(env) },
+  })
+  return r.outputFiles[0]!.text
+}
+
+describe('reactive-devtools — prod tree-shake', () => {
+  for (const entry of ['signal.ts', 'computed.ts', 'effect.ts']) {
+    it(`${entry}: instrumentation is fully eliminated in production`, async () => {
+      const prod = await bundle(entry, 'production')
+      expect(prod).not.toMatch(MARKERS)
+    })
+
+    it(`${entry}: instrumentation IS present in development (anti-false-pass)`, async () => {
+      const dev = await bundle(entry, 'development')
+      expect(dev).toMatch(MARKERS)
+    })
+  }
+})

package/src/tests/reactive-devtools.test.ts

@@ -0,0 +1,296 @@
+import { afterEach, describe, expect, it } from 'vitest'
+import { computed } from '../computed'
+import { effect } from '../effect'
+import {
+  _rdPrune,
+  activateReactiveDevtools,
+  deactivateReactiveDevtools,
+  getReactiveFires,
+  getReactiveGraph,
+  isReactiveDevtoolsActive,
+} from '../reactive-devtools'
+import { signal } from '../signal'
+
+afterEach(() => {
+  deactivateReactiveDevtools()
+})
+
+describe('reactive-devtools — opt-in contract', () => {
+  it('is inactive by default and tracks nothing until activated', () => {
+    expect(isReactiveDevtoolsActive()).toBe(false)
+    const s = signal(1)
+    s.set(2)
+    const c = computed(() => s() + 1)
+    c()
+    expect(getReactiveGraph().nodes).toEqual([])
+    expect(getReactiveFires()).toEqual([])
+  })
+
+  it('activate() then deactivate() is idempotent and clears state', () => {
+    activateReactiveDevtools()
+    expect(isReactiveDevtoolsActive()).toBe(true)
+    activateReactiveDevtools() // idempotent
+    expect(isReactiveDevtoolsActive()).toBe(true)
+    const s = signal(0, { name: 'x' })
+    s()
+    expect(getReactiveGraph().nodes.length).toBe(1)
+    deactivateReactiveDevtools()
+    expect(isReactiveDevtoolsActive()).toBe(false)
+    expect(getReactiveGraph().nodes).toEqual([])
+  })
+})
+
+describe('reactive-devtools — node registry', () => {
+  it('registers a named signal with kind + value preview', () => {
+    activateReactiveDevtools()
+    const count = signal(42, { name: 'count' })
+    void count()
+    const g = getReactiveGraph()
+    const node = g.nodes.find((n) => n.name === 'count')
+    expect(node).toBeDefined()
+    expect(node!.kind).toBe('signal')
+    expect(node!.value).toBe('42')
+  })
+
+  it('synthesizes a label for anonymous derived/effect nodes', () => {
+    activateReactiveDevtools()
+    const s = signal(1)
+    const d = computed(() => s() * 2)
+    void d()
+    effect(() => void s())
+    const g = getReactiveGraph()
+    expect(g.nodes.some((n) => n.kind === 'derived' && /^derived#\d+$/.test(n.name))).toBe(true)
+    expect(g.nodes.some((n) => n.kind === 'effect' && /^effect#\d+$/.test(n.name))).toBe(true)
+  })
+
+  it('previews non-primitive signal values without throwing', () => {
+    activateReactiveDevtools()
+    const obj = signal({ a: 1, b: 2 }, { name: 'o' })
+    void obj()
+    const arr = signal([1, 2, 3], { name: 'arr' })
+    void arr()
+    const g = getReactiveGraph()
+    expect(g.nodes.find((n) => n.name === 'o')!.value).toContain('{')
+    expect(g.nodes.find((n) => n.name === 'arr')!.value).toBe('Array(3)')
+  })
+})
+
+describe('reactive-devtools — edges from live subscriber sets', () => {
+  it('captures signal → derived → effect edges', () => {
+    activateReactiveDevtools()
+    const s = signal(1, { name: 's' })
+    const d = computed(() => s() + 1)
+    let seen = 0
+    effect(() => {
+      seen = d()
+    })
+    expect(seen).toBe(2)
+
+    const g = getReactiveGraph()
+    const sId = g.nodes.find((n) => n.name === 's')!.id
+    const dNode = g.nodes.find((n) => n.kind === 'derived')!
+    const eNode = g.nodes.find((n) => n.kind === 'effect')!
+
+    // s is read by d; d is read by the effect.
+    expect(g.edges).toContainEqual({ from: sId, to: dNode.id })
+    expect(g.edges).toContainEqual({ from: dNode.id, to: eNode.id })
+  })
+
+  it('reflects subscriber count + reacts to writes (fires + lastFire)', () => {
+    activateReactiveDevtools()
+    const s = signal(0, { name: 'live' })
+    effect(() => void s())
+    s.set(1)
+    s.set(2)
+    const node = getReactiveGraph().nodes.find((n) => n.name === 'live')!
+    expect(node.subscribers).toBe(1)
+    expect(node.fires).toBe(2)
+    expect(node.lastFire).not.toBeNull()
+  })
+})
+
+describe('reactive-devtools — value preview branches', () => {
+  it('previews every primitive + edge shape', () => {
+    activateReactiveDevtools()
+    const cases: [string, unknown, (v: string) => void][] = [
+      ['s_str', 'hello', (v) => expect(v).toBe('"hello"')],
+      ['s_num', 7, (v) => expect(v).toBe('7')],
+      ['s_bool', true, (v) => expect(v).toBe('true')],
+      ['s_big', 10n, (v) => expect(v).toBe('10')],
+      ['s_null', null, (v) => expect(v).toBe('null')],
+      ['s_undef', undefined, (v) => expect(v).toBe('undefined')],
+      ['s_sym', Symbol('z'), (v) => expect(v).toContain('Symbol')],
+      ['s_fn', function named() {}, (v) => expect(v).toContain('[Function named]')],
+      [
+        's_long',
+        'x'.repeat(200),
+        (v) => expect(v.endsWith('…') && v.length <= 61).toBe(true),
+      ],
+    ]
+    for (const [name, val] of cases) {
+      const s = signal(val, { name })
+      void s()
+    }
+    const g = getReactiveGraph()
+    for (const [name, , assertFn] of cases) {
+      assertFn(g.nodes.find((n) => n.name === name)!.value)
+    }
+  })
+
+  it('never throws on a value whose property access throws', () => {
+    activateReactiveDevtools()
+    const hostile = new Proxy(
+      {},
+      {
+        ownKeys() {
+          throw new Error('boom')
+        },
+        get() {
+          throw new Error('boom')
+        },
+      },
+    )
+    const s = signal(hostile, { name: 'hostile' })
+    void s()
+    const node = getReactiveGraph().nodes.find((n) => n.name === 'hostile')!
+    expect(typeof node.value).toBe('string')
+  })
+
+  it('handles a value whose ownKeys throws but ctor read succeeds', () => {
+    activateReactiveDevtools()
+    // `.constructor` resolves fine (default get), but Object.keys() trips
+    // the inner keys try/catch.
+    const keysHostile = new Proxy(
+      {},
+      {
+        ownKeys() {
+          throw new Error('no keys')
+        },
+      },
+    )
+    const s = signal(keysHostile, { name: 'kh' })
+    void s()
+    const node = getReactiveGraph().nodes.find((n) => n.name === 'kh')!
+    expect(node.value).toBe('{}')
+  })
+
+  it('effect nodes carry no value preview', () => {
+    activateReactiveDevtools()
+    const s = signal(1)
+    effect(() => void s())
+    const eff = getReactiveGraph().nodes.find((n) => n.kind === 'effect')!
+    expect(eff.value).toBe('')
+  })
+})
+
+describe('reactive-devtools — resilience', () => {
+  it('a stale __pxRdId (registry cleared, node re-fires) is buffered, not crashed', () => {
+    activateReactiveDevtools()
+    const s = signal(0, { name: 'stale' })
+    void s()
+    deactivateReactiveDevtools()
+    // Re-activate: _byId is empty but `s` still carries its old __pxRdId.
+    activateReactiveDevtools()
+    expect(() => s.set(1)).not.toThrow()
+    // Fire is still buffered even though no record exists for the id.
+    expect(getReactiveFires().length).toBe(1)
+    // …and it does not appear as a node (record was cleared).
+    expect(getReactiveGraph().nodes.find((n) => n.name === 'stale')).toBeUndefined()
+  })
+
+  it('getReactiveFires is empty before any fire', () => {
+    activateReactiveDevtools()
+    expect(getReactiveFires()).toEqual([])
+  })
+
+  it('_rdPrune removes a record (FinalizationRegistry callback path)', () => {
+    activateReactiveDevtools()
+    const s = signal(1, { name: 'pruneme' })
+    void s()
+    const before = getReactiveGraph().nodes.find((n) => n.name === 'pruneme')
+    expect(before).toBeDefined()
+    _rdPrune(before!.id)
+    expect(getReactiveGraph().nodes.find((n) => n.name === 'pruneme')).toBeUndefined()
+  })
+})
+
+describe('reactive-devtools — bounded fire timeline', () => {
+  it('records signal writes + computed recomputes in order', () => {
+    activateReactiveDevtools()
+    const s = signal(0, { name: 't' })
+    const d = computed(() => s() + 1)
+    effect(() => void d())
+    s.set(1)
+    s.set(2)
+    const fires = getReactiveFires()
+    expect(fires.length).toBeGreaterThanOrEqual(2)
+    // monotonic, non-decreasing timestamps
+    for (let i = 1; i < fires.length; i++) {
+      expect(fires[i]!.ts).toBeGreaterThanOrEqual(fires[i - 1]!.ts)
+    }
+  })
+
+  it('caps the ring buffer (no unbounded growth)', () => {
+    activateReactiveDevtools()
+    const s = signal(0, { name: 'spin' })
+    for (let i = 1; i <= 700; i++) s.set(i)
+    expect(getReactiveFires().length).toBeLessThanOrEqual(512)
+  })
+})
+
+describe('reactive-devtools — preview() edge branches (coverage lock)', () => {
+  // Lifts reactive-devtools.ts off the 8 uncovered `preview()` /
+  // performance-fallback branches that landed with #703 and dragged
+  // @pyreon/reactivity global branch coverage to 89.75% (< the 90%
+  // gate). With these: 90.7% (478/527) — the Coverage CI gate passes.
+  const valueOf = (name: string) =>
+    getReactiveGraph().nodes.find((n) => n.name === name)?.value
+
+  it('anonymous function → [Function anonymous] (|| fallback arm)', () => {
+    activateReactiveDevtools()
+    const s = signal<unknown>((() => () => {})(), { name: 'anonFn' })
+    void s()
+    expect(valueOf('anonFn')).toBe('[Function anonymous]')
+  })
+
+  it('plain object whose ctor IS Object → no ctor prefix (empty-arm)', () => {
+    activateReactiveDevtools()
+    const s = signal<unknown>({ a: 1 }, { name: 'plainObj' })
+    void s()
+    expect(valueOf('plainObj')).toBe('{a}')
+  })
+
+  it('object with more than 3 keys → truncates with ellipsis', () => {
+    activateReactiveDevtools()
+    const s = signal<unknown>({ a: 1, b: 2, c: 3, d: 4 }, { name: 'bigObj' })
+    void s()
+    expect(valueOf('bigObj')).toBe('{a, b, c, …}')
+  })
+
+  it('classed object → keeps the ctor prefix (truthy arm)', () => {
+    class Box {
+      x = 1
+    }
+    activateReactiveDevtools()
+    const s = signal<unknown>(new Box(), { name: 'boxObj' })
+    void s()
+    expect(valueOf('boxObj')).toBe('Box {x}')
+  })
+
+  it('records the Date.now fallback when performance is unavailable', () => {
+    const realPerf = globalThis.performance
+    try {
+      // Exercise the `typeof performance === 'undefined'` defensive arm.
+      delete (globalThis as { performance?: unknown }).performance
+      activateReactiveDevtools()
+      const s = signal(0, { name: 'noPerf' })
+      void s()
+      expect(() => s.set(1)).not.toThrow()
+      const fires = getReactiveFires()
+      expect(fires.length).toBeGreaterThanOrEqual(1)
+      expect(typeof fires[0]!.ts).toBe('number')
+    } finally {
+      ;(globalThis as { performance?: unknown }).performance = realPerf
+    }
+  })
+})