@flowdrop/flowdrop 1.4.0 → 1.6.0

package/dist/adapters/agentspec/autoLayout.d.ts

@@ -9,26 +9,72 @@
  * 3. Position nodes with configurable spacing
  * 4. Fan out branches vertically from BranchingNode
  */
-import type { AgentSpecFlow } from "../../types/agentspec.js";
+import type { AgentSpecFlow } from '../../types/agentspec.js';
+/** Measured dimensions for a node */
+export interface NodeDimensions {
+    width: number;
+    height: number;
+}
 /** Layout configuration */
 export interface AutoLayoutConfig {
-    /** Horizontal spacing between layers (px) */
-    horizontalSpacing: number;
-    /** Vertical spacing between nodes in the same layer (px) */
-    verticalSpacing: number;
+    /** Minimum horizontal gap between the right edge of one layer and the left edge of the next (px) */
+    horizontalGap: number;
+    /** Minimum vertical gap between the bottom edge of one node and the top edge of the next in the same layer (px) */
+    verticalGap: number;
     /** Starting X position */
     startX: number;
     /** Starting Y position */
     startY: number;
+    /** Fallback node width when measured dimensions are unavailable */
+    defaultNodeWidth: number;
+    /** Fallback node height when measured dimensions are unavailable */
+    defaultNodeHeight: number;
 }
 /**
  * Compute node positions for an Agent Spec flow using layered layout.
+ * Takes actual node dimensions into account to prevent overlap.
  *
  * @param flow - The Agent Spec flow to layout
  * @param config - Optional layout configuration
+ * @param nodeDimensions - Optional map of node name to measured {width, height}
  * @returns Map of node name to {x, y} position
  */
-export declare function computeAutoLayout(flow: AgentSpecFlow, config?: Partial<AutoLayoutConfig>): Map<string, {
+export declare function computeAutoLayout(flow: AgentSpecFlow, config?: Partial<AutoLayoutConfig>, nodeDimensions?: Map<string, NodeDimensions>): Map<string, {
+    x: number;
+    y: number;
+}>;
+/** Input position for beautify: existing node placement */
+export interface NodePosition {
+    x: number;
+    y: number;
+}
+/** Beautify configuration */
+export interface BeautifyLayoutConfig {
+    /** Minimum horizontal gap between the right edge of one column and the left edge of the next (px) */
+    horizontalGap: number;
+    /** Minimum vertical gap between the bottom edge of one node and the top edge of the next in the same column (px) */
+    verticalGap: number;
+    /** Fallback node width when measured dimensions are unavailable */
+    defaultNodeWidth: number;
+    /** Fallback node height when measured dimensions are unavailable */
+    defaultNodeHeight: number;
+}
+/**
+ * Beautify existing node positions: preserve relative column/row ordering
+ * but apply uniform spacing based on actual node dimensions.
+ *
+ * Algorithm:
+ * 1. Cluster nodes into columns by X proximity (gap threshold = median width)
+ * 2. Sort columns left-to-right by their median X
+ * 3. Within each column, sort nodes top-to-bottom by their original Y
+ * 4. Re-position with uniform horizontal and vertical gaps
+ *
+ * @param positions - Current node positions (keyed by node id)
+ * @param config - Optional spacing configuration
+ * @param nodeDimensions - Optional map of node id to measured {width, height}
+ * @returns Map of node id to new {x, y} position
+ */
+export declare function computeBeautifyLayout(positions: Map<string, NodePosition>, config?: Partial<BeautifyLayoutConfig>, nodeDimensions?: Map<string, NodeDimensions>): Map<string, {
     x: number;
     y: number;
 }>;

package/dist/adapters/agentspec/autoLayout.js

@@ -10,36 +10,41 @@
  * 4. Fan out branches vertically from BranchingNode
  */
 const DEFAULT_CONFIG = {
-    horizontalSpacing: 300,
-    verticalSpacing: 150,
+    horizontalGap: 120,
+    verticalGap: 40,
     startX: 100,
     startY: 100,
+    defaultNodeWidth: 220,
+    defaultNodeHeight: 150
 };
 /**
  * Compute node positions for an Agent Spec flow using layered layout.
+ * Takes actual node dimensions into account to prevent overlap.
  *
  * @param flow - The Agent Spec flow to layout
  * @param config - Optional layout configuration
+ * @param nodeDimensions - Optional map of node name to measured {width, height}
  * @returns Map of node name to {x, y} position
  */
-export function computeAutoLayout(flow, config = {}) {
+export function computeAutoLayout(flow, config = {}, nodeDimensions) {
     const cfg = { ...DEFAULT_CONFIG, ...config };
     const positions = new Map();
     if (flow.nodes.length === 0)
         return positions;
+    const getDims = (name) => nodeDimensions?.get(name) ?? {
+        width: cfg.defaultNodeWidth,
+        height: cfg.defaultNodeHeight
+    };
     // Build adjacency list from control-flow edges
     const adjacency = new Map();
-    const inDegree = new Map();
     for (const node of flow.nodes) {
         adjacency.set(node.name, []);
-        inDegree.set(node.name, 0);
     }
     for (const edge of flow.control_flow_connections) {
         const neighbors = adjacency.get(edge.from_node);
         if (neighbors) {
             neighbors.push(edge.to_node);
         }
-        inDegree.set(edge.to_node, (inDegree.get(edge.to_node) || 0) + 1);
     }
     // Also consider data-flow edges for connectivity (but don't affect layering priority)
     if (flow.data_flow_connections) {
@@ -74,21 +79,116 @@ export function computeAutoLayout(flow, config = {}) {
     }
     // Sort layers and assign positions
     const sortedLayers = Array.from(layerGroups.keys()).sort((a, b) => a - b);
+    // Compute X positions layer by layer, using the widest node in each layer
+    const layerXPositions = new Map();
+    let currentX = cfg.startX;
     for (const layerIndex of sortedLayers) {
+        layerXPositions.set(layerIndex, currentX);
+        // Advance X by the widest node in this layer + horizontal gap
         const nodesInLayer = layerGroups.get(layerIndex);
-        const x = cfg.startX + layerIndex * cfg.horizontalSpacing;
-        // Center nodes vertically
-        const totalHeight = (nodesInLayer.length - 1) * cfg.verticalSpacing;
-        const startY = cfg.startY - totalHeight / 2;
+        const maxWidth = Math.max(...nodesInLayer.map((name) => getDims(name).width));
+        currentX += maxWidth + cfg.horizontalGap;
+    }
+    // Compute Y positions within each layer, using actual node heights
+    for (const layerIndex of sortedLayers) {
+        const nodesInLayer = layerGroups.get(layerIndex);
+        const x = layerXPositions.get(layerIndex);
+        // Calculate total height of this column (sum of node heights + gaps)
+        const heights = nodesInLayer.map((name) => getDims(name).height);
+        const totalHeight = heights.reduce((sum, h) => sum + h, 0) + (nodesInLayer.length - 1) * cfg.verticalGap;
+        // Center the column vertically around startY
+        let y = cfg.startY - totalHeight / 2;
         for (let i = 0; i < nodesInLayer.length; i++) {
-            positions.set(nodesInLayer[i], {
-                x,
-                y: startY + i * cfg.verticalSpacing,
-            });
+            positions.set(nodesInLayer[i], { x, y });
+            y += heights[i] + cfg.verticalGap;
         }
     }
     return positions;
 }
+const DEFAULT_BEAUTIFY_CONFIG = {
+    horizontalGap: 120,
+    verticalGap: 40,
+    defaultNodeWidth: 220,
+    defaultNodeHeight: 150
+};
+/**
+ * Beautify existing node positions: preserve relative column/row ordering
+ * but apply uniform spacing based on actual node dimensions.
+ *
+ * Algorithm:
+ * 1. Cluster nodes into columns by X proximity (gap threshold = median width)
+ * 2. Sort columns left-to-right by their median X
+ * 3. Within each column, sort nodes top-to-bottom by their original Y
+ * 4. Re-position with uniform horizontal and vertical gaps
+ *
+ * @param positions - Current node positions (keyed by node id)
+ * @param config - Optional spacing configuration
+ * @param nodeDimensions - Optional map of node id to measured {width, height}
+ * @returns Map of node id to new {x, y} position
+ */
+export function computeBeautifyLayout(positions, config = {}, nodeDimensions) {
+    const cfg = { ...DEFAULT_BEAUTIFY_CONFIG, ...config };
+    const result = new Map();
+    if (positions.size === 0)
+        return result;
+    const getDims = (id) => nodeDimensions?.get(id) ?? {
+        width: cfg.defaultNodeWidth,
+        height: cfg.defaultNodeHeight
+    };
+    // Collect all nodes sorted by X
+    const entries = Array.from(positions.entries()).map(([id, pos]) => ({
+        id,
+        x: pos.x,
+        y: pos.y
+    }));
+    entries.sort((a, b) => a.x - b.x);
+    // Determine clustering threshold: half the median node width
+    const widths = entries.map((e) => getDims(e.id).width);
+    const sortedWidths = [...widths].sort((a, b) => a - b);
+    const medianWidth = sortedWidths[Math.floor(sortedWidths.length / 2)];
+    const clusterThreshold = medianWidth * 0.75;
+    // Cluster into columns by X proximity
+    const columns = [];
+    let currentColumn = [entries[0]];
+    for (let i = 1; i < entries.length; i++) {
+        const prevX = currentColumn[currentColumn.length - 1].x;
+        if (entries[i].x - prevX > clusterThreshold) {
+            columns.push(currentColumn);
+            currentColumn = [entries[i]];
+        }
+        else {
+            currentColumn.push(entries[i]);
+        }
+    }
+    columns.push(currentColumn);
+    // Sort each column's nodes top-to-bottom by original Y
+    for (const col of columns) {
+        col.sort((a, b) => a.y - b.y);
+    }
+    // Compute the global vertical center from the original positions
+    const allYs = entries.map((e) => e.y);
+    const globalCenterY = (Math.min(...allYs) + Math.max(...allYs)) / 2;
+    // Assign new positions column by column
+    let currentX = entries[0].x; // Start from the leftmost original X
+    for (const col of columns) {
+        // Find the widest node in this column
+        const maxWidth = Math.max(...col.map((e) => getDims(e.id).width));
+        // Calculate total height of this column
+        const heights = col.map((e) => getDims(e.id).height);
+        const totalHeight = heights.reduce((sum, h) => sum + h, 0) + (col.length - 1) * cfg.verticalGap;
+        // Center column vertically around the global center
+        let y = globalCenterY - totalHeight / 2;
+        for (let i = 0; i < col.length; i++) {
+            result.set(col[i].id, { x: currentX, y });
+            y += heights[i] + cfg.verticalGap;
+        }
+        currentX += maxWidth + cfg.horizontalGap;
+    }
+    return result;
+}
+// ============================================================================
+// Layer Assignment (for auto-layout)
+// ============================================================================
 /**
  * Assign layers using longest path from the start node (modified BFS).
  * This ensures branching nodes fan out properly and convergence points
@@ -97,28 +197,23 @@ export function computeAutoLayout(flow, config = {}) {
 function assignLayers(startNode, adjacency, nodeCount) {
     const layers = new Map();
     layers.set(startNode, 0);
-    // Use BFS but take the maximum layer for each node
-    // (longest path ensures proper branching layout)
+    // Longest-path BFS: re-queue neighbors whenever their layer increases.
+    // This ensures convergence nodes (reached via multiple branches) are
+    // placed at the depth of the longest path, not the shortest.
     const queue = [startNode];
-    const visited = new Set();
     let iterations = 0;
     const maxIterations = nodeCount * nodeCount + 100; // Safety limit for cycles
     while (queue.length > 0 && iterations < maxIterations) {
         iterations++;
         const current = queue.shift();
-        if (visited.has(current))
-            continue;
-        visited.add(current);
         const currentLayer = layers.get(current) || 0;
         const neighbors = adjacency.get(current) || [];
         for (const neighbor of neighbors) {
             const existingLayer = layers.get(neighbor);
             const newLayer = currentLayer + 1;
-            // Take the max layer (longest path)
+            // Only update and re-queue when we find a longer path
             if (existingLayer === undefined || newLayer > existingLayer) {
                 layers.set(neighbor, newLayer);
-            }
-            if (!visited.has(neighbor)) {
                 queue.push(neighbor);
             }
         }

package/dist/adapters/agentspec/componentTypeDefaults.d.ts

@@ -8,7 +8,7 @@
  * Full node type definitions are user-provided via getDefaultAgentSpecNodeTypes()
  * or custom node arrays passed to mountFlowDropApp().
  */
-import type { NodePort } from "../../types/index.js";
+import type { NodePort } from '../../types/index.js';
 /** Namespace prefix for Agent Spec node type IDs */
 export declare const AGENTSPEC_NAMESPACE = "agentspec";
 /** Standard trigger input port — control flow into a node */

package/dist/adapters/agentspec/componentTypeDefaults.js

@@ -12,187 +12,187 @@
 // Constants
 // ============================================================================
 /** Namespace prefix for Agent Spec node type IDs */
-export const AGENTSPEC_NAMESPACE = "agentspec";
+export const AGENTSPEC_NAMESPACE = 'agentspec';
 // ============================================================================
 // Standard ports (adapter infrastructure)
 // ============================================================================
 /** Standard trigger input port — control flow into a node */
 export const TRIGGER_INPUT = {
-    id: "trigger",
-    name: "Trigger",
-    type: "input",
-    dataType: "trigger",
+    id: 'trigger',
+    name: 'Trigger',
+    type: 'input',
+    dataType: 'trigger',
     required: false,
-    description: "Control flow input",
+    description: 'Control flow input'
 };
 /** Standard trigger output port — control flow out of a node */
 export const TRIGGER_OUTPUT = {
-    id: "trigger",
-    name: "Trigger",
-    type: "output",
-    dataType: "trigger",
+    id: 'trigger',
+    name: 'Trigger',
+    type: 'output',
+    dataType: 'trigger',
     required: false,
-    description: "Control flow output",
+    description: 'Control flow output'
 };
 /** Tool input port for tool_node */
 const TOOL_INPUT = {
-    id: "tool",
-    name: "Tool",
-    type: "input",
-    dataType: "tool",
+    id: 'tool',
+    name: 'Tool',
+    type: 'input',
+    dataType: 'tool',
     required: false,
-    description: "Tool connection",
+    description: 'Tool connection'
 };
 /** Tool output port for tool_node */
 const TOOL_OUTPUT = {
-    id: "tool",
-    name: "Tool",
-    type: "output",
-    dataType: "tool",
-    description: "Tool passthrough",
+    id: 'tool',
+    name: 'Tool',
+    type: 'output',
+    dataType: 'tool',
+    description: 'Tool passthrough'
 };
 // ============================================================================
 // Defaults mapping
 // ============================================================================
 const COMPONENT_TYPE_DEFAULTS = new Map([
     [
-        "start_node",
+        'start_node',
         {
-            visualType: "terminal",
-            category: "triggers",
-            color: "#22c55e",
-            icon: "mdi:play-circle",
-            badge: "START",
-            defaultName: "Start",
-            defaultDescription: "Flow entry point. Defines the initial inputs for the flow.",
+            visualType: 'terminal',
+            category: 'triggers',
+            color: '#22c55e',
+            icon: 'mdi:play-circle',
+            badge: 'START',
+            defaultName: 'Start',
+            defaultDescription: 'Flow entry point. Defines the initial inputs for the flow.',
             triggerInputs: [],
-            triggerOutputs: [TRIGGER_OUTPUT],
-        },
+            triggerOutputs: [TRIGGER_OUTPUT]
+        }
     ],
     [
-        "end_node",
+        'end_node',
         {
-            visualType: "terminal",
-            category: "outputs",
-            color: "#ef4444",
-            icon: "mdi:stop-circle",
-            badge: "END",
-            defaultName: "End",
-            defaultDescription: "Flow exit point. Defines the final outputs of the flow.",
+            visualType: 'terminal',
+            category: 'outputs',
+            color: '#ef4444',
+            icon: 'mdi:stop-circle',
+            badge: 'END',
+            defaultName: 'End',
+            defaultDescription: 'Flow exit point. Defines the final outputs of the flow.',
             triggerInputs: [TRIGGER_INPUT],
-            triggerOutputs: [],
-        },
+            triggerOutputs: []
+        }
     ],
     [
-        "llm_node",
+        'llm_node',
         {
-            visualType: "default",
-            category: "ai",
-            color: "#8b5cf6",
-            icon: "mdi:brain",
-            badge: "LLM",
-            defaultName: "LLM",
-            defaultDescription: "Generate text using a large language model with configurable prompts.",
+            visualType: 'default',
+            category: 'ai',
+            color: '#8b5cf6',
+            icon: 'mdi:brain',
+            badge: 'LLM',
+            defaultName: 'LLM',
+            defaultDescription: 'Generate text using a large language model with configurable prompts.',
             triggerInputs: [TRIGGER_INPUT],
-            triggerOutputs: [TRIGGER_OUTPUT],
-        },
+            triggerOutputs: [TRIGGER_OUTPUT]
+        }
     ],
     [
-        "branching_node",
+        'branching_node',
         {
-            visualType: "gateway",
-            category: "logic",
-            color: "#f59e0b",
-            icon: "mdi:source-branch",
-            badge: "BRANCH",
-            defaultName: "Branch",
-            defaultDescription: "Route execution to different paths based on conditions.",
+            visualType: 'gateway',
+            category: 'logic',
+            color: '#f59e0b',
+            icon: 'mdi:source-branch',
+            badge: 'BRANCH',
+            defaultName: 'Branch',
+            defaultDescription: 'Route execution to different paths based on conditions.',
             triggerInputs: [TRIGGER_INPUT],
-            triggerOutputs: [],
-        },
+            triggerOutputs: []
+        }
     ],
     [
-        "tool_node",
+        'tool_node',
         {
-            visualType: "tool",
-            category: "tools",
-            color: "#06b6d4",
-            icon: "mdi:wrench",
-            badge: "TOOL",
-            defaultName: "Tool",
-            defaultDescription: "Execute a tool function with inputs and receive outputs.",
+            visualType: 'tool',
+            category: 'tools',
+            color: '#06b6d4',
+            icon: 'mdi:wrench',
+            badge: 'TOOL',
+            defaultName: 'Tool',
+            defaultDescription: 'Execute a tool function with inputs and receive outputs.',
             triggerInputs: [TRIGGER_INPUT, TOOL_INPUT],
-            triggerOutputs: [TRIGGER_OUTPUT, TOOL_OUTPUT],
-        },
+            triggerOutputs: [TRIGGER_OUTPUT, TOOL_OUTPUT]
+        }
     ],
     [
-        "api_node",
+        'api_node',
         {
-            visualType: "default",
-            category: "data",
-            color: "#3b82f6",
-            icon: "mdi:api",
-            badge: "API",
-            defaultName: "API Call",
-            defaultDescription: "Make an HTTP API call with configurable endpoint, method, and headers.",
+            visualType: 'default',
+            category: 'data',
+            color: '#3b82f6',
+            icon: 'mdi:api',
+            badge: 'API',
+            defaultName: 'API Call',
+            defaultDescription: 'Make an HTTP API call with configurable endpoint, method, and headers.',
             triggerInputs: [TRIGGER_INPUT],
-            triggerOutputs: [TRIGGER_OUTPUT],
-        },
+            triggerOutputs: [TRIGGER_OUTPUT]
+        }
     ],
     [
-        "agent_node",
+        'agent_node',
         {
-            visualType: "default",
-            category: "agents",
-            color: "#ec4899",
-            icon: "mdi:robot",
-            badge: "AGENT",
-            defaultName: "Agent",
-            defaultDescription: "Run a multi-round agent conversation within the flow.",
+            visualType: 'default',
+            category: 'agents',
+            color: '#ec4899',
+            icon: 'mdi:robot',
+            badge: 'AGENT',
+            defaultName: 'Agent',
+            defaultDescription: 'Run a multi-round agent conversation within the flow.',
             triggerInputs: [TRIGGER_INPUT],
-            triggerOutputs: [TRIGGER_OUTPUT],
-        },
+            triggerOutputs: [TRIGGER_OUTPUT]
+        }
     ],
     [
-        "flow_node",
+        'flow_node',
         {
-            visualType: "simple",
-            category: "processing",
-            color: "#14b8a6",
-            icon: "mdi:sitemap",
-            badge: "FLOW",
-            defaultName: "Sub-Flow",
-            defaultDescription: "Execute another flow as a sub-routine within this flow.",
+            visualType: 'simple',
+            category: 'processing',
+            color: '#14b8a6',
+            icon: 'mdi:sitemap',
+            badge: 'FLOW',
+            defaultName: 'Sub-Flow',
+            defaultDescription: 'Execute another flow as a sub-routine within this flow.',
             triggerInputs: [TRIGGER_INPUT],
-            triggerOutputs: [TRIGGER_OUTPUT],
-        },
+            triggerOutputs: [TRIGGER_OUTPUT]
+        }
     ],
     [
-        "map_node",
+        'map_node',
         {
-            visualType: "default",
-            category: "processing",
-            color: "#f97316",
-            icon: "mdi:map-marker-path",
-            badge: "MAP",
-            defaultName: "Map",
-            defaultDescription: "Apply a flow or operation to each item in a collection (map-reduce).",
+            visualType: 'default',
+            category: 'processing',
+            color: '#f97316',
+            icon: 'mdi:map-marker-path',
+            badge: 'MAP',
+            defaultName: 'Map',
+            defaultDescription: 'Apply a flow or operation to each item in a collection (map-reduce).',
             triggerInputs: [TRIGGER_INPUT],
-            triggerOutputs: [TRIGGER_OUTPUT],
-        },
-    ],
+            triggerOutputs: [TRIGGER_OUTPUT]
+        }
+    ]
 ]);
 /** Fallback defaults for unrecognized component types */
 const UNKNOWN_DEFAULTS = {
-    visualType: "default",
-    category: "processing",
-    color: "#6b7280",
-    icon: "mdi:puzzle",
-    badge: "",
-    defaultName: "Unknown",
-    defaultDescription: "Agent Spec node",
+    visualType: 'default',
+    category: 'processing',
+    color: '#6b7280',
+    icon: 'mdi:puzzle',
+    badge: '',
+    defaultName: 'Unknown',
+    defaultDescription: 'Agent Spec node',
     triggerInputs: [TRIGGER_INPUT],
-    triggerOutputs: [TRIGGER_OUTPUT],
+    triggerOutputs: [TRIGGER_OUTPUT]
 };
 // ============================================================================
 // Public API

package/dist/adapters/agentspec/defaultNodeTypes.d.ts

@@ -18,8 +18,8 @@
  * });
  * ```
  */
-import type { NodeMetadata, NodePort } from "../../types/index.js";
-import type { AgentSpecNodeComponentType } from "../../types/agentspec.js";
+import type { NodeMetadata, NodePort } from '../../types/index.js';
+import type { AgentSpecNodeComponentType } from '../../types/agentspec.js';
 /**
  * Get FlowDrop NodeMetadata for an Agent Spec component type.
  *