@d34dman/flowdrop 0.0.44 → 0.0.45

package/dist/components/NodeSidebar.svelte

@@ -598,7 +598,7 @@
 		width: 2rem;
 		height: 2rem;
 		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);
 		color: var(--fd-node-icon);
 		font-size: var(--fd-text-sm);
 		display: flex;
@@ -610,7 +610,11 @@
 
 	.flowdrop-node-item:hover .flowdrop-node-icon,
 	.flowdrop-details__summary:hover .flowdrop-node-icon {
-		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);
 	}
 

package/dist/components/WorkflowEditor.svelte

@@ -39,8 +39,8 @@
 	} from '../helpers/workflowEditorHelper.js';
 	import type { NodeExecutionInfo } from '../types/index.js';
 	import { areNodeArraysEqual, areEdgeArraysEqual, throttle } from '../utils/performanceUtils.js';
-	import { Toaster } from "svelte-5-french-toast";
-	import { flowdropToastOptions, FLOWDROP_TOASTER_CLASS } from "../services/toastService.js";
+	import { Toaster } from 'svelte-5-french-toast';
+	import { flowdropToastOptions, FLOWDROP_TOASTER_CLASS } from '../services/toastService.js';
 
 	interface Props {
 		nodes?: NodeMetadata[];
@@ -530,10 +530,10 @@
 
 <!-- Toast notifications container -->
 <Toaster
-		position="bottom-center"
-		containerClassName={FLOWDROP_TOASTER_CLASS}
-		toastOptions={flowdropToastOptions}
-	/>
+	position="bottom-center"
+	containerClassName={FLOWDROP_TOASTER_CLASS}
+	toastOptions={flowdropToastOptions}
+/>
 
 <style>
 	.flowdrop-workflow-editor {
@@ -625,10 +625,10 @@
 		fill: currentColor;
 	}
 
+	/* Handle size/position only; colors come from inline --fd-handle-fill and base.css ::before */
 	:global(.flowdrop-workflow-editor .svelte-flow__handle) {
-		width: 18px;
-		height: 18px;
-		border: 2px solid white;
+		width: var(--fd-handle-size);
+		height: var(--fd-handle-size);
 		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 		z-index: 20;
 	}
@@ -637,6 +637,8 @@
 	:global(.flowdrop-workflow-editor .svelte-flow__handle) {
 		pointer-events: all;
 		cursor: crosshair;
+		background-color: var(--fd-handle-fill);
+		border-color: var(--fd-handle-border-color);
 	}
 
 	/**

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, getPortBackgroundColor } 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">
+		<div class="flowdrop-workflow-node__header-title">
 			<!-- Node Icon with Squircle Background -->
 			<div
 				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)} class="flowdrop-workflow-node__icon" />
+				<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: var(--fd-handle-border);"
+							)}; --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: {getPortBackgroundColor(port.dataType, 15)}; color: {getDataTypeColorToken(port.dataType)}; border: 1px solid {getPortBackgroundColor(port.dataType, 30)};"
+									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: {getPortBackgroundColor('trigger', 15)}; color: {getDataTypeColorToken('trigger')}; border: 1px solid {getPortBackgroundColor('trigger', 30)};"
+									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: var(--fd-handle-border);"
+								: getDataTypeColorToken(
+										'trigger'
+									)}; --fd-handle-border-color: var(--fd-handle-border);"
 							role="button"
 							tabindex={0}
 							aria-label="Connect from {branch.name} branch"
@@ -315,14 +327,14 @@
 		border: 1.5px solid var(--fd-node-border);
 		border-radius: var(--fd-radius-xl);
 		box-shadow: var(--fd-shadow-md);
-		width: 18rem;
+		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 {
@@ -331,12 +343,16 @@
 	}
 
 	.flowdrop-workflow-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-workflow-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);
 	}
 
@@ -346,11 +362,41 @@
 	}
 
 	.flowdrop-workflow-node__header {
-		padding: var(--fd-space-4);
+		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__header-title {
+		display: flex;
+		align-items: center;
+		gap: var(--fd-space-3);
+		min-height: var(--fd-node-header-title-height);
+		flex-shrink: 0;
+	}
+
+	.flowdrop-workflow-node__header-desc {
+		margin: 0;
+		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;
 	}
 
 	/* Squircle icon wrapper - Apple-style rounded square background */
@@ -361,13 +407,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-workflow-node:hover .flowdrop-workflow-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);
 	}
 
@@ -377,49 +427,36 @@
 		color: var(--fd-node-icon);
 	}
 
-	.flowdrop-workflow-node__header h3 {
+	.flowdrop-workflow-node__header-title h3 {
 		margin: 0;
 		line-height: 1;
 		color: var(--fd-foreground);
 	}
 
 	.flowdrop-workflow-node__ports {
-		padding: var(--fd-space-3) var(--fd-space-4);
-	}
-
-	.flowdrop-workflow-node__ports-header {
-		margin-bottom: var(--fd-space-2);
-		display: flex;
-		align-items: center;
-		gap: var(--fd-space-1);
-	}
-
-	.flowdrop-workflow-node__ports-title {
-		margin: 0;
-		font-size: var(--fd-text-xs);
-		font-weight: 600;
-		color: var(--fd-foreground);
-		text-transform: uppercase;
-		letter-spacing: 0.05em;
-		display: flex;
-		align-items: center;
-		gap: var(--fd-space-2);
+		padding: 0;
 	}
 
 	.flowdrop-workflow-node__ports-list {
 		display: flex;
 		flex-direction: column;
-		gap: var(--fd-space-2);
+		gap: var(--fd-node-header-gap);
+		padding: var(--fd-node-header-gap) 0;
 	}
 
 	.flowdrop-workflow-node__port {
 		display: flex;
 		align-items: center;
-		gap: var(--fd-space-2);
+		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 var(--fd-space-1);
 		border-radius: var(--fd-radius-sm);
@@ -451,28 +488,12 @@
 		font-size: var(--fd-text-sm);
 	}
 
-	/* Handle styles */
-	:global(.flowdrop-workflow-node__handle) {
-		width: 0.75rem;
-		height: 0.75rem;
-		background-color: var(--fd-muted-foreground);
-		border: 2px solid var(--fd-handle-border);
-		border-radius: 50%;
-		transition: all var(--fd-transition-normal);
-		cursor: pointer;
-	}
-
+	/* Handle overrides: hover scale, active state (base 20px/12px from base.css) */
 	:global(.flowdrop-workflow-node__handle:hover) {
-		background-color: var(--fd-primary);
-		transform: scale(1.2);
-	}
-
-	:global(.flowdrop-workflow-node__handle:focus) {
-		outline: 2px solid var(--fd-ring);
-		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 color-mix(in srgb, var(--fd-success) 20%, transparent);
 	}

package/dist/components/nodes/IdeaNode.svelte

@@ -144,26 +144,26 @@
 	tabindex="0"
 	aria-label="Idea node: {displayTitle}"
 >
-	<!-- Left Port (Target/Input) -->
+	<!-- Left Port (Target/Input): center at top 40px (multiple of 10), 20px connection area -->
 	{#if enableLeftPort}
 		<Handle
 			type="target"
 			position={Position.Left}
-			style="background-color: {getDataTypeColor(
+			style="--fd-handle-fill: {getDataTypeColor(
 				IDEA_DATA_TYPE
-			)}; border-color: #ffffff; 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-left`}
 		/>
 	{/if}
 
-	<!-- Top Port (Target/Input) -->
+	<!-- Top Port (Target/Input): center at left 150px (multiple of 10), 20px connection area -->
 	{#if enableTopPort}
 		<Handle
 			type="target"
 			position={Position.Top}
-			style="background-color: {getDataTypeColor(
+			style="--fd-handle-fill: {getDataTypeColor(
 				IDEA_DATA_TYPE
-			)}; border-color: #ffffff; left: 50%; transform: translateX(-50%); z-index: 30;"
+			)}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); margin-top: -10px; z-index: 30;"
 			id={`${props.data.nodeId}-input-top`}
 		/>
 	{/if}
@@ -208,26 +208,26 @@
 		<Icon icon="mdi:cog" />
 	</button>
 
-	<!-- Right Port (Source/Output) -->
+	<!-- Right Port (Source/Output): center at top 40px (multiple of 10), 20px connection area -->
 	{#if enableRightPort}
 		<Handle
 			type="source"
 			position={Position.Right}
-			style="background-color: {getDataTypeColor(
+			style="--fd-handle-fill: {getDataTypeColor(
 				IDEA_DATA_TYPE
-			)}; border-color: #ffffff; 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;"
 			id={`${props.data.nodeId}-output-right`}
 		/>
 	{/if}
 
-	<!-- Bottom Port (Source/Output) -->
+	<!-- Bottom Port (Source/Output): center at left 150px (multiple of 10), 20px connection area -->
 	{#if enableBottomPort}
 		<Handle
 			type="source"
 			position={Position.Bottom}
-			style="background-color: {getDataTypeColor(
+			style="--fd-handle-fill: {getDataTypeColor(
 				IDEA_DATA_TYPE
-			)}; border-color: #ffffff; left: 50%; transform: translateX(-50%); z-index: 30;"
+			)}; --fd-handle-border-color: var(--fd-handle-border); left: 150px; transform: translateX(-50%); margin-bottom: -10px; z-index: 30;"
 			id={`${props.data.nodeId}-output-bottom`}
 		/>
 	{/if}
@@ -236,7 +236,8 @@
 <style>
 	.flowdrop-idea-node {
 		position: relative;
-		width: 18rem;
+		width: var(--fd-node-default-width);
+		min-height: var(--fd-node-simple-height);
 		cursor: pointer;
 		transition: all var(--fd-transition-normal);
 		z-index: 10;
@@ -296,7 +297,7 @@
 		height: 2rem;
 		background-color: color-mix(
 			in srgb,
-			var(--idea-accent-color, var(--fd-accent)) 15%,
+			var(--idea-accent-color, var(--fd-accent)) var(--fd-node-icon-bg-opacity),
 			transparent
 		);
 		border-radius: var(--fd-radius-lg);
@@ -413,39 +414,28 @@
 		transform: scale(1.05);
 	}
 
-	/* Handle styles */
+	/* Handle: 20px/12px from base.css; position offsets for 20px handle */
 	:global(.flowdrop-idea-node .svelte-flow__handle) {
-		width: 16px !important;
-		height: 16px !important;
-		border-radius: 50% !important;
-		border: 2px solid #ffffff !important;
-		transition: all var(--fd-transition-normal) !important;
-		cursor: pointer !important;
 		z-index: 20 !important;
 		pointer-events: auto !important;
 	}
 
-	/* Left handle positioning */
 	:global(.flowdrop-idea-node .svelte-flow__handle-left) {
-		left: -8px !important;
+		left: -10px !important;
 	}
 
-	/* Right handle positioning */
 	:global(.flowdrop-idea-node .svelte-flow__handle-right) {
-		right: -8px !important;
+		right: -10px !important;
 	}
 
-	/* Top handle positioning */
 	:global(.flowdrop-idea-node .svelte-flow__handle-top) {
-		top: -8px !important;
+		top: -10px !important;
 	}
 
-	/* Bottom handle positioning */
 	:global(.flowdrop-idea-node .svelte-flow__handle-bottom) {
-		bottom: -8px !important;
+		bottom: -10px !important;
 	}
 
-	/* Handle hover effects */
 	:global(.flowdrop-idea-node .svelte-flow__handle-left:hover),
 	:global(.flowdrop-idea-node .svelte-flow__handle-right:hover) {
 		transform: translateY(-50%) scale(1.2) !important;
@@ -456,11 +446,6 @@
 		transform: translateX(-50%) scale(1.2) !important;
 	}
 
-	:global(.flowdrop-idea-node .svelte-flow__handle:focus) {
-		outline: 2px solid var(--fd-ring) !important;
-		outline-offset: 2px !important;
-	}
-
 	/* Responsive design */
 	@media (max-width: 640px) {
 		.flowdrop-idea-node {

package/dist/components/nodes/NotesNode.svelte

@@ -259,13 +259,17 @@
 		width: 2.25rem;
 		height: 2.25rem;
 		border-radius: 0.5rem;
-		background: color-mix(in srgb, var(--_notes-icon) 15%, transparent);
+		background: color-mix(in srgb, var(--_notes-icon) var(--fd-node-icon-bg-opacity), transparent);
 		flex-shrink: 0;
 		transition: all var(--fd-transition-normal);
 	}
 
 	.flowdrop-notes-node:hover .flowdrop-notes-node__icon-wrapper {
-		background: color-mix(in srgb, var(--_notes-icon) 22%, transparent);
+		background: color-mix(
+			in srgb,
+			var(--_notes-icon) var(--fd-node-icon-bg-opacity-hover),
+			transparent
+		);
 		transform: scale(1.05);
 	}