@d34dman/flowdrop 0.0.44 → 0.0.45

package/dist/components/nodes/SimpleNode.svelte

@@ -178,19 +178,18 @@
 	});
 </script>
 
-<!-- Input Handles -->
+<!-- Input Handles: center at 20/40/60px (multiple of 10), 20px connection area -->
 {#each inputPorts as port, index}
-	<!-- Data Input - positioned at top-left if both types exist, otherwise center -->
 	<Handle
 		type="target"
 		position={Position.Left}
-		style="background-color: {getDataTypeColor(
+		style="--fd-handle-fill: {getDataTypeColor(
 			port.dataType
-		)}; border-color: var(--fd-handle-border); top: {inputPorts.length > 1
+		)}; --fd-handle-border-color: var(--fd-handle-border); top: {inputPorts.length > 1
 			? index === 0
-				? '25%'
-				: '75%'
-			: '50%'}; z-index: 30;"
+				? 20
+				: 60
+			: 40}px; transform: translateY(-50%); margin-left: -10px; z-index: 30;"
 		id={`${props.data.nodeId}-input-${port.id}`}
 	/>
 {/each}
@@ -250,19 +249,18 @@
 	</button>
 </div>
 
-<!-- Output Handles -->
+<!-- Output Handles: center at 20/40/60px (multiple of 10), 20px connection area -->
 {#each outputPorts as port, index}
-	<!-- Data Output - positioned at top-right if both types exist, otherwise center -->
 	<Handle
 		type="source"
 		position={Position.Right}
-		style="background-color: {getDataTypeColor(
+		style="--fd-handle-fill: {getDataTypeColor(
 			port.dataType
-		)}; border-color: var(--fd-handle-border); top: {outputPorts.length > 1
+		)}; --fd-handle-border-color: var(--fd-handle-border); top: {outputPorts.length > 1
 			? index === 0
-				? '25%'
-				: '75%'
-			: '50%'}; z-index: 30;"
+				? 20
+				: 60
+			: 40}px; transform: translateY(-50%); margin-right: -10px; z-index: 30;"
 		id={`${props.data.nodeId}-output-${port.id}`}
 	/>
 {/each}
@@ -287,7 +285,9 @@
 
 	/* Normal layout (default) */
 	.flowdrop-simple-node--normal {
-		width: 18rem;
+		width: var(--fd-node-default-width);
+		height: var(--fd-node-simple-height);
+		overflow: hidden;
 	}
 
 	.flowdrop-simple-node:hover {
@@ -296,12 +296,16 @@
 	}
 
 	.flowdrop-simple-node--selected {
-		box-shadow: 0 0 0 2px var(--fd-primary-muted), var(--fd-shadow-lg);
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
 		border-color: var(--fd-primary);
 	}
 
 	.flowdrop-simple-node--selected:hover {
-		box-shadow: 0 0 0 2px var(--fd-primary-muted), var(--fd-shadow-lg);
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
 		border-color: var(--fd-primary);
 	}
 
@@ -339,13 +343,17 @@
 		width: 2.25rem;
 		height: 2.25rem;
 		border-radius: 0.5rem;
-		background: color-mix(in srgb, var(--_icon-color) 15%, transparent);
+		background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
 		flex-shrink: 0;
 		transition: all var(--fd-transition-normal);
 	}
 
 	.flowdrop-simple-node:hover .flowdrop-simple-node__icon-wrapper {
-		background: color-mix(in srgb, var(--_icon-color) 22%, transparent);
+		background: color-mix(
+			in srgb,
+			var(--_icon-color) var(--fd-node-icon-bg-opacity-hover),
+			transparent
+		);
 		transform: scale(1.05);
 	}
 
@@ -438,27 +446,21 @@
 		}
 	}
 
-	/* Handle styles - matching WorkflowNode exactly */
+	/* Handle: 20px/12px from base.css; position offsets for 20px handle */
 	:global(.svelte-flow__node-simple .svelte-flow__handle) {
-		width: 18px !important;
-		height: 18px !important;
-		border-radius: 50% !important;
-		transition: all var(--fd-transition-normal) !important;
-		cursor: pointer !important;
 		z-index: 20 !important;
 		pointer-events: auto !important;
 	}
 
 	:global(.svelte-flow__node-simple .svelte-flow__handle-left) {
-		left: -6px !important;
+		left: -10px !important;
 	}
 
 	:global(.svelte-flow__node-simple .svelte-flow__handle-right) {
-		right: -6px !important;
+		right: -10px !important;
 	}
 
