synthesisui 0.16.286 → 0.16.290

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/dist/token-ref.js

@@ -0,0 +1,93 @@
+/**
+ * O NOME QUE UM TOKEN DELE TEM DENTRO DO DOCUMENTO - uma regra, num lugar só.
+ *
+ * O QUE O CLIENTE GANHA: mudar um valor no Studio repinta o componente que o usa. Um ref liga os
+ * dois; um `var()` literal não liga nada - ele renderiza certo hoje e fica órfão da edição.
+ *
+ * ESTA FUNÇÃO EXISTIA DUAS VEZES, em `transcribe.ts` e em `css-modules.ts`, e as duas divergiam: a
+ * segunda não conhecia `--font-*`, então a família de fonte dele virava referência quando lida de uma
+ * classe e `var()` quando lida de uma folha - a mesma decisão dele com dois destinos, dependendo de
+ * onde a esteira olhou. Gêmeo não declarado sempre acaba assim.
+ *
+ * E O GRADIENTE ERA DECIDIDO PELO NOME. A regra reconhecia `--gradient-*`; o cliente escreveu
+ * `--grad-cool`. O escritor da plataforma reconhece pelo VALOR - `linear-gradient(…)` - e guarda em
+ * `foundations.gradients.grad-cool`, então o token TINHA casa no documento e a classe que o usa
+ * apontava para o vazio. É a lei 13 aplicada a token: a origem decide, e aqui a origem é o valor.
+ *
+ * Medido: `--grad-*` são 5 no `codelevel-ui`, `--gradient-*` são 3 no `frontend-hub`, e as duas
+ * grafias passam a chegar onde o documento as guarda.
+ */
+export function tokenRefFor(name, 
+/**
+ * O que cada token DELE vale. O mapa é o que permite reconhecer um gradiente pela forma em vez do
+ * nome; vazio, a decisão volta a ser só pelo nome, que é o comportamento de quem não tem o valor
+ * em mãos.
+ */
+declared) {
+    const bare = name.replace(/^--/, "");
+    if (bare.startsWith("color-"))
+        return refFor(bare.slice("color-".length));
+    if (bare.startsWith("radius-"))
+        return `{radius.${bare.slice(7)}}`;
+    if (bare.startsWith("spacing-"))
+        return `{spacing.${bare.slice(8)}}`;
+    if (bare.startsWith("shadow-"))
+        return `{shadow.${bare.slice(7)}}`;
+    // `--gradient-ui` e `--background-image-gradient-ui` são um token em duas grafias - o namespace de
+    // utility do Tailwind v4 embrulha o primeiro. Os dois chegam a `{gradients.ui}`.
+    if (bare.startsWith("background-image-gradient-")) {
+        return `{gradients.${bare.slice("background-image-gradient-".length)}}`;
+    }
+    if (bare.startsWith("gradient-"))
+        return `{gradients.${bare.slice(9)}}`;
+    if (bare.startsWith("text-")) {
+        /**
+         * O TOKEN COMPANHEIRO. O Tailwind v4 escreve "a altura de linha DE text-body-s" como
+         * `--text-body-s--line-height` - um duplo hífen dentro de um nome. Lido como nome de passo ele
+         * produzia `{typography.scale.body-s--line-height.fontSize}`, cujo duplo hífen nenhuma gramática
+         * de ref aceita, e a receita inteira era RECUSADA na validação (test13, 01/08). O sufixo nomeia a
+         * propriedade; o meio nomeia o passo.
+         */
+        const companion = /^text-(.+?)--(line-height|letter-spacing|font-weight)$/.exec(bare);
+        if (companion) {
+            const prop = {
+                "line-height": "lineHeight",
+                "letter-spacing": "letterSpacing",
+                "font-weight": "weight",
+            }[companion[2]];
+            return `{typography.scale.${companion[1]}.${prop}}`;
+        }
+        // Qualquer outro duplo hífen é um nome que esta gramática não segura - o `var()` literal ainda
+        // resolve contra a folha dele, e um ref inválido não ajuda ninguém.
+        if (bare.slice(5).includes("--"))
+            return `var(${name})`;
+        return `{typography.scale.${bare.slice(5)}.fontSize}`;
+    }
+    if (bare.startsWith("font-"))
+        return `{typography.families.${bare.slice(5)}}`;
+    /**
+     * O GRADIENTE PELA FORMA DO VALOR, e é a última pergunta e não a primeira.
+     *
+     * Os namespaces acima são vocabulário conhecido e ganham deste teste - `--color-brand` que valha um
+     * `linear-gradient` continua sendo cor pelo nome que ele deu. Aqui embaixo estão os nomes que a
+     * gente NÃO modela, e é onde `--grad-cool` cai. A chave é o nome dele inteiro, que é exatamente o
+     * que `gradientsFromCensus` guarda no documento.
+     */
+    const value = declared.get(name);
+    if (value && /\b(?:linear|radial|conic)-gradient\(/.test(value)) {
+        return `{gradients.${bare}}`;
+    }
+    // Um namespace que não modelamos. O `var()` literal continua sendo CSS correto contra a folha
+    // dele, e inventar um ref apontaria para nada.
+    return `var(${name})`;
+}
+/**
+ * `ocean-500` → `{color.ocean.500}`. O passo é o número final; o que vem antes é a família, hífens
+ * intactos, porque `royal-blue-500` é uma família chamada `royal-blue`.
+ */
+function refFor(name) {
+    const m = /^(.*)-(\d{2,4})$/.exec(name);
+    if (!m)
+        return `{color.${name}}`;
+    return `{color.${m[1]}.${m[2]}}`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.286",
+  "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": {