@bian-womp/spark-workbench 0.2.54 → 0.2.56

package/lib/cjs/index.cjs

@@ -12,71 +12,75 @@ var isEqual = require('lodash/isEqual');
 class DefaultUIExtensionRegistry {
     constructor() {
         this.nodeRenderers = new Map();
-        this.portRenderers = new Map();
-        this.edgeRenderers = new Map();
     }
     registerNodeRenderer(nodeTypeId, renderer) {
-        this.nodeRenderers.set(nodeTypeId, renderer);
+        if (renderer === undefined) {
+            this.nodeRenderers.delete(nodeTypeId);
+        }
+        else {
+            this.nodeRenderers.set(nodeTypeId, renderer);
+        }
         return this;
     }
     getNodeRenderer(nodeTypeId) {
         return this.nodeRenderers.get(nodeTypeId);
     }
-    registerPortRenderer(dataTypeId, renderer) {
-        this.portRenderers.set(dataTypeId, renderer);
-        return this;
-    }
-    getPortRenderer(dataTypeId) {
-        return this.portRenderers.get(dataTypeId);
+    getAllNodeRenderers() {
+        const result = {};
+        for (const [nodeTypeId, renderer] of this.nodeRenderers.entries()) {
+            result[nodeTypeId] = renderer;
+        }
+        return result;
     }
-    registerEdgeRenderer(typeId, renderer) {
-        this.edgeRenderers.set(typeId, renderer);
+    registerIconProvider(provider) {
+        this.iconProvider = provider;
         return this;
     }
-    getEdgeRenderer(typeId) {
-        return this.edgeRenderers.get(typeId);
+    getIconProvider() {
+        return this.iconProvider;
     }
-    setInspector(renderer) {
-        this.inspector = renderer;
+    // React Flow renderers
+    registerConnectionLineRenderer(renderer) {
+        this.connectionLineRenderer = renderer;
         return this;
     }
-    getInspector() {
-        return this.inspector;
+    getConnectionLineRenderer() {
+        return this.connectionLineRenderer;
     }
-    setPalette(renderer) {
-        this.palette = renderer;
+    registerMinimapRenderer(renderer) {
+        this.minimapRenderer = renderer;
         return this;
     }
-    getPalette() {
-        return this.palette;
+    getMinimapRenderer() {
+        return this.minimapRenderer;
     }
-    setToolbar(renderer) {
-        this.toolbar = renderer;
+    registerControlsRenderer(renderer) {
+        this.controlsRenderer = renderer;
         return this;
     }
-    getToolbar() {
-        return this.toolbar;
+    getControlsRenderer() {
+        return this.controlsRenderer;
     }
-    setContextMenu(renderer) {
-        this.contextMenu = renderer;
+    registerBackgroundRenderer(renderer) {
+        this.backgroundRenderer = renderer;
         return this;
     }
-    getContextMenu() {
-        return this.contextMenu;
+    getBackgroundRenderer() {
+        return this.backgroundRenderer;
     }
-    setMiniMap(renderer) {
-        this.miniMap = renderer;
+    registerDefaultContextMenuRenderer(renderer) {
+        this.defaultContextMenuRenderer = renderer;
         return this;
     }
-    getMiniMap() {
-        return this.miniMap;
+    getDefaultContextMenuRenderer() {
+        return this.defaultContextMenuRenderer;
     }
-    setIconProvider(provider) {
-        this.iconProvider = provider;
+    registerNodeContextMenuRenderer(renderer) {
+        this.nodeContextMenuRenderer = renderer;
         return this;
     }
-    getIconProvider() {
-        return this.iconProvider;
+    getNodeContextMenuRenderer() {
+        return this.nodeContextMenuRenderer;
     }
 }
 
@@ -86,6 +90,7 @@ class AbstractWorkbench {
         this.layout = args.layout;
         this.storage = args.storage;
         this.serializer = args.serializer;
+        this.genId = args.genId || sparkGraph.generateId;
     }
     // Expose UI registry to adapters (React Flow, CLI) to allow overrides
     getUI() {
@@ -164,11 +169,14 @@ class InMemoryWorkbench extends AbstractWorkbench {
         return { ok: issues.every((i) => i.level !== "error"), issues };
     }
     addNode(node) {
-        const id = node.nodeId ?? this.generateId("n");
+        const id = node.nodeId ??
+            this.genId("n", new Set(this.def.nodes.map((n) => n.nodeId)));
         this.def.nodes.push({
             nodeId: id,
             typeId: node.typeId,
             params: node.params,
+            initialInputs: node.initialInputs,
+            resolvedHandles: node.resolvedHandles,
         });
         if (node.position)
             this.positions[id] = node.position;
@@ -190,7 +198,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
         this.refreshValidation();
     }
     connect(edge) {
-        const id = edge.id ?? this.generateId("e");
+        const id = edge.id ?? this.genId("e", new Set(this.def.edges.map((e) => e.id)));
         this.def.edges.push({
             id,
             source: { ...edge.source },
@@ -331,9 +339,6 @@ class InMemoryWorkbench extends AbstractWorkbench {
             for (const h of Array.from(set))
                 h(payload);
     }
-    generateId(prefix) {
-        return `${prefix}${Math.random().toString(36).slice(2, 8)}`;
-    }
 }
 
 class CLIWorkbench {
@@ -465,6 +470,18 @@ class AbstractGraphRunner {
             }
         }
     }
+    getInputDefaults(def) {
+        const out = {};
+        for (const n of def.nodes) {
+            const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
+            const graphDefaults = n.initialInputs ?? {};
+            const merged = { ...dynDefaults, ...graphDefaults };
+            if (Object.keys(merged).length > 0) {
+                out[n.nodeId] = merged;
+            }
+        }
+        return out;
+    }
     on(event, handler) {
         if (!this.listeners.has(event))
             this.listeners.set(event, new Set());
@@ -626,16 +643,6 @@ class LocalGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputDefaults(def) {
-        const out = {};
-        for (const n of def.nodes) {
-            const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
-            if (Object.keys(dynDefaults).length > 0) {
-                out[n.nodeId] = dynDefaults;
-            }
-        }
-        return out;
-    }
     async snapshotFull() {
         const def = undefined; // UI will supply def/positions on download for local
         const inputs = this.getInputs(this.runtime
@@ -663,11 +670,25 @@ class LocalGraphRunner extends AbstractGraphRunner {
         if (payload.def)
             this.build(payload.def);
         this.setEnvironment?.(payload.environment || {}, { merge: false });
-        // Hydrate via runtime for exact restore and re-emit
+        this.hydrateSnapshotFull(payload);
+    }
+    hydrateSnapshotFull(snapshot) {
+        // Hydrate via runtime for exact restore (this emits events on runtime emitter)
         this.runtime?.hydrate({
-            inputs: payload.inputs || {},
-            outputs: payload.outputs || {},
+            inputs: snapshot.inputs || {},
+            outputs: snapshot.outputs || {},
         });
+        // Also emit directly from runner to ensure UI gets events even if engine isn't running
+        for (const [nodeId, map] of Object.entries(snapshot.inputs || {})) {
+            for (const [handle, value] of Object.entries(map || {})) {
+                this.emit("value", { nodeId, handle, value, io: "input" });
+            }
+        }
+        for (const [nodeId, map] of Object.entries(snapshot.outputs || {})) {
+            for (const [handle, value] of Object.entries(map || {})) {
+                this.emit("value", { nodeId, handle, value, io: "output" });
+            }
+        }
     }
     dispose() {
         super.dispose();
@@ -1224,16 +1245,6 @@ class RemoteGraphRunner extends AbstractGraphRunner {
         }
         return out;
     }
-    getInputDefaults(def) {
-        const out = {};
-        for (const n of def.nodes) {
-            const dynDefaults = n.resolvedHandles?.inputDefaults ?? {};
-            if (Object.keys(dynDefaults).length > 0) {
-                out[n.nodeId] = dynDefaults;
-            }
-        }
-        return out;
-    }
     dispose() {
         // Idempotent: allow multiple calls safely
         if (this.disposed)
@@ -1403,7 +1414,8 @@ function summarizeDeep(value) {
 
 // Shared UI constants for node layout to keep mapping and rendering in sync
 const NODE_HEADER_HEIGHT_PX = 24;
-const NODE_ROW_HEIGHT_PX = 22;
+const NODE_ROW_HEIGHT_PX = 18;
+const HANDLE_SIZE_PX = 12;
 
 function computeEffectiveHandles(node, registry) {
     const desc = registry.nodes.get(node.typeId);
@@ -1432,6 +1444,61 @@ function estimateNodeSize(args) {
     const height = overrides?.height ?? NODE_HEADER_HEIGHT_PX + rows * NODE_ROW_HEIGHT_PX;
     return { width, height, inputsCount, outputsCount, rowCount: rows };
 }
+/**
+ * Calculate the Y position for handle layout (center of row).
+ * Used for positioning handles in React Flow.
+ */
+function getHandleLayoutY(rowIndex) {
+    return (NODE_HEADER_HEIGHT_PX +
+        rowIndex * NODE_ROW_HEIGHT_PX +
+        NODE_ROW_HEIGHT_PX / 2);
+}
+/**
+ * Calculate the Y position for handle bounds (top + centering offset).
+ * Used for hit-testing and edge routing.
+ */
+function getHandleBoundsY(rowIndex) {
+    return (NODE_HEADER_HEIGHT_PX +
+        rowIndex * NODE_ROW_HEIGHT_PX +
+        (NODE_ROW_HEIGHT_PX - HANDLE_SIZE_PX) / 2 +
+        1);
+}
+/**
+ * Calculate the X position for handle bounds based on position and node width.
+ */
+function getHandleBoundsX(position, nodeWidth) {
+    if (position === react.Position.Left) {
+        return -HANDLE_SIZE_PX / 2 + 1;
+    }
+    else {
+        return nodeWidth - HANDLE_SIZE_PX / 2 - 1;
+    }
+}
+/**
+ * Create handle bounds object for hit-testing/edge routing.
+ */
+function createHandleBounds(args) {
+    return {
+        id: args.id,
+        type: args.type,
+        position: args.position,
+        x: getHandleBoundsX(args.position, args.nodeWidth),
+        y: getHandleBoundsY(args.rowIndex),
+        width: HANDLE_SIZE_PX,
+        height: HANDLE_SIZE_PX,
+    };
+}
+/**
+ * Create handle layout object for React Flow rendering.
+ */
+function createHandleLayout(args) {
+    return {
+        id: args.id,
+        type: args.type,
+        position: args.position,
+        y: getHandleLayoutY(args.rowIndex),
+    };
+}
 function layoutNode(args) {
     const { node, registry, showValues, overrides } = args;
     const { inputs, outputs } = computeEffectiveHandles(node, registry);
@@ -1443,40 +1510,34 @@ function layoutNode(args) {
         showValues,
         overrides,
     });
-    const HEADER = NODE_HEADER_HEIGHT_PX;
-    const ROW = NODE_ROW_HEIGHT_PX;
     const handles = [
-        ...inputOrder.map((id, i) => ({
+        ...inputOrder.map((id, i) => createHandleBounds({
             id,
             type: "target",
             position: react.Position.Left,
-            x: 0,
-            y: HEADER + i * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: i,
+            nodeWidth: width,
         })),
-        ...outputOrder.map((id, i) => ({
+        ...outputOrder.map((id, i) => createHandleBounds({
             id,
             type: "source",
             position: react.Position.Right,
-            x: width - 1,
-            y: HEADER + i * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: i,
+            nodeWidth: width,
         })),
     ];
     const handleLayout = [
-        ...inputOrder.map((id, i) => ({
+        ...inputOrder.map((id, i) => createHandleLayout({
             id,
             type: "target",
             position: react.Position.Left,
-            y: HEADER + i * ROW + ROW / 2,
+            rowIndex: i,
         })),
-        ...outputOrder.map((id, i) => ({
+        ...outputOrder.map((id, i) => createHandleLayout({
             id,
             type: "source",
             position: react.Position.Right,
-            y: HEADER + i * ROW + ROW / 2,
+            rowIndex: i,
         })),
     ];
     return { width, height, inputOrder, outputOrder, handles, handleLayout };
@@ -1791,20 +1852,22 @@ function toReactFlow(def, positions, registry, opts) {
         const baseRightCount = geom.outputOrder.length;
         const extraInputs = Array.from(missingInputsByNode[n.nodeId] || []);
         const extraOutputs = Array.from(missingOutputsByNode[n.nodeId] || []);
-        const HEADER = NODE_HEADER_HEIGHT_PX;
-        const ROW = NODE_ROW_HEIGHT_PX;
         const extraHandleLayoutLeft = extraInputs.map((id, i) => ({
-            id,
-            type: "target",
-            position: react.Position.Left,
-            y: HEADER + (baseLeftCount + i) * ROW + ROW / 2,
+            ...createHandleLayout({
+                id,
+                type: "target",
+                position: react.Position.Left,
+                rowIndex: baseLeftCount + i,
+            }),
             missing: true,
         }));
         const extraHandleLayoutRight = extraOutputs.map((id, i) => ({
-            id,
-            type: "source",
-            position: react.Position.Right,
-            y: HEADER + (baseRightCount + i) * ROW + ROW / 2,
+            ...createHandleLayout({
+                id,
+                type: "source",
+                position: react.Position.Right,
+                rowIndex: baseRightCount + i,
+            }),
             missing: true,
         }));
         const handleLayout = [
@@ -1813,23 +1876,19 @@ function toReactFlow(def, positions, registry, opts) {
             ...extraHandleLayoutRight,
         ];
         // Precompute handle bounds (including missing) so edges can render immediately
-        const missingBoundsLeft = extraInputs.map((id, i) => ({
+        const missingBoundsLeft = extraInputs.map((id, i) => createHandleBounds({
             id,
             type: "target",
             position: react.Position.Left,
-            x: 0,
-            y: HEADER + (baseLeftCount + i) * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: baseLeftCount + i,
+            nodeWidth: geom.width,
         }));
-        const missingBoundsRight = extraOutputs.map((id, i) => ({
+        const missingBoundsRight = extraOutputs.map((id, i) => createHandleBounds({
             id,
             type: "source",
             position: react.Position.Right,
-            x: geom.width - 1,
-            y: HEADER + (baseRightCount + i) * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: baseRightCount + i,
+            nodeWidth: geom.width,
         }));
         const handles = [
             ...geom.handles,
@@ -1840,7 +1899,7 @@ function toReactFlow(def, positions, registry, opts) {
         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) * ROW;
+        const initialHeight = geom.height + Math.max(0, newRows - baseRows) * NODE_ROW_HEIGHT_PX;
         return {
             id: n.nodeId,
             data: {
@@ -1976,7 +2035,7 @@ function getHandleClassName(args) {
     else {
         borderColor = "!border-gray-500 dark:!border-gray-400";
     }
-    return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
+    return cx("!w-3 !h-3 !bg-white/50 !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
 }
 
 function generateTimestamp() {
@@ -3048,7 +3107,7 @@ function NodeHandleItem({ kind, id, type, position, y, isConnectable, className,
                     textOverflow: "ellipsis",
                 }, children: renderLabel({ kind, id }) }))] }));
 }
-function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray-600", outputClassName = "!w-2 !h-2 !bg-gray-600", getClassName, renderLabel, labelClassName = "absolute text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", }) {
+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();
@@ -3079,28 +3138,26 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
                 const placed = byId.get(`target:${h.id}`) ?? byId.get(h.id);
                 const position = placed?.position ?? react.Position.Left;
                 const y = placed?.y;
-                const cls = getClassName?.({ kind: "input", id: h.id, type: "target" }) ??
-                    inputClassName;
+                const cls = getClassName?.({ kind: "input", id: h.id, type: "target" }) ?? "";
                 return (jsxRuntime.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 ?? react.Position.Left;
                 const y = h.y;
                 const cls = "!w-3 !h-3 !bg-amber-400 !border-amber-500";
-                return (jsxRuntime.jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: false, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, key));
+                return (jsxRuntime.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 ?? react.Position.Right;
                 const y = placed?.y;
-                const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ??
-                    outputClassName;
-                return (jsxRuntime.jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: isConnectable, className: `${cls} wb-nodrag wb-nowheel`, labelClassName: labelClassName, renderLabel: renderLabel }, h.id));
+                const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ?? "";
+                return (jsxRuntime.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 ?? react.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 (jsxRuntime.jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: false, className: cls, labelClassName: labelClassName, renderLabel: renderLabel }, key));
+                return (jsxRuntime.jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: false, className: `${cls} wb-nodrag wb-nowheel`, labelClassName: labelClassName, renderLabel: renderLabel }, key));
             })] }));
 }
 
@@ -3129,7 +3186,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
         status,
         validation,
     });
-    return (jsxRuntime.jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900", containerBorder), style: {
+    return (jsxRuntime.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,
@@ -3214,15 +3271,13 @@ function DefaultNodeContent({ data, isConnectable, }) {
                 } })] }));
 }
 
-function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
-    const { registry } = useWorkbenchContext();
+function DefaultContextMenu({ open, clientPos, handlers, registry, nodeIds, }) {
     const rf = react.useReactFlow();
-    const ids = Array.from(registry.nodes.keys());
     const [query, setQuery] = React.useState("");
     const q = query.trim().toLowerCase();
     const filteredIds = q
-        ? ids.filter((id) => id.toLowerCase().includes(q))
-        : ids;
+        ? nodeIds.filter((id) => id.toLowerCase().includes(q))
+        : nodeIds;
     const root = { __children: {} };
     for (const id of filteredIds) {
         const parts = id.split(".");
@@ -3246,11 +3301,11 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
             if (!ref.current)
                 return;
             if (!ref.current.contains(e.target))
-                onClose();
+                handlers.onClose();
         };
         const onKey = (e) => {
             if (e.key === "Escape")
-                onClose();
+                handlers.onClose();
         };
         window.addEventListener("mousedown", onDown, true);
         window.addEventListener("keydown", onKey);
@@ -3258,7 +3313,7 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
             window.removeEventListener("mousedown", onDown, true);
             window.removeEventListener("keydown", onKey);
         };
-    }, [open, onClose]);
+    }, [open, handlers]);
     // Focus search input when menu opens
     const inputRef = React.useRef(null);
     React.useEffect(() => {
@@ -3277,8 +3332,8 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
     const handleClick = (typeId) => {
         // project() is deprecated; use screenToFlowPosition for screen coordinates
         const p = rf.screenToFlowPosition({ x: clientPos.x, y: clientPos.y });
-        onAdd(typeId, p);
-        onClose();
+        handlers.onAddNode(typeId, { position: p });
+        handlers.onClose();
     };
     const renderTree = (tree, path = []) => {
         const entries = Object.entries(tree?.__children ?? {}).sort((a, b) => a[0].localeCompare(b[0]));
@@ -3300,8 +3355,7 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
         }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Add Node", " ", jsxRuntime.jsxs("span", { className: "text-gray-500 font-normal", children: ["(", totalCount, ")"] })] }), jsxRuntime.jsx("div", { className: "px-2 pb-1", children: jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: query, onChange: (e) => setQuery(e.target.value), placeholder: "Filter nodes...", className: "w-full border border-gray-300 px-2 py-1 text-sm outline-none focus:border-gray-400", onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation() }) }), jsxRuntime.jsx("div", { className: "max-h-60 overflow-auto", children: totalCount > 0 ? (renderTree(root)) : (jsxRuntime.jsx("div", { className: "px-3 py-2 text-gray-400", children: "No matches" })) })] }));
 }
 
-function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
-    const { wb, runner, engineKind, registry, outputsMap, outputTypesMap } = useWorkbenchContext();
+function NodeContextMenu({ open, clientPos, nodeId, handlers, canRunPull, bakeableOutputs, }) {
     const ref = React.useRef(null);
     // outside click + ESC
     React.useEffect(() => {
@@ -3311,11 +3365,11 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
             if (!ref.current)
                 return;
             if (!ref.current.contains(e.target))
-                onClose();
+                handlers.onClose();
         };
         const onKey = (e) => {
             if (e.key === "Escape")
-                onClose();
+                handlers.onClose();
         };
         window.addEventListener("mousedown", onDown, true);
         window.addEventListener("keydown", onKey);
@@ -3323,48 +3377,26 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
             window.removeEventListener("mousedown", onDown, true);
             window.removeEventListener("keydown", onKey);
         };
-    }, [open, onClose]);
+    }, [open, handlers]);
     React.useEffect(() => {
         if (open)
             ref.current?.focus();
     }, [open]);
-    // Bake helpers
-    const getBakeableOutputs = () => {
-        try {
-            const def = wb.export();
-            const node = def.nodes.find((n) => n.nodeId === nodeId);
-            if (!node)
-                return [];
-            const desc = registry.nodes.get(node.typeId);
-            const handles = Object.keys(desc?.outputs || {});
-            const out = [];
-            for (const h of handles) {
-                const tId = outputTypesMap?.[nodeId]?.[h];
-                if (!tId)
-                    continue;
-                if (tId.endsWith("[]")) {
-                    const base = tId.slice(0, -2);
-                    const tArr = registry.types.get(tId);
-                    const tElem = registry.types.get(base);
-                    const arrT = tArr?.bakeTarget;
-                    const elemT = tElem?.bakeTarget;
-                    if ((arrT && registry.nodes.has(arrT.nodeTypeId)) ||
-                        (elemT && registry.nodes.has(elemT.nodeTypeId)))
-                        out.push(h);
-                }
-                else {
-                    const t = registry.types.get(tId);
-                    const bt = t?.bakeTarget;
-                    if (bt && registry.nodes.has(bt.nodeTypeId))
-                        out.push(h);
-                }
-            }
-            return out;
-        }
-        catch {
-            return [];
-        }
-    };
+    if (!open || !clientPos || !nodeId)
+        return null;
+    // clamp
+    const MENU_MIN_WIDTH = 180;
+    const PADDING = 16;
+    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
+        (MENU_MIN_WIDTH + PADDING));
+    const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
+    return (jsxRuntime.jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDelete, children: "Delete" }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onDuplicate, children: "Duplicate" }), canRunPull && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onRunPull, children: "Run (pull)" })), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), bakeableOutputs.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), bakeableOutputs.map((h) => (jsxRuntime.jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: () => handlers.onBake(h), children: ["Bake: ", h] }, h))), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" })] })), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handlers.onCopyId, children: "Copy Node ID" })] }));
+}
+
+function createNodeContextMenuHandlers(nodeId, wb, runner, registry, outputsMap, outputTypesMap, onClose) {
     const doBake = async (handleId) => {
         try {
             const typeId = outputTypesMap?.[nodeId]?.[handleId];
@@ -3397,7 +3429,6 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
                 const newId = wb.addNode({
                     typeId: singleTarget.nodeTypeId,
                     position: { x: pos.x + 180, y: pos.y },
-                    params: {},
                 });
                 runner.update(wb.export());
                 await runner.whenIdle();
@@ -3408,12 +3439,9 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
                 const nodeDesc = registry.nodes.get(arrTarget.nodeTypeId);
                 const inType = sparkGraph.getInputTypeId(nodeDesc?.inputs, arrTarget.inputHandle);
                 const coerced = await coerceIfNeeded(typeId, inType, unwrap(raw));
-                const newId = `n${Math.random().toString(36).slice(2, 8)}`;
-                wb.addNode({
-                    nodeId: newId,
+                const newId = wb.addNode({
                     typeId: arrTarget.nodeTypeId,
                     position: { x: pos.x + 180, y: pos.y },
-                    params: {},
                 });
                 runner.update(wb.export());
                 await runner.whenIdle();
@@ -3431,14 +3459,11 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
                 const DY = 160;
                 const nodeIds = [];
                 for (let idx = 0; idx < coercedItems.length; idx++) {
-                    const cv = coercedItems[idx];
                     const col = idx % COLS;
                     const row = Math.floor(idx / COLS);
                     const newId = wb.addNode({
                         typeId: elemTarget.nodeTypeId,
                         position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
-                        params: {},
-                        initialInputs: { [elemTarget.inputHandle]: structuredClone(cv) },
                     });
                     nodeIds.push(newId);
                 }
@@ -3456,65 +3481,91 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
         }
         catch { }
     };
-    // actions
-    const handleDelete = React.useCallback(() => {
-        wb.removeNode(nodeId);
-        onClose();
-    }, [nodeId, wb, onClose]);
-    const handleDuplicate = React.useCallback(() => {
+    return {
+        onDelete: () => {
+            wb.removeNode(nodeId);
+            onClose();
+        },
+        onDuplicate: async () => {
+            const def = wb.export();
+            const n = def.nodes.find((n) => n.nodeId === nodeId);
+            if (!n)
+                return onClose();
+            const pos = wb.getPositions?.()[nodeId] || { x: 0, y: 0 };
+            const newId = wb.addNode({
+                typeId: n.typeId,
+                params: n.params,
+                position: { x: pos.x + 24, y: pos.y + 24 },
+                initialInputs: n.initialInputs,
+                resolvedHandles: n.resolvedHandles,
+            });
+            await runner.whenIdle();
+            runner.setInputs(newId, { ...runner.getInputs(def)[nodeId] });
+            onClose();
+        },
+        onRunPull: async () => {
+            try {
+                await runner.computeNode(nodeId);
+            }
+            catch { }
+            onClose();
+        },
+        onBake: async (handleId) => {
+            await doBake(handleId);
+            onClose();
+        },
+        onCopyId: async () => {
+            try {
+                await navigator.clipboard.writeText(nodeId);
+            }
+            catch { }
+            onClose();
+        },
+        onClose,
+    };
+}
+function getBakeableOutputs(nodeId, wb, registry, outputTypesMap) {
+    try {
         const def = wb.export();
-        const n = def.nodes.find((n) => n.nodeId === nodeId);
-        if (!n)
-            return onClose();
-        const pos = wb.getPositions?.()[nodeId] || { x: 0, y: 0 };
-        wb.addNode({
-            typeId: n.typeId,
-            params: n.params,
-            position: { x: pos.x + 24, y: pos.y + 24 },
-        });
-        onClose();
-    }, [nodeId, wb, onClose]);
-    React.useCallback(async (handleId) => {
-        await doBake(handleId);
-        onClose();
-    }, [doBake, onClose]);
-    const handleCopyId = React.useCallback(async () => {
-        try {
-            await navigator.clipboard.writeText(nodeId);
-        }
-        catch { }
-        onClose();
-    }, [nodeId, onClose]);
-    const handleRunPull = React.useCallback(async () => {
-        try {
-            await runner.computeNode(nodeId);
+        const node = def.nodes.find((n) => n.nodeId === nodeId);
+        if (!node)
+            return [];
+        const desc = registry.nodes.get(node.typeId);
+        const handles = Object.keys(desc?.outputs || {});
+        const out = [];
+        for (const h of handles) {
+            const tId = outputTypesMap?.[nodeId]?.[h];
+            if (!tId)
+                continue;
+            if (tId.endsWith("[]")) {
+                const base = tId.slice(0, -2);
+                const tArr = registry.types.get(tId);
+                const tElem = registry.types.get(base);
+                const arrT = tArr?.bakeTarget;
+                const elemT = tElem?.bakeTarget;
+                if ((arrT && registry.nodes.has(arrT.nodeTypeId)) ||
+                    (elemT && registry.nodes.has(elemT.nodeTypeId)))
+                    out.push(h);
+            }
+            else {
+                const t = registry.types.get(tId);
+                const bt = t?.bakeTarget;
+                if (bt && registry.nodes.has(bt.nodeTypeId))
+                    out.push(h);
+            }
         }
-        catch { }
-        onClose();
-    }, [nodeId, runner, onClose]);
-    if (!open || !clientPos || !nodeId)
-        return null;
-    // clamp
-    const MENU_MIN_WIDTH = 180;
-    const PADDING = 16;
-    const x = Math.min(clientPos.x, (typeof window !== "undefined" ? window.innerWidth : 0) -
-        (MENU_MIN_WIDTH + PADDING));
-    const y = Math.min(clientPos.y, (typeof window !== "undefined" ? window.innerHeight : 0) - 240);
-    const canRunPull = engineKind()?.toString() === "pull";
-    const outs = getBakeableOutputs();
-    return (jsxRuntime.jsxs("div", { ref: ref, tabIndex: -1, className: "fixed z-[1000] bg-white border border-gray-300 rounded-lg shadow-lg p-1 min-w-[180px] text-sm text-gray-700", style: { left: x, top: y }, onClick: (e) => e.stopPropagation(), onMouseDown: (e) => e.stopPropagation(), onWheel: (e) => e.stopPropagation(), onContextMenu: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-        }, children: [jsxRuntime.jsxs("div", { className: "px-2 py-1 font-semibold text-gray-700", children: ["Node (", nodeId, ")"] }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDelete, children: "Delete" }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleDuplicate, children: "Duplicate" }), canRunPull && (jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleRunPull, children: "Run (pull)" })), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" }), outs.length > 0 && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "px-2 py-1 font-semibold text-gray-700", children: "Bake" }), outs.map((h) => (jsxRuntime.jsxs("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: async () => {
-                            await doBake(h);
-                            onClose();
-                        }, children: ["Bake: ", h] }, h))), jsxRuntime.jsx("div", { className: "h-px bg-gray-200 my-1" })] })), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleCopyId, children: "Copy Node ID" })] }));
+        return out;
+    }
+    catch {
+        return [];
+    }
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
-    const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, } = useWorkbenchContext();
+    const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, runner, engineKind, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
+    const [registryVersion, setRegistryVersion] = React.useState(0);
     // Keep stable references for nodes/edges to avoid unnecessary updates
     const prevNodesRef = React.useRef([]);
     const prevEdgesRef = React.useRef([]);
@@ -3579,9 +3630,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         },
     }));
     const { onConnect, onNodesChange, onEdgesChange, onEdgesDelete, onNodesDelete, } = useWorkbenchBridge(wb);
+    const ui = wb.getUI();
     const { nodeTypes, resolveNodeType } = React.useMemo(() => {
         // Build nodeTypes map using UI extension registry
-        const ui = wb.getUI();
         const custom = new Map(); // Include all types present in registry AND current graph to avoid timing issues
         const def = wb.export();
         const ids = new Set([
@@ -3603,7 +3654,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
         const resolver = (nodeTypeId) => custom.has(nodeTypeId) ? `spark-${nodeTypeId}` : "spark-default";
         return { nodeTypes: types, resolveNodeType: resolver };
         // Include uiVersion to recompute when custom renderers are registered
-    }, [wb, registry, uiVersion]);
+    }, [wb, registry, uiVersion, ui]);
     const { nodes, edges } = React.useMemo(() => {
         const def = wb.export();
         const sel = wb.getSelection();
@@ -3767,15 +3818,65 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             setNodeMenuOpen(false);
         }
     };
-    const addNodeAt = React.useCallback((typeId, pos) => {
-        wb.addNode({ typeId, position: pos });
-    }, [wb]);
+    const addNodeAt = React.useCallback(async (typeId, opts) => {
+        const nodeId = wb.addNode({
+            typeId,
+            initialInputs: opts.initialInputs,
+            position: opts.position,
+        });
+        if (opts.inputs) {
+            runner.update(wb.export());
+            await runner.whenIdle();
+            runner.setInputs(nodeId, opts.inputs);
+        }
+    }, [wb, runner]);
     const onCloseMenu = React.useCallback(() => {
         setMenuOpen(false);
     }, []);
     const onCloseNodeMenu = React.useCallback(() => {
         setNodeMenuOpen(false);
     }, []);
