@aurea-uds/react 0.1.0 → 0.3.0

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-client.d.ts

@@ -0,0 +1,64 @@
+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 StatusVariant = "neutral" | "online" | "offline" | "busy" | "away" | "running" | "success" | "warning" | "danger" | "info";
+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, 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, state, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    variant?: BannerVariant;
+    state?: UniversalState;
+    title?: ReactNode;
+    icon?: IconName;
+    onDismiss?: () => void;
+}): React.JSX.Element;
+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 type DataStateValue = "loading" | "error" | "empty" | UniversalState;
+export declare function DataState({ state, message, skeleton, emptyTitle, emptyIcon, action, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+    state?: DataStateValue;
+    message?: ReactNode;
+    skeleton?: ReactNode;
+    emptyTitle?: ReactNode;
+    emptyIcon?: IconName;
+    action?: ReactNode;
+    children: ReactNode | (() => ReactNode);
+}): 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;
+    title: ReactNode;
+    description?: ReactNode;
+    time?: ReactNode;
+    icon?: IconName;
+    read?: boolean;
+    group?: string;
+    onClick?: () => void;
+}
+export declare function NotificationCenter({ items, onItemClick, onMarkAllRead, label, icon, side }: {
+    items: NotificationItem[];
+    onItemClick?: (item: NotificationItem) => void;
+    onMarkAllRead?: () => void;
+    label?: string;
+    icon?: IconName;
+    side?: OverlaySide;
+}): React.JSX.Element;

package/dist/feedback-client.js

@@ -0,0 +1,110 @@
+"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, usePortalContainer, stateSeverity } from "./internal.js";
+import { Icon } from "./system.js";
+import { Button, IconButton } from "./actions.js";
+// `oracle` saiu daqui (achado M9, 26/07/2026): estava no tipo e no CSS, e NÃO estava na
+// ficha — ou seja, era superfície pública que o contrato não declarava. E é vocabulário do
+// app de origem (papel de agente), não do sistema, como as classes de domínio que o achado
+// A6 mapeou. As classes `.badge-oracle`/`.btn-oracle` seguem no core porque o
+// `apps/docs/index.html` escrito à mão as usa; saem junto com ele, na Fase 4 do plano.
+// `.btn-oracle` nunca foi alcançável pelo React — `ButtonVariant` não tem `oracle`.
+import { Skeleton } from "./markup.js";
+// Status (DIRECTION §3.6): condição OPERACIONAL — ponto + rótulo. Não é Badge: Badge é
+// metadado curto num pill; Status diz em que estado a coisa está. Reusa o .status-dot que
+// já existia solto. A variante colore só o PONTO (currentColor); o rótulo fica legível em
+// --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.
+// `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 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 }); }
+// `children` como FUNÇÃO é de propósito para o caso `loading`: assim o consumidor não paga o
+// render do conteúdo enquanto ele não existe. Aceita nó também, porque a maioria das telas já
+// tem o conteúdo pronto e obrigar função seria cerimônia.
+export function DataState({ state, message, skeleton, emptyTitle, emptyIcon, action, children, className, ...props }) {
+    const s = useAureaStrings();
+    const conteudo = () => typeof children === "function" ? children() : children;
+    const caixa = (inner, ocupado) => _jsx("div", { className: cx("data-state", className), "aria-busy": ocupado || undefined, "data-state": state, ...props, children: inner });
+    if (state === "loading")
+        return caixa(skeleton ?? _jsx(Skeleton, { style: { height: "var(--space-8)" } }), true);
+    if (state === "error")
+        return caixa(_jsx(Alert, { variant: "danger", children: message ?? s.dataError }));
+    // `titleAs="p"` e não o `h3` padrão do EmptyState: aqui o vazio é estado de uma REGIÃO, não
+    // seção do documento. Injetar um h3 no meio do conteúdo do consumidor salta nível de título —
+    // o gate de hierarquia pegou (`salto h1 → h3`) e o axe repetiu como `heading-order`.
+    if (state === "empty")
+        return caixa(_jsx(EmptyState, { icon: emptyIcon, titleAs: "p", title: emptyTitle ?? s.dataEmpty, description: message, action: action }));
+    // Os universais NÃO substituem o conteúdo: eles o acompanham. É a regra do DataGrid, e o
+    // motivo é o mesmo — a pessoa precisa do dado E do aviso, não de um no lugar do outro.
+    if (state)
+        return caixa(_jsxs(_Fragment, { children: [_jsx(Alert, { variant: stateSeverity(state), state: state, children: message }), conteudo()] }));
+    return caixa(conteudo());
+}
+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) {
+        const last = out[out.length - 1];
+        if (last && last.label === it.group)
+            last.items.push(it);
+        else
+            out.push({ label: it.group, items: [it] });
+    }
+    return out;
+}
+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);
+    const baseId = React.useId();
+    const seen = React.useRef(undefined);
+    const [announce, setAnnounce] = React.useState("");
+    React.useEffect(() => {
+        const ids = new Set(items.map(i => i.id));
+        if (seen.current === undefined) {
+            seen.current = ids;
+            return;
+        }
+        const fresh = items.filter(i => !seen.current.has(i.id)).length;
+        seen.current = ids;
+        // Texto idêntico duas vezes seguidas não muta o DOM e o leitor silencia a 2ª
+        // chegada (auditoria 18/07/2026, MÉDIO 4). Um NBSP alternado no fim força a
+        // mutação sem mudar o que se ouve.
+        if (fresh)
+            setAnnounce(prev => { const text = `${fresh} ${s.notificationNew}`; return prev === text ? text + " " : text; });
+    }, [items, s.notificationNew]);
+    const renderRow = (it) => {
+        const body = _jsxs(_Fragment, { children: [_jsx("span", { className: "notification-dot", "aria-hidden": "true" }), _jsxs("span", { className: "notification-item-title", children: [it.icon && _jsx(Icon, { name: it.icon, size: "sm" }), !it.read && _jsxs("span", { className: "sr-only", children: [s.notificationUnread, " "] }), it.title] }), it.time && _jsx("span", { className: "notification-time", children: it.time }), it.description && _jsx("span", { className: "notification-item-desc", children: it.description })] });
+        return it.onClick || onItemClick
+            ? _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, { 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);
+                                    }) })
+                                : _jsx("p", { className: "notification-empty", children: s.notificationEmpty })] }) }) }), _jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: announce })] });
+}

package/dist/feedback.d.ts

@@ -1,53 +1,2 @@
-import React, { type HTMLAttributes, type RefAttributes, type ReactNode } from "react";
-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";
-export declare function Badge({ variant, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
-    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> & {
-    variant?: StatusVariant;
-}): React.JSX.Element;
-export type AlertVariant = "info" | "success" | "warning" | "danger";
-export declare function Alert({ variant, title, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
-    variant?: AlertVariant;
-    title?: ReactNode;
-}): React.JSX.Element;
-export type BannerVariant = AlertVariant;
-export declare function Banner({ variant, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
-    variant?: BannerVariant;
-    title?: ReactNode;
-    icon?: IconName;
-    onDismiss?: () => void;
-}): React.JSX.Element;
-export declare function Progress({ value, label }: {
-    value: number;
-    label?: string;
-}): React.JSX.Element;
-export declare function Skeleton({ className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>): React.JSX.Element;
-export declare function EmptyState({ icon, title, titleAs: TitleTag, description, action }: {
-    icon?: IconName;
-    title: ReactNode;
-    titleAs?: "h2" | "h3" | "h4" | "p";
-    description?: ReactNode;
-    action?: ReactNode;
-}): React.JSX.Element;
-export interface NotificationItem {
-    id: string;
-    title: ReactNode;
-    description?: ReactNode;
-    time?: ReactNode;
-    icon?: IconName;
-    read?: boolean;
-    group?: string;
-    onClick?: () => void;
-}
-export declare function NotificationCenter({ items, onItemClick, onMarkAllRead, label, icon, side }: {
-    items: NotificationItem[];
-    onItemClick?: (item: NotificationItem) => void;
-    onMarkAllRead?: () => void;
-    label?: string;
-    icon?: IconName;
-    side?: OverlaySide;
-}): React.JSX.Element;
+export * from "./feedback-client.js";
+export { Badge, Progress, Skeleton, type BadgeVariant } from "./markup.js";