@bian-womp/spark-workbench 0.3.3 → 0.3.5

package/lib/cjs/index.cjs

@@ -5518,7 +5518,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
                 !handlers.onRedo && jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node", " ", jsxRuntime.jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsxRuntime.jsx("div", { className: "px-2 pb-1", children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none focus:border-gray-400 select-text", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? (renderTree(root)) : (jsxRuntime.jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" })) })] }));
 }
 
-function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, runMode, enableKeyboardShortcuts = true, keyboardShortcuts = {
+function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, runMode, wb, enableKeyboardShortcuts = true, keyboardShortcuts = {
     copy: "⌘/Ctrl + C",
     duplicate: "⌘/Ctrl + E",
     duplicateWithEdges: "⌘/Ctrl + Shift + E",
@@ -5552,6 +5552,10 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, r
     }, [open]);
     if (!open || !clientPos || !nodeId)
         return null;
+    // Determine if this is a start node (no inbound edges)
+    const isStartNode = wb
+        ? !wb.def.edges.some((e) => e.target.nodeId === nodeId)
+        : false;
     // clamp
     const MENU_MIN_WIDTH = 180;
     const PADDING = 16;
@@ -5561,7 +5565,7 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, r
     return (jsxRuntime.jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700 select-none", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
             e.preventDefault();
             e.stopPropagation();
-        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsxRuntime.jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate with edges", onClick: handlers.onDuplicateWithEdges, shortcut: keyboardShortcuts.duplicateWithEdges, enableKeyboardShortcuts: enableKeyboardShortcuts }), runMode === "manual" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [handlers.onRunNode && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunNode, children: "Run node" })), handlers.onRunFromHere && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunFromHere, children: "Run from here" }))] })), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" }), bakeableOutputs.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxRuntime.jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h)))] }))] }));
+        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsxRuntime.jsx(ContextMenuButton, { label: "Delete", onClick: handlers.onDelete, shortcut: keyboardShortcuts.delete, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate", onClick: handlers.onDuplicate, shortcut: keyboardShortcuts.duplicate, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx(ContextMenuButton, { label: "Duplicate with edges", onClick: handlers.onDuplicateWithEdges, shortcut: keyboardShortcuts.duplicateWithEdges, enableKeyboardShortcuts: enableKeyboardShortcuts }), runMode === "manual" && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [handlers.onRunNode && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunNode, children: "Run node" })), handlers.onRunFromHere && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunFromHere, children: isStartNode ? "Run workflow" : "Run from here" }))] })), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsx(ContextMenuButton, { label: "Copy", onClick: handlers.onCopy, shortcut: keyboardShortcuts.copy, enableKeyboardShortcuts: enableKeyboardShortcuts }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" }), bakeableOutputs.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxRuntime.jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h)))] }))] }));
 }
 
 function SelectionContextMenu({ open, clientPos, handlers, enableKeyboardShortcuts = true, keyboardShortcuts = {
@@ -5647,7 +5651,56 @@ function useKeyboardShortcutToast() {
     return { toast, showToast, hideToast };
 }
 
-const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
+const SelectionBoundOverlay = ({ selection, rfInstance }) => {
+    const selectionBounds = React.useMemo(() => {
+        if (typeof document === "undefined" ||
+            !rfInstance ||
+            selection.nodes.length < 2) {
+            return null;
+        }
+        let bounds = null;
+        for (const nodeId of selection.nodes) {
+            const el = document.querySelector(`.react-flow__node[data-id="${nodeId}"]`);
+            if (!el)
+                continue;
+            const rect = el.getBoundingClientRect();
+            if (!bounds) {
+                bounds = {
+                    left: rect.left,
+                    top: rect.top,
+                    right: rect.right,
+                    bottom: rect.bottom,
+                };
+            }
+            else {
+                bounds.left = Math.min(bounds.left, rect.left);
+                bounds.top = Math.min(bounds.top, rect.top);
+                bounds.right = Math.max(bounds.right, rect.right);
+                bounds.bottom = Math.max(bounds.bottom, rect.bottom);
+            }
+        }
+        return bounds;
+    }, [selection.nodes, rfInstance]);
+    if (!selectionBounds || selection.nodes.length < 2) {
+        return null;
+    }
+    const { left, top, right, bottom } = selectionBounds;
+    const width = right - left;
+    const height = bottom - top;
+    return (jsxRuntime.jsx("div", { style: {
+            position: "fixed",
+            left: `${left}px`,
+            top: `${top}px`,
+            width: `${width}px`,
+            height: `${height}px`,
+            border: "1px dashed #0ea5e9",
+            pointerEvents: "none",
+            zIndex: 4,
+            boxSizing: "border-box",
+        } }));
+};
+
+const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize, reactFlowProps }, ref) => {
     const { wb, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, registryVersion, runner, overrides, runNode, runFromHere, runMode, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
@@ -5762,27 +5815,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     }, [uiVersion, ui]);
     const { nodes, edges } = React.useMemo(() => {
         const sel = wb.getSelection();
-        // Merge defaults with inputs for node display (defaults shown in lighter gray)
-        const inputsWithDefaults = {};
-        for (const n of wb.def.nodes) {
-            const nodeInputs = inputsMap[n.nodeId] ?? {};
-            const nodeDefaults = inputDefaultsMap[n.nodeId] ?? {};
-            const inbound = new Set(wb.def.edges
-                .filter((e) => e.target.nodeId === n.nodeId)
-                .map((e) => e.target.handle));
-            const merged = { ...nodeInputs };
-            for (const [h, v] of Object.entries(nodeDefaults)) {
-                if (!inbound.has(h) && merged[h] === undefined) {
-                    merged[h] = v;
-                }
-            }
-            if (Object.keys(merged).length > 0) {
-                inputsWithDefaults[n.nodeId] = merged;
-            }
-        }
         const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), wb.registry, {
             showValues,
-            inputs: inputsWithDefaults,
+            inputs: inputsMap,
             inputDefaults: inputDefaultsMap,
             outputs: outputsMap,
             resolveNodeType,
@@ -5901,13 +5936,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         resolveNodeType,
     ]);
     const throttled = useThrottledValue({ nodes, edges }, 100);
-    const [menuOpen, setMenuOpen] = React.useState(false);
-    const [menuPos, setMenuPos] = React.useState(null);
-    const [nodeMenuOpen, setNodeMenuOpen] = React.useState(false);
-    const [nodeMenuPos, setNodeMenuPos] = React.useState(null);
-    const [nodeAtMenu, setNodeAtMenu] = React.useState(null);
-    const [selectionMenuPos, setSelectionMenuPos] = React.useState(null);
-    const [selectionMenuOpen, setSelectionMenuOpen] = React.useState(false);
+    const [menuState, setMenuState] = React.useState(null);
     // Compute the rectangular screen-space bounds of the current selection
     const getSelectionScreenBounds = () => {
         if (typeof document === "undefined")
@@ -5948,31 +5977,24 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         if (target) {
             // Resolve node id from data-id attribute React Flow sets
             const nodeId = target.getAttribute("data-id");
-            const isSelected = nodeId && selection.nodes.includes(nodeId);
-            if (isSelected && isSingleNodeSelected) {
-                // Right-clicked on the single selected node - show node menu
-                setNodeAtMenu(nodeId);
-                setNodeMenuPos({ x: e.clientX, y: e.clientY });
-                setNodeMenuOpen(true);
-                setMenuOpen(false);
-                setSelectionMenuOpen(false);
+            if (!nodeId)
                 return;
-            }
-            else if (isSelected) {
+            const isSelected = selection.nodes.includes(nodeId);
+            if (isSelected && !isSingleNodeSelected) {
                 // Right-clicked on a node that's part of multi-selection - show selection menu
-                setSelectionMenuPos({ x: e.clientX, y: e.clientY });
-                setSelectionMenuOpen(true);
-                setMenuOpen(false);
-                setNodeMenuOpen(false);
+                setMenuState({
+                    type: "selection",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                });
                 return;
             }
             else {
                 // Right-clicked on a non-selected node - show node menu
-                setNodeAtMenu(nodeId);
-                setNodeMenuPos({ x: e.clientX, y: e.clientY });
-                setNodeMenuOpen(true);
-                setMenuOpen(false);
-                setSelectionMenuOpen(false);
+                setMenuState({
+                    type: "node",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                    nodeId,
+                });
                 return;
             }
         }
@@ -5984,32 +6006,22 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             if (isSelected && isSingleNodeSelected) {
                 // Right-clicked on an edge, but only one node is selected - show node menu
                 const nodeId = selection.nodes[0];
-                setNodeAtMenu(nodeId);
-                setNodeMenuPos({ x: e.clientX, y: e.clientY });
-                setNodeMenuOpen(true);
-                setMenuOpen(false);
-                setSelectionMenuOpen(false);
+                setMenuState({
+                    type: "node",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                    nodeId,
+                });
                 return;
             }
             else if (isSelected) {
                 // Right-clicked on a selected edge with multiple nodes - show selection menu
-                setSelectionMenuPos({ x: e.clientX, y: e.clientY });
-                setSelectionMenuOpen(true);
-                setMenuOpen(false);
-                setNodeMenuOpen(false);
+                setMenuState({
+                    type: "selection",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                });
                 return;
             }
         }
-        // If only one node is selected (even with edges), show node menu for empty space clicks
-        if (isSingleNodeSelected) {
-            const nodeId = selection.nodes[0];
-            setNodeAtMenu(nodeId);
-            setNodeMenuPos({ x: e.clientX, y: e.clientY });
-            setNodeMenuOpen(true);
-            setMenuOpen(false);
-            setSelectionMenuOpen(false);
-            return;
-        }
         // Check if the cursor is inside the rectangular bounds of the current selection
         // (for multi-selection when right-clicking on empty space within selection bounds)
         const selectionBounds = getSelectionScreenBounds();
@@ -6019,28 +6031,38 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 e.clientX <= right &&
                 e.clientY >= top &&
                 e.clientY <= bottom) {
-                setSelectionMenuPos({ x: e.clientX, y: e.clientY });
-                setSelectionMenuOpen(true);
-                setMenuOpen(false);
-                setNodeMenuOpen(false);
+                // If only one node is selected (even with edges), show node menu for empty space clicks
+                if (isSingleNodeSelected) {
+                    const nodeId = selection.nodes[0];
+                    setMenuState({
+                        type: "node",
+                        menuPos: { x: e.clientX, y: e.clientY },
+                        nodeId,
+                    });
+                    return;
+                }
+                setMenuState({
+                    type: "selection",
+                    menuPos: { x: e.clientX, y: e.clientY },
+                });
                 return;
             }
         }
         // Right-clicked on empty space with no selection - show default menu
-        setMenuPos({ x: e.clientX, y: e.clientY });
-        setMenuOpen(true);
-        setNodeMenuOpen(false);
-        setSelectionMenuOpen(false);
+        setMenuState({
+            type: "default",
+            menuPos: { x: e.clientX, y: e.clientY },
+        });
     };
     const addNodeAt = React.useCallback(async (typeId, opts) => wb.addNode({ typeId }, { inputs: opts.inputs, position: opts.position, commit: true }), [wb]);
     const onCloseMenu = React.useCallback(() => {
-        setMenuOpen(false);
+        setMenuState(null);
     }, []);
     const onCloseNodeMenu = React.useCallback(() => {
-        setNodeMenuOpen(false);
+        setMenuState(null);
     }, []);
     const onCloseSelectionMenu = React.useCallback(() => {
-        setSelectionMenuOpen(false);
+        setMenuState(null);
     }, []);
     React.useEffect(() => {
         const off = wb.on("historyChanged", (event) => {
@@ -6087,8 +6109,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         return baseHandlers;
     }, [wb, runner, overrides, onCloseSelectionMenu]);
     const nodeContextMenuHandlers = React.useMemo(() => {
-        if (!nodeAtMenu)
+        if (menuState?.type !== "node")
             return null;
+        const nodeAtMenu = menuState.nodeId;
         // Get storage from override or use workbench's internal storage
         const storage = overrides?.getCopiedDataStorage
             ? overrides.getCopiedDataStorage()
@@ -6104,7 +6127,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         }
         return baseHandlers;
     }, [
-        nodeAtMenu,
+        menuState,
         wb,
         runner,
         wb.registry,
@@ -6117,10 +6140,10 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         overrides?.getCopiedDataStorage,
     ]);
     const bakeableOutputs = React.useMemo(() => {
-        if (!nodeAtMenu)
+        if (menuState?.type !== "node")
             return [];
-        return getBakeableOutputs(nodeAtMenu, wb, wb.registry, outputTypesMap);
-    }, [nodeAtMenu, wb, wb.registry, registryVersion, outputTypesMap]);
+        return getBakeableOutputs(menuState.nodeId, wb, wb.registry, outputTypesMap);
+    }, [menuState, wb, wb.registry, registryVersion, outputTypesMap]);
     // Keyboard shortcuts configuration
     const enableKeyboardShortcuts = overrides?.enableKeyboardShortcuts !== false; // Default to true
     const keyboardShortcuts = overrides?.keyboardShortcuts || {
@@ -6190,7 +6213,8 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                     const modKeyLabel = isMac ? "⌘" : "Ctrl";
                     showToast(`Copy (${modKeyLabel} + C)`);
                     // If single node selected, use node context menu handler; otherwise use selection handler
-                    if (selection.nodes.length === 1 && nodeContextMenuHandlers?.onCopy) {
+                    if (selection.nodes.length === 1 &&
+                        nodeContextMenuHandlers?.onCopy) {
                         nodeContextMenuHandlers.onCopy();
                     }
                     else if (selectionContextMenuHandlers.onCopy) {
@@ -6310,21 +6334,25 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         });
         return () => off();
     }, [wb]);
-    return (jsxRuntime.jsxs("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: [jsxRuntime.jsx(react.ReactFlowProvider, { children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
-                        rfInstanceRef.current = inst;
-                        const savedViewport = wb.getViewport();
-                        if (savedViewport) {
-                            inst.setViewport(lod.clone(savedViewport));
-                        }
-                    }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [BackgroundRenderer ? (jsxRuntime.jsx(BackgroundRenderer, {})) : (jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsxRuntime.jsx(MinimapRenderer, {}) : jsxRuntime.jsx(react.MiniMap, {}), ControlsRenderer ? jsxRuntime.jsx(ControlsRenderer, {}) : jsxRuntime.jsx(react.Controls, {}), DefaultContextMenuRenderer ? (jsxRuntime.jsx(DefaultContextMenuRenderer, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
-                                ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                : {}) })) : (jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!nodeAtMenu &&
-                            nodeContextMenuHandlers &&
-                            (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, ...(enableKeyboardShortcuts !== false
-                                    ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                    : {}) })) : (jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), selectionMenuOpen &&
-                            selectionMenuPos &&
-                            (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }) }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
+    const { onInit: userOnInit, ...restReactFlowProps } = reactFlowProps || {};
+    return (jsxRuntime.jsxs("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: [jsxRuntime.jsxs(react.ReactFlowProvider, { children: [jsxRuntime.jsxs(react.ReactFlow, { ...restReactFlowProps, nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, edgeTypes: edgeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
+                            rfInstanceRef.current = inst;
+                            const savedViewport = wb.getViewport();
+                            if (savedViewport) {
+                                inst.setViewport(lod.clone(savedViewport));
+                            }
+                            if (userOnInit) {
+                                userOnInit(inst);
+                            }
+                        }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", children: [BackgroundRenderer ? (jsxRuntime.jsx(BackgroundRenderer, {})) : (jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsxRuntime.jsx(MinimapRenderer, {}) : jsxRuntime.jsx(react.MiniMap, {}), ControlsRenderer ? jsxRuntime.jsx(ControlsRenderer, {}) : jsxRuntime.jsx(react.Controls, {}), menuState?.type === "default" &&
+                                (DefaultContextMenuRenderer ? (jsxRuntime.jsx(DefaultContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
+                                        ? { enableKeyboardShortcuts, keyboardShortcuts }
+                                        : {}) })) : (jsxRuntime.jsx(DefaultContextMenu, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))), menuState?.type === "node" &&
+                                nodeContextMenuHandlers &&
+                                (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, ...(enableKeyboardShortcuts !== false
+                                        ? { enableKeyboardShortcuts, keyboardShortcuts }
+                                        : {}) })) : (jsxRuntime.jsx(NodeContextMenu, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), menuState?.type === "selection" &&
+                                (SelectionContextMenuRenderer ? (jsxRuntime.jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsxRuntime.jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }), jsxRuntime.jsx(SelectionBoundOverlay, { selection: wb.getSelection(), rfInstance: rfInstanceRef.current })] }), toast && (jsxRuntime.jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
 });
 
 function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
