synthesisui 0.16.464 → 0.16.467

package/dist/commands/add.js

@@ -1,3 +1,4 @@
+import { neverMeasured } from "../never-measured.js";
 import { access, mkdir, readFile, rm, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { agentsToMaintain } from "../agents-chosen.js";
@@ -347,7 +348,11 @@ export async function add(slug, opts) {
         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" } : {}),
+        /**
+         * E O SISTEMA QUE NUNCA FOI MEDIDO NUM CÓDIGO já nasce assim - ver `neverMeasured` (rodada 5, 27/09):
+         * o fork do leigo-5 terminava o `connect` mandando rodar `sync` para uma pasta que não existe.
+         */
+        ...(prev?.reading === "none" || neverMeasured(payload.document) ? { 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 } : {}),
@@ -586,7 +591,7 @@ export async function add(slug, opts) {
      * A linha diz quantos utilitários do Tailwind ficaram apontando para a decisão dele e quantos
      * saíram por serem nossos, com os primeiros nomes. Quem lê pode discordar de qualquer um.
      */
-    if (aligned.dropped.length > 0 || aligned.own.length > 0) {
+    if (!opts.themeFollows && (aligned.dropped.length > 0 || aligned.own.length > 0)) {
         console.log(line(
         /**
          * A LINHA DIZ QUE FICARAM DE FORA - e nao AFIRMA por que, porque ela nao sabe.

package/dist/commands/hook.js

@@ -528,6 +528,21 @@ round) {
      * pelo nome é o que transforma uma perda silenciosa numa lacuna declarada (lei 8).
      */
     const rest = changed.slice(AT_MOST);
+    /**
+     * NO FIM DO TURNO, O REGISTRO É DO TURNO INTEIRO - rodada 5 do refinamento, 27/09.
+     *
+     * O relatório para em três, e a linha do ledger só nascia dentro dele: o agente do leigo-5 escreveu
+     * sete arquivos do dashboard num turno, o ledger ficou com três linhas `hook` e o envio com
+     * `count: 3`. O `connect` promete "every file (...) is checked at the end of each agent turn", e o
+     * painel contava três. Os demais agora são checados e registrados em silêncio; o texto continua em
+     * três, com o resto pelo nome logo abaixo.
+     *
+     * Só no turno: um comando de shell continua como era, porque ali o corte existe para um `git
+     * checkout` que muda a árvore inteira não virar trinta checagens a cada comando.
+     */
+    if (round === "turn")
+        for (const { rel } of rest.slice(0, REFUSAL_CEILING))
+            await report(root, join(root, rel), mode).catch(() => null);
     /**
      * E EM CONSUMIR, O TETO DO RELATÓRIO NÃO É O TETO DA RECUSA - achado da revisão de QA no fecho,
      * e ele falsificava a invariante inteira.

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
@@ -132,8 +168,54 @@ export async function init(opts) {
             registry: opts.registry,
             dir: root,
             setupHints: false,
+            ...(major !== null && major >= 4 ? { themeFollows: true } : {}),
             ...(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/component-codegen.js

@@ -672,9 +672,22 @@ const preferFor = (prop) => (prop.startsWith("border") ? "border" : null);
 const namedInside = (prop, value, themeVars) => {
     if (themeVars === null)
         return value;
-    return value.replace(/\{color\.[a-zA-Z0-9.-]+\}/g, (ref) => {
+    return value
+        .replace(/\{color\.[a-zA-Z0-9.-]+\}/g, (ref) => {
         const key = theirColorKey(ref, themeVars, preferFor(prop));
         return key ? `var(--color-${key})` : ref;
+    })
+        /**
+         * E A CURVA - rodada 5, 27/09: o `card` do Zephyr saía com `cubic-bezier(0.2, 0.7, 0.2, 1)` escrito
+         * dentro da `transition`, com `--ease-lumina` declarado pelo `init`. Mesma regra: o nome dele vale
+         * quando o valor bate.
+         */
+        .replace(/\{motion\.easings\.([a-zA-Z0-9-]+)\}/g, (ref, name) => {
+        const key = kebab(name);
+        const ok = themeVars instanceof ThemeVocab
+            ? themeVars.nameFor(ref, "ease", key) === key
+            : minted(themeVars, `--ease-${key}`);
+        return ok ? `var(--ease-${key})` : ref;
     });
 };
 /** One declaration → Tailwind classes (pretty when mappable, arbitrary-property

package/dist/guide.js

@@ -461,7 +461,17 @@ ${depLines.join("\n")}
         Object.keys(foundations.color.semanticAlt).length > 0;
     const altScheme = meta.scheme === "light" ? "dark" : "light";
     const hasTailwind = "theme.css" in payload.artifacts;
-    const hasParts = Object.values(components).some((r) => r.parts && Object.keys(r.parts).length > 0);
+    /**
+     * O EXEMPLO DE PEÇA COM PARTES SAI DE UMA QUE O SISTEMA TEM - rodada 5, 27/09. Era sempre uma tabela
+     * (`.ds-table`, `.ds-table-head`…), bastando QUALQUER peça ter partes: o Zephyr tem `streak`, `xp-bar` e
+     * `join-field`, nenhuma tabela, e o agente dele foi procurar classes que não existem. A tabela só é o
+     * exemplo quando o sistema a tem.
+     */
+    const withParts = Object.entries(components).filter(([, r]) => r.parts && Object.keys(r.parts).length > 0);
+    const picked = withParts.find(([n]) => n === "table") ?? withParts[0];
+    const multiPart = picked
+        ? { name: kebab(picked[0]), parts: Object.keys(picked[1].parts ?? {}).map(kebab) }
+        : null;
     const componentLines = Object.entries(components).map(([cname, recipe]) => componentEntry(cname, recipe));
     /**
      * O CORTE SÓ ACONTECE QUANDO ELE DE FATO CORTA - e este é o único jeito honesto de prometê-lo.
@@ -739,26 +749,15 @@ The system defines the scale; these are sensible defaults for spending it:
 - **Section gaps:** \`lg\` (or the nearest large step). **Card/panel padding:** \`md\`.
 - **Field / tight gaps:** \`2xs\`/\`3xs\`.
 - The system imposes no content max-width - cap long-form/text columns yourself for readability.
-${hasParts
+${multiPart
         ? `
 ### Multi-part components
 Components that have **parts** compile to \`.ds-<name>-<part>\` classes you nest yourself; the exact
-part classes and their \`data-*\` are listed per component below. Example - a table:
+part classes and their \`data-*\` are listed per component below. Example - ${multiPart.name}:
 \`\`\`tsx
-<table className="ds-table">
-  <thead className="ds-table-head">
-    <tr>
-      <th className="ds-table-cell-head">Name</th>
-      <th className="ds-table-cell-head" data-align="end">Updated</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr className="ds-table-row">
-      <td className="ds-table-cell">Halogen</td>
-      <td className="ds-table-cell" data-align="end">2h ago</td>
-    </tr>
-  </tbody>
-</table>
+<div className="ds-${multiPart.name}">
+${multiPart.parts.map((p) => `  <div className="ds-${multiPart.name}-${p}">…</div>`).join("\n")}
+</div>
 \`\`\`
 `
         : ""}

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/install-marks.js

@@ -275,7 +275,13 @@
  * `--color-accent` e `--color-primary` declarados - e a desempatar pela palavra da propriedade numa borda
  * (rodada 4 do refinamento).
  */
-export const MATERIALISER_SINCE = "0.16.464";
+/**
+ * 0.16.464 -> 0.16.467 em 27/09, e o passo 1 dá **SIM**: o gerador que o `upgrade` usa passa a escrever a
+ * curva de uma `transition` pelo nome dele (`var(--ease-lumina)`), o `GUIDE.md` deixa de ensinar uma tabela
+ * que o sistema não tem, e o `.lock` de um sistema nunca medido num código nasce com `reading: "none"` -
+ * rodada 5 do refinamento. Uma pasta escrita antes ensina `.ds-table` ao agente.
+ */
+export const MATERIALISER_SINCE = "0.16.467";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *
@@ -437,7 +443,12 @@ export const COUNTED_DIFFERENTLY = "this run counts a value as named only when Y
  * rodada 3 do refinamento: o dashboard do leigo-3 inteiro nunca foi checado. Um hook anterior segue calado
  * nos dois casos.
  */
-export const CHECKER_SINCE = "0.16.463";
+/**
+ * 0.16.463 -> 0.16.467 em 27/09, e o passo 1 dá **SIM**: o fim do turno passa a registrar no ledger TODOS os
+ * arquivos do turno, e não só os três que relata - rodada 5: o leigo-5 escreveu sete e o painel recebeu
+ * três. Um hook anterior segue mandando ao painel um turno pela metade.
+ */
+export const CHECKER_SINCE = "0.16.467";
 /**
  * A ÚLTIMA VERSÃO EM QUE OS LEITORES PASSARAM A PRODUZIR UM CENSO DIFERENTE.
  *

package/dist/never-measured.js

@@ -0,0 +1,21 @@
+/**
+ * O SISTEMA NUNCA FOI MEDIDO NUM CÓDIGO - rodada 5 do refinamento, 27/09.
+ *
+ * O `connect` do leigo-5 terminou com "Still out of alignment: \"zephyr\" does not record where it was
+ * measured (...) npx synthesisui sync". O aviso só se calava com `reading: "none"` no `.lock`, e isso só
+ * era gravado depois de um `sync` que perguntava. Só que o documento já responde: cada fundação carrega
+ * quem a escreveu (`foundations.source`, os `FoundationAuthor` da plataforma), e num fork nascido na
+ * plataforma todas são `seed`. Não existe pasta de onde ele veio, e não há o que remedir.
+ *
+ * OS AUTORES QUE LERAM UM CÓDIGO são `import`, `sync`, `reground` e `reinterpret`. Um deles basta para o
+ * sistema ter origem num repositório, e aí a pergunta do `sync` continua valendo. Sem `source` nenhum, o
+ * documento não diz - e o silêncio não vira afirmação.
+ */
+const FROM_CODE = new Set(["import", "sync", "reground", "reinterpret"]);
+export function neverMeasured(doc) {
+    const source = doc?.foundations?.source;
+    if (!source || typeof source !== "object")
+        return false;
+    const authors = Object.values(source);
+    return authors.length > 0 && !authors.some((a) => FROM_CODE.has(String(a)));
+}

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