@aurea-uds/react 0.31.0 → 0.32.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,7 +1,7 @@
 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 ButtonVariant = "primary" | "secondary" | "tertiary" | "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";
 export type ButtonTone = "neutral" | "brand" | "danger" | "success" | "warning" | "info";
 export type ComponentSize = "xs" | "sm" | "md" | "lg" | "xl";
@@ -80,7 +80,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 +93,35 @@ 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;
 }
 export declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & RefAttributes<HTMLButtonElement>>;
+export interface CloseButtonProps extends Omit<ButtonProps, "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, "icon" | "label" | "onClick" | "variant" | "appearance" | "tone" | "href" | "target" | "rel" | "download" | "render" | "kbd" | "loading" | "leadingIcon" | "trailingIcon" | "fullWidth" | "share"> {
 }
 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 +133,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 +143,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,8 +15,11 @@ 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"],
@@ -27,7 +30,7 @@ const EIXOS = {
 // 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").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 +40,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)
+        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 +96,15 @@ 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) {
+export const Button = forwardRef(function Button({ variant: variantPedida, appearance, tone, size: sizePedido, 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
@@ -111,7 +122,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 }), kbd && _jsx(Kbd, { className: "btn-kbd", children: kbd }), 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
@@ -185,7 +196,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,13 +209,22 @@ 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 }) }); });
+// 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, ...props }, ref) {
     const { theme, toggleTheme } = useAureaTheme();
     const s = useAureaStrings();
@@ -212,12 +234,11 @@ export const ThemeToggle = forwardRef(function ThemeToggle({ className, ...props
     // 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 +254,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, { 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

package/dist/color.d.ts

@@ -0,0 +1,92 @@
+import type { AureaStrings } from "./pure.js";
+/** Os três canais de 0 a 255. */
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** Matiz de 0 a 360; saturação e brilho de 0 a 1 (o HSV). */
+export interface Hsb {
+    h: number;
+    s: number;
+    b: number;
+}
+/** Matiz de 0 a 360; saturação e luminosidade de 0 a 1. */
+export interface Hsl {
+    h: number;
+    s: number;
+    l: number;
+}
+/** A cor de dentro das peças: HSB com o alfa (0 = transparente, 1 = opaca). */
+export interface Cor extends Hsb {
+    a: number;
+}
+export type ColorSpace = "rgb" | "hsl" | "hsb";
+export type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
+/** Os três canais de cada espaço, na ordem dele. */
+export declare const COLOR_CHANNELS: Readonly<Record<ColorSpace, readonly [ColorChannel, ColorChannel, ColorChannel]>>;
+/** `#rgb`, `#rgba`, `#rrggbb` ou `#rrggbbaa` (com ou sem `#`) → os canais e o alfa; o resto → `null`. */
+export declare function parseHex(texto: string): (Rgb & {
+    a: number;
+}) | null;
+/** Os canais → `#rrggbb` (minúscula, como o `<input type="color">`); com alfa abaixo de 1, `#rrggbbaa`. */
+export declare function toHex({ r, g, b, a }: Rgb & {
+    a?: number;
+}): string;
+/** Normaliza o texto hex; texto inválido → `null`. */
+export declare const normalizeHex: (texto: string) => string | null;
+/** Texto de cor → a cor de dentro: hex (3, 4, 6 ou 8 dígitos), `rgb()`, `hsl()` ou `hsb()`, com alfa. O resto →
+ *  `null`. O matiz de `hsl()`/`hsb()` cinza é guardado (o hex o perderia). */
+export declare function parseColor(texto: string): Cor | null;
+/** A cor de dentro → hex (`#rrggbb`, ou `#rrggbbaa` com transparência). */
+export declare const corToHex: (c: Cor) => string;
+export declare function rgbToHsb({ r, g, b }: Rgb): Hsb;
+export declare function hsbToRgb({ h, s, b }: Hsb): Rgb;
+export declare function rgbToHsl({ r, g, b }: Rgb): Hsl;
+export declare function hslToRgb({ h, s, l }: Hsl): Rgb;
+/** A faixa de cada canal, a mesma da referência: matiz 0–360 (passo 1, salto 15); saturação, brilho e luminosidade
+ *  0–100 (passo 1, salto 10); vermelho, verde e azul 0–255 (passo 1, salto 17); alfa 0–1 (passo 0,01, salto 0,1). */
+export declare function channelRange(ch: ColorChannel): {
+    min: number;
+    max: number;
+    step: number;
+    page: number;
+};
+/** O espaço em que um canal vive: luminosidade só no HSL, brilho só no HSB, vermelho/verde/azul só no RGB; matiz,
+ *  saturação e alfa no espaço pedido (sem pedido, HSB). */
+export declare function spaceOf(ch: ColorChannel, pedido?: ColorSpace): ColorSpace;
+/** O valor de um canal, na faixa dele. */
+export declare function getChannel(c: Cor, ch: ColorChannel, space?: ColorSpace): number;
+/** A cor com um canal trocado (o valor é limitado à faixa). O matiz e a saturação de antes ficam quando a cor nova
+ *  vira cinza ou preta. */
+export declare function setChannel(c: Cor, ch: ColorChannel, v: number, space?: ColorSpace): Cor;
+/** A luminância relativa da WCAG 2 (0 = preto, 1 = branco), a conta do contraste. */
+export declare function relativeLuminance({ r, g, b }: Rgb): number;
+/** A tinta que contrasta MAIS sobre a cor: `"dark"` (preto) ou `"light"` (branco), pela razão de contraste da WCAG
+ *  — e não por um palpite de "cor clara". O amarelo da Aurea pede preto; um azul médio também. */
+export declare function contrastingInk(rgb: Rgb): "dark" | "light";
+type Direcao = "to right" | "to left" | "to top";
+/** A cor pura de um matiz, em hex — a cor do pino da trilha de matiz. */
+export declare const pureHue: (h: number) => string;
+/** O FUNDO da trilha de um canal, para o `background` do trilho do `Slider`. O gradiente vai de ponta a ponta do
+ *  trilho, mas as paradas começam e terminam na FOLGA (`--slider-cap`, o recuo que o pino respeita): antes da
+ *  primeira e depois da última, a cor chapada da ponta. Assim o pino no mínimo fica sobre a cor do mínimo, em
+ *  qualquer canal. O alfa vai do transparente à cor opaca (o xadrez embaixo é a pele, e não gradiente). */
+export declare function trackBackground(c: Cor, ch: ColorChannel, space?: ColorSpace, direcao?: Direcao): string;
+/** O fundo da área de cor para um par de canais, com o terceiro fixo no valor da cor de agora. A técnica é a da
+ *  biblioteca da referência (escrita aqui por nós): no RGB, uma camada por canal somadas pelo modo de mistura
+ *  `screen`; no HSL e no HSB, uma camada por canal com a receita de paradas dele, e a cor pura embaixo quando o
+ *  fixo é o matiz. `x` anda do começo ao fim da linha (na escrita da direita para a esquerda, o começo é a direita);
+ *  `y`, de baixo para cima. */
+export declare function areaBackground(c: Cor, space: ColorSpace, x: ColorChannel, y: ColorChannel, rtl?: boolean): {
+    background: string;
+    blend?: string;
+};
+export type ColorNameStrings = Pick<AureaStrings, "colorHue" | "colorTone" | "colorNameFormat">;
+export type ColorHueName = keyof AureaStrings["colorHue"];
+export type ColorToneName = keyof AureaStrings["colorTone"];
+/** O nome da cor na língua das frases: "vivid blue", "dark red", "rosa pálido". */
+export declare function colorName(rgb: Rgb, s: ColorNameStrings): string;
+/** O valor de um canal escrito para o leitor de tela e a saída: "210°", "80%", "128", alfa "50%". */
+export declare function formatChannel(ch: ColorChannel, v: number): string;
+export {};