synthesisui 0.16.154 → 0.16.155

package/dist/commands/import.js

@@ -857,6 +857,16 @@ export async function takeCensus(root, opts) {
                         ...(v.unslotted.length > 0
                             ? { unplaced: [...new Set(v.unslotted)] }
                             : {}),
+                        /**
+                         * AS NOTAS SÃO OUTRA LISTA - ver `notes` em `variant-read.ts`.
+                         *
+                         * Um layer que FICOU e precisa de um `data-*` não é um look sem lugar: ele está na receita.
+                         * As duas viajavam em `unplaced`, e a tela de causas cobrava conserto de 16 linhas que
+                         * diziam, no próprio texto, que nada tinha sido perdido (dono, 06/08).
+                         */
+                        ...(v.notes.length > 0
+                            ? { renderNotes: [...new Set(v.notes)] }
+                            : {}),
                         ...(Object.keys(v.axes).length > 0 ? { declaredAxes: v.axes } : {}),
                         ...(Object.keys(defaults).length > 0 ? { defaults } : {}),
                     };
@@ -1253,6 +1263,30 @@ export async function takeCensus(root, opts) {
             console.log(body(paint.faint(`  and ${unplacedByComponent.length - 8} more components`)));
         }
     }
+    /**
+     * E AS NOTAS DE RENDERIZAÇÃO, que são o oposto de uma perda.
+     *
+     * O layer ESTÁ na receita: o que falta é um atributo no elemento para ele aplicar. Até 06/08 estas
+     * linhas viajavam junto com as de "não achei onde pôr" - 16 de 33 num repo real -, e a tela de causas
+     * cobrava conserto de quem não tinha o que consertar. Separadas, elas viram o que sempre foram: uma
+     * instrução para quem for renderizar.
+     */
+    const notesByComponent = Object.entries(looks)
+        .filter(([, look]) => (look.renderNotes ?? []).length > 0)
+        .map(([component, look]) => ({
+        component,
+        lines: look.renderNotes ?? [],
+    }));
+    if (notesByComponent.length > 0) {
+        const total = notesByComponent.reduce((n, u) => n + u.lines.length, 0);
+        console.log("");
+        console.log(section("Looks that are in the recipe and need an attribute"));
+        console.log(body(`${total} decision${total === 1 ? "" : "s"} across ${notesByComponent.length} component${notesByComponent.length === 1 ? "" : "s"} were read and KEPT - they apply once the element carries the attribute the line names:`));
+        for (const u of notesByComponent.slice(0, 6))
+            console.log(body(paint.faint(`  ${u.component}: ${u.lines[0]}`)));
+        if (notesByComponent.length > 6)
+            console.log(body(paint.faint(`  and ${notesByComponent.length - 6} more components`)));
+    }
     /**
      * THE DROPS, SAID OUT LOUD. `p-spacing-sm` on a real menu popup read as nothing and
      * the popup shipped with no padding, invisibly - "if the compiler drops them, the drop

package/dist/doctor/variant-read.js

@@ -79,9 +79,16 @@ export function conditionOf(modifiers) {
     const out = {};
     for (const raw of modifiers) {
         if (raw === "dark") {
-            // The dark half has its own home in the transcription and no slot inside a
-            // layer. Saying so beats writing the light value into a dark rule.
-            out.lost = true;
+            /**
+             * O ESQUEMA É UMA CONDIÇÃO, e o layer tem slot para ele.
+             *
+             * O comentário anterior dizia "the dark half has its own home in the transcription and no slot
+             * inside a layer" - verdade quando foi escrito, e falso desde que o layer passou a carregar
+             * `scheme`. A "casa na transcrição" só existe para a classe INCONDICIONAL: uma `dark:` dentro de
+             * um record por variante passava por aqui e morria, e é assim que 9 utilities do Button e do
+             * Toggle sumiram com uma linha de aviso e outras 66 sem nenhuma (dono, 06/08).
+             */
+            out.scheme = "dark";
             continue;
         }
         const relational = RELATIONAL.exec(raw);
@@ -121,7 +128,8 @@ function keyOf(c, variant) {
         .sort(([a], [b]) => a.localeCompare(b))
         .map(([k, o]) => `${k}=${o}`)
         .join("&");
-    return `${v}|${c.state ?? ""}|${c.within ?? ""}|${c.at ?? ""}`;
+    /** O ESQUEMA ENTRA NA CHAVE: sem ele, `bg-white` e `dark:bg-black` caem no mesmo layer e um vence. */
+    return `${v}|${c.state ?? ""}|${c.within ?? ""}|${c.at ?? ""}|${c.scheme ?? ""}`;
 }
 /**
  * Split a class list into the base and the conditional layers it contains.
@@ -157,12 +165,13 @@ export function splitByCondition(classes, variant) {
         const key = keyOf(cond, variant);
         const layer = layers.get(key) ??
             {
-                ...(variant || cond.state || cond.within
+                ...(variant || cond.state || cond.within || cond.scheme
                     ? {
                         when: {
                             ...(variant ? { variant } : {}),
                             ...(cond.state ? { state: cond.state } : {}),
                             ...(cond.within ? { within: cond.within } : {}),
+                            ...(cond.scheme ? { scheme: cond.scheme } : {}),
                         },
                     }
                     : {}),
@@ -623,6 +632,31 @@ function objectFields(value) {
         return [];
     return topLevelEntries(trimmed.slice(1, end - 1));
 }
+/**
+ * TEM A FORMA DE UMA LISTA DE CLASSES?
+ *
+ * Usada só no resíduo: quando nenhuma prop de classe consome o campo, esta é a última pergunta antes de
+ * afirmar que ele é estilo. Ela é deliberadamente TÍMIDA - dois tokens no mínimo, tudo minúsculo, nada
+ * começando com `#`:
+ *
+ *     "px-2 py-2 gap-0.5"   3 tokens, minusculo        -> lista de classes
+ *     "overline"            1 token                    -> silencio (e o `variant` de um <Text>)
+ *     "body-md"             1 token                    -> silencio, e indistinguivel de `text-xs`
+ *     "#1394DC"             comeca com #               -> silencio (cor de grafico)
+ *     "Waiting"             maiuscula                  -> silencio (conteudo)
+ *
+ * Ela erra CALANDO sobre uma classe única e não-consumida, e esse é o lado certo de errar: uma linha
+ * inventada num relatório custa a confiança na linha seguinte, que estava certa.
+ */
+function looksLikeClassList(value) {
+    const text = value.trim().replace(/^[`'"]|[`'"]$/g, "");
+    if (!text || text.startsWith("#"))
+        return false;
+    const tokens = text.split(/\s+/).filter(Boolean);
+    if (tokens.length < 2)
+        return false;
+    return tokens.every((t) => /^[a-z0-9[\]()/:._!-]+$/.test(t));
+}
 /**
  * THE STATIC CLASSES OF THE `className` CALL THAT CONSUMES A LOOKUP.
  *
@@ -636,12 +670,34 @@ function objectFields(value) {
  * local first (`const config = statusConfig[status]`); a record whose value is a plain
  * string has no field, and there the indexing expression is what is written at the call
  * site (`variantColors[variant]`), so the SYMBOL is the reliable half.
+ *
+ * E DUAS COISAS QUE FALTAVAM, medidas em 8 de 8 casos de um repo real (dono, 06/08) - nenhum deles
+ * escrevia `simbolo.campo` no ponto de consumo:
+ *
+ *   1. A PROP NÃO É SÓ `className`. O MetricCard deles passa o campo em
+ *      `contentClassName={cn("p-0 flex flex-col", currentSize.container)}` - é o Card deles que recebe
+ *      a classe por outro nome, e exigir `className` literal descartava a linha inteira.
+ *   2. O CAMPO PODE VIR DESESTRUTURADO. O CircularProgress escreve
+ *      `const { diameter, strokeWidth, fontSize } = sizeConfig[size]` e depois usa `fontSize` NU dentro
+ *      do `cn()` - sem ponto nenhum, então a forma `<algo>.campo` não casa.
+ *
+ * As duas juntas são a diferença entre colocar o look no elemento certo e reportá-lo como "não há
+ * elemento onde pôr".
  */
 function callSiteClasses(source, symbol, field) {
+    /** Desestruturado da própria tabela: `const { fontSize } = sizeConfig[size]`. */
+    const destructured = field != null &&
+        new RegExp(`\\{[^}]*\\b${field}\\b[^}]*\\}\\s*=\\s*${symbol}\\s*\\[`).test(source);
     const use = field
-        ? new RegExp(`\\b[A-Za-z_$][\\w$]*(?:\\[[^\\]]*\\])?\\.${field}\\b`)
+        ? new RegExp(destructured
+            ? `\\b${field}\\b`
+            : `\\b[A-Za-z_$][\\w$]*(?:\\[[^\\]]*\\])?\\.${field}\\b`)
         : new RegExp(`\\b${symbol}\\s*\\[`);
-    for (const m of source.matchAll(/className=\{\s*(?:[A-Za-z_$][\w$]*\.)?(?:cn|clsx|classNames|cx|twMerge|twJoin|classcat)\(/g)) {
+    /**
+     * `className` E QUALQUER `*ClassName`, que é como um componente deles recebe a classe de um filho.
+     * A borda `(?:^|[^A-Za-z])` existe para não casar no meio de um identificador maior.
+     */
+    for (const m of source.matchAll(/(?:^|[^A-Za-z])[A-Za-z]*[Cc]lassName=\{\s*(?:[A-Za-z_$][\w$]*\.)?(?:cn|clsx|classNames|cx|twMerge|twJoin|classcat)\(/g)) {
         const open = (m.index ?? 0) + m[0].length - 1;
         const end = endOf(source, open);
         if (end === -1)
@@ -787,11 +843,23 @@ unattributed) {
                 const on = callSiteClasses(clean, symbol, field.key);
                 if (!on) {
                     /**
-                     * NOWHERE TO PUT IT IS NOT THE ROOT. A field no `className` claims is a
-                     * decision we cannot place, and placing it on the component would paint
-                     * the wrong element - which is the whole bug this reads around.
+                     * NOWHERE TO PUT IT IS NOT THE ROOT. A field no class prop claims is a decision we cannot
+                     * place, and placing it on the component would paint the wrong element - which is the whole
+                     * bug this reads around.
+                     *
+                     * MAS SÓ SE FOR UMA LISTA DE CLASSES. Medido em 8 de 8 casos de um repo real (dono, 06/08),
+                     * SEIS dos campos não eram estilo nenhum: `labelVariant: "overline"` e `valueVariant:
+                     * "body-md"` são o `variant` de um `<Text>`, `text: "Waiting"` é conteúdo, e
+                     * `start: "#1394DC"` é a cor de um gráfico. Chamá-los de "look que não pôde ser colocado" é
+                     * inventar um problema, e foi o que fez uma causa de 33 ocorrências ter 6 falsos positivos.
+                     *
+                     * A regra é o que sobra depois do consumo: se NENHUMA prop de classe consome o campo E o
+                     * valor não tem a forma de uma lista de classes, a gente não sabe que é estilo - e o que não
+                     * se sabe não se afirma. Um valor de um token só fica em silêncio de propósito: `overline` e
+                     * `text-xs` são indistinguíveis pela forma, e o consumo era a única prova.
                      */
-                    unattributed?.push(`\`${symbol}.${field.key}\` is a field of a per-element table that no \`className\` call consumes, so there is no element to put it on`);
+                    if (looksLikeClassList(field.value))
+                        unattributed?.push(`\`${symbol}.${field.key}\` is a field of a per-element table that no class prop consumes, so there is no element to put it on`);
                     continue;
                 }
                 const per = splitByCondition(classes, { [axis]: option.key });
@@ -856,6 +924,7 @@ export function transcribeVariants(source, declared) {
     const reads = readVariants(source);
     const fromRecords = {};
     const unslotted = [];
+    const notes = [];
     const inline = [
         ...readInlineConditions(source),
         // The two shapes the enumeration found to be five times more common than `cva`.
@@ -925,7 +994,11 @@ export function transcribeVariants(source, declared) {
             continue;
         }
         const attr = axis.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-        unslotted.push(named.length === 0
+        /**
+         * NOTA, NÃO PERDA. O layer está na receita; o que falta é um atributo no elemento para ele aplicar.
+         * Enquanto isto viajava em `unslotted`, a tela contava 16 destes como pendência de conserto.
+         */
+        notes.push(named.length === 0
             ? `\`${axis}\` gates a look and is a boolean rather than an axis - the layer is kept, and \`data-${attr}\` has to be set for it to apply`
             : `\`${axis}\` gates a look on one option (\`${named[0]}\`) - one option is not an axis, so the layer is kept and \`data-${attr}="${named[0]}"\` has to be set for it to apply`);
     }
@@ -957,5 +1030,6 @@ export function transcribeVariants(source, declared) {
         layers,
         base: transcribe(baseClasses, declared),
         unslotted,
+        notes,
     };
 }

package/package.json

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