@bian-womp/spark-workbench 0.2.83 → 0.2.85

package/lib/esm/index.js

@@ -1,7 +1,7 @@
-import { generateId, GraphBuilder, getTypedOutputValue, isTypedOutput, getInputTypeId, createEngine, StepEngine, PullEngine, BatchedEngine, getTypedOutputTypeId, isInputPrivate, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
+import { generateId, GraphBuilder, getTypedOutputValue, isTypedOutput, getInputTypeId, createEngine, StepEngine, PullEngine, BatchedEngine, getTypedOutputTypeId, isInputPrivate, offsetImportedPositions, createSimpleGraphRegistry, createSimpleGraphDef, createAsyncGraphDef, createAsyncGraphRegistry, createProgressGraphDef, createProgressGraphRegistry, createValidationGraphDef, createValidationGraphRegistry } from '@bian-womp/spark-graph';
 import lod from 'lodash';
 import { RuntimeApiClient } from '@bian-womp/spark-remote';
-import { Position, Handle, useUpdateNodeInternals, useReactFlow, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, MiniMap, Controls } from '@xyflow/react';
+import { Position, Handle, NodeResizer, useReactFlow, ReactFlowProvider, ReactFlow, Background, BackgroundVariant, MiniMap, Controls } from '@xyflow/react';
 import React, { useCallback, useState, useRef, useEffect, useMemo, createContext, useContext, useImperativeHandle } from 'react';
 import cx from 'classnames';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -73,6 +73,13 @@ class DefaultUIExtensionRegistry {
     getNodeContextMenuRenderer() {
         return this.nodeContextMenuRenderer;
     }
+    registerSelectionContextMenuRenderer(renderer) {
+        this.selectionContextMenuRenderer = renderer;
+        return this;
+    }
+    getSelectionContextMenuRenderer() {
+        return this.selectionContextMenuRenderer;
+    }
     // Layout function overrides
     registerEstimateNodeSize(override) {
         this.estimateNodeSizeOverride = override;
@@ -124,6 +131,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this._def = { nodes: [], edges: [] };
         this.listeners = new Map();
         this.positions = {};
+        this.sizes = {};
         this.selection = {
             nodes: [],
             edges: [],
@@ -149,9 +157,11 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const defNodeIds = new Set(this._def.nodes.map((n) => n.nodeId));
         const defEdgeIds = new Set(this._def.edges.map((e) => e.id));
         const filteredPositions = Object.fromEntries(Object.entries(this.positions).filter(([id]) => defNodeIds.has(id)));
+        const filteredSizes = Object.fromEntries(Object.entries(this.sizes).filter(([id]) => defNodeIds.has(id)));
         const filteredNodes = this.selection.nodes.filter((id) => defNodeIds.has(id));
         const filteredEdges = this.selection.edges.filter((id) => defEdgeIds.has(id));
         this.positions = filteredPositions;
+        this.sizes = filteredSizes;
         this.selection = { nodes: filteredNodes, edges: filteredEdges };
         this.emit("graphChanged", { def: this._def });
         this.refreshValidation();
@@ -208,8 +218,10 @@ class InMemoryWorkbench extends AbstractWorkbench {
             params: node.params,
             resolvedHandles: node.resolvedHandles,
         });
-        if (node.position)
-            this.positions[id] = node.position;
+        if (options?.position)
+            this.positions[id] = options.position;
+        if (options?.size)
+            this.sizes[id] = options.size;
         this.emit("graphChanged", {
             def: this._def,
             change: {
@@ -227,6 +239,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this._def.nodes = this._def.nodes.filter((n) => n.nodeId !== nodeId);
         this._def.edges = this._def.edges.filter((e) => e.source.nodeId !== nodeId && e.target.nodeId !== nodeId);
         delete this.positions[nodeId];
+        delete this.sizes[nodeId];
         delete this.nodeNames[nodeId];
         this.emit("graphChanged", {
             def: this._def,
@@ -285,27 +298,38 @@ class InMemoryWorkbench extends AbstractWorkbench {
         });
     }
     // Position and selection APIs for React Flow bridge
-    setPositions(map, options) {
-        this.positions = { ...this.positions, ...map };
+    setPositions(positions, options) {
+        this.positions = { ...this.positions, ...positions };
+        this.emit("graphUiChanged", { change: { type: "moveNodes" }, ...options });
+    }
+    getPositions() {
+        return { ...this.positions };
+    }
+    setSizes(sizes, options) {
+        const updatedSizes = { ...this.sizes };
+        for (const [nodeId, size] of Object.entries(sizes)) {
+            if (size) {
+                updatedSizes[nodeId] = size;
+            }
+            else {
+                delete updatedSizes[nodeId];
+            }
+        }
+        this.sizes = updatedSizes;
         this.emit("graphUiChanged", {
-            def: this._def,
-            change: { type: "moveNodes" },
+            change: { type: "resizeNodes" },
             ...options,
         });
     }
-    getPositions() {
-        return { ...this.positions };
+    getSizes() {
+        return { ...this.sizes };
     }
     setSelectionInternal(sel, options) {
         if (lod.isEqual(this.selection, sel))
             return;
         this.selection = { nodes: [...sel.nodes], edges: [...sel.edges] };
         this.emit("selectionChanged", this.selection);
-        this.emit("graphUiChanged", {
-            def: this._def,
-            change: { type: "selection" },
-            ...options,
-        });
+        this.emit("graphUiChanged", { change: { type: "selection" }, ...options });
     }
     setSelection(sel, options) {
         this.setSelectionInternal(sel, options);
@@ -336,10 +360,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         if (lod.isEqual(this.viewport, viewport))
             return;
         this.viewport = { ...viewport };
-        this.emit("graphUiChanged", {
-            def: this._def,
-            change: { type: "viewport" },
-        });
+        this.emit("graphUiChanged", { change: { type: "viewport" } });
     }
     getViewport() {
         return this.viewport ? { ...this.viewport } : null;
@@ -351,6 +372,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const filteredNodes = this.selection.nodes.filter((id) => defNodeIds.has(id));
         const filteredEdges = this.selection.edges.filter((id) => defEdgeIds.has(id));
         const filteredNodeNames = Object.fromEntries(Object.entries(this.nodeNames).filter(([id]) => defNodeIds.has(id)));
+        const filteredSizes = Object.fromEntries(Object.entries(this.sizes).filter(([id]) => defNodeIds.has(id)));
         return {
             positions: Object.keys(filteredPositions).length > 0
                 ? filteredPositions
@@ -365,6 +387,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
             nodeNames: Object.keys(filteredNodeNames).length > 0
                 ? filteredNodeNames
                 : undefined,
+            sizes: Object.keys(filteredSizes).length > 0 ? filteredSizes : undefined,
         };
     }
     setUIState(ui) {
@@ -379,12 +402,27 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 edges: [...ui.selection.edges],
             };
             this.emit("selectionChanged", this.selection);
+            this.emit("graphUiChanged", {
+                change: { type: "selection" },
+                init: true,
+            });
         }
         if (ui.viewport) {
             this.viewport = { ...ui.viewport };
+            this.emit("graphUiChanged", { change: { type: "viewport" }, init: true });
         }
         if (ui.nodeNames !== undefined) {
             this.nodeNames = { ...ui.nodeNames };
+            for (const [nodeId, name] of Object.entries(ui.nodeNames)) {
+                this.emit("graphUiChanged", {
+                    change: { type: "nodeName", nodeId, name },
+                    init: true,
+                });
+            }
+        }
+        if (ui.sizes !== undefined) {
+            const defNodeIds = new Set(this._def.nodes.map((n) => n.nodeId));
+            this.sizes = Object.fromEntries(Object.entries(ui.sizes).filter(([id]) => defNodeIds.has(id)));
         }
     }
     getRuntimeState() {
@@ -435,6 +473,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         if (selection.nodes.length === 0)
             return null;
         const positions = this.getPositions();
+        const sizes = this.getSizes();
         const selectedNodeSet = new Set(selection.nodes);
         // Collect nodes to copy
         const nodesToCopy = this.def.nodes.filter((n) => selectedNodeSet.has(n.nodeId));
@@ -446,15 +485,16 @@ class InMemoryWorkbench extends AbstractWorkbench {
         let maxX = -Infinity;
         let maxY = -Infinity;
         nodesToCopy.forEach((node) => {
-            const pos = positions[node.nodeId] || { x: 0, y: 0 };
-            const size = getNodeSize?.(node.nodeId, node.typeId) || {
-                width: 200,
-                height: 100,
-            };
-            minX = Math.min(minX, pos.x);
-            minY = Math.min(minY, pos.y);
-            maxX = Math.max(maxX, pos.x + size.width);
-            maxY = Math.max(maxY, pos.y + size.height);
+            const pos = positions[node.nodeId];
+            const size = sizes[node.nodeId] || getNodeSize?.(node.nodeId, node.typeId);
+            if (pos) {
+                minX = Math.min(minX, pos.x);
+                minY = Math.min(minY, pos.y);
+                if (size) {
+                    maxX = Math.max(maxX, pos.x + size.width);
+                    maxY = Math.max(maxY, pos.y + size.height);
+                }
+            }
         });
         const bounds = { minX, minY, maxX, maxY };
         const centerX = (bounds.minX + bounds.maxX) / 2;
@@ -464,7 +504,8 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const allInputs = runner.getInputs(this.def);
         const selectedEdgeSet = new Set(selection.edges);
         const copiedNodes = nodesToCopy.map((node) => {
-            const pos = positions[node.nodeId] || { x: 0, y: 0 };
+            const pos = positions[node.nodeId];
+            const size = sizes[node.nodeId];
             // Get all inbound edges for this node
             const inboundEdges = this.def.edges.filter((e) => e.target.nodeId === node.nodeId);
             // Build set of handles that have inbound edges
@@ -481,10 +522,13 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 typeId: node.typeId,
                 params: node.params,
                 resolvedHandles: node.resolvedHandles,
-                position: {
-                    x: pos.x - centerX,
-                    y: pos.y - centerY,
-                },
+                position: pos
+                    ? {
+                        x: pos.x - centerX,
+                        y: pos.y - centerY,
+                    }
+                    : undefined,
+                size,
                 inputs: inputsToCopy,
                 originalNodeId: node.nodeId,
             };
@@ -519,6 +563,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         if (selection.nodes.length === 0)
             return [];
         const positions = this.getPositions();
+        const sizes = this.getSizes();
         const newNodes = [];
         // Get inputs without bindings (literal values only)
         const allInputs = runner.getInputs(this.def) || {};
@@ -527,7 +572,8 @@ class InMemoryWorkbench extends AbstractWorkbench {
             const n = this.def.nodes.find((n) => n.nodeId === nodeId);
             if (!n)
                 continue;
-            const pos = positions[nodeId] || { x: 0, y: 0 };
+            const pos = positions[nodeId];
+            const size = sizes[nodeId];
             const inboundHandles = new Set(this.def.edges
                 .filter((e) => e.target.nodeId === nodeId)
                 .map((e) => e.target.handle));
@@ -535,10 +581,11 @@ class InMemoryWorkbench extends AbstractWorkbench {
             const newNodeId = this.addNode({
                 typeId: n.typeId,
                 params: n.params,
-                position: { x: pos.x + 24, y: pos.y + 24 },
                 resolvedHandles: n.resolvedHandles,
             }, {
                 inputs: inputsWithoutBindings,
+                position: pos ? { x: pos.x + 24, y: pos.y + 24 } : undefined,
+                size,
                 copyOutputsFrom: nodeId,
                 dry: true,
             });
@@ -585,8 +632,10 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 const coerced = await coerceIfNeeded(outputTypeId, inType, unwrap(outputValue));
                 newNodeId = this.addNode({
                     typeId: singleTarget.nodeTypeId,
+                }, {
+                    inputs: { [singleTarget.inputHandle]: coerced },
                     position: { x: pos.x + 180, y: pos.y },
-                }, { inputs: { [singleTarget.inputHandle]: coerced } });
+                });
             }
             else if (isArray && arrTarget) {
                 const nodeDesc = registry.nodes.get(arrTarget.nodeTypeId);
@@ -594,8 +643,10 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 const coerced = await coerceIfNeeded(outputTypeId, inType, unwrap(outputValue));
                 newNodeId = this.addNode({
                     typeId: arrTarget.nodeTypeId,
+                }, {
                     position: { x: pos.x + 180, y: pos.y },
-                }, { inputs: { [arrTarget.inputHandle]: coerced } });
+                    inputs: { [arrTarget.inputHandle]: coerced },
+                });
             }
             else if (isArray && elemTarget) {
                 const nodeDesc = registry.nodes.get(elemTarget.nodeTypeId);
@@ -611,8 +662,10 @@ class InMemoryWorkbench extends AbstractWorkbench {
                     const row = Math.floor(idx / COLS);
                     newNodeId = this.addNode({
                         typeId: elemTarget.nodeTypeId,
+                    }, {
                         position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
-                    }, { inputs: { [elemTarget.inputHandle]: coercedItems[idx] } });
+                        inputs: { [elemTarget.inputHandle]: coercedItems[idx] },
+                    });
                 }
             }
             if (newNodeId) {
@@ -634,7 +687,8 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const n = this.def.nodes.find((n) => n.nodeId === nodeId);
         if (!n)
             return undefined;
-        const pos = this.getPositions()[nodeId] || { x: 0, y: 0 };
+        const pos = this.getPositions()[nodeId];
+        const size = this.getSizes()[nodeId];
         // Get inputs without bindings (literal values only)
         const allInputs = runner.getInputs(this.def)[nodeId] || {};
         const inboundHandles = new Set(this.def.edges
@@ -644,10 +698,11 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const newNodeId = this.addNode({
             typeId: n.typeId,
             params: n.params,
-            position: { x: pos.x + 24, y: pos.y + 24 },
             resolvedHandles: n.resolvedHandles,
         }, {
             inputs: inputsWithoutBindings,
+            position: pos ? { x: pos.x + 24, y: pos.y + 24 } : undefined,
+            size,
             copyOutputsFrom: nodeId,
             dry: true,
         });
@@ -665,17 +720,19 @@ class InMemoryWorkbench extends AbstractWorkbench {
         const n = this.def.nodes.find((n) => n.nodeId === nodeId);
         if (!n)
             return undefined;
-        const pos = this.getPositions()[nodeId] || { x: 0, y: 0 };
+        const pos = this.getPositions()[nodeId];
+        const size = this.getSizes()[nodeId];
         // Get all inputs (including those with bindings, since edges will be duplicated)
         const inputs = runner.getInputs(this.def)[nodeId] || {};
         // Add the duplicated node
         const newNodeId = this.addNode({
             typeId: n.typeId,
             params: n.params,
-            position: { x: pos.x + 24, y: pos.y + 24 },
             resolvedHandles: n.resolvedHandles,
         }, {
             inputs,
+            position: pos ? { x: pos.x + 24, y: pos.y + 24 } : undefined,
+            size,
             copyOutputsFrom: nodeId,
             dry: true,
         });
@@ -709,12 +766,15 @@ class InMemoryWorkbench extends AbstractWorkbench {
                 typeId: nodeData.typeId,
                 params: nodeData.params,
                 resolvedHandles: nodeData.resolvedHandles,
-                position: {
-                    x: nodeData.position.x + center.x,
-                    y: nodeData.position.y + center.y,
-                },
             }, {
                 inputs: nodeData.inputs,
+                position: nodeData.position
+                    ? {
+                        x: nodeData.position.x + center.x,
+                        y: nodeData.position.y + center.y,
+                    }
+                    : undefined,
+                size: nodeData.size,
                 copyOutputsFrom: nodeData.originalNodeId,
                 dry: true,
             });
@@ -773,8 +833,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
             this.nodeNames[nodeId] = name.trim();
         }
         this.emit("graphUiChanged", {
-            def: this._def,
-            change: { type: "nodeName", nodeId },
+            change: { type: "nodeName", nodeId, name },
             ...options,
         });
     }
@@ -2194,7 +2253,6 @@ function useWorkbenchBridge(wb) {
         }, { commit: true });
     }, [wb]);
     const onNodesChange = useCallback((changes) => {
-        // Apply position updates continuously, but mark commit only on drag end
         const positions = {};
         let commit = false;
         changes.forEach((c) => {
@@ -2204,6 +2262,14 @@ function useWorkbenchBridge(wb) {
                     commit = true;
             }
         });
+        const sizes = {};
+        changes.forEach((c) => {
+            if (c.type === "dimensions" && c.dimensions) {
+                sizes[c.id] = c.dimensions;
+                if (!c.resizing)
+                    commit = true;
+            }
+        });
         // Derive next node selection from change set
         const current = wb.getSelection();
         const nextNodeIds = new Set(current.nodes);
@@ -2238,7 +2304,12 @@ function useWorkbenchBridge(wb) {
             });
         }
         if (Object.keys(positions).length > 0) {
-            wb.setPositions(positions, { commit });
+            wb.setPositions(positions, {
+                commit: commit && !Object.keys(sizes).length,
+            });
+        }
+        if (Object.keys(sizes).length > 0) {
+            wb.setSizes(sizes, { commit });
         }
     }, [wb]);
     const onEdgesDelete = useCallback((edges) => edges.forEach((e, idx) => wb.disconnect(e.id, { commit: idx === edges.length - 1 })), [wb]);
@@ -2428,7 +2499,7 @@ function useQueryParamString(key, defaultValue) {
     return [val, set];
 }
 
-function toReactFlow(def, positions, registry, opts) {
+function toReactFlow(def, positions, sizes, registry, opts) {
     const EDGE_STYLE_MISSING = { stroke: "#f59e0b", strokeWidth: 2 }; // amber-500
     const EDGE_STYLE_ERROR = { stroke: "#ef4444", strokeWidth: 2 };
     const EDGE_STYLE_RUNNING = { stroke: "#3b82f6" };
@@ -2472,45 +2543,41 @@ function toReactFlow(def, positions, registry, opts) {
     const createHandleBoundsFn = opts.ui?.getCreateHandleBounds() ?? createHandleBounds;
     const createHandleLayoutFn = opts.ui?.getCreateHandleLayout() ?? createHandleLayout;
     const estimateNodeSizeFn = opts.ui?.getEstimateNodeSize() ?? estimateNodeSize;
-    const nodes = def.nodes.map((n) => {
-        const { inputs: inputSource, outputs: outputSource } = computeEffectiveHandles(n, registry);
-        const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
-        // If layoutNode is overridden, use it directly; otherwise use default with internal overrides
-        const geom = layoutNodeOverride
+    const computeLayout = (node, overrides) => {
+        return layoutNodeOverride
             ? layoutNodeOverride({
-                node: n,
+                node,
                 registry,
                 showValues: opts.showValues,
-                overrides: overrideSize,
+                overrides,
             })
             : layoutNode({
-                node: n,
+                node,
                 registry,
                 showValues: opts.showValues,
-                overrides: overrideSize,
+                overrides,
             }, {
                 estimateNodeSize: estimateNodeSizeFn,
                 createHandleBounds: createHandleBoundsFn,
                 createHandleLayout: createHandleLayoutFn,
             });
-        const inputHandles = geom.inputOrder.map((id) => ({
-            id,
-            typeId: getInputTypeId(inputSource, id),
-        }));
-        const outputHandles = geom.outputOrder.map((id) => ({
-            id,
-            typeId: formatDeclaredTypeSignature(outputSource[id]),
-        }));
-        nodeHandleMap[n.nodeId] = {
-            inputs: new Set(inputHandles.map((h) => h.id)),
-            outputs: new Set(outputHandles.map((h) => h.id)),
-        };
-        // Append placeholder entries for any missing handles (below valid ones)
+    };
+    const calculateDimensionsWithMissingHandles = (geom, extraInputs, extraOutputs) => {
         const baseLeftCount = geom.inputOrder.length;
         const baseRightCount = geom.outputOrder.length;
-        const extraInputs = Array.from(missingInputsByNode[n.nodeId] || []);
-        const extraOutputs = Array.from(missingOutputsByNode[n.nodeId] || []);
-        const extraHandleLayoutLeft = extraInputs.map((id, i) => ({
+        const baseRows = Math.max(baseLeftCount, baseRightCount);
+        const newRows = Math.max(baseLeftCount + extraInputs.length, baseRightCount + extraOutputs.length);
+        return {
+            baseLeftCount,
+            baseRightCount,
+            baseRows,
+            newRows,
+            width: geom.width,
+            height: geom.height + Math.max(0, newRows - baseRows) * NODE_ROW_HEIGHT_PX,
+        };
+    };
+    const createMissingHandleLayouts = (extraInputs, extraOutputs, baseLeftCount, baseRightCount) => {
+        const left = extraInputs.map((id, i) => ({
             ...createHandleLayoutFn({
                 id,
                 type: "target",
@@ -2519,7 +2586,7 @@ function toReactFlow(def, positions, registry, opts) {
             }),
             missing: true,
         }));
-        const extraHandleLayoutRight = extraOutputs.map((id, i) => ({
+        const right = extraOutputs.map((id, i) => ({
             ...createHandleLayoutFn({
                 id,
                 type: "source",
@@ -2528,36 +2595,58 @@ function toReactFlow(def, positions, registry, opts) {
             }),
             missing: true,
         }));
-        const handleLayout = [
-            ...geom.handleLayout,
-            ...extraHandleLayoutLeft,
-            ...extraHandleLayoutRight,
-        ];
-        // Precompute handle bounds (including missing) so edges can render immediately
-        const missingBoundsLeft = extraInputs.map((id, i) => createHandleBoundsFn({
+        return [...left, ...right];
+    };
+    const createMissingHandleBounds = (extraInputs, extraOutputs, baseLeftCount, baseRightCount, nodeWidth) => {
+        const left = extraInputs.map((id, i) => createHandleBoundsFn({
             id,
             type: "target",
             position: Position.Left,
             rowIndex: baseLeftCount + i,
-            nodeWidth: geom.width,
+            nodeWidth,
         }));
-        const missingBoundsRight = extraOutputs.map((id, i) => createHandleBoundsFn({
+        const right = extraOutputs.map((id, i) => createHandleBoundsFn({
             id,
             type: "source",
             position: Position.Right,
             rowIndex: baseRightCount + i,
-            nodeWidth: geom.width,
+            nodeWidth,
         }));
-        const handles = [
-            ...geom.handles,
-            ...missingBoundsLeft,
-            ...missingBoundsRight,
-        ];
-        // Adjust node height to accommodate missing handle rows
-        const baseRows = Math.max(baseLeftCount, baseRightCount);
-        const newRows = Math.max(baseLeftCount + extraInputs.length, baseRightCount + extraOutputs.length);
-        const initialWidth = geom.width;
-        const initialHeight = geom.height + Math.max(0, newRows - baseRows) * NODE_ROW_HEIGHT_PX;
+        return [...left, ...right];
+    };
+    const nodes = def.nodes.map((n) => {
+        const { inputs: inputSource, outputs: outputSource } = computeEffectiveHandles(n, registry);
+        const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
+        const customSize = sizes?.[n.nodeId];
+        const sizeOverrides = customSize
+            ? { ...overrideSize, width: customSize.width, height: customSize.height }
+            : overrideSize;
+        const extraInputs = Array.from(missingInputsByNode[n.nodeId] || []);
+        const extraOutputs = Array.from(missingOutputsByNode[n.nodeId] || []);
+        const geom = computeLayout(n, sizeOverrides);
+        const finalDims = calculateDimensionsWithMissingHandles(geom, extraInputs, extraOutputs);
+        const renderWidth = customSize?.width ?? finalDims.width;
+        const renderHeight = customSize?.height ?? finalDims.height;
+        const initialGeom = customSize ? computeLayout(n, overrideSize) : geom;
+        const initialDims = customSize
+            ? calculateDimensionsWithMissingHandles(initialGeom, extraInputs, extraOutputs)
+            : finalDims;
+        const inputHandles = geom.inputOrder.map((id) => ({
+            id,
+            typeId: getInputTypeId(inputSource, id),
+        }));
+        const outputHandles = geom.outputOrder.map((id) => ({
+            id,
+            typeId: formatDeclaredTypeSignature(outputSource[id]),
+        }));
+        nodeHandleMap[n.nodeId] = {
+            inputs: new Set(inputHandles.map((h) => h.id)),
+            outputs: new Set(outputHandles.map((h) => h.id)),
+        };
+        const missingHandleLayouts = createMissingHandleLayouts(extraInputs, extraOutputs, finalDims.baseLeftCount, finalDims.baseRightCount);
+        const handleLayout = [...geom.handleLayout, ...missingHandleLayouts];
+        const missingHandleBounds = createMissingHandleBounds(extraInputs, extraOutputs, finalDims.baseLeftCount, finalDims.baseRightCount, renderWidth);
+        const handles = [...geom.handles, ...missingHandleBounds];
         return {
             id: n.nodeId,
             data: {
@@ -2571,8 +2660,10 @@ function toReactFlow(def, positions, registry, opts) {
                 ])),
                 handleLayout,
                 showValues: opts.showValues,
-                renderWidth: initialWidth,
-                renderHeight: initialHeight,
+                renderWidth,
+                renderHeight,
+                initialWidth: initialDims.width,
+                initialHeight: initialDims.height,
                 inputValues: opts.inputs?.[n.nodeId],
                 inputDefaults: opts.inputDefaults?.[n.nodeId],
                 outputValues: opts.outputs?.[n.nodeId],
@@ -2590,11 +2681,13 @@ function toReactFlow(def, positions, registry, opts) {
             selected: opts.selectedNodeIds
                 ? opts.selectedNodeIds.has(n.nodeId)
                 : undefined,
-            initialWidth,
-            initialHeight,
+            measured: {
+                width: renderWidth,
+                height: renderHeight,
+            },
             handles,
-            width: initialWidth,
-            height: initialHeight,
+            width: renderWidth,
+            height: renderHeight,
         };
     });
     const edges = def.edges.map((e) => {
@@ -2801,22 +2894,30 @@ async function upload(parsed, wb, runner) {
 /**
  * Merge UI state from source into target, remapping node IDs using nodeIdMap.
  * Preserves target state and adds/updates source state with remapped IDs.
+ * If anchorPos and sourceDef are provided, positions will be offset relative to anchorPos.
  */
-function mergeUIState(targetUI, sourceUI, nodeIdMap) {
+function mergeUIState(targetUI, sourceUI, nodeIdMap, anchorPos, sourceDef) {
     const result = {
         ...targetUI,
     };
     if (!sourceUI)
         return result;
-    // Merge positions (already handled by mergeSnapshotData, but included for completeness)
+    // Merge positions with optional offset
     if (sourceUI.positions) {
-        result.positions = {
-            ...(targetUI?.positions || {}),
-            ...Object.fromEntries(Object.entries(sourceUI.positions).map(([oldId, pos]) => [
-                nodeIdMap[oldId] || oldId,
-                pos,
-            ])),
-        };
+        if (anchorPos && sourceDef) {
+            // Apply offset when anchorPos and sourceDef are provided
+            result.positions = offsetImportedPositions(targetUI?.positions ?? {}, sourceUI.positions, sourceDef, nodeIdMap, anchorPos);
+        }
+        else {
+            // Simple remapping without offset
+            result.positions = {
+                ...(targetUI?.positions || {}),
+                ...Object.fromEntries(Object.entries(sourceUI.positions).map(([oldId, pos]) => [
+                    nodeIdMap[oldId] || oldId,
+                    pos,
+                ])),
+            };
+        }
     }
     // Merge selection: remap node IDs and edge IDs
     if (sourceUI.selection) {
@@ -2839,6 +2940,15 @@ function mergeUIState(targetUI, sourceUI, nodeIdMap) {
             ])),
         };
     }
+    if (sourceUI.sizes) {
+        result.sizes = {
+            ...(targetUI?.sizes || {}),
+            ...Object.fromEntries(Object.entries(sourceUI.sizes).map(([oldId, size]) => [
+                nodeIdMap[oldId] || oldId,
+                size,
+            ])),
+        };
+    }
     return result;
 }
 
@@ -3096,7 +3206,9 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                 (type === "graphChanged" || type === "graphUiChanged")) {
                 const changeType = payload
                     .change?.type;
-                if (changeType === "moveNode" || changeType === "moveNodes")
+                if (changeType === "moveNode" ||
+                    changeType === "moveNodes" ||
+                    changeType === "resizeNodes")
                     return prev;
             }
             const nextNo = prev.length > 0 ? (prev[0]?.no ?? 0) + 1 : 1;
@@ -3505,6 +3617,9 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, overrides, uiVer
                     else if (changeType === "moveNodes") {
                         reason = "move-nodes";
                     }
+                    else if (changeType === "resizeNodes") {
+                        reason = "resize-nodes";
+                    }
                     else if (changeType === "selection") {
                         reason = "selection";
                     }
@@ -4262,103 +4377,6 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                         }, title: "Delete referenced edge", children: "Delete edge" }))] }, i))) })] }))] })) })] }), debug && (jsx("div", { className: "mt-3 flex-none min-h-0 h-[50%]", children: jsx(DebugEvents, { autoScroll: !!autoScroll, hideWorkbench: !!hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange }) }))] }));
 }
 
-function NodeHandleItem({ kind, id, type, position, y, isConnectable, className, labelClassName, renderLabel, }) {
-    return (jsxs(Fragment, { children: [jsx(Handle, { id: id, type: type, position: position, isConnectable: isConnectable, className: className, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsx("div", { className: labelClassName + (kind === "input" ? " left-2" : " right-2"), style: {
-                    top: (y ?? 0) - 8,
-                    ...(kind === "input"
-                        ? { right: "50%" }
-                        : { left: "50%", textAlign: "right" }),
-                    whiteSpace: "nowrap",
-                    overflow: "hidden",
-                    textOverflow: "ellipsis",
-                }, children: renderLabel({ kind, id }) }))] }));
-}
-function NodeHandles({ data, isConnectable, getClassName, renderLabel, labelClassName = "absolute text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", }) {
-    const layout = data.handleLayout ?? [];
-    const byId = React.useMemo(() => {
-        const m = new Map();
-        for (const h of layout) {
-            // Prefer namespaced key to disambiguate inputs/outputs that share id
-            m.set(`${h.type}:${h.id}`, {
-                position: h.position,
-                y: h.y,
-                type: h.type,
-                missing: h.missing,
-            });
-            // Back-compat: also store by id-only if not already set
-            if (!m.has(h.id))
-                m.set(h.id, {
-                    position: h.position,
-                    y: h.y,
-                    type: h.type,
-                    missing: h.missing,
-                });
-        }
-        return m;
-    }, [layout]);
-    const inputIds = React.useMemo(() => new Set((data.inputHandles ?? []).map((h) => h.id)), [data.inputHandles]);
-    const outputIds = React.useMemo(() => new Set((data.outputHandles ?? []).map((h) => h.id)), [data.outputHandles]);
-    const missingInputs = React.useMemo(() => (layout || []).filter((h) => h.type === "target" && (!inputIds.has(h.id) || h.missing)), [layout, inputIds]);
-    const missingOutputs = React.useMemo(() => (layout || []).filter((h) => h.type === "source" && (!outputIds.has(h.id) || h.missing)), [layout, outputIds]);
-    return (jsxs(Fragment, { children: [(data.inputHandles ?? []).map((h) => {
-                const placed = byId.get(`target:${h.id}`) ?? byId.get(h.id);
-                const position = placed?.position ?? Position.Left;
-                const y = placed?.y;
-                const cls = getClassName?.({ kind: "input", id: h.id, type: "target" }) ?? "";
-                return (jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: isConnectable, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
-            }), missingInputs.map((h) => {
-                const key = `missing-input:${h.id}`;
-                const position = h.position ?? Position.Left;
-                const y = h.y;
-                const cls = "!w-3 !h-3 !bg-amber-400 !border-amber-500 wb-nodrag wb-nowheel";
-                return (jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: false, className: `${cls} wb-nodrag wb-nowheel`, labelClassName: labelClassName, renderLabel: renderLabel }, key));
-            }), (data.outputHandles ?? []).map((h) => {
-                const placed = byId.get(`source:${h.id}`) ?? byId.get(h.id);
-                const position = placed?.position ?? Position.Right;
-                const y = placed?.y;
-                const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ?? "";
-                return (jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: isConnectable, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
-            }), missingOutputs.map((h) => {
-                const key = `missing-output:${h.id}`;
-                const position = h.position ?? Position.Right;
-                const y = h.y;
-                const cls = "!w-3 !h-3 !bg-amber-400 !border-amber-500 !rounded-none wb-nodrag wb-nowheel";
-                return (jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: false, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, key));
-            })] }));
-}
-
-const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
-    const updateNodeInternals = useUpdateNodeInternals();
-    const { typeId, showValues } = data;
-    const inputEntries = data.inputHandles ?? [];
-    const outputEntries = data.outputHandles ?? [];
-    React.useEffect(() => {
-        updateNodeInternals(id);
-    }, [
-        id,
-        inputEntries.length,
-        outputEntries.length,
-        showValues,
-        updateNodeInternals,
-    ]);
-    const status = data.status ?? { activeRuns: 0 };
-    const validation = data.validation ?? {
-        inputs: [],
-        outputs: [],
-        issues: [],
-    };
-    const containerBorder = getNodeBorderClassNames({
-        selected,
-        status,
-        validation,
-    });
-    return (jsxs("div", { className: cx("rounded-lg bg-white/50 !dark:bg-stone-900", containerBorder), style: {
-            position: "relative",
-            minWidth: typeof data.renderWidth === "number" ? data.renderWidth : undefined,
-            minHeight: typeof data.renderHeight === "number" ? data.renderHeight : undefined,
-        }, children: [jsx(DefaultNodeHeader, { id: id, typeId: typeId, validation: validation, showId: data.showValues }), jsx(DefaultNodeContent, { data: data, isConnectable: isConnectable })] }));
-});
-DefaultNode.displayName = "DefaultNode";
 function DefaultNodeHeader({ id, typeId, title, validation, right, showId, onInvalidate, }) {
     const ctx = useWorkbenchContext();
     const [isEditing, setIsEditing] = React.useState(false);
@@ -4442,6 +4460,72 @@ function DefaultNodeHeader({ id, typeId, title, validation, right, showId, onInv
                             .map((v) => `${v.code}: ${v.message}`)
                             .join("; ") })), showId && jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }));
 }
+
+function NodeHandleItem({ kind, id, type, position, y, isConnectable, className, labelClassName, renderLabel, }) {
+    return (jsxs(Fragment, { children: [jsx(Handle, { id: id, type: type, position: position, isConnectable: isConnectable, className: className, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsx("div", { className: labelClassName + (kind === "input" ? " left-2" : " right-2"), style: {
+                    top: (y ?? 0) - 8,
+                    ...(kind === "input"
+                        ? { right: "50%" }
+                        : { left: "50%", textAlign: "right" }),
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                }, children: renderLabel({ kind, id }) }))] }));
+}
+function NodeHandles({ data, isConnectable, getClassName, renderLabel, labelClassName = "absolute text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", }) {
+    const layout = data.handleLayout ?? [];
+    const byId = React.useMemo(() => {
+        const m = new Map();
+        for (const h of layout) {
+            // Prefer namespaced key to disambiguate inputs/outputs that share id
+            m.set(`${h.type}:${h.id}`, {
+                position: h.position,
+                y: h.y,
+                type: h.type,
+                missing: h.missing,
+            });
+            // Back-compat: also store by id-only if not already set
+            if (!m.has(h.id))
+                m.set(h.id, {
+                    position: h.position,
+                    y: h.y,
+                    type: h.type,
+                    missing: h.missing,
+                });
+        }
+        return m;
+    }, [layout]);
+    const inputIds = React.useMemo(() => new Set((data.inputHandles ?? []).map((h) => h.id)), [data.inputHandles]);
+    const outputIds = React.useMemo(() => new Set((data.outputHandles ?? []).map((h) => h.id)), [data.outputHandles]);
+    const missingInputs = React.useMemo(() => (layout || []).filter((h) => h.type === "target" && (!inputIds.has(h.id) || h.missing)), [layout, inputIds]);
+    const missingOutputs = React.useMemo(() => (layout || []).filter((h) => h.type === "source" && (!outputIds.has(h.id) || h.missing)), [layout, outputIds]);
+    return (jsxs(Fragment, { children: [(data.inputHandles ?? []).map((h) => {
+                const placed = byId.get(`target:${h.id}`) ?? byId.get(h.id);
+                const position = placed?.position ?? Position.Left;
+                const y = placed?.y;
+                const cls = getClassName?.({ kind: "input", id: h.id, type: "target" }) ?? "";
+                return (jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: isConnectable, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
+            }), missingInputs.map((h) => {
+                const key = `missing-input:${h.id}`;
+                const position = h.position ?? Position.Left;
+                const y = h.y;
+                const cls = "!w-3 !h-3 !bg-amber-400 !border-amber-500 wb-nodrag wb-nowheel";
+                return (jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: false, className: `${cls} wb-nodrag wb-nowheel`, labelClassName: labelClassName, renderLabel: renderLabel }, key));
+            }), (data.outputHandles ?? []).map((h) => {
+                const placed = byId.get(`source:${h.id}`) ?? byId.get(h.id);
+                const position = placed?.position ?? Position.Right;
+                const y = placed?.y;
+                const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ?? "";
+                return (jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: isConnectable, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
+            }), missingOutputs.map((h) => {
+                const key = `missing-output:${h.id}`;
+                const position = h.position ?? Position.Right;
+                const y = h.y;
+                const cls = "!w-3 !h-3 !bg-amber-400 !border-amber-500 !rounded-none wb-nodrag wb-nowheel";
+                return (jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: false, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, key));
+            })] }));
+}
+
 function DefaultNodeContent({ data, isConnectable, }) {
     const { showValues, inputValues, inputDefaults, outputValues, toString } = data;
     const inputEntries = data.inputHandles ?? [];
@@ -4494,6 +4578,24 @@ function DefaultNodeContent({ data, isConnectable, }) {
                 } })] }));
 }
 
+const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConnectable, }) {
+    const nodeRef = useRef(null);
+    const { typeId } = data;
+    const status = data.status ?? { activeRuns: 0 };
+    const validation = data.validation ?? {
+        inputs: [],
+        outputs: [],
+        issues: [],
+    };
+    const containerBorder = getNodeBorderClassNames({
+        selected,
+        status,
+        validation,
+    });
+    return (jsxs("div", { ref: nodeRef, className: cx("rounded-lg bg-white/50 !dark:bg-stone-900 w-full h-full relative", containerBorder), children: [jsx(NodeResizer, { isVisible: selected, minWidth: data.initialWidth, minHeight: data.initialHeight }), jsx(DefaultNodeHeader, { id: id, typeId: typeId, validation: validation, showId: data.showValues }), jsx(DefaultNodeContent, { data: data, isConnectable: isConnectable })] }));
+});
+DefaultNode.displayName = "DefaultNode";
+
 // Helper to format shortcut for current platform
 function formatShortcut(shortcut) {
     const isMac = typeof navigator !== "undefined" &&
@@ -4774,8 +4876,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             position: n.position,
             type: n.type,
             selected: n.selected,
-            initialWidth: n.initialWidth,
-            initialHeight: n.initialHeight,
+            measured: n.measured,
             data: n.data && {
                 typeId: n.data.typeId,
                 inputHandles: n.data.inputHandles,
@@ -4809,11 +4910,18 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     useImperativeHandle(ref, () => ({
         fitView: () => {
             try {
-                rfInstanceRef.current?.fitView({ padding: 0.2 });
+                rfInstanceRef.current?.fitView();
+            }
+            catch (err) {
+                console.warn("Failed to fit view", err);
             }
-            catch { }
         },
-    }));
+        setViewport: (viewport) => {
+            if (rfInstanceRef.current) {
+                rfInstanceRef.current.setViewport(lod.clone(viewport));
+            }
+        },
+    }), []);
     const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, } = useWorkbenchBridge(wb);
     const ui = wb.getUI();
     const { nodeTypes, resolveNodeType } = useMemo(() => {
@@ -4859,7 +4967,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                 inputsWithDefaults[n.nodeId] = merged;
             }
         }
