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

package/src/RichMessageComposer.tsx

@@ -12,9 +12,30 @@
  */
 
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState, type KeyboardEvent, type ChangeEvent, type FormEvent, type ReactNode } from 'react'
-import { Bold, Italic, Strikethrough, Code, Paperclip, SendHorizonal, Braces } from 'lucide-react'
+import { Bold, Italic, Strikethrough, Code, Paperclip, SendHorizonal, Braces, Type } from 'lucide-react'
 
 import { cn } from './lib/cn'
+import {
+  COMPOSER_BAR_CLASS,
+  COMPOSER_COMPACT_WIDTH,
+  COMPOSER_MONOSPACE_CLASS,
+  COMPOSER_TOOL_BUTTON_ACTIVE_CLASS,
+  COMPOSER_TOOL_BUTTON_CLASS,
+  COMPOSER_TOOL_BUTTON_IDLE_CLASS,
+  QUICK_REPLY_PILL_CLASS,
+} from './composer.constant'
+import { useContainerWidth } from './hooks/useContainerWidth'
+import {
+  FORMATTING_ACTION,
+  activeFormattingIn,
+  codeAncestorOf,
+  exitMonospaceAfter,
+  isFormattingActive,
+  startMonospaceAt,
+  toggleFormattingCommand,
+  unwrapMonospace,
+  type FormattingAction,
+} from './lib/composer-formatting'
 import { htmlToWA, waToHTML } from './lib/whatsapp-formatting'
 import { SimpleEmojiPicker } from './SimpleEmojiPicker'
 import { DEFAULT_ACCEPTED_FILE_TYPES } from './MessageComposer'
@@ -41,6 +62,8 @@ export 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
 }
 
 export const DEFAULT_RICH_COMPOSER_TOOLTIPS: RichComposerTooltips = {
@@ -52,6 +75,7 @@ export const DEFAULT_RICH_COMPOSER_TOOLTIPS: RichComposerTooltips = {
   attach: 'Anexar arquivo',
   send: 'Enviar',
   variables: 'Variáveis disponíveis',
+  formatting: 'Formatação',
 }
 
 /**
@@ -88,8 +112,6 @@ const FORMATTING_ELEMENT = {
   monospace: 'code',
 } as const
 
-const MONOSPACE_CLASS = 'bg-black/5 dark:bg-white/10 rounded px-0.5 font-mono text-sm'
-
 /** Handle imperativo: `contentEditable` controlado pelo React perde o cursor a cada tecla. */
 export interface RichMessageComposerHandle {
   setContent: (text: string) => void
@@ -119,6 +141,12 @@ export 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
 }
@@ -137,13 +165,52 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
   isSending = false,
   idleAction,
   attachmentsPreview,
+  hasQueuedAttachments = false,
   acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES,
   className,
 }, ref) {
   const editorRef = useRef<HTMLDivElement>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const variablesRef = useRef<HTMLDivElement>(null)
+  const formattingRef = useRef<HTMLDivElement>(null)
+  const barRef = useRef<HTMLDivElement>(null)
   const [isVariablesOpen, setIsVariablesOpen] = useState(false)
+  const [isFormattingOpen, setIsFormattingOpen] = useState(false)
+  const [activeFormatting, setActiveFormatting] = useState('')
+
+  const barWidth = useContainerWidth(barRef)
+  const isCompact = barWidth !== undefined && barWidth < COMPOSER_COMPACT_WIDTH
+
+  /**
+   * O último texto que este campo emitiu. É o que distingue o eco do próprio `onChange` — que deve
+   * ser ignorado, senão o cursor volta ao início a cada tecla — de um `value` vindo de fora, que
+   * precisa ser escrito no campo. Sem essa distinção o texto continuava na tela depois de enviado.
+   */
+  const lastEmittedRef = useRef('')
+
+  const emitChange = useCallback((html: string) => {
+    const text = htmlToWA(html)
+    lastEmittedRef.current = text
+    onChange(text)
+  }, [onChange])
+
+  useEffect(() => {
+    const editor = editorRef.current
+    if (!editor || value === lastEmittedRef.current) return
+    lastEmittedRef.current = value
+    editor.innerHTML = waToHTML(value)
+  }, [value])
+
+  const refreshActiveFormatting = useCallback(() => {
+    const editor = editorRef.current
+    if (editor) setActiveFormatting(activeFormattingIn(editor))
+  }, [])
+
+  // `selectionchange` é do documento: não existe evento de "o cursor andou" no próprio campo.
+  useEffect(() => {
+    document.addEventListener('selectionchange', refreshActiveFormatting)
+    return () => document.removeEventListener('selectionchange', refreshActiveFormatting)
+  }, [refreshActiveFormatting])
 
   useEffect(() => {
     if (!isVariablesOpen) return
@@ -154,6 +221,21 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
     return () => document.removeEventListener('mousedown', closeOnOutsideClick)
   }, [isVariablesOpen])
 
+  useEffect(() => {
+    if (!isFormattingOpen) return
+    const closeOnOutsideClick = (event: MouseEvent) => {
+      if (!formattingRef.current?.contains(event.target as Node)) setIsFormattingOpen(false)
+    }
+    document.addEventListener('mousedown', closeOnOutsideClick)
+    return () => document.removeEventListener('mousedown', closeOnOutsideClick)
+  }, [isFormattingOpen])
+
+  // A barra voltou a ser larga (a prévia fechou): os botões reaparecem na linha e o popover ficaria
+  // aberto ancorado num botão que não existe mais.
+  useEffect(() => {
+    if (!isCompact) setIsFormattingOpen(false)
+  }, [isCompact])
+
   const tooltipOf = (action: keyof RichComposerTooltips): string =>
     tooltips?.[action] ?? DEFAULT_RICH_COMPOSER_TOOLTIPS[action]
   const shows = (action: RichComposerAction): boolean => toolbar?.[action] !== false
@@ -163,9 +245,9 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
     const editor = editorRef.current
     if (!editor) return
     editor.innerHTML = waToHTML(text)
-    onChange(htmlToWA(editor.innerHTML))
+    emitChange(editor.innerHTML)
     editor.focus()
-  }, [onChange])
+  }, [emitChange])
 
   useImperativeHandle(ref, () => ({
     setContent: replaceContent,
@@ -173,10 +255,10 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
       const editor = editorRef.current
       if (!editor) return
       editor.innerHTML = ''
-      onChange('')
+      emitChange('')
     },
     focus: () => editorRef.current?.focus(),
-  }), [onChange, replaceContent])
+  }), [emitChange, replaceContent])
 
   /** Range vivo dentro do campo, ou `undefined` se o cursor está em outro lugar da página. */
   const currentRange = useCallback((): Range | undefined => {
@@ -194,8 +276,8 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
     range.collapse(true)
     selection?.removeAllRanges()
     selection?.addRange(range)
-    onChange(htmlToWA(editorRef.current?.innerHTML ?? ''))
-  }, [onChange])
+    emitChange(editorRef.current?.innerHTML ?? '')
+  }, [emitChange])
 
   const insertAtCursor = useCallback((fragment: string) => {
     const range = currentRange()
@@ -217,32 +299,101 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
     if (!range || !selectedText) return
     range.deleteContents()
     const wrapper = document.createElement(FORMATTING_ELEMENT[action])
-    if (action === 'monospace') wrapper.className = MONOSPACE_CLASS
+    if (action === 'monospace') wrapper.className = COMPOSER_MONOSPACE_CLASS
     wrapper.textContent = selectedText
     range.insertNode(wrapper)
     commitRange(range, wrapper)
   }, [commitRange, currentRange])
 
+  /**
+   * Uma regra só para os quatro botões, a mesma dos editores de texto:
+   *
+   * - cursor vago — liga ou desliga daqui para a frente, sem tocar no que já está escrito;
+   * - com seleção — aplica na seleção, ou tira dela se ela já estiver toda formatada.
+   *
+   * `execCommand` faz isso sozinho para negrito, itálico e tachado. Monoespaçado não tem comando
+   * nativo e é feito à mão, com a mesma regra. Onde nem o comando existe (ambiente sem editor de
+   * verdade), sobra o wrap da seleção — que era tudo o que a barra fazia antes.
+   */
+  const applyFormatting = useCallback((action: FormattingAction) => {
+    const editor = editorRef.current
+    const range = currentRange()
+    if (!editor || !range) return
+
+    if (action === FORMATTING_ACTION.MONOSPACE) {
+      const code = codeAncestorOf({ node: range.startContainer, editor })
+      if (range.collapsed) {
+        if (code) exitMonospaceAfter(code)
+        else startMonospaceAt(range)
+      } else if (code) {
+        unwrapMonospace(code)
+      } else {
+        wrapSelection(action)
+      }
+      emitChange(editor.innerHTML)
+      refreshActiveFormatting()
+      return
+    }
+
+    if (toggleFormattingCommand(action)) emitChange(editor.innerHTML)
+    else wrapSelection(action)
+    refreshActiveFormatting()
+  }, [currentRange, emitChange, refreshActiveFormatting, wrapSelection])
+
   const handleInput = useCallback((event: FormEvent<HTMLDivElement>) => {
-    onChange(htmlToWA(event.currentTarget.innerHTML))
-  }, [onChange])
+    emitChange(event.currentTarget.innerHTML)
+    refreshActiveFormatting()
+  }, [emitChange, refreshActiveFormatting])
 
   const handleKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>) => {
     if (event.key === 'Enter' && !event.shiftKey) {
       event.preventDefault()
-      if (!disabled) onSend()
+      // Sem esta guarda, cada Enter durante o upload dispara outro envio — foi o que duplicou a imagem.
+      if (!disabled && !isSending) onSend()
     }
-  }, [disabled, onSend])
+  }, [disabled, isSending, onSend])
 
   const handleFileChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     if (event.target.files?.length) onAttachFiles?.(event.target.files)
     if (fileInputRef.current) fileInputRef.current.value = ''
   }, [onAttachFiles])
 
