@flowdrop/flowdrop 1.0.0 → 1.1.0

package/dist/svelte-app.d.ts

@@ -6,13 +6,13 @@
  *
  * @module svelte-app
  */
-import type { Workflow, NodeMetadata, PortConfig, CategoryDefinition } from './types/index.js';
-import type { EndpointConfig } from './config/endpoints.js';
-import type { AuthProvider } from './types/auth.js';
-import type { FlowDropEventHandlers, FlowDropFeatures } from './types/events.js';
-import type { WorkflowFormatAdapter } from './registry/workflowFormatRegistry.js';
-import './registry/builtinFormats.js';
-import type { PartialSettings } from './types/settings.js';
+import type { Workflow, NodeMetadata, PortConfig, CategoryDefinition } from "./types/index.js";
+import type { EndpointConfig } from "./config/endpoints.js";
+import type { AuthProvider } from "./types/auth.js";
+import type { FlowDropEventHandlers, FlowDropFeatures } from "./types/events.js";
+import type { WorkflowFormatAdapter } from "./registry/workflowFormatRegistry.js";
+import "./registry/builtinFormats.js";
+import type { PartialSettings } from "./types/settings.js";
 /**
  * Navbar action configuration
  */
@@ -20,7 +20,7 @@ export interface NavbarAction {
     label: string;
     href: string;
     icon?: string;
-    variant?: 'primary' | 'secondary' | 'outline';
+    variant?: "primary" | "secondary" | "outline";
     onclick?: (event: Event) => void;
 }
 /**
@@ -52,7 +52,7 @@ export interface FlowDropMountOptions {
     /** Pipeline ID for status display */
     pipelineId?: string;
     /** Node execution statuses */
-    nodeStatuses?: Record<string, 'pending' | 'running' | 'completed' | 'error'>;
+    nodeStatuses?: Record<string, "pending" | "running" | "completed" | "error">;
     /** Custom navbar title */
     navbarTitle?: string;
     /** Custom navbar actions */

package/dist/svelte-app.js

@@ -6,22 +6,22 @@
  *
  * @module svelte-app
  */
-import { mount, unmount } from 'svelte';
-import WorkflowEditor from './components/WorkflowEditor.svelte';
-import App from './components/App.svelte';
-import { workflowFormatRegistry } from './registry/workflowFormatRegistry.js';
-import './registry/builtinFormats.js';
-import { initializePortCompatibility } from './utils/connections.js';
-import { DEFAULT_PORT_CONFIG } from './config/defaultPortConfig.js';
-import { fetchPortConfig } from './services/portConfigApi.js';
-import { fetchCategories } from './services/categoriesApi.js';
-import { initializeCategories } from './stores/categoriesStore.svelte.js';
-import { isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange } from './stores/workflowStore.svelte.js';
-import { DraftAutoSaveManager, getDraftStorageKey } from './services/draftStorage.js';
-import { mergeFeatures } from './types/events.js';
-import { initializeSettings } from './stores/settingsStore.svelte.js';
-import { logger } from './utils/logger.js';
-import { globalSaveWorkflow, globalExportWorkflow } from './services/globalSave.js';
+import { mount, unmount } from "svelte";
+import WorkflowEditor from "./components/WorkflowEditor.svelte";
+import App from "./components/App.svelte";
+import { workflowFormatRegistry } from "./registry/workflowFormatRegistry.js";
+import "./registry/builtinFormats.js";
+import { initializePortCompatibility } from "./utils/connections.js";
+import { DEFAULT_PORT_CONFIG } from "./config/defaultPortConfig.js";
+import { fetchPortConfig } from "./services/portConfigApi.js";
+import { fetchCategories } from "./services/categoriesApi.js";
+import { initializeCategories } from "./stores/categoriesStore.svelte.js";
+import { isDirty, markAsSaved, getWorkflow as getWorkflowFromStore, setOnDirtyStateChange, setOnWorkflowChange, } from "./stores/workflowStore.svelte.js";
+import { DraftAutoSaveManager, getDraftStorageKey, } from "./services/draftStorage.js";
+import { mergeFeatures } from "./types/events.js";
+import { initializeSettings } from "./stores/settingsStore.svelte.js";
+import { logger } from "./utils/logger.js";
+import { globalSaveWorkflow, globalExportWorkflow, } from "./services/globalSave.js";
 /**
  * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
  *
@@ -47,7 +47,7 @@ import { globalSaveWorkflow, globalExportWorkflow } from './services/globalSave.
  * ```
  */
 export async function mountFlowDropApp(container, options = {}) {
-    const { workflow, nodes, endpointConfig, portConfig, categories, height = '100vh', width = '100%', showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey, formatAdapters } = options;
+    const { workflow, nodes, endpointConfig, portConfig, categories, height = "100vh", width = "100%", showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey, formatAdapters, } = options;
     // Register custom format adapters before mounting
     if (formatAdapters) {
         for (const adapter of formatAdapters) {
@@ -58,25 +58,25 @@ export async function mountFlowDropApp(container, options = {}) {
     const features = mergeFeatures(userFeatures);
     // Apply initial settings overrides and initialize theme
     await initializeSettings({
-        defaults: initialSettings
+        defaults: initialSettings,
     });
     // 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,
             endpoints: {
                 ...defaultEndpointConfig.endpoints,
-                ...endpointConfig.endpoints
-            }
+                ...endpointConfig.endpoints,
+            },
         };
     }
     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
@@ -87,7 +87,7 @@ export async function mountFlowDropApp(container, options = {}) {
             finalPortConfig = await fetchPortConfig(config);
         }
         catch (error) {
-            logger.warn('Failed to fetch port config from API, using default:', error);
+            logger.warn("Failed to fetch port config from API, using default:", error);
             finalPortConfig = DEFAULT_PORT_CONFIG;
         }
     }
@@ -105,7 +105,7 @@ export async function mountFlowDropApp(container, options = {}) {
             initializeCategories(fetchedCategories);
         }
         catch (error) {
-            logger.warn('Failed to fetch categories from API, using defaults:', error);
+            logger.warn("Failed to fetch categories from API, using defaults:", error);
         }
     }
     // Set up event handler callbacks in the store
@@ -135,8 +135,8 @@ export async function mountFlowDropApp(container, options = {}) {
             endpointConfig: config,
             authProvider,
             eventHandlers,
-            features
-        }
+            features,
+        },
     });
     // Set up draft auto-save manager
     let draftManager = null;
@@ -147,7 +147,7 @@ export async function mountFlowDropApp(container, options = {}) {
             interval: features.autoSaveDraftInterval,
             enabled: features.autoSaveDraft,
             getWorkflow: getWorkflowFromStore,
-            isDirty
+            isDirty,
         });
         draftManager.start();
     }
@@ -155,7 +155,7 @@ export async function mountFlowDropApp(container, options = {}) {
     const state = {
         svelteApp,
         draftManager,
-        eventHandlers: eventHandlers ?? null
+        eventHandlers: eventHandlers ?? null,
     };
     // Create the mounted app interface
     const mountedApp = {
@@ -195,7 +195,7 @@ export async function mountFlowDropApp(container, options = {}) {
         },
         export: () => {
             globalExportWorkflow();
-        }
+        },
     };
     return mountedApp;
 }
@@ -214,19 +214,19 @@ 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,
             endpoints: {
                 ...defaultEndpointConfig.endpoints,
-                ...endpointConfig.endpoints
-            }
+                ...endpointConfig.endpoints,
+            },
         };
     }
     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
@@ -237,7 +237,7 @@ export async function mountWorkflowEditor(container, options = {}) {
             finalPortConfig = await fetchPortConfig(config);
         }
         catch (error) {
-            logger.warn('Failed to fetch port config from API, using default:', error);
+            logger.warn("Failed to fetch port config from API, using default:", error);
             finalPortConfig = DEFAULT_PORT_CONFIG;
         }
     }
@@ -255,7 +255,7 @@ export async function mountWorkflowEditor(container, options = {}) {
             initializeCategories(fetchedCategories);
         }
         catch (error) {
-            logger.warn('Failed to fetch categories from API, using defaults:', error);
+            logger.warn("Failed to fetch categories from API, using defaults:", error);
         }
     }
     // Create the Svelte component
@@ -263,8 +263,8 @@ export async function mountWorkflowEditor(container, options = {}) {
         target: container,
         props: {
             nodes,
-            endpointConfig: config
-        }
+            endpointConfig: config,
+        },
     });
     // Create the mounted app interface (simpler version)
     const mountedApp = {
@@ -279,7 +279,7 @@ export async function mountWorkflowEditor(container, options = {}) {
         },
         export: () => {
             globalExportWorkflow();
-        }
+        },
     };
     return mountedApp;
 }
@@ -289,7 +289,7 @@ export async function mountWorkflowEditor(container, options = {}) {
  * @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();
     }
 }

package/dist/themes/default.d.ts

@@ -0,0 +1,2 @@
+import type { FlowDropTheme } from "../types/theme.js";
+export declare const defaultTheme: FlowDropTheme;

package/dist/themes/default.js

@@ -0,0 +1,9 @@
+export const defaultTheme = {
+    name: "default",
+    config: {
+        sidebar: {
+            defaultOpen: true,
+            categoriesDefaultOpen: false,
+        },
+    },
+};

package/dist/themes/index.d.ts

@@ -0,0 +1,13 @@
+import type { FlowDropTheme, FlowDropThemeName } from "../types/theme.js";
+import { defaultTheme } from "./default.js";
+import { minimalTheme } from "./minimal.js";
+/**
+ * Resolve a theme prop to a complete FlowDropTheme object.
+ *
+ * When an object with a named base is provided, the named theme is used as a
+ * base and the inline overrides are merged on top:
+ *   resolveTheme({ name: 'minimal', skin: { tokens: { primary: '#e11d48' } } })
+ *   → minimal theme + { skin.tokens.primary: '#e11d48' }
+ */
+export declare function resolveTheme(theme: FlowDropTheme | FlowDropThemeName | undefined): FlowDropTheme;
+export { defaultTheme, minimalTheme };

package/dist/themes/index.js

@@ -0,0 +1,44 @@
+import { defaultTheme } from "./default.js";
+import { minimalTheme } from "./minimal.js";
+const builtinThemes = {
+    default: defaultTheme,
+    minimal: minimalTheme,
+};
+/**
+ * Resolve a theme prop to a complete FlowDropTheme object.
+ *
+ * When an object with a named base is provided, the named theme is used as a
+ * base and the inline overrides are merged on top:
+ *   resolveTheme({ name: 'minimal', skin: { tokens: { primary: '#e11d48' } } })
+ *   → minimal theme + { skin.tokens.primary: '#e11d48' }
+ */
+export function resolveTheme(theme) {
+    if (!theme || theme === "default")
+        return defaultTheme;
+    if (typeof theme === "string")
+        return builtinThemes[theme] ?? defaultTheme;
+    // Object form — check for a named base to merge on top of
+    const baseName = theme.name;
+    if (baseName && baseName !== "default" && builtinThemes[baseName]) {
+        const base = builtinThemes[baseName];
+        return {
+            name: baseName,
+            skin: theme.skin
+                ? {
+                    tokens: {
+                        ...(base.skin?.tokens ?? {}),
+                        ...(theme.skin.tokens ?? {}),
+                    },
+                }
+                : base.skin,
+            config: {
+                sidebar: {
+                    ...base.config?.sidebar,
+                    ...theme.config?.sidebar,
+                },
+            },
+        };
+    }
+    return theme;
+}
+export { defaultTheme, minimalTheme };

package/dist/themes/minimal.d.ts

@@ -0,0 +1,2 @@
+import type { FlowDropTheme } from "../types/theme.js";
+export declare const minimalTheme: FlowDropTheme;

package/dist/themes/minimal.js

@@ -0,0 +1,11 @@
+import { slateSkin } from "../skins/slate.js";
+export const minimalTheme = {
+    name: "minimal",
+    skin: slateSkin,
+    config: {
+        sidebar: {
+            defaultOpen: true,
+            categoriesDefaultOpen: true,
+        },
+    },
+};

package/dist/types/agentspec.d.ts

@@ -8,11 +8,11 @@
  * @see https://oracle.github.io/agent-spec/
  */
 /** Agent Spec node component_type discriminator values */
-export type AgentSpecNodeComponentType = 'start_node' | 'end_node' | 'llm_node' | 'api_node' | 'agent_node' | 'flow_node' | 'map_node' | 'branching_node' | 'tool_node';
+export type AgentSpecNodeComponentType = "start_node" | "end_node" | "llm_node" | "api_node" | "agent_node" | "flow_node" | "map_node" | "branching_node" | "tool_node";
 /** Agent Spec tool component_type discriminator values */
-export type AgentSpecToolComponentType = 'server_tool' | 'client_tool' | 'remote_tool';
+export type AgentSpecToolComponentType = "server_tool" | "client_tool" | "remote_tool";
 /** All Agent Spec component_type values */
-export type AgentSpecComponentType = 'agent' | 'flow' | AgentSpecNodeComponentType | AgentSpecToolComponentType | 'llm_config';
+export type AgentSpecComponentType = "agent" | "flow" | AgentSpecNodeComponentType | AgentSpecToolComponentType | "llm_config";
 /**
  * Agent Spec Property — JSON Schema-based input/output definition.
  *
@@ -56,15 +56,15 @@ export interface AgentSpecNodeBase {
 }
 /** Graph entry point */
 export interface AgentSpecStartNode extends AgentSpecNodeBase {
-    component_type: 'start_node';
+    component_type: "start_node";
 }
 /** Graph exit point */
 export interface AgentSpecEndNode extends AgentSpecNodeBase {
-    component_type: 'end_node';
+    component_type: "end_node";
 }
 /** LLM text generation node */
 export interface AgentSpecLLMNode extends AgentSpecNodeBase {
-    component_type: 'llm_node';
+    component_type: "llm_node";
     /** LLM configuration (inline or $component_ref string) */
     llm_config?: AgentSpecLLMConfig | string;
     /** System prompt template (supports {{variable}} syntax) */
@@ -76,7 +76,7 @@ export interface AgentSpecLLMNode extends AgentSpecNodeBase {
 }
 /** API call node */
 export interface AgentSpecAPINode extends AgentSpecNodeBase {
-    component_type: 'api_node';
+    component_type: "api_node";
     /** API endpoint URL */
     endpoint?: string;
     /** HTTP method */
@@ -88,19 +88,19 @@ export interface AgentSpecAPINode extends AgentSpecNodeBase {
 }
 /** Multi-round agent conversation node */
 export interface AgentSpecAgentNode extends AgentSpecNodeBase {
-    component_type: 'agent_node';
+    component_type: "agent_node";
     /** Agent reference ($component_ref or inline) */
     agent?: AgentSpecAgent | string;
 }
 /** Nested flow execution node */
 export interface AgentSpecFlowNode extends AgentSpecNodeBase {
-    component_type: 'flow_node';
+    component_type: "flow_node";
     /** Flow reference ($component_ref or inline) */
     flow?: AgentSpecFlow | string;
 }
 /** Map-reduce operation node */
 export interface AgentSpecMapNode extends AgentSpecNodeBase {
-    component_type: 'map_node';
+    component_type: "map_node";
     /** Input collection property name */
     input_collection?: string;
     /** Output collection property name */
@@ -110,13 +110,13 @@ export interface AgentSpecMapNode extends AgentSpecNodeBase {
 }
 /** Conditional routing node */
 export interface AgentSpecBranchingNode extends AgentSpecNodeBase {
-    component_type: 'branching_node';
+    component_type: "branching_node";
     /** Branch definitions with conditions */
     branches: AgentSpecBranch[];
 }
 /** Tool execution node */
 export interface AgentSpecToolNode extends AgentSpecNodeBase {
-    component_type: 'tool_node';
+    component_type: "tool_node";
     /** Tool reference ($component_ref or inline) */
     tool?: AgentSpecTool | string;
 }
@@ -171,7 +171,7 @@ export interface AgentSpecDataFlowEdge {
  * They separate control-flow (execution order) from data-flow (data routing).
  */
 export interface AgentSpecFlow {
-    component_type: 'flow';
+    component_type: "flow";
     /** Flow name */
     name: string;
     /** Human-readable description */
@@ -207,17 +207,17 @@ export interface AgentSpecToolBase {
 }
 /** Tool executed in the same runtime environment */
 export interface AgentSpecServerTool extends AgentSpecToolBase {
-    component_type: 'server_tool';
+    component_type: "server_tool";
     /** Function name or module path */
     function_name?: string;
 }
 /** Tool executed by the client, results returned to runtime */
 export interface AgentSpecClientTool extends AgentSpecToolBase {
-    component_type: 'client_tool';
+    component_type: "client_tool";
 }
 /** Tool triggered via RPC/REST calls */
 export interface AgentSpecRemoteTool extends AgentSpecToolBase {
-    component_type: 'remote_tool';
+    component_type: "remote_tool";
     /** Remote endpoint URL */
     endpoint?: string;
     /** HTTP method */
@@ -229,7 +229,7 @@ export interface AgentSpecRemoteTool extends AgentSpecToolBase {
 export type AgentSpecTool = AgentSpecServerTool | AgentSpecClientTool | AgentSpecRemoteTool;
 /** LLM model configuration */
 export interface AgentSpecLLMConfig {
-    component_type: 'llm_config';
+    component_type: "llm_config";
     /** Configuration name */
     name: string;
     /** Model identifier (e.g., "gpt-4o", "claude-sonnet-4-5-20250929") */
@@ -250,7 +250,7 @@ export interface AgentSpecLLMConfig {
  * tools, memory, and LLM configuration.
  */
 export interface AgentSpecAgent {
-    component_type: 'agent';
+    component_type: "agent";
     /** Agent name */
     name: string;
     /** Human-readable description */

package/dist/types/agentspec.js

@@ -11,7 +11,7 @@
 // Component Reference
 // ============================================================================
 /** Prefix for component references in Agent Spec */
-export const COMPONENT_REF_PREFIX = '$component_ref:';
+export const COMPONENT_REF_PREFIX = "$component_ref:";
 /**
  * Check if a value is a component reference string.
  *
@@ -22,7 +22,7 @@ export const COMPONENT_REF_PREFIX = '$component_ref:';
  * ```
  */
 export function isComponentRef(value) {
-    return typeof value === 'string' && value.startsWith(COMPONENT_REF_PREFIX);
+    return typeof value === "string" && value.startsWith(COMPONENT_REF_PREFIX);
 }
 /**
  * Extract the component ID from a component reference string.

package/dist/types/auth.d.ts

@@ -63,7 +63,7 @@ export interface AuthProvider {
  */
 export interface StaticAuthConfig {
     /** Authentication type */
-    type: 'none' | 'bearer' | 'api_key' | 'custom';
+    type: "none" | "bearer" | "api_key" | "custom";
     /** Bearer token (used when type is "bearer") */
     token?: string;
     /** API key (used when type is "api_key") */

package/dist/types/auth.js

@@ -48,22 +48,22 @@ export class StaticAuthProvider {
     constructor(config) {
         this.headers = {};
         switch (config.type) {
-            case 'bearer':
+            case "bearer":
                 if (config.token) {
-                    this.headers['Authorization'] = `Bearer ${config.token}`;
+                    this.headers["Authorization"] = `Bearer ${config.token}`;
                 }
                 break;
-            case 'api_key':
+            case "api_key":
                 if (config.apiKey) {
-                    this.headers['X-API-Key'] = config.apiKey;
+                    this.headers["X-API-Key"] = config.apiKey;
                 }
                 break;
-            case 'custom':
+            case "custom":
                 if (config.headers) {
                     this.headers = { ...config.headers };
                 }
                 break;
-            case 'none':
+            case "none":
             default:
                 // No headers needed
                 break;

package/dist/types/config.d.ts

@@ -4,13 +4,13 @@
  * This module contains configuration-specific types for the workflow editor.
  * For core workflow types (WorkflowNode, WorkflowEdge, etc.), see ./index.ts
  */
-import type { EndpointConfig } from '../config/endpoints.js';
-import type { PortConfig, NodeMetadata } from './index.js';
+import type { EndpointConfig } from "../config/endpoints.js";
+import type { PortConfig, NodeMetadata } from "./index.js";
 /**
  * Re-export core types from index.ts for convenience
  * This allows consumers to import from either location
  */
-export type { WorkflowNode, WorkflowEdge, NodePort, ExecutionResult, NodeMetadata } from './index.js';
+export type { WorkflowNode, WorkflowEdge, NodePort, ExecutionResult, NodeMetadata, } from "./index.js";
 export interface WorkflowEditorConfig {
     /** API configuration with endpoints */
     api: APIConfig;
@@ -19,7 +19,7 @@ export interface WorkflowEditorConfig {
     /** Port configuration system */
     ports: PortConfig;
     /** Theme configuration */
-    theme: 'light' | 'dark' | 'auto';
+    theme: "light" | "dark" | "auto";
     /** Editor features configuration */
     features: EditorFeatures;
     /** UI customization options */
@@ -108,7 +108,7 @@ export interface APIConfig {
     };
     /** Authentication configuration */
     auth: {
-        type: 'none' | 'bearer' | 'api_key' | 'custom';
+        type: "none" | "bearer" | "api_key" | "custom";
         token?: string;
         apiKey?: string;
         headers?: Record<string, string>;
@@ -135,7 +135,7 @@ export interface ExecutionConfig {
 }
 export interface StorageConfig {
     /** Storage type */
-    type: 'api' | 'local' | 'session' | 'custom';
+    type: "api" | "local" | "session" | "custom";
     /** Auto-save interval in milliseconds */
     autoSaveInterval: number;
     /** Maximum undo steps */

package/dist/types/events.d.ts

@@ -6,13 +6,13 @@
  *
  * @module types/events
  */
-import type { Workflow, NodeExecutionInfo } from './index.js';
+import type { Workflow, NodeExecutionInfo } from "./index.js";
 /**
  * Types of workflow changes
  *
  * Used to identify what kind of change triggered the onWorkflowChange event.
  */
-export type WorkflowChangeType = 'node_add' | 'node_remove' | 'node_move' | 'node_config' | 'edge_add' | 'edge_remove' | 'metadata' | 'name' | 'description';
+export type WorkflowChangeType = "node_add" | "node_remove" | "node_move" | "node_config" | "edge_add" | "edge_remove" | "metadata" | "name" | "description";
 /**
  * High-level event handlers for enterprise integration
  *

package/dist/types/events.js

@@ -14,7 +14,7 @@
 export const DEFAULT_FEATURES = {
     autoSaveDraft: true,
     autoSaveDraftInterval: 30000,
-    showToasts: true
+    showToasts: true,
 };
 /**
  * Merge user-provided features with defaults
@@ -25,6 +25,6 @@ export const DEFAULT_FEATURES = {
 export function mergeFeatures(features) {
     return {
         ...DEFAULT_FEATURES,
-        ...features
+        ...features,
     };
 }