synthesisui 0.16.385 → 0.16.387

package/dist/commands/component.js

@@ -9,7 +9,7 @@ import { body, section, snippet } from "../output.js";
 import { findCollision, reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { fetchComponent, RegistryError } from "../registry.js";
 import { flavourResolver } from "../styles-flavour.js";
-import { inTheirTongue, projectTongue } from "../their-tongue.js";
+import { inTheirTongue, projectTongue, sumSpoken, } from "../their-tongue.js";
 import { readCensus, unreadComment, unreadForComponent, } from "../unread-for-component.js";
 import { recordWritten } from "../written.js";
 /**
@@ -100,27 +100,26 @@ export async function component(slug, name, opts) {
      * continua sendo o caminho - o comando DIZ qual dos dois aconteceu.
      */
     const tongue = await projectTongue(root, slug);
-    const spoken = tongue ? inTheirTongue(res.css, tongue) : null;
-    const css = spoken ? spoken.css : res.css;
     /**
-     * E ELE FICA SABENDO - traduzir em silêncio é a outra metade do mesmo erro.
+     * O RELATÓRIO SÓ EXISTE DEPOIS DE OS BYTES EXISTIREM - e é essa ordem que corrige o defeito.
      *
-     * A última linha é a que decide se a nossa folha ainda é necessária aqui, e ela é a diferença
-     * entre "seu repositório dispensa a folha" e "quase" - dizer a primeira quando a verdade é a
-     * segunda é a promessa que quebra na tela dele.
+     * Ele era calculado aqui, sobre `res.css`, e impresso ANTES da materialização. Num projeto
+     * tailwind o CSS não vai a disco: a frase falava de um arquivo inexistente enquanto o `.tsx`
+     * escrito apontava 45 vezes para a nossa folha (medido no `button` do codelevel, 07/09). Agora
+     * cada caminho de escrita preenche esta variável com a tradução DAQUELES arquivos, e a mensagem
+     * sai no fim - depois da linha que nomeia o que foi escrito.
      */
-    if (spoken && (spoken.named > 0 || spoken.inlined > 0)) {
-        console.log(`  ${spoken.named} reference${spoken.named === 1 ? "" : "s"} now speak${spoken.named === 1 ? "s" : ""} the name YOUR code gives the value${spoken.inlined > 0 ? `, and ${spoken.inlined} carr${spoken.inlined === 1 ? "ies" : "y"} the value because your code names no token for it` : ""}.`);
-        console.log(spoken.left.length === 0
-            ? `  Nothing in this file points at our stylesheet - it renders on your own tokens alone.`
-            : `  ${spoken.left.length} still point${spoken.left.length === 1 ? "s" : ""} at our stylesheet (${spoken.left.slice(0, 3).join(", ")}${spoken.left.length > 3 ? ", …" : ""}), so tokens.css is still needed here.`);
-    }
+    let spoken = null;
     const artifactsAreTheProduct = opts.artifactsOnly === true || config.target !== "next";
     if (artifactsAreTheProduct) {
         const dir = join(root, "_synthesisui", "ds", slug, "components");
         await mkdir(dir, { recursive: true });
         await writeFile(join(dir, `${res.name}.json`), `${JSON.stringify(res.recipe, null, 2)}\n`, "utf8");
-        await writeFile(join(dir, `${res.name}.css`), `${css}\n`, "utf8");
+        /** A FOLHA TAMBÉM PASSA PELA PORTA - este caminho escreve sem o codegen. */
+        const sheet = tongue ? inTheirTongue(res.css, tongue) : null;
+        if (sheet)
+            spoken = sheet;
+        await writeFile(join(dir, `${res.name}.css`), `${sheet ? sheet.css : res.css}\n`, "utf8");
         console.log(`✓ ${res.name} → _synthesisui/ds/${slug}/components/${res.name}.{json,css}  (${slug} v${res.version})`);
     }
     // 2. YOUR component - a real, importable `export function <Pascal>()` in the
@@ -169,7 +168,29 @@ export async function component(slug, name, opts) {
          */
         const theirs = res.recipe?.api;
         const already = theirs?.file && existsSync(join(root, theirs.file)) ? theirs : null;
-        if (already && !opts.force) {
+        /**
+         * UM NOME PRÓPRIO JÁ É A RESPOSTA PARA A COLISÃO - achado do dono em 06/09, e é a SEGUNDA volta
+         * deste mesmo defeito.
+         *
+         * O QUE ELE FEZ: `component codelevel button --as=ButtonSample`, no repositório de onde o
+         * sistema foi importado. A recusa disparou, disse *"writing another one would leave you with
+         * two"* e ofereceu `--force` - com um `--as` na linha de comando, ignorado.
+         *
+         * OS DOIS ERROS DE UMA VEZ. O primeiro é a decisão: este guard responde "você já tem" sem
+         * nunca ler `opts.as`, embora `localName` - a função que resolve o nome - fique 70 linhas
+         * abaixo. O segundo é a frase: com um nome próprio NÃO ficariam dois `Button`; ficaria o dele
+         * e um `ButtonSample`. E a única saída oferecida, `--force`, escreve com o nome ORIGINAL - a
+         * única opção que de fato causaria a duplicação que a mensagem existe para evitar.
+         *
+         * A PRIMEIRA VOLTA está registrada em `component-as.spec.ts`: a recusa IMPRIMIA `--as` e a
+         * flag não existia em `ComponentOptions`. A flag nasceu; o guard não passou a consultá-la.
+         *
+         * E A POPULAÇÃO É O CLIENTE-ALVO INTEIRO. Medido na base viva em 06/09: no `codelevel`, **64
+         * dos 66** componentes (97%) apontam para um arquivo que existe no repositório dele - porque o
+         * sistema NASCEU dali. Nos 25 sistemas gerados aqui, **0 de ~45**. O comando funcionava para
+         * quem não é o cliente e recusava para quem é.
+         */
+        if (already && !opts.force && !opts.as?.trim()) {
             console.log(section("You already have this component"));
             console.log(body(`\`${already.name}\` lives in ${already.file} - writing another one would leave you with two.`));
             if (already.from) {
@@ -180,14 +201,44 @@ export async function component(slug, name, opts) {
                 console.log(body(`It is not re-exported from that folder's entry, so import it by path.`));
             }
             console.log("");
-            console.log(body("The recipe and the compiled CSS are on disk either way - only the .tsx was not written. Pass --force to write it anyway."));
+            /**
+             * A SAÍDA QUE NÃO DUPLICA VEM PRIMEIRO, e ela é a que a pessoa quer em quase todo caso.
+             *
+             * `--force` continua existindo e continua last: ele escreve com o nome DELE, que é a única
+             * opção que realmente deixa dois. Oferecê-lo como única saída era mandar a pessoa fazer
+             * exatamente o que a frase acima diz para evitar.
+             */
+            console.log(body(`To see what this recipe produces without touching your file, give it a name of its own:`));
+            console.log("");
+            console.log(snippet([
+                `npx synthesisui@latest component ${slug} ${res.name} --as ${res.name}-sample`,
+            ]));
+            console.log("");
+            console.log(body("The recipe and the compiled CSS are on disk either way - only the .tsx was not written. Pass --force to overwrite yours instead."));
             return;
         }
-        const clash = await findCollision(root, config.componentsDir, res.name, pascalName);
+        /**
+         * A COLISÃO SE MEDE PELO NOME QUE VAI SER ESCRITO, e não pelo do blueprint.
+         *
+         * A metade que o guard acima não resolvia sozinha: passado o primeiro guard com `--as`, este
+         * procurava por `button`/`Button` - o nome do BLUEPRINT - e achava o componente dele de novo.
+         * Consertar um e deixar o outro deixaria o `--as` aceito e barrado uma linha depois, o que é
+         * pior que recusar de cara: a pessoa faz o que a tela mandou e recebe outra recusa.
+         *
+         * `local` já era calculado, 70 linhas abaixo, para decidir a PASTA. Ele sobe para cá porque é
+         * a mesma pergunta - qual nome este comando vai ocupar - e duas respostas para ela é o defeito.
+         */
+        const local = localName(res.name, opts.as);
+        const localPascal = local
+            .split(/[^a-zA-Z0-9]+/)
+            .filter(Boolean)
+            .map((p) => p[0].toUpperCase() + p.slice(1))
+            .join("");
+        const clash = await findCollision(root, config.componentsDir, local, localPascal);
         if (!opts.force && (clash.exported || (clash.file && !clash.ours))) {
             console.log(section("This name is already taken in your project"));
             if (clash.exported) {
-                console.log(body(`\`${pascalName}\` is already exported from ${clash.exported}.`));
+                console.log(body(`\`${localPascal}\` is already exported from ${clash.exported}.`));
             }
             if (clash.file && !clash.ours) {
                 console.log(body(`${clash.file} exists and we did not write it.`));
@@ -211,7 +262,7 @@ export async function component(slug, name, opts) {
          * componente. O CSS não muda de nome: a receita é a do blueprint, e as classes dela são
          * `.ds-<blueprint>` - o componente novo veste o mesmo desenho, com o nome dele no arquivo.
          */
-        const local = localName(res.name, opts.as);
+        /** Ver o cálculo acima: uma resposta só para "qual nome este comando ocupa". */
         const compDir = join(root, config.componentsDir, local);
         await mkdir(compDir, { recursive: true });
         let filenames;
@@ -220,9 +271,23 @@ export async function component(slug, name, opts) {
             // it wears (.css) + the barrel. Ignores the css|tailwind flavor - the
             // template drives itself off the .ds-* classes.
             const tsx = interactiveTemplate(res.name);
+            /**
+             * O TEMPLATE CURADO TAMBÉM FALA A LÍNGUA DELE - e como `stylesheet`.
+             *
+             * Ele escreve `transition: opacity var(--ds-motion-durations-base)` num `style` inline de
+             * JSX, onde o espaço é válido: pedir o escape do Tailwind aqui trocaria um valor correto por
+             * um inválido. O caminho interativo escreve sem o codegen, então a porta é chamada aqui.
+             */
+            const say = (text) => tongue ? inTheirTongue(text, tongue, "stylesheet") : null;
+            const saidTsx = say(tsx);
+            const saidCss = say(res.css);
+            spoken = sumSpoken([saidTsx, saidCss]);
             const written = [
-                { filename: `${local}.tsx`, content: tsx },
-                { filename: `${local}.css`, content: `${css}\n` },
+                { filename: `${local}.tsx`, content: saidTsx ? saidTsx.css : tsx },
+                {
+                    filename: `${local}.css`,
+                    content: `${saidCss ? saidCss.css : res.css}\n`,
+                },
                 { filename: "index.ts", content: `export * from "./${local}";\n` },
             ];
             for (const f of written)
@@ -232,7 +297,7 @@ export async function component(slug, name, opts) {
             filenames = written.map((f) => f.filename);
         }
         else {
-            const files = generateComponentFiles(slug, res.name, res.recipe, css, res.version, flavour, await reactMajorOf(root), 
+            const { files, spoken: said } = generateComponentFiles(slug, res.name, res.recipe, res.css, res.version, flavour, await reactMajorOf(root), 
             /**
              * THE SPELLING, FROM THE VERSION WE JUST FETCHED.
              *
@@ -251,7 +316,8 @@ export async function component(slug, name, opts) {
              * O ARQUIVO e o EXPORT levam o nome dele; a CLASSE continua sendo a do blueprint. Um
              * `<CardPreview>` vestindo `.ds-card` está estilizado certo e não faz sombra em nada dele.
              */
-            local, await readInstalledScheme(root, slug));
+            local, await readInstalledScheme(root, slug), tongue);
+            spoken = said;
             /**
              * AS DECLARAÇÕES DO ARQUIVO DELE QUE O INTERPRETADOR NÃO LEU - ver `unread-for-component.ts`.
              *
@@ -285,6 +351,19 @@ export async function component(slug, name, opts) {
     else if (opts.interactive && !hasInteractiveTemplate(res.name)) {
         console.log(`  note: no interactive template for "${res.name}" - materialized the standard shell.`);
     }
+    /**
+     * O RELATÓRIO DA TRADUÇÃO - agora sobre os arquivos que ACABARAM de ser nomeados acima.
+     *
+     * Um ponto só, depois de todo caminho de escrita (artefato, interativo, codegen), porque a
+     * pergunta é uma: o que foi escrito ainda precisa da nossa folha? Enquanto isto era calculado
+     * antes da materialização, a resposta descrevia outro arquivo.
+     */
+    if (spoken && (spoken.named > 0 || spoken.inlined > 0)) {
+        console.log(`  ${spoken.named} reference${spoken.named === 1 ? "" : "s"} now speak${spoken.named === 1 ? "s" : ""} the name YOUR code gives the value${spoken.inlined > 0 ? `, and ${spoken.inlined} carr${spoken.inlined === 1 ? "ies" : "y"} the value because your code names no token for it` : ""}.`);
+        console.log(spoken.left.length === 0
+            ? `  No variable in what was just written points at our stylesheet - they are all names YOUR code declares.`
+            : `  ${spoken.left.length} still point${spoken.left.length === 1 ? "s" : ""} at our stylesheet (${spoken.left.slice(0, 3).join(", ")}${spoken.left.length > 3 ? ", …" : ""}), so tokens.css carries ${spoken.left.length === 1 ? "it" : "those"}.`);
+    }
     // ── DX: concrete paths + copy-pasteable snippets, with breathing room ──
     const tailwind = flavour === "tailwind";
     const imports = tailwind
@@ -295,6 +374,23 @@ export async function component(slug, name, opts) {
         ]
         : [`@import "../_synthesisui/ds/${slug}/tokens.css";`];
     console.log(section(`One-time setup (once per app, for "${slug}")`));
+    /**
+     * POR QUE O SETUP CONTINUA AQUI QUANDO NENHUMA VARIÁVEL É NOSSA - e dizer isto é o conserto.
+     *
+     * A tentação era suprimir o bloco quando `left` é vazio, e ele leria como a promessa "seu
+     * repositório dispensa a folha". Medido no codelevel (07/09): as duas coisas são independentes.
+     * As VARIÁVEIS podem ser todas dele e o arquivo continua vestindo utilitários que só o adaptador
+     * do sistema gera (`rounded-3`, `gap-2xs`) e movimento que o `theme.css` declara referenciando
+     * `--ds-*`. Suprimir entregaria um componente sem raio e sem gap.
+     *
+     * Então o bloco não muda de tamanho: ele muda de MOTIVO. A linha abaixo diz qual das duas coisas
+     * a importação ainda serve, e ela é derivada, nunca fixa.
+     */
+    if (spoken && spoken.left.length === 0) {
+        console.log(body(`(the variables are already yours - what these imports still bring is the`));
+        console.log(body(` system's own utilities and its motion, which the app has to generate)`));
+        console.log("");
+    }
     console.log(body(`1. Import the design system in your GLOBAL stylesheet, e.g. app/globals.css`));
     console.log(body(`   (the path is relative to that file - hence the leading ../):`));
     console.log("");
@@ -307,7 +403,19 @@ export async function component(slug, name, opts) {
     console.log(body(`(If you haven't installed the system yet, run: synthesisui add ${slug})`));
     console.log(section("Use it"));
     if (!opts.artifactsOnly && config.target === "next") {
-        const pascalName = res.name
+        /**
+         * O EXEMPLO APONTA PARA O QUE FOI ESCRITO - a terceira metade do defeito do `--as` (06/09).
+         *
+         * Este bloco derivava o nome e o caminho de `res.name`, o nome do BLUEPRINT. Com
+         * `--as button-sample`, o arquivo vai para `components/button-sample/` e o exemplo mandava
+         * importar de `components/button` - um caminho que não existe. Um comando que escreve certo e
+         * instrui errado é pior que um que recusa: a pessoa copia a linha e o build quebra.
+         *
+         * `localName` é a mesma função dos dois guards acima. Uma resposta só para o nome, do primeiro
+         * guard até a última linha impressa.
+         */
+        const usedName = localName(res.name, opts.as);
+        const pascalName = usedName
             .split(/[^a-zA-Z0-9]+/)
             .filter(Boolean)
             .map((p) => p[0].toUpperCase() + p.slice(1))
@@ -318,7 +426,7 @@ export async function component(slug, name, opts) {
             ? ` ${firstAxis[0]}="${Object.keys(firstAxis[1])[0]}"`
             : "";
         console.log(snippet([
-            `import { ${pascalName} } from "@/${config.componentsDir}/${res.name}";`,
+            `import { ${pascalName} } from "@/${config.componentsDir}/${usedName}";`,
             "",
             `<${pascalName}${exampleProp} />`,
         ]));
@@ -327,7 +435,7 @@ export async function component(slug, name, opts) {
         console.log("");
         console.log(body("Or ask your agent:"));
         console.log(snippet([
-            `"Use the ${pascalName} component from ${config.componentsDir}/${res.name} (SynthesisUI ${slug})."`,
+            `"Use the ${pascalName} component from ${config.componentsDir}/${usedName} (SynthesisUI ${slug})."`,
         ]));
     }
     else {

package/dist/commands/generate.js

@@ -6,6 +6,7 @@ import { installedSlugs } from "../installed.js";
 import { reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { postGenerate, RegistryError } from "../registry.js";
 import { flavourResolver } from "../styles-flavour.js";
+import { projectTongue } from "../their-tongue.js";
 import { recordWritten } from "../written.js";
 /** PascalCase para o hint de import (course-card → CourseCard). */
 function pascalName(name) {
@@ -69,10 +70,12 @@ export async function generate(description, opts) {
         await mkdir(compDir, { recursive: true });
         // A LÍNGUA DE CADA COMPONENTE, resolvida uma vez - ver `flavourResolver`.
         const flavourOf = await flavourResolver(root, config.styles);
-        const files = generateComponentFiles(slug, res.name, res.recipe, res.css, version, flavourOf(res.name), await reactMajorOf(root), 
+        const { files } = generateComponentFiles(slug, res.name, res.recipe, res.css, version, flavourOf(res.name), await reactMajorOf(root), 
         // Read off the installed document: a generated component lands in the same
         // project as the stylesheet it has to match.
-        await readInstalledConvention(root, slug), res.name, await readInstalledScheme(root, slug));
+        await readInstalledConvention(root, slug), res.name, await readInstalledScheme(root, slug), 
+        /** O VOCABULÁRIO DELE - um componente gerado cai no mesmo projeto e fala a mesma língua. */
+        await projectTongue(root, slug));
         for (const file of files) {
             await writeFile(join(compDir, file.filename), file.code, "utf8");
         }

package/dist/commands/refit.js

@@ -7,6 +7,7 @@ import { body, section, snippet } from "../output.js";
 import { reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { fetchComponent, postRefit, postSaveComponent, RegistryError, } from "../registry.js";
 import { flavourResolver } from "../styles-flavour.js";
+import { projectTongue } from "../their-tongue.js";
 import { recordWritten } from "../written.js";
 /** Slugs INSTALLED under `_synthesisui/ds/` (a `.lock` marks a real install -
  *  a folder holding only refit artifacts doesn't count). */
@@ -118,7 +119,9 @@ export async function refit(file, opts) {
         await mkdir(compDir, { recursive: true });
         // A LÍNGUA DE CADA COMPONENTE, resolvida uma vez - ver `flavourResolver`.
         const flavourOf = await flavourResolver(root, config.styles);
-        const files = generateComponentFiles(slug, res.name, res.recipe, res.css, saved.version, flavourOf(res.name), await reactMajorOf(root), await readInstalledConvention(root, slug), res.name, await readInstalledScheme(root, slug));
+        const { files } = generateComponentFiles(slug, res.name, res.recipe, res.css, saved.version, flavourOf(res.name), await reactMajorOf(root), await readInstalledConvention(root, slug), res.name, await readInstalledScheme(root, slug), 
+        /** O VOCABULÁRIO DELE - o `refit` reescreve o componente e não passava pela porta. */
+        await projectTongue(root, slug));
         for (const f of files) {
             await writeFile(join(compDir, f.filename), f.code, "utf8");
         }

package/dist/commands/upgrade.js

@@ -11,6 +11,7 @@ import { body, section, snippet } from "../output.js";
 import { reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { fetchChangelog, fetchComponent, fetchDesignSystem, RegistryError, } from "../registry.js";
 import { flavourResolver } from "../styles-flavour.js";
+import { projectTongue } from "../their-tongue.js";
 import { readCensus, unreadComment, unreadForComponent, } from "../unread-for-component.js";
 import { editedSinceWritten, keptLine, readWritten, recordWritten, } from "../written.js";
 import { add } from "./add.js";
@@ -323,6 +324,13 @@ export async function upgrade(asked, opts) {
         // componente: `upgrade` reescreve tudo que já está instalado, e reler o censo a cada
         // arquivo seria a mesma resposta lida N vezes. Ver `flavourResolver`.
         const flavourOf = await flavourResolver(root, config.styles);
+        /**
+         * O VOCABULÁRIO DELE, e este comando é o que mais precisava dele: `upgrade` REESCREVE
+         * componentes que a pessoa já tem, e ele não passava pela porta - então cada corrida DESFAZIA a
+         * tradução que o `component` tinha feito, devolvendo `var(--ds-*)` a arquivos que já falavam a
+         * língua do repositório. Resolvido uma vez para a corrida inteira, como o sabor.
+         */
+        const tongue = await projectTongue(root, slug);
         for (const entry of entries) {
             const tsxPath = join(componentsRoot, entry, `${entry}.tsx`);
             let head = "";
@@ -347,11 +355,11 @@ export async function upgrade(asked, opts) {
             }
             try {
                 const res = await fetchComponent(base, slug, entry);
-                const files = generateComponentFiles(slug, res.name, res.recipe, res.css, res.version, flavourOf(res.name), 
+                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));
+                await reactMajorOf(root), res.classNames ?? (await readInstalledConvention(root, slug)), res.name, await readInstalledScheme(root, slug), tongue);
                 /**
                  * A NOTA DAS DECLARAÇÕES NÃO INTERPRETADAS SOBREVIVE AO UPGRADE.
                  *

package/dist/component-codegen.js

@@ -1,4 +1,5 @@
 import { emittableAttrs } from "./attr-shape.js";
+import { inTheirTongue, sumSpoken, } from "./their-tongue.js";
 import { PHRASING_FORMS, } from "./types.js";
 export const DEFAULT_CONVENTION = {
     prefix: "ds-",
@@ -1384,7 +1385,20 @@ localName = name,
  * without ever deciding, and an optional argument that can be forgotten is the
  * shape this file has already been bitten by. `tsc` refuses the half-call instead.
  */
-scheme) {
+scheme, 
+/**
+ * O VOCABULÁRIO DESTE REPOSITÓRIO - `projectTongue(root, slug)`, ou `null` quando não há mapa.
+ *
+ * OBRIGATÓRIO, e é a única forma de fechar a porta (INV-VOLTA-02). A tradução morava em cada
+ * comando: o `component` traduzia o CSS por fora e o `upgrade`, o `refit` e o `generate` não
+ * traduziam nada - três dos cinco materializadores reescreviam o repositório dele com
+ * `var(--ds-*)` cru, e o `upgrade` DESFAZIA a tradução que o `component` tinha feito. O gate lia
+ * o texto do módulo e via a porta importada, então passava verde.
+ *
+ * Aqui a tradução acontece uma vez, sobre os bytes que vão a disco, e `tsc` recusa a meia-chamada
+ * de um materializador novo - o mesmo argumento do `scheme` logo acima.
+ */
+tongue) {
     const files = [];
     const props = propsTypeName(reactMajor);
     if (styles === "css") {
@@ -1404,5 +1418,28 @@ scheme) {
         filename: "index.ts",
         code: `export * from "./${localName}";\n`,
     });
-    return files;
+    return speak(files, tongue, styles === "tailwind" ? "tailwind-class" : "stylesheet");
+}
+/**
+ * A TRADUÇÃO, SOBRE OS BYTES, UMA VEZ - e o destino é de quem GEROU o texto, não da extensão.
+ *
+ * No modo tailwind toda referência nossa está DENTRO de um valor arbitrário (`arbitrary()` é o
+ * único ponto do módulo que escreve `var(--ds-…)`, e ele sempre a envolve em `[prop:…]`), então um
+ * gradiente inlined precisa de `_` no lugar do espaço ou a classe não é gerada. Numa folha, e num
+ * `style` inline de JSX, o espaço é válido e `_` seria o defeito - por isso `interactive-templates`
+ * (que escreve `transition: opacity var(--ds-…)`) chama a porta como `stylesheet`.
+ *
+ * `index.ts` é um re-export e não carrega estilo, mas passa pela mesma porta: um arquivo isento por
+ * lista é a lista que alguém esquece de atualizar.
+ */
+function speak(files, tongue, tsxDestination) {
+    if (!tongue)
+        return { files, spoken: null };
+    const reports = [];
+    const said = files.map((file) => {
+        const spoken = inTheirTongue(file.code, tongue, file.filename.endsWith(".css") ? "stylesheet" : tsxDestination);
+        reports.push(spoken);
+        return { filename: file.filename, code: spoken.css };
+    });
+    return { files: said, spoken: sumSpoken(reports) };
 }

package/dist/install-marks.js

@@ -170,7 +170,7 @@
  * O que o cliente ganha ao rodar `upgrade`: o agente dele no Codex passa a poder PERGUNTAR ao
  * sistema, em vez de só receber as regras e adivinhar o resto.
  */
-export const MATERIALISER_SINCE = "0.16.370";
+export const MATERIALISER_SINCE = "0.16.387";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *

package/dist/their-tongue.js

@@ -1,6 +1,29 @@
 /** `var(--ds-x)` e `var(--ds-x, fallback)` - o que a folha compilada escreve. */
 const OUR_VAR = /var\(\s*(--ds-[a-zA-Z0-9_-]+)\s*(?:,([^()]*))?\)/g;
-export function inTheirTongue(css, tongue) {
+/**
+ * VÁRIOS ARQUIVOS, UM NÚMERO - porque a promessa é sobre a MATERIALIZAÇÃO, não sobre um arquivo.
+ *
+ * Um componente sai como `.tsx` + `.css` + barrel, e dizer "nada aponta para a nossa folha" só é
+ * verdade quando nenhum dos três aponta. Somar aqui, e não em cada comando, é o que impede duas
+ * contas diferentes para a mesma pergunta.
+ *
+ * `null` quando nada foi traduzido (projeto sem mapa) - e aí quem chama DIZ isso.
+ */
+export function sumSpoken(reports) {
+    const real = reports.filter((r) => r !== null);
+    if (real.length === 0)
+        return null;
+    const left = new Set();
+    for (const r of real)
+        for (const name of r.left)
+            left.add(name);
+    return {
+        named: real.reduce((n, r) => n + r.named, 0),
+        inlined: real.reduce((n, r) => n + r.inlined, 0),
+        left: [...left].sort(),
+    };
+}
+export function inTheirTongue(css, tongue, destination = "stylesheet") {
     let named = 0;
     let inlined = 0;
     const left = new Set();
@@ -18,7 +41,9 @@ export function inTheirTongue(css, tongue) {
         const value = tongue.values.get(name);
         if (value) {
             inlined += 1;
-            return value;
+            return destination === "tailwind-class"
+                ? value.replace(/\s+/g, "_")
+                : value;
         }
         left.add(name);
         return fallback ? whole : whole;

package/package.json

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