synthesisui 0.16.387 → 0.16.389

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

@@ -6,7 +6,7 @@ import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
 import { hasInteractiveTemplate, interactiveTemplate, } from "../interactive-templates.js";
 import { body, section, snippet } from "../output.js";
-import { findCollision, reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
+import { findCollision, installedThemeVars, reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
 import { fetchComponent, RegistryError } from "../registry.js";
 import { flavourResolver } from "../styles-flavour.js";
 import { inTheirTongue, projectTongue, sumSpoken, } from "../their-tongue.js";
@@ -149,11 +149,6 @@ export async function component(slug, name, opts) {
          * Re-materializing something WE generated is almost always what they meant, so
          * that keeps going. Shadowing a component of theirs stops and asks.
          */
-        const pascalName = res.name
-            .split(/[^a-zA-Z0-9]+/)
-            .filter(Boolean)
-            .map((p) => p[0].toUpperCase() + p.slice(1))
-            .join("");
         /**
          * THEY ALREADY HAVE THIS COMPONENT, and the recipe says where.
          *
@@ -316,7 +311,7 @@ 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), tongue);
+            local, await readInstalledScheme(root, slug), tongue, await installedThemeVars(root, slug));
             spoken = said;
             /**
              * AS DECLARAÇÕES DO ARQUIVO DELE QUE O INTERPRETADOR NÃO LEU - ver `unread-for-component.ts`.

package/dist/commands/generate.js

@@ -3,7 +3,7 @@ import { join } from "node:path";
 import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
 import { installedSlugs } from "../installed.js";
-import { reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
+import { installedThemeVars, 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";
@@ -75,7 +75,7 @@ export async function generate(description, opts) {
         // project as the stylesheet it has to match.
         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));
+        await projectTongue(root, slug), await installedThemeVars(root, slug));
         for (const file of files) {
             await writeFile(join(compDir, file.filename), file.code, "utf8");
         }

package/dist/commands/refit.js

@@ -4,7 +4,7 @@ import { generateComponentFiles } from "../component-codegen.js";
 import { readProjectConfig, resolveRegistry } from "../config.js";
 import { installedSlugs } from "../installed.js";
 import { body, section, snippet } from "../output.js";
-import { reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
+import { installedThemeVars, 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";
@@ -121,7 +121,7 @@ export async function refit(file, opts) {
         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), 
         /** O VOCABULÁRIO DELE - o `refit` reescreve o componente e não passava pela porta. */
-        await projectTongue(root, slug));
+        await projectTongue(root, slug), await installedThemeVars(root, slug));
         for (const f of files) {
             await writeFile(join(compDir, f.filename), f.code, "utf8");
         }

package/dist/commands/upgrade.js

@@ -8,7 +8,7 @@ import { unsentEvents } from "../doctor/ledger.js";
 import { diffLocalDocuments, localChangelogMarkdown, } from "../document-diff.js";
 import { installedBehind, MATERIALISER_SINCE } from "../install-marks.js";
 import { body, section, snippet } from "../output.js";
-import { reactMajorOf, readInstalledConvention, readInstalledScheme, } from "../project-facts.js";
+import { installedThemeVars, 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";
@@ -331,6 +331,8 @@ export async function upgrade(asked, opts) {
          * língua do repositório. Resolvido uma vez para a corrida inteira, como o sabor.
          */
         const tongue = await projectTongue(root, slug);
+        /** A folha instalada é a MESMA para a corrida inteira - ver `installedThemeVars`. */
+        const themeVars = await installedThemeVars(root, slug);
         for (const entry of entries) {
             const tsxPath = join(componentsRoot, entry, `${entry}.tsx`);
             let head = "";
@@ -359,7 +361,7 @@ export async function upgrade(asked, opts) {
                 // 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);
+                await reactMajorOf(root), res.classNames ?? (await readInstalledConvention(root, slug)), res.name, await readInstalledScheme(root, slug), tongue, themeVars);
                 /**
                  * A NOTA DAS DECLARAÇÕES NÃO INTERPRETADAS SOBREVIVE AO UPGRADE.
                  *

package/dist/component-codegen.js

@@ -485,9 +485,31 @@ function remToTwScale(value) {
     const n = Number.parseFloat(m[1]) / 0.25;
     return Number.isInteger(n) && n >= 0 && n <= 96 ? String(n) : null;
 }
+/**
+ * O UTILITÁRIO NOMEADO SÓ VALE QUANDO A FOLHA INSTALADA O DECLARA - e é isso que decide o VALOR.
+ *
+ * `rounded-lg` existe em qualquer projeto com Tailwind, então a classe nunca "falta". O que muda é
+ * de quem é o valor: quando o `theme.css` que caiu na pasta dele declara `--radius-lg`, a classe
+ * pinta o raio DO SISTEMA; quando não declara, ela pinta o default do Tailwind - e o componente
+ * mente em silêncio, que é pior que uma classe morta, porque nada na tela parece faltar.
+ *
+ * A folha não declara por dois motivos, os dois legítimos: a redefinição roubaria uma classe que o
+ * app dele já usa (`INV-VOLTA-13`, o alinhamento), ou o compilador não faz ponte para um nome que
+ * não está em `meta.ownedNames` (o `--font-body` do codelevel). Nos dois casos a resposta certa é a
+ * mesma: emitir o valor arbitrário com `var(--ds-*)`, que resolve sempre dentro de `[data-ds]`.
+ *
+ * MEDIDO em 07/09 sobre TODOS os componentes das duas populações:
+ *
+ *     codelevel, repo real   58 de 110 utilitários de token (53%) não carregavam o valor dele
+ *     ember, app novo        34 de 241 (14%)
+ *
+ * `null` é projeto sem folha instalada - `refit` e `generate` já dizem que nada pinta sem o `add`,
+ * e ali o nome legível não custa nada.
+ */
+const minted = (themeVars, cssVar) => themeVars === null || themeVars.has(cssVar);
 /** One declaration → Tailwind classes (pretty when mappable, arbitrary-property
  *  otherwise - never dropped). */
-function declToTailwind(prop, value) {
+function declToTailwind(prop, value, themeVars) {
     const stat = STATIC[prop]?.[value];
     if (stat)
         return [stat];
@@ -496,19 +518,19 @@ function declToTailwind(prop, value) {
             if (value === "transparent")
                 return ["bg-transparent"];
             const key = colorKey(value);
-            if (key)
+            if (key && minted(themeVars, `--color-${key}`))
                 return [`bg-${key}`];
             break;
         }
         case "color": {
             const key = colorKey(value);
-            if (key)
+            if (key && minted(themeVars, `--color-${key}`))
                 return [`text-${key}`];
             break;
         }
         case "borderColor": {
             const key = colorKey(value);
-            if (key)
+            if (key && minted(themeVars, `--color-${key}`))
                 return [`border-${key}`];
             break;
         }
@@ -517,25 +539,28 @@ function declToTailwind(prop, value) {
             const m = value.match(/^1px\s+solid\s+(\{[^}]+\})$/);
             if (m) {
                 const key = colorKey(m[1]);
-                if (key)
+                if (key && minted(themeVars, `--color-${key}`))
                     return ["border", `border-${key}`];
             }
             break;
         }
         case "borderRadius": {
             const key = nsKey(value, "radius");
-            if (key)
+            if (key && minted(themeVars, `--radius-${key}`))
                 return [`rounded-${key}`];
             break;
         }
         case "gap": {
             const key = nsKey(value, "spacing");
-            if (key)
+            if (key && minted(themeVars, `--spacing-${key}`))
                 return [`gap-${key}`];
             break;
         }
         case "padding": {
-            const keys = value.split(/\s+/).map((v) => nsKey(v, "spacing"));
+            const keys = value
+                .split(/\s+/)
+                .map((v) => nsKey(v, "spacing"))
+                .map((k) => (k && minted(themeVars, `--spacing-${k}`) ? k : null));
             if (keys.length === 1 && keys[0])
                 return [`p-${keys[0]}`];
             if (keys.length === 2 && keys[0] && keys[1])
@@ -544,25 +569,25 @@ function declToTailwind(prop, value) {
         }
         case "fontSize": {
             const key = scaleKey(value);
-            if (key)
+            if (key && minted(themeVars, `--text-${key}`))
                 return [`text-${key}`];
             break;
         }
         case "fontFamily": {
             const key = nsKey(value, "typography.families");
-            if (key)
+            if (key && minted(themeVars, `--font-${key}`))
                 return [`font-${key}`];
             break;
         }
         case "fontWeight": {
             const key = nsKey(value, "typography.weights");
-            if (key)
+            if (key && minted(themeVars, `--font-weight-${key}`))
                 return [`font-${key}`];
             break;
         }
         case "boxShadow": {
             const key = nsKey(value, "shadow");
-            if (key)
+            if (key && minted(themeVars, `--shadow-${key}`))
                 return [`shadow-${key}`];
             break;
         }
@@ -648,8 +673,8 @@ function twStateVariants(state) {
     const native = TW_NATIVE.has(word) ? [`${word}:`] : [`data-[${word}]:`];
     return [...native, ...(TW_ALSO[state] ?? [])];
 }
-function blockToTailwind(block, prefix = "") {
-    return Object.entries(block).flatMap(([prop, value]) => declToTailwind(prop, value).map((cls) => `${prefix}${cls}`));
+function blockToTailwind(block, themeVars, prefix = "") {
+    return Object.entries(block).flatMap(([prop, value]) => declToTailwind(prop, value, themeVars).map((cls) => `${prefix}${cls}`));
 }
 /** Every prefix combination one layer needs. A condition that cannot be
  *  expressed returns no combination, and the layer is dropped rather than
@@ -773,23 +798,25 @@ function resolveNode(node, scheme, asRoot) {
     return { variants, states, conditional };
 }
 /** The classes every compound condition contributes, in layer order. */
-const conditionalClasses = (resolved) => resolved.conditional.flatMap((c) => blockToTailwind(c.style, c.prefix));
+const conditionalClasses = (resolved, themeVars) => resolved.conditional.flatMap((c) => blockToTailwind(c.style, themeVars, c.prefix));
 function tailwindClassList(recipe, 
 /** The node's states and compound conditions, already read off its layers. */
 resolved, 
+/** O que a folha instalada declara - ver `minted`. */
+themeVars, 
 /** CSS properties a variant axis owns - see `variantOwnedProps`. */
 exclude) {
     const base = exclude
         ? Object.fromEntries(Object.entries(recipe.base).filter(([prop]) => !exclude.has(prop)))
         : recipe.base;
     const classes = [
-        ...blockToTailwind(base),
+        ...blockToTailwind(base, themeVars),
         // States keep everything: `hover:` and `disabled:` cannot collide with an
         // unprefixed variant class, so there is nothing to resolve.
-        ...Object.entries(resolved.states).flatMap(([state, block]) => twStateVariants(state).flatMap((prefix) => blockToTailwind(block, prefix))),
+        ...Object.entries(resolved.states).flatMap(([state, block]) => twStateVariants(state).flatMap((prefix) => blockToTailwind(block, themeVars, prefix))),
         // Compound conditions last: they are the most specific thing the recipe says,
         // and in utilities the later class is the one a reader expects to win.
-        ...conditionalClasses(resolved),
+        ...conditionalClasses(resolved, themeVars),
     ];
     return classes.join(" ");
 }
@@ -1160,7 +1187,14 @@ function emitTailwindMode(slug, name, recipe, version, props,
 /** The name it takes in THEIR project. The utilities stay the system's. */
 localName = name, 
 /** The scheme the document opens in - see `generateComponentFiles`. */
-scheme = "dark") {
+scheme = "dark", 
+/**
+ * O QUE A FOLHA INSTALADA DECLARA - ver `minted`, e é o que decide de quem é o VALOR.
+ *
+ * `null` mantém o comportamento de sempre: um projeto sem `add` não tem folha nenhuma, e ali o
+ * nome legível não custa nada porque nada pinta de qualquer forma.
+ */
+themeVars = null) {
     const { tag, attrs, voidEl } = elementFor(name, recipe);
     const el = asElement(tag, attrs, voidEl);
     const axes = rootAxes(recipe);
@@ -1170,13 +1204,13 @@ scheme = "dark") {
         .filter((a) => !a.boolean)
         .map((a) => {
         const entries = a.options
-            .map((o) => `  ${JSON.stringify(o)}: ${JSON.stringify(blockToTailwind(resolved.variants[a.key]?.[o] ?? {}).join(" "))},`)
+            .map((o) => `  ${JSON.stringify(o)}: ${JSON.stringify(blockToTailwind(resolved.variants[a.key]?.[o] ?? {}, themeVars).join(" "))},`)
             .join("\n");
         return `const ${a.prop.toUpperCase()}: Record<string, string> = {\n${entries}\n};`;
     });
     const booleanConsts = axes
         .filter((a) => a.boolean)
-        .map((a) => `const ${a.prop.toUpperCase()} = ${JSON.stringify(blockToTailwind(resolved.variants[a.key]?.true ?? {}).join(" "))};`);
+        .map((a) => `const ${a.prop.toUpperCase()} = ${JSON.stringify(blockToTailwind(resolved.variants[a.key]?.true ?? {}, themeVars).join(" "))};`);
     // Every property some axis controls leaves BASE, and the base value becomes
     // that axis's default - so exactly one class ever sets it and the prop
     // actually wins.
@@ -1206,7 +1240,7 @@ scheme = "dark") {
         const fromDefault = preset
             ? (resolved.variants[a.key]?.[preset] ?? {})
             : {};
-        return JSON.stringify(blockToTailwind({ ...fromBase, ...fromDefault }).join(" "));
+        return JSON.stringify(blockToTailwind({ ...fromBase, ...fromDefault }, themeVars).join(" "));
     };
     const clsParts = [
         "BASE",
@@ -1251,7 +1285,7 @@ ${dataAttrLines(axes)}${axes.length ? "\n" : ""}    `;
 import type { ${needsElementType ? `ElementType, ${props}` : props} } from "react";
 import { cn } from "../cn";
 
-const BASE = ${JSON.stringify([needsGroup ? "group" : "", tailwindClassList(recipe, resolved, excluded)].filter(Boolean).join(" "))};
+const BASE = ${JSON.stringify([needsGroup ? "group" : "", tailwindClassList(recipe, resolved, themeVars, excluded)].filter(Boolean).join(" "))};
 ${[...variantConsts, ...booleanConsts].join("\n")}
 
 type ${comp}Props = ${propsType(axes, tag, props, el.offersAs)};
@@ -1302,9 +1336,9 @@ ${orderedParts
          * status colours of his card were still nowhere.
          */
         const partResolved = resolveNode(part, scheme, false);
-        const partVariantClasses = partAxes.flatMap((a) => a.options.flatMap((o) => blockToTailwind(partResolved.variants[a.key]?.[o] ?? {}, `data-[${a.attr}=${o}]:`)));
+        const partVariantClasses = partAxes.flatMap((a) => a.options.flatMap((o) => blockToTailwind(partResolved.variants[a.key]?.[o] ?? {}, themeVars, `data-[${a.attr}=${o}]:`)));
         const partCls = [
-            tailwindClassList(part, partResolved),
+            tailwindClassList(part, partResolved, themeVars),
             ...partVariantClasses,
         ]
             .filter(Boolean)
@@ -1398,7 +1432,16 @@ scheme,
  * 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) {
+tongue, 
+/**
+ * O QUE A FOLHA INSTALADA DECLARA NO `@theme` - `installedThemeVars(root, slug)`.
+ *
+ * OBRIGATÓRIO, pelo mesmo argumento do `scheme` e do `tongue`: o utilitário nomeado que este
+ * módulo escreve só carrega o valor DO SISTEMA quando a folha que caiu na pasta dele declara a
+ * variável. Sem essa resposta o codegen escreve `rounded-lg` e a classe pinta o default do
+ * Tailwind - o componente mente sem nada faltar na tela. `null` é projeto sem folha instalada.
+ */
+themeVars) {
     const files = [];
     const props = propsTypeName(reactMajor);
     if (styles === "css") {
@@ -1411,7 +1454,7 @@ tongue) {
     else {
         files.push({
             filename: `${localName}.tsx`,
-            code: `${emitTailwindMode(slug, name, recipe, version, props, localName, scheme)}\n`,
+            code: `${emitTailwindMode(slug, name, recipe, version, props, localName, scheme, themeVars)}\n`,
         });
     }
     files.push({

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.387";
+export const MATERIALISER_SINCE = "0.16.389";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *

package/dist/project-facts.js

@@ -171,3 +171,43 @@ export async function readInstalledScheme(root, slug) {
         return "dark";
     }
 }
+/**
+ * O QUE A FOLHA INSTALADA DECLARA NO `@theme` - a resposta que decide de quem é o VALOR.
+ *
+ * O QUE O CLIENTE PERCEBE SEM ISTO: o componente sai vestindo `rounded-lg` e `font-mono`, a classe
+ * existe em qualquer projeto com Tailwind, e ela pinta o **default do Tailwind** em vez do raio e da
+ * fonte do sistema dele. Nada falta na tela - é a mesma peça com os números de outra biblioteca, o
+ * que é mais difícil de achar que uma classe morta.
+ *
+ * A folha deixa de declarar por dois motivos legítimos: o alinhamento tirou a linha para não roubar
+ * uma classe que o app dele já usa (`INV-VOLTA-13`), ou o compilador não faz ponte para um nome que
+ * não está em `meta.ownedNames`. Os dois se leem no mesmo lugar - o arquivo que caiu na pasta dele -
+ * e é por isso que a pergunta é respondida AQUI e não no servidor: só nesta máquina existe a folha
+ * que ele realmente tem.
+ *
+ * MEDIDO em 07/09 sobre todos os componentes: 58 de 110 utilitários de token no `codelevel` (53%) e
+ * 34 de 241 no `ember` (14%) não carregavam o valor do sistema.
+ *
+ * `null` quando não há folha - projeto sem `add`, ou install antigo. Nesse caso nada pinta de
+ * qualquer forma, e o `refit`/`generate` já dizem isso.
+ */
+export async function installedThemeVars(root, slug) {
+    const dir = join(root, "_synthesisui", "ds", slug);
+    const version = await pinnedVersion(dir);
+    if (!version)
+        return null;
+    const css = await readFile(join(dir, `v${version}`, "theme.css"), "utf8").catch(() => "");
+    if (!css)
+        return null;
+    /**
+     * Só o que está DENTRO de um `@theme` conta - é a única coisa que o Tailwind v4 lê para gerar
+     * utilitário. Uma variável no `[data-ds]` do `tokens.css` não gera nada, e foi tratar as duas como
+     * iguais que fez o `theme.css` parecer suficiente quando não era.
+     */
+    const blocks = css.matchAll(/@theme[^{]*\{([\s\S]*?)\n\}/g);
+    const declared = new Set();
+    for (const block of blocks)
+        for (const m of block[1].matchAll(/^\s*(--[a-zA-Z0-9-]+)\s*:/gm))
+            declared.add(m[1]);
+    return declared;
+}

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/package.json

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