@bian-womp/spark-workbench 0.1.9 → 0.1.10

package/lib/cjs/index.cjs

@@ -1,12 +1,12 @@
 'use strict';
 
 var sparkGraph = require('@bian-womp/spark-graph');
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var sparkRemote = require('@bian-womp/spark-remote');
+var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@phosphor-icons/react');
 var ReactFlow = require('reactflow');
 var cx = require('classnames');
-var react = require('@phosphor-icons/react');
 
 class DefaultUIExtensionRegistry {
     constructor() {
@@ -350,1144 +350,1145 @@ class ReactFlowWorkbench {
     }
 }
 
-const WorkbenchContext = React.createContext(null);
-function useWorkbenchContext() {
-    const ctx = React.useContext(WorkbenchContext);
-    if (!ctx)
-        throw new Error("useWorkbenchContext must be used within WorkbenchProvider");
-    return ctx;
-}
-
-function useWorkbenchBridge(wb) {
-    const onConnect = React.useCallback((params) => {
-        if (!params.source || !params.target)
-            return;
-        if (!params.sourceHandle || !params.targetHandle)
+class GraphRunner {
+    constructor(registry, backend) {
+        this.registry = registry;
+        this.listeners = new Map();
+        this.stagedInputs = {};
+        this.backend = { kind: "local" };
+        if (backend)
+            this.backend = backend;
+    }
+    build(def) {
+        if (this.backend.kind === "local") {
+            const builder = new sparkGraph.GraphBuilder(this.registry);
+            this.runtime = builder.build(def);
             return;
-        wb.connect({
-            source: { nodeId: params.source, handle: params.sourceHandle },
-            target: { nodeId: params.target, handle: params.targetHandle },
-        });
-    }, [wb]);
-    const onNodesChange = React.useCallback((changes) => {
-        changes.forEach((c) => {
-            if (c.type === "position" && c.position)
-                wb.setPosition(c.id, c.position);
-            if (c.type === "remove")
-                wb.removeNode(c.id);
-            if (c.type === "select")
-                wb.toggleNodeSelection(c.id);
-        });
-    }, [wb]);
-    const onEdgesDelete = React.useCallback((edges) => edges.forEach((e) => wb.disconnect(e.id)), [wb]);
-    const onEdgesChange = React.useCallback((changes) => {
-        changes.forEach((c) => {
-            if (c.type === "remove")
-                wb.disconnect(c.id);
-            else if (c.type === "select")
-                wb.toggleEdgeSelection(c.id);
-        });
-    }, [wb]);
-    const onNodesDelete = React.useCallback((nodes) => {
-        for (const n of nodes)
-            wb.removeNode(n.id);
-    }, [wb]);
-    const onSelectionChange = React.useCallback((sel) => {
-        const next = {
-            nodes: sel.nodes.map((n) => n.id),
-            edges: sel.edges.map((e) => e.id),
-        };
-        const cur = wb.getSelection();
-        const sameLen = cur.nodes.length === next.nodes.length &&
-            cur.edges.length === next.edges.length;
-        const same = sameLen &&
-            cur.nodes.every((id, i) => id === next.nodes[i]) &&
-            cur.edges.every((id, i) => id === next.edges[i]);
-        if (!same)
-            wb.setSelection(next);
-    }, [wb]);
-    return {
-        onConnect,
-        onNodesChange,
-        onEdgesChange,
-        onEdgesDelete,
-        onNodesDelete,
-        onSelectionChange,
-    };
-}
-function useWorkbenchGraphTick(wb) {
-    const [tick, setTick] = React.useState(0);
-    React.useEffect(() => {
-        const bump = () => setTick((t) => t + 1);
-        const off = wb.on("graphChanged", bump);
-        return () => off();
-    }, [wb]);
-    return tick;
-}
-function useWorkbenchGraphUiTick(wb) {
-    const [tick, setTick] = React.useState(0);
-    React.useEffect(() => {
-        const bump = () => setTick((t) => t + 1);
-        const off = wb.on("graphUiChanged", bump);
-        return () => off();
-    }, [wb]);
-    return tick;
-}
-function useWorkbenchVersionTick(runner) {
-    const [version, setVersion] = React.useState(0);
-    React.useEffect(() => {
-        const bump = () => setVersion((v) => v + 1);
-        const u1 = runner.on("value", bump);
-        const u2 = runner.on("error", bump);
-        const u3 = runner.on("invalidate", bump);
-        const u4 = runner.on("status", bump);
-        const u5 = runner.on("stats", bump);
-        return () => {
-            u1();
-            u2();
-            u3();
-            u4();
-            u5();
-        };
-    }, [runner]);
-    return version;
-}
-// Query param helpers
-function setSearchParam(key, val) {
-    if (typeof window === "undefined")
-        return;
-    const url = new URL(window.location.href);
-    if (val === undefined || val === "")
-        url.searchParams.delete(key);
-    else
-        url.searchParams.set(key, val);
-    window.history.replaceState({}, "", url.toString());
-}
-function useQueryParamBoolean(key, defaultValue) {
-    const initial = React.useMemo(() => {
-        if (typeof window === "undefined")
-            return defaultValue;
-        const sp = new URLSearchParams(window.location.search);
-        const v = sp.get(key);
-        if (v === null)
-            return defaultValue;
-        return v === "1" || v === "true";
-    }, [key, defaultValue]);
-    const [val, setVal] = React.useState(initial);
-    const set = React.useCallback((v) => {
-        setVal(v);
-        setSearchParam(key, v ? "1" : undefined);
-    }, [key]);
-    React.useEffect(() => {
-        const onPop = () => {
-            const sp = new URLSearchParams(window.location.search);
-            const v = sp.get(key);
-            setVal(v === "1" || v === "true");
-        };
-        window.addEventListener("popstate", onPop);
-        return () => window.removeEventListener("popstate", onPop);
-    }, [key]);
-    return [val, set];
-}
-function useQueryParamString(key, defaultValue) {
-    const initial = React.useMemo(() => {
-        if (typeof window === "undefined")
-            return defaultValue;
-        const sp = new URLSearchParams(window.location.search);
-        const v = sp.get(key);
-        return v ?? defaultValue;
-    }, [key, defaultValue]);
-    const [val, setVal] = React.useState(initial);
-    const set = React.useCallback((v) => {
-        setVal(v);
-        setSearchParam(key, v);
-    }, [key]);
-    React.useEffect(() => {
-        const onPop = () => {
-            const sp = new URLSearchParams(window.location.search);
-            const v = sp.get(key) ?? undefined;
-            setVal(v);
-        };
-        window.addEventListener("popstate", onPop);
-        return () => window.removeEventListener("popstate", onPop);
-    }, [key]);
-    return [val, set];
-}
-
-function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
-    const [nodeStatus, setNodeStatus] = React.useState({});
-    const [edgeStatus, setEdgeStatus] = React.useState({});
-    const [events, setEvents] = React.useState([]);
-    const clearEvents = React.useCallback(() => setEvents([]), []);
-    // Validation
-    const [validation, setValidation] = React.useState(undefined);
-    // Selection (mirror workbench selectionChanged)
-    const [selectedNodeId, setSelectedNodeId] = React.useState();
-    const [selectedEdgeId, setSelectedEdgeId] = React.useState();
-    const setSelection = React.useCallback((sel) => wb.setSelection(sel), [wb]);
-    // Ticks
-    const graphTick = useWorkbenchGraphTick(wb);
-    const graphUiTick = useWorkbenchGraphUiTick(wb);
-    const versionTick = useWorkbenchVersionTick(runner);
-    const valuesTick = versionTick + graphTick + graphUiTick;
-    // Def and IO values
-    const def = wb.export();
-    const inputsMap = React.useMemo(() => runner.getInputs(def), [runner, def, valuesTick]);
-    const outputsMap = React.useMemo(() => runner.getOutputs(def), [runner, def, valuesTick]);
-    // Auto layout (simple layered layout)
-    const runAutoLayout = React.useCallback(() => {
-        const cur = wb.export();
-        const indegree = {};
-        const adj = {};
-        for (const n of cur.nodes) {
-            indegree[n.nodeId] = 0;
-            adj[n.nodeId] = [];
         }
-        for (const e of cur.edges) {
-            indegree[e.target.nodeId] = (indegree[e.target.nodeId] ?? 0) + 1;
-            adj[e.source.nodeId].push(e.target.nodeId);
+        // Remote: no-op here; build is performed on remote server during launch
+    }
+    update(def) {
+        if (this.backend.kind === "local") {
+            if (!this.runtime)
+                return;
+            this.runtime.update(def, this.registry);
+            this.emit("invalidate", { reason: "graph-updated" });
+            return;
         }
-        const q = Object.keys(indegree).filter((k) => indegree[k] === 0);
-        const layers = [];
-        while (q.length) {
-            const layer = [];
-            const next = [];
-            for (const id of q) {
-                layer.push(id);
-                for (const nb of adj[id]) {
-                    indegree[nb] -= 1;
-                    if (indegree[nb] === 0)
-                        next.push(nb);
-                }
+        // Remote: forward update; ignore errors (fire-and-forget)
+        void this.ensureRemote().then(async (rc) => {
+            try {
+                await rc.runner.update(def);
+                this.emit("invalidate", { reason: "graph-updated" });
             }
-            layers.push(layer);
-            q.splice(0, q.length, ...next);
-        }
-        const X = 360;
-        const Y = 180;
-        const pos = {};
-        layers.forEach((layer, layerIndex) => {
-            layer.forEach((id, itemIndex) => {
-                pos[id] = { x: layerIndex * X, y: itemIndex * Y };
-            });
+            catch { }
         });
-        wb.setPositions(pos);
-    }, [wb]);
-    // Subscribe to runner/workbench events
-    React.useEffect(() => {
-        const add = (source, type) => (payload) => setEvents((prev) => {
-            if (source === "workbench" &&
-                (type === "graphChanged" || type === "graphUiChanged")) {
-                const changeType = payload?.change?.type;
-                if (changeType === "moveNode" || changeType === "moveNodes")
-                    return prev;
+    }
+    launch(def, opts) {
+        if (this.engine) {
+            throw new Error("Engine already running. Stop the current engine first.");
+        }
+        if (this.backend.kind === "local") {
+            this.build(def);
+            if (!this.runtime)
+                throw new Error("Runtime not built");
+            const rt = this.runtime;
+            switch (opts.engine) {
+                case "push":
+                    this.engine = new sparkGraph.PushEngine(rt);
+                    break;
+                case "batched":
+                    this.engine = new sparkGraph.BatchedEngine(rt, {
+                        flushIntervalMs: opts.batched?.flushIntervalMs ?? 0,
+                    });
+                    break;
+                case "pull":
+                    this.engine = new sparkGraph.PullEngine(rt);
+                    break;
+                case "hybrid":
+                    this.engine = new sparkGraph.HybridEngine(rt, {
+                        windowMs: opts.hybrid?.windowMs ?? 250,
+                        batchThreshold: opts.hybrid?.batchThreshold ?? 3,
+                    });
+                    break;
+                case "step":
+                    this.engine = new sparkGraph.StepEngine(rt);
+                    break;
+                default:
+                    throw new Error("Unknown engine kind");
             }
-            const next = [
-                { at: Date.now(), source, type, payload: structuredClone(payload) },
-                ...prev,
-            ];
-            return next.length > 200 ? next.slice(0, 200) : next;
-        });
-        const off1 = runner.on("value", (e) => {
-            if (e?.io === "input") {
-                const nodeId = e?.nodeId;
-                setNodeStatus((s) => ({
-                    ...s,
-                    [nodeId]: { ...(s[nodeId] ?? {}), invalidated: true },
-                }));
+            this.engine.on("value", (e) => this.emit("value", e));
+            this.engine.on("error", (e) => this.emit("error", e));
+            this.engine.on("invalidate", (e) => this.emit("invalidate", e));
+            this.engine.on("stats", (e) => this.emit("stats", e));
+            this.engine.launch();
+            this.runningKind = opts.engine;
+            this.emit("status", { running: true, engine: this.runningKind });
+            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
+                for (const [handle, value] of Object.entries(map)) {
+                    this.engine.setInput(nodeId, handle, value);
+                }
             }
-            return add("runner", "value")(e);
-        });
-        const off2 = runner.on("error", (e) => {
-            const edgeError = e;
-            const nodeError = e;
-            if (edgeError?.kind === "edge-convert") {
-                const edgeId = edgeError.edgeId;
-                setEdgeStatus((s) => ({
-                    ...s,
-                    [edgeId]: { ...(s[edgeId] ?? {}), lastError: edgeError.err },
-                }));
+            return;
+        }
+        // Remote: build remotely then launch
+        void this.ensureRemote().then(async (rc) => {
+            await rc.runner.build(def);
+            const eng = rc.runner.getEngine();
+            if (!rc.listenersBound) {
+                eng.on("value", (e) => {
+                    rc.valueCache.set(`${e.nodeId}.${e.handle}`, {
+                        io: e.io,
+                        value: e.value,
+                    });
+                    this.emit("value", e);
+                });
+                eng.on("error", (e) => this.emit("error", e));
+                eng.on("invalidate", (e) => this.emit("invalidate", e));
+                eng.on("stats", (e) => this.emit("stats", e));
+                rc.listenersBound = true;
             }
-            else if (nodeError?.nodeId) {
-                const nodeId = nodeError?.nodeId;
-                setNodeStatus((s) => ({
-                    ...s,
-                    [nodeId]: {
-                        ...(s[nodeId] ?? {}),
-                        lastError: nodeError?.err,
-                    },
-                }));
+            this.engine = eng;
+            this.engine.launch();
+            this.runningKind = "push";
+            this.emit("status", { running: true, engine: this.runningKind });
+            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
+                for (const [handle, value] of Object.entries(map)) {
+                    this.engine.setInput(nodeId, handle, value);
+                }
             }
-            return add("runner", "error")(e);
         });
-        const off3 = runner.on("invalidate", (e) => {
-            if (e?.reason === "graph-updated") {
-                setNodeStatus((s) => {
-                    const next = {};
-                    for (const n of wb.export().nodes) {
-                        next[n.nodeId] = { ...(s[n.nodeId] ?? {}), invalidated: true };
+    }
+    setInput(nodeId, handle, value) {
+        if (!this.stagedInputs[nodeId])
+            this.stagedInputs[nodeId] = {};
+        this.stagedInputs[nodeId][handle] = value;
+        if (this.engine)
+            this.engine.setInput(nodeId, handle, value);
+    }
+    async step() {
+        if (this.backend.kind !== "local")
+            return; // unsupported remotely
+        const eng = this.engine;
+        if (eng instanceof sparkGraph.StepEngine)
+            await eng.step();
+    }
+    async computeNode(nodeId) {
+        if (this.backend.kind !== "local")
+            return; // unsupported remotely
+        const eng = this.engine;
+        if (eng instanceof sparkGraph.PullEngine)
+            await eng.computeNode(nodeId);
+    }
+    flush() {
+        if (this.backend.kind !== "local")
+            return; // unsupported remotely
+        const eng = this.engine;
+        if (eng instanceof sparkGraph.BatchedEngine)
+            eng.flush();
+    }
+    getOutputs(def) {
+        const out = {};
+        if (this.backend.kind === "local") {
+            if (!this.runtime)
+                return out;
+            for (const n of def.nodes) {
+                const desc = this.registry.nodes.get(n.typeId);
+                const handles = Object.keys(desc?.outputs ?? {});
+                for (const h of handles) {
+                    const v = this.runtime.getOutput(n.nodeId, h);
+                    if (v !== undefined) {
+                        if (!out[n.nodeId])
+                            out[n.nodeId] = {};
+                        out[n.nodeId][h] = v;
                     }
-                    return next;
-                });
-            }
-            return add("runner", "invalidate")(e);
-        });
-        const off3b = runner.on("stats", (s) => {
-            if (!s)
-                return;
-            if (s.kind === "node-start") {
-                const id = s.nodeId;
-                setNodeStatus((prev) => ({
-                    ...prev,
-                    [id]: {
-                        ...(prev[id] ?? {}),
-                        running: true,
-                        progress: 0,
-                        invalidated: false,
-                    },
-                }));
-            }
-            else if (s.kind === "node-progress") {
-                const id = s.nodeId;
-                setNodeStatus((prev) => ({
-                    ...prev,
-                    [id]: {
-                        ...(prev[id] ?? {}),
-                        running: true,
-                        progress: Number(s.progress) || 0,
-                    },
-                }));
+                }
             }
-            else if (s.kind === "node-done") {
-                const id = s.nodeId;
-                setNodeStatus((prev) => ({
-                    ...prev,
-                    [id]: { ...(prev[id] ?? {}), running: false },
-                }));
+            return out;
+        }
+        const cache = this.remote?.valueCache;
+        if (!cache)
+            return out;
+        for (const n of def.nodes) {
+            const desc = this.registry.nodes.get(n.typeId);
+            const handles = Object.keys(desc?.outputs ?? {});
+            for (const h of handles) {
+                const key = `${n.nodeId}.${h}`;
+                const rec = cache.get(key);
+                if (rec && rec.io === "output") {
+                    if (!out[n.nodeId])
+                        out[n.nodeId] = {};
+                    out[n.nodeId][h] = rec.value;
+                }
             }
-            else if (s.kind === "edge-start") {
-                const id = s.edgeId;
-                setEdgeStatus((prev) => ({
-                    ...prev,
-                    [id]: { ...(prev[id] ?? {}), running: true },
-                }));
+        }
+        return out;
+    }
+    getInputs(def) {
+        const out = {};
+        if (this.backend.kind === "local") {
+            for (const n of def.nodes) {
+                const staged = this.stagedInputs[n.nodeId] ?? {};
+                const runtimeInputs = this.runtime
+                    ? this.runtime.__unsafe_getNodeData?.(n.nodeId)?.inputs ?? {}
+                    : {};
+                if (this.isRunning()) {
+                    out[n.nodeId] = runtimeInputs;
+                }
+                else {
+                    const merged = { ...runtimeInputs, ...staged };
+                    if (Object.keys(merged).length > 0)
+                        out[n.nodeId] = merged;
+                }
             }
-            else if (s.kind === "edge-done") {
-                const id = s.edgeId;
-                setEdgeStatus((prev) => ({
-                    ...prev,
-                    [id]: { ...(prev[id] ?? {}), running: false },
-                }));
-            }
-            return add("runner", "stats")(s);
-        });
-        const off4 = wb.on("graphChanged", add("workbench", "graphChanged"));
-        const off4b = wb.on("graphUiChanged", add("workbench", "graphUiChanged"));
-        const off5 = wb.on("validationChanged", add("workbench", "validationChanged"));
-        const off5b = wb.on("validationChanged", (r) => setValidation(r));
-        const off6 = wb.on("selectionChanged", (sel) => {
-            setSelectedNodeId(sel.nodes?.[0]);
-            setSelectedEdgeId(sel.edges?.[0]);
-        });
-        const off7 = wb.on("error", add("workbench", "error"));
-        wb.refreshValidation();
-        return () => {
-            off1();
-            off2();
-            off3();
-            off3b();
-            off4();
-            off4b();
-            off5();
-            off5b();
-            off6();
-            off7();
-        };
-    }, [runner, wb]);
-    // Push incremental updates into running engine without full reload
-    React.useEffect(() => {
-        if (runner.isRunning()) {
-            try {
-                runner.update(def);
-            }
-            catch { }
-        }
-    }, [runner, def, graphTick]);
-    const validationByNode = React.useMemo(() => {
-        const inputs = {};
-        const outputs = {};
-        const issues = {};
-        if (!validation)
-            return { inputs, outputs, issues };
-        for (const is of validation.issues ?? []) {
-            const d = is?.data;
-            const level = is?.level;
-            const code = String(is?.code ?? "");
-            const message = String(is?.message ?? code);
-            if (!d)
-                continue;
-            if (d.nodeId) {
-                if (d.input) {
-                    const arr = inputs[d.nodeId] ?? (inputs[d.nodeId] = []);
-                    arr.push({ handle: String(d.input), level, message, code });
-                    const nodeArr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
-                    nodeArr.push({ level, message, code });
-                }
-                if (d.output) {
-                    const arr = outputs[d.nodeId] ?? (outputs[d.nodeId] = []);
-                    arr.push({ handle: String(d.output), level, message, code });
-                    const nodeArr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
-                    nodeArr.push({ level, message, code });
-                }
-                if (!d.input && !d.output) {
-                    const arr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
-                    arr.push({ level, message, code });
-                }
-            }
-        }
-        return { inputs, outputs, issues };
-    }, [validation]);
-    const validationGlobal = React.useMemo(() => {
-        const list = [];
-        if (!validation)
-            return list;
-        for (const is of validation.issues ?? []) {
-            const d = is?.data;
-            const level = is?.level;
-            const code = String(is?.code ?? "");
-            const message = String(is?.message ?? code);
-            if (!d || (!d.nodeId && !d.edgeId)) {
-                list.push({ level, code, message });
-            }
-        }
-        return list;
-    }, [validation]);
-    const validationByEdge = React.useMemo(() => {
-        const errors = {};
-        const issues = {};
-        if (!validation)
-            return { errors, issues };
-        for (const is of validation.issues ?? []) {
-            const d = is?.data;
-            const level = is?.level;
-            const code = String(is?.code ?? "");
-            const message = String(is?.message ?? code);
-            if (d?.edgeId) {
-                if (level === "error")
-                    errors[d.edgeId] = true;
-                const arr = issues[d.edgeId] ?? (issues[d.edgeId] = []);
-                arr.push({ level, message, code });
+            return out;
+        }
+        const cache = this.remote?.valueCache;
+        for (const n of def.nodes) {
+            const staged = this.stagedInputs[n.nodeId] ?? {};
+            const desc = this.registry.nodes.get(n.typeId);
+            const handles = Object.keys(desc?.inputs ?? {});
+            const cur = {};
+            for (const h of handles) {
+                const rec = cache?.get(`${n.nodeId}.${h}`);
+                if (rec && rec.io === "input")
+                    cur[h] = rec.value;
             }
+            const merged = this.isRunning() ? cur : { ...cur, ...staged };
+            if (Object.keys(merged).length > 0)
+                out[n.nodeId] = merged;
         }
-        return { errors, issues };
-    }, [validation]);
-    const isRunning = React.useCallback(() => runner.isRunning(), [runner]);
-    const engineKind = React.useCallback(() => runner.getRunningEngine(), [runner]);
-    const start = React.useCallback((engine) => {
-        try {
-            runner.launch(wb.export(), { engine });
+        return out;
+    }
+    async whenIdle() {
+        await this.engine?.whenIdle();
+    }
+    on(event, handler) {
+        if (!this.listeners.has(event))
+            this.listeners.set(event, new Set());
+        const set = this.listeners.get(event);
+        set.add(handler);
+        return () => set.delete(handler);
+    }
+    emit(event, payload) {
+        const set = this.listeners.get(event);
+        if (set)
+            for (const h of Array.from(set))
+                h(payload);
+    }
+    dispose() {
+        this.engine?.dispose();
+        this.engine = undefined;
+        this.runtime?.dispose();
+        this.runtime = undefined;
+        this.remote = undefined;
+        if (this.runningKind) {
+            this.runningKind = undefined;
+            this.emit("status", { running: false, engine: undefined });
         }
-        catch { }
-    }, [runner, wb]);
-    const stop = React.useCallback(() => runner.dispose(), [runner]);
-    const step = React.useCallback(() => runner.step(), [runner]);
-    const flush = React.useCallback(() => runner.flush(), [runner]);
-    const value = React.useMemo(() => ({
-        wb,
-        runner,
-        registry,
-        setRegistry,
-        def,
-        selectedNodeId,
-        selectedEdgeId,
-        setSelection,
-        nodeStatus,
-        edgeStatus,
-        valuesTick,
-        inputsMap,
-        outputsMap,
-        validationByNode,
-        validationByEdge,
-        validationGlobal,
-        events,
-        clearEvents,
-        isRunning,
-        engineKind,
-        start,
-        stop,
-        step,
-        flush,
-        runAutoLayout,
-    }), [
-        wb,
-        runner,
-        registry,
-        setRegistry,
-        def,
-        selectedNodeId,
-        selectedEdgeId,
-        setSelection,
-        nodeStatus,
-        edgeStatus,
-        valuesTick,
-        inputsMap,
-        outputsMap,
-        validationByNode,
-        validationByEdge,
-        validationGlobal,
-        events,
-        clearEvents,
-        isRunning,
-        engineKind,
-        start,
-        stop,
-        step,
-        flush,
-        runAutoLayout,
-    ]);
-    return (jsxRuntime.jsx(WorkbenchContext.Provider, { value: value, children: children }));
-}
-
-function toReactFlow(def, positions, registry, selectedNodeIds, selectedEdgeIds, opts) {
-    const nodeHandleMap = {};
-    const nodes = def.nodes.map((n) => {
-        const desc = registry.nodes.get(n.typeId);
-        const inputHandles = Object.entries(desc?.inputs ?? {}).map(([id, typeId]) => ({ id, typeId }));
-        const outputHandles = Object.entries(desc?.outputs ?? {}).map(([id, typeId]) => ({ id, typeId }));
-        nodeHandleMap[n.nodeId] = {
-            inputs: new Set(inputHandles.map((h) => h.id)),
-            outputs: new Set(outputHandles.map((h) => h.id)),
-        };
-        return {
-            id: n.nodeId,
-            data: {
-                typeId: n.typeId,
-                params: n.params,
-                inputHandles,
-                outputHandles,
-                showValues: opts?.showValues,
-                inputValues: opts?.inputs?.[n.nodeId],
-                outputValues: opts?.outputs?.[n.nodeId],
-                status: opts?.nodeStatus?.[n.nodeId],
-                validation: {
-                    inputs: opts?.nodeValidation?.inputs?.[n.nodeId] ?? [],
-                    outputs: opts?.nodeValidation?.outputs?.[n.nodeId] ?? [],
-                    issues: opts?.nodeValidation?.issues?.[n.nodeId] ?? [],
-                },
-                toDisplay: opts?.toDisplay,
-            },
-            position: positions[n.nodeId] ?? { x: 0, y: 0 },
-            type: opts?.resolveNodeType?.(n.typeId) ?? "spark:default",
-            selected: selectedNodeIds ? selectedNodeIds.has(n.nodeId) : undefined,
-        };
-    });
-    const edges = def.edges
-        .filter((e) => {
-        const src = nodeHandleMap[e.source.nodeId];
-        const dst = nodeHandleMap[e.target.nodeId];
-        if (!src || !dst)
-            return false;
-        return src.outputs.has(e.source.handle) && dst.inputs.has(e.target.handle);
-    })
-        .map((e) => {
-        const st = opts?.edgeStatus?.[e.id];
-        const isRunning = !!st?.running;
-        const hasError = !!st?.lastError;
-        const isInvalidEdge = !!opts?.edgeValidation?.[e.id];
-        const style = hasError || isInvalidEdge
-            ? { stroke: "#ef4444", strokeWidth: 2 }
-            : isRunning
-                ? { stroke: "#3b82f6" }
-                : undefined;
-        return {
-            id: e.id,
-            source: e.source.nodeId,
-            target: e.target.nodeId,
-            sourceHandle: e.source.handle,
-            targetHandle: e.target.handle,
-            selected: selectedEdgeIds ? selectedEdgeIds.has(e.id) : undefined,
-            animated: isRunning,
-            style,
-        };
-    });
-    return { nodes, edges };
-}
-
-function IssueBadge({ level, title, size = 12, className, }) {
-    const colorClass = level === "error" ? "text-red-600" : "text-amber-600";
-    return (jsxRuntime.jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? (jsxRuntime.jsx(react.XCircleIcon, { size: size, weight: "fill" })) : (jsxRuntime.jsx(react.WarningCircleIcon, { size: size, weight: "fill" })) }));
-}
-
-const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
-    const typeId = data.typeId;
-    const inputEntries = data.inputHandles ?? [];
-    const outputEntries = data.outputHandles ?? [];
-    const status = data.status ?? {};
-    const validation = data.validation ?? {
-        inputs: [],
-        outputs: [],
-        issues: [],
-    };
-    const HEADER_SIZE = 24;
-    const ROW_SIZE = 22;
-    const maxRows = Math.max(inputEntries.length, outputEntries.length);
-    const minHeight = HEADER_SIZE + maxRows * ROW_SIZE;
-    const minWidth = data.showValues ? 320 : 160;
-    const topFor = (i) => HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2;
-    const hasError = !!status.lastError;
-    const isRunning = !!status.running;
-    const isInvalid = !!status.invalidated && !isRunning && !hasError;
-    const borderClasses = selected
-        ? "border-2 border-gray-900 dark:border-gray-100"
-        : hasError
-            ? "border-2 border-red-500"
-            : isRunning
-                ? "border-2 border-blue-500 ring-2 ring-blue-200 dark:ring-blue-900"
-                : isInvalid
-                    ? "border-2 border-amber-500 border-dashed"
-                    : "border border-gray-500 dark:border-gray-400";
-    const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
-    return (jsxRuntime.jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900 border-solid", borderClasses), style: { position: "relative", minHeight: minHeight, minWidth }, children: [jsxRuntime.jsxs("div", { className: "flex h-6 items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full leading-6 text-xs", children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsxRuntime.jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsxRuntime.jsx(react.XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
-                                    ? "error"
-                                    : "warning", size: 12, className: "w-3 h-3", title: validation.issues
-                                    .map((v) => `${v.code}: ${v.message}`)
-                                    .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), (isRunning || pct > 0) && (jsxRuntime.jsx("div", { className: "h-1 bg-blue-200 dark:bg-blue-900", children: jsxRuntime.jsx("div", { className: "h-1 bg-blue-500 transition-all", style: { width: `${pct}%` } }) })), inputEntries.map((entry, i) => {
-                const vIssues = validation.inputs.filter((v) => v.handle === entry.id);
-                const hasAny = vIssues.length > 0;
-                const hasErr = vIssues.some((v) => v.level === "error");
-                const title = vIssues
-                    .map((v) => `${v.code}: ${v.message}`)
-                    .join("; ");
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "target", position: ReactFlow.Position.Left, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { left: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute left-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8 }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), data.showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: data.toDisplay
-                                        ? data.toDisplay(entry.typeId, data.inputValues?.[entry.id])
-                                        : String(data.inputValues?.[entry.id]) }))] })] }, `in-${entry.id}`));
-            }), outputEntries.map((entry, i) => {
-                const vIssues = validation.outputs.filter((v) => v.handle === entry.id);
-                const hasAny = vIssues.length > 0;
-                const hasErr = vIssues.some((v) => v.level === "error");
-                const title = vIssues
-                    .map((v) => `${v.code}: ${v.message}`)
-                    .join("; ");
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "source", position: ReactFlow.Position.Right, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400 !rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { right: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute right-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8, textAlign: "right" }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), data.showValues && (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: data.toDisplay
-                                        ? data.toDisplay(entry.typeId, data.outputValues?.[entry.id])
-                                        : String(data.outputValues?.[entry.id]) }))] })] }, `out-${entry.id}`));
-            })] }));
-});
-DefaultNode.displayName = "DefaultNode";
-
-function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
-    const { registry } = useWorkbenchContext();
-    const rf = ReactFlow.useReactFlow();
-    if (!open || !clientPos)
-        return null;
-    const items = Array.from(registry.nodes.keys());
-    const handleClick = (typeId) => {
-        const p = rf.project({ x: clientPos.x, y: clientPos.y });
-        onAdd(typeId, p);
-        onClose();
-    };
-    return (jsxRuntime.jsxs("div", { className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700", style: { left: clientPos.x, top: clientPos.y }, onMouseLeave: onClose, children: [jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Add Node" }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: items.map((id) => (jsxRuntime.jsx("button", { onClick: () => handleClick(id), className: "block w-full text-left px-2 py-1 hover:bg-gray-100 cursor-pointer", children: id }, id))) })] }));
-}
-
-function WorkbenchCanvas({ showValues, toDisplay, }) {
-    const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, } = useWorkbenchContext();
-    const ioValues = { inputs: inputsMap, outputs: outputsMap };
-    const nodeValidation = validationByNode;
-    const edgeValidation = validationByEdge.errors;
-    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, onSelectionChange, } = useWorkbenchBridge(wb);
-    const { nodeTypes, resolveNodeType } = React.useMemo(() => {
-        // Build nodeTypes map using UI extension registry
-        const ui = wb.getUI();
-        const custom = new Map();
-        for (const typeId of Array.from(registry.nodes.keys())) {
-            const renderer = ui.getNodeRenderer(typeId);
-            if (renderer)
-                custom.set(typeId, renderer);
+    }
+    isRunning() {
+        return !!this.engine;
+    }
+    getRunningEngine() {
+        return this.runningKind;
+    }
+    // Ensure remote transport/runner
+    async ensureRemote() {
+        if (this.remote)
+            return this.remote;
+        let transport;
+        if (this.backend.kind === "remote-http") {
+            if (!sparkRemote.HttpPollingTransport)
+                throw new Error("HttpPollingTransport not available");
+            transport = new sparkRemote.HttpPollingTransport(this.backend.baseUrl);
+            await transport.connect();
         }
-        const types = { "spark:default": DefaultNode };
-        for (const [typeId, comp] of custom.entries()) {
-            types[`spark:${typeId}`] = comp;
+        else if (this.backend.kind === "remote-ws") {
+            if (!sparkRemote.WebSocketTransport)
+                throw new Error("WebSocketTransport not available");
+            transport = new sparkRemote.WebSocketTransport(this.backend.url);
+            await transport.connect();
         }
-        const resolver = (nodeTypeId) => custom.has(nodeTypeId) ? `spark:${nodeTypeId}` : "spark:default";
-        return { nodeTypes: types, resolveNodeType: resolver };
-        // registry is stable; ui renderers expected to be set up before mount
-    }, [wb, registry]);
-    const { nodes, edges } = React.useMemo(() => {
-        const def = wb.export();
-        const sel = wb.getSelection();
-        return toReactFlow(def, wb.getPositions(), registry, new Set(sel.nodes), new Set(sel.edges), {
-            showValues,
-            inputs: ioValues.inputs,
-            outputs: ioValues.outputs,
-            resolveNodeType,
-            toDisplay,
-            nodeStatus,
-            edgeStatus,
-            nodeValidation,
-            edgeValidation,
-        });
-    }, [
-        showValues,
-        ioValues,
-        valuesTick,
-        toDisplay,
-        nodeStatus,
-        edgeStatus,
-        nodeValidation,
-        edgeValidation,
-    ]);
-    const [menuOpen, setMenuOpen] = React.useState(false);
-    const [menuPos, setMenuPos] = React.useState(null);
-    const onContextMenu = (e) => {
-        e.preventDefault();
-        setMenuPos({ x: e.clientX, y: e.clientY });
-        setMenuOpen(true);
-    };
-    const addNodeAt = (typeId, pos) => {
-        wb.addNode({ typeId, position: pos });
-    };
-    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, selectionOnDrag: true, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onSelectionChange: onSelectionChange, deleteKeyCode: ["Backspace", "Delete"], fitView: true, children: [jsxRuntime.jsx(ReactFlow.Background, {}), jsxRuntime.jsx(ReactFlow.MiniMap, {}), jsxRuntime.jsx(ReactFlow.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) })] }) }));
+        else {
+            throw new Error("Remote backend not configured");
+        }
+        const runner = new sparkRemote.RemoteRunner(transport);
+        this.remote = {
+            runner,
+            transport,
+            valueCache: new Map(),
+            listenersBound: false,
+        };
+        return this.remote;
+    }
 }
 
-function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWorkbenchChange, }) {
-    const { events, clearEvents } = useWorkbenchContext();
-    const scrollRef = React.useRef(null);
-    const rows = React.useMemo(() => {
-        const filtered = hideWorkbench
-            ? events.filter((e) => e.source !== "workbench")
-            : events;
-        return filtered.slice().reverse();
-    }, [events, hideWorkbench]);
-    React.useEffect(() => {
-        if (!autoScroll)
+function useWorkbenchBridge(wb) {
+    const onConnect = React.useCallback((params) => {
+        if (!params.source || !params.target)
             return;
-        const el = scrollRef.current;
-        if (!el)
+        if (!params.sourceHandle || !params.targetHandle)
             return;
-        el.scrollTop = el.scrollHeight;
-    }, [rows, autoScroll]);
-    const renderPayload = (v) => {
-        try {
-            return JSON.stringify(v, null, 0);
-        }
-        catch {
-            return String(v);
-        }
+        wb.connect({
+            source: { nodeId: params.source, handle: params.sourceHandle },
+            target: { nodeId: params.target, handle: params.targetHandle },
+        });
+    }, [wb]);
+    const onNodesChange = React.useCallback((changes) => {
+        changes.forEach((c) => {
+            if (c.type === "position" && c.position)
+                wb.setPosition(c.id, c.position);
+            if (c.type === "remove")
+                wb.removeNode(c.id);
+            if (c.type === "select")
+                wb.toggleNodeSelection(c.id);
+        });
+    }, [wb]);
+    const onEdgesDelete = React.useCallback((edges) => edges.forEach((e) => wb.disconnect(e.id)), [wb]);
+    const onEdgesChange = React.useCallback((changes) => {
+        changes.forEach((c) => {
+            if (c.type === "remove")
+                wb.disconnect(c.id);
+            else if (c.type === "select")
+                wb.toggleEdgeSelection(c.id);
+        });
+    }, [wb]);
+    const onNodesDelete = React.useCallback((nodes) => {
+        for (const n of nodes)
+            wb.removeNode(n.id);
+    }, [wb]);
+    const onSelectionChange = React.useCallback((sel) => {
+        const next = {
+            nodes: sel.nodes.map((n) => n.id),
+            edges: sel.edges.map((e) => e.id),
+        };
+        const cur = wb.getSelection();
+        const sameLen = cur.nodes.length === next.nodes.length &&
+            cur.edges.length === next.edges.length;
+        const same = sameLen &&
+            cur.nodes.every((id, i) => id === next.nodes[i]) &&
+            cur.edges.every((id, i) => id === next.edges[i]);
+        if (!same)
+            wb.setSelection(next);
+    }, [wb]);
+    return {
+        onConnect,
+        onNodesChange,
+        onEdgesChange,
+        onEdgesDelete,
+        onNodesDelete,
+        onSelectionChange,
     };
-    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "text-xs px-2 py-0.5 border border-gray-300 rounded", children: "Clear" })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev, idx) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-8 shrink-0 text-right text-gray-500 select-none", children: idx + 1 }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap ml-10", children: renderPayload(ev.payload) })] }, `${ev.at}:${idx}`))) })] }));
 }
-
-function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toDisplay, setInput, }) {
-    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, } = useWorkbenchContext();
-    const nodeValidationIssues = validationByNode.issues;
-    const edgeValidationIssues = validationByEdge.issues;
-    const nodeValidationHandles = validationByNode;
-    const globalValidationIssues = validationGlobal;
-    const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
-    const selectedEdge = def.edges.find((e) => e.id === selectedEdgeId);
-    const selectedDesc = selectedNode
-        ? registry.nodes.get(selectedNode.typeId)
-        : undefined;
-    const inputHandles = Object.keys(selectedDesc?.inputs ?? {});
-    const outputHandles = Object.keys(selectedDesc?.outputs ?? {});
-    const nodeInputs = selectedNodeId ? inputsMap[selectedNodeId] ?? {} : {};
-    const nodeOutputs = selectedNodeId ? outputsMap[selectedNodeId] ?? {} : {};
-    const selectedNodeStatus = selectedNodeId
-        ? nodeStatus?.[selectedNodeId]
-        : undefined;
-    const selectedNodeValidation = selectedNodeId
-        ? nodeValidationIssues?.[selectedNodeId] ?? []
-        : [];
-    const selectedEdgeValidation = selectedEdge
-        ? edgeValidationIssues?.[selectedEdge.id] ?? []
-        : [];
-    const selectedNodeHandleValidation = selectedNodeId
-        ? {
-            inputs: nodeValidationHandles?.inputs?.[selectedNodeId] ?? [],
-            outputs: nodeValidationHandles?.outputs?.[selectedNodeId] ?? [],
-        }
-        : { inputs: [], outputs: [] };
-    // Local drafts and originals for commit-on-blur/enter behavior
-    const [drafts, setDrafts] = React.useState({});
-    const [originals, setOriginals] = React.useState({});
-    // Initialize drafts from current inputs whenever selection or valuesTick change,
-    // but do not clobber fields currently being edited (dirty drafts)
+function useWorkbenchGraphTick(wb) {
+    const [tick, setTick] = React.useState(0);
+    React.useEffect(() => {
+        const bump = () => setTick((t) => t + 1);
+        const off = wb.on("graphChanged", bump);
+        return () => off();
+    }, [wb]);
+    return tick;
+}
+function useWorkbenchGraphUiTick(wb) {
+    const [tick, setTick] = React.useState(0);
+    React.useEffect(() => {
+        const bump = () => setTick((t) => t + 1);
+        const off = wb.on("graphUiChanged", bump);
+        return () => off();
+    }, [wb]);
+    return tick;
+}
+function useWorkbenchVersionTick(runner) {
+    const [version, setVersion] = React.useState(0);
+    React.useEffect(() => {
+        const bump = () => setVersion((v) => v + 1);
+        const u1 = runner.on("value", bump);
+        const u2 = runner.on("error", bump);
+        const u3 = runner.on("invalidate", bump);
+        const u4 = runner.on("status", bump);
+        const u5 = runner.on("stats", bump);
+        return () => {
+            u1();
+            u2();
+            u3();
+            u4();
+            u5();
+        };
+    }, [runner]);
+    return version;
+}
+// Query param helpers
+function setSearchParam(key, val) {
+    if (typeof window === "undefined")
+        return;
+    const url = new URL(window.location.href);
+    if (val === undefined || val === "")
+        url.searchParams.delete(key);
+    else
+        url.searchParams.set(key, val);
+    window.history.replaceState({}, "", url.toString());
+}
+function useQueryParamBoolean(key, defaultValue) {
+    const initial = React.useMemo(() => {
+        if (typeof window === "undefined")
+            return defaultValue;
+        const sp = new URLSearchParams(window.location.search);
+        const v = sp.get(key);
+        if (v === null)
+            return defaultValue;
+        return v === "1" || v === "true";
+    }, [key, defaultValue]);
+    const [val, setVal] = React.useState(initial);
+    const set = React.useCallback((v) => {
+        setVal(v);
+        setSearchParam(key, v ? "1" : undefined);
+    }, [key]);
+    React.useEffect(() => {
+        const onPop = () => {
+            const sp = new URLSearchParams(window.location.search);
+            const v = sp.get(key);
+            setVal(v === "1" || v === "true");
+        };
+        window.addEventListener("popstate", onPop);
+        return () => window.removeEventListener("popstate", onPop);
+    }, [key]);
+    return [val, set];
+}
+function useQueryParamString(key, defaultValue) {
+    const initial = React.useMemo(() => {
+        if (typeof window === "undefined")
+            return defaultValue;
+        const sp = new URLSearchParams(window.location.search);
+        const v = sp.get(key);
+        return v ?? defaultValue;
+    }, [key, defaultValue]);
+    const [val, setVal] = React.useState(initial);
+    const set = React.useCallback((v) => {
+        setVal(v);
+        setSearchParam(key, v);
+    }, [key]);
     React.useEffect(() => {
-        const shallowEqual = (a, b) => {
-            const ak = Object.keys(a);
-            const bk = Object.keys(b);
-            if (ak.length !== bk.length)
-                return false;
-            for (const k of ak)
-                if (a[k] !== b[k])
-                    return false;
-            return true;
+        const onPop = () => {
+            const sp = new URLSearchParams(window.location.search);
+            const v = sp.get(key) ?? undefined;
+            setVal(v);
         };
-        if (!selectedNodeId) {
-            if (Object.keys(drafts).length || Object.keys(originals).length) {
-                setDrafts({});
-                setOriginals({});
-            }
-            return;
-        }
-        const desc = selectedDesc;
-        const handles = Object.keys(desc?.inputs ?? {});
-        const nextDrafts = { ...drafts };
-        const nextOriginals = { ...originals };
-        for (const h of handles) {
-            const typeId = desc?.inputs?.[h];
-            const current = nodeInputs[h];
-            const display = toDisplay(typeId, current);
-            const wasOriginal = originals[h];
-            const isDirty = drafts[h] !== undefined &&
-                wasOriginal !== undefined &&
-                drafts[h] !== wasOriginal;
-            if (!isDirty) {
-                nextDrafts[h] = display;
-                nextOriginals[h] = display;
-            }
-        }
-        if (!shallowEqual(drafts, nextDrafts))
-            setDrafts(nextDrafts);
-        if (!shallowEqual(originals, nextOriginals))
-            setOriginals(nextOriginals);
-    }, [selectedNodeId, selectedDesc, valuesTick]);
-    const widthClass = debug ? "w-[480px]" : "w-[320px]";
-    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
-                                        selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
-                                    const typeId = (selectedDesc?.inputs ?? {})[h];
-                                    const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
-                                        e.target.handle === h);
-                                    const commonProps = {
-                                        style: { flex: 1 },
-                                        disabled: isLinked,
-                                    };
-                                    const current = nodeInputs[h];
-                                    const value = drafts[h] ?? toDisplay(typeId, current);
-                                    const onChangeText = (text) => setDrafts((d) => ({ ...d, [h]: text }));
-                                    const commit = () => {
-                                        const draft = drafts[h];
-                                        if (draft === undefined)
-                                            return;
-                                        setInput(h, draft);
-                                        setOriginals((o) => ({ ...o, [h]: draft }));
-                                    };
-                                    const revert = () => {
-                                        const orig = originals[h] ?? toDisplay(typeId, current);
-                                        setDrafts((d) => ({ ...d, [h]: orig }));
-                                    };
-                                    const isEnum = typeId?.includes("enum:");
-                                    const inIssues = selectedNodeHandleValidation.inputs.filter((m) => m.handle === h);
-                                    const hasValidation = inIssues.length > 0;
-                                    const hasErr = inIssues.some((m) => m.level === "error");
-                                    const title = inIssues
-                                        .map((v) => `${v.code}: ${v.message}`)
-                                        .join("; ");
-                                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-28", children: [h, jsxRuntime.jsx("span", { className: "text-gray-500 ml-1 text-[11px]", children: selectedDesc?.inputs?.[h] })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: drafts[h] ?? toDisplay(typeId, current), onChange: (e) => {
-                                                    const label = String(e.target.value);
-                                                    const byLabel = registry.enums
-                                                        .get(typeId)
-                                                        ?.labelToValue.get(label.toLowerCase());
-                                                    let raw = (byLabel !== undefined ? byLabel : Number(label));
-                                                    if (!Number.isFinite(raw))
-                                                        raw = undefined;
-                                                    setInput(h, raw);
-                                                    const display = toDisplay(typeId, raw);
-                                                    setDrafts((d) => ({ ...d, [h]: display }));
-                                                    setOriginals((o) => ({ ...o, [h]: display }));
-                                                }, ...commonProps, children: [jsxRuntime.jsx("option", { value: "", children: "(select)" }), registry.enums.get(typeId)?.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.label, children: opt.label }, opt.value)))] })) : (jsxRuntime.jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", placeholder: isLinked ? "wired" : undefined, value: value, onChange: (e) => onChangeText(e.target.value), onBlur: commit, onKeyDown: (e) => {
-                                                    if (e.key === "Enter")
-                                                        commit();
-                                                    if (e.key === "Escape")
-                                                        revert();
-                                                }, ...commonProps }))] }, h));
-                                }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsx("label", { className: "w-20", children: h }), jsxRuntime.jsx("div", { className: "flex-1", children: toDisplay(selectedDesc?.outputs?.[h], nodeOutputs[h]) }), (() => {
-                                            const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === h);
-                                            if (outIssues.length === 0)
-                                                return null;
-                                            const outErr = outIssues.some((m) => m.level === "error");
-                                            const outTitle = outIssues
-                                                .map((v) => `${v.code}: ${v.message}`)
-                                                .join("; ");
-                                            return (jsxRuntime.jsx(IssueBadge, { level: outErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: outTitle }));
-                                        })()] }, h))))] }), selectedNodeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedNodeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) }), debug && (jsxRuntime.jsx("div", { className: "mt-3 flex-none min-h-0 h-[50%]", children: jsxRuntime.jsx(DebugEvents, { autoScroll: !!autoScroll, hideWorkbench: !!hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange }) }))] }));
+        window.addEventListener("popstate", onPop);
+        return () => window.removeEventListener("popstate", onPop);
+    }, [key]);
+    return [val, set];
 }
 
