synthesisui 0.16.474 → 0.16.476

package/dist/commands/doctor.js

@@ -385,8 +385,16 @@ measured) {
      * unidade. Uma raiz por tabela seria a forma mais silenciosa de discordar.
      */
     const theirs = await harvestOwnTokens([root], measured);
+    const table = withTheirNames(ours, theirs);
+    /**
+     * AS LARGURAS DO SISTEMA - ver `breakpoints` em `TokenTable`. `var()` não funciona em `@media`, então o `tokens.css`
+     * não as carrega e a escala sai do documento (bateria, 28/09).
+     */
+    const breakpoints = breakpointsOf(documents, table.rootPx);
+    if (breakpoints.size > 0)
+        table.breakpoints = breakpoints;
     return {
-        table: withTheirNames(ours, theirs),
+        table,
         theirs,
         recipes,
         documents,
@@ -1977,3 +1985,17 @@ export async function doctor(opts) {
             process.exitCode = 1;
     }
 }
+/** `foundations.breakpoints` de cada documento instalado, em px - `{ md: "768px" }` -> `md` -> 768. */
+export function breakpointsOf(documents, rootPx) {
+    const out = new Map();
+    for (const doc of documents) {
+        const bps = doc?.foundations?.breakpoints;
+        for (const [name, raw] of Object.entries(bps ?? {})) {
+            const m = /^\s*([\d.]+)(px|rem|em)\s*$/.exec(String(raw));
+            if (!m || out.has(name))
+                continue;
+            out.set(name, m[2] === "px" ? Number(m[1]) : Number(m[1]) * rootPx);
+        }
+    }
+    return out;
+}

package/dist/commands/hook.js

@@ -5,7 +5,7 @@ import { changedSince } from "../changed-files.js";
 import { emptyTally, exportedNames, internalSpecifiers, scanComponentsInto, tallyToInventory, } from "../doctor/components-scan.js";
 import { checkContracts } from "../doctor/contract-check.js";
 import { appendEvent, ledgerPath } from "../doctor/ledger.js";
-import { diagnose, nameToWrite, scanSource } from "../doctor/scan.js";
+import { describeOffScale, diagnose, nameToWrite, scanSource } from "../doctor/scan.js";
 import { declarados, falaDaPrateleira, naPrateleira } from "../doctor/shelf.js";
 import { governs, ungovernedIn } from "../governed.js";
 import { readMode } from "../mode.js";
@@ -307,6 +307,8 @@ async function report(root, filePath, mode) {
      */
     const unnamed = d.findings.filter((f) => !nameToWrite(f));
     const phantoms = d.files.flatMap((f) => f.phantoms ?? []);
+    /** Fora da escala - ver `OffScale` (bateria, 28/09). Entra nas mesmas portas que os `phantoms`. */
+    const offScale = describeOffScale(d.files);
     // Every check leaves one line in the ledger - INCLUDING the clean ones,
     // because a fix is itself a write, so the clean re-check of a file that was
     // just flagged is the evidence the agent read the report and acted. Without
@@ -326,6 +328,7 @@ async function report(root, filePath, mode) {
         broke.length === 0 &&
         named.length === 0 &&
         phantoms.length === 0 &&
+        offScale.length === 0 &&
         unnamed.length === 0) {
         const hello = await greet(root, rel);
         return hello ? say(hello) : null;
@@ -362,7 +365,8 @@ async function report(root, filePath, mode) {
     if (composed.length === 0 &&
         broke.length > 0 &&
         named.length === 0 &&
-        phantoms.length === 0)
+        phantoms.length === 0 &&
+        offScale.length === 0)
         return say(broke.join("\n"));
     const sample = unnamed
         .slice(0, 3)
@@ -371,7 +375,8 @@ async function report(root, filePath, mode) {
     if (composed.length === 0 &&
         broke.length === 0 &&
         named.length === 0 &&
-        phantoms.length === 0)
+        phantoms.length === 0 &&
+        offScale.length === 0)
         return say([
             `${rel} - ${unnamed.length} value${unnamed.length === 1 ? "" : "s"} here ${unnamed.length === 1 ? "has" : "have"} no name in this system, and nothing to replace ${unnamed.length === 1 ? "it" : "them"} with: ${sample}${unnamed.length > 3 ? `, +${unnamed.length - 3} more` : ""}.`,
             "Do not invent a name - leave them, or ask the person what they would call it.",
@@ -419,6 +424,7 @@ async function report(root, filePath, mode) {
     if (phantoms.length > 0) {
         lines.push("", "Names this system does not declare. These look tokenized and apply nothing at all:", ...phantoms.slice(0, 20).map((p) => `  line ${p.line}  ${p.name}`), "", "Use a name the system has, or say which value you need and what you would call it. Do NOT invent a token.");
     }
+    lines.push(...offScale);
     return say(lines.join("\n"));
 }
 /**

package/dist/commands/mcp.js

@@ -10,7 +10,7 @@ import { declareForm } from "../doctor/declared-forms.js";
 import { describeTriage, triageLedger } from "../doctor/gap-triage.js";
 import { readEvents } from "../doctor/ledger.js";
 import { fileRequest } from "../doctor/requests.js";
-import { diagnose, nameToWrite, scanSource } from "../doctor/scan.js";
+import { describeOffScale, diagnose, nameToWrite, scanSource } from "../doctor/scan.js";
 import { nearestToken, normalizeValue, tokenFor } from "../doctor/tokens.js";
 import { ruleLine } from "../doctrine.js";
 import { fromCensus } from "../memory/observation.js";
@@ -437,7 +437,10 @@ async function checkFile(root, path) {
     if (phantoms.length > 0) {
         out.push("", "Names this system does not declare. These look tokenized and apply nothing at all:", ...phantoms);
     }
-    if (d.findings.length === 0 && phantoms.length === 0)
+    /** Fora da escala - ver `OffScale` (bateria, 28/09). */
+    const offScale = describeOffScale(d.files);
+    out.push(...offScale);
+    if (d.findings.length === 0 && phantoms.length === 0 && offScale.length === 0)
         out.push("", "Nothing to fix here.");
     return fromContract(out.join("\n"));
 }

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/doctor/scan.js

@@ -534,6 +534,7 @@ const DECLARES_ALL = /(?:^|[\s{;])(--[a-z0-9-]+)\s*:\s*([^;{}]+);/gi;
 function scanCore(file, source, table) {
     const findings = [];
     const phantoms = [];
+    const offScale = [];
     const ownDeclared = [];
     /**
      * OS NOMES SASS DELE, VISTOS PELA LENTE - rodada 10 do refinamento, 27/09. Num `.scss` lido por `scss-lens.ts`,
@@ -653,6 +654,8 @@ function scanCore(file, source, table) {
         }
         for (const name of findPhantoms(line, table))
             phantoms.push({ name, line: at });
+        for (const o of offScaleOf(file, line, table, setAside))
+            offScale.push({ ...o, line: at });
         // Depth at the START of this line, carried before the early return so a
         // blank line inside an <svg> cannot close the region by accident. The
         // per-match depth is recomputed below, because an icon is often written on
@@ -904,6 +907,7 @@ function scanCore(file, source, table) {
         findings,
         tokenUses,
         ...(phantoms.length > 0 ? { phantoms } : null),
+        ...(offScale.length > 0 ? { offScale } : null),
         ...(ownDeclared.length > 0 ? { ownDeclared } : null),
         ...(ownCandidates.size > 0
             ? {
@@ -1066,3 +1070,50 @@ context = []) {
         repeats,
     };
 }
+const MEDIA_WIDTH = /\b(?:(?:min|max)-)?width\s*(?::|[<>]=?)\s*([\d.]+)(px|rem|em)\b/g;
+const TOKEN_ARITHMETIC = /(?:\$\{\s*|:\s*)([A-Za-z_$][\w$]*(?:\.[\w$]+)*\.(?:[\w$]*(?:space|spacing|gap|radius|size|font)[\w$]*)(?:\.[\w$]+)*)\s*([+\-*/])\s*(\d+(?:\.\d+)?)\b/gi;
+const BORDER_WIDTH = /\bborder(?:-(?:top|right|bottom|left))?(?:-width)?\s*:\s*(\d+(?:\.\d+)?px)\b/g;
+const BORDER_NAME = /border|line|hairline|stroke|rule|divider|thin/i;
+/**
+ * FORA DA ESCALA, linha a linha - ver `OffScale`. `setAside` recebe o que foi medido e está certo: o ponto de quebra
+ * na escala é dito pelo nome ("breakpoint md (768px), on your system's scale"), para o silêncio ter motivo.
+ */
+function offScaleOf(file, line, table, setAside) {
+    const out = [];
+    const scale = table.breakpoints;
+    if (scale && scale.size > 0 && /^@media\b/.test(line)) {
+        for (const m of line.matchAll(MEDIA_WIDTH)) {
+            const n = Number(m[1]);
+            const px = m[2] === "px" ? n : n * table.rootPx;
+            let best = null;
+            for (const [name, bp] of scale)
+                if (!best || Math.abs(bp - px) < Math.abs(best[1] - px))
+                    best = [name, bp];
+            if (!best)
+                continue;
+            if (Math.abs(best[1] - px) < 0.5)
+                setAside(`breakpoint ${best[0]} (${best[1]}px), on your system's scale`);
+            else
+                out.push({ literal: `${m[1]}${m[2]}`, why: "breakpoint", nearest: `${best[0]} ${best[1]}px` });
+        }
+    }
+    if (/\.(t|j)sx?$/.test(file))
+        for (const m of line.matchAll(TOKEN_ARITHMETIC))
+            out.push({ literal: `${m[1]} ${m[2]} ${m[3]}`, why: "arithmetic" });
+    for (const m of line.matchAll(BORDER_WIDTH)) {
+        const v = normalizeValue(m[1], table.rootPx);
+        const theirs = [table.aliases.get(`spacing:${v}`), table.aliases.get(`radius:${v}`)].find((a) => a && BORDER_NAME.test(a.name));
+        if (theirs)
+            out.push({ literal: m[1], why: "named", nearest: `var(${theirs.name})` });
+    }
+    return out;
+}
+/** As linhas que o `check_file` e o fim do turno dizem sobre `OffScale` - uma frase por caso, a mesma nos dois. */
+export function describeOffScale(files) {
+    const rows = files.flatMap((f) => (f.offScale ?? []).map((o) => o.why === "breakpoint"
+        ? `  ${f.file}:${o.line}  ${o.literal} - a breakpoint off your system's widths; the nearest is ${o.nearest} (a media query cannot use a token, so match the width)`
+        : o.why === "arithmetic"
+            ? `  ${f.file}:${o.line}  ${o.literal} - arithmetic on a token lands between the steps; use a step the system has, or ask for one`
+            : `  ${f.file}:${o.line}  ${o.literal} - this repo calls it ${o.nearest}`));
+    return rows.length > 0 ? ["", "Off this system's scale:", ...rows] : [];
+}

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.
  *
@@ -490,7 +496,12 @@ export const COUNTED_DIFFERENTLY = "this run counts a value as named only when Y
  * passa a medir as regras da folha global que ele veste pelo `className`. Um hook anterior diz "no colour or spacing of
  * its own to measure" sobre o componente de um projeto que estiliza por classe global.
  */
-export const CHECKER_SINCE = "0.16.474";
+/**
+ * 0.16.474 -> 0.16.475 em 28/09, e o passo 1 dá **SIM** (a bateria, e a régua dele de 17:39-17:41): o fim do turno diz o
+ * que sai da escala - o ponto de quebra fora das larguras do sistema, a conta em cima de um token, e o `1px` de borda
+ * num projeto que tem nome para ele. Um hook anterior aprova os três.
+ */
+export const CHECKER_SINCE = "0.16.475";
 /**
  * A ÚLTIMA VERSÃO EM QUE OS LEITORES PASSARAM A PRODUZIR UM CENSO DIFERENTE.
  *

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.474",
+  "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": {