synthesisui 0.16.305 → 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/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/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);

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/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.305";
+/**
+ * 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.
  *
@@ -264,7 +273,22 @@ export const CHECKER_SINCE = "0.16.250";
  *
  * É exatamente o que esta marca existe para dizer: o `align` avisa que vale remedir.
  */
-export const READER_SINCE = "0.16.305";
+/**
+ * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.305",
+  "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": {