@flowdrop/flowdrop 2.0.0-beta.1 → 2.0.0-beta.2

package/dist/services/settingsService.js

@@ -7,7 +7,8 @@
  *
  * @module services/settingsService
  */
-import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
+import { buildEndpointUrl } from '../config/endpoints.js';
+import { authenticatedFetch } from '../utils/fetchWithAuth.js';
 // =========================================================================
 // Configuration
 // =========================================================================
@@ -16,12 +17,20 @@ import { buildEndpointUrl, getEndpointHeaders } from '../config/endpoints.js';
  */
 let endpointConfig = null;
 /**
- * Set the endpoint configuration for settings API calls
+ * Auth provider reference, applied to every settings request so the backend
+ * sync path authenticates consistently with the rest of the library.
+ */
+let authProvider;
+/**
+ * Set the endpoint configuration (and optional auth provider) for settings API
+ * calls.
  *
  * @param config - Endpoint configuration
+ * @param provider - Optional auth provider supplying request auth headers
  */
-export function setSettingsEndpointConfig(config) {
+export function setSettingsEndpointConfig(config, provider) {
     endpointConfig = config;
+    authProvider = provider;
 }
 /**
  * Get the current endpoint configuration
@@ -47,10 +56,10 @@ async function settingsRequest(endpointKey, endpointPath, options = {}) {
         throw new Error('Endpoint configuration not set. Call setSettingsEndpointConfig() first.');
     }
     const url = buildEndpointUrl(endpointConfig, endpointPath);
-    const headers = getEndpointHeaders(endpointConfig, endpointKey);
-    const response = await fetch(url, {
-        headers,
-        ...options
+    const response = await authenticatedFetch(url, options, {
+        config: endpointConfig,
+        endpointKey,
+        authProvider
     });
     // Check if response is JSON
     const contentType = response.headers.get('content-type');
@@ -151,11 +160,12 @@ export class SettingsService {
      * Create a new settings service instance
      *
      * @param config - Endpoint configuration
+     * @param authProvider - Optional auth provider applied to settings requests
      */
-    constructor(config) {
+    constructor(config, authProvider) {
         this.config = config;
-        // Also set the module-level config
-        setSettingsEndpointConfig(config);
+        // Also set the module-level config + auth provider
+        setSettingsEndpointConfig(config, authProvider);
     }
     /**
      * Get user preferences from the backend
@@ -189,8 +199,9 @@ export class SettingsService {
  * Create a settings service instance
  *
  * @param config - Endpoint configuration
+ * @param authProvider - Optional auth provider applied to settings requests
  * @returns SettingsService instance
  */
-export function createSettingsService(config) {
-    return new SettingsService(config);
+export function createSettingsService(config, authProvider) {
+    return new SettingsService(config, authProvider);
 }

package/dist/stores/apiContext.d.ts

@@ -40,6 +40,17 @@ export declare class ApiContext {
      * Discards any previously built client so the next access rebuilds it.
      */
     configure(config: EndpointConfig, authProvider?: AuthProvider): void;
+    /**
+     * Swap the auth provider at runtime — e.g. on login or logout — without
+     * reconfiguring endpoints or remounting. Propagates to the live client so
+     * in-flight components keep working against the same instance.
+     *
+     * Per-instance services read `fd.api.authProvider` per request, so they pick
+     * up the new provider on their next call automatically.
+     *
+     * @param authProvider - The new authentication provider
+     */
+    setAuthProvider(authProvider: AuthProvider): void;
     /** Whether {@link configure} has been called with a usable config. */
     isConfigured(): boolean;
 }

package/dist/stores/apiContext.js

@@ -58,6 +58,21 @@ export class ApiContext {
         // Drop the cached client so it picks up the new config/auth on next access.
         this.#client = null;
     }
+    /**
+     * Swap the auth provider at runtime — e.g. on login or logout — without
+     * reconfiguring endpoints or remounting. Propagates to the live client so
+     * in-flight components keep working against the same instance.
+     *
+     * Per-instance services read `fd.api.authProvider` per request, so they pick
+     * up the new provider on their next call automatically.
+     *
+     * @param authProvider - The new authentication provider
+     */
+    setAuthProvider(authProvider) {
+        this.#authProvider = authProvider;
+        // Keep the cached client (and its in-flight consumers) in sync.
+        this.#client?.setAuthProvider(authProvider);
+    }
     /** Whether {@link configure} has been called with a usable config. */
     isConfigured() {
         return Boolean(this.#config);

package/dist/stores/categoriesStore.svelte.js

@@ -28,7 +28,6 @@ export class CategoriesStore {
     #categories = $state([...DEFAULT_CATEGORIES]);
     /** Derived lookup map: category name → CategoryDefinition. */
     #categoryMap = $derived((() => {
-        // eslint-disable-next-line svelte/prefer-svelte-reactivity -- rebuilt whole inside $derived, never mutated afterwards
         const map = new Map();
         for (const cat of this.#categories) {
             map.set(cat.name, cat);

package/dist/stores/playgroundStore.svelte.js

@@ -109,7 +109,6 @@ export class PlaygroundStore {
     // acknowledged optimistic write, overwritten by the next server response.
     #isExecuting = $derived(this.#currentSession?.status === 'running');
     /** Cleanups for active subscribeToSessionStatus effect roots. */
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- non-reactive bookkeeping registry; nothing renders from it
     #statusSubscriptions = new Set();
     /** Bound mutation facade — see {@link PlaygroundStoreActions}. */
     actions;
@@ -354,7 +353,6 @@ export class PlaygroundStore {
         if (!this.#currentSession)
             return;
         const executions = [...(this.#currentSession.executions ?? [])];
-        // eslint-disable-next-line svelte/prefer-svelte-reactivity -- transient local for dedup within this call
         const seenIds = new Set(executions.map((e) => e.id));
         let added = false;
         let gainedMainRun = false;

package/dist/svelte-app.js

@@ -400,7 +400,8 @@ export async function mountWorkflowEditor(container, options = {}) {
         target: container,
         props: {
             instance: fd,
-            endpointConfig: config
+            endpointConfig: config,
+            authProvider
         }
     });
     // Create the mounted app interface (simpler version)

package/dist/types/auth.d.ts

@@ -2,7 +2,9 @@
  * 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.
+ * An AuthProvider is supplied at mount time (or via `fd.api.configure`) and can
+ * be swapped at runtime with `fd.api.setAuthProvider(...)` — e.g. on login or
+ * logout — without remounting.
  *
  * @module types/auth
  */
@@ -15,8 +17,7 @@
  * @example
  * ```typescript
  * const authProvider: AuthProvider = {
- *   getAuthHeaders: async () => ({ Authorization: "Bearer token123" }),
- *   isAuthenticated: () => true
+ *   getAuthHeaders: async () => ({ Authorization: "Bearer token123" })
  * };
  * ```
  */
@@ -30,15 +31,6 @@ export interface AuthProvider {
      * @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
      *
@@ -68,6 +60,11 @@ export interface StaticAuthConfig {
     token?: string;
     /** API key (used when type is "api_key") */
     apiKey?: string;
+    /**
+     * Header name to carry the API key (used when type is "api_key").
+     * Defaults to `"X-API-Key"`.
+     */
+    apiKeyHeader?: string;
     /** Custom headers (used when type is "custom") */
     headers?: Record<string, string>;
 }
@@ -119,28 +116,6 @@ export declare class StaticAuthProvider implements AuthProvider {
      * @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
@@ -213,15 +188,6 @@ export declare class CallbackAuthProvider implements AuthProvider {
      * @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
      *
@@ -252,12 +218,4 @@ export declare class NoAuthProvider implements AuthProvider {
      * @returns Promise resolving to empty object
      */
     getAuthHeaders(): Promise<Record<string, string>>;
-    /**
-     * Check if authenticated
-     *
-     * Always returns false (no auth configured).
-     *
-     * @returns false
-     */
-    isAuthenticated(): boolean;
 }

package/dist/types/auth.js

@@ -2,7 +2,9 @@
  * 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.
+ * An AuthProvider is supplied at mount time (or via `fd.api.configure`) and can
+ * be swapped at runtime with `fd.api.setAuthProvider(...)` — e.g. on login or
+ * logout — without remounting.
  *
  * @module types/auth
  */
@@ -55,7 +57,7 @@ export class StaticAuthProvider {
                 break;
             case 'api_key':
                 if (config.apiKey) {
-                    this.headers['X-API-Key'] = config.apiKey;
+                    this.headers[config.apiKeyHeader ?? 'X-API-Key'] = config.apiKey;
                 }
                 break;
             case 'custom':
@@ -79,35 +81,6 @@ export class StaticAuthProvider {
     async getAuthHeaders() {
         return this.headers;
     }
-    /**
-     * Check if authenticated
-     *
-     * Returns true if any auth headers are configured.
-     *
-     * @returns true if headers are configured
-     */
-    isAuthenticated() {
-        return Object.keys(this.headers).length > 0;
-    }
-    /**
-     * Handle unauthorized response
-     *
-     * Static provider cannot refresh tokens, so always returns false.
-     *
-     * @returns Promise resolving to false (cannot refresh)
-     */
-    async onUnauthorized() {
-        // Static provider cannot refresh tokens
-        return false;
-    }
-    /**
-     * Handle forbidden response
-     *
-     * Static provider has no special handling for 403.
-     */
-    async onForbidden() {
-        // No special handling for static provider
-    }
 }
 /**
  * Callback-based authentication provider
@@ -162,19 +135,6 @@ export class CallbackAuthProvider {
         }
         return {};
     }
-    /**
-     * 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() {
-        // For callback-based auth, we assume authenticated if getToken exists
-        // The actual token validity is checked when making requests
-        return true;
-    }
     /**
      * Handle unauthorized response
      *
@@ -216,14 +176,4 @@ export class NoAuthProvider {
     async getAuthHeaders() {
         return {};
     }
-    /**
-     * Check if authenticated
-     *
-     * Always returns false (no auth configured).
-     *
-     * @returns false
-     */
-    isAuthenticated() {
-        return false;
-    }
 }

package/dist/types/index.d.ts

@@ -2,9 +2,9 @@
  * Core types for the Workflow Library
  */
 import type { Component } from 'svelte';
-import type { Node, Edge, XYPosition } from '@xyflow/svelte';
-import { ConnectionLineType } from '@xyflow/svelte';
+import type { Node, Edge, XYPosition, ConnectionLineType } from '@xyflow/svelte';
 import type { EndpointConfig } from '../config/endpoints.js';
+import type { AuthProvider } from './auth.js';
 /**
  * Built-in node categories that ship with FlowDrop.
  * These categories have predefined icons, colors, and display names.
@@ -1231,6 +1231,8 @@ export interface PipelineViewProps {
     pipelineId: string | null;
     workflow: Workflow;
     endpointConfig: EndpointConfig;
+    /** Auth provider for building authenticated API clients in custom views. */
+    authProvider?: AuthProvider;
     refreshTrigger?: number;
 }
 /** A custom view injected into the PipelinePanel view switcher. */

package/dist/types/index.js

@@ -1,7 +1,6 @@
 /**
  * Core types for the Workflow Library
  */
-import { ConnectionLineType } from '@xyflow/svelte';
 /**
  * Default workflow format used when none is specified.
  */

package/dist/utils/edgeStyling.js

@@ -5,10 +5,14 @@
  * visual styling to workflow edges based on source port data types.
  * Used by both the visual editor and the command DSL system.
  */
-import { MarkerType } from '@xyflow/svelte';
 import { extractPortId } from '../utils/handleIds.js';
 import { isLoopbackEdge } from '../utils/connections.js';
 import { EDGE_MARKER_SIZES } from '../config/constants.js';
+// xyflow's `MarkerType.ArrowClosed`, inlined as its literal value. This module
+// is shared with the headless command DSL (reachable from `@flowdrop/flowdrop/core`),
+// so it must NOT carry a runtime import of @xyflow/svelte — a type-only import
+// plus this constant keeps the marker type-safe without the dependency.
+const ARROW_CLOSED_MARKER = 'arrowclosed';
 /**
  * Check if a port ID matches a dynamic branch in a Gateway node.
  * Gateway nodes store branches in config.branches array.
@@ -101,7 +105,7 @@ export function applyConnectionStyling(edge, sourceNode, targetNode) {
                 'stroke: var(--fd-edge-loopback); stroke-dasharray: var(--fd-edge-loopback-dasharray); stroke-width: var(--fd-edge-loopback-width); opacity: var(--fd-edge-loopback-opacity);';
             edge.class = 'flowdrop--edge--loopback';
             edge.markerEnd = {
-                type: MarkerType.ArrowClosed,
+                type: ARROW_CLOSED_MARKER,
                 ...EDGE_MARKER_SIZES.loopback,
                 color: 'var(--fd-edge-loopback)'
             };
@@ -110,7 +114,7 @@ export function applyConnectionStyling(edge, sourceNode, targetNode) {
             edge.style = 'stroke: var(--fd-edge-trigger); stroke-width: var(--fd-edge-trigger-width);';
             edge.class = 'flowdrop--edge--trigger';
             edge.markerEnd = {
-                type: MarkerType.ArrowClosed,
+                type: ARROW_CLOSED_MARKER,
                 ...EDGE_MARKER_SIZES.trigger,
                 color: 'var(--fd-edge-trigger)'
             };
@@ -119,7 +123,7 @@ export function applyConnectionStyling(edge, sourceNode, targetNode) {
             edge.style = 'stroke: var(--fd-edge-tool); stroke-dasharray: 5 3;';
             edge.class = 'flowdrop--edge--tool';
             edge.markerEnd = {
-                type: MarkerType.ArrowClosed,
+                type: ARROW_CLOSED_MARKER,
                 ...EDGE_MARKER_SIZES.tool,
                 color: 'var(--fd-edge-tool)'
             };
@@ -129,7 +133,7 @@ export function applyConnectionStyling(edge, sourceNode, targetNode) {
             edge.style = 'stroke: var(--fd-edge-data);';
             edge.class = 'flowdrop--edge--data';
             edge.markerEnd = {
-                type: MarkerType.ArrowClosed,
+                type: ARROW_CLOSED_MARKER,
                 ...EDGE_MARKER_SIZES.data,
                 color: 'var(--fd-edge-data)'
             };

package/dist/utils/fetchWithAuth.d.ts

@@ -1,25 +1,46 @@
 /**
- * Fetch authentication utilities
+ * Authenticated fetch
  *
- * Shared logic for building HTTP headers with authentication.
- * Used by components that make authenticated API requests (e.g., FormAutocomplete).
+ * The single fetch path for FlowDrop's per-instance services. It builds request
+ * headers (static endpoint headers + the {@link AuthProvider}'s headers + any
+ * caller headers) and uniformly applies the auth lifecycle: on `401` it invokes
+ * `onUnauthorized()` and — if that reports a successful refresh — retries the
+ * request once with freshly fetched headers; on `403` it invokes
+ * `onForbidden()`. Callers receive the raw {@link Response} and keep their own
+ * status/parse handling.
+ *
+ * Routing every service through this helper means a configured `AuthProvider`
+ * authenticates *and* refreshes consistently — matching the behaviour the typed
+ * workflow/node API gets from {@link EnhancedFlowDropApiClient}.
  *
  * @module utils/fetchWithAuth
  */
+import type { EndpointConfig } from '../config/endpoints.js';
 import type { AuthProvider } from '../types/auth.js';
 /**
- * Build fetch headers with optional authentication
- *
- * Constructs standard JSON request headers and merges in authentication
- * headers from the provided AuthProvider, if available.
+ * Options describing how to authenticate and where the base headers come from.
  *
- * @param authProvider - Optional auth provider to get headers from
- * @returns Promise resolving to a complete headers object
+ * Provide `config` + `endpointKey` to source static endpoint headers (the usual
+ * case for endpoint-keyed services), or `baseHeaders` for ad-hoc requests that
+ * are not tied to a configured endpoint (e.g. a user-configured autocomplete
+ * URL). When neither is given the request carries only JSON defaults plus auth.
+ */
+export interface AuthenticatedFetchOptions {
+    /** Auth provider supplying `Authorization` etc. and 401/403 lifecycle hooks. */
+    authProvider?: AuthProvider;
+    /** Endpoint configuration, used with `endpointKey` to look up static headers. */
+    config?: EndpointConfig;
+    /** Endpoint key identifying which static headers to apply. */
+    endpointKey?: string;
+    /** Base headers for requests not tied to a configured endpoint. */
+    baseHeaders?: Record<string, string>;
+}
+/**
+ * Perform an authenticated fetch with consistent 401/403 handling.
  *
- * @example
- * ```typescript
- * const headers = await buildFetchHeaders(authProvider);
- * const response = await fetch(url, { headers });
- * ```
+ * @param url - The fully-resolved request URL
+ * @param init - Standard fetch options (method, body, signal, headers, …)
+ * @param opts - Auth provider and header source
+ * @returns The raw {@link Response}; callers handle `.ok`/parsing themselves
  */
-export declare function buildFetchHeaders(authProvider?: AuthProvider): Promise<Record<string, string>>;
+export declare function authenticatedFetch(url: string, init?: RequestInit, opts?: AuthenticatedFetchOptions): Promise<Response>;

package/dist/utils/fetchWithAuth.js

@@ -1,34 +1,64 @@
 /**
- * Fetch authentication utilities
+ * Authenticated fetch
  *
- * Shared logic for building HTTP headers with authentication.
- * Used by components that make authenticated API requests (e.g., FormAutocomplete).
+ * The single fetch path for FlowDrop's per-instance services. It builds request
+ * headers (static endpoint headers + the {@link AuthProvider}'s headers + any
+ * caller headers) and uniformly applies the auth lifecycle: on `401` it invokes
+ * `onUnauthorized()` and — if that reports a successful refresh — retries the
+ * request once with freshly fetched headers; on `403` it invokes
+ * `onForbidden()`. Callers receive the raw {@link Response} and keep their own
+ * status/parse handling.
+ *
+ * Routing every service through this helper means a configured `AuthProvider`
+ * authenticates *and* refreshes consistently — matching the behaviour the typed
+ * workflow/node API gets from {@link EnhancedFlowDropApiClient}.
  *
  * @module utils/fetchWithAuth
  */
+import { getEndpointHeaders } from '../config/endpoints.js';
+const DEFAULT_HEADERS = {
+    Accept: 'application/json',
+    'Content-Type': 'application/json'
+};
 /**
- * Build fetch headers with optional authentication
- *
- * Constructs standard JSON request headers and merges in authentication
- * headers from the provided AuthProvider, if available.
- *
- * @param authProvider - Optional auth provider to get headers from
- * @returns Promise resolving to a complete headers object
+ * Build the merged header set: base headers < auth headers < per-request headers.
  *
- * @example
- * ```typescript
- * const headers = await buildFetchHeaders(authProvider);
- * const response = await fetch(url, { headers });
- * ```
+ * Re-invoked for the retry so a refreshed token is picked up.
  */
-export async function buildFetchHeaders(authProvider) {
-    const headers = {
-        Accept: 'application/json',
-        'Content-Type': 'application/json'
-    };
-    if (authProvider) {
-        const authHeaders = await authProvider.getAuthHeaders();
-        Object.assign(headers, authHeaders);
+async function buildHeaders(init, opts) {
+    const headers = opts.config && opts.endpointKey
+        ? getEndpointHeaders(opts.config, opts.endpointKey)
+        : { ...DEFAULT_HEADERS, ...opts.baseHeaders };
+    if (opts.authProvider) {
+        Object.assign(headers, await opts.authProvider.getAuthHeaders());
+    }
+    if (init.headers) {
+        Object.assign(headers, init.headers);
     }
     return headers;
 }
+/**
+ * Perform an authenticated fetch with consistent 401/403 handling.
+ *
+ * @param url - The fully-resolved request URL
+ * @param init - Standard fetch options (method, body, signal, headers, …)
+ * @param opts - Auth provider and header source
+ * @returns The raw {@link Response}; callers handle `.ok`/parsing themselves
+ */
+export async function authenticatedFetch(url, init = {}, opts = {}) {
+    const headers = await buildHeaders(init, opts);
+    let response = await fetch(url, { ...init, headers });
+    // 401 → let the provider refresh, then retry once with fresh headers.
+    if (response.status === 401 && opts.authProvider?.onUnauthorized) {
+        const refreshed = await opts.authProvider.onUnauthorized();
+        if (refreshed) {
+            const retryHeaders = await buildHeaders(init, opts);
+            response = await fetch(url, { ...init, headers: retryHeaders });
+        }
+    }
+    // 403 → notify the provider (e.g. surface a permission error).
+    if (response.status === 403 && opts.authProvider?.onForbidden) {
+        await opts.authProvider.onForbidden();
+    }
+    return response;
+}

package/dist/utils/nodeTypes.js

@@ -9,7 +9,7 @@
  *
  * Works with both built-in types and custom registered types.
  */
-import { resolveBuiltinAlias, isBuiltinType } from '../registry/builtinNodes.js';
+import { resolveBuiltinAlias, isBuiltinType } from '../registry/builtinNodeTypes.js';
 /**
  * Display names for built-in node types.
  */

package/package.json

@@ -3,7 +3,7 @@
   "description": "A drop-in visual workflow editor for any web application. You own the backend. You own the data. You own the orchestration.",
   "license": "MIT",
   "private": false,
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.2",
   "author": "Shibin Das (D34dMan)",
   "bugs": {
     "url": "https://github.com/flowdrop-io/flowdrop/issues"
@@ -289,6 +289,7 @@
     "watch:build": "npm-watch build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:bundle": "node scripts/check-bundle.mjs",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
     "lint": "eslint . && prettier --check .",
     "test": "vitest run",