synthesisui 0.16.302 → 0.16.306

package/dist/agent-wiring.js

@@ -37,20 +37,22 @@ export async function hookCommand(root, version) {
         : `npx synthesisui@${version} hook`;
 }
 /**
- * COMO A SESSÃO CHAMA O CLI, e por que este NÃO é pinado.
+ * COMO A SESSÃO CHAMA O CLI - pinado, como o hook de escrita, e por um número.
  *
- * O hook de escrita é pinado porque roda dezenas de vezes por sessão e um verificador que muda sob
- * você a cada edit é indebugável. Este roda UMA vez, e o trabalho dele é justamente dizer o que está
- * atrasado - inclusive o próprio CLI. Um `align` pinado no dia do `connect` não conhece nenhuma
- * verificação escrita depois, e passa a garantir silêncio em vez de alinho.
+ * Este já foi `@latest`, com a tese de que um `align` pinado não conhece verificação escrita depois
+ * dele. A tese perdeu para a medição de 25/08: `@latest` NUNCA cacheia - o npx faz round-trip no
+ * registro em TODA abertura de sessão (2,92s, sempre), enquanto a versão fixada cacheia (0,32s
+ * morno). O trabalho do align em si custa 50ms; o resto era o preço de manter a tese.
  *
- * O custo do `npx` (720ms-1.5s, medido em 27/07) é pago uma vez na abertura, não por escrita.
+ * E a tese tinha resposta: dizer o que está atrasado - inclusive o próprio CLI - continua sendo o
+ * trabalho do align, só que agora o fato vem do SERVIDOR (`cli` no `?meta=1`, ver `versionBehind`),
+ * que sabe o que está publicado sem que este binário precise se reinstalar para perguntar.
  */
-export async function alignCommand(root) {
+export async function alignCommand(root, version) {
     const local = join(root, "node_modules", ".bin", "synthesisui");
     return (await exists(local))
         ? "npx --no-install synthesisui align"
-        : "npx synthesisui@latest align";
+        : `npx synthesisui@${version} align`;
 }
 /**
  * Returns the command that IS in the file, not the one we would have written.
@@ -234,7 +236,7 @@ export async function wireAgent(root, version, want) {
          * logado" ou "este sistema não sabe de onde foi medido".
          */
         session: want.hook
-            ? await wireSessionStart(root, await alignCommand(root))
+            ? await wireSessionStart(root, await alignCommand(root, version))
             : "skipped",
         mcp: want.mcp ? await wireMcp(root, version) : "skipped",
     };

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/align.js

@@ -459,6 +459,20 @@ export async function versionBehind(root, opts = {}) {
             says: `the rules that govern "${lock.slug}" changed since this repo materialized them - your agent reads the copy on disk, so it is still following the previous set.`,
             run: "npx synthesisui upgrade",
         };
+    /**
+     * ESTE BINÁRIO FICOU PARA TRÁS - a linha que devolve ao align o trabalho que o `@latest` fazia.
+     *
+     * A abertura de sessão roda uma versão PINADA desde 25/08 (o `@latest` custava 2,92s de registro
+     * em toda sessão, medido), então nada aqui descobre sozinho que existe CLI mais novo - o número
+     * vem do servidor, que consulta o npm e cala quando não sabe. Vem POR ÚLTIMO de propósito: um
+     * fato sobre o sistema dele vale mais que uma novidade sobre a nossa ferramenta, e esta linha só
+     * aparece quando todo o resto está em dia.
+     */
+    if (opts.cli && body.cli && isOlderCli(opts.cli, body.cli))
+        return {
+            says: `this session's opening check runs CLI ${opts.cli} and ${body.cli} is what installs today - the check is pinned on purpose, so it will not move by itself.`,
+            run: "npx synthesisui@latest connect",
+        };
     return null;
 }
 /**
@@ -550,7 +564,9 @@ export async function misalignments(root, opts = {}) {
         ...(opts.cli ? { cli: opts.cli } : {}),
     }).catch(() => []);
     /** A única linha que custa rede, e ela some inteira quando não há rede. */
