@flowdrop/flowdrop 1.0.1 → 1.2.0

package/dist/components/nodes/TerminalNode.svelte

@@ -9,682 +9,721 @@
 -->
 
 <script lang="ts">
-	import { Position, Handle } from '@xyflow/svelte';
-	import type { ConfigValues, NodeMetadata, NodeExtensions, NodePort } from '../../types/index.js';
-	import Icon from '@iconify/svelte';
-	import { getDataTypeColor, getCategoryColorToken } from '../../utils/colors.js';
-	import { getNodeIcon } from '../../utils/icons.js';
-	import { getCircleHandlePosition } from '../../utils/handlePositioning.js';
-	import { getConnectedHandles } from '../../stores/workflowStore.svelte.js';
-
-	/**
-	 * Terminal node variant types
-	 */
-	type TerminalVariant = 'start' | 'end' | 'exit';
-
-	/**
-	 * Configuration for each terminal variant
-	 */
-	interface VariantConfig {
-		/** Default icon for this variant */
-		icon: string;
-		/** Default color for this variant */
-		color: string;
-		/** Default label for this variant */
-		label: string;
-		/** Whether this variant has input handles */
-		hasInputs: boolean;
-		/** Whether this variant has output handles */
-		hasOutputs: boolean;
-	}
-
-	/**
-	 * Variant configurations mapping
-	 */
-	const VARIANT_CONFIGS: Record<TerminalVariant, VariantConfig> = {
-		start: {
-			icon: 'mdi:play-circle',
-			color: 'var(--fd-node-emerald)',
-			label: 'Start',
-			hasInputs: false,
-			hasOutputs: true
-		},
-		end: {
-			icon: 'mdi:stop-circle',
-			color: 'var(--fd-node-slate)',
-			label: 'End',
-			hasInputs: true,
-			hasOutputs: false
-		},
-		exit: {
-			icon: 'mdi:close-circle',
-			color: 'var(--fd-node-red)',
-			label: 'Exit',
-			hasInputs: true,
-			hasOutputs: false
-		}
-	};
-
-	const props = $props<{
-		data: {
-			label: string;
-			config: ConfigValues;
-			metadata: NodeMetadata;
-			nodeId?: string;
-			extensions?: NodeExtensions;
-			onConfigOpen?: (node: {
-				id: string;
-				type: string;
-				data: { label: string; config: ConfigValues; metadata: NodeMetadata };
-			}) => void;
-		};
-		selected?: boolean;
-		isProcessing?: boolean;
-		isError?: boolean;
-	}>();
-
-	/**
-	 * Determine terminal variant from config or metadata
-	 * Priority: config.variant > metadata tag detection > default to "start"
-	 */
-	function getVariant(): TerminalVariant {
-		// Check config first
-		const configVariant = props.data.config?.variant as string | undefined;
-		if (configVariant && configVariant in VARIANT_CONFIGS) {
-			return configVariant as TerminalVariant;
-		}
-
-		// Check metadata tags for variant hints
-		const tags = props.data.metadata?.tags || [];
-		if (tags.includes('start') || tags.includes('entry')) {
-			return 'start';
-		}
-		if (tags.includes('exit') || tags.includes('abort') || tags.includes('error')) {
-			return 'exit';
-		}
-		if (tags.includes('end') || tags.includes('finish') || tags.includes('complete')) {
-			return 'end';
-		}
-
-		// Check metadata id/name for hints
-		const idLower = (props.data.metadata?.id || '').toLowerCase();
-		const nameLower = (props.data.metadata?.name || '').toLowerCase();
-		if (idLower.includes('start') || nameLower.includes('start')) {
-			return 'start';
-		}
-		if (
-			idLower.includes('exit') ||
-			idLower.includes('abort') ||
-			nameLower.includes('exit') ||
-			nameLower.includes('abort')
-		) {
-			return 'exit';
-		}
-		if (idLower.includes('end') || nameLower.includes('end')) {
-			return 'end';
-		}
-
-		// Default to start
-		return 'start';
-	}
-
-	let variant = $derived(getVariant());
-
-	/**
-	 * Get current variant configuration
-	 */
-	let variantConfig = $derived(VARIANT_CONFIGS[variant]);
-
-	/**
-	 * Get the hideUnconnectedHandles setting from extensions
-	 * Merges node type defaults with instance overrides
-	 */
-	const hideUnconnectedHandles = $derived(() => {
-		const typeDefault = props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ?? false;
-		const instanceOverride = props.data.extensions?.ui?.hideUnconnectedHandles;
-		return instanceOverride ?? typeDefault;
-	});
-
-	/**
-	 * Check if a port should be visible based on connection state and settings
-	 */
-	function isPortVisible(port: NodePort, type: 'input' | 'output'): boolean {
-		if (!hideUnconnectedHandles()) {
-			return true;
-		}
-		if (port.required) {
-			return true;
-		}
-		const handleId = `${props.data.nodeId}-${type}-${port.id}`;
-		return getConnectedHandles().has(handleId);
-	}
-
-	/**
-	 * Get icon using the same resolution as WorkflowNode
-	 * Uses getNodeIcon utility with category fallback, or variant default
-	 */
-	let terminalIcon = $derived(
-		props.data.metadata?.icon
-			? getNodeIcon(props.data.metadata.icon, props.data.metadata?.category)
-			: variantConfig.icon
-	);
-
-	/**
-	 * Get color using category-based color tokens for consistency
-	 * Falls back to variant default color if category not available
-	 */
-	let terminalColor = $derived(
-		props.data.metadata?.category
-			? getCategoryColorToken(props.data.metadata.category)
-			: variantConfig.color
-	);
-
-	/**
-	 * Instance-specific title override from config.
-	 * Falls back to the original label if not set.
-	 * This allows users to customize the node title per-instance via config.
-	 */
-	const displayTitle = $derived(
-		(props.data.config?.instanceTitle as string) ||
-			props.data.label ||
-			props.data.metadata?.name ||
-			variantConfig.label
-	);
-
-	/**
-	 * Instance-specific description override from config.
-	 * Falls back to the metadata description if not set.
-	 * This allows users to customize the node description per-instance via config.
-	 */
-	const displayDescription = $derived(
-		(props.data.config?.instanceDescription as string) || props.data.metadata?.description || ''
-	);
-
-	/**
-	 * Check if metadata explicitly defines inputs (including empty array)
-	 * This allows API to control ports:
-	 * - undefined: use variant default
-	 * - []: explicitly no inputs
-	 * - [{...}]: use these inputs
-	 */
-	let hasExplicitInputs = $derived(Array.isArray(props.data.metadata?.inputs));
-
-	/**
-	 * Check if metadata explicitly defines outputs (including empty array)
-	 */
-	let hasExplicitOutputs = $derived(Array.isArray(props.data.metadata?.outputs));
-
-	/**
-	 * Default trigger input port for end/exit nodes
-	 */
-	const DEFAULT_INPUT_PORT = {
-		id: 'trigger',
-		name: 'Trigger',
-		type: 'input' as const,
-		dataType: 'trigger',
-		description: 'Workflow trigger input'
-	};
-
-	/**
-	 * Default trigger output port for start nodes
-	 */
-	const DEFAULT_OUTPUT_PORT = {
-		id: 'trigger',
-		name: 'Trigger',
-		type: 'output' as const,
-		dataType: 'trigger',
-		description: 'Workflow trigger output'
-	};
-
-	/**
-	 * Get input ports from metadata or create default trigger input
-	 * Priority:
-	 * 1. If metadata.inputs is defined (even empty array), use it exactly
-	 * 2. Otherwise, use variant default (trigger port for end/exit)
-	 */
-	let inputPorts = $derived(
-		hasExplicitInputs
-			? props.data.metadata.inputs
-			: variantConfig.hasInputs
-				? [DEFAULT_INPUT_PORT]
-				: []
-	);
-
-	/**
-	 * Get output ports from metadata or create default trigger output
-	 * Priority:
-	 * 1. If metadata.outputs is defined (even empty array), use it exactly
-	 * 2. Otherwise, use variant default (trigger port for start)
-	 */
-	let outputPorts = $derived(
-		hasExplicitOutputs
-			? props.data.metadata.outputs
-			: variantConfig.hasOutputs
-				? [DEFAULT_OUTPUT_PORT]
-				: []
-	);
-
-	/**
-	 * Visible input ports filtered by hideUnconnectedHandles setting
-	 */
-	let visibleInputPorts = $derived(
-		inputPorts.filter((port: NodePort) => isPortVisible(port, 'input'))
-	);
-
-	/**
-	 * Visible output ports filtered by hideUnconnectedHandles setting
-	 */
-	let visibleOutputPorts = $derived(
-		outputPorts.filter((port: NodePort) => isPortVisible(port, 'output'))
-	);
-
-	/**
-	 * Determine if we should show inputs based on visible ports
-	 */
-	let showInputs = $derived(visibleInputPorts.length > 0);
-
-	/**
-	 * Determine if we should show outputs based on visible ports
-	 */
-	let showOutputs = $derived(visibleOutputPorts.length > 0);
-
-	/**
-	 * Handle configuration sidebar - using global ConfigSidebar
-	 */
-	function openConfigSidebar(): void {
-		if (props.data.onConfigOpen) {
-			const nodeForConfig = {
-				id: props.data.nodeId || 'unknown',
-				type: 'terminal',
-				data: props.data
-			};
-			props.data.onConfigOpen(nodeForConfig);
-		}
-	}
-
-	/**
-	 * Handle double-click to open config
-	 */
-	function handleDoubleClick(): void {
-		openConfigSidebar();
-	}
-
-	/**
-	 * Handle single click - only handle selection
-	 */
-	function handleClick(): void {
-		// Node selection is handled by Svelte Flow
-	}
-
-	/**
-	 * Handle keyboard events for accessibility
-	 */
-	function handleKeydown(event: KeyboardEvent): void {
-		if (event.key === 'Enter' || event.key === ' ') {
-			event.preventDefault();
-			handleDoubleClick();
-		}
-	}
+  import { Position, Handle } from "@xyflow/svelte";
+  import type {
+    ConfigValues,
+    NodeMetadata,
+    NodeExtensions,
+    NodePort,
+  } from "../../types/index.js";
+  import Icon from "@iconify/svelte";
+  import {
+    getDataTypeColor,
+    getCategoryColorToken,
+  } from "../../utils/colors.js";
+  import { getNodeIcon } from "../../utils/icons.js";
+  import { getCircleHandlePosition } from "../../utils/handlePositioning.js";
+  import { getConnectedHandles } from "../../stores/workflowStore.svelte.js";
+
+  /**
+   * Terminal node variant types
+   */
+  type TerminalVariant = "start" | "end" | "exit";
+
+  /**
+   * Configuration for each terminal variant
+   */
+  interface VariantConfig {
+    /** Default icon for this variant */
+    icon: string;
+    /** Default color for this variant */
+    color: string;
+    /** Default label for this variant */
+    label: string;
+    /** Whether this variant has input handles */
+    hasInputs: boolean;
+    /** Whether this variant has output handles */
+    hasOutputs: boolean;
+  }
+
+  /**
+   * Variant configurations mapping
+   */
+  const VARIANT_CONFIGS: Record<TerminalVariant, VariantConfig> = {
+    start: {
+      icon: "mdi:play-circle",
+      color: "var(--fd-node-emerald)",
+      label: "Start",
+      hasInputs: false,
+      hasOutputs: true,
+    },
+    end: {
+      icon: "mdi:stop-circle",
+      color: "var(--fd-node-slate)",
+      label: "End",
+      hasInputs: true,
+      hasOutputs: false,
+    },
+    exit: {
+      icon: "mdi:close-circle",
+      color: "var(--fd-node-red)",
+      label: "Exit",
+      hasInputs: true,
+      hasOutputs: false,
+    },
+  };
+
+  const props = $props<{
+    data: {
+      label: string;
+      config: ConfigValues;
+      metadata: NodeMetadata;
+      nodeId?: string;
+      extensions?: NodeExtensions;
+      onConfigOpen?: (node: {
+        id: string;
+        type: string;
+        data: { label: string; config: ConfigValues; metadata: NodeMetadata };
+      }) => void;
+    };
+    selected?: boolean;
+    isProcessing?: boolean;
+    isError?: boolean;
+  }>();
+
+  /**
+   * Determine terminal variant from config or metadata
+   * Priority: config.variant > metadata tag detection > default to "start"
+   */
+  function getVariant(): TerminalVariant {
+    // Check config first
+    const configVariant = props.data.config?.variant as string | undefined;
+    if (configVariant && configVariant in VARIANT_CONFIGS) {
+      return configVariant as TerminalVariant;
+    }
+
+    // Check metadata tags for variant hints
+    const tags = props.data.metadata?.tags || [];
+    if (tags.includes("start") || tags.includes("entry")) {
+      return "start";
+    }
+    if (
+      tags.includes("exit") ||
+      tags.includes("abort") ||
+      tags.includes("error")
+    ) {
+      return "exit";
+    }
+    if (
+      tags.includes("end") ||
+      tags.includes("finish") ||
+      tags.includes("complete")
+    ) {
+      return "end";
+    }
+
+    // Check metadata id/name for hints
+    const idLower = (props.data.metadata?.id || "").toLowerCase();
+    const nameLower = (props.data.metadata?.name || "").toLowerCase();
+    if (idLower.includes("start") || nameLower.includes("start")) {
+      return "start";
+    }
+    if (
+      idLower.includes("exit") ||
+      idLower.includes("abort") ||
+      nameLower.includes("exit") ||
+      nameLower.includes("abort")
+    ) {
+      return "exit";
+    }
+    if (idLower.includes("end") || nameLower.includes("end")) {
+      return "end";
+    }
+
+    // Default to start
+    return "start";
+  }
+
+  let variant = $derived(getVariant());
+
+  /**
+   * Get current variant configuration
+   */
+  let variantConfig = $derived(VARIANT_CONFIGS[variant]);
+
+  /**
+   * Get the hideUnconnectedHandles setting from extensions
+   * Merges node type defaults with instance overrides
+   */
+  const hideUnconnectedHandles = $derived(() => {
+    const typeDefault =
+      props.data.metadata?.extensions?.ui?.hideUnconnectedHandles ?? false;
+    const instanceOverride = props.data.extensions?.ui?.hideUnconnectedHandles;
+    return instanceOverride ?? typeDefault;
+  });
+
+  /**
+   * Check if a port should be visible based on connection state and settings
+   */
+  function isPortVisible(port: NodePort, type: "input" | "output"): boolean {
+    if (!hideUnconnectedHandles()) {
+      return true;
+    }
+    if (port.required) {
+      return true;
+    }
+    const handleId = `${props.data.nodeId}-${type}-${port.id}`;
+    return getConnectedHandles().has(handleId);
+  }
+
+  /**
+   * Get icon using the same resolution as WorkflowNode
+   * Uses getNodeIcon utility with category fallback, or variant default
+   */
+  let terminalIcon = $derived(
+    props.data.metadata?.icon
+      ? getNodeIcon(props.data.metadata.icon, props.data.metadata?.category)
+      : variantConfig.icon,
+  );
+
+  /**
+   * Get color using category-based color tokens for consistency
+   * Falls back to variant default color if category not available
+   */
+  let terminalColor = $derived(
+    props.data.metadata?.category
+      ? getCategoryColorToken(props.data.metadata.category)
+      : variantConfig.color,
+  );
+
+  /**
+   * Instance-specific title override from config.
+   * Falls back to the original label if not set.
+   * This allows users to customize the node title per-instance via config.
+   */
+  const displayTitle = $derived(
+    (props.data.config?.instanceTitle as string) ||
+      props.data.label ||
+      props.data.metadata?.name ||
+      variantConfig.label,
+  );
+
+  /**
+   * Instance-specific description override from config.
+   * Falls back to the metadata description if not set.
+   * This allows users to customize the node description per-instance via config.
+   */
+  const displayDescription = $derived(
+    (props.data.config?.instanceDescription as string) ||
+      props.data.metadata?.description ||
+      "",
+  );
+
+  /**
+   * Check if metadata explicitly defines inputs (including empty array)
+   * This allows API to control ports:
+   * - undefined: use variant default
+   * - []: explicitly no inputs
+   * - [{...}]: use these inputs
+   */
+  let hasExplicitInputs = $derived(Array.isArray(props.data.metadata?.inputs));
+
+  /**
+   * Check if metadata explicitly defines outputs (including empty array)
+   */
+  let hasExplicitOutputs = $derived(
+    Array.isArray(props.data.metadata?.outputs),
+  );
+
+  /**
+   * Default trigger input port for end/exit nodes
+   */
+  const DEFAULT_INPUT_PORT = {
+    id: "trigger",
+    name: "Trigger",
+    type: "input" as const,
+    dataType: "trigger",
+    description: "Workflow trigger input",
+  };
+
+  /**
+   * Default trigger output port for start nodes
+   */
+  const DEFAULT_OUTPUT_PORT = {
+    id: "trigger",
+    name: "Trigger",
+    type: "output" as const,
+    dataType: "trigger",
+    description: "Workflow trigger output",
+  };
+
+  /**
+   * Get input ports from metadata or create default trigger input
+   * Priority:
+   * 1. If metadata.inputs is defined (even empty array), use it exactly
+   * 2. Otherwise, use variant default (trigger port for end/exit)
+   */
+  let inputPorts = $derived(
+    hasExplicitInputs
+      ? props.data.metadata.inputs
+      : variantConfig.hasInputs
+        ? [DEFAULT_INPUT_PORT]
+        : [],
+  );
+
+  /**
+   * Get output ports from metadata or create default trigger output
+   * Priority:
+   * 1. If metadata.outputs is defined (even empty array), use it exactly
+   * 2. Otherwise, use variant default (trigger port for start)
+   */
+  let outputPorts = $derived(
+    hasExplicitOutputs
+      ? props.data.metadata.outputs
+      : variantConfig.hasOutputs
+        ? [DEFAULT_OUTPUT_PORT]
+        : [],
+  );
+
+  /**
+   * Visible input ports filtered by hideUnconnectedHandles setting
+   */
+  let visibleInputPorts = $derived(
+    inputPorts.filter((port: NodePort) => isPortVisible(port, "input")),
+  );
+
+  /**
+   * Visible output ports filtered by hideUnconnectedHandles setting
+   */
+  let visibleOutputPorts = $derived(
+    outputPorts.filter((port: NodePort) => isPortVisible(port, "output")),
+  );
+
+  /**
+   * Determine if we should show inputs based on visible ports
+   */
+  let showInputs = $derived(visibleInputPorts.length > 0);
+
+  /**
+   * Determine if we should show outputs based on visible ports
+   */
+  let showOutputs = $derived(visibleOutputPorts.length > 0);
+
+  /**
+   * Handle configuration sidebar - using global ConfigSidebar
+   */
+  function openConfigSidebar(): void {
+    if (props.data.onConfigOpen) {
+      const nodeForConfig = {
+        id: props.data.nodeId || "unknown",
+        type: "terminal",
+        data: props.data,
+      };
+      props.data.onConfigOpen(nodeForConfig);
+    }
+  }
+
+  /**
+   * Handle double-click to open config
+   */
+  function handleDoubleClick(): void {
+    openConfigSidebar();
+  }
+
+  /**
+   * Handle single click - only handle selection
+   */
+  function handleClick(): void {
+    // Node selection is handled by Svelte Flow
+  }
+
+  /**
+   * Handle keyboard events for accessibility
+   */
+  function handleKeydown(event: KeyboardEvent): void {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      handleDoubleClick();
+    }
+  }
 </script>
 
 <!-- Terminal Node -->
 <div
-	class="flowdrop-terminal-node"
-	class:flowdrop-terminal-node--selected={props.selected}
-	class:flowdrop-terminal-node--processing={props.isProcessing}
-	class:flowdrop-terminal-node--error={props.isError}
-	class:flowdrop-terminal-node--start={variant === 'start'}
-	class:flowdrop-terminal-node--end={variant === 'end'}
-	class:flowdrop-terminal-node--exit={variant === 'exit'}
-	style="--terminal-color: {terminalColor};"
-	onclick={handleClick}
-	ondblclick={handleDoubleClick}
-	onkeydown={handleKeydown}
-	role="button"
-	tabindex="0"
-	aria-label="{variant} node: {displayTitle}"
+  class="flowdrop-terminal-node"
+  class:flowdrop-terminal-node--selected={props.selected}
+  class:flowdrop-terminal-node--processing={props.isProcessing}
+  class:flowdrop-terminal-node--error={props.isError}
+  class:flowdrop-terminal-node--start={variant === "start"}
+  class:flowdrop-terminal-node--end={variant === "end"}
+  class:flowdrop-terminal-node--exit={variant === "exit"}
+  style="--terminal-color: {terminalColor};"
+  onclick={handleClick}
+  ondblclick={handleDoubleClick}
+  onkeydown={handleKeydown}
+  role="button"
+  tabindex="0"
+  aria-label="{variant} node: {displayTitle}"
 >
-	<!-- Config button at top -->
-	<button
-		class="flowdrop-terminal-node__config-btn"
-		onclick={openConfigSidebar}
-		title="Configure node"
-	>
-		<Icon icon="mdi:cog" />
-	</button>
-
-	<!-- Circle wrapper for proper handle positioning -->
-	<div class="flowdrop-terminal-node__circle-wrapper">
-		<!-- Input Handles (for end/exit variants) -->
-		{#if showInputs}
-			{#each visibleInputPorts as port, index (`${port.id}-${visibleInputPorts.length}`)}
-				{@const pos = getCircleHandlePosition(index, visibleInputPorts.length, 'left')}
-				<Handle
-					type="target"
-					position={Position.Left}
-					style="--fd-handle-fill: {getDataTypeColor(
-						port.dataType
-					)}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
-					id={`${props.data.nodeId}-input-${port.id}`}
-				/>
-			{/each}
-		{/if}
-
-		<!-- 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>
-		</div>
-
-		<!-- Output Handles (for start variant) -->
-		{#if showOutputs}
-			{#each visibleOutputPorts as port, index (`${port.id}-${visibleOutputPorts.length}`)}
-				{@const pos = getCircleHandlePosition(index, visibleOutputPorts.length, 'right')}
-				<Handle
-					type="source"
-					position={Position.Right}
-					id={`${props.data.nodeId}-output-${port.id}`}
-					style="--fd-handle-fill: {getDataTypeColor(
-						port.dataType
-					)}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
-				/>
-			{/each}
-		{/if}
-	</div>
-
-	<!-- Label and description below the circle -->
-	<div class="flowdrop-terminal-node__label-container">
-		<div class="flowdrop-terminal-node__label">
-			{displayTitle}
-		</div>
-		{#if displayDescription}
-			<div class="flowdrop-terminal-node__description">
-				{displayDescription}
-			</div>
-		{/if}
-	</div>
-
-	<!-- Processing indicator -->
-	{#if props.isProcessing}
-		<div class="flowdrop-terminal-node__processing">
-			<div class="flowdrop-terminal-node__spinner"></div>
-		</div>
-	{/if}
-
-	<!-- Error indicator -->
-	{#if props.isError}
-		<div class="flowdrop-terminal-node__error">
-			<Icon icon="mdi:alert-circle" class="flowdrop-terminal-node__error-icon" />
-		</div>
-	{/if}
+  <!-- Config button at top -->
+  <button
+    class="flowdrop-terminal-node__config-btn"
+    onclick={openConfigSidebar}
+    title="Configure node"
+  >
+    <Icon icon="mdi:cog" />
+  </button>
+
+  <!-- Circle wrapper for proper handle positioning -->
+  <div class="flowdrop-terminal-node__circle-wrapper">
+    <!-- Input Handles (for end/exit variants) -->
+    {#if showInputs}
+      {#each visibleInputPorts as port, index (`${port.id}-${visibleInputPorts.length}`)}
+        {@const pos = getCircleHandlePosition(
+          index,
+          visibleInputPorts.length,
+          "left",
+        )}
+        <Handle
+          type="target"
+          position={Position.Left}
+          style="--fd-handle-fill: {getDataTypeColor(
+            port.dataType,
+          )}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
+          id={`${props.data.nodeId}-input-${port.id}`}
+        />
+      {/each}
+    {/if}
+
+    <!-- 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>
+    </div>
+
+    <!-- Output Handles (for start variant) -->
+    {#if showOutputs}
+      {#each visibleOutputPorts as port, index (`${port.id}-${visibleOutputPorts.length}`)}
+        {@const pos = getCircleHandlePosition(
+          index,
+          visibleOutputPorts.length,
+          "right",
+        )}
+        <Handle
+          type="source"
+          position={Position.Right}
+          id={`${props.data.nodeId}-output-${port.id}`}
+          style="--fd-handle-fill: {getDataTypeColor(
+            port.dataType,
+          )}; --fd-handle-border-color: var(--fd-handle-border); left: {pos.left}px; top: {pos.top}px; transform: translate(-50%, -50%); z-index: 30;"
+        />
+      {/each}
+    {/if}
+  </div>
+
+  <!-- Label and description below the circle -->
+  <div class="flowdrop-terminal-node__label-container">
+    <div class="flowdrop-terminal-node__label">
+      {displayTitle}
+    </div>
+    {#if displayDescription}
+      <div class="flowdrop-terminal-node__description">
+        {displayDescription}
+      </div>
+    {/if}
+  </div>
+
+  <!-- Processing indicator -->
+  {#if props.isProcessing}
+    <div class="flowdrop-terminal-node__processing">
+      <div class="flowdrop-terminal-node__spinner"></div>
+    </div>
+  {/if}
+
+  <!-- Error indicator -->
+  {#if props.isError}
+    <div class="flowdrop-terminal-node__error">
+      <Icon
+        icon="mdi:alert-circle"
+        class="flowdrop-terminal-node__error-icon"
+      />
+    </div>
+  {/if}
 </div>
 
 <style>
-	.flowdrop-terminal-node {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: var(--fd-space-xs);
-		cursor: pointer;
-		transition: all var(--fd-transition-normal);
-		z-index: 10;
-		color: var(--fd-foreground);
-	}
-
-	/* Wrapper for circle and handles - ensures handles are vertically centered to circle */
-	.flowdrop-terminal-node__circle-wrapper {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.flowdrop-terminal-node__content {
-		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%;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		box-shadow: var(--fd-shadow-md);
-		transition: all var(--fd-transition-normal);
-	}
-
-	.flowdrop-terminal-node:hover .flowdrop-terminal-node__content {
-		box-shadow: var(--fd-shadow-lg);
-		transform: scale(1.05);
-	}
-
-	.flowdrop-terminal-node--selected .flowdrop-terminal-node__content {
-		box-shadow:
-			var(--fd-shadow-lg),
-			0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
-		border-color: var(--fd-primary);
-	}
-
-	.flowdrop-terminal-node--selected:hover .flowdrop-terminal-node__content {
-		box-shadow:
-			var(--fd-shadow-lg),
-			0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
-		border-color: var(--fd-primary);
-		transform: scale(1.05);
-	}
-
-	.flowdrop-terminal-node:focus-visible .flowdrop-terminal-node__content {
-		outline: 2px solid var(--fd-ring);
-		outline-offset: 2px;
-	}
-
-	.flowdrop-terminal-node--processing .flowdrop-terminal-node__content {
-		opacity: 0.7;
-	}
-
-	.flowdrop-terminal-node--error .flowdrop-terminal-node__content {
-		border-color: var(--fd-error) !important;
-		background-color: var(--fd-error-muted) !important;
-	}
-
-	/* Variant-specific glow effects */
-	.flowdrop-terminal-node--start .flowdrop-terminal-node__content {
-		box-shadow:
-			0 4px 6px -1px color-mix(in srgb, var(--fd-success) 20%, transparent),
-			0 2px 4px -1px color-mix(in srgb, var(--fd-success) 10%, transparent);
-	}
-
-	.flowdrop-terminal-node--start: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);
-	}
-
-	.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),
-			0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
-	}
-
-	.flowdrop-terminal-node--exit .flowdrop-terminal-node__content {
-		box-shadow:
-			0 4px 6px -1px color-mix(in srgb, var(--fd-error) 20%, transparent),
-			0 2px 4px -1px color-mix(in srgb, var(--fd-error) 10%, transparent);
-	}
-
-	.flowdrop-terminal-node--exit: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);
-	}
-
-	.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),
-			0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
-	}
-
-	/* Squircle icon wrapper - matching WorkflowNode style */
-	.flowdrop-terminal-node__icon-wrapper {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 2.75rem;
-		height: 2.75rem;
-		border-radius: 0.625rem;
-		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) var(--fd-node-icon-bg-opacity-hover),
-			transparent
-		);
-	}
-
-	.flowdrop-terminal-node__icon-wrapper :global(.flowdrop-terminal-node__icon) {
-		width: 1.5rem;
-		height: 1.5rem;
-		color: var(--fd-node-icon);
-	}
-
-	.flowdrop-terminal-node__label-container {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0.125rem;
-		background-color: var(--fd-backdrop);
-		padding: var(--fd-space-3xs) var(--fd-space-xs);
-		border-radius: var(--fd-radius-sm);
-		box-shadow: var(--fd-shadow-sm);
-		max-width: 140px;
-	}
-
-	.flowdrop-terminal-node__label {
-		font-size: var(--fd-text-xs);
-		font-weight: 500;
-		color: var(--fd-foreground);
-		text-align: center;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		max-width: 100%;
-	}
-
-	.flowdrop-terminal-node__description {
-		font-size: 0.625rem;
-		color: var(--fd-muted-foreground);
-		text-align: center;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		max-width: 100%;
-	}
-
-	.flowdrop-terminal-node__processing {
-		position: absolute;
-		top: 1.5rem;
-		right: 0;
-	}
-
-	.flowdrop-terminal-node__spinner {
-		width: 14px;
-		height: 14px;
-		border: 2px solid color-mix(in srgb, var(--fd-foreground) 30%, transparent);
-		border-top: 2px solid var(--terminal-color, var(--fd-muted-foreground));
-		border-radius: 50%;
-		animation: spin 1s linear infinite;
-	}
-
-	.flowdrop-terminal-node__error {
-		position: absolute;
-		top: 1.5rem;
-		right: 0;
-		color: var(--fd-error);
-	}
-
-	:global(.flowdrop-terminal-node__error-icon) {
-		width: 14px;
-		height: 14px;
-	}
-
-	/* Config button positioned at top center */
-	.flowdrop-terminal-node__config-btn {
-		position: absolute;
-		top: -1.5rem;
-		left: 50%;
-		transform: translateX(-50%);
-		width: 1.5rem;
-		height: 1.5rem;
-		background-color: var(--fd-backdrop);
-		border: 1px solid var(--fd-border);
-		border-radius: 50%;
-		color: var(--fd-muted-foreground);
-		cursor: pointer;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		opacity: 0;
-		transition: all var(--fd-transition-normal);
-		backdrop-filter: var(--fd-backdrop-blur);
-		z-index: 15;
-		font-size: var(--fd-text-xs);
-		box-shadow: var(--fd-shadow-sm);
-	}
-
-	.flowdrop-terminal-node:hover .flowdrop-terminal-node__config-btn {
-		opacity: 1;
-	}
-
-	.flowdrop-terminal-node__config-btn:hover {
-		background-color: var(--fd-muted);
-		border-color: var(--fd-border-strong);
-		color: var(--fd-foreground);
-		transform: translateX(-50%) scale(1.1);
-	}
-
-	@keyframes spin {
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	/* Handle styles - positioned along circle arc using cos/sin */
-	:global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle) {
-		width: 16px !important;
-		height: 16px !important;
-		border-radius: 50% !important;
-		border: none !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:hover) {
-		transform: translate(-50%, -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 */
-	:global(.svelte-flow__node-terminal .svelte-flow__handle) {
-		z-index: 20 !important;
-		pointer-events: auto !important;
-	}
-
-	:global(.svelte-flow__node-terminal .svelte-flow__handle:hover) {
-		transform: translate(-50%, -50%) scale(1.2) !important;
-	}
+  .flowdrop-terminal-node {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--fd-space-xs);
+    cursor: pointer;
+    transition: all var(--fd-transition-normal);
+    z-index: 10;
+    color: var(--fd-foreground);
+  }
+
+  /* Wrapper for circle and handles - ensures handles are vertically centered to circle */
+  .flowdrop-terminal-node__circle-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .flowdrop-terminal-node__content {
+    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%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--fd-shadow-md);
+    transition: all var(--fd-transition-normal);
+  }
+
+  .flowdrop-terminal-node:hover .flowdrop-terminal-node__content {
+    box-shadow: var(--fd-shadow-lg);
+    transform: scale(1.05);
+  }
+
+  .flowdrop-terminal-node--selected .flowdrop-terminal-node__content {
+    box-shadow:
+      var(--fd-shadow-lg),
+      0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
+    border-color: var(--fd-primary);
+  }
+
+  .flowdrop-terminal-node--selected:hover .flowdrop-terminal-node__content {
+    box-shadow:
+      var(--fd-shadow-lg),
+      0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
+    border-color: var(--fd-primary);
+    transform: scale(1.05);
+  }
+
+  .flowdrop-terminal-node:focus-visible .flowdrop-terminal-node__content {
+    outline: 2px solid var(--fd-ring);
+    outline-offset: 2px;
+  }
+
+  .flowdrop-terminal-node--processing .flowdrop-terminal-node__content {
+    opacity: 0.7;
+  }
+
+  .flowdrop-terminal-node--error .flowdrop-terminal-node__content {
+    border-color: var(--fd-error) !important;
+    background-color: var(--fd-error-muted) !important;
+  }
+
+  /* Variant-specific glow effects */
+  .flowdrop-terminal-node--start .flowdrop-terminal-node__content {
+    box-shadow:
+      0 4px 6px -1px color-mix(in srgb, var(--fd-success) 20%, transparent),
+      0 2px 4px -1px color-mix(in srgb, var(--fd-success) 10%, transparent);
+  }
+
+  .flowdrop-terminal-node--start: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);
+  }
+
+  .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),
+      0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
+  }
+
+  .flowdrop-terminal-node--exit .flowdrop-terminal-node__content {
+    box-shadow:
+      0 4px 6px -1px color-mix(in srgb, var(--fd-error) 20%, transparent),
+      0 2px 4px -1px color-mix(in srgb, var(--fd-error) 10%, transparent);
+  }
+
+  .flowdrop-terminal-node--exit: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);
+  }
+
+  .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),
+      0 0 0 3px color-mix(in srgb, var(--fd-primary) 50%, transparent);
+  }
+
+  /* Squircle icon wrapper - matching WorkflowNode style */
+  .flowdrop-terminal-node__icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 0.625rem;
+    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) var(--fd-node-icon-bg-opacity-hover),
+      transparent
+    );
+  }
+
+  .flowdrop-terminal-node__icon-wrapper :global(.flowdrop-terminal-node__icon) {
+    width: 1.5rem;
+    height: 1.5rem;
+    color: var(--fd-node-icon);
+  }
+
+  .flowdrop-terminal-node__label-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.125rem;
+    background-color: var(--fd-backdrop);
+    padding: var(--fd-space-3xs) var(--fd-space-xs);
+    border-radius: var(--fd-radius-sm);
+    box-shadow: var(--fd-shadow-sm);
+    max-width: 140px;
+  }
+
+  .flowdrop-terminal-node__label {
+    font-size: var(--fd-text-xs);
+    font-weight: 500;
+    color: var(--fd-foreground);
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  .flowdrop-terminal-node__description {
+    font-size: 0.625rem;
+    color: var(--fd-muted-foreground);
+    text-align: center;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+
+  .flowdrop-terminal-node__processing {
+    position: absolute;
+    top: 1.5rem;
+    right: 0;
+  }
+
+  .flowdrop-terminal-node__spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid color-mix(in srgb, var(--fd-foreground) 30%, transparent);
+    border-top: 2px solid var(--terminal-color, var(--fd-muted-foreground));
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+  }
+
+  .flowdrop-terminal-node__error {
+    position: absolute;
+    top: 1.5rem;
+    right: 0;
+    color: var(--fd-error);
+  }
+
+  :global(.flowdrop-terminal-node__error-icon) {
+    width: 14px;
+    height: 14px;
+  }
+
+  /* Config button positioned at top center */
+  .flowdrop-terminal-node__config-btn {
+    position: absolute;
+    top: -1.5rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 1.5rem;
+    height: 1.5rem;
+    background-color: var(--fd-backdrop);
+    border: 1px solid var(--fd-border);
+    border-radius: 50%;
+    color: var(--fd-muted-foreground);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: all var(--fd-transition-normal);
+    backdrop-filter: var(--fd-backdrop-blur);
+    z-index: 15;
+    font-size: var(--fd-text-xs);
+    box-shadow: var(--fd-shadow-sm);
+  }
+
+  .flowdrop-terminal-node:hover .flowdrop-terminal-node__config-btn {
+    opacity: 1;
+  }
+
+  .flowdrop-terminal-node__config-btn:hover {
+    background-color: var(--fd-muted);
+    border-color: var(--fd-border-strong);
+    color: var(--fd-foreground);
+    transform: translateX(-50%) scale(1.1);
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* Handle styles - positioned along circle arc using cos/sin */
+  :global(.flowdrop-terminal-node__circle-wrapper .svelte-flow__handle) {
+    width: 16px !important;
+    height: 16px !important;
+    border-radius: 50% !important;
+    border: none !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:hover) {
+    transform: translate(-50%, -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 */
+  :global(.svelte-flow__node-terminal .svelte-flow__handle) {
+    z-index: 20 !important;
+    pointer-events: auto !important;
+  }
+
+  :global(.svelte-flow__node-terminal .svelte-flow__handle:hover) {
+    transform: translate(-50%, -50%) scale(1.2) !important;
+  }
 </style>