@runtypelabs/react-flow 0.1.5 → 0.1.7

package/src/utils/adapter.ts

@@ -6,9 +6,9 @@ import type { FlowStepType } from '../flow-step-types'
 // ============================================================================
 
 const NODE_WIDTH = 280
-const NODE_HEIGHT = 200  // Increased for better card visibility
-const NODE_SPACING_X = 350  // Horizontal space between main steps
-const NODE_SPACING_Y = 80   // Vertical space between branch steps
+const NODE_HEIGHT = 200 // Increased for better card visibility
+const NODE_SPACING_X = 350 // Horizontal space between main steps
+const NODE_SPACING_Y = 80 // Vertical space between branch steps
 const BRANCH_OFFSET_X = 350 // Horizontal offset for branches to the right of conditional
 const BRANCH_OFFSET_Y = -80 // Vertical offset for true branch (above center)
 const FALSE_BRANCH_GAP = 100 // Gap between true and false branches
@@ -35,9 +35,9 @@ export function flowStepsToNodes(
   steps: FlowStep[],
   options?: FlowStepsToNodesOptions
 ): RuntypeNode[] {
-  const { 
-    onChange, 
-    onDelete, 
+  const {
+    onChange,
+    onDelete,
     startPosition = { x: 50, y: 200 },
     idPrefix = '',
     parentId,
@@ -68,77 +68,80 @@ export function flowStepsToNodes(
       draggable: true,
       selectable: true,
     }
-    
+
     if (parentId) {
       node.parentId = parentId
     }
 
     nodes.push(node)
-    
+
     // DEBUG: Log node positions
     console.log(`[flowStepsToNodes] Placed "${step.name}" (${step.type}) at x=${currentX}`)
-    
+
     // Handle conditional branches - position to the right with true above, false below
     if (step.type === 'conditional' && step.config) {
       const config = step.config as { trueSteps?: FlowStep[]; falseSteps?: FlowStep[] }
       const branchX = currentX + BRANCH_OFFSET_X
-      
+
       // Calculate branch lengths (horizontal extent)
       const trueBranchLength = config.trueSteps?.length || 0
       const falseBranchLength = config.falseSteps?.length || 0
       const maxBranchLength = Math.max(trueBranchLength, falseBranchLength)
-      
+
       // Calculate true branch height (vertical extent for stacking)
       const trueBranchHeight = trueBranchLength * (NODE_HEIGHT + NODE_SPACING_Y)
-      
+
       // True branch nodes (positioned to the right, above center)
       if (config.trueSteps && config.trueSteps.length > 0) {
         const trueBranchY = startPosition.y + BRANCH_OFFSET_Y
         const trueBranchNodes = flowStepsToNodes(config.trueSteps, {
           onChange,
           onDelete,
-          startPosition: { 
-            x: branchX, 
-            y: trueBranchY 
+          startPosition: {
+            x: branchX,
+            y: trueBranchY,
           },
           idPrefix: `${nodeId}-true-`,
           parentId: nodeId,
         })
-        
+
         nodes.push(...trueBranchNodes)
         maxBranchY = Math.max(maxBranchY, trueBranchY + trueBranchHeight)
       }
-      
+
       // False branch nodes (positioned to the right, below center)
       if (config.falseSteps && config.falseSteps.length > 0) {
         // Position false branch below true branch (or at center + gap if no true branch)
-        const falseBranchY = trueBranchLength > 0
-          ? startPosition.y + BRANCH_OFFSET_Y + trueBranchHeight + FALSE_BRANCH_GAP
-          : startPosition.y + NODE_HEIGHT + NODE_SPACING_Y
-        
+        const falseBranchY =
+          trueBranchLength > 0
+            ? startPosition.y + BRANCH_OFFSET_Y + trueBranchHeight + FALSE_BRANCH_GAP
+            : startPosition.y + NODE_HEIGHT + NODE_SPACING_Y
+
         const falseBranchNodes = flowStepsToNodes(config.falseSteps, {
           onChange,
           onDelete,
-          startPosition: { 
-            x: branchX, 
-            y: falseBranchY 
+          startPosition: {
+            x: branchX,
+            y: falseBranchY,
           },
           idPrefix: `${nodeId}-false-`,
           parentId: nodeId,
         })
-        
+
         nodes.push(...falseBranchNodes)
         const falseBranchHeight = config.falseSteps.length * (NODE_HEIGHT + NODE_SPACING_Y)
         maxBranchY = Math.max(maxBranchY, falseBranchY + falseBranchHeight)
       }
-      
+
       // Skip past the conditional AND all its branch steps
       // Branches start at branchX, so we need to account for:
       // - The offset from conditional to first branch step (BRANCH_OFFSET_X)
       // - All the branch steps (maxBranchLength * (NODE_WIDTH + NODE_SPACING_X))
       if (maxBranchLength > 0) {
-        const advance = BRANCH_OFFSET_X + (maxBranchLength * (NODE_WIDTH + NODE_SPACING_X))
-        console.log(`[flowStepsToNodes] Conditional "${step.name}" has ${maxBranchLength} branch steps, advancing currentX by ${advance}`)
+        const advance = BRANCH_OFFSET_X + maxBranchLength * (NODE_WIDTH + NODE_SPACING_X)
+        console.log(
+          `[flowStepsToNodes] Conditional "${step.name}" has ${maxBranchLength} branch steps, advancing currentX by ${advance}`
+        )
         currentX += advance
         console.log(`[flowStepsToNodes] After conditional, currentX = ${currentX}`)
       } else {
@@ -162,19 +165,21 @@ export function flowStepsToNodes(
  */
 export function nodesToFlowSteps(nodes: RuntypeNode[]): FlowStep[] {
   // Filter out branch nodes (handled within conditional steps)
-  const topLevelNodes = nodes.filter(n => !n.parentId && !n.id.includes('-true-') && !n.id.includes('-false-'))
-  
+  const topLevelNodes = nodes.filter(
+    (n) => !n.parentId && !n.id.includes('-true-') && !n.id.includes('-false-')
+  )
+
   // Sort by X position to determine order (horizontal layout)
   const sortedNodes = [...topLevelNodes].sort((a, b) => a.position.x - b.position.x)
-  
+
   return sortedNodes.map((node, index) => {
     const step = node.data.step
-    
+
     // Handle conditional steps - extract nested steps
     if (step.type === 'conditional') {
       const trueSteps = extractBranchSteps(nodes, node.id, 'true')
       const falseSteps = extractBranchSteps(nodes, node.id, 'false')
-      
+
       return {
         ...step,
         order: index,
@@ -185,7 +190,7 @@ export function nodesToFlowSteps(nodes: RuntypeNode[]): FlowStep[] {
         },
       }
     }
-    
+
     return {
       ...step,
       order: index,
@@ -196,14 +201,18 @@ export function nodesToFlowSteps(nodes: RuntypeNode[]): FlowStep[] {
 /**
  * Extract branch steps from conditional node
  */
-function extractBranchSteps(nodes: RuntypeNode[], parentId: string, branch: 'true' | 'false'): FlowStep[] {
+function extractBranchSteps(
+  nodes: RuntypeNode[],
+  parentId: string,
+  branch: 'true' | 'false'
+): FlowStep[] {
   // Match nodes with the branch prefix pattern
   const branchPrefix = `${parentId}-${branch}-`
-  const branchNodes = nodes.filter(n => n.id.startsWith(branchPrefix))
-  
+  const branchNodes = nodes.filter((n) => n.id.startsWith(branchPrefix))
+
   // Sort by X position (horizontal layout within branches)
   const sortedBranchNodes = [...branchNodes].sort((a, b) => a.position.x - b.position.x)
-  
+
   return sortedBranchNodes.map((node, index) => ({
     ...node.data.step,
     order: index,
@@ -221,24 +230,25 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
   const edges: RuntypeEdge[] = []
 
   // Helper to check if a node is a branch node
-  const isBranchNode = (n: RuntypeNode) => n.parentId || n.id.includes('-true-') || n.id.includes('-false-')
-  
+  const isBranchNode = (n: RuntypeNode) =>
+    n.parentId || n.id.includes('-true-') || n.id.includes('-false-')
+
   // Get top-level nodes sorted by X position (horizontal layout)
   const topLevelNodes = nodes
-    .filter(n => !isBranchNode(n))
+    .filter((n) => !isBranchNode(n))
     .sort((a, b) => a.position.x - b.position.x)
-  
+
   // Create sequential edges for top-level nodes
   // Skip conditionals - their branches connect to the next step instead
   for (let i = 0; i < topLevelNodes.length - 1; i++) {
     const sourceNode = topLevelNodes[i]
     const targetNode = topLevelNodes[i + 1]
-    
+
     // Skip edge from conditional - branches will connect to next step
     if (sourceNode.data.step.type === 'conditional') {
       continue
     }
-    
+
     edges.push({
       id: `edge-${sourceNode.id}-${targetNode.id}`,
       source: sourceNode.id,
@@ -249,29 +259,30 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
       data: { stepOrder: i },
     })
   }
-  
+
   // Create edges for conditional branches
-  const conditionalNodes = nodes.filter(n => n.data.step.type === 'conditional' && !isBranchNode(n))
-  
+  const conditionalNodes = nodes.filter(
+    (n) => n.data.step.type === 'conditional' && !isBranchNode(n)
+  )
+
   for (const conditionalNode of conditionalNodes) {
     const conditionalId = conditionalNode.id
-    const conditionalIndex = topLevelNodes.findIndex(n => n.id === conditionalId)
-    const nextMainStep = conditionalIndex < topLevelNodes.length - 1 
-      ? topLevelNodes[conditionalIndex + 1] 
-      : null
-    
+    const conditionalIndex = topLevelNodes.findIndex((n) => n.id === conditionalId)
+    const nextMainStep =
+      conditionalIndex < topLevelNodes.length - 1 ? topLevelNodes[conditionalIndex + 1] : null
+
     // Find true branch nodes (contain -true- after the conditional ID)
     // Sort by X position since branches flow horizontally
     const trueBranchNodes = nodes
-      .filter(n => n.id.startsWith(`${conditionalId}-true-`))
+      .filter((n) => n.id.startsWith(`${conditionalId}-true-`))
       .sort((a, b) => a.position.x - b.position.x)
-    
+
     // Find false branch nodes (contain -false- after the conditional ID)
     // Sort by X position since branches flow horizontally
     const falseBranchNodes = nodes
-      .filter(n => n.id.startsWith(`${conditionalId}-false-`))
+      .filter((n) => n.id.startsWith(`${conditionalId}-false-`))
       .sort((a, b) => a.position.x - b.position.x)
-    
+
     // Connect conditional to first true branch node (branch goes right)
     if (trueBranchNodes.length > 0) {
       edges.push({
@@ -288,7 +299,7 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
         labelBgBorderRadius: 4,
         style: { stroke: '#22c55e', strokeWidth: 2 },
       })
-      
+
       // Connect true branch nodes sequentially (horizontal connections)
       for (let i = 0; i < trueBranchNodes.length - 1; i++) {
         edges.push({
@@ -301,7 +312,7 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
           style: { stroke: '#22c55e', strokeWidth: 1.5 },
         })
       }
-      
+
       // Connect last true branch node to next main step (convergence)
       if (nextMainStep) {
         const lastTrueNode = trueBranchNodes[trueBranchNodes.length - 1]
@@ -332,7 +343,7 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
         style: { stroke: '#22c55e', strokeWidth: 2 },
       })
     }
-    
+
     // Connect conditional to first false branch node (branch goes right, below true)
     if (falseBranchNodes.length > 0) {
       edges.push({
@@ -349,7 +360,7 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
         labelBgBorderRadius: 4,
         style: { stroke: '#ef4444', strokeWidth: 2 },
       })
-      
+
       // Connect false branch nodes sequentially (horizontal connections)
       for (let i = 0; i < falseBranchNodes.length - 1; i++) {
         edges.push({
@@ -362,7 +373,7 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
           style: { stroke: '#ef4444', strokeWidth: 1.5 },
         })
       }
-      
+
       // Connect last false branch node to next main step (convergence)
       if (nextMainStep) {
         const lastFalseNode = falseBranchNodes[falseBranchNodes.length - 1]
@@ -393,7 +404,7 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
         style: { stroke: '#ef4444', strokeWidth: 2 },
       })
     }
-    
+
     // Handle case where conditional has no branches - connect directly to next step
     if (trueBranchNodes.length === 0 && falseBranchNodes.length === 0 && nextMainStep) {
       edges.push({
@@ -406,7 +417,7 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
       })
     }
   }
-  
+
   return edges
 }
 
@@ -419,13 +430,13 @@ export function createEdgesFromNodes(nodes: RuntypeNode[]): RuntypeEdge[] {
  */
 export function getDefaultStepName(type: FlowStepType): string {
   const names: Record<FlowStepType, string> = {
-    'prompt': 'AI Prompt',
+    prompt: 'AI Prompt',
     'fetch-url': 'Fetch URL',
     'retrieve-record': 'Retrieve Record',
     'fetch-github': 'Fetch GitHub',
     'api-call': 'API Call',
     'transform-data': 'Transform Data',
-    'conditional': 'Conditional',
+    conditional: 'Conditional',
     'set-variable': 'Set Variable',
     'upsert-record': 'Upsert Record',
     'send-email': 'Send Email',
@@ -433,13 +444,13 @@ export function getDefaultStepName(type: FlowStepType): string {
     'send-event': 'Send Event',
     'send-stream': 'Send Stream',
     'update-record': 'Update Record',
-    'search': 'Search',
+    search: 'Search',
     'generate-embedding': 'Generate Embedding',
     'vector-search': 'Vector Search',
     'tool-call': 'Tool Call',
     'wait-until': 'Wait Until',
   }
-  
+
   return names[type] || type
 }
 
@@ -448,7 +459,7 @@ export function getDefaultStepName(type: FlowStepType): string {
  */
 export function createDefaultStep(type: FlowStepType, order: number = 0): FlowStep {
   const id = `step-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
-  
+
   const baseStep = {
     id,
     type,
@@ -456,7 +467,7 @@ export function createDefaultStep(type: FlowStepType, order: number = 0): FlowSt
     order,
     enabled: true,
   }
-  
+
   switch (type) {
     case 'prompt':
       return {
@@ -469,7 +480,7 @@ export function createDefaultStep(type: FlowStepType, order: number = 0): FlowSt
           outputVariable: `${type}_result`,
         },
       }
-    
+
     case 'fetch-url':
       return {
         ...baseStep,
@@ -482,7 +493,7 @@ export function createDefaultStep(type: FlowStepType, order: number = 0): FlowSt
           outputVariable: 'fetch_result',
         },
       }
-    
+
     case 'transform-data':
       return {
         ...baseStep,
@@ -491,7 +502,7 @@ export function createDefaultStep(type: FlowStepType, order: number = 0): FlowSt
           outputVariable: 'transform_result',
         },
       }
-    
+
     case 'conditional':
       return {
         ...baseStep,
@@ -501,7 +512,7 @@ export function createDefaultStep(type: FlowStepType, order: number = 0): FlowSt
           falseSteps: [],
         },
       }
-    
+
     case 'send-email':
       return {
         ...baseStep,
@@ -513,7 +524,7 @@ export function createDefaultStep(type: FlowStepType, order: number = 0): FlowSt
           outputVariable: 'email_result',
         },
       }
-    
+
     default:
       return {
         ...baseStep,
@@ -541,4 +552,3 @@ export function cloneStep(step: FlowStep): FlowStep {
     config: JSON.parse(JSON.stringify(step.config)),
   }
 }
-

package/src/utils/layout.ts

@@ -50,17 +50,17 @@ export function autoLayout(
   // Build adjacency map from edges
   const adjacencyMap = new Map<string, string[]>()
   const incomingMap = new Map<string, string[]>()
-  
+
   for (const edge of edges) {
     const existing = adjacencyMap.get(edge.source) || []
     adjacencyMap.set(edge.source, [...existing, edge.target])
-    
+
     const incoming = incomingMap.get(edge.target) || []
     incomingMap.set(edge.target, [...incoming, edge.source])
   }
 
   // Find root nodes (nodes with no incoming edges)
-  const rootNodes = nodes.filter(node => {
+  const rootNodes = nodes.filter((node) => {
     const incoming = incomingMap.get(node.id)
     return !incoming || incoming.length === 0
   })
@@ -76,7 +76,7 @@ export function autoLayout(
 
   // Position nodes using BFS
   const queue: Array<{ nodeId: string; x: number; y: number; depth: number }> = []
-  
+
   // Start with root nodes
   let startX = startPosition.x
   for (const rootNode of rootNodes) {
@@ -86,25 +86,25 @@ export function autoLayout(
 
   while (queue.length > 0) {
     const { nodeId, x, y, depth } = queue.shift()!
-    
+
     if (visited.has(nodeId)) continue
     visited.add(nodeId)
-    
+
     positionedNodes.set(nodeId, { x, y })
-    
+
     // Get children
     const children = adjacencyMap.get(nodeId) || []
-    const node = nodes.find(n => n.id === nodeId)
-    
+    const node = nodes.find((n) => n.id === nodeId)
+
     // Check if this is a conditional node
     const isConditional = node?.data.step.type === 'conditional'
-    
+
     if (isConditional && children.length > 0) {
       // Position conditional branches side by side
-      const trueBranch = children.filter(c => c.includes('-true-'))
-      const falseBranch = children.filter(c => c.includes('-false-'))
-      const normalChildren = children.filter(c => !c.includes('-true-') && !c.includes('-false-'))
-      
+      const trueBranch = children.filter((c) => c.includes('-true-'))
+      const falseBranch = children.filter((c) => c.includes('-false-'))
+      const normalChildren = children.filter((c) => !c.includes('-true-') && !c.includes('-false-'))
+
       // Position true branch to the right
       let trueY = y + nodeHeight + verticalSpacing
       for (const childId of trueBranch) {
@@ -118,7 +118,7 @@ export function autoLayout(
           trueY += nodeHeight + verticalSpacing
         }
       }
-      
+
       // Position false branch to the left
       let falseY = y + nodeHeight + verticalSpacing
       for (const childId of falseBranch) {
@@ -132,7 +132,7 @@ export function autoLayout(
           falseY += nodeHeight + verticalSpacing
         }
       }
-      
+
       // Position normal children below
       const maxBranchY = Math.max(trueY, falseY)
       let childY = maxBranchY
@@ -151,7 +151,7 @@ export function autoLayout(
       // Position children in sequence
       let childY = y + nodeHeight + verticalSpacing
       let childX = x
-      
+
       for (let i = 0; i < children.length; i++) {
         const childId = children[i]
         if (!visited.has(childId)) {
@@ -178,7 +178,7 @@ export function autoLayout(
   }
 
   // Apply positions to nodes
-  return nodes.map(node => {
+  return nodes.map((node) => {
     const position = positionedNodes.get(node.id)
     if (position) {
       return {
@@ -220,7 +220,7 @@ export function centerNodes(
   const offsetY = (viewportHeight - contentHeight) / 2 - minY
 
   // Apply offset
-  return nodes.map(node => ({
+  return nodes.map((node) => ({
     ...node,
     position: {
       x: node.position.x + offsetX,
@@ -232,11 +232,8 @@ export function centerNodes(
 /**
  * Align nodes to a grid
  */
-export function snapToGrid(
-  nodes: RuntypeNode[],
-  gridSize: number = 20
-): RuntypeNode[] {
-  return nodes.map(node => ({
+export function snapToGrid(nodes: RuntypeNode[], gridSize: number = 20): RuntypeNode[] {
+  return nodes.map((node) => ({
     ...node,
     position: {
       x: Math.round(node.position.x / gridSize) * gridSize,
@@ -281,4 +278,3 @@ export function getNodesBoundingBox(nodes: RuntypeNode[]): {
     height: maxY - minY,
   }
 }
-

package/tsconfig.json

@@ -26,4 +26,3 @@
   "include": ["src/**/*"],
   "exclude": ["dist", "node_modules", "**/*.test.ts", "**/*.test.tsx"]
 }
-

package/tsup.config.ts

@@ -12,4 +12,3 @@ export default defineConfig({
   external: ['react', 'react-dom', '@xyflow/react'],
   treeshake: true,
 })
-