@d34dman/flowdrop 0.0.47 → 0.0.49

package/dist/svelte-app.d.ts

@@ -10,6 +10,7 @@ import type { Workflow, NodeMetadata, PortConfig } 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 { PartialSettings } from './types/settings.js';
 declare global {
     interface Window {
         flowdropSave?: () => Promise<void>;
@@ -58,12 +59,16 @@ export interface FlowDropMountOptions {
     navbarTitle?: string;
     /** Custom navbar actions */
     navbarActions?: NavbarAction[];
+    /** Show settings gear icon in navbar */
+    showSettings?: boolean;
     /** Authentication provider for API requests */
     authProvider?: AuthProvider;
     /** Event handlers for workflow lifecycle */
     eventHandlers?: FlowDropEventHandlers;
     /** Feature configuration */
     features?: FlowDropFeatures;
+    /** Initial settings overrides (theme, behavior, editor, ui, api) */
+    settings?: PartialSettings;
     /** Custom storage key for localStorage drafts */
     draftStorageKey?: string;
 }

package/dist/svelte-app.js

@@ -15,6 +15,7 @@ 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';
+import { initializeSettings } from './stores/settingsStore.js';
 /**
  * Mount the full FlowDrop App with navbar, sidebars, and workflow editor
  *
@@ -40,9 +41,13 @@ import { mergeFeatures } from './types/events.js';
  * ```
  */
 export async function mountFlowDropApp(container, 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;
+    const { workflow, nodes, endpointConfig, portConfig, height = '100vh', width = '100%', showNavbar = false, disableSidebar, lockWorkflow, readOnly, nodeStatuses, pipelineId, navbarTitle, navbarActions, showSettings, authProvider, eventHandlers, features: userFeatures, settings: initialSettings, draftStorageKey: customDraftKey } = options;
     // Merge features with defaults
     const features = mergeFeatures(userFeatures);
+    // Apply initial settings overrides and initialize theme
+    await initializeSettings({
+        defaults: initialSettings
+    });
     // Create endpoint configuration
     let config;
     if (endpointConfig) {
@@ -101,6 +106,7 @@ export async function mountFlowDropApp(container, options = {}) {
             pipelineId,
             navbarTitle,
             navbarActions,
+            showSettings,
             endpointConfig: config,
             authProvider,
             eventHandlers,

package/dist/types/index.d.ts

@@ -8,7 +8,7 @@ import type { EndpointConfig } from '../config/endpoints.js';
  * Node category types for organizing nodes in the sidebar
  * Based on actual API response categories
  */
-export type NodeCategory = 'triggers' | 'inputs' | 'outputs' | 'prompts' | 'models' | 'processing' | 'logic' | 'data' | 'tools' | 'helpers' | 'vector stores' | 'embeddings' | 'memories' | 'agents' | 'ai' | 'bundles';
+export type NodeCategory = 'triggers' | 'inputs' | 'outputs' | 'prompts' | 'models' | 'processing' | 'logic' | 'data' | 'tools' | 'helpers' | 'vector stores' | 'embeddings' | 'memories' | 'agents' | 'ai' | 'interrupts' | 'bundles';
 /**
  * Port data type configuration
  */
@@ -693,6 +693,11 @@ export interface VariableSchema {
  * Used in template fields to control which variables are available
  * and how they are derived.
  *
+ * Supports three modes:
+ * 1. **Schema-only** (existing): Variables from static schema and/or upstream ports
+ * 2. **API-only** (new): Variables fetched from backend endpoint
+ * 3. **Hybrid** (new): Merge API variables with static schema/ports
+ *
  * @example
  * ```json
  * {
@@ -704,6 +709,21 @@ export interface VariableSchema {
  *   }
  * }
  * ```
+ *
+ * @example API Mode
+ * ```json
+ * {
+ *   "type": "string",
+ *   "format": "template",
+ *   "variables": {
+ *     "api": {
+ *       "endpoint": {
+ *         "url": "/api/variables/{workflowId}/{nodeId}"
+ *       }
+ *     }
+ *   }
+ * }
+ * ```
  */
 export interface TemplateVariablesConfig {
     /**
@@ -731,6 +751,123 @@ export interface TemplateVariablesConfig {
      * @default true
      */
     showHints?: boolean;
+    /**
+     * API mode configuration for fetching variables from backend endpoint.
+     * When configured, variables will be fetched from the specified endpoint
+     * and can be merged with static schema and/or port-derived variables.
+     */
+    api?: ApiVariablesConfig;
+}
+/**
+ * Configuration for API-based variable fetching.
+ * Enables dynamic variable suggestions from backend endpoints.
+ *
+ * @example
+ * ```typescript
+ * const apiConfig: ApiVariablesConfig = {
+ *   endpoint: {
+ *     url: "/api/variables/{workflowId}/{nodeId}",
+ *     method: "GET"
+ *   },
+ *   cacheTtl: 300000,
+ *   mergeWithSchema: true,
+ *   fallbackOnError: true
+ * };
+ * ```
+ */
+export interface ApiVariablesConfig {
+    /**
+     * Endpoint configuration for fetching variable schema
+     */
+    endpoint: ApiVariablesEndpoint;
+    /**
+     * Cache TTL in milliseconds.
+     * Variables are cached to prevent excessive API calls during editing.
+     * @default 300000 (5 minutes)
+     */
+    cacheTtl?: number;
+    /**
+     * Whether to merge API variables with static schema.
+     * When true, variables from both API and schema are combined.
+     * @default true
+     */
+    mergeWithSchema?: boolean;
+    /**
+     * Whether to merge API variables with port-derived variables.
+     * When true, variables from both API and ports are combined.
+     * @default false
+     */
+    mergeWithPorts?: boolean;
+    /**
+     * Whether to fallback to schema/ports on API error.
+     * When true, gracefully degrades to static variables if API fails.
+     * When false, shows error message to user.
+     * @default true
+     */
+    fallbackOnError?: boolean;
+}
+/**
+ * Endpoint configuration for fetching variable schemas from backend API.
+ * Supports template variables in URL (e.g., {workflowId}, {nodeId})
+ * which are resolved at runtime from node context.
+ *
+ * @example GET Request
+ * ```typescript
+ * const endpoint: ApiVariablesEndpoint = {
+ *   url: "/api/variables/{workflowId}/{nodeId}",
+ *   method: "GET"
+ * };
+ * ```
+ *
+ * @example POST Request with Body
+ * ```typescript
+ * const endpoint: ApiVariablesEndpoint = {
+ *   url: "/api/variables",
+ *   method: "POST",
+ *   body: {
+ *     workflowId: "{workflowId}",
+ *     nodeId: "{nodeId}"
+ *   }
+ * };
+ * ```
+ */
+export interface ApiVariablesEndpoint {
+    /**
+     * URL to fetch variables from.
+     * Supports template placeholders:
+     * - `{workflowId}` - Resolved from workflow ID
+     * - `{nodeId}` - Resolved from node instance ID
+     *
+     * @example "/api/variables/{workflowId}/{nodeId}"
+     * @example "https://api.example.com/variables?workflow={workflowId}&node={nodeId}"
+     */
+    url: string;
+    /**
+     * HTTP method for the request.
+     * @default "GET"
+     */
+    method?: HttpMethod;
+    /**
+     * Custom headers to include in the request.
+     * Note: Authentication headers are automatically added via AuthProvider.
+     */
+    headers?: Record<string, string>;
+    /**
+     * Request body for POST/PUT/PATCH methods.
+     * Supports template variables like the URL.
+     */
+    body?: Record<string, unknown>;
+    /**
+     * Request timeout in milliseconds.
+     * @default 30000 (30 seconds)
+     */
+    timeout?: number;
+    /**
+     * Whether to cache the fetched schema.
+     * When false, schema is fetched on every editor load.
+     * @default true
+     */
+    cacheEnabled?: boolean;
 }
 /**
  * Union type for all schema types

package/dist/types/settings.js

@@ -37,7 +37,7 @@ export const SETTINGS_CATEGORY_ICONS = {
  * Default theme settings
  */
 export const DEFAULT_THEME_SETTINGS = {
-    preference: 'auto'
+    preference: 'light'
 };
 /**
  * Default editor settings
@@ -64,8 +64,8 @@ export const DEFAULT_UI_SETTINGS = {
 export const DEFAULT_BEHAVIOR_SETTINGS = {
     autoSave: false,
     autoSaveInterval: 30000,
-    undoHistoryLimit: 50,
-    confirmDelete: true
+    undoHistoryLimit: 0,
+    confirmDelete: false
 };
 /**
  * Default API settings
@@ -74,7 +74,7 @@ export const DEFAULT_API_SETTINGS = {
     timeout: 30000,
     retryEnabled: true,
     retryAttempts: 3,
-    cacheEnabled: true
+    cacheEnabled: false
 };
 /**
  * Complete default settings object

package/dist/utils/colors.js

@@ -24,6 +24,7 @@ export const CATEGORY_COLOR_TOKENS = {
     memories: 'var(--fd-node-blue)',
     agents: 'var(--fd-node-teal)',
     ai: 'var(--fd-node-purple)',
+    interrupts: 'var(--fd-node-red)',
     bundles: 'var(--fd-node-slate)'
 };
 /**

package/dist/utils/handlePositioning.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Utility functions for calculating handle positions on nodes
+ */
+export interface HandlePosition {
+    left: number;
+    top: number;
+}
+/**
+ * Calculate handle position along a circle arc using cos/sin
+ *
+ * Distributes handles evenly along an arc on the left or right side of a circle.
+ * For N handles, they are positioned at angles calculated as:
+ * angle = centerAngle - arcSpan/2 + arcSpan * (index + 1) / (count + 1)
+ *
+ * @param index - The index of the handle (0-based)
+ * @param count - Total number of handles on this side
+ * @param side - 'left' for inputs, 'right' for outputs
+ * @param radius - The radius of the circle (default: 40px for 80px diameter)
+ * @param arcSpan - The arc span in radians (default: 5π/6 = 150°)
+ * @returns Object with left and top pixel values relative to the circle's bounding box
+ *
+ * @example
+ * // Single handle on left side - positioned at center (180°)
+ * getCircleHandlePosition(0, 1, 'left') // { left: 0, top: 36 }
+ *
+ * @example
+ * // Two handles on left side - positioned at 150° and 210°
+ * getCircleHandlePosition(0, 2, 'left') // { left: ~4.8, top: ~18 }
+ * getCircleHandlePosition(1, 2, 'left') // { left: ~4.8, top: ~54 }
+ */
+export declare function getCircleHandlePosition(index: number, count: number, side: 'left' | 'right', radius?: number, arcSpan?: number): HandlePosition;

package/dist/utils/handlePositioning.js

@@ -0,0 +1,35 @@
+/**
+ * Utility functions for calculating handle positions on nodes
+ */
+/**
+ * Calculate handle position along a circle arc using cos/sin
+ *
+ * Distributes handles evenly along an arc on the left or right side of a circle.
+ * For N handles, they are positioned at angles calculated as:
+ * angle = centerAngle - arcSpan/2 + arcSpan * (index + 1) / (count + 1)
+ *
+ * @param index - The index of the handle (0-based)
+ * @param count - Total number of handles on this side
+ * @param side - 'left' for inputs, 'right' for outputs
+ * @param radius - The radius of the circle (default: 40px for 80px diameter)
+ * @param arcSpan - The arc span in radians (default: 5π/6 = 150°)
+ * @returns Object with left and top pixel values relative to the circle's bounding box
+ *
+ * @example
+ * // Single handle on left side - positioned at center (180°)
+ * getCircleHandlePosition(0, 1, 'left') // { left: 0, top: 36 }
+ *
+ * @example
+ * // Two handles on left side - positioned at 150° and 210°
+ * getCircleHandlePosition(0, 2, 'left') // { left: ~4.8, top: ~18 }
+ * getCircleHandlePosition(1, 2, 'left') // { left: ~4.8, top: ~54 }
+ */
+export function getCircleHandlePosition(index, count, side, radius = 40, arcSpan = (Math.PI * 5) / 6) {
+    const centerAngle = side === 'left' ? Math.PI : 0; // 180° for left, 0° for right
+    const angle = centerAngle - arcSpan / 2 + (arcSpan * (index + 1)) / (count + 1);
+    const centerOffset = radius; // center of the circle (assuming square bounding box)
+    return {
+        left: centerOffset + radius * Math.cos(angle),
+        top: centerOffset + radius * Math.sin(angle)
+    };
+}

package/dist/utils/icons.js

@@ -95,6 +95,7 @@ export const CATEGORY_ICONS = {
     memories: 'mdi:brain',
     agents: 'mdi:account-cog',
     ai: 'mdi:shimmer',
+    interrupts: 'mdi:hand-back-left',
     bundles: 'mdi:package-variant'
 };
 /**

package/dist/utils/nodeTypes.js

@@ -194,9 +194,9 @@ export function createNodeTypeConfigProperty(metadata, defaultType) {
     const oneOf = getNodeTypeOneOfOptions(metadata);
     const primaryType = defaultType ?? getPrimaryNodeType(metadata);
     return {
-        type: "string",
-        title: "Node Type",
-        description: "Choose the visual representation for this node",
+        type: 'string',
+        title: 'Node Type',
+        description: 'Choose the visual representation for this node',
         default: primaryType,
         oneOf
     };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@d34dman/flowdrop",
 	"license": "MIT",
 	"private": false,
-	"version": "0.0.47",
+	"version": "0.0.49",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -12,7 +12,7 @@
 		"watch:build:production": "npm-watch build:production",
 		"watch:build": "npm-watch build",
 		"preview": "vite preview",
-		"prepare": "svelte-kit sync || echo ''",
+		"prepare": "svelte-kit sync || echo '' && husky",
 		"prepack": "svelte-kit sync && svelte-package && publint",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -30,6 +30,7 @@
 		"build-storybook": "storybook build",
 		"api:lint": "redocly lint api/openapi.yaml --config api/redocly.yaml",
 		"api:bundle": "redocly bundle api/openapi.yaml -o api/bundled.yaml --config api/redocly.yaml",
+		"api:watch": "nodemon --watch api --ext yaml --ignore api/bundled.yaml --exec 'npm run api:bundle'",
 		"api:preview": "redocly preview-docs api/openapi.yaml --config api/redocly.yaml",
 		"api:docs": "redocly build-docs api/bundled.yaml -o api-docs/index.html"
 	},
@@ -172,8 +173,10 @@
 		"eslint-plugin-svelte": "^3.0.0",
 		"globals": "^16.0.0",
 		"happy-dom": "^20.0.11",
+		"husky": "^9.1.7",
 		"msw": "^2.12.7",
 		"npm-watch": "^0.13.0",
+		"picomatch": "^4.0.3",
 		"playwright": "^1.53.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
@@ -187,7 +190,8 @@
 		"vite": "^6.2.6",
 		"vite-plugin-devtools-json": "^0.2.1",
 		"vitest": "^3.2.3",
-		"vitest-browser-svelte": "^0.1.0"
+		"vitest-browser-svelte": "^0.1.0",
+		"yaml": "^2.8.2"
 	},
 	"overrides": {
 		"@sveltejs/kit": {
@@ -214,4 +218,4 @@
 			"static"
 		]
 	}
-}
+}