@bian-womp/spark-workbench 0.2.9 → 0.2.10

package/lib/cjs/index.cjs

@@ -169,6 +169,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
             change: { type: "addNode", nodeId: id },
         });
         this.refreshValidation();
+        return id;
     }
     removeNode(nodeId) {
         this.def.nodes = this.def.nodes.filter((n) => n.nodeId !== nodeId);
@@ -193,6 +194,7 @@ class InMemoryWorkbench extends AbstractWorkbench {
             change: { type: "connect", edgeId: id },
         });
         this.refreshValidation();
+        return id;
     }
     disconnect(edgeId) {
         this.def.edges = this.def.edges.filter((e) => e.id !== edgeId);
@@ -2083,7 +2085,7 @@ function DefaultNodeHeader({ id, title, status, validation, right, onInvalidate,
                             .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }));
 }
 function DefaultNodeContent({ id, data, isConnectable, }) {
-    const ctx = useWorkbenchContext();
+    useWorkbenchContext();
     const { showValues, inputValues, outputValues, toString } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
@@ -2093,98 +2095,6 @@ function DefaultNodeContent({ id, data, isConnectable, }) {
         outputs: []};
     const isRunning = !!status.activeRuns;
     const pct = Math.round(Math.max(0, Math.min(1, Number(status.progress) || 0)) * 100);
-    const handleBake = React.useCallback(async (handleId) => {
-        try {
-            const typeId = ctx.outputTypesMap?.[id]?.[handleId];
-            const rawValue = ctx.outputsMap?.[id]?.[handleId];
-            if (!typeId || rawValue === undefined)
-                return;
-            const unwrap = (v) => sparkGraph.isTypedOutput(v) ? sparkGraph.getTypedOutputValue(v) : v;
-            const clone = (v) => typeof structuredClone === "function"
-                ? structuredClone(v)
-                : JSON.parse(JSON.stringify(v));
-            const coerceIfNeeded = async (fromType, toType, value) => {
-                if (!toType || toType === fromType || !ctx.runner?.coerce)
-                    return value;
-                try {
-                    return await ctx.runner.coerce(fromType, toType, value);
-                }
-                catch {
-                    return value;
-                }
-            };
-            const positions = ctx.wb.getPositions();
-            const pos = positions[id] || { x: 0, y: 0 };
-            const isArray = typeId.endsWith("[]");
-            const baseTypeId = isArray ? typeId.slice(0, -2) : typeId;
-            const tArr = isArray ? ctx.registry?.types.get(typeId) : undefined;
-            const tElem = ctx.registry?.types.get(baseTypeId);
-            const singleTarget = !isArray ? tElem?.bakeTarget : undefined;
-            const arrTarget = isArray ? tArr?.bakeTarget : undefined;
-            const elemTarget = isArray ? tElem?.bakeTarget : undefined;
-            const makeTargetInfo = (bt) => {
-                if (!bt)
-                    return undefined;
-                const node = ctx.registry?.nodes.get(String(bt.nodeTypeId));
-                const inType = sparkGraph.getInputTypeId(node?.inputs, String(bt.inputHandle || "Value"));
-                return { bt, inType };
-            };
-            // Plan and execute
-            if (singleTarget) {
-                const info = makeTargetInfo(singleTarget);
-                const v = unwrap(rawValue);
-                const coerced = await coerceIfNeeded(typeId, info?.inType, v);
-                ctx.wb.addNode({
-                    nodeId: undefined,
-                    typeId: String(singleTarget.nodeTypeId),
-                    position: { x: pos.x + 180, y: pos.y },
-                    params: {},
-                    initialInputs: {
-                        [String(singleTarget.inputHandle || "Value")]: clone(coerced),
-                    },
-                });
-                return;
-            }
-            if (isArray && arrTarget) {
-                const info = makeTargetInfo(arrTarget);
-                const v = unwrap(rawValue);
-                const coerced = await coerceIfNeeded(typeId, info?.inType, v);
-                ctx.wb.addNode({
-                    nodeId: undefined,
-                    typeId: String(arrTarget.nodeTypeId),
-                    position: { x: pos.x + 180, y: pos.y },
-                    params: {},
-                    initialInputs: {
-                        [String(arrTarget.inputHandle || "Value")]: clone(coerced),
-                    },
-                });
-                return;
-            }
-            if (isArray && elemTarget && Array.isArray(rawValue)) {
-                const info = makeTargetInfo(elemTarget);
-                const items = rawValue.map(unwrap);
-                const coercedItems = await Promise.all(items.map((v) => coerceIfNeeded(baseTypeId, info?.inType, v)));
-                const COLS = 4;
-                const DX = 180;
-                const DY = 160;
-                coercedItems.forEach((cv, idx) => {
-                    const col = idx % COLS;
-                    const row = Math.floor(idx / COLS);
-                    ctx.wb.addNode({
-                        nodeId: undefined,
-                        typeId: String(elemTarget.nodeTypeId),
-                        position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
-                        params: {},
-                        initialInputs: {
-                            [String(elemTarget.inputHandle || "Value")]: clone(cv),
-                        },
-                    });
-                });
-                return;
-            }
-        }
-        catch { }
-    }, [ctx, id]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: cx("h-px", (isRunning || pct > 0) && "bg-blue-200 dark:bg-blue-900"), children: jsxRuntime.jsx("div", { className: cx("h-px transition-all", (isRunning || pct > 0) && "bg-blue-500"), style: { width: isRunning || pct > 0 ? `${pct}%` : 0 } }) }), jsxRuntime.jsx(NodeHandles, { data: data, isConnectable: isConnectable, getClassName: ({ kind, id }) => {
                     const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === id);
                     const hasAny = vIssues.length > 0;
@@ -2212,26 +2122,7 @@ function DefaultNodeContent({ id, data, isConnectable, }) {
                         const txt = toString(resolved.typeId, resolved.value);
                         return typeof txt === "string" ? txt : String(txt);
                     })();
-                    const tId = ctx.outputTypesMap?.[id]?.[handleId];
-                    let canBake = false;
-                    if (tId?.endsWith("[]")) {
-                        const base = tId.slice(0, -2);
-                        const tArr = ctx.registry?.types.get(tId);
-                        const tElem = ctx.registry?.types.get(base);
-                        const arrTarget = tArr?.bakeTarget;
-                        const elemTarget = tElem?.bakeTarget;
-                        canBake = !!((arrTarget && ctx.registry?.nodes?.has?.(arrTarget.nodeTypeId)) ||
-                            (elemTarget && ctx.registry?.nodes?.has?.(elemTarget.nodeTypeId)));
-                    }
-                    else if (tId) {
-                        const t = ctx.registry?.types.get(tId);
-                        const target = t?.bakeTarget;
-                        canBake = !!(target && ctx.registry?.nodes?.has?.(target.nodeTypeId));
-                    }
-                    return (jsxRuntime.jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [canBake && (jsxRuntime.jsx("button", { onClick: (e) => {
-                                            e.stopPropagation();
-                                            handleBake(handleId);
-                                        }, title: "Bake value", className: "pointer-events-auto border border-gray-300 rounded px-1 py-0.5 text-[10px] bg-white/80 hover:bg-white mr-2", children: "Bake" })), valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: handleId })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: handleId }), valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
+                    return (jsxRuntime.jsxs("span", { className: "flex items-center gap-1 w-full", children: [kind === "output" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pl-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText })), jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: handleId })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: handleId }), valueText !== undefined && (jsxRuntime.jsx("span", { className: "opacity-60 truncate pr-1", style: { flex: 1, minWidth: 0, maxWidth: "100%" }, children: valueText }))] })), hasAny && (jsxRuntime.jsx(IssueBadge, { level: hasErr ? "error" : "warning", size: 12, className: "shrink-0", title: title }))] }));
                 } })] }));
 }
 
