@aurea-uds/react 0.1.0

package/dist/internal.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 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.
+// 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" };
+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 }); }

package/dist/layout.d.ts

@@ -0,0 +1,14 @@
+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;

package/dist/layout.js

@@ -0,0 +1,22 @@
+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 })] }); }

package/dist/media.d.ts

@@ -0,0 +1,9 @@
+import React, { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
+export declare function MediaPlayerShell({ children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
+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;

package/dist/media.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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.
+import React from "react";
+import { cx, useAureaStrings } from "./internal.js";
+import { Icon } from "./system.js";
+export function MediaPlayerShell({ children, className, ...props }) { return _jsx("div", { className: cx("media-player", className), ...props, children: children }); }
+// MediaPlayer (Fase 5): headless sobre <video>/<audio> nativos — o MOTOR de mídia é
+// o browser; o componente só liga estado (play/tempo/buffer/volume/legenda) às
+// classes .media-* já existentes. Sem CSS estrutural novo: o vídeo preenche o
+// .media-viewport por style inline no elemento (não por regra no stylesheet), então
+// o core e os baselines dos docs não mudam.
+// A11y (o APG não fecha player; prática corrente pesquisada 07/2026): os controles
+// são <button> nativos com aria-label que troca de estado (Reproduzir/Pausar,
+// Silenciar/Ativar som) e a barra é <input type="range"> nativo — um slider de
+// verdade, com setas/Home/End vindos do browser — cujo aria-valuetext lê o tempo por
+// extenso (o número cru "243" não se entende; "4 minutes and 3 seconds" sim). Nada de
+// role="slider" à mão. SEM atalho global de teclado: cada controle é focável e opera
+// pelo próprio elemento nativo, então play/pause/seek/volume por teclado saem sem
+// interceptar — interceptar quebraria digitação e não é padrão APG. O tempo por
+// extenso é helper embutido em inglês (não i18n — como o formatSize do FileInput);
+// os rótulos de botão passam pela i18n como todo controle.
+function clockTime(sec) { if (!Number.isFinite(sec) || sec < 0)
+    sec = 0; const m = Math.floor(sec / 60), s = Math.floor(sec % 60); return `${m}:${String(s).padStart(2, "0")}`; }
+export function spokenTime(sec) { if (!Number.isFinite(sec) || sec < 0)
+    sec = 0; const m = Math.floor(sec / 60), s = Math.floor(sec % 60); const mp = m === 1 ? "minute" : "minutes", sp = s === 1 ? "second" : "seconds"; return m && s ? `${m} ${mp} and ${s} ${sp}` : m ? `${m} ${mp}` : `${s} ${sp}`; }
+// Os handlers de mídia do consumidor são COMPOSTOS com os internos (não podem
+// sobrescrevê-los: um onPlay externo silenciaria o estado playing e o botão
+// ficaria em "Reproduzir" — auditoria 18/07/2026, MÉDIO 2).
+export function MediaPlayer({ kind = "video", src, poster, title, subtitle, className, children, onClick, onPlay, onPause, onEnded, onTimeUpdate, onLoadedMetadata, onDurationChange, onProgress, onVolumeChange, ...rest }) {
+    const s = useAureaStrings();
+    const boxRef = React.useRef(null);
+    const mediaRef = React.useRef(null);
+    const [playing, setPlaying] = React.useState(false);
+    const [current, setCurrent] = React.useState(0);
+    const [duration, setDuration] = React.useState(0);
+    const [buffered, setBuffered] = React.useState(0);
+    const [volume, setVolume] = React.useState(1);
+    const [muted, setMuted] = React.useState(false);
+    const [hasCaptions, setHasCaptions] = React.useState(false);
+    const [captionsOn, setCaptionsOn] = React.useState(false);
+    const [fullscreen, setFullscreen] = React.useState(false);
+    // fullscreenchange vem do document (não do elemento); é o único estado que exige
+    // listener — o resto sincroniza pelos eventos de mídia do próprio <video>.
+    React.useEffect(() => { const on = () => setFullscreen(document.fullscreenElement === boxRef.current); document.addEventListener("fullscreenchange", on); return () => document.removeEventListener("fullscreenchange", on); }, []);
+    const m = () => mediaRef.current;
+    // ramifica pelo estado sincronizado (playing), não por el.paused: playing vem dos
+    // eventos play/pause e não fica atrás do elemento (nem preso, como no jsdom).
+    const togglePlay = () => { const el = m(); if (!el)
+        return; if (playing)
+        el.pause();
+    else {
+        const p = el.play();
+        if (p)
+            p.catch(() => { });
+    } };
+    const skip = (d) => { const el = m(); if (el)
+        el.currentTime = Math.max(0, Math.min(el.currentTime + d, el.duration || Infinity)); };
+    // seek/setVol/mute atualizam o estado na hora (input controlado responsivo) e o
+    // elemento; os eventos de mídia reconfirmam depois (idempotente) e cobrem mudanças
+    // externas (controles nativos, outra aba).
+    const seek = (v) => { const el = m(); if (el)
+        el.currentTime = v; setCurrent(v); };
+    const setVol = (v) => { const el = m(); if (el) {
+        el.volume = v;
+        if (v > 0)
+            el.muted = false;
+    } setVolume(v); if (v > 0)
+        setMuted(false); };
+    const toggleMute = () => { const el = m(); const next = el ? !el.muted : !muted; if (el)
+        el.muted = next; setMuted(next); };
+    const toggleCaptions = () => { const el = m(); if (!el || !el.textTracks.length)
+        return; const show = el.textTracks[0].mode !== "showing"; el.textTracks[0].mode = show ? "showing" : "hidden"; setCaptionsOn(show); };
+    const toggleFullscreen = () => { if (document.fullscreenElement)
+        document.exitFullscreen?.();
+    else
+        boxRef.current?.requestFullscreen?.(); };
+    const syncVol = () => { const el = m(); if (el) {
+        setVolume(el.volume);
+        setMuted(el.muted);
+    } };
+    const syncBuf = () => { const el = m(); if (el && el.buffered.length)
+        setBuffered(el.buffered.end(el.buffered.length - 1)); };
+    const onMeta = () => { const el = m(); if (el) {
+        setDuration(el.duration);
+        setHasCaptions(el.textTracks.length > 0);
+        syncVol();
+    } };
+    const playedPct = duration > 0 ? Math.min(100, (current / duration) * 100) : 0;
+    const bufferedPct = duration > 0 ? Math.min(100, (buffered / duration) * 100) : 0;
+    const volPct = muted ? 0 : Math.round(volume * 100);
+    const valueText = duration > 0 ? `${spokenTime(current)} of ${spokenTime(duration)}` : spokenTime(current);
+    const MediaTag = kind === "audio" ? "audio" : "video";
+    return _jsxs("div", { ref: boxRef, className: cx("media-player", className), role: "group", "aria-label": typeof title === "string" ? title : s.mediaPlayer, children: [_jsxs("div", { className: "media-viewport", children: [kind === "audio" && _jsxs("div", { className: "media-placeholder", children: [_jsx(Icon, { name: "volume--up" }), title && _jsx("strong", { children: title }), subtitle && _jsx("span", { children: subtitle })] }), _jsx(MediaTag, { ref: mediaRef, src: src, ...rest, ...(kind === "video" ? { poster, playsInline: true, className: "media-fill", onClick: (e) => { onClick?.(e); togglePlay(); } } : {}), onPlay: (e) => { setPlaying(true); onPlay?.(e); }, onPause: (e) => { setPlaying(false); onPause?.(e); }, onEnded: (e) => { setPlaying(false); onEnded?.(e); }, onTimeUpdate: (e) => { const el = m(); if (el)
+                            setCurrent(el.currentTime); onTimeUpdate?.(e); }, onLoadedMetadata: (e) => { onMeta(); onLoadedMetadata?.(e); }, onDurationChange: (e) => { const el = m(); if (el)
+                            setDuration(el.duration); onDurationChange?.(e); }, onProgress: (e) => { syncBuf(); onProgress?.(e); }, onVolumeChange: (e) => { syncVol(); onVolumeChange?.(e); }, children: children })] }), kind === "video" && title && _jsx("div", { className: "media-overlay-title", children: _jsxs("div", { children: [_jsx("strong", { children: title }), subtitle && _jsx("span", { children: subtitle })] }) }), _jsxs("div", { className: "media-controls", children: [_jsxs("div", { className: "media-seek", style: { "--media-played": `${playedPct}%` }, children: [_jsxs("div", { className: "media-seek-track", children: [_jsx("span", { className: "media-seek-buffered", style: { width: `${bufferedPct}%` } }), _jsx("span", { className: "media-seek-played" })] }), _jsx("input", { type: "range", min: 0, max: duration > 0 ? duration : 0, step: "any", value: Math.min(current, duration || 0), "aria-label": s.mediaSeek, "aria-valuetext": valueText, onChange: e => seek(Number(e.target.value)) })] }), _jsxs("div", { className: "media-control-row", children: [_jsxs("div", { className: "media-control-group", children: [_jsx("button", { className: "media-control", type: "button", "aria-label": playing ? s.mediaPause : s.mediaPlay, onClick: togglePlay, children: _jsx(Icon, { name: playing ? "pause" : "play" }) }), _jsx("button", { className: "media-control", type: "button", "aria-label": s.mediaSkipBack, onClick: () => skip(-10), children: _jsx(Icon, { name: "rewind--10" }) }), _jsx("button", { className: "media-control", type: "button", "aria-label": s.mediaSkipForward, onClick: () => skip(10), children: _jsx(Icon, { name: "forward--10" }) }), _jsxs("span", { className: "media-time", children: [clockTime(current), " / ", clockTime(duration)] })] }), _jsxs("div", { className: "media-control-group", children: [_jsx("button", { className: "media-control", type: "button", "aria-label": muted ? s.mediaUnmute : s.mediaMute, onClick: toggleMute, children: _jsx(Icon, { name: muted || volume === 0 ? "volume--mute" : "volume--up" }) }), _jsx("input", { className: "media-volume", type: "range", min: 0, max: 100, value: volPct, "aria-label": s.mediaVolume, "aria-valuetext": `${volPct}%`, onChange: e => setVol(Number(e.target.value) / 100) }), hasCaptions && _jsx("button", { className: cx("media-control", captionsOn && "active"), type: "button", "aria-label": captionsOn ? s.mediaCaptionsHide : s.mediaCaptionsShow, "aria-pressed": captionsOn, onClick: toggleCaptions, children: _jsx(Icon, { name: "closed-caption" }) }), kind === "video" && _jsx("button", { className: "media-control", type: "button", "aria-label": fullscreen ? s.mediaFullscreenExit : s.mediaFullscreenEnter, onClick: toggleFullscreen, children: _jsx(Icon, { name: fullscreen ? "minimize" : "maximize" }) })] })] })] })] });
+}

package/dist/navigation.d.ts

@@ -0,0 +1,59 @@
+import React, { type HTMLAttributes, type RefAttributes, type ReactNode, type ReactElement } from "react";
+import { type IconName } from "./system.js";
+export declare function Breadcrumb({ items, label }: {
+    items: Array<{
+        label: ReactNode;
+        href?: string;
+    }>;
+    label?: string;
+}): React.JSX.Element;
+export declare function Tabs({ tabs, value, onChange, label }: {
+    tabs: Array<{
+        id: string;
+        label: ReactNode;
+        content: ReactNode;
+    }>;
+    value: string;
+    onChange: (id: string) => void;
+    label?: string;
+}): React.JSX.Element;
+export declare function Pagination({ page, total, onPageChange }: {
+    page: number;
+    total: number;
+    onPageChange: (p: number) => void;
+}): React.JSX.Element;
+export interface TocItem {
+    id: string;
+    label: string;
+    sub?: boolean;
+}
+export declare function TableOfContents({ items, current, label, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+    items: TocItem[];
+    current?: string;
+    label?: string;
+}): React.JSX.Element;
+export interface TreeNode {
+    id: string;
+    label: ReactNode;
+    icon?: IconName;
+    children?: TreeNode[];
+}
+export declare function TreeView({ items, defaultExpandedIds, onSelect, label, className }: {
+    items: TreeNode[];
+    defaultExpandedIds?: string[];
+    onSelect?: (node: TreeNode) => void;
+    label?: string;
+    className?: string;
+}): ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export declare function Sidebar({ children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement>): React.JSX.Element;
+export type TopbarVariant = "floating" | "flush" | "pill";
+export declare function Topbar({ variant, brand, children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+    variant?: TopbarVariant;
+    brand?: ReactNode;
+}): React.JSX.Element;
+export declare function CommandPaletteShell({ open, query, onQueryChange, children }: {
+    open: boolean;
+    query: string;
+    onQueryChange: (v: string) => void;
+    children?: ReactNode;
+}): React.JSX.Element | null;

package/dist/navigation.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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.
+import React from "react";
+import { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { cx, useAureaStrings } from "./internal.js";
+import { Icon } from "./system.js";
+import { Button } from "./actions.js";
+import { Badge } from "./feedback.js";
+import { SearchField } from "./inputs.js";
+export function Breadcrumb({ items, label }) { const s = useAureaStrings(); return _jsx("nav", { className: "breadcrumb", "aria-label": label ?? s.breadcrumbLabel, children: items.map((i, n) => _jsxs(React.Fragment, { children: [n > 0 && _jsx(Icon, { name: "chevron--right", size: "sm" }), " ", i.href ? _jsx("a", { href: i.href, children: i.label }) : _jsx("strong", { "aria-current": "page", children: i.label })] }, n)) }); }
+export function Tabs({ tabs, value, onChange, label }) { const s = useAureaStrings(); return _jsxs(BaseTabs.Root, { value: value, onValueChange: v => onChange(String(v)), children: [_jsx(BaseTabs.List, { className: "tabs", "aria-label": label ?? s.tabsLabel, activateOnFocus: true, children: tabs.map(t => _jsx(BaseTabs.Tab, { value: t.id, className: "tab", children: t.label }, t.id)) }), tabs.map(t => _jsx(BaseTabs.Panel, { value: t.id, className: "card card-inset", tabIndex: 0, children: t.content }, t.id))] }); }
+export function Pagination({ page, total, onPageChange }) { const s = useAureaStrings(); return _jsxs("nav", { className: "pagination", "aria-label": s.paginationLabel, children: [_jsx(Button, { variant: "ghost", size: "sm", disabled: page <= 1, onClick: () => onPageChange(page - 1), children: s.previous }), _jsxs(Badge, { variant: "primary", children: [page, " / ", total] }), _jsx(Button, { variant: "ghost", size: "sm", disabled: page >= total, onClick: () => onPageChange(page + 1), children: s.next })] }); }
+export function TableOfContents({ items, current, label, className, ...props }) {
+    const s = useAureaStrings();
+    return _jsxs("nav", { className: cx("toc", className), "aria-label": label ?? s.tocLabel, ...props, children: [_jsx("p", { className: "toc-label", children: label ?? s.tocLabel }), items.map(i => _jsx("a", { href: `#${i.id}`, className: cx(i.sub && "toc-sub"), ...(i.id === current ? { "aria-current": "true" } : {}), children: i.label }, i.id))] });
+}
+function flattenVisible(nodes, expanded, level = 1, parentId, acc = []) {
+    for (const node of nodes) {
+        acc.push({ node, level, parentId });
+        if (node.children?.length && expanded.has(node.id))
+            flattenVisible(node.children, expanded, level + 1, node.id, acc);
+    }
+    return acc;
+}
+export function TreeView({ items, defaultExpandedIds, onSelect, label, className }) {
+    const s = useAureaStrings();
+    const baseId = React.useId();
+    const [expanded, setExpanded] = React.useState(() => new Set(defaultExpandedIds));
+    const [selected, setSelected] = React.useState();
+    const [active, setActive] = React.useState(() => items[0]?.id);
+    const rootRef = React.useRef(null);
+    const visible = flattenVisible(items, expanded);
+    // Roving tab stop derivado: se o nó ativo saiu do conjunto visível (dados
+    // trocados, nó removido), o primeiro visível volta a ser tabulável — senão a
+    // árvore inteira fica tabIndex=-1 e some da ordem do Tab (auditoria, MÉDIO 1).
+    const effectiveActive = active !== undefined && visible.some(v => v.node.id === active) ? active : visible[0]?.node.id;
+    const focusId = (id) => { setActive(id); rootRef.current?.querySelector(`[data-tree-id="${CSS.escape(id)}"]`)?.focus(); };
+    const toggle = (id, open) => setExpanded(prev => { const n = new Set(prev); if (open)
+        n.add(id);
+    else
+        n.delete(id); return n; });
+    const select = (node) => { setSelected(node.id); onSelect?.(node); };
+    const onKeyDown = (e) => {
+        const idx = visible.findIndex(v => v.node.id === effectiveActive);
+        if (idx < 0)
+            return;
+        const cur = visible[idx], hasChildren = !!cur.node.children?.length, isOpen = expanded.has(cur.node.id);
+        const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+        const expandKey = rtl ? "ArrowLeft" : "ArrowRight", collapseKey = rtl ? "ArrowRight" : "ArrowLeft";
+        switch (e.key) {
+            case "ArrowDown":
+                e.preventDefault();
+                if (idx < visible.length - 1)
+                    focusId(visible[idx + 1].node.id);
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                if (idx > 0)
+                    focusId(visible[idx - 1].node.id);
+                break;
+            case expandKey:
+                e.preventDefault();
+                if (hasChildren && !isOpen)
+                    toggle(cur.node.id, true);
+                else if (hasChildren && isOpen)
+                    focusId(cur.node.children[0].id);
+                break;
+            case collapseKey:
+                e.preventDefault();
+                if (hasChildren && isOpen)
+                    toggle(cur.node.id, false);
+                else if (cur.parentId)
+                    focusId(cur.parentId);
+                break;
+            case "Home":
+                e.preventDefault();
+                focusId(visible[0].node.id);
+                break;
+            case "End":
+                e.preventDefault();
+                focusId(visible[visible.length - 1].node.id);
+                break;
+            case "Enter":
+            case " ":
+                e.preventDefault();
+                select(cur.node);
+                if (hasChildren)
+                    toggle(cur.node.id, !isOpen);
+                break;
+        }
+    };
+    const renderNodes = (nodes, level) => (_jsx("ul", { ref: level === 1 ? rootRef : undefined, className: cx(level === 1 ? "tree" : "tree-group", level === 1 && className), role: level === 1 ? "tree" : "group", "aria-label": level === 1 ? (label ?? s.treeLabel) : undefined, onKeyDown: level === 1 ? onKeyDown : undefined, children: nodes.map(node => {
+            const hasChildren = !!node.children?.length, isOpen = expanded.has(node.id), isSelected = selected === node.id, labelId = baseId + node.id;
+            return _jsxs("li", { className: "tree-item", role: "treeitem", "data-tree-id": node.id, "aria-level": level, "aria-expanded": hasChildren ? isOpen : undefined, "aria-selected": isSelected, "aria-labelledby": labelId, tabIndex: node.id === effectiveActive ? 0 : -1, children: [_jsxs("span", { className: "tree-node", "data-selected": isSelected || undefined, style: { paddingInlineStart: `calc(var(--space-3) + ${level - 1} * var(--space-4))` }, onClick: () => { focusId(node.id); select(node); if (hasChildren)
+                            toggle(node.id, !isOpen); }, children: [hasChildren ? _jsx(Icon, { name: "chevron--right", size: "sm", className: "tree-twist" }) : _jsx("span", { className: "tree-indent", "aria-hidden": "true" }), node.icon && _jsx(Icon, { name: node.icon, size: "sm" }), _jsx("span", { id: labelId, className: "tree-label", children: node.label })] }), hasChildren && isOpen && renderNodes(node.children, level + 1)] }, node.id);
+        }) }));
+    return renderNodes(items, 1);
+}
+// Sidebar/Topbar: eram <aside>/<header> soltos DENTRO do AppShell; agora são componentes
+// nomeados que o AppShell COMPÕE (dogfooding, AUREA.md §2.4 — "se o catálogo mostra uma
+// Sidebar, a sidebar dele É a Sidebar da Aurea"). O landmark vem do elemento nativo
+// (<aside>=complementary, <header>=banner); o <nav> de navegação é do consumidor, passado
+// como children — por isso não embutimos <nav> aqui (aninharia landmark).
+export function Sidebar({ children, className, ...props }) { return _jsx("aside", { className: cx("sidebar", className), ...props, children: children }); }
+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] }); }
+// Shell NÃO-modal de propósito: é presentational (o consumidor controla open) e não
+// tem focus trap/inert/Escape — declarar aria-modal sem entregar a modalidade faria
+// leitores ocultarem o resto da página com o teclado ainda alcançando tudo
+// (auditoria 18/07/2026, ALTO 2; APG dialog-modal). Modal de verdade = BaseDialog.
+export function CommandPaletteShell({ open, query, onQueryChange, children }) { const s = useAureaStrings(); if (!open)
+    return null; return _jsx("div", { className: "command-overlay", children: _jsxs("div", { className: "command-palette", role: "dialog", "aria-label": s.commandLabel, children: [_jsx(SearchField, { autoFocus: true, "aria-label": s.commandPlaceholder, value: query, onChange: e => onQueryChange(e.target.value), placeholder: s.commandPlaceholder }), children] }) }); }

package/dist/overlays.d.ts

@@ -0,0 +1,46 @@
+import React, { type ReactNode, type ReactElement } from "react";
+import { type IconName } from "./system.js";
+export declare function Dialog({ open, title, children, footer, onClose }: {
+    open: boolean;
+    title: ReactNode;
+    children: ReactNode;
+    footer?: ReactNode;
+    onClose: () => void;
+}): React.JSX.Element;
+export declare function Drawer({ open, title, children, onClose, side }: {
+    open: boolean;
+    title: ReactNode;
+    children: ReactNode;
+    onClose: () => void;
+    side?: "left" | "right";
+}): React.JSX.Element;
+export type OverlaySide = "top" | "right" | "bottom" | "left";
+export declare function Tooltip({ children, content, side }: {
+    children: ReactElement;
+    content: ReactNode;
+    side?: OverlaySide;
+}): React.JSX.Element;
+export declare function Popover({ trigger, title, children, side }: {
+    trigger: ReactElement;
+    title?: ReactNode;
+    children: ReactNode;
+    side?: OverlaySide;
+}): React.JSX.Element;
+export interface MenuItemDef {
+    label: ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    leadingIcon?: IconName;
+}
+export declare function DropdownMenu({ trigger, items, side, label }: {
+    trigger: ReactElement;
+    items: Array<MenuItemDef | "separator">;
+    side?: OverlaySide;
+    label?: string;
+}): React.JSX.Element;
+export declare function ContextMenu({ children, items, label, className }: {
+    children: ReactNode;
+    items: Array<MenuItemDef | "separator">;
+    label?: string;
+    className?: string;
+}): React.JSX.Element;

package/dist/overlays.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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.
+import React from "react";
+import { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { Popover as BasePopover } from "@base-ui/react/popover";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { Menu as BaseMenu } from "@base-ui/react/menu";
+import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
+import { cx, useAureaStrings } from "./internal.js";
+import { Icon } from "./system.js";
+export function Dialog({ open, title, children, footer, onClose }) { const s = useAureaStrings(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
+        onClose(); }, children: _jsxs(BaseDialog.Portal, { children: [_jsx(BaseDialog.Backdrop, { className: "dialog-backdrop" }), _jsxs(BaseDialog.Popup, { className: "dialog", children: [_jsxs("header", { children: [_jsx(BaseDialog.Title, { render: _jsx("h2", {}), children: title }), _jsx(BaseDialog.Close, { className: "btn btn-ghost btn-icon", "aria-label": s.close, children: _jsx(Icon, { name: "close" }) })] }), _jsx("div", { className: "dialog-body", children: children }), footer && _jsx("footer", { children: footer })] })] }) }); }
+export function Drawer({ open, title, children, onClose, side = "right" }) { const s = useAureaStrings(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
+        onClose(); }, children: _jsxs(BaseDialog.Portal, { children: [_jsx(BaseDialog.Backdrop, { className: "drawer-backdrop" }), _jsxs(BaseDialog.Popup, { className: cx("drawer", `drawer-${side}`), children: [_jsxs("header", { children: [_jsx(BaseDialog.Title, { render: _jsx("h2", {}), children: title }), _jsx(BaseDialog.Close, { className: "btn btn-ghost btn-icon", "aria-label": s.close, children: _jsx(Icon, { name: "close" }) })] }), children] })] }) }); }
+// `role="tooltip"` + `aria-describedby` no disparador é o que faz a dica EXISTIR para leitor
+// de tela. Medido em 30/07/2026: sem isso, o popup saía sem role e sem id, e o disparador sem
+// aria-describedby — quem navega por leitor de tela ouvia só o rótulo do botão e nunca o
+// conteúdo da dica. Era tooltip visual, não acessível (padrão APG Tooltip).
+// O id aponta para um elemento que só existe quando aberto; referência pendente é ignorada
+// pela tecnologia assistiva, então não precisa acompanhar o estado.
+export function Tooltip({ children, content, side = "top" }) { const id = React.useId(); return _jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children, "aria-describedby": id }), _jsx(BaseTooltip.Portal, { children: _jsx(BaseTooltip.Positioner, { side: side, sideOffset: 8, children: _jsx(BaseTooltip.Popup, { id: id, role: "tooltip", className: "tooltip", children: content }) }) })] }); }
+export function Popover({ trigger, title, children, side = "bottom" }) { return _jsxs(BasePopover.Root, { children: [_jsx(BasePopover.Trigger, { render: trigger }), _jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { side: side, sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover", children: [title && _jsx(BasePopover.Title, { render: _jsx("strong", {}), children: title }), children] }) }) })] }); }
+// ContextMenu.Item/.Separator/.Popup são os MESMOS componentes de Menu.* no Base UI,
+// então os itens renderizam igual nos dois menus.
+const renderMenuItems = (items) => items.map((it, i) => it === "separator"
+    ? _jsx(BaseMenu.Separator, { className: "menu-sep" }, i)
+    : _jsxs(BaseMenu.Item, { className: "menu-item", disabled: it.disabled, onClick: it.onClick, children: [it.leadingIcon && _jsx(Icon, { name: it.leadingIcon }), it.label] }, i));
+export function DropdownMenu({ trigger, items, side = "bottom", label }) { return _jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { children: _jsx(BaseMenu.Positioner, { side: side, sideOffset: 6, children: _jsx(BaseMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items) }) }) })] }); }
+// ContextMenu: abre no botão direito e — por teclado — em Shift+F10 / tecla Menu,
+// que o browser só dispara (como evento contextmenu) sobre um elemento FOCADO. Por
+// isso o gatilho é focável (tabIndex 0) e tem nome acessível (auditoria 18/07/2026,
+// MÉDIO 3); sem isso o teclado não alcança o menu. Consumidor pode sobrescrever
+// tabIndex via children se o próprio já for focável.
+export function ContextMenu({ children, items, label, className }) { return _jsxs(BaseContextMenu.Root, { children: [_jsx(BaseContextMenu.Trigger, { className: className, tabIndex: 0, "aria-label": label, "aria-haspopup": "menu", children: children }), _jsx(BaseContextMenu.Portal, { children: _jsx(BaseContextMenu.Positioner, { children: _jsx(BaseContextMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items) }) }) })] }); }

package/dist/qrcode.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { type ErrorCorrection } from "qr";
+export interface QRCodeProps extends Omit<React.SVGAttributes<SVGSVGElement>, "children"> {
+    value: string;
+    size?: number;
+    ecc?: ErrorCorrection;
+    quietZone?: number;
+    label?: string;
+}
+export declare function QRCode({ value, size, ecc, quietZone, label, className, ...props }: QRCodeProps): React.JSX.Element;

package/dist/qrcode.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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.
+// SUBPATH PRÓPRIO, e não a categoria Data Display: este é o único componente que precisa do
+// pacote `qr`, que é peer OPCIONAL. Se ele morasse junto do Table, quem importa Table teria de
+// instalar um gerador de QR — que é exatamente o achado A5 visto de perto.
+import React from "react";
+import encodeQR from "qr";
+import { cx, useAureaStrings } from "./internal.js";
+// QRCode: dado escaneável com a geometria suave da Aurea — módulos REDONDOS (dots) e
+// olhos circulares, não quadrados. Miolo de alto contraste FIXO (não segue o tema: dark
+// inverteria e nem todo leitor decodifica um QR invertido); override por --qr-module/
+// --qr-quiet no CSS. Matriz da lib `qr` (0-dep, Apache-2.0, Paul Miller); o desenho é
+// nosso. ecc default "quartile": dots cobrem menos área que quadrados, então mais
+// correção de erro preserva a escaneabilidade. ponytail: um estilo (dots) só.
+export function QRCode({ value, size = 160, ecc = "quartile", quietZone = 4, label, className, ...props }) {
+    const s = useAureaStrings();
+    const name = label ?? `${s.qrCode}: ${value}`;
+    const m = encodeQR(value, "raw", { ecc, border: quietZone });
+    const n = m.length;
+    // os 3 finder patterns (7×7) ficam nos cantos da área de dados, logo após o quiet border.
+    const b = quietZone, eyes = [[b, b], [n - b - 7, b], [b, n - b - 7]];
+    const inEye = (x, y) => eyes.some(([ex, ey]) => x >= ex && x < ex + 7 && y >= ey && y < ey + 7);
+    const dots = [];
+    for (let y = 0; y < n; y++)
+        for (let x = 0; x < n; x++)
+            if (m[y][x] && !inEye(x, y))
+                dots.push(_jsx("circle", { className: "qr-mod", cx: x + 0.5, cy: y + 0.5, r: 0.44 }, y * n + x));
+    // olho redondo: anel externo (raio 3.5) → furo (2.5, cor do fundo) → centro (1.5).
+    // os raios preservam a proporção 7:5:3 do finder, então o leitor ainda o reconhece.
+    const eyeShapes = eyes.map(([ex, ey], i) => { const cx = ex + 3.5, cy = ey + 3.5; return _jsxs(React.Fragment, { children: [_jsx("circle", { className: "qr-mod", cx: cx, cy: cy, r: 3.5 }), _jsx("circle", { className: "qr-eye-gap", cx: cx, cy: cy, r: 2.5 }), _jsx("circle", { className: "qr-mod", cx: cx, cy: cy, r: 1.5 })] }, `eye${i}`); });
+    return _jsxs("svg", { className: cx("qrcode", className), role: "img", "aria-label": name, viewBox: `0 0 ${n} ${n}`, width: size, height: size, ...props, children: [_jsx("title", { children: name }), eyeShapes, dots] });
+}

package/dist/system.d.ts

@@ -0,0 +1,17 @@
+import React, { type ReactNode } from "react";
+import { type AureaStrings } from "./internal.js";
+export declare function AureaProvider({ children, strings, direction, spriteUrl }: {
+    children: ReactNode;
+    strings?: Partial<AureaStrings>;
+    direction?: "ltr" | "rtl";
+    spriteUrl?: string;
+}): React.JSX.Element;
+export type AureaToastType = "info" | "success" | "warning" | "danger";
+export declare const useToast: () => import("@base-ui/react").UseToastManagerReturnValue<any>;
+export type IconName = string;
+export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+    name: IconName;
+    spriteUrl?: string;
+    size?: "sm" | "md" | "lg" | "xl";
+}
+export declare function Icon({ name, spriteUrl, size, className, ...props }: IconProps): React.JSX.Element;

package/dist/system.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 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.
+import React from "react";
+import { Toast as BaseToast } from "@base-ui/react/toast";
+import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
+import { DirectionProvider } from "@base-ui/react/direction-provider";
+import { cx, StringsContext, SpriteContext, defaultStrings, defaultSpriteUrl, useSpriteUrl, useAureaStrings } from "./internal.js";
+export function AureaProvider({ children, strings, direction = "ltr", spriteUrl = defaultSpriteUrl }) {
+    const value = React.useMemo(() => strings ? { ...defaultStrings, ...strings } : defaultStrings, [strings]);
+    return _jsx(StringsContext.Provider, { value: value, children: _jsx(SpriteContext.Provider, { value: spriteUrl, children: _jsx(DirectionProvider, { direction: direction, children: _jsx(BaseToast.Provider, { children: _jsxs(BaseTooltip.Provider, { children: [children, _jsx(AureaToastViewport, {})] }) }) }) }) });
+}
+export const useToast = () => BaseToast.useToastManager();
+function AureaToastList() {
+    const { toasts } = BaseToast.useToastManager();
+    const s = useAureaStrings();
+    return _jsx(_Fragment, { children: toasts.map(t => (_jsxs(BaseToast.Root, { toast: t, className: cx("toast", t.type && `toast-${t.type}`), children: [_jsxs("div", { className: "toast-text", children: [_jsx(BaseToast.Title, { render: _jsx("strong", {}) }), t.description ? _jsx(BaseToast.Description, { className: "muted" }) : null] }), _jsx(BaseToast.Close, { className: "btn btn-ghost btn-icon btn-sm", "aria-label": s.dismissNotification, children: "\u00D7" })] }, t.id))) });
+}
+function AureaToastViewport() {
+    return _jsx(BaseToast.Portal, { children: _jsx(BaseToast.Viewport, { className: "toast-stack", children: _jsx(AureaToastList, {}) }) });
+}
+// spriteUrl aqui é OVERRIDE local (dois sprites na mesma página, por exemplo). O normal é
+// não passar nada e deixar o AureaProvider dizer de onde vêm os glifos.
+export function Icon({ name, spriteUrl, size = "md", className, ...props }) { const base = useSpriteUrl(); return _jsx("svg", { "aria-hidden": "true", className: cx("icon", size !== "md" && `icon-${size}`, className), ...props, children: _jsx("use", { href: `${spriteUrl ?? base}#i-${name}` }) }); }