@aurea-uds/react 0.50.0 → 0.52.0

package/dist/agents.js

@@ -19,6 +19,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // verbal. Aqui as ações entram como nó, e quem monta o botão sabe o que ele faz.
 import React from "react";
 import { cx, useAureaStrings } from "./internal.js";
+import { proprio } from "./pure.js";
 import { Icon } from "./system.js";
 import { Status, Badge, Progress, Alert } from "./feedback.js";
 import { Avatar } from "./identity.js";
@@ -38,7 +39,7 @@ const ESTADO = {
 // exatamente o que a Parte J existe para impedir, um nível acima.
 export function AgentStatus({ state = "idle", label, className, ...props }) {
     const s = useAureaStrings();
-    return _jsx(Status, { variant: ESTADO[state], className: className, "data-state": state, ...props, children: label ?? s.agentState[state] });
+    return _jsx(Status, { variant: proprio(ESTADO, state), className: className, "data-state": state, ...props, children: label ?? proprio(s.agentState, state) });
 }
 // AgentCard — a identidade do agente: quem é, em que estado está, o que sabe fazer.
 export function AgentCard({ name, description, avatarSrc, model, state, capabilities, actions, className, ...props }) {
@@ -93,7 +94,7 @@ const TAREFA = {
 // aqui faria a fila responder por quatro contratos e nenhum deles direito.
 export function TaskQueue({ tasks, label, onRetry, className, ...props }) {
     const s = useAureaStrings();
-    return _jsx("ol", { className: cx("task-queue", className), "aria-label": label ?? s.taskQueueLabel, ...props, children: tasks.map(t => _jsxs("li", { className: "task-item", "data-state": t.state, children: [_jsxs("div", { className: "task-line", children: [_jsx("span", { className: "task-title", children: t.title }), t.priority && _jsx(Badge, { variant: t.priority === "high" ? "warning" : "neutral", children: s.taskPriority[t.priority] }), _jsx(Status, { variant: TAREFA[t.state], children: s.taskState[t.state] }), t.state === "failed" && onRetry && _jsx(IconButton, { variant: "ghost", size: "sm", icon: "arrow-counter-clockwise", label: `${s.uploadRetry} ${t.title}`, onClick: () => onRetry(t) })] }), t.description && _jsx("p", { className: "task-desc", children: t.description }), t.state === "running" && t.progress != null && _jsx(Progress, { value: Math.round(t.progress * 100), label: t.title })] }, t.id)) });
+    return _jsx("ol", { className: cx("task-queue", className), "aria-label": label ?? s.taskQueueLabel, ...props, children: tasks.map(t => _jsxs("li", { className: "task-item", "data-state": t.state, children: [_jsxs("div", { className: "task-line", children: [_jsx("span", { className: "task-title", children: t.title }), t.priority && _jsx(Badge, { variant: t.priority === "high" ? "warning" : "neutral", children: s.taskPriority[t.priority] }), _jsx(Status, { variant: proprio(TAREFA, t.state), children: proprio(s.taskState, t.state) }), t.state === "failed" && onRetry && _jsx(IconButton, { variant: "ghost", size: "sm", icon: "arrow-counter-clockwise", label: `${s.uploadRetry} ${t.title}`, onClick: () => onRetry(t) })] }), t.description && _jsx("p", { className: "task-desc", children: t.description }), t.state === "running" && t.progress != null && _jsx(Progress, { value: Math.round(t.progress * 100), label: t.title })] }, t.id)) });
 }
 // HumanApproval — o portão: o que vai acontecer, e a decisão de uma pessoa.
 export function HumanApproval({ title, description, details, risk, reasoning, deadline, decision, onApprove, onDeny, className, ...props }) {
@@ -169,7 +170,7 @@ const SAUDE = {
 // HealthMatrix — o que está de pé, numa grade.
 export function HealthMatrix({ entries, label, className, ...props }) {
     const s = useAureaStrings();
-    return _jsx("ul", { className: cx("health-matrix", className), "aria-label": label ?? s.healthLabel, ...props, children: entries.map(e => _jsxs("li", { className: "health-cell", "data-state": e.state, children: [_jsx("span", { className: "health-name", children: e.name }), _jsx(Status, { variant: SAUDE[e.state], children: s.healthState[e.state] }), e.detail && _jsx("span", { className: "hint", children: e.detail })] }, e.id)) });
+    return _jsx("ul", { className: cx("health-matrix", className), "aria-label": label ?? s.healthLabel, ...props, children: entries.map(e => _jsxs("li", { className: "health-cell", "data-state": e.state, children: [_jsx("span", { className: "health-name", children: e.name }), _jsx(Status, { variant: proprio(SAUDE, e.state), children: proprio(s.healthState, e.state) }), e.detail && _jsx("span", { className: "hint", children: e.detail })] }, e.id)) });
 }
 // ─────────────────────────────────────────────────────────────────────────────
 // H.e — custo e memória: quanto se consumiu, contra que teto, e o que ficou guardado.
@@ -259,7 +260,7 @@ const LANCAMENTO = {
 // ordenar e filtrar o razão compõe as duas coisas na aplicação — o exemplo do catálogo mostra.
 export function MemoryLedger({ records, label, className, ...props }) {
     const s = useAureaStrings();
-    return _jsx("ol", { className: cx("memory-ledger", className), "aria-label": label ?? s.memoryLabel, ...props, children: records.map(r => _jsxs("li", { className: "memory-entry", "data-operation": r.operation, "data-scope": r.scope, children: [_jsxs("div", { className: "memory-line", children: [_jsx(Badge, { variant: LANCAMENTO[r.operation], children: s.memoryOperation[r.operation] }), _jsx(Badge, { children: s.memoryScope[r.scope] }), _jsx("span", { className: "memory-content", children: r.content }), r.time && _jsx("time", { className: "memory-time", children: r.time })] }), (r.source || r.details?.length) && _jsxs("details", { className: "memory-provenance", children: [_jsx("summary", { children: s.memoryProvenance }), r.source && _jsx("p", { className: "memory-source", children: r.source }), !!r.details?.length && _jsx(DataList, { items: r.details })] })] }, r.id)) });
+    return _jsx("ol", { className: cx("memory-ledger", className), "aria-label": label ?? s.memoryLabel, ...props, children: records.map(r => _jsxs("li", { className: "memory-entry", "data-operation": r.operation, "data-scope": r.scope, children: [_jsxs("div", { className: "memory-line", children: [_jsx(Badge, { variant: proprio(LANCAMENTO, r.operation), children: proprio(s.memoryOperation, r.operation) }), _jsx(Badge, { children: proprio(s.memoryScope, r.scope) }), _jsx("span", { className: "memory-content", children: r.content }), r.time && _jsx("time", { className: "memory-time", children: r.time })] }), (r.source || r.details?.length) && _jsxs("details", { className: "memory-provenance", children: [_jsx("summary", { children: s.memoryProvenance }), r.source && _jsx("p", { className: "memory-source", children: r.source }), !!r.details?.length && _jsx(DataList, { items: r.details })] })] }, r.id)) });
 }
 const RECADO = {
     request: "info", response: "success", handoff: "primary", broadcast: "neutral", error: "danger",
@@ -279,7 +280,7 @@ export function InterAgentMessage({ messages, label, className, ...props }) {
     const s = useAureaStrings();
     return _jsx("ol", { className: cx("agent-messages", className), "aria-label": label ?? s.agentMessageLabel, ...props, children: messages.map(m => {
             const destino = m.to ?? s.agentMessageBroadcast;
-            return _jsxs("li", { className: "agent-message", "data-kind": m.kind ?? "handoff", children: [_jsxs("div", { className: "agent-message-line", children: [_jsxs("span", { className: "agent-message-route", role: "group", "aria-label": `${m.from} ${s.agentMessageTo} ${destino}`, children: [_jsx("strong", { children: m.from }), _jsx(Icon, { name: "arrow-right", size: "sm", className: "agent-message-arrow" }), m.to ? _jsx("strong", { children: m.to }) : _jsx("span", { className: "hint", children: destino })] }), _jsx(Badge, { variant: RECADO[m.kind ?? "handoff"], children: s.agentMessageKind[m.kind ?? "handoff"] }), m.time && _jsx("time", { className: "agent-message-time", children: m.time })] }), _jsx("p", { className: "agent-message-body", children: m.body }), (m.reason || m.details?.length) && _jsxs("details", { className: "agent-message-why", children: [_jsx("summary", { children: s.agentMessageReason }), m.reason && _jsx("p", { className: "agent-message-reason", children: m.reason }), !!m.details?.length && _jsx(DataList, { items: m.details })] })] }, m.id);
+            return _jsxs("li", { className: "agent-message", "data-kind": m.kind ?? "handoff", children: [_jsxs("div", { className: "agent-message-line", children: [_jsxs("span", { className: "agent-message-route", role: "group", "aria-label": `${m.from} ${s.agentMessageTo} ${destino}`, children: [_jsx("strong", { children: m.from }), _jsx(Icon, { name: "arrow-right", size: "sm", className: "agent-message-arrow" }), m.to ? _jsx("strong", { children: m.to }) : _jsx("span", { className: "hint", children: destino })] }), _jsx(Badge, { variant: proprio(RECADO, m.kind ?? "handoff"), children: proprio(s.agentMessageKind, m.kind ?? "handoff") }), m.time && _jsx("time", { className: "agent-message-time", children: m.time })] }), _jsx("p", { className: "agent-message-body", children: m.body }), (m.reason || m.details?.length) && _jsxs("details", { className: "agent-message-why", children: [_jsx("summary", { children: s.agentMessageReason }), m.reason && _jsx("p", { className: "agent-message-reason", children: m.reason }), !!m.details?.length && _jsx(DataList, { items: m.details })] })] }, m.id);
         }) });
 }
 // AutomationCard — a regra que roda sozinha: QUANDO isto, ENTÃO aquilo.
@@ -300,5 +301,5 @@ export function AutomationCard({ name, description, trigger, action, enabled, on
     const s = useAureaStrings();
     // `data-enabled` só quando LIGADA: o `false` saía como `data-enabled="false"` e escapava da regra que faz a regra
     // desligada recuar (`:not([data-enabled])`) — achado do check 49, lote 1, 20/10/2026.
-    return _jsxs("article", { className: cx("card", "automation", className), "data-enabled": enabled || undefined, ...props, children: [_jsxs("header", { className: "automation-head", children: [_jsxs("div", { className: "automation-id", children: [_jsx("strong", { children: name }), description && _jsx("span", { className: "hint", children: description })] }), onToggle && _jsx(Switch, { checked: !!enabled, onChange: e => onToggle(e.target.checked), label: s.automationEnabled })] }), _jsx(DataList, { items: [{ term: s.automationWhen, value: trigger }, { term: s.automationThen, value: action }, ...(details ?? [])] }), (lastRun || lastResult) && _jsxs("footer", { className: "automation-foot", children: [lastResult && _jsx(Status, { variant: lastResult === "success" ? "success" : "danger", children: s.automationResult[lastResult] }), lastRun && _jsxs("span", { className: "hint", children: [s.automationLastRun, ": ", lastRun] }), actions] }), !lastRun && !lastResult && actions && _jsx("footer", { className: "automation-foot", children: actions })] });
+    return _jsxs("article", { className: cx("card", "automation", className), "data-enabled": enabled || undefined, ...props, children: [_jsxs("header", { className: "automation-head", children: [_jsxs("div", { className: "automation-id", children: [_jsx("strong", { children: name }), description && _jsx("span", { className: "hint", children: description })] }), onToggle && _jsx(Switch, { checked: !!enabled, onChange: e => onToggle(e.target.checked), label: s.automationEnabled })] }), _jsx(DataList, { items: [{ term: s.automationWhen, value: trigger }, { term: s.automationThen, value: action }, ...(details ?? [])] }), (lastRun || lastResult) && _jsxs("footer", { className: "automation-foot", children: [lastResult && _jsx(Status, { variant: lastResult === "success" ? "success" : "danger", children: proprio(s.automationResult, lastResult) }), lastRun && _jsxs("span", { className: "hint", children: [s.automationLastRun, ": ", lastRun] }), actions] }), !lastRun && !lastResult && actions && _jsx("footer", { className: "automation-foot", children: actions })] });
 }

package/dist/code-highlight.js

@@ -14,6 +14,7 @@
 // (o check 19 do `validate.py` cobra que só este arquivo e o do editor importam o `@lezer/`).
 import { highlightCode as colorirArvore, tagHighlighter, tags as t } from "@lezer/highlight";
 import { parser as js } from "@lezer/javascript";
+import { proprio } from "./pure.js";
 import { parser as css } from "@lezer/css";
 import { parser as html } from "@lezer/html";
 import { parser as json } from "@lezer/json";
@@ -38,12 +39,14 @@ const ANALISADORES = {
     css, html, json,
 };
 let bash;
+// A língua vem de fora (a cerca de um texto em markdown): só vale a que é chave DA tabela — "constructor" devolvia a
+// função do `Object.prototype` e derrubava a tela (31/10/2026, a auditoria de segurança).
 // O bash vem do modo antigo do CodeMirror (o Lezer não tem gramática de shell); ele só é montado quando pedido.
 function analisador(lingua) {
     const l = lingua.toLowerCase();
     if (l === "bash" || l === "sh" || l === "shell")
         return bash ??= StreamLanguage.define(shell).parser;
-    return ANALISADORES[l];
+    return proprio(ANALISADORES, l);
 }
 /** As línguas que `highlightCode` colore. Com outra, ele devolve `null` e o `CodeBlock` mostra o texto puro. */
 export const highlightLanguages = ["bash", "css", "html", "javascript", "js", "json", "jsx", "sh", "shell", "ts", "tsx", "typescript"];

package/dist/data-grid.js

@@ -8,6 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useReactTable, getCoreRowModel, getSortedRowModel, getFilteredRowModel, getPaginationRowModel, getFacetedRowModel, getFacetedUniqueValues, flexRender } from "@tanstack/react-table";
 import { cx, useAureaStrings, stateSeverity } from "./internal.js";
+import { proprio } from "./pure.js";
 import { Icon } from "./system.js";
 import { Button, Toolbar, ToolbarButton, ToolbarSeparator } from "./actions.js";
 import { Input, SearchField, MultiCombobox } from "./inputs.js";
@@ -152,9 +153,29 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
     // A função acima precisa da tabela, e a tabela é o que esta chamada devolve: a referência fecha o
     // círculo. Ela é lida só quando o motor filtra, que é sempre depois da primeira montagem.
     const tabelaRef = React.useRef(null);
+    // Um nome de coluna que vem de fora (o link, `?sort=constructor`) e é nome do `Object.prototype` derrubava o motor, que
+    // procura a coluna num objeto comum (31/10/2026, a auditoria de segurança). Do estado que o motor recebe sai só o que
+    // é um desses nomes E não é coluna declarada; o nome que não existe continua com o aviso do próprio motor.
+    const idsDeclarados = React.useMemo(() => {
+        const ids = new Set();
+        const ver = (cs) => {
+            for (const c of cs) {
+                const d = c;
+                const id = d.id ?? d.accessorKey ?? (typeof d.header === "string" ? d.header : undefined);
+                if (id)
+                    ids.add(id);
+                if (d.columns)
+                    ver(d.columns);
+            }
+        };
+        ver(colunas);
+        return ids;
+    }, [colunas]);
+    const sortingDoMotor = React.useMemo(() => sorting.filter(o => idsDeclarados.has(o.id) || !(o.id in Object.prototype)), [sorting, idsDeclarados]);
+    const filtrosDoMotor = React.useMemo(() => columnFilters.filter(f => idsDeclarados.has(f.id) || !(f.id in Object.prototype)), [columnFilters, idsDeclarados]);
     const table = useReactTable({
         data, columns: colunas, getRowId,
-        state: { sorting, globalFilter, rowSelection, columnFilters, columnVisibility, columnSizing, ...(paginated ? { pagination } : {}) },
+        state: { sorting: sortingDoMotor, globalFilter, rowSelection, columnFilters: filtrosDoMotor, columnVisibility, columnSizing, ...(paginated ? { pagination } : {}) },
         onSortingChange: setSorting,
         onGlobalFilterChange: setGlobalFilter,
         onColumnFiltersChange: setColumnFilters,
@@ -375,7 +396,7 @@ export function DataGrid({ data, columns, label, filterable, pageSize, selectabl
     // 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;
+    const recado = state && !carregando ? (stateMessage ?? (state === "stale" ? s.dataGridStale : state === "partial" ? s.dataGridPartial : state === "error" ? s.dataGridError : proprio(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.

package/dist/disclosure.d.ts

@@ -7,9 +7,13 @@ export interface AccordionItem {
     /** O item que não abre: anunciado como desligado e fora do Tab. */
     disabled?: boolean;
 }
-export declare function Accordion({ items, variant, multiple, defaultValue, className }: {
+export declare function Accordion({ items, variant, multiple, defaultValue, indicator, size, className }: {
     items: AccordionItem[];
     variant?: AccordionVariant;
+    /** O desenho de abrir: `"chevron"` (o padrão, a setinha) ou `"plus"` (o "+" numa bolinha, que vira "×" quando abre). */
+    indicator?: "chevron" | "plus";
+    /** A altura da linha: `"md"` (o padrão) ou `"lg"` (60, com a letra do texto). */
+    size?: "md" | "lg";
     /** Deixa vários itens abertos ao mesmo tempo. Sem isto, abrir um fecha o outro. */
     multiple?: boolean;
     /** Os itens que começam abertos (o `id` de cada um). */

package/dist/disclosure.js

@@ -8,9 +8,11 @@ import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import { cx } from "./internal.js";
 import { soOValor } from "./pure.js";
 import { Icon } from "./system.js";
-export function Accordion({ items, variant = "default", multiple = false, defaultValue, className }) {
+// O SITE B (30/10/2026, protótipo): `indicator="plus"` troca a setinha pelo "+" numa bolinha, que gira e vira o "×"
+// amarelo quando abre; `size="lg"` é a linha de 60 com a letra do texto (16), a das perguntas do desenho aprovado.
+export function Accordion({ items, variant = "default", multiple = false, defaultValue, indicator = "chevron", size = "md", className }) {
     const grupo = React.useId();
-    return _jsx("div", { className: cx("accordion", variant === "surface" && "accordion-surface", className), children: items.map(i => _jsxs("details", { className: "accordion-item", name: multiple ? undefined : grupo, open: defaultValue?.includes(i.id) || undefined, children: [_jsxs("summary", { "aria-disabled": i.disabled || undefined, tabIndex: i.disabled ? -1 : undefined, onClick: i.disabled ? (e) => e.preventDefault() : undefined, children: [_jsx("span", { className: "accordion-title", children: i.title }), _jsx("span", { className: "accordion-chevron", "aria-hidden": "true" })] }), _jsx("div", { className: "accordion-content", children: i.content })] }, i.id)) });
+    return _jsx("div", { className: cx("accordion", variant === "surface" && "accordion-surface", indicator === "plus" && "accordion-plus", size === "lg" && "accordion-lg", className), children: items.map(i => _jsxs("details", { className: "accordion-item", name: multiple ? undefined : grupo, open: defaultValue?.includes(i.id) || undefined, children: [_jsxs("summary", { "aria-disabled": i.disabled || undefined, tabIndex: i.disabled ? -1 : undefined, onClick: i.disabled ? (e) => e.preventDefault() : undefined, children: [_jsx("span", { className: "accordion-title", children: i.title }), _jsx("span", { className: "accordion-chevron", "aria-hidden": "true" })] }), _jsx("div", { className: "accordion-content", children: i.content })] }, i.id)) });
 }
 // COLLAPSIBLE — uma seção que abre e fecha, com o estado do lado de quem usa.
 //

package/dist/feedback-client.js

@@ -2,7 +2,7 @@
 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:
-import { peleDoEixo } from "./pure.js";
+import { peleDoEixo, proprio } from "./pure.js";
 // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
 import React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
@@ -30,7 +30,7 @@ import { Skeleton, Badge, Switch } from "./markup.js";
 // 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 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 ? proprio(s.universalState, state) : null) })] }); }
 // O ícone é FUNÇÃO da variante, como o `role` já era. A referência congelada desenha o alerta
 // com ele em toda variante, e um sistema que faz o consumidor lembrar qual glifo significa
 // "perigo" acaba com quatro respostas diferentes para a mesma pergunta. `icon` sobrepõe quando o
@@ -55,14 +55,14 @@ const ICONE_DA_VARIANTE = { info: "info",
 // "esperando" dele é grave.
 // `action` (15/10/2026, o "Upgrade" da referência): o botão do aviso, depois do texto e antes do X; no celular ele desce
 // para baixo do texto, na mesma coluna (a referência repete o botão; aqui ele só muda de lugar).
-export function Alert({ variant, state, title, icon, onDismiss, action, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("alert", `alert-${v}`, action != null && "alert-has-action", className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [_jsx(Icon, { name: icon ?? ICONE_DA_VARIANTE[v], weight: icon ? undefined : "fill" }), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children ?? (state ? s.universalState[state] : null)] }), action != null && _jsx("div", { className: "alert-action", children: action }), onDismiss ? _jsx(CloseButton, { onClick: onDismiss }) : _jsx("span", {})] }); }
+export function Alert({ variant, state, title, icon, onDismiss, action, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("alert", `alert-${v}`, action != null && "alert-has-action", className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [_jsx(Icon, { name: icon ?? proprio(ICONE_DA_VARIANTE, v) ?? "info", weight: icon ? undefined : "fill" }), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children ?? (state ? proprio(s.universalState, state) : null)] }), action != null && _jsx("div", { className: "alert-action", children: action }), onDismiss ? _jsx(CloseButton, { onClick: onDismiss }) : _jsx("span", {})] }); }
 export function Banner(props) {
     if (props.variant === "consent")
         return _jsx(BannerConsent, { ...props });
     const { variant, state, title, icon, onDismiss, children, className, categories: _c, value: _v, onConsent: _o, ...rest } = 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, ...rest, 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: "x", label: s.close, onClick: onDismiss }) : _jsx("span", {})] });
+    return _jsxs("div", { className: cx("banner", `banner-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...rest, children: [icon ? _jsx(Icon, { name: icon }) : _jsx("span", {}), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children ?? (state ? proprio(s.universalState, state) : null)] }), onDismiss ? _jsx(IconButton, { variant: "ghost", size: "sm", icon: "x", label: s.close, onClick: onDismiss }) : _jsx("span", {})] });
 }
 // GAR-19 (lote U, 19/10/2026): o aviso de cookies é uma VARIAÇÃO do Banner (decisão do Victor). Nenhuma referência da fila
 // tem a peça aberta; as regras vêm de duas fontes primárias, lidas em 19/10/2026:
@@ -144,7 +144,7 @@ function CorpoDoDataState({ state, message, skeleton, emptyTitle, emptyIcon, act
         return caixa(_jsxs(_Fragment, { children: [_jsx(Alert, { variant: stateSeverity(state), state: state, children: message }), conteudo()] }));
     return caixa(conteudo());
 }
-export function EmptyState({ icon = "file", 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] }); }
+export function EmptyState({ icon = "file", title, titleAs: TitleTag = "h3", description, action, state }) { const s = useAureaStrings(); const desc = description ?? (state ? proprio(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) {

package/dist/graph.js

@@ -41,6 +41,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { ReactFlow, ReactFlowProvider, Background, BaseEdge, EdgeLabelRenderer, EdgeText, Handle, MiniMap, Panel, Position, SelectionMode, ViewportPortal, applyNodeChanges, getBezierPath, getSmoothStepPath, useNodesInitialized, useOnViewportChange, useReactFlow, useStore } from "@xyflow/react";
 import { cx, useAureaStrings } from "./internal.js";
+import { proprio } from "./pure.js";
 import { Icon } from "./system.js";
 import { Badge } from "./markup.js";
 import { Button, IconButton, Toolbar, ToolbarButton, ToolbarSeparator } from "./actions.js";
@@ -537,7 +538,7 @@ function paraDrawio(nos, linhas, forma, titulo) {
         if (!ids.has(e.from) || !ids.has(e.to))
             return;
         const id = `e-${i}`;
-        const estilo = `endArrow=none;html=0;${forma === "step" ? "edgeStyle=orthogonalEdgeStyle;rounded=1;" : "curved=1;"}${TRACO_DRAWIO[e.pattern ?? "solid"]}strokeWidth=${PESO_DRAWIO[e.weight ?? "regular"]};`;
+        const estilo = `endArrow=none;html=0;${forma === "step" ? "edgeStyle=orthogonalEdgeStyle;rounded=1;" : "curved=1;"}${proprio(TRACO_DRAWIO, e.pattern ?? "solid") ?? ""}strokeWidth=${proprio(PESO_DRAWIO, e.weight ?? "regular") ?? 1};`;
         const dobras = rota && rota.length > 2 ? `<Array as="points">${rota.slice(1, -1).map(p => `<mxPoint x="${Math.round(p.x)}" y="${Math.round(p.y)}"/>`).join("")}</Array>` : "";
         celulas.push(`<mxCell id="${id}" value="${XML(e.label ?? "")}" style="${estilo}" edge="1" parent="1" source="${XML(`n-${e.from}`)}" target="${XML(`n-${e.to}`)}"><mxGeometry relative="1" as="geometry">${dobras}</mxGeometry></mxCell>`);
         // O nome da porta na ponta: o rótulo-filho da linha, a 80% do caminho para cada lado (o idioma do draw.io).

package/dist/layout-client.d.ts

@@ -3,14 +3,14 @@ import { type Orientation, type Responsive } from "./pure.js";
 import { type IconButtonProps } from "./actions.js";
 import { type HeaderVariant, type HeaderTab, type SidebarVariant, type SidebarScrollbar, type SidebarEntry, type SidebarCollapsible, type SidebarIndicator } from "./navigation.js";
 declare function AppShellSidebarToggle(props: Omit<IconButtonProps, "icon" | "label" | "onClick" | "variant">): React.JSX.Element;
-export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, layout, sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle, sidebarShortcut, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, aside, asideLabel, asideVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant, topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, topbarActions, topbarBlurred, layout, sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle, sidebarShortcut, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant, aside, asideLabel, asideVariant, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     brand: ReactNode;
     navigation?: ReactNode;
     navItems?: SidebarEntry[];
     currentNavId?: string;
     navLabel?: string;
     topbar?: ReactNode;
-    topbarVariant?: Exclude<HeaderVariant, "pill">;
+    topbarVariant?: HeaderVariant;
     topbarDivider?: boolean;
     sidebarVariant?: SidebarVariant;
     /** O arranjo (lote T, 17/10/2026): `"app"` (o padrão, o de sempre) ou `"docs"`, o da documentação da referência — um
@@ -30,6 +30,13 @@ export declare function AppShell({ brand, navigation, navItems, currentNavId, na
     topbarTabsLabel?: string;
     /** A ponta da linha das áreas (o `tabsEnd` do `Header`): a chave Web | Native da documentação. */
     topbarTabsEnd?: ReactNode;
+    /** A PONTA DA BARRA DE CIMA (MNT-37): o que fica na outra ponta, longe da marca e do `topbar` — a chave de tema, a
+     *  conta, o sino. É o `actions` do `Header`. No `layout="sidebar"` a barra do conteúdo passa a existir também quando o app
+     *  passa só isto; no `"docs"`, o botão da gaveta continua o último, depois delas. */
+    topbarActions?: ReactNode;
+    /** O site B (30/10/2026): o fundo da barra de cima que EMBAÇA o que passa por baixo — o `blurred` do `Header`, na
+     *  `flush` e na `pill`. */
+    topbarBlurred?: boolean;
     /** 0.32.0: a barra de rolagem da lateral da esquerda — o `scrollbar` da `Sidebar`. Padrão `hover` (clara, só com o
      *  ponteiro em cima); `visible` é a barra sempre à vista. */
     sidebarScrollbar?: SidebarScrollbar;

package/dist/layout-client.js

@@ -59,7 +59,8 @@ function focoDaGaveta(e) {
 // API pública intacta: as props seguem brand/navigation/topbar. O que mudou é ONDE a
 // marca sai — no topo, não na lateral. `topbarVariant` escolhe a pele do topo; o shell
 // precisa saber porque a lateral se encaixa abaixo dele (o `flush` não tem folga em
-// cima, então ela sobe um --space-4). `pill` é cabeçalho de site — não é pra shell.
+// cima, então ela sobe um --space-4). ~~`pill` é cabeçalho de site — não é pra shell.~~ Desde o site B (30/10/2026), a
+// `pill` entra no shell: a cápsula da largura do bloco, que flutua a --space-4 do alto (o `maxWidth` do `Header`).
 // A lateral RECOLHE em tela estreita: o <aside> é um popover nativo e o botão é o invoker. O
 // navegador entrega Escape, clique fora e o `aria-expanded` no disparador. Era o achado A8: em
 // 375px o `h1` da página começava 4,6 telas abaixo, depois dos 65 itens da navegação.
@@ -166,7 +167,7 @@ function ProvedorDaLateral({ ligado, children, ...p }) {
     return ligado ? _jsx(Sidebar.Provider, { id: SHELL_NAV_ID, ...p, children: children }) : _jsx(_Fragment, { children: children });
 }
 function AppShellSidebarToggle(props) { return _jsx(Sidebar.Toggle, { ...props }); }
-export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, layout = "app", sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle = "edge", sidebarShortcut = true, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", aside, asideLabel, asideVariant, children, className, ...props }) {
+export function AppShell({ brand, navigation, navItems, currentNavId, navLabel, topbar, topbarVariant = "floating", topbarDivider, topbarTabs, topbarCurrentTab, topbarTabsLabel, topbarTabsEnd, topbarActions, topbarBlurred, layout = "app", sidebarVariant, sidebarScrollbar, sidebarFooter, sidebarCollapsed, sidebarCollapsible, sidebarToggle = "edge", sidebarShortcut = true, sidebarIndicator, sidebarPanel, sidebarContrast, defaultSidebarCollapsed, onSidebarCollapsedChange, contentVariant = "surface", aside, asideLabel, asideVariant, children, className, ...props }) {
     const s = useAureaStrings();
     const docs = layout === "docs", lateral = layout === "sidebar";
     useGavetaFechaNoDesktop(docs);
@@ -223,9 +224,9 @@ export function AppShell({ brand, navigation, navItems, currentNavId, navLabel,
     // No arranjo, o topo é o pequeno (`size="sm"`), e o botão também: com o tamanho de sempre ele ficava 4 maior que os
     // vizinhos e fora da linha deles (medido a 375, sem toque; com toque, todos sobem para 44).
     const botaoDaGaveta = _jsx(IconButton, { className: "nav-toggle", icon: "list", label: s.navigationToggle, popoverTarget: SHELL_NAV_ID, ...(docs ? { size: "sm" } : {}) });
-    return _jsx("div", { className: cx("app-shell", layout === "docs" && "app-shell-docs", lateral && "app-shell-lateral", !lateral && topbarVariant === "flush" && "app-shell-flush", recolhe && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: _jsxs(ProvedorDaLateral, { ligado: recolhe, collapsed: efetiva, onCollapsedChange: definir, collapsible: forma, shortcut: sidebarShortcut, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), !lateral && _jsxs(Header, { variant: topbarVariant, divider: topbarDivider, tabs: topbarTabs, currentTab: topbarCurrentTab, tabsLabel: topbarTabsLabel, tabsEnd: topbarTabsEnd, ...(docs ? { maxWidth: "docs", size: "sm" } : {}), brand: docs ? brand : _jsxs(_Fragment, { children: [botaoDaGaveta, brand] }), children: [topbar, docs && botaoDaGaveta] }), recolhe && !lateral && sidebarToggle !== "none" && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, collapsible: forma, indicator: sidebarIndicator, panel: sidebarPanel, contrast: sidebarContrast, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, header: lateral ? brand : undefined, footer: sidebarFooter, children: navigation }), docs && aside != null && _jsx("div", { className: "docs-toc-bar", children: _jsxs("button", { type: "button", className: "docs-toc-toggle", popoverTarget: SHELL_TOC_ID, children: [_jsx(Icon, { name: "list-bullets" }), _jsx("span", { className: "docs-toc-current", "data-toc-current": "", children: asideLabel ?? s.tocLabel }), _jsx(Icon, { name: "caret-down" })] }) }), lateral
-                    ? _jsxs("div", { className: "app-shell-column", children: [topbar != null
-                                ? _jsx(Header, { variant: "flush", size: "sm", divider: topbarDivider, brand: _jsxs(_Fragment, { children: [botaoDaGaveta, sidebarToggle !== "none" && _jsx(AppShellSidebarToggle, {})] }), children: topbar })
+    return _jsx("div", { className: cx("app-shell", layout === "docs" && "app-shell-docs", lateral && "app-shell-lateral", !lateral && topbarVariant === "flush" && "app-shell-flush", !lateral && topbarVariant === "pill" && "app-shell-pill", recolhe && "app-shell-collapsible", aside != null && "app-shell-with-aside", className), ...props, children: _jsxs(ProvedorDaLateral, { ligado: recolhe, collapsed: efetiva, onCollapsedChange: definir, collapsible: forma, shortcut: sidebarShortcut, children: [_jsx("a", { className: "skip-link", href: `#${SHELL_MAIN_ID}`, children: s.skipToContent }), !lateral && _jsxs(Header, { variant: topbarVariant, divider: topbarDivider, tabs: topbarTabs, currentTab: topbarCurrentTab, tabsLabel: topbarTabsLabel, tabsEnd: topbarTabsEnd, ...(docs ? { maxWidth: "docs", ...(topbarVariant === "pill" ? {} : { size: "sm" }) } : topbarVariant === "pill" ? { maxWidth: "full" } : {}), blurred: topbarBlurred, brand: docs ? brand : _jsxs(_Fragment, { children: [botaoDaGaveta, brand] }), actions: topbarActions != null ? _jsxs(_Fragment, { children: [topbarActions, docs && botaoDaGaveta] }) : undefined, children: [topbar, docs && topbarActions == null && botaoDaGaveta] }), recolhe && !lateral && sidebarToggle !== "none" && _jsx("div", { className: "sidebar-toggle-slot", children: _jsx(Tooltip, { content: rotulo, side: "right", children: _jsx(IconButton, { className: "sidebar-toggle", size: "xs", icon: paraOComeco === direita ? "caret-right" : "caret-left", label: rotulo, "aria-expanded": !efetiva, "aria-controls": SHELL_NAV_ID, onClick: alternar }) }) }), _jsx(Sidebar, { id: SHELL_NAV_ID, popover: "auto", variant: sidebarVariant, scrollbar: sidebarScrollbar, collapsed: efetiva, collapsible: forma, indicator: sidebarIndicator, panel: sidebarPanel, contrast: sidebarContrast, items: navItems, current: currentNavId, label: navLabel, onToggle: focoDaGaveta, header: lateral ? brand : undefined, footer: sidebarFooter, children: navigation }), docs && aside != null && _jsx("div", { className: "docs-toc-bar", children: _jsxs("button", { type: "button", className: "docs-toc-toggle", popoverTarget: SHELL_TOC_ID, children: [_jsx(Icon, { name: "list-bullets" }), _jsx("span", { className: "docs-toc-current", "data-toc-current": "", children: asideLabel ?? s.tocLabel }), _jsx(Icon, { name: "caret-down" })] }) }), lateral
+                    ? _jsxs("div", { className: "app-shell-column", children: [topbar != null || topbarActions != null
+                                ? _jsx(Header, { variant: "flush", size: "sm", divider: topbarDivider, brand: _jsxs(_Fragment, { children: [botaoDaGaveta, sidebarToggle !== "none" && _jsx(AppShellSidebarToggle, {})] }), actions: topbarActions, children: topbar })
                                 : _jsxs("div", { className: "app-shell-narrow-bar", children: [botaoDaGaveta, brand] }), _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children })] })
                     : _jsx("main", { id: SHELL_MAIN_ID, tabIndex: -1, className: cx("content", contentVariant === "plain" && "content-plain"), children: children }), aside != null && _jsx(Sidebar, { placement: "right", variant: asideVariant ?? sidebarVariant, className: "app-shell-aside", "aria-label": asideLabel ?? s.tocLabel, ...(docs ? { id: SHELL_TOC_ID, popover: "auto", onToggle: focoDaGaveta } : {}), children: aside })] }) });
 }

package/dist/markup.d.ts

@@ -346,7 +346,8 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement>, RefAttributes<
     current?: string;
     /** O que fica do lado direito: busca, botão de ação, conta. Fica na barra também no celular. */
     actions?: ReactNode;
-    /** Até onde o miolo da barra cresce, pela escala do `Container` (`sm` 640 … `2xl` 1536, `full`). */
+    /** Até onde o miolo da barra cresce, pela escala do `Container` (`sm` 640 … `2xl` 1536, `full`). Na `pill` (o site B,
+     *  30/10/2026), a cápsula passa a ser o miolo, da largura do `Container`, e não do conteúdo. */
     maxWidth?: ContainerSize;
     /**
      * Onde ficam os links (14/10/2026): `"end"` (o padrão) logo antes das ações, na outra ponta da marca; `"start"`
@@ -360,8 +361,9 @@ export interface HeaderProps extends HTMLAttributes<HTMLElement>, RefAttributes<
      */
     size?: "md" | "sm";
     /**
-     * Só na `flush` (15/10/2026): o fundo transparente que EMBAÇA o que passa por baixo, como o topo da página inicial
-     * da referência. Quem pede menos transparência no sistema, ou o navegador sem desfoque, recebe o fundo cheio.
+     * Na `flush` (15/10/2026) e na `pill` (o site B, 30/10/2026): o fundo transparente que EMBAÇA o que passa por baixo,
+     * como o topo da página inicial da referência. Quem pede menos transparência no sistema, ou o navegador sem desfoque,
+     * recebe o fundo cheio.
      */
     blurred?: boolean;
     /** O que entra no MENU DO CELULAR, embaixo dos links (15/10/2026): o GitHub, a conta. Na barra larga não aparece. */

package/dist/markup.js

@@ -217,7 +217,7 @@ export function Header({ variant = "floating", divider, brand, items, current, a
                 // Sem o encaixe, a marcação de sempre; com ele, a linha das áreas e a ponta numa mesma faixa.
                 return tabsEnd == null ? abas : _jsxs("div", { className: "topbar-tabs-row", children: [abas, _jsx("div", { className: "topbar-tabs-end", children: tabsEnd })] });
             })()] });
-    return _jsx("header", { className: cx("topbar", `topbar-${variant}`, divider && variant === "flush" && "topbar-divider", site && "topbar-site", site && itemsJustify === "start" && "topbar-items-start", size === "sm" && "topbar-sm", blurred && variant === "flush" && "topbar-blurred", maxWidth && "topbar-contained", comAbas && "topbar-with-tabs", className), ...props, children: maxWidth ? _jsx("div", { className: cx("container", maxWidth !== "xl" && `container-${maxWidth}`, "topbar-inner"), children: miolo }) : miolo });
+    return _jsx("header", { className: cx("topbar", `topbar-${variant}`, divider && variant === "flush" && "topbar-divider", site && "topbar-site", site && itemsJustify === "start" && "topbar-items-start", size === "sm" && "topbar-sm", blurred && (variant === "flush" || variant === "pill") && "topbar-blurred", maxWidth && "topbar-contained", comAbas && "topbar-with-tabs", className), ...props, children: maxWidth ? _jsx("div", { className: cx("container", maxWidth !== "xl" && `container-${maxWidth}`, "topbar-inner"), children: miolo }) : miolo });
 }
 /** @deprecated `Topbar` é o nome antigo do `Header` (07/10/2026). Continua funcionando, igual; use `Header`. */
 export function Topbar(props) { return _jsx(Header, { ...props }); }
@@ -291,6 +291,13 @@ export function Link({ external, disabled, href, target, rel, className, childre
 // Transparente quando o texto diz alfa abaixo de 1 (hex de 4 ou 8 dígitos, `rgba()`, `hsla()`…). Cor de token ou
 // `oklch()` a marcação não lê: fica sem xadrez.
 const transparente = (cor) => { const c = parseColor(cor); return c !== null && c.a < 1; };
+// A cor só entra no estilo quando É uma cor (31/10/2026, a auditoria de segurança): o texto ia cru para a variável, e
+// no HTML do servidor um ";" abria regras novas (cobrir a tela, buscar imagem de outro endereço). Aceita o que a ficha
+// promete — hex, nome, as funções de cor do CSS e `var(--token)` — e nada com ";", chaves, barra invertida, aspas,
+// comentário ou outra função (`url(`). Recusada, a variável não se escreve: a amostra fica sem cor, e o nome continua.
+// (O `parseColor` não serve de filtro: ele não lê `oklch()` nem `var()`, que a ficha promete.)
+const COR_DE_CSS = /^(?:#[0-9a-f]{3,8}|[a-z]+|(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\([^;{}\\"'()]*\)|var\(--[\w-]+\))$/i;
+const corDeCss = (cor) => { const c = cor.trim(); return COR_DE_CSS.test(c) && !c.includes("/*") ? c : undefined; };
 export function ColorSwatch(props) {
     if ("options" in props) {
         const { options, name, label, value, defaultValue, onChange, layout = "grid", indicator, showLabels, size = "md", disabled, id, className } = props;
@@ -302,14 +309,14 @@ export function ColorSwatch(props) {
         return _jsx("div", { role: "radiogroup", "aria-label": label, id: id, "aria-disabled": disabled || undefined, className: cx("color-swatch-picker", size !== "md" && `color-swatch-picker-${size}`, layout === "stack" && "color-swatch-picker-stack", showLabels && "color-swatch-picker-labels", className), children: options.map((o) => {
                 const op = typeof o === "string" ? { color: o } : o;
                 const cor = parseColor(op.color), rgb = cor && hsbToRgb(cor);
-                const circulo = (Tag, key) => _jsxs(Tag, { className: cx("color-swatch-option", rgb && contrastingInk(rgb) === "dark" && "color-swatch-option-dark"), style: { ["--color-swatch-current"]: op.color }, children: [_jsx("input", { type: "radio", className: "color-swatch-input", name: name, value: op.color, "aria-label": op.label ?? op.color, checked: value === undefined ? undefined : value === op.color, defaultChecked: value === undefined ? defaultValue === op.color : undefined, disabled: disabled || op.disabled, ...(onChange ? { onChange } : {}) }), _jsx("span", { className: cx("color-swatch", cor && cor.a < 1 && "color-swatch-alpha"), "aria-hidden": "true" }), indicator != null && _jsx("span", { className: "color-swatch-indicator", "aria-hidden": "true", children: indicator })] }, key);
+                const circulo = (Tag, key) => _jsxs(Tag, { className: cx("color-swatch-option", rgb && contrastingInk(rgb) === "dark" && "color-swatch-option-dark"), style: { ["--color-swatch-current"]: corDeCss(op.color) }, children: [_jsx("input", { type: "radio", className: "color-swatch-input", name: name, value: op.color, "aria-label": op.label ?? op.color, checked: value === undefined ? undefined : value === op.color, defaultChecked: value === undefined ? defaultValue === op.color : undefined, disabled: disabled || op.disabled, ...(onChange ? { onChange } : {}) }), _jsx("span", { className: cx("color-swatch", cor && cor.a < 1 && "color-swatch-alpha"), "aria-hidden": "true" }), indicator != null && _jsx("span", { className: "color-swatch-indicator", "aria-hidden": "true", children: indicator })] }, key);
                 return showLabels
                     ? _jsxs("label", { className: "color-swatch-item", children: [circulo("span"), _jsx("span", { className: "color-swatch-name", "aria-hidden": "true", children: op.label ?? op.color })] }, op.color)
                     : circulo("label", op.color);
             }) });
     }
     const { color, size = "md", label, className, style, ...resto } = props;
-    return _jsx("span", { role: "img", "aria-label": label ?? color, className: cx("color-swatch", size !== "md" && `color-swatch-${size}`, transparente(color) && "color-swatch-alpha", className), style: { ...style, ["--color-swatch-current"]: color }, ...resto });
+    return _jsx("span", { role: "img", "aria-label": label ?? color, className: cx("color-swatch", size !== "md" && `color-swatch-${size}`, transparente(color) && "color-swatch-alpha", className), style: { ...style, ["--color-swatch-current"]: corDeCss(color) }, ...resto });
 }
 export function ProgressCircle({ value, min = 0, max = 100, size = "md", tone = "brand", label, className, ...props }) {
     const semTotal = value == null || Number.isNaN(value);

package/dist/navigation-client.d.ts

@@ -64,10 +64,14 @@ export interface TocItem {
     label: string;
     sub?: boolean;
 }
-export declare function TableOfContents({ items, current, label, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
+export declare function TableOfContents({ items, current, label, progress, indicator, className, ...props }: HTMLAttributes<HTMLElement> & RefAttributes<HTMLElement> & {
     items: TocItem[];
     current?: string;
     label?: string;
+    /** O anel de leitura no lugar do ícone do nome: quanto da página já rolou, em anel e em número. */
+    progress?: boolean;
+    /** O desenho do item atual: `"line"` (o padrão, o traço do lado) ou `"segment"` (a cápsula levantada, como a da `Sidebar`). */
+    indicator?: "line" | "segment";
 }): React.JSX.Element;
 export interface TreeNode {
     id: string;

package/dist/navigation-client.js

@@ -11,7 +11,7 @@ import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import { useValorResponsivo } from "./responsivo-runtime.js";
 import { cx, fundirRender, useAureaStrings, usePortalContainer } from "./internal.js";
-import { Kbd } from "./markup.js";
+import { Kbd, ProgressCircle } from "./markup.js";
 import { Icon } from "./system.js";
 import { Button, IconButton } from "./actions.js";
 import { Badge, Spinner } from "./feedback.js";
@@ -62,11 +62,29 @@ export function Pagination({ page, total, onPageChange, variant = "numbers", sum
                         ? _jsx("li", { children: _jsx("span", { className: "pagination-ellipsis", "aria-hidden": "true", children: "\u2026" }) }, `e${i}`)
                         : _jsx("li", { children: item(p, p, { atual: p === page, rotulo: `${s.paginationPage} ${p}` }) }, p)), _jsx("li", { children: proxima })] })] });
 }
-export function TableOfContents({ items, current, label, className, ...props }) {
+//
+// O SITE B (30/10/2026, protótipo): `progress` troca o ícone do nome pelo ANEL DE LEITURA — quanto da página já rolou, no
+// anel (o `ProgressCircle`) e em número, na ponta da linha. É enfeite de leitura: o anel e o número ficam fora do leitor
+// de tela (o que importa a ele é a seção atual, que o `aria-current` já diz).
+export function TableOfContents({ items, current, label, progress, indicator = "line", className, ...props }) {
     const s = useAureaStrings();
     const meu = React.useRef(null);
     const observado = useSecaoEmVista(items, current === undefined, meu);
     const atual = current ?? observado;
+    const [lido, setLido] = React.useState(0);
+    const Rotulo = progress ? "div" : "p";
+    React.useEffect(() => {
+        if (!progress || typeof window === "undefined")
+            return;
+        const ler = () => {
+            const alto = document.documentElement.scrollHeight - window.innerHeight;
+            setLido(alto > 0 ? Math.round(Math.min(1, Math.max(0, window.scrollY / alto)) * 100) : 100);
+        };
+        ler();
+        window.addEventListener("scroll", ler, { passive: true });
+        window.addEventListener("resize", ler);
+        return () => { window.removeEventListener("scroll", ler); window.removeEventListener("resize", ler); };
+    }, [progress]);
     // O `ref` do consumidor continua chegando: em React 19 ele é prop comum, então espalhá-lo por
     // `...props` depois do nosso o sobrescreveria em silêncio. Os dois são atendidos aqui.
     const refDele = props.ref;
@@ -74,7 +92,9 @@ export function TableOfContents({ items, current, label, className, ...props })
     return _jsxs("nav", { ref: n => { meu.current = n; if (typeof refDele === "function")
             refDele(n);
         else if (refDele)
-            refDele.current = n; }, className: cx("toc", className), "aria-label": label ?? s.tocLabel, ...resto, children: [_jsxs("p", { className: "toc-label", children: [_jsx("span", { className: "toc-label-icon", "aria-hidden": "true" }), label ?? s.tocLabel] }), items.map(i => _jsx("a", { href: `#${i.id}`, className: cx(i.sub && "toc-sub"), ...(i.id === atual ? { "aria-current": "true" } : {}), children: i.label }, i.id))] });
+            refDele.current = n; }, className: cx("toc", indicator === "segment" && "toc-segment", className), "aria-label": label ?? s.tocLabel, ...resto, children: [_jsxs(Rotulo, { className: cx("toc-label", progress && "toc-label-progress"), children: [progress
+                        ? _jsx("span", { className: "toc-progress", "aria-hidden": "true", children: _jsx(ProgressCircle, { value: lido, size: "lg", label: label ?? s.tocLabel }) })
+                        : _jsx("span", { className: "toc-label-icon", "aria-hidden": "true" }), label ?? s.tocLabel, progress && _jsxs("span", { className: "toc-progress-value", "aria-hidden": "true", children: [lido, "%"] })] }), items.map(i => _jsx("a", { href: `#${i.id}`, className: cx(i.sub && "toc-sub"), ...(i.id === atual ? { "aria-current": "true" } : {}), children: i.label }, i.id))] });
 }
 /** Qual dos `items` está na faixa de leitura, observando o documento. Devolve `undefined` até o
  *  primeiro cálculo — e em SSR, onde não há documento para observar.
@@ -270,7 +290,7 @@ function SidebarGroup({ item, filhos, lid, ctx }) {
         ? _jsxs("button", { id: lid, type: "button", className: "sidebar-group-label sidebar-group-toggle", "aria-expanded": aberto, "aria-controls": lid + "-lista", onClick: () => setAberto(v => !v), children: [_jsx("span", { children: item.label }), _jsx(Icon, { name: aberto ? "caret-down" : direita ? "caret-left" : "caret-right", size: "sm", className: "sidebar-group-caret" })] })
         : _jsx("p", { id: lid, className: cx("sidebar-group-label", ctx.collapsed && "sr-only"), children: item.label });
     const lista = sidebarList(filhos, ctx, false, lid);
-    return _jsxs("li", { children: [acao || dobra ? _jsxs("div", { className: "sidebar-group-head", children: [nome, acao && _jsx("span", { className: "sidebar-group-action", children: item.action })] }) : nome, dobra ? _jsx("div", { id: lid + "-lista", hidden: !aberto, children: lista }) : lista] });
+    return _jsxs("li", { children: [acao || dobra ? _jsxs("div", { className: "sidebar-group-head", children: [nome, acao && _jsx("span", { className: "sidebar-group-action", children: item.action })] }) : nome, dobra ? _jsx("div", { id: lid + "-lista", className: "sidebar-group-list", hidden: !aberto, children: lista }) : lista] });
 }
 // A GAVETA FECHA AO ESCOLHER (A-06, 23/09/2026). Abaixo de lg a lateral do `AppShell` é popover,
 // e a biblioteca a abria e NUNCA a fechava por código: `hidePopover` tinha zero ocorrências. O

package/dist/pure.d.ts

@@ -1,5 +1,6 @@
 import { type ReactElement } from "react";
 export declare const cx: (...v: Array<string | false | null | undefined>) => string;
+export declare const proprio: <V>(tabela: Readonly<Partial<Record<string, V>>>, chave: string | null | undefined) => V | undefined;
 export declare function fundirRender(render: ReactElement | undefined, props: {
     className?: string;
 } & Record<string, unknown>, padrao?: string): ReactElement;

package/dist/pure.js

@@ -16,6 +16,10 @@
 // `.ts` aqui seria um arquivo que gate nenhum enxerga.
 import { cloneElement, createElement } from "react";
 export const cx = (...v) => v.filter(Boolean).join(" ");
+// O valor de uma tabela só quando a chave é DELA (31/10/2026, a auditoria de segurança). Tabela escrita como objeto
+// comum herda o `Object.prototype`: uma chave que vem de fora ("constructor", "__proto__", "toString") devolvia a
+// função dele — no realce do `CodeBlock`, isso derrubava a tela. Interno: o barril não o publica.
+export const proprio = (tabela, chave) => chave != null && Object.hasOwn(tabela, chave) ? tabela[chave] : undefined;
 // ── `render`: a superfície é da Aurea, o ELEMENTO é de quem consome ───────────────────────────
 //
 // Nasceu do `G-A11Y-11`. O `Card` oferecia `variant="interactive"` — ponteiro de mão, elevação

package/dist/system.js

@@ -7,7 +7,7 @@ import React from "react";
 import { Toast as BaseToast } from "@base-ui/react/toast";
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import { DirectionProvider } from "@base-ui/react/direction-provider";
-import { peleDoEixo } from "./pure.js";
+import { peleDoEixo, proprio } from "./pure.js";
 import { cx, StringsContext, SpriteContext, PortalContext, ThemeContext, DensityContext, DentroDoProviderContext, avisosAncorados, usePortalContainer, defaultStrings, defaultSpriteUrl, useSpriteUrl, useAureaStrings } from "./internal.js";
 // `theme` e `density` seguem a convenção controlado/não-controlado do resto da biblioteca
 // (`Toggle`, `ToggleGroup`): passe `theme` para mandar, `defaultTheme` para semear, e ouça por
@@ -186,7 +186,7 @@ function AureaToastList({ placement }) {
     const arrasto = [placement.startsWith("top") ? "up" : "down", "right"];
     return _jsx(_Fragment, { children: toasts.map(t => {
             const tipo = t.type === "error" ? "danger" : t.type;
-            return _jsxs(BaseToast.Root, { toast: t, swipeDirection: arrasto, className: cx("toast", tipo && `toast-${tipo}`), children: [_jsxs(BaseToast.Content, { className: "toast-content", children: [_jsx("span", { className: "toast-indicator", "aria-hidden": "true", children: tipo === "loading" ? _jsx("span", { className: "spinner" }) : _jsx(Icon, { name: ICONE_DO_AVISO[tipo ?? ""] ?? "info" }) }), _jsxs("div", { className: "toast-text", children: [_jsx(BaseToast.Title, { className: "toast-title", render: _jsx("strong", {}) }), t.description ? _jsx(BaseToast.Description, { className: "toast-description" }) : null] }), t.actionProps ? _jsx(BaseToast.Action, { className: "btn btn-tertiary btn-sm toast-action" }) : null] }), _jsx(BaseToast.Close, { className: "btn btn-tertiary close-button toast-close", "aria-label": s.dismissNotification, children: _jsx("span", { children: _jsx(Icon, { name: "x", weight: "bold" }) }) })] }, t.id);
+            return _jsxs(BaseToast.Root, { toast: t, swipeDirection: arrasto, className: cx("toast", tipo && `toast-${tipo}`), children: [_jsxs(BaseToast.Content, { className: "toast-content", children: [_jsx("span", { className: "toast-indicator", "aria-hidden": "true", children: tipo === "loading" ? _jsx("span", { className: "spinner" }) : _jsx(Icon, { name: proprio(ICONE_DO_AVISO, tipo) ?? "info" }) }), _jsxs("div", { className: "toast-text", children: [_jsx(BaseToast.Title, { className: "toast-title", render: _jsx("strong", {}) }), t.description ? _jsx(BaseToast.Description, { className: "toast-description" }) : null] }), t.actionProps ? _jsx(BaseToast.Action, { className: "btn btn-tertiary btn-sm toast-action" }) : null] }), _jsx(BaseToast.Close, { className: "btn btn-tertiary close-button toast-close", "aria-label": s.dismissNotification, children: _jsx("span", { children: _jsx(Icon, { name: "x", weight: "bold" }) }) })] }, t.id);
         }) });
 }
 function AureaToastViewport({ placement }) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.50.0",
+  "version": "0.52.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",