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

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 })
     ] })
   ] });
 }
@@ -1930,6 +1956,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 +1968,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 +1986,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 +2002,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 +2015,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 +2035,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 +2047,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 +2075,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 +2210,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 +2229,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(),

package/dist/index.d.ts

@@ -208,6 +208,7 @@ interface MessageComposerLabels {
     emoji: string;
     attach: string;
     send: string;
+    removeAttachment: string;
 }
 declare const DEFAULT_MESSAGE_COMPOSER_LABELS: MessageComposerLabels;
 interface MessageComposerProps {
@@ -269,6 +270,8 @@ interface RichComposerTooltips {
     attach: string;
     send: string;
     variables: string;
+    /** Botão que abre a formatação recolhida, quando a barra está estreita demais para os quatro. */
+    formatting: string;
 }
 declare const DEFAULT_RICH_COMPOSER_TOOLTIPS: RichComposerTooltips;
 /**
@@ -319,6 +322,12 @@ interface RichMessageComposerProps {
     idleAction?: ReactNode;
     /** Prévia dos anexos já escolhidos, desenhada pelo host acima da barra. */
     attachmentsPreview?: ReactNode;
+    /**
+     * Há anexo na fila esperando envio. O campo não conhece a fila — é do host — e sem essa dica ele
+     * concluía que não havia nada a enviar: com uma imagem anexada e nenhum texto, o botão de enviar
+     * dava lugar ao `idleAction` e a imagem ficava presa.
+     */
+    hasQueuedAttachments?: boolean;
     acceptedFileTypes?: string;
     className?: string;
 }
@@ -420,6 +429,22 @@ declare function ToastProvider({ children }: {
 }): react.JSX.Element;
 declare function useToast(): ToastContextValue;
 
