@aurea-uds/react 0.1.0 → 0.2.0

package/dist/chart.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Lote 3 do BUILDING.md (01/08/2026). SUBPATH PRÓPRIO, como ./data-grid e ./qrcode: o único
+// componente que precisa do `recharts`, que é peer OPCIONAL. Se morasse em data-display.tsx,
+// quem importa Table baixaria um motor de gráfico inteiro — que é o achado A5 visto de perto.
+//
+// NÃO ESCREVEMOS MOTOR DE GRÁFICO. Duas das quatro referências (shadcn/ui e Untitled UI React)
+// envelopam o MESMO motor, o Recharts, e nenhuma das quatro desenha eixo à mão. O que é nosso
+// aqui é só a pele: a caixa, o tooltip e a legenda. Escala, eixo, curva e interação são dele.
+//
+// O QUE FICOU DE FORA, e por quê (BUILDING.md passo 5 — escopo menor que o da referência):
+//   • o `ChartConfig` do shadcn (mapa dataKey → {label, color, theme}). MEDIDO em 01/08/2026: o
+//     payload que o Recharts entrega ao `content` já traz `name` (do prop `name` da série) e
+//     `color` resolvido. O objeto de configuração é indireção para reconstruir o que já chega.
+//     E o eixo `theme:{light,dark}` não existe aqui: `var(--chart-2)` já troca com o data-theme.
+//   • o par `ChartTooltip`/`ChartTooltipContent`. No Recharts 2 o filho tinha de ser o
+//     componente DELES, o que forçava o shadcn a reexportar o primitivo e pôr a pele no
+//     `content`. MEDIDO no 3.10.1: um componente NOSSO como filho é reconhecido. Então é uma
+//     peça só, não duas.
+//   • prop de altura. Dimensão não é número (check 23): a caixa mede pelo CSS (`.chart`), e
+//     quem quer outra altura escreve uma classe. Sem prop, sem pixel cru no consumidor.
+import React from "react";
+import { ResponsiveContainer, Tooltip, Legend } from "recharts";
+import { cx, useAureaStrings } from "./internal.js";
+export function Chart({ children, label, className }) {
+    const s = useAureaStrings();
+    const nome = label ?? s.chartLabel;
+    // O nome vai para os DOIS: o grupo (que também abriga legenda e tooltip, que ficam FORA do
+    // <svg>) e o desenho. Medido em 01/08/2026: o motor emite `<title></title>` vazio, e o <svg>
+    // é role="application" com tabindex=0 — quem chega nele pelo Tab ouviria "application" e mais
+    // nada. `title` é prop do gráfico do motor, não da caixa, então o repasse é aqui. Se o
+    // consumidor já passou o seu, o dele vence.
+    const desenho = React.isValidElement(children) && children.props.title == null
+        ? React.cloneElement(children, { title: nome }) : children;
+    return _jsx("div", { className: cx("chart", className), role: "group", "aria-label": nome, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: desenho }) });
+}
+// ChartTooltip: reusa `.tooltip`, a mesma superfície do Tooltip da Aurea — o valor sob o cursor
+// é um rótulo, não um card. O quadradinho de cor vem do `color` do payload (é DADO: a cor da
+// série), então é o único `style` inline do arquivo.
+// ponytail: sem formatador de valor. `tickFormatter` do eixo já é do motor, e nenhum consumidor
+// pediu o do tooltip — entra quando pedir.
+export function ChartTooltip(props) {
+    return _jsx(Tooltip, { cursor: { className: "chart-cursor" }, ...props, content: ({ active, payload, label }) => {
+            if (!active || !payload?.length)
+                return null;
+            return _jsxs("div", { className: "tooltip chart-tooltip", children: [label != null && label !== "" && _jsx("strong", { children: String(label) }), payload.map((p, i) => _jsxs("span", { className: "chart-key", children: [_jsx("i", { style: { background: p.color } }), p.name, _jsx("b", { children: String(p.value) })] }, p.dataKey ?? i))] });
+        } });
+}
+// ChartLegend: lista de séries. `value` do payload é o nome legível da série (o prop `name`),
+// não o valor do dado — é o nome do campo no Recharts e não dá para renomear.
+export function ChartLegend(props) {
+    return _jsx(Legend, { verticalAlign: "bottom", ...props, content: ({ payload }) => _jsx("ul", { className: "chart-legend", children: (payload ?? []).map((p, i) => _jsxs("li", { className: "chart-key", children: [_jsx("i", { style: { background: p.color } }), p.value] }, p.value ?? i)) }) });
+}

package/dist/code-editor.js

@@ -1,3 +1,4 @@
+"use client";
 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:

package/dist/code.js

@@ -1,3 +1,4 @@
+"use client";
 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:
@@ -9,10 +10,25 @@ import { Icon } from "./system.js";
 // carrega o pacote React; ele para a propagação pro core não copiar duas vezes.
 export function CodeBlock({ children, language = "text", copyable, className }) {
     const s = useAureaStrings();
-    const pre = _jsx("pre", { className: cx("code-block", !copyable && className), "data-language": language, children: _jsx("code", { children: children }) });
+    // tabIndex no <pre>: `.code-block` é `overflow:auto` por construção, então é REGIÃO ROLÁVEL
+    // e não tem nada focável dentro — quem navega por teclado não alcança o código que passa da
+    // largura. É a regra `scrollable-region-focusable` do axe, e o mesmo defeito que o painel de
+    // demo do catálogo já tinha corrigido em 30/07/2026 no lado dele; aqui, na biblioteca, ele
+    // seguia aberto e só não aparecia porque nenhuma linha era comprida o bastante. Quem o achou
+    // foi o `catalog-sweep` em 10/08/2026, quando o bloco do I1 fez a linha de import crescer.
+    const pre = _jsx("pre", { className: cx("code-block", !copyable && className), "data-language": language, tabIndex: 0, children: _jsx("code", { children: children }) });
     if (!copyable)
         return pre;
     const onCopy = (e) => { e.stopPropagation(); window.Aurea?.copy?.(e.currentTarget) ?? navigator.clipboard?.writeText(children); };
     return _jsxs("div", { className: cx("code-block-wrap", className), "data-aurea-copy-scope": true, children: [_jsxs("button", { type: "button", className: "btn btn-icon btn-ghost copy-code", "data-aurea-copy": true, "aria-label": s.copyCode, onClick: onCopy, children: [_jsx(Icon, { name: "copy", size: "sm", className: "c-copy" }), _jsx(Icon, { name: "checkmark", size: "sm", className: "c-done" })] }), pre] });
 }
-export function LogStream({ lines }) { return _jsx("div", { className: "log-stream", role: "log", "aria-live": "polite", children: lines.map((l, n) => _jsxs("div", { className: cx("log-line", l.level && `log-${l.level}`), children: [_jsx("time", { children: l.time }), _jsx("span", { children: l.text })] }, n)) }); }
+// A pele do log é de TRÊS colunas — hora, nível, texto — e o componente emitia DUAS. Medido no
+// item E13 (07/08/2026), com só o core: o texto caía na coluna do NÍVEL, 72px de largura, e a
+// prop `level` não pintava nada, porque o core estiliza `.log-level.error` (um elemento) e o
+// componente escrevia `log-error` (no container). Gate nenhum via: o check 18 só enxerga classe
+// LITERAL, e `log-${level}` é template; o check 15 dava a classe por produzível pelo mesmo
+// motivo, via prefixo. É o achado A6 outra vez — a regra do core servia a `apps/docs/index.html`,
+// escrito à mão com as três partes, e a biblioteca pagava a conta.
+// A célula do nível é SEMPRE renderizada, mesmo vazia: sem ela a linha sem `level` volta a ter
+// dois filhos e o texto volta para a coluna estreita.
+export function LogStream({ lines }) { return _jsx("div", { className: "log-stream", role: "log", "aria-live": "polite", children: lines.map((l, n) => _jsxs("div", { className: cx("log-line", l.level && `log-${l.level}`), children: [_jsx("time", { className: "log-time", children: l.time }), _jsx("span", { className: "log-level", children: l.level }), _jsx("span", { children: l.text })] }, n)) }); }

package/dist/communication.js

@@ -1,3 +1,4 @@
+"use client";
 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:

package/dist/data-display.js

@@ -1,3 +1,4 @@
+"use client";
 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:

package/dist/data-grid.d.ts

@@ -1,7 +1,18 @@
 import React from "react";
-import { type ColumnDef } from "@tanstack/react-table";
-export type { ColumnDef } from "@tanstack/react-table";
-export declare function DataGrid<T>({ data, columns, label, filterable, pageSize, selectable, onSelectionChange, getRowId, className }: {
+import { type ColumnDef, type SortingState, type RowSelectionState, type ColumnFiltersState, type VisibilityState, type ColumnSizingState } from "@tanstack/react-table";
+import { type UniversalState } from "./internal.js";
+import { type IconName } from "./system.js";
+export type { ColumnDef, SortingState, RowSelectionState, ColumnFiltersState, VisibilityState, ColumnSizingState } from "@tanstack/react-table";
+export interface GridFilterSpec {
+    column: string;
+    label: string;
+    facet?: boolean;
+    options?: Array<{
+        value: string;
+        label: string;
+    }>;
+}
+export declare function DataGrid<T>({ data, columns, label, filterable, pageSize, selectable, onSelectionChange, getRowId, className, sorting: sortingProp, onSortingChange, globalFilter: globalFilterProp, onGlobalFilterChange, page, onPageChange, rowSelection: rowSelectionProp, onRowSelectionChange, manualSorting, manualFiltering, manualPagination, rowCount, filters, columnFilters: columnFiltersProp, onColumnFiltersChange, bulkActions, stickyHeader, hideableColumns, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, resizableColumns, columnSizing: columnSizingProp, onColumnSizingChange, state, stateMessage, renderDetail, detailRowId: detailRowIdProp, onDetailRowIdChange, onExport }: {
     data: T[];
     columns: Array<ColumnDef<T, any>>;
     label?: string;
@@ -11,4 +22,42 @@ export declare function DataGrid<T>({ data, columns, label, filterable, pageSize
     onSelectionChange?: (rows: T[]) => void;
     getRowId?: (row: T, index: number) => string;
     className?: string;
+    sorting?: SortingState;
+    onSortingChange?: (sorting: SortingState) => void;
+    globalFilter?: string;
+    onGlobalFilterChange?: (filter: string) => void;
+    page?: number;
+    onPageChange?: (page: number) => void;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: (selection: RowSelectionState) => void;
+    manualSorting?: boolean;
+    manualFiltering?: boolean;
+    manualPagination?: boolean;
+    rowCount?: number;
+    filters?: GridFilterSpec[];
+    columnFilters?: ColumnFiltersState;
+    onColumnFiltersChange?: (filters: ColumnFiltersState) => void;
+    bulkActions?: Array<{
+        id: string;
+        label: string;
+        icon?: IconName;
+        onAction: (rows: T[], clear: () => void) => void;
+    }>;
+    stickyHeader?: boolean;
+    hideableColumns?: boolean;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: (v: VisibilityState) => void;
+    resizableColumns?: boolean;
+    columnSizing?: ColumnSizingState;
+    onColumnSizingChange?: (s: ColumnSizingState) => void;
+    state?: "loading" | "error" | UniversalState;
+    stateMessage?: string;
+    renderDetail?: (row: T) => React.ReactNode;
+    detailRowId?: string | null;
+    onDetailRowIdChange?: (id: string | null) => void;
+    onExport?: (rows: T[], scope: {
+        count: number;
+        filtered: boolean;
+        selected: boolean;
+    }) => void;
 }): React.JSX.Element;

package/dist/data-grid.js

@@ -1,3 +1,4 @@
+"use client";
 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:
@@ -5,15 +6,35 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // SUBPATH PRÓPRIO (ver ./qrcode): é o único componente que precisa do @tanstack/react-table,
 // que é peer OPCIONAL. Table, DataList, KPI e Timeline ficam em /data-display sem essa conta.
 import React from "react";
-import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, flexRender } from "@tanstack/react-table";
-import { cx, useAureaStrings } from "./internal.js";
+import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getFacetedRowModel, getFacetedUniqueValues, flexRender } from "@tanstack/react-table";
+import { cx, useAureaStrings, stateSeverity } from "./internal.js";
 import { Icon } from "./system.js";
-import { SearchField } from "./inputs.js";
+import { Button, Toolbar, ToolbarButton, ToolbarSeparator } from "./actions.js";
+import { Input, SearchField, MultiCombobox } from "./inputs.js";
 import { Pagination } from "./navigation.js";
+import { Cluster } from "./layout.js";
+import { Alert, Skeleton } from "./feedback.js";
+import { IconButton } from "./actions.js";
 // DataGrid (Fase 4): TanStack Table v8 (8.21.3) headless + pele Aurea — sort,
-// filtro global, paginação e seleção por checkbox. v8 porque o v9 ainda é beta
-// (07/2026; decisão no ROADMAP). A pele reusa .table-wrap/th/td; o estado é
-// interno (não controlado — controlar de fora só quando houver demanda real).
+// filtro global, paginação e seleção por checkbox. A pele reusa .table-wrap/th/td.
+//
+// PLANO-1.0 Parte F, itens F1 e F2 (08/08/2026): o estado deixou de ser SÓ interno.
+// Cada eixo aceita valor + callback de fora, e o interno segue sendo o default —
+// nenhuma chamada existente muda. E os quatro `manual*` dizem ao motor que quem
+// ordena/filtra/pagina é o servidor, não ele.
+//
+// Por que os nomes `manualSorting`/`manualFiltering`/`manualPagination` são os DO
+// MOTOR e não inventados aqui: as três referências de tabela foram medidas em
+// 08/08/2026 e NENHUMA expõe API controlada — o shadcn guarda tudo em useState
+// dentro do exemplo, o Kibo põe a ordenação num átomo global (jotai) e o Untitled
+// é apresentação. Não havia anatomia para copiar; o vocabulário veio do contrato
+// do motor, que é o que o consumidor já lê na documentação dele.
+//
+// LIMITE de `manualPagination`: `data` passa a ser UMA página, então `rowCount`
+// (total no servidor) é obrigatório — sem ele o motor devolve pageCount -1 e a
+// paginação some da tela. E `onSelectionChange` emite as linhas da página atual,
+// porque é só o que existe em memória; para seleção que atravessa páginas, use
+// `rowSelection`/`onRowSelectionChange`, que são ids.
 // A11y: aria-sort fica SÓ no th ordenado (padrão APG) e o cabeçalho ordenável é
 // um <button> de verdade; a linha selecionada usa data-selected apenas para
 // estilo — aria-selected é inválido em role=table, o estado acessível é o
@@ -22,11 +43,55 @@ function GridCheck({ label, indeterminate, ...props }) {
     return _jsxs("label", { className: "checkbox", children: [_jsx("input", { type: "checkbox", ref: el => { if (el)
                     el.indeterminate = !!indeterminate; }, ...props }), _jsx("span", { className: "control-mark" }), _jsx("span", { className: "sr-only", children: label })] });
 }
-export function DataGrid({ data, columns, label, filterable, pageSize, selectable, onSelectionChange, getRowId, className }) {
+// A faceta guarda um ARRAY de valores e a célula é ESCALAR — e nenhum filterFn de
+// fábrica faz "valor da célula ∈ selecionados": `arrIncludes`/`arrIncludesSome`
+// esperam a célula array (medido em filterFns.ts:45,67). É uma linha, e mora aqui
+// para o consumidor não repeti-la em cada coluna, que é o que a referência obriga.
+const facetFilterFn = (row, columnId, value) => !Array.isArray(value) || !value.length || value.includes(String(row.getValue(columnId)));
+function GridFilter({ col, spec, name }) {
+    if (!spec.facet)
+        return _jsx(Input, { value: col.getFilterValue() ?? "", onChange: e => col.setFilterValue(e.target.value || undefined), "aria-label": name });
+    const counts = new Map([...col.getFacetedUniqueValues()].map(([k, n]) => [String(k), n]));
+    // `options` explícitas mantêm na lista um valor que NENHUMA linha tem agora —
+    // é a diferença entre "não há nenhum cancelado" e "cancelado não existe".
+    const base = spec.options ?? [...counts.keys()].filter(v => v !== "" && v !== "null" && v !== "undefined").sort();
+    const items = (typeof base[0] === "string" ? base.map(v => ({ value: v, label: v })) : base)
+        .map(o => ({ value: o.value, label: counts.has(o.value) ? `${o.label} (${counts.get(o.value)})` : o.label }));
+    const picked = col.getFilterValue() ?? [];
+    return _jsx(MultiCombobox, { items: items, value: items.filter(i => picked.includes(i.value)), onValueChange: v => col.setFilterValue(v.length ? v.map(i => i.value) : undefined), label: _jsx("span", { className: "sr-only", children: name }) });
+}
+// F1: um só lugar decide entre "o valor vem de fora" e "eu guardo". Escrever o
+// ternário em cada eixo é como se erra em um — e o erro típico (esquecer o
+// onChange no modo controlado) trava a tela do consumidor, não a nossa.
+function useMaybe(outer, onChange, initial) {
+    const [inner, setInner] = React.useState(initial);
+    const controlled = outer !== undefined;
+    const value = controlled ? outer : inner;
+    return [value, u => { const next = typeof u === "function" ? u(value) : u; if (!controlled)
+            setInner(next); onChange?.(next); }];
+}
+export function DataGrid({ data, columns, label, filterable, pageSize, selectable, onSelectionChange, getRowId, className, sorting: sortingProp, onSortingChange, globalFilter: globalFilterProp, onGlobalFilterChange, page, onPageChange, rowSelection: rowSelectionProp, onRowSelectionChange, manualSorting, manualFiltering, manualPagination, rowCount, filters, columnFilters: columnFiltersProp, onColumnFiltersChange, bulkActions, stickyHeader, hideableColumns, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, resizableColumns, columnSizing: columnSizingProp, onColumnSizingChange, state, stateMessage, renderDetail, detailRowId: detailRowIdProp, onDetailRowIdChange, onExport }) {
     const s = useAureaStrings();
-    const [sorting, setSorting] = React.useState([]);
-    const [globalFilter, setGlobalFilter] = React.useState("");
-    const [rowSelection, setRowSelection] = React.useState({});
+    const [sorting, setSorting] = useMaybe(sortingProp, onSortingChange, []);
+    const [globalFilter, setGlobalFilter] = useMaybe(globalFilterProp, onGlobalFilterChange, "");
+    const [columnFilters, setColumnFilters] = useMaybe(columnFiltersProp, onColumnFiltersChange, []);
+    // F7: os dois são MAPAS serializáveis — é isso que torna a escolha persistível,
+    // e por isso a persistência não é nossa: quem decide entre localStorage, perfil
+    // do usuário ou URL é o consumidor, exatamente como no F4.
+    const [columnVisibility, setColumnVisibility] = useMaybe(columnVisibilityProp, onColumnVisibilityChange, {});
+    const [columnSizing, setColumnSizing] = useMaybe(columnSizingProp, onColumnSizingChange, {});
+    const [detailRowId, setDetailRowId] = useMaybe(detailRowIdProp, onDetailRowIdChange, null);
+    const [rowSelection, setRowSelection] = useMaybe(rowSelectionProp, onRowSelectionChange, {});
+    // `page` é 1-based porque o nosso Pagination é 1-based e é ele que aparece na
+    // tela; o motor é 0-based. A conversão fica AQUI, uma vez. Só o índice é
+    // estado: o tamanho vem sempre da prop, então mudar `pageSize` não deixa um
+    // valor velho preso em useState.
+    const paginated = pageSize != null;
+    const [innerIndex, setInnerIndex] = React.useState(0);
+    const pageIndex = page !== undefined ? page - 1 : innerIndex;
+    const pagination = React.useMemo(() => ({ pageIndex, pageSize: pageSize ?? 10 }), [pageIndex, pageSize]);
+    const setPagination = (u) => { const next = typeof u === "function" ? u(pagination) : u; if (page === undefined)
+        setInnerIndex(next.pageIndex); onPageChange?.(next.pageIndex + 1); };
     // Sem getRowId a seleção do TanStack é por ÍNDICE: trocar/reordenar data faria o
     // checkbox "seguir" a posição e marcar OUTRO registro (auditoria 18/07/2026,
     // ALTO 3). Sem id estável a seleção não sobrevive à mudança de dados — limpa.
@@ -41,16 +106,40 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
             onSelectionChange?.([]);
         }
     }, [data]);
-    const allColumns = React.useMemo(() => selectable ? [{
-            id: "select", enableSorting: false,
-            header: ({ table }) => _jsx(GridCheck, { label: s.dataGridSelectAll, checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler() }),
-            cell: ({ row }) => _jsx(GridCheck, { label: s.dataGridSelectRow, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler() }),
-        }, ...columns] : columns, [selectable, columns, s]);
+    const facetIds = React.useMemo(() => new Set((filters ?? []).filter(f => f.facet).map(f => f.column)), [filters]);
+    const allColumns = React.useMemo(() => {
+        const comFn = columns.map(c => {
+            const id = c.id ?? c.accessorKey;
+            return id && facetIds.has(id) ? { ...c, filterFn: facetFilterFn } : c;
+        });
+        return selectable ? [{
+                id: "select", enableSorting: false,
+                header: ({ table }) => _jsx(GridCheck, { label: s.dataGridSelectAll, checked: table.getIsAllRowsSelected(), indeterminate: table.getIsSomeRowsSelected(), onChange: table.getToggleAllRowsSelectedHandler() }),
+                cell: ({ row }) => _jsx(GridCheck, { label: s.dataGridSelectRow, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onChange: row.getToggleSelectedHandler() }),
+            }, ...comFn] : comFn;
+    }, [selectable, columns, s, facetIds]);
+    // F9: o gatilho do detalhe é uma COLUNA com botão por linha, no molde da coluna de
+    // seleção — e não um <tr> clicável. Linha não é foco de teclado, e transformá-la em
+    // alvo exige inventar papel, tabindex e tecla; um <button> já é tudo isso.
+    const colunas = React.useMemo(() => renderDetail ? [...allColumns, {
+            id: "detail", enableSorting: false, enableHiding: false, header: () => null,
+            cell: ({ row }) => _jsx(IconButton, { icon: "chevron--right", label: s.dataGridDetails, size: "sm", variant: "ghost", "aria-expanded": detailRowId === row.id, onClick: () => setDetailRowId(detailRowId === row.id ? null : row.id) }),
+        }] : allColumns, [allColumns, renderDetail, detailRowId, s]);
     const table = useReactTable({
-        data, columns: allColumns, getRowId,
-        state: { sorting, globalFilter, rowSelection },
+        data, columns: colunas, getRowId,
+        state: { sorting, globalFilter, rowSelection, columnFilters, columnVisibility, columnSizing, ...(paginated ? { pagination } : {}) },
         onSortingChange: setSorting,
         onGlobalFilterChange: setGlobalFilter,
+        onColumnFiltersChange: setColumnFilters,
+        onColumnVisibilityChange: setColumnVisibility,
+        onColumnSizingChange: setColumnSizing,
+        enableColumnResizing: !!resizableColumns, columnResizeMode: "onChange",
+        onPaginationChange: setPagination,
+        // F2: os três curto-circuitam o modelo de linha correspondente dentro do
+        // motor — medido no fonte instalado (RowSorting.ts:535, ColumnFiltering.ts:408,
+        // RowPagination.ts:376). Por isso os getters abaixo seguem ligados sem
+        // condição: sob `manual` o motor simplesmente não os chama.
+        manualSorting, manualFiltering, manualPagination, rowCount,
         // emite as linhas ORIGINAIS já aqui (não em effect): getPreFilteredRowModel
         // ignora filtro/página, então a seleção sobrevive a ambos.
         onRowSelectionChange: updater => {
@@ -62,15 +151,106 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
         getSortedRowModel: getSortedRowModel(),
         getFilteredRowModel: getFilteredRowModel(),
         enableRowSelection: !!selectable,
-        ...(pageSize ? { getPaginationRowModel: getPaginationRowModel(), initialState: { pagination: { pageSize } } } : {}),
+        ...(paginated ? { getPaginationRowModel: getPaginationRowModel() } : {}),
+        // só quando há faceta: os dois varrem os dados para montar o mapa de valores
+        // únicos, e ninguém paga por isso sem ter pedido.
+        // <T> explícito: chamados sem argumento de tipo, os dois fixam TData em
+        // `unknown` e derrubam a inferência do useReactTable inteiro — o erro sai
+        // longe daqui, em `columns` e em `row.original`.
+        ...(facetIds.size ? { getFacetedRowModel: getFacetedRowModel(), getFacetedUniqueValues: getFacetedUniqueValues() } : {}),
     });
     const rows = table.getRowModel().rows;
     const sortIcon = (dir) => dir === "asc" ? "chevron--sort--up" : dir === "desc" ? "chevron--sort--down" : "chevron--sort";
-    return _jsxs("div", { className: cx("datagrid", className), children: [filterable && _jsx(SearchField, { value: globalFilter, onChange: e => setGlobalFilter(e.target.value), placeholder: s.dataGridFilter, "aria-label": s.dataGridFilter }), _jsx("div", { className: "table-wrap", role: "region", "aria-label": label ?? s.tableLabel, tabIndex: 0, children: _jsxs("table", { children: [_jsx("thead", { children: table.getHeaderGroups().map(hg => _jsx("tr", { children: hg.headers.map(h => {
-                                    const dir = h.column.getIsSorted();
-                                    return _jsx("th", { colSpan: h.colSpan, className: h.column.id === "select" ? "datagrid-selcol" : undefined, "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : undefined, children: h.isPlaceholder ? null : h.column.getCanSort()
-                                            ? _jsxs("button", { type: "button", className: "datagrid-sort", onClick: h.column.getToggleSortingHandler(), children: [flexRender(h.column.columnDef.header, h.getContext()), _jsx(Icon, { name: sortIcon(dir), size: "sm", className: "datagrid-sort-icon" })] })
-                                            : flexRender(h.column.columnDef.header, h.getContext()) }, h.id);
-                                }) }, hg.id)) }), _jsx("tbody", { children: rows.length ? rows.map(row => _jsx("tr", { "data-selected": row.getIsSelected() || undefined, children: row.getVisibleCells().map(cell => _jsx("td", { className: cell.column.id === "select" ? "datagrid-selcol" : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id))
-                                : _jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: "datagrid-empty", children: s.dataGridEmpty }) }) })] }) }), pageSize != null && table.getPageCount() > 1 && _jsx(Pagination, { page: table.getState().pagination.pageIndex + 1, total: table.getPageCount(), onPageChange: p => table.setPageIndex(p - 1) })] });
+    // F5: a barra de lote. Duas referências independentes (Activepieces e Kaneo) chegam
+    // à MESMA anatomia — contagem, divisória, ações, e um jeito de limpar —, então é
+    // ela que entra. O que não entra é o resto das duas: barra `position:fixed` sobre a
+    // janela inteira (decisão da APLICAÇÃO, não de um componente que o consumidor põe
+    // onde quer, e briga de z-index de graça) e animação por biblioteca de movimento.
+    //
+    // E ela não tem CSS NENHUM: é `Toolbar` + `ToolbarButton` + `ToolbarSeparator`, que
+    // já são superfície flutuante com pele e teclado de setas do Base UI, mais `.hint`
+    // para a contagem. A referência desenha a mesma barra à mão em 57 linhas.
+    //
+    // As linhas vão como as ORIGINAIS e de antes do filtro, igual ao onSelectionChange —
+    // agir em lote sobre o que o filtro escondeu é o que o consumidor pediu ao marcar.
+    const emLote = bulkActions?.length ? table.getPreFilteredRowModel().flatRows.filter(r => rowSelection[r.id]).map(r => r.original) : [];
+    const limparSelecao = () => table.resetRowSelection();
+    // F10: o botão DIZ o escopo, e é essa a exigência do item — "exportar" sozinho
+    // esconde a pergunta que importa: exportar o quê, tudo ou o que está na tela?
+    // A precedência é a que a pessoa acabou de fazer: se marcou, é o marcado; se
+    // filtrou, é o filtrado; senão é tudo.
+    //
+    // FRONTEIRA, e ela não se move: a grade não gera arquivo nem baixa nada. Formato,
+    // codificação e transporte são do consumidor — é a mesma linha que a Parte G traça
+    // para o envio de arquivo. O que entra é a peça de interface e o escopo certo.
+    const selecionadasExp = onExport ? table.getPreFilteredRowModel().flatRows.filter(r => rowSelection[r.id]).map(r => r.original) : [];
+    const filtradas = onExport ? table.getFilteredRowModel().rows.map(r => r.original) : [];
+    const escopo = selecionadasExp.length ? { linhas: selecionadasExp, filtered: false, selected: true, sufixo: s.dataGridExportSelected }
+        : filtradas.length !== data.length ? { linhas: filtradas, filtered: true, selected: false, sufixo: s.dataGridExportFiltered }
+            : { linhas: filtradas, filtered: false, selected: false, sufixo: s.dataGridExportRows };
+    const exportar = onExport ? _jsx(Button, { variant: "secondary", leadingIcon: "download", onClick: () => onExport(escopo.linhas, { count: escopo.linhas.length, filtered: escopo.filtered, selected: escopo.selected }), children: `${s.dataGridExport} ${escopo.linhas.length} ${escopo.sufixo}` }) : null;
+    const busca = filterable ? _jsx(SearchField, { value: globalFilter, onChange: e => setGlobalFilter(e.target.value), placeholder: s.dataGridFilter, "aria-label": s.dataGridFilter }) : null;
+    // F7: esconder coluna é escolher várias de uma lista — o mesmo `MultiCombobox` da
+    // faceta do F3. Terceira peça desta parte que entra por reuso em vez de construção.
+    const ocultaveis = hideableColumns ? table.getAllLeafColumns().filter(c => c.getCanHide() && c.id !== "select") : [];
+    const itensColuna = ocultaveis.map(c => ({ value: c.id, label: String(c.columnDef.header ?? c.id) }));
+    const seletorColunasEl = hideableColumns ? _jsx(MultiCombobox, { items: itensColuna, value: itensColuna.filter(i => table.getColumn(i.value)?.getIsVisible()), onValueChange: v => setColumnVisibility(Object.fromEntries(ocultaveis.map(c => [c.id, v.some(i => i.value === c.id)]))), label: _jsx("span", { className: "sr-only", children: s.dataGridColumns }), placeholder: s.dataGridColumns }) : null;
+    // O Cluster só entra com DOIS ou mais controles: sozinho, cada um continua item de
+    // grade e ocupa a largura toda, como antes desta parte. Medido no F7.
+    const controles = [busca, seletorColunasEl, exportar].filter(Boolean).map((c, i) => _jsx(React.Fragment, { children: c }, i));
+    // F8: dado velho sem aviso é pior que tela vazia — então o aviso é TEXTO, e não uma
+    // cor. `Alert` já resolve os dois lados: `danger` vira role="alert" (interrompe),
+    // os outros viram role="status" (entra na próxima pausa do leitor de tela).
+    //
+    // `loading` NÃO apaga o que já está na tela: recarregar não é motivo para o
+    // consumidor perder o que estava lendo. Só quando não há linha nenhuma é que
+    // entram os esqueletos. O `aria-busy` diz o resto.
+    //
+    // Os nomes daqui são os DESTA grade. A Parte J é que vai nomear os estados
+    // universais uma vez só — antecipá-la aqui criaria o segundo vocabulário que ela
+    // existe para impedir.
+    //
+    // A Parte J (09/08/2026) nomeou os estados universais, e este `state` passou a ACEITÁ-LOS —
+    // era a previsão escrita no parágrafo acima e ela se cumpriu sem renomear nada: `stale` e
+    // `partial` já se chamavam assim. `loading` e `error` continuam sendo DESTA grade e de
+    // propósito: nos sete universais a tela AINDA SERVE, e sem linha nenhuma ela não serve.
+    //
+    // As três frases da grade ficam, e não é apego — elas falam de LINHAS ("algumas linhas não
+    // puderam ser carregadas") onde a universal fala do genérico ("parte disto"). Mais específico
+    // ganha de mais geral; o universal entra para os quatro estados que a grade não tinha.
+    const carregando = state === "loading";
+    const universal = state && state !== "loading" && state !== "error" ? state : null;
+    const recado = state && !carregando ? (stateMessage ?? (state === "stale" ? s.dataGridStale : state === "partial" ? s.dataGridPartial : state === "error" ? s.dataGridError : s.universalState[state])) : null;
+    // O marcador vai na GRADE, não no recado: quem está obsoleto é a tabela, e o `Alert` é só
+    // como ela conta isso. Achado pelo check 30 na primeira execução dele — eu tinha marcado o
+    // recado, e com `state="loading"` não há recado nenhum, então o estado não chegava ao DOM.
+    return _jsxs("div", { className: cx("datagrid", stickyHeader && "datagrid-sticky", className), "data-state": state, children: [emLote.length > 0 && _jsxs(Toolbar, { label: s.dataGridBulkLabel, children: [_jsxs("span", { className: "hint", children: [emLote.length, " ", s.dataGridSelected] }), _jsx(ToolbarSeparator, {}), bulkActions?.map(a => _jsx(ToolbarButton, { size: "sm", leadingIcon: a.icon, onClick: () => a.onAction(emLote, limparSelecao), children: a.label }, a.id)), _jsx(ToolbarButton, { size: "sm", onClick: limparSelecao, children: s.dataGridClearSelection })] }), controles.length > 1 ? _jsx(Cluster, { children: controles }) : controles[0] ?? null, recado && _jsx(Alert, { variant: state === "error" ? "danger" : universal ? stateSeverity(universal) : "warning", children: recado }), (() => {
+                // F9: o embrulho de duas colunas só existe COM o painel aberto — fechado, a
+                // marcação é a de sempre. É a lição do F7: não mudar a estrutura de quem não
+                // pediu nada. A largura do painel é `--datagrid-detail-w`, e quem decide se
+                // ele cabe é a largura da GRADE, não a da janela: por isso `@container`, no
+                // precedente do MediaPlayer.
+                const linhaAberta = detailRowId != null ? table.getRowModel().rows.find(r => r.id === detailRowId) : undefined;
+                const tabela = (_jsx("div", { className: "table-wrap", role: "region", "aria-label": label ?? s.tableLabel, tabIndex: 0, "aria-busy": carregando || undefined, children: _jsxs("table", { children: [_jsxs("thead", { children: [table.getHeaderGroups().map(hg => _jsx("tr", { children: hg.headers.map(h => {
+                                            const dir = h.column.getIsSorted();
+                                            return _jsxs("th", { colSpan: h.colSpan, className: h.column.id === "select" ? "datagrid-selcol" : undefined, "aria-sort": dir === "asc" ? "ascending" : dir === "desc" ? "descending" : undefined, style: resizableColumns ? { width: h.getSize() } : undefined, children: [h.isPlaceholder ? null : h.column.getCanSort()
+                                                        ? _jsxs("button", { type: "button", className: "datagrid-sort", onClick: h.column.getToggleSortingHandler(), children: [flexRender(h.column.columnDef.header, h.getContext()), _jsx(Icon, { name: sortIcon(dir), size: "sm", className: "datagrid-sort-icon" })] })
+                                                        : flexRender(h.column.columnDef.header, h.getContext()), resizableColumns && h.column.getCanResize() && _jsx("button", { type: "button", className: "datagrid-resizer", "aria-label": `${s.dataGridResize}: ${String(h.column.columnDef.header ?? h.column.id)}`, onMouseDown: h.getResizeHandler(), onTouchStart: h.getResizeHandler(), onKeyDown: e => {
+                                                            const d = e.key === "ArrowLeft" ? -16 : e.key === "ArrowRight" ? 16 : 0;
+                                                            if (!d)
+                                                                return;
+                                                            e.preventDefault();
+                                                            setColumnSizing({ ...columnSizing, [h.column.id]: Math.max(40, h.column.getSize() + d) });
+                                                        } })] }, h.id);
+                                        }) }, hg.id)), !!filters?.length && _jsx("tr", { className: "datagrid-filters", children: table.getVisibleLeafColumns().map(col => {
+                                            const spec = filters.find(f => f.column === col.id);
+                                            return _jsx("th", { className: col.id === "select" ? "datagrid-selcol" : undefined, children: spec ? _jsx(GridFilter, { col: col, spec: spec, name: `${s.dataGridFilter} ${spec.label}` }) : null }, col.id);
+                                        }) })] }), _jsx("tbody", { children: carregando && !rows.length
+                                    ? Array.from({ length: pageSize ?? 3 }, (_, i) => _jsx("tr", { children: table.getVisibleLeafColumns().map(c => _jsx("td", { children: _jsx(Skeleton, { className: "datagrid-skeleton" }) }, c.id)) }, `sk${i}`))
+                                    : rows.length ? rows.map(row => _jsx("tr", { "data-selected": row.getIsSelected() || undefined, children: row.getVisibleCells().map(cell => _jsx("td", { className: cell.column.id === "select" ? "datagrid-selcol" : undefined, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id))
+                                        : _jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleLeafColumns().length, className: "datagrid-empty", children: s.dataGridEmpty }) }) })] }) }));
+                if (!renderDetail || !linhaAberta)
+                    return tabela;
+                return _jsxs("div", { className: "datagrid-split", children: [tabela, _jsxs("aside", { className: "datagrid-detail", "aria-label": s.dataGridDetailPanel, children: [_jsx("div", { className: "datagrid-detail-head", children: _jsx(IconButton, { icon: "close", label: s.close, size: "sm", variant: "ghost", onClick: () => setDetailRowId(null) }) }), renderDetail(linhaAberta.original)] })] });
+            })(), paginated && table.getPageCount() > 1 && _jsx(Pagination, { page: pageIndex + 1, total: table.getPageCount(), onPageChange: p => table.setPageIndex(p - 1) })] });
 }

package/dist/feedback.d.ts

@@ -1,4 +1,5 @@
 import React, { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
+import { type UniversalState } from "./internal.js";
 import { type IconName } from "./system.js";
 import { type OverlaySide } from "./overlays.js";
 export type BadgeVariant = "neutral" | "primary" | "info" | "success" | "warning" | "danger" | "running" | "paused" | "offline" | "review";
@@ -6,17 +7,20 @@ export declare function Badge({ variant, className, ...props }: HTMLAttributes<H
     variant?: BadgeVariant;
 }): React.JSX.Element;
 export type StatusVariant = "neutral" | "online" | "offline" | "busy" | "away" | "running" | "success" | "warning" | "danger" | "info";
-export declare function Status({ variant, children, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
+export declare function Status({ variant, state, children, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
     variant?: StatusVariant;
+    state?: UniversalState;
 }): React.JSX.Element;
 export type AlertVariant = "info" | "success" | "warning" | "danger";
-export declare function Alert({ variant, title, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function Alert({ variant, state, title, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     variant?: AlertVariant;
+    state?: UniversalState;
     title?: ReactNode;
 }): React.JSX.Element;
 export type BannerVariant = AlertVariant;
-export declare function Banner({ variant, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function Banner({ variant, state, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     variant?: BannerVariant;
+    state?: UniversalState;
     title?: ReactNode;
     icon?: IconName;
     onDismiss?: () => void;
@@ -26,12 +30,18 @@ export declare function Progress({ value, label }: {
     label?: string;
 }): React.JSX.Element;
 export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
-export declare function EmptyState({ icon, title, titleAs: TitleTag, description, action }: {
+export declare function Spinner({ size, label, decorative, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
+    size?: "sm" | "md" | "lg";
+    label?: string;
+    decorative?: boolean;
+}): React.JSX.Element;
+export declare function EmptyState({ icon, title, titleAs: TitleTag, description, action, state }: {
     icon?: IconName;
     title: ReactNode;
     titleAs?: "h2" | "h3" | "h4" | "p";
     description?: ReactNode;
     action?: ReactNode;
+    state?: UniversalState;
 }): React.JSX.Element;
 export interface NotificationItem {
     id: string;

package/dist/feedback.js

@@ -1,10 +1,11 @@
+"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 { Popover as BasePopover } from "@base-ui/react/popover";
-import { cx, useAureaStrings } from "./internal.js";
+import { cx, useAureaStrings, usePortalContainer, stateSeverity } from "./internal.js";
 import { Icon } from "./system.js";
 import { Button, IconButton } from "./actions.js";
 export function Badge({ variant = "neutral", className, ...props }) { return _jsx("span", { className: cx("badge", variant !== "neutral" && `badge-${variant}`, className), ...props }); }
@@ -14,15 +15,43 @@ export function Badge({ variant = "neutral", className, ...props }) { return _js
 // --foreground. Cor não é o único sinal — quem diz o estado é o texto (WCAG 1.4.1); o
 // ponto é decorativo e sai do leitor de tela. ponytail: rótulo é do consumidor (sem i18n
 // nova) — a variante é só a cor.
-export function Status({ variant = "neutral", children, className, ...props }) { return _jsxs("span", { className: cx("status", variant !== "neutral" && `status-${variant}`, className), ...props, children: [_jsx("i", { className: "status-dot", "aria-hidden": "true" }), _jsx("span", { className: "status-label", children: children })] }); }
-export function Alert({ variant = "info", title, children, className, ...props }) { return _jsxs("div", { className: cx("alert", `alert-${variant}`, className), role: variant === "danger" ? "alert" : "status", ...props, children: [title && _jsx("strong", { children: title }), children] }); }
-export function Banner({ variant = "info", title, icon, onDismiss, children, className, ...props }) { const s = useAureaStrings(); return _jsxs("div", { className: cx("banner", `banner-${variant}`, className), role: variant === "danger" ? "alert" : "status", ...props, children: [icon ? _jsx(Icon, { name: icon }) : _jsx("span", {}), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children] }), onDismiss ? _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.close, onClick: onDismiss }) : _jsx("span", {})] }); }
-export function Progress({ value, label }) { return _jsx("div", { children: _jsx("div", { className: "progress", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, children: _jsx("span", { style: { width: `${Math.max(0, Math.min(100, value))}%` } }) }) }); }
+// `state` (Parte J) é EIXO À PARTE de `variant`, e os dois convivem: a variante é a cor do
+// ponto, o estado é a condição universal. Quem passa `state` e não passa `variant` recebe a
+// cor derivada — `offline` fica com o ponto vazado que ele já tinha desde sempre, os outros
+// seis caem na gravidade. Quem passa os dois manda, porque só o consumidor sabe se aquele
+// "esperando" dele é grave. E o rótulo é o do consumidor, como sempre foi: a string universal
+// entra só quando não há filho, para o componente não passar a inventar texto.
+export function Status({ variant, state, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? (state === "offline" ? "offline" : stateSeverity(state)) : "neutral"); return _jsxs("span", { className: cx("status", v !== "neutral" && `status-${v}`, className), "data-state": state, ...props, children: [_jsx("i", { className: "status-dot", "aria-hidden": "true" }), _jsx("span", { className: "status-label", children: children ?? (state ? s.universalState[state] : null) })] }); }
+export function Alert({ variant, state, title, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("alert", `alert-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [title && _jsx("strong", { children: title }), children ?? (state ? s.universalState[state] : null)] }); }
+export function Banner({ variant, state, title, icon, onDismiss, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("banner", `banner-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [icon ? _jsx(Icon, { name: icon }) : _jsx("span", {}), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children ?? (state ? s.universalState[state] : null)] }), onDismiss ? _jsx(IconButton, { variant: "ghost", size: "sm", icon: "close", label: s.close, onClick: onDismiss }) : _jsx("span", {})] }); }
+// A barra grampeava 0..100 e o `aria-valuenow` NÃO — medido ao publicar o contrato de API na
+// Parte E: com value=150 o desenho parava em 100% e o leitor de tela anunciava "150 de 100".
+// A causa é a de sempre: o grampo existia num lugar só. Agora é UMA expressão que serve os dois,
+// então não há como divergirem de novo.
+// SÓ DETERMINADA, de propósito: não há modo indeterminado nem `.progress` para ele no core. A
+// ficha dizia que havia e era falso — corrigido junto, porque contrato que promete o que não
+// existe custa mais que ausência.
+export function Progress({ value, label }) { const pct = Math.max(0, Math.min(100, value)); return _jsx("div", { children: _jsx("div", { className: "progress", role: "progressbar", "aria-label": label, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": pct, children: _jsx("span", { style: { width: `${pct}%` } }) }) }); }
 export function Skeleton({ className, ...props }) { return _jsx("div", { className: cx("skeleton", className), "aria-hidden": "true", ...props }); }
+// Spinner (Lote 1 do BUILDING.md). O glifo `.spinner` existia no core desde sempre e era usado
+// SÓ por dentro do Button — nunca teve componente, então nunca teve papel acessível: quem
+// esperava carregando não ouvia nada. As três referências que o têm concordam em `role="status"`
+// com rótulo, e é o que faltava.
+// Sem escolha de "estilo" de spinner (ponto, barra, pinwheel): é UM glifo, e um sistema com
+// cinco spinners é um sistema sem spinner.
+// `decorative` existe para o caso em que ele vive DENTRO de um controle que já anuncia o estado
+// (o `Button loading` faz isso com aria-busy) — dois anúncios para o mesmo fato é ruído.
+// O default é `sm` e não `md` de propósito: o lugar natural do spinner é DENTRO de um controle,
+// ao lado de texto, e é o tamanho que ele sempre teve aqui. Um default maior mudaria a
+// aparência de todo botão em carregamento sem ninguém ter pedido.
+export function Spinner({ size = "sm", label, decorative, className, ...props }) { const s = useAureaStrings(); return _jsx("span", { className: cx("spinner", size !== "sm" && `spinner-${size}`, className), ...(decorative ? { "aria-hidden": true } : { role: "status", "aria-label": label ?? s.loading }), ...props }); }
 // titleAs: o nível do título é do DOCUMENTO, não do componente. Fixo em h3, um empty state
 // no alto de uma página vira h1→h3 e a hierarquia quebra (axe heading-order). Default h3
 // para não mexer em quem já consome; quem sabe o contexto passa o nível certo.
-export function EmptyState({ icon = "document--blank", title, titleAs: TitleTag = "h3", description, action }) { return _jsxs("div", { className: "empty-state", children: [_jsx(Icon, { name: icon, size: "xl" }), _jsx(TitleTag, { className: "empty-title", children: title }), description && _jsx("p", { className: "muted", children: description }), action] }); }
+// `state` aqui NÃO deriva cor nenhuma — o vazio já é neutro e um empty state colorido seria
+// alarme onde há ausência. O que ele faz é o marcador no DOM e a descrição padrão, para
+// "sem conexão" e "resultado parcial" não serem sete frases diferentes em sete telas.
+export function EmptyState({ icon = "document--blank", title, titleAs: TitleTag = "h3", description, action, state }) { const s = useAureaStrings(); const desc = description ?? (state ? s.universalState[state] : null); return _jsxs("div", { className: "empty-state", "data-state": state, children: [_jsx(Icon, { name: icon, size: "xl" }), _jsx(TitleTag, { className: "empty-title", children: title }), desc && _jsx("p", { className: "muted", children: desc }), action] }); }
 function groupNotifications(items) {
     const out = [];
     for (const it of items) {
@@ -36,6 +65,7 @@ function groupNotifications(items) {
 }
 export function NotificationCenter({ items, onItemClick, onMarkAllRead, label, icon = "notification", side = "bottom" }) {
     const s = useAureaStrings();
+    const portal = usePortalContainer();
     const title = label ?? s.notificationsLabel;
     const unread = items.filter(i => !i.read).length;
     const groups = groupNotifications(items);
@@ -62,7 +92,7 @@ export function NotificationCenter({ items, onItemClick, onMarkAllRead, label, i
             ? _jsx("button", { type: "button", className: "notification-item", "data-read": it.read || undefined, onClick: () => { it.onClick?.(); onItemClick?.(it); }, children: body })
             : _jsx("div", { className: "notification-item", "data-read": it.read || undefined, children: body });
     };
-    return _jsxs(BasePopover.Root, { children: [_jsxs("span", { className: "notification-trigger", children: [_jsx(BasePopover.Trigger, { render: _jsx(IconButton, { variant: "ghost", icon: icon, label: unread ? `${title} (${unread})` : title }) }), unread > 0 && _jsx("span", { className: "notification-count", "aria-hidden": "true", children: unread > 99 ? "99+" : unread })] }), _jsx(BasePopover.Portal, { children: _jsx(BasePopover.Positioner, { side: side, sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover notification-panel", "aria-label": title, children: [_jsxs("div", { className: "notification-head", children: [_jsx(BasePopover.Title, { render: _jsx("strong", {}), children: title }), unread > 0 && onMarkAllRead && _jsx(Button, { variant: "ghost", size: "sm", onClick: onMarkAllRead, children: s.notificationMarkAll })] }), items.length
+    return _jsxs(BasePopover.Root, { children: [_jsxs("span", { className: "notification-trigger", children: [_jsx(BasePopover.Trigger, { render: _jsx(IconButton, { variant: "ghost", icon: icon, label: unread ? `${title} (${unread})` : title }) }), unread > 0 && _jsx("span", { className: "notification-count", "aria-hidden": "true", children: unread > 99 ? "99+" : unread })] }), _jsx(BasePopover.Portal, { container: portal, children: _jsx(BasePopover.Positioner, { side: side, sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover notification-panel", "aria-label": title, children: [_jsxs("div", { className: "notification-head", children: [_jsx(BasePopover.Title, { render: _jsx("strong", {}), children: title }), unread > 0 && onMarkAllRead && _jsx(Button, { variant: "ghost", size: "sm", onClick: onMarkAllRead, children: s.notificationMarkAll })] }), items.length
                                 ? _jsx("div", { className: "notification-list", children: groups.map((g, gi) => {
                                         const gid = baseId + gi;
                                         return _jsxs(React.Fragment, { children: [g.label && _jsx("p", { className: "notification-group-label", id: gid, children: g.label }), _jsx("ul", { className: "notification-sublist", "aria-labelledby": g.label ? gid : undefined, children: g.items.map(it => _jsx("li", { children: renderRow(it) }, it.id)) })] }, gi);