synthesisui 0.16.376 → 0.16.378

package/dist/commands/doctor.js

@@ -890,7 +890,19 @@ export async function doctor(opts) {
          * "not drift" era a nossa palavra para o motivo, e ela não diz o motivo. As duas razões reais
          * cabem na linha: ou nenhum token poderia segurar aquele valor, ou ele já vem de um.
          */
-        console.log(body(`${plural(asideTotal, "value")} left out of the count - a token could never hold them, or they already come from one` +
+        /**
+         * E EM 05/09 ELAS VIRARAM TRÊS, senão esta linha volta a esconder metade.
+         *
+         * Os dois motivos novos não cabem em nenhum dos dois antigos: um token PODERIA segurar aquele
+         * valor, e é justamente por isso que escrevê-lo ali destrói. Uma cor dentro do e-mail que o app
+         * monta como texto, ou dentro de um hex escrito numa frase da página, não é pintada pela folha
+         * do app - `var()` não resolve num cliente de e-mail, e uma frase não é pintura nenhuma.
+         *
+         * Esta é a linha que o cliente lê SEM `--verbose`, e ela é o resumo inteiro para quem não pede
+         * detalhe. Sem a terceira metade, 61 valores no repositório dele saem da conta sob um motivo
+         * que não é o deles.
+         */
+        console.log(body(`${plural(asideTotal, "value")} left out of the count - a token could never hold them, they already come from one, or the page never paints them` +
             (skippedProjects.length > 0
                 ? `, and ${plural(skippedProjects.length, "nested project")} that speak their own systems`
                 : "") +

package/dist/doctor/apply-fix.js

@@ -155,7 +155,26 @@ export function planFix(d, read) {
          * É GERAL: toda folha declara token com valor literal - 149 no repositório dele, 180 no
          * frontend-hub.
          */
-        const declaring = /^\s*(--[a-z0-9-]+)\s*:/i.exec(current ?? "");
+        /**
+         * SEM ÂNCORA NO INÍCIO DA LINHA - e a âncora era um buraco de verdade.
+         *
+         * A primeira versão deste guard casava `^\s*--nome:`, o que só enxerga CSS formatado com uma
+         * declaração por linha. Numa folha minificada a linha inteira é
+         * `.pulse-page{--violet:#6755ff;--green:#79e39e;background:#080a10}` - a declaração não começa a
+         * linha, o guard não a via, e o ciclo passaria batido exatamente onde ninguém vai reler o diff.
+         *
+         * Medido no repositório do dono: `apps/landing/app/styles/pulse.css` é assim, e ele declara
+         * `--violet` e `--green` no meio de uma linha. Naquele repositório o ciclo não chega a nascer
+         * porque nenhum daqueles nomes coincide com um token do sistema - mas isso é sorte da população,
+         * não proteção.
+         *
+         * Percorre TODAS as declarações da linha e recusa a que se apontaria para si mesma. As outras
+         * seguem trocáveis: numa linha minificada, um `background:#fbfaf6` ao lado de um `--violet:...`
+         * continua sendo um uso legítimo.
+         */
+        const declaring = [
+            ...(current ?? "").matchAll(/(--[a-z0-9-]+)\s*:\s*([^;}]*)/gi),
+        ].find(([, , value]) => value?.includes(f.literal));
         if (declaring && declaring[1] === name) {
             skipped.push({
                 file: f.file,

package/dist/doctor/scan.js

@@ -269,6 +269,97 @@ function fallbackSpans(line, table) {
     }
     return out;
 }
+/**
+ * ONDE A CASCATA DO APP NÃO ALCANÇA - e trocar por `var()` ali APAGA a cor.
+ *
+ * O QUE ACONTECIA: `apps/web/lib/email.ts` monta o e-mail de login como TEXTO, e o `--fix` trocou
+ * `background:#6366f1` por `background:var(--color-brand-indigo)` no botão "Sign in". Aquele HTML é
+ * entregue a um cliente de e-mail, onde o `:root` do app não existe: a custom property não resolve,
+ * a declaração fica inválida, e o `background` volta para `transparent`. O botão de entrar some
+ * sobre um card quase preto - e é a PRIMEIRA tela que um usuário novo vê.
+ *
+ * É A MESMA FAMÍLIA DE `RENDERS_IMAGE`, que já recusa o arquivo que desenha para uma imagem pelo
+ * mesmo motivo declarado: "where CSS variables do not exist". Faltava a metade que sai como HTML.
+ *
+ * O SINAL É DA LINGUAGEM, NÃO DO REPOSITÓRIO: em `.ts`/`.tsx`/`.js`/`.jsx`, `style="..."` com uma
+ * declaração dentro NÃO é JSX - o React tipa `style` como objeto (`style={{}}`). Um atributo HTML
+ * escrito com aspas só existe ali dentro de uma string, isto é, marcação montada como texto: um
+ * e-mail, um PDF, um `srcdoc`, um sanitizador. Nenhum deles herda a folha do app.
+ *
+ * `.vue` e `.svelte` ficam FORA de propósito: neles `style="..."` é atributo de template real, o
+ * elemento é do app, e a cascata alcança. Recusar ali cegaria o produto para dois frameworks
+ * inteiros.
+ *
+ * MEDIDO em 05/09, em 4 escopos: `codelevel-monorepo` 7 linhas (`apps/web/lib/email.ts`, 2 delas já
+ * trocadas pelo `--fix` no repositório dele) · `frontend-hub/packages/ui` 3 linhas
+ * (`SignalUI/.../Sanitize.ts`, que remonta HTML de editor de texto) · `synthesisui-hub/apps/web`
+ * 18 linhas (`src/lib/email.ts` - o nosso próprio produto tem a forma) · `frontend-hub/apps/web-
+ * dashboard` 0. Três de quatro: a forma é geral, não é peculiaridade de um repositório.
+ */
+const HTML_STYLE_ATTR = /style\s*=\s*"([^"]*)"/g;
+/** Só onde `style="..."` não pode ser um elemento do app - ver `HTML_STYLE_ATTR`. */
+const ASSEMBLES_MARKUP = /\.(?:tsx?|jsx?|mjs|cjs)$/i;
+function markupTextSpans(file, line) {
+    if (!ASSEMBLES_MARKUP.test(file))
+        return [];
+    const out = [];
+    for (const m of line.matchAll(HTML_STYLE_ATTR)) {
+        if (!m[1].includes(":"))
+            continue;
+        const start = (m.index ?? 0) + m[0].indexOf('"') + 1;
+        out.push([start, start + m[1].length]);
+    }
+    return out;
+}
+/**
+ * O QUE A PÁGINA DIZ NÃO É O QUE ELA PINTA - e o `--fix` reescreveu uma frase.
+ *
+ * O QUE ACONTECIA: a landing dele demonstra a própria ferramenta num terminal falso, e a frase era
+ * `#6b6b78 is already --color-ink-500`. O scanner viu um hex, o sistema nomeia aquele valor, e a
+ * troca deixou `var(--color-ink-500) is already --color-ink-500` - uma tautologia, na frase que
+ * anuncia o que o produto faz. Não foi estilo mudado: foi CONTEÚDO.
+ *
+ * A LEI JÁ EXISTIA e esta é a borda dela - `fix` muda VALOR, nunca FORMA. Um literal em posição de
+ * conteúdo não é nem valor nem forma: é texto que uma pessoa lê.
+ *
+ * A REGIÃO É DERIVADA DA MARCAÇÃO, não de nome de arquivo: entre um `>` e o `<` seguinte está o que
+ * o elemento mostra. E dentro dela o literal ainda precisa estar CRU - `{x > 1 ? "#fff" : "#000"}`
+ * põe valores numa região que se parece com conteúdo, e as aspas são o que os separa de uma frase.
+ *
+ * UMA EXPRESSÃO NÃO É UMA FRASE, e esta borda custou um achado real. `<style>{`...`}</style>` é a
+ * folha que o app injeta de verdade: a cascata ALCANÇA, `var()` resolve, e o `120ms` escrito ali é
+ * deriva como qualquer outra. Medido em `apps/web/src/components/dashboard/live-specimen.tsx`, o
+ * guard sem esta borda derrubava 24 achados para 23. O sinal é da linguagem: uma chave logo depois
+ * do `>` abre uma expressão JSX, e o que vem dentro dela é código.
+ *
+ * `<style>html,body{...}</style>` DENTRO DE UMA STRING continua sendo conteúdo - lá a chave não
+ * encosta no `>`, e o documento é outro (um `srcdoc` de iframe, medido no `frontend-hub`), onde a
+ * folha do app também não chega.
+ *
+ * MEDIDO em 05/09, em 4 escopos: `codelevel-monorepo` 1 (a frase da landing) · `frontend-hub/apps/
+ * web-dashboard` 1 (o CSS do iframe) · `synthesisui-hub/apps/web` 14, entre elas a nossa PRÓPRIA
+ * demonstração na home, `<Line tone="ok">#2563eb -> --ds-color-semantic-info</Line>` · `frontend-
+ * hub/packages/ui` 0. O preço de errar é o produto reescrevendo a página de vendas de quem o
+ * instalou - inclusive a nossa.
+ */
+function contentSpans(line) {
+    const out = [];
+    let open = line.indexOf(">");
+    while (open !== -1) {
+        const close = line.indexOf("<", open + 1);
+        if (close === -1)
+            break;
+        if (close > open + 1 && line[open + 1] !== "{")
+            out.push([open + 1, close]);
+        open = line.indexOf(">", close + 1);
+    }
+    return out;
+}
+/** Um valor entre aspas é um valor, mesmo numa região de conteúdo. */
+function quotedAt(line, col, len) {
+    const q = /["'`]/;
+    return q.test(line[col - 1] ?? "") || q.test(line[col + len] ?? "");
+}
 /**
  * The line that DEFINES a token is not a line that drifted from it.
  *
@@ -403,6 +494,12 @@ function scanCore(file, source, table) {
         // shadow) is one decision, so it is reported once.
         const spans = fallbackSpans(line, table);
         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);
+        const inMarkup = (at) => markup.some(([a, b]) => at >= a && at <= b);
+        /** Ver `contentSpans`: entre `>` e `<` está o que o elemento MOSTRA. */
+        const content = contentSpans(line);
+        const inContent = (at) => content.some(([a, b]) => at >= a && at <= b);
         const seen = new Set();
         // NOT named `at`: that is the line number in this scope, and shadowing it
         // put column positions into the report as line numbers.
@@ -413,6 +510,14 @@ function scanCore(file, source, table) {
                 setAside("a token's own fallback");
                 return;
             }
+            if (col >= 0 && inMarkup(col)) {
+                setAside("markup assembled as text, where the app's variables do not reach");
+                return;
+            }
+            if (col >= 0 && inContent(col) && !quotedAt(line, col, literal.length)) {
+                setAside("text the page shows, not a value it paints");
+                return;
+            }
             const key = `${kind}:${literal}`;
             if (seen.has(key))
                 return;
@@ -475,7 +580,14 @@ function scanCore(file, source, table) {
             // A stack already reading from the system is the point, not a problem.
             if (stack.startsWith("var("))
                 continue;
-            push("font", stack);
+            /**
+             * A COLUNA VIAJA AQUI TAMBÉM - sem ela os guards por posição são cegos para uma família.
+             *
+             * `font` era o único `push` sem coluna, então um `font-family` dentro de um `style="..."` de
+             * e-mail passava pelos dois guards novos e pelo de fallback. Um valor não deixa de estar fora
+             * do alcance da folha por ser uma pilha de fontes.
+             */
+            push("font", stack, (m.index ?? 0) + m[0].indexOf(stack));
         }
         for (const m of line.matchAll(MOTION_PROP)) {
             const value = m[1];

package/dist/install-marks.js

@@ -242,7 +242,15 @@ export const MATERIALISER_SINCE = "0.16.370";
  * `line 12  oklch(...) -> --color-mint-500`. Um hook pinado antes desta versão aconselha OUTRA
  * coisa - nada -, que é a régua desta marca.
  */
-export const CHECKER_SINCE = "0.16.367";
+/**
+ * 0.16.367 -> 0.16.378 em 05/09: o hook parava de cobrar onde o conselho DESTRÓI. Ele lê `scanSource`
+ * direto, então um hook pinado antes olha `style="background:#6366f1"` dentro do e-mail de login que
+ * o app monta como texto e manda escrever `var(--color-brand-indigo)` - no cliente de e-mail a
+ * custom property não resolve, a declaração fica inválida e o botão "Sign in" perde o fundo. E olha
+ * `#6b6b78 is already --color-ink-500` numa frase da landing e manda tokenizar TEXTO. Um hook
+ * pinado antes desta versão aconselha OUTRA coisa, que é a régua desta marca.
+ */
+export const CHECKER_SINCE = "0.16.378";
 /**
  * A ÚLTIMA VERSÃO EM QUE OS LEITORES PASSARAM A PRODUZIR UM CENSO DIFERENTE.
  *
@@ -665,7 +673,14 @@ export const CHECKER_SINCE = "0.16.367";
  * `codelevel-ui` e 23 no `frontend-hub`, e ZERO no `observed` das três populações. Um censo tirado
  * antes disto não tem aqueles valores na régua, e só um `sync` os traz.
  */
-export const READER_SINCE = "0.16.367";
+/**
+ * 0.16.367 -> 0.16.378 em 05/09: o censo produzido MUDA. O `import` roda `scanSource` sobre cada
+ * arquivo e passa os relatórios por `diagnose`, então duas formas que nunca foram valor de design
+ * saem do `observed`: marcação montada como texto (o e-mail, o sanitizador de editor) e literal em
+ * posição de conteúdo. Um censo medido antes desta versão conta como deriva o que a folha do app
+ * nem alcança - e o número do cliente é a promessa.
+ */
+export const READER_SINCE = "0.16.378";
 /**
  * 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.376",
+  "version": "0.16.378",
   "description": "Bring SynthesisUI design systems into any project - tokens, typed components, whole pages and an agent-ready CLAUDE.md manifest.",
   "type": "module",
   "bin": {