@d34dman/flowdrop 0.0.16 → 0.0.18

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 */

package/dist/config/runtimeConfig.js

@@ -24,7 +24,7 @@ export async function fetchRuntimeConfig(force = false) {
         return cachedConfig;
     }
     try {
-        const response = await fetch("/api/config");
+        const response = await fetch('/api/config');
         if (!response.ok) {
             throw new Error(`Failed to fetch runtime config: ${response.statusText}`);
         }
@@ -35,15 +35,15 @@ export async function fetchRuntimeConfig(force = false) {
         return config;
     }
     catch (error) {
-        console.error("Failed to fetch runtime configuration:", error);
+        console.error('Failed to fetch runtime configuration:', error);
         // Return default configuration if fetch fails
         const defaultConfig = {
-            apiBaseUrl: "/api/flowdrop",
-            theme: "auto",
+            apiBaseUrl: '/api/flowdrop',
+            theme: 'auto',
             timeout: 30000,
-            authType: "none",
-            version: "1.0.0",
-            environment: "production",
+            authType: 'none',
+            version: '1.0.0',
+            environment: 'production'
         };
         // Cache the default config to avoid repeated failed requests
         if (!cachedConfig) {

package/dist/helpers/workflowEditorHelper.d.ts

@@ -11,13 +11,53 @@ import type { EndpointConfig } from '../config/endpoints.js';
  */
 export declare function generateNodeId(nodeTypeId: string, existingNodes: WorkflowNodeType[]): string;
 /**
- * Edge styling configuration
+ * Edge category type for styling purposes
+ * - trigger: For control flow connections (dataType: "trigger")
+ * - tool: Dashed amber line for tool connections (dataType: "tool")
+ * - data: Normal gray line for all other data connections
+ */
+export type EdgeCategory = 'trigger' | 'tool' | 'data';
+/**
+ * Edge styling configuration based on source port data type
  */
 export declare class EdgeStylingHelper {
     /**
-     * Apply custom styling to connection edges based on rules:
-     * - Dashed lines for connections to tool nodes
-     * - Arrow markers pointing towards input ports
+     * 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")
+     * @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
+     */
+    static extractPortIdFromHandle(handleId: string | undefined): string | null;
+    /**
+     * Check if a port ID matches a dynamic branch in a Gateway node
+     * Gateway nodes store branches in config.branches array
+     * @param node - The workflow node to check
+     * @param portId - The port ID to look up
+     * @returns true if the portId matches a gateway branch
+     */
+    static isGatewayBranch(node: WorkflowNodeType, portId: string): boolean;
+    /**
+     * Get the data type of a port from a node's metadata
+     * Also handles dynamic ports like Gateway branches
+     * @param node - The workflow node containing the port
+     * @param portId - The port ID to look up
+     * @param portType - Whether to look in "inputs" or "outputs"
+     * @returns The port's dataType or null if not found
+     */
+    static getPortDataType(node: WorkflowNodeType, portId: string, portType: 'input' | 'output'): string | null;
+    /**
+     * Determine the edge category based on source port data type
+     * @param sourcePortDataType - The data type of the source output port
+     * @returns The edge category for styling
+     */
+    static getEdgeCategory(sourcePortDataType: string | null): EdgeCategory;
+    /**
+     * Apply custom styling to connection edges based on source port data type:
+     * - Trigger ports: Solid black line with arrow
+     * - Tool ports: Dashed amber line with arrow
+     * - Data ports: Normal gray line with arrow
      */
     static applyConnectionStyling(edge: WorkflowEdge, sourceNode: WorkflowNodeType, targetNode: WorkflowNodeType): void;
     /**

package/dist/helpers/workflowEditorHelper.js

@@ -30,44 +30,166 @@ export function generateNodeId(nodeTypeId, existingNodes) {
     return `${nodeTypeId}.${nextNumber}`;
 }
 /**
- * Edge styling configuration
+ * Edge styling configuration based on source port data type
  */
 export class EdgeStylingHelper {
     /**
-     * Apply custom styling to connection edges based on rules:
-     * - Dashed lines for connections to tool nodes
-     * - Arrow markers pointing towards input ports
+     * 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")
+     * @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
      */
-    static applyConnectionStyling(edge, sourceNode, targetNode) {
-        // Rule 1: Dashed lines for tool nodes
-        // A node is a tool node when it uses the ToolNode component,
-        // which happens when sourceNode.type === "tool"
-        const isToolNode = sourceNode.type === 'tool';
-        // Use inline styles for dashed lines (more reliable than CSS classes)
-        if (isToolNode) {
-            edge.style = 'stroke-dasharray: 0 4 0; stroke: amber !important;';
-            edge.class = 'flowdrop--edge--tool';
+    static extractPortIdFromHandle(handleId) {
+        if (!handleId) {
+            return null;
+        }
+        // Try new format: "${nodeId}-output-${portId}" or "${nodeId}-input-${portId}"
+        // We need to find the last occurrence of "-output-" or "-input-" and get what follows
+        const outputMatch = handleId.lastIndexOf('-output-');
+        const inputMatch = handleId.lastIndexOf('-input-');
+        if (outputMatch !== -1) {
+            return handleId.substring(outputMatch + '-output-'.length);
+        }
+        if (inputMatch !== -1) {
+            return handleId.substring(inputMatch + '-input-'.length);
+        }
+        // Legacy format: the handleId IS the port ID
+        return handleId;
+    }
+    /**
+     * Check if a port ID matches a dynamic branch in a Gateway node
+     * Gateway nodes store branches in config.branches array
+     * @param node - The workflow node to check
+     * @param portId - The port ID to look up
+     * @returns true if the portId matches a gateway branch
+     */
+    static isGatewayBranch(node, portId) {
+        // Check if this is a gateway node with dynamic branches
+        const nodeType = node.data?.metadata?.type || node.type;
+        if (nodeType !== 'gateway') {
+            return false;
+        }
+        // Check if the portId matches a branch name in config.branches
+        const branches = node.data?.config?.branches;
+        if (!branches || !Array.isArray(branches)) {
+            return false;
+        }
+        return branches.some((branch) => branch.name === portId);
+    }
+    /**
+     * Get the data type of a port from a node's metadata
+     * Also handles dynamic ports like Gateway branches
+     * @param node - The workflow node containing the port
+     * @param portId - The port ID to look up
+     * @param portType - Whether to look in "inputs" or "outputs"
+     * @returns The port's dataType or null if not found
+     */
+    static getPortDataType(node, portId, portType) {
+        // First, check static ports in metadata
+        const ports = portType === 'output' ? node.data?.metadata?.outputs : node.data?.metadata?.inputs;
+        if (ports && Array.isArray(ports)) {
+            const port = ports.find((p) => p.id === portId);
+            if (port?.dataType) {
+                return port.dataType;
+            }
+        }
+        // For output ports, also check dynamic Gateway branches
+        // Gateway branches are always trigger type (control flow)
+        if (portType === 'output' && this.isGatewayBranch(node, portId)) {
+            return 'trigger';
+        }
+        return null;
+    }
+    /**
+     * Determine the edge category based on source port data type
+     * @param sourcePortDataType - The data type of the source output port
+     * @returns The edge category for styling
+     */
+    static getEdgeCategory(sourcePortDataType) {
+        if (sourcePortDataType === 'trigger') {
+            return 'trigger';
+        }
+        if (sourcePortDataType === 'tool') {
+            return 'tool';
         }
-        else {
-            edge.style = 'stroke: grey;';
+        // All other data types (string, number, boolean, array, etc.) are "data" edges
+        return 'data';
+    }
+    /**
+     * Apply custom styling to connection edges based on source port data type:
+     * - Trigger ports: Solid black line with arrow
+     * - Tool ports: Dashed amber line with arrow
+     * - Data ports: Normal gray line with arrow
+     */
+    static applyConnectionStyling(edge, sourceNode, targetNode) {
+        // Extract port ID from sourceHandle
+        const sourcePortId = this.extractPortIdFromHandle(edge.sourceHandle);
+        // Get the source port's data type
+        const sourcePortDataType = sourcePortId
+            ? this.getPortDataType(sourceNode, sourcePortId, 'output')
+            : null;
+        // Determine edge category based on source port data type
+        const edgeCategory = this.getEdgeCategory(sourcePortDataType);
+        // Edge color constants (matching CSS tokens in base.css)
+        const EDGE_COLORS = {
+            trigger: '#111827', // --color-ref-gray-900
+            tool: '#f59e0b', // --color-ref-amber-500
+            data: '#9ca3af' // --color-ref-gray-400
+        };
+        // Apply styling based on edge category
+        // CSS classes handle styling via tokens; inline styles are fallback
+        switch (edgeCategory) {
+            case 'trigger':
+                // Trigger edges: solid dark line for control flow
+                edge.style =
+                    'stroke: var(--flowdrop-edge-trigger-color); stroke-width: var(--flowdrop-edge-trigger-width);';
+                edge.class = 'flowdrop--edge--trigger';
+                edge.markerEnd = {
+                    type: MarkerType.ArrowClosed,
+                    width: 16,
+                    height: 16,
+                    color: EDGE_COLORS.trigger
+                };
+                break;
+            case 'tool':
+                // Tool edges: dashed amber line
+                edge.style = 'stroke: var(--flowdrop-edge-tool-color); stroke-dasharray: 5 3;';
+                edge.class = 'flowdrop--edge--tool';
+                edge.markerEnd = {
+                    type: MarkerType.ArrowClosed,
+                    width: 16,
+                    height: 16,
+                    color: EDGE_COLORS.tool
+                };
+                break;
+            case 'data':
+            default:
+                // Data edges: normal gray line
+                edge.style = 'stroke: var(--flowdrop-edge-data-color);';
+                edge.class = 'flowdrop--edge--data';
+                edge.markerEnd = {
+                    type: MarkerType.ArrowClosed,
+                    width: 16,
+                    height: 16,
+                    color: EDGE_COLORS.data
+                };
+                break;
         }
-        // Store metadata in edge data for debugging
+        // Store metadata in edge data for API and persistence
         edge.data = {
             ...edge.data,
-            isToolConnection: isToolNode,
+            metadata: {
+                ...(edge.data?.metadata || {}),
+                edgeType: edgeCategory,
+                sourcePortDataType: sourcePortDataType || undefined
+            },
+            // Keep legacy fields for backward compatibility
+            isToolConnection: edgeCategory === 'tool',
             targetNodeType: targetNode.type,
             targetCategory: targetNode.data.metadata.category
         };
-        // Rule 2: Always add arrow pointing towards input port
-        // This replaces the default arrows we removed
-        if (!isToolNode) {
-            edge.markerEnd = {
-                type: MarkerType.ArrowClosed,
-                width: 16,
-                height: 16,
-                color: 'grey'
-            };
-        }
     }
     /**
      * Update existing edges with custom styling rules
@@ -77,11 +199,20 @@ export class EdgeStylingHelper {
             // Find source and target nodes
             const sourceNode = nodes.find((node) => node.id === edge.source);
             const targetNode = nodes.find((node) => node.id === edge.target);
+            // Create a copy of the edge
+            const updatedEdge = { ...edge };
             if (!sourceNode || !targetNode) {
-                return edge;
+                // Set default edgeType even when nodes are not found
+                updatedEdge.data = {
+                    ...updatedEdge.data,
+                    metadata: {
+                        ...(updatedEdge.data?.metadata || {}),
+                        edgeType: 'data'
+                    }
+                };
+                return updatedEdge;
             }
-            // Create a copy of the edge and apply styling
-            const updatedEdge = { ...edge };
+            // Apply full styling when nodes are available
             this.applyConnectionStyling(updatedEdge, sourceNode, targetNode);
             return updatedEdge;
         });

package/dist/index.d.ts

@@ -2,13 +2,14 @@
  * FlowDrop - Visual Workflow Editor Library
  * A Svelte 5 component library built on @xyflow/svelte for creating node-based workflow editors
  */
-import "./styles/base.css";
-export type { NodeCategory, NodeDataType, NodePort, NodeMetadata, NodeConfig, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents } from "./types/index.js";
-export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig, NodeType, WorkflowData, ExecutionResult as EditorExecutionResult, EditorState } from "./types/config.js";
-export type { AuthProvider, StaticAuthConfig, CallbackAuthConfig } from "./types/auth.js";
-export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider, createAuthProviderFromLegacyConfig } from "./types/auth.js";
-export type { WorkflowChangeType, FlowDropEventHandlers, FlowDropFeatures } from "./types/events.js";
-export { DEFAULT_FEATURES, mergeFeatures } from "./types/events.js";
+import './styles/base.css';
+import './registry/builtinNodes.js';
+export type { NodeCategory, NodeDataType, NodePort, NodeMetadata, NodeConfig, WorkflowNode, WorkflowEdge, Workflow, ApiResponse, NodesResponse, WorkflowResponse, WorkflowsResponse, ExecutionStatus, ExecutionResult, FlowDropConfig, WorkflowEvents, BuiltinNodeType } from './types/index.js';
+export type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig, NodeType, WorkflowData, ExecutionResult as EditorExecutionResult, EditorState } from './types/config.js';
+export type { AuthProvider, StaticAuthConfig, CallbackAuthConfig } from './types/auth.js';
+export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider, createAuthProviderFromLegacyConfig } from './types/auth.js';
+export type { WorkflowChangeType, FlowDropEventHandlers, FlowDropFeatures } from './types/events.js';
+export { DEFAULT_FEATURES, mergeFeatures } from './types/events.js';
 export { FlowDropApiClient } from './api/client.js';
 export { EnhancedFlowDropApiClient } from './api/enhanced-client.js';
 export { default as WorkflowEditor } from './components/WorkflowEditor.svelte';
@@ -43,16 +44,18 @@ export * from './utils/nodeTypes.js';
 export { getStatusColor, getStatusIcon, getStatusLabel, getStatusBackgroundColor, getStatusTextColor, createDefaultExecutionInfo, updateExecutionStart, updateExecutionComplete, updateExecutionFailed, resetExecutionInfo, formatExecutionDuration, formatLastExecuted } from './utils/nodeStatus.js';
 export { createNodeWrapperConfig, shouldShowNodeStatus, getOptimalStatusPosition, getOptimalStatusSize, DEFAULT_NODE_STATUS_CONFIG } from './utils/nodeWrapper.js';
 export type { NodeStatusConfig } from './utils/nodeWrapper.js';
+export { nodeComponentRegistry, createNamespacedType, parseNamespacedType, BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount } from './registry/index.js';
+export type { NodeComponentProps, NodeComponentRegistration, NodeComponentCategory, StatusPosition, StatusSize, NodeRegistrationFilter, FlowDropPluginConfig, PluginNodeDefinition, PluginRegistrationResult } from './registry/index.js';
 export * from './services/api.js';
 export { showSuccess, showError, showWarning, showInfo, showLoading, dismissToast, dismissAllToasts, showPromise, showConfirmation, apiToasts, workflowToasts, pipelineToasts } from './services/toastService.js';
 export type { ToastType, ToastOptions } from './services/toastService.js';
 export { NodeExecutionService, nodeExecutionService } from './services/nodeExecutionService.js';
 export { saveWorkflow, updateWorkflow, getWorkflow, getWorkflows, deleteWorkflow, getWorkflowCount, initializeSampleWorkflows } from './services/workflowStorage.js';
 export { globalSaveWorkflow, globalExportWorkflow, initializeGlobalSave } from './services/globalSave.js';
-export { fetchPortConfig, validatePortConfig } from "./services/portConfigApi.js";
-export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from "./services/draftStorage.js";
+export { fetchPortConfig, validatePortConfig } from './services/portConfigApi.js';
+export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from './services/draftStorage.js';
 export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from './helpers/workflowEditorHelper.js';
-export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from "./stores/workflowStore.js";
+export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
 export * from './config/endpoints.js';
 export { defaultApiConfig, getEndpointUrl } from './config/apiConfig.js';
 export type { ApiConfig } from './config/apiConfig.js';
@@ -60,6 +63,6 @@ export { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
 export * from './config/runtimeConfig.js';
 export * from './adapters/WorkflowAdapter.js';
 export * from './clients/ApiClient.js';
-export { mountWorkflowEditor, unmountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from "./svelte-app.js";
-export type { FlowDropMountOptions, MountedFlowDropApp, NavbarAction } from "./svelte-app.js";
-export { ApiError } from "./api/enhanced-client.js";
+export { mountWorkflowEditor, unmountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';
+export type { FlowDropMountOptions, MountedFlowDropApp, NavbarAction } from './svelte-app.js';
+export { ApiError } from './api/enhanced-client.js';