@d34dman/flowdrop 0.0.43 → 0.0.45

package/dist/components/nodes/GatewayNode.svelte

@@ -13,7 +13,11 @@
 	import type { WorkflowNode, NodePort, Branch } from '../../types/index.js';
 	import Icon from '@iconify/svelte';
 	import { getNodeIcon } from '../../utils/icons.js';
-	import { getDataTypeColorToken, getCategoryColorToken } from '../../utils/colors.js';
+	import {
+		getDataTypeColorToken,
+		getCategoryColorToken,
+		getPortBackgroundColor
+	} from '../../utils/colors.js';
 	import { connectedHandles } from '../../stores/workflowStore.js';
 
 	interface Props {
@@ -156,15 +160,18 @@
 	aria-label="Gateway node: {displayTitle}"
 	aria-describedby="node-description-{props.data.nodeId || 'unknown'}"
 >
-	<!-- Node Header -->
+	<!-- Node Header: expands in multiples of 10 (title row 40px + gap 10px + description 20px per line) -->
 	<div class="flowdrop-workflow-node__header">
-		<div class="flowdrop-flex flowdrop-gap--3 flowdrop-items--center">
-			<!-- Node Icon -->
+		<div class="flowdrop-workflow-node__header-title">
+			<!-- Node Icon with Squircle Background -->
 			<div
-				class="flowdrop-workflow-node__icon"
-				style="background-color: {getCategoryColorToken(props.data.metadata.category)}"
+				class="flowdrop-workflow-node__icon-wrapper"
+				style="--_icon-color: {getCategoryColorToken(props.data.metadata.category)}"
 			>
-				<Icon icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)} />
+				<Icon
+					icon={getNodeIcon(props.data.metadata.icon, props.data.metadata.category)}
+					class="flowdrop-workflow-node__icon"
+				/>
 			</div>
 
 			<!-- Node Title - uses instanceTitle override if set -->
@@ -172,9 +179,9 @@
 				{displayTitle}
 			</h3>
 		</div>
-		<!-- Node Description - uses instanceDescription override if set -->
+		<!-- Node Description - line-height 20px so header grows in steps of 10 -->
 		<p
-			class="flowdrop-text--xs flowdrop-text--gray flowdrop-truncate flowdrop-mt--1"
+			class="flowdrop-workflow-node__header-desc"
 			id="node-description-{props.data.nodeId || 'unknown'}"
 		>
 			{displayDescription}
@@ -184,33 +191,35 @@
 	<!-- Input Ports Container (filtered based on hideUnconnectedHandles) -->
 	{#if visibleInputPorts.length > 0}
 		<div class="flowdrop-workflow-node__ports">
-			<div class="flowdrop-workflow-node__ports-header">
-				<h5 class="flowdrop-workflow-node__ports-title">Inputs</h5>
-			</div>
 			<div class="flowdrop-workflow-node__ports-list">
-				{#each visibleInputPorts as port (port.id)}
+				{#each visibleInputPorts as port, inputIndex (port.id)}
 					<div class="flowdrop-workflow-node__port">
-						<!-- Input Handle -->
+						<!-- Input Handle: centered in row, at node edge (ports have no padding) -->
 						<Handle
 							type="target"
 							position={Position.Left}
 							id={`${props.data.nodeId}-input-${port.id}`}
 							class="flowdrop-workflow-node__handle"
-							style="top: 50%; transform: translateY(-50%); margin-left: -32px; background-color: {getDataTypeColorToken(
+							style="top: 50%; transform: translateY(-50%); left: calc(-1 * (var(--fd-handle-size) / 2)); --fd-handle-fill: {getDataTypeColorToken(
 								port.dataType
-							)}; border-color: '#ffffff';"
+							)}; --fd-handle-border-color: var(--fd-handle-border);"
 							role="button"
 							tabindex={0}
 							aria-label="Connect to {port.name} input port"
 						/>
 
-						<!-- Port Info -->
-						<div class="flowdrop-flex--1 flowdrop-min-w--0">
+						<!-- Port Info: padding lives here so handle position is simple -->
+						<div class="flowdrop-workflow-node__port-content flowdrop-flex--1 flowdrop-min-w--0">
 							<div class="flowdrop-flex flowdrop-gap--2">
 								<span class="flowdrop-text--xs flowdrop-font--medium">{port.name}</span>
 								<span
 									class="flowdrop-badge flowdrop-badge--sm"
