@runtypelabs/react-flow 0.1.4 → 0.1.6

package/example/src/main.tsx

@@ -6,6 +6,5 @@ import '@xyflow/react/dist/style.css'
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <App />
-  </React.StrictMode>,
+  </React.StrictMode>
 )
-

package/example/tsconfig.json

@@ -18,4 +18,3 @@
   },
   "include": ["src"]
 }
-

package/example/vite.config.ts

@@ -10,4 +10,3 @@ export default defineConfig({
     dedupe: ['react', 'react-dom'],
   },
 })
-

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/react-flow",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "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": "0.3.0"
+    "@runtypelabs/sdk": "0.5.0"
   },
   "peerDependencies": {
     "@xyflow/react": "^12.0.0",

package/src/components/RuntypeFlowEditor.tsx

@@ -10,12 +10,7 @@ import {
   ConnectionLineType,
 } from '@xyflow/react'
 
-import type {
-  RuntypeFlowEditorProps,
-  RuntypeNode,
-  FlowStep,
-  SupportedNodeType,
-} from '../types'
+import type { RuntypeFlowEditorProps, RuntypeNode, FlowStep, SupportedNodeType } from '../types'
 import { useRuntypeFlow } from '../hooks/useRuntypeFlow'
 import { useFlowValidation } from '../hooks/useFlowValidation'
 import { PromptNode } from './nodes/PromptNode'
@@ -159,9 +154,13 @@ const nodeTypes: NodeTypes = {
 }
 
 // Default node for unsupported step types
-function DefaultNode(props: { data: { step: FlowStep; label: string }; selected?: boolean; id: string }) {
+function DefaultNode(props: {
+  data: { step: FlowStep; label: string }
+  selected?: boolean
+  id: string
+}) {
   const { data, selected, id } = props
-  
+
   return (
     <BaseNode
       data={data as any}
@@ -361,9 +360,7 @@ export function RuntypeFlowEditor({
                 }}
               />
 
-              {hasUnsavedChanges && (
-                <span style={styles.unsavedBadge}>Unsaved</span>
-              )}
+              {hasUnsavedChanges && <span style={styles.unsavedBadge}>Unsaved</span>}
 
               <div style={styles.toolbarDivider} />
 
@@ -438,9 +435,7 @@ export function RuntypeFlowEditor({
             </span>
             <span>{nodes.length} steps</span>
             {isLoading && <span>Loading...</span>}
-            {error && (
-              <span style={{ color: '#dc2626' }}>Error: {error.message}</span>
-            )}
+            {error && <span style={{ color: '#dc2626' }}>Error: {error.message}</span>}
           </div>
         </Panel>
       </ReactFlow>
@@ -469,7 +464,14 @@ export function RuntypeFlowEditor({
 
 function PlusIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <line x1="12" y1="5" x2="12" y2="19" />
       <line x1="5" y1="12" x2="19" y2="12" />
     </svg>
@@ -478,7 +480,14 @@ function PlusIcon() {
 
 function PromptIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
       <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
     </svg>
@@ -487,7 +496,14 @@ function PromptIcon() {
 
 function GlobeIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <circle cx="12" cy="12" r="10" />
       <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
       <path d="M2 12h20" />
@@ -497,7 +513,14 @@ function GlobeIcon() {
 
 function CodeIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <polyline points="16 18 22 12 16 6" />
       <polyline points="8 6 2 12 8 18" />
     </svg>
@@ -506,7 +529,14 @@ function CodeIcon() {
 
 function BranchIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <line x1="6" y1="3" x2="6" y2="15" />
       <circle cx="18" cy="6" r="3" />
       <circle cx="6" cy="18" r="3" />
@@ -517,7 +547,14 @@ function BranchIcon() {
 
 function MailIcon() {
   return (
-    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+    >
       <rect width="20" height="16" x="2" y="4" rx="2" />
       <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
     </svg>
@@ -525,4 +562,3 @@ function MailIcon() {
 }
 
 export default RuntypeFlowEditor
-

package/src/components/nodes/BaseNode.tsx

@@ -134,12 +134,12 @@ const styles = {
 // ============================================================================
 
 export const NODE_HEADER_COLORS: Record<string, string> = {
-  prompt: '#f3e8ff',       // Purple tint
-  'fetch-url': '#dbeafe',  // Blue tint
+  prompt: '#f3e8ff', // Purple tint
+  'fetch-url': '#dbeafe', // Blue tint
   'transform-data': '#fef3c7', // Amber tint
-  conditional: '#fce7f3',  // Pink tint
+  conditional: '#fce7f3', // Pink tint
   'send-email': '#d1fae5', // Green tint
-  default: '#f3f4f6',      // Gray tint
+  default: '#f3f4f6', // Gray tint
 }
 
 // ============================================================================
@@ -211,7 +211,9 @@ export const BaseNode = memo(function BaseNode({
       </div>
 
       {/* Body - nodrag class prevents React Flow from intercepting events */}
-      <div style={styles.body} className="nodrag">{children}</div>
+      <div style={styles.body} className="nodrag">
+        {children}
+      </div>
 
       {/* Source Handle (output) - on right for horizontal flow */}
       {showSourceHandle && (
@@ -354,4 +356,3 @@ export const MailIcon = () => (
 )
 
 export default BaseNode
-

package/src/components/nodes/CodeNode.tsx

@@ -108,7 +108,7 @@ export const CodeNode = memo(function CodeNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
   const { step, onChange } = data
   const config = step.config as TransformDataStepConfig
-  
+
   const [isExpanded, setIsExpanded] = useState(false)
 
   const handleChange = useCallback(
@@ -154,7 +154,14 @@ export const CodeNode = memo(function CodeNode(props: NodeProps) {
       </div>
 
       <div style={styles.field}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: '4px',
+          }}
+        >
           <label style={styles.label}>Code</label>
           <span style={styles.languageBadge(language)}>{language}</span>
         </div>
@@ -249,4 +256,3 @@ export const CodeNode = memo(function CodeNode(props: NodeProps) {
 })
 
 export default CodeNode
-

package/src/components/nodes/ConditionalNode.tsx

@@ -91,7 +91,7 @@ export const ConditionalNode = memo(function ConditionalNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
   const { step, onChange } = data
   const config = step.config as ConditionalStepConfig
-  
+
   const [isExpanded, setIsExpanded] = useState(false)
 
   const handleChange = useCallback(
@@ -174,18 +174,14 @@ export const ConditionalNode = memo(function ConditionalNode(props: NodeProps) {
             <TrueIcon /> True Branch
           </div>
           <div style={styles.branchCount}>{trueStepsCount}</div>
-          <div style={styles.branchCountLabel}>
-            step{trueStepsCount !== 1 ? 's' : ''}
-          </div>
+          <div style={styles.branchCountLabel}>step{trueStepsCount !== 1 ? 's' : ''}</div>
         </div>
         <div style={styles.branchCard('false')}>
           <div style={styles.branchLabel('false')}>
             <FalseIcon /> False Branch
           </div>
           <div style={styles.branchCount}>{falseStepsCount}</div>
-          <div style={styles.branchCountLabel}>
-            step{falseStepsCount !== 1 ? 's' : ''}
-          </div>
+          <div style={styles.branchCountLabel}>step{falseStepsCount !== 1 ? 's' : ''}</div>
         </div>
       </div>
 
@@ -194,10 +190,18 @@ export const ConditionalNode = memo(function ConditionalNode(props: NodeProps) {
           <div style={styles.field}>
             <label style={styles.label}>Condition Examples</label>
             <div style={{ fontSize: '11px', color: '#6b7280', lineHeight: 1.6 }}>
-              <div><code>status === 'active'</code> - Check equality</div>
-              <div><code>count {'>'} 10</code> - Numeric comparison</div>
-              <div><code>data && data.length {'>'} 0</code> - Check array</div>
-              <div><code>_record.metadata.type === 'premium'</code> - API input</div>
+              <div>
+                <code>status === 'active'</code> - Check equality
+              </div>
+              <div>
+                <code>count {'>'} 10</code> - Numeric comparison
+              </div>
+              <div>
+                <code>data && data.length {'>'} 0</code> - Check array
+              </div>
+              <div>
+                <code>_record.metadata.type === 'premium'</code> - API input
+              </div>
             </div>
           </div>
         </div>
@@ -261,4 +265,3 @@ const FalseIcon = () => (
 )
 
 export default ConditionalNode
-

package/src/components/nodes/FetchUrlNode.tsx

@@ -101,7 +101,7 @@ export const FetchUrlNode = memo(function FetchUrlNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
   const { step, onChange } = data
   const config = step.config as FetchUrlStepConfig
-  
+
   const [isExpanded, setIsExpanded] = useState(false)
 
   const handleChange = useCallback(
@@ -164,7 +164,14 @@ export const FetchUrlNode = memo(function FetchUrlNode(props: NodeProps) {
       </div>
 
       <div style={styles.field}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: '4px',
+          }}
+        >
           <label style={styles.label}>Method</label>
           <span style={styles.methodBadge(method)}>{method}</span>
         </div>
@@ -191,11 +198,7 @@ export const FetchUrlNode = memo(function FetchUrlNode(props: NodeProps) {
           placeholder="https://api.example.com/endpoint"
           onKeyDown={(e) => e.stopPropagation()}
         />
-        {config.http?.url && (
-          <div style={styles.urlPreview}>
-            {config.http.url}
-          </div>
-        )}
+        {config.http?.url && <div style={styles.urlPreview}>{config.http.url}</div>}
       </div>
 
       {isExpanded && (
@@ -296,4 +299,3 @@ export const FetchUrlNode = memo(function FetchUrlNode(props: NodeProps) {
 })
 
 export default FetchUrlNode
-

package/src/components/nodes/PromptNode.tsx

@@ -94,7 +94,7 @@ export const PromptNode = memo(function PromptNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
   const { step, onChange } = data
   const config = step.config as PromptStepConfig
-  
+
   const [isExpanded, setIsExpanded] = useState(false)
 
   const handleChange = useCallback(
@@ -147,11 +147,16 @@ export const PromptNode = memo(function PromptNode(props: NodeProps) {
       </div>
 
       <div style={styles.field}>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '4px' }}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            marginBottom: '4px',
+          }}
+        >
           <label style={styles.label}>Mode</label>
-          <span style={styles.modeBadge(isAgentMode)}>
-            {isAgentMode ? 'Agent' : 'Instruction'}
-          </span>
+          <span style={styles.modeBadge(isAgentMode)}>{isAgentMode ? 'Agent' : 'Instruction'}</span>
         </div>
         <select
           style={styles.select}
@@ -267,4 +272,3 @@ export const PromptNode = memo(function PromptNode(props: NodeProps) {
 })
 
 export default PromptNode
-

package/src/components/nodes/SendEmailNode.tsx

@@ -101,7 +101,7 @@ export const SendEmailNode = memo(function SendEmailNode(props: NodeProps) {
   const { data, selected, id } = props as NodeProps & { data: RuntypeNodeData }
   const { step, onChange } = data
   const config = step.config as SendEmailStepConfig
-  
+
   const [isExpanded, setIsExpanded] = useState(false)
 
   const handleChange = useCallback(
@@ -155,9 +155,7 @@ export const SendEmailNode = memo(function SendEmailNode(props: NodeProps) {
           placeholder="recipient@example.com or {{_record.metadata.email}}"
           onKeyDown={(e) => e.stopPropagation()}
         />
-        {hasVariables(config.to || '') && (
-          <span style={styles.variableHint}>Uses variable</span>
-        )}
+        {hasVariables(config.to || '') && <span style={styles.variableHint}>Uses variable</span>}
       </div>
 
       <div style={styles.field}>
@@ -308,4 +306,3 @@ export const SendEmailNode = memo(function SendEmailNode(props: NodeProps) {
 })
 
 export default SendEmailNode
-

package/src/hooks/useFlowValidation.ts

@@ -385,10 +385,7 @@ export function useFlowValidation(options: UseFlowValidationOptions): UseFlowVal
   }, [steps])
 
   // Helper functions
-  const validateStepFn = useCallback(
-    (step: FlowStep) => validateStep(step, steps),
-    [steps]
-  )
+  const validateStepFn = useCallback((step: FlowStep) => validateStep(step, steps), [steps])
 
   const isStepValid = useCallback(
     (stepId: string) => {
@@ -421,4 +418,3 @@ export function useFlowValidation(options: UseFlowValidationOptions): UseFlowVal
 }
 
 export default useFlowValidation
-

package/src/hooks/useRuntypeFlow.ts

@@ -9,13 +9,7 @@ import {
   type Connection,
 } from '@xyflow/react'
 import type { RuntypeClient } from '@runtypelabs/sdk'
-import type {
-  FlowStep,
-  RuntypeNode,
-  RuntypeEdge,
-  SavedFlow,
-  UseRuntypeFlowReturn,
-} from '../types'
+import type { FlowStep, RuntypeNode, RuntypeEdge, SavedFlow, UseRuntypeFlowReturn } from '../types'
 import {
   flowStepsToNodes,
   nodesToFlowSteps,
@@ -111,9 +105,7 @@ export function useRuntypeFlow(options: UseRuntypeFlowOptions): UseRuntypeFlowRe
   const handleStepDelete = useCallback(
     (stepId: string) => {
       setNodes((nds) => nds.filter((node) => node.id !== stepId))
-      setEdges((eds) =>
-        eds.filter((edge) => edge.source !== stepId && edge.target !== stepId)
-      )
+      setEdges((eds) => eds.filter((edge) => edge.source !== stepId && edge.target !== stepId))
       setHasUnsavedChanges(true)
     },
     [setNodes, setEdges]
@@ -197,7 +189,7 @@ export function useRuntypeFlow(options: UseRuntypeFlowOptions): UseRuntypeFlowRe
       await client.flows.update(flowId, {
         name: flowName,
         description: flowDescription,
-        flow_steps: steps.map(step => ({
+        flow_steps: steps.map((step) => ({
           type: step.type,
           name: step.name,
           order: step.order,
@@ -400,4 +392,3 @@ export function useRuntypeFlow(options: UseRuntypeFlowOptions): UseRuntypeFlowRe
 }
 
 export default useRuntypeFlow
-

package/src/index.ts

@@ -25,4 +25,3 @@ export {
   cloneStep,
 } from './utils/adapter'
 export { autoLayout, centerNodes, snapToGrid, getNodesBoundingBox } from './utils/layout'
-

package/src/types/index.ts

@@ -168,7 +168,7 @@ export const SUPPORTED_NODE_TYPES = [
   'send-email',
 ] as const
 
-export type SupportedNodeType = typeof SUPPORTED_NODE_TYPES[number]
+export type SupportedNodeType = (typeof SUPPORTED_NODE_TYPES)[number]
 
 /**
  * Check if a step type has a custom node component
@@ -329,4 +329,3 @@ export interface StepAddEvent {
   step: FlowStep
   position: { x: number; y: number }
 }
-