@d34dman/flowdrop 0.0.15 → 0.0.17

package/dist/components/App.svelte

@@ -17,24 +17,44 @@
 	import { sampleNodes } from '../data/samples.js';
 	import { createEndpointConfig } from '../config/endpoints.js';
 	import type { EndpointConfig } from '../config/endpoints.js';
-	import { workflowStore, workflowActions, workflowName } from '../stores/workflowStore.js';
+	import type { AuthProvider } from '../types/auth.js';
+	import type { FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';
+	import { mergeFeatures } from '../types/events.js';
+	import {
+		workflowStore,
+		workflowActions,
+		workflowName,
+		markAsSaved
+	} from '../stores/workflowStore.js';
 	import { apiToasts, dismissToast } from '../services/toastService.js';
 
-	// Configuration props for runtime customization
+	/**
+	 * Configuration props for runtime customization
+	 */
 	interface Props {
+		/** Initial workflow to load */
 		workflow?: Workflow;
+		/** Pre-loaded node types (if provided, skips API fetch) */
+		nodes?: NodeMetadata[];
+		/** Editor height */
 		height?: string | number;
+		/** Editor width */
 		width?: string | number;
+		/** Show the navbar */
 		showNavbar?: boolean;
-		// New configuration options for pipeline status mode
+		/** Disable the node sidebar */
 		disableSidebar?: boolean;
+		/** Lock the workflow (prevent changes) */
 		lockWorkflow?: boolean;
+		/** Read-only mode */
 		readOnly?: boolean;
+		/** Node execution statuses */
 		nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
-		// Pipeline ID for fetching node execution info from jobs
+		/** Pipeline ID for fetching node execution info */
 		pipelineId?: string;
-		// Navbar customization
+		/** Custom navbar title */
 		navbarTitle?: string;
+		/** Custom navbar actions */
 		navbarActions?: Array<{
 			label: string;
 			href: string;
@@ -42,13 +62,21 @@
 			variant?: 'primary' | 'secondary' | 'outline';
 			onclick?: (event: Event) => void;
 		}>;
-		// API configuration - optional, defaults to '/api/flowdrop'
+		/** API base URL */
 		apiBaseUrl?: string;
+		/** Endpoint configuration */
 		endpointConfig?: EndpointConfig;
+		/** Authentication provider */
+		authProvider?: AuthProvider;
+		/** Event handlers */
+		eventHandlers?: FlowDropEventHandlers;
+		/** Feature configuration */
+		features?: FlowDropFeatures;
 	}
 
 	let {
 		workflow: initialWorkflow,
+		nodes: propNodes,
 		height = '100vh',
 		width = '100%',
 		showNavbar = false,
@@ -60,9 +88,15 @@
 		navbarTitle,
 		navbarActions = [],
 		apiBaseUrl,
-		endpointConfig: propEndpointConfig
+		endpointConfig: propEndpointConfig,
+		authProvider,
+		eventHandlers,
+		features: propFeatures
 	}: Props = $props();
 
+	// Merge features with defaults
+	const features = mergeFeatures(propFeatures);
+
 	// Create breadcrumb-style title - at top level to avoid store subscription issues
 	let breadcrumbTitle = $derived(() => {
 		// Use custom navbar title if provided
@@ -129,10 +163,19 @@
 
 	/**
 	 * Fetch node types from the server
+	 *
+	 * If propNodes is provided, uses those instead of fetching from API.
+	 * This fixes the bug where propNodes was ignored.
 	 */
 	async function fetchNodeTypes(): Promise<void> {
-		// Show loading toast
-		const loadingToast = apiToasts.loading('Loading node types');
+		// If nodes were provided as props, use them directly (skip API fetch)
+		if (propNodes && propNodes.length > 0) {
+			nodes = propNodes;
+			return;
+		}
+
+		// Show loading toast (if toasts are enabled)
+		const loadingToast = features.showToasts ? apiToasts.loading('Loading node types') : null;
 		try {
 			error = null;
 
@@ -142,13 +185,35 @@
 			error = null;
 
 			// Dismiss loading toast
-			dismissToast(loadingToast);
+			if (loadingToast) {
+				dismissToast(loadingToast);
+			}
 		} catch (err) {
 			// Dismiss loading toast and show error toast
-			dismissToast(loadingToast);
+			if (loadingToast) {
+				dismissToast(loadingToast);
+			}
+
+			const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+
+			// Notify parent via event handler
+			if (eventHandlers?.onApiError) {
+				const suppressToast = eventHandlers.onApiError(
+					err instanceof Error ? err : new Error(errorMessage),
+					'fetchNodes'
+				);
+				if (suppressToast) {
+					// Parent handled the error, don't show default toast
+					nodes = sampleNodes;
+					return;
+				}
+			}
+
 			// Show error but don't block the UI
-			error = `API Error: ${err instanceof Error ? err.message : 'Unknown error'}. Using sample data.`;
-			apiToasts.error('Load node types', err instanceof Error ? err.message : 'Unknown error');
+			error = `API Error: ${errorMessage}. Using sample data.`;
+			if (features.showToasts) {
+				apiToasts.error('Load node types', errorMessage);
+			}
 
 			// Fallback to sample data
 			nodes = sampleNodes;
@@ -283,27 +348,37 @@
 
 	/**
 	 * Save workflow - exposed API function
+	 *
+	 * Integrates with event handlers for enterprise customization.
 	 */
 	async function saveWorkflow(): Promise<void> {
 		// Wait for any pending DOM updates before saving
 		await tick();
 
-		// Show loading toast
-		const loadingToast = apiToasts.loading('Saving workflow');
+		// Use current workflow from global store
+		const workflowToSave = $workflowStore;
+
+		if (!workflowToSave) {
+			return;
+		}
+
+		// Call onBeforeSave if provided - allows cancellation
+		if (eventHandlers?.onBeforeSave) {
+			const shouldContinue = await eventHandlers.onBeforeSave(workflowToSave);
+			if (shouldContinue === false) {
+				// Save cancelled by event handler
+				return;
+			}
+		}
+
+		// Show loading toast (if enabled)
+		const loadingToast = features.showToasts ? apiToasts.loading('Saving workflow') : null;
 
 		try {
 			// Import necessary modules
 			const { workflowApi } = await import('../services/api.js');
 			const { v4: uuidv4 } = await import('uuid');
 
-			// Use current workflow from global store
-			const workflowToSave = $workflowStore;
-
-			if (!workflowToSave) {
-				dismissToast(loadingToast);
-				return;
-			}
-
 			// Determine the workflow ID
 			let workflowId: string;
 			if (workflowToSave.id) {
@@ -313,7 +388,7 @@
 			}
 
 			// Create workflow object for saving
-			const finalWorkflow = {
+			const finalWorkflow: Workflow = {
 				id: workflowId,
 				name: workflowToSave.name || 'Untitled Workflow',
 				description: workflowToSave.description || '',
@@ -342,14 +417,45 @@
 				});
 			}
 
+			// Mark as saved (clears dirty state)
+			markAsSaved();
+
 			// Dismiss loading toast and show success
-			dismissToast(loadingToast);
-			apiToasts.success('Save workflow', 'Workflow saved successfully');
+			if (loadingToast) {
+				dismissToast(loadingToast);
+			}
+			if (features.showToasts) {
+				apiToasts.success('Save workflow', 'Workflow saved successfully');
+			}
+
+			// Call onAfterSave if provided
+			if (eventHandlers?.onAfterSave) {
+				await eventHandlers.onAfterSave(savedWorkflow);
+			}
 		} catch (error) {
-			// Dismiss loading toast and show error
-			dismissToast(loadingToast);
-			const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
-			apiToasts.error('Save workflow', errorMessage);
+			// Dismiss loading toast
+			if (loadingToast) {
+				dismissToast(loadingToast);
+			}
+
+			const errorObj = error instanceof Error ? error : new Error('Unknown error occurred');
+
+			// Call onSaveError if provided
+			if (eventHandlers?.onSaveError && workflowToSave) {
+				await eventHandlers.onSaveError(errorObj, workflowToSave);
+			}
+
+			// Check if parent wants to handle API errors
+			let suppressToast = false;
+			if (eventHandlers?.onApiError) {
+				suppressToast = eventHandlers.onApiError(errorObj, 'save') === true;
+			}
+
+			// Show error toast if not suppressed
+			if (features.showToasts && !suppressToast) {
+				apiToasts.error('Save workflow', errorObj.message);
+			}
+
 			throw error; // Re-throw to allow calling code to handle if needed
 		}
 	}
@@ -398,9 +504,7 @@
 
 	// Expose save and export functions globally for external access
 	if (typeof window !== 'undefined') {
-		// @ts-expect-error - Adding to window for external access
 		window.flowdropSave = saveWorkflow;
-		// @ts-expect-error - Adding to window for external access
 		window.flowdropExport = exportWorkflow;
 	}
 
@@ -425,6 +529,11 @@
 			// Initialize the workflow store if we have an initial workflow
 			if (initialWorkflow) {
 				workflowActions.initialize(initialWorkflow);
+
+				// Emit onWorkflowLoad event
+				if (eventHandlers?.onWorkflowLoad) {
+					eventHandlers.onWorkflowLoad(initialWorkflow);
+				}
 			}
 		})();
 
@@ -635,7 +744,10 @@
 									<div class="flowdrop-config-sidebar__detail">
 										<span class="flowdrop-config-sidebar__detail-label">Node ID:</span>
 										<div class="flowdrop-config-sidebar__detail-value-with-copy">
-											<span class="flowdrop-config-sidebar__detail-value" style="font-family: monospace;">
+											<span
+												class="flowdrop-config-sidebar__detail-value"
+												style="font-family: monospace;"
+											>
 												{selectedNodeForConfig().id}
 											</span>
 											<button

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

@@ -1,16 +1,34 @@
-import type { Workflow } from '../types/index.js';
+import type { NodeMetadata, Workflow } from '../types/index.js';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from '../types/auth.js';
+import type { FlowDropEventHandlers, FlowDropFeatures } from '../types/events.js';
+/**
+ * Configuration props for runtime customization
+ */
 interface Props {
+    /** Initial workflow to load */
     workflow?: Workflow;
+    /** Pre-loaded node types (if provided, skips API fetch) */
+    nodes?: NodeMetadata[];
+    /** Editor height */
     height?: string | number;
+    /** Editor width */
     width?: string | number;
+    /** Show the navbar */
     showNavbar?: boolean;
+    /** Disable the node sidebar */
     disableSidebar?: boolean;
+    /** Lock the workflow (prevent changes) */
     lockWorkflow?: boolean;
+    /** Read-only mode */
     readOnly?: boolean;
+    /** Node execution statuses */
     nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
+    /** Pipeline ID for fetching node execution info */
     pipelineId?: string;
+    /** Custom navbar title */
     navbarTitle?: string;
+    /** Custom navbar actions */
     navbarActions?: Array<{
         label: string;
         href: string;
@@ -18,8 +36,16 @@ interface Props {
         variant?: 'primary' | 'secondary' | 'outline';
         onclick?: (event: Event) => void;
     }>;
+    /** API base URL */
     apiBaseUrl?: string;
+    /** Endpoint configuration */
     endpointConfig?: EndpointConfig;
+    /** Authentication provider */
+    authProvider?: AuthProvider;
+    /** Event handlers */
+    eventHandlers?: FlowDropEventHandlers;
+    /** Feature configuration */
+    features?: FlowDropFeatures;
 }
 declare const App: import("svelte").Component<Props, {}, "">;
 type App = ReturnType<typeof App>;

package/dist/components/FlowDropZone.svelte

@@ -5,8 +5,8 @@
 -->
 
 <script lang="ts">
-	import { useSvelteFlow } from "@xyflow/svelte";
-	import type { Snippet } from "svelte";
+	import { useSvelteFlow } from '@xyflow/svelte';
+	import type { Snippet } from 'svelte';
 
 	interface Props {
 		ondrop: (nodeTypeData: string, position: { x: number; y: number }) => void;
@@ -24,7 +24,7 @@
 	function handleDragOver(e: DragEvent): void {
 		e.preventDefault();
 		if (e.dataTransfer) {
-			e.dataTransfer.dropEffect = "copy";
+			e.dataTransfer.dropEffect = 'copy';
 		}
 	}
 
@@ -35,7 +35,7 @@
 		e.preventDefault();
 
 		// Get the data from the drag event
-		const nodeTypeData = e.dataTransfer?.getData("application/json");
+		const nodeTypeData = e.dataTransfer?.getData('application/json');
 		if (nodeTypeData) {
 			// Convert screen coordinates to flow coordinates (accounts for zoom and pan)
 			const position = screenToFlowPosition({
@@ -65,4 +65,3 @@
 		height: 100%;
 	}
 </style>
-

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

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import type { Snippet } from 'svelte';
 interface Props {
     ondrop: (nodeTypeData: string, position: {
         x: number;

package/dist/components/UniversalNode.svelte

@@ -1,24 +1,28 @@
 <!--
   Universal Node Component
-  Renders any node type with automatic status overlay injection
-  This component can replace individual node components in SvelteFlow
+  Renders any node type with automatic status overlay injection.
+  This component can replace individual node components in SvelteFlow.
+
+  Uses the node component registry to resolve which component to render,
+  enabling custom node types to be registered and used dynamically.
 -->
 
 <script lang="ts">
 	import type { WorkflowNode } from '../types/index.js';
+	import { nodeComponentRegistry } from '../registry/nodeComponentRegistry.js';
+	import { resolveBuiltinAlias } from '../registry/builtinNodes.js';
+	import NodeStatusOverlay from './NodeStatusOverlay.svelte';
+	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';
-	import NodeStatusOverlay from './NodeStatusOverlay.svelte';
-	import {
-		shouldShowNodeStatus,
-		getOptimalStatusPosition,
-		getOptimalStatusSize
-	} from '../utils/nodeWrapper.js';
-	import { resolveComponentName } from '../utils/nodeTypes.js';
 
 	let {
 		data,
@@ -31,26 +35,60 @@
 		selected?: boolean;
 	} = $props();
 
-	// Determine which node component to render based on node type
-	// Priority: config.nodeType > metadata.type
-	// Explicitly track config.nodeType to ensure reactivity
+	/**
+	 * Determine which node component to render based on node type.
+	 * Priority: config.nodeType > metadata.type
+	 * Explicitly track config.nodeType to ensure reactivity.
+	 */
 	let configNodeType = $derived(data.config?.nodeType as string | undefined);
+
+	/**
+	 * Resolve the component name from metadata and config.
+	 * This handles the logic of choosing between config.nodeType and metadata.type.
+	 */
 	let resolvedComponentName = $derived(
 		data.metadata ? resolveComponentName(data.metadata, configNodeType) : 'workflowNode'
 	);
+
+	/**
+	 * Get the node component from the registry.
+	 * Falls back to built-in components if registry lookup fails.
+	 */
 	let nodeComponent = $derived(getNodeComponent(resolvedComponentName));
 
-	// Get execution info
+	/**
+	 * Get execution info for status overlay
+	 */
 	let executionInfo = $derived(data.executionInfo);
+
+	/**
+	 * Determine if status overlay should be shown.
+	 * Hide for note nodes as they have their own styling.
+	 */
 	let shouldShowStatus = $derived(
 		shouldShowNodeStatus(executionInfo) && resolvedComponentName !== 'note'
 	);
 
 	/**
-	 * Get the appropriate node component based on type
+	 * Get the node component for the given type.
+	 * First tries the registry, then falls back to hardcoded components.
+	 *
+	 * @param nodeType - The node type identifier
+	 * @returns The Svelte component to render
 	 */
 	function getNodeComponent(nodeType: string) {
-		switch (nodeType) {
+		// Resolve any aliases (e.g., "default" -> "workflowNode")
+		const resolvedType = resolveBuiltinAlias(nodeType);
+
+		// Try registry first
+		const registeredComponent = nodeComponentRegistry.getComponent(resolvedType);
+		if (registeredComponent) {
+			return registeredComponent;
+		}
+
+		// 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':
@@ -68,40 +106,62 @@
 	}
 
 	/**
-	 * Get optimal status position for this node type
+	 * Get optimal status position for this node type.
+	 * Uses registry if available, otherwise falls back to defaults.
 	 */
 	function getStatusPosition(): 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' {
-		return getOptimalStatusPosition(resolvedComponentName);
+		// Try registry first
+		const position = nodeComponentRegistry.getStatusPosition(resolvedComponentName);
+		if (position) {
+			return position;
+		}
+
+		// Fallback based on node type
+		switch (resolvedComponentName) {
+			case 'tool':
+				return 'top-left';
+			case 'note':
+				return 'bottom-right';
+			case 'simple':
+			case 'square':
+			default:
+				return 'top-right';
+		}
 	}
 
 	/**
-	 * Get optimal status size for this node type
+	 * Get optimal status size for this node type.
+	 * Uses registry if available, otherwise falls back to defaults.
 	 */
 	function getStatusSize(): 'sm' | 'md' | 'lg' {
-		return getOptimalStatusSize(resolvedComponentName);
+		// Try registry first
+		const size = nodeComponentRegistry.getStatusSize(resolvedComponentName);
+		if (size) {
+			return size;
+		}
+
+		// Fallback based on node type
+		switch (resolvedComponentName) {
+			case 'tool':
+			case 'note':
+			case 'square':
+				return 'sm';
+			case 'simple':
+			default:
+				return 'md';
+		}
 	}
 </script>
 
 <div class="universal-node">
-	<!-- Render the appropriate node component -->
-	{#if nodeComponent === WorkflowNodeComponent}
-		<WorkflowNodeComponent {data} {selected} />
-	{:else if nodeComponent === NotesNode}
-		<NotesNode {data} {selected} />
-	{:else if nodeComponent === SimpleNode}
-		<SimpleNode {data} {selected} />
-	{:else if nodeComponent === SquareNode}
-		<SquareNode {data} {selected} />
-	{:else if nodeComponent === ToolNode}
-		<ToolNode {data} {selected} />
-	{:else if nodeComponent === GatewayNode}
-		<GatewayNode {data} {selected} />
-	{/if}
+	<!-- Render the node component dynamically -->
+	<!-- svelte-ignore binding_property_non_reactive -->
+	<svelte:component this={nodeComponent} {data} {selected} />
 
 	<!-- Status overlay - only show if there's meaningful status information -->
 	{#if shouldShowStatus}
 		<NodeStatusOverlay
-			nodeId={data.nodeId || 'unknown'}
+			nodeId={data.nodeId ?? 'unknown'}
 			{executionInfo}
 			position={getStatusPosition()}
 			size={getStatusSize()}

package/dist/components/WorkflowEditor.svelte

@@ -80,14 +80,21 @@
 
 	$effect(() => {
 		if (currentWorkflow) {
-			flowNodes = currentWorkflow.nodes.map((node) => ({
+			const nodesWithCallbacks = currentWorkflow.nodes.map((node) => ({
 				...node,
 				data: {
 					...node.data,
 					onConfigOpen: props.openConfigSidebar
 				}
 			}));
-			flowEdges = currentWorkflow.edges;
+			flowNodes = nodesWithCallbacks;
+
+			// Apply edge styling based on source port data type when loading workflow
+			const styledEdges = EdgeStylingHelper.updateEdgeStyles(
+				currentWorkflow.edges,
+				nodesWithCallbacks
+			);
+			flowEdges = styledEdges;
 
 			// Only load execution info if we have a pipelineId (pipeline status mode)
 			// and if the workflow or pipeline has changed
@@ -523,7 +530,60 @@
 		pointer-events: all;
 		cursor: crosshair;
 	}
+
+	/**
+	 * Edge Styling Based on Source Port Data Type
+	 * Uses CSS tokens from base.css for consistent theming
+	 * - Trigger edges: solid dark line (control flow)
+	 * - Tool edges: dashed amber line (tool connections)
+	 * - Data edges: normal gray line (data flow)
+	 */
+
+	/* Trigger Edge: Solid dark line for control flow */
+	:global(.flowdrop--edge--trigger path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-trigger-color);
+		stroke-width: var(--flowdrop-edge-trigger-width);
+	}
+
+	:global(.flowdrop--edge--trigger:hover path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-trigger-color-hover);
+		stroke-width: var(--flowdrop-edge-trigger-width-hover);
+	}
+
+	:global(.flowdrop--edge--trigger.selected path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-trigger-color-selected);
+		stroke-width: var(--flowdrop-edge-trigger-width-hover);
+	}
+
+	/* Tool Edge: Dashed amber line for tool connections */
 	:global(.flowdrop--edge--tool path.svelte-flow__edge-path) {
-		stroke-dasharray: 5 5;
+		stroke: var(--flowdrop-edge-tool-color);
+		stroke-dasharray: 5 3;
+	}
+
+	:global(.flowdrop--edge--tool:hover path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-tool-color-hover);
+		stroke-width: 2;
+	}
+
+	:global(.flowdrop--edge--tool.selected path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-tool-color-selected);
+		stroke-dasharray: 5 3;
+		stroke-width: 2;
+	}
+
+	/* Data Edge: Normal gray line for data flow (default) */
+	:global(.flowdrop--edge--data path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-data-color);
+	}
+
+	:global(.flowdrop--edge--data:hover path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-data-color-hover);
+		stroke-width: 2;
+	}
+
+	:global(.flowdrop--edge--data.selected path.svelte-flow__edge-path) {
+		stroke: var(--flowdrop-edge-data-color-selected);
+		stroke-width: 2;
 	}
 </style>

package/dist/config/runtimeConfig.d.ts

@@ -9,11 +9,11 @@ export interface RuntimeConfig {
     /** Base URL for the FlowDrop API */
     apiBaseUrl: string;
     /** Theme preference */
-    theme: "light" | "dark" | "auto";
+    theme: 'light' | 'dark' | 'auto';
     /** Request timeout in milliseconds */
     timeout: number;
     /** Authentication type */
-    authType: "none" | "bearer" | "api_key" | "custom";
+    authType: 'none' | 'bearer' | 'api_key' | 'custom';
     /** Authentication token */
     authToken?: string;
     /** Application version */