ranger-compiler 3.5.1 → 3.5.2

package/dist/lib/evg/web/responsive/build.mjs

@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+/**
+ * Build the live responsive-layout page.
+ *
+ *   node lib/evg/web/responsive/build.mjs
+ *   node lib/evg/web/responsive/build.mjs --out path/to/evg/responsive
+ *
+ * Compiles `EvgResponsiveDemo.rgr` — which is EVGElement, EVGStyleSheet,
+ * EVGLayout, EVGTextEngine and EVGDisplayList, the whole engine — to a browser
+ * IIFE, and copies the page and the SVG painter beside it. Nothing about the
+ * layout is precomputed here: the compiled engine runs in the browser, at the
+ * width the window happens to be.
+ *
+ * The showcase build calls the same steps for /evg/responsive/ on Pages.
+ */
+import { execFileSync } from "node:child_process";
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(HERE, "../../../..");
+const argv = process.argv.slice(2);
+const outFlag = argv.indexOf("--out");
+const OUT = outFlag >= 0 ? path.resolve(argv[outFlag + 1]) : path.join(HERE, "dist");
+const STAGE = path.join(HERE, ".stage");
+
+fs.mkdirSync(STAGE, { recursive: true });
+fs.mkdirSync(OUT, { recursive: true });
+
+const env = { ...process.env, RANGER_LIB: "./compiler/Lang.rgr:./lib/stdops.rgr" };
+
+const log = execFileSync(
+  process.execPath,
+  [
+    "dist/rgrc.js",
+    "-es6",
+    "lib/evg/web/responsive/EvgResponsiveDemo.rgr",
+    `-d=${path.relative(ROOT, STAGE)}`,
+    "-o=evg_responsive_demo.js",
+    "-nodecli",
+  ],
+  { cwd: ROOT, env, encoding: "utf8" }
+);
+
+if (log.includes("Compilation FAILED")) {
+  process.stderr.write(log + "\n");
+  process.exit(1);
+}
+
+const rawPath = path.join(STAGE, "evg_responsive_demo.js");
+if (!fs.existsSync(rawPath)) {
+  process.stderr.write("compiler wrote no " + rawPath + "\n");
+  process.exit(1);
+}
+
+const bundle = fs.readFileSync(rawPath, "utf8").replace(/^#![^\n]*\n/, "");
+
+// Load it here, with `require` hidden, exactly as the browser will: the
+// generated file asks for Node's modules when it can see them, and a bundle
+// that only fails once it is in a browser fails somewhere nobody is watching.
+{
+  const previous = globalThis.require;
+  globalThis.require = undefined;
+  const found = (0, eval)(bundle + "; typeof EvgResponsiveDemo + '|' + typeof EVGLayout + '|' + typeof EVGHostTextMeasurer");
+  globalThis.require = previous;
+  if (found !== "function|function|function") {
+    throw new Error("evg_responsive_demo.js missing browser exports (got " + found + ")");
+  }
+}
+
+const scoped =
+  "// GENERATED from lib/evg/web/responsive/EvgResponsiveDemo.rgr — do not edit.\n" +
+  "(function () {\n" +
+  bundle +
+  "\n;globalThis.EvgResponsiveDemo = EvgResponsiveDemo;" +
+  // What the browser's text measurer needs off the module (evg-measure.js).
+  "\n;globalThis.EvgResponsiveModule = { EVGHostTextMeasurer: EVGHostTextMeasurer, EVGDefaultMeasurer: EVGDefaultMeasurer };" +
+  "\n})();\n";
+
+fs.writeFileSync(path.join(OUT, "evg_responsive_demo.js"), scoped);
+fs.copyFileSync(path.join(HERE, "index.html"), path.join(OUT, "index.html"));
+// The painter, copied rather than imported across directories, so the built
+// page is a directory of four files that can be served from anywhere.
+fs.copyFileSync(path.join(ROOT, "lib/evg/html/evg-html.js"), path.join(OUT, "evg-html.js"));
+fs.copyFileSync(path.join(ROOT, "lib/evg/gl/evg-measure.js"), path.join(OUT, "evg-measure.js"));
+fs.copyFileSync(path.join(ROOT, "lib/evg/html/evg-dom.js"), path.join(OUT, "evg-dom.js"));
+
+fs.rmSync(STAGE, { recursive: true, force: true });
+process.stdout.write("Wrote responsive page to " + path.relative(ROOT, OUT) + "\n");

package/dist/lib/evg/web/responsive/dom-check.mjs

@@ -0,0 +1,169 @@
+#!/usr/bin/env node
+// SPDX-License-Identifier: MIT
+//
+// The retained DOM painter, in a browser: are the nodes where the engine
+// said, and do they survive a frame?
+//
+//   npm run evg:dom:check          (after: npm run evg:responsive:web)
+//
+// `evg-dom.js` keeps one DOM node per element and patches it from the host
+// tree's ops. Two things have to be true of it, and neither is visible in a
+// screenshot:
+//
+//   * every node's rectangle in the page — where the browser put it, through
+//     parent-relative offsets and a scroll layer's transform — is the page
+//     rectangle EVG gave the element. The same claim the SVG painter is
+//     held to, made of DOM placement instead of `<rect>` attributes;
+//   * a resize UPDATES the nodes rather than remaking them: the cards
+//     rearrange from four across to two, and the DOM nodes are the same
+//     objects, born in the first build.
+//
+// The smoke test's questions about the breakpoints are asked again here on
+// the DOM, so the two painters are held to the same layout.
+
+import fs from "node:fs";
+import path from "node:path";
+import http from "node:http";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(HERE, "../../../..");
+const DIST = path.resolve(process.argv[2] || path.join(HERE, "dist"));
+
+function loadPlaywright() {
+  for (const anchor of [path.join(ROOT, "package.json"), import.meta.url]) {
+    for (const name of ["playwright", "playwright-core"]) {
+      try { return createRequire(anchor)(name); } catch { /* next */ }
+    }
+  }
+  return null;
+}
+function findChrome() {
+  if (process.env.RANGER_CHROMIUM) return process.env.RANGER_CHROMIUM;
+  // The browsers Playwright installed, whichever build they are — the
+  // package's own resolution wants the exact build it was released with.
+  const base = process.env.PLAYWRIGHT_BROWSERS_PATH || "/opt/pw-browsers";
+  if (fs.existsSync(base)) {
+    for (const entry of fs.readdirSync(base)) {
+      if (!entry.startsWith("chromium-")) continue;
+      const exe = path.join(base, entry, "chrome-linux", "chrome");
+      if (fs.existsSync(exe)) return exe;
+    }
+  }
+  for (const c of [process.env.CHROME_PATH, "/usr/bin/chromium", "/usr/bin/google-chrome"].filter(Boolean)) {
+    if (fs.existsSync(c)) return c;
+  }
+  return null;
+}
+
+const pw = loadPlaywright();
+if (!pw) {
+  console.log("Playwright is not available — the DOM painter was not checked.");
+  process.exit(0);
+}
+for (const f of ["index.html", "evg_responsive_demo.js", "evg-dom.js"]) {
+  if (!fs.existsSync(path.join(DIST, f))) {
+    console.error(`no ${f} in ${path.relative(ROOT, DIST)} — run: npm run evg:responsive:web`);
+    process.exit(1);
+  }
+}
+
+const TYPES = { ".html": "text/html", ".js": "text/javascript", ".css": "text/css" };
+const server = http.createServer((req, res) => {
+  const rel = decodeURIComponent(new URL(req.url, "http://x").pathname).replace(/^\/+/, "") || "index.html";
+  const file = path.join(DIST, rel);
+  if (!file.startsWith(DIST) || !fs.existsSync(file)) { res.writeHead(404).end("not found"); return; }
+  res.writeHead(200, { "content-type": TYPES[path.extname(file)] || "application/octet-stream" });
+  fs.createReadStream(file).pipe(res);
+});
+await new Promise((r) => server.listen(0, r));
+const port = server.address().port;
+
+const exe = findChrome();
+const browser = await pw.chromium.launch(exe ? { executablePath: exe } : {});
+const page = await browser.newPage({ viewport: { width: 1400, height: 900 } });
+const errors = [];
+page.on("pageerror", (e) => errors.push(String(e)));
+
+let passed = 0, failed = 0;
+const check = (what, cond, detail = "") => {
+  if (cond) passed += 1; else failed += 1;
+  console.log(`  ${cond ? "PASS" : "FAIL"} ${what}${cond || !detail ? "" : "  (" + detail + ")"}`);
+};
+
+await page.goto(`http://127.0.0.1:${port}/index.html?painter=dom`, { waitUntil: "networkidle" });
+await page.waitForFunction(() => window.__evgResponsive && window.__evgResponsive.painter === "dom", null, { timeout: 20000 });
+
+// What the DOM did with the ops: every node's rectangle, as the browser
+// placed it, against the page rectangle the engine gave the element.
+const placement = () => page.evaluate(() => {
+  const stage = document.getElementById("stage").getBoundingClientRect();
+  const out = [];
+  for (const n of window.__evgDom.nodes()) {
+    const r = n.el.getBoundingClientRect();
+    out.push({
+      path: n.path, born: n.born,
+      dx: Math.abs(r.left - stage.left - n.px), dy: Math.abs(r.top - stage.top - n.py),
+      dw: Math.abs(r.width - n.w), dh: Math.abs(r.height - n.h),
+      lines: n.el.querySelectorAll(":scope > .evg-line").length,
+      pre: [...n.el.querySelectorAll(":scope > .evg-line")].every((l) => getComputedStyle(l).whiteSpace === "pre"),
+    });
+  }
+  return out;
+});
+const state = () => page.evaluate(() => window.__evgResponsive);
+
+console.log("dom painter check");
+let s = await state();
+check("the page painted through the DOM painter", s.painter === "dom" && s.host && s.host.nodes > 0, JSON.stringify(s.host));
+check("the stylesheet parsed clean", s.cssErrors === 0, `cssErrors=${s.cssErrors}`);
+check("the first build created every node", s.host.created === s.host.count && s.host.updated === 0, JSON.stringify(s.host));
+
+let nodes = await placement();
+const worst = (list) => list.reduce((m, n) => Math.max(m, n.dx, n.dy, n.dw, n.dh), 0);
+check(`every node is where the engine put it (${nodes.length} nodes)`, worst(nodes) < 0.51, `worst drift ${worst(nodes).toFixed(2)}px`);
+check("text is lines, and the browser breaks none of them", nodes.some((n) => n.lines > 0) && nodes.every((n) => n.pre), "");
+check("a paragraph wrapped into more than one line", nodes.some((n) => n.lines > 1), "");
+
+// Cards, counted from the DOM: the same question the smoke test asks of
+// the SVG, asked of nodes. A card is a node the tree classed `card`; the
+// count in the first row is the column layout.
+const columns = async () => page.evaluate(() => {
+  const ys = new Map();
+  for (const n of window.__evgDom.nodes()) {
+    if (!n.el.classList.contains("card")) continue;
+    const y = Math.round(n.py);
+    ys.set(y, (ys.get(y) || 0) + 1);
+  }
+  return [...ys.values()];
+});
+let cols = await columns();
+check("1400px: cards across", cols.length > 0 && cols[0] === 4, JSON.stringify(cols));
+
+// Narrow the window: the layout changes, the nodes do not.
+await page.setViewportSize({ width: 760, height: 900 });
+await page.waitForFunction((want) => window.__evgResponsive && Math.abs(window.__evgResponsive.width - want) < 30, 760, { timeout: 10000 });
+await page.waitForTimeout(100);
+s = await state();
+check("760px: the resize was updates, not creates", s.host.created === 0 && s.host.removed === 0 && s.host.updated > 0, JSON.stringify(s.host));
+nodes = await placement();
+check("760px: every node is still where the engine put it", worst(nodes) < 0.51, `worst drift ${worst(nodes).toFixed(2)}px`);
+check("760px: the nodes are the ones born in the first build", nodes.every((n) => n.born === 1), `${nodes.filter((n) => n.born !== 1).length} reborn`);
+cols = await columns();
+check("760px: two cards across", cols.length > 0 && cols[0] === 2, JSON.stringify(cols));
+
+await page.setViewportSize({ width: 1400, height: 900 });
+await page.waitForFunction((want) => window.__evgResponsive && Math.abs(window.__evgResponsive.width - want) < 30, 1400, { timeout: 10000 });
+await page.waitForTimeout(100);
+cols = await columns();
+check("back at 1400px: four across again", cols.length > 0 && cols[0] === 4, JSON.stringify(cols));
+nodes = await placement();
+check("and still the same nodes", nodes.every((n) => n.born === 1), "");
+check("no page errors", errors.length === 0, errors.join("; "));
+
+await browser.close();
+server.close();
+console.log(`\npassed = ${passed}  failed = ${failed}`);
+if (failed > 0) { console.log("FAILURES"); process.exit(1); }
+console.log("ALL PASS");

package/dist/lib/evg/web/responsive/index.html

@@ -0,0 +1,177 @@
+<!doctype html>
+<html lang="fi">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>EVG — responsive layout</title>
+<style>
+  /* This stylesheet styles the CHROME — the strip of controls at the bottom —
+     and nothing else. The page above it has no CSS in this file at all: it is
+     an <svg> full of absolute coordinates that EVG computed, and the browser
+     is not laying any of it out. */
+  * { box-sizing: border-box }
+  html, body { margin: 0; padding: 0; background: #f6f7fb }
+  body { font: 13px/1.4 ui-sans-serif, system-ui, sans-serif; color: #10162b }
+
+  /* The stage is the full width of the document, which is the whole point:
+     whatever this element is, EVG is told that number and lays the page out
+     to it. `clientWidth` excludes the scrollbar, so the width EVG is given is
+     the width it actually has. */
+  #stage { width: 100%; display: block }
+  #stage svg { display: block }
+
+  #hud {
+    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
+    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
+    padding: 8px 10px; border-radius: 999px;
+    background: rgba(16, 22, 43, .92); color: #dbe4f7;
+    box-shadow: 0 6px 24px rgba(16, 22, 43, .28);
+    font: 12px ui-monospace, SFMono-Regular, Menlo, monospace;
+  }
+  #hud button {
+    font: inherit; color: #dbe4f7; cursor: pointer;
+    background: #26314c; border: 1px solid #3a4767;
+    border-radius: 999px; padding: 4px 10px;
+  }
+  #hud button:hover { border-color: #7cc4ff }
+  #hud button[aria-pressed="true"] { background: #7cc4ff; color: #06122e; border-color: #7cc4ff }
+  #hud .num { color: #7cc4ff }
+  #hud .sep { opacity: .35 }
+  #err { padding: 20px; color: #a1002a; font: 13px ui-monospace, monospace; white-space: pre-wrap }
+</style>
+</head>
+<body>
+
+<div id="stage"></div>
+<p id="err"></p>
+
+<div id="hud">
+  <span>leveys <b class="num" id="hudW">–</b> px</span>
+  <span class="sep">·</span>
+  <span><b class="num" id="hudCmds">–</b> komentoa</span>
+  <span class="sep">·</span>
+  <span><b class="num" id="hudMs">–</b> ms</span>
+  <span class="sep">|</span>
+  <button id="btnFull" aria-pressed="true">koko ikkuna</button>
+  <button data-w="1280">1280</button>
+  <button data-w="900">900</button>
+  <button data-w="720">720</button>
+  <button data-w="420">420</button>
+  <span class="sep">|</span>
+  <button id="btnCoarse" aria-pressed="false">pointer: coarse</button>
+  <span class="sep">|</span>
+  <button id="btnSvg" data-painter="svg" title="evg-html.js: the display list as <svg>, rebuilt every frame">svg</button>
+  <button id="btnDom" data-painter="dom" title="evg-dom.js: a DOM node per element, kept and patched from the host tree">dom</button>
+</div>
+
+<script src="./evg_responsive_demo.js"></script>
+<script type="module">
+import { renderDisplayList } from "./evg-html.js";
+import { createDomPainter } from "./evg-dom.js";
+import { installCanvasMeasurer } from "./evg-measure.js";
+
+// The browser measures the text the page is laid out with — the same face
+// `evg-html.js` sets on its <text> nodes — rather than the advance table.
+const fontMeasure = installCanvasMeasurer(globalThis.EvgResponsiveModule);
+window.__fontMeasure = fontMeasure;
+
+const stage = document.getElementById("stage");
+const errBox = document.getElementById("err");
+
+const demo = new EvgResponsiveDemo();
+
+// `?painter=dom` keeps a DOM node per element and patches it from the host
+// tree's ops (lib/evg/html/evg-dom.js); the default paints the display
+// list as <svg> and rebuilds it every frame.
+const painterMode = new URLSearchParams(location.search).get("painter") || "svg";
+const domPainter = painterMode === "dom" ? createDomPainter(stage) : null;
+window.__evgDom = domPainter;
+for (const b of document.querySelectorAll("#hud button[data-painter]")) {
+  b.setAttribute("aria-pressed", String(b.dataset.painter === painterMode));
+  b.addEventListener("click", (e) => {
+    const u = new URL(location.href);
+    u.searchParams.set("painter", e.currentTarget.dataset.painter);
+    location.href = u.toString();
+  });
+}
+
+/** null = follow the window; a number = pretend the window is that wide. */
+let forcedWidth = null;
+let coarse = false;
+let lastKey = "";
+
+function paint(force) {
+  // The width EVG is handed. When a preset is active the stage is narrowed to
+  // it and centred, so the page is laid out to a width it can see — nothing
+  // here scales or transforms the result, because a scaled screenshot is
+  // exactly what this demo is not.
+  const w = Math.max(240, Math.round(forcedWidth !== null ? forcedWidth : stage.clientWidth));
+  const h = Math.max(240, window.innerHeight);
+  const key = `${w}x${h}:${coarse}`;
+  if (!force && key === lastKey) return;
+  lastKey = key;
+
+  demo.setViewport(w, h, coarse);
+  const t0 = performance.now();
+  let doc, stats = null, commands = 0;
+  if (domPainter) {
+    doc = JSON.parse(demo.renderHost());
+    stats = domPainter.apply(doc);
+    commands = doc.host.count;
+  } else {
+    doc = JSON.parse(demo.render());
+    renderDisplayList(stage, doc);
+    commands = doc.list.cmds.length;
+  }
+  const ms = performance.now() - t0;
+
+  document.getElementById("hudW").textContent = String(w);
+  document.getElementById("hudCmds").textContent = String(commands);
+  document.getElementById("hudMs").textContent = ms.toFixed(1);
+
+  // What a browser check needs, and what is worth seeing in a console: the
+  // numbers the layout produced, not the picture it produced them for.
+  window.__evgResponsive = {
+    width: w, height: doc.height, coarse, painter: painterMode,
+    commands, cssErrors: doc.cssErrors, ms, host: stats,
+  };
+}
+
+function setForced(w, button) {
+  forcedWidth = w;
+  for (const b of document.querySelectorAll("#hud button[data-w], #btnFull")) {
+    b.setAttribute("aria-pressed", String(b === button));
+  }
+  stage.style.maxWidth = w === null ? "" : w + "px";
+  stage.style.margin = w === null ? "" : "0 auto";
+  paint(true);
+}
+
+document.getElementById("btnFull").addEventListener("click", (e) => setForced(null, e.currentTarget));
+for (const b of document.querySelectorAll("#hud button[data-w]")) {
+  b.addEventListener("click", (e) => setForced(Number(e.currentTarget.dataset.w), e.currentTarget));
+}
+document.getElementById("btnCoarse").addEventListener("click", (e) => {
+  coarse = !coarse;
+  e.currentTarget.setAttribute("aria-pressed", String(coarse));
+  paint(true);
+});
+
+// The resize path. A ResizeObserver on the stage rather than a window listener
+// because the two differ exactly where it matters: the page can grow tall
+// enough for a scrollbar, which takes ~15px off the width, and only the
+// element knows that happened. The observer fires again, the page is laid out
+// narrower, and it settles — `lastKey` is what stops it looping when nothing
+// actually moved.
+new ResizeObserver(() => paint(false)).observe(stage);
+window.addEventListener("resize", () => paint(false));
+
+try {
+  paint(true);
+} catch (e) {
+  errBox.textContent = String((e && e.stack) || e);
+  window.__evgResponsive = { error: String(e) };
+}
+</script>
+</body>
+</html>

package/dist/lib/evg/web/responsive/smoke.mjs

@@ -0,0 +1,221 @@
+/**
+ * responsive/smoke.mjs — does the page relayout in a real browser?
+ *
+ *   npm run evg:responsive:web && npm run evg:responsive:web:smoke
+ *
+ * `EvgResponsiveCheck` already proves the layout in Node. What only a browser
+ * can answer is the part in between: that the compiled engine loads, that a
+ * window resize actually re-runs it, and that what came out is an <svg> with
+ * the boxes in it — not a blank stage and a caught exception.
+ *
+ * The column count is read off the PAINTED rectangles, at their fill colour,
+ * so the assertion is about the picture and not about the display list that
+ * produced it.
+ */
+import fs from "node:fs";
+import path from "node:path";
+import http from "node:http";
+import { fileURLToPath } from "node:url";
+import { createRequire } from "node:module";
+
+const HERE = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.resolve(HERE, "../../../..");
+const DIST = path.resolve(process.argv[2] || path.join(HERE, "dist"));
+
+function loadPlaywright() {
+  const anchors = [
+    "/opt/node22/lib/node_modules/x",
+    path.join(ROOT, "package.json"),
+    path.join(process.cwd(), "package.json"),
+    import.meta.url,
+  ];
+  for (const anchor of anchors) {
+    for (const name of ["playwright", "playwright-core"]) {
+      try {
+        return createRequire(anchor)(name);
+      } catch { /* next */ }
+    }
+  }
+  return null;
+}
+
+function findChrome() {
+  const fixed = [
+    process.env.CHROME_PATH,
+    "/opt/pw-browsers/chromium/chrome-linux/chrome",
+    "/usr/bin/chromium",
+    "/usr/bin/google-chrome",
+    "/usr/local/bin/google-chrome",
+  ].filter(Boolean);
+  for (const c of fixed) if (fs.existsSync(c)) return c;
+  return null;
+}
+
+const pw = loadPlaywright();
+if (!pw) {
+  console.log("Playwright is not available — the responsive page was not checked.");
+  process.exit(0);
+}
+for (const f of ["index.html", "evg_responsive_demo.js", "evg-html.js"]) {
+  if (!fs.existsSync(path.join(DIST, f))) {
+    console.error(`no ${f} in ${path.relative(ROOT, DIST)} — run: npm run evg:responsive:web`);
+    process.exit(1);
+  }
+}
+
+const TYPES = { ".html": "text/html", ".js": "text/javascript", ".css": "text/css" };
+const server = http.createServer((req, res) => {
+  const rel = decodeURIComponent(new URL(req.url, "http://x").pathname).replace(/^\/+/, "") || "index.html";
+  const file = path.join(DIST, rel);
+  if (!file.startsWith(DIST) || !fs.existsSync(file)) {
+    res.writeHead(404).end("not found");
+    return;
+  }
+  res.writeHead(200, { "content-type": TYPES[path.extname(file)] || "application/octet-stream" });
+  res.end(fs.readFileSync(file));
+});
+await new Promise((r) => server.listen(0, "127.0.0.1", r));
+const base = `http://127.0.0.1:${server.address().port}/`;
+
+const failures = [];
+const check = (name, cond, detail) => {
+  if (cond) console.log("  PASS " + name);
+  else {
+    console.log("  FAIL " + name + (detail ? " — " + detail : ""));
+    failures.push(name);
+  }
+};
+
+const launchOpts = {};
+const chrome = findChrome();
+if (chrome) launchOpts.executablePath = chrome;
+
+const browser = await pw.chromium.launch(launchOpts);
+const page = await browser.newPage({ viewport: { width: 1400, height: 900 } });
+const pageErrors = [];
+page.on("pageerror", (e) => pageErrors.push(String(e)));
+page.on("console", (m) => { if (m.type() === "error") pageErrors.push(m.text()); });
+
+await page.goto(base, { waitUntil: "load" });
+await page.waitForFunction(() => window.__evgResponsive, null, { timeout: 20000 });
+
+/** The cards are the only white boxes with a 12px radius; count the ones that
+ *  share the topmost row. Same definition the Node check uses, read out of the
+ *  DOM the painter actually built. */
+const cardColumns = () => page.evaluate(() => {
+  const rects = [...document.querySelectorAll("#stage svg rect")]
+    .filter((r) => (r.getAttribute("fill") || "").replace(/\s+/g, "") === "rgb(255,255,255)"
+                && Math.abs(Number(r.getAttribute("rx") || 0) - 12) < 0.5)
+    .map((r) => ({ x: +r.getAttribute("x"), y: +r.getAttribute("y"), w: +r.getAttribute("width") }));
+  // The sidebar is a white 12px box too, and at wide widths it is the leftmost
+  // one on its own row. Cards are the boxes whose width repeats.
+  const byWidth = new Map();
+  for (const r of rects) {
+    const k = Math.round(r.w);
+    byWidth.set(k, (byWidth.get(k) || []).concat([r]));
+  }
+  let best = [];
+  for (const group of byWidth.values()) if (group.length > best.length) best = group;
+  const top = Math.min(...best.map((r) => r.y));
+  return best.filter((r) => Math.abs(r.y - top) < 1).length;
+});
+
+const state = () => page.evaluate(() => window.__evgResponsive);
+
+async function atWidth(w) {
+  await page.setViewportSize({ width: w, height: 900 });
+  await page.waitForFunction(
+    (want) => window.__evgResponsive && Math.abs(window.__evgResponsive.width - want) < 30,
+    w,
+    { timeout: 20000 }
+  );
+  return state();
+}
+
+console.log("responsive page smoke");
+
+let s = await state();
+check("the engine ran in the browser", s && !s.error, s && s.error);
+check("the stylesheet parsed clean", s.cssErrors === 0, `cssErrors=${s.cssErrors}`);
+check("the page was painted", (await page.locator("#stage svg rect").count()) > 20);
+check("EVG was given the document width", Math.abs(s.width - 1400) < 30, `width=${s.width}`);
+check("1400px: four cards across", (await cardColumns()) === 4);
+
+s = await atWidth(1000);
+check("1000px: three cards across", (await cardColumns()) === 3, `width=${s.width}`);
+
+s = await atWidth(760);
+check("760px: two cards across", (await cardColumns()) === 2, `width=${s.width}`);
+
+s = await atWidth(420);
+check("420px: one card per row", (await cardColumns()) === 1, `width=${s.width}`);
+check("420px: the page grew taller than the window", s.height > 900, `height=${s.height}`);
+
+// The flicker. `.side` and `.main` are a flex row and `.main` is `flex: 1`, so
+// its width is computed out of the line it is then measured against — and the
+// sum coming back one ulp over made the row wrap, at 127 of the 680 integer
+// widths between 821 and 1500, scattered. On a dragged window edge that is a
+// page that jumps rather than a layout that responds (ISSUES #8).
+//
+// Read off the painted boxes, and by VERTICAL OVERLAP rather than by a shared
+// top edge: `.main` opens with a heading, so the first card starts lower than
+// the sidebar even when the two are side by side. Overlapping means one row;
+// a card that starts below the sidebar's bottom edge means the row wrapped.
+const sidebarBesideContent = () => page.evaluate(() => {
+  const boxes = [...document.querySelectorAll("#stage svg rect")]
+    .filter((r) => (r.getAttribute("fill") || "").replace(/\s+/g, "") === "rgb(255,255,255)"
+                && Math.abs(Number(r.getAttribute("rx") || 0) - 12) < 0.5)
+    .map((r) => ({ x: +r.getAttribute("x"), y: +r.getAttribute("y"),
+                   w: +r.getAttribute("width"), h: +r.getAttribute("height") }));
+  if (boxes.length < 2) return false;
+  // The sidebar is the leftmost card-shaped box; the deck is everything that
+  // starts to the right of it.
+  const side = boxes.reduce((a, b) => (b.x < a.x ? b : a));
+  const deck = boxes.filter((b) => b.x > side.x + side.w - 1);
+  if (!deck.length) return false;
+  const top = Math.min(...deck.map((b) => b.y));
+  return top < side.y + side.h - 1;
+});
+
+// A sweep rather than a list of widths: the scrollbar takes an unknown few
+// pixels off, so naming the widths that used to fail would be naming the wrong
+// ones. Every step in this range is above the 820px breakpoint even after the
+// scrollbar, so the sidebar must be beside the content at all of them.
+{
+  let jumped = 0;
+  let firstBad = 0;
+  for (let w = 870; w <= 1110; w += 6) {
+    const st = await atWidth(w);
+    if (!(await sidebarBesideContent())) {
+      jumped += 1;
+      if (!firstBad) firstBad = st.width;
+    }
+  }
+  check("the sidebar stays beside the content at every width from 870 to 1110",
+    jumped === 0, `${jumped} widths wrapped, first at ${firstBad}`);
+}
+
+// Back up again: a layout that only narrows is half a layout.
+s = await atWidth(1400);
+check("back at 1400px: four cards across again", (await cardColumns()) === 4);
+
+// The SVG is sized to the layout, which is what makes the document scroll
+// rather than the picture shrink.
+const svgBox = await page.evaluate(() => {
+  const svg = document.querySelector("#stage svg");
+  return { w: +svg.getAttribute("width"), h: +svg.getAttribute("height") };
+});
+check("the surface is the size EVG laid out", Math.abs(svgBox.w - s.width) < 1 && Math.abs(svgBox.h - s.height) < 1,
+  `svg=${svgBox.w}x${svgBox.h} state=${s.width}x${s.height}`);
+
+check("no page errors", pageErrors.length === 0, pageErrors.slice(0, 3).join(" | "));
+
+await browser.close();
+server.close();
+
+console.log("");
+if (failures.length) {
+  console.log(`FAILED: ${failures.length} of the checks — ${failures.join(", ")}`);
+  process.exit(1);
+}
+console.log("OK");