@runtypelabs/react-flow 0.1.0 → 0.1.2

package/dist/index.mjs

@@ -0,0 +1,3226 @@
+import { memo, useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import { Handle, Position, useNodesState, useEdgesState, addEdge, ReactFlow, ConnectionLineType, Background, BackgroundVariant, Controls, MiniMap, Panel } from '@xyflow/react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/types/index.ts
+var SUPPORTED_NODE_TYPES = [
+  "prompt",
+  "fetch-url",
+  "transform-data",
+  "conditional",
+  "send-email"
+];
+function isSupportedNodeType(type) {
+  return SUPPORTED_NODE_TYPES.includes(type);
+}
+
+// src/utils/adapter.ts
+var NODE_WIDTH = 280;
+var NODE_HEIGHT = 200;
+var NODE_SPACING_X = 350;
+var NODE_SPACING_Y = 80;
+var BRANCH_OFFSET_X = 350;
+var BRANCH_OFFSET_Y = -80;
+var FALSE_BRANCH_GAP = 100;
+function flowStepsToNodes(steps, options) {
+  const {
+    onChange,
+    onDelete,
+    startPosition = { x: 50, y: 200 },
+    idPrefix = "",
+    parentId
+  } = options ?? {};
+  const sortedSteps = [...steps].sort((a, b) => a.order - b.order);
+  const nodes = [];
+  let currentX = startPosition.x;
+  startPosition.y;
+  for (const step of sortedSteps) {
+    const nodeId = idPrefix ? `${idPrefix}${step.id}` : step.id;
+    const nodeData = {
+      step,
+      label: step.name || getDefaultStepName(step.type),
+      onChange,
+      onDelete
+    };
+    const node = {
+      id: nodeId,
+      type: step.type,
+      position: { x: currentX, y: startPosition.y },
+      data: nodeData,
+      draggable: true,
+      selectable: true
+    };
+    if (parentId) {
+      node.parentId = parentId;
+    }
+    nodes.push(node);
+    console.log(`[flowStepsToNodes] Placed "${step.name}" (${step.type}) at x=${currentX}`);
+    if (step.type === "conditional" && step.config) {
+      const config = step.config;
+      const branchX = currentX + BRANCH_OFFSET_X;
+      const trueBranchLength = config.trueSteps?.length || 0;
+      const falseBranchLength = config.falseSteps?.length || 0;
+      const maxBranchLength = Math.max(trueBranchLength, falseBranchLength);
+      const trueBranchHeight = trueBranchLength * (NODE_HEIGHT + NODE_SPACING_Y);
+      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
+          },
+          idPrefix: `${nodeId}-true-`,
+          parentId: nodeId
+        });
+        nodes.push(...trueBranchNodes);
+      }
+      if (config.falseSteps && config.falseSteps.length > 0) {
+        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
+          },
+          idPrefix: `${nodeId}-false-`,
+          parentId: nodeId
+        });
+        nodes.push(...falseBranchNodes);
+        config.falseSteps.length * (NODE_HEIGHT + NODE_SPACING_Y);
+      }
+      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}`);
+        currentX += advance;
+        console.log(`[flowStepsToNodes] After conditional, currentX = ${currentX}`);
+      } else {
+        currentX += NODE_WIDTH + NODE_SPACING_X;
+      }
+    } else {
+      currentX += NODE_WIDTH + NODE_SPACING_X;
+    }
+  }
+  return nodes;
+}
+function nodesToFlowSteps(nodes) {
+  const topLevelNodes = nodes.filter((n) => !n.parentId && !n.id.includes("-true-") && !n.id.includes("-false-"));
+  const sortedNodes = [...topLevelNodes].sort((a, b) => a.position.x - b.position.x);
+  return sortedNodes.map((node, index) => {
+    const step = node.data.step;
+    if (step.type === "conditional") {
+      const trueSteps = extractBranchSteps(nodes, node.id, "true");
+      const falseSteps = extractBranchSteps(nodes, node.id, "false");
+      return {
+        ...step,
+        order: index,
+        config: {
+          ...step.config,
+          trueSteps,
+          falseSteps
+        }
+      };
+    }
+    return {
+      ...step,
+      order: index
+    };
+  });
+}
+function extractBranchSteps(nodes, parentId, branch) {
+  const branchPrefix = `${parentId}-${branch}-`;
+  const branchNodes = nodes.filter((n) => n.id.startsWith(branchPrefix));
+  const sortedBranchNodes = [...branchNodes].sort((a, b) => a.position.x - b.position.x);
+  return sortedBranchNodes.map((node, index) => ({
+    ...node.data.step,
+    order: index
+  }));
+}
+function createEdgesFromNodes(nodes) {
+  const edges = [];
+  const isBranchNode = (n) => n.parentId || n.id.includes("-true-") || n.id.includes("-false-");
+  const topLevelNodes = nodes.filter((n) => !isBranchNode(n)).sort((a, b) => a.position.x - b.position.x);
+  for (let i = 0; i < topLevelNodes.length - 1; i++) {
+    const sourceNode = topLevelNodes[i];
+    const targetNode = topLevelNodes[i + 1];
+    if (sourceNode.data.step.type === "conditional") {
+      continue;
+    }
+    edges.push({
+      id: `edge-${sourceNode.id}-${targetNode.id}`,
+      source: sourceNode.id,
+      target: targetNode.id,
+      sourceHandle: "output",
+      type: "smoothstep",
+      animated: false,
+      data: { stepOrder: i }
+    });
+  }
+  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 trueBranchNodes = nodes.filter((n) => n.id.startsWith(`${conditionalId}-true-`)).sort((a, b) => a.position.x - b.position.x);
+    const falseBranchNodes = nodes.filter((n) => n.id.startsWith(`${conditionalId}-false-`)).sort((a, b) => a.position.x - b.position.x);
+    if (trueBranchNodes.length > 0) {
+      edges.push({
+        id: `edge-${conditionalId}-to-true-branch`,
+        source: conditionalId,
+        target: trueBranchNodes[0].id,
+        sourceHandle: "true",
+        type: "smoothstep",
+        animated: false,
+        label: "True",
+        labelStyle: { fill: "#22c55e", fontWeight: 600, fontSize: 11 },
+        labelBgStyle: { fill: "#f0fdf4", fillOpacity: 0.9 },
+        labelBgPadding: [4, 6],
+        labelBgBorderRadius: 4,
+        style: { stroke: "#22c55e", strokeWidth: 2 }
+      });
+      for (let i = 0; i < trueBranchNodes.length - 1; i++) {
+        edges.push({
+          id: `edge-true-${trueBranchNodes[i].id}-${trueBranchNodes[i + 1].id}`,
+          source: trueBranchNodes[i].id,
+          target: trueBranchNodes[i + 1].id,
+          sourceHandle: "output",
+          type: "smoothstep",
+          animated: false,
+          style: { stroke: "#22c55e", strokeWidth: 1.5 }
+        });
+      }
+      if (nextMainStep) {
+        const lastTrueNode = trueBranchNodes[trueBranchNodes.length - 1];
+        edges.push({
+          id: `edge-true-${lastTrueNode.id}-to-${nextMainStep.id}`,
+          source: lastTrueNode.id,
+          target: nextMainStep.id,
+          sourceHandle: "output",
+          type: "smoothstep",
+          animated: false,
+          style: { stroke: "#22c55e", strokeWidth: 1.5 }
+        });
+      }
+    } else if (nextMainStep) {
+      edges.push({
+        id: `edge-${conditionalId}-true-to-${nextMainStep.id}`,
+        source: conditionalId,
+        target: nextMainStep.id,
+        sourceHandle: "true",
+        type: "smoothstep",
+        animated: false,
+        label: "True",
+        labelStyle: { fill: "#22c55e", fontWeight: 600, fontSize: 11 },
+        labelBgStyle: { fill: "#f0fdf4", fillOpacity: 0.9 },
+        labelBgPadding: [4, 6],
+        labelBgBorderRadius: 4,
+        style: { stroke: "#22c55e", strokeWidth: 2 }
+      });
+    }
+    if (falseBranchNodes.length > 0) {
+      edges.push({
+        id: `edge-${conditionalId}-to-false-branch`,
+        source: conditionalId,
+        target: falseBranchNodes[0].id,
+        sourceHandle: "false",
+        type: "smoothstep",
+        animated: false,
+        label: "False",
+        labelStyle: { fill: "#ef4444", fontWeight: 600, fontSize: 11 },
+        labelBgStyle: { fill: "#fef2f2", fillOpacity: 0.9 },
+        labelBgPadding: [4, 6],
+        labelBgBorderRadius: 4,
+        style: { stroke: "#ef4444", strokeWidth: 2 }
+      });
+      for (let i = 0; i < falseBranchNodes.length - 1; i++) {
+        edges.push({
+          id: `edge-false-${falseBranchNodes[i].id}-${falseBranchNodes[i + 1].id}`,
+          source: falseBranchNodes[i].id,
+          target: falseBranchNodes[i + 1].id,
+          sourceHandle: "output",
+          type: "smoothstep",
+          animated: false,
+          style: { stroke: "#ef4444", strokeWidth: 1.5 }
+        });
+      }
+      if (nextMainStep) {
+        const lastFalseNode = falseBranchNodes[falseBranchNodes.length - 1];
+        edges.push({
+          id: `edge-false-${lastFalseNode.id}-to-${nextMainStep.id}`,
+          source: lastFalseNode.id,
+          target: nextMainStep.id,
+          sourceHandle: "output",
+          type: "smoothstep",
+          animated: false,
+          style: { stroke: "#ef4444", strokeWidth: 1.5 }
+        });
+      }
+    } else if (nextMainStep) {
+      edges.push({
+        id: `edge-${conditionalId}-false-to-${nextMainStep.id}`,
+        source: conditionalId,
+        target: nextMainStep.id,
+        sourceHandle: "false",
+        type: "smoothstep",
+        animated: false,
+        label: "False",
+        labelStyle: { fill: "#ef4444", fontWeight: 600, fontSize: 11 },
+        labelBgStyle: { fill: "#fef2f2", fillOpacity: 0.9 },
+        labelBgPadding: [4, 6],
+        labelBgBorderRadius: 4,
+        style: { stroke: "#ef4444", strokeWidth: 2 }
+      });
+    }
+    if (trueBranchNodes.length === 0 && falseBranchNodes.length === 0 && nextMainStep) {
+      edges.push({
+        id: `edge-${conditionalId}-to-${nextMainStep.id}`,
+        source: conditionalId,
+        target: nextMainStep.id,
+        sourceHandle: "output",
+        type: "smoothstep",
+        animated: false
+      });
+    }
+  }
+  return edges;
+}
+function getDefaultStepName(type) {
+  const names = {
+    "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",
+    "set-variable": "Set Variable",
+    "upsert-record": "Upsert Record",
+    "send-email": "Send Email",
+    "send-text": "Send Text",
+    "send-event": "Send Event",
+    "send-stream": "Send Stream",
+    "update-record": "Update Record",
+    "search": "Search",
+    "generate-embedding": "Generate Embedding",
+    "vector-search": "Vector Search",
+    "tool-call": "Tool Call",
+    "wait-until": "Wait Until"
+  };
+  return names[type] || type;
+}
+function createDefaultStep(type, order = 0) {
+  const id = `step-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  const baseStep = {
+    id,
+    type,
+    name: getDefaultStepName(type),
+    order,
+    enabled: true
+  };
+  switch (type) {
+    case "prompt":
+      return {
+        ...baseStep,
+        config: {
+          mode: "instruction",
+          model: "",
+          userPrompt: "",
+          responseFormat: "text",
+          outputVariable: `${type}_result`
+        }
+      };
+    case "fetch-url":
+      return {
+        ...baseStep,
+        config: {
+          http: {
+            url: "",
+            method: "GET"
+          },
+          responseType: "json",
+          outputVariable: "fetch_result"
+        }
+      };
+    case "transform-data":
+      return {
+        ...baseStep,
+        config: {
+          script: "// Transform your data here\nreturn { result: input }",
+          outputVariable: "transform_result"
+        }
+      };
+    case "conditional":
+      return {
+        ...baseStep,
+        config: {
+          condition: "true",
+          trueSteps: [],
+          falseSteps: []
+        }
+      };
+    case "send-email":
+      return {
+        ...baseStep,
+        config: {
+          from: "no-reply@messages.runtype.com",
+          to: "",
+          subject: "",
+          html: "",
+          outputVariable: "email_result"
+        }
+      };
+    default:
+      return {
+        ...baseStep,
+        config: {
+          outputVariable: `${type.replace(/-/g, "_")}_result`
+        }
+      };
+  }
+}
+function generateStepId(prefix = "step") {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+function cloneStep(step) {
+  return {
+    ...step,
+    id: generateStepId(step.type),
+    config: JSON.parse(JSON.stringify(step.config))
+  };
+}
+
+// src/utils/layout.ts
+var DEFAULT_NODE_WIDTH = 280;
+var DEFAULT_NODE_HEIGHT = 150;
+var HORIZONTAL_SPACING = 100;
+var VERTICAL_SPACING = 80;
+var BRANCH_OFFSET = 350;
+function autoLayout(nodes, edges, options = {}) {
+  const {
+    direction = "vertical",
+    startPosition = { x: 400, y: 50 },
+    nodeWidth = DEFAULT_NODE_WIDTH,
+    nodeHeight = DEFAULT_NODE_HEIGHT,
+    horizontalSpacing = HORIZONTAL_SPACING,
+    verticalSpacing = VERTICAL_SPACING,
+    branchOffset = BRANCH_OFFSET
+  } = options;
+  const adjacencyMap = /* @__PURE__ */ new Map();
+  const incomingMap = /* @__PURE__ */ new Map();
+  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]);
+  }
+  const rootNodes = nodes.filter((node) => {
+    const incoming = incomingMap.get(node.id);
+    return !incoming || incoming.length === 0;
+  });
+  if (rootNodes.length === 0 && nodes.length > 0) {
+    rootNodes.push(nodes[0]);
+  }
+  const positionedNodes = /* @__PURE__ */ new Map();
+  const visited = /* @__PURE__ */ new Set();
+  const queue = [];
+  let startX = startPosition.x;
+  for (const rootNode of rootNodes) {
+    queue.push({ nodeId: rootNode.id, x: startX, y: startPosition.y, depth: 0 });
+    startX += nodeWidth + horizontalSpacing;
+  }
+  while (queue.length > 0) {
+    const { nodeId, x, y, depth } = queue.shift();
+    if (visited.has(nodeId)) continue;
+    visited.add(nodeId);
+    positionedNodes.set(nodeId, { x, y });
+    const children = adjacencyMap.get(nodeId) || [];
+    const node = nodes.find((n) => n.id === nodeId);
+    const isConditional = node?.data.step.type === "conditional";
+    if (isConditional && children.length > 0) {
+      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-"));
+      let trueY = y + nodeHeight + verticalSpacing;
+      for (const childId of trueBranch) {
+        if (!visited.has(childId)) {
+          queue.push({
+            nodeId: childId,
+            x: x + branchOffset,
+            y: trueY,
+            depth: depth + 1
+          });
+          trueY += nodeHeight + verticalSpacing;
+        }
+      }
+      let falseY = y + nodeHeight + verticalSpacing;
+      for (const childId of falseBranch) {
+        if (!visited.has(childId)) {
+          queue.push({
+            nodeId: childId,
+            x: x - branchOffset,
+            y: falseY,
+            depth: depth + 1
+          });
+          falseY += nodeHeight + verticalSpacing;
+        }
+      }
+      const maxBranchY = Math.max(trueY, falseY);
+      let childY = maxBranchY;
+      for (const childId of normalChildren) {
+        if (!visited.has(childId)) {
+          queue.push({
+            nodeId: childId,
+            x,
+            y: childY,
+            depth: depth + 1
+          });
+          childY += nodeHeight + verticalSpacing;
+        }
+      }
+    } else {
+      let childY = y + nodeHeight + verticalSpacing;
+      let childX = x;
+      for (let i = 0; i < children.length; i++) {
+        const childId = children[i];
+        if (!visited.has(childId)) {
+          if (direction === "horizontal") {
+            queue.push({
+              nodeId: childId,
+              x: childX + nodeWidth + horizontalSpacing,
+              y,
+              depth: depth + 1
+            });
+            childX += nodeWidth + horizontalSpacing;
+          } else {
+            queue.push({
+              nodeId: childId,
+              x,
+              y: childY,
+              depth: depth + 1
+            });
+            childY += nodeHeight + verticalSpacing;
+          }
+        }
+      }
+    }
+  }
+  return nodes.map((node) => {
+    const position = positionedNodes.get(node.id);
+    if (position) {
+      return {
+        ...node,
+        position
+      };
+    }
+    return node;
+  });
+}
+function centerNodes(nodes, viewportWidth, viewportHeight) {
+  if (nodes.length === 0) return nodes;
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (const node of nodes) {
+    minX = Math.min(minX, node.position.x);
+    maxX = Math.max(maxX, node.position.x + DEFAULT_NODE_WIDTH);
+    minY = Math.min(minY, node.position.y);
+    maxY = Math.max(maxY, node.position.y + DEFAULT_NODE_HEIGHT);
+  }
+  const contentWidth = maxX - minX;
+  const contentHeight = maxY - minY;
+  const offsetX = (viewportWidth - contentWidth) / 2 - minX;
+  const offsetY = (viewportHeight - contentHeight) / 2 - minY;
+  return nodes.map((node) => ({
+    ...node,
+    position: {
+      x: node.position.x + offsetX,
+      y: node.position.y + offsetY
+    }
+  }));
+}
+function snapToGrid(nodes, gridSize = 20) {
+  return nodes.map((node) => ({
+    ...node,
+    position: {
+      x: Math.round(node.position.x / gridSize) * gridSize,
+      y: Math.round(node.position.y / gridSize) * gridSize
+    }
+  }));
+}
+function getNodesBoundingBox(nodes) {
+  if (nodes.length === 0) {
+    return { minX: 0, maxX: 0, minY: 0, maxY: 0, width: 0, height: 0 };
+  }
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (const node of nodes) {
+    minX = Math.min(minX, node.position.x);
+    maxX = Math.max(maxX, node.position.x + DEFAULT_NODE_WIDTH);
+    minY = Math.min(minY, node.position.y);
+    maxY = Math.max(maxY, node.position.y + DEFAULT_NODE_HEIGHT);
+  }
+  return {
+    minX,
+    maxX,
+    minY,
+    maxY,
+    width: maxX - minX,
+    height: maxY - minY
+  };
+}
+
+// src/hooks/useRuntypeFlow.ts
+function useRuntypeFlow(options) {
+  const {
+    client,
+    flowId: initialFlowId,
+    initialName = "",
+    initialDescription = "",
+    initialSteps = [],
+    onChange,
+    autoLayoutOnLoad = true
+  } = options;
+  const [flowId, setFlowId] = useState(initialFlowId || null);
+  const [flowName, setFlowName] = useState(initialName);
+  const [flowDescription, setFlowDescription] = useState(initialDescription);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const lastSavedState = useRef("");
+  const handleStepChange = useCallback(
+    (stepId, updates) => {
+      setNodes(
+        (nds) => nds.map((node) => {
+          if (node.id === stepId) {
+            return {
+              ...node,
+              data: {
+                ...node.data,
+                step: {
+                  ...node.data.step,
+                  ...updates,
+                  config: updates.config ? { ...node.data.step.config, ...updates.config } : node.data.step.config
+                }
+              }
+            };
+          }
+          return node;
+        })
+      );
+      setHasUnsavedChanges(true);
+    },
+    [setNodes]
+  );
+  const handleStepDelete = useCallback(
+    (stepId) => {
+      setNodes((nds) => nds.filter((node) => node.id !== stepId));
+      setEdges(
+        (eds) => eds.filter((edge) => edge.source !== stepId && edge.target !== stepId)
+      );
+      setHasUnsavedChanges(true);
+    },
+    [setNodes, setEdges]
+  );
+  const handleConnect = useCallback(
+    (connection) => {
+      setEdges((eds) => addEdge({ ...connection, type: "smoothstep" }, eds));
+      setHasUnsavedChanges(true);
+    },
+    [setEdges]
+  );
+  const loadFlow = useCallback(
+    async (id) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const flow = await client.flows.get(id);
+        const stepsResponse = await client.flowSteps.getByFlow(id);
+        const steps = Array.isArray(stepsResponse) ? stepsResponse : [];
+        let newNodes = flowStepsToNodes(steps, {
+          onChange: handleStepChange,
+          onDelete: handleStepDelete
+        });
+        if (autoLayoutOnLoad) {
+          const newEdges2 = createEdgesFromNodes(newNodes);
+          newNodes = autoLayout(newNodes, newEdges2);
+        }
+        const newEdges = createEdgesFromNodes(newNodes);
+        setFlowId(id);
+        setFlowName(flow.name || "");
+        setFlowDescription(flow.description || "");
+        setNodes(newNodes);
+        setEdges(newEdges);
+        setHasUnsavedChanges(false);
+        lastSavedState.current = JSON.stringify(nodesToFlowSteps(newNodes));
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to load flow"));
+        throw err;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [client, handleStepChange, handleStepDelete, autoLayoutOnLoad, setNodes, setEdges]
+  );
+  const saveFlow = useCallback(async () => {
+    if (!flowId) {
+      throw new Error("No flow ID. Use createFlow() to create a new flow first.");
+    }
+    setIsSaving(true);
+    setError(null);
+    try {
+      const steps = nodesToFlowSteps(nodes);
+      await client.flows.update(flowId, {
+        name: flowName,
+        description: flowDescription
+      });
+      const existingSteps = await client.flowSteps.getByFlow(flowId);
+      for (const step of existingSteps) {
+        await client.flowSteps.delete(step.id);
+      }
+      for (const step of steps) {
+        await client.flowSteps.create({
+          flowId,
+          type: step.type,
+          name: step.name,
+          order: step.order,
+          enabled: step.enabled,
+          config: step.config
+        });
+      }
+      setHasUnsavedChanges(false);
+      lastSavedState.current = JSON.stringify(steps);
+      return {
+        id: flowId,
+        name: flowName,
+        description: flowDescription,
+        steps
+      };
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Failed to save flow"));
+      throw err;
+    } finally {
+      setIsSaving(false);
+    }
+  }, [flowId, flowName, flowDescription, nodes, client]);
+  const createFlow = useCallback(
+    async (name, description) => {
+      setIsSaving(true);
+      setError(null);
+      try {
+        const flow = await client.flows.create({
+          name,
+          description,
+          prompts: []
+        });
+        setFlowId(flow.id);
+        setFlowName(name);
+        setFlowDescription(description || "");
+        setNodes([]);
+        setEdges([]);
+        setHasUnsavedChanges(false);
+        lastSavedState.current = "[]";
+        return {
+          id: flow.id,
+          name,
+          description,
+          steps: []
+        };
+      } catch (err) {
+        setError(err instanceof Error ? err : new Error("Failed to create flow"));
+        throw err;
+      } finally {
+        setIsSaving(false);
+      }
+    },
+    [client, setNodes, setEdges]
+  );
+  const deleteStep = useCallback(
+    (stepId) => {
+      handleStepDelete(stepId);
+    },
+    [handleStepDelete]
+  );
+  const updateStep = useCallback(
+    (stepId, updates) => {
+      handleStepChange(stepId, updates);
+    },
+    [handleStepChange]
+  );
+  const addStep = useCallback(
+    (type, position) => {
+      const newStep = createDefaultStep(type, nodes.length);
+      const newNode = {
+        id: newStep.id,
+        type: newStep.type,
+        position: position || { x: 400, y: nodes.length * 230 + 50 },
+        data: {
+          step: newStep,
+          label: newStep.name,
+          onChange: handleStepChange,
+          onDelete: handleStepDelete
+        },
+        draggable: true,
+        selectable: true
+      };
+      setNodes((nds) => [...nds, newNode]);
+      if (nodes.length > 0) {
+        const lastNode = nodes[nodes.length - 1];
+        setEdges((eds) => [
+          ...eds,
+          {
+            id: `edge-${lastNode.id}-${newNode.id}`,
+            source: lastNode.id,
+            target: newNode.id,
+            type: "smoothstep"
+          }
+        ]);
+      }
+      setHasUnsavedChanges(true);
+    },
+    [nodes, setNodes, setEdges, handleStepChange, handleStepDelete]
+  );
+  useEffect(() => {
+    if (initialFlowId) {
+      loadFlow(initialFlowId);
+    } else if (initialSteps.length > 0) {
+      let newNodes = flowStepsToNodes(initialSteps, {
+        onChange: handleStepChange,
+        onDelete: handleStepDelete
+      });
+      if (autoLayoutOnLoad) {
+        const newEdges2 = createEdgesFromNodes(newNodes);
+        newNodes = autoLayout(newNodes, newEdges2);
+      }
+      const newEdges = createEdgesFromNodes(newNodes);
+      setNodes(newNodes);
+      setEdges(newEdges);
+    }
+  }, []);
+  useEffect(() => {
+    onChange?.(nodes, edges);
+  }, [nodes, edges, onChange]);
+  useEffect(() => {
+    const currentState = JSON.stringify(nodesToFlowSteps(nodes));
+    if (lastSavedState.current && currentState !== lastSavedState.current) {
+      setHasUnsavedChanges(true);
+    }
+  }, [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,
+    hasUnsavedChanges
+  };
+}
+var promptValidation = {
+  validate: (step) => {
+    const errors = [];
+    const config = step.config;
+    if (!config.model) {
+      errors.push({
+        stepId: step.id,
+        field: "model",
+        message: "Model is required"
+      });
+    }
+    if (!config.userPrompt?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "userPrompt",
+        message: "User prompt is required"
+      });
+    }
+    if (!config.outputVariable?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "outputVariable",
+        message: "Output variable is required"
+      });
+    }
+    return errors;
+  }
+};
+var fetchUrlValidation = {
+  validate: (step) => {
+    const errors = [];
+    const config = step.config;
+    if (!config.http?.url?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "http.url",
+        message: "URL is required"
+      });
+    } else {
+      const url = config.http.url;
+      if (!url.startsWith("http://") && !url.startsWith("https://") && !url.includes("{{")) {
+        errors.push({
+          stepId: step.id,
+          field: "http.url",
+          message: "URL must start with http:// or https://"
+        });
+      }
+    }
+    if (!config.outputVariable?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "outputVariable",
+        message: "Output variable is required"
+      });
+    }
+    return errors;
+  }
+};
+var transformDataValidation = {
+  validate: (step) => {
+    const errors = [];
+    const config = step.config;
+    if (!config.script?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "script",
+        message: "Script is required"
+      });
+    }
+    if (!config.outputVariable?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "outputVariable",
+        message: "Output variable is required"
+      });
+    }
+    return errors;
+  }
+};
+var conditionalValidation = {
+  validate: (step, allSteps) => {
+    const errors = [];
+    const config = step.config;
+    if (!config.condition?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "condition",
+        message: "Condition is required"
+      });
+    }
+    if (config.trueSteps && config.trueSteps.length > 0) {
+      for (const nestedStep of config.trueSteps) {
+        const nestedErrors = validateStep(nestedStep, allSteps);
+        errors.push(
+          ...nestedErrors.map((e) => ({
+            ...e,
+            message: `True branch: ${e.message}`
+          }))
+        );
+      }
+    }
+    if (config.falseSteps && config.falseSteps.length > 0) {
+      for (const nestedStep of config.falseSteps) {
+        const nestedErrors = validateStep(nestedStep, allSteps);
+        errors.push(
+          ...nestedErrors.map((e) => ({
+            ...e,
+            message: `False branch: ${e.message}`
+          }))
+        );
+      }
+    }
+    return errors;
+  }
+};
+var sendEmailValidation = {
+  validate: (step) => {
+    const errors = [];
+    const config = step.config;
+    if (!config.to?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "to",
+        message: "Recipient (To) is required"
+      });
+    } else {
+      const to = config.to;
+      if (!to.includes("@") && !to.includes("{{")) {
+        errors.push({
+          stepId: step.id,
+          field: "to",
+          message: "Invalid email address"
+        });
+      }
+    }
+    if (!config.subject?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "subject",
+        message: "Subject is required"
+      });
+    }
+    if (!config.html?.trim() && !config.text?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "html",
+        message: "Email content (HTML or text) is required"
+      });
+    }
+    if (!config.outputVariable?.trim()) {
+      errors.push({
+        stepId: step.id,
+        field: "outputVariable",
+        message: "Output variable is required"
+      });
+    }
+    return errors;
+  }
+};
+var outputVariableWarning = {
+  check: (step, allSteps) => {
+    const warnings = [];
+    const config = step.config;
+    if (config.outputVariable) {
+      const duplicates = allSteps.filter(
+        (s) => s.id !== step.id && s.config.outputVariable === config.outputVariable
+      );
+      if (duplicates.length > 0) {
+        warnings.push({
+          stepId: step.id,
+          field: "outputVariable",
+          message: `Output variable "${config.outputVariable}" is also used by another step`
+        });
+      }
+    }
+    return warnings;
+  }
+};
+var emptyBranchWarning = {
+  check: (step) => {
+    const warnings = [];
+    if (step.type === "conditional") {
+      const config = step.config;
+      if (!config.trueSteps || config.trueSteps.length === 0) {
+        warnings.push({
+          stepId: step.id,
+          field: "trueSteps",
+          message: "True branch has no steps"
+        });
+      }
+      if (!config.falseSteps || config.falseSteps.length === 0) {
+        warnings.push({
+          stepId: step.id,
+          field: "falseSteps",
+          message: "False branch has no steps"
+        });
+      }
+    }
+    return warnings;
+  }
+};
+var validationRules = {
+  prompt: promptValidation,
+  "fetch-url": fetchUrlValidation,
+  "transform-data": transformDataValidation,
+  conditional: conditionalValidation,
+  "send-email": sendEmailValidation
+};
+var warningRules = [outputVariableWarning, emptyBranchWarning];
+function validateStep(step, allSteps) {
+  const errors = [];
+  if (!step.name?.trim()) {
+    errors.push({
+      stepId: step.id,
+      field: "name",
+      message: "Step name is required"
+    });
+  }
+  const rule = validationRules[step.type];
+  if (rule) {
+    errors.push(...rule.validate(step, allSteps));
+  }
+  return errors;
+}
+function checkWarnings(step, allSteps) {
+  const warnings = [];
+  for (const rule of warningRules) {
+    warnings.push(...rule.check(step, allSteps));
+  }
+  return warnings;
+}
+function useFlowValidation(options) {
+  const { steps: providedSteps, nodes } = options;
+  const steps = useMemo(() => {
+    if (providedSteps) return providedSteps;
+    if (nodes) return nodes.map((n) => n.data.step);
+    return [];
+  }, [providedSteps, nodes]);
+  const result = useMemo(() => {
+    const errors = [];
+    const warnings = [];
+    for (const step of steps) {
+      errors.push(...validateStep(step, steps));
+      warnings.push(...checkWarnings(step, steps));
+    }
+    return {
+      isValid: errors.length === 0,
+      errors,
+      warnings
+    };
+  }, [steps]);
+  const validateStepFn = useCallback(
+    (step) => validateStep(step, steps),
+    [steps]
+  );
+  const isStepValid = useCallback(
+    (stepId) => {
+      return !result.errors.some((e) => e.stepId === stepId);
+    },
+    [result.errors]
+  );
+  const getStepErrors = useCallback(
+    (stepId) => {
+      return result.errors.filter((e) => e.stepId === stepId);
+    },
+    [result.errors]
+  );
+  const getStepWarnings = useCallback(
+    (stepId) => {
+      return result.warnings.filter((w) => w.stepId === stepId);
+    },
+    [result.warnings]
+  );
+  return {
+    result,
+    validateStep: validateStepFn,
+    isStepValid,
+    getStepErrors,
+    getStepWarnings
+  };
+}
+var styles = {
+  container: (selected) => ({
+    minWidth: "280px",
+    maxWidth: "320px",
+    backgroundColor: "#ffffff",
+    borderRadius: "12px",
+    border: selected ? "2px solid #6366f1" : "1px solid #e5e7eb",
+    boxShadow: selected ? "0 0 0 2px rgba(99, 102, 241, 0.2), 0 4px 6px -1px rgba(0, 0, 0, 0.1)" : "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
+    overflow: "hidden",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  }),
+  header: (color) => ({
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "10px 12px",
+    backgroundColor: color,
+    borderBottom: "1px solid rgba(0, 0, 0, 0.05)"
+  }),
+  iconWrapper: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "28px",
+    height: "28px",
+    borderRadius: "6px",
+    backgroundColor: "rgba(255, 255, 255, 0.9)",
+    color: "#374151"
+  },
+  headerContent: {
+    flex: 1,
+    minWidth: 0
+  },
+  typeLabel: {
+    fontSize: "10px",
+    fontWeight: 600,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    color: "rgba(0, 0, 0, 0.5)",
+    marginBottom: "2px"
+  },
+  stepName: {
+    fontSize: "13px",
+    fontWeight: 600,
+    color: "#1f2937",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  body: {
+    padding: "12px"
+  },
+  handle: {
+    width: "12px",
+    height: "12px",
+    borderRadius: "50%",
+    border: "2px solid #ffffff"
+  },
+  targetHandle: {
+    backgroundColor: "#6366f1"
+  },
+  sourceHandle: {
+    backgroundColor: "#10b981"
+  },
+  deleteButton: {
+    padding: "4px",
+    borderRadius: "4px",
+    backgroundColor: "transparent",
+    border: "none",
+    cursor: "pointer",
+    color: "#9ca3af",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    transition: "color 0.15s ease, background-color 0.15s ease"
+  },
+  enabledBadge: (enabled) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 6px",
+    borderRadius: "4px",
+    fontSize: "10px",
+    fontWeight: 500,
+    backgroundColor: enabled ? "rgba(16, 185, 129, 0.1)" : "rgba(239, 68, 68, 0.1)",
+    color: enabled ? "#059669" : "#dc2626"
+  })
+};
+var NODE_HEADER_COLORS = {
+  prompt: "#f3e8ff",
+  // Purple tint
+  "fetch-url": "#dbeafe",
+  // Blue tint
+  "transform-data": "#fef3c7",
+  // Amber tint
+  conditional: "#fce7f3",
+  // Pink tint
+  "send-email": "#d1fae5",
+  // Green tint
+  default: "#f3f4f6"
+  // Gray tint
+};
+var BaseNode = memo(function BaseNode2({
+  data,
+  selected = false,
+  id,
+  typeLabel,
+  icon,
+  headerColor,
+  showSourceHandle = true,
+  showTargetHandle = true,
+  additionalSourceHandles,
+  children
+}) {
+  const { step, onChange, onDelete } = data;
+  const color = headerColor || NODE_HEADER_COLORS[step.type] || NODE_HEADER_COLORS.default;
+  const handleDelete = (e) => {
+    e.stopPropagation();
+    onDelete?.(id);
+  };
+  return /* @__PURE__ */ jsxs("div", { style: styles.container(selected), children: [
+    showTargetHandle && /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "target",
+        position: Position.Left,
+        style: { ...styles.handle, ...styles.targetHandle }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { style: styles.header(color), children: [
+      /* @__PURE__ */ jsx("div", { style: styles.iconWrapper, children: icon }),
+      /* @__PURE__ */ jsxs("div", { style: styles.headerContent, children: [
+        /* @__PURE__ */ jsx("div", { style: styles.typeLabel, children: typeLabel }),
+        /* @__PURE__ */ jsx("div", { style: styles.stepName, title: step.name, children: step.name || "Untitled Step" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+        /* @__PURE__ */ jsx("span", { style: styles.enabledBadge(step.enabled), children: step.enabled ? "Active" : "Disabled" }),
+        onDelete && /* @__PURE__ */ jsx(
+          "button",
+          {
+            style: styles.deleteButton,
+            onClick: handleDelete,
+            title: "Delete step",
+            onMouseEnter: (e) => {
+              e.currentTarget.style.backgroundColor = "rgba(239, 68, 68, 0.1)";
+              e.currentTarget.style.color = "#dc2626";
+            },
+            onMouseLeave: (e) => {
+              e.currentTarget.style.backgroundColor = "transparent";
+              e.currentTarget.style.color = "#9ca3af";
+            },
+            children: /* @__PURE__ */ jsx(DeleteIcon, {})
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { style: styles.body, className: "nodrag", children }),
+    showSourceHandle && /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Right,
+        id: "output",
+        style: { ...styles.handle, ...styles.sourceHandle }
+      }
+    ),
+    additionalSourceHandles?.map((handle) => /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: handle.position,
+        id: handle.id,
+        style: {
+          ...styles.handle,
+          backgroundColor: handle.color || "#10b981",
+          ...handle.style
+        }
+      },
+      handle.id
+    ))
+  ] });
+});
+var DeleteIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+      /* @__PURE__ */ jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+      /* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+    ]
+  }
+);
+var BrainIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("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" }),
+      /* @__PURE__ */ jsx("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" }),
+      /* @__PURE__ */ jsx("path", { d: "M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" }),
+      /* @__PURE__ */ jsx("path", { d: "M17.599 6.5a3 3 0 0 0 .399-1.375" }),
+      /* @__PURE__ */ jsx("path", { d: "M6.003 5.125A3 3 0 0 0 6.401 6.5" }),
+      /* @__PURE__ */ jsx("path", { d: "M3.477 10.896a4 4 0 0 1 .585-.396" }),
+      /* @__PURE__ */ jsx("path", { d: "M19.938 10.5a4 4 0 0 1 .585.396" }),
+      /* @__PURE__ */ jsx("path", { d: "M6 18a4 4 0 0 1-1.967-.516" }),
+      /* @__PURE__ */ jsx("path", { d: "M19.967 17.484A4 4 0 0 1 18 18" })
+    ]
+  }
+);
+var GlobeIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+      /* @__PURE__ */ jsx("path", { d: "M2 12h20" })
+    ]
+  }
+);
+var CodeIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("polyline", { points: "16 18 22 12 16 6" }),
+      /* @__PURE__ */ jsx("polyline", { points: "8 6 2 12 8 18" })
+    ]
+  }
+);
+var GitBranchIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "3", x2: "6", y2: "15" }),
+      /* @__PURE__ */ jsx("circle", { cx: "18", cy: "6", r: "3" }),
+      /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+      /* @__PURE__ */ jsx("path", { d: "M18 9a9 9 0 0 1-9 9" })
+    ]
+  }
+);
+var MailIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+    ]
+  }
+);
+var styles2 = {
+  field: {
+    marginBottom: "12px"
+  },
+  label: {
+    display: "block",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#6b7280",
+    marginBottom: "4px",
+    textTransform: "uppercase",
+    letterSpacing: "0.03em"
+  },
+  input: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  textarea: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    resize: "vertical",
+    minHeight: "60px",
+    fontFamily: "inherit",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  select: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    cursor: "pointer"
+  },
+  row: {
+    display: "flex",
+    gap: "8px"
+  },
+  modeBadge: (isAgent) => ({
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 8px",
+    borderRadius: "12px",
+    fontSize: "10px",
+    fontWeight: 600,
+    backgroundColor: isAgent ? "#dbeafe" : "#f3e8ff",
+    color: isAgent ? "#1d4ed8" : "#7c3aed",
+    textTransform: "uppercase",
+    letterSpacing: "0.05em"
+  }),
+  preview: {
+    fontSize: "11px",
+    color: "#6b7280",
+    backgroundColor: "#f3f4f6",
+    padding: "8px",
+    borderRadius: "6px",
+    fontFamily: "monospace",
+    whiteSpace: "pre-wrap",
+    wordBreak: "break-word",
+    maxHeight: "80px",
+    overflow: "auto"
+  }
+};
+var PromptNode = memo(function PromptNode2(props) {
+  const { data, selected, id } = props;
+  const { step, onChange } = data;
+  const config = step.config;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleChange = useCallback(
+    (field, value) => {
+      onChange?.(id, {
+        config: {
+          ...config,
+          [field]: value
+        }
+      });
+    },
+    [id, config, onChange]
+  );
+  const handleNameChange = useCallback(
+    (e) => {
+      onChange?.(id, { name: e.target.value });
+    },
+    [id, onChange]
+  );
+  const isAgentMode = config.mode === "agent";
+  return /* @__PURE__ */ jsxs(
+    BaseNode,
+    {
+      data,
+      selected,
+      id,
+      typeLabel: "AI Prompt",
+      icon: /* @__PURE__ */ jsx(BrainIcon, {}),
+      headerColor: NODE_HEADER_COLORS.prompt,
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: styles2.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles2.label, children: "Step Name" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles2.input,
+              value: step.name,
+              onChange: handleNameChange,
+              placeholder: "Enter step name",
+              onKeyDown: (e) => e.stopPropagation(),
+              onFocus: (e) => {
+                e.target.style.borderColor = "#6366f1";
+                e.target.style.boxShadow = "0 0 0 2px rgba(99, 102, 241, 0.1)";
+              },
+              onBlur: (e) => {
+                e.target.style.borderColor = "#e5e7eb";
+                e.target.style.boxShadow = "none";
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles2.field, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }, children: [
+            /* @__PURE__ */ jsx("label", { style: styles2.label, children: "Mode" }),
+            /* @__PURE__ */ jsx("span", { style: styles2.modeBadge(isAgentMode), children: isAgentMode ? "Agent" : "Instruction" })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              style: styles2.select,
+              value: config.mode || "instruction",
+              onChange: (e) => handleChange("mode", e.target.value),
+              onKeyDown: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "instruction", children: "Instruction Mode" }),
+                /* @__PURE__ */ jsx("option", { value: "agent", children: "Agent Mode" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles2.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles2.label, children: "Model" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles2.input,
+              value: config.model || "",
+              onChange: (e) => handleChange("model", e.target.value),
+              placeholder: "e.g., gpt-4, claude-3-sonnet",
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles2.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles2.label, children: "User Prompt" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              style: styles2.textarea,
+              value: config.userPrompt || "",
+              onChange: (e) => handleChange("userPrompt", e.target.value),
+              placeholder: "Enter your prompt...",
+              rows: 3,
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          )
+        ] }),
+        isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          config.systemPrompt !== void 0 && /* @__PURE__ */ jsxs("div", { style: styles2.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles2.label, children: "System Prompt" }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                style: styles2.textarea,
+                value: config.systemPrompt || "",
+                onChange: (e) => handleChange("systemPrompt", e.target.value),
+                placeholder: "System instructions...",
+                rows: 2,
+                onKeyDown: (e) => e.stopPropagation()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles2.row, children: [
+            /* @__PURE__ */ jsxs("div", { style: { ...styles2.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles2.label, children: "Response Format" }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: styles2.select,
+                  value: config.responseFormat || "text",
+                  onChange: (e) => handleChange("responseFormat", e.target.value),
+                  onKeyDown: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "text", children: "Text" }),
+                    /* @__PURE__ */ jsx("option", { value: "json", children: "JSON" }),
+                    /* @__PURE__ */ jsx("option", { value: "markdown", children: "Markdown" }),
+                    /* @__PURE__ */ jsx("option", { value: "html", children: "HTML" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { ...styles2.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles2.label, children: "Temperature" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  style: styles2.input,
+                  type: "number",
+                  min: "0",
+                  max: "2",
+                  step: "0.1",
+                  value: config.temperature ?? 0.7,
+                  onChange: (e) => handleChange("temperature", parseFloat(e.target.value)),
+                  onKeyDown: (e) => e.stopPropagation()
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles2.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles2.label, children: "Output Variable" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: styles2.input,
+                value: config.outputVariable || "",
+                onChange: (e) => handleChange("outputVariable", e.target.value),
+                placeholder: "result",
+                onKeyDown: (e) => e.stopPropagation()
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            style: {
+              width: "100%",
+              padding: "6px",
+              fontSize: "11px",
+              color: "#6366f1",
+              backgroundColor: "transparent",
+              border: "1px dashed #e5e7eb",
+              borderRadius: "6px",
+              cursor: "pointer",
+              marginTop: "4px"
+            },
+            children: isExpanded ? "Show Less" : "Show More Options"
+          }
+        )
+      ]
+    }
+  );
+});
+var styles3 = {
+  field: {
+    marginBottom: "12px"
+  },
+  label: {
+    display: "block",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#6b7280",
+    marginBottom: "4px",
+    textTransform: "uppercase",
+    letterSpacing: "0.03em"
+  },
+  input: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  textarea: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    resize: "vertical",
+    minHeight: "60px",
+    fontFamily: "monospace",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  select: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    cursor: "pointer"
+  },
+  row: {
+    display: "flex",
+    gap: "8px"
+  },
+  methodBadge: (method) => {
+    const colors = {
+      GET: { bg: "#d1fae5", text: "#059669" },
+      POST: { bg: "#dbeafe", text: "#1d4ed8" },
+      PUT: { bg: "#fef3c7", text: "#d97706" },
+      DELETE: { bg: "#fee2e2", text: "#dc2626" },
+      PATCH: { bg: "#e0e7ff", text: "#4f46e5" }
+    };
+    const color = colors[method] || colors.GET;
+    return {
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "2px 8px",
+      borderRadius: "4px",
+      fontSize: "10px",
+      fontWeight: 700,
+      backgroundColor: color.bg,
+      color: color.text,
+      fontFamily: "monospace"
+    };
+  },
+  urlPreview: {
+    fontSize: "11px",
+    color: "#6b7280",
+    backgroundColor: "#f3f4f6",
+    padding: "6px 8px",
+    borderRadius: "4px",
+    fontFamily: "monospace",
+    wordBreak: "break-all",
+    marginTop: "4px"
+  }
+};
+var FetchUrlNode = memo(function FetchUrlNode2(props) {
+  const { data, selected, id } = props;
+  const { step, onChange } = data;
+  const config = step.config;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleChange = useCallback(
+    (field, value) => {
+      if (field.startsWith("http.")) {
+        const httpField = field.replace("http.", "");
+        onChange?.(id, {
+          config: {
+            ...config,
+            http: {
+              ...config.http,
+              [httpField]: value
+            }
+          }
+        });
+      } else {
+        onChange?.(id, {
+          config: {
+            ...config,
+            [field]: value
+          }
+        });
+      }
+    },
+    [id, config, onChange]
+  );
+  const handleNameChange = useCallback(
+    (e) => {
+      onChange?.(id, { name: e.target.value });
+    },
+    [id, onChange]
+  );
+  const method = config.http?.method || "GET";
+  return /* @__PURE__ */ jsxs(
+    BaseNode,
+    {
+      data,
+      selected,
+      id,
+      typeLabel: "Fetch URL",
+      icon: /* @__PURE__ */ jsx(GlobeIcon, {}),
+      headerColor: NODE_HEADER_COLORS["fetch-url"],
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: styles3.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles3.label, children: "Step Name" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles3.input,
+              value: step.name,
+              onChange: handleNameChange,
+              placeholder: "Enter step name",
+              onKeyDown: (e) => {
+                e.stopPropagation();
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles3.field, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }, children: [
+            /* @__PURE__ */ jsx("label", { style: styles3.label, children: "Method" }),
+            /* @__PURE__ */ jsx("span", { style: styles3.methodBadge(method), children: method })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              style: styles3.select,
+              value: method,
+              onChange: (e) => handleChange("http.method", e.target.value),
+              onKeyDown: (e) => e.stopPropagation(),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "GET", children: "GET" }),
+                /* @__PURE__ */ jsx("option", { value: "POST", children: "POST" }),
+                /* @__PURE__ */ jsx("option", { value: "PUT", children: "PUT" }),
+                /* @__PURE__ */ jsx("option", { value: "DELETE", children: "DELETE" }),
+                /* @__PURE__ */ jsx("option", { value: "PATCH", children: "PATCH" })
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles3.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles3.label, children: "URL" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles3.input,
+              value: config.http?.url || "",
+              onChange: (e) => handleChange("http.url", e.target.value),
+              placeholder: "https://api.example.com/endpoint",
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          ),
+          config.http?.url && /* @__PURE__ */ jsx("div", { style: styles3.urlPreview, children: config.http.url })
+        ] }),
+        isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          (method === "POST" || method === "PUT" || method === "PATCH") && /* @__PURE__ */ jsxs("div", { style: styles3.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles3.label, children: "Request Body" }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                style: styles3.textarea,
+                value: config.http?.body || "",
+                onChange: (e) => handleChange("http.body", e.target.value),
+                placeholder: '{"key": "value"}',
+                rows: 3,
+                onKeyDown: (e) => e.stopPropagation()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles3.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles3.label, children: "Headers (JSON)" }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                style: styles3.textarea,
+                value: config.http?.headers ? JSON.stringify(config.http.headers, null, 2) : "",
+                onChange: (e) => {
+                  try {
+                    const headers = JSON.parse(e.target.value);
+                    handleChange("http.headers", headers);
+                  } catch {
+                  }
+                },
+                placeholder: '{"Content-Type": "application/json"}',
+                rows: 2,
+                onKeyDown: (e) => e.stopPropagation()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles3.row, children: [
+            /* @__PURE__ */ jsxs("div", { style: { ...styles3.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles3.label, children: "Response Type" }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: styles3.select,
+                  value: config.responseType || "json",
+                  onChange: (e) => handleChange("responseType", e.target.value),
+                  onKeyDown: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "json", children: "JSON" }),
+                    /* @__PURE__ */ jsx("option", { value: "text", children: "Text" }),
+                    /* @__PURE__ */ jsx("option", { value: "xml", children: "XML" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { ...styles3.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles3.label, children: "On Error" }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: styles3.select,
+                  value: config.errorHandling || "fail",
+                  onChange: (e) => handleChange("errorHandling", e.target.value),
+                  onKeyDown: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "fail", children: "Fail" }),
+                    /* @__PURE__ */ jsx("option", { value: "continue", children: "Continue" }),
+                    /* @__PURE__ */ jsx("option", { value: "default", children: "Use Default" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles3.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles3.label, children: "Output Variable" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: styles3.input,
+                value: config.outputVariable || "",
+                onChange: (e) => handleChange("outputVariable", e.target.value),
+                placeholder: "api_response",
+                onKeyDown: (e) => e.stopPropagation()
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            style: {
+              width: "100%",
+              padding: "6px",
+              fontSize: "11px",
+              color: "#6366f1",
+              backgroundColor: "transparent",
+              border: "1px dashed #e5e7eb",
+              borderRadius: "6px",
+              cursor: "pointer",
+              marginTop: "4px"
+            },
+            children: isExpanded ? "Show Less" : "Show More Options"
+          }
+        )
+      ]
+    }
+  );
+});
+var styles4 = {
+  field: {
+    marginBottom: "12px"
+  },
+  label: {
+    display: "block",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#6b7280",
+    marginBottom: "4px",
+    textTransform: "uppercase",
+    letterSpacing: "0.03em"
+  },
+  input: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  codeArea: {
+    width: "100%",
+    padding: "10px",
+    fontSize: "11px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#1e1e1e",
+    color: "#d4d4d4",
+    outline: "none",
+    resize: "vertical",
+    minHeight: "100px",
+    fontFamily: '"Fira Code", "Monaco", "Consolas", monospace',
+    lineHeight: 1.5,
+    tabSize: 2
+  },
+  select: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    cursor: "pointer"
+  },
+  row: {
+    display: "flex",
+    gap: "8px"
+  },
+  languageBadge: (language) => {
+    const colors = {
+      javascript: { bg: "#fef3c7", text: "#d97706" },
+      typescript: { bg: "#dbeafe", text: "#1d4ed8" },
+      python: { bg: "#d1fae5", text: "#059669" }
+    };
+    const color = colors[language] || colors.javascript;
+    return {
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "2px 8px",
+      borderRadius: "4px",
+      fontSize: "10px",
+      fontWeight: 600,
+      backgroundColor: color.bg,
+      color: color.text,
+      textTransform: "capitalize"
+    };
+  },
+  lineNumbers: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-end",
+    paddingRight: "8px",
+    marginRight: "8px",
+    borderRight: "1px solid #3f3f46",
+    color: "#6b7280",
+    fontSize: "11px",
+    fontFamily: '"Fira Code", "Monaco", "Consolas", monospace',
+    lineHeight: 1.5,
+    userSelect: "none"
+  },
+  codePreview: {
+    fontSize: "10px",
+    color: "#9ca3af",
+    marginTop: "4px"
+  }
+};
+var CodeNode = memo(function CodeNode2(props) {
+  const { data, selected, id } = props;
+  const { step, onChange } = data;
+  const config = step.config;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleChange = useCallback(
+    (field, value) => {
+      onChange?.(id, {
+        config: {
+          ...config,
+          [field]: value
+        }
+      });
+    },
+    [id, config, onChange]
+  );
+  const handleNameChange = useCallback(
+    (e) => {
+      onChange?.(id, { name: e.target.value });
+    },
+    [id, onChange]
+  );
+  const language = config.language || "javascript";
+  const lineCount = (config.script || "").split("\n").length;
+  return /* @__PURE__ */ jsxs(
+    BaseNode,
+    {
+      data,
+      selected,
+      id,
+      typeLabel: "Run Code",
+      icon: /* @__PURE__ */ jsx(CodeIcon, {}),
+      headerColor: NODE_HEADER_COLORS["transform-data"],
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: styles4.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles4.label, children: "Step Name" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles4.input,
+              value: step.name,
+              onChange: handleNameChange,
+              placeholder: "Enter step name",
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles4.field, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "4px" }, children: [
+            /* @__PURE__ */ jsx("label", { style: styles4.label, children: "Code" }),
+            /* @__PURE__ */ jsx("span", { style: styles4.languageBadge(language), children: language })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              style: styles4.codeArea,
+              value: config.script || "",
+              onChange: (e) => handleChange("script", e.target.value),
+              placeholder: `// Write your ${language} code here
+return { result: input }`,
+              spellCheck: false,
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: styles4.codePreview, children: [
+            lineCount,
+            " line",
+            lineCount !== 1 ? "s" : ""
+          ] })
+        ] }),
+        isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { style: styles4.row, children: [
+            /* @__PURE__ */ jsxs("div", { style: { ...styles4.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles4.label, children: "Language" }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: styles4.select,
+                  value: language,
+                  onChange: (e) => handleChange("language", e.target.value),
+                  onKeyDown: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "javascript", children: "JavaScript" }),
+                    /* @__PURE__ */ jsx("option", { value: "typescript", children: "TypeScript" }),
+                    /* @__PURE__ */ jsx("option", { value: "python", children: "Python" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { ...styles4.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles4.label, children: "Sandbox" }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: styles4.select,
+                  value: config.sandboxProvider || "quickjs",
+                  onChange: (e) => handleChange("sandboxProvider", e.target.value),
+                  onKeyDown: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "quickjs", children: "QuickJS (Fast)" }),
+                    /* @__PURE__ */ jsx("option", { value: "daytona", children: "Daytona (Full)" })
+                  ]
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles4.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles4.label, children: "On Error" }),
+            /* @__PURE__ */ jsxs(
+              "select",
+              {
+                style: styles4.select,
+                value: config.errorHandling || "fail",
+                onChange: (e) => handleChange("errorHandling", e.target.value),
+                onKeyDown: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsx("option", { value: "fail", children: "Fail" }),
+                  /* @__PURE__ */ jsx("option", { value: "continue", children: "Continue" }),
+                  /* @__PURE__ */ jsx("option", { value: "default", children: "Use Default" })
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles4.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles4.label, children: "Output Variable" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: styles4.input,
+                value: config.outputVariable || "",
+                onChange: (e) => handleChange("outputVariable", e.target.value),
+                placeholder: "transform_result",
+                onKeyDown: (e) => e.stopPropagation()
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            style: {
+              width: "100%",
+              padding: "6px",
+              fontSize: "11px",
+              color: "#6366f1",
+              backgroundColor: "transparent",
+              border: "1px dashed #e5e7eb",
+              borderRadius: "6px",
+              cursor: "pointer",
+              marginTop: "4px"
+            },
+            children: isExpanded ? "Show Less" : "Show More Options"
+          }
+        )
+      ]
+    }
+  );
+});
+var styles5 = {
+  field: {
+    marginBottom: "12px"
+  },
+  label: {
+    display: "block",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#6b7280",
+    marginBottom: "4px",
+    textTransform: "uppercase",
+    letterSpacing: "0.03em"
+  },
+  input: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  conditionArea: {
+    width: "100%",
+    padding: "10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#fef7ee",
+    color: "#92400e",
+    outline: "none",
+    resize: "vertical",
+    minHeight: "60px",
+    fontFamily: '"Fira Code", "Monaco", "Consolas", monospace',
+    lineHeight: 1.5
+  },
+  branchInfo: {
+    display: "flex",
+    gap: "12px",
+    marginTop: "8px"
+  },
+  branchCard: (type) => ({
+    flex: 1,
+    padding: "10px",
+    borderRadius: "8px",
+    backgroundColor: type === "true" ? "#d1fae5" : "#fee2e2",
+    border: `1px solid ${type === "true" ? "#a7f3d0" : "#fecaca"}`
+  }),
+  branchLabel: (type) => ({
+    fontSize: "10px",
+    fontWeight: 700,
+    textTransform: "uppercase",
+    letterSpacing: "0.05em",
+    color: type === "true" ? "#059669" : "#dc2626",
+    marginBottom: "4px"
+  }),
+  branchCount: {
+    fontSize: "18px",
+    fontWeight: 700,
+    color: "#1f2937"
+  },
+  branchCountLabel: {
+    fontSize: "10px",
+    color: "#6b7280"
+  },
+  helpText: {
+    fontSize: "10px",
+    color: "#9ca3af",
+    marginTop: "4px",
+    fontStyle: "italic"
+  }
+};
+var ConditionalNode = memo(function ConditionalNode2(props) {
+  const { data, selected, id } = props;
+  const { step, onChange } = data;
+  const config = step.config;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleChange = useCallback(
+    (field, value) => {
+      onChange?.(id, {
+        config: {
+          ...config,
+          [field]: value
+        }
+      });
+    },
+    [id, config, onChange]
+  );
+  const handleNameChange = useCallback(
+    (e) => {
+      onChange?.(id, { name: e.target.value });
+    },
+    [id, onChange]
+  );
+  const trueStepsCount = config.trueSteps?.length || 0;
+  const falseStepsCount = config.falseSteps?.length || 0;
+  return /* @__PURE__ */ jsxs(
+    BaseNode,
+    {
+      data,
+      selected,
+      id,
+      typeLabel: "Conditional",
+      icon: /* @__PURE__ */ jsx(GitBranchIcon, {}),
+      headerColor: NODE_HEADER_COLORS.conditional,
+      showSourceHandle: false,
+      additionalSourceHandles: [
+        {
+          id: "true",
+          position: Position.Right,
+          label: "True",
+          color: "#22c55e",
+          style: { top: "40%" }
+        },
+        {
+          id: "false",
+          position: Position.Right,
+          label: "False",
+          color: "#ef4444",
+          style: { top: "60%" }
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: styles5.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Step Name" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles5.input,
+              value: step.name,
+              onChange: handleNameChange,
+              placeholder: "Enter step name",
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles5.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Condition (JavaScript)" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              style: styles5.conditionArea,
+              value: config.condition || "",
+              onChange: (e) => handleChange("condition", e.target.value),
+              placeholder: "user_type === 'premium'",
+              spellCheck: false,
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: styles5.helpText, children: [
+            "Access variables directly: ",
+            /* @__PURE__ */ jsx("code", { children: "variable_name" }),
+            ", ",
+            /* @__PURE__ */ jsx("code", { children: "_record.metadata.field" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles5.branchInfo, children: [
+          /* @__PURE__ */ jsxs("div", { style: styles5.branchCard("true"), children: [
+            /* @__PURE__ */ jsxs("div", { style: styles5.branchLabel("true"), children: [
+              /* @__PURE__ */ jsx(TrueIcon, {}),
+              " True Branch"
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: styles5.branchCount, children: trueStepsCount }),
+            /* @__PURE__ */ jsxs("div", { style: styles5.branchCountLabel, children: [
+              "step",
+              trueStepsCount !== 1 ? "s" : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles5.branchCard("false"), children: [
+            /* @__PURE__ */ jsxs("div", { style: styles5.branchLabel("false"), children: [
+              /* @__PURE__ */ jsx(FalseIcon, {}),
+              " False Branch"
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: styles5.branchCount, children: falseStepsCount }),
+            /* @__PURE__ */ jsxs("div", { style: styles5.branchCountLabel, children: [
+              "step",
+              falseStepsCount !== 1 ? "s" : ""
+            ] })
+          ] })
+        ] }),
+        isExpanded && /* @__PURE__ */ jsx("div", { style: { marginTop: "12px" }, children: /* @__PURE__ */ jsxs("div", { style: styles5.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles5.label, children: "Condition Examples" }),
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: "#6b7280", lineHeight: 1.6 }, children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("code", { children: "status === 'active'" }),
+              " - Check equality"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("code", { children: [
+                "count ",
+                ">",
+                " 10"
+              ] }),
+              " - Numeric comparison"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs("code", { children: [
+                "data && data.length ",
+                ">",
+                " 0"
+              ] }),
+              " - Check array"
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("code", { children: "_record.metadata.type === 'premium'" }),
+              " - API input"
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            style: {
+              width: "100%",
+              padding: "6px",
+              fontSize: "11px",
+              color: "#6366f1",
+              backgroundColor: "transparent",
+              border: "1px dashed #e5e7eb",
+              borderRadius: "6px",
+              cursor: "pointer",
+              marginTop: "12px"
+            },
+            children: isExpanded ? "Hide Examples" : "Show Examples"
+          }
+        )
+      ]
+    }
+  );
+});
+var TrueIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { display: "inline", marginRight: "4px", verticalAlign: "middle" },
+    children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+  }
+);
+var FalseIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "12",
+    height: "12",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: { display: "inline", marginRight: "4px", verticalAlign: "middle" },
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+    ]
+  }
+);
+var styles6 = {
+  field: {
+    marginBottom: "12px"
+  },
+  label: {
+    display: "block",
+    fontSize: "11px",
+    fontWeight: 600,
+    color: "#6b7280",
+    marginBottom: "4px",
+    textTransform: "uppercase",
+    letterSpacing: "0.03em"
+  },
+  input: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  textarea: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    resize: "vertical",
+    minHeight: "80px",
+    fontFamily: "inherit",
+    transition: "border-color 0.15s ease, box-shadow 0.15s ease"
+  },
+  select: {
+    width: "100%",
+    padding: "8px 10px",
+    fontSize: "12px",
+    border: "1px solid #e5e7eb",
+    borderRadius: "6px",
+    backgroundColor: "#f9fafb",
+    color: "#1f2937",
+    outline: "none",
+    cursor: "pointer"
+  },
+  row: {
+    display: "flex",
+    gap: "8px"
+  },
+  emailPreview: {
+    backgroundColor: "#f8fafc",
+    border: "1px solid #e2e8f0",
+    borderRadius: "8px",
+    padding: "10px",
+    marginTop: "8px"
+  },
+  previewHeader: {
+    fontSize: "10px",
+    color: "#64748b",
+    marginBottom: "4px"
+  },
+  previewValue: {
+    fontSize: "12px",
+    color: "#1e293b",
+    fontWeight: 500,
+    marginBottom: "8px",
+    wordBreak: "break-all"
+  },
+  variableHint: {
+    display: "inline-flex",
+    alignItems: "center",
+    padding: "2px 6px",
+    borderRadius: "4px",
+    fontSize: "10px",
+    backgroundColor: "#f0f9ff",
+    color: "#0369a1",
+    fontFamily: "monospace",
+    marginRight: "4px",
+    marginTop: "4px"
+  }
+};
+var SendEmailNode = memo(function SendEmailNode2(props) {
+  const { data, selected, id } = props;
+  const { step, onChange } = data;
+  const config = step.config;
+  const [isExpanded, setIsExpanded] = useState(false);
+  const handleChange = useCallback(
+    (field, value) => {
+      onChange?.(id, {
+        config: {
+          ...config,
+          [field]: value
+        }
+      });
+    },
+    [id, config, onChange]
+  );
+  const handleNameChange = useCallback(
+    (e) => {
+      onChange?.(id, { name: e.target.value });
+    },
+    [id, onChange]
+  );
+  const hasVariables = (value) => /\{\{[\w._]+\}\}/.test(value);
+  return /* @__PURE__ */ jsxs(
+    BaseNode,
+    {
+      data,
+      selected,
+      id,
+      typeLabel: "Send Email",
+      icon: /* @__PURE__ */ jsx(MailIcon, {}),
+      headerColor: NODE_HEADER_COLORS["send-email"],
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: styles6.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles6.label, children: "Step Name" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles6.input,
+              value: step.name,
+              onChange: handleNameChange,
+              placeholder: "Enter step name",
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles6.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles6.label, children: "To" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles6.input,
+              value: config.to || "",
+              onChange: (e) => handleChange("to", e.target.value),
+              placeholder: "recipient@example.com or {{_record.metadata.email}}",
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          ),
+          hasVariables(config.to || "") && /* @__PURE__ */ jsx("span", { style: styles6.variableHint, children: "Uses variable" })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles6.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles6.label, children: "Subject" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              style: styles6.input,
+              value: config.subject || "",
+              onChange: (e) => handleChange("subject", e.target.value),
+              placeholder: "Your subject line",
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: styles6.field, children: [
+          /* @__PURE__ */ jsx("label", { style: styles6.label, children: "HTML Content" }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              style: styles6.textarea,
+              value: config.html || "",
+              onChange: (e) => handleChange("html", e.target.value),
+              placeholder: "<p>Your email content...</p>\n\nUse {{variable}} for dynamic content",
+              rows: 4,
+              onKeyDown: (e) => e.stopPropagation()
+            }
+          )
+        ] }),
+        isExpanded && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { style: styles6.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles6.label, children: "From" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: styles6.input,
+                value: config.from || "",
+                onChange: (e) => handleChange("from", e.target.value),
+                placeholder: "no-reply@messages.runtype.com",
+                onKeyDown: (e) => e.stopPropagation()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles6.row, children: [
+            /* @__PURE__ */ jsxs("div", { style: { ...styles6.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles6.label, children: "CC" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  style: styles6.input,
+                  value: config.cc || "",
+                  onChange: (e) => handleChange("cc", e.target.value),
+                  placeholder: "cc@example.com",
+                  onKeyDown: (e) => e.stopPropagation()
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { ...styles6.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles6.label, children: "BCC" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  style: styles6.input,
+                  value: config.bcc || "",
+                  onChange: (e) => handleChange("bcc", e.target.value),
+                  placeholder: "bcc@example.com",
+                  onKeyDown: (e) => e.stopPropagation()
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles6.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles6.label, children: "Reply To" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: styles6.input,
+                value: config.replyTo || "",
+                onChange: (e) => handleChange("replyTo", e.target.value),
+                placeholder: "reply@example.com",
+                onKeyDown: (e) => e.stopPropagation()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles6.field, children: [
+            /* @__PURE__ */ jsx("label", { style: styles6.label, children: "Plain Text (Fallback)" }),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                style: styles6.textarea,
+                value: config.text || "",
+                onChange: (e) => handleChange("text", e.target.value),
+                placeholder: "Plain text version of your email...",
+                rows: 2,
+                onKeyDown: (e) => e.stopPropagation()
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: styles6.row, children: [
+            /* @__PURE__ */ jsxs("div", { style: { ...styles6.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles6.label, children: "On Error" }),
+              /* @__PURE__ */ jsxs(
+                "select",
+                {
+                  style: styles6.select,
+                  value: config.errorHandling || "fail",
+                  onChange: (e) => handleChange("errorHandling", e.target.value),
+                  onKeyDown: (e) => e.stopPropagation(),
+                  children: [
+                    /* @__PURE__ */ jsx("option", { value: "fail", children: "Fail" }),
+                    /* @__PURE__ */ jsx("option", { value: "continue", children: "Continue" }),
+                    /* @__PURE__ */ jsx("option", { value: "default", children: "Use Default" })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { ...styles6.field, flex: 1 }, children: [
+              /* @__PURE__ */ jsx("label", { style: styles6.label, children: "Output Variable" }),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  style: styles6.input,
+                  value: config.outputVariable || "",
+                  onChange: (e) => handleChange("outputVariable", e.target.value),
+                  placeholder: "email_result",
+                  onKeyDown: (e) => e.stopPropagation()
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        (config.to || config.subject) && /* @__PURE__ */ jsxs("div", { style: styles6.emailPreview, children: [
+          /* @__PURE__ */ jsx("div", { style: styles6.previewHeader, children: "Preview" }),
+          config.to && /* @__PURE__ */ jsxs("div", { style: styles6.previewValue, children: [
+            /* @__PURE__ */ jsx("strong", { children: "To:" }),
+            " ",
+            config.to
+          ] }),
+          config.subject && /* @__PURE__ */ jsxs("div", { style: styles6.previewValue, children: [
+            /* @__PURE__ */ jsx("strong", { children: "Subject:" }),
+            " ",
+            config.subject
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsExpanded(!isExpanded),
+            style: {
+              width: "100%",
+              padding: "6px",
+              fontSize: "11px",
+              color: "#6366f1",
+              backgroundColor: "transparent",
+              border: "1px dashed #e5e7eb",
+              borderRadius: "6px",
+              cursor: "pointer",
+              marginTop: "8px"
+            },
+            children: isExpanded ? "Show Less" : "Show More Options"
+          }
+        )
+      ]
+    }
+  );
+});
+var styles7 = {
+  container: {
+    width: "100%",
+    height: "100%",
+    position: "relative"
+  },
+  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) => ({
+    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",
+    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: 1e3,
+    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",
+    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"
+  }
+};
+var nodeTypes = {
+  prompt: PromptNode,
+  "fetch-url": FetchUrlNode,
+  "transform-data": CodeNode,
+  conditional: ConditionalNode,
+  "send-email": SendEmailNode,
+  // Default node for unsupported types
+  default: DefaultNode
+};
+function DefaultNode(props) {
+  const { data, selected, id } = props;
+  return /* @__PURE__ */ jsx(
+    BaseNode,
+    {
+      data,
+      selected,
+      id,
+      typeLabel: data.step.type,
+      icon: /* @__PURE__ */ jsx(BrainIcon, {}),
+      headerColor: NODE_HEADER_COLORS.default,
+      children: /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "#6b7280" }, children: "This step type is not yet fully supported in the visual editor." })
+    }
+  );
+}
+var STEP_TYPE_OPTIONS = [
+  {
+    type: "prompt",
+    label: "AI Prompt",
+    icon: /* @__PURE__ */ jsx(PromptIcon, {}),
+    color: NODE_HEADER_COLORS.prompt
+  },
+  {
+    type: "fetch-url",
+    label: "Fetch URL",
+    icon: /* @__PURE__ */ jsx(GlobeIcon2, {}),
+    color: NODE_HEADER_COLORS["fetch-url"]
+  },
+  {
+    type: "transform-data",
+    label: "Run Code",
+    icon: /* @__PURE__ */ jsx(CodeIcon2, {}),
+    color: NODE_HEADER_COLORS["transform-data"]
+  },
+  {
+    type: "conditional",
+    label: "Conditional",
+    icon: /* @__PURE__ */ jsx(BranchIcon, {}),
+    color: NODE_HEADER_COLORS.conditional
+  },
+  {
+    type: "send-email",
+    label: "Send Email",
+    icon: /* @__PURE__ */ jsx(MailIcon2, {}),
+    color: NODE_HEADER_COLORS["send-email"]
+  }
+];
+function RuntypeFlowEditor({
+  client,
+  flowId,
+  initialName = "Untitled Flow",
+  initialDescription = "",
+  initialSteps = [],
+  onSave,
+  onChange,
+  onStepSelect,
+  showToolbar = true,
+  readOnly = false,
+  className
+}) {
+  const [showAddMenu, setShowAddMenu] = useState(false);
+  const [selectedNode, setSelectedNode] = useState(null);
+  const {
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    flowName,
+    setFlowName,
+    saveFlow,
+    addStep,
+    isLoading,
+    isSaving,
+    error,
+    hasUnsavedChanges
+  } = useRuntypeFlow({
+    client,
+    flowId,
+    initialName,
+    initialDescription,
+    initialSteps,
+    onChange,
+    autoLayoutOnLoad: true
+  });
+  const { result: validationResult } = useFlowValidation({ nodes });
+  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) => {
+      addStep(type);
+      setShowAddMenu(false);
+    },
+    [addStep]
+  );
+  const handleNodeClick = useCallback(
+    (_, node) => {
+      setSelectedNode(node);
+      onStepSelect?.(node.data.step);
+    },
+    [onStepSelect]
+  );
+  const handlePaneClick = useCallback(() => {
+    setSelectedNode(null);
+    onStepSelect?.(null);
+  }, [onStepSelect]);
+  const minimapNodeColor = useCallback((node) => {
+    return NODE_HEADER_COLORS[node.data.step.type] || NODE_HEADER_COLORS.default;
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { style: styles7.container, className, children: [
+    /* @__PURE__ */ jsxs(
+      ReactFlow,
+      {
+        nodes,
+        edges,
+        onNodesChange: readOnly ? void 0 : onNodesChange,
+        onEdgesChange: readOnly ? void 0 : onEdgesChange,
+        onConnect: readOnly ? void 0 : onConnect,
+        onNodeClick: handleNodeClick,
+        onPaneClick: handlePaneClick,
+        nodeTypes,
+        fitView: true,
+        fitViewOptions: { padding: 0.2 },
+        snapToGrid: true,
+        snapGrid: [20, 20],
+        connectionLineType: ConnectionLineType.SmoothStep,
+        defaultEdgeOptions: {
+          type: "smoothstep",
+          animated: false
+        },
+        proOptions: { hideAttribution: true },
+        children: [
+          /* @__PURE__ */ jsx(Background, { variant: BackgroundVariant.Dots, gap: 20, size: 1, color: "#d1d5db" }),
+          /* @__PURE__ */ jsx(Controls, { showInteractive: !readOnly }),
+          /* @__PURE__ */ jsx(
+            MiniMap,
+            {
+              nodeColor: minimapNodeColor,
+              nodeStrokeWidth: 3,
+              zoomable: true,
+              pannable: true,
+              style: {
+                backgroundColor: "#f9fafb",
+                border: "1px solid #e5e7eb",
+                borderRadius: "8px"
+              }
+            }
+          ),
+          showToolbar && /* @__PURE__ */ jsx(Panel, { position: "top-left", children: /* @__PURE__ */ jsxs("div", { style: styles7.toolbar, children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                style: styles7.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 && /* @__PURE__ */ jsx("span", { style: styles7.unsavedBadge, children: "Unsaved" }),
+            /* @__PURE__ */ jsx("div", { style: styles7.toolbarDivider }),
+            !readOnly && /* @__PURE__ */ jsxs("div", { style: { position: "relative" }, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  style: styles7.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";
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(PlusIcon, {}),
+                    " Add Step"
+                  ]
+                }
+              ),
+              showAddMenu && /* @__PURE__ */ jsx("div", { style: styles7.addStepMenu, children: STEP_TYPE_OPTIONS.map((option) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  style: styles7.addStepMenuItem,
+                  onClick: () => handleAddStep(option.type),
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = option.color;
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  },
+                  children: [
+                    option.icon,
+                    option.label
+                  ]
+                },
+                option.type
+              )) })
+            ] }),
+            !readOnly && flowId && /* @__PURE__ */ jsx(
+              "button",
+              {
+                style: { ...styles7.toolbarButton, ...styles7.toolbarButtonPrimary },
+                onClick: handleSave,
+                disabled: isSaving || !hasUnsavedChanges,
+                onMouseEnter: (e) => {
+                  if (!isSaving && hasUnsavedChanges) {
+                    e.currentTarget.style.backgroundColor = "#4f46e5";
+                  }
+                },
+                onMouseLeave: (e) => {
+                  e.currentTarget.style.backgroundColor = "#6366f1";
+                },
+                children: isSaving ? "Saving..." : "Save"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx(Panel, { position: "top-right", children: /* @__PURE__ */ jsxs("div", { style: styles7.statusPanel, children: [
+            /* @__PURE__ */ jsx("span", { style: styles7.statusBadge(validationResult.isValid), children: validationResult.isValid ? "Valid" : `${validationResult.errors.length} Error(s)` }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              nodes.length,
+              " steps"
+            ] }),
+            isLoading && /* @__PURE__ */ jsx("span", { children: "Loading..." }),
+            error && /* @__PURE__ */ jsxs("span", { style: { color: "#dc2626" }, children: [
+              "Error: ",
+              error.message
+            ] })
+          ] }) })
+        ]
+      }
+    ),
+    showAddMenu && /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 999
+        },
+        onClick: () => setShowAddMenu(false)
+      }
+    )
+  ] });
+}
+function PlusIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  ] });
+}
+function PromptIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("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" }),
+    /* @__PURE__ */ jsx("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" })
+  ] });
+}
+function GlobeIcon2() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }),
+    /* @__PURE__ */ jsx("path", { d: "M2 12h20" })
+  ] });
+}
+function CodeIcon2() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("polyline", { points: "16 18 22 12 16 6" }),
+    /* @__PURE__ */ jsx("polyline", { points: "8 6 2 12 8 18" })
+  ] });
+}
+function BranchIcon() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("line", { x1: "6", y1: "3", x2: "6", y2: "15" }),
+    /* @__PURE__ */ jsx("circle", { cx: "18", cy: "6", r: "3" }),
+    /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "3" }),
+    /* @__PURE__ */ jsx("path", { d: "M18 9a9 9 0 0 1-9 9" })
+  ] });
+}
+function MailIcon2() {
+  return /* @__PURE__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+    /* @__PURE__ */ jsx("rect", { width: "20", height: "16", x: "2", y: "4", rx: "2" }),
+    /* @__PURE__ */ jsx("path", { d: "m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" })
+  ] });
+}
+
+export { BaseNode, CodeNode, ConditionalNode, FetchUrlNode, PromptNode, RuntypeFlowEditor, SUPPORTED_NODE_TYPES, SendEmailNode, autoLayout, centerNodes, cloneStep, createDefaultStep, createEdgesFromNodes, flowStepsToNodes, generateStepId, getDefaultStepName, getNodesBoundingBox, isSupportedNodeType, nodesToFlowSteps, snapToGrid, useFlowValidation, useRuntypeFlow };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map