@bian-womp/spark-workbench 0.3.2 → 0.3.4

package/lib/cjs/index.cjs

@@ -146,6 +146,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
             edges: [],
         };
         this.nodeNames = {};
+        this.customData = {};
         this.runtimeState = null;
         this.viewport = null;
         this.historyState = undefined;
@@ -174,6 +175,17 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const filteredSizes = Object.fromEntries(Object.entries(this.sizes).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));
+        // Clean up extData for removed nodes/edges
+        if (this.customData.nodes) {
+            const filteredExtNodes = Object.fromEntries(Object.entries(this.customData.nodes).filter(([id]) => defNodeIds.has(id)));
+            this.customData.nodes =
+                Object.keys(filteredExtNodes).length > 0 ? filteredExtNodes : undefined;
+        }
+        if (this.customData.edges) {
+            const filteredExtEdges = Object.fromEntries(Object.entries(this.customData.edges).filter(([id]) => defEdgeIds.has(id)));
+            this.customData.edges =
+                Object.keys(filteredExtEdges).length > 0 ? filteredExtEdges : undefined;
+        }
         this.positions = filteredPositions;
         this.sizes = filteredSizes;
         this.selection = { nodes: filteredNodes, edges: filteredEdges };
@@ -851,6 +863,107 @@ class InMemoryWorkbench extends AbstractWorkbench {
             ...options,
         });
     }
+    /**
+     * Get custom data for a specific node.
+     */
+    getCustomNodeData(nodeId) {
+        return this.customData.nodes?.[nodeId];
+    }
+    /**
+     * Set custom data for a specific node.
+     */
+    setCustomNodeData(nodeId, data, options) {
+        if (!this.customData.nodes) {
+            this.customData.nodes = {};
+        }
+        if (data === undefined) {
+            delete this.customData.nodes[nodeId];
+            if (Object.keys(this.customData.nodes).length === 0) {
+                delete this.customData.nodes;
+            }
+        }
+        else {
+            this.customData.nodes[nodeId] = data;
+        }
+        this.emit("graphUiChanged", {
+            change: { type: "customNodeData", nodeId, data },
+            ...options,
+        });
+    }
+    /**
+     * Get custom data for a specific edge.
+     */
+    getCustomEdgeData(edgeId) {
+        return this.customData.edges?.[edgeId];
+    }
+    /**
+     * Set custom data for a specific edge.
+     */
+    setCustomEdgeData(edgeId, data, options) {
+        if (!this.customData.edges) {
+            this.customData.edges = {};
+        }
+        if (data === undefined) {
+            delete this.customData.edges[edgeId];
+            if (Object.keys(this.customData.edges).length === 0) {
+                delete this.customData.edges;
+            }
+        }
+        else {
+            this.customData.edges[edgeId] = data;
+        }
+        this.emit("graphUiChanged", {
+            change: { type: "customEdgeData", edgeId, data },
+            ...options,
+        });
+    }
+    /**
+     * Get custom metadata.
+     */
+    getCustomMetaData() {
+        return this.customData.meta;
+    }
+    /**
+     * Set custom metadata.
+     */
+    setCustomMetaData(meta, options) {
+        if (meta === undefined) {
+            delete this.customData.meta;
+        }
+        else {
+            this.customData.meta = meta;
+        }
+        this.emit("graphUiChanged", {
+            change: { type: "customMetaData", meta },
+            ...options,
+        });
+    }
+    /**
+     * Get all custom data.
+     */
+    getCustomData() {
+        return { ...this.customData };
+    }
+    /**
+     * Set all custom data.
+     */
+    setCustomData(custom, options) {
+        if (custom === undefined) {
+            this.customData = {};
+        }
+        else {
+            this.customData = lod.pick(custom, ["nodes", "edges", "meta"]);
+        }
+        this.emit("graphUiChanged", {
+            change: {
+                type: "customData",
+                nodes: custom?.nodes,
+                edges: custom?.edges,
+                meta: custom?.meta,
+            },
+            ...options,
+        });
+    }
 }
 
 class CLIWorkbench {
@@ -911,36 +1024,14 @@ class AbstractGraphRunner {
         this.stagedInputs = {};
         this.runnerId = "";
     }
-    launch(def, opts) {
-        // Auto-stop if engine is already running
-        if (this.engine) {
-            this.stop();
-        }
-    }
     async whenIdle() {
         await this.engine?.whenIdle();
     }
-    stop() {
-        if (!this.engine)
-            return;
-        // Dispose engine (cleans up timers, listeners, etc.)
-        this.engine.dispose();
-        this.engine = undefined;
-        // Emit status but keep runtime alive
-        if (this.runMode) {
-            this.runMode = undefined;
-            this.emit("status", { running: false, runMode: undefined });
-        }
-    }
     setRunMode(runMode) {
-        if (!this.engine) {
-            throw new Error("Cannot set run mode: engine not running");
+        if (this.engine) {
+            this.engine.setRunMode(runMode);
+            this.emit("status", { running: true, runMode });
         }
-        // Update engine run mode (this will update pause/resume state)
-        this.engine.setRunMode(runMode);
-        // Update local state and emit status event
-        this.runMode = runMode;
-        this.emit("status", { running: true, runMode: this.runMode });
     }
     getInputDefaults(def) {
         const out = {};
@@ -970,17 +1061,10 @@ class AbstractGraphRunner {
         this.engine = undefined;
         this.runtime?.dispose();
         this.runtime = undefined;
-        if (this.runMode) {
-            this.runMode = undefined;
-            this.emit("status", { running: false, runMode: undefined });
-        }
     }
     isRunning() {
         return !!this.engine;
     }
-    getRunMode() {
-        return this.runMode;
-    }
     // Optional undo/redo support
     async undo() {
         return false;
@@ -999,6 +1083,7 @@ let localRunnerCounter = 0;
 class LocalGraphRunner extends AbstractGraphRunner {
     constructor(registry) {
         super(registry, { kind: "local" });
+        this.extData = {};
         this.setEnvironment = (env, opts) => {
             if (!this.runtime)
                 return;
@@ -1047,7 +1132,10 @@ class LocalGraphRunner extends AbstractGraphRunner {
         }
     }
     launch(def, opts) {
-        super.launch(def, opts);
+        if (this.engine) {
+            this.engine.dispose();
+            this.engine = undefined;
+        }
         this.build(def);
         if (!this.runtime)
             throw new Error("Runtime not built");
@@ -1074,8 +1162,8 @@ class LocalGraphRunner extends AbstractGraphRunner {
         this.engine.on("invalidate", (e) => this.emit("invalidate", e));
         this.engine.on("stats", (e) => this.emit("stats", e));
         this.engine.launch(opts?.invalidate);
-        this.runMode = opts?.runMode ?? "manual";
-        this.emit("status", { running: true, runMode: this.runMode });
+        const runMode = opts?.runMode ?? "manual";
+        this.emit("status", { running: true, runMode });
         for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
             this.engine.setInputs(nodeId, map);
         }
@@ -1169,6 +1257,24 @@ class LocalGraphRunner extends AbstractGraphRunner {
             this.engine.copyOutputs(fromNodeId, toNodeId, options);
         }
     }
+    async setExtData(data) {
+        if (!data || typeof data !== "object") {
+            this.extData = {};
+            return;
+        }
+        this.extData = { ...this.extData, ...data };
+    }
+    async updateExtData(updates) {
+        if (!this.extData ||
+            typeof this.extData !== "object" ||
+            Array.isArray(this.extData)) {
+            this.extData = {};
+        }
+        for (const { path, value } of updates) {
+            const pathSegments = sparkGraph.parseJsonPath(path);
+            sparkGraph.setValueAtPathWithCreation(this.extData, pathSegments, value);
+        }
+    }
     async snapshotFull() {
         const def = undefined; // UI will supply def/positions on download for local
         const inputs = this.getInputs(this.runtime
@@ -1190,7 +1296,8 @@ class LocalGraphRunner extends AbstractGraphRunner {
             }
             : { nodes: [], edges: [] });
         const environment = this.getEnvironment() || {};
-        return { def, environment, inputs, outputs };
+        const extData = this.extData;
+        return { def, environment, inputs, outputs, extData };
     }
     async applySnapshotFull(payload, options) {
         if (payload.def && !options?.skipBuild) {
@@ -1198,6 +1305,9 @@ class LocalGraphRunner extends AbstractGraphRunner {
         }
         this.setEnvironment?.(payload.environment || {}, { merge: false });
         this.hydrate(payload, { dry: options?.dry });
+        if (payload.extData) {
+            await this.setExtData(payload.extData);
+        }
     }
     hydrate(snapshot, opts) {
         // Hydrate via runtime for exact restore (this emits events on runtime emitter)
@@ -1567,7 +1677,10 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
     }
     launch(def, opts) {
-        super.launch(def, opts);
+        if (this.engine) {
+            this.engine.dispose();
+            this.engine = undefined;
+        }
         // Remote: build remotely then launch
         this.ensureClient().then(async (client) => {
             await client.api.build(def);
@@ -1623,8 +1736,8 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             this.listenersBound = true;
         }
         this.engine = eng;
-        this.runMode = opts?.runMode ?? "manual";
-        this.emit("status", { running: true, runMode: this.runMode });
+        const runMode = opts?.runMode ?? "manual";
+        this.emit("status", { running: true, runMode });
         // Re-apply staged inputs using client.setInputs for consistency
         for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
             await eng.setInputs(nodeId, map, undefined).catch(() => {
@@ -1640,7 +1753,10 @@ class RemoteGraphRunner extends AbstractGraphRunner {
      * the runtime state that was just restored.
      */
     launchExisting(def, opts) {
-        super.launch(def, opts);
+        if (this.engine) {
+            this.engine.dispose();
+            this.engine = undefined;
+        }
         // Remote: attach to existing runtime and launch (do NOT rebuild)
         this.ensureClient().then(async (client) => {
             // NOTE: We do NOT call client.build(def) here because the backend runtime
@@ -1651,14 +1767,10 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         });
     }
     setRunMode(runMode) {
-        if (!this.engine) {
-            throw new Error("Cannot set run mode: engine not running");
+        if (this.engine) {
+            this.engine.setRunMode(runMode);
+            this.emit("status", { running: true, runMode });
         }
-        // Update engine run mode (sends SetRunMode command to backend)
-        this.engine.setRunMode(runMode);
-        // Update local state and emit status event
-        this.runMode = runMode;
-        this.emit("status", { running: true, runMode: this.runMode });
     }
     async computeNode(nodeId, options) {
         const client = await this.ensureClient();
@@ -1721,6 +1833,10 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         const client = await this.ensureClient();
         await client.api.setExtData(data);
     }
+    async updateExtData(updates) {
+        const client = await this.ensureClient();
+        await client.api.updateExtData(updates);
+    }
     async commit(reason) {
         const client = await this.ensureClient();
         try {
@@ -2592,35 +2708,40 @@ function toReactFlow(def, positions, sizes, registry, opts) {
         }));
         const handleLayout = geom.handleLayout;
         const handles = geom.handles;
+        const baseData = {
+            typeId: n.typeId,
+            params: n.params,
+            inputHandles,
+            outputHandles,
+            inputConnected: Object.fromEntries(inputHandles.map((h) => [
+                h.id,
+                !!connectedInputs[n.nodeId]?.has(h.id),
+            ])),
+            handleLayout,
+            showValues: opts.showValues,
+            renderWidth,
+            renderHeight,
+            initialWidth: initialGeom.width,
+            initialHeight: initialGeom.height,
+            inputValues: opts.inputs?.[n.nodeId],
+            inputDefaults: opts.inputDefaults?.[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,
+        };
+        const customNodeData = opts.customData?.nodes;
+        const mergedData = customNodeData?.[n.nodeId]
+            ? { ...baseData, custom: customNodeData[n.nodeId] }
+            : baseData;
         return {
             id: n.nodeId,
-            data: {
-                typeId: n.typeId,
-                params: n.params,
-                inputHandles,
-                outputHandles,
-                inputConnected: Object.fromEntries(inputHandles.map((h) => [
-                    h.id,
-                    !!connectedInputs[n.nodeId]?.has(h.id),
-                ])),
-                handleLayout,
-                showValues: opts.showValues,
-                renderWidth,
-                renderHeight,
-                initialWidth: initialGeom.width,
-                initialHeight: initialGeom.height,
-                inputValues: opts.inputs?.[n.nodeId],
-                inputDefaults: opts.inputDefaults?.[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,
-            },
+            data: mergedData,
             position: positions[n.nodeId] ?? { x: 0, y: 0 },
             type: opts.resolveNodeType?.(n.typeId) ?? "spark-default",
             selected: opts.selectedNodeIds
@@ -2663,6 +2784,25 @@ function toReactFlow(def, positions, sizes, registry, opts) {
         const targetHandleTypeId = targetHandles?.inputs[e.target.handle]
             ? sparkGraph.getInputTypeId(targetHandles.inputs, e.target.handle) ?? "unknown"
             : "unknown";
+        const baseEdgeData = {
+            sourceNodeId: e.source.nodeId,
+            sourceNodeTypeId: sourceNode?.typeId || "unknown",
+            sourceHandle: e.source.handle,
+            sourceHandleTypeId,
+            targetNodeId: e.target.nodeId,
+            targetNodeTypeId: targetNode?.typeId || "unknown",
+            targetHandle: e.target.handle,
+            targetHandleTypeId,
+            edgeTypeId,
+            isRunning,
+            hasError,
+            isInvalid: isInvalidEdge,
+            isMissing,
+        };
+        const customEdgeData = opts.customData?.edges;
+        const mergedEdgeData = customEdgeData?.[e.id]
+            ? { ...baseEdgeData, custom: customEdgeData[e.id] }
+            : baseEdgeData;
         return {
             id: e.id,
             source: e.source.nodeId,
@@ -2676,21 +2816,7 @@ function toReactFlow(def, positions, sizes, registry, opts) {
             style,
             label: edgeTypeId,
             type: "default",
-            data: {
-                sourceNodeId: e.source.nodeId,
-                sourceNodeTypeId: sourceNode?.typeId || "unknown",
-                sourceHandle: e.source.handle,
-                sourceHandleTypeId,
-                targetNodeId: e.target.nodeId,
-                targetNodeTypeId: targetNode?.typeId || "unknown",
-                targetHandle: e.target.handle,
-                targetHandleTypeId,
-                edgeTypeId,
-                isRunning,
-                hasError,
-                isInvalid: isInvalidEdge,
-                isMissing,
-            },
+            data: mergedEdgeData,
         };
     });
     return { nodes, edges };
@@ -2846,6 +2972,9 @@ async function upload(parsed, wb, runner) {
     if (extData.runtime && typeof extData.runtime === "object") {
         wb.setRuntimeState(extData.runtime);
     }
+    if (extData.custom && typeof extData.custom === "object") {
+        wb.setCustomData(extData.custom);
+    }
     if (runner.isRunning()) {
         await runner.applySnapshotFull({
             def: wb.def,
@@ -2862,6 +2991,9 @@ async function upload(parsed, wb, runner) {
                 runner.setInputs(nodeId, map, { dry: true });
             }
         }
+        if (extData) {
+            await runner.setExtData(extData);
+        }
     }
 }
 
@@ -3658,15 +3790,7 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
     const graphUiTick = useWorkbenchGraphUiTick(wb);
     const versionTick = useWorkbenchVersionTick(runner);
     const valuesTick = versionTick + graphTick + graphUiTick;
-    // Keep local runMode state loosely in sync with runner status.
-    // - Seed from runner.getRunMode() on mount if available.
-    // - On status events, update only when a non-undefined runMode is reported,
-    //   so the UI preserves the last selected mode after stop().
     React.useEffect(() => {
-        const initialMode = runner.getRunMode();
-        if (initialMode) {
-            setRunModeState(initialMode);
-        }
         const offRunnerStatus = runner.on("status", (status) => {
             if (status.runMode) {
                 setRunModeState(status.runMode);
@@ -3826,12 +3950,13 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
             workbench.setRuntimeState(metadata);
             const fullUiState = workbench.getUIState();
             const uiWithoutViewport = excludeViewportFromUIState(fullUiState);
-            await graphRunner.setExtData?.({
-                ...(Object.keys(uiWithoutViewport || {}).length > 0
-                    ? { ui: uiWithoutViewport }
-                    : {}),
-                runtime: metadata,
-            });
+            // Use updateExtData for efficient batched partial updates
+            const updates = [];
+            if (Object.keys(uiWithoutViewport || {}).length > 0) {
+                updates.push({ path: "ui", value: uiWithoutViewport });
+            }
+            updates.push({ path: "runtime", value: metadata });
+            await graphRunner.updateExtData(updates);
         }
         catch (err) {
             console.warn("[WorkbenchContext] Failed to save runtime metadata:", err);
@@ -4264,6 +4389,18 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
                     else if (changeType === "selection") {
                         reason = "selection";
                     }
+                    else if (changeType === "customNodeData") {
+                        reason = "custom-node-data";
+                    }
+                    else if (changeType === "customEdgeData") {
+                        reason = "custom-edge-data";
+                    }
+                    else if (changeType === "customMetaData") {
+                        reason = "custom-meta";
+                    }
+                    else if (changeType === "customData") {
+                        reason = "custom";
+                    }
                 }
                 await saveUiRuntimeMetadata(wb, runner);
                 const history = await runner
@@ -4369,27 +4506,11 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         };
     }, [runner, wb]);
     const isRunning = React.useCallback(() => runner.isRunning(), [runner]);
-    const getRunMode = React.useCallback(() => runner.getRunMode(), [runner]);
-    const stop = React.useCallback(() => runner.stop(), [runner]);
-    // Run mode actions
     const setRunMode = React.useCallback((mode) => {
         if (mode === runMode)
             return;
-        const wasRunning = runner.isRunning();
-        if (wasRunning) {
-            // Use setRunMode to change run mode without rebuilding
-            try {
-                runner.setRunMode(mode);
-                setRunModeState(mode);
-            }
-            catch (err) {
-                console.error("Failed to set run mode:", err);
-            }
-        }
-        else {
-            // Just update state if not running (will be applied on next launch)
-            setRunModeState(mode);
-        }
+        runner.setRunMode(mode);
+        setRunModeState(mode);
     }, [runMode, runner]);
     const runNodeAction = React.useCallback(async (nodeId) => {
         await runner.computeNode(nodeId);
@@ -4491,8 +4612,6 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         removeRegistryError,
         removeInputValidationError,
         isRunning,
-        getRunMode,
-        stop,
         runMode,
         setRunMode,
         runNode: runNodeAction,
@@ -4533,8 +4652,6 @@ function WorkbenchProvider({ wb, runner, overrides, uiVersion, children, }) {
         events,
         clearEvents,
         isRunning,
-        getRunMode,
-        stop,
         runMode,
         setRunMode,
         runNodeAction,
@@ -5401,7 +5518,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
                 !handlers.onRedo && jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node", " ", jsxRuntime.jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsxRuntime.jsx("div", { className: "px-2 pb-1", children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none focus:border-gray-400 select-text", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? (renderTree(root)) : (jsxRuntime.jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" })) })] }));
 }
 
-function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, runMode, enableKeyboardShortcuts = true, keyboardShortcuts = {
+function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, runMode, wb, enableKeyboardShortcuts = true, keyboardShortcuts = {
     copy: "⌘/Ctrl + C",
     duplicate: "⌘/Ctrl + E",
     duplicateWithEdges: "⌘/Ctrl + Shift + E",
@@ -5435,6 +5552,10 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, r
     }, [open]);
     if (!open || !clientPos || !nodeId)
         return null;
+    // Determine if this is a start node (no inbound edges)
+    const isStartNode = wb
+        ? !wb.def.edges.some((e) => e.target.nodeId === nodeId)
+        : false;
     // clamp
     const MENU_MIN_WIDTH = 180;
     const PADDING = 16;
@@ -5444,7 +5565,7 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, r
     return (jsxRuntime.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 select-none", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsxRuntime.jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate with edges", onClick: handlers.onDuplicateWithEdges, shortcut: keyboardShortcuts.duplicateWithEdges, enableKeyboardShortcuts: enableKeyboardShortcuts }), runMode === "manual" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [handlers.onRunNode && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunNode, children: "Run node" })), handlers.onRunFromHere && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunFromHere, children: "Run from here" }))] })), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" }), bakeableOutputs.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxRuntime.jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h)))] }))] }));
+        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsxRuntime.jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate with edges", onClick: handlers.onDuplicateWithEdges, shortcut: keyboardShortcuts.duplicateWithEdges, enableKeyboardShortcuts: enableKeyboardShortcuts }), runMode === "manual" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [handlers.onRunNode && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunNode, children: "Run node" })), handlers.onRunFromHere && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunFromHere, children: isStartNode ? "Run workflow" : "Run from here" }))] })), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" }), bakeableOutputs.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxRuntime.jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h)))] }))] }));
 }
 
 function SelectionContextMenu({ open, clientPos, handlers, enableKeyboardShortcuts = true, keyboardShortcuts = {
@@ -5530,7 +5651,56 @@ function useKeyboardShortcutToast() {
     return { toast, showToast, hideToast };
 }
 
-const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
+const SelectionBoundOverlay = ({ selection, rfInstance }) => {
+    const selectionBounds = React.useMemo(() => {
+        if (typeof document === "undefined" ||
+            !rfInstance ||
+            selection.nodes.length < 2) {
+            return null;
+        }
+        let bounds = null;
+        for (const nodeId of selection.nodes) {
+            const el = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`);
+            if (!el)
+                continue;
+            const rect = el.getBoundingClientRect();
+            if (!bounds) {
+                bounds = {
+                    left: rect.left,
+                    top: rect.top,
+                    right: rect.right,
+                    bottom: rect.bottom,
+                };
+            }
+            else {
+                bounds.left = Math.min(bounds.left, rect.left);
+                bounds.top = Math.min(bounds.top, rect.top);
+                bounds.right = Math.max(bounds.right, rect.right);
+                bounds.bottom = Math.max(bounds.bottom, rect.bottom);
+            }
+        }
+        return bounds;
+    }, [selection.nodes, rfInstance]);
+    if (!selectionBounds || selection.nodes.length < 2) {
+        return null;
+    }
+    const { left, top, right, bottom } = selectionBounds;
+    const width = right - left;
+    const height = bottom - top;
+    return (jsxRuntime.jsx("div", { style: {
+            position: "fixed",
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${width}px`,
+            height: `${height}px`,
+            border: "1px dashed #0ea5e9",
+            pointerEvents: "none",
+            zIndex: 4,
+            boxSizing: "border-box",
+        } }));
+};
+
+const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize, reactFlowProps }, ref) => {
     const { wb, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, overrides, runNode, runFromHere, runMode, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
@@ -5568,6 +5738,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 status: n.data.status,
                 validation: n.data.validation,
                 inputConnected: n.data.inputConnected,
+                custom: n.data.custom,
             },
         });
         return lod.isEqual(pick(a), pick(b));
@@ -5583,6 +5754,14 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             style: e.style,
             label: e.label,
             type: e.type,
+            data: e.data && {
+                edgeTypeId: e.data.edgeTypeId,
+                isRunning: e.data.isRunning,
+                hasError: e.data.hasError,
+                isInvalid: e.data.isInvalid,
+                isMissing: e.data.isMissing,
+                custom: e.data.custom,
+            },
         });
         return lod.isEqual(pick(a), pick(b));
     };
@@ -5636,27 +5815,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     }, [uiVersion, ui]);
     const { nodes, edges } = React.useMemo(() => {
         const sel = wb.getSelection();
-        // Merge defaults with inputs for node display (defaults shown in lighter gray)
-        const inputsWithDefaults = {};
-        for (const n of wb.def.nodes) {
-            const nodeInputs = inputsMap[n.nodeId] ?? {};
-            const nodeDefaults = inputDefaultsMap[n.nodeId] ?? {};
-            const inbound = new Set(wb.def.edges
-                .filter((e) => e.target.nodeId === n.nodeId)
-                .map((e) => e.target.handle));
-            const merged = { ...nodeInputs };
-            for (const [h, v] of Object.entries(nodeDefaults)) {
-                if (!inbound.has(h) && merged[h] === undefined) {
-                    merged[h] = v;
-                }
-            }
-            if (Object.keys(merged).length > 0) {
-                inputsWithDefaults[n.nodeId] = merged;
-            }
-        }
         const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), wb.registry, {
             showValues,
-            inputs: inputsWithDefaults,
+            inputs: inputsMap,
             inputDefaults: inputDefaultsMap,
             outputs: outputsMap,
             resolveNodeType,
@@ -5670,6 +5831,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             selectedEdgeIds: new Set(sel.edges),
             getDefaultNodeSize,
             ui,
+            customData: wb.getCustomData(),
         });
         // Retain references for unchanged items
         const stableNodes = retainStabilityById(prevNodesRef.current, out.nodes, isSameNode);
@@ -5774,13 +5936,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         resolveNodeType,
     ]);
     const throttled = useThrottledValue({ nodes, edges }, 100);
-    const [menuOpen, setMenuOpen] = React.useState(false);
-    const [menuPos, setMenuPos] = React.useState(null);
-    const [nodeMenuOpen, setNodeMenuOpen] = React.useState(false);
-    const [nodeMenuPos, setNodeMenuPos] = React.useState(null);
-    const [nodeAtMenu, setNodeAtMenu] = React.useState(null);
-    const [selectionMenuPos, setSelectionMenuPos] = React.useState(null);
-    const [selectionMenuOpen, setSelectionMenuOpen] = React.useState(false);
+    const [menuState, setMenuState] = React.useState(null);
     // Compute the rectangular screen-space bounds of the current selection
     const getSelectionScreenBounds = () => {
         if (typeof document === "undefined")
@@ -5821,31 +5977,24 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         if (target) {
             // Resolve node id from data-id attribute React Flow sets
             const nodeId = target.getAttribute("data-id");
-            const isSelected = nodeId && selection.nodes.includes(nodeId);
-            if (isSelected && isSingleNodeSelected) {
-                // Right-clicked on the single selected node - show node menu
-                setNodeAtMenu(nodeId);
-                setNodeMenuPos({ x: e.clientX, y: e.clientY });
-                setNodeMenuOpen(true);
-                setMenuOpen(false);
-                setSelectionMenuOpen(false);
+            if (!nodeId)
                 return;
-            }
-            else if (isSelected) {
+            const isSelected = selection.nodes.includes(nodeId);
+            if (isSelected && !isSingleNodeSelected) {
                 // Right-clicked on a node that's part of multi-selection - show selection menu
-                setSelectionMenuPos({ x: e.clientX, y: e.clientY });
-                setSelectionMenuOpen(true);
-                setMenuOpen(false);
-                setNodeMenuOpen(false);
+                setMenuState({
+                    type: "selection",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                });
                 return;
             }
             else {
                 // Right-clicked on a non-selected node - show node menu
-                setNodeAtMenu(nodeId);
-                setNodeMenuPos({ x: e.clientX, y: e.clientY });
-                setNodeMenuOpen(true);
-                setMenuOpen(false);
-                setSelectionMenuOpen(false);
+                setMenuState({
+                    type: "node",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                    nodeId,
+                });
                 return;
             }
         }
@@ -5857,32 +6006,22 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             if (isSelected && isSingleNodeSelected) {
                 // Right-clicked on an edge, but only one node is selected - show node menu
                 const nodeId = selection.nodes[0];
-                setNodeAtMenu(nodeId);
-                setNodeMenuPos({ x: e.clientX, y: e.clientY });
-                setNodeMenuOpen(true);
-                setMenuOpen(false);
-                setSelectionMenuOpen(false);
+                setMenuState({
+                    type: "node",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                    nodeId,
+                });
                 return;
             }
             else if (isSelected) {
                 // Right-clicked on a selected edge with multiple nodes - show selection menu
-                setSelectionMenuPos({ x: e.clientX, y: e.clientY });
-                setSelectionMenuOpen(true);
-                setMenuOpen(false);
-                setNodeMenuOpen(false);
+                setMenuState({
+                    type: "selection",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                });
                 return;
             }
         }
-        // If only one node is selected (even with edges), show node menu for empty space clicks
-        if (isSingleNodeSelected) {
-            const nodeId = selection.nodes[0];
-            setNodeAtMenu(nodeId);
-            setNodeMenuPos({ x: e.clientX, y: e.clientY });
-            setNodeMenuOpen(true);
-            setMenuOpen(false);
-            setSelectionMenuOpen(false);
-            return;
-        }
         // Check if the cursor is inside the rectangular bounds of the current selection
         // (for multi-selection when right-clicking on empty space within selection bounds)
         const selectionBounds = getSelectionScreenBounds();
@@ -5892,28 +6031,38 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 e.clientX <= right &&
                 e.clientY >= top &&
                 e.clientY <= bottom) {
-                setSelectionMenuPos({ x: e.clientX, y: e.clientY });
-                setSelectionMenuOpen(true);
-                setMenuOpen(false);
-                setNodeMenuOpen(false);
+                // If only one node is selected (even with edges), show node menu for empty space clicks
+                if (isSingleNodeSelected) {
+                    const nodeId = selection.nodes[0];
+                    setMenuState({
+                        type: "node",
+                        menuPos: { x: e.clientX, y: e.clientY },
+                        nodeId,
+                    });
+                    return;
+                }
+                setMenuState({
+                    type: "selection",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                });
                 return;
             }
         }
         // Right-clicked on empty space with no selection - show default menu
