synthesisui 0.16.441 → 0.16.443

package/dist/doctor/transcribe.js

@@ -64,6 +64,17 @@ const COLOR_PROPERTY = {
     text: "color",
     border: "borderColor",
     ring: "outlineColor",
+    /**
+     * `outline-brand-blue` - a v4 escreve o contorno com o nome dela própria, e não só com `ring`.
+     *
+     * Medido no `codelevel` em 20/09: o `CommandBlock` usa `focus-visible:outline-brand-blue`, e
+     * `brand-blue` é a cor de AÇÃO que ele escolheu no import. Sem esta linha o leitor não sabia de
+     * que propriedade se tratava, e a nota dele caía por ele usar o próprio sistema.
+     *
+     * Um sufixo que não resolve para cor nenhuma - `outline-2`, que é largura - continua não lido,
+     * porque o leitor de cor devolve `null` e nenhum valor errado entra no lugar.
+     */
+    outline: "outlineColor",
     fill: "fill",
     stroke: "stroke",
     decoration: "textDecorationColor",
@@ -713,7 +724,69 @@ export function readUtility(raw, declared) {
         };
     }
     const read = readUtilityCore(utility, declared);
-    return read ? withAlpha(read, utility.split("/")[1]) : read;
+    if (read)
+        return withAlpha(read, utility.split("/")[1]);
+    return readNegative(utility, declared);
+}
+/**
+ * O SINAL DE MENOS NÃO APAGA O DEGRAU - `-top-1` é o `top-1` dele, para o outro lado.
+ *
+ * Medido no `codelevel` em 20/09: `-top-1` e `-right-1` no `TierBadge` e `-top-5` no
+ * `ConfettiBurst` caíam em não lido, enquanto `top-1` seria lido. É o mesmo valor da escala dele,
+ * na direção oposta - e sobrepor ou pendurar um elemento é justamente o caso em que a distância é
+ * negativa por desenho.
+ *
+ * E ELE NÃO CRIA DEGRAU NOVO: o valor lido é o degrau que ele já tem, com o sinal. Tratar `-1`
+ * como um degrau próprio dobraria a escala dele e faria o sistema propor vocabulário que ele nunca
+ * escreveria.
+ *
+ * ─────────────────────────────────────────────────────────────────────────
+ * E POR QUE O `gap` FICA DE FORA, mesmo com `-space-x-2` sendo cinco dos oito casos dele.
+ *
+ * `space-x` é lido como `columnGap` - uma aproximação que o próprio comentário da tabela assume,
+ * e que é exata onde o pai arranja. Um `columnGap` NEGATIVO não é CSS válido: o que
+ * `-space-x-2` faz é margem negativa nos filhos, que é como a pilha de avatares dele se
+ * sobrepõe. Emitir `columnGap: -0.5rem` seria errado em silêncio, e a regra deste arquivo é que
+ * isso é pior que não lido.
+ *
+ * Então os cinco `-space-x-*` do `Avatar` continuam não lidos, agora por um motivo que se pode
+ * escrever - e resolvê-los é modelar margem negativa, não remendar o sinal.
+ */
+const NAO_ACEITA_NEGATIVO = new Set([
+    "gap",
+    "columnGap",
+    "rowGap",
+    "width",
+    "height",
+    "padding",
+    "paddingInline",
+    "paddingBlock",
+    "paddingTop",
+    "paddingRight",
+    "paddingBottom",
+    "paddingLeft",
+]);
+function readNegative(utility, declared) {
+    if (!utility.startsWith("-"))
+        return null;
+    const positivo = readUtilityCore(utility.slice(1), declared);
+    if (!positivo)
+        return null;
+    if (NAO_ACEITA_NEGATIVO.has(positivo.property))
+        return null;
+    /** Só um comprimento se nega. Uma palavra-chave com menos na frente não é valor nenhum. */
+    const m = /^(-?)([\d.]+)([a-z%]*)$/.exec(positivo.value.trim());
+    if (!m || !m[3])
+        return null;
+    const n = Number(m[2]);
+    if (!Number.isFinite(n) || n === 0)
+        return null;
+    return {
+        ...positivo,
+        value: `${m[1] ? "" : "-"}${m[2]}${m[3]}`,
+        /** O token dele some: `-1` não é o `--spacing-1` dele, é o negativo dele. */
+        ...(positivo.token ? { token: undefined } : {}),
+    };
 }
 function readUtilityCore(utility, declared) {
     /**
@@ -791,6 +864,68 @@ function readUtilityCore(utility, declared) {
      * nome do Tailwind é o valor CSS verbatim em toda a escala publicada. O gatilho do
      * MetricCard real diz "isto tem explicação" com ele (12/08).
      */
+    /**
+     * `will-change-transform` - DICA PARA O NAVEGADOR, e ela precisa ser LIDA para poder ser
+     * classificada como arranjo.
+     *
+     * Medido no `codelevel` em 20/09: `Aurora` e `Orb` a escrevem, e ela caía em valor não lido.
+     * Não pinta nada - diz ao compositor que a camada vai se mover, para promovê-la antes. Quem a
+     * tira do denominador é `STRUCTURAL_PROPERTIES`, pela propriedade; aqui ela só deixa de ser
+     * invisível.
+     */
+    /**
+     * AS QUATRO PROPRIEDADES QUE FALTAVAM NA TABELA - E05 da jornada `a-escala-e-do-usuario`.
+     *
+     * Medidas no `codelevel` em 20/09, dez dos valores que a conta dava como não lidos. Nenhuma
+     * delas é ambígua: `outline-2` é uma largura, `brightness-95` é um filtro de 95%. O leitor
+     * simplesmente não tinha a propriedade.
+     *
+     *     Button        active:brightness-95            filtro
+     *     CommandBlock  outline-2 · outline-offset-2    contorno: largura e distância
+     *     Card·PillNav  backdrop-saturate-140           filtro de fundo
+     *     QuestItem     line-through · underline-offset-4 · decoration-2
+     *
+     * A ORDEM IMPORTA: `outline` e `decoration` já são prefixos de COR, e a leitura de cor roda
+     * antes. `outline-brand-blue` continua indo por lá; só o que ela recusa - um número - chega
+     * aqui. Inverter isso leria a cor dele como largura, que é o errado-em-silêncio de sempre.
+     */
+    const contorno = /^outline-(\d+)$/.exec(core);
+    if (contorno)
+        return { property: "outlineWidth", value: `${contorno[1]}px` };
+    const contornoDist = /^outline-offset-(\d+)$/.exec(core);
+    if (contornoDist)
+        return { property: "outlineOffset", value: `${contornoDist[1]}px` };
+    const brilho = /^brightness-(\d+)$/.exec(core);
+    if (brilho)
+        return {
+            property: "filter",
+            value: `brightness(${Number(brilho[1]) / 100})`,
+        };
+    const satFundo = /^backdrop-saturate-(\d+)$/.exec(core);
+    if (satFundo)
+        return {
+            property: "backdropFilter",
+            value: `saturate(${Number(satFundo[1]) / 100})`,
+        };
+    /** A grafia entre colchetes carrega a unidade dele, e ela viaja como está. */
+    const satFundoCru = /^backdrop-saturate-\[([\d.]+%?)\]$/.exec(core);
+    if (satFundoCru)
+        return { property: "backdropFilter", value: `saturate(${satFundoCru[1]})` };
+    if (core === "line-through" || core === "underline" || core === "overline")
+        return { property: "textDecorationLine", value: core };
+    const sublinhado = /^underline-offset-(\d+)$/.exec(core);
+    if (sublinhado)
+        return { property: "textUnderlineOffset", value: `${sublinhado[1]}px` };
+    const espessura = /^decoration-(\d+)$/.exec(core);
+    if (espessura)
+        return {
+            property: "textDecorationThickness",
+            value: `${espessura[1]}px`,
+        };
+    const willChange = /^will-change-([a-z-]+)$/.exec(core);
+    if (willChange) {
+        return { property: "willChange", value: willChange[1] };
+    }
     const cursor = /^cursor-([a-z-]+)$/.exec(core);
     if (cursor)
         return { property: "cursor", value: cursor[1] };
@@ -1435,6 +1570,17 @@ const BRACKET_PROPERTY = {
     z: "zIndex",
     grid: "gridTemplateColumns",
     aspect: "aspectRatio",
+    /**
+     * `ease-[var(--ease-emphasis)]` - o caminho arbitrário já resolvia o `var()`; faltava dizer a
+     * qual propriedade o `ease` pertence, e sem isso a leitura morria no último passo.
+     *
+     * Medido no `codelevel` em 20/09: `Card`, `Progress` e `Toast` escrevem essa classe, e
+     * `--ease-emphasis` é o `motion.easings.emphasis` DELE, publicado na v1. Três dos 35 valores
+     * "não lidos" eram ele apontando para o próprio vocabulário.
+     *
+     * O `ease-out` nomeado continua sendo lido pela tabela `EASING`, antes daqui.
+     */
+    ease: "transitionTimingFunction",
 };
 /**
  * What is inside the brackets, resolved.
@@ -1665,10 +1811,50 @@ const GRADIENT_DIRECTION = {
 };
 /** A colour stop's value: their token first, Tailwind's table second, a literal last. */
 function stopValue(raw, declared) {
+    /**
+     * A PARADA COM ALFA - `from-white/85`, e o resto do leitor já sabia ler isso.
+     *
+     * Medido no `codelevel` em 20/09: o `Card` escreve `bg-gradient-to-b from-white/85
+     * to-white/60`, com as três cores declaradas no CSS dele, e o gradiente inteiro caía em
+     * `unreadable`. O `SkillNode`, que escreve o mesmo sem alfa, compunha perfeitamente -
+     * `linear-gradient(to bottom right, {color.white}, {color.amber.50})`. A diferença era a barra.
+     *
+     * `readUtility` já resolve alfa em toda cor, por `withAlpha`. Esta função era a única que via a
+     * barra e devolvia `null` - e um gradiente com UMA parada ilegível não é meio lido: o
+     * compositor descarta o gradiente inteiro, então a barra apagava a decisão toda.
+     */
+    const comAlfa = /^(.+)\/(\d{1,3})$/.exec(raw);
+    if (comAlfa) {
+        const base = stopValue(comAlfa[1], declared);
+        if (!base)
+            return null;
+        const pct = Number(comAlfa[2]);
+        if (!Number.isFinite(pct) || pct > 100)
+            return null;
+        /** A grafia do CSS moderno: `color-mix` não, `/ <alpha>` dentro do próprio valor. */
+        return `color-mix(in oklab, ${base} ${pct}%, transparent)`;
+    }
     if (declared.has(`--color-${raw}`))
         return refFor(raw);
     if (TAILWIND_COLOR[raw])
         return TAILWIND_COLOR[raw];
+    /**
+     * A PALETA DO FRAMEWORK TAMBÉM PINTA UMA PARADA - e o caminho normal de cor já a consulta.
+     *
+     * Medido no `codelevel` em 20/09, contra o censo de produção: o `SkillNode` escreve
+     * `bg-gradient-to-br from-white to-amber-50`, e o gradiente inteiro era descartado porque
+     * `amber-50` não resolvia aqui. Ninguém declara `--color-amber-50` no código dele: é a paleta
+     * padrão do Tailwind, que `frameworkDeclaration` conhece e esta função não consultava.
+     *
+     * A assimetria era a falha: `bg-amber-50` sozinho era lido, e `to-amber-50` não. Uma parada
+     * ilegível derruba o gradiente inteiro, então a cor da paleta apagava a decisão toda.
+     *
+     * O valor vem com o carimbo de framework do outro lado; aqui só o valor interessa, porque uma
+     * parada é uma string dentro do `linear-gradient`.
+     */
+    const daPaleta = frameworkDeclaration("color", raw);
+    if (daPaleta)
+        return daPaleta.value;
     if (/^#[0-9a-fA-F]{3,8}$/.test(raw) ||
         raw === "transparent" ||
         raw === "white" ||
@@ -1689,7 +1875,7 @@ function stopValue(raw, declared) {
  * prefix, so stops only count when a `bg-gradient-to-*` sits in the SAME class list -
  * and a direction whose stops do not resolve is reported, never half-built.
  */
-function composeGradient(utilities, declared) {
+export function composeGradient(utilities, declared) {
     const dir = utilities.find((u) => GRADIENT_DIRECTION[u.replace(/^bg-gradient-/, "")] &&
         u.startsWith("bg-gradient-"));
     if (!dir)

package/dist/doctor/value-ledger.js

@@ -1,4 +1,4 @@
-import { parseClass, readUtility } from "./transcribe.js";
+import { composeGradient, parseClass, readUtility } from "./transcribe.js";
 /**
  * AS PROPRIEDADES QUE SÃO ARRANJO - a definição de "estrutura", por propriedade resolvida.
  *
@@ -50,6 +50,15 @@ const STRUCTURAL_PROPERTIES = new Set([
     "isolation",
     "textOverflow",
     "borderCollapse",
+    /**
+     * `will-change` É DICA PARA O NAVEGADOR, nunca decisão de design - medido no `codelevel` em
+     * 20/09, onde `will-change-transform` no `Aurora` e no `Orb` contava como valor perdido.
+     *
+     * Ela não pinta nada: diz ao compositor do navegador que aquela camada vai se mover, para ele
+     * promovê-la antes. Trocá-la muda desempenho, não aparência - que é exatamente a linha que
+     * separa este conjunto do resto.
+     */
+    "willChange",
 ]);
 /**
  * TOKENS DE ARRANJO QUE O RESOLVEDOR NÃO DEVOLVE COMO DECLARAÇÃO - a metade utilitária da mesma
@@ -121,6 +130,14 @@ const ARRANJO_SEM_VALOR = [
     /^order-(\d+|first|last|none)$/,
     /** Margem `auto` é centralização - a única margem cujo valor não sai de escala nenhuma. */
     /^-?m[xytblrse]?-auto$/,
+    /**
+     * O GRUPO NOMEADO É O MESMO GRUPO - `group/tt`, e `group` já estava em `STRUCTURAL_TOKENS`.
+     *
+     * A v4 deixa nomear o grupo para que um filho alcance o ancestral certo quando há dois
+     * aninhados; o `Tooltip` dele usa `group/tt` por isso. É mecanismo de seletor, não aparência -
+     * e o conjunto exato não pegava porque a barra e o nome vêm colados.
+     */
+    /^(group|peer)\/[A-Za-z0-9_-]+$/,
 ];
 /** `mx-auto` e `col-span-6` nomeiam arranjo; `gap-6` nomeia uma escolha de escala. */
 export function arranjoSemValor(utility) {
@@ -177,8 +194,45 @@ defined) {
         answered: 0,
         unknown: 0,
     };
+    /**
+     * O GRADIENTE É UMA DECISÃO EM TRÊS CLASSES, E A CONTA VIA TRÊS PERDAS.
+     *
+     * Medido no `codelevel` em 20/09: o `SkillNode` escreve `bg-gradient-to-br from-white
+     * to-amber-50`, e o transcritor compõe isso perfeitamente -
+     * `linear-gradient(to bottom right, {color.white}, {color.amber.50})`. A receita dele tem o
+     * gradiente. E esta conta, que olha uma classe de cada vez, chamava as três de não lidas.
+     *
+     * O leitor entendeu e o contador não: dez dos 35 valores "não lidos" dele eram isso. Um número
+     * que contradiz a receita ao lado dele é o defeito que este arquivo mais evita.
+     *
+     * A composição roda por GRUPO DE MODIFICADOR, igual ao `transcribe` - é o que as três partes de
+     * um gradiente têm em comum. E o guarda dele continua de pé: uma parada sem direção no MESMO
+     * grupo não compõe, porque `slide-in-from-bottom-2` usa o mesmo prefixo `from-`. As paradas de
+     * dark do `Card`, que moram numa camada sem a direção, seguem não lidas - e é verdade que
+     * seguem: o gradiente escuro dele não está sendo lido.
+     */
+    const grupos = new Map();
+    for (const cls of tokens) {
+        const { modifiers, utility } = parseClass(cls);
+        const chave = modifiers.join(":");
+        grupos.set(chave, [...(grupos.get(chave) ?? []), utility]);
+    }
+    const compostas = new Set();
+    for (const [chave, utilidades] of grupos) {
+        const g = composeGradient(utilidades, declared);
+        /** Só o que COMPÔS conta: um gradiente quebrado continua sendo perda, e diz qual peça. */
+        if (!g.value)
+            continue;
+        const prefixo = chave ? `${chave}:` : "";
+        for (const u of g.consumed)
+            compostas.add(`${prefixo}${u}`);
+    }
     for (const cls of tokens) {
         account.seen += 1;
+        if (compostas.has(cls)) {
+            account.interpreted += 1;
+            continue;
+        }
         account[destinationOf(cls, declared, answered, defined)] += 1;
     }
     return account;

package/package.json

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