@bian-womp/spark-workbench 0.2.55 → 0.2.57

package/lib/cjs/index.cjs

@@ -32,13 +32,6 @@ class DefaultUIExtensionRegistry {
         }
         return result;
     }
-    registerIconProvider(provider) {
-        this.iconProvider = provider;
-        return this;
-    }
-    getIconProvider() {
-        return this.iconProvider;
-    }
     // React Flow renderers
     registerConnectionLineRenderer(renderer) {
         this.connectionLineRenderer = renderer;
@@ -82,6 +75,35 @@ class DefaultUIExtensionRegistry {
     getNodeContextMenuRenderer() {
         return this.nodeContextMenuRenderer;
     }
+    // Layout function overrides
+    registerEstimateNodeSize(override) {
+        this.estimateNodeSizeOverride = override;
+        return this;
+    }
+    getEstimateNodeSize() {
+        return this.estimateNodeSizeOverride;
+    }
+    registerCreateHandleBounds(override) {
+        this.createHandleBoundsOverride = override;
+        return this;
+    }
+    getCreateHandleBounds() {
+        return this.createHandleBoundsOverride;
+    }
+    registerCreateHandleLayout(override) {
+        this.createHandleLayoutOverride = override;
+        return this;
+    }
+    getCreateHandleLayout() {
+        return this.createHandleLayoutOverride;
+    }
+    registerLayoutNode(override) {
+        this.layoutNodeOverride = override;
+        return this;
+    }
+    getLayoutNode() {
+        return this.layoutNodeOverride;
+    }
 }
 
 class AbstractWorkbench {
@@ -1414,7 +1436,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);
@@ -1441,53 +1464,105 @@ function estimateNodeSize(args) {
     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 };
+    return { width, height };
 }
-function layoutNode(args) {
-    const { node, registry, showValues, overrides } = args;
+/**
+ * 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, overrides) {
+    const { node, registry, showValues, overrides: sizeOverrides } = 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({
+    const estimateNodeSizeFn = overrides?.estimateNodeSize ?? estimateNodeSize;
+    const createHandleBoundsFn = overrides?.createHandleBounds ?? createHandleBounds;
+    const createHandleLayoutFn = overrides?.createHandleLayout ?? createHandleLayout;
+    const { width, height } = estimateNodeSizeFn({
         node,
         registry,
         showValues,
-        overrides,
+        overrides: sizeOverrides,
     });
-    const HEADER = NODE_HEADER_HEIGHT_PX;
-    const ROW = NODE_ROW_HEIGHT_PX;
     const handles = [
-        ...inputOrder.map((id, i) => ({
+        ...inputOrder.map((id, i) => createHandleBoundsFn({
             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) => createHandleBoundsFn({
             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) => createHandleLayoutFn({
             id,
             type: "target",
             position: react.Position.Left,
-            y: HEADER + i * ROW + ROW / 2,
+            rowIndex: i,
         })),
-        ...outputOrder.map((id, i) => ({
+        ...outputOrder.map((id, i) => createHandleLayoutFn({
             id,
             type: "source",
             position: react.Position.Right,
-            y: HEADER + i * ROW + ROW / 2,
+            rowIndex: i,
         })),
     ];
     return { width, height, inputOrder, outputOrder, handles, handleLayout };
@@ -1776,15 +1851,32 @@ function toReactFlow(def, positions, registry, opts) {
     // This map is still used later for certain checks; align with valid handles
     const nodeHandleMap = {};
     Object.assign(nodeHandleMap, validHandleMap);
+    // Get layout function overrides from UI registry
+    const layoutNodeOverride = opts.ui?.getLayoutNode() ?? layoutNode;
+    const createHandleBoundsFn = opts.ui?.getCreateHandleBounds() ?? createHandleBounds;
+    const createHandleLayoutFn = opts.ui?.getCreateHandleLayout() ?? createHandleLayout;
+    const estimateNodeSizeFn = opts.ui?.getEstimateNodeSize() ?? estimateNodeSize;
     const nodes = def.nodes.map((n) => {
         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,
-        });
+        // If layoutNode is overridden, use it directly; otherwise use default with internal overrides
+        const geom = layoutNodeOverride
+            ? layoutNodeOverride({
+                node: n,
+                registry,
+                showValues: opts.showValues,
+                overrides: overrideSize,
+            })
+            : layoutNode({
+                node: n,
+                registry,
+                showValues: opts.showValues,
+                overrides: overrideSize,
+            }, {
+                estimateNodeSize: estimateNodeSizeFn,
+                createHandleBounds: createHandleBoundsFn,
+                createHandleLayout: createHandleLayoutFn,
+            });
         const inputHandles = geom.inputOrder.map((id) => ({
             id,
             typeId: sparkGraph.getInputTypeId(inputSource, id),
@@ -1802,20 +1894,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,
+            ...createHandleLayoutFn({
+                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,
+            ...createHandleLayoutFn({
+                id,
+                type: "source",
+                position: react.Position.Right,
+                rowIndex: baseRightCount + i,
+            }),
             missing: true,
         }));
         const handleLayout = [
@@ -1824,23 +1918,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) => createHandleBoundsFn({
             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) => createHandleBoundsFn({
             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 +1941,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 +2077,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 +3149,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 +3180,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 +3228,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 +3607,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([]);
@@ -3644,6 +3733,7 @@ const WorkbenchCanvas = React.forwardRef(({ showValues, toString, toElement, get
             selectedNodeIds: new Set(sel.nodes),
             selectedEdgeIds: new Set(sel.edges),
             getDefaultNodeSize,
+            ui,
         });
         // Retain references for unchanged items
         const stableNodes = retainStabilityById(prevNodesRef.current, out.nodes, isSameNode);
@@ -3789,7 +3879,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 +4505,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;