@adatechnology/conversations-ui 0.1.0-rc.26 → 0.1.0-rc.28

package/dist/flows/index.js

@@ -1,7 +1,10 @@
+import {
+  TooltipLayer
+} from "../chunk-DXPSPUWF.js";
 import {
   parseWhatsAppFormatting,
   useIsDarkTheme
-} from "../chunk-2AYDBWNE.js";
+} from "../chunk-WCBDXZ3X.js";
 
 // src/flows/FlowNodeCard.tsx
 import { Handle, Position } from "@xyflow/react";
@@ -99,7 +102,7 @@ function FlowNodeCard({ data }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      title: isDetached ? labels.detachedNodeTooltip : label,
+      "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: [
@@ -107,7 +110,7 @@ function FlowNodeCard({ data }) {
         /* @__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: [
@@ -116,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
               }
@@ -181,6 +184,8 @@ var DEFAULT_FLOW_EDITOR_LABELS = {
     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",
@@ -323,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",
@@ -678,7 +685,8 @@ function FlowGroupHeader({ data }) {
       {
         type: "button",
         onClick: onFocus,
-        title: labels.flowGroup.focus,
+        "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 })
       }
@@ -688,7 +696,8 @@ function FlowGroupHeader({ data }) {
       {
         type: "button",
         onClick: onClose,
-        title: labels.flowGroup.close,
+        "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 })
       }
@@ -707,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: [
@@ -752,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: [
@@ -766,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",
@@ -782,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]
@@ -792,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",
@@ -808,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" }),
             " ",
@@ -820,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",
@@ -836,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
@@ -1003,7 +1026,7 @@ 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)) }),
@@ -1124,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
@@ -1149,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: [
@@ -1204,6 +1227,8 @@ function FlowNodePanel({
       /* @__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: [
@@ -1219,12 +1244,13 @@ function FlowNodePanel({
           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 })
     ] })
   ] });
 }
@@ -1241,6 +1267,87 @@ import {
 } 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/FlowsWorkspace.tsx
 import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var RF_NODE_TYPES = {
   ...flowNodeTypes,
@@ -1251,7 +1358,6 @@ var RF_NODE_TYPES = {
 var CHAIN_FRAME_PADDING = 36;
 var COLUMN_GAP = 360;
 var ROW_GAP = 40;
-var NS_SEP = "::";
 var FLOW_KEY_PATTERN = /^[a-z0-9_]{2,40}$/;
 var EDGE_COLOR_LINEAR = "#94a3b8";
 var EDGE_COLOR_BRANCH = "#8b5cf6";
@@ -1263,25 +1369,8 @@ var BACKGROUND_COLOR_DARK2 = "#334155";
 function portalNodeId(sourceId, target) {
   return `__portal__${sourceId}__${target}`;
 }
-function ns(flowKey, nodeId) {
-  return `${flowKey}${NS_SEP}${nodeId}`;
-}
-function parseNs(id) {
-  const index = id.indexOf(NS_SEP);
-  return index === -1 ? { flowKey: "", nodeId: id } : { flowKey: id.slice(0, index), nodeId: id.slice(index + NS_SEP.length) };
-}
 function autoMergeAll(rootKey, graphsSource) {
-  const visited = /* @__PURE__ */ new Set();
-  const queue = [rootKey];
-  while (queue.length > 0) {
-    const key = queue.shift();
-    if (visited.has(key) || !graphsSource[key]) continue;
-    visited.add(key);
-    for (const target of crossFlowTargetsOf(graphsSource[key])) {
-      if (!visited.has(target) && graphsSource[target]) queue.push(target);
-    }
-  }
-  return [...visited].map((key) => ({ key, offset: { x: 0, y: 0 } }));
+  return mergedFlowKeysFrom(rootKey, graphsSource).map((key) => ({ key, offset: { x: 0, y: 0 } }));
 }
 function computeMergedLayout(openFlows, workingGraphs, primaryFlowKey) {
   const openKeys = new Set(openFlows.map((flow) => flow.key));
@@ -1289,7 +1378,7 @@ function computeMergedLayout(openFlows, workingGraphs, primaryFlowKey) {
   for (const { key } of openFlows) {
     const graph = workingGraphs[key];
     if (!graph) continue;
-    for (const node of Object.values(graph.nodes)) nodeByNsId.set(ns(key, node.id), node);
+    for (const node of Object.values(graph.nodes)) nodeByNsId.set(namespaceNodeId(key, node.id), node);
   }
   function forwardEdges(flowKey, node) {
     const result = [];
@@ -1297,16 +1386,16 @@ function computeMergedLayout(openFlows, workingGraphs, primaryFlowKey) {
       if (isCrossFlowTarget(target)) {
         const targetFlowKey = crossFlowKey(target);
         const targetGraph = openKeys.has(targetFlowKey) ? workingGraphs[targetFlowKey] : void 0;
-        if (targetGraph) result.push(ns(targetFlowKey, targetGraph.startNodeId));
+        if (targetGraph) result.push(namespaceNodeId(targetFlowKey, targetGraph.startNodeId));
       } else if (workingGraphs[flowKey]?.nodes[target]) {
-        result.push(ns(flowKey, target));
+        result.push(namespaceNodeId(flowKey, target));
       }
     }
     return result;
   }
   const rank = /* @__PURE__ */ new Map();
   const primaryGraph = workingGraphs[primaryFlowKey];
-  const rootId = primaryGraph ? ns(primaryFlowKey, primaryGraph.startNodeId) : void 0;
+  const rootId = primaryGraph ? namespaceNodeId(primaryFlowKey, primaryGraph.startNodeId) : void 0;
   if (rootId && nodeByNsId.has(rootId)) {
     rank.set(rootId, 0);
     const queue = [rootId];
@@ -1314,7 +1403,7 @@ function computeMergedLayout(openFlows, workingGraphs, primaryFlowKey) {
       const id = queue.shift();
       const node = nodeByNsId.get(id);
       if (!node) continue;
-      for (const nextId of forwardEdges(parseNs(id).flowKey, node)) {
+      for (const nextId of forwardEdges(parseNamespacedId(id).flowKey, node)) {
         if (!rank.has(nextId)) {
           rank.set(nextId, rank.get(id) + 1);
           queue.push(nextId);
@@ -1361,6 +1450,7 @@ function buildAllEdges(openFlows, workingGraphs, rootFlowKey, livePositions) {
     for (const [id, node] of Object.entries(graph.nodes)) {
       const isLive = (liveCounts[id] ?? 0) > 0;
       for (const { target, optionId, isDefault } of targetsOf(node)) {
+        if (!target) continue;
         const crossFlow = isCrossFlowTarget(target);
         let targetFlowKey = flowKey;
         let rawTargetId = target;
@@ -1374,8 +1464,8 @@ function buildAllEdges(openFlows, workingGraphs, rootFlowKey, livePositions) {
             rawTargetId = portalNodeId(id, target);
           }
         }
-        const source = ns(flowKey, id);
-        const edgeTarget = ns(targetFlowKey, rawTargetId);
+        const source = namespaceNodeId(flowKey, id);
+        const edgeTarget = namespaceNodeId(targetFlowKey, rawTargetId);
         if (optionId === void 0 && !isDefault) {
           const color = crossFlow ? EDGE_COLOR_CROSS_FLOW : isLive ? EDGE_COLOR_LIVE : EDGE_COLOR_LINEAR;
           edges.push({
@@ -1442,29 +1532,6 @@ function newNodeFromSpec(spec, existingIds) {
   const id = slugifyNodeId("nova_acao", existingIds);
   return { id, type: "action", actionKind: spec.actionKind };
 }
-function removeNodeAndCleanRefs(nodes, nodeId) {
-  const { [nodeId]: _removed, ...rest } = nodes;
-  return Object.fromEntries(
-    Object.entries(rest).map(([id, node]) => {
-      if (!node.next) return [id, node];
-      if (typeof node.next === "string") {
-        return [id, node.next === nodeId ? { ...node, next: void 0 } : node];
-      }
-      return [
-        id,
-        {
-          ...node,
-          next: {
-            byAnswer: Object.fromEntries(
-              Object.entries(node.next.byAnswer).map(([key, value]) => [key, value === nodeId ? "" : value])
-            ),
-            default: node.next.default === nodeId ? "" : node.next.default
-          }
-        }
-      ];
-    })
-  );
-}
 function extractErrorMessage(error) {
   if (error instanceof Error) return error.message;
   return void 0;
@@ -1641,7 +1708,7 @@ function FlowsWorkspace({
     for (const { key: flowKey, offset } of openFlows) {
       let resolvePosition2 = function(nodeId) {
         if (mergedPositions) {
-          const nsId = ns(flowKey, nodeId);
+          const nsId = namespaceNodeId(flowKey, nodeId);
           return renderedPositionsRef.current.get(nsId) ?? mergedPositions.get(nsId) ?? { x: 0, y: 0 };
         }
         const local = graph.nodes[nodeId]?.position ?? fallbackPositions[nodeId] ?? { x: 0, y: 0 };
@@ -1663,7 +1730,7 @@ function FlowsWorkspace({
       for (const node of Object.values(graph.nodes)) {
         const position = resolvePosition2(node.id);
         allNodes.push({
-          id: ns(flowKey, node.id),
+          id: namespaceNodeId(flowKey, node.id),
           type: "flowNode",
           position,
           draggable: true,
@@ -1683,7 +1750,7 @@ function FlowsWorkspace({
           const targetFlowKey = crossFlowKey(target);
           if (openFlows.some((flow) => flow.key === targetFlowKey)) return;
           allNodes.push({
-            id: ns(flowKey, portalNodeId(node.id, target)),
+            id: namespaceNodeId(flowKey, portalNodeId(node.id, target)),
             type: "flowPortal",
             draggable: false,
             selectable: false,
@@ -1703,7 +1770,7 @@ function FlowsWorkspace({
         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: ns(flowKey, `__chain__${chain.actionNodeId}`),
+          id: namespaceNodeId(flowKey, `__chain__${chain.actionNodeId}`),
           type: "flowGroupFrame",
           draggable: false,
           selectable: false,
@@ -1721,7 +1788,7 @@ function FlowsWorkspace({
       if (!isPrimary) {
         const startPosition = resolvePosition2(graph.startNodeId);
         allNodes.push({
-          id: ns(flowKey, "__group_header__"),
+          id: namespaceNodeId(flowKey, "__group_header__"),
           type: "flowGroupHeader",
           draggable: false,
           selectable: false,
@@ -1773,10 +1840,11 @@ function FlowsWorkspace({
   const onNodeDragStop = useCallback(
     (_event, node) => {
       renderedPositionsRef.current.set(node.id, node.position);
-      const { flowKey, nodeId } = parseNs(node.id);
+      const { flowKey, nodeId } = parseNamespacedId(node.id);
       const openFlow = openFlows.find((flow) => flow.key === flowKey);
       if (!openFlow) return;
-      const localPosition = { x: node.position.x - openFlow.offset.x, y: node.position.y - openFlow.offset.y };
+      const drawnWithOffset = openFlows.length === 1;
+      const localPosition = drawnWithOffset ? { x: node.position.x - openFlow.offset.x, y: node.position.y - openFlow.offset.y } : node.position;
       updateFlow(
         flowKey,
         (graph) => graph.nodes[nodeId] ? { ...graph, nodes: { ...graph.nodes, [nodeId]: { ...graph.nodes[nodeId], position: localPosition } } } : graph
@@ -1786,26 +1854,15 @@ function FlowsWorkspace({
   );
   const onConnect = useCallback(
     (connection) => {
-      const { source, sourceHandle, target } = connection;
-      if (!source || !target || source === target) return;
-      const sourceRef = parseNs(source);
-      const targetRef = parseNs(target);
-      let targetValue;
-      if (targetRef.flowKey === sourceRef.flowKey) {
-        targetValue = targetRef.nodeId;
-      } else {
-        const targetGraph = workingGraphs[targetRef.flowKey];
-        if (!targetGraph || targetGraph.startNodeId !== targetRef.nodeId) return;
-        targetValue = `${CROSS_FLOW_PREFIX}${targetRef.flowKey}`;
-      }
-      updateFlow(sourceRef.flowKey, (graph) => {
-        const node = graph.nodes[sourceRef.nodeId];
+      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;
-        const handle = sourceHandle ?? "next";
-        const currentByAnswer = typeof node.next === "object" && node.next ? node.next.byAnswer : {};
-        const currentDefault = typeof node.next === "object" && node.next ? node.next.default : "";
-        const updatedNode = handle === "next" ? { ...node, next: targetValue } : handle === "__default" ? { ...node, next: { byAnswer: currentByAnswer, default: targetValue } } : { ...node, next: { byAnswer: { ...currentByAnswer, [handle]: targetValue }, default: currentDefault } };
-        return { ...graph, nodes: { ...graph.nodes, [sourceRef.nodeId]: updatedNode } };
+        return { ...graph, nodes: { ...graph.nodes, [resolved.nodeId]: applyConnection(node, resolved) } };
       });
     },
     [workingGraphs, updateFlow]
@@ -1817,7 +1874,7 @@ function FlowsWorkspace({
     newNode.position = { x: 0, y: maxY + 170 };
     updateFlow(primaryFlowKey, (graph) => ({ ...graph, nodes: { ...graph.nodes, [newNode.id]: newNode } }));
     setEditingRef({ flowKey: primaryFlowKey, nodeId: newNode.id });
-    setPendingFocusNodeId(ns(primaryFlowKey, newNode.id));
+    setPendingFocusNodeId(namespaceNodeId(primaryFlowKey, newNode.id));
   }
   function handleNodePanelChange(updated) {
     if (!editingRef) return;
@@ -1839,7 +1896,7 @@ function FlowsWorkspace({
           ...graph,
           nodes: Object.fromEntries(
             Object.entries(graph.nodes).map(([id, node]) => {
-              const position = positions2.get(ns(key, id));
+              const position = positions2.get(namespaceNodeId(key, id));
               return [
                 id,
                 position ? { ...node, position: { x: position.x - offset.x, y: position.y - offset.y } } : node
@@ -1930,6 +1987,7 @@ function FlowsWorkspace({
   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 }),
@@ -1941,6 +1999,8 @@ function FlowsWorkspace({
         /* @__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,
@@ -1957,7 +2017,8 @@ function FlowsWorkspace({
               type: "button",
               onClick: handleOrganize,
               className: OUTLINE_BUTTON,
-              title: labels.workspace.organizeTooltip,
+              "data-cv-tooltip": labels.workspace.organizeTooltip,
+              "aria-label": labels.workspace.organizeTooltip,
               disabled: !primaryGraph,
               children: [
                 /* @__PURE__ */ jsx10(LayoutGrid, { size: 14, "aria-hidden": "true" }),
@@ -1972,7 +2033,8 @@ function FlowsWorkspace({
               type: "button",
               onClick: handleDiscardChanges,
               className: OUTLINE_BUTTON,
-              title: labels.workspace.discardTooltip,
+              "data-cv-tooltip": labels.workspace.discardTooltip,
+              "aria-label": labels.workspace.discardTooltip,
               disabled: !isDirty || saveState === "saving",
               children: [
                 /* @__PURE__ */ jsx10(Undo2, { size: 14, "aria-hidden": "true" }),
@@ -1984,6 +2046,8 @@ function FlowsWorkspace({
           /* @__PURE__ */ jsxs9(
             "button",
             {
+              "data-cv-tooltip": labels.workspace.saveGraph,
+              "aria-label": labels.workspace.saveGraph,
               type: "button",
               onClick: () => void handlePublish(),
               className: PRIMARY_BUTTON,
@@ -2002,6 +2066,8 @@ function FlowsWorkspace({
         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"}`,
@@ -2012,6 +2078,8 @@ function FlowsWorkspace({
         canCreateFlow && /* @__PURE__ */ jsxs9(
           "button",
           {
+            "data-cv-tooltip": labels.flowManager.newFlow,
+            "aria-label": labels.flowManager.newFlow,
             type: "button",
             onClick: () => {
               setFlowMutationState({ pending: false });
@@ -2038,6 +2106,8 @@ function FlowsWorkspace({
         primaryGraph && canDeleteFlow && /* @__PURE__ */ jsxs9(
           "button",
           {
+            "data-cv-tooltip": labels.flowManager.deleteFlow,
+            "aria-label": labels.flowManager.deleteFlow,
             type: "button",
             onClick: () => {
               setFlowMutationState({ pending: false });
@@ -2171,10 +2241,12 @@ function FlowsWorkspace({
         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", { type: "button", className: OUTLINE_BUTTON, onClick: () => setShowCreateDialog(false), children: labels.nodePanel.cancel }),
+        /* @__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(),
@@ -2188,10 +2260,12 @@ function FlowsWorkspace({
       /* @__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", { type: "button", className: OUTLINE_BUTTON, onClick: () => setShowDeleteDialog(false), children: labels.nodePanel.cancel }),
+        /* @__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(),
@@ -2246,6 +2320,7 @@ export {
   FlowsWorkspace,
   NODE_CARD_WIDTH,
   WHATSAPP_LIMITS,
+  applyConnection,
   computeAutoLayout,
   computeFlowMapLayout,
   crossFlowKey,
@@ -2258,9 +2333,15 @@ export {
   flowNodeTypes,
   flowPortalNodeTypes,
   isCrossFlowTarget,
+  isGraphDirty,
   mergeFlowEditorLabels,
+  mergedFlowKeysFrom,
+  namespaceNodeId,
   nodeLabel,
+  parseNamespacedId,
+  removeNodeAndCleanRefs,
   rendersAsButtons,
+  resolveConnection,
   slugifyNodeId,
   targetsOf,
   validateGraph