synthesisui 0.16.505 → 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/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

@@ -78,12 +78,34 @@ export async function readSite(browser, base, routes, opts = {}) {
     };
     try {
         for (const rota of routes) {
-            const byWidth = await Promise.all(VIEWPORTS.map(([disp, w, h]) => open(rota, disp, w, h)));
+            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);
-        reading.contraste = await confirmByPixels(reading.contraste, (t) => pages.get(`${t.rota}|${t.disp}`));
+        /**
+         * 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synthesisui",
-  "version": "0.16.505",
+  "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": {