@aurea-uds/react 0.51.0 → 0.54.0

package/dist/actions.d.ts

@@ -88,7 +88,8 @@ interface ToggleBase {
      *  mudou, e a composição fica bonita e morta. Solto, não faz diferença nenhuma. */
     value?: string;
     icon?: IconName;
-    size?: Responsive<Extract<ComponentSize, "sm" | "md" | "lg">>;
+    /** `xl` (o site B, 0.54.0 — as marcas do menu do celular, aprovado pela bancada em 01/11/2026): o botão de 50, o `xl` do `Button`. */
+    size?: Responsive<Extract<ComponentSize, "sm" | "md" | "lg" | "xl">>;
     disabled?: boolean;
     id?: string;
     className?: string;
@@ -98,6 +99,10 @@ interface ToggleBase {
     /** A cor do LIGADO (ADR-0084, 27/10/2026): `brand` — o amarelo do botão primário, o padrão —, `neutral` (o cinza) ou
      *  `contrast` (o grafite, invertido). Dentro de um `ToggleGroup` ou de um `Toolbar` com `pressedStyle`, o do botão vale. */
     pressedStyle?: TogglePressedStyle;
+    /** A ÁREA (o site B, 0.54.0 — aprovada pela bancada em 01/11/2026): o toggle em volta de um bloco (uma miniatura, um ícone
+     *  com o nome). `true` ocupa a largura; `"pill"` fica do tamanho do conteúdo, em cápsula. Com `variant="ghost"`, sem fundo;
+     *  com o `default`, o fundo cinza e, ligada, o amarelo cheio. */
+    area?: boolean | "pill";
 }
 export type ToggleVariant = "default" | "ghost";
 /** As três cores do ligado aprovadas pelo Victor em 26/10/2026 (A cinza, B grafite, C amarelo — o padrão). */
@@ -110,7 +115,7 @@ export type ToggleProps = ToggleBase & ({
     children?: never;
     label: string;
 });
-export declare function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant, pressedStyle }: ToggleProps): React.JSX.Element;
+export declare function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant, pressedStyle, area }: ToggleProps): React.JSX.Element;
 export interface IconButtonProps extends Omit<ButtonProps, "children"> {
     label: string;
     icon: AureaIcon;
@@ -142,10 +147,12 @@ export interface ButtonGroupProps extends HTMLAttributes<HTMLDivElement>, RefAtt
     detached?: boolean;
 }
 export declare function ButtonGroup({ label, orientation, variant, size, fullWidth, disabled, detached, className, ...props }: ButtonGroupProps): React.JSX.Element;
-export declare function Toolbar({ orientation, label, className, pressedStyle, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function Toolbar({ orientation, label, className, pressedStyle, tone, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     orientation?: Responsive<Orientation>;
     label?: string;
     pressedStyle?: TogglePressedStyle;
+    /** `brand`: a barra amarela da seleção em lote ("3 selected", "Clear", "Remove"), com os botões brancos. */
+    tone?: "default" | "brand";
 }): React.JSX.Element;
 export declare function ToolbarGroup({ label, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     label?: string;
@@ -167,7 +174,7 @@ export interface ToggleGroupProps {
     className?: string;
     children: React.ReactNode;
     /** O tamanho de todos os botões de dentro; cada um pode trocar o seu (valor simples, como o dela). */
-    size?: Extract<ComponentSize, "sm" | "md" | "lg">;
+    size?: Extract<ComponentSize, "sm" | "md" | "lg" | "xl">;
     /** Ocupa a largura do pai, e os botões repartem em partes iguais. */
     fullWidth?: boolean;
     /** Botões soltos (vão de 4), em vez de colados. */

package/dist/actions.js

@@ -206,7 +206,7 @@ function temConteudoVisivel(children) {
 // entre os estados**. Se o texto vira "Mute"/"Unmute" ou "Play"/"Pause", não é toggle — é
 // botão de ação, porque quem lê tela ouve o rótulo NOVO e o estado ao mesmo tempo e não sabe
 // se o botão descreve o que é ou o que fará.
-export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant = "default", pressedStyle }) {
+export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon, label, size: sizePedido, disabled, id, className, children, variant = "default", pressedStyle, area }) {
     const grupo = React.useContext(GrupoDeBotoesContext);
     const size = sizePedido ?? grupo?.size;
     // O tipo barra o consumidor TypeScript; este aviso barra o de JavaScript, que não tem tipo nenhum.
@@ -223,7 +223,7 @@ export function Toggle({ pressed, defaultPressed, onPressedChange, value, icon,
     // sem `size` saía a classe `btn-undefined` (medido no catálogo, nos três botões do `ToggleGroup`); com
     // valor responsivo sairia `btn-[object Object]`.
     const tamanho = ehResponsivo(size) ? classesResponsivas("size", size) : ((valorBase(size) ?? "md") !== "md" && `btn-${valorBase(size)}`);
-    return _jsxs(BaseToggle, { id: id, value: value, disabled: disabled, pressed: pressed, defaultPressed: defaultPressed, onPressedChange: soOValor(onPressedChange), "aria-label": textoVisivel ? undefined : (rotuloVisivel ? label : undefined), "data-pressed-style": pressedStyle, className: cx("btn", variant === "ghost" ? "btn-ghost" : "btn-tertiary", tamanho, !textoVisivel && "btn-icon", "toggle", className), children: [icon && _jsx(Icon, { name: icon }), children] });
+    return _jsxs(BaseToggle, { id: id, value: value, disabled: disabled, pressed: pressed, defaultPressed: defaultPressed, onPressedChange: soOValor(onPressedChange), "aria-label": textoVisivel ? undefined : (rotuloVisivel ? label : undefined), "data-pressed-style": pressedStyle, className: cx("btn", variant === "ghost" ? "btn-ghost" : "btn-tertiary", !area && tamanho, !textoVisivel && !area && "btn-icon", "toggle", area && "toggle-area", area === "pill" && "toggle-area-pill", className), children: [icon && _jsx(Icon, { name: icon }), children] });
 }
 // default ghost (não secondary): um ícone-ação solto — hambúrguer, tema, fechar — é sem
 // caixa por convenção (pedido do Victor: hambúrguer sem borda). Quem quer a caixa passa
@@ -268,11 +268,13 @@ export function ButtonGroup({ label, orientation, variant, size, fullWidth, disa
 // diz outra coisa — seriam duas fontes de verdade e uma janela em que visual e comportamento
 // divergem. Ver `decisions/0047-css-first-para-apresentacao-runtime-para-semantica.md`.
 // `pressedStyle` (ADR-0084): a cor do ligado de todos os botões de dentro; cada um pode trocar a sua.
-export function Toolbar({ orientation, label, className, pressedStyle, ...props }) {
+// `tone="brand"` (o site B — a barra de seleção da página inicial, aprovada pela bancada em 01/11/2026, o D-7.7, a forma B):
+// a barra AMARELA, de 52, o texto na tinta, 600, e os botões de dentro BRANCOS com a tinta. Sem `tone`, a barra de sempre.
+export function Toolbar({ orientation, label, className, pressedStyle, tone = "default", ...props }) {
     const s = useAureaStrings();
     const ancora = useRef(null);
     const resolvida = useValorResponsivo(orientation, "horizontal", ancora);
-    return _jsx(BaseToolbar.Root, { ref: ancora, orientation: resolvida, "aria-label": label ?? s.toolbarLabel, "data-pressed-style": pressedStyle, className: cx("toolbar", className), ...props });
+    return _jsx(BaseToolbar.Root, { ref: ancora, orientation: resolvida, "aria-label": label ?? s.toolbarLabel, "data-pressed-style": pressedStyle, className: cx("toolbar", tone === "brand" && "toolbar-brand", className), ...props });
 }
 export function ToolbarGroup({ label, className, ...props }) { return _jsx(BaseToolbar.Group, { "aria-label": label, className: cx("toolbar-group", className), ...props }); }
 export function ToolbarSeparator({ className, ...props }) { return _jsx(BaseToolbar.Separator, { className: cx("toolbar-sep", className), ...props }); }

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

@@ -15,12 +15,17 @@ export type CodeLine = CodeToken[];
 /** Quem colore: recebe o código e a língua e devolve as linhas, ou `null` quando não conhece a língua. O da Aurea é o
  *  `highlightCode` de `@aurea-uds/react/code-highlight`. */
 export type CodeHighlighter = (code: string, language: string) => CodeLine[] | null;
-export declare function CodeBlock({ children, language, copyable, preview, lineNumbers, highlight, tabs, className }: {
+export declare function CodeBlock({ children, language, copyable, preview, previewLayout, lineNumbers, highlight, tabs, filename, className }: {
     children?: string;
     language?: string;
     copyable?: boolean;
+    /** O nome do arquivo na cabeça do bloco; com ele, o "Copy" é escrito e a linha longa desce. */
+    filename?: React.ReactNode;
     /** A prévia viva do código: com ela, o bloco vira a caixa de exemplo, com as abas Prévia | Código. */
     preview?: React.ReactNode;
+    /** Com `preview`: `tabs` (as abas Prévia | Código, o padrão) ou `stacked` (a peça em cima e o código embaixo; mais de 5
+     *  linhas, recolhido com o "Expand code" — ADR-0089). */
+    previewLayout?: "tabs" | "stacked";
     /** Mostra o número de cada linha à esquerda. O número não entra no texto copiado nem é lido pelo leitor de tela. */
     lineNumbers?: boolean;
     /** Colore o código. Passe o `highlightCode` de `@aurea-uds/react/code-highlight` (os analisadores são peer opcional). */

package/dist/code-client.js

@@ -14,6 +14,15 @@ import { Icon } from "./system.js";
 // moldura. É a caixa do site de hoje (decisão do Victor, 06/10/2026: a da Aurea, não a da referência),
 // agora no pacote, para o site usar só peças da Aurea. O teclado é o das abas do APG: setas, Home e End.
 // Sem o `aurea.js` na página — quem troca a aba é o React.
+// A CAIXA EMPILHADA (`previewLayout="stacked"`, ADR-0089): a peça em cima e o código embaixo, sem as abas; mais de 5
+// linhas, o código vem recolhido com o "Expand code".
+function CaixaEmpilhada({ preview, codigo, linhas, className }) {
+    const s = useAureaStrings();
+    const id = React.useId();
+    const [aberto, setAberto] = React.useState(false);
+    const dobra = linhas > 5;
+    return _jsxs("div", { className: cx("demo code-preview demo-stacked", className), "data-collapsed": dobra && !aberto ? "" : undefined, "data-expanded": dobra && aberto ? "" : undefined, children: [_jsx("div", { className: "demo-panel", "data-panel": "preview", children: preview }), _jsxs("div", { className: "demo-panel demo-code", "data-panel": "code", id: `${id}-code`, children: [codigo, dobra && _jsx("button", { type: "button", className: "btn btn-tertiary btn-sm demo-stacked-toggle", "aria-expanded": aberto, "aria-controls": `${id}-code`, onClick: () => setAberto(!aberto), children: aberto ? s.codeBlockCollapse : s.codeBlockExpand })] })] });
+}
 function CaixaDeExemplo({ preview, codigo, className }) {
     const s = useAureaStrings();
     const id = React.useId();
@@ -57,9 +66,14 @@ function linhasDoCodigo(codigo, language, highlight) {
     const linhas = highlight?.(codigo, language) ?? codigo.split("\n").map(l => l === "" ? [] : [{ text: l }]);
     return codigo.endsWith("\n") && linhas.length > 1 && linhas[linhas.length - 1].length === 0 ? linhas.slice(0, -1) : linhas;
 }
-export function CodeBlock({ children, language = "text", copyable, preview, lineNumbers, highlight, tabs, className }) {
+// `filename` (o site B, aprovado pela bancada em 01/11/2026, o item 6 — "Ícone + nome"): a CABEÇA do arquivo — o nome do
+// arquivo à esquerda e, com `copyable`, o "Copy" ESCRITO (o botão secundário, com o ícone antes do nome; vira "Copied").
+// O bloco vira o cartão (canto 22, a cor do cartão) e a linha longa DESCE em vez de rolar. Sem `filename`, o de sempre.
+export function CodeBlock({ children, language = "text", copyable, preview, previewLayout = "tabs", lineNumbers, highlight, tabs, filename, className }) {
     if (tabs && tabs.length > 0)
         return _jsx(CodigoEmAbas, { tabs: tabs, language: language, copyable: copyable, highlight: highlight, className: className });
+    if (preview !== undefined && previewLayout === "stacked")
+        return _jsx(CaixaEmpilhada, { preview: preview, className: className, linhas: (children ?? "").split("\n").length, codigo: _jsx(CodeBlock, { language: language, copyable: copyable, lineNumbers: lineNumbers, highlight: highlight, children: children }) });
     if (preview !== undefined)
         return _jsx(CaixaDeExemplo, { preview: preview, className: className, codigo: _jsx(CodeBlock, { language: language, copyable: copyable, lineNumbers: lineNumbers, highlight: highlight, children: children }) });
     const s = useAureaStrings();
@@ -74,11 +88,13 @@ export function CodeBlock({ children, language = "text", copyable, preview, line
     const colorido = linhas != null && highlight != null && linhas.some(l => l.some(p => p.className));
     // Os algarismos da última linha: a coluna do número tem a largura deles (99 → 2, 100 → 3).
     const digitos = lineNumbers && linhas ? { "--code-line-digits": String(linhas.length).length } : undefined;
-    const pre = _jsx("pre", { className: cx("code-block", lineNumbers && "code-block-numbered", colorido && "code-block-highlighted", !copyable && className), style: digitos, "data-language": language, tabIndex: 0, children: _jsx("code", { children: linhas
+    const pre = _jsx("pre", { className: cx("code-block", lineNumbers && "code-block-numbered", colorido && "code-block-highlighted", !copyable && filename == null && className), style: digitos, "data-language": language, tabIndex: 0, children: _jsx("code", { children: linhas
                 ? _jsxs(_Fragment, { children: [linhas.map((l, i) => _jsxs(React.Fragment, { children: [_jsx("span", { className: "code-line", children: l.map((p, j) => p.className ? _jsx("span", { className: p.className, children: p.text }, j) : p.text) }), i < linhas.length - 1 ? "\n" : null] }, i)), children.endsWith("\n") ? "\n" : null] })
                 : children }) });
-    if (!copyable)
+    if (!copyable && filename == null)
         return pre;
+    if (!copyable)
+        return _jsxs("div", { className: cx("code-block-wrap", "code-block-file", className), children: [_jsx("div", { className: "code-block-head", children: _jsx("span", { className: "code-block-title", children: filename }) }), pre] });
     // 0.28.0: o "copiado" é dito ao leitor de tela. Com o `aurea.js` na página, é ele quem diz (pelo
     // texto do `data-aurea-copy-done`, na língua do app); sem ele, a região de status daqui.
     const [copiado, setCopiado] = React.useState(false);
@@ -95,5 +111,7 @@ export function CodeBlock({ children, language = "text", copyable, preview, line
             return;
         void copia.then(() => { setCopiado(true); setTimeout(() => setCopiado(false), 1500); }, () => { });
     };
+    if (filename != null)
+        return _jsxs("div", { className: cx("code-block-wrap", "code-block-file", className), "data-aurea-copy-scope": true, children: [_jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: copiado ? s.copied : "" }), _jsxs("div", { className: "code-block-head", children: [_jsx("span", { className: "code-block-title", children: filename }), _jsxs("button", { type: "button", className: cx("btn btn-secondary copy-code-text", copiado && "is-done"), "data-aurea-copy": true, "data-aurea-copy-done": s.copied, onClick: onCopy, children: [_jsx(Icon, { name: "copy", size: "sm", className: "c-copy" }), _jsx(Icon, { name: "check", size: "sm", className: "c-done" }), _jsx("span", { className: "c-copy", children: s.copy }), _jsx("span", { className: "c-done", children: s.copied })] })] }), pre] });
     return _jsxs("div", { className: cx("code-block-wrap", className), "data-aurea-copy-scope": true, children: [_jsx("span", { className: "sr-only", role: "status", "aria-live": "polite", children: copiado ? s.copied : "" }), _jsxs("button", { type: "button", className: cx("btn btn-icon btn-ghost copy-code", copiado && "is-done"), "data-aurea-copy": true, "data-aurea-copy-done": s.copied, "aria-label": s.copyCode, onClick: onCopy, children: [_jsx(Icon, { name: "copy", size: "sm", className: "c-copy" }), _jsx(Icon, { name: "check", size: "sm", className: "c-done" })] }), pre] });
 }

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

@@ -8,10 +8,17 @@ export interface TableProps extends HTMLAttributes<HTMLTableElement>, RefAttribu
     stickyFirstColumn?: boolean;
     /** GAR-12: a tabela cabe na largura da caixa, sem o mínimo de 720 — a comparação de dois itens no celular. */
     fit?: boolean;
+    /** `rows` (o site B, 0.54.0 — a lista de membros da página inicial, aprovada pela bancada em 01/11/2026, o D-7.6): sem a
+     *  caixa, cada linha é uma CÁPSULA de 54, 4 entre elas; com o mouse, o `--fill-1`; a linha com `data-selected`, o amarelo
+     *  a 14%. O cabeçalho em mono maiúsculo, apagado. Cabe na largura (sem o mínimo de 720). */
+    variant?: "default" | "rows";
     /** GAR-12: esconde as linhas marcadas como iguais (`<tr data-same>`) — o "Só diferenças". */
     differencesOnly?: boolean;
+    /** As linhas ímpares do corpo com fundo (o site B, 02/11/2026, a "B" na imagem): a 1ª, a 3ª… — o olho segue a linha
+     *  numa tabela larga. Nos dois arranjos (`default` e `rows`). */
+    striped?: boolean;
 }
-export declare function Table({ caption, stickyHeader, stickyFirstColumn, fit, differencesOnly, children, className, ...props }: TableProps): React.JSX.Element;
+export declare function Table({ caption, stickyHeader, stickyFirstColumn, fit, differencesOnly, striped, variant, children, className, ...props }: TableProps): React.JSX.Element;
 export interface SortableItem {
     id: string;
     label: ReactNode;

package/dist/data-display-client.js

@@ -6,7 +6,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import React from "react";
 import { cx, useAureaStrings, useReorder } from "./internal.js";
 import { Icon } from "./system.js";
-export function Table({ caption, stickyHeader, stickyFirstColumn, fit, differencesOnly, children, className, ...props }) { const s = useAureaStrings(); return _jsx("div", { className: cx("table-region", stickyHeader && "table-sticky-header", stickyFirstColumn && "table-sticky-first"), role: "region", "aria-label": typeof caption === "string" ? caption : s.tableLabel, tabIndex: 0, children: _jsxs("table", { className: cx("table", fit && "table-fit", differencesOnly && "table-differences-only", className), ...props, children: [caption && _jsx("caption", { children: caption }), children] }) }); }
+export function Table({ caption, stickyHeader, stickyFirstColumn, fit, differencesOnly, striped, variant = "default", children, className, ...props }) { const s = useAureaStrings(); return _jsx("div", { className: cx("table-region", stickyHeader && "table-sticky-header", stickyFirstColumn && "table-sticky-first", variant === "rows" && "table-region-rows"), role: "region", "aria-label": typeof caption === "string" ? caption : s.tableLabel, tabIndex: 0, children: _jsxs("table", { className: cx("table", fit && "table-fit", differencesOnly && "table-differences-only", variant === "rows" && "table-rows", striped && "table-striped", className), ...props, children: [caption && _jsx("caption", { children: caption }), children] }) }); }
 // O protocolo de teclado e de ponteiro saiu daqui para o `useReorder` do `internal` no item N1,
 // quando o `BlockEditor` virou o segundo dono dele. A DOM abaixo não mudou uma vírgula na
 // extração — é o que o gate de pixel e o `skin.spec` continuam medindo.

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,15 @@ 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, orientation, className }: {
     items: AccordionItem[];
     variant?: AccordionVariant;
+    /** `horizontal`: o acordeão de lado — os itens em pé, o aberto toma o resto da linha. */
+    orientation?: "vertical" | "horizontal";
+    /** 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,19 @@ 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.
+// `orientation="horizontal"` (o site B — a página inicial, aprovada pela bancada em 01/11/2026, o D-7.1): o acordeão DE LADO.
+// Cada item é um cartão (canto 22) em pé, fechado com 104 de largura; o aberto toma o resto da linha. Um aberto de cada vez,
+// e o aberto não fecha pelo clique (sempre há um à vista). Num contêiner estreito (até 47.5rem) vira o de pé. A altura é
+// a do pai. Sem `horizontal`, o acordeão de sempre.
+export function Accordion({ items, variant = "default", multiple = false, defaultValue, indicator = "chevron", size = "md", orientation = "vertical", 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)) });
+    const deLado = orientation === "horizontal";
+    const lista = _jsx("div", { className: cx("accordion", variant === "surface" && "accordion-surface", indicator === "plus" && "accordion-plus", size === "lg" && "accordion-lg", deLado && "accordion-horizontal", !deLado && className), children: items.map(i => _jsxs("details", { className: "accordion-item", name: multiple && !deLado ? 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()
+                        : deLado ? (e) => { if (e.currentTarget.parentElement.open)
+                            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 deLado ? _jsx("div", { className: cx("accordion-horizontal-frame", className), children: lista }) : lista;
 }
 // COLLAPSIBLE — uma seção que abre e fecha, com o estado do lado de quem usa.
 //

package/dist/feedback-client.d.ts

@@ -9,12 +9,14 @@ export declare function Status({ variant, state, children, className, ...props }
     state?: UniversalState;
 }): React.JSX.Element;
 export type AlertVariant = "info" | "success" | "warning" | "danger" | "accent";
-export declare function Alert({ variant, state, title, icon, onDismiss, action, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export declare function Alert({ variant, state, title, icon, onDismiss, action, appearance, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     variant?: AlertVariant;
     state?: UniversalState;
     title?: ReactNode;
     icon?: IconName;
     onDismiss?: () => void;
+    /** A pele: `card` (o cartão, o padrão) ou `soft` (o fundo da cor do estado, sem sombra, o texto maior). */
+    appearance?: "card" | "soft";
     /** O botão do aviso ("Atualizar", "Desfazer"): depois do texto, antes do X. No celular, embaixo do texto. */
     action?: ReactNode;
 }): React.JSX.Element;
@@ -69,13 +71,14 @@ export type DataStateProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> &
     onCatch?: (error: unknown, info: React.ErrorInfo) => void;
 };
 export declare function DataState({ catchErrors, onCatch, ...props }: DataStateProps): React.JSX.Element;
-export declare function EmptyState({ icon, title, titleAs: TitleTag, description, action, state }: {
+export declare function EmptyState({ icon, title, titleAs: TitleTag, description, action, state, framed }: {
     icon?: IconName;
     title: ReactNode;
     titleAs?: "h2" | "h3" | "h4" | "p";
     description?: ReactNode;
     action?: ReactNode;
     state?: UniversalState;
+    framed?: boolean;
 }): React.JSX.Element;
 export interface NotificationItem {
     id: string;

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,16 @@ 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", {})] }); }
+// `appearance="soft"` (o site B, 02/11/2026, a "B" na imagem): o fundo da cor do estado a 14%, sem sombra, e o texto a 16
+// na cor do texto. Sem ele (`"card"`), o cartão de sempre.
+export function Alert({ variant, state, title, icon, onDismiss, action, appearance, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("alert", `alert-${v}`, appearance === "soft" && "alert-soft", 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 +146,9 @@ 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] }); }
+// `framed` (o site B, aprovado pela bancada em 01/11/2026): o ícone dentro da moldura redonda, a mesma do nativo (R-15).
+// Variação: sem ele, o ícone continua solto, como sempre.
+export function EmptyState({ icon = "file", title, titleAs: TitleTag = "h3", description, action, state, framed }) { const s = useAureaStrings(); const desc = description ?? (state ? proprio(s.universalState, state) : null); const glifo = _jsx(Icon, { name: icon, size: "xl" }); return _jsxs("div", { className: "empty-state", "data-state": state, children: [framed ? _jsx("span", { className: "empty-state-frame", children: glifo }) : glifo, _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/inputs-client.d.ts

@@ -94,8 +94,13 @@ export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, "d
     orientation?: "vertical" | "horizontal";
     /** O asterisco no rótulo, como o `Field`. */
     required?: boolean;
+    /** `card` faz de cada opção um cartão inteiro — o cartão de escolha, o mesmo nome do nativo (CHK-01). O escolhido sobe com
+     *  sombra. O site B (aprovado pela bancada em 01/11/2026). */
+    variant?: "list" | "card";
+    /** Na web a marca fica no início. `none` tira a bolinha — só no `card`, em que o cartão inteiro já mostra a escolha. */
+    indicatorPlacement?: "start" | "none";
 }
-export declare function RadioGroup({ label, labelHidden, description, error, value, defaultValue, onValueChange, name, disabled, invalid, orientation, required, children, className, ...props }: RadioGroupProps): React.JSX.Element;
+export declare function RadioGroup({ label, labelHidden, description, error, value, defaultValue, onValueChange, name, disabled, invalid, orientation, required, variant, indicatorPlacement, children, className, ...props }: RadioGroupProps): React.JSX.Element;
 export declare namespace RadioGroup {
     export { Radio as Item };
 }
@@ -310,19 +315,22 @@ export declare function OTPField({ length, value, defaultValue, onValueChange, m
     /** `secondary`: o fundo neutro do `Input` secundário, para o campo dentro de um cartão. */
     variant?: "primary" | "secondary";
 }): React.JSX.Element;
-export type SegmentedControlSelectedStyle = "current" | "neutral" | "contrast" | "brand" | "ring" | "dot";
-export declare function SegmentedControl({ items, value, onChange, label, fullWidth, size, selectedStyle }: {
+export type SegmentedControlSelectedStyle = "current" | "neutral" | "contrast" | "brand" | "ring" | "dot" | "emphasis";
+export declare function SegmentedControl({ items, value, onChange, label, fullWidth, size, selectedStyle, wrap, orientation }: {
     items: Array<{
         value: string;
         label: ReactNode;
         href?: string;
+        icon?: IconName;
     }>;
     value: string;
     onChange?: (v: string) => void;
     label?: string;
     fullWidth?: boolean;
-    size?: "sm" | "md";
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
     selectedStyle?: SegmentedControlSelectedStyle;
+    wrap?: boolean;
+    orientation?: "horizontal" | "vertical";
 }): React.JSX.Element;
 export interface ComboboxOption {
     value: string;