@d34dman/flowdrop 0.0.15 → 0.0.16

package/dist/svelte-app.js

@@ -1,27 +1,53 @@
 /**
  * Svelte App Wrapper for Framework Integration
- * Provides mount/unmount functions for integrating FlowDrop into any web application
- * Particularly useful for integration with vanilla JS, Drupal, WordPress, or other frameworks
+ *
+ * Provides mount/unmount functions for integrating FlowDrop into any web application.
+ * Particularly useful for integration with vanilla JS, Drupal, WordPress, or other frameworks.
+ *
+ * @module svelte-app
  */
-import { mount } from 'svelte';
-import WorkflowEditor from './components/WorkflowEditor.svelte';
-import App from './components/App.svelte';
-import { initializePortCompatibility } from './utils/connections.js';
-import { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
-import { fetchPortConfig } from './services/portConfigApi.js';
+import { mount, unmount } from "svelte";
+import WorkflowEditor from "./components/WorkflowEditor.svelte";
+import App from "./components/App.svelte";
+import { initializePortCompatibility } from "./utils/connections.js";
+import { DEFAULT_PORT_CONFIG } from "./config/defaultPortConfig.js";
+import { fetchPortConfig } from "./services/portConfigApi.js";
+import { isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from "./stores/workflowStore.js";
+import { DraftAutoSaveManager, getDraftStorageKey } from "./services/draftStorage.js";
+import { mergeFeatures } from "./types/events.js";
 /**
  * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
- * Use this for a complete workflow editing experience with all UI components
+ *
+ * Use this for a complete workflow editing experience with all UI components.
+ *
  * @param container - DOM element to mount the app into
  * @param options - Configuration options for the app
+ * @returns Promise resolving to a MountedFlowDropApp instance
+ *
+ * @example
+ * ```typescript
+ * const app = await mountFlowDropApp(document.getElementById("editor"), {
+ *   workflow: myWorkflow,
+ *   endpointConfig: createEndpointConfig("/api/flowdrop"),
+ *   authProvider: new CallbackAuthProvider({
+ *     getToken: () => authService.getAccessToken()
+ *   }),
+ *   eventHandlers: {
+ *     onDirtyStateChange: (isDirty) => updateSaveButton(isDirty),
+ *     onAfterSave: () => showSuccess("Saved!")
+ *   }
+ * });
+ * ```
  */
 export async function mountFlowDropApp(container, options = {}) {
-    const { workflow, endpointConfig, portConfig, height = '100vh', width = '100%', showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions } = options;
+    const { workflow, nodes, endpointConfig, portConfig, height = "100vh", width = "100%", showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, authProvider, eventHandlers, features: userFeatures, draftStorageKey: customDraftKey } = options;
+    // Merge features with defaults
+    const features = mergeFeatures(userFeatures);
     // Create endpoint configuration
     let config;
     if (endpointConfig) {
         // Merge with default configuration to ensure all required endpoints are present
-        const { defaultEndpointConfig } = await import('./config/endpoints.js');
+        const { defaultEndpointConfig } = await import("./config/endpoints.js");
         config = {
             ...defaultEndpointConfig,
             ...endpointConfig,
@@ -33,7 +59,7 @@ export async function mountFlowDropApp(container, options = {}) {
     }
     else {
         // Use default configuration if none provided
-        const { defaultEndpointConfig } = await import('./config/endpoints.js');
+        const { defaultEndpointConfig } = await import("./config/endpoints.js");
         config = defaultEndpointConfig;
     }
     // Initialize port configuration
@@ -44,7 +70,7 @@ export async function mountFlowDropApp(container, options = {}) {
             finalPortConfig = await fetchPortConfig(config);
         }
         catch (error) {
-            console.warn('Failed to fetch port config from API, using default:', error);
+            console.warn("Failed to fetch port config from API, using default:", error);
             finalPortConfig = DEFAULT_PORT_CONFIG;
         }
     }
@@ -52,11 +78,19 @@ export async function mountFlowDropApp(container, options = {}) {
         finalPortConfig = DEFAULT_PORT_CONFIG;
     }
     initializePortCompatibility(finalPortConfig);
+    // Set up event handler callbacks in the store
+    if (eventHandlers?.onDirtyStateChange) {
+        setOnDirtyStateChange(eventHandlers.onDirtyStateChange);
+    }
+    if (eventHandlers?.onWorkflowChange) {
+        setOnWorkflowChange(eventHandlers.onWorkflowChange);
+    }
     // Create the Svelte App component with configuration
-    const app = mount(App, {
+    const svelteApp = mount(App, {
         target: container,
         props: {
             workflow,
+            nodes,
             height,
             width,
             showNavbar,
@@ -67,31 +101,91 @@ export async function mountFlowDropApp(container, options = {}) {
             pipelineId,
             navbarTitle,
             navbarActions,
-            endpointConfig: config
+            endpointConfig: config,
+            authProvider,
+            eventHandlers,
+            features
         }
     });
-    // Expose save and export functionality
-    app.save = async () => {
-        if (typeof window !== 'undefined' && window.flowdropSave) {
-            await window.flowdropSave();
-        }
-        else {
-            console.warn('⚠️ Save functionality not available');
-        }
+    // Set up draft auto-save manager
+    let draftManager = null;
+    if (features.autoSaveDraft) {
+        const storageKey = getDraftStorageKey(workflow?.id, customDraftKey);
+        draftManager = new DraftAutoSaveManager({
+            storageKey,
+            interval: features.autoSaveDraftInterval,
+            enabled: features.autoSaveDraft,
+            getWorkflow: getWorkflowFromStore,
+            isDirty
+        });
+        draftManager.start();
+    }
+    // Store state for cleanup
+    const state = {
+        svelteApp,
+        draftManager,
+        eventHandlers: eventHandlers ?? null
     };
-    app.export = () => {
-        if (typeof window !== 'undefined' && window.flowdropExport) {
-            window.flowdropExport();
-        }
-        else {
-            console.warn('⚠️ Export functionality not available');
+    // Create the mounted app interface
+    const mountedApp = {
+        destroy: () => {
+            // Call onBeforeUnmount if provided
+            if (state.eventHandlers?.onBeforeUnmount) {
+                const currentWorkflow = getWorkflowFromStore();
+                if (currentWorkflow) {
+                    state.eventHandlers.onBeforeUnmount(currentWorkflow, isDirty());
+                }
+            }
+            // Stop draft manager
+            if (state.draftManager) {
+                // Save one final draft if dirty
+                if (isDirty()) {
+                    state.draftManager.forceSave();
+                }
+                state.draftManager.stop();
+            }
+            // Clear event callbacks
+            setOnDirtyStateChange(null);
+            setOnWorkflowChange(null);
+            // Unmount Svelte app
+            unmount(state.svelteApp);
+        },
+        isDirty: () => isDirty(),
+        markAsSaved: () => {
+            markAsSaved();
+            // Also update draft manager
+            if (state.draftManager) {
+                state.draftManager.markAsSaved();
+            }
+        },
+        getWorkflow: () => getWorkflowFromStore(),
+        save: async () => {
+            if (typeof window !== "undefined" && window.flowdropSave) {
+                await window.flowdropSave();
+            }
+            else {
+                console.warn("⚠️ Save functionality not available");
+            }
+        },
+        export: () => {
+            if (typeof window !== "undefined" && window.flowdropExport) {
+                window.flowdropExport();
+            }
+            else {
+                console.warn("⚠️ Export functionality not available");
+            }
         }
     };
-    return app;
+    return mountedApp;
 }
 /**
  * Mount the WorkflowEditor component in a container
- * Simpler alternative to mountFlowDropApp - only mounts the editor without navbar
+ *
+ * Simpler alternative to mountFlowDropApp - only mounts the editor without navbar.
+ *
+ * @param container - DOM element to mount the editor into
+ * @param options - Configuration options
+ * @returns Promise resolving to a MountedFlowDropApp instance
  */
 export async function mountWorkflowEditor(container, options = {}) {
     const { nodes = [], endpointConfig, portConfig } = options;
@@ -99,7 +193,7 @@ export async function mountWorkflowEditor(container, options = {}) {
     let config;
     if (endpointConfig) {
         // Merge with default configuration to ensure all required endpoints are present
-        const { defaultEndpointConfig } = await import('./config/endpoints.js');
+        const { defaultEndpointConfig } = await import("./config/endpoints.js");
         config = {
             ...defaultEndpointConfig,
             ...endpointConfig,
@@ -111,7 +205,7 @@ export async function mountWorkflowEditor(container, options = {}) {
     }
     else {
         // Use default configuration if none provided
-        const { defaultEndpointConfig } = await import('./config/endpoints.js');
+        const { defaultEndpointConfig } = await import("./config/endpoints.js");
         config = defaultEndpointConfig;
     }
     // Initialize port configuration
@@ -122,7 +216,7 @@ export async function mountWorkflowEditor(container, options = {}) {
             finalPortConfig = await fetchPortConfig(config);
         }
         catch (error) {
-            console.warn('Failed to fetch port config from API, using default:', error);
+            console.warn("Failed to fetch port config from API, using default:", error);
             finalPortConfig = DEFAULT_PORT_CONFIG;
         }
     }
@@ -131,25 +225,54 @@ export async function mountWorkflowEditor(container, options = {}) {
     }
     initializePortCompatibility(finalPortConfig);
     // Create the Svelte component
-    const app = mount(WorkflowEditor, {
+    const svelteApp = mount(WorkflowEditor, {
         target: container,
         props: {
             nodes,
             endpointConfig: config
         }
     });
-    return app;
+    // Create the mounted app interface (simpler version)
+    const mountedApp = {
+        destroy: () => {
+            unmount(svelteApp);
+        },
+        isDirty: () => isDirty(),
+        markAsSaved: () => markAsSaved(),
+        getWorkflow: () => getWorkflowFromStore(),
+        save: async () => {
+            if (typeof window !== "undefined" && window.flowdropSave) {
+                await window.flowdropSave();
+            }
+            else {
+                console.warn("⚠️ Save functionality not available");
+            }
+        },
+        export: () => {
+            if (typeof window !== "undefined" && window.flowdropExport) {
+                window.flowdropExport();
+            }
+            else {
+                console.warn("⚠️ Export functionality not available");
+            }
+        }
+    };
+    return mountedApp;
 }
 /**
- * Unmount a Svelte app (works for both App and WorkflowEditor)
+ * Unmount a FlowDrop app
+ *
+ * @param app - The mounted app to unmount
  */
 export function unmountFlowDropApp(app) {
-    if (app && typeof app.destroy === 'function') {
+    if (app && typeof app.destroy === "function") {
         app.destroy();
     }
 }
 /**
- * Unmount a Svelte app (alias for backward compatibility)
+ * Unmount a FlowDrop app (alias for backward compatibility)
+ *
+ * @param app - The mounted app to unmount
  */
 export function unmountWorkflowEditor(app) {
     unmountFlowDropApp(app);

package/dist/types/auth.d.ts

@@ -0,0 +1,278 @@
+/**
+ * Authentication Provider Types for FlowDrop
+ *
+ * Provides interfaces and implementations for authentication in FlowDrop.
+ * AuthProvider is passed at mount time and cannot be changed without remounting.
+ *
+ * @module types/auth
+ */
+/**
+ * Authentication provider interface
+ *
+ * Defines the contract for authentication providers that can be passed to FlowDrop.
+ * Implementations handle token retrieval, authentication state, and error handling.
+ *
+ * @example
+ * ```typescript
+ * const authProvider: AuthProvider = {
+ *   getAuthHeaders: async () => ({ Authorization: "Bearer token123" }),
+ *   isAuthenticated: () => true
+ * };
+ * ```
+ */
+export interface AuthProvider {
+    /**
+     * Get current authentication headers
+     *
+     * Called before every API request to retrieve current auth headers.
+     * Should return fresh headers each time (e.g., after token refresh).
+     *
+     * @returns Promise resolving to a record of header name-value pairs
+     */
+    getAuthHeaders(): Promise<Record<string, string>>;
+    /**
+     * Check if currently authenticated
+     *
+     * Used to determine if API requests should be attempted.
+     * Should return synchronously for performance.
+     *
+     * @returns true if authenticated, false otherwise
+     */
+    isAuthenticated(): boolean;
+    /**
+     * Called when API returns 401 Unauthorized
+     *
+     * Allows the provider to attempt token refresh or re-authentication.
+     * If this returns true, the failed request will be retried with new headers.
+     *
+     * @returns Promise resolving to true if auth was refreshed and request should retry
+     */
+    onUnauthorized?(): Promise<boolean>;
+    /**
+     * Called when API returns 403 Forbidden
+     *
+     * Allows the provider to handle permission errors (e.g., show error UI).
+     * Unlike 401, this typically means the user is authenticated but lacks permission.
+     */
+    onForbidden?(): Promise<void>;
+}
+/**
+ * Configuration for static authentication
+ *
+ * Used to configure StaticAuthProvider with different auth types.
+ */
+export interface StaticAuthConfig {
+    /** Authentication type */
+    type: "none" | "bearer" | "api_key" | "custom";
+    /** Bearer token (used when type is "bearer") */
+    token?: string;
+    /** API key (used when type is "api_key") */
+    apiKey?: string;
+    /** Custom headers (used when type is "custom") */
+    headers?: Record<string, string>;
+}
+/**
+ * Static authentication provider
+ *
+ * Provides authentication using static credentials configured at instantiation.
+ * Suitable for simple use cases where tokens don't change during the session.
+ * Also used internally for backward compatibility with existing endpointConfig.auth.
+ *
+ * @example
+ * ```typescript
+ * // Bearer token authentication
+ * const authProvider = new StaticAuthProvider({
+ *   type: "bearer",
+ *   token: "your-jwt-token"
+ * });
+ *
+ * // API key authentication
+ * const authProvider = new StaticAuthProvider({
+ *   type: "api_key",
+ *   apiKey: "your-api-key"
+ * });
+ *
+ * // Custom headers
+ * const authProvider = new StaticAuthProvider({
+ *   type: "custom",
+ *   headers: {
+ *     "X-Custom-Auth": "value",
+ *     "X-Tenant-ID": "tenant123"
+ *   }
+ * });
+ * ```
+ */
+export declare class StaticAuthProvider implements AuthProvider {
+    /** Cached authentication headers */
+    private headers;
+    /**
+     * Create a new StaticAuthProvider
+     *
+     * @param config - Static authentication configuration
+     */
+    constructor(config: StaticAuthConfig);
+    /**
+     * Get authentication headers
+     *
+     * Returns the statically configured headers.
+     *
+     * @returns Promise resolving to authentication headers
+     */
+    getAuthHeaders(): Promise<Record<string, string>>;
+    /**
+     * Check if authenticated
+     *
+     * Returns true if any auth headers are configured.
+     *
+     * @returns true if headers are configured
+     */
+    isAuthenticated(): boolean;
+    /**
+     * Handle unauthorized response
+     *
+     * Static provider cannot refresh tokens, so always returns false.
+     *
+     * @returns Promise resolving to false (cannot refresh)
+     */
+    onUnauthorized(): Promise<boolean>;
+    /**
+     * Handle forbidden response
+     *
+     * Static provider has no special handling for 403.
+     */
+    onForbidden(): Promise<void>;
+}
+/**
+ * Configuration for callback-based authentication
+ *
+ * Used to configure CallbackAuthProvider with dynamic token retrieval.
+ */
+export interface CallbackAuthConfig {
+    /**
+     * Function to get the current access token
+     *
+     * Called before each API request to get a fresh token.
+     * Should return null if not authenticated.
+     */
+    getToken: () => Promise<string | null>;
+    /**
+     * Optional callback when 401 Unauthorized is received
+     *
+     * Can be used to trigger token refresh.
+     *
+     * @returns Promise resolving to true if token was refreshed successfully
+     */
+    onUnauthorized?: () => Promise<boolean>;
+    /**
+     * Optional callback when 403 Forbidden is received
+     *
+     * Can be used to show permission error UI.
+     */
+    onForbidden?: () => Promise<void>;
+}
+/**
+ * Callback-based authentication provider
+ *
+ * Provides authentication using callback functions for dynamic token retrieval.
+ * Ideal for enterprise integrations where the parent application manages auth.
+ *
+ * @example
+ * ```typescript
+ * const authProvider = new CallbackAuthProvider({
+ *   getToken: async () => {
+ *     return authService.getAccessToken();
+ *   },
+ *   onUnauthorized: async () => {
+ *     const refreshed = await authService.refreshToken();
+ *     return refreshed;
+ *   },
+ *   onForbidden: async () => {
+ *     showError("You don't have permission to access this resource");
+ *   }
+ * });
+ * ```
+ */
+export declare class CallbackAuthProvider implements AuthProvider {
+    /** Function to get the current token */
+    private getToken;
+    /** Optional unauthorized callback */
+    private onUnauthorizedCallback?;
+    /** Optional forbidden callback */
+    private onForbiddenCallback?;
+    /**
+     * Create a new CallbackAuthProvider
+     *
+     * @param config - Callback authentication configuration
+     */
+    constructor(config: CallbackAuthConfig);
+    /**
+     * Get authentication headers
+     *
+     * Calls the getToken callback to retrieve the current token.
+     *
+     * @returns Promise resolving to authentication headers
+     */
+    getAuthHeaders(): Promise<Record<string, string>>;
+    /**
+     * Check if authenticated
+     *
+     * For callback-based auth, we assume authenticated if getToken exists.
+     * The actual token validity is checked when making requests.
+     *
+     * @returns true (assumes authenticated, actual check happens on request)
+     */
+    isAuthenticated(): boolean;
+    /**
+     * Handle unauthorized response
+     *
+     * Calls the onUnauthorized callback if provided.
+     *
+     * @returns Promise resolving to true if auth was refreshed
+     */
+    onUnauthorized(): Promise<boolean>;
+    /**
+     * Handle forbidden response
+     *
+     * Calls the onForbidden callback if provided.
+     */
+    onForbidden(): Promise<void>;
+}
+/**
+ * No-op authentication provider
+ *
+ * Used when no authentication is required.
+ * Provides empty headers and always returns not authenticated.
+ */
+export declare class NoAuthProvider implements AuthProvider {
+    /**
+     * Get authentication headers
+     *
+     * Returns empty headers (no auth).
+     *
+     * @returns Promise resolving to empty object
+     */
+    getAuthHeaders(): Promise<Record<string, string>>;
+    /**
+     * Check if authenticated
+     *
+     * Always returns false (no auth configured).
+     *
+     * @returns false
+     */
+    isAuthenticated(): boolean;
+}
+/**
+ * Create an AuthProvider from legacy endpointConfig.auth configuration
+ *
+ * Used internally for backward compatibility with existing code that uses
+ * the old auth configuration format in EndpointConfig.
+ *
+ * @param authConfig - Legacy auth configuration from EndpointConfig
+ * @returns AuthProvider instance
+ */
+export declare function createAuthProviderFromLegacyConfig(authConfig?: {
+    type: "none" | "bearer" | "api_key" | "custom";
+    token?: string;
+    apiKey?: string;
+    headers?: Record<string, string>;
+}): AuthProvider;