synthesisui 0.16.431 → 0.16.433

package/dist/commands/import.js

@@ -56,6 +56,7 @@ 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 { abertura, aneis, historiaDeCor } from "../report-insight.js";
 import { runtimeDeclaredVars, runtimeDeclaredVarsIn } from "../runtime-vars.js";
 import { detectStack, resolveDeps, stackVersions } from "../stack.js";
 import { desligarCaptura, ligarCaptura } from "../transcript.js";
@@ -3778,6 +3779,14 @@ async function mostrarInspecao(c, root, transcrito) {
             },
         ],
         secoes,
+        /**
+         * O ESPELHO (dono, 18/09): a pagina abre com a MESMA regua que o produto usa - cobertura de
+         * token, o vocabulario dela, e o quanto a leitura entendeu. Nenhum numero novo: os tres saem
+         * de campos que a medicao ja produz.
+         */
+        abertura: abertura(c, c.measured?.repo ?? basename(root)),
+        aneis: aneis(c),
+        cor: historiaDeCor(c),
     });
     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

package/dist/report-html.js

@@ -47,12 +47,17 @@ function escapar(s) {
 export function relatorioHtml(input) {
     const { cabecalho, destaques, secoes } = input;
     const quando = legivel(cabecalho.medidoEm);
+    /**
+     * O ÍNDICE DIZ O TAMANHO DE CADA CAPÍTULO, e é isso que o torna uma escolha em vez de uma lista.
+     * Dezesseis links iguais obrigam a entrar para descobrir o custo; com a contagem ao lado, quem
+     * está com pressa sabe onde não entrar.
+     */
     const indice = secoes
-        .map((s, i) => `<li><a href="#s${i}">${escapar(s.titulo)}</a></li>`)
+        .map((s, i) => `<li><a href="#s${i}">${escapar(s.titulo)}</a><span>${s.linhas.filter((l) => l.trim()).length}</span></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>
+        <h2><span>${escapar(s.titulo)}</span></h2>
 ${desenharCorpo(s)}
       </section>`)
         .join("\n");
@@ -81,22 +86,25 @@ ${layout()}
     </div>
   </header>
 
-  <main class="wrap">
+  <div class="wrap">
+    <nav class="lado">
+      <p class="kicker">What is in here</p>
+      <ol>
+          ${indice}
+      </ol>
+    </nav>
+
+  <main class="fluxo">
     <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>
+      <p class="lede">${escapar(input.abertura ?? "This is what your own code says about itself.")}</p>
       <div class="stats">
 ${numeros}
       </div>
+${desenharAneis(input.aneis ?? [])}
+${desenharCor(input.cor)}
     </section>
 
-    <nav class="chapter" style="--ordem:1">
-      <p class="kicker">What is in here</p>
-      <ol>
-          ${indice}
-      </ol>
-    </nav>
-
 ${corpo}
 
     <footer>
@@ -104,10 +112,58 @@ ${corpo}
       <p>This file lives in your project and was never sent anywhere. Re-run the command to refresh it.</p>
     </footer>
   </main>
+  </div>
 </body>
 </html>
 `;
 }
+/**
+ * OS TRÊS ANÉIS DA NOSSA LEITURA DE TOKEN (pedido dele, 18/09) - e eles abrem a página porque são
+ * a régua do produto: quanto já vem de token, quanto ela declara, e quanto a leitura entendeu.
+ *
+ * O anel é um `conic-gradient` e nada mais: sem biblioteca, sem `<script>`, e sem uma requisição.
+ * A fatia é a proporção MEDIDA - e um anel só existe onde há denominador, porque desenhar a fatia
+ * de um total que ninguém contou é inventar a proporção.
+ */
+function desenharAneis(aneis) {
+    if (aneis.length === 0)
+        return "";
+    const cartoes = aneis
+        .map((a) => {
+        const pct = a.de > 0 ? Math.round((a.parte / a.de) * 100) : 0;
+        return `          <div class="anel-cartao">
+            <div class="anel" style="--fatia:${pct}%" role="img" aria-label="${escapar(`${a.titulo}: ${a.numero}`)}">
+              <b>${escapar(a.numero)}</b>
+            </div>
+            <div class="anel-texto">
+              <h3>${escapar(a.titulo)}</h3>
+              <p>${escapar(a.frase)}</p>
+            </div>
+          </div>`;
+    })
+        .join("\n");
+    return `      <section class="aneis chapter" style="--ordem:1">
+${cartoes}
+      </section>`;
+}
+/**
+ * A HISTÓRIA DAS CORES, com a paleta desenhada do lado - as cores DELA, nos valores dela.
+ *
+ * Os quadradinhos não são enfeite: uma frase sobre quarenta e sete cores colidindo é abstrata até
+ * a pessoa VER que duas casas ao lado da outra são a mesma cor.
+ */
+function desenharCor(cor) {
+    if (!cor || cor.linhas.length === 0)
+        return "";
+    const amostras = cor.paleta
+        .map((c) => `<i style="--amostra:${escapar(c)}" title="${escapar(c)}"></i>`)
+        .join("");
+    return `      <section class="chapter cor" style="--ordem:2">
+        <h2><span>Your colours</span></h2>
+${cor.linhas.map((l) => `        <p class="callout">${escapar(l)}</p>`).join("\n")}
+        <div class="paleta" aria-hidden="true">${amostras}</div>
+      </section>`;
+}
 /**
  * O NÚMERO COM A FATIA DESENHADA - e a barra só aparece quando existe denominador medido.
  *
@@ -130,26 +186,60 @@ function cartaoDeNumero(d) {
 /**
  * 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.
+ * Medido na página dele em 18/09: as 94 linhas com a mesma forma saíram em SEIS pedaços, porque o
+ * agrupamento só juntava linhas VIZINHAS e as frases de `mx-auto` caem no meio delas. Seis blocos
+ * de dez são a mesma parede com mais bordas.
+ *
+ * Agora a família é da SEÇÃO INTEIRA: irmãs distantes se encontram, e a ordem que sobrevive é a da
+ * primeira aparição - o texto continua sendo lido na ordem em que a esteira o escreveu.
  *
- * 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.
+ * E O PRIMEIRO FATO DO CAPÍTULO SOBE: a linha de abertura, que é onde mora o número, deixa de ter
+ * o peso do detalhe monoespaçado e vira o CALLOUT que a pessoa lê antes de decidir se desce.
  */
 function desenharCorpo(s) {
-    const familias = agrupar(s.linhas);
-    return familias
+    const { destaque, resto } = abertura(s.linhas);
+    const familias = agrupar(resto);
+    const corpo = familias
         .map((f) => f.tipo === "tabela"
-        ? `        <details class="familia" open>
-          <summary>${escapar(f.rotulo)} <b>${f.itens.length}</b></summary>
+        ? `        <details class="familia">
+          <summary><span>${escapar(f.rotulo)}</span> <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>`)
+        : `        <details class="tecnico">
+          <summary>${f.itens.filter((l) => l.trim()).length} lines of detail</summary>
+          <pre>${escapar(f.itens.join("\n"))}</pre>
+        </details>`)
         .join("\n");
+    return destaque
+        ? `        <p class="callout">${escapar(destaque)}</p>\n${corpo}`
+        : corpo;
+}
+/**
+ * A ABERTURA DO CAPÍTULO - a primeira linha com conteúdo, e só quando ela CARREGA UM NÚMERO.
+ *
+ * É o número que faz a frase valer o destaque: "78 of 78 components came out with a blueprint" é
+ * um fato que decide se a pessoa lê o resto. Uma abertura sem número seria só a primeira linha
+ * promovida por ser a primeira, e aí o destaque deixaria de significar alguma coisa.
+ */
+function abertura(linhas) {
+    const i = linhas.findIndex((l) => l.trim());
+    if (i < 0)
+        return { destaque: null, resto: linhas };
+    const primeira = linhas[i].trim();
+    if (!/\d/.test(primeira) || primeira.length > 240)
+        return { destaque: null, resto: linhas };
+    /**
+     * E ELA NÃO PODE SER MEMBRO DE UMA FAMÍLIA. Um capítulo que abre com a primeira de noventa
+     * linhas iguais promoveria uma irmã qualquer a conclusão, e ainda tiraria uma da contagem -
+     * duas mentiras pelo preço de uma. O destaque é para o fato ÚNICO.
+     */
+    const f = forma(primeira);
+    const irmas = linhas.filter((l) => l.trim() && forma(l) === f).length;
+    if (irmas >= MINIMO_PARA_TABELA)
+        return { destaque: null, resto: linhas };
+    return { destaque: primeira, resto: linhas.slice(i + 1) };
 }
 const MINIMO_PARA_TABELA = 6;
 /**
@@ -168,30 +258,41 @@ function forma(linha) {
         .slice(0, 6)
         .join(" ");
 }
+/**
+ * AGRUPA A SEÇÃO INTEIRA, e a ordem é a da PRIMEIRA APARIÇÃO de cada forma.
+ *
+ * Uma varredura só: cada linha entra no balde da forma dela, e os baldes saem na ordem em que
+ * nasceram. Quem tem irmãs suficientes vira família; quem não tem volta para a prosa, no lugar
+ * onde estava. O que a pessoa lê continua sendo o texto da esteira, na ordem da esteira.
+ */
 function agrupar(linhas) {
-    const saida = [];
-    let i = 0;
-    while (i < linhas.length) {
-        const atual = linhas[i];
-        if (!atual.trim()) {
-            empilharProsa(saida, atual);
-            i += 1;
+    const contagem = new Map();
+    for (const l of linhas) {
+        if (!l.trim())
             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;
+        const f = forma(l);
+        contagem.set(f, (contagem.get(f) ?? 0) + 1);
+    }
+    const saida = [];
+    const familiaDe = new Map();
+    for (const l of linhas) {
+        const f = l.trim() ? forma(l) : "";
+        if (l.trim() && (contagem.get(f) ?? 0) >= MINIMO_PARA_TABELA) {
+            const existente = familiaDe.get(f);
+            if (existente) {
+                existente.itens.push(l.trim());
+                continue;
+            }
+            const nova = {
+                tipo: "tabela",
+                rotulo: rotuloDe(f),
+                itens: [l.trim()],
+            };
+            familiaDe.set(f, nova);
+            saida.push(nova);
             continue;
         }
-        empilharProsa(saida, atual);
-        i += 1;
+        empilharProsa(saida, l);
     }
     return saida.filter((f) => f.itens.some((l) => l.trim()));
 }
@@ -202,9 +303,18 @@ function empilharProsa(saida, 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. */
+/**
+ * O RÓTULO DA FAMÍLIA - uma frase que se lê, e não a forma crua.
+ *
+ * `two parts named · - the second is ·` saía como `two parts named … - the 10`: reticência solta,
+ * minúscula, e sem dizer o que aquilo é. O rótulo agora é a parte ESTÁVEL da frase - o que todas as
+ * irmãs têm em comum - cortada no primeiro buraco e começando com maiúscula.
+ */
 function rotuloDe(f) {
-    return f.replace(/·/g, "…").replace(/#/g, "n").trim() || "repeated lines";
+    const estavel = f.split("·")[0].replace(/#/g, "n").trim();
+    const limpo = estavel.replace(/[\s\-–—:,]+$/, "");
+    const frase = limpo || "Repeated lines";
+    return frase.charAt(0).toUpperCase() + frase.slice(1);
 }
 /** A data em palavras. Data ilegível some da frase em vez de imprimir `Invalid Date`. */
 function legivel(iso) {
@@ -239,7 +349,8 @@ function layout() {
     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 {
+    return `html { scroll-behavior: smooth; }
+body {
   margin: 0;
   background: var(--ds-color-semantic-canvas);
   color: var(--ds-color-semantic-foreground);
@@ -259,7 +370,7 @@ function layout() {
 .bar-in {
   max-width: 920px;
   margin-inline: auto;
-  padding: 12px 24px;
+  padding: 11px 24px;
   display: flex;
   flex-wrap: wrap;
   gap: 8px 24px;
@@ -269,7 +380,27 @@ function layout() {
 .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; }
+.wrap {
+  max-width: 1200px;
+  margin-inline: auto;
+  padding: 0 24px 96px;
+  display: grid;
+  grid-template-columns: 250px minmax(0, 1fr);
+  gap: 40px;
+  align-items: start;
+}
+.fluxo { min-width: 0; }
+
+/* A LATERAL SEGURA A ROLAGEM INTEIRA: quem esta no capitulo doze pula para o tres sem subir, que
+   era o que a lista no topo obrigava. Em tela estreita ela vira topo - uma coluna de 250px num
+   celular come metade da leitura. */
+.lado {
+  position: sticky;
+  top: 76px;
+  max-height: calc(100vh - 100px);
+  overflow: auto;
+  padding: 20px 0 0;
+}
 
 .kicker {
   margin: 0;
@@ -321,10 +452,45 @@ h1 {
 }
 
 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); }
+nav ol {
+  margin: 12px 0 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: capitulo;
+  color: var(--ds-color-semantic-muted);
+  display: grid;
+  gap: 1px;
+}
+nav li {
+  counter-increment: capitulo;
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 7px 10px;
+  border-radius: var(--ds-radius-sm, 8px);
+}
+nav li:hover { background: var(--ds-color-semantic-surface); }
+nav li::before {
+  content: counter(capitulo);
+  min-width: 18px;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--ds-color-semantic-faint);
+}
+nav a { color: inherit; text-decoration: none; }
+nav li:hover a { color: var(--ds-color-semantic-accent); }
+/* A regua que sobra entre o nome e a contagem - sem ela os numeros flutuam soltos. */
+nav a::after {
+  content: "";
+  display: inline-block;
+  width: 100%;
+}
+nav li > span {
+  margin-left: auto;
+  font-variant-numeric: tabular-nums;
+  font-size: 12px;
+  color: var(--ds-color-semantic-faint);
+}
 
 section.chapter {
   background: var(--ds-color-semantic-surface);
@@ -335,7 +501,35 @@ section.chapter {
   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; }
+/* O TITULO DO CAPITULO SEGURA O TOPO ENQUANTO O CAPITULO PASSA - e e assim que a pessoa sempre
+   sabe o que esta lendo, sem uma linha de script. Um capitulo de cem linhas rolava ate o fim sem
+   nada na tela dizendo de qual dos dezesseis ele era. O deslocamento e a altura da barra: eles se
+   encostam em vez de se sobrepor, e o segundo empurra o primeiro so quando chega a vez dele. */
+h2 {
+  position: sticky;
+  top: 60px;
+  z-index: 5;
+  margin: -24px -26px 14px;
+  padding: 14px 26px 12px;
+  font-size: 18px;
+  letter-spacing: -0.01em;
+  background: var(--ds-color-semantic-surface);
+  border-bottom: 1px solid var(--ds-color-semantic-border);
+  border-radius: var(--ds-radius-lg, 14px) var(--ds-radius-lg, 14px) 0 0;
+}
+h2 span { display: block; }
+
+/* O PRIMEIRO FATO DO CAPITULO, no peso de quem decide se vale descer. Ele e prosa, nao codigo -
+   entao sai do monoespacado e ganha a regua da esquerda, que e a unica marca do documento que diz
+   isto aqui e a conclusao, o resto e a evidencia. */
+.callout {
+  margin: 0 0 16px;
+  padding: 2px 0 2px 16px;
+  border-left: 2px solid var(--ds-color-semantic-accent);
+  font-size: 15.5px;
+  line-height: 1.55;
+  color: var(--ds-color-semantic-foreground);
+}
 
 pre {
   margin: 0 0 12px;
@@ -382,7 +576,66 @@ footer { margin-top: 40px; color: var(--ds-color-semantic-muted); font-size: 13p
 .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; }
+  html { scroll-behavior: auto; }
+  .chapter, .bar-track i, .anel { animation: none; }
+}
+
+/* OS ANEIS: um gradiente conico e mais nada - sem biblioteca e sem script, que e o contrato. */
+.aneis {
+  display: grid;
+  gap: 18px;
+  margin-top: 16px;
+}
+.anel-cartao { display: flex; gap: 18px; align-items: center; }
+.anel {
+  flex: 0 0 auto;
+  width: 84px;
+  height: 84px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: conic-gradient(
+    var(--ds-color-semantic-accent) var(--fatia),
+    var(--ds-color-semantic-overlay, var(--ds-color-semantic-border)) 0
+  );
+  animation: girar 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+.anel b {
+  width: 62px;
+  height: 62px;
+  border-radius: 50%;
+  background: var(--ds-color-semantic-surface);
+  display: grid;
+  place-items: center;
+  font-size: 15px;
+  font-variant-numeric: tabular-nums;
+}
+.anel-texto h3 { margin: 0 0 4px; font-size: 15px; }
+.anel-texto p { margin: 0; color: var(--ds-color-semantic-muted); font-size: 14px; }
+
+.paleta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
+.paleta i {
+  width: 30px;
+  height: 30px;
+  border-radius: var(--ds-radius-sm, 8px);
+  background: var(--amostra);
+  border: 1px solid var(--ds-color-semantic-border);
+}
+
+/* O DETALHE TECNICO NASCE FECHADO: ele e a evidencia, nao a conclusao. */
+.tecnico { margin: 0 0 12px; }
+.tecnico summary {
+  cursor: pointer;
+  font-size: 13px;
+  color: var(--ds-color-semantic-faint);
+}
+.tecnico pre { margin-top: 10px; }
+
+@keyframes girar { from { --fatia: 0%; } }
+
+@media (max-width: 900px) {
+  .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
+  .lado { position: static; max-height: none; padding-bottom: 20px; }
 }
 
 @media print {

package/dist/report-insight.js

@@ -0,0 +1,143 @@
+import { deltaE, isNearDuplicate } from "./doctor/color-distance.js";
+/**
+ * OS TRÊS ANÉIS QUE ABREM A PÁGINA (pedido dele, 18/09) - e são os três da nossa própria leitura de
+ * token: cobertura, quanto ela declara, e consistência.
+ *
+ * Um anel só nasce quando existe denominador MEDIDO. Sem ele o número fica sozinho: desenhar uma
+ * fatia sobre um total que ninguém contou é inventar a proporção, que é o defeito que a barra da
+ * plataforma já cometeu uma vez.
+ */
+export function aneis(c) {
+    const saida = [];
+    const observados = c.observed ?? [];
+    if (observados.length > 0) {
+        const comNome = observados.filter((v) => v.token).length;
+        saida.push({
+            titulo: "From your tokens",
+            numero: `${pct(comNome, observados.length)}%`,
+            parte: comNome,
+            de: observados.length,
+            frase: `${comNome} of the ${observados.length} design values in your code already have a name in your own system. The other ${observados.length - comNome} are written by hand, so changing one means finding every copy.`,
+        });
+    }
+    const declarados = Object.keys(c.declared ?? {}).length;
+    if (declarados > 0 && observados.length > 0) {
+        const familias = porFamilia(observados);
+        saida.push({
+            titulo: "Your vocabulary",
+            numero: String(declarados),
+            parte: Math.min(declarados, observados.length),
+            de: observados.length,
+            frase: `You declare ${declarados} tokens today${familias ? `, and the values they cover are ${familias}` : ""}. These are your names, and they travel unchanged.`,
+        });
+    }
+    const cl = c.values?.classes;
+    if (cl && cl.seen > cl.structure) {
+        const decisoes = cl.seen - cl.structure;
+        saida.push({
+            titulo: "What we could read",
+            numero: `${pct(cl.interpreted, decisoes)}%`,
+            parte: cl.interpreted,
+            de: decisoes,
+            frase: `Of the ${decisoes} style decisions in your components, we understood ${cl.interpreted}. The remaining ${decisoes - cl.interpreted} are shapes this version does not read yet - they are named in the chapters below, with the file and line.`,
+        });
+    }
+    return saida;
+}
+/** As famílias com valor, em palavras: "456 colour, 210 spacing". Vazio quando não há o que dizer. */
+function porFamilia(observados) {
+    const nomes = {
+        color: "colour",
+        spacing: "spacing",
+        radius: "radius",
+        font: "type",
+        motion: "motion",
+    };
+    const conta = new Map();
+    for (const v of observados)
+        conta.set(v.kind, (conta.get(v.kind) ?? 0) + 1);
+    const partes = [...conta.entries()]
+        .sort((a, b) => b[1] - a[1])
+        .map(([k, n]) => `${n} ${nomes[k] ?? k}`);
+    return partes.join(", ");
+}
+function pct(parte, de) {
+    if (de <= 0)
+        return 0;
+    return Math.max(0, Math.min(100, Math.round((parte / de) * 100)));
+}
+/**
+ * O PARÁGRAFO DE ABERTURA - o que foi encontrado, em linguagem de quem não abriu o código.
+ *
+ * Montado dos NÚMEROS, nunca de um modelo: ele muda quando o repositório muda, e é verdade em
+ * qualquer projeto - inclusive num que ninguém aqui jamais viu. Um texto fixo com números colados
+ * seria a mesma frase mentindo em metade dos casos.
+ */
+export function abertura(c, repo) {
+    const observados = c.observed ?? [];
+    const comNome = observados.filter((v) => v.token).length;
+    const total = c.coverage?.components ?? 0;
+    const frases = [];
+    if (total > 0)
+        frases.push(`We read ${total} component${total === 1 ? "" : "s"} in ${repo} and wrote down how each one is built.`);
+    if (observados.length > 0)
+        frases.push(comNome === 0
+            ? `Every one of the ${observados.length} design values we found is written by hand - there is no token behind any of them yet.`
+            : `Of the ${observados.length} design values we found, ${comNome} already come from a token you declare, and ${observados.length - comNome} are still written by hand.`);
+    frases.push("Nothing below is a rule we brought. It is what your own files already do, counted.");
+    return frases.join(" ");
+}
+/**
+ * A HISTÓRIA DAS CORES - a paleta, as que colidem, e o contraste do que dá para checar.
+ *
+ * COLISÃO NÃO É ERRO, e a frase diz isso: duas cores a menos de um passo perceptível uma da outra
+ * são indistinguíveis na tela, então manter as duas custa uma decisão e não entrega nenhuma. Quem
+ * decide se elas viram uma é ela.
+ *
+ * O CONTRASTE É A ÚNICA COISA AQUI COM VEREDITO, porque `4.5:1` não é régua nossa sobre o gosto
+ * dela - é o padrão publicado sobre o texto ser legível. E o relatório diz QUANTOS pares conseguiu
+ * checar: onde a leitura não enxerga frente e fundo juntos, ele declara a lacuna em vez de dar uma
+ * nota que não mediu.
+ */
+export function historiaDeCor(c, pares = []) {
+    const cores = (c.observed ?? [])
+        .filter((v) => v.kind === "color")
+        .sort((a, b) => b.count - a.count);
+    if (cores.length === 0)
+        return { linhas: [], paleta: [] };
+    const linhas = [];
+    const comNome = cores.filter((v) => v.token).length;
+    linhas.push(`You paint with ${cores.length} distinct colours, and ${comNome} of them already have a name in your system.`);
+    const colisoes = colidem(cores.map((v) => v.value));
+    if (colisoes > 0)
+        linhas.push(`${colisoes} of them sit within one perceptible step of another colour you also use - close enough that the eye reads them as the same. Keeping both costs a decision and delivers no difference; whether they become one is yours to say.`);
+    else
+        linhas.push("No two of them are close enough to be mistaken for each other - every colour you keep is a colour someone can tell apart.");
+    if (pares.length === 0) {
+        linhas.push("Contrast was not checked: nothing in the files puts a text colour and a background together in a way this reading can see. It needs both sides of a pair, and that only shows up once components are imported.");
+    }
+    else {
+        const baixos = pares.filter((p) => p.razao < 4.5);
+        linhas.push(baixos.length === 0
+            ? `All ${pares.length} text-on-background pairs we could check reach 4.5:1, the published floor for body text.`
+            : `${baixos.length} of the ${pares.length} text-on-background pairs we could check fall below 4.5:1, the published floor for body text - the lowest is ${baixos[0].razao.toFixed(2)}:1. Below that, people with low vision stop being able to read it.`);
+    }
+    return { linhas, paleta: cores.slice(0, 24).map((v) => v.value) };
+}
+/** Quantas cores têm ao menos uma vizinha indistinguível. Conta CORES, nunca pares. */
+function colidem(valores) {
+    const hex = valores.filter((v) => /^#[0-9a-fA-F]{3,8}$/.test(v));
+    let n = 0;
+    for (let i = 0; i < hex.length; i += 1) {
+        for (let j = 0; j < hex.length; j += 1) {
+            if (i === j)
+                continue;
+            if (isNearDuplicate(hex[i], hex[j]) ||
+                (deltaE(hex[i], hex[j]) ?? 99) < 2) {
+                n += 1;
+                break;
+            }
+        }
+    }
+    return n;
+}

package/package.json

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