@aurea-uds/react 0.19.1 → 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/data-grid.js

@@ -25,8 +25,8 @@ import { IconButton } from "./actions.js";
 //
 // Por que os nomes `manualSorting`/`manualFiltering`/`manualPagination` são os DO
 // MOTOR e não inventados aqui: as três referências de tabela foram medidas em
-// 08/08/2026 e NENHUMA expõe API controlada — o shadcn guarda tudo em useState
-// dentro do exemplo, o Kibo põe a ordenação num átomo global (jotai) e o Untitled
+// 08/08/2026 e NENHUMA expõe API controlada — uma guarda tudo em useState
+// dentro do exemplo, outra põe a ordenação num átomo de estado global e a terceira
 // é apresentação. Não havia anatomia para copiar; o vocabulário veio do contrato
 // do motor, que é o que o consumidor já lê na documentação dele.
 //
@@ -316,7 +316,7 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
     };
     const rove = (r, c) => eff.r === r && eff.c === c ? 0 : -1;
     const sortIcon = (dir) => dir === "asc" ? "caret-up" : dir === "desc" ? "caret-down" : "caret-up-down";
-    // F5: a barra de lote. Duas referências independentes (Activepieces e Kaneo) chegam
+    // F5: a barra de lote. Duas referências independentes chegam
     // à MESMA anatomia — contagem, divisória, ações, e um jeito de limpar —, então é
     // ela que entra. O que não entra é o resto das duas: barra `position:fixed` sobre a
     // janela inteira (decisão da APLICAÇÃO, não de um componente que o consumidor põe

package/dist/graph.js

@@ -13,14 +13,14 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //
 // ── O MOTOR, e por que este ──────────────────────────────────────────────────────────────
 // Autorizado pelo Victor em 09/08/2026, e a autorização foi RECONFIRMADA por medição depois de
-// eu mesmo levantar dúvida. A dúvida era boa e a resposta desfez: o `trace-graph-view/` do
-// langfuse — a referência mais próxima do domínio — desenha `<div>` posicionados por ELK e NÃO
+// eu mesmo levantar dúvida. A dúvida era boa e a resposta desfez: a vista de grafo de rastreio
+// da referência mais próxima do domínio desenha `<div>` posicionados por um motor de layout de terceiro e NÃO
 // usa React Flow, e o React Flow não faz layout nenhum, então adotá-lo não entrega um grafo
-// pronto. O que decidiu foi o ALVO, que o Victor nomeou: uma aplicação tipo n8n. Aí a conta
+// pronto. O que decidiu foi o ALVO, que o Victor nomeou: uma aplicação de automação de fluxos. Aí a conta
 // vira outra, e ela é medida:
-//   • a `activepieces-main`, que já está em `Referencia/` e é concorrente direta do n8n, usa
-//     `@xyflow/react` 12.3.5 — está no `package.json` dela;
-//   • o próprio n8n usa **Vue Flow**, o irmão Vue do React Flow, da mesma equipe xyflow.
+//   • uma das referências, que já está em `Referencia/` e é concorrente direta do líder desse tipo de aplicação, usa
+//     `@xyflow/react` — está no `package.json` dela;
+//   • o próprio líder usa o irmão Vue do React Flow, da mesma equipe xyflow.
 // Grafo de LEITURA não precisa de motor. EDITOR precisa, e o padrão de mercado para este
 // editor é o xyflow. Registro completo no `REFERENCES.md`.
 //
@@ -50,7 +50,7 @@ import { cx, useAureaStrings } from "./internal.js";
 //
 // ponytail: sem minimização de cruzamento de arestas — grafo denso vai desenhar linhas se
 // cruzando, e isso é aceitável para dependência (dezenas de nós), não para mil. O caminho de
-// subida é o `elkjs`, que é o que o langfuse usa, e ele é DEPENDÊNCIA NOVA: entra com
+// subida é uma biblioteca de layout automático de grafos, a que a referência usa, e ela é DEPENDÊNCIA NOVA: entra com
 // autorização, não de contrabando.
 const LARGURA = 180, ALTURA = 52, VAO_X = 90, VAO_Y = 24;
 // O VÃO ENTRE COLUNAS CRESCE COM O RÓTULO (A-09, 23/09/2026). Com o rótulo legível, a primeira
@@ -112,12 +112,12 @@ function dispor(nodes, edges) {
     return { posicoes, extensao: { larg: colunas * LARGURA + (colunas - 1) * vaoX, alt: linhas * ALTURA + (linhas - 1) * VAO_Y } };
 }
 // O nó é NOSSO, e é o ponto em que este componente deixa de ser "React Flow com outra cor".
-// O `GraphNode.tsx` do langfuse declara o motivo em uma linha — *"Real-HTML accessibility (the
-// win over the old canvas renderer)"* —: nó desenhado em canvas não existe para o teclado nem
+// O componente de nó da referência declara o motivo em uma linha — a acessibilidade de HTML de
+// verdade, que é a vantagem sobre o antigo desenho em canvas —: nó desenhado em canvas não existe para o teclado nem
 // para o leitor de tela. Aqui ele é `<button>` de verdade quando dá para selecionar.
 //
-// O que NÃO entrou: as DEZ cores por tipo de nó da referência (`AGENT` roxo, `TOOL` laranja,
-// `GENERATION` magenta…). É a quarta vez que esta parte recusa a mesma coisa. `kind` sai como
+// O que NÃO entrou: as DEZ cores por tipo de nó da referência (agente roxo, ferramenta laranja,
+// geração magenta…). É a quarta vez que esta parte recusa a mesma coisa. `kind` sai como
 // TEXTO, que é legível também por quem não separa as cores.
 function NoAurea({ data }) {
     const d = data;

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { cx, defaultStrings, ptBR, defaultSpriteUrl, gridStateToParams, gridStat
 export { useAureaStrings, useSpriteUrl, useTheme, useDensity } from "./internal.js";
 export { type Responsive, type Breakpoint, type ContainerBreakpoint, type Orientation, ESCALA, ESCALA_CONTAINER } from "./pure.js";
 export { ContainerScope, useValorResponsivo } from "./responsivo-runtime.js";
-export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount, type BadgeVariant, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type ProgressProps, type ProgressTone, type AvatarSize, type TopbarVariant, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";
+export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, Container, Section, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount, type BadgeVariant, type BadgeEmphasis, type BadgeSize, type BadgePlacement, type BadgeProps, type ProgressProps, type ProgressTone, type AvatarSize, type TopbarVariant, type TextProps, type HeadingProps, type ParagraphProps, type CodeProps, type TypographyType, type TypographyColor, type TypographyWeight, type TypographyAlign, type HeadingLevel, type ParagraphSize } from "./markup.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";

package/dist/index.js

@@ -51,7 +51,7 @@ export { ContainerScope, useValorResponsivo } from "./responsivo-runtime.js";
 // inteiro). O que muda é de ONDE ele vem — do módulo com a diretiva —, e aí ele volta a chegar
 // como referência de CLIENTE e os 118,5 KB voltam com ele. Não é um erro: é o ganho do item O1
 // se desfazendo em silêncio. É isso, exatamente isso, que o check 35 pega.
-export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount } from "./markup.js";
+export { AspectRatio, InputGroup, InputGroupAddon, Label, Card, Stack, Cluster, Grid, Container, Section, KPI, DataList, Timeline, Prose, Text, Heading, Paragraph, Code, Badge, Progress, Skeleton, AvatarGroup, LogStream, MediaPlayerShell, Topbar, Kbd, Textarea, Checkbox, Radio, Switch, Range, formatBadgeCount } from "./markup.js";
 export * from "./system.js";
 export * from "./actions.js";
 export * from "./feedback.js";

package/dist/inputs-client.d.ts

@@ -11,7 +11,7 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement>, RefAttribute
     error?: ReactNode;
     /** B-12 (24/09/2026): texto de ajuda que precisa de uma FRASE — mora embaixo do controle, onde
      *  cabe, e não divide a linha do rótulo. O `hint` continua o que é: nota curta ao lado do rótulo
-     *  ("opcional", "em MB"). É o lugar do `Description` do HeroUI e da `description` que o
+     *  ("opcional", "em MB"). É o lugar da descrição da referência e da `description` que o
      *  `Checkbox` desta casa já tem. Entra no `aria-describedby` na ordem da tela: hint, descrição,
      *  erro. */
     description?: ReactNode;
@@ -68,7 +68,7 @@ export declare function OTPField({ length, value, defaultValue, onValueChange, m
     id?: string;
     className?: string;
 }): React.JSX.Element;
-export declare function SegmentedControl({ items, value, onChange, label }: {
+export declare function SegmentedControl({ items, value, onChange, label, fullWidth }: {
     items: Array<{
         value: string;
         label: ReactNode;
@@ -76,6 +76,7 @@ export declare function SegmentedControl({ items, value, onChange, label }: {
     value: string;
     onChange: (v: string) => void;
     label?: string;
+    fullWidth?: boolean;
 }): React.JSX.Element;
 export interface ComboboxOption {
     value: string;

package/dist/inputs-client.js

@@ -133,9 +133,9 @@ export function Field({ label, hint, description, error, children, className, id
 // Form (M1): o formulário que EXIBE erro, e não o que decide o que é erro.
 //
 // A divisão saiu de pesquisa e da medição dos consumidores (13/08/2026). O padrão de mercado é
-// `react-hook-form` + `zod`, e é o que o shadcn embrulha — mas embrulhar isso aqui obrigaria TODO
-// projeto que usa a Aurea a usar react-hook-form, inclusive os que já validam de outro jeito (um
-// consumidor real valida com zod em server action, sem biblioteca de formulário no cliente).
+// uma biblioteca de formulário com uma de esquema, e é o que uma das referências embrulha — mas embrulhar isso aqui obrigaria TODO
+// projeto que usa a Aurea a usar essa biblioteca de formulário, inclusive os que já validam de outro jeito (um
+// consumidor real valida com a biblioteca de esquema em server action, sem biblioteca de formulário no cliente).
 // Dependência nova também é decisão do Victor pelo BUILDING.md §3.3, e ela não foi necessária:
 // o `Form` do Base UI — motor que a Aurea JÁ paga desde a Fase 2 — declara no próprio tipo que
 // `errors` são "validation errors returned externally, typically after submission by a server or
@@ -232,9 +232,13 @@ export function OTPField({ length, value, defaultValue, onValueChange, mask, dis
 // é o rádio e o input é `aria-hidden`. Comportamento idêntico: Enter não seleciona, Espaço
 // seleciona, a seta move E seleciona. O que sai é a camada sintética que o motor punha por cima
 // da ativação nativa do `<button>`.
-export function SegmentedControl({ items, value, onChange, label }) {
+//
+// `fullWidth` (A5, 06/10/2026): o mesmo nome e o mesmo desenho do nativo — o controle ocupa a
+// linha e cada segmento CRESCE a partir do rótulo, sem encolher abaixo dele. É como o grupo
+// de botões alternáveis da referência ocupa a linha.
+export function SegmentedControl({ items, value, onChange, label, fullWidth }) {
     const s = useAureaStrings();
-    return _jsx(BaseRadioGroup, { className: "segmented", "aria-label": label ?? s.optionsLabel, value: value, onValueChange: v => onChange(String(v)), children: items.map(i => _jsx(BaseRadio.Root, { value: i.value, className: i.value === value ? "active" : undefined, nativeButton: true, render: _jsx("button", { type: "button" }), children: i.label }, i.value)) });
+    return _jsx(BaseRadioGroup, { className: fullWidth ? "segmented segmented-full" : "segmented", "aria-label": label ?? s.optionsLabel, value: value, onValueChange: v => onChange(String(v)), children: items.map(i => _jsx(BaseRadio.Root, { value: i.value, className: i.value === value ? "active" : undefined, nativeButton: true, render: _jsx("button", { type: "button" }), children: i.label }, i.value)) });
 }
 const ehAgrupado = (items) => items != null && items.length > 0 && typeof items[0] === "object" && items[0] != null && "items" in items[0];
 // UM renderizador e UMA lista para os dois combobox: duas cópias da mesma árvore é como a

package/dist/internal.js

@@ -1,5 +1,5 @@
 "use client";
-// A diretiva na LINHA 1, como as referências a escrevem (Base UI e shadcn/ui, medidos em
+// A diretiva na LINHA 1, como as referências a escrevem (o Base UI e outra delas, medidos em
 // 06/08/2026) — Parte A do PLANO-1.0. Este módulo chama `createContext`, que é API só de
 // cliente: sem a diretiva, `import {Button} from "@aurea-uds/react"` dentro de um componente
 // de servidor quebrava na hora, e quebrava no consumidor.

package/dist/layout-client.js

@@ -125,8 +125,8 @@ function useGavetaFechaNoDesktop() {
 // AN-01 (03/10/2026): O BOTÃO DE RECOLHER E A TRILHA SOZINHA. Um consumidor viu numa janela de 1508:
 // a lateral sempre aberta, sem botão, e diminuir a janela não a recolhia — só virava gaveta abaixo de
 // 1024. O modo trilha existia (`sidebarCollapsed`, `.sidebar-collapsed`), mas só controlado e sem
-// gatilho. A referência é a `Sidebar` do shadcn que o ReUI usa no `c-sidebar-2` (o HeroUI não tem
-// moldura de app): estado aberto/recolhido, controlado e não controlado, um gatilho, e o nome em
+// gatilho. A referência é a lateral de uma das referências, que outra delas usa num dos seus exemplos
+// (a referência principal não tem moldura de app): estado aberto/recolhido, controlado e não controlado, um gatilho, e o nome em
 // dica na trilha. O lugar do botão é o que o Victor marcou: no alto, na junção do menu com o
 // conteúdo. E a trilha sozinha em tela média vem do pedido — a referência não a tem.
 //

package/dist/layout.d.ts

@@ -1,3 +1,5 @@
 export * from "./layout-client.js";
 export { Card, Stack, Cluster, Grid } from "./markup.js";
 export { AspectRatio } from "./markup.js";
+export { Container, Section } from "./markup.js";
+export type { GridSpan, GridItemProps, ContainerSize, ContainerProps, SectionSurface, SectionSpacing, SectionProps } from "./markup.js";

package/dist/layout.js

@@ -5,3 +5,5 @@ export * from "./layout-client.js";
 export { Card, Stack, Cluster, Grid } from "./markup.js";
 // PORTADO no merge de 28/08/2026 — sai do markup (servidor), como os demais de marcação.
 export { AspectRatio } from "./markup.js";
+// GAR-02 a GAR-05 (06/10/2026): a página de site — `Container`, `Section` e o `Grid.Item` com `span`.
+export { Container, Section } from "./markup.js";

package/dist/markup.d.ts

@@ -48,7 +48,7 @@ export interface ClusterProps extends DivProps {
 }
 export declare function Cluster({ gap, align, justify, wrap, className, ...props }: ClusterProps): React.JSX.Element;
 /**
- * A largura mínima da coluna, por nome — AN-08 (03/10/2026). O HeroUI não tem `Grid`, e nenhum dos
+ * A largura mínima da coluna, por nome — AN-08 (03/10/2026). A referência não tem `Grid`, e nenhum dos
  * quatro números é novo: cada um já mede uma grade ou uma caixa da Aurea (ver `.grid-min-*` no CSS).
  * `md` é o padrão de sempre.
  */
@@ -66,6 +66,56 @@ export interface GridProps extends DivProps {
     columns?: number;
 }
 export declare function Grid({ gap, min, columns, className, style, ...props }: GridProps): React.JSX.Element;
+export declare namespace Grid {
+    export { GridItem as Item };
+}
+/**
+ * Quantas colunas da grade o item ocupa — GAR-03 (06/10/2026). Texto, e não número, porque é o
+ * valor de um eixo responsivo, como `size` e `orientation`.
+ */
+export type GridSpan = "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10" | "11" | "12";
+export interface GridItemProps extends DivProps {
+    /**
+     * Quantas colunas o item ocupa (GAR-03). Com `<Grid columns={12}>` é o "7 de 12" de página de
+     * site. Responsivo, mobile-first: `{base: "12", viewport: {md: "7"}}` ocupa a linha inteira no
+     * estreito e 7 de 12 a partir do `md`. Sem `span`, uma coluna, como qualquer filho de grade.
+     */
+    span?: Responsive<GridSpan>;
+}
+/** O item da grade que sabe quantas colunas ocupa (GAR-03). Mora em `Grid.Item`, como `Card.Media`. */
+declare function GridItem({ span, className, ...props }: GridItemProps): React.JSX.Element;
+/** A largura máxima do `Container`, pelos nomes da escala de pontos. `xl` (1280) é o padrão. */
+export type ContainerSize = "sm" | "md" | "lg" | "xl" | "2xl" | "full";
+export interface ContainerProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
+    /** Até onde o conteúdo cresce: `sm` 640 · `md` 768 · `lg` 1024 · `xl` 1280 (padrão) · `2xl` 1536 · `full` sem teto. */
+    size?: ContainerSize;
+}
+/**
+ * A largura de leitura de uma página de SITE: centrada, com teto e o respiro dos lados que cresce
+ * com a tela (16 no estreito, 32 a partir do `md`). É o que vai DENTRO de uma `Section`. O painel
+ * de aplicativo continua sendo o `AppShell`.
+ */
+export declare function Container({ size, className, ...props }: ContainerProps): React.JSX.Element;
+/** O fundo da faixa: o da página (padrão), o de cartão ou o rebaixado. */
+export type SectionSurface = "background" | "card" | "inset";
+/** O respiro de cima e de baixo: `md` (padrão, 64 e 96 a partir do `md`) ou `sm` (32 e 48). */
+export type SectionSpacing = "sm" | "md";
+export interface SectionProps extends HTMLAttributes<HTMLElement>, RefAttributes<HTMLElement> {
+    surface?: SectionSurface;
+    spacing?: SectionSpacing;
+    /**
+     * Um tema só para esta faixa (GAR-05): `"dark"` faz uma faixa escura dentro de uma página clara,
+     * e o contrário. Fundo, letra e peças de dentro seguem o tema da faixa, e as regras de tema da
+     * página não vazam para dentro dela.
+     */
+    theme?: "light" | "dark";
+}
+/**
+ * A faixa de ponta a ponta de uma página de site (GAR-04): `<section>` com fundo e respiro de site.
+ * O conteúdo vai dentro de um `Container`. Dê um nome à faixa (`aria-labelledby` no título dela)
+ * quando ela for uma região que o leitor de tela deva listar.
+ */
+export declare function Section({ surface, spacing, theme, className, ...props }: SectionProps): React.JSX.Element;
 export declare function KPI({ label, value, trend, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     label: ReactNode;
     value: ReactNode;
@@ -126,7 +176,7 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttribut
     dot?: boolean;
     leading?: ReactNode;
     trailing?: ReactNode;
-    /** Foto redonda no início — o `BadgeWithImage` da referência. */
+    /** Foto redonda no início — o selo com imagem da referência. */
     image?: string;
     imageAlt?: string;
     /** Conteúdo numérico. Passa por `max` e some em zero, salvo `showZero`. */
@@ -137,12 +187,12 @@ export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, RefAttribut
     fit?: BadgeFit;
     /** Liga o modo SOBREPOSTO e escolhe o canto. `children` passa a ser o que se decora. */
     anchor?: BadgePlacement;
-    /** `circle` recolhe o canto em 14% — é o `overlap` da MUI, para avatar redondo. */
+    /** `circle` recolhe o canto em 14% — é a sobreposição circular da referência, para avatar redondo. */
     anchorShape?: "square" | "circle";
     /** Esconde sem tirar o filho do lugar. */
     invisible?: boolean;
     /** Conteúdo do badge no modo sobreposto (no modo chip, quem manda é `children`).
-     *  Nome da MUI, e não `content`: este colide com o atributo HTML de mesmo nome. */
+     *  Chama-se assim, e não `content`, porque este colide com o atributo HTML de mesmo nome. */
     badgeContent?: ReactNode;
 }
 export declare function Badge({ variant, emphasis, size, dot, leading, trailing, image, imageAlt, count, max, showZero, fit, anchor, anchorShape, invisible, badgeContent, children, className, ...props }: BadgeProps): React.JSX.Element;
@@ -154,7 +204,7 @@ export interface ProgressProps {
     value?: number;
     /** O nome que o leitor de tela anuncia. Não aparece. */
     label?: string;
-    /** O texto de apoio, no alto à direita — o `ProgressBar.Output` do HeroUI: velocidade, tempo
+    /** O texto de apoio, no alto à direita — a saída de texto da barra de progresso da referência: velocidade, tempo
      *  que falta, bytes. Em texto, vai junto no `aria-valuetext`. */
     detail?: ReactNode;
     tone?: ProgressTone;

package/dist/markup.js

@@ -57,6 +57,27 @@ export function Grid({ gap, min, columns, className, style, ...props }) {
         : style;
     return _jsx("div", { className: cx("grid", gap && gap !== "normal" && `grid-gap-${gap}`, nome && min !== "md" && `grid-min-${min}`, columns != null && "grid-fixed", className), style: vars, ...props });
 }
+/** O item da grade que sabe quantas colunas ocupa (GAR-03). Mora em `Grid.Item`, como `Card.Media`. */
+function GridItem({ span, className, ...props }) {
+    return _jsx("div", { className: cx("grid-item", peleDoEixo("grid-span", span, "", "grid-span"), className), ...props });
+}
+Grid.Item = GridItem;
+/**
+ * A largura de leitura de uma página de SITE: centrada, com teto e o respiro dos lados que cresce
+ * com a tela (16 no estreito, 32 a partir do `md`). É o que vai DENTRO de uma `Section`. O painel
+ * de aplicativo continua sendo o `AppShell`.
+ */
+export function Container({ size = "xl", className, ...props }) {
+    return _jsx("div", { className: cx("container", size !== "xl" && `container-${size}`, className), ...props });
+}
+/**
+ * A faixa de ponta a ponta de uma página de site (GAR-04): `<section>` com fundo e respiro de site.
+ * O conteúdo vai dentro de um `Container`. Dê um nome à faixa (`aria-labelledby` no título dela)
+ * quando ela for uma região que o leitor de tela deva listar.
+ */
+export function Section({ surface = "background", spacing = "md", theme, className, ...props }) {
+    return _jsx("section", { "data-theme": theme, className: cx("section", surface !== "background" && `section-${surface}`, spacing !== "md" && `section-spacing-${spacing}`, className), ...props });
+}
 // ── Data Display ─────────────────────────────────────────────────────────────────────────────
 export function KPI({ label, value, trend, className, ...props }) { return _jsxs(Card, { className: cx("kpi", className), ...props, children: [_jsx("span", { className: "muted", children: label }), _jsx("strong", { children: value }), trend && _jsx("small", { children: trend })] }); }
 export function DataList({ items }) { return _jsx("dl", { className: "data-list", children: items.map((i, n) => _jsxs(React.Fragment, { children: [_jsx("dt", { children: i.term }), _jsx("dd", { children: i.value })] }, n)) }); }
@@ -69,11 +90,11 @@ export function Timeline({ items }) { return _jsx("ol", { className: "timeline",
 export function Prose({ className, ...props }) { return _jsx("div", { className: cx("prose", className), ...props }); }
 const tipografia = (tipo, { align, color, weight, truncate }, className) => cx("typography", `typography-${tipo}`, color === "muted" && "typography-muted", weight && `typography-weight-${weight}`, align && `typography-align-${align}`, truncate && "typography-truncate", className);
 export function Text({ type = "body", align, color, weight, truncate, className, ...props }) { return _jsx("span", { className: tipografia(type, { align, color, weight, truncate }, className), ...props }); }
-// O nível decide o elemento E o tamanho, como no HeroUI: um `h2` tem a cara de título 2.
+// O nível decide o elemento E o tamanho, como na referência: um `h2` tem a cara de título 2.
 export function Heading({ level = 1, align, color, weight, truncate, className, ...props }) { const Tag = `h${level}`; return _jsx(Tag, { className: tipografia(`h${level}`, { align, color, weight, truncate }, className), ...props }); }
 export function Paragraph({ size = "base", align, color, weight, truncate, className, ...props }) { return _jsx("p", { className: tipografia(size === "base" ? "body" : `body-${size}`, { align, color, weight, truncate }, className), ...props }); }
 export function Code({ align, color, weight, truncate, className, ...props }) { return _jsx("code", { className: tipografia("code", { align, color, weight, truncate }, className), ...props }); }
-// `max` com `+` é o idioma universal do contador (MUI, Ant, Material 3). Exportada porque quem
+// `max` com `+` é o idioma universal do contador (três das referências o usam). Exportada porque quem
 // escreve o nome acessível precisa do MESMO texto — "99+ unread" tem de bater com o que se vê.
 export function formatBadgeCount(count, max = 99) { return count > max ? `${max}+` : String(count); }
 export function Badge({ variant = "neutral", emphasis = "soft", size = "md", dot, leading, trailing, image, imageAlt, count, max = 99, showZero, fit = "auto", anchor, anchorShape = "square", invisible, badgeContent, children, className, ...props }) {
@@ -84,15 +105,15 @@ export function Badge({ variant = "neutral", emphasis = "soft", size = "md", dot
     const chip = _jsxs("span", { className: cx("badge", variant !== "neutral" && `badge-${variant}`, emphasis !== "soft" && `badge-${emphasis}`, size !== "md" && `badge-${size}`, fit === "content" && !anchor && "badge-fit", anchor && `badge-overlay badge-at-${anchor}`, anchor && anchorShape === "circle" && "badge-on-circle", anchor && soPonto && "badge-is-dot", className), ...props, children: [dot && !soPonto && _jsx("span", { className: "badge-dot" }), image && _jsx("img", { className: "badge-image", src: image, alt: imageAlt ?? "" }), leading, miolo, trailing] });
     if (!anchor)
         return chip;
-    // Some em zero por padrão, como a MUI: caixa de entrada zerada não merece um "0" no canto.
+    // Some em zero por padrão, como na referência: caixa de entrada zerada não merece um "0" no canto.
     const escondido = invisible || (count === 0 && !showZero) || (miolo == null && !dot);
     // `aria-hidden` no contador, e o número vai para o nome de QUEM É DECORADO — regra da própria
-    // documentação da MUI e das três fontes de acessibilidade lidas em 17/08/2026. Sem isso, o
+    // documentação da referência e das três fontes de acessibilidade lidas em 17/08/2026. Sem isso, o
     // botão do sino é anunciado "sino 8" e ninguém sabe o que é o 8.
     return _jsxs("span", { className: "badge-anchor", children: [children, !escondido && React.cloneElement(chip, { "aria-hidden": true })] });
 }
 // AN-07 (03/10/2026). Tudo novo é acréscimo: com `value` e sem `detail` nem `tone`, a marcação é a
-// de antes, mais a classe da caixa de fora. A anatomia é a do `ProgressBar` do HeroUI 3.2.6: a
+// de antes, mais a classe da caixa de fora. A anatomia é a da barra de progresso da referência: a
 // saída no alto à direita, o trilho embaixo, e sem `aria-valuenow` quando não há total.
 export function Progress({ value, label, detail, tone = "brand", className }) {
     const semTotal = value == null || Number.isNaN(value);

package/dist/media-client.js

@@ -189,13 +189,12 @@ export function Gallery({ items, label, selected, onSelect, zoom, ratio = "1/1",
 // MARCAÇÃO, NÃO MOTOR — e a pergunta que o item mandava decidir primeiro ("se `scroll-snap` do
 // CSS cobre, o componente é marcação") foi respondida MEDINDO, não preferindo:
 //
-//   • as QUATRO referências embrulham o MESMO motor de terceiro, o `embla-carousel` — medido em
-//     15/08/2026 no `kibo-main/packages/shadcn-ui/.../carousel.tsx`, nas quatro bases do
-//     `ui-main` (`aria`, `base`, `radix`, `new-york-v4`), no `carousel-base.tsx` do `react-main`
-//     e no `activepieces-main`. Nenhuma escreve um motor; todas pagam o mesmo;
+//   • as QUATRO referências embrulham o MESMO motor de carrossel de terceiro — medido em
+//     15/08/2026 no fonte de cada uma, nas pastas de `Referencia/` (numa delas, nas quatro bases
+//     que ela oferece). Nenhuma escreve um motor; todas pagam o mesmo;
 //   • o `@base-ui/react` NÃO tem carrossel (medido: 46 pastas em `packages/react/src`, nenhuma
 //     é carousel — a mesma medição que abriu a decisão de motor do Calendar);
-//   • trazer o `embla` seria DEPENDÊNCIA NOVA, que pelo `BUILDING.md` §3.3 interrompe o lote e
+//   • trazer esse motor seria DEPENDÊNCIA NOVA, que pelo `BUILDING.md` §3.3 interrompe o lote e
 //     exige o Victor — para um componente que o navegador já sabe fazer;
 //   • e o caminho SEM JavaScript nenhum ainda não serve: `::scroll-button()`/`::scroll-marker()`
 //     (CSS Overflow 5) não são Baseline — pesquisado em 15/08/2026: Chrome/Edge 135+ têm,
@@ -203,7 +202,7 @@ export function Gallery({ items, label, selected, onSelect, zoom, ratio = "1/1",
 //     Um design system não pode entregar controle que só funciona num navegador.
 //
 // Então o motor é o CONTÊINER DE ROLAGEM nativo com `scroll-snap`, que é Baseline há anos e dá
-// de graça o que o `embla` reimplementa: arrasto por toque com inércia, rolagem por roda e
+// de graça o que esse motor reimplementa: arrasto por toque com inércia, rolagem por roda e
 // teclado, e o encaixe no slide. O que sobra de JavaScript é o que o CSS ainda não tem — saber
 // em QUAL slide se está, para desenhar o ponto aceso e desabilitar a seta do fim.
 //
@@ -212,20 +211,20 @@ export function Gallery({ items, label, selected, onSelect, zoom, ratio = "1/1",
 // `prefers-reduced-motion` que o core já tem (`scroll-behavior:auto!important`) alcança este
 // componente sem uma linha nova. Passar `behavior:"smooth"` daqui passaria POR CIMA dela.
 //
-// UM componente, não sete peças: `Carousel.Root/Content/Item/PrevTrigger/NextTrigger/
-// IndicatorGroup/Indicator` é a decomposição da referência, e aqui ela custaria sete fichas para
+// UM componente, não sete peças: raiz, conteúdo, item, seta de voltar, seta de avançar,
+// grupo de indicadores e indicador é a decomposição da referência, e aqui ela custaria sete fichas para
 // desenhar uma lista que rola. É o mesmo argumento que o `Stepper`, o `TreeView` e a `Sidebar`
 // já resolveram: quem embrulha cada slide é o componente, e por isso o rótulo "Slide 3 de 8"
 // nunca fica com o consumidor — que é onde ele seria esquecido.
 //
 // LIMITES DECLARADOS (todos são escopo menor que o da referência, `BUILDING.md` §Passo 5):
-//   • sem laço infinito, sem autoplay e sem arrasto com o MOUSE — os três são do `embla` e
+//   • sem laço infinito, sem autoplay e sem arrasto com o MOUSE — os três são do motor de terceiro e
 //     nenhum deles apareceu na medição dos consumidores; laço, ainda por cima, não existe em
 //     contêiner de rolagem nativo e voltaria a exigir motor;
 //   • sem eixo vertical: não há uso medido, e o sprite não tem chevron para cima (a allowlist
 //     do contrato tem `chevron--left/right/down`), então o eixo custaria glifo novo por nada;
 //   • quantos slides aparecem por vez é CSS, não prop: `--carousel-slide` (default `100%`) é a
-//     válvula no idioma do `--qr-size` e do `--datagrid-max-h`. É o caso `multiple` da
+//     válvula no idioma do `--qr-size` e do `--datagrid-max-h`. É o caso de vários slides por vez da
 //     referência, sem API nenhuma;
 //   • em RTL a rolagem vai para o lado certo (o deslocamento é medido pela borda inicial), mas
 //     o GLIFO da seta não espelha — é uma linha de CSS que ninguém pediu e que nenhum teste

package/dist/navigation-client.d.ts

@@ -23,7 +23,8 @@ export declare function Breadcrumb({ items, label }: {
     label?: string;
 }): React.JSX.Element;
 export type TabsOrientation = "horizontal" | "vertical";
-export declare function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus, loopFocus }: {
+export type TabsPanel = "card" | "plain";
+export declare function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus, loopFocus, panel }: {
     tabs: Array<{
         id: string;
         label: ReactNode;
@@ -35,6 +36,7 @@ export declare function Tabs({ tabs, value, onChange, label, orientation, activa
     orientation?: Responsive<TabsOrientation>;
     activateOnFocus?: boolean;
     loopFocus?: boolean;
+    panel?: TabsPanel;
 }): React.JSX.Element;
 export declare function Pagination({ page, total, onPageChange }: {
     page: number;

package/dist/navigation-client.js

@@ -29,7 +29,7 @@ export function Stepper({ items, label, className }) {
         }) });
 }
 export function Breadcrumb({ items, label }) { const s = useAureaStrings(); return _jsx("nav", { className: "breadcrumb", "aria-label": label ?? s.breadcrumbLabel, children: items.map((i, n) => _jsxs(React.Fragment, { children: [n > 0 && _jsx(Icon, { name: "caret-right", size: "sm" }), " ", i.render ? fundirRender(i.render, { children: i.label }, "a") : i.href ? _jsx("a", { href: i.href, children: i.label }) : _jsx("strong", { "aria-current": "page", children: i.label })] }, n)) }); }
-export function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus = true, loopFocus }) { const s = useAureaStrings(); const ancora = useRef(null); const resolvida = useValorResponsivo(orientation, "horizontal", ancora); return _jsxs(BaseTabs.Root, { ref: ancora, value: value, onValueChange: v => onChange(String(v)), orientation: resolvida, className: "tabs-root", children: [_jsx(BaseTabs.List, { className: "tabs", "aria-label": label ?? s.tabsLabel, activateOnFocus: activateOnFocus, loopFocus: loopFocus, children: tabs.map(t => _jsx(BaseTabs.Tab, { value: t.id, className: "tab", children: t.label }, t.id)) }), tabs.map(t => _jsx(BaseTabs.Panel, { value: t.id, className: "card card-inset", tabIndex: 0, children: t.content }, t.id))] }); }
+export function Tabs({ tabs, value, onChange, label, orientation, activateOnFocus = true, loopFocus, panel = "card" }) { const s = useAureaStrings(); const ancora = useRef(null); const resolvida = useValorResponsivo(orientation, "horizontal", ancora); return _jsxs(BaseTabs.Root, { ref: ancora, value: value, onValueChange: v => onChange(String(v)), orientation: resolvida, className: "tabs-root", children: [_jsx(BaseTabs.List, { className: "tabs", "aria-label": label ?? s.tabsLabel, activateOnFocus: activateOnFocus, loopFocus: loopFocus, children: tabs.map(t => _jsx(BaseTabs.Tab, { value: t.id, className: "tab", children: t.label }, t.id)) }), tabs.map(t => _jsx(BaseTabs.Panel, { value: t.id, className: panel === "plain" ? "tabs-panel" : "card card-inset", tabIndex: 0, children: t.content }, t.id))] }); }
 export function Pagination({ page, total, onPageChange }) { const s = useAureaStrings(); return _jsxs("nav", { className: "pagination", "aria-label": s.paginationLabel, children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: s.previous }), _jsxs(Badge, { variant: "primary", children: [page, " / ", total] }), _jsx(Button, { variant: "ghost", size: "sm", disabled: page >= total, onClick: () => onPageChange(page + 1), children: s.next })] }); }
 export function TableOfContents({ items, current, label, className, ...props }) {
     const s = useAureaStrings();
@@ -208,7 +208,7 @@ function sidebarList(items, ctx, sub, labelledBy) {
                     : _jsx("button", { id: lid, type: "button", className: "sidebar-item", "aria-current": ativo ? "page" : undefined, onClick: it.onClick, children: miolo });
             // NO TRILHO O NOME SÓ EXISTE NO TOOLTIP. Recolhida, a lateral manda o rótulo para `.sr-only`: quem
             // usa leitor de tela continua ouvindo, e quem ENXERGA fica com um ícone mudo. A referência resolve
-            // isso com tooltip no `NavButton`, e é o que falta para um trilho de ícone não virar adivinhação.
+            // isso com tooltip no botão de navegação dela, e é o que falta para um trilho de ícone não virar adivinhação.
             // Só quando recolhida: com o rótulo visível ao lado, o tooltip repetiria o que já está na tela.
             // `side="right"` porque a lateral encosta na borda esquerda — para cima o balão sairia do trilho.
             return _jsxs("li", { children: [ctx.collapsed ? _jsx(Tooltip, { content: it.label, side: "right", children: alvo }) : alvo, filhos && sidebarList(filhos, ctx, true, lid)] }, it.id);
@@ -216,8 +216,8 @@ function sidebarList(items, ctx, sub, labelledBy) {
 }
 // A GAVETA FECHA AO ESCOLHER (A-06, 23/09/2026). Abaixo de lg a lateral do `AppShell` é popover,
 // e a biblioteca a abria e NUNCA a fechava por código: `hidePopover` tinha zero ocorrências. O
-// usuário tocava "Relatórios", a página trocava por baixo e a gaveta ficava na frente dela. Material 3,
-// Fluent 2 e o guia de gaveta do iOS fecham ao escolher. O fechamento mora NA LATERAL, e não no
+// usuário tocava "Relatórios", a página trocava por baixo e a gaveta ficava na frente dela. Duas das
+// referências de desenho e o guia de gaveta do iOS fecham ao escolher. O fechamento mora NA LATERAL, e não no
 // item, para valer também para a navegação que o consumidor escreve e passa como `children` — o
 // catálogo é um desses. Fora do popover (desktop, lateral solta) o teste de `:popover-open` falha e
 // nada acontece. O `try` é porque `:popover-open` é seletor desconhecido em motor antigo, e lá o
@@ -252,8 +252,8 @@ export function BottomNav({ items, current, variant = "floating", indicator = "n
             const ativo = it.id === current;
             // O CONTADOR PENDURA NO ÍCONE, e é por isso que existe esta caixa. Pendurado no ITEM (a
             // primeira versão), `50%` cai no meio do RÓTULO quando o item é linha — o Victor viu o número
-            // cobrir o nome inteiro em 17/08/2026. A pesquisa (Material 3 e os guias de barra de abas do
-            // iOS) diz a mesma coisa: canto superior do ÍCONE, encostando na borda dele, nunca sobre o
+            // cobrir o nome inteiro em 17/08/2026. A pesquisa (uma das referências de desenho e os guias de
+            // barra de abas do iOS) diz a mesma coisa: canto superior do ÍCONE, encostando na borda dele, nunca sobre o
             // texto. A caixa é o que dá ao contador um canto para se ancorar — e nos quatro indicadores
             // redondos é ela que VIRA o círculo, com o rótulo embaixo, fora dele.
             // `size="lg"` porque a proporção contra o contador foi medida: 24 para 16, razão 0,67.

package/dist/overlays.js

@@ -43,7 +43,7 @@ export function Dialog({ open, title, children, footer, onClose, size = "md", di
 // sobrevive a trocar um dos dois — e reprova quando os dois somem.
 //
 // ESCOPO MENOR que a referência (BUILDING.md §5): lá são nove peças compostas
-// (Root/Trigger/Content/Header/Title/Description/Footer/Cancel/Action). Aqui é uma prop `open`,
+// (raiz, gatilho, conteúdo, cabeçalho, título, descrição, rodapé, cancelar e ação). Aqui é uma prop `open`,
 // como no `Dialog` e no `Drawer` — a composição não acrescenta escolha nenhuma num diálogo cujo
 // corpo é uma frase e dois botões.
 //
@@ -78,7 +78,7 @@ export function Popover({ trigger, title, children, side = "bottom" }) { const p
 // não de aparência: a Tooltip é um RÓTULO curto (`role="tooltip"`, some ao mover o mouse); o
 // Popover abre por CLIQUE e pode conter foco; este é uma PRÉVIA rica que aparece ao repousar o
 // ponteiro sobre um link e cujo conteúdo é alcançável — o cartão de perfil ao passar sobre um
-// nome. As três referências que o têm chamam de hover-card ou preview-card e concordam nisso.
+// nome. As três referências que o têm chamam de cartão de sobrevoo ou de prévia e concordam nisso.
 // Superfície reusa `.popover` de propósito: é a mesma camada flutuante do sistema, e dar a ela
 // um segundo nome criaria duas peles para a mesma coisa.
 // Por depender de repouso do ponteiro, NÃO serve para informação essencial — quem navega só por

package/dist/pure.js

@@ -9,8 +9,8 @@
 // módulos de cliente não precisarem saber da diferença; o barril (`index.tsx`, que também é de
 // servidor) importa DAQUI.
 //
-// Mesmo desenho da referência: no shadcn/ui o `cn` mora em `lib/utils.ts` sem diretiva, enquanto
-// 43 dos 57 componentes de `registry/bases/aria/ui` a declaram — medido em 06/08/2026.
+// Mesmo desenho da referência: nela a função de juntar classes mora num arquivo utilitário sem diretiva, enquanto
+// 43 dos 57 componentes dela a declaram — medido em 06/08/2026.
 //
 // `.tsx` sem JSX de propósito: os checks 11, 19 e 26 varrem `packages/react/src/*.tsx`, e um
 // `.ts` aqui seria um arquivo que gate nenhum enxerga.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.19.1",
+  "version": "0.22.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",