+    React.useEffect(() => {
+        const off = runner.on("registry", () => {
+            setRegistryVersion((v) => v + 1);
+        });
+        return () => off();
+    }, [runner]);
+    const nodeIds = React.useMemo(() => Array.from(registry.nodes.keys()), [registry, registryVersion]);
+    const defaultContextMenuHandlers = React.useMemo(() => ({
+        onAddNode: addNodeAt,
+        onClose: onCloseMenu,
+    }), [addNodeAt, onCloseMenu]);
+    const nodeContextMenuHandlers = React.useMemo(() => {
+        if (!nodeAtMenu)
+            return null;
+        return createNodeContextMenuHandlers(nodeAtMenu, wb, runner, registry, outputsMap, outputTypesMap, onCloseNodeMenu);
+    }, [
+        nodeAtMenu,
+        wb,
+        runner,
+        registry,
+        outputsMap,
+        outputTypesMap,
+        onCloseNodeMenu,
+    ]);
+    const canRunPull = React.useMemo(() => engineKind()?.toString() === "pull", [engineKind]);
+    const bakeableOutputs = React.useMemo(() => {
+        if (!nodeAtMenu)
+            return [];
+        return getBakeableOutputs(nodeAtMenu, wb, registry, outputTypesMap);
+    }, [nodeAtMenu, wb, registry, outputTypesMap]);
+    // Get custom renderers from UI extension registry (reactive to uiVersion changes)
+    const { BackgroundRenderer, MinimapRenderer, ControlsRenderer, DefaultContextMenuRenderer, NodeContextMenuRenderer, connectionLineRenderer, } = React.useMemo(() => {
+        return {
+            BackgroundRenderer: ui.getBackgroundRenderer(),
+            MinimapRenderer: ui.getMinimapRenderer(),
+            ControlsRenderer: ui.getControlsRenderer(),
+            DefaultContextMenuRenderer: ui.getDefaultContextMenuRenderer(),
+            NodeContextMenuRenderer: ui.getNodeContextMenuRenderer(),
+            connectionLineRenderer: ui.getConnectionLineRenderer(),
+        };
+    }, [ui, uiVersion]);
     const onMoveEnd = React.useCallback(() => {
         if (rfInstanceRef.current) {
             const viewport = rfInstanceRef.current.getViewport();
@@ -3800,7 +3901,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             });
         }
     });
-    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsx(react.ReactFlowProvider, { children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, selectionOnDrag: true, onInit: (inst) => {
+    return (jsxRuntime.jsx("div", { className: "w-full h-full", onContextMenu: onContextMenu, children: jsxRuntime.jsx(react.ReactFlowProvider, { children: jsxRuntime.jsxs(react.ReactFlow, { nodes: throttled.nodes, edges: throttled.edges, nodeTypes: nodeTypes, connectionLineComponent: connectionLineRenderer, selectionOnDrag: true, onInit: (inst) => {
                     rfInstanceRef.current = inst;
                     const savedViewport = wb.getViewport();
                     if (savedViewport) {
@@ -3811,7 +3912,9 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
                             zoom: savedViewport.zoom,
                         });
                     }
-                }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, onMoveEnd: onMoveEnd, deleteKeyCode: ["Backspace", "Delete"], proOptions: { hideAttribution: true }, noDragClassName: "wb-nodrag", noWheelClassName: "wb-nowheel", noPanClassName: "wb-nopan", fitView: true, children: [jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 }), jsxRuntime.jsx(react.MiniMap, {}), jsxRuntime.jsx(react.Controls, {}), jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, onAdd: addNodeAt, onClose: onCloseMenu }), !!nodeAtMenu && (jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: onCloseNodeMenu }))] }) }) }));
+                }, 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 ? (jsxRuntime.jsx(BackgroundRenderer, {})) : (jsxRuntime.jsx(react.Background, { id: "workbench-canvas-background", variant: react.BackgroundVariant.Dots, gap: 12, size: 1 })), MinimapRenderer ? jsxRuntime.jsx(MinimapRenderer, {}) : jsxRuntime.jsx(react.MiniMap, {}), ControlsRenderer ? jsxRuntime.jsx(ControlsRenderer, {}) : jsxRuntime.jsx(react.Controls, {}), DefaultContextMenuRenderer ? (jsxRuntime.jsx(DefaultContextMenuRenderer, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds })) : (jsxRuntime.jsx(DefaultContextMenu, { open: menuOpen, clientPos: menuPos, handlers: defaultContextMenuHandlers, registry: registry, nodeIds: nodeIds })), !!nodeAtMenu &&
+                        nodeContextMenuHandlers &&
+                        (NodeContextMenuRenderer ? (jsxRuntime.jsx(NodeContextMenuRenderer, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs })) : (jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, handlers: nodeContextMenuHandlers, canRunPull: canRunPull, bakeableOutputs: bakeableOutputs })))] }) }) }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {
@@ -4359,11 +4462,16 @@ exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;
 exports.computeEffectiveHandles = computeEffectiveHandles;
 exports.countVisibleHandles = countVisibleHandles;
+exports.createHandleBounds = createHandleBounds;
+exports.createHandleLayout = createHandleLayout;
 exports.download = download;
 exports.estimateNodeSize = estimateNodeSize;
 exports.formatDataUrlAsLabel = formatDataUrlAsLabel;
 exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
+exports.getHandleBoundsX = getHandleBoundsX;
+exports.getHandleBoundsY = getHandleBoundsY;
 exports.getHandleClassName = getHandleClassName;
+exports.getHandleLayoutY = getHandleLayoutY;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
 exports.layoutNode = layoutNode;
 exports.preformatValueForDisplay = preformatValueForDisplay;