@adatechnology/conversations-ui 0.0.0

package/dist/flows/index.js

@@ -0,0 +1,1110 @@
+import {
+  parseWhatsAppFormatting,
+  useDarkMode
+} from "../chunk-ZDURDZTM.js";
+
+// src/flows/FlowNodeCard.tsx
+import { Handle, Position } from "@xyflow/react";
+import { MessageCircleQuestion, GitBranch, Zap, ListTree, Diamond, AlertTriangle, AlertCircle, Headset, Clock3, ShoppingBag } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var NODE_TYPE_COLOR = {
+  question: "border-blue-300 bg-blue-50 dark:bg-blue-950/40 dark:border-blue-800",
+  entrada_choice: "border-purple-300 bg-purple-50 dark:bg-purple-950/40 dark:border-purple-800",
+  action: "border-orange-300 bg-orange-50 dark:bg-orange-950/40 dark:border-orange-800",
+  menu: "border-emerald-300 bg-emerald-50 dark:bg-emerald-950/40 dark:border-emerald-800",
+  condition: "border-cyan-300 bg-cyan-50 dark:bg-cyan-950/40 dark:border-cyan-800"
+};
+var NODE_TYPE_ICON = {
+  question: MessageCircleQuestion,
+  entrada_choice: ListTree,
+  action: Zap,
+  menu: GitBranch,
+  condition: Diamond
+};
+var DEFAULT_ACTION_KIND_ICON = {
+  handoff: Headset,
+  rate_limited_handoff: Clock3,
+  send_product_list: ShoppingBag
+};
+function nodeLabel(node, labels) {
+  if (!node) return "\u2014";
+  if (node.type === "action") {
+    const actionKindLabel = node.actionKind ? labels.actionKindLabels[node.actionKind] : void 0;
+    return node.directMessage || node.fallbackMessage || actionKindLabel || node.actionKind || node.id;
+  }
+  if (node.type === "condition") {
+    if (!node.conditionContextKey || !node.conditionOperator || !node.conditionValue) return node.id;
+    const operatorLabel = labels.conditionOperatorLabels[node.conditionOperator] ?? node.conditionOperator;
+    return `${node.conditionContextKey} ${operatorLabel} ${node.conditionValue}`;
+  }
+  return node.question || node.contextKey || node.id;
+}
+function sourceRows(node, labels) {
+  if (node.type === "action") return [];
+  if (node.type === "condition") {
+    return [
+      { id: "true", label: labels.nodePanel.conditionTrue, isDefault: false },
+      { id: "false", label: labels.nodePanel.conditionFalse, isDefault: false }
+    ];
+  }
+  const isChoice = node.type === "menu" || node.questionType === "choice";
+  if (!isChoice) return [{ id: "next", label: labels.nodePanel.nextRowLabel, isDefault: false }];
+  const options = node.options ?? [];
+  return [
+    ...options.map(([id, label]) => ({ id, label, isDefault: false })),
+    { id: "__default", label: labels.edgeFallbackLabel, isDefault: true }
+  ];
+}
+function SourceRow({ label, isDefault, handleId }) {
+  return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center gap-1.5 rounded-md border border-gray-200 dark:border-gray-600 bg-white/70 dark:bg-gray-900/40 px-2 py-1 pr-3", children: [
+    /* @__PURE__ */ jsx("span", { className: `text-xs truncate flex-1 ${isDefault ? "italic text-gray-400 dark:text-gray-500" : "text-gray-700 dark:text-gray-200"}`, children: label }),
+    /* @__PURE__ */ jsx(
+      Handle,
+      {
+        type: "source",
+        position: Position.Right,
+        id: handleId,
+        style: { position: "absolute", right: -7, top: "50%", transform: "translateY(-50%)" },
+        className: isDefault ? "!bg-gray-400 dark:!bg-gray-500" : "!bg-purple-500"
+      }
+    )
+  ] });
+}
+function FlowNodeCard({ data }) {
+  const { node, liveCount, isStart, isSelected, issues, labels, actionKindIcons, onSelect } = data;
+  const label = nodeLabel(node, labels);
+  const iconMap = { ...DEFAULT_ACTION_KIND_ICON, ...actionKindIcons };
+  const Icon = node.type === "action" && node.actionKind ? iconMap[node.actionKind] ?? NODE_TYPE_ICON[node.type] : NODE_TYPE_ICON[node.type];
+  const rows = sourceRows(node, labels);
+  const hasError = issues.some((i) => i.severity === "error");
+  const hasWarning = !hasError && issues.some((i) => i.severity === "warning");
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      title: label,
+      className: `relative rounded-lg border-2 px-3 py-2 w-60 cursor-pointer shadow-sm hover:shadow-md transition-shadow ${NODE_TYPE_COLOR[node.type]} ${isSelected ? "ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900" : ""}`,
+      onClick: () => onSelect(node.id),
+      children: [
+        /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, id: "target", className: "!bg-gray-400 dark:!bg-gray-500" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 uppercase tracking-wide font-semibold text-gray-500 dark:text-gray-400 text-xs", children: [
+            /* @__PURE__ */ jsx(Icon, { size: 12, strokeWidth: 2.5 }),
+            isStart && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500", title: labels.startNodeTooltip }),
+            labels.legend[node.type]
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            hasError && /* @__PURE__ */ jsx(AlertCircle, { size: 13, className: "text-red-600 dark:text-red-400" }),
+            hasWarning && /* @__PURE__ */ jsx(AlertTriangle, { size: 13, className: "text-amber-500 dark:text-amber-400" }),
+            liveCount > 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                title: labels.liveCountTooltip(liveCount),
+                className: "font-bold bg-blue-600 text-white rounded-full px-1.5 py-0.5 text-xs",
+                children: liveCount
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-900 dark:text-gray-100 mt-1 line-clamp-3", children: label }),
+        rows.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-2 space-y-1", children: rows.map((row) => /* @__PURE__ */ jsx(SourceRow, { label: row.label, isDefault: row.isDefault, handleId: row.id }, row.id)) })
+      ]
+    }
+  );
+}
+var flowNodeTypes = { flowNode: FlowNodeCard };
+
+// src/flows/FlowMapNode.tsx
+import { Handle as Handle2, Position as Position2 } from "@xyflow/react";
+import { GitBranch as GitBranch2, Maximize2 } from "lucide-react";
+
+// src/flows/labels.ts
+var DEFAULT_FLOW_EDITOR_LABELS = {
+  legend: {
+    question: "Pergunta",
+    entrada_choice: "Escolha calculada",
+    action: "A\xE7\xE3o (simula\xE7\xE3o/atendimento)",
+    menu: "Menu",
+    condition: "Condi\xE7\xE3o"
+  },
+  startNodeTooltip: "In\xEDcio do fluxo",
+  liveCountTooltip: (count) => `${count} conversa(s) ativa(s) aqui agora`,
+  edgeFallbackLabel: "outro",
+  actionKindLabels: {
+    handoff: "Encaminhar para atendimento",
+    rate_limited_handoff: "Encaminhar (limite de simula\xE7\xF5es atingido)",
+    send_product_list: "Enviar cat\xE1logo de produtos"
+  },
+  conditionOperatorLabels: {
+    ">": "maior que",
+    ">=": "maior ou igual a",
+    "<": "menor que",
+    "<=": "menor ou igual a",
+    "==": "igual a",
+    "!=": "diferente de",
+    contains: "cont\xE9m"
+  },
+  questionTypeLabels: {
+    text: "Texto livre",
+    money: "Valor em R$",
+    date: "Data",
+    int: "N\xFAmero inteiro",
+    cpf: "CPF",
+    choice: "Escolha (bot\xF5es/lista)"
+  },
+  nodePanel: {
+    title: "Editar n\xF3",
+    contextKey: "Chave (contexto)",
+    questionType: "Tipo de resposta",
+    question: "Texto da pergunta",
+    options: "Op\xE7\xF5es (choice)",
+    addOption: "Adicionar op\xE7\xE3o",
+    optionId: "Valor",
+    optionLabel: "Texto exibido",
+    next: "Pr\xF3ximo n\xF3",
+    nextHint: "Tamb\xE9m \xE9 poss\xEDvel arrastar um fio no canvas para conectar.",
+    nextRowLabel: "Pr\xF3ximo",
+    otherFlowsGroup: "Outros fluxos (salto)",
+    nextByAnswer: (id) => `Se responder "${id}" \u2192`,
+    nextDefault: "Caso contr\xE1rio \u2192",
+    save: "Salvar altera\xE7\xF5es",
+    cancel: "Cancelar",
+    fixedLogicNotice: "Este n\xF3 tem l\xF3gica fixa (valida\xE7\xF5es/c\xE1lculos do sistema) \u2014 s\xF3 o texto e o destino s\xE3o edit\xE1veis.",
+    actionNotice: "N\xF3 de a\xE7\xE3o \u2014 dispara a a\xE7\xE3o registrada ou encaminha para atendimento humano.",
+    preview: "Como o cliente v\xEA no WhatsApp",
+    previewPlaceholder: "Pr\xE9-visualiza\xE7\xE3o\u2026",
+    previewEmptyBody: "(escreva o texto da mensagem)",
+    previewEmptyOption: "(sem texto)",
+    previewListButton: "Ver op\xE7\xF5es",
+    previewModeButtons: "Enviado como bot\xF5es (at\xE9 3 op\xE7\xF5es)",
+    previewModeList: "Enviado como lista (4+ op\xE7\xF5es)",
+    delete: "Excluir n\xF3",
+    deleteConfirm: "Excluir este n\xF3? Liga\xE7\xF5es que apontam para ele ficar\xE3o quebradas.",
+    directMessage: "Mensagem (opcional)",
+    fallbackMessage: "Mensagem de fallback (quando o cat\xE1logo n\xE3o est\xE1 dispon\xEDvel)",
+    conditionNotice: "N\xF3 de condi\xE7\xE3o \u2014 n\xE3o pergunta nada ao cliente, s\xF3 decide automaticamente entre Verdadeiro/Falso.",
+    conditionVariable: "Vari\xE1vel (chave j\xE1 coletada por uma pergunta anterior)",
+    conditionOperator: "Operador",
+    conditionValue: "Valor de compara\xE7\xE3o",
+    conditionTrue: "Se verdadeiro \u2192",
+    conditionFalse: "Se falso \u2192",
+    conditionVariableMissing: "Se a vari\xE1vel ainda n\xE3o foi coletada \u2192"
+  },
+  palette: {
+    title: "Adicionar ao fluxo",
+    question: "Pergunta",
+    decision: "Decis\xE3o",
+    condition: "Condi\xE7\xE3o",
+    conditionHint: "Compara uma vari\xE1vel j\xE1 coletada e segue automaticamente, sem perguntar nada",
+    action: "A\xE7\xE3o"
+  },
+  flowMap: {
+    nodeCount: (count) => `${count} n\xF3(s)`,
+    openFlow: "Abrir fluxo"
+  },
+  flowGroup: {
+    focus: "Focar neste fluxo",
+    close: "Fechar"
+  },
+  crossFlowPortal: {
+    tooltip: "Clique para abrir esse fluxo aqui do lado, ligado ao ponto de onde ele \xE9 chamado",
+    goesTo: (label) => `\u21AA Vai para: ${label}`
+  }
+};
+function mergeFlowEditorLabels(override) {
+  if (!override) return DEFAULT_FLOW_EDITOR_LABELS;
+  return {
+    ...DEFAULT_FLOW_EDITOR_LABELS,
+    ...override,
+    legend: { ...DEFAULT_FLOW_EDITOR_LABELS.legend, ...override.legend },
+    actionKindLabels: { ...DEFAULT_FLOW_EDITOR_LABELS.actionKindLabels, ...override.actionKindLabels },
+    conditionOperatorLabels: {
+      ...DEFAULT_FLOW_EDITOR_LABELS.conditionOperatorLabels,
+      ...override.conditionOperatorLabels
+    },
+    questionTypeLabels: { ...DEFAULT_FLOW_EDITOR_LABELS.questionTypeLabels, ...override.questionTypeLabels },
+    nodePanel: { ...DEFAULT_FLOW_EDITOR_LABELS.nodePanel, ...override.nodePanel },
+    palette: { ...DEFAULT_FLOW_EDITOR_LABELS.palette, ...override.palette },
+    flowMap: { ...DEFAULT_FLOW_EDITOR_LABELS.flowMap, ...override.flowMap },
+    flowGroup: { ...DEFAULT_FLOW_EDITOR_LABELS.flowGroup, ...override.flowGroup },
+    crossFlowPortal: { ...DEFAULT_FLOW_EDITOR_LABELS.crossFlowPortal, ...override.crossFlowPortal }
+  };
+}
+
+// src/flows/FlowMapNode.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function FlowMapNode({ data }) {
+  const { label, nodeCount, isRoot, labels = DEFAULT_FLOW_EDITOR_LABELS, onOpen } = data;
+  return /* @__PURE__ */ jsxs2("div", { className: "relative rounded-xl border-2 border-emerald-300 dark:border-emerald-700 bg-emerald-50 dark:bg-emerald-950/40 px-4 py-3 w-56 shadow-sm", children: [
+    /* @__PURE__ */ jsx2(Handle2, { type: "target", position: Position2.Top, className: "!bg-gray-400 dark:!bg-gray-500" }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1.5 text-emerald-700 dark:text-emerald-300", children: [
+      /* @__PURE__ */ jsx2(GitBranch2, { size: 14 }),
+      /* @__PURE__ */ jsx2("span", { className: "text-sm font-semibold truncate", children: label }),
+      isRoot && /* @__PURE__ */ jsx2("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500 shrink-0", title: labels.startNodeTooltip })
+    ] }),
+    /* @__PURE__ */ jsx2("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-1", children: labels.flowMap.nodeCount(nodeCount) }),
+    /* @__PURE__ */ jsxs2(
+      "button",
+      {
+        type: "button",
+        onClick: onOpen,
+        className: "mt-2 inline-flex items-center gap-1 text-xs font-medium text-blue-600 dark:text-blue-400 hover:underline",
+        children: [
+          /* @__PURE__ */ jsx2(Maximize2, { size: 11 }),
+          " ",
+          labels.flowMap.openFlow
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(Handle2, { type: "source", position: Position2.Bottom, className: "!bg-gray-400 dark:!bg-gray-500" })
+  ] });
+}
+var flowMapNodeTypes = { flowMapNode: FlowMapNode };
+
+// src/flows/FlowMapCanvas.tsx
+import { useMemo } from "react";
+import { ReactFlow, Background, Controls, MarkerType } from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+
+// src/flows/flowGraph.ts
+var CONDITION_OPERATORS = [">", ">=", "<", "<=", "==", "!=", "contains"];
+var BUILT_IN_ACTION_KINDS = {
+  HANDOFF: "handoff",
+  RATE_LIMITED_HANDOFF: "rate_limited_handoff",
+  SEND_PRODUCT_LIST: "send_product_list"
+};
+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]);
+  }
+  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/FlowMapCanvas.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var MAP_NODE_TYPES = { ...flowMapNodeTypes };
+var EDGE_COLOR = "#06b6d4";
+var BACKGROUND_COLOR_LIGHT = "#cbd5e1";
+var BACKGROUND_COLOR_DARK = "#334155";
+function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride }) {
+  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
+  const { isDark } = useDarkMode();
+  const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey]);
+  const nodes = useMemo(
+    () => Object.values(graphs).map((g) => ({
+      id: g.key,
+      type: "flowMapNode",
+      position: positions[g.key] ?? { x: 0, y: 0 },
+      data: {
+        label: g.label,
+        nodeCount: Object.keys(g.nodes).length,
+        isRoot: g.key === rootKey,
+        labels,
+        onOpen: () => onOpenFlow(g.key)
+      }
+    })),
+    [graphs, positions, rootKey, onOpenFlow, labels]
+  );
+  const edges = useMemo(() => {
+    const list = [];
+    for (const g of Object.values(graphs)) {
+      for (const targetKey of crossFlowTargetsOf(g)) {
+        if (!graphs[targetKey]) continue;
+        list.push({
+          id: `${g.key}->${targetKey}`,
+          source: g.key,
+          target: targetKey,
+          type: "default",
+          style: { stroke: EDGE_COLOR, strokeWidth: 1.75 },
+          markerEnd: { type: MarkerType.ArrowClosed, color: EDGE_COLOR, width: 18, height: 18 }
+        });
+      }
+    }
+    return list;
+  }, [graphs]);
+  return /* @__PURE__ */ jsxs3(
+    ReactFlow,
+    {
+      nodes,
+      edges,
+      nodeTypes: MAP_NODE_TYPES,
+      fitView: true,
+      proOptions: { hideAttribution: true },
+      colorMode: isDark ? "dark" : "light",
+      children: [
+        /* @__PURE__ */ jsx3(Background, { color: isDark ? BACKGROUND_COLOR_DARK : BACKGROUND_COLOR_LIGHT }),
+        /* @__PURE__ */ jsx3(Controls, {})
+      ]
+    }
+  );
+}
+
+// src/flows/FlowGroupFrame.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+function FlowGroupFrame({ data }) {
+  const { label } = data;
+  return /* @__PURE__ */ jsx4("div", { className: "relative w-full h-full rounded-xl border-2 border-dashed border-orange-300/70 dark:border-orange-700/50 bg-orange-50/40 dark:bg-orange-950/10", children: /* @__PURE__ */ jsx4("span", { className: "absolute -top-6 left-1 text-[11px] font-semibold text-orange-600 dark:text-orange-400 uppercase tracking-wide whitespace-nowrap", children: label }) });
+}
+var flowGroupFrameNodeTypes = { flowGroupFrame: FlowGroupFrame };
+
+// src/flows/FlowGroupHeader.tsx
+import { Maximize2 as Maximize22, X } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function FlowGroupHeader({ data }) {
+  const { label, labels = DEFAULT_FLOW_EDITOR_LABELS, onFocus, onClose } = data;
+  return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-full border border-cyan-300 dark:border-cyan-700 bg-cyan-50 dark:bg-cyan-950/50 px-3 py-1 text-xs font-medium text-cyan-800 dark:text-cyan-200 shadow-sm whitespace-nowrap", children: [
+    /* @__PURE__ */ jsx5("span", { children: label }),
+    /* @__PURE__ */ jsx5("button", { type: "button", onClick: onFocus, title: labels.flowGroup.focus, className: "hover:text-blue-600 dark:hover:text-blue-400", children: /* @__PURE__ */ jsx5(Maximize22, { size: 12 }) }),
+    /* @__PURE__ */ jsx5("button", { type: "button", onClick: onClose, title: labels.flowGroup.close, className: "hover:text-red-600 dark:hover:text-red-400", children: /* @__PURE__ */ jsx5(X, { size: 12 }) })
+  ] });
+}
+var flowGroupHeaderNodeTypes = { flowGroupHeader: FlowGroupHeader };
+
+// src/flows/FlowPortalNode.tsx
+import { Handle as Handle3, Position as Position3 } from "@xyflow/react";
+import { ArrowUpRight } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function FlowPortalNode({ data }) {
+  const { label, labels = DEFAULT_FLOW_EDITOR_LABELS, onNavigate } = data;
+  return /* @__PURE__ */ jsxs5(
+    "button",
+    {
+      type: "button",
+      title: labels.crossFlowPortal.tooltip,
+      onClick: onNavigate,
+      className: "relative flex items-center gap-1.5 rounded-full border-2 border-dashed border-cyan-400 dark:border-cyan-600 bg-cyan-50 dark:bg-cyan-950/40 px-3 py-1.5 text-xs font-medium text-cyan-700 dark:text-cyan-300 hover:bg-cyan-100 dark:hover:bg-cyan-950/70 transition-colors cursor-pointer",
+      children: [
+        /* @__PURE__ */ jsx6(Handle3, { type: "target", position: Position3.Top, id: "target", className: "!bg-cyan-400 dark:!bg-cyan-600" }),
+        /* @__PURE__ */ jsx6(ArrowUpRight, { size: 12, strokeWidth: 2.5 }),
+        labels.crossFlowPortal.goesTo(label)
+      ]
+    }
+  );
+}
+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";
+var QUESTION_TYPES = ["text", "money", "date", "int", "cpf"];
+function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
+  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
+  const resolvedActionOptions = actionOptions ?? [
+    { actionKind: "handoff", label: labels.actionKindLabels.handoff ?? "Encaminhar para atendimento" }
+  ];
+  const [open, setOpen] = useState(false);
+  const [submenu, setSubmenu] = useState(null);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setOpen(false);
+        setSubmenu(null);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  function select(spec) {
+    onAdd(spec);
+    setOpen(false);
+    setSubmenu(null);
+  }
+  return /* @__PURE__ */ jsxs6("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsxs6(
+      "button",
+      {
+        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 }),
+          " ",
+          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",
+          {
+            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",
+          {
+            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",
+        {
+          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",
+          title: 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",
+          {
+            onMouseEnter: () => setSubmenu("action"),
+            onClick: () => setSubmenu(submenu === "action" ? null : "action"),
+            className: "w-full flex items-center justify-between gap-2 px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+            children: [
+              /* @__PURE__ */ jsxs6("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx7(Zap2, { size: 15, className: "text-orange-500" }),
+                " ",
+                labels.palette.action
+              ] }),
+              /* @__PURE__ */ jsx7(ChevronRight, { size: 13, className: "text-gray-400" })
+            ]
+          }
+        ),
+        submenu === "action" && /* @__PURE__ */ jsx7("div", { className: "absolute left-full top-0 ml-1 w-64 rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg py-1", children: resolvedActionOptions.map((option) => /* @__PURE__ */ jsx7(
+          "button",
+          {
+            onClick: () => select({ kind: "action", actionKind: option.actionKind }),
+            className: "w-full text-left px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700",
+            children: option.label
+          },
+          option.actionKind
+        )) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/flows/FlowNodePanel.tsx
+import { useState as useState2 } from "react";
+import { Plus as Plus2, Trash2, Save, X as X2, AlertTriangle as AlertTriangle2, AlertCircle as AlertCircle2 } from "lucide-react";
+
+// src/flows/FlowWhatsAppPreview.tsx
+import { List } from "lucide-react";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function FlowWhatsAppPreview({ body, options, labels = DEFAULT_FLOW_EDITOR_LABELS.nodePanel }) {
+  if (!body && (!options || options.length === 0)) {
+    return /* @__PURE__ */ jsx8("p", { className: "text-xs text-gray-400 dark:text-gray-500 italic px-1", children: labels.previewPlaceholder });
+  }
+  const usesButtons = rendersAsButtons(options);
+  const hasOptions = (options?.length ?? 0) > 0;
+  return /* @__PURE__ */ jsxs7("div", { className: "rounded-xl bg-[#e5ddd5] dark:bg-gray-900 p-3 space-y-1.5", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "max-w-[85%]", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "rounded-lg rounded-tl-none bg-white dark:bg-gray-700 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 shadow-sm whitespace-pre-wrap break-words", children: [
+        body ? parseWhatsAppFormatting(body) : /* @__PURE__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyBody }),
+        hasOptions && !usesButtons && /* @__PURE__ */ jsx8("div", { className: "mt-2 -mx-3 -mb-2 border-t border-gray-100 dark:border-gray-600", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-center gap-1.5 py-2 text-sm font-medium text-cyan-600 dark:text-cyan-400", children: [
+          /* @__PURE__ */ jsx8(List, { size: 15 }),
+          " ",
+          labels.previewListButton
+        ] }) })
+      ] }),
+      hasOptions && usesButtons && /* @__PURE__ */ jsx8("div", { className: "mt-1 space-y-1", children: options.map(([id, label]) => /* @__PURE__ */ jsx8("div", { className: "rounded-lg bg-white dark:bg-gray-700 py-1.5 text-center text-sm font-medium text-cyan-600 dark:text-cyan-400 shadow-sm", children: label || /* @__PURE__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyOption }) }, id)) }),
+      hasOptions && !usesButtons && /* @__PURE__ */ jsx8("div", { className: "mt-1.5 rounded-lg bg-white dark:bg-gray-700 shadow-sm divide-y divide-gray-100 dark:divide-gray-600 overflow-hidden", children: options.slice(0, WHATSAPP_LIMITS.MAX_LIST_ROWS).map(([id, label]) => /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 px-3 py-1.5 text-sm text-gray-800 dark:text-gray-100", children: [
+        /* @__PURE__ */ jsx8("span", { className: "h-3.5 w-3.5 rounded-full border border-gray-300 dark:border-gray-500 shrink-0" }),
+        label || /* @__PURE__ */ jsx8("span", { className: "italic text-gray-400", children: labels.previewEmptyOption })
+      ] }, id)) })
+    ] }),
+    hasOptions && /* @__PURE__ */ jsx8("p", { className: "text-[11px] text-gray-500 dark:text-gray-400 px-1", children: usesButtons ? labels.previewModeButtons : labels.previewModeList })
+  ] });
+}
+
+// src/flows/FlowNodePanel.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var SELECT_CLASSNAME = "border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all";
+var INPUT_CLASSNAME = "border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all";
+function truncateLabel(value, max = 60) {
+  if (!value) return "\u2014";
+  return value.length > max ? `${value.slice(0, max - 1)}\u2026` : value;
+}
+function WhatsAppTextField({
+  label,
+  value,
+  onValueChange,
+  options,
+  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(
+        "textarea",
+        {
+          value,
+          onChange: (e) => onValueChange(e.target.value),
+          rows: 3,
+          placeholder,
+          className: `w-full mt-1 ${INPUT_CLASSNAME}`
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { children: [
+      /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.preview }),
+      /* @__PURE__ */ jsx9("div", { className: "mt-1", children: /* @__PURE__ */ jsx9(FlowWhatsAppPreview, { body: value, options, labels: labels.nodePanel }) })
+    ] })
+  ] });
+}
+function IssueRow({ issue }) {
+  const Icon = issue.severity === "error" ? AlertCircle2 : AlertTriangle2;
+  const color = issue.severity === "error" ? "text-red-600 dark:text-red-400" : "text-amber-600 dark:text-amber-400";
+  return /* @__PURE__ */ jsxs8("div", { className: `flex items-start gap-1.5 text-xs ${color}`, children: [
+    /* @__PURE__ */ jsx9(Icon, { size: 13, className: "mt-0.5 shrink-0" }),
+    /* @__PURE__ */ jsx9("span", { children: issue.message })
+  ] });
+}
+function FlowNodePanel({
+  graph,
+  node,
+  issues,
+  otherFlows,
+  onClose,
+  onChange,
+  onDelete,
+  labels: labelsOverride
+}) {
+  const labels = { ...DEFAULT_FLOW_EDITOR_LABELS, ...labelsOverride };
+  const [draft, setDraft] = useState2(node);
+  const otherNodeIds = Object.keys(graph.nodes).filter((id) => id !== node.id);
+  const isFixedLogic = draft.type === "entrada_choice";
+  const isAction = draft.type === "action";
+  const isCondition = draft.type === "condition";
+  const isStart = graph.startNodeId === node.id;
+  const nodeIssues = issues.filter((i) => i.nodeId === node.id);
+  const knownContextKeys = [...new Set(Object.values(graph.nodes).map((n) => n.contextKey).filter((key) => !!key))];
+  const conditionAnswerIds = isCondition ? ["true", "false"] : (draft.options ?? []).map(([id]) => id);
+  function updateNextString(value) {
+    setDraft((prev) => ({ ...prev, next: value }));
+  }
+  function updateNextByAnswer(answerId, value) {
+    setDraft((prev) => {
+      const current = typeof prev.next === "object" && prev.next ? prev.next : { byAnswer: {}, default: otherNodeIds[0] ?? "" };
+      return { ...prev, next: { ...current, byAnswer: { ...current.byAnswer, [answerId]: value } } };
+    });
+  }
+  function updateNextDefault(value) {
+    setDraft((prev) => {
+      const current = typeof prev.next === "object" && prev.next ? prev.next : { byAnswer: {}, default: value };
+      return { ...prev, next: { ...current, default: value } };
+    });
+  }
+  function updateOption(index, field, value) {
+    setDraft((prev) => {
+      const opts = [...prev.options ?? []];
+      const opt = [...opts[index]];
+      opt[field] = value;
+      opts[index] = opt;
+      return { ...prev, options: opts };
+    });
+  }
+  function addOption() {
+    setDraft((prev) => ({ ...prev, options: [...prev.options ?? [], [String((prev.options?.length ?? 0) + 1), "Nova op\xE7\xE3o"]] }));
+  }
+  function removeOption(index) {
+    setDraft((prev) => ({ ...prev, options: (prev.options ?? []).filter((_, i) => i !== index) }));
+  }
+  function nextNodeOptions() {
+    return /* @__PURE__ */ 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__ */ jsxs8("div", { className: "fixed inset-y-0 right-0 w-96 bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700 shadow-xl z-50 flex flex-col", children: [
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between px-4 py-3 border-b border-gray-100 dark:border-gray-700", children: [
+      /* @__PURE__ */ jsx9("h3", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100", children: labels.nodePanel.title }),
+      /* @__PURE__ */ jsx9("button", { onClick: onClose, className: "text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx9(X2, { size: 18 }) })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
+      nodeIssues.length > 0 && /* @__PURE__ */ jsx9("div", { className: "rounded-lg border border-gray-100 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40 p-2.5 space-y-1.5", children: nodeIssues.map((issue, i) => /* @__PURE__ */ jsx9(IssueRow, { issue }, i)) }),
+      isFixedLogic && /* @__PURE__ */ jsx9("p", { className: "text-xs text-purple-700 dark:text-purple-400 bg-purple-50 dark:bg-purple-950/30 rounded-lg p-2", children: labels.nodePanel.fixedLogicNotice }),
+      isAction && /* @__PURE__ */ jsx9("p", { className: "text-xs text-orange-700 dark:text-orange-400 bg-orange-50 dark:bg-orange-950/30 rounded-lg p-2", children: labels.nodePanel.actionNotice }),
+      isCondition && /* @__PURE__ */ jsx9("p", { className: "text-xs text-cyan-700 dark:text-cyan-400 bg-cyan-50 dark:bg-cyan-950/30 rounded-lg p-2", children: labels.nodePanel.conditionNotice }),
+      draft.contextKey && /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.contextKey }),
+        /* @__PURE__ */ jsx9("input", { value: draft.contextKey, disabled: true, className: "w-full mt-1 rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 px-3 py-2.5 text-sm text-gray-500" })
+      ] }),
+      !isFixedLogic && !isAction && !isCondition && /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.questionType }),
+        /* @__PURE__ */ jsx9(
+          "select",
+          {
+            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))
+          }
+        )
+      ] }),
+      !isFixedLogic && !isAction && !isCondition && /* @__PURE__ */ jsx9(
+        WhatsAppTextField,
+        {
+          label: labels.nodePanel.question,
+          value: draft.question ?? "",
+          options: draft.questionType === "choice" ? draft.options : void 0,
+          onValueChange: (value) => setDraft((prev) => ({ ...prev, question: value })),
+          labels
+        }
+      ),
+      isCondition && /* @__PURE__ */ jsxs8("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.conditionVariable }),
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              value: draft.conditionContextKey ?? "",
+              onChange: (e) => setDraft((prev) => ({ ...prev, conditionContextKey: e.target.value })),
+              list: "condition-context-keys",
+              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__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.conditionOperator }),
+          /* @__PURE__ */ jsx9(
+            "select",
+            {
+              value: draft.conditionOperator ?? ">",
+              onChange: (e) => setDraft((prev) => ({ ...prev, conditionOperator: e.target.value })),
+              className: `w-full mt-1 ${SELECT_CLASSNAME}`,
+              children: CONDITION_OPERATORS.map((operator) => /* @__PURE__ */ jsx9("option", { value: operator, children: labels.conditionOperatorLabels[operator] ?? operator }, operator))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.conditionValue }),
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              value: draft.conditionValue ?? "",
+              onChange: (e) => setDraft((prev) => ({ ...prev, conditionValue: e.target.value })),
+              className: `w-full mt-1 ${INPUT_CLASSNAME}`
+            }
+          )
+        ] })
+      ] }),
+      isAction && draft.actionKind === "send_product_list" && /* @__PURE__ */ jsx9(
+        WhatsAppTextField,
+        {
+          label: labels.nodePanel.fallbackMessage,
+          value: draft.fallbackMessage ?? "",
+          onValueChange: (value) => setDraft((prev) => ({ ...prev, fallbackMessage: value })),
+          placeholder: "(usa a mensagem padr\xE3o de fallback se vazio)",
+          labels
+        }
+      ),
+      isAction && draft.actionKind !== "send_product_list" && /* @__PURE__ */ jsx9(
+        WhatsAppTextField,
+        {
+          label: labels.nodePanel.directMessage,
+          value: draft.directMessage ?? "",
+          onValueChange: (value) => setDraft((prev) => ({ ...prev, directMessage: value })),
+          placeholder: "(usa a mensagem padr\xE3o de encaminhamento se vazio)",
+          labels
+        }
+      ),
+      (draft.questionType === "choice" || draft.type === "menu") && /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between mb-1.5", children: [
+          /* @__PURE__ */ jsx9("label", { className: "text-xs font-medium text-gray-500 dark:text-gray-400", children: labels.nodePanel.options }),
+          /* @__PURE__ */ jsxs8("button", { onClick: addOption, className: "text-xs text-blue-600 hover:underline flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx9(Plus2, { size: 12 }),
+            " ",
+            labels.nodePanel.addOption
+          ] })
+        ] }),
+        /* @__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(
+            "input",
+            {
+              value: id,
+              onChange: (e) => updateOption(i, 0, e.target.value),
+              placeholder: labels.nodePanel.optionId,
+              className: `w-16 ${INPUT_CLASSNAME}`
+            }
+          ),
+          /* @__PURE__ */ jsx9(
+            "input",
+            {
+              value: label,
+              onChange: (e) => updateOption(i, 1, e.target.value),
+              placeholder: labels.nodePanel.optionLabel,
+              className: `flex-1 ${INPUT_CLASSNAME}`
+            }
+          ),
+          /* @__PURE__ */ jsx9("button", { onClick: () => removeOption(i), className: "text-gray-400 hover:text-red-600", children: /* @__PURE__ */ jsx9(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(
+          "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" }),
+              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(
+              "select",
+              {
+                value: draft.next && typeof draft.next === "object" ? draft.next.byAnswer[id] ?? "" : "",
+                onChange: (e) => updateNextByAnswer(id, e.target.value),
+                className: `flex-1 ${SELECT_CLASSNAME}`,
+                children: [
+                  /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014" }),
+                  nextNodeOptions()
+                ]
+              }
+            )
+          ] }, id)),
+          /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx9("span", { className: "text-xs text-gray-500 w-32 shrink-0", children: isCondition ? labels.nodePanel.conditionVariableMissing : labels.nodePanel.nextDefault }),
+            /* @__PURE__ */ jsxs8(
+              "select",
+              {
+                value: draft.next && typeof draft.next === "object" ? draft.next.default : "",
+                onChange: (e) => updateNextDefault(e.target.value),
+                className: `flex-1 ${SELECT_CLASSNAME}`,
+                children: [
+                  /* @__PURE__ */ jsx9("option", { value: "", children: "\u2014" }),
+                  nextNodeOptions()
+                ]
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "p-4 border-t border-gray-100 dark:border-gray-700 flex gap-2", children: [
+      /* @__PURE__ */ jsxs8("button", { onClick: () => onChange(draft), className: "flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700", children: [
+        /* @__PURE__ */ jsx9(Save, { size: 14 }),
+        " ",
+        labels.nodePanel.save
+      ] }),
+      !isStart && /* @__PURE__ */ jsx9(
+        "button",
+        {
+          onClick: () => {
+            if (window.confirm(labels.nodePanel.deleteConfirm)) onDelete(node.id);
+          },
+          title: labels.nodePanel.delete,
+          className: "px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg",
+          children: /* @__PURE__ */ jsx9(Trash2, { size: 14 })
+        }
+      ),
+      /* @__PURE__ */ jsx9("button", { onClick: onClose, className: "px-4 py-2 text-sm text-gray-600 dark:text-gray-300 hover:underline", children: labels.nodePanel.cancel })
+    ] })
+  ] });
+}
+export {
+  BUILT_IN_ACTION_KINDS,
+  CONDITION_OPERATORS,
+  CROSS_FLOW_PREFIX,
+  DEFAULT_FLOW_EDITOR_LABELS,
+  FlowGroupFrame,
+  FlowGroupHeader,
+  FlowMapCanvas,
+  FlowMapNode,
+  FlowNodeCard,
+  FlowNodePanel,
+  FlowPalette,
+  FlowPortalNode,
+  FlowWhatsAppPreview,
+  NODE_CARD_WIDTH,
+  WHATSAPP_LIMITS,
+  computeAutoLayout,
+  computeFlowMapLayout,
+  crossFlowKey,
+  crossFlowTargetsOf,
+  estimateNodeHeight,
+  findCollectionChains,
+  flowGroupFrameNodeTypes,
+  flowGroupHeaderNodeTypes,
+  flowMapNodeTypes,
+  flowNodeTypes,
+  flowPortalNodeTypes,
+  isCrossFlowTarget,
+  mergeFlowEditorLabels,
+  nodeLabel,
+  rendersAsButtons,
+  slugifyNodeId,
+  targetsOf,
+  validateGraph
+};