@simten/ui 0.1.1

package/dist/canvas/ClockControls.js

@@ -0,0 +1,33 @@
+/**
+ * Unified ClockControls — one design, used everywhere.
+ *
+ * Icon buttons (Step, Play/Pause, Reset) + cycle counter + time-travel.
+ * Optional: speed slider, scrubber.
+ * Floating style — position via parent container.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SkipForward, Play, Pause, RotateCcw, ChevronLeft, ChevronRight, Gauge, History, } from "lucide-react";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../primitives/tooltip";
+import { Button } from "../primitives/button";
+/**
+ * Dense icon button used throughout this toolbar. Wraps shadcn `Button`
+ * with `ghost` + `icon` variants but tightens the size for the embed bar,
+ * and bakes in the Tooltip so each call site is a one-liner. The `label`
+ * doubles as `aria-label` and visible tooltip content.
+ */
+function IconBtn({ label, icon: Icon, onClick, disabled, }) {
+    return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", onClick: onClick, disabled: disabled, "aria-label": label, className: "h-7 w-7 text-muted-foreground disabled:opacity-40 [&_svg]:size-3.5", children: _jsx(Icon, {}) }) }), _jsx(TooltipContent, { side: "bottom", children: label })] }));
+}
+export function ClockControls({ cycle, historyLength, historyIndex, isRunning, isViewingPast, onStep, onRun, onPause, onReset, onStepBack, onStepForward, onSeek, onSpeedChange, speed = 1, maxSpeed = 100, showScrubber, floating, chromeless, }) {
+    const wrapper = floating
+        ? "absolute top-3 left-1/2 -translate-x-1/2 z-10"
+        : "";
+    const inner = chromeless
+        ? "flex items-center gap-1.5"
+        : "flex items-center gap-1.5 border-t border-border bg-card/95 px-3 py-1.5";
+    return (_jsx(TooltipProvider, { children: _jsx("div", { className: wrapper, children: _jsxs("div", { className: inner, children: [_jsx(IconBtn, { label: "Tick", icon: SkipForward, onClick: onStep, disabled: isRunning || isViewingPast }), isRunning
+                        ? _jsx(IconBtn, { label: "Pause", icon: Pause, onClick: onPause })
+                        : _jsx(IconBtn, { label: "Run", icon: Play, onClick: onRun, disabled: isViewingPast }), _jsx(IconBtn, { label: "Reset", icon: RotateCcw, onClick: onReset }), onSpeedChange && (_jsxs("div", { className: "flex items-center gap-2 border-l border-border pl-2 ml-0.5", children: [_jsx(Gauge, { className: "h-3.5 w-3.5 text-muted-foreground/70", "aria-hidden": true }), _jsx("input", { type: "range", min: "1", max: maxSpeed, value: speed, onChange: (e) => onSpeedChange(Number(e.target.value)), className: "w-20 h-1 rounded-lg appearance-none cursor-pointer accent-blue-600", disabled: isViewingPast, "aria-label": "Simulation speed" }), _jsxs("span", { className: "min-w-[55px] text-[10px] text-muted-foreground font-mono tabular-nums", children: [speed, " tick/s"] })] })), _jsx("div", { className: "border-l border-border pl-1.5 ml-0.5", children: _jsxs("span", { className: "text-[11px] text-muted-foreground", children: ["Cycle ", _jsx("span", { className: "font-mono font-semibold text-foreground", children: cycle })] }) }), historyLength > 1 && (_jsxs("div", { className: "flex items-center gap-0.5 border-l border-border pl-1.5 ml-0.5", children: [_jsx(IconBtn, { label: "Step back", icon: ChevronLeft, onClick: onStepBack, disabled: historyIndex <= 0 || isRunning }), _jsx("span", { className: "min-w-[40px] text-center text-[11px] text-muted-foreground", children: isViewingPast ? (_jsxs("span", { className: "font-mono text-amber-600 dark:text-amber-400", children: [historyIndex + 1, "/", historyLength] })) : (_jsxs("span", { className: "font-mono", children: [historyLength, "/", historyLength] })) }), _jsx(IconBtn, { label: "Step forward", icon: ChevronRight, onClick: onStepForward, disabled: !isViewingPast || isRunning })] })), showScrubber && onSeek && historyLength > 1 && (_jsxs("div", { className: "flex items-center gap-2 border-l border-border pl-2 ml-0.5", children: [_jsx(History, { className: "h-3.5 w-3.5 text-muted-foreground/70", "aria-hidden": true }), _jsx("input", { type: "range", min: "0", max: historyLength - 1, value: historyIndex, onChange: (e) => onSeek(Number(e.target.value)), className: "w-24 h-1 rounded-lg appearance-none cursor-pointer accent-blue-600", disabled: isRunning, "aria-label": "Cycle scrubber" })] }))] }) }) }));
+}
+//# sourceMappingURL=ClockControls.js.map

