@d34dman/flowdrop 0.0.16 → 0.0.17

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';

package/dist/index.js

@@ -3,9 +3,12 @@
  * A Svelte 5 component library built on @xyflow/svelte for creating node-based workflow editors
  */
 // Import CSS to ensure styles are included in the library build
-import "./styles/base.css";
-export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider, createAuthProviderFromLegacyConfig } from "./types/auth.js";
-export { DEFAULT_FEATURES, mergeFeatures } from "./types/events.js";
+import './styles/base.css';
+// Initialize built-in node components in the registry
+// This import has a side effect of registering all built-in nodes
+import './registry/builtinNodes.js';
+export { StaticAuthProvider, CallbackAuthProvider, NoAuthProvider, createAuthProviderFromLegacyConfig } from './types/auth.js';
+export { DEFAULT_FEATURES, mergeFeatures } from './types/events.js';
 // Export API clients
 export { FlowDropApiClient } from './api/client.js';
 export { EnhancedFlowDropApiClient } from './api/enhanced-client.js';
@@ -43,21 +46,29 @@ export * from './utils/config.js';
 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 node component registry
+export { 
+// Core registry
+nodeComponentRegistry, createNamespacedType, parseNamespacedType, 
+// Built-in nodes
+BUILTIN_NODE_COMPONENTS, BUILTIN_NODE_TYPES, FLOWDROP_SOURCE, registerBuiltinNodes, areBuiltinsRegistered, isBuiltinType, getBuiltinTypes, resolveBuiltinAlias, 
+// Plugin system
+registerFlowDropPlugin, unregisterFlowDropPlugin, registerCustomNode, createPlugin, isValidNamespace, getRegisteredPlugins, getPluginNodeCount } from './registry/index.js';
 // Export services
 export * from './services/api.js';
 export { showSuccess, showError, showWarning, showInfo, showLoading, dismissToast, dismissAllToasts, showPromise, showConfirmation, apiToasts, workflowToasts, pipelineToasts } 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 { fetchPortConfig, validatePortConfig } from './services/portConfigApi.js';
 // Export draft storage service
-export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from "./services/draftStorage.js";
+export { getDraftStorageKey, saveDraft, loadDraft, deleteDraft, hasDraft, getDraftMetadata, DraftAutoSaveManager } from './services/draftStorage.js';
 // Export helpers
 export { EdgeStylingHelper, NodeOperationsHelper, WorkflowOperationsHelper, ConfigurationHelper } from './helpers/workflowEditorHelper.js';
 // Export stores
 export { workflowStore, workflowActions, workflowId, workflowName, workflowNodes, workflowEdges, workflowMetadata, workflowChanged, workflowValidation, workflowMetadataChanged, 
 // Dirty state tracking
-isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from "./stores/workflowStore.js";
+isDirtyStore, isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.js';
 // Export endpoint configuration
 export * from './config/endpoints.js';
 export { defaultApiConfig, getEndpointUrl } from './config/apiConfig.js';
@@ -68,6 +79,6 @@ export * from './adapters/WorkflowAdapter.js';
 // Export API client
 export * from './clients/ApiClient.js';
 // Export Svelte app wrapper for framework integration
-export { mountWorkflowEditor, unmountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from "./svelte-app.js";
+export { mountWorkflowEditor, unmountWorkflowEditor, mountFlowDropApp, unmountFlowDropApp } from './svelte-app.js';
 // Export API error class
-export { ApiError } from "./api/enhanced-client.js";
+export { ApiError } from './api/enhanced-client.js';

package/dist/registry/builtinNodes.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Built-in Node Components Registration
+ * Registers all default FlowDrop node components with the registry.
+ *
+ * This module is automatically loaded when the library initializes,
+ * ensuring all built-in node types are available without user action.
+ */
+import { type NodeComponentRegistration } from './nodeComponentRegistry.js';
+/**
+ * Source identifier for built-in FlowDrop components
+ */
+export declare const FLOWDROP_SOURCE = "flowdrop";
+/**
+ * Built-in FlowDrop node component registrations.
+ * These are the default node types that ship with FlowDrop.
+ */
+export declare const BUILTIN_NODE_COMPONENTS: NodeComponentRegistration[];
+/**
+ * Alias mapping for backwards compatibility.
+ * Maps old type names to their canonical registration.
+ */
+export declare const BUILTIN_TYPE_ALIASES: Record<string, string>;
+/**
+ * Initialize the registry with built-in components.
+ * This is called automatically when the library loads.
+ *
+ * Safe to call multiple times - will only register once.
+ *
+ * @example
+ * ```typescript
+ * // Usually not needed - called automatically
+ * // But can be called manually if needed
+ * registerBuiltinNodes();
+ * ```
+ */
+export declare function registerBuiltinNodes(): void;
+/**
+ * Check if built-in nodes have been registered.
+ *
+ * @returns true if registerBuiltinNodes() has been called
+ */
+export declare function areBuiltinsRegistered(): boolean;
+/**
+ * Reset the registration state.
+ * Primarily useful for testing.
+ */
+export declare function resetBuiltinRegistration(): void;
+/**
+ * Get the canonical type for a given type string.
+ * Handles aliases like "default" -> "workflowNode".
+ *
+ * @param type - The type string to resolve
+ * @returns The canonical type string
+ */
+export declare function resolveBuiltinAlias(type: string): string;
+/**
+ * Check if a type is a built-in FlowDrop type.
+ *
+ * @param type - The type to check
+ * @returns true if this is a built-in type
+ */
+export declare function isBuiltinType(type: string): boolean;
+/**
+ * Get all built-in type identifiers.
+ *
+ * @returns Array of built-in type strings
+ */
+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';
+/**
+ * Array of built-in type strings for runtime validation.
+ */
+export declare const BUILTIN_NODE_TYPES: BuiltinNodeType[];