-									style="background-color: {getDataTypeColorToken(port.dataType)}; color: #fff;"
+									style="background-color: {getPortBackgroundColor(
+										port.dataType,
+										15
+									)}; color: {getDataTypeColorToken(
+										port.dataType
+									)}; border: 1px solid {getPortBackgroundColor(port.dataType, 30)};"
 								>
 									{port.dataType}
 								</span>
@@ -235,18 +244,14 @@
 	<!-- Branches Section (Output Ports) - filtered based on hideUnconnectedHandles -->
 	{#if visibleBranches.length > 0}
 		<div class="flowdrop-workflow-node__ports">
-			<div class="flowdrop-workflow-node__ports-header">
-				<h5 class="flowdrop-workflow-node__ports-title">
-					<Icon icon="mdi:source-branch" />
-					<span>Branches ({visibleBranches.length})</span>
-				</h5>
-			</div>
 			<div class="flowdrop-workflow-node__ports-list">
-				{#each visibleBranches as branch (branch.name)}
+				{#each visibleBranches as branch, branchIndex (branch.name)}
 					{@const isActive = isBranchActive(branch.name)}
 					<div class="flowdrop-workflow-node__port">
-						<!-- Port Info -->
-						<div class="flowdrop-flex--1 flowdrop-min-w--0 flowdrop-text--right">
+						<!-- Port Info: padding lives here so handle position is simple -->
+						<div
+							class="flowdrop-workflow-node__port-content flowdrop-flex--1 flowdrop-min-w--0 flowdrop-text--right"
+						>
 							<div
 								class="flowdrop-flex flowdrop-gap--2 flowdrop-justify--end flowdrop-items--center"
 							>
@@ -263,22 +268,29 @@
 								</span>
 								<span
 									class="flowdrop-badge flowdrop-badge--sm"
-									style="background-color: {getDataTypeColorToken('trigger')}; color: #fff;"
+									style="background-color: {getPortBackgroundColor(
+										'trigger',
+										15
+									)}; color: {getDataTypeColorToken(
+										'trigger'
+									)}; border: 1px solid {getPortBackgroundColor('trigger', 30)};"
 								>
 									trigger
 								</span>
 							</div>
 						</div>
 
-						<!-- Output Handle - Generated from branch name -->
+						<!-- Output Handle: centered in row, at node edge (ports have no padding) -->
 						<Handle
 							type="source"
 							position={Position.Right}
 							id={`${props.data.nodeId}-output-${branch.name}`}
 							class={`flowdrop-workflow-node__handle ${isActive ? 'flowdrop-workflow-node__handle--active' : ''}`}
-							style="top: 50%; transform: translateY(-50%); margin-right: -32px; background-color: {isActive
+							style="top: 50%; transform: translateY(-50%); right: calc(-1 * (var(--fd-handle-size) / 2)); --fd-handle-fill: {isActive
 								? getDataTypeColorToken('trigger')
-								: getDataTypeColorToken('trigger')}; border-color: '#ffffff';"
+								: getDataTypeColorToken(
+										'trigger'
+									)}; --fd-handle-border-color: var(--fd-handle-border);"
 							role="button"
 							tabindex={0}
 							aria-label="Connect from {branch.name} branch"
@@ -311,89 +323,143 @@
 <style>
 	.flowdrop-workflow-node {
 		position: relative;
-		background-color: #ffffff;
-		border: 2px solid #e5e7eb;
-		border-radius: 0.75rem;
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-		width: 18rem;
+		background-color: var(--fd-card);
+		border: 1.5px solid var(--fd-node-border);
+		border-radius: var(--fd-radius-xl);
+		box-shadow: var(--fd-shadow-md);
+		width: var(--fd-node-default-width);
 		z-index: 10;
+		color: var(--fd-foreground);
+		transition: all var(--fd-transition-fast);
 	}
 
 	.flowdrop-workflow-node--gateway {
-		min-width: 18rem;
+		min-width: var(--fd-node-default-width);
+	}
+
+	.flowdrop-workflow-node:hover {
+		box-shadow: var(--fd-shadow-lg);
+		border-color: var(--fd-node-border-hover);
 	}
 
 	.flowdrop-workflow-node--selected {
-		box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-		border: 2px solid #3b82f6;
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
+		border-color: var(--fd-primary);
+	}
+
+	.flowdrop-workflow-node--selected:hover {
+		box-shadow:
+			0 0 0 2px var(--fd-primary-muted),
+			var(--fd-shadow-lg);
+		border-color: var(--fd-primary);
+	}
+
+	.flowdrop-workflow-node:focus-visible {
+		outline: 2px solid var(--fd-ring);
+		outline-offset: 2px;
 	}
 
 	.flowdrop-workflow-node__header {
-		padding: 1rem;
-		border-bottom: 1px solid #e5e7eb;
-		background-color: #f9fafb;
-		border-top-left-radius: 0.75rem;
-		border-top-right-radius: 0.75rem;
+		box-sizing: border-box;
+		padding: var(--fd-node-header-gap) var(--fd-space-4);
+		border-bottom: 1px solid var(--fd-border-muted);
+		background: var(--fd-header);
+		border-top-left-radius: var(--fd-radius-xl);
+		border-top-right-radius: var(--fd-radius-xl);
+		display: flex;
+		flex-direction: column;
+		gap: var(--fd-node-header-gap);
+		min-height: calc(
+			var(--fd-node-header-gap) * 2 + var(--fd-node-header-title-height) +
+				var(--fd-node-header-desc-line)
+		);
 	}
 
-	.flowdrop-workflow-node__icon {
-		width: 2rem;
-		height: 2rem;
-		border-radius: 0.5rem;
-		color: #ffffff;
-		font-size: 0.875rem;
-		font-weight: 500;
+	.flowdrop-workflow-node__header-title {
 		display: flex;
 		align-items: center;
-		justify-content: center;
-		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
+		gap: var(--fd-space-3);
+		min-height: var(--fd-node-header-title-height);
+		flex-shrink: 0;
 	}
 
-	.flowdrop-workflow-node__header h3 {
+	.flowdrop-workflow-node__header-desc {
 		margin: 0;
-		line-height: 1;
-	}
-
-	.flowdrop-workflow-node__ports {
-		padding: 0.75rem 1rem;
+		font-size: var(--fd-text-xs);
+		color: var(--fd-muted-foreground);
+		line-height: var(--fd-node-header-desc-line);
+		min-height: var(--fd-node-header-desc-line);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 3;
+		line-clamp: 3;
+		-webkit-box-orient: vertical;
 	}
 
-	.flowdrop-workflow-node__ports-header {
-		margin-bottom: 0.5rem;
+	/* Squircle icon wrapper - Apple-style rounded square background */
+	.flowdrop-workflow-node__icon-wrapper {
 		display: flex;
 		align-items: center;
-		gap: 0.25rem;
+		justify-content: center;
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: 0.5rem;
+		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-workflow-node:hover .flowdrop-workflow-node__icon-wrapper {
+		background: color-mix(
+			in srgb,
+			var(--_icon-color) var(--fd-node-icon-bg-opacity-hover),
+			transparent
+		);
+		transform: scale(1.05);
 	}
 
-	.flowdrop-workflow-node__ports-title {
+	.flowdrop-workflow-node__icon-wrapper :global(.flowdrop-workflow-node__icon) {
+		width: 1.25rem;
+		height: 1.25rem;
+		color: var(--fd-node-icon);
+	}
+
+	.flowdrop-workflow-node__header-title h3 {
 		margin: 0;
-		font-size: 0.75rem;
-		font-weight: 600;
-		color: #374151;
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		display: flex;
-		align-items: center;
-		gap: 0.5rem;
+		line-height: 1;
+		color: var(--fd-foreground);
+	}
+
+	.flowdrop-workflow-node__ports {
+		padding: 0;
 	}
 
 	.flowdrop-workflow-node__ports-list {
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
+		gap: var(--fd-node-header-gap);
+		padding: var(--fd-node-header-gap) 0;
 	}
 
 	.flowdrop-workflow-node__port {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.25rem 0;
+		gap: 0;
+		min-height: var(--fd-node-port-row-height);
+		padding: var(--fd-space-1) 0;
 		position: relative;
 	}
 
+	.flowdrop-workflow-node__port-content {
+		padding: 0 var(--fd-space-4);
+	}
+
 	.flowdrop-badge {
-		padding: 0.125rem 0.375rem;
-		border-radius: 0.25rem;
+		padding: 0.125rem var(--fd-space-1);
+		border-radius: var(--fd-radius-sm);
 		font-size: 0.625rem;
 		font-weight: 500;
 		text-transform: uppercase;
@@ -401,51 +467,35 @@
 	}
 
 	.flowdrop-badge--error {
-		background-color: #ef4444;
-		color: #ffffff;
+		background-color: var(--fd-error);
+		color: var(--fd-error-foreground);
 	}
 
 	.flowdrop-badge--sm {
 		font-size: 0.625rem;
-		padding: 0.125rem 0.25rem;
+		padding: 0.125rem var(--fd-space-1);
 	}
 
 	.workflow-node__no-branches {
 		display: flex;
 		align-items: center;
-		gap: 0.5rem;
-		padding: 0.75rem;
-		background: #fef3c7;
-		border: 1px solid #f59e0b;
-		border-radius: 0.5rem;
-		color: #92400e;
-		font-size: 0.875rem;
-	}
-
-	/* Handle styles */
-	:global(.flowdrop-workflow-node__handle) {
-		width: 0.75rem;
-		height: 0.75rem;
-		background-color: #6b7280;
-		border: 2px solid #ffffff;
-		border-radius: 50%;
-		transition: all 0.2s ease-in-out;
-		cursor: pointer;
+		gap: var(--fd-space-2);
+		padding: var(--fd-space-3);
+		background: var(--fd-warning-muted);
+		border: 1px solid var(--fd-warning);
+		border-radius: var(--fd-radius-lg);
+		color: var(--fd-warning-foreground);
+		font-size: var(--fd-text-sm);
 	}
 
+	/* Handle overrides: hover scale, active state (base 20px/12px from base.css) */
 	:global(.flowdrop-workflow-node__handle:hover) {
-		background-color: #3b82f6;
-		transform: scale(1.2);
-	}
-
-	:global(.flowdrop-workflow-node__handle:focus) {
-		outline: 2px solid #3b82f6;
-		outline-offset: 2px;
+		transform: translateY(-50%) scale(1.2);
 	}
 
-	:global(.flowdrop-workflow-node__handle--active) {
+	:global(.flowdrop-workflow-node__handle--active::before) {
 		transform: scale(1.15);
-		box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--fd-success) 20%, transparent);
 	}
 
 	/* Utility classes */
@@ -458,11 +508,11 @@
 	}
 
 	.flowdrop-gap--2 {
-		gap: 0.5rem;
+		gap: var(--fd-space-2);
 	}
 
 	.flowdrop-gap--3 {
-		gap: 0.75rem;
+		gap: var(--fd-space-3);
 	}
 
 	.flowdrop-items--center {
@@ -478,21 +528,21 @@
 	}
 
 	.flowdrop-text--xs {
-		font-size: 0.75rem;
+		font-size: var(--fd-text-xs);
 		line-height: 1rem;
 	}
 
 	.flowdrop-text--sm {
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 		line-height: 1.25rem;
 	}
 
 	.flowdrop-text--gray {
-		color: #6b7280;
+		color: var(--fd-muted-foreground);
 	}
 
 	.flowdrop-text--active {
-		color: #10b981;
+		color: var(--fd-success);
 		font-weight: 600;
 	}
 
@@ -507,7 +557,7 @@
 	}
 
 	.flowdrop-mt--1 {
-		margin-top: 0.25rem;
+		margin-top: var(--fd-space-1);
 	}
 
 	.flowdrop-text--right {
@@ -516,23 +566,23 @@
 
 	.flowdrop-workflow-node__config-btn {
 		position: absolute;
-		top: 0.5rem;
-		right: 0.5rem;
+		top: var(--fd-space-2);
+		right: var(--fd-space-2);
 		width: 1.5rem;
 		height: 1.5rem;
-		background-color: rgba(255, 255, 255, 0.9);
-		border: 1px solid #e5e7eb;
-		border-radius: 0.25rem;
-		color: #6b7280;
+		background-color: var(--fd-backdrop);
+		border: 1px solid var(--fd-border);
+		border-radius: var(--fd-radius-sm);
+		color: var(--fd-muted-foreground);
 		cursor: pointer;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 		opacity: 0;
-		transition: all 0.2s ease-in-out;
+		transition: all var(--fd-transition-normal);
 		backdrop-filter: blur(4px);
 		z-index: 15;
-		font-size: 0.875rem;
+		font-size: var(--fd-text-sm);
 	}
 
 	.flowdrop-workflow-node:hover .flowdrop-workflow-node__config-btn {
@@ -540,8 +590,8 @@
 	}
 
 	.flowdrop-workflow-node__config-btn:hover {
-		background-color: #f9fafb;
-		border-color: #d1d5db;
-		color: #374151;
+		background-color: var(--fd-muted);
+		border-color: var(--fd-border-strong);
+		color: var(--fd-foreground);
 	}
 </style>