@aurea-uds/react 0.1.0 → 0.3.0

package/dist/navigation.d.ts

@@ -1,59 +1,2 @@
-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;
+export * from "./navigation-client.js";
+export { Topbar, type TopbarVariant } from "./markup.js";

package/dist/navigation.js

@@ -1,113 +1,5 @@
-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] }) }); }
+// 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;
@@ -26,6 +49,11 @@ export declare function Popover({ trigger, title, children, side }: {
     children: ReactNode;
     side?: OverlaySide;
 }): React.JSX.Element;
+export declare function HoverCard({ trigger, children, side }: {
+    trigger: ReactElement;
+    children: ReactNode;
+    side?: OverlaySide;
+}): React.JSX.Element;
 export interface MenuItemDef {
     label: ReactNode;
     onClick?: () => void;

package/dist/overlays.js

@@ -1,36 +1,92 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"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 { 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";
 import { ContextMenu as BaseContextMenu } from "@base-ui/react/context-menu";
-import { cx, useAureaStrings } from "./internal.js";
+import { PreviewCard as BasePreviewCard } from "@base-ui/react/preview-card";
+import { cx, useAureaStrings, usePortalContainer } 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] })] }) }); }
+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(); 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] }) }) })] }); }
+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 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
+// Popover abre por CLIQUE e pode conter foco; este é uma PRÉVIA rica que aparece ao repousar o
+// ponteiro sobre um link e cujo conteúdo é alcançável — o cartão de perfil ao passar sobre um
+// nome. As três referências que o têm chamam de hover-card ou preview-card e concordam nisso.
+// Superfície reusa `.popover` de propósito: é a mesma camada flutuante do sistema, e dar a ela
+// um segundo nome criaria duas peles para a mesma coisa.
+// Por depender de repouso do ponteiro, NÃO serve para informação essencial — quem navega só por
+// teclado ou toque não abre um hover card. Conteúdo obrigatório vai em Popover.
+export function HoverCard({ trigger, children, side = "bottom" }) { const portal = usePortalContainer(); return _jsxs(BasePreviewCard.Root, { children: [_jsx(BasePreviewCard.Trigger, { render: trigger }), _jsx(BasePreviewCard.Portal, { container: portal, children: _jsx(BasePreviewCard.Positioner, { side: side, sideOffset: 8, children: _jsx(BasePreviewCard.Popup, { className: "popover hover-card", children: 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) }) }) })] }); }
+export function DropdownMenu({ trigger, items, side = "bottom", label }) { const portal = usePortalContainer(); return _jsxs(BaseMenu.Root, { children: [_jsx(BaseMenu.Trigger, { render: trigger }), _jsx(BaseMenu.Portal, { container: 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) }) }) })] }); }
+export function ContextMenu({ children, items, label, className }) { const portal = usePortalContainer(); return _jsxs(BaseContextMenu.Root, { children: [_jsx(BaseContextMenu.Trigger, { className: className, tabIndex: 0, "aria-label": label, "aria-haspopup": "menu", children: children }), _jsx(BaseContextMenu.Portal, { container: portal, children: _jsx(BaseContextMenu.Positioner, { children: _jsx(BaseContextMenu.Popup, { className: "menu", "aria-label": label, children: renderMenuItems(items) }) }) })] }); }

package/dist/pure.d.ts

@@ -0,0 +1,196 @@
+export declare const cx: (...v: Array<string | false | null | undefined>) => string;
+export type UniversalState = "waiting_user" | "waiting_approval" | "waiting_dependency" | "offline" | "stale" | "partial" | "degraded";
+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;
+    breadcrumbLabel: string;
+    tabsLabel: string;
+    optionsLabel: string;
+    tableLabel: string;
+    commandLabel: string;
+    commandPlaceholder: string;
+    dismissNotification: string;
+    toolbarLabel: string;
+    loading: string;
+    otpDigit: string;
+    stepperLabel: string;
+    increment: string;
+    decrement: string;
+    comboboxEmpty: string;
+    comboboxClear: string;
+    comboboxOpen: string;
+    comboboxRemove: string;
+    comboboxLoading: string;
+    fileDropPrompt: string;
+    fileAdded: string;
+    fileRemoved: string;
+    fileRemove: string;
+    fileTooLarge: string;
+    fileWrongType: string;
+    treeLabel: string;
+    notificationsLabel: string;
+    notificationMarkAll: string;
+    notificationEmpty: string;
+    notificationUnread: string;
+    notificationNew: string;
+    dataGridFilter: string;
+    dataGridEmpty: string;
+    dataGridSelectAll: string;
+    dataGridSelectRow: string;
+    dataGridSelected: string;
+    dataGridClearSelection: string;
+    dataGridBulkLabel: string;
+    dataGridColumns: string;
+    dataGridResize: string;
+    dataGridStale: string;
+    dataGridPartial: string;
+    dataGridError: string;
+    dataGridDetails: string;
+    dataGridDetailPanel: string;
+    dataGridExport: string;
+    dataGridExportRows: string;
+    dataGridExportFiltered: string;
+    dataGridExportSelected: string;
+    mediaPlayer: string;
+    mediaPlay: string;
+    mediaPause: string;
+    mediaMute: string;
+    mediaUnmute: string;
+    mediaSeek: string;
+    mediaVolume: string;
+    mediaCaptionsShow: string;
+    mediaCaptionsHide: string;
+    mediaSkipBack: string;
+    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;
+    uploadError: string;
+    uploadCanceled: string;
+    uploadComplete: string;
+    uploadPause: string;
+    uploadResume: string;
+    uploadPaused: string;
+    uploadPending: string;
+    uploadChecksum: string;
+    uploadChecksumBad: string;
+    fileConflict: string;
+    fileReplace: string;
+    fileKeepBoth: string;
+    fileSkip: string;
+    uploadReceipt: string;
+    uploadReceiptCopy: string;
+    agentInspector: string;
+    invocationLabel: string;
+    invocationInput: string;
+    invocationOutput: string;
+    taskQueueLabel: string;
+    taskState: Record<"queued" | "running" | "completed" | "failed" | "blocked" | "paused", string>;
+    taskPriority: Record<"low" | "medium" | "high", string>;
+    approvalLabel: string;
+    approvalApprove: string;
+    approvalDeny: string;
+    approvalApproved: string;
+    approvalDenied: string;
+    approvalDeadline: string;
+    approvalRisk: Record<"low" | "medium" | "high", string>;
+    permissionLabel: string;
+    permissionAsk: string;
+    permissionAlways: string;
+    permissionNever: string;
+    eventStreamLabel: string;
+    traceLabel: string;
+    healthLabel: string;
+    healthState: Record<"operational" | "degraded" | "down" | "maintenance" | "unknown", string>;
+    modelUsageLabel: string;
+    usageMetric: Record<"tokens" | "cost" | "requests", string>;
+    costMeterLabel: string;
+    costMeterSpent: string;
+    costMeterRemaining: string;
+    costMeterExceeded: string;
+    costMeterNear: string;
+    costMeterOver: string;
+    memoryLabel: string;
+    memoryProvenance: string;
+    memoryOperation: Record<"added" | "updated" | "recalled" | "forgotten", string>;
+    memoryScope: Record<"episodic" | "semantic" | "procedural", string>;
+    agentMessageLabel: string;
+    agentMessageTo: string;
+    agentMessageBroadcast: string;
+    agentMessageReason: string;
+    agentMessageKind: Record<"request" | "response" | "handoff" | "broadcast" | "error", string>;
+    automationWhen: string;
+    automationThen: string;
+    automationEnabled: string;
+    automationLastRun: string;
+    automationResult: Record<"success" | "failure", string>;
+    graphLabel: string;
+    agentState: Record<"idle" | "thinking" | "running" | "paused" | "error" | "completed", string>;
+    codeEditor: string;
+    chatLabel: string;
+    chatMessage: string;
+    chatSend: string;
+    qrCode: string;
+    chartLabel: string;
+    copyCode: string;
+    tocLabel: string;
+    navigationToggle: string;
+    sidebarLabel: string;
+    universalState: Record<UniversalState, string>;
+}
+export declare const defaultStrings: AureaStrings;
+export declare const ptBR: AureaStrings;
+export declare const defaultSpriteUrl = "/aurea-icons.svg";
+export interface GridState {
+    sorting?: Array<{
+        id: string;
+        desc: boolean;
+    }>;
+    globalFilter?: string;
+    columnFilters?: Array<{
+        id: string;
+        value: unknown;
+    }>;
+    page?: number;
+}
+export declare function gridStateToParams(state: GridState, into?: URLSearchParams): URLSearchParams;
+export declare function gridStateFromParams(params: URLSearchParams, filters?: Array<{
+    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;