synthesisui 0.16.464 → 0.16.466

package/dist/commands/init.js

@@ -2,7 +2,43 @@ import { DEFAULT_CONFIG, writeProjectConfig } from "../config.js";
 import { body, section, snippet } from "../output.js";
 import { resolveDeps, stylesFor, tailwindMajor } from "../stack.js";
 import { formMix, measuredStyle } from "../styles-flavour.js";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { readProjectTheme, writeBesideTheirs, writeNewProjectTheme } from "../new-project-theme.js";
 import { add } from "./add.js";
+const whereOf = (answer) => answer === "file" || answer === "1"
+    ? "file"
+    : answer === "separate" || answer === "2"
+        ? "separate"
+        : answer === "none" || answer === "3" || answer === ""
+            ? "none"
+            : null;
+/**
+ * A PERGUNTA REAL DO TERCEIRO CASO - dono, 27/09: *"quando o projeto já tem os tokens, a gente tem que fazer
+ * uma pergunta real"*. Só num terminal de verdade; sem ele, `null`, e aí é "em lugar nenhum". O Enter também é
+ * "em lugar nenhum": escrever os nomes do sistema no projeto dele só com o sim dele.
+ */
+async function askWhere(tokensFile, separate, entry, intro) {
+    if (!process.stdin.isTTY || !process.stdout.isTTY)
+        return null;
+    const { createInterface } = await import("node:readline/promises");
+    const rl = createInterface({ input: process.stdin, output: process.stdout });
+    try {
+        console.log("");
+        console.log(`  ${intro}`);
+        console.log(`    1  in your tokens file (${tokensFile}), in a block of its own`);
+        console.log(`    2  in a file of its own, ${separate}, imported at the top of ${entry}`);
+        console.log("    3  nowhere - keep only yours; components come with the values written");
+        const answer = (await rl.question("  [1/2/3] (3): ")).trim();
+        return whereOf(answer) ?? "none";
+    }
+    catch {
+        return null;
+    }
+    finally {
+        rl.close();
+    }
+}
 /**
  * Bootstraps a project for SynthesisUI: writes `_synthesisui/config.json`
  * (where `template` materializes pages, where components live, which framework to
@@ -134,6 +170,51 @@ export async function init(opts) {
             setupHints: false,
             ...(opts.cli ? { cli: opts.cli } : {}),
         });
+        /**
+         * O TEMA DO SISTEMA, PELO ESTADO MEDIDO DO PROJETO - ver `readProjectTheme` (rodada 4, 27/09).
+         *
+         * Só com Tailwind v4, que é quem lê `@theme`. Projeto novo recebe os nomes do sistema; projeto cujos
+         * valores já são os do sistema não recebe nada, e os componentes falam os nomes dele; projeto com outro
+         * sistema recebe a pergunta de onde o bloco mora - e sem resposta, nada é escrito.
+         */
+        if (major !== null && major >= 4) {
+            const slugDir = join(root, "_synthesisui", "ds", opts.ds);
+            const lock = JSON.parse(await readFile(join(slugDir, ".lock"), "utf8").catch(() => "{}"));
+            const version = typeof lock.version === "number" ? lock.version : null;
+            const tokens = version !== null
+                ? await readFile(join(slugDir, `v${version}`, "tokens.css"), "utf8").catch(() => "")
+                : "";
+            const plan = tokens ? await readProjectTheme(root, tokens, opts.ds) : null;
+            if (plan?.kind === "new" && version !== null) {
+                const theme = await writeNewProjectTheme(root, tokens, opts.ds, version);
+                if (theme.written) {
+                    console.log("");
+                    console.log(`✓ ${theme.written}: ${theme.count} names of ${opts.ds} declared in your own @theme, with the values written - your project had none of its own. They are yours: bg-accent, p-md and rounded-lg now paint the system. Fonts come from the GUIDE's next/font recipe; the alternate scheme is not wired.`);
+                }
+            }
+            else if (plan?.kind === "matches") {
+                console.log("");
+                console.log(`  ${plan.matched} of ${opts.ds}'s ${plan.colours} colours are already values in your CSS, so its components speak your names - nothing was written to it.`);
+            }
+            else if (plan?.kind === "differs" && version !== null && plan.entry) {
+                const separate = `${plan.entry.replace(/[^/]*$/, "")}${opts.ds}.css`;
+                const intro = `your CSS names its own tokens, and ${plan.matched} of ${opts.ds}'s ${plan.colours} colours are among them - it is another system. Where should ${opts.ds}'s names go?`;
+                const where = whereOf(opts.themeIn) ??
+                    (await askWhere(plan.tokensFile ?? plan.entry, separate, plan.entry, intro)) ??
+                    "none";
+                const theme = await writeBesideTheirs(root, tokens, opts.ds, version, where);
+                console.log("");
+                if (!theme.written)
+                    console.log(`  ${opts.ds}'s names were not written - your CSS keeps only yours, and components come with the values written. Run init again with --theme-in file or --theme-in separate to change that.`);
+                else {
+                    console.log(`✓ ${theme.written}: ${opts.ds} beside your tokens - ${theme.added} names your project did not have, and every value inside [data-theme="${opts.ds}"]. Put that attribute on the part of the page that should wear it.`);
+                    if (theme.collisions.length > 0)
+                        console.log(`  ${theme.collisions.length} name${theme.collisions.length === 1 ? "" : "s"} you already use keep your value everywhere else: ${theme.collisions.slice(0, 5).join(", ")}${theme.collisions.length > 5 ? ", …" : ""}.`);
+                    if (theme.throughInline.length > 0)
+                        console.log(`  declared in your @theme inline, so the selector changes the variable underneath: ${theme.throughInline.slice(0, 3).join(", ")}${theme.throughInline.length > 3 ? ", …" : ""}.`);
+                }
+            }
+        }
         /**
          * ERAM DOIS PASSOS E É UM - `INV-GERAL-13`, 11/09.
          *

package/dist/index.js

@@ -540,6 +540,7 @@ async function main() {
                 componentsDir,
                 styles,
                 ds,
+                ...(typeof flags["theme-in"] === "string" ? { themeIn: flags["theme-in"] } : {}),
                 cli: CLI_VERSION,
             });
             break;

package/dist/new-project-theme.js

@@ -0,0 +1,306 @@
+import { readdir, readFile, rm, writeFile } from "node:fs/promises";
+import { dirname, join, relative } from "node:path";
+import { tongueOf } from "./their-tongue.js";
+/** O que o `create-next-app` escreve - não conta como vocabulário DELE. */
+const BOILERPLATE = new Set([
+    "--background",
+    "--foreground",
+    "--color-background",
+    "--color-foreground",
+    "--font-sans",
+    "--font-mono",
+    "--font-geist-sans",
+    "--font-geist-mono",
+]);
+const SKIP = new Set(["node_modules", ".next", "dist", "build", "out", "_synthesisui", "coverage"]);
+const TAILWIND_IMPORT = /@import\s+[\x22\x27]tailwindcss[\x22\x27]/;
+/**
+ * O COMENTÁRIO DO CSS SE ESCREVE COM `\u002a` NO FONTE, e não com o asterisco - a guarda de
+ * `nothing-of-ours-is-asked-for.spec.ts` apaga comentários do fonte antes de ler os literais, e um `/*`
+ * dentro de uma string a fazia comer o arquivo até o próximo fecho, deixando aspas soltas (a varredura
+ * saía de 1,9s para mais de 25s). O texto que chega ao CSS dele é o mesmo.
+ */
+const open = (text) => `/\u002a ${text} \u002a/`;
+const begin = (slug) => open(`synthesisui: the ${slug} theme, in your names - begin`);
+const end = (slug) => open(`synthesisui: the ${slug} theme - end`);
+const escape = (text) => text.replace(/[.*+?^${}()|[\]\\/]/g, "\\$&");
+const END_RE = (slug) => new RegExp(`\\n*${escape(begin(slug))}[\\s\\S]*?${escape(end(slug))}\\n?`);
+async function sheetsOf(root) {
+    const out = new Map();
+    const walk = async (dir) => {
+        for (const entry of await readdir(dir, { withFileTypes: true }).catch(() => [])) {
+            if (entry.name.startsWith(".") || SKIP.has(entry.name))
+                continue;
+            const path = join(dir, entry.name);
+            if (entry.isDirectory())
+                await walk(path);
+            else if (/\.css$/i.test(entry.name))
+                out.set(path, await readFile(path, "utf8").catch(() => ""));
+        }
+    };
+    await walk(root);
+    return out;
+}
+/** O nome DELE para uma variável nossa, no namespace que o Tailwind v4 lê - ou `null`. */
+function theirNameFor(ours) {
+    const bare = ours.slice("--ds-".length);
+    let m;
+    if ((m = /^color-semantic-(.+)$/.exec(bare)))
+        return `--color-${m[1]}`;
+    if ((m = /^color-series-(.+)$/.exec(bare)))
+        return `--color-series-${m[1]}`;
+    if ((m = /^color-(.+)$/.exec(bare)))
+        return `--color-${m[1]}`;
+    if ((m = /^(spacing|radius|shadow)-(.+)$/.exec(bare)))
+        return `--${m[1]}-${m[2]}`;
+    if ((m = /^typography-weights-(.+)$/.exec(bare)))
+        return `--font-weight-${m[1]}`;
+    if ((m = /^typography-scale-(.+)-font-size$/.exec(bare)))
+        return `--text-${m[1]}`;
+    if ((m = /^typography-scale-(.+)-(line-height|letter-spacing)$/.exec(bare)))
+        return `--text-${m[1]}--${m[2]}`;
+    if ((m = /^motion-easings-(.+)$/.exec(bare)))
+        return `--ease-${m[1]}`;
+    return null;
+}
+export async function writeNewProjectTheme(root, tokensCss, slug, version) {
+    const sheets = await sheetsOf(root);
+    const own = new Set();
+    for (const css of sheets.values()) {
+        const withoutOurs = css.replace(END_RE(slug), "\n");
+        for (const m of withoutOurs.matchAll(/(?:^|[{;\s])(--[a-zA-Z0-9_-]+)\s*:/g)) {
+            const name = m[1];
+            if (!name.startsWith("--ds-") && !name.startsWith("--tw-") && !BOILERPLATE.has(name))
+                own.add(name);
+        }
+    }
+    if (own.size > 0)
+        return { written: null, count: 0, reason: "own-vocabulary" };
+    const entries = [...sheets].filter(([, css]) => TAILWIND_IMPORT.test(css));
+    if (entries.length === 0)
+        return { written: null, count: 0, reason: "no-tailwind-entry" };
+    if (entries.length > 1)
+        return { written: null, count: 0, reason: "many-tailwind-entries" };
+    const [path, css] = entries[0];
+    const system = new Map(systemNames(tokensCss, (await readTheirs(root, slug)).every));
+    const lines = [...system].map(([n, v]) => `  ${n}: ${v};`);
+    if (lines.length === 0)
+        return { written: null, count: 0, reason: "empty-sheet" };
+    const next = [];
+    const canvas = system.get("--color-canvas") ?? system.get("--color-surface");
+    const text = system.get("--color-foreground");
+    if (canvas && /--background\s*:/.test(css))
+        next.push(`  --background: ${canvas};`);
+    if (text && /--foreground\s*:/.test(css))
+        next.push(`  --foreground: ${text};`);
+    const block = [
+        begin(slug),
+        open(`${slug} v${version}: the system's values under the names Tailwind turns into utilities. They are yours now - change a value here and every component follows. Written by \`init\`, because this project had no tokens of its own.`),
+        "@theme {",
+        ...lines,
+        "}",
+        ...(next.length > 0 ? ["", ":root {", ...next, "}"] : []),
+        end(slug),
+    ].join("\n");
+    const base = css.replace(END_RE(slug), "\n").replace(/\n*$/, "\n");
+    await writeFile(path, `${base}\n${block}\n`, "utf8");
+    return { written: relative(root, path).split("\\").join("/"), count: lines.length };
+}
+const importLine = (slug) => `@import "./${slug}.css";`;
+/** O CSS dele sem nada nosso: sem o bloco e sem a linha que importa o arquivo à parte. */
+const withoutOurs = (css, slug) => css.replace(END_RE(slug), "\n").replace(new RegExp(`^${escape(importLine(slug))}\\n`, "m"), "");
+async function readTheirs(root, slug) {
+    const sheets = await sheetsOf(root);
+    const raw = new Map();
+    const own = new Set();
+    const inline = new Map();
+    const counts = new Map();
+    for (const [path, full] of sheets) {
+        if (full.startsWith(begin(slug)))
+            continue;
+        const css = withoutOurs(full, slug);
+        let n = 0;
+        for (const m of css.matchAll(/(?:^|[{;\s])(--[a-zA-Z0-9_-]+)\s*:\s*([^;}]+)/g)) {
+            const name = m[1];
+            if (name.startsWith("--ds-") || name.startsWith("--tw-"))
+                continue;
+            if (!raw.has(name))
+                raw.set(name, m[2].trim());
+            if (!BOILERPLATE.has(name)) {
+                own.add(name);
+                n += 1;
+            }
+        }
+        counts.set(path, n);
+        for (const block of css.matchAll(/@theme\s+inline\s*\{([^}]*)\}/g))
+            for (const m of block[1].matchAll(/(--[a-zA-Z0-9_-]+)\s*:\s*var\(\s*(--[a-zA-Z0-9_-]+)\s*\)/g))
+                inline.set(m[1], m[2]);
+    }
+    const resolved = (table) => {
+        const out = new Map();
+        for (const name of table.keys()) {
+            const seen = new Set();
+            let value = table.get(name);
+            for (let ref = /^var\(\s*(--[a-zA-Z0-9_-]+)\s*\)$/.exec(value); ref; ref = /^var\(\s*(--[a-zA-Z0-9_-]+)\s*\)$/.exec(value)) {
+                const next = table.get(ref[1]);
+                if (next === undefined || seen.has(ref[1]))
+                    break;
+                seen.add(ref[1]);
+                value = next;
+            }
+            out.set(name, value);
+        }
+        return out;
+    };
+    const values = resolved(raw);
+    const everyRaw = new Map(raw);
+    for (const full of sheets.values())
+        for (const m of full.matchAll(/(?:^|[{;\s])(--[a-zA-Z0-9_-]+)\s*:\s*([^;}]+)/g))
+            if (!everyRaw.has(m[1]) && !m[1].startsWith("--ds-"))
+                everyRaw.set(m[1], m[2].trim());
+    const every = resolved(everyRaw);
+    const entries = [...sheets].filter(([, css]) => TAILWIND_IMPORT.test(css)).map(([p]) => p);
+    const rel = (p) => relative(root, p).split("\\").join("/");
+    const top = [...counts].sort((a, b) => b[1] - a[1])[0];
+    const entry = entries.length === 1 ? entries[0] : null;
+    return {
+        sheets,
+        values,
+        own,
+        inline,
+        every,
+        entry: entry ? rel(entry) : null,
+        entries: entries.length,
+        tokensFile: top && top[1] > 0 ? rel(top[0]) : entry ? rel(entry) : null,
+    };
+}
+/**
+ * Os nomes do sistema no namespace do Tailwind, com o valor - a mesma tabela do projeto novo.
+ *
+ * `lookup` responde o valor de um nome DO PROJETO, com o nosso bloco anterior incluído. Depois da primeira
+ * rodada existe build, e o `add` seguinte reescreve a folha para apontar para os nomes que o NOSSO bloco
+ * criou (`--ds-color-amber-400: var(--color-amber-400)`). Pular essas linhas encolhia o bloco na segunda
+ * rodada: medido na prova de 27/09, 82 nomes viraram 38.
+ */
+function systemNames(tokensCss, lookup = new Map()) {
+    const { names, values } = tongueOf([], tokensCss);
+    const out = [];
+    for (const ours of new Set([...values.keys(), ...names.keys()])) {
+        const theirs = theirNameFor(ours);
+        if (!theirs)
+            continue;
+        const pointed = names.get(ours);
+        const value = pointed ? lookup.get(pointed) : values.get(ours);
+        if (value && !value.includes("var(--ds-"))
+            out.push([theirs, value]);
+    }
+    return out;
+}
+const same = (a, b) => a.trim().toLowerCase() === b.trim().toLowerCase();
+export async function readProjectTheme(root, tokensCss, slug) {
+    const r = await readTheirs(root, slug);
+    const base = { entry: r.entry, tokensFile: r.tokensFile };
+    const colourValues = [
+        ...new Set(systemNames(tokensCss, r.every).filter(([n]) => n.startsWith("--color-")).map(([, v]) => v.toLowerCase())),
+    ];
+    const held = new Set([...r.values.values()].map((v) => v.trim().toLowerCase()));
+    const matched = colourValues.filter((v) => held.has(v)).length;
+    const counts = { matched, colours: colourValues.length };
+    if (r.entries === 0)
+        return { kind: "no-tailwind-entry", ...counts, ...base };
+    if (r.entries > 1)
+        return { kind: "many-tailwind-entries", ...counts, ...base };
+    if (r.own.size === 0)
+        return { kind: "new", ...counts, ...base };
+    return { kind: matched * 2 >= colourValues.length && matched > 0 ? "matches" : "differs", ...counts, ...base };
+}
+/**
+ * O BLOCO DO SISTEMA AO LADO DO DELE - o terceiro caso.
+ *
+ * O MESMO BLOCO, onde quer que ele more: um `@theme` com os nomes do sistema que ele NÃO declara (as
+ * classes passam a existir; as dele continuam significando o mesmo) e `[data-theme="<slug>"]` com todos
+ * os valores, inclusive os dos nomes que colidem - o `--color-primary` dele vale no site inteiro, e só
+ * dentro do seletor vira o do sistema. No Tailwind v4 a classe de um `@theme` comum lê a variável em
+ * tempo de execução (`.bg-canvas{background-color:var(--color-canvas)}`, medido no build de 27/09), e é
+ * isso que deixa o seletor trocar o valor.
+ *
+ * O LIMITE, que o comando diz: um nome que ele declara em `@theme inline` tem o valor colado na classe, e
+ * o seletor não o alcança. Ali o bloco troca a variável de baixo (`--color-foreground` -> `--foreground`).
+ *
+ * `where`: `file` no arquivo de tokens dele, `separate` num `<slug>.css` ao lado do CSS de entrada com o
+ * `@import` no topo, `none` em lugar nenhum. Rodar de novo MOVE o bloco: o que estava no outro lugar sai.
+ */
+export async function writeBesideTheirs(root, tokensCss, slug, version, where) {
+    const r = await readTheirs(root, slug);
+    const entryPath = r.entry ? join(root, r.entry) : null;
+    const separatePath = entryPath ? join(dirname(entryPath), `${slug}.css`) : null;
+    /** Tira de todo lugar o que é nosso, antes de escrever no lugar escolhido. */
+    const cleaned = new Map();
+    for (const [path, css] of r.sheets) {
+        if (path === separatePath && css.startsWith(begin(slug)))
+            continue;
+        cleaned.set(path, withoutOurs(css, slug));
+    }
+    const flush = async () => {
+        for (const [path, css] of cleaned)
+            if (css !== r.sheets.get(path))
+                await writeFile(path, css, "utf8");
+        if (separatePath && r.sheets.get(separatePath)?.startsWith(begin(slug)) && where !== "separate")
+            await rm(separatePath, { force: true });
+    };
+    const empty = { written: null, collisions: [], throughInline: [], added: 0 };
+    if (where === "none" || !entryPath || !separatePath) {
+        await flush();
+        return empty;
+    }
+    const system = systemNames(tokensCss, r.every);
+    if (system.length === 0) {
+        await flush();
+        return empty;
+    }
+    const missing = system.filter(([n]) => !r.own.has(n) && !r.values.has(n));
+    const collisions = system
+        .filter(([n, v]) => r.values.has(n) && !r.inline.has(n) && !same(r.values.get(n), v))
+        .map(([n]) => n);
+    const throughInline = [];
+    const scoped = system.map(([n, v]) => {
+        const under = r.inline.get(n);
+        if (under) {
+            throughInline.push(`${n} -> ${under}`);
+            return `  ${under}: ${v};`;
+        }
+        return `  ${n}: ${v};`;
+    });
+    const block = [
+        begin(slug),
+        open(`${slug} v${version}, beside your own tokens. The @theme adds only the names your project did not have; inside the data-theme selector below every value is the system's, including the names you already use, which keep their value everywhere else. Written by \`init\`, where you chose.`),
+        ...(missing.length > 0 ? ["@theme {", ...missing.map(([n, v]) => `  ${n}: ${v};`), "}", ""] : []),
+        `[data-theme="${slug}"] {`,
+        ...scoped,
+        "}",
+        end(slug),
+    ].join("\n");
+    let written;
+    if (where === "separate") {
+        const entry = cleaned.get(entryPath) ?? "";
+        const m = TAILWIND_IMPORT.exec(entry);
+        const at = m ? entry.indexOf("\n", m.index) + 1 : 0;
+        cleaned.set(entryPath, `${entry.slice(0, at)}${importLine(slug)}\n${entry.slice(at)}`);
+        await flush();
+        await writeFile(separatePath, `${block}\n`, "utf8");
+        written = relative(root, separatePath);
+    }
+    else {
+        const target = join(root, r.tokensFile ?? r.entry);
+        const css = (cleaned.get(target) ?? "").replace(/\n*$/, "\n");
+        cleaned.set(target, `${css}\n${block}\n`);
+        await flush();
+        written = relative(root, target);
+    }
+    return {
+        written: written.split("\\").join("/"),
+        collisions,
+        throughInline,
+        added: missing.length,
+    };
+}

package/package.json

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