synthesisui 0.16.301 → 0.16.305

package/dist/anatomy-read.js

@@ -234,6 +234,49 @@ function measuredAt(node, sketch) {
         out.text = String(measured.text).trim().slice(0, 120);
     return out;
 }
+/**
+ * AS PALAVRAS DA CLASSE DELE QUE DESCREVEM UM NÓ - a matéria-prima do desempate.
+ *
+ * Uma lista de classes é meio vocabulário dele e meio gramática do framework. `animate-shimmer` diz
+ * o que aquele nó É; `absolute`, `inset-0` e `z-10` dizem onde ele está, e servem para qualquer nó
+ * da página.
+ *
+ * Então a régua é a INTENÇÃO, e a lista de descartes é do que é posicional, dimensional ou de
+ * estado. O que sobra é o que ele nomeou.
+ *
+ * MEDIDO no `Button` do dono: o `<span>` do brilho veste `animate-shimmer` entre seis classes de
+ * posição, e a palavra `shimmer` é a única que diz o que ele é.
+ *
+ * ORDEM ESTÁVEL, e ela importa: o mesmo componente lido duas vezes tem que produzir o mesmo nome,
+ * senão um re-import renomeia partes e o CSS dele para de casar.
+ */
+function describingWords(classes) {
+    if (!classes)
+        return [];
+    /** Posição, caixa, camada, estado: verdadeiro para qualquer nó, então não descreve nenhum. */
+    const NOISE = /^(absolute|relative|fixed|sticky|static|inset|top|right|bottom|left|z|flex|grid|block|inline|hidden|w|h|min|max|p[xytrbl]?|m[xytrbl]?|gap|items|justify|self|order|shrink|grow|basis|overflow|opacity|transition|duration|ease|delay|pointer|select|cursor|group|peer|translate|rotate|scale|transform|origin|will)$/;
+    const out = [];
+    for (const raw of classes.split(/\s+/)) {
+        if (!raw)
+            continue;
+        /** Variante e valor arbitrário fora: `hover:`, `md:`, `[&>svg]:` não nomeiam o nó. */
+        if (raw.includes(":") || raw.includes("["))
+            continue;
+        const head = raw.replace(/^-/, "").split("/")[0];
+        const segs = head.split("-").filter(Boolean);
+        if (segs.length === 0)
+            continue;
+        if (NOISE.test(segs[0]))
+            continue;
+        /** `animate-shimmer` -> `shimmer`; `overlay` -> `overlay`. A última palavra é a que nomeia. */
+        const word = segs[segs.length - 1];
+        if (!/^[a-z][a-z0-9]{2,}$/.test(word))
+            continue;
+        if (!out.includes(word))
+            out.push(word);
+    }
+    return out;
+}
 export function resolveAnatomy(read, declared, deps, 
 /** Their name → the slug it reaches in this system. See `RefResolver`. */
 resolve, 
@@ -297,10 +340,37 @@ globals) {
         top = top[0].children;
         notes.push("the outermost wrapper is the component itself, so its children are the anatomy");
     }
-    /** Part names, deduped: a second `label` becomes `label-2`, deterministically. */
-    const claim = (wanted) => {
+    /**
+     * O NOME DE UMA PARTE, DESEMPATADO - e o desempate DESCREVE antes de contar.
+     *
+     * O QUE O CLIENTE PERDIA: um número nosso no vocabulário dele, e não só na tela. O nome da parte
+     * vira CLASSE no código gerado (`partClassName` em `component-codegen.ts`), então
+     * `ds-button-text-2` acaba num arquivo que ele mantém - e ele não tem como saber que aquele é o
+     * brilho e este é o conteúdo sem abrir o original.
+     *
+     * MEDIDO no `codelevel` (24/08): 9 partes numeradas em 6 de 62 componentes. No `Button` dele são
+     * três `<span>` irmãos - a máscara do hover, o brilho que desliza, e o conteúdo -, e o segundo
+     * carrega `animate-shimmer` na própria classe. O nome estava na frente o tempo todo.
+     *
+     * ─────────────────────────────────────────────────────────────────────────
+     * A ORDEM É: O QUE ELE ESCREVEU, DEPOIS O NÚMERO.
+     *
+     * A classe do nó é vocabulário DELE - `animate-shimmer`, `overlay`, `track`. Derivar dali é usar o
+     * nome que ele já deu àquele pedaço; numerar é o que sobra quando essa pergunta não é feita.
+     *
+     * E o número CONTINUA existindo como último recurso, porque duas partes não podem dividir uma
+     * chave. A diferença é que ele deixou de ser a primeira resposta.
+     */
+    const claim = (wanted, classes) => {
         if (parts[wanted] == null)
             return wanted;
+        for (const hint of describingWords(classes)) {
+            const candidate = `${wanted}-${hint}`;
+            if (parts[candidate] == null)
+                return candidate;
+            if (parts[hint] == null)
+                return hint;
+        }
         for (let n = 2; n < 100; n++) {
             const candidate = `${wanted}-${n}`;
             if (parts[candidate] == null)
@@ -472,9 +542,17 @@ globals) {
             // value. A node with no name is pure structure and that is legitimate.
             const wanted = safePartName(String(node.name ?? ""));
             if (wanted) {
-                const key = claim(wanted);
+                /**
+                 * AS CLASSES DELE ENTRAM NO DESEMPATE - ver `claim` e `describingWords`.
+                 *
+                 * O nó pode carregar a lista verbatim (`classes`) ou apontar para o censo (`at`). As duas
+                 * servem, e o censo é preferido pelo mesmo motivo de sempre: uma lista redigitada é uma
+                 * cópia que pode perder um modificador.
+                 */
+                const key = claim(wanted, node.classes ??
+                    (node.at != null ? sketch?.[node.at]?.classes : undefined));
                 if (key !== wanted) {
-                    notes.push(`two parts named \`${wanted}\` - the second is \`${key}\``);
+                    notes.push(`two parts named \`${wanted}\` - the second is \`${key}\`, named from your own class`);
                 }
                 /**
                  * THE CENSUS'S OWN STRING WINS when the node points at it. A retyped

package/dist/commands/component.js

@@ -8,6 +8,7 @@ import { hasInteractiveTemplate, interactiveTemplate, } from "../interactive-tem
 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, tongueOf } from "../their-tongue.js";
 import { readCensus, unreadComment, unreadForComponent, } from "../unread-for-component.js";
 /**
@@ -59,7 +60,9 @@ export function localName(blueprint, asked) {
  * 2. YOUR component (unless --artifacts-only, target "next") →
  *    `<componentsDir>/<name>/` from `_synthesisui/config.json`: a real
  *    `export function <Pascal>()` with variants as typed props, in the
- *    project's chosen flavor (`styles: "css" | "tailwind"`).
+ *    language THIS component is already written in - `flavourResolver` reads the
+ *    measured shape off the census, and `styles: "css" | "tailwind"` in the config
+ *    overrides it for the whole project when they are migrating to one of them.
  *
  * The component's styles reference the DS tokens, so the system itself must be
  * installed (`synthesisui add <slug>`) for `tokens.css`/`theme.css` to resolve.
@@ -120,8 +123,20 @@ export async function component(slug, name, opts) {
         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
-    //    project's flavor (config: styles css|tailwind), under componentsDir.
+    //    language it is already written in (config: styles match|css|tailwind), under
+    //    componentsDir.
     const wantInteractive = opts.interactive && hasInteractiveTemplate(res.name);
+    /**
+     * A LÍNGUA DESTE COMPONENTE - e ela pode não ser a do projeto inteiro.
+     *
+     * Com `styles: "match"` a resposta é por componente: o `Card` que ele escreve em CSS Modules
+     * recebe um `.css` ao lado, e o `Button` que ele escreve em utilitários recebe utilitários.
+     *
+     * Resolvido UMA vez, acima de tudo que a usa - a materialização e as instruções de instalação
+     * precisam falar do mesmo arquivo, e duas resoluções separadas seriam duas chances de a
+     * instrução mandar importar um `.css` que o componente não ganhou.
+     */
+    const flavour = (await flavourResolver(root, config.styles))(res.name);
     if (!opts.artifactsOnly && config.target === "next") {
         /**
          * WE DO NOT TAKE A NAME THEY ARE USING.
@@ -210,7 +225,7 @@ export async function component(slug, name, opts) {
             filenames = [`${local}.tsx`, `${local}.css`, "index.ts"];
         }
         else {
-            const files = generateComponentFiles(slug, res.name, res.recipe, css, res.version, config.styles, await reactMajorOf(root), 
+            const files = generateComponentFiles(slug, res.name, res.recipe, css, res.version, flavour, await reactMajorOf(root), 
             /**
              * THE SPELLING, FROM THE VERSION WE JUST FETCHED.
              *
@@ -246,18 +261,18 @@ export async function component(slug, name, opts) {
             for (const file of files) {
                 await writeFile(join(compDir, file.filename), file.filename.endsWith(".tsx") ? `${nota}${file.code}` : file.code, "utf8");
             }
-            if (config.styles === "tailwind")
+            if (flavour === "tailwind")
                 await writeCn(root, compDir, slug);
             filenames = files.map((f) => f.filename);
         }
-        const flavor = wantInteractive ? "interactive" : `styles: ${config.styles}`;
+        const flavor = wantInteractive ? "interactive" : `styles: ${flavour}`;
         console.log(`✓ ${config.componentsDir}/${local}/ → ${filenames.join(", ")}  (${flavor})${local === res.name ? "" : `  - the "${res.name}" blueprint, under your name`}`);
     }
     else if (opts.interactive && !hasInteractiveTemplate(res.name)) {
         console.log(`  note: no interactive template for "${res.name}" - materialized the standard shell.`);
     }
     // ── DX: concrete paths + copy-pasteable snippets, with breathing room ──
-    const tailwind = config.styles === "tailwind";
+    const tailwind = flavour === "tailwind";
     const imports = tailwind
         ? [
             `@import "tailwindcss";`,

package/dist/commands/generate.js

@@ -5,6 +5,7 @@ import { readProjectConfig, resolveRegistry } from "../config.js";
 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";
 /** PascalCase para o hint de import (course-card → CourseCard). */
 function pascalName(name) {
     return name.replace(/(^|[-_])([a-z0-9])/g, (_, __, c) => c.toUpperCase());
@@ -65,7 +66,9 @@ export async function generate(description, opts) {
         const version = await readActiveVersion(root, slug);
         const compDir = join(root, config.componentsDir, res.name);
         await mkdir(compDir, { recursive: true });
-        const files = generateComponentFiles(slug, res.name, res.recipe, res.css, version, config.styles, await reactMajorOf(root), 
+        // 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), 
         // 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));

package/dist/commands/import.js

@@ -558,6 +558,14 @@ export async function takeCensus(root, opts) {
     const islands = new Map();
     /** How each component expresses style, so the census can state its own coverage. */
     const shapes = new Map();
+    /**
+     * A FORMA DE ESTILO DE CADA COMPONENTE - o dado que decide em que língua ele volta.
+     *
+     * Um repositório real não tem UMA forma: no `frontend-hub` são 214 arquivos em CSS Modules, 157
+     * em lista de classes e 138 em template, e nenhuma passa de 30%. Um sabor global obriga a maioria
+     * do código dele a receber componentes na forma errada - ver `countShape`.
+     */
+    const shapeOf = new Map();
     /** A escala de espaçamento que o projeto declara para o `sx` - ver o uso abaixo. */
     let sxSpacing;
     /** Component FILES the gate accepted - the honest denominator for coverage. A first
@@ -681,7 +689,7 @@ export async function takeCensus(root, opts) {
                     runtimeOf.set(d.name, runtime);
             }
             if (found.length > 0) {
-                countShape(src, found[0].name, shapes);
+                countShape(src, found[0].name, shapes, shapeOf);
                 componentFiles += 1;
             }
             defined.push(...found);
@@ -2224,6 +2232,16 @@ export async function takeCensus(root, opts) {
                     components: coverage.components,
                     read: coverage.read,
                     declarations: coverage.declarations,
+                    /**
+                     * A FORMA POR COMPONENTE, ao lado da soma - ver `shapeOf`.
+                     *
+                     * A soma responde *"como este projeto escreve estilo"*; esta responde *"como ESTE
+                     * componente escreve"*, e é a segunda que decide em que língua ele volta. Aditiva e
+                     * omitida quando vazia, então nenhum censo existente muda de forma.
+                     */
+                    ...(shapeOf.size > 0
+                        ? { byComponent: Object.fromEntries([...shapeOf].sort()) }
+                        : {}),
                     shapes: coverage.counts.map((c) => ({
                         key: c.shape.key,
                         label: c.shape.label,

package/dist/commands/init.js

@@ -1,5 +1,7 @@
 import { DEFAULT_CONFIG, writeProjectConfig } from "../config.js";
 import { body, section, snippet } from "../output.js";
+import { resolveDeps, stylesFor, tailwindMajor } from "../stack.js";
+import { formMix, measuredStyle } from "../styles-flavour.js";
 import { wiringPrompt } from "../wiring-prompt.js";
 import { add } from "./add.js";
 /**
@@ -16,7 +18,29 @@ export async function init(opts) {
         target,
         pagesDir: opts.pagesDir ?? (target === "next" ? "app" : DEFAULT_CONFIG.pagesDir),
         componentsDir: opts.componentsDir ?? DEFAULT_CONFIG.componentsDir,
-        styles: opts.styles === "tailwind" ? "tailwind" : "css",
+        /**
+         * O SABOR SAI DO QUE O PROJETO DELE DECLARA - ver `stylesFor`.
+         *
+         * A flag continua vencendo: quem digitou `--styles` escolheu, e uma dedução nossa por cima de
+         * uma resposta dele seria a plataforma discordando de quem perguntou.
+         *
+         * O que mudou é o silêncio. Até 24/08, ausência de flag significava `"css"` - inclusive num
+         * projeto com `tailwindcss ^4.3.0` nas dependências, que é o caso do repositório do dono. Ele
+         * receberia componentes em CSS, com um `.css` ao lado de cada um, num repositório onde tudo o
+         * mais é Tailwind. E a informação para acertar já estava medida no mesmo segundo.
+         *
+         * E DESDE 25/08 A AUSÊNCIA DE FLAG É `match`, que é a resposta por componente. Um sabor único
+         * presume que o projeto tem um sabor único, e um repositório real não tem: medido no
+         * `frontend-hub`, 276 componentes importam um `.module.css` e 231 escrevem utilitários.
+         * Qualquer sabor único que se escolha ali manda mais de 200 arquivos de volta na língua errada.
+         *
+         * `match` não é uma dedução mais fraca, é uma mais fina: quando o projeto TEM uma forma só, ela
+         * responde exatamente o que `stylesFor` responderia, para todo componente. A linha impressa
+         * abaixo diz qual é o resultado neste projeto, com o número.
+         */
+        styles: opts.styles === "tailwind" || opts.styles === "css"
+            ? opts.styles
+            : "match",
         /**
          * Gravada COM A DATA, e só quando alguém respondeu. Migração é uma fase que termina, e uma fase sem
          * data é a etiqueta que envelhece em silêncio - o doctor imprime as duas em toda rodada.
@@ -33,7 +57,57 @@ export async function init(opts) {
     console.log(`  target:        ${config.target}`);
     console.log(`  pagesDir:      ${config.pagesDir}`);
     console.log(`  componentsDir: ${config.componentsDir}`);
-    console.log(`  styles:        ${config.styles}`);
+    /**
+     * E A DEDUÇÃO É DITA - senão a plataforma decide certo e em silêncio, que é meio caminho.
+     *
+     * A linha diz de onde veio a escolha e o que ela produz, porque as duas coisas mudam o arquivo que
+     * ele vai manter: em `tailwind` o componente sai com utilitários inline; em `css` sai um TSX fino
+     * com um `.css` ao lado.
+     *
+     * E o MAIOR do Tailwind aparece quando existe: `@theme` e `@utility` são v4, e um projeto v3
+     * recebendo sintaxe de v4 tem um arquivo que o build dele não entende. Dizer a versão que a gente
+     * leu é o que permite ele nos contradizer antes de gerar o primeiro componente.
+     */
+    const major = tailwindMajor(await resolveDeps(root).catch(() => ({})));
+    const { byComponent, classStyle: measured } = await measuredStyle(root);
+    const mix = formMix(byComponent);
+    const project = stylesFor(await resolveDeps(root).catch(() => ({})), measured);
+    /**
+     * A FRASE DIZ QUAL DAS DUAS COISAS DECIDIU - o que ele ESCREVE ou o que está INSTALADO.
+     *
+     * As duas podem discordar, e num projeto híbrido elas discordam: `tailwindcss` nas dependências e
+     * CSS Modules no código. Dizer só "tailwind" deixaria ele sem saber se a gente olhou o
+     * `package.json` ou os arquivos - e é essa diferença que ele precisa para nos contradizer.
+     */
+    /**
+     * E QUANDO EXISTE MISTURA, A LINHA DIZ A MISTURA - com os dois números.
+     *
+     * `match` sem número é uma palavra: ele não sabe se vai receber CSS, utilitários, ou os dois, e
+     * não tem como nos contradizer. Com os números ele lê a mesma medida que decidiu, e se ela
+     * estiver errada - porque ele está MIGRANDO, e quer receber na língua de destino - ele sabe
+     * exatamente o que reescrever com `--styles`.
+     */
+    const why = opts.styles === "tailwind" || opts.styles === "css"
+        ? "you asked for it"
+        : mix.mixed
+            ? `each component in the language it is already written in - ${mix.css} in CSS, ${mix.tailwind} in utilities${mix.undecided ? `, ${mix.undecided} following the project` : ""}. Run --styles css or --styles tailwind if you are migrating to one of them`
+            : measured === "utility"
+                ? `every component here writes utilities${major ? `, on tailwind v${major}` : ""}, so that is what they come back in`
+                : measured === "modules"
+                    ? "every component here writes CSS Modules, so that is what they come back in"
+                    : measured === "global"
+                        ? "every component here writes a global stylesheet, so that is what they come back in"
+                        : /**
+                           * E NA PRIMEIRA CORRIDA NÃO EXISTE MEDIDA - `init` roda ANTES do import, que é a
+                           * ordem que o `sui-init` prescreve. Dizer só "match" aqui deixaria ele achando que
+                           * a plataforma escolheu, quando ela ainda não olhou.
+                           *
+                           * Então a linha diz as duas coisas: o que `match` significa, e que o número chega
+                           * depois. A dependência entra como a única pista que existe hoje, nomeada como
+                           * pista - senão ela se passa por medida.
+                           */
+                            `each component in the language it is already written in - measured at import. Nothing measured yet; ${project === "tailwind" ? `your dependencies declare tailwindcss${major ? ` v${major}` : ""}` : "no tailwind in your dependencies"}`;
+    console.log(`  styles:        ${config.styles}  (${why})`);
     if (config.absorb)
         console.log(`  absorb:        ${config.absorb}${config.absorb === "code" ? "  (we hand you the CSS block; your file stays yours)" : "  (absorbed values become tokens of the system)"}`);
     if (config.intent)

package/dist/commands/refit.js

@@ -6,6 +6,7 @@ import { installedSlugs } from "../installed.js";
 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";
 /** Slugs INSTALLED under `_synthesisui/ds/` (a `.lock` marks a real install -
  *  a folder holding only refit artifacts doesn't count). */
 /** True when the system is actually installed (tokens.css present). */
@@ -114,7 +115,9 @@ export async function refit(file, opts) {
     if (config.target === "next") {
         const compDir = join(root, config.componentsDir, res.name);
         await mkdir(compDir, { recursive: true });
-        const files = generateComponentFiles(slug, res.name, res.recipe, res.css, saved.version, config.styles, await reactMajorOf(root), await readInstalledConvention(root, slug), res.name, await readInstalledScheme(root, slug));
+        // 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));
         for (const f of files) {
             await writeFile(join(compDir, f.filename), f.code, "utf8");
         }

package/dist/commands/upgrade.js

@@ -9,6 +9,7 @@ import { installedBehind, MATERIALISER_SINCE } from "../install-marks.js";
 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 { readCensus, unreadComment, unreadForComponent, } from "../unread-for-component.js";
 import { add } from "./add.js";
 import { reportWhatIsLeft } from "./align.js";
@@ -284,6 +285,10 @@ export async function upgrade(asked, opts) {
         catch {
             // no componentsDir yet - nothing materialized
         }
+        // A LÍNGUA DE CADA COMPONENTE, resolvida uma vez para a corrida inteira e não por
+        // 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);
         for (const entry of entries) {
             const tsxPath = join(componentsRoot, entry, `${entry}.tsx`);
             let head = "";
@@ -297,7 +302,7 @@ export async function upgrade(asked, opts) {
                 continue;
             try {
                 const res = await fetchComponent(base, slug, entry);
-                const files = generateComponentFiles(slug, res.name, res.recipe, res.css, res.version, config.styles, 
+                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.

package/dist/component-codegen.js

@@ -1338,7 +1338,15 @@ ${dataAttrLines(partAxes)}${partAxes.length ? "\n" : ""}      {...props}
         .join("\n")}`;
 }
 /** All files for one component, under `<componentsDir>/<name>/`. */
-export function generateComponentFiles(slug, name, recipe, css, version, styles, 
+export function generateComponentFiles(slug, name, recipe, css, version, 
+/**
+ * A LÍNGUA DESTE COMPONENTE, e não a do projeto - resolvida por `flavourResolver`.
+ *
+ * Já foi o sabor do projeto inteiro. Num repositório real isso devolvia mais de 200 arquivos na
+ * língua errada: medido em 605 componentes, 276 importam um `.module.css` e 231 escrevem
+ * utilitários, e nenhuma forma passa de metade.
+ */
+styles, 
 /** Consumer's React major, read from its package.json. Null = unknown, which
  *  keeps the ref-less type rather than guessing in the unsafe direction. */
 reactMajor = null, 

package/dist/config.js

@@ -105,7 +105,7 @@ export const DEFAULT_CONFIG = {
     target: "next",
     pagesDir: "app",
     componentsDir: "components",
-    styles: "css",
+    styles: "match",
 };
 const projectConfigPath = (root) => join(root, "_synthesisui", "config.json");
 /** Reads the project config, falling back to defaults when absent/invalid. */
@@ -121,7 +121,14 @@ export async function readProjectConfig(root) {
             componentsDir: typeof parsed.componentsDir === "string" && parsed.componentsDir
                 ? parsed.componentsDir
                 : DEFAULT_CONFIG.componentsDir,
-            styles: parsed.styles === "tailwind" ? "tailwind" : "css",
+            // `match` é o padrão desde 24/08 e um config mais velho não o carrega. `"css"` continua
+            // sendo o que um config antigo pedia explicitamente, então ele é honrado como escrito - e a
+            // ausência do campo passa a valer `match`, que é a resposta medida.
+            styles: parsed.styles === "tailwind"
+                ? "tailwind"
+                : parsed.styles === "css"
+                    ? "css"
+                    : "match",
             /**
              * A INTENÇÃO NÃO TEM DEFAULT AQUI, de propósito.
              *

package/dist/doctor/class-style.js

@@ -26,8 +26,14 @@ const MODULE_FILE = /\.module\.(css|scss|sass|less)$/i;
 const STYLESHEET = /\.(css|scss|sass|less)$/i;
 /** A class selector at the start of a rule: `.metric-card__title {`. */
 const CLASS_DECL = /^\s*\.([a-zA-Z][a-zA-Z0-9_-]*)\s*[,{:]/gm;
-/** A Tailwind-shaped utility in markup - enough to know they exist. */
-const UTILITY = /\b(?:bg|text|border|p|px|py|m|mx|my|gap|flex|grid|rounded|shadow)-[a-z0-9[\]./-]+/g;
+/**
+ * A Tailwind-shaped utility in markup - enough to know they exist.
+ *
+ * EXPORTADO em 24/08 porque o censo passou a contar utilitários POR COMPONENTE, e não só por
+ * projeto: duas contagens que discordem sobre o que é um utilitário mandariam o mesmo arquivo para
+ * sabores diferentes na soma e no detalhe.
+ */
+export const UTILITY = /\b(?:bg|text|border|p|px|py|m|mx|my|gap|flex|grid|rounded|shadow)-[a-z0-9[\]./-]+/g;
 /**
  * Below this many global class declarations, a "convention" is a handful of
  * one-off selectors rather than a house style - and adopting one from noise

package/dist/doctor/coverage.js

@@ -1,20 +1,4 @@
-/**
- * WHAT THIS VERSION CAN AND CANNOT READ, MEASURED ON THEIR OWN REPO.
- *
- * The most commercially important thing in the pipeline, and it took a person saying
- * "nothing works" to see it (dono, 01/08).
- *
- * Before this, importing a CSS-Modules app produced 283 components with zero
- * declarations and said nothing about why. A person seeing that concludes the product is
- * broken, and they are reasoning correctly from what they were shown. The defect was
- * never the gap - every reader has a boundary. The defect was the SILENCE about it.
- *
- * So the census measures its own coverage and says the number before anything is sent:
- * how each component expresses style, how many of those this version reads, and which
- * ones it does not - by name, with the count from their repo rather than a disclaimer.
- *
- * A governance product that cannot state what it does not govern is not trustworthy.
- */
+import { UTILITY } from "./class-style.js";
 /**
  * Every shape, in the order the enumeration found them. Each entry survived being
  * counted on a real repo: a shape with no evidence is a shape I assumed.
@@ -79,7 +63,27 @@ export const STYLE_SHAPES = [
         test: /\bsx=\{|@chakra-ui|@pandacss/,
     },
 ];
-export function countShape(source, name, into) {
+export function countShape(source, name, into, 
+/**
+ * A FORMA DE CADA COMPONENTE, e não só a soma - o dado que a esteira media e jogava fora.
+ *
+ * O QUE ELE DESTRAVA: componentes gerados na língua do arquivo onde eles nascem. Um repositório
+ * real não tem UMA forma - medido no `frontend-hub` (24/08): 214 arquivos em CSS Modules, 157 em
+ * lista de classes escrita, 138 em template com valor de runtime. Nenhuma passa de 30%.
+ *
+ * Escolher um sabor global obriga a maioria do código dele a receber componentes na forma errada.
+ * Com a forma por componente, o `Button` que ele escreve em utilitários recebe utilitários e o
+ * `Card` em CSS Modules recebe CSS Modules - cada um na língua que aquele arquivo fala.
+ *
+ * A PRIMEIRA FORMA VENCE, e a ordem é a de `STYLE_SHAPES`: um arquivo pode casar mais de um teste
+ * (um componente em CSS Modules que também usa `style={{ }}` numa linha), e a primeira da lista é
+ * a mais estrutural. Somar as duas diria que ele usa as duas igualmente, o que não é verdade.
+ *
+ * Opcional porque `countShape` tem outro chamador que só quer a soma - e um parâmetro obrigatório
+ * ali seria mudar uma pergunta que não mudou.
+ */
+perComponent) {
+    let first = null;
     for (const shape of STYLE_SHAPES) {
         if (!shape.test.test(source))
             continue;
@@ -88,7 +92,13 @@ export function countShape(source, name, into) {
         if (at.examples.length < 4)
             at.examples.push(name);
         into.set(shape.key, at);
+        first ??= shape.key;
     }
+    if (first && perComponent && !perComponent.has(name))
+        perComponent.set(name, {
+            shape: first,
+            utilities: source.match(UTILITY)?.length ?? 0,
+        });
 }
 export function summarizeCoverage(counts, components, read, declarations) {
     return {

package/dist/index.js

@@ -104,7 +104,9 @@ Options:
   --target <t>       template/init target: next | general (default: next)
   --pages-dir <dir>  init: folder for generated pages (default: app)
   --components-dir <dir>  init: folder where components live (default: components)
-  --styles <s>       init: component code flavor: css | tailwind (default: css)
+  --styles <s>       init: css | tailwind. Default: each component comes back in the
+                     language it is already written in - pass one of these only if you
+                     are migrating TO it
   --artifacts-only   component: skip the .tsx materialization (recipe + css only)
   --interactive      component: materialize the rich/behaving variant (join-field, streak, xp-bar)
   --replace <name>   refit: replace an existing DS component (keeps its name)

package/dist/install-marks.js

@@ -128,7 +128,7 @@
  * é sempre o bump deste PR - nunca o número que o `package.json` já carrega, porque alguém pode
  * publicar no meio.
  */
-export const MATERIALISER_SINCE = "0.16.293";
+export const MATERIALISER_SINCE = "0.16.305";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *
@@ -253,7 +253,18 @@ export const CHECKER_SINCE = "0.16.250";
  * publicado antes deste código existir, e uma marca nele calaria o aviso para quem o instalou. Mesma
  * lição de algumas horas antes, na mesma sessão.
  */
-export const READER_SINCE = "0.16.299";
+/**
+ * 0.16.299 -> 0.16.305 em 25/08: o censo passou a carregar `coverage.byComponent` - como CADA
+ * componente escreve estilo, e quantos utilitários ele usa.
+ *
+ * Campo novo, então um censo medido antes não o tem: `styles: "match"` cai no sabor do projeto
+ * inteiro, que é o que a versão anterior já fazia. Ninguém regride - mas quem não remede também não
+ * ganha, e num projeto híbrido o que ele ganha são mais de 200 componentes voltando na língua em
+ * que já estão escritos, em vez de na língua da maioria.
+ *
+ * É exatamente o que esta marca existe para dizer: o `align` avisa que vale remedir.
+ */
+export const READER_SINCE = "0.16.305";
 /**
  * O QUE ESTÁ INSTALADO AQUI FICOU PARA TRÁS - e as DUAS condições que fazem isso ser verdade.
  *

package/dist/stack.js

@@ -187,3 +187,59 @@ export async function detectStack(root) {
         stack.push("plain css");
     return stack;
 }
+/**
+ * QUAL SABOR DE ESTILO O PROJETO DELE PEDE - derivado do que foi MEDIDO, nunca de um default nosso.
+ *
+ * O QUE ACONTECIA: `DEFAULT_CONFIG.styles` é `"css"`, e só virava `"tailwind"` se alguém passasse
+ * `--styles` no `init`. O import nunca pergunta e nunca grava esse campo. Resultado, no repositório
+ * do dono (24/08): um projeto com `tailwindcss ^4.3.0` receberia componentes em CSS, com um `.css`
+ * ao lado de cada um, num repositório onde todo o resto é Tailwind.
+ *
+ * E a informação para acertar já estava na mão: `detectStack` mede `tailwind` no segundo em que o
+ * censo é tirado. A plataforma media o fato e usava o oposto - a mesma família do prefixo `ds-` e
+ * das partes numeradas.
+ *
+ * A REGRA É A DELE, E O SILÊNCIO É NOSSO. Um projeto que declara Tailwind recebe Tailwind. Um que
+ * não declara recebe CSS, que é o que funciona em qualquer lugar - e aí o default é uma resposta
+ * honesta a uma pergunta sem dado, não um palpite sobre um dado que existe.
+ */
+export function stylesFor(deps, 
+/**
+ * A FORMA DOMINANTE MEDIDA NO CÓDIGO DELE - `utility`, `modules` ou `global`.
+ *
+ * ELA VENCE A DEPENDÊNCIA, e o caso híbrido é a razão: um projeto pode ter `tailwindcss`
+ * instalado e escrever quase tudo em CSS Modules. Medido no `frontend-hub` (24/08):
+ * `@tailwindcss/postcss` e `@tailwindcss/vite` nas dependências, `classStyle: "modules"`, e o
+ * ledger conta 17 976 fragmentos `css` contra 2 620 de classe. Perguntar ao `package.json`
+ * responderia "tailwind" sobre um repositório que escreve CSS Modules.
+ *
+ * A dependência diz o que está INSTALADO; `classStyle` diz o que ele ESCREVE. A segunda é a
+ * pergunta - e é a mesma lei do resto da esteira: medir o fato, não o proxy.
+ *
+ * Ausente quando o censo não mediu (uma chamada mais velha, um projeto sem componente), e aí a
+ * dependência volta a ser a melhor pista que existe.
+ */
+classStyle) {
+    if (classStyle === "utility")
+        return "tailwind";
+    if (classStyle === "modules" || classStyle === "global")
+        return "css";
+    return deps.tailwindcss ? "tailwind" : "css";
+}
+/**
+ * A VERSÃO MAIOR DO TAILWIND - e ela decide a sintaxe, não só a etiqueta.
+ *
+ * `@theme` e `@utility` existem na v4 e não na v3. Gerar a sintaxe de uma para um projeto da outra
+ * produz um arquivo que o build DELE não entende - e é o pior tipo de saída, porque parece certa
+ * até alguém compilar.
+ *
+ * `null` quando o pacote não está lá ou quando a faixa não diz um número - um intervalo que não se
+ * resolve é ausência de resposta, e supor a v4 seria escolher o mais novo por conveniência nossa.
+ */
+export function tailwindMajor(deps) {
+    const raw = deps.tailwindcss;
+    if (!raw)
+        return null;
+    const m = /(\d+)\./.exec(raw.replace(/^[^0-9]*/, ""));
+    return m ? Number(m[1]) : null;
+}

package/dist/styles-flavour.js

@@ -0,0 +1,121 @@
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { resolveDeps, stylesFor } from "./stack.js";
+/**
+ * QUANTOS UTILITÁRIOS BASTAM PARA DIZER QUE UM COMPONENTE ESCREVE UTILITÁRIOS.
+ *
+ * Um `p-4` solto num arquivo de CSS Modules é a exceção de alguém, não a língua do arquivo. Três
+ * separa as duas populações com folga na medição de 24/08: os componentes em CSS Modules ficam em
+ * 1% acima desse corte e os de lista de classes em 78%.
+ */
+const ENOUGH_UTILITIES = 3;
+/**
+ * O QUE A FORMA MEDIDA DECIDE SOZINHA - e `null` quando ela não decide.
+ *
+ * `module` decide: quem importa um `.module.css` escreve CSS, e não há segunda leitura. As outras
+ * formas não decidem pelo nome - `static` é `className="flex gap-2"` em 78% dos casos e
+ * `className="card-header"` nos outros 22% -, então quem responde é a contagem de utilitários.
+ *
+ * E quando nem ela responde, a resposta é `null`: o componente volta no sabor do PROJETO. Ausência
+ * de sinal devolve a decisão para quem tem mais dado, em vez de virar palpite aqui.
+ */
+export function flavourOfShape(measured) {
+    if (!measured)
+        return null;
+    if (measured.shape === "module")
+        return "css";
+    if (measured.utilities >= ENOUGH_UTILITIES)
+        return "tailwind";
+    return null;
+}
+/**
+ * O SABOR DESTE COMPONENTE, com o do projeto como piso.
+ *
+ * `match` pergunta ao que foi medido e cai no do projeto quando a medida não decide - inclusive num
+ * censo tirado antes de 24/08, que não carrega medida nenhuma. Um ajuste explícito (`css` ou
+ * `tailwind`) vence sempre: ele é o destino que ele escolheu, e medida nenhuma sabe disso.
+ */
+export function flavourFor(setting, project, component, byComponent) {
+    if (setting !== "match")
+        return setting;
+    return flavourOfShape(byComponent?.[component]) ?? project;
+}
+/**
+ * O CORTE DA MINORIA - abaixo disso a segunda forma é exceção, não migração.
+ *
+ * 10% dos componentes é o menor grupo que ainda dói se voltar na língua errada: num repositório de
+ * 605, são 60 arquivos. Abaixo disso a plataforma decide sozinha e não gasta a atenção dele.
+ */
+const MINORITY = 0.1;
+export function formMix(byComponent) {
+    const entries = Object.values(byComponent ?? {});
+    let css = 0;
+    let tailwind = 0;
+    for (const measured of entries) {
+        const flavour = flavourOfShape(measured);
+        if (flavour === "css")
+            css += 1;
+        else if (flavour === "tailwind")
+            tailwind += 1;
+    }
+    const decided = css + tailwind;
+    const smaller = Math.min(css, tailwind);
+    return {
+        css,
+        tailwind,
+        undecided: entries.length - decided,
+        mixed: decided > 0 && smaller / decided >= MINORITY,
+    };
+}
+/**
+ * O SABOR DE CADA COMPONENTE, RESOLVIDO UMA VEZ PARA O COMANDO INTEIRO.
+ *
+ * O QUE ELE EVITA: quatro comandos escrevem componentes - `component`, `generate`, `refit` e
+ * `upgrade` -, e cada um teria que ler o censo, ler o `package.json`, casar as duas medidas e
+ * decidir. Quatro cópias da mesma regra são quatro chances de duas delas discordarem, e aí o mesmo
+ * componente volta em CSS por um comando e em utilitários pelo outro.
+ *
+ * Devolve uma FUNÇÃO e não um valor, porque a resposta é por componente: `flavourOf("Card")` pode
+ * ser `css` e `flavourOf("Button")` `tailwind` na mesma corrida, que é exatamente o ponto.
+ *
+ * TUDO GUARDADO: um censo ilegível, um `package.json` ausente ou um projeto que nunca importou
+ * caem no sabor do projeto, e um projeto sem medida nenhuma cai em `css` - que é o que funciona em
+ * qualquer lugar. Nenhuma leitura aqui pode impedir alguém de gerar um componente.
+ */
+export async function flavourResolver(root, setting) {
+    // Um ajuste explícito é o destino que ele escolheu: nada aqui precisa ser lido para honrá-lo.
+    if (setting !== "match")
+        return () => setting;
+    const { byComponent, classStyle } = await measuredStyle(root);
+    const project = stylesFor(await resolveDeps(root).catch(() => ({})), classStyle);
+    return (component) => flavourFor("match", project, component, byComponent);
+}
+/**
+ * O QUE O CENSO MEDIU SOBRE ESTILO - as duas respostas, numa leitura só.
+ *
+ * `byComponent` diz como CADA componente escreve; `classStyle` diz como o projeto escreve. A
+ * primeira decide o sabor de um componente e a segunda é o piso quando ela não decide, então elas
+ * andam juntas - e lê-las em dois lugares diferentes é abrir espaço para duas respostas.
+ *
+ * VAZIO em vez de erro quando não há censo, quando ele é ilegível, ou quando foi tirado antes de
+ * 24/08 e não carrega medida por componente: `init` roda antes de qualquer medição, e um censo
+ * quebrado não pode impedir alguém de configurar o projeto.
+ */
+export async function measuredStyle(root) {
+    const raw = await readFile(join(root, "_synthesisui", "census.json"), "utf8").catch(() => "");
+    if (!raw)
+        return {};
+    try {
+        const census = JSON.parse(raw);
+        const kind = census.classStyle?.kind;
+        return {
+            byComponent: census.coverage?.byComponent,
+            classStyle: kind === "global" || kind === "modules" || kind === "utility"
+                ? kind
+                : undefined,
+        };
+    }
+    catch {
+        return {};
+    }
+}

package/package.json

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