@bian-womp/spark-workbench 0.2.17 → 0.2.19

package/lib/cjs/index.cjs

@@ -1183,6 +1183,83 @@ function summarizeDeep(value) {
 const NODE_HEADER_HEIGHT_PX = 24;
 const NODE_ROW_HEIGHT_PX = 22;
 
+function computeEffectiveHandles(node, registry) {
+    const desc = registry.nodes.get(node.typeId);
+    const resolved = node.resolvedHandles || {};
+    const inputs = { ...desc?.inputs, ...resolved.inputs };
+    const outputs = { ...desc?.outputs, ...resolved.outputs };
+    const inputDefaults = { ...desc?.inputDefaults, ...resolved.inputDefaults };
+    return { inputs, outputs, inputDefaults };
+}
+function countVisibleHandles(handles) {
+    const inputIds = Object.keys(handles.inputs).filter((k) => !sparkGraph.isInputPrivate(handles.inputs, k));
+    const outputIds = Object.keys(handles.outputs);
+    return { inputsCount: inputIds.length, outputsCount: outputIds.length };
+}
+function estimateNodeSize(args) {
+    const { node, registry, showValues, overrides } = args;
+    const { inputs, outputs } = computeEffectiveHandles(node, registry);
+    // Count only non-private inputs for rows on left
+    const { inputsCount, outputsCount } = countVisibleHandles({
+        inputs,
+        outputs,
+    });
+    const rows = Math.max(inputsCount, outputsCount);
+    const baseWidth = showValues ? 320 : 240;
+    const width = overrides?.width ?? baseWidth;
+    const height = overrides?.height ?? NODE_HEADER_HEIGHT_PX + rows * NODE_ROW_HEIGHT_PX;
+    return { width, height, inputsCount, outputsCount, rowCount: rows };
+}
+function layoutNode(args) {
+    const { node, registry, showValues, overrides } = args;
+    const { inputs, outputs } = computeEffectiveHandles(node, registry);
+    const inputOrder = Object.keys(inputs).filter((k) => !sparkGraph.isInputPrivate(inputs, k));
+    const outputOrder = Object.keys(outputs);
+    const { width, height } = estimateNodeSize({
+        node,
+        registry,
+        showValues,
+        overrides,
+    });
+    const HEADER = NODE_HEADER_HEIGHT_PX;
+    const ROW = NODE_ROW_HEIGHT_PX;
+    const handles = [
+        ...inputOrder.map((id, i) => ({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            x: 0,
+            y: HEADER + i * ROW,
+            width: 1,
+            height: ROW + 2,
+        })),
+        ...outputOrder.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            x: width - 1,
+            y: HEADER + i * ROW,
+            width: 1,
+            height: ROW + 2,
+        })),
+    ];
+    const handleLayout = [
+        ...inputOrder.map((id, i) => ({
+            id,
+            type: "target",
+            position: react.Position.Left,
+            y: HEADER + i * ROW + ROW / 2,
+        })),
+        ...outputOrder.map((id, i) => ({
+            id,
+            type: "source",
+            position: react.Position.Right,
+            y: HEADER + i * ROW + ROW / 2,
+        })),
+    ];
+    return { width, height, inputOrder, outputOrder, handles, handleLayout };
+}
+
 function toReactFlow(def, positions, registry, opts) {
     const EDGE_STYLE_ERROR = { stroke: "#ef4444", strokeWidth: 2 };
     const EDGE_STYLE_RUNNING = { stroke: "#3b82f6" };
@@ -1197,54 +1274,31 @@ function toReactFlow(def, positions, registry, opts) {
         connectedInputs[nid].add(hid);
     }
     const nodes = def.nodes.map((n) => {
-        const desc = registry.nodes.get(n.typeId);
-        // Prefer per-node resolved handles when present
-        const resolvedInputs = n.resolvedHandles?.inputs;
-        const resolvedOutputs = n.resolvedHandles?.outputs;
-        const inputSource = resolvedInputs ?? desc?.inputs ?? {};
-        const outputSource = resolvedOutputs ?? desc?.outputs ?? {};
-        const inputHandles = Object.entries(inputSource)
-            .filter(([id]) => !sparkGraph.isInputPrivate(inputSource, id))
-            .map(([id]) => ({ id, typeId: sparkGraph.getInputTypeId(inputSource, id) }));
-        const outputHandles = Object.entries(outputSource).map(([id, typeId]) => ({
+        const { inputs: inputSource, outputs: outputSource } = computeEffectiveHandles(n, registry);
+        const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
+        const geom = layoutNode({
+            node: n,
+            registry,
+            showValues: opts.showValues,
+            overrides: overrideSize,
+        });
+        const inputHandles = geom.inputOrder.map((id) => ({
+            id,
+            typeId: sparkGraph.getInputTypeId(inputSource, id),
+        }));
+        const outputHandles = geom.outputOrder.map((id) => ({
             id,
-            typeId: formatDeclaredTypeSignature(typeId),
+            typeId: formatDeclaredTypeSignature(outputSource[id]),
         }));
         nodeHandleMap[n.nodeId] = {
             inputs: new Set(inputHandles.map((h) => h.id)),
             outputs: new Set(outputHandles.map((h) => h.id)),
         };
-        // Match DefaultNode sizing heuristics to avoid hidden nodes during re-measure
-        const HEADER_SIZE = NODE_HEADER_HEIGHT_PX;
-        const ROW_SIZE = NODE_ROW_HEIGHT_PX;
-        const maxRows = Math.max(inputHandles.length, outputHandles.length);
-        // Allow external override to dictate initial size
-        const overrideSize = opts.getDefaultNodeSize?.(n.typeId);
-        const initialWidth = overrideSize?.width ?? (opts.showValues ? 320 : 240);
-        const initialHeight = overrideSize?.height ?? HEADER_SIZE + maxRows * ROW_SIZE;
+        // Shared sizing
+        const initialWidth = geom.width;
+        const initialHeight = geom.height;
         // Precompute handle bounds so edges can render immediately without waiting for measurement
-        const handles = [
-            // Inputs on the left as targets
-            ...inputHandles.map((h, i) => ({
-                id: h.id,
-                type: "target",
-                position: react.Position.Left,
-                x: 0,
-                y: HEADER_SIZE + i * ROW_SIZE,
-                width: 1,
-                height: ROW_SIZE + 2,
-            })),
-            // Outputs on the right as sources
-            ...outputHandles.map((h, i) => ({
-                id: h.id,
-                type: "source",
-                position: react.Position.Right,
-                x: initialWidth - 1,
-                y: HEADER_SIZE + i * ROW_SIZE,
-                width: 1,
-                height: ROW_SIZE + 2,
-            })),
-        ];
+        const handles = geom.handles;
         return {
             id: n.nodeId,
             data: {
@@ -1256,20 +1310,7 @@ function toReactFlow(def, positions, registry, opts) {
                     h.id,
                     !!connectedInputs[n.nodeId]?.has(h.id),
                 ])),
-                handleLayout: [
-                    ...inputHandles.map((h, i) => ({
-                        id: h.id,
-                        type: "target",
-                        position: react.Position.Left,
-                        y: HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2,
-                    })),
-                    ...outputHandles.map((h, i) => ({
-                        id: h.id,
-                        type: "source",
-                        position: react.Position.Right,
-                        y: HEADER_SIZE + i * ROW_SIZE + ROW_SIZE / 2,
-                    })),
-                ],
+                handleLayout: geom.handleLayout,
                 showValues: opts.showValues,
                 renderWidth: initialWidth,
                 renderHeight: initialHeight,
@@ -1468,6 +1509,7 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
     // Auto layout (simple layered layout)
     const runAutoLayout = React.useCallback(() => {
         const cur = wb.export();
+        // Build DAG layers by indegree
         const indegree = {};
         const adj = {};
         for (const n of cur.nodes) {
@@ -1494,14 +1536,36 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             layers.push(layer);
             q.splice(0, q.length, ...next);
         }
-        const X = 720;
-        const Y = 600;
+        // Size-aware placement: columns by layer, stacking nodes vertically in each column
+        // Use the same sizing heuristic as mapping via estimateNodeSize
+        const H_GAP = 160;
+        const V_GAP = 24;
         const pos = {};
-        layers.forEach((layer, layerIndex) => {
-            layer.forEach((id, itemIndex) => {
-                pos[id] = { x: layerIndex * X, y: itemIndex * Y };
-            });
-        });
+        let curX = 0;
+        for (const layer of layers) {
+            // Compute max width in this layer and individual heights
+            let maxWidth = 0;
+            const heights = {};
+            for (const id of layer) {
+                const node = cur.nodes.find((n) => n.nodeId === id);
+                if (!node)
+                    continue;
+                // Prefer showValues sizing similar to node rendering
+                // Lazy import to avoid circular deps at module top
+                const size = estimateNodeSize({ node, registry, showValues: true });
+                heights[id] = size.height;
+                if (size.width > maxWidth)
+                    maxWidth = size.width;
+            }
+            // Place nodes in this column
+            let curY = 0;
+            for (const id of layer) {
+                const h = heights[id] ?? 0;
+                pos[id] = { x: curX, y: curY };
+                curY += h + V_GAP;
+            }
+            curX += maxWidth + H_GAP;
+        }
         wb.setPositions(pos);
     }, [wb]);
     const updateEdgeType = React.useCallback((edgeId, typeId) => wb.updateEdgeType(edgeId, typeId), [wb]);
@@ -1597,15 +1661,6 @@ function WorkbenchProvider({ wb, runner, registry, setRegistry, children, }) {
             return add("runner", "error")(e);
         });
         const off3 = runner.on("invalidate", (e) => {
-            if (e?.reason === "graph-updated") {
-                setNodeStatus((s) => {
-                    const next = {};
-                    for (const n of wb.export().nodes) {
-                        next[n.nodeId] = { ...s[n.nodeId], invalidated: true };
-                    }
-                    return next;
-                });
-            }
             // After build/update, pull resolved handles and merge in-place (no graphChanged)
             if (e?.reason === "graph-updated" || e?.reason === "graph-built") {
                 refreshResolvedHandles();
@@ -1774,17 +1829,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);
                 }
             }
         }
@@ -1796,11 +1851,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;
@@ -1813,13 +1865,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 };
@@ -2019,11 +2069,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 &&
@@ -2081,7 +2149,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", }) {