@palate/cli 0.0.0-stage → 0.0.1

package/src/page-craft.js

@@ -0,0 +1,724 @@
+// Runs inside the page (read as text and evaluated) with { sections, genres }. Measures the craft edge cases
+// that slip past layout checks (palate-site's design retrospective, Nov 2026): photos whose crop cuts the
+// subject (a portrait source in a landscape slot, detail running off a cropped or full-bleed edge, a subject far
+// from a default centred crop), display and script text whose ink is cut by a clip (clip-path on a reveal,
+// overflow, a mask, gradient text), headings and labels that break at a hyphen or inside a word, short labels
+// wrapping onto two lines, and a numbered kicker over a list numbered from 1. Async (images are read through a
+// canvas). Boxes are in page coordinates; sections are page-sections.js's.
+async ({ sections = [], genres = {} } = {}) => {
+  const docW = document.documentElement.clientWidth;
+  const vh = innerHeight;
+  const clean = (s) => String(s ?? "").replace(/\s+/g, " ").trim();
+  const short = (s, n = 60) => {
+    const t = clean(s);
+    return t.length > n ? t.slice(0, n - 1) + "…" : t;
+  };
+  const sectionAt = (yPage) => {
+    const s = sections.find((x) => yPage >= x.box.y && yPage < x.box.y + x.box.height);
+    return s ? { index: s.index, heading: s.heading ?? s.name ?? null } : null;
+  };
+  const secOf = (r) => sectionAt(r.top + scrollY + r.height / 2);
+  const pbox = (r) => ({ x: Math.round(r.left + scrollX), y: Math.round(r.top + scrollY), w: Math.round(r.width), h: Math.round(r.height) });
+  const visible = (el) => {
+    if (!el?.isConnected) return false;
+    if (el.checkVisibility) return el.checkVisibility({ opacityProperty: true, visibilityProperty: true });
+    const cs = getComputedStyle(el);
+    return cs.display !== "none" && cs.visibility !== "hidden" && parseFloat(cs.opacity) > 0;
+  };
+  const px = (v) => parseFloat(v) || 0;
+  const paddingBox = (el, r = el.getBoundingClientRect()) => {
+    const cs = getComputedStyle(el);
+    return { left: r.left + px(cs.borderLeftWidth), top: r.top + px(cs.borderTopWidth), right: r.right - px(cs.borderRightWidth), bottom: r.bottom - px(cs.borderBottomWidth) };
+  };
+  const contentBox = (el, r = el.getBoundingClientRect()) => {
+    const cs = getComputedStyle(el);
+    const p = paddingBox(el, r);
+    return { left: p.left + px(cs.paddingLeft), top: p.top + px(cs.paddingTop), right: p.right - px(cs.paddingRight), bottom: p.bottom - px(cs.paddingBottom) };
+  };
+  const intersect = (a, b) => ({ left: Math.max(a.left, b.left), top: Math.max(a.top, b.top), right: Math.min(a.right, b.right), bottom: Math.min(a.bottom, b.bottom) });
+  const area = (b) => Math.max(0, b.right - b.left) * Math.max(0, b.bottom - b.top);
+
+  // ---- font genre (fontgenre.mjs's lists, passed in): the first family with a known genre wins.
+  const GENRE = new Map();
+  for (const [g, names] of Object.entries(genres)) for (const n of names) if (!GENRE.has(n)) GENRE.set(n, g);
+  const familyGenre = (f) => {
+    if (GENRE.has(f)) return GENRE.get(f);
+    if (/\bmono|code\b/.test(f)) return "mono";
+    if (/script|hand|brush|marker/.test(f)) return "script";
+    if (/display|poster|fatface/.test(f)) return "display";
+    if (f === "cursive") return "script";
+    if (f === "fantasy") return "display";
+    return null;
+  };
+  const genreMemo = new Map();
+  const genreOf = (stack) => {
+    if (genreMemo.has(stack)) return genreMemo.get(stack);
+    let g = "other";
+    for (const p of stack.split(",").map((x) => x.replace(/["']/g, "").trim().toLowerCase()).filter(Boolean)) {
+      const k = familyGenre(p);
+      if (k) {
+        g = k;
+        break;
+      }
+    }
+    genreMemo.set(stack, g);
+    return g;
+  };
+
+  // ---- text helpers
+  const charRects = (node, i) => {
+    const rg = document.createRange();
+    rg.setStart(node, i);
+    rg.setEnd(node, i + 1);
+    return [...rg.getClientRects()].filter((q) => q.width > 0 || q.height > 0);
+  };
+  const nodeRects = (node) => {
+    const rg = document.createRange();
+    rg.selectNodeContents(node);
+    return [...rg.getClientRects()].filter((q) => q.width > 0.5 && q.height > 0.5);
+  };
+  // Distinct lines of a set of rects (one per line fragment).
+  const lineCount = (rects, fs) => {
+    const tops = rects.map((q) => q.top + q.height / 2).sort((a, b) => a - b);
+    let n = 0, last = -Infinity;
+    for (const t of tops) if (t > last + 0.5 * fs) (n++, (last = t));
+    return n;
+  };
+  const textNodes = (root, max = 4000) => {
+    const out = [];
+    const tw = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, { acceptNode: (n) => (/\S/.test(n.data) && !n.parentElement?.closest("script, style, noscript, template, svg") ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT) });
+    for (let n = tw.nextNode(); n && out.length < max; n = tw.nextNode()) out.push(n);
+    return out;
+  };
+  const allText = textNodes(document.body);
+
+  // ================= PHOTO_CROP =================
+  const ICONISH = /logo|icon|favicon|sprite|emoji|badge|wordmark|avatar|flag|qr[-_]?code/i;
+  const PHOTO_EXT = /\.(jpe?g|webp|avif)(\?|#|&|$)|[?&](fm|format)=(jpe?g|webp|avif)/i;
+  // A photo format: the file's own extension (an optimiser's ?url=…png served as WebP is still a PNG), a format
+  // parameter (?fm=jpg), or a JPEG/WebP/AVIF data URL.
+  const jpegish = (src, name) => PHOTO_EXT.test(name) || (!/\.(png|gif|svg)$/i.test(name) && PHOTO_EXT.test(src)) || /^data:image\/(jpe?g|webp|avif)/i.test(src);
+  const urlOf = (bg) => (bg.match(/url\(\s*(['"]?)(.*?)\1\s*\)/) ?? [])[2] ?? null;
+  const fileOf = (u) => {
+    if (!u) return "";
+    if (u.startsWith("data:")) return u.slice(0, 24) + "…";
+    try {
+      const x = new URL(u, location.href);
+      const inner = x.searchParams.get("url");
+      const p = inner ? new URL(inner, location.href).pathname : x.pathname;
+      return decodeURIComponent(p.split("/").filter(Boolean).pop() ?? x.hostname);
+    } catch {
+      return u.slice(-40);
+    }
+  };
+  const loadImage = (u) =>
+    new Promise((res) => {
+      const im = new Image();
+      const t = setTimeout(() => res(null), 3000);
+      im.onload = () => (clearTimeout(t), res(im));
+      im.onerror = () => (clearTimeout(t), res(null));
+      im.src = u;
+    });
+  // One axis of object-position / background-position: a length or a percentage of the free space.
+  const posAxis = (tok, free) => {
+    tok = String(tok ?? "50%").trim();
+    const kw = { left: "0%", top: "0%", center: "50%", right: "100%", bottom: "100%" }[tok];
+    if (kw) tok = kw;
+    if (/%$/.test(tok)) return { off: (parseFloat(tok) / 100) * free, pct: parseFloat(tok) };
+    if (/calc\(/.test(tok)) return { off: free / 2, pct: null };
+    return { off: px(tok), pct: null };
+  };
+  const posPair = (v) => {
+    const t = clean(v).split(" ");
+    if (t.length === 1) return /^(top|bottom)$/.test(t[0]) ? ["50%", t[0]] : [t[0], "50%"];
+    // "right 20% bottom 10px" four-value syntax: not modelled, treated as its keywords.
+    if (t.length >= 3) return [t[0], t[2]];
+    if (/^(top|bottom)$/.test(t[0]) || /^(left|right)$/.test(t[1])) return [t[1], t[0]];
+    return [t[0], t[1]];
+  };
+  // The ancestors that cut the photo (overflow), stopping at the root.
+  const clipChain = (el) => {
+    let box = { left: 0, top: -1e9, right: docW, bottom: 1e9 };
+    for (let a = el.parentElement; a && a !== document.documentElement; a = a.parentElement) {
+      const cs = getComputedStyle(a);
+      const ox = cs.overflowX !== "visible", oy = cs.overflowY !== "visible";
+      if (!ox && !oy) continue;
+      const p = paddingBox(a);
+      box = intersect(box, { left: ox ? p.left : -1e9, right: ox ? p.right : 1e9, top: oy ? p.top : -1e9, bottom: oy ? p.bottom : 1e9 });
+    }
+    return box;
+  };
+
+  // Pixels of the whole source, longer side 96px, or null when the canvas is tainted (cross-origin).
+  const readPixels = (src, nw, nh) => {
+    const k = 96 / Math.max(nw, nh);
+    const w = Math.max(8, Math.round(nw * k)), h = Math.max(8, Math.round(nh * k));
+    const c = document.createElement("canvas");
+    c.width = w;
+    c.height = h;
+    const x = c.getContext("2d", { willReadFrequently: true });
+    try {
+      x.drawImage(src, 0, 0, w, h);
+      return { w, h, data: x.getImageData(0, 0, w, h).data };
+    } catch {
+      return null;
+    }
+  };
+  // Photographic? Opaque (a cut-out product shot is not a photo) and not a few flat colours. A JPEG/WebP/AVIF
+  // source may be mostly one seamless ground (a museum object on grey: 54 colours, top eight 78%); a PNG or GIF
+  // must look like a photo (a screenshot or a flat illustration is a few colours over most of it).
+  const photographic = ({ w, h, data }, jpegish) => {
+    const bins = new Map();
+    let clear = 0;
+    for (let i = 0; i < data.length; i += 4) {
+      if (data[i + 3] < 200) {
+        clear++;
+        continue;
+      }
+      const k = ((data[i] >> 4) << 8) | ((data[i + 1] >> 4) << 4) | (data[i + 2] >> 4);
+      bins.set(k, (bins.get(k) ?? 0) + 1);
+    }
+    const n = w * h - clear;
+    const top8 = [...bins.values()].sort((a, b) => b - a).slice(0, 8).reduce((a, b) => a + b, 0) / Math.max(1, n);
+    const photo = clear / (w * h) < 0.1 && (jpegish ? bins.size >= 32 && top8 <= 0.85 : bins.size >= 48 && top8 < 0.6);
+    return { photo, colours: bins.size, top8: +top8.toFixed(2), clear: +(clear / (w * h)).toFixed(2) };
+  };
+  // Detail energy: Sobel magnitude of luminance, blurred, minus its median (so a flat sky or wall is 0).
+  const energyMap = ({ w, h, data }) => {
+    const g = new Float32Array(w * h);
+    for (let i = 0; i < w * h; i++) g[i] = 0.299 * data[i * 4] + 0.587 * data[i * 4 + 1] + 0.114 * data[i * 4 + 2];
+    const at = (x, y) => g[Math.min(h - 1, Math.max(0, y)) * w + Math.min(w - 1, Math.max(0, x))];
+    let e = new Float32Array(w * h);
+    for (let y = 0; y < h; y++)
+      for (let x = 0; x < w; x++) {
+        const gx = at(x + 1, y - 1) + 2 * at(x + 1, y) + at(x + 1, y + 1) - at(x - 1, y - 1) - 2 * at(x - 1, y) - at(x - 1, y + 1);
+        const gy = at(x - 1, y + 1) + 2 * at(x, y + 1) + at(x + 1, y + 1) - at(x - 1, y - 1) - 2 * at(x, y - 1) - at(x + 1, y - 1);
+        e[y * w + x] = Math.hypot(gx, gy);
+      }
+    for (let pass = 0; pass < 2; pass++) {
+      const b = new Float32Array(w * h);
+      for (let y = 0; y < h; y++)
+        for (let x = 0; x < w; x++) {
+          let s = 0, c = 0;
+          for (let dy = -1; dy <= 1; dy++)
+            for (let dx = -1; dx <= 1; dx++) {
+              const xx = x + dx, yy = y + dy;
+              if (xx < 0 || yy < 0 || xx >= w || yy >= h) continue;
+              s += e[yy * w + xx];
+              c++;
+            }
+          b[y * w + x] = s / c;
+        }
+      e = b;
+    }
+    const med = [...e].sort((a, b) => a - b)[Math.floor(e.length / 2)];
+    for (let i = 0; i < e.length; i++) e[i] = Math.max(0, e[i] - med);
+    return e;
+  };
+  // What the energy says about one crop. win: the visible part of the source, normalised [0,1]. bleed: sides of
+  // the shown photo that run to the viewport edge.
+  const subjectOf = (pix, win, bleed) => {
+    const { w, h } = pix;
+    const e = energyMap(pix);
+    let total = 0, cx = 0, cy = 0;
+    for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) (total += e[y * w + x]), (cx += e[y * w + x] * (x + 0.5)), (cy += e[y * w + x] * (y + 0.5));
+    if (total < 1e-3 * w * h) return { clear: false, why: "no detail to speak of" };
+    cx /= total * w;
+    cy /= total * h;
+    // Concentration: the share of the energy in the busiest quarter of an 8×8 grid (an even texture or an
+    // all-over painting is ~0.25–0.35; a subject against a quieter ground is well above).
+    const G = 8, cells = new Float32Array(G * G);
+    for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) cells[Math.min(G - 1, Math.floor((y / h) * G)) * G + Math.min(G - 1, Math.floor((x / w) * G))] += e[y * w + x];
+    const conc = [...cells].sort((a, b) => b - a).slice(0, 16).reduce((a, b) => a + b, 0) / total;
+    const X0 = Math.max(0, Math.round(win.x0 * w)), X1 = Math.min(w, Math.round(win.x1 * w)), Y0 = Math.max(0, Math.round(win.y0 * h)), Y1 = Math.min(h, Math.round(win.y1 * h));
+    let inside = 0;
+    for (let y = Y0; y < Y1; y++) for (let x = X0; x < X1; x++) inside += e[y * w + x];
+    const meanVis = inside / Math.max(1, (X1 - X0) * (Y1 - Y0));
+    const kept = inside / total;
+    const out = { clear: conc >= 0.4, concentration: +conc.toFixed(2), centroid: [+cx.toFixed(2), +cy.toFixed(2)], kept: +kept.toFixed(2), edges: [] };
+    if (!out.clear) out.why = "detail spread evenly (a texture, a pattern or an all-over painting): no clear subject";
+    if (!(meanVis > 0)) return out;
+    // Edge profile: along the boundary of the window on one side, the mean energy just inside and just outside
+    // (when the crop cut something off there), relative to the window's mean.
+    const edge = (side, cut) => {
+      const horiz = side === "left" || side === "right";
+      const along0 = horiz ? Y0 : X0, along1 = horiz ? Y1 : X1;
+      const span = horiz ? w : h;
+      const d = Math.max(2, Math.round(0.06 * span));
+      const b = { left: X0, right: X1, top: Y0, bottom: Y1 }[side];
+      const dirIn = side === "left" || side === "top" ? 1 : -1;
+      const mean = (t, from, to) => {
+        let s = 0, c = 0;
+        for (let k = Math.max(0, Math.min(from, to)); k < Math.min(span, Math.max(from, to)); k++) (s += horiz ? e[t * w + k] : e[k * w + t]), c++;
+        return c ? s / c : 0;
+      };
+      let run = 0, best = 0, sum = 0, bestSum = 0, gap = 0;
+      for (let t = along0; t < along1; t++) {
+        const pin = mean(t, b, b + dirIn * d) / meanVis;
+        const v = cut ? Math.min(pin, mean(t, b, b - dirIn * d) / meanVis) : pin;
+        const hot = v > (cut ? 1.5 : 1.8);
+        if (hot) (run += 1 + gap), (sum += v), (gap = 0);
+        else if (run && gap < 1) gap++;
+        else (run = 0), (sum = 0), (gap = 0);
+        if (run > best) (best = run), (bestSum = sum);
+      }
+      const len = Math.max(1, along1 - along0);
+      return { side, kind: cut ? "cut" : "bleed", run: +(best / len).toFixed(2), score: +(best ? bestSum / best : 0).toFixed(2) };
+    };
+    const cutSides = { left: win.x0 > 0.02, right: win.x1 < 0.98, top: win.y0 > 0.02, bottom: win.y1 < 0.98 };
+    for (const side of ["left", "right", "top", "bottom"]) {
+      if (cutSides[side]) {
+        const r = edge(side, true);
+        if (r.run >= 0.15 && r.score >= 1.5) out.edges.push({ ...r, bleed: bleed.includes(side) });
+      } else if (bleed.includes(side)) {
+        const r = edge(side, false);
+        if (r.run >= 0.25 && r.score >= 1.8) out.edges.push({ ...r, bleed: true });
+      }
+    }
+    // A better position along the cropped axis: the window centred on the energy, if it keeps clearly more.
+    const keptAlong = (horiz, a0, s) => {
+      let k = 0;
+      const A0 = Math.round(a0 * (horiz ? w : h)), A1 = Math.round((a0 + s) * (horiz ? w : h));
+      for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) if ((horiz ? x : y) >= A0 && (horiz ? x : y) < A1) k += e[y * w + x];
+      return k / total;
+    };
+    for (const horiz of [true, false]) {
+      const s = horiz ? win.x1 - win.x0 : win.y1 - win.y0;
+      if (s > 0.85) continue;
+      const c = horiz ? cx : cy;
+      const p = Math.max(0, Math.min(1, (c - s / 2) / (1 - s)));
+      const now = keptAlong(horiz, horiz ? win.x0 : win.y0, s), then = keptAlong(horiz, p * (1 - s), s);
+      if (then - now >= 0.1) out.better = { axis: horiz ? "x" : "y", pct: Math.round(p * 100), keptNow: +now.toFixed(2), keptThen: +then.toFixed(2) };
+    }
+    return out;
+  };
+
+  // How much of a shown photo sits behind other content (cards, copy, a form): sampled with elementFromPoint on
+  // a 7×7 grid, scrolling the photo into view. Overlays with pointer-events: none and bare wrappers don't count.
+  const startY = scrollY;
+  const opaque = (el) => {
+    const cs = getComputedStyle(el);
+    const bg = cs.backgroundColor;
+    return !(bg === "transparent" || /rgba\([^)]*,\s*0\)$/.test(bg) || /\/\s*0\)$/.test(bg)) || cs.backgroundImage !== "none" || px(cs.borderTopWidth) > 0;
+  };
+  const ownText = (el) => [...el.childNodes].some((n) => n.nodeType === 3 && /\S/.test(n.data));
+  const coveredShare = (el, vis) => {
+    const pageTop = vis.top + scrollY;
+    const h = vis.bottom - vis.top;
+    window.scrollTo({ top: Math.max(0, pageTop + h / 2 - vh / 2), behavior: "instant" });
+    let n = 0, hidden = 0;
+    for (let i = 0; i < 7; i++)
+      for (let j = 0; j < 7; j++) {
+        const x = vis.left + ((i + 0.5) / 7) * (vis.right - vis.left);
+        const y = pageTop - scrollY + ((j + 0.5) / 7) * h;
+        if (y < 0 || y > vh || x < 0 || x > docW) continue;
+        n++;
+        const hit = document.elementFromPoint(x, y);
+        if (!hit || hit === el || hit.contains(el)) continue;
+        if (ownText(hit) || opaque(hit) || /^(IMG|VIDEO|CANVAS|INPUT|BUTTON|TEXTAREA|SELECT)$/.test(hit.tagName) || hit.closest("svg")) hidden++;
+      }
+    return n ? hidden / n : 0;
+  };
+  const photos = [];
+  const unread = [];
+  const seen = new Set();
+  const consider = async ({ el, kind, src, nw, nh, box, fit, position, imgEl }) => {
+    // A tiny source stretched over a box is a blur placeholder or a thumbnail, not a photo to judge.
+    if (!nw || !nh || Math.max(nw, nh) < 100 || seen.has(el)) return;
+    seen.add(el);
+    const bw = box.right - box.left, bh = box.bottom - box.top;
+    if (bw < 1 || bh < 1) return;
+    let s;
+    let sx, sy;
+    if (fit === "cover") s = Math.max(bw / nw, bh / nh);
+    else if (fit === "none") s = 1;
+    else if (fit && typeof fit === "object") (sx = fit.w / nw), (sy = fit.h / nh);
+    else if (fit === "contain") s = Math.min(bw / nw, bh / nh);
+    else if (fit === "scale-down") s = Math.min(1, bw / nw, bh / nh);
+    else (sx = bw / nw), (sy = bh / nh); // fill: stretched to the box, nothing cropped (but it can still bleed)
+    sx = sx ?? s;
+    sy = sy ?? s;
+    const dw = nw * sx, dh = nh * sy;
+    const [px0, py0] = posPair(position);
+    const ax = posAxis(px0, bw - dw), ay = posAxis(py0, bh - dh);
+    const img = { left: box.left + ax.off, top: box.top + ay.off, right: box.left + ax.off + dw, bottom: box.top + ay.off + dh };
+    const vis = intersect(intersect(img, box), clipChain(el));
+    const vw = vis.right - vis.left, vhh = vis.bottom - vis.top;
+    if (vw < 1 || vhh < 1) return;
+    // Photos only: big enough to carry a subject, and mostly on screen (not a slide parked in a carousel).
+    if (Math.max(vw, vhh) < 160 || Math.min(vw, vhh) < 80 || area(vis) < 0.5 * bw * bh) return;
+    if (vis.right < 0 || vis.left > docW) return;
+    const name = fileOf(src);
+    const alt = imgEl?.getAttribute("alt") ?? el.getAttribute("aria-label") ?? "";
+    if (/^data:image\/svg|\.svg(\?|#|$)/i.test(src) || ICONISH.test(`${name} ${alt} ${el.className?.baseVal ?? el.className ?? ""} ${el.id}`)) return;
+    const win = { x0: (vis.left - img.left) / dw, x1: (vis.right - img.left) / dw, y0: (vis.top - img.top) / dh, y1: (vis.bottom - img.top) / dh };
+    const cut = 1 - (win.x1 - win.x0) * (win.y1 - win.y0);
+    const bleed = [];
+    if (vw >= 0.45 * docW && vis.left <= 1) bleed.push("left");
+    if (vw >= 0.45 * docW && vis.right >= docW - 1) bleed.push("right");
+    const rect = { left: vis.left, top: vis.top, width: vw, height: vhh };
+    const rec = {
+      kind,
+      src: name,
+      alt: short(alt, 50),
+      box: pbox(rect),
+      section: secOf(rect),
+      natural: [nw, nh],
+      shown: [Math.round(bw), Math.round(bh)],
+      fit: typeof fit === "object" ? `${Math.round(fit.w)}×${Math.round(fit.h)}` : fit,
+      position: `${px0} ${py0}`,
+      defaultPosition: ax.pct === 50 && ay.pct === 50,
+      cut: +cut.toFixed(2),
+      window: Object.fromEntries(Object.entries(win).map(([k, v]) => [k, +v.toFixed(3)])),
+      cutSides: ["left", "right", "top", "bottom"].filter((k) => ({ left: win.x0 > 0.02, right: win.x1 < 0.98, top: win.y0 > 0.02, bottom: win.y1 < 0.98 })[k]),
+      bleed,
+      read: false,
+      photo: null,
+    };
+    rec.behind = +coveredShare(el, vis).toFixed(2);
+    const pix = readPixels(imgEl ?? el._palateImg, nw, nh);
+    if (!pix) {
+      rec.photo = jpegish(src, name) ? true : null;
+      rec.why = "cross-origin: the subject was not checked, only the crop";
+      if (rec.photo) photos.push(rec);
+      else unread.push(name);
+      return;
+    }
+    rec.read = true;
+    const ph = photographic(pix, jpegish(src, name));
+    rec.photo = ph.photo;
+    rec.colours = ph.colours;
+    if (!ph.photo) return;
+    if (cut > 0.02 || bleed.length) rec.subject = subjectOf(pix, win, bleed);
+    photos.push(rec);
+  };
+
+  for (const im of document.images) {
+    if (!visible(im) || !im.complete || !im.naturalWidth) continue;
+    const r = im.getBoundingClientRect();
+    if (r.width < 80 || r.height < 80) continue;
+    const cs = getComputedStyle(im);
+    const fit = cs.objectFit;
+    await consider({ el: im, kind: "img", src: im.currentSrc || im.src, nw: im.naturalWidth, nh: im.naturalHeight, box: contentBox(im, r), fit, position: cs.objectPosition, imgEl: im });
+  }
+  let bgs = 0;
+  for (const el of document.body.querySelectorAll("*")) {
+    if (bgs >= 40) break;
+    const cs = getComputedStyle(el);
+    if (!cs.backgroundImage || !/url\(/.test(cs.backgroundImage) || cs.backgroundAttachment === "fixed") continue;
+    const r = el.getBoundingClientRect();
+    if (r.width < 160 && r.height < 160) continue;
+    if (!visible(el)) continue;
+    const layers = cs.backgroundImage.split(/,(?![^(]*\))/);
+    const li = layers.findIndex((l) => /url\(/.test(l));
+    const u = urlOf(layers[li]);
+    if (!u) continue;
+    const pick = (v) => clean(String(v).split(/,(?![^(]*\))/)[li] ?? String(v).split(",")[0]);
+    const size = pick(cs.backgroundSize), pos = pick(cs.backgroundPosition), rep = pick(cs.backgroundRepeat);
+    bgs++;
+    const im = await loadImage(new URL(u, location.href).href);
+    if (!im) continue;
+    const nw = im.naturalWidth, nh = im.naturalHeight;
+    const box = paddingBox(el, r);
+    const bw = box.right - box.left, bh = box.bottom - box.top;
+    let fit;
+    if (size === "cover") fit = "cover";
+    else if (size === "contain") fit = "contain";
+    else {
+      const [a, b = "auto"] = size.split(" ");
+      const len = (v, full) => (v === "auto" ? null : /%$/.test(v) ? (parseFloat(v) / 100) * full : px(v));
+      let W = len(a, bw), H = len(b, bh);
+      if (W == null && H == null) (W = nw), (H = nh);
+      else if (W == null) W = (H * nw) / nh;
+      else if (H == null) H = (W * nh) / nw;
+      fit = { w: W, h: H };
+      // A tiled background is a pattern, not a photo.
+      if (!/no-repeat/.test(rep) && (W < bw - 1 || H < bh - 1)) continue;
+    }
+    el._palateImg = im;
+    await consider({ el, kind: "background", src: u, nw, nh, box, fit, position: pos.replace(/,.*$/, "") });
+    delete el._palateImg;
+  }
+
+  // ================= TEXT_CLIPPED_EFFECT =================
+  const mctx = document.createElement("canvas").getContext("2d");
+  const fontOf = (cs) => `${cs.fontStyle} ${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+  // The boxes that cut this element's painting: clip-path, overflow, a mask, gradient text (background-clip:
+  // text paints only inside the box). Nearest first.
+  const insetBox = (v, r) => {
+    const m = v.match(/^inset\(([^)]*)\)/);
+    if (!m) return null;
+    const t = m[1].split(/\s+round\s+/)[0].trim().split(/\s+/);
+    const [a, b = a, c = a, d = b] = t;
+    const L = (s, full) => (/%$/.test(s) ? (parseFloat(s) / 100) * full : px(s));
+    return { left: r.left + L(d, r.width), top: r.top + L(a, r.height), right: r.right - L(b, r.width), bottom: r.bottom - L(c, r.height) };
+  };
+  const polyBox = (v, r) => {
+    const m = v.match(/^polygon\(([^)]*)\)/);
+    if (!m) return null;
+    const pts = m[1].replace(/^(nonzero|evenodd)\s*,/, "").split(",").map((p) => p.trim().split(/\s+/));
+    const L = (s, full) => (/%$/.test(s) ? (parseFloat(s) / 100) * full : px(s));
+    const xs = pts.map((p) => r.left + L(p[0], r.width)), ys = pts.map((p) => r.top + L(p[1], r.height));
+    return { left: Math.min(...xs), top: Math.min(...ys), right: Math.max(...xs), bottom: Math.max(...ys) };
+  };
+  const clipsOf = (el) => {
+    const out = [];
+    for (let a = el, depth = 0; a && a !== document.documentElement && depth < 12; a = a.parentElement, depth++) {
+      const cs = getComputedStyle(a);
+      const r = a.getBoundingClientRect();
+      const what = `${a.tagName.toLowerCase()}${a.classList.length ? "." + [...a.classList].slice(0, 2).join(".") : ""}`;
+      if (cs.clipPath && cs.clipPath !== "none" && !/^url\(/.test(cs.clipPath)) {
+        const b = insetBox(cs.clipPath, r) ?? polyBox(cs.clipPath, r) ?? { left: r.left, top: r.top, right: r.right, bottom: r.bottom };
+        out.push({ kind: "clip-path", value: short(cs.clipPath, 40), on: what, box: b });
+      }
+      const mask = cs.maskImage || cs.webkitMaskImage;
+      if (mask && mask !== "none") out.push({ kind: "mask", value: short(mask, 40), on: what, box: { left: r.left, top: r.top, right: r.right, bottom: r.bottom } });
+      if ((cs.backgroundClip === "text" || cs.webkitBackgroundClip === "text") && a.parentElement) out.push({ kind: "background-clip: text", on: what, box: { left: r.left, top: r.top, right: r.right, bottom: r.bottom } });
+      const ox = cs.overflowX !== "visible", oy = cs.overflowY !== "visible";
+      if (ox || oy) {
+        const p = paddingBox(a, r);
+        out.push({ kind: "overflow", value: `${cs.overflowX} ${cs.overflowY}`, on: what, box: { left: ox ? p.left : -1e9, right: ox ? p.right : 1e9, top: oy ? p.top : -1e9, bottom: oy ? p.bottom : 1e9 } });
+      }
+    }
+    return out;
+  };
+  const textClips = [];
+  const clipSeen = new Set();
+  for (const node of allText) {
+    const el = node.parentElement;
+    if (!el || clipSeen.has(el) || node.data.length > 400) continue;
+    const cs = getComputedStyle(el);
+    const fs = px(cs.fontSize);
+    const genre = genreOf(cs.fontFamily);
+    if (fs < 32 && genre !== "script" && genre !== "display") continue;
+    if (fs < 12 || !visible(el)) continue;
+    const clips = clipsOf(el);
+    if (!clips.length) continue;
+    // Lines of this text node: characters grouped by line.
+    const lines = [];
+    for (let i = 0; i < node.data.length; i++) {
+      if (/\s/.test(node.data[i])) continue;
+      const q = charRects(node, i)[0];
+      if (!q) continue;
+      const L = lines.find((l) => Math.abs(l.top - q.top) < fs * 0.5);
+      if (L) (L.text += node.data[i]), (L.left = Math.min(L.left, q.left)), (L.right = Math.max(L.right, q.right)), (L.last = node.data[i]);
+      else lines.push({ top: q.top, bottom: q.bottom, left: q.left, right: q.right, text: node.data[i], first: node.data[i], last: node.data[i], chars: [] });
+    }
+    if (!lines.length) continue;
+    mctx.font = fontOf(cs);
+    try {
+      mctx.letterSpacing = cs.letterSpacing === "normal" ? "0px" : cs.letterSpacing;
+    } catch {}
+    mctx.textAlign = "left";
+    mctx.textBaseline = "alphabetic";
+    // Swash allowance for script faces: alternates the canvas doesn't apply (font-feature-settings: "swsh").
+    const allow = genre === "script" ? 0.03 * fs : 0;
+    let hit = null;
+    for (const l of lines) {
+      const m = mctx.measureText(l.text);
+      const mf = mctx.measureText(l.first), ml = mctx.measureText(l.last);
+      const fa = m.fontBoundingBoxAscent ?? fs * 0.8, fd = m.fontBoundingBoxDescent ?? fs * 0.2;
+      const base = l.top + (l.bottom - l.top - (fa + fd)) / 2 + fa;
+      const ink = {
+        left: l.left - Math.max(0, mf.actualBoundingBoxLeft) - allow,
+        right: l.right + Math.max(0, ml.actualBoundingBoxRight - ml.width) + allow,
+        top: base - m.actualBoundingBoxAscent - allow,
+        bottom: base + m.actualBoundingBoxDescent + allow,
+      };
+      const mid = base - 0.3 * fs;
+      for (const c of clips) {
+        const b = c.box;
+        // The line itself is outside the clip (a ticker, a long word, a reveal not finished, a clamped line):
+        // a layout clip, not an ink one.
+        if (l.left < b.left - 1 || l.right > b.right + 1 || mid < b.top || mid > b.bottom) continue;
+        const over = { left: b.left - ink.left, right: ink.right - b.right, top: b.top - ink.top, bottom: ink.bottom - b.bottom };
+        const worst = Math.max(...Object.values(over));
+        if (worst > Math.max(1.5, 0.03 * fs) && (!hit || worst > hit.worst)) hit = { clip: c, over, worst, line: l.text };
+      }
+    }
+    if (!hit) continue;
+    clipSeen.add(el);
+    const r = el.getBoundingClientRect();
+    textClips.push({
+      text: short(el.innerText || node.data, 40),
+      fontSize: Math.round(fs),
+      family: cs.fontFamily.split(",")[0].replace(/["']/g, "").trim(),
+      genre,
+      clip: { kind: hit.clip.kind, value: hit.clip.value ?? null, on: hit.clip.on },
+      over: Object.fromEntries(Object.entries(hit.over).map(([k, v]) => [k, Math.max(0, Math.round(v * 10) / 10)])),
+      section: secOf(r),
+    });
+  }
+
+  // ================= HYPHEN_BREAK =================
+  // Display headings (20px+), short labels (three words or fewer) and any display-size text; never CJK (it breaks
+  // between any two characters by design) or decorative copies (aria-hidden: tickers, mock UI in a graphic).
+  const HEADING = "h1, h2, h3, h4, h5, h6, [role=heading]";
+  const LABELISH = "button, [role=button], [role=tab], label, th, dt, legend, summary, figcaption";
+  const CJK = /[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]/u;
+  const blockText = (el) => {
+    let b = el;
+    while (b.parentElement && getComputedStyle(b).display.startsWith("inline")) b = b.parentElement;
+    return clean(b.innerText);
+  };
+  const hyphens = [];
+  for (const node of allText) {
+    const el = node.parentElement;
+    if (!el || !visible(el) || el.closest("[aria-hidden=true]")) continue;
+    const t = node.data;
+    const hasHyphen = /[\p{L}\d][-‐][\p{L}\d]/u.test(t);
+    const cs = getComputedStyle(el);
+    const fs = px(cs.fontSize);
+    const words = blockText(el).split(" ").length;
+    const heading = (!!el.closest(HEADING) && fs >= 20) || (!!el.closest(LABELISH) && words <= 6);
+    const label = words <= 3;
+    if (!heading && !label && fs < 28) continue;
+    const rx = /[\p{L}\d]+(?:[-‐][\p{L}\d]+)*/gu;
+    for (let m; (m = rx.exec(t)); ) {
+      const word = m[0];
+      if (word.length < 3 || CJK.test(word)) continue;
+      const tops = [];
+      for (let i = 0; i < word.length; i++) {
+        const q = charRects(node, m.index + i)[0];
+        tops.push(q ? q.top : null);
+      }
+      for (let i = 1; i < word.length; i++) {
+        if (tops[i] == null || tops[i - 1] == null || tops[i] <= tops[i - 1] + fs * 0.5) continue;
+        const afterHyphen = /[-‐]/.test(word[i - 1]);
+        // A break inside a plain word only counts in headings and labels (a long URL in body text is its own matter).
+        if (!afterHyphen && !heading && !label) continue;
+        const r = el.getBoundingClientRect();
+        hyphens.push({ word, at: i, kind: afterHyphen ? "hyphen" : "mid-word", fontSize: Math.round(fs), heading, text: short(blockText(el), 60), section: secOf(r) });
+        break;
+      }
+      if (hyphens.length >= 24) break;
+    }
+  }
+
+  // ================= LABEL_WRAP =================
+  const looksButton = (el) => {
+    if (el.matches("button, [role=button], input[type=submit], input[type=button]")) return "button";
+    if (el.matches("[role=tab]")) return "tab";
+    if (el.tagName === "A") {
+      const cs = getComputedStyle(el);
+      const filled = !/rgba\(0, 0, 0, 0\)|transparent/.test(cs.backgroundColor);
+      const bordered = px(cs.borderTopWidth) > 0 && px(cs.borderLeftWidth) > 0;
+      if ((filled || bordered) && px(cs.paddingLeft) >= 8 && px(cs.paddingTop) >= 4) return "button";
+    }
+    return null;
+  };
+  const wraps = [];
+  const wrapSeen = new Set();
+  for (const node of allText) {
+    let el = node.parentElement;
+    if (!el || !visible(el)) continue;
+    // The label: the outermost element (a few levels up) that holds exactly this text.
+    const txt = clean(el.innerText);
+    if (!txt || txt.length > 24 || txt.length < 2 || txt.split(" ").length > 3 || !/\p{L}/u.test(txt) || CJK.test(txt) || el.closest("[aria-hidden=true]")) continue;
+    for (let k = 0; k < 4 && el.parentElement && el.parentElement !== document.body; k++) {
+      if (clean(el.parentElement.innerText) !== txt) break;
+      el = el.parentElement;
+    }
+    if (wrapSeen.has(el)) continue;
+    wrapSeen.add(el);
+    // A phrase inside running text ("… by Nov 1" breaking at a line end) is not a label: a label is its own box.
+    if (getComputedStyle(el).display === "inline") continue;
+    const cs = getComputedStyle(node.parentElement);
+    const fs = px(cs.fontSize);
+    if (fs >= 32 || el.querySelector("br") || /pre/.test(cs.whiteSpace)) continue;
+    const rects = nodeRects(node);
+    if (!rects.length) continue;
+    const r = el.getBoundingClientRect();
+    if (r.right < 0 || r.left > docW || r.width < 2) continue;
+    // Text outside its own box is hidden or overflowing (a visually hidden "Item 2" in a 24px carousel dot), not wrapped.
+    if (rects.some((q) => q.left < r.left - 4 || q.right > r.right + 4 || q.top < r.top - 4 || q.bottom > r.bottom + 4)) continue;
+    if (lineCount(rects, fs) < 2) continue;
+    const role = looksButton(el) ?? (el.closest("button, [role=button], [role=tab]") ? looksButton(el.closest("button, [role=button], [role=tab]")) : null) ?? "label";
+    wraps.push({ text: txt, role, tag: el.tagName.toLowerCase(), lines: lineCount(rects, fs), width: Math.round(r.width), fontSize: Math.round(fs), section: secOf(r) });
+    if (wraps.length >= 40) break;
+  }
+
+  // ================= DOUBLE_NUMBERING =================
+  // A marker is an element holding only a numbering: "01", "1.", "1)", "Step 1", "Chapter 1", "01 / 05". Its format
+  // decides what it can be: bare "4" or "4/6" are counts and ranks, never kickers; bare numbers count as a
+  // sequence only as a run of three (1, 2, 3: step circles).
+  const parseMarker = (t) => {
+    let m = t.match(/^(chapter|part|step|section|no\.?)\s*(\d{1,2})[.:]?$/i);
+    if (m) return { value: +m[2], fmt: "word", chapter: /chapter|part/i.test(m[1]) };
+    if ((m = t.match(/^(0\d)(?:\s*[.):]|\s*[\/—–-]\s*\d{2})?$/))) return { value: +m[1], fmt: "pad" };
+    if ((m = t.match(/^(\d{1,2})\s*[.)]$/))) return { value: +m[1], fmt: "punct" };
+    if ((m = t.match(/^(\d{1,2})$/))) return { value: +m[1], fmt: "bare" };
+    return null;
+  };
+  const HEAD_NUM = /^(?:(?:chapter|part|step)\s+(\d{1,2})\b|(0\d)(?=[\s.:—–-])|(\d{1,2})[.)]\s)/i;
+  const markers = [];
+  for (const el of document.body.querySelectorAll("*")) {
+    if (el.closest("svg, script, style, nav, header, footer, [role=navigation], table")) continue;
+    const tc = clean(el.textContent);
+    if (!tc || tc.length > 80) continue;
+    const isHead = /^H[1-6]$/.test(el.tagName) || el.getAttribute("role") === "heading";
+    let mk = tc.length <= 16 ? parseMarker(tc) : null;
+    let headPrefixed = false;
+    if (!mk && isHead) {
+      const h = tc.match(HEAD_NUM);
+      if (h) (mk = { value: +(h[1] ?? h[2] ?? h[3]), fmt: h[2] ? "pad" : h[1] ? "word" : "punct" }), (headPrefixed = true);
+    }
+    if (!mk) continue;
+    if (!headPrefixed && [...el.children].some((c) => clean(c.textContent) === tc)) continue; // the innermost holder
+    if (!visible(el)) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width < 1 || r.height < 1) continue;
+    markers.push({ el, text: tc.slice(0, 30), ...mk, y: r.top + scrollY, h: r.height, x: r.left, fs: px(getComputedStyle(el).fontSize), head: isHead || !!mk.chapter, section: secOf(r) });
+  }
+  // Visible numbered lists count as markers too.
+  for (const ol of document.querySelectorAll("ol")) {
+    const cs = getComputedStyle(ol);
+    if (!/decimal|leading-zero/.test(cs.listStyleType) || !visible(ol) || ol.closest("nav, header, footer")) continue;
+    const items = [...ol.children].filter((li) => li.tagName === "LI" && visible(li));
+    if (items.length < 2) continue;
+    const start = ol.start || 1;
+    items.forEach((li, k) => {
+      const r = li.getBoundingClientRect();
+      markers.push({ el: li, text: /leading-zero/.test(cs.listStyleType) ? String(start + k).padStart(2, "0") : `${start + k}.`, value: start + k, fmt: "ol", y: r.top + scrollY, h: r.height, x: r.left, fs: px(getComputedStyle(li).fontSize), head: false, section: secOf(r), list: true });
+    });
+  }
+  // A kicker: a numbered heading, or a numbering marker with a heading just below it.
+  const headings = [...document.querySelectorAll("h1, h2, h3, h4, h5, h6, [role=heading]")].filter(visible).map((h) => ({ el: h, r: h.getBoundingClientRect() }));
+  const doubles = [];
+  for (const k of markers) {
+    if (k.list || !k.section || k.fmt === "bare") continue;
+    const below = headings.find(({ el, r }) => el !== k.el && !el.contains(k.el) && r.top + scrollY >= k.y - 4 && r.top + scrollY <= k.y + k.h + 160);
+    if (!(k.head || (below && !k.el.closest("li")))) continue;
+    // Below it in the same section: items in one format numbered again from 1.
+    const rest = markers.filter((m) => m !== k && m.section?.index === k.section.index && m.y > k.y + k.h / 2 && !m.el.contains(k.el) && !k.el.contains(m.el));
+    let seq = null;
+    for (const fmt of ["ol", "pad", "punct", "word", "bare"]) {
+      const g = rest.filter((m) => m.fmt === fmt);
+      const vals = new Set(g.map((m) => m.value));
+      if (vals.has(1) && vals.has(2) && (fmt !== "bare" || vals.has(3))) {
+        seq = g.sort((a, b) => a.y - b.y || a.x - b.x);
+        break;
+      }
+    }
+    if (!seq) continue;
+    const one = seq.find((m) => m.value === 1);
+    const sameLook = one.fmt === k.fmt || (one.fmt === "ol" && k.fmt === "punct");
+    doubles.push({ kicker: k.text, kickerValue: k.value, items: seq.slice(0, 6).map((m) => m.text), count: seq.length, sameLook, list: !!one.list, section: k.section });
+    if (doubles.length >= 8) break;
+  }
+  // One finding per section.
+  const dblBySec = new Map();
+  for (const d of doubles) if (!dblBySec.has(d.section.index)) dblBySec.set(d.section.index, d);
+
+  window.scrollTo({ top: startY, behavior: "instant" });
+  return {
+    width: docW,
+    vh,
+    photos: photos.slice(0, 40),
+    unreadImages: unread.slice(0, 12),
+    textClips: textClips.slice(0, 20),
+    hyphens,
+    wraps,
+    doubles: [...dblBySec.values()],
+  };
+};