-        setMenuPos({ x: e.clientX, y: e.clientY });
-        setMenuOpen(true);
-        setNodeMenuOpen(false);
-        setSelectionMenuOpen(false);
+        setMenuState({
+            type: "default",
+            menuPos: { x: e.clientX, y: e.clientY },
+        });
     };
     const addNodeAt = React.useCallback(async (typeId, opts) => wb.addNode({ typeId }, { inputs: opts.inputs, position: opts.position, commit: true }), [wb]);
     const onCloseMenu = React.useCallback(() => {
-        setMenuOpen(false);
+        setMenuState(null);
     }, []);
     const onCloseNodeMenu = React.useCallback(() => {
-        setNodeMenuOpen(false);
+        setMenuState(null);
     }, []);
     const onCloseSelectionMenu = React.useCallback(() => {
-        setSelectionMenuOpen(false);
+        setMenuState(null);
     }, []);
     React.useEffect(() => {
         const off = wb.on("historyChanged", (event) => {
@@ -5960,8 +6109,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         return baseHandlers;
     }, [wb, runner, overrides, onCloseSelectionMenu]);
     const nodeContextMenuHandlers = React.useMemo(() => {
-        if (!nodeAtMenu)
+        if (menuState?.type !== "node")
             return null;
+        const nodeAtMenu = menuState.nodeId;
         // Get storage from override or use workbench's internal storage
         const storage = overrides?.getCopiedDataStorage
             ? overrides.getCopiedDataStorage()
@@ -5977,7 +6127,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         }
         return baseHandlers;
     }, [
-        nodeAtMenu,
+        menuState,
         wb,
         runner,
         wb.registry,
@@ -5990,10 +6140,10 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         overrides?.getCopiedDataStorage,
     ]);
     const bakeableOutputs = React.useMemo(() => {
-        if (!nodeAtMenu)
+        if (menuState?.type !== "node")
             return [];
-        return getBakeableOutputs(nodeAtMenu, wb, wb.registry, outputTypesMap);
-    }, [nodeAtMenu, wb, wb.registry, registryVersion, outputTypesMap]);
+        return getBakeableOutputs(menuState.nodeId, wb, wb.registry, outputTypesMap);
+    }, [menuState, wb, wb.registry, registryVersion, outputTypesMap]);
     // Keyboard shortcuts configuration
     const enableKeyboardShortcuts = overrides?.enableKeyboardShortcuts !== false; // Default to true
     const keyboardShortcuts = overrides?.keyboardShortcuts || {
@@ -6063,7 +6213,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                     const modKeyLabel = isMac ? "⌘" : "Ctrl";
                     showToast(`Copy (${modKeyLabel} + C)`);
                     // If single node selected, use node context menu handler; otherwise use selection handler
-                    if (selection.nodes.length === 1 && nodeContextMenuHandlers?.onCopy) {
+                    if (selection.nodes.length === 1 &&
+                        nodeContextMenuHandlers?.onCopy) {
                         nodeContextMenuHandlers.onCopy();
                     }
                     else if (selectionContextMenuHandlers.onCopy) {
@@ -6183,21 +6334,25 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         });
         return () => off();
     }, [wb]);
