synthesisui 0.16.457 → 0.16.459

package/dist/cn-codegen.js

@@ -58,6 +58,14 @@ export function readVocabulary(themeCss) {
         fontWeights: weights,
     };
 }
+/**
+ * The type scale every Tailwind v4 project has, whether the system declares it or not. Oscilla's
+ * theme.css declares only `--text-display`, so `cn("text-xs", "text-2xl")` kept both and the
+ * stylesheet order decided (refinement round 1, 27/09).
+ */
+const TAILWIND_TEXT_SIZES = [
+    "xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl",
+];
 const set = (names) => `new Set([${names.map((n) => JSON.stringify(n)).join(", ")}])`;
 /** The `cn.ts` a project gets, written against ITS system's vocabulary. */
 export function emitCn(slug, vocab) {
@@ -84,7 +92,7 @@ export function emitCn(slug, vocab) {
 
 /** This system's own namespaces, so \`text-*\` and \`font-*\` are never a guess. */
 const COLORS = ${set(vocab.colors)};
-const TEXT_SIZES = ${set(vocab.textSizes)};
+const TEXT_SIZES = ${set([...new Set([...TAILWIND_TEXT_SIZES, ...vocab.textSizes])])};
 const FONT_FAMILIES = ${set(vocab.fontFamilies)};
 const FONT_WEIGHTS = ${set(vocab.fontWeights)};
 
@@ -97,8 +105,6 @@ const PREFIXES = [
   "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl",
   "rounded-t", "rounded-r", "rounded-b", "rounded-l",
   "rounded",
-  "border-t", "border-r", "border-b", "border-l", "border-x", "border-y",
-  "border",
   "px", "py", "pt", "pr", "pb", "pl", "ps", "pe", "p",
   "mx", "my", "mt", "mr", "mb", "ml", "ms", "me", "m",
   "gap-x", "gap-y", "gap",
@@ -124,6 +130,36 @@ const DISPLAYS = new Set([
 const FLEX_DIRECTIONS = new Set(["row", "col", "row-reverse", "col-reverse"]);
 const FLEX_WRAPS = new Set(["wrap", "nowrap", "wrap-reverse"]);
 
+/**
+ * \`border\` heads THREE properties: the width (\`border\`, \`border-2\`), the style
+ * (\`border-dashed\`) and the colour (\`border-surface\`). Read as one prefix,
+ * \`border border-surface\` kept only the colour and the line vanished - every
+ * card, input and badge in the project, in silence (refinement round 1, 27/09).
+ */
+const BORDER_SIDES = new Set(["t", "r", "b", "l", "x", "y", "s", "e"]);
+const BORDER_STYLES = new Set(["solid", "dashed", "dotted", "double", "hidden", "none"]);
+const COLOR_KEYWORDS = new Set(["transparent", "current", "inherit", "black", "white"]);
+
+function borderGroup(variants: string, rest: string, cls: string): string {
+  const first = rest.split("-")[0];
+  const side = BORDER_SIDES.has(first) ? \`-\${first}\` : "";
+  const tail = side ? rest.slice(first.length + 1) : rest;
+  const isWidth =
+    tail === "" ||
+    [...tail].every((ch) => ch >= "0" && ch <= "9") ||
+    (tail.startsWith("[") && !isArbitraryColor(tail));
+  if (isWidth) return \`\${variants}border\${side}-width\`;
+  if (BORDER_STYLES.has(tail)) return \`\${variants}border-style\`;
+  if (COLORS.has(tail) || COLOR_KEYWORDS.has(tail) || isArbitraryColor(tail)) {
+    return \`\${variants}border\${side}-color\`;
+  }
+  return \`\${variants}\${cls}\`;
+}
+
+function isArbitraryColor(v: string): boolean {
+  return /^\\[(color:|#|rgba?\\(|hsla?\\(|oklch\\(|oklab\\(|var\\(--color)/.test(v);
+}
+
 /**
  * The property this class sets, or the class itself when we cannot tell.
  *
@@ -169,6 +205,7 @@ function groupOf(cls: string): string {
     if (FONT_FAMILIES.has(rest)) return \`\${variants}font-family\`;
     return \`\${variants}\${cls}\`;
   }
+  if (head === "border") return borderGroup(variants, rest, cls);
 
   for (const p of PREFIXES) {
     if (base === p || base.startsWith(\`\${p}-\`)) return \`\${variants}\${p}\`;

package/dist/commands/component.js

@@ -7,7 +7,7 @@ import { readProjectConfig, resolveRegistry } from "../config.js";
 import { detectAppDirs } from "../global-sheet.js";
 import { hasInteractiveTemplate, interactiveTemplate, } from "../interactive-templates.js";
 import { body, section, snippet } from "../output.js";
-import { findCollision, reactMajorOf, readInstalledConvention, readInstalledScheme, theirThemeVars, } from "../project-facts.js";
+import { findCollision, reactMajorOf, readInstalledConvention, readInstalledScheme, theirThemeVars, namedUtilitiesIn, themeVocabOf, } from "../project-facts.js";
 import { fetchComponent, fetchDesignSystem, RegistryError, } from "../registry.js";
 import { flavourResolver } from "../styles-flavour.js";
 import { inTheirTongue, projectTongue, sumSpoken, tongueFromArtifacts, } from "../their-tongue.js";
@@ -356,6 +356,7 @@ export async function component(slug, name, opts) {
             filenames = written.map((f) => f.filename);
         }
         else {
+            const vocab = await themeVocabOf(root, slug, await theirThemeVars(root, await detectAppDirs(root, config.pagesDir)));
             const { files, spoken: said, root: generatedRoot, } = generateComponentFiles(slug, res.name, res.recipe, res.css, res.version, flavour, await reactMajorOf(root), 
             /**
              * THE SPELLING, FROM THE VERSION WE JUST FETCHED.
@@ -385,8 +386,18 @@ export async function component(slug, name, opts) {
              * propriedade renderiza NADA - pior que o valor arbitrário, porque nada falta na tela. É a
              * mesma lição de `INV-VOLTA-12`, que saiu com a instrução de import e não com a topologia.
              */
-            await theirThemeVars(root, await detectAppDirs(root, config.pagesDir)));
-            spoken = said;
+            vocab);
+            /**
+             * O UTILITÁRIO NOMEADO TAMBÉM É O NOME DELE - rodada 1 do refinamento, 27/09. A conta somava só
+             * as `var()` que a porta traduziu, e o leigo leu "0 references now speak the name YOUR code gives
+             * the value" sobre um botão com `bg-primary`, `text-muted` e `p-md`: "se eu acreditasse na
+             * mensagem, ia achar que não tinha funcionado".
+             */
+            const utilities = vocab
+                ? files.reduce((n, f) => n + namedUtilitiesIn(f.code, vocab), 0)
+                : 0;
+            spoken =
+                said && utilities > 0 ? { ...said, named: said.named + utilities } : said;
             root_ = generatedRoot;
             /**
              * AS DECLARAÇÕES DO ARQUIVO DELE QUE O INTERPRETADOR NÃO LEU - ver `unread-for-component.ts`.

package/dist/commands/mcp.js

@@ -409,7 +409,15 @@ async function checkFile(root, path) {
         for (const f of d.findings.slice(0, 40)) {
             out.push(nameToWrite(f)
                 ? `  ${f.file}:${f.line}  ${f.literal} - this repo calls it ${nameToWrite(f)}`
-                : `  ${f.file}:${f.line}  ${f.literal} - no token holds this value`);
+                : /**
+                   * O SISTEMA SEGURA, O PROJETO AINDA NÃO NOMEIA - rodada 1 do refinamento, 27/09. Dizer "no
+                   * token holds this value" sobre o `160ms` que o sistema declara fez o leigo concluir que o
+                   * sistema discordava dele mesmo. O nome continua fora da frase: a grafia `--ds-*` é nossa
+                   * (`INV-GERAL-13`), e batizar o valor no código dele é decisão dele.
+                   */
+                    f.token
+                        ? `  ${f.file}:${f.line}  ${f.literal} - the system holds this value, and your code has no name for it yet`
+                        : `  ${f.file}:${f.line}  ${f.literal} - no token holds this value`);
         }
         out.push("", "Replace the ones that have a token. For a value with none, do NOT invent a token: say which value it is and what you would call it, and let a person decide.");
     }

package/dist/commands/upgrade.js

@@ -10,7 +10,7 @@ import { diffLocalDocuments, localChangelogMarkdown, } from "../document-diff.js
 import { detectAppDirs } from "../global-sheet.js";
 import { installedBehind, MATERIALISER_SINCE } from "../install-marks.js";
 import { body, section, snippet } from "../output.js";
-import { reactMajorOf, readInstalledConvention, readInstalledScheme, theirThemeVars, } from "../project-facts.js";
+import { reactMajorOf, readInstalledConvention, readInstalledScheme, theirThemeVars, themeVocabOf, } from "../project-facts.js";
 import { fetchChangelog, fetchComponent, fetchDesignSystem, RegistryError, } from "../registry.js";
 import { flavourResolver } from "../styles-flavour.js";
 import { projectTongue } from "../their-tongue.js";
@@ -422,7 +422,8 @@ export async function upgrade(asked, opts) {
         const tongue = await projectTongue(root, slug);
         /** O `@theme` DELE é o MESMO para a corrida inteira - ver `theirThemeVars`. */
         /** As pastas de app - a resposta é a INTERSEÇÃO delas. Ver `theirThemeVars`. */
-        const themeVars = await theirThemeVars(root, await detectAppDirs(root, config.pagesDir));
+        /** Com os valores - o mesmo vocabulário do `component`, para os dois reescreverem igual (27/09). */
+        const themeVars = await themeVocabOf(root, slug, await theirThemeVars(root, await detectAppDirs(root, config.pagesDir)));
         for (const entry of entries) {
             const tsxPath = join(componentsRoot, entry, `${entry}.tsx`);
             let head = "";

package/dist/component-codegen.js

@@ -563,6 +563,61 @@ function remToTwScale(value) {
  * legível não custa nada.
  */
 const minted = (themeVars, cssVar) => themeVars === null || themeVars.has(cssVar);
+/**
+ * O VOCABULÁRIO DELE COM OS VALORES - rodada 1 do refinamento, 27/09.
+ *
+ * O `Set` de nomes respondia só "ele declara `--color-x`?". Dois defeitos saíam daí, medidos no Oscilla
+ * v9 num Next novo: o `hover` do cartão pede um DEGRAU (`{color.phosphor.500}`) que o projeto chama de
+ * `--color-faint` pelo mesmo `#5d675f`, e o gerador não achava; e o `foreground` do `create-next-app`
+ * (`#171717`) casava pelo NOME com o `foreground` claro do sistema, e o botão saía com texto quase preto
+ * sobre o fundo escuro.
+ *
+ * Continua sendo um `Set`, então todo lugar que só pergunta o nome segue igual. Quem sabe pedir mais
+ * pergunta `nameFor`.
+ */
+export class ThemeVocab extends Set {
+    theirValues;
+    dsValues;
+    constructor(
+    /** O valor LITERAL de cada variável dele, com as indireções dele já seguidas. */
+    theirValues, 
+    /** O valor LITERAL de cada variável nossa (`--ds-*`), com as indireções seguidas. */
+    dsValues) {
+        super(theirValues.keys());
+        this.theirValues = theirValues;
+        this.dsValues = dsValues;
+    }
+    /**
+     * O nome DELE para uma referência nossa no namespace `ns` (`color`), ou `null`.
+     *
+     * O nome que casa vale se o valor também casa - ou se um dos dois lados não tem valor conhecido, que
+     * é o comportamento de antes. Sem nome que case, o VALOR acha o nome, mas só quando exatamente uma
+     * variável dele o segura: duas seria adivinhar qual das duas ele quis dizer.
+     */
+    nameFor(ref, ns, byName) {
+        const path = /^\{([^}]+)\}$/.exec(ref.trim())?.[1];
+        const want = path ? this.dsValues.get(`--ds-${path.replace(/\./g, "-")}`) : undefined;
+        if (byName && this.has(`--${ns}-${byName}`)) {
+            const theirs = this.theirValues.get(`--${ns}-${byName}`);
+            if (!want || !theirs || sameValue(want, theirs))
+                return byName;
+        }
+        if (!want)
+            return null;
+        const hits = [...this.theirValues]
+            .filter(([n, v]) => n.startsWith(`--${ns}-`) && sameValue(v, want))
+            .map(([n]) => n.slice(ns.length + 3));
+        return hits.length === 1 ? hits[0] : null;
+    }
+}
+const sameValue = (a, b) => a.trim().toLowerCase().replace(/\s+/g, " ") === b.trim().toLowerCase().replace(/\s+/g, " ");
+/** A chave de cor que ele escreve: pelo `ThemeVocab` quando há valores, pelo nome quando não. */
+const theirColorKey = (value, themeVars) => {
+    const key = colorKey(value);
+    if (themeVars instanceof ThemeVocab)
+        return themeVars.nameFor(value, "color", key);
+    return key && minted(themeVars, `--color-${key}`) ? key : null;
+};
 /** One declaration → Tailwind classes (pretty when mappable, arbitrary-property
  *  otherwise - never dropped). */
 function declToTailwind(prop, value, themeVars) {
@@ -573,20 +628,20 @@ function declToTailwind(prop, value, themeVars) {
         case "backgroundColor": {
             if (value === "transparent")
                 return ["bg-transparent"];
-            const key = colorKey(value);
-            if (key && minted(themeVars, `--color-${key}`))
+            const key = theirColorKey(value, themeVars);
+            if (key)
                 return [`bg-${key}`];
             break;
         }
         case "color": {
-            const key = colorKey(value);
-            if (key && minted(themeVars, `--color-${key}`))
+            const key = theirColorKey(value, themeVars);
+            if (key)
                 return [`text-${key}`];
             break;
         }
         case "borderColor": {
-            const key = colorKey(value);
-            if (key && minted(themeVars, `--color-${key}`))
+            const key = theirColorKey(value, themeVars);
+            if (key)
                 return [`border-${key}`];
             break;
         }
@@ -594,12 +649,26 @@ function declToTailwind(prop, value, themeVars) {
             // "1px solid {color.semantic.x}" → border + border-<x>
             const m = value.match(/^1px\s+solid\s+(\{[^}]+\})$/);
             if (m) {
-                const key = colorKey(m[1]);
-                if (key && minted(themeVars, `--color-${key}`))
+                const key = theirColorKey(m[1], themeVars);
+                if (key)
                     return ["border", `border-${key}`];
             }
             break;
         }
+        case "outline": {
+            /**
+             * "2px solid {color.semantic.accent}" → outline-2 + outline-<x>. Não tinha tradução: o foco de
+             * todo botão saía `[outline:2px_solid_#4cd694]`, com o nome dele declarado (rodada 1, 27/09).
+             * No Tailwind v4, `outline-<n>` já põe o estilo sólido.
+             */
+            const m = value.match(/^(\d+)px\s+solid\s+(\{[^}]+\})$/);
+            if (m) {
+                const key = theirColorKey(m[2], themeVars);
+                if (key)
+                    return [m[1] === "1" ? "outline" : `outline-${m[1]}`, `outline-${key}`];
+            }
+            break;
+        }
         case "borderRadius": {
             const key = nsKey(value, "radius");
             if (key && minted(themeVars, `--radius-${key}`))

package/dist/doctor/scan.js

@@ -515,6 +515,15 @@ function scanCore(file, source, table) {
         };
     }
     let svgDepth = 0;
+    /**
+     * DENTRO DE `@theme` OU `:root`, UMA DECLARAÇÃO É O VOCABULÁRIO, NÃO UM USO - rodada 1 do refinamento,
+     * 27/09. O leigo copiou os valores do sistema para o `@theme` do projeto novo, como o GUIDE ensina, e o
+     * `check_file` respondeu "17% (...) 19 written by hand", linha por linha, com o conserto circular
+     * "#0a100d - this repo calls it --color-canvas" na própria linha `--color-canvas: #0a100d;`.
+     * Profundidade de chaves, e não uma flag, porque `@theme` pode abrir bloco dentro de bloco.
+     */
+    let tokenBlockDepth = 0;
+    let braceDepth = 0;
     source.split("\n").forEach((raw, i) => {
         const line = raw.trim();
         /**
@@ -528,6 +537,14 @@ function scanCore(file, source, table) {
          */
         const indent = line ? raw.indexOf(line) : 0;
         const at = i + 1;
+        const depthBefore = braceDepth;
+        const opensTokenBlock = /^(@theme\b|:root\b)/.test(line) && line.includes("{");
+        if (opensTokenBlock && tokenBlockDepth === 0)
+            tokenBlockDepth = depthBefore + 1;
+        const inTokenBlock = tokenBlockDepth > 0 && (opensTokenBlock || depthBefore >= tokenBlockDepth);
+        braceDepth = Math.max(0, braceDepth + (line.match(/\{/g) ?? []).length - (line.match(/\}/g) ?? []).length);
+        if (tokenBlockDepth > 0 && braceDepth < tokenBlockDepth)
+            tokenBlockDepth = 0;
         tokenUses += countTokenUses(line, table);
         /**
          * O QUE ESTE ARQUIVO DECLARA E O QUE ELE USA DE FORA DO SISTEMA - ver `FileReport.ownDeclared`.
@@ -577,6 +594,8 @@ function scanCore(file, source, table) {
         const declares = DECLARES_TOKEN.exec(line);
         if (declares && table.byName.has(declares[1].toLowerCase()))
             return;
+        if (declares && inTokenBlock)
+            return;
         // `rgba(${r}, ${g}, ${b}, ${a})` is code computing a colour, not a colour
         // written by hand - flagging it would be telling someone to tokenize a
         // variable. And the same literal twice in one declaration (a two-stop

package/dist/install-marks.js

@@ -252,7 +252,13 @@
  * dizia que o hook "reports on every file you write" - a instrução que o agente dele lê sobre o próprio
  * mecanismo. Passa a dizer o fim do turno (E04), e só o `upgrade` reescreve o bloco.
  */
-export const MATERIALISER_SINCE = "0.16.455";
+/**
+ * 0.16.455 -> 0.16.459 em 27/09, e o passo 1 dá **SIM**: o gerador que o `upgrade` usa para reescrever os
+ * componentes passa a traduzir `outline` (o foco de todo botão saía `[outline:2px_solid_#…]`) e a achar
+ * o nome dele pelo valor quando a receita pede um degrau - rodada 1 do refinamento. Um componente escrito
+ * antes carrega o valor cru onde o projeto tem nome.
+ */
+export const MATERIALISER_SINCE = "0.16.459";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *
@@ -402,7 +408,13 @@ export const COUNTED_DIFFERENTLY = "this run counts a value as named only when Y
  * mesma jornada, e o hook fixado nela manda só o registro em todo turno - nunca o censo, nem com a
  * main limpa num commit novo. Quem está nela não vê o sistema mudar depois do commit, e precisa saber.
  */
-export const CHECKER_SINCE = "0.16.457";
+/**
+ * 0.16.457 -> 0.16.458 em 27/09, e o passo 1 dá **SIM**: a varredura que o hook roda deixa de acusar as
+ * declarações dentro de `@theme` e `:root` (rodada 1 do refinamento - o `check_file` dava "19 written by
+ * hand" no `@theme` que o leigo copiou do GUIDE). Um hook fixado antes continua acusando o vocabulário do
+ * projeto como valor à mão, em todo turno.
+ */
+export const CHECKER_SINCE = "0.16.458";
 /**
  * A ÚLTIMA VERSÃO EM QUE OS LEITORES PASSARAM A PRODUZIR UM CENSO DIFERENTE.
  *

package/dist/project-facts.js

@@ -15,7 +15,7 @@
  */
 import { readdir, readFile } from "node:fs/promises";
 import { join, relative, sep } from "node:path";
-import { DEFAULT_CONVENTION, } from "./component-codegen.js";
+import { DEFAULT_CONVENTION, ThemeVocab, } from "./component-codegen.js";
 /**
  * Which React the consumer is on, for the ref-carrying prop type.
  *
@@ -317,3 +317,121 @@ function themeVarsIn(css) {
     }
     return out;
 }
+/**
+ * OS NOMES DELE COM OS VALORES, e os nossos também - para o gerador achar o nome pelo valor.
+ *
+ * Rodada 1 do refinamento, 27/09: com só os nomes, o gerador não via que o `--color-faint` dele segura o
+ * mesmo `#5d675f` do degrau `{color.phosphor.500}` que a receita pede, e casava o `--color-foreground` do
+ * `create-next-app` (`#171717`) com o `foreground` claro do sistema. Ver `ThemeVocab`.
+ *
+ * `names` é a resposta de `theirThemeVars` - a interseção das pastas de app -, e só esses nomes entram:
+ * o valor não pode trazer de volta um nome que aquele app não gera. As indireções são seguidas dos dois
+ * lados; um valor que termina numa variável nossa (`var(--ds-…)`) é resolvido pela folha instalada.
+ */
+export async function themeVocabOf(root, slug, names) {
+    if (!names)
+        return null;
+    const ds = join(root, "_synthesisui", "ds", slug);
+    const pointer = await readFile(join(ds, "tokens.css"), "utf8").catch(() => "");
+    const inner = /@import\s+["']\.\/([^"']+)["']/.exec(pointer)?.[1];
+    const installed = inner ? await readFile(join(ds, inner), "utf8").catch(() => "") : pointer;
+    const dsRaw = declarationsIn(installed, /--ds-[a-zA-Z0-9_-]+/);
+    const theirRaw = new Map();
+    const walk = async (at) => {
+        for (const entry of await readdir(at, { withFileTypes: true }).catch(() => [])) {
+            if (SKIP.has(entry.name) || entry.name.startsWith("."))
+                continue;
+            const path = join(at, entry.name);
+            if (entry.isDirectory())
+                await walk(path);
+            else if (/\.css$/i.test(entry.name)) {
+                const css = await readFile(path, "utf8").catch(() => "");
+                if (!THEME_BLOCK.test(css) && !/:root\b/.test(css))
+                    continue;
+                for (const [n, v] of declarationsIn(css, /--(?!ds-)[a-zA-Z0-9_-]+/))
+                    if (!theirRaw.has(n))
+                        theirRaw.set(n, v);
+            }
+        }
+    };
+    await walk(root);
+    const resolveIn = (table) => {
+        const seen = new Set();
+        const go = (value) => {
+            const ref = /^var\(\s*(--[a-zA-Z0-9_-]+)\s*(?:,([^)]*))?\)$/.exec(value.trim());
+            if (!ref)
+                return value.trim();
+            const target = ref[1];
+            if (seen.has(target))
+                return null;
+            seen.add(target);
+            const next = target.startsWith("--ds-") ? dsRaw.get(target) : table.get(target);
+            if (next !== undefined)
+                return go(next);
+            return ref[2]?.trim() || null;
+        };
+        return (value) => {
+            seen.clear();
+            return go(value);
+        };
+    };
+    const theirs = new Map();
+    const resolveTheirs = resolveIn(theirRaw);
+    for (const n of names) {
+        const raw = theirRaw.get(n);
+        const value = raw === undefined ? null : resolveTheirs(raw);
+        if (value)
+            theirs.set(n, value);
+    }
+    const dsValues = new Map();
+    const resolveDs = resolveIn(dsRaw);
+    for (const [n, raw] of dsRaw) {
+        const value = resolveDs(raw);
+        if (value)
+            dsValues.set(n, value);
+    }
+    /** Um nome sem valor conhecido continua no conjunto: `nameFor` o trata como antes. */
+    const vocab = new ThemeVocab(theirs, dsValues);
+    for (const n of names)
+        vocab.add(n);
+    return vocab;
+}
+/** `--nome: valor` em qualquer formatação - a primeira declaração de cada nome vence. */
+function declarationsIn(css, name) {
+    const out = new Map();
+    const re = new RegExp(`(?:^|[{;])\\s*(${name.source})\\s*:\\s*([^;}]+)(?=[;}])`, "g");
+    for (const m of css.matchAll(re))
+        if (!out.has(m[1]))
+            out.set(m[1], m[2].trim());
+    return out;
+}
+/**
+ * QUANTOS UTILITÁRIOS DESTE CÓDIGO SÃO NOMES DELE - `bg-primary` quando ele declara `--color-primary`.
+ *
+ * Conta pela classe inteira, com a variante tirada (`hover:border-faint` conta), e só nos namespaces que
+ * o gerador traduz. Uma classe que não bate com nome nenhum dele não conta - nem para mais, nem para menos.
+ */
+export function namedUtilitiesIn(code, names) {
+    const NS = [
+        [/^(?:bg|text|border(?:-[trblxy])?|outline|fill|stroke|ring)-(.+)$/, ["color"]],
+        [/^rounded(?:-[trbl]{1,2})?-(.+)$/, ["radius"]],
+        [/^(?:p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|gap|gap-x|gap-y)-(.+)$/, ["spacing"]],
+        [/^text-(.+)$/, ["text"]],
+        [/^font-(.+)$/, ["font", "font-weight"]],
+        [/^shadow-(.+)$/, ["shadow"]],
+    ];
+    let n = 0;
+    for (const lit of code.matchAll(/"([^"\n]*)"/g)) {
+        for (const raw of lit[1].split(/\s+/)) {
+            const cls = raw.slice(raw.lastIndexOf(":") + 1);
+            if (!cls || cls.startsWith("["))
+                continue;
+            if (NS.some(([re, nss]) => {
+                const key = re.exec(cls)?.[1];
+                return key !== undefined && nss.some((ns) => names.has(`--${ns}-${key}`));
+            }))
+                n += 1;
+        }
+    }
+    return n;
+}

package/package.json

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