synthesisui 0.16.433 → 0.16.435

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, passos, } 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,13 @@ 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),
+        passos: passos(),
     });
     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,9 @@ ${desenharCor(input.cor)}
 
 ${corpo}
 
+${desenharMuda(input.muda ?? [], input.comando)}
+${desenharPassos(input.passos ?? [])}
+
     <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 +125,50 @@ ${corpo}
 </html>
 `;
 }
+/**
+ * O CAMINHO INTEIRO, numerado, com o que cada comando FAZ antes do que digitar.
+ *
+ * O botão no topo do bloco não é decoração: quem leu a conta e decidiu adotar tem um alvo único
+ * para o olho, e o passo a passo logo abaixo para quando ele perguntar "e depois?". Ele leva para a
+ * primeira linha - não para fora da página, porque a página não faz requisição nenhuma.
+ */
+function desenharPassos(passos) {
+    if (passos.length === 0)
+        return "";
+    const itens = passos
+        .map((p, i) => `          <li>
+            <div class="passo-topo"><b>${i + 1}</b><h3>${escapar(p.titulo)}</h3></div>
+            <code class="comando grande">${escapar(p.comando)}</code>
+            <p>${escapar(p.porque)}</p>
+          </li>`)
+        .join("\n");
+    return `      <section class="chapter passos" style="--ordem:12">
+        <h2><span>How to install it, start to finish</span></h2>
+        <p class="callout">Three commands, in this order. Each one says what it does before it says what to type - a command without a stated consequence is somebody pasting into their terminal on faith.</p>
+        <a class="botao" href="#passo-1">Install SynthesisUI</a>
+        <ol class="lista-passos" id="passo-1">
+${itens}
+        </ol>
+      </section>`;
+}
+/**
+ * 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,17 +419,45 @@ 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;
+  padding: 0 24px;
+  min-height: 64px;
+  display: grid;
+  grid-template-columns: 230px minmax(0, 1fr);
+  gap: 40px;
+  align-items: center;
+}
+.bar-repo { margin: 2px 0 0; font-weight: 600; }
+.bar-fim {
   display: flex;
+  align-items: center;
+  gap: 14px;
   flex-wrap: wrap;
-  gap: 8px 24px;
-  align-items: baseline;
   justify-content: space-between;
 }
-.bar-repo { margin: 2px 0 0; font-weight: 600; }
+
+/* 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 +465,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 +533,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 +545,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);
@@ -634,10 +725,45 @@ footer { margin-top: 40px; color: var(--ds-color-semantic-muted); font-size: 13p
 @keyframes girar { from { --fatia: 0%; } }
 
 @media (max-width: 900px) {
-  .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
+  .wrap, .bar-in { grid-template-columns: minmax(0, 1fr); gap: 8px; }
+  .bar-in { padding-block: 10px; }
   .lado { position: static; max-height: none; padding-bottom: 20px; }
 }
 
+/* O BOTAO: um alvo unico para quem leu a conta e decidiu. Ele leva para o primeiro passo DENTRO da
+   pagina - sair para a internet contradiria o arquivo que nao faz requisicao nenhuma. */
+.botao {
+  display: inline-block;
+  margin: 4px 0 20px;
+  padding: 12px 22px;
+  border-radius: var(--ds-radius-lg, 12px);
+  background: var(--ds-color-semantic-accent);
+  color: var(--ds-color-semantic-canvas);
+  font-weight: 600;
+  font-size: 14px;
+  text-decoration: none;
+}
+.botao:hover { opacity: 0.9; }
+
+.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);
+  padding-left: 18px;
+}
+.passo-topo { display: flex; align-items: center; gap: 10px; }
+.passo-topo b {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 12px;
+  background: var(--ds-color-semantic-accent);
+  color: var(--ds-color-semantic-canvas);
+}
+.passo-topo h3 { margin: 0; font-size: 15px; }
+.lista-passos p { margin: 10px 0 0; color: var(--ds-color-semantic-muted); font-size: 14px; }
+
 @media print {
   .bar { position: static; }
   nav { display: none; }

package/dist/report-insight.js

@@ -141,3 +141,64 @@ 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;
+}
+/**
+ * O PASSO A PASSO INTEIRO, do login ao import (pedido dele, 18/09).
+ *
+ * O QUE O CLIENTE GANHA: ela termina a leitura sabendo exatamente o que digitar, na ordem, sem
+ * abrir documentação nenhuma. Cada passo diz o que FAZ antes de dizer o que digitar - um comando
+ * sem consequência declarada é uma pessoa colando algo no terminal dela por fé.
+ *
+ * A ORDEM NÃO É GOSTO, é a única que funciona: o `connect` instala hook, ferramentas e skills, e um
+ * agente só os enxerga numa sessão iniciada DEPOIS; e o `import` precisa do token que o `login`
+ * deixa nesta máquina - sem ele a leitura sobe e morre num 401 três passos adiante.
+ *
+ * ELE É FIXO PORQUE A ESTEIRA É FIXA: estes três comandos são os mesmos em qualquer projeto, e é
+ * exatamente por isso que eles podem ser escritos aqui sem medir nada do repositório dela.
+ */
+export function passos() {
+    return [
+        {
+            comando: "npx synthesisui@latest login",
+            titulo: "Let this machine in",
+            porque: "Opens a page that already knows you and leaves a token in ~/.synthesisui/ on this computer. It is one click on a code - there is no account to fill in halfway through a terminal.",
+        },
+        {
+            comando: "npx synthesisui@latest connect",
+            titulo: "Wire your agent",
+            porque: "Installs the check that runs after every file your agent writes, the tools it can query, and the skills that know this pipeline. Nothing of your code is touched or sent. Run it before you open the agent - a session only picks these up when it starts.",
+        },
+        {
+            comando: "npx synthesisui@latest import",
+            titulo: "Turn your code into blueprints",
+            porque: "Reads the same values you saw above and writes them down as your design system, in your own vocabulary. From here your agent reads them before it writes anything, so consistency becomes something the project knows rather than something you remember.",
+        },
+    ];
+}

package/package.json

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