@bezda/rhp-mcp 0.1.0 → 0.1.2

package/src/check/index.js

@@ -16,23 +16,26 @@
 //   outDir    where the screenshots go (a folder in the OS temp dir by default)
 //   guard     check how rhp is used, in the page (true by default; false is for proving the guard draws nothing)
 //   freeze    take the screenshots with CSS animations stopped (an endless one at its start), for comparing them
+//   settleTimeout  readiness budget per settling wait in ms (10000 by default); an unsettled page fails explicitly
 //   offline   fetch nothing from the web (fonts fall back): for tests that must not depend on the network
 //   browser   a Playwright Browser to use instead of launching one (it is left open)
 //   debug     also save the screenshots the color probes read (as drawn, with the text hidden, with the marks hidden)
 //
-// Result: { ok, file, format, rhpVersion, browser, findings, charts, interactions, interactedAt, screenshots, timings,
+// Result: { ok, file, format, rhpVersion, browser, findings, charts, interactions, interactedAt, swept, screenshots, timings,
 // text }
 //   ok            no finding is an error
 //   findings      [{ level: "error" | "warning" | "info", code, message, fix, width, widths }], errors first
 //   charts        [{ width, slats, blocks: { bar: 3, label: 6 }, box: { width, height } }]
 //   interactions  [{ width, kind, target, changed, how, error, moved, unseen }]
+//   swept         [{ width, breakpoint, slats, jumps }]: the widths at which every slat was picked in turn (each width
+//                 checked, and the page's own breakpoints between them), how many slats, and how many moved the layout
 //   screenshots   [{ width, dark, hover, path }]
 //   text          the report as plain text (what the CLI prints)
 import fs from "fs";
 import os from "os";
 import path from "path";
 import crypto from "crypto";
-import { pathToFileURL } from "url";
+import { pathToFileURL, fileURLToPath } from "url";
 import { detectFormat, bundle, guardedStandalone, htmlProblems, packages, contentType } from "./build.js";
 import { launch, NO_BROWSER_FIX } from "./browser.js";
 import { install } from "./inpage.js";
@@ -40,9 +43,11 @@ import { fromProbe, fixForError, placeOf } from "./findings.js";
 import { textContrast, faintMarks, colorBlind } from "./colors.js";
 import { decode } from "./png.js";
 import { interact as interactionPass } from "./interact.js";
+import { selectionBehavior } from "./selection.js";
 import { readMap, lookup } from "./sourcemap.js";
 import { sourceProblems } from "./source.js";
 import { report } from "./report.js";
+import { fetchPublic, READ_METHODS, denyBrowserNetwork } from "./network.js";
 
 const ORIGIN = "http://rhp-check.localhost";
 const CDN = /^https?:\/\/(?:cdn\.jsdelivr\.net\/npm|unpkg\.com|esm\.sh)\/@bezda\/rhp(?:@([^/]+))?\/(?:dist\/)?([^?#]*)/;
@@ -51,6 +56,12 @@ const LEVELS = { error: 0, warning: 1, info: 2 };
 const PHONE = 600;
 // The height of what a phone shows of a page (Safari on a 390 by 844 iPhone, its bars shown): where the taps are tried
 const PHONE_WINDOW = 664;
+// With motion on, the longest wait for a page to come to rest after it opens, and after a screenshot, in ms: a page
+// that moves on its own never does
+const MOVING_WAIT = 3000;
+const MOVING_CALM = 500;
+// The most breakpoint widths a width sweeps besides itself
+const MAX_BREAKPOINTS = 6;
 
 const shortHash = (text) => crypto.createHash("sha1").update(text).digest("hex").slice(0, 8);
 
@@ -80,6 +91,39 @@ function source({ file, code, format }) {
   return { file: abs, text: code };
 }
 
+// Picks every slat of the page's main Plot in turn, as a reader going from one to the next (a tap on a touch screen,
+// the mouse elsewhere), on a page at rest with reduced motion asked for, where a pick shows at once; and lists what moved
+// outside the plot (moved() in inpage.js): a readout that takes another line for one slat, at one width. What a pick
+// throws is tagged with it in events, as the interaction pass does.
+async function sweep(page, touch, events) {
+
+  const slats = await page.evaluate(() => window.__rhpProbe.sweepTargets());
+  const jumps = [];
+  if (!touch) await page.mouse.move(0, 0);
+  await page.evaluate(() => window.__rhpProbe.place());
+  for (const s of slats) {
+    // (a slat that something covers has no point: pointing there would pick what covers it)
+    const point = await page.evaluate((n) => window.__rhpProbe.pointAt(n), s.target).catch(() => null);
+    if (!Number.isFinite(point?.x) || !Number.isFinite(point?.y)) continue;
+    const name = `slat ${s.index} of ${s.of}${s.name ? ` (${s.name})` : ""}`;
+    const before = events.length;
+    try {
+      if (touch) await page.touchscreen.tap(point.x, point.y);
+      else await page.mouse.move(point.x, point.y);
+      await page.evaluate(() => new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done))));
+    } catch {
+      continue;
+    }
+    for (const e of events.slice(before)) {
+      if (e.kind === "pageerror" || e.kind === "console-error") e.during ??= `${touch ? "tap" : "hover"} ${name}`;
+    }
+    const moved = await page.evaluate((n) => window.__rhpProbe.moved(n, true), s.target).catch(() => []);
+    if (moved.length) jumps.push({ target: name, moved });
+  }
+  if (!touch) await page.mouse.move(0, 0);
+  return { slats: slats.length, jumps };
+}
+
 export async function check(options = {}) {
 
   const started = performance.now();
@@ -89,6 +133,10 @@ export async function check(options = {}) {
   const dark = !!options.dark;
   const guard = options.guard !== false;
   const wantInteract = options.interact !== false;
+  const settleTimeout = options.settleTimeout ?? 10000;
+  const requireRest = (result) => {
+    if (!result.rest) throw Object.assign(new Error(`The page did not settle within ${settleTimeout}ms; layout and color measurements would be unreliable.`), { code: "page-unsettled" });
+  };
 
   const src = source(options);
   if (src.error) return finish({ file: options.file ?? null, format: options.format ?? null, findings: [{ level: "error", code: "no-file", message: src.error, fix: "Pass the path of the chart's file (an .html page, a .jsx component or a .js module)." }], timings, started });
@@ -138,18 +186,45 @@ export async function check(options = {}) {
   fs.mkdirSync(outDir, { recursive: true });
   const name = path.basename(file).replace(/\.[^.]+$/, "");
 
+  // Both the spelled path and the resolved path must remain below this root.
+  // This also rejects hidden paths and symlinks that lead outside the chart folder.
+  const scopedFile = (root, candidate) => {
+    try {
+      const inside = (base, name) => {
+        const rel = path.relative(base, name);
+        return rel && !rel.startsWith(".." + path.sep) && rel !== ".." && !path.isAbsolute(rel) && !rel.split(path.sep).some((part) => part.startsWith("."));
+      };
+      if (!inside(path.resolve(root), path.resolve(candidate))) return null;
+      const real = fs.realpathSync(candidate);
+      return inside(fs.realpathSync(root), real) && fs.statSync(real).isFile() ? real : null;
+    } catch {
+      return null;
+    }
+  };
+
   // Answers every request the page makes: the bundle and the user's files for a bundled chart, rhp from the CDN, and
   // the rest of the web (fonts) through a short timeout, kept for the next width
   const route = async (r) => {
     const url = r.request().url();
 
+    if (url.startsWith("file:")) {
+      let local = null;
+      try {
+        const requested = fileURLToPath(url);
+        local = path.resolve(requested) === path.resolve(file) ? file : scopedFile(path.dirname(file), requested);
+      } catch {
+        // A malformed file URL is not a local asset.
+      }
+      return local ? r.fulfill({ body: fs.readFileSync(local), contentType: contentType(local) }) : r.abort("blockedbyclient");
+    }
+
     if (url.startsWith(ORIGIN + "/")) {
       const p = decodeURIComponent(new URL(url).pathname);
-      if (p === "/") return r.fulfill({ body: built.html, contentType: "text/html" });
-      if (built.files.has(p)) return r.fulfill({ body: built.files.get(p).body, contentType: built.files.get(p).type });
+      if (p === "/" && built) return r.fulfill({ body: built.html, contentType: "text/html" });
+      if (built?.files.has(p)) return r.fulfill({ body: built.files.get(p).body, contentType: built.files.get(p).type });
       if (p === "/favicon.ico") return r.fulfill({ status: 204, body: "" });
-      const local = path.join(path.dirname(file), p);
-      if (local.startsWith(path.dirname(file)) && fs.existsSync(local) && fs.statSync(local).isFile()) return r.fulfill({ body: fs.readFileSync(local), contentType: contentType(local) });
+      const local = scopedFile(path.dirname(file), path.join(path.dirname(file), p));
+      if (local) return r.fulfill({ body: fs.readFileSync(local), contentType: contentType(local) });
       return r.fulfill({ status: 404, body: "not found: " + p });
     }
 
@@ -161,36 +236,43 @@ export async function check(options = {}) {
       const sub = rest === "standalone" || rest === "standalone.js" || rest === "" ? "standalone.js" : rest;
       const headers = { "access-control-allow-origin": "*" };
       if (sub === "standalone.js") return r.fulfill({ body: standalone ?? fs.readFileSync(path.join(pkgs.rhp.root, "dist/standalone.js")), contentType: "text/javascript", headers });
-      const f = path.join(pkgs.rhp.root, "dist", sub.replace(/^dist\//, ""));
-      if (fs.existsSync(f)) return r.fulfill({ body: fs.readFileSync(f), contentType: contentType(f), headers });
+      const f = scopedFile(path.join(pkgs.rhp.root, "dist"), path.join(pkgs.rhp.root, "dist", sub.replace(/^dist\//, "")));
+      if (f) return r.fulfill({ body: fs.readFileSync(f), contentType: contentType(f), headers });
       return r.fulfill({ status: 404, body: "not in @bezda/rhp: " + sub, headers });
     }
 
     if (!/^https?:/.test(url)) return r.continue();
     if (options.offline) return r.abort("internetdisconnected").catch(() => {});
 
-    if (!remote.has(url)) {
-      remote.set(url, fetched.has(url) ? Promise.resolve(fetched.get(url)) : r.fetch({ timeout: 5000, maxRedirects: 5 }).then(async (res) => {
-        const got = { status: res.status(), headers: res.headers(), body: await res.body() };
-        if (got.status >= 200 && got.status < 300 && fetchedBytes + got.body.length <= KEEP_BYTES) {
+    // The rest of the web, read only and from public addresses only (network.js); a GET answer is kept
+    const method = r.request().method().toUpperCase();
+    if (!READ_METHODS.has(method)) return r.abort("blockedbyclient").catch(() => {});
+    const key = method + " " + url;
+    if (!remote.has(key)) {
+      remote.set(key, method === "GET" && fetched.has(url) ? Promise.resolve(fetched.get(url)) : fetchPublic(url, { method, headers: r.request().headers() }).then((got) => {
+        if (method === "GET" && !got.error && got.status >= 200 && got.status < 300 && fetchedBytes + got.body.length <= KEEP_BYTES) {
           fetched.set(url, got);
           fetchedBytes += got.body.length;
         }
         return got;
-      }, (e) => ({ error: String(e.message ?? e).split("\n")[0] })));
+      }));
     }
-    const got = await remote.get(url);
-    if (got.error) return r.abort("internetdisconnected").catch(() => {});
+    const got = await remote.get(key);
+    if (got.error) return r.abort(got.blocked ? "blockedbyclient" : "internetdisconnected").catch(() => {});
     return r.fulfill({ status: got.status, headers: got.headers, body: got.body }).catch(() => {});
   };
 
   const browser = launched.browser;
   const results = [];
   const screenshots = [];
+  const fenced = new Set();
+  const fence = await denyBrowserNetwork((url) => fenced.add(url));
   const isLocal = (u) => u.startsWith("file:") || u.startsWith(ORIGIN);
 
   // A page with the chart, the probe installed and at rest (in a window of another size when asked); what the page
-  // throws or prints goes to events
+  // throws or prints goes to events. The page that is measured, with reduced motion, must come to rest. With motion on
+  // (the interaction pass), a page that moves on its own (a live feed, a race that plays) never does: it gets a few
+  // seconds for its fonts and entry animations, and is then tried as it moves, as a reader gets it.
   const open = async (context, events, reducedMotion, viewport = null) => {
     const page = await context.newPage();
     if (viewport) await page.setViewportSize(viewport);
@@ -210,23 +292,32 @@ export async function check(options = {}) {
     });
     await page.emulateMedia({ reducedMotion });
     await page.route("**/*", route);
+    await context.routeWebSocket(/.*/, (ws) => {
+      // A WebSocket can send arbitrary messages after its handshake, so it is not a read-only fetch.
+      events.push({ kind: "remote-failed", text: ws.url(), error: "net::ERR_BLOCKED_BY_CLIENT" });
+      ws.close({ code: 1008, reason: "WebSockets are blocked by the check" });
+    });
     await page.goto(format === "html" ? pathToFileURL(file).href : ORIGIN + "/", { waitUntil: "load", timeout: 20000 }).catch((e) => events.push({ kind: "pageerror", text: "The page did not finish loading: " + String(e.message).split("\n")[0] }));
     await page.evaluate(install);
-    await page.evaluate(() => window.__rhpProbe.settle(2000));
+    const measured = reducedMotion === "reduce";
+    const rest = await page.evaluate((max) => window.__rhpProbe.settle(max), measured ? settleTimeout : Math.min(settleTimeout, MOVING_WAIT));
+    if (measured) requireRest(rest);
     return page;
   };
 
   // A screenshot, after which the page comes to rest again: taking one can lay the page out at another size for a
-  // moment (see calm() in inpage.js)
-  const capture = async (page, opts) => {
+  // moment (see calm() in inpage.js). In the interaction pass (moving: true) the page may move on its own, so it waits
+  // briefly and goes on.
+  const capture = async (page, opts, moving = false) => {
     const since = await page.evaluate(() => window.__rhpProbe.resized());
     const png = await page.screenshot(opts);
-    await page.evaluate((n) => window.__rhpProbe.calm(n), since).catch(() => {});
+    const rest = await page.evaluate(([n, max]) => window.__rhpProbe.calm(n, max), [since, moving ? Math.min(settleTimeout, MOVING_CALM) : settleTimeout]);
+    if (!moving) requireRest(rest);
     return png;
   };
 
   // The screenshot the report gives, cropped to what the page draws
-  const save = async (page, width, suffix) => {
+  const save = async (page, width, suffix, moving = false) => {
     const box = await page.evaluate(() => window.__rhpProbe.contentBox());
     const size = await page.evaluate(() => ({ w: document.documentElement.scrollWidth, h: document.documentElement.scrollHeight }));
     const pad = 16;
@@ -237,7 +328,7 @@ export async function check(options = {}) {
       height: Math.min(size.h, Math.ceil(box.bottom + pad)) - Math.max(0, Math.floor(box.top - pad)),
     };
     const png = path.join(outDir, `${name}-${width}${dark ? "-dark" : ""}${suffix ? "-" + suffix : ""}.png`);
-    await capture(page, { type: "png", path: png, fullPage: true, animations: options.freeze ? "disabled" : "allow", ...(clip && clip.width > 0 && clip.height > 0 ? { clip } : {}) });
+    await capture(page, { type: "png", path: png, fullPage: true, animations: options.freeze ? "disabled" : "allow", ...(clip && clip.width > 0 && clip.height > 0 ? { clip } : {}) }, moving);
     screenshots.push({ width, dark, hover: suffix === "hover", path: png });
   };
 
@@ -246,15 +337,15 @@ export async function check(options = {}) {
   try {
     await Promise.all(widths.map(async (width, i) => {
       const phone = width <= PHONE;
-      const context = await browser.newContext({ viewport: { width, height: 900 }, deviceScaleFactor: phone ? 2 : 1, hasTouch: phone, colorScheme: dark ? "dark" : "light" });
+      // No service workers (they would answer requests outside the check's router) and no downloads
+      const context = await browser.newContext({ viewport: { width, height: 900 }, deviceScaleFactor: phone ? 2 : 1, hasTouch: phone, colorScheme: dark ? "dark" : "light", serviceWorkers: "block", acceptDownloads: false, proxy: fence.proxy });
       const events = [];
       const w0 = performance.now();
+      try {
 
       // The page is measured and pictured with reduced motion asked for: rhp's moves end at once, and a page that moves
       // on its own (an autoplay, a live feed) waits or changes in steps, so the screenshots show what was measured
       const page = await open(context, events, "reduce");
-      const seen = await page.evaluate(() => window.__rhpProbe.measure());
-      const items = await page.evaluate(() => window.__rhpProbe.colorItems());
 
       // first, before any probe hides or restyles anything
       await save(page, width, "");
@@ -266,6 +357,10 @@ export async function check(options = {}) {
         return decode(png);
       };
       const drawn = keep(await shot(), "drawn");
+      // Full-page captures can trigger responsive layout handlers. Read geometry
+      // and text colors only after those handlers have come to rest again.
+      const seen = await page.evaluate(() => window.__rhpProbe.measure());
+      const items = await page.evaluate(() => window.__rhpProbe.colorItems());
       await page.evaluate(() => window.__rhpProbe.hide("text"));
       const noText = keep(await shot(), "no-text");
       let noMarks = null;
@@ -276,6 +371,26 @@ export async function check(options = {}) {
       await page.evaluate(() => window.__rhpProbe.show());
       const colorFindings = [...textContrast(items, noText, 1), ...(noMarks ? faintMarks(items, drawn, noMarks, 1) : []), ...colorBlind(items, noMarks, 1)];
 
+      // Every slat picked in turn, here and at the page's own breakpoints between this width and the next narrower
+      // one checked (a page of its own at each), where a layout that only fits at the widths checked jumps
+      const swept = [];
+      if (wantInteract) {
+        swept.push({ width, ...(await sweep(page, phone, events)) });
+        const next = [...widths].sort((a, b) => b - a).find((w) => w < width);
+        const between = next == null ? [] : (await page.evaluate(() => window.__rhpProbe.breakpoints())).filter((b) => b < width && b > next && !widths.includes(b));
+        for (const b of between.slice(0, MAX_BREAKPOINTS)) {
+          let at = null;
+          try {
+            at = await open(context, events, "reduce", { width: b, height: 900 });
+            swept.push({ width: b, breakpoint: true, ...(await sweep(at, phone, events)) });
+          } catch (error) {
+            if (error.code !== "page-unsettled") throw error;
+          } finally {
+            await at?.close();
+          }
+        }
+      }
+
       // with reduced motion rhp turns every block's transition off, so a slat's own is read with motion on
       await page.emulateMedia({ reducedMotion: "no-preference" });
       seen.found.push(...(await page.evaluate(() => window.__rhpProbe.transitions())));
@@ -286,10 +401,20 @@ export async function check(options = {}) {
       // and taps at a phone's, in the window a phone shows (not when the page never finished loading)
       const interactions = [];
       const unfocused = [];
+      let selection = { findings: [], tested: null };
       const loaded = !events.some((e) => e.kind === "pageerror" && /^The page did not finish loading/.test(e.text));
       if (wantInteract && loaded && (i === 0 || phone)) {
+        if (i === 0) {
+          const audit = await open(context, events, "no-preference");
+          try {
+            selection = await selectionBehavior(audit, { events });
+            guarded.push(...(await audit.evaluate(() => globalThis.__rhpCheck?.findings ?? []).catch(() => [])));
+          } finally {
+            await audit.close();
+          }
+        }
         const fresh = await open(context, events, "no-preference", phone ? { width, height: PHONE_WINDOW } : null);
-        const pass = { events, capture: (opts) => capture(fresh, opts), shoot: (suffix) => save(fresh, width, suffix) };
+        const pass = { events, capture: (opts) => capture(fresh, opts, true), shoot: (suffix) => save(fresh, width, suffix, true) };
         const passes = [];
         if (i === 0) passes.push(await interactionPass(fresh, pass));
         if (phone) passes.push(await interactionPass(fresh, { ...pass, taps: true }));
@@ -302,12 +427,22 @@ export async function check(options = {}) {
         guarded.push(...(await fresh.evaluate(() => globalThis.__rhpCheck?.findings ?? []).catch(() => [])));
       }
 
-      results.push({ width, index: i, seen, events, guarded, colorFindings, interactions: interactions.map((x) => ({ width, ...x })), unfocused, ms: Math.round(performance.now() - w0) });
-      await context.close();
+      results.push({ width, index: i, seen, events, guarded, colorFindings, interactions: interactions.map((x) => ({ width, ...x })), unfocused, selection, swept, ms: Math.round(performance.now() - w0) });
+      } catch (error) {
+        if (error.code !== "page-unsettled") throw error;
+        findings.push({ level: "error", code: error.code, message: error.message, fix: "Let finite entry animations finish, honor prefers-reduced-motion for live updates, or increase the check's settleTimeout for a slow machine.", width });
+      } finally {
+        await context.close();
+      }
     }));
   } finally {
-    if (!options.browser) await browser.close();
+    try {
+      if (!options.browser) await browser.close();
+    } finally {
+      await fence.close();
+    }
   }
+  for (const url of fenced) findings.push({ level: "info", code: "remote-failed", message: `The check blocked an unrouted browser connection to ${url}; no connection was forwarded.`, fix: "Use public HTTP assets or data requests; worker sockets and other direct browser connections are blocked." });
   lap("pages", t);
 
   results.sort((a, b) => a.index - b.index);
@@ -337,7 +472,8 @@ export async function check(options = {}) {
       } else if (e.kind === "request-failed") {
         findings.push({ level: "error", code: "request-failed", message: `${e.text.replace(ORIGIN, "").replace(/^file:\/\//, "")} failed to load (${e.error}).`, fix: "Fix the path, or add the file next to the chart.", width: r.width });
       } else if (e.kind === "remote-failed") {
-        findings.push({ level: "info", code: "remote-failed", message: `${e.text} could not be fetched (${e.error}); the check went on without it.`, fix: "If the page needs it, check the URL; offline, fonts fall back to the next in the stack.", width: r.width });
+        if (/BLOCKED_BY_CLIENT/.test(e.error)) findings.push({ level: "info", code: "remote-failed", message: `${e.text} was not fetched: the check only reads from public addresses (GET, HEAD or OPTIONS), blocks WebSockets, and the page asked for something else; it went on without it.`, fix: "Load data and assets with plain GET requests from public URLs, or from files next to the chart; the checker does not forward request bodies or WebSocket messages.", width: r.width });
+        else findings.push({ level: "info", code: "remote-failed", message: `${e.text} could not be fetched (${e.error}); the check went on without it.`, fix: "If the page needs it, check the URL; offline, fonts fall back to the next in the stack.", width: r.width });
       }
     }
 
@@ -364,6 +500,13 @@ export async function check(options = {}) {
       if (jumps.has(key)) jumps.get(key).more++;
       else jumps.set(key, { code: "layout-jump", kind: x.kind, target: x.target, moved: x.moved, more: 0 });
     }
+    for (const sw of r.swept) {
+      for (const j of sw.jumps) {
+        const key = j.moved.map((m) => m.what).join("\n");
+        if (jumps.has(key)) jumps.get(key).more++;
+        else jumps.set(key, { code: "layout-jump", kind: "pick", target: sw.breakpoint ? `${j.target} at ${sw.width}px, beside one of the page's own breakpoints` : j.target, moved: j.moved, more: 0 });
+      }
+    }
     for (const j of jumps.values()) {
       findings.push({ ...fromProbe(j, {}), width: r.width });
     }
@@ -374,13 +517,19 @@ export async function check(options = {}) {
 
     // focus that shows nothing: one finding for the page
     if (r.unfocused.length) findings.push({ ...fromProbe({ code: "focus-invisible", what: r.unfocused[0], more: r.unfocused.length - 1 }, {}), width: r.width });
+
+    // Existing click selection with a temporary hover override, verified on an isolated page.
+    for (const f of r.selection.findings) findings.push({ ...fromProbe(f, {}), width: r.width });
+
   }
 
   const charts = results.flatMap((r) => r.seen.charts.map((c) => ({ width: r.width, ...c })));
+  const selectionAudits = results.flatMap((r) => r.selection.tested ? [{ width: r.width, ...r.selection.tested }] : []);
   const interactions = results.flatMap((r) => r.interactions);
+  const swept = results.flatMap((r) => r.swept.map(({ width, breakpoint, slats, jumps }) => ({ width, breakpoint: !!breakpoint, slats, jumps: jumps.length }))).sort((a, b) => b.width - a.width);
   timings.widths = Object.fromEntries(results.map((r) => [r.width, r.ms]));
 
-  return finish({ ...base, browser: launched.name, findings, charts, interactions, interactedAt: wantInteract ? widths[0] : null, screenshots, timings, started });
+  return finish({ ...base, browser: launched.name, findings, charts, interactions, interactedAt: wantInteract ? widths[0] : null, selectionAudits, swept, screenshots, timings, started });
 }
 
 // Merges the same finding at several widths, sorts errors first, and writes the report
@@ -410,6 +559,8 @@ function finish({ findings, started, timings, ...rest }) {
     charts: rest.charts ?? [],
     interactions: rest.interactions ?? [],
     interactedAt: rest.interactedAt ?? null,
+    selectionAudits: rest.selectionAudits ?? [],
+    swept: rest.swept ?? [],
     screenshots: rest.screenshots ?? [],
     timings,
   };

package/src/check/inpage.js

@@ -22,12 +22,13 @@ export function install() {
   // Waits for fonts, two frames, the animations that end (CSS transitions, a slat's own animations) and a DOM that
   // stays still for two frames (the JS version moves numbers on its own clock), up to max ms. Says whether the page
   // came to rest.
-  async function settle(max = 2000) {
+  async function settle(max = 10000) {
 
     const start = performance.now();
     const left = () => max - (performance.now() - start);
 
-    await Promise.race([document.fonts?.ready, new Promise((r) => setTimeout(r, Math.max(0, left())))]);
+    let timer;
+    await Promise.race([document.fonts?.ready, new Promise((r) => { timer = setTimeout(r, Math.max(0, left())); })]).finally(() => clearTimeout(timer));
     await frame();
     await frame();
 
@@ -39,7 +40,7 @@ export function install() {
       still = !moving && mutations === before ? still + 1 : 0;
     }
 
-    return { ms: Math.round(performance.now() - start), rest: still >= 2 };
+    return { ms: Math.round(performance.now() - start), rest: still >= 2 && document.fonts?.status !== "loading" };
   }
 
   // A full-page screenshot lays the page out at another size for a moment (Chromium does, to draw what is past the
@@ -48,11 +49,12 @@ export function install() {
   // since.
   let resizes = 0;
   addEventListener("resize", () => resizes++);
-  async function calm([r, m]) {
+  async function calm([r, m], max = 10000) {
 
     await frame();
     const moving = document.getAnimations().some((a) => a.playState === "running" && Number.isFinite(a.effect?.getComputedTiming?.().endTime ?? Infinity));
-    if (resizes !== r && (mutations !== m || moving)) await settle(500);
+    if (resizes !== r || mutations !== m || moving || document.fonts?.status === "loading") return settle(max);
+    return { rest: true };
   }
 
   const visible = (el) => !!el && el.checkVisibility?.({ opacityProperty: true, visibilityProperty: true }) !== false;
@@ -958,6 +960,62 @@ export function install() {
     return { left: left + scrollX, top: top + scrollY, right: right + scrollX, bottom: bottom + scrollY };
   }
 
+  // The slats of the main Plot, in screen order: the largest chart's (a size key drawn as a chart of its own comes before
+  // the chart it explains) first Plot with slats that takes the pointer (an overlay of guides or a readout takes none)
+  function mainSlats() {
+
+    const area = (el) => el.getBoundingClientRect().width * el.getBoundingClientRect().height;
+    const chart = all().filter((c) => visible(c) && !c.parentElement?.closest(".rhp-chart")).sort((a, b) => area(b) - area(a))[0];
+    const plots = chart ? [...chart.querySelectorAll(":scope > .rhp-body > .rhp-plot")].filter((p) => !p.classList.contains("rhp-scale") && [...p.children].some((s) => !s.hidden)) : [];
+    const plot = plots.find((p) => getComputedStyle(p).pointerEvents !== "none") ?? plots[0];
+    if (!plot) return [];
+    const vertical = plot.dataset.rhpO === "v";
+    const slats = [...plot.children].filter((s) => !s.hidden && visible(s));
+    slats.sort((a, b) => (vertical ? a.getBoundingClientRect().left - b.getBoundingClientRect().left : a.getBoundingClientRect().top - b.getBoundingClientRect().top));
+    return slats;
+  }
+
+  // The slats the sweep picks in turn (see sweep() in index.js): every slat of the main Plot, or max of them spread
+  // evenly from the first to the last
+  function sweepTargets(max = 32) {
+
+    const slats = mainSlats();
+    const list = (window.__rhpTargets ??= []);
+    const picks = slats.length <= max ? slats.map((_, i) => i) : [...new Set(Array.from({ length: max }, (_, k) => Math.round((k * (slats.length - 1)) / (max - 1))))];
+    return picks.map((i) => ({ index: i + 1, of: slats.length, name: snippet([...slats[i].querySelectorAll(".rhp-label")].map(seenText).find((x) => x) ?? ""), target: list.push(slats[i]) - 1 }));
+  }
+
+  // The window widths at which the page's own media queries switch: the last width of one layout and the first of the
+  // next (for max-width: N, N and N + 1; for min-width: N, N - 1 and N; the range forms likewise). An em counts 16px.
+  function breakpoints() {
+
+    const out = new Set();
+    const px = (v, unit) => (unit === "px" ? +v : +v * 16);
+    // the first width of the wider layout, from a bound and whether the narrow layout includes it
+    const add = (n, narrowHasIt) => {
+      const first = narrowHasIt ? Math.floor(n) + 1 : Math.ceil(n);
+      out.add(first - 1);
+      out.add(first);
+    };
+    const walk = (rules) => {
+      for (const r of rules ?? []) {
+        const text = r.media?.mediaText ?? "";
+        for (const m of text.matchAll(/(min|max)-width\s*:\s*([\d.]+)(px|r?em)/g)) add(px(m[2], m[3]), m[1] === "max");
+        for (const m of text.matchAll(/width\s*(<=|<|>=|>)\s*([\d.]+)(px|r?em)/g)) add(px(m[2], m[3]), m[1] === "<=" || m[1] === ">");
+        for (const m of text.matchAll(/([\d.]+)(px|r?em)\s*(<=|<|>=|>)\s*width/g)) add(px(m[1], m[2]), m[3] === ">=" || m[3] === "<");
+        if (r.cssRules) walk(r.cssRules);
+      }
+    };
+    for (const sheet of [...document.styleSheets, ...(document.adoptedStyleSheets ?? [])]) {
+      try {
+        walk(sheet.cssRules);
+      } catch {
+        // a style sheet from another origin (a font's CSS) cannot be read, and holds no layout
+      }
+    }
+    return [...out].filter((w) => w >= 200).sort((a, b) => b - a);
+  }
+
   // What the interaction pass works on: slats to point at (the first, the middle and the last of the largest chart, and
   // the one whose edge Label is widest: lit, a name that gets bolder can make room: "auto" measure again), buttons and
   // toggles, ranges, selects, a slider for the arrow keys, Plots with keyboard. Controls go by their accessible name.
@@ -968,16 +1026,8 @@ export function install() {
     const out = { slats: [], widest: null, buttons: [], ranges: [], selects: [], slider: null, keyboard: null };
     const label = (el) => (nameOf(el) ? `"${snippet(nameOf(el))}"` : describe(el));
 
-    // the largest chart (a size key drawn as a chart of its own comes before the chart it explains)
-    const area = (el) => el.getBoundingClientRect().width * el.getBoundingClientRect().height;
-    const chart = all().filter((c) => visible(c) && !c.parentElement?.closest(".rhp-chart")).sort((a, b) => area(b) - area(a))[0];
-    // its first Plot with slats that takes the pointer (an overlay of guides or a readout takes none)
-    const plots = chart ? [...chart.querySelectorAll(":scope > .rhp-body > .rhp-plot")].filter((p) => !p.classList.contains("rhp-scale") && [...p.children].some((s) => !s.hidden)) : [];
-    const plot = plots.find((p) => getComputedStyle(p).pointerEvents !== "none") ?? plots[0];
-    if (plot) {
-      const vertical = plot.dataset.rhpO === "v";
-      const slats = [...plot.children].filter((s) => !s.hidden && visible(s));
-      slats.sort((a, b) => (vertical ? a.getBoundingClientRect().left - b.getBoundingClientRect().left : a.getBoundingClientRect().top - b.getBoundingClientRect().top));
+    const slats = mainSlats();
+    if (slats.length) {
       const range = document.createRange();
       const nameWidth = (s) => Math.max(0, ...[...s.querySelectorAll(".rhp-label[data-rhp-edge]")].map((l) => {
         range.selectNodeContents(l);
@@ -1028,10 +1078,10 @@ export function install() {
   // point reaches it and something in the slat takes the pointer, something covers it: { covered } says what (another
   // slat of its Plot, or an element). When nothing in it takes the pointer (the page reads the pointer around the
   // chart), the first point on its first mark, or its center.
-  function pointAt(n, across = 0.5) {
+  function pointAt(n, across = 0.5, scroll = true) {
 
     const slat = window.__rhpTargets[n];
-    slat.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+    if (scroll) slat.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
     const marks = [...slat.querySelectorAll(MARKS + ", .rhp-cell")].filter(visible)
       .map((m) => ({ m, r: m.getBoundingClientRect(), pointer: getComputedStyle(m).cursor === "pointer" }))
       .filter(({ r }) => r.width * r.height > 0);
@@ -1090,6 +1140,7 @@ export function install() {
   // moves with it (rows sorted or removed), so only what it moves apart from its slat counts. What is fixed or sticky
   // moves with scrolling, so it is left out.
   let placed = [];
+  let sections = [];
   const at = (el) => {
     const r = el.getBoundingClientRect();
     return { el, x: r.left + scrollX, y: r.top + scrollY };
@@ -1118,6 +1169,13 @@ export function install() {
       const slat = chart ? null : el.closest(".rhp-plot > *");
       return { ...at(el), chart, slat: slat && at(slat), gutters: chart ? gutters(el) : null };
     });
+    // the end of each chart's section (its outermost box inside the body): a readout after the chart that takes
+    // another line makes it longer, even on a page shorter than the window
+    sections = [...new Set(charts.map((c) => {
+      let a = c;
+      while (a.parentElement && a.parentElement !== document.body && a.parentElement !== document.documentElement) a = a.parentElement;
+      return a;
+    }))].map((el) => ({ el, end: el.getBoundingClientRect().bottom + scrollY }));
   }
 
   function moved(n, lit = false) {
@@ -1150,6 +1208,12 @@ export function install() {
       if (now.o === "v" && far(start)) out.push({ what: "the plot's bottom edge", dx: 0, dy: -start, plot: true });
       if (now.o === "v" && far(end)) out.push({ what: "the plot's top edge", dx: 0, dy: end, plot: true });
     }
+    // lighting a slat makes no section longer or shorter: a readout after the chart that takes another line moves
+    // whatever follows it, which no control may show
+    for (const { el, end } of lit ? sections : []) {
+      const grew = Math.round(el.getBoundingClientRect().bottom + scrollY - end);
+      if (el.isConnected && far(grew)) out.push({ what: "the end of the chart's section", dx: 0, dy: grew });
+    }
 
     return out;
   }
@@ -1264,5 +1328,5 @@ export function install() {
     return { what: focusName(el), clip: box };
   }
 
-  window.__rhpProbe = { settle, calm, resized: () => [resizes, mutations], measure, transitions, colorItems, hide, show, contentBox, targets, pointAt, place, moved, record, stop, unseen, focused, focusStop };
+  window.__rhpProbe = { settle, calm, resized: () => [resizes, mutations], measure, transitions, colorItems, hide, show, contentBox, targets, sweepTargets, breakpoints, pointAt, place, moved, record, stop, unseen, focused, focusStop };
 }

package/src/check/interact.js

@@ -5,7 +5,7 @@
 // look), what threw, and what moved: a control other than the one used, a chart's top, or the plot while a slat is
 // lit (the layout jumps); for a tap, also whether the reader sees none of the text it changed (unseen): all of it lies
 // outside the window.
-import { decode } from "./png.js";
+import { seenPixels } from "./png.js";
 
 const changes = (seen) => {
 
@@ -20,24 +20,6 @@ const changes = (seen) => {
   return parts.join(", ");
 };
 
-// How many pixels of two screenshots of one box differ enough to see (their channels by more than 24 in all: a
-// tint of 6% of the ink over the paper shows, drawing one page twice changes nothing)
-function seenPixels(a, b) {
-
-  if (a.equals(b)) return 0;
-
-  const x = decode(a);
-  const y = decode(b);
-  if (x.width !== y.width || x.height !== y.height) return Infinity;
-
-  let n = 0;
-  for (let i = 0; i < x.data.length; i += 4) {
-    if (Math.abs(x.data[i] - y.data[i]) + Math.abs(x.data[i + 1] - y.data[i + 1]) + Math.abs(x.data[i + 2] - y.data[i + 2]) > 24) n++;
-  }
-
-  return n;
-}
-
 // Tab through the page (up to 8 stops, until it comes back to one): each stop's box, with room around it for an
 // outline, is pictured focused and then blurred (Tab goes on from an element blurred). A stop where under 20 pixels
 // change shows the keyboard reader nothing (outline: none, and nothing in its place).