@aurea-uds/react 0.2.0 → 0.4.0

package/dist/navigation-client.js

@@ -0,0 +1,196 @@
+"use client";
+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 { Tabs as BaseTabs } from "@base-ui/react/tabs";
+import { Autocomplete as BaseAutocomplete } from "@base-ui/react/autocomplete";
+import { cx, useAureaStrings, usePortalContainer } from "./internal.js";
+import { Kbd } from "./markup.js";
+import { Icon } from "./system.js";
+import { Button } from "./actions.js";
+import { Badge } from "./feedback.js";
+import { SearchField } from "./inputs.js";
+// `overlays` PASSOU A VIR ANTES de `navigation` no DAG (18/08/2026, MAP.md §DAG). Ele só
+// importa `internal`, `system` e `actions` — todos anteriores —, então não há ciclo: o que
+// mudou foi a ORDEM documentada, que colocava overlays no "resto" sem motivo medido.
+import { Tooltip } from "./overlays.js";
+export function Stepper({ items, label, className }) {
+    const s = useAureaStrings();
+    return _jsx("div", { role: "list", "aria-label": label ?? s.stepperLabel, className: cx("stepper", className), children: items.map((it, n) => {
+            const st = it.state ?? "default";
+            const marca = st === "done" ? _jsx(Icon, { name: "checkmark" }) : st === "error" ? _jsx(Icon, { name: "error" }) : n + 1;
+            const miolo = _jsxs(_Fragment, { children: [_jsx("span", { className: "step-dot", children: marca }), _jsx("strong", { children: it.label }), it.optional && _jsx("small", { className: "step-optional", children: it.optional })] });
+            return _jsx("div", { role: "listitem", className: cx("step", st !== "default" && `step-${st}`), "aria-current": st === "active" ? "step" : undefined, children: it.onClick ? _jsx("button", { type: "button", className: "step-trigger", onClick: it.onClick, children: miolo }) : miolo }, n);
+        }) });
+}
+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);
+}
+function sidebarList(items, ctx, sub, labelledBy) {
+    return _jsx("ul", { className: cx("sidebar-list", sub && "sidebar-sub"), "aria-labelledby": labelledBy, children: items.map(it => {
+            const lid = ctx.baseId + it.id;
+            const filhos = it.items?.length ? it.items : undefined;
+            // Rótulo escondido vira `.sr-only` em vez de sumir do DOM: na lateral recolhida o item
+            // continua tendo nome para quem usa leitor de tela. Ícone sozinho não nomeia nada.
+            const oculto = (no) => ctx.collapsed ? _jsx("span", { className: "sr-only", children: no }) : no;
+            if (filhos && !it.href && !it.onClick)
+                return _jsxs("li", { children: [_jsx("p", { id: lid, className: cx("sidebar-group-label", ctx.collapsed && "sr-only"), children: it.label }), sidebarList(filhos, ctx, false, lid)] }, it.id);
+            const ativo = it.id === ctx.current;
+            const miolo = _jsxs(_Fragment, { children: [it.icon && _jsx(Icon, { name: it.icon }), _jsx("span", { className: cx("sidebar-label", ctx.collapsed && "sr-only"), children: it.label }), it.badge != null && oculto(it.badge)] });
+            const alvo = it.href
+                ? _jsx("a", { id: lid, href: it.href, className: "sidebar-item", "aria-current": ativo ? "page" : undefined, onClick: it.onClick, children: miolo })
+                : _jsx("button", { id: lid, type: "button", className: "sidebar-item", "aria-current": ativo ? "page" : undefined, onClick: it.onClick, children: miolo });
+            // NO TRILHO O NOME SÓ EXISTE NO TOOLTIP. Recolhida, a lateral manda o rótulo para `.sr-only`: quem
+            // usa leitor de tela continua ouvindo, e quem ENXERGA fica com um ícone mudo. A referência resolve
+            // isso com tooltip no `NavButton`, e é o que falta para um trilho de ícone não virar adivinhação.
+            // Só quando recolhida: com o rótulo visível ao lado, o tooltip repetiria o que já está na tela.
+            // `side="right"` porque a lateral encosta na borda esquerda — para cima o balão sairia do trilho.
+            return _jsxs("li", { children: [ctx.collapsed ? _jsx(Tooltip, { content: it.label, side: "right", children: alvo }) : alvo, filhos && sidebarList(filhos, ctx, true, lid)] }, it.id);
+        }) });
+}
+export function Sidebar({ items, current, collapsed, variant = "floating", label, children, className, ...props }) {
+    const s = useAureaStrings();
+    const baseId = React.useId();
+    return _jsxs("aside", { className: cx("sidebar", variant !== "floating" && `sidebar-${variant}`, collapsed && "sidebar-collapsed", className), ...props, children: [items && items.length > 0 && _jsx("nav", { className: "sidebar-nav", "aria-label": label ?? s.sidebarLabel, children: sidebarList(items, { baseId, current, collapsed }) }), children] });
+}
+const LEGADO = {
+    flat: ["edge", "none"], surface: ["floating", "circle"], pill: ["floating", "pill"], dock: ["floating", "circle"]
+};
+export function BottomNav({ items, current, variant = "floating", indicator = "none", label, className, ...props }) {
+    const s = useAureaStrings();
+    const [layout, marca0] = variant in LEGADO ? LEGADO[variant] : [variant, indicator];
+    // O indicador explícito ganha do que o nome legado implica: quem escreveu os dois quis os dois.
+    const ind = indicator !== "none" ? indicator : marca0;
+    return _jsx("nav", { className: cx("bottom-nav", layout === "edge" && "bottom-nav-edge", `bottom-nav-ind-${ind}`, className), "aria-label": label ?? s.bottomNavLabel, ...props, children: items.map(it => {
+            const ativo = it.id === current;
+            // O CONTADOR PENDURA NO ÍCONE, e é por isso que existe esta caixa. Pendurado no ITEM (a
+            // primeira versão), `50%` cai no meio do RÓTULO quando o item é linha — o Victor viu o número
+            // cobrir o nome inteiro em 17/08/2026. A pesquisa (Material 3 e os guias de barra de abas do
+            // iOS) diz a mesma coisa: canto superior do ÍCONE, encostando na borda dele, nunca sobre o
+            // texto. A caixa é o que dá ao contador um canto para se ancorar — e nos quatro indicadores
+            // redondos é ela que VIRA o círculo, com o rótulo embaixo, fora dele.
+            // `size="lg"` porque a proporção contra o contador foi medida: 24 para 16, razão 0,67.
+            const marca = _jsxs("span", { className: "bottom-nav-mark", children: [it.icon && _jsx(Icon, { name: it.icon, size: "lg" }), it.badge != null && _jsx("span", { className: "bottom-nav-badge", children: it.badge })] });
+            const miolo = _jsxs(_Fragment, { children: [marca, _jsx("span", { className: "bottom-nav-label", children: it.label })] });
+            return it.href
+                ? _jsx("a", { href: it.href, className: "bottom-nav-item", "aria-current": ativo ? "page" : undefined, onClick: it.onClick, children: miolo }, it.id)
+                : _jsx("button", { type: "button", className: "bottom-nav-item", "aria-current": ativo ? "page" : undefined, onClick: it.onClick, children: miolo }, it.id);
+        }) });
+}
+export function NavList({ items, className, ...props }) {
+    return _jsx("ul", { className: cx("nav-list", className), ...props, children: items.map(it => {
+            const miolo = _jsxs(_Fragment, { children: [it.icon && _jsx(Icon, { name: it.icon }), _jsxs("span", { className: "nav-list-text", children: [_jsx("span", { className: "nav-list-label", children: it.label }), it.description != null && _jsx("span", { className: "nav-list-description", children: it.description })] }), it.value != null && _jsx("span", { className: "nav-list-value", children: it.value }), it.href && _jsx(Icon, { name: "chevron--right", size: "sm", className: "nav-list-chevron" })] });
+            return _jsx("li", { children: it.href && !it.disabled
+                    ? _jsx("a", { href: it.href, className: "nav-list-row", onClick: it.onClick, children: miolo })
+                    : _jsx("button", { type: "button", className: "nav-list-row", "aria-disabled": it.disabled || undefined, onClick: it.disabled ? undefined : it.onClick, children: miolo }) }, it.id);
+        }) });
+}
+export function CommandPalette({ open, onClose, items, placeholder, label }) {
+    const s = useAureaStrings();
+    const portal = usePortalContainer();
+    if (!open)
+        return null;
+    // SEM AGRUPAMENTO na v1, e a medição é que decidiu (13/08/2026). O `Autocomplete.Root` não
+    // consome a estrutura agrupada como o `Combobox.Root` consome — e o caminho alternativo, dar a
+    // cada `Group` a sua fatia de itens, PASSA POR CIMA do filtro do motor: digitar "the" devolvia
+    // os três comandos. Entre agrupar e filtrar, filtrar é o ponto de uma paleta de comandos.
+    // Fica registrado como limite, não como esquecimento: quando alguém precisar de grupo aqui, o
+    // caminho é o `Combobox.Root`, e isso é troca de motor, não ajuste.
+    const executa = (item) => { onClose(); item.run(); };
+    const linha = (item) => _jsxs(BaseAutocomplete.Item, { value: item, className: "menu-item command-item", onClick: () => executa(item), children: [item.icon && _jsx(Icon, { name: item.icon }), _jsx("span", { className: "command-item-label", children: item.label }), item.kbd && _jsx(Kbd, { children: item.kbd })] }, item.id);
+    // Escape fecha, e é o teclado que a pessoa tenta primeiro. O motor não fecha sozinho porque
+    // quem é dono do `open` é o consumidor — mesma regra do Dialog e do Drawer daqui.
+    return _jsx("div", { className: "command-overlay", onKeyDown: e => { if (e.key === "Escape")
+            onClose(); }, children: _jsx("div", { className: "command-palette", role: "dialog", "aria-label": label ?? s.commandLabel, children: _jsxs(BaseAutocomplete.Root, { items: items, itemToStringValue: (i) => i.label, mode: "list", open: true, children: [_jsx(BaseAutocomplete.Input, { autoFocus: true, className: "input", onKeyDown: e => { if (e.key === "Escape")
+                            onClose(); }, "aria-label": placeholder ?? s.commandPlaceholder, placeholder: placeholder ?? s.commandPlaceholder }), _jsx(BaseAutocomplete.Portal, { container: portal, children: _jsx(BaseAutocomplete.Positioner, { sideOffset: 6, className: "command-positioner", children: _jsxs(BaseAutocomplete.Popup, { className: "menu command-list", children: [_jsx(BaseAutocomplete.Empty, { className: "combobox-empty", children: s.comboboxEmpty }), _jsx(BaseAutocomplete.List, { children: _jsx(BaseAutocomplete.Collection, { children: linha }) })] }) }) })] }) }) });
+}
+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/navigation.d.ts

@@ -1,85 +1,2 @@
-import React, { type HTMLAttributes, type RefAttributes, type ReactNode, type ReactElement } from "react";
-import { type IconName } from "./system.js";
-export type StepState = "default" | "active" | "done" | "error";
-export interface StepItem {
-    label: ReactNode;
-    state?: StepState;
-    optional?: ReactNode;
-    onClick?: () => void;
-}
-export declare function Stepper({ items, label, className }: {
-    items: StepItem[];
-    label?: string;
-    className?: string;
-}): React.JSX.Element;
-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 interface SidebarItem {
-    id: string;
-    label: ReactNode;
-    href?: string;
-    icon?: IconName;
-    badge?: ReactNode;
-    onClick?: () => void;
-    items?: SidebarItem[];
-}
-export declare function Sidebar({ items, current, collapsed, label, children, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
-    items?: SidebarItem[];
-    current?: string;
-    collapsed?: boolean;
-    label?: string;
-}): 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;
+export * from "./navigation-client.js";
+export { Topbar, type TopbarVariant } from "./markup.js";

package/dist/navigation.js

@@ -1,138 +1,5 @@
-"use client";
-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 { 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 Stepper({ items, label, className }) {
-    const s = useAureaStrings();
-    return _jsx("div", { role: "list", "aria-label": label ?? s.stepperLabel, className: cx("stepper", className), children: items.map((it, n) => {
-            const st = it.state ?? "default";
-            const marca = st === "done" ? _jsx(Icon, { name: "checkmark" }) : st === "error" ? _jsx(Icon, { name: "error" }) : n + 1;
-            const miolo = _jsxs(_Fragment, { children: [_jsx("span", { className: "step-dot", children: marca }), _jsx("strong", { children: it.label }), it.optional && _jsx("small", { className: "step-optional", children: it.optional })] });
-            return _jsx("div", { role: "listitem", className: cx("step", st !== "default" && `step-${st}`), "aria-current": st === "active" ? "step" : undefined, children: it.onClick ? _jsx("button", { type: "button", className: "step-trigger", onClick: it.onClick, children: miolo }) : miolo }, n);
-        }) });
-}
-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);
-}
-function sidebarList(items, ctx, sub, labelledBy) {
-    return _jsx("ul", { className: cx("sidebar-list", sub && "sidebar-sub"), "aria-labelledby": labelledBy, children: items.map(it => {
-            const lid = ctx.baseId + it.id;
-            const filhos = it.items?.length ? it.items : undefined;
-            // Rótulo escondido vira `.sr-only` em vez de sumir do DOM: na lateral recolhida o item
-            // continua tendo nome para quem usa leitor de tela. Ícone sozinho não nomeia nada.
-            const oculto = (no) => ctx.collapsed ? _jsx("span", { className: "sr-only", children: no }) : no;
-            if (filhos && !it.href && !it.onClick)
-                return _jsxs("li", { children: [_jsx("p", { id: lid, className: cx("sidebar-group-label", ctx.collapsed && "sr-only"), children: it.label }), sidebarList(filhos, ctx, false, lid)] }, it.id);
-            const ativo = it.id === ctx.current;
-            const miolo = _jsxs(_Fragment, { children: [it.icon && _jsx(Icon, { name: it.icon, size: "sm" }), _jsx("span", { className: cx("sidebar-label", ctx.collapsed && "sr-only"), children: it.label }), it.badge != null && oculto(it.badge)] });
-            return _jsxs("li", { children: [it.href
-                        ? _jsx("a", { id: lid, href: it.href, className: "sidebar-item", "aria-current": ativo ? "page" : undefined, onClick: it.onClick, children: miolo })
-                        : _jsx("button", { id: lid, type: "button", className: "sidebar-item", "aria-current": ativo ? "page" : undefined, onClick: it.onClick, children: miolo }), filhos && sidebarList(filhos, ctx, true, lid)] }, it.id);
-        }) });
-}
-export function Sidebar({ items, current, collapsed, label, children, className, ...props }) {
-    const s = useAureaStrings();
-    const baseId = React.useId();
-    return _jsxs("aside", { className: cx("sidebar", collapsed && "sidebar-collapsed", className), ...props, children: [items && items.length > 0 && _jsx("nav", { className: "sidebar-nav", "aria-label": label ?? s.sidebarLabel, children: sidebarList(items, { baseId, current, collapsed }) }), 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] }) }); }
+// VITRINE da categoria — é este arquivo que `@aurea-uds/react/navigation` 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 "./navigation-client.js";
+export { Topbar } from "./markup.js";

package/dist/overlays.d.ts

@@ -7,6 +7,16 @@ export declare function Dialog({ open, title, children, footer, onClose }: {
     footer?: ReactNode;
     onClose: () => void;
 }): React.JSX.Element;
+export declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel }: {
+    open: boolean;
+    title: ReactNode;
+    description: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}): React.JSX.Element;
 export declare function Drawer({ open, title, children, onClose, side }: {
     open: boolean;
     title: ReactNode;
@@ -14,6 +24,19 @@ export declare function Drawer({ open, title, children, onClose, side }: {
     onClose: () => void;
     side?: "left" | "right";
 }): React.JSX.Element;
+export type AccessGateProps = {
+    allowed: boolean;
+    children: ReactElement;
+} & ({
+    mode?: "hide";
+    fallback?: ReactNode;
+    reason?: never;
+} | {
+    mode: "disable";
+    reason: ReactNode;
+    fallback?: never;
+});
+export declare function AccessGate({ allowed, children, ...resto }: AccessGateProps): React.JSX.Element;
 export type OverlaySide = "top" | "right" | "bottom" | "left";
 export declare function Tooltip({ children, content, side }: {
     children: ReactElement;

package/dist/overlays.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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 { Dialog as BaseDialog } from "@base-ui/react/dialog";
+import { AlertDialog as BaseAlertDialog } from "@base-ui/react/alert-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";
@@ -12,17 +13,60 @@ import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
 import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
 import { cx, useAureaStrings, usePortalContainer } from "./internal.js";
 import { Icon } from "./system.js";
+import { Button } from "./actions.js";
 export function Dialog({ open, title, children, footer, onClose }) { const s = useAureaStrings(); const portal = usePortalContainer(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
         onClose(); }, children: _jsxs(BaseDialog.Portal, { container: 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 })] })] }) }); }
+// ConfirmDialog (M5): a decisão que não se fecha por engano. NÃO é um Dialog com dois botões —
+// é `role="alertdialog"`, e a diferença é de comportamento, não de aparência: o Base UI tira do
+// AlertDialog.Root as props `modal` e `disablePointerDismissal` (medido no d.ts de 1.6.0), ou
+// seja, clicar fora NÃO fecha. Num Dialog comum, clicar fora vira "cancelei" sem a pessoa ter
+// decidido — que é exatamente o acidente que este componente existe para impedir.
+//
+// FOCO NO BOTÃO SEGURO: quem abre um "isto apaga" e aperta Enter por reflexo tem de cancelar,
+// não apagar. As quatro referências convergem em cancelar-antes-de-agir na ORDEM visual, e
+// nenhuma delas move o foco — este passo saiu de medir o teclado, não de ler.
+//
+// DUAS coisas garantem, e as duas foram medidas em 13/08/2026, uma de cada vez:
+//   • a ORDEM do DOM — o Cancelar vem primeiro, e o motor foca o primeiro focável. Sozinha, ela
+//     já faz o teste passar; tirar só o `initialFocus` NÃO reprova.
+//   • o `initialFocus`, que é o cinto: com a ordem dos dois botões INVERTIDA ele continua
+//     segurando o foco no Cancelar, e é aí que ele prova que não é enfeite. Sem ele e com a
+//     ordem invertida, o teste reprova — que é o defeito de verdade, porque inverter a ordem é
+//     uma mudança de aparência que alguém faz sem pensar no teclado.
+// O teste cobra o EFEITO ("o foco nasce no seguro"), não o mecanismo. É por isso que ele
+// sobrevive a trocar um dos dois — e reprova quando os dois somem.
+//
+// ESCOPO MENOR que a referência (BUILDING.md §5): lá são nove peças compostas
+// (Root/Trigger/Content/Header/Title/Description/Footer/Cancel/Action). Aqui é uma prop `open`,
+// como no `Dialog` e no `Drawer` — a composição não acrescenta escolha nenhuma num diálogo cujo
+// corpo é uma frase e dois botões.
+//
+// `description` é prop e não `children` porque ela é o nó de `aria-describedby`: o AlertDialog
+// só anuncia o que passa pelo `Description`. Como `children`, um consumidor poria um <div> no
+// meio e o leitor de tela perderia a frase que diz o que se perde.
+export function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel }) {
+    const s = useAureaStrings();
+    const portal = usePortalContainer();
+    const seguro = React.useRef(null);
+    return _jsx(BaseAlertDialog.Root, { open: open, onOpenChange: o => { if (!o)
+            onCancel(); }, children: _jsxs(BaseAlertDialog.Portal, { container: portal, children: [_jsx(BaseAlertDialog.Backdrop, { className: "dialog-backdrop" }), _jsxs(BaseAlertDialog.Popup, { className: "dialog dialog-confirm", initialFocus: seguro, children: [_jsx("header", { children: _jsx(BaseAlertDialog.Title, { render: _jsx("h2", {}), children: title }) }), _jsx(BaseAlertDialog.Description, { className: "dialog-body", children: description }), _jsxs("footer", { children: [_jsx(Button, { ref: seguro, variant: "secondary", onClick: onCancel, children: cancelLabel ?? s.confirmCancel }), _jsx(Button, { variant: destructive ? "danger" : "primary", onClick: onConfirm, children: confirmLabel ?? s.confirmProceed })] })] })] }) });
+}
 export function Drawer({ open, title, children, onClose, side = "right" }) { const s = useAureaStrings(); const portal = usePortalContainer(); return _jsx(BaseDialog.Root, { open: open, onOpenChange: o => { if (!o)
         onClose(); }, children: _jsxs(BaseDialog.Portal, { container: 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] })] }) }); }
+export function AccessGate({ allowed, children, ...resto }) {
+    if (allowed)
+        return children;
+    if (resto.mode === "disable")
+        return _jsx(Tooltip, { content: resto.reason, children: React.cloneElement(children, { "aria-disabled": true }) });
+    return _jsx(_Fragment, { children: resto.fallback ?? null });
+}
 // `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(); const portal = usePortalContainer(); return _jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { render: children, "aria-describedby": id }), _jsx(BaseTooltip.Portal, { container: portal, children: _jsx(BaseTooltip.Positioner, { side: side, sideOffset: 8, children: _jsx(BaseTooltip.Popup, { id: id, role: "tooltip", className: "tooltip", children: content }) }) })] }); }
+export function Tooltip({ children, content, side = "top" }) { const id = React.useId(); const triggerId = children.props.id; const portal = usePortalContainer(); return _jsxs(BaseTooltip.Root, { children: [_jsx(BaseTooltip.Trigger, { id: triggerId, render: children, "aria-describedby": id }), _jsx(BaseTooltip.Portal, { container: 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" }) { const portal = usePortalContainer(); return _jsxs(BasePopover.Root, { children: [_jsx(BasePopover.Trigger, { render: trigger }), _jsx(BasePopover.Portal, { container: 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] }) }) })] }); }
 // HoverCard (Lote 1 do BUILDING.md). Não é Tooltip nem Popover, e a diferença é de propósito,
 // não de aparência: a Tooltip é um RÓTULO curto (`role="tooltip"`, some ao mover o mouse); o

package/dist/pure.d.ts

@@ -4,6 +4,10 @@ export declare const universalStates: readonly UniversalState[];
 export declare const stateSeverity: (state: UniversalState) => "info" | "warning";
 export interface AureaStrings {
     close: string;
+    confirmCancel: string;
+    dataError: string;
+    dataEmpty: string;
+    confirmProceed: string;
     paginationLabel: string;
     previous: string;
     next: string;
@@ -68,6 +72,22 @@ export interface AureaStrings {
     mediaSkipForward: string;
     mediaFullscreenEnter: string;
     mediaFullscreenExit: string;
+    carouselLabel: string;
+    carouselSlide: string;
+    positionOf: string;
+    carouselPrev: string;
+    carouselNext: string;
+    galleryLabel: string;
+    sortableLabel: string;
+    sortableHandle: string;
+    sortableHelp: string;
+    sortableGrabbed: string;
+    sortableDropped: string;
+    sortableMoved: string;
+    sortableCanceled: string;
+    blockEditorLabel: string;
+    blockLabel: string;
+    blockRemove: string;
     uploadSending: string;
     uploadCancel: string;
     uploadRetry: string;
@@ -142,6 +162,7 @@ export interface AureaStrings {
     tocLabel: string;
     navigationToggle: string;
     sidebarLabel: string;
+    bottomNavLabel: string;
     universalState: Record<UniversalState, string>;
 }
 export declare const defaultStrings: AureaStrings;
@@ -164,3 +185,13 @@ export declare function gridStateFromParams(params: URLSearchParams, filters?: A
     column: string;
     facet?: boolean;
 }>): GridState;
+export interface ScreenState extends GridState {
+    tab?: string;
+    view?: string;
+    detail?: string;
+}
+export declare function screenStateToParams(state: ScreenState, into?: URLSearchParams): URLSearchParams;
+export declare function screenStateFromParams(params: URLSearchParams, filters?: Array<{
+    column: string;
+    facet?: boolean;
+}>): ScreenState;