@bian-womp/spark-workbench 0.3.3 → 0.3.4

package/lib/cjs/src/misc/SelectionBoundOverlay.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { ReactFlowInstance, Node, Edge } from "@xyflow/react";
+export declare const SelectionBoundOverlay: React.FC<{
+    selection: {
+        nodes: string[];
+        edges: string[];
+    };
+    rfInstance: ReactFlowInstance<Node, Edge> | null;
+}>;
+//# sourceMappingURL=SelectionBoundOverlay.d.ts.map

package/lib/cjs/src/misc/SelectionBoundOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectionBoundOverlay.d.ts","sourceRoot":"","sources":["../../../../src/misc/SelectionBoundOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAE9D,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC;IAC3C,SAAS,EAAE;QAAE,KAAK,EAAE,MAAM,EAAE,CAAC;QAAC,KAAK,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;IAChD,UAAU,EAAE,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,IAAI,CAAC;CAClD,CAgEA,CAAC"}

package/lib/cjs/src/misc/WorkbenchCanvas.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { ReactFlowInstance, Node, Edge, type ReactFlowProps } from "@xyflow/react";
 import type { Viewport } from "@bian-womp/spark-protocol";
 export type WorkbenchCanvasHandle = {
     fitView: () => void;
@@ -12,5 +13,8 @@ export declare const WorkbenchCanvas: React.ForwardRefExoticComponent<{
         width: number;
         height: number;
     } | undefined;
+    reactFlowProps?: Partial<Omit<ReactFlowProps<Node, Edge>, "nodes" | "edges" | "nodeTypes" | "edgeTypes" | "connectionLineComponent" | "onInit" | "onConnect" | "onEdgesChange" | "onEdgesDelete" | "onNodesDelete" | "onNodesChange" | "onMoveEnd">> & {
+        onInit?: (instance: ReactFlowInstance<Node, Edge>) => void;
+    };
 } & React.RefAttributes<WorkbenchCanvasHandle>>;
 //# sourceMappingURL=WorkbenchCanvas.d.ts.map

