@d34dman/flowdrop 0.0.16 → 0.0.17

package/README.md

@@ -14,6 +14,14 @@ A visual workflow editor component library built with Svelte 5 and @xyflow/svelt
 - **TypeScript Support**: Full type definitions included
 - **Docker Ready**: Production-ready Dockerfile and Docker Compose configuration
 
+### Enterprise Features (v0.0.16+)
+
+- **Pluggable Authentication**: AuthProvider interface for OAuth, JWT, SSO integration
+- **Workflow Lifecycle Events**: Hooks for save, load, change, and unmount events
+- **Dirty State Tracking**: Monitor unsaved changes with reactive stores
+- **Draft Auto-Save**: Automatic localStorage drafts with configurable intervals
+- **Feature Flags**: Customize behavior for security and UX requirements
+
 ## 📦 Installation
 
 ```bash
@@ -117,6 +125,52 @@ const editor = mountWorkflowEditor(container, {
 editor.destroy();
 ```
 
+#### 3. Enterprise Integration (v0.0.16+)
+
+```javascript
+import { mountFlowDropApp, createEndpointConfig, CallbackAuthProvider } from '@d34dman/flowdrop';
+
+const app = await mountFlowDropApp(container, {
+	workflow: myWorkflow,
+	endpointConfig: createEndpointConfig('/api/flowdrop'),
+
+	// Dynamic authentication with token refresh
+	authProvider: new CallbackAuthProvider({
+		getToken: () => authService.getAccessToken(),
+		onUnauthorized: () => authService.refreshToken()
+	}),
+
+	// Workflow lifecycle hooks
+	eventHandlers: {
+		onDirtyStateChange: (isDirty) => updateSaveButton(isDirty),
+		onAfterSave: (workflow) => showSuccess('Saved!'),
+		onBeforeUnmount: (workflow, isDirty) => {
+			if (isDirty) saveDraft(workflow);
+		}
+	},
+
+	// Feature configuration
+	features: {
+		autoSaveDraft: true,
+		autoSaveDraftInterval: 30000,
+		showToasts: true
+	}
+});
+
+// Access instance methods
+if (app.isDirty()) {
+	await app.save();
+}
+
+// Get current workflow data
+const workflow = app.getWorkflow();
+
+// Cleanup
+app.destroy();
+```
+
+See the [Enterprise Integration Guide](./docs/enterprise-integration.md) for React, Vue, Angular, and Drupal examples.
+
 #### 3. Integration with Backend Frameworks
 
 ##### Drupal Example
@@ -313,6 +367,13 @@ npm run format
 - **CHANGELOG.md** - Version history
 - **Storybook** - Component documentation (run `npm run storybook`)
 
+### Enterprise Features (v0.0.16+)
+
+- **[Enterprise Integration Guide](./docs/enterprise-integration.md)** - Complete integration patterns for React, Vue, Angular, Drupal
+- **[Authentication Guide](./docs/authentication-guide.md)** - OAuth, JWT, SSO, and custom auth providers
+- **[Event Handlers](./docs/event-handlers.md)** - Workflow lifecycle events and hooks
+- **[Features Configuration](./docs/features-configuration.md)** - Feature flags, draft auto-save, and customization
+
 ## 🤝 Contributing
 
 Not accepting contributions until the library stabilizes. Stay tuned.
@@ -347,6 +408,7 @@ docker-compose up -d
 ### Environment Variables
 
 **Production (Runtime):**
+
 - `FLOWDROP_API_BASE_URL` - Backend API URL
 - `FLOWDROP_THEME` - UI theme (light/dark/auto)
 - `FLOWDROP_TIMEOUT` - Request timeout in milliseconds
@@ -354,6 +416,7 @@ docker-compose up -d
 - `FLOWDROP_AUTH_TOKEN` - Authentication token
 
 **Development (Build-time):**
+
 - `VITE_API_BASE_URL` - Dev API URL (used only during `npm run dev`)
 
 ### Build for Production
@@ -371,6 +434,7 @@ node build
 ```
 
 For detailed deployment instructions, see:
+
 - [DOCKER.md](./DOCKER.md) - Docker quick start
 
 ---

package/dist/api/enhanced-client.d.ts

@@ -5,9 +5,9 @@
  *
  * @module api/enhanced-client
  */
-import type { NodeMetadata, Workflow, ExecutionResult } from "../types/index.js";
-import type { EndpointConfig } from "../config/endpoints.js";
-import type { AuthProvider } from "../types/auth.js";
+import type { NodeMetadata, Workflow, ExecutionResult } from '../types/index.js';
+import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from '../types/auth.js';
 /**
  * API error with additional context
  */

package/dist/api/enhanced-client.js

@@ -5,8 +5,8 @@
  *
  * @module api/enhanced-client
  */
-import { buildEndpointUrl, getEndpointMethod, getEndpointHeaders } from "../config/endpoints.js";
-import { createAuthProviderFromLegacyConfig } from "../types/auth.js";
+import { buildEndpointUrl, getEndpointMethod, getEndpointHeaders } from '../config/endpoints.js';
+import { createAuthProviderFromLegacyConfig } from '../types/auth.js';
 /**
  * API error with additional context
  */
@@ -19,7 +19,7 @@ export class ApiError extends Error {
     operation;
     constructor(message, status, operation, errorData = {}) {
         super(message);
-        this.name = "ApiError";
+        this.name = 'ApiError';
         this.status = status;
         this.operation = operation;
         this.errorData = errorData;
@@ -62,7 +62,7 @@ export class EnhancedFlowDropApiClient {
      * @param options - Additional fetch options
      * @param operation - Description of the operation (for error messages)
      */
-    async request(endpointKey, endpointPath, params, options = {}, operation = "API request") {
+    async request(endpointKey, endpointPath, params, options = {}, operation = 'API request') {
         const url = buildEndpointUrl(this.config, endpointPath, params);
         const method = options.method ?? getEndpointMethod(this.config, endpointKey);
         const configHeaders = getEndpointHeaders(this.config, endpointKey);
@@ -99,14 +99,14 @@ export class EnhancedFlowDropApiClient {
                             continue; // Retry with new headers
                         }
                     }
-                    throw new ApiError("Unauthorized", 401, operation, {});
+                    throw new ApiError('Unauthorized', 401, operation, {});
                 }
                 // Handle 403 Forbidden
                 if (response.status === 403) {
                     if (this.authProvider.onForbidden) {
                         await this.authProvider.onForbidden();
                     }
-                    throw new ApiError("Forbidden", 403, operation, {});
+                    throw new ApiError('Forbidden', 403, operation, {});
                 }
                 // Handle other errors
                 if (!response.ok) {
@@ -133,7 +133,7 @@ export class EnhancedFlowDropApiClient {
                 }
                 // Wait before retry
                 const delay = this.config.retry?.delay ?? 1000;
-                const backoffDelay = this.config.retry?.backoff === "exponential" ? delay * Math.pow(2, attempt - 1) : delay;
+                const backoffDelay = this.config.retry?.backoff === 'exponential' ? delay * Math.pow(2, attempt - 1) : delay;
                 await new Promise((resolve) => setTimeout(resolve, backoffDelay));
             }
         }
@@ -166,9 +166,9 @@ export class EnhancedFlowDropApiClient {
      * Fetch all available node types
      */
     async getAvailableNodes() {
-        const response = await this.request("nodes.list", this.config.endpoints.nodes.list, undefined, {}, "fetch available nodes");
+        const response = await this.request('nodes.list', this.config.endpoints.nodes.list, undefined, {}, 'fetch available nodes');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to fetch available nodes");
+            throw new Error(response.error ?? 'Failed to fetch available nodes');
         }
         return response.data;
     }
@@ -176,9 +176,9 @@ export class EnhancedFlowDropApiClient {
      * Fetch nodes filtered by category
      */
     async getNodesByCategory(category) {
-        const response = await this.request("nodes.byCategory", this.config.endpoints.nodes.byCategory, { category }, {}, "fetch nodes by category");
+        const response = await this.request('nodes.byCategory', this.config.endpoints.nodes.byCategory, { category }, {}, 'fetch nodes by category');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to fetch nodes by category");
+            throw new Error(response.error ?? 'Failed to fetch nodes by category');
         }
         return response.data;
     }
@@ -186,9 +186,9 @@ export class EnhancedFlowDropApiClient {
      * Fetch metadata for a specific node type
      */
     async getNodeMetadata(nodeId) {
-        const response = await this.request("nodes.metadata", this.config.endpoints.nodes.metadata, { id: nodeId }, {}, "fetch node metadata");
+        const response = await this.request('nodes.metadata', this.config.endpoints.nodes.metadata, { id: nodeId }, {}, 'fetch node metadata');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to fetch node metadata");
+            throw new Error(response.error ?? 'Failed to fetch node metadata');
         }
         return response.data;
     }
@@ -199,12 +199,12 @@ export class EnhancedFlowDropApiClient {
      * Save a new workflow
      */
     async saveWorkflow(workflow) {
-        const response = await this.request("workflows.create", this.config.endpoints.workflows.create, undefined, {
-            method: "POST",
+        const response = await this.request('workflows.create', this.config.endpoints.workflows.create, undefined, {
+            method: 'POST',
             body: JSON.stringify(workflow)
-        }, "save workflow");
+        }, 'save workflow');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to save workflow");
+            throw new Error(response.error ?? 'Failed to save workflow');
         }
         return response.data;
     }
@@ -212,12 +212,12 @@ export class EnhancedFlowDropApiClient {
      * Update an existing workflow
      */
     async updateWorkflow(workflowId, workflow) {
-        const response = await this.request("workflows.update", this.config.endpoints.workflows.update, { id: workflowId }, {
-            method: "PUT",
+        const response = await this.request('workflows.update', this.config.endpoints.workflows.update, { id: workflowId }, {
+            method: 'PUT',
             body: JSON.stringify(workflow)
-        }, "update workflow");
+        }, 'update workflow');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to update workflow");
+            throw new Error(response.error ?? 'Failed to update workflow');
         }
         return response.data;
     }
@@ -225,9 +225,9 @@ export class EnhancedFlowDropApiClient {
      * Load a workflow by ID
      */
     async loadWorkflow(workflowId) {
-        const response = await this.request("workflows.get", this.config.endpoints.workflows.get, { id: workflowId }, {}, "load workflow");
+        const response = await this.request('workflows.get', this.config.endpoints.workflows.get, { id: workflowId }, {}, 'load workflow');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to load workflow");
+            throw new Error(response.error ?? 'Failed to load workflow');
         }
         return response.data;
     }
@@ -235,9 +235,9 @@ export class EnhancedFlowDropApiClient {
      * List all workflows
      */
     async listWorkflows() {
-        const response = await this.request("workflows.list", this.config.endpoints.workflows.list, undefined, {}, "list workflows");
+        const response = await this.request('workflows.list', this.config.endpoints.workflows.list, undefined, {}, 'list workflows');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to list workflows");
+            throw new Error(response.error ?? 'Failed to list workflows');
         }
         return response.data;
     }
@@ -245,21 +245,21 @@ export class EnhancedFlowDropApiClient {
      * Delete a workflow
      */
     async deleteWorkflow(workflowId) {
-        const response = await this.request("workflows.delete", this.config.endpoints.workflows.delete, { id: workflowId }, { method: "DELETE" }, "delete workflow");
+        const response = await this.request('workflows.delete', this.config.endpoints.workflows.delete, { id: workflowId }, { method: 'DELETE' }, 'delete workflow');
         if (!response.success) {
-            throw new Error(response.error ?? "Failed to delete workflow");
+            throw new Error(response.error ?? 'Failed to delete workflow');
         }
     }
     /**
      * Validate a workflow
      */
     async validateWorkflow(workflow) {
-        const response = await this.request("workflows.validate", this.config.endpoints.workflows.validate, undefined, {
-            method: "POST",
+        const response = await this.request('workflows.validate', this.config.endpoints.workflows.validate, undefined, {
+            method: 'POST',
             body: JSON.stringify(workflow)
-        }, "validate workflow");
+        }, 'validate workflow');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to validate workflow");
+            throw new Error(response.error ?? 'Failed to validate workflow');
         }
         return response.data;
     }
@@ -267,9 +267,9 @@ export class EnhancedFlowDropApiClient {
      * Export a workflow as JSON string
      */
     async exportWorkflow(workflowId) {
-        const response = await this.request("workflows.export", this.config.endpoints.workflows.export, { id: workflowId }, {}, "export workflow");
+        const response = await this.request('workflows.export', this.config.endpoints.workflows.export, { id: workflowId }, {}, 'export workflow');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to export workflow");
+            throw new Error(response.error ?? 'Failed to export workflow');
         }
         return response.data;
     }
@@ -277,12 +277,12 @@ export class EnhancedFlowDropApiClient {
      * Import a workflow from JSON
      */
     async importWorkflow(workflowJson) {
-        const response = await this.request("workflows.import", this.config.endpoints.workflows.import, undefined, {
-            method: "POST",
+        const response = await this.request('workflows.import', this.config.endpoints.workflows.import, undefined, {
+            method: 'POST',
             body: JSON.stringify({ workflow: workflowJson })
-        }, "import workflow");
+        }, 'import workflow');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to import workflow");
+            throw new Error(response.error ?? 'Failed to import workflow');
         }
         return response.data;
     }
@@ -293,12 +293,12 @@ export class EnhancedFlowDropApiClient {
      * Execute a workflow
      */
     async executeWorkflow(workflowId, inputs) {
-        const response = await this.request("executions.execute", this.config.endpoints.executions.execute, { id: workflowId }, {
-            method: "POST",
+        const response = await this.request('executions.execute', this.config.endpoints.executions.execute, { id: workflowId }, {
+            method: 'POST',
             body: JSON.stringify({ inputs })
-        }, "execute workflow");
+        }, 'execute workflow');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to execute workflow");
+            throw new Error(response.error ?? 'Failed to execute workflow');
         }
         return response.data;
     }
@@ -306,9 +306,9 @@ export class EnhancedFlowDropApiClient {
      * Get execution status
      */
     async getExecutionStatus(executionId) {
-        const response = await this.request("executions.status", this.config.endpoints.executions.status, { id: executionId }, {}, "get execution status");
+        const response = await this.request('executions.status', this.config.endpoints.executions.status, { id: executionId }, {}, 'get execution status');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to get execution status");
+            throw new Error(response.error ?? 'Failed to get execution status');
         }
         return response.data;
     }
@@ -316,18 +316,18 @@ export class EnhancedFlowDropApiClient {
      * Cancel a running execution
      */
     async cancelExecution(executionId) {
-        const response = await this.request("executions.cancel", this.config.endpoints.executions.cancel, { id: executionId }, { method: "POST" }, "cancel execution");
+        const response = await this.request('executions.cancel', this.config.endpoints.executions.cancel, { id: executionId }, { method: 'POST' }, 'cancel execution');
         if (!response.success) {
-            throw new Error(response.error ?? "Failed to cancel execution");
+            throw new Error(response.error ?? 'Failed to cancel execution');
         }
     }
     /**
      * Get execution logs
      */
     async getExecutionLogs(executionId) {
-        const response = await this.request("executions.logs", this.config.endpoints.executions.logs, { id: executionId }, {}, "get execution logs");
+        const response = await this.request('executions.logs', this.config.endpoints.executions.logs, { id: executionId }, {}, 'get execution logs');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to get execution logs");
+            throw new Error(response.error ?? 'Failed to get execution logs');
         }
         return response.data;
     }
@@ -338,9 +338,9 @@ export class EnhancedFlowDropApiClient {
      * List available templates
      */
     async listTemplates() {
-        const response = await this.request("templates.list", this.config.endpoints.templates.list, undefined, {}, "list templates");
+        const response = await this.request('templates.list', this.config.endpoints.templates.list, undefined, {}, 'list templates');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to list templates");
+            throw new Error(response.error ?? 'Failed to list templates');
         }
         return response.data;
     }
@@ -348,9 +348,9 @@ export class EnhancedFlowDropApiClient {
      * Get a template by ID
      */
     async getTemplate(templateId) {
-        const response = await this.request("templates.get", this.config.endpoints.templates.get, { id: templateId }, {}, "get template");
+        const response = await this.request('templates.get', this.config.endpoints.templates.get, { id: templateId }, {}, 'get template');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to get template");
+            throw new Error(response.error ?? 'Failed to get template');
         }
         return response.data;
     }
@@ -361,9 +361,9 @@ export class EnhancedFlowDropApiClient {
      * Get system health status
      */
     async getSystemHealth() {
-        const response = await this.request("system.health", this.config.endpoints.system.health, undefined, {}, "get system health");
+        const response = await this.request('system.health', this.config.endpoints.system.health, undefined, {}, 'get system health');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to get system health");
+            throw new Error(response.error ?? 'Failed to get system health');
         }
         return response.data;
     }
@@ -371,9 +371,9 @@ export class EnhancedFlowDropApiClient {
      * Get system configuration
      */
     async getSystemConfig() {
-        const response = await this.request("system.config", this.config.endpoints.system.config, undefined, {}, "get system config");
+        const response = await this.request('system.config', this.config.endpoints.system.config, undefined, {}, 'get system config');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to get system config");
+            throw new Error(response.error ?? 'Failed to get system config');
         }
         return response.data;
     }
@@ -381,9 +381,9 @@ export class EnhancedFlowDropApiClient {
      * Get system version information
      */
     async getSystemVersion() {
-        const response = await this.request("system.version", this.config.endpoints.system.version, undefined, {}, "get system version");
+        const response = await this.request('system.version', this.config.endpoints.system.version, undefined, {}, 'get system version');
         if (!response.success || !response.data) {
-            throw new Error(response.error ?? "Failed to get system version");
+            throw new Error(response.error ?? 'Failed to get system version');
         }
         return response.data;
     }

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()}