synthesisui 0.16.289 → 0.16.290

package/dist/commands/add.js

@@ -268,6 +268,8 @@ export async function add(slug, opts) {
          * repositório, e é ele que avisa quando uma delas deixa de resolver.
          */
         ...(theirVars.pointed > 0 ? { theirVars: theirVars.pointed } : {}),
+        /** Ver `RootLock.tokenMap`: o fato, ao lado do número que ele produz. */
+        ...(theirVars.pairs.length > 0 ? { tokenMap: theirVars.pairs } : {}),
         ...(scope ? { scope } : {}),
         ...(systems.length > 0 ? { scopes: systems } : {}),
         ...(usage.length > 0 ? { usage } : {}),
@@ -394,6 +396,29 @@ export async function add(slug, opts) {
      * `var(--color-ink-500)` num arquivo "gerenciado pelo synthesisui" e não tem como saber de onde
      * veio. Dito assim, ele lê a linha como o que ela é - o sistema seguindo o vocabulário dele.
      */
+    /**
+     * ELE RENOMEOU UM TOKEN, E A GENTE DIZ - antes era um silêncio que o sistema pagava.
+     *
+     * `their-vars.ts` decidiu NÃO emitir `var(--x, #valor)` justamente para não pintar o valor velho
+     * por cima de um rename dele: *"se ele renomear, quebra, e o `doctor` diz qual"* (dono, 22/08). A
+     * quebra é deliberada e continua. O que faltava era ele saber ANTES de abrir a tela e ver a cor
+     * sumida - o mapa anterior está no `.lock`, o novo acabou de ser calculado, e a diferença é uma
+     * comparação.
+     *
+     * SÓ O RENAME, e não a troca de valor: trocar o valor não quebra nada - a folha aponta para o nome
+     * dele e a cor nova passa a valer, que é o comportamento que a gente promete. Renomear é o que
+     * deixa a referência apontando para o vazio.
+     */
+    const renamed = (prev?.tokenMap ?? []).filter((before) => {
+        const now = theirVars.pairs.find((p) => p.ours === before.ours);
+        return now && now.theirs !== before.theirs;
+    });
+    if (renamed.length > 0) {
+        console.log(`  ${renamed.length} token${renamed.length === 1 ? "" : "s"} you renamed since the last install: ${renamed
+            .slice(0, 3)
+            .map((r) => `${r.theirs} → ${theirVars.pairs.find((p) => p.ours === r.ours)?.theirs ?? "?"}`)
+            .join(", ")}${renamed.length > 3 ? ", …" : ""}. The system follows the new name from here.`);
+    }
     if (theirVars.pointed > 0)
         console.log(`  ${theirVars.pointed} value${theirVars.pointed === 1 ? "" : "s"} in tokens.css now point at the name YOUR code already gives ${theirVars.pointed === 1 ? "it" : "them"} - change yours and the system follows${theirVars.pruned > 0 ? `; ${theirVars.pruned} matched but your build does not emit ${theirVars.pruned === 1 ? "that name" : "those names"}, so ${theirVars.pruned === 1 ? "it keeps" : "they keep"} the value` : ""}`);
     /**

package/dist/commands/component.js

@@ -8,6 +8,7 @@ import { hasInteractiveTemplate, interactiveTemplate, } from "../interactive-tem
 import { body, section, snippet } from "../output.js";
 import { findCollision, reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { fetchComponent, RegistryError } from "../registry.js";
+import { inTheirTongue, tongueOf } from "../their-tongue.js";
 import { readCensus, unreadComment, unreadForComponent, } from "../unread-for-component.js";
 /**
  * Writes the shared `cn.ts` next to the components, built from THIS project's
@@ -65,12 +66,41 @@ export async function component(slug, name, opts) {
     // o .tsx é materializado logo abaixo, ninguém as lê depois (medido na
     // auditoria de 16/08), e cada arquivo a mais no repo dele é superfície.
     const config = await readProjectConfig(root);
+    /**
+     * O CSS PASSA A FALAR A LÍNGUA DELE - ver `inTheirTongue`.
+     *
+     * O QUE MUDA NO ARQUIVO QUE ELE ABRE: `color: var(--ds-color-ink-900)` vira
+     * `color: var(--color-ink-900)`, o nome que o código dele já dá àquele valor. É isso que faz a
+     * nossa folha de 3945 linhas deixar de ser necessária no repositório de origem - o `globals.css`
+     * dele já declara o token, e a decisão continua sendo dele.
+     *
+     * AQUI E NÃO NO SERVIDOR, que é onde o CSS é compilado: o mapa descreve ESTE repositório. O mesmo
+     * sistema instalado em outro projeto dele não tem os mesmos nomes declarados, e traduzir lá
+     * apagaria a cor. Um projeto de destino chega sem mapa no `.lock`, nada é traduzido, e a folha
+     * continua sendo o caminho - o comando DIZ qual dos dois aconteceu.
+     */
+    const tongue = await tongueFor(root, slug);
+    const spoken = tongue ? inTheirTongue(res.css, tongue) : null;
+    const css = spoken ? spoken.css : res.css;
+    /**
+     * E ELE FICA SABENDO - traduzir em silêncio é a outra metade do mesmo erro.
+     *
+     * A última linha é a que decide se a nossa folha ainda é necessária aqui, e ela é a diferença
+     * entre "seu repositório dispensa a folha" e "quase" - dizer a primeira quando a verdade é a
+     * segunda é a promessa que quebra na tela dele.
+     */
+    if (spoken && (spoken.named > 0 || spoken.inlined > 0)) {
+        console.log(`  ${spoken.named} reference${spoken.named === 1 ? "" : "s"} now speak${spoken.named === 1 ? "s" : ""} the name YOUR code gives the value${spoken.inlined > 0 ? `, and ${spoken.inlined} carr${spoken.inlined === 1 ? "ies" : "y"} the value because your code names no token for it` : ""}.`);
+        console.log(spoken.left.length === 0
+            ? `  Nothing in this file points at our stylesheet - it renders on your own tokens alone.`
+            : `  ${spoken.left.length} still point${spoken.left.length === 1 ? "s" : ""} at our stylesheet (${spoken.left.slice(0, 3).join(", ")}${spoken.left.length > 3 ? ", …" : ""}), so tokens.css is still needed here.`);
+    }
     const artifactsAreTheProduct = opts.artifactsOnly === true || config.target !== "next";
     if (artifactsAreTheProduct) {
         const dir = join(root, "_synthesisui", "ds", slug, "components");
         await mkdir(dir, { recursive: true });
         await writeFile(join(dir, `${res.name}.json`), `${JSON.stringify(res.recipe, null, 2)}\n`, "utf8");
-        await writeFile(join(dir, `${res.name}.css`), `${res.css}\n`, "utf8");
+        await writeFile(join(dir, `${res.name}.css`), `${css}\n`, "utf8");
         console.log(`✓ ${res.name} → _synthesisui/ds/${slug}/components/${res.name}.{json,css}  (${slug} v${res.version})`);
     }
     // 2. YOUR component - a real, importable `export function <Pascal>()` in the
@@ -151,12 +181,12 @@ export async function component(slug, name, opts) {
             // template drives itself off the .ds-* classes.
             const tsx = interactiveTemplate(res.name);
             await writeFile(join(compDir, `${res.name}.tsx`), tsx, "utf8");
-            await writeFile(join(compDir, `${res.name}.css`), `${res.css}\n`, "utf8");
+            await writeFile(join(compDir, `${res.name}.css`), `${css}\n`, "utf8");
             await writeFile(join(compDir, "index.ts"), `export * from "./${res.name}";\n`, "utf8");
             filenames = [`${res.name}.tsx`, `${res.name}.css`, "index.ts"];
         }
         else {
-            const files = generateComponentFiles(slug, res.name, res.recipe, res.css, res.version, config.styles, await reactMajorOf(root), 
+            const files = generateComponentFiles(slug, res.name, res.recipe, css, res.version, config.styles, await reactMajorOf(root), 
             /**
              * THE SPELLING, FROM THE VERSION WE JUST FETCHED.
              *
@@ -246,3 +276,35 @@ export async function component(slug, name, opts) {
     }
     console.log("");
 }
+/**
+ * O VOCABULÁRIO DESTE REPOSITÓRIO, do que o `add` já deixou na pasta - ver `tongueOf`.
+ *
+ * `null` quando não há mapa: é a resposta de um projeto de destino, de um repositório que nunca
+ * buildou, ou de um install feito por um CLI anterior a 0.16.290. Nos três casos nada é traduzido e
+ * a folha instalada continua sendo o caminho, que é o comportamento de sempre.
+ */
+async function tongueFor(root, slug) {
+    const dir = join(root, "_synthesisui", "ds", slug);
+    const lock = await readFile(join(dir, ".lock"), "utf8").catch(() => null);
+    if (!lock)
+        return null;
+    let map = [];
+    let version = 0;
+    try {
+        const parsed = JSON.parse(lock);
+        map = parsed.tokenMap ?? [];
+        version = parsed.version ?? 0;
+    }
+    catch {
+        return null;
+    }
+    if (map.length === 0)
+        return null;
+    /**
+     * O VALOR COMPILADO MORA NA PASTA DA VERSÃO - a folha da raiz é um re-export de uma linha, escrito
+     * assim de propósito para que o `@import` dele nunca mude entre updates (ver `add.ts`). É de lá
+     * que sai o literal para as variáveis que não têm nome dele.
+     */
+    const installed = await readFile(join(dir, `v${version}`, "tokens.css"), "utf8").catch(() => "");
+    return tongueOf(map, installed);
+}

package/dist/install-marks.js

@@ -128,7 +128,7 @@
  * é sempre o bump deste PR - nunca o número que o `package.json` já carrega, porque alguém pode
  * publicar no meio.
  */
-export const MATERIALISER_SINCE = "0.16.285";
+export const MATERIALISER_SINCE = "0.16.290";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *

package/dist/repo-state.js

@@ -63,6 +63,15 @@ export async function repoStateOf(projectRoot, slug, cli) {
     const payload = {
         ...(typeof lock?.version === "number" ? { installed: lock.version } : {}),
         ...(lock?.adopted === true ? { adopted: true } : {}),
+        /**
+         * O MAPA, do `.lock` - ver `RepoStatePayload.tokenMap`.
+         *
+         * Lido e não recalculado: o cruzamento é caro (varre as folhas dele e o build) e já foi feito
+         * pelo `add`, que é quem tinha o payload em mãos. Aqui ele só viaja.
+         */
+        ...(lock?.tokenMap && lock.tokenMap.length > 0
+            ? { tokenMap: lock.tokenMap }
+            : {}),
         cli,
         ...(doctor?.at ? { doctorAt: doctor.at } : {}),
         ...(typeof doctor?.phantoms === "number"

package/dist/their-tongue.js

@@ -0,0 +1,47 @@
+/** `var(--ds-x)` e `var(--ds-x, fallback)` - o que a folha compilada escreve. */
+const OUR_VAR = /var\(\s*(--ds-[a-zA-Z0-9_-]+)\s*(?:,([^()]*))?\)/g;
+export function inTheirTongue(css, tongue) {
+    let named = 0;
+    let inlined = 0;
+    const left = new Set();
+    const out = css.replace(OUR_VAR, (whole, name, fallback) => {
+        const theirName = tongue.names.get(name);
+        if (theirName) {
+            named += 1;
+            /**
+             * O FALLBACK NÃO VIAJA. `var(--x, #valor)` sobreviveria a um rename DELE pintando o valor
+             * velho - a plataforma decidindo por cima da decisão dele. Se ele renomear, quebra, e o
+             * `doctor` diz qual (dono, 22/08).
+             */
+            return `var(${theirName})`;
+        }
+        const value = tongue.values.get(name);
+        if (value) {
+            inlined += 1;
+            return value;
+        }
+        left.add(name);
+        return fallback ? whole : whole;
+    });
+    return { css: out, named, inlined, left: [...left].sort() };
+}
+/**
+ * O VOCABULÁRIO DESTE REPOSITÓRIO, montado do que o `add` já deixou na pasta.
+ *
+ * `map` vem do `.lock` (`tokenMap`) e é o que a máquina dele descobriu; `declared` vem do
+ * `tokens.css` instalado, que é onde cada variável nossa tem o valor compilado. Nenhuma medição
+ * nova: as duas coisas já estão no disco.
+ */
+export function tongueOf(map, installedCss) {
+    const names = new Map(map.map((p) => [p.ours, p.theirs]));
+    const values = new Map();
+    for (const m of installedCss.matchAll(/^\s*(--ds-[a-zA-Z0-9_-]+)\s*:\s*([^;]+);/gm)) {
+        const value = m[2].trim();
+        /** Uma linha que aponta para outra variável não é um valor - seguir a cadeia é do navegador. */
+        if (value.includes("var("))
+            continue;
+        if (!values.has(m[1]))
+            values.set(m[1], value);
+    }
+    return { names, values };
+}

package/dist/their-vars.js

@@ -95,12 +95,18 @@ export async function resolvableVars(root) {
  * ou `null` quando não há build - e aí nada é reescrito.
  */
 export function pointAtTheirNames(css, theirs, resolvable) {
+    /**
+     * SEM BUILD, SEM MAPA - a mesma regra da reescrita, e pelo mesmo motivo: um repositório que nunca
+     * buildou não tem como provar o que resolve, e um par afirmado sem prova é pior que par nenhum.
+     */
     if (!resolvable || theirs.byName.size === 0)
-        return { css, pointed: 0, pruned: 0 };
+        return { css, pointed: 0, pruned: 0, pairs: [] };
     const ours = buildTable({ css, source: "installed" });
     const alias = theirNames(ours, theirs);
     let pointed = 0;
     let pruned = 0;
+    /** Ver `PointedAt.pairs`: o mapa sai do mesmo casamento que reescreve a linha. */
+    const pairs = [];
     const out = css.replace(/^(\s*)(--ds-[a-zA-Z0-9_-]+)(\s*:\s*)([^;]+);/gm, (line, indent, name, sep, value) => {
         /** Uma linha que já aponta para outra variável não é uma cópia de valor. */
         if (value.includes("var("))
@@ -116,9 +122,10 @@ export function pointAtTheirNames(css, theirs, resolvable) {
             return line;
         }
         pointed += 1;
+        pairs.push({ ours: name, theirs: theirName, value: value.trim() });
         return `${indent}${name}${sep}var(${theirName});`;
     });
-    return { css: out, pointed, pruned };
+    return { css: out, pointed, pruned, pairs };
 }
 /**
  * O PREFIXO DA NOSSA VARIÁVEL -> A FAMÍLIA, e a chave que `theirNames` devolve é `<família>:<valor>`.
@@ -142,7 +149,7 @@ const FAMILY_KIND = {
 export async function pointTokensAtTheirNames(root, payload) {
     const css = payload.artifacts["tokens.css"] ?? "";
     if (!css)
-        return { css, pointed: 0, pruned: 0 };
+        return { css, pointed: 0, pruned: 0, pairs: [] };
     const [theirs, resolvable] = await Promise.all([
         harvestTheirCss(root),
         resolvableVars(root),

package/package.json

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