synthesisui 0.16.330 → 0.16.332

package/dist/doctor/css-modules.js

@@ -169,6 +169,26 @@ function rules(css, media = null, out = []) {
     }
     return out;
 }
+/**
+ * UMA DECLARAÇÃO DE CUSTOM PROPERTY É UMA DECLARAÇÃO - e descartá-la fazia a receita
+ * apontar para um nome que a nossa saída não declara.
+ *
+ * O padrão anterior era `^-?[a-z][a-z-]*$`: um hífen inicial (o prefixo de fabricante),
+ * nunca dois. Toda `--nome` caía fora, em `base`, em `dark` e em `states`, para toda
+ * classe. Medido no codelevel em 29/08: 0 de 23 classes globais carregavam uma, e a folha
+ * declara duas dentro de `@utility holo-card`.
+ *
+ * O QUE O CLIENTE VIVIA: a receita do `Card variant="holo"` sai com
+ * `background: linear-gradient(var(--holo-inner-bg), …)` e a variável não era declarada em
+ * lugar nenhum da nossa saída - nem o claro `#ffffff`, nem o escuro `#1a1a21`. Um `var()`
+ * sem fallback para propriedade não declarada invalida a declaração em tempo de valor
+ * computado, e o `background` volta ao inicial: o preenchimento E a borda cônica somem.
+ *
+ * Isto NÃO a promove a foundation. Ela continua morando na classe, e é `parseSchemeBlocks`
+ * quem decide o que é vocabulário de documento - lá a régua exige escopo de documento, e
+ * uma variável de componente nunca passa por ela.
+ */
+const PROPERTY = /^(--[a-zA-Z0-9_-]+|-?[a-z][a-z-]*)$/;
 /** `prop: value;` pairs, in the camelCase the contract uses. */
 function declarations(body) {
     const out = {};
@@ -194,12 +214,21 @@ function declarations(body) {
             continue;
         const prop = piece.slice(0, colon).trim();
         const value = piece.slice(colon + 1).trim();
-        if (!/^-?[a-z][a-z-]*$/.test(prop) || !value)
+        if (!PROPERTY.test(prop) || !value)
             continue;
         // A value that could break out of the stylesheet is not a value we carry.
         if (/[<>{}@]/.test(value))
             continue;
-        out[camel(prop)] = value;
+        /**
+         * O NOME DE UMA CUSTOM PROPERTY É A CHAVE DE UMA REFERÊNCIA, e por isso ele não passa
+         * pelo `camel`.
+         *
+         * `--holo-inner-bg` viraria `-HoloInnerBg`, e o `var(--holo-inner-bg)` que a mesma regra
+         * escreve deixaria de encontrá-la. Uma propriedade padrão é um NOME que o contrato
+         * escreve em camelCase e o compilador devolve em kebab; uma custom property é um
+         * IDENTIFICADOR que o autor escolheu, e ela viaja verbatim nas duas pontas.
+         */
+        out[prop.startsWith("--") ? prop : camel(prop)] = value;
     }
     return out;
 }

package/dist/doctor/variant-read.js

@@ -1289,7 +1289,7 @@ consumed) {
             : `\`${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`);
     }
     const layers = allLayers
-        .map((layer) => {
+        .flatMap((layer) => {
         /**
          * THE MODIFIER COMES OFF BEFORE THE TRANSCRIPTION.
          *
@@ -1309,11 +1309,32 @@ consumed) {
          * folha entra como a camada de baixo, que é onde o CSS a coloca.
          */
         const wornHere = wearGlobal(bare, globals);
+        /**
+         * O QUE SÓ VALE NO ESCURO FICA SÓ NO ESCURO - e antes disto ele pintava em toda face.
+         *
+         * O QUE O CLIENTE VIVIA: a folha dele escreve `html.dark .stroke-text { … }`, e a
+         * declaração chegava dentro do MESMO objeto de estilo da camada base, DEPOIS das
+         * declarações claras - então ela ganhava, e o `Typography variant="stroke"` renderizava o
+         * contorno escuro também na face clara. Medido no codelevel em 29/08: 7 declarações, 3
+         * classes, 1 componente.
+         *
+         * A CONDIÇÃO VIAJA COM O VALOR, e o slot para isso já existia: `when.scheme` é o mesmo
+         * campo que o caminho da variante `dark:` usa desde 06/08 (69 camadas do censo dele já o
+         * carregavam enquanto estas 7 declarações eram achatadas). Nada de campo novo.
+         *
+         * O ESQUEMA COMBINA COM AS OUTRAS CONDIÇÕES em vez de substituí-las: a camada escura
+         * herda o `variant`, o `state` e o breakpoint da camada que a originou, que é como
+         * `{ variant: { ring: "true" }, scheme: "dark" }` já aparece hoje.
+         */
+        const darkOnly = { ...wornHere.dark, ...t.dark };
+        /** A camada JÁ nasceu com um esquema? Aí ela não se divide - ela já é uma face. */
+        const already = layer.when?.scheme;
         const style = {
             ...wornHere.base,
-            ...wornHere.dark,
             ...t.base,
-            ...t.dark,
+            // Uma camada que já É a face escura recebe o escuro no próprio estilo. Uma que é a
+            // face CLARA não recebe nada dele - seria pintar o outro esquema.
+            ...(already === "dark" ? darkOnly : {}),
         };
         /**
          * O HÍBRIDO DO D1, no nível da camada: `classes` é a grafia DELE, verbatim (a metade de
@@ -1325,7 +1346,7 @@ consumed) {
             .map((utility) => readUtility(utility, declared))
             .filter((d) => d != null);
         const fromFramework = reads.length > 0 && reads.every((d) => d.from === "framework");
-        return {
+        const head = {
             ...(layer.when ? { when: layer.when } : {}),
             ...(layer.at ? { at: layer.at } : {}),
             ...(layer.onClasses ? { onClasses: layer.onClasses } : {}),
@@ -1333,6 +1354,32 @@ consumed) {
             classes: layer.classes,
             ...(fromFramework ? { from: "framework" } : {}),
         };
+        /**
+         * Sem declaração escura, nenhuma camada a mais - um componente que não tem esquema na
+         * folha sai byte a byte como saía. E `already` já resolveu as duas faces acima.
+         */
+        if (already || Object.keys(darkOnly).length === 0)
+            return [head];
+        return [
+            head,
+            {
+                when: { ...(layer.when ?? {}), scheme: "dark" },
+                ...(layer.at ? { at: layer.at } : {}),
+                ...(layer.onClasses ? { onClasses: layer.onClasses } : {}),
+                style: darkOnly,
+                /**
+                 * AS MESMAS CLASSES: é a mesma classe dele, com a segunda face que a folha dá a
+                 * ela. `classes` é fidelidade - diz qual classe esta camada transcreve -, e quem
+                 * pinta é `style`.
+                 *
+                 * SEM `from`: o carimbo de framework é sobre as utilities transcritas, e estas
+                 * declarações vieram da folha DELE. `t.dark` está medido em 0 nas quatro
+                 * populações (o modificador sai em `parseClass` antes de `transcribe`), então
+                 * hoje o escuro aqui é sempre a folha.
+                 */
+                classes: layer.classes,
+            },
+        ];
     })
         .filter((layer) => Object.keys(layer.style).length > 0);
     return {

package/dist/install-marks.js

@@ -367,7 +367,7 @@ export const CHECKER_SINCE = "0.16.308";
  * nunca era alcançado. Medido: 1134 componentes, 77 mudaram, e a receita que o cliente recebe muda
  * com eles. Uma medição anterior não produz o conserto, então a marca sobe.
  */
-export const READER_SINCE = "0.16.330";
+export const READER_SINCE = "0.16.332";
 /**
  * O QUE ESTÁ INSTALADO AQUI FICOU PARA TRÁS - e as DUAS condições que fazem isso ser verdade.
  *

package/package.json

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