@d34dman/flowdrop 0.0.17 → 0.0.18

package/README.md

@@ -272,6 +272,48 @@ Override CSS custom properties:
 
 ### Node Types
 
+FlowDrop includes 7 built-in visual node types that control how nodes are rendered:
+
+| Type       | Description                                             | Use Case                 |
+| ---------- | ------------------------------------------------------- | ------------------------ |
+| `default`  | Full-featured workflow node with inputs/outputs display | Standard nodes           |
+| `simple`   | Compact layout with header, icon, and description       | Space-efficient nodes    |
+| `square`   | Minimal square node showing only an icon                | Icon-only representation |
+| `tool`     | Specialized node for agent tools with tool metadata     | AI agent tools           |
+| `gateway`  | Branching control flow with multiple output branches    | Conditional logic        |
+| `terminal` | Circular node for workflow start/end/exit points        | Workflow boundaries      |
+| `note`     | Documentation note with markdown support                | Comments/documentation   |
+
+#### Terminal Nodes
+
+Terminal nodes are special circular nodes for workflow boundaries:
+
+```typescript
+// Start node - output only
+const startNode: NodeMetadata = {
+	id: 'workflow-start',
+	name: 'Start',
+	type: 'terminal',
+	tags: ['start'],
+	inputs: [],
+	outputs: [{ id: 'trigger', name: 'Go', type: 'output', dataType: 'trigger' }]
+};
+
+// End node - input only
+const endNode: NodeMetadata = {
+	id: 'workflow-end',
+	name: 'End',
+	type: 'terminal',
+	tags: ['end'],
+	inputs: [{ id: 'done', name: 'Done', type: 'input', dataType: 'trigger' }],
+	outputs: []
+};
+```
+
+Terminal variants are auto-detected from `id`, `name`, or `tags` containing: `start`, `end`, `exit`, `abort`, `entry`, `finish`, `complete`.
+
+#### Custom Node Types
+
 Define custom node types:
 
 ```typescript

package/dist/components/TerminalNode.svelte

@@ -0,0 +1,565 @@
+<!--
+  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 { NodeConfig, 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: NodeConfig;
+			metadata: NodeMetadata;
+			nodeId?: string;
+			onConfigOpen?: (node: {
+				id: string;
+				type: string;
+				data: { label: string; config: NodeConfig; 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 { NodeConfig, NodeMetadata } from "../types/index.js";
+type $$ComponentProps = {
+    data: {
+        label: string;
+        config: NodeConfig;
+        metadata: NodeMetadata;
+        nodeId?: string;
+        onConfigOpen?: (node: {
+            id: string;
+            type: string;
+            data: {
+                label: string;
+                config: NodeConfig;
+                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/registry/builtinNodes.d.ts

@@ -70,7 +70,7 @@ export declare function getBuiltinTypes(): string[];
  * Type for built-in node types.
  * Use this when you specifically need a built-in type.
  */
-export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'tool' | 'gateway' | 'note';
+export type BuiltinNodeType = 'workflowNode' | 'simple' | 'square' | 'tool' | 'gateway' | 'note' | 'terminal';
 /**
  * Array of built-in type strings for runtime validation.
  */

package/dist/registry/builtinNodes.js

@@ -12,6 +12,7 @@ import SquareNode from '../components/SquareNode.svelte';
 import ToolNode from '../components/ToolNode.svelte';
 import GatewayNode from '../components/GatewayNode.svelte';
 import NotesNode from '../components/NotesNode.svelte';
+import TerminalNode from '../components/TerminalNode.svelte';
 /**
  * Source identifier for built-in FlowDrop components
  */
@@ -86,6 +87,17 @@ export const BUILTIN_NODE_COMPONENTS = [
         source: FLOWDROP_SOURCE,
         statusPosition: 'bottom-right',
         statusSize: 'sm'
+    },
+    {
+        type: 'terminal',
+        displayName: 'Terminal (Start/End/Exit)',
+        description: 'Circular terminal node for workflow start, end, or exit points',
+        component: TerminalNode,
+        icon: 'mdi:circle-double',
+        category: 'functional',
+        source: FLOWDROP_SOURCE,
+        statusPosition: 'top-right',
+        statusSize: 'sm'
     }
 ];
 /**
@@ -175,7 +187,8 @@ export const BUILTIN_NODE_TYPES = [
     'square',
     'tool',
     'gateway',
-    'note'
+    'note',
+    'terminal'
 ];
 // Auto-register built-ins when this module is imported
 registerBuiltinNodes();

package/dist/types/index.d.ts

@@ -74,12 +74,12 @@ export interface NodePort {
  * Built-in node types for explicit component rendering.
  * These are the node types that ship with FlowDrop.
  */
-export type BuiltinNodeType = 'note' | 'simple' | 'square' | 'tool' | 'gateway' | 'default';
+export type BuiltinNodeType = 'note' | 'simple' | 'square' | 'tool' | 'gateway' | 'terminal' | 'default';
 /**
  * Node type for component rendering.
  * Includes built-in types and allows custom registered types.
  *
- * Built-in types: note, simple, square, tool, gateway, default
+ * Built-in types: note, simple, square, tool, gateway, terminal, default
  * Custom types: Any string registered via nodeComponentRegistry
  *
  * @example

package/dist/utils/nodeTypes.js

@@ -21,6 +21,7 @@ const NODE_TYPE_TO_COMPONENT_MAP = {
     square: 'square',
     tool: 'tool',
     gateway: 'gateway',
+    terminal: 'terminal',
     default: 'workflowNode'
 };
 /**
@@ -32,6 +33,7 @@ const TYPE_DISPLAY_NAMES = {
     square: 'Square (geometric layout)',
     tool: 'Tool (specialized for agent tools)',
     gateway: 'Gateway (branching control flow)',
+    terminal: 'Terminal (start/end/exit)',
     default: 'Default (standard workflow node)'
 };
 /**

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.17",
+	"version": "0.0.18",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",