-  const canSend = value.trim().length > 0
+  const canSend = value.trim().length > 0 || hasQueuedAttachments
+
+  // Os mesmos botões servem à linha e ao popover: duas listas separadas divergiriam na primeira
+  // formatação nova.
+  const formattingButtons = ([
+    [RICH_COMPOSER_ACTION.BOLD, Bold],
+    [RICH_COMPOSER_ACTION.ITALIC, Italic],
+    [RICH_COMPOSER_ACTION.STRIKETHROUGH, Strikethrough],
+    [RICH_COMPOSER_ACTION.MONOSPACE, Code],
+  ] as const)
+    .filter(([action]) => shows(action))
+    .map(([action, Icon]) => {
+      const isActive = isFormattingActive({ active: activeFormatting, action })
+      return (
+        <button
+          key={action}
+          type="button"
+          // O clique tira o foco do campo antes do `onClick`, e com ele a seleção que a
+          // formatação precisa — segurar o mousedown é o que mantém o cursor onde está.
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => applyFormatting(action)}
+          data-cv-tooltip={tooltipOf(action)}
+          aria-label={tooltipOf(action)}
+          aria-pressed={isActive}
+          className={cn(
+            COMPOSER_TOOL_BUTTON_CLASS,
+            isActive ? COMPOSER_TOOL_BUTTON_ACTIVE_CLASS : COMPOSER_TOOL_BUTTON_IDLE_CLASS,
+          )}
+        >
+          <Icon size={18} />
+        </button>
+      )
+    })
 
   return (
-    <div className={cn('flex flex-col', className)}>
+    <div className={cn(COMPOSER_BAR_CLASS, 'flex flex-col', className)}>
       {attachmentsPreview}
 
       {quickReplies?.length ? (
@@ -254,9 +405,9 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
             <button
               key={quickReply.id}
               type="button"
-              title={quickReply.tooltip}
+              data-cv-tooltip={quickReply.tooltip} aria-label={quickReply.tooltip}
               onClick={() => replaceContent(quickReply.text)}
-              className="flex-shrink-0 whitespace-nowrap rounded-full border border-gray-200 bg-white px-2 py-1 text-xs text-gray-600 transition-colors hover:border-teal-200 hover:bg-teal-50 hover:text-teal-700 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:border-teal-800 dark:hover:bg-teal-950/40 dark:hover:text-teal-400"
+              className={cn(QUICK_REPLY_PILL_CLASS, 'flex-shrink-0')}
             >
               {quickReply.label}
             </button>
@@ -264,30 +415,48 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
         </div>
       ) : null}
 
-      <div className="flex flex-wrap items-end gap-2">
-        {/* Só no desktop: no celular não há como selecionar texto e tocar no botão sem perder a
-            seleção, e a formatação sai digitada à mão de qualquer jeito. */}
-        <div className="mb-0.5 hidden items-center gap-0.5 sm:flex">
-          {([
-            [RICH_COMPOSER_ACTION.BOLD, Bold],
-            [RICH_COMPOSER_ACTION.ITALIC, Italic],
-            [RICH_COMPOSER_ACTION.STRIKETHROUGH, Strikethrough],
-            [RICH_COMPOSER_ACTION.MONOSPACE, Code],
-          ] as const)
-            .filter(([action]) => shows(action))
-            .map(([action, Icon]) => (
+      {/* Uma escala só para a barra inteira: todo botão é 36px com ícone de 18, o mesmo gap entre
+          todos e nenhuma margem própria. Com tamanhos e espaçamentos diferentes por grupo, o
+          `items-end` alinhava as bases mas os ícones ficavam em alturas e ritmos distintos. */}
+      {/* Uma linha só, e ela não quebra: `flex-nowrap` com o campo em `min-w-0` faz o texto ceder
+          espaço quando a coluna estreita — que é o que ligar a prévia faz — em vez de empurrar
+          botão para uma segunda faixa. */}
+      <div ref={barRef} className="flex flex-nowrap items-end gap-1">
+        {/* Formatação só no desktop: no celular não há como selecionar texto e tocar no botão sem
+            perder a seleção, e a formatação sai digitada à mão de qualquer jeito.
+
+            Com a barra estreita os quatro recolhem num botão só. Ceder a largura ao campo é a
+            escolha certa aqui: escrever é a ação da barra, formatar é o acessório — e é o campo,
+            não o botão, que fica inutilizável quando encolhe. */}
+        {formattingButtons.length > 0 ? (
+          isCompact ? (
+            <div ref={formattingRef} className="relative hidden flex-shrink-0 sm:block">
               <button
-                key={action}
                 type="button"
-                onClick={() => wrapSelection(action)}
-                title={tooltipOf(action)}
-                aria-label={tooltipOf(action)}
-                className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400"
+                onMouseDown={(event) => event.preventDefault()}
+                onClick={() => setIsFormattingOpen((open) => !open)}
+                data-cv-tooltip={tooltipOf('formatting')}
+                aria-label={tooltipOf('formatting')}
+                aria-expanded={isFormattingOpen}
+                className={cn(
+                  COMPOSER_TOOL_BUTTON_CLASS,
+                  activeFormatting || isFormattingOpen
+                    ? COMPOSER_TOOL_BUTTON_ACTIVE_CLASS
+                    : COMPOSER_TOOL_BUTTON_IDLE_CLASS,
+                )}
               >
-                <Icon size={15} />
+                <Type size={18} />
               </button>
-            ))}
-        </div>
+              {isFormattingOpen ? (
+                <div className="absolute bottom-full left-0 z-20 mb-2 flex items-center gap-1 rounded-full border border-gray-200 bg-white px-1 py-1 shadow-lg dark:border-gray-700 dark:bg-gray-800">
+                  {formattingButtons}
+                </div>
+              ) : null}
+            </div>
+          ) : (
+            <div className="hidden flex-shrink-0 items-center gap-1 sm:flex">{formattingButtons}</div>
+          )
+        ) : null}
 
         {shows(RICH_COMPOSER_ACTION.EMOJI) ? (
           <SimpleEmojiPicker onSelect={insertAtCursor} label={tooltipOf('emoji')} />
@@ -298,10 +467,10 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
             <button
               type="button"
               onClick={() => setIsVariablesOpen((open) => !open)}
-              title={tooltipOf('variables')}
+              data-cv-tooltip={tooltipOf('variables')}
               aria-label={tooltipOf('variables')}
               aria-expanded={isVariablesOpen}
-              className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400"
+              className={cn(COMPOSER_TOOL_BUTTON_CLASS, COMPOSER_TOOL_BUTTON_IDLE_CLASS)}
             >
               <Braces size={18} />
             </button>
@@ -311,7 +480,7 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
                   <button
                     key={variable.id}
                     type="button"
-                    title={variable.tooltip ?? variable.value}
+                    data-cv-tooltip={variable.tooltip ?? variable.value} aria-label={variable.tooltip ?? variable.value}
                     onClick={() => { insertAtCursor(variable.value); setIsVariablesOpen(false) }}
                     className="flex w-full flex-col items-start px-3 py-1.5 text-left hover:bg-teal-50 dark:hover:bg-teal-950/40"
                   >
@@ -337,9 +506,9 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
             <button
               type="button"
               onClick={() => fileInputRef.current?.click()}
-              title={tooltipOf('attach')}
+              data-cv-tooltip={tooltipOf('attach')}
               aria-label={tooltipOf('attach')}
-              className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-teal-50 hover:text-teal-600 dark:text-gray-500 dark:hover:bg-teal-900/30 dark:hover:text-teal-400"
+              className={cn(COMPOSER_TOOL_BUTTON_CLASS, COMPOSER_TOOL_BUTTON_IDLE_CLASS)}
             >
               <Paperclip size={18} />
             </button>
@@ -357,7 +526,9 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
           onInput={handleInput}
           onKeyDown={handleKeyDown}
           style={{ minHeight: '36px', maxHeight: '120px' }}
-          className="flex-1 min-w-[180px] overflow-y-auto rounded-2xl border border-gray-200 bg-gray-50 px-4 py-2 text-sm text-gray-800 transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-teal-300 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 dark:empty:before:text-gray-500 before:pointer-events-none [&_strong]:font-semibold [&_em]:italic [&_del]:line-through [&_code]:rounded [&_code]:bg-black/5 [&_code]:px-0.5 [&_code]:font-mono [&_code]:text-sm dark:[&_code]:bg-white/10"
+          // `min-w-0` em vez de uma largura mínima em px: com o mínimo fixo o campo se recusava a
+          // encolher junto com a coluna e era ele quem estourava a linha ao ligar a prévia.
+          className="ml-1 min-w-0 flex-1 overflow-y-auto rounded-2xl border border-transparent bg-white px-4 py-2 text-sm text-gray-800 transition-all focus:border-transparent focus:outline-none focus:ring-2 focus:ring-teal-300 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-100 empty:before:content-[attr(data-placeholder)] empty:before:text-gray-400 dark:empty:before:text-gray-500 before:pointer-events-none [&_strong]:font-semibold [&_b]:font-semibold [&_em]:italic [&_i]:italic [&_del]:line-through [&_s]:line-through [&_strike]:line-through [&_code]:rounded [&_code]:bg-black/5 [&_code]:px-0.5 [&_code]:font-mono [&_code]:text-sm dark:[&_code]:bg-white/10"
         />
 
         {!canSend && idleAction ? (
@@ -367,7 +538,7 @@ export const RichMessageComposer = forwardRef<RichMessageComposerHandle, RichMes
             type="button"
             onClick={onSend}
             disabled={disabled || isSending || !canSend}
-            title={tooltipOf('send')}
+            data-cv-tooltip={tooltipOf('send')}
             aria-label={tooltipOf('send')}
             className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-full bg-teal-600 text-white transition-colors hover:bg-teal-700 disabled:cursor-not-allowed disabled:opacity-40"
           >

package/src/SimpleEmojiPicker.tsx

@@ -42,10 +42,11 @@ export function SimpleEmojiPicker({ onSelect, label = 'Emojis', pickerWidth = '2
       <button
         type="button"
         onClick={() => setOpen((v) => !v)}
-        className="w-7 h-7 flex items-center justify-center rounded-lg text-gray-400 dark:text-gray-500 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/30 transition-colors"
-        title={label}
+        className="w-9 h-9 flex items-center justify-center rounded-full text-gray-400 dark:text-gray-500 hover:text-teal-600 dark:hover:text-teal-400 hover:bg-teal-50 dark:hover:bg-teal-900/30 transition-colors"
+        data-cv-tooltip={label}
+        aria-label={label}
       >
-        <Smile size={15} />
+        <Smile size={18} />
       </button>
 
       {open && (
@@ -56,6 +57,7 @@ export function SimpleEmojiPicker({ onSelect, label = 'Emojis', pickerWidth = '2
           >
             {EMOJIS.map((emoji) => (
               <button
+                data-cv-tooltip={emoji} aria-label={emoji}
                 key={emoji}
                 type="button"
                 onClick={() => { onSelect(emoji); setOpen(false) }}

package/src/StatusTicks.tsx

@@ -32,7 +32,7 @@ export function StatusTicks({ status, title }: StatusTicksProps) {
   const colorClass = STATUS_COLOR_CLASS[status] ?? STATUS_COLOR_CLASS.sent
 
   return (
-    <span className={`cursor-help leading-none flex items-center ${colorClass}`} title={title}>
+    <span className={`cursor-help leading-none flex items-center ${colorClass}`} data-cv-tooltip={title}>
       {status === 'failed' ? <AlertTriangle size={11} /> : <Ticks double={status !== 'sent'} />}
     </span>
   )

package/src/Toast.tsx

@@ -26,6 +26,8 @@ export const toast = {
   },
 }
 
+const TOAST_CLOSE_LABEL = 'Fechar aviso'
+
 const typeStyles: Record<ToastType, string> = {
   success: 'bg-green-600',
   error: 'bg-red-600',
@@ -77,6 +79,8 @@ function ToastItemComponent({ item, onRemove }: { item: ToastItem; onRemove: (id
           setExiting(true)
           setTimeout(() => onRemove(item.id), 300)
         }}
+        data-cv-tooltip={TOAST_CLOSE_LABEL}
+        aria-label={TOAST_CLOSE_LABEL}
         className="flex-shrink-0 opacity-70 hover:opacity-100 transition-opacity"
       >
         <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">

package/src/Tooltip.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test } from 'bun:test'
+
+import { tooltipPositionOf } from './Tooltip'
+
+const VIEWPORT_WIDTH = 1024
+
+describe('tooltipPositionOf', () => {
+  test('desenha acima do alvo e centralizado nele', () => {
+    const position = tooltipPositionOf({
+      targetRect: { top: 300, bottom: 336, left: 400, width: 36 },
+      viewportWidth: VIEWPORT_WIDTH,
+    })
+
+    expect(position.placement).toBe('top')
+    expect(position.left).toBe(418)
+    expect(position.top).toBe(292)
+  })
+
+  test('desce quando o alvo está colado no topo da janela', () => {
+    const position = tooltipPositionOf({
+      targetRect: { top: 12, bottom: 48, left: 400, width: 36 },
+      viewportWidth: VIEWPORT_WIDTH,
+    })
+
+    expect(position.placement).toBe('bottom')
+    expect(position.top).toBe(56)
+  })
+
+  test('afasta da borda o balão de um alvo no canto', () => {
+    const esquerda = tooltipPositionOf({
+      targetRect: { top: 300, bottom: 336, left: 0, width: 36 },
+      viewportWidth: VIEWPORT_WIDTH,
+    })
+    const direita = tooltipPositionOf({
+      targetRect: { top: 300, bottom: 336, left: VIEWPORT_WIDTH - 36, width: 36 },
+      viewportWidth: VIEWPORT_WIDTH,
+    })
+
+    expect(esquerda.left).toBe(72)
+    expect(direita.left).toBe(VIEWPORT_WIDTH - 72)
+  })
+})