@bezda/rhp-mcp 0.1.6 → 0.1.8

package/src/check/index.js

@@ -27,8 +27,10 @@
 //   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
+//   swept         [{ width, breakpoint, slats, reached, jumps, scrubbed }]: the widths at which every slat was picked in
+//                 turn (each width checked, and the page's own breakpoints between them), how many slats, how many the
+//                 pointer could reach, how many moved the layout, and when the pointer was moved along the chart
+//                 instead, scrubbed: { points, moved: how many of its steps moved something }
 //   screenshots   [{ width, dark, hover, path }]
 //   text          the report as plain text (what the CLI prints)
 import fs from "fs";
@@ -39,7 +41,7 @@ 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";
-import { fromProbe, fixForError, placeOf } from "./findings.js";
+import { fromProbe, fixForError, placeOf, SEE } from "./findings.js";
 import { textContrast, faintMarks, colorBlind } from "./colors.js";
 import { decode } from "./png.js";
 import { interact as interactionPass } from "./interact.js";
@@ -94,17 +96,28 @@ function source({ file, code, format }) {
 // 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.
+// throws is tagged with it in events, as the interaction pass does. When the main chart draws a line or an area, a
+// layer over the plot takes the pointer (the slats cannot be pointed at) or the Plot has one or two slats (a line per
+// series), the reader moves along the chart, and the sweep scrubs it first (scrub()). { slats, reached: the slats it
+// could point at, jumps, scrub }
 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());
+  await page.mouse.move(0, 0);
+  await page.evaluate(() => {
+    window.__rhpProbe.place();
+    window.__rhpProbe.placeLines();
+    window.__rhpProbe.watch(true);
+  });
+  const first = slats.length ? await page.evaluate((n) => window.__rhpProbe.pointAt(n), slats[0].target).catch(() => null) : null;
+  const scrubbed = slats.length ? await scrub(page, events, slats.length <= 2 || !!first?.covered) : null;
+  let reached = 0;
   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;
+    reached++;
     const name = `slat ${s.index} of ${s.of}${s.name ? ` (${s.name})` : ""}`;
     const before = events.length;
     try {
@@ -120,8 +133,92 @@ async function sweep(page, touch, events) {
     const moved = await page.evaluate((n) => window.__rhpProbe.moved(n, true), s.target).catch(() => []);
     if (moved.length) jumps.push({ target: name, moved });
   }
+  await page.evaluate(() => window.__rhpProbe.watch(false)).catch(() => {});
   if (!touch) await page.mouse.move(0, 0);
-  return { slats: slats.length, jumps };
+  return { slats: slats.length, reached, jumps, scrub: scrubbed };
+}
+
+// Moves the mouse along the main chart in small steps (scrubPath() in inpage.js, which says when), as a reader reading
+// a chart that follows the pointer across its plot (a line read day by day), at every width: a finger dragging along a phone's plot
+// shows the same readout. Each step is measured against the page at rest (place() and placeLines() before it): the
+// layout, as for a pick (moved()), and the lines of text around the charts (slides()), which jitter when a label
+// slides as the value before it changes width, or a readout takes another line on some days.
+// { points, steps: [what moved at each step that moved anything] }
+async function scrub(page, events, force) {
+
+  const path = await page.evaluate((f) => window.__rhpProbe.scrubPath(f), force).catch(() => null);
+  if (!path?.points.length) return null;
+  const start = events.length;
+  const steps = [];
+  let said = null;
+  let changes = 0;
+  try {
+    for (const p of path.points) {
+      await page.mouse.move(p.x, p.y);
+      await page.evaluate(() => new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done))));
+      const [moved, text] = await page.evaluate((n) => [[...window.__rhpProbe.moved(n, true).filter((m) => !m.text), ...window.__rhpProbe.slides()], window.__rhpProbe.state().text], path.target).catch(() => [[], said]);
+      if (said !== null && text !== said) changes++;
+      said = text;
+      if (moved.length) steps.push(moved);
+    }
+  } finally {
+    await page.mouse.move(0, 0).catch(() => {});
+    for (const e of events.slice(start)) {
+      if (e.kind === "pageerror" || e.kind === "console-error") e.during ??= "moving the pointer along the chart";
+    }
+  }
+  // (a readout that changes at three steps in four or more follows the pointer along the chart: a sentence that slides
+  // there jitters; one that changes less often changes once per mark, and only what a pick counts counts)
+  const continuous = changes >= 0.75 * (path.points.length - 1);
+  const kept = steps.map((moved) => (continuous ? moved : moved.filter((m) => !m.strict))).filter((moved) => moved.length);
+  return { points: path.points.length, continuous, steps: kept };
+}
+
+// Moves the mouse from a slat to its neighbor in small steps (three pairs of the main Plot: the first, the middle and
+// the last), on a page at rest with reduced motion asked for, and notes each pair where the page, between two slats
+// that each show something, goes back for a moment to what it shows with the pointer away: the readout, or the lit
+// slat, flickers in the gap.
+async function glide(page, events) {
+
+  const start = events.length;
+  const pairs = await page.evaluate(() => window.__rhpProbe.neighbors()).catch(() => []);
+  if (!pairs.length) return [];
+  const frame = () => page.evaluate(() => new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(done))));
+  const state = () => page.evaluate(() => window.__rhpProbe.state());
+  const name = (s) => `slat ${s.index} of ${s.of}${s.name ? ` (${s.name})` : ""}`;
+  const out = [];
+  try {
+    await page.mouse.move(0, 0);
+    await frame();
+    const rest = await state();
+    for (const [a, b] of pairs) {
+      // (from the middle of one slat's largest mark to the middle of the next one's: what each slat shows of its own)
+      const p = await page.evaluate((n) => window.__rhpProbe.markCenter(n), a.target).catch(() => null);
+      const q = await page.evaluate((n) => window.__rhpProbe.markCenter(n, false), b.target).catch(() => null);
+      if (![p?.x, p?.y, q?.x, q?.y].every(Number.isFinite)) continue;
+      await page.mouse.move(p.x, p.y);
+      await frame();
+      const from = await state();
+      const seen = [];
+      for (let k = 1; k <= 12; k++) {
+        await page.mouse.move(p.x + ((q.x - p.x) * k) / 12, p.y + ((q.y - p.y) * k) / 12);
+        await frame();
+        seen.push(await state());
+      }
+      const to = seen.at(-1);
+      // The text, or the look of the slats, blinks when both slats show something other than the rest in it, and a
+      // step between them shows the rest (a slat the page lights at rest shows the rest of its own, and does not blink)
+      const blinks = (key) => from[key] !== rest[key] && to[key] !== rest[key] && seen.slice(0, -1).some((s) => s[key] === rest[key]);
+      const readout = blinks("text");
+      if (readout || blinks("look")) out.push({ from: name(a), to: name(b), readout });
+    }
+  } finally {
+    await page.mouse.move(0, 0).catch(() => {});
+    for (const e of events.slice(start)) {
+      if (e.kind === "pageerror" || e.kind === "console-error") e.during ??= "moving the mouse from a slat to its neighbor";
+    }
+  }
+  return out;
 }
 
 export async function check(options = {}) {
@@ -374,8 +471,17 @@ export async function check(options = {}) {
       // 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 = [];
+      let flicker = [];
+      let away = null;
       if (wantInteract) {
         swept.push({ width, ...(await sweep(page, phone, events)) });
+        // what a reader scrolling through a tall chart loses sight of, and (with a mouse) a readout that flickers between slats
+        const scrolled = events.length;
+        away = await page.evaluate((h) => window.__rhpProbe.scrollsAway(h), phone ? PHONE_WINDOW : 900).catch(() => null);
+        for (const e of events.slice(scrolled)) {
+          if (e.kind === "pageerror" || e.kind === "console-error") e.during ??= "scrolling through the chart";
+        }
+        if (!phone && i === 0) flicker = await glide(page, 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)) {
@@ -427,7 +533,7 @@ 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, selection, swept, ms: Math.round(performance.now() - w0) });
+      results.push({ width, index: i, seen, events, guarded, colorFindings, interactions: interactions.map((x) => ({ width, ...x })), unfocused, selection, swept, flicker, away, 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 });
@@ -493,23 +599,58 @@ export async function check(options = {}) {
       findings.push({ ...f, width: r.width });
     }
 
-    // the layout jumping when an interaction runs: the same things moving for several interactions is one finding
+    // the layout jumping when an interaction runs: the same things moving for several interactions is one finding.
+    // Texts that moved with what jumped (by the same amount) are that jump; the others are one text-shift finding for
+    // the width, with each text at the most it moved, or, as the pointer moves along the chart, one jitter finding.
     const jumps = new Map();
+    const texted = { "text-shift": { found: null, by: new Map() }, jitter: { found: null, by: new Map() } };
+    const add = (kind, target, moved, code = "text-shift") => {
+      const other = moved.filter((m) => !m.text);
+      const texts = moved.filter((m) => m.text && !other.some((o) => Math.abs(o.dx - m.dx) <= 1 && Math.abs(o.dy - m.dy) <= 1));
+      if (other.length) {
+        const key = other.map((m) => m.what).join("\n");
+        if (jumps.has(key)) jumps.get(key).more++;
+        else jumps.set(key, { code: "layout-jump", kind, target, moved: other, more: 0 });
+      }
+      if (!texts.length) return;
+      const t = texted[code];
+      if (t.found) t.found.more++;
+      else t.found = { code, kind, target, more: 0 };
+      for (const m of texts) {
+        const was = t.by.get(m.what);
+        if (!was || Math.abs(m.dx) + Math.abs(m.dy) > Math.abs(was.dx) + Math.abs(was.dy)) t.by.set(m.what, m);
+      }
+    };
     for (const x of r.interactions.filter((x) => x.moved?.length)) {
-      const key = x.moved.map((m) => m.what).join("\n");
-      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 });
+      add(x.kind, x.target, x.moved);
     }
     for (const sw of r.swept) {
+      const beside = sw.breakpoint ? ` at ${sw.width}px, beside one of the page's own breakpoints` : "";
+      for (const moved of sw.scrub?.steps ?? []) {
+        add("scrub", `the chart${beside}`, moved, "jitter");
+      }
       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 });
+        add("pick", `${j.target}${beside}`, j.moved);
       }
     }
     for (const j of jumps.values()) {
       findings.push({ ...fromProbe(j, {}), width: r.width });
     }
+    // (a text the scrub found jittering is that finding: a pick that moved it is one of the steps along the chart)
+    for (const what of texted.jitter.by.keys()) {
+      texted["text-shift"].by.delete(what);
+    }
+    for (const { found, by } of Object.values(texted)) {
+      if (!found || !by.size) continue;
+      const moved = [...by.values()].sort((a, b) => Math.abs(b.dx) + Math.abs(b.dy) - Math.abs(a.dx) - Math.abs(a.dy));
+      findings.push({ ...fromProbe({ ...found, moved }, {}), width: r.width });
+    }
+
+    // a readout or a lit slat that goes back to how it is at rest between two slats, as the mouse goes from one to the next
+    if (r.flicker.length) findings.push({ ...fromProbe({ code: "flicker", ...r.flicker[0], more: r.flicker.length - 1 }, {}), width: r.width });
+
+    // the controls or the readout out of view while the reader is in the middle of a tall chart
+    if (r.away) findings.push({ ...fromProbe({ code: "scrolls-away", ...r.away, phone: r.width <= PHONE }, {}), width: r.width });
 
     // taps whose every change of text lies outside the window: one finding, on the last of them (the furthest slat)
     const unseen = r.interactions.filter((x) => x.unseen);
@@ -526,7 +667,7 @@ export async function check(options = {}) {
   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);
+  const swept = results.flatMap((r) => r.swept.map(({ width, breakpoint, slats, reached, jumps, scrub }) => ({ width, breakpoint: !!breakpoint, slats, reached, jumps: jumps.length, scrubbed: scrub ? { points: scrub.points, moved: scrub.steps.length } : null }))).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, selectionAudits, swept, screenshots, timings, started });
@@ -544,7 +685,7 @@ function finish({ findings, started, timings, ...rest }) {
       if (f.width != null && !had.widths.includes(f.width)) had.widths.push(f.width);
       continue;
     }
