@bezda/rhp-mcp 0.1.5 → 0.1.7

package/src/check/inpage.js

@@ -1045,7 +1045,8 @@ export function install() {
     const buttons = [...document.querySelectorAll("button, [role=button], [role=switch], [role=tab], [role=radio], [role=checkbox], input[type=checkbox], input[type=radio], summary")]
       .filter((b) => usable(b) && !(b.type === "submit" && b.form) && !b.closest("a[href]"));
     for (const b of buttons.slice(0, 12)) {
-      out.buttons.push({ label: label(b), role: b.getAttribute("role") ?? b.type ?? b.localName, target: keep(b) });
+      out.buttons.push({ label: label(b), role: b.getAttribute("role") ?? b.type ?? b.localName, target: keep(b),
+        view: b.hasAttribute("data-poster-view-toggle") ? b.getAttribute("aria-controls") : null });
     }
 
     for (const r of [...document.querySelectorAll("input[type=range]")].filter(usable).slice(0, 6)) {
@@ -1123,7 +1124,8 @@ export function install() {
     if (hit) return hit;
 
     const r = slat.getBoundingClientRect();
-    const { x, y } = marks.length ? pointsOn(marks[0])[0] : { x: r.left + r.width / 2, y: r.top + r.height / 2 };
+    const { x, y } = marks.length ? pointsOn(marks[0])[0] : { x: r.left + r.width * across, y: r.top + r.height / 2 };
+    if (reaches({ x, y })) return { x, y };
     const takes = (e) => getComputedStyle(e).pointerEvents !== "none" && e.checkVisibility({ visibilityProperty: true }) && e.getBoundingClientRect().width * e.getBoundingClientRect().height > 0;
     if ([slat, ...slat.querySelectorAll("*")].some(takes)) {
       const on = document.elementFromPoint(x, y);
@@ -1141,8 +1143,13 @@ export function install() {
   // moves with scrolling, so it is left out.
   let placed = [];
   let sections = [];
+  let viewRoot = null;
   const at = (el) => {
     const r = el.getBoundingClientRect();
+    if (viewRoot?.contains(el)) {
+      const root = viewRoot.getBoundingClientRect(), scale = root.width / viewRoot.offsetWidth;
+      return {el,x:(r.left-root.left)/scale,y:(r.top-root.top)/scale};
+    }
     return { el, x: r.left + scrollX, y: r.top + scrollY };
   };
   // The room "auto" gives names, in px: the chart body's first and last grid tracks (columns, or rows when vertical)
@@ -1155,7 +1162,12 @@ export function install() {
     if (tracks.length < 3) return null;
     return o === "h" ? { o, start: tracks[0], end: tracks.at(-1) } : { o, start: tracks.at(-1), end: tracks[0] };
   };
-  function place() {
+  function place(view = null) {
+
+    // A view toggle deliberately scales the poster and moves the flow below it.
+    // Its contents must still keep the same layout in the poster's own coordinates.
+    const controlled = view ? document.getElementById(view) : null;
+    viewRoot = controlled?.matches(".poster") ? controlled : null;
 
     const pinned = (el) => {
       for (let a = el; a && a.nodeType === 1; a = a.parentElement) {
@@ -1164,7 +1176,7 @@ export function install() {
       return false;
     };
     const charts = all().filter((c) => !c.parentElement?.closest(".rhp-chart"));
-    placed = [...document.querySelectorAll(CONTROLS), ...charts].filter((el) => visible(el) && !pinned(el)).map((el) => {
+    placed = [...document.querySelectorAll(CONTROLS), ...charts].filter((el) => visible(el) && !pinned(el) && (!viewRoot || viewRoot.contains(el))).map((el) => {
       const chart = charts.includes(el);
       const slat = chart ? null : el.closest(".rhp-plot > *");
       return { ...at(el), chart, slat: slat && at(slat), gutters: chart ? gutters(el) : null };
@@ -1176,8 +1188,56 @@ export function install() {
       while (a.parentElement && a.parentElement !== document.body && a.parentElement !== document.documentElement) a = a.parentElement;
       return a;
     }))].map((el) => ({ el, end: el.getBoundingClientRect().bottom + scrollY }));
+    // the texts around the charts, each placed in the box it floats in (see words), and the boxes with a background or
+    // a border around them that hold no chart (a readout's card, a legend's panel), with their size
+    words = [];
+    boxes = [];
+    for (const { el: root } of sections) {
+      for (const el of [root, ...root.querySelectorAll("*")]) {
+        if (words.length >= 600) break;
+        if (el.closest(".rhp-chart") || el.closest(CONTROLS) || !visible(el) || (viewRoot && !viewRoot.contains(el))) continue;
+        const text = ownText(el);
+        if (text && el.getBoundingClientRect().width > 0) {
+          const frame = frameOf(el);
+          words.push({ ...within(el, frame), text, frame });
+        }
+        if (boxes.length < 60 && framed(el) && !el.querySelector(".rhp-chart") && !/fixed|absolute/.test(getComputedStyle(el).position)) {
+          const r = el.getBoundingClientRect();
+          const scale = scaleOf(el);
+          if (r.width >= 24 && r.height >= 16 && el.textContent.trim()) boxes.push({ el, w: r.width / scale, h: r.height / scale, name: snippet(seenText(el)) });
+        }
+      }
+    }
   }
 
+  // A text is placed in the box it floats in when it floats (fixed, sticky or absolute: a readout pinned to the
+  // window, a tooltip that follows the pointer), else on the page: the box may move as a whole, and only a move inside
+  // it counts. Its own text is its text nodes', not its children's, so a label beside a value that changed keeps its own.
+  let words = [];
+  let boxes = [];
+  const frameOf = (el) => {
+    for (let a = el; a && a.nodeType === 1 && a !== document.body; a = a.parentElement) {
+      if (/fixed|sticky|absolute/.test(getComputedStyle(a).position)) return a;
+    }
+    return null;
+  };
+  const ownText = (el) => [...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.data).join(" ").replace(/\s+/g, " ").trim();
+  const scaleOf = (el) => (viewRoot?.contains(el) ? viewRoot.getBoundingClientRect().width / viewRoot.offsetWidth : 1);
+  const within = (el, frame) => {
+    if (!frame) return at(el);
+    const r = el.getBoundingClientRect();
+    const f = frame.getBoundingClientRect();
+    const scale = scaleOf(el);
+    return { el, x: (r.left - f.left) / scale, y: (r.top - f.top) / scale };
+  };
+  // a box the reader sees the edges of: a background, a border or a shadow
+  const framed = (el) => {
+    const s = getComputedStyle(el);
+    const paint = (c) => c && c !== "transparent" && !/rgba\([^)]*,\s*0(\.0+)?\)$/.test(c);
+    const border = ["Top", "Right", "Bottom", "Left"].some((side) => parseFloat(s[`border${side}Width`]) >= 1 && paint(s[`border${side}Color`]) && s[`border${side}Style`] !== "none");
+    return paint(s.backgroundColor) || border || s.boxShadow !== "none";
+  };
+
   function moved(n, lit = false) {
 
     const used = window.__rhpTargets[n];
@@ -1214,6 +1274,28 @@ export function install() {
       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 });
     }
+    // lighting a slat leaves a readout's card or a legend's panel its size: one that grows or shrinks with what it says
+    // shows its edges jumping
+    for (const b of lit ? boxes : []) {
+      if (!b.el.isConnected || !visible(b.el)) continue;
+      const r = b.el.getBoundingClientRect();
+      const scale = scaleOf(b.el);
+      const dw = Math.round(r.width / scale - b.w);
+      const dh = Math.round(r.height / scale - b.h);
+      if (far(dw) || far(dh)) out.push({ what: b.name ? `the box of "${b.name}"` : "a box", dx: 0, dy: 0, dw, dh, box: true });
+    }
+    // a text that still says the same thing stays where it was in its box: one that moves because a value beside it got
+    // wider, or because a line above it wrapped, makes the reader lose their place (text-shift)
+    for (const w of words) {
+      if (!w.el.isConnected || !visible(w.el) || ownText(w.el) !== w.text || frameOf(w.el) !== w.frame) continue;
+      const now = within(w.el, w.frame);
+      const dx = Math.round(now.x - w.x);
+      const dy = Math.round(now.y - w.y);
+      // (a phrase of three words or more that only slides along its line, after a name or a value that changed, is a
+      // sentence that reads on: "4.1% of people on Earth speak Hindi". A label of a word or two that slides is not)
+      if (!far(dy) && (w.text.match(/[\p{L}\p{N}]+/gu) ?? []).length >= 3) continue;
+      if (far(dx) || far(dy)) out.push({ what: `"${snippet(w.text)}"`, dx, dy, text: true });
+    }
 
     return out;
   }
@@ -1328,5 +1410,210 @@ export function install() {
     return { what: focusName(el), clip: box };
   }
 
-  window.__rhpProbe = { settle, calm, resized: () => [resizes, mutations], measure, transitions, colorItems, hide, show, contentBox, targets, sweepTargets, breakpoints, pointAt, place, moved, record, stop, unseen, focused, focusStop };
+  // Three pairs of neighboring slats of the main Plot (the first two, two in the middle, the last two), for glide() in
+  // index.js
+  function neighbors() {
+
+    const slats = mainSlats();
+    if (slats.length < 3) return [];
+    const list = (window.__rhpTargets ??= []);
+    const one = (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 });
+
+    return [...new Set([0, Math.floor((slats.length - 1) / 2), slats.length - 2])].map((i) => [one(i), one(i + 1)]);
+  }
+
+  // The middle of a slat's largest mark (a target), in the window: where its own pick shows, for the glide. A slat with
+  // marks of its own (a box and its outlier dots) may show several things; its largest mark shows the slat's own.
+  function markCenter(n, scroll = true) {
+
+    const slat = window.__rhpTargets[n];
+    if (scroll) slat.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+    const area = (r) => r.width * r.height;
+    const mark = [...slat.querySelectorAll(MARKS)].filter(visible).map((m) => m.getBoundingClientRect()).filter((r) => area(r) > 0).sort((a, b) => area(b) - area(a))[0];
+    if (!mark) return null;
+
+    return { x: mark.left + mark.width / 2, y: mark.top + mark.height / 2 };
+  }
+
+  // What the reader sees of a pick, as two short hashes: the page's visible text, and how the main Plot's slats are
+  // drawn (the classes and inline styles of everything in them)
+  function state() {
+
+    const hash = (s) => {
+      let h = 5381;
+      for (let i = 0; i < s.length; i++) {
+        h = (h * 33 + s.charCodeAt(i)) | 0;
+      }
+      return h;
+    };
+    const look = mainSlats().map((s) => [s, ...s.querySelectorAll("*")].map((e) => (e.getAttribute("class") ?? "") + (e.getAttribute("style") ?? "")).join("")).join("|");
+
+    return { text: hash(document.body.innerText), look: hash(look) };
+  }
+
+  // The elements around the charts whose text a pick changes (the readout), noted while the sweep picks every slat
+  let watcher = null;
+  const readout = new Set();
+  function watch(on) {
+
+    watcher?.disconnect();
+    watcher = null;
+    if (!on) return readout.size;
+    watcher = new MutationObserver((list) => {
+      for (const m of list) {
+        const el = m.type === "characterData" ? m.target.parentElement : m.target;
+        if (el?.nodeType === 1 && el !== document.body && !el.closest(".rhp-chart")) readout.add(el);
+      }
+    });
+    watcher.observe(document.body, { subtree: true, childList: true, characterData: true });
+    return 0;
+  }
+
+  // While the main chart is taller than three quarters of the window (height: a phone's is shorter than the page's),
+  // scrolled so that its middle is in the middle of the window: its controls (in its section, outside its slats, not
+  // the poster's fit and download icons) and its readout (what the sweep's picks wrote), when all of them are out of
+  // view. null when they are in view, or there are none.
+  function scrollsAway(height = innerHeight) {
+
+    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];
+    if (!chart || chart.getBoundingClientRect().height < height * 0.75) return null;
+    let section = chart;
+    while (section.parentElement && section.parentElement !== document.body && section.parentElement !== document.documentElement) section = section.parentElement;
+    const utility = /\b(fit|download|save|export|png|svg|share|print|full ?screen|restore|enlarge|shrink)\b/i;
+    const controls = [...section.querySelectorAll(CONTROLS)].filter((el) => visible(el) && !el.closest(".rhp-chart") && el.getBoundingClientRect().width > 0 && !utility.test(nameOf(el) || el.textContent));
+    const said = [...readout].filter((el) => el.isConnected && visible(el) && section.contains(el) && seenText(el));
+    if (!controls.length && !said.length) return null;
+
+    const y = scrollY;
+    const r = chart.getBoundingClientRect();
+    scrollTo({ left: scrollX, top: scrollY + r.top + r.height / 2 - height / 2, behavior: "instant" });
+    const inView = (el) => {
+      const b = el.getBoundingClientRect();
+      return b.width * b.height > 0 && b.bottom > 0 && b.top < height && b.right > 0 && b.left < innerWidth;
+    };
+    const out = {
+      controls: controls.some(inView) ? [] : controls.slice(0, 3).map((el) => focusName(el)),
+      readout: said.length && !said.some(inView) ? snippet(seenText(said[0])) : null,
+    };
+    scrollTo({ left: scrollX, top: y, behavior: "instant" });
+
+    return out.controls.length || out.readout ? out : null;
+  }
+
+  // The points the scrub moves the pointer through (see scrub() in index.js), when the reader moves along the chart:
+  // the main chart draws a line or an area (read day by day along its scale), or force (the sweep cannot point at its
+  // slats, or there are one or two). steps points through the middle of the plot, from just inside one end to just
+  // inside the other, with the plot scrolled to the middle of the window: along the scale of the plot that draws the
+  // line or the area, else along the main Plot's scale when it has one or two slats, else across its slats (columns
+  // side by side, or rows one under the other). Points outside the window are left out. { points, target: the plot,
+  // for moved() }
+  function scrubPath(force = false, steps = 40) {
+
+    const slats = mainSlats();
+    const main = slats[0]?.parentElement;
+    const chart = main?.closest(".rhp-chart");
+    const mark = chart ? [...chart.querySelectorAll(".rhp-line, .rhp-area")].find(visible) : null;
+    if (!main || (!mark && !force)) return { points: [] };
+    const plot = mark?.closest(".rhp-plot") ?? main;
+    plot.scrollIntoView({ block: "center", inline: "center", behavior: "instant" });
+    const r = plot.getBoundingClientRect();
+    const vertical = plot.dataset.rhpO === "v";
+    const across = mark || slats.length <= 2 ? !vertical : vertical;
+    const points = [];
+    for (let k = 0; k <= steps; k++) {
+      const f = 0.02 + (0.96 * k) / steps;
+      const p = across ? { x: r.left + r.width * f, y: r.top + r.height / 2 } : { x: r.left + r.width / 2, y: r.top + r.height * f };
+      if (p.x >= 0 && p.y >= 0 && p.x < innerWidth && p.y < innerHeight) points.push(p);
+    }
+
+    return { points, target: (window.__rhpTargets ??= []).push(plot) - 1 };
+  }
+
+  // The lines of text around the charts (outside them and their controls), for the scrub: each text node's first line
+  // box, in the box it floats in (see frameOf), keyed by where the node sits in the page so that one written again
+  // counts as the same. placeLines() notes them before the pointer moves; slides() then says which moved: a text that
+  // says the same thing and moved, or one whose words changed and that kept none of its edges (its start, its end or,
+  // on one line, its middle) where it was. A number at the start of its line may grow; a label after it that slides as
+  // it grows jitters under the reader's eyes at every step, and so does a whole sentence, on a chart whose readout
+  // changes at every step (a line read day by day). Over separate marks the readout changes once per mark, as a pick
+  // does, and only what a pick counts counts (see moved()): what is strict is left out there, a slide along its line of
+  // a text whose words changed, or of a sentence of three words or more. A text that moves up or down jumps, whatever
+  // it says and however often the readout changes. A text first seen after placeLines() is measured against where it
+  // was first seen.
+  let lines = new Map();
+  const keyOf = (node) => {
+    const path = [];
+    for (let n = node; n && n !== document.body && n.parentNode; n = n.parentNode) path.push([...n.parentNode.childNodes].indexOf(n));
+    return path.join(".");
+  };
+  const textNodes = () => {
+    const out = [];
+    for (const { el: root } of sections) {
+      if (!root.isConnected) continue;
+      const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+      for (let node = walker.nextNode(); node && out.length < 800; node = walker.nextNode()) {
+        const el = node.parentElement;
+        if (!el || !node.data.trim() || el.closest(".rhp-chart") || el.closest(CONTROLS) || !visible(el) || (viewRoot && !viewRoot.contains(el))) continue;
+        out.push(node);
+      }
+    }
+    return out;
+  };
+  const lineOf = (node) => {
+    const range = document.createRange();
+    range.selectNodeContents(node);
+    const rects = [...range.getClientRects()].filter((q) => q.width > 0 && q.height > 0);
+    if (!rects.length) return null;
+    const el = node.parentElement;
+    const frame = frameOf(el);
+    const f = frame ? frame.getBoundingClientRect() : { left: -scrollX, top: -scrollY };
+    const scale = scaleOf(el);
+    const left = (rects[0].left - f.left) / scale;
+    const right = (rects.at(-1).right - f.left) / scale;
+    // (the line it is part of: its nearest block, which a finding names when it holds more than this text)
+    let block = el;
+    while (block.parentElement && /^(inline|contents)$/.test(getComputedStyle(block).display)) block = block.parentElement;
+    return { text: node.data.replace(/\s+/g, " ").trim(), frame, left, right, mid: (left + right) / 2, top: (rects[0].top - f.top) / scale, one: rects.length === 1, line: snippet(seenText(block)) };
+  };
+  function placeLines() {
+
+    lines = new Map();
+    for (const node of textNodes()) {
+      const line = lineOf(node);
+      if (line) lines.set(keyOf(node), line);
+    }
+    return lines.size;
+  }
+  function slides() {
+
+    const out = [];
+    for (const node of textNodes()) {
+      const now = lineOf(node);
+      if (!now) continue;
+      const key = keyOf(node);
+      const was = lines.get(key);
+      if (!was) {
+        lines.set(key, now);
+        continue;
+      }
+      if (was.frame !== now.frame) continue;
+      const by = (k) => Math.round(now[k] - was[k]);
+      const dy = by("top");
+      let dx = by("left");
+      // (a line that moves up or down jumps whatever it says: only a slide along the line can be strict)
+      const strict = Math.abs(dy) <= 2 && (now.text !== was.text || (was.text.match(/[\p{L}\p{N}]+/gu) ?? []).length >= 3);
+      if (now.text !== was.text) {
+        const edges = [by("left"), by("right"), ...(now.one && was.one ? [by("mid")] : [])];
+        dx = edges.some((v) => Math.abs(v) <= 2) ? 0 : edges.reduce((a, b) => (Math.abs(b) < Math.abs(a) ? b : a));
+      }
+      // (a comma or a dot moves with the words around it, and is not named apart from them)
+      if ((Math.abs(dx) > 2 || Math.abs(dy) > 2) && /[\p{L}\p{N}]/u.test(was.text)) out.push({ what: `"${snippet(was.text)}"`, line: was.line !== snippet(was.text) ? was.line : null, dx, dy, text: true, strict });
+      if (out.length >= 40) break;
+    }
+
+    return out;
+  }
+
+  window.__rhpProbe = { settle, calm, resized: () => [resizes, mutations], measure, transitions, colorItems, hide, show, contentBox, targets, sweepTargets, breakpoints, pointAt, place, moved, record, stop, unseen, focused, focusStop, neighbors, markCenter, state, watch, scrollsAway, scrubPath, placeLines, slides };
 }

package/src/check/interact.js

@@ -77,7 +77,7 @@ export async function interact(page, { events, capture, shoot, taps = false }) {
 
   // ready runs before the layout is noted (it scrolls the target into view), act is the interaction itself. lit: the
   // interaction lights a slat (no data changes), so the plot must stay where it is; texts: note the texts it changes
-  const step = async (kind, target, { ready, act, compareLook = false, used = null, lit = false, texts = false }) => {
+  const step = async (kind, target, { ready, act, compareLook = false, used = null, lit = false, texts = false, view = null }) => {
     const before = events.length;
     const rest = compareLook ? await look() : null;
     let error = null;
@@ -89,14 +89,26 @@ export async function interact(page, { events, capture, shoot, taps = false }) {
       }
     };
     await attempt(ready);
-    await page.evaluate((keep) => {
-      window.__rhpProbe.place();
+    await page.evaluate(({keep,view}) => {
+      window.__rhpProbe.place(view);
       window.__rhpProbe.record(keep);
-    }, texts);
+    }, {keep:texts,view});
     if (!error) await attempt(act);
+    // a control that sets the page moving (Play) is read as it moves too: a text that jitters while the values run
+    // may be back in place at the end
+    const passing = [];
+    for (let k = 0; !lit && !error && k < 5; k++) {
+      await page.waitForTimeout(200);
+      passing.push(...(await page.evaluate((n) => window.__rhpProbe.moved(n, false), used).catch(() => [])).filter((m) => m.text));
+    }
     await page.evaluate(() => window.__rhpProbe.settle(1500)).catch(() => {});
     const seen = await page.evaluate(() => window.__rhpProbe.stop()).catch(() => null);
     const moved = await page.evaluate(([n, l]) => window.__rhpProbe.moved(n, l), [used, lit]).catch(() => []);
+    for (const m of passing) {
+      const was = moved.find((x) => x.what === m.what);
+      if (!was) moved.push(m);
+      else if (Math.abs(m.dx) + Math.abs(m.dy) > Math.abs(was.dx) + Math.abs(was.dy)) Object.assign(was, m);
+    }
     // a value a slat read once, and that this interaction changed, is shown stale (the guard reads them again)
     await page.evaluate(() => globalThis.__rhpCheck?.recheck?.()).catch(() => {});
     const thrown = events.slice(before).filter((e) => e.kind === "pageerror" || e.kind === "console-error");
@@ -168,13 +180,19 @@ export async function interact(page, { events, capture, shoot, taps = false }) {
 
   for (const b of t.buttons) {
     const el = await handle(b.target);
+    const pressed = await el.asElement().getAttribute("aria-pressed");
     const role = b.role === "checkbox" || b.role === "radio" || b.role === "switch" ? b.role : "button";
     const entry = await step("click", `${role} ${b.label}`, {
       ready: () => el.asElement().scrollIntoViewIfNeeded({ timeout: 1500 }),
       act: () => el.asElement().click({ timeout: 1500 }),
       used: b.target,
+      view: b.view,
     });
     if (entry.could) entry.how = `could not be clicked (${/intercepts pointer|covered|not visible|outside of the viewport/.test(entry.could) ? "covered or out of view" : entry.could})`;
+    if (b.view && !entry.could && pressed !== await el.asElement().getAttribute("aria-pressed")) {
+      const label = await el.asElement().getAttribute("aria-label");
+      await step("click", `button "${label}"`, {act:()=>el.asElement().click({timeout:1500}),used:b.target,view:b.view});
+    }
   }
 
   for (const r of t.ranges) {

package/src/check/png.js

@@ -99,7 +99,7 @@ export function pixelsIn(image, { left, top, right, bottom }) {
 
 // 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)
-export function seenPixels(a, b) {
+export function seenPixels(a, b, ignore = []) {
 
   if (a.equals(b)) return 0;
 
@@ -109,6 +109,11 @@ export function seenPixels(a, b) {
 
   let n = 0;
   for (let i = 0; i < x.data.length; i += 4) {
+    if (ignore.length) {
+      const px = (i / 4) % x.width;
+      const py = Math.floor(i / 4 / x.width);
+      if (ignore.some((r) => px >= r.left && px < r.right && py >= r.top && py < r.bottom)) continue;
+    }
     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++;
   }
 

package/src/check/report.js

@@ -44,6 +44,7 @@ export function report(r) {
     list.forEach((f, i) => {
       lines.push(`${i + 1}. [${f.code}] ${f.message}${widthsOf(f)}`);
       if (f.fix) lines.push(`   Fix: ${f.fix}`);
+      if (f.see) lines.push(`   See: ${f.see}`);
     });
   };
 
@@ -88,9 +89,15 @@ export function report(r) {
       if (quiet.includes(x.kind)) continue;
       lines.push(`- ${x.kind} ${x.target}${x.width !== r.interactedAt ? ` at ${x.width}px` : ""}: ${x.how}${x.error ? `, and it threw: ${x.error}` : ""}`);
     }
-    // the sweep: one line, every width at which every slat was picked in turn
+    // the sweep: a line for the pointer moved along the chart, where it was, and one for every slat picked in turn, at
+    // every width at which it was (none when no slat could be reached: nothing was picked)
     const swept = (r.swept ?? []).filter((x) => x.slats);
-    if (swept.length) lines.push(`- every slat picked in turn (${swept[0].slats}) at ${swept.map((x) => `${x.width}px`).join(", ")}: ${swept.some((x) => x.jumps) ? "the layout jumped (see the warnings)" : "nothing else moved"}`);
+    const at = (list) => list.map((x) => `${x.width}px`).join(", ");
+    const scrubbed = swept.filter((x) => x.scrubbed);
+    if (scrubbed.length) lines.push(`- pointer moved along the chart (${scrubbed[0].scrubbed.points} steps) at ${at(scrubbed)}: ${scrubbed.some((x) => x.scrubbed.moved) ? "the layout or the readout moved (see the warnings)" : "nothing else moved"}`);
+    const picked = swept.filter((x) => x.reached ?? x.slats);
+    if (picked.length) lines.push(`- every slat picked in turn (${picked[0].reached < picked[0].slats ? `${picked[0].reached} of ${picked[0].slats} reached` : picked[0].slats}) at ${at(picked)}: ${picked.some((x) => x.jumps) ? "the layout jumped (see the warnings)" : "nothing else moved"}`);
+    else if (swept.length) lines.push(`- no slat picked in turn: something covers the slats' marks at ${at(swept)}`);
   } else if (r.charts?.length && r.interactedAt) {
     lines.push("", "Interactions: nothing to interact with (no slats to point at, no buttons, ranges or selects).");
   }

package/src/check/selection-controls.js

@@ -0,0 +1,105 @@
+// A control qualifies only when two of its values reproduce two different chart hover states.
+// This distinguishes a selection input from an unrelated filter without reading the chart's signals.
+import { seenPixels } from "./png.js";
+
+export async function controlSelection(page, { slats, off, look, away, settle }) {
+  const tested = [];
+  const findings = [];
+  const controls = await page.evaluate((target) => {
+    const poster = window.__rhpTargets[target]?.closest(".poster, figure");
+    const usable = (el) => {
+      const r = el.getBoundingClientRect();
+      return !el.closest(".rhp-chart") && !el.disabled && !el.readOnly && el.getAttribute("aria-disabled") !== "true"
+        && el.checkVisibility({ visibilityProperty: true }) && r.width > 0 && r.height > 0
+        && r.top >= 0 && r.bottom <= innerHeight && r.left >= 0 && r.right <= innerWidth;
+    };
+    window.__rhpSelectionControls = [...(poster?.querySelectorAll('input[type="range"], input[type="number"], select:not([multiple]), [role="slider"]') ?? [])].filter(usable).slice(0, 6);
+    return window.__rhpSelectionControls.map((el, index) => {
+      const kind = el.localName === "select" ? "select" : el.type === "number" ? "number" : "slider";
+      const name = el.getAttribute("aria-label") || [...(el.labels ?? [])].map((l) => l.textContent.trim()).join(" ") || el.id || kind;
+      const values = kind === "select" ? [...el.options].filter((o) => !o.disabled && !o.parentElement.disabled).map((o) => o.value)
+        : kind === "number" && el.min !== "" && el.max !== "" ? [el.min, el.max] : [];
+      return { index, kind, name, values };
+    });
+  }, slats[0].target);
+  if (!controls.length) return { tested, findings };
+  // Ignore native thumbs and their focus rings, while still comparing the chart and its readout.
+  const boxes = await page.evaluate(() => window.__rhpSelectionControls.map((el) => {
+    const r = el.getBoundingClientRect();
+    return { left: r.left - 8, right: r.right + 8, top: r.top - 8, bottom: r.bottom + 8 };
+  }));
+  const same = (a, b) => seenPixels(a, b, boxes) < 20;
+  const position = await page.evaluate(() => [scrollX, scrollY]);
+  const stablePosition = async () => (await page.evaluate(() => [scrollX, scrollY])).every((v, i) => v === position[i]);
+  const points = [];
+  // Include both ends of a single continuous hit surface as well as separate categorical marks.
+  for (const s of [slats[0], slats[Math.floor(slats.length / 2)], slats.at(-1)]) {
+    for (const across of slats.length === 1 ? [0.001, 0.5, 0.999] : [0.5]) {
+      const p = await page.evaluate(({ target, across }) => window.__rhpProbe.pointAt(target, across, false), { target: s.target, across });
+      if (!p.covered && !points.some((q) => Math.hypot(p.x - q.x, p.y - q.y) < 2)) points.push(p);
+    }
+  }
+  if (points.length < 2) return { tested, findings };
+  for (const control of controls) {
+    const handle = (await page.evaluateHandle((i) => window.__rhpSelectionControls[i], control.index)).asElement();
+    try {
+      const value = () => handle.evaluate((el) => el.value ?? el.getAttribute("aria-valuenow"));
+      const choose = async (end) => {
+        await handle.focus();
+        if (control.kind === "select") await handle.selectOption(control.values.at(end ? -1 : 0));
+        else if (control.kind === "number") await handle.fill(control.values[end]);
+        else await handle.press(end ? "End" : "Home");
+        await settle();
+      };
+      if (control.kind !== "slider" && control.values.length < 2) continue;
+      await handle.focus();
+      const previews = [];
+      for (const point of points) {
+        await page.mouse.move(point.x, point.y);
+        const image = await look();
+        if (!previews.some((p) => same(p.image, image))) previews.push({ point, image });
+      }
+      if (previews.length < 2) continue;
+      const states = [];
+      await away();
+      for (const end of [0, 1]) {
+        await choose(end);
+        const image = await look();
+        const preview = previews.find((p) => same(p.image, image));
+        if (preview) states.push({ end, value: await value(), image, preview });
+      }
+      if (states.length !== 2 || states[0].value === states[1].value || same(states[0].image, states[1].image)) continue;
+      if (!await stablePosition()) return { tested, findings };
+      const chosen = states[1];
+      const preview = states[0].preview;
+      await choose(chosen.end);
+      const pinned = await look();
+      if (!same(pinned, chosen.image) || !same(pinned, await look())) continue;
+      let when = null;
+      await page.mouse.move(preview.point.x, preview.point.y);
+      await settle();
+      // A thumb may follow the hover preview. It must return to the committed choice when preview ends.
+      await page.mouse.move(off.x, off.y);
+      const beside = await look();
+      if (await value() !== chosen.value || !same(pinned, beside)) when = "moving off the chart after hover";
+      await away();
+      const left = await look();
+      if (!when && (await value() !== chosen.value || !same(pinned, left))) when = "leaving the poster";
+      // Re-select before testing blur so a hover failure cannot disguise a separate focus reset.
+      await choose(chosen.end);
+      await page.mouse.click(off.x, off.y);
+      await away();
+      const blurred = await look();
+      if (!when && (await value() !== chosen.value || !same(pinned, blurred))) when = "clicking noninteractive poster text or margin";
+      if (!await stablePosition() || !same(blurred, await look())) return { tested, findings };
+      tested.push({ control: control.name, selectionPersists: !when, ...(when ? { failedAt: when } : {}) });
+      if (when) findings.push({ code: "selection-control-reset", control: control.name, when });
+      // Leave a committed selection for the click audit's baseline.
+      await choose(chosen.end);
+      await away();
+    } finally {
+      await handle.dispose();
+    }
+  }
+  return { tested, findings };
+}