@adatechnology/conversations-ui 0.1.0-rc.3 → 0.1.0-rc.30

package/dist/flows/index.js

@@ -1,13 +1,25 @@
 import {
-  useIsDarkTheme
-} from "../chunk-NV2RZ5KT.js";
+  TooltipLayer
+} from "../chunk-DXPSPUWF.js";
 import {
-  parseWhatsAppFormatting
-} from "../chunk-OGRRHQQW.js";
+  parseWhatsAppFormatting,
+  useIsDarkTheme
+} from "../chunk-WCBDXZ3X.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 {
+  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",
@@ -30,6 +42,7 @@ var DEFAULT_ACTION_KIND_ICON = {
 };
 function nodeLabel(node, labels) {
   if (!node) return "\u2014";
+  if (node.label) return node.label;
   if (node.type === "action") {
     const actionKindLabel = node.actionKind ? labels.actionKindLabels[node.actionKind] : void 0;
     return node.directMessage || node.fallbackMessage || actionKindLabel || node.actionKind || node.id;
@@ -59,7 +72,13 @@ function sourceRows(node, labels) {
 }
 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(
+      "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,
       {
@@ -73,7 +92,7 @@ function SourceRow({ label, isDefault, handleId }) {
   ] });
 }
 function FlowNodeCard({ data }) {
-  const { node, liveCount, isStart, isSelected, issues, labels, actionKindIcons, onSelect } = data;
+  const { node, liveCount, isStart, isSelected, isDetached, 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];
@@ -83,15 +102,15 @@ function FlowNodeCard({ data }) {
   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" : ""}`,
+      "data-cv-tooltip": isDetached ? labels.detachedNodeTooltip : label,
+      className: `relative rounded-lg border-2 px-3 py-2 w-60 cursor-pointer shadow-sm hover:shadow-md transition-shadow ${NODE_TYPE_COLOR[node.type]} ${isSelected ? "ring-2 ring-blue-500 ring-offset-2 dark:ring-offset-gray-900" : ""} ${isDetached ? "border-dashed !border-amber-400 animate-pulse" : ""}`,
       onClick: () => onSelect(node.id),
       children: [
         /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Top, id: "target", 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 }),
+            isStart && /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-emerald-500", "data-cv-tooltip": labels.startNodeTooltip }),
             labels.legend[node.type]
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
@@ -100,7 +119,7 @@ function FlowNodeCard({ data }) {
             liveCount > 0 && /* @__PURE__ */ jsx(
               "span",
               {
-                title: labels.liveCountTooltip(liveCount),
+                "data-cv-tooltip": labels.liveCountTooltip(liveCount),
                 className: "font-bold bg-blue-600 text-white rounded-full px-1.5 py-0.5 text-xs",
                 children: liveCount
               }
@@ -129,12 +148,14 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
     condition: "Condi\xE7\xE3o"
   },
   startNodeTooltip: "In\xEDcio do fluxo",
+  detachedNodeTooltip: "Sem liga\xE7\xE3o de entrada \u2014 o bot n\xE3o chega neste n\xF3. Puxe um fio de outro card at\xE9 ele.",
   liveCountTooltip: (count) => `${count} conversa(s) ativa(s) aqui agora`,
   edgeFallbackLabel: "outro",
   actionKindLabels: {
     handoff: "Encaminhar para atendimento",
     rate_limited_handoff: "Encaminhar (limite de simula\xE7\xF5es atingido)",
-    send_product_list: "Enviar cat\xE1logo de produtos"
+    send_product_list: "Enviar cat\xE1logo de produtos",
+    send_media: "Enviar arquivos da biblioteca"
   },
   conditionOperatorLabels: {
     ">": "maior que",
@@ -156,10 +177,15 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
   nodePanel: {
     title: "Editar n\xF3",
     contextKey: "Chave (contexto)",
+    nodeName: "Nome do n\xF3 (opcional)",
+    nodeNamePlaceholder: "Ex.: Enviar tabela de pre\xE7os",
+    nodeNameHint: "S\xF3 aparece no editor \u2014 o cliente n\xE3o v\xEA.",
     questionType: "Tipo de resposta",
     question: "Texto da pergunta",
     options: "Op\xE7\xF5es (choice)",
     addOption: "Adicionar op\xE7\xE3o",
+    removeOption: "Remover op\xE7\xE3o",
+    close: "Fechar painel",
     optionId: "Valor",
     optionLabel: "Texto exibido",
     next: "Pr\xF3ximo n\xF3",
@@ -189,7 +215,9 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
     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"
+    conditionVariableMissing: "Se a vari\xE1vel ainda n\xE3o foi coletada \u2192",
+    media: "Arquivos enviados neste ponto",
+    mediaUnavailable: "A biblioteca de arquivos n\xE3o est\xE1 dispon\xEDvel neste painel."
   },
   palette: {
     title: "Adicionar ao fluxo",
@@ -201,7 +229,9 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
   },
   flowMap: {
     nodeCount: (count) => `${count} n\xF3(s)`,
-    openFlow: "Abrir fluxo"
+    openFlow: "Abrir fluxo",
+    toggleToMap: "Mapa de fluxos",
+    toggleToDetail: "Voltar ao editor"
   },
   flowGroup: {
     focus: "Focar neste fluxo",
@@ -210,6 +240,59 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
   crossFlowPortal: {
     tooltip: "Clique para abrir esse fluxo aqui do lado, ligado ao ponto de onde ele \xE9 chamado",
     goesTo: (label) => `\u21AA Vai para: ${label}`
+  },
+  collectionChain: {
+    feeds: (label) => `Alimenta: ${label}`
+  },
+  validation: {
+    title: "Antes de publicar",
+    errors: (count) => `${count} erro(s) \u2014 corrija antes de salvar`,
+    warnings: (count) => `${count} aviso(s)`,
+    noStart: "O fluxo precisa de um n\xF3 inicial v\xE1lido.",
+    brokenRef: (from, to) => `N\xF3 "${from}": liga\xE7\xE3o aponta para "${to}", que n\xE3o existe.`,
+    choiceWithoutOptions: (id) => `N\xF3 "${id}": escolha sem nenhuma op\xE7\xE3o.`,
+    duplicatedOptionId: (id, optionId) => `N\xF3 "${id}": valor de op\xE7\xE3o "${optionId}" duplicado.`,
+    optionWithoutTarget: (id, label) => `N\xF3 "${id}": op\xE7\xE3o "${label}" n\xE3o tem destino definido.`,
+    tooManyOptions: (id, count) => `N\xF3 "${id}": ${count} op\xE7\xF5es \u2014 o WhatsApp aceita no m\xE1ximo 10 em lista.`,
+    buttonTitleTooLong: (id, label) => `N\xF3 "${id}": bot\xE3o "${label}" passa de 20 caracteres.`,
+    listTitleTooLong: (id, label) => `N\xF3 "${id}": item de lista "${label}" passa de 24 caracteres.`,
+    bodyTooLong: (id) => `N\xF3 "${id}": texto passa de 1024 caracteres.`,
+    unreachable: (id) => `N\xF3 "${id}" \xE9 inalcan\xE7\xE1vel a partir do in\xEDcio do fluxo.`,
+    deadEndQuestion: (id) => `N\xF3 "${id}": pergunta sem pr\xF3ximo passo definido.`,
+    conditionIncomplete: (id) => `N\xF3 "${id}": condi\xE7\xE3o incompleta \u2014 defina vari\xE1vel, operador e valor.`,
+    conditionBranchMissing: (id, branch) => `N\xF3 "${id}": ramo "${branch === "true" ? "Verdadeiro" : "Falso"}" sem destino definido.`
+  },
+  workspace: {
+    title: "Fluxos do Bot",
+    subtitle: "Blueprint visual dos fluxos de conversa, sincronizado com o que est\xE1 em produ\xE7\xE3o.",
+    loading: "Carregando fluxos\u2026",
+    loadError: "N\xE3o foi poss\xEDvel carregar os fluxos.",
+    saveGraph: "Publicar altera\xE7\xF5es",
+    saving: "Publicando\u2026",
+    saveSuccess: "Fluxo publicado! O bot j\xE1 est\xE1 usando a vers\xE3o nova.",
+    saveError: "N\xE3o foi poss\xEDvel salvar \u2014 verifique se todos os destinos apontam para n\xF3s existentes.",
+    organize: "Organizar",
+    organizeTooltip: "Reorganiza os n\xF3s automaticamente e salva as novas posi\xE7\xF5es",
+    discardChanges: "Desfazer altera\xE7\xF5es",
+    discardTooltip: "Devolve os fluxos abertos ao que est\xE1 publicado, descartando o que n\xE3o foi salvo",
+    discardConfirm: "Descartar todas as altera\xE7\xF5es n\xE3o publicadas e voltar ao fluxo que est\xE1 no ar?",
+    unsavedChangesConfirm: "Voc\xEA tem altera\xE7\xF5es n\xE3o publicadas neste fluxo. Trocar de fluxo agora descarta essas edi\xE7\xF5es. Continuar?"
+  },
+  flowManager: {
+    newFlow: "Novo fluxo",
+    createTitle: "Criar novo fluxo",
+    key: "Identificador \xFAnico",
+    keyHint: "letras min\xFAsculas, n\xFAmeros e _ (ex.: promocoes_semana)",
+    keyInvalid: "Use apenas letras min\xFAsculas, n\xFAmeros e _ (2 a 40 caracteres)",
+    label: "Nome exibido",
+    showInMenu: "Exibir como op\xE7\xE3o no menu principal do bot",
+    menuOptionLabel: "Texto da op\xE7\xE3o no menu",
+    create: "Criar fluxo",
+    creating: "Criando\u2026",
+    deleteFlow: "Excluir fluxo",
+    deleteConfirm: (label) => `Excluir o fluxo "${label}"? Esta a\xE7\xE3o n\xE3o pode ser desfeita.`,
+    createError: "N\xE3o foi poss\xEDvel criar o fluxo.",
+    deleteError: "N\xE3o foi poss\xEDvel excluir o fluxo."
   }
 };
 function mergeFlowEditorLabels(override) {
@@ -228,7 +311,11 @@ function mergeFlowEditorLabels(override) {
     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 }
+    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 }
   };
 }
 
@@ -241,12 +328,14 @@ function FlowMapNode({ data }) {
     /* @__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 })
+      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",
@@ -268,12 +357,9 @@ 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 = {
-  HANDOFF: "handoff",
-  RATE_LIMITED_HANDOFF: "rate_limited_handoff",
-  SEND_PRODUCT_LIST: "send_product_list"
-};
+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);
@@ -529,18 +615,20 @@ function FlowMapCanvas({ graphs, rootKey, onOpenFlow, labels: labelsOverride })
   const isDark = useIsDarkTheme();
   const positions = useMemo(() => computeFlowMapLayout(graphs, rootKey), [graphs, rootKey]);
   const nodes = useMemo(
-    () => Object.values(graphs).map((g) => ({
-      id: g.key,
-      type: "flowMapNode",
-      position: positions[g.key] ?? { x: 0, y: 0 },
-      data: {
-        label: g.label,
-        nodeCount: Object.keys(g.nodes).length,
-        isRoot: g.key === rootKey,
-        labels,
-        onOpen: () => onOpenFlow(g.key)
-      }
-    })),
+    () => Object.values(graphs).map(
+      (g) => ({
+        id: g.key,
+        type: "flowMapNode",
+        position: positions[g.key] ?? { x: 0, y: 0 },
+        data: {
+          label: g.label,
+          nodeCount: Object.keys(g.nodes).length,
+          isRoot: g.key === rootKey,
+          labels,
+          onOpen: () => onOpenFlow(g.key)
+        }
+      })
+    ),
     [graphs, positions, rootKey, onOpenFlow, labels]
   );
   const edges = useMemo(() => {
@@ -592,8 +680,28 @@ function FlowGroupHeader({ data }) {
   const { label, labels = DEFAULT_FLOW_EDITOR_LABELS, onFocus, onClose } = data;
   return /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2 rounded-full border border-cyan-300 dark:border-cyan-700 bg-cyan-50 dark:bg-cyan-950/50 px-3 py-1 text-xs font-medium text-cyan-800 dark:text-cyan-200 shadow-sm whitespace-nowrap", children: [
     /* @__PURE__ */ jsx5("span", { children: label }),
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: onFocus, title: labels.flowGroup.focus, className: "hover:text-blue-600 dark:hover:text-blue-400", children: /* @__PURE__ */ jsx5(Maximize22, { size: 12 }) }),
-    /* @__PURE__ */ jsx5("button", { type: "button", onClick: onClose, title: labels.flowGroup.close, className: "hover:text-red-600 dark:hover:text-red-400", children: /* @__PURE__ */ jsx5(X, { size: 12 }) })
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onFocus,
+        "data-cv-tooltip": labels.flowGroup.focus,
+        "aria-label": labels.flowGroup.focus,
+        className: "hover:text-blue-600 dark:hover:text-blue-400",
+        children: /* @__PURE__ */ jsx5(Maximize22, { size: 12 })
+      }
+    ),
+    /* @__PURE__ */ jsx5(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        "data-cv-tooltip": labels.flowGroup.close,
+        "aria-label": labels.flowGroup.close,
+        className: "hover:text-red-600 dark:hover:text-red-400",
+        children: /* @__PURE__ */ jsx5(X, { size: 12 })
+      }
+    )
   ] });
 }
 var flowGroupHeaderNodeTypes = { flowGroupHeader: FlowGroupHeader };
@@ -608,7 +716,8 @@ function FlowPortalNode({ data }) {
     "button",
     {
       type: "button",
-      title: labels.crossFlowPortal.tooltip,
+      "data-cv-tooltip": labels.crossFlowPortal.tooltip,
+      "aria-label": labels.crossFlowPortal.tooltip,
       onClick: onNavigate,
       className: "relative flex items-center gap-1.5 rounded-full border-2 border-dashed border-cyan-400 dark:border-cyan-600 bg-cyan-50 dark:bg-cyan-950/40 px-3 py-1.5 text-xs font-medium text-cyan-700 dark:text-cyan-300 hover:bg-cyan-100 dark:hover:bg-cyan-950/70 transition-colors cursor-pointer",
       children: [
@@ -653,6 +762,8 @@ function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
     /* @__PURE__ */ jsxs6(
       "button",
       {
+        "data-cv-tooltip": labels.palette.title,
+        "aria-label": labels.palette.title,
         onClick: () => setOpen((v) => !v),
         className: "inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700",
         children: [
@@ -667,6 +778,8 @@ function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
         /* @__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",
@@ -683,6 +796,8 @@ function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
         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]
@@ -693,6 +808,8 @@ function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
       /* @__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",
@@ -709,7 +826,8 @@ function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
           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,
+          "data-cv-tooltip": labels.palette.conditionHint,
+          "aria-label": labels.palette.conditionHint,
           children: [
             /* @__PURE__ */ jsx7(Diamond2, { size: 15, className: "text-cyan-500" }),
             " ",
@@ -721,6 +839,8 @@ function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
         /* @__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",
@@ -737,6 +857,8 @@ function FlowPalette({ onAdd, labels: labelsOverride, actionOptions }) {
         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
@@ -755,7 +877,11 @@ import { Plus as Plus2, Trash2, Save, X as X2, AlertTriangle as AlertTriangle2,
 // 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 }) {
+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 });
   }
@@ -771,7 +897,14 @@ function FlowWhatsAppPreview({ body, options, labels = DEFAULT_FLOW_EDITOR_LABEL
           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 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 })
@@ -833,17 +966,23 @@ function FlowNodePanel({
   onClose,
   onChange,
   onDelete,
-  labels: labelsOverride
+  labels: labelsOverride,
+  renderMediaPicker
 }) {
   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 isSendMedia = isAction && draft.actionKind === BUILT_IN_ACTION_KINDS.SEND_MEDIA;
   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 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 }));
@@ -870,7 +1009,10 @@ function FlowNodePanel({
     });
   }
   function addOption() {
-    setDraft((prev) => ({ ...prev, options: [...prev.options ?? [], [String((prev.options?.length ?? 0) + 1), "Nova op\xE7\xE3o"]] }));
+    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) }));
@@ -884,16 +1026,36 @@ function FlowNodePanel({
   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__ */ 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 }) })
     ] }),
     /* @__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(
+          "input",
+          {
+            value: draft.label ?? "",
+            placeholder: labels.nodePanel.nodeNamePlaceholder,
+            onChange: (event) => setDraft((prev) => ({ ...prev, label: event.target.value || void 0 })),
+            className: `w-full mt-1 ${INPUT_CLASSNAME}`
+          }
+        ),
+        /* @__PURE__ */ jsx9("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("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" })
+        /* @__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 }),
@@ -937,7 +1099,10 @@ function FlowNodePanel({
             "select",
             {
               value: draft.conditionOperator ?? ">",
-              onChange: (e) => setDraft((prev) => ({ ...prev, conditionOperator: e.target.value })),
+              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))
             }
@@ -965,7 +1130,11 @@ function FlowNodePanel({
           labels
         }
       ),
-      isAction && draft.actionKind !== "send_product_list" && /* @__PURE__ */ jsx9(
+      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 }) })
+      ] }),
+      isAction && draft.actionKind !== "send_product_list" && !isSendMedia && /* @__PURE__ */ jsx9(
         WhatsAppTextField,
         {
           label: labels.nodePanel.directMessage,
@@ -978,7 +1147,7 @@ function FlowNodePanel({
       (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__ */ 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 }),
             " ",
             labels.nodePanel.addOption
@@ -1003,7 +1172,7 @@ function FlowNodePanel({
               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 }) })
+          /* @__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 }) })
         ] }, i)) })
       ] }),
       !isAction && /* @__PURE__ */ jsxs8("div", { className: "pt-2 border-t border-gray-100 dark:border-gray-700", children: [
@@ -1055,26 +1224,1107 @@ function FlowNodePanel({
       ] })
     ] }),
     /* @__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
-      ] }),
+      /* @__PURE__ */ jsxs8(
+        "button",
+        {
+          "data-cv-tooltip": labels.nodePanel.save,
+          "aria-label": labels.nodePanel.save,
+          onClick: () => onChange(draft),
+          className: "flex-1 inline-flex items-center justify-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700",
+          children: [
+            /* @__PURE__ */ 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,
+          "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 })
         }
       ),
-      /* @__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 })
+      /* @__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 })
+    ] })
+  ] });
+}
+
+// src/flows/FlowsWorkspace.tsx
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
+import {
+  ReactFlow as ReactFlow2,
+  Background as Background2,
+  Controls as Controls2,
+  MiniMap,
+  MarkerType as MarkerType2,
+  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";
+
+// src/flows/flowEditorOps.ts
+var NAMESPACE_SEPARATOR = "::";
+function namespaceNodeId(flowKey, nodeId) {
+  return `${flowKey}${NAMESPACE_SEPARATOR}${nodeId}`;
+}
+function parseNamespacedId(value) {
+  const index = value.indexOf(NAMESPACE_SEPARATOR);
+  if (index === -1) return { flowKey: "", nodeId: value };
+  return { flowKey: value.slice(0, index), nodeId: value.slice(index + NAMESPACE_SEPARATOR.length) };
+}
+function removeNodeAndCleanRefs(nodes, removedId) {
+  const remaining = {};
+  for (const [id, node] of Object.entries(nodes)) {
+    if (id === removedId) continue;
+    remaining[id] = { ...node, next: cleanNext(node.next, removedId) };
+  }
+  return remaining;
+}
+function cleanNext(next, removedId) {
+  if (next === void 0) return void 0;
+  if (typeof next === "string") return next === removedId ? "" : next;
+  const byAnswer = {};
+  for (const [answer, target] of Object.entries(next.byAnswer ?? {})) {
+    byAnswer[answer] = target === removedId ? "" : target;
+  }
+  return { byAnswer, default: next.default === removedId ? "" : next.default ?? "" };
+}
+function mergedFlowKeysFrom(rootKey, graphs) {
+  const visited = /* @__PURE__ */ new Set();
+  const queue = [rootKey];
+  while (queue.length > 0) {
+    const key = queue.shift();
+    if (visited.has(key) || !graphs[key]) continue;
+    visited.add(key);
+    for (const target of crossFlowTargetsOf(graphs[key])) {
+      if (!visited.has(target) && graphs[target]) queue.push(target);
+    }
+  }
+  return [...visited];
+}
+function resolveConnection(params) {
+  const { source, target, sourceHandle } = params.connection;
+  if (!source || !target || source === target) return void 0;
+  const sourceRef = parseNamespacedId(source);
+  const targetRef = parseNamespacedId(target);
+  let targetValue;
+  if (targetRef.flowKey === sourceRef.flowKey) {
+    targetValue = targetRef.nodeId;
+  } else {
+    const targetGraph = params.graphs[targetRef.flowKey];
+    if (!targetGraph || targetGraph.startNodeId !== targetRef.nodeId) return void 0;
+    targetValue = `${CROSS_FLOW_PREFIX}${targetRef.flowKey}`;
+  }
+  return {
+    flowKey: sourceRef.flowKey,
+    nodeId: sourceRef.nodeId,
+    handle: sourceHandle ?? "next",
+    targetValue
+  };
+}
+function applyConnection(node, resolved) {
+  const currentNext = typeof node.next === "object" && node.next ? node.next : void 0;
+  if (resolved.handle === "next") return { ...node, next: resolved.targetValue };
+  if (resolved.handle === "__default") {
+    return { ...node, next: { byAnswer: currentNext?.byAnswer ?? {}, default: resolved.targetValue } };
+  }
+  return {
+    ...node,
+    next: {
+      byAnswer: { ...currentNext?.byAnswer ?? {}, [resolved.handle]: resolved.targetValue },
+      default: currentNext?.default ?? ""
+    }
+  };
+}
+function isGraphDirty(working, published) {
+  if (!working || !published) return false;
+  return JSON.stringify(working) !== JSON.stringify(published);
+}
+
+// src/flows/flowCanvasModel.ts
+var COLUMN_GAP = 360;
+var ROW_GAP = 40;
+var CHAIN_LABEL_ROOM = 24;
+function portalNodeId(sourceNodeId, target) {
+  return `__portal__${sourceNodeId}__${target}`;
+}
+function chainFrameNodeId(actionNodeId) {
+  return `__chain__${actionNodeId}`;
+}
+var GROUP_HEADER_NODE_ID = "__group_header__";
+function countLiveByNode(params) {
+  const { flowKey, rootFlowKey, positions } = params;
+  const isRoot = flowKey === rootFlowKey;
+  const counts = {};
+  for (const position of positions ?? []) {
+    if (position.flow !== flowKey && !isRoot) continue;
+    const nodeId = isRoot ? position.menuNodeId : position.nodeId;
+    if (!nodeId) continue;
+    counts[nodeId] = (counts[nodeId] ?? 0) + 1;
+  }
+  return counts;
+}
+function computeMergedLayout(params) {
+  const { openKeys, graphs, primaryFlowKey } = params;
+  const open = new Set(openKeys);
+  const nodeById = /* @__PURE__ */ new Map();
+  for (const key of openKeys) {
+    for (const node of Object.values(graphs[key]?.nodes ?? {})) {
+      nodeById.set(namespaceNodeId(key, node.id), node);
+    }
+  }
+  function forwardEdges(flowKey, node) {
+    const result = [];
+    for (const { target } of targetsOf(node)) {
+      if (isCrossFlowTarget(target)) {
+        const targetKey = crossFlowKey(target);
+        const targetGraph = open.has(targetKey) ? graphs[targetKey] : void 0;
+        if (targetGraph) result.push(namespaceNodeId(targetKey, targetGraph.startNodeId));
+      } else if (graphs[flowKey]?.nodes[target]) {
+        result.push(namespaceNodeId(flowKey, target));
+      }
+    }
+    return result;
+  }
+  const 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 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;
+    }
+  }
+  return positions;
+}
+function buildFlowEdges(params) {
+  const { openKeys, graphs, rootFlowKey, livePositions } = params;
+  const open = new Set(openKeys);
+  const edges = [];
+  for (const flowKey of openKeys) {
+    const graph = graphs[flowKey];
+    if (!graph) continue;
+    const liveCounts = countLiveByNode({ flowKey, rootFlowKey, positions: livePositions });
+    for (const [nodeId, node] of Object.entries(graph.nodes)) {
+      const live = (liveCounts[nodeId] ?? 0) > 0;
+      for (const { target, optionId, isDefault } of targetsOf(node)) {
+        if (!target) continue;
+        const crossFlow = isCrossFlowTarget(target);
+        let targetFlowKey = flowKey;
+        let targetNodeId = target;
+        if (crossFlow) {
+          const wantedKey = crossFlowKey(target);
+          const targetGraph = open.has(wantedKey) ? graphs[wantedKey] : void 0;
+          if (targetGraph) {
+            targetFlowKey = wantedKey;
+            targetNodeId = targetGraph.startNodeId;
+          } else {
+            targetNodeId = portalNodeId(nodeId, target);
+          }
+        }
+        const source = namespaceNodeId(flowKey, nodeId);
+        const edgeTarget = namespaceNodeId(targetFlowKey, targetNodeId);
+        if (isDefault) {
+          edges.push({
+            id: `${source}->${edgeTarget}-default`,
+            source,
+            target: edgeTarget,
+            sourceHandle: "__default",
+            kind: "fallback",
+            crossFlow,
+            // Fallback não anima: é o caminho que ninguém escolheu, e piscar sugeria que a conversa
+            // estava passando por ali.
+            live: false
+          });
+          continue;
+        }
+        if (optionId === void 0) {
+          edges.push({ id: `${source}->${edgeTarget}`, source, target: edgeTarget, kind: "linear", crossFlow, live });
+          continue;
+        }
+        edges.push({
+          id: `${source}->${edgeTarget}-${optionId}`,
+          source,
+          target: edgeTarget,
+          sourceHandle: optionId,
+          kind: "branch",
+          crossFlow,
+          live
+        });
+      }
+    }
+  }
+  return edges;
+}
+function detachedNodeIds(graph) {
+  const connected = /* @__PURE__ */ new Set();
+  for (const node of Object.values(graph.nodes)) {
+    for (const { target } of targetsOf(node)) {
+      if (!isCrossFlowTarget(target)) connected.add(target);
+    }
+  }
+  const detached = /* @__PURE__ */ new Set();
+  for (const nodeId of Object.keys(graph.nodes)) {
+    if (nodeId !== graph.startNodeId && !connected.has(nodeId)) detached.add(nodeId);
+  }
+  return detached;
+}
+function chainFrameBounds(params) {
+  const { nodeIds, graph, positionOf, padding } = params;
+  const positions = nodeIds.map(positionOf);
+  const minX = Math.min(...positions.map((each) => each.x));
+  const maxX = Math.max(...positions.map((each) => each.x)) + NODE_CARD_WIDTH;
+  const minY = Math.min(...positions.map((each) => each.y));
+  const maxY = Math.max(...nodeIds.map((id, index) => positions[index].y + estimateNodeHeight(graph.nodes[id])));
+  return {
+    x: minX - padding,
+    y: minY - padding - CHAIN_LABEL_ROOM,
+    width: maxX - minX + padding * 2,
+    height: maxY - minY + padding * 2 + CHAIN_LABEL_ROOM
+  };
+}
+function newNodeFromSpec(spec, existingIds) {
+  if (spec.kind === "question") {
+    const id2 = slugifyNodeId("nova_pergunta", existingIds);
+    return { id: id2, type: "question", questionType: spec.questionType, contextKey: id2, question: "" };
+  }
+  if (spec.kind === "decision") {
+    const id2 = slugifyNodeId("nova_decisao", existingIds);
+    return {
+      id: id2,
+      type: "question",
+      questionType: "choice",
+      contextKey: id2,
+      question: "",
+      options: [
+        ["1", "Op\xE7\xE3o 1"],
+        ["2", "Op\xE7\xE3o 2"]
+      ]
+    };
+  }
+  if (spec.kind === "condition") {
+    const id2 = slugifyNodeId("nova_condicao", existingIds);
+    return { id: id2, type: "condition", conditionOperator: ">" };
+  }
+  const id = slugifyNodeId("nova_acao", existingIds);
+  return { id, type: "action", actionKind: spec.actionKind };
+}
+
+// src/flows/FlowsWorkspace.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var RF_NODE_TYPES = {
+  ...flowNodeTypes,
+  ...flowPortalNodeTypes,
+  ...flowGroupHeaderNodeTypes,
+  ...flowGroupFrameNodeTypes
+};
+var CHAIN_FRAME_PADDING = 36;
+var FLOW_KEY_PATTERN = /^[a-z0-9_]{2,40}$/;
+var EDGE_COLOR_LINEAR = "#94a3b8";
+var EDGE_COLOR_BRANCH = "#8b5cf6";
+var EDGE_COLOR_FALLBACK = "#cbd5e1";
+var EDGE_COLOR_LIVE = "#3b82f6";
+var EDGE_COLOR_CROSS_FLOW = "#06b6d4";
+var BACKGROUND_COLOR_LIGHT2 = "#cbd5e1";
+var BACKGROUND_COLOR_DARK2 = "#334155";
+function styleEdge(spec) {
+  const color = spec.crossFlow ? EDGE_COLOR_CROSS_FLOW : spec.kind === "fallback" ? EDGE_COLOR_FALLBACK : spec.live ? EDGE_COLOR_LIVE : spec.kind === "branch" ? EDGE_COLOR_BRANCH : EDGE_COLOR_LINEAR;
+  const baseWidth = spec.kind === "branch" ? 1.75 : 1.5;
+  const dash = spec.crossFlow ? "3 3" : spec.kind === "fallback" ? "5 4" : void 0;
+  const markerSize = spec.kind === "fallback" ? 16 : 18;
+  return {
+    id: spec.id,
+    source: spec.source,
+    target: spec.target,
+    ...spec.sourceHandle === void 0 ? {} : { sourceHandle: spec.sourceHandle },
+    type: "bezier",
+    animated: spec.live,
+    style: {
+      stroke: color,
+      strokeWidth: spec.live && !spec.crossFlow ? 2.5 : baseWidth,
+      ...dash === void 0 ? {} : { strokeDasharray: dash }
+    },
+    markerEnd: { type: MarkerType2.ArrowClosed, color, width: markerSize, height: markerSize }
+  };
+}
+function extractErrorMessage(error) {
+  if (error instanceof Error) return error.message;
+  return void 0;
+}
+var OUTLINE_BUTTON = "inline-flex items-center gap-1.5 rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-1.5 text-xs font-medium text-gray-600 dark:text-gray-300 hover:border-blue-300 disabled:opacity-40 disabled:cursor-not-allowed";
+var PRIMARY_BUTTON = "inline-flex items-center gap-1.5 rounded-lg bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700 disabled:opacity-40 disabled:cursor-not-allowed";
+var DIALOG_INPUT = "w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-xl px-3 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-blue-400";
+function FlowsWorkspace({
+  api,
+  rootFlowKey = "menu",
+  labels: labelsOverride,
+  actionOptions,
+  renderMediaPicker,
+  livePollIntervalMs = 5e3,
+  className
+}) {
+  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 reloadGraphs = useCallback(async () => {
+    try {
+      const loaded = await api.getGraphs();
+      setGraphs(loaded);
+      setLoadState("ready");
+      return loaded;
+    } catch {
+      setLoadState("error");
+      return void 0;
+    }
+  }, [api]);
+  useEffect2(() => {
+    void reloadGraphs();
+  }, [reloadGraphs]);
+  useEffect2(() => {
+    const fetchLive = api.getLivePositions;
+    if (!fetchLive) return;
+    let active = true;
+    async function poll() {
+      try {
+        const positions = await fetchLive();
+        if (active) setLivePositions(positions);
+      } catch {
+      }
+    }
+    void poll();
+    const timer = setInterval(() => void poll(), livePollIntervalMs);
+    return () => {
+      active = false;
+      clearInterval(timer);
+    };
+  }, [api, livePollIntervalMs]);
+  const primaryFlowKey = openFlowKeys[0] ?? rootFlowKey;
+  const primaryGraph = workingGraphs[primaryFlowKey];
+  useEffect2(() => {
+    if (!graphs || hasAutoMerged) return;
+    setOpenFlowKeys(mergedFlowKeysFrom(rootFlowKey, graphs));
+    setHasAutoMerged(true);
+  }, [graphs, hasAutoMerged, rootFlowKey]);
+  useEffect2(() => {
+    if (!graphs) return;
+    setWorkingGraphs((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      for (const key of openFlowKeys) {
+        if (!next[key] && graphs[key]) {
+          next[key] = graphs[key];
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [graphs, openFlowKeys]);
+  const isFlowDirty = useCallback(
+    (key) => {
+      const working = workingGraphs[key];
+      const server = graphs?.[key];
+      if (!working || !server) return false;
+      return JSON.stringify(working) !== JSON.stringify(server);
+    },
+    [workingGraphs, graphs]
+  );
+  const issuesByFlow = useMemo2(() => {
+    const map = {};
+    for (const key of openFlowKeys) {
+      const graph = workingGraphs[key];
+      if (graph) map[key] = validateGraph(graph, labels.validation);
+    }
+    return map;
+  }, [openFlowKeys, workingGraphs, labels]);
+  const errorCount = Object.values(issuesByFlow).reduce(
+    (sum, list) => sum + list.filter((issue) => issue.severity === "error").length,
+    0
+  );
+  const warningCount = Object.values(issuesByFlow).reduce(
+    (sum, list) => sum + list.filter((issue) => issue.severity === "warning").length,
+    0
+  );
+  const dirtyKeys = openFlowKeys.filter(isFlowDirty);
+  const isDirty = dirtyKeys.length > 0;
+  const updateFlow = useCallback((flowKey, updater) => {
+    setWorkingGraphs((prev) => {
+      const graph = prev[flowKey];
+      if (!graph) return prev;
+      return { ...prev, [flowKey]: updater(graph) };
+    });
+  }, []);
+  const focusFlow = useCallback(
+    (key) => {
+      const others = openFlowKeys.filter((each) => each !== key);
+      if (others.some(isFlowDirty) && !window.confirm(labels.workspace.unsavedChangesConfirm)) return;
+      setOpenFlowKeys(graphs ? mergedFlowKeysFrom(key, graphs) : [key]);
+      if (editingRef && editingRef.flowKey !== key) setEditingRef(null);
+    },
+    [openFlowKeys, isFlowDirty, editingRef, graphs, labels]
+  );
+  const closeFlow = useCallback(
+    (key) => {
+      if (isFlowDirty(key) && !window.confirm(labels.workspace.unsavedChangesConfirm)) return;
+      setOpenFlowKeys((prev) => prev.filter((each) => each !== key));
+      setWorkingGraphs((prev) => {
+        const { [key]: _removed, ...rest } = prev;
+        return rest;
+      });
+      if (editingRef?.flowKey === key) setEditingRef(null);
+    },
+    [isFlowDirty, editingRef, labels]
+  );
+  const mergeFlow = useCallback((targetFlowKey) => {
+    setOpenFlowKeys((prev) => prev.includes(targetFlowKey) ? prev : [...prev, targetFlowKey]);
+  }, []);
+  const isMerged = openFlowKeys.length > 1;
+  const mergedPositions = useMemo2(
+    () => isMerged ? computeMergedLayout({ openKeys: openFlowKeys, graphs: workingGraphs, primaryFlowKey }) : null,
+    [isMerged, openFlowKeys, workingGraphs, primaryFlowKey]
+  );
+  const renderedPositionsRef = useRef2(/* @__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 };
+        }
+        return graph.nodes[nodeId]?.position ?? fallbackPositions[nodeId] ?? { x: 0, y: 0 };
+      };
+      var resolvePosition = resolvePosition2;
+      const graph = workingGraphs[flowKey];
+      if (!graph) continue;
+      const fallbackPositions = mergedPositions ? {} : computeAutoLayout(graph);
+      const liveCounts = countLiveByNode({ flowKey, rootFlowKey, positions: livePositions });
+      const flowIssues = issuesByFlow[flowKey] ?? [];
+      const isPrimary = flowKey === primaryFlowKey;
+      const connectedTargets = /* @__PURE__ */ new Set();
+      for (const candidate of Object.values(graph.nodes)) {
+        for (const { target } of targetsOf(candidate)) {
+          if (!isCrossFlowTarget(target)) connectedTargets.add(target);
+        }
+      }
+      for (const node of Object.values(graph.nodes)) {
+        const position = resolvePosition2(node.id);
+        allNodes.push({
+          id: namespaceNodeId(flowKey, node.id),
+          type: "flowNode",
+          position,
+          draggable: true,
+          data: {
+            node,
+            liveCount: liveCounts[node.id] ?? 0,
+            isStart: node.id === graph.startNodeId,
+            isSelected: editingRef?.flowKey === flowKey && editingRef?.nodeId === node.id,
+            isDetached: node.id !== graph.startNodeId && !connectedTargets.has(node.id),
+            issues: flowIssues,
+            labels,
+            onSelect: (nodeId) => setEditingRef({ flowKey, nodeId })
+          }
+        });
+        const crossFlowTargets = [...new Set(targetsOf(node).map((edge) => edge.target).filter(isCrossFlowTarget))];
+        crossFlowTargets.forEach((target, index) => {
+          const targetFlowKey = crossFlowKey(target);
+          if (openFlowKeys.includes(targetFlowKey)) return;
+          allNodes.push({
+            id: namespaceNodeId(flowKey, portalNodeId(node.id, target)),
+            type: "flowPortal",
+            draggable: false,
+            selectable: false,
+            position: { x: position.x + 320, y: position.y + index * 70 },
+            data: {
+              label: graphs?.[targetFlowKey]?.label ?? targetFlowKey,
+              onNavigate: () => mergeFlow(targetFlowKey)
+            }
+          });
+        });
+      }
+      for (const chain of findCollectionChains(graph)) {
+        const chainNodeIds = [...chain.nodeIds, chain.actionNodeId];
+        const positions = chainNodeIds.map((id) => resolvePosition2(id));
+        const minX = Math.min(...positions.map((point) => point.x));
+        const maxX = Math.max(...positions.map((point) => point.x)) + NODE_CARD_WIDTH;
+        const minY = Math.min(...positions.map((point) => point.y));
+        const maxY = Math.max(...positions.map((point) => point.y)) + estimateNodeHeight(graph.nodes[chain.actionNodeId]);
+        allNodes.push({
+          id: namespaceNodeId(flowKey, `__chain__${chain.actionNodeId}`),
+          type: "flowGroupFrame",
+          draggable: false,
+          selectable: false,
+          zIndex: -1,
+          position: { x: minX - CHAIN_FRAME_PADDING, y: minY - CHAIN_FRAME_PADDING - 24 },
+          style: {
+            width: maxX - minX + CHAIN_FRAME_PADDING * 2,
+            height: maxY - minY + CHAIN_FRAME_PADDING * 2 + 24
+          },
+          data: {
+            label: labels.collectionChain.feeds(nodeLabel(graph.nodes[chain.actionNodeId], labels))
+          }
+        });
+      }
+      if (!isPrimary) {
+        const startPosition = resolvePosition2(graph.startNodeId);
+        allNodes.push({
+          id: namespaceNodeId(flowKey, "__group_header__"),
+          type: "flowGroupHeader",
+          draggable: false,
+          selectable: false,
+          position: { x: startPosition.x, y: startPosition.y - 60 },
+          data: {
+            label: graph.label,
+            onFocus: () => focusFlow(flowKey),
+            onClose: () => closeFlow(flowKey)
+          }
+        });
+      }
+    }
+    return allNodes;
+  }, [
+    openFlowKeys,
+    workingGraphs,
+    mergedPositions,
+    livePositions,
+    issuesByFlow,
+    primaryFlowKey,
+    rootFlowKey,
+    editingRef,
+    graphs,
+    mergeFlow,
+    focusFlow,
+    closeFlow,
+    labels
+  ]);
+  const edges = useMemo2(
+    () => buildFlowEdges({ openKeys: openFlowKeys, graphs: workingGraphs, rootFlowKey, livePositions }).map(styleEdge),
+    [openFlowKeys, workingGraphs, rootFlowKey, livePositions]
+  );
+  useEffect2(() => {
+    setRfNodes(derivedNodes);
+    for (const node of derivedNodes) {
+      if (node.type === "flowNode") renderedPositionsRef.current.set(node.id, node.position);
+    }
+  }, [derivedNodes]);
+  useEffect2(() => {
+    if (!pendingFocusNodeId || !flowInstance) return;
+    const target = rfNodes.find((node) => node.id === pendingFocusNodeId);
+    if (!target) return;
+    flowInstance.setCenter(target.position.x + NODE_CARD_WIDTH / 2, target.position.y, { zoom: 1, duration: 400 });
+    setPendingFocusNodeId(null);
+  }, [pendingFocusNodeId, flowInstance, rfNodes]);
+  const onNodesChange = useCallback((changes) => {
+    setRfNodes((current) => applyNodeChanges(changes, current));
+  }, []);
+  const onNodeDragStop = useCallback(
+    (_event, node) => {
+      renderedPositionsRef.current.set(node.id, node.position);
+      const { flowKey, nodeId } = parseNamespacedId(node.id);
+      if (!openFlowKeys.includes(flowKey)) return;
+      updateFlow(
+        flowKey,
+        (graph) => graph.nodes[nodeId] ? { ...graph, nodes: { ...graph.nodes, [nodeId]: { ...graph.nodes[nodeId], position: node.position } } } : graph
+      );
+    },
+    [openFlowKeys, updateFlow]
+  );
+  const onConnect = useCallback(
+    (connection) => {
+      const resolved = resolveConnection({
+        connection: { source: connection.source, target: connection.target, sourceHandle: connection.sourceHandle },
+        graphs: workingGraphs
+      });
+      if (!resolved) return;
+      updateFlow(resolved.flowKey, (graph) => {
+        const node = graph.nodes[resolved.nodeId];
+        if (!node) return graph;
+        return { ...graph, nodes: { ...graph.nodes, [resolved.nodeId]: applyConnection(node, resolved) } };
+      });
+    },
+    [workingGraphs, updateFlow]
+  );
+  function handleAddNode(spec) {
+    if (!primaryGraph) return;
+    const newNode = newNodeFromSpec(spec, new Set(Object.keys(primaryGraph.nodes)));
+    const maxY = Math.max(0, ...Object.values(primaryGraph.nodes).map((node) => node.position?.y ?? 0));
+    newNode.position = { x: 0, y: maxY + 170 };
+    updateFlow(primaryFlowKey, (graph) => ({ ...graph, nodes: { ...graph.nodes, [newNode.id]: newNode } }));
+    setEditingRef({ flowKey: primaryFlowKey, nodeId: newNode.id });
+    setPendingFocusNodeId(namespaceNodeId(primaryFlowKey, newNode.id));
+  }
+  function handleNodePanelChange(updated) {
+    if (!editingRef) return;
+    updateFlow(editingRef.flowKey, (graph) => ({ ...graph, nodes: { ...graph.nodes, [updated.id]: updated } }));
+    setEditingRef(null);
+  }
+  function handleNodeDelete(nodeId) {
+    if (!editingRef) return;
+    updateFlow(editingRef.flowKey, (graph) => ({ ...graph, nodes: removeNodeAndCleanRefs(graph.nodes, nodeId) }));
+    setEditingRef(null);
+  }
+  function handleOrganize() {
+    if (!primaryGraph) return;
+    renderedPositionsRef.current.clear();
+    if (isMerged) {
+      const positions2 = computeMergedLayout({ openKeys: openFlowKeys, graphs: workingGraphs, primaryFlowKey });
+      for (const key of openFlowKeys) {
+        updateFlow(key, (graph) => ({
+          ...graph,
+          nodes: Object.fromEntries(
+            Object.entries(graph.nodes).map(([id, node]) => {
+              const position = positions2.get(namespaceNodeId(key, id));
+              return [id, position ? { ...node, position } : node];
+            })
+          )
+        }));
+      }
+      return;
+    }
+    const positions = computeAutoLayout(primaryGraph);
+    updateFlow(primaryFlowKey, (graph) => ({
+      ...graph,
+      nodes: Object.fromEntries(
+        Object.entries(graph.nodes).map(([id, node]) => [id, { ...node, position: positions[id] ?? node.position }])
+      )
+    }));
+  }
+  function handleDiscardChanges() {
+    if (!graphs || !isDirty) return;
+    if (!window.confirm(labels.workspace.discardConfirm)) return;
+    setWorkingGraphs((prev) => {
+      const next = { ...prev };
+      for (const key of dirtyKeys) {
+        const published = graphs[key];
+        if (published) next[key] = published;
+      }
+      return next;
+    });
+    renderedPositionsRef.current.clear();
+    setEditingRef(null);
+  }
+  async function handlePublish() {
+    if (dirtyKeys.length === 0 || errorCount > 0) return;
+    setSaveState("saving");
+    setSaveErrorMessage(void 0);
+    try {
+      await Promise.all(dirtyKeys.map((key) => api.saveGraph(key, workingGraphs[key])));
+      await reloadGraphs();
+      setSaveState("success");
+      setTimeout(() => setSaveState("idle"), 3e3);
+    } catch (error) {
+      setSaveState("error");
+      setSaveErrorMessage(extractErrorMessage(error));
+    }
+  }
+  async function handleCreateFlow() {
+    const createFlow = api.createFlow;
+    if (!createFlow) return;
+    setFlowMutationState({ pending: true });
+    try {
+      await createFlow({
+        key: newFlow.key,
+        label: newFlow.label,
+        showInMenu: newFlow.showInMenu,
+        ...newFlow.showInMenu ? { menuOptionLabel: newFlow.menuOptionLabel || newFlow.label } : {}
+      });
+      await reloadGraphs();
+      setOpenFlowKeys([newFlow.key]);
+      setShowCreateDialog(false);
+      setNewFlow({ key: "", label: "", showInMenu: false, menuOptionLabel: "" });
+      setFlowMutationState({ pending: false });
+    } catch (error) {
+      setFlowMutationState({ pending: false, error: extractErrorMessage(error) ?? labels.flowManager.createError });
+    }
+  }
+  async function handleDeleteFlow() {
+    const deleteFlow = api.deleteFlow;
+    if (!deleteFlow || !primaryGraph) return;
+    setFlowMutationState({ pending: true });
+    try {
+      await deleteFlow(primaryGraph.key);
+      const reloaded = await reloadGraphs();
+      setOpenFlowKeys(reloaded ? mergedFlowKeysFrom(rootFlowKey, reloaded) : [rootFlowKey]);
+      setShowDeleteDialog(false);
+      setFlowMutationState({ pending: false });
+    } catch (error) {
+      setFlowMutationState({ pending: false, error: extractErrorMessage(error) ?? labels.flowManager.deleteError });
+    }
+  }
+  const editingGraph = editingRef ? workingGraphs[editingRef.flowKey] : null;
+  const editingNode = editingRef && editingGraph ? editingGraph.nodes[editingRef.nodeId] : null;
+  const otherFlows = useMemo2(
+    () => Object.values(graphs ?? {}).filter((graph) => graph.key !== editingRef?.flowKey).map((graph) => ({ key: graph.key, label: graph.label })),
+    [graphs, editingRef?.flowKey]
+  );
+  const keyIsValid = FLOW_KEY_PATTERN.test(newFlow.key);
+  const canCreateFlow = Boolean(api.createFlow);
+  const canDeleteFlow = Boolean(api.deleteFlow) && primaryFlowKey !== rootFlowKey;
+  return /* @__PURE__ */ 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: [
+      /* @__PURE__ */ jsxs9("div", { 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 })
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-3", 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(
+          "button",
+          {
+            "data-cv-tooltip": viewMode === "map" ? labels.flowMap.toggleToDetail : labels.flowMap.toggleToMap,
+            "aria-label": viewMode === "map" ? labels.flowMap.toggleToDetail : labels.flowMap.toggleToMap,
+            type: "button",
+            onClick: () => setViewMode((mode) => mode === "map" ? "detail" : "map"),
+            className: OUTLINE_BUTTON,
+            children: [
+              viewMode === "map" ? /* @__PURE__ */ jsx10(Workflow, { size: 14, "aria-hidden": "true" }) : /* @__PURE__ */ jsx10(MapIcon, { size: 14, "aria-hidden": "true" }),
+              viewMode === "map" ? labels.flowMap.toggleToDetail : labels.flowMap.toggleToMap
+            ]
+          }
+        ),
+        viewMode === "detail" && /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              onClick: handleOrganize,
+              className: OUTLINE_BUTTON,
+              "data-cv-tooltip": labels.workspace.organizeTooltip,
+              "aria-label": labels.workspace.organizeTooltip,
+              disabled: !primaryGraph,
+              children: [
+                /* @__PURE__ */ jsx10(LayoutGrid, { size: 14, "aria-hidden": "true" }),
+                " ",
+                labels.workspace.organize
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              type: "button",
+              onClick: handleDiscardChanges,
+              className: OUTLINE_BUTTON,
+              "data-cv-tooltip": labels.workspace.discardTooltip,
+              "aria-label": labels.workspace.discardTooltip,
+              disabled: !isDirty || saveState === "saving",
+              children: [
+                /* @__PURE__ */ jsx10(Undo2, { size: 14, "aria-hidden": "true" }),
+                " ",
+                labels.workspace.discardChanges
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              "data-cv-tooltip": labels.workspace.saveGraph,
+              "aria-label": labels.workspace.saveGraph,
+              type: "button",
+              onClick: () => void handlePublish(),
+              className: PRIMARY_BUTTON,
+              disabled: !isDirty || errorCount > 0 || saveState === "saving",
+              children: [
+                /* @__PURE__ */ jsx10(Save2, { size: 14, "aria-hidden": "true" }),
+                saveState === "saving" ? labels.workspace.saving : labels.workspace.saveGraph
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }),
+    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(
+          "button",
+          {
+            "data-cv-tooltip": graph.label,
+            "aria-label": graph.label,
+            type: "button",
+            onClick: () => focusFlow(graph.key),
+            className: `px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ${primaryFlowKey === graph.key ? "bg-blue-600 text-white border-blue-600" : "bg-white dark:bg-gray-800 text-gray-600 dark:text-gray-300 border-gray-200 dark:border-gray-700 hover:border-blue-300"}`,
+            children: graph.label
+          },
+          graph.key
+        )),
+        canCreateFlow && /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            "data-cv-tooltip": labels.flowManager.newFlow,
+            "aria-label": labels.flowManager.newFlow,
+            type: "button",
+            onClick: () => {
+              setFlowMutationState({ pending: false });
+              setShowCreateDialog(true);
+            },
+            className: "inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-xs font-medium border border-dashed border-gray-300 dark:border-gray-600 text-gray-500 dark:text-gray-400 hover:border-blue-400 hover:text-blue-600",
+            children: [
+              /* @__PURE__ */ jsx10(Plus3, { size: 12, "aria-hidden": "true" }),
+              " ",
+              labels.flowManager.newFlow
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+        primaryGraph && /* @__PURE__ */ jsx10(
+          FlowPalette,
+          {
+            onAdd: handleAddNode,
+            labels,
+            ...actionOptions ? { actionOptions: [...actionOptions] } : {}
+          }
+        ),
+        primaryGraph && canDeleteFlow && /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            "data-cv-tooltip": labels.flowManager.deleteFlow,
+            "aria-label": labels.flowManager.deleteFlow,
+            type: "button",
+            onClick: () => {
+              setFlowMutationState({ pending: false });
+              setShowDeleteDialog(true);
+            },
+            className: "inline-flex items-center gap-1.5 rounded-lg border border-red-200 dark:border-red-900 px-3 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30",
+            children: [
+              /* @__PURE__ */ jsx10(Trash22, { size: 13, "aria-hidden": "true" }),
+              " ",
+              labels.flowManager.deleteFlow
+            ]
+          }
+        )
+      ] })
+    ] }),
+    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: [
+        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" }),
+        " ",
+        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" }),
+        " ",
+        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(
+        FlowMapCanvas,
+        {
+          graphs,
+          rootKey: rootFlowKey,
+          labels,
+          onOpenFlow: (key) => {
+            focusFlow(key);
+            setViewMode("detail");
+          }
+        }
+      ),
+      loadState === "ready" && viewMode === "detail" && primaryGraph && /* @__PURE__ */ jsxs9(
+        ReactFlow2,
+        {
+          nodes: rfNodes,
+          edges,
+          nodeTypes: RF_NODE_TYPES,
+          onNodesChange,
+          onNodeDragStop,
+          onConnect,
+          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" })
+          ]
+        }
+      )
+    ] }),
+    editingNode && editingGraph && /* @__PURE__ */ jsx10(
+      FlowNodePanel,
+      {
+        graph: editingGraph,
+        node: editingNode,
+        issues: editingRef ? issuesByFlow[editingRef.flowKey] ?? [] : [],
+        otherFlows,
+        labels,
+        onClose: () => setEditingRef(null),
+        onChange: handleNodePanelChange,
+        onDelete: handleNodeDelete,
+        ...renderMediaPicker ? { renderMediaPicker } : {}
+      },
+      `${editingRef?.flowKey}:${editingRef?.nodeId}`
+    ),
+    showCreateDialog && canCreateFlow && /* @__PURE__ */ 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(
+            "input",
+            {
+              value: newFlow.label,
+              onChange: (event) => setNewFlow((prev) => ({ ...prev, label: event.target.value })),
+              className: `mt-1 ${DIALOG_INPUT}`
+            }
+          )
+        ] }),
+        /* @__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(
+            "input",
+            {
+              value: newFlow.key,
+              onChange: (event) => setNewFlow((prev) => ({ ...prev, key: event.target.value.toLowerCase() })),
+              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__ */ jsxs9("label", { className: "flex items-center gap-2 text-sm text-gray-700 dark:text-gray-200", children: [
+          /* @__PURE__ */ jsx10(
+            "input",
+            {
+              type: "checkbox",
+              checked: newFlow.showInMenu,
+              onChange: (event) => setNewFlow((prev) => ({ ...prev, showInMenu: event.target.checked }))
+            }
+          ),
+          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(
+            "input",
+            {
+              value: newFlow.menuOptionLabel,
+              onChange: (event) => setNewFlow((prev) => ({ ...prev, menuOptionLabel: event.target.value })),
+              placeholder: newFlow.label,
+              className: `mt-1 ${DIALOG_INPUT}`
+            }
+          )
+        ] }),
+        flowMutationState.error && /* @__PURE__ */ jsx10("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(
+          "button",
+          {
+            "data-cv-tooltip": labels.flowManager.create,
+            "aria-label": labels.flowManager.create,
+            type: "button",
+            className: PRIMARY_BUTTON,
+            onClick: () => void handleCreateFlow(),
+            disabled: !keyIsValid || !newFlow.label || flowMutationState.pending,
+            children: flowMutationState.pending ? labels.flowManager.creating : labels.flowManager.create
+          }
+        )
+      ] })
+    ] }),
+    showDeleteDialog && canDeleteFlow && /* @__PURE__ */ 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(
+          "button",
+          {
+            "data-cv-tooltip": labels.flowManager.deleteFlow,
+            "aria-label": labels.flowManager.deleteFlow,
+            type: "button",
+            className: "inline-flex items-center gap-1.5 rounded-lg bg-red-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-red-700 disabled:opacity-40",
+            onClick: () => void handleDeleteFlow(),
+            disabled: flowMutationState.pending,
+            children: [
+              /* @__PURE__ */ jsx10(Trash22, { size: 13, "aria-hidden": "true" }),
+              " ",
+              labels.flowManager.deleteFlow
+            ]
+          }
+        )
+      ] })
     ] })
   ] });
 }
+function FlowDialog({
+  title,
+  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(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        className: "relative w-full max-w-md rounded-2xl bg-white dark:bg-gray-800 p-5 shadow-xl",
+        children: [
+          /* @__PURE__ */ jsx10("h3", { className: "text-base font-semibold text-gray-900 dark:text-gray-100 mb-3", children: title }),
+          children
+        ]
+      }
+    )
+  ] });
+}
 export {
   BUILT_IN_ACTION_KINDS,
   CONDITION_OPERATORS,
@@ -1089,12 +2339,21 @@ export {
   FlowPalette,
   FlowPortalNode,
   FlowWhatsAppPreview,
+  FlowsWorkspace,
+  GROUP_HEADER_NODE_ID,
   NODE_CARD_WIDTH,
   WHATSAPP_LIMITS,
+  applyConnection,
+  buildFlowEdges,
+  chainFrameBounds,
+  chainFrameNodeId,
   computeAutoLayout,
   computeFlowMapLayout,
+  computeMergedLayout,
+  countLiveByNode,
   crossFlowKey,
   crossFlowTargetsOf,
+  detachedNodeIds,
   estimateNodeHeight,
   findCollectionChains,
   flowGroupFrameNodeTypes,
@@ -1103,9 +2362,17 @@ export {
   flowNodeTypes,
   flowPortalNodeTypes,
   isCrossFlowTarget,
+  isGraphDirty,
   mergeFlowEditorLabels,
+  mergedFlowKeysFrom,
+  namespaceNodeId,
+  newNodeFromSpec,
   nodeLabel,
+  parseNamespacedId,
+  portalNodeId,
+  removeNodeAndCleanRefs,
   rendersAsButtons,
+  resolveConnection,
   slugifyNodeId,
   targetsOf,
   validateGraph