synthesisui 0.16.346 → 0.16.348

package/dist/doctor/css-modules.js

@@ -202,7 +202,17 @@ function declarations(body) {
      */
     let flat = body;
     for (let guard = 0; guard < 12; guard++) {
-        const next = flat.replace(/\{[^{}]*\}/g, "");
+        /**
+         * O CABEÇALHO SAI JUNTO COM O BLOCO, e não depois - senão ele fica grudado na declaração
+         * seguinte e come a declaração inteira. Tirando só `{ … }`, o corpo de
+         *
+         *     .panel { color: red; &:hover { color: blue; } padding: 24px; }
+         *
+         * virava `color: red; &:hover  padding: 24px;`, e o pedaço do meio tem `:` no `:hover`:
+         * a propriedade lida era `&` e o `padding` do cartão dele MORRIA - a decisão estava no
+         * código, contada como interpretada, e não chegava à receita.
+         */
+        const next = flat.replace(/[^;{}]*\{[^{}]*\}/g, "");
         if (next === flat)
             break;
         flat = next;

package/dist/doctor/fragments.js

@@ -197,6 +197,48 @@ function backtick(source, from) {
  * contagem: um global com regra de CLASSE é forma que nenhum leitor cobre hoje - 399 declarações
  * no repo dele, e a única lacuna que estava calada em vez de declarada (04/08).
  */
+/**
+ * O SELETOR DE UMA DECLARAÇÃO, resolvido contra os blocos que a contêm.
+ *
+ * O QUE O CLIENTE GANHA: uma declaração que ele escreveu dentro de `&:hover` chega aqui como
+ * `.card:hover` - o nome inteiro, o mesmo que o navegador aplica. Sem isto ela chegava como
+ * `&:hover`, e um `&` sem pai não tem a quem se ligar: nenhum leitor deste lado ou do outro
+ * consegue dizer de que elemento aquela decisão é.
+ *
+ * UMA AT-RULE É CONTEXTO, NUNCA PAI. `@media (…) { .card { padding } }` é uma decisão do `.card`
+ * sob uma condição, e não de um elemento chamado `@media`. A at-rule só responde pelo seletor
+ * quando não há nenhum dentro dela - que é como `@utility text-grad { … }` do Tailwind 4 e o
+ * `0%` de um `@keyframes` seguem chegando exatamente como chegavam.
+ */
+function selectorOf(open) {
+    let selector = "";
+    let atRule = "";
+    for (const block of open) {
+        if (!block)
+            continue;
+        if (block.startsWith("@")) {
+            if (!selector)
+                atRule = block;
+            continue;
+        }
+        selector = selector ? resolveNesting(block, selector) : block;
+    }
+    return selector || atRule;
+}
+/**
+ * O `&` DO FILHO TROCADO PELO PAI, e o filho sem `&` pendurado como descendente - as duas
+ * regras do CSS aninhado. Uma lista de pais vira `:is(a, b)`, que é o que o próprio CSS faz:
+ * escrever `a, b:hover` diria outra coisa, e diria errado.
+ */
+function resolveNesting(child, parent) {
+    const base = parent.includes(",") ? `:is(${parent})` : parent;
+    return child
+        .split(",")
+        .map((part) => part.trim())
+        .filter(Boolean)
+        .map((part) => part.includes("&") ? part.replaceAll("&", base) : `${base} ${part}`)
+        .join(", ");
+}
 export function fragmentsOfStylesheet(file, css, 
 /**
  * COMO ESTA FOLHA CHEGA NO BUILD DELES, e isso vem do GRAFO DE IMPORTS e nunca do nome do
@@ -212,31 +254,54 @@ export function fragmentsOfStylesheet(file, css,
  */
 kind) {
     const out = [];
-    let selector = "";
+    /**
+     * OS BLOCOS ABERTOS, E NÃO O ÚLTIMO SELETOR VISTO.
+     *
+     * O QUE O CLIENTE VIVIA COM UMA VARIÁVEL SÓ: depois de um bloco aninhado, TODA declaração que
+     * vinha a seguir ficava com o seletor do bloco que já tinha fechado. No `.card { color: red;
+     * &:hover { color: blue } padding: 8px }`, o `padding` dele era registrado como sendo do
+     * `:hover` - uma decisão de repouso lida como decisão de estado. Medido no repositório vivo em
+     * 01/09, sobre 724 folhas e 19 374 declarações: **440 (2,3%) ficavam com o seletor de um bloco
+     * já fechado, e 942 (4,9%) saíam com um `&` que não tinha pai a que se referir**.
+     */
+    const open = [];
     for (const [i, raw] of css.split("\n").entries()) {
         const line = raw.replace(/\/\*.*?\*\//g, "");
         for (const piece of line.matchAll(PIECES)) {
             const text = (piece[1] ?? "").trim();
             if (piece[2] === "{") {
-                selector = text;
+                open.push(text);
                 continue;
             }
+            /**
+             * O BLOCO SÓ FECHA DEPOIS QUE A DECLARAÇÃO DELE FOI LIDA. `.a { color: red }` numa linha
+             * só termina a declaração no `}`, sem `;` - desempilhar antes de ler perdia a última
+             * declaração de todo bloco escrito assim. Medido no repositório vivo quando aconteceu:
+             * 19 declarações a menos no censo do `frontend-hub`, num conserto que só devia mexer em
+             * QUAL seletor cada uma tem.
+             */
+            const closes = piece[2] === "}";
             /**
              * Sem terminador não há declaração: `padding: 8px` no fim de uma linha pode ser a primeira
              * metade de um valor que continua na próxima.
              */
-            if (!piece[2] || !text)
+            if (!piece[2] || !text) {
+                if (closes)
+                    open.pop();
                 continue;
+            }
             const m = DECLARATION.exec(text);
-            if (!m)
-                continue;
             /**
              * UM TOKEN NÃO É UM FRAGMENTO DE COMPONENTE. `--color-ocean-500: #…` é a paleta, e ela tem
              * o seu próprio caminho e o seu próprio relatório; contá-la aqui inflaria o total com o que
              * já está coberto em outro lugar.
              */
-            if (m[1].startsWith("--"))
+            if (!m || m[1].startsWith("--")) {
+                if (closes)
+                    open.pop();
                 continue;
+            }
+            const selector = selectorOf(open);
             out.push({
                 shape: "css",
                 file,
@@ -249,6 +314,8 @@ kind) {
                         ? { reason: "sheet-not-imported" }
                         : {}),
             });
+            if (closes)
+                open.pop();
         }
     }
     return out;
@@ -302,6 +369,24 @@ const STRUCTURE = new Set([
 function targetClass(text) {
     const brace = text.indexOf("{");
     const selector = brace === -1 ? text : text.slice(0, brace);
+    /**
+     * `@utility x` É A CLASSE `.x` - ela é a forma do Tailwind 4 de declarar um utilitário, e não
+     * traz o ponto que este casamento procura.
+     *
+     * O QUE ELE VIA SEM ISTO: a declaração CHEGAVA ao componente e o relatório dizia que não. O
+     * `readGlobalClasses` lê `@utility` desde 24/08 e a entrega no look de quem veste a classe -
+     * medido em 01/09 pela cadeia real, o `Scene` recebe `perspective: 900px` da `@utility
+     * scene-3d`. Mas o julgamento procurava um ponto no seletor, não achava, e mandava as mesmas
+     * declarações para o ledger como forma sem leitor. No censo do `codelevel`: **68 declarações
+     * em 22 utilities anunciadas como não interpretadas**, com as duas que um componente veste
+     * (`scene-3d` no `Scene`, `stage-3d` no `Stage`) já dentro da receita dele.
+     *
+     * Um número que acusa lacuna onde não há custa o mesmo que um que a esconde: manda alguém
+     * consertar o que não está quebrado. Quase custou um leitor inteiro escrito duas vezes.
+     */
+    const utility = /^@utility\s+([a-z][\w-]*)/i.exec(selector.trim())?.[1];
+    if (utility)
+        return utility;
     for (const group of selector.split(",")) {
         const classes = group.match(/\.[A-Za-z][\w-]*/g);
         /** Sem o ponto: o nome que `globalClasses` indexa. */

package/dist/install-marks.js

@@ -532,7 +532,7 @@ export const CHECKER_SINCE = "0.16.308";
  * si, o campo fica ausente, e ausente ali continua sendo a resposta certa - o `codelevel-ui` dá
  * 0 de 0 contra 145 arquivos de página do `frontend-hub`.
  */
-export const READER_SINCE = "0.16.346";
+export const READER_SINCE = "0.16.348";
 /**
  * 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.346",
+  "version": "0.16.348",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {