@aurea-uds/react 0.1.0 → 0.3.0

package/dist/internal.js

@@ -1,31 +1,123 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+"use client";
+// A diretiva na LINHA 1, como as referências a escrevem (Base UI e shadcn/ui, 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.
+//
+// O que NÃO tem estado saiu daqui para o `pure.tsx` — está explicado lá. A reexportação abaixo
+// existe para os 18 módulos de cliente seguirem importando `cx` de "./internal.js" sem mudança.
+//
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
-// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+// pure → internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
 // INTERNO: o que todo módulo precisa e ninguém publica como componente próprio.
 // NÃO é subpath — `@aurea-uds/react/internal` não existe, de propósito.
-// Kbd mora aqui por dependência, não por categoria: o Button precisa dele e ele não precisa de
-// ninguém. A casa pública dele continua sendo `/data-display`, que o reexporta.
-import { createContext, useContext } from "react";
-export const cx = (...v) => v.filter(Boolean).join(" ");
-export const defaultStrings = { close: "Close", paginationLabel: "Pagination", previous: "Previous", next: "Next", breadcrumbLabel: "Breadcrumb", tabsLabel: "Tabs", optionsLabel: "Options", tableLabel: "Table", commandLabel: "Command palette", commandPlaceholder: "Type a command…", dismissNotification: "Dismiss notification", toolbarLabel: "Toolbar", comboboxEmpty: "No results", comboboxClear: "Clear selection", comboboxOpen: "Open list", comboboxRemove: "Remove", comboboxLoading: "Loading…", fileDropPrompt: "Drag files here or click to select", fileAdded: "File added", fileRemoved: "File removed", fileRemove: "Remove", fileTooLarge: "File exceeds the size limit", fileWrongType: "File type not allowed", treeLabel: "Tree", notificationsLabel: "Notifications", notificationMarkAll: "Mark all as read", notificationEmpty: "No notifications", notificationUnread: "Unread", notificationNew: "new notifications", dataGridFilter: "Filter", dataGridEmpty: "No results", dataGridSelectAll: "Select all rows", dataGridSelectRow: "Select row", mediaPlayer: "Media player", mediaPlay: "Play", mediaPause: "Pause", mediaMute: "Mute", mediaUnmute: "Unmute", mediaSeek: "Seek", mediaVolume: "Volume", mediaCaptionsShow: "Show captions", mediaCaptionsHide: "Hide captions", mediaSkipBack: "Skip back 10 seconds", mediaSkipForward: "Skip forward 10 seconds", mediaFullscreenEnter: "Enter full screen", mediaFullscreenExit: "Exit full screen", uploadSending: "Uploading", uploadCancel: "Cancel upload", uploadRetry: "Retry upload", uploadError: "Upload failed", uploadCanceled: "Upload canceled", uploadComplete: "Upload complete", codeEditor: "Code editor", chatLabel: "Conversation", chatMessage: "Message", chatSend: "Send", qrCode: "QR code", copyCode: "Copy code", tocLabel: "On this page", navigationToggle: "Navigation" };
-// pt-BR preservado como locale (mesmos valores que já eram o default): passe
-// <AureaProvider strings={ptBR}> para restaurar português.
-export const ptBR = { close: "Fechar", paginationLabel: "Paginação", previous: "Anterior", next: "Próxima", breadcrumbLabel: "Breadcrumb", tabsLabel: "Abas", optionsLabel: "Opções", tableLabel: "Tabela", commandLabel: "Paleta de comandos", commandPlaceholder: "Digite um comando…", dismissNotification: "Dispensar notificação", toolbarLabel: "Barra de ferramentas", comboboxEmpty: "Nenhum resultado", comboboxClear: "Limpar seleção", comboboxOpen: "Abrir lista", comboboxRemove: "Remover", comboboxLoading: "Carregando…", fileDropPrompt: "Arraste arquivos aqui ou clique para selecionar", fileAdded: "Arquivo adicionado", fileRemoved: "Arquivo removido", fileRemove: "Remover", fileTooLarge: "Arquivo maior que o limite", fileWrongType: "Tipo de arquivo não aceito", treeLabel: "Árvore", notificationsLabel: "Notificações", notificationMarkAll: "Marcar todas como lidas", notificationEmpty: "Nenhuma notificação", notificationUnread: "Não lida", notificationNew: "novas notificações", dataGridFilter: "Filtrar", dataGridEmpty: "Nenhum resultado", dataGridSelectAll: "Selecionar todas as linhas", dataGridSelectRow: "Selecionar linha", mediaPlayer: "Reprodutor de mídia", mediaPlay: "Reproduzir", mediaPause: "Pausar", mediaMute: "Silenciar", mediaUnmute: "Ativar som", mediaSeek: "Posição da reprodução", mediaVolume: "Volume", mediaCaptionsShow: "Ativar legendas", mediaCaptionsHide: "Desativar legendas", mediaSkipBack: "Voltar 10 segundos", mediaSkipForward: "Avançar 10 segundos", mediaFullscreenEnter: "Tela cheia", mediaFullscreenExit: "Sair da tela cheia", uploadSending: "Enviando", uploadCancel: "Cancelar envio", uploadRetry: "Tentar envio novamente", uploadError: "Falha no envio", uploadCanceled: "Envio cancelado", uploadComplete: "Envio concluído", codeEditor: "Editor de código", chatLabel: "Conversa", chatMessage: "Mensagem", chatSend: "Enviar", qrCode: "Código QR", copyCode: "Copiar código", tocLabel: "Nesta página", navigationToggle: "Navegação" };
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { defaultStrings, defaultSpriteUrl } from "./pure.js";
+export { cx, defaultStrings, ptBR, defaultSpriteUrl, universalStates, stateSeverity } from "./pure.js";
 export const StringsContext = createContext(defaultStrings);
 export const useAureaStrings = () => useContext(StringsContext);
-// Sprite de ícones: CONFIGURAÇÃO DE APLICAÇÃO, então entra pelo provider, uma vez.
-// Antes o default absoluto "/aurea-icons.svg" vivia no Icon e 15 componentes declaravam
-// e repassavam `spriteUrl` à mão — 52 sítios de código. Consequência: aplicação servida
-// em subcaminho perdia TODOS os ícones, e para consertar tinha de passar a prop em cada
-// componente (auditoria 26/07/2026, achado A4 — causa raiz do A3 daquela auditoria, que
-// foi corrigido nos fallbacks do catálogo e não aqui). O default segue o mesmo para quem
-// não configura nada; `Icon` aceita a prop como override local.
-export const defaultSpriteUrl = "/aurea-icons.svg";
 export const SpriteContext = createContext(defaultSpriteUrl);
 export const useSpriteUrl = () => useContext(SpriteContext);
-// direction informa o Base UI (lado dos popovers, setas do teclado). O CSS
-// espelha sozinho por propriedade lógica, mas depende do atributo dir no DOM:
-// quem consome precisa pôr dir="rtl" no <html>. Este provider não mexe no DOM.
-// Kbd — representação de tecla/atalho. <kbd> é o elemento HTML certo; a pele é nossa.
-export function Kbd({ children, className, ...props }) { return _jsx("kbd", { className: cx("kbd", className), ...props, children: children }); }
+// ONDE OS POPUPS SÃO MONTADOS — achado B7, fechado na Parte C do PLANO-1.0 (07/08/2026).
+// O DEFEITO não era o portal: era o consumidor não ter como mexer nele. Todo popup da Aurea
+// (diálogo, gaveta, dica, popover, os dois menus, notificação, combobox, toast) monta num
+// portal no nível do `body` — é o que permite empilhar e posicionar sem herdar `overflow` nem
+// `transform` de ninguém. A consequência é que o conteúdo dele fica FORA de qualquer landmark,
+// e o axe acusa `region` ("todo conteúdo num landmark"). A auditoria registrou, e escreveu que
+// "a única forma de satisfazer seria o consumidor montar o portal dentro do landmark dele" —
+// só que ele não tinha essa forma, porque o `container` do Base UI nunca foi exposto.
+// Agora tem, e entra pelo provider, UMA vez, como o sprite: é configuração de aplicação, não
+// prop de componente (foi a lição do achado A4, com 52 sítios repassando `spriteUrl` à mão).
+// `undefined` é o default e mantém o comportamento de sempre: `document.body`.
+export const PortalContext = createContext(undefined);
+export const usePortalContainer = () => useContext(PortalContext);
+export function useReorder({ count, order, onReorder, rowSelector, handleSelector }) {
+    const s = useAureaStrings();
+    const ref = useRef(null);
+    const [pego, setPego] = useState(null);
+    const [foco, setFoco] = useState(null);
+    const [aviso, setAviso] = useState("");
+    const origem = useRef(null);
+    const arrasto = useRef(null);
+    const anuncia = (verbo, i) => setAviso(`${verbo}: ${i + 1} ${s.positionOf} ${count}`);
+    const alcas = () => [...(ref.current?.querySelectorAll(handleSelector) ?? [])];
+    // Vai por efeito e não por `requestAnimationFrame`: o React precisa ter commitado a ordem nova
+    // antes de procurar a alça.
+    useEffect(() => { if (foco !== null) {
+        alcas()[foco]?.focus();
+        setFoco(null);
+    } }, [foco, order]);
+    const mover = (de, para) => { if (para >= 0 && para < count && de !== para)
+        onReorder(de, para); };
+    const teclado = (e, i) => {
+        if (e.key === " " || e.key === "Enter") {
+            e.preventDefault();
+            if (pego === null) {
+                origem.current = i;
+                setPego(i);
+                anuncia(s.sortableGrabbed, i);
+            }
+            else {
+                setPego(null);
+                origem.current = null;
+                anuncia(s.sortableDropped, i);
+            }
+            return;
+        }
+        // As setas não podem fazer NADA com o item solto, senão o componente sequestra a navegação.
+        if (pego === null)
+            return;
+        if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+            e.preventDefault();
+            const para = i + (e.key === "ArrowUp" ? -1 : 1);
+            if (para < 0 || para >= count)
+                return;
+            mover(i, para);
+            setPego(para);
+            setFoco(para);
+            anuncia(s.sortableMoved, para);
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            const volta = origem.current;
+            if (volta !== null && volta !== i) {
+                mover(i, volta);
+                setFoco(volta);
+            }
+            setPego(null);
+            origem.current = null;
+            anuncia(s.sortableCanceled, volta ?? i);
+        }
+    };
+    // O alvo é a primeira linha cujo MEIO ainda está abaixo do ponteiro — a conta que faz o item
+    // trocar de lugar ao passar da metade da linha vizinha, e não ao encostar nela.
+    const ponteiroMove = (e) => {
+        const de = arrasto.current;
+        if (de === null)
+            return;
+        const linhas = [...(ref.current?.querySelectorAll(rowSelector) ?? [])];
+        const achado = linhas.findIndex(l => { const r = l.getBoundingClientRect(); return e.clientY < r.top + r.height / 2; });
+        const para = achado === -1 ? linhas.length - 1 : achado;
+        if (para !== de) {
+            mover(de, para);
+            arrasto.current = para;
+            setPego(para);
+        }
+    };
+    const ponteiroSolta = () => {
+        if (arrasto.current === null)
+            return;
+        anuncia(s.sortableDropped, arrasto.current);
+        arrasto.current = null;
+        setPego(null);
+    };
+    const ponteiroBaixo = (e, i) => {
+        if (e.pointerType === "mouse" && e.button !== 0)
+            return;
+        e.currentTarget.setPointerCapture(e.pointerId);
+        arrasto.current = i;
+        setPego(i);
+    };
+    return { ref, pego, aviso, teclado, ponteiroBaixo, ponteiroMove, ponteiroSolta };
+}

package/dist/layout-client.d.ts

@@ -0,0 +1,9 @@
+import { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
+import { type TopbarVariant } from "./navigation.js";
+export declare function AppShell({ brand, navigation, topbar, topbarVariant, sidebarCollapsed, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    brand: ReactNode;
+    navigation: ReactNode;
+    topbar?: ReactNode;
+    topbarVariant?: Exclude<TopbarVariant, "pill">;
+    sidebarCollapsed?: boolean;
+}): import("react").JSX.Element;

package/dist/layout-client.js

@@ -0,0 +1,72 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx, useAureaStrings } from "./internal.js";
+import { IconButton } from "./actions.js";
+import { Sidebar, Topbar } from "./navigation.js";
+// ── Auxiliar de topo: mora ANTES do primeiro export, e a posição é obrigatória ───────────────
+// O check 22 mede o corpo de um componente do `export` dele até o PRÓXIMO export — fatia longa
+// de propósito, porque a implementação de vários componentes daqui continua num auxiliar não
+// exportado logo abaixo (a `Sidebar` é o caso: o `aria-current` dela mora num). Encurtar a fatia
+// foi tentado em 09/08/2026 e a prova contra o defeito recusou: a `Sidebar` com `states: []`
+// deixava de ser acusada.
+// Consequência: auxiliar escrito ENTRE dois exports é lido como parte do componente anterior.
+// Esta função tem `button:not([disabled])` num seletor, e o `\bdisabled\b` da regra acusou o
+// `Grid` de emitir estado que ele não emite. Escrita aqui em cima, não pertence à fatia de
+// ninguém. **Auxiliar de topo em módulo de componente vem antes dos exports.**
+//
+// O que ela faz e por que existe: o popover nativo não entrega a mesma gestão de foco nos três
+// motores, e a tabela medida está no `aurea.js` do core. As mesmas cinco linhas moram lá, e a
+// repetição é deliberada porque são DOIS RUNTIMES, não dois desenhos — o do core é delegado e
+// serve página estática e consumo vanilla (é o que o catálogo carrega); este serve quem instala
+// só o `@aurea-uds/react`, que importa o CSS do core e nunca o JS dele. Rodar os dois é
+// inofensivo: focar o mesmo elemento duas vezes não faz nada.
+//
+// A comparação é com `"closed"` e NÃO com `"open"`, e isso é cicatriz — não simplifique de
+// volta. O `ToggleEvent.newState` só tem esses dois valores, então as duas formas são idênticas
+// em efeito; a diferença é no GATE. O check 15 trata qualquer string do fonte como possível nome
+// de classe (de propósito: a versão estrita não vê `badge-${variant}` e quase fez o D1 apagar
+// classes vivas). Com o literal `"open"` aqui, a `.drawer-wrap.open` do core — resto morto da
+// página vanilla removida na Parte D — passava a parecer PRODUZIDA pela biblioteca, e a catraca
+// queria travar um ganho falso.
+function focoDaGaveta(e) {
+    const gaveta = e.currentTarget;
+    // Primeiro focável de DENTRO, não a gaveta: o WebKit não entra no conteúdo do popover pelo
+    // Tab nem com o foco no elemento dele — medido no K1.
+    if (e.newState !== "closed") {
+        const primeiro = gaveta.querySelector('a[href], button:not([disabled]), input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])');
+        if (primeiro)
+            primeiro.focus();
+        else {
+            gaveta.tabIndex = -1;
+            gaveta.focus();
+        }
+        return;
+    }
+    // Só devolve o foco se ele ficou órfão; se a pessoa já o moveu, puxá-lo de volta seria roubo.
+    if (document.activeElement === document.body || gaveta.contains(document.activeElement))
+        document.querySelector(`[popovertarget="${gaveta.id}"]`)?.focus();
+}
+// API pública intacta: as props seguem brand/navigation/topbar. O que mudou é ONDE a
+// marca sai — no topo, não na lateral. `topbarVariant` escolhe a pele do topo; o shell
+// precisa saber porque a lateral se encaixa abaixo dele (o `flush` não tem folga em
+// cima, então ela sobe um --space-4). `pill` é cabeçalho de site — não é pra shell.
+// A lateral RECOLHE em tela estreita: o <aside> é um popover nativo e o botão é o invoker. O
+// navegador entrega Escape, clique fora e o `aria-expanded` no disparador. Era o achado A8: em
+// 375px o `h1` da página começava 4,6 telas abaixo, depois dos 65 itens da navegação.
+// Não-modal de propósito, como o CommandPaletteShell: o foco não fica preso, e por isso não
+// declaramos modalidade que não entregamos.
+//
+// ATÉ 09/08/2026 ESTE COMENTÁRIO DIZIA "sem uma linha de JavaScript" E QUE O NAVEGADOR TAMBÉM
+// ENTREGAVA A VOLTA DO FOCO. Entregava — no Chromium, que era o único motor onde a suíte
+// rodava. O item K1 pôs Firefox e WebKit no `playwright.config.ts` e a medição derrubou a
+// frase: no WebKit o foco vai para o <body> ao abrir, OITO Tabs não entram na gaveta e o
+// Escape não devolve nada. Gaveta aberta e inalcançável por teclado é WCAG 2.1.1.
+// A gestão de foco agora é NOSSA, igual nos três motores — `focoDaGaveta`, abaixo.
+// Id fixo em vez de useId: um documento tem UM AppShell (ele é dono do <main>), então não há
+// colisão possível — e o CSS e o gate precisam de um alvo estável.
+// `sidebarCollapsed` é CONTROLADO pelo consumidor, como o `open` do CommandPaletteShell: o
+// shell não decide quando recolher nem desenha o botão que recolhe — quem sabe se há espaço,
+// e se a preferência se guarda, é a aplicação. O que o shell faz é o que só ele pode: a coluna
+// do grid encolhe para --sidebar-rail (a regra `:has(.sidebar-collapsed)` no core).
+const SHELL_NAV_ID = "aurea-shell-nav";
+export function AppShell({ brand, navigation, topbar, topbarVariant = "floating", sidebarCollapsed, children, className, ...props }) { const s = useAureaStrings(); return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", className), ...props, children: [_jsx(Topbar, { variant: topbarVariant, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "menu", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", collapsed: sidebarCollapsed, onToggle: focoDaGaveta, children: navigation }), _jsx("main", { className: "content", children: children })] }); }

package/dist/layout.d.ts

@@ -1,14 +1,2 @@
-import { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
-import { type TopbarVariant } from "./navigation.js";
-export declare function Card({ variant, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
-    variant?: "base" | "raised" | "interactive" | "inset" | "selected" | "danger";
-}): import("react").JSX.Element;
-export declare function Stack({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function Cluster({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function Grid({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
-export declare function AppShell({ brand, navigation, topbar, topbarVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
-    brand: ReactNode;
-    navigation: ReactNode;
-    topbar?: ReactNode;
-    topbarVariant?: Exclude<TopbarVariant, "pill">;
-}): import("react").JSX.Element;
+export * from "./layout-client.js";
+export { Card, Stack, Cluster, Grid } from "./markup.js";

package/dist/layout.js

@@ -1,22 +1,5 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cx, useAureaStrings } from "./internal.js";
-import { IconButton } from "./actions.js";
-import { Sidebar, Topbar } from "./navigation.js";
-export function Card({ variant = "base", className, ...props }) { return _jsx("div", { className: cx("card", variant !== "base" && `card-${variant}`, className), ...props }); }
-export function Stack({ className, ...props }) { return _jsx("div", { className: cx("stack", className), ...props }); }
-export function Cluster({ className, ...props }) { return _jsx("div", { className: cx("cluster", className), ...props }); }
-export function Grid({ className, ...props }) { return _jsx("div", { className: cx("grid", className), ...props }); }
-// API pública intacta: as props seguem brand/navigation/topbar. O que mudou é ONDE a
-// marca sai — no topo, não na lateral. `topbarVariant` escolhe a pele do topo; o shell
-// precisa saber porque a lateral se encaixa abaixo dele (o `flush` não tem folga em
-// cima, então ela sobe um --space-4). `pill` é cabeçalho de site — não é pra shell.
-// A lateral RECOLHE em tela estreita, e sem uma linha de JavaScript: o <aside> é um popover
-// nativo e o botão é o invoker. O navegador entrega Escape, clique fora, `aria-expanded` no
-// disparador e a volta do foco para ele ao fechar — Baseline desde 04/2025, verificado em
-// 30/07/2026. Era o achado A8: em 375px o `h1` da página começava 4,6 telas abaixo, depois
-// dos 65 itens da navegação. Não-modal de propósito, como o CommandPaletteShell: o foco não
-// fica preso, e por isso não declaramos modalidade que não entregamos.
-// Id fixo em vez de useId: um documento tem UM AppShell (ele é dono do <main>), então não há
-// colisão possível — e o CSS e o gate precisam de um alvo estável.
-const SHELL_NAV_ID = "aurea-shell-nav";
-export function AppShell({ brand, navigation, topbar, topbarVariant = "floating", children, className, ...props }) { const s = useAureaStrings(); return _jsxs("div", { className: cx("app-shell", topbarVariant === "flush" && "app-shell-flush", className), ...props, children: [_jsx(Topbar, { variant: topbarVariant, brand: _jsxs(_Fragment, { children: [_jsx(IconButton, { className: "nav-toggle", icon: "menu", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID }), brand] }), children: topbar }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", children: navigation }), _jsx("main", { className: "content", children: children })] }); }
+// VITRINE da categoria — é este arquivo que `@aurea-uds/react/layout` resolve. Sem `"use client"`
+// de propósito: a diretiva contamina o módulo inteiro e faria a marcação pura chegar como cliente
+// por vizinhança (ADR-0026; o check 26b reprova quem a puser de volta aqui).
+export * from "./layout-client.js";
+export { Card, Stack, Cluster, Grid } from "./markup.js";

package/dist/markup.d.ts

@@ -0,0 +1,72 @@
+import React, { type HTMLAttributes, type InputHTMLAttributes, type ReactNode, type RefAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
+export type BadgeVariant = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "running" | "paused" | "offline" | "review";
+export type AvatarSize = "sm" | "md" | "lg";
+export type TopbarVariant = "floating" | "flush" | "pill";
+export declare function Card({ variant, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    variant?: "base" | "raised" | "interactive" | "inset" | "selected" | "danger";
+}): React.JSX.Element;
+export declare function Stack({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function Cluster({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function Grid({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function KPI({ label, value, trend, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    label: ReactNode;
+    value: ReactNode;
+    trend?: ReactNode;
+}): React.JSX.Element;
+export declare function DataList({ items }: {
+    items: Array<{
+        term: ReactNode;
+        value: ReactNode;
+    }>;
+}): React.JSX.Element;
+export declare function Timeline({ items }: {
+    items: Array<{
+        title: ReactNode;
+        description?: ReactNode;
+        time?: ReactNode;
+    }>;
+}): React.JSX.Element;
+export declare function Prose({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function Badge({ variant, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
+    variant?: BadgeVariant;
+}): React.JSX.Element;
+export declare function Progress({ value, label }: {
+    value: number;
+    label?: string;
+}): React.JSX.Element;
+export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function AvatarGroup({ children, max, total, label, size, className }: {
+    children: ReactNode;
+    max?: number;
+    total?: number;
+    label?: string;
+    size?: AvatarSize;
+    className?: string;
+}): React.JSX.Element;
+export declare function LogStream({ lines }: {
+    lines: Array<{
+        time?: string;
+        level?: string;
+        text: string;
+    }>;
+}): React.JSX.Element;
+export declare function MediaPlayerShell({ children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+export declare function Topbar({ variant, brand, children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+    variant?: TopbarVariant;
+    brand?: ReactNode;
+}): React.JSX.Element;
+export declare function Kbd({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): React.JSX.Element;
+export declare const Select: React.ForwardRefExoticComponent<Omit<SelectHTMLAttributes<HTMLSelectElement> & RefAttributes<HTMLSelectElement>, "ref"> & RefAttributes<HTMLSelectElement>>;
+export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement> & RefAttributes<HTMLTextAreaElement>, "ref"> & RefAttributes<HTMLTextAreaElement>>;
+export declare function Checkbox({ label, labelHidden, description, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+    label: ReactNode;
+    labelHidden?: boolean;
+    description?: ReactNode;
+}): React.JSX.Element;
+export declare function Radio({ label, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+    label: ReactNode;
+}): React.JSX.Element;
+export declare function Switch({ label, className, ...props }: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement> & {
+    label: ReactNode;
+}): React.JSX.Element;
+export declare function Range(props: InputHTMLAttributes<HTMLInputElement> & RefAttributes<HTMLInputElement>): React.JSX.Element;

package/dist/markup.js

@@ -0,0 +1,87 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// SEM `"use client"`, e a ausência é o ponto deste arquivo — item O1 do PLANO-1.0, decidido na
+// [ADR-0026](../../../decisions/0026-marcacao-pura-e-de-servidor.md).
+//
+// O QUE ESTÁ AQUI: os componentes que não fazem NADA que exija o navegador. Sem hook, sem
+// manipulador preso em JSX, sem motor de terceiro. `cx` mais marcação. A medição está em
+// `node scripts/measure-boundary.mjs`, e ela é o motivo de o arquivo existir:
+//
+//   importar `Card` — uma <div> com uma classe — embarcava 9 módulos e 118,5 KB de JavaScript,
+//   porque `layout.js` tem a diretiva e num framework de RSC a diretiva contamina o módulo
+//   INTEIRO e o fecho transitivo dele. `Prose`, que também é uma <div>, custava 123,5 KB.
+//
+// A PROVA DE QUE ISSO SE RESOLVE JÁ ESTAVA NO REPOSITÓRIO: o `Accordion` mora no
+// `disclosure.tsx`, que nunca teve a diretiva, e importá-lo custa **0,3 KB**. Mesma natureza do
+// `Card`, três ordens de grandeza de diferença — e a única distinção era o arquivo em que cada um
+// tinha caído na Fase 9.
+//
+// POR QUE UM MÓDULO NOVO E NÃO UM `.pure` POR CATEGORIA: o precedente é o `Kbd`, e ele já estava
+// escrito no `MAP.md`. Ele mora no `internal.tsx` **por dependência** (o `Button` precisa dele) e
+// a casa PÚBLICA dele é `/data-display`, que o reexporta. Aqui é a mesma regra em escala: o
+// arquivo é onde a coisa mora, a categoria é o que a ficha declara, e as duas não precisam
+// coincidir. A taxonomia do registry não muda, e nenhuma ficha muda.
+//
+// A API NÃO QUEBRA. Cada módulo de categoria reexporta os seus, então
+// `@aurea-uds/react/layout` continua entregando `Card`. O que muda é o `index.tsx`: ele exporta
+// estes nomes EXPLICITAMENTE daqui, e é isso — e só isso — que faz
+// `import {Card} from "@aurea-uds/react"` chegar como componente de SERVIDOR. Sem a linha
+// explícita o nome ainda existe, vindo do módulo de categoria, e volta a ser cliente sem que
+// nada reprove. O check 35 cobra a linha, e foi provado contra esse defeito exato.
+//
+// LIMITE DECLARADO: pelo subpath da categoria (`@aurea-uds/react/layout`) o `Card` continua
+// vindo de um módulo com a diretiva, porque o `AppShell` mora lá e a diretiva é do ARQUIVO. Quem
+// renderiza no servidor por SEO deve importar do barril. Separar cada categoria em duas entradas
+// resolveria também esse caminho, e é mudança de fronteira pública — não entra sem o Victor.
+//
+// PARA QUEM VIER: componente novo só entra aqui se não chamar hook, não prender manipulador e não
+// tocar motor. Na dúvida, ele NÃO entra — cliente a mais é lento, servidor a mais é quebrado.
+import React, { forwardRef } from "react";
+import { cx } from "./pure.js";
+// ── Layout ───────────────────────────────────────────────────────────────────────────────────
+export function Card({ variant = "base", className, ...props }) { return _jsx("div", { className: cx("card", variant !== "base" && `card-${variant}`, className), ...props }); }
+export function Stack({ className, ...props }) { return _jsx("div", { className: cx("stack", className), ...props }); }
+export function Cluster({ className, ...props }) { return _jsx("div", { className: cx("cluster", className), ...props }); }
+export function Grid({ className, ...props }) { return _jsx("div", { className: cx("grid", 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)) }); }
+export function Timeline({ items }) { return _jsx("ol", { className: "timeline", children: items.map((i, n) => _jsxs("li", { children: [_jsx("span", { className: "timeline-dot" }), _jsxs("div", { children: [_jsx("strong", { children: i.title }), i.description && _jsx("p", { children: i.description }), i.time && _jsx("small", { className: "muted", children: i.time })] })] }, n)) }); }
+// Prose (item L5): UMA LINHA, e é para ser mesmo — quem transforma Markdown em elementos é o
+// consumidor. A trava do item é no CSS, escopada em `.prose`, e há prova dela no `skin.spec`.
+// Segurança, porque é o caminho de uso mais provável: quem entrega HTML de terceiro por
+// `dangerouslySetInnerHTML` tem de SANITIZAR antes. A Aurea desenha o texto; ela não pode decidir
+// o que é seguro renderizar. Está dito na ficha, em voz alta.
+export function Prose({ className, ...props }) { return _jsx("div", { className: cx("prose", className), ...props }); }
+// ── Feedback ─────────────────────────────────────────────────────────────────────────────────
+export function Badge({ variant = "neutral", className, ...props }) { return _jsx("span", { className: cx("badge", variant !== "neutral" && `badge-${variant}`, className), ...props }); }
+export function Progress({ value, label }) { const pct = Math.max(0, Math.min(100, value)); return _jsx("div", { children: _jsx("div", { className: "progress", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, children: _jsx("span", { style: { width: `${pct}%` } }) }) }); }
+export function Skeleton({ className, ...props }) { return _jsx("div", { className: cx("skeleton", className), "aria-hidden": "true", ...props }); }
+// ── Identity ─────────────────────────────────────────────────────────────────────────────────
+// `React.Children` não é hook — é utilitário de leitura de `children`, e roda no servidor.
+export function AvatarGroup({ children, max, total, label, size = "md", className }) {
+    const itens = React.Children.toArray(children);
+    const mostra = max ? itens.slice(0, max) : itens;
+    const resto = (total ?? itens.length) - mostra.length;
+    return _jsxs("div", { role: "group", "aria-label": label, className: cx("avatar-group", className), children: [mostra, resto > 0 && _jsxs("span", { className: cx("avatar", "avatar-count", size !== "md" && `avatar-${size}`), "aria-hidden": "true", children: ["+", resto] })] });
+}
+// ── Code ─────────────────────────────────────────────────────────────────────────────────────
+export function LogStream({ lines }) { return _jsx("div", { className: "log-stream", role: "log", "aria-live": "polite", children: lines.map((l, n) => _jsxs("div", { className: cx("log-line", l.level && `log-${l.level}`), children: [_jsx("time", { className: "log-time", children: l.time }), _jsx("span", { className: "log-level", children: l.level }), _jsx("span", { children: l.text })] }, n)) }); }
+// ── Media ────────────────────────────────────────────────────────────────────────────────────
+export function MediaPlayerShell({ children, className, ...props }) { return _jsx("div", { className: cx("media-player", className), ...props, children: children }); }
+// ── Navigation ───────────────────────────────────────────────────────────────────────────────
+export function Topbar({ variant = "floating", brand, children, className, ...props }) { return _jsxs("header", { className: cx("topbar", `topbar-${variant}`, className), ...props, children: [brand != null && _jsx("div", { className: "brand", children: brand }), children] }); }
+// ── System / interno ─────────────────────────────────────────────────────────────────────────
+// Kbd — representação de tecla/atalho. <kbd> é o elemento HTML certo; a pele é nossa. Ele já
+// morava fora da casa dele (no `internal.tsx`, por causa do `Button`); agora mora aqui, pelo
+// mesmo motivo elevado a regra.
+export function Kbd({ children, className, ...props }) { return _jsx("kbd", { className: cx("kbd", className), ...props, children: children }); }
+// ── Inputs ───────────────────────────────────────────────────────────────────────────────────
+// Os seis controles abaixo NÃO prendem manipulador nenhum: quem escuta `onChange` é o consumidor,
+// e por isso eles são marcação. O `Field`, o `Input` e o `Combobox` ficaram no `inputs.tsx` —
+// aqueles chamam hook de verdade.
+export const Select = forwardRef(function Select({ className, ...props }, ref) { return _jsx("select", { ref: ref, className: cx("select", className), ...props }); });
+export const Textarea = forwardRef(function Textarea({ className, ...props }, ref) { return _jsx("textarea", { ref: ref, className: cx("textarea", className), ...props }); });
+export function Checkbox({ label, labelHidden, description, className, ...props }) { return _jsxs("label", { className: cx("checkbox", labelHidden && "checkbox-bare", className), children: [_jsx("input", { type: "checkbox", ...props }), _jsx("span", { className: "control-mark" }), _jsxs("span", { className: labelHidden ? "sr-only" : undefined, children: [_jsx("strong", { children: label }), description && _jsxs(_Fragment, { children: [_jsx("br", {}), _jsx("span", { className: "muted", children: description })] })] })] }); }
+export function Radio({ label, className, ...props }) { return _jsxs("label", { className: cx("radio", className), children: [_jsx("input", { type: "radio", ...props }), _jsx("span", { className: "control-mark" }), label] }); }
+export function Switch({ label, className, ...props }) { return _jsxs("label", { className: cx("switch", className), children: [_jsx("input", { type: "checkbox", role: "switch", ...props }), _jsx("span", { className: "switch-track" }), _jsx("span", { children: label })] }); }
+export function Range(props) { return _jsx("input", { className: cx("range", props.className), type: "range", ...props }); }

package/dist/media-client.d.ts

@@ -0,0 +1,36 @@
+import React, { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
+export declare function spokenTime(sec: number): string;
+export interface MediaPlayerProps extends Omit<React.VideoHTMLAttributes<HTMLVideoElement> & RefAttributes<HTMLVideoElement>, "title"> {
+    kind?: "video" | "audio";
+    title?: ReactNode;
+    subtitle?: ReactNode;
+}
+export declare function MediaPlayer({ kind, src, poster, title, subtitle, className, children, onClick, onPlay, onPause, onEnded, onTimeUpdate, onLoadedMetadata, onDurationChange, onProgress, onVolumeChange, ...rest }: MediaPlayerProps): React.JSX.Element;
+export interface ImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "children"> {
+    ratio?: string;
+    fit?: "cover" | "contain";
+    render?: React.ReactElement;
+}
+export declare function Image({ ratio, fit, alt, className, style, render, onError, ...props }: ImageProps): React.JSX.Element;
+export interface GalleryItem {
+    id: string;
+    src: string;
+    alt: string;
+    caption?: ReactNode;
+}
+export interface GalleryProps extends Omit<HTMLAttributes<HTMLUListElement>, "onSelect">, RefAttributes<HTMLUListElement> {
+    items: GalleryItem[];
+    label?: string;
+    selected?: string;
+    onSelect?: (id: string) => void;
+    zoom?: boolean;
+    ratio?: string;
+}
+export declare function Gallery({ items, label, selected, onSelect, zoom, ratio, className, ...props }: GalleryProps): React.JSX.Element;
+export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, "children">, RefAttributes<HTMLDivElement> {
+    children?: ReactNode;
+    label?: string;
+    controls?: boolean;
+    indicators?: boolean;
+}
+export declare function Carousel({ children, label, controls, indicators, className, ...props }: CarouselProps): React.JSX.Element;