synthesisui 0.16.506 → 0.16.507

package/dist/commands/fidelity.js

@@ -0,0 +1,114 @@
+import { existsSync, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { readToken, resolveRegistry } from "../config.js";
+import { parseDesignMd, readingOf, scoreOf, valuePoints, } from "../reading/fidelity-values.js";
+import { PAGE_CENSUS } from "../reading/page-census.js";
+import { HIDE_OVERLAYS, PAGE_LANGUAGE } from "../reading/page-language.js";
+import { readSite } from "../reading/read-page.js";
+import { findServer, launch, loadReader } from "./read.js";
+/**
+ * `synthesisui fidelity` - O PLACAR DE FIDELIDADE (jornada "o placar de fidelidade", E04, 23/10).
+ *
+ * A página que o agente está construindo, lida no dev server do projeto e comparada com a linguagem do site de origem -
+ * a leitura que viaja dentro do DESIGN.md. Os VALORES (tipo, cor, botão, escala, respiro, largura) se comparam aqui, na
+ * máquina da pessoa; a COMPOSIÇÃO (os padrões do site, vistos nas fotos da página) é julgada no site, que tem o modelo,
+ * e por isso pede login. Cada ponto que não bate vem com a instrução de conserto, para o agente seguir.
+ *
+ * Lê o projeto e o navegador; não escreve nada.
+ */
+export async function fidelity(opts) {
+    const root = resolve(opts.dir ?? ".");
+    const say = (s) => console.log(s);
+    const designPath = resolve(root, opts.design ?? "DESIGN.md");
+    if (!existsSync(designPath)) {
+        say(`No DESIGN.md here (${designPath}). Read a website on synthesisui.com, download its DESIGN.md into the project, and run this again.`);
+        process.exitCode = 1;
+        return;
+    }
+    const design = parseDesignMd(readFileSync(designPath, "utf8"));
+    if (!design.reading) {
+        say("This DESIGN.md has no reading inside, so there is nothing to compare against. Download it again from synthesisui.com (Start from a website) - the new ones carry the reading.");
+        process.exitCode = 1;
+        return;
+    }
+    const briefPath = resolve(root, opts.brief ?? "PRODUCT.md");
+    const brief = existsSync(briefPath) ? readFileSync(briefPath, "utf8") : "";
+    const base = await findServer(opts.url, root);
+    if (!base) {
+        say("No dev server answered (tried :3000, :3001, :5173, :4321). Start it - `npm run dev` - and run `synthesisui fidelity` again, or pass `--url`.");
+        process.exitCode = 1;
+        return;
+    }
+    const pw = loadReader(say);
+    const browser = pw ? await launch(pw, say) : null;
+    if (!browser) {
+        say("No browser to read the page with.");
+        process.exitCode = 1;
+        return;
+    }
+    const at = new URL(base);
+    const site = await readSite(browser, at.origin, [at.pathname || "/"], { skipPixels: true, settleMs: 15_000 });
+    const page = site.pages.get(`${at.pathname || "/"}|desktop`);
+    await page.evaluate(HIDE_OVERLAYS).catch(() => null);
+    const height = Number(await page.evaluate("document.documentElement.scrollHeight")) || 900;
+    const step = Math.max(900, Math.floor((height - 900) / 7));
+    const tiles = [];
+    for (let i = 0; i < 8; i++) {
+        await page.evaluate(`window.scrollTo(0, ${Math.min(i * step, Math.max(0, height - 900))})`);
+        await page.waitForTimeout(700);
+        tiles.push(`data:image/jpeg;base64,${(await page.screenshot({ type: "jpeg", quality: 60 })).toString("base64")}`);
+    }
+    await page.evaluate("window.scrollTo(0, 0)");
+    const language = (await page.evaluate(PAGE_LANGUAGE));
+    const census = (await page.evaluate(PAGE_CENSUS));
+    const mine = readingOf(language, census, { steps: site.reading.passos, sectionTitle: site.reading.tituloSecao });
+    await site.close();
+    await browser.close();
+    const values = valuePoints(design.reading, mine);
+    let composition = [];
+    let compositionNote = "";
+    const token = await readToken();
+    if (!design.patterns.length)
+        compositionNote = "This DESIGN.md lists no patterns, so composition was not judged.";
+    else if (!token)
+        compositionNote = "Composition was not judged: it runs on synthesisui.com and needs `synthesisui login`.";
+    else {
+        const res = await fetch(`${resolveRegistry(opts.registry)}/api/fidelity`, {
+            method: "POST",
+            headers: { "content-type": "application/json", Authorization: `Bearer ${token}` },
+            body: JSON.stringify({ patterns: design.patterns, tiles, brief }),
+        }).catch(() => null);
+        const got = res?.ok ? (await res.json()) : null;
+        if (got?.points)
+            composition = got.points;
+        else
+            compositionNote = `Composition was not judged: synthesisui.com answered ${res ? res.status : "nothing"}.`;
+    }
+    const score = scoreOf(values, composition);
+    if (opts.json) {
+        console.log(JSON.stringify({ source: design.source, page: base, score, values, composition, note: compositionNote || undefined }, null, 2));
+        return;
+    }
+    say(`Fidelity of ${base} to ${design.source ?? "the DESIGN.md"}`);
+    say(`  values       ${score.values} / ${score.valuesOf}`);
+    say(`  composition  ${composition.length ? `${score.composition} / ${score.compositionOf}` : "not judged"}`);
+    const off = values.filter((v) => v.state !== "igual");
+    if (off.length) {
+        say("\nValues that differ - fix these:");
+        for (const v of off)
+            say(`  - ${v.label}: ${v.state === "parcial" ? "close" : "different"} (source ${v.site}, page ${v.page}). ${v.fix}`);
+    }
+    const missing = composition.filter((c) => c.state === "parcial" || c.state === "ausente");
+    if (missing.length) {
+        say("\nPatterns of the source the page does not follow yet:");
+        for (const c of missing)
+            say(`  - ${c.name} (${c.state === "parcial" ? "partly" : "missing"}): ${c.fix || c.rule}`);
+    }
+    const out = composition.filter((c) => c.state === "fora");
+    if (out.length)
+        say(`\nNot counted - your brief rules them out: ${out.map((c) => `${c.name} (${c.evidence})`).join("; ")}.`);
+    if (compositionNote)
+        say(`\n${compositionNote}`);
+    if (!off.length && !missing.length && composition.length)
+        say("\nThe page follows every measured value and pattern of the source.");
+}

package/dist/index.js

@@ -7,6 +7,7 @@ import { absorb } from "./commands/absorb.js";
 import { add } from "./commands/add.js";
 import { adopt } from "./commands/adopt.js";
 import { confirm, read } from "./commands/read.js";
+import { fidelity } from "./commands/fidelity.js";
 import { advise } from "./commands/advise.js";
 import { align } from "./commands/align.js";
 import { autopilot } from "./commands/autopilot.js";
@@ -73,6 +74,9 @@ Usage - governance (deterministic, FREE):
                                            where one is built from another - then the values you repeat,
                                            with file and line. No account, no network, nothing written
   synthesisui read [--url <dev server>] [--routes /,/x]
+  synthesisui fidelity [--url <dev server>] [--design DESIGN.md] [--json]
+                                           score the page you are building against the website its DESIGN.md
+                                           was read from: every value and pattern that does not match yet, with the fix
   synthesisui read --confirm [answers.json]  the person's answers become the roles and breaks the check keeps
                                            read the page you already built and say the system it decided:
                                            roles, breaks, drift and contrast, with file and line
@@ -330,6 +334,18 @@ async function main() {
                 routes: typeof flags.routes === "string" ? flags.routes.split(",").map((r) => r.trim()).filter(Boolean) : undefined,
             });
             break;
+        case "fidelity":
+            // The page being built, read on the dev server and scored against the source site's language (the reading inside
+            // DESIGN.md). Values compare here; composition is judged on the site (needs login). Writes nothing.
+            await fidelity({
+                dir,
+                url: typeof flags.url === "string" ? flags.url : undefined,
+                design: typeof flags.design === "string" ? flags.design : undefined,
+                brief: typeof flags.brief === "string" ? flags.brief : undefined,
+                registry: typeof flags.registry === "string" ? flags.registry : undefined,
+                json: flags.json === true,
+            });
+            break;
         case "adopt":
             // Dry by default: `--write` is the only way anything lands on disk.
             await adopt({

package/dist/reading/fidelity-values.js

@@ -0,0 +1,192 @@
+/** Os papéis de texto nos nomes do impeccable, do maior para o menor - um por faixa, o que carrega mais texto nela. */
+export function namedType(type) {
+    const bands = [
+        ["hero", (r) => r.size >= 56],
+        ["display", (r) => r.size >= 40 && r.size < 56],
+        ["headline", (r) => r.size >= 26 && r.size < 40],
+        ["title", (r) => r.size >= 19 && r.size < 26],
+        ["body", (r) => r.size >= 15 && r.size < 19],
+        ["caption", (r) => r.size >= 13 && r.size < 15],
+        ["micro", (r) => r.size < 13],
+    ];
+    const out = [];
+    for (const [name, inBand] of bands) {
+        /** Um título de verdade (h1-h3) vence o texto grande que não é título - na Apple, o 48 px dos títulos de seção
+         *  perdia para os números de 40 px, que carregam mais texto (medido em 22/10). */
+        const heading = (r) => (/^h[1-3]$/.test(r.tag ?? "") ? 1 : 0);
+        const pick = type.filter(inBand).sort((a, b) => heading(b) - heading(a) || b.chars - a.chars)[0];
+        if (pick)
+            out.push([name, pick]);
+    }
+    return out;
+}
+export const sat = (hex) => {
+    if (!hex || !/^#[0-9a-f]{6}/i.test(hex))
+        return 0;
+    const c = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
+    const mx = Math.max(...c);
+    return mx === 0 ? 0 : (mx - Math.min(...c)) / mx;
+};
+/** Cada forma de componente com um nome que diz o que ela é: a cheia com cor é a ação; a contornada, a secundária. */
+export function namedComponents(list) {
+    const seen = new Map();
+    const name = (c) => {
+        const filled = c.bg && c.bg !== "transparent";
+        const pill = c.radius >= c.height / 2 - 1;
+        const base = filled && sat(c.bg) > 0.35
+            ? "button-primary"
+            : filled
+                ? pill
+                    ? "pill-quiet"
+                    : "button-quiet"
+                : c.border
+                    ? "button-outline"
+                    : pill
+                        ? "tab-pill"
+                        : "link-shape";
+        const n = (seen.get(base) ?? 0) + 1;
+        seen.set(base, n);
+        return n === 1 ? base : `${base}-${n}`;
+    };
+    /** Só o que tem texto e tamanho de botão: os ícones sem rótulo e os pontinhos de carrossel (8 px) não são componentes
+     *  que outro produto copia pela forma. */
+    return list
+        .filter((c) => c.samples.length > 0 && c.height >= 20)
+        .map((c) => ({ ...c, border: c.border === "transparent" ? null : c.border }))
+        .slice(0, 8)
+        .map((c) => [name(c), c]);
+}
+/** A cor que carrega mais texto nos h1 e h2 medidos - a cor dos títulos (ver o comentário em `designMdOf`). */
+/**
+ * A cor dos títulos que se leem NO FUNDO DA PÁGINA: os títulos brancos das faixas escuras do Stripe têm mais texto que os
+ * marinho, e venciam por volume (23/10). Com o fundo dado, só conta a cor que tem 3 : 1 ou mais contra ele.
+ */
+export function headingInkOf(language, ground) {
+    const lum = (h) => { const c = [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16) / 255).map((x) => (x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4)); return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]; };
+    const contrast = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((m, n) => n - m); return (x + 0.05) / (y + 0.05); };
+    const readable = (c) => !ground || !/^#[0-9a-f]{6}/i.test(ground) || contrast(c.slice(0, 7), ground.slice(0, 7)) >= 3;
+    const byColor = new Map();
+    for (const r of language.type)
+        if (/^h[12]$/.test(r.tag ?? "") && r.color && /^#[0-9a-f]{6}$/i.test(r.color) && readable(r.color))
+            byColor.set(r.color, (byColor.get(r.color) ?? 0) + r.chars);
+    return [...byColor.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] ?? null;
+}
+/**
+ * A LEITURA A PARTIR DA LINGUAGEM, igual dos dois lados: a escala são os tamanhos dos papéis de texto, e o título de
+ * seção é o h2 que carrega mais texto (ou, sem h2, o maior papel que se repete). Derivar dos dois lados do mesmo jeito é o
+ * que faz a comparação valer - o site e a página passam pela mesma régua.
+ */
+export function readingOf(language, census, 
+/** A escala e o título de seção da CLASSIFICAÇÃO (`classify`), quando há: no Stripe o título de seção é um <p> de 32 px,
+ *  e nenhuma regra por tag o acha - a classificação acha pelo tamanho que se repete. */
+measured) {
+    if (measured && measured.sectionTitle > 0)
+        return { language, census, steps: measured.steps, sectionTitle: measured.sectionTitle };
+    /* texto de verdade (60+ caracteres no papel) ou título - o miúdo de interface que se repete (11, 12, 13 px) não é escala */
+    const steps = [...new Set(language.type.filter((r) => (r.count >= 2 && r.chars >= 60) || /^h[1-3]$/.test(r.tag ?? "")).map((r) => Math.round(r.size)))].sort((a, b) => a - b);
+    /* o título de seção é o h2 que mais se REPETE (um por seção), e não o que tem mais texto */
+    const h2 = language.type.filter((r) => r.tag === "h2").sort((a, b) => b.count - a.count || b.chars - a.chars)[0];
+    const repeated = language.type.filter((r) => r.count >= 2).sort((a, b) => b.size - a.size)[0];
+    return { language, census, steps, sectionTitle: Math.round(h2?.size ?? repeated?.size ?? 0) };
+}
+const near = (a, b, ok, part) => {
+    if (a == null || b == null)
+        return null;
+    const d = Math.abs(a - b);
+    return d <= ok ? "igual" : d <= part ? "parcial" : "diferente";
+};
+const rel = (a, b, ok, part) => {
+    if (a == null || b == null || a === 0)
+        return null;
+    const d = Math.abs(a - b) / a;
+    return d <= ok ? "igual" : d <= part ? "parcial" : "diferente";
+};
+const rgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+const hexy = (h) => !!h && /^#[0-9a-f]{6}/i.test(h);
+const colorState = (a, b) => {
+    if (!hexy(a) || !hexy(b))
+        return null;
+    const [x, y] = [rgb(a.slice(0, 7)), rgb(b.slice(0, 7))];
+    const d = Math.sqrt(x.reduce((n, v, i) => n + (v - y[i]) ** 2, 0));
+    return d <= 6 ? "igual" : d <= 24 ? "parcial" : "diferente";
+};
+const lh = (r) => r?.lineHeight ? Math.round((r.lineHeight / r.size) * 100) / 100 : null;
+/** O papel de tipo do título de seção: o do tamanho medido, de preferência num h2. */
+function sectionRole(l, px) {
+    const same = l.type.filter((r) => Math.abs(r.size - px) <= 1);
+    return same.find((r) => r.tag === "h2") ?? same[0];
+}
+export function valuePoints(site, page) {
+    const out = [];
+    const push = (key, label, s, p, state, fix) => {
+        if (state)
+            out.push({ key, label, site: s, page: p, state, fix: state === "igual" ? "" : fix });
+    };
+    const sType = new Map(namedType(site.language.type));
+    const pType = new Map(namedType(page.language.type));
+    const sh = sType.get("hero"), ph = pType.get("hero");
+    if (sh && ph) {
+        const st = [near(sh.size, ph.size, 2, 8), sh.weight === ph.weight ? "igual" : "diferente", near(sh.letterSpacingEm, ph.letterSpacingEm, 0.006, 0.015)];
+        const worst = st.includes("diferente") ? "diferente" : st.includes("parcial") ? "parcial" : "igual";
+        push("hero", "Cover title", `${sh.size} px · ${sh.weight} · ${sh.letterSpacingEm}em`, `${ph.size} px · ${ph.weight} · ${ph.letterSpacingEm}em`, worst, `Set the cover title at ${sh.size}px, weight ${sh.weight}, letter-spacing ${sh.letterSpacingEm}em.`);
+    }
+    push("section-title", "Section title", `${site.sectionTitle} px`, `${page.sectionTitle} px`, near(site.sectionTitle, page.sectionTitle, 1, 4), `Section titles are ${site.sectionTitle}px.`);
+    const ss = sectionRole(site.language, site.sectionTitle), ps = sectionRole(page.language, page.sectionTitle);
+    push("title-leading", "Title line-height", `${lh(ss) ?? "-"}`, `${lh(ps) ?? "-"}`, near(lh(ss), lh(ps), 0.05, 0.12), `Section titles use a line-height of ${lh(ss)} (tight) - the page has ${lh(ps)}.`);
+    const sb = sType.get("body"), pb = pType.get("body");
+    if (sb && pb)
+        push("body", "Body text", `${sb.size} px · ${sb.weight} · line ${lh(sb)}`, `${pb.size} px · ${pb.weight} · line ${lh(pb)}`, near(sb.size, pb.size, 1, 2) === "igual" && sb.weight === pb.weight ? near(lh(sb), lh(pb), 0.08, 0.2) : "diferente", `Body text is ${sb.size}px, weight ${sb.weight}, line-height ${lh(sb)}.`);
+    const shi = headingInkOf(site.language, site.census.roles?.canvas ?? site.census.ground);
+    const phi = headingInkOf(page.language, page.census.roles?.canvas ?? page.census.ground);
+    push("heading-ink", "Title colour", shi ?? "-", phi ?? "-", colorState(shi, phi), `Titles are ${shi}, not ${phi}.`);
+    const sr = site.census.roles ?? {}, pr = page.census.roles ?? {};
+    push("ink", "Text colour", sr.foreground ?? "-", pr.foreground ?? "-", colorState(sr.foreground, pr.foreground), `Running text is ${sr.foreground}.`);
+    push("canvas", "Page ground", sr.canvas ?? site.census.ground, pr.canvas ?? page.census.ground, colorState(sr.canvas ?? site.census.ground, pr.canvas ?? page.census.ground), `The page ground is ${sr.canvas ?? site.census.ground}.`);
+    push("hairline", "Hairline", sr.border ?? "-", pr.border ?? "-", colorState(sr.border, pr.border), `Rules and borders are ${sr.border}.`);
+    const sbtn = namedComponents(site.language.components).find(([k]) => k === "button-primary")?.[1];
+    const pbtn = namedComponents(page.language.components).find(([k]) => k === "button-primary")?.[1];
+    if (sbtn && pbtn) {
+        const st = [colorState(sbtn.bg, pbtn.bg), near(sbtn.radius, pbtn.radius, 1, 4), near(sbtn.height, pbtn.height, 4, 10)];
+        const worst = st.includes("diferente") ? "diferente" : st.includes("parcial") || st.includes(null) ? "parcial" : "igual";
+        push("button", "Primary button", `${sbtn.bg} · corners ${sbtn.radius} · ${sbtn.height} px`, `${pbtn.bg} · corners ${pbtn.radius} · ${pbtn.height} px`, worst, `The primary button is ${sbtn.bg}, ${sbtn.radius}px corners, ${sbtn.height}px tall.`);
+    }
+    const missing = site.steps.filter((x) => !page.steps.some((y) => Math.abs(x - y) <= 1));
+    const share = site.steps.length ? 1 - missing.length / site.steps.length : 1;
+    push("scale", "Type scale", site.steps.join(" · "), page.steps.join(" · "), share >= 0.9 ? "igual" : share >= 0.6 ? "parcial" : "diferente", `The type scale also uses ${missing.join(", ")} px.`);
+    const srh = site.language.rhythm, prh = page.language.rhythm;
+    push("section-gap", "Space between sections", `${srh?.sectionGap ?? "-"} px`, `${prh?.sectionGap ?? "-"} px`, rel(srh?.sectionGap, prh?.sectionGap, 0.2, 0.4), `Sections are about ${srh?.sectionGap}px apart (the page has ${prh?.sectionGap}px).`);
+    push("inner-gap", "Space inside sections", `${srh?.innerGap ?? "-"} px`, `${prh?.innerGap ?? "-"} px`, rel(srh?.innerGap, prh?.innerGap, 0.25, 0.5), `Blocks inside a section sit about ${srh?.innerGap}px apart (the page has ${prh?.innerGap}px).`);
+    push("content-width", "Content width", `${srh?.contentWidth ?? "-"} px`, `${prh?.contentWidth ?? "-"} px`, rel(srh?.contentWidth, prh?.contentWidth, 0.05, 0.12), `Content sits in a ${srh?.contentWidth}px column.`);
+    return out;
+}
+export function scoreOf(values, composition) {
+    const v = values.reduce((n, p) => n + (p.state === "igual" ? 1 : p.state === "parcial" ? 0.5 : 0), 0);
+    const allowed = composition.filter((p) => p.state !== "fora");
+    const c = allowed.reduce((n, p) => n + (p.state === "presente" ? 1 : p.state === "parcial" ? 0.5 : 0), 0);
+    return { values: v, valuesOf: values.length, composition: c, compositionOf: allowed.length };
+}
+/**
+ * A LEITURA DO SITE VIAJA DENTRO DO DESIGN.md (E04, 23/10), num comentário que o impeccable ignora. O placar compara a
+ * página do projeto com ELA - sem reler o site a cada chamada (uns 90 s) e com a lista de padrões FIXA: relidos a cada
+ * vez, os padrões mudavam, e a nota da mesma página foi de 3/7 a 0,5/10 (medido em 23/10).
+ */
+/** A marca que o site escreve no DESIGN.md (`embedReading`, em apps/web/src/lib/engine/design-md.ts). */
+const MARK = "synthesisui:reading v1";
+export function parseDesignMd(md) {
+    let reading = null;
+    let source = null;
+    const m = md.match(new RegExp(`<!-- ${MARK} ([A-Za-z0-9+/=]+) -->`));
+    if (m) {
+        try {
+            const got = JSON.parse(Buffer.from(m[1], "base64").toString("utf8"));
+            source = got.source;
+            reading = readingOf(got.language, got.census, got.measured);
+        }
+        catch {
+            reading = null;
+        }
+    }
+    const section = md.split(/^## Patterns\s*$/m)[1]?.split(/^## /m)[0] ?? "";
+    const patterns = [...section.matchAll(/^- \*\*(.+?)\*\* - (.+)$/gm)].map((x) => ({ name: x[1].trim(), rule: x[2].trim() }));
+    return { source, reading, patterns };
+}

package/dist/reading/page-census.js

@@ -0,0 +1,131 @@
+/**
+ * O CENSO DE UMA PÁGINA RENDERIZADA - o que ela pinta, além do que ela escreve (jornada "a porta por URL", E05, 21/10).
+ *
+ * A leitura (`page-script.ts`) mede o TEXTO: tamanho, papel, contraste. Um design system precisa também das cores, das
+ * famílias de fonte, dos cantos e dos espaços - e uma URL pública não tem código para o `import` contar. Então se conta
+ * o que o navegador calculou: cada valor, quantas vezes ele aparece nos elementos visíveis. É a mesma forma do censo
+ * do `import` (`kind`, `value`, `count`), para o site levar ao mesmo caminho que faz nascer um sistema de um projeto.
+ *
+ * `declared` são as variáveis CSS que a raiz da página declara (`--brand: #5e6ad2`): o nome é o sinal mais forte que o
+ * `import` sabe ler. `scheme` é a face, pelo fundo da página.
+ *
+ * Roda no navegador, como texto: não importa nada. Morava só no site (21/10: o CLI não o chamava, e `reachable.spec.ts`
+ * reprova export que o pacote não usa); desde 23/10 o CLI o chama no placar de fidelidade (`fidelity`), que lê a página
+ * do projeto no localhost com a mesma régua com que o site leu o site de origem.
+ */
+export const PAGE_CENSUS = `(() => {
+  const counts = new Map();
+  const add = (kind, value) => {
+    if (!value) return;
+    const k = kind + "|" + value;
+    counts.set(k, (counts.get(k) || 0) + 1);
+  };
+  const hex = (c) => {
+    const m = c && c.match(/rgba?\\(([\\d.]+),\\s*([\\d.]+),\\s*([\\d.]+)(?:,\\s*([\\d.]+))?\\)/);
+    if (!m) return null;
+    const a = m[4] === undefined ? 1 : Number(m[4]);
+    if (a === 0) return null;
+    const h = (n) => Math.round(Number(n)).toString(16).padStart(2, "0");
+    return "#" + h(m[1]) + h(m[2]) + h(m[3]) + (a < 1 ? h(a * 255) : "");
+  };
+  const px = (v) => (v && v !== "0px" && /^[\\d.]+px$/.test(v) ? Math.round(parseFloat(v)) + "px" : null);
+  let scanned = 0;
+  for (const el of document.querySelectorAll("body *")) {
+    const r = el.getBoundingClientRect();
+    if (r.width < 1 || r.height < 1) continue;
+    const cs = getComputedStyle(el);
+    if (cs.visibility === "hidden" || cs.display === "none" || Number(cs.opacity) === 0) continue;
+    scanned++;
+    const ownText = [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim());
+    if (ownText) {
+      add("color", hex(cs.color));
+      add("font", cs.fontFamily.split(",")[0].replace(/["']/g, "").trim());
+    }
+    add("color", hex(cs.backgroundColor));
+    if (parseFloat(cs.borderTopWidth) > 0) add("color", hex(cs.borderTopColor));
+    add("radius", px(cs.borderTopLeftRadius));
+    for (const p of ["paddingTop", "paddingLeft", "rowGap", "columnGap"]) add("spacing", px(cs[p]));
+  }
+  const declared = {};
+  const root = getComputedStyle(document.documentElement);
+  for (let i = 0; i < root.length && Object.keys(declared).length < 400; i++) {
+    const name = root[i];
+    if (name.startsWith("--")) {
+      const v = root.getPropertyValue(name).trim();
+      if (v && v.length < 120) declared[name] = v;
+    }
+  }
+  const ground = [document.body, document.documentElement].map((e) => hex(getComputedStyle(e).backgroundColor)).find(Boolean) || "#ffffff";
+  const [R, G, B] = [1, 3, 5].map((i) => parseInt(ground.slice(i, i + 2), 16) / 255);
+  const scheme = 0.2126 * R + 0.7152 * G + 0.0722 * B < 0.5 ? "dark" : "light";
+  /**
+   * OS PAPÉIS QUE A PÁGINA MOSTRA, contados por uso e não por nome (21/10, depois do juízo dele no sistema da Apple: o
+   * papel "muted" tinha saído a cor de um iPhone, "finish-iphoneduo-night-sky", e o "accent" o fundo do menu, pelo
+   * nome do token). Cada papel é o valor que mais aparece no lugar que o define; o que a página não mostra fica de fora.
+   */
+  const tally = () => new Map();
+  const bump = (m, k, n = 1) => { if (k) m.set(k, (m.get(k) || 0) + n); };
+  const top = (m, skip = []) => [...m.entries()].filter(([k]) => !skip.includes(k)).sort((a, b) => b[1] - a[1])[0]?.[0] || null;
+  const bodyText = tally(), links = tally(), borders = tally(), surfaces = tally(), headFam = tally(), bodyFam = tally(), monoFam = tally();
+  const vw = innerWidth;
+  for (const el of document.querySelectorAll("body *")) {
+    const r = el.getBoundingClientRect();
+    if (r.width < 1 || r.height < 1) continue;
+    const cs = getComputedStyle(el);
+    if (cs.visibility === "hidden" || cs.display === "none") continue;
+    const own = [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent.trim()).join(" ");
+    const fam = cs.fontFamily.split(",")[0].replace(/["']/g, "").trim();
+    const tag = el.tagName.toLowerCase();
+    if (own.length > 2) {
+      const len = own.length;
+      if (/^h[1-3]$/.test(tag)) bump(headFam, fam, len);
+      else if (tag === "code" || tag === "pre" || tag === "kbd") bump(monoFam, fam, len);
+      else bump(bodyFam, fam, len);
+      if (tag === "a" || el.closest("a")) bump(links, hex(cs.color), len);
+      else if (!/^h[1-6]$/.test(tag) && parseFloat(cs.fontSize) >= 13) bump(bodyText, hex(cs.color), len);
+    }
+    if (parseFloat(cs.borderTopWidth) > 0 && parseFloat(cs.borderTopWidth) <= 2) bump(borders, hex(cs.borderTopColor), Math.round(r.width));
+    const bg = hex(cs.backgroundColor);
+    if (bg && r.width > vw * 0.25 && r.height > 60) bump(surfaces, bg, Math.round((r.width * r.height) / 1000));
+  }
+  /** Saturação (0 a 1) e contraste contra o chão - o que separa um cinza de texto de uma cor de marca. */
+  const rgb = (h) => [1, 3, 5].map((i) => parseInt(h.slice(i, i + 2), 16) / 255);
+  const sat = (h) => { const c = rgb(h); const mx = Math.max(...c), mn = Math.min(...c); return mx === 0 ? 0 : (mx - mn) / mx; };
+  const lum = (h) => { const c = rgb(h).map((x) => (x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4)); return 0.2126 * c[0] + 0.7152 * c[1] + 0.0722 * c[2]; };
+  const contrast = (a, b) => { const [x, y] = [lum(a), lum(b)].sort((m, n) => n - m); return (x + 0.05) / (y + 0.05); };
+  const opaque = (h) => h && h.length === 7;
+  const pick = (m, ok) => [...m.entries()].filter(([k]) => opaque(k) && ok(k)).sort((a, b) => b[1] - a[1])[0]?.[0] || null;
+  /** O texto que se lê sobre o chão: um branco sobre uma faixa escura não é o texto da página. */
+  const foreground = pick(bodyText, (k) => contrast(k, ground) >= 4.5);
+  /** O secundário é o texto MAIS CLARO que o principal, e não só outro: em stripe.com (22/10) o principal é #64748d e o
+   *  secundário saiu #000000, o preto dos títulos - mais escuro que o texto que ele devia acompanhar. */
+  const muted = pick(bodyText, (k) => k !== foreground && contrast(k, ground) >= 2.5 && sat(k) < 0.25 && (!foreground || contrast(k, ground) < contrast(foreground, ground)));
+  /** A cor da marca: o link com cor, e não o preto do menu. */
+  const primary = pick(links, (k) => sat(k) >= 0.35 && contrast(k, ground) >= 2) || pick(surfaces, (k) => sat(k) >= 0.35);
+  /** A borda é o traço neutro que separa, não o contorno azul de um botão - e que SE VÊ no chão (pelo menos 1,1 : 1).
+   *  Medido em 22/10 no parque aquático: a borda mais usada era o branco que contorna os blocos azuis, e no chão da
+   *  página (#eff7ff, 1,08 : 1) todo traço do sistema ficou invisível. */
+  const border = pick(borders, (k) => sat(k) < 0.15 && k !== ground && contrast(k, ground) >= 1.1 && contrast(k, ground) < 3);
+  const surface = pick(surfaces, (k) => k !== ground && contrast(k, ground) < 1.25);
+  const roles = {
+    canvas: ground,
+    ...(foreground ? { foreground } : {}),
+    ...(muted ? { muted } : {}),
+    ...(primary ? { primary } : {}),
+    ...(border ? { border } : {}),
+    ...(surface ? { surface } : {}),
+  };
+  for (const v of Object.values(roles)) if (v && !counts.has("color|" + v)) counts.set("color|" + v, 1);
+  const fonts = {
+    ...(top(headFam) ? { display: top(headFam) } : {}),
+    ...(top(bodyFam) ? { body: top(bodyFam) } : {}),
+    ...(top(monoFam) ? { mono: top(monoFam) } : {}),
+  };
+  const observed = [...counts.entries()]
+    .map(([k, count]) => {
+      const i = k.indexOf("|");
+      return { kind: k.slice(0, i), value: k.slice(i + 1), count };
+    })
+    .sort((a, b) => b.count - a.count);
+  return { declared, observed, scanned, scheme, ground, roles, fonts };
+})()`;

package/dist/reading/page-language.js

@@ -0,0 +1,154 @@
+/**
+ * A LINGUAGEM MEDIDA DE UMA PÁGINA - o refinamento que o censo não pega (jornada "a página vira um DESIGN.md", E03, 22/10).
+ *
+ * O censo conta valores (cores, cantos, fontes). Isto mede como a página os USA, que é onde mora o refinamento - o que
+ * ele apontou na Apple: "a textura das fontes, o refinamento (...) o respiro, o posicionamento (...) os botões":
+ *
+ *   type        cada papel de texto: tamanho, peso, altura de linha, espaço entre letras, família, cor e quantas vezes
+ *   components  cada forma de botão, pílula ou aba, agrupada pela assinatura (fundo, texto, canto, padding, altura)
+ *   bars        as barras fixas: altura, fundo, desfoque, canto
+ *   sections    o respiro vertical das seções e o fundo de cada uma
+ *   cards       os blocos de canto grande: canto, fundo, sombra, padding
+ *
+ * Tudo é estilo calculado pelo navegador - nada aqui é palpite. O que só a composição mostra (o carrossel que corta, as
+ * abas) é a outra metade (E04). Roda no navegador, como texto.
+ */
+export const PAGE_LANGUAGE = `(() => {
+  /* Sem olhar a opacidade: páginas como a da Apple revelam o texto ao rolar (opacity 0 até lá) - medido em 22/10, os
+     títulos de 48 px sumiam da medida. O que está no layout conta. */
+  const vis = (el) => { const r = el.getBoundingClientRect(); const cs = getComputedStyle(el); return r.width > 0 && r.height > 0 && cs.visibility !== "hidden" && cs.display !== "none"; };
+  const hex = (c) => {
+    const m = c && c.match(/rgba?\\(([\\d.]+),\\s*([\\d.]+),\\s*([\\d.]+)(?:,\\s*([\\d.]+))?\\)/);
+    if (!m) return null;
+    const a = m[4] === undefined ? 1 : Number(m[4]);
+    if (a === 0) return "transparent";
+    const h = (n) => Math.round(Number(n)).toString(16).padStart(2, "0");
+    return "#" + h(m[1]) + h(m[2]) + h(m[3]) + (a < 1 ? h(a * 255) : "");
+  };
+  const px = (v) => Math.round(parseFloat(v) * 100) / 100;
+  const ls = (cs) => (cs.letterSpacing === "normal" ? 0 : px(cs.letterSpacing));
+  const lh = (cs) => (cs.lineHeight === "normal" ? null : px(cs.lineHeight));
+  const fam = (cs) => cs.fontFamily.split(",")[0].replace(/["']/g, "").trim();
+  const own = (el) => [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent.trim()).join(" ").trim();
+
+  /* A COR QUE O ESTILO NÃO CONTA (22/10, stripe.com): o título é desenhado duas vezes, a cópia de baixo verde opaca e a
+     de cima misturada (mix-blend-mode) - a tela mostra a mistura. O texto debaixo de uma camada que mistura (ou dentro
+     dela) conta no tamanho do papel, mas não na cor dele: a mesma regra da leitura (page-script.ts, "mistura"). Uma camada
+     POR CIMA só conta se pinta algo (texto, fundo, imagem): a "stats-section__border" do Stripe é multiply e cobre a
+     seção inteira, mas só desenha as linhas - o título debaixo dela segue com a cor dele. */
+  const misturadores = [...document.querySelectorAll("body *")].filter((e) => { const c = getComputedStyle(e); return c.mixBlendMode !== "normal" || c.webkitBackgroundClip === "text" || c.backgroundClip === "text"; }).slice(0, 200).map((e) => { const q = e.getBoundingClientRect(); const c = getComputedStyle(e); return { e, pinta: !!(e.innerText || "").trim() || !/rgba\\(0, 0, 0, 0\\)|transparent/.test(c.backgroundColor) || c.backgroundImage !== "none", x: q.left, y: q.top, w: q.width, h: q.height }; });
+  const misturado = (el) => { const q = el.getBoundingClientRect(); const cx = q.left + q.width / 2, cy = q.top + q.height / 2; return misturadores.some((m) => (m.e === el || !el.contains(m.e)) && (m.pinta || m.e.contains(el)) && cx >= m.x && cx <= m.x + m.w && cy >= m.y && cy <= m.y + m.h); };
+
+  /* TIPOGRAFIA: um papel é a combinação tamanho + peso + família; o que ele faz vem da tag mais comum nele. */
+  const roles = new Map();
+  for (const el of document.querySelectorAll("body *")) {
+    const t = own(el);
+    if (t.length < 2 || !vis(el)) continue;
+    const cs = getComputedStyle(el);
+    const key = [px(cs.fontSize), cs.fontWeight, fam(cs), ls(cs)].join("|");
+    const r = roles.get(key) || { size: px(cs.fontSize), weight: Number(cs.fontWeight), family: fam(cs), letterSpacing: ls(cs), lineHeights: {}, colors: {}, tags: {}, count: 0, chars: 0, sample: t.slice(0, 60) };
+    r.count++; r.chars += t.length;
+    const l = lh(cs); if (l !== null) r.lineHeights[l] = (r.lineHeights[l] || 0) + t.length;
+    if (!misturado(el)) { const c = hex(cs.color); r.colors[c] = (r.colors[c] || 0) + t.length; }
+    /* a tag do TÍTULO que contém o texto, quando há: no Stripe o texto dos títulos de seção mora num span dentro do h2, e
+       o papel de 32 px saía como "span" (23/10) */
+    const tag = (el.closest("h1, h2, h3, h4") || el).tagName.toLowerCase(); r.tags[tag] = (r.tags[tag] || 0) + 1;
+    roles.set(key, r);
+  }
+  const top = (o) => Object.entries(o).sort((a, b) => b[1] - a[1])[0]?.[0] || null;
+  const type = [...roles.values()]
+    .filter((r) => r.count >= 2 || /^h[1-3]$/.test(top(r.tags)))
+    /* a altura de linha e a cor são as que carregam mais texto naquele papel, e não as do primeiro elemento */
+    .map((r) => ({ ...r, color: top(r.colors), tag: top(r.tags), lineHeight: top(r.lineHeights) === null ? null : Number(top(r.lineHeights)), letterSpacingEm: r.size ? Math.round((r.letterSpacing / r.size) * 1000) / 1000 : 0, colors: undefined, tags: undefined, lineHeights: undefined }))
+    .sort((a, b) => b.size - a.size || b.chars - a.chars)
+    .slice(0, 20);
+
+  /* COMPONENTES: o que se clica e tem forma (fundo, borda ou canto) - agrupado pela assinatura. */
+  const comps = new Map();
+  for (const el of document.querySelectorAll("a, button, [role=tab], [role=button], input[type=submit]")) {
+    if (!vis(el)) continue;
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    const bg = hex(cs.backgroundColor);
+    const border = parseFloat(cs.borderTopWidth) > 0 ? hex(cs.borderTopColor) : null;
+    const radius = px(cs.borderTopLeftRadius);
+    if ((bg === "transparent" || !bg) && !border && radius < 8) continue;
+    if (r.height > 80 || r.width > 600) continue;
+    const text = (el.innerText || el.value || "").trim().replace(/\\s+/g, " ");
+    const sig = { bg, color: hex(cs.color), border, radius: Math.min(radius, 999), padX: px(cs.paddingLeft), padY: px(cs.paddingTop), height: Math.round(r.height), size: px(cs.fontSize), weight: Number(cs.fontWeight), letterSpacing: ls(cs) };
+    const key = JSON.stringify(sig);
+    const c = comps.get(key) || { ...sig, count: 0, samples: [], box: { x: Math.round(r.left), y: Math.round(r.top + scrollY), w: Math.round(r.width), h: Math.round(r.height) } };
+    c.count++; if (text && c.samples.length < 3 && !c.samples.includes(text)) c.samples.push(text.slice(0, 32));
+    comps.set(key, c);
+  }
+  const components = [...comps.values()].sort((a, b) => b.count - a.count).slice(0, 14);
+
+  /* BARRAS FIXAS */
+  const bars = [...document.querySelectorAll("body *")]
+    .filter((el) => { const cs = getComputedStyle(el); return (cs.position === "fixed" || cs.position === "sticky") && vis(el) && el.getBoundingClientRect().width > innerWidth * 0.4 && el.getBoundingClientRect().height < 140; })
+    .slice(0, 4)
+    .map((el) => { const cs = getComputedStyle(el); const r = el.getBoundingClientRect(); return { position: cs.position, height: Math.round(r.height), width: Math.round(r.width), bg: hex(cs.backgroundColor), blur: cs.backdropFilter && cs.backdropFilter !== "none" ? cs.backdropFilter : null, radius: px(cs.borderTopLeftRadius), text: (el.innerText || "").trim().replace(/\\s+/g, " ").slice(0, 60), box: { x: Math.round(r.left), y: Math.round(r.top + scrollY), w: Math.round(r.width), h: Math.round(r.height) } }; });
+
+  /* RESPIRO: as seções - os filhos diretos do conteúdo principal, ou as <section> */
+  const root = document.querySelector("main") || document.body;
+  const blocks = [...root.querySelectorAll(":scope > *, section")].filter((el) => vis(el) && el.getBoundingClientRect().height > 200);
+  const sections = blocks.slice(0, 24).map((el) => { const cs = getComputedStyle(el); return { top: px(cs.paddingTop), bottom: px(cs.paddingBottom), bg: hex(cs.backgroundColor) }; });
+
+  /* CARTÕES */
+  const cardMap = new Map();
+  for (const el of document.querySelectorAll("body *")) {
+    const cs = getComputedStyle(el); const r = el.getBoundingClientRect();
+    const radius = px(cs.borderTopLeftRadius);
+    if (radius < 12 || r.width < 200 || r.height < 160 || !vis(el)) continue;
+    const sig = { radius, bg: hex(cs.backgroundColor), shadow: cs.boxShadow !== "none", border: parseFloat(cs.borderTopWidth) > 0 ? hex(cs.borderTopColor) : null, pad: px(cs.paddingTop) };
+    const key = JSON.stringify(sig);
+    const c = cardMap.get(key) || { ...sig, count: 0, box: { x: Math.round(r.left), y: Math.round(r.top + scrollY), w: Math.round(r.width), h: Math.round(r.height) } };
+    c.count++; cardMap.set(key, c);
+  }
+  const cards = [...cardMap.values()].sort((a, b) => b.count - a.count).slice(0, 8);
+
+  /* O RESPIRO, como o site o faz (jornada "o placar de fidelidade", E03, 23/10): a página vira faixas de conteúdo (texto,
+     mídia, quadros com fundo ou borda) e os vãos verticais entre faixas seguidas mostram o ritmo - o recuo da seção não
+     basta: o Stripe espaça com margem e vão, e o "respiro das seções" saía vazio. Os vãos de 64 px ou mais são o espaço
+     entre seções; os menores, o respiro de dentro. E a largura do conteúdo: o primeiro bloco com max-width acima de cada
+     título. */
+  const solid = (el) => { const r = el.getBoundingClientRect(); const cs = getComputedStyle(el); return r.width > 0 && r.height >= 4 && cs.visibility !== "hidden" && cs.display !== "none" && cs.position !== "fixed" && cs.position !== "sticky"; };
+  const spans = [];
+  for (const el of document.querySelectorAll("body *")) {
+    if (!solid(el)) continue;
+    const cs = getComputedStyle(el); const r = el.getBoundingClientRect();
+    const text = [...el.childNodes].some((n) => n.nodeType === 3 && n.textContent.trim().length > 1);
+    const media = /^(IMG|SVG|CANVAS|VIDEO|PICTURE)$/i.test(el.tagName);
+    const boxy = (cs.backgroundColor !== "rgba(0, 0, 0, 0)" || parseFloat(cs.borderTopWidth) > 0) && r.height < 1200 && r.width < innerWidth * 0.98;
+    if (text || media || boxy) spans.push([r.top + scrollY, r.bottom + scrollY]);
+  }
+  spans.sort((a, b) => a[0] - b[0]);
+  const bands = []; for (const [t, b] of spans) { const last = bands[bands.length - 1]; if (last && t <= last[1] + 1) last[1] = Math.max(last[1], b); else bands.push([t, b]); }
+  const gaps = []; for (let i = 1; i < bands.length; i++) gaps.push(Math.round(bands[i][0] - bands[i - 1][1]));
+  const median = (xs) => { const q = [...xs].sort((a, b) => a - b); return q.length ? q[Math.floor(q.length / 2)] : null; };
+  const widths = {};
+  for (const h of document.querySelectorAll("h1, h2, h3")) {
+    if (!vis(h)) continue;
+    /* o MAIS LARGO dos blocos com max-width acima do título: o mais próximo é a coluna de texto (672 px nas landings de
+       exemplo), e o que o site decide é o contêiner da página (1266 px no Stripe) */
+    let widest = 0;
+    for (let a = h.parentElement; a && a !== document.body; a = a.parentElement) { const c = getComputedStyle(a); const w = a.getBoundingClientRect().width; if (c.maxWidth !== "none" && w >= 600 && w < innerWidth - 16 && w > widest) widest = w; }
+    if (widest) { const k = Math.round(widest); widths[k] = (widths[k] || 0) + 1; }
+  }
+  const content = Object.entries(widths).sort((a, b) => b[1] - a[1])[0];
+  /* sem um contêiner de 900 px ou mais com max-width, o recuo lateral: a margem esquerda mais comum dos títulos (as
+     landings de exemplo limitam a página com padding, e o max-width que se acha é o da coluna de texto) */
+  const lefts = {};
+  for (const h of document.querySelectorAll("h1, h2, h3")) { if (!vis(h)) continue; const L = Math.round(h.getBoundingClientRect().left / 4) * 4; if (L > 0 && L < innerWidth / 3) lefts[L] = (lefts[L] || 0) + 1; }
+  const inset = Object.entries(lefts).sort((a, b) => b[1] - a[1])[0];
+  const contentWidth = content && Number(content[0]) >= 900 ? Number(content[0]) : inset ? innerWidth - 2 * Number(inset[0]) : content ? Number(content[0]) : null;
+  const rhythm = { bands: bands.length, sectionGap: median(gaps.filter((g) => g >= 64)), innerGap: median(gaps.filter((g) => g > 0 && g < 64)), contentWidth };
+
+  return { type, components, bars, sections, cards, rhythm, width: innerWidth };
+})()`;
+/**
+ * O AVISO DE COOKIES E O MODAL, ESCONDIDOS - só nas fotos: a leitura já foi medida. Medido em 21/10 nos 21 sites: 7 dobras
+ * saíam com o banner por cima. E em 23/10, na leitura da linguagem, o modelo descreveu o aviso de cookies do Stripe como
+ * um padrão de composição do site ("Persistent utility overlays").
+ */
+export const HIDE_OVERLAYS = `(() => { for (const el of document.querySelectorAll("body *")) { const cs = getComputedStyle(el); if (cs.position !== "fixed" && cs.position !== "sticky") continue; const t = (el.innerText || "").slice(0, 600); const dialog = el.getAttribute("role") === "dialog" || el.getAttribute("aria-modal") === "true"; if (/cookie|consent|privacidade|lgpd|gdpr|sales reps|chat now|est[aá] visualizando|you.re viewing/i.test(t) || (dialog && el.getBoundingClientRect().width < innerWidth * 0.9)) el.style.setProperty("display", "none", "important"); } })()`;

package/dist/reading/page-script.js

@@ -27,8 +27,10 @@ export const PAGE_SCRIPT = String.raw `(() => {
      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 }; });
+     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). E uma
+     camada de mistura POR CIMA só conta se pinta algo (texto, fundo, imagem): a "stats-section__border" do Stripe é
+     multiply e cobre a seção inteira, mas só desenha as linhas. */
+  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"), pinta: !!(e.innerText || "").trim() || !/rgba\(0, 0, 0, 0\)|transparent/.test(c.backgroundColor) || c.backgroundImage !== "none", 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();
@@ -64,7 +66,7 @@ export const PAGE_SCRIPT = String.raw `(() => {
       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 (!mistura) mistura = misturadores.some((m) => (m.e === el || !el.contains(m.e)) && !(m.so && m.e.contains(el)) && (m.e.contains(el) || m.so || m.pinta) && 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({

package/dist/reading/read-page.js

@@ -72,6 +72,13 @@ export async function readSite(browser, base, routes, opts = {}) {
         const code = res?.status?.();
         statuses.set(`${rota}|${disp}`, typeof code === "number" ? code : null);
         await page.waitForTimeout(800);
+        /**
+         * A cor no estado final: sem transição, cada cor salta para o fim. Medido em 23/10 no Stripe (`transition: color
+         * 1.2s`): numa máquina lenta o título era lido no meio do caminho, branco sobre branco. As animações ficam.
+         */
+        await page
+            .evaluate(`(() => { const s = document.createElement("style"); s.textContent = "*, *::before, *::after { transition: none !important; }"; document.head.appendChild(s); document.body.offsetHeight; })()`)
+            .catch(() => null);
         const textos = (await page.evaluate(PAGE_SCRIPT));
         pages.set(`${rota}|${disp}`, page);
         return textos.map((t) => ({ ...t, rota, disp }));

package/package.json

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