@aurea-uds/react 0.30.0 → 0.32.0

package/dist/color.js

@@ -0,0 +1,293 @@
+/** Os três canais de cada espaço, na ordem dele. */
+export const COLOR_CHANNELS = {
+    hsb: ["hue", "saturation", "brightness"], hsl: ["hue", "saturation", "lightness"], rgb: ["red", "green", "blue"],
+};
+const limitar = (n, min, max) => Math.min(max, Math.max(min, n));
+// ── O texto ─────────────────────────────────────────────────────────────────────────────────────────────────
+// Texto de cor é entrada do usuário: o tamanho se corta ANTES da expressão, para nenhum texto enorme custar caro
+// (o defeito de uma biblioteca de cor do mercado, alerta de 08/09/2026, era exatamente esse).
+const HEX = /^#?([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+/** `#rgb`, `#rgba`, `#rrggbb` ou `#rrggbbaa` (com ou sem `#`) → os canais e o alfa; o resto → `null`. */
+export function parseHex(texto) {
+    if (texto.length > 16)
+        return null;
+    const m = HEX.exec(texto.trim());
+    if (!m)
+        return null;
+    const h = m[1].length <= 4 ? m[1].replace(/./g, (c) => c + c) : m[1];
+    return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16),
+        a: h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1 };
+}
+/** Os canais → `#rrggbb` (minúscula, como o `<input type="color">`); com alfa abaixo de 1, `#rrggbbaa`. */
+export function toHex({ r, g, b, a }) {
+    const dois = (n) => Math.round(limitar(n, 0, 255)).toString(16).padStart(2, "0");
+    const alfa = a === undefined || a >= 1 ? "" : dois(a * 255);
+    return `#${dois(r)}${dois(g)}${dois(b)}${alfa}`;
+}
+/** Normaliza o texto hex; texto inválido → `null`. */
+export const normalizeHex = (texto) => {
+    const rgb = parseHex(texto);
+    return rgb ? toHex(rgb) : null;
+};
+// As funções do CSS que a referência aceita na entrada: rgb/rgba, hsl/hsla, hsb/hsba — vírgula ou espaço, `%` onde
+// o CSS põe, e o alfa por `,` ou `/`. Números sem expoente e sem sinal: é texto de pessoa, não de máquina.
+const NUM = "(\\d{1,3}(?:\\.\\d+)?)";
+const FUNCAO = new RegExp(`^(rgb|hsl|hsb)a?\\(\\s*${NUM}(deg|%)?\\s*[, ]\\s*${NUM}(%)?\\s*[, ]\\s*${NUM}(%)?\\s*(?:[,/]\\s*(\\d*(?:\\.\\d+)?)(%)?\\s*)?\\)$`, "i");
+/** Texto de cor → a cor de dentro: hex (3, 4, 6 ou 8 dígitos), `rgb()`, `hsl()` ou `hsb()`, com alfa. O resto →
+ *  `null`. O matiz de `hsl()`/`hsb()` cinza é guardado (o hex o perderia). */
+export function parseColor(texto) {
+    if (texto.length > 64)
+        return null;
+    const t = texto.trim();
+    const hex = parseHex(t);
+    if (hex)
+        return { ...rgbToHsb(hex), a: hex.a };
+    const m = FUNCAO.exec(t);
+    if (!m)
+        return null;
+    const [, fn, v1, , v2, , v3, , va, pa] = m;
+    const n1 = Number(v1), n2 = Number(v2), n3 = Number(v3);
+    const a = va === undefined || va === "" ? 1 : limitar(pa ? Number(va) / 100 : Number(va), 0, 1);
+    const tipo = fn.toLowerCase();
+    if (tipo === "rgb") {
+        if (n1 > 255 || n2 > 255 || n3 > 255)
+            return null;
+        return { ...rgbToHsb({ r: n1, g: n2, b: n3 }), a };
+    }
+    if (n1 > 360 || n2 > 100 || n3 > 100)
+        return null;
+    if (tipo === "hsb")
+        return { h: n1 % 360, s: n2 / 100, b: n3 / 100, a };
+    return { ...hslParaHsb(n1 % 360, n2 / 100, n3 / 100), a };
+}
+/** A cor de dentro → hex (`#rrggbb`, ou `#rrggbbaa` com transparência). */
+export const corToHex = (c) => toHex({ ...hsbToRgb(c), a: c.a });
+// ── As conversões ───────────────────────────────────────────────────────────────────────────────────────────
+// O matiz pela fórmula de seis setores (a mesma do HSV e do HSL).
+function matiz(r, g, b, max, d) {
+    if (d === 0)
+        return 0;
+    const h = max === r ? (g - b) / d + (g < b ? 6 : 0) : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    return h * 60;
+}
+export function rgbToHsb({ r, g, b }) {
+    const [R, G, B] = [r / 255, g / 255, b / 255];
+    const max = Math.max(R, G, B), d = max - Math.min(R, G, B);
+    return { h: matiz(R, G, B, max, d), s: max === 0 ? 0 : d / max, b: max };
+}
+export function hsbToRgb({ h, s, b }) {
+    const f = (n) => {
+        const k = (n + h / 60) % 6;
+        return 255 * (b - b * s * Math.max(0, Math.min(k, 4 - k, 1)));
+    };
+    return { r: f(5), g: f(3), b: f(1) };
+}
+export function rgbToHsl({ r, g, b }) {
+    const [R, G, B] = [r / 255, g / 255, b / 255];
+    const max = Math.max(R, G, B), min = Math.min(R, G, B), d = max - min, l = (max + min) / 2;
+    return { h: matiz(R, G, B, max, d), s: d === 0 ? 0 : d / (1 - Math.abs(2 * l - 1)), l };
+}
+export function hslToRgb({ h, s, l }) {
+    const a = s * Math.min(l, 1 - l);
+    const f = (n) => {
+        const k = (n + h / 30) % 12;
+        return 255 * (l - a * Math.max(-1, Math.min(k - 3, 9 - k, 1)));
+    };
+    return { r: f(0), g: f(8), b: f(4) };
+}
+// HSB ↔ HSL direto, com o matiz passando por fora (pelo RGB ele se perderia no cinza).
+function hsbParaHsl(c) {
+    const l = c.b * (1 - c.s / 2);
+    return { l, s: l === 0 || l === 1 ? 0 : (c.b - l) / Math.min(l, 1 - l) };
+}
+function hslParaHsb(h, s, l, anterior) {
+    const b = l + s * Math.min(l, 1 - l);
+    return { h, s: b === 0 ? (anterior?.s ?? 0) : 2 * (1 - l / b), b };
+}
+// ── Os canais ───────────────────────────────────────────────────────────────────────────────────────────────
+/** A faixa de cada canal, a mesma da referência: matiz 0–360 (passo 1, salto 15); saturação, brilho e luminosidade
+ *  0–100 (passo 1, salto 10); vermelho, verde e azul 0–255 (passo 1, salto 17); alfa 0–1 (passo 0,01, salto 0,1). */
+export function channelRange(ch) {
+    if (ch === "hue")
+        return { min: 0, max: 360, step: 1, page: 15 };
+    if (ch === "red" || ch === "green" || ch === "blue")
+        return { min: 0, max: 255, step: 1, page: 17 };
+    if (ch === "alpha")
+        return { min: 0, max: 1, step: 0.01, page: 0.1 };
+    return { min: 0, max: 100, step: 1, page: 10 };
+}
+/** O espaço em que um canal vive: luminosidade só no HSL, brilho só no HSB, vermelho/verde/azul só no RGB; matiz,
+ *  saturação e alfa no espaço pedido (sem pedido, HSB). */
+export function spaceOf(ch, pedido) {
+    if (ch === "lightness")
+        return "hsl";
+    if (ch === "brightness")
+        return "hsb";
+    if (ch === "red" || ch === "green" || ch === "blue")
+        return "rgb";
+    return pedido === "rgb" && ch !== "alpha" ? "hsb" : pedido ?? "hsb";
+}
+/** O valor de um canal, na faixa dele. */
+export function getChannel(c, ch, space = spaceOf(ch)) {
+    if (ch === "alpha")
+        return c.a;
+    if (ch === "hue")
+        return c.h;
+    if (space === "rgb") {
+        const rgb = hsbToRgb(c);
+        return ch === "red" ? rgb.r : ch === "green" ? rgb.g : rgb.b;
+    }
+    if (space === "hsl") {
+        const v = hsbParaHsl(c);
+        return (ch === "lightness" ? v.l : v.s) * 100;
+    }
+    return (ch === "brightness" ? c.b : c.s) * 100;
+}
+/** A cor com um canal trocado (o valor é limitado à faixa). O matiz e a saturação de antes ficam quando a cor nova
+ *  vira cinza ou preta. */
+export function setChannel(c, ch, v, space = spaceOf(ch)) {
+    const { min, max } = channelRange(ch);
+    const n = limitar(v, min, max);
+    if (ch === "alpha")
+        return { ...c, a: n };
+    if (ch === "hue")
+        return { ...c, h: n };
+    if (space === "rgb") {
+        const rgb = { ...hsbToRgb(c), [ch === "red" ? "r" : ch === "green" ? "g" : "b"]: n };
+        const novo = rgbToHsb(rgb);
+        return { h: novo.s === 0 || novo.b === 0 ? c.h : novo.h, s: novo.b === 0 ? c.s : novo.s, b: novo.b, a: c.a };
+    }
+    if (space === "hsl") {
+        const atual = hsbParaHsl(c);
+        const s = ch === "saturation" ? n / 100 : atual.s, l = ch === "lightness" ? n / 100 : atual.l;
+        return { ...hslParaHsb(c.h, s, l, c), a: c.a };
+    }
+    return { ...c, [ch === "brightness" ? "b" : "s"]: n / 100 };
+}
+// ── O contraste ─────────────────────────────────────────────────────────────────────────────────────────────
+/** A luminância relativa da WCAG 2 (0 = preto, 1 = branco), a conta do contraste. */
+export function relativeLuminance({ r, g, b }) {
+    const lin = (c) => { const s = c / 255; return s <= 0.04045 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4; };
+    return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
+}
+/** A tinta que contrasta MAIS sobre a cor: `"dark"` (preto) ou `"light"` (branco), pela razão de contraste da WCAG
+ *  — e não por um palpite de "cor clara". O amarelo da Aurea pede preto; um azul médio também. */
+export function contrastingInk(rgb) {
+    const L = relativeLuminance(rgb);
+    return (L + 0.05) / 0.05 >= 1.05 / (L + 0.05) ? "dark" : "light";
+}
+const opaca = (c) => toHex(hsbToRgb(c));
+// A cor pura de um matiz (saturação e brilho cheios).
+const puro = (h) => opaca({ h, s: 1, b: 1, a: 1 });
+/** A cor pura de um matiz, em hex — a cor do pino da trilha de matiz. */
+export const pureHue = (h) => puro(h);
+/** O FUNDO da trilha de um canal, para o `background` do trilho do `Slider`. O gradiente vai de ponta a ponta do
+ *  trilho, mas as paradas começam e terminam na FOLGA (`--slider-cap`, o recuo que o pino respeita): antes da
+ *  primeira e depois da última, a cor chapada da ponta. Assim o pino no mínimo fica sobre a cor do mínimo, em
+ *  qualquer canal. O alfa vai do transparente à cor opaca (o xadrez embaixo é a pele, e não gradiente). */
+export function trackBackground(c, ch, space = spaceOf(ch), direcao = "to right") {
+    const { min, max } = channelRange(ch);
+    let cores;
+    if (ch === "hue")
+        cores = [0, 60, 120, 180, 240, 300, 360].map(puro);
+    else if (ch === "alpha")
+        cores = [toHex({ ...hsbToRgb(c), a: 0 }), opaca(c)];
+    else if (ch === "lightness")
+        cores = [min, (max - min) / 2, max].map((v) => opaca(setChannel(c, ch, v, space)));
+    else
+        cores = [min, max].map((v) => opaca(setChannel(c, ch, v, space)));
+    const k = cores.length - 1;
+    const paradas = cores.map((cor, i) => `${cor} calc(var(--slider-cap, 0px) + (100% - 2 * var(--slider-cap, 0px)) * ${i / k})`);
+    return `linear-gradient(${direcao}, ${paradas.join(", ")})`;
+}
+/** O fundo da área de cor para um par de canais, com o terceiro fixo no valor da cor de agora. A técnica é a da
+ *  biblioteca da referência (escrita aqui por nós): no RGB, uma camada por canal somadas pelo modo de mistura
+ *  `screen`; no HSL e no HSB, uma camada por canal com a receita de paradas dele, e a cor pura embaixo quando o
+ *  fixo é o matiz. `x` anda do começo ao fim da linha (na escrita da direita para a esquerda, o começo é a direita);
+ *  `y`, de baixo para cima. */
+export function areaBackground(c, space, x, y, rtl = false) {
+    const fim = rtl ? "to left" : "to right";
+    const z = COLOR_CHANNELS[space].find((ch) => ch !== x && ch !== y);
+    const zv = getChannel(c, z, space);
+    if (space === "rgb") {
+        const so = (ch, v) => {
+            const rgb = { r: 0, g: 0, b: 0 };
+            rgb[ch === "red" ? "r" : ch === "green" ? "g" : "b"] = v;
+            return toHex(rgb);
+        };
+        return { background: [`linear-gradient(${fim}, ${so(x, 0)}, ${so(x, 255)})`, `linear-gradient(to top, ${so(y, 0)}, ${so(y, 255)})`,
+                so(z, zv)].join(", "), blend: "screen" };
+    }
+    const base = setChannel({ h: 0, s: 1, b: 1, a: 1 }, z, zv, space);
+    const receita = (ch) => ch === "hue" ? [0, 60, 120, 180, 240, 300, 360].map((h) => opaca(setChannel(base, "hue", h, space))).join(", ")
+        : ch === "saturation" ? `${opaca(setChannel(base, "saturation", 0, space))}, transparent`
+            : ch === "lightness" ? "#000, transparent, #fff"
+                : "#000, transparent";
+    const camadas = COLOR_CHANNELS[space].filter((ch) => ch !== z)
+        .map((ch) => `linear-gradient(${ch === x ? fim : "to top"}, ${receita(ch)})`).reverse();
+    if (z === "hue")
+        camadas.push(opaca(base));
+    return { background: camadas.join(", ") };
+}
+// A CLARIDADE ("escuro", "claro") é pelo HSL: a luminosidade dele põe o amarelo puro e o azul puro no MESMO meio
+// (0,5), então as palavras dizem a mistura com branco ou preto, e não a claridade própria de cada matiz. A FORÇA
+// ("vivo", "pálido", "acinzentado") é pelo HSB: no HSL um rosa pastel tem saturação 1 e sairia "vivo".
+function matizPeloNome(h, l) {
+    if (h >= 15 && h < 70 && l < 0.35)
+        return "brown";
+    if ((h >= 330 || h < 15) && l > 0.7)
+        return "pink";
+    if (h < 15 || h >= 345)
+        return "red";
+    if (h < 45)
+        return "orange";
+    if (h < 70)
+        return "yellow";
+    // O ciano é estreito (170–190): o azul-claro do CSS (`#add8e6`, 194,7°) e o azul-céu (197°) são azuis para quem vê.
+    if (h < 170)
+        return "green";
+    if (h < 190)
+        return "cyan";
+    if (h < 255)
+        return "blue";
+    if (h < 290)
+        return "purple";
+    return "magenta";
+}
+/** O nome da cor na língua das frases: "vivid blue", "dark red", "rosa pálido". */
+export function colorName(rgb, s) {
+    const { h, l } = rgbToHsl(rgb);
+    const { s: forca, b: brilho } = rgbToHsb(rgb);
+    let hue;
+    let claridade;
+    let croma;
+    if (l >= 0.95)
+        hue = "white";
+    else if (l <= 0.08)
+        hue = "black";
+    else if (forca < 0.12)
+        hue = "gray";
+    else {
+        hue = matizPeloNome(h, l);
+        croma = forca >= 0.8 && brilho >= 0.8 ? "vivid" : forca < 0.4 ? (brilho >= 0.85 ? "pale" : "grayish") : undefined;
+    }
+    // "Pálido" já diz claro; o branco, o preto, o marrom e o rosa já dizem a claridade no próprio nome.
+    if (croma !== "pale" && hue !== "white" && hue !== "black" && hue !== "brown" && hue !== "pink") {
+        claridade = l < 0.2 ? "veryDark" : l < 0.35 ? "dark" : l > 0.85 ? "veryLight" : l > 0.7 ? "light" : undefined;
+    }
+    return s.colorNameFormat
+        .replace("{lightness}", claridade ? s.colorTone[claridade] : "")
+        .replace("{chroma}", croma ? s.colorTone[croma] : "")
+        .replace("{hue}", s.colorHue[hue])
+        .replace(/\s+/g, " ").trim();
+}
+/** O valor de um canal escrito para o leitor de tela e a saída: "210°", "80%", "128", alfa "50%". */
+export function formatChannel(ch, v) {
+    if (ch === "hue")
+        return `${Math.round(v)}°`;
+    if (ch === "alpha")
+        return `${Math.round(v * 100)}%`;
+    if (ch === "red" || ch === "green" || ch === "blue")
+        return `${Math.round(v)}`;
+    return `${Math.round(v)}%`;
+}

package/dist/disclosure.d.ts

@@ -1,11 +1,21 @@
-import { type ReactNode } from "react";
-export declare function Accordion({ items }: {
-    items: Array<{
-        id: string;
-        title: ReactNode;
-        content: ReactNode;
-    }>;
-}): import("react").JSX.Element;
+import React, { type ReactNode } from "react";
+export type AccordionVariant = "default" | "surface";
+export interface AccordionItem {
+    id: string;
+    title: ReactNode;
+    content: ReactNode;
+    /** O item que não abre: anunciado como desligado e fora do Tab. */
+    disabled?: boolean;
+}
+export declare function Accordion({ items, variant, multiple, defaultValue, className }: {
+    items: AccordionItem[];
+    variant?: AccordionVariant;
+    /** 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). */
+    defaultValue?: string[];
+    className?: string;
+}): React.JSX.Element;
 export declare function Collapsible({ trigger, children, open, defaultOpen, onOpenChange, disabled, className }: {
     trigger: ReactNode;
     children: ReactNode;
@@ -14,4 +24,4 @@ export declare function Collapsible({ trigger, children, open, defaultOpen, onOp
     onOpenChange?: (open: boolean) => void;
     disabled?: boolean;
     className?: string;
-}): import("react").JSX.Element;
+}): React.JSX.Element;

package/dist/disclosure.js

@@ -1,10 +1,17 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
+// do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
+// internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
+import React from "react";
 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 }) { return _jsx("div", { className: "accordion", children: items.map(i => _jsxs("details", { children: [_jsx("summary", { children: i.title }), _jsx("div", { className: "accordion-content", children: i.content })] }, i.id)) }); }
+export function Accordion({ items, variant = "default", multiple = false, defaultValue, 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)) });
+}
 // COLLAPSIBLE — uma seção que abre e fecha, com o estado do lado de quem usa.
 //
 // Não é um Accordion de um item só, e a diferença é o motivo de existir: o `Accordion` é um

package/dist/feedback-client.d.ts

@@ -8,7 +8,7 @@ export declare function Status({ variant, state, children, className, ...props }
     variant?: StatusVariant;
     state?: UniversalState;
 }): React.JSX.Element;
-export type AlertVariant = "info" | "success" | "warning" | "danger";
+export type AlertVariant = "info" | "success" | "warning" | "danger" | "accent";
 export declare function Alert({ variant, state, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     variant?: AlertVariant;
     state?: UniversalState;
@@ -16,7 +16,7 @@ export declare function Alert({ variant, state, title, icon, onDismiss, children
     icon?: IconName;
     onDismiss?: () => void;
 }): React.JSX.Element;
-export type BannerVariant = AlertVariant;
+export type BannerVariant = "info" | "success" | "warning" | "danger";
 export declare function Banner({ variant, state, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     variant?: BannerVariant;
     state?: UniversalState;
@@ -24,13 +24,14 @@ export declare function Banner({ variant, state, title, icon, onDismiss, childre
     icon?: IconName;
     onDismiss?: () => void;
 }): React.JSX.Element;
+export type SpinnerSize = "sm" | "md" | "lg" | "xl";
 export declare function Spinner({ size, label, decorative, className, ...props }: HTMLAttributes<HTMLSpanElement> & RefAttributes<HTMLSpanElement> & {
-    size?: Responsive<"sm" | "md" | "lg">;
+    size?: Responsive<SpinnerSize>;
     label?: string;
     decorative?: boolean;
 }): React.JSX.Element;
 export type DataStateValue = "loading" | "error" | "empty" | UniversalState;
-export declare function DataState({ state, message, skeleton, emptyTitle, emptyIcon, action, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+export type DataStateProps = HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
     state?: DataStateValue;
     message?: ReactNode;
     skeleton?: ReactNode;
@@ -38,7 +39,12 @@ export declare function DataState({ state, message, skeleton, emptyTitle, emptyI
     emptyIcon?: IconName;
     action?: ReactNode;
     children: ReactNode | (() => ReactNode);
-}): React.JSX.Element;
+    /** A barreira de erro (MNT-25): o que quebrar ao desenhar o conteúdo vira a cara de erro, com "Tentar de novo". */
+    catchErrors?: boolean;
+    /** Recebe o erro que a barreira pegou — para o app registrar. */
+    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 }: {
     icon?: IconName;
     title: ReactNode;

package/dist/feedback-client.js

@@ -8,7 +8,7 @@ import React from "react";
 import { Popover as BasePopover } from "@base-ui/react/popover";
 import { cx, useAureaStrings, usePortalContainer, stateSeverity } from "./internal.js";
 import { Icon } from "./system.js";
-import { Button, IconButton } from "./actions.js";
+import { Button, IconButton, CloseButton } from "./actions.js";
 // `oracle` saiu daqui (achado M9, 26/07/2026): estava no tipo e no CSS, e NÃO estava na
 // ficha — ou seja, era superfície pública que o contrato não declarava. E é vocabulário do
 // app de origem (papel de agente), não do sistema, como as classes de domínio que o achado
@@ -36,7 +36,7 @@ export function Status({ variant, state, children, className, ...props }) { cons
 // referência e o aviso de largura de página nem sempre quer glifo — a assimetria é decidida,
 // não herdada.
 const ICONE_DA_VARIANTE = { info: "info",
-    success: "check-circle", warning: "warning", danger: "x-circle" };
+    success: "check-circle", warning: "warning", danger: "x-circle", accent: "info" };
 // A grade do `.alert` tem TRÊS trilhas (auto 1fr auto): ícone, corpo, ação. Uma versão anterior
 // emitia o título solto na trilha 1 — a do ícone — e o corpo como item anônimo. Medido no
 // navegador em 21/08/2026: o título ocupava a coluna do ícone e crescia com o próprio texto,
@@ -51,23 +51,34 @@ const ICONE_DA_VARIANTE = { info: "info",
 // universal. Quem passa só `state` recebe a cor derivada da gravidade e o rótulo universal
 // quando não há filho; quem passa os dois manda, porque só o consumidor sabe se aquele
 // "esperando" dele é grave.
-export function Alert({ variant, state, title, icon, onDismiss, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("alert", `alert-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [_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)] }), onDismiss ? _jsx(IconButton, { variant: "ghost", size: "sm", icon: "x", label: s.close, onClick: onDismiss }) : _jsx("span", {})] }); }
+export function Alert({ variant, state, title, icon, onDismiss, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("alert", `alert-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [_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)] }), onDismiss ? _jsx(CloseButton, { onClick: onDismiss }) : _jsx("span", {})] }); }
 export function Banner({ variant, state, title, icon, onDismiss, children, className, ...props }) { const s = useAureaStrings(); const v = variant ?? (state ? stateSeverity(state) : "info"); return _jsxs("div", { className: cx("banner", `banner-${v}`, className), role: v === "danger" ? "alert" : "status", "data-state": state, ...props, children: [icon ? _jsx(Icon, { name: icon }) : _jsx("span", {}), _jsxs("div", { children: [title && _jsx("strong", { children: title }), children ?? (state ? s.universalState[state] : null)] }), onDismiss ? _jsx(IconButton, { variant: "ghost", size: "sm", icon: "x", label: s.close, onClick: onDismiss }) : _jsx("span", {})] }); }
-// A barra grampeava 0..100 e o `aria-valuenow` NÃO — medido ao publicar o contrato de API na
-// Parte E: com value=150 o desenho parava em 100% e o leitor de tela anunciava "150 de 100".
-// A causa é a de sempre: o grampo existia num lugar só. Agora é UMA expressão que serve os dois,
-// então não há como divergirem de novo.
-// SÓ DETERMINADA, de propósito: não há modo indeterminado nem `.progress` para ele no core. A
-// ficha dizia que havia e era falso — corrigido junto, porque contrato que promete o que não
-// existe custa mais que ausência.
-// O DEGRAU RESPONSIVO volta (merge de 28/08/2026): a ficha declara `responsive.size` e o
-// componente tinha perdido a capacidade quando este arquivo entrou da `main`. Mesma perda
-// silenciosa do `Input`, do `Tabs` e do `NumberField` — a ficha documentava, o código não fazia.
-export function Spinner({ size, label, decorative, className, ...props }) { const s = useAureaStrings(); return _jsx("span", { className: cx("spinner", peleDoEixo("spinner", size, "sm", "spinner"), className), ...(decorative ? { "aria-hidden": true } : { role: "status", "aria-label": label ?? s.loading }), ...props }); }
+export function Spinner({ size = "md", label, decorative, className, ...props }) { const s = useAureaStrings(); return _jsx("span", { className: cx("spinner", peleDoEixo("spinner", size, "sm", "spinner"), className), ...(decorative ? { "aria-hidden": true } : { role: "status", "aria-label": label ?? s.loading }), ...props }); }
 // `children` como FUNÇÃO é de propósito para o caso `loading`: assim o consumidor não paga o
 // render do conteúdo enquanto ele não existe. Aceita nó também, porque a maioria das telas já
 // tem o conteúdo pronto e obrigar função seria cerimônia.
-export function DataState({ state, message, skeleton, emptyTitle, emptyIcon, action, children, className, ...props }) {
+// MNT-25 (passo 10, 0.32.0): A BARREIRA DE ERRO, como variação do `DataState` (escolha do Victor,
+// 12/10/2026: escrita na Aurea, sem dependência nova; variação, e não peça nova). Um erro de desenho no app
+// de rede deixou a tela inteira em branco. Com `catchErrors`, o que quebra DENTRO do `DataState` vira a
+// cara de erro dele (a mensagem e "Tentar de novo"), e o resto da tela fica. O React só pega erro de
+// desenho com um componente de CLASSE (não há gancho para isso) — é o jeito que ele manda, e o único.
+// `onCatch`, e não `onError`: `onError` já é o evento do HTML que o `DataState` repassa ao `<div>`.
+// O que a barreira NÃO pega (é do React, não daqui): erro em evento de clique, em código assíncrono e no
+// desenho no servidor.
+class BarreiraDeErro extends React.Component {
+    state = { quebrou: false };
+    static getDerivedStateFromError() { return { quebrou: true }; }
+    componentDidCatch(erro, info) { this.props.onCatch?.(erro, info); }
+    tentar = () => this.setState({ quebrou: false });
+    render() { return this.state.quebrou ? this.props.falha(this.tentar) : this.props.children; }
+}
+export function DataState({ catchErrors, onCatch, ...props }) {
+    const s = useAureaStrings();
+    if (!catchErrors)
+        return _jsx(CorpoDoDataState, { ...props });
+    return _jsx(BarreiraDeErro, { onCatch: onCatch, falha: tentar => _jsxs("div", { className: cx("data-state", props.className), "data-state": "error", children: [_jsx(Alert, { variant: "danger", children: props.message ?? s.dataCrashed }), _jsx("div", { children: _jsx(Button, { size: "sm", onClick: tentar, children: s.dataRetry }) })] }), children: _jsx(CorpoDoDataState, { ...props }) });
+}
+function CorpoDoDataState({ state, message, skeleton, emptyTitle, emptyIcon, action, children, className, ...props }) {
     const s = useAureaStrings();
     const conteudo = () => typeof children === "function" ? children() : children;
     const caixa = (inner, ocupado) => _jsx("div", { className: cx("data-state", className), "aria-busy": ocupado || undefined, "data-state": state, ...props, children: inner });

package/dist/graph-geometria.d.ts

@@ -0,0 +1,84 @@
+export type Ponto = {
+    x: number;
+    y: number;
+};
+/** Retângulo no plano do mapa. `larg`/`alt`, e não `width`/`height`: o check 23 lê o fonte inteiro. */
+export type Caixa = {
+    x: number;
+    y: number;
+    larg: number;
+    alt: number;
+};
+export type Borda = "left" | "center" | "right" | "top" | "middle" | "bottom";
+export declare function alinhar(caixas: ReadonlyMap<string, Caixa>, borda: Borda): Map<string, Ponto>;
+/**
+ * Distribuir mantém as DUAS PONTAS paradas e deixa os vãos iguais entre os do meio. Se os nós já
+ * se sobrepõem (o vão daria negativo), o passo igual vai para os CENTROS, como no draw.io.
+ */
+export declare function distribuir(caixas: ReadonlyMap<string, Caixa>, eixo: "horizontal" | "vertical"): Map<string, Ponto>;
+export declare function subarvores(ids: readonly string[], arestas: readonly {
+    from: string;
+    to: string;
+}[], raiz?: string): Map<string, string[]>;
+export declare function recolher(ids: readonly string[], pais: ReadonlyMap<string, string>, dominados: ReadonlyMap<string, readonly string[]>, recolhidos: ReadonlySet<string>, contemFilhos: ReadonlySet<string>): {
+    rep: Map<string, string>;
+    guardados: Map<string, number>;
+};
+/**
+ * As linhas depois do fechamento. A que fica inteira dentro de um fechado some; a que saía de um
+ * escondido passa a sair do representante; e as que ficaram entre o MESMO par viram UMA linha com o
+ * número — a "aresta agregada" do mercado (o padrão aberto de quem fecha grupo). As inteiras ficam
+ * como estavam.
+ */
+export declare function remapear<T extends {
+    from: string;
+    to: string;
+}>(arestas: readonly T[], rep: ReadonlyMap<string, string>): {
+    item: T;
+    de: string;
+    para: string;
+    n: number;
+}[];
+/** Tira os pontos repetidos e os do meio de um trecho reto: a ponte e o canto contam os trechos. */
+export declare function simplificar(pontos: readonly Ponto[]): Ponto[];
+/** O ponto no MEIO do comprimento — onde fica o rótulo e a pastilha da linha. */
+export declare function meioDoTracado(pontos: readonly Ponto[]): Ponto;
+/** Uma ponte: o intervalo do trecho, medido no eixo dele, em que a linha salta. */
+export type Ponte = {
+    de: number;
+    ate: number;
+};
+/**
+ * AS PONTES (MNT-12.3), na técnica do draw.io: a linha desenhada DEPOIS salta sobre as de antes,
+ * só onde um trecho horizontal cruza um vertical — dois trechos no mesmo eixo não se cruzam. O
+ * cruzamento perto demais de uma dobra não ganha ponte (o arco bateria no canto). Pontes que se
+ * encostam viram uma só, mais larga. A caixa de cada linha filtra os pares antes da conta.
+ */
+export declare function pontes(linhas: readonly {
+    id: string;
+    pontos: readonly Ponto[];
+}[], raio: number, canto: number): Map<string, Map<number, Ponte[]>>;
+/**
+ * O `d` do SVG: a linha pelos pontos, com o canto arredondado (o `--radius-sm` da casa, ou menos se
+ * o trecho for curto) e o salto de cada ponte — meia elipse, por cima no trecho deitado e à direita
+ * no de pé, seja qual for o sentido do trecho.
+ */
+export declare function tracado(pontos: readonly Ponto[], canto: number, saltos?: ReadonlyMap<number, readonly Ponte[]>, raio?: number): string;
+/** De que lado do nó a linha sai (ou entra), lido do primeiro (ou último) trecho. */
+export declare function ladoDoTrecho(de: Ponto, para: Ponto, saindo: boolean): "top" | "right" | "bottom" | "left";
+/** O trecho atravessa o MIOLO da caixa (encostar na borda não conta — é assim que a linha chega). */
+export declare function trechoCruza(a: Ponto, b: Ponto, c: Caixa): boolean;
+export declare const rotaCruza: (pontos: readonly Ponto[], caixas: Iterable<Caixa>) => boolean;
+/** Onde a reta entre os dois centros sai da caixa: a ponta da linha "flutuante" (arrumação radial). */
+export declare function bordaNaDirecao(c: Caixa, para: Ponto): Ponto;
+/**
+ * Nenhum rótulo cobre outro rótulo nem um nó. Não há biblioteca livre que POSICIONE sem sobrepor;
+ * o que as bibliotecas abertas fazem é ESCONDER por prioridade: o de prioridade maior fica, e no empate fica
+ * o que veio antes na lista do app. Devolve os que somem.
+ */
+export declare function rotulosQueSomem(rotulos: readonly {
+    id: string;
+    caixa: Caixa;
+    prioridade: number;
+}[], obstaculos: readonly Caixa[]): Set<string>;
+export declare function contornoDeNuvem(larg: number, alt: number): string;