synthesisui 0.16.429 → 0.16.431

package/dist/commands/add.js

@@ -47,6 +47,12 @@ const IGNORED = [
     /** O que a última medição viu, para a próxima dizer o que mudou - descreve ESTE clone. */
     ".last-sync.json",
     "not-expressed.md",
+    /**
+     * O RELATÓRIO QUE O `inspect` ESCREVE - a leitura inteira com forma, para ele abrir no navegador.
+     * Mesma natureza do censo: é a MEDIÇÃO, reescrita por inteiro a cada rodada, então versioná-la é
+     * conflito toda vez e ainda poria um HTML de meio megabyte no diff de quem só rodou o comando.
+     */
+    "report.html",
     /**
      * O MODO DELA - ver `mode.ts`. Commitado, ele barraria o time inteiro porque UMA pessoa ligou
      * o bloqueio dela, e o aceite da etapa 06 é literal: *"a escolha de uma pessoa nunca barra
@@ -78,7 +84,12 @@ export async function ensureGovernanceHome(projectRoot) {
     await mkdir(join(projectRoot, "_synthesisui"), { recursive: true });
     await writeGovernanceIgnore(projectRoot);
 }
-async function writeGovernanceIgnore(projectRoot) {
+/**
+ * EXPORTADO desde 18/09 porque o `inspect` passou a escrever um arquivo na pasta: o relatório. Um
+ * comando de primeiro contato que deixa um HTML de 30 KB aparecendo no `git status` de quem só quis
+ * olhar cobra da pessoa uma limpeza que ela não pediu - e a pasta já é declarada gerenciada aqui.
+ */
+export async function writeGovernanceIgnore(projectRoot) {
     const path = join(projectRoot, "_synthesisui", ".gitignore");
     const existing = await readFile(path, "utf8").catch(() => null);
     /**

package/dist/commands/import.js

@@ -55,12 +55,14 @@ import { body, bodyWrapped, paint, section } from "../output.js";
 import { consumersOf, outsideScope, } from "../outside-scope.js";
 import { phase, startProgress } from "../progress.js";
 import { repoStateOf } from "../repo-state.js";
+import { relatorioHtml, secoesDe } from "../report-html.js";
 import { runtimeDeclaredVars, runtimeDeclaredVarsIn } from "../runtime-vars.js";
 import { detectStack, resolveDeps, stackVersions } from "../stack.js";
+import { desligarCaptura, ligarCaptura } from "../transcript.js";
 import { wiredSlugs, wiringWarning } from "../wired-slugs.js";
 import { harvestWorkspaceCss } from "../workspace-css.js";
 import { placeInWorkspace } from "../workspace-place.js";
-import { add } from "./add.js";
+import { add, writeGovernanceIgnore } from "./add.js";
 import { walk, walkAll } from "./doctor.js";
 /**
  * UMA PÁGINA DELE, como ele a montou - ver `Census.pages`.
@@ -3720,6 +3722,154 @@ export function defaultScheme(declared) {
     return dark > light ? "dark" : "light";
 }
 /** On a dry run there is nobody to ask, so say what was measured. */
+/**
+ * A TELA DO `inspect`, E O ARQUIVO QUE CARREGA O RESTO (dono, 18/09).
+ *
+ * O QUE O CLIENTE GANHA: ele decide sem rolar. Ficam na tela os quatro blocos que MUDAM o que ele
+ * vai fazer em seguida - quanto foi lido, se o root tem mais de um app, o que não resolve, e onde
+ * está a leitura inteira. Medido na saída dele em 18/09: 250 linhas, 94 delas a mesma frase sobre
+ * nome de parte. Nada se perde: o texto inteiro está no relatório, escrito pela MESMA esteira.
+ *
+ * A FRASE DO CONTRATO MUDA, E É A ÚNICA COISA QUE MUDA: era "nothing was written, and nothing was
+ * sent". Passa a dizer a verdade - nada enviado, um arquivo escrito, e aqui está ele. Uma frase que
+ * promete silêncio enquanto o comando escreve um arquivo é pior que o arquivo.
+ */
+async function mostrarInspecao(c, root, transcrito) {
+    const secoes = secoesDe(transcrito);
+    const valores = c.values?.classes;
+    const decisoes = valores ? valores.seen - valores.structure : 0;
+    const pct = valores && decisoes > 0
+        ? Math.round((valores.interpreted / decisoes) * 100)
+        : null;
+    const lidos = c.coverage?.read ?? 0;
+    const total = c.coverage?.components ?? 0;
+    const arquivo = join(root, "_synthesisui", "report.html");
+    const html = () => relatorioHtml({
+        cabecalho: {
+            repo: c.measured?.repo ?? basename(root),
+            medidoEm: c.measured?.at ?? "",
+            cli: c.ledger?.cli ?? "",
+        },
+        /**
+         * OS TRÊS NÚMEROS DA ABERTURA, e os dois primeiros carregam o denominador para virarem
+         * BARRA. O terceiro não tem fatia possível - "quantos `var()` não resolvem" não é parte de
+         * nada -, então ele fica só número, e desenhar uma barra ali inventaria uma proporção.
+         */
+        destaques: [
+            {
+                numero: `${lidos} of ${total}`,
+                rotulo: "components came out with a blueprint",
+                parte: lidos,
+                de: total,
+            },
+            ...(pct === null
+                ? []
+                : [
+                    {
+                        numero: `${pct}%`,
+                        rotulo: `of ${decisoes} style decisions carry your vocabulary`,
+                        parte: valores?.interpreted ?? 0,
+                        de: decisoes,
+                    },
+                ]),
+            {
+                numero: String(c.brokenRefs?.length ?? 0),
+                rotulo: "references that resolve to nothing",
+            },
+        ],
+        secoes,
+    });
+    console.log(section("What came out of your files"));
+    console.log(body(`${paint.strong(`${lidos} of ${total}`)} components came out with a blueprint${pct === null
+        ? ""
+        : `, and ${paint.strong(`${pct}%`)} of your ${decisoes} style decisions carry your own vocabulary`}.`));
+    /**
+     * OS DOIS BLOCOS QUE MUDAM O QUE ELE FAZ EM SEGUIDA, e eles saem do transcrito em vez de serem
+     * reescritos: a régua que os produziu é a mesma, então a tela nunca diverge do relatório.
+     */
+    for (const titulo of DECIDEM) {
+        const achada = secoes.find((s) => s.titulo === titulo);
+        if (!achada)
+            continue;
+        console.log(section(titulo));
+        for (const linha of achada.linhas)
+            console.log(linha);
+    }
+    /**
+     * O ARQUIVO SÓ NASCE SE ELE PEDIR (dono, 18/09) - e é isto que mantém `INV-INSPECT-01` de pé.
+     *
+     * A promessa que faz alguém rodar este comando sem medo é que nada acontece: ele lê, mostra, e
+     * o repositório continua exatamente como estava. Escrever o relatório por conta própria
+     * quebraria isso para TODO mundo, inclusive para quem só queria olhar - e num primeiro contato
+     * essa é a confiança inteira. Perguntando, a escrita deixa de ser nossa e passa a ser dele.
+     *
+     * SEM TERMINAL, NÃO PERGUNTA E NÃO ESCREVE: um `inspect` dentro de um pipe, de um CI ou de um
+     * agente não tem quem responda, e um default que escreve seria a mesma quebra por outra porta.
+     * É a mesma guarda que `askName` já usa.
+     */
+    console.log(section("The whole reading, in one file"));
+    console.log(body(`${secoes.length} sections did not print here - every value, every fragment, every part.`));
+    console.log(body(paint.faint("A single self-contained page in your project. Nothing is sent either way.")));
+    if (!(await quer(`    write the full report? [Y/n]: `))) {
+        console.log("");
+        console.log(body("Nothing was written, and nothing was sent."));
+        console.log("");
+        console.log(body("To let your agent ask before it invents:"));
+        console.log(body(`    ${paint.strong("npx synthesisui@latest connect")}`));
+        console.log("");
+        return;
+    }
+    await mkdir(dirname(arquivo), { recursive: true });
+    /**
+     * A PASTA SE DECLARA GERENCIADA ANTES DE RECEBER O ARQUIVO: sem isto, o HTML apareceria no
+     * `git status` de quem acabou de pedir um relatório, e não um arquivo versionado.
+     */
+    await writeGovernanceIgnore(root).catch(() => null);
+    await writeFile(arquivo, html(), "utf8");
+    console.log("");
+    console.log(body(`    ${paint.strong(relative(root, arquivo))}`));
+    console.log(body(`    ${paint.dim(`file://${arquivo}`)}`));
+    console.log("");
+    console.log(body("To let your agent ask before it invents:"));
+    console.log(body(`    ${paint.strong("npx synthesisui@latest connect")}`));
+    console.log("");
+}
+/**
+ * A PERGUNTA DE UMA TECLA, e o silêncio de quem não tem terminal.
+ *
+ * Fora de um terminal a resposta é NÃO, sempre: ninguém está lá para responder, e assumir o sim
+ * escreveria no repositório de um CI que só queria ler. Enter é sim porque a pessoa acabou de ler
+ * a oferta na linha acima - exigir uma letra para receber o que a tela ofereceu é atrito sem
+ * proteção nenhuma.
+ */
+async function quer(pergunta) {
+    if (!process.stdin.isTTY || !process.stdout.isTTY)
+        return false;
+    const { createInterface } = await import("node:readline/promises");
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    try {
+        console.log("");
+        const resposta = (await rl.question(pergunta)).trim().toLowerCase();
+        return resposta === "" || resposta === "y" || resposta === "yes";
+    }
+    catch {
+        return false;
+    }
+    finally {
+        rl.close();
+    }
+}
+/**
+ * AS SEÇÕES QUE CONTINUAM NA TELA, e o critério é um só: elas mudam o comando seguinte.
+ *
+ * Um root com três apps mede a média de três paletas, o que é diagnóstico e não sistema - e a saída
+ * já traz o `--scope`/`--usage` exato. Um `var()` que não resolve não pinta cor nenhuma no
+ * navegador dele. As outras quinze seções descrevem; estas duas pedem uma decisão.
+ */
+const DECIDEM = [
+    "This root holds several projects",
+    "These resolve to nothing",
+];
 function sayReach(c) {
     const reach = ladderReach(c.declared);
     console.log("");
@@ -4332,6 +4482,16 @@ export async function runImport(opts) {
         if (!opts.inspect)
             phase(1, 3, "Measuring the repository");
         console.log(section("Reading your project"));
+        /**
+         * A PARTIR DAQUI O `inspect` GUARDA EM VEZ DE IMPRIMIR - ver `transcript.ts`.
+         *
+         * As dezessete seções continuam sendo escritas exatamente como sempre foram; o que muda é o
+         * destino. Elas vão para o relatório, e o terminal fica com os quatro blocos que uma pessoa
+         * usa para DECIDIR. Medido na saída do `codelevel-monorepo` em 18/09: 250 linhas, das quais 94
+         * eram a mesma frase sobre nome de parte - 40% do relatório num detalhe sem ação possível.
+         */
+        if (opts.inspect)
+            ligarCaptura();
         /**
          * UMA MEDIÇÃO POR ESCOPO, E DEPOIS A FUSÃO.
          *
@@ -4448,13 +4608,8 @@ export async function runImport(opts) {
      */
     if (opts.inspect) {
         sayReach(census);
-        console.log("");
-        console.log(section("Your agent cannot ask any of this yet"));
-        console.log(body("Nothing was written, and nothing was sent."));
-        console.log("");
-        console.log(body("To let it ask before it invents:"));
-        console.log(body(`    ${paint.strong("npx synthesisui@latest connect")}`));
-        console.log("");
+        const transcrito = desligarCaptura();
+        await mostrarInspecao(census, root, transcrito);
         return;
     }
     const out = opts.census ?? join(root, "_synthesisui", "census.json");

package/dist/report-html.js

@@ -0,0 +1,394 @@
+import { FAMILY_SEAM_PREFIX } from "./fonts.js";
+import { HALOGEN_TOKENS, HALOGEN_VERSION } from "./report-theme.js";
+import { semCor } from "./transcript.js";
+/**
+ * O QUE O TERMINAL DIRIA, LIDO DE VOLTA COMO DOCUMENTO.
+ *
+ * A régua `── Título ──────` é a única marca estrutural que a saída tem, e ela é desenhada num
+ * lugar só (`section`), então é ela que separa os capítulos. Tudo antes da primeira régua é ruído
+ * de progresso e não entra: o documento começa no primeiro capítulo, não no meio do carregamento.
+ */
+export function secoesDe(linhas) {
+    const secoes = [];
+    for (const bruta of linhas) {
+        for (const linha of semCor(bruta).split("\n")) {
+            const cabeca = /^──\s(.+?)\s─*$/.exec(linha.trimEnd());
+            if (cabeca) {
+                secoes.push({ titulo: cabeca[1].trim(), linhas: [] });
+                continue;
+            }
+            if (secoes.length === 0)
+                continue;
+            secoes[secoes.length - 1].linhas.push(linha.replace(/\s+$/, ""));
+        }
+    }
+    /** Capítulo que não disse nada não vira capítulo - uma régua sozinha não é conteúdo. */
+    return secoes
+        .map((s) => ({ ...s, linhas: aparar(s.linhas) }))
+        .filter((s) => s.linhas.length > 0);
+}
+/** Tira as linhas em branco das pontas, e nunca as do meio - lá elas são respiro. */
+function aparar(linhas) {
+    let i = 0;
+    let f = linhas.length;
+    while (i < f && linhas[i].trim() === "")
+        i += 1;
+    while (f > i && linhas[f - 1].trim() === "")
+        f -= 1;
+    return linhas.slice(i, f);
+}
+function escapar(s) {
+    return s
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+export function relatorioHtml(input) {
+    const { cabecalho, destaques, secoes } = input;
+    const quando = legivel(cabecalho.medidoEm);
+    const indice = secoes
+        .map((s, i) => `<li><a href="#s${i}">${escapar(s.titulo)}</a></li>`)
+        .join("\n          ");
+    const corpo = secoes
+        .map((s, i) => `      <section id="s${i}" class="chapter" style="--ordem:${Math.min(i, 12)}">
+        <h2>${escapar(s.titulo)}</h2>
+${desenharCorpo(s)}
+      </section>`)
+        .join("\n");
+    const numeros = destaques.map(cartaoDeNumero).join("\n");
+    return `<!doctype html>
+<html lang="en" data-scheme="light">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escapar(cabecalho.repo)} - read by SynthesisUI</title>
+<style>
+${HALOGEN_TOKENS}
+</style>
+<style>
+${layout()}
+</style>
+</head>
+<body>
+  <header class="bar">
+    <div class="bar-in">
+      <div class="bar-id">
+        <p class="kicker">Read by SynthesisUI</p>
+        <p class="bar-repo">${escapar(cabecalho.repo)}</p>
+      </div>
+      <p class="meta">${escapar(quando)} &middot; CLI ${escapar(cabecalho.cli)} &middot; nothing left this machine</p>
+    </div>
+  </header>
+
+  <main class="wrap">
+    <section class="hero chapter" style="--ordem:0">
+      <h1>${escapar(cabecalho.repo)}</h1>
+      <p class="lede">This is what your own code says about itself.</p>
+      <div class="stats">
+${numeros}
+      </div>
+    </section>
+
+    <nav class="chapter" style="--ordem:1">
+      <p class="kicker">What is in here</p>
+      <ol>
+          ${indice}
+      </ol>
+    </nav>
+
+${corpo}
+
+    <footer>
+      <p>Dressed by Halogen v${HALOGEN_VERSION}, a design system from the SynthesisUI gallery.</p>
+      <p>This file lives in your project and was never sent anywhere. Re-run the command to refresh it.</p>
+    </footer>
+  </main>
+</body>
+</html>
+`;
+}
+/**
+ * O NÚMERO COM A FATIA DESENHADA - e a barra só aparece quando existe denominador medido.
+ *
+ * `aria-hidden` na barra porque ela não diz nada que o número ao lado já não diga; um leitor de
+ * tela que a anunciasse leria a mesma informação duas vezes.
+ */
+function cartaoDeNumero(d) {
+    const temBarra = typeof d.parte === "number" && typeof d.de === "number" && d.de > 0;
+    const pct = temBarra
+        ? Math.max(0, Math.min(100, Math.round(((d.parte ?? 0) / (d.de ?? 1)) * 100)))
+        : 0;
+    return `        <div class="stat">
+          <strong>${escapar(d.numero)}</strong>
+          <span>${escapar(d.rotulo)}</span>${temBarra
+        ? `
+          <div class="bar-track" aria-hidden="true"><i style="--pct:${pct}%"></i></div>`
+        : ""}
+        </div>`;
+}
+/**
+ * COMO CADA CAPÍTULO É DESENHADO - e a decisão é sobre REPETIÇÃO, não sobre o assunto.
+ *
+ * Medido no `codelevel-monorepo` em 18/09: uma única seção trazia 94 linhas com a mesma forma
+ * (`two parts named X - the second is Y`), num bloco monoespaçado onde nada se acha. Uma lista de
+ * itens repetidos é uma TABELA, e uma tabela é varrida com o olho; o bloco de texto é lido linha a
+ * linha ou não é lido.
+ *
+ * O corte é mecânico e não conhece assunto nenhum: uma família só vira tabela a partir de seis
+ * linhas irmãs, porque abaixo disso a tabela custa mais atenção do que economiza.
+ */
+function desenharCorpo(s) {
+    const familias = agrupar(s.linhas);
+    return familias
+        .map((f) => f.tipo === "tabela"
+        ? `        <details class="familia" open>
+          <summary>${escapar(f.rotulo)} <b>${f.itens.length}</b></summary>
+          <ul class="grade">
+${f.itens.map((i) => `            <li>${escapar(i)}</li>`).join("\n")}
+          </ul>
+        </details>`
+        : `        <pre>${escapar(f.itens.join("\n"))}</pre>`)
+        .join("\n");
+}
+const MINIMO_PARA_TABELA = 6;
+/**
+ * A FORMA DE UMA LINHA, sem ler o que ela diz: as palavras ficam, os nomes próprios viram `·`.
+ *
+ * É isso que faz `two parts named \`box\`` e `two parts named \`nav\`` caírem na mesma família sem
+ * ninguém escrever uma regra sobre partes - e é isso que faz a regra valer para a próxima classe de
+ * linha repetida, que ninguém ainda viu (`INV-GERAL-07`).
+ */
+function forma(linha) {
+    return linha
+        .trim()
+        .replace(/`[^`]*`/g, "·")
+        .replace(/\d+/g, "#")
+        .split(/\s+/)
+        .slice(0, 6)
+        .join(" ");
+}
+function agrupar(linhas) {
+    const saida = [];
+    let i = 0;
+    while (i < linhas.length) {
+        const atual = linhas[i];
+        if (!atual.trim()) {
+            empilharProsa(saida, atual);
+            i += 1;
+            continue;
+        }
+        const f = forma(atual);
+        let j = i;
+        const irmas = [];
+        while (j < linhas.length && linhas[j].trim() && forma(linhas[j]) === f) {
+            irmas.push(linhas[j].trim());
+            j += 1;
+        }
+        if (irmas.length >= MINIMO_PARA_TABELA) {
+            saida.push({ tipo: "tabela", rotulo: rotuloDe(f), itens: irmas });
+            i = j;
+            continue;
+        }
+        empilharProsa(saida, atual);
+        i += 1;
+    }
+    return saida.filter((f) => f.itens.some((l) => l.trim()));
+}
+function empilharProsa(saida, linha) {
+    const ultimo = saida[saida.length - 1];
+    if (ultimo && ultimo.tipo === "prosa")
+        ultimo.itens.push(linha);
+    else
+        saida.push({ tipo: "prosa", rotulo: "", itens: [linha] });
+}
+/** O rótulo da família é a própria forma, com os buracos ditos em vez de mostrados. */
+function rotuloDe(f) {
+    return f.replace(/·/g, "…").replace(/#/g, "n").trim() || "repeated lines";
+}
+/** A data em palavras. Data ilegível some da frase em vez de imprimir `Invalid Date`. */
+function legivel(iso) {
+    if (!iso || Number.isNaN(Date.parse(iso)))
+        return "just now";
+    return new Date(iso).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+        year: "numeric",
+    });
+}
+/**
+ * O LAYOUT DESTA PÁGINA, e só ele: cor, raio e fonte vêm dos tokens do halogen logo acima.
+ *
+ * A BARRA É FIXA porque os três números são a razão de a página existir - e numa leitura de
+ * dezesseis capítulos eles somem na primeira rolagem, que é quando a pessoa mais precisa deles
+ * para saber o que está olhando.
+ *
+ * O MOVIMENTO CARREGA INFORMAÇÃO: cada capítulo entra de baixo, na ordem em que a esteira o
+ * escreveu, e o atraso é a posição dele. Ele para inteiro sob `prefers-reduced-motion` - uma
+ * página que desliza dezesseis vezes são dezesseis chances de passar mal.
+ *
+ * E ela imprime: `@media print` existe porque o navegador já exporta PDF, e um relatório que sai
+ * torto no papel obriga a construir um gerador de PDF para resolver o que uma regra resolve.
+ */
+function layout() {
+    /**
+     * A COSTURA DAS FAMÍLIAS VEM DA CONST, e não do literal: renomear o prefixo em `fonts.ts` tem
+     * que alcançar esta página também. Um literal solto aqui divergiria em silêncio, que é
+     * exatamente o que o portão de `fonts.spec.ts` existe para impedir.
+     */
+    const corpo = `var(${FAMILY_SEAM_PREFIX}body, ui-sans-serif, system-ui, sans-serif)`;
+    const mono = `var(${FAMILY_SEAM_PREFIX}mono, ui-monospace, monospace)`;
+    const display = `var(${FAMILY_SEAM_PREFIX}display, inherit)`;
+    return `body {
+  margin: 0;
+  background: var(--ds-color-semantic-canvas);
+  color: var(--ds-color-semantic-foreground);
+  font-family: ${corpo};
+  font-size: 15px;
+  line-height: 1.6;
+}
+* { box-sizing: border-box; }
+
+.bar {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--ds-color-semantic-raised, var(--ds-color-semantic-surface));
+  border-bottom: 1px solid var(--ds-color-semantic-border);
+}
+.bar-in {
+  max-width: 920px;
+  margin-inline: auto;
+  padding: 12px 24px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px 24px;
+  align-items: baseline;
+  justify-content: space-between;
+}
+.bar-repo { margin: 2px 0 0; font-weight: 600; }
+.bar-id { min-width: 0; }
+
+.wrap { max-width: 920px; margin-inline: auto; padding: 0 24px 96px; }
+
+.kicker {
+  margin: 0;
+  font-family: ${mono};
+  font-size: 11px;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  color: var(--ds-color-semantic-accent);
+}
+.meta { margin: 0; color: var(--ds-color-semantic-muted); font-size: 13px; }
+
+.hero { padding: 56px 0 8px; }
+h1 {
+  margin: 10px 0 8px;
+  font-family: ${display};
+  font-size: 40px;
+  line-height: 1.1;
+  letter-spacing: -0.02em;
+}
+.lede { margin: 0 0 28px; color: var(--ds-color-semantic-muted); font-size: 17px; }
+
+.stats {
+  display: grid;
+  gap: 12px;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+}
+.stat {
+  background: var(--ds-color-semantic-surface);
+  border: 1px solid var(--ds-color-semantic-border);
+  border-radius: var(--ds-radius-lg, 14px);
+  padding: 18px 20px;
+}
+.stat strong { display: block; font-size: 28px; letter-spacing: -0.02em; }
+.stat span { display: block; margin-top: 4px; color: var(--ds-color-semantic-muted); font-size: 13px; }
+.bar-track {
+  margin-top: 14px;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--ds-color-semantic-overlay, var(--ds-color-semantic-border));
+  overflow: hidden;
+}
+.bar-track i {
+  display: block;
+  height: 100%;
+  width: var(--pct);
+  border-radius: inherit;
+  background: var(--ds-color-semantic-accent);
+  animation: crescer 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+nav { margin: 44px 0 8px; }
+nav ol { margin: 10px 0 0; padding-left: 20px; color: var(--ds-color-semantic-muted); }
+nav li { margin: 3px 0; }
+nav a { color: inherit; text-underline-offset: 3px; }
+nav a:hover { color: var(--ds-color-semantic-accent); }
+
+section.chapter {
+  background: var(--ds-color-semantic-surface);
+  border: 1px solid var(--ds-color-semantic-border);
+  border-radius: var(--ds-radius-lg, 14px);
+  padding: 24px 26px;
+  margin-top: 16px;
+  scroll-margin-top: 84px;
+}
+.hero, nav { background: none; border: 0; padding-inline: 0; }
+h2 { margin: 0 0 14px; font-size: 18px; letter-spacing: -0.01em; }
+
+pre {
+  margin: 0 0 12px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: ${mono};
+  font-size: 12.5px;
+  line-height: 1.7;
+  color: var(--ds-color-semantic-muted);
+}
+
+.familia {
+  margin: 0 0 12px;
+  border: 1px solid var(--ds-color-semantic-border);
+  border-radius: var(--ds-radius-md, 10px);
+  padding: 10px 14px;
+  background: var(--ds-color-semantic-canvas);
+}
+.familia summary {
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--ds-color-semantic-muted);
+}
+.familia summary b {
+  color: var(--ds-color-semantic-foreground);
+  font-variant-numeric: tabular-nums;
+}
+.grade {
+  list-style: none;
+  margin: 12px 0 4px;
+  padding: 0;
+  display: grid;
+  gap: 4px 20px;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  font-family: ${mono};
+  font-size: 12px;
+  color: var(--ds-color-semantic-muted);
+}
+
+footer { margin-top: 40px; color: var(--ds-color-semantic-muted); font-size: 13px; }
+
+@keyframes crescer { from { width: 0; } }
+@keyframes entrar { from { opacity: 0; transform: translateY(12px); } }
+.chapter { animation: entrar 620ms cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--ordem, 0) * 55ms); }
+
+@media (prefers-reduced-motion: reduce) {
+  .chapter, .bar-track i { animation: none; }
+}
+
+@media print {
+  .bar { position: static; }
+  nav { display: none; }
+  .stat, section.chapter { break-inside: avoid; }
+  .familia { break-inside: auto; }
+}`;
+}

package/dist/report-theme.js

@@ -0,0 +1,610 @@
+/**
+ * O HALOGEN, EMBUTIDO NO PACOTE - os VALORES dele, nunca o marcador dele.
+ *
+ * O QUE O CLIENTE GANHA: o relatório do `inspect` é desenhado por um design system de verdade, o
+ * mesmo que qualquer pessoa instala da galeria. A primeira coisa que ela vê do produto já é o
+ * produto funcionando, e não uma folha que alguém escreveu à mão para a ocasião.
+ *
+ * O ESCOPO FOI REESCRITO PARA A RAIZ, e isto é `INV-GERAL-13`: nada nosso é pedido, escrito ou
+ * sugerido dentro da árvore dele. O `tokens.css` publicado vive sob o escopo do sistema porque
+ * ele foi feito para ser INSTALADO num app; aqui ele veste um documento nosso, então as
+ * declarações passam a morar em `:root` e nenhum atributo nosso aparece no repositório de
+ * ninguém. O que atravessa é a cor, o raio e a tipografia - que é tudo o que uma página precisa.
+ *
+ * POR QUE DENTRO DO PACOTE: `inspect` não faz uma única chamada de rede, e isso é contrato
+ * (`INV-INSPECT-01`, com spec que conta os `fetch`). Buscar o CSS na hora de gerar quebraria o
+ * comando exatamente para quem tem menos motivo para confiar nele - alguém que acabou de apontar
+ * a ferramenta para o próprio repositório. Então ele vem junto, medido e congelado.
+ *
+ * COMO ATUALIZAR, quando o halogen publicar uma versão nova: baixe
+ * `https://www.synthesisui.com/api/registry/ds/halogen`, pegue `artifacts["tokens.css"]` e
+ * reescreva o escopo para a raiz como acima. É uma cópia deliberada, não uma dependência
+ * esquecida - e por isso a versão viaja ao lado, dita na própria página.
+ *
+ * O ESQUEMA: a raiz sozinha é ESCURA; `:root[data-scheme="light"]` é a clara. O relatório abre em
+ * claro por decisão dele (18/09), e o escuro continua ali para quem trocar o atributo.
+ */
+/** A versão do halogen que estas folhas descrevem - dita na página, para a divergência ser vista. */
+export const HALOGEN_VERSION = 18;
+/** `tokens.css` do halogen, com o escopo reescrito para a raiz e nada mais tocado. */
+export const HALOGEN_TOKENS = String.raw `/* 39 more tokens of this system are not emitted here: nothing in it references them. They stay in the system and arrive the moment a recipe, a utility or a component asks. */
+
+:root {
+  --ds-color-moss-400: #4f9d76;
+  --ds-color-moss-500: #3f8a66;
+  --ds-color-rose-400: #e0576a;
+  --ds-color-rose-500: #cf3f54;
+  --ds-color-veil-500: #05070ab3;
+  --ds-color-amber-400: #c9973f;
+  --ds-color-amber-500: #b3842f;
+  --ds-color-blush-400: #f79ce0;
+  --ds-color-slate-50: #ffffff;
+  --ds-color-slate-100: #f7f8f8;
+  --ds-color-slate-200: #e2e4e7;
+  --ds-color-slate-300: #d0d6e0;
+  --ds-color-slate-400: #8a8f98;
+  --ds-color-slate-500: #62666d;
+  --ds-color-slate-600: #383b3f;
+  --ds-color-slate-700: #23252a;
+  --ds-color-slate-800: #18191c;
+  --ds-color-slate-900: #0f1011;
+  --ds-color-slate-950: #08090a;
+  --ds-color-indigo-300: #a5b4ff;
+  --ds-color-indigo-400: #7c8cff;
+  --ds-color-indigo-500: #5b6cff;
+  --ds-color-semantic-info: var(--ds-color-indigo-400);
+  --ds-color-semantic-faint: var(--ds-color-slate-500);
+  --ds-color-semantic-muted: var(--ds-color-slate-400);
+  --ds-color-semantic-scrim: var(--ds-color-veil-500);
+  --ds-color-semantic-accent: var(--ds-color-blush-400);
+  --ds-color-semantic-border: var(--ds-color-slate-700);
+  --ds-color-semantic-canvas: var(--ds-color-slate-950);
+  --ds-color-semantic-danger: var(--ds-color-rose-400);
+  --ds-color-semantic-raised: var(--ds-color-slate-800);
+  --ds-color-semantic-overlay: var(--ds-color-slate-700);
+  --ds-color-semantic-primary: var(--ds-color-indigo-500);
+  --ds-color-semantic-success: var(--ds-color-moss-400);
+  --ds-color-semantic-surface: var(--ds-color-slate-900);
+  --ds-color-semantic-warning: var(--ds-color-amber-400);
+  --ds-color-semantic-foreground: var(--ds-color-slate-100);
+  --ds-color-series-1: var(--ds-color-indigo-500);
+  --ds-color-series-2: var(--ds-color-amber-500);
+  --ds-color-series-3: var(--ds-color-moss-500);
+  --ds-color-series-4: var(--ds-color-rose-500);
+  --ds-color-series-5: var(--ds-color-blush-400);
+  --ds-color-series-6: var(--ds-color-indigo-300);
+  --ds-color-series-7: var(--ds-color-moss-400);
+  --ds-color-series-8: var(--ds-color-rose-400);
+  --ds-radius-lg: 12px;
+  --ds-radius-md: 8px;
+  --ds-radius-sm: 6px;
+  --ds-radius-xs: 2px;
+  --ds-radius-full: 9999px;
+  --ds-shadow-md: 0 8px 24px #00000080;
+  --ds-shadow-sm: 0 2px 4px #00000066;
+  --ds-shadow-glow: 0 0 24px -6px #5b6cffaa;
+  --ds-shadow-ring: 0 0 0 1px #23252a inset;
+  --ds-spacing-lg: 2rem;
+  --ds-spacing-md: 1.5rem;
+  --ds-spacing-sm: 1rem;
+  --ds-spacing-xl: 3rem;
+  --ds-spacing-xs: 0.75rem;
+  --ds-spacing-2xl: 4rem;
+  --ds-spacing-2xs: 0.5rem;
+  --ds-spacing-3xl: 6rem;
+  --ds-spacing-3xs: 0.25rem;
+  --ds-typography-scale-lg-font-size: 1.25rem;
+  --ds-typography-scale-lg-line-height: 1.4;
+  --ds-typography-scale-sm-font-size: 0.875rem;
+  --ds-typography-scale-sm-line-height: 1.5;
+  --ds-typography-scale-xl-font-size: 1.5rem;
+  --ds-typography-scale-xl-line-height: 1.3;
+  --ds-typography-scale-xl-letter-spacing: -0.01em;
+  --ds-typography-scale-xs-font-size: 0.75rem;
+  --ds-typography-scale-xs-line-height: 1rem;
+  --ds-typography-scale-2xl-font-size: 2rem;
+  --ds-typography-scale-2xl-line-height: 1.2;
+  --ds-typography-scale-2xl-letter-spacing: -0.02em;
+  --ds-typography-scale-base-font-size: 1rem;
+  --ds-typography-scale-base-line-height: 1.6;
+  --ds-typography-scale-display-font-size: 4rem;
+  --ds-typography-scale-display-line-height: 1.05;
+  --ds-typography-scale-display-letter-spacing: -0.03em;
+  --ds-typography-weights-medium: 510;
+  --ds-typography-weights-regular: 400;
+  --ds-typography-weights-semibold: 590;
+  --ds-typography-families-body: "Inter Variable", sans-serif;
+  --ds-typography-families-mono: "Berkeley Mono", monospace;
+  --ds-typography-families-display: "Inter Variable", sans-serif;
+  --ds-motion-durations-base: 200ms;
+  --ds-motion-durations-fast: 120ms;
+  --ds-motion-durations-slow: 320ms;
+  --ds-motion-durations-ambient: 3.5s;
+  --ds-motion-easings-out: ease-out;
+  --ds-motion-easings-swift: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  --ds-motion-easings-standard: ease;
+  --color-info: var(--ds-color-semantic-info);
+  --color-faint: var(--ds-color-semantic-faint);
+  --color-muted: var(--ds-color-semantic-muted);
+  --color-scrim: var(--ds-color-semantic-scrim);
+  --color-accent: var(--ds-color-semantic-accent);
+  --color-border: var(--ds-color-semantic-border);
+  --color-canvas: var(--ds-color-semantic-canvas);
+  --color-danger: var(--ds-color-semantic-danger);
+  --color-raised: var(--ds-color-semantic-raised);
+  --color-overlay: var(--ds-color-semantic-overlay);
+  --color-primary: var(--ds-color-semantic-primary);
+  --color-success: var(--ds-color-semantic-success);
+  --color-surface: var(--ds-color-semantic-surface);
+  --color-warning: var(--ds-color-semantic-warning);
+  --color-foreground: var(--ds-color-semantic-foreground);
+  --color-series-1: var(--ds-color-series-1);
+  --color-series-2: var(--ds-color-series-2);
+  --color-series-3: var(--ds-color-series-3);
+  --color-series-4: var(--ds-color-series-4);
+  --color-series-5: var(--ds-color-series-5);
+  --color-series-6: var(--ds-color-series-6);
+  --color-series-7: var(--ds-color-series-7);
+  --color-series-8: var(--ds-color-series-8);
+  --spacing-lg: var(--ds-spacing-lg);
+  --spacing-md: var(--ds-spacing-md);
+  --spacing-sm: var(--ds-spacing-sm);
+  --spacing-xl: var(--ds-spacing-xl);
+  --spacing-xs: var(--ds-spacing-xs);
+  --spacing-2xl: var(--ds-spacing-2xl);
+  --spacing-2xs: var(--ds-spacing-2xs);
+  --spacing-3xl: var(--ds-spacing-3xl);
+  --spacing-3xs: var(--ds-spacing-3xs);
+  --radius-lg: var(--ds-radius-lg);
+  --radius-md: var(--ds-radius-md);
+  --radius-sm: var(--ds-radius-sm);
+  --radius-xs: var(--ds-radius-xs);
+  --radius-full: var(--ds-radius-full);
+  --shadow-md: var(--ds-shadow-md);
+  --shadow-sm: var(--ds-shadow-sm);
+  --shadow-glow: var(--ds-shadow-glow);
+  --shadow-ring: var(--ds-shadow-ring);
+  --font-body: var(--ds-typography-families-body);
+  --font-mono: var(--ds-typography-families-mono);
+  --font-display: var(--ds-typography-families-display);
+  --font-weight-medium: var(--ds-typography-weights-medium);
+  --font-weight-regular: var(--ds-typography-weights-regular);
+  --font-weight-semibold: var(--ds-typography-weights-semibold);
+  --ease-out: var(--ds-motion-easings-out);
+  --ease-swift: var(--ds-motion-easings-swift);
+  --ease-standard: var(--ds-motion-easings-standard);
+  --text-lg: var(--ds-typography-scale-lg-font-size);
+  --text-lg--line-height: var(--ds-typography-scale-lg-line-height);
+  --text-sm: var(--ds-typography-scale-sm-font-size);
+  --text-sm--line-height: var(--ds-typography-scale-sm-line-height);
+  --text-xl: var(--ds-typography-scale-xl-font-size);
+  --text-xl--line-height: var(--ds-typography-scale-xl-line-height);
+  --text-xl--letter-spacing: var(--ds-typography-scale-xl-letter-spacing);
+  --text-xs: var(--ds-typography-scale-xs-font-size);
+  --text-xs--line-height: var(--ds-typography-scale-xs-line-height);
+  --text-2xl: var(--ds-typography-scale-2xl-font-size);
+  --text-2xl--line-height: var(--ds-typography-scale-2xl-line-height);
+  --text-2xl--letter-spacing: var(--ds-typography-scale-2xl-letter-spacing);
+  --text-base: var(--ds-typography-scale-base-font-size);
+  --text-base--line-height: var(--ds-typography-scale-base-line-height);
+  --text-display: var(--ds-typography-scale-display-font-size);
+  --text-display--line-height: var(--ds-typography-scale-display-line-height);
+  --text-display--letter-spacing: var(--ds-typography-scale-display-letter-spacing);
+}
+
+@layer base {
+  :root {
+    color: var(--ds-color-semantic-foreground);
+    font-family: var(--ds-typography-families-body);
+  }
+}
+
+:root[data-scheme="light"] {
+  --ds-color-semantic-faint: var(--ds-color-slate-500);
+  --ds-color-semantic-muted: var(--ds-color-slate-600);
+  --ds-color-semantic-border: var(--ds-color-slate-300);
+  --ds-color-semantic-canvas: var(--ds-color-slate-100);
+  --ds-color-semantic-raised: var(--ds-color-slate-50);
+  --ds-color-semantic-overlay: var(--ds-color-slate-200);
+  --ds-color-semantic-surface: var(--ds-color-slate-50);
+  --ds-color-semantic-foreground: var(--ds-color-slate-900);
+}
+
+:root[data-theme="light"] {
+  --ds-color-semantic-faint: var(--ds-color-slate-500);
+  --ds-color-semantic-muted: var(--ds-color-slate-600);
+  --ds-color-semantic-border: var(--ds-color-slate-300);
+  --ds-color-semantic-canvas: var(--ds-color-slate-100);
+  --ds-color-semantic-raised: var(--ds-color-slate-50);
+  --ds-color-semantic-overlay: var(--ds-color-slate-200);
+  --ds-color-semantic-surface: var(--ds-color-slate-50);
+  --ds-color-semantic-foreground: var(--ds-color-slate-900);
+}
+
+@layer base {
+  :root :is(a[href], button, summary, [role="button"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="tab"], [role="switch"], [role="option"], [tabindex]:not([tabindex="-1"])):focus-visible {
+    outline-width: 2px;
+    outline-style: solid;
+    outline-color: var(--ds-color-semantic-primary);
+    outline-offset: 2px;
+  }
+}
+
+@layer base {
+  :root .ds-avatar { flex-shrink: 0; }
+}
+
+@layer base {
+  @media (prefers-reduced-motion: reduce) {
+    :root *, :root *::before, :root *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+}
+
+@keyframes ds-halogen-rise {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+}
+
+@keyframes ds-halogen-blink {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes ds-halogen-float {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-6px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+@keyframes ds-halogen-pulse {
+  0% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes ds-halogen-sheen {
+  to {
+    transform: translateX(120%);
+  }
+  from {
+    transform: translateX(-120%);
+  }
+}
+
+@keyframes ds-halogen-expand {
+  to {
+    opacity: 1;
+    transform: scaleX(1);
+  }
+  from {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+}
+
+@keyframes ds-halogen-slide-in {
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  from {
+    opacity: 0;
+    transform: translateX(-10px);
+  }
+}
+
+@layer base {
+  :root {
+    --animate-rise: ds-halogen-rise var(--ds-motion-durations-base, 200ms) var(--ds-motion-easings-standard, ease) both;
+    --animate-blink: ds-halogen-blink var(--ds-motion-durations-slow, 400ms) var(--ds-motion-easings-standard, ease);
+    --animate-float: ds-halogen-float var(--ds-motion-durations-ambient, 2s) var(--ds-motion-easings-gentle, ease-in-out) infinite;
+    --animate-pulse: ds-halogen-pulse var(--ds-motion-durations-ambient, 2s) var(--ds-motion-easings-gentle, ease-in-out) infinite;
+    --animate-sheen: ds-halogen-sheen var(--ds-motion-durations-ambient, 2s) var(--ds-motion-easings-gentle, ease-in-out) infinite;
+    --animate-expand: ds-halogen-expand var(--ds-motion-durations-base, 200ms) var(--ds-motion-easings-standard, ease) both;
+    --animate-slide-in: ds-halogen-slide-in var(--ds-motion-durations-base, 200ms) var(--ds-motion-easings-standard, ease) both;
+  }
+}
+
+@layer components {
+:root .ds-card {
+  padding: var(--ds-spacing-md);
+  box-shadow: var(--ds-shadow-ring);
+  transition: box-shadow var(--ds-motion-durations-base) var(--ds-motion-easings-swift);
+  border-radius: var(--ds-radius-lg);
+  background-color: var(--ds-color-semantic-surface);
+  color: inherit;
+}
+
+:root .ds-card[data-padding="none"] {
+  padding: 0;
+}
+
+:root .ds-card[data-emphasis="elevated"] {
+  box-shadow: var(--ds-shadow-md);
+  background-color: var(--ds-color-semantic-raised);
+}
+
+:root .ds-card:hover {
+  box-shadow: var(--ds-shadow-ring), var(--ds-shadow-md);
+}
+
+:root .ds-card[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-card[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-card[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-badge {
+  gap: var(--ds-spacing-3xs);
+  display: inline-flex;
+  padding: var(--ds-spacing-3xs) var(--ds-spacing-2xs);
+  font-size: var(--ds-typography-scale-xs-font-size);
+  align-items: center;
+  font-family: var(--ds-typography-families-mono);
+  line-height: var(--ds-typography-scale-xs-line-height);
+  border-radius: var(--ds-radius-sm);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: inherit;
+}
+
+:root .ds-badge[data-intent="info"] {
+  color: var(--ds-color-semantic-info);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="accent"] {
+  color: var(--ds-color-semantic-accent);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="danger"] {
+  color: var(--ds-color-semantic-danger);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="neutral"] {
+  color: var(--ds-color-semantic-muted);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="success"] {
+  color: var(--ds-color-semantic-success);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-badge[data-intent="warning"] {
+  color: var(--ds-color-semantic-warning);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-input {
+  color: var(--ds-color-semantic-foreground);
+  width: 100%;
+  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
+  font-size: var(--ds-typography-scale-sm-font-size);
+  box-shadow: var(--ds-shadow-ring);
+  font-family: var(--ds-typography-families-body);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  transition: box-shadow var(--ds-motion-durations-fast) var(--ds-motion-easings-swift);
+  border-radius: var(--ds-radius-md);
+  background-color: var(--ds-color-semantic-canvas);
+}
+
+:root .ds-input:focus-visible {
+  box-shadow: var(--ds-shadow-glow);
+}
+
+:root .ds-input[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-input[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-input[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-avatar {
+  color: var(--ds-color-semantic-foreground);
+  width: 40px;
+  height: 40px;
+  display: inline-flex;
+  font-size: var(--ds-typography-scale-sm-font-size);
+  align-items: center;
+  font-family: var(--ds-typography-families-body);
+  font-weight: var(--ds-typography-weights-medium);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  border-radius: var(--ds-radius-full);
+  justify-content: center;
+  background-color: var(--ds-color-semantic-overlay);
+}
+
+:root .ds-avatar[data-size="lg"] {
+  width: 56px;
+  height: 56px;
+  font-size: var(--ds-typography-scale-lg-font-size);
+  line-height: var(--ds-typography-scale-lg-line-height);
+}
+
+:root .ds-avatar[data-size="md"] {
+  width: 40px;
+  height: 40px;
+}
+
+:root .ds-avatar[data-size="sm"] {
+  width: 28px;
+  height: 28px;
+}
+
+:root .ds-button {
+  gap: var(--ds-spacing-2xs);
+  display: inline-flex;
+  padding: var(--ds-spacing-2xs) var(--ds-spacing-sm);
+  font-size: var(--ds-typography-scale-sm-font-size);
+  align-items: center;
+  font-family: var(--ds-typography-families-body);
+  font-weight: var(--ds-typography-weights-medium);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  transition: all var(--ds-motion-durations-fast) var(--ds-motion-easings-swift);
+  border-radius: var(--ds-radius-md);
+  justify-content: center;
+  color: inherit;
+}
+
+:root .ds-button[data-intent="ghost"] {
+  color: var(--ds-color-semantic-muted);
+}
+
+:root .ds-button[data-intent="primary"] {
+  color: var(--ds-color-semantic-canvas);
+  box-shadow: var(--ds-shadow-glow);
+  background-color: var(--ds-color-semantic-primary);
+}
+
+:root .ds-button[data-intent="secondary"] {
+  color: var(--ds-color-semantic-foreground);
+  box-shadow: var(--ds-shadow-ring);
+  background-color: var(--ds-color-slate-800);
+}
+
+:root .ds-button:hover {
+  filter: brightness(1.12);
+}
+
+:root .ds-button:active {
+  transform: translateY(1px);
+}
+
+:root .ds-button[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-button[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-button[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-button:focus-visible {
+  outline: 2px solid var(--ds-color-semantic-primary);
+  outline-offset: 2px;
+}
+
+:root .ds-select {
+  gap: var(--ds-spacing-2xs);
+  color: var(--ds-color-semantic-foreground);
+  border: 1px solid var(--ds-color-semantic-border);
+  display: inline-flex;
+  padding: var(--ds-spacing-2xs) var(--ds-spacing-xs);
+  font-size: var(--ds-typography-scale-sm-font-size);
+  align-items: center;
+  font-family: var(--ds-typography-families-body);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  transition: border-color var(--ds-motion-durations-fast) var(--ds-motion-easings-standard);
+  border-radius: var(--ds-radius-md);
+  justify-content: space-between;
+  background-color: var(--ds-color-semantic-surface);
+}
+
+:root .ds-select:focus-visible {
+  border-color: var(--ds-color-semantic-primary);
+}
+
+:root .ds-select[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-select[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-select[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-command-bar {
+  gap: var(--ds-spacing-2xs);
+  color: var(--ds-color-semantic-muted);
+  width: 100%;
+  border: 1px solid var(--ds-color-semantic-border);
+  display: flex;
+  padding: var(--ds-spacing-2xs) var(--ds-spacing-sm);
+  font-size: var(--ds-typography-scale-sm-font-size);
+  box-shadow: var(--ds-shadow-ring);
+  align-items: center;
+  font-family: var(--ds-typography-families-mono);
+  line-height: var(--ds-typography-scale-sm-line-height);
+  border-radius: var(--ds-radius-md);
+  background-color: var(--ds-color-semantic-surface);
+}
+
+:root .ds-command-bar:focus-visible {
+  box-shadow: var(--ds-shadow-glow);
+}
+
+:root .ds-command-bar[disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-command-bar[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+:root .ds-command-bar[data-disabled] {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+}`;

package/dist/transcript.js

@@ -0,0 +1,50 @@
+/**
+ * O QUE O TERMINAL TERIA IMPRIMIDO, GUARDADO EM VEZ DE MOSTRADO.
+ *
+ * O QUE O CLIENTE GANHA: a saída do `inspect` volta a caber numa tela, e nada do que ela dizia se
+ * perde - o texto inteiro vai para o relatório que ele abre quando quiser.
+ *
+ * POR QUE AQUI E NÃO EM CADA IMPRESSOR: são dezessete seções escritas em dezessete lugares, e a
+ * leitura delas é a mesma coisa que a esteira já sabe dizer. Reescrevê-las num gerador de HTML
+ * criaria duas redações da mesma medição - e no dia em que uma fosse editada, o relatório passaria
+ * a afirmar algo que o terminal não afirma mais. Capturando, existe UMA fonte: o que a esteira diz.
+ *
+ * ELE É DELIBERADAMENTE BURRO: liga, guarda, desliga. Sem filtro, sem formatação e sem saber o que
+ * é seção - quem entende do assunto é quem transforma isto em documento.
+ */
+let guardadas = null;
+let originalLog = null;
+/**
+ * A REDE DE SEGURANÇA, e ela existe por um motivo específico: uma medição que lança no meio
+ * deixaria o `console.log` desviado pelo resto do processo, e a pessoa veria o comando morrer sem
+ * uma linha de explicação. O terminal volta ao normal mesmo quando ninguém se lembra de desligar.
+ */
+process.once("exit", () => {
+    if (originalLog)
+        console.log = originalLog;
+});
+/** Começa a guardar em vez de imprimir. Chamar duas vezes não empilha - a segunda é um no-op. */
+export function ligarCaptura() {
+    if (guardadas)
+        return;
+    guardadas = [];
+    originalLog = console.log;
+    console.log = (...args) => {
+        guardadas?.push(args.map((a) => (typeof a === "string" ? a : String(a))).join(" "));
+    };
+}
+/** Devolve o terminal a quem é dele, e entrega o que foi guardado. */
+export function desligarCaptura() {
+    const linhas = guardadas ?? [];
+    if (originalLog)
+        console.log = originalLog;
+    guardadas = null;
+    originalLog = null;
+    return linhas;
+}
+/** O caractere de escape ANSI, montado por código para não viajar cru no arquivo. */
+const ESC = String.fromCharCode(27);
+/** Tira a cor: o que vai para um arquivo não carrega sequência de escape de terminal. */
+export function semCor(line) {
+    return line.split(new RegExp(`${ESC}\\[[0-9;]*m`)).join("");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.429",
+  "version": "0.16.431",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {