@nodegx/mcp 0.2.5 → 0.2.7

package/dist/render-harness/measure-from-disk.js

@@ -654,6 +654,80 @@ var require_src = __commonJS({
     }
   }
 
+  // P112-OWN019-LOOKBLIND / OWN-026 \u2014 text a person cannot read against what is painted behind it. Large 4's number pad
+  // set white digits on a #FAF5FF button (1.07:1) and it survived five changes: the model tapped the keys, read
+  // "Correct!" and never saw that nobody could read them, because nothing here measured contrast. The ground is the
+  // text's ancestors' background colours composited from the first opaque one (white under them all, as a browser
+  // paints), the ink is the text's colour faded by every ancestor's opacity, and the ratio is WCAG's. It abstains,
+  // counted, wherever ancestors are not what is painted underneath: a background image or gradient, a text shadow, an
+  // SVG text. A disabled or aria-hidden control is exempt (WCAG 1.4.3's inactive components). Known limit: a sibling
+  // laid over the text by position is not an ancestor, so it is not seen. Raw pairs here; the judgement is summarise's.
+  layout.lowContrast = [];
+  layout.contrastChecked = 0;
+  layout.contrastAbstained = 0;
+  const CONTRAST_FLOOR = 3;
+  {
+    const parseColor = (c) => {
+      const m = String(c || '').match(/rgba?\\(([^)]+)\\)/);
+      if (!m) return null;
+      const p = m[1].split(/[ ,\\/]+/).filter(Boolean).map(Number);
+      if (p.length < 3 || p.some((x) => isNaN(x))) return null;
+      return { r: p[0], g: p[1], b: p[2], a: p.length > 3 ? p[3] : 1 };
+    };
+    const over = (top, under) => ({ r: top.r * top.a + under.r * (1 - top.a), g: top.g * top.a + under.g * (1 - top.a), b: top.b * top.a + under.b * (1 - top.a), a: 1 });
+    const lum = (c) => {
+      const f = (x) => { const v = x / 255; return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4); };
+      return 0.2126 * f(c.r) + 0.7152 * f(c.g) + 0.0722 * f(c.b);
+    };
+    const contrastOf = (a, b) => { const x = lum(a), y = lum(b); return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05); };
+    const hexOf = (c) => '#' + [c.r, c.g, c.b].map((v) => Math.round(v).toString(16).padStart(2, '0')).join('');
+    const inactive = (e) => e.disabled === true || (typeof e.getAttribute === 'function' && (e.getAttribute('aria-disabled') === 'true' || e.getAttribute('aria-hidden') === 'true'));
+    // What is behind the text, or null to abstain; 'exempt' for an inactive control.
+    const groundOf = (el) => {
+      const stack = [];
+      let opacity = 1;
+      for (let e = el; e; e = e.parentElement) {
+        if (inactive(e)) return 'exempt';
+        const cs = styleOf(e);
+        if (!cs) break;
+        const image = cs.backgroundImage;
+        if (image && image !== 'none' && !/^url\\("data:image\\/svg/.test(image)) return null;
+        const bg = parseColor(cs.backgroundColor);
+        const o = Number(cs.opacity);
+        if (o >= 0 && o <= 1) opacity *= o;
+        if (bg && bg.a > 0) {
+          stack.push(bg);
+          if (bg.a >= 0.999) break;
+        }
+      }
+      let g = { r: 255, g: 255, b: 255, a: 1 };
+      while (stack.length) g = over(stack.pop(), g);
+      return { ground: g, opacity };
+    };
+    const pairs = new Map();
+    for (const el of textEls) {
+      if (el.namespaceURI && el.namespaceURI !== 'http://www.w3.org/1999/xhtml') { layout.contrastAbstained += 1; continue; }
+      const cs = styleOf(el);
+      const fill = parseColor(cs.webkitTextFillColor);
+      const fg = fill || parseColor(cs.color);
+      if (!fg || fg.a === 0) continue;
+      if (cs.textShadow && cs.textShadow !== 'none') { layout.contrastAbstained += 1; continue; }
+      const at = groundOf(el);
+      if (at === 'exempt') continue;
+      if (at === null) { layout.contrastAbstained += 1; continue; }
+      if (at.opacity < 0.05) continue;
+      const ink = over({ r: fg.r, g: fg.g, b: fg.b, a: fg.a * at.opacity }, at.ground);
+      const ratio = Math.round(contrastOf(ink, at.ground) * 100) / 100;
+      layout.contrastChecked += 1;
+      if (ratio >= CONTRAST_FLOOR) continue;
+      const key = hexOf(ink) + '|' + hexOf(at.ground);
+      const seen = pairs.get(key);
+      if (seen) seen.count += 1;
+      else pairs.set(key, { text: el.textContent.trim().slice(0, 40), fg: hexOf(ink), bg: hexOf(at.ground), ratio, size: round(parseFloat(cs.fontSize) || 0), weight: String(cs.fontWeight || ''), cls: cls(el), count: 1 });
+    }
+    layout.lowContrast = [...pairs.values()].sort((a, b) => a.ratio - b.ratio).slice(0, 10);
+  }
+
   const contentBottom = visible.reduce((lowest, el) => {
     const r = el.getBoundingClientRect();
     return r.width > 0 && r.height > 0 && r.bottom > lowest ? r.bottom : lowest;
@@ -821,7 +895,12 @@ var require_src = __commonJS({
        * P112-OWN019-LETTEREDGE (Richard 2026-10-15, TL2's hero). Words within 3 px of the inner left or right edge of the
        * box that frames them (a border or a fill) — a letter in an outlined chip set left because its Text stretched.
        */
-      TextAgainstEdge: "text-against-edge"
+      TextAgainstEdge: "text-against-edge",
+      /**
+       * P112-OWN019-LOOKBLIND (OWN-026's number pad: white digits on #FAF5FF, 1.07:1, through five changes). Text under 3:1
+       * against the background composited behind it — unreadable to anyone, and invisible to an agent that only reads text.
+       */
+      LowContrastText: "low-contrast-text"
     };
     var SEVERITY_ORDER = { error: 0, warning: 1, info: 2 };
     var ROW_GAP_MIN_TALLEST = 48;
@@ -867,6 +946,7 @@ var require_src = __commonJS({
       const findings = [];
       const add = (f) => findings.push(f);
       let controlsJudged = false;
+      const contrastPairs = /* @__PURE__ */ new Map();
       for (const [name, v] of Object.entries(viewports)) {
         if (!v || v.error) continue;
         const isDesktop = v.requested.width >= DESKTOP_WIDTH;
@@ -1112,6 +1192,12 @@ var require_src = __commonJS({
             evidence: edges.slice(0, 6)
           });
         }
+        for (const c of v.layout && v.layout.lowContrast || []) {
+          const key = c.fg + "|" + c.bg;
+          const prev = contrastPairs.get(key);
+          if (!prev) contrastPairs.set(key, { ...c, viewport: name });
+          else if (c.count > prev.count) prev.count = c.count;
+        }
         if (v.consoleErrors && v.consoleErrors.length) {
           add({
             code: RenderFinding.ConsoleError,
@@ -1122,6 +1208,17 @@ var require_src = __commonJS({
           });
         }
       }
+      if (contrastPairs.size) {
+        const worst = [...contrastPairs.values()].sort((a, b) => a.ratio - b.ratio);
+        const named = worst.slice(0, 3).map((c) => `"${c.text}" ${c.fg} on ${c.bg}, ${c.ratio}:1${c.count > 1 ? ` (and ${c.count - 1} more like it)` : ""}`);
+        add({
+          code: RenderFinding.LowContrastText,
+          severity: "warning",
+          viewport: worst[0].viewport,
+          message: `${plural(worst.length, "colour pair", "colour pairs")} of text ${worst.length === 1 ? "reads" : "read"} under 3:1 against what is behind ${worst.length === 1 ? "it" : "them"}, so a person cannot read ${worst.length === 1 ? "it" : "them"}: ${named.join("; ")}. Pressing it still works, so a drive will not notice: set the text's colour or its background from the style vocabulary so they differ in lightness, not only in hue. Look at the ${worst[0].viewport} screenshot.`,
+          evidence: worst.slice(0, 6)
+        });
+      }
       const seen = /* @__PURE__ */ new Set();
       const unique = findings.filter((f) => {
         const key = `${f.code}|${f.viewport}|${f.message}`;
@@ -2087,6 +2184,32 @@ var require_render_report = __commonJS({
         }
       };
     }
+    var PAGE_ANSWER_MS = Number(process.env.NODEGX_RENDER_PAGE_ANSWER_MS) || 3e4;
+    async function pageAnswers(attaching, chromePath) {
+      const neverAnswered = (refused) => {
+        const message = "Chrome started (its debugging port opened) but its page " + (refused ? `refused the connection (${refused.message || refused}). ` : `never answered within ${Math.round(PAGE_ANSWER_MS / 1e3)} s. `) + `That is what Chrome does inside another sandbox (an agent harness that runs commands under sandbox-exec, a container): its own sandbox cannot start and its pages crash. Run the render outside that sandbox, or set CHROME_PATH to a script that starts ${chromePath} with --no-sandbox.`;
+        const error = new Error(message);
+        error.problems = [message];
+        error.actionable = true;
+        return error;
+      };
+      if (!attaching) throw neverAnswered();
+      let timer;
+      const deadline = new Promise((_, reject) => {
+        timer = setTimeout(() => reject(neverAnswered()), PAGE_ANSWER_MS);
+      });
+      try {
+        const answered = attaching.then(
+          async (tab) => (await evaluate(tab.client, "1"), tab),
+          (refused) => {
+            throw neverAnswered(refused);
+          }
+        );
+        return await Promise.race([answered, deadline]);
+      } finally {
+        clearTimeout(timer);
+      }
+    }
     async function withRenderedPage(options, fn) {
       const { projectDir: projectDir2, backendPort, editorTokens = false, chromeArgs = [], beforeBoot } = options;
       reapOrphanedRenderProcesses();
@@ -2186,7 +2309,10 @@ var require_render_report = __commonJS({
         if (!targets) throw new Error(`Chrome never opened a debugging port (${pre.chrome}).`);
         const target = targets.find((t) => t.type === "page");
         const settles = [];
-        const main2 = await attachTab({ wsUrl: target.webSocketDebuggerUrl, servePort, settles });
+        const main2 = await pageAnswers(
+          target ? attachTab({ wsUrl: target.webSocketDebuggerUrl, servePort, settles }) : void 0,
+          pre.chrome
+        );
         client = main2.client;
         const openTab = async (label) => {
           if (!browserClient) {
@@ -2251,9 +2377,11 @@ var require_render_report = __commonJS({
         editorTokens = false,
         renderRoutedPages = true,
         page: requestedPage,
-        concurrency = PAGE_TABS
+        concurrency = PAGE_TABS,
+        imageBudget
       } = options;
       const started = Date.now();
+      const imageBytesEach = imageBudget ? Math.floor(imageBudget / Math.max(1, viewports.length)) : 0;
       const routes = routedPages(projectDir2);
       let focus;
       if (requestedPage !== void 0) {
@@ -2285,24 +2413,45 @@ var require_render_report = __commonJS({
         if (focusedOffStart) await page.navigate(focus.url);
         const measured = {};
         const screenshots = [];
+        const take = (vp, client, format, height, quality) => client.send("Page.captureScreenshot", {
+          format,
+          ...format === "jpeg" ? { quality } : {},
+          captureBeyondViewport: screenshot === "full",
+          optimizeForSpeed: true,
+          ...screenshot === "full" ? { clip: { x: 0, y: 0, width: vp.width, height, scale: deviceScaleFactor } } : {}
+        });
         const capture = async (vp, raw, component, subject2, client = page.client) => {
-          const shot = await client.send("Page.captureScreenshot", {
-            format: "png",
-            captureBeyondViewport: screenshot === "full",
-            optimizeForSpeed: true,
-            ...screenshot === "full" ? {
-              clip: {
-                x: 0,
-                y: 0,
-                width: vp.width,
-                // Chrome refuses beyond 16384px; a page taller than that is
-                // already the finding.
-                height: Math.min(raw.pageHeight, 16384),
-                scale: deviceScaleFactor
-              }
-            } : {}
-          });
-          return { name: vp.name, page: component, subject: subject2, mimeType: "image/png", base64: shot.data };
+          const fullHeight = Math.min(raw.pageHeight, 16384);
+          const shot = await take(vp, client, "png", fullHeight);
+          const base = { name: vp.name, page: component, subject: subject2 };
+          if (!imageBytesEach || shot.data.length <= imageBytesEach) return { ...base, mimeType: "image/png", base64: shot.data };
+          return { ...base, ...await fitted(vp, client, fullHeight) };
+        };
+        const fitted = async (vp, client, fullHeight) => {
+          const screenHeight = Math.max(1, vp.height);
+          const screens = Math.max(1, Math.ceil(fullHeight / screenHeight));
+          let quality = 70;
+          let height = fullHeight;
+          let shot = await take(vp, client, "jpeg", height, quality);
+          if (screenshot === "full" && shot.data.length > imageBytesEach && screens > 1) {
+            let keep = Math.min(screens - 1, Math.max(1, Math.floor(screens * imageBytesEach / shot.data.length)));
+            for (; ; ) {
+              height = Math.min(fullHeight, keep * screenHeight);
+              shot = await take(vp, client, "jpeg", height, quality);
+              if (shot.data.length <= imageBytesEach || keep === 1) break;
+              keep -= 1;
+            }
+          }
+          if (shot.data.length > imageBytesEach) {
+            quality = 40;
+            shot = await take(vp, client, "jpeg", height, quality);
+          }
+          const shown = screenshot === "full" ? Math.min(screens, Math.ceil(height / screenHeight)) : 1;
+          return {
+            mimeType: "image/jpeg",
+            base64: shot.data,
+            fit: { format: "jpeg", quality, screens: shown, of: screenshot === "full" ? screens : 1, overBudget: shot.data.length > imageBytesEach }
+          };
         };
         const expression = measureExpression(placeholders, probesFor(subjectComponent));
         let loggedThrough = 0;
@@ -2449,6 +2598,7 @@ var require_render_report = __commonJS({
       // Exported so a session-teardown hook, a CI step or a spec can reap without
       // starting a drive — the leak outlives the run that caused it.
       reapOrphanedRenderProcesses,
+      pageAnswers,
       routedPages,
       resolvePageRequest,
       reachableComponents,
@@ -2509,7 +2659,8 @@ var VALUE_FLAGS = /* @__PURE__ */ new Set([
   "--scale",
   "--backend-port",
   "--page",
-  "--concurrency"
+  "--concurrency",
+  "--image-budget"
 ]);
 var flag = (name, fallback) => {
   const i = argv.indexOf(name);
@@ -2573,7 +2724,8 @@ async function main() {
     // FLD-011 — `--concurrency 1` is the serial sweep, and it is here so the arms
     // that grade the parallel one are two runs of the SAME build differing by a
     // number, rather than a run of this build against a `git show HEAD:` copy.
-    ...flag("--concurrency") ? { concurrency: Number(flag("--concurrency")) } : {}
+    ...flag("--concurrency") ? { concurrency: Number(flag("--concurrency")) } : {},
+    ...flag("--image-budget") ? { imageBudget: Number(flag("--image-budget")) } : {}
   });
   const out = flag("--out");
   const files = [];