+/**
+ * Camada única de dicas do pacote.
+ *
+ * O `title` nativo existia em todos os botões e mesmo assim a dica "não aparecia": o navegador
+ * espera de 1 a 2 segundos antes de desenhar, o balão sai fora do tema e some ao menor movimento do
+ * mouse. Aqui a dica é do produto — aparece em 120ms, com o mesmo contraste do resto da interface.
+ *
+ * Um só ouvinte no documento atende a interface inteira: cada botão declara `data-cv-tooltip` e não
+ * precisa de estado, ref ou wrapper próprio. O balão é impresso em `document.body` via portal
+ * porque `overflow` de container (a régua de respostas rápidas rola na horizontal) recortaria um
+ * balão desenhado dentro do próprio botão.
+ */
+/** Atributo que marca um elemento como portador de dica. */
+declare const TOOLTIP_ATTRIBUTE = "data-cv-tooltip";
+declare function TooltipLayer(): react.ReactPortal | null;
+
 interface StatusTicksProps {
     status: string;
     title?: string;
@@ -485,23 +510,23 @@ type ConversationWindow = (typeof CONVERSATION_WINDOW)[keyof typeof CONVERSATION
 declare const WINDOW_FILTERS: readonly [{
     readonly value: "all";
     readonly label: "Todas";
-    readonly dotClass: "";
+    readonly tone: "";
 }, {
     readonly value: "fresh";
     readonly label: "<12h";
-    readonly dotClass: "bg-green-500";
+    readonly tone: "fresh";
 }, {
     readonly value: "warning";
     readonly label: "12-21h";
-    readonly dotClass: "bg-yellow-500";
+    readonly tone: "warning";
 }, {
     readonly value: "critical";
     readonly label: "21-24h";
-    readonly dotClass: "bg-red-500";
+    readonly tone: "critical";
 }, {
     readonly value: "expired";
     readonly label: ">24h";
-    readonly dotClass: "bg-gray-400";
+    readonly tone: "expired";
 }];
 type WindowOfParams = {
     readonly lastInboundAt: string | null;
@@ -577,8 +602,8 @@ interface ConversationHeaderClassNames {
  */
 interface ConversationHeaderUtility {
     key: string;
-    /** Emoji, para casar com os utilitários nativos do cabeçalho. */
-    icon: string;
+    /** Ícone da biblioteca (lucide), no tamanho dos utilitários nativos: `<Play size={16} />`. */
+    icon: ReactNode;
     label: string;
     run: () => void;
     active?: boolean;
@@ -1620,7 +1645,8 @@ interface ConversationsWorkspaceSimulator {
     }): ReactNode;
     /** Ausente = ligado. Serve para esconder fora de desenvolvimento sem condicionar o JSX. */
     readonly enabled?: boolean;
-    readonly icon?: string;
+    /** Ícone da biblioteca (lucide) no utilitário do cabeçalho. Ausente, entra o frasco de teste. */
+    readonly icon?: ReactNode;
     readonly label?: string;
 }
 interface ConversationsWorkspaceProps {
@@ -1675,7 +1701,8 @@ interface ConversationPaneProps {
     readonly now: number;
     readonly busy: boolean;
     readonly labels: ConversationsWorkspaceLabels;
-    readonly onTakeover?: (() => void) | undefined;
+    /** Devolve a promessa quando o host a tem: o envio de template espera a tomada antes de sair. */
+    readonly onTakeover?: (() => void | Promise<void>) | undefined;
     readonly onReturnToBot?: (() => void) | undefined;
     readonly onFinish?: (() => void) | undefined;
     readonly onBack: () => void;
@@ -1745,4 +1772,4 @@ interface ConversationsInboxListProps {
 }
 declare function ConversationsInboxList({ inbox, labels, className, renderFilters, renderBulkActions, renderRow, onSendTemplateToSelected, }: ConversationsInboxListProps): react.JSX.Element;
 
-export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, AudioTranscription, type AudioTranscriptionProps, Avatar, type AvatarLabels, type AvatarProps, type BotMessages, type BuildTranscriptTextParams, BulkActionBar, type BulkActionBarProps, CHANNEL_BRAND_COLOR, CONVERSATIONS_PER_PAGE, CONVERSATION_WINDOW, ChannelFilter, ChannelFilterOption, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, type ConversationContextStatus, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, ConversationPane, type ConversationPaneProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsInboxList, type ConversationsInboxListProps, ConversationsProvider, ConversationsWorkspace, type ConversationsWorkspaceLabels, type ConversationsWorkspaceProps, type ConversationsWorkspaceSimulator, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_DOCUMENTS_WORKSPACE_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_RICH_COMPOSER_TOOLTIPS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, type DocumentsFiltersContext, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, DocumentsWorkspace, type DocumentsWorkspaceClassNames, type DocumentsWorkspaceLabels, type DocumentsWorkspaceProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, type FilterOption, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, ListingPagination, type ListingPaginationProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, MessageTranscription, MessagesWorkspace, type MessagesWorkspaceApi, type MessagesWorkspaceLabels, type MessagesWorkspaceProps, MultiSelectFilter, type MultiSelectFilterProps, NARROW_MAX_WIDTH_PX, type QuickReply, RICH_COMPOSER_ACTION, ResolveMediaUrl, type RichComposerAction, type RichComposerQuickReply, type RichComposerTooltips, type RichComposerVariable, RichMessageComposer, type RichMessageComposerHandle, type RichMessageComposerProps, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, type SortDirection, SortableHead, type SortableHeadProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, type TemplateSettings, type TemplateSettingsTab, ToastProvider, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, TranscriptionMode, type TranscriptionSettings, TranscriptionSettingsForm, type TranscriptionSettingsFormLabels, type TranscriptionSettingsFormProps, type UrlStateOptions, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseConversationsInboxParams, type UseConversationsInboxResult, type UseInboxActionsResult, type UseScrollToLatestMessageParams, type UseScrollToLatestMessageResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, applyQuickReplyVariables, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, resolveQuickReply, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useConversationsInbox, useDarkMode, useDebouncedValue, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useScrollToLatestMessage, useToast, useUrlArrayState, useUrlNumberState, useUrlStringState, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };
+export { type AsyncResourceState, AudioPlayer, type AudioPlayerProps, AudioTranscription, type AudioTranscriptionProps, Avatar, type AvatarLabels, type AvatarProps, type BotMessages, type BuildTranscriptTextParams, BulkActionBar, type BulkActionBarProps, CHANNEL_BRAND_COLOR, CONVERSATIONS_PER_PAGE, CONVERSATION_WINDOW, ChannelFilter, ChannelFilterOption, ChannelIcon, type ChannelIconProps, ConversationChannel, type ConversationContextEntry, ConversationContextPanel, type ConversationContextPanelClassNames, type ConversationContextPanelLabels, type ConversationContextPanelProps, type ConversationContextStatus, ConversationDocument, ConversationDocumentsPanel, type ConversationDocumentsPanelClassNames, type ConversationDocumentsPanelLabels, type ConversationDocumentsPanelProps, ConversationHeader, type ConversationHeaderClassNames, type ConversationHeaderLabels, type ConversationHeaderProps, type ConversationHeaderUtility, ConversationListItem, type ConversationListItemLabels, type ConversationListItemProps, type ConversationLocales, ConversationLocalesProvider, type ConversationLocalesProviderProps, ConversationPane, type ConversationPaneProps, type ConversationRealtimeHandler, ConversationRow, type ConversationRowClassNames, type ConversationRowProps, ConversationSummary, ConversationTemplate, ConversationWallpaper, type ConversationWallpaperProps, type ConversationWindow, ConversationsApi, ConversationsFeatures, ConversationsInboxList, type ConversationsInboxListProps, ConversationsProvider, ConversationsWorkspace, type ConversationsWorkspaceLabels, type ConversationsWorkspaceProps, type ConversationsWorkspaceSimulator, DEFAULT_ACCEPTED_FILE_TYPES, DEFAULT_AVATAR_LABELS, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS, DEFAULT_CONVERSATION_CONTEXT_LABELS, DEFAULT_CONVERSATION_DOCUMENTS_LABELS, DEFAULT_CONVERSATION_HEADER_LABELS, DEFAULT_CONVERSATION_LIST_ITEM_LABELS, DEFAULT_DOCUMENTS_LIBRARY_LABELS, DEFAULT_DOCUMENTS_WORKSPACE_LABELS, DEFAULT_EMOJI_PICKER_LABELS, DEFAULT_INTERACTIVE_MESSAGE_LABELS, DEFAULT_LIGHTBOX_LABELS, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_RICH_COMPOSER_TOOLTIPS, DEFAULT_TEMPLATES_SETTINGS_LABELS, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS, DEFAULT_WINDOW_EXPIRED_LABELS, DOCUMENT_SOURCE_FILTER, DateDivider, type DateDividerClassNames, type DateDividerProps, type DocumentSourceFilter, type DocumentsFiltersContext, DocumentsLibrary, type DocumentsLibraryClassNames, type DocumentsLibraryLabels, type DocumentsLibraryProps, DocumentsWorkspace, type DocumentsWorkspaceClassNames, type DocumentsWorkspaceLabels, type DocumentsWorkspaceProps, EMOJI_CATEGORIES, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerLabels, type EmojiPickerProps, FileIcon, type FileIconProps, type FilterOption, InteractiveMessage, type InteractiveMessageLabels, type InteractiveMessageProps, InteractivePayload, InteractiveSelection, Lightbox, type LightboxLabels, type LightboxProps, ListConversationsParams, ListDocumentsParams, ListingPagination, type ListingPaginationProps, MessageBubble, type MessageBubbleProps, MessageComposer, type MessageComposerClassNames, type MessageComposerLabels, type MessageComposerProps, MessagePayload, MessageTail, MessageText, type MessageTextProps, MessageTimestamp, MessageTranscription, MessagesWorkspace, type MessagesWorkspaceApi, type MessagesWorkspaceLabels, type MessagesWorkspaceProps, MultiSelectFilter, type MultiSelectFilterProps, NARROW_MAX_WIDTH_PX, type QuickReply, RICH_COMPOSER_ACTION, ResolveMediaUrl, type RichComposerAction, type RichComposerQuickReply, type RichComposerTooltips, type RichComposerVariable, RichMessageComposer, type RichMessageComposerHandle, type RichMessageComposerProps, SSEProvider, SimpleEmojiPicker, type SimpleEmojiPickerProps, type SortDirection, SortableHead, type SortableHeadProps, StatusTicks, type StatusTicksProps, TEMPLATE_SETTINGS_TAB, TOOLTIP_ATTRIBUTE, type TemplateSettings, type TemplateSettingsTab, ToastProvider, TooltipLayer, type TopicItem, TopicsForm, type TopicsFormLabels, type TopicsFormProps, TranscriptionMode, type TranscriptionSettings, TranscriptionSettingsForm, type TranscriptionSettingsFormLabels, type TranscriptionSettingsFormProps, type UrlStateOptions, type UseConversationActionsResult, type UseConversationContextResult, type UseConversationDocumentsParams, type UseConversationDocumentsResult, type UseConversationListParams, type UseConversationListResult, type UseConversationMessagesResult, type UseConversationsInboxParams, type UseConversationsInboxResult, type UseInboxActionsResult, type UseScrollToLatestMessageParams, type UseScrollToLatestMessageResult, type UseWaitingNotificationsLabels, type UseWaitingNotificationsParams, type UseWaitingNotificationsResult, WINDOW_FILTERS, WelcomeFarewellForm, type WelcomeFarewellFormLabels, type WelcomeFarewellFormProps, WhatsAppCreateTemplateForm, type WhatsAppCreateTemplateFormLabels, type WhatsAppCreateTemplateFormProps, type WhatsAppCreateTemplateResult, type WhatsAppCreateTemplateState, WhatsAppMessageEditor, type WhatsAppMessageEditorLabels, type WhatsAppMessageEditorProps, type WhatsAppTemplateHeaderType, WhatsAppTemplateSettingsForm, type WhatsAppTemplateSettingsFormLabels, type WhatsAppTemplateSettingsFormProps, type WhatsAppTemplateSummary, type WhatsAppTemplateVariableSuggestion, WhatsAppTemplatesSettings, type WhatsAppTemplatesSettingsLabels, type WhatsAppTemplatesSettingsProps, WindowExpiredNotice, type WindowExpiredNoticeLabels, type WindowExpiredNoticeProps, type WindowOfParams, applyQuickReplyVariables, buildTranscriptFilename, buildTranscriptText, createMediaUrlResolver, downloadTextFile, formatDateTime, formatFileSize, formatPhone, formatStalledFor, formatTimestamp, htmlToWA, isSameDay, isWindowBlocking, parseWhatsAppFormatting, phoneInitials, resolveQuickReply, searchEmojis, toast, useConversationActions, useConversationContext, useConversationDocuments, useConversationList, useConversationLocales, useConversationMessages, useConversationRealtime, useConversations, useConversationsInbox, useDarkMode, useDebouncedValue, useGlobalRealtime, useInboxActions, useIsDarkTheme, useIsNarrow, useScrollToLatestMessage, useToast, useUrlArrayState, useUrlNumberState, useUrlStringState, useWaitingNotifications, waToHTML, waToHTMLInline, windowOf };