@bian-womp/spark-workbench 0.2.22 → 0.2.24

package/lib/cjs/index.cjs

@@ -534,13 +534,19 @@ class LocalGraphRunner extends AbstractGraphRunner {
         const def = undefined; // UI will supply def/positions on download for local
         const inputs = this.getInputs(this.runtime
             ? {
-                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({ nodeId: id, typeId: "" })),
+                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({
+                    nodeId: id,
+                    typeId: "",
+                })),
                 edges: [],
             }
             : { nodes: [], edges: [] });
         const outputs = this.getOutputs(this.runtime
             ? {
-                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({ nodeId: id, typeId: "" })),
+                nodes: Array.from(this.runtime.getNodeIds()).map((id) => ({
+                    nodeId: id,
+                    typeId: "",
+                })),
                 edges: [],
             }
             : { nodes: [], edges: [] });
@@ -1261,18 +1267,44 @@ function layoutNode(args) {
 }
 
 function toReactFlow(def, positions, 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" };
-    const nodeHandleMap = {};
-    // Precompute which inputs are connected per node
+    // Build a map of valid handles per node up-front
+    const validHandleMap = {};
+    for (const n of def.nodes) {
+        const { inputs, outputs } = computeEffectiveHandles(n, registry);
+        const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
+        const outputOrder = Object.keys(outputs);
+        validHandleMap[n.nodeId] = {
+            inputs: new Set(inputOrder),
+            outputs: new Set(outputOrder),
+        };
+    }
+    // Track which inputs are connected (for UI) and which handles are missing (for layout)
     const connectedInputs = {};
+    const missingInputsByNode = {};
+    const missingOutputsByNode = {};
     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 tgtId = e.target.nodeId;
+        const tgtHandle = e.target.handle;
+        if (!connectedInputs[tgtId])
+            connectedInputs[tgtId] = new Set();
+        connectedInputs[tgtId].add(tgtHandle);
+        const tgtValid = !!validHandleMap[tgtId]?.inputs.has(tgtHandle);
+        if (!tgtValid) {
+            (missingInputsByNode[tgtId] || (missingInputsByNode[tgtId] = new Set())).add(tgtHandle);
+        }
+        const srcId = e.source.nodeId;
+        const srcHandle = e.source.handle;
+        const srcValid = !!validHandleMap[srcId]?.outputs.has(srcHandle);
+        if (!srcValid) {
+            (missingOutputsByNode[srcId] || (missingOutputsByNode[srcId] = new Set())).add(srcHandle);
+        }
+    }
+    // This map is still used later for certain checks; align with valid handles
+    const nodeHandleMap = {};
+    Object.assign(nodeHandleMap, validHandleMap);
     const nodes = def.nodes.map((n) => {
         const { inputs: inputSource, outputs: outputSource } = computeEffectiveHandles(n, registry);
         const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
@@ -1294,11 +1326,61 @@ function toReactFlow(def, positions, registry, opts) {
             inputs: new Set(inputHandles.map((h) => h.id)),
             outputs: new Set(outputHandles.map((h) => h.id)),
         };
-        // Shared sizing
+        // Append placeholder entries for any missing handles (below valid ones)
+        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 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,
+            missing: true,
+        }));
+        const extraHandleLayoutRight = extraOutputs.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            y: HEADER + (baseRightCount + i) * ROW + ROW / 2,
+            missing: true,
+        }));
+        const handleLayout = [
+            ...geom.handleLayout,
+            ...extraHandleLayoutLeft,
+            ...extraHandleLayoutRight,
+        ];
+        // Precompute handle bounds (including missing) so edges can render immediately
+        const missingBoundsLeft = extraInputs.map((id, i) => ({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            x: 0,
+            y: HEADER + (baseLeftCount + i) * ROW,
+            width: 1,
+            height: ROW + 2,
+        }));
+        const missingBoundsRight = extraOutputs.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            x: geom.width - 1,
+            y: HEADER + (baseRightCount + i) * ROW,
+            width: 1,
+            height: ROW + 2,
+        }));
+        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;
-        // Precompute handle bounds so edges can render immediately without waiting for measurement
-        const handles = geom.handles;
+        const initialHeight = geom.height + Math.max(0, newRows - baseRows) * ROW;
         return {
             id: n.nodeId,
             data: {
@@ -1310,7 +1392,7 @@ function toReactFlow(def, positions, registry, opts) {
                     h.id,
                     !!connectedInputs[n.nodeId]?.has(h.id),
                 ])),
-                handleLayout: geom.handleLayout,
+                handleLayout,
                 showValues: opts.showValues,
                 renderWidth: initialWidth,
                 renderHeight: initialHeight,
@@ -1337,24 +1419,21 @@ function toReactFlow(def, positions, registry, opts) {
             height: initialHeight,
         };
     });
-    const edges = def.edges
-        .filter((e) => {
-        const src = nodeHandleMap[e.source.nodeId];
-        const dst = nodeHandleMap[e.target.nodeId];
-        if (!src || !dst)
-            return false;
-        return (src.outputs.has(e.source.handle) && dst.inputs.has(e.target.handle));
-    })
-        .map((e) => {
+    const edges = def.edges.map((e) => {
         const st = opts.edgeStatus?.[e.id];
         const isRunning = !!st?.activeRuns;
         const hasError = !!st?.lastError;
         const isInvalidEdge = !!opts.edgeValidation?.[e.id];
-        const style = hasError || isInvalidEdge
-            ? EDGE_STYLE_ERROR
-            : isRunning
-                ? EDGE_STYLE_RUNNING
-                : undefined;
+        const sourceMissing = !validHandleMap[e.source.nodeId]?.outputs.has(e.source.handle);
+        const targetMissing = !validHandleMap[e.target.nodeId]?.inputs.has(e.target.handle);
+        const isMissing = sourceMissing || targetMissing;
+        const style = isMissing
+            ? EDGE_STYLE_MISSING
+            : hasError || isInvalidEdge
+                ? EDGE_STYLE_ERROR
+                : isRunning
+                    ? EDGE_STYLE_RUNNING
+                    : undefined;
         return {
             id: e.id,
             source: e.source.nodeId,
@@ -1364,7 +1443,7 @@ function toReactFlow(def, positions, registry, opts) {
             selected: opts.selectedEdgeIds
                 ? opts.selectedEdgeIds.has(e.id)
                 : undefined,
-            animated: isRunning,
+            animated: isRunning && !isMissing,
             style,
             label: e.typeId || undefined,
         };
@@ -2161,6 +2240,17 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                 }, title: "Delete referenced edge", children: "Delete edge" }))] }, i))) })] }))] })) }), debug && (jsxRuntime.jsx("div", { className: "mt-3 flex-none min-h-0 h-[50%]", children: jsxRuntime.jsx(DebugEvents, { autoScroll: !!autoScroll, hideWorkbench: !!hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange }) }))] }));
 }
 
+function NodeHandleItem({ kind, id, type, position, y, isConnectable, className, labelClassName, renderLabel, }) {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: id, type: type, position: position, isConnectable: isConnectable, className: className, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.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, 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", }) {
     const layout = data.handleLayout ?? [];
     const byId = React.useMemo(() => {
@@ -2171,40 +2261,49 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
                 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 });
+                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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(data.inputHandles ?? []).map((h) => {
                 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;
-                return (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "target", position: position, isConnectable: isConnectable, className: cls, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " left-2", style: {
-                                top: (y ?? 0) - 8,
-                                right: "50%",
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                            }, children: renderLabel({ kind: "input", id: h.id }) }))] }, h.id));
+                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));
             }), (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.jsxs(React.Fragment, { children: [jsxRuntime.jsx(react.Handle, { id: h.id, type: "source", position: position, isConnectable: isConnectable, className: `${cls} wb-nodrag wb-nowheel`, style: y !== undefined ? { top: y } : undefined }), renderLabel && (jsxRuntime.jsx("div", { className: labelClassName + " right-2", style: {
-                                top: (y ?? 0) - 8,
-                                left: "50%",
-                                textAlign: "right",
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis",
-                            }, children: renderLabel({ kind: "output", id: h.id }) }))] }, h.id));
+                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));
+            }), 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));
             })] }));
 }
 
@@ -2297,7 +2396,7 @@ function DefaultNodeContent({ data, isConnectable, }) {
                     const entries = kind === "input" ? inputEntries : outputEntries;
                     const entry = entries.find((e) => e.id === handleId);
                     if (!entry)
-                        return handleId;
+                        return prettyHandle(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");
@@ -2738,7 +2837,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             })
                 .map((n) => n.id);
             // Detect handle updates (ids/length changes) for targeted debug
-            const toIds = (arr) => Array.isArray(arr) ? arr.map((h) => h?.id) : [];
+            const toIds = (arr) => Array.isArray(arr) ? arr.map((h) => (h && typeof h === "object" && "id" in h ? String(h.id) : "")).filter(Boolean) : [];
             const handlesEqual = (a, b) => {
                 const aIds = toIds(a);
                 const bIds = toIds(b);
@@ -3010,7 +3109,8 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             URL.revokeObjectURL(url);
         }
         catch (err) {
-            alert(String(err?.message ?? err));
+            const message = err instanceof Error ? err.message : String(err);
+            alert(message);
         }
     }, [wb, runner]);
     const onUploadPicked = React.useCallback(async (e) => {
@@ -3068,7 +3168,8 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             runAutoLayout();
         }
         catch (err) {
-            alert(String(err?.message ?? err));
+            const message = err instanceof Error ? err.message : String(err);
+            alert(message);
         }
         finally {
             // reset input so same file can be picked again
@@ -3318,8 +3419,9 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
             return pre;
         if (typeof value === "object" &&
             value !== null &&
+            "url" in value &&
             typeof value.url === "string") {
-            const title = value.title || "";
+            const title = ("title" in value && typeof value.title === "string") ? value.title : "";
             const url = String(value.url || "");
             // value.ts handles data URL formatting
             return title || url.slice(0, 32) + (url.length > 32 ? "…" : "");
@@ -3332,7 +3434,7 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
         const round4 = (n) => Math.round(Number(n) * 10000) / 10000;
         if (typeId === "base.vec3" && Array.isArray(value)) {
             const a = value;
-            return [round4(a[0] ?? 0), round4(a[1] ?? 0), round4(a[2] ?? 0)].join(",");
+            return [round4(Number(a[0] ?? 0)), round4(Number(a[1] ?? 0)), round4(Number(a[2] ?? 0))].join(",");
         }
         const stringifyRounded = (v) => {
             try {
@@ -3383,7 +3485,8 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 runner.launch(wb.export(), { engine: kind });
                             }
                             catch (err) {
-                                alert(String(err?.message ?? err));
+                                const message = err instanceof Error ? err.message : String(err);
+                                alert(message);
                             }
                         }, disabled: !engine, title: engine ? "Start engine" : "Select an engine first", children: [jsxRuntime.jsx(react$1.PlayIcon, { size: 14, weight: "fill" }), jsxRuntime.jsx("span", { className: "font-medium ml-1", children: "Start" })] })), jsxRuntime.jsx("button", { className: "border border-gray-300 rounded px-2 py-1.5", onClick: runAutoLayout, children: "Auto Layout" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: () => canvasRef.current?.fitView?.(), title: "Fit View", children: "Fit View" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: downloadGraph, children: "Download Graph" }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: async () => {
                             try {
@@ -3411,7 +3514,8 @@ function WorkbenchStudioCanvas({ setRegistry, autoScroll, onAutoScrollChange, ex
                                 URL.revokeObjectURL(url);
                             }
                             catch (err) {
-                                alert(String(err?.message ?? err));
+                                const message = err instanceof Error ? err.message : String(err);
+                                alert(message);
                             }
                         }, children: "Download Snapshot" }), jsxRuntime.jsx("input", { ref: uploadInputRef, type: "file", accept: "application/json,.json", className: "hidden", onChange: onUploadPicked }), jsxRuntime.jsx("button", { className: "ml-2 border border-gray-300 rounded px-2 py-1.5", onClick: triggerUpload, children: "Upload Graph/Snapshot" }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: debug, onChange: (e) => onDebugChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Debug events" })] }), jsxRuntime.jsxs("label", { className: "ml-2 flex items-center gap-1", children: [jsxRuntime.jsx("input", { type: "checkbox", checked: showValues, onChange: (e) => onShowValuesChange(e.target.checked) }), jsxRuntime.jsx("span", { children: "Show values in nodes" })] })] }), jsxRuntime.jsxs("div", { className: "flex flex-1 min-h-0", children: [jsxRuntime.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntime.jsx(WorkbenchCanvas, { ref: canvasRef, showValues: showValues, toString: toString, toElement: toElement, getDefaultNodeSize: overrides?.getDefaultNodeSize }) }), jsxRuntime.jsx(Inspector, { setInput: setInput, debug: debug, autoScroll: autoScroll, hideWorkbench: hideWorkbench, onAutoScrollChange: onAutoScrollChange, onHideWorkbenchChange: onHideWorkbenchChange, toString: toString, toElement: toElement, contextPanel: overrides?.contextPanel })] })] }));
 }