@bian-womp/spark-workbench 0.2.7 → 0.2.9

package/lib/cjs/index.cjs

@@ -548,6 +548,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
                                         displayName: d.displayName,
                                         options: d.options,
                                         opts: d.opts,
+                                        bakeTarget: d.bakeTarget,
                                     });
                                 }
                                 else if (d.kind === "register-type") {
@@ -556,6 +557,7 @@ class RemoteGraphRunner extends AbstractGraphRunner {
                                             id: d.id,
                                             displayName: d.displayName,
                                             validate: (_v) => true,
+                                            bakeTarget: d.bakeTarget,
                                         });
                                     }
                                 }
@@ -678,6 +680,15 @@ class RemoteGraphRunner extends AbstractGraphRunner {
             catch { }
         });
     }
+    async coerce(from, to, value) {
+        const runner = await this.ensureRemoteRunner();
+        try {
+            return await runner.coerce(from, to, value);
+        }
+        catch {
+            return value;
+        }
+    }
     getOutputs(def) {
         const out = {};
         const cache = this.valueCache;
@@ -1108,6 +1119,15 @@ function toReactFlow(def, positions, registry, opts) {
     const EDGE_STYLE_ERROR = { stroke: "#ef4444", strokeWidth: 2 };
     const EDGE_STYLE_RUNNING = { stroke: "#3b82f6" };
     const nodeHandleMap = {};
+    // Precompute which inputs are connected per node
+    const connectedInputs = {};
+    for (const e of def.edges) {
+        const nid = e.target.nodeId;
+        const hid = e.target.handle;
+        if (!connectedInputs[nid])
+            connectedInputs[nid] = new Set();
+        connectedInputs[nid].add(hid);
+    }
     const nodes = def.nodes.map((n) => {
         const desc = registry.nodes.get(n.typeId);
         const inputHandles = Object.entries(desc?.inputs ?? {})
@@ -1156,6 +1176,10 @@ function toReactFlow(def, positions, registry, opts) {
                 params: n.params,
                 inputHandles,
                 outputHandles,
+                inputConnected: Object.fromEntries(inputHandles.map((h) => [
+                    h.id,
+                    !!connectedInputs[n.nodeId]?.has(h.id),
+                ])),
                 handleLayout: [
                     ...inputHandles.map((h, i) => ({
                         id: h.id,
@@ -1958,12 +1982,20 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
     const byId = React.useMemo(() => {
         const m = new Map();
         for (const h of layout) {
-            m.set(h.id, { position: h.position, y: h.y, type: h.type });
+            // 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,
+            });
+            // 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 });
         }
         return m;
     }, [layout]);
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(data.inputHandles ?? []).map((h) => {
-                const placed = byId.get(h.id);
+                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" }) ??
@@ -1976,7 +2008,7 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
                                 textOverflow: "ellipsis",
                             }, children: renderLabel({ kind: "input", id: h.id }) }))] }, h.id));
             }), (data.outputHandles ?? []).map((h) => {
-                const placed = byId.get(h.id);
+                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" }) ??
@@ -2021,17 +2053,37 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
             position: "relative",
             minWidth: typeof data.renderWidth === "number" ? data.renderWidth : undefined,
             minHeight: typeof data.renderHeight === "number" ? data.renderHeight : undefined,
-        }, children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", style: {
-                    maxHeight: NODE_HEADER_HEIGHT_PX,
-                    minHeight: NODE_HEADER_HEIGHT_PX,
-                }, children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: typeId }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
-                                    ? "error"
-                                    : "warning", size: 12, className: "w-3 h-3", title: validation.issues
-                                    .map((v) => `${v.code}: ${v.message}`)
-                                    .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }), jsxRuntime.jsx(DefaultNodeContent, { data: data, isConnectable: isConnectable })] }));
+        }, children: [jsxRuntime.jsx(DefaultNodeHeader, { id: id, title: typeId, status: status, validation: validation }), jsxRuntime.jsx(DefaultNodeContent, { id: id, data: data, isConnectable: isConnectable })] }));
 });
 DefaultNode.displayName = "DefaultNode";
-function DefaultNodeContent({ data, isConnectable, }) {
+function DefaultNodeHeader({ id, title, status, validation, right, onInvalidate, }) {
+    const ctx = useWorkbenchContext();
+    const handleInvalidate = React.useCallback(() => {
+        try {
+            if (onInvalidate)
+                return onInvalidate();
+            const kind = ctx.engineKind?.();
+            if (kind === "pull")
+                ctx.runner.computeNode(id);
+            else
+                ctx.triggerExternal?.(id, { type: "invalidate" });
+        }
+        catch { }
+    }, [ctx, id, onInvalidate]);
+    return (jsxRuntime.jsxs("div", { className: "flex items-center justify-center px-2 border-b border-solid border-gray-500 dark:border-gray-400 text-gray-600 dark:text-gray-300", style: {
+            maxHeight: NODE_HEADER_HEIGHT_PX,
+            minHeight: NODE_HEADER_HEIGHT_PX,
+        }, children: [jsxRuntime.jsx("strong", { className: "flex-1 h-full text-sm", style: { lineHeight: `${NODE_HEADER_HEIGHT_PX}px` }, children: title }), jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [jsxRuntime.jsx("button", { className: "w-4 h-4 border border-gray-400 rounded text-[10px] leading-3 flex items-center justify-center", title: "Invalidate and re-run", onClick: (e) => {
+                            e.stopPropagation();
+                            handleInvalidate();
+                        }, children: "\u21BB" }), right, validation.issues && validation.issues.length > 0 && (jsxRuntime.jsx(IssueBadge, { level: validation.issues.some((i) => i.level === "error")
+                            ? "error"
+                            : "warning", size: 12, className: "w-3 h-3", title: validation.issues
+                            .map((v) => `${v.code}: ${v.message}`)
+                            .join("; ") })), jsxRuntime.jsxs("span", { className: "text-[10px] opacity-70", children: ["(", id, ")"] })] })] }));
+}
+function DefaultNodeContent({ id, data, isConnectable, }) {
+    const ctx = useWorkbenchContext();
     const { showValues, inputValues, outputValues, toString } = data;
     const inputEntries = data.inputHandles ?? [];
     const outputEntries = data.outputHandles ?? [];
@@ -2041,17 +2093,109 @@ function DefaultNodeContent({ 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;
                     const hasErr = vIssues.some((v) => v.level === "error");
                     return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900 !border-gray-500 dark:!border-gray-400", kind === "output" && "!rounded-none", hasAny && (hasErr ? "!border-red-500" : "!border-amber-500"));
-                }, renderLabel: ({ kind, id }) => {
+                }, renderLabel: ({ kind, id: handleId }) => {
                     const entries = kind === "input" ? inputEntries : outputEntries;
-                    const entry = entries.find((e) => e.id === id);
+                    const entry = entries.find((e) => e.id === handleId);
                     if (!entry)
-                        return id;
-                    const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === id);
+                        return handleId;
+                    const vIssues = (kind === "input" ? validation.inputs : validation.outputs).filter((v) => v.handle === handleId);
                     const hasAny = vIssues.length > 0;
                     const hasErr = vIssues.some((v) => v.level === "error");
                     const title = vIssues
@@ -2068,7 +2212,26 @@ function DefaultNodeContent({ data, isConnectable, }) {
                         const txt = toString(resolved.typeId, resolved.value);
                         return typeof txt === "string" ? txt : String(txt);
                     })();
-                    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: id })] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("span", { className: "truncate shrink-0", style: { maxWidth: "40%" }, children: id }), 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 }))] }));
+                    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 }))] }));
                 } })] }));
 }
 
@@ -2633,6 +2796,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                     r.registerEnum({
                         id: t.id,
                         options: t.options,
+                        bakeTarget: t.bakeTarget,
                     });
                 }
                 else {
@@ -2640,6 +2804,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                         id: t.id,
                         displayName: t.displayName,
                         validate: (_v) => true,
+                        bakeTarget: t.bakeTarget,
                     });
                 }
             }
@@ -2947,6 +3112,7 @@ exports.AbstractWorkbench = AbstractWorkbench;
 exports.CLIWorkbench = CLIWorkbench;
 exports.DefaultNode = DefaultNode;
 exports.DefaultNodeContent = DefaultNodeContent;
+exports.DefaultNodeHeader = DefaultNodeHeader;
 exports.DefaultUIExtensionRegistry = DefaultUIExtensionRegistry;
 exports.InMemoryWorkbench = InMemoryWorkbench;
 exports.Inspector = Inspector;