-    return (jsxRuntime.jsxs("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: [jsxRuntime.jsx(react.ReactFlowProvider, { children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
-                        rfInstanceRef.current = inst;
-                        const savedViewport = wb.getViewport();
-                        if (savedViewport) {
-                            inst.setViewport(lod.clone(savedViewport));
-                        }
-                    }, 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", children: [BackgroundRenderer ? (jsxRuntime.jsx(BackgroundRenderer, {})) : (jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsxRuntime.jsx(MinimapRenderer, {}) : jsxRuntime.jsx(react.MiniMap, {}), ControlsRenderer ? jsxRuntime.jsx(ControlsRenderer, {}) : jsxRuntime.jsx(react.Controls, {}), DefaultContextMenuRenderer ? (jsxRuntime.jsx(DefaultContextMenuRenderer, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
-                                ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                : {}) })) : (jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!nodeAtMenu &&
-                            nodeContextMenuHandlers &&
-                            (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, ...(enableKeyboardShortcuts !== false
-                                    ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                    : {}) })) : (jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), selectionMenuOpen &&
-                            selectionMenuPos &&
-                            (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }) }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
+    const { onInit: userOnInit, ...restReactFlowProps } = reactFlowProps || {};
+    return (jsxRuntime.jsxs("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: [jsxRuntime.jsxs(react.ReactFlowProvider, { children: [jsxRuntime.jsxs(react.ReactFlow, { ...restReactFlowProps, nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
+                            rfInstanceRef.current = inst;
+                            const savedViewport = wb.getViewport();
+                            if (savedViewport) {
+                                inst.setViewport(lod.clone(savedViewport));
+                            }
+                            if (userOnInit) {
+                                userOnInit(inst);
+                            }
+                        }, 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", children: [BackgroundRenderer ? (jsxRuntime.jsx(BackgroundRenderer, {})) : (jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsxRuntime.jsx(MinimapRenderer, {}) : jsxRuntime.jsx(react.MiniMap, {}), ControlsRenderer ? jsxRuntime.jsx(ControlsRenderer, {}) : jsxRuntime.jsx(react.Controls, {}), menuState?.type === "default" &&
+                                (DefaultContextMenuRenderer ? (jsxRuntime.jsx(DefaultContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
+                                        ? { enableKeyboardShortcuts, keyboardShortcuts }
+                                        : {}) })) : (jsxRuntime.jsx(DefaultContextMenu, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))), menuState?.type === "node" &&
+                                nodeContextMenuHandlers &&
+                                (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, ...(enableKeyboardShortcuts !== false
+                                        ? { enableKeyboardShortcuts, keyboardShortcuts }
+                                        : {}) })) : (jsxRuntime.jsx(NodeContextMenu, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), menuState?.type === "selection" &&
+                                (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionBoundOverlay, { selection: wb.getSelection(), rfInstance: rfInstanceRef.current })] }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
 
 function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
@@ -6225,9 +6380,6 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
         if (isConnecting) {
             return (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-gray-500 border-gray-400 flex items-center gap-1 disabled:opacity-50", disabled: true, title: "Connecting to backend...", children: [jsxRuntime.jsx(react$1.ClockClockwiseIcon, { size: 16, className: "animate-spin" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Connecting..." })] }));
         }
-        if (isGraphRunning) {
-            return (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-red-700 border-red-600 flex items-center gap-1 disabled:opacity-50 disabled:text-gray-400 disabled:border-gray-300", onClick: () => runner.stop(), disabled: !canControl, title: canControl ? "Stop engine" : "Waiting for connection", children: [jsxRuntime.jsx(react$1.StopIcon, { size: 16, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Stop" })] }));
-        }
         return (jsxRuntime.jsxs("button", { className: "border rounded px-2 py-1.5 text-green-700 border-green-600 flex items-center gap-1 disabled:text-gray-400 disabled:border-gray-300 disabled:opacity-50", onClick: (evt) => {
                 if (evt.shiftKey && !confirm("Invalidate and re-run graph?"))
                     return;
@@ -6614,11 +6766,12 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
                             if (mode !== runMode) {
                                 await setRunMode(mode);
                             }
-                        }, disabled: isGraphRunning, title: isGraphRunning
-                            ? "Stop before switching run mode"
-                            : "Select run mode", children: [jsxRuntime.jsx("option", { value: "manual", children: "Manual" }), jsxRuntime.jsx("option", { value: "auto", children: "Auto" })] }), renderStartStopButton(), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsxRuntime.jsx(react$1.TreeStructureIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsxRuntime.jsx(react$1.CornersOutIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsxRuntime.jsx(react$1.DownloadIcon, { size: 24 }) }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsxRuntime.jsx(react$1.UploadIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
+                        }, title: "Select run mode", children: [jsxRuntime.jsx("option", { value: "manual", children: "Manual" }), jsxRuntime.jsx("option", { value: "auto", children: "Auto" })] }), renderStartStopButton(), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsxRuntime.jsx(react$1.TreeStructureIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsxRuntime.jsx(react$1.CornersOutIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsxRuntime.jsx(react$1.DownloadIcon, { size: 24 }) }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsxRuntime.jsx(react$1.UploadIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
                             await downloadCanvasThumbnail(canvasContainerRef.current);
-                        }, title: "Download Flow Thumbnail (SVG)", children: jsxRuntime.jsx(react$1.ImageIcon, { size: 24 }) }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", ref: canvasContainerRef, children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
+                        }, title: "Download Flow Thumbnail (SVG)", children: jsxRuntime.jsx(react$1.ImageIcon, { size: 24 }) }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", ref: canvasContainerRef, children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize, reactFlowProps: {
+                                minZoom: 0.1,
+                                maxZoom: 5,
+                            } }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, backendOptions, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());