@aurea-uds/react 0.18.0 → 0.22.0

package/dist/actions.d.ts

@@ -39,9 +39,8 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Re
     rel?: string;
     download?: boolean | string;
     /**
-     * @deprecated Use `<Toggle>` instead. Pesquisado em 18/08/2026 nas doze referências (MUI,
-     * Fluent 2, React Aria, Spectrum, Carbon, Radix/Base UI, shadcn, ReUI, PrimeReact, HeroUI,
-     * Cedar, APG): **nenhuma** põe o estado de pressionado no botão comum — todas têm um
+     * @deprecated Use `<Toggle>` instead. Pesquisado em 18/08/2026 nas doze referências (entre
+     * elas o motor Base UI e o APG): **nenhuma** põe o estado de pressionado no botão comum — todas têm um
      * componente separado, e o nosso é o `Toggle`. Manter os dois é dois caminhos para a mesma
      * coisa, que é o "qual eu uso?" que denuncia recurso duplicado.
      * A diferença de verdade: aqui VOCÊ guarda o estado e isto só pinta e anuncia; o `Toggle`

package/dist/actions.js

@@ -58,8 +58,8 @@ export const Button = forwardRef(function Button({ variant, appearance, tone, si
     // 🔴 OCUPADO TROCA, NÃO ACRESCENTA (01/10/2026, achado pelo Victor no aureauds.dev): a rodinha
     // entrava ANTES do ícone, e no `IconButton` — 36 de largura fixa — rodinha e glifo não cabiam:
     // medido no catálogo, a rodinha começava 4px FORA do botão, à esquerda, com o disquete ainda ao
-    // lado. O HeroUI troca (exemplo "Loading State" da doc do Button 3.2.6:
-    // `isPending ? <Spinner/> : <Paperclip/>`). Aqui também: ocupado, a rodinha toma o lugar do ícone
+    // lado. A referência troca (no exemplo de estado ocupado da doc do botão dela, a rodinha
+    // entra no lugar do ícone). Aqui também: ocupado, a rodinha toma o lugar do ícone
     // da frente; e sem conteúdo (o `IconButton` ocupado) o invólucro vazio some, senão o `gap` dele
     // empurraria a rodinha para fora do centro. Fora do estado ocupado o HTML é o mesmo de antes.
     const temConteudo = children != null && children !== false;
@@ -67,7 +67,7 @@ export const Button = forwardRef(function Button({ variant, appearance, tone, si
     // INERTE ≠ DESABILITADO, e a diferença é medida (M4, 13/08/2026): `disabled` tira o botão da
     // ordem de foco, então quem navega por teclado nunca alcança a explicação de POR QUE não dá — e
     // "não dá porque você não tem permissão" é justamente o caso em que a explicação é tudo. O
-    // embrulho de <span> que o MUI documenta resolve o ponteiro e não resolve o teclado (span nasce
+    // embrulho de <span> que uma das referências documenta resolve o ponteiro e não resolve o teclado (span nasce
     // com tabIndex -1, medido). Com `aria-disabled` o botão continua focável e anunciado como
     // desabilitado, e é ESTE componente que tem de barrar a ativação — o atributo é só semântica.
     // Mesmo remendo do AUD-0004, que já barrava o link desabilitado; aqui ele alcança o <button>.
@@ -118,7 +118,7 @@ function temConteudoVisivel(children) {
 // ESTE é o toggle da Aurea. O `pressed` do `Button` está DEPRECIADO em favor dele (0.4.0,
 // sai na 1.0): as doze referências pesquisadas em 18/08/2026 têm componente separado, e
 // nenhuma põe o estado no botão comum.
-// E a REGRA QUE FALTAVA ESTAR ESCRITA AQUI, do Adobe Spectrum e do APG: **o rótulo não muda
+// E a REGRA QUE FALTAVA ESTAR ESCRITA AQUI, de uma das referências e do APG: **o rótulo não muda
 // entre os estados**. Se o texto vira "Mute"/"Unmute" ou "Play"/"Pause", não é toggle — é
 // botão de ação, porque quem lê tela ouve o rótulo NOVO e o estado ao mesmo tempo e não sabe
 // se o botão descreve o que é ou o que fará.
@@ -145,7 +145,7 @@ export const ThemeToggle = forwardRef(function ThemeToggle({ className, ...props
     const s = useAureaStrings();
     const escuro = theme === "dark";
     // O corpo do `IconButton`, escrito aqui só para o glifo sair na forma CHEIA (ADR-0053: a lua e o
-    // sol cheios, como os do Carbon aprovados pela imagem em 25/09/2026). O `IconButton` público não
+    // sol cheios, como os do conjunto de ícones anterior, aprovados pela imagem em 25/09/2026). O `IconButton` público não
     // tem peso de ícone.
     return _jsx(Button, { ref: ref, variant: "ghost", className: cx("btn-icon", escuro ? "theme-toggle-sun" : "theme-toggle-moon", className), "aria-label": escuro ? s.themeToLight : s.themeToDark, onClick: toggleTheme, ...props, children: _jsx(Icon, { name: escuro ? "sun" : "moon", weight: "fill" }) });
 });

package/dist/agents.js

@@ -9,13 +9,13 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // `DIRECTION.md` se declara "ilustrativo, não-vinculante", então tirar dali uma
 // categoria é decisão, não dedução.
 //
-// PROCEDÊNCIA (BUILDING.md passo 2): estes três saem de `agents-kit-main`
-// (`components/agents-ui/agent-card.tsx`, `agent-status-panel.tsx`) e do `DetailsView/`
-// do `agent-prism-main`. As sete referências antigas NÃO têm esta família — foi por
+// PROCEDÊNCIA (BUILDING.md passo 2): estes três saem de uma referência de agentes (o cartão
+// de agente e o painel de estado) e da vista de detalhes
+// de outra. As sete referências antigas NÃO têm esta família — foi por
 // isso que a Parte H ficou bloqueada até 08/08/2026.
 //
-// Escopo menor que o da referência (passo 5): o `AgentCard` de lá despacha ações por
-// STRING (`onAction: (action: string) => void`), o que troca o compilador por um acordo
+// Escopo menor que o da referência (passo 5): o cartão de lá despacha ações por
+// STRING (uma função que recebe o nome da ação como texto), o que troca o compilador por um acordo
 // verbal. Aqui as ações entram como nó, e quem monta o botão sabe o que ele faz.
 import React from "react";
 import { cx, useAureaStrings } from "./internal.js";
@@ -45,7 +45,7 @@ export function AgentCard({ name, description, avatarSrc, model, state, capabili
     return _jsxs("article", { className: cx("card", "agent-card", className), ...props, children: [_jsxs("header", { className: "agent-card-head", children: [_jsx(Avatar, { src: avatarSrc, alt: name, fallback: name.slice(0, 2), size: "md" }), _jsxs("div", { className: "agent-card-id", children: [_jsx("strong", { children: name }), model && _jsx("span", { className: "hint", children: model })] }), state && _jsx(AgentStatus, { state: state })] }), description && _jsx("p", { className: "agent-card-desc", children: description }), !!capabilities?.length && _jsx("ul", { className: "agent-caps", children: capabilities.map(c => _jsxs("li", { className: "agent-cap", title: c.description, children: [c.icon && _jsx(Icon, { name: c.icon, size: "sm" }), _jsx("span", { children: c.name })] }, c.name)) }), actions && _jsx("footer", { className: "agent-card-actions", children: actions })] });
 }
 // AgentInspector — o detalhe: configuração, ferramentas, instruções.
-// A anatomia é a do `DetailsView/` do `agent-prism`: cabeçalho + seções rotuladas, com
+// A anatomia é a da vista de detalhes de uma das referências de agentes: cabeçalho + seções rotuladas, com
 // o valor cru disponível. Aqui as seções são `DataList`, que já existe e já tem pele —
 // e o corpo livre entra como filho, para inspecionar o que a ficha não previu.
 //
@@ -64,10 +64,10 @@ export function AgentInspector({ title, sections, children, className, ...props
 //
 // O passo que tem corpo é um `<details>` nativo, o mesmo idioma do `Accordion`: dobrar
 // e desdobrar já é comportamento de plataforma, com teclado e ARIA, e a referência
-// gasta um `Collapsible` de biblioteca para chegar no mesmo lugar.
+// gasta um componente dobrável de biblioteca para chegar no mesmo lugar.
 //
 // `running` marca `aria-busy` na região INTEIRA em vez de animar o texto. A referência
-// usa um `TextShimmer` — animação em cima do rótulo — e isso é decoração que um leitor
+// usa um brilho que corre pelo texto — animação em cima do rótulo — e isso é decoração que um leitor
 // de tela não alcança e que `prefers-reduced-motion` teria de desfazer.
 //
 // Entrada e saída são `group` NOMEADO, e não `<h3>` — mesmo defeito e mesma correção do
@@ -86,10 +86,10 @@ const TAREFA = {
 };
 // TaskQueue — a fila de trabalho.
 //
-// ESCOPO MENOR QUE O DA REFERÊNCIA, e por fronteira, não por preguiça: o `AgentTask` de
+// ESCOPO MENOR QUE O DA REFERÊNCIA, e por fronteira, não por preguiça: a tarefa de
 // lá tem 15 campos, e cinco deles pertencem a OUTROS componentes desta mesma parte —
-// `metrics.tokens` e `metrics.cost` são o `ModelUsage` (H11) e o `CostMeter` (H12),
-// `checkpoints` é o `TraceTimeline` (H9), `assignee` é o `AgentCard` (H1). Absorvê-los
+// a contagem de tokens e o custo são o `ModelUsage` (H11) e o `CostMeter` (H12),
+// os pontos de controle são o `TraceTimeline` (H9), o responsável é o `AgentCard` (H1). Absorvê-los
 // aqui faria a fila responder por quatro contratos e nenhum deles direito.
 export function TaskQueue({ tasks, label, onRetry, className, ...props }) {
     const s = useAureaStrings();
@@ -150,7 +150,7 @@ export function EventStream({ events, label, follow, className, ...props }) {
 // (end-start)/(max-min) de largura.
 //
 // O que NÃO entrou: as ONZE cores por categoria de span da referência
-// (`llm_call`, `tool_execution`, `retrieval`…). Cor por categoria numa paleta travada é
+// (chamada de modelo, execução de ferramenta, busca…). Cor por categoria numa paleta travada é
 // o mesmo defeito que o H.a recusou; `kind` entra como TEXTO, que é legível também por
 // quem não distingue as cores.
 export function TraceTimeline({ spans, label, className, ...props }) {
@@ -174,24 +174,24 @@ export function HealthMatrix({ entries, label, className, ...props }) {
 // ─────────────────────────────────────────────────────────────────────────────
 // H.e — custo e memória: quanto se consumiu, contra que teto, e o que ficou guardado.
 //
-// PROCEDÊNCIA: `langfuse-main/web/src/features/dashboard/components/` — o
-// `ModelUsageChart.tsx` (a métrica total no topo e a quebra por modelo), o
-// `ModelCostTable.tsx` (as colunas modelo × tokens × custo, com o número à direita), o
-// `TotalMetric.tsx` (número grande + descrição, e é UMA linha de arranjo) e o
-// `cards/BarListChartArea.tsx` (a lista de barras horizontais com rótulo de valor).
-// Mais `agent-prism-main/packages/ui/src/components/{TokensBadge,PriceBadge}.tsx` — o par
-// de unidades desta família, contagem e preço — e `agents-kit-main/components/agents-ui/
-// agent-status-panel.tsx`, que traz a tarifa por 1k tokens com entrada e saída separadas.
+// PROCEDÊNCIA: o painel de uma referência de observabilidade de LLM — o
+// gráfico de uso por modelo (a métrica total no topo e a quebra por modelo), a
+// tabela de custo por modelo (as colunas modelo × tokens × custo, com o número à direita), a
+// métrica total (número grande + descrição, e é UMA linha de arranjo) e a
+// lista de barras (a lista de barras horizontais com rótulo de valor).
+// Mais os selos de tokens e de preço de uma referência de agentes — o par
+// de unidades desta família, contagem e preço — e o painel de estado de agente de outra,
+// que traz a tarifa por 1k tokens com entrada e saída separadas.
 //
 // O `MemoryLedger` NÃO TEM REFERÊNCIA, e é o caso declarado no `BUILDING.md` §1: nasce de
 // pesquisa registrada no `REFERENCES.md` e de composição. A pesquisa está lá com data.
 // Formatação de número: `Intl` é a plataforma, e o locale entra como prop com default
 // FIXO. O default fixo é o que mantém a saída determinística no SSR do catálogo e no gate
 // de pixel — locale do ambiente mudaria o texto entre a máquina e a CI. A referência faz
-// igual: o `costFormatter` do langfuse é `Intl.NumberFormat("en-US")` pregado, medido em
-// `web/src/utils/numbers.ts`.
+// igual: o formatador de custo dela é `Intl.NumberFormat("en-US")` pregado, medido no
+// fonte dela.
 const compacto = (n, locale) => new Intl.NumberFormat(locale, { notation: "compact", maximumFractionDigits: 2 }).format(n);
-// Duas casas fixas é o que o `costFormatter` da referência usa, e aqui isso MENTE: custo de
+// Duas casas fixas é o que o formatador de custo da referência usa, e aqui isso MENTE: custo de
 // modelo cai em fração de centavo o tempo todo, e "$0.00" para um gasto real de US$ 0,004
 // apaga o número justamente no componente que existe para vigiá-lo.
 const dinheiro = (n, currency, locale) => new Intl.NumberFormat(locale, { style: "currency", currency, minimumFractionDigits: 2, maximumFractionDigits: n !== 0 && Math.abs(n) < 0.01 ? 6 : 2 }).format(n);
@@ -202,8 +202,8 @@ const dinheiro = (n, currency, locale) => new Intl.NumberFormat(locale, { style:
 // levou quanto". No `CostMeter` o teto vem de fora, e a pergunta é "quanto ainda cabe".
 // Trocar um pelo outro é mostrar orçamento onde não existe orçamento nenhum.
 //
-// ESCOPO MENOR QUE O DA REFERÊNCIA (passo 5): as quatro abas de lá (`Cost by model`,
-// `Cost by type`, `Usage by model`, `Usage by type`) existem porque são quatro CONSULTAS
+// ESCOPO MENOR QUE O DA REFERÊNCIA (passo 5): as quatro abas de lá (custo e uso,
+// cada um por modelo e por tipo) existem porque são quatro CONSULTAS
 // diferentes no produto dela. Aqui a dimensão é uma prop e os dados chegam prontos. Também
 // ficaram fora o seletor de modelos em popover e a série temporal — a série é o `Chart`,
 // que já existe, e embutir um segundo gráfico aqui duplicaria aquele contrato.
@@ -212,7 +212,7 @@ export function ModelUsage({ entries, metric = "tokens", label, currency = "USD"
     const valor = (e) => (metric === "cost" ? e.cost : metric === "requests" ? e.requests : e.tokens) ?? 0;
     const fmt = (n) => metric === "cost" ? dinheiro(n, currency, locale) : compacto(n, locale);
     const total = entries.reduce((a, e) => a + valor(e), 0);
-    // Ordem decrescente pela métrica, como a referência (`orderBy` em `ModelCostTable`): uma
+    // Ordem decrescente pela métrica, como a referência (a ordenação da tabela de custo dela): uma
     // lista de barras fora de ordem obriga a varrer tudo para achar o maior, que é a única
     // coisa que ela existe para responder de relance. Cópia, não `sort` no array de quem chamou.
     const linhas = [...entries].sort((a, b) => valor(b) - valor(a));
@@ -223,10 +223,10 @@ export function ModelUsage({ entries, metric = "tokens", label, currency = "USD"
 }
 // CostMeter — o gasto contra um TETO.
 //
-// Os dois limites são os do LiteLLM, que é o padrão de mercado de controle de custo de LLM
+// Os dois limites são os do padrão de mercado de controle de custo de LLM,
 // medido em 09/08/2026 (pesquisa registrada no `REFERENCES.md`): o limite RÍGIDO bloqueia,
-// o limite BRANDO só avisa. Nenhuma das nove referências locais tem orçamento — o langfuse
-// OSS mostra custo e não teto —, então isto veio pelo passo 4 do `BUILDING.md`, pesquisado
+// o limite BRANDO só avisa. Nenhuma das nove referências locais tem orçamento — a referência
+// de observabilidade, na versão aberta, mostra custo e não teto —, então isto veio pelo passo 4 do `BUILDING.md`, pesquisado
 // antes de escrever, e não de memória.
 //
 // Sem `softLimit` NÃO EXISTE estado de aviso. A tentação era derivar um em 80% do teto;
@@ -244,9 +244,9 @@ const LANCAMENTO = {
 };
 // MemoryLedger — o que o agente guardou, esqueceu ou lembrou, e DE ONDE veio.
 //
-// É o único da Parte H sem referência no mundo aberto: o ADE do Letta só abre o servidor, o
-// OpenMemory do mem0 está sendo descontinuado e o painel do mem0 é só na nuvem. Medido em
-// 08/08/2026 e reconfirmado em 09/08.
+// É o único da Parte H sem referência no mundo aberto: dos produtos de memória de agentes
+// pesquisados, um só abre o servidor, e o outro tem a versão aberta sendo descontinuada e o
+// painel só na nuvem. Medido em 08/08/2026 e reconfirmado em 09/08.
 //
 // Livro-razão é APENDE-SÓ, e é isso que o separa de uma lista de memórias: `forgotten` não
 // tira a linha, registra o esquecimento. Uma tela que apaga a linha ao esquecer perde
@@ -271,8 +271,8 @@ const RECADO = {
 // tem um remetente e um destinatário, e é a passagem entre os dois que se está lendo. Um
 // `MessageList` com dois autores não diz quem entregou o quê a quem.
 //
-// O que NÃO entrou: as seis cores por intenção do `agent-routing-hub` (`technical` ciano,
-// `billing` âmbar, `sales` ardósia…). É a TERCEIRA vez que esta parte recusa a mesma coisa —
+// O que NÃO entrou: as seis cores por intenção do painel de encaminhamento da referência (ciano,
+// âmbar, ardósia…). É a TERCEIRA vez que esta parte recusa a mesma coisa —
 // depois das onze de span no H.d e das seis de estado no H.a. Cor por categoria numa paleta
 // travada não é legível para quem não separa as cores. A `kind` entra como palavra, num selo.
 export function InterAgentMessage({ messages, label, className, ...props }) {
@@ -284,7 +284,7 @@ export function InterAgentMessage({ messages, label, className, ...props }) {
 }
 // AutomationCard — a regra que roda sozinha: QUANDO isto, ENTÃO aquilo.
 //
-// A anatomia é a do `AutomationSidebar` do langfuse, medida: nome, gatilho (fonte de evento) e
+// A anatomia é a da lateral de automações da referência de observabilidade, medida: nome, gatilho (fonte de evento) e
 // ação (tipo), mais o estado ativo/inativo. É isso que separa este cartão do `AgentCard`, que é
 // identidade, e da `TaskQueue`, que é trabalho enfileirado: uma automação é uma REGRA, e regra
 // é uma condição e uma consequência.

package/dist/calendar.js

@@ -13,9 +13,9 @@ import { cx } from "./internal.js";
 const NOMES = { months: "calendar-months", month_caption: "calendar-caption" };
 export function Calendar({ label, className, classNames, ...props }) {
     const grade = _jsx(DayPicker
-    // Grade cheia por padrão, como o shadcn: mês com buraco nas pontas treme ao trocar de mês.
+    // Grade cheia por padrão, como naquela referência: mês com buraco nas pontas treme ao trocar de mês.
     , { 
-        // Grade cheia por padrão, como o shadcn: mês com buraco nas pontas treme ao trocar de mês.
+        // Grade cheia por padrão, como naquela referência: mês com buraco nas pontas treme ao trocar de mês.
         showOutsideDays: true, ...props, classNames: { ...NOMES, root: cx("calendar", className), ...classNames } });
     // O motor já nomeia a GRADE com o mês ("August 2026"). O que ele não sabe é para que serve
     // ESTE calendário — "de" e "até" lado a lado soariam os dois "August 2026". É o que `label`

package/dist/chart.js

@@ -4,17 +4,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // componente que precisa do `recharts`, que é peer OPCIONAL. Se morasse em data-display.tsx,
 // quem importa Table baixaria um motor de gráfico inteiro — que é o achado A5 visto de perto.
 //
-// NÃO ESCREVEMOS MOTOR DE GRÁFICO. Duas das quatro referências (shadcn/ui e Untitled UI React)
+// NÃO ESCREVEMOS MOTOR DE GRÁFICO. Duas das quatro referências
 // envelopam o MESMO motor, o Recharts, e nenhuma das quatro desenha eixo à mão. O que é nosso
 // aqui é só a pele: a caixa, o tooltip e a legenda. Escala, eixo, curva e interação são dele.
 //
 // O QUE FICOU DE FORA, e por quê (BUILDING.md passo 5 — escopo menor que o da referência):
-//   • o `ChartConfig` do shadcn (mapa dataKey → {label, color, theme}). MEDIDO em 01/08/2026: o
+//   • o `ChartConfig` de uma delas (mapa dataKey → {label, color, theme}). MEDIDO em 01/08/2026: o
 //     payload que o Recharts entrega ao `content` já traz `name` (do prop `name` da série) e
 //     `color` resolvido. O objeto de configuração é indireção para reconstruir o que já chega.
 //     E o eixo `theme:{light,dark}` não existe aqui: `var(--chart-2)` já troca com o data-theme.
 //   • o par `ChartTooltip`/`ChartTooltipContent`. No Recharts 2 o filho tinha de ser o
-//     componente DELES, o que forçava o shadcn a reexportar o primitivo e pôr a pele no
+//     componente DELES, o que forçava essa referência a reexportar o primitivo e pôr a pele no
 //     `content`. MEDIDO no 3.10.1: um componente NOSSO como filho é reconhecido. Então é uma
 //     peça só, não duas.
 //   • prop de altura. Dimensão não é número (check 23): a caixa mede pelo CSS (`.chart`), e

package/dist/communication.d.ts

@@ -1,6 +1,17 @@
 import React, { type ReactNode } from "react";
 import { type IconName } from "./system.js";
 import { type BadgeVariant } from "./feedback.js";
+export type ChatDirection = "incoming" | "outgoing";
+export interface MessageAttachment {
+    id: string;
+    kind: "image" | "video" | "file";
+    src?: string;
+    alt?: string;
+    name?: string;
+    bytes?: number;
+    duration?: number;
+    href?: string;
+}
 export interface ChatMessage {
     id: string;
     body: ReactNode;
@@ -14,18 +25,60 @@ export interface ChatMessage {
         label: ReactNode;
         variant?: BadgeVariant;
     };
+    direction?: ChatDirection;
+    attachments?: MessageAttachment[];
+    replyTo?: {
+        id: string;
+        author?: ReactNode;
+        body: ReactNode;
+    };
+    forwardedFrom?: ReactNode;
+    edited?: boolean;
+    day?: string;
 }
-export declare function MessageList({ messages, label, className }: {
+export interface MessageListProps {
     messages: ChatMessage[];
     label?: string;
     className?: string;
-}): React.JSX.Element;
-export declare function MessageComposer({ onSend, placeholder, label, icon, sendLabel, disabled, className }: {
-    onSend: (text: string) => void;
+    hasMoreBefore?: boolean;
+    hasMoreAfter?: boolean;
+    loadingBefore?: boolean;
+    loadingAfter?: boolean;
+    onReachStart?: () => void;
+    onReachEnd?: () => void;
+    onOpenAttachment?: (message: ChatMessage, attachment: MessageAttachment) => void;
+}
+export declare function MessageList({ messages, label, className, hasMoreBefore, hasMoreAfter, loadingBefore, loadingAfter, onReachStart, onReachEnd, onOpenAttachment }: MessageListProps): React.JSX.Element;
+export interface ComposerReply {
+    id: string;
+    author?: ReactNode;
+    body: ReactNode;
+}
+export interface ComposerEdit {
+    id: string;
+    body: string;
+}
+export interface ComposerAttach {
+    accept?: string;
+    maxSize?: number;
+    multiple?: boolean;
+}
+export interface MessageSendDetails {
+    files: File[];
+    replyToId?: string;
+    editingId?: string;
+}
+export declare function MessageComposer({ onSend, placeholder, label, icon, sendLabel, disabled, className, attach, replyTo, onCancelReply, editing, onCancelEdit }: {
+    onSend: (text: string, details?: MessageSendDetails) => void;
     placeholder?: string;
     label?: string;
     icon?: IconName;
     sendLabel?: string;
     disabled?: boolean;
     className?: string;
+    attach?: boolean | ComposerAttach;
+    replyTo?: ComposerReply | null;
+    onCancelReply?: () => void;
+    editing?: ComposerEdit | null;
+    onCancelEdit?: () => void;
 }): React.JSX.Element;

package/dist/communication.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
 // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
@@ -9,21 +9,244 @@ import { InputGroup, InputGroupAddon } from "./inputs.js";
 import { Icon } from "./system.js";
 import { IconButton } from "./actions.js";
 import { Avatar } from "./identity.js";
-import { Badge } from "./feedback.js";
-export function MessageList({ messages, label, className }) {
+import { Badge, Spinner } from "./feedback.js";
+import { formatSize, matchesAccept } from "./file-input.js";
+// A AN-02 põe álbum na mensagem com a `Gallery` que já existe. `media` mora no "resto" do DAG,
+// como este módulo, e não importa `communication` — não há ciclo.
+import { Gallery } from "./media.js";
+// O contêiner que rola é o ancestral com `overflow` de rolagem, ou a página.
+function rolador(el) {
+    for (let p = el.parentElement; p; p = p.parentElement) {
+        const o = getComputedStyle(p).overflowY;
+        if (o === "auto" || o === "scroll" || o === "overlay")
+            return p;
+    }
+    return document.scrollingElement ?? document.documentElement;
+}
+const ehPagina = (sc) => sc === document.scrollingElement || sc === document.documentElement;
+function useVigia(alvo, ligado, avisar, deps) {
+    const cb = React.useRef(avisar);
+    cb.current = avisar;
+    React.useEffect(() => {
+        const el = alvo.current;
+        if (!el || !ligado || typeof IntersectionObserver === "undefined")
+            return;
+        const sc = rolador(el);
+        const obs = new IntersectionObserver(es => { if (es.some(e => e.isIntersecting))
+            cb.current?.(); }, { root: ehPagina(sc) ? null : sc });
+        obs.observe(el);
+        return () => obs.disconnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ligado, ...deps]);
+}
+export function MessageList({ messages, label, className, hasMoreBefore, hasMoreAfter, loadingBefore, loadingAfter, onReachStart, onReachEnd, onOpenAttachment }) {
     const s = useAureaStrings();
-    return _jsx("div", { className: cx("stack", className), role: "log", "aria-live": "polite", "aria-label": label ?? s.chatLabel, children: messages.map(m => _jsxs("div", { className: "message", children: [m.avatar ? _jsx(Avatar, { src: m.avatar.src, fallback: m.avatar.fallback }) : _jsx("span", {}), _jsxs("div", { className: "message-bubble", children: [(m.author || m.time) && _jsxs("div", { className: "label", children: [_jsx("span", { children: m.author }), m.time && _jsx("span", { className: "hint", children: m.time })] }), m.body, m.status && _jsx("div", { className: "message-status", children: _jsxs(Badge, { variant: m.status.variant, children: [_jsx("i", { className: "status-dot" }), m.status.label] }) })] })] }, m.id)) });
+    const janela = !!onReachStart || !!onReachEnd;
+    const raiz = React.useRef(null);
+    const topo = React.useRef(null);
+    const fim = React.useRef(null);
+    const ancora = React.useRef(null);
+    const noFim = React.useRef(true);
+    const ultimoAntes = React.useRef(undefined);
+    const montou = React.useRef(false);
+    const [anuncio, setAnuncio] = React.useState("");
+    const hasMoreAfterRef = React.useRef(hasMoreAfter);
+    hasMoreAfterRef.current = hasMoreAfter;
+    // A posição de quem está no alto da tela, e se a última está à vista. Lida a cada rolagem e
+    // depois de cada troca: entre uma troca e outra, só a rolagem move as mensagens.
+    const medir = React.useCallback(() => {
+        const el = raiz.current;
+        if (!el)
+            return;
+        const sc = rolador(el), pag = ehPagina(sc);
+        const alto = pag ? 0 : sc.getBoundingClientRect().top, baixo = pag ? window.innerHeight : sc.getBoundingClientRect().bottom;
+        const itens = el.querySelectorAll("[data-message-id]");
+        // A âncora é a primeira que COMEÇA dentro da tela, e não a primeira que aparece: medido no banco
+        // em 04/10/2026, um álbum cortado no alto cresceu 480 px quando as fotos chegaram — para baixo
+        // dele —, o topo dele não andou, e a conversa inteira desceu sem a conta perceber. Se nenhuma
+        // começa na tela (uma mensagem maior que ela), vale a que está à vista.
+        ancora.current = null;
+        let vista;
+        for (const it of Array.from(itens)) {
+            const r = it.getBoundingClientRect();
+            if (r.bottom <= alto)
+                continue;
+            vista ??= it;
+            if (r.top >= alto) {
+                ancora.current = { id: it.dataset.messageId, top: r.top };
+                break;
+            }
+        }
+        if (!ancora.current && vista)
+            ancora.current = { id: vista.dataset.messageId, top: vista.getBoundingClientRect().top };
+        const ultimo = itens[itens.length - 1];
+        noFim.current = !ultimo || ultimo.getBoundingClientRect().bottom <= baixo + 1;
+    }, []);
+    React.useEffect(() => {
+        if (!janela || !raiz.current)
+            return;
+        const sc = rolador(raiz.current), alvo = ehPagina(sc) ? window : sc;
+        alvo.addEventListener("scroll", medir, { passive: true });
+        return () => alvo.removeEventListener("scroll", medir);
+    }, [janela, medir]);
+    const ultimoId = messages[messages.length - 1]?.id;
+    React.useLayoutEffect(() => {
+        const el = raiz.current;
+        if (!janela || !el) {
+            ultimoAntes.current = ultimoId;
+            return;
+        }
+        const sc = rolador(el);
+        const irAoFim = () => { sc.scrollTop = sc.scrollHeight; };
+        const antes = ultimoAntes.current;
+        // Chegou mensagem no fim: a última de antes continua na lista, e não é mais a última.
+        const ia = antes === undefined ? -1 : messages.findIndex(m => m.id === antes);
+        const chegou = montou.current && ia >= 0 && ia < messages.length - 1;
+        if (!montou.current) {
+            irAoFim();
+            montou.current = true;
+        }
+        else if (chegou && noFim.current && !hasMoreAfter)
+            irAoFim();
+        else if (ancora.current) {
+            const it = el.querySelector(`[data-message-id="${CSS.escape(ancora.current.id)}"]`);
+            if (it)
+                sc.scrollTop += it.getBoundingClientRect().top - ancora.current.top;
+        }
+        if (chegou) {
+            const novo = el.querySelector(`[data-message-id="${CSS.escape(ultimoId)}"]`);
+            setAnuncio(novo?.textContent ?? "");
+        }
+        ultimoAntes.current = ultimoId;
+        medir();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [messages]);
+    // A ALTURA MUDA DEPOIS DE MONTAR — a fonte chega, a foto decodifica, o app troca um texto — e
+    // nenhuma rolagem acontece para avisar. Medido no banco em 04/10/2026: a conversa abria na #4992
+    // e não na última. Então se observa o tamanho da lista: quem estava no fim continua no fim; quem
+    // não estava mantém a mensagem do alto onde ela estava.
+    React.useEffect(() => {
+        const el = raiz.current;
+        if (!janela || !el || typeof ResizeObserver === "undefined")
+            return;
+        const ro = new ResizeObserver(() => {
+            const sc = rolador(el);
+            if (noFim.current && !hasMoreAfterRef.current)
+                sc.scrollTop = sc.scrollHeight;
+            else if (ancora.current) {
+                const it = el.querySelector(`[data-message-id="${CSS.escape(ancora.current.id)}"]`);
+                if (it)
+                    sc.scrollTop += it.getBoundingClientRect().top - ancora.current.top;
+            }
+            medir();
+        });
+        ro.observe(el);
+        return () => ro.disconnect();
+    }, [janela, medir]);
+    useVigia(topo, janela && !!hasMoreBefore && !loadingBefore, onReachStart, [messages.length]);
+    useVigia(fim, janela && !!hasMoreAfter && !loadingAfter, onReachEnd, [messages.length]);
+    return _jsxs(_Fragment, { children: [_jsxs("div", { ref: raiz, className: cx("stack", className), role: "log", "aria-live": janela ? "off" : "polite", "aria-busy": (janela && (loadingBefore || loadingAfter)) || undefined, "aria-label": label ?? s.chatLabel, children: [janela && hasMoreBefore && _jsx("div", { ref: topo, className: "message-more", children: loadingBefore && _jsx(Spinner, {}) }), messages.map((m, i) => {
+                        const lado = m.direction;
+                        const midia = (m.attachments ?? []).filter(a => a.kind !== "file" && a.src);
+                        const arquivos = (m.attachments ?? []).filter(a => a.kind === "file");
+                        const dia = m.day != null && m.day !== messages[i - 1]?.day;
+                        return _jsxs(React.Fragment, { children: [dia && _jsx("div", { className: "message-day", children: _jsx(Badge, { children: m.day }) }), _jsxs("div", { className: cx("message", lado === "outgoing" && "message-out", lado === "incoming" && "message-in"), "data-message-id": m.id, children: [lado === "outgoing" ? null : m.avatar ? _jsx(Avatar, { src: m.avatar.src, fallback: m.avatar.fallback }) : _jsx("span", {}), _jsxs("div", { className: "message-bubble", children: [(m.author || m.time || m.edited) && _jsxs("div", { className: "label", children: [_jsx("span", { children: m.author }), (m.time || m.edited) && _jsxs("span", { className: "hint", children: [m.edited && _jsxs(_Fragment, { children: [s.chatEdited, m.time != null && " · "] }), m.time] })] }), m.forwardedFrom != null && _jsxs("div", { className: "message-forwarded", children: [_jsx(Icon, { name: "share-fat", size: "sm" }), _jsxs("span", { children: [s.chatForwardedFrom, " ", m.forwardedFrom] })] }), m.replyTo && _jsx("div", { className: "message-quote", children: _jsxs("span", { className: "message-quote-text", children: [_jsx("span", { className: "message-quote-title", children: m.replyTo.author }), _jsx("span", { className: "message-quote-body", children: m.replyTo.body })] }) }), midia.length > 0 && _jsx(Gallery, { className: "message-album", label: s.chatAttachments, zoom: !onOpenAttachment, ratio: midia.length === 1 ? "4/3" : "1/1", items: midia.map(a => ({ id: a.id, src: a.src, alt: a.alt ?? a.name ?? "", kind: a.kind === "video" ? "video" : "image", duration: a.duration })), onSelect: onOpenAttachment ? (id => { const a = midia.find(x => x.id === id); if (a)
+                                                        onOpenAttachment(m, a); }) : undefined }), arquivos.length > 0 && _jsx("ul", { className: "file-list", "aria-label": s.chatAttachments, children: arquivos.map(a => _jsxs("li", { className: "file-item", children: [_jsx(Icon, { name: "file-text" }), a.href ? _jsx("a", { className: "file-name", href: a.href, download: a.name ?? true, children: a.name ?? a.href }) : _jsx("span", { className: "file-name", children: a.name }), a.bytes != null && _jsx("span", { className: "file-size", children: formatSize(a.bytes) })] }, a.id)) }), m.body, m.status && _jsx("div", { className: "message-status", children: _jsxs(Badge, { variant: m.status.variant, children: [_jsx("i", { className: "status-dot" }), m.status.label] }) })] })] })] }, m.id);
+                    }), janela && hasMoreAfter && _jsx("div", { ref: fim, className: "message-more", children: loadingAfter && _jsx(Spinner, {}) })] }), janela && _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: anuncio })] });
 }
-// Composer: <form> sobre InputGroup + .input; Enter envia (submit nativo) e limpa.
-// Texto é estado interno (não controlado — controlar de fora só com demanda real,
-// precedente MediaPlayer/FileInput). Não envia texto vazio/só-espaço; o botão de
-// envio desabilita enquanto vazio. O input sempre tem nome acessível (aria-label),
-// pois placeholder não serve de nome. ponytail: input de uma linha; textarea +
-// Shift+Enter quando surgir demanda de multilinha.
-export function MessageComposer({ onSend, placeholder, label, icon, sendLabel, disabled, className }) {
+export function MessageComposer({ onSend, placeholder, label, icon, sendLabel, disabled, className, attach, replyTo, onCancelReply, editing, onCancelEdit }) {
     const s = useAureaStrings();
     const [text, setText] = React.useState("");
-    const submit = (e) => { e.preventDefault(); const t = text.trim(); if (!t)
-        return; onSend(t); setText(""); };
-    return _jsxs("form", { className: cx("message-composer", className), onSubmit: submit, children: [_jsxs(InputGroup, { children: [icon && _jsx(InputGroupAddon, { children: _jsx(Icon, { name: icon }) }), _jsx("input", { className: "input", value: text, disabled: disabled, placeholder: placeholder, "aria-label": label ?? s.chatMessage, onChange: e => setText(e.target.value) })] }), _jsx(IconButton, { type: "submit", variant: "primary", icon: "paper-plane-tilt", label: sendLabel ?? s.chatSend, disabled: disabled || !text.trim() })] });
+    const [anexos, setAnexos] = React.useState([]);
+    const [recusados, setRecusados] = React.useState([]);
+    const [aviso, setAviso] = React.useState("");
+    const campo = React.useRef(null);
+    const seletor = React.useRef(null);
+    const seq = React.useRef(0);
+    const opcoes = attach === true ? {} : attach || undefined;
+    const editandoId = editing?.id;
+    const respondendoId = replyTo?.id;
+    // O texto antigo entra quando a edição COMEÇA (muda o id), e sai quando ela acaba — sem isso o
+    // texto da mensagem editada ficava no campo como rascunho de mensagem nova.
+    const editouAntes = React.useRef(undefined);
+    React.useEffect(() => {
+        if (editandoId !== undefined) {
+            setText(editing?.body ?? "");
+            campo.current?.focus();
+        }
+        else if (editouAntes.current !== undefined)
+            setText("");
+        editouAntes.current = editandoId;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editandoId]);
+    React.useEffect(() => { if (respondendoId !== undefined)
+        campo.current?.focus(); }, [respondendoId]);
+    // As URLs das miniaturas vivem enquanto o anexo vive; desmontar solta todas (o FileInput faz igual).
+    const anexosRef = React.useRef(anexos);
+    anexosRef.current = anexos;
+    React.useEffect(() => () => anexosRef.current.forEach(a => a.url && URL.revokeObjectURL(a.url)), []);
+    const soltar = (lista) => lista.forEach(a => a.url && URL.revokeObjectURL(a.url));
+    const escolher = (lista) => {
+        if (!lista)
+            return;
+        const novos = [], fora = [];
+        for (const file of Array.from(lista)) {
+            if (!matchesAccept(file, opcoes?.accept))
+                fora.push({ name: file.name, reason: s.fileWrongType });
+            else if (opcoes?.maxSize != null && file.size > opcoes.maxSize)
+                fora.push({ name: file.name, reason: s.fileTooLarge });
+            else
+                novos.push({ id: `a${seq.current++}`, file, url: file.type.startsWith("image/") && typeof URL.createObjectURL === "function" ? URL.createObjectURL(file) : undefined });
+        }
+        setRecusados(fora);
+        if (novos.length) {
+            if (opcoes?.multiple === false) {
+                soltar(anexos);
+                setAnexos(novos.slice(0, 1));
+            }
+            else
+                setAnexos(prev => [...prev, ...novos]);
+            setAviso(`${s.fileAdded}: ${novos.map(a => a.file.name).join(", ")}`);
+        }
+        if (seletor.current)
+            seletor.current.value = "";
+    };
+    const remover = (a) => { soltar([a]); setAnexos(prev => prev.filter(x => x.id !== a.id)); setAviso(`${s.fileRemoved}: ${a.file.name}`); campo.current?.focus(); };
+    const podeAnexar = !!opcoes && editandoId === undefined;
+    const vazio = !text.trim() && !(podeAnexar && anexos.length);
+    const submit = (e) => {
+        e.preventDefault();
+        if (vazio)
+            return;
+        const t = text.trim();
+        // O segundo argumento só vai quando o app usa uma prop nova: quem chamava `onSend(texto)` e
+        // conferia a chamada exata continua recebendo exatamente isso.
+        if (!opcoes && replyTo == null && editing == null)
+            onSend(t);
+        else
+            onSend(t, { files: podeAnexar ? anexos.map(a => a.file) : [], replyToId: editandoId === undefined ? respondendoId : undefined, editingId: editandoId });
+        setText("");
+        soltar(anexos);
+        setAnexos([]);
+        setRecusados([]);
+    };
+    const aoTeclar = (e) => {
+        if (e.key !== "Escape")
+            return;
+        if (editandoId !== undefined && onCancelEdit) {
+            e.preventDefault();
+            onCancelEdit();
+        }
+        else if (respondendoId !== undefined && onCancelReply) {
+            e.preventDefault();
+            onCancelReply();
+        }
+    };
+    const citacao = editing
+        ? _jsxs("div", { className: "message-quote", children: [_jsx(Icon, { name: "pencil-simple", size: "sm" }), _jsxs("span", { className: "message-quote-text", children: [_jsx("span", { className: "message-quote-title", children: s.chatEditing }), _jsx("span", { className: "message-quote-body", children: editing.body })] }), onCancelEdit && _jsx(IconButton, { variant: "ghost", size: "sm", icon: "x", label: s.chatEditCancel, onClick: onCancelEdit })] })
+        : replyTo
+            ? _jsxs("div", { className: "message-quote", children: [_jsx(Icon, { name: "arrow-bend-up-left", size: "sm" }), _jsxs("span", { className: "message-quote-text", children: [_jsxs("span", { className: "message-quote-title", children: [s.chatReplyTo, replyTo.author != null && _jsxs(_Fragment, { children: [" ", replyTo.author] })] }), _jsx("span", { className: "message-quote-body", children: replyTo.body })] }), onCancelReply && _jsx(IconButton, { variant: "ghost", size: "sm", icon: "x", label: s.chatReplyCancel, onClick: onCancelReply })] })
+            : null;
+    const temFaixa = !!citacao || (podeAnexar && (anexos.length > 0 || recusados.length > 0));
+    return _jsxs("form", { className: cx("message-composer", className), onSubmit: submit, children: [_jsxs(InputGroup, { children: [icon && _jsx(InputGroupAddon, { children: _jsx(Icon, { name: icon }) }), temFaixa && _jsxs("div", { className: "input-group-addon input-group-addon-start input-group-addon-block message-composer-context", children: [citacao, podeAnexar && anexos.length > 0 && _jsx("ul", { className: "file-list", "aria-label": s.chatAttachments, children: anexos.map(a => _jsxs("li", { className: "file-item", children: [a.url ? _jsx("img", { className: "file-thumb", src: a.url, alt: "" }) : _jsx(Icon, { name: "file-text" }), _jsx("span", { className: "file-name", children: a.file.name }), _jsx("span", { className: "file-size", children: formatSize(a.file.size) }), _jsx(IconButton, { variant: "ghost", size: "sm", icon: "x", label: `${s.fileRemove} ${a.file.name}`, onClick: () => remover(a) })] }, a.id)) }), podeAnexar && recusados.map((r, n) => _jsxs("span", { className: "field-error", children: [r.reason, ": ", r.name] }, n))] }), _jsx("input", { ref: campo, className: "input", value: text, disabled: disabled, placeholder: placeholder, "aria-label": label ?? s.chatMessage, onChange: e => setText(e.target.value), onKeyDown: aoTeclar }), podeAnexar && _jsx(InputGroupAddon, { side: "end", children: _jsx(IconButton, { variant: "ghost", size: "sm", icon: "paperclip", label: s.chatAttach, disabled: disabled, onClick: () => seletor.current?.click() }) })] }), podeAnexar && _jsx("input", { ref: seletor, type: "file", hidden: true, accept: opcoes?.accept, multiple: opcoes?.multiple !== false, onChange: e => escolher(e.target.files) }), _jsx(IconButton, { type: "submit", variant: "primary", icon: editing ? "check" : "paper-plane-tilt", label: editing ? s.chatSave : (sendLabel ?? s.chatSend), disabled: disabled || vazio }), podeAnexar && _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: aviso })] });
 }