@bian-womp/spark-workbench 0.2.73 → 0.2.75

package/lib/cjs/index.cjs

@@ -8,7 +8,6 @@ var React = require('react');
 var cx = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 var react$1 = require('@phosphor-icons/react');
-var isEqual = require('lodash/isEqual');
 
 class DefaultUIExtensionRegistry {
     constructor() {
@@ -280,7 +279,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
     }
     // Position and selection APIs for React Flow bridge
     setPositions(map, options) {
-        this.positions = { ...map };
+        this.positions = { ...this.positions, ...map };
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "moveNodes" },
@@ -323,12 +322,13 @@ class InMemoryWorkbench extends AbstractWorkbench {
         // Clear selection
         this.setSelection({ nodes: [], edges: [] }, options);
     }
-    setViewport(viewport, options) {
+    setViewport(viewport) {
+        if (lod.isEqual(this.viewport, viewport))
+            return;
         this.viewport = { ...viewport };
         this.emit("graphUiChanged", {
             def: this.def,
             change: { type: "viewport" },
-            ...options,
         });
     }
     getViewport() {
@@ -971,6 +971,24 @@ class LocalGraphRunner extends AbstractGraphRunner {
     }
 }
 
+function isValidViewport(viewport) {
+    return (viewport !== null &&
+        typeof viewport === "object" &&
+        "x" in viewport &&
+        "y" in viewport &&
+        "zoom" in viewport &&
+        typeof viewport.x === "number" &&
+        typeof viewport.y === "number" &&
+        typeof viewport.zoom === "number");
+}
+function excludeViewportFromUIState(uiState) {
+    if (!uiState) {
+        return {};
+    }
+    const { viewport: _ignoredViewport, ...rest } = uiState;
+    return rest;
+}
+
 // Counter for generating readable runner IDs
 let remoteRunnerCounter = 0;
 class RemoteGraphRunner extends AbstractGraphRunner {
@@ -1142,9 +1160,26 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         this.clientPromise = (async () => {
             // Build client config from backend config
             const clientConfig = this.buildClientConfig(backend);
-            // Create client with custom event handler if provided
+            // Wrap custom event handler to intercept flow-viewport events and emit viewport event
+            const wrappedOnCustomEvent = (event) => {
+                const msg = event?.message;
+                if (msg &&
+                    typeof msg === "object" &&
+                    "type" in msg &&
+                    msg.type === "flow-viewport") {
+                    const viewport = msg.payload?.viewport;
+                    if (isValidViewport(viewport)) {
+                        this.emit("viewport", { viewport });
+                    }
+                }
+                // Call original handler if provided
+                if (backend.onCustomEvent) {
+                    backend.onCustomEvent(event);
+                }
+            };
+            // Create client with wrapped custom event handler
             const client = new sparkRemote.RuntimeApiClient(clientConfig, {
-                onCustomEvent: backend.onCustomEvent,
+                onCustomEvent: wrappedOnCustomEvent,
                 runnerId: this.runnerId,
             });
             // Setup event subscriptions
@@ -1419,6 +1454,20 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         const client = await this.ensureClient();
         await client.copyOutputs(fromNodeId, toNodeId, options);
     }
+    async setViewport(viewport) {
+        const client = await this.ensureClient();
+        const transport = client.transport;
+        if (transport && transport.send) {
+            transport.send({
+                seq: Date.now(),
+                ts: Date.now(),
+                message: {
+                    type: "SetViewport",
+                    payload: { viewport },
+                },
+            });
+        }
+    }
     triggerExternal(nodeId, event, options) {
         // If engine exists, call directly; otherwise ensure client (fire-and-forget)
         if (this.engine) {
@@ -2436,7 +2485,8 @@ function isSnapshotPayload(parsed) {
 async function download(wb, runner) {
     try {
         const def = wb.export();
-        const uiState = wb.getUIState();
+        const fullUiState = wb.getUIState();
+        const uiState = excludeViewportFromUIState(fullUiState);
         const runtimeState = wb.getRuntimeState();
         let snapshot;
         if (runner.isRunning()) {
@@ -2446,7 +2496,7 @@ async function download(wb, runner) {
                 def,
                 extData: {
                     ...(fullSnapshot.extData || {}),
-                    ui: uiState,
+                    ui: Object.keys(uiState || {}).length > 0 ? uiState : undefined,
                     runtime: runtimeState || undefined,
                 },
             };
@@ -2458,7 +2508,10 @@ async function download(wb, runner) {
                 inputs,
                 outputs: {},
                 environment: {},
-                extData: { ui: uiState, runtime: runtimeState || undefined },
+                extData: {
+                    ui: Object.keys(uiState || {}).length > 0 ? uiState : undefined,
+                    runtime: runtimeState || undefined,
+                },
             };
         }
         downloadJSON(snapshot, `spark-snapshot-${generateTimestamp()}.json`);
@@ -2482,7 +2535,8 @@ async function upload(parsed, wb, runner) {
     }
     await wb.load(def);
     if (extData.ui && typeof extData.ui === "object") {
-        wb.setUIState(extData.ui);
+        const uiWithoutViewport = excludeViewportFromUIState(extData.ui);
+        wb.setUIState(uiWithoutViewport);
     }
     if (extData.runtime && typeof extData.runtime === "object") {
         wb.setRuntimeState(extData.runtime);
@@ -2729,11 +2783,12 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
             // Save cleaned metadata to workbench state
             wb.setRuntimeState(metadata);
-            // Get UI state
-            const uiState = wb.getUIState();
-            // Save both runtime and UI state to extData (merge to preserve both)
+            const fullUiState = wb.getUIState();
+            const uiWithoutViewport = excludeViewportFromUIState(fullUiState);
             await runner.setExtData?.({
-                ...(uiState ? { ui: uiState } : {}),
+                ...(Object.keys(uiWithoutViewport || {}).length > 0
+                    ? { ui: uiWithoutViewport }
+                    : {}),
                 runtime: metadata,
             });
         }
@@ -3167,6 +3222,16 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             }
         });
         const offWbGraphUiChanged = wb.on("graphUiChanged", async (event) => {
+            // Handle viewport changes separately (send via SetViewport command, not commit)
+            if (event.change?.type === "viewport") {
+                const viewport = wb.getViewport();
+                if (viewport && runner.setViewport) {
+                    runner.setViewport(viewport).catch((err) => {
+                        console.warn("[WorkbenchContext] Failed to send viewport update:", err);
+                    });
+                }
+                return;
+            }
             // Only commit if commit flag is true (e.g., drag end, not during dragging)
             if (event.commit) {
                 // Build detailed reason from change type
@@ -3182,9 +3247,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                     else if (changeType === "selection") {
                         reason = "selection";
                     }
-                    else if (changeType === "viewport") {
-                        reason = "viewport";
-                    }
                 }
                 await saveUiRuntimeMetadata();
                 const history = await runner
@@ -3216,7 +3278,12 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 console.error("Failed to handle registry changed event");
             }
         });
-        // Handle transport changes: reset runtime status when connection is lost
+        const offFlowViewport = runner.on("viewport", (event) => {
+            const viewport = event.viewport;
+            if (isValidViewport(viewport)) {
+                wb.setViewport(viewport);
+            }
+        });
         const offRunnerTransport = runner.on("transport", (t) => {
             if (t.state === "disconnected") {
                 console.info("[WorkbenchContext] Transport disconnected, resetting node status");
@@ -3256,6 +3323,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offWbSelectionChanged();
             offRunnerRegistry();
             offRunnerTransport();
+            offFlowViewport();
         };
     }, [runner, wb, setRegistry]);
     const isRunning = React.useCallback(() => runner.isRunning(), [runner]);
@@ -3614,6 +3682,47 @@ function createNodeCopyHandler(wb, runner, nodeId, getDefaultNodeSize, onCopyRes
  * Creates base selection context menu handlers.
  */
 function createSelectionContextMenuHandlers(wb, onClose, getDefaultNodeSize, onCopyResult, runner) {
+    const onDuplicate = runner
+        ? () => {
+            const selection = wb.getSelection();
+            if (selection.nodes.length === 0) {
+                onClose();
+                return;
+            }
+            const def = wb.export();
+            const positions = wb.getPositions();
+            const newNodes = [];
+            // Duplicate each selected node
+            for (const nodeId of selection.nodes) {
+                const n = def.nodes.find((n) => n.nodeId === nodeId);
+                if (!n)
+                    continue;
+                const pos = positions[nodeId] || { x: 0, y: 0 };
+                // Get inputs without bindings (literal values only)
+                const allInputs = runner.getInputs(def)[nodeId] || {};
+                const inboundHandles = new Set(def.edges
+                    .filter((e) => e.target.nodeId === nodeId)
+                    .map((e) => e.target.handle));
+                const inputsWithoutBindings = Object.fromEntries(Object.entries(allInputs).filter(([handle]) => !inboundHandles.has(handle)));
+                const newNodeId = wb.addNode({
+                    typeId: n.typeId,
+                    params: n.params,
+                    position: { x: pos.x + 24, y: pos.y + 24 },
+                    resolvedHandles: n.resolvedHandles,
+                }, {
+                    inputs: inputsWithoutBindings,
+                    copyOutputsFrom: nodeId,
+                    dry: true,
+                });
+                newNodes.push(newNodeId);
+            }
+            // Select all newly duplicated nodes
+            if (newNodes.length > 0) {
+                wb.setSelection({ nodes: newNodes, edges: [] }, { commit: true, reason: "duplicate-selection" });
+            }
+            onClose();
+        }
+        : undefined;
     return {
         onCopy: runner
             ? createCopyHandler(wb, runner, getDefaultNodeSize, onCopyResult)
@@ -3625,13 +3734,14 @@ function createSelectionContextMenuHandlers(wb, onClose, getDefaultNodeSize, onC
             wb.deleteSelection({ commit: true, reason: "delete-selection" });
             onClose();
         },
+        onDuplicate,
         onClose,
     };
 }
 /**
  * Creates base default context menu handlers.
  */
-function createDefaultContextMenuHandlers(onAddNode, onClose, onPaste, runner, getCopiedData, clearCopiedData, history) {
+function createDefaultContextMenuHandlers(onAddNode, onClose, onPaste, runner, getCopiedData, clearCopiedData, history, wb) {
     // Wrap paste handler to clear storage after paste
     const wrappedOnPaste = onPaste && getCopiedData && clearCopiedData
         ? (position) => {
@@ -3642,12 +3752,22 @@ function createDefaultContextMenuHandlers(onAddNode, onClose, onPaste, runner, g
     const hasPasteData = getCopiedData ? () => !!getCopiedData() : undefined;
     const canUndo = history ? history.undoCount > 0 : undefined;
     const canRedo = history ? history.redoCount > 0 : undefined;
+    const onSelectAll = wb
+        ? () => {
+            const def = wb.export();
+            const allNodeIds = def.nodes.map((n) => n.nodeId);
+            const allEdgeIds = def.edges.map((e) => e.id);
+            wb.setSelection({ nodes: allNodeIds, edges: allEdgeIds }, { commit: true, reason: "select-all" });
+            onClose();
+        }
+        : undefined;
     return {
         onAddNode,
         onPaste: wrappedOnPaste,
         hasPasteData,
         onUndo: runner ? () => runner.undo().then(() => onClose()) : undefined,
         onRedo: runner ? () => runner.redo().then(() => onClose()) : undefined,
+        onSelectAll,
         canUndo,
         canRedo,
         onClose,
@@ -4187,6 +4307,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
     undo: "⌘/Ctrl + Z",
     redo: "⌘/Ctrl + Shift + Z",
     paste: "⌘/Ctrl + V",
+    selectAll: "⌘/Ctrl + A",
 }, }) {
     const rf = react.useReactFlow();
     const [query, setQuery] = React.useState("");
@@ -4289,7 +4410,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
     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: [hasPasteData && handlers.onPaste && (jsxRuntime.jsx(ContextMenuButton, { label: "Paste", onClick: handlePaste, shortcut: keyboardShortcuts.paste, enableKeyboardShortcuts: enableKeyboardShortcuts })), (handlers.onUndo || handlers.onRedo) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasPasteData && handlers.onPaste && (jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onUndo && (jsxRuntime.jsx(ContextMenuButton, { label: "Undo", onClick: handlers.onUndo, disabled: !canUndo, shortcut: keyboardShortcuts.undo, enableKeyboardShortcuts: enableKeyboardShortcuts })), handlers.onRedo && (jsxRuntime.jsx(ContextMenuButton, { label: "Redo", onClick: handlers.onRedo, disabled: !canRedo, shortcut: keyboardShortcuts.redo, enableKeyboardShortcuts: enableKeyboardShortcuts }))] })), hasPasteData &&
+        }, children: [hasPasteData && handlers.onPaste && (jsxRuntime.jsx(ContextMenuButton, { label: "Paste", onClick: handlePaste, shortcut: keyboardShortcuts.paste, enableKeyboardShortcuts: enableKeyboardShortcuts })), (handlers.onUndo || handlers.onRedo || handlers.onSelectAll) && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [hasPasteData && handlers.onPaste && (jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onSelectAll && (jsxRuntime.jsx(ContextMenuButton, { label: "Select All", onClick: handlers.onSelectAll, shortcut: keyboardShortcuts.selectAll, enableKeyboardShortcuts: enableKeyboardShortcuts })), handlers.onSelectAll && (handlers.onUndo || handlers.onRedo) && (jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onUndo && (jsxRuntime.jsx(ContextMenuButton, { label: "Undo", onClick: handlers.onUndo, disabled: !canUndo, shortcut: keyboardShortcuts.undo, enableKeyboardShortcuts: enableKeyboardShortcuts })), handlers.onRedo && (jsxRuntime.jsx(ContextMenuButton, { label: "Redo", onClick: handlers.onRedo, disabled: !canRedo, shortcut: keyboardShortcuts.redo, enableKeyboardShortcuts: enableKeyboardShortcuts })), (handlers.onUndo || handlers.onRedo) && (jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }))] })), hasPasteData &&
                 handlers.onPaste &&
                 !handlers.onUndo &&
                 !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" })) })] }));
@@ -4297,7 +4418,8 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
 
 function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeableOutputs, enableKeyboardShortcuts = true, keyboardShortcuts = {
     copy: "⌘/Ctrl + C",
-    duplicate: "⌘/Ctrl + D",
+    duplicate: "⌘/Ctrl + E",
+    duplicateWithEdges: "⌘/Ctrl + Shift + E",
     delete: "Delete",
 }, }) {
     const ref = React.useRef(null);
@@ -4337,11 +4459,12 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeab
     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("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDuplicateWithEdges, children: "Duplicate with edges" }), canRunPull && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunPull, children: "Run (pull)" })), 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 }), canRunPull && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunPull, children: "Run (pull)" })), 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 = {
     copy: "⌘/Ctrl + C",
+    duplicate: "⌘/Ctrl + E",
     delete: "Delete",
 }, }) {
     const ref = React.useRef(null);
@@ -4381,7 +4504,45 @@ function SelectionContextMenu({ open, clientPos, handlers, enableKeyboardShortcu
     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.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Selection" }), jsxRuntime.jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts })] }));
+        }, children: [jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Selection" }), jsxRuntime.jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), handlers.onDuplicate && (jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts })), jsxRuntime.jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts })] }));
+}
+
+function KeyboardShortcutToast({ message, duration = 1000, onClose, }) {
+    const [isVisible, setIsVisible] = React.useState(true);
+    const onCloseRef = React.useRef(onClose);
+    const fadeOutTimerRef = React.useRef(null);
+    // Keep onClose ref up to date
+    React.useEffect(() => {
+        onCloseRef.current = onClose;
+    }, [onClose]);
+    React.useEffect(() => {
+        const timer = setTimeout(() => {
+            setIsVisible(false);
+            // Wait for fade-out animation before calling onClose
+            fadeOutTimerRef.current = setTimeout(() => {
+                onCloseRef.current();
+            }, 300);
+        }, duration);
+        return () => {
+            clearTimeout(timer);
+            if (fadeOutTimerRef.current) {
+                clearTimeout(fadeOutTimerRef.current);
+            }
+        };
+    }, [duration]);
+    return (jsxRuntime.jsx("div", { className: `fixed top-4 left-1/2 -translate-x-1/2 z-[2000] pointer-events-none transition-opacity duration-300 ${isVisible ? "opacity-100" : "opacity-0"}`, children: jsxRuntime.jsx("div", { className: "bg-white border border-gray-300 rounded-lg shadow-lg px-2 py-1 text-sm text-gray-700 font-medium whitespace-nowrap", children: message }) }));
+}
+// Hook to manage toast state
+function useKeyboardShortcutToast() {
+    const [toast, setToast] = React.useState(null);
+    const showToast = (message) => {
+        const id = Date.now();
+        setToast({ message, id });
+    };
+    const hideToast = () => {
+        setToast(null);
+    };
+    return { toast, showToast, hideToast };
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
@@ -4426,7 +4587,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 inputConnected: n.data.inputConnected,
             },
         });
-        return isEqual(pick(a), pick(b));
+        return lod.isEqual(pick(a), pick(b));
     };
     const isSameEdge = (a, b) => {
         const pick = (e) => ({
@@ -4440,7 +4601,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             label: e.label,
             type: e.type,
         });
-        return isEqual(pick(a), pick(b));
+        return lod.isEqual(pick(a), pick(b));
     };
     // Expose imperative API
     const rfInstanceRef = React.useRef(null);
