dalila 1.8.4 → 1.9.0

package/README.md

@@ -94,6 +94,12 @@ bind(document.getElementById('app')!, ctx);
 - [Scheduler](./docs/core/scheduler.md) — Batching and coordination
 - [Keys](./docs/core/key.md) — Cache key encoding
 - [Dev Mode](./docs/core/dev.md) — Warnings and helpers
+- [Devtools Extension](./devtools-extension/README.md) — Browser panel for reactive graph and scopes
+
+Firefox extension workflows:
+
+- `npm run devtools:firefox:run` — launch Firefox with extension loaded for dev
+- `npm run devtools:firefox:build` — package extension artifact for submission/signing
 
 ## Features
 

package/dist/core/dev.d.ts

@@ -1,7 +1,16 @@
+import { DevtoolsEvent, DevtoolsRuntimeOptions, DevtoolsSnapshot } from "./devtools.js";
 export declare function setDevMode(enabled: boolean): void;
 export declare function isInDevMode(): boolean;
+export interface InitDevToolsOptions extends DevtoolsRuntimeOptions {
+}
+export declare function setDevtoolsEnabled(enabled: boolean, options?: DevtoolsRuntimeOptions): void;
+export declare function isDevtoolsEnabled(): boolean;
+export declare function configureDevtools(options: DevtoolsRuntimeOptions): void;
+export declare function getDevtoolsSnapshot(): DevtoolsSnapshot;
+export declare function onDevtoolsEvent(listener: (event: DevtoolsEvent) => void): () => void;
+export declare function resetDevtools(): void;
 /**
- * Initialize dev tools. Currently just enables dev mode.
+ * Initialize dev tools runtime bridge for graph inspection.
  * Returns a promise for future async initialization support.
  */
-export declare function initDevTools(): Promise<void>;
+export declare function initDevTools(options?: InitDevToolsOptions): Promise<void>;

package/dist/core/dev.js

