synthesisui 0.16.136 → 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

@@ -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";
@@ -418,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). */
@@ -546,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`. */
@@ -674,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 ?? [];
@@ -1545,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.
          *
@@ -2305,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/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.
  *
@@ -229,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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.136",
+  "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": {