@adatechnology/conversations-ui 0.1.0-rc.23 → 0.1.0-rc.25

package/dist/flows/index.js

@@ -39,6 +39,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;
@@ -88,7 +89,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];
@@ -98,8 +99,8 @@ 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" : ""}`,
+      title: 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" }),
@@ -144,6 +145,7 @@ 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: {
@@ -172,6 +174,9 @@ 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)",
@@ -219,7 +224,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",
@@ -228,6 +235,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) {
@@ -246,7 +306,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 }
   };
 }
 
@@ -946,6 +1010,19 @@ function FlowNodePanel({
       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(
@@ -1032,7 +1109,7 @@ function FlowNodePanel({
       ),
       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) ?? /* @__PURE__ */ jsx9("p", { className: "text-xs text-gray-400", children: labels.nodePanel.mediaUnavailable }) })
+        /* @__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,
@@ -1151,6 +1228,1007 @@ function FlowNodePanel({
     ] })
   ] });
 }
+
+// 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";
+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 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";
+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}`;
+}
+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 } }));
+}
+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(ns(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(ns(targetFlowKey, targetGraph.startNodeId));
+      } else if (workingGraphs[flowKey]?.nodes[target]) {
+        result.push(ns(flowKey, target));
+      }
+    }
+    return result;
+  }
+  const rank = /* @__PURE__ */ new Map();
+  const primaryGraph = workingGraphs[primaryFlowKey];
+  const rootId = primaryGraph ? ns(primaryFlowKey, primaryGraph.startNodeId) : void 0;
+  if (rootId && nodeByNsId.has(rootId)) {
+    rank.set(rootId, 0);
+    const queue = [rootId];
+    while (queue.length > 0) {
+      const id = queue.shift();
+      const node = nodeByNsId.get(id);
+      if (!node) continue;
+      for (const nextId of forwardEdges(parseNs(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 nsId of nodeByNsId.keys()) {
+    if (!rank.has(nsId)) rank.set(nsId, strayRank);
+  }
+  const layers = /* @__PURE__ */ new Map();
+  for (const [nsId, nodeRank] of rank) {
+    if (!layers.has(nodeRank)) layers.set(nodeRank, []);
+    layers.get(nodeRank).push(nsId);
+  }
+  const positions = /* @__PURE__ */ new Map();
+  for (const nodeRank 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;
+    }
+  }
+  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));
+  const edges = [];
+  for (const { key: flowKey } of openFlows) {
+    const graph = workingGraphs[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;
+      for (const { target, optionId, isDefault } of targetsOf(node)) {
+        const crossFlow = isCrossFlowTarget(target);
+        let targetFlowKey = flowKey;
+        let rawTargetId = target;
+        if (crossFlow) {
+          const wantedKey = crossFlowKey(target);
+          const targetGraph = openKeys.has(wantedKey) ? workingGraphs[wantedKey] : void 0;
+          if (targetGraph) {
+            targetFlowKey = wantedKey;
+            rawTargetId = targetGraph.startNodeId;
+          } else {
+            rawTargetId = portalNodeId(id, target);
+          }
+        }
+        const source = ns(flowKey, id);
+        const edgeTarget = ns(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;
+          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 }
+          });
+        }
+      }
+    }
+  }
+  return edges;
+}
+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 };
+}
+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;
+}
+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 [openFlows, setOpenFlows] = useState3([{ key: rootFlowKey, offset: { x: 0, y: 0 } }]);
+  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 = openFlows[0]?.key ?? rootFlowKey;
+  const primaryGraph = workingGraphs[primaryFlowKey];
+  useEffect2(() => {
+    if (!graphs || hasAutoMerged) return;
+    setOpenFlows(autoMergeAll(rootFlowKey, graphs));
+    setHasAutoMerged(true);
+  }, [graphs, hasAutoMerged, rootFlowKey]);
+  useEffect2(() => {
+    if (!graphs) return;
+    setWorkingGraphs((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      for (const { key } of openFlows) {
+        if (!next[key] && graphs[key]) {
+          next[key] = graphs[key];
+          changed = true;
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [graphs, openFlows]);
+  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 openFlows) {
+      const graph = workingGraphs[key];
+      if (graph) map[key] = validateGraph(graph, labels.validation);
+    }
+    return map;
+  }, [openFlows, 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 = openFlows.map((flow) => flow.key).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 = 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 } }]);
+      if (editingRef && editingRef.flowKey !== key) setEditingRef(null);
+    },
+    [openFlows, 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));
+      setWorkingGraphs((prev) => {
+        const { [key]: _removed, ...rest } = prev;
+        return rest;
+      });
+      if (editingRef?.flowKey === key) setEditingRef(null);
+    },
+    [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 mergedPositions = useMemo2(
+    () => isMerged ? computeMergedLayout(openFlows, workingGraphs, primaryFlowKey) : null,
+    [isMerged, openFlows, workingGraphs, primaryFlowKey]
+  );
+  const renderedPositionsRef = useRef2(/* @__PURE__ */ new Map());
+  const derivedNodes = useMemo2(() => {
+    const allNodes = [];
+    for (const { key: flowKey, offset } of openFlows) {
+      let resolvePosition2 = function(nodeId) {
+        if (mergedPositions) {
+          const nsId = ns(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 };
+      };
+      var resolvePosition = resolvePosition2;
+      const graph = workingGraphs[flowKey];
+      if (!graph) continue;
+      const fallbackPositions = mergedPositions ? {} : computeAutoLayout(graph);
+      const liveCounts = computeLiveCounts(flowKey, rootFlowKey, 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: ns(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 (openFlows.some((flow) => flow.key === targetFlowKey)) return;
+          allNodes.push({
+            id: ns(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, { flowKey, nodeId: node.id })
+            }
+          });
+        });
+      }
+      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: ns(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: ns(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;
+  }, [
+    openFlows,
+    workingGraphs,
+    mergedPositions,
+    livePositions,
+    issuesByFlow,
+    primaryFlowKey,
+    rootFlowKey,
+    editingRef,
+    graphs,
+    mergeFlow,
+    focusFlow,
+    closeFlow,
+    labels
+  ]);
+  const edges = useMemo2(
+    () => buildAllEdges(openFlows, workingGraphs, rootFlowKey, livePositions),
+    [openFlows, 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 } = parseNs(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 };
+      updateFlow(
+        flowKey,
+        (graph) => graph.nodes[nodeId] ? { ...graph, nodes: { ...graph.nodes, [nodeId]: { ...graph.nodes[nodeId], position: localPosition } } } : graph
+      );
+    },
+    [openFlows, updateFlow]
+  );
+  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];
+        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 } };
+      });
+    },
+    [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(ns(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(openFlows, workingGraphs, primaryFlowKey);
+      for (const { key, offset } of openFlows) {
+        updateFlow(key, (graph) => ({
+          ...graph,
+          nodes: Object.fromEntries(
+            Object.entries(graph.nodes).map(([id, node]) => {
+              const position = positions2.get(ns(key, id));
+              return [
+                id,
+                position ? { ...node, position: { x: position.x - offset.x, y: position.y - offset.y } } : 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();
+      setOpenFlows([{ key: newFlow.key, offset: { x: 0, y: 0 } }]);
+      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();
+      setOpenFlows(reloaded ? autoMergeAll(rootFlowKey, reloaded) : [{ key: rootFlowKey, offset: { x: 0, y: 0 } }]);
+      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__ */ 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",
+          {
+            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,
+              title: 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,
+              title: labels.workspace.discardTooltip,
+              disabled: !isDirty || saveState === "saving",
+              children: [
+                /* @__PURE__ */ jsx10(Undo2, { size: 14, "aria-hidden": "true" }),
+                " ",
+                labels.workspace.discardChanges
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs9(
+            "button",
+            {
+              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",
+          {
+            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",
+          {
+            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",
+          {
+            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", { type: "button", className: OUTLINE_BUTTON, onClick: () => setShowCreateDialog(false), children: labels.nodePanel.cancel }),
+        /* @__PURE__ */ jsx10(
+          "button",
+          {
+            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", { type: "button", className: OUTLINE_BUTTON, onClick: () => setShowDeleteDialog(false), children: labels.nodePanel.cancel }),
+        /* @__PURE__ */ jsxs9(
+          "button",
+          {
+            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,
@@ -1165,6 +2243,7 @@ export {
   FlowPalette,
   FlowPortalNode,
   FlowWhatsAppPreview,
+  FlowsWorkspace,
   NODE_CARD_WIDTH,
   WHATSAPP_LIMITS,
   computeAutoLayout,