@bian-womp/spark-workbench 0.2.53 → 0.2.55

package/lib/esm/index.js

@@ -1,80 +1,84 @@
-import { GraphBuilder, createEngine, StepEngine, PullEngine, BatchedEngine, isTypedOutput, getTypedOutputValue, getTypedOutputTypeId, isInputPrivate, getInputTypeId, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
+import { generateId, GraphBuilder, createEngine, StepEngine, PullEngine, BatchedEngine, isTypedOutput, getTypedOutputValue, getTypedOutputTypeId, isInputPrivate, getInputTypeId, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
 import { RuntimeApiClient } from '@bian-womp/spark-remote';
 import { Position, Handle, useUpdateNodeInternals, useReactFlow, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, MiniMap, Controls } from '@xyflow/react';
 import React, { useCallback, useState, useRef, useEffect, useMemo, createContext, useContext, useImperativeHandle } from 'react';
 import cx from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { XCircleIcon, WarningCircleIcon, CopyIcon, TrashIcon, XIcon, ArrowClockwiseIcon, ClockClockwiseIcon, StopIcon, PlayIcon, PlugsConnectedIcon, WifiHighIcon, WifiSlashIcon, PlayPauseIcon, LightningIcon, TreeStructureIcon, CornersOutIcon, DownloadSimpleIcon, DownloadIcon, UploadIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
+import { XCircleIcon, WarningCircleIcon, CopyIcon, TrashIcon, XIcon, ArrowClockwiseIcon, ClockClockwiseIcon, StopIcon, PlayIcon, PlugsConnectedIcon, WifiHighIcon, WifiSlashIcon, PlayPauseIcon, LightningIcon, TreeStructureIcon, CornersOutIcon, DownloadIcon, UploadIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
 import isEqual from 'lodash/isEqual';
 
 class DefaultUIExtensionRegistry {
     constructor() {
         this.nodeRenderers = new Map();
-        this.portRenderers = new Map();
-        this.edgeRenderers = new Map();
     }
     registerNodeRenderer(nodeTypeId, renderer) {
-        this.nodeRenderers.set(nodeTypeId, renderer);
+        if (renderer === undefined) {
+            this.nodeRenderers.delete(nodeTypeId);
+        }
+        else {
+            this.nodeRenderers.set(nodeTypeId, renderer);
+        }
         return this;
     }
     getNodeRenderer(nodeTypeId) {
         return this.nodeRenderers.get(nodeTypeId);
     }
-    registerPortRenderer(dataTypeId, renderer) {
-        this.portRenderers.set(dataTypeId, renderer);
-        return this;
-    }
-    getPortRenderer(dataTypeId) {
-        return this.portRenderers.get(dataTypeId);
+    getAllNodeRenderers() {
+        const result = {};
+        for (const [nodeTypeId, renderer] of this.nodeRenderers.entries()) {
+            result[nodeTypeId] = renderer;
+        }
+        return result;
     }
-    registerEdgeRenderer(typeId, renderer) {
-        this.edgeRenderers.set(typeId, renderer);
+    registerIconProvider(provider) {
+        this.iconProvider = provider;
         return this;
     }
-    getEdgeRenderer(typeId) {
-        return this.edgeRenderers.get(typeId);
+    getIconProvider() {
+        return this.iconProvider;
     }
-    setInspector(renderer) {
-        this.inspector = renderer;
+    // React Flow renderers
+    registerConnectionLineRenderer(renderer) {
+        this.connectionLineRenderer = renderer;
         return this;
     }
-    getInspector() {
-        return this.inspector;
+    getConnectionLineRenderer() {
+        return this.connectionLineRenderer;
     }
-    setPalette(renderer) {
-        this.palette = renderer;
+    registerMinimapRenderer(renderer) {
+        this.minimapRenderer = renderer;
         return this;
     }
-    getPalette() {
-        return this.palette;
+    getMinimapRenderer() {
+        return this.minimapRenderer;
     }
-    setToolbar(renderer) {
-        this.toolbar = renderer;
+    registerControlsRenderer(renderer) {
+        this.controlsRenderer = renderer;
         return this;
     }
-    getToolbar() {
-        return this.toolbar;
+    getControlsRenderer() {
+        return this.controlsRenderer;
     }
-    setContextMenu(renderer) {
-        this.contextMenu = renderer;
+    registerBackgroundRenderer(renderer) {
+        this.backgroundRenderer = renderer;
         return this;
     }
-    getContextMenu() {
-        return this.contextMenu;
+    getBackgroundRenderer() {
+        return this.backgroundRenderer;
     }
-    setMiniMap(renderer) {
-        this.miniMap = renderer;
+    registerDefaultContextMenuRenderer(renderer) {
+        this.defaultContextMenuRenderer = renderer;
         return this;
     }
-    getMiniMap() {
-        return this.miniMap;
+    getDefaultContextMenuRenderer() {
+        return this.defaultContextMenuRenderer;
     }
-    setIconProvider(provider) {
-        this.iconProvider = provider;
+    registerNodeContextMenuRenderer(renderer) {
+        this.nodeContextMenuRenderer = renderer;
         return this;
     }
-    getIconProvider() {
-        return this.iconProvider;
+    getNodeContextMenuRenderer() {
+        return this.nodeContextMenuRenderer;
     }
 }
 
@@ -84,6 +88,7 @@ class AbstractWorkbench {
         this.layout = args.layout;
         this.storage = args.storage;
         this.serializer = args.serializer;
+        this.genId = args.genId || generateId;
     }
     // Expose UI registry to adapters (React Flow, CLI) to allow overrides
     getUI() {
@@ -112,6 +117,13 @@ class InMemoryWorkbench extends AbstractWorkbench {
             const { positions } = await this.layout.layout(this.def);
             this.positions = positions;
         }
+        const defNodeIds = new Set(this.def.nodes.map((n) => n.nodeId));
+        const defEdgeIds = new Set(this.def.edges.map((e) => e.id));
+        const filteredPositions = Object.fromEntries(Object.entries(this.positions).filter(([id]) => defNodeIds.has(id)));
+        const filteredNodes = this.selection.nodes.filter((id) => defNodeIds.has(id));
+        const filteredEdges = this.selection.edges.filter((id) => defEdgeIds.has(id));
+        this.positions = filteredPositions;
+        this.selection = { nodes: filteredNodes, edges: filteredEdges };
         this.emit("graphChanged", { def: this.def });
         this.refreshValidation();
     }
@@ -155,11 +167,14 @@ class InMemoryWorkbench extends AbstractWorkbench {
         return { ok: issues.every((i) => i.level !== "error"), issues };
     }
     addNode(node) {
-        const id = node.nodeId ?? this.generateId("n");
+        const id = node.nodeId ??
+            this.genId("n", new Set(this.def.nodes.map((n) => n.nodeId)));
         this.def.nodes.push({
             nodeId: id,
             typeId: node.typeId,
             params: node.params,
+            initialInputs: node.initialInputs,
+            resolvedHandles: node.resolvedHandles,
         });
         if (node.position)
             this.positions[id] = node.position;
@@ -181,7 +196,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this.refreshValidation();
     }
     connect(edge) {
-        const id = edge.id ?? this.generateId("e");
+        const id = edge.id ?? this.genId("e", new Set(this.def.edges.map((e) => e.id)));
         this.def.edges.push({
             id,
             source: { ...edge.source },
@@ -228,29 +243,32 @@ class InMemoryWorkbench extends AbstractWorkbench {
         });
     }
     // Position and selection APIs for React Flow bridge
-    setPosition(nodeId, pos) {
+    setPosition(nodeId, pos, opts) {
         this.positions[nodeId] = pos;
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "moveNode", nodeId, pos },
+            commit: !!opts?.commit === true,
         });
     }
-    setPositions(map) {
+    setPositions(map, opts) {
         this.positions = { ...map };
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "moveNodes" },
+            commit: opts?.commit,
         });
     }
     getPositions() {
         return { ...this.positions };
     }
-    setSelection(sel) {
+    setSelection(sel, opts) {
         this.selection = { nodes: [...sel.nodes], edges: [...sel.edges] };
         this.emit("selectionChanged", this.selection);
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "selection" },
+            commit: opts?.commit,
         });
     }
     getSelection() {
@@ -259,21 +277,31 @@ class InMemoryWorkbench extends AbstractWorkbench {
             edges: [...this.selection.edges],
         };
     }
-    setViewport(viewport) {
+    setViewport(viewport, opts) {
         this.viewport = { ...viewport };
+        this.emit("graphUiChanged", {
+            def: this.def,
+            change: { type: "viewport" },
+            commit: opts?.commit,
+        });
     }
     getViewport() {
         return this.viewport ? { ...this.viewport } : null;
     }
     getUIState() {
+        const defNodeIds = new Set(this.def.nodes.map((n) => n.nodeId));
+        const defEdgeIds = new Set(this.def.edges.map((e) => e.id));
+        const filteredPositions = Object.fromEntries(Object.entries(this.positions).filter(([id]) => defNodeIds.has(id)));
+        const filteredNodes = this.selection.nodes.filter((id) => defNodeIds.has(id));
+        const filteredEdges = this.selection.edges.filter((id) => defEdgeIds.has(id));
         return {
-            positions: Object.keys(this.positions).length > 0
-                ? { ...this.positions }
+            positions: Object.keys(filteredPositions).length > 0
+                ? filteredPositions
                 : undefined,
-            selection: this.selection.nodes.length > 0 || this.selection.edges.length > 0
+            selection: filteredNodes.length > 0 || filteredEdges.length > 0
                 ? {
-                    nodes: [...this.selection.nodes],
-                    edges: [...this.selection.edges],
+                    nodes: filteredNodes,
+                    edges: filteredEdges,
                 }
                 : undefined,
             viewport: this.viewport ? { ...this.viewport } : undefined,
@@ -309,9 +337,6 @@ class InMemoryWorkbench extends AbstractWorkbench {
             for (const h of Array.from(set))
                 h(payload);
     }
-    generateId(prefix) {
-        return `${prefix}${Math.random().toString(36).slice(2, 8)}`;
-    }
 }
 
 class CLIWorkbench {
@@ -443,6 +468,18 @@ class AbstractGraphRunner {
             }
         }
     }
+    getInputDefaults(def) {
+        const out = {};
+        for (const n of def.nodes) {
+            const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
+            const graphDefaults = n.initialInputs ?? {};
+            const merged = { ...dynDefaults, ...graphDefaults };
+            if (Object.keys(merged).length > 0) {
+                out[n.nodeId] = merged;
+            }
+        }
+        return out;
+    }
     on(event, handler) {
         if (!this.listeners.has(event))
             this.listeners.set(event, new Set());
@@ -604,16 +641,6 @@ class LocalGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputDefaults(def) {
-        const out = {};
-        for (const n of def.nodes) {
-            const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
-            if (Object.keys(dynDefaults).length > 0) {
-                out[n.nodeId] = dynDefaults;
-            }
-        }
-        return out;
-    }
     async snapshotFull() {
         const def = undefined; // UI will supply def/positions on download for local
         const inputs = this.getInputs(this.runtime
@@ -641,11 +668,25 @@ class LocalGraphRunner extends AbstractGraphRunner {
         if (payload.def)
             this.build(payload.def);
         this.setEnvironment?.(payload.environment || {}, { merge: false });
-        // Hydrate via runtime for exact restore and re-emit
+        this.hydrateSnapshotFull(payload);
+    }
+    hydrateSnapshotFull(snapshot) {
+        // Hydrate via runtime for exact restore (this emits events on runtime emitter)
         this.runtime?.hydrate({
-            inputs: payload.inputs || {},
-            outputs: payload.outputs || {},
+            inputs: snapshot.inputs || {},
+            outputs: snapshot.outputs || {},
         });
+        // Also emit directly from runner to ensure UI gets events even if engine isn't running
+        for (const [nodeId, map] of Object.entries(snapshot.inputs || {})) {
+            for (const [handle, value] of Object.entries(map || {})) {
+                this.emit("value", { nodeId, handle, value, io: "input" });
+            }
+        }
+        for (const [nodeId, map] of Object.entries(snapshot.outputs || {})) {
+            for (const [handle, value] of Object.entries(map || {})) {
+                this.emit("value", { nodeId, handle, value, io: "output" });
+            }
+        }
     }
     dispose() {
         super.dispose();
@@ -840,10 +881,13 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             // Auto-fetch registry on first connection (only once)
             if (!this.registryFetched && !this.registryFetching) {
                 // Log loading state (UI can listen to transport status for loading indication)
-                console.info("Loading registry from remote...");
-                this.fetchRegistry(client).catch((err) => {
+                console.info("[RemoteGraphRunner] Loading registry from remote...");
+                this.fetchRegistry(client)
+                    .then(() => {
+                    console.info("[RemoteGraphRunner] Loaded registry from remote");
+                })
+                    .catch((err) => {
                     console.error("[RemoteGraphRunner] Failed to fetch registry:", err);
-                    // Error handling is done inside fetchRegistry, but we catch unhandled rejections
                 });
             }
             // Clear promise on success
@@ -1199,16 +1243,6 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputDefaults(def) {
-        const out = {};
-        for (const n of def.nodes) {
-            const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
-            if (Object.keys(dynDefaults).length > 0) {
-                out[n.nodeId] = dynDefaults;
-            }
-        }
-        return out;
-    }
     dispose() {
         // Idempotent: allow multiple calls safely
         if (this.disposed)
@@ -1477,10 +1511,10 @@ function useWorkbenchBridge(wb) {
         });
     }, [wb]);
     const onNodesChange = useCallback((changes) => {
-        // Apply position updates
+        // Apply position updates continuously, but mark commit only on drag end
         changes.forEach((c) => {
             if (c.type === "position" && c.position) {
-                wb.setPosition(c.id, c.position);
+                wb.setPosition(c.id, c.position, { commit: !c.dragging });
             }
         });
         // Derive next node selection from change set
@@ -1954,6 +1988,99 @@ function getHandleClassName(args) {
     return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
 }
 
+function generateTimestamp() {
+    const d = new Date();
+    const pad = (n) => String(n).padStart(2, "0");
+    return `${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
+}
+function downloadJSON(payload, filename) {
+    const pretty = JSON.stringify(payload, null, 2);
+    const blob = new Blob([pretty], { type: "application/json" });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+    URL.revokeObjectURL(url);
+}
+function isSnapshotPayload(parsed) {
+    return (parsed !== null &&
+        typeof parsed === "object" &&
+        ("def" in parsed ||
+            "inputs" in parsed ||
+            "outputs" in parsed ||
+            "environment" in parsed));
+}
+async function download(wb, runner) {
+    try {
+        const def = wb.export();
+        const uiState = wb.getUIState();
+        let snapshot;
+        if (runner.isRunning()) {
+            const fullSnapshot = await runner.snapshotFull();
+            snapshot = {
+                ...fullSnapshot,
+                def,
+                extData: {
+                    ...(fullSnapshot.extData || {}),
+                    ui: uiState,
+                },
+            };
+        }
+        else {
+            const inputs = runner.getInputs(def);
+            snapshot = {
+                def,
+                inputs,
+                outputs: {},
+                environment: {},
+                extData: { ui: uiState },
+            };
+        }
+        downloadJSON(snapshot, `spark-snapshot-${generateTimestamp()}.json`);
+    }
+    catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        throw new Error(`Failed to download snapshot: ${message}`);
+    }
+}
+async function upload(parsed, wb, runner) {
+    if (!isSnapshotPayload(parsed)) {
+        throw new Error("Invalid snapshot format - expected RuntimeSnapshotFull");
+    }
+    const def = parsed.def;
+    const environment = parsed.environment || {};
+    const inputs = parsed.inputs || {};
+    const outputs = parsed.outputs || {};
+    const extData = parsed.extData || {};
+    if (!def) {
+        throw new Error("Graph definition is empty");
+    }
+    await wb.load(def);
+    if (extData.ui && typeof extData.ui === "object") {
+        wb.setUIState(extData.ui);
+    }
+    if (runner.isRunning()) {
+        await runner.applySnapshotFull({
+            def,
+            environment,
+            inputs,
+            outputs,
+            extData,
+        });
+    }
+    else {
+        runner.build(wb.export());
+        if (inputs && typeof inputs === "object") {
+            for (const [nodeId, map] of Object.entries(inputs)) {
+                runner.setInputs(nodeId, map);
+            }
+        }
+    }
+}
+
 const WorkbenchContext = createContext(null);
 function useWorkbenchContext() {
     const ctx = useContext(WorkbenchContext);
@@ -2139,7 +2266,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             curX += maxWidth + H_GAP;
         }
-        wb.setPositions(pos);
+        wb.setPositions(pos, { commit: true });
     }, [wb, registry, overrides?.getDefaultNodeSize]);
     const updateEdgeType = useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
     const triggerExternal = useCallback((nodeId, event) => runner.triggerExternal(nodeId, event), [runner]);
@@ -3096,15 +3223,13 @@ function DefaultNodeContent({ data, isConnectable, }) {
                 } })] }));
 }
 
-function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
-    const { registry } = useWorkbenchContext();
+function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, }) {
     const rf = useReactFlow();
-    const ids = Array.from(registry.nodes.keys());
     const [query, setQuery] = useState("");
     const q = query.trim().toLowerCase();
     const filteredIds = q
-        ? ids.filter((id) => id.toLowerCase().includes(q))
-        : ids;
+        ? nodeIds.filter((id) => id.toLowerCase().includes(q))
+        : nodeIds;
     const root = { __children: {} };
     for (const id of filteredIds) {
         const parts = id.split(".");
@@ -3128,11 +3253,11 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
             if (!ref.current)
                 return;
             if (!ref.current.contains(e.target))
-                onClose();
+                handlers.onClose();
         };
         const onKey = (e) => {
             if (e.key === "Escape")
-                onClose();
+                handlers.onClose();
         };
         window.addEventListener("mousedown", onDown, true);
         window.addEventListener("keydown", onKey);
@@ -3140,7 +3265,7 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
             window.removeEventListener("mousedown", onDown, true);
             window.removeEventListener("keydown", onKey);
         };
-    }, [open, onClose]);
+    }, [open, handlers]);
     // Focus search input when menu opens
     const inputRef = useRef(null);
     useEffect(() => {
@@ -3159,8 +3284,8 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
     const handleClick = (typeId) => {
         // project() is deprecated; use screenToFlowPosition for screen coordinates
         const p = rf.screenToFlowPosition({ x: clientPos.x, y: clientPos.y });
-        onAdd(typeId, p);
-        onClose();
+        handlers.onAddNode(typeId, { position: p });
+        handlers.onClose();
     };
     const renderTree = (tree, path = []) => {
         const entries = Object.entries(tree?.__children ?? {}).sort((a, b) => a[0].localeCompare(b[0]));
@@ -3182,8 +3307,7 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
         }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node", " ", jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsx("div", { className: "px-2 pb-1", children: jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 px-2 py-1 text-sm outline-none focus:border-gray-400", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? (renderTree(root)) : (jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" })) })] }));
 }
 
-function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
-    const { wb, runner, engineKind, registry, outputsMap, outputTypesMap } = useWorkbenchContext();
+function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeableOutputs, }) {
     const ref = useRef(null);
     // outside click + ESC
     useEffect(() => {
@@ -3193,11 +3317,11 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
             if (!ref.current)
                 return;
             if (!ref.current.contains(e.target))
-                onClose();
+                handlers.onClose();
         };
         const onKey = (e) => {
             if (e.key === "Escape")
-                onClose();
+                handlers.onClose();
         };
         window.addEventListener("mousedown", onDown, true);
         window.addEventListener("keydown", onKey);
@@ -3205,48 +3329,26 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
             window.removeEventListener("mousedown", onDown, true);
             window.removeEventListener("keydown", onKey);
         };
-    }, [open, onClose]);
+    }, [open, handlers]);
     useEffect(() => {
         if (open)
             ref.current?.focus();
     }, [open]);
-    // Bake helpers
-    const getBakeableOutputs = () => {
-        try {
-            const def = wb.export();
-            const node = def.nodes.find((n) => n.nodeId === nodeId);
-            if (!node)
-                return [];
-            const desc = registry.nodes.get(node.typeId);
-            const handles = Object.keys(desc?.outputs || {});
-            const out = [];
-            for (const h of handles) {
-                const tId = outputTypesMap?.[nodeId]?.[h];
-                if (!tId)
-                    continue;
-                if (tId.endsWith("[]")) {
-                    const base = tId.slice(0, -2);
-                    const tArr = registry.types.get(tId);
-                    const tElem = registry.types.get(base);
-                    const arrT = tArr?.bakeTarget;
-                    const elemT = tElem?.bakeTarget;
-                    if ((arrT && registry.nodes.has(arrT.nodeTypeId)) ||
-                        (elemT && registry.nodes.has(elemT.nodeTypeId)))
-                        out.push(h);
-                }
-                else {
-                    const t = registry.types.get(tId);
-                    const bt = t?.bakeTarget;
-                    if (bt && registry.nodes.has(bt.nodeTypeId))
-                        out.push(h);
-                }
-            }
-            return out;
-        }
-        catch {
-            return [];
-        }
-    };
+    if (!open || !clientPos || !nodeId)
+        return null;
+    // clamp
+    const MENU_MIN_WIDTH = 180;
+    const PADDING = 16;
+    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
+        (MENU_MIN_WIDTH + PADDING));
+    const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
+    return (jsxs("div", { ref: ref, tabIndex: -1, 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: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDelete, children: "Delete" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDuplicate, children: "Duplicate" }), canRunPull && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunPull, children: "Run (pull)" })), jsx("div", { className: "h-px bg-gray-200 my-1" }), bakeableOutputs.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h))), jsx("div", { className: "h-px bg-gray-200 my-1" })] })), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" })] }));
+}
+
+function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap, outputTypesMap, onClose) {
     const doBake = async (handleId) => {
         try {
             const typeId = outputTypesMap?.[nodeId]?.[handleId];
@@ -3279,7 +3381,6 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
                 const newId = wb.addNode({
                     typeId: singleTarget.nodeTypeId,
                     position: { x: pos.x + 180, y: pos.y },
-                    params: {},
                 });
                 runner.update(wb.export());
                 await runner.whenIdle();
@@ -3290,12 +3391,9 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
                 const nodeDesc = registry.nodes.get(arrTarget.nodeTypeId);
                 const inType = getInputTypeId(nodeDesc?.inputs, arrTarget.inputHandle);
                 const coerced = await coerceIfNeeded(typeId, inType, unwrap(raw));
-                const newId = `n${Math.random().toString(36).slice(2, 8)}`;
-                wb.addNode({
-                    nodeId: newId,
+                const newId = wb.addNode({
                     typeId: arrTarget.nodeTypeId,
                     position: { x: pos.x + 180, y: pos.y },
-                    params: {},
                 });
                 runner.update(wb.export());
                 await runner.whenIdle();
@@ -3313,14 +3411,11 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
                 const DY = 160;
                 const nodeIds = [];
                 for (let idx = 0; idx < coercedItems.length; idx++) {
-                    const cv = coercedItems[idx];
                     const col = idx % COLS;
                     const row = Math.floor(idx / COLS);
                     const newId = wb.addNode({
                         typeId: elemTarget.nodeTypeId,
                         position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
-                        params: {},
-                        initialInputs: { [elemTarget.inputHandle]: structuredClone(cv) },
                     });
                     nodeIds.push(newId);
                 }
@@ -3338,63 +3433,88 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
         }
         catch { }
     };
-    // actions
-    const handleDelete = useCallback(() => {
-        wb.removeNode(nodeId);
-        onClose();
-    }, [nodeId, wb, onClose]);
-    const handleDuplicate = useCallback(() => {
+    return {
+        onDelete: () => {
+            wb.removeNode(nodeId);
+            onClose();
+        },
+        onDuplicate: async () => {
+            const def = wb.export();
+            const n = def.nodes.find((n) => n.nodeId === nodeId);
+            if (!n)
+                return onClose();
+            const pos = wb.getPositions?.()[nodeId] || { x: 0, y: 0 };
+            const newId = wb.addNode({
+                typeId: n.typeId,
+                params: n.params,
+                position: { x: pos.x + 24, y: pos.y + 24 },
+                initialInputs: n.initialInputs,
+                resolvedHandles: n.resolvedHandles,
+            });
+            await runner.whenIdle();
+            runner.setInputs(newId, { ...runner.getInputs(def)[nodeId] });
+            onClose();
+        },
+        onRunPull: async () => {
+            try {
+                await runner.computeNode(nodeId);
+            }
+            catch { }
+            onClose();
+        },
+        onBake: async (handleId) => {
+            await doBake(handleId);
+            onClose();
+        },
+        onCopyId: async () => {
+            try {
+                await navigator.clipboard.writeText(nodeId);
+            }
+            catch { }
+            onClose();
+        },
+        onClose,
+    };
+}
+function getBakeableOutputs(nodeId, wb, registry, outputTypesMap) {
+    try {
         const def = wb.export();
-        const n = def.nodes.find((n) => n.nodeId === nodeId);
-        if (!n)
-            return onClose();
-        const pos = wb.getPositions?.()[nodeId] || { x: 0, y: 0 };
-        wb.addNode({
-            typeId: n.typeId,
-            params: n.params,
-            position: { x: pos.x + 24, y: pos.y + 24 },
-        });
-        onClose();
-    }, [nodeId, wb, onClose]);
-    useCallback(async (handleId) => {
-        await doBake(handleId);
-        onClose();
-    }, [doBake, onClose]);
-    const handleCopyId = useCallback(async () => {
-        try {
-            await navigator.clipboard.writeText(nodeId);
-        }
-        catch { }
-        onClose();
-    }, [nodeId, onClose]);
-    const handleRunPull = useCallback(async () => {
-        try {
-            await runner.computeNode(nodeId);
+        const node = def.nodes.find((n) => n.nodeId === nodeId);
+        if (!node)
+            return [];
+        const desc = registry.nodes.get(node.typeId);
+        const handles = Object.keys(desc?.outputs || {});
+        const out = [];
+        for (const h of handles) {
+            const tId = outputTypesMap?.[nodeId]?.[h];
+            if (!tId)
+                continue;
+            if (tId.endsWith("[]")) {
+                const base = tId.slice(0, -2);
+                const tArr = registry.types.get(tId);
+                const tElem = registry.types.get(base);
+                const arrT = tArr?.bakeTarget;
+                const elemT = tElem?.bakeTarget;
+                if ((arrT && registry.nodes.has(arrT.nodeTypeId)) ||
+                    (elemT && registry.nodes.has(elemT.nodeTypeId)))
+                    out.push(h);
+            }
+            else {
+                const t = registry.types.get(tId);
+                const bt = t?.bakeTarget;
+                if (bt && registry.nodes.has(bt.nodeTypeId))
+                    out.push(h);
+            }
         }
-        catch { }
-        onClose();
-    }, [nodeId, runner, onClose]);
-    if (!open || !clientPos || !nodeId)
-        return null;
-    // clamp
-    const MENU_MIN_WIDTH = 180;
-    const PADDING = 16;
-    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
-        (MENU_MIN_WIDTH + PADDING));
-    const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
-    const canRunPull = engineKind()?.toString() === "pull";
-    const outs = getBakeableOutputs();
-    return (jsxs("div", { ref: ref, tabIndex: -1, 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: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDelete, children: "Delete" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDuplicate, children: "Duplicate" }), canRunPull && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleRunPull, children: "Run (pull)" })), jsx("div", { className: "h-px bg-gray-200 my-1" }), outs.length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), outs.map((h) => (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: async () => {
-                            await doBake(h);
-                            onClose();
-                        }, children: ["Bake: ", h] }, h))), jsx("div", { className: "h-px bg-gray-200 my-1" })] })), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleCopyId, children: "Copy Node ID" })] }));
+        return out;
+    }
+    catch {
+        return [];
+    }
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
-    const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, } = useWorkbenchContext();
+    const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, runner, engineKind, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
     // Keep stable references for nodes/edges to avoid unnecessary updates
@@ -3461,9 +3581,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         },
     }));
     const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, } = useWorkbenchBridge(wb);
+    const ui = wb.getUI();
     const { nodeTypes, resolveNodeType } = useMemo(() => {
         // Build nodeTypes map using UI extension registry
-        const ui = wb.getUI();
         const custom = new Map(); // Include all types present in registry AND current graph to avoid timing issues
         const def = wb.export();
         const ids = new Set([
@@ -3485,7 +3605,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         const resolver = (nodeTypeId) => custom.has(nodeTypeId) ? `spark-${nodeTypeId}` : "spark-default";
         return { nodeTypes: types, resolveNodeType: resolver };
         // Include uiVersion to recompute when custom renderers are registered
-    }, [wb, registry, uiVersion]);
+    }, [wb, registry, uiVersion, ui]);
     const { nodes, edges } = useMemo(() => {
         const def = wb.export();
         const sel = wb.getSelection();
@@ -3649,19 +3769,63 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             setNodeMenuOpen(false);
         }
     };
-    const addNodeAt = useCallback((typeId, pos) => {
-        wb.addNode({ typeId, position: pos });
-    }, [wb]);
+    const addNodeAt = useCallback(async (typeId, opts) => {
+        const nodeId = wb.addNode({
+            typeId,
+            initialInputs: opts.initialInputs,
+            position: opts.position,
+        });
+        if (opts.inputs) {
+            runner.update(wb.export());
+            await runner.whenIdle();
+            runner.setInputs(nodeId, opts.inputs);
+        }
+    }, [wb, runner]);
     const onCloseMenu = useCallback(() => {
         setMenuOpen(false);
     }, []);
     const onCloseNodeMenu = useCallback(() => {
         setNodeMenuOpen(false);
     }, []);
+    const nodeIds = useMemo(() => Array.from(registry.nodes.keys()), [registry]);
+    const defaultContextMenuHandlers = useMemo(() => ({
+        onAddNode: addNodeAt,
+        onClose: onCloseMenu,
+    }), [addNodeAt, onCloseMenu]);
+    const nodeContextMenuHandlers = useMemo(() => {
+        if (!nodeAtMenu)
+            return null;
+        return createNodeContextMenuHandlers(nodeAtMenu, wb, runner, registry, outputsMap, outputTypesMap, onCloseNodeMenu);
+    }, [
+        nodeAtMenu,
+        wb,
+        runner,
+        registry,
+        outputsMap,
+        outputTypesMap,
+        onCloseNodeMenu,
+    ]);
+    const canRunPull = useMemo(() => engineKind()?.toString() === "pull", [engineKind]);
+    const bakeableOutputs = useMemo(() => {
+        if (!nodeAtMenu)
+            return [];
+        return getBakeableOutputs(nodeAtMenu, wb, registry, outputTypesMap);
+    }, [nodeAtMenu, wb, registry, outputTypesMap]);
+    // Get custom renderers from UI extension registry (reactive to uiVersion changes)
+    const { BackgroundRenderer, MinimapRenderer, ControlsRenderer, DefaultContextMenuRenderer, NodeContextMenuRenderer, connectionLineRenderer, } = useMemo(() => {
+        return {
+            BackgroundRenderer: ui.getBackgroundRenderer(),
+            MinimapRenderer: ui.getMinimapRenderer(),
+            ControlsRenderer: ui.getControlsRenderer(),
+            DefaultContextMenuRenderer: ui.getDefaultContextMenuRenderer(),
+            NodeContextMenuRenderer: ui.getNodeContextMenuRenderer(),
+            connectionLineRenderer: ui.getConnectionLineRenderer(),
+        };
+    }, [ui, uiVersion]);
     const onMoveEnd = useCallback(() => {
         if (rfInstanceRef.current) {
             const viewport = rfInstanceRef.current.getViewport();
-            wb.setViewport({ x: viewport.x, y: viewport.y, zoom: viewport.zoom });
+            wb.setViewport({ x: viewport.x, y: viewport.y, zoom: viewport.zoom }, { commit: true });
         }
     }, [wb]);
     const viewportRef = useRef(null);
@@ -3682,7 +3846,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             });
         }
     });
-    return (jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsx(ReactFlowProvider, { children: jsxs(ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, selectionOnDrag: true, onInit: (inst) => {
+    return (jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsx(ReactFlowProvider, { children: jsxs(ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
                     rfInstanceRef.current = inst;
                     const savedViewport = wb.getViewport();
                     if (savedViewport) {
@@ -3693,7 +3857,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                             zoom: savedViewport.zoom,
                         });
                     }
-                }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 }), jsx(MiniMap, {}), jsx(Controls, {}), jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: onCloseMenu }), !!nodeAtMenu && (jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: onCloseNodeMenu }))] }) }) }));
+                }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [BackgroundRenderer ? (jsx(BackgroundRenderer, {})) : (jsx(Background, { id: "workbench-canvas-background", variant: BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsx(MinimapRenderer, {}) : jsx(MiniMap, {}), ControlsRenderer ? jsx(ControlsRenderer, {}) : jsx(Controls, {}), DefaultContextMenuRenderer ? (jsx(DefaultContextMenuRenderer, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds })) : (jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds })), !!nodeAtMenu &&
+                        nodeContextMenuHandlers &&
+                        (NodeContextMenuRenderer ? (jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs })) : (jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs })))] }) }) }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
@@ -3828,9 +3994,20 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             }
             catch { }
         });
+        const off3 = wb.on("graphUiChanged", (evt) => {
+            if (!evt.commit)
+                return;
+            try {
+                const cur = wb.export();
+                const inputs = runner.getInputs(cur);
+                onChange({ def: cur, inputs });
+            }
+            catch { }
+        });
         return () => {
             off1();
             off2();
+            off3();
         };
     }, [wb, runner, onChange]);
     const applyExample = useCallback(async (key) => {
@@ -3866,24 +4043,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         setRegistry,
         backendKind,
     ]);
-    const downloadGraph = useCallback(() => {
+    const download$1 = useCallback(async () => {
         try {
-            const def = wb.export();
-            const inputs = runner.getInputs(def);
-            const payload = { def, inputs };
-            const pretty = JSON.stringify(payload, null, 2);
-            const blob = new Blob([pretty], { type: "application/json" });
-            const url = URL.createObjectURL(blob);
-            const a = document.createElement("a");
-            const d = new Date();
-            const pad = (n) => String(n).padStart(2, "0");
-            const ts = `${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
-            a.href = url;
-            a.download = `spark-graph-${ts}.json`;
-            document.body.appendChild(a);
-            a.click();
-            a.remove();
-            URL.revokeObjectURL(url);
+            await download(wb, runner);
         }
         catch (err) {
             const message = err instanceof Error ? err.message : String(err);
@@ -3897,51 +4059,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                 return;
             const text = await file.text();
             const parsed = JSON.parse(text);
-            // Support both Graph and Snapshot payloads
-            const isSnapshot = parsed &&
-                typeof parsed === "object" &&
-                (parsed.def || parsed.inputs || parsed.outputs || parsed.environment);
-            if (isSnapshot) {
-                const def = parsed.def;
-                const positions = parsed.positions || {};
-                const environment = parsed.environment || {};
-                const inputs = parsed.inputs || {};
-                if (def && runner.isRunning()) {
-                    // Remote exact restore path
-                    await runner.applySnapshotFull({
-                        def,
-                        environment,
-                        inputs,
-                        outputs: parsed.outputs || {},
-                    });
-                    await wb.load(def);
-                    if (positions && typeof positions === "object")
-                        wb.setPositions(positions);
-                }
-                else if (!runner.isRunning()) {
-                    alert("Engine is not running");
-                }
-                else {
-                    alert("Graph definition is empty");
-                }
-            }
-            else {
-                const def = parsed?.def ?? parsed;
-                const inputs = parsed?.inputs ?? {};
-                await wb.load(def);
-                try {
-                    runner.build(wb.export());
-                }
-                catch { }
-                if (inputs && typeof inputs === "object") {
-                    for (const [nodeId, map] of Object.entries(inputs)) {
-                        try {
-                            runner.setInputs(nodeId, map);
-                        }
-                        catch { }
-                    }
-                }
-            }
+            await upload(parsed, wb, runner);
         }
         catch (err) {
             const message = err instanceof Error ? err.message : String(err);
@@ -4197,36 +4315,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 // Normal change when not running
                                 onEngineChange?.(kind);
                             }
-                        }, children: [jsx("option", { value: "", children: "Select Engine\u2026" }), jsx("option", { value: "push", children: "Push" }), jsx("option", { value: "batched", children: "Batched" }), jsx("option", { value: "pull", children: "Pull" }), jsx("option", { value: "hybrid", children: "Hybrid" }), jsx("option", { value: "step", children: "Step" })] }), engineKind === "step" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !isGraphRunning, title: "Step", children: jsx(PlayPauseIcon, { size: 24 }) })), engineKind === "batched" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !isGraphRunning, title: "Flush", children: jsx(LightningIcon, { size: 24 }) })), renderStartStopButton(), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsx(TreeStructureIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsx(CornersOutIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: downloadGraph, children: jsx(DownloadSimpleIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
-                            try {
-                                const def = wb.export();
-                                const positions = wb.getPositions();
-                                const snapshot = await runner.snapshotFull();
-                                const payload = {
-                                    ...snapshot,
-                                    def,
-                                    positions,
-                                    schemaVersion: 1,
-                                };
-                                const pretty = JSON.stringify(payload, null, 2);
-                                const blob = new Blob([pretty], { type: "application/json" });
-                                const url = URL.createObjectURL(blob);
-                                const a = document.createElement("a");
-                                const d = new Date();
-                                const pad = (n) => String(n).padStart(2, "0");
-                                const ts = `${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
-                                a.href = url;
-                                a.download = `spark-snapshot-${ts}.json`;
-                                document.body.appendChild(a);
-                                a.click();
-                                a.remove();
-                                URL.revokeObjectURL(url);
-                            }
-                            catch (err) {
-                                const message = err instanceof Error ? err.message : String(err);
-                                alert(message);
-                            }
-                        }, children: jsx(DownloadIcon, { size: 24 }) }), jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsx(UploadIcon, { size: 24 }) }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
+                        }, children: [jsx("option", { value: "", children: "Select Engine\u2026" }), jsx("option", { value: "push", children: "Push" }), jsx("option", { value: "batched", children: "Batched" }), jsx("option", { value: "pull", children: "Pull" }), jsx("option", { value: "hybrid", children: "Hybrid" }), jsx("option", { value: "step", children: "Step" })] }), engineKind === "step" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.step(), disabled: !isGraphRunning, title: "Step", children: jsx(PlayPauseIcon, { size: 24 }) })), engineKind === "batched" && (jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => runner.flush(), disabled: !isGraphRunning, title: "Flush", children: jsx(LightningIcon, { size: 24 }) })), renderStartStopButton(), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsx(TreeStructureIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsx(CornersOutIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsx(DownloadIcon, { size: 24 }) }), jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsx(UploadIcon, { size: 24 }) }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, backendOptions, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = useState(createSimpleGraphRegistry());
@@ -4301,5 +4390,5 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
     return (jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, uiVersion: uiVersion, children: jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: onBackendKindChangeWithDispose, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides, onInit: onInit, onChange: onChange }) }));
 }
 
-export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, computeEffectiveHandles, countVisibleHandles, estimateNodeSize, formatDataUrlAsLabel, formatDeclaredTypeSignature, getHandleClassName, getNodeBorderClassNames, layoutNode, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
+export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, computeEffectiveHandles, countVisibleHandles, download, estimateNodeSize, formatDataUrlAsLabel, formatDeclaredTypeSignature, getHandleClassName, getNodeBorderClassNames, layoutNode, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, upload, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
 //# sourceMappingURL=index.js.map