-    const remote = await versionBehind(root).catch(() => null);
+    const remote = await versionBehind(root, {
+        ...(opts.cli ? { cli: opts.cli } : {}),
+    }).catch(() => null);
     if (remote)
         items.push(remote);
     return items;

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

@@ -1,5 +1,5 @@
 import { mkdir, readdir, readFile, stat, writeFile } from "node:fs/promises";
-import { basename, dirname, join, relative } from "node:path";
+import { basename, dirname, join, relative, sep } from "node:path";
 import { anatomyFromSketch } from "../anatomy-from-sketch.js";
 import { applyAnatomyPatch, hasEdits, } from "../anatomy-patch.js";
 import { resolveAnatomy, resolveFlatParts, safePartName, } from "../anatomy-read.js";
@@ -402,8 +402,18 @@ export async function takeCensus(root, opts) {
      * Os caminhos que o leitor REALMENTE olhou são o escopo mais os de uso: `--scope packages/ui
      * --usage apps/web` lê os dois, então nenhum dos dois é "fora". Sem `scopeLabel` a função devolve
      * `null` por conta, porque aí ele apontou para a raiz.
+     *
+     * A CAMINHADA PARTE DA RAIZ DO REPO, não da raiz escopada. `root` aqui JÁ é
+     * `<repo>/<scopeLabel>` (o chamador faz `join(root, one)`), então medir a partir dele compara
+     * `src/Button.tsx` com `packages/ui/…` - nada casa, e os 121 arquivos que a esteira acabou de LER
+     * eram reportados como "fora do que você apontou - nada foi lido lá". Disparava SEMPRE com
+     * `--scope`, e o primeiro relatório do cliente abria com uma acusação falsa sobre o repositório
+     * dele (medido em 25/08: 121 contra os 14 reais).
      */
-    const outside = await outsideScope(root, [
+    const repoRoot = scopeLabel && root.endsWith(join(sep, ...scopeLabel.split("/")))
+        ? root.slice(0, root.length - scopeLabel.length - 1)
+        : root;
+    const outside = await outsideScope(repoRoot, [
         ...(scopeLabel ? [scopeLabel] : []),
         ...(opts?.usage ?? []).map((u) => u.label),
     ]).catch(() => null);
@@ -558,6 +568,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 +699,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 +2242,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/doctor/fragments.js

@@ -45,8 +45,12 @@ const STYLED_OPEN = /\bstyled(?:\.[a-zA-Z][\w]*|\([^)]{1,60}\))\s*(?:<[^>]{0,120
 const PIECES = /([^{};]*)([{};]|$)/g;
 /** Uma declaração `prop: value`, já sem o terminador. */
 const DECLARATION = /^(-{0,2}[a-zA-Z][\w-]*)\s*:\s*([^;{}]{1,200})$/;
-/** Uma classe que só um literal pode ter: começa com letra minúscula. */
-const LOOKS_LIKE_CLASS = /^[a-z[]/;
+/**
+ * Uma classe que só um literal pode ter: começa com letra minúscula - ou com o `!` de important,
+ * que é como o Tailwind v3 escreve `!text-ink-900`. Sem o `!`, um className inteiro de important
+ * nem entrava no denominador: não era lido E não era "não lido" (25/08).
+ */
+const LOOKS_LIKE_CLASS = /^[!a-z[]/;
 /**
  * `${styles.card}` dentro de um template: uma classe de CSS module, cujo valor mora no arquivo de
  * estilo - que a esteira lê. É a mesma regra que `CLASS_RUNTIME` já aplica a `className={styles.x}`.

package/dist/doctor/transcribe.js

@@ -669,7 +669,17 @@ function withAlpha(d, alpha) {
 }
 /** `w-1/2`, `basis-2/3` - a fraction is a width, and the `/` is not an alpha. */
 const FRACTION = /^(w|h|basis|max-w|max-h|min-w|min-h|top|right|bottom|left|inset)-(\d+)\/(\d+)$/;
-export function readUtility(utility, declared) {
+export function readUtility(raw, declared) {
+    /**
+     * O `!` DE IMPORTANT SAI ANTES DE TUDO - `!text-ink-900` (v3) e `text-ink-900!` (v4).
+     *
+     * O important é como ele força o cascade DENTRO do app dele; a decisão de design é o valor, e
+     * era ela que morria: `!text-ink-900` chegava aqui inteiro, nenhum prefixo casava, e a camada
+     * sumia sem uma linha - com `--color-ink-900` declarado no CSS dele. 48 valores num censo real,
+     * 20 e 4 nas duas populações congeladas (25/08). Numa receita não há cascade para forçar, então
+     * despir o `!` não perde decisão nenhuma.
+     */
+    const utility = raw.replace(/^!/, "").replace(/!$/, "");
     /**
      * BEFORE THE ALPHA SPLIT, because the two share a slash and only one of them is a
      * colour. `w-1/2` was reaching the size reader as `w-1` and coming back `0.25rem` -

package/dist/doctor/variant-read.js

@@ -270,6 +270,67 @@ export function literalClasses(fragment) {
     }
     return out;
 }
+/**
+ * OS TRECHOS DO ARQUIVO QUE CONSOMEM CLASSE - `className={…}` (e qualquer `*ClassName=`),
+ * e as chamadas que produzem classe (`cn`, `clsx`, `cva`, `tv`, …).
+ *
+ * Existe porque os três leitores de condição liam o arquivo INTEIRO como se toda string fosse
+ * classe: 531 de 1119 entradas de `rawLayers.classes` num censo real eram literais de ternário e
+ * de record que nunca foram classe - `gray`, `True`, `Find`, `✅`, `h1` - e o gradiente do Aurora
+ * deles chegava partido em `0%,rgba(…)` porque um VALOR de CSS foi partido no espaço como se
+ * fosse lista de classes (medido em 25/08). A forma sozinha não decide (`gray` e `hidden` têm a
+ * mesma forma); o consumo decide - a mesma doutrina que `looksLikeClassList` já escreveu.
+ */
+const CLASS_ATTR = /(?:^|[^A-Za-z])[A-Za-z]*[Cc]lassName=\{/g;
+const CLASS_CALL = /\b(?:cn|clsx|classNames|cx|twMerge|twJoin|classcat|cva|tv)\(/g;
+export function classSpans(source) {
+    const spans = [];
+    for (const re of [CLASS_ATTR, CLASS_CALL]) {
+        re.lastIndex = 0;
+        for (const m of source.matchAll(re)) {
+            const open = (m.index ?? 0) + m[0].length - 1;
+            const end = endOf(source, open);
+            if (end !== -1)
+                spans.push([open, end]);
+        }
+    }
+    return spans;
+}
+function inSpan(spans, index) {
+    return spans.some(([open, end]) => index > open && index < end);
+}
+/**
+ * O RECORD É CONSUMIDO COMO CLASSE? - direto (`styles[size]` dentro de um contexto de classe) ou
+ * com um pulo (`const config = statusConfig[status]` e depois `config.dotClass` num `cn()`),
+ * inclusive desestruturado (`const { fontSize } = sizeConfig[size]`).
+ *
+ * Um pulo só, de propósito: seguir a cadeia inteira seria reimplementar um resolvedor de escopo, e
+ * os 8 de 8 casos medidos no repo real (dono, 06/08) cabem em um.
+ */
+function consumedAsClass(source, spans, symbol) {
+    for (const m of source.matchAll(new RegExp(`\\b${symbol}\\s*\\[`, "g"))) {
+        const at = m.index ?? 0;
+        if (inSpan(spans, at))
+            return true;
+        const before = source.slice(Math.max(0, at - 120), at);
+        const alias = /([A-Za-z_$][\w$]*)\s*=\s*$/.exec(before)?.[1];
+        const destructured = /\{([^{}]*)\}\s*=\s*$/.exec(before)?.[1];
+        const names = destructured
+            ? destructured.split(",").map((s) => s.split(":")[0].trim())
+            : alias
+                ? [alias]
+                : [];
+        for (const name of names) {
+            if (!name || !/^[A-Za-z_$][\w$]*$/.test(name))
+                continue;
+            for (const use of source.matchAll(new RegExp(`\\b${name}\\b`, "g"))) {
+                if (inSpan(spans, use.index ?? 0))
+                    return true;
+            }
+        }
+    }
+    return false;
+}
 /**
  * Line and block comments removed, quotes respected.
  *
@@ -600,8 +661,15 @@ function enclosingCallClasses(source, at) {
 }
 export function readInlineConditions(source) {
     const layers = [];
+    const spans = classSpans(source);
     INLINE_COND.lastIndex = 0;
     for (const m of source.matchAll(INLINE_COND)) {
+        /**
+         * `cond && "string"` fora de um contexto de classe é quase sempre CONTEÚDO de JSX
+         * (`{loading && "Finding..."}`), e entrava como classe - o mesmo portão dos ternários.
+         */
+        if (!inSpan(spans, m.index ?? 0) && !looksLikeClassList(m[5] ?? m[9] ?? ""))
+            continue;
         const negated = (m[1] ?? m[6]) === "!";
         const prop = (m[2] ?? m[7] ?? "").split(".").pop() ?? "";
         const raw = m[5] ?? m[9] ?? "";
@@ -824,6 +892,7 @@ unattributed) {
             axisOf.set(m[1], m[2]);
     }
     const layers = [];
+    const spans = classSpans(clean);
     LOOKUP_RECORD.lastIndex = 0;
     for (const m of clean.matchAll(LOOKUP_RECORD)) {
         const symbol = m[1];
@@ -840,6 +909,16 @@ unattributed) {
         const options = entries.filter((e) => literalClasses(e.value).length > 0);
         if (options.length < 2)
             continue;
+        /**
+         * SÓ É ESTILO O QUE UM CONTEXTO DE CLASSE CONSOME - ou o que tem a forma inequívoca de uma
+         * lista de classes. Um record indexado é a forma de MUITAS coisas: `TIER_LABELS[tier]` guarda
+         * conteúdo, `AURORA_PALETTES[palette]` guarda um gradiente que vai para `style=`, e ambos
+         * entravam aqui como classe - 531 de 1119 entradas do censo real eram isso (25/08). O consumo
+         * era a única prova, e a mesma regra já valia para os campos de uma tabela por elemento.
+         */
+        if (!consumedAsClass(clean, spans, symbol) &&
+            !options.some((o) => looksLikeClassList(o.value)))
+            continue;
         if (axesOut) {
             const names = options.map((o) => o.key);
             axesOut[axis] = [...new Set([...(axesOut[axis] ?? []), ...names])];
@@ -916,8 +995,26 @@ unattributed) {
 const CLASS_TERNARY = /([!A-Za-z_$][\w$.!]*)\s*(?:===\s*["']([^"']+)["']\s*)?\?\s*["']([^"']*)["']\s*:\s*["']([^"']*)["']/g;
 export function readClassTernaries(source) {
     const layers = [];
+    const clean = stripComments(source);
+    const spans = classSpans(clean);
     CLASS_TERNARY.lastIndex = 0;
-    for (const m of stripComments(source).matchAll(CLASS_TERNARY)) {
+    for (const m of clean.matchAll(CLASS_TERNARY)) {
+        /**
+         * UM TERNÁRIO ENTRE DUAS STRINGS É A FORMA DE QUALQUER COISA - `loading ? "Finding..." :
+         * "Find"` é o rótulo de um botão, `large ? "h1" : "h2"` é uma tag. Fora de um contexto de
+         * classe, só a forma inequívoca de lista de classes prova estilo; dentro, o consumo prova.
+         * Sem este portão, os dois exemplos acima entravam no censo como classe (25/08).
+         */
+        const at = m.index ?? 0;
+        if (!inSpan(spans, at)) {
+            const before = clean.slice(Math.max(0, at - 120), at);
+            const alias = /([A-Za-z_$][\w$]*)\s*=\s*$/.exec(before)?.[1];
+            const aliased = alias &&
+                /^[A-Za-z_$][\w$]*$/.test(alias) &&
+                [...clean.matchAll(new RegExp(`\\b${alias}\\b`, "g"))].some((u) => inSpan(spans, u.index ?? 0));
+            if (!aliased && !looksLikeClassList(m[3]) && !looksLikeClassList(m[4]))
+                continue;
+        }
         const negated = m[1].startsWith("!");
         const prop = m[1].replace(/^!/, "").split(".").pop() ?? "";
         if (!prop)
@@ -941,6 +1038,100 @@ export function readClassTernaries(source) {
     }
     return layers;
 }
+/** O valor quando ele é UMA string literal inteira - `null` para objeto, template com `${}`, etc. */
+function singleStringValue(value) {
+    const trimmed = value.trim();
+    if (!/^["'`]/.test(trimmed))
+        return null;
+    const closed = endOfString(trimmed);
+    if (closed === -1 || trimmed.slice(closed).trim())
+        return null;
+    const inner = trimmed.slice(1, closed - 1);
+    if (trimmed[0] === "`" && inner.includes("${"))
+        return null;
+    return inner;
+}
+/**
+ * UM RECORD CONSUMIDO POR `style=` É ESTILO POR PROVA, NÃO POR FORMA - e o valor viaja INTEIRO.
+ *
+ *     const AURORA_PALETTES: Record<AuroraPalette, string> = {
+ *       default: "linear-gradient(var(--aurora-angle,125deg),rgba(79,70,229,0.18) 0%,…)",
+ *       cool:    "linear-gradient(…)",
+ *     };
+ *     style={{ backgroundImage: AURORA_PALETTES[palette], … }}   // ou style={mergedStyle}
+ *
+ * O leitor de classes partia esse gradiente no espaço e o censo carregava `0%,rgba(192,132,252,0.18)`
+ * como se fosse classe - 46 valores num censo real (25/08). A propriedade é a que ELE escreveu no
+ * objeto de style (`backgroundImage`), o valor é o que ELE declarou no record, e o eixo é a prop que
+ * indexa - transcrever não é inventar. Um nível de indireção é seguido (`const mergedStyle = {…}` e
+ * `style={mergedStyle}`), que é como o componente real escreve.
+ */
+export function readStyleRecords(source, axesOut) {
+    const clean = stripComments(source);
+    const axisOf = new Map();
+    RECORD_INDEX.lastIndex = 0;
+    for (const m of clean.matchAll(RECORD_INDEX)) {
+        if (!axisOf.has(m[1]))
+            axisOf.set(m[1], m[2]);
+    }
+    if (axisOf.size === 0)
+        return [];
+    // symbol → option → o valor inteiro, para os records cujos valores são strings.
+    const records = new Map();
+    LOOKUP_RECORD.lastIndex = 0;
+    for (const m of clean.matchAll(LOOKUP_RECORD)) {
+        if (!axisOf.has(m[1]))
+            continue;
+        const open = (m.index ?? 0) + m[0].length - 1;
+        const end = endOf(clean, open);
+        if (end === -1)
+            continue;
+        const options = topLevelEntries(clean.slice(open + 1, end - 1))
+            .map((e) => ({ key: e.key, value: singleStringValue(e.value) }))
+            .filter((e) => e.value != null);
+        if (options.length >= 2)
+            records.set(m[1], options);
+    }
+    if (records.size === 0)
+        return [];
+    // Os corpos que ALIMENTAM um style=: o objeto inline, e o const que um style={nome} aponta.
+    const bodies = [];
+    for (const m of clean.matchAll(/style=\{\{/g)) {
+        const open = (m.index ?? 0) + m[0].length - 1;
+        const end = endOf(clean, open);
+        if (end !== -1)
+            bodies.push(clean.slice(open + 1, end - 1));
+    }
+    for (const m of clean.matchAll(/style=\{\s*([A-Za-z_$][\w$]*)\s*\}/g)) {
+        const named = new RegExp(`(?:const|let)\\s+${m[1]}\\b[^=]*=\\s*\\{`, "g").exec(clean);
+        if (!named)
+            continue;
+        const open = named.index + named[0].length - 1;
+        const end = endOf(clean, open);
+        if (end !== -1)
+            bodies.push(clean.slice(open + 1, end - 1));
+    }
+    const layers = [];
+    for (const body of bodies) {
+        for (const m of body.matchAll(/([A-Za-z_$][\w$]*)\s*:\s*([A-Za-z_$][\w$]*)\s*\[/g)) {
+            const property = m[1];
+            const options = records.get(m[2]);
+            const axis = axisOf.get(m[2]);
+            if (!options || !axis)
+                continue;
+            if (axesOut)
+                axesOut[axis] = [
+                    ...new Set([...(axesOut[axis] ?? []), ...options.map((o) => o.key)]),
+                ];
+            for (const option of options)
+                layers.push({
+                    when: { variant: { [axis]: option.key } },
+                    style: { [property]: option.value },
+                });
+        }
+    }
+    return layers;
+}
 /**
  * A LOOKUP INDEXED BY A TERNARY, which is how the same record serves a boolean.
  *
@@ -977,6 +1168,12 @@ globals) {
         ...readLookupRecords(source, fromRecords, unslotted),
         ...readClassTernaries(source),
     ];
+    /**
+     * O record que um `style=` consome - valores prontos, sem tabela de escala no meio.
+     * Entram direto nas camadas finais (e registram o eixo), nunca em `raw`: `raw` é
+     * matéria-prima de reinterpretação por classes, e estes já são o valor final.
+     */
+    const styleRecords = readStyleRecords(source, fromRecords);
     const axes = {};
     const defaults = {};
     const allLayers = [];
@@ -1087,7 +1284,7 @@ globals) {
         reads,
         axes,
         defaults,
-        layers,
+        layers: [...layers, ...styleRecords],
         raw: allLayers,
         base: withGlobal(transcribe(baseClasses, declared), baseClasses, globals),
         unslotted,

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,16 @@
  * é 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";
+/**
+ * 0.16.305 -> 0.16.306 em 25/08, e o SIM é sobre a FIAÇÃO que o `upgrade` regrava: o hook de
+ * `SessionStart` passa a ser pinado (`npx synthesisui@<versão> align`) em vez de `@latest`. O
+ * `@latest` nunca cacheia - round-trip no registro em TODA abertura de sessão, 2,92s medidos, contra
+ * 0,32s da versão fixada - e o trabalho do align em si custa 50ms. Um `upgrade` anterior deixa o
+ * `.claude/settings.json` pagando 2,9s por sessão; quem roda o upgrade novo recebe bytes diferentes
+ * ali, que é exatamente o que esta marca existe para dizer. Quem avisa versão nova passa a ser o
+ * próprio align, com o `cli` que o servidor manda no `?meta=1`.
+ */
+export const MATERIALISER_SINCE = "0.16.306";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *
@@ -253,7 +262,33 @@ 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.
+ */
+/**
+ * 0.16.305 -> 0.16.306 em 25/08: três leituras que devolvem estilo do cliente, medidas antes de
+ * escrever (itens 8, 9 e 10 do diagnóstico de 25/08):
+ *
+ *   1. O `!` de important deixa de matar o utilitário: `!text-ink-900` com `--color-ink-900`
+ *      declarado agora resolve (48 valores no censo real; e o ledger passou a CONTAR um className
+ *      de important, que antes nem entrava no denominador).
+ *   2. Um record consumido por `style=` viaja como o VALOR que ele é: o gradiente do Aurora chega
+ *      inteiro em `layers`, em vez de partido em `0%,rgba(…)` como classe (46 valores).
+ *   3. Só é classe o que um contexto de classe consome: literais de ternário e de record de
+ *      conteúdo (`Finding...`, `h1`, `✅`) saem de `rawLayers.classes` - eram 531 de 1119 entradas
+ *      (47%) no censo real, poluindo numerador e denominador de toda métrica em cima.
+ *
+ * Um censo medido antes carrega a poluição e a perda; quem remede ganha os três de uma vez.
+ */
+export const READER_SINCE = "0.16.306";
 /**
  * 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.302",
+  "version": "0.16.306",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {