@bian-womp/spark-workbench 0.2.82 → 0.2.84

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: [],
@@ -285,27 +293,36 @@ 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) {
+        for (const [nodeId, size] of Object.entries(sizes)) {
+            if (size) {
+                this.sizes = { ...this.sizes, [nodeId]: size };
+            }
+            else {
+                this.sizes = lod.omit(this.sizes, nodeId);
+            }
+        }
         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 +353,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 +365,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 +380,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 +395,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() {
@@ -773,8 +804,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 +2224,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 +2233,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 +2275,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]);
@@ -2290,8 +2332,9 @@ function useWorkbenchBridge(wb) {
 function useWorkbenchGraphTick(wb) {
     const [tick, setTick] = useState(0);
     useEffect(() => {
-        const bump = () => setTick((t) => t + 1);
-        const off = wb.on("graphChanged", bump);
+        const off = wb.on("graphChanged", () => {
+            setTick((t) => t + 1);
+        });
         return () => off();
     }, [wb]);
     return tick;
@@ -2299,8 +2342,11 @@ function useWorkbenchGraphTick(wb) {
 function useWorkbenchGraphUiTick(wb) {
     const [tick, setTick] = useState(0);
     useEffect(() => {
-        const bump = () => setTick((t) => t + 1);
-        const off = wb.on("graphUiChanged", bump);
+        const off = wb.on("graphUiChanged", (evt) => {
+            if (evt.change?.type === "viewport")
+                return;
+            setTick((t) => t + 1);
+        });
         return () => off();
     }, [wb]);
     return tick;
@@ -2424,7 +2470,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" };
@@ -2468,45 +2514,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",
@@ -2515,7 +2557,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",
@@ -2524,36 +2566,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: {
@@ -2567,8 +2631,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],
@@ -2586,11 +2652,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) => {
@@ -2797,22 +2865,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) {
@@ -2835,6 +2911,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;
 }
 
@@ -3092,7 +3177,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;
@@ -3501,6 +3588,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";
                     }
@@ -4258,103 +4348,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);
@@ -4438,6 +4431,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 ?? [];
@@ -4490,6 +4549,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" &&
@@ -4770,8 +4847,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,
@@ -4805,11 +4881,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(() => {
@@ -4855,7 +4938,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,
@@ -5327,55 +5410,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, }) {