synthesisui 0.16.129 → 0.16.131

package/dist/anatomy-from-sketch.js

@@ -467,9 +467,16 @@ versionOf) {
          */
         if (hasKids && as !== "row" && as !== "stack")
             as = arrangement(classes);
-        // A plain structural box earns a name only when it carries decisions - and
-        // it must earn one, because the name is what the class string travels on.
-        if (!name && classes)
+        /**
+         * A plain structural box earns a name only when it carries decisions - and it must earn
+         * one, because the name is what the class string travels on.
+         *
+         * UMA CLASSE DE MODULE TAMBÉM É DECISÃO. Num app de CSS Modules o elemento veste
+         * `className={styles.content}` e nenhuma string: sem isto o nó não ganhava nome, não virava
+         * part, e o bloco de 16 declarações lido do module não tinha onde pousar. O Tooltip dele
+         * chegava com 2 das 35 (04/08).
+         */
+        if (!name && (classes || node.moduleClass))
             name = "box";
         /**
          * A NODE WHOSE CONTENT IS THE CALLER'S is a slot, and it keeps its own name

package/dist/commands/import.js

@@ -261,6 +261,8 @@ export async function takeCensus(root, opts) {
     const tally = emptyTally();
     const internal = await internalSpecifiers(root);
     const defined = [];
+    /** Nome → arquivo e fonte, para toda leitura por componente - ver o preenchimento abaixo. */
+    const sourceOf = new Map();
     /** What the gate turned away, with the reason. Never dropped in silence. */
     const skips = [];
     // Kept for the reference check below, which needs every file at once: a name
@@ -411,6 +413,21 @@ export async function takeCensus(root, opts) {
                 componentFiles += 1;
             }
             defined.push(...found);
+            /**
+             * O ARQUIVO E A FONTE DE CADA COMPONENTE QUE GANHA UM LOOK.
+             *
+             * O contrato de dados era estampado a partir de `defined`, a lista que o PORTÃO de
+             * componente aceita - 36 numa biblioteca e 29 num app de 690 arquivos. Então 242 receitas
+             * do dashboard dele e 19 do web-review chegavam sem `api` nenhum: sem props, sem
+             * derivação, sem tipo de eixo e sem o especificador de import, embora 41% e 61% dos
+             * arquivos declarem um `<Nome>Props` (04/08).
+             *
+             * É a mesma classe de defeito da elegibilidade, um nível ao lado: uma leitura pendurada
+             * numa lista feita para biblioteca. O look já nasce aqui, com o arquivo e a fonte na mão,
+             * e é aqui que a leitura tem que se pendurar.
+             */
+            for (const d of found)
+                sourceOf.set(d.name, { file: rel, source: src });
             // THE LOOK, from their own class names. One transcription per file, keyed
             // by the component it defines - the root element's classes are the
             // component's own look, and everything below it is a part this slice does
@@ -1239,12 +1256,23 @@ export async function takeCensus(root, opts) {
      * as not exported. See `publicApi`.
      */
     const api = await publicApi(root);
-    for (const c of components) {
-        const file = defined.find((d) => d.name === c.name)?.file;
-        const source = file
-            ? sources.find((s) => s.file.endsWith(file))?.source
-            : undefined;
-        const required = source ? requiredProps(source, c.name) : [];
+    /**
+     * TODO NOME QUE TEM LEITURA, e não só os que o inventário de USO lista.
+     *
+     * O laço iterava `components` - o inventário de uso - e pendurava o arquivo em `defined`. Duas
+     * listas feitas para biblioteca, e num app nenhuma das duas alcança uma tela: 242 receitas do
+     * dashboard dele ficaram sem `api` (04/08). Agora a leitura acompanha o LOOK, que é onde o
+     * resto da leitura daquele componente já vive, e o inventário continua sendo inventário.
+     */
+    const named = [
+        ...new Set([...components.map((c) => c.name), ...Object.keys(looks)]),
+    ];
+    for (const name of named) {
+        const c = components.find((x) => x.name === name);
+        const at = sourceOf.get(name);
+        const file = at?.file;
+        const source = at?.source;
+        const required = source ? requiredProps(source, name) : [];
         /**
          * THE COMPONENT'S DATA CONTRACT - its props, its derivations, the copy an option
          * carries, and the type that names an axis's options.
@@ -1256,11 +1284,11 @@ export async function takeCensus(root, opts) {
          * Stamped whether or not the folder is a package: a `src/components` with no
          * manifest of its own has no specifier to offer and its components still have props.
          */
-        const span = source ? definitionSpan(source, c.name) : null;
+        const span = source ? definitionSpan(source, name) : null;
         const contract = source
-            ? dataContract(source, span ? source.slice(span.from, span.to) : source, c.name, (c.declaredAxes ?? {}))
+            ? dataContract(source, span ? source.slice(span.from, span.to) : source, name, (c?.declaredAxes ?? looks[name]?.declaredAxes ?? {}))
             : null;
-        c.api = {
+        const stamped = {
             /**
              * SILENCE WHEN THE ENTRY WAS NOT READ. An unreadable entry gives an empty export
              * set, and calling that "internal" would have marked every component internal at
@@ -1268,7 +1296,7 @@ export async function takeCensus(root, opts) {
              */
             ...(!api?.read
                 ? {}
-                : api.exports.has(c.name)
+                : api.exports.has(name)
                     ? { from: api.from }
                     : { exported: false }),
             /**
@@ -1294,8 +1322,18 @@ export async function takeCensus(root, opts) {
                 : {}),
         };
         // An api with nothing in it is not a fact - it is an empty object on 36 components.
-        if (Object.keys(c.api).length === 0)
-            c.api = undefined;
+        /**
+         * ONDE ELE MORA: no LOOK, que é por componente, e também na entrada do inventário quando
+         * existe uma. A entrada é o que a plataforma sempre leu; o look é o que alcança as 242 que
+         * o inventário não tem. Uma leitura, dois endereços, e a plataforma prefere o look.
+         */
+        if (Object.keys(stamped).length === 0)
+            continue;
+        if (c)
+            c.api = stamped;
+        const look = looks[name];
+        if (look)
+            look.api = stamped;
     }
     const brokenRefs = findBrokenRefs(sources, declaredNames);
     const conventions = detectConventions(sources);
@@ -2136,6 +2174,43 @@ async function resolveReadParts(census, root) {
             }
             target.base = { ...style, ...target.base };
         }
+        /**
+         * O QUE UM CSS MODULE DECLAROU, ONTO THE PART THAT WEARS THAT CLASS.
+         *
+         * Num app de CSS Modules a classe do module é a identidade do elemento, e a anatomia dá
+         * outro nome ao mesmo nó - o `content` do Tooltip dele vira `text` pelo papel. As duas
+         * listas nunca se encontravam, porque a junção era por NOME: o módulo entregava
+         * `parts.content` com 16 declarações e a anatomia substituía tudo por `parts.text` vazia.
+         * As 35 declarações do Tooltip chegavam como 2 (04/08).
+         *
+         * A junção é por CLASSE, que é um dado do próprio nó - ver `SketchNode.moduleClass`. Uma
+         * classe cujo nó a anatomia não nomeia é dita em voz alta, nunca empurrada para a raiz.
+         */
+        const sketch = (look?.sketch ?? []);
+        const fromModule = look?.parts ?? {};
+        for (const [index, node] of sketch.entries()) {
+            const cls = node.moduleClass;
+            if (!cls)
+                continue;
+            const block = fromModule[cls];
+            if (!block)
+                continue;
+            const part = partAt[index];
+            const target = part ? resolved.parts[part] : undefined;
+            if (!target) {
+                notes.add(`\`.${cls}\` in a CSS module styles an element the anatomy does not name, so it is not applied - putting it on the component would paint the wrong thing`);
+                continue;
+            }
+            /** O que a class string já disse ganha: um utilitário no mesmo elemento é mais recente. */
+            target.base = { ...block.base, ...target.base };
+            if (Object.keys(block.dark ?? {}).length > 0)
+                target.dark = { ...block.dark, ...target.dark };
+            for (const [state, decls] of Object.entries(block.states ?? {}))
+                target.states = {
+                    ...target.states,
+                    [state]: { ...decls, ...(target.states?.[state] ?? {}) },
+                };
+        }
         /**
          * REPLACED, NOT APPENDED - because this runs more than once.
          *

package/dist/doctor/css-modules.js

@@ -83,7 +83,19 @@ function rules(css, media = null, out = []) {
         const open = css.indexOf("{", i);
         if (open === -1)
             break;
-        const head = css.slice(i, open).trim();
+        /**
+         * O SELETOR É O QUE VEM DEPOIS DA ÚLTIMA DECLARAÇÃO, não o texto todo até a chave.
+         *
+         * Num CSS plano o cabeçalho de uma regra já vem limpo, e por isso isto passou. Num `.scss`
+         * aninhado não: o corpo de `.content` é
+         *
+         *     background-color: …;  border-radius: 4px;  .header {
+         *
+         * e o cabeçalho da regra do `.header` saía com as duas declarações grudadas na frente.
+         * `classesIn` então achava fragmentos como `0` (de `opacity: 0`) e 12 seletores por arquivo
+         * iam para `unslotted` (04/08).
+         */
+        const head = css.slice(i, open).split(/[;}]/).pop()?.trim() ?? "";
         // Balance to the matching close, because an at-rule contains whole rules.
         let depth = 0;
         let close = -1;
@@ -113,6 +125,33 @@ function rules(css, media = null, out = []) {
         }
         else if (head) {
             out.push({ selector: head, body, media });
+            /**
+             * UM BLOCO ANINHADO É UMA REGRA, e não texto do pai.
+             *
+             * Esta varredura era plana, e num `.scss` isso significa que
+             *
+             *     [data-theme="light"] { .container { .content { background } } }
+             *
+             * produzia UMA regra: seletor `[data-theme="light"]`, sem classe nenhuma, então
+             * `unslotted` - e o bloco inteiro ia para o lixo. Já a versão sem tema produzia
+             * `.container` com TODAS as declarações de todos os níveis, porque `declarations()`
+             * varre o corpo e o corpo é o arquivo. Medido no repo dele (04/08): 196 de 200 modules
+             * usam aninhamento, o Tooltip saiu com 19 declarações na raiz e 4 classes perdidas, 969
+             * de 1637 parts vieram vazias, e 109 blocos dark viraram 5.
+             *
+             * Descer com o seletor do pai na mão resolve os três de uma vez: o filho passa a ter
+             * seletor completo, `classesIn` acha a classe certa, a relação pai-filho é registrada, e
+             * `[data-theme="dark"] .x` casa o teste de tema. O `&` do Sass é resolvido contra o pai,
+             * que é o que ele significa.
+             */
+            for (const nested of rules(body, media)) {
+                out.push({
+                    ...nested,
+                    selector: nested.selector.includes("&")
+                        ? nested.selector.replace(/&/g, head)
+                        : `${head} ${nested.selector}`,
+                });
+            }
         }
         i = close + 1;
     }
@@ -121,8 +160,22 @@ function rules(css, media = null, out = []) {
 /** `prop: value;` pairs, in the camelCase the contract uses. */
 function declarations(body) {
     const out = {};
-    // Only the top level: a nested rule's declarations belong to that rule.
-    const flat = body.replace(/\{[^{}]*\}/g, "").replace(/[^;]*\{/g, "");
+    /**
+     * SÓ O NÍVEL DE CIMA - e "só" exige repetir, porque um module aninha mais de um nível.
+     *
+     * Uma passada tira o bloco mais interno e deixa o do meio aberto, então as declarações do
+     * meio vazavam para o pai: `.card { padding; .title { font-size; > h3 { margin } } }` dava
+     * `font-size` ao card e `margin` ao title. Com 196 de 200 modules dele aninhando e a maioria
+     * em três níveis, é o vazamento que fazia a raiz vestir o module inteiro (04/08).
+     */
+    let flat = body;
+    for (let guard = 0; guard < 12; guard++) {
+        const next = flat.replace(/\{[^{}]*\}/g, "");
+        if (next === flat)
+            break;
+        flat = next;
+    }
+    flat = flat.replace(/[^;{}]*\{/g, "");
     for (const piece of flat.split(";")) {
         const colon = piece.indexOf(":");
         if (colon === -1)

package/dist/doctor/sketch.js

@@ -427,6 +427,11 @@ function closeOf(source, open) {
     }
     return -1;
 }
+/**
+ * `className={styles.content}` e `className={s.content}` - a forma que um app de CSS Modules
+ * usa em todo elemento. O identificador é o import do module, e a propriedade é a classe.
+ */
+const MODULE_CLASS = /className=\{\s*([A-Za-z_$][\w$]*)\.([A-Za-z_$][\w$]*)\s*\}/;
 export function sketchOf(source, name) {
     /**
      * READ THE IMPORTS BEFORE SLICING - they live at the top of the file, and the
@@ -519,6 +524,10 @@ export function sketchOf(source, name) {
         const list = repeatOf(source, event.at);
         if (list)
             node.repeats = list;
+        /** A classe de module que ele veste - ver `moduleClass`. */
+        const mod = MODULE_CLASS.exec(event.body);
+        if (mod)
+            node.moduleClass = mod[2];
         // What has to be true for this element to exist at all - see `guardAt`.
         const guard = guardAt(source, event.at);
         if (guard) {

package/package.json

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