@palate/cli 0.0.0-stage → 0.0.2

package/src/page-rules.js

@@ -0,0 +1,308 @@
+// Runs inside the page (read as text and evaluated with the sections from page-sections.js, the whole-page
+// facts from page-devices.js and the rules' own selector checks). The facts the user's rules are checked
+// against: how the product is shown, kicker labels, logo marks, step bars and logos before the demo, the
+// primary buttons' colour, corner radii, social meta, motion. Rule checks read these by name.
+(sections, devices, domChecks) => {
+  const vh = innerHeight;
+  const clean = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    return r.width > 1 && r.height > 1 && cs.display !== "none" && cs.visibility !== "hidden" && parseFloat(cs.opacity) > 0.01;
+  };
+  const abs = (el) => {
+    const r = el.getBoundingClientRect();
+    return { x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height };
+  };
+  // ---- colour: any computed CSS colour (rgb, hex, hsl, oklab, oklch, lab, lch, color(), color-mix(), which
+  // computes to oklab() or color(srgb …)) as [r, g, b, a(0–1)] in sRGB, or null when it can't be read. Never
+  // pull digits out of the string: "oklab(0.62 0.1 0.05)" read as rgb is near black. The same helper is in
+  // page-rules.js, page-devices.js, page-details.js and page-gate.js (test/colour.test.mjs keeps them identical).
+  const colourCtx = Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: true });
+  const colourMemo = new Map();
+  const RGB_FN = /^rgba?\(\s*(-?[\d.]+)(%?)[,\s]+(-?[\d.]+)(%?)[,\s]+(-?[\d.]+)(%?)(?:\s*[,/]\s*([\d.]+)(%?))?\s*\)$/i;
+  const fromRgbFn = (m) => [1, 3, 5].map((i) => Math.max(0, Math.min(255, m[i + 1] ? (parseFloat(m[i]) * 255) / 100 : parseFloat(m[i])))).concat(m[7] === undefined ? 1 : m[8] ? parseFloat(m[7]) / 100 : parseFloat(m[7]));
+  const fromHex = (h) => {
+    const x = h.length <= 5 ? [...h.slice(1)].map((c) => c + c).join("") : h.slice(1);
+    return [0, 2, 4].map((i) => parseInt(x.slice(i, i + 2), 16)).concat(x.length === 8 ? parseInt(x.slice(6, 8), 16) / 255 : 1);
+  };
+  // The spaces Chrome computes to, converted by hand for when a canvas can't parse them.
+  const fromSpace = (c) => {
+    const m = c.match(/^(oklab|oklch|lab|lch|color)\(\s*([^)]*)\)$/i);
+    if (!m) return null;
+    const [body, alpha] = m[2].split("/");
+    const p = body.trim().split(/[\s,]+/);
+    const space = m[1].toLowerCase() === "color" ? (p.shift() ?? "").toLowerCase() : m[1].toLowerCase();
+    const n = (s, full = 1) => (s == null || s === "none" ? 0 : s.endsWith("%") ? (parseFloat(s) / 100) * full : parseFloat(s));
+    const a = alpha === undefined ? 1 : n(alpha.trim());
+    const enc = (v) => 255 * Math.max(0, Math.min(1, v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055));
+    const polar = (C, h) => [C * Math.cos((h * Math.PI) / 180), C * Math.sin((h * Math.PI) / 180)];
+    let lin;
+    if (space === "oklab" || space === "oklch") {
+      const L = n(p[0]);
+      const [A, B] = space === "oklab" ? [n(p[1], 0.4), n(p[2], 0.4)] : polar(n(p[1], 0.4), n(p[2]));
+      const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3, k = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3, s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+      lin = [4.0767416621 * l - 3.3077115913 * k + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * k - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * k + 1.707614701 * s];
+    } else if (space === "lab" || space === "lch") {
+      const L = n(p[0], 100);
+      const [A, B] = space === "lab" ? [n(p[1], 125), n(p[2], 125)] : polar(n(p[1], 150), n(p[2]));
+      const fy = (L + 16) / 116, fx = fy + A / 500, fz = fy - B / 200, e = 216 / 24389, kk = 24389 / 27;
+      const X = 0.96422 * (fx ** 3 > e ? fx ** 3 : (116 * fx - 16) / kk), Y = L > kk * e ? fy ** 3 : L / kk, Z = 0.82521 * (fz ** 3 > e ? fz ** 3 : (116 * fz - 16) / kk);
+      lin = [3.1338561 * X - 1.6168667 * Y - 0.4906146 * Z, -0.9787684 * X + 1.9161415 * Y + 0.033454 * Z, 0.0719453 * X - 0.2289914 * Y + 1.4052427 * Z];
+    } else if (space === "srgb" || space === "display-p3" || space === "a98-rgb" || space === "rec2020") return p.slice(0, 3).map((v) => 255 * Math.max(0, Math.min(1, n(v)))).concat(a);
+    else if (space === "srgb-linear") lin = p.slice(0, 3).map((v) => n(v));
+    else return null;
+    return lin.map(enc).concat(a);
+  };
+  const toRgba = (c) => {
+    const s = String(c ?? "").trim();
+    if (!s || s === "none") return null;
+    if (colourMemo.has(s)) return colourMemo.get(s);
+    let v = null;
+    const m = s.match(RGB_FN);
+    if (m) v = fromRgbFn(m);
+    else if (/^transparent$/i.test(s)) v = [0, 0, 0, 0];
+    else if (/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(s)) v = fromHex(s);
+    else {
+      // The canvas parses anything the browser does; a value it rejects leaves the sentinel in place.
+      colourCtx.fillStyle = "#010203";
+      colourCtx.fillStyle = s;
+      const got = String(colourCtx.fillStyle);
+      if (got !== "#010203") {
+        const g = got.match(RGB_FN);
+        if (g) v = fromRgbFn(g);
+        else if (/^#[0-9a-f]{6}$/i.test(got)) v = fromHex(got);
+        else {
+          colourCtx.clearRect(0, 0, 1, 1);
+          colourCtx.fillRect(0, 0, 1, 1);
+          const d = colourCtx.getImageData(0, 0, 1, 1).data;
+          // Alpha from the colour itself when it says (the canvas rounds translucent channels).
+          v = [d[0], d[1], d[2], fromSpace(got)?.[3] ?? d[3] / 255];
+        }
+      } else v = fromSpace(s);
+    }
+    colourMemo.set(s, v);
+    return v;
+  };
+  // Every colour named in a background-image (gradient stops), in order.
+  const colourStops = (bi) => (String(bi ?? "").match(/(?:rgba?|hsla?|oklab|oklch|lab|lch|color)\([^()]*\)|#[0-9a-f]{3,8}\b/gi) ?? []).map(toRgba).filter(Boolean);
+  const rgb = (c) => toRgba(c) ?? [];
+  const lum = ([r, g, b]) => {
+    const f = (v) => ((v /= 255) <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+  };
+  const chrome = (el) => Boolean(el.closest("header, nav, footer, [role=banner], [role=navigation], [role=contentinfo]"));
+  // Inside a decorative miniature (an aria-hidden or inert preview of a page, like a variant thumbnail): part of
+  // a picture of a page, not of this page.
+  const inPreview = (el) => {
+    const h = el.closest("[aria-hidden=true], [inert]");
+    if (!h) return false;
+    const b = h.getBoundingClientRect();
+    return b.width >= 120 && b.height >= 80;
+  };
+
+  // The demo: the first section named as one (demo, live, playground, "in action"), else the first holding live
+  // media (video, canvas, iframe). Its main panel is the smallest block in it at least 320px tall and half its
+  // width. Without a demo, "before the demo" means the first screen.
+  const DEMO = /\b(demo|live|playground|try it|in action|see it work)/i;
+  const demo = sections.find((s) => !s.sticky && DEMO.test(`${s.name} ${s.id ?? ""} ${s.heading ?? ""}`)) ?? sections.find((s) => devices.media.some((m) => m.section === s.index && m.kind.startsWith("live")));
+  let demoTop = null;
+  let panelTop = null;
+  if (demo) {
+    demoTop = demo.box.y;
+    const root = document.querySelector(demo.selector);
+    const big = (el) => {
+      const b = abs(el);
+      return b.h >= 320 && b.w >= demo.box.width * 0.5;
+    };
+    const cands = root ? [...root.querySelectorAll("*")].filter((el) => visible(el) && big(el) && ![...el.children].some(big)) : [];
+    panelTop = cands.length ? Math.min(...cands.map((el) => abs(el).y)) : demoTop;
+  }
+  // The product shown inside the demo is its own design (often another product built with this one): the
+  // page-level rules (radii, button colour) skip it.
+  const demoRoot = demo ? document.querySelector(demo.selector) : null;
+  const inDemo = (el) => Boolean(demoRoot && demoRoot !== el && demoRoot.contains(el));
+  const beforeDemo = (el, { panel = false } = {}) => {
+    const b = abs(el);
+    const limit = demo ? (panel ? panelTop : demoTop) : vh * 1.1;
+    return b.y + b.h <= limit + 4;
+  };
+
+  // Step bars: a single row of three or more short step names joined by separators, check marks, numbers or
+  // connector lines ("✓ Plan — Build — Choose — Polish — Learn"). Not navigation, tabs or links.
+  const SEP = /\s*(?:—|–|→|›|»|·|\||\/|>)\s*/;
+  const stepBars = [];
+  const isConnector = (k) => {
+    const b = k.getBoundingClientRect();
+    return !clean(k.textContent) && b.height <= 3 && b.width >= 8;
+  };
+  // A step name: one to three plain words ("Plan", "You choose"), not a selector or a sentence.
+  const shortStep = (t) => t && t.length <= 18 && t.split(" ").length <= 3 && /^[\p{L}][\p{L} '&-]*$/u.test(t);
+  for (const el of document.body.querySelectorAll("ol, ul, div, p, span, nav")) {
+    if (!visible(el) || chrome(el) || inPreview(el) || el.closest("[role=tablist], [aria-label*=breadcrumb i]")) continue;
+    if (stepBars.some((s) => s.contains(el) || el.contains(s))) continue;
+    const b = el.getBoundingClientRect();
+    const text = clean(el.textContent);
+    if (b.height > 64 || b.width < 180 || text.length < 8 || text.length > 110) continue;
+    if (el.querySelector("a[href], button, input, select, textarea, h1, h2, h3, img")) continue;
+    // A row of brand marks with names is a logo row, not a step bar.
+    const kids = [...el.children].filter(visible);
+    const items = kids.filter((k) => clean(k.textContent));
+    const withMark = items.filter((k) => [...k.querySelectorAll("svg, img")].some((s) => s.getBoundingClientRect().height >= 18)).length;
+    if (items.length && withMark >= items.length / 2) continue;
+    // By text: "Plan — Build — Choose" or "✓ Plan · Build · Choose". Sequence separators (dashes, arrows) are
+    // enough; dots and bars need step marks (✓ or numbers), since "Claude Code · Codex · Cursor" is a list.
+    const steps = /^\s*[✓✔]|(^|\s)[✓✔]|\b1\b.*\b2\b.*\b3\b/.test(text);
+    const sequence = /\s(—|–|→|›|»|>)\s|[—–→›»]/.test(text);
+    const parts = text.replace(/^[✓✔•●○]\s*/, "").split(SEP).map((t) => t.replace(/^[✓✔•●○\d.]+\s*/, "").trim()).filter(Boolean);
+    let bar = SEP.test(text) && (sequence || steps) && parts.length >= 3 && parts.every(shortStep);
+    // By structure: a row of three or more short items with check marks, numbers or connector lines between them.
+    if (!bar && items.length >= 3 && items.length <= 9) {
+      const tops = items.map((k) => k.getBoundingClientRect().top);
+      const oneRow = Math.max(...tops) - Math.min(...tops) <= 10;
+      const names = items.map((k) => clean(k.textContent).replace(/^[✓✔•●○\d.]+\s*/, ""));
+      const checks = [...el.querySelectorAll("svg")].filter((s) => s.getBoundingClientRect().height <= 16).length >= 1;
+      // Numbered 1, 2, 3 … in order (not a row of stats like "94%", "40%").
+      const nums = items.map((k) => Number(clean(k.textContent).match(/^(\d{1,2})(?=[\s.)]|[A-Z])/)?.[1] ?? NaN));
+      const numbered = nums.filter((n, i) => n === nums[0] + i).length >= 3 && nums[0] <= 1;
+      const marked = el.querySelector("[aria-current=step]") || checks || numbered || items.filter((k) => /^\s*[✓✔]/.test(k.textContent)).length >= 2 || [...el.querySelectorAll("*")].some(isConnector) || kids.some(isConnector);
+      bar = oneRow && names.every(shortStep) && Boolean(marked) && el.tagName !== "NAV";
+    }
+    if (bar) stepBars.push(el);
+  }
+
+  // Logos of frameworks and libraries (not the agents a tool runs in), as marks or names in a logo row.
+  const FRAMEWORKS = /\b(next(\.?js)?|react|vue|svelte|sveltekit|astro|nuxt|remix|angular|vite|tailwind|shadcn|solid(js)?|qwik|gatsby|ember|preact|expo|flutter|swiftui|react router|create react app)\b/i;
+  const frameworkMarks = new Set();
+  for (const el of document.body.querySelectorAll("img[alt], svg[aria-label], [role=img][aria-label], img[title], svg title")) {
+    const m = el.tagName.toLowerCase() === "title" ? el.parentElement : el;
+    if (!m || !visible(m) || chrome(m) || inPreview(m)) continue;
+    const b = m.getBoundingClientRect();
+    if (b.height > 96 || b.width > 240) continue;
+    const name = clean(el.getAttribute("alt") ?? el.getAttribute("aria-label") ?? el.getAttribute("title") ?? el.textContent);
+    if (FRAMEWORKS.test(name) && beforeDemo(m)) frameworkMarks.add(name.toLowerCase());
+  }
+  // Brand rows only: named (visible names or labelled marks), not icons, avatars or marks inside a miniature.
+  const logoRows = devices.logoRows.filter((r) => !r.inPreview && !r.icons && !r.avatars && (r.names.length >= 2 || r.labelled >= 2));
+  // One per framework, whether it shows as a labelled mark, a name in a logo row, or both.
+  for (const r of logoRows) {
+    const sec = sections.find((s) => s.index === r.section);
+    const above = demo ? sec && sec.box.y < demoTop : sec && sec.box.y < vh;
+    if (above) for (const n of r.names.filter((x) => FRAMEWORKS.test(x))) frameworkMarks.add(n.toLowerCase());
+  }
+
+  // Primary buttons filled with (near) black.
+  const blackButtons = [...document.body.querySelectorAll("button, a, [role=button], input[type=submit]")].filter((el) => {
+    if (!visible(el) || chrome(el) || inDemo(el) || inPreview(el)) return false;
+    const cs = getComputedStyle(el);
+    const c = rgb(cs.backgroundColor);
+    const b = el.getBoundingClientRect();
+    return c.length >= 3 && (c[3] ?? 1) > 0.6 && lum(c) < 0.012 && b.height >= 28 && b.height <= 72 && b.width <= 420 && clean(el.textContent || el.value).length > 1;
+  }).length;
+
+  // Buttons filled with a gradient (linear, radial or conic), outside the demo and decorative miniatures.
+  const gradientButtons = [...document.body.querySelectorAll("button, a, [role=button], input[type=submit]")].filter((el) => {
+    if (!visible(el) || inDemo(el) || inPreview(el)) return false;
+    const b = el.getBoundingClientRect();
+    return /gradient\(/.test(getComputedStyle(el).backgroundImage) && b.height >= 24 && b.height <= 72 && b.width <= 420 && clean(el.textContent || el.value).length > 1;
+  }).length;
+
+  // Black accents anywhere on the page (the demo too, but not decorative miniatures): small filled chips, buttons
+  // and labels in (near) black.
+  const blackAccentEls = [...document.body.querySelectorAll("button, a, span, div, p, li, label, [role=button]")].filter((el) => {
+    if (!visible(el) || inPreview(el)) return false;
+    const b = el.getBoundingClientRect();
+    if (b.height < 14 || b.height > 72 || b.width > 420 || !clean(el.textContent)) return false;
+    const c = rgb(getComputedStyle(el).backgroundColor);
+    return c.length >= 3 && (c[3] ?? 1) > 0.6 && lum(c) < 0.012;
+  });
+  const blackAccents = blackAccentEls.filter((el) => !blackAccentEls.some((o) => o !== el && o.contains(el)));
+
+  // The primary action inside the input's bordered bar: a submit button sharing a bordered (or ringed) box no
+  // taller than a bar with a text field.
+  const barred = [...document.body.querySelectorAll("form button, form [type=submit], button[type=submit]")].filter((btn) => {
+    if (!visible(btn) || inPreview(btn)) return false;
+    for (let e = btn.parentElement, k = 0; e && k < 4; e = e.parentElement, k++) {
+      if (!e.querySelector("input[type=email], input[type=text], input:not([type]), textarea, select")) continue;
+      const cs = getComputedStyle(e);
+      const h = e.getBoundingClientRect().height;
+      const bordered = (parseFloat(cs.borderTopWidth) > 0 && cs.borderTopStyle !== "none" && (rgb(cs.borderTopColor)[3] ?? 1) > 0.1) || (cs.boxShadow !== "none" && /0px 0px 0px [1-3]px/.test(cs.boxShadow)) || (parseFloat(cs.outlineWidth) > 0 && cs.outlineStyle !== "none");
+      return bordered && h <= 88;
+    }
+    return false;
+  }).length;
+
+  // Dotted grid backdrops: a small repeating radial-gradient dot pattern.
+  const dotGrids = [...document.body.querySelectorAll("*")].filter((el) => {
+    const cs = getComputedStyle(el);
+    if (!/radial-gradient/.test(cs.backgroundImage) || inPreview(el)) return false;
+    const size = parseFloat(cs.backgroundSize);
+    const b = el.getBoundingClientRect();
+    return size > 0 && size <= 40 && b.width >= 120 && b.height >= 80;
+  }).length;
+
+  // The demo's controls: Skip and Replay (n/a without a demo).
+  const controls = demoRoot ? [...demoRoot.querySelectorAll("button, [role=button], a")].map((b) => `${clean(b.textContent)} ${b.getAttribute("aria-label") ?? ""}`.toLowerCase()) : null;
+  // One button that reads Skip while playing and Replay after counts for both: only one shows at a time.
+  const toggles = controls?.some((t) => /skip|replay|restart|play again/.test(t));
+  const demoMissingControls = controls ? (toggles ? [] : ["skip", "replay"]) : null;
+
+  // Distinct corner radii on surfaces (filled, bordered or shadowed), ignoring pills and circles.
+  const radii = new Set();
+  for (const el of document.body.querySelectorAll("*")) {
+    const cs = getComputedStyle(el);
+    const r = parseFloat(cs.borderTopLeftRadius);
+    if (!r || r < 2 || /%/.test(cs.borderTopLeftRadius)) continue;
+    const b = el.getBoundingClientRect();
+    if (b.width < 16 || b.height < 16 || r >= Math.min(b.width, b.height) / 2 - 1 || !visible(el) || inPreview(el) || inDemo(el)) continue;
+    const surface = (rgb(cs.backgroundColor)[3] ?? 1) > 0.05 && cs.backgroundColor !== "rgba(0, 0, 0, 0)" || parseFloat(cs.borderTopWidth) > 0 || cs.boxShadow !== "none" || el.tagName === "IMG";
+    if (surface) radii.add(Math.round(r));
+  }
+
+  const kickerSections = new Set(devices.kickers.map((k) => k.section)).size;
+  const marks = logoRows.map((r) => r.markPx).filter((n) => n > 0);
+  const m = devices.motion;
+  const dom = {};
+  for (const c of domChecks ?? []) {
+    let els = [];
+    try {
+      els = [...document.querySelectorAll(c.selector)];
+    } catch {
+      dom[c.id] = null;
+      continue;
+    }
+    if (c.visible) els = els.filter(visible);
+    if (c.before === "demo") els = els.filter((el) => beforeDemo(el));
+    dom[c.id] = els.length;
+  }
+
+  return {
+    demo: demo ? { section: demo.index, name: demo.name } : null,
+    framedScreenshots: devices.media.filter((x) => x.kind === "static picture" && x.framed && x.screenshot).length,
+    staticScreenshots: devices.media.filter((x) => x.kind === "static picture").length,
+    kickerSections,
+    kickerLabels: devices.kickers.length,
+    repeatedDevices: devices.repeated.length,
+    repeatedList: devices.repeated.map((r) => `${r.device} (sections ${r.sections.join(", ")})`),
+    minLogoMarkPx: marks.length ? Math.min(...marks) : null,
+    monochromeLogoRows: logoRows.length ? logoRows.filter((r) => r.monochrome).length : null,
+    logoRowList: logoRows.map((r) => `section ${r.section}: ${r.count} marks at ${r.markPx}px${r.monochrome ? ", one colour" : ""} (${r.names.slice(0, 4).join(", ") || r.selector})`),
+    stepBars: stepBars.length,
+    stepBarsBeforeDemo: stepBars.filter((el) => beforeDemo(el, { panel: true })).length,
+    stepBarTexts: stepBars.filter((el) => beforeDemo(el, { panel: true })).slice(0, 3).map((el) => clean(el.textContent).slice(0, 60)),
+    frameworkLogosBeforeDemo: frameworkMarks.size,
+    frameworksBeforeDemo: [...frameworkMarks],
+    blackPrimaryButtons: blackButtons,
+    gradientButtons,
+    blackAccents: blackAccents.length,
+    blackAccentTexts: blackAccents.slice(0, 4).map((el) => clean(el.textContent).slice(0, 30)),
+    buttonInsideInputBar: barred,
+    dotGrids,
+    demoMissingControls: demoMissingControls ? demoMissingControls.length : null,
+    demoMissingList: demoMissingControls ?? [],
+    distinctRadii: radii.size,
+    radiiList: [...radii].sort((a, b) => a - b),
+    movingElements: (m.cssAnimations ?? 0) + (m.scriptedAnimations ?? 0) + (m.entrances ?? 0) + (m.styled ?? 0),
+    dom,
+  };
+};

package/src/page-sections.js

@@ -0,0 +1,211 @@
+// Runs inside the page (read as text and evaluated). Finds the page's sections: its real top-level bands. The
+// landmarks (header, nav, each section of main, footer), descending through wrapper divs, <main> and
+// display: contents, never into absolutely placed layers (a hero's background image, grain, a wash). Then the
+// bands are tidied: a tiny block (a logo strip, a lone heading) joins its neighbour, one giant block that holds
+// several full-width bands of its own is split into them, and no two sections overlap (a header laid over the
+// hero keeps its place and the hero starts below it). Boxes are in page coordinates, clipped to the page width.
+() => {
+  const docW = document.documentElement.clientWidth;
+  const pageH = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+  const vh = window.innerHeight;
+  const SKIP = ["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "LINK", "META"];
+  const LANDMARK = "header, nav, main, footer, section, aside, article, form, [role=banner], [role=navigation], [role=main], [role=contentinfo], [role=region]";
+  const MINOR_H = 160; // shorter than this, a block joins a neighbour
+  const GIANT_VH = 2.5; // taller than this many screens, a block with full-width bands of its own is split
+  const rectOf = (el) => {
+    const r = el.getBoundingClientRect();
+    const x0 = Math.max(0, r.left + scrollX), x1 = Math.min(docW, r.right + scrollX);
+    return { x: x0, y: r.top + scrollY, w: Math.max(0, x1 - x0), h: r.height };
+  };
+  const clean = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+  // Text as shown: innerText leaves out hidden spans; a <style> inside an inline SVG still has to go.
+  const textOf = (el) => {
+    if (!el) return "";
+    if (!el.querySelector("style, script")) return clean(el.innerText) || clean(el.textContent);
+    const c = el.cloneNode(true);
+    for (const x of c.querySelectorAll("style, script")) x.remove();
+    return clean(c.textContent);
+  };
+  const isHeader = (el) => el.tagName === "HEADER" || ["banner"].includes(el.getAttribute("role")) || (el.tagName === "NAV" && el.getBoundingClientRect().top + scrollY < 120);
+  const isFooter = (el) => el.tagName === "FOOTER" || el.getAttribute("role") === "contentinfo";
+  // A bar of links pinned at the top (a fixed or absolute navbar that isn't a <header>).
+  const topBar = (el) => {
+    const r = el.getBoundingClientRect();
+    return r.top + scrollY < 48 && r.height <= 160 && r.width >= 0.7 * docW && el.querySelectorAll("a, button").length >= 2;
+  };
+  // The children that make up a block: through display: contents and zero-height holders (a fixed header
+  // inside a 0px div), without hidden things, tiny things and out-of-flow layers (backgrounds, overlays,
+  // widgets), except a pinned header.
+  const kidsOf = (el, d = 0) =>
+    [...el.children].flatMap((k) => {
+      if (SKIP.includes(k.tagName)) return [];
+      const cs = getComputedStyle(k);
+      if (cs.display === "none" || cs.visibility === "hidden") return [];
+      const r = k.getBoundingClientRect();
+      if ((cs.display === "contents" || r.height < 2) && d < 6) return kidsOf(k, d + 1);
+      if (!(r.width > 40 && r.height > 24)) return [];
+      if (/absolute|fixed/.test(cs.position) && !isHeader(k) && !isFooter(k) && !topBar(k)) return [];
+      return [k];
+    });
+  const pinned = (el) => ["sticky", "fixed"].includes(getComputedStyle(el).position);
+  const isWrapper = (el) => {
+    const tag = el.tagName;
+    if (isHeader(el) || isFooter(el) || (topBar(el) && pinned(el))) return false;
+    if (tag === "MAIN" || el.getAttribute("role") === "main") return true;
+    const kids = kidsOf(el);
+    if (kids.length < 2) {
+      if (kids.length !== 1 || ["SECTION", "HEADER", "FOOTER", "NAV", "ARTICLE", "ASIDE"].includes(tag)) return false;
+      // One child: look inside only when it is the whole of this block; a band whose padding frames its one
+      // child is the band.
+      return kids[0].getBoundingClientRect().height >= 0.8 * el.getBoundingClientRect().height || el.getBoundingClientRect().height > 0.6 * pageH;
+    }
+    if (["SECTION", "ARTICLE"].includes(tag)) return kids.filter((k) => k.matches("section, article")).length >= 2;
+    if (["HEADER", "FOOTER", "NAV", "ASIDE", "FORM"].includes(tag)) return false;
+    // A generic box that holds landmarks, or most of a long page, is a wrapper.
+    return kids.some((k) => k.matches(LANDMARK)) || (el.getBoundingClientRect().height > 0.6 * pageH && pageH > 1.5 * vh);
+  };
+  // A sidebar layout (a docs rail or a filter column beside the content): the narrow column runs the content's
+  // whole height, so it would swallow every section beside it. Its sections are the wide column's; the rail isn't
+  // a band of its own.
+  const sideBySide = (kids) => {
+    if (kids.length < 2) return kids;
+    const r = kids.map((k) => k.getBoundingClientRect());
+    const wide = r.map((x) => x.width >= 0.45 * docW);
+    const beside = r.some((a, i) => r.some((b, j) => i !== j && Math.min(a.bottom, b.bottom) - Math.max(a.top, b.top) > 0.5 * Math.min(a.height, b.height) && (a.right <= b.left + 4 || b.right <= a.left + 4)));
+    if (!beside || !wide.some(Boolean) || wide.every(Boolean)) return kids;
+    return kids.filter((k, i) => wide[i] || !(r[i].width < 0.35 * docW && r.some((b, j) => wide[j] && Math.min(r[i].bottom, b.bottom) - Math.max(r[i].top, b.top) > 0)));
+  };
+  const expand = (el, depth) => sideBySide(kidsOf(el)).flatMap((k) => (depth < 8 && isWrapper(k) ? expand(k, depth + 1) : [k]));
+
+  let els = expand(document.body, 0);
+  // An app screen that is one big block: look one level inside it.
+  if (els.length === 1 && kidsOf(els[0]).length > 1) els = kidsOf(els[0]);
+
+  // Blocks: { el, y0, y1, x0, x1, kind: "header" | "footer" | "body", heading? }
+  const block = (el) => {
+    const r = rectOf(el);
+    return { el, y0: r.y, y1: r.y + r.h, x0: r.x, x1: r.x + r.w, kind: isHeader(el) || (topBar(el) && pinned(el)) ? "header" : isFooter(el) ? "footer" : "body" };
+  };
+  let blocks = els.map(block);
+
+  // Split a giant block into its full-width bands: down through single children that are all of it, then its
+  // children, when at least two of them are wide and at least half a screen tall.
+  const split = (b, depth = 0) => {
+    // Only a wrapper: a <section> or <article> that runs long is one section, its parts are its own business.
+    if (b.kind !== "body" || b.y1 - b.y0 <= GIANT_VH * vh || depth > 3 || b.el.matches(LANDMARK)) return [b];
+    let cur = b.el;
+    for (let i = 0; i < 6; i++) {
+      const ks = kidsOf(cur);
+      const big = ks.filter((k) => k.getBoundingClientRect().height >= 0.8 * cur.getBoundingClientRect().height);
+      if (ks.length && big.length === 1 && ks.length <= 3) cur = big[0];
+      else break;
+    }
+    const ks = kidsOf(cur).map(block);
+    const bands = ks.filter((k) => k.x1 - k.x0 >= 0.6 * docW && k.y1 - k.y0 >= 0.5 * vh);
+    if (bands.length < 2 || ks.some((k, i) => i && k.y0 < ks[i - 1].y1 - 2)) return [b];
+    // The pieces cover the whole block: the first from its top (its heading leads the block), the last to its
+    // bottom.
+    ks[0].y0 = Math.min(ks[0].y0, b.y0);
+    ks[ks.length - 1].y1 = Math.max(ks[ks.length - 1].y1, b.y1);
+    const lead = b.el.querySelector("h1, h2, h3");
+    if (lead && !ks[0].el.contains(lead) && lead.getBoundingClientRect().top + scrollY < ks[0].el.getBoundingClientRect().top + scrollY) ks[0].heading = lead;
+    for (const k of ks) (k.x0 = Math.min(k.x0, b.x0)), (k.x1 = Math.max(k.x1, b.x1));
+    return ks.flatMap((k) => split(k, depth + 1));
+  };
+  blocks = blocks.flatMap((b) => split(b));
+
+  // Headers first (one laid over the hero keeps its place), then the rest top to bottom; no overlaps.
+  const rank = (b) => (b.kind === "header" ? 0 : 1);
+  blocks.sort((a, b) => rank(a) - rank(b) || a.y0 - b.y0);
+  const kept = [];
+  for (const b of blocks) {
+    let { y0, y1 } = b;
+    for (const k of kept) {
+      if (y1 <= k.y0 + 2 || y0 >= k.y1 - 2) continue;
+      if (y0 >= k.y0 - 2 && y1 <= k.y1 + 2) (y0 = y1); // inside one already kept
+      else if (y0 < k.y0) y1 = Math.min(y1, k.y0); // starts above it: stop where it starts
+      else y0 = k.y1; // runs on below it: start where it ends
+    }
+    if (y1 - y0 >= 24) kept.push({ ...b, y0, y1 });
+  }
+  kept.sort((a, b) => a.y0 - b.y0);
+
+  // Tiny blocks join a neighbour: a lone heading or lead-in joins what follows it, anything else the nearer one.
+  const minor = (b) => {
+    if (b.kind !== "body") return false;
+    const h = b.y1 - b.y0;
+    // Short, narrow, or a lone line of text (a heading, a paragraph, a list of logos) at the top level.
+    return h < MINOR_H || (b.x1 - b.x0 < 0.6 * docW && h < 0.4 * vh) || (b.el.matches("h1, h2, h3, h4, p, strong, span, a, ul, ol, blockquote") && h < 0.5 * vh);
+  };
+  const headingLike = (b) => {
+    if (b.el.matches("h1, h2, h3") || b.el.querySelector("h1, h2, h3")) return true;
+    return parseFloat(getComputedStyle(b.el).fontSize) >= 24 || [...b.el.querySelectorAll("*")].slice(0, 40).some((e) => e.textContent.trim() && parseFloat(getComputedStyle(e).fontSize) >= 28);
+  };
+  for (let guard = 0; guard < 40; guard++) {
+    const i = kept.findIndex((b, k) => minor(b) && kept.filter((o) => o.kind === "body").length > 1 && (kept[k - 1]?.kind === "body" || kept[k + 1]?.kind === "body"));
+    if (i < 0) break;
+    const b = kept[i], prev = kept[i - 1]?.kind === "body" ? kept[i - 1] : null, next = kept[i + 1]?.kind === "body" ? kept[i + 1] : null;
+    const into = !prev ? next : !next ? prev : headingLike(b) ? next : b.y0 - prev.y1 <= next.y0 - b.y1 ? prev : next;
+    // The bigger of the two stays the element; the box is both.
+    const big = into.y1 - into.y0 >= b.y1 - b.y0 ? into : b;
+    const merged = { ...big, y0: Math.min(into.y0, b.y0), y1: Math.max(into.y1, b.y1), x0: Math.min(into.x0, b.x0), x1: Math.max(into.x1, b.x1), heading: into === next && headingLike(b) ? b.heading ?? b.el : big.heading };
+    kept.splice(Math.min(i, kept.indexOf(into)), 2, merged);
+  }
+
+  const selector = (el) => {
+    if (el.id && document.querySelectorAll(`#${CSS.escape(el.id)}`).length === 1) return `#${CSS.escape(el.id)}`;
+    const parts = [];
+    for (let e = el; e && e.nodeType === 1 && e !== document.body; e = e.parentElement) {
+      if (e.id && document.querySelectorAll(`#${CSS.escape(e.id)}`).length === 1) {
+        parts.unshift(`#${CSS.escape(e.id)}`);
+        return parts.join(" > ");
+      }
+      let i = 1;
+      for (let s = e.previousElementSibling; s; s = s.previousElementSibling) if (s.tagName === e.tagName) i++;
+      parts.unshift(`${e.tagName.toLowerCase()}:nth-of-type(${i})`);
+    }
+    return ["body", ...parts].join(" > ");
+  };
+  const headingOf = (b) => {
+    // The first heading that shows (a closed menu's headings don't name the header).
+    const shows = (h) => h.getClientRects().length > 0 && h.getBoundingClientRect().width > 0 && textOf(h);
+    if (b.heading && shows(b.heading)) return b.heading;
+    if (b.el.matches("h1, h2, h3")) return shows(b.el) ? b.el : null;
+    return [...b.el.querySelectorAll("h1, h2, h3")].find(shows) ?? null;
+  };
+  const nameOf = (b) => {
+    const el = b.el;
+    if (b.kind === "header") return "Header";
+    const label = el.getAttribute("aria-label");
+    if (label) return clean(label);
+    const by = el.getAttribute("aria-labelledby");
+    if (by) {
+      const t = by.split(/\s+/).map((id) => textOf(document.getElementById(id))).join(" ");
+      if (clean(t)) return clean(t);
+    }
+    const tag = el.tagName.toLowerCase();
+    const role = el.getAttribute("role");
+    if (b.kind === "header") return "Header";
+    const h = headingOf(b);
+    if (h) return textOf(h);
+    if (tag === "header" || role === "banner") return "Header";
+    if (tag === "footer" || role === "contentinfo") return "Footer";
+    if (tag === "nav" || role === "navigation") return "Navigation";
+    if (el.id) return el.id;
+    return textOf(el).slice(0, 40) || tag;
+  };
+  return kept
+    .filter((b) => b.y1 - b.y0 >= 40)
+    .slice(0, 16)
+    .map((b, i) => ({
+      index: i + 1,
+      name: nameOf(b).slice(0, 70),
+      tag: b.el.tagName.toLowerCase(),
+      id: b.el.id || null,
+      selector: selector(b.el),
+      heading: textOf(headingOf(b)).slice(0, 90) || null,
+      text: textOf(b.el).slice(0, 240),
+      box: { x: Math.round(b.x0), y: Math.round(b.y0), width: Math.round(b.x1 - b.x0), height: Math.round(b.y1 - b.y0) },
+      sticky: pinned(b.el),
+    }));
+};