@flowdrop/flowdrop 1.5.0 → 1.6.0

package/dist/utils/colors.js

@@ -3,65 +3,65 @@
  * Ensures consistent category colors across sidebar and canvas
  * Uses BEM syntax for CSS classes
  */
-import { getPortCompatibilityChecker } from "./connections.js";
-import { getCategoryColor as getCategoryColorFromStore } from "../stores/categoriesStore.svelte.js";
-import { logger } from "./logger.js";
+import { getPortCompatibilityChecker } from './connections.js';
+import { getCategoryColor as getCategoryColorFromStore } from '../stores/categoriesStore.svelte.js';
+import { logger } from './logger.js';
 /**
  * Category color mapping to design tokens (CSS variables)
  * Uses --fd-node-* tokens from tokens.css
  * These serve as static defaults; the categories store provides dynamic overrides.
  */
 export const CATEGORY_COLOR_TOKENS = {
-    triggers: "var(--fd-node-cyan)",
-    inputs: "var(--fd-node-emerald)",
-    outputs: "var(--fd-node-blue)",
-    prompts: "var(--fd-node-amber)",
-    models: "var(--fd-node-indigo)",
-    processing: "var(--fd-node-teal)",
-    logic: "var(--fd-node-purple)",
-    data: "var(--fd-node-orange)",
-    helpers: "var(--fd-node-slate)",
-    tools: "var(--fd-node-amber)",
-    "vector stores": "var(--fd-node-emerald)",
-    embeddings: "var(--fd-node-indigo)",
-    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)",
+    triggers: 'var(--fd-node-cyan)',
+    inputs: 'var(--fd-node-emerald)',
+    outputs: 'var(--fd-node-blue)',
+    prompts: 'var(--fd-node-amber)',
+    models: 'var(--fd-node-indigo)',
+    processing: 'var(--fd-node-teal)',
+    logic: 'var(--fd-node-purple)',
+    data: 'var(--fd-node-orange)',
+    helpers: 'var(--fd-node-slate)',
+    tools: 'var(--fd-node-amber)',
+    'vector stores': 'var(--fd-node-emerald)',
+    embeddings: 'var(--fd-node-indigo)',
+    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)'
 };
 /**
  * Default data type colors for fallback when port configuration is not available
  * Uses --fd-node-* tokens from tokens.css
  */
 const DEFAULT_DATA_TYPE_COLORS = {
-    string: "var(--fd-node-emerald)",
-    text: "var(--fd-node-emerald)",
-    number: "var(--fd-node-blue)",
-    integer: "var(--fd-node-blue)",
-    float: "var(--fd-node-blue)",
-    boolean: "var(--fd-node-purple)",
-    array: "var(--fd-node-amber)",
-    list: "var(--fd-node-amber)",
-    object: "var(--fd-node-orange)",
-    json: "var(--fd-node-orange)",
-    mixed: "var(--fd-node-orange)",
-    file: "var(--fd-node-red)",
-    document: "var(--fd-node-red)",
-    image: "var(--fd-node-pink)",
-    picture: "var(--fd-node-pink)",
-    audio: "var(--fd-node-indigo)",
-    sound: "var(--fd-node-indigo)",
-    video: "var(--fd-node-teal)",
-    movie: "var(--fd-node-teal)",
-    url: "var(--fd-node-cyan)",
-    email: "var(--fd-node-cyan)",
-    date: "var(--fd-node-lime)",
-    datetime: "var(--fd-node-lime)",
-    time: "var(--fd-node-lime)",
-    tool: "var(--fd-node-amber)",
-    trigger: "var(--fd-edge-trigger)",
-    branch: "var(--fd-node-purple)",
+    string: 'var(--fd-node-emerald)',
+    text: 'var(--fd-node-emerald)',
+    number: 'var(--fd-node-blue)',
+    integer: 'var(--fd-node-blue)',
+    float: 'var(--fd-node-blue)',
+    boolean: 'var(--fd-node-purple)',
+    array: 'var(--fd-node-amber)',
+    list: 'var(--fd-node-amber)',
+    object: 'var(--fd-node-orange)',
+    json: 'var(--fd-node-orange)',
+    mixed: 'var(--fd-node-orange)',
+    file: 'var(--fd-node-red)',
+    document: 'var(--fd-node-red)',
+    image: 'var(--fd-node-pink)',
+    picture: 'var(--fd-node-pink)',
+    audio: 'var(--fd-node-indigo)',
+    sound: 'var(--fd-node-indigo)',
+    video: 'var(--fd-node-teal)',
+    movie: 'var(--fd-node-teal)',
+    url: 'var(--fd-node-cyan)',
+    email: 'var(--fd-node-cyan)',
+    date: 'var(--fd-node-lime)',
+    datetime: 'var(--fd-node-lime)',
+    time: 'var(--fd-node-lime)',
+    tool: 'var(--fd-node-amber)',
+    trigger: 'var(--fd-edge-trigger)',
+    branch: 'var(--fd-node-purple)'
 };
 /**
  * Get the design token for a category color.
@@ -85,7 +85,7 @@ export function getDataTypeColorToken(dataType) {
     catch {
         // Fallback to static color mapping if port checker not initialized
     }
-    return (DEFAULT_DATA_TYPE_COLORS[dataType.toLowerCase()] || "var(--fd-node-slate)");
+    return DEFAULT_DATA_TYPE_COLORS[dataType.toLowerCase()] || 'var(--fd-node-slate)';
 }
 /**
  * Get data type configuration from port config
@@ -96,7 +96,7 @@ export function getDataTypeConfig(dataType) {
         return checker.getDataTypeConfig(dataType);
     }
     catch (error) {
-        logger.warn("Port compatibility checker not initialized:", error);
+        logger.warn('Port compatibility checker not initialized:', error);
         return undefined;
     }
 }
@@ -109,7 +109,7 @@ export function getAvailableDataTypes() {
         return checker.getEnabledDataTypes();
     }
     catch (error) {
-        logger.warn("Port compatibility checker not initialized:", error);
+        logger.warn('Port compatibility checker not initialized:', error);
         return [];
     }
 }
@@ -117,10 +117,10 @@ export function getAvailableDataTypes() {
  * Default colors for fallback cases
  */
 export const DEFAULT_COLORS = {
-    background: "flowdrop-color--base-light",
-    accent: "flowdrop-color--neutral",
-    text: "flowdrop-color--base-text",
-    border: "flowdrop-color--base-border",
+    background: 'flowdrop-color--base-light',
+    accent: 'flowdrop-color--neutral',
+    text: 'flowdrop-color--base-text',
+    border: 'flowdrop-color--base-border'
 };
 /**
  * Get category colors
@@ -174,33 +174,33 @@ export function getNodeColors(category, isError = false, isProcessing = false, i
     const baseColor = getCategoryColors(category);
     if (isError) {
         return {
-            background: "var(--fd-error-muted)",
-            accent: "var(--fd-error)",
-            text: "var(--fd-error-hover)",
-            border: "var(--fd-error)",
+            background: 'var(--fd-error-muted)',
+            accent: 'var(--fd-error)',
+            text: 'var(--fd-error-hover)',
+            border: 'var(--fd-error)'
         };
     }
     if (isProcessing) {
         return {
-            background: "var(--fd-info-muted)",
-            accent: "var(--fd-info)",
-            text: "var(--fd-primary-hover)",
-            border: "var(--fd-primary)",
+            background: 'var(--fd-info-muted)',
+            accent: 'var(--fd-info)',
+            text: 'var(--fd-primary-hover)',
+            border: 'var(--fd-primary)'
         };
     }
     if (isSelected) {
         return {
-            background: "var(--fd-accent-muted)",
-            accent: "var(--fd-accent)",
-            text: "var(--fd-accent-hover)",
-            border: "var(--fd-accent)",
+            background: 'var(--fd-accent-muted)',
+            accent: 'var(--fd-accent)',
+            text: 'var(--fd-accent-hover)',
+            border: 'var(--fd-accent)'
         };
     }
     return {
         background: baseColor,
         accent: baseColor,
-        text: "var(--fd-foreground)",
-        border: baseColor,
+        text: 'var(--fd-foreground)',
+        border: baseColor
     };
 }
 /**
@@ -262,7 +262,7 @@ export function getDataTypeColor(dataType) {
  */
 export function parseDataTypeDisplay(dataType) {
     // Check if it's a typed array (ends with [])
-    const isArray = dataType.endsWith("[]");
+    const isArray = dataType.endsWith('[]');
     if (isArray) {
         const elementType = dataType.slice(0, -2); // Remove []
         const config = getDataTypeConfig(dataType);
@@ -270,7 +270,7 @@ export function parseDataTypeDisplay(dataType) {
             baseType: dataType,
             isArray: true,
             displayName: config?.name || `${elementType}[]`,
-            elementType: elementType,
+            elementType: elementType
         };
     }
     else {
@@ -278,7 +278,7 @@ export function parseDataTypeDisplay(dataType) {
         return {
             baseType: dataType,
             isArray: false,
-            displayName: config?.name || dataType,
+            displayName: config?.name || dataType
         };
     }
 }
@@ -297,7 +297,7 @@ export function getDataTypeDisplayText(dataType) {
  * @returns True if it's an array type
  */
 export function isArrayDataType(dataType) {
-    return dataType.endsWith("[]") || dataType === "array" || dataType === "list";
+    return dataType.endsWith('[]') || dataType === 'array' || dataType === 'list';
 }
 /**
  * Get the element type from an array data type
@@ -305,7 +305,7 @@ export function isArrayDataType(dataType) {
  * @returns The element type (e.g., "string") or null if not an array
  */
 export function getArrayElementType(arrayDataType) {
-    if (arrayDataType.endsWith("[]")) {
+    if (arrayDataType.endsWith('[]')) {
         return arrayDataType.slice(0, -2);
     }
     return null;
@@ -316,7 +316,7 @@ export function getArrayElementType(arrayDataType) {
  * @returns Object with r, g, b values (0-255) or null if invalid
  */
 export function hexToRgb(hex) {
-    const cleanHex = hex.replace(/^#/, "");
+    const cleanHex = hex.replace(/^#/, '');
     if (!/^[0-9A-Fa-f]{6}$/.test(cleanHex)) {
         return null;
     }
@@ -336,9 +336,7 @@ export function hexToRgb(hex) {
 export function getRelativeLuminance(r, g, b) {
     const toLinear = (value) => {
         const srgb = value / 255;
-        return srgb <= 0.03928
-            ? srgb / 12.92
-            : Math.pow((srgb + 0.055) / 1.055, 2.4);
+        return srgb <= 0.03928 ? srgb / 12.92 : Math.pow((srgb + 0.055) / 1.055, 2.4);
     };
     return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
 }
@@ -363,25 +361,25 @@ export function isLightColor(hex) {
  * @returns CSS color value for text that provides good contrast
  */
 export function getContrastTextColor(backgroundColor) {
-    return isLightColor(backgroundColor) ? "#18181b" : "#ffffff";
+    return isLightColor(backgroundColor) ? '#18181b' : '#ffffff';
 }
 /**
  * Mapping of CSS variable tokens to their resolved hex values
  * Used for contrast calculations when working with design tokens
  */
 const TOKEN_TO_HEX = {
-    "var(--fd-node-cyan)": "#06b6d4",
-    "var(--fd-node-emerald)": "#10b981",
-    "var(--fd-node-blue)": "#3b82f6",
-    "var(--fd-node-amber)": "#f59e0b",
-    "var(--fd-node-indigo)": "#6366f1",
-    "var(--fd-node-teal)": "#14b8a6",
-    "var(--fd-node-purple)": "#8b5cf6",
-    "var(--fd-node-orange)": "#f97316",
-    "var(--fd-node-slate)": "#64748b",
-    "var(--fd-node-red)": "#ef4444",
-    "var(--fd-node-pink)": "#ec4899",
-    "var(--fd-node-lime)": "#84cc16",
+    'var(--fd-node-cyan)': '#06b6d4',
+    'var(--fd-node-emerald)': '#10b981',
+    'var(--fd-node-blue)': '#3b82f6',
+    'var(--fd-node-amber)': '#f59e0b',
+    'var(--fd-node-indigo)': '#6366f1',
+    'var(--fd-node-teal)': '#14b8a6',
+    'var(--fd-node-purple)': '#8b5cf6',
+    'var(--fd-node-orange)': '#f97316',
+    'var(--fd-node-slate)': '#64748b',
+    'var(--fd-node-red)': '#ef4444',
+    'var(--fd-node-pink)': '#ec4899',
+    'var(--fd-node-lime)': '#84cc16'
 };
 /**
  * Resolve a CSS variable token to its hex value
@@ -440,7 +438,7 @@ export function getPortBorderColor(dataType) {
 export function rgbToHex(r, g, b) {
     const toHex = (value) => {
         const clamped = Math.max(0, Math.min(255, Math.round(value)));
-        return clamped.toString(16).padStart(2, "0");
+        return clamped.toString(16).padStart(2, '0');
     };
     return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
@@ -453,7 +451,7 @@ export function rgbToHex(r, g, b) {
 export function getLightTint(hex) {
     const rgb = hexToRgb(hex);
     if (!rgb) {
-        return "#fffbeb"; // Fallback to amber-50
+        return '#fffbeb'; // Fallback to amber-50
     }
     // Mix with white at 95% to create a very light tint
     const mixRatio = 0.95;
@@ -472,7 +470,7 @@ export function getLightTint(hex) {
 export function getDarkTint(hex, opacity = 0.15) {
     const rgb = hexToRgb(hex);
     if (!rgb) {
-        return "#2a2518"; // Fallback dark amber tint
+        return '#2a2518'; // Fallback dark amber tint
     }
     // Mix with dark background (#1a1a1e) to create a subtle dark tint
     const darkBg = { r: 26, g: 26, b: 30 };
@@ -490,7 +488,7 @@ export function getDarkTint(hex, opacity = 0.15) {
 export function getBorderTint(hex) {
     const rgb = hexToRgb(hex);
     if (!rgb) {
-        return "#fcd34d"; // Fallback to amber-300
+        return '#fcd34d'; // Fallback to amber-300
     }
     // Mix with white at 60% to create a medium-light tint
     const mixRatio = 0.6;
@@ -508,7 +506,7 @@ export function getBorderTint(hex) {
 export function getDarkBorderTint(hex) {
     const rgb = hexToRgb(hex);
     if (!rgb) {
-        return "#5c4a1e"; // Fallback dark amber border
+        return '#5c4a1e'; // Fallback dark amber border
     }
     // Mix with dark background to create a muted but visible border
     const darkBg = { r: 26, g: 26, b: 30 };
@@ -530,7 +528,7 @@ export function getColorVariants(baseColor) {
         light: getLightTint(baseColor),
         border: getBorderTint(baseColor),
         darkLight: getDarkTint(baseColor),
-        darkBorder: getDarkBorderTint(baseColor),
+        darkBorder: getDarkBorderTint(baseColor)
     };
 }
 /**
@@ -545,6 +543,6 @@ export function getThemeAwareColorVariants(baseColor, isDarkMode) {
     return {
         base: variants.base,
         background: isDarkMode ? variants.darkLight : variants.light,
-        border: isDarkMode ? variants.darkBorder : variants.border,
+        border: isDarkMode ? variants.darkBorder : variants.border
     };
 }

package/dist/utils/config.d.ts

@@ -1,8 +1,8 @@
 /**
  * Configuration utilities for FlowDrop Editor
  */
-import type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig } from "../types/config.js";
-import type { EndpointConfig } from "../config/endpoints.js";
+import type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig } from '../types/config.js';
+import type { EndpointConfig } from '../config/endpoints.js';
 /**
  * Create default editor features configuration
  */

package/dist/utils/config.js

@@ -1,7 +1,7 @@
 /**
  * Configuration utilities for FlowDrop Editor
  */
-import { createEndpointConfig } from "../config/endpoints.js";
+import { createEndpointConfig } from '../config/endpoints.js';
 /**
  * Create default editor features configuration
  */
@@ -18,7 +18,7 @@ export function createDefaultFeatures() {
         nodeValidation: true,
         collaboration: false,
         templates: false,
-        importExport: false,
+        importExport: false
     };
 }
 /**
@@ -37,16 +37,16 @@ export function createDefaultUIConfig() {
         zoom: {
             min: 0.1,
             max: 2,
-            default: 1,
+            default: 1
         },
         colors: {
-            primary: "#3b82f6",
-            secondary: "#64748b",
-            accent: "#f59e0b",
-            background: "#ffffff",
-            text: "#1f2937",
+            primary: '#3b82f6',
+            secondary: '#64748b',
+            accent: '#f59e0b',
+            background: '#ffffff',
+            text: '#1f2937'
         },
-        cssClasses: {},
+        cssClasses: {}
     };
 }
 /**
@@ -54,19 +54,19 @@ export function createDefaultUIConfig() {
  */
 export function createDefaultAPIConfig() {
     return {
-        endpoints: createEndpointConfig("/api/flowdrop"),
+        endpoints: createEndpointConfig('/api/flowdrop'),
         timeout: 30000,
         retry: {
             enabled: true,
             maxAttempts: 3,
-            delay: 1000,
+            delay: 1000
         },
         auth: {
-            type: "none",
+            type: 'none'
         },
         headers: {
-            "Content-Type": "application/json",
-        },
+            'Content-Type': 'application/json'
+        }
     };
 }
 /**
@@ -81,8 +81,8 @@ export function createDefaultExecutionConfig() {
         autoSaveState: true,
         caching: {
             enabled: true,
-            ttl: 3600,
-        },
+            ttl: 3600
+        }
     };
 }
 /**
@@ -90,10 +90,10 @@ export function createDefaultExecutionConfig() {
  */
 export function createDefaultStorageConfig() {
     return {
-        type: "api",
+        type: 'api',
         autoSaveInterval: 5000,
         maxUndoSteps: 50,
-        keyPrefix: "flowdrop_",
+        keyPrefix: 'flowdrop_'
     };
 }
 /**
@@ -101,20 +101,20 @@ export function createDefaultStorageConfig() {
  */
 export function createDefaultConfig(endpointConfig) {
     return {
-        theme: "auto",
+        theme: 'auto',
         features: createDefaultFeatures(),
         ui: createDefaultUIConfig(),
         api: {
             ...createDefaultAPIConfig(),
-            endpoints: endpointConfig || createEndpointConfig("/api/flowdrop"),
+            endpoints: endpointConfig || createEndpointConfig('/api/flowdrop')
         },
         ports: {
             dataTypes: [],
             compatibilityRules: [],
-            defaultDataType: "mixed",
+            defaultDataType: 'mixed'
         },
         execution: createDefaultExecutionConfig(),
-        storage: createDefaultStorageConfig(),
+        storage: createDefaultStorageConfig()
     };
 }
 /**
@@ -126,56 +126,56 @@ export function mergeConfig(userConfig, defaultConfig) {
         ...userConfig,
         features: {
             ...defaultConfig.features,
-            ...userConfig.features,
+            ...userConfig.features
         },
         ui: {
             ...defaultConfig.ui,
             ...userConfig.ui,
             zoom: {
                 ...defaultConfig.ui.zoom,
-                ...userConfig.ui?.zoom,
+                ...userConfig.ui?.zoom
             },
             colors: {
                 ...defaultConfig.ui.colors,
-                ...userConfig.ui?.colors,
+                ...userConfig.ui?.colors
             },
             cssClasses: {
                 ...defaultConfig.ui.cssClasses,
-                ...userConfig.ui?.cssClasses,
-            },
+                ...userConfig.ui?.cssClasses
+            }
         },
         api: {
             ...defaultConfig.api,
             ...userConfig.api,
             retry: {
                 ...defaultConfig.api.retry,
-                ...userConfig.api?.retry,
+                ...userConfig.api?.retry
             },
             auth: {
                 ...defaultConfig.api.auth,
-                ...userConfig.api?.auth,
+                ...userConfig.api?.auth
             },
             headers: {
                 ...defaultConfig.api.headers,
-                ...userConfig.api?.headers,
+                ...userConfig.api?.headers
             },
             endpoints: {
                 ...defaultConfig.api.endpoints,
-                ...userConfig.api?.endpoints,
-            },
+                ...userConfig.api?.endpoints
+            }
         },
         execution: {
             ...defaultConfig.execution,
             ...userConfig.execution,
             caching: {
                 ...defaultConfig.execution.caching,
-                ...userConfig.execution?.caching,
-            },
+                ...userConfig.execution?.caching
+            }
         },
         storage: {
             ...defaultConfig.storage,
-            ...userConfig.storage,
-        },
+            ...userConfig.storage
+        }
     };
 }
 /**
@@ -184,43 +184,43 @@ export function mergeConfig(userConfig, defaultConfig) {
 export function validateConfig(config) {
     const errors = [];
     if (!config.features) {
-        errors.push("features configuration is required");
+        errors.push('features configuration is required');
     }
     if (!config.ui) {
-        errors.push("ui configuration is required");
+        errors.push('ui configuration is required');
     }
     if (!config.api) {
-        errors.push("api configuration is required");
+        errors.push('api configuration is required');
     }
     if (!config.execution) {
-        errors.push("execution configuration is required");
+        errors.push('execution configuration is required');
     }
     if (!config.storage) {
-        errors.push("storage configuration is required");
+        errors.push('storage configuration is required');
     }
     // Validate API configuration
     if (config.api.timeout <= 0) {
-        errors.push("API timeout must be greater than 0");
+        errors.push('API timeout must be greater than 0');
     }
     if (config.api.retry.maxAttempts < 0) {
-        errors.push("Retry max attempts must be non-negative");
+        errors.push('Retry max attempts must be non-negative');
     }
     // Validate execution configuration
     if (config.execution.timeout <= 0) {
-        errors.push("Execution timeout must be greater than 0");
+        errors.push('Execution timeout must be greater than 0');
     }
     if (config.execution.maxConcurrent <= 0) {
-        errors.push("Max concurrent executions must be greater than 0");
+        errors.push('Max concurrent executions must be greater than 0');
     }
     // Validate UI configuration
     if (config.ui.gridSize <= 0) {
-        errors.push("Grid size must be greater than 0");
+        errors.push('Grid size must be greater than 0');
     }
     if (config.ui.nodeSpacing <= 0) {
-        errors.push("Node spacing must be greater than 0");
+        errors.push('Node spacing must be greater than 0');
     }
     if (config.ui.zoom.min >= config.ui.zoom.max) {
-        errors.push("Zoom min must be less than zoom max");
+        errors.push('Zoom min must be less than zoom max');
     }
     return errors;
 }

package/dist/utils/connections.d.ts

@@ -1,7 +1,7 @@
 /**
  * Connection validation utilities for FlowDrop
  */
-import type { NodeMetadata, NodePort, NodeDataType, WorkflowNode, WorkflowEdge, PortConfig, PortDataTypeConfig } from "../types/index.js";
+import type { NodeMetadata, NodePort, NodeDataType, WorkflowNode, WorkflowEdge, PortConfig, PortDataTypeConfig } from '../types/index.js';
 /**
  * Determines if an edge is a loopback edge.
  * Loopback edges target the special `loop_back` input port on ForEach nodes.
@@ -88,7 +88,7 @@ export declare function getConnectionSuggestions(nodeId: string, nodes: Workflow
     nodeName: string;
     portId: string;
     portName: string;
-    portType: "input" | "output";
+    portType: 'input' | 'output';
     dataType: NodeDataType;
     compatible: boolean;
 }>;