synthesisui 0.16.498 → 0.16.499

package/dist/commands/doctor.js

@@ -2,7 +2,8 @@ import { describeDistinct, describeDistinctVerbose, distinctValues } from "../do
 import { mkdir, readdir, readFile, writeFile } from "node:fs/promises";
 import { readStyleSheet, scssVariables } from "../doctor/scss-lens.js";
 import { THEME_SOURCE, tsTokenObjects, tsTokensAsVars } from "../doctor/ts-tokens-lens.js";
-import { dirname, join, relative, resolve } from "node:path";
+import { dirname, join, relative, resolve, sep } from "node:path";
+import { SET_PROPERTY } from "../doctor/broken-refs.js";
 import { describeIntent, intentOf, readProjectConfig } from "../config.js";
 import { describeFix, planFix, readerFor, writeFix, } from "../doctor/apply-fix.js";
 import { baselineOf, compareToBaseline, describeVerdict, githubAnnotations, sarifOf, } from "../doctor/ci-format.js";
@@ -777,6 +778,28 @@ export async function doctor(opts) {
     for await (const file of walkAll([root]))
         if (THEME_SOURCE.test(file) && !/\.d\.ts$/.test(file))
             tsObjects.push(...tsTokenObjects(await readFile(file, "utf8").catch(() => "")));
+    /**
+     * O QUE O JAVASCRIPT DELE MEDE, por pasta - ver `TokenTable.measuredInJs` (aula 01, 15/10). A reserva de
+     * `var(--sui-hero-name, clamp(...))` sai da conta só quando a pasta do CSS é a que grava a variável.
+     */
+    const measuredInJs = new Map();
+    for await (const file of walkAll([root])) {
+        if (!/\.(tsx|jsx|ts|js|mjs)$/.test(file) || /\.d\.ts$/.test(file))
+            continue;
+        const text = await readFile(file, "utf8").catch(() => "");
+        if (!text.includes("setProperty"))
+            continue;
+        const rel = relative(root, file);
+        const dir = rel.includes(sep) ? rel.slice(0, rel.lastIndexOf(sep)).split(sep).join("/") : "";
+        for (const m of text.matchAll(SET_PROPERTY)) {
+            const name = m[1].toLowerCase();
+            const dirs = measuredInJs.get(name) ?? [];
+            if (!dirs.includes(dir))
+                measuredInJs.set(name, [...dirs, dir]);
+        }
+    }
+    if (measuredInJs.size > 0)
+        table = { ...table, measuredInJs };
     const tally = emptyTally();
     const internalSpecs = await internalSpecifiers(root);
     for await (const file of scopes.length > 0

package/dist/doctor/broken-refs.js

@@ -40,7 +40,7 @@ const VAR_REF = /var\(\s*(--[a-zA-Z0-9_-]+)\s*(,)?/g;
  * Medido em quatro populações: 2 nomes no `codelevel-ui`, 0 no `packages/ui` do `frontend-hub`, 2 no
  * dashboard dele e 3 no nosso próprio app. Três de quatro escrevem variável por JS.
  */
-const SET_PROPERTY = /setProperty\(\s*['"`](--[a-zA-Z0-9_-]+)/g;
+export const SET_PROPERTY = /setProperty\(\s*['"`](--[a-zA-Z0-9_-]+)/g;
 /**
  * VARIABLES A HEADLESS LIBRARY SETS AT RUNTIME, which no stylesheet can declare.
  *

package/dist/doctor/scan.js

@@ -174,6 +174,15 @@ const SPACING_DECL = new RegExp(`(?:padding|margin|gap)(?:[A-Z][a-z]+|(?:-[a-z]+
 const SPACING_UTIL = /(?:\b[pmg](?:[trblxy])?-\[|gap-\[)([^\]]*)/g;
 /** A font stack written by hand rather than taken from the type scale. */
 const FONT = /font-family\s*:\s*([^;}\n]+)/g;
+/**
+ * O TAMANHO DE TEXTO ESCRITO À MÃO (defeito 3 da aula 01, 15/10) - `font-size: 14px`, `fontSize: "1rem"`,
+ * `[font-size:0.875rem]`. Não havia leitor nenhum: `distinct-values` contava esses valores como "by hand" e a cobertura,
+ * na mesma tela, não, então o `--fix` não tinha o que trocar com `--text-sm` declarado no projeto. A família é `font`,
+ * porque é a palavra que os nomes de escala de tipo carregam (`--text-sm`, `--ds-typography-...`).
+ */
+const FONT_SIZE_DECL = new RegExp(`font-?[Ss]ize${DECL_VALUE}`, "g");
+/** `text-[14px]` - o valor entre colchetes; `text-[#111]` não tem comprimento e não rende nada. */
+const FONT_SIZE_UTIL = /\btext-\[([^\]]*)/g;
 /**
  * MOTION, the family the scan never read (item 12, F3).
  *
@@ -351,6 +360,38 @@ function fallbackSpans(line, table) {
     }
     return out;
 }
+/** `var(--x, clamp(4rem, 17vw, 16rem))` - o nome e a reserva INTEIRA, com os parênteses de dentro contados. */
+function fallbacksOf(line) {
+    const out = [];
+    for (const m of line.matchAll(VAR_WITH_FALLBACK)) {
+        const start = (m.index ?? 0) + m[0].length;
+        let depth = 1;
+        let end = start;
+        for (; end < line.length && depth > 0; end++) {
+            if (line[end] === "(")
+                depth++;
+            else if (line[end] === ")")
+                depth--;
+        }
+        if (depth === 0)
+            out.push({ name: m[1].toLowerCase(), span: [start, end - 1] });
+    }
+    return out;
+}
+/**
+ * A RESERVA DE UM TAMANHO QUE O COMPONENTE MEDE SOZINHO - ver `TokenTable.measuredInJs` (aula 01, 15/10).
+ *
+ * Só quando um arquivo da MESMA pasta grava a variável: um `var(--qualquer, 18px)` que nada grava continua acusado, senão
+ * a reserva vira esconderijo de valor à mão.
+ */
+function measuredSpans(file, line, table) {
+    if (!table.measuredInJs?.size)
+        return [];
+    const dir = file.includes("/") ? file.slice(0, file.lastIndexOf("/")) : "";
+    return fallbacksOf(line)
+        .filter((f) => table.measuredInJs?.get(f.name)?.includes(dir))
+        .map((f) => f.span);
+}
 /**
  * ONDE A CASCATA DO APP NÃO ALCANÇA - e trocar por `var()` ali APAGA a cor.
  *
@@ -754,6 +795,8 @@ function scanCore(file, source, table) {
         const declared = declarationSpans(line, inTokenBlock && !opensTokenBlock);
         const inDeclaration = (at) => declared.some(([a, b]) => at >= a && at < b);
         const spans = fallbackSpans(line, table);
+        const measured = measuredSpans(file, line, table);
+        const inMeasured = (at) => measured.some(([a, b]) => at >= a && at <= b);
         const inFallback = (at) => spans.some(([a, b]) => at >= a && at <= b);
         /** Ver `markupTextSpans`: HTML montado como texto sai do alcance da folha do app. */
         const markup = markupTextSpans(file, line);
@@ -770,6 +813,10 @@ function scanCore(file, source, table) {
             /** A definição do token não é drift - ver `declarationSpans`. */
             if (col >= 0 && inDeclaration(col))
                 return;
+            if (col >= 0 && inMeasured(col)) {
+                setAside("the fallback of a size the component measures itself");
+                return;
+            }
             if (col >= 0 && inFallback(col)) {
                 setAside("a token's own fallback");
                 return;
@@ -800,14 +847,20 @@ function scanCore(file, source, table) {
             seen.add(key);
             // The kind is already known here, and without passing it the lookup
             // answers a `gap` with a radius token.
-            const match = tokenMatch(table, literal, kind);
+            /**
+             * O `_` DA CLASSE ARBITRÁRIA É O ESPAÇO DO TAILWIND (aula 01, 15/10). O achado guarda o valor como ESTÁ ESCRITO -
+             * `Anton,_sans-serif` -, porque é nessa grafia que o `--fix` acha a coluna para trocar; só a busca do nome lê o `_`
+             * como espaço, que é como o token declara a pilha.
+             */
+            const lookup = kind === "font" ? literal.replace(/_/g, " ") : literal;
+            const match = tokenMatch(table, lookup, kind);
             /**
              * O NOME DELE VEM DA MESMA CHAVE QUE A NOSSA FAMÍLIA VALIDOU - ver `theirNames`.
              *
              * A chave carrega o `kind` porque o valor sozinho não decide: `4px` é `--radius-xs` e
              * `--spacing` no vocabulário dele, e qual dos dois está certo depende de onde o literal está.
              */
-            const aliased = table.aliases.get(`${kind}:${normalizeValue(literal, table.rootPx)}`);
+            const aliased = table.aliases.get(`${kind}:${normalizeValue(lookup, table.rootPx)}`);
             /** O valor igual não basta - o papel também, ver `roleFits` (r13 e r14, 28/09). */
             const theirs = aliased && roleFits(propertyAt(line, col), aliased.name) ? aliased : undefined;
             /** A procedência do `token`, lida da tabela que o achou - ver `tokenIsTheirs`. */
@@ -896,8 +949,19 @@ function scanCore(file, source, table) {
             pushLengths("spacing", m);
         for (const m of line.matchAll(SPACING_DECL))
             pushLengths("spacing", m);
+        for (const m of line.matchAll(FONT_SIZE_UTIL))
+            pushLengths("font", m);
+        for (const m of line.matchAll(FONT_SIZE_DECL))
+            pushLengths("font", m);
         for (const m of line.matchAll(FONT)) {
-            const stack = m[1].trim();
+            /**
+             * A CLASSE ARBITRÁRIA DO TAILWIND TERMINA NO `]` (pedido da aula 01, 15/10). Em `[font-family:Inter,_sans-serif]
+             * font-medium ...` a regra de CSS - que só para em `;`, `}` ou fim de linha - engolia o resto da string de classes, e
+             * o `--verbose` mostrava `Inter,_sans-serif] font-medium [white-space:nowrap] ...` como uma família. Dentro do
+             * colchete o valor vai até o `]`; o `_` fica como está escrito, e quem o lê como espaço é a busca do nome, em `push`.
+             */
+            const inBrackets = line[(m.index ?? 0) - 1] === "[";
+            const stack = (inBrackets ? (m[1].split("]")[0] ?? "") : m[1]).trim();
             // A stack already reading from the system is the point, not a problem.
             if (stack.startsWith("var("))
                 continue;

package/dist/install-marks.js

@@ -338,7 +338,13 @@
  * novo grava no `.lock` os nomes que acabou de declarar, e o `template` e o `component` passam a escrevê-los - 51 nomes e 3
  * valores crus no hero, contra 0 e 54 antes. Uma pasta escrita antes traz a landing com os valores à mão.
  */
-export const MATERIALISER_SINCE = "0.16.498";
+/**
+ * 0.16.498 -> 0.16.499 em 15/10, e o passo 1 dá **SIM** (o defeito 1 da aula 01): o tamanho de texto pedido pelo PAPEL
+ * (`--ds-typography-role-sm-font-size`) passa a sair com o nome do degrau que vale o mesmo, quando o projeto o declara -
+ * `[font-size:var(--text-sm)]` em vez de `[font-size:0.875rem]`. Um componente escrito antes traz os tamanhos à mão. No
+ * mesmo PR, o `init` declara a largura da página (`--container-page`) e a seção a escreve pelo nome, não como `1440px`.
+ */
+export const MATERIALISER_SINCE = "0.16.499";
 /**
  * A ÚLTIMA VERSÃO EM QUE O QUE O HOOK RODA MUDOU.
  *
@@ -551,7 +557,12 @@ export const COUNTED_DIFFERENTLY = "this run counts a value as named only when Y
  * à que tem o nome dele. Medido no `codelevel`: 33 checagens do componente mais checado chegavam sem componente. Um
  * hook anterior continua mandando essas checagens sem dono, e elas não contam para o degrau.
  */
-export const CHECKER_SINCE = "0.16.487";
+/**
+ * 0.16.487 -> 0.16.499 em 15/10, e o passo 1 dá **SIM** (os defeitos 2 e 3 da aula 01): a checagem passa a acusar o tamanho
+ * de texto escrito à mão (`font-size`, `[font-size:X]`, `text-[X]`), e a família de fonte no colchete do Tailwind deixa de
+ * engolir o resto da linha. Um hook anterior diz "limpo" sobre um `[font-size:0.875rem]` com `--text-sm` declarado.
+ */
+export const CHECKER_SINCE = "0.16.499";
 /**
  * A ÚLTIMA VERSÃO EM QUE OS LEITORES PASSARAM A PRODUZIR UM CENSO DIFERENTE.
  *
@@ -1027,7 +1038,11 @@ export const CHECKER_SINCE = "0.16.487";
  * mostra quando duas folhas brigam, deixa de fora a folha que ninguém carrega, conta o pages router como rota e diz os
  * componentes em Vue, Svelte, Astro e Angular. Um censo lido antes guardou "names no token yet" onde havia tokens.
  */
-export const READER_SINCE = "0.16.485";
+/**
+ * 0.16.485 -> 0.16.499 em 15/10, e o passo 1 dá **SIM** (o defeito 3 da aula 01): a varredura lê o tamanho de texto escrito
+ * à mão, e o censo passa a gravá-lo. Um censo lido antes não tem os tamanhos na fila de trabalho dele.
+ */
+export const READER_SINCE = "0.16.499";
 /**
  * O QUE ESTÁ INSTALADO AQUI FICOU PARA TRÁS - e as DUAS condições que fazem isso ser verdade.
  *

package/dist/new-project-theme.js

@@ -278,6 +278,15 @@ async function readTheirs(root, slug) {
  * rodada: medido na prova de 27/09, 82 nomes viraram 38.
  */
 /** Os mesmos nomes de `systemNames`, com a variável nossa ao lado - o par que o `.lock` guarda. */
+/**
+ * A LARGURA DA PÁGINA - a régua em que as seções do catálogo param o conteúdo (defeito 4 da aula 01, 15/10).
+ *
+ * Ela não é token do sistema: é a régua do catálogo (`apps/web/src/lib/catalog/page-width.ts`, pedido dele em 14/10), e as
+ * seções a escrevem como `var(--ds-layout-page-width, 1440px)`. Aqui ela ganha o nome que o Tailwind v4 lê
+ * (`--container-*`), e o par vai para o `.lock`: a seção materializada escreve `var(--container-page)`, e a pessoa muda a
+ * largura num lugar só. O valor é o MESMO do catálogo - `page-width-twin.spec.ts` compara os dois.
+ */
+export const PAGE_WIDTH = { ours: "--ds-layout-page-width", theirs: "--container-page", value: "1440px" };
 function systemPairs(tokensCss, lookup = new Map()) {
     const { names, values } = tongueOf([], tokensCss);
     const out = [];
@@ -290,6 +299,8 @@ function systemPairs(tokensCss, lookup = new Map()) {
         if (value && !value.includes("var(--ds-"))
             out.push({ ours, theirs, value });
     }
+    if (out.length > 0)
+        out.push({ ...PAGE_WIDTH });
     return out;
 }
 function systemNames(tokensCss, lookup = new Map()) {
@@ -304,6 +315,8 @@ function systemNames(tokensCss, lookup = new Map()) {
         if (value && !value.includes("var(--ds-"))
             out.push([theirs, value]);
     }
+    if (out.length > 0)
+        out.push([PAGE_WIDTH.theirs, PAGE_WIDTH.value]);
     return out;
 }
 const same = (a, b) => a.trim().toLowerCase() === b.trim().toLowerCase();

package/dist/their-tongue.js

@@ -71,7 +71,8 @@ export function inTheirTongue(css, tongue, destination = "stylesheet") {
             inlined += 1;
             if (tongue.frozen.has(name))
                 froze += 1;
-            const font = destination === "stylesheet" ? viaNextFont(name, value, tongue) : null;
+            /** Nas duas saídas - a classe do Tailwind também (defeito 1 da aula 01, 15/10); `write` escapa o espaço. */
+            const font = viaNextFont(name, value, tongue);
             return write(font ?? value);
         }
         /**
@@ -155,6 +156,8 @@ artifacts) {
  */
 export function tongueOf(map, installedCss) {
     const names = new Map(map.map((p) => [p.ours, p.theirs]));
+    /** O valor que o `.lock` mediu para cada par - a folha reescrita já não o declara (`var(--text-sm)`). */
+    const pairValue = new Map(map.flatMap((p) => (p.value ? [[p.ours, p.value]] : [])));
     const values = new Map();
     /**
      * O que cada variável nossa declara na folha, antes de qualquer indireção ser seguida.
@@ -226,6 +229,32 @@ export function tongueOf(map, installedCss) {
         else
             values.set(ours, destination.value);
     }
+    /**
+     * O PAPEL DE TIPO FALA O NOME DO DEGRAU QUE VALE O MESMO (defeito 1 da aula 01, 15/10).
+     *
+     * O componente pede o tamanho pelo PAPEL (`--ds-typography-role-sm-font-size`), e o nome dele só existe para o DEGRAU da
+     * escala (`--ds-typography-scale-sm-font-size` -> `--text-sm`). O papel saía como `[font-size:0.875rem]` num projeto
+     * que declara `--text-sm: 0.875rem`, e o `doctor` acusava na hora um valor com nome esperando.
+     *
+     * Só quando o MESMO degrau (`role-sm` -> `scale-sm`) JÁ tem nome dele e vale exatamente o mesmo, na mesma propriedade -
+     * é a troca que o `--fix` faria depois. O papel nunca vira um degrau que o projeto não declara: sem nome, continua o valor.
+     */
+    for (const [ours, value] of values) {
+        const role = /^--ds-typography-role-(.+)-(font-size|line-height|letter-spacing)$/.exec(ours);
+        if (!role)
+            continue;
+        /** O MESMO degrau, nunca outro que por acaso vale o mesmo: `role-sm` -> `scale-sm` (prova de 15/10). */
+        const step = `--ds-typography-scale-${role[1]}-${role[2]}`;
+        const theirName = names.get(step);
+        if (!theirName)
+            continue;
+        const written = declared.get(step);
+        const stepValue = written?.startsWith("var(") ? pairValue.get(step) : written;
+        if (stepValue === undefined || stepValue.trim().toLowerCase() !== value.trim().toLowerCase())
+            continue;
+        names.set(ours, theirName);
+        values.delete(ours);
+    }
     /**
      * AS QUE MUDAM ENTRE ESQUEMAS E VIRAM LITERAL - o subconjunto que congela.
      *

package/package.json

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