@adatechnology/conversations-ui 0.1.0-rc.9 → 0.1.0

package/src/hooks/useUrlFilterState.ts

@@ -0,0 +1,107 @@
+/**
+ * Estado de listagem espelhado na URL — ordenação, filtros e paginação (regra `web.md` §7).
+ *
+ * Escrito sobre `history.replaceState` e não sobre um router: o pacote roda em três produtos com
+ * routers diferentes, e exigir um deles arrastaria dependência de framework para dentro do módulo.
+ * `replaceState` também é o comportamento certo aqui — filtrar não é navegar, e cada tecla digitada
+ * na busca não deve virar uma entrada no botão "voltar".
+ */
+
+import { useCallback, useEffect, useState } from 'react'
+
+const LIST_SEPARATOR = ','
+
+function readParams(): URLSearchParams {
+  if (typeof window === 'undefined') return new URLSearchParams()
+  return new URLSearchParams(window.location.search)
+}
+
+function writeParam(key: string, value: string | undefined): void {
+  if (typeof window === 'undefined') return
+  const params = readParams()
+  if (value === undefined || value === '') params.delete(key)
+  else params.set(key, value)
+  const query = params.toString()
+  window.history.replaceState(null, '', query ? `${window.location.pathname}?${query}` : window.location.pathname)
+}
+
+/** `enabled: false` mantém o mesmo contrato de estado sem tocar na URL — para uso em preview e teste. */
+export interface UrlStateOptions {
+  readonly enabled?: boolean
+}
+
+export function useUrlStringState(
+  key: string,
+  initial: string,
+  { enabled = true }: UrlStateOptions = {},
+): [string, (next: string) => void] {
+  const [value, setValue] = useState(() => (enabled ? (readParams().get(key) ?? initial) : initial))
+
+  const update = useCallback(
+    (next: string) => {
+      setValue(next)
+      if (enabled) writeParam(key, next === initial ? undefined : next)
+    },
+    [enabled, key, initial],
+  )
+
+  return [value, update]
+}
+
+export function useUrlNumberState(
+  key: string,
+  initial: number,
+  { enabled = true }: UrlStateOptions = {},
+): [number, (next: number) => void] {
+  const [value, setValue] = useState(() => {
+    if (!enabled) return initial
+    const raw = Number(readParams().get(key))
+    return Number.isFinite(raw) && raw > 0 ? raw : initial
+  })
+
+  const update = useCallback(
+    (next: number) => {
+      setValue(next)
+      if (enabled) writeParam(key, next === initial ? undefined : String(next))
+    },
+    [enabled, key, initial],
+  )
+
+  return [value, update]
+}
+
+export function useUrlArrayState(
+  key: string,
+  { enabled = true }: UrlStateOptions = {},
+): [readonly string[], (next: readonly string[]) => void] {
+  const [value, setValue] = useState<readonly string[]>(() => {
+    if (!enabled) return []
+    const raw = readParams().get(key)
+    return raw ? raw.split(LIST_SEPARATOR).filter(Boolean) : []
+  })
+
+  const update = useCallback(
+    (next: readonly string[]) => {
+      setValue(next)
+      if (enabled) writeParam(key, next.length > 0 ? next.join(LIST_SEPARATOR) : undefined)
+    },
+    [enabled, key],
+  )
+
+  return [value, update]
+}
+
+/**
+ * Espera o usuário parar de digitar antes de deixar o valor chegar à query. Sem isto, cada tecla
+ * na busca vira uma chamada de rede e uma reescrita de URL.
+ */
+export function useDebouncedValue<TValue>(value: TValue, delayMs = 300): TValue {
+  const [debounced, setDebounced] = useState(value)
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delayMs)
+    return () => clearTimeout(timer)
+  }, [value, delayMs])
+
+  return debounced
+}

package/src/icon.constant.ts

@@ -0,0 +1,12 @@
+/**
+ * Tamanhos de ícone da UI de conversas, em px, na escala de 4 da grade.
+ *
+ * Ícone vem da biblioteca (lucide), nunca emoji. Emoji desenha diferente em cada sistema
+ * operacional, não herda `currentColor` — então não acompanha o estado do controle (ativo,
+ * desabilitado, variante destrutiva) — e não escala com o token de tipografia. Numa mesma faixa,
+ * metade emoji e metade SVG lê como duas famílias de botão.
+ */
+
+export const ICON_SIZE_PILL = 12
+export const ICON_SIZE_INLINE = 14
+export const ICON_SIZE_ACTION = 16

package/src/index.ts

@@ -3,15 +3,32 @@ export { InteractiveMessage, DEFAULT_INTERACTIVE_MESSAGE_LABELS } from './Intera
 export { ConversationWallpaper } from './Wallpaper'
 export { ConversationLocalesProvider, useConversationLocales } from './ConversationLocalesProvider'
 export { AudioPlayer } from './AudioPlayer'
+export { AudioTranscription } from './AudioTranscription'
 export { EmojiPicker, DEFAULT_EMOJI_PICKER_LABELS } from './EmojiPicker'
 export { EMOJI_CATEGORIES, searchEmojis } from './emojiCatalog'
 export { MessageComposer, DEFAULT_MESSAGE_COMPOSER_LABELS, DEFAULT_ACCEPTED_FILE_TYPES } from './MessageComposer'
+export { RichMessageComposer, RICH_COMPOSER_ACTION, DEFAULT_RICH_COMPOSER_TOOLTIPS } from './RichMessageComposer'
+export type {
+  RichMessageComposerProps,
+  RichComposerAction,
+  RichComposerTooltips,
+  RichComposerQuickReply,
+  RichComposerVariable,
+  RichMessageComposerHandle,
+} from './RichMessageComposer'
+export {
+  AudioRecorderButton,
+  DEFAULT_AUDIO_RECORDER_BUTTON_LABELS,
+  DEFAULT_MAX_RECORDING_MILLISECONDS,
+} from './AudioRecorderButton'
+export type { AudioRecorderButtonProps, AudioRecorderButtonLabels } from './AudioRecorderButton'
 export { WhatsAppMessageEditor, DEFAULT_WHATSAPP_MESSAGE_EDITOR_LABELS } from './WhatsAppMessageEditor'
 export { SimpleEmojiPicker } from './SimpleEmojiPicker'
 export { DateDivider } from './DateDivider'
 export { Avatar, DEFAULT_AVATAR_LABELS } from './Avatar'
 export { ConversationListItem, DEFAULT_CONVERSATION_LIST_ITEM_LABELS } from './ConversationListItem'
 export { ToastProvider, useToast, toast } from './Toast'
+export { TooltipLayer, TOOLTIP_ATTRIBUTE } from './Tooltip'
 
 export { StatusTicks } from './StatusTicks'
 export { Lightbox, DEFAULT_LIGHTBOX_LABELS } from './Lightbox'
@@ -25,6 +42,17 @@ export { MessageTail } from './MessageTail'
 // plataforma e do ofício de atender, não de um produto — por isso moram aqui.
 export { CONVERSATION_WINDOW, WINDOW_FILTERS, windowOf, formatStalledFor } from './conversationWindow'
 export type { WindowOfParams } from './conversationWindow'
