synthesisui 0.16.458 → 0.16.460

package/dist/commands/add.js

@@ -344,6 +344,8 @@ export async function add(slug, opts) {
         version: payload.version,
         registry: base,
         ...(opts.cli ? { cli: opts.cli } : {}),
+        /** O que o `sync` aprendeu sobre a leitura não se perde no próximo `connect` (27/09). */
+        ...(prev?.reading === "none" ? { reading: "none" } : {}),
         /** Ver `RegistryPayload.compiler`: é o que faz um conserto de CSS chegar a um install. */
         ...(payload.compiler != null ? { compiler: payload.compiler } : {}),
         ...(payload.rulesStamp ? { rules: payload.rulesStamp } : {}),
@@ -601,7 +603,11 @@ export async function add(slug, opts) {
          * Entao a linha diz o FATO que ela tem - a classe dele continua significando o que
          * significa - e nomeia os primeiros, para quem quiser discordar de qualquer um.
          */
-        `  ${aligned.kept} Tailwind utilit${aligned.kept === 1 ? "y" : "ies"} now point at your own decisions${aligned.own.length > 0 ? `; ${aligned.own.length} more name${aligned.own.length === 1 ? "s a utility" : " utilities"} only this system has (${aligned.own.slice(0, 3).join(", ")}${aligned.own.length > 3 ? ", …" : ""}), so they are declared here` : ""}${aligned.dropped.length > 0 ? `; ${aligned.dropped.length} were left as ${aligned.dropped.length === 1 ? "it is" : "they are"} (${aligned.dropped.slice(0, 3).join(", ")}${aligned.dropped.length > 3 ? ", …" : ""}) - your classes keep meaning what they mean today` : ""}.`));
+        /**
+         * Com ZERO, a frase falava de decisões que um projeto novo não tem - rodada 1 do refinamento,
+         * 27/09: "0 Tailwind utilities now point at your own decisions", num Next recém-criado.
+         */
+        `  ${aligned.kept > 0 ? `${aligned.kept} Tailwind utilit${aligned.kept === 1 ? "y" : "ies"} now point at your own decisions` : "Your code declares no Tailwind names of its own yet"}${aligned.own.length > 0 ? `; ${aligned.own.length} more name${aligned.own.length === 1 ? "s a utility" : " utilities"} only this system has (${aligned.own.slice(0, 3).join(", ")}${aligned.own.length > 3 ? ", …" : ""}), so they are declared here` : ""}${aligned.dropped.length > 0 ? `; ${aligned.dropped.length} were left as ${aligned.dropped.length === 1 ? "it is" : "they are"} (${aligned.dropped.slice(0, 3).join(", ")}${aligned.dropped.length > 3 ? ", …" : ""}) - your classes keep meaning what they mean today` : ""}.`));
     }
     /**
      * O CICLO RECUSADO É DITO, e não engolido - senão o cliente lê um número menor sem saber por quê.

package/dist/commands/align.js

@@ -210,7 +210,7 @@ opts = {}) {
      * sistema de 36).
      */
     const scope = await measuredScope(root, lock.slug);
-    if (!scope.system && scope.usage.length === 0)
+    if (!scope.system && scope.usage.length === 0 && lock.reading !== "none")
         out.push({
             says: `"${lock.slug}" does not record where it was measured, so a re-measure would read this whole repo instead of the folder the system came from. Sync asks once and remembers the answer.`,
             /**

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/init.js

@@ -132,6 +132,7 @@ export async function init(opts) {
             registry: opts.registry,
             dir: root,
             setupHints: false,
+            ...(opts.cli ? { cli: opts.cli } : {}),
         });
         /**
          * ERAM DOIS PASSOS E É UM - `INV-GERAL-13`, 11/09.

package/dist/commands/mcp.js

@@ -1891,8 +1891,14 @@ cli) {
                     carried: [],
                     groups: [],
                     omitted: [],
+                    /**
+                     * 404 é "nada gravado para este sistema", e dizer o número fazia o leigo achar que algo tinha
+                     * quebrado num projeto que acabou de nascer (rodada 1 do refinamento, 27/09).
+                     */
                     because: res
-                        ? `the platform answered ${res.status}`
+                        ? res.status === 404
+                            ? "nothing has been decided for this system yet"
+                            : `the platform answered ${res.status}`
                         : "the platform could not be reached",
                 };
                 if (!res?.ok)

package/dist/commands/sync.js

@@ -349,6 +349,20 @@ export async function remeasure(args) {
     const head = await fetch(`${base}/api/registry/ds/${slug}/reading`, {
         headers: { Authorization: `Bearer ${token}` },
     }).catch(() => null);
+    /**
+     * 404 É UMA RESPOSTA, NÃO UMA FALHA - rodada 1 do refinamento, 27/09.
+     *
+     * A plataforma não tem leitura de um sistema que ninguém importou de um repositório - o da galeria,
+     * ou um nascido nela. O leigo, com o Oscilla da galeria num Next novo, ouvia "The registry answered 404
+     * for this system's reading" e ficava com um aviso de "fora de alinhamento" que nada fazia sumir. Agora
+     * a frase diz que é o esperado, e o `.lock` guarda isso, para o `align` não pedir de novo.
+     */
+    if (head?.status === 404) {
+        await markNoReading(root, slug);
+        console.log(section("Sync"));
+        console.log(body(`"${slug}" was not read from a repository - it comes from the gallery or was built on the platform - so there is nothing here to re-measure. That is expected, and this repo will stop asking.`));
+        return null;
+    }
     if (!head?.ok) {
         console.log(section("Sync"));
         console.log(body(head
@@ -993,3 +1007,19 @@ async function askForScope(root) {
 export async function installedSlug(root) {
     return (await installedSlugs(root))[0] ?? null;
 }
+/** Anota no `.lock` que a plataforma não tem leitura deste sistema - ver o 404 em `remeasure`. */
+async function markNoReading(root, slug) {
+    const path = join(root, "_synthesisui", "ds", slug, ".lock");
+    const raw = await readFile(path, "utf8").catch(() => "");
+    if (!raw)
+        return;
+    try {
+        const lock = JSON.parse(raw);
+        if (lock.reading === "none")
+            return;
+        await writeFile(path, `${JSON.stringify({ ...lock, reading: "none" }, null, 2)}\n`, "utf8");
+    }
+    catch {
+        /** Um `.lock` ilegível não é deste passo consertar. */
+    }
+}

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/index.js

@@ -540,6 +540,7 @@ async function main() {
                 componentsDir,
                 styles,
                 ds,
+                cli: CLI_VERSION,
             });
             break;
         }

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.460",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {