@adatechnology/conversations-ui 0.1.0-rc.8 → 0.1.0

package/dist/flows/index.js

@@ -1,279 +1,34 @@
 import {
-  useIsDarkTheme
-} from "../chunk-NV2RZ5KT.js";
+  TooltipLayer
+} from "../chunk-DKPXKQGC.js";
 import {
-  parseWhatsAppFormatting
-} from "../chunk-OGRRHQQW.js";
+  parseWhatsAppFormatting,
+  useIsDarkTheme
+} from "../chunk-WCBDXZ3X.js";
 
 // src/flows/FlowNodeCard.tsx
+import { useState } from "react";
 import { Handle, Position } from "@xyflow/react";
-import { MessageCircleQuestion, GitBranch, Zap, ListTree, Diamond, AlertTriangle, AlertCircle, Headset, Clock3, ShoppingBag } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var NODE_TYPE_COLOR = {
-  question: "border-blue-300 bg-blue-50 dark:bg-blue-950/40 dark:border-blue-800",
-  entrada_choice: "border-purple-300 bg-purple-50 dark:bg-purple-950/40 dark:border-purple-800",
-  action: "border-orange-300 bg-orange-50 dark:bg-orange-950/40 dark:border-orange-800",
-  menu: "border-emerald-300 bg-emerald-50 dark:bg-emerald-950/40 dark:border-emerald-800",
-  condition: "border-cyan-300 bg-cyan-50 dark:bg-cyan-950/40 dark:border-cyan-800"
-};
-var NODE_TYPE_ICON = {
-  question: MessageCircleQuestion,
-  entrada_choice: ListTree,
-  action: Zap,
-  menu: GitBranch,
-  condition: Diamond
-};
-var DEFAULT_ACTION_KIND_ICON = {
-  handoff: Headset,
-  rate_limited_handoff: Clock3,
-  send_product_list: ShoppingBag
-};
-function nodeLabel(node, labels) {
-  if (!node) return "\u2014";
-  if (node.type === "action") {
-    const actionKindLabel = node.actionKind ? labels.actionKindLabels[node.actionKind] : void 0;
-    return node.directMessage || node.fallbackMessage || actionKindLabel || node.actionKind || node.id;
-  }
-  if (node.type === "condition") {
-    if (!node.conditionContextKey || !node.conditionOperator || !node.conditionValue) return node.id;
-    const operatorLabel = labels.conditionOperatorLabels[node.conditionOperator] ?? node.conditionOperator;
-    return `${node.conditionContextKey} ${operatorLabel} ${node.conditionValue}`;
-  }
-  return node.question || node.contextKey || node.id;
-}
-function sourceRows(node, labels) {
-  if (node.type === "action") return [];
-  if (node.type === "condition") {
-    return [
-      { id: "true", label: labels.nodePanel.conditionTrue, isDefault: false },
-      { id: "false", label: labels.nodePanel.conditionFalse, isDefault: false }
-    ];
-  }
-  const isChoice = node.type === "menu" || node.questionType === "choice";
-  if (!isChoice) return [{ id: "next", label: labels.nodePanel.nextRowLabel, isDefault: false }];
-  const options = node.options ?? [];
-  return [
-    ...options.map(([id, label]) => ({ id, label, isDefault: false })),
-    { id: "__default", label: labels.edgeFallbackLabel, isDefault: true }
-  ];
-}
-function SourceRow({ label, isDefault, handleId }) {
-  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-1.5 rounded-md border border-gray-200 dark:border-gray-600 bg-white/70 dark:bg-gray-900/40 px-2 py-1 pr-3", children: [
-    /* @__PURE__ */ jsx("span", { className: `text-xs truncate flex-1 ${isDefault ? "italic text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-200"}`, children: label }),
-    /* @__PURE__ */ jsx(
-      Handle,
-      {
-        type: "source",
-        position: Position.Right,
-        id: handleId,
-        style: { position: "absolute", right: -7, top: "50%", transform: "translateY(-50%)" },
-        className: isDefault ? "!bg-gray-400 dark:!bg-gray-500" : "!bg-purple-500"
-      }
-    )
-  ] });
-}
-function FlowNodeCard({ data }) {
-  const { node, liveCount, isStart, isSelected, issues, labels, actionKindIcons, onSelect } = data;
-  const label = nodeLabel(node, labels);
-  const iconMap = { ...DEFAULT_ACTION_KIND_ICON, ...actionKindIcons };
-  const Icon = node.type === "action" && node.actionKind ? iconMap[node.actionKind] ?? NODE_TYPE_ICON[node.type] : NODE_TYPE_ICON[node.type];
-  const rows = sourceRows(node, labels);
-  const hasError = issues.some((i) => i.severity === "error");
-  const hasWarning = !hasError && issues.some((i) => i.severity === "warning");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      title: label,
-      className: `relative rounded-lg border-2 px-3 py-2 w-60 cursor-pointer shadow-sm hover:shadow-md transition-shadow ${NODE_TYPE_COLOR[node.type]} ${isSelected ? "ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900" : ""}`,
-      onClick: () => onSelect(node.id),
-      children: [
-        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, id: "target", className: "!bg-gray-400 dark:!bg-gray-500" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 text-xs", children: [
-            /* @__PURE__ */ jsx(Icon, { size: 12, strokeWidth: 2.5 }),
-            isStart && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500", title: labels.startNodeTooltip }),
-            labels.legend[node.type]
-          ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            hasError && /* @__PURE__ */ jsx(AlertCircle, { size: 13, className: "text-red-600 dark:text-red-400" }),
-            hasWarning && /* @__PURE__ */ jsx(AlertTriangle, { size: 13, className: "text-amber-500 dark:text-amber-400" }),
-            liveCount > 0 && /* @__PURE__ */ jsx(
-              "span",
-              {
-                title: labels.liveCountTooltip(liveCount),
-                className: "font-bold bg-blue-600 text-white rounded-full px-1.5 py-0.5 text-xs",
-                children: liveCount
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 dark:text-gray-100 mt-1 line-clamp-3", children: label }),
-        rows.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-1", children: rows.map((row) => /* @__PURE__ */ jsx(SourceRow, { label: row.label, isDefault: row.isDefault, handleId: row.id }, row.id)) })
-      ]
-    }
-  );
-}
-var flowNodeTypes = { flowNode: FlowNodeCard };
-
-// src/flows/FlowMapNode.tsx
-import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
-import { GitBranch as GitBranch2, Maximize2 } from "lucide-react";
-
-// src/flows/labels.ts
-var DEFAULT_FLOW_EDITOR_LABELS = {
-  legend: {
-    question: "Pergunta",
-    entrada_choice: "Escolha calculada",
-    action: "A\xE7\xE3o (simula\xE7\xE3o/atendimento)",
-    menu: "Menu",
-    condition: "Condi\xE7\xE3o"
-  },
-  startNodeTooltip: "In\xEDcio do fluxo",
-  liveCountTooltip: (count) => `${count} conversa(s) ativa(s) aqui agora`,
-  edgeFallbackLabel: "outro",
-  actionKindLabels: {
-    handoff: "Encaminhar para atendimento",
-    rate_limited_handoff: "Encaminhar (limite de simula\xE7\xF5es atingido)",
-    send_product_list: "Enviar cat\xE1logo de produtos"
-  },
-  conditionOperatorLabels: {
-    ">": "maior que",
-    ">=": "maior ou igual a",
-    "<": "menor que",
-    "<=": "menor ou igual a",
-    "==": "igual a",
-    "!=": "diferente de",
-    contains: "cont\xE9m"
-  },
-  questionTypeLabels: {
-    text: "Texto livre",
-    money: "Valor em R$",
-    date: "Data",
-    int: "N\xFAmero inteiro",
-    cpf: "CPF",
-    choice: "Escolha (bot\xF5es/lista)"
-  },
-  nodePanel: {
-    title: "Editar n\xF3",
-    contextKey: "Chave (contexto)",
-    questionType: "Tipo de resposta",
-    question: "Texto da pergunta",
-    options: "Op\xE7\xF5es (choice)",
-    addOption: "Adicionar op\xE7\xE3o",
-    optionId: "Valor",
-    optionLabel: "Texto exibido",
-    next: "Pr\xF3ximo n\xF3",
-    nextHint: "Tamb\xE9m \xE9 poss\xEDvel arrastar um fio no canvas para conectar.",
-    nextRowLabel: "Pr\xF3ximo",
-    otherFlowsGroup: "Outros fluxos (salto)",
-    nextByAnswer: (id) => `Se responder "${id}" \u2192`,
-    nextDefault: "Caso contr\xE1rio \u2192",
-    save: "Salvar altera\xE7\xF5es",
-    cancel: "Cancelar",
-    fixedLogicNotice: "Este n\xF3 tem l\xF3gica fixa (valida\xE7\xF5es/c\xE1lculos do sistema) \u2014 s\xF3 o texto e o destino s\xE3o edit\xE1veis.",
-    actionNotice: "N\xF3 de a\xE7\xE3o \u2014 dispara a a\xE7\xE3o registrada ou encaminha para atendimento humano.",
-    preview: "Como o cliente v\xEA no WhatsApp",
-    previewPlaceholder: "Pr\xE9-visualiza\xE7\xE3o\u2026",
-    previewEmptyBody: "(escreva o texto da mensagem)",
-    previewEmptyOption: "(sem texto)",
-    previewListButton: "Ver op\xE7\xF5es",
-    previewModeButtons: "Enviado como bot\xF5es (at\xE9 3 op\xE7\xF5es)",
-    previewModeList: "Enviado como lista (4+ op\xE7\xF5es)",
-    delete: "Excluir n\xF3",
-    deleteConfirm: "Excluir este n\xF3? Liga\xE7\xF5es que apontam para ele ficar\xE3o quebradas.",
-    directMessage: "Mensagem (opcional)",
-    fallbackMessage: "Mensagem de fallback (quando o cat\xE1logo n\xE3o est\xE1 dispon\xEDvel)",
-    conditionNotice: "N\xF3 de condi\xE7\xE3o \u2014 n\xE3o pergunta nada ao cliente, s\xF3 decide automaticamente entre Verdadeiro/Falso.",
-    conditionVariable: "Vari\xE1vel (chave j\xE1 coletada por uma pergunta anterior)",
-    conditionOperator: "Operador",
-    conditionValue: "Valor de compara\xE7\xE3o",
-    conditionTrue: "Se verdadeiro \u2192",
-    conditionFalse: "Se falso \u2192",
-    conditionVariableMissing: "Se a vari\xE1vel ainda n\xE3o foi coletada \u2192"
-  },
-  palette: {
-    title: "Adicionar ao fluxo",
-    question: "Pergunta",
-    decision: "Decis\xE3o",
-    condition: "Condi\xE7\xE3o",
-    conditionHint: "Compara uma vari\xE1vel j\xE1 coletada e segue automaticamente, sem perguntar nada",
-    action: "A\xE7\xE3o"
-  },
-  flowMap: {
-    nodeCount: (count) => `${count} n\xF3(s)`,
-    openFlow: "Abrir fluxo"
-  },
-  flowGroup: {
-    focus: "Focar neste fluxo",
-    close: "Fechar"
-  },
-  crossFlowPortal: {
-    tooltip: "Clique para abrir esse fluxo aqui do lado, ligado ao ponto de onde ele \xE9 chamado",
-    goesTo: (label) => `\u21AA Vai para: ${label}`
-  }
-};
-function mergeFlowEditorLabels(override) {
-  if (!override) return DEFAULT_FLOW_EDITOR_LABELS;
-  return {
-    ...DEFAULT_FLOW_EDITOR_LABELS,
-    ...override,
-    legend: { ...DEFAULT_FLOW_EDITOR_LABELS.legend, ...override.legend },
-    actionKindLabels: { ...DEFAULT_FLOW_EDITOR_LABELS.actionKindLabels, ...override.actionKindLabels },
-    conditionOperatorLabels: {
-      ...DEFAULT_FLOW_EDITOR_LABELS.conditionOperatorLabels,
-      ...override.conditionOperatorLabels
-    },
-    questionTypeLabels: { ...DEFAULT_FLOW_EDITOR_LABELS.questionTypeLabels, ...override.questionTypeLabels },
-    nodePanel: { ...DEFAULT_FLOW_EDITOR_LABELS.nodePanel, ...override.nodePanel },
-    palette: { ...DEFAULT_FLOW_EDITOR_LABELS.palette, ...override.palette },
-    flowMap: { ...DEFAULT_FLOW_EDITOR_LABELS.flowMap, ...override.flowMap },
-    flowGroup: { ...DEFAULT_FLOW_EDITOR_LABELS.flowGroup, ...override.flowGroup },
-    crossFlowPortal: { ...DEFAULT_FLOW_EDITOR_LABELS.crossFlowPortal, ...override.crossFlowPortal }
-  };
-}
-
-// src/flows/FlowMapNode.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function FlowMapNode({ data }) {
-  const { label, nodeCount, isRoot, labels = DEFAULT_FLOW_EDITOR_LABELS, onOpen } = data;
-  return /* @__PURE__ */ jsxs2("div", { className: "relative rounded-xl border-2 border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 px-4 py-3 w-56 shadow-sm", children: [
-    /* @__PURE__ */ jsx2(Handle2, { type: "target", position: Position2.Top, className: "!bg-gray-400 dark:!bg-gray-500" }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-emerald-700 dark:text-emerald-300", children: [
-      /* @__PURE__ */ jsx2(GitBranch2, { size: 14 }),
-      /* @__PURE__ */ jsx2("span", { className: "text-sm font-semibold truncate", children: label }),
-      isRoot && /* @__PURE__ */ jsx2("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0", title: labels.startNodeTooltip })
-    ] }),
-    /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.flowMap.nodeCount(nodeCount) }),
-    /* @__PURE__ */ jsxs2(
-      "button",
-      {
-        type: "button",
-        onClick: onOpen,
-        className: "mt-2 inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline",
-        children: [
-          /* @__PURE__ */ jsx2(Maximize2, { size: 11 }),
-          " ",
-          labels.flowMap.openFlow
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx2(Handle2, { type: "source", position: Position2.Bottom, className: "!bg-gray-400 dark:!bg-gray-500" })
-  ] });
-}
-var flowMapNodeTypes = { flowMapNode: FlowMapNode };
-
-// src/flows/FlowMapCanvas.tsx
-import { useMemo } from "react";
-import { ReactFlow, Background, Controls, MarkerType } from "@xyflow/react";
-import "@xyflow/react/dist/style.css";
+import {
+  MessageCircleQuestion,
+  Plus,
+  GitBranch,
+  Zap,
+  ListTree,
+  Diamond,
+  AlertTriangle,
+  AlertCircle,
+  Headset,
+  Clock3,
+  ShoppingBag,
+  RotateCcw
+} from "lucide-react";
 
 // src/flows/flowGraph.ts
+import { FLOW_ACTION_KIND } from "@adatechnology/meta-whatsapp-contracts";
 var CONDITION_OPERATORS = [">", ">=", "<", "<=", "==", "!=", "contains"];
-var BUILT_IN_ACTION_KINDS = {
-  HANDOFF: "handoff",
-  RATE_LIMITED_HANDOFF: "rate_limited_handoff",
-  SEND_PRODUCT_LIST: "send_product_list"
-};
+var BUILT_IN_ACTION_KINDS = FLOW_ACTION_KIND;
+var PASS_THROUGH_ACTION_KINDS = ["send_media"];
 var CROSS_FLOW_PREFIX = "flow:";
 var isCrossFlowTarget = (target) => target.startsWith(CROSS_FLOW_PREFIX);
 var crossFlowKey = (target) => target.slice(CROSS_FLOW_PREFIX.length);
@@ -283,7 +38,10 @@ function estimateNodeHeight(node) {
   const BODY_HEIGHT = 56;
   const PADDING = 16;
   const ROW_HEIGHT = 34;
-  const rowCount = node.type === "action" ? 0 : node.type === "condition" ? 2 : node.type === "menu" || node.questionType === "choice" ? (node.options?.length ?? 0) + 1 : 1;
+  const rowCount = node.type === "action" ? (
+    // Ação de passagem desenha uma linha de saída; terminal não desenha nenhuma.
+    node.actionKind && PASS_THROUGH_ACTION_KINDS.includes(node.actionKind) ? 1 : 0
+  ) : node.type === "condition" ? 2 : node.type === "menu" || node.questionType === "choice" ? (node.options?.length ?? 0) + 1 : 1;
   return HEADER_HEIGHT + BODY_HEIGHT + PADDING + rowCount * ROW_HEIGHT;
 }
 var WHATSAPP_LIMITS = {
@@ -389,45 +147,34 @@ function findUnreachable(graph) {
   }
   return Object.keys(graph.nodes).filter((id) => !reachable.has(id));
 }
-function computeAutoLayout(graph) {
-  const H_GAP = 300;
-  const V_GAP = 90;
-  const rank = {};
-  const queue = [graph.startNodeId];
-  rank[graph.startNodeId] = 0;
-  while (queue.length > 0) {
-    const id = queue.shift();
-    const node = graph.nodes[id];
-    if (!node) continue;
-    for (const { target } of targetsOf(node)) {
-      if (isCrossFlowTarget(target) || !graph.nodes[target]) continue;
-      if (rank[target] === void 0) {
-        rank[target] = rank[id] + 1;
-        queue.push(target);
-      }
-    }
-  }
-  const maxRank = Math.max(0, ...Object.values(rank));
-  let strayRank = maxRank + 1;
-  for (const id of Object.keys(graph.nodes)) {
-    if (rank[id] === void 0) rank[id] = strayRank++;
+var LAYOUT_COLUMN_GAP = 300;
+var LAYOUT_ROW_GAP = 40;
+function cascadeOrder(params) {
+  const placed = /* @__PURE__ */ new Map();
+  function visit(id, depth) {
+    if (placed.has(id)) return;
+    placed.set(id, { depth, order: placed.size });
+    for (const next of params.forwardEdges(id)) visit(next, depth + 1);
   }
-  const layers = {};
-  for (const [id, r] of Object.entries(rank)) {
-    layers[r] = [...layers[r] ?? [], id];
+  if (params.allIds.includes(params.rootId)) visit(params.rootId, 0);
+  const strayDepth = Math.max(0, ...[...placed.values()].map((each) => each.depth)) + 1;
+  for (const id of params.allIds) {
+    if (!placed.has(id)) placed.set(id, { depth: strayDepth, order: placed.size });
   }
+  return placed;
+}
+function computeAutoLayout(graph) {
+  const placed = cascadeOrder({
+    rootId: graph.startNodeId,
+    allIds: Object.keys(graph.nodes),
+    forwardEdges: (id) => targetsOf(graph.nodes[id] ?? { id, type: "action" }).map((edge) => edge.target).filter((target) => !isCrossFlowTarget(target) && Boolean(graph.nodes[target]))
+  });
+  const byOrder = [...placed.entries()].sort((a, b) => a[1].order - b[1].order);
   const positions = {};
-  const sortedRanks = Object.keys(layers).map(Number).sort((a, b) => a - b);
-  let cumulativeY = 0;
-  for (const r of sortedRanks) {
-    const ids = layers[r];
-    const width = (ids.length - 1) * H_GAP;
-    let maxHeight = 0;
-    ids.forEach((id, index) => {
-      maxHeight = Math.max(maxHeight, estimateNodeHeight(graph.nodes[id]));
-      positions[id] = { x: index * H_GAP - width / 2, y: cumulativeY };
-    });
-    cumulativeY += maxHeight + V_GAP;
+  let cursorY = 0;
+  for (const [id, { depth }] of byOrder) {
+    positions[id] = { x: depth * LAYOUT_COLUMN_GAP, y: cursorY };
+    cursorY += estimateNodeHeight(graph.nodes[id]) + LAYOUT_ROW_GAP;
   }
   return positions;
 }
@@ -518,29 +265,497 @@ function slugifyNodeId(label, existing) {
   return candidate;
 }
 
-// src/flows/FlowMapCanvas.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var MAP_NODE_TYPES = { ...flowMapNodeTypes };
-var EDGE_COLOR = "#06b6d4";
-var BACKGROUND_COLOR_LIGHT = "#cbd5e1";
-var BACKGROUND_COLOR_DARK = "#334155";
-function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride }) {
+// src/flows/FlowNodeCard.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var HANDLE_SIZE_PX = 14;
+var NODE_TYPE_COLOR = {
+  question: "border-blue-300 bg-blue-50 dark:bg-blue-950/40 dark:border-blue-800",
+  entrada_choice: "border-purple-300 bg-purple-50 dark:bg-purple-950/40 dark:border-purple-800",
+  action: "border-orange-300 bg-orange-50 dark:bg-orange-950/40 dark:border-orange-800",
+  menu: "border-emerald-300 bg-emerald-50 dark:bg-emerald-950/40 dark:border-emerald-800",
+  condition: "border-cyan-300 bg-cyan-50 dark:bg-cyan-950/40 dark:border-cyan-800"
+};
+var NODE_TYPE_ICON = {
+  question: MessageCircleQuestion,
+  entrada_choice: ListTree,
+  action: Zap,
+  menu: GitBranch,
+  condition: Diamond
+};
+var DEFAULT_ACTION_KIND_ICON = {
+  handoff: Headset,
+  rate_limited_handoff: Clock3,
+  send_product_list: ShoppingBag
+};
+function nodeLabel(node, labels) {
+  if (!node) return "\u2014";
+  if (node.label) return node.label;
+  if (node.type === "action") {
+    const actionKindLabel = node.actionKind ? labels.actionKindLabels[node.actionKind] : void 0;
+    return node.directMessage || node.fallbackMessage || actionKindLabel || node.actionKind || node.id;
+  }
+  if (node.type === "condition") {
+    if (!node.conditionContextKey || !node.conditionOperator || !node.conditionValue) return node.id;
+    const operatorLabel = labels.conditionOperatorLabels[node.conditionOperator] ?? node.conditionOperator;
+    return `${node.conditionContextKey} ${operatorLabel} ${node.conditionValue}`;
+  }
+  return node.question || node.contextKey || node.id;
+}
+function selfLoopHandles(node) {
+  const loops = /* @__PURE__ */ new Set();
+  if (typeof node.next === "string") {
+    if (node.next === node.id) loops.add("next");
+    return loops;
+  }
+  if (!node.next) return loops;
+  for (const [optionId, target] of Object.entries(node.next.byAnswer ?? {})) {
+    if (target === node.id) loops.add(optionId);
+  }
+  if (node.next.default === node.id) loops.add("__default");
+  return loops;
+}
+function sourceRows(node, labels) {
+  if (node.type === "action") {
+    return node.actionKind && PASS_THROUGH_ACTION_KINDS.includes(node.actionKind) ? [{ id: "next", label: labels.nodePanel.nextRowLabel, isDefault: false, isSelfLoop: false }] : [];
+  }
+  const loops = selfLoopHandles(node);
+  if (node.type === "condition") {
+    return [
+      { id: "true", label: labels.nodePanel.conditionTrue, isDefault: false, isSelfLoop: loops.has("true") },
+      { id: "false", label: labels.nodePanel.conditionFalse, isDefault: false, isSelfLoop: loops.has("false") }
+    ];
+  }
+  const isChoice = node.type === "menu" || node.questionType === "choice";
+  if (!isChoice)
+    return [{ id: "next", label: labels.nodePanel.nextRowLabel, isDefault: false, isSelfLoop: loops.has("next") }];
+  const options = node.options ?? [];
+  return [
+    ...options.map(([id, label]) => ({ id, label, isDefault: false, isSelfLoop: loops.has(id) })),
+    { id: "__default", label: labels.edgeFallbackLabel, isDefault: true, isSelfLoop: loops.has("__default") }
+  ];
+}
+function SourceRow({
+  label,
+  isDefault,
+  handleId,
+  addLabel,
+  isSelfLoop,
+  selfLoopLabel,
+  onQuickAdd
+}) {
+  const [hovered, setHovered] = useState(false);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `relative ${onQuickAdd ? "pr-9" : ""}`,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-1.5 rounded-md border border-gray-200 dark:border-gray-600 bg-white/70 dark:bg-gray-900/40 px-2 py-1 pr-3", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-xs truncate flex-1 ${isDefault ? "italic text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-200"}`,
+              children: label
+            }
+          ),
+          isSelfLoop && /* @__PURE__ */ jsx(
+            RotateCcw,
+            {
+              size: 12,
+              strokeWidth: 2.5,
+              "data-cv-tooltip": selfLoopLabel,
+              "aria-label": selfLoopLabel,
+              className: "shrink-0 text-gray-400 dark:text-gray-500"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Handle,
+            {
+              type: "source",
+              position: Position.Right,
+              id: handleId,
+              style: {
+                position: "absolute",
+                right: -(HANDLE_SIZE_PX / 2 + 1),
+                top: "50%",
+                transform: "translateY(-50%)",
+                width: HANDLE_SIZE_PX,
+                height: HANDLE_SIZE_PX
+              },
+              className: `!border-2 !border-white dark:!border-gray-800 ${isDefault ? "!bg-gray-400 dark:!bg-gray-500" : "!bg-purple-500"}`
+            }
+          )
+        ] }),
+        onQuickAdd && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-cv-tooltip": addLabel,
+            "aria-label": addLabel,
+            onClick: (event) => {
+              event.stopPropagation();
+              const rect = event.currentTarget.getBoundingClientRect();
+              onQuickAdd({ handle: handleId, anchor: { x: rect.right, y: rect.top } });
+            },
+            style: { opacity: hovered ? 1 : 0.35 },
+            className: "nodrag absolute right-0 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full border border-blue-300 bg-white text-blue-600 shadow-sm transition-opacity hover:bg-blue-50 dark:border-blue-700 dark:bg-gray-800 dark:text-blue-400 dark:hover:bg-gray-700",
+            children: /* @__PURE__ */ jsx(Plus, { size: 12, strokeWidth: 3 })
+          }
+        )
+      ]
+    }
+  );
+}
+function FlowNodeCard({ data }) {
+  const { node, liveCount, isStart, isSelected, isDetached, issues, labels, actionKindIcons, onSelect, onQuickAdd } = data;
+  const label = nodeLabel(node, labels);
+  const iconMap = { ...DEFAULT_ACTION_KIND_ICON, ...actionKindIcons };
+  const Icon = node.type === "action" && node.actionKind ? iconMap[node.actionKind] ?? NODE_TYPE_ICON[node.type] : NODE_TYPE_ICON[node.type];
+  const rows = sourceRows(node, labels);
+  const nodeIssues = issues.filter((issue) => issue.nodeId === node.id);
+  const errors = nodeIssues.filter((issue) => issue.severity === "error");
+  const warnings = nodeIssues.filter((issue) => issue.severity === "warning");
+  const hasError = errors.length > 0;
+  const hasWarning = !hasError && warnings.length > 0;
+  const issueTooltip = (hasError ? errors : warnings).map((issue) => issue.message).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-cv-tooltip": isDetached ? labels.detachedNodeTooltip : label,
+      className: `relative rounded-lg border-2 px-3 py-2 w-60 cursor-pointer shadow-sm hover:shadow-md transition-shadow ${NODE_TYPE_COLOR[node.type]} ${isSelected ? "ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900" : ""} ${isDetached ? "border-dashed !border-amber-400 animate-pulse" : ""}`,
+      onClick: () => onSelect(node.id),
+      children: [
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            type: "target",
+            position: Position.Top,
+            id: "target",
+            style: { width: HANDLE_SIZE_PX, height: HANDLE_SIZE_PX },
+            className: "!bg-gray-400 !border-2 !border-white dark:!bg-gray-500 dark:!border-gray-800"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 text-xs", children: [
+            /* @__PURE__ */ jsx(Icon, { size: 12, strokeWidth: 2.5 }),
+            isStart && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500", "data-cv-tooltip": labels.startNodeTooltip }),
+            labels.legend[node.type]
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            hasError && /* @__PURE__ */ jsx(
+              AlertCircle,
+              {
+                size: 13,
+                "data-cv-tooltip": issueTooltip,
+                "aria-label": issueTooltip,
+                className: "text-red-600 dark:text-red-400"
+              }
+            ),
+            hasWarning && /* @__PURE__ */ jsx(
+              AlertTriangle,
+              {
+                size: 13,
+                "data-cv-tooltip": issueTooltip,
+                "aria-label": issueTooltip,
+                className: "text-amber-500 dark:text-amber-400"
+              }
+            ),
+            liveCount > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-cv-tooltip": labels.liveCountTooltip(liveCount),
+                className: "font-bold bg-blue-600 text-white rounded-full px-1.5 py-0.5 text-xs",
+                children: liveCount
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 dark:text-gray-100 mt-1 line-clamp-3", children: label }),
+        rows.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-1", children: rows.map((row) => /* @__PURE__ */ jsx(
+          SourceRow,
+          {
+            label: row.label,
+            isDefault: row.isDefault,
+            handleId: row.id,
+            addLabel: labels.quickAdd.fromHandle,
+            isSelfLoop: row.isSelfLoop,
+            selfLoopLabel: labels.legendPanel.selfLoop,
+            ...onQuickAdd ? { onQuickAdd: (params) => onQuickAdd({ nodeId: node.id, ...params }) } : {}
+          },
+          row.id
+        )) })
+      ]
+    }
+  );
+}
+var flowNodeTypes = { flowNode: FlowNodeCard };
+
+// src/flows/FlowMapNode.tsx
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import { GitBranch as GitBranch2, Maximize2 } from "lucide-react";
+
+// src/flows/labels.ts
+var DEFAULT_FLOW_EDITOR_LABELS = {
+  legend: {
+    question: "Pergunta",
+    entrada_choice: "Escolha calculada",
+    action: "A\xE7\xE3o (simula\xE7\xE3o/atendimento)",
+    menu: "Menu",
+    condition: "Condi\xE7\xE3o"
+  },
+  startNodeTooltip: "In\xEDcio do fluxo",
+  detachedNodeTooltip: "Sem liga\xE7\xE3o de entrada \u2014 o bot n\xE3o chega neste n\xF3. Puxe um fio de outro card at\xE9 ele.",
+  liveCountTooltip: (count) => `${count} conversa(s) ativa(s) aqui agora`,
+  edgeFallbackLabel: "outro",
+  actionKindLabels: {
+    handoff: "Encaminhar para atendimento",
+    rate_limited_handoff: "Encaminhar (limite de simula\xE7\xF5es atingido)",
+    send_product_list: "Enviar cat\xE1logo de produtos",
+    send_media: "Enviar arquivos da biblioteca"
+  },
+  conditionOperatorLabels: {
+    ">": "maior que",
+    ">=": "maior ou igual a",
+    "<": "menor que",
+    "<=": "menor ou igual a",
+    "==": "igual a",
+    "!=": "diferente de",
+    contains: "cont\xE9m"
+  },
+  questionTypeLabels: {
+    text: "Texto livre",
+    money: "Valor em R$",
+    date: "Data",
+    int: "N\xFAmero inteiro",
+    cpf: "CPF",
+    choice: "Escolha (bot\xF5es/lista)"
+  },
+  nodePanel: {
+    title: "Editar n\xF3",
+    contextKey: "Chave (contexto)",
+    nodeName: "Nome do n\xF3 (opcional)",
+    nodeNamePlaceholder: "Ex.: Enviar tabela de pre\xE7os",
+    nodeNameHint: "S\xF3 aparece no editor \u2014 o cliente n\xE3o v\xEA.",
+    questionType: "Tipo de resposta",
+    question: "Texto da pergunta",
+    options: "Op\xE7\xF5es (choice)",
+    addOption: "Adicionar op\xE7\xE3o",
+    removeOption: "Remover op\xE7\xE3o",
+    close: "Fechar painel",
+    optionId: "Valor",
+    optionLabel: "Texto exibido",
+    next: "Pr\xF3ximo n\xF3",
+    nextHint: "Tamb\xE9m \xE9 poss\xEDvel arrastar um fio no canvas para conectar.",
+    nextRowLabel: "Pr\xF3ximo",
+    otherFlowsGroup: "Outros fluxos (salto)",
+    nextByAnswer: (id) => `Se responder "${id}" \u2192`,
+    nextDefault: "Caso contr\xE1rio \u2192",
+    save: "Salvar altera\xE7\xF5es",
+    cancel: "Cancelar",
+    fixedLogicNotice: "Este n\xF3 tem l\xF3gica fixa (valida\xE7\xF5es/c\xE1lculos do sistema) \u2014 s\xF3 o texto e o destino s\xE3o edit\xE1veis.",
+    actionNotice: "N\xF3 de a\xE7\xE3o \u2014 dispara a a\xE7\xE3o registrada ou encaminha para atendimento humano.",
+    preview: "Como o cliente v\xEA no WhatsApp",
+    previewPlaceholder: "Pr\xE9-visualiza\xE7\xE3o\u2026",
+    previewEmptyBody: "(escreva o texto da mensagem)",
+    previewEmptyOption: "(sem texto)",
+    previewListButton: "Ver op\xE7\xF5es",
+    previewModeButtons: "Enviado como bot\xF5es (at\xE9 3 op\xE7\xF5es)",
+    previewModeList: "Enviado como lista (4+ op\xE7\xF5es)",
+    delete: "Excluir n\xF3",
+    deleteConfirm: "Excluir este n\xF3? Liga\xE7\xF5es que apontam para ele ficar\xE3o quebradas.",
+    directMessage: "Mensagem (opcional)",
+    fallbackMessage: "Mensagem de fallback (quando o cat\xE1logo n\xE3o est\xE1 dispon\xEDvel)",
+    conditionNotice: "N\xF3 de condi\xE7\xE3o \u2014 n\xE3o pergunta nada ao cliente, s\xF3 decide automaticamente entre Verdadeiro/Falso.",
+    conditionVariable: "Vari\xE1vel (chave j\xE1 coletada por uma pergunta anterior)",
+    conditionOperator: "Operador",
+    conditionValue: "Valor de compara\xE7\xE3o",
+    conditionTrue: "Se verdadeiro \u2192",
+    conditionFalse: "Se falso \u2192",
+    conditionVariableMissing: "Se a vari\xE1vel ainda n\xE3o foi coletada \u2192",
+    media: "Arquivos enviados neste ponto",
+    mediaUnavailable: "A biblioteca de arquivos n\xE3o est\xE1 dispon\xEDvel neste painel."
+  },
+  quickAdd: {
+    fromHandle: "Criar o pr\xF3ximo n\xF3 j\xE1 ligado aqui",
+    title: "Ligar em um n\xF3 novo",
+    disconnect: "Desligar este fio (o n\xF3 continua no fluxo)"
+  },
+  legendPanel: {
+    title: "Legenda",
+    nodes: "Cards",
+    connections: "Liga\xE7\xF5es",
+    linear: "Segue direto para o pr\xF3ximo",
+    branch: "Caminho de uma op\xE7\xE3o escolhida",
+    fallback: "Quando a resposta n\xE3o casa com nenhuma op\xE7\xE3o",
+    crossFlow: "Salta para outro fluxo",
+    live: "Tem conversa passando por aqui agora",
+    selfLoop: "Volta ao mesmo card \u2014 repete a pergunta",
+    detached: "Ningu\xE9m aponta para este card: o bot n\xE3o chega nele",
+    startNode: "Onde o fluxo come\xE7a"
+  },
+  palette: {
+    title: "Adicionar ao fluxo",
+    question: "Pergunta",
+    decision: "Decis\xE3o",
+    condition: "Condi\xE7\xE3o",
+    conditionHint: "Compara uma vari\xE1vel j\xE1 coletada e segue automaticamente, sem perguntar nada",
+    action: "A\xE7\xE3o"
+  },
+  flowMap: {
+    nodeCount: (count) => `${count} n\xF3(s)`,
+    openFlow: "Abrir fluxo",
+    toggleToMap: "Mapa de fluxos",
+    toggleToDetail: "Voltar ao editor"
+  },
+  flowGroup: {
+    focus: "Focar neste fluxo",
+    close: "Fechar"
+  },
+  crossFlowPortal: {
+    tooltip: "Clique para abrir esse fluxo aqui do lado, ligado ao ponto de onde ele \xE9 chamado",
+    goesTo: (label) => `\u21AA Vai para: ${label}`
+  },
+  collectionChain: {
+    feeds: (label) => `Alimenta: ${label}`
+  },
+  validation: {
+    title: "Antes de publicar",
+    errors: (count) => `${count} erro(s) \u2014 corrija antes de salvar`,
+    warnings: (count) => `${count} aviso(s)`,
+    noStart: "O fluxo precisa de um n\xF3 inicial v\xE1lido.",
+    brokenRef: (from, to) => `N\xF3 "${from}": liga\xE7\xE3o aponta para "${to}", que n\xE3o existe.`,
+    choiceWithoutOptions: (id) => `N\xF3 "${id}": escolha sem nenhuma op\xE7\xE3o.`,
+    duplicatedOptionId: (id, optionId) => `N\xF3 "${id}": valor de op\xE7\xE3o "${optionId}" duplicado.`,
+    optionWithoutTarget: (id, label) => `N\xF3 "${id}": op\xE7\xE3o "${label}" n\xE3o tem destino definido.`,
+    tooManyOptions: (id, count) => `N\xF3 "${id}": ${count} op\xE7\xF5es \u2014 o WhatsApp aceita no m\xE1ximo 10 em lista.`,
+    buttonTitleTooLong: (id, label) => `N\xF3 "${id}": bot\xE3o "${label}" passa de 20 caracteres.`,
+    listTitleTooLong: (id, label) => `N\xF3 "${id}": item de lista "${label}" passa de 24 caracteres.`,
+    bodyTooLong: (id) => `N\xF3 "${id}": texto passa de 1024 caracteres.`,
+    unreachable: (id) => `N\xF3 "${id}" \xE9 inalcan\xE7\xE1vel a partir do in\xEDcio do fluxo.`,
+    deadEndQuestion: (id) => `N\xF3 "${id}": pergunta sem pr\xF3ximo passo definido.`,
+    conditionIncomplete: (id) => `N\xF3 "${id}": condi\xE7\xE3o incompleta \u2014 defina vari\xE1vel, operador e valor.`,
+    conditionBranchMissing: (id, branch) => `N\xF3 "${id}": ramo "${branch === "true" ? "Verdadeiro" : "Falso"}" sem destino definido.`
+  },
+  workspace: {
+    title: "Fluxos do Bot",
+    subtitle: "Blueprint visual dos fluxos de conversa, sincronizado com o que est\xE1 em produ\xE7\xE3o.",
+    loading: "Carregando fluxos\u2026",
+    loadError: "N\xE3o foi poss\xEDvel carregar os fluxos.",
+    saveGraph: "Publicar altera\xE7\xF5es",
+    saving: "Publicando\u2026",
+    saveSuccess: "Fluxo publicado! O bot j\xE1 est\xE1 usando a vers\xE3o nova.",
+    saveError: "N\xE3o foi poss\xEDvel salvar \u2014 verifique se todos os destinos apontam para n\xF3s existentes.",
+    organize: "Organizar",
+    organizeTooltip: "Reorganiza os n\xF3s automaticamente e salva as novas posi\xE7\xF5es",
+    discardChanges: "Desfazer altera\xE7\xF5es",
+    discardTooltip: "Devolve os fluxos abertos ao que est\xE1 publicado, descartando o que n\xE3o foi salvo",
+    discardConfirm: "Descartar todas as altera\xE7\xF5es n\xE3o publicadas e voltar ao fluxo que est\xE1 no ar?",
+    unsavedChangesConfirm: "Voc\xEA tem altera\xE7\xF5es n\xE3o publicadas neste fluxo. Trocar de fluxo agora descarta essas edi\xE7\xF5es. Continuar?"
+  },
+  flowManager: {
+    newFlow: "Novo fluxo",
+    createTitle: "Criar novo fluxo",
+    key: "Identificador \xFAnico",
+    keyHint: "letras min\xFAsculas, n\xFAmeros e _ (ex.: promocoes_semana)",
+    keyInvalid: "Use apenas letras min\xFAsculas, n\xFAmeros e _ (2 a 40 caracteres)",
+    label: "Nome exibido",
+    showInMenu: "Exibir como op\xE7\xE3o no menu principal do bot",
+    menuOptionLabel: "Texto da op\xE7\xE3o no menu",
+    create: "Criar fluxo",
+    creating: "Criando\u2026",
+    deleteFlow: "Excluir fluxo",
+    deleteConfirm: (label) => `Excluir o fluxo "${label}"? Esta a\xE7\xE3o n\xE3o pode ser desfeita.`,
+    createError: "N\xE3o foi poss\xEDvel criar o fluxo.",
+    deleteError: "N\xE3o foi poss\xEDvel excluir o fluxo."
+  }
+};
+function mergeFlowEditorLabels(override) {
+  if (!override) return DEFAULT_FLOW_EDITOR_LABELS;
+  return {
+    ...DEFAULT_FLOW_EDITOR_LABELS,
+    ...override,
+    legend: { ...DEFAULT_FLOW_EDITOR_LABELS.legend, ...override.legend },
+    actionKindLabels: { ...DEFAULT_FLOW_EDITOR_LABELS.actionKindLabels, ...override.actionKindLabels },
+    conditionOperatorLabels: {
+      ...DEFAULT_FLOW_EDITOR_LABELS.conditionOperatorLabels,
+      ...override.conditionOperatorLabels
+    },
+    questionTypeLabels: { ...DEFAULT_FLOW_EDITOR_LABELS.questionTypeLabels, ...override.questionTypeLabels },
+    nodePanel: { ...DEFAULT_FLOW_EDITOR_LABELS.nodePanel, ...override.nodePanel },
+    quickAdd: { ...DEFAULT_FLOW_EDITOR_LABELS.quickAdd, ...override.quickAdd },
+    legendPanel: { ...DEFAULT_FLOW_EDITOR_LABELS.legendPanel, ...override.legendPanel },
+    palette: { ...DEFAULT_FLOW_EDITOR_LABELS.palette, ...override.palette },
+    flowMap: { ...DEFAULT_FLOW_EDITOR_LABELS.flowMap, ...override.flowMap },
+    flowGroup: { ...DEFAULT_FLOW_EDITOR_LABELS.flowGroup, ...override.flowGroup },
+    crossFlowPortal: { ...DEFAULT_FLOW_EDITOR_LABELS.crossFlowPortal, ...override.crossFlowPortal },
+    collectionChain: { ...DEFAULT_FLOW_EDITOR_LABELS.collectionChain, ...override.collectionChain },
+    validation: { ...DEFAULT_FLOW_EDITOR_LABELS.validation, ...override.validation },
+    workspace: { ...DEFAULT_FLOW_EDITOR_LABELS.workspace, ...override.workspace },
+    flowManager: { ...DEFAULT_FLOW_EDITOR_LABELS.flowManager, ...override.flowManager }
+  };
+}
+
+// src/flows/FlowMapNode.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FlowMapNode({ data }) {
+  const { label, nodeCount, isRoot, labels = DEFAULT_FLOW_EDITOR_LABELS, onOpen } = data;
+  return /* @__PURE__ */ jsxs2("div", { className: "relative rounded-xl border-2 border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 px-4 py-3 w-56 shadow-sm", children: [
+    /* @__PURE__ */ jsx2(Handle2, { type: "target", position: Position2.Top, className: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-emerald-700 dark:text-emerald-300", children: [
+      /* @__PURE__ */ jsx2(GitBranch2, { size: 14 }),
+      /* @__PURE__ */ jsx2("span", { className: "text-sm font-semibold truncate", children: label }),
+      isRoot && /* @__PURE__ */ jsx2("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0", "data-cv-tooltip": labels.startNodeTooltip })
+    ] }),
+    /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.flowMap.nodeCount(nodeCount) }),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        "data-cv-tooltip": labels.flowMap.openFlow,
+        "aria-label": labels.flowMap.openFlow,
+        type: "button",
+        onClick: onOpen,
+        className: "mt-2 inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline",
+        children: [
+          /* @__PURE__ */ jsx2(Maximize2, { size: 11 }),
+          " ",
+          labels.flowMap.openFlow
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(Handle2, { type: "source", position: Position2.Bottom, className: "!bg-gray-400 dark:!bg-gray-500" })
+  ] });
+}
+var flowMapNodeTypes = { flowMapNode: FlowMapNode };
+
+// src/flows/FlowMapCanvas.tsx
+import { useMemo } from "react";
+import { ReactFlow, Background, Controls, MarkerType } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var MAP_NODE_TYPES = { ...flowMapNodeTypes };
+var EDGE_COLOR = "#06b6d4";
+var BACKGROUND_COLOR_LIGHT = "#cbd5e1";
+var BACKGROUND_COLOR_DARK = "#334155";
+function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride }) {
   const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
   const isDark = useIsDarkTheme();
   const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey]);
   const nodes = useMemo(
-    () => Object.values(graphs).map((g) => ({
-      id: g.key,
-      type: "flowMapNode",
-      position: positions[g.key] ?? { x: 0, y: 0 },
-      data: {
-        label: g.label,
-        nodeCount: Object.keys(g.nodes).length,
-        isRoot: g.key === rootKey,
-        labels,
-        onOpen: () => onOpenFlow(g.key)
-      }
-    })),
+    () => Object.values(graphs).map(
+      (g) => ({
+        id: g.key,
+        type: "flowMapNode",
+        position: positions[g.key] ?? { x: 0, y: 0 },
+        data: {
+          label: g.label,
+          nodeCount: Object.keys(g.nodes).length,
+          isRoot: g.key === rootKey,
+          labels,
+          onOpen: () => onOpenFlow(g.key)
+        }
+      })
+    ),
     [graphs, positions, rootKey, onOpenFlow, labels]
   );
   const edges = useMemo(() => {
@@ -592,8 +807,28 @@ function FlowGroupHeader({ data }) {
   const { label, labels = DEFAULT_FLOW_EDITOR_LABELS, onFocus, onClose } = data;
   return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-full border border-cyan-300 dark:border-cyan-700 bg-cyan-50 dark:bg-cyan-950/50 px-3 py-1 text-xs font-medium text-cyan-800 dark:text-cyan-200 shadow-sm whitespace-nowrap", children: [
     /* @__PURE__ */ jsx5("span", { children: label }),
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: onFocus, title: labels.flowGroup.focus, className: "hover:text-blue-600 dark:hover:text-blue-400", children: /* @__PURE__ */ jsx5(Maximize22, { size: 12 }) }),
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: onClose, title: labels.flowGroup.close, className: "hover:text-red-600 dark:hover:text-red-400", children: /* @__PURE__ */ jsx5(X, { size: 12 }) })
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onFocus,
+        "data-cv-tooltip": labels.flowGroup.focus,
+        "aria-label": labels.flowGroup.focus,
+        className: "hover:text-blue-600 dark:hover:text-blue-400",
+        children: /* @__PURE__ */ jsx5(Maximize22, { size: 12 })
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        "data-cv-tooltip": labels.flowGroup.close,
+        "aria-label": labels.flowGroup.close,
+        className: "hover:text-red-600 dark:hover:text-red-400",
+        children: /* @__PURE__ */ jsx5(X, { size: 12 })
+      }
+    )
   ] });
 }
 var flowGroupHeaderNodeTypes = { flowGroupHeader: FlowGroupHeader };
@@ -608,7 +843,8 @@ function FlowPortalNode({ data }) {
     "button",
     {
       type: "button",
-      title: labels.crossFlowPortal.tooltip,
+      "data-cv-tooltip": labels.crossFlowPortal.tooltip,
+      "aria-label": labels.crossFlowPortal.tooltip,
       onClick: onNavigate,
       className: "relative flex items-center gap-1.5 rounded-full border-2 border-dashed border-cyan-400 dark:border-cyan-600 bg-cyan-50 dark:bg-cyan-950/40 px-3 py-1.5 text-xs font-medium text-cyan-700 dark:text-cyan-300 hover:bg-cyan-100 dark:hover:bg-cyan-950/70 transition-colors cursor-pointer",
       children: [
@@ -622,23 +858,206 @@ function FlowPortalNode({ data }) {
 var flowPortalNodeTypes = { flowPortal: FlowPortalNode };
 
 // src/flows/FlowPalette.tsx
-import { useEffect, useRef, useState } from "react";
-import { Plus, MessageCircleQuestion as MessageCircleQuestion2, GitBranch as GitBranch3, Zap as Zap2, Diamond as Diamond2, ChevronRight } from "lucide-react";
-import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useRef, useState as useState2 } from "react";
+import { Plus as Plus2, MessageCircleQuestion as MessageCircleQuestion2, GitBranch as GitBranch3, Zap as Zap2, Diamond as Diamond2, ChevronRight } from "lucide-react";
+
+// src/flows/flowMenuPlacement.ts
+var DEFAULT_GAP = 4;
+var DEFAULT_MARGIN = 8;
+function clamp(value, minimum, maximum) {
+  return Math.max(minimum, Math.min(value, Math.max(minimum, maximum)));
+}
+function placeFloatingPanel({
+  anchor,
+  panel,
+  viewport,
+  prefer,
+  gap = DEFAULT_GAP,
+  margin = DEFAULT_MARGIN
+}) {
+  const maxHeight = Math.min(panel.height, viewport.height - margin * 2);
+  let left;
+  if (prefer === "side") {
+    const toTheRight = anchor.right + gap;
+    const toTheLeft = anchor.left - gap - panel.width;
+    left = toTheRight + panel.width <= viewport.width - margin ? toTheRight : toTheLeft;
+  } else {
+    left = anchor.left + gap;
+  }
+  left = clamp(left, margin, viewport.width - margin - panel.width);
+  const top = prefer === "side" ? anchor.top : anchor.bottom;
+  return {
+    left,
+    top: clamp(top, margin, viewport.height - margin - maxHeight),
+    maxHeight
+  };
+}
+
+// src/flows/FlowPalette.tsx
+import { Fragment, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var QUESTION_TYPES = ["text", "money", "date", "int", "cpf"];
-function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
-  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
+function FlowPaletteMenu({ onSelect, labels, actionOptions }) {
   const resolvedActionOptions = actionOptions ?? [
     { actionKind: "handoff", label: labels.actionKindLabels.handoff ?? "Encaminhar para atendimento" }
   ];
-  const [open, setOpen] = useState(false);
-  const [submenu, setSubmenu] = useState(null);
+  const [submenu, setSubmenu] = useState2(null);
+  const questionTriggerRef = useRef(null);
+  const actionTriggerRef = useRef(null);
+  const submenuRef = useRef(null);
+  const [placement, setPlacement] = useState2(null);
+  useLayoutEffect(() => {
+    if (!submenu) {
+      setPlacement(null);
+      return;
+    }
+    const trigger = submenu === "question" ? questionTriggerRef.current : actionTriggerRef.current;
+    const panel = submenuRef.current;
+    if (!trigger || !panel) return;
+    const anchor = trigger.getBoundingClientRect();
+    setPlacement(
+      placeFloatingPanel({
+        anchor: { left: anchor.left, top: anchor.top, right: anchor.right, bottom: anchor.bottom },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: "side"
+      })
+    );
+  }, [submenu]);
+  const submenuStyle = {
+    position: "fixed",
+    left: placement?.left ?? 0,
+    top: placement?.top ?? 0,
+    maxHeight: placement?.maxHeight,
+    overflowY: "auto",
+    // Até a medição terminar o painel existe mas não aparece — senão ele pisca um quadro na
+    // posição errada, que é justamente o salto que esta correção remove.
+    visibility: placement ? "visible" : "hidden"
+  };
+  function select(spec) {
+    onSelect(spec);
+    setSubmenu(null);
+  }
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          ref: questionTriggerRef,
+          "data-cv-tooltip": labels.palette.question,
+          "aria-label": labels.palette.question,
+          onMouseEnter: () => setSubmenu("question"),
+          onClick: () => setSubmenu(submenu === "question" ? null : "question"),
+          className: "w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+          children: [
+            /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx7(MessageCircleQuestion2, { size: 15, className: "text-blue-500" }),
+              " ",
+              labels.palette.question
+            ] }),
+            /* @__PURE__ */ jsx7(ChevronRight, { size: 13, className: "text-gray-400" })
+          ]
+        }
+      ),
+      submenu === "question" && /* @__PURE__ */ jsx7(
+        "div",
+        {
+          ref: submenuRef,
+          style: submenuStyle,
+          className: "z-50 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1",
+          children: QUESTION_TYPES.map((qt) => /* @__PURE__ */ jsx7(
+            "button",
+            {
+              "data-cv-tooltip": labels.questionTypeLabels[qt],
+              "aria-label": labels.questionTypeLabels[qt],
+              onClick: () => select({ kind: "question", questionType: qt }),
+              className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+              children: labels.questionTypeLabels[qt]
+            },
+            qt
+          ))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        "data-cv-tooltip": labels.palette.decision,
+        "aria-label": labels.palette.decision,
+        onMouseEnter: () => setSubmenu(null),
+        onClick: () => select({ kind: "decision" }),
+        className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+        children: [
+          /* @__PURE__ */ jsx7(GitBranch3, { size: 15, className: "text-purple-500" }),
+          " ",
+          labels.palette.decision
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        onMouseEnter: () => setSubmenu(null),
+        onClick: () => select({ kind: "condition" }),
+        className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+        "data-cv-tooltip": labels.palette.conditionHint,
+        "aria-label": labels.palette.conditionHint,
+        children: [
+          /* @__PURE__ */ jsx7(Diamond2, { size: 15, className: "text-cyan-500" }),
+          " ",
+          labels.palette.condition
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          ref: actionTriggerRef,
+          "data-cv-tooltip": labels.palette.action,
+          "aria-label": labels.palette.action,
+          onMouseEnter: () => setSubmenu("action"),
+          onClick: () => setSubmenu(submenu === "action" ? null : "action"),
+          className: "w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+          children: [
+            /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx7(Zap2, { size: 15, className: "text-orange-500" }),
+              " ",
+              labels.palette.action
+            ] }),
+            /* @__PURE__ */ jsx7(ChevronRight, { size: 13, className: "text-gray-400" })
+          ]
+        }
+      ),
+      submenu === "action" && /* @__PURE__ */ jsx7(
+        "div",
+        {
+          ref: submenuRef,
+          style: submenuStyle,
+          className: "z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1",
+          children: resolvedActionOptions.map((option) => /* @__PURE__ */ jsx7(
+            "button",
+            {
+              "data-cv-tooltip": option.label,
+              "aria-label": option.label,
+              onClick: () => select({ kind: "action", actionKind: option.actionKind }),
+              className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+              children: option.label
+            },
+            option.actionKind
+          ))
+        }
+      )
+    ] })
+  ] });
+}
+function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
+  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
+  const [open, setOpen] = useState2(false);
   const containerRef = useRef(null);
   useEffect(() => {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
         setOpen(false);
-        setSubmenu(null);
       }
     }
     document.addEventListener("mousedown", handleClickOutside);
@@ -647,465 +1066,1870 @@ function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
   function select(spec) {
     onAdd(spec);
     setOpen(false);
-    setSubmenu(null);
   }
   return /* @__PURE__ */ jsxs6("div", { ref: containerRef, className: "relative", children: [
     /* @__PURE__ */ jsxs6(
       "button",
       {
+        "data-cv-tooltip": labels.palette.title,
+        "aria-label": labels.palette.title,
         onClick: () => setOpen((v) => !v),
         className: "inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700",
         children: [
-          /* @__PURE__ */ jsx7(Plus, { size: 14 }),
+          /* @__PURE__ */ jsx7(Plus2, { size: 14 }),
           " ",
           labels.palette.title
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxs6("div", { className: "absolute left-0 top-full mt-1.5 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg z-50 py-1", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs6(
-          "button",
+    open && /* @__PURE__ */ jsx7("div", { className: "absolute left-0 top-full mt-1.5 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg z-50 py-1", children: /* @__PURE__ */ jsx7(
+      FlowPaletteMenu,
+      {
+        onSelect: select,
+        labels,
+        ...actionOptions ? { actionOptions } : {}
+      }
+    ) })
+  ] });
+}
+
+// src/flows/FlowLegend.tsx
+import { useState as useState3 } from "react";
+import { ChevronDown, ChevronUp, RotateCcw as RotateCcw2 } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function EdgeSample({ sample }) {
+  return /* @__PURE__ */ jsxs7("li", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx8("svg", { width: "28", height: "12", viewBox: "0 0 28 12", "aria-hidden": "true", className: "shrink-0", children: /* @__PURE__ */ jsx8(
+      "line",
+      {
+        x1: "2",
+        y1: "6",
+        x2: "26",
+        y2: "6",
+        stroke: sample.color,
+        strokeWidth: "1.75",
+        ...sample.dash ? { strokeDasharray: sample.dash } : {}
+      }
+    ) }),
+    /* @__PURE__ */ jsx8("span", { className: "text-[11px] leading-tight text-gray-600 dark:text-gray-300", children: sample.label })
+  ] });
+}
+function FlowLegend({ labels, edgeSamples, nodeSwatches }) {
+  const [open, setOpen] = useState3(false);
+  return /* @__PURE__ */ jsxs7("div", { className: "rounded-lg border border-gray-200 bg-white/95 shadow-sm backdrop-blur dark:border-gray-700 dark:bg-gray-800/95", children: [
+    /* @__PURE__ */ jsxs7(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((current) => !current),
+        "data-cv-tooltip": labels.legendPanel.title,
+        "aria-label": labels.legendPanel.title,
+        "aria-expanded": open,
+        className: "flex w-full items-center justify-between gap-2 px-2.5 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400",
+        children: [
+          labels.legendPanel.title,
+          open ? /* @__PURE__ */ jsx8(ChevronDown, { size: 13 }) : /* @__PURE__ */ jsx8(ChevronUp, { size: 13 })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs7("div", { className: "max-h-72 w-64 overflow-y-auto border-t border-gray-100 px-2.5 py-2 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx8("p", { className: "mb-1 text-[10px] font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500", children: labels.legendPanel.connections }),
+      /* @__PURE__ */ jsx8("ul", { className: "space-y-1.5", children: edgeSamples.map((sample) => /* @__PURE__ */ jsx8(EdgeSample, { sample }, sample.label)) }),
+      /* @__PURE__ */ jsx8("p", { className: "mb-1 mt-3 text-[10px] font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500", children: labels.legendPanel.nodes }),
+      /* @__PURE__ */ jsxs7("ul", { className: "space-y-1.5", children: [
+        nodeSwatches.map((swatch) => /* @__PURE__ */ jsxs7("li", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx8("span", { className: `h-3 w-5 shrink-0 rounded border-2 ${swatch.className}`, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx8("span", { className: "text-[11px] leading-tight text-gray-600 dark:text-gray-300", children: labels.legend[swatch.type] })
+        ] }, swatch.type)),
+        /* @__PURE__ */ jsxs7("li", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx8(
+            "span",
+            {
+              className: "h-3 w-5 shrink-0 rounded border-2 border-dashed border-amber-400",
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx8("span", { className: "text-[11px] leading-tight text-gray-600 dark:text-gray-300", children: labels.legendPanel.detached })
+        ] }),
+        /* @__PURE__ */ jsxs7("li", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx8("span", { className: "flex h-3 w-5 shrink-0 items-center justify-center", "aria-hidden": "true", children: /* @__PURE__ */ jsx8("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500" }) }),
+          /* @__PURE__ */ jsx8("span", { className: "text-[11px] leading-tight text-gray-600 dark:text-gray-300", children: labels.legendPanel.startNode })
+        ] }),
+        /* @__PURE__ */ jsxs7("li", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx8("span", { className: "flex h-3 w-5 shrink-0 items-center justify-center text-gray-400", "aria-hidden": "true", children: /* @__PURE__ */ jsx8(RotateCcw2, { size: 12, strokeWidth: 2.5 }) }),
+          /* @__PURE__ */ jsx8("span", { className: "text-[11px] leading-tight text-gray-600 dark:text-gray-300", children: labels.legendPanel.selfLoop })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/flows/FlowConnectionEdge.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import { BaseEdge, EdgeLabelRenderer, getBezierPath } from "@xyflow/react";
+import { X as X2 } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var HIDE_DELAY_MS = 320;
+function FlowConnectionEdge({
+  id,
+  sourceX,
+  sourceY,
+  targetX,
+  targetY,
+  sourcePosition,
+  targetPosition,
+  markerEnd,
+  style,
+  data,
+  interactionWidth
+}) {
+  const [hovered, setHovered] = useState4(false);
+  const hideTimer = useRef2(void 0);
+  const { onDisconnect, disconnectLabel } = data ?? {};
+  function show() {
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    setHovered(true);
+  }
+  function scheduleHide() {
+    if (hideTimer.current) clearTimeout(hideTimer.current);
+    hideTimer.current = setTimeout(() => setHovered(false), HIDE_DELAY_MS);
+  }
+  useEffect2(() => () => clearTimeout(hideTimer.current), []);
+  const [path, labelX, labelY] = getBezierPath({
+    sourceX,
+    sourceY,
+    sourcePosition,
+    targetX,
+    targetY,
+    targetPosition
+  });
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx9(BaseEdge, { id, path, markerEnd, style, interactionWidth: interactionWidth ?? 20 }),
+    /* @__PURE__ */ jsx9(
+      "path",
+      {
+        d: path,
+        fill: "none",
+        strokeWidth: 22,
+        stroke: "transparent",
+        className: "react-flow__edge-interaction",
+        onMouseEnter: show,
+        onMouseLeave: scheduleHide
+      }
+    ),
+    onDisconnect && hovered && /* @__PURE__ */ jsx9(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx9(
+      "button",
+      {
+        type: "button",
+        "data-cv-tooltip": disconnectLabel,
+        "aria-label": disconnectLabel,
+        onMouseEnter: show,
+        onMouseLeave: scheduleHide,
+        onClick: (event) => {
+          event.stopPropagation();
+          onDisconnect();
+        },
+        style: { transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)` },
+        className: "nodrag nopan pointer-events-auto absolute flex h-5 w-5 items-center justify-center rounded-full border border-gray-300 bg-white text-gray-500 shadow-sm hover:border-red-400 hover:text-red-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400",
+        children: /* @__PURE__ */ jsx9(X2, { size: 12, strokeWidth: 2.5 })
+      }
+    ) })
+  ] });
+}
+var flowEdgeTypes = { flowConnection: FlowConnectionEdge };
+
+// src/flows/FlowNodePanel.tsx
+import { useState as useState5 } from "react";
+import { Plus as Plus3, Trash2, Save, X as X3, AlertTriangle as AlertTriangle2, AlertCircle as AlertCircle2 } from "lucide-react";
+
+// src/flows/FlowWhatsAppPreview.tsx
+import { List } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function FlowWhatsAppPreview({
+  body,
+  options,
+  labels = DEFAULT_FLOW_EDITOR_LABELS.nodePanel
+}) {
+  if (!body && (!options || options.length === 0)) {
+    return /* @__PURE__ */ jsx10("p", { className: "text-xs text-gray-400 dark:text-gray-500 italic px-1", children: labels.previewPlaceholder });
+  }
+  const usesButtons = rendersAsButtons(options);
+  const hasOptions = (options?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxs9("div", { className: "rounded-xl bg-[#e5ddd5] dark:bg-gray-900 p-3 space-y-1.5", children: [
+    /* @__PURE__ */ jsxs9("div", { className: "max-w-[85%]", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "rounded-lg rounded-tl-none bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm whitespace-pre-wrap break-words", children: [
+        body ? parseWhatsAppFormatting(body) : /* @__PURE__ */ jsx10("span", { className: "italic text-gray-400", children: labels.previewEmptyBody }),
+        hasOptions && !usesButtons && /* @__PURE__ */ jsx10("div", { className: "mt-2 -mx-3 -mb-2 border-t border-gray-100 dark:border-gray-600", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-cyan-600 dark:text-cyan-400", children: [
+          /* @__PURE__ */ jsx10(List, { size: 15 }),
+          " ",
+          labels.previewListButton
+        ] }) })
+      ] }),
+      hasOptions && usesButtons && /* @__PURE__ */ jsx10("div", { className: "mt-1 space-y-1", children: options.map(([id, label]) => /* @__PURE__ */ jsx10(
+        "div",
+        {
+          className: "rounded-lg bg-white dark:bg-gray-700 py-1.5 text-center text-sm font-medium text-cyan-600 dark:text-cyan-400 shadow-sm",
+          children: label || /* @__PURE__ */ jsx10("span", { className: "italic text-gray-400", children: labels.previewEmptyOption })
+        },
+        id
+      )) }),
+      hasOptions && !usesButtons && /* @__PURE__ */ jsx10("div", { className: "mt-1.5 rounded-lg bg-white dark:bg-gray-700 shadow-sm divide-y divide-gray-100 dark:divide-gray-600 overflow-hidden", children: options.slice(0, WHATSAPP_LIMITS.MAX_LIST_ROWS).map(([id, label]) => /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 px-3 py-1.5 text-sm text-gray-800 dark:text-gray-100", children: [
+        /* @__PURE__ */ jsx10("span", { className: "h-3.5 w-3.5 rounded-full border border-gray-300 dark:border-gray-500 shrink-0" }),
+        label || /* @__PURE__ */ jsx10("span", { className: "italic text-gray-400", children: labels.previewEmptyOption })
+      ] }, id)) })
+    ] }),
+    hasOptions && /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-gray-500 dark:text-gray-400 px-1", children: usesButtons ? labels.previewModeButtons : labels.previewModeList })
+  ] });
+}
+
+// src/flows/FlowNodePanel.tsx
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var SELECT_CLASSNAME = "border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all";
+var INPUT_CLASSNAME = "border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all";
+function truncateLabel(value, max = 60) {
+  if (!value) return "\u2014";
+  return value.length > max ? `${value.slice(0, max - 1)}\u2026` : value;
+}
+function WhatsAppTextField({
+  label,
+  value,
+  onValueChange,
+  options,
+  placeholder,
+  labels
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
+      /* @__PURE__ */ jsx11(
+        "textarea",
+        {
+          value,
+          onChange: (e) => onValueChange(e.target.value),
+          rows: 3,
+          placeholder,
+          className: `w-full mt-1 ${INPUT_CLASSNAME}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.preview }),
+      /* @__PURE__ */ jsx11("div", { className: "mt-1", children: /* @__PURE__ */ jsx11(FlowWhatsAppPreview, { body: value, options, labels: labels.nodePanel }) })
+    ] })
+  ] });
+}
+function IssueRow({ issue }) {
+  const Icon = issue.severity === "error" ? AlertCircle2 : AlertTriangle2;
+  const color = issue.severity === "error" ? "text-red-600 dark:text-red-400" : "text-amber-600 dark:text-amber-400";
+  return /* @__PURE__ */ jsxs10("div", { className: `flex items-start gap-1.5 text-xs ${color}`, children: [
+    /* @__PURE__ */ jsx11(Icon, { size: 13, className: "mt-0.5 shrink-0" }),
+    /* @__PURE__ */ jsx11("span", { children: issue.message })
+  ] });
+}
+function FlowNodePanel({
+  graph,
+  node,
+  issues,
+  otherFlows,
+  onClose,
+  onChange,
+  onDelete,
+  labels: labelsOverride,
+  renderMediaPicker
+}) {
+  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
+  const [draft, setDraft] = useState5(node);
+  const otherNodeIds = Object.keys(graph.nodes).filter((id) => id !== node.id);
+  const isFixedLogic = draft.type === "entrada_choice";
+  const isAction = draft.type === "action";
+  const isSendMedia = isAction && draft.actionKind === BUILT_IN_ACTION_KINDS.SEND_MEDIA;
+  const isPassThroughAction = isAction && Boolean(draft.actionKind && PASS_THROUGH_ACTION_KINDS.includes(draft.actionKind));
+  const isCondition = draft.type === "condition";
+  const isStart = graph.startNodeId === node.id;
+  const nodeIssues = issues.filter((i) => i.nodeId === node.id);
+  const knownContextKeys = [
+    ...new Set(
+      Object.values(graph.nodes).map((n) => n.contextKey).filter((key) => !!key)
+    )
+  ];
+  const conditionAnswerIds = isCondition ? ["true", "false"] : (draft.options ?? []).map(([id]) => id);
+  function updateNextString(value) {
+    setDraft((prev) => ({ ...prev, next: value }));
+  }
+  function updateNextByAnswer(answerId, value) {
+    setDraft((prev) => {
+      const current = typeof prev.next === "object" && prev.next ? prev.next : { byAnswer: {}, default: otherNodeIds[0] ?? "" };
+      return { ...prev, next: { ...current, byAnswer: { ...current.byAnswer, [answerId]: value } } };
+    });
+  }
+  function updateNextDefault(value) {
+    setDraft((prev) => {
+      const current = typeof prev.next === "object" && prev.next ? prev.next : { byAnswer: {}, default: value };
+      return { ...prev, next: { ...current, default: value } };
+    });
+  }
+  function updateOption(index, field, value) {
+    setDraft((prev) => {
+      const opts = [...prev.options ?? []];
+      const opt = [...opts[index]];
+      opt[field] = value;
+      opts[index] = opt;
+      return { ...prev, options: opts };
+    });
+  }
+  function addOption() {
+    setDraft((prev) => ({
+      ...prev,
+      options: [...prev.options ?? [], [String((prev.options?.length ?? 0) + 1), "Nova op\xE7\xE3o"]]
+    }));
+  }
+  function removeOption(index) {
+    setDraft((prev) => ({ ...prev, options: (prev.options ?? []).filter((_, i) => i !== index) }));
+  }
+  function nextNodeOptions() {
+    return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+      otherNodeIds.map((id) => /* @__PURE__ */ jsx11("option", { value: id, children: truncateLabel(nodeLabel(graph.nodes[id], labels)) }, id)),
+      otherFlows.length > 0 && /* @__PURE__ */ jsx11("optgroup", { label: labels.nodePanel.otherFlowsGroup, children: otherFlows.map((flow) => /* @__PURE__ */ jsx11("option", { value: `${CROSS_FLOW_PREFIX}${flow.key}`, children: flow.label }, flow.key)) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs10("div", { className: "fixed inset-y-0 right-0 w-96 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 shadow-xl z-50 flex flex-col", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx11("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.nodePanel.title }),
+      /* @__PURE__ */ jsx11("button", { "data-cv-tooltip": labels.nodePanel.close, "aria-label": labels.nodePanel.close, onClick: onClose, className: "text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx11(X3, { size: 18 }) })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
+      nodeIssues.length > 0 && /* @__PURE__ */ jsx11("div", { className: "rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40 p-2.5 space-y-1.5", children: nodeIssues.map((issue, i) => /* @__PURE__ */ jsx11(IssueRow, { issue }, i)) }),
+      isFixedLogic && /* @__PURE__ */ jsx11("p", { className: "text-xs text-purple-700 dark:text-purple-400 bg-purple-50 dark:bg-purple-950/30 rounded-lg p-2", children: labels.nodePanel.fixedLogicNotice }),
+      isAction && /* @__PURE__ */ jsx11("p", { className: "text-xs text-orange-700 dark:text-orange-400 bg-orange-50 dark:bg-orange-950/30 rounded-lg p-2", children: labels.nodePanel.actionNotice }),
+      isCondition && /* @__PURE__ */ jsx11("p", { className: "text-xs text-cyan-700 dark:text-cyan-400 bg-cyan-50 dark:bg-cyan-950/30 rounded-lg p-2", children: labels.nodePanel.conditionNotice }),
+      /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.nodeName }),
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            value: draft.label ?? "",
+            placeholder: labels.nodePanel.nodeNamePlaceholder,
+            onChange: (event) => setDraft((prev) => ({ ...prev, label: event.target.value || void 0 })),
+            className: `w-full mt-1 ${INPUT_CLASSNAME}`
+          }
+        ),
+        /* @__PURE__ */ jsx11("p", { className: "text-[11px] text-gray-400 dark:text-gray-500 mt-1", children: labels.nodePanel.nodeNameHint })
+      ] }),
+      draft.contextKey && /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.contextKey }),
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            value: draft.contextKey,
+            disabled: true,
+            className: "w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500"
+          }
+        )
+      ] }),
+      !isFixedLogic && !isAction && !isCondition && /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.questionType }),
+        /* @__PURE__ */ jsx11(
+          "select",
+          {
+            value: draft.questionType ?? "text",
+            onChange: (e) => setDraft((prev) => ({ ...prev, questionType: e.target.value })),
+            className: `w-full mt-1 ${SELECT_CLASSNAME}`,
+            children: Object.entries(labels.questionTypeLabels).map(([key, label]) => /* @__PURE__ */ jsx11("option", { value: key, children: label }, key))
+          }
+        )
+      ] }),
+      !isFixedLogic && !isAction && !isCondition && /* @__PURE__ */ jsx11(
+        WhatsAppTextField,
+        {
+          label: labels.nodePanel.question,
+          value: draft.question ?? "",
+          options: draft.questionType === "choice" ? draft.options : void 0,
+          onValueChange: (value) => setDraft((prev) => ({ ...prev, question: value })),
+          labels
+        }
+      ),
+      isCondition && /* @__PURE__ */ jsxs10("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.conditionVariable }),
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              value: draft.conditionContextKey ?? "",
+              onChange: (e) => setDraft((prev) => ({ ...prev, conditionContextKey: e.target.value })),
+              list: "condition-context-keys",
+              className: `w-full mt-1 ${INPUT_CLASSNAME}`
+            }
+          ),
+          /* @__PURE__ */ jsx11("datalist", { id: "condition-context-keys", children: knownContextKeys.map((key) => /* @__PURE__ */ jsx11("option", { value: key }, key)) })
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.conditionOperator }),
+          /* @__PURE__ */ jsx11(
+            "select",
+            {
+              value: draft.conditionOperator ?? ">",
+              onChange: (e) => setDraft((prev) => ({
+                ...prev,
+                conditionOperator: e.target.value
+              })),
+              className: `w-full mt-1 ${SELECT_CLASSNAME}`,
+              children: CONDITION_OPERATORS.map((operator) => /* @__PURE__ */ jsx11("option", { value: operator, children: labels.conditionOperatorLabels[operator] ?? operator }, operator))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.conditionValue }),
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              value: draft.conditionValue ?? "",
+              onChange: (e) => setDraft((prev) => ({ ...prev, conditionValue: e.target.value })),
+              className: `w-full mt-1 ${INPUT_CLASSNAME}`
+            }
+          )
+        ] })
+      ] }),
+      isAction && draft.actionKind === "send_product_list" && /* @__PURE__ */ jsx11(
+        WhatsAppTextField,
+        {
+          label: labels.nodePanel.fallbackMessage,
+          value: draft.fallbackMessage ?? "",
+          onValueChange: (value) => setDraft((prev) => ({ ...prev, fallbackMessage: value })),
+          placeholder: "(usa a mensagem padr\xE3o de fallback se vazio)",
+          labels
+        }
+      ),
+      isSendMedia && /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.media }),
+        /* @__PURE__ */ jsx11("div", { className: "mt-1", children: renderMediaPicker?.(node, graph) ?? /* @__PURE__ */ jsx11("p", { className: "text-xs text-gray-400", children: labels.nodePanel.mediaUnavailable }) })
+      ] }),
+      isAction && draft.actionKind !== "send_product_list" && !isSendMedia && /* @__PURE__ */ jsx11(
+        WhatsAppTextField,
+        {
+          label: labels.nodePanel.directMessage,
+          value: draft.directMessage ?? "",
+          onValueChange: (value) => setDraft((prev) => ({ ...prev, directMessage: value })),
+          placeholder: "(usa a mensagem padr\xE3o de encaminhamento se vazio)",
+          labels
+        }
+      ),
+      (draft.questionType === "choice" || draft.type === "menu") && /* @__PURE__ */ jsxs10("div", { children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between mb-1.5", children: [
+          /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.options }),
+          /* @__PURE__ */ jsxs10("button", { "data-cv-tooltip": labels.nodePanel.addOption, "aria-label": labels.nodePanel.addOption, onClick: addOption, className: "text-xs text-blue-600 hover:underline flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx11(Plus3, { size: 12 }),
+            " ",
+            labels.nodePanel.addOption
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx11("div", { className: "space-y-2", children: (draft.options ?? []).map(([id, label], i) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              value: id,
+              onChange: (e) => updateOption(i, 0, e.target.value),
+              placeholder: labels.nodePanel.optionId,
+              className: `w-16 ${INPUT_CLASSNAME}`
+            }
+          ),
+          /* @__PURE__ */ jsx11(
+            "input",
+            {
+              value: label,
+              onChange: (e) => updateOption(i, 1, e.target.value),
+              placeholder: labels.nodePanel.optionLabel,
+              className: `flex-1 ${INPUT_CLASSNAME}`
+            }
+          ),
+          /* @__PURE__ */ jsx11("button", { "data-cv-tooltip": labels.nodePanel.removeOption, "aria-label": labels.nodePanel.removeOption, onClick: () => removeOption(i), className: "text-gray-400 hover:text-red-600", children: /* @__PURE__ */ jsx11(Trash2, { size: 14 }) })
+        ] }, i)) })
+      ] }),
+      (!isAction || isPassThroughAction) && /* @__PURE__ */ jsxs10("div", { className: "pt-2 border-t border-gray-100 dark:border-gray-700", children: [
+        /* @__PURE__ */ jsx11("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.next }),
+        /* @__PURE__ */ jsx11("p", { className: "text-[11px] text-gray-400 dark:text-gray-500 mb-1", children: labels.nodePanel.nextHint }),
+        typeof draft.next !== "object" && !isCondition ? /* @__PURE__ */ jsxs10(
+          "select",
           {
-            onMouseEnter: () => setSubmenu("question"),
-            onClick: () => setSubmenu(submenu === "question" ? null : "question"),
-            className: "w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+            value: typeof draft.next === "string" ? draft.next : "",
+            onChange: (e) => updateNextString(e.target.value),
+            className: `w-full mt-1 ${SELECT_CLASSNAME}`,
             children: [
-              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx7(MessageCircleQuestion2, { size: 15, className: "text-blue-500" }),
-                " ",
-                labels.palette.question
-              ] }),
-              /* @__PURE__ */ jsx7(ChevronRight, { size: 13, className: "text-gray-400" })
+              /* @__PURE__ */ jsx11("option", { value: "", children: "\u2014" }),
+              nextNodeOptions()
             ]
           }
-        ),
-        submenu === "question" && /* @__PURE__ */ jsx7("div", { className: "absolute left-full top-0 ml-1 w-56 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1", children: QUESTION_TYPES.map((qt) => /* @__PURE__ */ jsx7(
-          "button",
-          {
-            onClick: () => select({ kind: "question", questionType: qt }),
-            className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
-            children: labels.questionTypeLabels[qt]
-          },
-          qt
-        )) })
-      ] }),
-      /* @__PURE__ */ jsxs6(
+        ) : /* @__PURE__ */ jsxs10("div", { className: "space-y-2 mt-1", children: [
+          conditionAnswerIds.map((id) => /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx11("span", { className: "text-xs text-gray-500 w-32 shrink-0", children: isCondition ? id === "true" ? labels.nodePanel.conditionTrue : labels.nodePanel.conditionFalse : labels.nodePanel.nextByAnswer(id) }),
+            /* @__PURE__ */ jsxs10(
+              "select",
+              {
+                value: draft.next && typeof draft.next === "object" ? draft.next.byAnswer[id] ?? "" : "",
+                onChange: (e) => updateNextByAnswer(id, e.target.value),
+                className: `flex-1 ${SELECT_CLASSNAME}`,
+                children: [
+                  /* @__PURE__ */ jsx11("option", { value: "", children: "\u2014" }),
+                  nextNodeOptions()
+                ]
+              }
+            )
+          ] }, id)),
+          /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx11("span", { className: "text-xs text-gray-500 w-32 shrink-0", children: isCondition ? labels.nodePanel.conditionVariableMissing : labels.nodePanel.nextDefault }),
+            /* @__PURE__ */ jsxs10(
+              "select",
+              {
+                value: draft.next && typeof draft.next === "object" ? draft.next.default : "",
+                onChange: (e) => updateNextDefault(e.target.value),
+                className: `flex-1 ${SELECT_CLASSNAME}`,
+                children: [
+                  /* @__PURE__ */ jsx11("option", { value: "", children: "\u2014" }),
+                  nextNodeOptions()
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs10("div", { className: "p-4 border-t border-gray-100 dark:border-gray-700 flex gap-2", children: [
+      /* @__PURE__ */ jsxs10(
         "button",
         {
-          onMouseEnter: () => setSubmenu(null),
-          onClick: () => select({ kind: "decision" }),
-          className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+          "data-cv-tooltip": labels.nodePanel.save,
+          "aria-label": labels.nodePanel.save,
+          onClick: () => onChange(draft),
+          className: "flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700",
           children: [
-            /* @__PURE__ */ jsx7(GitBranch3, { size: 15, className: "text-purple-500" }),
+            /* @__PURE__ */ jsx11(Save, { size: 14 }),
             " ",
-            labels.palette.decision
+            labels.nodePanel.save
           ]
         }
       ),
-      /* @__PURE__ */ jsxs6(
+      !isStart && /* @__PURE__ */ jsx11(
         "button",
         {
-          onMouseEnter: () => setSubmenu(null),
-          onClick: () => select({ kind: "condition" }),
-          className: "w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
-          title: labels.palette.conditionHint,
-          children: [
-            /* @__PURE__ */ jsx7(Diamond2, { size: 15, className: "text-cyan-500" }),
-            " ",
-            labels.palette.condition
-          ]
+          onClick: () => {
+            if (window.confirm(labels.nodePanel.deleteConfirm)) onDelete(node.id);
+          },
+          "data-cv-tooltip": labels.nodePanel.delete,
+          "aria-label": labels.nodePanel.delete,
+          className: "px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg",
+          children: /* @__PURE__ */ jsx11(Trash2, { size: 14 })
         }
       ),
-      /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxs6(
-          "button",
-          {
-            onMouseEnter: () => setSubmenu("action"),
-            onClick: () => setSubmenu(submenu === "action" ? null : "action"),
-            className: "w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
-            children: [
-              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx7(Zap2, { size: 15, className: "text-orange-500" }),
-                " ",
-                labels.palette.action
-              ] }),
-              /* @__PURE__ */ jsx7(ChevronRight, { size: 13, className: "text-gray-400" })
-            ]
-          }
-        ),
-        submenu === "action" && /* @__PURE__ */ jsx7("div", { className: "absolute left-full top-0 ml-1 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1", children: resolvedActionOptions.map((option) => /* @__PURE__ */ jsx7(
-          "button",
-          {
-            onClick: () => select({ kind: "action", actionKind: option.actionKind }),
-            className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
-            children: option.label
-          },
-          option.actionKind
-        )) })
-      ] })
+      /* @__PURE__ */ jsx11("button", { "data-cv-tooltip": labels.nodePanel.cancel, "aria-label": labels.nodePanel.cancel, onClick: onClose, className: "px-4 py-2 text-sm text-gray-600 dark:text-gray-300 hover:underline", children: labels.nodePanel.cancel })
     ] })
   ] });
 }
 
-// src/flows/FlowNodePanel.tsx
-import { useState as useState2 } from "react";
-import { Plus as Plus2, Trash2, Save, X as X2, AlertTriangle as AlertTriangle2, AlertCircle as AlertCircle2 } from "lucide-react";
+// src/flows/FlowsWorkspace.tsx
+import { useCallback, useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef3, useState as useState6 } from "react";
+import {
+  ReactFlow as ReactFlow2,
+  Background as Background2,
+  Controls as Controls2,
+  MiniMap,
+  MarkerType as MarkerType2,
+  Panel,
+  applyNodeChanges
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { Plus as Plus4, Trash2 as Trash22, LayoutGrid, AlertTriangle as AlertTriangle3, AlertCircle as AlertCircle3, Save as Save2, Undo2, Map as MapIcon, Workflow } from "lucide-react";
 
-// src/flows/FlowWhatsAppPreview.tsx
-import { List } from "lucide-react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-function FlowWhatsAppPreview({ body, options, labels = DEFAULT_FLOW_EDITOR_LABELS.nodePanel }) {
-  if (!body && (!options || options.length === 0)) {
-    return /* @__PURE__ */ jsx8("p", { className: "text-xs text-gray-400 dark:text-gray-500 italic px-1", children: labels.previewPlaceholder });
+// src/flows/flowEditorOps.ts
+var NAMESPACE_SEPARATOR = "::";
+function namespaceNodeId(flowKey, nodeId) {
+  return `${flowKey}${NAMESPACE_SEPARATOR}${nodeId}`;
+}
+function parseNamespacedId(value) {
+  const index = value.indexOf(NAMESPACE_SEPARATOR);
+  if (index === -1) return { flowKey: "", nodeId: value };
+  return { flowKey: value.slice(0, index), nodeId: value.slice(index + NAMESPACE_SEPARATOR.length) };
+}
+function removeNodeAndCleanRefs(nodes, removedId) {
+  const remaining = {};
+  for (const [id, node] of Object.entries(nodes)) {
+    if (id === removedId) continue;
+    remaining[id] = { ...node, next: cleanNext(node.next, removedId) };
   }
-  const usesButtons = rendersAsButtons(options);
-  const hasOptions = (options?.length ?? 0) > 0;
-  return /* @__PURE__ */ jsxs7("div", { className: "rounded-xl bg-[#e5ddd5] dark:bg-gray-900 p-3 space-y-1.5", children: [
-    /* @__PURE__ */ jsxs7("div", { className: "max-w-[85%]", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg rounded-tl-none bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm whitespace-pre-wrap break-words", children: [
-        body ? parseWhatsAppFormatting(body) : /* @__PURE__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyBody }),
-        hasOptions && !usesButtons && /* @__PURE__ */ jsx8("div", { className: "mt-2 -mx-3 -mb-2 border-t border-gray-100 dark:border-gray-600", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-cyan-600 dark:text-cyan-400", children: [
-          /* @__PURE__ */ jsx8(List, { size: 15 }),
-          " ",
-          labels.previewListButton
-        ] }) })
-      ] }),
-      hasOptions && usesButtons && /* @__PURE__ */ jsx8("div", { className: "mt-1 space-y-1", children: options.map(([id, label]) => /* @__PURE__ */ jsx8("div", { className: "rounded-lg bg-white dark:bg-gray-700 py-1.5 text-center text-sm font-medium text-cyan-600 dark:text-cyan-400 shadow-sm", children: label || /* @__PURE__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyOption }) }, id)) }),
-      hasOptions && !usesButtons && /* @__PURE__ */ jsx8("div", { className: "mt-1.5 rounded-lg bg-white dark:bg-gray-700 shadow-sm divide-y divide-gray-100 dark:divide-gray-600 overflow-hidden", children: options.slice(0, WHATSAPP_LIMITS.MAX_LIST_ROWS).map(([id, label]) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 py-1.5 text-sm text-gray-800 dark:text-gray-100", children: [
-        /* @__PURE__ */ jsx8("span", { className: "h-3.5 w-3.5 rounded-full border border-gray-300 dark:border-gray-500 shrink-0" }),
-        label || /* @__PURE__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyOption })
-      ] }, id)) })
-    ] }),
-    hasOptions && /* @__PURE__ */ jsx8("p", { className: "text-[11px] text-gray-500 dark:text-gray-400 px-1", children: usesButtons ? labels.previewModeButtons : labels.previewModeList })
-  ] });
+  return remaining;
+}
+function cleanNext(next, removedId) {
+  if (next === void 0) return void 0;
+  if (typeof next === "string") return next === removedId ? "" : next;
+  const byAnswer = {};
+  for (const [answer, target] of Object.entries(next.byAnswer ?? {})) {
+    byAnswer[answer] = target === removedId ? "" : target;
+  }
+  return { byAnswer, default: next.default === removedId ? "" : next.default ?? "" };
+}
+function mergedFlowKeysFrom(rootKey, graphs) {
+  const visited = /* @__PURE__ */ new Set();
+  const queue = [rootKey];
+  while (queue.length > 0) {
+    const key = queue.shift();
+    if (visited.has(key) || !graphs[key]) continue;
+    visited.add(key);
+    for (const target of crossFlowTargetsOf(graphs[key])) {
+      if (!visited.has(target) && graphs[target]) queue.push(target);
+    }
+  }
+  return [...visited];
+}
+function resolveConnection(params) {
+  const { source, target, sourceHandle } = params.connection;
+  if (!source || !target || source === target) return void 0;
+  const sourceRef = parseNamespacedId(source);
+  const targetRef = parseNamespacedId(target);
+  let targetValue;
+  if (targetRef.flowKey === sourceRef.flowKey) {
+    targetValue = targetRef.nodeId;
+  } else {
+    const targetGraph = params.graphs[targetRef.flowKey];
+    if (!targetGraph || targetGraph.startNodeId !== targetRef.nodeId) return void 0;
+    targetValue = `${CROSS_FLOW_PREFIX}${targetRef.flowKey}`;
+  }
+  return {
+    flowKey: sourceRef.flowKey,
+    nodeId: sourceRef.nodeId,
+    handle: sourceHandle ?? "next",
+    targetValue
+  };
+}
+function applyConnection(node, resolved) {
+  const currentNext = typeof node.next === "object" && node.next ? node.next : void 0;
+  if (resolved.handle === "next") return { ...node, next: resolved.targetValue };
+  if (resolved.handle === "__default") {
+    return { ...node, next: { byAnswer: currentNext?.byAnswer ?? {}, default: resolved.targetValue } };
+  }
+  return {
+    ...node,
+    next: {
+      byAnswer: { ...currentNext?.byAnswer ?? {}, [resolved.handle]: resolved.targetValue },
+      default: currentNext?.default ?? ""
+    }
+  };
+}
+function isGraphDirty(working, published) {
+  if (!working || !published) return false;
+  return JSON.stringify(working) !== JSON.stringify(published);
+}
+function clearConnection(node, handle) {
+  if (handle === "next" || typeof node.next === "string" || node.next === void 0) {
+    return { ...node, next: "" };
+  }
+  if (handle === "__default") {
+    return { ...node, next: { byAnswer: node.next.byAnswer ?? {}, default: "" } };
+  }
+  return {
+    ...node,
+    next: {
+      byAnswer: { ...node.next.byAnswer ?? {}, [handle]: "" },
+      default: node.next.default ?? ""
+    }
+  };
 }
 
-// src/flows/FlowNodePanel.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
-var SELECT_CLASSNAME = "border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all";
-var INPUT_CLASSNAME = "border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all";
-function truncateLabel(value, max = 60) {
-  if (!value) return "\u2014";
-  return value.length > max ? `${value.slice(0, max - 1)}\u2026` : value;
+// src/flows/flowCanvasModel.ts
+var COLUMN_GAP = 360;
+var ROW_GAP = 40;
+var CHAIN_LABEL_ROOM = 24;
+function isNodeCount(position) {
+  return typeof position.count === "number";
 }
-function WhatsAppTextField({
-  label,
-  value,
-  onValueChange,
-  options,
-  placeholder,
-  labels
+function portalNodeId(sourceNodeId, target) {
+  return `__portal__${sourceNodeId}__${target}`;
+}
+function chainFrameNodeId(actionNodeId) {
+  return `__chain__${actionNodeId}`;
+}
+var GROUP_HEADER_NODE_ID = "__group_header__";
+function countLiveByNode(params) {
+  const { flowKey, rootFlowKey, positions } = params;
+  const isRoot = flowKey === rootFlowKey;
+  const counts = {};
+  for (const position of positions ?? []) {
+    if (isNodeCount(position)) {
+      if (position.flowKey !== flowKey) continue;
+      counts[position.nodeId] = (counts[position.nodeId] ?? 0) + position.count;
+      continue;
+    }
+    if (position.flow !== flowKey && !isRoot) continue;
+    const nodeId = isRoot ? position.menuNodeId : position.nodeId;
+    if (!nodeId) continue;
+    counts[nodeId] = (counts[nodeId] ?? 0) + 1;
+  }
+  return counts;
+}
+function computeMergedLayout(params) {
+  const { openKeys, graphs, primaryFlowKey } = params;
+  const open = new Set(openKeys);
+  const nodeById = /* @__PURE__ */ new Map();
+  for (const key of openKeys) {
+    for (const node of Object.values(graphs[key]?.nodes ?? {})) {
+      nodeById.set(namespaceNodeId(key, node.id), node);
+    }
+  }
+  function forwardEdges(id) {
+    const node = nodeById.get(id);
+    if (!node) return [];
+    const flowKey = parseNamespacedId(id).flowKey;
+    const result = [];
+    for (const { target } of targetsOf(node)) {
+      if (isCrossFlowTarget(target)) {
+        const targetKey = crossFlowKey(target);
+        const targetGraph = open.has(targetKey) ? graphs[targetKey] : void 0;
+        if (targetGraph) result.push(namespaceNodeId(targetKey, targetGraph.startNodeId));
+      } else if (graphs[flowKey]?.nodes[target]) {
+        result.push(namespaceNodeId(flowKey, target));
+      }
+    }
+    return result;
+  }
+  const primaryGraph = graphs[primaryFlowKey];
+  const placed = cascadeOrder({
+    rootId: primaryGraph ? namespaceNodeId(primaryFlowKey, primaryGraph.startNodeId) : "",
+    allIds: [...nodeById.keys()],
+    forwardEdges
+  });
+  const positions = /* @__PURE__ */ new Map();
+  let cursorY = 0;
+  for (const [id, { depth }] of [...placed.entries()].sort((a, b) => a[1].order - b[1].order)) {
+    positions.set(id, { x: depth * COLUMN_GAP, y: cursorY });
+    cursorY += estimateNodeHeight(nodeById.get(id)) + ROW_GAP;
+  }
+  return positions;
+}
+function buildFlowEdges(params) {
+  const { openKeys, graphs, rootFlowKey, livePositions } = params;
+  const open = new Set(openKeys);
+  const edges = [];
+  for (const flowKey of openKeys) {
+    const graph = graphs[flowKey];
+    if (!graph) continue;
+    const liveCounts = countLiveByNode({ flowKey, rootFlowKey, positions: livePositions });
+    for (const [nodeId, node] of Object.entries(graph.nodes)) {
+      const live = (liveCounts[nodeId] ?? 0) > 0;
+      for (const { target, optionId, isDefault } of targetsOf(node)) {
+        if (!target) continue;
+        const crossFlow = isCrossFlowTarget(target);
+        let targetFlowKey = flowKey;
+        let targetNodeId = target;
+        if (crossFlow) {
+          const wantedKey = crossFlowKey(target);
+          const targetGraph = open.has(wantedKey) ? graphs[wantedKey] : void 0;
+          if (targetGraph) {
+            targetFlowKey = wantedKey;
+            targetNodeId = targetGraph.startNodeId;
+          } else {
+            targetNodeId = portalNodeId(nodeId, target);
+          }
+        }
+        const source = namespaceNodeId(flowKey, nodeId);
+        const edgeTarget = namespaceNodeId(targetFlowKey, targetNodeId);
+        if (source === edgeTarget) continue;
+        if (isDefault) {
+          edges.push({
+            id: `${source}->${edgeTarget}-default`,
+            source,
+            target: edgeTarget,
+            sourceHandle: "__default",
+            kind: "fallback",
+            crossFlow,
+            // Fallback não anima: é o caminho que ninguém escolheu, e piscar sugeria que a conversa
+            // estava passando por ali.
+            live: false
+          });
+          continue;
+        }
+        if (optionId === void 0) {
+          edges.push({ id: `${source}->${edgeTarget}`, source, target: edgeTarget, kind: "linear", crossFlow, live });
+          continue;
+        }
+        edges.push({
+          id: `${source}->${edgeTarget}-${optionId}`,
+          source,
+          target: edgeTarget,
+          sourceHandle: optionId,
+          kind: "branch",
+          crossFlow,
+          live
+        });
+      }
+    }
+  }
+  return edges;
+}
+function detachedNodeIds(graph) {
+  const connected = /* @__PURE__ */ new Set();
+  for (const node of Object.values(graph.nodes)) {
+    for (const { target } of targetsOf(node)) {
+      if (!isCrossFlowTarget(target)) connected.add(target);
+    }
+  }
+  const detached = /* @__PURE__ */ new Set();
+  for (const nodeId of Object.keys(graph.nodes)) {
+    if (nodeId !== graph.startNodeId && !connected.has(nodeId)) detached.add(nodeId);
+  }
+  return detached;
+}
+function chainFrameBounds(params) {
+  const { nodeIds, graph, positionOf, padding } = params;
+  const positions = nodeIds.map(positionOf);
+  const minX = Math.min(...positions.map((each) => each.x));
+  const maxX = Math.max(...positions.map((each) => each.x)) + NODE_CARD_WIDTH;
+  const minY = Math.min(...positions.map((each) => each.y));
+  const maxY = Math.max(...nodeIds.map((id, index) => positions[index].y + estimateNodeHeight(graph.nodes[id])));
+  return {
+    x: minX - padding,
+    y: minY - padding - CHAIN_LABEL_ROOM,
+    width: maxX - minX + padding * 2,
+    height: maxY - minY + padding * 2 + CHAIN_LABEL_ROOM
+  };
+}
+function newNodeFromSpec(spec, existingIds) {
+  if (spec.kind === "question") {
+    const id2 = slugifyNodeId("nova_pergunta", existingIds);
+    return { id: id2, type: "question", questionType: spec.questionType, contextKey: id2, question: "" };
+  }
+  if (spec.kind === "decision") {
+    const id2 = slugifyNodeId("nova_decisao", existingIds);
+    return {
+      id: id2,
+      type: "question",
+      questionType: "choice",
+      contextKey: id2,
+      question: "",
+      options: [
+        ["1", "Op\xE7\xE3o 1"],
+        ["2", "Op\xE7\xE3o 2"]
+      ]
+    };
+  }
+  if (spec.kind === "condition") {
+    const id2 = slugifyNodeId("nova_condicao", existingIds);
+    return { id: id2, type: "condition", conditionOperator: ">" };
+  }
+  const id = slugifyNodeId("nova_acao", existingIds);
+  return { id, type: "action", actionKind: spec.actionKind };
+}
+var FREE_SLOT_STEP = 120;
+function findFreeSlot(params) {
+  const step = params.step ?? FREE_SLOT_STEP;
+  const isOccupied = (candidate) => params.taken.some(
+    (each) => Math.abs(each.x - candidate.x) < NODE_CARD_WIDTH && Math.abs(each.y - candidate.y) < step
+  );
+  let slot = params.desired;
+  for (let attempt = 0; attempt <= params.taken.length && isOccupied(slot); attempt += 1) {
+    slot = { x: slot.x, y: slot.y + step };
+  }
+  return slot;
+}
+
+// src/flows/FlowsWorkspace.tsx
+import { Fragment as Fragment4, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var RF_NODE_TYPES = {
+  ...flowNodeTypes,
+  ...flowPortalNodeTypes,
+  ...flowGroupHeaderNodeTypes,
+  ...flowGroupFrameNodeTypes
+};
+function legendEdgeSamples(labels) {
+  return [
+    { color: EDGE_COLOR_LINEAR, label: labels.legendPanel.linear },
+    { color: EDGE_COLOR_BRANCH, label: labels.legendPanel.branch },
+    { color: EDGE_COLOR_FALLBACK, dash: "5 4", label: labels.legendPanel.fallback },
+    { color: EDGE_COLOR_CROSS_FLOW, dash: "3 3", label: labels.legendPanel.crossFlow },
+    { color: EDGE_COLOR_LIVE, label: labels.legendPanel.live }
+  ];
+}
+var LEGEND_NODE_SWATCHES = Object.keys(NODE_TYPE_COLOR).map((type) => ({
+  type,
+  className: NODE_TYPE_COLOR[type]
+}));
+var CHAIN_FRAME_PADDING = 36;
+var QUICK_ADD_COLUMN_GAP = 320;
+var FLOW_KEY_PATTERN = /^[a-z0-9_]{2,40}$/;
+var EDGE_COLOR_LINEAR = "#94a3b8";
+var FOCUS_MAX_ZOOM = 1;
+var FOCUS_PADDING = 0.2;
+var FOCUS_DURATION_MS = 400;
+var QUICK_ADD_MENU_GAP = 12;
+var EDGE_COLOR_BRANCH = "#8b5cf6";
+var EDGE_COLOR_FALLBACK = "#cbd5e1";
+var EDGE_COLOR_LIVE = "#3b82f6";
+var EDGE_COLOR_CROSS_FLOW = "#06b6d4";
+var BACKGROUND_COLOR_LIGHT2 = "#cbd5e1";
+var BACKGROUND_COLOR_DARK2 = "#334155";
+function styleEdge(spec, params) {
+  const color = spec.crossFlow ? EDGE_COLOR_CROSS_FLOW : spec.kind === "fallback" ? EDGE_COLOR_FALLBACK : spec.live ? EDGE_COLOR_LIVE : spec.kind === "branch" ? EDGE_COLOR_BRANCH : EDGE_COLOR_LINEAR;
+  const baseWidth = spec.kind === "branch" ? 1.75 : 1.5;
+  const dash = spec.crossFlow ? "3 3" : spec.kind === "fallback" ? "5 4" : void 0;
+  const markerSize = spec.kind === "fallback" ? 16 : 18;
+  return {
+    id: spec.id,
+    source: spec.source,
+    target: spec.target,
+    ...spec.sourceHandle === void 0 ? {} : { sourceHandle: spec.sourceHandle },
+    type: "flowConnection",
+    reconnectable: "target",
+    data: {
+      disconnectLabel: params.disconnectLabel,
+      onDisconnect: () => params.onDisconnect(spec)
+    },
+    animated: spec.live,
+    style: {
+      stroke: color,
+      strokeWidth: spec.live && !spec.crossFlow ? 2.5 : baseWidth,
+      ...dash === void 0 ? {} : { strokeDasharray: dash }
+    },
+    markerEnd: { type: MarkerType2.ArrowClosed, color, width: markerSize, height: markerSize }
+  };
+}
+function extractErrorMessage(error) {
+  if (error instanceof Error) return error.message;
+  return void 0;
+}
+var OUTLINE_BUTTON = "inline-flex items-center gap-1.5 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 hover:border-blue-300 disabled:opacity-40 disabled:cursor-not-allowed";
+var PRIMARY_BUTTON = "inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed";
+var DIALOG_INPUT = "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400";
+function FlowsWorkspace({
+  api,
+  rootFlowKey = "menu",
+  labels: labelsOverride,
+  actionOptions,
+  renderMediaPicker,
+  livePollIntervalMs = 5e3,
+  showHeader = true,
+  className
 }) {
-  return /* @__PURE__ */ jsxs8("div", { className: "space-y-2", children: [
-    /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: label }),
-      /* @__PURE__ */ jsx9(
-        "textarea",
-        {
-          value,
-          onChange: (e) => onValueChange(e.target.value),
-          rows: 3,
-          placeholder,
-          className: `w-full mt-1 ${INPUT_CLASSNAME}`
+  const labels = useMemo2(() => mergeFlowEditorLabels(labelsOverride), [labelsOverride]);
+  const isDark = useIsDarkTheme();
+  const [graphs, setGraphs] = useState6(void 0);
+  const [loadState, setLoadState] = useState6("loading");
+  const [livePositions, setLivePositions] = useState6(void 0);
+  const [viewMode, setViewMode] = useState6("detail");
+  const [openFlowKeys, setOpenFlowKeys] = useState6([rootFlowKey]);
+  const [hasAutoMerged, setHasAutoMerged] = useState6(false);
+  const [workingGraphs, setWorkingGraphs] = useState6({});
+  const [editingRef, setEditingRef] = useState6(null);
+  const [saveState, setSaveState] = useState6("idle");
+  const [saveErrorMessage, setSaveErrorMessage] = useState6(void 0);
+  const [showCreateDialog, setShowCreateDialog] = useState6(false);
+  const [showDeleteDialog, setShowDeleteDialog] = useState6(false);
+  const [quickAddFrom, setQuickAddFrom] = useState6(null);
+  const [newFlow, setNewFlow] = useState6({ key: "", label: "", showInMenu: false, menuOptionLabel: "" });
+  const [flowMutationState, setFlowMutationState] = useState6({ pending: false });
+  const [rfNodes, setRfNodes] = useState6([]);
+  const [flowInstance, setFlowInstance] = useState6(null);
+  const [pendingFocusNodeId, setPendingFocusNodeId] = useState6(null);
+  const [pendingFocusFlowKey, setPendingFocusFlowKey] = useState6(null);
+  const quickAddMenuRef = useRef3(null);
+  const [quickAddPlacement, setQuickAddPlacement] = useState6(null);
+  const reloadGraphs = useCallback(async () => {
+    try {
+      const loaded = await api.getGraphs();
+      setGraphs(loaded);
+      setLoadState("ready");
+      return loaded;
+    } catch {
+      setLoadState("error");
+      return void 0;
+    }
+  }, [api]);
+  useEffect3(() => {
+    void reloadGraphs();
+  }, [reloadGraphs]);
+  useEffect3(() => {
+    const fetchLive = api.getLivePositions;
+    if (!fetchLive) return;
+    let active = true;
+    async function poll() {
+      try {
+        const positions = await fetchLive();
+        if (active) setLivePositions(positions);
+      } catch {
+      }
+    }
+    void poll();
+    const timer = setInterval(() => void poll(), livePollIntervalMs);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [api, livePollIntervalMs]);
+  const primaryFlowKey = openFlowKeys[0] ?? rootFlowKey;
+  const primaryGraph = workingGraphs[primaryFlowKey];
+  useEffect3(() => {
+    if (!graphs || hasAutoMerged) return;
+    setOpenFlowKeys(mergedFlowKeysFrom(rootFlowKey, graphs));
+    setHasAutoMerged(true);
+  }, [graphs, hasAutoMerged, rootFlowKey]);
+  useEffect3(() => {
+    if (!graphs) return;
+    setWorkingGraphs((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      for (const key of openFlowKeys) {
+        if (!next[key] && graphs[key]) {
+          next[key] = graphs[key];
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [graphs, openFlowKeys]);
+  const isFlowDirty = useCallback(
+    (key) => {
+      const working = workingGraphs[key];
+      const server = graphs?.[key];
+      if (!working || !server) return false;
+      return JSON.stringify(working) !== JSON.stringify(server);
+    },
+    [workingGraphs, graphs]
+  );
+  const issuesByFlow = useMemo2(() => {
+    const map = {};
+    for (const key of openFlowKeys) {
+      const graph = workingGraphs[key];
+      if (graph) map[key] = validateGraph(graph, labels.validation);
+    }
+    return map;
+  }, [openFlowKeys, workingGraphs, labels]);
+  const errorCount = Object.values(issuesByFlow).reduce(
+    (sum, list) => sum + list.filter((issue) => issue.severity === "error").length,
+    0
+  );
+  const warningCount = Object.values(issuesByFlow).reduce(
+    (sum, list) => sum + list.filter((issue) => issue.severity === "warning").length,
+    0
+  );
+  const dirtyKeys = openFlowKeys.filter(isFlowDirty);
+  const isDirty = dirtyKeys.length > 0;
+  const updateFlow = useCallback((flowKey, updater) => {
+    setWorkingGraphs((prev) => {
+      const graph = prev[flowKey];
+      if (!graph) return prev;
+      return { ...prev, [flowKey]: updater(graph) };
+    });
+  }, []);
+  const focusFlow = useCallback(
+    (key) => {
+      const others = openFlowKeys.filter((each) => each !== key);
+      if (others.some(isFlowDirty) && !window.confirm(labels.workspace.unsavedChangesConfirm)) return;
+      setOpenFlowKeys(graphs ? mergedFlowKeysFrom(key, graphs) : [key]);
+      if (editingRef && editingRef.flowKey !== key) setEditingRef(null);
+      setPendingFocusFlowKey(key);
+    },
+    [openFlowKeys, isFlowDirty, editingRef, graphs, labels]
+  );
+  const closeFlow = useCallback(
+    (key) => {
+      if (isFlowDirty(key) && !window.confirm(labels.workspace.unsavedChangesConfirm)) return;
+      setOpenFlowKeys((prev) => prev.filter((each) => each !== key));
+      setWorkingGraphs((prev) => {
+        const { [key]: _removed, ...rest } = prev;
+        return rest;
+      });
+      if (editingRef?.flowKey === key) setEditingRef(null);
+    },
+    [isFlowDirty, editingRef, labels]
+  );
+  const mergeFlow = useCallback((targetFlowKey) => {
+    setOpenFlowKeys((prev) => prev.includes(targetFlowKey) ? prev : [...prev, targetFlowKey]);
+  }, []);
+  const isMerged = openFlowKeys.length > 1;
+  const mergedPositions = useMemo2(
+    () => isMerged ? computeMergedLayout({ openKeys: openFlowKeys, graphs: workingGraphs, primaryFlowKey }) : null,
+    [isMerged, openFlowKeys, workingGraphs, primaryFlowKey]
+  );
+  const renderedPositionsRef = useRef3(/* @__PURE__ */ new Map());
+  const derivedNodes = useMemo2(() => {
+    const allNodes = [];
+    for (const flowKey of openFlowKeys) {
+      let resolvePosition2 = function(nodeId) {
+        if (mergedPositions) {
+          const nsId2 = namespaceNodeId(flowKey, nodeId);
+          return renderedPositionsRef.current.get(nsId2) ?? mergedPositions.get(nsId2) ?? { x: 0, y: 0 };
+        }
+        const nsId = namespaceNodeId(flowKey, nodeId);
+        return graph.nodes[nodeId]?.position ?? renderedPositionsRef.current.get(nsId) ?? fallbackPositions[nodeId] ?? { x: 0, y: 0 };
+      };
+      var resolvePosition = resolvePosition2;
+      const graph = workingGraphs[flowKey];
+      if (!graph) continue;
+      const fallbackPositions = mergedPositions ? {} : computeAutoLayout(graph);
+      const liveCounts = countLiveByNode({ flowKey, rootFlowKey, positions: livePositions });
+      const flowIssues = issuesByFlow[flowKey] ?? [];
+      const isPrimary = flowKey === primaryFlowKey;
+      const connectedTargets = /* @__PURE__ */ new Set();
+      for (const candidate of Object.values(graph.nodes)) {
+        for (const { target } of targetsOf(candidate)) {
+          if (!isCrossFlowTarget(target)) connectedTargets.add(target);
         }
+      }
+      for (const node of Object.values(graph.nodes)) {
+        const position = resolvePosition2(node.id);
+        allNodes.push({
+          id: namespaceNodeId(flowKey, node.id),
+          type: "flowNode",
+          position,
+          draggable: true,
+          data: {
+            node,
+            liveCount: liveCounts[node.id] ?? 0,
+            isStart: node.id === graph.startNodeId,
+            isSelected: editingRef?.flowKey === flowKey && editingRef?.nodeId === node.id,
+            isDetached: node.id !== graph.startNodeId && !connectedTargets.has(node.id),
+            issues: flowIssues,
+            labels,
+            onSelect: (nodeId) => setEditingRef({ flowKey, nodeId }),
+            onQuickAdd: ({ nodeId, handle, anchor }) => setQuickAddFrom({ flowKey, nodeId, handle, anchor })
+          }
+        });
+        const crossFlowTargets = [...new Set(targetsOf(node).map((edge) => edge.target).filter(isCrossFlowTarget))];
+        crossFlowTargets.forEach((target, index) => {
+          const targetFlowKey = crossFlowKey(target);
+          if (openFlowKeys.includes(targetFlowKey)) return;
+          allNodes.push({
+            id: namespaceNodeId(flowKey, portalNodeId(node.id, target)),
+            type: "flowPortal",
+            draggable: false,
+            selectable: false,
+            position: { x: position.x + 320, y: position.y + index * 70 },
+            data: {
+              label: graphs?.[targetFlowKey]?.label ?? targetFlowKey,
+              onNavigate: () => mergeFlow(targetFlowKey)
+            }
+          });
+        });
+      }
+      for (const chain of findCollectionChains(graph)) {
+        const chainNodeIds = [...chain.nodeIds, chain.actionNodeId];
+        const positions = chainNodeIds.map((id) => resolvePosition2(id));
+        const minX = Math.min(...positions.map((point) => point.x));
+        const maxX = Math.max(...positions.map((point) => point.x)) + NODE_CARD_WIDTH;
+        const minY = Math.min(...positions.map((point) => point.y));
+        const maxY = Math.max(...positions.map((point) => point.y)) + estimateNodeHeight(graph.nodes[chain.actionNodeId]);
+        allNodes.push({
+          id: namespaceNodeId(flowKey, `__chain__${chain.actionNodeId}`),
+          type: "flowGroupFrame",
+          draggable: false,
+          selectable: false,
+          zIndex: -1,
+          position: { x: minX - CHAIN_FRAME_PADDING, y: minY - CHAIN_FRAME_PADDING - 24 },
+          style: {
+            width: maxX - minX + CHAIN_FRAME_PADDING * 2,
+            height: maxY - minY + CHAIN_FRAME_PADDING * 2 + 24
+          },
+          data: {
+            label: labels.collectionChain.feeds(nodeLabel(graph.nodes[chain.actionNodeId], labels))
+          }
+        });
+      }
+      if (!isPrimary) {
+        const startPosition = resolvePosition2(graph.startNodeId);
+        allNodes.push({
+          id: namespaceNodeId(flowKey, "__group_header__"),
+          type: "flowGroupHeader",
+          draggable: false,
+          selectable: false,
+          position: { x: startPosition.x, y: startPosition.y - 60 },
+          data: {
+            label: graph.label,
+            onFocus: () => focusFlow(flowKey),
+            onClose: () => closeFlow(flowKey)
+          }
+        });
+      }
+    }
+    return allNodes;
+  }, [
+    openFlowKeys,
+    workingGraphs,
+    mergedPositions,
+    livePositions,
+    issuesByFlow,
+    primaryFlowKey,
+    rootFlowKey,
+    editingRef,
+    graphs,
+    mergeFlow,
+    focusFlow,
+    closeFlow,
+    labels
+  ]);
+  const disconnectEdge = useCallback(
+    (spec) => {
+      const { flowKey, nodeId } = parseNamespacedId(spec.source);
+      updateFlow(flowKey, (graph) => {
+        const node = graph.nodes[nodeId];
+        if (!node) return graph;
+        return { ...graph, nodes: { ...graph.nodes, [nodeId]: clearConnection(node, spec.sourceHandle ?? "next") } };
+      });
+    },
+    [updateFlow]
+  );
+  const edges = useMemo2(
+    () => buildFlowEdges({ openKeys: openFlowKeys, graphs: workingGraphs, rootFlowKey, livePositions }).map(
+      (spec) => (
+        // Salto entre fluxos desenhado como portal não se desliga daqui: quem manda nele é o `next`
+        // do nó de origem, e o portal é só a caixa que representa o fluxo alvo ausente.
+        styleEdge(spec, { disconnectLabel: labels.quickAdd.disconnect, onDisconnect: disconnectEdge })
       )
-    ] }),
-    /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.preview }),
-      /* @__PURE__ */ jsx9("div", { className: "mt-1", children: /* @__PURE__ */ jsx9(FlowWhatsAppPreview, { body: value, options, labels: labels.nodePanel }) })
-    ] })
-  ] });
-}
-function IssueRow({ issue }) {
-  const Icon = issue.severity === "error" ? AlertCircle2 : AlertTriangle2;
-  const color = issue.severity === "error" ? "text-red-600 dark:text-red-400" : "text-amber-600 dark:text-amber-400";
-  return /* @__PURE__ */ jsxs8("div", { className: `flex items-start gap-1.5 text-xs ${color}`, children: [
-    /* @__PURE__ */ jsx9(Icon, { size: 13, className: "mt-0.5 shrink-0" }),
-    /* @__PURE__ */ jsx9("span", { children: issue.message })
-  ] });
-}
-function FlowNodePanel({
-  graph,
-  node,
-  issues,
-  otherFlows,
-  onClose,
-  onChange,
-  onDelete,
-  labels: labelsOverride
-}) {
-  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
-  const [draft, setDraft] = useState2(node);
-  const otherNodeIds = Object.keys(graph.nodes).filter((id) => id !== node.id);
-  const isFixedLogic = draft.type === "entrada_choice";
-  const isAction = draft.type === "action";
-  const isCondition = draft.type === "condition";
-  const isStart = graph.startNodeId === node.id;
-  const nodeIssues = issues.filter((i) => i.nodeId === node.id);
-  const knownContextKeys = [...new Set(Object.values(graph.nodes).map((n) => n.contextKey).filter((key) => !!key))];
-  const conditionAnswerIds = isCondition ? ["true", "false"] : (draft.options ?? []).map(([id]) => id);
-  function updateNextString(value) {
-    setDraft((prev) => ({ ...prev, next: value }));
-  }
-  function updateNextByAnswer(answerId, value) {
-    setDraft((prev) => {
-      const current = typeof prev.next === "object" && prev.next ? prev.next : { byAnswer: {}, default: otherNodeIds[0] ?? "" };
-      return { ...prev, next: { ...current, byAnswer: { ...current.byAnswer, [answerId]: value } } };
+    ),
+    [openFlowKeys, workingGraphs, rootFlowKey, livePositions, labels, disconnectEdge]
+  );
+  const onReconnect = useCallback(
+    (oldEdge, connection) => {
+      const resolved = resolveConnection({
+        connection: {
+          source: connection.source,
+          target: connection.target,
+          sourceHandle: connection.sourceHandle ?? oldEdge.sourceHandle
+        },
+        graphs: workingGraphs
+      });
+      if (!resolved) return;
+      updateFlow(resolved.flowKey, (graph) => {
+        const node = graph.nodes[resolved.nodeId];
+        if (!node) return graph;
+        return { ...graph, nodes: { ...graph.nodes, [resolved.nodeId]: applyConnection(node, resolved) } };
+      });
+    },
+    [workingGraphs, updateFlow]
+  );
+  useEffect3(() => {
+    setRfNodes(derivedNodes);
+    for (const node of derivedNodes) {
+      if (node.type === "flowNode") renderedPositionsRef.current.set(node.id, node.position);
+    }
+  }, [derivedNodes]);
+  useEffect3(() => {
+    if (!pendingFocusNodeId || !flowInstance) return;
+    const target = rfNodes.find((node) => node.id === pendingFocusNodeId);
+    if (!target) return;
+    flowInstance.setCenter(target.position.x + NODE_CARD_WIDTH / 2, target.position.y, { zoom: 1, duration: 400 });
+    setPendingFocusNodeId(null);
+  }, [pendingFocusNodeId, flowInstance, rfNodes]);
+  useEffect3(() => {
+    if (!pendingFocusFlowKey || !flowInstance) return;
+    const flowNodes = rfNodes.filter((node) => parseNamespacedId(node.id).flowKey === pendingFocusFlowKey);
+    if (flowNodes.length === 0) return;
+    void flowInstance.fitView({
+      nodes: flowNodes.map((node) => ({ id: node.id })),
+      maxZoom: FOCUS_MAX_ZOOM,
+      padding: FOCUS_PADDING,
+      duration: FOCUS_DURATION_MS
     });
+    setPendingFocusFlowKey(null);
+  }, [pendingFocusFlowKey, flowInstance, rfNodes]);
+  useLayoutEffect2(() => {
+    if (!quickAddFrom) {
+      setQuickAddPlacement(null);
+      return;
+    }
+    const panel = quickAddMenuRef.current;
+    if (!panel) return;
+    const { x, y } = quickAddFrom.anchor;
+    setQuickAddPlacement(
+      placeFloatingPanel({
+        anchor: { left: x, top: y, right: x, bottom: y },
+        panel: { width: panel.offsetWidth, height: panel.scrollHeight },
+        viewport: { width: window.innerWidth, height: window.innerHeight },
+        prefer: "below",
+        gap: QUICK_ADD_MENU_GAP
+      })
+    );
+  }, [quickAddFrom]);
+  const quickAddMenuStyle = {
+    left: quickAddPlacement?.left ?? 0,
+    top: quickAddPlacement?.top ?? 0,
+    maxHeight: quickAddPlacement?.maxHeight,
+    overflowY: "auto",
+    visibility: quickAddPlacement ? "visible" : "hidden"
+  };
+  const onNodesChange = useCallback((changes) => {
+    setRfNodes((current) => applyNodeChanges(changes, current));
+  }, []);
+  const onNodeDragStop = useCallback(
+    (_event, node) => {
+      renderedPositionsRef.current.set(node.id, node.position);
+      const { flowKey, nodeId } = parseNamespacedId(node.id);
+      if (!openFlowKeys.includes(flowKey)) return;
+      updateFlow(
+        flowKey,
+        (graph) => graph.nodes[nodeId] ? { ...graph, nodes: { ...graph.nodes, [nodeId]: { ...graph.nodes[nodeId], position: node.position } } } : graph
+      );
+    },
+    [openFlowKeys, updateFlow]
+  );
+  const onConnect = useCallback(
+    (connection) => {
+      const resolved = resolveConnection({
+        connection: { source: connection.source, target: connection.target, sourceHandle: connection.sourceHandle },
+        graphs: workingGraphs
+      });
+      if (!resolved) return;
+      updateFlow(resolved.flowKey, (graph) => {
+        const node = graph.nodes[resolved.nodeId];
+        if (!node) return graph;
+        return { ...graph, nodes: { ...graph.nodes, [resolved.nodeId]: applyConnection(node, resolved) } };
+      });
+    },
+    [workingGraphs, updateFlow]
+  );
+  function handleAddNode(spec) {
+    if (!primaryGraph) return;
+    const newNode = newNodeFromSpec(spec, new Set(Object.keys(primaryGraph.nodes)));
+    const maxY = Math.max(0, ...Object.values(primaryGraph.nodes).map((node) => node.position?.y ?? 0));
+    newNode.position = { x: 0, y: maxY + 170 };
+    updateFlow(primaryFlowKey, (graph) => ({ ...graph, nodes: { ...graph.nodes, [newNode.id]: newNode } }));
+    setEditingRef({ flowKey: primaryFlowKey, nodeId: newNode.id });
+    setPendingFocusNodeId(namespaceNodeId(primaryFlowKey, newNode.id));
   }
-  function updateNextDefault(value) {
-    setDraft((prev) => {
-      const current = typeof prev.next === "object" && prev.next ? prev.next : { byAnswer: {}, default: value };
-      return { ...prev, next: { ...current, default: value } };
+  function handleQuickAdd(spec) {
+    const origin = quickAddFrom;
+    setQuickAddFrom(null);
+    if (!origin) return;
+    const originGraph = workingGraphs[origin.flowKey];
+    if (!originGraph) return;
+    const newNode = newNodeFromSpec(spec, new Set(Object.keys(originGraph.nodes)));
+    const originPosition = renderedPositionsRef.current.get(namespaceNodeId(origin.flowKey, origin.nodeId)) ?? originGraph.nodes[origin.nodeId]?.position ?? { x: 0, y: 0 };
+    const taken = openFlowKeys.flatMap(
+      (key) => Object.entries(workingGraphs[key]?.nodes ?? {}).map(
+        ([id, node]) => renderedPositionsRef.current.get(namespaceNodeId(key, id)) ?? node.position ?? { x: 0, y: 0 }
+      )
+    );
+    newNode.position = findFreeSlot({
+      desired: { x: originPosition.x + QUICK_ADD_COLUMN_GAP, y: originPosition.y },
+      taken
     });
+    renderedPositionsRef.current.set(namespaceNodeId(origin.flowKey, newNode.id), newNode.position);
+    updateFlow(origin.flowKey, (graph) => {
+      const sourceNode = graph.nodes[origin.nodeId];
+      if (!sourceNode) return graph;
+      const connected = applyConnection(sourceNode, {
+        flowKey: origin.flowKey,
+        nodeId: origin.nodeId,
+        handle: origin.handle,
+        targetValue: newNode.id
+      });
+      return { ...graph, nodes: { ...graph.nodes, [origin.nodeId]: connected, [newNode.id]: newNode } };
+    });
+    setEditingRef({ flowKey: origin.flowKey, nodeId: newNode.id });
   }
-  function updateOption(index, field, value) {
-    setDraft((prev) => {
-      const opts = [...prev.options ?? []];
-      const opt = [...opts[index]];
-      opt[field] = value;
-      opts[index] = opt;
-      return { ...prev, options: opts };
+  function handleNodePanelChange(updated) {
+    if (!editingRef) return;
+    updateFlow(editingRef.flowKey, (graph) => ({ ...graph, nodes: { ...graph.nodes, [updated.id]: updated } }));
+    setEditingRef(null);
+  }
+  function handleNodeDelete(nodeId) {
+    if (!editingRef) return;
+    updateFlow(editingRef.flowKey, (graph) => ({ ...graph, nodes: removeNodeAndCleanRefs(graph.nodes, nodeId) }));
+    setEditingRef(null);
+  }
+  function handleOrganize() {
+    if (!primaryGraph) return;
+    renderedPositionsRef.current.clear();
+    if (isMerged) {
+      const positions2 = computeMergedLayout({ openKeys: openFlowKeys, graphs: workingGraphs, primaryFlowKey });
+      for (const key of openFlowKeys) {
+        updateFlow(key, (graph) => ({
+          ...graph,
+          nodes: Object.fromEntries(
+            Object.entries(graph.nodes).map(([id, node]) => {
+              const position = positions2.get(namespaceNodeId(key, id));
+              return [id, position ? { ...node, position } : node];
+            })
+          )
+        }));
+      }
+      return;
+    }
+    const positions = computeAutoLayout(primaryGraph);
+    updateFlow(primaryFlowKey, (graph) => ({
+      ...graph,
+      nodes: Object.fromEntries(
+        Object.entries(graph.nodes).map(([id, node]) => [id, { ...node, position: positions[id] ?? node.position }])
+      )
+    }));
+  }
+  function handleDiscardChanges() {
+    if (!graphs || !isDirty) return;
+    if (!window.confirm(labels.workspace.discardConfirm)) return;
+    setWorkingGraphs((prev) => {
+      const next = { ...prev };
+      for (const key of dirtyKeys) {
+        const published = graphs[key];
+        if (published) next[key] = published;
+      }
+      return next;
     });
+    renderedPositionsRef.current.clear();
+    setEditingRef(null);
   }
-  function addOption() {
-    setDraft((prev) => ({ ...prev, options: [...prev.options ?? [], [String((prev.options?.length ?? 0) + 1), "Nova op\xE7\xE3o"]] }));
+  async function handlePublish() {
+    if (dirtyKeys.length === 0 || errorCount > 0) return;
+    setSaveState("saving");
+    setSaveErrorMessage(void 0);
+    try {
+      await Promise.all(dirtyKeys.map((key) => api.saveGraph(key, workingGraphs[key])));
+      await reloadGraphs();
+      setSaveState("success");
+      setTimeout(() => setSaveState("idle"), 3e3);
+    } catch (error) {
+      setSaveState("error");
+      setSaveErrorMessage(extractErrorMessage(error));
+    }
   }
-  function removeOption(index) {
-    setDraft((prev) => ({ ...prev, options: (prev.options ?? []).filter((_, i) => i !== index) }));
+  async function handleCreateFlow() {
+    const createFlow = api.createFlow;
+    if (!createFlow) return;
+    setFlowMutationState({ pending: true });
+    try {
+      await createFlow({
+        key: newFlow.key,
+        label: newFlow.label,
+        showInMenu: newFlow.showInMenu,
+        ...newFlow.showInMenu ? { menuOptionLabel: newFlow.menuOptionLabel || newFlow.label } : {}
+      });
+      await reloadGraphs();
+      setOpenFlowKeys([newFlow.key]);
+      setShowCreateDialog(false);
+      setNewFlow({ key: "", label: "", showInMenu: false, menuOptionLabel: "" });
+      setFlowMutationState({ pending: false });
+    } catch (error) {
+      setFlowMutationState({ pending: false, error: extractErrorMessage(error) ?? labels.flowManager.createError });
+    }
   }
-  function nextNodeOptions() {
-    return /* @__PURE__ */ jsxs8(Fragment, { children: [
-      otherNodeIds.map((id) => /* @__PURE__ */ jsx9("option", { value: id, children: truncateLabel(nodeLabel(graph.nodes[id], labels)) }, id)),
-      otherFlows.length > 0 && /* @__PURE__ */ jsx9("optgroup", { label: labels.nodePanel.otherFlowsGroup, children: otherFlows.map((flow) => /* @__PURE__ */ jsx9("option", { value: `${CROSS_FLOW_PREFIX}${flow.key}`, children: flow.label }, flow.key)) })
-    ] });
+  async function handleDeleteFlow() {
+    const deleteFlow = api.deleteFlow;
+    if (!deleteFlow || !primaryGraph) return;
+    setFlowMutationState({ pending: true });
+    try {
+      await deleteFlow(primaryGraph.key);
+      const reloaded = await reloadGraphs();
+      setOpenFlowKeys(reloaded ? mergedFlowKeysFrom(rootFlowKey, reloaded) : [rootFlowKey]);
+      setShowDeleteDialog(false);
+      setFlowMutationState({ pending: false });
+    } catch (error) {
+      setFlowMutationState({ pending: false, error: extractErrorMessage(error) ?? labels.flowManager.deleteError });
+    }
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "fixed inset-y-0 right-0 w-96 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 shadow-xl z-50 flex flex-col", children: [
-    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700", children: [
-      /* @__PURE__ */ jsx9("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.nodePanel.title }),
-      /* @__PURE__ */ jsx9("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx9(X2, { size: 18 }) })
-    ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
-      nodeIssues.length > 0 && /* @__PURE__ */ jsx9("div", { className: "rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40 p-2.5 space-y-1.5", children: nodeIssues.map((issue, i) => /* @__PURE__ */ jsx9(IssueRow, { issue }, i)) }),
-      isFixedLogic && /* @__PURE__ */ jsx9("p", { className: "text-xs text-purple-700 dark:text-purple-400 bg-purple-50 dark:bg-purple-950/30 rounded-lg p-2", children: labels.nodePanel.fixedLogicNotice }),
-      isAction && /* @__PURE__ */ jsx9("p", { className: "text-xs text-orange-700 dark:text-orange-400 bg-orange-50 dark:bg-orange-950/30 rounded-lg p-2", children: labels.nodePanel.actionNotice }),
-      isCondition && /* @__PURE__ */ jsx9("p", { className: "text-xs text-cyan-700 dark:text-cyan-400 bg-cyan-50 dark:bg-cyan-950/30 rounded-lg p-2", children: labels.nodePanel.conditionNotice }),
-      draft.contextKey && /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.contextKey }),
-        /* @__PURE__ */ jsx9("input", { value: draft.contextKey, disabled: true, className: "w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500" })
+  const editingGraph = editingRef ? workingGraphs[editingRef.flowKey] : null;
+  const editingNode = editingRef && editingGraph ? editingGraph.nodes[editingRef.nodeId] : null;
+  const otherFlows = useMemo2(
+    () => Object.values(graphs ?? {}).filter((graph) => graph.key !== editingRef?.flowKey).map((graph) => ({ key: graph.key, label: graph.label })),
+    [graphs, editingRef?.flowKey]
+  );
+  const keyIsValid = FLOW_KEY_PATTERN.test(newFlow.key);
+  const canCreateFlow = Boolean(api.createFlow);
+  const canDeleteFlow = Boolean(api.deleteFlow) && primaryFlowKey !== rootFlowKey;
+  return /* @__PURE__ */ jsxs11("div", { className: `space-y-4 h-full flex flex-col ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx12(TooltipLayer, {}),
+    /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between flex-wrap gap-3", children: [
+      showHeader && /* @__PURE__ */ jsxs11("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx12("h2", { className: "text-2xl font-bold text-gray-900 dark:text-gray-100", children: labels.workspace.title }),
+        /* @__PURE__ */ jsx12("p", { className: "text-gray-500 dark:text-gray-400 text-sm mt-1", children: labels.workspace.subtitle })
       ] }),
-      !isFixedLogic && !isAction && !isCondition && /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.questionType }),
-        /* @__PURE__ */ jsx9(
-          "select",
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center justify-end gap-3 ml-auto", children: [
+        saveState === "success" && /* @__PURE__ */ jsx12("span", { className: "text-sm text-green-600", children: labels.workspace.saveSuccess }),
+        saveState === "error" && /* @__PURE__ */ jsx12("span", { className: "text-sm text-red-600", children: saveErrorMessage ?? labels.workspace.saveError }),
+        /* @__PURE__ */ jsxs11(
+          "button",
           {
-            value: draft.questionType ?? "text",
-            onChange: (e) => setDraft((prev) => ({ ...prev, questionType: e.target.value })),
-            className: `w-full mt-1 ${SELECT_CLASSNAME}`,
-            children: Object.entries(labels.questionTypeLabels).map(([key, label]) => /* @__PURE__ */ jsx9("option", { value: key, children: label }, key))
+            "data-cv-tooltip": viewMode === "map" ? labels.flowMap.toggleToDetail : labels.flowMap.toggleToMap,
+            "aria-label": viewMode === "map" ? labels.flowMap.toggleToDetail : labels.flowMap.toggleToMap,
+            type: "button",
+            onClick: () => setViewMode((mode) => mode === "map" ? "detail" : "map"),
+            className: OUTLINE_BUTTON,
+            children: [
+              viewMode === "map" ? /* @__PURE__ */ jsx12(Workflow, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx12(MapIcon, { size: 14, "aria-hidden": "true" }),
+              viewMode === "map" ? labels.flowMap.toggleToDetail : labels.flowMap.toggleToMap
+            ]
           }
-        )
-      ] }),
-      !isFixedLogic && !isAction && !isCondition && /* @__PURE__ */ jsx9(
-        WhatsAppTextField,
-        {
-          label: labels.nodePanel.question,
-          value: draft.question ?? "",
-          options: draft.questionType === "choice" ? draft.options : void 0,
-          onValueChange: (value) => setDraft((prev) => ({ ...prev, question: value })),
-          labels
-        }
-      ),
-      isCondition && /* @__PURE__ */ jsxs8("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs8("div", { children: [
-          /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.conditionVariable }),
-          /* @__PURE__ */ jsx9(
-            "input",
+        ),
+        viewMode === "detail" && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsxs11(
+            "button",
             {
-              value: draft.conditionContextKey ?? "",
-              onChange: (e) => setDraft((prev) => ({ ...prev, conditionContextKey: e.target.value })),
-              list: "condition-context-keys",
-              className: `w-full mt-1 ${INPUT_CLASSNAME}`
+              type: "button",
+              onClick: handleOrganize,
+              className: OUTLINE_BUTTON,
+              "data-cv-tooltip": labels.workspace.organizeTooltip,
+              "aria-label": labels.workspace.organizeTooltip,
+              disabled: !primaryGraph,
+              children: [
+                /* @__PURE__ */ jsx12(LayoutGrid, { size: 14, "aria-hidden": "true" }),
+                " ",
+                labels.workspace.organize
+              ]
             }
           ),
-          /* @__PURE__ */ jsx9("datalist", { id: "condition-context-keys", children: knownContextKeys.map((key) => /* @__PURE__ */ jsx9("option", { value: key }, key)) })
-        ] }),
-        /* @__PURE__ */ jsxs8("div", { children: [
-          /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.conditionOperator }),
-          /* @__PURE__ */ jsx9(
-            "select",
+          /* @__PURE__ */ jsxs11(
+            "button",
             {
-              value: draft.conditionOperator ?? ">",
-              onChange: (e) => setDraft((prev) => ({ ...prev, conditionOperator: e.target.value })),
-              className: `w-full mt-1 ${SELECT_CLASSNAME}`,
-              children: CONDITION_OPERATORS.map((operator) => /* @__PURE__ */ jsx9("option", { value: operator, children: labels.conditionOperatorLabels[operator] ?? operator }, operator))
+              type: "button",
+              onClick: handleDiscardChanges,
+              className: OUTLINE_BUTTON,
+              "data-cv-tooltip": labels.workspace.discardTooltip,
+              "aria-label": labels.workspace.discardTooltip,
+              disabled: !isDirty || saveState === "saving",
+              children: [
+                /* @__PURE__ */ jsx12(Undo2, { size: 14, "aria-hidden": "true" }),
+                " ",
+                labels.workspace.discardChanges
+              ]
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs8("div", { children: [
-          /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.conditionValue }),
-          /* @__PURE__ */ jsx9(
-            "input",
+          ),
+          /* @__PURE__ */ jsxs11(
+            "button",
             {
-              value: draft.conditionValue ?? "",
-              onChange: (e) => setDraft((prev) => ({ ...prev, conditionValue: e.target.value })),
-              className: `w-full mt-1 ${INPUT_CLASSNAME}`
+              "data-cv-tooltip": labels.workspace.saveGraph,
+              "aria-label": labels.workspace.saveGraph,
+              type: "button",
+              onClick: () => void handlePublish(),
+              className: PRIMARY_BUTTON,
+              disabled: !isDirty || errorCount > 0 || saveState === "saving",
+              children: [
+                /* @__PURE__ */ jsx12(Save2, { size: 14, "aria-hidden": "true" }),
+                saveState === "saving" ? labels.workspace.saving : labels.workspace.saveGraph
+              ]
             }
           )
         ] })
+      ] })
+    ] }),
+    viewMode === "detail" && /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2 flex-wrap", children: [
+        graphs && Object.values(graphs).map((graph) => /* @__PURE__ */ jsx12(
+          "button",
+          {
+            "data-cv-tooltip": graph.label,
+            "aria-label": graph.label,
+            type: "button",
+            onClick: () => focusFlow(graph.key),
+            className: `px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ${primaryFlowKey === graph.key ? "bg-blue-600 text-white border-blue-600" : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-blue-300"}`,
+            children: graph.label
+          },
+          graph.key
+        )),
+        canCreateFlow && /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            "data-cv-tooltip": labels.flowManager.newFlow,
+            "aria-label": labels.flowManager.newFlow,
+            type: "button",
+            onClick: () => {
+              setFlowMutationState({ pending: false });
+              setShowCreateDialog(true);
+            },
+            className: "inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:border-blue-400 hover:text-blue-600",
+            children: [
+              /* @__PURE__ */ jsx12(Plus4, { size: 12, "aria-hidden": "true" }),
+              " ",
+              labels.flowManager.newFlow
+            ]
+          }
+        )
       ] }),
-      isAction && draft.actionKind === "send_product_list" && /* @__PURE__ */ jsx9(
-        WhatsAppTextField,
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        primaryGraph && /* @__PURE__ */ jsx12(
+          FlowPalette,
+          {
+            onAdd: handleAddNode,
+            labels,
+            ...actionOptions ? { actionOptions: [...actionOptions] } : {}
+          }
+        ),
+        primaryGraph && canDeleteFlow && /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            "data-cv-tooltip": labels.flowManager.deleteFlow,
+            "aria-label": labels.flowManager.deleteFlow,
+            type: "button",
+            onClick: () => {
+              setFlowMutationState({ pending: false });
+              setShowDeleteDialog(true);
+            },
+            className: "inline-flex items-center gap-1.5 rounded-lg border border-red-200 dark:border-red-900 px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30",
+            children: [
+              /* @__PURE__ */ jsx12(Trash22, { size: 13, "aria-hidden": "true" }),
+              " ",
+              labels.flowManager.deleteFlow
+            ]
+          }
+        )
+      ] })
+    ] }),
+    viewMode === "detail" && (errorCount > 0 || warningCount > 0) && /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/60 px-3 py-2 text-xs", children: [
+      /* @__PURE__ */ jsxs11("span", { className: "font-medium text-gray-600 dark:text-gray-300", children: [
+        labels.validation.title,
+        ":"
+      ] }),
+      errorCount > 0 && /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-1 text-red-600 dark:text-red-400 font-medium", children: [
+        /* @__PURE__ */ jsx12(AlertCircle3, { size: 13, "aria-hidden": "true" }),
+        " ",
+        labels.validation.errors(errorCount)
+      ] }),
+      warningCount > 0 && /* @__PURE__ */ jsxs11("span", { className: "flex items-center gap-1 text-amber-600 dark:text-amber-400", children: [
+        /* @__PURE__ */ jsx12(AlertTriangle3, { size: 13, "aria-hidden": "true" }),
+        " ",
+        labels.validation.warnings(warningCount)
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex-1 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden relative", children: [
+      loadState === "loading" && /* @__PURE__ */ jsx12("p", { className: "text-center text-gray-400 py-12", children: labels.workspace.loading }),
+      loadState === "error" && /* @__PURE__ */ jsx12("p", { className: "text-center text-red-500 py-12", children: labels.workspace.loadError }),
+      loadState === "ready" && graphs && viewMode === "map" && /* @__PURE__ */ jsx12(
+        FlowMapCanvas,
         {
-          label: labels.nodePanel.fallbackMessage,
-          value: draft.fallbackMessage ?? "",
-          onValueChange: (value) => setDraft((prev) => ({ ...prev, fallbackMessage: value })),
-          placeholder: "(usa a mensagem padr\xE3o de fallback se vazio)",
-          labels
+          graphs,
+          rootKey: rootFlowKey,
+          labels,
+          onOpenFlow: (key) => {
+            focusFlow(key);
+            setViewMode("detail");
+          }
         }
       ),
-      isAction && draft.actionKind !== "send_product_list" && /* @__PURE__ */ jsx9(
-        WhatsAppTextField,
+      loadState === "ready" && viewMode === "detail" && primaryGraph && /* @__PURE__ */ jsxs11(
+        ReactFlow2,
         {
-          label: labels.nodePanel.directMessage,
-          value: draft.directMessage ?? "",
-          onValueChange: (value) => setDraft((prev) => ({ ...prev, directMessage: value })),
-          placeholder: "(usa a mensagem padr\xE3o de encaminhamento se vazio)",
-          labels
+          nodes: rfNodes,
+          edges,
+          nodeTypes: RF_NODE_TYPES,
+          edgeTypes: flowEdgeTypes,
+          onNodesChange,
+          onNodeDragStop,
+          onConnect,
+          onReconnect,
+          onInit: setFlowInstance,
+          fitView: true,
+          proOptions: { hideAttribution: true },
+          colorMode: isDark ? "dark" : "light",
+          children: [
+            /* @__PURE__ */ jsx12(Background2, { color: isDark ? BACKGROUND_COLOR_DARK2 : BACKGROUND_COLOR_LIGHT2 }),
+            /* @__PURE__ */ jsx12(Controls2, {}),
+            /* @__PURE__ */ jsx12(Panel, { position: "top-right", children: /* @__PURE__ */ jsx12(
+              FlowLegend,
+              {
+                labels,
+                edgeSamples: legendEdgeSamples(labels),
+                nodeSwatches: LEGEND_NODE_SWATCHES
+              }
+            ) }),
+            /* @__PURE__ */ jsx12(MiniMap, { pannable: true, zoomable: true, className: "!bg-white dark:!bg-gray-800" })
+          ]
         }
-      ),
-      (draft.questionType === "choice" || draft.type === "menu") && /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-1.5", children: [
-          /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.options }),
-          /* @__PURE__ */ jsxs8("button", { onClick: addOption, className: "text-xs text-blue-600 hover:underline flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx9(Plus2, { size: 12 }),
-            " ",
-            labels.nodePanel.addOption
-          ] })
+      )
+    ] }),
+    quickAddFrom && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+      /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 z-40", onClick: () => setQuickAddFrom(null) }),
+      /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          ref: quickAddMenuRef,
+          className: "fixed z-50 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1",
+          style: quickAddMenuStyle,
+          children: [
+            /* @__PURE__ */ jsx12("p", { className: "px-3 py-1.5 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500", children: labels.quickAdd.title }),
+            /* @__PURE__ */ jsx12(
+              FlowPaletteMenu,
+              {
+                onSelect: handleQuickAdd,
+                labels,
+                ...actionOptions ? { actionOptions: [...actionOptions] } : {}
+              }
+            )
+          ]
+        }
+      )
+    ] }),
+    editingNode && editingGraph && /* @__PURE__ */ jsx12(
+      FlowNodePanel,
+      {
+        graph: editingGraph,
+        node: editingNode,
+        issues: editingRef ? issuesByFlow[editingRef.flowKey] ?? [] : [],
+        otherFlows,
+        labels,
+        onClose: () => setEditingRef(null),
+        onChange: handleNodePanelChange,
+        onDelete: handleNodeDelete,
+        ...renderMediaPicker ? { renderMediaPicker } : {}
+      },
+      `${editingRef?.flowKey}:${editingRef?.nodeId}`
+    ),
+    showCreateDialog && canCreateFlow && /* @__PURE__ */ jsxs11(FlowDialog, { title: labels.flowManager.createTitle, onClose: () => setShowCreateDialog(false), children: [
+      /* @__PURE__ */ jsxs11("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs11("div", { children: [
+          /* @__PURE__ */ jsx12("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.flowManager.label }),
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              value: newFlow.label,
+              onChange: (event) => setNewFlow((prev) => ({ ...prev, label: event.target.value })),
+              className: `mt-1 ${DIALOG_INPUT}`
+            }
+          )
         ] }),
-        /* @__PURE__ */ jsx9("div", { className: "space-y-2", children: (draft.options ?? []).map(([id, label], i) => /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsxs11("div", { children: [
+          /* @__PURE__ */ jsx12("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.flowManager.key }),
+          /* @__PURE__ */ jsx12(
             "input",
             {
-              value: id,
-              onChange: (e) => updateOption(i, 0, e.target.value),
-              placeholder: labels.nodePanel.optionId,
-              className: `w-16 ${INPUT_CLASSNAME}`
+              value: newFlow.key,
+              onChange: (event) => setNewFlow((prev) => ({ ...prev, key: event.target.value.toLowerCase() })),
+              className: `mt-1 ${DIALOG_INPUT}`
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx12("p", { className: "text-[11px] text-gray-400 mt-1", children: newFlow.key && !keyIsValid ? labels.flowManager.keyInvalid : labels.flowManager.keyHint })
+        ] }),
+        /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200", children: [
+          /* @__PURE__ */ jsx12(
             "input",
             {
-              value: label,
-              onChange: (e) => updateOption(i, 1, e.target.value),
-              placeholder: labels.nodePanel.optionLabel,
-              className: `flex-1 ${INPUT_CLASSNAME}`
+              type: "checkbox",
+              checked: newFlow.showInMenu,
+              onChange: (event) => setNewFlow((prev) => ({ ...prev, showInMenu: event.target.checked }))
             }
           ),
-          /* @__PURE__ */ jsx9("button", { onClick: () => removeOption(i), className: "text-gray-400 hover:text-red-600", children: /* @__PURE__ */ jsx9(Trash2, { size: 14 }) })
-        ] }, i)) })
+          labels.flowManager.showInMenu
+        ] }),
+        newFlow.showInMenu && /* @__PURE__ */ jsxs11("div", { children: [
+          /* @__PURE__ */ jsx12("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.flowManager.menuOptionLabel }),
+          /* @__PURE__ */ jsx12(
+            "input",
+            {
+              value: newFlow.menuOptionLabel,
+              onChange: (event) => setNewFlow((prev) => ({ ...prev, menuOptionLabel: event.target.value })),
+              placeholder: newFlow.label,
+              className: `mt-1 ${DIALOG_INPUT}`
+            }
+          )
+        ] }),
+        flowMutationState.error && /* @__PURE__ */ jsx12("p", { className: "text-xs text-red-600", children: flowMutationState.error })
       ] }),
-      !isAction && /* @__PURE__ */ jsxs8("div", { className: "pt-2 border-t border-gray-100 dark:border-gray-700", children: [
-        /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.next }),
-        /* @__PURE__ */ jsx9("p", { className: "text-[11px] text-gray-400 dark:text-gray-500 mb-1", children: labels.nodePanel.nextHint }),
-        typeof draft.next !== "object" && !isCondition ? /* @__PURE__ */ jsxs8(
-          "select",
+      /* @__PURE__ */ jsxs11("div", { className: "flex justify-end gap-2 mt-4", children: [
+        /* @__PURE__ */ jsx12("button", { "data-cv-tooltip": labels.nodePanel.cancel, "aria-label": labels.nodePanel.cancel, type: "button", className: OUTLINE_BUTTON, onClick: () => setShowCreateDialog(false), children: labels.nodePanel.cancel }),
+        /* @__PURE__ */ jsx12(
+          "button",
           {
-            value: typeof draft.next === "string" ? draft.next : "",
-            onChange: (e) => updateNextString(e.target.value),
-            className: `w-full mt-1 ${SELECT_CLASSNAME}`,
+            "data-cv-tooltip": labels.flowManager.create,
+            "aria-label": labels.flowManager.create,
+            type: "button",
+            className: PRIMARY_BUTTON,
+            onClick: () => void handleCreateFlow(),
+            disabled: !keyIsValid || !newFlow.label || flowMutationState.pending,
+            children: flowMutationState.pending ? labels.flowManager.creating : labels.flowManager.create
+          }
+        )
+      ] })
+    ] }),
+    showDeleteDialog && canDeleteFlow && /* @__PURE__ */ jsxs11(FlowDialog, { title: labels.flowManager.deleteFlow, onClose: () => setShowDeleteDialog(false), children: [
+      /* @__PURE__ */ jsx12("p", { className: "text-sm text-gray-600 dark:text-gray-300", children: primaryGraph ? labels.flowManager.deleteConfirm(primaryGraph.label) : "" }),
+      flowMutationState.error && /* @__PURE__ */ jsx12("p", { className: "text-xs text-red-600 mt-2", children: flowMutationState.error }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex justify-end gap-2 mt-4", children: [
+        /* @__PURE__ */ jsx12("button", { "data-cv-tooltip": labels.nodePanel.cancel, "aria-label": labels.nodePanel.cancel, type: "button", className: OUTLINE_BUTTON, onClick: () => setShowDeleteDialog(false), children: labels.nodePanel.cancel }),
+        /* @__PURE__ */ jsxs11(
+          "button",
+          {
+            "data-cv-tooltip": labels.flowManager.deleteFlow,
+            "aria-label": labels.flowManager.deleteFlow,
+            type: "button",
+            className: "inline-flex items-center gap-1.5 rounded-lg bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700 disabled:opacity-40",
+            onClick: () => void handleDeleteFlow(),
+            disabled: flowMutationState.pending,
             children: [
-              /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014" }),
-              nextNodeOptions()
+              /* @__PURE__ */ jsx12(Trash22, { size: 13, "aria-hidden": "true" }),
+              " ",
+              labels.flowManager.deleteFlow
             ]
           }
-        ) : /* @__PURE__ */ jsxs8("div", { className: "space-y-2 mt-1", children: [
-          conditionAnswerIds.map((id) => /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx9("span", { className: "text-xs text-gray-500 w-32 shrink-0", children: isCondition ? id === "true" ? labels.nodePanel.conditionTrue : labels.nodePanel.conditionFalse : labels.nodePanel.nextByAnswer(id) }),
-            /* @__PURE__ */ jsxs8(
-              "select",
-              {
-                value: draft.next && typeof draft.next === "object" ? draft.next.byAnswer[id] ?? "" : "",
-                onChange: (e) => updateNextByAnswer(id, e.target.value),
-                className: `flex-1 ${SELECT_CLASSNAME}`,
-                children: [
-                  /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014" }),
-                  nextNodeOptions()
-                ]
-              }
-            )
-          ] }, id)),
-          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx9("span", { className: "text-xs text-gray-500 w-32 shrink-0", children: isCondition ? labels.nodePanel.conditionVariableMissing : labels.nodePanel.nextDefault }),
-            /* @__PURE__ */ jsxs8(
-              "select",
-              {
-                value: draft.next && typeof draft.next === "object" ? draft.next.default : "",
-                onChange: (e) => updateNextDefault(e.target.value),
-                className: `flex-1 ${SELECT_CLASSNAME}`,
-                children: [
-                  /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014" }),
-                  nextNodeOptions()
-                ]
-              }
-            )
-          ] })
-        ] })
+        )
       ] })
-    ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "p-4 border-t border-gray-100 dark:border-gray-700 flex gap-2", children: [
-      /* @__PURE__ */ jsxs8("button", { onClick: () => onChange(draft), className: "flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700", children: [
-        /* @__PURE__ */ jsx9(Save, { size: 14 }),
-        " ",
-        labels.nodePanel.save
-      ] }),
-      !isStart && /* @__PURE__ */ jsx9(
-        "button",
-        {
-          onClick: () => {
-            if (window.confirm(labels.nodePanel.deleteConfirm)) onDelete(node.id);
-          },
-          title: labels.nodePanel.delete,
-          className: "px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg",
-          children: /* @__PURE__ */ jsx9(Trash2, { size: 14 })
-        }
-      ),
-      /* @__PURE__ */ jsx9("button", { onClick: onClose, className: "px-4 py-2 text-sm text-gray-600 dark:text-gray-300 hover:underline", children: labels.nodePanel.cancel })
     ] })
   ] });
 }
+function FlowDialog({
+  title,
+  onClose,
+  children
+}) {
+  return /* @__PURE__ */ jsxs11("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4", children: [
+    /* @__PURE__ */ jsx12("div", { className: "absolute inset-0", onClick: onClose, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        className: "relative w-full max-w-md rounded-2xl bg-white dark:bg-gray-800 p-5 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsx12("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 mb-3", children: title }),
+          children
+        ]
+      }
+    )
+  ] });
+}
 export {
   BUILT_IN_ACTION_KINDS,
   CONDITION_OPERATORS,
   CROSS_FLOW_PREFIX,
   DEFAULT_FLOW_EDITOR_LABELS,
+  FlowConnectionEdge,
   FlowGroupFrame,
   FlowGroupHeader,
+  FlowLegend,
   FlowMapCanvas,
   FlowMapNode,
   FlowNodeCard,
   FlowNodePanel,
   FlowPalette,
+  FlowPaletteMenu,
   FlowPortalNode,
   FlowWhatsAppPreview,
+  FlowsWorkspace,
+  GROUP_HEADER_NODE_ID,
   NODE_CARD_WIDTH,
+  PASS_THROUGH_ACTION_KINDS,
   WHATSAPP_LIMITS,
+  applyConnection,
+  buildFlowEdges,
+  chainFrameBounds,
+  chainFrameNodeId,
   computeAutoLayout,
   computeFlowMapLayout,
+  computeMergedLayout,
+  countLiveByNode,
   crossFlowKey,
   crossFlowTargetsOf,
+  detachedNodeIds,
   estimateNodeHeight,
   findCollectionChains,
+  flowEdgeTypes,
   flowGroupFrameNodeTypes,
   flowGroupHeaderNodeTypes,
   flowMapNodeTypes,
   flowNodeTypes,
   flowPortalNodeTypes,
   isCrossFlowTarget,
+  isGraphDirty,
   mergeFlowEditorLabels,
+  mergedFlowKeysFrom,
+  namespaceNodeId,
+  newNodeFromSpec,
   nodeLabel,
+  parseNamespacedId,
+  portalNodeId,
+  removeNodeAndCleanRefs,
   rendersAsButtons,
+  resolveConnection,
   slugifyNodeId,
   targetsOf,
   validateGraph