package/lib/cjs/src/misc/WorkbenchCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkbenchCanvas.d.ts","sourceRoot":"","sources":["../../../../src/misc/WorkbenchCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AAYf,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAsB1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,eAAe;iBAGX,OAAO;cACV,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,MAAM;eAC3C,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO;yBACvC,CACnB,MAAM,EAAE,MAAM,KACX;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;+CAq9BpD,CAAC"}
+{"version":3,"file":"WorkbenchCanvas.d.ts","sourceRoot":"","sources":["../../../../src/misc/WorkbenchCanvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,EAOL,iBAAiB,EACjB,IAAI,EACJ,IAAI,EACJ,KAAK,cAAc,EACpB,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAuB1D,MAAM,MAAM,qBAAqB,GAAG;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;CAC3C,CAAC;AAEF,eAAO,MAAM,eAAe;iBAGX,OAAO;cACV,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,MAAM;eAC3C,CAAC,MAAM,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,OAAO,KAAK,GAAG,CAAC,OAAO;yBACvC,CACnB,MAAM,EAAE,MAAM,KACX;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG,SAAS;qBACjC,OAAO,CACtB,IAAI,CACF,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,EACxB,OAAO,GACP,OAAO,GACP,WAAW,GACX,WAAW,GACX,yBAAyB,GACzB,QAAQ,GACR,WAAW,GACX,eAAe,GACf,eAAe,GACf,eAAe,GACf,eAAe,GACf,WAAW,CACd,CACF,GAAG;QACF,MAAM,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,CAAC;KAC5D;+CAs9BJ,CAAC"}

package/lib/cjs/src/misc/WorkbenchStudio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WorkbenchStudio.d.ts","sourceRoot":"","sources":["../../../../src/misc/WorkbenchStudio.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAW,MAAM,2BAA2B,CAAC;AAgB1E,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAkBvE,OAAO,EAGL,kBAAkB,EACnB,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAK9D,OAAO,EAEL,oBAAoB,EACpB,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAIjC;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,cAAc,CAAC,EAAE,uBAAuB,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACtC;AA2sBD,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,WAAW,EACX,mBAAmB,EACnB,KAAK,EACL,aAAa,EACb,KAAK,EACL,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,oBAAoB,CAAC;IAClC,mBAAmB,EAAE,CAAC,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,OAAO,CAAC;IACvB,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QACd,EAAE,EAAE,iBAAiB,CAAC;QACtB,MAAM,EAAE,YAAY,CAAC;QACrB,eAAe,EAAE,CACf,GAAG,EAAE,eAAe,EACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAC7C,OAAO,CAAC,IAAI,CAAC,CAAC;KACpB,KAAK,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,GAAG,EAAE,eAAe,CAAC;QACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;KACjD,KAAK,IAAI,CAAC;CACZ,2CA8GA"}
+{"version":3,"file":"WorkbenchStudio.d.ts","sourceRoot":"","sources":["../../../../src/misc/WorkbenchStudio.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAW,MAAM,2BAA2B,CAAC;AAgB1E,OAAO,EAAE,KAAK,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAkBvE,OAAO,EAGL,kBAAkB,EACnB,MAAM,4BAA4B,CAAC;AAMpC,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAK9D,OAAO,EAEL,oBAAoB,EACpB,YAAY,EAGb,MAAM,yBAAyB,CAAC;AAIjC;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,cAAc,CAAC,EAAE,uBAAuB,CAAC;IACzC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;CACtC;AA+sBD,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,eAAe,EACf,WAAW,EACX,mBAAmB,EACnB,WAAW,EACX,mBAAmB,EACnB,KAAK,EACL,aAAa,EACb,KAAK,EACL,aAAa,EACb,UAAU,EACV,kBAAkB,EAClB,aAAa,EACb,qBAAqB,EACrB,UAAU,EACV,kBAAkB,EAClB,cAAc,EACd,SAAS,EACT,MAAM,EACN,QAAQ,GACT,EAAE;IACD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,EAAE,oBAAoB,CAAC;IAClC,mBAAmB,EAAE,CAAC,CAAC,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACvD,WAAW,EAAE,MAAM,CAAC;IACpB,mBAAmB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,KAAK,EAAE,OAAO,CAAC;IACf,aAAa,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,OAAO,CAAC;IACvB,qBAAqB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,UAAU,EAAE,OAAO,CAAC;IACpB,kBAAkB,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,SAAS,CAAC,EAAE,kBAAkB,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QACd,EAAE,EAAE,iBAAiB,CAAC;QACtB,MAAM,EAAE,YAAY,CAAC;QACrB,eAAe,EAAE,CACf,GAAG,EAAE,eAAe,EACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,KAC7C,OAAO,CAAC,IAAI,CAAC,CAAC;KACpB,KAAK,IAAI,CAAC;IACX,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE;QAChB,GAAG,EAAE,eAAe,CAAC;QACrB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;KACjD,KAAK,IAAI,CAAC;CACZ,2CA8GA"}

package/lib/cjs/src/misc/context-menu/NodeContextMenu.d.ts

@@ -1,3 +1,3 @@
 import type { NodeContextMenuProps } from "./ContextMenuHandlers";
-export declare function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, runMode, enableKeyboardShortcuts, keyboardShortcuts, }: NodeContextMenuProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, runMode, wb, enableKeyboardShortcuts, keyboardShortcuts, }: NodeContextMenuProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=NodeContextMenu.d.ts.map

