@bian-womp/spark-workbench 0.2.68 → 0.2.70

package/lib/esm/index.js

@@ -1,4 +1,5 @@
 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 lod from 'lodash';
 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';
@@ -208,18 +209,19 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 inputs: options?.inputs,
                 copyOutputsFrom: options?.copyOutputsFrom,
             },
-            dry: options?.dry,
+            ...lod.pick(options, ["dry", "commit", "reason"]),
         });
         this.refreshValidation();
         return id;
     }
-    removeNode(nodeId) {
+    removeNode(nodeId, options) {
         this.def.nodes = this.def.nodes.filter((n) => n.nodeId !== nodeId);
         this.def.edges = this.def.edges.filter((e) => e.source.nodeId !== nodeId && e.target.nodeId !== nodeId);
         delete this.positions[nodeId];
         this.emit("graphChanged", {
             def: this.def,
             change: { type: "removeNode", nodeId },
+            ...options,
         });
         this.refreshValidation();
     }
@@ -234,16 +236,17 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this.emit("graphChanged", {
             def: this.def,
             change: { type: "connect", edgeId: id },
-            dry: options?.dry,
+            ...options,
         });
         this.refreshValidation();
         return id;
     }
-    disconnect(edgeId) {
+    disconnect(edgeId, options) {
         this.def.edges = this.def.edges.filter((e) => e.id !== edgeId);
         this.emit("graphChanged", {
             def: this.def,
             change: { type: "disconnect", edgeId },
+            ...options,
         });
         this.emit("validationChanged", this.validate());
     }
@@ -272,32 +275,32 @@ class InMemoryWorkbench extends AbstractWorkbench {
         });
     }
     // Position and selection APIs for React Flow bridge
-    setPosition(nodeId, pos, opts) {
+    setPosition(nodeId, pos, options) {
         this.positions[nodeId] = pos;
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "moveNode", nodeId, pos },
-            commit: !!opts?.commit === true,
+            ...options,
         });
     }
-    setPositions(map, opts) {
+    setPositions(map, options) {
         this.positions = { ...map };
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "moveNodes" },
-            commit: opts?.commit,
+            ...options,
         });
     }
     getPositions() {
         return { ...this.positions };
     }
-    setSelection(sel, opts) {
+    setSelection(sel, options) {
         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,
+            ...options,
         });
     }
     getSelection() {
@@ -309,7 +312,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
     /**
      * Delete all selected nodes and edges.
      */
-    deleteSelection() {
+    deleteSelection(options) {
         const selection = this.getSelection();
         // Delete all selected nodes (this will also remove connected edges)
         for (const nodeId of selection.nodes) {
@@ -320,14 +323,14 @@ class InMemoryWorkbench extends AbstractWorkbench {
             this.disconnect(edgeId);
         }
         // Clear selection
-        this.setSelection({ nodes: [], edges: [] });
+        this.setSelection({ nodes: [], edges: [] }, options);
     }
-    setViewport(viewport, opts) {
+    setViewport(viewport, options) {
         this.viewport = { ...viewport };
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "viewport" },
-            commit: opts?.commit,
+            ...options,
         });
     }
     getViewport() {
@@ -472,7 +475,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
      * Returns the mapping from original node IDs to new node IDs.
      * Uses copyOutputsFrom to copy outputs from original nodes (like duplicate does).
      */
-    pasteCopiedData(data, center) {
+    pasteCopiedData(data, center, options) {
         const nodeIdMap = new Map();
         const edgeIds = [];
         // Add nodes
@@ -512,10 +515,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
             }
         }
         // Select the newly pasted nodes
-        this.setSelection({
-            nodes: Array.from(nodeIdMap.values()),
-            edges: edgeIds,
-        });
+        this.setSelection({ nodes: Array.from(nodeIdMap.values()), edges: edgeIds }, options);
         return { nodeIdMap, edgeIds };
     }
     /**
@@ -625,11 +625,10 @@ class AbstractGraphRunner {
         this.runtime.resume();
         // Create and launch new engine (to be implemented by subclasses)
         await this.createAndLaunchEngine(opts);
-        // Re-apply staged inputs to new engine
+        // Re-apply staged inputs to new engine using runner's setInputs method
+        // This ensures consistency and proper handling of staged inputs
         for (const [nodeId, map] of Object.entries(currentInputs)) {
-            if (this.engine) {
-                this.engine.setInputs(nodeId, map);
-            }
+            await this.setInputs(nodeId, map);
         }
     }
     getInputDefaults(def) {
@@ -671,6 +670,21 @@ class AbstractGraphRunner {
     getRunningEngine() {
         return this.runningKind;
     }
+    // Optional undo/redo support
+    async undo() {
+        return false;
+    }
+    async redo() {
+        return false;
+    }
+    async canUndo() {
+        return false;
+    }
+    async canRedo() {
+        return false;
+    }
+    // Optional commit support
+    async commit(_reason) { }
 }
 
 // Counter for generating readable runner IDs
@@ -1295,8 +1309,11 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         this.engine = eng;
         this.runningKind = opts?.engine ?? "push";
         this.emit("status", { running: true, engine: this.runningKind });
+        // Re-apply staged inputs using client.setInputs for consistency
         for (const [nodeId, map] of Object.entries(this.stagedInputs)) {
-            this.engine.setInputs(nodeId, map);
+            await client.setInputs(nodeId, map).catch(() => {
+                // Ignore errors during launch - inputs will be set when user calls setInputs
+            });
         }
     }
     /**
@@ -1338,9 +1355,11 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         this.engine = eng;
         this.runningKind = opts?.engine ?? "push";
         this.emit("status", { running: true, engine: this.runningKind });
-        // Re-apply staged inputs to new engine
+        // Re-apply staged inputs using client.setInputs for consistency
         for (const [nodeId, map] of Object.entries(currentInputs)) {
-            this.engine.setInputs(nodeId, map);
+            await client.setInputs(nodeId, map).catch(() => {
+                // Ignore errors during engine switch - inputs will be set when user calls setInputs
+            });
         }
     }
     async step() {
@@ -1355,7 +1374,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         const client = await this.ensureClient();
         await client.flush();
     }
-    setInputs(nodeId, inputs, options) {
+    async setInputs(nodeId, inputs, options) {
         // Update staged inputs (for getInputs to work correctly)
         if (!this.stagedInputs[nodeId])
             this.stagedInputs[nodeId] = {};
@@ -1367,21 +1386,17 @@ class RemoteGraphRunner extends AbstractGraphRunner {
                 this.stagedInputs[nodeId][handle] = value;
             }
         }
-        // If engine exists, call directly; otherwise ensure client (fire-and-forget)
-        if (this.engine) {
-            this.engine.setInputs(nodeId, inputs, options);
+        // Use transport.request instead of transport.send for consistency
+        const client = await this.ensureClient();
+        try {
+            await client.setInputs(nodeId, inputs, options);
         }
-        else {
-            this.ensureClient()
-                .then((client) => {
-                client.getEngine().setInputs(nodeId, inputs, options);
-            })
-                .catch(() => {
-                // Emit synthetic events if connection fails
-                for (const [handle, value] of Object.entries(inputs)) {
-                    this.emit("value", { nodeId, handle, value, io: "input" });
-                }
-            });
+        catch (err) {
+            // Emit synthetic events if connection fails
+            for (const [handle, value] of Object.entries(inputs)) {
+                this.emit("value", { nodeId, handle, value, io: "input" });
+            }
+            throw err;
         }
     }
     async copyOutputs(fromNodeId, toNodeId, options) {
@@ -1416,6 +1431,52 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         const client = await this.ensureClient();
         await client.setExtData(data);
     }
+    async commit(reason) {
+        const client = await this.ensureClient();
+        try {
+            await client.commit(reason);
+        }
+        catch (err) {
+            console.error("[RemoteGraphRunner] Error committing:", err);
+            throw err;
+        }
+    }
+    async undo() {
+        const client = await this.ensureClient();
+        try {
+            return await client.undo();
+        }
+        catch {
+            return false;
+        }
+    }
+    async redo() {
+        const client = await this.ensureClient();
+        try {
+            return await client.redo();
+        }
+        catch {
+            return false;
+        }
+    }
+    async canUndo() {
+        const client = await this.ensureClient();
+        try {
+            return await client.canUndo();
+        }
+        catch {
+            return false;
+        }
+    }
+    async canRedo() {
+        const client = await this.ensureClient();
+        try {
+            return await client.canRedo();
+        }
+        catch {
+            return false;
+        }
+    }
     async snapshotFull() {
         const client = await this.ensureClient();
         try {
@@ -1853,7 +1914,7 @@ function useWorkbenchBridge(wb) {
         wb.connect({
             source: { nodeId: params.source, handle: params.sourceHandle },
             target: { nodeId: params.target, handle: params.targetHandle },
-        });
+        }, { commit: true });
     }, [wb]);
     const onNodesChange = useCallback((changes) => {
         // Apply position updates continuously, but mark commit only on drag end
@@ -1896,7 +1957,7 @@ function useWorkbenchBridge(wb) {
             });
         }
     }, [wb]);
-    const onEdgesDelete = useCallback((edges) => edges.forEach((e) => wb.disconnect(e.id)), [wb]);
+    const onEdgesDelete = useCallback((edges) => edges.forEach((e, idx) => wb.disconnect(e.id, { commit: idx === edges.length - 1 })), [wb]);
     const onEdgesChange = useCallback((changes) => {
         const current = wb.getSelection();
         const nextEdgeIds = new Set(current.edges);
@@ -1932,8 +1993,7 @@ function useWorkbenchBridge(wb) {
         }
     }, [wb]);
     const onNodesDelete = useCallback((nodes) => {
-        for (const n of nodes)
-            wb.removeNode(n.id);
+        nodes.forEach((n, idx) => wb.removeNode(n.id, { commit: idx === nodes.length - 1 }));
     }, [wb]);
     return {
         onConnect,
@@ -2626,7 +2686,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             curX += maxWidth + H_GAP;
         }
-        wb.setPositions(pos, { commit: true });
+        wb.setPositions(pos, { commit: true, reason: "auto-layout" });
     }, [wb, registry, overrides?.getDefaultNodeSize]);
     const updateEdgeType = useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
     const triggerExternal = useCallback((nodeId, event) => runner.triggerExternal(nodeId, event), [runner]);
@@ -2868,7 +2928,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             return add("workbench", "graphChanged")(event);
         });
-        const offWbGraphUiChanged = wb.on("graphUiChanged", add("workbench", "graphUiChanged"));
+        const offWbGraphUiChangedForLog = wb.on("graphUiChanged", add("workbench", "graphUiChanged"));
         const offWbValidationChanged = wb.on("validationChanged", add("workbench", "validationChanged"));
         // Ensure newly added nodes start as invalidated until first evaluation
         const offWbAddNode = wb.on("graphChanged", (e) => {
@@ -2882,39 +2942,94 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
         });
         const offWbGraphChangedForUpdate = wb.on("graphChanged", async (event) => {
-            if (!runner.isRunning())
+            // Build detailed reason from change type
+            let reason = "graph-changed";
+            if (event.change) {
+                const changeType = event.change.type;
+                if (changeType === "addNode") {
+                    reason = "add-node";
+                }
+                else if (changeType === "removeNode") {
+                    reason = "remove-node";
+                }
+                else if (changeType === "connect") {
+                    reason = "connect-edge";
+                }
+                else if (changeType === "disconnect") {
+                    reason = "disconnect-edge";
+                }
+                else if (changeType === "updateParams") {
+                    reason = "update-node-params";
+                }
+                else if (changeType === "updateEdgeType") {
+                    reason = "update-edge-type";
+                }
+            }
+            if (!runner.isRunning()) {
+                if (event.commit) {
+                    // If runner not running, commit immediately (no update needed)
+                    await runner.commit(reason).catch((err) => {
+                        console.error("[WorkbenchContext] Error committing:", err);
+                    });
+                }
                 return;
+            }
             try {
                 if (event.change?.type === "addNode") {
                     const { nodeId, inputs, copyOutputsFrom } = event.change;
                     if (event.dry) {
                         await runner.update(event.def, { dry: true });
                         if (inputs) {
-                            runner.setInputs(nodeId, inputs, { dry: true });
+                            await runner.setInputs(nodeId, inputs, { dry: true });
                         }
                         if (copyOutputsFrom) {
-                            runner.copyOutputs(copyOutputsFrom, nodeId, { dry: true });
+                            await runner.copyOutputs(copyOutputsFrom, nodeId, { dry: true });
                         }
                     }
                     else {
                         await runner.update(event.def, { dry: !!inputs });
                         if (inputs) {
-                            runner.setInputs(nodeId, inputs, { dry: false });
+                            await runner.setInputs(nodeId, inputs, { dry: false });
                         }
                     }
                 }
                 else {
                     await runner.update(event.def, { dry: event.dry });
                 }
+                if (event.commit) {
+                    // Wait for update to complete, then commit
+                    await runner.commit(event.reason ?? reason).catch((err) => {
+                        console.error("[WorkbenchContext] Error committing after update:", err);
+                    });
+                }
             }
             catch (err) {
                 console.error("[WorkbenchContext] Error updating graph:", err);
             }
         });
         const offWbdSetValidation = wb.on("validationChanged", (r) => setValidation(r));
-        const offWbSelectionChanged = wb.on("selectionChanged", (sel) => {
+        const offWbSelectionChanged = wb.on("selectionChanged", async (sel) => {
             setSelectedNodeId(sel.nodes?.[0]);
             setSelectedEdgeId(sel.edges?.[0]);
+            if (sel.commit) {
+                // Commit on selection change
+                await runner.commit(sel.reason ?? "selection").catch((err) => {
+                    console.error("[WorkbenchContext] Error committing selection change:", err);
+                });
+            }
+        });
+        const offWbGraphUiChanged = wb.on("graphUiChanged", async (event) => {
+            // Only commit if commit flag is true (e.g., drag end, not during dragging)
+            if (event.commit) {
+                if (event.change) {
+                    event.change.type;
+                }
+                await runner
+                    .commit(event.reason ?? "ui-changed")
+                    .catch((err) => {
+                    console.error("[WorkbenchContext] Error committing UI changes:", err);
+                });
+            }
         });
         const offWbError = wb.on("error", add("workbench", "error"));
         // Registry updates: swap registry and refresh graph validation/UI
@@ -2951,6 +3066,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offRunnerInvalidate();
             offRunnerStats();
             offWbGraphChanged();
+            offWbGraphUiChangedForLog();
             offWbGraphUiChanged();
             offWbValidationChanged();
             offWbError();
@@ -3126,6 +3242,7 @@ function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap,
         try {
             const typeId = outputTypesMap?.[nodeId]?.[handleId];
             const raw = outputsMap?.[nodeId]?.[handleId];
+            let newNodeId;
             if (!typeId || raw === undefined)
                 return;
             const unwrap = (v) => isTypedOutput(v) ? getTypedOutputValue(v) : v;
@@ -3151,23 +3268,21 @@ function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap,
                 const nodeDesc = registry.nodes.get(singleTarget.nodeTypeId);
                 const inType = getInputTypeId(nodeDesc?.inputs, singleTarget.inputHandle);
                 const coerced = await coerceIfNeeded(typeId, inType, unwrap(raw));
-                wb.addNode({
+                newNodeId = wb.addNode({
                     typeId: singleTarget.nodeTypeId,
                     position: { x: pos.x + 180, y: pos.y },
                 }, { inputs: { [singleTarget.inputHandle]: coerced } });
-                return;
             }
-            if (isArray && arrTarget) {
+            else if (isArray && arrTarget) {
                 const nodeDesc = registry.nodes.get(arrTarget.nodeTypeId);
                 const inType = getInputTypeId(nodeDesc?.inputs, arrTarget.inputHandle);
                 const coerced = await coerceIfNeeded(typeId, inType, unwrap(raw));
-                wb.addNode({
+                newNodeId = wb.addNode({
                     typeId: arrTarget.nodeTypeId,
                     position: { x: pos.x + 180, y: pos.y },
                 }, { inputs: { [arrTarget.inputHandle]: coerced } });
-                return;
             }
-            if (isArray && elemTarget) {
+            else if (isArray && elemTarget) {
                 const nodeDesc = registry.nodes.get(elemTarget.nodeTypeId);
                 const inType = getInputTypeId(nodeDesc?.inputs, elemTarget.inputHandle);
                 const src = unwrap(raw);
@@ -3179,19 +3294,21 @@ function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap,
                 for (let idx = 0; idx < coercedItems.length; idx++) {
                     const col = idx % COLS;
                     const row = Math.floor(idx / COLS);
-                    wb.addNode({
+                    newNodeId = wb.addNode({
                         typeId: elemTarget.nodeTypeId,
                         position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
                     }, { inputs: { [elemTarget.inputHandle]: coercedItems[idx] } });
                 }
-                return;
+            }
+            if (newNodeId) {
+                wb.setSelection({ nodes: [newNodeId], edges: [] }, { commit: true, reason: "bake" });
             }
         }
         catch { }
     };
     return {
         onDelete: () => {
-            wb.removeNode(nodeId);
+            wb.removeNode(nodeId, { commit: true });
             onClose();
         },
         onDuplicate: async () => {
@@ -3216,10 +3333,7 @@ function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap,
                 dry: true,
             });
             // Select the newly duplicated node
-            wb.setSelection({
-                nodes: [newNodeId],
-                edges: [],
-            });
+            wb.setSelection({ nodes: [newNodeId], edges: [] }, { commit: true, reason: "duplicate" });
             onClose();
         },
         onDuplicateWithEdges: async () => {
@@ -3252,10 +3366,9 @@ function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap,
                 }, { dry: true });
             }
             // Select the newly duplicated node and edges
-            wb.setSelection({
-                nodes: [newNodeId],
-                edges: [],
-            });
+            if (newNodeId) {
+                wb.setSelection({ nodes: [newNodeId], edges: [] }, { commit: true, reason: "duplicate-with-edges" });
+            }
             onClose();
         },
         onRunPull: async () => {
@@ -3329,7 +3442,7 @@ function createSelectionContextMenuHandlers(wb, onClose, getDefaultNodeSize, onC
                 onClose();
             },
         onDelete: () => {
-            wb.deleteSelection();
+            wb.deleteSelection({ commit: true, reason: "delete-selection" });
             onClose();
         },
         onClose,
@@ -3338,10 +3451,24 @@ function createSelectionContextMenuHandlers(wb, onClose, getDefaultNodeSize, onC
 /**
  * Creates base default context menu handlers.
  */
-function createDefaultContextMenuHandlers(onAddNode, onClose, onPaste) {
+function createDefaultContextMenuHandlers(onAddNode, onClose, onPaste, runner, getCopiedData, clearCopiedData) {
+    // Wrap paste handler to clear storage after paste
+    const wrappedOnPaste = onPaste && getCopiedData && clearCopiedData
+        ? (position) => {
+            onPaste(position);
+            clearCopiedData();
+        }
+        : onPaste;
+    // Function to check if paste data exists (called dynamically when menu opens)
+    const hasPasteData = getCopiedData ? () => !!getCopiedData() : undefined;
     return {
         onAddNode,
-        onPaste,
+        onPaste: wrappedOnPaste,
+        hasPasteData,
+        onUndo: runner ? () => runner.undo().then(() => onClose()) : undefined,
+        onRedo: runner ? () => runner.redo().then(() => onClose()) : undefined,
+        canUndo: runner ? () => runner.canUndo().catch(() => false) : undefined,
+        canRedo: runner ? () => runner.canRedo().catch(() => false) : undefined,
         onClose,
     };
 }
@@ -3865,13 +3992,48 @@ function DefaultNodeContent({ data, isConnectable, }) {
                 } })] }));
 }
 
-function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, }) {
+function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enableKeyboardShortcuts = true, keyboardShortcuts = {
+    undo: "⌘/Ctrl + Z",
+    redo: "⌘/Ctrl + Shift + Z",
+    paste: "⌘/Ctrl + V",
+}, }) {
     const rf = useReactFlow();
     const [query, setQuery] = useState("");
+    const [canUndo, setCanUndo] = useState(false);
+    const [canRedo, setCanRedo] = useState(false);
+    const [hasPasteData, setHasPasteData] = useState(false);
     const q = query.trim().toLowerCase();
     const filteredIds = q
         ? nodeIds.filter((id) => id.toLowerCase().includes(q))
         : nodeIds;
+    // Check undo/redo availability and paste data when menu opens
+    useEffect(() => {
+        if (!open)
+            return;
+        let cancelled = false;
+        const checkAvailability = async () => {
+            if (handlers.canUndo) {
+                const result = await handlers.canUndo();
+                if (!cancelled)
+                    setCanUndo(result);
+            }
+            if (handlers.canRedo) {
+                const result = await handlers.canRedo();
+                if (!cancelled)
+                    setCanRedo(result);
+            }
+            // Check paste data dynamically
+            if (handlers.hasPasteData) {
+                const result = handlers.hasPasteData();
+                if (!cancelled)
+                    setHasPasteData(result);
+            }
+        };
+        checkAvailability();
+        return () => {
+            cancelled = true;
+        };
+    }, [open, handlers.canUndo, handlers.canRedo, handlers.hasPasteData]);
     const root = { __children: {} };
     for (const id of filteredIds) {
         const parts = id.split(".");
@@ -3936,6 +4098,12 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, }) {
         handlers.onPaste(p);
         handlers.onClose();
     };
