dalila 1.8.4 → 1.9.1

package/README.md

@@ -74,6 +74,7 @@ bind(document.getElementById('app')!, ctx);
 - [when](./docs/core/when.md) — Conditional visibility
 - [match](./docs/core/match.md) — Switch-style rendering
 - [for](./docs/core/for.md) — List rendering with keyed diffing
+- [Virtual Lists](./docs/core/virtual.md) — Fixed-height windowed rendering for large datasets
 
 ### Data
 
@@ -94,6 +95,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/components/ui/runtime.js

@@ -363,7 +363,8 @@ export function mountUI(root, options) {
         }
         // Attach drawers
         for (const [key, drawer] of Object.entries(options.drawers ?? {})) {
-            const el = findByUI(mountedRoot, key, "d-drawer");
+            const fallbackTag = drawer.side() === "bottom" ? "d-sheet" : "d-drawer";
+            const el = findByUI(mountedRoot, key, fallbackTag);
             if (el)
                 drawer._attachTo(el);
         }

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/for.d.ts

@@ -1,6 +1,26 @@
 interface DisposableFragment extends DocumentFragment {
     dispose(): void;
 }
+export interface VirtualRangeInput {
+    itemCount: number;
+    itemHeight: number;
+    scrollTop: number;
+    viewportHeight: number;
+    overscan?: number;
+}
+export interface VirtualRange {
+    start: number;
+    end: number;
+    topOffset: number;
+    bottomOffset: number;
+    totalHeight: number;
+}
+/**
+ * Compute the visible range for a fixed-height virtualized list.
+ *
+ * `start`/`end` use the [start, end) convention.
+ */
+export declare function computeVirtualRange(input: VirtualRangeInput): VirtualRange;
 /**
  * Low-level keyed list rendering with fine-grained reactivity.
  *

package/dist/core/for.js

@@ -1,6 +1,46 @@
 import { effect, signal } from './signal.js';
 import { isInDevMode } from './dev.js';
 import { createScope, withScope, getCurrentScope } from './scope.js';
+function clamp(value, min, max) {
+    return Math.max(min, Math.min(max, value));
+}
+/**
+ * Compute the visible range for a fixed-height virtualized list.
+ *
+ * `start`/`end` use the [start, end) convention.
+ */
+export function computeVirtualRange(input) {
+    const itemCount = Number.isFinite(input.itemCount) ? Math.max(0, Math.floor(input.itemCount)) : 0;
+    const itemHeight = Number.isFinite(input.itemHeight) ? Math.max(1, input.itemHeight) : 1;
+    const scrollTop = Number.isFinite(input.scrollTop) ? Math.max(0, input.scrollTop) : 0;
+    const viewportHeight = Number.isFinite(input.viewportHeight)
+        ? Math.max(0, input.viewportHeight)
+        : 0;
+    const overscan = Number.isFinite(input.overscan) ? Math.max(0, Math.floor(input.overscan ?? 0)) : 0;
+    const totalHeight = itemCount * itemHeight;
+    if (itemCount === 0) {
+        return {
+            start: 0,
+            end: 0,
+            topOffset: 0,
+            bottomOffset: 0,
+            totalHeight,
+        };
+    }
+    const visibleStart = Math.floor(scrollTop / itemHeight);
+    const visibleEnd = Math.ceil((scrollTop + viewportHeight) / itemHeight);
+    const start = clamp(visibleStart - overscan, 0, itemCount);
+    const end = clamp(visibleEnd + overscan, start, itemCount);
+    const topOffset = start * itemHeight;
+    const bottomOffset = Math.max(0, totalHeight - (end * itemHeight));
+    return {
+        start,
+        end,
+        topOffset,
+        bottomOffset,
+        totalHeight,
+    };
+}
 const autoDisposeByDocument = new WeakMap();
 const getMutationObserverCtor = (doc) => {
     if (doc.defaultView?.MutationObserver)