@runtypelabs/react-flow 1.0.39 → 1.0.41

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @runtypelabs/react-flow
 
+## 1.0.41
+
+### Patch Changes
+
+- Updated dependencies [ccd07e2]
+- Updated dependencies [8ab7d4a]
+  - @runtypelabs/sdk@9.3.2
+
+## 1.0.40
+
+### Patch Changes
+
+- Updated dependencies [95e48e6]
+  - @runtypelabs/sdk@9.3.1
+
 ## 1.0.39
 
 ### Patch Changes

package/dist/index.js

@@ -830,26 +830,22 @@ function useRuntypeFlow(options) {
     }
   }, [nodes]);
   return {
-    // React Flow state
     nodes,
     edges,
     onNodesChange,
     onEdgesChange,
     onConnect: handleConnect,
-    // Flow metadata
     flowName,
     flowDescription,
     flowId,
     setFlowName,
     setFlowDescription,
-    // API operations
     loadFlow,
     saveFlow,
     createFlow,
     deleteStep,
     updateStep,
     addStep,
-    // Status
     isLoading,
     isSaving,
     error,
@@ -2961,7 +2957,6 @@ var nodeTypes = {
   "transform-data": CodeNode,
   conditional: ConditionalNode,
   "send-email": SendEmailNode,
-  // Default node for unsupported types
   default: DefaultNode
 };
 function DefaultNode(props) {

package/example/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @runtypelabs/react-flow-example
 
+## 0.0.167
+
+### Patch Changes
+
+- Updated dependencies [ccd07e2]
+- Updated dependencies [8ab7d4a]
+  - @runtypelabs/sdk@9.3.2
+  - @runtypelabs/react-flow@1.0.41
+
+## 0.0.166
+
+### Patch Changes
+
+- Updated dependencies [95e48e6]
+  - @runtypelabs/sdk@9.3.1
+  - @runtypelabs/react-flow@1.0.40
+
 ## 0.0.165
 
 ### Patch Changes

package/example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/react-flow-example",
-  "version": "0.0.165",
+  "version": "0.0.167",
   "private": true,
   "type": "module",
   "scripts": {

package/example/src/App.tsx

@@ -13,7 +13,6 @@ import {
   type OnConnect,
 } from '@xyflow/react'
 
-// Import node components from the package
 import {
   PromptNode,
   FetchUrlNode,
@@ -28,16 +27,10 @@ import {
   type RuntypeNode,
 } from '@runtypelabs/react-flow'
 
-// ============================================================================
-// API Configuration
-// ============================================================================
 
 const API_BASE_URL = import.meta.env.VITE_RUNTYPE_API_URL || 'http://localhost:8787/v1'
 const API_KEY = import.meta.env.VITE_RUNTYPE_API_KEY || ''
 
-// ============================================================================
-// Flow Browser Types
-// ============================================================================
 
 interface Flow {
   id: string
@@ -58,9 +51,6 @@ interface FlowApiData extends Partial<Flow> {
   [key: string]: unknown
 }
 
-// ============================================================================
-// Flow Execution Types
-// ============================================================================
 
 interface StepProgress {
   id: string
@@ -103,9 +93,6 @@ interface FlowProgress {
   executionTime?: number
 }
 
-// ============================================================================
-// Sample Flow Steps
-// ============================================================================
 
 const sampleSteps: FlowStep[] = [
   {
@@ -245,9 +232,6 @@ const sampleSteps: FlowStep[] = [
   },
 ]
 
-// ============================================================================
-// Node Types
-// ============================================================================
 
 const nodeTypes = {
   prompt: PromptNode,
@@ -257,9 +241,6 @@ const nodeTypes = {
   'send-email': SendEmailNode,
 }
 
-// ============================================================================
-// Dispatch Config Panel Component
-// ============================================================================
 
 interface DispatchPanelProps {
   isOpen: boolean
@@ -271,7 +252,6 @@ interface DispatchPanelProps {
 function DispatchPanel({ isOpen, onClose, steps, flowName }: DispatchPanelProps) {
   const [activeTab, setActiveTab] = useState<'dispatch' | 'steps'>('dispatch')
 
-  // Generate the dispatch config
   const dispatchConfig = useMemo(() => {
     return {
       record: {
@@ -395,9 +375,6 @@ console.log(response)`}</pre>
   )
 }
 
-// ============================================================================
-// Execution Panel Component
-// ============================================================================
 
 interface ExecutionPanelProps {
   isOpen: boolean
@@ -565,9 +542,6 @@ function ExecutionPanel({
   )
 }
 
-// ============================================================================
-// Flow Browser Panel Component
-// ============================================================================
 
 interface FlowBrowserPanelProps {
   isOpen: boolean
@@ -581,7 +555,6 @@ function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps
   const [error, setError] = useState<string | null>(null)
   const [loadingFlowId, setLoadingFlowId] = useState<string | null>(null)
 
-  // Fetch flows when panel opens
   React.useEffect(() => {
     if (isOpen) {
       fetchFlows()
@@ -601,7 +574,6 @@ function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps
         throw new Error(`Failed to fetch flows: ${response.status}`)
       }
       const data = await response.json()
-      // API returns { data: [...flows], pagination: {...} } format
       setFlows(data.data || data.flows || data || [])
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to fetch flows')
@@ -614,7 +586,6 @@ function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps
     setLoadingFlowId(flowId)
     setError(null)
     try {
-      // Fetch flow details with embedded steps
       const flowResponse = await fetch(`${API_BASE_URL}/flows/${flowId}`, {
         headers: {
           Authorization: `Bearer ${API_KEY}`,
@@ -625,7 +596,6 @@ function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps
       }
       const flowData = (await flowResponse.json()) as FlowApiData
 
-      // Use flow steps from the flow response (consolidated endpoint)
       const stepsArray = flowData.flow_steps || flowData.flowSteps || []
       const steps: FlowStep[] = stepsArray.map((step) => ({
         id: step.id,
@@ -790,9 +760,6 @@ function FlowBrowserPanel({ isOpen, onClose, onLoadFlow }: FlowBrowserPanelProps
   )
 }
 
-// ============================================================================
-// App Component
-// ============================================================================
 
 export default function App() {
   const [steps, setSteps] = useState<FlowStep[]>(sampleSteps)
@@ -806,16 +773,12 @@ export default function App() {
   const textBlockStepIds = useRef(new Map<string, string>())
   const currentStepId = useRef<string | null>(null)
 
-  // Create stable references for handlers that will update nodes
   const [nodes, setNodes, onNodesChange] = useNodesState<RuntypeNode>([])
   const [edges, setEdges, onEdgesChange] = useEdgesState([])
   const [isInitialized, setIsInitialized] = useState(false)
 
-  // Handler that updates both steps AND nodes
   const handleStepChangeWithNodes = useCallback(
     (stepId: string, updates: Partial<FlowStep>) => {
-      // console.log('[App] handleStepChangeWithNodes:', stepId, updates)
-      // Update steps state
       setSteps((prev) =>
         prev.map((step) => {
           if (step.id === stepId) {
@@ -829,7 +792,6 @@ export default function App() {
         })
       )
 
-      // Update nodes state to reflect the change
       setNodes((nds) =>
         nds.map((node) => {
           if (node.id === stepId) {
@@ -856,7 +818,6 @@ export default function App() {
     [setNodes]
   )
 
-  // Handler that updates both steps AND nodes for deletion
   const handleStepDeleteWithNodes = useCallback(
     (stepId: string) => {
       setSteps((prev) => prev.filter((step) => step.id !== stepId))
@@ -866,7 +827,6 @@ export default function App() {
     [setNodes, setEdges]
   )
 
-  // Initialize nodes on first render
   React.useEffect(() => {
     if (!isInitialized) {
       const initialNodes = flowStepsToNodes(steps, {
@@ -888,19 +848,15 @@ export default function App() {
     setEdges,
   ])
 
-  // Derive current steps from nodes
   const currentSteps = useMemo(() => {
     return nodesToFlowSteps(nodes)
   }, [nodes])
 
-  // Load flow from API
   const handleLoadFlow = useCallback((flow: FlowWithSteps) => {
-    // Update steps state
     setSteps(flow.steps)
     setFlowName(flow.name)
     setLoadedFlowId(flow.id)
 
-    // Reset initialization so nodes get rebuilt
     setIsInitialized(false)
   }, [])
 
@@ -909,7 +865,6 @@ export default function App() {
     [setEdges]
   )
 
-  // Add a new step
   const addStep = useCallback(
     (type: FlowStep['type']) => {
       const newStep = createDefaultStep(type, nodes.length)
@@ -929,7 +884,6 @@ export default function App() {
 
       setNodes((nds) => [...nds, newNode])
 
-      // Add edge from last node
       if (nodes.length > 0) {
         const lastNode = nodes[nodes.length - 1]
         setEdges((eds) => [
@@ -946,7 +900,6 @@ export default function App() {
     [nodes, setNodes, setEdges, handleStepChangeWithNodes, handleStepDeleteWithNodes]
   )
 
-  // Execute flow via Runtype API
   const executeFlow = useCallback(async () => {
     setIsRunning(true)
     textBlockStepIds.current.clear()
@@ -962,7 +915,6 @@ export default function App() {
     })
 
     try {
-      // Build dispatch request
       const dispatchRequest = {
         record: {
           name: 'example-record',
@@ -1020,7 +972,6 @@ export default function App() {
         const chunk = decoder.decode(value, { stream: true })
         buffer += chunk
 
-        // Parse SSE events
         const lines = buffer.split('\n')
         buffer = lines.pop() || '' // Keep incomplete line in buffer
 
@@ -1039,7 +990,6 @@ export default function App() {
         }
       }
 
-      // Process remaining buffer
       if (buffer.startsWith('data: ')) {
         const eventData = buffer.slice(6)
         if (eventData && eventData !== '[DONE]') {
@@ -1066,7 +1016,6 @@ export default function App() {
     }
   }, [currentSteps, flowName])
 
-  // Handle SSE events from the streaming response
   const handleSSEEvent = useCallback((data: ExecutionSSEEvent) => {
     switch (data.type) {
       case 'execution_start':
@@ -1335,9 +1284,6 @@ export default function App() {
   )
 }
 
-// ============================================================================
-// Icons
-// ============================================================================
 
 function CloseIcon() {
   return (
@@ -1498,9 +1444,6 @@ function PendingIcon() {
   )
 }
 
-// ============================================================================
-// Styles
-// ============================================================================
 
 const headerStyle: React.CSSProperties = {
   padding: '16px 24px',
@@ -1667,7 +1610,6 @@ const infoStyle: React.CSSProperties = {
   color: '#6b7280',
 }
 
-// Panel Styles
 const panelOverlayStyle: React.CSSProperties = {
   position: 'fixed',
   top: 0,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/react-flow",
-  "version": "1.0.39",
+  "version": "1.0.41",
   "description": "React Flow adapter for building visual flow editors with Runtype",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -16,7 +16,7 @@
     "*.css"
   ],
   "dependencies": {
-    "@runtypelabs/sdk": "9.3.0"
+    "@runtypelabs/sdk": "9.3.2"
   },
   "peerDependencies": {
     "@xyflow/react": "^12.0.0",

package/src/components/RuntypeFlowEditor.tsx

@@ -26,9 +26,6 @@ import { ConditionalNode } from './nodes/ConditionalNode'
 import { SendEmailNode } from './nodes/SendEmailNode'
 import { BaseNode, BrainIcon, NODE_HEADER_COLORS } from './nodes/BaseNode'
 
-// ============================================================================
-// Styles
-// ============================================================================
 
 const styles = {
   container: {
@@ -145,9 +142,6 @@ const styles = {
   },
 }
 
-// ============================================================================
-// Node Types Configuration
-// ============================================================================
 
 const nodeTypes: NodeTypes = {
   prompt: PromptNode,
@@ -155,11 +149,9 @@ const nodeTypes: NodeTypes = {
   'transform-data': CodeNode,
   conditional: ConditionalNode,
   'send-email': SendEmailNode,
-  // Default node for unsupported types
   default: DefaultNode,
 }
 
-// Default node for unsupported step types
 function DefaultNode(props: {
   data: { step: FlowStep; label: string }
   selected?: boolean
@@ -183,9 +175,6 @@ function DefaultNode(props: {
   )
 }
 
-// ============================================================================
-// Step Type Options
-// ============================================================================
 
 const STEP_TYPE_OPTIONS: Array<{
   type: SupportedNodeType
@@ -225,9 +214,6 @@ const STEP_TYPE_OPTIONS: Array<{
   },
 ]
 
-// ============================================================================
-// Main Editor Component
-// ============================================================================
 
 export function RuntypeFlowEditor({
   client,
@@ -245,7 +231,6 @@ export function RuntypeFlowEditor({
   const [showAddMenu, setShowAddMenu] = useState(false)
   const [, setSelectedNode] = useState<RuntypeNode | null>(null)
 
-  // Initialize flow hook
   const {
     nodes,
     edges,
@@ -270,10 +255,8 @@ export function RuntypeFlowEditor({
     autoLayoutOnLoad: true,
   })
 
-  // Validation
   const { result: validationResult } = useFlowValidation({ nodes })
 
-  // Handlers
   const handleSave = useCallback(async () => {
     try {
       const savedFlow = await saveFlow()
@@ -304,7 +287,6 @@ export function RuntypeFlowEditor({
     onStepSelect?.(null)
   }, [onStepSelect])
 
-  // Minimap node color
   const minimapNodeColor = useCallback((node: RuntypeNode) => {
     return NODE_HEADER_COLORS[node.data.step.type] || NODE_HEADER_COLORS.default
   }, [])
@@ -464,9 +446,6 @@ export function RuntypeFlowEditor({
   )
 }
 
-// ============================================================================
-// Icon Components
-// ============================================================================
 
 function PlusIcon() {
   return (

package/src/components/nodes/BaseNode.tsx

@@ -2,9 +2,6 @@ import React, { memo } from 'react'
 import { Handle, Position } from '@xyflow/react'
 import type { RuntypeNodeData } from '../../types'
 
-// ============================================================================
-// Types
-// ============================================================================
 
 export interface BaseNodeProps {
   /** Node data containing the step */
@@ -35,9 +32,6 @@ export interface BaseNodeProps {
   children: React.ReactNode
 }
 
-// ============================================================================
-// Styles
-// ============================================================================
 
 const styles = {
   container: (selected: boolean) => ({
@@ -129,9 +123,6 @@ const styles = {
   }),
 }
 
-// ============================================================================
-// Header Color Presets
-// ============================================================================
 
 export const NODE_HEADER_COLORS: Record<string, string> = {
   prompt: '#f3e8ff', // Purple tint
@@ -142,9 +133,6 @@ export const NODE_HEADER_COLORS: Record<string, string> = {
   default: '#f3f4f6', // Gray tint
 }
 
-// ============================================================================
-// Base Node Component
-// ============================================================================
 
 export const BaseNode = memo(function BaseNode({
   data,
@@ -168,7 +156,7 @@ export const BaseNode = memo(function BaseNode({
 
   return (
     <div style={styles.container(selected)}>
-      {/* Target Handle (input) - on left for horizontal flow */}
+      {}
       {showTargetHandle && (
         <Handle
           type="target"
@@ -210,12 +198,12 @@ export const BaseNode = memo(function BaseNode({
         </div>
       </div>
 
-      {/* Body - nodrag class prevents React Flow from intercepting events */}
+      {}
       <div style={styles.body} className="nodrag">
         {children}
       </div>
 
-      {/* Source Handle (output) - on right for horizontal flow */}
+      {}
       {showSourceHandle && (
         <Handle
           type="source"
@@ -225,7 +213,7 @@ export const BaseNode = memo(function BaseNode({
         />
       )}
 
-      {/* Additional source handles for conditional branches */}
+      {}
       {additionalSourceHandles?.map((handle) => (
         <Handle
           key={handle.id}
@@ -243,9 +231,6 @@ export const BaseNode = memo(function BaseNode({
   )
 })
 
-// ============================================================================
-// Icon Components
-// ============================================================================
 
 const DeleteIcon = () => (
   <svg
@@ -264,7 +249,6 @@ const DeleteIcon = () => (
   </svg>
 )
 
-// Export common icons for use in step nodes
 export const BrainIcon = () => (
   <svg
     width="16"

package/src/components/nodes/CodeNode.tsx

@@ -3,9 +3,6 @@ import type { NodeProps } from '@xyflow/react'
 import { BaseNode, CodeIcon, NODE_HEADER_COLORS } from './BaseNode'
 import type { RuntypeNodeData, TransformDataStepConfig, FlowStep } from '../../types'
 
-// ============================================================================
-// Styles
-// ============================================================================
 
 const styles = {
   field: {
@@ -100,9 +97,6 @@ const styles = {
   },
 }
 
-// ============================================================================
-// Code Node Component
-// ============================================================================
 
 export const CodeNode = memo(function CodeNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }

package/src/components/nodes/ConditionalNode.tsx

@@ -4,9 +4,6 @@ import { Position } from '@xyflow/react'
 import { BaseNode, GitBranchIcon, NODE_HEADER_COLORS } from './BaseNode'
 import type { RuntypeNodeData, ConditionalStepConfig, FlowStep } from '../../types'
 
-// ============================================================================
-// Styles
-// ============================================================================
 
 const styles = {
   field: {
@@ -83,9 +80,6 @@ const styles = {
   },
 }
 
-// ============================================================================
-// Conditional Node Component
-// ============================================================================
 
 export const ConditionalNode = memo(function ConditionalNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
@@ -227,9 +221,6 @@ export const ConditionalNode = memo(function ConditionalNode(props: NodeProps) {
   )
 })
 
-// ============================================================================
-// Icon Components
-// ============================================================================
 
 const TrueIcon = () => (
   <svg

package/src/components/nodes/FetchUrlNode.tsx

@@ -3,9 +3,6 @@ import type { NodeProps } from '@xyflow/react'
 import { BaseNode, GlobeIcon, NODE_HEADER_COLORS } from './BaseNode'
 import type { RuntypeNodeData, FetchUrlStepConfig, FlowStep } from '../../types'
 
-// ============================================================================
-// Styles
-// ============================================================================
 
 const styles = {
   field: {
@@ -93,9 +90,6 @@ const styles = {
   },
 }
 
-// ============================================================================
-// Fetch URL Node Component
-// ============================================================================
 
 export const FetchUrlNode = memo(function FetchUrlNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
@@ -131,7 +125,6 @@ export const FetchUrlNode = memo(function FetchUrlNode(props: NodeProps) {
 
   const handleNameChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      // console.log('[FetchUrlNode] Name change:', e.target.value)
       onChange?.(id, { name: e.target.value })
     },
     [id, onChange]
@@ -156,10 +149,8 @@ export const FetchUrlNode = memo(function FetchUrlNode(props: NodeProps) {
           onChange={handleNameChange}
           placeholder="Enter step name"
           onKeyDown={(e) => {
-            // console.log('[FetchUrlNode] KeyDown:', e.key)
             e.stopPropagation()
           }}
-          // onInput={(e) => console.log('[FetchUrlNode] Input event:', (e.target as HTMLInputElement).value)}
         />
       </div>
 

package/src/components/nodes/PromptNode.tsx

@@ -3,9 +3,6 @@ import type { NodeProps } from '@xyflow/react'
 import { BaseNode, BrainIcon, NODE_HEADER_COLORS } from './BaseNode'
 import type { RuntypeNodeData, PromptStepConfig, FlowStep } from '../../types'
 
-// ============================================================================
-// Styles
-// ============================================================================
 
 const styles = {
   field: {
@@ -86,9 +83,6 @@ const styles = {
   },
 }
 
-// ============================================================================
-// Prompt Node Component
-// ============================================================================
 
 export const PromptNode = memo(function PromptNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }

package/src/components/nodes/SendEmailNode.tsx

@@ -3,9 +3,6 @@ import type { NodeProps } from '@xyflow/react'
 import { BaseNode, MailIcon, NODE_HEADER_COLORS } from './BaseNode'
 import type { RuntypeNodeData, SendEmailStepConfig, FlowStep } from '../../types'
 
-// ============================================================================
-// Styles
-// ============================================================================
 
 const styles = {
   field: {
@@ -93,9 +90,6 @@ const styles = {
   },
 }
 
-// ============================================================================
-// Send Email Node Component
-// ============================================================================
 
 export const SendEmailNode = memo(function SendEmailNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
@@ -123,7 +117,6 @@ export const SendEmailNode = memo(function SendEmailNode(props: NodeProps) {
     [id, onChange]
   )
 
-  // Check for template variables in fields
   const hasVariables = (value: string) => /\{\{[\w._]+\}\}/.test(value)
 
   return (