@aurea-uds/react 0.31.0 → 0.33.0

package/README.md

@@ -60,12 +60,14 @@ segue sem a função — não quebra a tela.
 
 **O arrumador fora da tela principal (`layoutWorker`).** Num mapa grande, a arrumação pode prender a
 tela por alguns segundos. O mapa aceita um trabalhador (Web Worker) que o app cria — cada empacotador
-cria trabalhador do seu jeito, e por isso quem entrega é o app. No Vite:
+cria trabalhador do seu jeito, e por isso quem entrega é o app. A Aurea publica o trabalhador por um
+caminho dela, `@aurea-uds/react/graph-worker`, que traz o do `elkjs` (o peer opcional) junto — o app
+não importa o motor por fora. No Vite:
 
 ```js
-import TrabalhadorDoElk from "elkjs/lib/elk-worker.min.js?worker";
+import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";
 
-<DependencyGraph layout="layered" layoutWorker={() => new TrabalhadorDoElk()} … />
+<DependencyGraph layout="layered" layoutWorker={() => new TrabalhadorDoMapa()} … />
 ```
 
 Em qualquer outro empacotador, o jeito que sempre funciona: copie `node_modules/elkjs/lib/elk-worker.min.js`

package/dist/actions.d.ts

@@ -1,8 +1,8 @@
 import React, { type ButtonHTMLAttributes, type HTMLAttributes, type ReactElement, type RefAttributes } from "react";
 import { type Orientation, type Responsive } from "./pure.js";
-import { type IconName } from "./system.js";
-export type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "primary-outline" | "primary-ghost" | "danger" | "danger-outline" | "danger-ghost" | "link" | "link-primary" | "link-danger" | "nav";
-export type ButtonAppearance = "solid" | "outline" | "ghost" | "link" | "nav";
+import { type IconName, type AureaIcon } from "./system.js";
+export type ButtonVariant = "primary" | "secondary" | "tertiary" | "outline" | "ghost" | "primary-outline" | "primary-ghost" | "danger" | "danger-outline" | "danger-ghost" | "link" | "link-primary" | "link-danger" | "nav" | "danger-soft";
+export type ButtonAppearance = "solid" | "outline" | "ghost" | "link" | "nav" | "soft";
 export type ButtonTone = "neutral" | "brand" | "danger" | "success" | "warning" | "info";
 export type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
 /** Resolve os dois eixos (ou o atalho) na classe que o core pinta. Exportada porque o teste
@@ -20,10 +20,13 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Re
     tone?: ButtonTone;
     size?: Responsive<ComponentSize>;
     loading?: boolean;
-    leadingIcon?: IconName;
-    trailingIcon?: IconName;
+    leadingIcon?: AureaIcon;
+    trailingIcon?: AureaIcon;
     href?: string;
     fullWidth?: boolean;
+    /** Menos peso (15/10/2026): a letra apagada e um degrau menor (12 no `sm`) — o botão de ferramenta de um topo de
+     *  site, como o "Theme" da referência. A caixa e o fundo são os da aparência escolhida. */
+    quiet?: boolean;
     /** C-03 (24/09/2026): numa fila (`Cluster`), divide o espaço em partes iguais com os outros botões
      *  que também têm `grow`. O `fullWidth` não serve ali: ele pede a linha inteira. */
     grow?: boolean;
@@ -50,7 +53,9 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Re
      * quebrar, e por isso este é o momento mais barato que vai existir.
      */
     pressed?: boolean;
-    kbd?: string;
+    /** O atalho, à mostra e anunciado. Texto: uma caixinha só ("⌘K"). LISTA (15/10/2026): uma caixinha por tecla, como
+     *  a busca da referência (`["Ctrl", "K"]`), e o leitor de tela recebe a combinação (`Control+K`). */
+    kbd?: string | readonly string[];
     /**
      * GAR-14 (0.28.0): o botão COMPARTILHA. Ele pergunta ao navegador se sabe compartilhar este link
      * (`navigator.canShare`) — detectar o recurso, e não adivinhar o aparelho, é o padrão da web. Sabe
@@ -80,7 +85,11 @@ interface ToggleBase {
     disabled?: boolean;
     id?: string;
     className?: string;
+    /** 0.32.0, o `ToggleButton` da referência: `default` com o fundo neutro (o padrão), `ghost` sem fundo
+     *  (o desenho de até a 0.31.0). O ligado é o idioma "selecionado" da Aurea nos dois. */
+    variant?: ToggleVariant;
 }
+export type ToggleVariant = "default" | "ghost";
 type ToggleChildren = Exclude<React.ReactNode, boolean | null | undefined>;
 export type ToggleProps = ToggleBase & ({
     children: ToggleChildren;
@@ -89,19 +98,38 @@ export type ToggleProps = ToggleBase & ({
     children?: never;
     label: string;
 });
-export declare function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size, disabled, id, className, children }: ToggleProps): React.JSX.Element;
+export declare function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant }: ToggleProps): React.JSX.Element;
 export interface IconButtonProps extends Omit<ButtonProps, "children"> {
     label: string;
-    icon: IconName;
+    icon: AureaIcon;
 }
 export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
-export interface ThemeToggleProps extends Omit<IconButtonProps, "icon" | "label" | "onClick" | "variant" | "appearance" | "tone" | "href" | "target" | "rel" | "download" | "render" | "kbd" | "loading" | "leadingIcon" | "trailingIcon" | "fullWidth" | "share"> {
+export interface CloseButtonProps extends Omit<ButtonProps, "quiet" | "variant" | "appearance" | "tone" | "size" | "loading" | "leadingIcon" | "trailingIcon" | "href" | "target" | "rel" | "download" | "render" | "kbd" | "fullWidth" | "grow" | "pressed" | "share"> {
+    /** O nome que o leitor de tela anuncia. Padrão: a frase `close` ("Close"/"Fechar"). */
+    label?: string;
+}
+export declare const CloseButton: React.ForwardRefExoticComponent<Omit<CloseButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+export interface ThemeToggleProps extends Omit<IconButtonProps, "quiet" | "icon" | "label" | "onClick" | "variant" | "appearance" | "tone" | "href" | "target" | "rel" | "download" | "render" | "kbd" | "loading" | "leadingIcon" | "trailingIcon" | "fullWidth" | "share"> {
+    /** `"light-dark"` (o padrão): o botão que alterna. `"light-dark-system"` (15/10/2026): a chave de três posições do
+     *  topo da referência — claro, escuro e sistema (seguir o do computador, e mudar junto). */
+    mode?: "light-dark" | "light-dark-system";
 }
 export declare const ThemeToggle: React.ForwardRefExoticComponent<Omit<ThemeToggleProps, "ref"> & RefAttributes<HTMLButtonElement>>;
-export declare function ButtonGroup({ label, orientation, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement>, RefAttributes<HTMLDivElement> {
     label?: string;
     orientation?: Responsive<Orientation>;
-}): React.JSX.Element;
+    /** O desenho de todos os botões de dentro; cada um pode trocar o seu. */
+    variant?: ButtonVariant;
+    /** O tamanho de todos os botões de dentro; cada um pode trocar o seu. */
+    size?: Responsive<ComponentSize>;
+    /** Ocupa a largura do pai, e os botões repartem em partes iguais. */
+    fullWidth?: boolean;
+    /** Desliga todos os botões de dentro. */
+    disabled?: boolean;
+    /** Botões soltos (cápsulas com vão de 4), em vez de colados. */
+    detached?: boolean;
+}
+export declare function ButtonGroup({ label, orientation, variant, size, fullWidth, disabled, detached, className, ...props }: ButtonGroupProps): React.JSX.Element;
 export declare function Toolbar({ orientation, label, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     orientation?: Responsive<Orientation>;
     label?: string;
@@ -113,7 +141,7 @@ export declare function ToolbarSeparator({ className, ...props }: HTMLAttributes
 export interface ToolbarButtonProps extends Omit<ButtonProps, "share"> {
 }
 export declare const ToolbarButton: React.ForwardRefExoticComponent<Omit<ToolbarButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
-export declare function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children }: {
+export interface ToggleGroupProps {
     value?: string[];
     defaultValue?: string[];
     onValueChange?: (value: string[]) => void;
@@ -123,5 +151,12 @@ export declare function ToggleGroup({ value, defaultValue, onValueChange, multip
     label?: string;
     className?: string;
     children: React.ReactNode;
-}): React.JSX.Element;
+    /** O tamanho de todos os botões de dentro; cada um pode trocar o seu (valor simples, como o dela). */
+    size?: Extract<ComponentSize, "sm" | "md" | "lg">;
+    /** Ocupa a largura do pai, e os botões repartem em partes iguais. */
+    fullWidth?: boolean;
+    /** Botões soltos (vão de 4), em vez de colados. */
+    detached?: boolean;
+}
+export declare function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children, size, fullWidth, detached }: ToggleGroupProps): React.JSX.Element;
 export {};

package/dist/actions.js

@@ -15,19 +15,25 @@ import { Icon, useAureaTheme } from "./system.js";
 // O dicionário que desachata o enum. É a ÚNICA fonte da correspondência: o gate do
 // `validate.py` lê daqui para provar que todo par ou tem regra no core ou está declarado
 // ausente com motivo, e a ficha do registry declara os mesmos dois eixos.
+// O `secondary` não tem célula própria nos dois eixos (a letra da marca no fundo neutro não é nenhum
+// par aparência × tom): os eixos dele são os do `tertiary`, que valem só quando quem chama troca a
+// aparência ou o tom — aí sai a célula pedida, como em todo atalho.
 const EIXOS = {
-    primary: ["solid", "brand"], secondary: ["solid", "neutral"],
+    primary: ["solid", "brand"], secondary: ["solid", "neutral"], tertiary: ["solid", "neutral"],
     outline: ["outline", "neutral"], ghost: ["ghost", "neutral"],
     "primary-outline": ["outline", "brand"], "primary-ghost": ["ghost", "brand"],
     danger: ["solid", "danger"], "danger-outline": ["outline", "danger"], "danger-ghost": ["ghost", "danger"],
     link: ["link", "neutral"], "link-primary": ["link", "brand"], "link-danger": ["link", "danger"],
-    nav: ["nav", "neutral"]
+    nav: ["nav", "neutral"], "danger-soft": ["soft", "danger"]
 };
+// Atalhos que NÃO têm classe própria (15/10/2026): saem como os dois eixos (`btn-soft btn-tone-danger`), e herdam as
+// regras de cor do tom nos dois temas em vez de repeti-las numa classe nova.
+const SO_EIXOS = new Set(["danger-soft"]);
 // caminho de volta: par → nome antigo. Existir aqui significa "o core já pinta esta célula com
 // uma classe própria", e é o que garante que NENHUMA baseline se mexe: `appearance="outline"`
 // + `tone="danger"` emite `.btn-danger-outline`, o mesmo DOM de sempre.
 const CLASSE_ANTIGA = new Map(Object.entries(EIXOS)
-    .map(([v, [a, t]]) => [`${a}/${t}`, v]));
+    .filter(([v]) => v !== "secondary" && !SO_EIXOS.has(v)).map(([v, [a, t]]) => [`${a}/${t}`, v]));
 /** Resolve os dois eixos (ou o atalho) na classe que o core pinta. Exportada porque o teste
  *  cobra a matriz inteira, e porque quem monta um botão à mão precisa da mesma conta.
  *
@@ -37,7 +43,10 @@ const CLASSE_ANTIGA = new Map(Object.entries(EIXOS)
  *  `--success`/`--success-foreground` e os irmãos são. `outline` voltou a ser só uma aparência
  *  que se pede, nunca o que sobra quando a nossa paleta não dá conta. */
 export function buttonSkin(variant, appearance, tone) {
-    const [a0, t0] = EIXOS[variant ?? "secondary"];
+    // A variação sem eixo pedido é a própria classe — é o caminho do `secondary`, que não tem célula.
+    if (appearance === undefined && tone === undefined && !(variant && SO_EIXOS.has(variant)))
+        return `btn-${variant ?? "tertiary"}`;
+    const [a0, t0] = EIXOS[variant ?? "tertiary"];
     const a = appearance ?? a0, t = tone ?? t0;
     const antiga = CLASSE_ANTIGA.get(`${a}/${t}`);
     return antiga ? `btn-${antiga}` : cx(`btn-${a}`, `btn-tone-${t}`);
@@ -90,10 +99,21 @@ async function compartilhar(botao, dados, s, dentroDoProvider) {
         avisar(true);
     }
 }
+const GrupoDeBotoesContext = React.createContext(null);
 // type="button" por default: o default do HTML é submit, e um "Cancelar"/"Remover"
 // dentro de <form> dispararia a ação principal (auditoria 18/07/2026, ALTO 1).
 // Quem quer submeter passa type="submit" explícito (como o MessageComposer faz).
-export const Button = forwardRef(function Button({ variant, appearance, tone, size = "md", loading, leadingIcon, trailingIcon, className, children, disabled, type = "button", href, fullWidth, grow, target, rel, download, pressed, kbd, onClick, onClickCapture, "aria-disabled": ariaDisabled, render, share, ...props }, ref) {
+// O nome da combinação para o `aria-keyshortcuts`: as teclas juntas por "+", com os nomes da especificação (o ESPAÇO
+// separa atalhos ALTERNATIVOS — "Ctrl K" quer dizer "Ctrl" ou "K"). O texto solto passa como veio, como antes.
+const NOME_DA_TECLA = { ctrl: "Control", control: "Control", "⌃": "Control", cmd: "Meta", command: "Meta", "⌘": "Meta", meta: "Meta",
+    shift: "Shift", "⇧": "Shift", alt: "Alt", option: "Alt", "⌥": "Alt", enter: "Enter", "↵": "Enter", esc: "Escape", escape: "Escape" };
+const atalhoAnunciado = (kbd) => typeof kbd === "string" ? (kbd || undefined)
+    : kbd && kbd.length > 0 ? kbd.map(k => NOME_DA_TECLA[k.toLowerCase()] ?? k).join("+") : undefined;
+export const Button = forwardRef(function Button({ variant: variantPedida, appearance, tone, size: sizePedido, quiet, loading, leadingIcon, trailingIcon, className, children, disabled: disabledPedido, type = "button", href, fullWidth, grow, target, rel, download, pressed, kbd, onClick, onClickCapture, "aria-disabled": ariaDisabled, render, share, ...props }, ref) {
+    const grupo = React.useContext(GrupoDeBotoesContext);
+    const variant = variantPedida ?? grupo?.variant;
+    const size = sizePedido ?? grupo?.size ?? "md";
+    const disabled = disabledPedido ?? grupo?.disabled;
     // G-AXIS-04 — `size` aceita valor simples, responsivo por viewport ou adaptativo por container.
     // SOMATIVO por construção: valor simples continua emitindo `btn-sm`, byte por byte a mesma classe
     // de antes, e por isso nenhuma baseline se mexe. Só o valor responsivo entra pela camada genérica
@@ -101,7 +121,7 @@ export const Button = forwardRef(function Button({ variant, appearance, tone, si
     // Quem decide é o CSS: nada aqui observa largura, e o HTML do servidor já sai correto.
     const responsivo = ehResponsivo(size);
     const base = valorBase(size) ?? "md";
-    const cls = cx("btn", buttonSkin(variant, appearance, tone), responsivo ? classesResponsivas("size", size) : (base !== "md" && `btn-${base}`), fullWidth && "btn-block", grow && "btn-grow", className);
+    const cls = cx("btn", buttonSkin(variant, appearance, tone), responsivo ? classesResponsivas("size", size) : (base !== "md" && `btn-${base}`), fullWidth && "btn-block", grow && "btn-grow", quiet && "btn-quiet", className);
     // kbd dentro do botão: mostra o atalho E o anuncia (aria-keyshortcuts), senão é enfeite.
     // 🔴 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:
@@ -111,7 +131,7 @@ export const Button = forwardRef(function Button({ variant, appearance, tone, si
     // 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;
-    const inner = _jsxs(_Fragment, { children: [loading ? _jsx("span", { className: "spinner" }) : leadingIcon && _jsx(Icon, { name: leadingIcon }), (temConteudo || !loading) && _jsx("span", { children: children }), kbd && _jsx(Kbd, { children: kbd }), trailingIcon && _jsx(Icon, { name: trailingIcon })] });
+    const inner = _jsxs(_Fragment, { children: [loading ? _jsx("span", { className: "spinner" }) : leadingIcon && _jsx(Icon, { name: leadingIcon }), (temConteudo || !loading) && _jsx("span", { children: children }), typeof kbd === "string" ? (kbd && _jsx(Kbd, { className: "btn-kbd", children: kbd })) : kbd && kbd.length > 0 && _jsx("span", { className: "btn-kbds", children: kbd.map((k, i) => _jsx(Kbd, { className: "btn-kbd", children: k }, i)) }), trailingIcon && _jsx(Icon, { name: trailingIcon })] });
     // 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
@@ -121,7 +141,7 @@ export const Button = forwardRef(function Button({ variant, appearance, tone, si
     // Mesmo remendo do AUD-0004, que já barrava o link desabilitado; aqui ele alcança o <button>.
     const inerte = ariaDisabled === true || ariaDisabled === "true";
     const off = disabled || loading;
-    const shared = { "aria-keyshortcuts": kbd || undefined, "aria-busy": loading || undefined };
+    const shared = { "aria-keyshortcuts": atalhoAnunciado(kbd), "aria-busy": loading || undefined };
     // GAR-14: o `share` emite a mesma marcação que o `aurea.js` lê ([data-aurea-share]) — o catálogo
     // estático não hidrata, e é ela que faz o botão funcionar lá. Os textos vão junto, na língua do app.
     const s = useAureaStrings();
@@ -185,7 +205,9 @@ function temConteudoVisivel(children) {
 // 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á.
-export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size, disabled, id, className, children }) {
+export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant = "default" }) {
+    const grupo = React.useContext(GrupoDeBotoesContext);
+    const size = sizePedido ?? grupo?.size;
     // O tipo barra o consumidor TypeScript; este aviso barra o de JavaScript, que não tem tipo nenhum.
     // Sem gate por NODE_ENV de propósito: o `dist` é saída de `tsc`, então `process` não existe no
     // navegador e a referência quebraria o render — e um controle sem nome merece aparecer em produção
@@ -196,28 +218,48 @@ export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon,
     const rotuloVisivel = typeof label === "string" && label.trim().length > 0;
     if (!textoVisivel && !rotuloVisivel)
         console.error("Aurea: <Toggle> sem `children` visível e sem `label` não tem nome acessível — quem usa leitor de tela encontra um botão anônimo. Passe `label` quando o toggle for só ícone.");
-    return _jsxs(BaseToggle, { id: id, value: value, disabled: disabled, pressed: pressed, defaultPressed: defaultPressed, onPressedChange: soOValor(onPressedChange), "aria-label": textoVisivel ? undefined : (rotuloVisivel ? label : undefined), className: cx("btn", "btn-ghost", size !== "md" && `btn-${size}`, !textoVisivel && "btn-icon", "toggle", className), children: [icon && _jsx(Icon, { name: icon }), children] });
+    // O tamanho pela MESMA conta do `Button` (0.32.0): até a 0.31.0 era `size!=="md"&&\`btn-${size}\``, e
+    // sem `size` saía a classe `btn-undefined` (medido no catálogo, nos três botões do `ToggleGroup`); com
+    // valor responsivo sairia `btn-[object Object]`.
+    const tamanho = ehResponsivo(size) ? classesResponsivas("size", size) : ((valorBase(size) ?? "md") !== "md" && `btn-${valorBase(size)}`);
+    return _jsxs(BaseToggle, { id: id, value: value, disabled: disabled, pressed: pressed, defaultPressed: defaultPressed, onPressedChange: soOValor(onPressedChange), "aria-label": textoVisivel ? undefined : (rotuloVisivel ? label : undefined), className: cx("btn", variant === "ghost" ? "btn-ghost" : "btn-tertiary", tamanho, !textoVisivel && "btn-icon", "toggle", className), children: [icon && _jsx(Icon, { name: icon }), children] });
 }
 // default ghost (não secondary): um ícone-ação solto — hambúrguer, tema, fechar — é sem
 // caixa por convenção (pedido do Victor: hambúrguer sem borda). Quem quer a caixa passa
 // variant. Alinha o React ao HTML dos docs, onde .btn-icon já é transparente.
 // Ocupado, o glifo SAI e a rodinha fica sozinha no centro — ver o `inner` do `Button`.
-export const IconButton = forwardRef(function IconButton({ label, icon, variant = "ghost", className, loading, ...props }, ref) { return _jsx(Button, { ref: ref, variant: variant, className: cx("btn-icon", className), "aria-label": label, loading: loading, ...props, children: loading ? null : _jsx(Icon, { name: icon }) }); });
-export const ThemeToggle = forwardRef(function ThemeToggle({ className, ...props }, ref) {
-    const { theme, toggleTheme } = useAureaTheme();
+// Dentro de um grupo com `variant`, o do grupo vale (0.32.0); solto, o padrão continua o fantasma.
+export const IconButton = forwardRef(function IconButton({ label, icon, variant, className, loading, ...props }, ref) { const grupo = React.useContext(GrupoDeBotoesContext); return _jsx(Button, { ref: ref, variant: variant ?? (grupo?.variant ? undefined : "ghost"), className: cx("btn-icon", className), "aria-label": label, loading: loading, ...props, children: loading ? null : _jsx(Icon, { name: icon }) }); });
+export const CloseButton = forwardRef(function CloseButton({ label, className, children, ...props }, ref) {
+    const s = useAureaStrings();
+    return _jsx(Button, { ref: ref, variant: "tertiary", className: cx("close-button", className), "aria-label": label ?? s.close, ...props, children: children ?? _jsx(Icon, { name: "x", weight: "bold" }) });
+});
+export const ThemeToggle = forwardRef(function ThemeToggle({ className, mode = "light-dark", ...props }, ref) {
+    const { theme, preference, toggleTheme, setTheme } = useAureaTheme();
     const s = useAureaStrings();
     const escuro = theme === "dark";
+    const nome = React.useId();
+    // A CHAVE DE TRÊS POSIÇÕES (15/10/2026, o Victor: "A, B, C, pode"): a do topo da referência, medida nela — a
+    // cápsula de 34 com as três opções de 26 e o glifo de 16. São botões de opção NATIVOS, como as amostras do
+    // `ColorSwatch`: a escolha única e as setas são do navegador. A escolhida tem o glifo cheio (ADR-0053) e a pele da
+    // aba escolhida (ADR-0059). Quem escolhe é o provider (`"system"` segue o sistema).
+    if (mode === "light-dark-system") {
+        const opcoes = [["light", "sun", s.themeLight], ["dark", "moon", s.themeDark], ["system", "monitor", s.themeSystem]];
+        return _jsx("div", { role: "radiogroup", "aria-label": s.themeChoice, className: cx("theme-switch", className), children: opcoes.map(([v, icone, rotulo]) => {
+                const marcada = preference === v;
+                return _jsxs("label", { className: "theme-switch-option", children: [_jsx("input", { type: "radio", className: "theme-switch-input", name: nome, value: v, checked: marcada, disabled: props.disabled, "aria-label": rotulo, onChange: () => setTheme(v) }), _jsx(Icon, { name: icone, size: "sm", weight: marcada ? "fill" : "regular" })] }, v);
+            }) });
+    }
     // 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 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" }) });
 });
-// ButtonGroup: agrupamento semântico. Sem roving tabindex — cada botão continua tabulável (use Toolbar para roving).
-// `orientation` (G-AXIS-01) muda só o EIXO do layout, não a semântica: `role="group"` não tem
-// noção de direção, e por isso — ao contrário do `Toolbar` e do `ToggleGroup`, que navegam por
-// seta e precisam saber para que lado a seta anda — aqui não há `aria-orientation`. Anunciar
-// orientação num grupo que não navega seria prometer teclado que não existe.
-export function ButtonGroup({ label, orientation, className, ...props }) { const s = useAureaStrings(); return _jsx("div", { role: "group", "aria-label": label ?? s.optionsLabel, className: cx("btn-group", peleDoEixo("btn-group", orientation, "horizontal", "btn-group"), className), ...props }); }
+export function ButtonGroup({ label, orientation, variant, size, fullWidth, disabled, detached, className, ...props }) {
+    const s = useAureaStrings();
+    const grupo = React.useMemo(() => ({ variant, size, disabled }), [variant, size, disabled]);
+    return _jsx(GrupoDeBotoesContext.Provider, { value: grupo, children: _jsx("div", { role: "group", "aria-label": label ?? s.optionsLabel, className: cx("btn-group", peleDoEixo("btn-group", orientation, "horizontal", "btn-group"), detached && "btn-group-detached", fullWidth && "btn-group-full", className), ...props }) });
+}
 // Toolbar: roving tabindex (setas navegam, Tab entra/sai) via Base UI.
 // G-AXIS-06 — o valor responsivo RESOLVIDO é a única fonte de verdade: ele vai para o motor, o
 // motor publica `data-orientation`/`aria-orientation` e ajusta o teclado, e a pele reage ao
@@ -233,18 +275,9 @@ export function Toolbar({ orientation, label, className, ...props }) {
 export function ToolbarGroup({ label, className, ...props }) { return _jsx(BaseToolbar.Group, { "aria-label": label, className: cx("toolbar-group", className), ...props }); }
 export function ToolbarSeparator({ className, ...props }) { return _jsx(BaseToolbar.Separator, { className: cx("toolbar-sep", className), ...props }); }
 export const ToolbarButton = forwardRef(function ToolbarButton({ variant = "ghost", ...props }, ref) { return _jsx(BaseToolbar.Button, { ref: ref, disabled: props.disabled, render: _jsx(Button, { variant: variant, ...props }) }); });
-// TOGGLE GROUP — vários Toggle com estado compartilhado e navegação por seta entre eles.
-//
-// Não é o SegmentedControl, e confundir os dois constrói a coisa errada com o nome certo: o
-// `SegmentedControl` é escolha ÚNICA e obrigatória entre alternativas de uma mesma dimensão
-// ("dia / semana / mês") e se parece com uma cápsula; aqui cada botão liga e desliga por conta
-// própria, `multiple` permite vários ao mesmo tempo, e zero selecionado é estado legítimo. É a
-// barra de formatação de um editor, não um filtro de período.
-//
-// O motor dá o roving tabindex, o `loopFocus` e o contrato de pressionado; a pele é a do
-// `.btn-group`, porque um grupo de botões é o que isto é.
-export function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children }) {
+export function ToggleGroup({ value, defaultValue, onValueChange, multiple, orientation, disabled, label, className, children, size, fullWidth, detached }) {
     const ancora = useRef(null);
     const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
-    return _jsx(BaseToggleGroup, { ref: ancora, value: value, defaultValue: defaultValue, onValueChange: soOValor(onValueChange), multiple: multiple, orientation: resolvida, disabled: disabled, "aria-label": label, className: cx("toggle-group", className), children: children });
+    const grupo = React.useMemo(() => ({ size }), [size]);
+    return _jsx(GrupoDeBotoesContext.Provider, { value: grupo, children: _jsx(BaseToggleGroup, { ref: ancora, value: value, defaultValue: defaultValue, onValueChange: soOValor(onValueChange), multiple: multiple, orientation: resolvida, disabled: disabled, "aria-label": label, className: cx("toggle-group", detached && "toggle-group-detached", fullWidth && "toggle-group-full", className), children: children }) });
 }

package/dist/agents.js

@@ -100,7 +100,7 @@ export function HumanApproval({ title, description, details, risk, reasoning, de
     const s = useAureaStrings();
     return _jsxs("section", { className: cx("card", "approval", className), "aria-label": typeof title === "string" ? title : s.approvalLabel, ...props, children: [_jsxs("header", { className: "approval-head", children: [_jsx("strong", { children: title }), risk && _jsx(Badge, { variant: risk === "high" ? "danger" : risk === "medium" ? "warning" : "neutral", children: s.approvalRisk[risk] })] }), description && _jsx("p", { className: "approval-desc", children: description }), !!details?.length && _jsx(DataList, { items: details }), reasoning && _jsx("p", { className: "approval-reason", children: reasoning }), deadline && _jsxs("p", { className: "hint", children: [s.approvalDeadline, ": ", deadline] }), decision
                 ? _jsx(Alert, { variant: decision === "approved" ? "success" : "warning", children: decision === "approved" ? s.approvalApproved : s.approvalDenied })
-                : _jsxs("footer", { className: "approval-actions", children: [_jsx(Button, { variant: "secondary", onClick: onDeny, children: s.approvalDeny }), _jsx(Button, { variant: "primary", onClick: onApprove, children: s.approvalApprove })] })] });
+                : _jsxs("footer", { className: "approval-actions", children: [_jsx(Button, { variant: "tertiary", onClick: onDeny, children: s.approvalDeny }), _jsx(Button, { variant: "primary", onClick: onApprove, children: s.approvalApprove })] })] });
 }
 // ToolPermission — o que cada ferramenta pode, sem perguntar de novo.
 //

package/dist/calendar.d.ts

@@ -1,6 +1,43 @@
 import React from "react";
-import { DayPicker } from "react-day-picker";
+import { DayPicker, type DateRange, type DayPickerLocale } from "react-day-picker";
+import { type Responsive } from "./pure.js";
+import { type IconName } from "./system.js";
+import type { FieldSize } from "./markup.js";
 export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
     label?: string;
 };
 export declare function Calendar({ label, className, classNames, ...props }: CalendarProps): React.JSX.Element;
+export interface DatePickerBase {
+    minimumDate?: Date;
+    maximumDate?: Date;
+    disabled?: boolean;
+    size?: Responsive<FieldSize>;
+    /** A língua do campo E do calendário: o objeto de `react-day-picker/locale` (`import {ptBR} from
+     *  "react-day-picker/locale"`), o mesmo que o `Calendar` recebe. Padrão: inglês, o padrão do motor. */
+    locale?: DayPickerLocale;
+    /** Como a data vira texto no gatilho. Padrão: dia, mês curto e ano na língua do `locale` (sem ele, inglês). */
+    format?: (d: Date) => string;
+    /** O texto do gatilho vazio. Padrão: a frase `datePlaceholder` (ou `dateRangePlaceholder` no intervalo). */
+    placeholder?: string;
+    /** O ícone no fim do gatilho. Padrão: `calendar`; `false` tira. */
+    icon?: IconName | false;
+    /** Vai no formulário como `aaaa-mm-dd`; no intervalo, `aaaa-mm-dd/aaaa-mm-dd` (o intervalo da ISO 8601). */
+    name?: string;
+    id?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+    "aria-describedby"?: string;
+}
+export type DatePickerProps = DatePickerBase & ({
+    range?: false;
+    value?: Date;
+    defaultValue?: Date;
+    onChange?: (d: Date) => void;
+} | {
+    range: true;
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (r: DateRange) => void;
+});
+export declare function DatePicker(props: DatePickerProps): React.JSX.Element;

package/dist/calendar.js

@@ -1,7 +1,44 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A diretiva aqui NÃO vem de um hook nosso — este arquivo não chama nenhum. Vem do motor: o
+// `react-day-picker` usa estado e NÃO publica `"use client"` no dist dele (medido em
+// 06/08/2026, junto com `recharts` e `@tanstack/react-table`, que também não publicam; o
+// `@base-ui/react` publica). Sem a diretiva, o módulo seria de servidor e o motor quebraria
+// dentro dele. É o caso que a regra "tem hook? leva diretiva" não enxerga, e por isso o
+// check 26 do validate.py também olha para essas três importações.
+//
+// Lote 4 do BUILDING.md (01/08/2026). SUBPATH PRÓPRIO, como ./chart, ./data-grid e ./qrcode: o
+// único componente que precisa do `react-day-picker`, que é peer OPCIONAL.
+//
+// O MOTOR, e por que este: o Base UI — que já é dependência dura daqui — **não tem** calendário
+// nem campo de data. Medido em 01/08/2026 na lista de exports do 1.6.0, que é a versão mais
+// recente. Então o motor era decisão aberta, e a resposta é a mesma de uma das referências: react-day-picker.
+//
+// O que foi medido antes de escolher (o registro completo está no REFERENCES.md):
+//   • renderiza no SERVIDOR — 8618 bytes, <table> de verdade, 42 células. Ao contrário do
+//     Recharts, então o catálogo não precisa de prerender nenhum;
+//   • a semântica já vem certa: role="grid"/"gridcell", aria-selected, <button> por dia,
+//     o mês em role="status" aria-live, e <thead aria-hidden> com <th scope="col">;
+//   • tem API de tema PRÓPRIA (`classNames`), que é o que permite manter todo nome `rdp-*`
+//     fora do nosso CSS — mesma saída da pele do CodeEditor, que vem pelo EditorView.theme.
+//
+// O que NÃO entrou: o motor headless que outra das referências escolheu. Trazer um segundo motor
+// headless para conviver com o Base UI é criar padrão paralelo, que o protocolo proíbe.
+//
+// ~~E o que NÃO se constrói aqui: um `DatePicker`. Aquela mesma referência não tem componente-raiz para isso e
+// diz por quê — seletor de data é composição de Popover com calendário, e a Aurea já tem os
+// dois. A composição está registrada como PATTERN, que é o veículo da casa para isso.~~
+// 13/10/2026 (ADR-0068): o `DatePicker` ENTRA, e mora aqui. A referência principal tem a peça (a frase
+// acima falava de outra referência), o nativo da Aurea já tem um `DatePicker`, e quase todo sistema do
+// mercado entrega o seletor de data como componente — deixado como padrão, cada app refazia o foco, a
+// janela e a leitura da data, e cada um saía diferente. Escolha do Victor: *"data B"*. Mora neste arquivo
+// pelo mesmo motivo do `Calendar`: o motor de calendário é dependência OPCIONAL, e só este caminho o puxa.
+import React from "react";
 import { DayPicker } from "react-day-picker";
-import { cx } from "./internal.js";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { cx, useAureaStrings, usePortalContainer, controlesRotulaveis } from "./internal.js";
+import { peleDoEixo } from "./pure.js";
+import { Icon } from "./system.js";
 // Só TRÊS nomes são renomeados, e é de propósito. Todo o resto da pele é escrito contra ELEMENTO
 // (`.calendar table`, `.calendar th`, `.calendar td button`) e contra os `data-*` que o motor já
 // emite (`data-selected`, `data-today`, `data-outside`, `data-disabled`, `data-hidden`) — e
@@ -25,3 +62,79 @@ export function Calendar({ label, className, classNames, ...props }) {
     // motor não deixa a raiz dele ser um `group`, e nenhum dos dois papéis dele serve aqui.
     return label ? _jsx("div", { role: "group", "aria-label": label, children: grade }) : grade;
 }
+// A data do formulário pela data LOCAL: `toISOString` passa por UTC e, à noite no Brasil, daria o dia seguinte.
+const dataIso = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+// A língua vem do `locale`, a MESMA que o calendário usa, e nunca do ambiente: com a língua do ambiente, o
+// servidor escrevia "12 de ago. de 2026" e o navegador "Aug 12, 2026" — medido em 13/10/2026, erro de
+// hidratação 418 no catálogo. Sem `locale`, inglês, como o motor (a regra da casa do `agents.tsx`: padrão fixo).
+const formatoPadrao = (d, locale) => d.toLocaleDateString(locale?.code ?? "en-US", { day: "numeric", month: "short", year: "numeric" });
+export function DatePicker(props) {
+    const { minimumDate, maximumDate, disabled, size, locale, format, placeholder, icon = "calendar", name, id, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby } = props;
+    const s = useAureaStrings();
+    const portal = usePortalContainer();
+    const [aberta, setAberta] = React.useState(false);
+    const cliques = React.useRef(0);
+    const gatilho = React.useRef(null);
+    const [idDoRotulo, setIdDoRotulo] = React.useState();
+    const [interno, setInterno] = React.useState(props.defaultValue);
+    const valor = props.value !== undefined ? props.value : interno;
+    const formatar = format ?? ((d) => formatoPadrao(d, locale));
+    let texto;
+    let campo;
+    if (props.range) {
+        const r = valor;
+        if (r?.from)
+            texto = r.to && r.to.getTime() !== r.from.getTime() ? `${formatar(r.from)} – ${formatar(r.to)}` : formatar(r.from);
+        if (r?.from)
+            campo = `${dataIso(r.from)}/${dataIso(r.to ?? r.from)}`;
+    }
+    else {
+        const d = valor;
+        if (d) {
+            texto = formatar(d);
+            campo = dataIso(d);
+        }
+    }
+    const vazio = texto === undefined;
+    const limites = [minimumDate && { before: minimumDate }, maximumDate && { after: maximumDate }].filter(Boolean);
+    const comum = {
+        disabled: limites.length ? limites : undefined,
+        startMonth: minimumDate, endMonth: maximumDate, locale,
+        defaultMonth: props.range ? valor?.from : valor,
+        autoFocus: true,
+    };
+    // O intervalo é NOSSO, pelo dia clicado (o 2º argumento do motor), e não o que o motor calcula: o dele
+    // ESTENDE o intervalo que já existe — com 1 a 3 escolhido, clicar 15 e 20 dava 1 a 20. Aqui, cada
+    // abertura começa um intervalo novo: o 1º clique é uma ponta, o 2º a outra, em qualquer ordem.
+    const calendario = props.range
+        ? _jsx(Calendar, { ...comum, mode: "range", selected: valor, onSelect: (_, dia) => {
+                cliques.current += 1;
+                const inicio = valor?.from;
+                const r = cliques.current === 1 || !inicio ? { from: dia, to: undefined }
+                    : dia < inicio ? { from: dia, to: inicio } : { from: inicio, to: dia };
+                if (props.value === undefined)
+                    setInterno(r);
+                props.onChange?.(r);
+                if (cliques.current >= 2)
+                    setAberta(false);
+            } })
+        : _jsx(Calendar, { ...comum, mode: "single", selected: valor, onSelect: (d) => {
+                if (!d)
+                    return;
+                if (props.value === undefined)
+                    setInterno(d);
+                props.onChange?.(d);
+                setAberta(false);
+            } });
+    return _jsxs(BasePopover.Root, { open: aberta, onOpenChange: (o) => {
+            // O `<label for>` que nomeia o gatilho (o do `Field` tem `id`), pela ligação do próprio navegador.
+            if (o) {
+                cliques.current = 0;
+                setIdDoRotulo(gatilho.current?.labels?.[0]?.id || undefined);
+            }
+            setAberta(o);
+        }, children: [_jsxs(BasePopover.Trigger, { ref: gatilho, disabled: disabled, id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: cx("select", "select-trigger", "date-picker-trigger", peleDoEixo("select", size), className), children: [_jsx("span", { className: "select-value", "data-placeholder": vazio ? "" : undefined, lang: vazio ? undefined : locale?.code, children: texto ?? placeholder ?? (props.range ? s.dateRangePlaceholder : s.datePlaceholder) }), icon !== false && _jsx(Icon, { name: icon })] }), name && _jsx("input", { type: "hidden", name: name, value: campo ?? "" }), _jsx(BasePopover.Portal, { container: portal, children: _jsx(BasePopover.Positioner, { className: "positioner", side: "bottom", align: "start", sideOffset: 6, children: _jsx(BasePopover.Popup, { className: "popover date-picker-popover", "aria-labelledby": ariaLabelledby ?? idDoRotulo, "aria-label": (ariaLabelledby ?? idDoRotulo) ? undefined
+                            : ariaLabel ?? (props.range ? s.dateRangePlaceholder : s.datePlaceholder), children: calendario }) }) })] });
+}
+// O `Field` nomeia o gatilho com `<label for>`: o `id` que ele injeta vai para o botão (ver `internal.tsx`).
+controlesRotulaveis.add(DatePicker);

package/dist/code-client.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
-export declare function CodeBlock({ children, language, copyable, className }: {
+export declare function CodeBlock({ children, language, copyable, preview, className }: {
     children: string;
     language?: string;
     copyable?: boolean;
+    /** A prévia viva do código: com ela, o bloco vira a caixa de exemplo, com as abas Prévia | Código. */
+    preview?: React.ReactNode;
     className?: string;
 }): React.JSX.Element;

package/dist/code-client.js

@@ -9,7 +9,29 @@ import { Icon } from "./system.js";
 // copyable: o gatilho é marcado com data-aurea-copy e o COMPORTAMENTO mora no aurea.js do
 // core (uma implementação para React e para HTML puro). O onClick daqui atende quem só
 // carrega o pacote React; ele para a propagação pro core não copiar duas vezes.
-export function CodeBlock({ children, language = "text", copyable, className }) {
+// DOC-02 (0.32.0): a CAIXA DE EXEMPLO do site da Aurea virou o `preview` do `CodeBlock` — as abas
+// Prévia | Código (o controle segmentado ocupando a largura), a prévia no fundo afundado e o código sem
+// moldura. É a caixa do site de hoje (decisão do Victor, 06/10/2026: a da Aurea, não a da referência),
+// agora no pacote, para o site usar só peças da Aurea. O teclado é o das abas do APG: setas, Home e End.
+// Sem o `aurea.js` na página — quem troca a aba é o React.
+function CaixaDeExemplo({ preview, codigo, className }) {
+    const s = useAureaStrings();
+    const id = React.useId();
+    const [aba, setAba] = React.useState("preview");
+    const refPrevia = React.useRef(null), refCodigo = React.useRef(null);
+    const ir = (a) => { setAba(a); (a === "preview" ? refPrevia : refCodigo).current?.focus(); };
+    const tecla = (e) => {
+        if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key))
+            return;
+        e.preventDefault();
+        ir(e.key === "Home" ? "preview" : e.key === "End" ? "code" : aba === "preview" ? "code" : "preview");
+    };
+    const botao = (a, rotulo) => _jsx("button", { type: "button", role: "tab", id: `${id}-${a}`, ref: a === "preview" ? refPrevia : refCodigo, className: aba === a ? "active" : undefined, "aria-selected": aba === a, "aria-controls": `${id}-${a}-panel`, tabIndex: aba === a ? 0 : -1, onClick: () => setAba(a), onKeyDown: tecla, children: rotulo });
+    return _jsxs("div", { className: cx("demo code-preview", className), children: [_jsx("div", { className: "demo-tabs", children: _jsxs("div", { className: "segmented", role: "tablist", children: [botao("preview", s.codeBlockPreview), botao("code", s.codeBlockCode)] }) }), _jsx("div", { className: "demo-panel", "data-panel": "preview", role: "tabpanel", id: `${id}-preview-panel`, "aria-labelledby": `${id}-preview`, tabIndex: 0, hidden: aba !== "preview", children: preview }), _jsx("div", { className: "demo-panel demo-code", "data-panel": "code", role: "tabpanel", id: `${id}-code-panel`, "aria-labelledby": `${id}-code`, tabIndex: 0, hidden: aba !== "code", children: codigo })] });
+}
+export function CodeBlock({ children, language = "text", copyable, preview, className }) {
+    if (preview !== undefined)
+        return _jsx(CaixaDeExemplo, { preview: preview, className: className, codigo: _jsx(CodeBlock, { language: language, copyable: copyable, children: children }) });
     const s = useAureaStrings();
     // tabIndex no <pre>: `.code-block` é `overflow:auto` por construção, então é REGIÃO ROLÁVEL
     // e não tem nada focável dentro — quem navega por teclado não alcança o código que passa da