@flowdrop/flowdrop 1.15.0 → 2.0.0-beta.2

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/events.d.ts

@@ -166,10 +166,13 @@ export interface FlowDropEventHandlers {
  */
 export interface FlowDropFeatures {
     /**
-     * Save drafts to localStorage automatically
+     * Save drafts to browser storage automatically
      *
      * When enabled, FlowDrop will periodically save the current workflow
-     * to localStorage as a draft. This helps prevent data loss.
+     * to draft storage (localStorage by default, configurable via the
+     * `draftStorage` mount option). This helps prevent data loss. End users
+     * can additionally opt out at runtime via the "Store Drafts in Browser"
+     * behavior setting.
      *
      * @default true
      */
@@ -177,7 +180,7 @@ export interface FlowDropFeatures {
     /**
      * Auto-save interval in milliseconds
      *
-     * How often to save drafts to localStorage when autoSaveDraft is enabled.
+     * How often to save drafts to storage when autoSaveDraft is enabled.
      *
      * @default 30000 (30 seconds)
      */

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.
@@ -208,7 +208,7 @@ export type BuiltinNodeType = 'note' | 'simple' | 'square' | 'atom' | 'tool' | '
  * Includes built-in types and allows custom registered types.
  *
  * Built-in types: note, simple, square, tool, gateway, terminal, default
- * Custom types: Any string registered via nodeComponentRegistry
+ * Custom types: Any string registered via fd.nodes
  *
  * @example
  * ```typescript
@@ -1188,8 +1188,9 @@ export interface Workflow {
     description?: string;
     nodes: WorkflowNode[];
     edges: WorkflowEdge[];
-    metadata?: {
-        version: string;
+    metadata: {
+        /** Workflow schema format version — identifies the document format, not the workflow's own revision. */
+        schemaVersion: string;
         createdAt: string;
         updatedAt: string;
         author?: string;
@@ -1230,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. */
@@ -1243,6 +1246,31 @@ export interface PipelineViewDef {
     /** Svelte component that receives PipelineViewProps */
     component: Component<PipelineViewProps>;
 }
+/**
+ * One job execution of a node within a pipeline run.
+ *
+ * Loop-orchestrated workflows create one job per iteration for the same
+ * node (labels carry an iteration suffix, e.g. "Invoke tool #2"), so a node
+ * can have several of these per run.
+ */
+export interface NodeJobExecution {
+    /** Job entity ID */
+    id?: string;
+    /** Job label, carries the iteration suffix (e.g. "Invoke tool #2") */
+    label?: string;
+    /** Job status */
+    status: NodeExecutionStatus;
+    /** ISO timestamp the job started, if it ran */
+    started?: string;
+    /** ISO timestamp the job completed, if it finished */
+    completed?: string;
+    /** Execution duration in milliseconds, if the job ran to completion */
+    executionTime?: number;
+    /** Precise execution duration in microseconds, when the backend provides it */
+    executionTimeUs?: number;
+    /** Error message if the job failed */
+    error?: string;
+}
 /**
  * Node execution tracking information
  */
@@ -1255,12 +1283,16 @@ export interface NodeExecutionInfo {
     lastExecuted?: string;
     /** Last execution duration in milliseconds */
     lastExecutionDuration?: number;
+    /** Precise last execution duration in microseconds, when the backend provides it */
+    lastExecutionDurationUs?: number;
     /** Last error message if execution failed */
     lastError?: string;
     /** Whether the node is currently being executed */
     isExecuting: boolean;
     /** Execution output data (e.g., active branches for gateway nodes) */
     output?: Record<string, unknown>;
+    /** Per-job execution history (loop iterations), in pipeline order */
+    jobs?: NodeJobExecution[];
 }
 /**
  * Workflow execution status

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/types/navbar.d.ts

@@ -11,4 +11,11 @@ export interface NavbarAction {
     onclick?: (event: Event) => void;
     /** If true, opens link in new tab with `rel="noopener noreferrer"`. */
     external?: boolean;
+    /**
+     * Optional group label. Items sharing the same `group` cluster together
+     * under a header inside the flyout dropdown. Ungrouped items render first.
+     * Group order follows first occurrence in the array. Ignored when the
+     * navbar is in split mode (the inline row of buttons).
+     */
+    group?: string;
 }

package/dist/types/playground.d.ts

@@ -376,11 +376,26 @@ export interface PlaygroundConfig {
      */
     showSidebar?: boolean;
     /**
-     * Whether to show the session header bar (default: true)
-     * When false, the header with session name and close button is hidden.
-     * Typically used together with showSidebar: false for minimal UI.
+     * Whether to show the ControlPanel header bar (default: true)
+     * When false, hides the entire header row: session label, session chip
+     * (with its New Session / session list popover) and the toolbar actions
+     * (Pipeline / Refresh / Logs). Use for a minimal, locked-down playground.
      */
     showSessionHeader?: boolean;
+    /**
+     * Whether to show the "New Session" entry in the session chip popover
+     * (default: true). When false, users cannot create additional sessions
+     * from the UI — useful for single-session playground embeds.
+     * No effect when showSessionHeader is false.
+     */
+    showNewSessionButton?: boolean;
+    /**
+     * Whether to show the session chip selector and its session list (default:
+     * true). When false, the chip dropdown is hidden entirely — users cannot
+     * switch sessions or see other sessions. Useful for locking a playground
+     * embed to a single session. No effect when showSessionHeader is false.
+     */
+    showSessionList?: boolean;
     /**
      * Determines if polling should stop for a given session status.
      * Override to customize which statuses pause polling.

package/dist/types/settings.d.ts

@@ -72,6 +72,19 @@ export interface BehaviorSettings {
     autoSave: boolean;
     /** Auto-save interval in milliseconds */
     autoSaveInterval: number;
+    /**
+     * Persist workflow drafts in browser storage.
+     *
+     * When enabled (default), unsaved changes are written to browser storage
+     * so they survive page reloads. On the default `localStorage` backend,
+     * drafts remain stored on the device even after the tab or browser is
+     * closed, until they are saved or cleared. Turning this off stops draft
+     * writes and removes the current draft.
+     *
+     * Caveat: the toggle applies per tab. Other tabs that are already open
+     * read settings at load time and keep writing drafts until reloaded.
+     */
+    storeDraftsInBrowser: boolean;
     /** Maximum number of undo history entries */
     undoHistoryLimit: number;
     /** Show confirmation dialog before deleting nodes */

package/dist/types/settings.js

@@ -70,6 +70,7 @@ export const DEFAULT_UI_SETTINGS = {
 export const DEFAULT_BEHAVIOR_SETTINGS = {
     autoSave: false,
     autoSaveInterval: 30000,
+    storeDraftsInBrowser: true,
     undoHistoryLimit: 50,
     confirmDelete: false,
     chatAutoRetry: true

package/dist/utils/colors.d.ts

@@ -4,6 +4,8 @@
  * Uses BEM syntax for CSS classes
  */
 import type { NodeCategory, PortDataTypeConfig } from '../types/index.js';
+import type { PortCompatibilityChecker } from './connections.js';
+import type { CategoriesStore } from '../stores/categoriesStore.svelte.js';
 /**
  * Category color mapping to design tokens (CSS variables)
  * Uses --fd-node-* tokens from tokens.css
@@ -14,20 +16,27 @@ export declare const CATEGORY_COLOR_TOKENS: Record<string, string>;
  * Get the design token for a category color.
  * Checks the categories store first (which includes API overrides),
  * then falls back to the static CATEGORY_COLOR_TOKENS map, then to slate.
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
+ * @param category - The node category
  */
-export declare function getCategoryColorToken(category: NodeCategory): string;
+export declare function getCategoryColorToken(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get the reference color token for a data type (configurable version)
+ * @param checker - The instance's port compatibility checker (provides data-type config)
+ * @param dataType - The data type
  */
-export declare function getDataTypeColorToken(dataType: string): string;
+export declare function getDataTypeColorToken(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Get data type configuration from port config
+ * @param checker - The instance's port compatibility checker
+ * @param dataType - The data type
  */
-export declare function getDataTypeConfig(dataType: string): PortDataTypeConfig | undefined;
+export declare function getDataTypeConfig(checker: PortCompatibilityChecker, dataType: string): PortDataTypeConfig | undefined;
 /**
  * Get all available data types from port configuration
+ * @param checker - The instance's port compatibility checker
  */
-export declare function getAvailableDataTypes(): PortDataTypeConfig[];
+export declare function getAvailableDataTypes(checker: PortCompatibilityChecker): PortDataTypeConfig[];
 /**
  * Default colors for fallback cases
  */
@@ -39,43 +48,49 @@ export declare const DEFAULT_COLORS: {
 };
 /**
  * Get category colors
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The color configuration for the category
  */
-export declare function getCategoryColors(category: NodeCategory): string;
+export declare function getCategoryColors(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get category background color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The background color class
  */
-export declare function getCategoryBackground(category: NodeCategory): string;
+export declare function getCategoryBackground(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get category accent color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The accent color class
  */
-export declare function getCategoryAccent(category: NodeCategory): string;
+export declare function getCategoryAccent(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get category text color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The text color class
  */
-export declare function getCategoryText(category: NodeCategory): string;
+export declare function getCategoryText(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get category border color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns The border color class
  */
-export declare function getCategoryBorder(category: NodeCategory): string;
+export declare function getCategoryBorder(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get node colors based on category and state
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The color configuration object
  */
-export declare function getNodeColors(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): {
+export declare function getNodeColors(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): {
     background: string;
     accent: string;
     text: string;
@@ -83,52 +98,58 @@ export declare function getNodeColors(category: NodeCategory, isError?: boolean,
 };
 /**
  * Get node background color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The background color
  */
-export declare function getNodeBackground(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+export declare function getNodeBackground(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
 /**
  * Get node accent color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The accent color
  */
-export declare function getNodeAccent(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+export declare function getNodeAccent(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
 /**
  * Get node text color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The text color
  */
-export declare function getNodeText(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+export declare function getNodeText(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
 /**
  * Get node border color
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @param isError - Whether the node is in error state
  * @param isProcessing - Whether the node is processing
  * @param isSelected - Whether the node is selected
  * @returns The border color
  */
-export declare function getNodeBorder(category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
+export declare function getNodeBorder(categories: CategoriesStore, category: NodeCategory, isError?: boolean, isProcessing?: boolean, isSelected?: boolean): string;
 /**
  * Get data type color
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type
  * @returns The color for the data type
  */
-export declare function getDataTypeColor(dataType: string): string;
+export declare function getDataTypeColor(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Parse typed array notation and get display information
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type (e.g., "string[]", "number", "object[]")
  * @returns Object with display information
  */
-export declare function parseDataTypeDisplay(dataType: string): {
+export declare function parseDataTypeDisplay(checker: PortCompatibilityChecker, dataType: string): {
     baseType: string;
     isArray: boolean;
     displayName: string;
@@ -136,10 +157,11 @@ export declare function parseDataTypeDisplay(dataType: string): {
 };
 /**
  * Get formatted display text for a data type
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type
  * @returns Formatted display text
  */
-export declare function getDataTypeDisplayText(dataType: string): string;
+export declare function getDataTypeDisplayText(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Check if a data type represents an array
  * @param dataType - The data type
@@ -191,30 +213,34 @@ export declare function getContrastTextColor(backgroundColor: string): string;
 export declare function resolveColorToken(token: string): string;
 /**
  * Get the appropriate contrast text color for a data type badge
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type (e.g., "array", "string", "number")
  * @returns CSS color value for text that provides good contrast on the data type's background
  */
-export declare function getContrastTextColorForDataType(dataType: string): string;
+export declare function getContrastTextColorForDataType(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Get the appropriate contrast text color for a category badge
+ * @param categories - The instance's categories store (e.g. `fd.categories`)
  * @param category - The node category
  * @returns CSS color value for text that provides good contrast on the category's background
  */
-export declare function getContrastTextColorForCategory(category: NodeCategory): string;
+export declare function getContrastTextColorForCategory(categories: CategoriesStore, category: NodeCategory): string;
 /**
  * Get a semi-transparent tinted background color for ports
  * Creates a cohesive look with the icon wrapper styling
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type
  * @param opacity - Opacity percentage (default 25%)
  * @returns CSS color-mix expression for the tinted background
  */
-export declare function getPortBackgroundColor(dataType: string, opacity?: number): string;
+export declare function getPortBackgroundColor(checker: PortCompatibilityChecker, dataType: string, opacity?: number): string;
 /**
  * Get the border color for ports (solid data type color)
+ * @param checker - The instance's port compatibility checker
  * @param dataType - The data type
  * @returns CSS color value for the port border
  */
-export declare function getPortBorderColor(dataType: string): string;
+export declare function getPortBorderColor(checker: PortCompatibilityChecker, dataType: string): string;
 /**
  * Convert RGB components to hex color string
  * @param r - Red component (0-255)