@d34dman/flowdrop 0.0.16 → 0.0.18

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