+    // Helper to format shortcut for current platform
+    const formatShortcut = (shortcut) => {
+        const isMac = typeof navigator !== "undefined" &&
+            navigator.userAgent.toLowerCase().includes("mac");
+        return shortcut.replace(/⌘\/Ctrl/g, isMac ? "⌘" : "Ctrl");
+    };
     const renderTree = (tree, path = []) => {
         const entries = Object.entries(tree?.__children ?? {}).sort((a, b) => a[0].localeCompare(b[0]));
         return (jsx("div", { children: entries.map(([key, child]) => {
@@ -3953,10 +4121,17 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, }) {
     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 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: [handlers.onPaste && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed", onClick: handlePaste, children: "Paste" })), handlers.onPaste && jsx("div", { className: "h-px bg-gray-200 my-1" }), 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 select-text", 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" })) })] }));
+        }, children: [hasPasteData && handlers.onPaste && (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between", onClick: handlePaste, children: [jsx("span", { children: "Paste" }), enableKeyboardShortcuts && keyboardShortcuts.paste && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.paste) }))] })), (handlers.onUndo || handlers.onRedo) && (jsxs(Fragment, { children: [hasPasteData && handlers.onPaste && (jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onUndo && (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between", onClick: handlers.onUndo, disabled: !canUndo, children: [jsx("span", { children: "Undo" }), enableKeyboardShortcuts && keyboardShortcuts.undo && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.undo) }))] })), handlers.onRedo && (jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-between", onClick: handlers.onRedo, disabled: !canRedo, children: [jsx("span", { children: "Redo" }), enableKeyboardShortcuts && keyboardShortcuts.redo && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.redo) }))] }))] })), hasPasteData &&
+                handlers.onPaste &&
+                !handlers.onUndo &&
+                !handlers.onRedo && jsx("div", { className: "h-px bg-gray-200 my-1" }), 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 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() }) }), 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, handlers, canRunPull, bakeableOutputs, }) {
+function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeableOutputs, enableKeyboardShortcuts = true, keyboardShortcuts = {
+    copy: "⌘/Ctrl + C",
+    duplicate: "⌘/Ctrl + D",
+    delete: "Delete",
+}, }) {
     const ref = useRef(null);
     // outside click + ESC
     useEffect(() => {
@@ -3983,6 +4158,12 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeab
         if (open)
             ref.current?.focus();
     }, [open]);
+    // Helper to format shortcut for current platform
+    const formatShortcut = (shortcut) => {
+        const isMac = typeof navigator !== "undefined" &&
+            navigator.userAgent.toLowerCase().includes("mac");
+        return shortcut.replace(/⌘\/Ctrl/g, isMac ? "⌘" : "Ctrl");
+    };
     if (!open || !clientPos || !nodeId)
         return null;
     // clamp
@@ -3994,10 +4175,13 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeab
     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 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: [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" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDuplicateWithEdges, children: "Duplicate with edges" }), 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" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopy, children: "Copy" }), 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 && (jsxs(Fragment, { children: [jsx("div", { className: "h-px bg-gray-200 my-1" }), 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)))] }))] }));
+        }, children: [jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onDelete, children: [jsx("span", { children: "Delete" }), enableKeyboardShortcuts && keyboardShortcuts.delete && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.delete) }))] }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onDuplicate, children: [jsx("span", { children: "Duplicate" }), enableKeyboardShortcuts && keyboardShortcuts.duplicate && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.duplicate) }))] }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDuplicateWithEdges, children: "Duplicate with edges" }), 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" }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onCopy, children: [jsx("span", { children: "Copy" }), enableKeyboardShortcuts && keyboardShortcuts.copy && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.copy) }))] }), 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 && (jsxs(Fragment, { children: [jsx("div", { className: "h-px bg-gray-200 my-1" }), 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)))] }))] }));
 }
 
-function SelectionContextMenu({ open, clientPos, handlers, }) {
+function SelectionContextMenu({ open, clientPos, handlers, enableKeyboardShortcuts = true, keyboardShortcuts = {
+    copy: "⌘/Ctrl + C",
+    delete: "Delete",
+}, }) {
     const ref = useRef(null);
     // Close on outside click and on ESC
     useEffect(() => {
@@ -4024,6 +4208,12 @@ function SelectionContextMenu({ open, clientPos, handlers, }) {
         if (open)
             ref.current?.focus();
     }, [open]);
+    // Helper to format shortcut for current platform
+    const formatShortcut = (shortcut) => {
+        const isMac = typeof navigator !== "undefined" &&
+            navigator.userAgent.toLowerCase().includes("mac");
+        return shortcut.replace(/⌘\/Ctrl/g, isMac ? "⌘" : "Ctrl");
+    };
     if (!open || !clientPos)
         return null;
     // Clamp menu position to viewport
@@ -4035,7 +4225,7 @@ function SelectionContextMenu({ open, clientPos, handlers, }) {
     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 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: [jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Selection" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopy, children: "Copy" }), jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDelete, children: "Delete" })] }));
+        }, children: [jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Selection" }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onCopy, children: [jsx("span", { children: "Copy" }), enableKeyboardShortcuts && keyboardShortcuts.copy && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.copy) }))] }), jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100 flex items-center justify-between", onClick: handlers.onDelete, children: [jsx("span", { children: "Delete" }), enableKeyboardShortcuts && keyboardShortcuts.delete && (jsx("span", { className: "text-gray-400 text-xs ml-4", children: formatShortcut(keyboardShortcuts.delete) }))] })] }));
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
@@ -4373,7 +4563,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         setNodeMenuOpen(false);
         setSelectionMenuOpen(false);
     };
-    const addNodeAt = useCallback(async (typeId, opts) => wb.addNode({ typeId, position: opts.position }, { inputs: opts.inputs }), [wb]);
+    const addNodeAt = useCallback(async (typeId, opts) => wb.addNode({ typeId, position: opts.position }, { inputs: opts.inputs, commit: true }), [wb]);
     const onCloseMenu = useCallback(() => {
         setMenuOpen(false);
     }, []);
@@ -4405,14 +4595,14 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             const data = storage.get();
             if (!data)
                 return;
-            wb.pasteCopiedData(data, position);
+            wb.pasteCopiedData(data, position, { commit: true, reason: "paste" });
             onCloseMenu();
-        });
+        }, runner, () => storage.get(), () => storage.set(null));
         if (overrides?.getDefaultContextMenuHandlers) {
             return overrides.getDefaultContextMenuHandlers(wb, baseHandlers);
         }
         return baseHandlers;
-    }, [addNodeAt, onCloseMenu, overrides, wb]);
+    }, [addNodeAt, onCloseMenu, overrides, wb, runner]);
     const selectionContextMenuHandlers = useMemo(() => {
         // Get storage from override or use workbench's internal storage
         const storage = overrides?.getCopiedDataStorage
@@ -4426,9 +4616,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         }, runner);
         if (overrides?.getSelectionContextMenuHandlers) {
             const selection = wb.getSelection();
-            return overrides.getSelectionContextMenuHandlers(wb, selection, baseHandlers, {
-                getDefaultNodeSize: overrides.getDefaultNodeSize,
-            });
+            return overrides.getSelectionContextMenuHandlers(wb, selection, baseHandlers, { getDefaultNodeSize: overrides.getDefaultNodeSize });
         }
         return baseHandlers;
     }, [wb, runner, overrides, onCloseSelectionMenu]);
@@ -4467,6 +4655,116 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             return [];
         return getBakeableOutputs(nodeAtMenu, wb, registry, outputTypesMap);
     }, [nodeAtMenu, wb, registry, outputTypesMap]);
+    // Keyboard shortcuts configuration
+    const enableKeyboardShortcuts = overrides?.enableKeyboardShortcuts !== false; // Default to true
+    const keyboardShortcuts = overrides?.keyboardShortcuts || {
+        undo: "⌘/Ctrl + Z",
+        redo: "⌘/Ctrl + Shift + Z",
+        copy: "⌘/Ctrl + C",
+        paste: "⌘/Ctrl + V",
+        duplicate: "⌘/Ctrl + D",
+        delete: "Delete",
+    };
+    // Keyboard shortcut handler
+    useEffect(() => {
+        if (!enableKeyboardShortcuts)
+            return;
+        const handleKeyDown = async (e) => {
+            // Ignore if typing in input/textarea
+            const target = e.target;
+            if (target.tagName === "INPUT" ||
+                target.tagName === "TEXTAREA" ||
+                target.isContentEditable) {
+                return;
+            }
+            // Detect Mac platform using userAgent (navigator.platform is deprecated)
+            const isMac = typeof navigator !== "undefined" &&
+                navigator.userAgent.toLowerCase().includes("mac");
+            const modKey = isMac ? e.metaKey : e.ctrlKey;
+            const key = e.key.toLowerCase();
+            // Undo: Cmd/Ctrl + Z
+            if (modKey && key === "z" && !e.shiftKey && !e.altKey) {
+                e.preventDefault();
+                if (runner &&
+                    "onUndo" in defaultContextMenuHandlers &&
+                    defaultContextMenuHandlers.onUndo) {
+                    const canUndo = await runner.canUndo().catch(() => false);
+                    if (canUndo) {
+                        defaultContextMenuHandlers.onUndo();
+                    }
+                }
+                return;
+            }
+            // Redo: Cmd/Ctrl + Shift + Z
+            if (modKey && e.shiftKey && key === "z" && !e.altKey) {
+                e.preventDefault();
+                if (runner &&
+                    "onRedo" in defaultContextMenuHandlers &&
+                    defaultContextMenuHandlers.onRedo) {
+                    const canRedo = await runner.canRedo().catch(() => false);
+                    if (canRedo) {
+                        defaultContextMenuHandlers.onRedo();
+                    }
+                }
+                return;
+            }
+            // Copy: Cmd/Ctrl + C
+            if (modKey && key === "c" && !e.shiftKey && !e.altKey) {
+                const selection = wb.getSelection();
+                if (selection.nodes.length > 0 || selection.edges.length > 0) {
+                    e.preventDefault();
+                    // If single node selected, use node context menu handler; otherwise use selection handler
+                    if (selection.nodes.length === 1 && nodeContextMenuHandlers?.onCopy) {
+                        nodeContextMenuHandlers.onCopy();
+                    }
+                    else if (selectionContextMenuHandlers.onCopy) {
+                        selectionContextMenuHandlers.onCopy();
+                    }
+                }
+                return;
+            }
+            // Duplicate: Cmd/Ctrl + D
+            if (modKey && key === "d" && !e.shiftKey && !e.altKey) {
+                const selection = wb.getSelection();
+                if (selection.nodes.length === 1 &&
+                    nodeContextMenuHandlers?.onDuplicate) {
+                    e.preventDefault();
+                    nodeContextMenuHandlers.onDuplicate();
+                }
+                return;
+            }
+            // Paste: Cmd/Ctrl + V
+            if (modKey && key === "v" && !e.shiftKey && !e.altKey) {
+                e.preventDefault();
+                if ("hasPasteData" in defaultContextMenuHandlers &&
+                    defaultContextMenuHandlers.hasPasteData &&
+                    defaultContextMenuHandlers.hasPasteData() &&
+                    "onPaste" in defaultContextMenuHandlers &&
+                    defaultContextMenuHandlers.onPaste) {
+                    const center = rfInstanceRef.current?.screenToFlowPosition({
+                        x: window.innerWidth / 2,
+                        y: window.innerHeight / 2,
+                    }) || { x: 0, y: 0 };
+                    defaultContextMenuHandlers.onPaste(center);
+                }
+                return;
+            }
+            // Note: Delete/Backspace is handled by ReactFlow's deleteKeyCode prop
+            // which triggers onNodesDelete/onEdgesDelete, so we don't need to handle it here
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => {
+            window.removeEventListener("keydown", handleKeyDown);
+        };
+    }, [
+        enableKeyboardShortcuts,
+        wb,
+        runner,
+        defaultContextMenuHandlers,
+        selectionContextMenuHandlers,
+        nodeContextMenuHandlers,
+        rfInstanceRef,
+    ]);
     // Get custom renderers from UI extension registry (reactive to uiVersion changes)
     const { BackgroundRenderer, MinimapRenderer, ControlsRenderer, DefaultContextMenuRenderer, NodeContextMenuRenderer, connectionLineRenderer, } = useMemo(() => {
         return {
@@ -4481,7 +4779,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const onMoveEnd = useCallback(() => {
         if (rfInstanceRef.current) {
             const viewport = rfInstanceRef.current.getViewport();
-            wb.setViewport({ x: viewport.x, y: viewport.y, zoom: viewport.zoom }, { commit: true });
+            wb.setViewport({ x: viewport.x, y: viewport.y, zoom: viewport.zoom });
         }
     }, [wb]);
     const viewportRef = useRef(null);
@@ -4513,9 +4811,13 @@ 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: [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 &&
+                }, 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, ...(enableKeyboardShortcuts !== false
+                            ? { enableKeyboardShortcuts, keyboardShortcuts }
+                            : {}) })) : (jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!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 }))), selectionMenuOpen && selectionMenuPos && (jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers }))] }) }) }));
+                        (NodeContextMenuRenderer ? (jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, ...(enableKeyboardShortcuts !== false
+                                ? { enableKeyboardShortcuts, keyboardShortcuts }
+                                : {}) })) : (jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))), selectionMenuOpen && selectionMenuPos && (jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))] }) }) }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {