@aurea-uds/react 0.31.0 → 0.33.0

package/dist/color.d.ts

@@ -0,0 +1,92 @@
+import type { AureaStrings } from "./pure.js";
+/** Os três canais de 0 a 255. */
+export interface Rgb {
+    r: number;
+    g: number;
+    b: number;
+}
+/** Matiz de 0 a 360; saturação e brilho de 0 a 1 (o HSV). */
+export interface Hsb {
+    h: number;
+    s: number;
+    b: number;
+}
+/** Matiz de 0 a 360; saturação e luminosidade de 0 a 1. */
+export interface Hsl {
+    h: number;
+    s: number;
+    l: number;
+}
+/** A cor de dentro das peças: HSB com o alfa (0 = transparente, 1 = opaca). */
+export interface Cor extends Hsb {
+    a: number;
+}
+export type ColorSpace = "rgb" | "hsl" | "hsb";
+export type ColorChannel = "hue" | "saturation" | "brightness" | "lightness" | "red" | "green" | "blue" | "alpha";
+/** Os três canais de cada espaço, na ordem dele. */
+export declare const COLOR_CHANNELS: Readonly<Record<ColorSpace, readonly [ColorChannel, ColorChannel, ColorChannel]>>;
+/** `#rgb`, `#rgba`, `#rrggbb` ou `#rrggbbaa` (com ou sem `#`) → os canais e o alfa; o resto → `null`. */
+export declare function parseHex(texto: string): (Rgb & {
+    a: number;
+}) | null;
+/** Os canais → `#rrggbb` (minúscula, como o `<input type="color">`); com alfa abaixo de 1, `#rrggbbaa`. */
+export declare function toHex({ r, g, b, a }: Rgb & {
+    a?: number;
+}): string;
+/** Normaliza o texto hex; texto inválido → `null`. */
+export declare const normalizeHex: (texto: string) => string | null;
+/** 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 declare function parseColor(texto: string): Cor | null;
+/** A cor de dentro → hex (`#rrggbb`, ou `#rrggbbaa` com transparência). */
+export declare const corToHex: (c: Cor) => string;
+export declare function rgbToHsb({ r, g, b }: Rgb): Hsb;
+export declare function hsbToRgb({ h, s, b }: Hsb): Rgb;
+export declare function rgbToHsl({ r, g, b }: Rgb): Hsl;
+export declare function hslToRgb({ h, s, l }: Hsl): Rgb;
+/** 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 declare function channelRange(ch: ColorChannel): {
+    min: number;
+    max: number;
+    step: number;
+    page: number;
+};
+/** 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 declare function spaceOf(ch: ColorChannel, pedido?: ColorSpace): ColorSpace;
+/** O valor de um canal, na faixa dele. */
+export declare function getChannel(c: Cor, ch: ColorChannel, space?: ColorSpace): number;
+/** 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 declare function setChannel(c: Cor, ch: ColorChannel, v: number, space?: ColorSpace): Cor;
+/** A luminância relativa da WCAG 2 (0 = preto, 1 = branco), a conta do contraste. */
+export declare function relativeLuminance({ r, g, b }: Rgb): number;
+/** 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 declare function contrastingInk(rgb: Rgb): "dark" | "light";
+type Direcao = "to right" | "to left" | "to top";
+/** A cor pura de um matiz, em hex — a cor do pino da trilha de matiz. */
+export declare const pureHue: (h: number) => string;
+/** 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 declare function trackBackground(c: Cor, ch: ColorChannel, space?: ColorSpace, direcao?: Direcao): string;
+/** 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 declare function areaBackground(c: Cor, space: ColorSpace, x: ColorChannel, y: ColorChannel, rtl?: boolean): {
+    background: string;
+    blend?: string;
+};
+export type ColorNameStrings = Pick<AureaStrings, "colorHue" | "colorTone" | "colorNameFormat">;
+export type ColorHueName = keyof AureaStrings["colorHue"];
+export type ColorToneName = keyof AureaStrings["colorTone"];
+/** O nome da cor na língua das frases: "vivid blue", "dark red", "rosa pálido". */
+export declare function colorName(rgb: Rgb, s: ColorNameStrings): string;
+/** O valor de um canal escrito para o leitor de tela e a saída: "210°", "80%", "128", alfa "50%". */
+export declare function formatChannel(ch: ColorChannel, v: number): string;
+export {};

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,15 +8,17 @@ export declare function Status({ variant, state, children, className, ...props }
     variant?: StatusVariant;
     state?: UniversalState;
 }): React.JSX.Element;
-export type AlertVariant = "info" | "success" | "warning" | "danger";
-export declare function Alert({ variant, state, title, icon, onDismiss, children, className, ...props }: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement> & {
+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> & {
     variant?: AlertVariant;
     state?: UniversalState;
     title?: ReactNode;
     icon?: IconName;
     onDismiss?: () => void;
+    /** O botão do aviso ("Atualizar", "Desfazer"): depois do texto, antes do X. No celular, embaixo do texto. */
+    action?: ReactNode;
 }): 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 +26,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 +41,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,36 @@ 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", {})] }); }
+// `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 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 });
@@ -127,7 +140,7 @@ export function NotificationCenter({ items, onItemClick, onMarkAllRead, label, i
             ? _jsx("button", { type: "button", className: "notification-item", "data-read": it.read || undefined, onClick: () => { it.onClick?.(); onItemClick?.(it); }, children: body })
             : _jsx("div", { className: "notification-item", "data-read": it.read || undefined, children: body });
     };
-    return _jsxs(BasePopover.Root, { children: [_jsxs("span", { className: "notification-trigger", children: [_jsx(BasePopover.Trigger, { render: _jsx(IconButton, { variant: "ghost", icon: icon, label: unread ? `${title} (${unread})` : title }) }), unread > 0 && _jsx("span", { className: "notification-count", "aria-hidden": "true", children: unread > 99 ? "99+" : unread })] }), _jsx(BasePopover.Portal, { container: portal, children: _jsx(BasePopover.Positioner, { side: side, sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover notification-panel", "aria-label": title, children: [_jsxs("div", { className: "notification-head", children: [_jsx(BasePopover.Title, { render: _jsx("strong", {}), children: title }), unread > 0 && onMarkAllRead && _jsx(Button, { variant: "ghost", size: "sm", onClick: onMarkAllRead, children: s.notificationMarkAll })] }), items.length
+    return _jsxs(BasePopover.Root, { children: [_jsxs("span", { className: "notification-trigger", children: [_jsx(BasePopover.Trigger, { render: _jsx(IconButton, { variant: "ghost", icon: icon, label: unread ? `${title} (${unread})` : title }) }), unread > 0 && _jsx("span", { className: "notification-count", "aria-hidden": "true", children: unread > 99 ? "99+" : unread })] }), _jsx(BasePopover.Portal, { container: portal, children: _jsx(BasePopover.Positioner, { className: "positioner", side: side, sideOffset: 8, children: _jsxs(BasePopover.Popup, { className: "popover notification-panel", "aria-label": title, children: [_jsxs("div", { className: "notification-head", children: [_jsx(BasePopover.Title, { render: _jsx("strong", {}), children: title }), unread > 0 && onMarkAllRead && _jsx(Button, { variant: "ghost", size: "sm", onClick: onMarkAllRead, children: s.notificationMarkAll })] }), items.length
                                 ? _jsx("div", { className: "notification-list", children: groups.map((g, gi) => {
                                         const gid = baseId + gi;
                                         return _jsxs(React.Fragment, { children: [g.label && _jsx("p", { className: "notification-group-label", id: gid, children: g.label }), _jsx("ul", { className: "notification-sublist", "aria-labelledby": g.label ? gid : undefined, children: g.items.map(it => _jsx("li", { children: renderRow(it) }, it.id)) })] }, gi);

package/dist/graph-worker.d.ts

@@ -0,0 +1 @@
+import "elkjs/lib/elk-worker.min.js";

package/dist/graph-worker.js

@@ -0,0 +1,17 @@
+// O TRABALHADOR DO MAPA (MNT-22, 0.32.0): o arrumador do `DependencyGraph` fora da tela principal, por
+// um caminho da Aurea.
+//
+//   Vite:  import TrabalhadorDoMapa from "@aurea-uds/react/graph-worker?worker";
+//          <DependencyGraph layout="layered" layoutWorker={() => new TrabalhadorDoMapa()} … />
+//
+// Por que existe: a receita antiga importava `elkjs/lib/elk-worker.min.js` direto, e a trava do app de
+// rede reprova motor importado por fora da Aurea (`motor-usado-por-fora`). Este módulo é UMA linha que
+// importa o trabalhador do `elkjs` (peer opcional) — ele NÃO copia o `elkjs` para dentro do pacote, que
+// seria redistribuí-lo (decisão do Victor, 10/10/2026).
+//
+// Como funciona: o `elk-worker.min.js`, quando roda num trabalhador (sem `document`, com `self`), se
+// registra sozinho em `self.onmessage` antes de qualquer outra coisa (medido no 0.12.0). O empacotador
+// junta os dois num arquivo de trabalhador, e o `elk-api` da Aurea conversa com ele.
+//
+// ⚠ Este arquivo é a única exceção ao `sideEffects: false` do pacote: o import abaixo É o efeito.
+import "elkjs/lib/elk-worker.min.js";

package/dist/graph.d.ts

@@ -67,9 +67,19 @@ export interface GraphEdgeItem {
     pattern?: GraphEdgePattern;
     weight?: GraphEdgeWeight;
     mark?: GraphEdgeMark;
+    /** O ESTADO da ligação (MNT-26), como o selo do nó: a palavra e o tom. O tom pinta o traço; a palavra
+     *  entra na parte "Estado" da legenda, com a amostra na cor — quem não distingue a cor lê a palavra.
+     *  `mark` é o SINAL do estado no meio da linha (o × do "Caído"), ao lado da marca do tipo, para o
+     *  estado se ver também sem cor. O TIPO da ligação (cobre, fibra) continua no desenho, no `mark` da
+     *  linha e no `legend`: são duas coisas, e a legenda as mostra separadas (decisão do Victor, 12/10/2026). */
+    status?: {
+        label: string;
+        tone?: GraphTone;
+        mark?: GraphEdgeMark;
+    };
     /** Um número no meio da linha: os membros de uma agregação (LAG). */
     count?: number;
-    /** O nome desta espécie de linha na legenda automática (`legend`). */
+    /** O nome do TIPO desta linha na parte "Tipo de ligação" da legenda automática (`legend`). */
     legend?: string;
     /** Quando dois rótulos se encostam, fica o de prioridade MAIOR; no empate, o que vem antes na
      *  lista (MNT-12.5). O nome da porta na ponta conta com a mesma prioridade da linha. */