synthesisui 0.16.433 → 0.16.434

package/dist/commands/import.js

@@ -56,7 +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 { abertura, aneis, historiaDeCor, oQueMuda } from "../report-insight.js";
 import { runtimeDeclaredVars, runtimeDeclaredVarsIn } from "../runtime-vars.js";
 import { detectStack, resolveDeps, stackVersions } from "../stack.js";
 import { desligarCaptura, ligarCaptura } from "../transcript.js";
@@ -3787,6 +3787,12 @@ async function mostrarInspecao(c, root, transcrito) {
         abertura: abertura(c, c.measured?.repo ?? basename(root)),
         aneis: aneis(c),
         cor: historiaDeCor(c),
+        /**
+         * O COMANDO NO TOPO E NO FIM (dono, 18/09): quem decidiu adotar no meio da leitura nao
+         * deveria ter que voltar ao terminal para descobrir o que digitar.
+         */
+        comando: "npx synthesisui@latest import",
+        muda: oQueMuda(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

@@ -82,7 +82,12 @@ ${layout()}
         <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 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>`
+        : ""}
+      </div>
     </div>
   </header>
 
@@ -107,6 +112,8 @@ ${desenharCor(input.cor)}
 
 ${corpo}
 
+${desenharMuda(input.muda ?? [], input.comando)}
+
     <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>
@@ -117,6 +124,24 @@ ${corpo}
 </html>
 `;
 }
+/**
+ * A ÚLTIMA COISA QUE ELA LÊ: a conta, e não mais um inventário.
+ *
+ * Um relatório que termina na décima sexta lista deixa a pessoa com o diagnóstico e sem o passo.
+ * Este capítulo diz o que muda COM OS NÚMEROS DELA e entrega o comando ao lado - a mesma linha que
+ * já está no topo, porque quem chegou até aqui não deveria ter que subir para achá-la.
+ */
+function desenharMuda(linhas, comando) {
+    if (linhas.length === 0)
+        return "";
+    return `      <section class="chapter muda" style="--ordem:12">
+        <h2><span>What changes if you bring it in</span></h2>
+${linhas.map((l) => `        <p class="callout">${escapar(l)}</p>`).join("\n")}${comando
+        ? `
+        <code class="comando grande">${escapar(comando)}</code>`
+        : ""}
+      </section>`;
+}
 /**
  * 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.
@@ -367,8 +392,11 @@ body {
   background: var(--ds-color-semantic-raised, var(--ds-color-semantic-surface));
   border-bottom: 1px solid var(--ds-color-semantic-border);
 }
+/* A BARRA ALINHA COM A COLUNA DO CONTEUDO: mesma largura maxima, mesma margem lateral. Antes ela
+   media 920px enquanto o corpo media 1200, entao o titulo do topo e o titulo da pagina comecavam em
+   colunas diferentes - a primeira coisa que o olho nota, e a mais facil de consertar. */
 .bar-in {
-  max-width: 920px;
+  max-width: 1200px;
   margin-inline: auto;
   padding: 11px 24px;
   display: flex;
@@ -378,6 +406,25 @@ body {
   justify-content: space-between;
 }
 .bar-repo { margin: 2px 0 0; font-weight: 600; }
+.bar-fim { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
+
+/* O COMANDO NO TOPO, sem rolar: quem decidiu adotar no meio da leitura nao volta para procura-lo. */
+.comando {
+  font-family: ${mono};
+  font-size: 12px;
+  padding: 6px 12px;
+  border-radius: var(--ds-radius-sm, 8px);
+  border: 1px solid var(--ds-color-semantic-border);
+  background: var(--ds-color-semantic-canvas);
+  color: var(--ds-color-semantic-foreground);
+  user-select: all;
+}
+.comando.grande {
+  display: inline-block;
+  margin-top: 14px;
+  font-size: 14px;
+  padding: 12px 18px;
+}
 .bar-id { min-width: 0; }
 
 .wrap {
@@ -385,7 +432,7 @@ body {
   margin-inline: auto;
   padding: 0 24px 96px;
   display: grid;
-  grid-template-columns: 250px minmax(0, 1fr);
+  grid-template-columns: 230px minmax(0, 1fr);
   gap: 40px;
   align-items: start;
 }
@@ -453,7 +500,7 @@ h1 {
 
 nav { margin: 44px 0 8px; }
 nav ol {
-  margin: 12px 0 0;
+  margin: 10px 0 0;
   padding: 0;
   list-style: none;
   counter-reset: capitulo;
@@ -465,10 +512,21 @@ nav li {
   counter-increment: capitulo;
   display: flex;
   align-items: baseline;
-  gap: 12px;
-  padding: 7px 10px;
+  gap: 10px;
+  padding: 5px 9px;
+  font-size: 13px;
+  line-height: 1.35;
+  border: 1px solid transparent;
   border-radius: var(--ds-radius-sm, 8px);
 }
+/* O ITEM CLICADO FICA MARCADO: sem isto a lateral e uma lista de dezesseis iguais, e a pessoa perde
+   de onde veio no instante em que rola. O foco sobrevive ao clique, entao a marca tambem. */
+nav li:has(a:focus),
+nav li:has(a:focus-visible) {
+  border-color: var(--ds-color-semantic-accent);
+  background: var(--ds-color-semantic-surface);
+}
+nav li:has(a:focus) a { color: var(--ds-color-semantic-accent); }
 nav li:hover { background: var(--ds-color-semantic-surface); }
 nav li::before {
   content: counter(capitulo);

package/dist/report-insight.js

@@ -141,3 +141,31 @@ function colidem(valores) {
     }
     return n;
 }
+/**
+ * O QUE MUDA SE ELA ADOTAR - com os números DELA, e sem uma promessa que a medição não sustente.
+ *
+ * O QUE O CLIENTE GANHA: a última coisa que ela lê não é mais um inventário, é a conta. Quantos dos
+ * valores que hoje ela repete à mão passam a ter um nome, e por que o problema para de voltar.
+ *
+ * E ELE NÃO PROMETE O QUE NÃO MEDIU: o número aqui é o que está escrito à mão HOJE, no repositório
+ * dela. Um texto que dissesse "seu design fica consistente" seria a mesma frase para todo mundo, e
+ * portanto verdade para ninguém.
+ */
+export function oQueMuda(c) {
+    const observados = c.observed ?? [];
+    if (observados.length === 0)
+        return [];
+    const aMao = observados.filter((v) => !v.token);
+    if (aMao.length === 0)
+        return [
+            "Every design value in your code already comes from a token you declare. What SynthesisUI adds here is keeping it that way: the check runs after every file your agent writes, and a value that drifts off your own scale comes back to you as a decision instead of landing silently.",
+        ];
+    const repetidos = aMao.filter((v) => v.count > 1);
+    const usos = repetidos.reduce((n, v) => n + v.count, 0);
+    const linhas = [];
+    linhas.push(`${aMao.length} of your design values are written by hand today. Importing gives each one a name in your own vocabulary, so changing it later means changing it once instead of finding every copy.`);
+    if (repetidos.length > 0)
+        linhas.push(`${repetidos.length} of those are repeated - ${usos} uses across your files. Every copy is a place the next change can be forgotten, which is how two screens end up almost the same colour.`);
+    linhas.push("And it stops coming back: once the system is in the repository, the check runs after every file your agent writes and catches a value that drifts off your own scale, before it ships.");
+    return linhas;
+}

package/package.json

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