@bian-womp/spark-workbench 0.2.16 → 0.2.18

package/lib/cjs/index.cjs

@@ -1535,17 +1535,23 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                 const snap = await runner.snapshotFull();
                 const remoteDef = snap?.def;
                 if (remoteDef && Array.isArray(remoteDef.nodes)) {
+                    // Mutate current def in-place to avoid emitting graphChanged and causing update loop
                     const cur = wb.export();
-                    const merged = {
-                        ...cur,
-                        nodes: cur.nodes.map((n) => {
-                            const rn = (remoteDef.nodes || []).find((m) => m.nodeId === n.nodeId);
-                            if (rn && rn.resolvedHandles)
-                                return { ...n, resolvedHandles: rn.resolvedHandles };
-                            return n;
-                        }),
-                    };
-                    await wb.load(merged);
+                    const byId = new Map((remoteDef.nodes || []).map((n) => [n.nodeId, n]));
+                    let changed = false;
+                    for (const n of cur.nodes) {
+                        const rn = byId.get(n.nodeId);
+                        if (rn && rn.resolvedHandles) {
+                            const before = JSON.stringify(n.resolvedHandles || {});
+                            const after = JSON.stringify(rn.resolvedHandles || {});
+                            if (before !== after) {
+                                n.resolvedHandles = rn.resolvedHandles;
+                                changed = true;
+                            }
+                        }
+                    }
+                    if (changed)
+                        wb.refreshValidation();
                 }
             }
             catch { }
@@ -1557,8 +1563,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                     ...s,
                     [nodeId]: { ...s[nodeId], invalidated: true },
                 }));
-                // On any input change, refresh resolved handles (covers context-driven dynamic ports)
-                refreshResolvedHandles();
             }
             return add("runner", "value")(e);
         });
@@ -1602,9 +1606,10 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                     return next;
                 });
             }
-            // After build/update, pull resolved handles from remote snapshot and merge into local def for UI
-            if (e?.reason === "graph-updated" || e?.reason === "graph-built")
+            // After build/update, pull resolved handles and merge in-place (no graphChanged)
+            if (e?.reason === "graph-updated" || e?.reason === "graph-built") {
                 refreshResolvedHandles();
+            }
             return add("runner", "invalidate")(e);
         });
         const off3b = runner.on("stats", (s) => {
@@ -1769,17 +1774,17 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
                     const arr = inputs[d.nodeId] ?? (inputs[d.nodeId] = []);
                     arr.push({ handle: String(d.input), level, message, code });
                     const nodeArr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
-                    nodeArr.push({ level, message, code });
+                    nodeArr.push(is);
                 }
                 if (d.output) {
                     const arr = outputs[d.nodeId] ?? (outputs[d.nodeId] = []);
                     arr.push({ handle: String(d.output), level, message, code });
                     const nodeArr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
-                    nodeArr.push({ level, message, code });
+                    nodeArr.push(is);
                 }
                 if (!d.input && !d.output) {
                     const arr = issues[d.nodeId] ?? (issues[d.nodeId] = []);
-                    arr.push({ level, message, code });
+                    arr.push(is);
                 }
             }
         }
@@ -1791,11 +1796,8 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             return list;
         for (const is of validation.issues ?? []) {
             const d = is.data;
-            const level = is.level;
-            const code = String(is.code ?? "");
-            const message = String(is.message ?? code);
             if (!d || (!d.nodeId && !d.edgeId)) {
-                list.push({ level, code, message });
+                list.push(is);
             }
         }
         return list;
@@ -1808,13 +1810,11 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
         for (const is of validation.issues ?? []) {
             const d = is.data;
             const level = is.level;
-            const code = String(is.code ?? "");
-            const message = String(is.message ?? code);
             if (d?.edgeId) {
                 if (level === "error")
                     errors[d.edgeId] = true;
                 const arr = issues[d.edgeId] ?? (issues[d.edgeId] = []);
-                arr.push({ level, message, code });
+                arr.push(is);
             }
         }
         return { errors, issues };
@@ -2014,11 +2014,29 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
             setOriginals(nextOriginals);
     }, [selectedNodeId, selectedDesc, valuesTick]);
     const widthClass = debug ? "w-[480px]" : "w-[320px]";
-    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel }), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: "Type" }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: "DataTypeId" })] }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: selectedEdge.typeId ?? "", onChange: (e) => {
+    const { wb } = useWorkbenchContext();
+    const deleteEdgeById = (edgeId) => {
+        if (!edgeId)
+            return;
+        try {
+            wb.disconnect(edgeId);
+        }
+        catch { }
+    };
+    return (jsxRuntime.jsxs("div", { className: `${widthClass} border-l border-gray-300 p-3 flex flex-col h-full min-h-0 overflow-hidden`, children: [contextPanel && jsxRuntime.jsx("div", { className: "mb-2", children: contextPanel }), jsxRuntime.jsx("div", { className: "font-semibold mb-2", children: "Inspector" }), jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 mb-2", children: ["valuesTick: ", valuesTick] }), jsxRuntime.jsx("div", { className: "flex-1 overflow-auto", children: !selectedNode && !selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx("div", { className: "text-gray-500", children: "Select a node or edge." }), globalValidationIssues && globalValidationIssues.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: globalValidationIssues.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (jsxRuntime.jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    deleteEdgeById(m.data?.edgeId);
+                                                }, title: "Delete referenced edge", children: "Delete edge" }))] }, i))) })] }))] })) : selectedEdge ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Edge: ", selectedEdge.id] }), jsxRuntime.jsxs("div", { children: [selectedEdge.source.nodeId, ".", selectedEdge.source.handle, " \u2192", " ", selectedEdge.target.nodeId, ".", selectedEdge.target.handle] }), jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx("button", { className: "text-xs px-2 py-1 border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
+                                            e.stopPropagation();
+                                            deleteEdgeById(selectedEdge.id);
+                                        }, title: "Delete this edge", children: "Delete edge" }) }), jsxRuntime.jsxs("div", { className: "flex items-center gap-2 mt-1", children: [jsxRuntime.jsxs("label", { className: "w-20 flex flex-col", children: [jsxRuntime.jsx("span", { children: "Type" }), jsxRuntime.jsx("span", { className: "text-gray-500 text-[11px]", children: "DataTypeId" })] }), jsxRuntime.jsxs("select", { className: "border border-gray-300 rounded px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500 w-full", value: selectedEdge.typeId ?? "", onChange: (e) => {
                                                 const v = e.target.value;
                                                 const next = v === "" ? undefined : v;
                                                 updateEdgeType(selectedEdge.id, next);
-                                            }, children: [jsxRuntime.jsx("option", { value: "", children: "(infer from source)" }), Array.from(registry.types.keys()).map((tid) => (jsxRuntime.jsx("option", { value: tid, children: tid }, tid)))] })] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
+                                            }, children: [jsxRuntime.jsx("option", { value: "", children: "(infer from source)" }), Array.from(registry.types.keys()).map((tid) => (jsxRuntime.jsx("option", { value: tid, children: tid }, tid)))] })] })] }), selectedEdgeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedEdgeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` }), jsxRuntime.jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    deleteEdgeById(selectedEdge.id);
+                                                }, title: "Delete this edge", children: "Delete edge" })] }, i))) })] }))] })) : (jsxRuntime.jsxs("div", { children: [selectedNode && (jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsxs("div", { children: ["Node: ", selectedNode.nodeId] }), jsxRuntime.jsxs("div", { children: ["Type: ", selectedNode.typeId] }), !!selectedNodeStatus?.lastError && (jsxRuntime.jsx("div", { className: "mt-2 text-sm text-red-700 bg-red-50 border border-red-200 rounded px-2 py-1 break-words", children: String(selectedNodeStatus.lastError?.message ??
                                         selectedNodeStatus.lastError) }))] })), jsxRuntime.jsxs("div", { className: "mb-2", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Inputs" }), inputHandles.length === 0 ? (jsxRuntime.jsx("div", { className: "text-gray-500", children: "No inputs" })) : (inputHandles.map((h) => {
                                     const typeId = sparkGraph.getInputTypeId(selectedDesc?.inputs, h);
                                     const isLinked = def.edges.some((e) => e.target.nodeId === selectedNodeId &&
@@ -2076,7 +2094,10 @@ function Inspector({ debug, autoScroll, hideWorkbench, onAutoScrollChange, onHid
                                                 .map((v) => `${v.code}: ${v.message}`)
                                                 .join("; ");
                                             return (jsxRuntime.jsx(IssueBadge, { level: outErr ? "error" : "warning", size: 24, className: "ml-1 w-6 h-6", title: outTitle }));
-                                        })()] }, h))))] }), selectedNodeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedNodeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` })] }, 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 }) }))] }));
+                                        })()] }, h))))] }), selectedNodeValidation.length > 0 && (jsxRuntime.jsxs("div", { className: "mt-2 text-xs bg-red-50 border border-red-200 rounded px-2 py-1", children: [jsxRuntime.jsx("div", { className: "font-semibold mb-1", children: "Validation" }), jsxRuntime.jsx("ul", { className: "list-disc ml-4", children: selectedNodeValidation.map((m, i) => (jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [jsxRuntime.jsx(IssueBadge, { level: m.level, size: 24, className: "w-6 h-6" }), jsxRuntime.jsx("span", { children: `${m.code}: ${m.message}` }), !!m.data?.edgeId && (jsxRuntime.jsx("button", { className: "ml-2 text-[10px] px-1 py-[2px] border border-red-300 rounded text-red-700 hover:bg-red-50", onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    deleteEdgeById(m.data?.edgeId);
+                                                }, 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 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", }) {