@palate/cli 0.0.0-stage → 0.0.2

package/src/page-look.js

@@ -0,0 +1,698 @@
+// Runs inside the page (read as text and evaluated) with { sections }. Measures the page's visual language, not
+// its structure: the ground under each section, grain or paper texture, the display and body faces, the primary
+// call to action and its partner, the header's pattern, how the hero is composed, how its main object is framed,
+// the kind of imagery the page leans on, and how much of it carries ink. Returns raw facts and a few classes the
+// DOM alone can tell; src/loop/lookvec.mjs turns colours and families into the look vector. Boxes are in page
+// coordinates (the script scrolls to the top first, so a sticky header sits where it starts).
+({ sections }) => {
+  window.scrollTo({ top: 0, behavior: "instant" });
+  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 (the same helper as page-gate.js, page-rules.js …: any computed CSS colour as [r, g, b, a])
+  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);
+  };
+  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 {
+      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;
+          v = [d[0], d[1], d[2], fromSpace(got)?.[3] ?? d[3] / 255];
+        }
+      } else v = fromSpace(s);
+    }
+    colourMemo.set(s, v);
+    return v;
+  };
+  const colourStops = (bi) => (String(bi ?? "").match(/(?:rgba?|hsla?|oklab|oklch|lab|lch|color)\([^()]*\)|#[0-9a-f]{3,8}\b/gi) ?? []).map(toRgba).filter(Boolean);
+  const 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]));
+  const bgMemo = new Map();
+  // The colour painted behind an element: its own background and its ancestors', composited (gradients count by
+  // their average stop, so a page painted with a soft gradient still has a ground).
+  const ownBg = (cs) => {
+    const c = rgba(cs.backgroundColor);
+    if (c && c[3] >= 0.5) return c;
+    const stops = cs.backgroundImage && cs.backgroundImage !== "none" && !/url\(/.test(cs.backgroundImage) ? colourStops(cs.backgroundImage).filter((s) => s[3] >= 0.9) : [];
+    if (stops.length >= 2) return [0, 1, 2].map((i) => stops.reduce((x, s) => x + s[i], 0) / stops.length).concat(1);
+    return c;
+  };
+  const paintedBg = (el) => {
+    if (!el || el.nodeType !== 1) return [255, 255, 255];
+    if (bgMemo.has(el)) return bgMemo.get(el);
+    const own = ownBg(getComputedStyle(el));
+    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;
+  };
+  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" && cs.visibility !== "hidden" && parseFloat(cs.opacity) > 0.05 && shown(el.parentElement);
+    visMemo.set(el, v);
+    return v;
+  };
+  const pbox = (r) => ({ x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height });
+  const boxOf = (el) => pbox(el.getBoundingClientRect());
+  const area = (b) => Math.max(0, b.w) * Math.max(0, b.h);
+  const inter = (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 clean = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+  // Box shadows, layer by layer (Tailwind writes transparent "0 0 0 0" layers before the real one): a soft
+  // shadow (blur or offset, not inset) and a ring (0 blur, a spread, no offset: a border drawn as a shadow).
+  const shadowLayers = (v) => {
+    if (!v || v === "none") return [];
+    const out = [];
+    let depth = 0, cur = "";
+    for (const ch of v + ",") {
+      if (ch === "(") depth++;
+      if (ch === ")") depth--;
+      if (ch === "," && depth === 0) {
+        const t = cur.trim();
+        cur = "";
+        if (!t) continue;
+        const colour = (t.match(/(?:rgba?|hsla?|oklab|oklch|lab|lch|color)\([^()]*\)|#[0-9a-f]{3,8}(?![0-9a-f])/i) ?? [])[0];
+        const nums = t.replace(colour ?? "", "").match(/-?[\d.]+px|(?<![\d.])0(?![\d.])/g) ?? [];
+        const [x, y, blur, spread] = nums.map((n) => parseFloat(n)).concat([0, 0, 0, 0]);
+        out.push({ alpha: colour ? toRgba(colour)?.[3] ?? 1 : 1, x, y, blur, spread, inset: /inset/.test(t) });
+      } else cur += ch;
+    }
+    return out;
+  };
+  const shadowOf = (cs) => shadowLayers(cs.boxShadow).some((l) => !l.inset && l.alpha >= 0.03 && (l.blur >= 2 || Math.abs(l.y) >= 2));
+  const ringOf = (cs) => shadowLayers(cs.boxShadow).some((l) => l.alpha >= 0.05 && l.blur < 1 && l.spread >= 0.5 && !l.x && !l.y);
+  const borderSides = (el, cs) => {
+    const under = paintedBg(el.parentElement);
+    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 || (ringOf(cs) ? 4 : 0);
+  };
+  const firstScreen = { x: 0, y: 0, w: docW, h: vh };
+
+  // ---- everything visible, once
+  const els = [];
+  for (const el of document.body.querySelectorAll("*")) {
+    if (SKIP.has(el.tagName) || el.parentElement?.closest("svg")) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width < 1 || r.height < 1 || r.right < 0 || r.left > docW) continue;
+    if (!shown(el)) continue;
+    els.push({ el, b: pbox(r), cs: getComputedStyle(el), tag: el.tagName.toLowerCase() });
+  }
+
+  // ---- media: images, video, canvas, big svg, background images (texture told apart from pictures)
+  const TEXTURE_URL = /noise|grain|paper|texture|turbulence|fractalnoise|fibre|fiber|speckle|dither/i;
+  const media = [];
+  let texture = false;
+  const textureWhy = [];
+  const SVG_URL = /\.svg(\?|#|$)|^data:image\/svg/i;
+  const noisy = (url) => {
+    let d = url;
+    try {
+      d = decodeURIComponent(url);
+    } catch {}
+    return TEXTURE_URL.test(url) || /feTurbulence/i.test(d.slice(0, 8000));
+  };
+  const bigOver = (b, share) => b.w >= 0.3 * docW && b.h >= 0.3 * vh && area(b) >= share * docW * vh;
+  for (const { el, b, cs, tag } of els) {
+    if (["img", "video", "canvas", "picture", "iframe"].includes(tag) || (tag === "svg" && b.w >= 120 && b.h >= 90)) {
+      if (tag === "picture") continue;
+      if (b.w * b.h < 6000) continue;
+      const src = tag === "img" ? el.currentSrc || el.src || "" : "";
+      const kind = tag === "svg" || /\.svg(\?|$)|^data:image\/svg/i.test(src) ? "illustration" : tag === "canvas" ? "canvas" : tag === "iframe" ? "embed" : "photo";
+      const op = parseFloat(cs.opacity);
+      // A grain layer drawn as an image (a tiled noise PNG, an SVG of feTurbulence over the page).
+      if ((TEXTURE_URL.test(src) || (tag === "svg" && el.querySelector("feTurbulence"))) && bigOver(b, 0.15)) {
+        texture = true;
+        textureWhy.push(`${tag} ${TEXTURE_URL.test(src) ? src.split("/").pop().slice(0, 40) : "feTurbulence"}`);
+        continue;
+      }
+      if (op < 0.2) continue;
+      media.push({ b, kind, tag, alt: el.getAttribute?.("alt") ?? "", src: src.slice(0, 120), el });
+      continue;
+    }
+    const layers = [[cs, b, el === document.body]];
+    for (const pseudo of ["::before", "::after"]) {
+      const ps = getComputedStyle(el, pseudo);
+      if (!ps.content || ps.content === "none" || ps.content === "normal" || ps.display === "none") continue;
+      const w = parseFloat(ps.width), h = parseFloat(ps.height);
+      const pb = Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0 ? { x: b.x, y: b.y, w: Math.min(w, docW), h } : b;
+      layers.push([ps, pb, true]);
+    }
+    for (const [s, lb, overlay] of layers) {
+      const bi = s.backgroundImage;
+      const filt = String(s.filter ?? "") + String(s.backdropFilter ?? "");
+      if (/url\(/.test(filt) && bigOver(lb, 0.15)) {
+        texture = true;
+        textureWhy.push(`${tag} filter`);
+      }
+      if (!bi || bi === "none" || !/url\(/.test(bi)) continue;
+      const url = (bi.match(/url\("?([^")]*)"?\)/) ?? [])[1] ?? "";
+      const tiled = !/no-repeat/.test(s.backgroundRepeat) && /^\d/.test(s.backgroundSize) && parseFloat(s.backgroundSize) <= 600;
+      const faint = parseFloat(s.opacity) < 0.6 || (s.mixBlendMode && s.mixBlendMode !== "normal");
+      // Grain: named so (noise, paper, grain …), an SVG of feTurbulence, or a tiled or faint raster overlay. An SVG
+      // tile without noise is a pattern (dots, a grid), not grain, and not imagery either.
+      const svgUrl = SVG_URL.test(url);
+      const isTexture = noisy(url) || (!svgUrl && ((tiled && (overlay || lb.w * lb.h >= 0.3 * docW * vh)) || (overlay && faint)));
+      if (!isTexture && svgUrl && tiled) continue;
+      if (isTexture) {
+        if (bigOver(lb, 0.1) || el === document.body || el === document.documentElement) {
+          texture = true;
+          textureWhy.push(`${tag}${s === cs ? "" : " pseudo"} ${url.slice(0, 50)}`);
+        }
+        continue;
+      }
+      if (lb.w * lb.h >= 6000) media.push({ b: lb, kind: /\.svg(\?|$)|^data:image\/svg/i.test(url) ? "illustration" : "photo", tag: "background-image", src: url.slice(0, 120), el });
+    }
+  }
+  // The root's own background image (body/html are not in els' pseudo pass when html carries it).
+  for (const [root, pseudo] of [document.documentElement, document.body].flatMap((r) => [[r, null], [r, "::before"], [r, "::after"]])) {
+    const cs = getComputedStyle(root, pseudo);
+    if (pseudo && (!cs.content || cs.content === "none" || cs.content === "normal" || cs.display === "none")) continue;
+    const url = (cs.backgroundImage.match(/url\("?([^")]*)"?\)/) ?? [])[1] ?? "";
+    if (url && (noisy(url) || !SVG_URL.test(url))) {
+      texture = true;
+      textureWhy.push(`${root.tagName.toLowerCase()} background`);
+    }
+  }
+  if (!texture && document.querySelector("feTurbulence")) {
+    const f = document.querySelector("feTurbulence").closest("filter");
+    if (f?.id && els.some(({ cs, b }) => String(cs.filter).includes(f.id) && bigOver(b, 0.1))) {
+      texture = true;
+      textureWhy.push("feTurbulence filter");
+    }
+  }
+
+  // ---- section grounds: the deepest element that covers most of a section and paints an opaque ground
+  const sectionEls = sections.map((s) => {
+    try {
+      return document.querySelector(s.selector);
+    } catch {
+      return null;
+    }
+  });
+  const rootBg = paintedBg(document.body);
+  const photoIn = (b, share) => media.filter((m) => m.kind === "photo" && m.b.w >= 0.85 * docW && inter(m.b, b) >= share * area(b));
+  const bands = sections.map((s, i) => {
+    const sb = { x: 0, y: s.box.y, w: docW, h: s.box.height };
+    let best = sectionEls[i] ?? null;
+    let bg = best ? paintedBg(best) : rootBg;
+    // A full-width child that covers most of the section with its own ground (a coloured inner panel).
+    for (const { el, b, cs } of els) {
+      if (b.y > sb.y + sb.h || b.y + b.h < sb.y) continue;
+      if (inter(b, sb) < 0.7 * area(sb) || b.w < 0.9 * docW) continue;
+      const own = ownBg(cs);
+      if (own && own[3] >= 0.6 && (!best || best.contains(el) || !el.contains(best))) {
+        bg = paintedBg(el);
+        best = el;
+      }
+    }
+    const photo = photoIn(sb, 0.6).length > 0;
+    return { y: Math.round(sb.y), h: Math.round(sb.h), name: s.name, bg: hex(bg), photo };
+  });
+
+  // ---- the header: a band at the top with links
+  const navLinks = (root) =>
+    [...root.querySelectorAll("a, button, [role=button]")].filter((a) => {
+      if (!shown(a)) return false;
+      const r = a.getBoundingClientRect();
+      return r.width >= 8 && r.height >= 8 && r.top < 200 && clean(a.textContent || a.getAttribute("aria-label")).length <= 40;
+    });
+  let headerEl = [...document.querySelectorAll("header, [role=banner], nav")].map((el) => ({ el, r: el.getBoundingClientRect() })).filter(({ el, r }) => shown(el) && r.top < 140 && r.height > 20 && r.height < 0.4 * vh && r.width > 0.4 * docW && navLinks(el).length >= 1).sort((a, b) => a.r.top - b.r.top || b.r.width - a.r.width)[0]?.el ?? null;
+  // No landmark (a floating bar of divs, a narrow <nav>): the smallest element that holds the links along the top.
+  if (!headerEl) {
+    const top = navLinks(document.body).filter((a) => a.getBoundingClientRect().top < 120);
+    if (top.length >= 2) {
+      let lca = top[0].parentElement;
+      while (lca && lca !== document.body && !top.every((a) => lca.contains(a))) lca = lca.parentElement;
+      const r = lca?.getBoundingClientRect();
+      if (lca && lca !== document.body && r.height < 0.4 * vh) headerEl = lca;
+    }
+  }
+  // A vertical side bar: fixed or sticky, at the left or right edge, most of the screen tall, narrow.
+  const side = els.find(({ cs, b, el }) => /fixed|sticky/.test(cs.position) && b.h >= 0.7 * vh && b.w <= 340 && (b.x <= 4 || b.x + b.w >= docW - 4) && navLinks(el).length >= 3);
+  let header = { pattern: "none", cta: "none", logo: null, links: 0 };
+  const btnStyle = (el) => {
+    if (!el) return null;
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    const under = paintedBg(el.parentElement);
+    const own = rgba(cs.backgroundColor);
+    const grad = cs.backgroundImage && cs.backgroundImage !== "none" && !/url\(/.test(cs.backgroundImage) && colourStops(cs.backgroundImage).length >= 2;
+    const radius = parseFloat(cs.borderTopLeftRadius) || 0;
+    const shape = radius >= r.height / 2 - 1.5 ? "pill" : radius <= 3 ? "square" : "rounded";
+    let style;
+    const stops = grad ? colourStops(cs.backgroundImage).filter((c) => c[3] >= 0.9) : [];
+    // A gradient is a CTA's look only when its ends differ clearly (not a sheen of one colour over itself).
+    const hueOf = (c) => Math.atan2(Math.sqrt(3) * (c[1] - c[2]), 2 * c[0] - c[1] - c[2]) * (180 / Math.PI);
+    const ends = stops.length >= 2 ? [stops[0], stops[stops.length - 1]] : null;
+    const fillRgb = own && own[3] >= 0.5 ? over(own, under) : stops.length ? stops[0] : null;
+    const fillDist = fillRgb ? dist(fillRgb, under) : 0;
+    const ringed = borderSides(el, cs) >= 3;
+    if (ends && (dist(ends[0], ends[1]) > 70 || (Math.min(Math.abs(hueOf(ends[0]) - hueOf(ends[1])), 360 - Math.abs(hueOf(ends[0]) - hueOf(ends[1]))) > 40 && dist(ends[0], ends[1]) > 30))) style = "gradient";
+    else if (fillDist > 45) style = `solid-${shape}`;
+    else if (ringed || (fillDist > 0 && shadowOf(cs))) style = "outline";
+    else if (fillDist > 18) style = `solid-${shape}`;
+    else {
+      const underline = /underline/.test(cs.textDecorationLine) || (parseFloat(cs.borderBottomWidth) >= 1 && !/none/.test(cs.borderBottomStyle));
+      style = underline ? "text-link-underlined" : "text-link";
+    }
+    const fill = style.startsWith("solid") || style === "gradient" ? (fillRgb ? fillRgb.slice(0, 3) : null) : style === "outline" ? rgba(cs.borderTopColor)?.slice(0, 3) ?? null : rgba(cs.color)?.slice(0, 3) ?? null;
+    return { style, shape, fill: hex(fill), text: clean(el.textContent).slice(0, 40), box: pbox(r), radius: Math.round(radius) };
+  };
+  if (side) header = { pattern: "side", cta: "none", logo: null, links: navLinks(side.el).length };
+  else if (headerEl) {
+    // Widen to the band the nav sits in (a <nav> inside a header wrapper).
+    while (headerEl.parentElement && headerEl.parentElement !== document.body && headerEl.parentElement.getBoundingClientRect().height < 0.6 * vh && headerEl.parentElement.getBoundingClientRect().top < 140 && navLinks(headerEl.parentElement).length > navLinks(headerEl).length) headerEl = headerEl.parentElement;
+    const hr = headerEl.getBoundingClientRect();
+    const links = navLinks(headerEl).filter((a) => !a.parentElement.closest("[hidden]"));
+    const logoEl = headerEl.querySelector('a[href="/"], a[href="./"], a[href="#top"], a[href="#"], [class*=logo i], [class*=brand i], [aria-label*=home i], [class*=wordmark i]') ?? links.slice().sort((a, b) => a.getBoundingClientRect().left - b.getBoundingClientRect().left)[0] ?? null;
+    const lr = logoEl?.getBoundingClientRect();
+    const others = links.filter((a) => a !== logoEl && !logoEl?.contains(a) && !a.contains(logoEl));
+    const styles = others.map((a) => ({ a, s: btnStyle(a), r: a.getBoundingClientRect() }));
+    const ctaCand = styles.filter((x) => !x.s.style.startsWith("text-link")).sort((a, b) => b.r.right - a.r.right)[0] ?? null;
+    const plain = styles.filter((x) => x !== ctaCand);
+    const mid = docW / 2;
+    const logoCentred = lr && Math.abs(lr.left + lr.width / 2 - mid) < 0.08 * docW;
+    const leftLinks = plain.filter((x) => x.r.right < mid - 40).length, rightLinks = plain.filter((x) => x.r.left > mid + 40).length;
+    let pattern;
+    if (logoCentred && leftLinks >= 1 && rightLinks >= 1) pattern = "split";
+    else if (logoCentred) pattern = "centred-wordmark";
+    else if (plain.length >= 2) pattern = "logo-left-nav-cta";
+    else pattern = "logo-cta";
+    // Over an image: the header has no ground of its own and a full-bleed picture sits under it.
+    const hcs = getComputedStyle(headerEl);
+    const ownH = rgba(hcs.backgroundColor);
+    const hb = pbox(hr);
+    if ((!ownH || ownH[3] < 0.5) && photoIn({ x: 0, y: hb.y, w: docW, h: Math.max(hb.h, 40) }, 0.8).length) pattern = "overlay";
+    const ctaStyle = ctaCand ? (ctaCand.s.style === "outline" && ctaCand.s.shape === "pill" ? "outline-pill" : ctaCand.s.style) : others.length ? "text-link" : "none";
+    header = { pattern, cta: ctaStyle, ctaText: ctaCand?.s.text ?? null, logo: lr ? { x: Math.round(lr.left), w: Math.round(lr.width), text: clean(logoEl.textContent).slice(0, 30) } : null, links: plain.length, height: Math.round(hr.height), bottom: Math.round(hb.y + hb.h) };
+  } else {
+    const top = navLinks(document.body).filter((a) => a.getBoundingClientRect().top < 120);
+    if (top.length >= 2) header = { pattern: "logo-left-nav-cta", cta: "text-link", logo: null, links: top.length, bottom: 100 };
+  }
+  const headerBottom = header.bottom ?? (side ? 0 : 0);
+
+  // ---- type: the headline and the body face
+  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, code, pre")) continue;
+    if (!shown(p)) continue;
+    const cs = getComputedStyle(p);
+    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;
+    texts.push({ el: p, text: t, rects, cs, size: parseFloat(cs.fontSize) });
+  }
+  const inFirst = (b) => b.y < vh && b.y + b.h > Math.max(0, headerBottom - 4) && b.x < docW && b.x + b.w > 0;
+  const h1 = [...document.querySelectorAll("h1")].find((h) => shown(h) && inFirst(boxOf(h)) && clean(h.textContent).length > 1);
+  let headEl = h1 ?? null;
+  if (!headEl) {
+    const big = texts.filter((t) => t.rects.some(inFirst) && !(headerEl && headerEl.contains(t.el))).sort((a, b) => b.size - a.size)[0];
+    headEl = big?.el ?? null;
+  }
+  // The headline's own text style: its largest text node (a headline with one word in a span keeps its face).
+  let display = null;
+  if (headEl) {
+    const own = texts.filter((t) => headEl.contains(t.el)).sort((a, b) => b.size * b.text.length - a.size * a.text.length)[0];
+    const cs = own?.cs ?? getComputedStyle(headEl);
+    const size = parseFloat(cs.fontSize);
+    const txt = clean(headEl.textContent);
+    const letters = txt.replace(/[^A-Za-zÀ-ÿ]/g, "");
+    const ls = cs.letterSpacing === "normal" ? 0 : parseFloat(cs.letterSpacing) / size;
+    display = {
+      family: cs.fontFamily,
+      weight: Number(cs.fontWeight) || 400,
+      upper: cs.textTransform === "uppercase" || (letters.length >= 3 && letters === letters.toUpperCase()),
+      italic: /italic|oblique/.test(cs.fontStyle),
+      size: Math.round(size),
+      tracking: +ls.toFixed(3),
+      align: getComputedStyle(headEl).textAlign,
+      text: txt.slice(0, 80),
+      box: boxOf(headEl),
+      colour: hex(rgba(cs.color)),
+    };
+  }
+  // Body: the family that sets the most characters of running text (paragraph-sized, outside headings and nav).
+  const bodyFam = new Map();
+  for (const t of texts) {
+    if (t.size < 13 || t.size > 24 || t.el.closest("h1, h2, h3, nav, footer, button, a[role=button], code, pre") || (headerEl && headerEl.contains(t.el))) continue;
+    if (t.text.trim().length < 20) continue;
+    bodyFam.set(t.cs.fontFamily, (bodyFam.get(t.cs.fontFamily) ?? 0) + t.text.length);
+  }
+  const body = [...bodyFam.entries()].sort((a, b) => b[1] - a[1])[0]?.[0] ?? getComputedStyle(document.body).fontFamily;
+
+  // ---- the hero: the first section below the header, measured on the first screen
+  const heroSec = sections.find((s) => s.box.y + s.box.height > headerBottom + 20 && !/^(header|nav)$/i.test(s.tag ?? "") && s.name !== "Navigation") ?? sections[0];
+  const heroBox = heroSec ? { x: 0, y: Math.max(heroSec.box.y, headerBottom), w: docW, h: Math.min(heroSec.box.height, vh * 1.1) } : { x: 0, y: headerBottom, w: docW, h: vh };
+  const fold = { x: 0, y: headerBottom, w: docW, h: Math.max(200, vh - headerBottom) };
+  // Primary action: buttons and button-like links in the first screen, outside the header.
+  const actions = [...document.querySelectorAll("a, button, [role=button], input[type=submit]")]
+    .filter((a) => shown(a) && !(headerEl && headerEl.contains(a)) && !(side && side.el.contains(a)))
+    .map((a) => ({ a, r: a.getBoundingClientRect() }))
+    .filter(({ r }) => r.width >= 40 && r.width <= 520 && r.height >= 14 && r.height <= 96 && r.top < vh - 10 && r.top + scrollY >= headerBottom - 4)
+    .map(({ a }) => ({ a, s: btnStyle(a) }))
+    .filter((x) => x.s.text.length >= 2);
+  const rank = (s) => (s.style === "gradient" || s.style.startsWith("solid") ? 3 : s.style === "outline" ? 2 : 1);
+
+  // The hero's object: the biggest picture or framed surface in the first screen that doesn't hold the headline.
+  const holdsHead = (el) => headEl && (el.contains(headEl) || headEl.contains(el));
+  const objects = [];
+  for (const m of media) {
+    const vis = inter(m.b, fold);
+    if (vis < 0.03 * area(fold)) continue;
+    // A picture behind the headline (a glow, a wash, a full-bleed photo) is the hero's backdrop, not its object.
+    if (display && inter(m.b, display.box) >= 0.7 * area(display.box)) continue;
+    objects.push({ b: m.b, kind: m.kind, el: m.el, vis, media: true });
+  }
+  for (const { el, b, cs } of els) {
+    if (b.w < 240 || b.h < 160 || b.w > 0.97 * docW || holdsHead(el)) continue;
+    const vis = inter(b, fold);
+    if (vis < 0.05 * area(fold)) continue;
+    const own = rgba(cs.backgroundColor);
+    const under = paintedBg(el.parentElement);
+    const ground = own && own[3] > 0.3 && dist(over(own, under), under) > 6;
+    const shadow = shadowOf(cs);
+    const sides = borderSides(el, cs);
+    if (!ground && !shadow && sides < 3) continue;
+    // A section's wrapper or the hero's own panel holding the whole text column isn't the object.
+    if (actions.some((x) => el.contains(x.a)) && texts.some((t) => el.contains(t.el) && t.size >= 28)) continue;
+    objects.push({ b, kind: "surface", el, vis, media: false, shadow, sides, ground });
+  }
+  // Prefer the outermost frame of the biggest thing: a card that holds the screenshot is the object.
+  objects.sort((a, b) => b.vis - a.vis);
+  let object = objects[0] ?? null;
+  if (object) {
+    const outer = objects.find((o) => o !== object && !o.media && o.el.contains(object.el) && area(o.b) <= 2.2 * area(object.b));
+    if (outer) object = outer;
+  }
+  // The primary action: a button-like control outside the hero's object (a row in a product mock isn't the
+  // page's CTA), strongest style first, then the one nearest the headline.
+  const nearHead = (b) => (display ? Math.hypot(Math.max(0, b.x - (display.box.x + display.box.w), display.box.x - b.x - b.w), Math.max(0, b.y - (display.box.y + display.box.h), display.box.y - b.y - b.h)) : b.y);
+  const outside = actions.filter((x) => !(object && object.el.contains(x.a)));
+  const pool = outside.length ? outside : actions;
+  const primary = pool.slice().sort((x, y) => rank(y.s) - rank(x.s) || nearHead(x.s.box) - nearHead(y.s.box))[0] ?? null;
+  let secondary = "none";
+  if (primary) {
+    const near = pool.filter((x) => x !== primary && Math.abs(x.s.box.y + x.s.box.h / 2 - (primary.s.box.y + primary.s.box.h / 2)) < 50 && Math.abs(x.s.box.x - primary.s.box.x) < 520)[0];
+    if (near) secondary = near.s.style === "text-link-underlined" ? "underlined-link" : near.s.style === "text-link" ? "text-link" : near.s.style === "outline" ? "ghost" : "solid";
+  }
+  // The buttons' anatomy, beyond fill and shape: two pages with the same 48px solid box, the same semi-bold
+  // sentence-case label and the same underlined link beside it share a button whatever their colours.
+  const lumOf = (rgb) => {
+    const f = (v) => {
+      const c = v / 255;
+      return c <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+    };
+    return 0.2126 * f(rgb[0]) + 0.7152 * f(rgb[1]) + 0.0722 * f(rgb[2]);
+  };
+  const ratioOf = (a, b) => {
+    const [x, y] = [lumOf(a), lumOf(b)].sort((p, q) => q - p);
+    return (x + 0.05) / (y + 0.05);
+  };
+  const anatomy = (el, s) => {
+    if (!el || !s) return null;
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    const inside = texts.filter((t) => el.contains(t.el));
+    const main = inside.slice().sort((a, b) => b.text.trim().length * b.size - a.text.trim().length * a.size)[0] ?? null;
+    const codeEl = main ? null : el.querySelector("code, samp, kbd");
+    const lcs = main?.cs ?? (codeEl ? getComputedStyle(codeEl) : cs);
+    const px = parseFloat(lcs.fontSize) || 16;
+    const txt = clean(el.textContent);
+    const letters = clean(main?.text ?? txt).replace(/[^A-Za-zÀ-ÿ]/g, "");
+    const upper = lcs.textTransform === "uppercase" || (letters.length >= 3 && letters === letters.toUpperCase());
+    const tracking = lcs.letterSpacing === "normal" ? 0 : parseFloat(lcs.letterSpacing) / px;
+    const under = paintedBg(el.parentElement);
+    const own = rgba(cs.backgroundColor);
+    const boxed = s.style.startsWith("solid") || s.style === "gradient";
+    const fillRgb = boxed ? (own && own[3] >= 0.5 ? over(own, under) : colourStops(cs.backgroundImage).filter((c) => c[3] >= 0.9)[0]?.slice(0, 3) ?? null) : null;
+    // Underlined: on the control, on its label, or a bottom border standing in for one.
+    let underline = /underline/.test(cs.textDecorationLine) || (parseFloat(cs.borderBottomWidth) >= 1 && !/none/.test(cs.borderBottomStyle) && !(parseFloat(cs.borderTopWidth) >= 1));
+    for (let e = main?.el; e && e !== el.parentElement && !underline; e = e.parentElement) if (/underline/.test(getComputedStyle(e).textDecorationLine)) underline = true;
+    let fill;
+    if (boxed) fill = fillRgb && ratioOf(fillRgb, under) < 1.45 && dist(fillRgb, under) < 90 ? "tinted" : "solid";
+    else if (s.style === "outline") fill = "outline";
+    else fill = underline || s.style === "text-link-underlined" ? "underline" : "ghost";
+    const labelRgb = rgba(lcs.color)?.slice(0, 3) ?? null;
+    // Adornments: a keycap, a detail (a price, a day, a number after a separator), an arrow or an icon.
+    const pr = (n) => pbox(n.getBoundingClientRect());
+    const icons = [...el.querySelectorAll("svg, img, i, [class*=icon i]")].filter((i) => {
+      const b = i.getBoundingClientRect();
+      return shown(i) && b.width >= 6 && b.width <= 40 && b.height <= 40 && !(i.parentElement?.closest("svg"));
+    });
+    const key = [...el.querySelectorAll("kbd, [class*=kbd i], [class*=keycap i], [class*=shortcut i]")].find((k) => shown(k));
+    const DETAIL = /[£$€¥₹]\s?\d|\d\s?(?:€|kr\b|zł)|[·|•—–]\s*[^·|•—–]*\d/;
+    const detailKid = [...el.children].some((k) => k !== main?.el && /\d/.test(k.textContent ?? "") && clean(k.textContent).length <= 16 && clean(k.textContent) !== txt);
+    let adornment = "none";
+    if (key) adornment = "keycap";
+    else if (DETAIL.test(txt) || detailKid) adornment = "detail";
+    else if (/[→↗↘›»➝➜⟶⇢]|->/.test(txt)) adornment = "arrow";
+    else if (icons.length) {
+      const ib = pr(icons[0]);
+      const tb = main?.rects?.[0] ?? null;
+      adornment = tb && ib.x + ib.w / 2 < tb.x ? "icon" : "arrow";
+    }
+    return {
+      h: Math.round(r.height),
+      w: Math.round(r.width),
+      radius: Math.round(parseFloat(cs.borderTopLeftRadius) || 0),
+      px: Math.round(px * 10) / 10,
+      weight: Number(lcs.fontWeight) || 400,
+      family: lcs.fontFamily,
+      upper,
+      tracking: +tracking.toFixed(3),
+      underline,
+      fill,
+      fillHex: hex(fillRgb),
+      labelHex: hex(labelRgb),
+      contrast: labelRgb ? +ratioOf(labelRgb, fillRgb ?? under).toFixed(2) : null,
+      adornment,
+      // Its edge: a ring (a 1px border or a 0-blur shadow), a soft shadow under it, both, or nothing.
+      edge: [borderSides(el, cs) >= 3 ? "ring" : null, shadowOf(cs) ? "shadow" : null].filter(Boolean).join("+") || "none",
+      text: txt.slice(0, 40),
+    };
+  };
+  let buttons = null;
+  if (primary) {
+    const nearEl = pool.filter((x) => x !== primary && Math.abs(x.s.box.y + x.s.box.h / 2 - (primary.s.box.y + primary.s.box.h / 2)) < 50 && Math.abs(x.s.box.x - primary.s.box.x) < 520)[0] ?? null;
+    buttons = { primary: anatomy(primary.a, primary.s), secondary: nearEl ? anatomy(nearEl.a, nearEl.s) : null, secondaryStyle: secondary };
+  }
+  const bleedPhoto = media.find((m) => (m.kind === "photo" || m.kind === "canvas") && m.b.w >= 0.9 * docW && inter(m.b, firstScreen) >= 0.5 * area(firstScreen));
+  // The ground is a photo only when a picture (not a drawn canvas) covers most of the first screen.
+  const groundPhoto = media.find((m) => m.kind === "photo" && m.b.w >= 0.9 * docW && inter(m.b, firstScreen) >= 0.5 * area(firstScreen));
+  const hb = display?.box ?? null;
+  const cx = (b) => b.x + b.w / 2;
+  let hero = "centred";
+  const galleryItems = media.filter((m) => inter(m.b, fold) >= 0.04 * area(fold) && m.b.w < 0.6 * docW);
+  // Text columns in the hero: paragraph blocks that sit side by side.
+  const paras = [...document.querySelectorAll("p")].filter((p) => shown(p) && inFirst(boxOf(p)) && clean(p.textContent).length > 40).map(boxOf);
+  const colXs = [...new Set(paras.map((b) => Math.round(b.x / 120)))];
+  if (bleedPhoto) hero = "full-bleed";
+  else if (galleryItems.length >= 3 && !galleryItems.some((m) => area(m.b) > 0.3 * area(fold))) hero = "gallery";
+  else if (hb && object) {
+    const tx = cx(hb), ox = cx(object.b);
+    const objShare = inter(object.b, fold) / area(fold);
+    if (object.b.w < 0.75 * docW && tx < 0.48 * docW && ox > 0.52 * docW && object.b.x >= hb.x + hb.w * 0.5) hero = "split";
+    else if (object.b.w < 0.75 * docW && tx > 0.52 * docW && ox < 0.48 * docW) hero = "split-reversed";
+    else if (object.b.y < hb.y - 20 || (objShare >= 0.4 && (display?.size ?? 0) <= 56)) hero = "object-first";
+    else if (object.b.w >= 0.75 * docW && object.b.y > hb.y && objShare >= 0.45 && (display?.size ?? 0) <= 64) hero = "object-first";
+    else if (Math.abs(tx - docW / 2) < 0.1 * docW) hero = "centred";
+    else if (object.b.y >= hb.y + hb.h) hero = Math.abs(tx - docW / 2) < 0.1 * docW ? "centred" : "type-only";
+    else hero = "split";
+  } else if (hb) {
+    if (colXs.length >= 3) hero = "editorial";
+    else if (Math.abs(cx(hb) - docW / 2) < 0.1 * docW && display?.align !== "left") hero = "centred";
+    else hero = "type-only";
+  }
+  if (hero === "type-only" && colXs.length >= 3) hero = "editorial";
+
+  // How the object is framed.
+  let frame = "none";
+  if (hero === "full-bleed") frame = "bleed";
+  else if (hero === "gallery") {
+    // A gallery's frame is its container's: the smallest element that holds three of its pictures.
+    let box = galleryItems[0].el;
+    while (box && box !== document.body && galleryItems.filter((m) => box.contains(m.el)).length < 3) box = box.parentElement;
+    const b = box && boxOf(box);
+    if (!box || box === document.body || b.w >= 0.95 * docW) frame = b && b.w >= 0.95 * docW ? "bleed" : "flat";
+    else {
+      const cs = getComputedStyle(box);
+      const own = rgba(cs.backgroundColor);
+      frame = shadowOf(cs) ? "shadow-card" : borderSides(box, cs) >= 3 || (own && own[3] > 0.5 && dist(over(own, paintedBg(box.parentElement)), paintedBg(box.parentElement)) > 6) ? "border-card" : "flat";
+    }
+  } else if (object) {
+    if (object.b.w >= 0.95 * docW) frame = "bleed";
+    else {
+      // The frame may be the object itself, its wrapper (up to 1.5x its area) or its first child.
+      let f = null;
+      for (let e = object.el, k = 0; e && e !== document.body && k < 4; e = e.parentElement, k++) {
+        const r = boxOf(e);
+        if (area(r) > 1.6 * area(object.b)) break;
+        const cs = getComputedStyle(e);
+        if (shadowOf(cs)) {
+          f = "shadow-card";
+          break;
+        }
+        if (borderSides(e, cs) >= 3) f = f ?? "border-card";
+      }
+      if (!f) {
+        const kid = object.el.firstElementChild;
+        const cs = kid && getComputedStyle(kid);
+        if (cs && shadowOf(cs) && area(boxOf(kid)) >= 0.6 * area(object.b)) f = "shadow-card";
+        else if (cs && borderSides(kid, cs) >= 3 && area(boxOf(kid)) >= 0.6 * area(object.b)) f = "border-card";
+      }
+      if (!f && !object.media && object.ground) f = "border-card";
+      frame = f ?? "flat";
+    }
+  }
+
+  // ---- imagery over the page, by area: pictures, drawings, product UI built in the page
+  const imageryArea = { photo: 0, illustration: 0, "product-ui": 0 };
+  for (const m of media) {
+    const a = area(m.b);
+    if (/screenshot|dashboard|app|interface|\bui\b|product|editor|inbox/i.test(`${m.alt} ${m.src}`) && m.kind === "photo") imageryArea["product-ui"] += a;
+    else if (m.kind === "canvas" || m.kind === "embed") imageryArea["product-ui"] += a * 0.5;
+    else imageryArea[m.kind] = (imageryArea[m.kind] ?? 0) + a;
+  }
+  // Product UI built in HTML: a framed panel of small text, controls and inner boxes (a mock app window, a board).
+  const counted = [];
+  for (const { el, b, cs } of els) {
+    if (b.w < 280 || b.h < 180 || b.w > 0.92 * docW) continue;
+    if (counted.some((c) => c.contains(el))) continue;
+    const framedHere = shadowOf(cs) || borderSides(el, cs) >= 3 || (rgba(cs.backgroundColor)?.[3] ?? 0) > 0.5;
+    if (!framedHere) continue;
+    const inside = texts.filter((t) => el.contains(t.el));
+    const small = inside.filter((t) => t.size <= 14).length;
+    const inner = el.querySelectorAll("button, input, [role=button], [role=tab], [role=row], li, td, [class*=row i], [class*=chip i], [class*=badge i], [class*=pill i]").length;
+    if (small >= 8 && inner >= 4 && !inside.some((t) => t.size >= 34)) {
+      imageryArea["product-ui"] += area(b);
+      counted.push(el);
+    }
+  }
+  const imgTotal = Object.values(imageryArea).reduce((x, y) => x + y, 0);
+
+  // ---- density: ink on a coarse grid over the first three screens (text lines, media, framed surfaces)
+  const cell = 32;
+  const H = Math.min(pageH, vh * 3);
+  const cols = Math.ceil(docW / cell), rows = Math.ceil(H / cell);
+  const grid = new Uint8Array(cols * rows);
+  const mark = (b) => {
+    const x0 = Math.max(0, b.x), y0 = Math.max(0, b.y), x1 = Math.min(docW, b.x + b.w), y1 = Math.min(H, b.y + b.h);
+    if (x1 - x0 < 1 || y1 - y0 < 1) return;
+    for (let r = Math.floor(y0 / cell); r < Math.ceil(y1 / cell); r++) for (let c = Math.floor(x0 / cell); c < Math.ceil(x1 / cell); c++) grid[r * cols + c] = 1;
+  };
+  for (const t of texts) for (const r of t.rects) mark(r);
+  for (const m of media) if (!(m.b.w >= 0.9 * docW && m.b.h >= 0.6 * vh)) mark(m.b);
+  for (const o of objects) if (!o.media) mark(o.b);
+  let inked = 0;
+  for (const v of grid) inked += v;
+  const textChars = texts.filter((t) => t.rects.some((r) => r.y < H)).reduce((x, t) => x + t.text.trim().length, 0);
+
+  // ---- colour in large areas: grounds and surfaces by area, for the accent and how colourful the page is
+  const fills = [];
+  for (const { el, b, cs } of els) {
+    const own = rgba(cs.backgroundColor);
+    if (!own || own[3] < 0.6 || b.w * b.h < 2000) continue;
+    const a = Math.min(area(b), docW * pageH);
+    fills.push({ hex: hex(own), a: Math.round(a) });
+  }
+  for (const b of bands) fills.push({ hex: b.bg, a: b.h * docW, band: true });
+  const textColours = new Map();
+  for (const t of texts) {
+    const h = hex(rgba(t.cs.color));
+    textColours.set(h, (textColours.get(h) ?? 0) + t.text.length * t.size * t.size * 0.6);
+  }
+
+  return {
+    width: docW,
+    pageH,
+    vh,
+    rootBg: hex(rootBg),
+    bands,
+    firstScreenPhoto: Boolean(groundPhoto),
+    texture,
+    textureWhy: textureWhy.slice(0, 4),
+    display,
+    body,
+    header,
+    cta: primary ? { style: primary.s.style, shape: primary.s.shape, fill: primary.s.fill, text: primary.s.text, radius: primary.s.radius } : null,
+    secondary,
+    buttons,
+    hero,
+    heroDebug: { object: object ? { kind: object.kind, b: object.b, tag: object.el.tagName.toLowerCase(), cls: String(object.el.className?.baseVal ?? object.el.className ?? "").slice(0, 60) } : null, head: hb, cols: colXs.length, gallery: galleryItems.length },
+    frame,
+    imagery: { area: imageryArea, share: +(imgTotal / (docW * pageH)).toFixed(3) },
+    ink: +(inked / (cols * rows)).toFixed(3),
+    chars: textChars,
+    fills,
+    textColours: [...textColours.entries()].map(([h, a]) => ({ hex: h, a: Math.round(a) })),
+  };
+};