@adatechnology/conversations-ui 0.1.0-rc.2 → 0.1.0-rc.4

package/dist/styles.css

@@ -9,3 +9,201 @@
   background-color: #0b141a;
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%2319232a' stroke-width='1.2' opacity='0.9'%3E%3Ccircle cx='15' cy='15' r='3'/%3E%3Cpath d='M40 10 q5 8 0 16 q-5 -8 0 -16z'/%3E%3Ccircle cx='70' cy='28' r='2'/%3E%3Cpath d='M18 55 l6 6 m-6 0 l6 -6'/%3E%3Ccircle cx='55' cy='68' r='2.5'/%3E%3Cpath d='M85 58 q6 6 0 12 q-6 -6 0 -12z'/%3E%3Ccircle cx='8' cy='85' r='2'/%3E%3Cpath d='M65 90 l5 5 m-5 0 l5 -5'/%3E%3C/g%3E%3C/svg%3E");
 }
+.cv-header-action {
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.375rem;
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  background: transparent;
+  cursor: pointer;
+}
+.cv-header-action:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dark .cv-header-action {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-header-icon {
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.5rem;
+  padding: 0.375rem 0.5rem;
+  background: transparent;
+  cursor: pointer;
+  line-height: 1;
+}
+.cv-header-icon--active {
+  background: rgb(241 245 249);
+  border-color: rgb(148 163 184);
+}
+.cv-header-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.dark .cv-header-icon {
+  border-color: rgb(71 85 105);
+}
+.dark .cv-header-icon--active {
+  background: rgb(51 65 85);
+}
+.cv-header-action--primary {
+  background: rgb(37 99 235);
+  border-color: rgb(37 99 235);
+  color: white;
+  font-weight: 500;
+}
+.cv-header-action--danger {
+  background: rgb(239 68 68);
+  border-color: rgb(239 68 68);
+  color: white;
+  font-weight: 500;
+}
+.cv-subtab {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  color: rgb(100 116 139);
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+}
+.cv-subtab--active {
+  color: inherit;
+  font-weight: 500;
+  border-bottom-color: rgb(37 99 235);
+}
+.cv-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  line-height: 1;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  background: rgb(241 245 249);
+  color: rgb(71 85 105);
+}
+.cv-pill--success {
+  background: rgb(220 252 231);
+  color: rgb(21 128 61);
+}
+.cv-pill--warning {
+  background: rgb(254 243 199);
+  color: rgb(146 64 14);
+}
+.cv-pill--danger {
+  background: rgb(255 237 213);
+  color: rgb(194 65 12);
+}
+.dark .cv-pill {
+  background: rgb(51 65 85);
+  color: rgb(203 213 225);
+}
+.dark .cv-pill--success {
+  background: rgb(20 83 45);
+  color: rgb(187 247 208);
+}
+.dark .cv-pill--warning {
+  background: rgb(120 53 15);
+  color: rgb(253 230 138);
+}
+.dark .cv-pill--danger {
+  background: rgb(124 45 18);
+  color: rgb(254 215 170);
+}
+.cv-row:hover {
+  background: #f0f2f5;
+}
+.cv-row--active,
+.cv-row--active:hover {
+  background: #f0f2f5;
+}
+.dark .cv-row:hover {
+  background: rgb(30 41 59);
+}
+.dark .cv-row--active,
+.dark .cv-row--active:hover {
+  background: rgb(30 41 59);
+}
+.cv-back {
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.5rem;
+  padding: 0.25rem 0.5rem;
+  background: transparent;
+  cursor: pointer;
+  line-height: 1;
+}
+@media (min-width: 1024px) {
+  .cv-back {
+    display: none;
+  }
+}
+.dark .cv-back {
+  border-color: rgb(71 85 105);
+  color: rgb(226 232 240);
+}
+.cv-only-wide {
+  display: none;
+}
+@media (min-width: 1024px) {
+  .cv-only-wide {
+    display: inline;
+  }
+}
+.cv-only-narrow {
+  display: inline-flex;
+}
+@media (min-width: 1024px) {
+  .cv-only-narrow {
+    display: none;
+  }
+}
+.cv-menu {
+  position: relative;
+}
+.cv-menu-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 0.25rem);
+  z-index: 20;
+  min-width: 12rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.375rem;
+  border: 1px solid rgb(203 213 225);
+  border-radius: 0.5rem;
+  background: #fff;
+  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+}
+.dark .cv-menu-panel {
+  background: rgb(30 41 59);
+  border-color: rgb(71 85 105);
+}
+.cv-menu-panel .cv-header-action {
+  text-align: left;
+}
+@media (max-width: 1023px) {
+  .cv-touch {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .cv-back {
+    min-width: 44px;
+    min-height: 44px;
+  }
+  .cv-menu-panel .cv-touch {
+    min-height: 44px;
+  }
+}
+@media (max-width: 1023px) {
+  .cv-menu-panel {
+    position: fixed;
+    right: 0.75rem;
+    left: auto;
+    top: auto;
+    max-width: calc(100vw - 1.5rem);
+  }
+}

package/dist/types-C0PtaO7S.d.ts

@@ -0,0 +1,207 @@
+interface ConversationsUIConfig {
+    apiBaseUrl: string;
+    theme?: ConversationsTheme;
+    features?: ConversationsFeatures;
+}
+interface ConversationsTheme {
+    primaryColor?: string;
+    backgroundColor?: string;
+    bubbleSent?: string;
+    bubbleReceived?: string;
+    textPrimary?: string;
+    textSecondary?: string;
+}
+interface ConversationsFeatures {
+    audio?: boolean;
+    documents?: boolean;
+    emoji?: boolean;
+    darkMode?: boolean;
+}
+interface MessagePayload {
+    id: string;
+    type: 'text' | 'image' | 'video' | 'audio' | 'document' | 'sticker' | 'template';
+    content?: string;
+    caption?: string;
+    mediaUrl?: string;
+    base64?: string;
+    uploadId?: string;
+    mediaId?: string;
+    mimeType?: string;
+    filename?: string;
+    sizeBytes?: number;
+    direction: 'inbound' | 'outbound';
+    sender: 'bot' | 'customer' | 'agent';
+    timestamp: string;
+    status?: 'sent' | 'delivered' | 'read' | 'failed';
+    readAt?: string;
+    agentName?: string | null;
+    templateName?: string;
+    /**
+     * Veredito de moderação vindo do backend — a UI só exibe, nunca calcula. Dicionário no browser
+     * seria peso morto e daria veredito diferente por versão de cliente.
+     *
+     * `null`/ausente = não avaliado (moderação desligada, ou mensagem anterior ao recurso), que é
+     * diferente de avaliado e limpo.
+     */
+    moderation?: {
+        isOffensive: boolean;
+        terms: string[];
+    } | null;
+    isFirstInGroup?: boolean;
+    isLastInGroup?: boolean;
+}
+
+/**
+ * Canal de origem da conversa e o que cada um permite.
+ *
+ * Existe porque as regras que a inbox precisa respeitar não são do WhatsApp, são **de cada canal**:
+ * a janela de sessão, o jeito de reabrir a conversa e o formato do identificador do contato mudam
+ * entre WhatsApp, Messenger, Instagram e chat de site. Tratar a regra do WhatsApp como universal
+ * faria a UI bloquear o composer num chat de site, onde janela nenhuma existe.
+ *
+ * `whatsapp` é o padrão em todo lugar: instalações que ainda não informam canal continuam
+ * funcionando exatamente como antes.
+ */
+declare const CONVERSATION_CHANNEL: {
+    readonly WHATSAPP: "whatsapp";
+    readonly MESSENGER: "messenger";
+    readonly INSTAGRAM: "instagram";
+    readonly WEBCHAT: "webchat";
+};
+type ConversationChannel = (typeof CONVERSATION_CHANNEL)[keyof typeof CONVERSATION_CHANNEL];
+declare const DEFAULT_CONVERSATION_CHANNEL: ConversationChannel;
+/** Como o canal reabre uma conversa fora da janela de sessão. */
+declare const REOPEN_MECHANISM: {
+    readonly TEMPLATE: "template";
+    readonly TAG: "tag";
+    readonly NONE: "none";
+};
+type ReopenMechanism = (typeof REOPEN_MECHANISM)[keyof typeof REOPEN_MECHANISM];
+/** Natureza do identificador do contato — decide como exibi-lo. */
+declare const HANDLE_KIND: {
+    readonly PHONE: "phone";
+    readonly USERNAME: "username";
+    readonly SESSION: "session";
+};
+type HandleKind = (typeof HANDLE_KIND)[keyof typeof HANDLE_KIND];
+type ChannelCapabilities = {
+    readonly label: string;
+    readonly icon: string;
+    readonly hasSessionWindow: boolean;
+    readonly windowHours: number;
+    readonly reopenMechanism: ReopenMechanism;
+    readonly handleKind: HandleKind;
+};
+declare const CHANNEL_CAPABILITIES: Readonly<Record<ConversationChannel, ChannelCapabilities>>;
+declare function capabilitiesOf(channel: ConversationChannel | undefined): ChannelCapabilities;
+declare const CHANNEL_FILTER_ALL = "all";
+type ChannelFilter = ConversationChannel | typeof CHANNEL_FILTER_ALL;
+type ChannelFilterOption = {
+    readonly value: ChannelFilter;
+    readonly label: string;
+};
+/**
+ * Opções derivadas do que existe na lista, não do catálogo inteiro: oferecer Instagram numa conta
+ * que só tem WhatsApp promete um recorte que nunca traz resultado.
+ *
+ * Devolve vazio com menos de dois canais — um filtro de opção única não filtra nada, e a barra só
+ * ocuparia espaço. O host usa isso para esconder a seção.
+ */
+declare function channelFiltersFor(conversations: readonly {
+    readonly channel?: ConversationChannel | undefined;
+}[]): ChannelFilterOption[];
+type FormatContactHandleParams = {
+    readonly handle: string;
+    readonly channel?: ConversationChannel | undefined;
+};
+/**
+ * Exibição do identificador conforme a natureza dele. Formatar tudo como telefone — o que a UI
+ * fazia — transforma um `@perfil` do Instagram em dígitos sem sentido.
+ */
+declare function formatContactHandle(params: FormatContactHandleParams): string;
+/** Bandeira só faz sentido quando o identificador é telefone. */
+declare function contactFlag(params: FormatContactHandleParams): string;
+
+interface ConversationsApi {
+    fetchMessages(conversationId: string, params?: {
+        limit?: number;
+        before?: string;
+    }): Promise<MessagePayload[]>;
+    fetchConversations(params?: {
+        page?: number;
+        limit?: number;
+        waitingHuman?: boolean;
+        search?: string;
+    }): Promise<ConversationSummary[]>;
+    sendMessage(conversationId: string, text: string): Promise<MessagePayload>;
+    sendMedia(conversationId: string, data: {
+        base64: string;
+        mimeType: string;
+        filename: string;
+        caption?: string;
+    }): Promise<MessagePayload>;
+    sendTemplate(conversationId: string, data: {
+        templateName: string;
+        languageCode?: string;
+        bodyParams?: string[];
+    }): Promise<void>;
+    markRead(conversationId: string): Promise<void>;
+    getContext(conversationId: string): Promise<Record<string, unknown>>;
+    getDocuments(conversationId: string, params?: {
+        search?: string;
+        page?: number;
+    }): Promise<ConversationDocument[]>;
+    getDocumentUrl(uploadId: string): Promise<string>;
+    getMediaProxyUrl(mediaId: string): Promise<{
+        mimeType: string;
+        data: string;
+    }>;
+}
+/**
+ * Superfície mínima de stream que o pacote consome — exatamente o que `useConversationRealtime`
+ * usa: assinar 'message', desassinar e fechar. Deliberadamente estrutural em vez de
+ * `EventSource`: sem servidor HTTP não existe `EventSource`, e é isso que impediria alimentar a
+ * inbox com dados mockados em desenvolvimento. Um `EventSource` nativo satisfaz este tipo, então
+ * quem já implementa `SSEProvider` continua válido sem mudança.
+ */
+interface ConversationEventSource {
+    addEventListener(type: string, listener: (event: MessageEvent) => void): void;
+    removeEventListener(type: string, listener: (event: MessageEvent) => void): void;
+    close(): void;
+}
+interface SSEProvider {
+    connectConversationStream(conversationId: string): ConversationEventSource;
+    connectGlobalStream(): ConversationEventSource;
+}
+interface ConversationSummary {
+    id: string;
+    /**
+     * @deprecated Use `contactId` com `channel`. Mantido obrigatório para não quebrar quem já
+     * consome; some quando o segundo canal entrar em produção.
+     */
+    whatsappNumber: string;
+    /** Identificador neutro do contato. Ausente = usa `whatsappNumber`. */
+    contactId?: string;
+    /** Ausente = `whatsapp`, o comportamento de antes desta mudança. */
+    channel?: ConversationChannel;
+    clientName?: string;
+    lastContent?: string;
+    lastDirection?: 'inbound' | 'outbound';
+    lastAt: string;
+    lastInboundAt: string | null;
+    mode: 'bot' | 'human';
+    assignedUserId: string | null;
+    waitingHuman: boolean;
+    unread: number;
+    currentState: string;
+}
+interface ConversationDocument {
+    id: string;
+    filename: string;
+    mimeType: string;
+    sizeBytes: number;
+    source: string;
+    linkedAt: string;
+}
+
+export { CHANNEL_CAPABILITIES as C, DEFAULT_CONVERSATION_CHANNEL as D, type FormatContactHandleParams as F, HANDLE_KIND as H, type MessagePayload as M, REOPEN_MECHANISM as R, type SSEProvider as S, CHANNEL_FILTER_ALL as a, CONVERSATION_CHANNEL as b, type ChannelCapabilities as c, type ChannelFilter as d, type ChannelFilterOption as e, type ConversationChannel as f, type ConversationDocument as g, type ConversationEventSource as h, type ConversationSummary as i, type ConversationsApi as j, type ConversationsFeatures as k, type ConversationsTheme as l, type ConversationsUIConfig as m, type HandleKind as n, type ReopenMechanism as o, capabilitiesOf as p, channelFiltersFor as q, contactFlag as r, formatContactHandle as s };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adatechnology/conversations-ui",
-  "version": "0.1.0-rc.2",
+  "version": "0.1.0-rc.4",
   "description": "WhatsApp conversation UI components — parametrizável por endpoint, tema e feature flags",
   "publishConfig": {
     "access": "public"
@@ -19,13 +19,19 @@
       "import": "./dist/channel/index.js",
       "types": "./dist/channel/index.d.ts"
     },
+    "./preview": {
+      "import": "./dist/preview/index.js",
+      "types": "./dist/preview/index.d.ts"
+    },
     "./styles.css": "./dist/styles.css"
   },
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
+    "clsx": "^2.1.1",
     "lucide-react": "^1.21.0",
-    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.2"
+    "tailwind-merge": "^3.6.0",
+    "@adatechnology/meta-whatsapp-contracts": "0.2.0-rc.4"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -38,13 +44,14 @@
     }
   },
   "devDependencies": {
+    "@types/bun": "1.3.14",
     "tsup": "^8.5.1",
     "typescript": "^5.9.3",
     "@types/react": "^18 || ^19",
     "@types/react-dom": "^18 || ^19"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/styles.css --dts --format esm --external react --external react-dom --external @xyflow/react",
+    "build": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/preview/index.ts src/styles.css --dts --format esm --external react --external react-dom --external @xyflow/react",
     "build:watch": "tsup src/index.ts src/flows/index.ts src/channel/index.ts src/styles.css --watch --dts --format esm --external react --external react-dom --external @xyflow/react",
     "check": "tsc -p tsconfig.json --noEmit",
     "test": "bun test"

package/src/Avatar.tsx

@@ -49,15 +49,30 @@ export function Avatar({ name, avatarUrl, size = 'md', className = '' }: AvatarP
     )
   }
 
-  const initials = getInitials(name)
   const bgColor = getBgColor(name)
 
+  // Sem nome e sem imagem, a silhueta genérica. Iniciais exigem nome — derivá-las de um telefone
+  // produz rótulo sem significado ("+9"), que é pior que assumir o anonimato.
+  if (!name) {
+    return (
+      <div
+        className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white flex-shrink-0 ${className}`}
+        role="img"
+        aria-label="Contato sem nome"
+      >
+        <svg viewBox="0 0 24 24" fill="currentColor" className="h-[60%] w-[60%]" aria-hidden>
+          <path d="M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10Zm0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5Z" />
+        </svg>
+      </div>
+    )
+  }
+
   return (
     <div
       className={`${sizeClass} ${bgColor} rounded-full flex items-center justify-center text-white font-semibold flex-shrink-0 ${className}`}
-      title={name || undefined}
+      title={name}
     >
-      {initials}
+      {getInitials(name)}
     </div>
   )
 }

package/src/ChannelIcon.tsx

@@ -0,0 +1,87 @@
+/**
+ * Marca visual de cada canal.
+ *
+ * SVG em vez de emoji porque emoji não tem logo de marca: 💬 e 📨 não distinguem WhatsApp de
+ * Messenger para quem bate o olho numa fila de conversas. São marcas **simplificadas** desenhadas
+ * com primitivas — reconhecíveis pela forma e pela cor oficial, sem reproduzir o logotipo original.
+ *
+ * `currentColor` não serve aqui: a cor faz parte da identificação do canal.
+ */
+
+import { CONVERSATION_CHANNEL, capabilitiesOf, type ConversationChannel } from './conversationChannel'
+
+export const CHANNEL_BRAND_COLOR: Readonly<Record<ConversationChannel, string>> = {
+  [CONVERSATION_CHANNEL.WHATSAPP]: '#25D366',
+  [CONVERSATION_CHANNEL.MESSENGER]: '#0084FF',
+  [CONVERSATION_CHANNEL.INSTAGRAM]: '#E4405F',
+  [CONVERSATION_CHANNEL.WEBCHAT]: '#64748B',
+}
+
+export interface ChannelIconProps {
+  channel?: ConversationChannel | undefined
+  size?: number
+  className?: string
+}
+
+function Glyph({ channel }: { channel: ConversationChannel }) {
+  const color = CHANNEL_BRAND_COLOR[channel]
+
+  if (channel === CONVERSATION_CHANNEL.WHATSAPP) {
+    return (
+      <>
+        <circle cx="12" cy="12" r="11" fill={color} />
+        {/* Handset estilizado, o traço que identifica a marca à distância. */}
+        <path
+          d="M8.6 7.2c.3-.1.7 0 .9.3l1 1.6c.2.3.1.7-.1.9l-.7.7c.6 1.3 1.6 2.3 2.9 2.9l.7-.7c.2-.2.6-.3.9-.1l1.6 1c.3.2.4.6.3.9-.4 1-1.4 1.6-2.4 1.4-3-.5-5.4-2.9-5.9-5.9-.2-1 .4-2 1.4-2.4Z"
+          fill="#fff"
+        />
+      </>
+    )
+  }
+
+  if (channel === CONVERSATION_CHANNEL.MESSENGER) {
+    return (
+      <>
+        <circle cx="12" cy="12" r="11" fill={color} />
+        {/* Raio do Messenger. */}
+        <path d="M6.5 15.5 11 10.8l2.4 2.4L17.5 9l-4.6 4.9-2.4-2.4-4 4Z" fill="#fff" stroke="#fff" strokeWidth="1.4" strokeLinejoin="round" />
+      </>
+    )
+  }
+
+  if (channel === CONVERSATION_CHANNEL.INSTAGRAM) {
+    return (
+      <>
+        <rect x="2" y="2" width="20" height="20" rx="6" fill={color} />
+        <rect x="6.5" y="6.5" width="11" height="11" rx="3.5" fill="none" stroke="#fff" strokeWidth="1.6" />
+        <circle cx="12" cy="12" r="2.6" fill="none" stroke="#fff" strokeWidth="1.6" />
+        <circle cx="16.4" cy="7.6" r="1" fill="#fff" />
+      </>
+    )
+  }
+
+  return (
+    <>
+      <circle cx="12" cy="12" r="11" fill={color} />
+      <path d="M6.5 8.5h11v7h-5.5L8.5 18v-2.5h-2v-7Z" fill="#fff" />
+    </>
+  )
+}
+
+export function ChannelIcon({ channel, size = 14, className = '' }: ChannelIconProps) {
+  const resolved: ConversationChannel = channel ?? CONVERSATION_CHANNEL.WHATSAPP
+  const { label } = capabilitiesOf(resolved)
+
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      width={size}
+      height={size}
+      className={`inline-block shrink-0 ${className}`.trim()}
+      role="img"
+      aria-label={label}
+    >
+      <Glyph channel={resolved} />
+    </svg>
+  )
+}

package/src/ConversationContextPanel.tsx

@@ -0,0 +1,106 @@
+/**
+ * "Suas Seleções": o que o bot já coletou na conversa. Para o atendente que assume no meio, é a
+ * diferença entre ler o transcript inteiro e ver o estado em duas linhas.
+ *
+ * O pacote não interpreta o contexto — ele é `Record<string, unknown>` e cada produto nomeia as
+ * próprias chaves. O host traduz para `entries`; aqui só se decide como mostrar.
+ */
+
+import { useState } from 'react'
+
+import { cn } from './lib/cn'
+import { useIsNarrow } from './useIsNarrow'
+
+export interface ConversationContextEntry {
+  key: string
+  label: string
+  value?: string | undefined
+  icon?: string
+}
+
+export interface ConversationContextPanelLabels {
+  title: string
+  empty: string
+}
+
+export const DEFAULT_CONVERSATION_CONTEXT_LABELS: ConversationContextPanelLabels = {
+  title: '📋 Suas Seleções',
+  empty: 'Nada coletado ainda nesta conversa.',
+}
+
+export interface ConversationContextPanelClassNames {
+  root: string
+  toggle: string
+  counter: string
+  body: string
+}
+
+export interface ConversationContextPanelProps {
+  entries: readonly ConversationContextEntry[]
+  labels?: Partial<ConversationContextPanelLabels>
+  className?: string
+  classNames?: Partial<ConversationContextPanelClassNames>
+}
+
+export function ConversationContextPanel({
+  entries,
+  labels: labelsOverride,
+  className,
+  classNames,
+}: ConversationContextPanelProps) {
+  const labels = { ...DEFAULT_CONVERSATION_CONTEXT_LABELS, ...labelsOverride }
+  const filled = entries.filter((entry) => Boolean(entry.value))
+
+  // Abre sozinho só quando há algo coletado: um painel de seis traços ocupa a altura da conversa
+  // sem informar nada. O contador continua visível fechado, que é o dado útil de relance.
+  //
+  // `undefined` = usuário ainda não mexeu. Guardar só um booleano não serve: o contexto chega
+  // depois da montagem, então o estado inicial seria calculado com a lista vazia e o painel ficaria
+  // fechado mesmo com dados.
+  const isNarrow = useIsNarrow()
+  const [manualOpen, setManualOpen] = useState<boolean | undefined>(undefined)
+  // No celular nasce fechado mesmo com dados: aberto, o painel consome ~150px da conversa. O
+  // contador no cabeçalho já entrega a informação de relance.
+  const open = manualOpen ?? (!isNarrow && filled.length > 0)
+
+  return (
+    <section className={cn('border-b', classNames?.root, className)}>
+      <button
+        type="button"
+        onClick={() => setManualOpen(!open)}
+        aria-expanded={open}
+        className={cn('flex w-full items-center gap-2 px-4 py-3 text-left text-sm font-medium', classNames?.toggle)}
+      >
+        <span aria-hidden className="text-xs">
+          {open ? '▾' : '▸'}
+        </span>
+        <span>{labels.title}</span>
+        <span className={cn('rounded-full bg-gray-200 px-2 text-xs dark:bg-gray-700', classNames?.counter)}>
+          {filled.length}/{entries.length}
+        </span>
+      </button>
+
+      {open ? (
+        <div className={cn('px-4 pb-3', classNames?.body)}>
+          {entries.length === 0 ? (
+            <p className="text-xs text-gray-500">{labels.empty}</p>
+          ) : (
+            <dl className="grid grid-cols-2 gap-2 text-xs">
+              {entries.map((entry) => (
+                <div key={entry.key} className="min-w-0">
+                  <dt className="truncate text-gray-500">
+                    {entry.icon ? `${entry.icon} ` : ''}
+                    {entry.label}
+                  </dt>
+                  <dd className="truncate font-medium">
+                    {entry.value ? <span className="text-green-700 dark:text-green-400">✓ {entry.value}</span> : '—'}
+                  </dd>
+                </div>
+              ))}
+            </dl>
+          )}
+        </div>
+      ) : null}
+    </section>
+  )
+}