package/lib/cjs/src/misc/context-menu/NodeContextMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NodeContextMenu.d.ts","sourceRoot":"","sources":["../../../../../src/misc/context-menu/NodeContextMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGlE,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,EACf,OAAO,EACP,uBAA8B,EAC9B,iBAKC,GACF,EAAE,oBAAoB,kDA6HtB"}
+{"version":3,"file":"NodeContextMenu.d.ts","sourceRoot":"","sources":["../../../../../src/misc/context-menu/NodeContextMenu.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGlE,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,SAAS,EACT,MAAM,EACN,QAAQ,EACR,eAAe,EACf,OAAO,EACP,EAAE,EACF,uBAA8B,EAC9B,iBAKC,GACF,EAAE,oBAAoB,kDAkItB"}

package/lib/esm/index.js

@@ -5516,7 +5516,7 @@ function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, enab
                 !handlers.onRedo && jsx("div", { className: "h-px bg-gray-200 my-1" }), jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node", " ", jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsx("div", { className: "px-2 pb-1", children: jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 rounded px-2 py-1 text-sm outline-none focus:border-gray-400 select-text", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? (renderTree(root)) : (jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" })) })] }));
 }
 
-function NodeContextMenu({ open, clientPos, nodeId, handlers, 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",
@@ -5550,6 +5550,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;
@@ -5559,7 +5563,7 @@ function NodeContextMenu({ open, clientPos, nodeId, handlers, bakeableOutputs, r
     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(ContextMenuButton, { label: "Duplicate with edges", onClick: handlers.onDuplicateWithEdges, shortcut: keyboardShortcuts.duplicateWithEdges, enableKeyboardShortcuts: enableKeyboardShortcuts }), runMode === "manual" && (jsxs(Fragment, { children: [handlers.onRunNode && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunNode, children: "Run node" })), handlers.onRunFromHere && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunFromHere, children: "Run from here" }))] })), 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 }), runMode === "manual" && (jsxs(Fragment, { children: [handlers.onRunNode && (jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunNode, children: "Run node" })), handlers.onRunFromHere && (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" }))] })), 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 = {
@@ -5645,7 +5649,56 @@ function useKeyboardShortcutToast() {
     return { toast, showToast, hideToast };
 }
 
-const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
+const SelectionBoundOverlay = ({ selection, rfInstance }) => {
+    const selectionBounds = 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 (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;
@@ -5760,27 +5813,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     }, [uiVersion, ui]);
     const { nodes, edges } = 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,
@@ -5899,13 +5934,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         resolveNodeType,
     ]);
     const throttled = useThrottledValue({ nodes, edges }, 100);
-    const [menuOpen, setMenuOpen] = useState(false);
-    const [menuPos, setMenuPos] = useState(null);
-    const [nodeMenuOpen, setNodeMenuOpen] = useState(false);
-    const [nodeMenuPos, setNodeMenuPos] = useState(null);
-    const [nodeAtMenu, setNodeAtMenu] = useState(null);
-    const [selectionMenuPos, setSelectionMenuPos] = useState(null);
-    const [selectionMenuOpen, setSelectionMenuOpen] = useState(false);
+    const [menuState, setMenuState] = useState(null);
     // Compute the rectangular screen-space bounds of the current selection
     const getSelectionScreenBounds = () => {
         if (typeof document === "undefined")
@@ -5946,31 +5975,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;
             }
         }
@@ -5982,32 +6004,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();
@@ -6017,28 +6029,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 = useCallback(async (typeId, opts) => wb.addNode({ typeId }, { inputs: opts.inputs, position: opts.position, commit: true }), [wb]);
     const onCloseMenu = useCallback(() => {
-        setMenuOpen(false);
+        setMenuState(null);
     }, []);
     const onCloseNodeMenu = useCallback(() => {
-        setNodeMenuOpen(false);
+        setMenuState(null);
     }, []);
     const onCloseSelectionMenu = useCallback(() => {
-        setSelectionMenuOpen(false);
+        setMenuState(null);
     }, []);
     useEffect(() => {
         const off = wb.on("historyChanged", (event) => {
@@ -6085,8 +6107,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         return baseHandlers;
     }, [wb, runner, overrides, onCloseSelectionMenu]);
     const nodeContextMenuHandlers = 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()
@@ -6102,7 +6125,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         }
         return baseHandlers;
     }, [
-        nodeAtMenu,
+        menuState,
         wb,
         runner,
         wb.registry,
@@ -6115,10 +6138,10 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         overrides?.getCopiedDataStorage,
     ]);
     const bakeableOutputs = 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 || {
@@ -6188,7 +6211,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) {
@@ -6308,21 +6332,25 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         });
         return () => off();
     }, [wb]);
-    return (jsxs("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: [jsx(ReactFlowProvider, { children: jsxs(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 ? (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: wb.registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
-                                ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                : {}) })) : (jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })), !!nodeAtMenu &&
-                            nodeContextMenuHandlers &&
-                            (NodeContextMenuRenderer ? (jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, ...(enableKeyboardShortcuts !== false
-                                    ? { enableKeyboardShortcuts, keyboardShortcuts }
-                                    : {}) })) : (jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), selectionMenuOpen &&
-                            selectionMenuPos &&
-                            (SelectionContextMenuRenderer ? (jsx(SelectionContextMenuRenderer, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsx(SelectionContextMenu, { open: selectionMenuOpen, clientPos: selectionMenuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }) }), toast && (jsx(KeyboardShortcutToast, { message: toast.message, onClose: hideToast }, toast.id))] }));
+    const { onInit: userOnInit, ...restReactFlowProps } = reactFlowProps || {};
+    return (jsxs("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: [jsxs(ReactFlowProvider, { children: [jsxs(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 ? (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, {}), menuState?.type === "default" &&
+                                (DefaultContextMenuRenderer ? (jsx(DefaultContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, ...(enableKeyboardShortcuts !== false
+                                        ? { enableKeyboardShortcuts, keyboardShortcuts }
+                                        : {}) })) : (jsx(DefaultContextMenu, { open: true, clientPos: menuState.menuPos, handlers: defaultContextMenuHandlers, registry: wb.registry, nodeIds: nodeIds, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))), menuState?.type === "node" &&
+                                nodeContextMenuHandlers &&
+                                (NodeContextMenuRenderer ? (jsx(NodeContextMenuRenderer, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode, wb: wb, ...(enableKeyboardShortcuts !== false
+                                        ? { enableKeyboardShortcuts, keyboardShortcuts }
+                                        : {}) })) : (jsx(NodeContextMenu, { open: true, clientPos: menuState.menuPos, nodeId: menuState.nodeId, handlers: nodeContextMenuHandlers, bakeableOutputs: bakeableOutputs, runMode: runMode }))), menuState?.type === "selection" &&
+                                (SelectionContextMenuRenderer ? (jsx(SelectionContextMenuRenderer, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })) : (jsx(SelectionContextMenu, { open: true, clientPos: menuState.menuPos, handlers: selectionContextMenuHandlers, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts })))] }), jsx(SelectionBoundOverlay, { selection: wb.getSelection(), rfInstance: rfInstanceRef.current })] }), toast && (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, }) {
@@ -6738,7 +6766,10 @@ function WorkbenchStudioCanvas({ autoScroll, onAutoScrollChange, example, onExam
                             }
                         }, title: "Select run mode", children: [jsx("option", { value: "manual", children: "Manual" }), jsx("option", { value: "auto", children: "Auto" })] }), renderStartStopButton(), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: runAutoLayout, children: jsx(TreeStructureIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: jsx(CornersOutIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: download$1, children: jsx(DownloadIcon, { size: 24 }) }), jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: triggerUpload, children: jsx(UploadIcon, { size: 24 }) }), jsx("button", { className: "border border-gray-300 rounded p-1", onClick: async () => {
                             await downloadCanvasThumbnail(canvasContainerRef.current);
-                        }, title: "Download Flow Thumbnail (SVG)", children: jsx(ImageIcon, { size: 24 }) }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", ref: canvasContainerRef, children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), 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: jsx(ImageIcon, { size: 24 }) }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsx(BugBeetleIcon, { size: 24, weight: debug ? "fill" : undefined })] }), jsxs("label", { className: "flex items-center gap-1", children: [jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsx(ListBulletsIcon, { size: 24, weight: showValues ? "fill" : undefined })] })] }), jsxs("div", { className: "flex flex-1 min-h-0", children: [jsx("div", { className: "flex-1 min-w-0", ref: canvasContainerRef, children: jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize, reactFlowProps: {
+                                minZoom: 0.1,
+                                maxZoom: 5,
+                            } }) }), 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] = useState(createSimpleGraphRegistry());