@@ -4756,7 +4917,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 return;
             wb.pasteCopiedData(data, position, { commit: true, reason: "paste" });
             onCloseMenu();
-        }, runner, () => storage.get(), () => storage.set(null), historyState);
+        }, runner, () => storage.get(), () => storage.set(null), historyState, wb);
         if (overrides?.getDefaultContextMenuHandlers) {
             return overrides.getDefaultContextMenuHandlers(wb, baseHandlers);
         }
@@ -4821,9 +4982,13 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         redo: "⌘/Ctrl + Shift + Z",
         copy: "⌘/Ctrl + C",
         paste: "⌘/Ctrl + V",
-        duplicate: "⌘/Ctrl + D",
+        duplicate: "⌘/Ctrl + E",
+        duplicateWithEdges: "⌘/Ctrl + Shift + E",
+        selectAll: "⌘/Ctrl + A",
         delete: "Delete",
     };
+    // Toast notification for keyboard shortcuts
+    const { toast, showToast, hideToast } = useKeyboardShortcutToast();
     // Keyboard shortcut handler
     React.useEffect(() => {
         if (!enableKeyboardShortcuts)
@@ -4849,6 +5014,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                     defaultContextMenuHandlers.onUndo &&
                     defaultContextMenuHandlers.canUndo) {
                     if (defaultContextMenuHandlers.canUndo) {
+                        const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                        showToast(`Undo (${modKeyLabel} + Z)`);
                         defaultContextMenuHandlers.onUndo();
                     }
                 }
@@ -4862,6 +5029,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                     defaultContextMenuHandlers.onRedo &&
                     defaultContextMenuHandlers.canRedo) {
                     if (defaultContextMenuHandlers.canRedo) {
+                        const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                        showToast(`Redo (${modKeyLabel} + Shift + Z)`);
                         defaultContextMenuHandlers.onRedo();
                     }
                 }
@@ -4872,6 +5041,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 const selection = wb.getSelection();
                 if (selection.nodes.length > 0 || selection.edges.length > 0) {
                     e.preventDefault();
+                    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) {
                         nodeContextMenuHandlers.onCopy();
@@ -4882,14 +5053,37 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 }
                 return;
             }
-            // Duplicate: Cmd/Ctrl + D
-            if (modKey && key === "d" && !e.shiftKey && !e.altKey) {
+            // Duplicate: Cmd/Ctrl + E
+            if (modKey && key === "e" && !e.shiftKey && !e.altKey) {
                 const selection = wb.getSelection();
                 if (selection.nodes.length === 1 &&
                     nodeContextMenuHandlers?.onDuplicate) {
+                    // Single node selected - use node context menu handler
                     e.preventDefault();
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Duplicate (${modKeyLabel} + E)`);
                     nodeContextMenuHandlers.onDuplicate();
                 }
+                else if (selection.nodes.length > 1 &&
+                    selectionContextMenuHandlers.onDuplicate) {
+                    // Multiple nodes selected - use selection context menu handler
+                    e.preventDefault();
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Duplicate (${modKeyLabel} + E)`);
+                    selectionContextMenuHandlers.onDuplicate();
+                }
+                return;
+            }
+            // Duplicate with edges: Cmd/Ctrl + Shift + E
+            if (modKey && key === "e" && e.shiftKey && !e.altKey) {
+                const selection = wb.getSelection();
+                if (selection.nodes.length === 1 &&
+                    nodeContextMenuHandlers?.onDuplicateWithEdges) {
+                    e.preventDefault();
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Duplicate with edges (${modKeyLabel} + Shift + E)`);
+                    nodeContextMenuHandlers.onDuplicateWithEdges();
+                }
                 return;
             }
             // Paste: Cmd/Ctrl + V
@@ -4900,6 +5094,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                     defaultContextMenuHandlers.hasPasteData() &&
                     "onPaste" in defaultContextMenuHandlers &&
                     defaultContextMenuHandlers.onPaste) {
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Paste (${modKeyLabel} + V)`);
                     const center = rfInstanceRef.current?.screenToFlowPosition({
                         x: window.innerWidth / 2,
                         y: window.innerHeight / 2,
@@ -4908,6 +5104,16 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 }
                 return;
             }
+            // Select All: Cmd/Ctrl + A
+            if (modKey && key === "a" && !e.shiftKey && !e.altKey) {
+                e.preventDefault();
+                if (defaultContextMenuHandlers.onSelectAll) {
+                    const modKeyLabel = isMac ? "⌘" : "Ctrl";
+                    showToast(`Select All (${modKeyLabel} + A)`);
+                    defaultContextMenuHandlers.onSelectAll();
+                }
+                return;
+            }
             // Note: Delete/Backspace is handled by ReactFlow's deleteKeyCode prop
             // which triggers onNodesDelete/onEdgesDelete, so we don't need to handle it here
         };
@@ -4923,6 +5129,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         selectionContextMenuHandlers,
         nodeContextMenuHandlers,
         rfInstanceRef,
+        showToast,
     ]);
     // Get custom renderers from UI extension registry (reactive to uiVersion changes)
     const { BackgroundRenderer, MinimapRenderer, ControlsRenderer, DefaultContextMenuRenderer, NodeContextMenuRenderer, connectionLineRenderer, } = React.useMemo(() => {
@@ -4938,7 +5145,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const onMoveEnd = React.useCallback(() => {
         if (rfInstanceRef.current) {
             const viewport = rfInstanceRef.current.getViewport();
-            wb.setViewport({ x: viewport.x, y: viewport.y, zoom: viewport.zoom });
+            const viewportData = lod.pick(viewport, ["x", "y", "zoom"]);
+            wb.setViewport(viewportData);
         }
     }, [wb]);
     const viewportRef = React.useRef(null);
@@ -4959,24 +5167,24 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             });
         }
     });
-    return (jsxRuntime.jsx("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, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
-                    rfInstanceRef.current = inst;
-                    const savedViewport = wb.getViewport();
-                    if (savedViewport) {
-                        viewportRef.current = savedViewport;
-                        inst.setViewport({
-                            x: savedViewport.x,
-                            y: savedViewport.y,
-                            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 ? (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: registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
-                            ? { enableKeyboardShortcuts, keyboardShortcuts }
-                            : {}) })) : (jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!nodeAtMenu &&
-                        nodeContextMenuHandlers &&
-                        (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, ...(enableKeyboardShortcuts !== false
+    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, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
+                        rfInstanceRef.current = inst;
+                        const savedViewport = wb.getViewport();
+                        if (savedViewport) {
+                            viewportRef.current = savedViewport;
+                            inst.setViewport({
+                                x: savedViewport.x,
+                                y: savedViewport.y,
+                                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 ? (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: registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
                                 ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                : {}) })) : (jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))), selectionMenuOpen && selectionMenuPos && (jsxRuntime.jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))] }) }) }));
+                                : {}) })) : (jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!nodeAtMenu &&
+                            nodeContextMenuHandlers &&
+                            (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, ...(enableKeyboardShortcuts !== false
+                                    ? { enableKeyboardShortcuts, keyboardShortcuts }
+                                    : {}) })) : (jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))), selectionMenuOpen && selectionMenuPos && (jsxRuntime.jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))] }) }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
@@ -5539,6 +5747,7 @@ exports.createNodeCopyHandler = createNodeCopyHandler;
 exports.createSelectionContextMenuHandlers = createSelectionContextMenuHandlers;
 exports.download = download;
 exports.estimateNodeSize = estimateNodeSize;
+exports.excludeViewportFromUIState = excludeViewportFromUIState;
 exports.formatDataUrlAsLabel = formatDataUrlAsLabel;
 exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
 exports.getBakeableOutputs = getBakeableOutputs;
@@ -5547,6 +5756,7 @@ exports.getHandleBoundsY = getHandleBoundsY;
 exports.getHandleClassName = getHandleClassName;
 exports.getHandleLayoutY = getHandleLayoutY;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
+exports.isValidViewport = isValidViewport;
 exports.layoutNode = layoutNode;
 exports.preformatValueForDisplay = preformatValueForDisplay;
 exports.prettyHandle = prettyHandle;