@d34dman/flowdrop 0.0.1 → 0.0.2

package/dist/utils/colors.js

@@ -3,73 +3,117 @@
  * Ensures consistent category colors across sidebar and canvas
  * Uses BEM syntax for CSS classes
  */
+import { getPortCompatibilityChecker } from './connections.js';
 /**
  * Category color mapping to reference tokens (CSS variables)
  */
 export const CATEGORY_COLOR_TOKENS = {
-    "inputs": "var(--color-ref-emerald-500)",
-    "outputs": "var(--color-ref-blue-600)",
-    "prompts": "var(--color-ref-amber-500)",
-    "models": "var(--color-ref-indigo-500)",
-    "processing": "var(--color-ref-teal-500)",
-    "logic": "var(--color-ref-purple-600)",
-    "data": "var(--color-ref-orange-500)",
-    "helpers": "var(--color-ref-slate-500)",
-    "tools": "var(--color-ref-amber-500)",
-    "vector stores": "var(--color-ref-emerald-500)",
-    "embeddings": "var(--color-ref-indigo-500)",
-    "memories": "var(--color-ref-blue-600)",
-    "agents": "var(--color-ref-teal-500)",
-    "bundles": "var(--color-ref-slate-500)"
+    inputs: 'var(--color-ref-emerald-500)',
+    outputs: 'var(--color-ref-blue-600)',
+    prompts: 'var(--color-ref-amber-500)',
+    models: 'var(--color-ref-indigo-500)',
+    processing: 'var(--color-ref-teal-500)',
+    logic: 'var(--color-ref-purple-600)',
+    data: 'var(--color-ref-orange-500)',
+    helpers: 'var(--color-ref-slate-500)',
+    tools: 'var(--color-ref-amber-500)',
+    'vector stores': 'var(--color-ref-emerald-500)',
+    embeddings: 'var(--color-ref-indigo-500)',
+    memories: 'var(--color-ref-blue-600)',
+    agents: 'var(--color-ref-teal-500)',
+    ai: 'var(--color-ref-purple-500)',
+    bundles: 'var(--color-ref-slate-500)'
 };
 /**
  * Data type color mapping to reference tokens (CSS variables)
+ * @deprecated Use getDataTypeColorToken() with port configuration instead
  */
 export const DATA_TYPE_COLOR_TOKENS = {
-    string: "var(--color-ref-emerald-500)",
-    text: "var(--color-ref-emerald-500)",
-    number: "var(--color-ref-blue-600)",
-    integer: "var(--color-ref-blue-600)",
-    float: "var(--color-ref-blue-600)",
-    boolean: "var(--color-ref-purple-600)",
-    array: "var(--color-ref-amber-500)",
-    list: "var(--color-ref-amber-500)",
-    object: "var(--color-ref-orange-500)",
-    json: "var(--color-ref-orange-500)",
-    file: "var(--color-ref-red-500)",
-    document: "var(--color-ref-red-500)",
-    image: "var(--color-ref-pink-500)",
-    picture: "var(--color-ref-pink-500)",
-    audio: "var(--color-ref-indigo-500)",
-    sound: "var(--color-ref-indigo-500)",
-    video: "var(--color-ref-teal-500)",
-    movie: "var(--color-ref-teal-500)",
-    url: "var(--color-ref-cyan-500)",
-    email: "var(--color-ref-cyan-500)",
-    date: "var(--color-ref-lime-500)",
-    datetime: "var(--color-ref-lime-500)",
-    time: "var(--color-ref-lime-500)"
+    string: 'var(--color-ref-emerald-500)',
+    text: 'var(--color-ref-emerald-500)',
+    number: 'var(--color-ref-blue-600)',
+    integer: 'var(--color-ref-blue-600)',
+    float: 'var(--color-ref-blue-600)',
+    boolean: 'var(--color-ref-purple-600)',
+    array: 'var(--color-ref-amber-500)',
+    list: 'var(--color-ref-amber-500)',
+    object: 'var(--color-ref-orange-500)',
+    json: 'var(--color-ref-orange-500)',
+    mixed: 'var(--color-ref-orange-500)',
+    file: 'var(--color-ref-red-500)',
+    document: 'var(--color-ref-red-500)',
+    image: 'var(--color-ref-pink-500)',
+    picture: 'var(--color-ref-pink-500)',
+    audio: 'var(--color-ref-indigo-500)',
+    sound: 'var(--color-ref-indigo-500)',
+    video: 'var(--color-ref-teal-500)',
+    movie: 'var(--color-ref-teal-500)',
+    url: 'var(--color-ref-cyan-500)',
+    email: 'var(--color-ref-cyan-500)',
+    date: 'var(--color-ref-lime-500)',
+    datetime: 'var(--color-ref-lime-500)',
+    time: 'var(--color-ref-lime-500)',
+    tool: 'var(--color-ref-amber-500)',
+    trigger: 'var(--color-ref-gray-950)',
+    branch: 'var(--color-ref-purple-500)'
 };
 /**
  * Get the reference color token for a category
  */
 export function getCategoryColorToken(category) {
-    return CATEGORY_COLOR_TOKENS[category] || "var(--color-ref-slate-500)";
+    return CATEGORY_COLOR_TOKENS[category] || 'var(--color-ref-slate-500)';
 }
 /**
- * Get the reference color token for a data type
+ * Get the reference color token for a data type (configurable version)
  */
 export function getDataTypeColorToken(dataType) {
-    return DATA_TYPE_COLOR_TOKENS[dataType.toLowerCase()] || "var(--color-ref-slate-500)";
+    try {
+        const checker = getPortCompatibilityChecker();
+        const config = checker.getDataTypeConfig(dataType);
+        if (config?.color) {
+            return config.color;
+        }
+    }
+    catch {
+        // Fallback to static color mapping if port checker not initialized
+        // console.warn("Port compatibility checker not initialized, using fallback colors");
+    }
+    return DATA_TYPE_COLOR_TOKENS[dataType.toLowerCase()] || 'var(--color-ref-slate-500)';
+}
+/**
+ * Get data type configuration from port config
+ */
+export function getDataTypeConfig(dataType) {
+    try {
+        const checker = getPortCompatibilityChecker();
+        return checker.getDataTypeConfig(dataType);
+    }
+    catch (error) {
+        console.warn('Port compatibility checker not initialized:', error);
+        return undefined;
+    }
+}
+/**
+ * Get all available data types from port configuration
+ */
+export function getAvailableDataTypes() {
+    try {
+        const checker = getPortCompatibilityChecker();
+        return checker.getEnabledDataTypes();
+    }
+    catch (error) {
+        console.warn('Port compatibility checker not initialized:', error);
+        return [];
+    }
 }
 /**
  * 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
@@ -77,18 +121,7 @@ export const DEFAULT_COLORS = {
  * @returns The color configuration for the category
  */
 export function getCategoryColors(category) {
-    const colorToken = CATEGORY_COLOR_TOKENS[category];
-    if (colorToken) {
-        // Convert color token to BEM color class
-        const colorName = colorToken.replace("var(--color-ref-", "").replace(")", "");
-        return {
-            background: `flowdrop-color--${colorName.split("-")[0]}-light`,
-            accent: `flowdrop-color--${colorName.split("-")[0]}`,
-            text: `flowdrop-color--${colorName.split("-")[0]}-text`,
-            border: `flowdrop-color--${colorName.split("-")[0]}-border`
-        };
-    }
-    return DEFAULT_COLORS;
+    return CATEGORY_COLOR_TOKENS[category] || 'var(--color-ref-slate-500)';
 }
 /**
  * Get category background color
@@ -96,15 +129,15 @@ export function getCategoryColors(category) {
  * @returns The background color class
  */
 export function getCategoryBackground(category) {
-    return getCategoryColors(category).background;
+    return getCategoryColors(category);
 }
 /**
- * Get category accent color (for icons, highlights)
+ * Get category accent color
  * @param category - The node category
  * @returns The accent color class
  */
 export function getCategoryAccent(category) {
-    return getCategoryColors(category).accent;
+    return getCategoryColors(category);
 }
 /**
  * Get category text color
@@ -112,7 +145,7 @@ export function getCategoryAccent(category) {
  * @returns The text color class
  */
 export function getCategoryText(category) {
-    return getCategoryColors(category).text;
+    return getCategoryColors(category);
 }
 /**
  * Get category border color
@@ -120,50 +153,56 @@ export function getCategoryText(category) {
  * @returns The border color class
  */
 export function getCategoryBorder(category) {
-    return getCategoryColors(category).border;
+    return getCategoryColors(category);
 }
 /**
- * Get node colors based on category and status
+ * Get node colors based on category and state
  * @param category - The node category
- * @param isError - Whether the node has an error
+ * @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 for the node
+ * @returns The color configuration object
  */
 export function getNodeColors(category, isError = false, isProcessing = false, isSelected = false) {
+    const baseColor = getCategoryColors(category);
     if (isError) {
         return {
-            background: "flowdrop-color--error-light",
-            accent: "flowdrop-color--error",
-            text: "flowdrop-color--error-text",
-            border: "flowdrop-color--error-border"
+            background: 'var(--color-ref-red-50)',
+            accent: 'var(--color-ref-red-500)',
+            text: 'var(--color-ref-red-900)',
+            border: 'var(--color-ref-red-200)'
         };
     }
     if (isProcessing) {
         return {
-            background: "flowdrop-color--warning-light",
-            accent: "flowdrop-color--warning",
-            text: "flowdrop-color--warning-text",
-            border: "flowdrop-color--warning-border"
+            background: 'var(--color-ref-blue-50)',
+            accent: 'var(--color-ref-blue-500)',
+            text: 'var(--color-ref-blue-900)',
+            border: 'var(--color-ref-blue-200)'
         };
     }
     if (isSelected) {
         return {
-            background: "flowdrop-color--primary-light",
-            accent: "flowdrop-color--primary",
-            text: "flowdrop-color--primary-text",
-            border: "flowdrop-color--primary-border"
+            background: 'var(--color-ref-indigo-50)',
+            accent: 'var(--color-ref-indigo-500)',
+            text: 'var(--color-ref-indigo-900)',
+            border: 'var(--color-ref-indigo-200)'
         };
     }
-    return getCategoryColors(category);
+    return {
+        background: baseColor,
+        accent: baseColor,
+        text: 'var(--color-ref-slate-900)',
+        border: baseColor
+    };
 }
 /**
  * Get node background color
  * @param category - The node category
- * @param isError - Whether the node has an error
+ * @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 class
+ * @returns The background color
  */
 export function getNodeBackground(category, isError = false, isProcessing = false, isSelected = false) {
     return getNodeColors(category, isError, isProcessing, isSelected).background;
@@ -171,10 +210,10 @@ export function getNodeBackground(category, isError = false, isProcessing = fals
 /**
  * Get node accent color
  * @param category - The node category
- * @param isError - Whether the node has an error
+ * @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 class
+ * @returns The accent color
  */
 export function getNodeAccent(category, isError = false, isProcessing = false, isSelected = false) {
     return getNodeColors(category, isError, isProcessing, isSelected).accent;
@@ -182,10 +221,10 @@ export function getNodeAccent(category, isError = false, isProcessing = false, i
 /**
  * Get node text color
  * @param category - The node category
- * @param isError - Whether the node has an error
+ * @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 class
+ * @returns The text color
  */
 export function getNodeText(category, isError = false, isProcessing = false, isSelected = false) {
     return getNodeColors(category, isError, isProcessing, isSelected).text;
@@ -193,48 +232,74 @@ export function getNodeText(category, isError = false, isProcessing = false, isS
 /**
  * Get node border color
  * @param category - The node category
- * @param isError - Whether the node has an error
+ * @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 class
+ * @returns The border color
  */
 export function getNodeBorder(category, isError = false, isProcessing = false, isSelected = false) {
     return getNodeColors(category, isError, isProcessing, isSelected).border;
 }
 /**
- * Data type color mapping for ports (used in WorkflowNode, etc.)
- * These use BEM color classes for consistency
- */
-export const dataTypeColors = {
-    string: "flowdrop-color--emerald",
-    text: "flowdrop-color--emerald",
-    number: "flowdrop-color--blue",
-    integer: "flowdrop-color--blue",
-    float: "flowdrop-color--blue",
-    boolean: "flowdrop-color--purple",
-    array: "flowdrop-color--amber",
-    list: "flowdrop-color--amber",
-    object: "flowdrop-color--orange",
-    json: "flowdrop-color--orange",
-    file: "flowdrop-color--red",
-    document: "flowdrop-color--red",
-    image: "flowdrop-color--pink",
-    picture: "flowdrop-color--pink",
-    audio: "flowdrop-color--indigo",
-    sound: "flowdrop-color--indigo",
-    video: "flowdrop-color--teal",
-    movie: "flowdrop-color--teal",
-    url: "flowdrop-color--cyan",
-    email: "flowdrop-color--cyan",
-    date: "flowdrop-color--lime",
-    datetime: "flowdrop-color--lime",
-    time: "flowdrop-color--lime"
-};
-/**
- * Get data type color class
- * @param dataType - The data type string
- * @returns The color class for the data type
+ * Get data type color
+ * @param dataType - The data type
+ * @returns The color for the data type
  */
 export function getDataTypeColor(dataType) {
-    return dataTypeColors[dataType.toLowerCase()] || "flowdrop-color--slate";
+    return getDataTypeColorToken(dataType);
+}
+/**
+ * Parse typed array notation and get display information
+ * @param dataType - The data type (e.g., "string[]", "number", "object[]")
+ * @returns Object with display information
+ */
+export function parseDataTypeDisplay(dataType) {
+    // Check if it's a typed array (ends with [])
+    const isArray = dataType.endsWith('[]');
+    if (isArray) {
+        const elementType = dataType.slice(0, -2); // Remove []
+        const config = getDataTypeConfig(dataType);
+        return {
+            baseType: dataType,
+            isArray: true,
+            displayName: config?.name || `${elementType}[]`,
+            elementType: elementType
+        };
+    }
+    else {
+        const config = getDataTypeConfig(dataType);
+        return {
+            baseType: dataType,
+            isArray: false,
+            displayName: config?.name || dataType
+        };
+    }
+}
+/**
+ * Get formatted display text for a data type
+ * @param dataType - The data type
+ * @returns Formatted display text
+ */
+export function getDataTypeDisplayText(dataType) {
+    const parsed = parseDataTypeDisplay(dataType);
+    return parsed.displayName;
+}
+/**
+ * Check if a data type represents an array
+ * @param dataType - The data type
+ * @returns True if it's an array type
+ */
+export function isArrayDataType(dataType) {
+    return dataType.endsWith('[]') || dataType === 'array' || dataType === 'list';
+}
+/**
+ * Get the element type from an array data type
+ * @param arrayDataType - The array data type (e.g., "string[]")
+ * @returns The element type (e.g., "string") or null if not an array
+ */
+export function getArrayElementType(arrayDataType) {
+    if (arrayDataType.endsWith('[]')) {
+        return arrayDataType.slice(0, -2);
+    }
+    return null;
 }

package/dist/utils/config.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Configuration utilities for FlowDrop Editor
+ */
+import type { WorkflowEditorConfig, EditorFeatures, UIConfig, APIConfig, ExecutionConfig, StorageConfig } from '../types/config.js';
+import type { EndpointConfig } from '../config/endpoints.js';
+/**
+ * Create default editor features configuration
+ */
+export declare function createDefaultFeatures(): EditorFeatures;
+/**
+ * Create default UI configuration
+ */
+export declare function createDefaultUIConfig(): UIConfig;
+/**
+ * Create default API configuration
+ */
+export declare function createDefaultAPIConfig(): APIConfig;
+/**
+ * Create default execution configuration
+ */
+export declare function createDefaultExecutionConfig(): ExecutionConfig;
+/**
+ * Create default storage configuration
+ */
+export declare function createDefaultStorageConfig(): StorageConfig;
+/**
+ * Create default workflow editor configuration
+ */
+export declare function createDefaultConfig(endpointConfig?: EndpointConfig): WorkflowEditorConfig;
+/**
+ * Merge configuration with defaults
+ */
+export declare function mergeConfig(userConfig: Partial<WorkflowEditorConfig>, defaultConfig: WorkflowEditorConfig): WorkflowEditorConfig;
+/**
+ * Validate configuration
+ */
+export declare function validateConfig(config: WorkflowEditorConfig): string[];
+/**
+ * Create configuration from environment variables
+ */
+export declare function createConfigFromEnv(): WorkflowEditorConfig;