synthesisui 0.16.504 → 0.16.506

package/dist/color-forms.js

@@ -37,7 +37,14 @@ const clamp255 = (n) => Math.max(0, Math.min(255, Math.round(n)));
 const hex2 = (n) => clamp255(n).toString(16).padStart(2, "0");
 /** `#f0a` -> `#ff00aa`, e `#ff00aa80` devolve o alfa junto. */
 function fromHex(raw) {
-    const h = raw.trim().replace(/^#/, "");
+    /**
+     * O `#` É OBRIGATÓRIO: sem ele, um peso de fonte (`300`) é hex de três dígitos e vira `#330000`. Medido em 22/10 no
+     * sistema lido de stripe.com: 30 variáveis `--hds-font-*-weight` entraram como cores escuras. Em CSS, hex sem `#`
+     * não é cor.
+     */
+    if (!raw.trim().startsWith("#"))
+        return null;
+    const h = raw.trim().slice(1);
     if (!/^[0-9a-f]{3,8}$/i.test(h))
         return null;
     const dup = (s) => s

package/dist/commands/read.js

@@ -5,10 +5,8 @@ import { existsSync, mkdirSync, readdirSync, readFileSync, rmSync, statSync, wri
 import { createRequire } from "node:module";
 import { homedir } from "node:os";
 import { join, relative } from "node:path";
-import { classify, pixelRatio } from "../reading/classify.js";
-import { PAGE_SCRIPT } from "../reading/page-script.js";
+import { readSite } from "../reading/read-page.js";
 import { headingsOf } from "../reading/reread.js";
-import { decodePng } from "../reading/png.js";
 import { PENDING, globalClassOf, loadRoleRules, globalStyles, moduleClassName, pxOf, readPending } from "../role-rules.js";
 import { agentsToMaintain } from "../agents-chosen.js";
 import { syncClaudeMd } from "../claude-md.js";
@@ -29,10 +27,7 @@ import { projectRootFrom } from "./hook.js";
  */
 const READER_VERSION = "1.58.2";
 const READER_DIR = join(homedir(), ".synthesisui", "reader");
-export const VIEWPORTS = [
-    ["desktop", 1440, 900],
-    ["celular", 390, 844],
-];
+export { VIEWPORTS, confirmByPixels } from "../reading/read-page.js";
 /** `download: false` é o fim do turno: ele nunca baixa nada sozinho - sem o leitor na máquina, não relê (E01, fase 3). */
 export function loadReader(say, download = true) {
     const override = process.env.SYNTHESISUI_PLAYWRIGHT;
@@ -93,26 +88,6 @@ export async function findServer(url, root, waitMs = 4000) {
     }
     return null;
 }
-/**
- * CADA CONTRASTE BAIXO CONFERIDO PELOS PIXELS: sem tinta é texto não pintado; acima do alvo, o DOM errou o fundo. A mesma
- * conferência na leitura e no fim do turno (E01 da fase 3) - duas cópias divergiriam no primeiro conserto.
- */
-export async function confirmByPixels(found, pageOf) {
-    const confirmed = [];
-    for (const f of found) {
-        const page = pageOf(f.sample);
-        let px = null;
-        if (page && f.sample.w >= 2 && f.sample.h >= 2) {
-            const png = await page.screenshot({ fullPage: true, clip: { x: Math.max(0, f.sample.x), y: Math.max(0, f.sample.y), width: f.sample.w, height: f.sample.h } }).catch(() => null);
-            const rgba = png ? decodePng(png) : null;
-            px = rgba ? pixelRatio(rgba) : null;
-        }
-        if (px !== null && (px < 1.2 || px >= f.alvo))
-            continue;
-        confirmed.push({ ...f, pixels: px });
-    }
-    return confirmed;
-}
 /** O maior tamanho entre as classes de um texto (o do desktop), sem o prefixo de tela - a mesma escolha da checagem. */
 function sizeClassOf(cls) {
     const toks = cls.match(/(?:[a-z0-9]+:)?text-(?:\[(?:clamp\([^\]\s]+\)|[\d.]+(?:rem|px|em))\]|xs|sm|base|lg|[2-9]?xl)(?=\s|$|\|)/g) ?? [];
@@ -372,23 +347,12 @@ export async function read(opts) {
     const routes = opts.routes?.length ? opts.routes : ["/"];
     const pw = loadReader(say);
     const browser = (await launch(pw, say));
-    const seen = [];
-    const pages = new Map();
+    const site = await readSite(browser, base, routes).catch(async (e) => {
+        await browser.close().catch(() => { });
+        throw e;
+    });
+    const { reading, seen } = site;
     try {
-        for (const rota of routes) {
-            for (const [disp, w, h] of VIEWPORTS) {
-                const ctx = await browser.newContext({ viewport: { width: w, height: h }, reducedMotion: "reduce" });
-                const page = await ctx.newPage();
-                await page.goto(new URL(rota, base).href, { waitUntil: "networkidle", timeout: 90_000 });
-                await page.waitForTimeout(800);
-                const textos = (await page.evaluate(PAGE_SCRIPT));
-                for (const t of textos)
-                    seen.push({ ...t, rota, disp });
-                pages.set(`${rota}|${disp}`, { page, ctx });
-            }
-        }
-        const reading = classify(seen);
-        reading.contraste = await confirmByPixels(reading.contraste, (t) => pages.get(`${t.rota}|${t.disp}`)?.page);
         const files = sources(root);
         const home = (t) => homeOf(root, files, t);
         const out = {
@@ -436,8 +400,7 @@ export async function read(opts) {
         say(`\n  Written to _synthesisui/reading.json. Nothing in your code changed.`);
     }
     finally {
-        for (const { ctx } of pages.values())
-            await ctx.close().catch(() => { });
+        await site.close();
         await browser.close().catch(() => { });
     }
 }

package/dist/install-marks.js

@@ -592,7 +592,7 @@ export const COUNTED_DIFFERENTLY = "this run counts a value as named only when Y
  * E (E02, no mesmo PR) guarda o tamanho de título sem papel para a próxima leitura perguntar, e cobra o papel que a pessoa
  * escolheu no "não" (`decided` no rules.json): um hook pinado antes diz "papel novo" uma vez e nunca cobra.
  */
-export const CHECKER_SINCE = "0.16.504";
+export const CHECKER_SINCE = "0.16.506";
 /**
  * A ÚLTIMA VERSÃO EM QUE OS LEITORES PASSARAM A PRODUZIR UM CENSO DIFERENTE.
  *

package/dist/reading/page-script.js

@@ -16,13 +16,19 @@ export const PAGE_SCRIPT = String.raw `(() => {
       const cs = getComputedStyle(e);
       if (cs.backgroundImage && cs.backgroundImage !== "none") img = img || /url\(|gradient/.test(cs.backgroundImage);
       const bg = parse(cs.backgroundColor); if (bg && bg.a > 0) { camadas.push(bg); if (bg.a >= 1) break; }
-      if (e.parentElement && [...e.parentElement.children].some((s) => s !== e && /^(VIDEO|IMG)$/.test(s.tagName) && getComputedStyle(s).position === "absolute")) img = true;
+      if (e.parentElement && [...e.parentElement.children].some((s) => s !== e && /^(VIDEO|IMG|CANVAS|svg)$/.test(s.tagName) && getComputedStyle(s).position === "absolute")) img = true;
     }
     let cor = { r: 255, g: 255, b: 255, a: 1 };
     for (let i = camadas.length - 1; i >= 0; i--) cor = mix(camadas[i], cor);
     return { cor, img };
   };
   const secao = (el) => { for (let e = el; e; e = e.parentElement) { if (/^(SECTION|HEADER|FOOTER|NAV|MAIN|ASIDE|ARTICLE|DIALOG)$/.test(e.tagName) || e.id) return e.tagName.toLowerCase() + (e.id ? "#" + e.id : ""); } return "body"; };
+  /* O QUE MISTURA O QUE ESTÁ EMBAIXO, medido uma vez: em stripe.com (22/10) o título é desenhado duas vezes, uma cópia
+     verde opaca e, por cima, a mesma frase com mix-blend-mode: hard-light - a tela mostra a mistura, e a cópia de baixo
+     sozinha nunca aparece. Um texto debaixo de qualquer um destes (ancestral ou camada por cima) tem pintura que o
+     estilo não conta. O desfoque de fundo (backdrop-filter) só conta POR CIMA do texto: no cartão de vidro que o
+     contém, ele desfoca o que está atrás do cartão, e o texto segue com a cor dele (medido em linear.app, 22/10). */
+  const misturadores = [...document.querySelectorAll("body *")].filter((e) => { const c = getComputedStyle(e); return c.mixBlendMode !== "normal" || (c.backdropFilter && c.backdropFilter !== "none") || c.webkitBackgroundClip === "text" || c.backgroundClip === "text"; }).slice(0, 200).map((e) => { const q = e.getBoundingClientRect(); const c = getComputedStyle(e); return { e, so: !(c.mixBlendMode !== "normal" || c.webkitBackgroundClip === "text" || c.backgroundClip === "text"), x: q.left + scrollX, y: q.top + scrollY, w: q.width, h: q.height }; });
   const textos = [];
   const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
   const vistos = new Set();
@@ -49,12 +55,23 @@ export const PAGE_SCRIPT = String.raw `(() => {
     }
     let op = 1; for (let e = el; e; e = e.parentElement) op *= Number(getComputedStyle(e).opacity);
     const cor = parse(cs.color); if (cor) cor.a *= op;
+    /* A PINTURA QUE O ESTILO NÃO CONTA (22/10, stripe.com): o título é rgba(0, 14, 255, .5) com mix-blend-mode:
+       hard-light sobre um degradê animado - a cor na tela é a mistura, e nenhum "color" a revela. Texto misturado,
+       recortado no fundo (background-clip: text), sem tinta própria ou sob filtro: só a foto diz o contraste. */
+    let mistura = false;
+    for (let e = el; e && e !== document.documentElement && !mistura; e = e.parentElement) {
+      const c = getComputedStyle(e);
+      if (c.filter && c.filter !== "none") mistura = true;
+    }
+    const cx = r.left + scrollX + r.width / 2, cy = r.top + scrollY + r.height / 2;
+    if (!mistura) mistura = misturadores.some((m) => (m.e === el || !el.contains(m.e)) && !(m.so && m.e.contains(el)) && cx >= m.x && cx <= m.x + m.w && cy >= m.y && cy <= m.y + m.h);
+    if (/^rgba\([^)]*,\s*0\)$|^transparent$/.test(cs.webkitTextFillColor || "")) mistura = true;
     const f = fundo(el);
     textos.push({
       texto: txt.slice(0, 60), tag: el.tagName.toLowerCase(),
       papel: (el.closest("h1,h2,h3,h4,h5,h6,button,a,label,th,figcaption,blockquote,input") || { tagName: "" }).tagName.toLowerCase() || null,
       tam: parseFloat(cs.fontSize), familia: cs.fontFamily.split(",")[0].replace(/["']/g, "").trim(), peso: Number(cs.fontWeight),
-      cor, fundo: f.cor, sobreImagem: f.img, decorativo: !!el.closest("[aria-hidden=true]"),
+      cor, fundo: f.cor, sobreImagem: f.img, mistura, decorativo: !!el.closest("[aria-hidden=true]"),
       cartao, corrido, giro, enfase, comp,
       cls: [el, ...(tit && tit !== el ? [tit] : []), el.parentElement].filter(Boolean).map((x) => x.getAttribute("class") || "").join(" | ").slice(0, 600),
       secao: secao(el), x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height,

package/dist/reading/read-page.js

@@ -0,0 +1,115 @@
+import { classify, pixelRatio, } from "./classify.js";
+import { PAGE_SCRIPT } from "./page-script.js";
+import { decodePng } from "./png.js";
+export const VIEWPORTS = [
+    ["desktop", 1440, 900],
+    ["celular", 390, 844],
+];
+/**
+ * CADA CONTRASTE BAIXO CONFERIDO PELOS PIXELS: sem tinta é texto não pintado; acima do alvo, o DOM errou o fundo. A mesma
+ * conferência na leitura e no fim do turno (E01 da fase 3) - duas cópias divergiriam no primeiro conserto.
+ */
+export async function confirmByPixels(found, pageOf) {
+    const confirmed = [];
+    for (const f of found) {
+        const page = pageOf(f.sample);
+        let px = null;
+        if (page && f.sample.w >= 2 && f.sample.h >= 2) {
+            const png = await page
+                .screenshot({
+                fullPage: true,
+                clip: {
+                    x: Math.max(0, f.sample.x),
+                    y: Math.max(0, f.sample.y),
+                    width: f.sample.w,
+                    height: f.sample.h,
+                },
+            })
+                .catch(() => null);
+            const rgba = png ? decodePng(png) : null;
+            px = rgba ? pixelRatio(rgba) : null;
+        }
+        if (px !== null && (px < 1.2 || px >= f.alvo))
+            continue;
+        confirmed.push({ ...f, pixels: px });
+    }
+    return confirmed;
+}
+/**
+ * Mede `routes` de `base` nas duas larguras, classifica e confere o contraste pelos pixels. Quem chama fecha (`close`).
+ * As duas larguras abrem AO MESMO TEMPO (medido em 21/10: resend.com levava 46 s em sequência), e os textos entram na
+ * ordem de `VIEWPORTS`, a mesma de antes - a classificação não muda.
+ */
+export async function readSite(browser, base, routes, opts = {}) {
+    const seen = [];
+    const pages = new Map();
+    const statuses = new Map();
+    const ctxs = [];
+    const close = async () => {
+        for (const ctx of ctxs)
+            await ctx.close().catch(() => { });
+    };
+    const open = async (rota, disp, w, h) => {
+        const ctx = await browser.newContext({
+            ...opts.context,
+            viewport: { width: w, height: h },
+            reducedMotion: "reduce",
+        });
+        ctxs.push(ctx);
+        if (opts.prepare)
+            await opts.prepare(ctx);
+        const page = await ctx.newPage();
+        const href = new URL(rota, base).href;
+        const res = opts.settleMs === undefined
+            ? await page.goto(href, { waitUntil: "networkidle", timeout: 90_000 })
+            : await page
+                .goto(href, { waitUntil: "networkidle", timeout: opts.settleMs })
+                .catch((e) => {
+                if (!/timeout/i.test(e.message))
+                    throw e;
+                return null;
+            });
+        const code = res?.status?.();
+        statuses.set(`${rota}|${disp}`, typeof code === "number" ? code : null);
+        await page.waitForTimeout(800);
+        const textos = (await page.evaluate(PAGE_SCRIPT));
+        pages.set(`${rota}|${disp}`, page);
+        return textos.map((t) => ({ ...t, rota, disp }));
+    };
+    try {
+        for (const rota of routes) {
+            const timed = async (disp, w, h) => {
+                const t = performance.now();
+                const textos = await open(rota, disp, w, h);
+                opts.onWidth?.(disp, Math.round(performance.now() - t));
+                return textos;
+            };
+            const byWidth = [];
+            if (opts.oneAtATime)
+                for (const [disp, w, h] of VIEWPORTS)
+                    byWidth.push(await timed(disp, w, h));
+            else
+                byWidth.push(...(await Promise.all(VIEWPORTS.map(([disp, w, h]) => timed(disp, w, h)))));
+            for (const textos of byWidth)
+                seen.push(...textos);
+        }
+        const reading = classify(seen);
+        /**
+         * Sem a foto, o par cuja pintura o estilo não conta (`mistura`) sai: o número dele seria da cor declarada, e não da
+         * que se vê. Medido em 22/10 em stripe.com - o título acusado a 2,39 : 1 era um azul translúcido misturado sobre um
+         * degradê, e o "depois" o pintou de verde. Com a foto (o CLI), quem decide é o pixel, como sempre.
+         */
+        if (opts.skipPixels)
+            reading.contraste = reading.contraste.filter((c) => c.razao >= 1.2 && !c.sample.mistura);
+        else {
+            const t = performance.now();
+            reading.contraste = await confirmByPixels(reading.contraste, (t) => pages.get(`${t.rota}|${t.disp}`));
+            opts.onWidth?.("pixels", Math.round(performance.now() - t));
+        }
+        return { reading, seen, pages, statuses, close };
+    }
+    catch (e) {
+        await close();
+        throw e;
+    }
+}

package/dist/reading/reread.js

@@ -1,7 +1,8 @@
 import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { mkdir, readFile, writeFile } from "node:fs/promises";
 import { basename, extname, join, relative, sep } from "node:path";
-import { confirmByPixels, declaredPort, findServer, homeOf, launch, loadReader, sources } from "../commands/read.js";
+import { declaredPort, findServer, homeOf, launch, loadReader, sources } from "../commands/read.js";
+import { confirmByPixels } from "./read-page.js";
 import { loadRoleRules } from "../role-rules.js";
 import { classify } from "./classify.js";
 import { PAGE_SCRIPT } from "./page-script.js";

package/package.json

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