package/dist/canvas/ClockControls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClockControls.js","sourceRoot":"","sources":["../../src/canvas/ClockControls.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,YAAY,CAAC;;AAGb,OAAO,EACL,WAAW,EACX,IAAI,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,YAAY,EACZ,KAAK,EACL,OAAO,GACR,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACjG,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C;;;;;GAKG;AACH,SAAS,OAAO,CAAC,EACf,KAAK,EACL,IAAI,EAAE,IAAI,EACV,OAAO,EACP,QAAQ,GAMT;IACC,OAAO,CACL,MAAC,OAAO,eACN,KAAC,cAAc,IAAC,OAAO,kBACrB,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,gBACN,KAAK,EACjB,SAAS,EAAC,oEAAoE,YAE9E,KAAC,IAAI,KAAG,GACD,GACM,EACjB,KAAC,cAAc,IAAC,IAAI,EAAC,QAAQ,YAAE,KAAK,GAAkB,IAC9C,CACX,CAAC;AACJ,CAAC;AAyBD,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,aAAa,EACb,YAAY,EACZ,SAAS,EACT,aAAa,EACb,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,EACP,UAAU,EACV,aAAa,EACb,MAAM,EACN,aAAa,EACb,KAAK,GAAG,CAAC,EACT,QAAQ,GAAG,GAAG,EACd,YAAY,EACZ,QAAQ,EACR,UAAU,GACS;IACnB,MAAM,OAAO,GAAG,QAAQ;QACtB,CAAC,CAAC,+CAA+C;QACjD,CAAC,CAAC,EAAE,CAAC;IACP,MAAM,KAAK,GAAG,UAAU;QACtB,CAAC,CAAC,2BAA2B;QAC7B,CAAC,CAAC,yEAAyE,CAAC;IAE9E,OAAO,CACL,KAAC,eAAe,cACd,cAAK,SAAS,EAAE,OAAO,YACrB,eAAK,SAAS,EAAE,KAAK,aACnB,KAAC,OAAO,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,IAAI,aAAa,GAAI,EACjG,SAAS;wBACR,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,GAAI;wBAC1D,CAAC,CAAC,KAAC,OAAO,IAAC,KAAK,EAAC,KAAK,EAAG,IAAI,EAAE,IAAI,EAAG,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,GAAI,EACnF,KAAC,OAAO,IAAC,KAAK,EAAC,OAAO,EAAC,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,OAAO,GAAI,EAG3D,aAAa,IAAI,CAChB,eAAK,SAAS,EAAC,4DAA4D,aACzE,KAAC,KAAK,IAAC,SAAS,EAAC,sCAAsC,wBAAe,EACtE,gBACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EACtD,SAAS,EAAC,oEAAoE,EAC9E,QAAQ,EAAE,aAAa,gBACZ,kBAAkB,GAC7B,EACF,gBAAM,SAAS,EAAC,uEAAuE,aACpF,KAAK,eACD,IACH,CACP,EAGD,cAAK,SAAS,EAAC,sCAAsC,YACnD,gBAAM,SAAS,EAAC,mCAAmC,uBAC3C,eAAM,SAAS,EAAC,yCAAyC,YAAE,KAAK,GAAQ,IACzE,GACH,EAGL,aAAa,GAAG,CAAC,IAAI,CACpB,eAAK,SAAS,EAAC,gEAAgE,aAC7E,KAAC,OAAO,IAAC,KAAK,EAAC,WAAW,EAAC,IAAI,EAAE,WAAW,EAAE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,IAAI,CAAC,IAAI,SAAS,GAAI,EAE/G,eAAM,SAAS,EAAC,4DAA4D,YACzE,aAAa,CAAC,CAAC,CAAC,CACf,gBAAM,SAAS,EAAC,8CAA8C,aAC3D,YAAY,GAAG,CAAC,OAAG,aAAa,IAC5B,CACR,CAAC,CAAC,CAAC,CACF,gBAAM,SAAS,EAAC,WAAW,aACxB,aAAa,OAAG,aAAa,IACzB,CACR,GACI,EAEP,KAAC,OAAO,IAAC,KAAK,EAAC,cAAc,EAAC,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,aAAa,IAAI,SAAS,GAAI,IAC/G,CACP,EAGA,YAAY,IAAI,MAAM,IAAI,aAAa,GAAG,CAAC,IAAI,CAC9C,eAAK,SAAS,EAAC,4DAA4D,aACzE,KAAC,OAAO,IAAC,SAAS,EAAC,sCAAsC,wBAAe,EACxE,gBACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAC,GAAG,EACP,GAAG,EAAE,aAAa,GAAG,CAAC,EACtB,KAAK,EAAE,YAAY,EACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,EAC/C,SAAS,EAAC,oEAAoE,EAC9E,QAAQ,EAAE,SAAS,gBACR,gBAAgB,GAC3B,IACE,CACP,IACG,GACF,GACU,CACnB,CAAC;AACJ,CAAC"}

package/dist/canvas/CompositeInspectorDialog.d.ts

@@ -0,0 +1,24 @@
+/**
+ * CompositeInspectorDialog (Store-Free)
+ *
+ * Modal dialog that shows the internals of a composite component with its own
+ * canvas and independent simulation engine. Supports nested drill-down — double-
+ * clicking a composite inside the dialog pushes another level onto the stack.
+ *
+ * This version is fully props-driven with no Zustand store dependencies,
+ * so it can be used anywhere a CircuitCanvas renders (editor, embeds, blog, etc.).
+ */
+import type { InspectorFrame } from "./types";
+import type { CircuitLibrary } from "@simten/core/simulator";
+import type { Circuit } from "@simten/core";
+export interface CompositeInspectorDialogProps {
+    stack: InspectorFrame[];
+    componentLibrary: CircuitLibrary;
+    theme?: "light" | "dark";
+    onClose: () => void;
+    onPopLevel: () => void;
+    onPushLevel: (name: string, def: Circuit, label: string) => void;
+    onNavigate: (index: number) => void;
+}
+export declare function CompositeInspectorDialog({ stack, componentLibrary, theme, onClose, onPopLevel, onPushLevel, onNavigate, }: CompositeInspectorDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CompositeInspectorDialog.d.ts.map

package/dist/canvas/CompositeInspectorDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInspectorDialog.d.ts","sourceRoot":"","sources":["../../src/canvas/CompositeInspectorDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAaH,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C,OAAO,KAAK,EAAE,cAAc,EAAmB,MAAM,wBAAwB,CAAC;AAE9E,OAAO,KAAK,EAAE,OAAO,EAAsB,MAAM,cAAc,CAAC;AA2WhE,MAAM,WAAW,6BAA6B;IAC5C,KAAK,EAAE,cAAc,EAAE,CAAC;IACxB,gBAAgB,EAAE,cAAc,CAAC;IACjC,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED,wBAAgB,wBAAwB,CAAC,EACvC,KAAK,EACL,gBAAgB,EAChB,KAAc,EACd,OAAO,EACP,UAAU,EACV,WAAW,EACX,UAAU,GACX,EAAE,6BAA6B,2CAiJ/B"}

package/dist/canvas/CompositeInspectorDialog.js

@@ -0,0 +1,290 @@
+/**
+ * CompositeInspectorDialog (Store-Free)
+ *
+ * Modal dialog that shows the internals of a composite component with its own
+ * canvas and independent simulation engine. Supports nested drill-down — double-
+ * clicking a composite inside the dialog pushes another level onto the stack.
+ *
+ * This version is fully props-driven with no Zustand store dependencies,
+ * so it can be used anywhere a CircuitCanvas renders (editor, embeds, blog, etc.).
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo, useState, useCallback, useEffect, useRef, } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { createDrillDownViewCircuit } from "./drill-down-view";
+import { createSimulatorFromCircuit } from "@simten/core/simulator";
+import { isSequentialCircuit } from "@simten/core/circuit";
+import { CircuitCanvas } from "./CircuitCanvas";
+import { ClockControls } from "./ClockControls";
+import { NODE_TYPES, EDGE_TYPES } from "./node-types";
+import { useSandboxContext } from "../sandbox/SandboxProvider";
+function InspectorCanvas({ frame, componentLibrary, onPushLevel, theme = "dark", }) {
+    const viewCircuit = useMemo(() => createDrillDownViewCircuit(frame.componentDef), [frame.componentDef]);
+    const isSequential = useMemo(() => isSequentialCircuit(viewCircuit, componentLibrary.resolveCircuit), [viewCircuit, componentLibrary]);
+    const handleNodeDoubleClick = useCallback((nodeData) => {
+        if (!nodeData.isComposite)
+            return;
+        const componentDef = componentLibrary.resolveCircuit(nodeData.componentRef);
+        if (!componentDef)
+            return;
+        if (componentDef.implementation.kind === "composite" &&
+            componentDef.nodes.length > 0) {
+            onPushLevel(nodeData.componentRef, componentDef, nodeData.label ?? nodeData.componentRef);
+        }
+    }, [componentLibrary, onPushLevel]);
+    // ── Simulation: prefer sandbox, fall back to local simulator ──
+    const sandbox = useSandboxContext();
+    const [portValues, setPortValues] = useState(new Map());
+    const [useSandbox, setUseSandbox] = useState(false);
+    const localEngineRef = useRef(null);
+    // Clock-control state — minimal time-travel via sandbox snapshots, scoped
+    // to this drill-down's slot.
+    const [cycle, setCycle] = useState(0);
+    const [isRunning, setIsRunning] = useState(false);
+    const historyRef = useRef([]);
+    const [historyLen, setHistoryLen] = useState(0);
+    const [historyIndex, setHistoryIndex] = useState(-1);
+    // Unique slot ID per drill-down instance (supports nested drill-downs)
+    const slotIdRef = useRef('');
+    if (!slotIdRef.current) {
+        slotIdRef.current = `drill-${typeof crypto !== 'undefined' && crypto.randomUUID ? crypto.randomUUID() : Math.random().toString(36).slice(2)}`;
+    }
+    const slotId = slotIdRef.current;
+    // Cleanup slot on unmount
+    useEffect(() => {
+        return () => {
+            if (useSandbox)
+                sandbox.dispose(slotId).catch(() => { });
+        };
+    }, [sandbox, slotId, useSandbox]);
+    useEffect(() => {
+        // Send the drill-down view circuit to the sandbox for simulation.
+        // The sandbox already has eval functions from the source compile.
+        // Include every circuit the view references (primitives AND composites,
+        // recursively) — without composite defs, the sandbox can't simulate
+        // composite children and their outputs stay stuck.
+        const allLib = [];
+        const seen = new Set();
+        for (const name of componentLibrary.getAllPrimitiveNames()) {
+            const c = componentLibrary.resolveCircuit(name);
+            if (c && !seen.has(name)) {
+                seen.add(name);
+                allLib.push(c);
+            }
+        }
+        const walk = (c) => {
+            for (const node of c.nodes) {
+                if (seen.has(node.componentRef))
+                    continue;
+                const resolved = componentLibrary.resolveCircuit(node.componentRef);
+                if (!resolved)
+                    continue;
+                seen.add(node.componentRef);
+                allLib.push(resolved);
+                if (resolved.implementation.kind === 'composite')
+                    walk(resolved);
+            }
+        };
+        walk(viewCircuit);
+        sandbox.compileIR(viewCircuit, allLib, slotId, { snapshot: isSequential }).then(result => {
+            if ('error' in result) {
+                // Fall back to local simulator (for embed contexts where no source was compiled)
+                try {
+                    const engine = createSimulatorFromCircuit(viewCircuit, componentLibrary);
+                    engine.runCombinational();
+                    localEngineRef.current = engine;
+                    setUseSandbox(false);
+                    const pvMap = new Map();
+                    for (const [k, v] of engine.getPortValues()) {
+                        pvMap.set(k, v);
+                    }
+                    setPortValues(pvMap);
+                }
+                catch (e) {
+                    console.warn("[InspectorCanvas] Both sandbox and local failed:", e);
+                }
+                return;
+            }
+            setUseSandbox(true);
+            const pvMap = new Map();
+            for (const [k, v] of Object.entries(result.portValues)) {
+                pvMap.set(k, v);
+            }
+            setPortValues(pvMap);
+            // Seed history with the initial snapshot (sequential circuits only).
+            historyRef.current = result.snapshotId !== undefined
+                ? [{ snapshotId: result.snapshotId, cycle: 0 }]
+                : [];
+            setHistoryLen(historyRef.current.length);
+            setHistoryIndex(historyRef.current.length === 0 ? -1 : 0);
+            setCycle(0);
+        });
+    }, [viewCircuit, componentLibrary, sandbox, slotId, isSequential]);
+    const handleToggle = useCallback((nodeId) => {
+        const outKey = `${nodeId}.out`;
+        const currentValue = portValues.get(outKey);
+        sandbox.setNode(nodeId, !currentValue, slotId).then(result => {
+            if ('error' in result)
+                return;
+            const pvMap = new Map();
+            for (const [k, v] of Object.entries(result.portValues))
+                pvMap.set(k, v);
+            setPortValues(pvMap);
+        });
+    }, [sandbox, portValues]);
+    const handleNumericChange = useCallback((nodeId, newValue) => {
+        sandbox.setNode(nodeId, newValue, slotId).then(result => {
+            if ('error' in result)
+                return;
+            const pvMap = new Map();
+            for (const [k, v] of Object.entries(result.portValues))
+                pvMap.set(k, v);
+            setPortValues(pvMap);
+        });
+    }, [sandbox]);
+    // ── Clock controls ─────────────────────────────────────────────────────
+    // Tick the sandbox slot, capture a snapshot, and record it in history.
+    // If we're currently viewing the past, ticking truncates future entries
+    // (mirrors the embed's history semantics).
+    const handleTick = useCallback(() => {
+        sandbox.tick(undefined, slotId, { snapshot: isSequential }).then(result => {
+            if ('error' in result)
+                return;
+            const pvMap = new Map();
+            for (const [k, v] of Object.entries(result.portValues))
+                pvMap.set(k, v);
+            setPortValues(pvMap);
+            setCycle(result.cycle);
+            if (result.snapshotId !== undefined) {
+                const truncated = historyRef.current.slice(0, historyIndex + 1);
+                truncated.push({ snapshotId: result.snapshotId, cycle: result.cycle });
+                historyRef.current = truncated;
+                setHistoryLen(truncated.length);
+                setHistoryIndex(truncated.length - 1);
+            }
+        });
+    }, [sandbox, slotId, isSequential, historyIndex]);
+    const handleReset = useCallback(() => {
+        setIsRunning(false);
+        sandbox.reset(slotId).then(result => {
+            if ('error' in result)
+                return;
+            const pvMap = new Map();
+            for (const [k, v] of Object.entries(result.portValues))
+                pvMap.set(k, v);
+            setPortValues(pvMap);
+            setCycle(0);
+            // Reset clears all history; if the slot is sequential, take a fresh
+            // snapshot of the post-reset state to seed history again.
+            historyRef.current = [];
+            setHistoryLen(0);
+            setHistoryIndex(-1);
+            if (isSequential) {
+                sandbox.snapshot(slotId).then(snap => {
+                    if ('error' in snap || snap.snapshotId === undefined)
+                        return;
+                    historyRef.current = [{ snapshotId: snap.snapshotId, cycle: 0 }];
+                    setHistoryLen(1);
+                    setHistoryIndex(0);
+                });
+            }
+        });
+    }, [sandbox, slotId, isSequential]);
+    const restoreTo = useCallback((index) => {
+        const entry = historyRef.current[index];
+        if (!entry)
+            return;
+        sandbox.restore(entry.snapshotId, slotId).then(result => {
+            if ('error' in result)
+                return;
+            const pvMap = new Map();
+            for (const [k, v] of Object.entries(result.portValues))
+                pvMap.set(k, v);
+            setPortValues(pvMap);
+            setCycle(entry.cycle);
+            setHistoryIndex(index);
+        });
+    }, [sandbox, slotId]);
+    const handleStepBack = useCallback(() => {
+        setIsRunning(false);
+        if (historyIndex > 0)
+            restoreTo(historyIndex - 1);
+    }, [historyIndex, restoreTo]);
+    const handleStepForward = useCallback(() => {
+        if (historyIndex < historyLen - 1)
+            restoreTo(historyIndex + 1);
+        else
+            handleTick();
+    }, [historyIndex, historyLen, restoreTo, handleTick]);
+    // Auto-run loop while isRunning.
+    useEffect(() => {
+        if (!isRunning)
+            return;
+        const id = window.setInterval(() => { handleTick(); }, 200);
+        return () => window.clearInterval(id);
+    }, [isRunning, handleTick]);
+    return (_jsxs("div", { className: "relative h-full w-full", children: [isSequential && (_jsx(ClockControls, { floating: true, cycle: cycle, historyLength: historyLen, historyIndex: historyIndex, isRunning: isRunning, isViewingPast: historyIndex >= 0 && historyIndex < historyLen - 1, onStep: handleTick, onRun: () => setIsRunning(true), onPause: () => setIsRunning(false), onReset: handleReset, onStepBack: handleStepBack, onStepForward: handleStepForward })), _jsx(CircuitCanvas, { circuit: viewCircuit, componentLibrary: componentLibrary, portValues: portValues, sequentialState: null, onToggleNode: handleToggle, onSetNodeValue: handleNumericChange, onNodeDoubleClick: handleNodeDoubleClick, nodeTypes: NODE_TYPES, edgeTypes: EDGE_TYPES, theme: theme, showControls: true, height: "100%", panOnMobile: true })] }));
+}
+function InspectorBreadcrumb({ stack, onNavigate, theme = "dark", }) {
+    const topFrame = stack[stack.length - 1];
+    const description = topFrame?.componentDef.metadata?.description;
+    const dark = theme === "dark";
+    return (_jsxs("div", { className: "flex items-center gap-1 text-sm min-w-0", children: [stack.map((frame, index) => (_jsxs(React.Fragment, { children: [index > 0 && (_jsx("span", { className: `${dark ? "text-gray-500" : "text-gray-400"} shrink-0`, children: ">" })), index < stack.length - 1 ? (_jsxs("button", { onClick: () => onNavigate(index), className: `${dark
+                            ? "text-blue-400 hover:text-blue-300"
+                            : "text-blue-600 hover:text-blue-800"} hover:underline font-medium shrink-0`, children: [frame.nodeLabel, " (", frame.componentName, ")"] })) : (_jsxs("span", { className: `font-semibold shrink-0 ${dark ? "text-gray-100" : "text-gray-900"}`, children: [frame.nodeLabel, " (", frame.componentName, ")"] }))] }, index))), description && (_jsxs(_Fragment, { children: [_jsx("span", { className: `${dark ? "text-gray-600" : "text-gray-300"} shrink-0`, children: "\u2014" }), _jsx("span", { className: `${dark ? "text-gray-400" : "text-gray-500"} text-xs italic truncate`, children: description })] }))] }));
+}
+const levelVariants = {
+    enterIn: { opacity: 0 },
+    enterOut: { opacity: 0 },
+    center: { opacity: 1 },
+    exitIn: { opacity: 0 },
+    exitOut: { opacity: 0 },
+};
+export function CompositeInspectorDialog({ stack, componentLibrary, theme = "dark", onClose, onPopLevel, onPushLevel, onNavigate, }) {
+    const isOpen = stack.length > 0;
+    const prevDepthRef = useRef(0);
+    const [direction, setDirection] = useState("in");
+    useEffect(() => {
+        if (stack.length > prevDepthRef.current) {
+            setDirection("in");
+        }
+        else if (stack.length < prevDepthRef.current) {
+            setDirection("out");
+        }
+        prevDepthRef.current = stack.length;
+    }, [stack.length]);
+    // Lock body scroll while the inspector is open. This is a hand-rolled modal
+    // (motion.div + fixed positioning), so the browser doesn't lock scroll for
+    // us the way native <dialog> would. Without this, swiping the modal scrolls
+    // the page underneath. Tracked for proper Radix Dialog refactor in #84.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = previousOverflow;
+        };
+    }, [isOpen]);
+    const handleBackdropClick = useCallback((e) => {
+        if (e.target === e.currentTarget)
+            onClose();
+    }, [onClose]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Escape") {
+            e.stopPropagation();
+            if (stack.length > 1) {
+                onPopLevel();
+            }
+            else {
+                onClose();
+            }
+        }
+    }, [stack.length, onPopLevel, onClose]);
+    const topFrame = isOpen ? stack[stack.length - 1] : null;
+    return (_jsx(AnimatePresence, { children: isOpen && topFrame && (_jsxs(_Fragment, { children: [_jsx(motion.div, { className: "fixed inset-0 z-50 bg-black/50", initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.25 }, onClick: handleBackdropClick, onKeyDown: handleKeyDown, tabIndex: -1 }, "inspector-backdrop"), _jsx(motion.div, { className: "fixed inset-0 z-50 flex items-center justify-center p-8 pointer-events-none", children: _jsxs(motion.div, { className: `flex h-[80vh] w-full max-w-5xl flex-col rounded-lg shadow-xl pointer-events-auto overflow-hidden ${theme === "dark" ? "bg-gray-900" : "bg-white"}`, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: { duration: 0.15 }, children: [_jsxs("div", { className: `flex items-center justify-between border-b px-4 py-3 ${theme === "dark" ? "border-gray-700" : "border-gray-200"}`, children: [_jsx(InspectorBreadcrumb, { stack: stack, onNavigate: onNavigate, theme: theme }), _jsx("button", { onClick: onClose, className: `rounded p-1 ${theme === "dark"
+                                            ? "text-gray-400 hover:bg-gray-800 hover:text-gray-300"
+                                            : "text-gray-400 hover:bg-gray-100 hover:text-gray-600"}`, "aria-label": "Close inspector", children: _jsx("svg", { className: "h-5 w-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsx("div", { className: "relative flex-1 overflow-hidden", children: _jsx(AnimatePresence, { mode: "wait", initial: false, children: _jsx(motion.div, { className: "absolute inset-0", initial: direction === "in" ? "enterIn" : "enterOut", animate: "center", exit: direction === "in" ? "exitIn" : "exitOut", variants: levelVariants, transition: { duration: 0.2, ease: "easeInOut" }, children: _jsx(InspectorCanvas, { frame: topFrame, componentLibrary: componentLibrary, onPushLevel: onPushLevel, theme: theme }) }, `${stack.length}-${topFrame.componentName}`) }) })] }) }, "inspector-dialog")] })) }));
+}
+//# sourceMappingURL=CompositeInspectorDialog.js.map

package/dist/canvas/CompositeInspectorDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositeInspectorDialog.js","sourceRoot":"","sources":["../../src/canvas/CompositeInspectorDialog.tsx"],"names":[],"mappings":"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"}

package/dist/canvas/dagre-layout.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Dagre layout computation — synchronous, no I/O.
+ *
+ * Uses @dagrejs/dagre (~30 KB gzip) for Sugiyama-style layered layouts
+ * — the right shape for digital circuits with their natural left-to-right
+ * data flow. Dagre returns node positions as CENTER coordinates; we
+ * convert to top-left to match React Flow's expected convention.
+ */
+import type { Circuit } from "@simten/core";
+import type { MetadataState } from "./types";
+/** Node size constants by component type. Used to feed dagre. */
+export declare const NODE_DIMENSIONS: Record<string, {
+    width: number;
+    height: number;
+}>;
+export declare const DEFAULT_DIMENSIONS: {
+    width: number;
+    height: number;
+};
+export declare function getDimensions(componentRef: string): {
+    width: number;
+    height: number;
+};
+export interface DagreLayoutOptions {
+    /** Layout direction. "LR" = left-to-right (default), "TB" = top-to-bottom. */
+    direction?: "LR" | "TB" | "RL" | "BT";
+    /** Inter-node spacing in the same rank. */
+    nodeSpacing?: number;
+    /** Spacing between ranks. */
+    rankSpacing?: number;
+}
+/**
+ * Compute dagre layout for a circuit. Returns a MetadataState with node
+ * positions in top-left coordinates.
+ *
+ * Synchronous — dagre.layout() does no I/O. Callers can use the result
+ * immediately on first render.
+ */
+export declare function computeDagreLayout(circuit: Circuit, options?: DagreLayoutOptions): MetadataState;
+//# sourceMappingURL=dagre-layout.d.ts.map

package/dist/canvas/dagre-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dagre-layout.d.ts","sourceRoot":"","sources":["../../src/canvas/dagre-layout.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAE7C,iEAAiE;AACjE,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAe7E,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;CAA6B,CAAC;AAE7D,wBAAgB,aAAa,CAAC,YAAY,EAAE,MAAM;WAnBI,MAAM;YAAU,MAAM;EAqB3E;AAED,MAAM,WAAW,kBAAkB;IACjC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtC,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,OAAO,EAChB,OAAO,CAAC,EAAE,kBAAkB,GAC3B,aAAa,CAmDf"}

package/dist/canvas/dagre-layout.js

@@ -0,0 +1,86 @@
+/**
+ * Dagre layout computation — synchronous, no I/O.
+ *
+ * Uses @dagrejs/dagre (~30 KB gzip) for Sugiyama-style layered layouts
+ * — the right shape for digital circuits with their natural left-to-right
+ * data flow. Dagre returns node positions as CENTER coordinates; we
+ * convert to top-left to match React Flow's expected convention.
+ */
+import dagre from "@dagrejs/dagre";
+/** Node size constants by component type. Used to feed dagre. */
+export const NODE_DIMENSIONS = {
+    Switch: { width: 140, height: 110 },
+    Button: { width: 120, height: 80 },
+    Input: { width: 140, height: 80 },
+    Led: { width: 100, height: 110 },
+    Output: { width: 100, height: 80 },
+    HexDisplay: { width: 100, height: 80 },
+    SevenSegment: { width: 100, height: 80 },
+    Screen: { width: 200, height: 200 },
+    RasterDisplay: { width: 200, height: 200 },
+    Console: { width: 380, height: 220 },
+    Register: { width: 120, height: 80 },
+    RAM: { width: 120, height: 80 },
+    ROM: { width: 120, height: 80 },
+    DualPortRAM: { width: 140, height: 100 },
+};
+export const DEFAULT_DIMENSIONS = { width: 160, height: 80 };
+export function getDimensions(componentRef) {
+    return NODE_DIMENSIONS[componentRef] ?? DEFAULT_DIMENSIONS;
+}
+/**
+ * Compute dagre layout for a circuit. Returns a MetadataState with node
+ * positions in top-left coordinates.
+ *
+ * Synchronous — dagre.layout() does no I/O. Callers can use the result
+ * immediately on first render.
+ */
+export function computeDagreLayout(circuit, options) {
+    const direction = options?.direction ?? "LR";
+    const nodeSpacing = options?.nodeSpacing ?? 60;
+    const rankSpacing = options?.rankSpacing ?? 90;
+    const g = new dagre.graphlib.Graph();
+    g.setGraph({
+        rankdir: direction,
+        nodesep: nodeSpacing,
+        ranksep: rankSpacing,
+        marginx: 20,
+        marginy: 20,
+    });
+    g.setDefaultEdgeLabel(() => ({}));
+    // Add nodes with their dimensions.
+    const nodeIds = new Set();
+    for (const node of circuit.nodes) {
+        const dims = getDimensions(node.componentRef);
+        g.setNode(node.id, { width: dims.width, height: dims.height });
+        nodeIds.add(node.id);
+    }
+    // Add edges. Dagre doesn't track per-port connections, so we just
+    // record source→target. Skip connections whose endpoints aren't real
+    // nodes (e.g. circuit-level input/output ports) — calling setEdge with
+    // unknown ids would auto-create dimensionless phantom nodes and crash
+    // dagre's layout passes.
+    for (const conn of circuit.connections) {
+        if (!nodeIds.has(conn.source.nodeId) || !nodeIds.has(conn.target.nodeId))
+            continue;
+        g.setEdge(conn.source.nodeId, conn.target.nodeId);
+    }
+    // Synchronous; no I/O.
+    dagre.layout(g);
+    const metadata = { components: {}, connections: {} };
+    for (const node of circuit.nodes) {
+        const laid = g.node(node.id);
+        if (!laid)
+            continue;
+        // Dagre returns center; convert to top-left.
+        metadata.components[node.id] = {
+            id: node.id,
+            position: {
+                x: laid.x - laid.width / 2,
+                y: laid.y - laid.height / 2,
+            },
+        };
+    }
+    return metadata;
+}
+//# sourceMappingURL=dagre-layout.js.map

package/dist/canvas/dagre-layout.js.map

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

package/dist/canvas/drill-down-view.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Drill-Down View Utilities
+ *
+ * Creates viewable circuits for composite component internals.
+ * When a user drills into a composite (e.g., HalfAdder), we need to:
+ * 1. Show its internal nodes on the canvas
+ * 2. Add synthetic boundary nodes for the composite's ports
+ * 3. Scope port values so internal node IDs match simulation keys
+ */
+import type { Circuit } from '@simten/core';
+import type { FlatPortValueMap } from '@simten/core/simulator';
+/** Prefix for synthetic boundary input nodes */
+export declare const BOUNDARY_IN_PREFIX = "__boundary_in_";
+/** Prefix for synthetic boundary output nodes */
+export declare const BOUNDARY_OUT_PREFIX = "__boundary_out_";
+/**
+ * Creates a viewable circuit from a composite's definition.
+ *
+ * The composite Circuit has internal nodes and connections where circuit-level
+ * ports use `nodeId: ""`. We replace those with synthetic Switch/Input (for inputs)
+ * and Led (for outputs) boundary nodes, so the canvas renders them naturally.
+ */
+export declare function createDrillDownViewCircuit(composite: Circuit): Circuit;
+/**
+ * Scopes port values for a drilled-in view.
+ *
+ * The flat simulator produces port value keys with hierarchical prefixes like
+ * "ha1_abc.xor1_def.out". When we drill into "ha1_abc", we need to strip
+ * that prefix so keys become "xor1_def.out" — matching the composite's internal node IDs.
+ *
+ * Also maps boundary port values: the composite instance's own port values
+ * get mapped to synthetic boundary node IDs.
+ */
+export declare function scopePortValues(portValues: FlatPortValueMap, prefix: string, composite?: Circuit): FlatPortValueMap;
+//# sourceMappingURL=drill-down-view.d.ts.map

package/dist/canvas/drill-down-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drill-down-view.d.ts","sourceRoot":"","sources":["../../src/canvas/drill-down-view.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAwC,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAE/D,gDAAgD;AAChD,eAAO,MAAM,kBAAkB,mBAAmB,CAAC;AACnD,iDAAiD;AACjD,eAAO,MAAM,mBAAmB,oBAAoB,CAAC;AAErD;;;;;;GAMG;AACH,wBAAgB,0BAA0B,CAAC,SAAS,EAAE,OAAO,GAAG,OAAO,CA8EtE;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAC7B,UAAU,EAAE,gBAAgB,EAC5B,MAAM,EAAE,MAAM,EACd,SAAS,CAAC,EAAE,OAAO,GAClB,gBAAgB,CAqClB"}