@palate/cli 0.0.0-stage → 0.0.1

package/src/page-principles.js

@@ -0,0 +1,1167 @@
+// Runs inside the page (read as text and evaluated, optionally with the sections from page-sections.js).
+// Measures the core design principles a reviewer judges by eye: alignment, visual hierarchy, spacing and
+// proximity, sizing and type, consistency, and density. Every problem names its offenders: a CSS path, a
+// short label, a text snippet and a box in page coordinates. Thresholds live in principles.mjs, except the
+// few needed to decide what counts as an offender here.
+(sectionsIn) => {
+  const vw = innerWidth;
+  const vh = innerHeight;
+  const sx = scrollX;
+  const sy = scrollY;
+  const pageH = document.documentElement.scrollHeight;
+  const body = document.body;
+  const clean = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+  const r1 = (v) => Math.round(v * 10) / 10;
+  const median = (a) => {
+    if (!a.length) return 0;
+    const s = [...a].sort((x, y) => x - y);
+    const m = s.length >> 1;
+    return s.length % 2 ? s[m] : (s[m - 1] + s[m]) / 2;
+  };
+  const tally = (arr, key) => {
+    const m = new Map();
+    for (const x of arr) {
+      const k = key(x);
+      if (k == null) continue;
+      m.set(k, [...(m.get(k) ?? []), x]);
+    }
+    return [...m.entries()].sort((a, b) => b[1].length - a[1].length);
+  };
+
+  // ---- cached element facts ----
+  const CS = new Map();
+  const cs = (el) => {
+    let c = CS.get(el);
+    if (!c) CS.set(el, (c = getComputedStyle(el)));
+    return c;
+  };
+  const BOX = new Map();
+  const box = (el) => {
+    let b = BOX.get(el);
+    if (!b) {
+      const r = el.getBoundingClientRect();
+      b = { x: r.left + sx, y: r.top + sy, w: r.width, h: r.height, r: r.right + sx, b: r.bottom + sy };
+      BOX.set(el, b);
+    }
+    return b;
+  };
+  const VIS = new Map();
+  const visible = (el) => {
+    let v = VIS.get(el);
+    if (v !== undefined) return v;
+    const b = box(el);
+    v = b.w >= 1 && b.h >= 1 && b.r > 0 && b.x < vw;
+    if (v) v = el.checkVisibility ? el.checkVisibility({ opacityProperty: true, visibilityProperty: true }) : cs(el).display !== "none" && cs(el).visibility !== "hidden";
+    // Screen-reader-only content (clipped to nothing) is not seen.
+    if (v && ((b.w <= 1 && b.h <= 1) || /^rect\(0(px)?,? 0(px)?/.test(cs(el).clip) || /inset\(50%/.test(cs(el).clipPath))) v = false;
+    VIS.set(el, v);
+    return v;
+  };
+  const selector = (el) => {
+    const parts = [];
+    for (let e = el; e && e.nodeType === 1 && e !== body; e = e.parentElement) {
+      if (e.id && /^[A-Za-z][\w-]*$/.test(e.id) && document.querySelectorAll(`#${CSS.escape(e.id)}`).length === 1) {
+        parts.unshift(`#${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 short = (el) => {
+    const tag = el.tagName.toLowerCase();
+    if (el.id && /^[A-Za-z][\w-]*$/.test(el.id)) return `${tag}#${el.id}`;
+    const cls = [...el.classList].filter((c) => c.length < 28 && !/[:[\]/]/.test(c)).slice(0, 2);
+    return tag + cls.map((c) => `.${c}`).join("");
+  };
+  const snippet = (el) => clean(el.innerText || el.textContent || el.getAttribute?.("aria-label") || el.getAttribute?.("alt") || el.getAttribute?.("placeholder") || "").slice(0, 60);
+  const bx = (b) => ({ x: Math.round(b.x), y: Math.round(b.y), w: Math.round(b.w), h: Math.round(b.h) });
+  const off = (el, b = box(el), text) => ({ selector: selector(el), label: short(el), text: text ?? snippet(el), box: bx(b) });
+
+  // ---- colour ----
+  const cv = document.createElement("canvas");
+  cv.width = cv.height = 1;
+  const cx = cv.getContext("2d", { willReadFrequently: true });
+  const COL = new Map();
+  const rgba = (c) => {
+    if (!c) return [0, 0, 0, 0];
+    let v = COL.get(c);
+    if (v) return v;
+    const m = c.match(/^rgba?\(([^)]+)\)$/);
+    if (m) {
+      const p = m[1].split(/[\s,/]+/).filter(Boolean).map(parseFloat);
+      v = [p[0], p[1], p[2], p[3] ?? 1];
+    } else {
+      cx.clearRect(0, 0, 1, 1);
+      cx.fillStyle = "rgba(0,0,0,0)";
+      cx.fillStyle = c;
+      cx.fillRect(0, 0, 1, 1);
+      const d = cx.getImageData(0, 0, 1, 1).data;
+      v = [d[0], d[1], d[2], d[3] / 255];
+    }
+    COL.set(c, v);
+    return v;
+  };
+  const hex = (v) => "#" + v.slice(0, 3).map((x) => Math.round(x).toString(16).padStart(2, "0")).join("");
+  const blend = (fg, bg) => [0, 1, 2].map((i) => fg[i] * fg[3] + bg[i] * (1 - fg[3])).concat(1);
+  const lum = (v) => {
+    const f = (x) => ((x /= 255) <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * f(v[0]) + 0.7152 * f(v[1]) + 0.0722 * f(v[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 dist = (a, b) => Math.max(Math.abs(a[0] - b[0]), Math.abs(a[1] - b[1]), Math.abs(a[2] - b[2]));
+  const hsl = (v) => {
+    const [r, g, b] = v.slice(0, 3).map((x) => x / 255);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const l = (max + min) / 2;
+    const d = max - min;
+    if (d < 0.0001) return { h: 0, s: 0, l };
+    const s = d / (1 - Math.abs(2 * l - 1));
+    const h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    return { h: (h * 60 + 360) % 360, s, l };
+  };
+  const rootBg = (() => {
+    for (const e of [body, document.documentElement]) {
+      const v = rgba(cs(e).backgroundColor);
+      if (v[3] > 0.5) return v;
+    }
+    return [255, 255, 255, 1];
+  })();
+  const firstStop = (img) => {
+    const m = img.match(/(?:rgba?|hsla?|oklch|oklab|lab|lch|color)\([^()]*\)|#[0-9a-f]{3,8}\b/i);
+    return m ? rgba(m[0]) : null;
+  };
+  // The colour behind an element: null when it sits on a picture (unknown).
+  const BG = new Map();
+  const bgOf = (el) => {
+    if (!el || el === document.documentElement) return rootBg;
+    if (BG.has(el)) return BG.get(el);
+    const c = cs(el);
+    let v;
+    const own = rgba(c.backgroundColor);
+    if (own[3] > 0.5) v = own;
+    else if (/url\(/.test(c.backgroundImage)) v = null;
+    else if (/gradient/.test(c.backgroundImage) && firstStop(c.backgroundImage)?.[3] > 0.5) v = firstStop(c.backgroundImage);
+    else {
+      const up = bgOf(el.parentElement);
+      v = up && own[3] > 0.02 ? blend(own, up) : up;
+    }
+    BG.set(el, v);
+    return v;
+  };
+
+  // ---- the elements ----
+  const SKIP = /^(SCRIPT|STYLE|NOSCRIPT|TEMPLATE|LINK|META|TITLE|BR|WBR|OPTION|SOURCE|TRACK)$/;
+  const all = [];
+  for (const el of body.querySelectorAll("*")) {
+    if (SKIP.test(el.tagName) || (el.ownerSVGElement && el.tagName !== "svg") || !visible(el)) continue;
+    if (el.closest("svg") && el.closest("svg") !== el) continue;
+    all.push(el);
+  }
+  const allSet = new Set(all);
+  const hidden = (el) => !!el.closest('[aria-hidden="true"], [inert]');
+  const sides = ["Top", "Right", "Bottom", "Left"];
+  const SURF = new Map();
+  const surface = (el) => {
+    if (SURF.has(el)) return SURF.get(el);
+    const c = cs(el);
+    const b = box(el);
+    let s = null;
+    if (b.w >= 24 && b.h >= 16 && !["svg", "IMG", "VIDEO", "CANVAS", "INPUT", "TEXTAREA", "SELECT"].includes(el.tagName)) {
+      const bg = rgba(c.backgroundColor);
+      const behind = bgOf(el.parentElement);
+      const filled = bg[3] > 0.08 && (!behind || dist(blend(bg, behind), behind) > 3);
+      const bw = sides.map((k) => (c[`border${k}Style`] !== "none" && rgba(c[`border${k}Color`])[3] > 0.05 ? parseFloat(c[`border${k}Width`]) : 0));
+      const bordered = bw.every((w) => w > 0);
+      const shadow = c.boxShadow !== "none";
+      const gradient = /gradient/.test(c.backgroundImage);
+      if (filled || bordered || shadow || gradient) s = { filled, bordered, shadow, gradient, bg: filled ? hex(behind ? blend(bg, behind) : bg) : null, border: bordered ? `${bw[0]}px ${hex(rgba(c.borderTopColor))}` : null, radius: parseFloat(c.borderTopLeftRadius) || 0 };
+    }
+    SURF.set(el, s);
+    return s;
+  };
+  const CONTROL = 'button, [role=button], input[type=submit], input[type=button], a[href], [role=tab], [role=menuitem]';
+  const isControl = (el) => {
+    if (!el.matches(CONTROL)) return false;
+    const b = box(el);
+    return b.h >= 14 && b.h <= 88 && b.w < 520 && clean(el.innerText).length <= 48;
+  };
+  const buttonLike = (el) => isControl(el) && (el.matches("button, [role=button], input[type=submit], input[type=button]") ? !!surface(el) || box(el).h >= 28 : !!surface(el));
+  const controls = all.filter((el) => isControl(el) && !hidden(el) && !el.parentElement.closest(CONTROL));
+  const inputs = all.filter((el) => el.matches('input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]), select, textarea') && !hidden(el));
+  const media = all.filter((el) => {
+    if (hidden(el) && !el.matches("img, video")) return false;
+    const b = box(el);
+    if (el.matches("img, video, canvas, iframe, svg")) return b.w >= 24 && b.h >= 24;
+    return b.w >= 80 && b.h >= 80 && /url\(/.test(cs(el).backgroundImage);
+  });
+
+  // Text blocks: the nearest non-inline box around each run of text, with its real ink (from ranges).
+  const INLINE = new Set(["inline", "contents", "ruby"]);
+  const blockOf = (el) => {
+    let b = el;
+    while (b && b !== body && INLINE.has(cs(b).display)) b = b.parentElement;
+    return b;
+  };
+  const groups = new Map();
+  const tw = document.createTreeWalker(body, NodeFilter.SHOW_TEXT);
+  for (let n = tw.nextNode(); n; n = tw.nextNode()) {
+    if (!n.textContent.trim()) continue;
+    const p = n.parentElement;
+    // aria-hidden text still shows (split-letter headings hide their spans from screen readers), so it counts.
+    if (!p || SKIP.test(p.tagName) || p.closest("svg, textarea, select") || !visible(p)) continue;
+    const blk = blockOf(p);
+    if (!blk || blk === body) continue;
+    if (!groups.has(blk)) groups.set(blk, []);
+    groups.get(blk).push(n);
+  }
+  const range = document.createRange();
+  const texts = [];
+  for (const [el, nodes] of groups) {
+    const rects = [];
+    let longest = nodes[0];
+    for (const n of nodes) {
+      range.selectNodeContents(n);
+      for (const r of range.getClientRects()) if (r.width > 0.5 && r.height > 0.5) rects.push(r);
+      if (n.textContent.trim().length > longest.textContent.trim().length) longest = n;
+    }
+    if (!rects.length) continue;
+    const st = longest.parentElement;
+    const c = cs(st);
+    const size = parseFloat(c.fontSize);
+    // Lines: rects grouped by their vertical centre.
+    const lines = [];
+    for (const r of [...rects].sort((a, b) => a.top + a.height / 2 - (b.top + b.height / 2))) {
+      const cy = r.top + r.height / 2;
+      const ln = lines.at(-1);
+      if (ln && Math.abs(cy - ln.cy) < size * 0.6) {
+        ln.l = Math.min(ln.l, r.left);
+        ln.r = Math.max(ln.r, r.right);
+        ln.t = Math.min(ln.t, r.top);
+        ln.b = Math.max(ln.b, r.bottom);
+      } else lines.push({ cy, l: r.left, r: r.right, t: r.top, b: r.bottom });
+    }
+    const ink = { x: Math.min(...lines.map((l) => l.l)) + sx, y: Math.min(...lines.map((l) => l.t)) + sy };
+    ink.r = Math.max(...lines.map((l) => l.r)) + sx;
+    ink.b = Math.max(...lines.map((l) => l.b)) + sy;
+    ink.w = ink.r - ink.x;
+    ink.h = ink.b - ink.y;
+    if (ink.r <= 0 || ink.x >= vw) continue;
+    const text = clean(nodes.map((n) => n.textContent).join(" "));
+    const letters = (text.match(/\p{L}/gu) ?? []).length;
+    const upperText = letters >= 4 && !/\p{Ll}/u.test(text) && /\p{Lu}/u.test(text);
+    const color = rgba(c.color);
+    const bg = bgOf(st);
+    const lh = c.lineHeight === "normal" ? size * 1.2 : parseFloat(c.lineHeight);
+    const ls = c.letterSpacing === "normal" ? 0 : parseFloat(c.letterSpacing) || 0;
+    const hEl = el.closest("h1, h2, h3, h4, h5, h6, [role=heading]");
+    const level = hEl ? Number(hEl.tagName[1]) || Number(hEl.getAttribute("aria-level")) || 2 : 0;
+    const ctl = el.closest(CONTROL);
+    const inkW = rects.reduce((s, r) => s + r.width, 0);
+    texts.push({
+      el,
+      st,
+      nodes,
+      ink,
+      lines: lines.map((l) => ({ l: l.l + sx, r: l.r + sx, t: l.t + sy, b: l.b + sy })),
+      nLines: lines.length,
+      text,
+      chars: text.length,
+      words: text.split(" ").filter(Boolean).length,
+      charW: inkW / Math.max(1, text.length),
+      size,
+      weight: Number(c.fontWeight) || 400,
+      family: c.fontFamily.split(",")[0].replace(/["']/g, "").trim(),
+      color,
+      contrast: bg ? contrast(blend(color, bg), bg) : null,
+      lh,
+      ls,
+      upper: c.textTransform === "uppercase" || upperText,
+      align: cs(el).textAlign,
+      level,
+      quote: /^[“"„«]/.test(text) || !!el.closest("blockquote, q"),
+      control: ctl && isControl(ctl) ? ctl : null,
+    });
+  }
+
+  // A heading set as several block lines (one span per line) is one heading.
+  const byHeading = new Map();
+  for (const t of texts) {
+    const h = t.level ? t.el.closest("h1, h2, h3, h4, h5, h6, [role=heading]") : null;
+    if (h && h !== t.el) byHeading.set(h, [...(byHeading.get(h) ?? []), t]);
+  }
+  for (const [h, parts] of byHeading) {
+    if (parts.length < 2) continue;
+    const first = parts[0];
+    const lines = parts.flatMap((p) => p.lines).sort((a, b) => a.t - b.t);
+    const ink = { x: Math.min(...parts.map((p) => p.ink.x)), y: Math.min(...parts.map((p) => p.ink.y)), r: Math.max(...parts.map((p) => p.ink.r)), b: Math.max(...parts.map((p) => p.ink.b)) };
+    ink.w = ink.r - ink.x;
+    ink.h = ink.b - ink.y;
+    const text = parts.map((p) => p.text).join(" ");
+    const merged = { ...first, el: h, nodes: parts.flatMap((p) => p.nodes), ink, lines, nLines: lines.length, text, chars: text.length, words: text.split(" ").filter(Boolean).length, align: cs(h).textAlign };
+    for (const p of parts) texts.splice(texts.indexOf(p), 1);
+    texts.push(merged);
+  }
+
+  // Centred or left-led: compare the ink with the nearest box that is wider than it.
+  for (const t of texts) {
+    t.centred = false;
+    t.leftLed = false;
+    let cont = t.el;
+    for (let k = 0; cont && k < 4 && box(cont).w <= t.ink.w + 24; k++) cont = cont.parentElement;
+    if (!cont) continue;
+    const b = box(cont);
+    const c = cs(cont);
+    const left = b.x + parseFloat(c.paddingLeft) + parseFloat(c.borderLeftWidth);
+    const right = b.r - parseFloat(c.paddingRight) - parseFloat(c.borderRightWidth);
+    const inkMid = (t.ink.x + t.ink.r) / 2;
+    // Wrapped text is centred only by text-align; a single line can also be centred by its box.
+    if (t.align === "center" || (t.nLines === 1 && Math.abs(inkMid - (left + right) / 2) <= 1.5 && right - left > t.ink.w + 24)) t.centred = true;
+    else if (Math.abs(t.ink.x - left) <= 1.5 || ["left", "start", "justify"].includes(t.align)) t.leftLed = !["right", "end"].includes(t.align);
+  }
+
+  // ---- product mockups ----
+  // A framed region full of small text (a fake app window, a booking widget, an issue list) is a picture of
+  // the product, not the page's own typography, buttons or grid. It is judged as one picture; what is inside
+  // it is left out of the page-level checks.
+  const tally2 = new Map();
+  for (const t of texts) {
+    for (let e = t.el, k = 0; e && e !== body && k < 40; e = e.parentElement, k++) {
+      const c = tally2.get(e) ?? { n: 0, small: 0, big: 0 };
+      c.n++;
+      // Scaled-down UI (transform: scale) renders smaller than its font-size says.
+      const scale = Math.min(1, t.ink.h / Math.max(1, t.nLines) / Math.max(1, t.lh));
+      if (t.size * scale <= 13.5) c.small++;
+      if (t.size >= 28) c.big++;
+      tally2.set(e, c);
+    }
+  }
+  const CHROME = "footer, header, nav, [role=contentinfo], [role=banner], [role=navigation]";
+  const mockCands = [...tally2.entries()]
+    .filter(([el, c]) => {
+      if (c.big || !((c.n >= 12 && c.small >= c.n * 0.6) || (c.n >= 8 && c.small >= c.n * 0.75))) return false;
+      const b = box(el);
+      const bleeds = b.x < -1 || b.r > vw + 1;
+      if (b.w < 280 || b.h < 180 || (b.w > vw * 0.98 && !bleeds) || el.closest(CHROME)) return false;
+      if (bleeds) return true;
+      // Framed, or so full of small text that it can only be a picture of an app.
+      return !!surface(el) || !!el.closest("figure, [aria-hidden=true], [inert]") || el.matches("figure") || (c.n >= 25 && c.small >= c.n * 0.8);
+    })
+    .map(([el]) => el);
+  const mocks = mockCands.filter((m) => !mockCands.some((o) => o !== m && o.contains(m)));
+  const mockSet = new Set(mocks);
+  const inMock = (el) => {
+    if (!mocks.length) return false;
+    for (let e = el.parentElement; e && e !== body; e = e.parentElement) if (mockSet.has(e)) return true;
+    return false;
+  };
+  const prune = (arr, get = (x) => x) => {
+    let j = 0;
+    for (const x of arr) if (!inMock(get(x))) arr[j++] = x;
+    arr.length = j;
+  };
+  if (mocks.length) {
+    prune(all);
+    prune(texts, (t) => t.el);
+    prune(controls);
+    prune(inputs);
+    prune(media);
+    allSet.clear();
+    for (const el of all) allSet.add(el);
+  }
+
+  // ---- sections ----
+  const sections = (sectionsIn && sectionsIn.length ? sectionsIn : [{ index: 1, name: "Page", tag: "body", selector: "body", box: { x: 0, y: 0, width: vw, height: pageH } }]).map((s) => ({
+    ...s,
+    chrome: ["header", "nav", "footer"].includes(s.tag) || /^(Header|Footer|Navigation)$/.test(s.name),
+    el: document.querySelector(s.selector),
+  }));
+  const sectionAt = (b) => {
+    const cy = b.y + b.h / 2;
+    return sections.find((s) => cy >= s.box.y && cy <= s.box.y + s.box.height)?.index ?? 0;
+  };
+  const nameOf = (i) => sections.find((s) => s.index === i)?.name ?? "page";
+  for (const t of texts) t.section = sectionAt(t.ink);
+
+  // ---- leaves: what the eye sees as items (text, controls, inputs, pictures) ----
+  const leaves = [];
+  for (const t of texts) if (!t.control) leaves.push({ kind: "text", el: t.el, b: t.ink, t });
+  // A control with no surface (a text link, a ghost button) is seen as its text, not its padded box.
+  const inkOf = (el) => {
+    const ts = texts.filter((t) => t.control === el || el.contains(t.el));
+    if (!ts.length) return box(el);
+    const x = Math.min(...ts.map((t) => t.ink.x));
+    const y = Math.min(...ts.map((t) => t.ink.y));
+    const r = Math.max(...ts.map((t) => t.ink.r));
+    const b = Math.max(...ts.map((t) => t.ink.b));
+    const icons = [...el.querySelectorAll("svg, img")].map(box).filter((m) => m.w > 0);
+    const xs = [x, ...icons.map((m) => m.x)];
+    const rs = [r, ...icons.map((m) => m.r)];
+    return { x: Math.min(...xs), y, r: Math.max(...rs), b, w: Math.max(...rs) - Math.min(...xs), h: b - y };
+  };
+  for (const el of controls) leaves.push({ kind: "control", el, b: surface(el) ? box(el) : inkOf(el) });
+  for (const el of inputs) leaves.push({ kind: "input", el, b: box(el) });
+  for (const el of media) if (!el.closest(CONTROL) || !isControl(el.closest(CONTROL))) leaves.push({ kind: "media", el, b: box(el) });
+  for (const el of mocks) leaves.push({ kind: "media", el, b: box(el), mock: true });
+  for (const l of leaves) l.section = sectionAt(l.b);
+  const cards = all.filter((el) => {
+    const s = surface(el);
+    const b = box(el);
+    return s && b.w >= 80 && b.h >= 40 && b.w < vw * 0.96 && !isControl(el) && !el.matches("input, select, textarea") && !hidden(el);
+  });
+
+  // ================= 1. ALIGNMENT =================
+  const cluster = (vals, tol = 1) => {
+    const s = [...vals].sort((a, b) => a.x - b.x);
+    const out = [];
+    for (const v of s) {
+      const c = out.at(-1);
+      if (c && v.x - c.x0 <= tol) c.m.push(v);
+      else out.push({ x0: v.x, m: [v] });
+    }
+    for (const c of out) {
+      c.x = r1(median(c.m.map((v) => v.x)));
+      // Members nested in another member count once (a card and the text flush inside it).
+      c.outer = c.m.filter((a) => !c.m.some((b) => b !== a && b.el !== a.el && b.el.contains(a.el)));
+      c.n = new Set(c.outer.map((v) => v.el)).size;
+    }
+    return out;
+  };
+  const related = (a, b) => a === b || a.contains(b) || b.contains(a);
+  // A control or picture in a centred group (a centred button pair) has no meaningful left edge.
+  const CEN = new Map();
+  const centredGroup = (el) => {
+    if (CEN.has(el)) return CEN.get(el);
+    let res = false;
+    let p = el.parentElement;
+    for (let k = 0; p && p !== body && k < 3 && box(p).w <= box(el).w + 24; k++) p = p.parentElement;
+    if (p && p !== body) {
+      const c = cs(p);
+      const ks = [...p.children].filter((k) => allSet.has(k));
+      if (ks.length) {
+        const x0 = Math.min(...ks.map((k) => box(k).x));
+        const x1 = Math.max(...ks.map((k) => box(k).r));
+        const pl = box(p).x + parseFloat(c.paddingLeft);
+        const pr = box(p).r - parseFloat(c.paddingRight);
+        res = c.textAlign === "center" || c.justifyContent === "center" || (Math.abs((x0 + x1) / 2 - (pl + pr) / 2) <= 2 && x1 - x0 < pr - pl - 24);
+      }
+    }
+    CEN.set(el, res);
+    return res;
+  };
+  const edgeItems = (sec, side) => {
+    const out = [];
+    for (const l of leaves) {
+      if (sec && l.section !== sec) continue;
+      if (l.kind !== "text" && centredGroup(l.el)) continue;
+      if (l.kind === "text" && (l.t.centred || !(side === "left" ? l.t.leftLed : ["right", "end"].includes(l.t.align)))) continue;
+      const x = side === "left" ? l.b.x : l.b.r;
+      if (x <= 1 || x >= vw - 1 || l.b.r > vw + 1 || l.b.x < -1) continue;
+      out.push({ x, el: l.el, b: l.b, kind: l.kind });
+    }
+    for (const el of cards) {
+      const b = box(el);
+      if (sec && sectionAt(b) !== sec) continue;
+      const x = side === "left" ? b.x : b.r;
+      if (x > 1 && x < vw - 1) out.push({ x, el, b, kind: "box" });
+    }
+    return out;
+  };
+  const nearMisses = [];
+  const seenMiss = new Set();
+  const alignSections = [];
+  const cardSet = new Set(cards);
+  const frameOf = (el) => {
+    for (let e = el.parentElement; e && e !== body; e = e.parentElement) if (cardSet.has(e)) return e;
+    return null;
+  };
+  const findMisses = (clusters, sec, side, scope) => {
+    const strong = clusters.filter((c) => c.n >= 3);
+    // Content inset inside a frame that itself sits on a shared edge follows the frame's padding, not the page grid.
+    const framedOnLine = (el) => {
+      const f = frameOf(el);
+      if (!f) return false;
+      const fx = side === "left" ? box(f).x : box(f).r;
+      return clusters.some((c) => c.n >= 2 && Math.abs(c.x - fx) <= 1) || fx <= 1 || fx >= vw - 1;
+    };
+    const page = scope === "page";
+    for (const L of strong) {
+      // Two competing lines a few px apart (each well used) are a split grid, not one line and its strays.
+      const near = clusters.filter((c) => c !== L && Math.abs(c.x - L.x) > 1 && Math.abs(c.x - L.x) <= 6);
+      if (near.reduce((a, c) => a + c.n, 0) >= L.n * 0.6) continue;
+      for (const c of near) {
+        const d = c.x - L.x;
+        if (c.n >= L.n || (page && Math.abs(d) < 2.5)) continue;
+        for (const v of c.outer) {
+          if (L.m.some((w) => related(w.el, v.el)) || framedOnLine(v.el)) continue;
+          // Large type nudged left by its side bearing is optical alignment, done on purpose.
+          const t = v.kind === "text" ? leaves.find((l) => l.el === v.el)?.t : null;
+          if (t && t.size >= 28 && side === "left" && d < 0 && -d <= t.size * 0.08) continue;
+          // Only items near the line in reading order: a line member close by vertically (same or next section on the page).
+          const sv = sectionAt(v.b);
+          if (!L.m.some((w) => Math.abs(w.b.y - v.b.y) < vh * (page ? 1 : 1.5) && (!page || Math.abs(sectionAt(w.b) - sv) <= 1))) continue;
+          const key = `${side}:${selector(v.el)}`;
+          if (seenMiss.has(key)) continue;
+          seenMiss.add(key);
+          const ref = L.m.find((w) => !related(w.el, v.el));
+          nearMisses.push({ side, scope, section: sec, offBy: r1(d), line: L.x, lineCount: L.n, x: r1(v.x), offender: off(v.el, v.b), onLine: off(ref.el, ref.b) });
+        }
+      }
+    }
+  };
+  for (const s of sections) {
+    const left = cluster(edgeItems(s.index, "left"));
+    const right = cluster(edgeItems(s.index, "right"));
+    findMisses(left, s.index, "left", "section");
+    findMisses(right, s.index, "right", "section");
+    const lines = left.filter((c) => c.n >= 2);
+    alignSections.push({ section: s.index, name: s.name, leftLines: lines.length, leftEdges: left.length, lines: lines.sort((a, b) => b.n - a.n).slice(0, 6).map((c) => ({ x: c.x, items: c.n })), rightLines: right.filter((c) => c.n >= 2).length });
+  }
+  // Page lines: edges shared by 3+ sections (the content column, the gutter).
+  const pageLeft = cluster(edgeItems(0, "left"));
+  for (const c of pageLeft) c.sections = new Set(c.m.map((v) => sectionAt(v.b))).size;
+  const pageLines = pageLeft.filter((c) => c.sections >= 3).sort((a, b) => b.sections - a.sections || b.n - a.n);
+  findMisses(pageLeft.map((c) => ({ ...c, n: c.sections >= 3 ? c.n : Math.min(c.n, 2) })), 0, "left", "page");
+
+  // Centred and left-aligned text stacked in the same column of one section.
+  const mixed = [];
+  const inCard = (el, sec) => cards.some((c) => c.contains(el) && box(c).w < (sec?.box.width ?? vw) * 0.8);
+  for (const s of sections) {
+    const ts = texts.filter((t) => t.section === s.index && !t.control && t.size >= 13 && t.chars >= 3 && !inCard(t.el, s) && (t.centred || t.leftLed));
+    const pairs = [];
+    for (const a of ts.filter((t) => t.centred && (t.nLines > 1 || t.ink.w < box(t.el).w - 24 || t.align === "center"))) {
+      for (const b of ts.filter((t) => t.leftLed && !t.centred)) {
+        const overlap = Math.min(a.ink.r, b.ink.r) - Math.max(a.ink.x, b.ink.x);
+        const gap = Math.max(a.ink.y, b.ink.y) - Math.min(a.ink.b, b.ink.b);
+        const stack = (x) => [x.el.parentElement, x.el.parentElement?.parentElement];
+        const sameStack = stack(a).some((p) => p && stack(b).includes(p));
+        if (overlap > 0 && sameStack && gap < 120 && gap > -4 && b.ink.w > 120) pairs.push({ centred: off(a.el, a.ink, a.text.slice(0, 60)), left: off(b.el, b.ink, b.text.slice(0, 60)) });
+      }
+    }
+    if (pairs.length) mixed.push({ section: s.index, name: s.name, pairs: pairs.slice(0, 3), count: pairs.length });
+  }
+
+  // Grid rows whose items (or the titles inside them) start at different heights.
+  const kidsOf = (p) => [...p.children].flatMap((k) => (cs(k).display === "contents" ? kidsOf(k) : [k]));
+  const ragged = [];
+  const rowParents = new Set();
+  for (const p of all) {
+    const ks = kidsOf(p).filter((k) => allSet.has(k));
+    if (ks.length < 2) continue;
+    const rows = [];
+    for (const k of ks) {
+      const b = box(k);
+      const row = rows.find((r) => {
+        const f = box(r[0]);
+        return Math.min(f.b, b.b) - Math.max(f.y, b.y) > Math.min(f.h, b.h) * 0.5 && !r.some((o) => Math.min(box(o).r, b.r) - Math.max(box(o).x, b.x) > 2);
+      });
+      if (row) row.push(k);
+      else rows.push([k]);
+    }
+    for (const row of rows) {
+      if (row.length < 2) continue;
+      const ws = row.map((k) => box(k).w);
+      if (Math.min(...ws) < 120 || Math.max(...ws) / Math.min(...ws) > 1.25) continue;
+      const tx = row.map((k) => texts.filter((t) => !t.control && k.contains(t.el)).sort((a, b) => a.ink.y - b.ink.y));
+      if (tx.some((t) => t.length < 2)) continue;
+      // Only rows of like items (cards, columns of one kind): same tag, same title size, similar amount of text.
+      const counts = tx.map((t) => t.length);
+      if (new Set(row.map((k) => k.tagName)).size > 1 || !tx.every((t) => t[0].size === tx[0][0].size) || Math.max(...counts) > Math.min(...counts) * 2 + 1) continue;
+      if ([...rowParents].some((q) => q.contains(p) && q !== p && row.every((k) => q.contains(k)))) continue;
+      rowParents.add(p);
+      const tops = row.map((k) => box(k).y);
+      const first = row.map((k, i) => tx[i][0].ink.y - box(k).y);
+      const firstSame = tx.every((t) => t[0].size === tx[0][0].size);
+      const second = row.map((k, i) => tx[i][1].ink.y - box(k).y);
+      const surfaced = row.every((k) => surface(k));
+      const heights = row.map((k) => box(k).h);
+      const spread = (a) => r1(Math.max(...a) - Math.min(...a));
+      const issues = [];
+      if (surfaced && spread(tops) > 2) issues.push({ kind: "item tops", spread: spread(tops) });
+      if (firstSame && spread(first) > 3) issues.push({ kind: "first lines", spread: spread(first), why: row.some((k, i) => k.querySelector("img, svg") && !row[(i + 1) % row.length].querySelector("img, svg")) ? "some items have an icon or picture above the text, others do not" : null });
+      else if (firstSame && spread(second) > 3) issues.push({ kind: "second lines", spread: spread(second), why: new Set(tx.map((t) => t[0].nLines)).size > 1 ? `the titles wrap to ${[...new Set(tx.map((t) => t[0].nLines))].join(" and ")} lines` : null });
+      if (surfaced && spread(heights) > 4 && cs(p).alignItems !== "stretch") issues.push({ kind: "card heights", spread: spread(heights) });
+      if (issues.length) ragged.push({ section: sectionAt(box(p)), container: off(p, box(p), ""), items: row.length, issues, offenders: row.slice(0, 4).map((k, i) => off(k, box(k), tx[i][0].text.slice(0, 40))) });
+    }
+  }
+
+  // Two different blocks side by side (a picture and its label, a demo and its copy): their visible edges should line
+  // up (tops, bottoms or centres) or clearly not. A near miss, a few px off, reads as a mistake. Seen on palate's own
+  // site: a painting and its placard 8px apart at the bottom, the placard 80px taller at the top.
+  const visualOf = (k) => {
+    if (surface(k)) return box(k);
+    const kb = box(k);
+    for (const d of k.querySelectorAll(":scope > *, :scope > * > *, :scope > * > * > *")) if (surface(d) && box(d).w >= kb.w * 0.85) return box(d);
+    return null;
+  };
+  for (const p of all) {
+    const ks = kidsOf(p).filter((k) => allSet.has(k));
+    if (ks.length !== 2) continue;
+    const [a, b] = ks.map((k) => box(k));
+    const beside = Math.min(a.b, b.b) - Math.max(a.y, b.y) > Math.min(a.h, b.h) * 0.5 && (a.r <= b.x + 2 || b.r <= a.x + 2);
+    if (!beside) continue;
+    const va = visualOf(ks[0]), vb = visualOf(ks[1]);
+    if (!va || !vb || Math.min(va.w, vb.w) < 160 || Math.min(va.h, vb.h) < 120) continue;
+    const dTop = Math.abs(va.y - vb.y), dBot = Math.abs(va.y + va.h - (vb.y + vb.h)), dMid = Math.abs(va.y + va.h / 2 - (vb.y + vb.h / 2));
+    const best = Math.min(dTop, dBot, dMid);
+    if (best <= 2 || best > 24) continue;
+    const edge = best === dTop ? "top" : best === dBot ? "bottom" : "centre";
+    ragged.push({ section: sectionAt(box(p)), container: off(p, box(p), ""), items: 2, issues: [{ kind: "pair edges", spread: r1(best), why: edge }], offenders: ks.map((k) => off(k, box(k), (k.innerText || "").trim().slice(0, 40))) });
+  }
+
+  // ================= 2. HIERARCHY =================
+  const wf = (w) => Math.sqrt(w / 400);
+  const cf = (c) => (c == null ? 0.8 : Math.max(0.2, Math.min(1, Math.log(c) / Math.log(10))));
+  const ctlInfo = (el) => {
+    const c = cs(el);
+    const s = surface(el);
+    const bg = rgba(c.backgroundColor);
+    const behind = bgOf(el.parentElement) ?? rootBg;
+    const filled = !!(s && (s.filled || s.gradient));
+    const fill = filled ? (s.gradient && !s.filled ? firstStop(c.backgroundImage) ?? bg : blend(bg, behind)) : null;
+    const fillContrast = fill ? contrast(fill, behind) : 1;
+    const t = texts.find((t) => el.contains(t.el)) ?? null;
+    const size = t?.size ?? parseFloat(c.fontSize);
+    const weight = t?.weight ?? (Number(c.fontWeight) || 400);
+    const b = box(el);
+    const prominence = Math.sqrt(b.w * b.h) * (filled ? 1 + Math.min(1, Math.log(fillContrast) / Math.log(8)) * 1.2 : s?.bordered ? 1.15 : 0.8);
+    return { filled, bordered: !!s?.bordered, fill: fill ? hex(fill) : null, fillContrast: r1(fillContrast), size, weight, prominence: r1(prominence), score: size * wf(weight) * (t ? cf(t.contrast) : 0.8) * (filled ? 1 + 0.5 * Math.min(1, Math.log(fillContrast) / Math.log(8)) : 1), text: clean(el.innerText).slice(0, 40) };
+  };
+  const CTL = new Map(controls.filter(buttonLike).map((el) => [el, ctlInfo(el)]));
+  const scoreText = (t) => t.size * wf(t.weight) * cf(t.contrast);
+  // Single glyphs and text on small tiles (keycaps, badges, avatars) are parts of an illustration.
+  const glyph = (t) => {
+    if (!/[\p{L}\p{N}]{2,}|\p{N}/u.test(t.text)) return true;
+    if (t.level) return false;
+    for (let e = t.el; e && e !== body; e = e.parentElement) {
+      if (!surface(e)) continue;
+      const b = box(e);
+      return b.w <= 160 && b.h <= 160 && !isControl(e);
+    }
+    return false;
+  };
+  const bodySize = (() => {
+    const m = tally(texts.filter((t) => !t.control && t.chars >= 20), (t) => t.size);
+    let best = null;
+    let most = 0;
+    for (const [s, ts] of m) {
+      const n = ts.reduce((a, t) => a + t.chars, 0);
+      if (n > most) [best, most] = [s, n];
+    }
+    return best ?? 16;
+  })();
+  const scopes = [];
+  const scopeOf = (name, section, inScope) => {
+    const items = [];
+    for (const t of texts) if (!t.control && !glyph(t) && inScope(t.ink)) items.push({ kind: t.level ? `h${t.level}` : "text", score: scoreText(t), el: t.el, b: t.ink, t });
+    for (const [el, info] of CTL) if (inScope(box(el)) && !el.closest(CHROME)) items.push({ kind: info.filled ? "button (filled)" : "button", score: info.score, el, b: box(el), info });
+    if (!items.length) return null;
+    items.sort((a, b) => b.score - a.score);
+    const top = items[0];
+    const pics = media.filter((m) => inScope(box(m)) && box(m).w * box(m).h > vw * vh * 0.08);
+    const heading =
+      items.find((i) => i.t && i.t.level === 1) ??
+      (section ? items.filter((i) => i.t && i.t.level && i.t.level <= 3).sort((a, b) => a.b.y - b.b.y)[0] : null) ??
+      null;
+    const res = { scope: name, section, top: items.slice(0, 5).map((i) => ({ kind: i.kind, score: r1(i.score), size: i.t?.size ?? i.info?.size, weight: i.t?.weight ?? i.info?.weight, ...off(i.el, i.b, (i.t?.text ?? i.info?.text ?? "").slice(0, 60)) })) };
+    if (pics.length) res.largestPicture = off(pics.sort((a, b) => box(b).w * box(b).h - box(a).w * box(a).h)[0]);
+    if (heading) {
+      res.heading = { kind: heading.kind, size: heading.t.size, weight: heading.t.weight, score: r1(heading.score), ...off(heading.el, heading.b, heading.t.text.slice(0, 60)) };
+      res.headingRank = items.indexOf(heading) + 1;
+      res.outranking = items.filter((i) => i.score > heading.score * 1.02 && i !== heading).slice(0, 3).map((i) => ({ kind: i.kind, score: r1(i.score), ...off(i.el, i.b, (i.t?.text ?? i.info?.text ?? "").slice(0, 60)) }));
+    }
+    const lead = heading ?? top;
+    // Focal points: distinct things within 15% of the top weight (one row of equal titles counts as one).
+    const close = items.filter((i) => i.score >= top.score * 0.85);
+    // One style repeated (a row of stats, card titles) is one focal point; the heading is its own.
+    const kinds = tally(close, (i) => (i === heading ? "H" : `${i.kind}|${i.t?.size ?? i.info?.size}|${i.t?.weight ?? i.info?.weight}`));
+    res.focalPoints = kinds.length;
+    if (heading) res.peers = items.filter((i) => i !== heading && i.t && i.score >= heading.score * 0.95).slice(0, 4).map((i) => ({ kind: i.kind, score: r1(i.score), ...off(i.el, i.b, (i.t?.text ?? i.info?.text ?? "").slice(0, 60)) }));
+    res.competing = close.slice(1, 5).map((i) => ({ kind: i.kind, score: r1(i.score), ...off(i.el, i.b, (i.t?.text ?? i.info?.text ?? "").slice(0, 60)) }));
+    // Steps: headline : subhead : body.
+    if (lead.t) {
+      const h = lead.t;
+      const below = texts
+        .filter((t) => !t.control && t !== h && inScope(t.ink) && t.ink.y >= h.ink.b - 2 && t.ink.y - h.ink.b < 160 && Math.min(t.ink.r, h.ink.r) - Math.max(t.ink.x, h.ink.x) > 0)
+        .sort((a, b) => a.ink.y - b.ink.y)[0];
+      const scopeBody = (() => {
+        const m = tally(texts.filter((t) => !t.control && inScope(t.ink) && t.chars >= 20 && t.size < h.size), (t) => t.size);
+        let best = null;
+        let most = 0;
+        for (const [s, ts] of m) {
+          const n = ts.reduce((a, t) => a + t.chars, 0);
+          if (n > most) [best, most] = [s, n];
+        }
+        return best ?? bodySize;
+      })();
+      const sub = below && below.size > scopeBody * 1.05 && below.size < h.size ? below : null;
+      const next = below ?? null;
+      res.steps = {
+        headline: h.size,
+        headlineWeight: h.weight,
+        subhead: sub ? sub.size : null,
+        body: scopeBody,
+        next: next ? { size: next.size, weight: next.weight, ...off(next.el, next.ink, next.text.slice(0, 60)) } : null,
+        ratios: sub ? [r1(h.size / sub.size), r1(sub.size / scopeBody)] : [r1(h.size / scopeBody)],
+        headlineToNext: next ? Math.round((h.size / next.size) * 100) / 100 : null,
+        scoreRatio: next ? Math.round((scoreText(h) / scoreText(next)) * 100) / 100 : null,
+        weightGap: next ? h.weight - next.weight : null,
+      };
+    }
+    // Buttons side by side: is one clearly the primary?
+    const toggle = (el) => el.matches("[aria-pressed], [aria-selected], [role=tab], [role=radio], [aria-checked]") || !!el.closest("[role=tablist], [role=radiogroup], [role=group][aria-label]");
+    const btns = [...CTL.entries()].filter(([el]) => inScope(box(el)) && box(el).h >= 28 && !toggle(el) && !el.closest("header, nav, [role=banner], [role=navigation], footer"));
+    const groupsB = tally(btns, ([el]) => {
+      let p = el.parentElement;
+      for (let k = 0; k < 3 && p && btns.filter(([o]) => p.contains(o)).length < 2; k++) p = p.parentElement;
+      return p && btns.filter(([o]) => p.contains(o)).length >= 2 ? selector(p) : null;
+    }).filter(([, g]) => g.length >= 2);
+    res.buttonGroups = groupsB.map(([, g]) => {
+      const sorted = [...g].sort((a, b) => b[1].prominence - a[1].prominence);
+      const labels = g.map(([, i]) => i.text.toLowerCase());
+      const sameStyle = new Set(g.map(([, i]) => `${i.filled}|${i.fill}|${i.bordered}`)).size === 1;
+      // A set of parallel choices (platforms, filters, chips, icon links) has no primary by design.
+      const choiceSet = labels.some((l) => !l) || (g.length >= 3 && sameStyle) || new Set(labels.map((l) => l.split(" ")[0])).size === 1;
+      return {
+        choiceSet,
+        clearPrimary: sorted[0][1].prominence > sorted[1][1].prominence * 1.12,
+        equalStyle: sorted[0][1].filled === sorted[1][1].filled && sorted[0][1].fill === sorted[1][1].fill,
+        primaryFirst: g[0][0] === sorted[0][0],
+        buttons: sorted.map(([el, info]) => ({ prominence: info.prominence, filled: info.filled, fill: info.fill, fillContrast: info.fillContrast, ...off(el, box(el), info.text) })),
+      };
+    });
+    return res;
+  };
+  const fs = scopeOf("first screen", 0, (b) => b.y < sy + vh && b.y + b.h > sy);
+  if (fs) {
+    // The strongest control anywhere on the first screen (nav included) against the hero's primary.
+    const ctlsFirst = [...CTL.entries()].filter(([el]) => box(el).y < sy + vh).sort((a, b) => b[1].prominence - a[1].prominence);
+    fs.controls = ctlsFirst.slice(0, 4).map(([el, info]) => ({ prominence: info.prominence, filled: info.filled, fill: info.fill, inNav: !!el.closest("header, nav, [role=banner], [role=navigation]"), ...off(el, box(el), info.text) }));
+    scopes.push(fs);
+  }
+  for (const s of sections) {
+    if (s.chrome) continue;
+    const sc = scopeOf(s.name, s.index, (b) => sectionAt(b) === s.index);
+    if (sc) scopes.push(sc);
+  }
+  // One per <h1> element: a highlighted word inside the headline is a separate text run, not a second <h1>.
+  const h1s = [...new Map(texts.filter((t) => t.level === 1 && !t.control).map((t) => [t.el.closest("h1, [role=heading]") ?? t.el, t])).values()];
+
+  // ================= 3. SPACING =================
+  const spaceVals = [];
+  const PROPS = ["paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "marginTop", "marginBottom", "rowGap", "columnGap"];
+  for (const el of all) {
+    const c = cs(el);
+    if (INLINE.has(c.display) || el.tagName === "svg") continue;
+    for (const p of PROPS) {
+      if ((p === "rowGap" || p === "columnGap") && !/flex|grid/.test(c.display)) continue;
+      const v = parseFloat(c[p]);
+      if (!(v >= 3) || v > 400) continue;
+      spaceVals.push({ v, p, el });
+    }
+  }
+  const onGrid = (v, u) => Math.abs(v / u - Math.round(v / u)) * u <= 0.26;
+  const offScale = (v) => (v >= 12 ? !onGrid(v, 4) : !onGrid(v, 2));
+  const fluid = (v) => Math.abs(v - Math.round(v)) > 0.05 && Math.abs(v * 2 - Math.round(v * 2)) > 0.05;
+  const share = (u) => (spaceVals.length ? spaceVals.filter((s) => onGrid(s.v, u)).length / spaceVals.length : 0);
+  const spacing = {
+    values: spaceVals.length,
+    distinct: new Set(spaceVals.map((s) => r1(s.v))).size,
+    on8: Math.round(share(8) * 100),
+    on4: Math.round(share(4) * 100),
+    on2: Math.round(share(2) * 100),
+    unit: share(8) >= 0.7 ? 8 : share(4) >= 0.7 ? 4 : share(2) >= 0.8 ? 2 : null,
+    offScaleShare: spaceVals.length ? Math.round((spaceVals.filter((s) => offScale(s.v) && !fluid(s.v)).length / spaceVals.length) * 100) : 0,
+    offScale: tally(spaceVals.filter((s) => offScale(s.v) && !fluid(s.v)), (s) => r1(s.v))
+      .slice(0, 8)
+      .map(([v, xs]) => ({ value: v, count: xs.length, examples: xs.slice(0, 2).map((s) => ({ prop: s.p, ...off(s.el, box(s.el), snippet(s.el).slice(0, 40)) })) })),
+    fluid: [...new Set(spaceVals.filter((s) => fluid(s.v)).map((s) => r1(s.v)))].slice(0, 8),
+    common: tally(spaceVals, (s) => Math.round(s.v)).slice(0, 12).map(([v, xs]) => `${v}×${xs.length}`),
+  };
+
+  // Proximity: a heading or label should sit closer to what it introduces than to what came before.
+  const containerOf = (el, sec) => {
+    for (let e = el.parentElement; e && e !== body; e = e.parentElement) {
+      if (surface(e) && box(e).w < vw * 0.96) return e;
+      if (sec?.el && e === sec.el) return e;
+    }
+    return sec?.el ?? body;
+  };
+  const proximity = [];
+  const hOverlap = (a, b) => Math.min(a.r, b.r) - Math.max(a.x, b.x) > Math.min(a.w, b.w) * 0.3;
+  const leafSet = leaves.filter((l) => !(l.kind === "media" && l.b.w < 40));
+  for (const t of texts) {
+    if (t.control || t.words > 12) continue;
+    const sec = sections.find((s) => s.index === t.section);
+    if (!sec || sec.chrome) continue;
+    const isLabel = t.el.matches("label, legend, dt, h1, h2, h3, h4, h5, h6") || t.level;
+    const cont = containerOf(t.el, sec);
+    const cb = box(cont);
+    const inC = (l) => l.el !== t.el && cont.contains(l.el) && !l.el.contains(t.el) && !t.el.contains(l.el) && l.b.y >= cb.y - 1 && l.b.b <= cb.b + 1;
+    const below = leafSet.filter((l) => inC(l) && l.b.y >= t.ink.b - 1 && hOverlap(l.b, t.ink)).sort((a, b) => a.b.y - b.b.y)[0];
+    if (!below) continue;
+    const nextT = below.t;
+    // A peer in a list (the next item has the same style) is not introducing it.
+    if (nextT && nextT.size === t.size && nextT.weight === t.weight && dist(nextT.color, t.color) < 8) continue;
+    // A label with its value beside it (dt | dd, label | input on one row) introduces that, not what is below.
+    if (leafSet.some((l) => inC(l) && l.b.x >= t.ink.r - 2 && Math.min(l.b.b, t.ink.b) - Math.max(l.b.y, t.ink.y) > Math.min(l.b.h, t.ink.h) * 0.5)) continue;
+    const fieldLabel = below.kind === "input" && (t.el.matches("label, legend") || !!t.el.closest("label") || (t.words <= 4 && t.size <= 16));
+    const headingLike = isLabel || fieldLabel || (nextT && t.words <= 8 && (t.size >= nextT.size * 1.15 || (t.weight >= 600 && nextT.weight < 600)));
+    if (!headingLike) continue;
+    let top = t.ink;
+    let above = leafSet.filter((l) => inC(l) && l.b.b <= top.y + 1 && hOverlap(l.b, t.ink)).sort((a, b) => b.b.b - a.b.b)[0];
+    // A kicker label above the heading belongs to it: measure from the kicker instead.
+    // So does an icon or small picture directly above it.
+    if (above && ((above.t && above.t.words <= 6 && above.t.size < t.size) || (above.kind === "control" && above.b.h <= 40) || (above.kind === "media" && above.b.w <= 240 && above.b.h <= 64)) && top.y - above.b.b < 32) {
+      top = above.b;
+      above = leafSet.filter((l) => inC(l) && l.b.b <= top.y + 1 && hOverlap(l.b, t.ink) && l !== above).sort((a, b) => b.b.b - a.b.b)[0];
+    }
+    if (!above) continue;
+    // A subline right under a heading belongs to the heading.
+    if (above.t?.level && top.y - above.b.b < t.size) continue;
+    // Something between (a rule, a divider, a box edge) separates the groups already.
+    const gapAbove = top.y - above.b.b;
+    const gapBelow = below.b.y - t.ink.b;
+    // A line glued to the one above (a heading's second line in another colour) is part of that block.
+    if (gapBelow < 6 || gapBelow > 96 || gapAbove > gapBelow || gapAbove < 6) continue;
+    const rule = all.some((el) => {
+      const b = box(el);
+      const c = cs(el);
+      return b.y >= above.b.b - 1 && b.b <= top.y + 1 && b.w > 40 && (b.h <= 3 && rgba(c.backgroundColor)[3] > 0.1 || (parseFloat(c.borderTopWidth) > 0 && c.borderTopStyle !== "none" && b.y > above.b.b - 2 && b.y < top.y));
+    });
+    if (rule) continue;
+    proximity.push({ section: t.section, gapAbove: r1(gapAbove), gapBelow: r1(gapBelow), offender: off(t.el, t.ink, t.text.slice(0, 50)), above: off(above.el, above.b), below: off(below.el, below.b) });
+  }
+
+  // Section padding: where the content starts and ends inside each section, and the gap between sections.
+  const content = sections.filter((s) => !s.chrome && s.box.height >= 120);
+  const padRows = content.map((s) => {
+    const ls = leaves.filter((l) => l.section === s.index && !(l.kind === "media" && l.b.w >= s.box.width * 0.95 && l.b.h >= s.box.height * 0.9));
+    if (!ls.length) return null;
+    const top = Math.min(...ls.map((l) => l.b.y));
+    const bot = Math.max(...ls.map((l) => l.b.b));
+    return { section: s.index, name: s.name, top: Math.round(top - s.box.y), bottom: Math.round(s.box.y + s.box.height - bot), contentTop: top, contentBottom: bot, ownBg: !!(s.el && surface(s.el)?.filled) };
+  }).filter(Boolean);
+  for (let i = 1; i < padRows.length; i++) padRows[i].gapFromPrevious = Math.round(padRows[i].contentTop - padRows[i - 1].contentBottom);
+  const sectionPadding = { sections: padRows.map(({ contentTop, contentBottom, ...r }) => r) };
+
+  // ================= 4. SIZING AND TYPE =================
+  const body2 = texts.filter((t) => !t.control);
+  const measure = body2
+    .filter((t) => t.nLines >= 3 && t.size >= 13 && t.size <= 24 && t.chars >= 120 && !t.level)
+    .map((t) => {
+      const maxW = Math.max(...t.lines.map((l) => l.r - l.l));
+      return { cpl: Math.round(maxW / Math.max(1, t.charW)), size: t.size, lines: t.nLines, ...off(t.el, t.ink, t.text.slice(0, 50)) };
+    });
+  const lineHeight = body2
+    .filter((t) => t.nLines >= 2 && t.chars >= 40)
+    .map((t) => ({ ratio: Math.round((t.lh / t.size) * 100) / 100, size: t.size, kind: t.size >= 32 ? "display" : t.level || t.weight >= 600 || t.size > 20 ? "heading" : "body", lines: t.nLines, chars: t.chars, ...off(t.el, t.ink, t.text.slice(0, 50)) }));
+  const weights = tally(body2, (t) => t.weight).map(([w, ts]) => ({ weight: w, blocks: ts.length, chars: ts.reduce((a, t) => a + t.chars, 0) }));
+  const looseDisplay = body2.filter((t) => t.size >= 28 && !t.upper && t.ls / t.size > 0.01).map((t) => ({ size: t.size, tracking: r1((t.ls / t.size) * 100) / 100, ...off(t.el, t.ink, t.text.slice(0, 50)) }));
+  const tightDisplay = body2.filter((t) => t.size >= 40 && t.ls === 0).map((t) => ({ size: t.size, family: t.family, ...off(t.el, t.ink, t.text.slice(0, 50)) }));
+  const capsNoTracking = texts
+    .filter((t) => t.upper && t.size <= 20 && (t.words >= 2 || t.chars >= 6) && t.ls / t.size < 0.03)
+    .map((t) => ({ size: t.size, tracking: Math.round((t.ls / t.size) * 1000) / 1000, ...off(t.el, t.ink, t.text.slice(0, 40)) }));
+  // Type scale: sizes weighted by use, the ratio that fits most of them, and sizes too close to tell apart.
+  const sizeTally = tally(texts, (t) => Math.round(t.size * 2) / 2).map(([s, ts]) => ({ size: s, blocks: ts.length }));
+  const sizes = sizeTally.map((s) => s.size).sort((a, b) => a - b);
+  const RATIOS = [1.067, 1.125, 1.2, 1.25, 1.333, 1.414, 1.5, 1.618];
+  const fits = (r, base) => sizes.filter((s) => {
+    const n = Math.log(s / base) / Math.log(r);
+    return Math.abs(s - base * r ** Math.round(n)) <= Math.max(1, s * 0.04);
+  });
+  let bestScale = null;
+  for (const r of RATIOS) {
+    const f = fits(r, bodySize);
+    if (!bestScale || f.length > bestScale.fit.length) bestScale = { ratio: r, fit: f };
+  }
+  const closeSizes = [];
+  for (let i = 1; i < sizes.length; i++) {
+    const a = sizes[i - 1];
+    const b = sizes[i];
+    const na = sizeTally.find((s) => s.size === a).blocks;
+    const nb = sizeTally.find((s) => s.size === b).blocks;
+    if (b / a < 1.08 && na >= 2 && nb >= 2 && a >= 12) {
+      const ex = (s) => texts.find((t) => Math.round(t.size * 2) / 2 === s);
+      closeSizes.push({ sizes: [a, b], blocks: [na, nb], examples: [off(ex(a).el, ex(a).ink, ex(a).text.slice(0, 30)), off(ex(b).el, ex(b).ink, ex(b).text.slice(0, 30))] });
+    }
+  }
+  const headingLike = (t) => !t.control && !t.quote && (t.level >= 1 && t.level <= 4 || (t.size >= Math.max(22, bodySize * 1.35) && t.weight >= 500));
+  const longHeadings = body2.filter((t) => !t.quote && t.level >= 1 && t.level <= 3 && t.words > 12).map((t) => ({ words: t.words, size: t.size, ...off(t.el, t.ink, t.text.slice(0, 80)) }));
+  // Widows: a heading whose last line holds one word.
+  const widows = [];
+  for (const t of body2.filter((t) => headingLike(t) && t.nLines >= 2 && t.words >= 3)) {
+    const lastTop = t.lines.at(-1).t;
+    let lastWords = 0;
+    let lastWord = "";
+    for (const n of t.nodes) {
+      const s = n.textContent;
+      for (const m of s.matchAll(/\S+/g)) {
+        range.setStart(n, m.index);
+        range.setEnd(n, m.index + m[0].length);
+        const r = range.getBoundingClientRect();
+        if (r.width > 0 && r.top + sy + r.height / 2 > lastTop + 1) {
+          lastWords++;
+          lastWord = m[0];
+        }
+      }
+    }
+    if (lastWords === 1 && lastWord.length < 20) widows.push({ word: lastWord, lines: t.nLines, wrap: cs(t.el).textWrap || cs(t.el).textWrapStyle || null, size: t.size, ...off(t.el, t.ink, t.text.slice(0, 60)) });
+  }
+  const families = tally(texts, (t) => t.family).map(([f, ts]) => ({ family: f, blocks: ts.length }));
+
+  // ================= 5. CONSISTENCY =================
+  const radiusKey = (el) => {
+    const b = box(el);
+    const r = parseFloat(cs(el).borderTopLeftRadius) || 0;
+    if (r >= Math.min(b.h, b.w) / 2 - 1 && r > 0) return "pill/circle";
+    return String(Math.round(r));
+  };
+  const fieldSurface = (el) => {
+    const c = cs(el);
+    return rgba(c.backgroundColor)[3] > 0.05 || (parseFloat(c.borderTopWidth) > 0 && c.borderTopStyle !== "none" && rgba(c.borderTopColor)[3] > 0.05) || c.boxShadow !== "none";
+  };
+  const rounded = all.filter((el) => (el.matches("input, select, textarea") ? fieldSurface(el) : surface(el) || el.matches("img, video")) && box(el).w >= 16 && !hidden(el));
+  const nestedRadii = [];
+  const derived = new Set();
+  for (const el of rounded) {
+    const r = parseFloat(cs(el).borderTopLeftRadius) || 0;
+    if (r < 4) continue;
+    const b = box(el);
+    if (r >= Math.min(b.h, b.w) / 2 - 1) continue;
+    let p = el.parentElement;
+    while (p && p !== body && !(surface(p) && (parseFloat(cs(p).borderTopLeftRadius) || 0) > 0)) p = p.parentElement;
+    if (!p || p === body) continue;
+    const pb = box(p);
+    const R = parseFloat(cs(p).borderTopLeftRadius) || 0;
+    if (R >= Math.min(pb.h, pb.w) / 2 - 1) continue;
+    const insetX = b.x - pb.x;
+    const insetY = b.y - pb.y;
+    // Only corners that sit near each other: the inner box shares the outer box's top-left corner region.
+    if (insetX < 0 || insetY < 0 || insetX > 32 || insetY > 32 || Math.abs(insetX - insetY) > 6) continue;
+    const inset = Math.min(insetX, insetY);
+    const ideal = Math.max(0, R - inset);
+    if (Math.abs(r - ideal) <= 1.5 && inset < R) derived.add(el);
+    // A picture counts only when it fills the frame (a screenshot in a card), not an icon sitting inside it.
+    if (el.matches("img, video") && b.w < pb.w * 0.5) continue;
+    if (inset >= 2 && inset < R * (el.matches("img, video") ? 1 : 1.5) && r > ideal + 3 && r >= R * 0.6) nestedRadii.push({ outer: Math.round(R), inner: Math.round(r), inset: Math.round(inset), ideal: Math.round(ideal), inner_: off(el), outer_: off(p, pb, "") });
+  }
+  // Radii derived concentrically from a parent (outer − inset) are not separate choices.
+  const radii = tally(rounded.filter((el) => !derived.has(el)), radiusKey).map(([r, els]) => ({ radius: r, count: els.length, example: off(els[0]) }));
+  const concentric = tally([...derived], radiusKey).map(([r, els]) => ({ radius: r, count: els.length }));
+  const borders = tally(all.filter((el) => surface(el)?.bordered && !hidden(el)), (el) => surface(el).border).map(([k, els]) => ({ border: k, count: els.length, example: off(els[0]) }));
+  const dividers = tally(all.filter((el) => {
+    const c = cs(el);
+    const n = sides.filter((k) => c[`border${k}Style`] !== "none" && parseFloat(c[`border${k}Width`]) > 0 && rgba(c[`border${k}Color`])[3] > 0.05).length;
+    return n >= 1 && n <= 2;
+  }), (el) => {
+    const c = cs(el);
+    const k = sides.find((k) => c[`border${k}Style`] !== "none" && parseFloat(c[`border${k}Width`]) > 0);
+    return `${parseFloat(c[`border${k}Width`])}px ${hex(rgba(c[`border${k}Color`]))}`;
+  }).map(([k, els]) => ({ border: k, count: els.length }));
+  const shadowKey = (el) => {
+    const layers = cs(el).boxShadow.replace(/(?:rgba?|oklch|oklab|hsla?|lab|lch|color)\([^)]*\)/g, (m) => {
+      const v = rgba(m);
+      return v[3] < 0.01 ? "transparent" : hex(v) + (v[3] < 1 ? `/${r1(v[3])}` : "");
+    }).split(/,(?![^(]*\))/).map((x) => x.trim()).filter((x) => !/transparent/.test(x) && !/^(\S+ )?0px 0px 0px( 0px)?( \S+)?$/.test(x.replace(/inset ?/, "")));
+    return layers.length ? layers.join(", ") : null;
+  };
+  const shadows = tally(all.filter((el) => cs(el).boxShadow !== "none" && !hidden(el)), shadowKey).map(([k, els]) => ({ shadow: k.slice(0, 120), count: els.length, example: off(els[0]) }));
+
+  // Colours: text, fills and borders, with the area each covers; the accent and how much of the page it takes.
+  const colArea = new Map();
+  const addCol = (v, area, role) => {
+    if (!v || v[3] < 0.05 || area <= 0) return;
+    const k = hex(v);
+    const e = colArea.get(k) ?? { hex: k, v, area: 0, roles: new Set() };
+    e.area += area;
+    e.roles.add(role);
+    colArea.set(k, e);
+  };
+  for (const t of texts) addCol(t.color[3] < 1 && bgOf(t.st) ? blend(t.color, bgOf(t.st)) : t.color, t.ink.w * t.ink.h * 0.35, "text");
+  for (const el of all) {
+    const s = surface(el);
+    const b = box(el);
+    if (s?.filled) {
+      const area = b.w * b.h - [...el.children].filter((k) => surface(k)?.filled).reduce((a, k) => a + box(k).w * box(k).h, 0);
+      addCol(rgba(s.bg), Math.max(0, area), "fill");
+    }
+    if (s?.bordered) addCol(rgba(cs(el).borderTopColor), 2 * (b.w + b.h) * parseFloat(cs(el).borderTopWidth), "border");
+  }
+  addCol(rootBg, Math.max(0, vw * pageH - [...colArea.values()].filter((c) => c.roles.has("fill")).reduce((a, c) => a + c.area, 0)), "page");
+  const palette = [...colArea.values()].sort((a, b) => b.area - a.area);
+  const total = palette.reduce((a, c) => a + c.area, 0) || 1;
+  const chromatic = palette.filter((c) => {
+    const h = hsl(c.v);
+    return h.s > 0.25 && h.l > 0.12 && h.l < 0.92;
+  });
+  const hueFamilies = tally(chromatic, (c) => Math.round(hsl(c.v).h / 30) % 12).map(([h, cs_]) => ({ hue: h * 30, colors: cs_.map((c) => c.hex), share: Math.round((cs_.reduce((a, c) => a + c.area, 0) / total) * 1000) / 10 })).sort((a, b) => b.share - a.share);
+  const nearDupColors = [];
+  for (let i = 0; i < palette.length; i++)
+    for (let j = i + 1; j < palette.length; j++) {
+      const a = palette[i];
+      const b = palette[j];
+      if (dist(a.v, b.v) > 0 && dist(a.v, b.v) <= 5 && a.area / total > 0.0005 && b.area / total > 0.0005) nearDupColors.push([a.hex, b.hex]);
+    }
+  const colors = {
+    distinct: palette.length,
+    text: new Set(texts.map((t) => hex(t.color))).size,
+    top: palette.slice(0, 10).map((c) => ({ hex: c.hex, share: Math.round((c.area / total) * 1000) / 10, roles: [...c.roles] })),
+    accent: hueFamilies[0] ? { hue: hueFamilies[0].hue, colors: hueFamilies[0].colors.slice(0, 4), share: hueFamilies[0].share } : null,
+    hueFamilies: hueFamilies.filter((h) => h.share >= 0.3).slice(0, 6),
+    nearDuplicates: nearDupColors.slice(0, 8),
+  };
+
+  // The same component styled several ways.
+  const sig = (parts) => parts.join(" · ");
+  const variants = (els, key) => tally(els, key).map(([k, xs]) => ({ style: k, count: xs.length, example: off(xs[0]) }));
+  // Plain (no fill, no border) buttons read as links, not as button styles.
+  const btnEls = [...CTL.entries()].filter(([el, i]) => i.filled || i.bordered).map(([el]) => el);
+  const buttons = variants(btnEls, (el) => {
+    const c = cs(el);
+    const i = CTL.get(el);
+    const s = surface(el);
+    return sig([i.filled ? `filled ${i.fill}` : s?.bordered ? `outline ${s.border}` : "plain", `h${Math.round(box(el).h / 2) * 2}`, `r${radiusKey(el)}`, `${Math.round(i.size)}px/${i.weight}`, `px${Math.round(parseFloat(c.paddingLeft))}`]);
+  });
+  const cardEls = cards.filter((el) => texts.filter((t) => el.contains(t.el)).length >= 2 && box(el).w >= 160 && box(el).h >= 80 && box(el).w < vw * 0.9);
+  const cardVariants = variants(cardEls, (el) => {
+    const s = surface(el);
+    const c = cs(el);
+    return sig([s.bg ? `bg ${s.bg}` : "no fill", s.border ? `border ${s.border}` : "no border", s.shadow ? "shadow" : "flat", `r${radiusKey(el)}`, `pad ${Math.round(parseFloat(c.paddingTop))}/${Math.round(parseFloat(c.paddingLeft))}`]);
+  });
+  const inputVariants = variants(inputs, (el) => {
+    const c = cs(el);
+    const bw = c.borderTopStyle !== "none" && rgba(c.borderTopColor)[3] > 0.05 ? parseFloat(c.borderTopWidth) : 0;
+    const bg = rgba(c.backgroundColor);
+    return sig([`h${Math.round(box(el).h)}`, fieldSurface(el) ? `r${radiusKey(el)}` : "r-", bw ? `border ${bw}px ${hex(rgba(c.borderTopColor))}` : "no border", bg[3] > 0.05 ? `bg ${hex(bg)}` : "no fill", `${parseFloat(c.fontSize)}px`]);
+  });
+  // Variants that differ by a hair are usually accidents (12 vs 14px radius, 40 vs 42px tall).
+  const nearVariants = (vs) => {
+    const out = [];
+    const parse = (s) => s.split(" · ");
+    for (let i = 0; i < vs.length; i++)
+      for (let j = i + 1; j < vs.length; j++) {
+        const a = parse(vs[i].style);
+        const b = parse(vs[j].style);
+        const diff = a.map((x, k) => (x === b[k] ? null : [x, b[k]])).filter(Boolean);
+        if (diff.length === 1) {
+          const [x, y] = diff[0];
+          const nx = parseFloat(x.replace(/^[^\d-]+/, ""));
+          const ny = parseFloat(y.replace(/^[^\d-]+/, ""));
+          if (Number.isFinite(nx) && Number.isFinite(ny) && Math.abs(nx - ny) > 0 && Math.abs(nx - ny) <= Math.max(4, Math.max(nx, ny) * 0.15)) out.push({ a: vs[i].style, b: vs[j].style, differs: `${x} vs ${y}`, examples: [vs[i].example, vs[j].example] });
+        }
+      }
+    return out;
+  };
+
+  // ================= 6. DENSITY =================
+  const density = sections.map((s) => {
+    const area = s.box.width * s.box.height || 1;
+    const ls = leaves.filter((l) => l.section === s.index);
+    const clip = (b) => Math.max(0, Math.min(b.r, s.box.x + s.box.width) - Math.max(b.x, s.box.x)) * Math.max(0, Math.min(b.b, s.box.y + s.box.height) - Math.max(b.y, s.box.y));
+    // Pictures and controls overlap (a screenshot inside a frame), so count their union on a 10px raster.
+    const CELL = 10;
+    const cols = Math.ceil(s.box.width / CELL);
+    const rows = Math.ceil(s.box.height / CELL);
+    const grid = new Uint8Array(Math.max(1, cols * rows));
+    const paint = (b, v) => {
+      const x0 = Math.max(0, Math.floor((b.x - s.box.x) / CELL));
+      const x1 = Math.min(cols, Math.ceil((b.r - s.box.x) / CELL));
+      const y0 = Math.max(0, Math.floor((b.y - s.box.y) / CELL));
+      const y1 = Math.min(rows, Math.ceil((b.b - s.box.y) / CELL));
+      let n = 0;
+      for (let y = y0; y < y1; y++) for (let x = x0; x < x1; x++) if (!grid[y * cols + x]) {
+        grid[y * cols + x] = v;
+        n++;
+      }
+      return n * CELL * CELL;
+    };
+    let mediaInk = 0;
+    let ctlInk = 0;
+    let textInk = 0;
+    for (const l of ls) if (l.kind === "media" && clip(l.b) > 0) mediaInk += paint(l.b, 1);
+    for (const l of ls) if ((l.kind === "control" || l.kind === "input") && clip(l.b) > 0) ctlInk += paint(l.b, 2);
+    for (const l of ls) if (l.kind === "text") for (const ln of l.t.lines) textInk += paint({ x: ln.l, r: ln.r, y: ln.t, b: ln.b }, 3) * 0.6;
+    // The tallest band with nothing in it (inside the content, not the padding).
+    const spans = ls.map((l) => [l.b.y, l.b.b]).sort((a, b) => a[0] - b[0]);
+    let hole = 0;
+    let holeAt = null;
+    let reach = spans[0]?.[1] ?? 0;
+    for (const [a, b] of spans.slice(1)) {
+      if (a - reach > hole) {
+        hole = a - reach;
+        holeAt = Math.round(reach);
+      }
+      reach = Math.max(reach, b);
+    }
+    return {
+      section: s.index,
+      name: s.name,
+      chrome: s.chrome,
+      height: Math.round(s.box.height),
+      ink: Math.min(100, Math.round(((textInk + mediaInk + ctlInk) / area) * 100)),
+      textInk: Math.round((textInk / area) * 100),
+      mediaInk: Math.round((mediaInk / area) * 100),
+      ctlInk: Math.round((ctlInk / area) * 100),
+      words: texts.filter((t) => t.section === s.index).reduce((a, t) => a + t.words, 0),
+      items: ls.length,
+      emptiestRun: Math.round(hole),
+      emptiestAt: holeAt,
+    };
+  });
+
+  return {
+    viewport: { width: vw, height: vh },
+    pageHeight: pageH,
+    bodySize,
+    sections: sections.map((s) => ({ index: s.index, name: s.name, tag: s.tag, chrome: s.chrome, box: s.box })),
+    counts: { texts: texts.length, controls: controls.length, inputs: inputs.length, media: media.length, cards: cards.length },
+    mockups: mocks.slice(0, 8).map((m) => ({ texts: tally2.get(m).n, ...off(m, box(m), snippet(m).slice(0, 40)) })),
+    alignment: {
+      pageLines: pageLines.slice(0, 5).map((c) => ({ x: c.x, items: c.n, sections: c.sections })),
+      sections: alignSections,
+      nearMisses: nearMisses.sort((a, b) => b.lineCount - a.lineCount).slice(0, 24),
+      mixed,
+      ragged: ragged.slice(0, 12),
+    },
+    hierarchy: { h1Count: h1s.length, h1: h1s.slice(0, 3).map((t) => off(t.el, t.ink, t.text.slice(0, 60))), scopes },
+    spacing: { ...spacing, proximity: proximity.slice(0, 16), sectionPadding },
+    type: {
+      bodySize,
+      sizes: sizeTally.sort((a, b) => b.size - a.size),
+      scale: bestScale ? { ratio: bestScale.ratio, fit: bestScale.fit.length, of: sizes.length, outside: sizes.filter((s) => !bestScale.fit.includes(s)) } : null,
+      closeSizes,
+      families,
+      weights,
+      measure,
+      lineHeight,
+      looseDisplay,
+      tightDisplay: tightDisplay.slice(0, 4),
+      capsNoTracking: capsNoTracking.slice(0, 12),
+      longHeadings,
+      widows,
+    },
+    consistency: {
+      radii,
+      concentric,
+      nestedRadii: nestedRadii.slice(0, 10),
+      borders,
+      dividers,
+      shadows,
+      colors,
+      variants: {
+        buttons,
+        cards: cardVariants,
+        inputs: inputVariants,
+        near: { buttons: nearVariants(buttons), cards: nearVariants(cardVariants), inputs: nearVariants(inputVariants) },
+      },
+    },
+    density,
+  };
+};