synthesisui 0.16.135 → 0.16.137

package/dist/anatomy-read.js

@@ -29,6 +29,7 @@
  * validate everywhere and render as a hole, and "valid and unread" is the worst
  * of the three outcomes this pipeline has paid for twice.
  */
+import { readSxProps } from "./doctor/style-props.js";
 import { transcribe, } from "./doctor/transcribe.js";
 import { frontierKind } from "./frontier-kind.js";
 /** The ten forms, closed. A renderer that accepts any tag draws anything. */
@@ -141,6 +142,23 @@ function frontierClasses(node, sketch) {
     const trimmed = raw?.trim();
     return trimmed ? { classes: trimmed } : {};
 }
+/**
+ * A PROP DE ESTILO DE UM NÓ, verbatim, para o snippet devolvê-la.
+ *
+ * Numa biblioteca OPACA a gente nomeia e para - ela se desenha sozinha, e as declarações do `sx`
+ * não viram estilo nosso. Mas sem a prop de volta, o snippet entrega um `<Box>` que perdeu a
+ * margem que eles escreveram: 57 de 57 `sx` do app dele estão exatamente aí (05/08). É a mesma
+ * decisão que `motionProps` já carrega.
+ */
+function frontierSx(node, sketch) {
+    const raw = typeof node.sx === "string"
+        ? node.sx
+        : typeof node.at === "number"
+            ? sketch?.[node.at]?.sx
+            : undefined;
+    const trimmed = raw?.trim();
+    return trimmed ? { sx: trimmed.slice(0, 400) } : {};
+}
 export function resolveAnatomy(read, declared, deps, 
 /** Their name → the slug it reaches in this system. See `RefResolver`. */
 resolve, 
@@ -155,7 +173,12 @@ resolve,
 root, 
 /** This component's sketch, so a node can name its classes by INDEX instead
  *  of retyping them - see `AnatomyRead.at`. */
-sketch) {
+sketch, 
+/**
+ * A escala de espaçamento que o projeto DELES declara para o `sx`. Ausente = o default
+ * documentado do MUI, que é fato da biblioteca que eles escolheram - ver `spacingOf`.
+ */
+sxSpacing) {
     /**
      * THE PACKAGE THE RETURNED ELEMENT CAME FROM, measured rather than spelled.
      * Node 0 of the sketch IS what the component returns, and the reader stamped its
@@ -261,6 +284,7 @@ sketch) {
                     from,
                     ...(version ? { version } : {}),
                     ...frontierClasses(node, sketch),
+                    ...frontierSx(node, sketch),
                     ...holds,
                 });
                 continue;
@@ -386,7 +410,25 @@ sketch) {
                         : "";
                 const classes = raw.split(/\s+/).filter(Boolean);
                 const t = transcribe(classes, declared);
-                parts[key] = { base: t.base, dark: t.dark, states: t.states };
+                /**
+                 * A PROP DE ESTILO DESTE NÓ, sob a classe dele.
+                 *
+                 * `sx={{ width: "100%" }}` pertence ao elemento que a carrega - a mesma atribuição que a
+                 * classe tem, e é por isso que ela viaja no sketch. Sob a classe porque uma prop é a
+                 * camada mais fraca: se a classe declara a mesma propriedade, a classe ganha (é o que o
+                 * `style={{ }}` já faz na raiz).
+                 */
+                const sxText = typeof node.at === "number"
+                    ? sketch?.[node.at]?.sx
+                    : undefined;
+                const fromSx = sxText
+                    ? readSxProps(sxText, sxSpacing).declarations
+                    : {};
+                parts[key] = {
+                    base: { ...fromSx, ...t.base },
+                    dark: t.dark,
+                    states: t.states,
+                };
                 /**
                  * A drop on a PART is still a drop. The root path already says these out loud;
                  * this one silently swallowed `p-spacing-sm` on a real menu popup, so the part

package/dist/commands/import.js

@@ -13,7 +13,7 @@ import { describeGate, gateComponent, groupSkips, SCREENS_FOR_SYSTEM, } from "..
 import { emptyTally, internalSpecifiers, scanComponentsInto, tallyToInventory, } from "../doctor/components-scan.js";
 import { countShape, describeCoverage, summarizeCoverage, } from "../doctor/coverage.js";
 import { crosswalk, floorSize, isLibrary, observedRules, useLiveCatalogue, } from "../doctor/crosswalk.js";
-import { keyframeOffsets, moduleImports, readModuleCss, readModuleUsage, transcribeModule, } from "../doctor/css-modules.js";
+import { keyframeOffsets, moduleImports, partialCandidates, readModuleCss, readModuleUsage, sheetImports, transcribeModule, } from "../doctor/css-modules.js";
 import { dataContract } from "../doctor/data-contract.js";
 import { reconcile, scanDefinitions, } from "../doctor/definitions-scan.js";
 import { fragmentsOfSource, fragmentsOfStylesheet, judgeFragments, } from "../doctor/fragments.js";
@@ -27,6 +27,7 @@ import { describeSignals, emptySignals, finishSignals, readSignalsInto, } from "
 import { sketchOf } from "../doctor/sketch.js";
 import { describeForeign, readStyleIslands, } from "../doctor/style-island.js";
 import { buildLedger, describeLedger, } from "../doctor/style-ledger.js";
+import { MUI_DEFAULT_SPACING, readStyledComponents, spacingOf, } from "../doctor/style-props.js";
 import { buildTable } from "../doctor/tokens.js";
 import { definitionSpan, readInlineStyle, rootClasses, rootTag, transcribe, } from "../doctor/transcribe.js";
 import { transcribeVariants } from "../doctor/variant-read.js";
@@ -128,6 +129,48 @@ async function siblingProjects(root) {
  * this" - could not be said, and we ended up rediscovering by colour distance
  * what their stylesheet had spelled out all along.
  */
+/**
+ * UMA FOLHA E TUDO O QUE ELA TRAZ PARA DENTRO DE SI, na ordem em que o sass compila.
+ *
+ * Uma partial (`_darkMode.scss`) nunca é compilada sozinha: ela entra em quem a importa, e portanto
+ * herda o escopo de quem a importa. Ler o `.module.scss` sem seguir os `@import` dele deixava de
+ * fora 1 400 declarações (91% de tudo o que a esteira chamava de "CSS global sem leitor") - e elas
+ * são, no build dele, as faces light e dark de classes que o componente JÁ veste (medido, 05/08).
+ *
+ * Devolve o CSS concatenado e os arquivos que entraram, porque o ledger precisa saber que a partial
+ * pertence a um componente admitido - senão ela continua contabilizada como forma sem leitor, e o
+ * relatório passa a discordar da receita.
+ */
+async function sheetWithImports(path, seen = new Set(), depth = 0) {
+    if (depth > 6 || seen.has(path))
+        return { css: "", files: [] };
+    seen.add(path);
+    const body = await readFile(path, "utf8").catch(() => "");
+    if (!body)
+        return { css: "", files: [] };
+    let css = "";
+    const files = [path];
+    /**
+     * O IMPORTADO VEM ANTES, que é a ordem do sass: quem importa sobrescreve o que importou. Inverter
+     * isto faria a face dark de uma partial vencer a base do próprio module.
+     */
+    for (const spec of sheetImports(body)) {
+        for (const candidate of partialCandidates(spec)) {
+            const child = join(dirname(path), candidate);
+            const nested = await sheetWithImports(child, seen, depth + 1);
+            if (nested.css || nested.files.length > 1 || (await exists(child))) {
+                css += nested.css;
+                files.push(...nested.files);
+                break;
+            }
+        }
+    }
+    return { css: `${css}\n${body}`, files };
+}
+/** Existe no disco - o candidato de partial que o sass acharia primeiro. */
+async function exists(path) {
+    return await readFile(path, "utf8").then(() => true, () => false);
+}
 async function harvestOwnCss(root, 
 /**
  * O LEDGER TAMBÉM COME AQUI, e por um motivo de promessa: este é o único laço que vê TODO
@@ -139,17 +182,40 @@ async function harvestOwnCss(root,
  * não admitido é um motivo, não um desaparecimento.
  */
 into) {
-    let css = "";
+    /**
+     * DOIS PASSES, porque o escopo de uma folha está no GRAFO e não no nome dela.
+     *
+     * O primeiro junta tudo; o segundo julga cada folha sabendo quem importa quem. Um pass só
+     * decidia por `/\.module\./` e chamava de "CSS global sem leitor" 1 400 declarações que o build
+     * deles compila dentro de um module (medido, 05/08).
+     */
+    const sheets = [];
     for await (const file of walkAll([root])) {
         if (!/\.(css|scss|sass|less)$/i.test(file))
             continue;
         const body = await readFile(file, "utf8").catch(() => "");
+        sheets.push({ file, body });
+    }
+    /** Todo caminho que alguma folha importa, resolvido como o sass resolveria. */
+    const imported = new Set();
+    for (const sheet of sheets)
+        for (const spec of sheetImports(sheet.body))
+            for (const candidate of partialCandidates(spec))
+                imported.add(join(dirname(sheet.file), candidate));
+    let css = "";
+    for (const { file, body } of sheets) {
         css += `\n${body}`;
-        if (into && body)
-            into.push({
-                file: relative(root, file),
-                fragments: fragmentsOfStylesheet(relative(root, file), body, /\.module\./.test(file)),
-            });
+        if (!into || !body)
+            continue;
+        const partial = basename(file).startsWith("_");
+        into.push({
+            file: relative(root, file),
+            fragments: fragmentsOfStylesheet(relative(root, file), body, /\.module\./.test(file) || (partial && imported.has(file))
+                ? "scoped"
+                : partial
+                    ? "dead"
+                    : "global"),
+        });
     }
     return css;
 }
@@ -353,6 +419,8 @@ export async function takeCensus(root, opts) {
     const islands = new Map();
     /** How each component expresses style, so the census can state its own coverage. */
     const shapes = new Map();
+    /** A escala de espaçamento que o projeto declara para o `sx` - ver o uso abaixo. */
+    let sxSpacing;
     /** Component FILES the gate accepted - the honest denominator for coverage. A first
      *  version used the whole inventory, which includes everything they compose from a
      *  package, and reported 128 for a library of 36 (probe, 01/08). */
@@ -481,6 +549,20 @@ export async function takeCensus(root, opts) {
              * permite o relatório dizer o que existe e não foi lido, em vez de só o que foi.
              */
             fragments.push(fragmentsOfSource(rel, src));
+            /**
+             * A ESCALA DE ESPAÇAMENTO DELES, se eles declaram uma.
+             *
+             * `mt: 2` num `sx` significa `margin-top: 2 * spacing`, e o `spacing` é decisão do projeto.
+             * 8px é o default DOCUMENTADO do MUI - fato da biblioteca que eles escolheram, não palpite
+             * nosso - mas um projeto que escreve `createTheme({ spacing: 4 })` está declarando outra
+             * coisa, e a convenção do usuário ganha da nossa sempre. Medido uma vez, aqui, onde os
+             * arquivos já estão abertos: reabri-los depois seria a esteira medindo duas vezes.
+             */
+            if (sxSpacing == null && /createTheme\s*\(/.test(src)) {
+                const declaredSpacing = spacingOf(src);
+                if (declaredSpacing !== MUI_DEFAULT_SPACING)
+                    sxSpacing = declaredSpacing;
+            }
             for (const d of found) {
                 sourceOf.set(d.name, { file: rel, source: src });
                 /** O que a peça É, do portão - ver `GateVerdict.kind` e `CensusLook.kind`. */
@@ -564,7 +646,13 @@ export async function takeCensus(root, opts) {
                 let fromModule = null;
                 for (const mod of modules) {
                     const cssPath = join(dirname(file), mod.specifier);
-                    const moduleCss = await readFile(cssPath, "utf8").catch(() => "");
+                    /**
+                     * O MODULE E AS PARTIALS QUE ELE IMPORTA, que no build dele são um arquivo só. Ler apenas
+                     * o `.module.scss` deixava 1 400 declarações fora - as faces light e dark de classes que
+                     * o componente já veste, escritas em `_lightMode.scss`/`_darkMode.scss` ao lado.
+                     */
+                    const sheet = await sheetWithImports(cssPath);
+                    const moduleCss = sheet.css.trim();
                     if (!moduleCss)
                         continue;
                     const usage = readModuleUsage(src, mod.local);
@@ -574,8 +662,14 @@ export async function takeCensus(root, opts) {
                      * ESTE MODULE PERTENCE A UM COMPONENTE ADMITIDO - o único fato que este laço tem e o
                      * ledger precisa. Os fragmentos dele vêm do `harvestOwnCss`, que vê todos os arquivos
                      * de estilo e não só os de componente aceito.
+                     *
+                     * A PARTIAL ENTRA JUNTO: ela é parte deste module, então o veredito dela é o mesmo. Sem
+                     * isto o relatório continuaria chamando de "forma sem leitor" exatamente o que a receita
+                     * acabou de ler - relatório e receita discordando, que é o defeito que o ledger existe
+                     * para não ter.
                      */
-                    admittedStyles.add(relative(root, cssPath));
+                    for (const part of sheet.files)
+                        admittedStyles.add(relative(root, part));
                     const readModule = transcribeModule(readModuleCss(moduleCss), usage, declaredValues);
                     if (readModule.read === 0)
                         continue;
@@ -597,18 +691,34 @@ export async function takeCensus(root, opts) {
                  * not more honest than literal - v1 mirrors, v2 normalises.
                  */
                 const inlineStyle = readInlineStyle(src);
+                /**
+                 * O QUE UM COMPONENTE `styled` DECLARA - e ele não tem JSX, então nada até aqui o leu.
+                 *
+                 * `const Title = styled.h1\`font-size: 1.5rem\`` é a aparência de um `<h1>` inteiro, com o
+                 * nome do componente na variável. O corpo é lido pelo MESMO leitor de regra que lê um
+                 * module, então `&:hover` e `@media` vêm de graça; o que depende de `${}` é contado e não
+                 * lido, porque não está na fonte (medido no app dele: 9 componentes, 100 declarações, 5
+                 * com interpolação).
+                 */
+                const styledHere = readStyledComponents(src).find((c) => c.name === found[0].name);
                 const base = {
                     ...inlineStyle,
+                    ...styledHere?.base,
                     ...fromModule?.base,
                     ...v.base.base,
                     ...t.base,
                 };
                 const states = {
+                    ...styledHere?.states,
                     ...fromModule?.states,
                     ...v.base.states,
                     ...t.states,
                 };
-                const dark = { ...fromModule?.dark, ...t.dark };
+                const dark = {
+                    ...styledHere?.dark,
+                    ...fromModule?.dark,
+                    ...t.dark,
+                };
                 const layers = [...(fromModule?.layers ?? []), ...v.layers];
                 const parts = { ...fromModule?.parts, ...t.parts };
                 const tree = fromModule?.tree ?? [];
@@ -1468,6 +1578,11 @@ export async function takeCensus(root, opts) {
          * ninguém ter que reportar (dono, 04/08).
          */
         ledger,
+        /**
+         * A ESCALA QUE O `sx` DELES USA, só quando eles declaram uma diferente do default do MUI.
+         * Medida no censo e consumida pela derivação - ver `readSxProps`.
+         */
+        ...(sxSpacing ? { sxSpacing } : {}),
         /**
          * THE SHAPE, AND THE RULE IT BECOMES.
          *
@@ -2228,9 +2343,9 @@ async function resolveReadParts(census, root) {
             ? resolveAnatomy(framed, declared, deps, resolveRef, entry?.root, 
             // The component's own sketch, so a node naming itself by index reads
             // the exact class string the census measured (dono, 01/08).
-            looks[component]?.sketch)
+            looks[component]?.sketch, census.sxSpacing)
             : derived && derived.read.length > 0
-                ? resolveAnatomy(derived.read, declared, deps, resolveRef, entry?.root, looks[component]?.sketch)
+                ? resolveAnatomy(derived.read, declared, deps, resolveRef, entry?.root, looks[component]?.sketch, census.sxSpacing)
                 : Array.isArray(entry?.parts) && entry.parts.length > 0
                     ? resolveFlatParts(entry.parts, declared)
                     : null;

package/dist/doctor/component-gate.js

@@ -220,6 +220,18 @@ export function gateComponent(input) {
             because: `\`${name}\` renders \`${adapter}\`'s components and no element of its own - its markup and every pixel are that library's, so there is nothing here for this system to re-theme`,
         };
     }
+    /**
+     * UM COMPONENTE `styled` NÃO TEM MARKUP E É UM COMPONENTE.
+     *
+     * `const Title = styled.h1\`font-size: 1.5rem\`` não escreve JSX nenhum, então caía em "config":
+     * uma constante. Mas ele decide a aparência de um `<h1>` inteiro e o nome dele é o nome do
+     * componente - recusá-lo é a mesma falha de classificar por FORMA DO ARQUIVO em vez de pelo que
+     * a coisa é (medido no app dele: 9 desses, 100 declarações).
+     *
+     * Antes do teste de JSX, e não depois, porque o teste de JSX é exatamente o que erra aqui.
+     */
+    if (STYLED_FACTORY.test(source))
+        return { ok: true };
     if (!HAS_JSX.test(source)) {
         return {
             ok: false,
@@ -252,6 +264,8 @@ export function gateComponent(input) {
  * components", which is the one thing a census must never imply. Every name is
  * carried; the printer shows the first few per group and says how many more.
  */
+/** `styled.h1\`…\`` / `styled(Botao)\`…\`` - uma fábrica de componente, não uma constante. */
+const STYLED_FACTORY = /\bstyled(?:\.[a-zA-Z][\w]*|\([^)]{1,60}\))\s*(?:<[^>]{0,120}>)?\s*`/;
 export const SKIP_LABEL = {
     route: "routes and framework files",
     screen: "whole screens, and the frames around them",

package/dist/doctor/css-modules.js

@@ -335,6 +335,50 @@ export function moduleImports(source) {
         specifier: m[2],
     }));
 }
+/**
+ * `@import "./_darkMode"`, `@use "./_lightMode.scss"` - o que uma folha traz para dentro de si.
+ *
+ * UMA PARTIAL NÃO É UMA FOLHA. Um arquivo `_nome.scss` nunca é compilado sozinho - o sass o
+ * compila DENTRO de quem o importa, e por isso o escopo dele é o de quem importa. No app do dono,
+ * 122 das 138 folhas "globais" são partials e 120 delas são importadas por um `.module.scss` do
+ * mesmo diretório: 1 400 declarações (91%) que a esteira classificava como CSS global sem leitor
+ * são, no build dele, regras de module - hasheadas e escopadas ao componente (medido, 05/08).
+ *
+ * Decidir escopo por NOME DE ARQUIVO (`/\.module\./`) é a lei 14 um nível abaixo: a resposta está
+ * no grafo de imports, não na string do caminho.
+ */
+const SHEET_IMPORT = /@(?:import|use|forward)\s+["']([^"']+)["']/g;
+export function sheetImports(css) {
+    SHEET_IMPORT.lastIndex = 0;
+    return ([...stripCssComments(css).matchAll(SHEET_IMPORT)]
+        .map((m) => m[1].trim())
+        /**
+         * Só o que é relativo. `@use "sass:math"` e um pacote do node_modules não carregam decisão de
+         * aparência deles, e seguir esses caminhos é como um leitor de CSS vira um resolvedor de
+         * módulos pela metade.
+         */
+        .filter((spec) => spec.startsWith(".") || !spec.includes(":"))
+        .filter((spec) => !spec.startsWith("~") && !spec.startsWith("url(")));
+}
+/** `./_darkMode` → os nomes de arquivo que o sass tentaria, na ordem em que ele tenta. */
+export function partialCandidates(specifier) {
+    const clean = specifier.replace(/^\.\//, "");
+    const slash = clean.lastIndexOf("/");
+    const dir = slash === -1 ? "" : `${clean.slice(0, slash)}/`;
+    const base = slash === -1 ? clean : clean.slice(slash + 1);
+    if (/\.(css|scss|sass|less)$/.test(base))
+        return base.startsWith("_")
+            ? [`${dir}${base}`]
+            : [`${dir}${base}`, `${dir}_${base}`];
+    const stem = base.startsWith("_") ? base : `_${base}`;
+    return [
+        `${dir}${base}.scss`,
+        `${dir}${stem}.scss`,
+        `${dir}${base}.sass`,
+        `${dir}${stem}.sass`,
+        `${dir}${base}.css`,
+    ];
+}
 /**
  * A generic in type position, not an element.
  *

package/dist/doctor/fragments.js

@@ -13,6 +13,7 @@
  * se ele foi lido é a interpretação, que roda depois. Juntar as duas coisas numa função seria
  * repetir a mistura que a tabela de cobertura já paga: forma e veredito são fatos diferentes.
  */
+import { readStyledComponents, readSxProps } from "./style-props.js";
 import { readInlineStyle, transcribe } from "./transcribe.js";
 /** `className="…"` e `className={"…"}` - o literal puro. */
 const CLASS_LITERAL = /className=(?:"([^"]{0,400})"|\{\s*"([^"]{0,400})"\s*\})/g;
@@ -25,10 +26,16 @@ const CALL_LITERAL = /\b(?:cn|clsx|classNames|cx|twMerge|twJoin|classcat)\(([^)]
 const STRING_IN_CALL = /"([^"]{0,300})"|'([^']{0,300})'/g;
 /** `style={{ … }}`. */
 const INLINE = /style=\{\{([^}]{0,400})\}\}/g;
-/** `sx={{ … }}`. */
-const SX = /sx=\{\{([^}]{0,400})\}\}/g;
-/** `styled.div\`…\`` e `styled(X)\`…\``. */
-const STYLED = /styled[.(][^`]{0,60}`([^`]{0,400})`/g;
+/**
+ * `sx={{ … }}` e `styled.x\`…\``, achados por CHAVE BALANCEADA e sem teto.
+ *
+ * As duas versões anteriores eram um regex com `[^}]{0,400}` e `[^`]{0,400}`, e as duas mentiam:
+ * `sx={{ "&:hover": { … } }}` para no primeiro `}` e não casa, e um template de 24 declarações
+ * passa de 400 chars e desaparece. Medido no app dele: 5 dos 58 `sx` e 3 dos 9 `styled` eram
+ * invisíveis - num ledger cuja promessa é que nada é descartado em silêncio (05/08).
+ */
+const SX_OPEN = /\bsx=\{\{/g;
+const STYLED_OPEN = /\bstyled(?:\.[a-zA-Z][\w]*|\([^)]{1,60}\))\s*(?:<[^>]{0,120}>)?\s*`/g;
 /**
  * Um pedaço de linha de estilo e o que o termina: `{` faz do pedaço um seletor, `;` e `}` fazem
  * dele uma declaração. Ler a linha inteira de uma vez perde `.card { padding: 8px }` numa linha só,
@@ -97,12 +104,55 @@ export function fragmentsOfSource(file, source) {
     }
     for (const m of source.matchAll(INLINE))
         push("inline", m.index ?? 0, m[1] ?? "");
-    for (const m of source.matchAll(SX))
-        push("sx", m.index ?? 0, m[1] ?? "", "shape-not-read");
-    for (const m of source.matchAll(STYLED))
-        push("styled", m.index ?? 0, m[1] ?? "", "shape-not-read");
+    for (const m of source.matchAll(SX_OPEN)) {
+        const from = (m.index ?? 0) + m[0].length;
+        push("sx", m.index ?? 0, source.slice(from, balanced(source, from, "}")));
+    }
+    for (const m of source.matchAll(STYLED_OPEN)) {
+        const from = (m.index ?? 0) + m[0].length;
+        push("styled", m.index ?? 0, source.slice(from, backtick(source, from)));
+    }
     return out;
 }
+/** O fim de um objeto aberto com duas chaves - `sx={{ … }}` fecha em duas. */
+function balanced(source, from, close) {
+    let depth = 2;
+    let i = from;
+    while (i < source.length && depth > 0) {
+        if (source[i] === "{")
+            depth += 1;
+        else if (source[i] === close)
+            depth -= 1;
+        i += 1;
+    }
+    return i - 2;
+}
+/** O backtick que fecha um template, pulando `${…}` e escape. */
+function backtick(source, from) {
+    let i = from;
+    while (i < source.length) {
+        if (source[i] === "\\") {
+            i += 2;
+            continue;
+        }
+        if (source[i] === "`")
+            return i;
+        if (source[i] === "$" && source[i + 1] === "{") {
+            let depth = 1;
+            i += 2;
+            while (i < source.length && depth > 0) {
+                if (source[i] === "{")
+                    depth += 1;
+                else if (source[i] === "}")
+                    depth -= 1;
+                i += 1;
+            }
+            continue;
+        }
+        i += 1;
+    }
+    return source.length;
+}
 /**
  * Os fragmentos de um arquivo de estilo: uma declaração é um fragmento.
  *
@@ -110,7 +160,20 @@ export function fragmentsOfSource(file, source) {
  * 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).
  */
-export function fragmentsOfStylesheet(file, css, scoped) {
+export function fragmentsOfStylesheet(file, css, 
+/**
+ * COMO ESTA FOLHA CHEGA NO BUILD DELES, e isso vem do GRAFO DE IMPORTS e nunca do nome do
+ * arquivo. Uma partial (`_darkMode.scss`) é compilada dentro de quem a importa e herda o escopo
+ * dele: 122 das 138 folhas "globais" do app dele são partials, e 120 entram num `.module.scss`
+ * ao lado (medido, 05/08).
+ *
+ *     scoped   module, ou partial de um module: o veredito é do componente dono, e
+ *              `judgeFragments` o dá olhando se o escopo o admitiu
+ *     global   uma folha que o código importa: forma que nenhum leitor cobre hoje
+ *     dead     partial que ninguém importa: o build deles não a compila, e ela não
+ *              pinta nada - aqui, nem lá
+ */
+kind) {
     const out = [];
     let selector = "";
     for (const [i, raw] of css.split("\n").entries()) {
@@ -143,7 +206,11 @@ export function fragmentsOfStylesheet(file, css, scoped) {
                 line: i + 1,
                 text: `${selector ? `${selector} ` : ""}{ ${m[1]}: ${m[2].trim()} }`,
                 read: false,
-                ...(scoped ? {} : { reason: "shape-not-read" }),
+                ...(kind === "global"
+                    ? { reason: "shape-not-read" }
+                    : kind === "dead"
+                        ? { reason: "sheet-not-imported" }
+                        : {}),
             });
         }
     }
@@ -212,6 +279,36 @@ export function judgeFragments(seen, declared, admitted) {
                         read: false,
                         reason: "component-not-admitted",
                     };
+            case "sx": {
+                /**
+                 * O MESMO LEITOR QUE A RECEITA USA - `readSxProps`. Um segundo julgamento escrito à parte
+                 * é a maneira mais rápida de o relatório e a receita começarem a discordar.
+                 */
+                const read = readSxProps(f.text);
+                return Object.keys(read.declarations).length > 0
+                    ? { ...f, read: true }
+                    : {
+                        ...f,
+                        read: false,
+                        /**
+                         * Nada lido de um `sx` que EXISTE só acontece por valor: um ternário, um objeto
+                         * responsivo, ou um seletor que aponta para o interior de uma biblioteca. A forma é
+                         * lida - dizer `shape-not-read` aqui mandaria alguém reescrever o leitor que
+                         * acabou de rodar.
+                         */
+                        reason: "value-not-read",
+                    };
+            }
+            case "styled": {
+                const read = readStyledComponents(`const X = styled.div\`${f.text}\`;`);
+                const first = read[0];
+                const got = Object.keys(first?.base ?? {}).length +
+                    Object.keys(first?.dark ?? {}).length +
+                    Object.keys(first?.states ?? {}).length;
+                return got > 0
+                    ? { ...f, read: true }
+                    : { ...f, read: false, reason: "value-not-read" };
+            }
             default:
                 return { ...f, read: false, reason: "shape-not-read" };
         }

package/dist/doctor/gap-triage.js

@@ -84,7 +84,14 @@ function whereOf(shape, reason) {
                 module: null,
                 work: reason === "component-not-admitted"
                     ? "the gate refused the component: these styles exist and no recipe claims them. Changing that means moving the GATE - a decision about the vitrine, not a reader to write"
-                    : "the value is assembled at render time and is not in the source at any level - there is nothing to read",
+                    : reason === "sheet-not-imported"
+                        ? /**
+                           * NÃO É LACUNA NOSSA NEM DELES-QUE-A-GENTE-CONSERTA: é um arquivo que o build deles
+                           * não compila. Cair na frase de runtime dizia que o valor é montado em tempo de
+                           * execução, o que é falso e mandaria alguém procurar o que não existe.
+                           */
+                            "a sass partial no stylesheet imports: their own build never compiles it, so it paints nothing today - here or in their app. Deleting it is their call, not a reader to write"
+                        : "the value is assembled at render time and is not in the source at any level - there is nothing to read",
             };
     }
 }

package/dist/doctor/sketch.js

@@ -431,6 +431,29 @@ function closeOf(source, open) {
  * `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.
  */
+/**
+ * O CORPO DE `sx={{ … }}`, por chave balanceada.
+ *
+ * Um regex `[^}]` para no primeiro `}` e perde `sx={{ "&:hover": { … } }}` inteiro, que é
+ * justamente a forma em que a declaração aninhada mora.
+ */
+function sxBody(body) {
+    const at = body.search(/\bsx=\{\{/);
+    if (at === -1)
+        return undefined;
+    const from = at + (/\bsx=\{\{/.exec(body)?.[0].length ?? 0);
+    let depth = 2;
+    let i = from;
+    while (i < body.length && depth > 0) {
+        if (body[i] === "{")
+            depth += 1;
+        else if (body[i] === "}")
+            depth -= 1;
+        i += 1;
+    }
+    const text = body.slice(from, i - 2).trim();
+    return text || undefined;
+}
 const MODULE_CLASS = /className=\{\s*([A-Za-z_$][\w$]*)\.([A-Za-z_$][\w$]*)\s*\}/;
 export function sketchOf(source, name) {
     /**
@@ -528,6 +551,10 @@ export function sketchOf(source, name) {
         const mod = MODULE_CLASS.exec(event.body);
         if (mod)
             node.moduleClass = mod[2];
+        /** A prop de estilo que ele carrega - ver `sx`. */
+        const sx = sxBody(event.body);
+        if (sx)
+            node.sx = sx;
         // What has to be true for this element to exist at all - see `guardAt`.
         const guard = guardAt(source, event.at);
         if (guard) {

package/dist/doctor/style-ledger.js

@@ -54,6 +54,7 @@ const BECAUSE = {
     "value-not-read": "the shape is read and this value is not - a utility or property outside the scales this project declares",
     computed: "the value is assembled at render time, so it is not in the source at any level and there is nothing to read",
     "component-not-admitted": "read, and it belongs to a component this scope does not admit into the system - the styles exist and no recipe claims them",
+    "sheet-not-imported": "this is a sass partial and no stylesheet imports it, so your own build never compiles it - it paints nothing today, here or anywhere",
 };
 /**
  * O ledger de uma varredura, a partir dos fragmentos vistos.

package/package.json

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