@runtypelabs/react-flow 0.1.0

package/example/src/main.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App'
+import '@xyflow/react/dist/style.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)
+

package/example/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
+

package/example/vite.config.ts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3100,
+  },
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
+})
+

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@runtypelabs/react-flow",
+  "version": "0.1.0",
+  "description": "React Flow adapter for building visual flow editors with Runtype",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "@travrse/shared": "1.0.0",
+    "@runtypelabs/sdk": "0.1.1"
+  },
+  "peerDependencies": {
+    "@xyflow/react": "^12.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.18",
+    "@types/react-dom": "18.3.5",
+    "@xyflow/react": "^12.0.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.3"
+  },
+  "keywords": [
+    "runtype",
+    "react-flow",
+    "flow-editor",
+    "visual-programming",
+    "workflow",
+    "ai",
+    "automation"
+  ],
+  "author": "Runtype Labs",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/runtypelabs/core",
+    "directory": "packages/react-flow"
+  },
+  "homepage": "https://runtype.com",
+  "bugs": {
+    "url": "https://github.com/runtypelabs/core/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "typecheck": "tsc --noEmit --skipLibCheck"
+  }
+}

package/src/components/RuntypeFlowEditor.tsx

@@ -0,0 +1,528 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import {
+  ReactFlow,
+  Controls,
+  Background,
+  MiniMap,
+  Panel,
+  type NodeTypes,
+  BackgroundVariant,
+  ConnectionLineType,
+} from '@xyflow/react'
+
+import type {
+  RuntypeFlowEditorProps,
+  RuntypeNode,
+  FlowStep,
+  SupportedNodeType,
+} from '../types'
+import { useRuntypeFlow } from '../hooks/useRuntypeFlow'
+import { useFlowValidation } from '../hooks/useFlowValidation'
+import { PromptNode } from './nodes/PromptNode'
+import { FetchUrlNode } from './nodes/FetchUrlNode'
+import { CodeNode } from './nodes/CodeNode'
+import { ConditionalNode } from './nodes/ConditionalNode'
+import { SendEmailNode } from './nodes/SendEmailNode'
+import { BaseNode, BrainIcon, NODE_HEADER_COLORS } from './nodes/BaseNode'
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const styles = {
+  container: {
+    width: '100%',
+    height: '100%',
+    position: 'relative' as const,
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '8px 12px',
+    backgroundColor: '#ffffff',
+    borderRadius: '8px',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #e5e7eb',
+  },
+  toolbarButton: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '6px',
+    padding: '8px 12px',
+    fontSize: '12px',
+    fontWeight: 500,
+    backgroundColor: '#f9fafb',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    cursor: 'pointer',
+    color: '#374151',
+    transition: 'all 0.15s ease',
+  },
+  toolbarButtonPrimary: {
+    backgroundColor: '#6366f1',
+    borderColor: '#6366f1',
+    color: '#ffffff',
+  },
+  toolbarDivider: {
+    width: '1px',
+    height: '24px',
+    backgroundColor: '#e5e7eb',
+    margin: '0 4px',
+  },
+  statusPanel: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '8px 12px',
+    backgroundColor: '#ffffff',
+    borderRadius: '8px',
+    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
+    border: '1px solid #e5e7eb',
+    fontSize: '12px',
+    color: '#6b7280',
+  },
+  statusBadge: (isValid: boolean) => ({
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '2px 8px',
+    borderRadius: '12px',
+    fontSize: '10px',
+    fontWeight: 600,
+    backgroundColor: isValid ? '#d1fae5' : '#fee2e2',
+    color: isValid ? '#059669' : '#dc2626',
+  }),
+  addStepMenu: {
+    position: 'absolute' as const,
+    top: '100%',
+    left: 0,
+    marginTop: '4px',
+    backgroundColor: '#ffffff',
+    borderRadius: '8px',
+    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
+    border: '1px solid #e5e7eb',
+    padding: '4px',
+    zIndex: 1000,
+    minWidth: '200px',
+  },
+  addStepMenuItem: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    padding: '8px 12px',
+    fontSize: '12px',
+    color: '#374151',
+    backgroundColor: 'transparent',
+    border: 'none',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    width: '100%',
+    textAlign: 'left' as const,
+    transition: 'background-color 0.15s ease',
+  },
+  flowNameInput: {
+    padding: '6px 10px',
+    fontSize: '14px',
+    fontWeight: 600,
+    border: '1px solid transparent',
+    borderRadius: '4px',
+    backgroundColor: 'transparent',
+    color: '#1f2937',
+    outline: 'none',
+    transition: 'border-color 0.15s ease, background-color 0.15s ease',
+    minWidth: '200px',
+  },
+  unsavedBadge: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '2px 6px',
+    borderRadius: '4px',
+    fontSize: '10px',
+    fontWeight: 500,
+    backgroundColor: '#fef3c7',
+    color: '#d97706',
+  },
+}
+
+// ============================================================================
+// Node Types Configuration
+// ============================================================================
+
+const nodeTypes: NodeTypes = {
+  prompt: PromptNode,
+  'fetch-url': FetchUrlNode,
+  '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; id: string }) {
+  const { data, selected, id } = props
+  
+  return (
+    <BaseNode
+      data={data as any}
+      selected={selected}
+      id={id}
+      typeLabel={data.step.type}
+      icon={<BrainIcon />}
+      headerColor={NODE_HEADER_COLORS.default}
+    >
+      <div style={{ fontSize: '12px', color: '#6b7280' }}>
+        This step type is not yet fully supported in the visual editor.
+      </div>
+    </BaseNode>
+  )
+}
+
+// ============================================================================
+// Step Type Options
+// ============================================================================
+
+const STEP_TYPE_OPTIONS: Array<{
+  type: SupportedNodeType
+  label: string
+  icon: React.ReactNode
+  color: string
+}> = [
+  {
+    type: 'prompt',
+    label: 'AI Prompt',
+    icon: <PromptIcon />,
+    color: NODE_HEADER_COLORS.prompt,
+  },
+  {
+    type: 'fetch-url',
+    label: 'Fetch URL',
+    icon: <GlobeIcon />,
+    color: NODE_HEADER_COLORS['fetch-url'],
+  },
+  {
+    type: 'transform-data',
+    label: 'Run Code',
+    icon: <CodeIcon />,
+    color: NODE_HEADER_COLORS['transform-data'],
+  },
+  {
+    type: 'conditional',
+    label: 'Conditional',
+    icon: <BranchIcon />,
+    color: NODE_HEADER_COLORS.conditional,
+  },
+  {
+    type: 'send-email',
+    label: 'Send Email',
+    icon: <MailIcon />,
+    color: NODE_HEADER_COLORS['send-email'],
+  },
+]
+
+// ============================================================================
+// Main Editor Component
+// ============================================================================
+
+export function RuntypeFlowEditor({
+  client,
+  flowId,
+  initialName = 'Untitled Flow',
+  initialDescription = '',
+  initialSteps = [],
+  onSave,
+  onChange,
+  onStepSelect,
+  showToolbar = true,
+  readOnly = false,
+  className,
+}: RuntypeFlowEditorProps) {
+  const [showAddMenu, setShowAddMenu] = useState(false)
+  const [selectedNode, setSelectedNode] = useState<RuntypeNode | null>(null)
+
+  // Initialize flow hook
+  const {
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    flowName,
+    setFlowName,
+    saveFlow,
+    addStep,
+    isLoading,
+    isSaving,
+    error,
+    hasUnsavedChanges,
+  } = useRuntypeFlow({
+    client,
+    flowId,
+    initialName,
+    initialDescription,
+    initialSteps,
+    onChange,
+    autoLayoutOnLoad: true,
+  })
+
+  // Validation
+  const { result: validationResult } = useFlowValidation({ nodes })
+
+  // Handlers
+  const handleSave = useCallback(async () => {
+    try {
+      const savedFlow = await saveFlow()
+      onSave?.(savedFlow)
+    } catch (err) {
+      console.error('Failed to save flow:', err)
+    }
+  }, [saveFlow, onSave])
+
+  const handleAddStep = useCallback(
+    (type: SupportedNodeType) => {
+      addStep(type)
+      setShowAddMenu(false)
+    },
+    [addStep]
+  )
+
+  const handleNodeClick = useCallback(
+    (_: React.MouseEvent, node: RuntypeNode) => {
+      setSelectedNode(node)
+      onStepSelect?.(node.data.step)
+    },
+    [onStepSelect]
+  )
+
+  const handlePaneClick = useCallback(() => {
+    setSelectedNode(null)
+    onStepSelect?.(null)
+  }, [onStepSelect])
+
+  // Minimap node color
+  const minimapNodeColor = useCallback((node: RuntypeNode) => {
+    return NODE_HEADER_COLORS[node.data.step.type] || NODE_HEADER_COLORS.default
+  }, [])
+
+  return (
+    <div style={styles.container} className={className}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={readOnly ? undefined : onNodesChange}
+        onEdgesChange={readOnly ? undefined : onEdgesChange}
+        onConnect={readOnly ? undefined : onConnect}
+        onNodeClick={handleNodeClick}
+        onPaneClick={handlePaneClick}
+        nodeTypes={nodeTypes}
+        fitView
+        fitViewOptions={{ padding: 0.2 }}
+        snapToGrid
+        snapGrid={[20, 20]}
+        connectionLineType={ConnectionLineType.SmoothStep}
+        defaultEdgeOptions={{
+          type: 'smoothstep',
+          animated: false,
+        }}
+        proOptions={{ hideAttribution: true }}
+      >
+        <Background variant={BackgroundVariant.Dots} gap={20} size={1} color="#d1d5db" />
+        <Controls showInteractive={!readOnly} />
+        <MiniMap
+          nodeColor={minimapNodeColor}
+          nodeStrokeWidth={3}
+          zoomable
+          pannable
+          style={{
+            backgroundColor: '#f9fafb',
+            border: '1px solid #e5e7eb',
+            borderRadius: '8px',
+          }}
+        />
+
+        {/* Top Toolbar */}
+        {showToolbar && (
+          <Panel position="top-left">
+            <div style={styles.toolbar}>
+              {/* Flow Name */}
+              <input
+                style={styles.flowNameInput}
+                value={flowName}
+                onChange={(e) => setFlowName(e.target.value)}
+                placeholder="Flow name..."
+                disabled={readOnly}
+                onFocus={(e) => {
+                  e.target.style.borderColor = '#6366f1'
+                  e.target.style.backgroundColor = '#ffffff'
+                }}
+                onBlur={(e) => {
+                  e.target.style.borderColor = 'transparent'
+                  e.target.style.backgroundColor = 'transparent'
+                }}
+              />
+
+              {hasUnsavedChanges && (
+                <span style={styles.unsavedBadge}>Unsaved</span>
+              )}
+
+              <div style={styles.toolbarDivider} />
+
+              {/* Add Step Button */}
+              {!readOnly && (
+                <div style={{ position: 'relative' }}>
+                  <button
+                    style={styles.toolbarButton}
+                    onClick={() => setShowAddMenu(!showAddMenu)}
+                    onMouseEnter={(e) => {
+                      e.currentTarget.style.backgroundColor = '#f3f4f6'
+                      e.currentTarget.style.borderColor = '#d1d5db'
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = '#f9fafb'
+                      e.currentTarget.style.borderColor = '#e5e7eb'
+                    }}
+                  >
+                    <PlusIcon /> Add Step
+                  </button>
+
+                  {showAddMenu && (
+                    <div style={styles.addStepMenu}>
+                      {STEP_TYPE_OPTIONS.map((option) => (
+                        <button
+                          key={option.type}
+                          style={styles.addStepMenuItem}
+                          onClick={() => handleAddStep(option.type)}
+                          onMouseEnter={(e) => {
+                            e.currentTarget.style.backgroundColor = option.color
+                          }}
+                          onMouseLeave={(e) => {
+                            e.currentTarget.style.backgroundColor = 'transparent'
+                          }}
+                        >
+                          {option.icon}
+                          {option.label}
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              )}
+
+              {/* Save Button */}
+              {!readOnly && flowId && (
+                <button
+                  style={{ ...styles.toolbarButton, ...styles.toolbarButtonPrimary }}
+                  onClick={handleSave}
+                  disabled={isSaving || !hasUnsavedChanges}
+                  onMouseEnter={(e) => {
+                    if (!isSaving && hasUnsavedChanges) {
+                      e.currentTarget.style.backgroundColor = '#4f46e5'
+                    }
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.backgroundColor = '#6366f1'
+                  }}
+                >
+                  {isSaving ? 'Saving...' : 'Save'}
+                </button>
+              )}
+            </div>
+          </Panel>
+        )}
+
+        {/* Status Panel */}
+        <Panel position="top-right">
+          <div style={styles.statusPanel}>
+            <span style={styles.statusBadge(validationResult.isValid)}>
+              {validationResult.isValid ? 'Valid' : `${validationResult.errors.length} Error(s)`}
+            </span>
+            <span>{nodes.length} steps</span>
+            {isLoading && <span>Loading...</span>}
+            {error && (
+              <span style={{ color: '#dc2626' }}>Error: {error.message}</span>
+            )}
+          </div>
+        </Panel>
+      </ReactFlow>
+
+      {/* Click outside to close menu */}
+      {showAddMenu && (
+        <div
+          style={{
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 999,
+          }}
+          onClick={() => setShowAddMenu(false)}
+        />
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Icon Components
+// ============================================================================
+
+function PlusIcon() {
+  return (
+    <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>
+  )
+}
+
+function PromptIcon() {
+  return (
+    <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>
+  )
+}
+
+function GlobeIcon() {
+  return (
+    <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" />
+    </svg>
+  )
+}
+
+function CodeIcon() {
+  return (
+    <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>
+  )
+}
+
+function BranchIcon() {
+  return (
+    <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" />
+      <path d="M18 9a9 9 0 0 1-9 9" />
+    </svg>
+  )
+}
+
+function MailIcon() {
+  return (
+    <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>
+  )
+}
+
+export default RuntypeFlowEditor
+