@adatechnology/conversations-ui 0.1.0-rc.39 → 0.1.0-rc.40

package/dist/flows/index.js

@@ -1,15 +1,17 @@
 import {
   TooltipLayer
-} from "../chunk-DXPSPUWF.js";
+} from "../chunk-DKPXKQGC.js";
 import {
   parseWhatsAppFormatting,
   useIsDarkTheme
 } from "../chunk-WCBDXZ3X.js";
 
 // src/flows/FlowNodeCard.tsx
+import { useState } from "react";
 import { Handle, Position } from "@xyflow/react";
 import {
   MessageCircleQuestion,
+  Plus,
   GitBranch,
   Zap,
   ListTree,
@@ -18,9 +20,254 @@ import {
   AlertCircle,
   Headset,
   Clock3,
-  ShoppingBag
+  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 = 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);
+var NODE_CARD_WIDTH = 240;
+function estimateNodeHeight(node) {
+  const HEADER_HEIGHT = 28;
+  const BODY_HEIGHT = 56;
+  const PADDING = 16;
+  const ROW_HEIGHT = 34;
+  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 = {
+  MAX_BUTTONS: 3,
+  MAX_LIST_ROWS: 10,
+  BUTTON_TITLE_MAX: 20,
+  LIST_ROW_TITLE_MAX: 24,
+  BODY_MAX: 1024
+};
+function rendersAsButtons(options) {
+  return (options?.length ?? 0) <= WHATSAPP_LIMITS.MAX_BUTTONS;
+}
+function targetsOf(node) {
+  if (!node.next) return [];
+  if (typeof node.next === "string") return [{ target: node.next }];
+  return [
+    ...Object.entries(node.next.byAnswer).map(([optionId, target]) => ({ target, optionId })),
+    { target: node.next.default, isDefault: true }
+  ];
+}
+function validateGraph(graph, issueText) {
+  const issues = [];
+  const nodeIds = new Set(Object.keys(graph.nodes));
+  const isValidTarget = (target) => nodeIds.has(target) || isCrossFlowTarget(target);
+  if (!nodeIds.has(graph.startNodeId)) {
+    issues.push({ severity: "error", message: issueText.noStart });
+  }
+  for (const node of Object.values(graph.nodes)) {
+    for (const { target } of targetsOf(node)) {
+      if (!isValidTarget(target)) {
+        issues.push({ severity: "error", nodeId: node.id, message: issueText.brokenRef(node.id, target) });
+      }
+    }
+    const isChoice = node.questionType === "choice" || node.type === "menu";
+    if (isChoice) {
+      const options = node.options ?? [];
+      if (options.length === 0) {
+        issues.push({ severity: "error", nodeId: node.id, message: issueText.choiceWithoutOptions(node.id) });
+      }
+      const seen = /* @__PURE__ */ new Set();
+      for (const [optionId, label] of options) {
+        if (seen.has(optionId)) {
+          issues.push({ severity: "error", nodeId: node.id, message: issueText.duplicatedOptionId(node.id, optionId) });
+        }
+        seen.add(optionId);
+        const byAnswer = typeof node.next === "object" && node.next ? node.next.byAnswer : {};
+        if (!byAnswer[optionId]) {
+          issues.push({ severity: "warning", nodeId: node.id, message: issueText.optionWithoutTarget(node.id, label) });
+        }
+        const usesButtons = rendersAsButtons(options);
+        if (usesButtons && label.length > WHATSAPP_LIMITS.BUTTON_TITLE_MAX) {
+          issues.push({ severity: "error", nodeId: node.id, message: issueText.buttonTitleTooLong(node.id, label) });
+        }
+        if (!usesButtons && label.length > WHATSAPP_LIMITS.LIST_ROW_TITLE_MAX) {
+          issues.push({ severity: "error", nodeId: node.id, message: issueText.listTitleTooLong(node.id, label) });
+        }
+      }
+      if (options.length > WHATSAPP_LIMITS.MAX_LIST_ROWS) {
+        issues.push({ severity: "error", nodeId: node.id, message: issueText.tooManyOptions(node.id, options.length) });
+      }
+    }
+    const bodyText = node.question ?? node.directMessage ?? "";
+    if (bodyText.length > WHATSAPP_LIMITS.BODY_MAX) {
+      issues.push({ severity: "error", nodeId: node.id, message: issueText.bodyTooLong(node.id) });
+    }
+    if (node.type === "question" && !node.next) {
+      issues.push({ severity: "warning", nodeId: node.id, message: issueText.deadEndQuestion(node.id) });
+    }
+    if (node.type === "condition") {
+      if (!node.conditionContextKey || !node.conditionOperator || !node.conditionValue) {
+        issues.push({ severity: "error", nodeId: node.id, message: issueText.conditionIncomplete(node.id) });
+      }
+      const byAnswer = typeof node.next === "object" && node.next ? node.next.byAnswer : {};
+      if (!byAnswer.true)
+        issues.push({
+          severity: "warning",
+          nodeId: node.id,
+          message: issueText.conditionBranchMissing(node.id, "true")
+        });
+      if (!byAnswer.false)
+        issues.push({
+          severity: "warning",
+          nodeId: node.id,
+          message: issueText.conditionBranchMissing(node.id, "false")
+        });
+    }
+  }
+  for (const id of findUnreachable(graph)) {
+    issues.push({ severity: "warning", nodeId: id, message: issueText.unreachable(id) });
+  }
+  return issues;
+}
+function findUnreachable(graph) {
+  const reachable = /* @__PURE__ */ new Set();
+  const queue = [graph.startNodeId];
+  while (queue.length > 0) {
+    const id = queue.shift();
+    if (reachable.has(id) || !graph.nodes[id]) continue;
+    reachable.add(id);
+    for (const { target } of targetsOf(graph.nodes[id])) {
+      if (!isCrossFlowTarget(target)) queue.push(target);
+    }
+  }
+  return Object.keys(graph.nodes).filter((id) => !reachable.has(id));
+}
+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);
+  }
+  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 = {};
+  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;
+}
+function crossFlowTargetsOf(graph) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const node of Object.values(graph.nodes)) {
+    for (const { target } of targetsOf(node)) {
+      if (isCrossFlowTarget(target)) keys.add(crossFlowKey(target));
+    }
+  }
+  return [...keys];
+}
+function computeFlowMapLayout(graphs, rootKey) {
+  const H_GAP = 280;
+  const V_GAP = 170;
+  const rank = {};
+  const queue = graphs[rootKey] ? [rootKey] : Object.keys(graphs);
+  if (graphs[rootKey]) rank[rootKey] = 0;
+  while (queue.length > 0) {
+    const key = queue.shift();
+    const g = graphs[key];
+    if (!g) continue;
+    for (const target of crossFlowTargetsOf(g)) {
+      if (!graphs[target]) continue;
+      if (rank[target] === void 0) {
+        rank[target] = rank[key] + 1;
+        queue.push(target);
+      }
+    }
+  }
+  const maxRank = Math.max(0, ...Object.values(rank));
+  let strayRank = maxRank + 1;
+  for (const key of Object.keys(graphs)) {
+    if (rank[key] === void 0) rank[key] = strayRank++;
+  }
+  const layers = {};
+  for (const [key, r] of Object.entries(rank)) {
+    layers[r] = [...layers[r] ?? [], key];
+  }
+  const positions = {};
+  for (const [r, keys] of Object.entries(layers)) {
+    const width = (keys.length - 1) * H_GAP;
+    keys.forEach((key, index) => {
+      positions[key] = { x: index * H_GAP - width / 2, y: Number(r) * V_GAP };
+    });
+  }
+  return positions;
+}
+function findCollectionChains(graph) {
+  const actionIds = new Set(
+    Object.values(graph.nodes).filter((n) => n.type === "action").map((n) => n.id)
+  );
+  const memo = /* @__PURE__ */ new Map();
+  function reachableActions(id, stack) {
+    if (memo.has(id)) return memo.get(id);
+    if (stack.has(id)) return /* @__PURE__ */ new Set();
+    if (actionIds.has(id)) return /* @__PURE__ */ new Set([id]);
+    const node = graph.nodes[id];
+    if (!node) return /* @__PURE__ */ new Set();
+    const nextStack = new Set(stack);
+    nextStack.add(id);
+    const result = /* @__PURE__ */ new Set();
+    for (const { target } of targetsOf(node)) {
+      if (isCrossFlowTarget(target) || !graph.nodes[target]) continue;
+      for (const actionId of reachableActions(target, nextStack)) result.add(actionId);
+    }
+    memo.set(id, result);
+    return result;
+  }
+  const nodeIdsByAction = /* @__PURE__ */ new Map();
+  for (const node of Object.values(graph.nodes)) {
+    if (node.type !== "question") continue;
+    const reached = reachableActions(node.id, /* @__PURE__ */ new Set());
+    if (reached.size !== 1) continue;
+    const [actionNodeId] = [...reached];
+    nodeIdsByAction.set(actionNodeId, [...nodeIdsByAction.get(actionNodeId) ?? [], node.id]);
+  }
+  return [...nodeIdsByAction.entries()].filter(([, nodeIds]) => nodeIds.length >= 2).map(([actionNodeId, nodeIds]) => ({ actionNodeId, nodeIds }));
+}
+function slugifyNodeId(label, existing) {
+  const base = label.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").slice(0, 30) || "no";
+  let candidate = base;
+  let counter = 2;
+  while (existing.has(candidate)) {
+    candidate = `${base}_${counter}`;
+    counter++;
+  }
+  return candidate;
+}
+
+// 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",
@@ -54,51 +301,124 @@ function nodeLabel(node, labels) {
   }
   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 [];
+  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 },
-      { id: "false", label: labels.nodePanel.conditionFalse, isDefault: false }
+      { 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 }];
+  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 })),
-    { id: "__default", label: labels.edgeFallbackLabel, isDefault: true }
+    ...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 }) {
-  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 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 } = 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 hasError = issues.some((i) => i.severity === "error");
-  const hasWarning = !hasError && issues.some((i) => i.severity === "warning");
+  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",
     {
@@ -106,7 +426,16 @@ function FlowNodeCard({ data }) {
       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", className: "!bg-gray-400 dark:!bg-gray-500" }),
+        /* @__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 }),
@@ -114,9 +443,25 @@ function FlowNodeCard({ data }) {
             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(
+            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),
@@ -127,7 +472,19 @@ function FlowNodeCard({ data }) {
           ] })
         ] }),
         /* @__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)) })
+        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
+        )) })
       ]
     }
   );
@@ -219,6 +576,24 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
     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",
@@ -290,321 +665,73 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
     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 },
-    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";
-
-// src/flows/flowGraph.ts
-import { FLOW_ACTION_KIND } from "@adatechnology/meta-whatsapp-contracts";
-var CONDITION_OPERATORS = [">", ">=", "<", "<=", "==", "!=", "contains"];
-var BUILT_IN_ACTION_KINDS = FLOW_ACTION_KIND;
-var CROSS_FLOW_PREFIX = "flow:";
-var isCrossFlowTarget = (target) => target.startsWith(CROSS_FLOW_PREFIX);
-var crossFlowKey = (target) => target.slice(CROSS_FLOW_PREFIX.length);
-var NODE_CARD_WIDTH = 240;
-function estimateNodeHeight(node) {
-  const HEADER_HEIGHT = 28;
-  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;
-  return HEADER_HEIGHT + BODY_HEIGHT + PADDING + rowCount * ROW_HEIGHT;
-}
-var WHATSAPP_LIMITS = {
-  MAX_BUTTONS: 3,
-  MAX_LIST_ROWS: 10,
-  BUTTON_TITLE_MAX: 20,
-  LIST_ROW_TITLE_MAX: 24,
-  BODY_MAX: 1024
-};
-function rendersAsButtons(options) {
-  return (options?.length ?? 0) <= WHATSAPP_LIMITS.MAX_BUTTONS;
-}
-function targetsOf(node) {
-  if (!node.next) return [];
-  if (typeof node.next === "string") return [{ target: node.next }];
-  return [
-    ...Object.entries(node.next.byAnswer).map(([optionId, target]) => ({ target, optionId })),
-    { target: node.next.default, isDefault: true }
-  ];
-}
-function validateGraph(graph, issueText) {
-  const issues = [];
-  const nodeIds = new Set(Object.keys(graph.nodes));
-  const isValidTarget = (target) => nodeIds.has(target) || isCrossFlowTarget(target);
-  if (!nodeIds.has(graph.startNodeId)) {
-    issues.push({ severity: "error", message: issueText.noStart });
-  }
-  for (const node of Object.values(graph.nodes)) {
-    for (const { target } of targetsOf(node)) {
-      if (!isValidTarget(target)) {
-        issues.push({ severity: "error", nodeId: node.id, message: issueText.brokenRef(node.id, target) });
-      }
-    }
-    const isChoice = node.questionType === "choice" || node.type === "menu";
-    if (isChoice) {
-      const options = node.options ?? [];
-      if (options.length === 0) {
-        issues.push({ severity: "error", nodeId: node.id, message: issueText.choiceWithoutOptions(node.id) });
-      }
-      const seen = /* @__PURE__ */ new Set();
-      for (const [optionId, label] of options) {
-        if (seen.has(optionId)) {
-          issues.push({ severity: "error", nodeId: node.id, message: issueText.duplicatedOptionId(node.id, optionId) });
-        }
-        seen.add(optionId);
-        const byAnswer = typeof node.next === "object" && node.next ? node.next.byAnswer : {};
-        if (!byAnswer[optionId]) {
-          issues.push({ severity: "warning", nodeId: node.id, message: issueText.optionWithoutTarget(node.id, label) });
-        }
-        const usesButtons = rendersAsButtons(options);
-        if (usesButtons && label.length > WHATSAPP_LIMITS.BUTTON_TITLE_MAX) {
-          issues.push({ severity: "error", nodeId: node.id, message: issueText.buttonTitleTooLong(node.id, label) });
-        }
-        if (!usesButtons && label.length > WHATSAPP_LIMITS.LIST_ROW_TITLE_MAX) {
-          issues.push({ severity: "error", nodeId: node.id, message: issueText.listTitleTooLong(node.id, label) });
-        }
-      }
-      if (options.length > WHATSAPP_LIMITS.MAX_LIST_ROWS) {
-        issues.push({ severity: "error", nodeId: node.id, message: issueText.tooManyOptions(node.id, options.length) });
-      }
-    }
-    const bodyText = node.question ?? node.directMessage ?? "";
-    if (bodyText.length > WHATSAPP_LIMITS.BODY_MAX) {
-      issues.push({ severity: "error", nodeId: node.id, message: issueText.bodyTooLong(node.id) });
-    }
-    if (node.type === "question" && !node.next) {
-      issues.push({ severity: "warning", nodeId: node.id, message: issueText.deadEndQuestion(node.id) });
-    }
-    if (node.type === "condition") {
-      if (!node.conditionContextKey || !node.conditionOperator || !node.conditionValue) {
-        issues.push({ severity: "error", nodeId: node.id, message: issueText.conditionIncomplete(node.id) });
-      }
-      const byAnswer = typeof node.next === "object" && node.next ? node.next.byAnswer : {};
-      if (!byAnswer.true)
-        issues.push({
-          severity: "warning",
-          nodeId: node.id,
-          message: issueText.conditionBranchMissing(node.id, "true")
-        });
-      if (!byAnswer.false)
-        issues.push({
-          severity: "warning",
-          nodeId: node.id,
-          message: issueText.conditionBranchMissing(node.id, "false")
-        });
-    }
-  }
-  for (const id of findUnreachable(graph)) {
-    issues.push({ severity: "warning", nodeId: id, message: issueText.unreachable(id) });
-  }
-  return issues;
-}
-function findUnreachable(graph) {
-  const reachable = /* @__PURE__ */ new Set();
-  const queue = [graph.startNodeId];
-  while (queue.length > 0) {
-    const id = queue.shift();
-    if (reachable.has(id) || !graph.nodes[id]) continue;
-    reachable.add(id);
-    for (const { target } of targetsOf(graph.nodes[id])) {
-      if (!isCrossFlowTarget(target)) queue.push(target);
-    }
-  }
-  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++;
-  }
-  const layers = {};
-  for (const [id, r] of Object.entries(rank)) {
-    layers[r] = [...layers[r] ?? [], id];
-  }
-  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;
-  }
-  return positions;
-}
-function crossFlowTargetsOf(graph) {
-  const keys = /* @__PURE__ */ new Set();
-  for (const node of Object.values(graph.nodes)) {
-    for (const { target } of targetsOf(node)) {
-      if (isCrossFlowTarget(target)) keys.add(crossFlowKey(target));
-    }
-  }
-  return [...keys];
-}
-function computeFlowMapLayout(graphs, rootKey) {
-  const H_GAP = 280;
-  const V_GAP = 170;
-  const rank = {};
-  const queue = graphs[rootKey] ? [rootKey] : Object.keys(graphs);
-  if (graphs[rootKey]) rank[rootKey] = 0;
-  while (queue.length > 0) {
-    const key = queue.shift();
-    const g = graphs[key];
-    if (!g) continue;
-    for (const target of crossFlowTargetsOf(g)) {
-      if (!graphs[target]) continue;
-      if (rank[target] === void 0) {
-        rank[target] = rank[key] + 1;
-        queue.push(target);
-      }
-    }
-  }
-  const maxRank = Math.max(0, ...Object.values(rank));
-  let strayRank = maxRank + 1;
-  for (const key of Object.keys(graphs)) {
-    if (rank[key] === void 0) rank[key] = strayRank++;
-  }
-  const layers = {};
-  for (const [key, r] of Object.entries(rank)) {
-    layers[r] = [...layers[r] ?? [], key];
-  }
-  const positions = {};
-  for (const [r, keys] of Object.entries(layers)) {
-    const width = (keys.length - 1) * H_GAP;
-    keys.forEach((key, index) => {
-      positions[key] = { x: index * H_GAP - width / 2, y: Number(r) * V_GAP };
-    });
-  }
-  return positions;
-}
-function findCollectionChains(graph) {
-  const actionIds = new Set(
-    Object.values(graph.nodes).filter((n) => n.type === "action").map((n) => n.id)
-  );
-  const memo = /* @__PURE__ */ new Map();
-  function reachableActions(id, stack) {
-    if (memo.has(id)) return memo.get(id);
-    if (stack.has(id)) return /* @__PURE__ */ new Set();
-    if (actionIds.has(id)) return /* @__PURE__ */ new Set([id]);
-    const node = graph.nodes[id];
-    if (!node) return /* @__PURE__ */ new Set();
-    const nextStack = new Set(stack);
-    nextStack.add(id);
-    const result = /* @__PURE__ */ new Set();
-    for (const { target } of targetsOf(node)) {
-      if (isCrossFlowTarget(target) || !graph.nodes[target]) continue;
-      for (const actionId of reachableActions(target, nextStack)) result.add(actionId);
-    }
-    memo.set(id, result);
-    return result;
-  }
-  const nodeIdsByAction = /* @__PURE__ */ new Map();
-  for (const node of Object.values(graph.nodes)) {
-    if (node.type !== "question") continue;
-    const reached = reachableActions(node.id, /* @__PURE__ */ new Set());
-    if (reached.size !== 1) continue;
-    const [actionNodeId] = [...reached];
-    nodeIdsByAction.set(actionNodeId, [...nodeIdsByAction.get(actionNodeId) ?? [], node.id]);
+    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."
   }
-  return [...nodeIdsByAction.entries()].filter(([, nodeIds]) => nodeIds.length >= 2).map(([actionNodeId, nodeIds]) => ({ actionNodeId, nodeIds }));
+};
+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 }
+  };
 }
-function slugifyNodeId(label, existing) {
-  const base = label.toLowerCase().normalize("NFD").replace(/[̀-ͯ]/g, "").replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "").slice(0, 30) || "no";
-  let candidate = base;
-  let counter = 2;
-  while (existing.has(candidate)) {
-    candidate = `${base}_${counter}`;
-    counter++;
-  }
-  return candidate;
+
+// 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";
@@ -731,23 +858,122 @@ 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, 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";
+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);
+  function select(spec) {
+    onSelect(spec);
+    setSubmenu(null);
+  }
+  return /* @__PURE__ */ jsxs6(Fragment, { children: [
+    /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs6(
+        "button",
+        {
+          "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", { 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",
+        {
+          "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",
+        {
+          "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", { 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",
+        {
+          "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);
@@ -756,7 +982,6 @@ 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(
@@ -767,155 +992,214 @@ function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
         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",
-          {
-            "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", { 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",
-          {
-            "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",
-          {
-            "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", { 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",
-          {
-            "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
-        )) })
+    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 useState2 } from "react";
-import { Plus as Plus2, Trash2, Save, X as X2, AlertTriangle as AlertTriangle2, AlertCircle as AlertCircle2 } from "lucide-react";
+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 jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+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__ */ jsx8("p", { className: "text-xs text-gray-400 dark:text-gray-500 italic px-1", children: labels.previewPlaceholder });
+    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__ */ 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 }),
+  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__ */ jsx8("div", { className: "mt-1 space-y-1", children: options.map(([id, label]) => /* @__PURE__ */ jsx8(
+      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__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyOption })
+          children: label || /* @__PURE__ */ jsx10("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 })
+      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__ */ jsx8("p", { className: "text-[11px] text-gray-500 dark:text-gray-400 px-1", children: usesButtons ? labels.previewModeButtons : labels.previewModeList })
+    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, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+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) {
@@ -930,10 +1214,10 @@ function WhatsAppTextField({
   placeholder,
   labels
 }) {
-  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(
+  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,
@@ -944,18 +1228,18 @@ function WhatsAppTextField({
         }
       )
     ] }),
-    /* @__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 }) })
+    /* @__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__ */ 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 })
+  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({
@@ -970,11 +1254,12 @@ function FlowNodePanel({
   renderMediaPicker
 }) {
   const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
-  const [draft, setDraft] = useState2(node);
+  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);
@@ -1018,24 +1303,24 @@ function FlowNodePanel({
     setDraft((prev) => ({ ...prev, options: (prev.options ?? []).filter((_, i) => i !== index) }));
   }
   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)) })
+    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__ */ 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", { "data-cv-tooltip": labels.nodePanel.close, "aria-label": labels.nodePanel.close, onClick: onClose, className: "text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx9(X2, { size: 18 }) })
+  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__ */ 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 }),
-      /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.nodeName }),
-        /* @__PURE__ */ jsx9(
+    /* @__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 ?? "",
@@ -1044,11 +1329,11 @@ function FlowNodePanel({
             className: `w-full mt-1 ${INPUT_CLASSNAME}`
           }
         ),
-        /* @__PURE__ */ jsx9("p", { className: "text-[11px] text-gray-400 dark:text-gray-500 mt-1", children: labels.nodePanel.nodeNameHint })
+        /* @__PURE__ */ jsx11("p", { className: "text-[11px] text-gray-400 dark:text-gray-500 mt-1", children: labels.nodePanel.nodeNameHint })
       ] }),
-      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(
+      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,
@@ -1057,19 +1342,19 @@ function FlowNodePanel({
           }
         )
       ] }),
-      !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(
+      !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__ */ jsx9("option", { value: key, children: label }, key))
+            children: Object.entries(labels.questionTypeLabels).map(([key, label]) => /* @__PURE__ */ jsx11("option", { value: key, children: label }, key))
           }
         )
       ] }),
-      !isFixedLogic && !isAction && !isCondition && /* @__PURE__ */ jsx9(
+      !isFixedLogic && !isAction && !isCondition && /* @__PURE__ */ jsx11(
         WhatsAppTextField,
         {
           label: labels.nodePanel.question,
@@ -1079,10 +1364,10 @@ function FlowNodePanel({
           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(
+      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 ?? "",
@@ -1091,11 +1376,11 @@ function FlowNodePanel({
               className: `w-full mt-1 ${INPUT_CLASSNAME}`
             }
           ),
-          /* @__PURE__ */ jsx9("datalist", { id: "condition-context-keys", children: knownContextKeys.map((key) => /* @__PURE__ */ jsx9("option", { value: key }, key)) })
+          /* @__PURE__ */ jsx11("datalist", { id: "condition-context-keys", children: knownContextKeys.map((key) => /* @__PURE__ */ jsx11("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(
+        /* @__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 ?? ">",
@@ -1104,13 +1389,13 @@ function FlowNodePanel({
                 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))
+              children: CONDITION_OPERATORS.map((operator) => /* @__PURE__ */ jsx11("option", { value: operator, children: labels.conditionOperatorLabels[operator] ?? operator }, operator))
             }
           )
         ] }),
-        /* @__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(
+        /* @__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 ?? "",
@@ -1120,7 +1405,7 @@ function FlowNodePanel({
           )
         ] })
       ] }),
-      isAction && draft.actionKind === "send_product_list" && /* @__PURE__ */ jsx9(
+      isAction && draft.actionKind === "send_product_list" && /* @__PURE__ */ jsx11(
         WhatsAppTextField,
         {
           label: labels.nodePanel.fallbackMessage,
@@ -1130,11 +1415,11 @@ function FlowNodePanel({
           labels
         }
       ),
-      isSendMedia && /* @__PURE__ */ jsxs8("div", { children: [
-        /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.media }),
-        /* @__PURE__ */ jsx9("div", { className: "mt-1", children: renderMediaPicker?.(node, graph) ?? /* @__PURE__ */ jsx9("p", { className: "text-xs text-gray-400", children: labels.nodePanel.mediaUnavailable }) })
+      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__ */ jsx9(
+      isAction && draft.actionKind !== "send_product_list" && !isSendMedia && /* @__PURE__ */ jsx11(
         WhatsAppTextField,
         {
           label: labels.nodePanel.directMessage,
@@ -1144,17 +1429,17 @@ function FlowNodePanel({
           labels
         }
       ),
-      (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", { "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__ */ jsx9(Plus2, { size: 12 }),
+      (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__ */ 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__ */ 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,
@@ -1163,7 +1448,7 @@ function FlowNodePanel({
               className: `w-16 ${INPUT_CLASSNAME}`
             }
           ),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx11(
             "input",
             {
               value: label,
@@ -1172,49 +1457,49 @@ function FlowNodePanel({
               className: `flex-1 ${INPUT_CLASSNAME}`
             }
           ),
-          /* @__PURE__ */ jsx9("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__ */ jsx9(Trash2, { size: 14 }) })
+          /* @__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 && /* @__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(
+      (!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",
           {
             value: typeof draft.next === "string" ? draft.next : "",
             onChange: (e) => updateNextString(e.target.value),
             className: `w-full mt-1 ${SELECT_CLASSNAME}`,
             children: [
-              /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014" }),
+              /* @__PURE__ */ jsx11("option", { value: "", children: "\u2014" }),
               nextNodeOptions()
             ]
           }
-        ) : /* @__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(
+        ) : /* @__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__ */ jsx9("option", { value: "", children: "\u2014" }),
+                  /* @__PURE__ */ jsx11("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(
+          /* @__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__ */ jsx9("option", { value: "", children: "\u2014" }),
+                  /* @__PURE__ */ jsx11("option", { value: "", children: "\u2014" }),
                   nextNodeOptions()
                 ]
               }
@@ -1223,8 +1508,8 @@ function FlowNodePanel({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs8("div", { className: "p-4 border-t border-gray-100 dark:border-gray-700 flex gap-2", children: [
-      /* @__PURE__ */ jsxs8(
+    /* @__PURE__ */ jsxs10("div", { className: "p-4 border-t border-gray-100 dark:border-gray-700 flex gap-2", children: [
+      /* @__PURE__ */ jsxs10(
         "button",
         {
           "data-cv-tooltip": labels.nodePanel.save,
@@ -1232,13 +1517,13 @@ function FlowNodePanel({
           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 }),
+            /* @__PURE__ */ jsx11(Save, { size: 14 }),
             " ",
             labels.nodePanel.save
           ]
         }
       ),
-      !isStart && /* @__PURE__ */ jsx9(
+      !isStart && /* @__PURE__ */ jsx11(
         "button",
         {
           onClick: () => {
@@ -1247,26 +1532,27 @@ function FlowNodePanel({
           "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__ */ jsx9(Trash2, { size: 14 })
+          children: /* @__PURE__ */ jsx11(Trash2, { size: 14 })
         }
       ),
-      /* @__PURE__ */ jsx9("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 })
+      /* @__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/FlowsWorkspace.tsx
-import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, 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 Plus3, Trash2 as Trash22, LayoutGrid, AlertTriangle as AlertTriangle3, AlertCircle as AlertCircle3, Save as Save2, Undo2, Map as MapIcon, Workflow } from "lucide-react";
+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/flowEditorOps.ts
 var NAMESPACE_SEPARATOR = "::";
@@ -1346,6 +1632,21 @@ 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/flowCanvasModel.ts
 var COLUMN_GAP = 360;
@@ -1387,7 +1688,10 @@ function computeMergedLayout(params) {
       nodeById.set(namespaceNodeId(key, node.id), node);
     }
   }
-  function forwardEdges(flowKey, 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)) {
@@ -1400,41 +1704,17 @@ function computeMergedLayout(params) {
     }
     return result;
   }
-  const rank = /* @__PURE__ */ new Map();
   const primaryGraph = graphs[primaryFlowKey];
-  const rootId = primaryGraph ? namespaceNodeId(primaryFlowKey, primaryGraph.startNodeId) : void 0;
-  if (rootId && nodeById.has(rootId)) {
-    rank.set(rootId, 0);
-    const queue = [rootId];
-    while (queue.length > 0) {
-      const id = queue.shift();
-      const node = nodeById.get(id);
-      if (!node) continue;
-      for (const nextId of forwardEdges(parseNamespacedId(id).flowKey, node)) {
-        if (!rank.has(nextId)) {
-          rank.set(nextId, rank.get(id) + 1);
-          queue.push(nextId);
-        }
-      }
-    }
-  }
-  const strayRank = Math.max(0, ...rank.values()) + 1;
-  for (const id of nodeById.keys()) {
-    if (!rank.has(id)) rank.set(id, strayRank);
-  }
-  const layers = /* @__PURE__ */ new Map();
-  for (const [id, value] of rank) {
-    const layer = layers.get(value);
-    if (layer) layer.push(id);
-    else layers.set(value, [id]);
-  }
+  const placed = cascadeOrder({
+    rootId: primaryGraph ? namespaceNodeId(primaryFlowKey, primaryGraph.startNodeId) : "",
+    allIds: [...nodeById.keys()],
+    forwardEdges
+  });
   const positions = /* @__PURE__ */ new Map();
-  for (const value of [...layers.keys()].sort((a, b) => a - b)) {
-    let cursorY = 0;
-    for (const id of layers.get(value)) {
-      positions.set(id, { x: value * COLUMN_GAP, y: cursorY });
-      cursorY += estimateNodeHeight(nodeById.get(id)) + ROW_GAP;
-    }
+  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;
 }
@@ -1465,6 +1745,7 @@ function buildFlowEdges(params) {
         }
         const source = namespaceNodeId(flowKey, nodeId);
         const edgeTarget = namespaceNodeId(targetFlowKey, targetNodeId);
+        if (source === edgeTarget) continue;
         if (isDefault) {
           edges.push({
             id: `${source}->${edgeTarget}-default`,
@@ -1550,16 +1831,42 @@ function newNodeFromSpec(spec, existingIds) {
   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 Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+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 EDGE_COLOR_BRANCH = "#8b5cf6";
@@ -1568,7 +1875,7 @@ var EDGE_COLOR_LIVE = "#3b82f6";
 var EDGE_COLOR_CROSS_FLOW = "#06b6d4";
 var BACKGROUND_COLOR_LIGHT2 = "#cbd5e1";
 var BACKGROUND_COLOR_DARK2 = "#334155";
-function styleEdge(spec) {
+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;
@@ -1578,7 +1885,12 @@ function styleEdge(spec) {
     source: spec.source,
     target: spec.target,
     ...spec.sourceHandle === void 0 ? {} : { sourceHandle: spec.sourceHandle },
-    type: "bezier",
+    type: "flowConnection",
+    reconnectable: "target",
+    data: {
+      disconnectLabel: params.disconnectLabel,
+      onDisconnect: () => params.onDisconnect(spec)
+    },
     animated: spec.live,
     style: {
       stroke: color,
@@ -1607,23 +1919,24 @@ function FlowsWorkspace({
 }) {
   const labels = useMemo2(() => mergeFlowEditorLabels(labelsOverride), [labelsOverride]);
   const isDark = useIsDarkTheme();
-  const [graphs, setGraphs] = useState3(void 0);
-  const [loadState, setLoadState] = useState3("loading");
-  const [livePositions, setLivePositions] = useState3(void 0);
-  const [viewMode, setViewMode] = useState3("detail");
-  const [openFlowKeys, setOpenFlowKeys] = useState3([rootFlowKey]);
-  const [hasAutoMerged, setHasAutoMerged] = useState3(false);
-  const [workingGraphs, setWorkingGraphs] = useState3({});
-  const [editingRef, setEditingRef] = useState3(null);
-  const [saveState, setSaveState] = useState3("idle");
-  const [saveErrorMessage, setSaveErrorMessage] = useState3(void 0);
-  const [showCreateDialog, setShowCreateDialog] = useState3(false);
-  const [showDeleteDialog, setShowDeleteDialog] = useState3(false);
-  const [newFlow, setNewFlow] = useState3({ key: "", label: "", showInMenu: false, menuOptionLabel: "" });
-  const [flowMutationState, setFlowMutationState] = useState3({ pending: false });
-  const [rfNodes, setRfNodes] = useState3([]);
-  const [flowInstance, setFlowInstance] = useState3(null);
-  const [pendingFocusNodeId, setPendingFocusNodeId] = useState3(null);
+  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 reloadGraphs = useCallback(async () => {
     try {
       const loaded = await api.getGraphs();
@@ -1635,10 +1948,10 @@ function FlowsWorkspace({
       return void 0;
     }
   }, [api]);
-  useEffect2(() => {
+  useEffect3(() => {
     void reloadGraphs();
   }, [reloadGraphs]);
-  useEffect2(() => {
+  useEffect3(() => {
     const fetchLive = api.getLivePositions;
     if (!fetchLive) return;
     let active = true;
@@ -1658,12 +1971,12 @@ function FlowsWorkspace({
   }, [api, livePollIntervalMs]);
   const primaryFlowKey = openFlowKeys[0] ?? rootFlowKey;
   const primaryGraph = workingGraphs[primaryFlowKey];
-  useEffect2(() => {
+  useEffect3(() => {
     if (!graphs || hasAutoMerged) return;
     setOpenFlowKeys(mergedFlowKeysFrom(rootFlowKey, graphs));
     setHasAutoMerged(true);
   }, [graphs, hasAutoMerged, rootFlowKey]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!graphs) return;
     setWorkingGraphs((prev) => {
       let changed = false;
@@ -1740,16 +2053,17 @@ function FlowsWorkspace({
     () => isMerged ? computeMergedLayout({ openKeys: openFlowKeys, graphs: workingGraphs, primaryFlowKey }) : null,
     [isMerged, openFlowKeys, workingGraphs, primaryFlowKey]
   );
-  const renderedPositionsRef = useRef2(/* @__PURE__ */ new Map());
+  const renderedPositionsRef = useRef3(/* @__PURE__ */ new Map());
   const derivedNodes = useMemo2(() => {
     const allNodes = [];
     for (const flowKey of openFlowKeys) {
       let resolvePosition2 = function(nodeId) {
         if (mergedPositions) {
-          const nsId = namespaceNodeId(flowKey, nodeId);
-          return renderedPositionsRef.current.get(nsId) ?? mergedPositions.get(nsId) ?? { x: 0, y: 0 };
+          const nsId2 = namespaceNodeId(flowKey, nodeId);
+          return renderedPositionsRef.current.get(nsId2) ?? mergedPositions.get(nsId2) ?? { x: 0, y: 0 };
         }
-        return graph.nodes[nodeId]?.position ?? fallbackPositions[nodeId] ?? { 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];
@@ -1779,7 +2093,8 @@ function FlowsWorkspace({
             isDetached: node.id !== graph.startNodeId && !connectedTargets.has(node.id),
             issues: flowIssues,
             labels,
-            onSelect: (nodeId) => setEditingRef({ flowKey, nodeId })
+            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))];
@@ -1854,17 +2169,53 @@ function FlowsWorkspace({
     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(styleEdge),
-    [openFlowKeys, workingGraphs, rootFlowKey, livePositions]
+    () => 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 })
+      )
+    ),
+    [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]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     setRfNodes(derivedNodes);
     for (const node of derivedNodes) {
       if (node.type === "flowNode") renderedPositionsRef.current.set(node.id, node.position);
     }
   }, [derivedNodes]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!pendingFocusNodeId || !flowInstance) return;
     const target = rfNodes.find((node) => node.id === pendingFocusNodeId);
     if (!target) return;
@@ -1910,6 +2261,37 @@ function FlowsWorkspace({
     setEditingRef({ flowKey: primaryFlowKey, nodeId: newNode.id });
     setPendingFocusNodeId(namespaceNodeId(primaryFlowKey, newNode.id));
   }
+  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 handleNodePanelChange(updated) {
     if (!editingRef) return;
     updateFlow(editingRef.flowKey, (graph) => ({ ...graph, nodes: { ...graph.nodes, [updated.id]: updated } }));
@@ -2017,17 +2399,17 @@ function FlowsWorkspace({
   const keyIsValid = FLOW_KEY_PATTERN.test(newFlow.key);
   const canCreateFlow = Boolean(api.createFlow);
   const canDeleteFlow = Boolean(api.deleteFlow) && primaryFlowKey !== rootFlowKey;
-  return /* @__PURE__ */ jsxs9("div", { className: `space-y-4 h-full flex flex-col ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx10(TooltipLayer, {}),
-    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between flex-wrap gap-3", children: [
-      showHeader && /* @__PURE__ */ jsxs9("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx10("h2", { className: "text-2xl font-bold text-gray-900 dark:text-gray-100", children: labels.workspace.title }),
-        /* @__PURE__ */ jsx10("p", { className: "text-gray-500 dark:text-gray-400 text-sm mt-1", children: labels.workspace.subtitle })
+  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 })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex flex-wrap items-center justify-end gap-3 ml-auto", children: [
-        saveState === "success" && /* @__PURE__ */ jsx10("span", { className: "text-sm text-green-600", children: labels.workspace.saveSuccess }),
-        saveState === "error" && /* @__PURE__ */ jsx10("span", { className: "text-sm text-red-600", children: saveErrorMessage ?? labels.workspace.saveError }),
-        /* @__PURE__ */ jsxs9(
+      /* @__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",
           {
             "data-cv-tooltip": viewMode === "map" ? labels.flowMap.toggleToDetail : labels.flowMap.toggleToMap,
@@ -2036,13 +2418,13 @@ function FlowsWorkspace({
             onClick: () => setViewMode((mode) => mode === "map" ? "detail" : "map"),
             className: OUTLINE_BUTTON,
             children: [
-              viewMode === "map" ? /* @__PURE__ */ jsx10(Workflow, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx10(MapIcon, { size: 14, "aria-hidden": "true" }),
+              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
             ]
           }
         ),
-        viewMode === "detail" && /* @__PURE__ */ jsxs9(Fragment2, { children: [
-          /* @__PURE__ */ jsxs9(
+        viewMode === "detail" && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsxs11(
             "button",
             {
               type: "button",
@@ -2052,13 +2434,13 @@ function FlowsWorkspace({
               "aria-label": labels.workspace.organizeTooltip,
               disabled: !primaryGraph,
               children: [
-                /* @__PURE__ */ jsx10(LayoutGrid, { size: 14, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx12(LayoutGrid, { size: 14, "aria-hidden": "true" }),
                 " ",
                 labels.workspace.organize
               ]
             }
           ),
-          /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs11(
             "button",
             {
               type: "button",
@@ -2068,13 +2450,13 @@ function FlowsWorkspace({
               "aria-label": labels.workspace.discardTooltip,
               disabled: !isDirty || saveState === "saving",
               children: [
-                /* @__PURE__ */ jsx10(Undo2, { size: 14, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx12(Undo2, { size: 14, "aria-hidden": "true" }),
                 " ",
                 labels.workspace.discardChanges
               ]
             }
           ),
-          /* @__PURE__ */ jsxs9(
+          /* @__PURE__ */ jsxs11(
             "button",
             {
               "data-cv-tooltip": labels.workspace.saveGraph,
@@ -2084,7 +2466,7 @@ function FlowsWorkspace({
               className: PRIMARY_BUTTON,
               disabled: !isDirty || errorCount > 0 || saveState === "saving",
               children: [
-                /* @__PURE__ */ jsx10(Save2, { size: 14, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx12(Save2, { size: 14, "aria-hidden": "true" }),
                 saveState === "saving" ? labels.workspace.saving : labels.workspace.saveGraph
               ]
             }
@@ -2092,9 +2474,9 @@ function FlowsWorkspace({
         ] })
       ] })
     ] }),
-    viewMode === "detail" && /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-2 flex-wrap", children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2 flex-wrap", children: [
-        graphs && Object.values(graphs).map((graph) => /* @__PURE__ */ jsx10(
+    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,
@@ -2106,7 +2488,7 @@ function FlowsWorkspace({
           },
           graph.key
         )),
-        canCreateFlow && /* @__PURE__ */ jsxs9(
+        canCreateFlow && /* @__PURE__ */ jsxs11(
           "button",
           {
             "data-cv-tooltip": labels.flowManager.newFlow,
@@ -2118,15 +2500,15 @@ function FlowsWorkspace({
             },
             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__ */ jsx10(Plus3, { size: 12, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx12(Plus4, { size: 12, "aria-hidden": "true" }),
               " ",
               labels.flowManager.newFlow
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
-        primaryGraph && /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
+        primaryGraph && /* @__PURE__ */ jsx12(
           FlowPalette,
           {
             onAdd: handleAddNode,
@@ -2134,7 +2516,7 @@ function FlowsWorkspace({
             ...actionOptions ? { actionOptions: [...actionOptions] } : {}
           }
         ),
-        primaryGraph && canDeleteFlow && /* @__PURE__ */ jsxs9(
+        primaryGraph && canDeleteFlow && /* @__PURE__ */ jsxs11(
           "button",
           {
             "data-cv-tooltip": labels.flowManager.deleteFlow,
@@ -2146,7 +2528,7 @@ function FlowsWorkspace({
             },
             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__ */ jsx10(Trash22, { size: 13, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx12(Trash22, { size: 13, "aria-hidden": "true" }),
               " ",
               labels.flowManager.deleteFlow
             ]
@@ -2154,26 +2536,26 @@ function FlowsWorkspace({
         )
       ] })
     ] }),
-    viewMode === "detail" && (errorCount > 0 || warningCount > 0) && /* @__PURE__ */ jsxs9("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__ */ jsxs9("span", { className: "font-medium text-gray-600 dark:text-gray-300", children: [
+    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__ */ jsxs9("span", { className: "flex items-center gap-1 text-red-600 dark:text-red-400 font-medium", children: [
-        /* @__PURE__ */ jsx10(AlertCircle3, { size: 13, "aria-hidden": "true" }),
+      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__ */ jsxs9("span", { className: "flex items-center gap-1 text-amber-600 dark:text-amber-400", children: [
-        /* @__PURE__ */ jsx10(AlertTriangle3, { size: 13, "aria-hidden": "true" }),
+      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__ */ jsxs9("div", { className: "flex-1 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden relative", children: [
-      loadState === "loading" && /* @__PURE__ */ jsx10("p", { className: "text-center text-gray-400 py-12", children: labels.workspace.loading }),
-      loadState === "error" && /* @__PURE__ */ jsx10("p", { className: "text-center text-red-500 py-12", children: labels.workspace.loadError }),
-      loadState === "ready" && graphs && viewMode === "map" && /* @__PURE__ */ jsx10(
+    /* @__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,
         {
           graphs,
@@ -2185,28 +2567,59 @@ function FlowsWorkspace({
           }
         }
       ),
-      loadState === "ready" && viewMode === "detail" && primaryGraph && /* @__PURE__ */ jsxs9(
+      loadState === "ready" && viewMode === "detail" && primaryGraph && /* @__PURE__ */ jsxs11(
         ReactFlow2,
         {
           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__ */ jsx10(Background2, { color: isDark ? BACKGROUND_COLOR_DARK2 : BACKGROUND_COLOR_LIGHT2 }),
-            /* @__PURE__ */ jsx10(Controls2, {}),
-            /* @__PURE__ */ jsx10(MiniMap, { pannable: true, zoomable: true, className: "!bg-white dark:!bg-gray-800" })
+            /* @__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" })
+          ]
+        }
+      )
+    ] }),
+    quickAddFrom && /* @__PURE__ */ jsxs11(Fragment4, { children: [
+      /* @__PURE__ */ jsx12("div", { className: "fixed inset-0 z-40", onClick: () => setQuickAddFrom(null) }),
+      /* @__PURE__ */ jsxs11(
+        "div",
+        {
+          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: { left: quickAddFrom.anchor.x + 12, top: quickAddFrom.anchor.y },
+          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__ */ jsx10(
+    editingNode && editingGraph && /* @__PURE__ */ jsx12(
       FlowNodePanel,
       {
         graph: editingGraph,
@@ -2221,11 +2634,11 @@ function FlowsWorkspace({
       },
       `${editingRef?.flowKey}:${editingRef?.nodeId}`
     ),
-    showCreateDialog && canCreateFlow && /* @__PURE__ */ jsxs9(FlowDialog, { title: labels.flowManager.createTitle, onClose: () => setShowCreateDialog(false), children: [
-      /* @__PURE__ */ jsxs9("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxs9("div", { children: [
-          /* @__PURE__ */ jsx10("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.flowManager.label }),
-          /* @__PURE__ */ jsx10(
+    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,
@@ -2234,9 +2647,9 @@ function FlowsWorkspace({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs9("div", { children: [
-          /* @__PURE__ */ jsx10("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.flowManager.key }),
-          /* @__PURE__ */ jsx10(
+        /* @__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: newFlow.key,
@@ -2244,10 +2657,10 @@ function FlowsWorkspace({
               className: `mt-1 ${DIALOG_INPUT}`
             }
           ),
-          /* @__PURE__ */ jsx10("p", { className: "text-[11px] text-gray-400 mt-1", children: newFlow.key && !keyIsValid ? labels.flowManager.keyInvalid : labels.flowManager.keyHint })
+          /* @__PURE__ */ jsx12("p", { className: "text-[11px] text-gray-400 mt-1", children: newFlow.key && !keyIsValid ? labels.flowManager.keyInvalid : labels.flowManager.keyHint })
         ] }),
-        /* @__PURE__ */ jsxs9("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200", children: [
-          /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsxs11("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200", children: [
+          /* @__PURE__ */ jsx12(
             "input",
             {
               type: "checkbox",
@@ -2257,9 +2670,9 @@ function FlowsWorkspace({
           ),
           labels.flowManager.showInMenu
         ] }),
-        newFlow.showInMenu && /* @__PURE__ */ jsxs9("div", { children: [
-          /* @__PURE__ */ jsx10("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.flowManager.menuOptionLabel }),
-          /* @__PURE__ */ jsx10(
+        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,
@@ -2269,11 +2682,11 @@ function FlowsWorkspace({
             }
           )
         ] }),
-        flowMutationState.error && /* @__PURE__ */ jsx10("p", { className: "text-xs text-red-600", children: flowMutationState.error })
+        flowMutationState.error && /* @__PURE__ */ jsx12("p", { className: "text-xs text-red-600", children: flowMutationState.error })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-2 mt-4", children: [
-        /* @__PURE__ */ jsx10("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__ */ jsx10(
+      /* @__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",
           {
             "data-cv-tooltip": labels.flowManager.create,
@@ -2287,12 +2700,12 @@ function FlowsWorkspace({
         )
       ] })
     ] }),
-    showDeleteDialog && canDeleteFlow && /* @__PURE__ */ jsxs9(FlowDialog, { title: labels.flowManager.deleteFlow, onClose: () => setShowDeleteDialog(false), children: [
-      /* @__PURE__ */ jsx10("p", { className: "text-sm text-gray-600 dark:text-gray-300", children: primaryGraph ? labels.flowManager.deleteConfirm(primaryGraph.label) : "" }),
-      flowMutationState.error && /* @__PURE__ */ jsx10("p", { className: "text-xs text-red-600 mt-2", children: flowMutationState.error }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex justify-end gap-2 mt-4", children: [
-        /* @__PURE__ */ jsx10("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__ */ jsxs9(
+    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,
@@ -2302,7 +2715,7 @@ function FlowsWorkspace({
             onClick: () => void handleDeleteFlow(),
             disabled: flowMutationState.pending,
             children: [
-              /* @__PURE__ */ jsx10(Trash22, { size: 13, "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx12(Trash22, { size: 13, "aria-hidden": "true" }),
               " ",
               labels.flowManager.deleteFlow
             ]
@@ -2317,9 +2730,9 @@ function FlowDialog({
   onClose,
   children
 }) {
-  return /* @__PURE__ */ jsxs9("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40 px-4", children: [
-    /* @__PURE__ */ jsx10("div", { className: "absolute inset-0", onClick: onClose, "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs9(
+  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",
@@ -2327,7 +2740,7 @@ function FlowDialog({
         "aria-label": title,
         className: "relative w-full max-w-md rounded-2xl bg-white dark:bg-gray-800 p-5 shadow-xl",
         children: [
-          /* @__PURE__ */ jsx10("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 mb-3", children: title }),
+          /* @__PURE__ */ jsx12("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 mb-3", children: title }),
           children
         ]
       }
@@ -2339,18 +2752,22 @@ export {
   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,
@@ -2365,6 +2782,7 @@ export {
   detachedNodeIds,
   estimateNodeHeight,
   findCollectionChains,
+  flowEdgeTypes,
   flowGroupFrameNodeTypes,
   flowGroupHeaderNodeTypes,
   flowMapNodeTypes,