@@ -2322,7 +2213,7 @@ function DefaultContextMenu({ open, clientPos, onAdd, onClose, }) {
 }
 
 function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
-    const { wb, runner, engineKind } = useWorkbenchContext();
+    const { wb, runner, engineKind, registry, outputsMap, outputTypesMap } = useWorkbenchContext();
     const ref = React.useRef(null);
     // outside click + ESC
     React.useEffect(() => {
@@ -2357,39 +2248,181 @@ function NodeContextMenu({ open, clientPos, nodeId, onClose, }) {
     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);
+    // 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 [];
+        }
+    };
+    const doBake = async (handleId) => {
+        try {
+            const typeId = outputTypesMap?.[nodeId]?.[handleId];
+            const raw = outputsMap?.[nodeId]?.[handleId];
+            if (!typeId || raw === undefined)
+                return;
+            const unwrap = (v) => sparkGraph.isTypedOutput(v) ? sparkGraph.getTypedOutputValue(v) : v;
+            const clone = (v) => typeof structuredClone === "function"
+                ? structuredClone(v)
+                : JSON.parse(JSON.stringify(v));
+            const coerceIfNeeded = async (fromType, toType, value) => {
+                if (!toType || toType === fromType || !runner?.coerce)
+                    return value;
+                try {
+                    return await runner.coerce(fromType, toType, value);
+                }
+                catch {
+                    return value;
+                }
+            };
+            const pos = wb.getPositions?.()[nodeId] || { x: 0, y: 0 };
+            const isArray = typeId.endsWith("[]");
+            const baseTypeId = isArray ? typeId.slice(0, -2) : typeId;
+            const tArr = isArray ? registry.types.get(typeId) : undefined;
+            const tElem = registry.types.get(baseTypeId);
+            const singleTarget = !isArray ? tElem?.bakeTarget : undefined;
+            const arrTarget = isArray ? tArr?.bakeTarget : undefined;
+            const elemTarget = isArray ? tElem?.bakeTarget : undefined;
+            if (singleTarget) {
+                const nodeDesc = registry.nodes.get(String(singleTarget.nodeTypeId));
+                const inType = sparkGraph.getInputTypeId(nodeDesc?.inputs, String(singleTarget.inputHandle || "Value"));
+                const coerced = await coerceIfNeeded(typeId, inType, unwrap(raw));
+                const newId = wb.addNode({
+                    typeId: String(singleTarget.nodeTypeId),
+                    position: { x: pos.x + 180, y: pos.y },
+                    params: {},
+                });
+                runner.update(wb.export());
+                await runner.whenIdle();
+                runner.setInputs(newId, {
+                    [String(singleTarget.inputHandle || "Value")]: coerced,
+                });
+                return;
+            }
+            if (isArray && arrTarget) {
+                const nodeDesc = registry.nodes.get(String(arrTarget.nodeTypeId));
+                const inType = sparkGraph.getInputTypeId(nodeDesc?.inputs, String(arrTarget.inputHandle || "Value"));
+                const coerced = await coerceIfNeeded(typeId, inType, unwrap(raw));
+                const newId = `n${Math.random().toString(36).slice(2, 8)}`;
+                wb.addNode({
+                    nodeId: newId,
+                    typeId: String(arrTarget.nodeTypeId),
+                    position: { x: pos.x + 180, y: pos.y },
+                    params: {},
+                });
+                runner.update(wb.export());
+                await runner.whenIdle();
+                runner.setInputs(newId, {
+                    [String(arrTarget.inputHandle || "Value")]: coerced,
+                });
+                return;
+            }
+            if (isArray && elemTarget && Array.isArray(raw)) {
+                const nodeDesc = registry.nodes.get(String(elemTarget.nodeTypeId));
+                const inType = sparkGraph.getInputTypeId(nodeDesc?.inputs, String(elemTarget.inputHandle || "Value"));
+                const items = raw.map(unwrap);
+                const coercedItems = await Promise.all(items.map((v) => coerceIfNeeded(baseTypeId, inType, v)));
+                const COLS = 4;
+                const DX = 180;
+                const DY = 160;
+                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: String(elemTarget.nodeTypeId),
+                        position: { x: pos.x + (col + 1) * DX, y: pos.y + row * DY },
+                        params: {},
+                        initialInputs: {
+                            [String(elemTarget.inputHandle || "Value")]: clone(cv),
+                        },
+                    });
+                    runner.update(wb.export());
+                    await runner.whenIdle();
+                    runner.setInputs(newId, {
+                        [String(elemTarget.inputHandle || "Value")]: cv,
+                    });
+                }
+                return;
+            }
+        }
+        catch { }
+    };
     // actions
-    const handleDelete = () => {
+    const handleDelete = React.useCallback(() => {
         wb.removeNode(nodeId);
         onClose();
-    };
-    const handleDuplicate = () => {
+    }, [nodeId, wb, onClose]);
+    const handleDuplicate = React.useCallback(() => {
         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 } });
+        wb.addNode({
+            typeId: n.typeId,
+            params: n.params,
+            position: { x: pos.x + 24, y: pos.y + 24 },
+        });
         onClose();
-    };
-    const handleCopyId = async () => {
+    }, [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();
-    };
-    const canRunPull = engineKind()?.toString() === "pull";
-    const handleRunPull = async () => {
+    }, [nodeId, onClose]);
+    const handleRunPull = React.useCallback(async () => {
         try {
             await runner.computeNode(nodeId);
         }
         catch { }
         onClose();
-    };
+    }, [nodeId, runner, onClose]);
+    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" }), jsxRuntime.jsx("button", { className: "block w-full text-left px-2 py-1 hover:bg-gray-100", onClick: handleCopyId, children: "Copy Node ID" })] }));
+        }, 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" })] }));
 }
 
 const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, getDefaultNodeSize }, ref) => {
@@ -2619,10 +2652,21 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             setNodeMenuOpen(false);
         }
     };
-    const addNodeAt = (typeId, pos) => {
+    const addNodeAt = React.useCallback((typeId, pos) => {
         wb.addNode({ typeId, position: pos });
-    };
-    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) => (rfInstanceRef.current = inst), onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, 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: () => setMenuOpen(false) }), jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: () => setNodeMenuOpen(false) })] }) }) }));
+    }, [wb]);
+    React.useCallback((inst) => {
+        rfInstanceRef.current = inst;
+    }, []);
+    const onCloseMenu = React.useCallback(() => {
+        setMenuOpen(false);
+    }, []);
+    const onCloseNodeMenu = React.useCallback(() => {
+        setNodeMenuOpen(false);
+    }, []);
+    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) => {
+                    rfInstanceRef.current = inst;
+                }, onConnect: onConnect, onEdgesChange: onEdgesChange, onEdgesDelete: onEdgesDelete, onNodesDelete: onNodesDelete, onNodesChange: onNodesChange, 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 }), jsxRuntime.jsx(NodeContextMenu, { open: nodeMenuOpen, clientPos: nodeMenuPos, nodeId: nodeAtMenu, onClose: onCloseNodeMenu })] }) }) }));
 });
 
 function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, example, onExampleChange, engine, onEngineChange, backendKind, onBackendKindChange, httpBaseUrl, onHttpBaseUrlChange, wsUrl, onWsUrlChange, debug, onDebugChange, showValues, onShowValuesChange, hideWorkbench, onHideWorkbenchChange, overrides, onInit, onChange, }) {