synthesisui 0.16.386 → 0.16.388

package/dist/commands/add.js

@@ -551,7 +551,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) {
+    if (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.
@@ -570,7 +570,7 @@ export async function add(slug, opts) {
          * Entao a linha diz o FATO que ela tem - a classe dele continua significando o que
          * significa - e nomeia os primeiros, para quem quiser discordar de qualquer um.
          */
-        `  ${aligned.kept} Tailwind utilit${aligned.kept === 1 ? "y" : "ies"} now point at your own decisions; ${aligned.dropped.length} were left as ${aligned.dropped.length === 1 ? "it is" : "they are"} (${aligned.dropped.slice(0, 3).join(", ")}${aligned.dropped.length > 3 ? ", …" : ""}) - your classes keep meaning what they mean today.`));
+        `  ${aligned.kept} Tailwind utilit${aligned.kept === 1 ? "y" : "ies"} now point at your own decisions${aligned.own.length > 0 ? `; ${aligned.own.length} more name${aligned.own.length === 1 ? "s a utility" : " utilities"} only this system has (${aligned.own.slice(0, 3).join(", ")}${aligned.own.length > 3 ? ", …" : ""}), so they are declared here` : ""}${aligned.dropped.length > 0 ? `; ${aligned.dropped.length} were left as ${aligned.dropped.length === 1 ? "it is" : "they are"} (${aligned.dropped.slice(0, 3).join(", ")}${aligned.dropped.length > 3 ? ", …" : ""}) - your classes keep meaning what they mean today` : ""}.`));
     }
     /**
      * O CICLO RECUSADO É DITO, e não engolido - senão o cliente lê um número menor sem saber por quê.

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
@@ -272,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)
@@ -284,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.
              *
@@ -303,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`.
              *
@@ -337,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
@@ -347,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("");

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.388";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *

package/dist/tailwind-theme-vars.js

@@ -0,0 +1,453 @@
+/**
+ * O QUE O TAILWIND JÁ DECLARA - e por isso NÃO é uma referência pendurada.
+ *
+ * O QUE O CLIENTE PERCEBE SEM ISTO. A folha que ele instala o avisava sobre uma variável que
+ * funciona: *"--font-sans has no name in this system"*. Ela tem - o `@import "tailwindcss"` do
+ * projeto dele a declara, e a regra pinta certo. Um aviso falso no arquivo dele custa mais que
+ * aviso nenhum, e a tela de admin cobrava, pelo mesmo motivo, um trabalho que não existe.
+ *
+ * MEDIDO em 01/09 nos 26 sistemas de produção: 3 variáveis acusadas de penduradas, todas num
+ * sistema só - o `codelevel`, que é o único importado de um repositório real. Das três, DUAS
+ * (`--font-sans`, `--animate-spin`) são declaradas aqui. A terceira, `--tracking-tightest`, não é -
+ * e essa continua sendo apontada, porque ela é genuína: a escala do Tailwind vai até
+ * `--tracking-tighter`, e o degrau a mais é uma decisão da escala DELE.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * ESTA LISTA É DERIVADA DO PACOTE, NUNCA ESCRITA À MÃO - `tailwind-theme-vars.spec.ts` a compara
+ * com o `@theme` de `node_modules/tailwindcss/theme.css` e reprova quando as duas divergem. Uma
+ * lista curada envelheceria em silêncio na primeira versão nova do Tailwind, e o sintoma seria o
+ * defeito que ela existe para evitar: um aviso falso na folha do cliente.
+ *
+ * PROCEDÊNCIA: extraída de `tailwindcss@4.2.1`, 419 nomes. A versão fica em comentário e não em
+ * constante de propósito - o que importa é a lista BATER com o pacote instalado, e é isso que o
+ * spec compara. Uma constante de versão que só o teste lê é um símbolo que o produto não chama.
+ *
+ * POR QUE UMA LISTA E NÃO UM PREFIXO: `--tracking-tighter` e `--tracking-tightest` compartilham o
+ * prefixo e têm respostas OPOSTAS. É exatamente a distinção que decide, então o nome é o dado.
+ *
+ * O PRESSUPOSTO, dito em voz alta: o projeto de destino importa o Tailwind. Ele já é o pressuposto
+ * de todo o compilador - `CASCADE_LAYERS` são as quatro camadas que `@import "tailwindcss"`
+ * declara, e o `theme.css`/`shadcn.css` do payload existem para essa stack.
+ */
+/** Toda custom property que o `@theme` padrão do Tailwind declara, incluindo o bloco deprecated. */
+export const TAILWIND_THEME_VARS = new Set([
+    "--animate-bounce",
+    "--animate-ping",
+    "--animate-pulse",
+    "--animate-spin",
+    "--aspect-video",
+    "--blur",
+    "--blur-2xl",
+    "--blur-3xl",
+    "--blur-lg",
+    "--blur-md",
+    "--blur-sm",
+    "--blur-xl",
+    "--blur-xs",
+    "--breakpoint-2xl",
+    "--breakpoint-lg",
+    "--breakpoint-md",
+    "--breakpoint-sm",
+    "--breakpoint-xl",
+    "--color-amber-100",
+    "--color-amber-200",
+    "--color-amber-300",
+    "--color-amber-400",
+    "--color-amber-50",
+    "--color-amber-500",
+    "--color-amber-600",
+    "--color-amber-700",
+    "--color-amber-800",
+    "--color-amber-900",
+    "--color-amber-950",
+    "--color-black",
+    "--color-blue-100",
+    "--color-blue-200",
+    "--color-blue-300",
+    "--color-blue-400",
+    "--color-blue-50",
+    "--color-blue-500",
+    "--color-blue-600",
+    "--color-blue-700",
+    "--color-blue-800",
+    "--color-blue-900",
+    "--color-blue-950",
+    "--color-cyan-100",
+    "--color-cyan-200",
+    "--color-cyan-300",
+    "--color-cyan-400",
+    "--color-cyan-50",
+    "--color-cyan-500",
+    "--color-cyan-600",
+    "--color-cyan-700",
+    "--color-cyan-800",
+    "--color-cyan-900",
+    "--color-cyan-950",
+    "--color-emerald-100",
+    "--color-emerald-200",
+    "--color-emerald-300",
+    "--color-emerald-400",
+    "--color-emerald-50",
+    "--color-emerald-500",
+    "--color-emerald-600",
+    "--color-emerald-700",
+    "--color-emerald-800",
+    "--color-emerald-900",
+    "--color-emerald-950",
+    "--color-fuchsia-100",
+    "--color-fuchsia-200",
+    "--color-fuchsia-300",
+    "--color-fuchsia-400",
+    "--color-fuchsia-50",
+    "--color-fuchsia-500",
+    "--color-fuchsia-600",
+    "--color-fuchsia-700",
+    "--color-fuchsia-800",
+    "--color-fuchsia-900",
+    "--color-fuchsia-950",
+    "--color-gray-100",
+    "--color-gray-200",
+    "--color-gray-300",
+    "--color-gray-400",
+    "--color-gray-50",
+    "--color-gray-500",
+    "--color-gray-600",
+    "--color-gray-700",
+    "--color-gray-800",
+    "--color-gray-900",
+    "--color-gray-950",
+    "--color-green-100",
+    "--color-green-200",
+    "--color-green-300",
+    "--color-green-400",
+    "--color-green-50",
+    "--color-green-500",
+    "--color-green-600",
+    "--color-green-700",
+    "--color-green-800",
+    "--color-green-900",
+    "--color-green-950",
+    "--color-indigo-100",
+    "--color-indigo-200",
+    "--color-indigo-300",
+    "--color-indigo-400",
+    "--color-indigo-50",
+    "--color-indigo-500",
+    "--color-indigo-600",
+    "--color-indigo-700",
+    "--color-indigo-800",
+    "--color-indigo-900",
+    "--color-indigo-950",
+    "--color-lime-100",
+    "--color-lime-200",
+    "--color-lime-300",
+    "--color-lime-400",
+    "--color-lime-50",
+    "--color-lime-500",
+    "--color-lime-600",
+    "--color-lime-700",
+    "--color-lime-800",
+    "--color-lime-900",
+    "--color-lime-950",
+    "--color-mauve-100",
+    "--color-mauve-200",
+    "--color-mauve-300",
+    "--color-mauve-400",
+    "--color-mauve-50",
+    "--color-mauve-500",
+    "--color-mauve-600",
+    "--color-mauve-700",
+    "--color-mauve-800",
+    "--color-mauve-900",
+    "--color-mauve-950",
+    "--color-mist-100",
+    "--color-mist-200",
+    "--color-mist-300",
+    "--color-mist-400",
+    "--color-mist-50",
+    "--color-mist-500",
+    "--color-mist-600",
+    "--color-mist-700",
+    "--color-mist-800",
+    "--color-mist-900",
+    "--color-mist-950",
+    "--color-neutral-100",
+    "--color-neutral-200",
+    "--color-neutral-300",
+    "--color-neutral-400",
+    "--color-neutral-50",
+    "--color-neutral-500",
+    "--color-neutral-600",
+    "--color-neutral-700",
+    "--color-neutral-800",
+    "--color-neutral-900",
+    "--color-neutral-950",
+    "--color-olive-100",
+    "--color-olive-200",
+    "--color-olive-300",
+    "--color-olive-400",
+    "--color-olive-50",
+    "--color-olive-500",
+    "--color-olive-600",
+    "--color-olive-700",
+    "--color-olive-800",
+    "--color-olive-900",
+    "--color-olive-950",
+    "--color-orange-100",
+    "--color-orange-200",
+    "--color-orange-300",
+    "--color-orange-400",
+    "--color-orange-50",
+    "--color-orange-500",
+    "--color-orange-600",
+    "--color-orange-700",
+    "--color-orange-800",
+    "--color-orange-900",
+    "--color-orange-950",
+    "--color-pink-100",
+    "--color-pink-200",
+    "--color-pink-300",
+    "--color-pink-400",
+    "--color-pink-50",
+    "--color-pink-500",
+    "--color-pink-600",
+    "--color-pink-700",
+    "--color-pink-800",
+    "--color-pink-900",
+    "--color-pink-950",
+    "--color-purple-100",
+    "--color-purple-200",
+    "--color-purple-300",
+    "--color-purple-400",
+    "--color-purple-50",
+    "--color-purple-500",
+    "--color-purple-600",
+    "--color-purple-700",
+    "--color-purple-800",
+    "--color-purple-900",
+    "--color-purple-950",
+    "--color-red-100",
+    "--color-red-200",
+    "--color-red-300",
+    "--color-red-400",
+    "--color-red-50",
+    "--color-red-500",
+    "--color-red-600",
+    "--color-red-700",
+    "--color-red-800",
+    "--color-red-900",
+    "--color-red-950",
+    "--color-rose-100",
+    "--color-rose-200",
+    "--color-rose-300",
+    "--color-rose-400",
+    "--color-rose-50",
+    "--color-rose-500",
+    "--color-rose-600",
+    "--color-rose-700",
+    "--color-rose-800",
+    "--color-rose-900",
+    "--color-rose-950",
+    "--color-sky-100",
+    "--color-sky-200",
+    "--color-sky-300",
+    "--color-sky-400",
+    "--color-sky-50",
+    "--color-sky-500",
+    "--color-sky-600",
+    "--color-sky-700",
+    "--color-sky-800",
+    "--color-sky-900",
+    "--color-sky-950",
+    "--color-slate-100",
+    "--color-slate-200",
+    "--color-slate-300",
+    "--color-slate-400",
+    "--color-slate-50",
+    "--color-slate-500",
+    "--color-slate-600",
+    "--color-slate-700",
+    "--color-slate-800",
+    "--color-slate-900",
+    "--color-slate-950",
+    "--color-stone-100",
+    "--color-stone-200",
+    "--color-stone-300",
+    "--color-stone-400",
+    "--color-stone-50",
+    "--color-stone-500",
+    "--color-stone-600",
+    "--color-stone-700",
+    "--color-stone-800",
+    "--color-stone-900",
+    "--color-stone-950",
+    "--color-taupe-100",
+    "--color-taupe-200",
+    "--color-taupe-300",
+    "--color-taupe-400",
+    "--color-taupe-50",
+    "--color-taupe-500",
+    "--color-taupe-600",
+    "--color-taupe-700",
+    "--color-taupe-800",
+    "--color-taupe-900",
+    "--color-taupe-950",
+    "--color-teal-100",
+    "--color-teal-200",
+    "--color-teal-300",
+    "--color-teal-400",
+    "--color-teal-50",
+    "--color-teal-500",
+    "--color-teal-600",
+    "--color-teal-700",
+    "--color-teal-800",
+    "--color-teal-900",
+    "--color-teal-950",
+    "--color-violet-100",
+    "--color-violet-200",
+    "--color-violet-300",
+    "--color-violet-400",
+    "--color-violet-50",
+    "--color-violet-500",
+    "--color-violet-600",
+    "--color-violet-700",
+    "--color-violet-800",
+    "--color-violet-900",
+    "--color-violet-950",
+    "--color-white",
+    "--color-yellow-100",
+    "--color-yellow-200",
+    "--color-yellow-300",
+    "--color-yellow-400",
+    "--color-yellow-50",
+    "--color-yellow-500",
+    "--color-yellow-600",
+    "--color-yellow-700",
+    "--color-yellow-800",
+    "--color-yellow-900",
+    "--color-yellow-950",
+    "--color-zinc-100",
+    "--color-zinc-200",
+    "--color-zinc-300",
+    "--color-zinc-400",
+    "--color-zinc-50",
+    "--color-zinc-500",
+    "--color-zinc-600",
+    "--color-zinc-700",
+    "--color-zinc-800",
+    "--color-zinc-900",
+    "--color-zinc-950",
+    "--container-2xl",
+    "--container-2xs",
+    "--container-3xl",
+    "--container-3xs",
+    "--container-4xl",
+    "--container-5xl",
+    "--container-6xl",
+    "--container-7xl",
+    "--container-lg",
+    "--container-md",
+    "--container-sm",
+    "--container-xl",
+    "--container-xs",
+    "--default-font-family",
+    "--default-font-feature-settings",
+    "--default-font-variation-settings",
+    "--default-mono-font-family",
+    "--default-mono-font-feature-settings",
+    "--default-mono-font-variation-settings",
+    "--default-transition-duration",
+    "--default-transition-timing-function",
+    "--drop-shadow",
+    "--drop-shadow-2xl",
+    "--drop-shadow-lg",
+    "--drop-shadow-md",
+    "--drop-shadow-sm",
+    "--drop-shadow-xl",
+    "--drop-shadow-xs",
+    "--ease-in",
+    "--ease-in-out",
+    "--ease-out",
+    "--font-mono",
+    "--font-sans",
+    "--font-serif",
+    "--font-weight-black",
+    "--font-weight-bold",
+    "--font-weight-extrabold",
+    "--font-weight-extralight",
+    "--font-weight-light",
+    "--font-weight-medium",
+    "--font-weight-normal",
+    "--font-weight-semibold",
+    "--font-weight-thin",
+    "--inset-shadow-2xs",
+    "--inset-shadow-sm",
+    "--inset-shadow-xs",
+    "--leading-loose",
+    "--leading-normal",
+    "--leading-relaxed",
+    "--leading-snug",
+    "--leading-tight",
+    "--max-width-prose",
+    "--perspective-distant",
+    "--perspective-dramatic",
+    "--perspective-midrange",
+    "--perspective-near",
+    "--perspective-normal",
+    "--radius",
+    "--radius-2xl",
+    "--radius-3xl",
+    "--radius-4xl",
+    "--radius-lg",
+    "--radius-md",
+    "--radius-sm",
+    "--radius-xl",
+    "--radius-xs",
+    "--shadow",
+    "--shadow-2xl",
+    "--shadow-2xs",
+    "--shadow-inner",
+    "--shadow-lg",
+    "--shadow-md",
+    "--shadow-sm",
+    "--shadow-xl",
+    "--shadow-xs",
+    "--spacing",
+    "--text-2xl",
+    "--text-2xl--line-height",
+    "--text-3xl",
+    "--text-3xl--line-height",
+    "--text-4xl",
+    "--text-4xl--line-height",
+    "--text-5xl",
+    "--text-5xl--line-height",
+    "--text-6xl",
+    "--text-6xl--line-height",
+    "--text-7xl",
+    "--text-7xl--line-height",
+    "--text-8xl",
+    "--text-8xl--line-height",
+    "--text-9xl",
+    "--text-9xl--line-height",
+    "--text-base",
+    "--text-base--line-height",
+    "--text-lg",
+    "--text-lg--line-height",
+    "--text-shadow-2xs",
+    "--text-shadow-lg",
+    "--text-shadow-md",
+    "--text-shadow-sm",
+    "--text-shadow-xs",
+    "--text-sm",
+    "--text-sm--line-height",
+    "--text-xl",
+    "--text-xl--line-height",
+    "--text-xs",
+    "--text-xs--line-height",
+    "--tracking-normal",
+    "--tracking-tight",
+    "--tracking-tighter",
+    "--tracking-wide",
+    "--tracking-wider",
+    "--tracking-widest",
+]);

package/dist/their-theme.js

@@ -1,17 +1,51 @@
+import { TAILWIND_THEME_VARS } from "./tailwind-theme-vars.js";
 /** `--radius-lg: var(--ds-radius-lg);` - uma redefinição de utilitário do Tailwind pelo nosso token. */
 const ALIGNMENT = /^([ \t]*)(--[a-zA-Z0-9-]+)(\s*:\s*)var\(\s*(--ds-[a-zA-Z0-9-]+)\s*\)\s*;[ \t]*\n?/gm;
 export function onlyWhatMatched(css, 
 /** Os nossos tokens que casaram com um nome do código dele - ver `PointedAt.pairs`. */
 matched) {
     let kept = 0;
+    const own = [];
     const dropped = [];
     const out = css.replace(ALIGNMENT, (whole, _indent, tailwind, _sep, ours) => {
         if (matched.has(ours)) {
             kept += 1;
             return whole;
         }
+        /**
+         * NÃO HÁ CLASSE DELE PARA PROTEGER QUANDO O NOME É NOSSO - e sem esta linha o utilitário
+         * simplesmente não existe.
+         *
+         * A pergunta que este arquivo faz precisa ser *"esta redefinição ROUBA o significado de uma
+         * classe que o app dele já usa?"*, e a resposta está no `@theme` padrão do Tailwind. Para
+         * `--radius-xl` ela é sim: `rounded-xl` vale 12px no código dele e a nossa folha o faria
+         * valer 28px - o defeito de 23/08, e a exigência do casamento continua valendo ali.
+         *
+         * Para `--spacing-2xs`, `--color-canvas` ou `--shadow-glow` a resposta é NÃO: o Tailwind não
+         * declara nenhum dos três, então não existe classe dele com esse nome e nada é roubado. O que
+         * a remoção fazia era apagar a ÚNICA declaração que podia gerar o utilitário - e o Tailwind
+         * v4 só gera a partir de `@theme`, nunca das variáveis que o `tokens.css` re-emite dentro de
+         * `[data-ds]`.
+         *
+         * MEDIDO em 07/09, nas duas populações, com o Tailwind 4.3.3 de verdade:
+         *
+         *     codelevel          74 removidas = 24 que colidem + 50 que só existem no sistema
+         *     ember, app novo    64 removidas = 19 que colidem + 45 que só existem no sistema
+         *
+         * E o efeito na tela: das 23 classes utilitárias do `button` do ember, 11 dependiam de uma
+         * linha removida, e 10 delas NÃO eram geradas - o botão chegava sem padding, sem gap, sem cor
+         * de texto, sem sombra e sem a família de fonte.
+         *
+         * A LISTA É DERIVADA DO PACOTE e vem do gêmeo `tailwind-theme-vars.ts`; um nome que o
+         * Tailwind passe a declarar numa versão futura é divergência que o spec do lado do web
+         * reprova, e não silêncio.
+         */
+        if (!TAILWIND_THEME_VARS.has(tailwind)) {
+            own.push(tailwind);
+            return whole;
+        }
         dropped.push(tailwind);
         return "";
     });
-    return { css: out, kept, dropped: dropped.sort() };
+    return { css: out, kept, own: own.sort(), dropped: dropped.sort() };
 }

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