@@ -1,3 +1,4 @@
+import { configure, getSnapshot, isEnabled, reset, setEnabled, subscribe, } from "./devtools.js";
 let isDevMode = true;
 export function setDevMode(enabled) {
     isDevMode = enabled;
@@ -5,10 +6,33 @@ export function setDevMode(enabled) {
 export function isInDevMode() {
     return isDevMode;
 }
+export function setDevtoolsEnabled(enabled, options) {
+    setEnabled(enabled, options);
+}
+export function isDevtoolsEnabled() {
+    return isEnabled();
+}
+export function configureDevtools(options) {
+    configure(options);
+}
+export function getDevtoolsSnapshot() {
+    return getSnapshot();
+}
+export function onDevtoolsEvent(listener) {
+    return subscribe(listener);
+}
+export function resetDevtools() {
+    reset();
+}
 /**
- * Initialize dev tools. Currently just enables dev mode.
+ * Initialize dev tools runtime bridge for graph inspection.
  * Returns a promise for future async initialization support.
  */
-export async function initDevTools() {
+export async function initDevTools(options = {}) {
     setDevMode(true);
+    setEnabled(true, {
+        exposeGlobalHook: options.exposeGlobalHook ?? true,
+        dispatchEvents: options.dispatchEvents ?? true,
+        maxEvents: options.maxEvents,
+    });
 }

package/dist/core/devtools.d.ts

@@ -0,0 +1,65 @@
+export type DevtoolsNodeType = "scope" | "signal" | "computed" | "effect" | "effectAsync";
+export type DevtoolsEdgeKind = "dependency" | "ownership";
+export interface DevtoolsNode {
+    id: number;
+    type: DevtoolsNodeType;
+    label: string;
+    disposed: boolean;
+    scopeId: number | null;
+    parentScopeId: number | null;
+    reads: number;
+    writes: number;
+    runs: number;
+    lastValue: string;
+    lastRunAt: number;
+    createdAt: number;
+}
+export interface DevtoolsEdge {
+    from: number;
+    to: number;
+    kind: DevtoolsEdgeKind;
+}
+export interface DevtoolsEvent {
+    type: string;
+    at: number;
+    payload: Record<string, unknown>;
+}
+export interface DevtoolsSnapshot {
+    enabled: boolean;
+    nodes: DevtoolsNode[];
+    edges: DevtoolsEdge[];
+    events: DevtoolsEvent[];
+}
+export interface DevtoolsRuntimeOptions {
+    maxEvents?: number;
+    exposeGlobalHook?: boolean;
+    dispatchEvents?: boolean;
+}
+export interface DevtoolsHighlightOptions {
+    durationMs?: number;
+}
+export declare function configure(options?: DevtoolsRuntimeOptions): void;
+export declare function setEnabled(next: boolean, options?: DevtoolsRuntimeOptions): void;
+export declare function isEnabled(): boolean;
+export declare function reset(): void;
+export declare function subscribe(listener: (event: DevtoolsEvent) => void): () => void;
+export declare function getSnapshot(): DevtoolsSnapshot;
+export declare function registerScope(scopeRef: object, parentScopeRef: object | null): void;
+export declare function withDevtoolsDomTarget<T>(element: Element | null, fn: () => T): T;
+export declare function linkScopeToDom(scopeRef: object, element: Element, label?: string): void;
+export declare function disposeScope(scopeRef: object): void;
+export declare function registerSignal(signalRef: object, type: "signal" | "computed", options?: {
+    scopeRef?: object | null;
+    initialValue?: unknown;
+}): void;
+export declare function registerEffect(effectRef: object, type: "effect" | "effectAsync", scopeRef: object | null): void;
+export declare function aliasEffectToNode(effectRef: object, targetRef: object): void;
+export declare function linkSubscriberSetToSignal(subscriberSetRef: object, signalRef: object): void;
+export declare function trackSignalRead(signalRef: object): void;
+export declare function trackSignalWrite(signalRef: object, nextValue: unknown): void;
+export declare function trackEffectRun(effectRef: object): void;
+export declare function trackEffectDispose(effectRef: object): void;
+export declare function trackDependency(signalRef: object, effectRef: object): void;
+export declare function untrackDependencyBySet(subscriberSetRef: object, effectRef: object): void;
+export declare function clearHighlights(): void;
+export declare function highlightNode(nodeId: number, options?: DevtoolsHighlightOptions): boolean;

package/dist/core/devtools.js

@@ -0,0 +1,452 @@
+const DEFAULT_MAX_EVENTS = 500;
+const GLOBAL_HOOK_KEY = "__DALILA_DEVTOOLS__";
+const GLOBAL_EVENT_NAME = "dalila:devtools:event";
+let enabled = false;
+let maxEvents = DEFAULT_MAX_EVENTS;
+let exposeGlobalHook = false;
+let dispatchEvents = false;
+let nextId = 1;
+let refToId = new WeakMap();
+const nodes = new Map();
+const dependencyEdges = new Map();
+const ownershipEdges = new Map();
+let subscriberSetToSignalId = new WeakMap();
+let effectAliasToNodeId = new WeakMap();
+const listeners = new Set();
+let events = [];
+const nodeDomTargets = new Map();
+const highlightTimers = new WeakMap();
+let currentDomTarget = null;
+const HIGHLIGHT_ATTR = "data-dalila-devtools-highlight";
+const HIGHLIGHT_LABEL_ATTR = "data-dalila-devtools-label";
+const HIGHLIGHT_STYLE_ID = "dalila-devtools-highlight-style";
+function canUseGlobalDispatch() {
+    return typeof globalThis.dispatchEvent === "function";
+}
+function canUseDOM() {
+    return typeof document !== "undefined" && typeof Element !== "undefined";
+}
+function clearHighlightOnElement(element) {
+    const timer = highlightTimers.get(element);
+    if (timer !== undefined && typeof globalThis.clearTimeout === "function") {
+        globalThis.clearTimeout(timer);
+        highlightTimers.delete(element);
+    }
+    element.removeAttribute(HIGHLIGHT_ATTR);
+    element.removeAttribute(HIGHLIGHT_LABEL_ATTR);
+}
+function ensureHighlightStyle() {
+    if (!canUseDOM())
+        return;
+    if (document.getElementById(HIGHLIGHT_STYLE_ID))
+        return;
+    const style = document.createElement("style");
+    style.id = HIGHLIGHT_STYLE_ID;
+    style.textContent = `
+[${HIGHLIGHT_ATTR}="1"] {
+  outline: 2px solid #0f6d67 !important;
+  outline-offset: 2px !important;
+  box-shadow: 0 0 0 3px rgba(15, 109, 103, 0.22) !important;
+  transition: outline-color 120ms ease, box-shadow 120ms ease;
+}`;
+    (document.head || document.documentElement).append(style);
+}
+function resolveNodeDomTargets(nodeId) {
+    const direct = nodeDomTargets.get(nodeId);
+    if (direct && direct.size > 0)
+        return Array.from(direct);
+    const node = nodes.get(nodeId);
+    if (!node)
+        return [];
+    if (node.type !== "scope" && node.scopeId !== null) {
+        const scopeTargets = nodeDomTargets.get(node.scopeId);
+        if (scopeTargets && scopeTargets.size > 0)
+            return Array.from(scopeTargets);
+    }
+    return [];
+}
+function addDomTarget(nodeId, element) {
+    let targets = nodeDomTargets.get(nodeId);
+    if (!targets) {
+        targets = new Set();
+        nodeDomTargets.set(nodeId, targets);
+    }
+    targets.add(element);
+}
+function previewValue(value) {
+    const type = typeof value;
+    if (type === "string") {
+        const quoted = JSON.stringify(value);
+        return quoted.length > 120 ? `${quoted.slice(0, 117)}...` : quoted;
+    }
+    if (value === null ||
+        type === "number" ||
+        type === "boolean" ||
+        type === "undefined" ||
+        type === "bigint" ||
+        type === "symbol") {
+        return String(value);
+    }
+    if (type === "function") {
+        const fn = value;
+        return `[Function ${fn.name || "anonymous"}]`;
+    }
+    try {
+        const json = JSON.stringify(value);
+        if (json === undefined)
+            return Object.prototype.toString.call(value);
+        return json.length > 120 ? `${json.slice(0, 117)}...` : json;
+    }
+    catch {
+        return Object.prototype.toString.call(value);
+    }
+}
+function getNodeId(ref) {
+    const alias = effectAliasToNodeId.get(ref);
+    if (alias)
+        return alias;
+    const existing = refToId.get(ref);
+    if (existing)
+        return existing;
+    const id = nextId++;
+    refToId.set(ref, id);
+    return id;
+}
+function edgeKey(from, to, kind) {
+    return `${kind}:${from}->${to}`;
+}
+function emit(type, payload) {
+    if (!enabled)
+        return;
+    const event = {
+        type,
+        at: Date.now(),
+        payload,
+    };
+    events.push(event);
+    if (events.length > maxEvents) {
+        events = events.slice(events.length - maxEvents);
+    }
+    for (const listener of listeners) {
+        try {
+            listener(event);
+        }
+        catch (error) {
+            console.error("[Dalila] Devtools listener threw:", error);
+        }
+    }
+    if (dispatchEvents && canUseGlobalDispatch() && typeof CustomEvent !== "undefined") {
+        try {
+            globalThis.dispatchEvent(new CustomEvent(GLOBAL_EVENT_NAME, {
+                detail: event,
+            }));
+        }
+        catch {
+            // Ignore environments without full event support.
+        }
+    }
+}
+function createNode(ref, type, label, options) {
+    const id = getNodeId(ref);
+    if (nodes.has(id))
+        return id;
+    const scopeId = options?.scopeRef ? getNodeId(options.scopeRef) : null;
+    const parentScopeId = options?.parentScopeRef ? getNodeId(options.parentScopeRef) : null;
+    const registeredScopeId = scopeId !== null && nodes.has(scopeId) ? scopeId : null;
+    const registeredParentScopeId = parentScopeId !== null && nodes.has(parentScopeId) ? parentScopeId : null;
+    nodes.set(id, {
+        id,
+        type,
+        label,
+        disposed: false,
+        scopeId: registeredScopeId,
+        parentScopeId: registeredParentScopeId,
+        reads: 0,
+        writes: 0,
+        runs: 0,
+        lastValue: options && "initialValue" in options ? previewValue(options.initialValue) : "",
+        lastRunAt: 0,
+        createdAt: Date.now(),
+    });
+    if (registeredScopeId !== null) {
+        addOwnershipEdge(registeredScopeId, id);
+    }
+    if (type === "scope" && registeredParentScopeId !== null) {
+        addOwnershipEdge(registeredParentScopeId, id);
+    }
+    emit("node.create", { id, type, label, scopeId: registeredScopeId, parentScopeId: registeredParentScopeId });
+    return id;
+}
+function addOwnershipEdge(from, to) {
+    if (!nodes.has(from) || !nodes.has(to))
+        return;
+    const key = edgeKey(from, to, "ownership");
+    if (ownershipEdges.has(key))
+        return;
+    const edge = { from, to, kind: "ownership" };
+    ownershipEdges.set(key, edge);
+    emit("edge.add", { from: edge.from, to: edge.to, kind: edge.kind });
+}
+function upsertDependencyEdge(from, to) {
+    const key = edgeKey(from, to, "dependency");
+    if (dependencyEdges.has(key))
+        return;
+    const edge = { from, to, kind: "dependency" };
+    dependencyEdges.set(key, edge);
+    emit("edge.add", { from: edge.from, to: edge.to, kind: edge.kind });
+}
+function removeDependencyEdge(from, to) {
+    const key = edgeKey(from, to, "dependency");
+    const existing = dependencyEdges.get(key);
+    if (!existing)
+        return;
+    dependencyEdges.delete(key);
+    emit("edge.remove", { from: existing.from, to: existing.to, kind: existing.kind });
+}
+function markDisposed(ref) {
+    if (!enabled)
+        return;
+    const node = nodes.get(getNodeId(ref));
+    if (!node || node.disposed)
+        return;
+    node.disposed = true;
+    emit("node.dispose", { id: node.id, type: node.type });
+}
+function markRead(ref) {
+    if (!enabled)
+        return;
+    const node = nodes.get(getNodeId(ref));
+    if (!node)
+        return;
+    node.reads += 1;
+}
+function markWrite(ref, nextValue) {
+    if (!enabled)
+        return;
+    const node = nodes.get(getNodeId(ref));
+    if (!node)
+        return;
+    node.writes += 1;
+    node.lastValue = previewValue(nextValue);
+    emit("signal.write", { id: node.id, type: node.type, nextValue: node.lastValue });
+}
+function markRun(ref) {
+    if (!enabled)
+        return;
+    const node = nodes.get(getNodeId(ref));
+    if (!node)
+        return;
+    node.runs += 1;
+    node.lastRunAt = Date.now();
+}
+function installGlobalHook() {
+    if (!exposeGlobalHook)
+        return;
+    const host = globalThis;
+    if (host[GLOBAL_HOOK_KEY])
+        return;
+    host[GLOBAL_HOOK_KEY] = {
+        version: 1,
+        getSnapshot,
+        subscribe,
+        reset,
+        setEnabled,
+        configure,
+        highlightNode,
+        clearHighlights,
+    };
+}
+export function configure(options = {}) {
+    if (typeof options.maxEvents === "number" && Number.isFinite(options.maxEvents) && options.maxEvents > 0) {
+        maxEvents = Math.floor(options.maxEvents);
+        if (events.length > maxEvents) {
+            events = events.slice(events.length - maxEvents);
+        }
+    }
+    if (typeof options.exposeGlobalHook === "boolean") {
+        exposeGlobalHook = options.exposeGlobalHook;
+    }
+    if (typeof options.dispatchEvents === "boolean") {
+        dispatchEvents = options.dispatchEvents;
+    }
+    if (enabled)
+        installGlobalHook();
+}
+export function setEnabled(next, options) {
+    if (options)
+        configure(options);
+    if (next) {
+        enabled = true;
+        installGlobalHook();
+        emit("devtools.enabled", { enabled: true });
+    }
+    else {
+        if (enabled) {
+            emit("devtools.enabled", { enabled: false });
+        }
+        enabled = false;
+    }
+}
+export function isEnabled() {
+    return enabled;
+}
+export function reset() {
+    // Identity maps must be reset together with graph state. Otherwise existing
+    // refs keep stale ids and can generate edges pointing to missing nodes.
+    nextId = 1;
+    refToId = new WeakMap();
+    subscriberSetToSignalId = new WeakMap();
+    effectAliasToNodeId = new WeakMap();
+    dependencyEdges.clear();
+    ownershipEdges.clear();
+    nodes.clear();
+    nodeDomTargets.clear();
+    currentDomTarget = null;
+    events = [];
+    if (enabled) {
+        emit("devtools.reset", {});
+    }
+}
+export function subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}
+export function getSnapshot() {
+    return {
+        enabled,
+        nodes: Array.from(nodes.values()).map((node) => ({ ...node })),
+        edges: [...Array.from(ownershipEdges.values()), ...Array.from(dependencyEdges.values())],
+        events: events.map((event) => ({ ...event, payload: { ...event.payload } })),
+    };
+}
+export function registerScope(scopeRef, parentScopeRef) {
+    if (!enabled)
+        return;
+    createNode(scopeRef, "scope", "scope", {
+        parentScopeRef,
+    });
+}
+export function withDevtoolsDomTarget(element, fn) {
+    if (!element || !canUseDOM())
+        return fn();
+    if (!(element instanceof Element))
+        return fn();
+    const prev = currentDomTarget;
+    currentDomTarget = element;
+    try {
+        return fn();
+    }
+    finally {
+        currentDomTarget = prev;
+    }
+}
+export function linkScopeToDom(scopeRef, element, label) {
+    if (!enabled || !canUseDOM())
+        return;
+    if (!(element instanceof Element))
+        return;
+    const scopeId = getNodeId(scopeRef);
+    const node = nodes.get(scopeId);
+    if (!node)
+        return;
+    addDomTarget(scopeId, element);
+    if (label && node.label === "scope") {
+        node.label = label;
+    }
+}
+export function disposeScope(scopeRef) {
+    markDisposed(scopeRef);
+}
+export function registerSignal(signalRef, type, options) {
+    if (!enabled)
+        return;
+    createNode(signalRef, type, type, {
+        scopeRef: options?.scopeRef ?? null,
+        initialValue: options?.initialValue,
+    });
+}
+export function registerEffect(effectRef, type, scopeRef) {
+    if (!enabled)
+        return;
+    const id = createNode(effectRef, type, type, {
+        scopeRef,
+    });
+    if (currentDomTarget) {
+        addDomTarget(id, currentDomTarget);
+    }
+}
+export function aliasEffectToNode(effectRef, targetRef) {
+    if (!enabled)
+        return;
+    const targetId = getNodeId(targetRef);
+    effectAliasToNodeId.set(effectRef, targetId);
+}
+export function linkSubscriberSetToSignal(subscriberSetRef, signalRef) {
+    if (!enabled)
+        return;
+    subscriberSetToSignalId.set(subscriberSetRef, getNodeId(signalRef));
+}
+export function trackSignalRead(signalRef) {
+    markRead(signalRef);
+}
+export function trackSignalWrite(signalRef, nextValue) {
+    markWrite(signalRef, nextValue);
+}
+export function trackEffectRun(effectRef) {
+    markRun(effectRef);
+}
+export function trackEffectDispose(effectRef) {
+    markDisposed(effectRef);
+}
+export function trackDependency(signalRef, effectRef) {
+    if (!enabled)
+        return;
+    const from = getNodeId(signalRef);
+    const to = getNodeId(effectRef);
+    if (!nodes.has(from) || !nodes.has(to))
+        return;
+    upsertDependencyEdge(from, to);
+}
+export function untrackDependencyBySet(subscriberSetRef, effectRef) {
+    if (!enabled)
+        return;
+    const from = subscriberSetToSignalId.get(subscriberSetRef);
+    if (!from)
+        return;
+    const to = getNodeId(effectRef);
+    removeDependencyEdge(from, to);
+}
+export function clearHighlights() {
+    if (!canUseDOM())
+        return;
+    for (const targets of nodeDomTargets.values()) {
+        for (const element of targets) {
+            clearHighlightOnElement(element);
+        }
+    }
+}
+export function highlightNode(nodeId, options = {}) {
+    if (!enabled || !canUseDOM())
+        return false;
+    const targets = resolveNodeDomTargets(nodeId);
+    if (targets.length === 0)
+        return false;
+    ensureHighlightStyle();
+    const node = nodes.get(nodeId);
+    const label = node ? `#${node.id} ${node.label || node.type}` : `#${nodeId}`;
+    const durationMs = typeof options.durationMs === "number" && Number.isFinite(options.durationMs) && options.durationMs > 0
+        ? Math.floor(options.durationMs)
+        : 650;
+    for (const element of targets) {
+        clearHighlightOnElement(element);
+        element.setAttribute(HIGHLIGHT_ATTR, "1");
+        element.setAttribute(HIGHLIGHT_LABEL_ATTR, label);
+        if (typeof globalThis.setTimeout === "function") {
+            const timer = globalThis.setTimeout(() => {
+                clearHighlightOnElement(element);
+            }, durationMs);
+            highlightTimers.set(element, timer);
+        }
+    }
+    return true;
+}

package/dist/core/scope.js

@@ -1,3 +1,4 @@
+import { disposeScope, registerScope } from "./devtools.js";
 /** Tracks disposed scopes without mutating the public interface. */
 const disposedScopes = new WeakSet();
 const scopeCreateListeners = new Set();
@@ -73,6 +74,7 @@ export function createScope(parentOverride) {
             if (errors.length > 0) {
                 console.error('[Dalila] scope.dispose() had cleanup errors:', errors);
             }
+            disposeScope(scope);
             for (const listener of scopeDisposeListeners) {
                 try {
                     listener(scope);
@@ -84,6 +86,7 @@ export function createScope(parentOverride) {
         },
         parent,
     };
+    registerScope(scope, parent);
     if (parent) {
         parent.onCleanup(() => scope.dispose());
     }

package/dist/core/signal.js

@@ -1,5 +1,6 @@
 import { getCurrentScope, withScope } from './scope.js';
 import { scheduleMicrotask, isBatching, queueInBatch } from './scheduler.js';
+import { aliasEffectToNode, linkSubscriberSetToSignal, registerEffect, registerSignal, trackDependency, trackEffectDispose, trackEffectRun, trackSignalRead, trackSignalWrite, untrackDependencyBySet, } from './devtools.js';
 /**
  * Optional global error handler for reactive execution.
  *
@@ -114,9 +115,12 @@ function scheduleEffect(eff) {
  * - signals do not "own" subscriber lifetimes; they only maintain the set
  */
 export function signal(initialValue) {
+    const owningScope = getCurrentScope();
     let value = initialValue;
     const subscribers = new Set();
+    let signalRef;
     const read = () => {
+        trackSignalRead(signalRef);
         if (activeEffect && !activeEffect.disposed) {
             // Scope-aware subscription guard (best effort):
             // - if the active effect is not scoped, allow subscription
@@ -125,6 +129,7 @@ export function signal(initialValue) {
                 if (!subscribers.has(activeEffect)) {
                     subscribers.add(activeEffect);
                     (activeEffect.deps ?? (activeEffect.deps = new Set())).add(subscribers);
+                    trackDependency(signalRef, activeEffect);
                 }
             }
             else {
@@ -133,6 +138,7 @@ export function signal(initialValue) {
                     if (!subscribers.has(activeEffect)) {
                         subscribers.add(activeEffect);
                         (activeEffect.deps ?? (activeEffect.deps = new Set())).add(subscribers);
+                        trackDependency(signalRef, activeEffect);
                     }
                 }
             }
@@ -149,6 +155,7 @@ export function signal(initialValue) {
             return;
         // State updates are immediate even inside `batch()`.
         value = nextValue;
+        trackSignalWrite(signalRef, nextValue);
         // Notify now, or defer into the batch queue.
         if (isBatching())
             queueInBatch(notify);
@@ -178,6 +185,12 @@ export function signal(initialValue) {
             subscriber.deps?.delete(subscribers);
         };
     };
+    signalRef = read;
+    registerSignal(signalRef, 'signal', {
+        scopeRef: owningScope,
+        initialValue,
+    });
+    linkSubscriberSetToSignal(subscribers, signalRef);
     return read;
 }
 /**
@@ -199,8 +212,10 @@ export function effect(fn) {
     const cleanupDeps = () => {
         if (!run.deps)
             return;
-        for (const depSet of run.deps)
+        for (const depSet of run.deps) {
             depSet.delete(run);
+            untrackDependencyBySet(depSet, run);
+        }
         run.deps.clear();
     };
     const dispose = () => {
@@ -209,10 +224,12 @@ export function effect(fn) {
         run.disposed = true;
         cleanupDeps();
         pendingEffects.delete(run);
+        trackEffectDispose(run);
     };
     const run = (() => {
         if (run.disposed)
             return;
+        trackEffectRun(run);
         // Dynamic deps: unsubscribe from previous reads.
         cleanupDeps();
         const prevEffect = activeEffect;
@@ -231,6 +248,7 @@ export function effect(fn) {
             activeScope = prevScope;
         }
     });
+    registerEffect(run, 'effect', owningScope);
     scheduleEffect(run);
     if (owningScope)
         owningScope.onCleanup(dispose);
@@ -252,9 +270,11 @@ export function effect(fn) {
  * - other effects can subscribe to the computed like a normal signal
  */
 export function computed(fn) {
+    const owningScope = getCurrentScope();
     let value;
     let dirty = true;
     const subscribers = new Set();
+    let signalRef;
     // Dep sets that `markDirty` is currently registered in (so we can unsubscribe on recompute).
     let trackedDeps = new Set();
     /**
@@ -271,19 +291,23 @@ export function computed(fn) {
     markDirty.disposed = false;
     markDirty.sync = true;
     const cleanupDeps = () => {
-        for (const depSet of trackedDeps)
+        for (const depSet of trackedDeps) {
             depSet.delete(markDirty);
+            untrackDependencyBySet(depSet, markDirty);
+        }
         trackedDeps.clear();
         if (markDirty.deps)
             markDirty.deps.clear();
     };
     const read = () => {
+        trackSignalRead(signalRef);
         // Allow effects to subscribe to this computed (same rules as signal()).
         if (activeEffect && !activeEffect.disposed) {
             if (!activeScope) {
                 if (!subscribers.has(activeEffect)) {
                     subscribers.add(activeEffect);
                     (activeEffect.deps ?? (activeEffect.deps = new Set())).add(subscribers);
+                    trackDependency(signalRef, activeEffect);
                 }
             }
             else {
@@ -292,6 +316,7 @@ export function computed(fn) {
                     if (!subscribers.has(activeEffect)) {
                         subscribers.add(activeEffect);
                         (activeEffect.deps ?? (activeEffect.deps = new Set())).add(subscribers);
+                        trackDependency(signalRef, activeEffect);
                     }
                 }
             }
@@ -365,6 +390,13 @@ export function computed(fn) {
             subscriber.deps?.delete(subscribers);
         };
     };
+    signalRef = read;
+    registerSignal(signalRef, 'computed', {
+        scopeRef: owningScope,
+    });
+    linkSubscriberSetToSignal(subscribers, signalRef);
+    aliasEffectToNode(markDirty, signalRef);
+    registerEffect(markDirty, 'effect', owningScope);
     return read;
 }
 /**
@@ -381,8 +413,10 @@ export function effectAsync(fn) {
     const cleanupDeps = () => {
         if (!run.deps)
             return;
-        for (const depSet of run.deps)
+        for (const depSet of run.deps) {
             depSet.delete(run);
+            untrackDependencyBySet(depSet, run);
+        }
         run.deps.clear();
     };
     const dispose = () => {
@@ -393,10 +427,12 @@ export function effectAsync(fn) {
         controller = null;
         cleanupDeps();
         pendingEffects.delete(run);
+        trackEffectDispose(run);
     };
     const run = (() => {
         if (run.disposed)
             return;
+        trackEffectRun(run);
         // Abort previous run (if any), then create a new controller for this run.
         controller?.abort();
         controller = new AbortController();
@@ -417,6 +453,7 @@ export function effectAsync(fn) {
             activeScope = prevScope;
         }
     });
+    registerEffect(run, 'effectAsync', owningScope);
     scheduleEffect(run);
     if (owningScope)
         owningScope.onCleanup(dispose);

package/dist/runtime/bind.js

@@ -8,6 +8,7 @@
  */
 import { effect, createScope, withScope, isInDevMode, signal } from '../core/index.js';
 import { WRAPPED_HANDLER } from '../form/form.js';
+import { linkScopeToDom, withDevtoolsDomTarget } from '../core/devtools.js';
 // ============================================================================
 // Utilities
 // ============================================================================
@@ -81,6 +82,26 @@ function warn(message) {
         console.warn(`[Dalila] ${message}`);
     }
 }
+function describeBindRoot(root) {
+    const explicit = root.getAttribute('data-component') ||
+        root.getAttribute('data-devtools-label') ||
+        root.getAttribute('aria-label') ||
+        root.getAttribute('id');
+    if (explicit)
+        return String(explicit);
+    const className = root.getAttribute('class');
+    if (className) {
+        const first = className.split(/\s+/).find(Boolean);
+        if (first)
+            return `${root.tagName.toLowerCase()}.${first}`;
+    }
+    return root.tagName.toLowerCase();
+}
+function bindEffect(target, fn) {
+    withDevtoolsDomTarget(target ?? null, () => {
+        effect(fn);
+    });
+}
 const expressionCache = new Map();
 const templateInterpolationPlanCache = new Map();
 const TEMPLATE_PLAN_CACHE_MAX_ENTRIES = 250;
@@ -964,7 +985,7 @@ function bindTextNodeFromPlan(node, plan, ctx, benchSession) {
         applyResult(evalExpressionAst(parsed.ast, ctx));
         // Only schedule reactive updates when expression depends on reactive sources.
         if (expressionDependsOnReactiveSource(parsed.ast, ctx)) {
-            effect(() => {
+            bindEffect(node.parentElement, () => {
                 applyResult(evalExpressionAst(parsed.ast, ctx));
             });
         }
@@ -1055,7 +1076,7 @@ function bindWhen(root, ctx, cleanups) {
         const initialValue = !!resolve(binding);
         htmlEl.style.display = initialValue ? '' : 'none';
         // Then create reactive effect to keep it updated
-        effect(() => {
+        bindEffect(htmlEl, () => {
             const value = !!resolve(binding);
             htmlEl.style.display = value ? '' : 'none';
         });
@@ -1107,7 +1128,7 @@ function bindMatch(root, ctx, cleanups) {
         // Apply initial state
         applyMatch();
         // Then create reactive effect to keep it updated
-        effect(() => {
+        bindEffect(el, () => {
             applyMatch();
         });
     }
@@ -1321,7 +1342,7 @@ function bindEach(root, ctx, cleanups) {
         }
         if (isSignal(binding)) {
             // Effect owned by templateScope — no manual stop needed
-            effect(() => {
+            bindEffect(el, () => {
                 const value = binding();
                 renderList(Array.isArray(value) ? value : []);
             });
@@ -1373,7 +1394,7 @@ function bindIf(root, ctx, cleanups) {
             comment.parentNode?.insertBefore(htmlEl, comment);
         }
         // Then create reactive effect to keep it updated
-        effect(() => {
+        bindEffect(htmlEl, () => {
             const value = !!resolve(binding);
             if (value) {
                 if (!htmlEl.parentNode) {
@@ -1409,7 +1430,7 @@ function bindHtml(root, ctx, cleanups) {
         }
         const htmlEl = el;
         if (isSignal(binding)) {
-            effect(() => {
+            bindEffect(htmlEl, () => {
                 const v = binding();
                 const html = v == null ? '' : String(v);
                 if (isInDevMode() && /<script[\s>]|javascript:|onerror\s*=/i.test(html)) {
@@ -1482,7 +1503,7 @@ function bindAttrs(root, ctx, cleanups) {
             }
             el.removeAttribute(attr.name);
             if (isSignal(binding)) {
-                effect(() => {
+                bindEffect(el, () => {
                     applyAttr(el, attrName, binding());
                 });
             }
@@ -1589,7 +1610,7 @@ function bindField(root, ctx, cleanups) {
         }
         // Setup reactive aria-invalid based on error state
         if ('error' in form && typeof form.error === 'function') {
-            effect(() => {
+            bindEffect(htmlEl, () => {
                 // Read current path from DOM attribute inside effect
                 // This allows the effect to see updated paths after array reorder
                 const currentPath = htmlEl.getAttribute('data-field-path') || htmlEl.getAttribute('name') || fieldPath;
@@ -1644,7 +1665,7 @@ function bindError(root, ctx, cleanups) {
         htmlEl.setAttribute('role', 'alert');
         htmlEl.setAttribute('aria-live', 'polite');
         // Reactive error display
-        effect(() => {
+        bindEffect(htmlEl, () => {
             // Read current path from DOM attribute inside effect
             // This allows the effect to see updated paths after array reorder
             const currentPath = htmlEl.getAttribute('data-error-path') || fieldPath;
@@ -1689,7 +1710,7 @@ function bindFormError(root, ctx, cleanups) {
         htmlEl.setAttribute('role', 'alert');
         htmlEl.setAttribute('aria-live', 'polite');
         // Reactive form error display
-        effect(() => {
+        bindEffect(htmlEl, () => {
             const errorMsg = form.formError();
             if (errorMsg) {
                 htmlEl.textContent = errorMsg;
@@ -1978,7 +1999,7 @@ function bindArray(root, ctx, cleanups) {
             }
         }
         // Reactive rendering
-        effect(() => {
+        bindEffect(el, () => {
             renderList();
         });
         // Bind array operation buttons
@@ -2080,6 +2101,7 @@ export function bind(root, ctx, options = {}) {
     // Create a scope for this template binding
     const templateScope = createScope();
     const cleanups = [];
+    linkScopeToDom(templateScope, root, describeBindRoot(root));
     // Run all bindings within the template scope
     withScope(templateScope, () => {
         // 1. Form setup — must run very early to register form instances

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dalila",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "description": "DOM-first reactive framework based on signals",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -103,7 +103,9 @@
     "test": "npm run build && node --test",
     "test:e2e": "npm run build && playwright test",
     "test:watch": "jest --watch",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "devtools:firefox:run": "npx web-ext run --source-dir devtools-extension --devtools",
+    "devtools:firefox:build": "npx web-ext build --source-dir devtools-extension --artifacts-dir devtools-extension/dist --overwrite-dest"
   },
   "keywords": [
     "framework",