@bian-womp/spark-workbench 0.2.55 → 0.2.56

package/lib/cjs/index.cjs

@@ -1414,7 +1414,8 @@ function summarizeDeep(value) {
 
 // Shared UI constants for node layout to keep mapping and rendering in sync
 const NODE_HEADER_HEIGHT_PX = 24;
-const NODE_ROW_HEIGHT_PX = 22;
+const NODE_ROW_HEIGHT_PX = 18;
+const HANDLE_SIZE_PX = 12;
 
 function computeEffectiveHandles(node, registry) {
     const desc = registry.nodes.get(node.typeId);
@@ -1443,6 +1444,61 @@ function estimateNodeSize(args) {
     const height = overrides?.height ?? NODE_HEADER_HEIGHT_PX + rows * NODE_ROW_HEIGHT_PX;
     return { width, height, inputsCount, outputsCount, rowCount: rows };
 }
+/**
+ * Calculate the Y position for handle layout (center of row).
+ * Used for positioning handles in React Flow.
+ */
+function getHandleLayoutY(rowIndex) {
+    return (NODE_HEADER_HEIGHT_PX +
+        rowIndex * NODE_ROW_HEIGHT_PX +
+        NODE_ROW_HEIGHT_PX / 2);
+}
+/**
+ * Calculate the Y position for handle bounds (top + centering offset).
+ * Used for hit-testing and edge routing.
+ */
+function getHandleBoundsY(rowIndex) {
+    return (NODE_HEADER_HEIGHT_PX +
+        rowIndex * NODE_ROW_HEIGHT_PX +
+        (NODE_ROW_HEIGHT_PX - HANDLE_SIZE_PX) / 2 +
+        1);
+}
+/**
+ * Calculate the X position for handle bounds based on position and node width.
+ */
+function getHandleBoundsX(position, nodeWidth) {
+    if (position === react.Position.Left) {
+        return -HANDLE_SIZE_PX / 2 + 1;
+    }
+    else {
+        return nodeWidth - HANDLE_SIZE_PX / 2 - 1;
+    }
+}
+/**
+ * Create handle bounds object for hit-testing/edge routing.
+ */
+function createHandleBounds(args) {
+    return {
+        id: args.id,
+        type: args.type,
+        position: args.position,
+        x: getHandleBoundsX(args.position, args.nodeWidth),
+        y: getHandleBoundsY(args.rowIndex),
+        width: HANDLE_SIZE_PX,
+        height: HANDLE_SIZE_PX,
+    };
+}
+/**
+ * Create handle layout object for React Flow rendering.
+ */
+function createHandleLayout(args) {
+    return {
+        id: args.id,
+        type: args.type,
+        position: args.position,
+        y: getHandleLayoutY(args.rowIndex),
+    };
+}
 function layoutNode(args) {
     const { node, registry, showValues, overrides } = args;
     const { inputs, outputs } = computeEffectiveHandles(node, registry);
@@ -1454,40 +1510,34 @@ function layoutNode(args) {
         showValues,
         overrides,
     });
-    const HEADER = NODE_HEADER_HEIGHT_PX;
-    const ROW = NODE_ROW_HEIGHT_PX;
     const handles = [
-        ...inputOrder.map((id, i) => ({
+        ...inputOrder.map((id, i) => createHandleBounds({
             id,
             type: "target",
             position: react.Position.Left,
-            x: 0,
-            y: HEADER + i * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: i,
+            nodeWidth: width,
         })),
-        ...outputOrder.map((id, i) => ({
+        ...outputOrder.map((id, i) => createHandleBounds({
             id,
             type: "source",
             position: react.Position.Right,
-            x: width - 1,
-            y: HEADER + i * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: i,
+            nodeWidth: width,
         })),
     ];
     const handleLayout = [
-        ...inputOrder.map((id, i) => ({
+        ...inputOrder.map((id, i) => createHandleLayout({
             id,
             type: "target",
             position: react.Position.Left,
-            y: HEADER + i * ROW + ROW / 2,
+            rowIndex: i,
         })),
-        ...outputOrder.map((id, i) => ({
+        ...outputOrder.map((id, i) => createHandleLayout({
             id,
             type: "source",
             position: react.Position.Right,
-            y: HEADER + i * ROW + ROW / 2,
+            rowIndex: i,
         })),
     ];
     return { width, height, inputOrder, outputOrder, handles, handleLayout };
@@ -1802,20 +1852,22 @@ function toReactFlow(def, positions, registry, opts) {
         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,
+            ...createHandleLayout({
+                id,
+                type: "target",
+                position: react.Position.Left,
+                rowIndex: baseLeftCount + i,
+            }),
             missing: true,
         }));
         const extraHandleLayoutRight = extraOutputs.map((id, i) => ({
-            id,
-            type: "source",
-            position: react.Position.Right,
-            y: HEADER + (baseRightCount + i) * ROW + ROW / 2,
+            ...createHandleLayout({
+                id,
+                type: "source",
+                position: react.Position.Right,
+                rowIndex: baseRightCount + i,
+            }),
             missing: true,
         }));
         const handleLayout = [
@@ -1824,23 +1876,19 @@ function toReactFlow(def, positions, registry, opts) {
             ...extraHandleLayoutRight,
         ];
         // Precompute handle bounds (including missing) so edges can render immediately
-        const missingBoundsLeft = extraInputs.map((id, i) => ({
+        const missingBoundsLeft = extraInputs.map((id, i) => createHandleBounds({
             id,
             type: "target",
             position: react.Position.Left,
-            x: 0,
-            y: HEADER + (baseLeftCount + i) * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: baseLeftCount + i,
+            nodeWidth: geom.width,
         }));
-        const missingBoundsRight = extraOutputs.map((id, i) => ({
+        const missingBoundsRight = extraOutputs.map((id, i) => createHandleBounds({
             id,
             type: "source",
             position: react.Position.Right,
-            x: geom.width - 1,
-            y: HEADER + (baseRightCount + i) * ROW,
-            width: 1,
-            height: ROW + 2,
+            rowIndex: baseRightCount + i,
+            nodeWidth: geom.width,
         }));
         const handles = [
             ...geom.handles,
@@ -1851,7 +1899,7 @@ function toReactFlow(def, positions, registry, opts) {
         const baseRows = Math.max(baseLeftCount, baseRightCount);
         const newRows = Math.max(baseLeftCount + extraInputs.length, baseRightCount + extraOutputs.length);
         const initialWidth = geom.width;
-        const initialHeight = geom.height + Math.max(0, newRows - baseRows) * ROW;
+        const initialHeight = geom.height + Math.max(0, newRows - baseRows) * NODE_ROW_HEIGHT_PX;
         return {
             id: n.nodeId,
             data: {
@@ -1987,7 +2035,7 @@ function getHandleClassName(args) {
     else {
         borderColor = "!border-gray-500 dark:!border-gray-400";
     }
-    return cx("!w-3 !h-3 !bg-white !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
+    return cx("!w-3 !h-3 !bg-white/50 !dark:bg-stone-900", borderColor, kind === "output" && "!rounded-none");
 }
 
 function generateTimestamp() {
@@ -3059,7 +3107,7 @@ function NodeHandleItem({ kind, id, type, position, y, isConnectable, className,
                     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", }) {
+function NodeHandles({ data, isConnectable, getClassName, renderLabel, labelClassName = "absolute text-[11px] text-gray-700 dark:text-gray-300 pointer-events-none", }) {
     const layout = data.handleLayout ?? [];
     const byId = React.useMemo(() => {
         const m = new Map();
@@ -3090,28 +3138,26 @@ function NodeHandles({ data, isConnectable, inputClassName = "!w-2 !h-2 !bg-gray
                 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;
+                const cls = getClassName?.({ kind: "input", id: h.id, type: "target" }) ?? "";
                 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));
+                return (jsxRuntime.jsx(NodeHandleItem, { kind: "input", id: h.id, type: "target", position: position, y: y, isConnectable: false, className: `${cls} wb-nodrag wb-nowheel`, 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.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));
+                const cls = getClassName?.({ kind: "output", id: h.id, type: "source" }) ?? "";
+                return (jsxRuntime.jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: isConnectable, className: cls, 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));
+                return (jsxRuntime.jsx(NodeHandleItem, { kind: "output", id: h.id, type: "source", position: position, y: y, isConnectable: false, className: `${cls} wb-nodrag wb-nowheel`, labelClassName: labelClassName, renderLabel: renderLabel }, key));
             })] }));
 }
 
@@ -3140,7 +3186,7 @@ const DefaultNode = React.memo(function DefaultNode({ id, data, selected, isConn
         status,
         validation,
     });
-    return (jsxRuntime.jsxs("div", { className: cx("rounded-lg bg-white/70 !dark:bg-stone-900", containerBorder), style: {
+    return (jsxRuntime.jsxs("div", { className: cx("rounded-lg bg-white/50 !dark:bg-stone-900", containerBorder), style: {
             position: "relative",
             minWidth: typeof data.renderWidth === "number" ? data.renderWidth : undefined,
             minHeight: typeof data.renderHeight === "number" ? data.renderHeight : undefined,
@@ -3519,6 +3565,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const { wb, registry, inputsMap, inputDefaultsMap, outputsMap, outputTypesMap, valuesTick, nodeStatus, edgeStatus, validationByNode, validationByEdge, uiVersion, runner, engineKind, } = useWorkbenchContext();
     const nodeValidation = validationByNode;
     const edgeValidation = validationByEdge.errors;
+    const [registryVersion, setRegistryVersion] = React.useState(0);
     // Keep stable references for nodes/edges to avoid unnecessary updates
     const prevNodesRef = React.useRef([]);
     const prevEdgesRef = React.useRef([]);
@@ -3789,7 +3836,13 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
     const onCloseNodeMenu = React.useCallback(() => {
         setNodeMenuOpen(false);
     }, []);
-    const nodeIds = React.useMemo(() => Array.from(registry.nodes.keys()), [registry]);
+    React.useEffect(() => {
+        const off = runner.on("registry", () => {
+            setRegistryVersion((v) => v + 1);
+        });
+        return () => off();
+    }, [runner]);
+    const nodeIds = React.useMemo(() => Array.from(registry.nodes.keys()), [registry, registryVersion]);
     const defaultContextMenuHandlers = React.useMemo(() => ({
         onAddNode: addNodeAt,
         onClose: onCloseMenu,
@@ -4409,11 +4462,16 @@ exports.WorkbenchProvider = WorkbenchProvider;
 exports.WorkbenchStudio = WorkbenchStudio;
 exports.computeEffectiveHandles = computeEffectiveHandles;
 exports.countVisibleHandles = countVisibleHandles;
+exports.createHandleBounds = createHandleBounds;
+exports.createHandleLayout = createHandleLayout;
 exports.download = download;
 exports.estimateNodeSize = estimateNodeSize;
 exports.formatDataUrlAsLabel = formatDataUrlAsLabel;
 exports.formatDeclaredTypeSignature = formatDeclaredTypeSignature;
+exports.getHandleBoundsX = getHandleBoundsX;
+exports.getHandleBoundsY = getHandleBoundsY;
 exports.getHandleClassName = getHandleClassName;
+exports.getHandleLayoutY = getHandleLayoutY;
 exports.getNodeBorderClassNames = getNodeBorderClassNames;
 exports.layoutNode = layoutNode;
 exports.preformatValueForDisplay = preformatValueForDisplay;