@palate/cli 0.0.0-stage → 0.0.2

package/src/page-gate.js

@@ -0,0 +1,1307 @@
+// Runs inside the page (read as text and evaluated) with { sections, cell }. Measures the floor of a page,
+// the things that are visibly wrong whatever the taste: how much of each section carries ink (text, media,
+// surfaces, borders, shadows) on a coarse grid, the largest empty rectangle and where it sits, left/right
+// balance, imagery, a layout signature, boards (side-by-side columns in a framed panel) and how full each column
+// is, monospace and placeholder text, clipped text, and for the page the empty vertical bands and the
+// background colour runs. Also the page's system (each section's H2 size and left edge, its padding, filled
+// button heights, card styles), tiles with a void inside, photos placed more than once, bento grids (each tile's
+// size, surface and content type), the product frame in the hero (its share of the stage and the edges it bleeds
+// off) and real words cut by a clipping edge. Boxes are in page coordinates.
+({ sections, cell = 32 }) => {
+  const docW = document.documentElement.clientWidth;
+  const pageH = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
+  const vh = innerHeight;
+  const SKIP = new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "LINK", "META", "HEAD", "TITLE", "BR", "WBR", "SOURCE", "TRACK", "OPTION", "DATALIST"]);
+
+  // ---- 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);
+  // [r, g, b, a(0–1)] or null when (nearly) fully transparent or unreadable.
+  const rgba = (c) => {
+    const v = toRgba(c);
+    return v && v[3] >= 3 / 255 ? v : null;
+  };
+  const hex = (rgb) => (rgb ? "#" + rgb.slice(0, 3).map((v) => Math.round(v).toString(16).padStart(2, "0")).join("") : null);
+  const dist = (a, b) => Math.hypot(a[0] - b[0], a[1] - b[1], a[2] - b[2]);
+  const over = (top, under) => [0, 1, 2].map((i) => top[i] * top[3] + under[i] * (1 - top[3]));
+  // The colour actually painted behind an element: its own background and its ancestors', composited.
+  const bgMemo = new Map();
+  const paintedBg = (el) => {
+    if (!el || el.nodeType !== 1) return [255, 255, 255];
+    if (bgMemo.has(el)) return bgMemo.get(el);
+    const own = rgba(getComputedStyle(el).backgroundColor);
+    const out = own && own[3] >= 0.98 ? own.slice(0, 3) : own ? over(own, paintedBg(el.parentElement)) : paintedBg(el.parentElement);
+    bgMemo.set(el, out);
+    return out;
+  };
+  // A gradient with colours that differ (a real texture, not linear-gradient(#fff, #fff)).
+  const gradientVaries = (bi) => {
+    const cs = colourStops(bi).filter((c) => c[3] >= 3 / 255);
+    for (let i = 1; i < cs.length; i++) if (dist(cs[0], cs[i]) > 14 || Math.abs(cs[0][3] - cs[i][3]) > 0.2) return true;
+    return false;
+  };
+
+  // ---- visibility (opacity of the element and its ancestors)
+  const visMemo = new Map();
+  const shown = (el) => {
+    if (!el || el.nodeType !== 1 || el === document.documentElement) return true;
+    if (visMemo.has(el)) return visMemo.get(el);
+    const cs = getComputedStyle(el);
+    const v = cs.display !== "none" && parseFloat(cs.opacity) > 0.05 && shown(el.parentElement);
+    visMemo.set(el, v);
+    return v;
+  };
+  // A box with a ground of its own (a fill that differs from what is behind it) or a shadow.
+  const hasSurface = (el, cs) => {
+    const own = rgba(cs.backgroundColor);
+    if (own && own[3] > 0.08 && dist(over(own, paintedBg(el.parentElement)), paintedBg(el.parentElement)) > 9) return true;
+    return Boolean(cs.boxShadow && cs.boxShadow !== "none" && !/^rgba\(0, 0, 0, 0\)/.test(cs.boxShadow));
+  };
+  // Drawn border sides (visible against what is behind them).
+  const borderSides = (el, cs) => {
+    const under = paintedBg(el);
+    let n = 0;
+    for (const side of ["Top", "Right", "Bottom", "Left"]) {
+      if (!(parseFloat(cs[`border${side}Width`]) >= 0.5) || /none|hidden/.test(cs[`border${side}Style`])) continue;
+      const c = rgba(cs[`border${side}Color`]);
+      if (c && c[3] >= 0.12 && dist(over(c, under), under) >= 9) n++;
+    }
+    return n;
+  };
+  const pbox = (r) => ({ x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height });
+  const clean = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+
+  // ---- the ink grid: bit 1 ink (anything visible), 2 detail (text, borders, small media), 4 imagery, 8 texture
+  const cols = Math.max(1, Math.ceil(docW / cell));
+  const rows = Math.max(1, Math.ceil(pageH / cell));
+  const grid = new Uint8Array(cols * rows);
+  const inks = []; // { x, y, w, h } of everything that inks, for the page's empty bands
+  // band: false keeps it out of the empty-band measure (a texture over a gap is still a gap).
+  const mark = (b, bits, min = 3, band = true) => {
+    const x0 = Math.max(0, b.x), y0 = Math.max(0, b.y), x1 = Math.min(docW, b.x + b.w), y1 = Math.min(pageH, b.y + b.h);
+    if (x1 - x0 < 0.5 || y1 - y0 < 0.5) return;
+    if (band) inks.push({ x: x0, y: y0, w: x1 - x0, h: y1 - y0 });
+    const need = (lo, hi, a) => Math.min(min, hi - lo) - 0.01;
+    for (let r = Math.floor(y0 / cell); r <= Math.min(rows - 1, Math.floor((y1 - 0.01) / cell)); r++) {
+      const oy = Math.min(y1, (r + 1) * cell) - Math.max(y0, r * cell);
+      if (oy < need(y0, y1)) continue;
+      for (let c = Math.floor(x0 / cell); c <= Math.min(cols - 1, Math.floor((x1 - 0.01) / cell)); c++) {
+        const ox = Math.min(x1, (c + 1) * cell) - Math.max(x0, c * cell);
+        if (ox < need(x0, x1)) continue;
+        grid[r * cols + c] |= bits;
+      }
+    }
+  };
+
+  const sectionEls = sections.map((s) => {
+    try {
+      return document.querySelector(s.selector);
+    } catch {
+      return null;
+    }
+  });
+  const sectionOf = (y) => sections.find((s) => y >= s.box.y && y < s.box.y + s.box.height) ?? null;
+  const media = [];
+  const surfaces = []; // framed boxes (cards, panels, product boards) big enough to hold a layout of their own
+  const framed = []; // big boxes with their own ground, shadow or a border all round: where boards live
+  const solid = []; // every media box and every box with a ground, shadow or a border all round (tiles, chips, inputs)
+  const pictures = []; // raster images 64px and up, by source: for PHOTO_REPEAT
+  const all = document.body.querySelectorAll("*");
+  for (const el of all) {
+    if (SKIP.has(el.tagName)) continue;
+    const tag = el.tagName.toLowerCase();
+    if (el.parentElement?.closest("svg")) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width < 1 || r.height < 1) continue;
+    if (r.bottom + scrollY < 0 || r.right < 0 || r.left > docW) continue;
+    const cs = getComputedStyle(el);
+    if (cs.visibility === "hidden" || cs.visibility === "collapse" || !shown(el)) continue;
+    const b = pbox(r);
+    const sec = sectionOf(b.y + b.h / 2);
+    const secArea = sec ? sec.box.width * sec.box.height : docW * pageH;
+    // A wrapper that is (nearly) the whole section, or a full-bleed band: its colour is the section's, not ink.
+    const wrapper = b.w * b.h >= 0.85 * secArea || (b.w >= docW - 2 && b.h > 0.5 * vh);
+    if (["img", "video", "canvas", "iframe", "svg", "object", "embed"].includes(tag)) {
+      const big = b.w * b.h >= 4096 && Math.max(b.w, b.h) > 64;
+      mark(b, 1 | (big ? 4 : 2));
+      if (big) media.push({ ...b, tag });
+      solid.push({ ...b, el, media: true });
+      if (tag === "img" && b.w >= 64 && b.h >= 64) pictures.push({ ...b, el, src: el.currentSrc || el.src });
+      continue;
+    }
+    const bi = cs.backgroundImage;
+    let bgPicture = false;
+    if (bi && bi !== "none") {
+      if (/url\(/.test(bi)) {
+        const big = b.w * b.h >= 4096 && Math.max(b.w, b.h) > 64;
+        mark(b, 1 | (big ? 4 : 2));
+        if (big) media.push({ ...b, tag: "background-image" });
+        bgPicture = true;
+        solid.push({ ...b, el, media: true });
+        // A photo set as a background (cover or contain, not a repeated pattern tile).
+        const u = bi.match(/url\(["']?([^"')]+)["']?\)/)?.[1];
+        if (u && b.w >= 64 && b.h >= 64 && (/no-repeat/.test(cs.backgroundRepeat) || /cover|contain/.test(cs.backgroundSize))) pictures.push({ ...b, el, src: u, bg: true });
+      } else if (gradientVaries(bi)) mark(b, wrapper ? 8 : 1 | 8);
+    }
+    // A texture painted by a ::before / ::after overlay (palate's own recipe: .texture-paper-over::after {
+    // background: url(textures/paper.svg) }) is material over the area it covers, though not ink.
+    for (const pseudo of ["::before", "::after"]) {
+      const ps = getComputedStyle(el, pseudo);
+      if (!ps.content || ps.content === "none" || ps.content === "normal" || ps.display === "none" || ps.visibility === "hidden" || parseFloat(ps.opacity) < 0.02) continue;
+      const pbi = ps.backgroundImage;
+      if (!pbi || pbi === "none" || !(/url\(/.test(pbi) || gradientVaries(pbi))) continue;
+      // Its box: an overlay (absolute, inset 0) covers the element; else its own size. Kept inside the element.
+      const w = parseFloat(ps.width), h = parseFloat(ps.height);
+      const out = ps.position === "absolute" || ps.position === "fixed";
+      const pb = Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0 ? { x: b.x + (out ? parseFloat(ps.left) || 0 : 0), y: b.y + (out ? parseFloat(ps.top) || 0 : 0), w, h } : b;
+      const x0 = Math.max(b.x, pb.x), y0 = Math.max(b.y, pb.y), x1 = Math.min(b.x + b.w, pb.x + pb.w), y1 = Math.min(b.y + b.h, pb.y + pb.h);
+      // Grain over a photo is the photo's finish, not more material: it is already counted as imagery.
+      const onMedia = [...el.querySelectorAll("img, picture, video, canvas")].some((m) => {
+        const mr = m.getBoundingClientRect();
+        return mr.width * mr.height >= 0.5 * (x1 - x0) * (y1 - y0);
+      });
+      if (!onMedia && x1 - x0 >= 8 && y1 - y0 >= 8) mark({ x: x0, y: y0, w: x1 - x0, h: y1 - y0 }, 8, 3, false);
+    }
+    let surface = false;
+    if (!wrapper) {
+      surface = hasSurface(el, cs);
+      if (surface) {
+        mark(b, 1);
+        if (b.w >= 240 && b.h >= 200) surfaces.push({ ...b, el });
+      }
+    }
+    // Borders: only the lines themselves are ink.
+    const under = paintedBg(el);
+    let sides = 0;
+    for (const [side, line] of [
+      ["Top", { x: b.x, y: b.y, w: b.w, h: 1 }],
+      ["Bottom", { x: b.x, y: b.y + b.h - 1, w: b.w, h: 1 }],
+      ["Left", { x: b.x, y: b.y, w: 1, h: b.h }],
+      ["Right", { x: b.x + b.w - 1, y: b.y, w: 1, h: b.h }],
+    ]) {
+      const w = parseFloat(cs[`border${side}Width`]);
+      if (!(w >= 0.5) || cs[`border${side}Style`] === "none" || cs[`border${side}Style`] === "hidden") continue;
+      const c = rgba(cs[`border${side}Color`]);
+      if (!c || c[3] < 0.12 || dist(over(c, under), under) < 9) continue;
+      mark(line, 1 | 2, 0.5);
+      sides++;
+    }
+    if (!wrapper && (surface || sides >= 3) && b.w >= 320 && b.h >= 240) framed.push({ ...b, el });
+    if (!wrapper && (surface || sides >= 3) && !bgPicture) solid.push({ ...b, el, surface, sides, cs });
+  }
+
+  // Text: the line boxes of every visible text node.
+  const texts = [];
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+  const range = document.createRange();
+  for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+    const t = n.data;
+    if (!t || !t.trim()) continue;
+    const p = n.parentElement;
+    if (!p || SKIP.has(p.tagName) || p.closest("svg, script, style, noscript, template, select, textarea")) continue;
+    const cs = getComputedStyle(p);
+    if (cs.visibility !== "visible" || !shown(p)) continue;
+    const col = rgba(cs.color);
+    if (!col || col[3] < 0.1) continue;
+    range.selectNodeContents(n);
+    const rects = [...range.getClientRects()].filter((r) => r.width >= 1 && r.height >= 1).map(pbox);
+    if (!rects.length) continue;
+    for (const r of rects) mark(r, 1 | 2, 4);
+    texts.push({ node: n, el: p, text: t, rects, cs });
+  }
+
+  const at = (r, c) => grid[r * cols + c];
+  // Rows/columns of the grid inside a page box.
+  const span = (b) => ({ c0: Math.max(0, Math.floor(b.x / cell)), c1: Math.min(cols, Math.ceil((b.x + b.w) / cell)), r0: Math.max(0, Math.floor(b.y / cell)), r1: Math.min(rows, Math.ceil((b.y + b.h) / cell)) });
+
+  // ---- the page's content column: the median section's ink extent
+  const extents = sections.map((s) => {
+    const { c0, c1, r0, r1 } = span({ x: s.box.x, y: s.box.y, w: s.box.width, h: s.box.height });
+    let lo = Infinity, hi = -Infinity;
+    for (let r = r0; r < r1; r++) for (let c = c0; c < c1; c++) if (at(r, c) & 1) (lo = Math.min(lo, c)), (hi = Math.max(hi, c));
+    return lo <= hi ? [lo, hi + 1] : null;
+  });
+  const med = (xs) => {
+    const s = xs.filter((v) => v != null).sort((a, b) => a - b);
+    return s.length ? s[Math.floor(s.length / 2)] : null;
+  };
+  const colL = med(extents.map((e) => e?.[0])) ?? 0;
+  const colR = med(extents.map((e) => e?.[1])) ?? cols;
+
+  // Largest all-empty rectangle (in cells) of a sub-grid, by the histogram method.
+  const largestEmpty = (r0, r1, c0, c1, mask = 1) => {
+    const w = c1 - c0;
+    const h = new Array(w).fill(0);
+    let best = { area: 0, r0, r1: r0, c0, c1: c0 };
+    for (let r = r0; r < r1; r++) {
+      for (let c = 0; c < w; c++) h[c] = at(r, c0 + c) & mask ? 0 : h[c] + 1;
+      const st = [];
+      for (let c = 0; c <= w; c++) {
+        const hc = c < w ? h[c] : 0;
+        let start = c;
+        while (st.length && st[st.length - 1][1] >= hc) {
+          const [s0, hs] = st.pop();
+          if (hs * (c - s0) > best.area) best = { area: hs * (c - s0), r0: r - hs + 1, r1: r + 1, c0: c0 + s0, c1: c0 + c };
+          start = s0;
+        }
+        st.push([start, hc]);
+      }
+    }
+    return best;
+  };
+
+  // ---- layout signature from the DOM
+  const blockKids = (el) =>
+    [...el.children].filter((k) => {
+      if (SKIP.has(k.tagName)) return false;
+      const r = k.getBoundingClientRect();
+      const cs = getComputedStyle(k);
+      return r.width > 8 && r.height > 8 && cs.display !== "none" && cs.visibility !== "hidden" && cs.position !== "absolute" && cs.position !== "fixed" && shown(k);
+    });
+  const unwrap = (el) => {
+    let e = el;
+    for (let i = 0; i < 10; i++) {
+      const k = blockKids(e);
+      if (k.length !== 1) break;
+      e = k[0];
+    }
+    return e;
+  };
+  const rowsOf = (els) => {
+    const items = els.map((e) => ({ e, r: e.getBoundingClientRect() })).sort((a, b) => a.r.top - b.r.top);
+    const out = [];
+    for (const it of items) {
+      const row = out.find((g) => g.some((o) => Math.min(o.r.bottom, it.r.bottom) - Math.max(o.r.top, it.r.top) > 0.5 * Math.min(o.r.height, it.r.height) && (Math.min(o.r.right, it.r.right) - Math.max(o.r.left, it.r.left)) < 0.5 * Math.min(o.r.width, it.r.width)));
+      if (row) row.push(it);
+      else out.push([it]);
+    }
+    return out;
+  };
+  const layoutOf = (el, s) => {
+    if (!el) return null;
+    const root = unwrap(el);
+    const rowsDesc = [];
+    let cards = 0;
+    for (const row of rowsOf(blockKids(root))) {
+      const h = Math.max(...row.map((i) => i.r.height));
+      if (h < 40) continue;
+      let n = row.length;
+      let items = row.map((i) => i.r);
+      if (n === 1) {
+        const inner = blockKids(unwrap(row[0].e));
+        const ir = inner.length >= 2 ? rowsOf(inner).filter((g) => Math.max(...g.map((i) => i.r.height)) >= 40) : [];
+        if (ir.length && ir[0].length >= 2) {
+          n = ir[0].length;
+          items = ir[0].map((i) => i.r);
+        }
+      }
+      const ws = items.map((r) => r.width), hs = items.map((r) => r.height);
+      const equal = n >= 2 && Math.max(...ws) / Math.max(1, Math.min(...ws)) < 1.08 && Math.max(...hs) / Math.max(1, Math.min(...hs)) < 1.25;
+      if (equal) cards = Math.max(cards, n);
+      rowsDesc.push({ cols: n, equal, h: Math.round(h) });
+    }
+    // Collapse a run of single-column rows (eyebrow, heading, paragraph, buttons) into one.
+    const seq = [];
+    for (const r of rowsDesc) if (!(r.cols === 1 && seq[seq.length - 1] === 1)) seq.push(r.cols);
+    const head = [...el.querySelectorAll("h1, h2, h3")].find((h) => h.getBoundingClientRect().width > 0 && shown(h) && clean(h.textContent));
+    let align = "N";
+    if (head) {
+      range.selectNodeContents(head);
+      const lr = [...range.getClientRects()].filter((r) => r.width > 1);
+      const l = Math.min(...lr.map((r) => r.left)), rr = Math.max(...lr.map((r) => r.right));
+      const mid = (l + rr) / 2 + scrollX;
+      const fmid = s.box.x + s.box.width / 2;
+      const ta = getComputedStyle(head).textAlign;
+      align = lr.length && Math.abs(mid - fmid) < 0.06 * s.box.width && (ta === "center" || rr - l < 0.8 * s.box.width) ? "C" : "L";
+    }
+    const headingGrid = rowsDesc.length >= 2 && rowsDesc[0].cols === 1 && head && root.firstElementChild?.contains(head) !== false && rowsDesc.slice(1).some((r) => r.equal && r.cols >= 2) ? rowsDesc.slice(1).find((r) => r.equal && r.cols >= 2).cols : 0;
+    const columns = Math.max(1, ...rowsDesc.map((r) => r.cols));
+    return { align, rows: rowsDesc, columns, cards, headingGrid, signature: `${align}:${seq.join("/") || "0"}` };
+  };
+  // The tallest single-column run of like items (a board, a list) inside a section: what a phone stacks.
+  const stackOf = (el) => {
+    if (!el) return null;
+    let best = null;
+    for (const p of [el, ...el.querySelectorAll("*")].slice(0, 3000)) {
+      const ks = blockKids(p);
+      if (ks.length < 3) continue;
+      const key = (k) => k.tagName + "." + (typeof k.className === "string" ? k.className.split(/\s+/).sort().join(".") : "");
+      const counts = new Map();
+      for (const k of ks) counts.set(key(k), (counts.get(key(k)) ?? 0) + 1);
+      const like = Math.max(...counts.values());
+      if (like < 3 || like < 0.75 * ks.length) continue;
+      const rs = ks.map((k) => k.getBoundingClientRect()).sort((a, b) => a.top - b.top);
+      if (!rs.every((r, i) => !i || r.top >= rs[i - 1].bottom - 2)) continue;
+      const h = rs[rs.length - 1].bottom - rs[0].top;
+      // Reference entries (commands, questions, changelog items) each carry their own id for deep links.
+      const anchored = ks.filter((k) => k.id || k.querySelector(":scope > [id], :scope > * > [id]")).length;
+      if (!best || h > best.height) best = { height: Math.round(h), items: ks.length, anchored, tag: p.tagName.toLowerCase(), cls: typeof p.className === "string" ? p.className.slice(0, 60) : "" };
+    }
+    return best;
+  };
+
+  // ---- boards: side-by-side columns inside a big framed panel (a kanban, a schedule, a comparison) and how much
+  // of each column's height holds anything. Cards inside a panel ink the coarse grid, so a board whose columns
+  // are one small card each over a tall blank reads as full there; here each column is measured on its own.
+  const boardOf = (p, claimed) => {
+    // The row of columns: three to eight block children side by side, of similar width, spanning most of the
+    // panel's width and at least half its height.
+    let best = null;
+    for (const e of [p.el, ...p.el.querySelectorAll("*")].slice(0, 1500)) {
+      if (claimed.has(e)) continue;
+      const ks = blockKids(e);
+      if (ks.length < 3 || ks.length > 8) continue;
+      const rs = ks.map((k) => pbox(k.getBoundingClientRect())).sort((a, z) => a.x - z.x);
+      // Only what shows inside the panel (a board that scrolls sideways shows some of its columns).
+      const vis = rs.map((r) => ({ ...r, vw: Math.min(r.x + r.w, p.x + p.w) - Math.max(r.x, p.x) })).filter((r) => r.vw >= 0.5 * r.w);
+      if (vis.length < 3) continue;
+      const top = Math.min(...vis.map((r) => r.y)), bot = Math.max(...vis.map((r) => r.y + r.h)), rh = bot - top;
+      if (rh < Math.max(200, 0.5 * p.h)) continue;
+      if (!vis.every((r, k) => r.w >= 120 && r.y - top <= 0.1 * rh && (!k || r.x >= vis[k - 1].x + vis[k - 1].w - 2))) continue;
+      const ws = vis.map((r) => r.w);
+      if (Math.max(...ws) / Math.min(...ws) > 1.6 || ws.reduce((a, z) => a + z, 0) < 0.6 * p.w) continue;
+      if (!best || rh * vis.length > best.rh * best.cols.length) best = { e, cols: vis, top, rh };
+    }
+    if (!best) return null;
+    // What fills a column: text lines, media, and boxes with a surface of their own (cards, chips, inputs), from
+    // anywhere in the panel (a toast laid over the board fills what it covers).
+    const boxes = [];
+    for (const t of texts) if (p.el.contains(t.el)) boxes.push(...t.rects);
+    const colArea = Math.min(...best.cols.map((c) => c.w)) * best.rh;
+    for (const el of p.el.querySelectorAll("*")) {
+      if (SKIP.has(el.tagName) || el.parentElement?.closest("svg")) continue;
+      const r = el.getBoundingClientRect();
+      if (r.width < 4 || r.height < 4) continue;
+      const cs = getComputedStyle(el);
+      if (cs.visibility !== "visible" || !shown(el)) continue;
+      const media = /^(IMG|SVG|CANVAS|VIDEO|PICTURE|IFRAME|OBJECT|EMBED)$/i.test(el.tagName) || /url\(/.test(cs.backgroundImage);
+      if (!media && !(hasSurface(el, cs) || borderSides(el, cs) >= 3)) continue;
+      if (r.width * r.height >= 0.8 * colArea) continue; // the column itself, or a frame around several
+      boxes.push(pbox(r));
+    }
+    const columns = best.cols.map((c) => {
+      const spans = boxes
+        .filter((q) => Math.min(q.x + q.w, c.x + c.w) - Math.max(q.x, c.x) >= Math.min(16, 0.5 * q.w))
+        .map((q) => [Math.max(best.top, q.y), Math.min(best.top + best.rh, q.y + q.h)])
+        .filter(([a, z]) => z > a)
+        .sort((a, z) => a[0] - z[0]);
+      // Content runs closer than 16px apart (cards in a stack, a label over its value) are one run.
+      let covered = 0, cur = null, last = best.top;
+      for (const [a, z] of spans) {
+        if (cur && a <= cur[1] + 16) cur[1] = Math.max(cur[1], z);
+        else {
+          if (cur) covered += cur[1] - cur[0];
+          cur = [a, z];
+        }
+        last = Math.max(last, z);
+      }
+      if (cur) covered += cur[1] - cur[0];
+      return { x: Math.round(c.x), width: Math.round(c.w), fill: +(covered / best.rh).toFixed(2), tail: +((best.top + best.rh - last) / best.rh).toFixed(2) };
+    });
+    claimed.add(best.e);
+    const fills = columns.map((c) => c.fill);
+    return { x: Math.round(p.x), y: Math.round(p.y), width: Math.round(p.w), height: Math.round(p.h), top: Math.round(best.top), columnHeight: Math.round(best.rh), columns, mean: +(fills.reduce((a, z) => a + z, 0) / fills.length).toFixed(2) };
+  };
+  const claimed = new Set();
+  // Innermost panels first, so a row is credited to the frame that holds it.
+  const boards = framed
+    .sort((a, z) => a.w * a.h - z.w * z.h)
+    .map((p) => ({ p, sec: sectionOf(p.y + p.h / 2) }))
+    .filter(({ p, sec }) => p.w >= 0.4 * (sec ? sec.box.width : docW))
+    .map(({ p, sec }) => ({ sec, board: boardOf(p, claimed) }))
+    .filter((x) => x.board);
+
+  // ---- per section
+  const out = sections.map((s, i) => {
+    const el = sectionEls[i];
+    const b = { x: s.box.x, y: s.box.y, w: s.box.width, h: s.box.height };
+    const sp = span(b);
+    // The frame: the section's rows that hold ink, across the page's content column (or wider, if it is).
+    const own = extents[i];
+    const c0 = Math.max(sp.c0, Math.min(colL, own?.[0] ?? colL)), c1 = Math.min(sp.c1, Math.max(colR, own?.[1] ?? colR));
+    let r0 = sp.r1, r1 = sp.r0;
+    for (let r = sp.r0; r < sp.r1; r++) for (let c = c0; c < c1; c++) if (at(r, c) & 1) (r0 = Math.min(r0, r)), (r1 = Math.max(r1, r + 1));
+    const bg = hex(paintedBg(el ?? document.body));
+    if (r0 >= r1 || c0 >= c1) return { index: s.index, tag: s.tag, name: s.name, sticky: Boolean(s.sticky), heading: s.heading ?? s.name, rect: s.box, bg, empty: true, ink: 0, detail: 0, imagery: 0, texture: 0 };
+    let ink = 0, detail = 0, img = 0, tex = 0, left = 0, right = 0;
+    const mid = (c0 + c1) / 2;
+    for (let r = r0; r < r1; r++)
+      for (let c = c0; c < c1; c++) {
+        const v = at(r, c);
+        if (v & 1) {
+          ink++;
+          if (c + 0.5 < mid) left++;
+          else right++;
+        }
+        if (v & 2) detail++;
+        if (v & 4) img++;
+        if (v & 8) tex++;
+      }
+    const n = (r1 - r0) * (c1 - c0);
+    const e = largestEmpty(r0, r1, c0, c1);
+    const ew = e.c1 - e.c0, eh = e.r1 - e.r0;
+    const fw = c1 - c0, fh = r1 - r0;
+    const ex = (e.c0 + e.c1) / 2 - c0, ey = (e.r0 + e.r1) / 2 - r0;
+    const where = ew >= 0.6 * fw ? (ey < fh / 2 ? "top" : "bottom") : ex < 0.4 * fw ? "left" : ex > 0.6 * fw ? "right" : eh >= 0.6 * fh ? "centre" : ey < fh / 2 ? "top" : "bottom";
+    // The longest run of rows where one half of the frame is bare while the other holds ink (a left-aligned
+    // heading with nothing beside it).
+    let run = 0, best = { px: 0, side: null, y: null }, side = null;
+    const midC = Math.floor((c0 + c1) / 2);
+    for (let r = r0; r <= r1; r++) {
+      let L = false, R = false;
+      if (r < r1) for (let c = c0; c < c1; c++) if (at(r, c) & 1) c < midC ? (L = true) : (R = true);
+      const s1 = r < r1 && L !== R ? (L ? "right" : "left") : null;
+      if (s1 && s1 === side) run++;
+      else {
+        if (side && run * cell > best.px) best = { px: run * cell, side, y: (r - run) * cell };
+        run = s1 ? 1 : 0;
+      }
+      side = s1;
+    }
+    // Panels (product boards, big cards): how much of each holds content, and its largest bare area.
+    const panels = surfaces
+      .filter((p) => p.y + p.h / 2 >= b.y && p.y + p.h / 2 < b.y + b.h && p.w * p.h >= 0.12 * fw * fh * cell * cell)
+      .filter((p, k, arr) => !arr.some((q) => q !== p && q.el.contains(p.el) && q.w * q.h >= p.w * p.h))
+      .sort((p, q) => q.w * q.h - p.w * p.h)
+      .slice(0, 3)
+      .map((p) => {
+        const q = span(p);
+        const pr0 = q.r0 + 1, pr1 = q.r1 - 1, pc0 = q.c0 + 1, pc1 = q.c1 - 1;
+        if (pr1 - pr0 < 3 || pc1 - pc0 < 3) return null;
+        let fill = 0;
+        for (let r = pr0; r < pr1; r++) for (let c = pc0; c < pc1; c++) if (at(r, c) & 6) fill++;
+        const pn = (pr1 - pr0) * (pc1 - pc0);
+        const pe = largestEmpty(pr0, pr1, pc0, pc1, 6);
+        return { x: Math.round(p.x), y: Math.round(p.y), width: Math.round(p.w), height: Math.round(p.h), fill: +(fill / pn).toFixed(3), largestEmpty: +(pe.area / pn).toFixed(3) };
+      })
+      .filter(Boolean);
+    // Imagery over the whole section (a full-bleed photo counts even outside the column).
+    let simg = 0, stex = 0, scells = 0;
+    for (let r = sp.r0; r < sp.r1; r++) for (let c = sp.c0; c < sp.c1; c++) (scells++, (simg += at(r, c) & 4 ? 1 : 0), (stex += at(r, c) & 8 ? 1 : 0));
+    return {
+      index: s.index,
+      tag: s.tag, name: s.name, sticky: Boolean(s.sticky),
+      heading: s.heading ?? s.name,
+      rect: s.box,
+      frame: { x: c0 * cell, y: r0 * cell, width: fw * cell, height: fh * cell },
+      bg,
+      ink: +(ink / n).toFixed(3),
+      detail: +(detail / n).toFixed(3),
+      empty: false,
+      largestEmpty: { share: +((ew * eh) / n).toFixed(3), where, x: e.c0 * cell, y: e.r0 * cell, width: ew * cell, height: eh * cell },
+      sideEmpty: best,
+      panels,
+      boards: boards.filter((x) => x.sec?.index === s.index).map((x) => x.board),
+      balance: { left: +(left / n).toFixed(3), right: +(right / n).toFixed(3), ratio: +(Math.min(left, right) / Math.max(1, left, right)).toFixed(3) },
+      imagery: +(simg / Math.max(1, scells)).toFixed(3),
+      texture: +(stex / Math.max(1, scells)).toFixed(3),
+      layout: layoutOf(el, s),
+      stack: stackOf(el),
+    };
+  });
+
+  // ---- page background runs: what wide elements paint, row by row (document order is paint order here)
+  const painters = [{ y0: 0, y1: pageH, color: hex(paintedBg(document.body)) }];
+  for (const el of all) {
+    if (SKIP.has(el.tagName) || el.closest("svg")) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width < 0.9 * docW || r.height < 8) continue;
+    const cs = getComputedStyle(el);
+    if (cs.visibility === "hidden" || !shown(el) || cs.position === "fixed" || cs.position === "sticky") continue;
+    const y0 = r.top + scrollY, y1 = r.bottom + scrollY;
+    if (cs.backgroundImage && /url\(/.test(cs.backgroundImage) && r.height > 120) painters.push({ y0, y1, color: "image" });
+    const c = rgba(cs.backgroundColor);
+    if (c && c[3] > 0.5) painters.push({ y0, y1, color: hex(paintedBg(el)) });
+  }
+  const cuts = [...new Set(painters.flatMap((p) => [p.y0, p.y1]).map((v) => Math.max(0, Math.min(pageH, Math.round(v)))))].sort((a, b) => a - b);
+  const runs = [];
+  for (let k = 0; k < cuts.length - 1; k++) {
+    const y0 = cuts[k], y1 = cuts[k + 1];
+    if (y1 - y0 < 1) continue;
+    const m = (y0 + y1) / 2;
+    let color = null;
+    for (const p of painters) if (m >= p.y0 && m < p.y1) color = p.color;
+    const last = runs[runs.length - 1];
+    if (last && last.color === color) last.y1 = y1;
+    else runs.push({ y0, y1, color });
+  }
+  const near = (a, b) => a === b || (a !== "image" && b !== "image" && a && b && dist(rgba(a), rgba(b)) < 10);
+  const colours = [];
+  for (const r of runs) {
+    const c = colours.find((x) => near(x.color, r.color));
+    if (c) c.px += r.y1 - r.y0;
+    else colours.push({ color: r.color, px: r.y1 - r.y0 });
+  }
+  const bgRuns = colours.map((c) => ({ color: c.color, share: +(c.px / pageH).toFixed(3) })).sort((a, b) => b.share - a.share);
+  const edges = runs.slice(1).filter((r, k) => !near(r.color, runs[k].color)).map((r) => r.y0);
+
+  // ---- empty vertical bands: gaps between ink (long hairlines at the page edge don't count), cut at colour changes
+  const ys = inks.filter((r) => !(r.w <= 3 && r.h > 600)).map((r) => [r.y, r.y + r.h]).sort((a, b) => a[0] - b[0]);
+  const merged = [];
+  for (const [a, b] of ys) {
+    const last = merged[merged.length - 1];
+    if (last && a <= last[1]) last[1] = Math.max(last[1], b);
+    else merged.push([a, b]);
+  }
+  const bands = [];
+  for (let k = 1; k < merged.length; k++) {
+    let a = merged[k - 1][1];
+    const z = merged[k][0];
+    for (const cut of [...edges.filter((y) => y > a && y < z), z]) {
+      if (cut - a >= 8) {
+        const from = sectionOf(a + 1), to = sectionOf(cut - 1);
+        // edge: the band runs up to a change of background colour (the padding of a coloured band).
+        const edge = edges.some((y) => Math.abs(y - a) < 2 || Math.abs(y - cut) < 2);
+        bands.push({ y: Math.round(a), height: Math.round(cut - a), sections: [...new Set([from?.index, to?.index].filter(Boolean))], between: (from?.index ?? 0) !== (to?.index ?? 0), edge });
+      }
+      a = cut;
+    }
+  }
+
+  // ---- text checks
+  const monoFamily = (ff) => {
+    const fams = ff.split(",").map((f) => f.replace(/["']/g, "").trim().toLowerCase());
+    return /mono|courier|consolas|menlo|monaco|code|terminal|typewriter|plex mono|inconsolata/.test(fams[0] ?? "") || fams[0] === "monospace";
+  };
+  let mono = 0, totalChars = 0;
+  const monoSnips = new Map();
+  for (const t of texts) {
+    const len = clean(t.text).length;
+    totalChars += len;
+    if (!monoFamily(t.cs.fontFamily) || t.el.closest("code, pre, kbd, samp, tt, var")) continue;
+    mono += len;
+    const key = t.el;
+    if (!monoSnips.has(key)) monoSnips.set(key, { text: clean(t.el.textContent).slice(0, 60), line: clean((t.el.parentElement ?? t.el).textContent).slice(0, 60), section: sectionOf(t.rects[0].y)?.index ?? null, family: t.cs.fontFamily.split(",")[0].replace(/["']/g, "").trim() });
+  }
+  const numeric = (s) => (s.match(/[\d°%$€£:]/g) ?? []).length >= Math.max(1, 0.3 * s.replace(/\s/g, "").length);
+  // Code, not numbers: a git hash ("a3f9c21"), a shell prompt ("$ tracewell init", a lone "$" or ">" before a
+  // command), an HTTP route ("POST /checkout"), a path ("src/app.ts"), identifiers and calls.
+  const HASH = /^(?=[0-9a-f]*[a-f])(?=[0-9a-f]*\d)[0-9a-f]{7,40}$/i;
+  const PROMPT = /^[$>❯›#%](\s|$)/;
+  const HTTP = /\b(GET|POST|PUT|PATCH|DELETE|HEAD|OPTIONS)\b/;
+  const codeLike = (s, line = "") => HASH.test(s) || PROMPT.test(s) || PROMPT.test(line) || HTTP.test(s) || (/[_~/{}()<>=;@]|\w\.\w+\(|[a-z][A-Z]|^[a-z]+(-[a-z]+)+$/.test(s) && !/^[\d\s.,:°%$€£+\-–]+$/.test(s));
+  const monoList = [...monoSnips.values()].map(({ line, ...m }) => ({ ...m, numeric: numeric(m.text) && !codeLike(m.text, line), code: codeLike(m.text, line) }));
+
+  const PLACE = /lorem ipsum|\blorem\b|ipsum dolor|\bplaceholder\b|example\.(com|org|net)|\bjohn doe\b|\bjane doe\b|\bacme\b|\{\{|\[(your|insert)\b|\binsert (text|image|copy)\b|\bcompany name\b|\byour logo\b/i;
+  const PROPER = /\bYour (Studio|studio|Company|company|Name|name|Brand|brand|Business|business|Team|team|Logo|logo|Shop|shop|Store|store|Product|product|App|app)\b(?!['’]s)/g;
+  const blockOf = (el) => {
+    for (let e = el; e && e !== document.body; e = e.parentElement) if (!/^(inline|contents)/.test(getComputedStyle(e).display)) return e;
+    return document.body;
+  };
+  const placeholders = [];
+  const seenPh = new Set();
+  for (const t of texts) {
+    const blk = blockOf(t.el);
+    if (seenPh.has(blk)) continue;
+    const full = clean(blk.textContent);
+    let hit = full.match(PLACE)?.[0] ?? null;
+    // The bare word in a sentence about placeholders ("flags hype, filler, placeholder text and …") isn't one: real
+    // placeholder copy is short ("Placeholder", "Placeholder text here").
+    if (hit && /^placeholder$/i.test(hit) && full.split(/\s+/).length > 8) hit = null;
+    if (!hit) {
+      // "Your studio" as a name, mid-sentence ("at Your studio", "Kiln · Your studio"), not "Your studio, sorted."
+      for (const m of full.matchAll(PROPER)) {
+        const before = full.slice(0, m.index).trim();
+        if (before && !/[.!?:;"“(\]]$/.test(before)) {
+          hit = m[0];
+          break;
+        }
+      }
+    }
+    seenPh.add(blk);
+    if (hit) placeholders.push({ match: hit, text: full.slice(0, 100), section: sectionOf(t.rects[0].y)?.index ?? null });
+  }
+
+  const clipped = [];
+  const seenClip = new Set();
+  for (const el of all) {
+    if (SKIP.has(el.tagName) || el.closest("svg") || el === document.body) continue;
+    const cs = getComputedStyle(el);
+    if (!/hidden|clip/.test(cs.overflowX + cs.overflowY)) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width < 8 || r.height < 8 || !shown(el) || cs.visibility !== "visible") continue;
+    // Visually hidden on purpose (skip links, screen-reader text).
+    if ((cs.clip && cs.clip !== "auto") || /inset\(50%|inset\(100%/.test(cs.clipPath) || el.closest(".sr-only, .visually-hidden")) continue;
+    const text = clean(el.textContent);
+    if (!text || text.length > 160) continue;
+    if (el.scrollWidth <= el.clientWidth + 1 && el.scrollHeight <= el.clientHeight + 1) continue;
+    const intended = cs.textOverflow === "ellipsis" || (cs.webkitLineClamp && cs.webkitLineClamp !== "none");
+    // Text partly outside the box (wholly outside is a hidden slide, not clipping).
+    const box = { l: r.left + el.clientLeft, t: r.top + el.clientTop, r: r.left + el.clientLeft + el.clientWidth, b: r.top + el.clientTop + el.clientHeight };
+    range.selectNodeContents(el);
+    const lr = [...range.getClientRects()].filter((q) => q.width > 1 && q.height > 1);
+    const partly = lr.some((q) => {
+      const inside = Math.min(q.right, box.r) - Math.max(q.left, box.l) > 0 && Math.min(q.bottom, box.b) - Math.max(q.top, box.t) > 0;
+      const beyond = q.left < box.l - 1.5 || q.right > box.r + 1.5 || q.top < box.t - 1.5 || q.bottom > box.b + 1.5;
+      return inside && beyond;
+    });
+    if (!partly) continue;
+    if ([...seenClip].some((o) => o.contains(el) || el.contains(o))) continue;
+    seenClip.add(el);
+    const small = r.width <= 72 && r.height <= 72;
+    const rounded = parseFloat(cs.borderTopLeftRadius) > 0;
+    clipped.push({ text: text.slice(0, 40), width: Math.round(r.width), height: Math.round(r.height), small, rounded, intended: Boolean(intended), section: sectionOf(r.top + scrollY + r.height / 2)?.index ?? null });
+  }
+
+  // Small round things (avatars, badges) whose text a later sibling paints over: stacked avatars with
+  // their initials cut off.
+  for (const el of all) {
+    if (SKIP.has(el.tagName) || el.closest("svg")) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width < 8 || r.width > 72 || r.height > 72) continue;
+    const cs = getComputedStyle(el);
+    if (parseFloat(cs.borderTopLeftRadius) < Math.min(r.width, r.height) / 4) continue;
+    const text = clean(el.textContent);
+    if (!text || text.length > 4 || !shown(el)) continue;
+    range.selectNodeContents(el);
+    const tr = [...range.getClientRects()].filter((q) => q.width > 1);
+    if (!tr.length) continue;
+    const t = { l: Math.min(...tr.map((q) => q.left)), r: Math.max(...tr.map((q) => q.right)), t: Math.min(...tr.map((q) => q.top)), b: Math.max(...tr.map((q) => q.bottom)) };
+    let hidden = 0;
+    for (let sib = el.nextElementSibling; sib; sib = sib.nextElementSibling) {
+      const scs = getComputedStyle(sib);
+      // A ring (box-shadow spread) paints beyond the box.
+      const spread = scs.boxShadow && scs.boxShadow !== "none" ? Math.max(0, ...scs.boxShadow.split(/,(?![^(]*\))/).map((sh) => parseFloat((sh.replace(/rgba?\([^)]*\)|inset/g, "").trim().split(/\s+/)[3] ?? "0")) || 0)) : 0;
+      const sr = sib.getBoundingClientRect();
+      const q = { left: sr.left - spread, right: sr.right + spread, top: sr.top - spread, bottom: sr.bottom + spread };
+      const opaque = (rgba(scs.backgroundColor)?.[3] ?? 0) > 0.6 || /^(IMG|SVG|CANVAS|VIDEO)$/i.test(sib.tagName) || scs.backgroundImage !== "none";
+      if (!opaque || !shown(sib)) continue;
+      if (Math.min(q.bottom, t.b) - Math.max(q.top, t.t) <= 1) continue;
+      hidden = Math.max(hidden, Math.min(q.right, t.r) - Math.max(q.left, t.l));
+    }
+    if (hidden > 1.5 && ![...seenClip].some((o) => o.contains(el) || el.contains(o))) {
+      seenClip.add(el);
+      clipped.push({ text, width: Math.round(r.width), height: Math.round(r.height), small: true, rounded: true, intended: false, covered: Math.round(hidden), section: sectionOf(r.top + scrollY + r.height / 2)?.index ?? null });
+    }
+  }
+
+  // ---- the system, measured across sections (SYSTEM_DRIFT): each section's H2 (size, left edge of its ink,
+  // centred or not), its vertical padding (from its edges to its first and last content), the filled buttons'
+  // heights and the style of repeated cards (radius, inset, border, shadow, fill). Page chrome is left out: a
+  // nav button is smaller on purpose.
+  const px = (v) => parseFloat(v) || 0;
+  const chromeSection = (s) => ["header", "nav", "footer"].includes(s.tag) || /^(header|footer|navigation)$/i.test(s.name ?? "");
+  const chromeEl = (el) => {
+    if (el.closest("nav, [role=navigation], [role=banner], [role=contentinfo]")) return true;
+    const c = el.closest("header, footer");
+    return Boolean(c && !c.parentElement?.closest("main, section, article"));
+  };
+  const inkOf = (el) => {
+    range.selectNodeContents(el);
+    const lr = [...range.getClientRects()].filter((q) => q.width > 1 && q.height > 1);
+    return lr.length ? { l: Math.min(...lr.map((q) => q.left)) + scrollX, r: Math.max(...lr.map((q) => q.right)) + scrollX } : null;
+  };
+  const colMid = ((colL + colR) / 2) * cell;
+  const headings = [];
+  const pads = [];
+  sections.forEach((s, i) => {
+    const el = sectionEls[i];
+    if (!el || chromeSection(s) || s.sticky || s.box.height < 160) return;
+    // The section's heading: its largest visible H2 (an H2 under 20px is a card's label, not a section heading).
+    const h2 = [...el.querySelectorAll("h2")]
+      .filter((h) => shown(h) && getComputedStyle(h).visibility === "visible" && clean(h.textContent) && h.getBoundingClientRect().width > 0 && px(getComputedStyle(h).fontSize) >= 20)
+      .sort((a, z) => px(getComputedStyle(z).fontSize) - px(getComputedStyle(a).fontSize))[0];
+    const ink = h2 && inkOf(h2);
+    if (ink) {
+      const hcs = getComputedStyle(h2);
+      const mid = (ink.l + ink.r) / 2, secMid = s.box.x + s.box.width / 2;
+      const centred = (hcs.textAlign === "center" || Math.abs(mid - secMid) < 0.03 * s.box.width) && ink.l > s.box.x + 0.08 * s.box.width;
+      // right: a heading that starts in the right half (the text side of an image-left split) has its own edge.
+      headings.push({ section: s.index, text: clean(h2.textContent).slice(0, 48), size: +px(hcs.fontSize).toFixed(1), left: Math.round(ink.l), centred, right: !centred && ink.l > colMid - 8 });
+    }
+    // Padding: the section's edge to its first and last content (text, media, cards). A full-width inner band
+    // is the section's own ground, not content; an absolutely placed box is decoration, not where content starts
+    // (a picture is content wherever it sits: a full-bleed photo makes the padding 0, a bleed, not a rhythm).
+    const inSec = (q) => q.y + q.h / 2 >= s.box.y && q.y + q.h / 2 < s.box.y + s.box.height;
+    let top = Infinity, bot = -Infinity;
+    for (const t of texts) if (el.contains(t.el)) for (const q of t.rects) if (q.h >= 4 && inSec(q)) (top = Math.min(top, q.y)), (bot = Math.max(bot, q.y + q.h));
+    for (const q of solid) {
+      if (!el.contains(q.el) || !inSec(q)) continue;
+      if (!q.media && (q.el === el || q.w >= 0.98 * s.box.width || /absolute|fixed/.test(getComputedStyle(q.el).position))) continue;
+      (top = Math.min(top, Math.max(s.box.y, q.y))), (bot = Math.max(bot, Math.min(s.box.y + s.box.height, q.y + q.h)));
+    }
+    if (top < bot) pads.push({ section: s.index, top: Math.round(top - s.box.y), bottom: Math.round(s.box.y + s.box.height - bot), height: Math.round(s.box.height) });
+  });
+  // A product mock drawn in HTML (aria-hidden, role=img, inert) has its own UI, not the page's.
+  const MOCK = "[aria-hidden=true], [role=img], [inert]";
+  const buttons = [];
+  const btnEls = [];
+  for (const el of document.body.querySelectorAll("a, button, [role=button], input[type=submit], input[type=button]")) {
+    if (btnEls.some((o) => o.contains(el)) || chromeEl(el) || el.closest(MOCK) || !shown(el)) continue;
+    const r = el.getBoundingClientRect();
+    if (r.height < 24 || r.height > 96 || r.width < 48 || r.width > 480) continue;
+    const cs = getComputedStyle(el);
+    const text = clean(el.textContent || el.value);
+    if (cs.visibility !== "visible" || text.length < 2 || text.length > 40 || px(cs.fontSize) < 13) continue;
+    const own = rgba(cs.backgroundColor);
+    const under = paintedBg(el.parentElement);
+    const grad = cs.backgroundImage !== "none" && !/url\(/.test(cs.backgroundImage) && gradientVaries(cs.backgroundImage);
+    if (!grad && !(own && own[3] >= 0.5 && dist(over(own, under), under) > 24)) continue;
+    btnEls.push(el);
+    const b = pbox(r);
+    buttons.push({ section: sectionOf(b.y + b.h / 2)?.index ?? null, height: Math.round(r.height * 2) / 2, width: Math.round(r.width), text: text.slice(0, 24) });
+  }
+  // Cards: boxes with a ground, a shadow or a border all round, in a set (two or more under one parent), not
+  // inside another such box (the chips of a product mock are its own business).
+  const cardCands = solid.filter((q) => !q.media && q.cs && q.w >= 160 && q.h >= 120 && q.w <= 0.9 * docW && !/^(BUTTON|INPUT|SELECT|TEXTAREA|IFRAME)$/.test(q.el.tagName) && !chromeEl(q.el) && !q.el.closest(MOCK));
+  const topCards = cardCands.filter((q) => !cardCands.some((o) => o !== q && o.el !== q.el && o.el.contains(q.el)));
+  const byParent = new Map();
+  for (const q of topCards) byParent.set(q.el.parentElement, [...(byParent.get(q.el.parentElement) ?? []), q]);
+  const cards = [];
+  let setN = 0;
+  for (const set of byParent.values()) {
+    if (set.length < 2) continue;
+    setN++;
+    for (const q of set) {
+      const cs = q.cs;
+      // The horizontal inset: its own padding (a tall padding-top is often room kept for a picture). No padding
+      // (an image-top card padding an inner block, centred copy on a picture) says nothing: null matches any.
+      const inset = px(cs.paddingLeft) || null;
+      const shadow = Boolean(cs.boxShadow && cs.boxShadow !== "none" && !/^rgba\(0, 0, 0, 0\)/.test(cs.boxShadow));
+      const own = rgba(cs.backgroundColor), under = paintedBg(q.el.parentElement);
+      const fill = Boolean(own && own[3] > 0.08 && dist(over(own, under), under) > 9);
+      cards.push({ section: sectionOf(q.y + q.h / 2)?.index ?? null, set: setN, radius: Math.round(px(cs.borderTopLeftRadius)), inset: inset && Math.round(inset), border: q.sides >= 3, shadow, fill, width: Math.round(q.w), height: Math.round(q.h), text: clean(q.el.textContent).slice(0, 32) });
+      if (cards.length >= 240) break;
+    }
+  }
+
+  // A framed box full of small UI text: a product window drawn in code, marked as a mock or not. uiFrameOf(el, n)
+  // is the nearest ancestor of el that is one (a framed box 240×120 or larger holding n or more texts of 14.5px or
+  // less); its cards are the product's UI, not the page's tiles, and its small text may be cropped like any fragment.
+  const uiSmall = new Map();
+  const smallIn = (e) => {
+    if (uiSmall.has(e)) return uiSmall.get(e);
+    const r = e.getBoundingClientRect();
+    let n = 0;
+    if (r.width >= 240 && r.height >= 120 && r.width < 0.98 * docW) {
+      const cs = getComputedStyle(e);
+      if (hasSurface(e, cs) || borderSides(e, cs) >= 3) for (const t of texts) if (e.contains(t.el) && px(t.cs.fontSize) <= 14.5 && ++n >= 64) break;
+    }
+    uiSmall.set(e, n);
+    return n;
+  };
+  const uiFrameOf = (el, min = 8) => {
+    for (let e = el.parentElement; e && e !== document.body; e = e.parentElement) if (smallIn(e) >= min) return e;
+    return null;
+  };
+
+  // ---- bento grids (BENTO_FLAT, BENTO_TWINS, INVERT_OVERUSE): tiles (boxes with a ground, a shadow or a border
+  // all round, and pictures) that sit edge to edge with gaps of 48px or less, in two rows and two columns or more.
+  // Tiles are 160×120 or larger (a key, a chip or a badge is not a tile) and not inside a product window (its
+  // cards are its UI: palate-site's demo); a box holding three or more tiles is a panel, not a tile. Each tile: its
+  // size, its surface (the ground it paints, border, shadow; null ground for a picture), its content type (media,
+  // ui, stat, quote, text), whether it carries a title and whether its ground is the inverse of the ground under
+  // the grid (contrast 7:1 or more).
+  const lum = (c) => {
+    const f = (v) => ((v /= 255) <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * f(c[0]) + 0.7152 * f(c[1]) + 0.0722 * f(c[2]);
+  };
+  const contrast = (a, b) => {
+    const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p);
+    return (x + 0.05) / (y + 0.05);
+  };
+  const groundOf = (el, cs) => {
+    const under = paintedBg(el.parentElement);
+    const bi = cs.backgroundImage;
+    if (bi && bi !== "none" && /url\(/.test(bi)) return null;
+    const own = rgba(cs.backgroundColor);
+    const base = own ? over(own, under) : under;
+    const stops = bi && bi !== "none" ? colourStops(bi).filter((c) => c[3] > 0.02) : [];
+    return stops.length ? [0, 1, 2].map((i) => stops.reduce((a, c) => a + over(c, base)[i], 0) / stops.length) : base;
+  };
+  const boxIn = (r, q, k) => (Math.max(0, Math.min(r.x + r.w, q.x + q.w) - Math.max(r.x, q.x)) * Math.max(0, Math.min(r.y + r.h, q.y + q.h) - Math.max(r.y, q.y))) / Math.max(1, r.w * r.h) >= k;
+  const PRICE = /[$€£¥]\s?\d|\d\s?(€|kr|zł)\b/;
+  const tileCand = solid.filter((q) => q.w >= 160 && q.h >= 120 && q.w <= 0.9 * docW && q.h <= 1.6 * vh && q.x >= -2 && q.x + q.w <= docW + 2 && !/^(BUTTON|INPUT|SELECT|TEXTAREA|IFRAME|LABEL)$/.test(q.el.tagName) && !chromeEl(q.el) && !q.el.closest(MOCK) && !q.el.closest("form") && !uiFrameOf(q.el, 24));
+  const panel = (q) => {
+    const inner = tileCand.filter((o) => o !== q && o.el !== q.el && q.el.contains(o.el) && o.w * o.h < 0.8 * q.w * q.h);
+    return inner.length >= 3 && inner.reduce((a, o) => a + o.w * o.h, 0) >= 0.45 * q.w * q.h;
+  };
+  const leaves = tileCand.filter((q) => !panel(q));
+  const tileSet = leaves.filter((q) => !leaves.some((o) => o !== q && o.el !== q.el && o.el.contains(q.el)));
+  const bentoTiles = tileSet.map((q) => {
+    const cs = q.cs ?? getComputedStyle(q.el);
+    const A = q.w * q.h;
+    let mediaA = q.media ? A : 0, small = 0, title = 0, words = 0, bigNum = false, quote = false, chars = 0;
+    const smallEls = new Set();
+    for (const t of texts) {
+      const r = t.rects[0];
+      if (!q.el.contains(t.el) && !boxIn(r, q, 0.6)) continue;
+      const f = px(t.cs.fontSize), s = clean(t.text);
+      chars += s.length;
+      if (f <= 14.5) smallEls.add(t.el);
+      const h = t.el.closest("h1, h2, h3, h4, h5, h6, [role=heading]");
+      if ((h && f >= 13) || (f >= 15 && px(t.cs.fontWeight) >= 600) || f >= 17) title = Math.max(title, f);
+      if (f >= 30 && numeric(s) && /\d/.test(s)) bigNum = true;
+      if (t.el.closest("blockquote, q") || /^[“"«„]/.test(s)) quote = true;
+      // A description: a paragraph inside the tile (the tile itself being an <li> says nothing).
+      const pe = t.el.closest("p, li, dd, blockquote");
+      if (pe && pe !== q.el && q.el.contains(pe)) words = Math.max(words, clean(pe.textContent).split(/\s+/).filter(Boolean).length);
+    }
+    small = smallEls.size;
+    let boxes = 0;
+    for (const o of solid) {
+      if (o.el === q.el || !q.el.contains(o.el) || o.w * o.h < 0.01 * A) continue;
+      if (o.media) mediaA += Math.min(o.w * o.h, A) * (boxIn(o, q, 0.5) ? 1 : 0);
+      else boxes++;
+    }
+    const share = Math.min(1, mediaA / A);
+    const ground = q.media ? null : groundOf(q.el, cs);
+    const type = share >= 0.45 ? "media" : bigNum ? "stat" : boxes >= 2 || small >= 6 ? "ui" : quote ? "quote" : "text";
+    const under = paintedBg(q.el.parentElement);
+    const shadow = Boolean(cs.boxShadow && cs.boxShadow !== "none" && !/^rgba\(0, 0, 0, 0\)/.test(cs.boxShadow));
+    return {
+      el: q.el, section: sectionOf(q.y + q.h / 2)?.index ?? null, x: Math.round(q.x), y: Math.round(q.y), w: Math.round(q.w), h: Math.round(q.h),
+      type, titled: title > 0 && !q.media, words, chars, price: PRICE.test(clean(q.el.textContent).slice(0, 400)),
+      ground: ground && hex(ground), border: (q.sides ?? 0) >= 3, shadow, radius: Math.round(px(cs.borderTopLeftRadius)),
+      inverse: Boolean(ground && contrast(ground, under) >= 7), text: clean(q.el.textContent).slice(0, 32),
+    };
+  });
+  const sameSurface = (a, b) => (a.ground == null) === (b.ground == null) && (a.ground == null || dist(rgba(a.ground), rgba(b.ground)) < 12) && a.border === b.border && a.shadow === b.shadow;
+  const touching = (a, b) => {
+    const ov = (a0, a1, b0, b1) => Math.min(a1, b1) - Math.max(a0, b0);
+    const vy = ov(a.y, a.y + a.h, b.y, b.y + b.h), vx = ov(a.x, a.x + a.w, b.x, b.x + b.w);
+    const gx = Math.max(a.x, b.x) - Math.min(a.x + a.w, b.x + b.w), gy = Math.max(a.y, b.y) - Math.min(a.y + a.h, b.y + b.h);
+    return (vy >= 0.5 * Math.min(a.h, b.h) && gx >= -2 && gx <= 48) || (vx >= 0.5 * Math.min(a.w, b.w) && gy >= -2 && gy <= 48);
+  };
+  const grids = [];
+  const placed = new Set();
+  for (const t of bentoTiles) {
+    if (placed.has(t)) continue;
+    const comp = [t];
+    placed.add(t);
+    for (let k = 0; k < comp.length; k++)
+      for (const o of bentoTiles) if (!placed.has(o) && o.section === comp[k].section && touching(comp[k], o)) (placed.add(o), comp.push(o));
+    if (comp.length < 3) continue;
+    const lines = (v) => clusterLines(comp.map(v), 24);
+    const rowsN = lines((x) => x.y), colsN = lines((x) => x.x);
+    if (rowsN < 2 || colsN < 2) continue;
+    comp.sort((a, b) => a.y - b.y || a.x - b.x);
+    const pairs = [];
+    for (let i = 0; i < comp.length; i++) for (let j = i + 1; j < comp.length; j++) if (touching(comp[i], comp[j])) pairs.push([i, j]);
+    const box = { x: Math.min(...comp.map((c) => c.x)), y: Math.min(...comp.map((c) => c.y)) };
+    box.w = Math.max(...comp.map((c) => c.x + c.w)) - box.x;
+    box.h = Math.max(...comp.map((c) => c.y + c.h)) - box.y;
+    grids.push({ section: comp[0].section, ...box, rows: rowsN, cols: colsN, pairs, tiles: comp.map(({ el, ...c }) => c) });
+    if (grids.length >= 12) break;
+  }
+  function clusterLines(vals, tol) {
+    const s = [...vals].sort((a, b) => a - b);
+    let n = 0, last = -Infinity;
+    for (const v of s) if (v - last > tol) (n++, (last = v));
+    return n;
+  }
+
+  // ---- the product frame in the hero (FRAME_SMALL): the largest product window, screenshot or framed mock in the
+  // section that holds the first headline. How much of the section's width it shows, and which edges it bleeds off
+  // (touches the section's edge, or is cut by a clipping box or the screen). Marked mocks ([data-product],
+  // role=img, aria-hidden or inert with a frame), framed boxes full of small UI text, and screenshots (an image
+  // whose name or alt says UI, or a PNG/WebP in UI proportions in a rounded frame) count; photos and forms don't.
+  const frames = [];
+  const h1 = [...document.querySelectorAll("h1")].find((h) => shown(h) && h.getBoundingClientRect().height > 0 && h.getBoundingClientRect().top + scrollY < 1.5 * vh);
+  const heroSec = (h1 && sectionOf(pbox(h1.getBoundingClientRect()).y + 1)) || sections.find((s) => !chromeSection(s) && !s.sticky && s.box.height >= 300 && s.box.y < vh);
+  const heroEl = heroSec ? sectionEls[sections.indexOf(heroSec)] : null;
+  if (heroSec && heroEl && heroSec.box.height >= 300) {
+    const UIWORDS = /screen ?shot|dashboard|\bapp\b|\bui\b|interface|console|inbox|editor|product/i;
+    const framedLook = (e) => {
+      const cs = getComputedStyle(e);
+      return hasSurface(e, cs) || borderSides(e, cs) >= 3;
+    };
+    const smallUi = (e) => {
+      let n = 0;
+      for (const t of texts) if (e.contains(t.el) && px(t.cs.fontSize) <= 14.5) if (++n >= 8) break;
+      return n;
+    };
+    const formy = (e) => e.closest("form") || e.querySelectorAll("input:not([type=hidden]), textarea, select").length >= 2;
+    const cands = new Set();
+    for (const e of heroEl.querySelectorAll("[data-product], [role=img], [aria-hidden=true], [inert], figure, img, div, article, aside, picture, video")) {
+      const r = e.getBoundingClientRect();
+      if (r.width < 240 || r.height < 160 || !shown(e) || chromeEl(e)) continue;
+      if (r.width >= 0.98 * heroSec.box.width && r.height >= 0.8 * heroSec.box.height) continue;
+      const tag = e.tagName;
+      let ok = false;
+      if (tag === "IMG" || tag === "VIDEO") {
+        const file = (e.currentSrc || e.src || "").toLowerCase();
+        const alt = clean(e.getAttribute("alt") ?? e.getAttribute("aria-label"));
+        const ratio = r.width / r.height;
+        let frame = false;
+        for (let p = e, k = 0; p && k < 4 && !frame; p = p.parentElement, k++) frame = px(getComputedStyle(p).borderTopLeftRadius) > 4 && framedLook(p);
+        ok = !/\.(jpe?g)(\?|#|$)/.test(file) && (UIWORDS.test(alt) || UIWORDS.test(file.replace(/^.*\/\/[^/]+/, "")) || (tag === "IMG" && /\.(png|webp|avif)(\?|#|$)/.test(file) && ratio >= 1.2 && ratio <= 2.4 && frame) || (tag === "VIDEO" && frame));
+      } else if (e.matches("[data-product]")) ok = true;
+      else if (e.matches("[role=img], [aria-hidden=true], [inert], figure")) ok = (framedLook(e) || (e.firstElementChild && framedLook(e.firstElementChild))) && smallUi(e) >= 6 && !formy(e);
+      else ok = framedLook(e) && smallUi(e) >= 8 && !formy(e);
+      if (ok) cands.add(e);
+    }
+    // The outermost of nested candidates is the window.
+    const tops = [...cands].filter((e) => ![...cands].some((o) => o !== e && o.contains(e)));
+    for (const e of tops) {
+      const r = pbox(e.getBoundingClientRect());
+      let v = { x0: r.x, y0: r.y, x1: r.x + r.w, y1: r.y + r.h };
+      for (let a = e.parentElement; a && a !== document.documentElement; a = a.parentElement) {
+        const acs = getComputedStyle(a);
+        if (acs.overflowX === "visible" && acs.overflowY === "visible") continue;
+        const ar = pbox(a.getBoundingClientRect());
+        if (acs.overflowX !== "visible") (v.x0 = Math.max(v.x0, ar.x)), (v.x1 = Math.min(v.x1, ar.x + ar.w));
+        if (acs.overflowY !== "visible") (v.y0 = Math.max(v.y0, ar.y)), (v.y1 = Math.min(v.y1, ar.y + ar.h));
+      }
+      v.x0 = Math.max(0, v.x0);
+      v.x1 = Math.min(docW, v.x1);
+      if (v.x1 - v.x0 < 120 || v.y1 - v.y0 < 80) continue;
+      const S = heroSec.box, E = 3;
+      const bleeds = [];
+      if (v.x0 <= S.x + E || r.x < v.x0 - E) bleeds.push("left");
+      if (v.x1 >= S.x + S.width - E || r.x + r.w > v.x1 + E) bleeds.push("right");
+      if (v.y1 >= S.y + S.height - E || r.y + r.h > v.y1 + E) bleeds.push("bottom");
+      if (r.y < v.y0 - E) bleeds.push("top");
+      const cs = getComputedStyle(e);
+      frames.push({ section: heroSec.index, hero: true, x: Math.round(v.x0), y: Math.round(v.y0), width: Math.round(v.x1 - v.x0), height: Math.round(v.y1 - v.y0), stage: Math.round(S.width), share: +((v.x1 - v.x0) / S.width).toFixed(2), bleeds, portrait: r.h > 1.15 * r.w, kind: e.tagName === "IMG" || e.tagName === "VIDEO" ? "screenshot" : e.matches("[data-product], [role=img], [aria-hidden=true], [inert], figure") ? "marked mock" : "framed UI", radius: Math.round(px(cs.borderTopLeftRadius)), text: clean(e.getAttribute("aria-label") || e.getAttribute("alt") || e.textContent).slice(0, 40) });
+    }
+    frames.sort((a, b) => b.width * b.height - a.width * a.height);
+  }
+
+  // ---- real words cut by an edge (WORDS_CUT): a heading (18px+), a paragraph (four words or more, 14px+) or a
+  // number (24px+) whose line is partly outside a clipping box (overflow hidden or clip), or part of whose lines
+  // are hidden by it. Not judged: product mocks (decorative fragments may be cropped), scrollers and strips
+  // (scrolling brings it in), intended truncation (ellipsis, line clamp), small boxes (CLIPPED), visually
+  // hidden text, and text wholly outside its clip (a hidden slide).
+  const wordsCut = [];
+  const cutSeen = new Set();
+  const rootClipX = [document.documentElement, document.body].some((e) => /hidden|clip/.test(getComputedStyle(e).overflowX));
+  const HIDDEN_CLASS = /(^|[-_\s])(visually-?hidden|sr-only|screen-?reader(-text)?|visuallyHidden|srOnly)([-_\s]|$)/i;
+  const clipBox = (c) => {
+    if (c.root) return { l: 0, r: docW, t: -1e9, b: 1e9 };
+    const l = c.ar.left + scrollX + c.a.clientLeft, tp = c.ar.top + scrollY + c.a.clientTop;
+    return { l: c.x ? l : -1e9, r: c.x ? l + c.a.clientWidth : 1e9, t: c.y ? tp : -1e9, b: c.y ? tp + c.a.clientHeight : 1e9 };
+  };
+  const carousel = (c, el) => {
+    const box = clipBox(c);
+    const top = c.root ? document.body : c.a;
+    for (let e = el; e && e !== top; e = e.parentElement) {
+      const p = e.parentElement;
+      if (!p) break;
+      for (const k of p.children) {
+        if (k === e || SKIP.has(k.tagName)) continue;
+        const r = pbox(k.getBoundingClientRect());
+        if (r.w < 8 || r.h < 8) continue;
+        const ix = Math.max(0, Math.min(r.x + r.w, box.r) - Math.max(r.x, box.l)), iy = Math.max(0, Math.min(r.y + r.h, box.b) - Math.max(r.y, box.t));
+        if ((ix * iy) / (r.w * r.h) <= 0.4) return true;
+      }
+    }
+    return false;
+  };
+  for (const t of texts) {
+    const el = t.el;
+    if (cutSeen.has(el) || wordsCut.length >= 24) continue;
+    if (el.closest(`${MOCK}, [data-product], marquee, .sr-only, .visually-hidden`)) continue;
+    const f = px(t.cs.fontSize);
+    const s = clean(t.text);
+    const blk = el.closest("h1, h2, h3, h4, h5, h6, p, li, blockquote, dd, figcaption");
+    const heading = blk && /^H[1-6]$/.test(blk.tagName) && f >= 18;
+    const para = blk && !heading && f >= 14 && clean(blk.textContent).split(/\s+/).length >= 4;
+    const number = f >= 24 && /\d/.test(s) && numeric(s);
+    if (!heading && !para && !number) continue;
+    // Visually hidden text (a 1px clip box, clip: rect, or a class that says so, hashed or not).
+    let hidden = false;
+    for (let a = el; a && a !== document.body && !hidden; a = a.parentElement) {
+      const acs = a === el ? t.cs : getComputedStyle(a);
+      const ar = a.getBoundingClientRect();
+      hidden = (typeof a.className === "string" && HIDDEN_CLASS.test(a.className)) || (acs.clip && acs.clip !== "auto") || /inset\(50%|inset\(100%/.test(acs.clipPath) || (acs.overflowX !== "visible" && (ar.width <= 2 || ar.height <= 2));
+    }
+    if (hidden) continue;
+    if (f <= 16 && uiFrameOf(el)) continue;
+    if (t.cs.textOverflow === "ellipsis" || (t.cs.webkitLineClamp && t.cs.webkitLineClamp !== "none")) continue;
+    let hit = null;
+    const clipsOf = [];
+    for (let a = el; a && a !== document.documentElement; a = a.parentElement) {
+      const acs = a === el ? t.cs : getComputedStyle(a);
+      const ox = acs.overflowX, oy = acs.overflowY;
+      if (ox === "visible" && oy === "visible") continue;
+      if (/ellipsis/.test(acs.textOverflow) || (acs.webkitLineClamp && acs.webkitLineClamp !== "none")) {
+        hit = "intended";
+        break;
+      }
+      const ar = a.getBoundingClientRect();
+      if (ar.width <= 72 && ar.height <= 72) continue;
+      clipsOf.push({ a, acs, ar, x: /hidden|clip/.test(ox), y: /hidden|clip/.test(oy) });
+    }
+    if (hit === "intended") continue;
+    if (rootClipX) clipsOf.push({ a: document.body, ar: { left: -scrollX, top: -1e7, width: docW, height: 2e7 }, x: true, y: false, root: true });
+    for (const c of clipsOf) {
+      if (!c.x && !c.y) continue;
+      const box = clipBox(c);
+      let partial = null, inside = 0, outside = 0;
+      for (const q of t.rects) {
+        const ix = Math.min(q.x + q.w, box.r) - Math.max(q.x, box.l), iy = Math.min(q.y + q.h, box.b) - Math.max(q.y, box.t);
+        if (ix <= 0 || iy <= 0) {
+          outside++;
+          continue;
+        }
+        const bx = Math.max(box.l - q.x, q.x + q.w - box.r), by = Math.max(box.t - q.y, q.y + q.h - box.b);
+        if (bx > Math.max(4, 0.3 * f) || by > Math.max(3, 0.25 * f)) partial ??= { axis: bx > Math.max(4, 0.3 * f) ? "x" : "y", px: Math.round(Math.max(bx, by)) };
+        else inside++;
+      }
+      if (!partial && !(inside && outside)) continue;
+      // A strip, ticker, carousel or word rotator moves its words into view: inside one of the clips around the
+      // text, an item beside the text's branch lies mostly outside that clip (the next slide, the ticker's second
+      // run, the rotator's other words), or something between them moves.
+      if (clipsOf.slice(clipsOf.indexOf(c)).some((o) => carousel(o, el)) || (() => {
+        for (let e = el.parentElement; e && e !== c.a && e !== document.body; e = e.parentElement) if ((e.getAnimations?.().length ?? 0) > 0) return true;
+        return false;
+      })()) break;
+      hit = { by: c.root ? "the screen edge" : `${c.a.tagName.toLowerCase()}${c.a.classList.length ? "." + [...c.a.classList].slice(0, 2).join(".") : ""}`, partial: outside ? null : partial, hiddenLines: outside, lines: t.rects.length };
+      break;
+    }
+    if (!hit) continue;
+    cutSeen.add(el);
+    wordsCut.push({ kind: heading ? "heading" : number ? "number" : "paragraph", text: clean((blk ?? el).textContent).slice(0, 48), fontSize: Math.round(f), by: hit.by, axis: hit.partial?.axis ?? "y", over: hit.partial?.px ?? null, hiddenLines: hit.hiddenLines, lines: hit.lines, section: sectionOf(t.rects[0].y + t.rects[0].h / 2)?.index ?? null });
+  }
+
+  // ---- tiles with a void inside (TILE_VOID): a card 200px or taller whose content leaves a large empty run
+  // between blocks (a stat pinned to the bottom under a void), under it (a visual floating with space below)
+  // or above it. Content is text, media and inner boxes; runs are measured inside the tile's padding.
+  const tiles = [];
+  for (const q of solid) {
+    if (q.media || !q.cs || q.h < 200 || q.w < 160 || q.w > 0.9 * docW || q.h > 2 * vh) continue;
+    if (/^(INPUT|SELECT|TEXTAREA|BUTTON|IFRAME)$/.test(q.el.tagName)) continue;
+    // A tile partly off the screen (a carousel's next card) isn't seen whole.
+    if (q.x < -2 || q.x + q.w > docW + 2) continue;
+    const cs = q.cs;
+    if (/auto|scroll/.test(cs.overflowY) && q.el.scrollHeight > q.el.clientHeight + 4) continue;
+    const top = q.y + px(cs.borderTopWidth) + px(cs.paddingTop), bottom = q.y + q.h - px(cs.borderBottomWidth) - px(cs.paddingBottom);
+    if (bottom - top < 120) continue;
+    // Content still hidden inside (a block at opacity 0 waiting for its animation, a lazy panel): the tile isn't
+    // in its end state, so its space can't be judged.
+    let pending = false, n = 0;
+    for (const d of q.el.querySelectorAll("*")) {
+      if (++n > 600) break;
+      const r = d.getBoundingClientRect();
+      if (r.width * r.height < 0.12 * q.w * q.h) continue;
+      const dcs = getComputedStyle(d);
+      if (dcs.display === "none") continue;
+      // A picture not loaded yet (lazy, or its <img> not inserted) is a hole now and a photo later.
+      const unloaded = (d.tagName === "IMG" && (!d.complete || !d.naturalWidth)) || (d.tagName === "PICTURE" && !d.querySelector("img")?.naturalWidth);
+      if (unloaded || dcs.visibility === "hidden" || parseFloat(dcs.opacity) <= 0.05) {
+        pending = true;
+        break;
+      }
+    }
+    if (pending) continue;
+    // What the eye sees inside the frame, whoever owns it in the DOM: a mock window often draws its frame in one
+    // element and lays its page over it as a sibling (Stripe's checkout and dashboard).
+    const inside = (r, k) => (Math.max(0, Math.min(r.x + r.w, q.x + q.w) - Math.max(r.x, q.x)) * Math.max(0, Math.min(r.y + r.h, q.y + q.h) - Math.max(r.y, q.y))) / Math.max(1, r.w * r.h) >= k;
+    const spans = [];
+    for (const t of texts) for (const r of t.rects) if (r.w >= 2 && r.h >= 4 && inside(r, 0.5)) spans.push({ a: r.y, z: r.y + r.h, font: px(t.cs.fontSize), what: `"${clean(t.text).slice(0, 28)}"` });
+    // A box mostly inside, or a picture bigger than the tile and cropped by it (pinned to an edge: the fix, not a void).
+    const covers = (o) => (Math.max(0, Math.min(o.x + o.w, q.x + q.w) - Math.max(o.x, q.x)) * Math.max(0, Math.min(o.y + o.h, q.y + q.h) - Math.max(o.y, q.y))) / (q.w * q.h) >= 0.25;
+    for (const o of solid) if (o.el !== q.el && !o.el.contains(q.el) && o.w * o.h >= 16 && (inside(o, 0.6) || (o.media && covers(o)))) spans.push({ a: o.y, z: o.y + o.h, font: 0, what: o.media ? "a picture" : "a box" });
+    const kept = spans.map((x) => ({ ...x, a: Math.max(q.y, x.a), z: Math.min(q.y + q.h, x.z) })).filter((x) => x.z > x.a).sort((x, y) => x.a - y.a);
+    if (!kept.length) continue;
+    const merged = [];
+    for (const x of kept) {
+      const last = merged[merged.length - 1];
+      if (last && x.a <= last.z) {
+        if (x.z > last.z) (last.z = x.z), (last.lastWhat = x.what);
+        last.font = Math.max(last.font, x.font);
+        last.media ||= x.font === 0;
+      } else merged.push({ a: x.a, z: x.z, what: x.what, lastWhat: x.what, font: x.font, media: x.font === 0 });
+    }
+    let best = { run: Math.max(0, merged[0].a - top), where: "above", below: merged[0].what };
+    for (let k = 1; k < merged.length; k++) {
+      const run = merged[k].a - merged[k - 1].z;
+      if (run <= best.run) continue;
+      // A statement card's foot: display-size text above, and below only a short line of small text (the
+      // attribution under a big quote) closing the tile. A convention, not a void.
+      const last = k === merged.length - 1;
+      const lead = Math.max(...merged.slice(0, k).map((m) => m.font));
+      const foot = last && merged[k].z - merged[k].a <= 72 && merged[k].font > 0 && merged[k].font <= 16 && lead >= 20 && lead >= 1.5 * merged[k].font;
+      best = { run, where: "between", above: merged[k - 1].lastWhat, below: merged[k].what, foot };
+    }
+    const tail = bottom - merged[merged.length - 1].z;
+    if (tail > best.run) best = { run: tail, where: "under", above: merged[merged.length - 1].lastWhat };
+    if (best.run < 64 || best.run < 0.2 * q.h) continue;
+    tiles.push({ el: q.el, section: sectionOf(q.y + q.h / 2)?.index ?? null, x: Math.round(q.x), y: Math.round(q.y), width: Math.round(q.w), height: Math.round(q.h), run: Math.round(best.run), share: +(best.run / q.h).toFixed(2), where: best.where, above: best.above ?? null, below: best.below ?? null, foot: Boolean(best.foot), text: clean(q.el.textContent).slice(0, 40) });
+  }
+  // A wrapper and its inner box with the same frame are one tile: keep the inner one.
+  const tileList = tiles
+    .filter((t) => !tiles.some((o) => o !== t && t.el.contains(o.el) && Math.abs(o.width - t.width) <= 8 && Math.abs(o.height - t.height) <= 8))
+    .sort((a, b) => b.share - a.share)
+    .slice(0, 24)
+    .map(({ el, ...t }) => t);
+
+  // ---- each photo once (PHOTO_REPEAT): raster images 64px and up, keyed by their source without size
+  // parameters (and by file name), placed more than once. Not counted: copies stacked on each other (a blurred
+  // glow behind a photo), clones out of sight (a marquee's second run, aria-hidden), and small thumbnails of a
+  // larger copy in a gallery strip.
+  const GENERIC = /^(image|img|photo|picture|pic|bg|background|hero|cover|thumb|thumbnail|default|placeholder|logo|icon|avatar|index|file|download|\d{1,4}|[a-f0-9]{1,6})$/i;
+  const photoKey = (raw, depth = 0) => {
+    if (!raw || /^(data|blob):/i.test(raw)) return null;
+    let u;
+    try {
+      u = new URL(raw, location.href);
+    } catch {
+      return null;
+    }
+    // Image CDNs that carry the original in a parameter (Next.js /_next/image?url=…).
+    for (const p of ["url", "src", "image", "img"]) {
+      const inner = u.searchParams.get(p);
+      if (inner && depth < 2 && /^(https?:|\/)/.test(inner)) return photoKey(inner, depth + 1);
+    }
+    let file = u.pathname.split("/").pop() || "";
+    try {
+      file = decodeURIComponent(file);
+    } catch {}
+    if (/\.svg$/i.test(file)) return null;
+    const stem = file.replace(/\.(jpe?g|png|webp|avif|gif|jxl|heic)$/i, "").replace(/(?:[-_.@](?:\d{2,4}w|\d{2,4}x\d{0,4}|\d(?:\.\d+)?x|scaled|thumb(?:nail)?|small|medium|large|xl|lg|md|sm|q\d+))+$/i, "").toLowerCase();
+    return { url: u.origin + u.pathname, stem: stem.length >= 5 && !GENERIC.test(stem) ? stem : null, name: file || u.pathname };
+  };
+  // How much of a box survives the clipping of its ancestors (a carousel's track, a marquee's mask).
+  const visibleShare = (p) => {
+    let x0 = p.x, y0 = p.y, x1 = p.x + p.w, y1 = p.y + p.h;
+    for (let a = p.el.parentElement; a && a !== document.body; a = a.parentElement) {
+      const acs = getComputedStyle(a);
+      if (acs.overflowX === "visible" && acs.overflowY === "visible") continue;
+      const r = pbox(a.getBoundingClientRect());
+      (x0 = Math.max(x0, r.x)), (y0 = Math.max(y0, r.y)), (x1 = Math.min(x1, r.x + r.w)), (y1 = Math.min(y1, r.y + r.h));
+      if (x1 <= x0 || y1 <= y0) return 0;
+    }
+    x0 = Math.max(0, x0);
+    x1 = Math.min(docW, x1);
+    return x1 > x0 && y1 > y0 ? ((x1 - x0) * (y1 - y0)) / (p.w * p.h) : 0;
+  };
+  const overlapArea = (a, b) => Math.max(0, Math.min(a.x + a.w, b.x + b.w) - Math.max(a.x, b.x)) * Math.max(0, Math.min(a.y + a.h, b.y + b.h) - Math.max(a.y, b.y));
+  const photoGroups = [];
+  for (const p of pictures) {
+    if (p.el.closest("[aria-hidden=true]") || visibleShare(p) < 0.3) continue;
+    const k = photoKey(p.src);
+    if (!k) continue;
+    let g = photoGroups.find((x) => x.url === k.url || (k.stem && x.stem === k.stem));
+    if (!g) photoGroups.push((g = { url: k.url, stem: k.stem, name: k.name, items: [] }));
+    if (g.items.some((o) => overlapArea(o, p) > 0.5 * Math.min(o.w * o.h, p.w * p.h))) continue;
+    g.items.push(p);
+  }
+  const inStrip = (p) => {
+    if (p.el.closest("button, [role=tab], [role=option], [aria-selected], [aria-controls]")) return true;
+    const row = p.el.parentElement?.parentElement;
+    return Boolean(row && [...row.querySelectorAll("img")].filter((i) => Math.abs(i.getBoundingClientRect().height - p.h) < 4).length >= 3);
+  };
+  const photos = photoGroups
+    .map((g) => {
+      const maxA = Math.max(...g.items.map((p) => p.w * p.h));
+      const items = g.items.filter((p) => !(p.w * p.h <= 0.25 * maxA && inStrip(p)));
+      return { name: g.name, url: g.url, count: items.length, sections: items.map((p) => sectionOf(p.y + p.h / 2)?.index ?? null), sizes: items.map((p) => `${Math.round(p.w)}×${Math.round(p.h)}`) };
+    })
+    .filter((g) => g.count >= 2)
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 12);
+
+  // Product UI drawn in code (a clinic diary, a dashboard, an editor in its own framed panel) is something to look
+  // at, like a screenshot of it would be: a Moveday hero that was nearly all live product measured 0% material and
+  // failed. A panel counts when it is big and dense with small interface text (most labels 14px or under), so a
+  // grid of feature cards in 16px copy doesn't. Bit 16, kept apart from imagery so the imagery checks don't change.
+  const outerFramed = framed.filter((f) => !framed.some((g) => g !== f && g.el.contains(f.el)));
+  for (const f of outerFramed) {
+    if (f.w < Math.min(400, docW * 0.8) || f.h < 240) continue; // a phone-width panel (358 of 390) counts too
+    const leaves = [...f.el.querySelectorAll("*")].filter((e) => e.children.length === 0 && (e.textContent?.trim() || ["svg", "img", "input", "button"].includes(e.tagName.toLowerCase())));
+    const texts = leaves.filter((e) => e.textContent?.trim());
+    if (leaves.length < 24 || texts.length < 12) continue;
+    const small = texts.filter((e) => parseFloat(getComputedStyle(e).fontSize) <= 14).length;
+    if (small / texts.length < 0.6) continue;
+    mark(f, 16, 3, false);
+  }
+
+  // Whole-page imagery and texture over every cell.
+  let pimg = 0, ptex = 0, pui = 0;
+  for (let k = 0; k < grid.length; k++) (pimg += grid[k] & 4 ? 1 : 0), (ptex += grid[k] & 8 ? 1 : 0), (pui += grid[k] & 16 && !(grid[k] & 4) ? 1 : 0);
+
+  return {
+    width: docW,
+    vh,
+    pageHeight: pageH,
+    cell,
+    column: { x: colL * cell, width: (colR - colL) * cell },
+    sections: out,
+    bands,
+    bgRuns,
+    imagery: +(pimg / grid.length).toFixed(3),
+    texture: +(ptex / grid.length).toFixed(3),
+    productUi: +(pui / grid.length).toFixed(3),
+    media: media.length,
+    mono: { chars: mono, share: +(mono / Math.max(1, totalChars)).toFixed(3), count: monoList.length, numeric: monoList.filter((m) => m.numeric).length, code: monoList.filter((m) => m.code).length, snippets: [...monoList.filter((m) => m.numeric), ...monoList.filter((m) => !m.numeric)].slice(0, 12) },
+    placeholders: placeholders.slice(0, 12),
+    clipped: clipped.slice(0, 12),
+    system: { headings, pads, buttons: buttons.slice(0, 80), cards },
+    tiles: tileList,
+    photos,
+    grids,
+    frames: frames.slice(0, 6),
+    wordsCut,
+  };
+};