-	:global(.svelte-flow__node-simple .svelte-flow__handle:focus) {
-		outline: 2px solid var(--fd-ring) !important;
-		outline-offset: 2px !important;
+	:global(.svelte-flow__node-simple .svelte-flow__handle:hover) {
+		transform: translateY(-50%) scale(1.2) !important;
 	}
 </style>

package/dist/components/nodes/SquareNode.svelte

@@ -49,17 +49,13 @@
 	 * Get icon using the same resolution as WorkflowNode
 	 * Uses getNodeIcon utility with category fallback
 	 */
-	let squareIcon = $derived(
-		getNodeIcon(props.data.metadata?.icon, props.data.metadata?.category)
-	);
+	let squareIcon = $derived(getNodeIcon(props.data.metadata?.icon, props.data.metadata?.category));
 
 	/**
 	 * Get icon color using category-based color tokens for consistency
 	 * Falls back to primary color if category not available
 	 */
-	let squareColor = $derived(
-		getCategoryColorToken(props.data.metadata?.category)
-	);
+	let squareColor = $derived(getCategoryColorToken(props.data.metadata?.category));
 
 	// Handle configuration sidebar - now using global ConfigSidebar
 	function openConfigSidebar(): void {
@@ -168,19 +164,18 @@
 	});
 </script>
 
-<!-- Input Handles -->
+<!-- Input Handles: center at 20/40/60px (multiple of 10), 20px connection area -->
 {#each inputPorts as port, index}
-	<!-- Data Input - positioned at top-left if both types exist, otherwise center -->
 	<Handle
 		type="target"
 		position={Position.Left}
-		style="background-color: {getDataTypeColor(
+		style="--fd-handle-fill: {getDataTypeColor(
 			port.dataType
-		)}; border-color: var(--fd-handle-border); top: {inputPorts.length > 1
+		)}; --fd-handle-border-color: var(--fd-handle-border); top: {inputPorts.length > 1
 			? index === 0
-				? '25%'
-				: '75%'
-			: '50%'}; z-index: 30;"
+				? 20
+				: 60
+			: 40}px; transform: translateY(-50%); margin-left: -10px; z-index: 30;"
 		id={`${props.data.nodeId}-input-${port.id}`}
 	/>
 {/each}
@@ -199,14 +194,8 @@
 >
 	<!-- Square Layout: Always compact with centered icon in squircle wrapper -->
 	<div class="flowdrop-square-node__compact-content">
-		<div
-			class="flowdrop-square-node__icon-wrapper"
-			style="--_icon-color: {squareColor}"
-		>
-			<Icon
-				icon={squareIcon}
-				class="flowdrop-square-node__icon"
-			/>
+		<div class="flowdrop-square-node__icon-wrapper" style="--_icon-color: {squareColor}">
+			<Icon icon={squareIcon} class="flowdrop-square-node__icon" />
 		</div>
 	</div>
 
@@ -234,19 +223,18 @@
 	</button>
 </div>
 
-<!-- Output Handles -->
+<!-- Output Handles: center at 20/40/60px (multiple of 10), 20px connection area -->
 {#each outputPorts as port, index}
-	<!-- Data Output - positioned at top-right if both types exist, otherwise center -->
 	<Handle
 		type="source"
 		position={Position.Right}
-		style="background-color: {getDataTypeColor(
+		style="--fd-handle-fill: {getDataTypeColor(
 			port.dataType
-		)}; border-color: var(--fd-handle-border); top: {outputPorts.length > 1
+		)}; --fd-handle-border-color: var(--fd-handle-border); top: {outputPorts.length > 1
 			? index === 0
-				? '25%'
-				: '75%'
-			: '50%'}; z-index: 30;"
+				? 20
+				: 60
+			: 40}px; transform: translateY(-50%); margin-right: -10px; z-index: 30;"
 		id={`${props.data.nodeId}-output-${port.id}`}
 	/>
 {/each}
@@ -269,8 +257,8 @@
 
 	/* Square layout (always compact) */
 	.flowdrop-square-node--compact {
-		width: 80px;
-		height: 80px;
+		width: var(--fd-node-square-size);
+		height: var(--fd-node-square-size);
 		justify-content: center;
 		align-items: center;
 	}
@@ -281,12 +269,16 @@
 	}
 
 	.flowdrop-square-node--selected {
-		box-shadow: 0 0 0 2px var(--fd-primary-muted), var(--fd-shadow-lg);
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
 		border-color: var(--fd-primary);
 	}
 
 	.flowdrop-square-node--selected:hover {
-		box-shadow: 0 0 0 2px var(--fd-primary-muted), var(--fd-shadow-lg);
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
 		border-color: var(--fd-primary);
 	}
 
@@ -321,13 +313,17 @@
 		width: 3rem;
 		height: 3rem;
 		border-radius: 0.625rem;
-		background: color-mix(in srgb, var(--_icon-color) 15%, transparent);
+		background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
 		flex-shrink: 0;
 		transition: all var(--fd-transition-normal);
 	}
 
 	.flowdrop-square-node:hover .flowdrop-square-node__icon-wrapper {
-		background: color-mix(in srgb, var(--_icon-color) 22%, transparent);
+		background: color-mix(
+			in srgb,
+			var(--_icon-color) var(--fd-node-icon-bg-opacity-hover),
+			transparent
+		);
 		transform: scale(1.05);
 	}
 
@@ -403,27 +399,21 @@
 		}
 	}
 
-	/* Handle styles - matching WorkflowNode exactly */
+	/* Handle: 20px/12px from base.css; position offsets for 20px handle */
 	:global(.svelte-flow__node-square .svelte-flow__handle) {
-		width: 18px !important;
-		height: 18px !important;
-		border-radius: 50% !important;
-		transition: all var(--fd-transition-normal) !important;
-		cursor: pointer !important;
 		z-index: 20 !important;
 		pointer-events: auto !important;
 	}
 
 	:global(.svelte-flow__node-square .svelte-flow__handle-left) {
-		left: -6px !important;
+		left: -10px !important;
 	}
 
 	:global(.svelte-flow__node-square .svelte-flow__handle-right) {
-		right: -6px !important;
+		right: -10px !important;
 	}
 
-	:global(.svelte-flow__node-square .svelte-flow__handle:focus) {
-		outline: 2px solid var(--fd-ring) !important;
-		outline-offset: 2px !important;
+	:global(.svelte-flow__node-square .svelte-flow__handle:hover) {
+		transform: translateY(-50%) scale(1.2) !important;
 	}
 </style>

package/dist/components/nodes/TerminalNode.svelte

@@ -320,9 +320,9 @@
 				<Handle
 					type="target"
 					position={Position.Left}
-					style="background-color: {getDataTypeColor(
+					style="--fd-handle-fill: {getDataTypeColor(
 						port.dataType
-					)}; border-color: var(--fd-handle-border); top: 50%; transform: translateY(-50%); z-index: 30;"
+					)}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); margin-left: -10px; z-index: 30;"
 					id={`${props.data.nodeId}-input-${port.id}`}
 				/>
 			{/each}
@@ -330,14 +330,8 @@
 
 		<!-- Circular content with icon in squircle wrapper -->
 		<div class="flowdrop-terminal-node__content">
-			<div
-				class="flowdrop-terminal-node__icon-wrapper"
-				style="--_icon-color: {terminalColor}"
-			>
-				<Icon
-					icon={terminalIcon}
-					class="flowdrop-terminal-node__icon"
-				/>
+			<div class="flowdrop-terminal-node__icon-wrapper" style="--_icon-color: {terminalColor}">
+				<Icon icon={terminalIcon} class="flowdrop-terminal-node__icon" />
 			</div>
 		</div>
 
@@ -348,9 +342,9 @@
 					type="source"
 					position={Position.Right}
 					id={`${props.data.nodeId}-output-${port.id}`}
-					style="background-color: {getDataTypeColor(
+					style="--fd-handle-fill: {getDataTypeColor(
 						port.dataType
-					)}; border-color: var(--fd-handle-border); top: 50%; transform: translateY(-50%); z-index: 30;"
+					)}; --fd-handle-border-color: var(--fd-handle-border); top: 40px; transform: translateY(-50%); margin-right: -10px; z-index: 30;"
 				/>
 			{/each}
 		{/if}
@@ -405,8 +399,8 @@
 	}
 
 	.flowdrop-terminal-node__content {
-		width: 72px;
-		height: 72px;
+		width: var(--fd-node-terminal-size);
+		height: var(--fd-node-terminal-size);
 		background-color: var(--fd-background);
 		border: 3px solid var(--terminal-color, var(--fd-muted-foreground));
 		border-radius: 50%;
@@ -464,7 +458,8 @@
 			0 4px 6px -2px color-mix(in srgb, var(--fd-success) 15%, transparent);
 	}
 
-	.flowdrop-terminal-node--start.flowdrop-terminal-node--selected:hover .flowdrop-terminal-node__content {
+	.flowdrop-terminal-node--start.flowdrop-terminal-node--selected:hover
+		.flowdrop-terminal-node__content {
 		box-shadow:
 			0 10px 15px -3px color-mix(in srgb, var(--fd-success) 30%, transparent),
 			0 4px 6px -2px color-mix(in srgb, var(--fd-success) 15%, transparent),
@@ -483,7 +478,8 @@
 			0 4px 6px -2px color-mix(in srgb, var(--fd-error) 15%, transparent);
 	}
 
-	.flowdrop-terminal-node--exit.flowdrop-terminal-node--selected:hover .flowdrop-terminal-node__content {
+	.flowdrop-terminal-node--exit.flowdrop-terminal-node--selected:hover
+		.flowdrop-terminal-node__content {
 		box-shadow:
 			0 10px 15px -3px color-mix(in srgb, var(--fd-error) 30%, transparent),
 			0 4px 6px -2px color-mix(in srgb, var(--fd-error) 15%, transparent),
@@ -498,13 +494,17 @@
 		width: 2.75rem;
 		height: 2.75rem;
 		border-radius: 0.625rem;
-		background: color-mix(in srgb, var(--_icon-color) 15%, transparent);
+		background: color-mix(in srgb, var(--_icon-color) var(--fd-node-icon-bg-opacity), transparent);
 		flex-shrink: 0;
 		transition: all var(--fd-transition-normal);
 	}
 
 	.flowdrop-terminal-node:hover .flowdrop-terminal-node__icon-wrapper {
-		background: color-mix(in srgb, var(--_icon-color) 22%, transparent);
+		background: color-mix(
+			in srgb,
+			var(--_icon-color) var(--fd-node-icon-bg-opacity-hover),
+			transparent
+		);
 	}
 
 	.flowdrop-terminal-node__icon-wrapper :global(.flowdrop-terminal-node__icon) {
@@ -614,61 +614,25 @@
 		}
 	}
 
-	/* Handle styles - positioned relative to circle wrapper */
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle) {
-		width: 16px !important;
-		height: 16px !important;
-		border-radius: 50% !important;
-		border: 2px solid var(--fd-handle-border) !important;
-		transition: all var(--fd-transition-normal) !important;
-		cursor: pointer !important;
-		z-index: 20 !important;
-		pointer-events: auto !important;
-	}
-
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle-left) {
-		left: -8px !important;
-	}
-
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle-right) {
-		right: -8px !important;
-	}
-
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle:hover) {
-		transform: translateY(-50%) scale(1.2) !important;
-	}
-
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle:focus) {
-		outline: 2px solid var(--fd-ring) !important;
-		outline-offset: 2px !important;
-	}
-
-	/* Also keep node-level handle styles for fallback */
+	/* Handle: 20px/12px from base.css; position offsets for 20px handle */
+	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle),
 	:global(.svelte-flow__node-terminal .svelte-flow__handle) {
-		width: 16px !important;
-		height: 16px !important;
-		border-radius: 50% !important;
-		border: 2px solid var(--fd-handle-border) !important;
-		transition: all var(--fd-transition-normal) !important;
-		cursor: pointer !important;
 		z-index: 20 !important;
 		pointer-events: auto !important;
 	}
 
+	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle-left),
 	:global(.svelte-flow__node-terminal .svelte-flow__handle-left) {
-		left: -8px !important;
+		left: -10px !important;
 	}
 
+	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle-right),
 	:global(.svelte-flow__node-terminal .svelte-flow__handle-right) {
-		right: -8px !important;
+		right: -10px !important;
 	}
 
+	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle:hover),
 	:global(.svelte-flow__node-terminal .svelte-flow__handle:hover) {
 		transform: translateY(-50%) scale(1.2) !important;
 	}
-
-	:global(.svelte-flow__node-terminal .svelte-flow__handle:focus) {
-		outline: 2px solid var(--fd-ring) !important;
-		outline-offset: 2px !important;
-	}
 </style>

package/dist/components/nodes/ToolNode.svelte

@@ -141,13 +141,15 @@
 	}
 </script>
 
-<!-- Tool Input Handle (optional) -->
+<!-- Tool Input Handle (optional): center at 40px (multiple of 10), 20px connection area -->
 {#if hasToolInputPort && toolInputPort}
 	<Handle
 		type="target"
 		position={Position.Left}
 		id={`${props.data.nodeId}-input-${toolInputPort.id}`}
-		style="background-color: {getDataTypeColor('tool')}; border-color: var(--fd-handle-border);"
+		style="top: 40px; transform: translateY(-50%); margin-left: -10px; --fd-handle-fill: {getDataTypeColor(
+			'tool'
+		)}; --fd-handle-border-color: var(--fd-handle-border);"
 	/>
 {/if}
 
@@ -212,13 +214,15 @@
 	</button>
 </div>
 
-<!-- Tool Output Handle (optional) -->
+<!-- Tool Output Handle (optional): center at 40px (multiple of 10), 20px connection area -->
 {#if hasToolOutputPort && toolOutputPort}
 	<Handle
 		type="source"
 		position={Position.Right}
 		id={`${props.data.nodeId}-output-${toolOutputPort.id}`}
-		style="background-color: {getDataTypeColor('tool')}; border-color: var(--fd-handle-border);"
+		style="top: 40px; transform: translateY(-50%); margin-right: -10px; --fd-handle-fill: {getDataTypeColor(
+			'tool'
+		)}; --fd-handle-border-color: var(--fd-handle-border);"
 	/>
 {/if}
 
@@ -228,7 +232,8 @@
 		background-color: var(--fd-card);
 		border: 1.5px solid var(--fd-node-border);
 		border-radius: var(--fd-radius-xl);
-		width: 18rem;
+		width: var(--fd-node-default-width);
+		min-height: var(--fd-node-tool-min-height);
 		display: flex;
 		flex-direction: column;
 		cursor: pointer;
@@ -245,12 +250,16 @@
 	}
 
 	.flowdrop-tool-node--selected {
-		box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-tool-node-color) 30%, transparent), var(--fd-shadow-lg);
+		box-shadow:
+			0 0 0 2px color-mix(in srgb, var(--fd-tool-node-color) 30%, transparent),
+			var(--fd-shadow-lg);
 		border-color: var(--fd-tool-node-color);
 	}
 
 	.flowdrop-tool-node--selected:hover {
-		box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-tool-node-color) 30%, transparent), var(--fd-shadow-lg);
+		box-shadow:
+			0 0 0 2px color-mix(in srgb, var(--fd-tool-node-color) 30%, transparent),
+			var(--fd-shadow-lg);
 		border-color: var(--fd-tool-node-color);
 	}
 
@@ -300,13 +309,21 @@
 		width: 2.5rem;
 		height: 2.5rem;
 		border-radius: 0.625rem;
-		background: color-mix(in srgb, var(--fd-tool-node-color) 18%, transparent);
+		background: color-mix(
+			in srgb,
+			var(--fd-tool-node-color) var(--fd-node-icon-bg-opacity),
+			transparent
+		);
 		flex-shrink: 0;
 		transition: all var(--fd-transition-normal);
 	}
 
 	.flowdrop-tool-node:hover .flowdrop-tool-node__icon-wrapper {
-		background: color-mix(in srgb, var(--fd-tool-node-color) 25%, transparent);
+		background: color-mix(
+			in srgb,
+			var(--fd-tool-node-color) var(--fd-node-icon-bg-opacity-hover),
+			transparent
+		);
 		transform: scale(1.05);
 	}
 
@@ -418,24 +435,25 @@
 		}
 	}
 
-	/* Handle styles - special metadata port styling */
+	/* Handle: 20px/12px from base.css; position offsets, tool-specific hover/focus */
 	:global(.svelte-flow__node-tool .svelte-flow__handle) {
-		width: 16px !important;
-		height: 16px !important;
-		border: 2px solid var(--fd-handle-border) !important;
-		border-radius: 50% !important;
-		transition: all 0.2s ease-in-out !important;
-		cursor: pointer !important;
 		z-index: 20 !important;
 		pointer-events: auto !important;
 	}
 
+	:global(.svelte-flow__node-tool .svelte-flow__handle-left) {
+		left: -10px !important;
+	}
+
 	:global(.svelte-flow__node-tool .svelte-flow__handle-right) {
-		right: -6px !important;
+		right: -10px !important;
 	}
 
-	/* Metadata port hover effects */
 	:global(.svelte-flow__node-tool .svelte-flow__handle:hover) {
+		transform: translateY(-50%) scale(1.2) !important;
+	}
+
+	:global(.svelte-flow__node-tool .svelte-flow__handle:hover::before) {
 		box-shadow: 0 0 0 2px color-mix(in srgb, var(--fd-tool-node-color) 30%, transparent) !important;
 	}