@@ -6740,7 +6768,10 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
                             }
                         }, title: "Select run mode", children: [jsxRuntime.jsx("option", { value: "manual", children: "Manual" }), jsxRuntime.jsx("option", { value: "auto", children: "Auto" })] }), renderStartStopButton(), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsxRuntime.jsx(react$1.TreeStructureIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsxRuntime.jsx(react$1.CornersOutIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsxRuntime.jsx(react$1.DownloadIcon, { size: 24 }) }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsxRuntime.jsx(react$1.UploadIcon, { size: 24 }) }), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
                             await downloadCanvasThumbnail(canvasContainerRef.current);
-                        }, title: "Download Flow Thumbnail (SVG)", children: jsxRuntime.jsx(react$1.ImageIcon, { size: 24 }) }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", ref: canvasContainerRef, children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
+                        }, title: "Download Flow Thumbnail (SVG)", children: jsxRuntime.jsx(react$1.ImageIcon, { size: 24 }) }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx(react$1.BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxRuntime.jsxs("label", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx(react$1.ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", ref: canvasContainerRef, children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize, reactFlowProps: {
+                                minZoom: 0.1,
+                                maxZoom: 5,
+                            } }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, contextPanel: overrides?.contextPanel })] })] }));
 }
 function WorkbenchStudio({ example, onExampleChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, autoScroll, onAutoScrollChange, backendOptions, overrides, onInit, onChange, }) {
     const [registry, setRegistry] = React.useState(sparkGraph.createSimpleGraphRegistry());