synthesisui 0.16.475 → 0.16.476

package/dist/component-codegen.js

@@ -1,4 +1,5 @@
 import { emittableAttrs } from "./attr-shape.js";
+import { FAMILY_SEAM_PREFIX } from "./fonts.js";
 import { inTheirTongue, sumSpoken, } from "./their-tongue.js";
 import { PHRASING_FORMS, } from "./types.js";
 /**
@@ -550,6 +551,12 @@ const STATIC = {
 /** Fixed rem → Tailwind numeric scale step (0.25rem base), or null if not a
  *  clean multiple. So `0.5rem` → `2` (h-2/w-2) instead of an arbitrary value. */
 function remToTwScale(value) {
+    /** E em px, no degrau de 4px do Tailwind - bateria, 28/09 (b11): o avatar saía `[width:40px]` em vez de `w-10`. */
+    const px = value.trim().match(/^(\d*\.?\d+)px$/);
+    if (px) {
+        const n = Number.parseFloat(px[1]) / 4;
+        return Number.isInteger(n) && n > 0 && n <= 96 ? String(n) : null;
+    }
     const m = value.trim().match(/^(\d*\.?\d+)rem$/);
     if (!m)
         return null;
@@ -596,14 +603,21 @@ const minted = (themeVars, cssVar) => themeVars === null || themeVars.has(cssVar
 export class ThemeVocab extends Set {
     theirValues;
     dsValues;
+    varies;
     constructor(
     /** O valor LITERAL de cada variável dele, com as indireções dele já seguidas. */
     theirValues, 
     /** O valor LITERAL de cada variável nossa (`--ds-*`), com as indireções seguidas. */
-    dsValues) {
+    dsValues, 
+    /**
+     * AS NOSSAS QUE MUDAM DE VALOR ENTRE OS TEMAS - `dsValues` guarda um tema só. Um literal nunca vira uma destas: o
+     * valor cru pinta igual nos dois temas, e o papel não (b11, 28/09). Ver `literalAsRef`.
+     */
+    varies = new Set()) {
         super(theirValues.keys());
         this.theirValues = theirValues;
         this.dsValues = dsValues;
+        this.varies = varies;
     }
     /**
      * O nome DELE para uma referência nossa no namespace `ns` (`color`), ou `null`.
@@ -690,12 +704,37 @@ const namedInside = (prop, value, themeVars) => {
         return ok ? `var(--ease-${key})` : ref;
     });
 };
+/**
+ * O VALOR CRU DA RECEITA QUE O SISTEMA JÁ NOMEIA - bateria, 28/09 (b11). A receita da galeria traz `color: #ffffff` e
+ * `fontFamily: "Inter, sans-serif"` como literais, e o gerador escrevia `[color:#ffffff]` - que a nossa própria checagem
+ * reprova. Quando exatamente UM papel semântico do sistema (ou uma família) segura aquele valor, o literal vira a
+ * referência, e o caminho de sempre acha o nome dele. Dois papéis com o mesmo valor: nada é adivinhado.
+ */
+function literalAsRef(prop, value, themeVars) {
+    if (!(themeVars instanceof ThemeVocab) || /[{(]/.test(value))
+        return null;
+    const ns = prop === "fontFamily"
+        ? FAMILY_SEAM_PREFIX
+        : prop === "color" || prop === "backgroundColor" || prop === "borderColor"
+            ? "--ds-color-semantic-"
+            : null;
+    if (!ns)
+        return null;
+    const hits = [...themeVars.dsValues]
+        .filter(([n, v]) => n.startsWith(ns) && !themeVars.varies.has(n) && sameValue(v, value))
+        .map(([n]) => n.slice(ns.length));
+    if (hits.length !== 1)
+        return null;
+    return ns === FAMILY_SEAM_PREFIX ? `{typography.families.${hits[0]}}` : `{color.semantic.${hits[0]}}`;
+}
 /** One declaration → Tailwind classes (pretty when mappable, arbitrary-property
  *  otherwise - never dropped). */
 function declToTailwind(prop, value, themeVars) {
     const stat = STATIC[prop]?.[value];
     if (stat)
         return [stat];
+    /** O valor cru que UM papel do sistema segura vira a referência dele - ver `literalAsRef`. */
+    value = literalAsRef(prop, value, themeVars) ?? value;
     switch (prop) {
         case "backgroundColor": {
             if (value === "transparent")

package/dist/install-marks.js

@@ -304,7 +304,13 @@
  * 0.16.472 -> 0.16.473 em 28/09, e o passo 1 dá **SIM** (a bateria): as famílias de sistema (Georgia, Arial, Verdana)
  * deixam de virar `<link>` do Google Fonts, e a webfont ao lado delas ganha o `fonts.ts` que antes não saía.
  */
-export const MATERIALISER_SINCE = "0.16.473";
+/**
+ * 0.16.473 -> 0.16.476 em 28/09, e o passo 1 dá **SIM** (a bateria, b11): o componente que o gerador escreve com Tailwind
+ * passa a usar o nome quando a receita traz um valor cru que um papel do sistema segura (`text-foreground` em vez de
+ * `[color:#ffffff]`, `font-body` em vez de `[font-family:Inter,_sans-serif]`), e a largura em px no degrau vira `w-10`.
+ * Um componente escrito antes reprova na própria checagem.
+ */
+export const MATERIALISER_SINCE = "0.16.476";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *

package/dist/project-facts.js

@@ -392,7 +392,15 @@ export async function themeVocabOf(root, slug, names) {
             dsValues.set(n, value);
     }
     /** Um nome sem valor conhecido continua no conjunto: `nameFor` o trata como antes. */
-    const vocab = new ThemeVocab(theirs, dsValues);
+    /** As nossas que o `tokens.css` declara com mais de um valor - uma por tema. Ver `varies` em `ThemeVocab`. */
+    const faces = new Map();
+    for (const m of installed.matchAll(/(--ds-[a-zA-Z0-9_-]+)\s*:\s*([^;{}]+);/g)) {
+        const seen = faces.get(m[1]) ?? new Set();
+        seen.add(m[2].trim());
+        faces.set(m[1], seen);
+    }
+    const varies = new Set([...faces].filter(([, v]) => v.size > 1).map(([n]) => n));
+    const vocab = new ThemeVocab(theirs, dsValues, varies);
     for (const n of names)
         vocab.add(n);
     return vocab;

package/package.json

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