synthesisui 0.16.434 → 0.16.436

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, oQueMuda } 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";
@@ -3793,6 +3793,7 @@ async function mostrarInspecao(c, root, transcrito) {
          */
         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

@@ -1,4 +1,12 @@
 import { FAMILY_SEAM_PREFIX } from "./fonts.js";
+/**
+ * A PÁGINA QUE O BOTÃO ABRE (dono, 19/09) - e ela SOMA ao passo a passo, nunca o substitui.
+ *
+ * Um endereço não é uma requisição: a página desenha inteira sem rede, e o navegador só o segue se
+ * a pessoa clicar. É por isso que ele convive com o auto-contido - e é por isso que os três
+ * comandos continuam escritos aqui dentro, para quem abrir o arquivo offline.
+ */
+const INSTALL_URL = "https://www.synthesisui.com/install";
 import { HALOGEN_TOKENS, HALOGEN_VERSION } from "./report-theme.js";
 import { semCor } from "./transcript.js";
 /**
@@ -113,6 +121,7 @@ ${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>
@@ -124,6 +133,34 @@ ${desenharMuda(input.muda ?? [], input.comando)}
 </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">
+        <div class="passos-topo">
+          <h2><span>How to install it, start to finish</span></h2>
+          <a class="botao" href="${INSTALL_URL}" target="_blank" rel="noreferrer">Open the install page</a>
+        </div>
+        <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. They are all here, so this works with no internet at all.</p>
+        <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.
  *
@@ -398,15 +435,21 @@ body {
 .bar-in {
   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; }
-.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 {
@@ -692,10 +735,54 @@ 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, no topo direito do capitulo. Ele abre a
+   pagina publica de instalacao - e isso nao quebra o auto-contido, porque um endereco so e buscado
+   se a pessoa clicar. Os tres comandos seguem escritos aqui embaixo, para quem esta sem rede. */
+.passos-topo {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+.passos-topo h2 { margin-bottom: 0; }
+.botao {
+  display: inline-block;
+  margin: 0;
+  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

@@ -169,3 +169,36 @@ export function oQueMuda(c) {
     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.434",
+  "version": "0.16.436",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {