@d34dman/flowdrop 0.0.53 → 0.0.55

package/dist/components/App.svelte

@@ -36,6 +36,8 @@
 	import { apiToasts, dismissToast } from '../services/toastService.js';
 	import { initAutoSave } from '../services/autoSaveService.js';
 	import { uiSettings } from '../stores/settingsStore.js';
+	import { initializePortCompatibility } from '../utils/connections.js';
+	import { DEFAULT_PORT_CONFIG } from '../config/defaultPortConfig.js';
 
 	/**
 	 * Configuration props for runtime customization
@@ -177,9 +179,6 @@
 	// WorkflowEditor reference for save functionality
 	let workflowEditorRef: WorkflowEditor | null = null;
 
-	// Removed currentWorkflowState - no longer needed
-	// The global store ($workflowStore) serves as the single source of truth
-
 	/**
 	 * Fetch node types from the server
 	 *
@@ -383,9 +382,6 @@
 		}
 	}
 
-	// Removed handleWorkflowChange function - no longer needed
-	// The global store serves as the single source of truth and is already reactive
-
 	/**
 	 * Save workflow - exposed API function
 	 *
@@ -591,6 +587,11 @@
 	onMount(() => {
 		(async () => {
 			await initializeApiEndpoints();
+
+			// Ensure port compatibility checker is initialized (needed for proximity connect, etc.)
+			// mountFlowDropApp initializes this before mounting, but SvelteKit routes need it here.
+			initializePortCompatibility(DEFAULT_PORT_CONFIG);
+
 			await fetchNodeTypes();
 
 			// Initialize the workflow store if we have an initial workflow

package/dist/components/NodeSidebar.svelte

@@ -494,8 +494,6 @@
 		align-items: center;
 	}
 
-	/* Close button styles removed - no longer needed */
-
 	.flowdrop-sidebar__title h2 {
 		font-size: 1rem;
 		font-weight: 600;

package/dist/components/PortCoordinateTracker.svelte

@@ -0,0 +1,58 @@
+<!--
+  Port Coordinate Tracker Component
+  Bridge component that exposes SvelteFlow's getInternalNode to the parent.
+  Must be rendered inside SvelteFlowProvider context.
+
+  Uses the same pattern as EdgeRefresher - a renderless component that hooks
+  into the SvelteFlow context.
+-->
+
+<script lang="ts">
+	import { useSvelteFlow, type InternalNode } from '@xyflow/svelte';
+	import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
+	import {
+		rebuildAllPortCoordinates,
+		updateNodePortCoordinates
+	} from '../stores/portCoordinateStore.js';
+
+	interface Props {
+		/** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
+		nodeToUpdate: WorkflowNodeType | null;
+		/** Set to trigger a full rebuild of all port coordinates */
+		rebuildTrigger: number;
+		/** All workflow nodes - used for full rebuild */
+		nodes: WorkflowNodeType[];
+	}
+
+	let { nodeToUpdate, rebuildTrigger, nodes }: Props = $props();
+
+	const { getInternalNode } = useSvelteFlow();
+
+	// Cast the getInternalNode function for our use
+	const getInternal = getInternalNode as (id: string) => InternalNode | undefined;
+
+	/**
+	 * Rebuild all port coordinates when rebuildTrigger changes.
+	 * Debounced to batch rapid position updates (e.g., animated auto-layout,
+	 * magnetic child nodes following a parent drag).
+	 */
+	$effect(() => {
+		const _trigger = rebuildTrigger;
+		if (_trigger > 0) {
+			const timeout = setTimeout(() => {
+				rebuildAllPortCoordinates(nodes, getInternal);
+			}, 150);
+			return () => clearTimeout(timeout);
+		}
+	});
+
+	/**
+	 * Update a single node's coordinates when nodeToUpdate changes.
+	 * This is used during drag for efficient per-node updates.
+	 */
+	$effect(() => {
+		if (nodeToUpdate) {
+			updateNodePortCoordinates(nodeToUpdate, getInternal);
+		}
+	});
+</script>

package/dist/components/PortCoordinateTracker.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { WorkflowNode as WorkflowNodeType } from '../types/index.js';
+interface Props {
+    /** Node to update coordinates for (e.g., during drag). Set to null when not dragging. */
+    nodeToUpdate: WorkflowNodeType | null;
+    /** Set to trigger a full rebuild of all port coordinates */
+    rebuildTrigger: number;
+    /** All workflow nodes - used for full rebuild */
+    nodes: WorkflowNodeType[];
+}
+declare const PortCoordinateTracker: import("svelte").Component<Props, {}, "">;
+type PortCoordinateTracker = ReturnType<typeof PortCoordinateTracker>;
+export default PortCoordinateTracker;

package/dist/components/WorkflowEditor.svelte

@@ -46,10 +46,11 @@
 		ProximityConnectHelper,
 		type ProximityEdgeCandidate
 	} from '../helpers/proximityConnect.js';
+	import PortCoordinateTracker from './PortCoordinateTracker.svelte';
+	import { getPortCoordinateSnapshot } from '../stores/portCoordinateStore.js';
 
 	interface Props {
 		nodes?: NodeMetadata[];
-		// workflow?: Workflow; // Removed - use global store directly
 		endpointConfig?: EndpointConfig;
 		height?: string | number;
 		width?: string | number;
@@ -76,6 +77,10 @@
 	// Proximity connect state
 	let currentProximityCandidates = $state<ProximityEdgeCandidate[]>([]);
 
+	// Port coordinate tracker state
+	let portCoordNodeToUpdate = $state<WorkflowNodeType | null>(null);
+	let portCoordRebuildTrigger = $state(0);
+
 	// Track the workflow ID we're currently editing to detect workflow switches
 	let currentWorkflowId: string | null = null;
 
@@ -178,6 +183,14 @@
 			);
 			flowEdges = styledEdges;
 
+			// Trigger port coordinate rebuild after workflow load
+			// (PortCoordinateTracker will wait for SvelteFlow to render before reading handleBounds)
+			// Note: Using Date.now() instead of ++ to avoid reading the old value,
+			// which would make this effect depend on portCoordRebuildTrigger and loop.
+			if ($editorSettings.proximityConnect) {
+				portCoordRebuildTrigger = Date.now();
+			}
+
 			// Only load execution info if we have a pipelineId (pipeline status mode)
 			// and if the workflow or pipeline has changed
 			const workflowChanged = currentWorkflow.id !== previousWorkflowId;
@@ -347,7 +360,8 @@
 
 	/**
 	 * Handle node drag - compute proximity connect preview edges
-	 * Called continuously during drag if proximity connect is enabled
+	 * Called continuously during drag if proximity connect is enabled.
+	 * Uses port-to-port distance via the port coordinate store.
 	 */
 	function handleNodeDrag({
 		targetNode
@@ -361,19 +375,31 @@
 				flowEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
 				currentProximityCandidates = [];
 			}
+			portCoordNodeToUpdate = null;
 			return;
 		}
 
+		// Update the dragged node's port coordinates (position changed during drag)
+		portCoordNodeToUpdate = targetNode;
+
 		// Remove previous preview edges
 		const baseEdges = ProximityConnectHelper.removePreviewEdges(flowEdges);
 
-		// Find the best compatible edge with nearby nodes
-		const candidates = ProximityConnectHelper.findCompatibleEdges(
-			targetNode,
-			flowNodes,
-			baseEdges,
-			$editorSettings.proximityConnectDistance
-		);
+		// Find the best compatible edge using port-to-port distance
+		const portCoordinates = getPortCoordinateSnapshot();
+		const candidates = portCoordinates.size > 0
+			? ProximityConnectHelper.findCompatibleEdgesByPortCoordinates(
+					targetNode.id,
+					portCoordinates,
+					baseEdges,
+					$editorSettings.proximityConnectDistance
+				)
+			: ProximityConnectHelper.findCompatibleEdges(
+					targetNode,
+					flowNodes,
+					baseEdges,
+					$editorSettings.proximityConnectDistance
+				);
 
 		// Create preview edges
 		const previews = ProximityConnectHelper.createPreviewEdges(candidates);
@@ -391,6 +417,7 @@
 	 */
 	function handleNodeDragStop(): void {
 		isDraggingNode = false;
+		portCoordNodeToUpdate = null;
 
 		// Finalize proximity connect if there are candidates
 		if ($editorSettings.proximityConnect && currentProximityCandidates.length > 0) {
@@ -699,6 +726,13 @@
 	<!-- EdgeRefresher component - handles updateNodeInternals calls -->
 	<EdgeRefresher {nodeIdToRefresh} onRefreshComplete={handleEdgeRefreshComplete} />
 
+	<!-- Port Coordinate Tracker - maintains port positions for proximity connect -->
+	<PortCoordinateTracker
+		nodeToUpdate={portCoordNodeToUpdate}
+		rebuildTrigger={portCoordRebuildTrigger}
+		nodes={flowNodes}
+	/>
+
 	<div class="flowdrop-workflow-editor">
 		<!-- Main Editor Area -->
 		<div class="flowdrop-workflow-editor__main">

package/dist/components/nodes/SimpleNode.svelte

@@ -42,8 +42,6 @@
 		return instanceOverride ?? typeDefault;
 	});
 
-	// Removed local config state - now using global ConfigSidebar
-
 	// Prioritize metadata icon over config icon for simple nodes (metadata is the node definition)
 	let nodeIcon = $derived(
 		(props.data.metadata?.icon as string) || (props.data.config?.icon as string) || 'mdi:square'
@@ -265,8 +263,6 @@
 	/>
 {/each}
 
-<!-- ConfigSidebar removed - now using global ConfigSidebar in WorkflowEditor -->
-
 <style>
 	.flowdrop-simple-node {
 		position: relative;
@@ -379,8 +375,6 @@
 		color: var(--fd-node-icon);
 	}
 
-	/* Label styling removed - now using header title */
-
 	.flowdrop-simple-node__processing {
 		position: absolute;
 		top: 4px;

package/dist/components/nodes/SquareNode.svelte

@@ -43,8 +43,6 @@
 		return instanceOverride ?? typeDefault;
 	});
 
-	// Removed local config state - now using global ConfigSidebar
-
 	/**
 	 * Get icon using the same resolution as WorkflowNode
 	 * Uses getNodeIcon utility with category fallback
@@ -333,8 +331,6 @@
 		color: var(--fd-node-icon);
 	}
 
-	/* Label styling removed - now using header title */
-
 	.flowdrop-square-node__processing {
 		position: absolute;
 		top: 4px;

package/dist/components/nodes/WorkflowNode.svelte

@@ -124,11 +124,6 @@
 		allOutputPorts.filter((port) => isPortVisible(port, 'output'))
 	);
 
-	/**
-	 * Handle configuration value changes - now handled by global ConfigSidebar
-	 */
-	// Removed local config handling - now using global ConfigSidebar
-
 	/**
 	 * Handle node click - only handle selection, no config opening
 	 */
@@ -201,7 +196,6 @@
 
 			<!-- Status Indicators -->
 			<div class="flowdrop-flex flowdrop-gap--2 flowdrop-items--center">
-				<!-- Status indicators removed - using outer NodeStatusOverlay instead -->
 			</div>
 		</div>
 		<!-- Node Description - line-height 20px so header grows in steps of 10 -->
@@ -326,8 +320,6 @@
 	</button>
 </div>
 
-<!-- ConfigSidebar removed - now using global ConfigSidebar in WorkflowEditor -->
-
 <style>
 	.flowdrop-workflow-node {
 		position: relative;
@@ -436,8 +428,6 @@
 		line-height: 1;
 	}
 
-	/* Status indicator styles removed - using outer NodeStatusOverlay instead */
-
 	@keyframes pulse {
 		0%,
 		100% {

package/dist/editor/index.d.ts

@@ -64,6 +64,7 @@ export { mountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from '../sv
 export { nodeComponentRegistry, createNamespacedType, parseNamespacedType, BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount } from '../registry/index.js';
 export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from '../helpers/workflowEditorHelper.js';
 export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, connectedHandles, isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange, setHistoryEnabled, isHistoryEnabled, setRestoringFromHistory } from '../stores/workflowStore.js';
+export { portCoordinateStore, rebuildAllPortCoordinates, updateNodePortCoordinates, removeNodePortCoordinates, getPortCoordinate, getNodePortCoordinates, getPortCoordinateSnapshot } from '../stores/portCoordinateStore.js';
 export { historyStateStore, canUndo, canRedo, historyActions, setOnRestoreCallback, historyService, HistoryService } from '../stores/historyStore.js';
 export type { HistoryEntry, HistoryState, PushOptions } from '../stores/historyStore.js';
 export * from '../services/api.js';

package/dist/editor/index.js

@@ -101,6 +101,8 @@ export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes
 isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange, 
 // History control
 setHistoryEnabled, isHistoryEnabled, setRestoringFromHistory } from '../stores/workflowStore.js';
+// Port Coordinate Store
+export { portCoordinateStore, rebuildAllPortCoordinates, updateNodePortCoordinates, removeNodePortCoordinates, getPortCoordinate, getNodePortCoordinates, getPortCoordinateSnapshot } from '../stores/portCoordinateStore.js';
 // History Store and Service
 export { historyStateStore, canUndo, canRedo, historyActions, setOnRestoreCallback, historyService, HistoryService } from '../stores/historyStore.js';
 // ============================================================================

package/dist/helpers/proximityConnect.d.ts

@@ -5,7 +5,7 @@
  * When a node is dragged near another node, this helper finds the best
  * compatible port pair and creates a preview/permanent edge.
  */
-import type { WorkflowNode as WorkflowNodeType, WorkflowEdge, NodePort } from '../types/index.js';
+import type { WorkflowNode as WorkflowNodeType, WorkflowEdge, NodePort, PortCoordinateMap } from '../types/index.js';
 /** A candidate proximity edge before it is finalized */
 export interface ProximityEdgeCandidate {
     id: string;
@@ -26,7 +26,7 @@ export declare class ProximityConnectHelper {
      */
     static buildHandleId(nodeId: string, direction: 'input' | 'output', portId: string): string;
     /**
-     * Calculate center-to-center Euclidean distance between two nodes.
+     * Calculate center-to-center distance between two nodes.
      */
     static getNodeDistance(nodeA: {
         position: {
@@ -51,14 +51,30 @@ export declare class ProximityConnectHelper {
      * Find the single best compatible edge between a dragged node and nearby nodes.
      *
      * Algorithm:
-     * 1. Find the closest node within minDistance
+     * 1. Find the closest node within minDistance (edge-to-edge)
      * 2. Check both directions (dragged->nearby and nearby->dragged)
      * 3. Return the first exact-type match, or first compatible match
-     * 4. Skip pairs where an edge already exists or input handle is already connected
+     * 4. Skip pairs where an edge already exists
      *
      * @returns Array with at most ONE ProximityEdgeCandidate
      */
     static findCompatibleEdges(draggedNode: WorkflowNodeType, allNodes: WorkflowNodeType[], existingEdges: WorkflowEdge[], minDistance: number): ProximityEdgeCandidate[];
+    /**
+     * Find the single best compatible edge using port-to-port distance.
+     *
+     * Unlike findCompatibleEdges() which uses node center distance,
+     * this method compares actual handle positions from the port coordinate store.
+     * This is more accurate for large nodes or nodes with many ports.
+     *
+     * Algorithm:
+     * 1. Partition ports by owner (dragged vs other) and direction (input vs output)
+     * 2. Group other-node ports by dataType for O(1) lookup of compatible groups
+     * 3. For each dragged port, only iterate compatible dataType groups
+     * 4. Return the closest compatible pair (exact type match preferred)
+     *
+     * @returns Array with at most ONE ProximityEdgeCandidate
+     */
+    static findCompatibleEdgesByPortCoordinates(draggedNodeId: string, portCoordinates: PortCoordinateMap, existingEdges: WorkflowEdge[], maxDistance: number): ProximityEdgeCandidate[];
     /**
      * Convert candidates to temporary (preview) WorkflowEdge objects with dashed styling.
      */

package/dist/helpers/proximityConnect.js

@@ -48,31 +48,32 @@ export class ProximityConnectHelper {
         return `${nodeId}-${direction}-${portId}`;
     }
     /**
-     * Calculate center-to-center Euclidean distance between two nodes.
+     * Calculate center-to-center distance between two nodes.
      */
     static getNodeDistance(nodeA, nodeB) {
-        const ax = nodeA.position.x + (nodeA.measured?.width ?? 0) / 2;
-        const ay = nodeA.position.y + (nodeA.measured?.height ?? 0) / 2;
-        const bx = nodeB.position.x + (nodeB.measured?.width ?? 0) / 2;
-        const by = nodeB.position.y + (nodeB.measured?.height ?? 0) / 2;
-        return Math.sqrt((ax - bx) ** 2 + (ay - by) ** 2);
+        const aCenterX = nodeA.position.x + (nodeA.measured?.width ?? 0) / 2;
+        const aCenterY = nodeA.position.y + (nodeA.measured?.height ?? 0) / 2;
+        const bCenterX = nodeB.position.x + (nodeB.measured?.width ?? 0) / 2;
+        const bCenterY = nodeB.position.y + (nodeB.measured?.height ?? 0) / 2;
+        const dx = aCenterX - bCenterX;
+        const dy = aCenterY - bCenterY;
+        return Math.sqrt(dx * dx + dy * dy);
     }
     /**
      * Find the single best compatible edge between a dragged node and nearby nodes.
      *
      * Algorithm:
-     * 1. Find the closest node within minDistance
+     * 1. Find the closest node within minDistance (edge-to-edge)
      * 2. Check both directions (dragged->nearby and nearby->dragged)
      * 3. Return the first exact-type match, or first compatible match
-     * 4. Skip pairs where an edge already exists or input handle is already connected
+     * 4. Skip pairs where an edge already exists
      *
      * @returns Array with at most ONE ProximityEdgeCandidate
      */
     static findCompatibleEdges(draggedNode, allNodes, existingEdges, minDistance) {
         const checker = getPortCompatibilityChecker();
-        // Build lookup sets for O(1) duplicate/connected checks
+        // Build lookup set for O(1) duplicate checks
         const existingEdgeSet = new Set(existingEdges.map((e) => `${e.source}:${e.sourceHandle}->${e.target}:${e.targetHandle}`));
-        const connectedTargetHandles = new Set(existingEdges.map((e) => `${e.target}:${e.targetHandle}`));
         // Find the closest node within distance
         let closestNode = null;
         let closestDistance = Infinity;
@@ -102,11 +103,8 @@ export class ProximityConnectHelper {
                 const sourceHandle = this.buildHandleId(draggedNode.id, 'output', outPort.id);
                 const targetHandle = this.buildHandleId(closestNode.id, 'input', inPort.id);
                 const edgeKey = `${draggedNode.id}:${sourceHandle}->${closestNode.id}:${targetHandle}`;
-                const targetHandleKey = `${closestNode.id}:${targetHandle}`;
                 if (existingEdgeSet.has(edgeKey))
                     continue;
-                if (connectedTargetHandles.has(targetHandleKey))
-                    continue;
                 const candidate = {
                     id: `proximity-${uuidv4()}`,
                     source: draggedNode.id,
@@ -140,11 +138,8 @@ export class ProximityConnectHelper {
                     const sourceHandle = this.buildHandleId(closestNode.id, 'output', outPort.id);
                     const targetHandle = this.buildHandleId(draggedNode.id, 'input', inPort.id);
                     const edgeKey = `${closestNode.id}:${sourceHandle}->${draggedNode.id}:${targetHandle}`;
-                    const targetHandleKey = `${draggedNode.id}:${targetHandle}`;
                     if (existingEdgeSet.has(edgeKey))
                         continue;
-                    if (connectedTargetHandles.has(targetHandleKey))
-                        continue;
                     const candidate = {
                         id: `proximity-${uuidv4()}`,
                         source: closestNode.id,
@@ -172,6 +167,101 @@ export class ProximityConnectHelper {
         const best = exactMatch ?? compatibleMatch;
         return best ? [best] : [];
     }
+    /**
+     * Find the single best compatible edge using port-to-port distance.
+     *
+     * Unlike findCompatibleEdges() which uses node center distance,
+     * this method compares actual handle positions from the port coordinate store.
+     * This is more accurate for large nodes or nodes with many ports.
+     *
+     * Algorithm:
+     * 1. Partition ports by owner (dragged vs other) and direction (input vs output)
+     * 2. Group other-node ports by dataType for O(1) lookup of compatible groups
+     * 3. For each dragged port, only iterate compatible dataType groups
+     * 4. Return the closest compatible pair (exact type match preferred)
+     *
+     * @returns Array with at most ONE ProximityEdgeCandidate
+     */
+    static findCompatibleEdgesByPortCoordinates(draggedNodeId, portCoordinates, existingEdges, maxDistance) {
+        const checker = getPortCompatibilityChecker();
+        // Build lookup set for O(1) duplicate checks
+        const existingEdgeSet = new Set(existingEdges.map((e) => `${e.source}:${e.sourceHandle}->${e.target}:${e.targetHandle}`));
+        // Partition ports by owner and direction, group other-node ports by dataType
+        const draggedOutputs = [];
+        const draggedInputs = [];
+        const otherInputsByType = new Map();
+        const otherOutputsByType = new Map();
+        for (const coord of portCoordinates.values()) {
+            if (coord.nodeId === draggedNodeId) {
+                if (coord.direction === 'output')
+                    draggedOutputs.push(coord);
+                else
+                    draggedInputs.push(coord);
+            }
+            else {
+                const groupMap = coord.direction === 'input' ? otherInputsByType : otherOutputsByType;
+                let group = groupMap.get(coord.dataType);
+                if (!group) {
+                    group = [];
+                    groupMap.set(coord.dataType, group);
+                }
+                group.push(coord);
+            }
+        }
+        let bestCandidate = null;
+        let bestDistance = Infinity;
+        let bestIsExact = false;
+        const evaluatePair = (sourceCoord, targetCoord) => {
+            // Check for existing edge
+            const edgeKey = `${sourceCoord.nodeId}:${sourceCoord.handleId}->${targetCoord.nodeId}:${targetCoord.handleId}`;
+            if (existingEdgeSet.has(edgeKey))
+                return;
+            // Calculate port-to-port distance
+            const dx = sourceCoord.x - targetCoord.x;
+            const dy = sourceCoord.y - targetCoord.y;
+            const dist = Math.sqrt(dx * dx + dy * dy);
+            if (dist > maxDistance)
+                return;
+            const isExact = sourceCoord.dataType === targetCoord.dataType;
+            // Prefer exact match, then closest distance
+            if ((isExact && !bestIsExact) || (isExact === bestIsExact && dist < bestDistance)) {
+                bestCandidate = {
+                    id: `proximity-${uuidv4()}`,
+                    source: sourceCoord.nodeId,
+                    target: targetCoord.nodeId,
+                    sourceHandle: sourceCoord.handleId,
+                    targetHandle: targetCoord.handleId,
+                    sourcePortDataType: sourceCoord.dataType,
+                    targetPortDataType: targetCoord.dataType
+                };
+                bestDistance = dist;
+                bestIsExact = isExact;
+            }
+        };
+        // Direction A: dragged outputs → other inputs (only compatible types)
+        for (const srcPort of draggedOutputs) {
+            const compatibleTypes = checker.getCompatibleTypes(srcPort.dataType);
+            for (const targetType of compatibleTypes) {
+                const targets = otherInputsByType.get(targetType);
+                if (!targets)
+                    continue;
+                for (const tgtPort of targets) {
+                    evaluatePair(srcPort, tgtPort);
+                }
+            }
+        }
+        // Direction B: other outputs → dragged inputs (only compatible types)
+        for (const tgtPort of draggedInputs) {
+            for (const [srcType, sources] of otherOutputsByType) {
+                if (!checker.areDataTypesCompatible(srcType, tgtPort.dataType))
+                    continue;
+                for (const srcPort of sources) {
+                    evaluatePair(srcPort, tgtPort);
+                }
+            }
+        }
+        return bestCandidate ? [bestCandidate] : [];
+    }
     /**
      * Convert candidates to temporary (preview) WorkflowEdge objects with dashed styling.
      */

package/dist/playground/index.d.ts

@@ -125,6 +125,6 @@ export type { PlaygroundSession, PlaygroundMessage, PlaygroundInputField, Playgr
 export { isChatInputNode, CHAT_INPUT_PATTERNS } from '../types/playground.js';
 export type { InterruptType, InterruptStatus, Interrupt, InterruptChoice, InterruptConfig, ConfirmationConfig, ChoiceConfig, TextConfig, FormConfig, InterruptResolution, InterruptApiResponse, InterruptListResponse, InterruptResponse, InterruptMessageMetadata, InterruptPollingConfig } from '../types/interrupt.js';
 export { isInterruptMetadata, extractInterruptMetadata, metadataToInterrupt, defaultInterruptPollingConfig } from '../types/interrupt.js';
-export { interrupts, submittingInterrupts, interruptErrors, pendingInterruptIds, pendingInterrupts, pendingInterruptCount, resolvedInterrupts, isAnySubmitting, interruptActions, getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getInterruptByMessageId } from '../stores/interruptStore.js';
+export { interrupts, pendingInterruptIds, pendingInterrupts, pendingInterruptCount, resolvedInterrupts, isAnySubmitting, interruptActions, getInterrupt, isInterruptPending, isInterruptSubmitting, getInterruptError, getInterruptByMessageId } from '../stores/interruptStore.js';
 export { mountPlayground, unmountPlayground, type PlaygroundMountOptions, type MountedPlayground } from './mount.js';
 export { createEndpointConfig, defaultEndpointConfig, buildEndpointUrl, type EndpointConfig } from '../config/endpoints.js';

package/dist/playground/index.js

@@ -151,7 +151,7 @@ export { isInterruptMetadata, extractInterruptMetadata, metadataToInterrupt, def
 // ============================================================================
 export { 
 // Core stores
-interrupts, submittingInterrupts, interruptErrors, 
+interrupts, 
 // Derived stores
 pendingInterruptIds, pendingInterrupts, pendingInterruptCount, resolvedInterrupts, isAnySubmitting, 
 // Actions

package/dist/services/portConfigApi.js

@@ -46,16 +46,5 @@ export function validatePortConfig(config) {
             return false;
         }
     }
-    // Check that compatibility rules reference valid data types
-    if (config.compatibilityRules) {
-        // TODO: Fix type definition for PortCompatibilityRule - sourceType and targetType properties missing
-        // const dataTypeIds = new Set(config.dataTypes.map((dt) => dt.id));
-        // for (const rule of config.compatibilityRules) {
-        //   if (!dataTypeIds.has(rule.sourceType) || !dataTypeIds.has(rule.targetType)) {
-        //     console.warn("⚠️ Compatibility rule references unknown data type:", rule);
-        //     return false;
-        //   }
-        // }
-    }
     return true;
 }

package/dist/stores/interruptStore.d.ts

@@ -6,7 +6,7 @@
  *
  * @module stores/interruptStore
  */
-import type { Interrupt, InterruptStatus } from '../types/interrupt.js';
+import type { Interrupt } from '../types/interrupt.js';
 import { type InterruptState, type TransitionResult } from '../types/interruptState.js';
 /**
  * Extended interrupt with state machine
@@ -40,16 +40,6 @@ export declare const resolvedInterrupts: import("svelte/store").Readable<Interru
  * Derived store to check if any interrupt is currently submitting
  */
 export declare const isAnySubmitting: import("svelte/store").Readable<boolean>;
-/**
- * Legacy derived store for submitting interrupt IDs
- * @deprecated Use interrupt.machineState.status === "submitting" instead
- */
-export declare const submittingInterrupts: import("svelte/store").Readable<Set<string>>;
-/**
- * Legacy derived store for interrupt errors
- * @deprecated Use interrupt.machineState.error instead
- */
-export declare const interruptErrors: import("svelte/store").Readable<Map<string, string>>;
 /**
  * Interrupt store actions for modifying state
  */
@@ -111,30 +101,18 @@ export declare const interruptActions: {
      */
     resetInterrupt: (interruptId: string) => TransitionResult;
     /**
-     * Update an interrupt's status (legacy)
-     * @deprecated Use startSubmit/submitSuccess/submitFailure instead
-     */
-    updateStatus: (interruptId: string, status: InterruptStatus, responseValue?: unknown) => void;
-    /**
-     * Mark an interrupt as resolved with the user's response (legacy)
-     * @deprecated Use startSubmit + submitSuccess instead
+     * Mark an interrupt as resolved with the user's response
+     *
+     * @param interruptId - The interrupt ID
+     * @param value - The resolved value
      */
     resolveInterrupt: (interruptId: string, value: unknown) => void;
     /**
-     * Mark an interrupt as cancelled (legacy)
-     * @deprecated Use startCancel + submitSuccess instead
+     * Mark an interrupt as cancelled
+     *
+     * @param interruptId - The interrupt ID
      */
     cancelInterrupt: (interruptId: string) => void;
-    /**
-     * Set submitting state for an interrupt (legacy)
-     * @deprecated State is automatically managed by startSubmit/submitSuccess
-     */
-    setSubmitting: (interruptId: string, isSubmitting: boolean) => void;
-    /**
-     * Set error for an interrupt (legacy)
-     * @deprecated Use submitFailure() instead
-     */
-    setError: (interruptId: string, error: string | null) => void;
     /**
      * Remove an interrupt from the store
      *

package/dist/stores/interruptStore.js

@@ -70,33 +70,6 @@ export const isAnySubmitting = derived(interrupts, ($interrupts) => {
     }
     return false;
 });
-/**
- * Legacy derived store for submitting interrupt IDs
- * @deprecated Use interrupt.machineState.status === "submitting" instead
- */
-export const submittingInterrupts = derived(interrupts, ($interrupts) => {
-    const submitting = new Set();
-    $interrupts.forEach((interrupt, id) => {
-        if (checkIsSubmitting(interrupt.machineState)) {
-            submitting.add(id);
-        }
-    });
-    return submitting;
-});
-/**
- * Legacy derived store for interrupt errors
- * @deprecated Use interrupt.machineState.error instead
- */
-export const interruptErrors = derived(interrupts, ($interrupts) => {
-    const errors = new Map();
-    $interrupts.forEach((interrupt, id) => {
-        const errorMsg = getErrorMessage(interrupt.machineState);
-        if (errorMsg) {
-            errors.set(id, errorMsg);
-        }
-    });
-    return errors;
-});
 // =========================================================================
 // State Machine Actions
 // =========================================================================
@@ -249,43 +222,22 @@ export const interruptActions = {
     resetInterrupt: (interruptId) => {
         return applyAction(interruptId, { type: 'RESET' });
     },
-    // =========================================================================
-    // Legacy Actions (for backward compatibility)
-    // =========================================================================
-    /**
-     * Update an interrupt's status (legacy)
-     * @deprecated Use startSubmit/submitSuccess/submitFailure instead
-     */
-    updateStatus: (interruptId, status, responseValue) => {
-        // Map legacy status to state machine actions
-        if (status === 'resolved' && responseValue !== undefined) {
-            const submitResult = applyAction(interruptId, { type: 'SUBMIT', value: responseValue });
-            if (submitResult.valid) {
-                applyAction(interruptId, { type: 'SUCCESS' });
-            }
-        }
-        else if (status === 'cancelled') {
-            const cancelResult = applyAction(interruptId, { type: 'CANCEL' });
-            if (cancelResult.valid) {
-                applyAction(interruptId, { type: 'SUCCESS' });
-            }
-        }
-    },
     /**
-     * Mark an interrupt as resolved with the user's response (legacy)
-     * @deprecated Use startSubmit + submitSuccess instead
+     * Mark an interrupt as resolved with the user's response
+     *
+     * @param interruptId - The interrupt ID
+     * @param value - The resolved value
      */
     resolveInterrupt: (interruptId, value) => {
-        // For backward compatibility, immediately resolve
-        // (assumes sync operation or already completed API call)
         const submitResult = applyAction(interruptId, { type: 'SUBMIT', value });
         if (submitResult.valid) {
             applyAction(interruptId, { type: 'SUCCESS' });
         }
     },
     /**
-     * Mark an interrupt as cancelled (legacy)
-     * @deprecated Use startCancel + submitSuccess instead
+     * Mark an interrupt as cancelled
+     *
+     * @param interruptId - The interrupt ID
      */
     cancelInterrupt: (interruptId) => {
         const cancelResult = applyAction(interruptId, { type: 'CANCEL' });
@@ -293,27 +245,6 @@ export const interruptActions = {
             applyAction(interruptId, { type: 'SUCCESS' });
         }
     },
-    /**
-     * Set submitting state for an interrupt (legacy)
-     * @deprecated State is automatically managed by startSubmit/submitSuccess
-     */
-    setSubmitting: (interruptId, isSubmitting) => {
-        // This is now a no-op - state is managed by the state machine
-        // Kept for backward compatibility
-        if (isSubmitting) {
-            console.warn('[InterruptStore] setSubmitting(true) is deprecated. Use startSubmit() instead.');
-        }
-    },
-    /**
-     * Set error for an interrupt (legacy)
-     * @deprecated Use submitFailure() instead
-     */
-    setError: (interruptId, error) => {
-        if (error) {
-            applyAction(interruptId, { type: 'FAILURE', error });
-        }
-        // Clearing error is not directly supported - use retry or reset
-    },
     /**
      * Remove an interrupt from the store
      *

package/dist/stores/portCoordinateStore.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Port Coordinate Store
+ *
+ * General-purpose store that maintains absolute canvas-space coordinates
+ * for all port handles in the workflow. Built from SvelteFlow's internal
+ * handle bounds data combined with FlowDrop port metadata.
+ *
+ * Primary consumers:
+ * - Proximity connect (port-to-port distance instead of node center distance)
+ *
+ * Coordinates are derived from SvelteFlow's InternalNode.internals.handleBounds
+ * which SvelteFlow already maintains for all node types. This avoids replicating
+ * CSS positioning logic and stays automatically accurate.
+ */
+import type { WorkflowNode as WorkflowNodeType, PortCoordinate, PortCoordinateMap } from '../types/index.js';
+import type { InternalNode } from '@xyflow/svelte';
+/** Store holding all port absolute coordinates, keyed by handleId */
+export declare const portCoordinateStore: import("svelte/store").Writable<PortCoordinateMap>;
+/**
+ * Rebuild coordinates for ALL nodes from SvelteFlow internals.
+ * Call on initial workflow load (after render) and after bulk changes.
+ *
+ * @param nodes - All workflow nodes
+ * @param getInternalNode - SvelteFlow's getInternalNode function
+ */
+export declare function rebuildAllPortCoordinates(nodes: WorkflowNodeType[], getInternalNode: (id: string) => InternalNode | undefined): void;
+/**
+ * Update coordinates for a single node (efficient for drag updates).
+ * Only recomputes ports for the specified node.
+ *
+ * @param node - The workflow node to update
+ * @param getInternalNode - SvelteFlow's getInternalNode function
+ */
+export declare function updateNodePortCoordinates(node: WorkflowNodeType, getInternalNode: (id: string) => InternalNode | undefined): void;
+/**
+ * Remove all coordinates for a node (on node delete).
+ *
+ * @param nodeId - ID of the node to remove
+ */
+export declare function removeNodePortCoordinates(nodeId: string): void;
+/**
+ * Get coordinates for a specific handle.
+ *
+ * @param handleId - The handle ID to look up
+ * @returns The port coordinate or undefined if not found
+ */
+export declare function getPortCoordinate(handleId: string): PortCoordinate | undefined;
+/**
+ * Get all coordinates for a specific node.
+ *
+ * @param nodeId - The node ID to look up
+ * @returns Array of port coordinates for the node
+ */
+export declare function getNodePortCoordinates(nodeId: string): PortCoordinate[];
+/**
+ * Get the current snapshot of all port coordinates (non-reactive).
+ *
+ * @returns Current port coordinate map
+ */
+export declare function getPortCoordinateSnapshot(): PortCoordinateMap;

package/dist/stores/portCoordinateStore.js

@@ -0,0 +1,186 @@
+/**
+ * Port Coordinate Store
+ *
+ * General-purpose store that maintains absolute canvas-space coordinates
+ * for all port handles in the workflow. Built from SvelteFlow's internal
+ * handle bounds data combined with FlowDrop port metadata.
+ *
+ * Primary consumers:
+ * - Proximity connect (port-to-port distance instead of node center distance)
+ *
+ * Coordinates are derived from SvelteFlow's InternalNode.internals.handleBounds
+ * which SvelteFlow already maintains for all node types. This avoids replicating
+ * CSS positioning logic and stays automatically accurate.
+ */
+import { writable, get } from 'svelte/store';
+import { ProximityConnectHelper } from '../helpers/proximityConnect.js';
+/** Store holding all port absolute coordinates, keyed by handleId */
+export const portCoordinateStore = writable(new Map());
+/**
+ * Parse a handle ID to extract nodeId, direction, and portId.
+ * Handle ID format: ${nodeId}-${direction}-${portId}
+ *
+ * Note: nodeId itself can contain hyphens, so we match direction
+ * from the known suffixes (-input- or -output-).
+ */
+function parseHandleId(handleId) {
+    // Match the last occurrence of -input- or -output- to handle nodeIds with hyphens
+    const inputMatch = handleId.match(/^(.+)-input-(.+)$/);
+    if (inputMatch) {
+        return { nodeId: inputMatch[1], direction: 'input', portId: inputMatch[2] };
+    }
+    const outputMatch = handleId.match(/^(.+)-output-(.+)$/);
+    if (outputMatch) {
+        return { nodeId: outputMatch[1], direction: 'output', portId: outputMatch[2] };
+    }
+    return null;
+}
+/**
+ * Build a dataType lookup map from a node's ports.
+ * Maps portId → dataType for quick lookup when processing handle bounds.
+ */
+function buildPortDataTypeLookup(node) {
+    const lookup = new Map();
+    const inputs = ProximityConnectHelper.getAllPorts(node, 'input');
+    for (const port of inputs) {
+        lookup.set(`input-${port.id}`, port.dataType);
+    }
+    const outputs = ProximityConnectHelper.getAllPorts(node, 'output');
+    for (const port of outputs) {
+        lookup.set(`output-${port.id}`, port.dataType);
+    }
+    return lookup;
+}
+/**
+ * Compute port coordinates for a single node from SvelteFlow internal data.
+ *
+ * @param node - The workflow node
+ * @param internalNode - SvelteFlow's internal node with handleBounds
+ * @returns Array of PortCoordinate entries for this node
+ */
+function computeNodePortCoordinates(node, internalNode) {
+    const handleBounds = internalNode.internals.handleBounds;
+    if (!handleBounds)
+        return [];
+    const posAbs = internalNode.internals.positionAbsolute;
+    const dataTypeLookup = buildPortDataTypeLookup(node);
+    const coordinates = [];
+    const allHandles = [
+        ...(handleBounds.source ?? []),
+        ...(handleBounds.target ?? [])
+    ];
+    for (const handle of allHandles) {
+        if (!handle.id)
+            continue;
+        const parsed = parseHandleId(handle.id);
+        if (!parsed)
+            continue;
+        const lookupKey = `${parsed.direction}-${parsed.portId}`;
+        const dataType = dataTypeLookup.get(lookupKey);
+        if (!dataType)
+            continue;
+        coordinates.push({
+            x: posAbs.x + handle.x + handle.width / 2,
+            y: posAbs.y + handle.y + handle.height / 2,
+            handleId: handle.id,
+            nodeId: parsed.nodeId,
+            direction: parsed.direction,
+            dataType
+        });
+    }
+    return coordinates;
+}
+/**
+ * Rebuild coordinates for ALL nodes from SvelteFlow internals.
+ * Call on initial workflow load (after render) and after bulk changes.
+ *
+ * @param nodes - All workflow nodes
+ * @param getInternalNode - SvelteFlow's getInternalNode function
+ */
+export function rebuildAllPortCoordinates(nodes, getInternalNode) {
+    const map = new Map();
+    for (const node of nodes) {
+        const internalNode = getInternalNode(node.id);
+        if (!internalNode)
+            continue;
+        const coords = computeNodePortCoordinates(node, internalNode);
+        for (const coord of coords) {
+            map.set(coord.handleId, coord);
+        }
+    }
+    portCoordinateStore.set(map);
+}
+/**
+ * Update coordinates for a single node (efficient for drag updates).
+ * Only recomputes ports for the specified node.
+ *
+ * @param node - The workflow node to update
+ * @param getInternalNode - SvelteFlow's getInternalNode function
+ */
+export function updateNodePortCoordinates(node, getInternalNode) {
+    const internalNode = getInternalNode(node.id);
+    if (!internalNode)
+        return;
+    portCoordinateStore.update((map) => {
+        // Remove old entries for this node
+        for (const [key, coord] of map) {
+            if (coord.nodeId === node.id) {
+                map.delete(key);
+            }
+        }
+        // Add new entries
+        const coords = computeNodePortCoordinates(node, internalNode);
+        for (const coord of coords) {
+            map.set(coord.handleId, coord);
+        }
+        // Return new reference for reactivity
+        return new Map(map);
+    });
+}
+/**
+ * Remove all coordinates for a node (on node delete).
+ *
+ * @param nodeId - ID of the node to remove
+ */
+export function removeNodePortCoordinates(nodeId) {
+    portCoordinateStore.update((map) => {
+        for (const [key, coord] of map) {
+            if (coord.nodeId === nodeId) {
+                map.delete(key);
+            }
+        }
+        return new Map(map);
+    });
+}
+/**
+ * Get coordinates for a specific handle.
+ *
+ * @param handleId - The handle ID to look up
+ * @returns The port coordinate or undefined if not found
+ */
+export function getPortCoordinate(handleId) {
+    return get(portCoordinateStore).get(handleId);
+}
+/**
+ * Get all coordinates for a specific node.
+ *
+ * @param nodeId - The node ID to look up
+ * @returns Array of port coordinates for the node
+ */
+export function getNodePortCoordinates(nodeId) {
+    const result = [];
+    for (const coord of get(portCoordinateStore).values()) {
+        if (coord.nodeId === nodeId) {
+            result.push(coord);
+        }
+    }
+    return result;
+}
+/**
+ * Get the current snapshot of all port coordinates (non-reactive).
+ *
+ * @returns Current port coordinate map
+ */
+export function getPortCoordinateSnapshot() {
+    return get(portCoordinateStore);
+}

package/dist/types/index.d.ts

@@ -108,6 +108,26 @@ export interface NodePort {
      */
     schema?: OutputSchema | InputSchema;
 }
+/**
+ * Absolute position of a port handle in canvas space.
+ * Used by proximity connect and other features that need port positions.
+ */
+export interface PortCoordinate {
+    /** Absolute X position in canvas space */
+    x: number;
+    /** Absolute Y position in canvas space */
+    y: number;
+    /** Handle ID in format: ${nodeId}-${direction}-${portId} */
+    handleId: string;
+    /** The node this port belongs to */
+    nodeId: string;
+    /** Port direction */
+    direction: 'input' | 'output';
+    /** Port data type for compatibility checks */
+    dataType: string;
+}
+/** Map of handle IDs to their absolute canvas coordinates */
+export type PortCoordinateMap = Map<string, PortCoordinate>;
 /**
  * Dynamic port configuration for user-defined inputs/outputs
  * These are defined in the node's config and allow users to create

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.53",
+	"version": "0.0.55",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",