synthesisui 0.16.467 → 0.16.469

package/dist/commands/component.js

@@ -1,4 +1,5 @@
 import { existsSync } from "node:fs";
+import { speakInHisProject } from "../in-his-form.js";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { emitCn, readVocabulary } from "../cn-codegen.js";
@@ -413,12 +414,18 @@ export async function component(slug, name, opts) {
              */
             const nota = unreadComment(unreadForComponent(await readCensus(root), res.name));
             /** Os bytes finais, para o fingerprint lembrar EXATAMENTE o que foi a disco (T7). */
-            const written = files.map((file) => ({
+            const drafted = files.map((file) => ({
                 filename: file.filename,
                 content: file.filename.endsWith(".tsx")
                     ? `${nota}${file.code}`
                     : file.code,
             }));
+            /** Num projeto SCSS, a folha sai em SCSS e na grafia dele - ver `scss-speech.ts` (27/09). */
+            /**
+             * NA GRAFIA DELE, E DEPOIS NA FORMA DELE - `scss-speech.ts` troca `var(--x)` pelo `$x` dele, e
+             * `in-his-form.ts` troca o nosso `ds-` e a folha global pelo formato que o projeto usa (28/09).
+             */
+            const written = await speakInHisProject(root, compDir, drafted, flavour, local, res.name);
             for (const f of written)
                 await writeFile(join(compDir, f.filename), f.content, "utf8");
             await recordWritten(join(root, "_synthesisui", "ds", slug), local, written);

package/dist/commands/doctor.js

@@ -1,4 +1,6 @@
 import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
+import { readStyleSheet, scssVariables } from "../doctor/scss-lens.js";
+import { tsTokenObjects, tsTokensAsVars } from "../doctor/ts-tokens-lens.js";
 import { dirname, join, relative, resolve } from "node:path";
 import { describeIntent, intentOf, readProjectConfig } from "../config.js";
 import { describeFix, planFix, readerFor, writeFix, } from "../doctor/apply-fix.js";
@@ -431,17 +433,45 @@ measured) {
     for await (const file of walkAll(roots)) {
         if (!/\.(css|scss|sass|less)$/i.test(file))
             continue;
+        /**
+         * CRU, E NÃO PELA LENTE - a tabela é o que o doctor oferece como TROCA. Pela lente, `$gray_dark` viraria um
+         * `--gray_dark` que o navegador não conhece, e um `#555` num `.tsx` sairia com a sugestão de
+         * `var(--gray_dark)` - código que não pinta. O nome Sass continua dito, nunca escrito, por
+         * `aliases` (`their-names.ts`); a lente entra só na VARREDURA, onde conta o uso para a cobertura.
+         */
         const source = await readFile(file, "utf8").catch(() => "");
         sheets.set(file, source);
         css += `\n${source}`;
     }
-    return buildTable({
+    const table = buildTable({
         css,
         source: "yours",
         sheets,
         rootPx: measured?.px,
         rootFrom: measured?.from ?? null,
     });
+    /** As `$variáveis` Sass, à parte da tabela de trocas - ver `TokenTable.sassNames` (27/09). */
+    const sassNames = new Map();
+    for (const [file, source] of sheets)
+        if (/\.(scss|sass)$/i.test(file))
+            for (const [n, v] of scssVariables(source)) {
+                const key = `--${n.slice(1).toLowerCase()}`;
+                if (!sassNames.has(key))
+                    sassNames.set(key, v);
+            }
+    if (sassNames.size > 0)
+        table.sassNames = sassNames;
+    /** E o objeto de tokens em TypeScript - ver `TokenTable.tsNames` (27/09). */
+    const tsNames = new Map();
+    for await (const file of walkAll(roots))
+        if (/\.(ts|tsx)$/.test(file) && !/\.d\.ts$/.test(file))
+            for (const o of tsTokenObjects(await readFile(file, "utf8").catch(() => "")))
+                for (const [n, v] of o.values)
+                    if (!tsNames.has(n))
+                        tsNames.set(n, v);
+    if (tsNames.size > 0)
+        table.tsNames = tsNames;
+    return table;
 }
 const KIND_LABEL = {
     color: "colour",
@@ -695,6 +725,15 @@ export async function doctor(opts) {
          */
         table = withTheirNames(installed.theirs, installed.theirs);
     }
+    /**
+     * AS `$VARIÁVEIS` DELE VALEM COM OU SEM SISTEMA NOSSO - ver `TokenTable.sassNames` (27/09). Elas moram na
+     * tabela DELE (`installed.theirs`), e com um sistema instalado a varredura usa a nossa: sem este repasse, um
+     * `$accent` num `.scss` não entrava em conta nenhuma.
+     */
+    if (installed.theirs.sassNames && !table.sassNames)
+        table = { ...table, sassNames: installed.theirs.sassNames };
+    if (installed.theirs.tsNames && !table.tsNames)
+        table = { ...table, tsNames: installed.theirs.tsNames };
     const hasSystem = table.byName.size > 0;
     /**
      * O NOME DELE, ONDE ANTES ESTAVA "the system".
@@ -724,12 +763,22 @@ export async function doctor(opts) {
      * Nobody debugs from 0%. They conclude the product does not work.
      */
     const skippedProjects = [];
+    /** Os objetos de tokens em TypeScript, para a lente da varredura - lidos da RAIZ, como o vocabulário. */
+    const tsObjects = [];
+    for await (const file of walkAll([root]))
+        if (/\.(ts|tsx)$/.test(file) && !/\.d\.ts$/.test(file))
+            tsObjects.push(...tsTokenObjects(await readFile(file, "utf8").catch(() => "")));
     const tally = emptyTally();
     const internalSpecs = await internalSpecifiers(root);
     for await (const file of scopes.length > 0
         ? walkAll(scopes)
         : walk(root, skippedProjects)) {
-        const src = await readFile(file, "utf8").catch(() => "");
+        /** Um `.scss` passa pela lente, ou `$accent` não conta como nome - ver `scss-lens.ts` (27/09). */
+        const src = /\.(scss|sass)$/i.test(file)
+            ? await readStyleSheet(file)
+            : tsObjects.length > 0 && /\.(tsx|jsx|ts)$/.test(file)
+                ? tsTokensAsVars(await readFile(file, "utf8").catch(() => ""), tsObjects)
+                : await readFile(file, "utf8").catch(() => "");
         if (!src)
             continue;
         const rel = relative(root, file);

package/dist/commands/generate.js

@@ -1,4 +1,5 @@
 import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { speakInHisProject } from "../in-his-form.js";
 import { join } from "node:path";
 import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
@@ -104,13 +105,15 @@ export async function generate(description, opts) {
             console.log(`  The recipe and the compiled CSS are on disk either way - only the .tsx was not written.`);
             return;
         }
-        for (const file of files) {
-            await writeFile(join(compDir, file.filename), file.code, "utf8");
+        /** Na grafia e na forma dele - ver `speakInHisProject` (28/09). */
+        const spoken = await speakInHisProject(root, compDir, files.map((x) => ({ filename: x.filename, content: x.code })), flavourOf(res.name), res.name, res.name);
+        for (const file of spoken) {
+            await writeFile(join(compDir, file.filename), file.content, "utf8");
         }
         /** O fingerprint do que escrevemos - protege a edição dele no upgrade (T7). */
-        await recordWritten(join(root, "_synthesisui", "ds", slug), res.name, files.map((x) => ({ filename: x.filename, content: x.code })));
+        await recordWritten(join(root, "_synthesisui", "ds", slug), res.name, spoken);
         materialized = true;
-        console.log(`✓ ${config.componentsDir}/${res.name}/ → ${files.map((f) => f.filename).join(", ")}  (styles: ${config.styles})`);
+        console.log(`✓ ${config.componentsDir}/${res.name}/ → ${spoken.map((f) => f.filename).join(", ")}  (styles: ${config.styles})`);
     }
     console.log("");
     console.log("Use it:");

package/dist/commands/import.js

@@ -1,4 +1,6 @@
 import { mkdir, readdir, readFile, stat, writeFile } from "node:fs/promises";
+import { readStyleSheet } from "../doctor/scss-lens.js";
+import { tsTokenObjects, tsTokensAsVars } from "../doctor/ts-tokens-lens.js";
 import { basename, dirname, join, relative, resolve, sep } from "node:path";
 import { anatomyFromSketch } from "../anatomy-from-sketch.js";
 import { applyAnatomyPatch, hasEdits, } from "../anatomy-patch.js";
@@ -45,6 +47,7 @@ import { variantCallsIn } from "../doctor/variant-calls.js";
 import { transcribeVariants } from "../doctor/variant-read.js";
 import { frontierKind, packageRoot } from "../frontier-kind.js";
 import { keyframesInSheets } from "../global-keyframes.js";
+import { templateClassVariants } from "../doctor/template-class-variants.js";
 import { globalClassesWorn, porNecessidade } from "../global-wear.js";
 import { withLibraryStructure } from "../library-structure.js";
 import { architectureGaps, mergeCensus } from "../merge-census.js";
@@ -189,7 +192,7 @@ async function sheetWithImports(path, seen = new Set(), depth = 0) {
     if (depth > 6 || seen.has(path))
         return { css: "", files: [] };
     seen.add(path);
-    const body = await readFile(path, "utf8").catch(() => "");
+    const body = await readStyleSheet(path);
     if (!body)
         return { css: "", files: [] };
     let css = "";
@@ -275,7 +278,7 @@ alsoGlobalsFrom) {
     for await (const file of walkAll([root])) {
         if (!/\.(css|scss|sass|less)$/i.test(file))
             continue;
-        const body = await readFile(file, "utf8").catch(() => "");
+        const body = await readStyleSheet(file);
         sheets.push({ file, body });
     }
     /**
@@ -291,7 +294,7 @@ alsoGlobalsFrom) {
                 continue;
             if (file === root || file.startsWith(dentro))
                 continue;
-            const body = await readFile(file, "utf8").catch(() => "");
+            const body = await readStyleSheet(file);
             deForaDoEscopo.add(file);
             sheets.push({ file, body });
         }
@@ -552,7 +555,20 @@ export async function takeCensus(root, opts) {
     /** Todo arquivo de estilo do escopo, para o ledger - ver o parâmetro `into`. */
     const styleFiles = [];
     const { css, globals: globalSheets } = await harvestOwnCss(root, styleFiles, repoRoot);
-    const table = buildTable({ css, source: "yours" });
+    /**
+     * O OBJETO DE TOKENS EM TYPESCRIPT ENTRA NO VOCABULÁRIO - ver `ts-tokens-lens.ts` (rodada 9, 27/09). O
+     * teste-import-atomico declarava cor, papel, espaço, raio e fonte em `ui/theme/tokens.ts`, e o censo saía com
+     * `declared: {}`. O objeto é lido como `--caminho: valor`, e os componentes que o usam por `style` são lidos
+     * pela mesma lente mais abaixo.
+     */
+    const tsObjects = [];
+    for await (const file of walkAll([root]))
+        if (/\.(ts|tsx)$/.test(file) && !/\.d\.ts$/.test(file))
+            tsObjects.push(...tsTokenObjects(await readFile(file, "utf8").catch(() => "")));
+    const tsRoot = tsObjects
+        .flatMap((o) => [...o.values].map(([n, v]) => `${n}: ${v};`))
+        .join(" ");
+    const table = buildTable({ css: tsRoot ? `${css}\n:root { ${tsRoot} }` : css, source: "yours" });
     const schemes = parseSchemeBlocks(css);
     const reports = [];
     const tally = emptyTally();
@@ -750,7 +766,9 @@ export async function takeCensus(root, opts) {
      */
     const progress = startProgress("Reading");
     for await (const file of walk(root)) {
-        const src = await readFile(file, "utf8").catch(() => "");
+        const raw = await readFile(file, "utf8").catch(() => "");
+        /** Um `style` que lê o objeto de tokens é lido como variável CSS - ver `ts-tokens-lens.ts` (27/09). */
+        const src = tsObjects.length > 0 && /\.(tsx|jsx|ts)$/.test(file) ? tsTokensAsVars(raw, tsObjects) : raw;
         if (!src)
             continue;
         const rel = relative(root, file);
@@ -1192,7 +1210,11 @@ export async function takeCensus(root, opts) {
                     ...fromModule?.dark,
                     ...t.dark,
                 };
-                const layers = [...(fromModule?.layers ?? []), ...v.layers];
+                /** A classe global montada com texto (`btn--${variant}`) - ver `template-class-variants.ts` (27/09). */
+                const fromTemplate = templateClassVariants(src, globalClasses);
+                for (const cls of fromTemplate.claimed)
+                    globalClassesClaimed.add(cls);
+                const layers = [...(fromModule?.layers ?? []), ...v.layers, ...fromTemplate.layers];
                 const parts = { ...fromModule?.parts, ...t.parts };
                 const tree = fromModule?.tree ?? [];
                 const size = Object.keys(base).length +
@@ -1488,8 +1510,19 @@ export async function takeCensus(root, opts) {
      * `app/` and no `pages/`, so there is nothing to count and the count would be zero for
      * everything. An app has them, and then the number means something.
      */
-    const hasScreens = [...screensOf.values()].some((at) => [...at].some((s) => s.startsWith("app/") || s.startsWith("pages/")));
-    if (hasScreens) {
+    const appScreens = new Set([...screensOf.values()].flatMap((at) => [...at].filter((s) => s.startsWith("app/") || s.startsWith("pages/"))));
+    const hasScreens = appScreens.size > 0;
+    /**
+     * E MENOS TELAS DO QUE A LINHA TAMBÉM NÃO É TESTE - rodadas 6 a 10 do refinamento, 27/09.
+     *
+     * A pergunta da regra é "duas telas compartilham isto?", e num app de UMA tela ela não tem como ser
+     * respondida: todo componente sai "composed on one screen only". Nos cinco estilos das rodadas
+     * (Tailwind, variáveis CSS, CSS Modules, atômico, SCSS) o import tirou assim os componentes do
+     * usuário, e o sistema nascia sem nenhum dele. É o mesmo raciocínio da biblioteca logo acima, do outro
+     * lado: sem telas bastantes para comparar, não há compartilhamento para medir.
+     */
+    const measurable = appScreens.size >= SCREENS_FOR_SYSTEM;
+    if (hasScreens && measurable) {
         const keep = [];
         for (const d of defined) {
             /**

package/dist/commands/refit.js

@@ -1,4 +1,5 @@
 import { access, mkdir, readFile, writeFile } from "node:fs/promises";
+import { speakInHisProject } from "../in-his-form.js";
 import { basename, join } from "node:path";
 import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
@@ -153,13 +154,15 @@ export async function refit(file, opts) {
             console.log(`  The recipe is saved in your system's draft either way - only the .tsx was not written.`);
             return;
         }
-        for (const f of files) {
-            await writeFile(join(compDir, f.filename), f.code, "utf8");
+        /** Na grafia e na forma dele - ver `speakInHisProject` (28/09). */
+        const spoken = await speakInHisProject(root, compDir, files.map((x) => ({ filename: x.filename, content: x.code })), flavourOf(res.name), res.name, res.name);
+        for (const f of spoken) {
+            await writeFile(join(compDir, f.filename), f.content, "utf8");
         }
         /** O fingerprint do que escrevemos - protege a edição dele no upgrade (T7). */
-        await recordWritten(join(root, "_synthesisui", "ds", slug), res.name, files.map((x) => ({ filename: x.filename, content: x.code })));
+        await recordWritten(join(root, "_synthesisui", "ds", slug), res.name, spoken);
         materialized = true;
-        console.log(`✓ ${config.componentsDir}/${res.name}/ → ${files.map((f) => f.filename).join(", ")}  (styles: ${config.styles})`);
+        console.log(`✓ ${config.componentsDir}/${res.name}/ → ${spoken.map((f) => f.filename).join(", ")}  (styles: ${config.styles})`);
     }
     // The materialized component references this system's tokens - without the
     // install (tokens.css + scope) it renders unstyled. Say so, concretely.

package/dist/commands/upgrade.js

@@ -1,4 +1,5 @@
 import { readdir, readFile, writeFile } from "node:fs/promises";
+import { speakInHisProject } from "../in-his-form.js";
 import { join } from "node:path";
 import { pinnedHookVersion, wireAgent } from "../agent-wiring.js";
 import { agentsToMaintain } from "../agents-chosen.js";
@@ -428,7 +429,7 @@ export async function upgrade(asked, opts) {
             const tsxPath = join(componentsRoot, entry, `${entry}.tsx`);
             let head = "";
             try {
-                head = (await readFile(tsxPath, "utf8")).slice(0, 300);
+                head = (await readFile(tsxPath, "utf8")).slice(0, 2000);
             }
             catch {
                 continue; // not a materialized component folder
@@ -444,12 +445,15 @@ export async function upgrade(asked, opts) {
             if (keptEntries.has(entry))
                 continue;
             try {
-                const res = await fetchComponent(base, slug, entry);
+                /** A receita pelo cabeçalho, não pela pasta - ver `recipeNameOf` (28/09). */
+                const res = await fetchComponent(base, slug, recipeNameOf(head, entry));
                 const { files } = generateComponentFiles(slug, res.name, res.recipe, res.css, res.version, flavourOf(res.name), 
                 // Both were missing here, and `upgrade` is the command that REWRITES
                 // components somebody already has: without the convention it would have
                 // taken a working component and stripped its styles.
-                await reactMajorOf(root), res.classNames ?? (await readInstalledConvention(root, slug)), res.name, await readInstalledScheme(root, slug), tongue, themeVars);
+                await reactMajorOf(root), res.classNames ?? (await readInstalledConvention(root, slug)), 
+                /** O nome local é a PASTA dele (`--as`), não a receita - senão sai `button.tsx` dentro de `button-gen/`. */
+                entry, await readInstalledScheme(root, slug), tongue, themeVars);
                 /**
                  * A NOTA DAS DECLARAÇÕES NÃO INTERPRETADAS SOBREVIVE AO UPGRADE.
                  *
@@ -461,12 +465,13 @@ export async function upgrade(asked, opts) {
                  */
                 const nota = unreadComment(unreadForComponent(await readCensus(root), res.name));
                 /** Os bytes finais, para o fingerprint lembrar EXATAMENTE o que foi a disco. */
-                const finalFiles = files.map((file) => ({
+                /** Na grafia e na forma dele, como o `component` - ver `speakInHisProject` (28/09). */
+                const finalFiles = await speakInHisProject(root, join(componentsRoot, entry), files.map((file) => ({
                     filename: file.filename,
                     content: file.filename.endsWith(".tsx")
                         ? `${nota}${file.code}`
                         : file.code,
-                }));
+                })), flavourOf(res.name), entry, res.name);
                 for (const file of finalFiles) {
                     await writeFile(join(componentsRoot, entry, file.filename), file.content, "utf8");
                 }
@@ -567,3 +572,12 @@ export async function upgrade(asked, opts) {
     });
     console.log("");
 }
+/**
+ * A RECEITA DE UM COMPONENTE GERADO, LIDA NO CABEÇALHO QUE O GERADOR ESCREVEU - revisão do #1629, 28/09.
+ *
+ * `--as button-gen` põe o componente numa pasta com o nome dele, e o `upgrade` pedia ao registry o componente
+ * `button-gen`: "Could not regenerate (...) (removed/renamed in v2?)". Sem cabeçalho, a pasta é a melhor pista.
+ */
+export function recipeNameOf(head, entry) {
+    return /Generated by SynthesisUI - "([^"]+)" from the/.exec(head)?.[1] ?? entry;
+}

package/dist/component-codegen.js

@@ -1690,7 +1690,7 @@ themeVars) {
             filename: `${localName}.tsx`,
             code: `${emitCssMode(slug, name, recipe, version, props, convention, localName)}\n`,
         });
-        files.push({ filename: `${localName}.css`, code: `${css}\n` });
+        files.push({ filename: `${localName}.css`, code: `${withoutOurScope(css)}\n` });
     }
     else {
         files.push({
@@ -1717,6 +1717,18 @@ themeVars) {
     };
     return speak(files, tongue, styles === "tailwind" ? "tailwind-class" : "stylesheet", root);
 }
+/**
+ * A FOLHA DO COMPONENTE SEM O NOSSO ESCOPO - medido em 28/09, provando a saída SCSS da rodada 10.
+ *
+ * A folha compilada chega como `[data-ds="<slug>"] .ds-button { … }`, e nada no app dele tem `data-ds`: o
+ * componente gerado não o põe (pôr o nosso escopo na árvore dele é o que `INV-GERAL-13` proíbe). O build
+ * de um Next com o botão gerado deu `<button class="ds-button">` e a regra escopada sem nada que a casasse
+ * - o botão sem estilo, em todo projeto sem Tailwind. A página do `template` nasce dentro de um invólucro
+ * com o atributo e continua escopada; o componente não tem invólucro, e a classe `ds-*` já é só dele.
+ */
+function withoutOurScope(css) {
+    return css.replace(/\[data-ds=(["']?)[^\]"']+\1\]\s*/g, "");
+}
 /**
  * A TRADUÇÃO, SOBRE OS BYTES, UMA VEZ - e o destino é de quem GEROU o texto, não da extensão.
  *

package/dist/doctor/architecture.js

@@ -18,6 +18,18 @@
  * so this returns all of them and the person picks which one has PRIORITY. That word is
  * theirs and it is the right one: the others are still true, they just do not decide.
  */
+/**
+ * A PASTA DA FORMA `flat` - ela casa no lugar que TEM uma `components/`, e as peças moram DENTRO dela. Dizer
+ * "directly under `.`" num Next mandava o agente para a raiz (rodadas 6 a 10, 27/09). Quando o caminho já
+ * termina na pasta, ele é a resposta.
+ */
+function flatFolder(where, folder) {
+    if (!folder)
+        return where;
+    if (where === "." || where === "")
+        return folder;
+    return where === folder || where.endsWith(`/${folder}`) ? where : `${where}/${folder}`;
+}
 const SHAPES = [
     {
         kind: "atomic",
@@ -49,7 +61,7 @@ const SHAPES = [
     {
         kind: "flat",
         needs: [["components"]],
-        describe: (_a, where) => `Every component sits directly under \`${where}\`, one folder deep. It is the shape that stays legible longest while a system is small, and the one to revisit when the folder passes about forty names.`,
+        describe: (a, where) => `Every component sits directly under \`${flatFolder(where, a.evidence[0])}\`, one folder deep. It is the shape that stays legible longest while a system is small, and the one to revisit when the folder passes about forty names.`,
     },
 ];
 /**
@@ -203,7 +215,14 @@ function explains(other, shape) {
         return other.kind === shape.kind || shape.kind === "flat";
     return (pathKey(other.root) === pathKey(shape.root) &&
         shape.kind === "flat" &&
-        other.kind !== "flat");
+        other.kind !== "flat" &&
+        /**
+         * `colocated` NÃO EXPLICA A PASTA COMPARTILHADA - rodadas 6 a 10 do refinamento, 27/09. Num Next, a
+         * raiz tem `app/` e `components/`, as duas formas casam ali, e a `flat` sumia: o import dizia "BESIDE
+         * THE ROUTE" nos cinco estilos, com os componentes todos em `components/`. `colocated` diz onde moram
+         * as rotas; `flat` diz onde moram as peças que elas compartilham.
+         */
+        other.kind !== "colocated");
 }
 /**
  * O CAMINHO COMPARÁVEL - a raiz do escopo é escrita `.` pela caminhada, e comparada com `""` ela é
@@ -395,7 +414,15 @@ entries, scope) {
     const hasSrc = entries.some((e) => e.path === "src" ||
         e.path.startsWith("src/") ||
         (isRoot(e.path) && e.dirs.includes("src")));
-    const trunk = `${base ? `${base}/` : ""}${hasSrc ? "src/components" : "components"}`;
+    /**
+     * O ESCOPO QUE JÁ É A PASTA DE COMPONENTES não ganha outra dentro dele - rodadas 6 e 8, 27/09: a
+     * sugestão saía `components/ui/components/{atoms, molecules, organisms}` e `components/components/…`, e o
+     * agente da rodada 8 chamou de "a slip in the tool".
+     */
+    const insideComponents = /(^|\/)components(\/|$)/.test(base);
+    const trunk = insideComponents
+        ? base
+        : `${base ? `${base}/` : ""}${hasSrc ? "src/components" : "components"}`;
     const fresh = `${trunk}/{atoms, molecules, organisms}`;
     /** Se a proposta é o que já existe, ela não é uma pasta nova - e oferecê-la seria repetir a opção 1. */
     return found.some((a) => componentHome(a, scope) === fresh) ? null : fresh;

package/dist/doctor/css-modules.js

@@ -447,6 +447,18 @@ export function partialCandidates(specifier) {
         `${dir}${base}.css`,
     ];
 }
+/**
+ * OS VALORES QUE TIPAM UMA PROP - `kind?: "primary" | "secondary"` -> `["primary", "secondary"]`.
+ *
+ * Só a união de literais escrita no próprio arquivo: é o que torna a classe escolhida em tempo de execução
+ * legível sem adivinhar (rodadas 7 e 8 do refinamento, 27/09).
+ */
+export function unionOfProp(source, prop) {
+    const m = new RegExp(`\\b${prop}\\??\\s*:\\s*((?:["'][^"']+["']\\s*\\|?\\s*)+)`).exec(source);
+    if (!m)
+        return [];
+    return [...m[1].matchAll(/["']([^"']+)["']/g)].map((v) => v[1]);
+}
 /**
  * A generic in type position, not an element.
  *
@@ -614,11 +626,26 @@ export function readModuleUsage(source, local) {
             continue;
         }
         const body = event.body;
-        if (bracket.test(body)) {
-            // `styles[key]` picks a class at runtime, and the class is not in the source.
-            // Impossible rather than hard, so it is not attempted.
-            bracket.lastIndex = 0;
+        /**
+         * `styles[key]` ESCOLHE A CLASSE EM TEMPO DE EXECUÇÃO - e o nome dela está no arquivo, pela união que
+         * tipa a prop. Era pulado ("Impossible rather than hard"), e o Button e o Pill do teste-import-modules
+         * chegavam sem as cores dos variantes (rodadas 7 e 8, 27/09). Uma chave que não é uma prop tipada
+         * continua sem leitura.
+         */
+        const picked = [];
+        for (const m of body.matchAll(new RegExp(`\\b${local}\\[\\s*([A-Za-z_$][\\w$]*)\\s*\\]`, "g"))) {
+            const prop = m[1];
+            const values = unionOfProp(source, prop);
+            if (values.length === 0)
+                continue;
+            picked.push({
+                prop,
+                whenTrue: null,
+                whenFalse: null,
+                options: Object.fromEntries(values.map((v) => [v, v])),
+            });
         }
+        bracket.lastIndex = 0;
         ref.lastIndex = 0;
         const named = [...body.matchAll(ref)].map((m) => m[1]);
         if (named.length > 0) {
@@ -642,6 +669,7 @@ export function readModuleUsage(source, local) {
             // The resting class is the first one that is not a ternary branch.
             const inTernary = new Set(variants.flatMap((v) => [v.whenTrue, v.whenFalse].filter(Boolean)));
             const resting = named.find((n) => !inTernary.has(n)) ?? named[0];
+            variants.push(...picked);
             out.push({ className: resting, depth, tag: event.tag, variants });
         }
         depth += 1;
@@ -729,6 +757,7 @@ export function transcribeModule(read, usage, declared) {
             for (const [option, className] of [
                 ["true", v.whenTrue],
                 ["false", v.whenFalse],
+                ...Object.entries(v.options ?? {}),
             ]) {
                 if (!className)
                     continue;
@@ -736,10 +765,18 @@ export function transcribeModule(read, usage, declared) {
                 if (!branch)
                     continue;
                 const style = resolve(branch.base);
-                if (Object.keys(style).length === 0)
-                    continue;
-                count += Object.keys(style).length;
-                layers.push({ when: { variant: { [v.prop]: option } }, style });
+                if (Object.keys(style).length > 0) {
+                    count += Object.keys(style).length;
+                    layers.push({ when: { variant: { [v.prop]: option } }, style });
+                }
+                /** E os estados daquela classe (`.primary:hover`), sob a mesma opção - 27/09. */
+                for (const [state, block] of Object.entries(branch.states ?? {})) {
+                    const st = resolve(block);
+                    if (Object.keys(st).length === 0)
+                        continue;
+                    count += Object.keys(st).length;
+                    layers.push({ when: { variant: { [v.prop]: option }, state }, style: st });
+                }
             }
         }
     }

package/dist/doctor/scan.js

@@ -495,6 +495,24 @@ function scanCore(file, source, table) {
     const findings = [];
     const phantoms = [];
     const ownDeclared = [];
+    /**
+     * OS NOMES SASS DELE, VISTOS PELA LENTE - rodada 10 do refinamento, 27/09. Num `.scss` lido por `scss-lens.ts`,
+     * `$accent` chega aqui como `var(--accent)`, e o nome Sass é conhecido pela tabela em `aliases` (o mapa que
+     * DIZ o nome dele e nunca o escreve). Um uso desses conta como vocabulário dele para a cobertura - que dizia
+     * "0% token coverage" com todo valor escrito por uma `$variável` - sem nunca entrar como troca.
+     */
+    const sassDeclared = new Map();
+    for (const [key, their] of table.aliases ?? [])
+        for (const n of [their.name, ...(their.also ?? [])])
+            if (n.startsWith("$"))
+                sassDeclared.set(`--${n.slice(1).toLowerCase()}`, key.split(":").slice(1).join(":"));
+    for (const [n, v] of table.sassNames ?? [])
+        if (!sassDeclared.has(n))
+            sassDeclared.set(n, v);
+    for (const [n, v] of table.tsNames ?? [])
+        if (!sassDeclared.has(n))
+            sassDeclared.set(n, v);
+    const sassCounted = new Set();
     const ownCandidates = new Map();
     let tokenUses = 0;
     // Reason by reason. Rolling two into "A or B" was the one place the report
@@ -570,6 +588,20 @@ function scanCore(file, source, table) {
         }
         for (const m of line.matchAll(ANY_VAR_USE)) {
             const name = m[1].toLowerCase();
+            /**
+             * O NOME SASS CONTA ANTES DO PULO - com um sistema instalado, `--accent` também pode estar na tabela
+             * do sistema, e aí o uso era pulado aqui e não entrava em conta nenhuma (0 do sistema, 12 dele, com
+             * 80 usos no arquivo). Um `$accent` escrito num `.scss` é vocabulário DELE.
+             */
+            const sass = sassDeclared.get(name);
+            if (sass !== undefined) {
+                ownCandidates.set(name, (ownCandidates.get(name) ?? 0) + 1);
+                if (!sassCounted.has(name)) {
+                    sassCounted.add(name);
+                    ownDeclared.push({ name, value: sass });
+                }
+                continue;
+            }
             if (isKnownToken(name, table))
                 continue;
             ownCandidates.set(name, (ownCandidates.get(name) ?? 0) + 1);

package/dist/doctor/scss-lens.js

@@ -0,0 +1,82 @@
+/**
+ * A LENTE DO SCSS - as `$variáveis` dele lidas como o vocabulário que são (rodada 10 do refinamento, 27/09).
+ *
+ * O teste-import-scss declarava 20 `$variáveis` em `styles/_tokens.scss` e o censo saiu com `declared: {}`: o
+ * vocabulário só era lido de `--x` em `:root`/`@theme`, e o doctor dizia "0% token coverage" com todo valor
+ * novo escrito por uma `$variável`. Uma `$variável` some na compilação, mas é um nome que ELE deu a um valor -
+ * a mesma decisão que um `--x` registra.
+ *
+ * A LENTE SÓ EXISTE NA LEITURA. `$nome: valor;` no topo da folha vira `:root { --nome: valor; }`, e cada uso
+ * de `$nome` vira `var(--nome)`. Todo o resto do leitor - o vocabulário declarado, a cobertura, a ligação de
+ * um valor com o token dele - já sabe ler variável CSS, e passa a ler SCSS sem uma segunda implementação. O
+ * arquivo dele não é tocado; quem escreve de volta é o gerador, na grafia dele (`scss-speech.ts`).
+ *
+ * Só as declarações do NÍVEL DE FORA contam como vocabulário: uma `$x` dentro de um `@mixin` ou de uma regra
+ * é local, e chamar isso de token seria inventar um nome que ele não publicou.
+ */
+const DECL = /^\s*\$([A-Za-z_][\w-]*)\s*:\s*([^;]+?)\s*(?:!default|!global)?\s*;/;
+const USE = /\$([A-Za-z_][\w-]*)/g;
+/** As declarações do nível de fora, na ordem, sem seguir aliases. */
+function topLevel(scss) {
+    const out = [];
+    let depth = 0;
+    scss.split("\n").forEach((text, line) => {
+        if (depth === 0) {
+            const m = DECL.exec(text);
+            if (m)
+                out.push({ name: m[1], value: m[2].trim(), line });
+        }
+        for (const ch of text) {
+            if (ch === "{")
+                depth += 1;
+            else if (ch === "}")
+                depth = Math.max(0, depth - 1);
+        }
+    });
+    return out;
+}
+/** `$nome` -> o valor, com os aliases dele seguidos (`$accent: $teal-500` -> `#0e9f91`). */
+export function scssVariables(scss) {
+    const raw = new Map(topLevel(scss).map((d) => [`$${d.name}`, d.value]));
+    const out = new Map();
+    for (const name of raw.keys()) {
+        const seen = new Set([name]);
+        let value = raw.get(name);
+        for (let ref = /^\$([A-Za-z_][\w-]*)$/.exec(value); ref; ref = /^\$([A-Za-z_][\w-]*)$/.exec(value)) {
+            const next = raw.get(`$${ref[1]}`);
+            if (next === undefined || seen.has(`$${ref[1]}`))
+                break;
+            seen.add(`$${ref[1]}`);
+            value = next;
+        }
+        out.set(name, value);
+    }
+    return out;
+}
+/** A folha como o leitor de CSS a entende - ver o cabeçalho. Sem `$`, ela volta byte a byte. */
+export function scssAsCustomProperties(scss) {
+    if (!scss.includes("$"))
+        return scss;
+    const decls = new Map(topLevel(scss).map((d) => [d.line, d]));
+    return scss
+        .split("\n")
+        .map((text, line) => {
+        const d = decls.get(line);
+        if (d)
+            return `:root { --${d.name}: ${d.value.replace(USE, "var(--$1)")}; }`;
+        if (/^\s*@(use|forward|import)\b/.test(text))
+            return text;
+        return text.replace(USE, "var(--$1)");
+    })
+        .join("\n");
+}
+/**
+ * UMA FOLHA DELE, LIDA COMO O LEITOR A ENTENDE - a porta única da lente. Todo leitor de folha do usuário
+ * passa por aqui: o censo, o vocabulário do gerador, o `their-vars`, o doctor e o fim do turno. Um leitor
+ * que lesse o `.scss` cru veria "0% token coverage" onde os outros veem o vocabulário dele.
+ */
+export async function readStyleSheet(file) {
+    const { readFile } = await import("node:fs/promises");
+    const text = await readFile(file, "utf8").catch(() => "");
+    return /\.(scss|sass)$/i.test(file) ? scssAsCustomProperties(text) : text;
+}

package/dist/doctor/template-class-variants.js

@@ -0,0 +1,28 @@
+import { unionOfProp } from "./css-modules.js";
+const PIECE = /([A-Za-z][\w-]*?)\$\{\s*([A-Za-z_$][\w$]*)\s*\}/g;
+export function templateClassVariants(src, classes) {
+    const layers = [];
+    const claimed = new Set();
+    const seen = new Set();
+    for (const tpl of src.matchAll(/className=\{`([^`]*)`\}/g)) {
+        for (const m of tpl[1].matchAll(PIECE)) {
+            const prefix = m[1];
+            const prop = m[2];
+            if (seen.has(`${prefix}|${prop}`))
+                continue;
+            seen.add(`${prefix}|${prop}`);
+            for (const value of unionOfProp(src, prop)) {
+                const rule = classes.get(`${prefix}${value}`);
+                if (!rule)
+                    continue;
+                claimed.add(`${prefix}${value}`);
+                if (Object.keys(rule.base).length > 0)
+                    layers.push({ when: { variant: { [prop]: value } }, style: { ...rule.base } });
+                for (const [state, block] of Object.entries(rule.states))
+                    if (Object.keys(block).length > 0)
+                        layers.push({ when: { variant: { [prop]: value }, state }, style: { ...block } });
+            }
+        }
+    }
+    return { layers, claimed: [...claimed] };
+}

package/dist/doctor/ts-tokens-lens.js

@@ -0,0 +1,137 @@
+const kebab = (k) => k.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+/** Um literal de objeto a partir de `{`, ou `null` quando aparece algo que não é literal. */
+function parseObject(s, start) {
+    let i = start + 1;
+    const tree = {};
+    const ws = () => {
+        for (;;) {
+            while (i < s.length && /\s/.test(s[i]))
+                i += 1;
+            if (s.startsWith("//", i))
+                i = s.indexOf("\n", i) === -1 ? s.length : s.indexOf("\n", i);
+            else if (s.startsWith("/*", i))
+                i = s.indexOf("*/", i) === -1 ? s.length : s.indexOf("*/", i) + 2;
+            else
+                return;
+        }
+    };
+    const str = () => {
+        const q = s[i];
+        if (q !== '"' && q !== "'")
+            return null;
+        const end = s.indexOf(q, i + 1);
+        if (end === -1)
+            return null;
+        const out = s.slice(i + 1, end);
+        i = end + 1;
+        return out;
+    };
+    for (;;) {
+        ws();
+        if (s[i] === "}")
+            return { tree, end: i + 1 };
+        let key = str();
+        if (key === null) {
+            const m = /^[A-Za-z_$][\w$]*|^\d+/.exec(s.slice(i));
+            if (!m)
+                return null;
+            key = m[0];
+            i += key.length;
+        }
+        ws();
+        if (s[i] !== ":")
+            return null;
+        i += 1;
+        ws();
+        if (s[i] === "{") {
+            const inner = parseObject(s, i);
+            if (!inner)
+                return null;
+            tree[key] = inner.tree;
+            i = inner.end;
+        }
+        else {
+            const text = str();
+            if (text !== null)
+                tree[key] = text;
+            else {
+                const m = /^-?\d+(\.\d+)?/.exec(s.slice(i));
+                if (!m)
+                    return null;
+                tree[key] = Number(m[0]);
+                i += m[0].length;
+            }
+        }
+        ws();
+        if (s[i] === ",")
+            i += 1;
+    }
+}
+const DESIGN = /^(#[0-9a-f]{3,8}|rgba?\(|hsla?\(|oklch\(|cubic-bezier\(|-?\d+(\.\d+)?(px|rem|em|%|ms|s)\b)|,|['"]/i;
+function flatten(tree, prefix, out) {
+    for (const [k, v] of Object.entries(tree)) {
+        const path = [...prefix, kebab(k)];
+        if (typeof v === "object")
+            flatten(v, path, out);
+        else
+            out.set(`--${path.join("-")}`, typeof v === "number" ? `${v}px` : v);
+    }
+}
+/** Os objetos exportados que seguram valores de design - um objeto de rotas ou de textos não conta. */
+export function tsTokenObjects(source) {
+    const out = [];
+    for (const m of source.matchAll(/export\s+const\s+([A-Za-z_$][\w$]*)\s*(?::[^=]+)?=\s*\{/g)) {
+        const parsed = parseObject(source, (m.index ?? 0) + m[0].length - 1);
+        if (!parsed)
+            continue;
+        const values = new Map();
+        flatten(parsed.tree, [], values);
+        const leaves = [...values.values()];
+        const design = leaves.filter((v) => DESIGN.test(v) || /^\d+(\.\d+)?px$/.test(v)).length;
+        if (leaves.length >= 4 && design * 10 >= leaves.length * 6)
+            out.push({ name: m[1], values });
+    }
+    return out;
+}
+/** Os nomes locais pelos quais este arquivo importa cada objeto de tokens - `{ tokens as t }` -> `t`. */
+function localNames(source, objects) {
+    const out = new Map();
+    for (const m of source.matchAll(/import\s*\{([^}]*)\}\s*from\s*["'][^"']+["']/g))
+        for (const part of m[1].split(",")) {
+            const [imported, local] = part.trim().split(/\s+as\s+/).map((x) => x.trim());
+            const found = objects.find((o) => o.name === imported);
+            if (found && imported)
+                out.set(local || imported, found);
+        }
+    return out;
+}
+/** O arquivo como o leitor de estilo o entende - ver o cabeçalho. Sem objeto importado, ele volta igual. */
+export function tsTokensAsVars(source, objects) {
+    const locals = localNames(source, objects);
+    if (locals.size === 0)
+        return source;
+    const names = [...locals.keys()].map((n) => n.replace(/\$/g, "\\$")).join("|");
+    const member = new RegExp(`\\b(${names})\\.([A-Za-z_$][\\w$.]*)`);
+    const varOf = (local, path) => {
+        const key = `--${path.split(".").map(kebab).join("-")}`;
+        return locals.get(local)?.values.has(key) ? `var(${key})` : null;
+    };
+    let out = source.replace(/`([^`]*)`/g, (whole, body) => {
+        if (!body.includes("${"))
+            return whole;
+        let ok = true;
+        const text = body.replace(/\$\{([^}]*)\}([a-z%]*)/g, (_p, expr) => {
+            const m = new RegExp(`^\\s*${member.source}\\s*$`).exec(expr);
+            const v = m ? varOf(m[1], m[2]) : null;
+            if (!v)
+                ok = false;
+            return v ?? "";
+        });
+        return ok ? `"${text}"` : whole;
+    });
+    out = out.replace(new RegExp(`(:\\s*)${member.source}(?=\\s*[,}\\n])`, "g"), (whole, lead, local, path) => {
+        const v = varOf(local, path);
+        return v ? `${lead}"${v}"` : whole;
+    });
+    return out;
+}

package/dist/in-his-form.js

@@ -0,0 +1,133 @@
+const kebab = (v) => v.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const camel = (v) => v.replace(/-([a-z0-9])/g, (_m, c) => c.toUpperCase());
+const escape = (v) => v.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+export function inHisForm(files, form, 
+/** O nome que o componente ganha no projeto dele (`--as`), de onde sai a classe numa folha global. */
+componentName, 
+/** O nome da receita, de onde sai o nosso endereço interno (`ds-<receita>`). Ausente, é o mesmo. */
+recipeName) {
+    if (form.kind === "utility")
+        return files;
+    const root = `ds-${kebab(recipeName ?? componentName)}`;
+    const ours = new Set();
+    for (const f of files)
+        for (const m of f.content.matchAll(new RegExp(`\\b${escape(root)}(?:-[a-z0-9-]*[a-z0-9])?(?![\\w-])`, "g")))
+            ours.add(m[0]);
+    /** A mais longa primeiro, para `ds-button-icon-left` não virar `<root>-icon-left`. */
+    const classes = [...ours].sort((a, b) => b.length - a.length);
+    /**
+     * NUMA FOLHA GLOBAL, UM NOME QUE ELE JÁ USA SE MISTURA COM O DELE - provado em 28/09: o teste-import-css-vars
+     * já declara `.card` e `.card__title`. Um nome tomado ganha um número, o primeiro livre.
+     */
+    /** O prefixo dele, quando a folha global tem um (`acme-card`) - medido pelo censo (`classStyle.prefix`). */
+    const own = form.kind === "global" ? `${form.prefix ?? ""}${kebab(componentName)}` : kebab(componentName);
+    let base = own;
+    if (form.kind === "global" && form.taken) {
+        const free = (b) => !form.taken?.has(b);
+        for (let n = 2; !free(base); n += 1)
+            base = `${own}-${n}`;
+    }
+    const target = (cls) => {
+        const part = cls === root ? null : cls.slice(root.length + 1);
+        if (form.kind === "modules")
+            return part ? camel(part) : "root";
+        return part ? `${base}${form.partSeparator}${part}` : base;
+    };
+    const sheetOf = (f) => f.filename.endsWith(".css") || f.filename.endsWith(".scss");
+    const sheet = files.find(sheetOf);
+    const newSheet = sheet && form.kind === "modules"
+        ? sheet.filename.replace(/\.(s?css)$/, `.module.${form.ext}`)
+        : sheet?.filename;
+    return files.map((f) => {
+        let content = f.content;
+        if (sheetOf(f)) {
+            for (const cls of classes)
+                content = content.replace(new RegExp(`\\.${escape(cls)}(?![\\w-])`, "g"), `.${target(cls)}`);
+            return { ...f, filename: newSheet ?? f.filename, content };
+        }
+        if (!/\.(tsx|jsx)$/.test(f.filename))
+            return f;
+        if (form.kind === "modules") {
+            for (const cls of classes) {
+                const key = target(cls);
+                content = content
+                    .replace(new RegExp(`className="${escape(cls)}"`, "g"), `className={styles.${key}}`)
+                    .replace(new RegExp(`"${escape(cls)}"`, "g"), `styles.${key}`);
+            }
+            if (sheet && newSheet)
+                content = content.replace(new RegExp(`import\\s+["']\\./${escape(sheet.filename)}["'];?`), `import styles from "./${newSheet}";`);
+        }
+        else {
+            for (const cls of classes)
+                content = content.replace(new RegExp(`"${escape(cls)}"`, "g"), `"${target(cls)}"`);
+        }
+        return { ...f, content };
+    });
+}
+/**
+ * A FORMA DO PROJETO DELE, MEDIDA - e só num projeto DELE. O censo (`_synthesisui/census.json`) só existe
+ * depois de um import, que é quando o projeto é dele; num projeto novo nascido de um sistema nosso não há
+ * censo, e o gerador escreve na forma do sistema, como sempre (a regra de 27/09, `init` do fork).
+ *
+ * `utility` com zero utilitário é a leitura que o censo faz de um projeto BEM sem prefixo comum, ou de um de
+ * `style` inline (rodadas 7 e 9) - ali não há Tailwind, e o que ele tem é folha global.
+ */
+export async function hisFormOf(root, flavour) {
+    if (flavour === "tailwind")
+        return { kind: "utility" };
+    const { readFile, readdir } = await import("node:fs/promises");
+    const { join } = await import("node:path");
+    const raw = await readFile(join(root, "_synthesisui", "census.json"), "utf8").catch(() => "");
+    if (!raw)
+        return { kind: "utility" };
+    const census = JSON.parse(raw);
+    const style = census.classStyle;
+    const sheets = [];
+    const walk = async (dir) => {
+        for (const e of await readdir(dir, { withFileTypes: true }).catch(() => [])) {
+            if (e.name.startsWith(".") || ["node_modules", ".next", "_synthesisui", "dist", "build"].includes(e.name))
+                continue;
+            const p = join(dir, e.name);
+            if (e.isDirectory())
+                await walk(p);
+            else if (/\.(css|scss|sass)$/i.test(e.name))
+                sheets.push(p);
+        }
+    };
+    await walk(root);
+    if (style?.kind === "modules")
+        return { kind: "modules", ext: sheets.some((s) => /\.module\.(scss|sass)$/i.test(s)) ? "scss" : "css" };
+    /** As classes que as folhas DELE já declaram - nenhuma delas pode ser reusada por um componente gerado. */
+    const taken = new Set();
+    let bem = false;
+    for (const s of sheets) {
+        if (/\.module\./i.test(s))
+            continue;
+        const css = await readFile(s, "utf8").catch(() => "");
+        for (const m of css.matchAll(/\.(-?[_a-zA-Z][\w-]*)/g))
+            taken.add(m[1]);
+        if (/\.[a-z][\w-]*__[a-z]/i.test(css))
+            bem = true;
+    }
+    if (style?.kind === "global")
+        return { kind: "global", partSeparator: style.partSeparator || "-", prefix: style.prefix || "", taken };
+    if (style?.kind === "utility" && (style.utilities ?? 0) === 0)
+        return { kind: "global", partSeparator: bem ? "__" : "-", taken };
+    return { kind: "utility" };
+}
+/**
+ * A PORTA ÚNICA DA ESCRITA NO PROJETO DELE - a grafia (`scss-speech.ts`) e depois a forma (`inHisForm`).
+ *
+ * Todo comando que grava um componente gerado passa por aqui: `component`, `upgrade`, `refit` e `generate`.
+ * Revisão do #1629, 28/09: o `upgrade` regenerava direto do gerador, e num projeto de CSS Modules reescreveria
+ * o `.tsx` para importar um `button.css` global com `ds-button` - o componente de volta à nossa forma, e sem a
+ * folha dele. Um caminho que escreve sem passar por aqui é um caminho que escreve na nossa forma.
+ */
+export async function speakInHisProject(root, compDir, files, flavour, localName, recipeName) {
+    if (flavour === "tailwind")
+        return files;
+    const { relative } = await import("node:path");
+    const { inScssSpeech, scssVocabularyOf } = await import("./scss-speech.js");
+    const spoken = inScssSpeech(files, await scssVocabularyOf(root), relative(root, compDir));
+    return inHisForm(spoken, await hisFormOf(root, flavour), localName, recipeName);
+}

package/dist/install-marks.js

@@ -281,7 +281,15 @@
  * 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";
+/**
+ * 0.16.467 -> 0.16.469 em 28/09, e o passo 1 dá **SIM**: o componente gerado em modo CSS passa a sair sem o
+ * nosso `[data-ds]` - medido num build, a regra escopada não casava com nada no app dele e o botão ficava sem
+ * estilo, em todo projeto sem Tailwind -, e num projeto SCSS a folha sai `.scss`, com o `@use` da folha de
+ * tokens dele e as `$variáveis` dele (rodada 10 do refinamento). Um componente escrito antes está sem estilo.
+ * Na mesma versão, o componente sai na FORMA do projeto dele: `.module.(s)css` com `styles.root` onde ele usa
+ * CSS Modules, a classe sem o nosso `ds-` onde ele usa folha global (a linha do dono, 28/09 00:49).
+ */
+export const MATERIALISER_SINCE = "0.16.469";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *
@@ -897,7 +905,17 @@ export const CHECKER_SINCE = "0.16.467";
  * deveriam estar lá. Quem tem censo gravado precisa de um `sync` para a fila de trabalho dele ser a
  * real; ver o livro-razão de `corpus.spec.ts`.
  */
-export const READER_SINCE = "0.16.440";
+/**
+ * 0.16.440 -> 0.16.468 em 27/09, e o passo 1 dá **SIM**: num app de uma tela só a regra de duas telas deixa
+ * de tirar os componentes dele - rodadas 6 a 10 do refinamento, nos cinco estilos o sistema nascia sem
+ * nenhum componente do usuário. Um censo lido antes guardou essa lista vazia, e só remedir a enche.
+ */
+/**
+ * 0.16.468 -> 0.16.469 em 28/09, e o passo 1 dá **SIM**: o censo lê as `$variáveis` do SCSS e o objeto de tokens
+ * em TypeScript como o vocabulário dele, e a classe escolhida em tempo de execução pela união que tipa a prop
+ * (rodadas 7 a 10 do refinamento). Um censo lido antes guardou `declared: {}` para esses projetos.
+ */
+export const READER_SINCE = "0.16.469";
 /**
  * O QUE ESTÁ INSTALADO AQUI FICOU PARA TRÁS - e as DUAS condições que fazem isso ser verdade.
  *

package/dist/project-facts.js

@@ -14,6 +14,7 @@
  * emits. It renders completely unstyled, and nothing anywhere reports a problem.
  */
 import { readdir, readFile } from "node:fs/promises";
+import { readStyleSheet } from "./doctor/scss-lens.js";
 import { join, relative, sep } from "node:path";
 import { DEFAULT_CONVENTION, ThemeVocab, } from "./component-codegen.js";
 /**
@@ -344,8 +345,8 @@ export async function themeVocabOf(root, slug, names) {
             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(() => "");
+            else if (/\.(css|scss|sass)$/i.test(entry.name)) {
+                const css = await readStyleSheet(path);
                 if (!THEME_BLOCK.test(css) && !/:root\b/.test(css))
                     continue;
                 for (const [n, v] of declarationsIn(css, /--(?!ds-)[a-zA-Z0-9_-]+/))

package/dist/scss-speech.js

@@ -0,0 +1,61 @@
+import { readdir, readFile } from "node:fs/promises";
+import { join, relative } from "node:path";
+import { scssVariables } from "./doctor/scss-lens.js";
+const SKIP = new Set(["node_modules", ".next", "dist", "build", "out", "_synthesisui", "coverage"]);
+/** O vocabulário SCSS do projeto: a folha que declara mais `$variáveis` no nível de fora. */
+export async function scssVocabularyOf(root) {
+    let best = null;
+    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 (/\.(scss|sass)$/i.test(entry.name) && !/\.module\./i.test(entry.name)) {
+                const vars = scssVariables(await readFile(path, "utf8").catch(() => ""));
+                if (vars.size > (best?.vars.size ?? 0))
+                    best = { vars, tokensFile: relative(root, path).split("\\").join("/") };
+            }
+        }
+    };
+    await walk(root);
+    return best;
+}
+/** `styles/_tokens.scss`, visto de `components/button` -> `../../styles/tokens`. */
+function usePath(tokensFile, compDir) {
+    const bare = tokensFile.replace(/(^|\/)_([^/]+)$/, "$1$2").replace(/\.(scss|sass)$/i, "");
+    const rel = relative(compDir, bare).split("\\").join("/");
+    return rel.startsWith(".") ? rel : `./${rel}`;
+}
+export function inScssSpeech(files, vocab, compDir) {
+    if (!vocab || vocab.vars.size === 0)
+        return files;
+    const byValue = new Map();
+    for (const [name, value] of vocab.vars) {
+        const k = value.trim().toLowerCase();
+        byValue.set(k, [...(byValue.get(k) ?? []), name]);
+    }
+    const renamed = new Map();
+    const out = files.map((f) => {
+        if (!f.filename.endsWith(".css"))
+            return f;
+        const filename = f.filename.replace(/\.css$/, ".scss");
+        renamed.set(f.filename, filename);
+        const body = f.content
+            .replace(/var\(\s*--([A-Za-z_][\w-]*)\s*\)/g, (whole, n) => vocab.vars.has(`$${n}`) ? `$${n}` : whole)
+            .replace(/:\s*([^;{}]+?)\s*;/g, (whole, value) => {
+            const hits = byValue.get(value.trim().toLowerCase());
+            return hits && hits.length === 1 ? `: ${hits[0]};` : whole;
+        });
+        return { ...f, filename, content: `@use "${usePath(vocab.tokensFile, compDir)}" as *;\n\n${body}` };
+    });
+    return out.map((f) => {
+        if (!/\.(tsx|ts|jsx|js)$/.test(f.filename))
+            return f;
+        let content = f.content;
+        for (const [from, to] of renamed)
+            content = content.split(`./${from}`).join(`./${to}`);
+        return content === f.content ? f : { ...f, content };
+    });
+}

package/dist/styles-flavour.js

@@ -107,7 +107,16 @@ export async function measuredStyle(root) {
         return {};
     try {
         const census = JSON.parse(raw);
-        const kind = census.classStyle?.kind;
+        /**
+         * `utility` COM ZERO UTILITÁRIO NÃO É TAILWIND - rodada 7 do refinamento, provado em 28/09. É a leitura que o
+         * censo faz de um projeto BEM sem prefixo comum, ou de um de `style` inline: o teste-import-css-vars não tem
+         * Tailwind, e o `component` saía em utilitários. Com zero contados, o que ele escreve é folha global. O
+         * `utility` que manda Tailwind mesmo sem a dependência na raiz (o monorepo) continua valendo - ali há
+         * utilitários contados.
+         */
+        const kind = census.classStyle?.kind === "utility" && (census.classStyle.utilities ?? 0) === 0
+            ? "global"
+            : census.classStyle?.kind;
         return {
             byComponent: census.coverage?.byComponent,
             classStyle: kind === "global" || kind === "modules" || kind === "utility"

package/dist/their-vars.js

@@ -1,4 +1,5 @@
 import { readdir, readFile } from "node:fs/promises";
+import { readStyleSheet } from "./doctor/scss-lens.js";
 import { join } from "node:path";
 import { theirNames } from "./doctor/their-names.js";
 import { buildTable, normalizeValue, } from "./doctor/tokens.js";
@@ -235,7 +236,7 @@ async function harvestTheirCss(root) {
             if (entry.isDirectory())
                 await walk(path);
             else if (/\.(css|scss|sass|less)$/i.test(entry.name)) {
-                const source = await readFile(path, "utf8").catch(() => "");
+                const source = await readStyleSheet(path);
                 sheets.set(path, source);
                 css += `\n${source}`;
             }

package/package.json

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