@runtypelabs/react-flow 1.0.39 → 1.0.40

package/dist/index.mjs

@@ -1,3334 +0,0 @@
-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",
-    crawl: "Crawl Website",
-    "fetch-url": "Fetch URL",
-    "retrieve-record": "Retrieve Record",
-    "get-record": "Get Record",
-    "list-records": "List Records",
-    "api-call": "API Call",
-    "transform-data": "Transform Data",
-    conditional: "Conditional",
-    "set-variable": "Set Variable",
-    "upsert-record": "Upsert Record",
-    "send-email": "Send Email",
-    "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",
-    "paginate-api": "Paginate API",
-    "store-vector": "Store Vector"
-  };
-  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 "crawl":
-      return {
-        ...baseStep,
-        config: {
-          url: "",
-          formats: ["markdown"],
-          render: false,
-          outputVariable: "crawl_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: "{{_flow.id}}@runtype.email",
-          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 steps = Array.isArray(flow.flowSteps) ? flow.flowSteps.map((s) => ({
-          id: s.id,
-          type: s.type,
-          name: s.name ?? "",
-          order: s.order ?? 0,
-          enabled: s.enabled ?? true,
-          config: s.config ?? {}
-        })) : [];
-        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("");
-        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,
-        flowSteps: steps.map((step) => ({
-          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
-        });
-        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, 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: "{{_flow.id}}@runtype.email",
-                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 [, 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 };