@palate/cli 0.0.0-stage → 0.0.1

package/src/page-details.js

@@ -0,0 +1,415 @@
+// Runs inside the page (read as text and evaluated). Finds generic small parts a designer would upgrade:
+// initial-letter avatars and faceless people, monochrome or missing brand marks, default form controls,
+// bare empty states, raw numbers, emoji and mixed icons, placeholder text, badge soup, and missing
+// favicon / social image. Each item has a box (page coordinates) so palate can crop it.
+() => {
+  const out = [];
+  const vw = innerWidth;
+  const clean = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    return r.width > 1 && r.height > 1 && cs.display !== "none" && cs.visibility !== "hidden" && parseFloat(cs.opacity) > 0.01 && !el.closest("[aria-hidden=true] .sr-only, .sr-only");
+  };
+  const box = (el) => {
+    const r = el.getBoundingClientRect();
+    return { x: Math.round(r.left + scrollX), y: Math.round(r.top + scrollY), width: Math.round(r.width), height: Math.round(r.height) };
+  };
+  const sel = (el) => {
+    const parts = [];
+    for (let e = el; e && e.nodeType === 1 && e !== document.body && parts.length < 4; e = e.parentElement) {
+      if (e.id) {
+        parts.unshift(`#${CSS.escape(e.id)}`);
+        break;
+      }
+      const cls = [...e.classList].filter((c) => /^[a-z][\w-]*$/i.test(c)).slice(0, 2);
+      parts.unshift(e.tagName.toLowerCase() + (cls.length ? `.${cls.join(".")}` : ""));
+    }
+    return parts.join(" > ");
+  };
+  const add = (kind, el, detail, extra = {}) => out.push({ kind, detail, selector: el ? sel(el) : null, text: el ? clean(el.textContent).slice(0, 60) : "", box: el ? box(el) : null, ...extra });
+  const all = [...document.body.querySelectorAll("*")].filter((e) => !e.closest("svg") && !["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE"].includes(e.tagName));
+  const textNodes = [];
+  const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+  for (let n; (n = walker.nextNode()); ) if (clean(n.textContent) && n.parentElement && visible(n.parentElement) && !n.parentElement.closest("script, style, code, pre, kbd, samp, noscript")) textNodes.push(n);
+  const isMasked = (cs) => (cs.maskImage && cs.maskImage !== "none") || (cs.webkitMaskImage && cs.webkitMaskImage !== "none");
+
+  // ---- colour: any computed CSS colour (rgb, hex, hsl, oklab, oklch, lab, lch, color(), color-mix(), which
+  // computes to oklab() or color(srgb …)) as [r, g, b, a(0–1)] in sRGB, or null when it can't be read. Never
+  // pull digits out of the string: "oklab(0.62 0.1 0.05)" read as rgb is near black. The same helper is in
+  // page-rules.js, page-devices.js, page-details.js and page-gate.js (test/colour.test.mjs keeps them identical).
+  const colourCtx = Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: true });
+  const colourMemo = new Map();
+  const RGB_FN = /^rgba?\(\s*(-?[\d.]+)(%?)[,\s]+(-?[\d.]+)(%?)[,\s]+(-?[\d.]+)(%?)(?:\s*[,/]\s*([\d.]+)(%?))?\s*\)$/i;
+  const fromRgbFn = (m) => [1, 3, 5].map((i) => Math.max(0, Math.min(255, m[i + 1] ? (parseFloat(m[i]) * 255) / 100 : parseFloat(m[i])))).concat(m[7] === undefined ? 1 : m[8] ? parseFloat(m[7]) / 100 : parseFloat(m[7]));
+  const fromHex = (h) => {
+    const x = h.length <= 5 ? [...h.slice(1)].map((c) => c + c).join("") : h.slice(1);
+    return [0, 2, 4].map((i) => parseInt(x.slice(i, i + 2), 16)).concat(x.length === 8 ? parseInt(x.slice(6, 8), 16) / 255 : 1);
+  };
+  // The spaces Chrome computes to, converted by hand for when a canvas can't parse them.
+  const fromSpace = (c) => {
+    const m = c.match(/^(oklab|oklch|lab|lch|color)\(\s*([^)]*)\)$/i);
+    if (!m) return null;
+    const [body, alpha] = m[2].split("/");
+    const p = body.trim().split(/[\s,]+/);
+    const space = m[1].toLowerCase() === "color" ? (p.shift() ?? "").toLowerCase() : m[1].toLowerCase();
+    const n = (s, full = 1) => (s == null || s === "none" ? 0 : s.endsWith("%") ? (parseFloat(s) / 100) * full : parseFloat(s));
+    const a = alpha === undefined ? 1 : n(alpha.trim());
+    const enc = (v) => 255 * Math.max(0, Math.min(1, v <= 0.0031308 ? 12.92 * v : 1.055 * Math.pow(v, 1 / 2.4) - 0.055));
+    const polar = (C, h) => [C * Math.cos((h * Math.PI) / 180), C * Math.sin((h * Math.PI) / 180)];
+    let lin;
+    if (space === "oklab" || space === "oklch") {
+      const L = n(p[0]);
+      const [A, B] = space === "oklab" ? [n(p[1], 0.4), n(p[2], 0.4)] : polar(n(p[1], 0.4), n(p[2]));
+      const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3, k = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3, s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+      lin = [4.0767416621 * l - 3.3077115913 * k + 0.2309699292 * s, -1.2684380046 * l + 2.6097574011 * k - 0.3413193965 * s, -0.0041960863 * l - 0.7034186147 * k + 1.707614701 * s];
+    } else if (space === "lab" || space === "lch") {
+      const L = n(p[0], 100);
+      const [A, B] = space === "lab" ? [n(p[1], 125), n(p[2], 125)] : polar(n(p[1], 150), n(p[2]));
+      const fy = (L + 16) / 116, fx = fy + A / 500, fz = fy - B / 200, e = 216 / 24389, kk = 24389 / 27;
+      const X = 0.96422 * (fx ** 3 > e ? fx ** 3 : (116 * fx - 16) / kk), Y = L > kk * e ? fy ** 3 : L / kk, Z = 0.82521 * (fz ** 3 > e ? fz ** 3 : (116 * fz - 16) / kk);
+      lin = [3.1338561 * X - 1.6168667 * Y - 0.4906146 * Z, -0.9787684 * X + 1.9161415 * Y + 0.033454 * Z, 0.0719453 * X - 0.2289914 * Y + 1.4052427 * Z];
+    } else if (space === "srgb" || space === "display-p3" || space === "a98-rgb" || space === "rec2020") return p.slice(0, 3).map((v) => 255 * Math.max(0, Math.min(1, n(v)))).concat(a);
+    else if (space === "srgb-linear") lin = p.slice(0, 3).map((v) => n(v));
+    else return null;
+    return lin.map(enc).concat(a);
+  };
+  const toRgba = (c) => {
+    const s = String(c ?? "").trim();
+    if (!s || s === "none") return null;
+    if (colourMemo.has(s)) return colourMemo.get(s);
+    let v = null;
+    const m = s.match(RGB_FN);
+    if (m) v = fromRgbFn(m);
+    else if (/^transparent$/i.test(s)) v = [0, 0, 0, 0];
+    else if (/^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(s)) v = fromHex(s);
+    else {
+      // The canvas parses anything the browser does; a value it rejects leaves the sentinel in place.
+      colourCtx.fillStyle = "#010203";
+      colourCtx.fillStyle = s;
+      const got = String(colourCtx.fillStyle);
+      if (got !== "#010203") {
+        const g = got.match(RGB_FN);
+        if (g) v = fromRgbFn(g);
+        else if (/^#[0-9a-f]{6}$/i.test(got)) v = fromHex(got);
+        else {
+          colourCtx.clearRect(0, 0, 1, 1);
+          colourCtx.fillRect(0, 0, 1, 1);
+          const d = colourCtx.getImageData(0, 0, 1, 1).data;
+          // Alpha from the colour itself when it says (the canvas rounds translucent channels).
+          v = [d[0], d[1], d[2], fromSpace(got)?.[3] ?? d[3] / 255];
+        }
+      } else v = fromSpace(s);
+    }
+    colourMemo.set(s, v);
+    return v;
+  };
+  // Every colour named in a background-image (gradient stops), in order.
+  const colourStops = (bi) => (String(bi ?? "").match(/(?:rgba?|hsla?|oklab|oklch|lab|lch|color)\([^()]*\)|#[0-9a-f]{3,8}\b/gi) ?? []).map(toRgba).filter(Boolean);
+  // Colour helpers: any colour as rgba, relative luminance, contrast ratio, the colour actually behind an element.
+  const rgba = (s) => toRgba(s);
+  const lum = ([r, g, b]) => {
+    const f = (c) => ((c /= 255) <= 0.03928 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+    return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
+  };
+  const contrast = (a, b) => {
+    const [x, y] = [lum(a), lum(b)].sort((p, q) => q - p);
+    return (x + 0.05) / (y + 0.05);
+  };
+  const fillOf = (cs) => {
+    if (cs.backgroundImage && cs.backgroundImage !== "none") return colourStops(cs.backgroundImage)[0] ?? null;
+    const c = rgba(cs.backgroundColor);
+    return c && c[3] > 0.05 ? c : null;
+  };
+  const behind = (el) => {
+    for (let e = el; e && e.nodeType === 1; e = e.parentElement) {
+      const c = fillOf(getComputedStyle(e));
+      if (c && c[3] > 0.5) return c;
+    }
+    return [255, 255, 255, 1];
+  };
+
+  // Avatars: initial-letter circles (monograms). With no real photos, initials are the right fallback, so only
+  // the ones that look default are flagged: the same plain grey for everyone with no ring, tiny, clipped, or
+  // low contrast. Tinted per person, sized, ringed and legible monograms are deliberate and stay quiet.
+  const monoCands = all.filter((el) => {
+    const t = clean(el.textContent);
+    if (!/^[A-Z]{1,3}$/.test(t) || el.querySelector("img, svg") || !visible(el)) return false;
+    const r = el.getBoundingClientRect();
+    return r.width >= 12 && r.width <= 120 && Math.abs(r.width - r.height) <= 2 && parseFloat(getComputedStyle(el).borderTopLeftRadius) >= r.width * 0.4;
+  });
+  // The innermost circle when an avatar is a circle inside a circle.
+  const monograms = monoCands.filter((c) => !monoCands.some((o) => o !== c && c.contains(o)));
+  const monoInfo = monograms.map((el) => {
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    const own = fillOf(cs);
+    const fillKey = cs.backgroundImage !== "none" ? cs.backgroundImage : own ? cs.backgroundColor : "none";
+    const grey = cs.backgroundImage === "none" && (!own || Math.max(own[0], own[1], own[2]) - Math.min(own[0], own[1], own[2]) <= 16);
+    const ring = (parseFloat(cs.borderTopWidth) > 0 && cs.borderTopStyle !== "none") || cs.boxShadow !== "none" || (cs.outlineStyle !== "none" && parseFloat(cs.outlineWidth) > 0);
+    const range = document.createRange();
+    range.selectNodeContents(el);
+    const tw = range.getBoundingClientRect().width;
+    const clipped = tw > r.width - 2 || el.scrollWidth > el.clientWidth + 1;
+    const ratio = contrast(rgba(cs.color) ?? [0, 0, 0, 1], own && own[3] > 0.5 ? own : behind(el.parentElement));
+    return { el, w: Math.round(r.width), fillKey, grey, ring, clipped, ratio };
+  });
+  const sameFill = new Set(monoInfo.map((m) => m.fillKey)).size === 1;
+  const defaults = new Map();
+  for (const m of monoInfo) {
+    const tags = [m.grey && !m.ring && sameFill && "grey", m.w < 20 && "tiny", m.clipped && "clipped", m.ratio < 3 && "faint"].filter(Boolean);
+    if (tags.length) defaults.set(tags.join(), [...(defaults.get(tags.join()) ?? []), m]);
+  }
+  for (const [key, list] of defaults) {
+    const m = list[0];
+    const why = {
+      grey: m.fillKey === "none" ? "bare letters, no fill or ring" : `the same grey (${m.fillKey}) for everyone, no ring`,
+      tiny: `only ${Math.min(...list.map((x) => x.w))}px`,
+      clipped: "initials clipped by the circle",
+      faint: `initials at ${Math.min(...list.map((x) => x.ratio)).toFixed(1)}:1 contrast`,
+    };
+    add("avatar", m.el, `${list.length} initial-letter avatar${list.length > 1 ? "s" : ""} that look${list.length > 1 ? "" : "s"} default: ${key.split(",").map((k) => why[k]).join("; ")}`, { names: list.map((x) => clean(x.el.textContent)).slice(0, 12) });
+  }
+
+  // People (quotes, roles, bylines) shown without a face: no photo, illustration or monogram in their card or
+  // right beside them. Nested matches (a blockquote and the quote paragraph inside it) count once.
+  const people = [];
+  const quoteEls = [...document.body.querySelectorAll("blockquote, q, [class*=testimonial], [class*=quote], [class*=review], [class*=author], [class*=byline]")].filter(visible);
+  for (const el of quoteEls) if (!quoteEls.some((o) => o !== el && o.contains(el))) people.push({ el, why: "a quote or testimonial" });
+  // "Ada Lovelace, CEO at Acme" style captions (short, not sentences) and "built by …" bylines.
+  const ROLE = /^(?:[A-Z][\w'’.-]*\s){0,3}(?:[,·—–|-]\s*)?(?:CEO|CTO|COO|CFO|[Ff]ounder|[Cc]o-founder|Head of|VP|Director|Lead|Senior|Staff|Principal|Designer|Engineer|Product manager)\b/;
+  for (const n of textNodes) {
+    const t = clean(n.textContent);
+    if (t.length < 60 && !/\.\s/.test(t) && ROLE.test(t)) people.push({ el: n.parentElement, why: `a person's role ("${t.slice(0, 40)}")` });
+    else if (t.length < 60 && /\b(built|made|designed|written|created) by\b/i.test(t)) people.push({ el: n.parentElement, why: `a byline ("${clean(n.parentElement.textContent).slice(0, 40)}")` });
+  }
+  // A face: a photo, picture or illustration 16–120px, or a monogram (initials in a circle count as an avatar).
+  const faces = [
+    ...[...document.body.querySelectorAll("img, picture, svg")].filter((m) => {
+      const r = m.getBoundingClientRect();
+      return visible(m) && r.width >= 16 && r.width <= 120;
+    }),
+    ...monograms,
+  ];
+  const gap = (a, b) => {
+    const p = a.getBoundingClientRect();
+    const q = b.getBoundingClientRect();
+    return Math.hypot(Math.max(0, p.left - q.right, q.left - p.right), Math.max(0, p.top - q.bottom, q.top - p.bottom));
+  };
+  // Who a quote is from: a cite / footer / figcaption / author line in the quote or its card, a line that starts
+  // with a dash, or a short line after the quote. A face is expected for a person (two or more capitalised words
+  // that aren't a publication or organisation, or a role like "studio manager"), not for "— The Scotsman".
+  const ATTRIB = "cite, footer, figcaption, [class*=author], [class*=attrib], [class*=source], [class*=byline], [class*=name]";
+  const attributionOf = (el) => {
+    const holder = el.closest("figure, article, li, [class*=testimonial], [class*=review], [class*=card]") ?? el.parentElement ?? el;
+    for (const c of [...el.querySelectorAll(ATTRIB), ...holder.querySelectorAll(ATTRIB)]) {
+      const t = clean(c.textContent);
+      if (t && t.length <= 120 && visible(c)) return t;
+    }
+    const after = [...holder.querySelectorAll("p, span, div, small, strong, b")].filter((e) => !e.children.length && !el.contains(e) && visible(e) && el.compareDocumentPosition(e) & Node.DOCUMENT_POSITION_FOLLOWING).map((e) => clean(e.textContent)).filter((t) => t && t.length <= 80);
+    const dash = after.find((t) => /^[—–-]\s*\S/.test(t)) ?? clean(el.textContent).match(/[”"]\s*[—–-]\s*([^—–”"]{2,80})$/)?.[1];
+    return dash ?? after[0] ?? null;
+  };
+  const OUTLET = /\b(times|post|journal|guardian|herald|scotsman|telegraph|gazette|tribune|chronicle|observer|independent|standard|courier|mirror|express|magazine|mag|review|weekly|daily|monthly|quarterly|news|press|radio|tv|bbc|cnn|npr|vogue|wired|verge|techcrunch|forbes|bloomberg|reuters|eater|time ?out|guide|michelin|awards?|blog|podcast|newsletter|digest|inc|ltd|llc|gmbh|company|group|agency|foundation|university|council|association|society|institute|museum)\b/i;
+  const ROLE_WORD = /\b(manager|owner|founder|co-founder|ceo|cto|coo|cfo|vp|director|head of|lead|engineer|designer|developer|chef|baker|potter|member|customer|regular|student|teacher|parent|editor|writer|critic|reviewer|resident|neighbou?r|consultant|architect|analyst|nurse|doctor|organi[sz]er|volunteer)\b/i;
+  const isPerson = (t) => {
+    const s = t.replace(/^[—–-]\s*/, "").trim();
+    if (ROLE_WORD.test(s)) return true;
+    const name = s.split(/\s*[,·|–—(@]\s*|\s+-\s+/)[0].trim();
+    if (/^the\s/i.test(name) || OUTLET.test(name)) return false;
+    return /^\p{Lu}[\p{L}'’.-]*(\s+(?:(?:de|van|von|da|di|del|der|le|la|bin|al)\s+)?\p{Lu}[\p{L}'’.-]*)+$/u.test(name);
+  };
+  const flaggedPeople = new Set();
+  for (const { el, why } of people) {
+    if ([...flaggedPeople].some((f) => f.contains(el) || el.contains(f))) continue;
+    if (why !== "a quote or testimonial" && quoteEls.some((q) => q.contains(el))) continue;
+    if (why === "a quote or testimonial") {
+      const who = attributionOf(el);
+      if (who && !isPerson(who)) continue;
+    }
+    let card = el;
+    // The person's card: up to three levels up, but never a whole section.
+    for (let k = 0; k < 3 && card.parentElement && card.parentElement !== document.body && card.parentElement.getBoundingClientRect().height < 360; k++) card = card.parentElement;
+    // Or the figure / article / list item the quote lives in, when it's no bigger than a card.
+    const holder = el.closest("figure, article, li, [class*=testimonial], [class*=card]");
+    const scope = el.closest("section, article, figure, li, main, footer, header") ?? document.body;
+    const face = faces.some((f) => card.contains(f) || (holder && holder.getBoundingClientRect().height < 640 && holder.contains(f)) || (scope.contains(f) && gap(f, el) <= 120));
+    if (!face) {
+      flaggedPeople.add(el);
+      add("avatar", el, `no avatar next to ${why}`);
+    }
+  }
+
+  // Brand marks: rows of names with one-colour marks (CSS masks, single-fill SVGs), tiny marks, or no marks.
+  // Only things that look like logos count: marks named after something (alt / aria-label / title), wordmark
+  // shapes, or a row that says it's a logo cloud. Small repeated UI glyphs (the same check or clock in every
+  // list item, table cell or button) and feature-tile icons are icons, not brand marks.
+  const kidsOf = (p) => [...p.children].flatMap((k) => (getComputedStyle(k).display === "contents" ? kidsOf(k) : [k]));
+  const LOGO_CTX = /logo|brand|partner|customer|client|sponsor|trusted|integrat|works with|used by|loved by|powered by|backed by|as seen|featured in|investor/i;
+  const LOGO_WORD = /(?:^|[\s_-])(?:logos?|brands?|partners?|customers?|clients?|sponsors?|integrations?|trusted|marquee)(?:[\s_-]|$)/i;
+  const GLYPH_NAME = /icon|check|tick|arrow|chevron|caret|close|menu|star|dot|bullet|plus|minus|search|clock|info|warning|chart|graph/i;
+  const nameOf = (m) => clean(m.getAttribute("alt") || m.getAttribute("aria-label") || m.getAttribute("title") || (m.tagName === "svg" ? m.querySelector(":scope > title")?.textContent : "") || "");
+  // A brand name: short, a few words, not a sentence or a glyph's description.
+  const brandNamed = (m) => {
+    const n = nameOf(m);
+    return /logo/i.test(n) || (n.length >= 2 && n.length <= 32 && n.split(" ").length <= 4 && !/[.,:;!?]\s|[,:;]$/.test(n) && !GLYPH_NAME.test(n) && m.getAttribute("aria-hidden") !== "true");
+  };
+  const strokeOnly = (m) => m.tagName === "svg" && [...m.querySelectorAll("path, polyline, line, circle, rect")].every((p) => (p.getAttribute("fill") ?? m.getAttribute("fill")) === "none" || getComputedStyle(p).fill === "none");
+  const wordmark = (m) => {
+    const r = m.getBoundingClientRect();
+    return r.width >= r.height * 2.2 && r.height >= 10 && r.height <= 48 && !strokeOnly(m) && !m.closest("td, th, button, [role=button]");
+  };
+  const uiGlyph = (m) => {
+    const r = m.getBoundingClientRect();
+    return r.width <= 20 && r.height <= 20 && !!m.closest("li, td, th, button, [role=button], label, summary");
+  };
+  const glyphKey = (m) => (m.tagName === "svg" ? m.innerHTML.replace(/\s+/g, " ").trim() : m.tagName === "IMG" ? m.currentSrc || m.src : getComputedStyle(m).maskImage || getComputedStyle(m).webkitMaskImage);
+  const ctxOf = (parent) => {
+    const bits = [];
+    for (let e = parent, k = 0; e && e !== document.body && k < 4; e = e.parentElement, k++) {
+      // Class and id as whole words, so a colour token like text-[var(--brand)] doesn't count.
+      const words = `${e.id} ${typeof e.className === "string" ? e.className : ""}`.split(/\s+/).filter((t) => !/^(?:[\w-]+:)*(?:text|bg|border|fill|stroke|ring|from|via|to|shadow|outline|decoration|accent|caret|divide|placeholder)-/.test(t));
+      if (LOGO_WORD.test(words.join(" "))) bits.push("logo");
+      bits.push(e.getAttribute("aria-label") ?? "");
+      // The heading or eyebrow just before the row ("Trusted by", "Integrations").
+      for (let s = e.previousElementSibling, j = 0; s && j < 2; s = s.previousElementSibling, j++) if (clean(s.textContent).length <= 120) bits.push(clean(s.textContent));
+    }
+    return bits.join(" ");
+  };
+  const logoRow = (parent, kids, withMark) => {
+    // The same glyph in most items: a bullet, check or status icon, not a set of different brands.
+    if (new Set(withMark.map(glyphKey)).size < withMark.length * 0.6) return false;
+    // Logo items carry a name at most; feature tiles and list rows carry sentences.
+    if (kids.filter((k) => clean(k.textContent).length <= 32).length < kids.length * 0.6) return false;
+    if (LOGO_CTX.test(ctxOf(parent))) return true;
+    const real = withMark.filter((m) => brandNamed(m) || (!uiGlyph(m) && wordmark(m)));
+    return real.length >= withMark.length * 0.6;
+  };
+  const seen = new Set();
+  for (const parent of document.body.querySelectorAll("ul, ol, div, p, nav")) {
+    if (!visible(parent) || seen.has(parent)) continue;
+    const kids = kidsOf(parent).filter(visible);
+    if (kids.length < 3) continue;
+    const marks = kids.map((k) => [k, ...k.querySelectorAll("svg, img, span, i")].find((m) => {
+      const cs = getComputedStyle(m);
+      const r = m.getBoundingClientRect();
+      return (m.tagName === "svg" || m.tagName === "IMG" || isMasked(cs)) && r.height >= 6 && r.height <= 64 && r.width <= 200;
+    }));
+    const withMark = marks.filter(Boolean);
+    if (withMark.length >= 3 && withMark.length >= kids.length * 0.6 && !parent.closest("nav") && logoRow(parent, kids, withMark)) {
+      seen.add(parent);
+      const masked = withMark.filter((m) => isMasked(getComputedStyle(m))).length;
+      const singleFill = withMark.filter((m) => m.tagName === "svg" && new Set([...m.querySelectorAll("[fill]")].map((p) => p.getAttribute("fill")).filter((f) => f && f !== "none")).size <= 1).length;
+      const px = Math.round(withMark[0].getBoundingClientRect().height);
+      const fills = withMark[0].tagName === "svg" ? [...withMark[0].querySelectorAll("[fill]")].map((p) => p.getAttribute("fill")).filter((f) => f && f !== "none" && f !== "currentColor") : [];
+      const colour = masked ? getComputedStyle(withMark[0]).backgroundColor : fills[0] ?? getComputedStyle(withMark[0]).color;
+      if (masked + singleFill >= withMark.length * 0.6) add("brand-marks", parent, `${withMark.length} brand marks all in one colour (${colour}${masked ? ", painted through a CSS mask" : ""}) at ${px}px`, { names: kids.map((k) => clean(k.textContent)).filter(Boolean).slice(0, 12) });
+      else if (px < 20) add("brand-marks", parent, `${withMark.length} brand marks only ${px}px tall`, { names: kids.map((k) => clean(k.textContent)).filter(Boolean).slice(0, 12) });
+    }
+    // Names without marks in a "works with / trusted by" row.
+    const label = clean(parent.parentElement?.textContent ?? "").slice(0, 200);
+    const names = kids.map((k) => clean(k.textContent)).filter((t) => t && t.length <= 24 && /^[A-Z0-9]/.test(t));
+    if (!withMark.length && names.length >= 3 && names.length === kids.length && /works with|trusted by|used by|integrat|partners|customers|powered by|built with/i.test(label) && !parent.closest("nav, footer")) {
+      seen.add(parent);
+      add("brand-marks", parent, `${names.length} brand names as plain text, no marks`, { names });
+    }
+  }
+
+  // Form controls left to the browser, or unlabeled.
+  const bodyFont = getComputedStyle(document.body).fontFamily;
+  for (const el of document.body.querySelectorAll("input:not([type=hidden]), select, textarea")) {
+    if (!visible(el)) continue;
+    const cs = getComputedStyle(el);
+    const type = el.tagName === "INPUT" ? el.type : el.tagName.toLowerCase();
+    const issues = [];
+    if (["checkbox", "radio", "range", "file", "date", "color"].includes(type) && cs.appearance !== "none") issues.push(`default browser ${type}`);
+    if (type === "select" && cs.appearance !== "none" && cs.backgroundImage === "none") issues.push("native select arrow and menu");
+    if (cs.borderTopStyle === "inset" || (parseFloat(cs.borderTopWidth) === 2 && cs.borderTopColor === "rgb(118, 118, 118)")) issues.push("browser default border");
+    if (cs.fontFamily !== bodyFont && !["checkbox", "radio", "range", "color"].includes(type)) issues.push(`font not inherited (${cs.fontFamily.split(",")[0]})`);
+    const labelled = el.labels?.length || el.getAttribute("aria-label") || el.getAttribute("aria-labelledby") || el.title;
+    if (!labelled) issues.push(el.placeholder ? "placeholder used as the only label" : "no label");
+    if (issues.length) add("inputs", el, `${type}: ${issues.join("; ")}`);
+  }
+
+  // Bare empty states and leaked nulls.
+  for (const n of textNodes) {
+    const t = clean(n.textContent);
+    if (/^(undefined|null|NaN|\[object Object\]|Invalid Date)$/.test(t)) add("empty-state", n.parentElement, `"${t}" shown to the reader`);
+    else if (/^(no (data|results?|items?|records?|entries|activity|messages|events|files)( (found|yet|available))?|nothing (here|to show)( yet)?|empty|n\/a|none)\.?$/i.test(t)) add("empty-state", n.parentElement, `bare empty state "${t}"`);
+  }
+
+  // Numbers: long digits without separators, too many decimals, raw ISO timestamps, numeric cells without tabular figures.
+  for (const n of textNodes) {
+    const t = clean(n.textContent);
+    const el = n.parentElement;
+    if (/(?<![\d.,:#\/-])\d{5,}(?![\d.,])/.test(t) && !/\b(19|20)\d{2}\b/.test(t.match(/\d{5,}/)?.[0] ?? "") && !/https?:|@|#/.test(t)) add("numbers", el, `unformatted number in "${t.slice(0, 40)}"`);
+    else if (/[$€£¥]\s?\d{4,}(?![\d,])/.test(t)) add("numbers", el, `currency without a thousands separator: "${t.slice(0, 40)}"`);
+    else if (/\d+\.\d{4,}/.test(t)) add("numbers", el, `too many decimals: "${t.slice(0, 40)}"`);
+    else if (/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/.test(t)) add("numbers", el, `raw ISO timestamp: "${t.slice(0, 40)}"`);
+  }
+  const cells = [...document.querySelectorAll("td, [role=cell]")].filter((c) => visible(c) && /^[\s$€£%+\-−\d.,:]+$/.test(c.textContent) && /\d/.test(c.textContent));
+  const plain = cells.filter((c) => !/tabular/.test(getComputedStyle(c).fontVariantNumeric));
+  if (plain.length >= 3) add("numbers", plain[0], `${plain.length} numeric table cells without tabular figures, so columns don't line up`);
+
+  // Emoji in UI copy; icons from mixed families.
+  for (const n of textNodes) {
+    const m = clean(n.textContent).match(/(?![©®™])\p{Extended_Pictographic}/u);
+    if (m) add("emoji", n.parentElement, `emoji "${m[0]}" in "${clean(n.textContent).slice(0, 40)}"`);
+  }
+  const icons = [...document.querySelectorAll("svg")].filter((s) => {
+    const r = s.getBoundingClientRect();
+    return visible(s) && r.width >= 10 && r.width <= 32 && r.height <= 32;
+  });
+  const strokes = new Map();
+  let filled = 0;
+  let stroked = 0;
+  for (const s of icons) {
+    const sw = s.getAttribute("stroke-width") ?? s.querySelector("[stroke-width]")?.getAttribute("stroke-width");
+    const isStroke = (s.getAttribute("stroke") && s.getAttribute("stroke") !== "none") || s.getAttribute("fill") === "none";
+    if (isStroke) {
+      stroked++;
+      if (sw) strokes.set(sw, (strokes.get(sw) ?? 0) + 1);
+    } else filled++;
+  }
+  if (strokes.size > 1) add("icons", null, `icons with ${strokes.size} different stroke widths (${[...strokes].map(([w, n]) => `${w}×${n}`).join(", ")}); one set, one weight`);
+  if (filled >= 3 && stroked >= 3) add("icons", null, `${filled} filled and ${stroked} outlined icons mixed on one page`);
+
+  // Placeholder and lorem text, placeholder images.
+  for (const n of textNodes) {
+    const t = clean(n.textContent);
+    if (/lorem ipsum|dolor sit amet|\b(john|jane) doe\b|\bacme\b|\bfoo\b|\bbar baz\b|\bTODO\b|\bTBD\b|\bxxx+\b|example\.com|your (company|name) here|placeholder/i.test(t)) add("placeholder", n.parentElement, `placeholder text "${t.slice(0, 50)}"`);
+  }
+  for (const img of document.querySelectorAll("img")) {
+    const src = img.currentSrc || img.src || "";
+    if (/placeholder|placehold|picsum|dummyimage|via\.placeholder|loremflickr|unsplash\.it|randomuser\.me|pravatar/i.test(src)) add("placeholder", img, `placeholder image (${src.slice(0, 60)})`);
+    else if (visible(img) && img.complete && img.naturalWidth === 0) add("placeholder", img, `broken image (${src.slice(0, 60)})`);
+  }
+
+  // Badge soup: many small pills in one card or row.
+  const badges = all.filter((el) => {
+    if (!visible(el) || el.children.length > 1) return false;
+    const r = el.getBoundingClientRect();
+    const cs = getComputedStyle(el);
+    const t = clean(el.textContent);
+    return t && t.length <= 24 && r.height >= 14 && r.height <= 30 && parseFloat(cs.fontSize) <= 13 && parseFloat(cs.borderTopLeftRadius) >= 4 && (cs.backgroundColor !== "rgba(0, 0, 0, 0)" || cs.borderTopStyle !== "none") && /inline|flex/.test(cs.display) && !el.matches("button, a, input, select, kbd");
+  });
+  const groups = new Map();
+  for (const b of badges) {
+    let g = b.parentElement;
+    for (let k = 0; k < 2 && g.parentElement && g.getBoundingClientRect().width < 280; k++) g = g.parentElement;
+    groups.set(g, [...(groups.get(g) ?? []), b]);
+  }
+  for (const [g, list] of groups) if (list.length >= 5) add("badges", g, `${list.length} badges in one place: ${list.slice(0, 6).map((b) => clean(b.textContent)).join(", ")}`);
+  if (badges.length >= 18) add("badges", null, `${badges.length} badges on the page`);
+
+  // Head: favicon, social image, description.
+  const head = (q) => document.head.querySelector(q);
+  if (!head("link[rel~=icon]")) add("meta", null, "no favicon link (link rel=icon)");
+  if (!head("link[rel=apple-touch-icon]")) add("meta", null, "no apple-touch-icon");
+  if (!head("meta[property='og:image']")) add("meta", null, "no social share image (og:image): links to this page show a blank card");
+  if (!head("meta[name='twitter:card']")) add("meta", null, "no twitter:card");
+  if (!head("meta[name=description]")) add("meta", null, "no meta description");
+  if (!head("meta[property='og:title']")) add("meta", null, "no og:title");
+
+  return out.slice(0, 80);
+};