@aurea-uds/react 0.18.0 → 0.22.0

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/file-input.d.ts

@@ -26,6 +26,7 @@ export declare function matchesAccept(file: {
     name: string;
     type: string;
 }, accept?: string): boolean;
+export declare function formatSize(bytes: number): string;
 export declare function FileInput({ accept, maxSize, multiple, onFilesChange, upload, label, hint, id, className, initialQueue, onQueueChange, preview, checksum }: {
     accept?: string;
     maxSize?: number;

package/dist/file-input.js

@@ -57,7 +57,9 @@ async function somaSha256(file) {
 // nova, zero branch novo.
 const ATIVOS = new Set(["pending", "uploading", "paused"]);
 const restaurar = (q) => ({ ...q, restored: true, status: ATIVOS.has(q.status) ? "canceled" : q.status });
-function formatSize(bytes) {
+// Exportada para dentro do pacote (não sai no barril): o `MessageComposer` mostra o tamanho do
+// anexo no mesmo formato da fila daqui (AN-03).
+export function formatSize(bytes) {
     if (bytes < 1024)
         return `${bytes} B`;
     const units = ["KB", "MB", "GB"];

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.d.ts

@@ -27,11 +27,14 @@ export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElemen
     render?: React.ReactElement;
 }
 export declare function Image({ ratio, fit, alt, className, style, render, onError, ...props }: ImageProps): React.JSX.Element;
+export type GalleryItemKind = "image" | "video";
 export interface GalleryItem {
     id: string;
     src: string;
     alt: string;
     caption?: ReactNode;
+    kind?: GalleryItemKind;
+    duration?: number;
 }
 export interface GalleryProps extends Omit<HTMLAttributes<HTMLUListElement>, "onSelect">, RefAttributes<HTMLUListElement> {
     items: GalleryItem[];
@@ -40,8 +43,14 @@ export interface GalleryProps extends Omit<HTMLAttributes<HTMLUListElement>, "on
     onSelect?: (id: string) => void;
     zoom?: boolean;
     ratio?: string;
+    selectionMode?: "single" | "multiple";
+    selectedIds?: string[];
+    onSelectionChange?: (ids: string[]) => void;
+    hasMore?: boolean;
+    loading?: boolean;
+    onReachEnd?: () => void;
 }
-export declare function Gallery({ items, label, selected, onSelect, zoom, ratio, className, ...props }: GalleryProps): React.JSX.Element;
+export declare function Gallery({ items, label, selected, onSelect, zoom, ratio, selectionMode, selectedIds, onSelectionChange, hasMore, loading, onReachEnd, className, ...props }: GalleryProps): React.JSX.Element;
 export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">, RefAttributes<HTMLDivElement> {
     children?: ReactNode;
     label?: string;

package/dist/media-client.js

@@ -11,6 +11,8 @@ import { IconButton } from "./actions.js";
 // A galeria AMPLIA num Dialog, e o Dialog já existe (trava do item L2). O import é para `overlays`,
 // que como este módulo mora no "resto" do DAG e não importa `media` — não há ciclo.
 import { Dialog } from "./overlays.js";
+// AN-05: o tempo do vídeo e a linha de "carregando mais" reusam peças que já existem.
+import { Badge, Spinner } from "./feedback.js";
 // MediaPlayer (Fase 5): headless sobre <video>/<audio> nativos — o MOTOR de mídia é
 // o browser; o componente só liga estado (play/tempo/buffer/volume/legenda) às
 // classes .media-* já existentes. Sem CSS estrutural novo: o vídeo preenche o
@@ -143,35 +145,56 @@ export function Image({ ratio, fit, alt, className, style, render, onError, ...p
         return _jsx("span", { className: cx("image", "image-broken", fit === "contain" && "image-contain", className), style: estilo, role: "img", "aria-label": alt, children: _jsx(Icon, { name: "image" }) });
     return elemento;
 }
-export function Gallery({ items, label, selected, onSelect, zoom, ratio = "1/1", className, ...props }) {
+export function Gallery({ items, label, selected, onSelect, zoom, ratio = "1/1", selectionMode = "single", selectedIds, onSelectionChange, hasMore, loading, onReachEnd, className, ...props }) {
     const s = useAureaStrings();
     const [ampliado, setAmpliado] = React.useState(null);
-    const interativo = !!onSelect || !!zoom;
+    const multipla = selectionMode === "multiple";
+    const interativo = !!onSelect || !!zoom || multipla;
     const aberto = items.find(i => i.id === ampliado);
-    return _jsxs(_Fragment, { children: [_jsx("ul", { className: cx("gallery", className), "aria-label": label ?? s.galleryLabel, ...props, children: items.map(i => {
+    const escolhidos = new Set(selectedIds);
+    const alternar = (id) => onSelectionChange?.(escolhidos.has(id) ? (selectedIds ?? []).filter(x => x !== id) : [...(selectedIds ?? []), id]);
+    const fimRef = React.useRef(null);
+    const avisar = React.useRef(onReachEnd);
+    avisar.current = onReachEnd;
+    React.useEffect(() => {
+        const fim = fimRef.current;
+        if (!fim || !hasMore || loading || typeof IntersectionObserver === "undefined")
+            return;
+        const obs = new IntersectionObserver(entradas => { if (entradas.some(e => e.isIntersecting))
+            avisar.current?.(); });
+        obs.observe(fim);
+        return () => obs.disconnect();
+    }, [hasMore, loading, items.length]);
+    return _jsxs(_Fragment, { children: [_jsx("ul", { className: cx("gallery", className), "aria-label": label ?? s.galleryLabel, "aria-busy": loading || undefined, ...props, children: items.map(i => {
                     // LEGENDA VISÍVEL TORNA A MINIATURA DECORATIVA, e quem exigiu isso foi o axe, não a
                     // teoria: com `alt` e legenda dizendo a mesma coisa, ele reprova `image-redundant-alt` e o
                     // leitor de tela anuncia o texto DUAS vezes seguidas. É a regra de figura com legenda do
                     // WAI — quando o texto ao lado já diz, a imagem entra com `alt=""`. O `alt` de verdade não
                     // se perde: ele continua nomeando a foto AMPLIADA, que é onde não há legenda ao lado.
-                    const miolo = _jsxs(_Fragment, { children: [_jsx(Image, { src: i.src, alt: i.caption != null ? "" : i.alt, ratio: ratio }), i.caption != null && _jsx("span", { className: "gallery-caption", children: i.caption })] });
+                    const foto = _jsx(Image, { src: i.src, alt: i.caption != null ? "" : i.alt, ratio: ratio });
+                    const video = i.kind === "video";
+                    const miolo = _jsxs(_Fragment, { children: [video
+                                ? _jsxs("span", { className: "gallery-media", children: [foto, _jsxs(Badge, { className: "gallery-duration", children: [_jsx(Icon, { name: "play", size: "sm" }), _jsx("span", { className: "sr-only", children: ` ${s.galleryVideo}, ` }), i.duration != null && clockTime(i.duration)] })] })
+                                : foto, i.caption != null && _jsx("span", { className: "gallery-caption", children: i.caption })] });
+                    const marcado = multipla ? escolhidos.has(i.id) : i.id === selected;
                     return _jsx("li", { className: "gallery-item", children: interativo
-                            ? _jsx("button", { type: "button", className: cx("gallery-tile", i.id === selected && "is-selected"), "aria-current": i.id === selected ? "true" : undefined, onClick: () => { onSelect?.(i.id); if (zoom)
-                                    setAmpliado(i.id); }, children: miolo })
+                            ? (multipla
+                                ? _jsx("button", { type: "button", className: cx("gallery-tile", marcado && "is-selected"), "aria-pressed": marcado, onClick: () => alternar(i.id), children: miolo })
+                                : _jsx("button", { type: "button", className: cx("gallery-tile", marcado && "is-selected"), "aria-current": marcado ? "true" : undefined, onClick: () => { onSelect?.(i.id); if (zoom)
+                                        setAmpliado(i.id); }, children: miolo }))
                             : miolo }, i.id);
-                }) }), zoom && _jsx(Dialog, { open: !!aberto, title: aberto ? (aberto.caption ?? aberto.alt) : "", onClose: () => setAmpliado(null), children: aberto && _jsx(Image, { src: aberto.src, alt: aberto.alt, fit: "contain" }) })] });
+                }) }), hasMore && _jsx("div", { ref: fimRef, className: "gallery-more", children: loading && _jsx(Spinner, {}) }), zoom && !multipla && _jsx(Dialog, { open: !!aberto, title: aberto ? (aberto.caption ?? aberto.alt) : "", onClose: () => setAmpliado(null), children: aberto && _jsx(Image, { src: aberto.src, alt: aberto.alt, fit: "contain" }) })] });
 }
 // ── Carousel (PLANO-1.0, item L1) ────────────────────────────────────────────────────────────
 // 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,
@@ -179,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.
 //
@@ -188,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;
@@ -56,11 +58,14 @@ export interface TreeNode {
     label: ReactNode;
     icon?: IconName;
     children?: TreeNode[];
+    hasChildren?: boolean;
 }
-export declare function TreeView({ items, defaultExpandedIds, onSelect, label, className }: {
+export declare function TreeView({ items, defaultExpandedIds, onSelect, onExpand, selectedId, label, className }: {
     items: TreeNode[];
     defaultExpandedIds?: string[];
     onSelect?: (node: TreeNode) => void;
+    onExpand?: (node: TreeNode) => void | Promise<unknown>;
+    selectedId?: string | null;
     label?: string;
     className?: string;
 }): ReactElement<unknown, string | React.JSXElementConstructor<any>>;