-        const out = toReactFlow(wb.def, wb.getPositions(), registry, {
+        const out = toReactFlow(wb.def, wb.getPositions(), wb.getSizes(), registry, {
             showValues,
             inputs: inputsWithDefaults,
             inputDefaults: inputDefaultsMap,
@@ -5079,7 +5187,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         setNodeMenuOpen(false);
         setSelectionMenuOpen(false);
     };
-    const addNodeAt = useCallback(async (typeId, opts) => wb.addNode({ typeId, position: opts.position }, { inputs: opts.inputs, commit: true }), [wb]);
+    const addNodeAt = useCallback(async (typeId, opts) => wb.addNode({ typeId }, { inputs: opts.inputs, position: opts.position, commit: true }), [wb]);
     const onCloseMenu = useCallback(() => {
         setMenuOpen(false);
     }, []);
@@ -5331,55 +5439,53 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         showToast,
     ]);
     // Get custom renderers from UI extension registry (reactive to uiVersion changes)
-    const { BackgroundRenderer, MinimapRenderer, ControlsRenderer, DefaultContextMenuRenderer, NodeContextMenuRenderer, connectionLineRenderer, } = useMemo(() => {
+    const { BackgroundRenderer, MinimapRenderer, ControlsRenderer, DefaultContextMenuRenderer, NodeContextMenuRenderer, SelectionContextMenuRenderer, connectionLineRenderer, } = useMemo(() => {
         return {
             BackgroundRenderer: ui.getBackgroundRenderer(),
             MinimapRenderer: ui.getMinimapRenderer(),
             ControlsRenderer: ui.getControlsRenderer(),
             DefaultContextMenuRenderer: ui.getDefaultContextMenuRenderer(),
             NodeContextMenuRenderer: ui.getNodeContextMenuRenderer(),
+            SelectionContextMenuRenderer: ui.getSelectionContextMenuRenderer(),
             connectionLineRenderer: ui.getConnectionLineRenderer(),
         };
     }, [ui, uiVersion]);
     const onMoveEnd = useCallback(() => {
         if (rfInstanceRef.current) {
             const viewport = rfInstanceRef.current.getViewport();
-            const viewportData = lod.pick(viewport, ["x", "y", "zoom"]);
+            const viewportData = lod.clone(viewport);
             wb.setViewport(viewportData);
         }
     }, [wb]);
-    const viewportRef = useRef(null);
+    // Sync viewport when workbench fires graphUiChanged with viewport event
     useEffect(() => {
-        if (!rfInstanceRef.current)
-            return;
-        const currentViewport = wb.getViewport();
-        if (currentViewport &&
-            (!viewportRef.current ||
-                viewportRef.current.x !== currentViewport.x ||
-                viewportRef.current.y !== currentViewport.y ||
-                viewportRef.current.zoom !== currentViewport.zoom)) {
-            viewportRef.current = currentViewport;
-            rfInstanceRef.current.setViewport({
-                x: currentViewport.x,
-                y: currentViewport.y,
-                zoom: currentViewport.zoom,
-            });
-        }
-    });
+        const off = wb.on("graphUiChanged", (event) => {
+            if (event.change?.type === "viewport" &&
+                rfInstanceRef.current &&
+                event.init) {
+                const viewport = wb.getViewport();
+                if (viewport) {
+                    rfInstanceRef.current.setViewport(lod.clone(viewport));
+                }
+            }
+        });
+        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, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
                         rfInstanceRef.current = inst;
                         const savedViewport = wb.getViewport();
                         if (savedViewport) {
-                            viewportRef.current = savedViewport;
-                            inst.setViewport(lod.pick(savedViewport, ["x", "y", "zoom"]));
+                            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", 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
+                    }, 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: 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
                                     ? { 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))] }));
+                                    : {}) })) : (jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs, enableKeyboardShortcuts: enableKeyboardShortcuts, keyboardShortcuts: keyboardShortcuts }))), 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))] }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {