synthesisui 0.16.431 → 0.16.432

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");
@@ -130,26 +135,57 @@ 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>
+          <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>`)
         .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 +204,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 +249,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) {
@@ -259,7 +315,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;
@@ -321,10 +377,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 +426,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;

package/package.json

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