@bian-womp/spark-workbench 0.2.74 → 0.2.75

package/lib/esm/index.js

@@ -6,7 +6,6 @@ import React, { useCallback, useState, useRef, useEffect, useMemo, createContext
 import cx from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { XCircleIcon, WarningCircleIcon, CopyIcon, TrashIcon, XIcon, ArrowClockwiseIcon, ClockClockwiseIcon, StopIcon, PlayIcon, PlugsConnectedIcon, WifiHighIcon, WifiSlashIcon, PlayPauseIcon, LightningIcon, TreeStructureIcon, CornersOutIcon, DownloadIcon, UploadIcon, BugBeetleIcon, ListBulletsIcon } from '@phosphor-icons/react';
-import isEqual from 'lodash/isEqual';
 
 class DefaultUIExtensionRegistry {
     constructor() {
@@ -321,12 +320,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() {
@@ -969,6 +969,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 {
@@ -1140,9 +1158,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 RuntimeApiClient(clientConfig, {
-                onCustomEvent: backend.onCustomEvent,
+                onCustomEvent: wrappedOnCustomEvent,
                 runnerId: this.runnerId,
             });
             // Setup event subscriptions
@@ -1417,6 +1452,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) {
@@ -2434,7 +2483,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()) {
@@ -2444,7 +2494,7 @@ async function download(wb, runner) {
                 def,
                 extData: {
                     ...(fullSnapshot.extData || {}),
-                    ui: uiState,
+                    ui: Object.keys(uiState || {}).length > 0 ? uiState : undefined,
                     runtime: runtimeState || undefined,
                 },
             };
@@ -2456,7 +2506,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`);
@@ -2480,7 +2533,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);
@@ -2727,11 +2781,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,
             });
         }
@@ -3165,6 +3220,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
@@ -3180,9 +3245,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
@@ -3214,7 +3276,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");
@@ -3254,6 +3321,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
             offWbSelectionChanged();
             offRunnerRegistry();
             offRunnerTransport();
+            offFlowViewport();
         };
     }, [runner, wb, setRegistry]);
     const isRunning = useCallback(() => runner.isRunning(), [runner]);
@@ -3612,6 +3680,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)
@@ -3623,13 +3732,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) => {
@@ -3640,12 +3750,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,
@@ -4185,6 +4305,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
     undo: "⌘/Ctrl + Z",
     redo: "⌘/Ctrl + Shift + Z",
     paste: "⌘/Ctrl + V",
+    selectAll: "⌘/Ctrl + A",
 }, }) {
     const rf = useReactFlow();
     const [query, setQuery] = useState("");
@@ -4287,7 +4408,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
     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: [hasPasteData && handlers.onPaste && (jsx(ContextMenuButton, { label: "Paste", onClick: handlePaste, shortcut: keyboardShortcuts.paste, enableKeyboardShortcuts: enableKeyboardShortcuts })), (handlers.onUndo || handlers.onRedo) && (jsxs(Fragment, { children: [hasPasteData && handlers.onPaste && (jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onUndo && (jsx(ContextMenuButton, { label: "Undo", onClick: handlers.onUndo, disabled: !canUndo, shortcut: keyboardShortcuts.undo, enableKeyboardShortcuts: enableKeyboardShortcuts })), handlers.onRedo && (jsx(ContextMenuButton, { label: "Redo", onClick: handlers.onRedo, disabled: !canRedo, shortcut: keyboardShortcuts.redo, enableKeyboardShortcuts: enableKeyboardShortcuts }))] })), hasPasteData &&
+        }, children: [hasPasteData && handlers.onPaste && (jsx(ContextMenuButton, { label: "Paste", onClick: handlePaste, shortcut: keyboardShortcuts.paste, enableKeyboardShortcuts: enableKeyboardShortcuts })), (handlers.onUndo || handlers.onRedo || handlers.onSelectAll) && (jsxs(Fragment, { children: [hasPasteData && handlers.onPaste && (jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onSelectAll && (jsx(ContextMenuButton, { label: "Select All", onClick: handlers.onSelectAll, shortcut: keyboardShortcuts.selectAll, enableKeyboardShortcuts: enableKeyboardShortcuts })), handlers.onSelectAll && (handlers.onUndo || handlers.onRedo) && (jsx("div", { className: "h-px bg-gray-200 my-1" })), handlers.onUndo && (jsx(ContextMenuButton, { label: "Undo", onClick: handlers.onUndo, disabled: !canUndo, shortcut: keyboardShortcuts.undo, enableKeyboardShortcuts: enableKeyboardShortcuts })), handlers.onRedo && (jsx(ContextMenuButton, { label: "Redo", onClick: handlers.onRedo, disabled: !canRedo, shortcut: keyboardShortcuts.redo, enableKeyboardShortcuts: enableKeyboardShortcuts })), (handlers.onUndo || handlers.onRedo) && (jsx("div", { className: "h-px bg-gray-200 my-1" }))] })), 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" })) })] }));
@@ -4295,7 +4416,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 = useRef(null);
@@ -4335,11 +4457,12 @@ 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(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts }), 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(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), 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, ")"] }), jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Duplicate with edges", onClick: handlers.onDuplicateWithEdges, shortcut: keyboardShortcuts.duplicateWithEdges, enableKeyboardShortcuts: enableKeyboardShortcuts }), 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(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), 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, enableKeyboardShortcuts = true, keyboardShortcuts = {
     copy: "⌘/Ctrl + C",
+    duplicate: "⌘/Ctrl + E",
     delete: "Delete",
 }, }) {
     const ref = useRef(null);
@@ -4379,7 +4502,45 @@ function SelectionContextMenu({ open, clientPos, handlers, enableKeyboardShortcu
     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(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts })] }));
+        }, children: [jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Selection" }), jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), handlers.onDuplicate && (jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts })), jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts })] }));
+}
+
+function KeyboardShortcutToast({ message, duration = 1000, onClose, }) {
+    const [isVisible, setIsVisible] = useState(true);
+    const onCloseRef = useRef(onClose);
+    const fadeOutTimerRef = useRef(null);
+    // Keep onClose ref up to date
+    useEffect(() => {
+        onCloseRef.current = onClose;
+    }, [onClose]);
+    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 (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: 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] = 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) => {
@@ -4424,7 +4585,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) => ({
@@ -4438,7 +4599,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 = useRef(null);
@@ -4754,7 +4915,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);
         }
@@ -4819,9 +4980,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
     useEffect(() => {
         if (!enableKeyboardShortcuts)
@@ -4847,6 +5012,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();
                     }
                 }
@@ -4860,6 +5027,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();
                     }
                 }
@@ -4870,6 +5039,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();
@@ -4880,14 +5051,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
@@ -4898,6 +5092,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,
@@ -4906,6 +5102,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
         };
@@ -4921,6 +5127,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, } = useMemo(() => {
@@ -4936,7 +5143,8 @@ 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 });
+            const viewportData = lod.pick(viewport, ["x", "y", "zoom"]);
+            wb.setViewport(viewportData);
         }
     }, [wb]);
     const viewportRef = useRef(null);
@@ -4957,24 +5165,24 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             });
         }
     });
-    return (jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsx(ReactFlowProvider, { children: jsxs(ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, 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 ? (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, ...(enableKeyboardShortcuts !== false
+    return (jsxs("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: [jsx(ReactFlowProvider, { children: jsxs(ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
+                        rfInstanceRef.current = inst;
+                        const savedViewport = wb.getViewport();
+                        if (savedViewport) {
+                            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 ? (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(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 }))] }) }) }));
+                                : {}) })) : (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, ...(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 }))] }) }), toast && (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, }) {
@@ -5511,5 +5719,5 @@ function WorkbenchStudio({ engine, onEngineChange, example, onExampleChange, bac
     return (jsx(WorkbenchProvider, { wb: wb, runner: runner, registry: registry, setRegistry: setRegistry, overrides: overrides, uiVersion: uiVersion, children: jsx(WorkbenchStudioCanvas, { setRegistry: setRegistry, autoScroll: autoScroll, onAutoScrollChange: onAutoScrollChange, example: example, onExampleChange: onExampleChange, engine: engine, onEngineChange: onEngineChange, backendKind: backendKind, onBackendKindChange: onBackendKindChangeWithDispose, httpBaseUrl: httpBaseUrl, onHttpBaseUrlChange: onHttpBaseUrlChange, wsUrl: wsUrl, onWsUrlChange: onWsUrlChange, debug: debug, onDebugChange: onDebugChange, showValues: showValues, onShowValuesChange: onShowValuesChange, hideWorkbench: hideWorkbench, onHideWorkbenchChange: onHideWorkbenchChange, overrides: overrides, onInit: onInit, onChange: onChange }) }));
 }
 
-export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, computeEffectiveHandles, countVisibleHandles, createCopyHandler, createDefaultContextMenuHandlers, createHandleBounds, createHandleLayout, createNodeContextMenuHandlers, createNodeCopyHandler, createSelectionContextMenuHandlers, download, estimateNodeSize, formatDataUrlAsLabel, formatDeclaredTypeSignature, getBakeableOutputs, getHandleBoundsX, getHandleBoundsY, getHandleClassName, getHandleLayoutY, getNodeBorderClassNames, layoutNode, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, upload, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
+export { AbstractWorkbench, CLIWorkbench, DefaultNode, DefaultNodeContent, DefaultNodeHeader, DefaultUIExtensionRegistry, InMemoryWorkbench, Inspector, LocalGraphRunner, NodeHandles, RemoteGraphRunner, WorkbenchCanvas, WorkbenchContext, WorkbenchProvider, WorkbenchStudio, computeEffectiveHandles, countVisibleHandles, createCopyHandler, createDefaultContextMenuHandlers, createHandleBounds, createHandleLayout, createNodeContextMenuHandlers, createNodeCopyHandler, createSelectionContextMenuHandlers, download, estimateNodeSize, excludeViewportFromUIState, formatDataUrlAsLabel, formatDeclaredTypeSignature, getBakeableOutputs, getHandleBoundsX, getHandleBoundsY, getHandleClassName, getHandleLayoutY, getNodeBorderClassNames, isValidViewport, layoutNode, preformatValueForDisplay, prettyHandle, resolveOutputDisplay, summarizeDeep, toReactFlow, upload, useQueryParamBoolean, useQueryParamString, useThrottledValue, useWorkbenchBridge, useWorkbenchContext, useWorkbenchGraphTick, useWorkbenchGraphUiTick, useWorkbenchVersionTick };
 //# sourceMappingURL=index.js.map