+
+// Tempo sem resposta (SLA), distinto da janela de sessão acima: o host usa isto para o alerta e
+// para filtrar quem está esperando demais.
+export {
+  REPLY_LATENCY,
+  REPLY_LATENCY_LATE_HOURS,
+  REPLY_LATENCY_CRITICAL_HOURS,
+  replyLatencyOf,
+  isReplyOverdue,
+} from './replyLatency'
+export type { ReplyLatency, ReplyLatencyParams } from './replyLatency'
 // Canal de origem: capacidades por plataforma (janela de sessão, reabertura, tipo de identificador).
 export {
   CONVERSATION_CHANNEL,
@@ -62,6 +90,7 @@ export { ConversationContextPanel, DEFAULT_CONVERSATION_CONTEXT_LABELS } from '.
 export type {
   ConversationContextPanelProps,
   ConversationContextEntry,
+  ConversationContextStatus,
   ConversationContextPanelLabels,
   ConversationContextPanelClassNames,
 } from './ConversationContextPanel'
@@ -69,6 +98,24 @@ export { WindowExpiredNotice, isWindowBlocking, DEFAULT_WINDOW_EXPIRED_LABELS }
 export type { WindowExpiredNoticeProps, WindowExpiredNoticeLabels } from './WindowExpiredNotice'
 export { DocumentsLibrary, DEFAULT_DOCUMENTS_LIBRARY_LABELS } from './DocumentsLibrary'
 export type { DocumentsLibraryProps, DocumentsLibraryLabels, DocumentsLibraryClassNames } from './DocumentsLibrary'
+export { DocumentsWorkspace, DEFAULT_DOCUMENTS_WORKSPACE_LABELS } from './documents'
+export type {
+  DocumentsWorkspaceProps,
+  DocumentsWorkspaceLabels,
+  DocumentsWorkspaceClassNames,
+  DocumentsFiltersContext,
+} from './documents'
+export { SortableHead, MultiSelectFilter, BulkActionBar, ListingPagination } from './listing'
+export type {
+  SortableHeadProps,
+  MultiSelectFilterProps,
+  BulkActionBarProps,
+  ListingPaginationProps,
+  FilterOption,
+  SortDirection,
+} from './listing'
+export { useUrlStringState, useUrlNumberState, useUrlArrayState, useDebouncedValue } from './hooks/useUrlFilterState'
+export type { UrlStateOptions } from './hooks/useUrlFilterState'
 export { DOCUMENT_SOURCE_FILTER } from './ConversationDocumentsPanel'
 export type { DocumentSourceFilter } from './ConversationDocumentsPanel'
 export type { ConversationDocumentsPanelClassNames } from './ConversationDocumentsPanel'
@@ -78,6 +125,8 @@ export { buildTranscriptText, buildTranscriptFilename, downloadTextFile } from '
 export type { BuildTranscriptTextParams } from './conversationTranscript'
 
 export { useDarkMode, useIsDarkTheme } from './useDarkMode'
+export { DarkModeToggle, DEFAULT_DARK_MODE_TOGGLE_LABELS } from './DarkModeToggle'
+export type { DarkModeToggleProps, DarkModeToggleLabels } from './DarkModeToggle'
 export { useIsNarrow, NARROW_MAX_WIDTH_PX } from './useIsNarrow'
 export { useWaitingNotifications } from './useWaitingNotifications'
 export type {
@@ -93,6 +142,7 @@ export { ConversationsProvider, useConversations } from './providers/Conversatio
 export { WhatsAppTemplateSettingsForm } from './settings/WhatsAppTemplateSettingsForm'
 export { WhatsAppCreateTemplateForm } from './settings/WhatsAppCreateTemplateForm'
 export { WelcomeFarewellForm } from './settings/WelcomeFarewellForm'
+export { TranscriptionSettingsForm } from './settings/TranscriptionSettingsForm'
 export {
   WhatsAppTemplatesSettings,
   TEMPLATE_SETTINGS_TAB,
@@ -100,9 +150,23 @@ export {
 } from './settings/WhatsAppTemplatesSettings'
 export { TopicsForm } from './settings/TopicsForm'
 
+// Tela composta de Mensagens: junta os formulários acima com abas, estado e salvamento, para o
+// host não remontar essa mesma colagem em cada produto (foi assim que eles divergiram).
+export { MessagesWorkspace } from './settings/MessagesWorkspace'
+export type {
+  MessagesWorkspaceProps,
+  MessagesWorkspaceApi,
+  MessagesWorkspaceLabels,
+  MessagesWorkspaceTemplateRole,
+  BotMessages,
+  TemplateSettings,
+  TranscriptionSettings,
+} from './settings/MessagesWorkspace'
+
 // Camada headless (T6.9) — hooks de dados/ações independentes de qualquer tela, para o
 // produto montar sua própria UI sobre eles. Requerem <ConversationsProvider> como ancestral.
 export { useConversationMessages } from './hooks/useConversationMessages'
+export { useScrollToLatestMessage } from './hooks/useScrollToLatestMessage'
 export { useConversationList } from './hooks/useConversationList'
 export { useConversationContext } from './hooks/useConversationContext'
 export { useConversationDocuments } from './hooks/useConversationDocuments'
@@ -117,6 +181,7 @@ export { formatTimestamp, formatFileSize, formatDateTime, isSameDay } from './li
 
 export type { MessagePayload, ConversationsUIConfig, ConversationsTheme, ConversationsFeatures } from './types'
 export type { InteractivePayload, InteractiveSection, InteractiveOption, InteractiveSelection } from './types'
+export type { MessageTranscription, TranscriptionStatus, TranscriptionMode } from './types'
 export type {
   ConversationsApi,
   SSEProvider,
@@ -137,6 +202,7 @@ export type { MessageBubbleProps } from './MessageBubble'
 export type { ConversationWallpaperProps } from './Wallpaper'
 export type { ConversationLocales, ConversationLocalesProviderProps } from './ConversationLocalesProvider'
 export type { AudioPlayerProps } from './AudioPlayer'
+export type { AudioTranscriptionProps } from './AudioTranscription'
 export type { EmojiPickerProps, EmojiPickerLabels } from './EmojiPicker'
 export type { EmojiEntry, EmojiCategory } from './emojiCatalog'
 export type { InteractiveMessageProps, InteractiveMessageLabels } from './InteractiveMessage'
@@ -166,6 +232,10 @@ export type {
   WhatsAppCreateTemplateFormLabels,
 } from './settings/WhatsAppCreateTemplateForm'
 export type { WelcomeFarewellFormProps, WelcomeFarewellFormLabels } from './settings/WelcomeFarewellForm'
+export type {
+  TranscriptionSettingsFormProps,
+  TranscriptionSettingsFormLabels,
+} from './settings/TranscriptionSettingsForm'
 export type {
   WhatsAppTemplatesSettingsProps,
   WhatsAppTemplatesSettingsLabels,
@@ -176,8 +246,38 @@ export type { TopicsFormProps, TopicItem, TopicsFormLabels } from './settings/To
 export type { UseConversationMessagesResult } from './hooks/useConversationMessages'
 export type { UseConversationListParams, UseConversationListResult } from './hooks/useConversationList'
 export type { UseConversationContextResult } from './hooks/useConversationContext'
+export type { UseScrollToLatestMessageParams, UseScrollToLatestMessageResult } from './hooks/useScrollToLatestMessage'
 export type { UseConversationDocumentsParams, UseConversationDocumentsResult } from './hooks/useConversationDocuments'
 export type { ConversationRealtimeHandler } from './hooks/useConversationRealtime'
 export type { AsyncResourceState } from './hooks/useAsyncResource'
 export { createMediaUrlResolver } from './lib/createMediaUrlResolver'
 export type { ConversationHeaderUtility } from './ConversationHeader'
+export { applyQuickReplyVariables, resolveQuickReply } from './MessageComposer'
+export type { QuickReply } from './MessageComposer'
+
+// Tela de atendimento completa. Fica no export principal — e não num subpath — porque é a
+// composição padrão do pacote: quem instala conversas quer esta tela, e as peças continuam
+// exportadas ao lado para quem precisar montar outra.
+export { ConversationsWorkspace, ConversationPane, ConversationsInboxList } from './workspace'
+export { useConversationsInbox, CONVERSATIONS_PER_PAGE, DEFAULT_CONVERSATIONS_WORKSPACE_LABELS } from './workspace'
+export type {
+  ConversationsWorkspaceProps,
+  ConversationsWorkspaceSimulator,
+  SimulatorTransportFactory,
+  SimulatorTransportParams,
+  ConversationsWorkspaceLabels,
+  ConversationPaneProps,
+  ConversationsInboxListProps,
+  UseConversationsInboxParams,
+  UseConversationsInboxResult,
+} from './workspace'
+
+// A porta do simulador entra no export principal como TIPO: `simulator.transports` é tipado por ela,
+// e obrigar o host a abrir o subpath `/preview` só para declarar a fábrica seria pedir que ele
+// importasse fixtures para escrever uma assinatura. `export type` é apagado no build — o `preview/`
+// continua fora do bundle de quem só declara o transporte.
+export type {
+  ConversationSimulatorClient,
+  SendSimulatorMediaParams,
+  SimulatorMediaKind,
+} from './preview/ConversationSimulatorClient'

package/src/lib/composer-formatting.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from 'bun:test'
+
+import {
+  FORMATTING_ACTION,
+  FORMATTING_SEPARATOR,
+  activeFormattingIn,
+  canExecuteFormattingCommand,
+  isFormattingActive,
+  toggleFormattingCommand,
+} from './composer-formatting'
+import { ZERO_WIDTH_SPACE, htmlToWA, waToHTML } from './whatsapp-formatting'
+
+describe('isFormattingActive', () => {
+  it('reconhece cada formatação dentro do conjunto ativo', () => {
+    const active = [FORMATTING_ACTION.BOLD, FORMATTING_ACTION.MONOSPACE].join(FORMATTING_SEPARATOR)
+
+    expect(isFormattingActive({ active, action: FORMATTING_ACTION.BOLD })).toBe(true)
+    expect(isFormattingActive({ active, action: FORMATTING_ACTION.MONOSPACE })).toBe(true)
+    expect(isFormattingActive({ active, action: FORMATTING_ACTION.ITALIC })).toBe(false)
+  })
+
+  it('não acende nada quando o conjunto está vazio', () => {
+    expect(isFormattingActive({ active: '', action: FORMATTING_ACTION.BOLD })).toBe(false)
+  })
+})
+
+describe('activeFormattingIn', () => {
+  it('não acende nada quando não há seleção no documento', () => {
+    const editor = { contains: () => false } as unknown as HTMLElement
+
+    expect(activeFormattingIn(editor)).toBe('')
+  })
+})
+
+describe('toggleFormattingCommand', () => {
+  it('avisa que não executou onde o comando não existe, para o campo cair no wrap manual', () => {
+    if (canExecuteFormattingCommand()) return
+    expect(toggleFormattingCommand(FORMATTING_ACTION.BOLD)).toBe(false)
+  })
+
+  it('não tem comando nativo para monoespaçado', () => {
+    expect(toggleFormattingCommand(FORMATTING_ACTION.MONOSPACE)).toBe(false)
+  })
+})
+
+describe('waToHTML dentro do campo editável', () => {
+  it('escreve o tachado como <s>, que é o que o navegador consegue desfazer', () => {
+    expect(waToHTML('~riscado~')).toBe('<s>riscado</s>')
+  })
+
+  it('mantém o ida e volta do tachado', () => {
+    expect(htmlToWA(waToHTML('~riscado~'))).toBe('~riscado~')
+  })
+})
+
+describe('htmlToWA e a âncora do cursor', () => {
+  it('descarta o código que só tem a âncora, para não sair um par de crases vazio', () => {
+    expect(htmlToWA(`oi <code>${ZERO_WIDTH_SPACE}</code>`)).toBe('oi')
+  })
+
+  it('tira a âncora de dentro do código que o operador chegou a preencher', () => {
+    expect(htmlToWA(`<code>${ZERO_WIDTH_SPACE}npm run dev</code>`)).toBe('`npm run dev`')
+  })
+
+  it('não deixa a âncora vazar para o texto enviado', () => {
+    expect(htmlToWA(`oi${ZERO_WIDTH_SPACE} tudo bem`)).toBe('oi tudo bem')
+  })
+})
+
+describe('htmlToWA com a marcação do navegador', () => {
+  it('converte o <strike> do execCommand para o tachado do WhatsApp', () => {
+    expect(htmlToWA('<strike>cancelado</strike>')).toBe('~cancelado~')
+  })
+
+  it('converte o <b> e o <i> do navegador junto com as nossas tags', () => {
+    expect(htmlToWA('<b>oi</b> <i>tudo</i> <strong>bem</strong>')).toBe('*oi* _tudo_ *bem*')
+  })
+})

package/src/lib/composer-formatting.ts

@@ -0,0 +1,145 @@
+/**
+ * Estado e alternância da formatação dentro do campo rico.
+ *
+ * O botão precisa responder duas perguntas que o wrap manual não respondia: o cursor está dentro de
+ * um negrito? e, se está, como saio dele? `execCommand` é depreciado mas continua sendo o único
+ * caminho que alterna a formatação do cursor vazio — sem ele, ligar o negrito antes de digitar não
+ * existe, e era por isso que os botões não pareciam acender nem apagar.
+ *
+ * `queryCommandState` responde pelo estilo computado, então acende igual para `<strong>` (nosso) e
+ * `<b>` (do navegador). Onde o ambiente não tem as duas APIs — jsdom, teste — as funções avisam, e
+ * quem chama volta ao wrap manual.
+ */
+
+import { COMPOSER_MONOSPACE_CLASS } from '../composer.constant'
+import { ZERO_WIDTH_SPACE } from './whatsapp-formatting'
+
+export const FORMATTING_ACTION = {
+  BOLD: 'bold',
+  ITALIC: 'italic',
+  STRIKETHROUGH: 'strikethrough',
+  MONOSPACE: 'monospace',
+} as const
+export type FormattingAction = (typeof FORMATTING_ACTION)[keyof typeof FORMATTING_ACTION]
+
+/** Monoespaçado fica de fora: não existe comando nativo, o campo trata à mão. */
+const EXEC_COMMAND_BY_ACTION = {
+  [FORMATTING_ACTION.BOLD]: 'bold',
+  [FORMATTING_ACTION.ITALIC]: 'italic',
+  [FORMATTING_ACTION.STRIKETHROUGH]: 'strikeThrough',
+} as const
+
+/**
+ * O conjunto ativo viaja como string separada para o React comparar por valor: um `Set` novo a cada
+ * movimento do cursor rerenderizaria a barra inteira sem nada ter mudado.
+ */
+export const FORMATTING_SEPARATOR = '|'
+
+interface EditorNodeParams {
+  readonly node: Node
+  readonly editor: HTMLElement
+}
+
+/** O `<code>` que envolve o cursor, se houver — a marcação de monoespaçado que damos ao texto. */
+export function codeAncestorOf({ node, editor }: EditorNodeParams): HTMLElement | undefined {
+  let current: Node | null = node
+
+  while (current && current !== editor) {
+    if (current instanceof HTMLElement && current.tagName === 'CODE') return current
+    current = current.parentNode
+  }
+
+  return undefined
+}
+
+function canQueryCommandState(): boolean {
+  return typeof document !== 'undefined' && typeof document.queryCommandState === 'function'
+}
+
+export function canExecuteFormattingCommand(): boolean {
+  return typeof document !== 'undefined' && typeof document.execCommand === 'function'
+}
+
+function isCommandActive(command: string): boolean {
+  if (!canQueryCommandState()) return false
+  try {
+    return document.queryCommandState(command)
+  } catch {
+    // Fora de um campo editável o navegador lança em vez de responder `false`.
+    return false
+  }
+}
+
+export function activeFormattingIn(editor: HTMLElement): string {
+  const selection = typeof window !== 'undefined' ? window.getSelection() : null
+  const anchor = selection?.anchorNode
+  // Cursor fora do campo: nenhum botão aceso, senão a barra descreveria a seleção de outro lugar.
+  if (!anchor || !editor.contains(anchor)) return ''
+
+  const active: FormattingAction[] = []
+  for (const [action, command] of Object.entries(EXEC_COMMAND_BY_ACTION)) {
+    if (isCommandActive(command)) active.push(action as FormattingAction)
+  }
+  if (codeAncestorOf({ node: anchor, editor })) active.push(FORMATTING_ACTION.MONOSPACE)
+
+  return active.join(FORMATTING_SEPARATOR)
+}
+
+export function isFormattingActive({ active, action }: { active: string; action: FormattingAction }): boolean {
+  return active.split(FORMATTING_SEPARATOR).includes(action)
+}
+
+/**
+ * Liga o monoespaçado no cursor vago: abre o `<code>` e põe o cursor lá dentro, ancorado no espaço
+ * de largura zero — sem a âncora não há onde o cursor pousar, e o próximo caractere sai de fora.
+ * A âncora some na conversão para a notação do WhatsApp.
+ */
+export function startMonospaceAt(range: Range): void {
+  const code = document.createElement('code')
+  code.className = COMPOSER_MONOSPACE_CLASS
+  code.textContent = ZERO_WIDTH_SPACE
+  range.deleteContents()
+  range.insertNode(code)
+  placeCaretAfter(code.firstChild as Text, ZERO_WIDTH_SPACE.length)
+}
+
+/**
+ * Desliga o monoespaçado do cursor vago. Só mover o cursor para depois do `</code>` não basta — o
+ * navegador o traz de volta para dentro; é preciso uma âncora do lado de fora para ele pousar.
+ */
+export function exitMonospaceAfter(code: HTMLElement): void {
+  const anchor = document.createTextNode(ZERO_WIDTH_SPACE)
+  code.after(anchor)
+  placeCaretAfter(anchor, ZERO_WIDTH_SPACE.length)
+}
+
+/** Tira a marcação e devolve o texto ao redor — o que o clique com seleção dentro do código faz. */
+export function unwrapMonospace(code: HTMLElement): void {
+  code.replaceWith(document.createTextNode(code.textContent?.replace(ZERO_WIDTH_SPACE, '') ?? ''))
+}
+
+function placeCaretAfter(node: Text, offset: number): void {
+  const caret = document.createRange()
+  caret.setStart(node, offset)
+  caret.collapse(true)
+  const selection = window.getSelection()
+  selection?.removeAllRanges()
+  selection?.addRange(caret)
+}
+
+/**
+ * Alterna a formatação pelo navegador. Devolve `false` quando o comando não existe no ambiente,
+ * para o campo cair no wrap manual em vez de engolir o clique.
+ */
+export function toggleFormattingCommand(action: FormattingAction): boolean {
+  const command = EXEC_COMMAND_BY_ACTION[action as keyof typeof EXEC_COMMAND_BY_ACTION]
+  if (!command || !canExecuteFormattingCommand()) return false
+
+  try {
+    // Sem isto o Chrome escreve `<span style="font-weight:bold">`, que não sobrevive ao htmlToWA.
+    document.execCommand('styleWithCSS', false, 'false')
+    return document.execCommand(command)
+  } catch {
+    return false
+  }
+}

package/src/lib/whatsapp-formatting.test.tsx

@@ -0,0 +1,37 @@
+import { describe, expect, it } from 'bun:test'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+import { parseWhatsAppFormatting } from './whatsapp-formatting'
+
+function render(text: string): string {
+  return renderToStaticMarkup(<>{parseWhatsAppFormatting(text)}</>)
+}
+
+describe('parseWhatsAppFormatting com marcador sem par', () => {
+  // Estes casos travavam a aba: o laço reprocessava a mesma string sem consumir o marcador.
+  it('trata o sublinhado solto de um nome de arquivo como texto', () => {
+    expect(render('IMG_2026.jpg')).toBe('<span>IMG</span><span>_</span><span>2026.jpg</span>')
+  })
+
+  it('não trava com asterisco, til ou crase sem fechamento', () => {
+    expect(render('3 * 4')).toContain('*')
+    expect(render('mais ou menos ~10')).toContain('~')
+    expect(render('use ` para código')).toContain('`')
+  })
+
+  it('sobrevive a uma linha só de marcadores', () => {
+    expect(render('*_~`')).toBe('<span>*</span><span>_</span><span>~</span><span>`</span>')
+  })
+})
+
+describe('parseWhatsAppFormatting com marcador fechado', () => {
+  it('continua formatando o par completo depois do marcador solto', () => {
+    expect(render('IMG_2026 *urgente*')).toContain('<strong>urgente</strong>')
+  })
+
+  it('mantém negrito, itálico e tachado', () => {
+    expect(render('*a* _b_ ~c~')).toBe(
+      '<strong>a</strong><span> </span><em>b</em><span> </span><del>c</del>',
+    )
+  })
+})

package/src/lib/whatsapp-formatting.tsx

@@ -90,9 +90,15 @@ function parseInlineTokens(text: string): FormatToken[] {
       if (remaining) result.push({ type: 'text', content: remaining })
       break
     }
-    if (nextSpecial > 0) {
-      result.push({ type: 'text', content: remaining.slice(0, nextSpecial) })
+    // Marcador sem par — o `_` de `IMG_2026.jpg` é o caso comum. Nenhuma das regras casou e o
+    // marcador está na posição zero: sem consumir esse caractere o laço reprocessa a mesma string
+    // para sempre e trava a aba inteira, porque isto roda no render de cada mensagem.
+    if (nextSpecial === 0) {
+      result.push({ type: 'text', content: remaining.slice(0, 1) })
+      remaining = remaining.slice(1)
+      continue
     }
+    result.push({ type: 'text', content: remaining.slice(0, nextSpecial) })
     remaining = remaining.slice(nextSpecial)
   }
 
@@ -137,6 +143,15 @@ function unescapeHtml(text: string): string {
 const CODE_TOKEN_MARK = String.fromCharCode(0xe000)
 const CODE_TOKEN_REGEX = new RegExp(`${CODE_TOKEN_MARK}(\\d+)${CODE_TOKEN_MARK}`, 'g')
 
+/**
+ * Âncora invisível que o campo rico usa para pôr o cursor dentro (ou fora) de um `<code>` — não
+ * existe comando de navegador para monoespaçado, e o cursor sozinho não fica onde não há texto.
+ * Ela é do editor, nunca da mensagem: sai toda aqui, na conversão de volta.
+ */
+export const ZERO_WIDTH_SPACE = String.fromCharCode(0x200b)
+const EMPTY_CODE_REGEX = new RegExp(`<code[^>]*>[${ZERO_WIDTH_SPACE}\\s]*</code>`, 'gi')
+const ZERO_WIDTH_SPACE_REGEX = new RegExp(ZERO_WIDTH_SPACE, 'g')
+
 // waToHTML/htmlToWA formam um par round-trip: todo texto que sai de waToHTML deve
 // reconstruir exatamente o original ao passar por htmlToWA (inclusive blocos de
 // código multi-linha, que exigem distinguir ``` de ` via atributo data-wa).
@@ -156,7 +171,10 @@ export function waToHTML(text: string): string {
   let html = escapeHtml(working)
   html = html.replace(/\*([^*\n]+)\*/g, '<strong>$1</strong>')
   html = html.replace(/_([^_\n]+)_/g, '<em>$1</em>')
-  html = html.replace(/~([^~\n]+)~/g, '<del>$1</del>')
+  // `<s>` e não `<del>`: o navegador se recusa a tirar o tachado de um `<del>` — o botão acendia,
+  // o clique não fazia nada e o texto continuava riscado. Com `<s>` a alternância funciona, e a
+  // linha na tela é a mesma. `<del>` continua certo na exibição da mensagem, que não é editável.
+  html = html.replace(/~([^~\n]+)~/g, '<s>$1</s>')
   html = html.replace(/\n/g, '<br>')
 
   html = html.replace(CODE_TOKEN_REGEX, (_match, indexStr: string) => {
@@ -175,6 +193,9 @@ export function htmlToWA(html: string): string {
   if (!html) return ''
 
   let text = html
+  // O `<code>` que o cursor abre nasce só com a âncora de largura zero. Sem nada digitado dentro,
+  // ele viraria um par de crases vazias no texto enviado.
+  text = text.replace(EMPTY_CODE_REGEX, '')
   text = text.replace(/<code data-wa="block"[^>]*>([\s\S]*?)<\/code>/gi, (_match, inner: string) => (
     `\`\`\`${unescapeHtml(inner.replace(/<br\s*\/?>/gi, '\n'))}\`\`\``
   ))
@@ -195,11 +216,15 @@ export function htmlToWA(html: string): string {
   text = text.replace(/<i>(.*?)<\/i>/gi, '_$1_')
   text = text.replace(/<del>(.*?)<\/del>/gi, '~$1~')
   text = text.replace(/<s>(.*?)<\/s>/gi, '~$1~')
+  // O `strikeThrough` do navegador escreve `<strike>`, que não é o que geramos mas chega no campo.
+  text = text.replace(/<strike>(.*?)<\/strike>/gi, '~$1~')
   // Compat: HTML sem os marcadores data-wa (ex: vindo de outro editor) ainda vira código inline.
   text = text.replace(/<code[^>]*>(.*?)<\/code>/gi, '`$1`')
 
   text = text.replace(/<[^>]+>/g, '')
   text = unescapeHtml(text)
+  // A âncora do cursor sobrevive dentro do `<code>` que ganhou texto; ela é do editor, não da mensagem.
+  text = text.replace(ZERO_WIDTH_SPACE_REGEX, '')
   return text.trim()
 }