-class GraphRunner {
-    constructor(registry, backend) {
-        this.registry = registry;
-        this.listeners = new Map();
-        this.stagedInputs = {};
-        this.backend = { kind: "local" };
-        if (backend)
-            this.backend = backend;
-    }
-    build(def) {
-        if (this.backend.kind === "local") {
-            const builder = new sparkGraph.GraphBuilder(this.registry);
-            this.runtime = builder.build(def);
-            return;
+const WorkbenchContext = React.createContext(null);
+function useWorkbenchContext() {
+    const ctx = React.useContext(WorkbenchContext);
+    if (!ctx)
+        throw new Error("useWorkbenchContext must be used within WorkbenchProvider");
+    return ctx;
+}
+
+function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
+    const [nodeStatus, setNodeStatus] = React.useState({});
+    const [edgeStatus, setEdgeStatus] = React.useState({});
+    const [events, setEvents] = React.useState([]);
+    const clearEvents = React.useCallback(() => setEvents([]), []);
+    // Validation
+    const [validation, setValidation] = React.useState(undefined);
+    // Selection (mirror workbench selectionChanged)
+    const [selectedNodeId, setSelectedNodeId] = React.useState();
+    const [selectedEdgeId, setSelectedEdgeId] = React.useState();
+    const setSelection = React.useCallback((sel) => wb.setSelection(sel), [wb]);
+    // Ticks
+    const graphTick = useWorkbenchGraphTick(wb);
+    const graphUiTick = useWorkbenchGraphUiTick(wb);
+    const versionTick = useWorkbenchVersionTick(runner);
+    const valuesTick = versionTick + graphTick + graphUiTick;
+    // Def and IO values
+    const def = wb.export();
+    const inputsMap = React.useMemo(() => runner.getInputs(def), [runner, def, valuesTick]);
+    const outputsMap = React.useMemo(() => runner.getOutputs(def), [runner, def, valuesTick]);
+    // Auto layout (simple layered layout)
+    const runAutoLayout = React.useCallback(() => {
+        const cur = wb.export();
+        const indegree = {};
+        const adj = {};
+        for (const n of cur.nodes) {
+            indegree[n.nodeId] = 0;
+            adj[n.nodeId] = [];
         }
-        // Remote: no-op here; build is performed on remote server during launch
-    }
-    update(def) {
-        if (this.backend.kind === "local") {
-            if (!this.runtime)
-                return;
-            this.runtime.update(def, this.registry);
-            this.emit("invalidate", { reason: "graph-updated" });
-            return;
+        for (const e of cur.edges) {
+            indegree[e.target.nodeId] = (indegree[e.target.nodeId] ?? 0) + 1;
+            adj[e.source.nodeId].push(e.target.nodeId);
         }
-        // Remote: forward update; ignore errors (fire-and-forget)
-        void this.ensureRemote().then(async (rc) => {
-            try {
-                await rc.runner.update(def);
-                this.emit("invalidate", { reason: "graph-updated" });
+        const q = Object.keys(indegree).filter((k) => indegree[k] === 0);
+        const layers = [];
+        while (q.length) {
+            const layer = [];
+            const next = [];
+            for (const id of q) {
+                layer.push(id);
+                for (const nb of adj[id]) {
+                    indegree[nb] -= 1;
+                    if (indegree[nb] === 0)
+                        next.push(nb);
+                }
             }
-            catch { }
-        });
-    }
-    launch(def, opts) {
-        if (this.engine) {
-            throw new Error("Engine already running. Stop the current engine first.");
+            layers.push(layer);
+            q.splice(0, q.length, ...next);
         }
-        if (this.backend.kind === "local") {
-            this.build(def);
-            if (!this.runtime)
-                throw new Error("Runtime not built");
-            const rt = this.runtime;
-            switch (opts.engine) {
-                case "push":
-                    this.engine = new sparkGraph.PushEngine(rt);
-                    break;
-                case "batched":
-                    this.engine = new sparkGraph.BatchedEngine(rt, {
-                        flushIntervalMs: opts.batched?.flushIntervalMs ?? 0,
-                    });
-                    break;
-                case "pull":
-                    this.engine = new sparkGraph.PullEngine(rt);
-                    break;
-                case "hybrid":
-                    this.engine = new sparkGraph.HybridEngine(rt, {
-                        windowMs: opts.hybrid?.windowMs ?? 250,
-                        batchThreshold: opts.hybrid?.batchThreshold ?? 3,
-                    });
-                    break;
-                case "step":
-                    this.engine = new sparkGraph.StepEngine(rt);
-                    break;
-                default:
-                    throw new Error("Unknown engine kind");
+        const X = 360;
+        const Y = 180;
+        const pos = {};
+        layers.forEach((layer, layerIndex) => {
+            layer.forEach((id, itemIndex) => {
+                pos[id] = { x: layerIndex * X, y: itemIndex * Y };
+            });
+        });
+        wb.setPositions(pos);
+    }, [wb]);
+    // Subscribe to runner/workbench events
+    React.useEffect(() => {
+        const add = (source, type) => (payload) => setEvents((prev) => {
+            if (source === "workbench" &&
+                (type === "graphChanged" || type === "graphUiChanged")) {
+                const changeType = payload?.change?.type;
+                if (changeType === "moveNode" || changeType === "moveNodes")
+                    return prev;
+            }
+            const next = [
+                { at: Date.now(), source, type, payload: structuredClone(payload) },
+                ...prev,
+            ];
+            return next.length > 200 ? next.slice(0, 200) : next;
+        });
+        const off1 = runner.on("value", (e) => {
+            if (e?.io === "input") {
+                const nodeId = e?.nodeId;
+                setNodeStatus((s) => ({
+                    ...s,
+                    [nodeId]: { ...(s[nodeId] ?? {}), invalidated: true },
+                }));
+            }
+            return add("runner", "value")(e);
+        });
+        const off2 = runner.on("error", (e) => {
+            const edgeError = e;
+            const nodeError = e;
+            if (edgeError?.kind === "edge-convert") {
+                const edgeId = edgeError.edgeId;
+                setEdgeStatus((s) => ({
+                    ...s,
+                    [edgeId]: { ...(s[edgeId] ?? {}), lastError: edgeError.err },
+                }));
             }
-            this.engine.on("value", (e) => this.emit("value", e));
-            this.engine.on("error", (e) => this.emit("error", e));
-            this.engine.on("invalidate", (e) => this.emit("invalidate", e));
-            this.engine.on("stats", (e) => this.emit("stats", e));
-            this.engine.launch();
-            this.runningKind = opts.engine;
-            this.emit("status", { running: true, engine: this.runningKind });
-            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
-                for (const [handle, value] of Object.entries(map)) {
-                    this.engine.setInput(nodeId, handle, value);
-                }
+            else if (nodeError?.nodeId) {
+                const nodeId = nodeError?.nodeId;
+                setNodeStatus((s) => ({
+                    ...s,
+                    [nodeId]: {
+                        ...(s[nodeId] ?? {}),
+                        lastError: nodeError?.err,
+                    },
+                }));
             }
-            return;
-        }
-        // Remote: build remotely then launch
-        void this.ensureRemote().then(async (rc) => {
-            await rc.runner.build(def);
-            const eng = rc.runner.getEngine();
-            if (!rc.listenersBound) {
-                eng.on("value", (e) => {
-                    rc.valueCache.set(`${e.nodeId}.${e.handle}`, {
-                        io: e.io,
-                        value: e.value,
-                    });
-                    this.emit("value", e);
+            return add("runner", "error")(e);
+        });
+        const off3 = runner.on("invalidate", (e) => {
+            if (e?.reason === "graph-updated") {
+                setNodeStatus((s) => {
+                    const next = {};
+                    for (const n of wb.export().nodes) {
+                        next[n.nodeId] = { ...(s[n.nodeId] ?? {}), invalidated: true };
+                    }
+                    return next;
                 });
-                eng.on("error", (e) => this.emit("error", e));
-                eng.on("invalidate", (e) => this.emit("invalidate", e));
-                eng.on("stats", (e) => this.emit("stats", e));
-                rc.listenersBound = true;
             }
-            this.engine = eng;
-            this.engine.launch();
-            this.runningKind = "push";
-            this.emit("status", { running: true, engine: this.runningKind });
-            for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
-                for (const [handle, value] of Object.entries(map)) {
-                    this.engine.setInput(nodeId, handle, value);
-                }
+            return add("runner", "invalidate")(e);
+        });
+        const off3b = runner.on("stats", (s) => {
+            if (!s)
+                return;
+            if (s.kind === "node-start") {
+                const id = s.nodeId;
+                setNodeStatus((prev) => ({
+                    ...prev,
+                    [id]: {
+                        ...(prev[id] ?? {}),
+                        running: true,
+                        progress: 0,
+                        invalidated: false,
+                    },
+                }));
+            }
+            else if (s.kind === "node-progress") {
+                const id = s.nodeId;
+                setNodeStatus((prev) => ({
+                    ...prev,
+                    [id]: {
+                        ...(prev[id] ?? {}),
+                        running: true,
+                        progress: Number(s.progress) || 0,
+                    },
+                }));
+            }
+            else if (s.kind === "node-done") {
+                const id = s.nodeId;
+                setNodeStatus((prev) => ({
+                    ...prev,
+                    [id]: { ...(prev[id] ?? {}), running: false },
+                }));
+            }
+            else if (s.kind === "edge-start") {
+                const id = s.edgeId;
+                setEdgeStatus((prev) => ({
+                    ...prev,
+                    [id]: { ...(prev[id] ?? {}), running: true },
+                }));
+            }
+            else if (s.kind === "edge-done") {
+                const id = s.edgeId;
+                setEdgeStatus((prev) => ({
+                    ...prev,
+                    [id]: { ...(prev[id] ?? {}), running: false },
+                }));
             }
+            return add("runner", "stats")(s);
         });
-    }
-    setInput(nodeId, handle, value) {
-        if (!this.stagedInputs[nodeId])
-            this.stagedInputs[nodeId] = {};
-        this.stagedInputs[nodeId][handle] = value;
-        if (this.engine)
-            this.engine.setInput(nodeId, handle, value);
-    }
-    async step() {
-        if (this.backend.kind !== "local")
-            return; // unsupported remotely
-        const eng = this.engine;
-        if (eng instanceof sparkGraph.StepEngine)
-            await eng.step();
-    }
-    async computeNode(nodeId) {
-        if (this.backend.kind !== "local")
-            return; // unsupported remotely
-        const eng = this.engine;
-        if (eng instanceof sparkGraph.PullEngine)
-            await eng.computeNode(nodeId);
-    }
-    flush() {
-        if (this.backend.kind !== "local")
-            return; // unsupported remotely
-        const eng = this.engine;
-        if (eng instanceof sparkGraph.BatchedEngine)
-            eng.flush();
-    }
-    getOutputs(def) {
-        const out = {};
-        if (this.backend.kind === "local") {
-            if (!this.runtime)
-                return out;
-            for (const n of def.nodes) {
-                const desc = this.registry.nodes.get(n.typeId);
-                const handles = Object.keys(desc?.outputs ?? {});
-                for (const h of handles) {
-                    const v = this.runtime.getOutput(n.nodeId, h);
-                    if (v !== undefined) {
-                        if (!out[n.nodeId])
-                            out[n.nodeId] = {};
-                        out[n.nodeId][h] = v;
-                    }
-                }
+        const off4 = wb.on("graphChanged", add("workbench", "graphChanged"));
+        const off4b = wb.on("graphUiChanged", add("workbench", "graphUiChanged"));
+        const off5 = wb.on("validationChanged", add("workbench", "validationChanged"));
+        const off5b = wb.on("validationChanged", (r) => setValidation(r));
+        const off6 = wb.on("selectionChanged", (sel) => {
+            setSelectedNodeId(sel.nodes?.[0]);
+            setSelectedEdgeId(sel.edges?.[0]);
+        });
+        const off7 = wb.on("error", add("workbench", "error"));
+        wb.refreshValidation();
+        return () => {
+            off1();
+            off2();
+            off3();
+            off3b();
+            off4();
+            off4b();
+            off5();
+            off5b();
+            off6();
+            off7();
+        };
+    }, [runner, wb]);
+    // Push incremental updates into running engine without full reload
+    React.useEffect(() => {
+        if (runner.isRunning()) {
+            try {
+                runner.update(def);
             }
-            return out;
+            catch { }
         }
-        const cache = this.remote?.valueCache;
-        if (!cache)
-            return out;
-        for (const n of def.nodes) {
-            const desc = this.registry.nodes.get(n.typeId);
-            const handles = Object.keys(desc?.outputs ?? {});
-            for (const h of handles) {
-                const key = `${n.nodeId}.${h}`;
-                const rec = cache.get(key);
-                if (rec && rec.io === "output") {
-                    if (!out[n.nodeId])
-                        out[n.nodeId] = {};
-                    out[n.nodeId][h] = rec.value;
+    }, [runner, def, graphTick]);
+    const validationByNode = React.useMemo(() => {
+        const inputs = {};
+        const outputs = {};
+        const issues = {};
+        if (!validation)
+            return { inputs, outputs, issues };
+        for (const is of validation.issues ?? []) {
+            const d = is?.data;
+            const level = is?.level;
+            const code = String(is?.code ?? "");
+            const message = String(is?.message ?? code);
+            if (!d)
+                continue;
+            if (d.nodeId) {
+                if (d.input) {
+                    const arr = inputs[d.nodeId] ?? (inputs[d.nodeId] = []);
+                    arr.push({ handle: String(d.input), level, message, code });
+                    const nodeArr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
+                    nodeArr.push({ level, message, code });
                 }
-            }
-        }
-        return out;
-    }
-    getInputs(def) {
-        const out = {};
-        if (this.backend.kind === "local") {
-            for (const n of def.nodes) {
-                const staged = this.stagedInputs[n.nodeId] ?? {};
-                const runtimeInputs = this.runtime
-                    ? this.runtime.__unsafe_getNodeData?.(n.nodeId)?.inputs ?? {}
-                    : {};
-                if (this.isRunning()) {
-                    out[n.nodeId] = runtimeInputs;
+                if (d.output) {
+                    const arr = outputs[d.nodeId] ?? (outputs[d.nodeId] = []);
+                    arr.push({ handle: String(d.output), level, message, code });
+                    const nodeArr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
+                    nodeArr.push({ level, message, code });
                 }
-                else {
-                    const merged = { ...runtimeInputs, ...staged };
-                    if (Object.keys(merged).length > 0)
-                        out[n.nodeId] = merged;
+                if (!d.input && !d.output) {
+                    const arr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
+                    arr.push({ level, message, code });
                 }
             }
-            return out;
         }
-        const cache = this.remote?.valueCache;
-        for (const n of def.nodes) {
-            const staged = this.stagedInputs[n.nodeId] ?? {};
-            const desc = this.registry.nodes.get(n.typeId);
-            const handles = Object.keys(desc?.inputs ?? {});
-            const cur = {};
-            for (const h of handles) {
-                const rec = cache?.get(`${n.nodeId}.${h}`);
-                if (rec && rec.io === "input")
-                    cur[h] = rec.value;
+        return { inputs, outputs, issues };
+    }, [validation]);
+    const validationGlobal = React.useMemo(() => {
+        const list = [];
+        if (!validation)
+            return list;
+        for (const is of validation.issues ?? []) {
+            const d = is?.data;
+            const level = is?.level;
+            const code = String(is?.code ?? "");
+            const message = String(is?.message ?? code);
+            if (!d || (!d.nodeId && !d.edgeId)) {
+                list.push({ level, code, message });
+            }
+        }
+        return list;
+    }, [validation]);
+    const validationByEdge = React.useMemo(() => {
+        const errors = {};
+        const issues = {};
+        if (!validation)
+            return { errors, issues };
+        for (const is of validation.issues ?? []) {
+            const d = is?.data;
+            const level = is?.level;
+            const code = String(is?.code ?? "");
+            const message = String(is?.message ?? code);
+            if (d?.edgeId) {
+                if (level === "error")
+                    errors[d.edgeId] = true;
+                const arr = issues[d.edgeId] ?? (issues[d.edgeId] = []);
+                arr.push({ level, message, code });
             }
-            const merged = this.isRunning() ? cur : { ...cur, ...staged };
-            if (Object.keys(merged).length > 0)
-                out[n.nodeId] = merged;
         }
-        return out;
-    }
-    async whenIdle() {
-        await this.engine?.whenIdle();
-    }
-    on(event, handler) {
-        if (!this.listeners.has(event))
-            this.listeners.set(event, new Set());
-        const set = this.listeners.get(event);
-        set.add(handler);
-        return () => set.delete(handler);
-    }
-    emit(event, payload) {
-        const set = this.listeners.get(event);
-        if (set)
-            for (const h of Array.from(set))
-                h(payload);
-    }
-    dispose() {
-        this.engine?.dispose();
-        this.engine = undefined;
-        this.runtime?.dispose();
-        this.runtime = undefined;
-        this.remote = undefined;
-        if (this.runningKind) {
-            this.runningKind = undefined;
-            this.emit("status", { running: false, engine: undefined });
+        return { errors, issues };
+    }, [validation]);
+    const isRunning = React.useCallback(() => runner.isRunning(), [runner]);
+    const engineKind = React.useCallback(() => runner.getRunningEngine(), [runner]);
+    const start = React.useCallback((engine) => {
+        try {
+            runner.launch(wb.export(), { engine });
         }
-    }
-    isRunning() {
-        return !!this.engine;
-    }
-    getRunningEngine() {
-        return this.runningKind;
-    }
-    // Ensure remote transport/runner
-    async ensureRemote() {
-        if (this.remote)
-            return this.remote;
-        let transport;
-        if (this.backend.kind === "remote-http") {
-            if (!sparkRemote.HttpPollingTransport)
-                throw new Error("HttpPollingTransport not available");
-            transport = new sparkRemote.HttpPollingTransport(this.backend.baseUrl);
-            await transport.connect();
+        catch { }
+    }, [runner, wb]);
+    const stop = React.useCallback(() => runner.dispose(), [runner]);
+    const step = React.useCallback(() => runner.step(), [runner]);
+    const flush = React.useCallback(() => runner.flush(), [runner]);
+    const value = React.useMemo(() => ({
+        wb,
+        runner,
+        registry,
+        setRegistry,
+        def,
+        selectedNodeId,
+        selectedEdgeId,
+        setSelection,
+        nodeStatus,
+        edgeStatus,
+        valuesTick,
+        inputsMap,
+        outputsMap,
+        validationByNode,
+        validationByEdge,
+        validationGlobal,
+        events,
+        clearEvents,
+        isRunning,
+        engineKind,
+        start,
+        stop,
+        step,
+        flush,
+        runAutoLayout,
+    }), [
+        wb,
+        runner,
+        registry,
+        setRegistry,
+        def,
+        selectedNodeId,
+        selectedEdgeId,
+        setSelection,
+        nodeStatus,
+        edgeStatus,
+        valuesTick,
+        inputsMap,
+        outputsMap,
+        validationByNode,
+        validationByEdge,
+        validationGlobal,
+        events,
+        clearEvents,
+        isRunning,
+        engineKind,
+        start,
+        stop,
+        step,
+        flush,
+        runAutoLayout,
+    ]);
+    return (jsxRuntime.jsx(WorkbenchContext.Provider, { value: value, children: children }));
+}
+
+function IssueBadge({ level, title, size = 12, className, }) {
+    const colorClass = level === "error" ? "text-red-600" : "text-amber-600";
+    return (jsxRuntime.jsx("button", { type: "button", className: `inline-flex items-center justify-center shrink-0 ${colorClass} ${className ?? ""}`, title: title, style: { width: size, height: size }, children: level === "error" ? (jsxRuntime.jsx(react.XCircleIcon, { size: size, weight: "fill" })) : (jsxRuntime.jsx(react.WarningCircleIcon, { size: size, weight: "fill" })) }));
+}
+
+function DebugEvents({ autoScroll, onAutoScrollChange, hideWorkbench, onHideWorkbenchChange, }) {
+    const { events, clearEvents } = useWorkbenchContext();
+    const scrollRef = React.useRef(null);
+    const rows = React.useMemo(() => {
+        const filtered = hideWorkbench
+            ? events.filter((e) => e.source !== "workbench")
+            : events;
+        return filtered.slice().reverse();
+    }, [events, hideWorkbench]);
+    React.useEffect(() => {
+        if (!autoScroll)
+            return;
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        el.scrollTop = el.scrollHeight;
+    }, [rows, autoScroll]);
+    const renderPayload = (v) => {
+        try {
+            return JSON.stringify(v, null, 0);
         }
-        else if (this.backend.kind === "remote-ws") {
-            if (!sparkRemote.WebSocketTransport)
-                throw new Error("WebSocketTransport not available");
-            transport = new sparkRemote.WebSocketTransport(this.backend.url);
-            await transport.connect();
+        catch {
+            return String(v);
         }
-        else {
-            throw new Error("Remote backend not configured");
+    };
+    return (jsxRuntime.jsxs("div", { className: "flex flex-col h-full min-h-0", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [jsxRuntime.jsx("div", { className: "font-semibold", children: "Events" }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: hideWorkbench, onChange: (e) => onHideWorkbenchChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Hide workbench" })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1 text-xs text-gray-700", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: autoScroll, onChange: (e) => onAutoScrollChange?.(e.target.checked) }), jsxRuntime.jsx("span", { children: "Auto scroll" })] }), jsxRuntime.jsx("button", { onClick: clearEvents, className: "text-xs px-2 py-0.5 border border-gray-300 rounded", children: "Clear" })] })] }), jsxRuntime.jsx("div", { ref: scrollRef, className: "flex-1 overflow-auto text-[11px] leading-4 divide-y divide-gray-200", children: rows.map((ev, idx) => (jsxRuntime.jsxs("div", { className: "opacity-85 odd:bg-gray-50 px-2 py-1", children: [jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [jsxRuntime.jsx("span", { className: "w-8 shrink-0 text-right text-gray-500 select-none", children: idx + 1 }), jsxRuntime.jsxs("span", { className: "text-gray-500", children: [new Date(ev.at).toLocaleTimeString(), " \u00B7 ", ev.source, ":", ev.type] })] }), jsxRuntime.jsx("pre", { className: "m-0 whitespace-pre-wrap ml-10", children: renderPayload(ev.payload) })] }, `${ev.at}:${idx}`))) })] }));
+}
+
+function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHideWorkbenchChange, toString, toElement, setInput, }) {
+    const { registry, def, selectedNodeId, selectedEdgeId, inputsMap, outputsMap, nodeStatus, validationByNode, validationByEdge, validationGlobal, valuesTick, } = useWorkbenchContext();
+    const nodeValidationIssues = validationByNode.issues;
+    const edgeValidationIssues = validationByEdge.issues;
+    const nodeValidationHandles = validationByNode;
+    const globalValidationIssues = validationGlobal;
+    const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
+    const selectedEdge = def.edges.find((e) => e.id === selectedEdgeId);
+    const selectedDesc = selectedNode
+        ? registry.nodes.get(selectedNode.typeId)
+        : undefined;
+    const inputHandles = Object.keys(selectedDesc?.inputs ?? {});
+    const outputHandles = Object.keys(selectedDesc?.outputs ?? {});
+    const nodeInputs = selectedNodeId ? inputsMap[selectedNodeId] ?? {} : {};
+    const nodeOutputs = selectedNodeId ? outputsMap[selectedNodeId] ?? {} : {};
+    const selectedNodeStatus = selectedNodeId
+        ? nodeStatus?.[selectedNodeId]
+        : undefined;
+    const selectedNodeValidation = selectedNodeId
+        ? nodeValidationIssues?.[selectedNodeId] ?? []
+        : [];
+    const selectedEdgeValidation = selectedEdge
+        ? edgeValidationIssues?.[selectedEdge.id] ?? []
+        : [];
+    const selectedNodeHandleValidation = selectedNodeId
+        ? {
+            inputs: nodeValidationHandles?.inputs?.[selectedNodeId] ?? [],
+            outputs: nodeValidationHandles?.outputs?.[selectedNodeId] ?? [],
+        }
+        : { inputs: [], outputs: [] };
+    // Local drafts and originals for commit-on-blur/enter behavior
+    const [drafts, setDrafts] = React.useState({});
+    const [originals, setOriginals] = React.useState({});
+    // Initialize drafts from current inputs whenever selection or valuesTick change,
+    // but do not clobber fields currently being edited (dirty drafts)
+    React.useEffect(() => {
+        const shallowEqual = (a, b) => {
+            const ak = Object.keys(a);
+            const bk = Object.keys(b);
+            if (ak.length !== bk.length)
+                return false;
+            for (const k of ak)
+                if (a[k] !== b[k])
+                    return false;
+            return true;
+        };
+        if (!selectedNodeId) {
+            if (Object.keys(drafts).length || Object.keys(originals).length) {
+                setDrafts({});
+                setOriginals({});
+            }
+            return;
+        }
+        const desc = selectedDesc;
+        const handles = Object.keys(desc?.inputs ?? {});
+        const nextDrafts = { ...drafts };
+        const nextOriginals = { ...originals };
+        for (const h of handles) {
+            const typeId = desc?.inputs?.[h];
+            const current = nodeInputs[h];
+            const display = toString(typeId, current);
+            const wasOriginal = originals[h];
+            const isDirty = drafts[h] !== undefined &&
+                wasOriginal !== undefined &&
+                drafts[h] !== wasOriginal;
+            if (!isDirty) {
+                nextDrafts[h] = display;
+                nextOriginals[h] = display;
+            }
         }
-        const runner = new sparkRemote.RemoteRunner(transport);
-        this.remote = {
-            runner,
-            transport,
-            valueCache: new Map(),
-            listenersBound: false,
+        if (!shallowEqual(drafts, nextDrafts))
+            setDrafts(nextDrafts);
+        if (!shallowEqual(originals, nextOriginals))
+            setOriginals(nextOriginals);
+    }, [selectedNodeId, selectedDesc, valuesTick]);
+    const widthClass = debug ? "w-[480px]" : "w-[320px]";
+    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedEdge.typeId] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
+                                        selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
+                                    const typeId = (selectedDesc?.inputs ?? {})[h];
+                                    const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
+                                        e.target.handle === h);
+                                    const commonProps = {
+                                        style: { flex: 1 },
+                                        disabled: isLinked,
+                                    };
+                                    const current = nodeInputs[h];
+                                    const value = drafts[h] ?? toString(typeId, current);
+                                    const onChangeText = (text) => setDrafts((d) => ({ ...d, [h]: text }));
+                                    const commit = () => {
+                                        const draft = drafts[h];
+                                        if (draft === undefined)
+                                            return;
+                                        setInput(h, draft);
+                                        setOriginals((o) => ({ ...o, [h]: draft }));
+                                    };
+                                    const revert = () => {
+                                        const orig = originals[h] ?? toString(typeId, current);
+                                        setDrafts((d) => ({ ...d, [h]: orig }));
+                                    };
+                                    const isEnum = typeId?.includes("enum:");
+                                    const inIssues = selectedNodeHandleValidation.inputs.filter((m) => m.handle === h);
+                                    const hasValidation = inIssues.length > 0;
+                                    const hasErr = inIssues.some((m) => m.level === "error");
+                                    const title = inIssues
+                                        .map((v) => `${v.code}: ${v.message}`)
+                                        .join("; ");
+                                    return (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsxs("label", { className: "w-28", children: [h, jsxRuntime.jsx("span", { className: "text-gray-500 ml-1 text-[11px]", children: selectedDesc?.inputs?.[h] })] }), hasValidation && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: title })), isEnum ? (jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: drafts[h] ?? toString(typeId, current), onChange: (e) => {
+                                                    const label = String(e.target.value);
+                                                    const byLabel = registry.enums
+                                                        .get(typeId)
+                                                        ?.labelToValue.get(label.toLowerCase());
+                                                    let raw = (byLabel !== undefined ? byLabel : Number(label));
+                                                    if (!Number.isFinite(raw))
+                                                        raw = undefined;
+                                                    setInput(h, raw);
+                                                    const display = toString(typeId, raw);
+                                                    setDrafts((d) => ({ ...d, [h]: display }));
+                                                    setOriginals((o) => ({ ...o, [h]: display }));
+                                                }, ...commonProps, children: [jsxRuntime.jsx("option", { value: "", children: "(select)" }), registry.enums.get(typeId)?.options.map((opt) => (jsxRuntime.jsx("option", { value: opt.label, children: opt.label }, opt.value)))] })) : (jsxRuntime.jsx("input", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", placeholder: isLinked ? "wired" : undefined, value: value, onChange: (e) => onChangeText(e.target.value), onBlur: commit, onKeyDown: (e) => {
+                                                    if (e.key === "Enter")
+                                                        commit();
+                                                    if (e.key === "Escape")
+                                                        revert();
+                                                }, ...commonProps }))] }, h));
+                                }))] }), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Outputs" }), outputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No outputs" })) : (outputHandles.map((h) => (jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mb-1", children: [jsxRuntime.jsx("label", { className: "w-20", children: h }), jsxRuntime.jsx("div", { className: "flex-1", children: toElement(selectedDesc?.outputs?.[h], nodeOutputs[h]) }), (() => {
+                                            const outIssues = selectedNodeHandleValidation.outputs.filter((m) => m.handle === h);
+                                            if (outIssues.length === 0)
+                                                return null;
+                                            const outErr = outIssues.some((m) => m.level === "error");
+                                            const outTitle = outIssues
+                                                .map((v) => `${v.code}: ${v.message}`)
+                                                .join("; ");
+                                            return (jsxRuntime.jsx(IssueBadge, { level: outErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: outTitle }));
+                                        })()] }, h))))] }), selectedNodeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedNodeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) }), debug && (jsxRuntime.jsx("div", { className: "mt-3 flex-none min-h-0 h-[50%]", children: jsxRuntime.jsx(DebugEvents, { autoScroll: !!autoScroll, hideWorkbench: !!hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange }) }))] }));
+}
+
+function toReactFlow(def, positions, registry, selectedNodeIds, selectedEdgeIds, opts) {
+    const nodeHandleMap = {};
+    const nodes = def.nodes.map((n) => {
+        const desc = registry.nodes.get(n.typeId);
+        const inputHandles = Object.entries(desc?.inputs ?? {}).map(([id, typeId]) => ({ id, typeId }));
+        const outputHandles = Object.entries(desc?.outputs ?? {}).map(([id, typeId]) => ({ id, typeId }));
+        nodeHandleMap[n.nodeId] = {
+            inputs: new Set(inputHandles.map((h) => h.id)),
+            outputs: new Set(outputHandles.map((h) => h.id)),
         };
-        return this.remote;
-    }
+        return {
+            id: n.nodeId,
+            data: {
+                typeId: n.typeId,
+                params: n.params,
+                inputHandles,
+                outputHandles,
+                showValues: opts?.showValues,
+                inputValues: opts?.inputs?.[n.nodeId],
+                outputValues: opts?.outputs?.[n.nodeId],
+                status: opts?.nodeStatus?.[n.nodeId],
+                validation: {
+                    inputs: opts?.nodeValidation?.inputs?.[n.nodeId] ?? [],
+                    outputs: opts?.nodeValidation?.outputs?.[n.nodeId] ?? [],
+                    issues: opts?.nodeValidation?.issues?.[n.nodeId] ?? [],
+                },
+                toString: opts?.toString,
+                toElement: opts?.toElement,
+            },
+            position: positions[n.nodeId] ?? { x: 0, y: 0 },
+            type: opts?.resolveNodeType?.(n.typeId) ?? "spark:default",
+            selected: selectedNodeIds ? selectedNodeIds.has(n.nodeId) : undefined,
+        };
+    });
+    const edges = def.edges
+        .filter((e) => {
+        const src = nodeHandleMap[e.source.nodeId];
+        const dst = nodeHandleMap[e.target.nodeId];
+        if (!src || !dst)
+            return false;
+        return (src.outputs.has(e.source.handle) && dst.inputs.has(e.target.handle));
+    })
+        .map((e) => {
+        const st = opts?.edgeStatus?.[e.id];
+        const isRunning = !!st?.running;
+        const hasError = !!st?.lastError;
+        const isInvalidEdge = !!opts?.edgeValidation?.[e.id];
+        const style = hasError || isInvalidEdge
+            ? { stroke: "#ef4444", strokeWidth: 2 }
+            : isRunning
+                ? { stroke: "#3b82f6" }
+                : undefined;
+        return {
+            id: e.id,
+            source: e.source.nodeId,
+            target: e.target.nodeId,
+            sourceHandle: e.source.handle,
+            targetHandle: e.target.handle,
+            selected: selectedEdgeIds ? selectedEdgeIds.has(e.id) : undefined,
+            animated: isRunning,
+            style,
+        };
+    });
+    return { nodes, edges };
+}
+
+const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
+    const { typeId, showValues, inputValues, outputValues, toString, toElement, } = data;
+    const inputEntries = data.inputHandles ?? [];
+    const outputEntries = data.outputHandles ?? [];
+    const status = data.status ?? {};
+    const validation = data.validation ?? {
+        inputs: [],
+        outputs: [],
+        issues: [],
+    };
+    const HEADER_SIZE = 24;
+    const ROW_SIZE = 22;
+    const maxRows = Math.max(inputEntries.length, outputEntries.length);
+    const minHeight = HEADER_SIZE + maxRows * ROW_SIZE;
+    const minWidth = data.showValues ? 320 : 160;
+    const topFor = (i) => HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2;
+    const hasError = !!status.lastError;
+    const isRunning = !!status.running;
+    const isInvalid = !!status.invalidated && !isRunning && !hasError;
+    const borderClasses = selected
+        ? "border-2 border-gray-900 dark:border-gray-100"
+        : hasError
+            ? "border-2 border-red-500"
+            : isRunning
+                ? "border-2 border-blue-500 ring-2 ring-blue-200 dark:ring-blue-900"
+                : isInvalid
+                    ? "border-2 border-amber-500 border-dashed"
+                    : "border border-gray-500 dark:border-gray-400";
+    const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
+    return (jsxRuntime.jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900 border-solid", borderClasses), style: { position: "relative", minHeight: minHeight, minWidth }, children: [jsxRuntime.jsxs("div", { className: "flex h-6 items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full leading-6 text-xs", children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [hasError && (jsxRuntime.jsx("span", { title: String(status.lastError?.message ?? status.lastError), children: jsxRuntime.jsx(react.XCircleIcon, { size: 12, weight: "fill", className: "text-red-500" }) })), validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
+                                    ? "error"
+                                    : "warning", size: 12, className: "w-3 h-3", title: validation.issues
+                                    .map((v) => `${v.code}: ${v.message}`)
+                                    .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), (isRunning || pct > 0) && (jsxRuntime.jsx("div", { className: "h-1 bg-blue-200 dark:bg-blue-900", children: jsxRuntime.jsx("div", { className: "h-1 bg-blue-500 transition-all", style: { width: `${pct}%` } }) })), inputEntries.map((entry, i) => {
+                const vIssues = validation.inputs.filter((v) => v.handle === entry.id);
+                const hasAny = vIssues.length > 0;
+                const hasErr = vIssues.some((v) => v.level === "error");
+                const title = vIssues
+                    .map((v) => `${v.code}: ${v.message}`)
+                    .join("; ");
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "target", position: ReactFlow.Position.Left, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { left: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute left-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8 }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues &&
+                                    (toElement ? (toElement(entry.typeId, inputValues?.[entry.id])) : toString ? (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: toString(entry.typeId, inputValues?.[entry.id]) })) : (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: String(inputValues?.[entry.id]) })))] })] }, `in-${entry.id}`));
+            }), outputEntries.map((entry, i) => {
+                const vIssues = validation.outputs.filter((v) => v.handle === entry.id);
+                const hasAny = vIssues.length > 0;
+                const hasErr = vIssues.some((v) => v.level === "error");
+                const title = vIssues
+                    .map((v) => `${v.code}: ${v.message}`)
+                    .join("; ");
+                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(ReactFlow.Handle, { id: entry.id, type: "source", position: ReactFlow.Position.Right, isConnectable: isConnectable, className: cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400 !rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500")), style: { right: -5, top: topFor(i) } }), jsxRuntime.jsxs("div", { className: "absolute right-2 text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", style: { top: topFor(i) - 8, textAlign: "right" }, title: `${entry.id}: ${entry.typeId}`, children: [entry.id, hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "ml-1", title: title })), showValues &&
+                                    (toElement ? (toElement(entry.typeId, outputValues?.[entry.id])) : toString ? (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: toString(entry.typeId, outputValues?.[entry.id]) })) : (jsxRuntime.jsx("span", { className: "ml-1 opacity-60", children: String(outputValues?.[entry.id]) })))] })] }, `out-${entry.id}`));
+            })] }));
+});
+DefaultNode.displayName = "DefaultNode";
+
+function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
+    const { registry } = useWorkbenchContext();
+    const rf = ReactFlow.useReactFlow();
+    if (!open || !clientPos)
+        return null;
+    const items = Array.from(registry.nodes.keys());
+    const handleClick = (typeId) => {
+        const p = rf.project({ x: clientPos.x, y: clientPos.y });
+        onAdd(typeId, p);
+        onClose();
+    };
+    return (jsxRuntime.jsxs("div", { className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700", style: { left: clientPos.x, top: clientPos.y }, onMouseLeave: onClose, children: [jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Add Node" }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: items.map((id) => (jsxRuntime.jsx("button", { onClick: () => handleClick(id), className: "block w-full text-left px-2 py-1 hover:bg-gray-100 cursor-pointer", children: id }, id))) })] }));
+}
+
+function WorkbenchCanvas({ showValues, toString, toElement, }) {
+    const { wb, registry, inputsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, } = useWorkbenchContext();
+    const ioValues = { inputs: inputsMap, outputs: outputsMap };
+    const nodeValidation = validationByNode;
+    const edgeValidation = validationByEdge.errors;
+    const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, onSelectionChange, } = useWorkbenchBridge(wb);
+    const { nodeTypes, resolveNodeType } = React.useMemo(() => {
+        // Build nodeTypes map using UI extension registry
+        const ui = wb.getUI();
+        const custom = new Map();
+        for (const typeId of Array.from(registry.nodes.keys())) {
+            const renderer = ui.getNodeRenderer(typeId);
+            if (renderer)
+                custom.set(typeId, renderer);
+        }
+        const types = { "spark:default": DefaultNode };
+        for (const [typeId, comp] of custom.entries()) {
+            types[`spark:${typeId}`] = comp;
+        }
+        const resolver = (nodeTypeId) => custom.has(nodeTypeId) ? `spark:${nodeTypeId}` : "spark:default";
+        return { nodeTypes: types, resolveNodeType: resolver };
+        // registry is stable; ui renderers expected to be set up before mount
+    }, [wb, registry]);
+    const { nodes, edges } = React.useMemo(() => {
+        const def = wb.export();
+        const sel = wb.getSelection();
+        return toReactFlow(def, wb.getPositions(), registry, new Set(sel.nodes), new Set(sel.edges), {
+            showValues,
+            inputs: ioValues.inputs,
+            outputs: ioValues.outputs,
+            resolveNodeType,
+            toString,
+            toElement,
+            nodeStatus,
+            edgeStatus,
+            nodeValidation,
+            edgeValidation,
+        });
+    }, [
+        showValues,
+        ioValues,
+        valuesTick,
+        toString,
+        toElement,
+        nodeStatus,
+        edgeStatus,
+        nodeValidation,
+        edgeValidation,
+    ]);
+    const [menuOpen, setMenuOpen] = React.useState(false);
+    const [menuPos, setMenuPos] = React.useState(null);
+    const onContextMenu = (e) => {
+        e.preventDefault();
+        setMenuPos({ x: e.clientX, y: e.clientY });
+        setMenuOpen(true);
+    };
+    const addNodeAt = (typeId, pos) => {
+        wb.addNode({ typeId, position: pos });
+    };
+    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsxs(ReactFlow, { nodes: nodes, edges: edges, nodeTypes: nodeTypes, selectionOnDrag: true, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onSelectionChange: onSelectionChange, deleteKeyCode: ["Backspace", "Delete"], fitView: true, children: [jsxRuntime.jsx(ReactFlow.Background, {}), jsxRuntime.jsx(ReactFlow.MiniMap, {}), jsxRuntime.jsx(ReactFlow.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: () => setMenuOpen(false) })] }) }));
 }
 
-function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, }) {
+function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, }) {
     const { wb, runner, registry, def, selectedNodeId, runAutoLayout } = useWorkbenchContext();
     const selectedNode = def.nodes.find((n) => n.nodeId === selectedNodeId);
     const selectedDesc = selectedNode
@@ -1653,7 +1654,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             runAutoLayout();
         }
     }, [wb, runAutoLayout]);
-    const setInput = React.useCallback((handle, raw) => {
+    const baseSetInput = React.useCallback((handle, raw) => {
         if (!selectedNodeId)
             return;
         // If selected input is wired (has inbound edge), ignore user input to respect runtime value
@@ -1734,7 +1735,17 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         }
         runner.setInput(selectedNodeId, handle, value);
     }, [selectedNodeId, def.edges, selectedDesc, runner]);
-    const toDisplay = React.useCallback((typeId, value) => {
+    const setInput = React.useMemo(() => {
+        if (overrides?.setInput) {
+            return overrides.setInput(baseSetInput, {
+                runner,
+                selectedNodeId,
+                registry,
+            });
+        }
+        return baseSetInput;
+    }, [overrides, baseSetInput, runner, selectedNodeId, registry]);
+    const baseToString = React.useCallback((typeId, value) => {
         if (value === undefined || value === null)
             return "";
         if (typeId && typeId.includes("enum:")) {
@@ -1766,6 +1777,21 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         }
         return String(value);
     }, [registry]);
+    const baseToElement = React.useCallback((typeId, value) => {
+        return jsxRuntime.jsx("span", { children: baseToString(typeId, value) });
+    }, [baseToString]);
+    const toString = React.useMemo(() => {
+        if (overrides?.toString)
+            return overrides.toString(baseToString, { registry });
+        return baseToString;
+    }, [overrides, baseToString, registry]);
+    // Optional: toElement (not currently consumed by core UI)
+    // Consumers can access it by passing through their own node renderers.
+    const toElement = React.useMemo(() => {
+        if (overrides?.toElement)
+            return overrides.toElement(baseToElement, { registry });
+        return baseToElement;
+    }, [overrides, baseToElement, registry]);
     return (jsxRuntime.jsxs("div", { className: "w-full h-screen flex flex-col", children: [jsxRuntime.jsxs("div", { className: "p-2 border-b border-gray-300 flex gap-2 items-center", children: [runner.isRunning() ? (jsxRuntime.jsxs("span", { className: "ml-2 text-sm text-green-700", children: ["Running: ", runner.getRunningEngine()] })) : (jsxRuntime.jsx("span", { className: "ml-2 text-sm text-gray-500", children: "Stopped" })), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Example:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: exampleState, onChange: (e) => applyExample(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
                             ? "Stop engine before switching example"
                             : undefined, children: [jsxRuntime.jsx("option", { value: "simple", children: "Simple" }), jsxRuntime.jsx("option", { value: "async", children: "Async Chain" }), jsxRuntime.jsx("option", { value: "progress", children: "Progress + Errors" }), jsxRuntime.jsx("option", { value: "validation", children: "Validation" })] }), jsxRuntime.jsx("label", { className: "ml-2 text-sm", children: "Backend:" }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1", value: backendKind, onChange: (e) => onBackendKindChange(e.target.value), disabled: runner.isRunning(), title: runner.isRunning()
@@ -1783,9 +1809,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                             catch (err) {
                                 alert(String(err?.message ?? err));
                             }
-                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { showValues: showValues, toDisplay: toDisplay }, exampleState) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toDisplay: toDisplay })] })] }));
+                        }, disabled: !engine, children: "Start" })), jsxRuntime.jsx("button", { onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { showValues: showValues, toString: toString, toElement: toElement }, exampleState) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement })] })] }));
 }
-function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, }) {
+function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, overrides, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());
     const [wb] = React.useState(() => new InMemoryWorkbench({ ui: new DefaultUIExtensionRegistry() }));
     const runner = React.useMemo(() => {
@@ -1796,35 +1822,36 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
                 : { kind: "local" };
         return new GraphRunner(registry, backend);
     }, [registry, backendKind, httpBaseUrl, wsUrl]);
+    // Allow external UI registration (e.g., node renderers) with access to wb
+    React.useEffect(() => {
+        const baseRegisterUI = (_wb) => { };
+        overrides?.registerUI?.(baseRegisterUI, { wb });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [wb, overrides]);
     return (jsxRuntime.jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, children: jsxRuntime.jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: (v) => {
                 if (runner.isRunning())
                     runner.dispose();
                 onBackendKindChange(v);
-            }, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange }) }));
-}
-
-function App() {
-    const [engine, setEngine] = useQueryParamString("engine", "");
-    const [example, setExample] = useQueryParamString("example", "simple");
-    const [debug, setDebug] = useQueryParamBoolean("debug", false);
-    const [showValues, setShowValues] = useQueryParamBoolean("values", false);
-    const [hideWorkbench, setHideWorkbench] = useQueryParamBoolean("hideWb", false);
-    const [autoScroll, setAutoScroll] = useQueryParamBoolean("autoScroll", true);
-    // Backend selection via URL params
-    const [backendKind, setBackendKind] = useQueryParamString("backend", "local");
-    const [httpBaseUrl, setHttpBaseUrl] = useQueryParamString("sparkHttp", "http://127.0.0.1:18080");
-    const [wsUrl, setWsUrl] = useQueryParamString("sparkWs", "ws://127.0.0.1:18081");
-    React.useEffect(() => {
-        document.getElementById("loading-screen")?.remove();
-    }, []);
-    return (jsxRuntime.jsx(WorkbenchStudio, { engine: engine, onEngineChange: setEngine, example: example, onExampleChange: setExample, backendKind: (backendKind || "local"), onBackendKindChange: (v) => setBackendKind(v), httpBaseUrl: httpBaseUrl || "http://127.0.0.1:18080", onHttpBaseUrlChange: setHttpBaseUrl, wsUrl: wsUrl || "ws://127.0.0.1:18081", onWsUrlChange: setWsUrl, debug: debug, onDebugChange: setDebug, showValues: showValues, onShowValuesChange: setShowValues, hideWorkbench: hideWorkbench, onHideWorkbenchChange: setHideWorkbench, autoScroll: autoScroll, onAutoScrollChange: setAutoScroll }));
+            }, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides }) }));
 }
 
 exports.AbstractWorkbench = AbstractWorkbench;
-exports.App = App;
 exports.CLIWorkbench = CLIWorkbench;
 exports.DefaultUIExtensionRegistry = DefaultUIExtensionRegistry;
+exports.GraphRunner = GraphRunner;
 exports.InMemoryWorkbench = InMemoryWorkbench;
+exports.Inspector = Inspector;
 exports.ReactFlowWorkbench = ReactFlowWorkbench;
+exports.WorkbenchCanvas = WorkbenchCanvas;
+exports.WorkbenchContext = WorkbenchContext;
+exports.WorkbenchProvider = WorkbenchProvider;
+exports.WorkbenchStudio = WorkbenchStudio;
 exports.toReactFlow = toReactFlow$1;
+exports.useQueryParamBoolean = useQueryParamBoolean;
+exports.useQueryParamString = useQueryParamString;
+exports.useWorkbenchBridge = useWorkbenchBridge;
+exports.useWorkbenchContext = useWorkbenchContext;
+exports.useWorkbenchGraphTick = useWorkbenchGraphTick;
+exports.useWorkbenchGraphUiTick = useWorkbenchGraphUiTick;
+exports.useWorkbenchVersionTick = useWorkbenchVersionTick;
 //# sourceMappingURL=index.cjs.map