-    merged.set(key, { level: f.level, code: f.code, message: f.message, fix: f.fix, width: f.width ?? null, widths: f.width != null ? [f.width] : [] });
+    merged.set(key, { level: f.level, code: f.code, message: f.message, fix: f.fix, see: SEE[f.code] ?? null, width: f.width ?? null, widths: f.width != null ? [f.width] : [] });
   }
 
   const list = [...merged.values()].sort((a, b) => LEVELS[a.level] - LEVELS[b.level]);

package/src/check/inpage.js

@@ -654,16 +654,29 @@ export function install() {
       if (past.size) add({ code: "series-past-theme", keys: [...past.keys()].sort((a, b) => a - b), count: [...past.values()].reduce((a, b) => a + b, 0), have });
     }
 
-    // Page CSS that reaches into a chart and sets what rhp's own CSS sets there: it loses, so it changes nothing
+    // Page CSS that reaches into a chart and sets what rhp's own CSS sets there: it loses, so it changes nothing. rhp's
+    // rules are the ones it adopts and, on a page that links rhp.css (linkedCss), the ones in rhp's layers there.
+    const pageSheets = [...document.styleSheets].filter((s) => !s.ownerNode?.matches?.("[data-rhp-layers], [data-rhp-server]"));
+    const pageRules = styleRules(pageSheets);
+    const rhpRules = [...own, ...pageRules.filter((r) => /^rhp(\.|$)/.test(r.layer))];
     const byProp = new Map();
-    for (const r of own) {
+    for (const r of rhpRules) {
       for (const p of r.props) {
         if (!byProp.has(p)) byProp.set(p, []);
         byProp.get(p).push(r.selector);
       }
     }
-    const pageSheets = [...document.styleSheets].filter((s) => !s.ownerNode?.matches?.("[data-rhp-layers], [data-rhp-server]"));
-    for (const r of styleRules(pageSheets)) {
+    // A chart without the guard (noCssGuard): page CSS reaches what rhp doesn't set itself on the elements rhp makes.
+    // The guard is the rhp rule with display: revert; once a chart says noCssGuard it applies only to charts that don't,
+    // and with noCssGuard() there is none.
+    const guardRule = rhpRules.find((r) => r.rule.style.getPropertyValue("display") === "revert" && r.selector.includes(".rhp-body"));
+    const RHP_MADE = ".rhp-body, .rhp-axis, .rhp-gridline, .rhp-gridline > span, .rhp-plot, .rhp-plot > *, .rhp-bar, .rhp-dot, .rhp-tick, .rhp-label, .rhp-cell, .rhp-place, .rhp-area, .rhp-area path, .rhp-line, .rhp-line path";
+    const unguarded = (el) => matches(el, RHP_MADE) && (!guardRule || !matches(el, guardRule.selector));
+    // what the guard resets (display, float and box-sizing move nothing there), and values that change nothing
+    const GUARDED = /^(margin|padding|border|outline|background|box-shadow|overflow|min-width|min-height|max-width|max-height|width$|height$|vertical-align|transition|animation|text-decoration|user-select|touch-action|font|line-height|letter-spacing|word-spacing|text-transform|text-indent|text-align|text-shadow|color$|white-space|text-wrap|word-break|overflow-wrap|hyphens|line-break)/;
+    const harmless = (v) => /^(0|0px|0%|0s|none|auto|visible|baseline|normal|initial|unset|inherit|revert|revert-layer|transparent|currentcolor|rgba\(0, 0, 0, 0\))$/i.test(v.trim());
+    const family = (p) => p.match(/^(background|border|margin|padding|font|outline|text-decoration|transition|animation|inset|overflow|grid|flex|columns?|list-style)/)?.[1] ?? p;
+    for (const r of pageRules) {
       if (/^rhp(\.|$)/.test(r.layer) || !r.props.length) continue;
       let matched = [];
       try {
@@ -673,16 +686,51 @@ export function install() {
       }
       const reached = matched.filter((el) => el.closest(".rhp-chart")).slice(0, 60);
       if (!reached.length) continue;
+      const loose = reached.filter(unguarded);
+      const live = r.props.filter((p) => GUARDED.test(p) && !harmless(r.rule.style.getPropertyValue(p)) && loose.some((el) => !(byProp.get(p) ?? []).some((sel) => matches(el, sel))));
+      if (live.length) {
+        const first = loose.find((el) => live.some((p) => !(byProp.get(p) ?? []).some((sel) => matches(el, sel))));
+        add({ code: "page-css-reaches", selector: snippet(r.selector), props: [...new Set(live.map(family))], what: first.matches(".rhp-gridline > span") ? "an axis number" : describe(first), count: loose.length });
+      }
       // only a rule aimed at the chart: one that names rhp's classes, or one with a class, an id or an attribute on its
       // subject that reaches only elements in charts (a reset such as svg { display: block } is not aimed at it)
       const subjects = r.selector.split(/,(?![^(]*\))/).map((x) => x.trim().split(/\s*[\s>+~]\s*(?![^(]*\))/).pop());
       if (!/\.rhp-/.test(r.selector) && !(reached.length === matched.length && subjects.every((x) => /[.#[]/.test(x)))) continue;
       const dead = r.props.filter((p) => byProp.has(p) && reached.every((el) => byProp.get(p).some((sel) => matches(el, sel))));
       if (!dead.length) continue;
-      const family = (p) => p.match(/^(background|border|margin|padding|font|outline|text-decoration|transition|animation|inset|overflow|grid|flex|columns?|list-style)/)?.[1] ?? p;
       add({ code: "page-css-ignored", selector: snippet(r.selector), props: [...new Set(dead.map(family))], what: describe(reached[0]), count: reached.length });
     }
 
+    // The browser's own styles for a slat root's element (a button's border, a p's margins, an svg's overflow), which the
+    // guard resets: in a chart without it they stay. What no rule (rhp's, a slat's, the page's) and no style attribute
+    // sets on the root, and differs from what the guard gives, comes from the browser.
+    const setByRule = (el, p) => el.style.getPropertyValue(p) !== "" || (byProp.get(p) ?? []).some((sel) => matches(el, sel))
+      || pageRules.some((r) => r.props.includes(p) && matches(el, r.selector));
+    const defaults = new Map();
+    for (const el of document.querySelectorAll(".rhp-chart .rhp-plot > *")) {
+      if (!unguarded(el)) continue;
+      const s = getComputedStyle(el);
+      const up = getComputedStyle(el.parentElement);
+      const sides = ["top", "right", "bottom", "left"];
+      const off = [
+        ...sides.map((d) => [`margin-${d}`, s.getPropertyValue(`margin-${d}`) !== "0px"]),
+        ...sides.map((d) => [`padding-${d}`, s.getPropertyValue(`padding-${d}`) !== "0px"]),
+        ...sides.map((d) => [`border-${d}-width`, s.getPropertyValue(`border-${d}-style`) !== "none" && s.getPropertyValue(`border-${d}-width`) !== "0px"]),
+        ["text-decoration-line", s.getPropertyValue("text-decoration-line") !== "none"],
+        ["background-color", s.getPropertyValue("background-color") !== "rgba(0, 0, 0, 0)"],
+        ["overflow-x", el.localName === "svg" && s.getPropertyValue("overflow-x") !== "visible"],
+        ...["font-size", "font-weight", "font-family", "color"].map((p) => [p, s.getPropertyValue(p) !== up.getPropertyValue(p)]),
+      ].filter(([p, differs]) => differs && !setByRule(el, p)).map(([p]) => family(p.replace(/^border-\w+-width$/, "border").replace(/^overflow-x$/, "overflow")));
+      if (!off.length) continue;
+      const seen = defaults.get(el.localName) ?? { props: new Set(), count: 0, el };
+      off.forEach((p) => seen.props.add(p));
+      seen.count++;
+      defaults.set(el.localName, seen);
+    }
+    for (const [tag, d] of defaults) {
+      add({ code: "page-css-reaches", browser: tag, props: [...d.props], what: describe(d.el), count: d.count });
+    }
+
     // Text too small to read
     let tiny = null;
     let tinyCount = 0;
@@ -1188,8 +1236,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];
@@ -1226,6 +1322,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;
   }
@@ -1340,5 +1458,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 };
 }