@flowdrop/flowdrop 1.4.0 → 1.6.0

package/dist/helpers/workflowEditorHelper.js

@@ -2,241 +2,44 @@
  * Workflow Editor Helper
  * Contains business logic for workflow operations
  */
-import { MarkerType } from "@xyflow/svelte";
-import { hasCycles, hasInvalidCycles, isLoopbackEdge, } from "../utils/connections.js";
-import { workflowApi, nodeApi, setEndpointConfig } from "../services/api.js";
-import { v4 as uuidv4 } from "uuid";
-import { workflowActions } from "../stores/workflowStore.svelte.js";
-import { nodeExecutionService } from "../services/nodeExecutionService.js";
-import { WorkflowAdapter } from "../adapters/WorkflowAdapter.js";
-import { AgentSpecAdapter } from "../adapters/agentspec/AgentSpecAdapter.js";
-import { validateForAgentSpecExport } from "../adapters/agentspec/validator.js";
-import { extractPortId } from "../utils/handleIds.js";
-import { EDGE_MARKER_SIZES } from "../config/constants.js";
-import { logger } from "../utils/logger.js";
+import { hasCycles, hasInvalidCycles } from '../utils/connections.js';
+import { workflowApi, nodeApi, setEndpointConfig } from '../services/api.js';
+import { v4 as uuidv4 } from 'uuid';
+import { workflowActions } from '../stores/workflowStore.svelte.js';
+import { nodeExecutionService } from '../services/nodeExecutionService.js';
+import { WorkflowAdapter } from '../adapters/WorkflowAdapter.js';
+import { AgentSpecAdapter } from '../adapters/agentspec/AgentSpecAdapter.js';
+import { validateForAgentSpecExport } from '../adapters/agentspec/validator.js';
+import { extractPortId } from '../utils/handleIds.js';
+import { logger } from '../utils/logger.js';
+import { generateNodeId, extractConfigDefaults } from '../utils/nodeIds.js';
+import { applyConnectionStyling as applyConnectionStylingUtil, updateEdgeStyles as updateEdgeStylesUtil, isGatewayBranch as isGatewayBranchUtil, getPortDataType as getPortDataTypeUtil, getEdgeCategory as getEdgeCategoryUtil, getEdgeCategoryWithLoopback as getEdgeCategoryWithLoopbackUtil } from '../utils/edgeStyling.js';
+export { generateNodeId, extractConfigDefaults } from '../utils/nodeIds.js';
 /**
- * Generate a unique node ID based on node type and existing nodes
- * Format: <node_type>.<number>
- * Example: boolean_gateway.1, calculator.2
- */
-export function generateNodeId(nodeTypeId, existingNodes) {
-    // Count how many nodes of this type already exist
-    const existingNodeIds = existingNodes
-        .filter((node) => node.data?.metadata?.id === nodeTypeId)
-        .map((node) => node.id);
-    // Extract the numbers from existing IDs with the same prefix
-    const existingNumbers = existingNodeIds
-        .map((id) => {
-        const match = id.match(new RegExp(`^${nodeTypeId}\\.(\\d+)$`));
-        return match ? parseInt(match[1], 10) : 0;
-    })
-        .filter((num) => num > 0);
-    // Find the next available number (highest + 1)
-    const nextNumber = existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1;
-    return `${nodeTypeId}.${nextNumber}`;
-}
-/**
- * Edge styling configuration based on source port data type
+ * Edge styling configuration based on source port data type.
+ * Delegates to standalone functions in utils/edgeStyling.ts.
  */
 export class EdgeStylingHelper {
-    /**
-     * Extract the port ID from a handle ID
-     * @param handleId - The handle ID string (e.g., "sample-node.1-output-trigger" or "trigger")
-     * @returns The port ID (e.g., "trigger") or the handleId itself for short format
-     */
     static extractPortIdFromHandle(handleId) {
         return extractPortId(handleId);
     }
-    /**
-     * Check if a port ID matches a dynamic branch in a Gateway node
-     * Gateway nodes store branches in config.branches array
-     * @param node - The workflow node to check
-     * @param portId - The port ID to look up
-     * @returns true if the portId matches a gateway branch
-     */
     static isGatewayBranch(node, portId) {
-        // Check if this is a gateway node with dynamic branches
-        const nodeType = node.data?.metadata?.type || node.type;
-        if (nodeType !== "gateway") {
-            return false;
-        }
-        // Check if the portId matches a branch name in config.branches
-        const branches = node.data?.config?.branches;
-        if (!branches || !Array.isArray(branches)) {
-            return false;
-        }
-        return branches.some((branch) => branch.name === portId);
+        return isGatewayBranchUtil(node, portId);
     }
-    /**
-     * Get the data type of a port from a node's metadata
-     * Also handles dynamic ports like Gateway branches
-     * @param node - The workflow node containing the port
-     * @param portId - The port ID to look up
-     * @param portType - Whether to look in "inputs" or "outputs"
-     * @returns The port's dataType or null if not found
-     */
     static getPortDataType(node, portId, portType) {
-        // First, check static ports in metadata
-        const ports = portType === "output"
-            ? node.data?.metadata?.outputs
-            : node.data?.metadata?.inputs;
-        if (ports && Array.isArray(ports)) {
-            const port = ports.find((p) => p.id === portId);
-            if (port?.dataType) {
-                return port.dataType;
-            }
-        }
-        // Check dynamic ports from config (dynamicInputs/dynamicOutputs)
-        const dynamicKey = portType === "output" ? "dynamicOutputs" : "dynamicInputs";
-        const dynamicPorts = node.data?.config?.[dynamicKey];
-        if (dynamicPorts && Array.isArray(dynamicPorts)) {
-            const dynamicPort = dynamicPorts.find((p) => p.name === portId);
-            if (dynamicPort?.dataType) {
-                return dynamicPort.dataType;
-            }
-        }
-        // For output ports, also check dynamic Gateway branches
-        // Gateway branches are always trigger type (control flow)
-        if (portType === "output" && this.isGatewayBranch(node, portId)) {
-            return "trigger";
-        }
-        return null;
+        return getPortDataTypeUtil(node, portId, portType);
     }
-    /**
-     * Determine the edge category based on source port data type
-     * Note: This method does not check for loopback edges.
-     * Use getEdgeCategoryWithLoopback() for full edge categorization.
-     *
-     * @param sourcePortDataType - The data type of the source output port
-     * @returns The edge category for styling
-     */
     static getEdgeCategory(sourcePortDataType) {
-        if (sourcePortDataType === "trigger") {
-            return "trigger";
-        }
-        if (sourcePortDataType === "tool") {
-            return "tool";
-        }
-        // All other data types (string, number, boolean, array, etc.) are "data" edges
-        return "data";
+        return getEdgeCategoryUtil(sourcePortDataType);
     }
-    /**
-     * Determine the full edge category including loopback detection
-     * Loopback edges take precedence over source port data type
-     *
-     * @param edge - The edge to categorize
-     * @param sourcePortDataType - The data type of the source output port
-     * @returns The edge category for styling
-     */
     static getEdgeCategoryWithLoopback(edge, sourcePortDataType) {
-        // Loopback edges are identified by their target handle
-        // Check this first as it takes precedence
-        if (isLoopbackEdge(edge)) {
-            return "loopback";
-        }
-        // Fall back to source port data type categorization
-        return this.getEdgeCategory(sourcePortDataType);
+        return getEdgeCategoryWithLoopbackUtil(edge, sourcePortDataType);
     }
-    /**
-     * Apply custom styling to connection edges based on edge type:
-     * - Loopback: Dashed gray line for loop iteration (targets loop_back port)
-     * - Trigger ports: Solid black line with arrow
-     * - Tool ports: Dashed amber line with arrow
-     * - Data ports: Normal gray line with arrow
-     */
     static applyConnectionStyling(edge, sourceNode, targetNode) {
-        // Extract port ID from sourceHandle
-        const sourcePortId = this.extractPortIdFromHandle(edge.sourceHandle);
-        // Get the source port's data type
-        const sourcePortDataType = sourcePortId
-            ? this.getPortDataType(sourceNode, sourcePortId, "output")
-            : null;
-        // Determine edge category (loopback takes precedence)
-        const edgeCategory = this.getEdgeCategoryWithLoopback(edge, sourcePortDataType);
-        // Apply styling based on edge category
-        // Marker colors use CSS custom properties so they respond to theme changes automatically
-        switch (edgeCategory) {
-            case "loopback":
-                // Loopback edges: dashed gray line for loop iteration
-                edge.style =
-                    "stroke: var(--fd-edge-loopback); stroke-dasharray: var(--fd-edge-loopback-dasharray); stroke-width: var(--fd-edge-loopback-width); opacity: var(--fd-edge-loopback-opacity);";
-                edge.class = "flowdrop--edge--loopback";
-                edge.markerEnd = {
-                    type: MarkerType.ArrowClosed,
-                    ...EDGE_MARKER_SIZES.loopback,
-                    color: "var(--fd-edge-loopback)",
-                };
-                break;
-            case "trigger":
-                // Trigger edges: solid dark line for control flow
-                edge.style =
-                    "stroke: var(--fd-edge-trigger); stroke-width: var(--fd-edge-trigger-width);";
-                edge.class = "flowdrop--edge--trigger";
-                edge.markerEnd = {
-                    type: MarkerType.ArrowClosed,
-                    ...EDGE_MARKER_SIZES.trigger,
-                    color: "var(--fd-edge-trigger)",
-                };
-                break;
-            case "tool":
-                // Tool edges: dashed amber line
-                edge.style = "stroke: var(--fd-edge-tool); stroke-dasharray: 5 3;";
-                edge.class = "flowdrop--edge--tool";
-                edge.markerEnd = {
-                    type: MarkerType.ArrowClosed,
-                    ...EDGE_MARKER_SIZES.tool,
-                    color: "var(--fd-edge-tool)",
-                };
-                break;
-            case "data":
-            default:
-                // Data edges: normal gray line
-                edge.style = "stroke: var(--fd-edge-data);";
-                edge.class = "flowdrop--edge--data";
-                edge.markerEnd = {
-                    type: MarkerType.ArrowClosed,
-                    ...EDGE_MARKER_SIZES.data,
-                    color: "var(--fd-edge-data)",
-                };
-                break;
-        }
-        // Store metadata in edge data for API and persistence
-        edge.data = {
-            ...edge.data,
-            metadata: {
-                ...(edge.data?.metadata || {}),
-                edgeType: edgeCategory,
-                sourcePortDataType: sourcePortDataType ?? undefined,
-            },
-            targetNodeType: targetNode.type,
-            targetCategory: targetNode.data.metadata.category,
-        };
+        applyConnectionStylingUtil(edge, sourceNode, targetNode);
     }
-    /**
-     * Update existing edges with custom styling rules
-     */
     static updateEdgeStyles(edges, nodes) {
-        return edges.map((edge) => {
-            // Find source and target nodes
-            const sourceNode = nodes.find((node) => node.id === edge.source);
-            const targetNode = nodes.find((node) => node.id === edge.target);
-            // Create a copy of the edge
-            const updatedEdge = { ...edge };
-            if (!sourceNode || !targetNode) {
-                // Set default edgeType even when nodes are not found
-                updatedEdge.data = {
-                    ...updatedEdge.data,
-                    metadata: {
-                        ...(updatedEdge.data?.metadata || {}),
-                        edgeType: "data",
-                    },
-                };
-                return updatedEdge;
-            }
-            // Apply full styling when nodes are available
-            this.applyConnectionStyling(updatedEdge, sourceNode, targetNode);
-            return updatedEdge;
-        });
+        return updateEdgeStylesUtil(edges, nodes);
     }
 }
 /**
@@ -257,33 +60,29 @@ export class NodeOperationsHelper {
             return fetchedNodes;
         }
         catch (error) {
-            logger.error("Failed to load nodes from API:", error);
+            logger.error('Failed to load nodes from API:', error);
             // Use fallback sample nodes
             return [
                 {
-                    id: "text-input",
-                    name: "Text Input",
-                    category: "inputs",
-                    description: "Simple text input field",
-                    version: "1.0.0",
-                    icon: "mdi:text-box",
+                    id: 'text-input',
+                    name: 'Text Input',
+                    category: 'inputs',
+                    description: 'Simple text input field',
+                    version: '1.0.0',
+                    icon: 'mdi:text-box',
                     inputs: [],
-                    outputs: [
-                        { id: "text", name: "text", type: "output", dataType: "string" },
-                    ],
+                    outputs: [{ id: 'text', name: 'text', type: 'output', dataType: 'string' }]
                 },
                 {
-                    id: "text-output",
-                    name: "Text Output",
-                    category: "outputs",
-                    description: "Display text output",
-                    version: "1.0.0",
-                    icon: "mdi:text-box-outline",
-                    inputs: [
-                        { id: "text", name: "text", type: "input", dataType: "string" },
-                    ],
-                    outputs: [],
-                },
+                    id: 'text-output',
+                    name: 'Text Output',
+                    category: 'outputs',
+                    description: 'Display text output',
+                    version: '1.0.0',
+                    icon: 'mdi:text-box-outline',
+                    inputs: [{ id: 'text', name: 'text', type: 'input', dataType: 'string' }],
+                    outputs: []
+                }
             ];
         }
     }
@@ -302,7 +101,7 @@ export class NodeOperationsHelper {
             return executionInfo;
         }
         catch (error) {
-            logger.error("Failed to load node execution info:", error);
+            logger.error('Failed to load node execution info:', error);
             return {};
         }
     }
@@ -315,7 +114,7 @@ export class NodeOperationsHelper {
             // Handle both old format (with type: "node") and new format (direct NodeMetadata)
             let nodeType;
             let nodeData;
-            if (parsedData.type === "node") {
+            if (parsedData.type === 'node') {
                 // Old format from sidebar
                 nodeType = parsedData.nodeData.metadata;
                 nodeData = parsedData.nodeData;
@@ -323,28 +122,10 @@ export class NodeOperationsHelper {
             else {
                 // New format (direct NodeMetadata)
                 nodeType = parsedData;
-                // Extract initial config from configSchema
-                let initialConfig = {};
-                if (nodeType.configSchema &&
-                    typeof nodeType.configSchema === "object") {
-                    // If configSchema is a JSON Schema, extract default values
-                    if (nodeType.configSchema.properties) {
-                        // JSON Schema format - extract defaults
-                        Object.entries(nodeType.configSchema.properties).forEach(([key, prop]) => {
-                            if (prop && typeof prop === "object" && "default" in prop) {
-                                initialConfig[key] = prop.default;
-                            }
-                        });
-                    }
-                    else {
-                        // Simple object format - use as is
-                        initialConfig = { ...nodeType.configSchema };
-                    }
-                }
                 nodeData = {
                     label: nodeType.name,
-                    config: initialConfig,
-                    metadata: nodeType,
+                    config: extractConfigDefaults(nodeType.configSchema),
+                    metadata: nodeType
                 };
             }
             // Generate node ID based on node type and existing nodes
@@ -353,18 +134,18 @@ export class NodeOperationsHelper {
             // UniversalNode component handles internal switching based on metadata and config
             const newNode = {
                 id: newNodeId,
-                type: "universalNode",
+                type: 'universalNode',
                 position, // Use the position calculated from the drop event
                 deletable: true,
                 data: {
                     ...nodeData,
-                    nodeId: newNodeId, // Use the same ID
-                },
+                    nodeId: newNodeId // Use the same ID
+                }
             };
             return newNode;
         }
         catch (error) {
-            logger.error("Error parsing node data:", error);
+            logger.error('Error parsing node data:', error);
             return null;
         }
     }
@@ -379,12 +160,12 @@ export class WorkflowOperationsHelper {
     static generateMetadata(existingMetadata) {
         const now = new Date().toISOString();
         return {
-            version: "1.0.0",
+            version: '1.0.0',
             createdAt: now,
             ...(existingMetadata ?? {}),
             updatedAt: now,
             versionId: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-            updateNumber: (existingMetadata?.updateNumber || 0) + 1,
+            updateNumber: (existingMetadata?.updateNumber || 0) + 1
         };
     }
     /**
@@ -395,7 +176,7 @@ export class WorkflowOperationsHelper {
             ...workflow,
             nodes,
             edges,
-            metadata: this.generateMetadata(workflow.metadata),
+            metadata: this.generateMetadata(workflow.metadata)
         };
     }
     /**
@@ -406,7 +187,7 @@ export class WorkflowOperationsHelper {
             ...workflow,
             nodes: [],
             edges: [],
-            metadata: this.generateMetadata(workflow.metadata),
+            metadata: this.generateMetadata(workflow.metadata)
         };
     }
     /**
@@ -418,10 +199,10 @@ export class WorkflowOperationsHelper {
             nodes: workflow.nodes.map((node) => node.id === nodeId
                 ? {
                     ...node,
-                    data: { ...node.data, config: { ...newConfig } },
+                    data: { ...node.data, config: { ...newConfig } }
                 }
                 : node),
-            metadata: this.generateMetadata(workflow.metadata),
+            metadata: this.generateMetadata(workflow.metadata)
         };
     }
     /**
@@ -431,7 +212,7 @@ export class WorkflowOperationsHelper {
         return {
             ...workflow,
             nodes: [...workflow.nodes, node],
-            metadata: this.generateMetadata(workflow.metadata),
+            metadata: this.generateMetadata(workflow.metadata)
         };
     }
     /**
@@ -439,7 +220,7 @@ export class WorkflowOperationsHelper {
      */
     static async saveWorkflow(workflow) {
         if (!workflow) {
-            logger.warn("No workflow data available to save");
+            logger.warn('No workflow data available to save');
             return null;
         }
         try {
@@ -455,14 +236,14 @@ export class WorkflowOperationsHelper {
             }
             const workflowToSave = {
                 id: workflowId,
-                name: workflow.name || "Untitled Workflow",
+                name: workflow.name || 'Untitled Workflow',
                 nodes: workflow.nodes || [],
                 edges: workflow.edges || [],
                 metadata: {
-                    version: "1.0.0",
+                    version: '1.0.0',
                     createdAt: workflow.metadata?.createdAt || new Date().toISOString(),
-                    updatedAt: new Date().toISOString(),
-                },
+                    updatedAt: new Date().toISOString()
+                }
             };
             const savedWorkflow = await workflowApi.saveWorkflow(workflowToSave);
             // Update the workflow ID if it changed (new workflow)
@@ -473,14 +254,14 @@ export class WorkflowOperationsHelper {
                     name: workflowToSave.name,
                     metadata: {
                         ...workflowToSave.metadata,
-                        ...savedWorkflow.metadata,
-                    },
+                        ...savedWorkflow.metadata
+                    }
                 });
             }
             return savedWorkflow;
         }
         catch (error) {
-            logger.error("Failed to save workflow:", error);
+            logger.error('Failed to save workflow:', error);
             throw error;
         }
     }
@@ -489,26 +270,26 @@ export class WorkflowOperationsHelper {
      */
     static exportWorkflow(workflow) {
         if (!workflow) {
-            logger.warn("No workflow data available to export");
+            logger.warn('No workflow data available to export');
             return;
         }
         // Use the same ID logic as saveWorkflow
         const workflowId = workflow.id || uuidv4();
         const workflowToExport = {
             id: workflowId,
-            name: workflow.name || "Untitled Workflow",
+            name: workflow.name || 'Untitled Workflow',
             nodes: workflow.nodes || [],
             edges: workflow.edges || [],
             metadata: {
-                version: "1.0.0",
+                version: '1.0.0',
                 createdAt: workflow.metadata?.createdAt || new Date().toISOString(),
-                updatedAt: new Date().toISOString(),
-            },
+                updatedAt: new Date().toISOString()
+            }
         };
         const dataStr = JSON.stringify(workflowToExport, null, 2);
-        const dataBlob = new Blob([dataStr], { type: "application/json" });
+        const dataBlob = new Blob([dataStr], { type: 'application/json' });
         const url = URL.createObjectURL(dataBlob);
-        const link = document.createElement("a");
+        const link = document.createElement('a');
         link.href = url;
         link.download = `${workflowToExport.name}.json`;
         link.click();
@@ -527,8 +308,8 @@ export class WorkflowOperationsHelper {
         if (!workflow) {
             return {
                 valid: false,
-                errors: ["No workflow data available to export"],
-                warnings: [],
+                errors: ['No workflow data available to export'],
+                warnings: []
             };
         }
         // Convert to StandardWorkflow first
@@ -543,11 +324,11 @@ export class WorkflowOperationsHelper {
         const agentSpecAdapter = new AgentSpecAdapter();
         const agentSpecJson = agentSpecAdapter.exportJSON(standardWorkflow);
         // Trigger download
-        const dataBlob = new Blob([agentSpecJson], { type: "application/json" });
+        const dataBlob = new Blob([agentSpecJson], { type: 'application/json' });
         const url = URL.createObjectURL(dataBlob);
-        const link = document.createElement("a");
+        const link = document.createElement('a');
         link.href = url;
-        link.download = `${workflow.name || "workflow"}-agentspec.json`;
+        link.download = `${workflow.name || 'workflow'}-agentspec.json`;
         link.click();
         URL.revokeObjectURL(url);
         return validation;

package/dist/index.d.ts

@@ -29,9 +29,9 @@
  *
  * @module flowdrop
  */
-export * from "./core/index.js";
-export * from "./form/index.js";
-export * from "./display/index.js";
-export * from "./playground/index.js";
-export * from "./editor/index.js";
-export * from "./settings/index.js";
+export * from './core/index.js';
+export * from './form/index.js';
+export * from './display/index.js';
+export * from './playground/index.js';
+export * from './editor/index.js';
+export * from './settings/index.js';

package/dist/index.js

@@ -39,26 +39,26 @@
 // ============================================================================
 // Core Exports (Types & Utilities - No Heavy Dependencies)
 // ============================================================================
-export * from "./core/index.js";
+export * from './core/index.js';
 // ============================================================================
 // Form Exports
 // ============================================================================
-export * from "./form/index.js";
+export * from './form/index.js';
 // Note: Heavy form fields (code, markdown) are NOT auto-registered.
 // Users must import from form/code or form/markdown and register explicitly.
 // ============================================================================
 // Display Exports
 // ============================================================================
-export * from "./display/index.js";
+export * from './display/index.js';
 // ============================================================================
 // Playground Exports
 // ============================================================================
-export * from "./playground/index.js";
+export * from './playground/index.js';
 // ============================================================================
 // Editor Exports (includes @xyflow/svelte and auto-registers builtin nodes)
 // ============================================================================
-export * from "./editor/index.js";
+export * from './editor/index.js';
 // ============================================================================
 // Settings Exports (stores, services, components, types)
 // ============================================================================
-export * from "./settings/index.js";
+export * from './settings/index.js';

package/dist/mocks/app-environment.js

@@ -4,7 +4,7 @@
  */
 
 // Mock browser check
-export const browser = typeof window !== "undefined";
+export const browser = typeof window !== 'undefined';
 
 // Mock dev check
 export const dev = false;
@@ -13,4 +13,4 @@ export const dev = false;
 export const building = false;
 
 // Mock version
-export const version = "1.0.0";
+export const version = '1.0.0';

package/dist/mocks/app-forms.js

@@ -10,7 +10,7 @@ export const enhance = (form, options = {}) => {
     event.preventDefault();
     // Basic form handling for library context
     if (options.onResult) {
-      options.onResult({ type: "success" });
+      options.onResult({ type: 'success' });
     }
   };
 };

package/dist/mocks/app-navigation.js

@@ -3,12 +3,12 @@
  * Provides minimal implementations for SvelteKit navigation in library context
  */
 
-import { logger } from "../utils/logger.js";
+import { logger } from '../utils/logger.js';
 
 // Mock goto function
 export const goto = async () => {
   // No-op for library context
-  logger.warn("Navigation not available in library context");
+  logger.warn('Navigation not available in library context');
 };
 
 // Mock invalidate function

package/dist/mocks/app-stores.js

@@ -3,17 +3,17 @@
  * Provides minimal implementations for SvelteKit stores in library context
  */
 
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
 
 // Mock page store
 export const page = writable({
-  url: new URL("http://localhost:3000"),
+  url: new URL('http://localhost:3000'),
   params: {},
   route: { id: null },
   status: 200,
   error: null,
   data: {},
-  form: null,
+  form: null
 });
 
 // Mock navigating store