synthesisui 0.16.458 → 0.16.459

package/dist/commands/component.js

@@ -7,7 +7,7 @@ import { readProjectConfig, resolveRegistry } from "../config.js";
 import { detectAppDirs } from "../global-sheet.js";
 import { hasInteractiveTemplate, interactiveTemplate, } from "../interactive-templates.js";
 import { body, section, snippet } from "../output.js";
-import { findCollision, reactMajorOf, readInstalledConvention, readInstalledScheme, theirThemeVars, } from "../project-facts.js";
+import { findCollision, reactMajorOf, readInstalledConvention, readInstalledScheme, theirThemeVars, namedUtilitiesIn, themeVocabOf, } from "../project-facts.js";
 import { fetchComponent, fetchDesignSystem, RegistryError, } from "../registry.js";
 import { flavourResolver } from "../styles-flavour.js";
 import { inTheirTongue, projectTongue, sumSpoken, tongueFromArtifacts, } from "../their-tongue.js";
@@ -356,6 +356,7 @@ export async function component(slug, name, opts) {
             filenames = written.map((f) => f.filename);
         }
         else {
+            const vocab = await themeVocabOf(root, slug, await theirThemeVars(root, await detectAppDirs(root, config.pagesDir)));
             const { files, spoken: said, root: generatedRoot, } = generateComponentFiles(slug, res.name, res.recipe, res.css, res.version, flavour, await reactMajorOf(root), 
             /**
              * THE SPELLING, FROM THE VERSION WE JUST FETCHED.
@@ -385,8 +386,18 @@ export async function component(slug, name, opts) {
              * propriedade renderiza NADA - pior que o valor arbitrário, porque nada falta na tela. É a
              * mesma lição de `INV-VOLTA-12`, que saiu com a instrução de import e não com a topologia.
              */
-            await theirThemeVars(root, await detectAppDirs(root, config.pagesDir)));
-            spoken = said;
+            vocab);
+            /**
+             * O UTILITÁRIO NOMEADO TAMBÉM É O NOME DELE - rodada 1 do refinamento, 27/09. A conta somava só
+             * as `var()` que a porta traduziu, e o leigo leu "0 references now speak the name YOUR code gives
+             * the value" sobre um botão com `bg-primary`, `text-muted` e `p-md`: "se eu acreditasse na
+             * mensagem, ia achar que não tinha funcionado".
+             */
+            const utilities = vocab
+                ? files.reduce((n, f) => n + namedUtilitiesIn(f.code, vocab), 0)
+                : 0;
+            spoken =
+                said && utilities > 0 ? { ...said, named: said.named + utilities } : said;
             root_ = generatedRoot;
             /**
              * AS DECLARAÇÕES DO ARQUIVO DELE QUE O INTERPRETADOR NÃO LEU - ver `unread-for-component.ts`.

package/dist/commands/upgrade.js

@@ -10,7 +10,7 @@ import { diffLocalDocuments, localChangelogMarkdown, } from "../document-diff.js
 import { detectAppDirs } from "../global-sheet.js";
 import { installedBehind, MATERIALISER_SINCE } from "../install-marks.js";
 import { body, section, snippet } from "../output.js";
-import { reactMajorOf, readInstalledConvention, readInstalledScheme, theirThemeVars, } from "../project-facts.js";
+import { reactMajorOf, readInstalledConvention, readInstalledScheme, theirThemeVars, themeVocabOf, } from "../project-facts.js";
 import { fetchChangelog, fetchComponent, fetchDesignSystem, RegistryError, } from "../registry.js";
 import { flavourResolver } from "../styles-flavour.js";
 import { projectTongue } from "../their-tongue.js";
@@ -422,7 +422,8 @@ export async function upgrade(asked, opts) {
         const tongue = await projectTongue(root, slug);
         /** O `@theme` DELE é o MESMO para a corrida inteira - ver `theirThemeVars`. */
         /** As pastas de app - a resposta é a INTERSEÇÃO delas. Ver `theirThemeVars`. */
-        const themeVars = await theirThemeVars(root, await detectAppDirs(root, config.pagesDir));
+        /** Com os valores - o mesmo vocabulário do `component`, para os dois reescreverem igual (27/09). */
+        const themeVars = await themeVocabOf(root, slug, await theirThemeVars(root, await detectAppDirs(root, config.pagesDir)));
         for (const entry of entries) {
             const tsxPath = join(componentsRoot, entry, `${entry}.tsx`);
             let head = "";

package/dist/component-codegen.js

@@ -563,6 +563,61 @@ function remToTwScale(value) {
  * legível não custa nada.
  */
 const minted = (themeVars, cssVar) => themeVars === null || themeVars.has(cssVar);
+/**
+ * O VOCABULÁRIO DELE COM OS VALORES - rodada 1 do refinamento, 27/09.
+ *
+ * O `Set` de nomes respondia só "ele declara `--color-x`?". Dois defeitos saíam daí, medidos no Oscilla
+ * v9 num Next novo: o `hover` do cartão pede um DEGRAU (`{color.phosphor.500}`) que o projeto chama de
+ * `--color-faint` pelo mesmo `#5d675f`, e o gerador não achava; e o `foreground` do `create-next-app`
+ * (`#171717`) casava pelo NOME com o `foreground` claro do sistema, e o botão saía com texto quase preto
+ * sobre o fundo escuro.
+ *
+ * Continua sendo um `Set`, então todo lugar que só pergunta o nome segue igual. Quem sabe pedir mais
+ * pergunta `nameFor`.
+ */
+export class ThemeVocab extends Set {
+    theirValues;
+    dsValues;
+    constructor(
+    /** O valor LITERAL de cada variável dele, com as indireções dele já seguidas. */
+    theirValues, 
+    /** O valor LITERAL de cada variável nossa (`--ds-*`), com as indireções seguidas. */
+    dsValues) {
+        super(theirValues.keys());
+        this.theirValues = theirValues;
+        this.dsValues = dsValues;
+    }
+    /**
+     * O nome DELE para uma referência nossa no namespace `ns` (`color`), ou `null`.
+     *
+     * O nome que casa vale se o valor também casa - ou se um dos dois lados não tem valor conhecido, que
+     * é o comportamento de antes. Sem nome que case, o VALOR acha o nome, mas só quando exatamente uma
+     * variável dele o segura: duas seria adivinhar qual das duas ele quis dizer.
+     */
+    nameFor(ref, ns, byName) {
+        const path = /^\{([^}]+)\}$/.exec(ref.trim())?.[1];
+        const want = path ? this.dsValues.get(`--ds-${path.replace(/\./g, "-")}`) : undefined;
+        if (byName && this.has(`--${ns}-${byName}`)) {
+            const theirs = this.theirValues.get(`--${ns}-${byName}`);
+            if (!want || !theirs || sameValue(want, theirs))
+                return byName;
+        }
+        if (!want)
+            return null;
+        const hits = [...this.theirValues]
+            .filter(([n, v]) => n.startsWith(`--${ns}-`) && sameValue(v, want))
+            .map(([n]) => n.slice(ns.length + 3));
+        return hits.length === 1 ? hits[0] : null;
+    }
+}
+const sameValue = (a, b) => a.trim().toLowerCase().replace(/\s+/g, " ") === b.trim().toLowerCase().replace(/\s+/g, " ");
+/** A chave de cor que ele escreve: pelo `ThemeVocab` quando há valores, pelo nome quando não. */
+const theirColorKey = (value, themeVars) => {
+    const key = colorKey(value);
+    if (themeVars instanceof ThemeVocab)
+        return themeVars.nameFor(value, "color", key);
+    return key && minted(themeVars, `--color-${key}`) ? key : null;
+};
 /** One declaration → Tailwind classes (pretty when mappable, arbitrary-property
  *  otherwise - never dropped). */
 function declToTailwind(prop, value, themeVars) {
@@ -573,20 +628,20 @@ function declToTailwind(prop, value, themeVars) {
         case "backgroundColor": {
             if (value === "transparent")
                 return ["bg-transparent"];
-            const key = colorKey(value);
-            if (key && minted(themeVars, `--color-${key}`))
+            const key = theirColorKey(value, themeVars);
+            if (key)
                 return [`bg-${key}`];
             break;
         }
         case "color": {
-            const key = colorKey(value);
-            if (key && minted(themeVars, `--color-${key}`))
+            const key = theirColorKey(value, themeVars);
+            if (key)
                 return [`text-${key}`];
             break;
         }
         case "borderColor": {
-            const key = colorKey(value);
-            if (key && minted(themeVars, `--color-${key}`))
+            const key = theirColorKey(value, themeVars);
+            if (key)
                 return [`border-${key}`];
             break;
         }
@@ -594,12 +649,26 @@ function declToTailwind(prop, value, themeVars) {
             // "1px solid {color.semantic.x}" → border + border-<x>
             const m = value.match(/^1px\s+solid\s+(\{[^}]+\})$/);
             if (m) {
-                const key = colorKey(m[1]);
-                if (key && minted(themeVars, `--color-${key}`))
+                const key = theirColorKey(m[1], themeVars);
+                if (key)
                     return ["border", `border-${key}`];
             }
             break;
         }
+        case "outline": {
+            /**
+             * "2px solid {color.semantic.accent}" → outline-2 + outline-<x>. Não tinha tradução: o foco de
+             * todo botão saía `[outline:2px_solid_#4cd694]`, com o nome dele declarado (rodada 1, 27/09).
+             * No Tailwind v4, `outline-<n>` já põe o estilo sólido.
+             */
+            const m = value.match(/^(\d+)px\s+solid\s+(\{[^}]+\})$/);
+            if (m) {
+                const key = theirColorKey(m[2], themeVars);
+                if (key)
+                    return [m[1] === "1" ? "outline" : `outline-${m[1]}`, `outline-${key}`];
+            }
+            break;
+        }
         case "borderRadius": {
             const key = nsKey(value, "radius");
             if (key && minted(themeVars, `--radius-${key}`))

package/dist/install-marks.js

@@ -252,7 +252,13 @@
  * dizia que o hook "reports on every file you write" - a instrução que o agente dele lê sobre o próprio
  * mecanismo. Passa a dizer o fim do turno (E04), e só o `upgrade` reescreve o bloco.
  */
-export const MATERIALISER_SINCE = "0.16.455";
+/**
+ * 0.16.455 -> 0.16.459 em 27/09, e o passo 1 dá **SIM**: o gerador que o `upgrade` usa para reescrever os
+ * componentes passa a traduzir `outline` (o foco de todo botão saía `[outline:2px_solid_#…]`) e a achar
+ * o nome dele pelo valor quando a receita pede um degrau - rodada 1 do refinamento. Um componente escrito
+ * antes carrega o valor cru onde o projeto tem nome.
+ */
+export const MATERIALISER_SINCE = "0.16.459";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *

package/dist/project-facts.js

@@ -15,7 +15,7 @@
  */
 import { readdir, readFile } from "node:fs/promises";
 import { join, relative, sep } from "node:path";
-import { DEFAULT_CONVENTION, } from "./component-codegen.js";
+import { DEFAULT_CONVENTION, ThemeVocab, } from "./component-codegen.js";
 /**
  * Which React the consumer is on, for the ref-carrying prop type.
  *
@@ -317,3 +317,121 @@ function themeVarsIn(css) {
     }
     return out;
 }
+/**
+ * OS NOMES DELE COM OS VALORES, e os nossos também - para o gerador achar o nome pelo valor.
+ *
+ * Rodada 1 do refinamento, 27/09: com só os nomes, o gerador não via que o `--color-faint` dele segura o
+ * mesmo `#5d675f` do degrau `{color.phosphor.500}` que a receita pede, e casava o `--color-foreground` do
+ * `create-next-app` (`#171717`) com o `foreground` claro do sistema. Ver `ThemeVocab`.
+ *
+ * `names` é a resposta de `theirThemeVars` - a interseção das pastas de app -, e só esses nomes entram:
+ * o valor não pode trazer de volta um nome que aquele app não gera. As indireções são seguidas dos dois
+ * lados; um valor que termina numa variável nossa (`var(--ds-…)`) é resolvido pela folha instalada.
+ */
+export async function themeVocabOf(root, slug, names) {
+    if (!names)
+        return null;
+    const ds = join(root, "_synthesisui", "ds", slug);
+    const pointer = await readFile(join(ds, "tokens.css"), "utf8").catch(() => "");
+    const inner = /@import\s+["']\.\/([^"']+)["']/.exec(pointer)?.[1];
+    const installed = inner ? await readFile(join(ds, inner), "utf8").catch(() => "") : pointer;
+    const dsRaw = declarationsIn(installed, /--ds-[a-zA-Z0-9_-]+/);
+    const theirRaw = new Map();
+    const walk = async (at) => {
+        for (const entry of await readdir(at, { withFileTypes: true }).catch(() => [])) {
+            if (SKIP.has(entry.name) || entry.name.startsWith("."))
+                continue;
+            const path = join(at, entry.name);
+            if (entry.isDirectory())
+                await walk(path);
+            else if (/\.css$/i.test(entry.name)) {
+                const css = await readFile(path, "utf8").catch(() => "");
+                if (!THEME_BLOCK.test(css) && !/:root\b/.test(css))
+                    continue;
+                for (const [n, v] of declarationsIn(css, /--(?!ds-)[a-zA-Z0-9_-]+/))
+                    if (!theirRaw.has(n))
+                        theirRaw.set(n, v);
+            }
+        }
+    };
+    await walk(root);
+    const resolveIn = (table) => {
+        const seen = new Set();
+        const go = (value) => {
+            const ref = /^var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,([^)]*))?\)$/.exec(value.trim());
+            if (!ref)
+                return value.trim();
+            const target = ref[1];
+            if (seen.has(target))
+                return null;
+            seen.add(target);
+            const next = target.startsWith("--ds-") ? dsRaw.get(target) : table.get(target);
+            if (next !== undefined)
+                return go(next);
+            return ref[2]?.trim() || null;
+        };
+        return (value) => {
+            seen.clear();
+            return go(value);
+        };
+    };
+    const theirs = new Map();
+    const resolveTheirs = resolveIn(theirRaw);
+    for (const n of names) {
+        const raw = theirRaw.get(n);
+        const value = raw === undefined ? null : resolveTheirs(raw);
+        if (value)
+            theirs.set(n, value);
+    }
+    const dsValues = new Map();
+    const resolveDs = resolveIn(dsRaw);
+    for (const [n, raw] of dsRaw) {
+        const value = resolveDs(raw);
+        if (value)
+            dsValues.set(n, value);
+    }
+    /** Um nome sem valor conhecido continua no conjunto: `nameFor` o trata como antes. */
+    const vocab = new ThemeVocab(theirs, dsValues);
+    for (const n of names)
+        vocab.add(n);
+    return vocab;
+}
+/** `--nome: valor` em qualquer formatação - a primeira declaração de cada nome vence. */
+function declarationsIn(css, name) {
+    const out = new Map();
+    const re = new RegExp(`(?:^|[{;])\\s*(${name.source})\\s*:\\s*([^;}]+)(?=[;}])`, "g");
+    for (const m of css.matchAll(re))
+        if (!out.has(m[1]))
+            out.set(m[1], m[2].trim());
+    return out;
+}
+/**
+ * QUANTOS UTILITÁRIOS DESTE CÓDIGO SÃO NOMES DELE - `bg-primary` quando ele declara `--color-primary`.
+ *
+ * Conta pela classe inteira, com a variante tirada (`hover:border-faint` conta), e só nos namespaces que
+ * o gerador traduz. Uma classe que não bate com nome nenhum dele não conta - nem para mais, nem para menos.
+ */
+export function namedUtilitiesIn(code, names) {
+    const NS = [
+        [/^(?:bg|text|border(?:-[trblxy])?|outline|fill|stroke|ring)-(.+)$/, ["color"]],
+        [/^rounded(?:-[trbl]{1,2})?-(.+)$/, ["radius"]],
+        [/^(?:p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|gap|gap-x|gap-y)-(.+)$/, ["spacing"]],
+        [/^text-(.+)$/, ["text"]],
+        [/^font-(.+)$/, ["font", "font-weight"]],
+        [/^shadow-(.+)$/, ["shadow"]],
+    ];
+    let n = 0;
+    for (const lit of code.matchAll(/"([^"\n]*)"/g)) {
+        for (const raw of lit[1].split(/\s+/)) {
+            const cls = raw.slice(raw.lastIndexOf(":") + 1);
+            if (!cls || cls.startsWith("["))
+                continue;
+            if (NS.some(([re, nss]) => {
+                const key = re.exec(cls)?.[1];
+                return key !== undefined && nss.some((ns) => names.has(`--${ns}-${key}`));
+            }))
+                n += 1;
+        }
+    }
+    return n;
+}

package/package.json

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