@d34dman/flowdrop 0.0.17 → 0.0.19

package/dist/components/TerminalNode.svelte

@@ -0,0 +1,583 @@
+<!--
+  Terminal Node Component
+  A circular node for workflow terminal points (start, end, exit/abort)
+  Configurable via metadata to display different variants:
+  - start: Green with play icon, output-only
+  - end: Gray with stop icon, input-only  
+  - exit: Red with X icon, input-only (for abort/error exits)
+  Styled with BEM syntax
+-->
+
+<script lang="ts">
+	import { Position, Handle } from '@xyflow/svelte';
+	import type { ConfigValues, NodeMetadata } from '../types/index.js';
+	import Icon from '@iconify/svelte';
+	import { getDataTypeColor } from '../utils/colors.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: '#10b981',
+			label: 'Start',
+			hasInputs: false,
+			hasOutputs: true
+		},
+		end: {
+			icon: 'mdi:stop-circle',
+			color: '#6b7280',
+			label: 'End',
+			hasInputs: true,
+			hasOutputs: false
+		},
+		exit: {
+			icon: 'mdi:close-circle',
+			color: '#ef4444',
+			label: 'Exit',
+			hasInputs: true,
+			hasOutputs: false
+		}
+	};
+
+	const props = $props<{
+		data: {
+			label: string;
+			config: ConfigValues;
+			metadata: NodeMetadata;
+			nodeId?: string;
+			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 icon - prioritize metadata/config over variant default
+	 */
+	let terminalIcon = $derived(
+		(props.data.metadata?.icon as string) ||
+			(props.data.config?.icon as string) ||
+			variantConfig.icon
+	);
+
+	/**
+	 * Get color - prioritize metadata/config over variant default
+	 */
+	let terminalColor = $derived(
+		(props.data.metadata?.color as string) ||
+			(props.data.config?.color as string) ||
+			variantConfig.color
+	);
+
+	/**
+	 * Get display label
+	 */
+	let displayLabel = $derived(props.data.label || props.data.metadata?.name || variantConfig.label);
+
+	/**
+	 * 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]
+				: []
+	);
+
+	/**
+	 * Determine if we should show inputs based on ports
+	 */
+	let showInputs = $derived(inputPorts.length > 0);
+
+	/**
+	 * Determine if we should show outputs based on ports
+	 */
+	let showOutputs = $derived(outputPorts.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: {displayLabel}"
+>
+	<!-- 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 inputPorts as port (port.id)}
+				<Handle
+					type="target"
+					position={Position.Left}
+					style="background-color: {getDataTypeColor(
+						port.dataType
+					)}; border-color: #ffffff; top: 50%; transform: translateY(-50%); z-index: 30;"
+					id={`${props.data.nodeId}-input-${port.id}`}
+				/>
+			{/each}
+		{/if}
+
+		<!-- Circular content with icon -->
+		<div class="flowdrop-terminal-node__content">
+			<Icon
+				icon={terminalIcon}
+				class="flowdrop-terminal-node__icon"
+				style="color: {terminalColor}; font-size: 2.5rem;"
+			/>
+		</div>
+
+		<!-- Output Handles (for start variant) -->
+		{#if showOutputs}
+			{#each outputPorts as port (port.id)}
+				<Handle
+					type="source"
+					position={Position.Right}
+					id={`${props.data.nodeId}-output-${port.id}`}
+					style="background-color: {getDataTypeColor(
+						port.dataType
+					)}; border-color: #ffffff; top: 50%; transform: translateY(-50%); z-index: 30;"
+				/>
+			{/each}
+		{/if}
+	</div>
+
+	<!-- Label below the circle -->
+	<div class="flowdrop-terminal-node__label">
+		{displayLabel}
+	</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: 0.5rem;
+		cursor: pointer;
+		transition: all 0.2s ease-in-out;
+		z-index: 10;
+	}
+
+	/* 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: 72px;
+		height: 72px;
+		background-color: #ffffff;
+		border: 3px solid var(--terminal-color, #6b7280);
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		box-shadow:
+			0 4px 6px -1px rgba(0, 0, 0, 0.1),
+			0 2px 4px -1px rgba(0, 0, 0, 0.06);
+		transition: all 0.2s ease-in-out;
+	}
+
+	.flowdrop-terminal-node:hover .flowdrop-terminal-node__content {
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		transform: scale(1.05);
+	}
+
+	.flowdrop-terminal-node--selected .flowdrop-terminal-node__content {
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 0 0 3px rgba(59, 130, 246, 0.5);
+		border-color: #3b82f6;
+	}
+
+	.flowdrop-terminal-node--processing .flowdrop-terminal-node__content {
+		opacity: 0.7;
+	}
+
+	.flowdrop-terminal-node--error .flowdrop-terminal-node__content {
+		border-color: #ef4444 !important;
+		background-color: #fef2f2 !important;
+	}
+
+	/* Variant-specific glow effects */
+	.flowdrop-terminal-node--start .flowdrop-terminal-node__content {
+		box-shadow:
+			0 4px 6px -1px rgba(16, 185, 129, 0.2),
+			0 2px 4px -1px rgba(16, 185, 129, 0.1);
+	}
+
+	.flowdrop-terminal-node--start:hover .flowdrop-terminal-node__content {
+		box-shadow:
+			0 10px 15px -3px rgba(16, 185, 129, 0.3),
+			0 4px 6px -2px rgba(16, 185, 129, 0.15);
+	}
+
+	.flowdrop-terminal-node--exit .flowdrop-terminal-node__content {
+		box-shadow:
+			0 4px 6px -1px rgba(239, 68, 68, 0.2),
+			0 2px 4px -1px rgba(239, 68, 68, 0.1);
+	}
+
+	.flowdrop-terminal-node--exit:hover .flowdrop-terminal-node__content {
+		box-shadow:
+			0 10px 15px -3px rgba(239, 68, 68, 0.3),
+			0 4px 6px -2px rgba(239, 68, 68, 0.15);
+	}
+
+	:global(.flowdrop-terminal-node__icon) {
+		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
+	}
+
+	.flowdrop-terminal-node__label {
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: #374151;
+		text-align: center;
+		max-width: 100px;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		background-color: rgba(255, 255, 255, 0.9);
+		padding: 0.125rem 0.5rem;
+		border-radius: 0.25rem;
+		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+	}
+
+	.flowdrop-terminal-node__processing {
+		position: absolute;
+		top: 1.5rem;
+		right: 0;
+	}
+
+	.flowdrop-terminal-node__spinner {
+		width: 14px;
+		height: 14px;
+		border: 2px solid rgba(255, 255, 255, 0.3);
+		border-top: 2px solid var(--terminal-color, #6b7280);
+		border-radius: 50%;
+		animation: spin 1s linear infinite;
+	}
+
+	.flowdrop-terminal-node__error {
+		position: absolute;
+		top: 1.5rem;
+		right: 0;
+		color: #ef4444;
+	}
+
+	: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: rgba(255, 255, 255, 0.95);
+		border: 1px solid #e5e7eb;
+		border-radius: 50%;
+		color: #6b7280;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		opacity: 0;
+		transition: all 0.2s ease-in-out;
+		backdrop-filter: blur(4px);
+		z-index: 15;
+		font-size: 0.75rem;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+	}
+
+	.flowdrop-terminal-node:hover .flowdrop-terminal-node__config-btn {
+		opacity: 1;
+	}
+
+	.flowdrop-terminal-node__config-btn:hover {
+		background-color: #f9fafb;
+		border-color: #d1d5db;
+		color: #374151;
+		transform: translateX(-50%) scale(1.1);
+	}
+
+	@keyframes spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	/* 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 #ffffff !important;
+		transition: all 0.2s ease-in-out !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 #3b82f6 !important;
+		outline-offset: 2px !important;
+	}
+
+	/* Also keep node-level handle styles for fallback */
+	:global(.svelte-flow__node-terminal .svelte-flow__handle) {
+		width: 16px !important;
+		height: 16px !important;
+		border-radius: 50% !important;
+		border: 2px solid #ffffff !important;
+		transition: all 0.2s ease-in-out !important;
+		cursor: pointer !important;
+		z-index: 20 !important;
+		pointer-events: auto !important;
+	}
+
+	:global(.svelte-flow__node-terminal .svelte-flow__handle-left) {
+		left: -8px !important;
+	}
+
+	:global(.svelte-flow__node-terminal .svelte-flow__handle-right) {
+		right: -8px !important;
+	}
+
+	: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 #3b82f6 !important;
+		outline-offset: 2px !important;
+	}
+</style>

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

@@ -0,0 +1,24 @@
+import type { ConfigValues, NodeMetadata } from '../types/index.js';
+type $$ComponentProps = {
+    data: {
+        label: string;
+        config: ConfigValues;
+        metadata: NodeMetadata;
+        nodeId?: string;
+        onConfigOpen?: (node: {
+            id: string;
+            type: string;
+            data: {
+                label: string;
+                config: ConfigValues;
+                metadata: NodeMetadata;
+            };
+        }) => void;
+    };
+    selected?: boolean;
+    isProcessing?: boolean;
+    isError?: boolean;
+};
+declare const TerminalNode: import("svelte").Component<$$ComponentProps, {}, "">;
+type TerminalNode = ReturnType<typeof TerminalNode>;
+export default TerminalNode;

package/dist/components/UniversalNode.svelte

@@ -15,15 +15,6 @@
 	import { shouldShowNodeStatus } from '../utils/nodeWrapper.js';
 	import { resolveComponentName } from '../utils/nodeTypes.js';
 
-	// Fallback components for when registry is not available
-	// These are only used as last-resort fallbacks
-	import WorkflowNodeComponent from './WorkflowNode.svelte';
-	import NotesNode from './NotesNode.svelte';
-	import SimpleNode from './SimpleNode.svelte';
-	import SquareNode from './SquareNode.svelte';
-	import ToolNode from './ToolNode.svelte';
-	import GatewayNode from './GatewayNode.svelte';
-
 	let {
 		data,
 		selected = false
@@ -52,7 +43,6 @@
 
 	/**
 	 * Get the node component from the registry.
-	 * Falls back to built-in components if registry lookup fails.
 	 */
 	let nodeComponent = $derived(getNodeComponent(resolvedComponentName));
 
@@ -70,8 +60,7 @@
 	);
 
 	/**
-	 * Get the node component for the given type.
-	 * First tries the registry, then falls back to hardcoded components.
+	 * Get the node component for the given type from the registry.
 	 *
 	 * @param nodeType - The node type identifier
 	 * @returns The Svelte component to render
@@ -80,29 +69,14 @@
 		// Resolve any aliases (e.g., "default" -> "workflowNode")
 		const resolvedType = resolveBuiltinAlias(nodeType);
 
-		// Try registry first
-		const registeredComponent = nodeComponentRegistry.getComponent(resolvedType);
-		if (registeredComponent) {
-			return registeredComponent;
+		// Get component from registry (defaults to workflowNode if not found)
+		const component = nodeComponentRegistry.getComponent(resolvedType);
+		if (component) {
+			return component;
 		}
 
-		// Fallback to hardcoded switch for backwards compatibility
-		// This ensures the component works even if registry fails to initialize
-		switch (resolvedType) {
-			case 'note':
-				return NotesNode;
-			case 'simple':
-				return SimpleNode;
-			case 'square':
-				return SquareNode;
-			case 'tool':
-				return ToolNode;
-			case 'gateway':
-				return GatewayNode;
-			case 'workflowNode':
-			default:
-				return WorkflowNodeComponent;
-		}
+		// Return the default component from registry
+		return nodeComponentRegistry.getComponent('workflowNode');
 	}
 
 	/**

package/dist/components/WorkflowEditor.svelte

@@ -244,16 +244,8 @@
 
 	// Node types for Svelte Flow - using UniversalNode for all node types
 	// All nodes use 'universalNode' type, and UniversalNode handles internal switching
-	// Include legacy types for backward compatibility with existing workflows
 	const nodeTypes = {
-		universalNode: UniversalNode,
-		// Legacy types for backward compatibility
-		workflowNode: UniversalNode,
-		note: UniversalNode,
-		simple: UniversalNode,
-		square: UniversalNode,
-		tool: UniversalNode,
-		gateway: UniversalNode
+		universalNode: UniversalNode
 	};
 
 	// Handle arrows in our custom connection handler

package/dist/helpers/workflowEditorHelper.d.ts

@@ -24,10 +24,10 @@ export declare class EdgeStylingHelper {
     /**
      * Extract the port ID from a handle ID
      * Supports two formats:
-     * 1. New format: "${nodeId}-output-${portId}" or "${nodeId}-input-${portId}"
-     * 2. Legacy format: just the portId (e.g., "text", "trigger")
+     * 1. Standard format: "${nodeId}-output-${portId}" or "${nodeId}-input-${portId}"
+     * 2. Short format: just the portId (e.g., "text", "trigger")
      * @param handleId - The handle ID string (e.g., "sample-node.1-output-trigger" or "trigger")
-     * @returns The port ID (e.g., "trigger") or the handleId itself for legacy format
+     * @returns The port ID (e.g., "trigger") or the handleId itself for short format
      */
     static extractPortIdFromHandle(handleId: string | undefined): string | null;
     /**