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

package/dist/flows/index.js

@@ -1347,61 +1347,60 @@ function isGraphDirty(working, published) {
   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,
-  ...flowPortalNodeTypes,
-  ...flowGroupHeaderNodeTypes,
-  ...flowGroupFrameNodeTypes
-};
-var CHAIN_FRAME_PADDING = 36;
+// src/flows/flowCanvasModel.ts
 var COLUMN_GAP = 360;
 var ROW_GAP = 40;
-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 portalNodeId(sourceId, target) {
-  return `__portal__${sourceId}__${target}`;
+var CHAIN_LABEL_ROOM = 24;
+function portalNodeId(sourceNodeId, target) {
+  return `__portal__${sourceNodeId}__${target}`;
 }
-function autoMergeAll(rootKey, graphsSource) {
-  return mergedFlowKeysFrom(rootKey, graphsSource).map((key) => ({ key, offset: { x: 0, y: 0 } }));
+function chainFrameNodeId(actionNodeId) {
+  return `__chain__${actionNodeId}`;
 }
-function computeMergedLayout(openFlows, workingGraphs, primaryFlowKey) {
-  const openKeys = new Set(openFlows.map((flow) => flow.key));
-  const nodeByNsId = /* @__PURE__ */ new Map();
-  for (const { key } of openFlows) {
-    const graph = workingGraphs[key];
-    if (!graph) continue;
-    for (const node of Object.values(graph.nodes)) nodeByNsId.set(namespaceNodeId(key, node.id), node);
+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 targetFlowKey = crossFlowKey(target);
-        const targetGraph = openKeys.has(targetFlowKey) ? workingGraphs[targetFlowKey] : void 0;
-        if (targetGraph) result.push(namespaceNodeId(targetFlowKey, targetGraph.startNodeId));
-      } else if (workingGraphs[flowKey]?.nodes[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 = workingGraphs[primaryFlowKey];
+  const primaryGraph = graphs[primaryFlowKey];
   const rootId = primaryGraph ? namespaceNodeId(primaryFlowKey, primaryGraph.startNodeId) : void 0;
-  if (rootId && nodeByNsId.has(rootId)) {
+  if (rootId && nodeById.has(rootId)) {
     rank.set(rootId, 0);
     const queue = [rootId];
     while (queue.length > 0) {
       const id = queue.shift();
-      const node = nodeByNsId.get(id);
+      const node = nodeById.get(id);
       if (!node) continue;
       for (const nextId of forwardEdges(parseNamespacedId(id).flowKey, node)) {
         if (!rank.has(nextId)) {
@@ -1412,100 +1411,111 @@ function computeMergedLayout(openFlows, workingGraphs, primaryFlowKey) {
     }
   }
   const strayRank = Math.max(0, ...rank.values()) + 1;
-  for (const nsId of nodeByNsId.keys()) {
-    if (!rank.has(nsId)) rank.set(nsId, strayRank);
+  for (const id of nodeById.keys()) {
+    if (!rank.has(id)) rank.set(id, strayRank);
   }
   const layers = /* @__PURE__ */ new Map();
-  for (const [nsId, nodeRank] of rank) {
-    if (!layers.has(nodeRank)) layers.set(nodeRank, []);
-    layers.get(nodeRank).push(nsId);
+  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 nodeRank of [...layers.keys()].sort((a, b) => a - b)) {
+  for (const value of [...layers.keys()].sort((a, b) => a - b)) {
     let cursorY = 0;
-    for (const nsId of layers.get(nodeRank)) {
-      positions.set(nsId, { x: nodeRank * COLUMN_GAP, y: cursorY });
-      cursorY += estimateNodeHeight(nodeByNsId.get(nsId)) + ROW_GAP;
+    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 computeLiveCounts(flowKey, rootFlowKey, livePositions) {
-  const counts = {};
-  for (const position of livePositions ?? []) {
-    if (position.flow !== flowKey && flowKey !== rootFlowKey) continue;
-    const nodeId = flowKey === rootFlowKey ? position.menuNodeId : position.nodeId;
-    if (!nodeId) continue;
-    counts[nodeId] = (counts[nodeId] ?? 0) + 1;
-  }
-  return counts;
-}
-function buildAllEdges(openFlows, workingGraphs, rootFlowKey, livePositions) {
-  const openKeys = new Set(openFlows.map((flow) => flow.key));
+function buildFlowEdges(params) {
+  const { openKeys, graphs, rootFlowKey, livePositions } = params;
+  const open = new Set(openKeys);
   const edges = [];
-  for (const { key: flowKey } of openFlows) {
-    const graph = workingGraphs[flowKey];
+  for (const flowKey of openKeys) {
+    const graph = graphs[flowKey];
     if (!graph) continue;
-    const liveCounts = computeLiveCounts(flowKey, rootFlowKey, livePositions);
-    for (const [id, node] of Object.entries(graph.nodes)) {
-      const isLive = (liveCounts[id] ?? 0) > 0;
+    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 rawTargetId = target;
+        let targetNodeId = target;
         if (crossFlow) {
           const wantedKey = crossFlowKey(target);
-          const targetGraph = openKeys.has(wantedKey) ? workingGraphs[wantedKey] : void 0;
+          const targetGraph = open.has(wantedKey) ? graphs[wantedKey] : void 0;
           if (targetGraph) {
             targetFlowKey = wantedKey;
-            rawTargetId = targetGraph.startNodeId;
+            targetNodeId = targetGraph.startNodeId;
           } else {
-            rawTargetId = portalNodeId(id, target);
+            targetNodeId = portalNodeId(nodeId, target);
           }
         }
-        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({
-            id: `${source}->${edgeTarget}`,
-            source,
-            target: edgeTarget,
-            type: "bezier",
-            animated: isLive,
-            style: crossFlow ? { stroke: color, strokeWidth: 1.5, strokeDasharray: "3 3" } : { stroke: color, strokeWidth: isLive ? 2.5 : 1.5 },
-            markerEnd: { type: MarkerType2.ArrowClosed, color, width: 18, height: 18 }
-          });
-        } else if (isDefault) {
-          const color = crossFlow ? EDGE_COLOR_CROSS_FLOW : EDGE_COLOR_FALLBACK;
+        const source = namespaceNodeId(flowKey, nodeId);
+        const edgeTarget = namespaceNodeId(targetFlowKey, targetNodeId);
+        if (isDefault) {
           edges.push({
             id: `${source}->${edgeTarget}-default`,
             source,
-            sourceHandle: "__default",
-            target: edgeTarget,
-            type: "bezier",
-            style: { stroke: color, strokeWidth: 1.5, strokeDasharray: "5 4" },
-            markerEnd: { type: MarkerType2.ArrowClosed, color, width: 16, height: 16 }
-          });
-        } else {
-          const color = crossFlow ? EDGE_COLOR_CROSS_FLOW : isLive ? EDGE_COLOR_LIVE : EDGE_COLOR_BRANCH;
-          edges.push({
-            id: `${source}->${edgeTarget}-${optionId}`,
-            source,
-            sourceHandle: optionId,
             target: edgeTarget,
-            type: "bezier",
-            animated: isLive,
-            style: crossFlow ? { stroke: color, strokeWidth: 1.75, strokeDasharray: "3 3" } : { stroke: color, strokeWidth: isLive ? 2.5 : 1.75 },
-            markerEnd: { type: MarkerType2.ArrowClosed, color, width: 18, height: 18 }
+            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);
@@ -1532,6 +1542,44 @@ function newNodeFromSpec(spec, existingIds) {
   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;
@@ -1554,7 +1602,7 @@ function FlowsWorkspace({
   const [loadState, setLoadState] = useState3("loading");
   const [livePositions, setLivePositions] = useState3(void 0);
   const [viewMode, setViewMode] = useState3("detail");
-  const [openFlows, setOpenFlows] = useState3([{ key: rootFlowKey, offset: { x: 0, y: 0 } }]);
+  const [openFlowKeys, setOpenFlowKeys] = useState3([rootFlowKey]);
   const [hasAutoMerged, setHasAutoMerged] = useState3(false);
   const [workingGraphs, setWorkingGraphs] = useState3({});
   const [editingRef, setEditingRef] = useState3(null);
@@ -1599,11 +1647,11 @@ function FlowsWorkspace({
       clearInterval(timer);
     };
   }, [api, livePollIntervalMs]);
-  const primaryFlowKey = openFlows[0]?.key ?? rootFlowKey;
+  const primaryFlowKey = openFlowKeys[0] ?? rootFlowKey;
   const primaryGraph = workingGraphs[primaryFlowKey];
   useEffect2(() => {
     if (!graphs || hasAutoMerged) return;
-    setOpenFlows(autoMergeAll(rootFlowKey, graphs));
+    setOpenFlowKeys(mergedFlowKeysFrom(rootFlowKey, graphs));
     setHasAutoMerged(true);
   }, [graphs, hasAutoMerged, rootFlowKey]);
   useEffect2(() => {
@@ -1611,7 +1659,7 @@ function FlowsWorkspace({
     setWorkingGraphs((prev) => {
       let changed = false;
       const next = { ...prev };
-      for (const { key } of openFlows) {
+      for (const key of openFlowKeys) {
         if (!next[key] && graphs[key]) {
           next[key] = graphs[key];
           changed = true;
@@ -1619,7 +1667,7 @@ function FlowsWorkspace({
       }
       return changed ? next : prev;
     });
-  }, [graphs, openFlows]);
+  }, [graphs, openFlowKeys]);
   const isFlowDirty = useCallback(
     (key) => {
       const working = workingGraphs[key];
@@ -1631,12 +1679,12 @@ function FlowsWorkspace({
   );
   const issuesByFlow = useMemo2(() => {
     const map = {};
-    for (const { key } of openFlows) {
+    for (const key of openFlowKeys) {
       const graph = workingGraphs[key];
       if (graph) map[key] = validateGraph(graph, labels.validation);
     }
     return map;
-  }, [openFlows, workingGraphs, labels]);
+  }, [openFlowKeys, workingGraphs, labels]);
   const errorCount = Object.values(issuesByFlow).reduce(
     (sum, list) => sum + list.filter((issue) => issue.severity === "error").length,
     0
@@ -1645,7 +1693,7 @@ function FlowsWorkspace({
     (sum, list) => sum + list.filter((issue) => issue.severity === "warning").length,
     0
   );
-  const dirtyKeys = openFlows.map((flow) => flow.key).filter(isFlowDirty);
+  const dirtyKeys = openFlowKeys.filter(isFlowDirty);
   const isDirty = dirtyKeys.length > 0;
   const updateFlow = useCallback((flowKey, updater) => {
     setWorkingGraphs((prev) => {
@@ -1656,17 +1704,17 @@ function FlowsWorkspace({
   }, []);
   const focusFlow = useCallback(
     (key) => {
-      const others = openFlows.filter((flow) => flow.key !== key);
-      if (others.some((flow) => isFlowDirty(flow.key)) && !window.confirm(labels.workspace.unsavedChangesConfirm)) return;
-      setOpenFlows(graphs ? autoMergeAll(key, graphs) : [{ key, offset: { x: 0, y: 0 } }]);
+      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);
     },
-    [openFlows, isFlowDirty, editingRef, graphs, labels]
+    [openFlowKeys, isFlowDirty, editingRef, graphs, labels]
   );
   const closeFlow = useCallback(
     (key) => {
       if (isFlowDirty(key) && !window.confirm(labels.workspace.unsavedChangesConfirm)) return;
-      setOpenFlows((prev) => prev.filter((flow) => flow.key !== key));
+      setOpenFlowKeys((prev) => prev.filter((each) => each !== key));
       setWorkingGraphs((prev) => {
         const { [key]: _removed, ...rest } = prev;
         return rest;
@@ -1675,50 +1723,30 @@ function FlowsWorkspace({
     },
     [isFlowDirty, editingRef, labels]
   );
-  const mergeFlow = useCallback(
-    (targetFlowKey, source) => {
-      setOpenFlows((prev) => {
-        if (prev.some((flow) => flow.key === targetFlowKey)) return prev;
-        const sourceOpen = prev.find((flow) => flow.key === source.flowKey);
-        const sourceGraph = workingGraphs[source.flowKey];
-        const sourceLocalPosition = sourceGraph?.nodes[source.nodeId]?.position ?? (sourceGraph ? computeAutoLayout(sourceGraph)[source.nodeId] : void 0) ?? { x: 0, y: 0 };
-        const baseOffset = sourceOpen?.offset ?? { x: 0, y: 0 };
-        return [
-          ...prev,
-          {
-            key: targetFlowKey,
-            offset: {
-              x: baseOffset.x + sourceLocalPosition.x + 400,
-              y: baseOffset.y + sourceLocalPosition.y
-            }
-          }
-        ];
-      });
-    },
-    [workingGraphs]
-  );
-  const isMerged = openFlows.length > 1;
+  const mergeFlow = useCallback((targetFlowKey) => {
+    setOpenFlowKeys((prev) => prev.includes(targetFlowKey) ? prev : [...prev, targetFlowKey]);
+  }, []);
+  const isMerged = openFlowKeys.length > 1;
   const mergedPositions = useMemo2(
-    () => isMerged ? computeMergedLayout(openFlows, workingGraphs, primaryFlowKey) : null,
-    [isMerged, openFlows, workingGraphs, primaryFlowKey]
+    () => 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 { key: flowKey, offset } of openFlows) {
+    for (const flowKey of openFlowKeys) {
       let resolvePosition2 = function(nodeId) {
         if (mergedPositions) {
           const nsId = namespaceNodeId(flowKey, nodeId);
           return renderedPositionsRef.current.get(nsId) ?? mergedPositions.get(nsId) ?? { x: 0, y: 0 };
         }
-        const local = graph.nodes[nodeId]?.position ?? fallbackPositions[nodeId] ?? { x: 0, y: 0 };
-        return { x: local.x + offset.x, y: local.y + offset.y };
+        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 = computeLiveCounts(flowKey, rootFlowKey, livePositions);
+      const liveCounts = countLiveByNode({ flowKey, rootFlowKey, positions: livePositions });
       const flowIssues = issuesByFlow[flowKey] ?? [];
       const isPrimary = flowKey === primaryFlowKey;
       const connectedTargets = /* @__PURE__ */ new Set();
@@ -1748,7 +1776,7 @@ function FlowsWorkspace({
         const crossFlowTargets = [...new Set(targetsOf(node).map((edge) => edge.target).filter(isCrossFlowTarget))];
         crossFlowTargets.forEach((target, index) => {
           const targetFlowKey = crossFlowKey(target);
-          if (openFlows.some((flow) => flow.key === targetFlowKey)) return;
+          if (openFlowKeys.includes(targetFlowKey)) return;
           allNodes.push({
             id: namespaceNodeId(flowKey, portalNodeId(node.id, target)),
             type: "flowPortal",
@@ -1757,7 +1785,7 @@ function FlowsWorkspace({
             position: { x: position.x + 320, y: position.y + index * 70 },
             data: {
               label: graphs?.[targetFlowKey]?.label ?? targetFlowKey,
-              onNavigate: () => mergeFlow(targetFlowKey, { flowKey, nodeId: node.id })
+              onNavigate: () => mergeFlow(targetFlowKey)
             }
           });
         });
@@ -1803,7 +1831,7 @@ function FlowsWorkspace({
     }
     return allNodes;
   }, [
-    openFlows,
+    openFlowKeys,
     workingGraphs,
     mergedPositions,
     livePositions,
@@ -1818,8 +1846,8 @@ function FlowsWorkspace({
     labels
   ]);
   const edges = useMemo2(
-    () => buildAllEdges(openFlows, workingGraphs, rootFlowKey, livePositions),
-    [openFlows, workingGraphs, rootFlowKey, livePositions]
+    () => buildFlowEdges({ openKeys: openFlowKeys, graphs: workingGraphs, rootFlowKey, livePositions }).map(styleEdge),
+    [openFlowKeys, workingGraphs, rootFlowKey, livePositions]
   );
   useEffect2(() => {
     setRfNodes(derivedNodes);
@@ -1841,16 +1869,13 @@ function FlowsWorkspace({
     (_event, node) => {
       renderedPositionsRef.current.set(node.id, node.position);
       const { flowKey, nodeId } = parseNamespacedId(node.id);
-      const openFlow = openFlows.find((flow) => flow.key === flowKey);
-      if (!openFlow) return;
-      const drawnWithOffset = openFlows.length === 1;
-      const localPosition = drawnWithOffset ? { x: node.position.x - openFlow.offset.x, y: node.position.y - openFlow.offset.y } : node.position;
+      if (!openFlowKeys.includes(flowKey)) return;
       updateFlow(
         flowKey,
-        (graph) => graph.nodes[nodeId] ? { ...graph, nodes: { ...graph.nodes, [nodeId]: { ...graph.nodes[nodeId], position: localPosition } } } : graph
+        (graph) => graph.nodes[nodeId] ? { ...graph, nodes: { ...graph.nodes, [nodeId]: { ...graph.nodes[nodeId], position: node.position } } } : graph
       );
     },
-    [openFlows, updateFlow]
+    [openFlowKeys, updateFlow]
   );
   const onConnect = useCallback(
     (connection) => {
@@ -1890,17 +1915,14 @@ function FlowsWorkspace({
     if (!primaryGraph) return;
     renderedPositionsRef.current.clear();
     if (isMerged) {
-      const positions2 = computeMergedLayout(openFlows, workingGraphs, primaryFlowKey);
-      for (const { key, offset } of openFlows) {
+      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: { x: position.x - offset.x, y: position.y - offset.y } } : node
-              ];
+              return [id, position ? { ...node, position } : node];
             })
           )
         }));
@@ -1955,7 +1977,7 @@ function FlowsWorkspace({
         ...newFlow.showInMenu ? { menuOptionLabel: newFlow.menuOptionLabel || newFlow.label } : {}
       });
       await reloadGraphs();
-      setOpenFlows([{ key: newFlow.key, offset: { x: 0, y: 0 } }]);
+      setOpenFlowKeys([newFlow.key]);
       setShowCreateDialog(false);
       setNewFlow({ key: "", label: "", showInMenu: false, menuOptionLabel: "" });
       setFlowMutationState({ pending: false });
@@ -1970,7 +1992,7 @@ function FlowsWorkspace({
     try {
       await deleteFlow(primaryGraph.key);
       const reloaded = await reloadGraphs();
-      setOpenFlows(reloaded ? autoMergeAll(rootFlowKey, reloaded) : [{ key: rootFlowKey, offset: { x: 0, y: 0 } }]);
+      setOpenFlowKeys(reloaded ? mergedFlowKeysFrom(rootFlowKey, reloaded) : [rootFlowKey]);
       setShowDeleteDialog(false);
       setFlowMutationState({ pending: false });
     } catch (error) {
@@ -2318,13 +2340,20 @@ export {
   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,
@@ -2337,8 +2366,10 @@ export {
   mergeFlowEditorLabels,
   mergedFlowKeysFrom,
   namespaceNodeId,
+  newNodeFromSpec,
   nodeLabel,
   parseNamespacedId,
+  portalNodeId,
   removeNodeAndCleanRefs,
   rendersAsButtons,
   resolveConnection,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.29",
+  "version": "0.1.0-rc.30",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"