synthesisui 0.16.403 → 0.16.405

package/dist/sheet-needed.js

@@ -9,18 +9,172 @@ function themeNames(themeCss) {
             out.add(m[2]);
     return [...out];
 }
+/**
+ * O VALOR DE UM ATRIBUTO DE CLASSE, QUANDO ELE É UMA EXPRESSÃO - e a regra é o ATRIBUTO, não a
+ * função.
+ *
+ * O DEFEITO, medido em 08/09 nas duas árvores do `frontend-hub`: o leitor via `className="…"` e o
+ * template direto, e não via `className={cn("…")}`.
+ *
+ * ```
+ *                            packages/ui/src   apps/web-dashboard
+ * className=" literal              346              2639
+ * className={cn( ou {clsx(          66               239     <- invisíveis
+ * ```
+ *
+ * São **305 sítios** onde o projeto dele escreve classe e a pergunta *"algo aqui precisa da nossa
+ * folha?"* era respondida sobre um texto que não continha a resposta. E o erro caía para o lado
+ * ERRADO: o cabeçalho deste módulo declara que *"o lado seguro do erro é PRECISA"*, porque um falso
+ * positivo mantém o setup sendo pedido e um falso NEGATIVO entrega um componente sem a animação que
+ * ele veste. `cn()` é o idioma de quem parte do shadcn, então a metade que faltava era a maior parte
+ * de quem chega.
+ *
+ * POR QUE A REGRA NÃO É O NOME DA FUNÇÃO. Casar `cn|clsx|twMerge` seria a lista dos casos de hoje: o
+ * próximo cliente chama a dele de `classes`, `cx` ou nada - passa um ternário direto. O que é
+ * estrutural é o ATRIBUTO: dentro do valor de um `class`/`className`, toda string literal é
+ * candidata a classe, seja ela argumento de função, ramo de ternário ou pedaço de template.
+ *
+ * O QUE ISTO NÃO ALCANÇA, e está declarado com o número: a tabela de variantes que mora numa const
+ * separada - `cva(...)` e `tv(...)`, medidos em 08/09 como **4 + 41 e 0 + 85** nas duas árvores. Ali
+ * as classes chegam ao atributo por VARIÁVEL, e cobri-las exige seguir a variável até a declaração:
+ * é outra frente, e o erro dela continua caindo para o lado de cobrar.
+ */
+function attributeExpressions(source) {
+    const out = [];
+    const ATTR = /class(?:Name)?=\{/g;
+    for (const m of source.matchAll(ATTR)) {
+        let depth = 0;
+        let i = (m.index ?? 0) + m[0].length - 1;
+        const start = i;
+        /** Aspas contam para NÃO deixar uma chave dentro de string fechar a expressão cedo. */
+        let quote = null;
+        for (; i < source.length; i += 1) {
+            const c = source[i];
+            if (quote) {
+                if (c === "\\")
+                    i += 1;
+                else if (c === quote)
+                    quote = null;
+                continue;
+            }
+            if (c === '"' || c === "'" || c === "`")
+                quote = c;
+            else if (c === "{")
+                depth += 1;
+            else if (c === "}") {
+                depth -= 1;
+                if (depth === 0)
+                    break;
+            }
+        }
+        if (depth === 0)
+            out.push(source.slice(start + 1, i));
+    }
+    return out;
+}
+/**
+ * A DECLARAÇÃO DE UMA CONST QUE O ATRIBUTO USA - o salto que faltava, e a mesma regra do atributo.
+ *
+ * O QUE FICAVA DE FORA, e estava declarado no contrato com o número: a tabela de variantes mora
+ * numa const separada e chega ao atributo por VARIÁVEL. O caso real, medido no `frontend-hub`:
+ *
+ * ```
+ * const buttonVariants = cva("… rounded-[var(--radius-md)] …", { variants: { … } });
+ * …
+ * className={twUtils.cn(buttonVariants({ variant, size, className }))}
+ * ```
+ *
+ * As classes estão na declaração, não no atributo - então o leitor de 08/09, que já colhia toda
+ * string DENTRO da expressão, via `buttonVariants(...)` e não via nenhuma classe. Medido nas duas
+ * árvores: **4 + 41** declarações `cva(` e **0 + 85** `tv(`.
+ *
+ * A REGRA CONTINUA SENDO A MESMA, um salto adiante: o atributo diz quais identificadores importam,
+ * e a declaração daqueles identificadores é lida no mesmo arquivo. Nada aqui conhece `cva`, `tv` ou
+ * `cn` - o próximo cliente escreve a tabela dele num objeto pelado, e cai na mesma regra.
+ *
+ * E O ERRO CONTINUA CAINDO PARA O LADO SEGURO: uma const que não é classe - um rótulo, uma
+ * mensagem - entrega palavras que o `@theme` não declara, então elas somem na peneira final. O
+ * cabeçalho deste módulo diz que entre errar cobrando e errar calando, cobrar é o erro que a pessoa
+ * percebe.
+ */
+function declarationsBehind(source, exprs) {
+    /**
+     * TODO IDENTIFICADOR DA EXPRESSÃO, e não só os que ela CHAMA.
+     *
+     * A primeira versão pegava `nome(`, e o objeto pelado - `pick(byTone, tone)` - passa a tabela
+     * como ARGUMENTO. O que decide é o atributo mencionar o identificador; se ele é chamado ou
+     * passado é sintaxe, e sintaxe é o que muda de projeto para projeto.
+     */
+    const names = new Set();
+    for (const expr of exprs)
+        for (const m of expr.matchAll(/\b([A-Za-z_$][\w$]*)\b/g))
+            names.add(m[1]);
+    if (names.size === 0)
+        return [];
+    const out = [];
+    for (const name of names) {
+        /** `const <nome> = ` - e o valor vai até a linha que fecha no MESMO nível de indentação. */
+        const at = source.search(new RegExp(`\\b(?:const|let|var)\\s+${name}\\s*=`));
+        if (at < 0)
+            continue;
+        let depth = 0;
+        let i = source.indexOf("=", at);
+        let quote = null;
+        let started = false;
+        for (; i < source.length; i += 1) {
+            const c = source[i];
+            if (quote) {
+                if (c === "\\")
+                    i += 1;
+                else if (c === quote)
+                    quote = null;
+                continue;
+            }
+            if (c === '"' || c === "'" || c === "`")
+                quote = c;
+            else if (c === "(" || c === "{" || c === "[") {
+                depth += 1;
+                started = true;
+            }
+            else if (c === ")" || c === "}" || c === "]") {
+                depth -= 1;
+                if (started && depth <= 0)
+                    break;
+            }
+            else if (c === ";" && !started)
+                break;
+        }
+        out.push(source.slice(at, i + 1));
+    }
+    return out;
+}
 /** As classes escritas no código - `hover:animate-shimmer` conta como `animate-shimmer`. */
 function classesIn(source) {
     const out = new Set();
-    for (const m of source.matchAll(/class(?:Name)?=(?:"([^"]*)"|'([^']*)'|\{`([^`]*)`\}|\{"([^"]*)"\})/g)) {
-        const body = m[1] ?? m[2] ?? m[3] ?? m[4] ?? "";
+    const collect = (body) => {
         for (const raw of body.split(/\s+/)) {
             if (!raw)
                 continue;
             const bare = raw.split(":").pop() ?? raw;
             out.add(bare.replace(/^[!-]/, ""));
         }
-    }
+    };
+    for (const m of source.matchAll(/class(?:Name)?=(?:"([^"]*)"|'([^']*)'|\{`([^`]*)`\}|\{"([^"]*)"\})/g))
+        collect(m[1] ?? m[2] ?? m[3] ?? m[4] ?? "");
+    /**
+     * E TODA STRING DENTRO DA EXPRESSÃO - ver `attributeExpressions`. As três formas de escrever uma
+     * string em JS/TS, porque quem escolhe a aspa é o formatador dele, não a gente.
+     */
+    const exprs = attributeExpressions(source);
+    const strings = (text) => {
+        for (const lit of text.matchAll(/"([^"]*)"|'([^']*)'|`([^`]*)`/g))
+            collect(lit[1] ?? lit[2] ?? lit[3] ?? "");
+    };
+    for (const expr of exprs)
+        strings(expr);
+    /** E a declaração de quem o atributo chama - ver `declarationsBehind`. */
+    for (const decl of declarationsBehind(source, exprs))
+        strings(decl);
     return out;
 }
 /**

package/package.json

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