synthesisui 0.16.436 → 0.16.440

package/dist/commands/import.js

@@ -44,7 +44,7 @@ import { variantCallsIn } from "../doctor/variant-calls.js";
 import { transcribeVariants } from "../doctor/variant-read.js";
 import { frontierKind, packageRoot } from "../frontier-kind.js";
 import { keyframesInSheets } from "../global-keyframes.js";
-import { globalClassesWorn } from "../global-wear.js";
+import { globalClassesWorn, porNecessidade } from "../global-wear.js";
 import { withLibraryStructure } from "../library-structure.js";
 import { architectureGaps, mergeCensus } from "../merge-census.js";
 import { claimName } from "../name-claim.js";
@@ -57,6 +57,7 @@ import { phase, startProgress } from "../progress.js";
 import { repoStateOf } from "../repo-state.js";
 import { relatorioHtml, secoesDe } from "../report-html.js";
 import { abertura, aneis, historiaDeCor, oQueMuda, passos, } from "../report-insight.js";
+import { naoLido } from "../report-unread.js";
 import { runtimeDeclaredVars, runtimeDeclaredVarsIn } from "../runtime-vars.js";
 import { detectStack, resolveDeps, stackVersions } from "../stack.js";
 import { desligarCaptura, ligarCaptura } from "../transcript.js";
@@ -246,7 +247,22 @@ async function harvestOwnCss(root,
  * (dono, 04/08). O veredito de cada uma sai depois, em `judgeFragments`: pertencer a componente
  * não admitido é um motivo, não um desaparecimento.
  */
-into) {
+into, 
+/**
+ * A RAIZ DO REPOSITÓRIO, quando a medição está escopada - e ela entra SÓ pelas folhas globais.
+ *
+ * O QUE O CLIENTE GANHA (dono, 19/09): a classe que o componente dele veste é resolvida onde ela
+ * for DEFINIDA no repositório, e não só se ela morar dentro do escopo apontado. Medido nos
+ * repositórios reais: dentro do escopo de um deles existem 19 folhas globais e 7 classes
+ * aproveitáveis, enquanto o repositório inteiro declara 815 em 24 folhas - e os nomes que o
+ * componente veste e a leitura não resolvia (`d-flex`, `col-xs-12`, `icon-round`) estavam
+ * justamente do lado de fora.
+ *
+ * SÓ AS CLASSES, e esta é a linha que o parâmetro não cruza: `css` continua sendo o do escopo,
+ * porque é dele que sai a tabela de tokens DECLARADOS. Puxar a folha do repositório inteiro para
+ * lá faria o vocabulário do sistema absorver todo CSS do projeto, que é outra promessa.
+ */
+alsoGlobalsFrom) {
     /**
      * DOIS PASSES, porque o escopo de uma folha está no GRAFO e não no nome dela.
      *
@@ -261,6 +277,24 @@ into) {
         const body = await readFile(file, "utf8").catch(() => "");
         sheets.push({ file, body });
     }
+    /**
+     * AS FOLHAS DO RESTO DO REPOSITÓRIO - lidas com a MESMA régua, e nunca com uma segunda.
+     * `deForaDoEscopo` marca quais são, porque elas só podem virar classe global: nem `css`, nem
+     * ledger, nem fragmento. Duas classificações da mesma folha seriam duas verdades.
+     */
+    const deForaDoEscopo = new Set();
+    if (alsoGlobalsFrom && alsoGlobalsFrom !== root) {
+        const dentro = `${root}${sep}`;
+        for await (const file of walkAll([alsoGlobalsFrom])) {
+            if (!/\.(css|scss|sass|less)$/i.test(file))
+                continue;
+            if (file === root || file.startsWith(dentro))
+                continue;
+            const body = await readFile(file, "utf8").catch(() => "");
+            deForaDoEscopo.add(file);
+            sheets.push({ file, body });
+        }
+    }
     /** Todo caminho que alguma folha importa, resolvido como o sass resolveria. */
     const imported = new Set();
     for (const sheet of sheets)
@@ -269,8 +303,15 @@ into) {
                 imported.add(join(dirname(sheet.file), candidate));
     let css = "";
     const globals = [];
-    for (const { file, body } of sheets) {
-        css += `\n${body}`;
+    /** As de fora entram ANTES, para que uma classe do escopo ganhe dela no cascade do leitor. */
+    const ordenadas = [
+        ...sheets.filter((s) => deForaDoEscopo.has(s.file)),
+        ...sheets.filter((s) => !deForaDoEscopo.has(s.file)),
+    ];
+    for (const { file, body } of ordenadas) {
+        const fora = deForaDoEscopo.has(file);
+        if (!fora)
+            css += `\n${body}`;
         if (!body)
             continue;
         const partial = basename(file).startsWith("_");
@@ -280,8 +321,14 @@ into) {
                 ? "dead"
                 : "global";
         if (kind === "global")
-            globals.push({ file: relative(root, file), body });
-        if (!into)
+            globals.push({
+                /** O caminho de uma folha de fora se lê da RAIZ, senão ele sai cheio de `../`. */
+                file: relative(fora ? (alsoGlobalsFrom ?? root) : root, file),
+                body,
+                ...(fora ? { outside: true } : {}),
+            });
+        /** Uma folha de fora do escopo não vira fragmento: o ledger conta o que ELE mandou medir. */
+        if (fora || !into)
             continue;
         into.push({
             file: relative(root, file),
@@ -503,7 +550,7 @@ export async function takeCensus(root, opts) {
     useLiveCatalogue(fetched.ok ? asCatalogueTable(fetched.index) : null);
     /** Todo arquivo de estilo do escopo, para o ledger - ver o parâmetro `into`. */
     const styleFiles = [];
-    const { css, globals: globalSheets } = await harvestOwnCss(root, styleFiles);
+    const { css, globals: globalSheets } = await harvestOwnCss(root, styleFiles, repoRoot);
     const table = buildTable({ css, source: "yours" });
     const schemes = parseSchemeBlocks(css);
     const reports = [];
@@ -577,6 +624,16 @@ export async function takeCensus(root, opts) {
      * escreva utilitário por atacado, e existe porque um censo que dobra de tamanho em silêncio é o
      * tipo de surpresa que ninguém pede.
      */
+    /**
+     * O QUE VEIO DE FORA DO ESCOPO É DITO, e não colhido em silêncio (dono, 19/09).
+     *
+     * Ele apontou uma pasta e a leitura foi buscar a definição de classe no resto do repositório. Isso
+     * melhora o número dele, e um número que melhora sem explicação é um número em que ninguém confia.
+     */
+    const deForaDoEscopo = globalSheets.filter((g) => g.outside).length;
+    if (deForaDoEscopo > 0) {
+        console.log(body(paint.faint(`${deForaDoEscopo} stylesheets outside the folder you pointed at were read for class definitions only - a class your components wear is resolved where it is defined, and nothing from there becomes a recipe.`)));
+    }
     if (globalClasses.size > MAX_GLOBAL_CLASSES) {
         console.log(body(paint.faint(`${globalClasses.size} classes in your global sheet, and ${globalClasses.size - MAX_GLOBAL_CLASSES} of them are not travelling with this measurement - the first ${MAX_GLOBAL_CLASSES} are.`)));
     }
@@ -2052,6 +2109,8 @@ export async function takeCensus(root, opts) {
             ...globalClassesClaimed,
             ...globalClassesWorn(looks, globalClasses),
         ]),
+        /** Toda classe que a folha DELE define - ver `definedGlobal` em `judgeFragments`. */
+        definedGlobal: new Set(globalClasses.keys()),
         islandRead: islandClassesRead,
         refused: new Set(skips.map((s) => s.file)),
         /**
@@ -2149,7 +2208,9 @@ export async function takeCensus(root, opts) {
         for (const layer of look.rawLayers ?? [])
             tokens.push(...layer.classes);
         if (tokens.length > 0) {
-            valueByComponent[lookName] = accountClasses(tokens, declaredValues, answeredTokens);
+            valueByComponent[lookName] = accountClasses(tokens, declaredValues, answeredTokens, 
+            /** A MESMA resposta do julgamento por fragmento - ver `definedGlobal`. */
+            new Set(globalClasses.keys()));
         }
     }
     const valuesTotal = sumAccounts(Object.values(valueByComponent));
@@ -2619,7 +2680,10 @@ export async function takeCensus(root, opts) {
          */
         ...(globalClasses.size > 0
             ? {
-                globalClasses: Object.fromEntries([...globalClasses.entries()].slice(0, MAX_GLOBAL_CLASSES)),
+                globalClasses: Object.fromEntries(porNecessidade(globalClasses, new Set([
+                    ...globalClassesClaimed,
+                    ...globalClassesWorn(looks, globalClasses),
+                ])).slice(0, MAX_GLOBAL_CLASSES)),
             }
             : {}),
         classStyle,
@@ -3786,6 +3850,11 @@ async function mostrarInspecao(c, root, transcrito) {
          */
         abertura: abertura(c, c.measured?.repo ?? basename(root)),
         aneis: aneis(c),
+        /**
+         * QUAIS SAO OS NAO LIDOS, LOGO ABAIXO DO ANEL QUE OS ANUNCIA (dono, 19/09) - e partidos pela
+         * pergunta que decide se aquilo e' problema dele: veste um componente que ele entrega, ou nao?
+         */
+        naoLido: naoLido(c),
         cor: historiaDeCor(c),
         /**
          * O COMANDO NO TOPO E NO FIM (dono, 18/09): quem decidiu adotar no meio da leitura nao

package/dist/doctor/fragments.js

@@ -1,3 +1,4 @@
+import { arranjoSemValor } from "./value-ledger.js";
 /**
  * TODO FRAGMENTO QUE CARREGA ESTILO, com arquivo e linha.
  *
@@ -529,6 +530,7 @@ elsewhere,
  */
 forms = []) {
     const wornGlobal = elsewhere?.wornGlobal ?? new Set();
+    const definedGlobal = elsewhere?.definedGlobal ?? new Set();
     const islandRead = elsewhere?.islandRead ?? new Map();
     const refused = elsewhere?.refused ?? new Set();
     const captured = elsewhere?.keyframes ?? new Set();
@@ -645,7 +647,10 @@ forms = []) {
                 const tokens = literal.split(/\s+/).filter(Boolean);
                 const readElsewhere = tokens.length > 0 &&
                     tokens.every((tk) => STRUCTURE.has(tk) ||
+                        /** Arranjo sem valor de design - a MESMA resposta que a conta do anel dá. */
+                        arranjoSemValor(tk) ||
                         wornGlobal.has(tk) ||
+                        definedGlobal.has(tk) ||
                         islandRead.get(f.file)?.has(tk));
                 if (readElsewhere)
                     return { ...f, read: true };

package/dist/doctor/value-ledger.js

@@ -95,6 +95,37 @@ const STRUCTURAL_TOKENS = new Set([
     "peer",
     "isolate",
 ]);
+/**
+ * O ARRANJO QUE NÃO CARREGA VALOR DE DESIGN - e por isso sai do denominador (dono, 19/09).
+ *
+ * O QUE O CLIENTE GANHA: a cobertura dele para de ser descontada por `mx-auto` e `col-span-6`.
+ * Medido nos dois repositórios limpos, `mx-auto` é o utilitário que mais aparece no que sobrava
+ * como não lido - 12 ocorrências num deles, o maior item isolado da lista inteira. Centrar um
+ * bloco e dizer quantas colunas ele ocupa não são decisões de design: são arranjo, a mesma coisa
+ * que `flex-col` e `w-full`, que já saem por `STRUCTURAL_TOKENS`.
+ *
+ * O TESTE É O VALOR, e não o nome da família. Estas famílias já resolvem para propriedades que
+ * `STRUCTURAL_PROPERTIES` conhece - `gridColumn`, `gridTemplateColumns`, `order` - e o que decide
+ * é o outro lado: o valor é uma CONTAGEM (`6`, `12`) ou a palavra `auto`, nenhum dos dois sendo
+ * quantidade que alguém escolheu de uma escala. `gap-6` continua fora daqui de propósito, porque
+ * ali o número É uma escolha de escala: ele muda o ritmo da tela.
+ *
+ * A LISTA CONTINUA CONSERVADORA, pelo mesmo motivo escrito em `STRUCTURAL_TOKENS`: o que não
+ * estiver aqui cai em `unread`, que é o lado certo de errar. E ela vive NESTE arquivo, junto das
+ * outras duas, porque três fontes para "isto é arranjo?" discordariam no primeiro conserto.
+ */
+const ARRANJO_SEM_VALOR = [
+    /** Grade e ordem: o valor é uma contagem de trilhas, `auto`, `full` ou `none`. */
+    /^(col|row)-(span|start|end)-(\d+|auto|full)$/,
+    /^grid-(cols|rows)-(\d+|none|subgrid)$/,
+    /^order-(\d+|first|last|none)$/,
+    /** Margem `auto` é centralização - a única margem cujo valor não sai de escala nenhuma. */
+    /^-?m[xytblrse]?-auto$/,
+];
+/** `mx-auto` e `col-span-6` nomeiam arranjo; `gap-6` nomeia uma escolha de escala. */
+export function arranjoSemValor(utility) {
+    return ARRANJO_SEM_VALOR.some((re) => re.test(utility));
+}
 /**
  * O destino de UM token de classe. Exportado para o julgamento por valor e a triagem lerem a
  * MESMA resposta - duas cópias desta decisão é como o item 11 nasceu.
@@ -105,9 +136,21 @@ const STRUCTURAL_TOKENS = new Set([
  * disputa o que o leitor resolve sozinho. Sem o conjunto (import fresco, triagem, julgamento por
  * fragmento) a conta é a mesma de sempre.
  */
-export function destinationOf(cls, declared, answered) {
+export function destinationOf(cls, declared, answered, 
+/**
+ * AS CLASSES QUE A FOLHA DELE DEFINE - e é isto que fecha a conta com o julgamento por fragmento
+ * (dono, 19/09).
+ *
+ * Um nome como `icon-round` não é utilitário de escala nenhuma: ele é uma classe que o CSS do
+ * projeto declara, com as declarações dela na mão. Chamá-lo de não lido conta como perda uma
+ * coisa que a leitura entendeu inteira. Medido num repositório real: sem esta linha o ledger
+ * reporta 645 fragmentos com valor não lido, com ela 379 - e a conta do anel, que é esta função,
+ * ficava presa no número velho enquanto o capítulo já mostrava o novo. Dois números para a mesma
+ * pergunta na mesma página é o defeito que a página acabou de deixar de ter.
+ */
+defined) {
     const { utility } = parseClass(cls);
-    if (STRUCTURAL_TOKENS.has(utility))
+    if (STRUCTURAL_TOKENS.has(utility) || arranjoSemValor(utility))
         return "structure";
     const read = readUtility(utility, declared);
     if (read) {
@@ -118,10 +161,14 @@ export function destinationOf(cls, declared, answered) {
     /** A grafia respondida é a do código dele - com o modificador fora, como `applyAnswers` casa. */
     if (answered && (answered.has(utility) || answered.has(cls)))
         return "answered";
+    if (defined?.has(cls) || defined?.has(utility))
+        return "interpreted";
     return "unread";
 }
 /** A conta de uma lista de tokens - a soma SEMPRE fecha com `seen`, por construção. */
-export function accountClasses(tokens, declared, answered) {
+export function accountClasses(tokens, declared, answered, 
+/** As classes que a folha dele define - ver `destinationOf`. */
+defined) {
     const account = {
         seen: 0,
         interpreted: 0,
@@ -132,7 +179,7 @@ export function accountClasses(tokens, declared, answered) {
     };
     for (const cls of tokens) {
         account.seen += 1;
-        account[destinationOf(cls, declared, answered)] += 1;
+        account[destinationOf(cls, declared, answered, defined)] += 1;
     }
     return account;
 }

package/dist/global-wear.js

@@ -77,3 +77,22 @@ export function globalClassesWorn(looks, globals) {
     }
     return worn;
 }
+/**
+ * QUAIS CLASSES VIAJAM QUANDO O TETO MORDE - e a ordem é a NECESSIDADE, nunca a do arquivo.
+ *
+ * O QUE O CLIENTE GANHA: o censo continua do mesmo tamanho e passa a levar as classes que os
+ * componentes dele REALMENTE vestem. Medido num repositório real: o repositório declara 815 classes
+ * globais e o teto deixa passar 300 - escolhidas por ordem de leitura de arquivo, o que fazia a
+ * classe de um componente entregue perder o lugar para a de um relatório de teste, e o valor dela
+ * aparecia como não lido do outro lado.
+ *
+ * VESTIDA PRIMEIRO, o resto na ordem em que foi lido. Não é um corte novo: é o mesmo corte
+ * escolhendo por quem precisa.
+ */
+export function porNecessidade(classes, vestidas) {
+    const entradas = [...classes.entries()];
+    return [
+        ...entradas.filter(([nome]) => vestidas.has(nome)),
+        ...entradas.filter(([nome]) => !vestidas.has(nome)),
+    ];
+}

package/dist/install-marks.js

@@ -815,7 +815,7 @@ export const CHECKER_SINCE = "0.16.424";
  * deveriam estar lá. Quem tem censo gravado precisa de um `sync` para a fila de trabalho dele ser a
  * real; ver o livro-razão de `corpus.spec.ts`.
  */
-export const READER_SINCE = "0.16.421";
+export const READER_SINCE = "0.16.440";
 /**
  * O QUE ESTÁ INSTALADO AQUI FICOU PARA TRÁS - e as DUAS condições que fazem isso ser verdade.
  *

package/dist/report-html.js

@@ -93,7 +93,7 @@ ${layout()}
       <div class="bar-fim">
         <p class="meta">${escapar(quando)} &middot; CLI ${escapar(cabecalho.cli)} &middot; nothing left this machine</p>${input.comando
         ? `
-        <code class="comando">${escapar(input.comando)}</code>`
+        <a class="comando topo" href="${INSTALL_URL}" target="_blank" rel="noreferrer">${escapar(input.comando)}<i aria-hidden="true">\u2192</i></a>`
         : ""}
       </div>
     </div>
@@ -115,6 +115,7 @@ ${layout()}
 ${numeros}
       </div>
 ${desenharAneis(input.aneis ?? [])}
+${desenharNaoLido(input.naoLido)}
 ${desenharCor(input.cor)}
     </section>
 
@@ -208,6 +209,70 @@ function desenharAneis(aneis) {
 ${cartoes}
       </section>`;
 }
+/**
+ * O CAPÍTULO QUE RESPONDE "QUAIS SÃO OS 8%", LOGO ABAIXO DO ANEL QUE OS ANUNCIA (dono, 19/09).
+ *
+ * O QUE O CLIENTE GANHA: ele para de procurar. O anel dizia que o resto estava nomeado "nos
+ * capítulos abaixo" e os capítulos contavam outra população - medido na página dele, 143 contra
+ * 1143. Aqui as duas contas se encontram, e o não lido chega partido pela única pergunta que muda
+ * o que ele faz em seguida: isto veste um componente que eu entrego, ou não?
+ *
+ * A PILHA DE FORA VEM COM AS PASTAS. Uma frase dizendo "não afeta seus componentes" pede confiança;
+ * `_local/bkp - 872` entrega a razão junto, e ele reconhece a própria pasta sem abrir arquivo.
+ *
+ * E O QUE NÃO DÁ PARA NOMEAR É DITO. Quando o anel conta mais decisões do que este capítulo mostra
+ * com arquivo e linha, a diferença aparece em uma frase - porque a promessa quebrada de nomear é
+ * exatamente o defeito que este capítulo existe para consertar.
+ */
+function desenharNaoLido(n) {
+    if (!n || n.total === 0)
+        return "";
+    const semTexto = n.contagem.semTexto;
+    const reconciliacao = n.contagem.anel > 0
+        ? `Your components hold ${n.contagem.anel} style ${plural(n.contagem.anel, "decision")} this version did not read. Below is every unread fragment whose text we kept, split by the only question that changes what you do next: does it dress a component you ship?`
+        : `Below is every unread fragment whose text we kept, split by the only question that changes what you do next: does it dress a component you ship?`;
+    const lacuna = semTexto > 0
+        ? `        <p class="callout">${escapar(`${n.total} fragments were counted in all; ${semTexto} of them were counted without their text being kept, so for those this version can tell you how many and not which - that is our gap, not a shape of yours.`)}</p>\n`
+        : "";
+    const pastas = n.pastas.length > 0
+        ? `          <p class="pastas">${n.pastas
+            .map((p) => `<span><b>${escapar(p.pasta)}</b> ${p.fragmentos}</span>`)
+            .join("")}</p>\n`
+        : "";
+    return `      <section class="chapter nao-lido" id="not-read" style="--ordem:2">
+        <h2><span>What we could not read, and whether it touches you</span></h2>
+        <p class="callout">${escapar(reconciliacao)}</p>
+${lacuna}        <div class="pilhas">
+          <div class="pilha toca">
+            <h3>On components you ship</h3>
+            <p class="pilha-conta"><b>${n.dentro.fragmentos}</b> ${plural(n.dentro.fragmentos, "fragment")}</p>
+            <p class="pilha-peso">${escapar(n.dentro.fragmentos === 0 ? "Nothing here is waiting on us: every style decision on the components you ship was read." : "This is the pile that still stands between your report and 100%, and closing it is reading work on our side - nothing for you to change.")}</p>
+${grupos(n.dentro.grupos)}          </div>
+          <div class="pilha fora">
+            <h3>Outside what you ship</h3>
+            <p class="pilha-conta"><b>${n.fora.fragmentos}</b> ${plural(n.fora.fragmentos, "fragment")}</p>
+            <p class="pilha-peso">${escapar("These sit in files that dress no component in your system - a global sheet, a folder you do not ship, a component this scope does not admit. Reading them would not change the consistency of your design.")}</p>
+${pastas}${grupos(n.fora.grupos)}          </div>
+        </div>
+      </section>`;
+}
+/** Os grupos de uma pilha: a frase do motivo, o tamanho, e as linhas que provam. */
+function grupos(lista) {
+    if (lista.length === 0)
+        return "";
+    return `${lista
+        .map((g) => `            <div class="motivo">
+              <p><b>${g.fragmentos}</b> in ${g.arquivos} ${plural(g.arquivos, "file")} - ${escapar(g.porque)}</p>
+${g.exemplos
+        .map((e) => `              <code class="linha">${escapar(e.file)}${typeof e.line === "number" ? `:${e.line}` : ""}  ${escapar(e.text)}</code>`)
+        .join("\n")}
+            </div>`)
+        .join("\n")}\n`;
+}
+/** Singular quando é um. Um relatório que escreve "1 files" perde a autoridade na primeira linha. */
+function plural(n, palavra) {
+    return n === 1 ? palavra : `${palavra}s`;
+}
 /**
  * A HISTÓRIA DAS CORES, com a paleta desenhada do lado - as cores DELA, nos valores dela.
  *
@@ -220,7 +285,7 @@ function desenharCor(cor) {
     const amostras = cor.paleta
         .map((c) => `<i style="--amostra:${escapar(c)}" title="${escapar(c)}"></i>`)
         .join("");
-    return `      <section class="chapter cor" style="--ordem:2">
+    return `      <section class="chapter cor" style="--ordem:3">
         <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>
@@ -764,6 +829,60 @@ footer { margin-top: 40px; color: var(--ds-color-semantic-muted); font-size: 13p
 }
 .botao:hover { opacity: 0.9; }
 
+/* O COMANDO DO TOPO E' UM BOTAO: ele abre a pagina de instalacao, entao nao se comporta como
+   texto para selecionar - e a seta diz que leva a algum lugar antes de alguem descobrir clicando. */
+a.comando.topo {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none;
+  user-select: none;
+}
+a.comando.topo i { font-style: normal; color: var(--ds-color-semantic-accent); }
+a.comando.topo:hover { border-color: var(--ds-color-semantic-accent); }
+
+/* AS DUAS PILHAS DO NAO LIDO, LADO A LADO: a comparacao e' o conteudo, entao elas nao se empilham
+   enquanto houver largura - ler "isto me afeta" e "isto nao" em sequencia perde a comparacao. */
+.pilhas { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 4px; }
+@media (max-width: 860px) { .pilhas { grid-template-columns: 1fr; } }
+.pilha {
+  border: 1px solid var(--ds-color-semantic-border);
+  border-radius: var(--ds-radius-lg, 12px);
+  padding: 18px 20px;
+  min-width: 0;
+}
+.pilha.toca { border-color: var(--ds-color-semantic-accent); }
+.pilha h3 { margin: 0; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
+.pilha-conta { margin: 10px 0 6px; font-size: 14px; color: var(--ds-color-semantic-muted); }
+.pilha-conta b { font-size: 26px; letter-spacing: -0.02em; color: var(--ds-color-semantic-foreground); }
+.pilha-peso { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ds-color-semantic-muted); }
+/* AS PASTAS: o reconhecimento vem antes da explicacao - ele ve a propria pasta e ja' sabe. */
+.pastas { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
+.pastas span {
+  font-family: ${mono};
+  font-size: 12px;
+  padding: 4px 10px;
+  border-radius: var(--ds-radius-sm, 8px);
+  background: var(--ds-color-semantic-canvas);
+  border: 1px solid var(--ds-color-semantic-border);
+  color: var(--ds-color-semantic-muted);
+}
+.pastas b { color: var(--ds-color-semantic-foreground); font-weight: 600; }
+.motivo { margin: 0 0 14px; }
+.motivo p { margin: 0 0 6px; font-size: 14px; line-height: 1.5; color: var(--ds-color-semantic-muted); }
+.motivo p b { color: var(--ds-color-semantic-foreground); }
+.linha {
+  display: block;
+  font-family: ${mono};
+  font-size: 12px;
+  line-height: 1.6;
+  padding: 3px 0 3px 12px;
+  border-left: 2px solid var(--ds-color-semantic-border);
+  color: var(--ds-color-semantic-muted);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
 .lista-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
 .lista-passos li {
   border-left: 2px solid var(--ds-color-semantic-border);

package/dist/report-insight.js

@@ -39,7 +39,7 @@ export function aneis(c) {
             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.`,
+            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 - the chapter right below says where each one lives, and whether it touches a component you ship.`,
         });
     }
     return saida;

package/dist/report-unread.js

@@ -0,0 +1,144 @@
+/**
+ * O QUE A LEITURA NÃO ENTENDEU, RESPONDIDO NUMA TELA SÓ (dono, 19/09).
+ *
+ * O QUE O CLIENTE GANHA. O anel diz "92%" e manda procurar o resto "nos capítulos abaixo". Medido
+ * no relatório dele: o anel conta 143 decisões não lidas e o capítulo que deveria nomeá-las conta
+ * 1143 fragmentos - populações diferentes, e nenhuma frase ligando as duas. Quem quer saber quais
+ * são os 8% abre dezesseis capítulos e não acha. Aqui ele lê uma vez: quais, por quê, e se aquilo
+ * toca o código que ele entrega.
+ *
+ * A CLASSIFICAÇÃO É DERIVADA, NUNCA FIXADA. O que separa as duas pilhas é o que O PROJETO DELE
+ * declara: um fragmento está DENTRO quando o arquivo dele é o arquivo de um componente que o censo
+ * admite (`looks[X].api.file`), e FORA quando não é - folha global, pasta de backup, componente que
+ * o escopo não admite. Nenhum nome de pasta, de framework ou de convenção entra nesta decisão:
+ * num projeto que ninguém aqui viu, a lista de componentes é a dele, e a régua acompanha.
+ *
+ * POR QUE A SEPARAÇÃO É O PRODUTO, e não um detalhe de apresentação. "8% não lido" lê-se como
+ * dívida enquanto ninguém diz onde aquilo mora. A pilha de FORA não muda a consistência do design
+ * dele - são declarações em arquivos que não vestem componente nenhum -, e dizê-lo transforma o
+ * mesmo número em "pronto". A pilha de DENTRO é a única que ainda separa o relatório dos 100%, e é
+ * ela que vira trabalho de leitura do nosso lado.
+ */
+/**
+ * OS DOIS MOTIVOS QUE JÁ DIZEM "FORA" SEM PRECISAR DO ARQUIVO.
+ *
+ * Um componente que o escopo não admite e uma folha que build nenhum compila estão fora do que ele
+ * entrega POR DEFINIÇÃO - e nos dois casos o arquivo pode até ser de componente, o que faria a
+ * regra de caminho classificá-los errado. O motivo é mais específico que o caminho, então ele ganha.
+ */
+const FORA_POR_MOTIVO = new Set([
+    "component-not-admitted",
+    "sheet-not-imported",
+]);
+export function naoLido(c) {
+    const grupos = c.ledger?.unread ?? [];
+    if (grupos.length === 0)
+        return null;
+    const deComponente = arquivosDeComponente(c);
+    const baldes = new Map();
+    const arquivos = { dentro: new Set(), fora: new Set() };
+    const porPasta = new Map();
+    let total = 0;
+    let comTexto = 0;
+    for (const g of grupos) {
+        const itens = (g.unreadable ?? []).filter((f) => f.file && f.text);
+        const mostrar = itens.length > 0 ? itens : (g.examples ?? []);
+        /**
+         * `uses` é a contagem do ledger e ela vale mais que o tamanho da lista: a lista tem teto, e
+         * preferir o comprimento dela encolheria o total do capítulo sem avisar ninguém.
+         */
+        total += typeof g.uses === "number" ? g.uses : mostrar.length;
+        const porque = g.because ?? g.reason ?? "not interpreted";
+        /**
+         * DOIS MOTIVOS JÁ DIZEM "FORA" SEM PRECISAR DO ARQUIVO, e eles ganham do caminho: um componente
+         * que o escopo não admite e uma folha que build nenhum compila estão fora do que ele entrega
+         * por definição, e nos dois casos o arquivo PODE ser de componente.
+         */
+        const foraPorMotivo = FORA_POR_MOTIVO.has(g.reason ?? "");
+        for (const f of mostrar) {
+            if (!f.file || !f.text)
+                continue;
+            comTexto += 1;
+            /**
+             * A PILHA É DECIDIDA POR FRAGMENTO, NUNCA PELO GRUPO. Medido no repositório dele: um grupo
+             * de 54 fragmentos tinha DOIS arquivos - um componente entregue e um `.jsx` numa pasta de
+             * backup -, e decidir pelo grupo levava os 54 inteiros para a pilha que toca componente. A
+             * pessoa lia "54 esperando por nós" sobre um arquivo que ela não entrega.
+             */
+            const fora = foraPorMotivo || !deComponente.has(comEscopo(c, f.file));
+            const chave = `${fora ? "fora" : "dentro"}\u0000${porque}`;
+            let balde = baldes.get(chave);
+            if (!balde) {
+                balde = { porque, fragmentos: 0, arquivos: 0, exemplos: [], fora };
+                baldes.set(chave, balde);
+            }
+            balde.fragmentos += 1;
+            arquivos[fora ? "fora" : "dentro"].add(f.file);
+            if (fora)
+                porPasta.set(pastaDe(f.file), (porPasta.get(pastaDe(f.file)) ?? 0) + 1);
+            if (balde.exemplos.length < (fora ? 3 : 6))
+                balde.exemplos.push({
+                    file: f.file,
+                    ...(typeof f.line === "number" ? { line: f.line } : {}),
+                    text: f.text,
+                });
+        }
+    }
+    /** Quantos ARQUIVOS distintos cada grupo toca - contado do que ele realmente viu. */
+    for (const balde of baldes.values()) {
+        balde.arquivos = new Set(balde.exemplos.map((e) => e.file)).size;
+    }
+    const pilha = (fora) => {
+        const grupos = [...baldes.values()]
+            .filter((b) => b.fora === fora)
+            .map(({ fora: _, ...g }) => g)
+            .sort((a, b) => b.fragmentos - a.fragmentos);
+        return {
+            fragmentos: grupos.reduce((a, g) => a + g.fragmentos, 0),
+            arquivos: arquivos[fora ? "fora" : "dentro"].size,
+            grupos,
+        };
+    };
+    const cl = c.values?.classes;
+    const decisoes = (cl?.seen ?? 0) - (cl?.structure ?? 0);
+    return {
+        total,
+        dentro: pilha(false),
+        fora: pilha(true),
+        pastas: [...porPasta.entries()]
+            .map(([pasta, fragmentos]) => ({ pasta, fragmentos }))
+            .sort((a, b) => b.fragmentos - a.fragmentos)
+            .slice(0, 6),
+        contagem: {
+            anel: Math.max(0, decisoes - (cl?.interpreted ?? 0)),
+            nomeadas: comTexto,
+            semTexto: Math.max(0, total - comTexto),
+        },
+    };
+}
+/**
+ * OS ARQUIVOS QUE VESTEM UM COMPONENTE QUE O SISTEMA ENTREGA - e eles saem do censo, não de uma
+ * lista nossa. `looks` é o que aquele projeto declara ter; num projeto arbitrário essa é a única
+ * fonte que sabe quais arquivos importam.
+ */
+function arquivosDeComponente(c) {
+    const out = new Set();
+    for (const look of Object.values(c.looks ?? {}))
+        if (look?.api?.file)
+            out.add(look.api.file);
+    return out;
+}
+/**
+ * O CAMINHO DO FRAGMENTO É RELATIVO AO ESCOPO MEDIDO e o do componente é relativo à raiz. Comparar
+ * os dois sem o prefixo não casa NENHUM - medido no censo do cliente: 0 casam sem ele, 4 com ele.
+ */
+function comEscopo(c, file) {
+    return c.scope ? `${c.scope}/${file}` : file;
+}
+/** A pasta, com dois níveis: fundo o bastante para distinguir `_local/bkp` de `apps/landing`. */
+function pastaDe(file) {
+    const partes = file.split("/");
+    if (partes.length <= 1)
+        return ".";
+    return partes.slice(0, Math.min(2, partes.length - 1)).join("/");
+}

package/package.json

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