@aurea-uds/react 0.36.0 → 0.37.0

package/dist/agents.js

@@ -298,5 +298,7 @@ export function InterAgentMessage({ messages, label, className, ...props }) {
 // cartão responder por dois contratos — o erro que o `TaskQueue` recusou no H.b.
 export function AutomationCard({ name, description, trigger, action, enabled, onToggle, lastRun, lastResult, details, actions, className, ...props }) {
     const s = useAureaStrings();
-    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 })] });
+    // `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 })] });
 }

package/dist/code-client.d.ts

@@ -1,9 +1,23 @@
 import React from "react";
-export declare function CodeBlock({ children, language, copyable, preview, className }: {
+/** Um pedaço de uma linha de código, com a classe da cor (`tok-keyword`, `tok-string`…) quando tem cor. */
+export interface CodeToken {
+    text: string;
+    className?: string;
+}
+/** Uma linha de código: os pedaços, na ordem. */
+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, className }: {
     children: string;
     language?: string;
     copyable?: boolean;
     /** 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;
+    /** 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). */
+    highlight?: CodeHighlighter;
     className?: string;
 }): React.JSX.Element;

package/dist/code-client.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Fase 9 (achado A5): este arquivo saiu do index.tsx de 970 linhas. Um módulo por categoria
 // do registry — a taxonomia já existia e é gateada. A ordem de import entre eles é um DAG:
 // internal → system → actions → feedback → inputs → navigation → layout → data-display → resto.
@@ -29,9 +29,17 @@ function CaixaDeExemplo({ preview, codigo, className }) {
     const botao = (a, rotulo) => _jsx("button", { type: "button", role: "tab", id: `${id}-${a}`, ref: a === "preview" ? refPrevia : refCodigo, className: aba === a ? "active" : undefined, "aria-selected": aba === a, "aria-controls": `${id}-${a}-panel`, tabIndex: aba === a ? 0 : -1, onClick: () => setAba(a), onKeyDown: tecla, children: rotulo });
     return _jsxs("div", { className: cx("demo code-preview", className), children: [_jsx("div", { className: "demo-tabs", children: _jsxs("div", { className: "segmented", role: "tablist", children: [botao("preview", s.codeBlockPreview), botao("code", s.codeBlockCode)] }) }), _jsx("div", { className: "demo-panel", "data-panel": "preview", role: "tabpanel", id: `${id}-preview-panel`, "aria-labelledby": `${id}-preview`, tabIndex: 0, hidden: aba !== "preview", children: preview }), _jsx("div", { className: "demo-panel demo-code", "data-panel": "code", role: "tabpanel", id: `${id}-code-panel`, "aria-labelledby": `${id}-code`, tabIndex: 0, hidden: aba !== "code", children: codigo })] });
 }
-export function CodeBlock({ children, language = "text", copyable, preview, className }) {
+// lineNumbers e highlight (lote V, 20/10/2026): as linhas viram um <span class="code-line"> cada, com o "\n" entre
+// elas — o texto do bloco continua IGUAL ao código (copiar com o mouse traz o mesmo texto), e o número é desenhado pelo
+// CSS, sem entrar no texto nem no leitor de tela. Sem as duas, a marcação é a de antes, sem mudar nada.
+// O "\n" do fim (o código que termina em quebra de linha) não vira uma linha numerada e vazia: ele sai depois da última.
+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, className }) {
     if (preview !== undefined)
-        return _jsx(CaixaDeExemplo, { preview: preview, className: className, codigo: _jsx(CodeBlock, { language: language, copyable: copyable, children: children }) });
+        return _jsx(CaixaDeExemplo, { preview: preview, className: className, codigo: _jsx(CodeBlock, { language: language, copyable: copyable, lineNumbers: lineNumbers, highlight: highlight, children: children }) });
     const s = useAureaStrings();
     // tabIndex no <pre>: `.code-block` é `overflow:auto` por construção, então é REGIÃO ROLÁVEL
     // e não tem nada focável dentro — quem navega por teclado não alcança o código que passa da
@@ -39,7 +47,13 @@ export function CodeBlock({ children, language = "text", copyable, preview, clas
     // demo do catálogo já tinha corrigido em 30/07/2026 no lado dele; aqui, na biblioteca, ele
     // seguia aberto e só não aparecia porque nenhuma linha era comprida o bastante. Quem o achou
     // foi o `catalog-sweep` em 10/08/2026, quando o bloco do I1 fez a linha de import crescer.
-    const pre = _jsx("pre", { className: cx("code-block", !copyable && className), "data-language": language, tabIndex: 0, children: _jsx("code", { children: children }) });
+    const linhas = lineNumbers || highlight ? linhasDoCodigo(children, language, highlight) : null;
+    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
+                ? _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)
         return pre;
     // 0.28.0: o "copiado" é dito ao leitor de tela. Com o `aurea.js` na página, é ele quem diz (pelo

package/dist/code-editor.js

@@ -92,7 +92,10 @@ export function CodeEditor({ defaultValue = "", onChange, extensions, readOnly =
     const dynExt = () => [
         EditorState.readOnly.of(readOnly),
         EditorView.editable.of(!readOnly),
-        EditorView.contentAttributes.of({ "aria-label": label }),
+        // `tabindex="0"` (21/10/2026): o CodeMirror põe -1 na área de rolagem, e com o código mais alto que o editor o axe
+        // reprovava `scrollable-region-focusable` — a área rola e nada dentro DIZ que recebe o teclado. O conteúdo já era
+        // parada de Tab (contenteditable); no readOnly, é o que deixa o teclado chegar ao código para rolar.
+        EditorView.contentAttributes.of({ "aria-label": label, tabindex: "0" }),
         ...(extensions ?? []),
     ];
     React.useEffect(() => {

package/dist/code-highlight.d.ts

@@ -0,0 +1,14 @@
+import type { CodeLine } from "./code-client.js";
+/** As línguas que `highlightCode` colore. Com outra, ele devolve `null` e o `CodeBlock` mostra o texto puro. */
+export declare const highlightLanguages: readonly string[];
+/**
+ * Colore o código para o `CodeBlock` (a prop `highlight`): devolve as linhas, cada uma com os pedaços de texto e a
+ * classe da cor. Língua que não está em `highlightLanguages` devolve `null`, e o bloco sai sem cor.
+ *
+ * ```tsx
+ * import {CodeBlock} from "@aurea-uds/react";
+ * import {highlightCode} from "@aurea-uds/react/code-highlight";
+ * <CodeBlock language="tsx" highlight={highlightCode} lineNumbers>{code}</CodeBlock>
+ * ```
+ */
+export declare function highlightCode(code: string, language: string): CodeLine[] | null;

package/dist/code-highlight.js

@@ -0,0 +1,92 @@
+// AS CORES DO CÓDIGO (lote V, 20/10/2026). O Victor, comparando as caixas de código do site com as da referência:
+// "não são como dos outros, com numero de linhas laterais e cores". A ficha do `CodeBlock` já prometia código com cores
+// de sintaxe, e o código desenhava texto puro.
+//
+// O MOTOR é o mesmo do `CodeEditor` (decisão do Victor, "A: motor da Aurea"): o `@lezer/highlight`, com os
+// analisadores do próprio Lezer. A função `highlightCode` dele colore código PARADO — sem editor, sem espera e sem
+// navegador —, então serve ao site, montado no Node, e a quem usa o `CodeBlock` no servidor ou no cliente.
+// As CORES são as do `aureaHighlightStyle` do `CodeEditor`, pelos mesmos grupos de etiquetas: o comentário apagado e
+// em itálico, a palavra-chave e o nome de tipo em azul, o texto em verde, o número em amarelo, a função em 600. Lá elas
+// são estilo de linha (o editor monta no navegador); aqui são CLASSES (`tok-*`), pintadas pelo `aurea.css` com os
+// mesmos tokens, porque o HTML parado não carrega estilo calculado.
+//
+// Módulo próprio, como o `code-editor`: os analisadores são peer OPCIONAL, e quem não usa as cores não os instala
+// (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 { parser as css } from "@lezer/css";
+import { parser as html } from "@lezer/html";
+import { parser as json } from "@lezer/json";
+import { StreamLanguage } from "@codemirror/language";
+import { shell } from "@codemirror/legacy-modes/mode/shell";
+// As etiquetas do Lezer → as classes que o `aurea.css` pinta. Os grupos são os do `aureaHighlightStyle`.
+const destaque = tagHighlighter([
+    { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], class: "tok-comment" },
+    { tag: [t.keyword, t.controlKeyword, t.moduleKeyword, t.operatorKeyword, t.definitionKeyword, t.modifier, t.self, t.atom, t.bool, t.null, t.typeName, t.className, t.namespace, t.tagName], class: "tok-keyword" },
+    { tag: [t.string, t.character, t.docString, t.regexp, t.escape, t.special(t.string)], class: "tok-string" },
+    { tag: [t.number, t.integer, t.float, t.unit], class: "tok-number" },
+    { tag: [t.propertyName, t.attributeName, t.labelName], class: "tok-property" },
+    { tag: t.function(t.variableName), class: "tok-function" },
+    { tag: t.invalid, class: "tok-invalid" },
+]);
+// As línguas que a Aurea colore. Os nomes são os que o `CodeBlock` recebe em `language`; `sh` e `shell` são o bash.
+const ANALISADORES = {
+    js, javascript: js,
+    jsx: js.configure({ dialect: "jsx" }),
+    ts: js.configure({ dialect: "ts" }), typescript: js.configure({ dialect: "ts" }),
+    tsx: js.configure({ dialect: "jsx ts" }),
+    css, html, json,
+};
+let bash;
+// 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];
+}
+/** 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"];
+/**
+ * Colore o código para o `CodeBlock` (a prop `highlight`): devolve as linhas, cada uma com os pedaços de texto e a
+ * classe da cor. Língua que não está em `highlightLanguages` devolve `null`, e o bloco sai sem cor.
+ *
+ * ```tsx
+ * import {CodeBlock} from "@aurea-uds/react";
+ * import {highlightCode} from "@aurea-uds/react/code-highlight";
+ * <CodeBlock language="tsx" highlight={highlightCode} lineNumbers>{code}</CodeBlock>
+ * ```
+ */
+export function highlightCode(code, language) {
+    const p = analisador(language);
+    if (!p)
+        return null;
+    // O TRECHO DE JSX. O exemplo de documentação é um pedaço — várias linhas de JSX soltas, uma embaixo da outra —, e o
+    // analisador lê código de verdade: o `<` da segunda linha vira "menor que", e a partir dali as cores trocam de lugar
+    // (medido na página do Button, 20/10/2026: só a primeira linha saía certa). Quando a leitura direta tem erro, o
+    // trecho é lido de novo dentro de um fragmento (`<>…</>`), fica a leitura com menos erros, e só o trecho original é
+    // pintado — o fragmento não aparece.
+    let texto = code, arvore = p.parse(code), de = 0;
+    if (JSX.has(language.toLowerCase())) {
+        const direto = erros(arvore);
+        if (direto > 0) {
+            const embrulhado = `<>${code}</>`, outra = p.parse(embrulhado);
+            if (erros(outra) < direto) {
+                texto = embrulhado;
+                arvore = outra;
+                de = 2;
+            }
+        }
+    }
+    const linhas = [[]];
+    colorirArvore(texto, arvore, destaque, (pedaco, classes) => { linhas[linhas.length - 1].push(classes ? { text: pedaco, className: classes } : { text: pedaco }); }, () => { linhas.push([]); }, de, de + code.length);
+    return linhas;
+}
+const JSX = new Set(["jsx", "tsx"]);
+// Quantos nós de erro a leitura deixou: é a régua para escolher entre a leitura direta e a do fragmento.
+function erros(arvore) {
+    let n = 0;
+    arvore.iterate({ enter: (no) => { if (no.type.isError)
+            n++; } });
+    return n;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aurea-uds/react",
-  "version": "0.36.0",
+  "version": "0.37.0",
   "description": "Os componentes React da Aurea UDS. Importe @aurea-uds/fonts/css e @aurea-uds/core/css junto.",
   "keywords": [
     "aurea",
@@ -90,6 +90,10 @@
       "types": "./dist/code-editor.d.ts",
       "import": "./dist/code-editor.js"
     },
+    "./code-highlight": {
+      "types": "./dist/code-highlight.d.ts",
+      "import": "./dist/code-highlight.js"
+    },
     "./data-grid": {
       "types": "./dist/data-grid.d.ts",
       "import": "./dist/data-grid.js"
@@ -127,9 +131,14 @@
   },
   "peerDependencies": {
     "@codemirror/language": "^6.12.4",
+    "@codemirror/legacy-modes": "^6.5.5",
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.6",
+    "@lezer/css": "^1.3.9",
     "@lezer/highlight": "^1.2.3",
+    "@lezer/html": "^1.3.13",
+    "@lezer/javascript": "^1.5.6",
+    "@lezer/json": "^1.0.3",
     "@tanstack/react-table": "^8.21.3",
     "@tisoap/react-flow-smart-edge": "^5.0.0",
     "@xyflow/react": "^12.11.3",
@@ -181,13 +190,33 @@
     },
     "@tisoap/react-flow-smart-edge": {
       "optional": true
+    },
+    "@lezer/javascript": {
+      "optional": true
+    },
+    "@lezer/css": {
+      "optional": true
+    },
+    "@lezer/html": {
+      "optional": true
+    },
+    "@lezer/json": {
+      "optional": true
+    },
+    "@codemirror/legacy-modes": {
+      "optional": true
     }
   },
   "devDependencies": {
-    "@codemirror/language": "^6.12.4",
+    "@codemirror/language": "^6.13.1",
+    "@codemirror/legacy-modes": "^6.5.5",
     "@codemirror/state": "^6.7.1",
     "@codemirror/view": "^6.43.6",
+    "@lezer/css": "^1.3.9",
     "@lezer/highlight": "^1.2.3",
+    "@lezer/html": "^1.3.13",
+    "@lezer/javascript": "^1.5.6",
+    "@lezer/json": "^1.0.3",
     "@tanstack/react-table": "8.21.3",
     "codemirror": "^6.0.2",
     "qr": "^0.6.0",