@palate/cli 0.0.0-stage → 0.0.2

package/src/page-devices.js

@@ -0,0 +1,365 @@
+// Runs inside the page (read as text and evaluated with the sections from page-sections.js). The whole-page
+// facts a designer notices across sections: devices repeated in every section (kicker labels, numbers,
+// framed screenshots, backdrops, rules), how the product is shown (static pictures or live UI), logo rows
+// and how visible they are, and what moves.
+(sections) => {
+  const vw = innerWidth;
+  const clean = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+  const abs = (el) => {
+    const r = el.getBoundingClientRect();
+    return { x: r.left + scrollX, y: r.top + scrollY, w: r.width, h: r.height };
+  };
+  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;
+  };
+  const sectionOf = (el) => {
+    const b = abs(el);
+    const s = sections.find((s) => b.y + b.h / 2 >= s.box.y && b.y + b.h / 2 <= s.box.y + s.box.height);
+    return s ? s.index : null;
+  };
+  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;
+      }
+      parts.unshift(e.tagName.toLowerCase());
+    }
+    return parts.join(" > ");
+  };
+  // ---- 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);
+  const rgb = (c) => toRgba(c) ?? [];
+  const lum = ([r, g, b]) => {
+    const f = (v) => ((v /= 255) <= 0.03928 ? v / 12.92 : ((v + 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 Math.round(((x + 0.05) / (y + 0.05)) * 10) / 10;
+  };
+  const bgOf = (el) => {
+    for (let e = el; e; e = e.parentElement) {
+      const c = rgb(getComputedStyle(e).backgroundColor);
+      if (c.length >= 3 && (c[3] ?? 1) > 0.5) return c.slice(0, 3);
+    }
+    return [255, 255, 255];
+  };
+
+  // Product UI shown on the page (a code-built app window, a demo, a figure): its small mono labels ("POST
+  // /checkout", a column count over "Shelf") are the product's own type, not the page's kicker labels. Marked
+  // ([data-product], a figure, role=img, an aria-hidden or inert miniature), or a framed object (its own ground,
+  // shadow or border all round) holding many small UI texts.
+  const surfaced = (e) => {
+    const cs = getComputedStyle(e);
+    const own = rgb(cs.backgroundColor);
+    const under = e.parentElement ? bgOf(e.parentElement) : [255, 255, 255];
+    const filled = own.length >= 3 && (own[3] ?? 1) > 0.5 && Math.hypot(own[0] - under[0], own[1] - under[1], own[2] - under[2]) > 6;
+    const sides = ["Top", "Right", "Bottom", "Left"].filter((s) => parseFloat(cs[`border${s}Width`]) > 0 && cs[`border${s}Style`] !== "none" && (rgb(cs[`border${s}Color`])[3] ?? 1) > 0.1).length;
+    return filled || (cs.boxShadow && cs.boxShadow !== "none") || sides >= 3;
+  };
+  const smallTexts = (e) => {
+    let n = 0;
+    for (const k of e.querySelectorAll("span, div, p, li, td, th, small, code, button, a, dt, dd, time")) {
+      if (n >= 8) break;
+      if (k.children.length || !clean(k.textContent) || parseFloat(getComputedStyle(k).fontSize) > 14.5) continue;
+      n++;
+    }
+    return n;
+  };
+  const productMemo = new Map();
+  const productOf = (el) => {
+    if (productMemo.has(el)) return productMemo.get(el);
+    let found = null;
+    for (let e = el.parentElement; e && e !== document.body && !found; e = e.parentElement) {
+      if (e.matches("section, main, [data-section]")) break;
+      const r = e.getBoundingClientRect();
+      if (e.matches("[data-product], figure, [role=img]") || (e.matches("[aria-hidden=true], [inert]") && r.width >= 120 && r.height >= 80)) found = e;
+      else if (r.width >= 240 && r.height >= 120 && surfaced(e) && smallTexts(e) >= 8) found = e;
+    }
+    productMemo.set(el, found);
+    return found;
+  };
+  // Kicker labels: small, uppercase / mono / tracked or numbered text sitting directly above a section's heading
+  // (an h1 or h2, or the first heading of its section), outside product UI.
+  const sectionHeads = new Set(
+    sections.map((s) => {
+      let root = null;
+      try {
+        root = document.querySelector(s.selector);
+      } catch {}
+      const hs = root ? [...root.querySelectorAll("h1, h2, h3")].filter((h) => visible(h) && !productOf(h)) : [];
+      return hs[0] ?? null;
+    }),
+  );
+  const headings = [...document.querySelectorAll("h1, h2, h3")].filter((h) => visible(h) && (h.tagName !== "H3" || sectionHeads.has(h)) && !productOf(h));
+  const kickers = [];
+  for (const el of document.body.querySelectorAll("p, span, div, small, strong, em, li")) {
+    const t = clean(el.textContent);
+    if (!t || t.length > 48 || el.querySelector("p, div, h1, h2, h3, li, ul, img, svg") || !visible(el)) continue;
+    if (el.parentElement && kickers.some((k) => k.el.contains(el) || el.contains(k.el))) continue;
+    const cs = getComputedStyle(el);
+    const size = parseFloat(cs.fontSize);
+    const styled = cs.textTransform === "uppercase" || /mono/i.test(cs.fontFamily) || parseFloat(cs.letterSpacing) / size > 0.04 || /^\d{1,2}(\s*[·.\-—|]|$)/.test(t);
+    if (size > 13.5 || !styled || productOf(el)) continue;
+    const b = abs(el);
+    const h = headings.find((h) => {
+      const hb = abs(h);
+      // Directly above: the next thing down, within a short gap, and over the heading (not off to one side). Or a
+      // section number on the heading's first line, just left of it ("01  Features").
+      const above = hb.y >= b.y + b.h - 4 && hb.y - (b.y + b.h) < 72 && Math.min(hb.x + hb.w, b.x + b.w) - Math.max(hb.x, b.x) > Math.min(b.w, hb.w) * 0.25;
+      const beside = b.y + b.h / 2 >= hb.y && b.y + b.h / 2 <= hb.y + Math.min(hb.h, 80) && b.x + b.w <= hb.x + 4 && hb.x - (b.x + b.w) < 120;
+      return above || beside;
+    });
+    if (h) kickers.push({ el, text: t, section: sectionOf(el), before: clean(h.textContent).slice(0, 50) });
+  }
+
+  // How the product is shown: big static pictures vs live UI (video, canvas, iframes, real DOM).
+  const media = [];
+  for (const el of document.body.querySelectorAll("img, picture > img, video, canvas, iframe, svg")) {
+    if (!visible(el)) continue;
+    const r = el.getBoundingClientRect();
+    if (r.width < Math.min(400, vw * 0.35) || r.height < 160) continue;
+    let framed = false;
+    const frames = [];
+    for (let e = el.parentElement, k = 0; e && k < 4; e = e.parentElement, k++) {
+      const cs = getComputedStyle(e);
+      if (parseFloat(cs.borderTopLeftRadius) > 4 && (cs.backgroundImage.includes("gradient") || cs.boxShadow !== "none" || parseFloat(cs.paddingTop) >= 8 || cs.borderTopStyle !== "none")) (framed = true), frames.push(e);
+    }
+    const tag = el.tagName.toLowerCase();
+    // A decorative image laid behind content (empty alt, absolutely filling its frame, with content on top) is a
+    // backdrop, such as a painting under the hero or behind a feature: not the product shown as a picture.
+    const backdrop =
+      tag === "img" && el.getAttribute("alt") === "" && getComputedStyle(el).position === "absolute" && el.parentElement && [...el.parentElement.children].some((c) => c !== el && visible(c) && c.getBoundingClientRect().height > 40);
+    const src = el.getAttribute("src") ?? "";
+    const alt = clean(el.getAttribute("alt"));
+    let kind = backdrop ? "backdrop image" : tag === "img" ? "static picture" : tag === "svg" ? "svg illustration" : `live ${tag}`;
+    let screenshot = false;
+    if (kind === "static picture") {
+      // A photo or a painting (palate's own CC0 imagery, a credited picture, a JPEG, art) is material, not the
+      // product shown as a screenshot. A screenshot says so (src or alt), or is a PNG/WebP in UI proportions in a
+      // frame with browser-chrome dots.
+      const file = (el.currentSrc || src).toLowerCase();
+      const holder = el.closest("figure") ?? frames[frames.length - 1] ?? el.parentElement;
+      const credit = clean(`${el.closest("figure")?.querySelector("figcaption")?.textContent ?? ""} ${holder && holder.getBoundingClientRect().height < r.height + 160 ? holder.textContent : ""} ${el.getAttribute("title") ?? ""}`);
+      const uiWords = /screen ?shot|dashboard|\bapp\b|\bui\b|user interface|interface|console|admin|inbox|editor|product (shot|view|ui)|browser window/i;
+      const uiFile = /screen ?shot|dashboard|(^|[-_/.])(app|ui|screen|product)([-_/.]|$)/i;
+      const art = /\b(painting|painted|still life|portrait|landscape|engraving|etching|drawing|illustration|watercolou?r|photograph|photo of|lithograph|woodcut|sketch|museum|artwork)\b/i;
+      const credited = /\bCC0\b|\bmuseum\b|\bphoto(graph)?( by)?:|public domain|courtesy of|©|rijksmuseum|smithsonian|wikimedia|art institute|unsplash|\bthe met\b|metmuseum/i.test(credit);
+      const saysUi = uiWords.test(alt) || uiFile.test(file.replace(/^.*\/\/[^/]+/, ""));
+      const photo = !saysUi && (/\/images\/palate\//.test(file) || credited || art.test(alt) || /\.(jpe?g)(\?|#|$)/.test(file));
+      const dots = (f) => {
+        const fb = f.getBoundingClientRect();
+        const round = [...f.querySelectorAll("span, i, div, b, circle")].filter((d) => {
+          const db = d.getBoundingClientRect();
+          if (db.width < 5 || db.width > 16 || Math.abs(db.width - db.height) > 1.5 || db.top - fb.top > 56) return false;
+          return d.tagName === "circle" || parseFloat(getComputedStyle(d).borderTopLeftRadius) >= db.width * 0.4;
+        });
+        return round.length >= 3 && round.some((d, i) => i >= 2 && Math.abs(d.getBoundingClientRect().top - round[i - 2].getBoundingClientRect().top) < 3);
+      };
+      const ratio = r.width / Math.max(1, r.height);
+      screenshot = saysUi || (!photo && /\.(png|webp|avif)(\?|#|$)/.test(file) && ratio >= 1.2 && ratio <= 2.4 && frames.some(dots));
+      if (photo) kind = "photo or artwork";
+    }
+    media.push({ kind, section: sectionOf(el), size: `${Math.round(r.width)}×${Math.round(r.height)}`, framed, screenshot, alt: alt.slice(0, 80) || null, src: src.slice(0, 80) || null });
+  }
+
+  // Logo / brand rows: three or more siblings that each pair a small mark with a short name (or are a mark).
+  const markOf = (el) => {
+    const cands = [el, ...el.querySelectorAll("svg, img, span, div, i")].filter((m) => {
+      if (!visible(m)) return false;
+      const r = m.getBoundingClientRect();
+      const cs = getComputedStyle(m);
+      const isMark = m.tagName === "svg" || m.tagName === "IMG" || (cs.maskImage && cs.maskImage !== "none") || (cs.webkitMaskImage && cs.webkitMaskImage !== "none");
+      return isMark && r.height <= 64 && r.width <= 200 && r.height >= 6;
+    });
+    return cands[0] ?? null;
+  };
+  const rows = [];
+  const seen = new Set();
+  // Children of display:contents wrappers count as the parent's own.
+  const kidsOf = (p) => [...p.children].flatMap((k) => (getComputedStyle(k).display === "contents" ? kidsOf(k) : [k]));
+  for (const parent of document.body.querySelectorAll("ul, ol, div, nav, section, p")) {
+    const kids = kidsOf(parent).filter(visible);
+    if (kids.length < 3 || seen.has(parent) || !visible(parent)) continue;
+    const marks = kids.map((k) => ({ k, m: markOf(k) })).filter((x) => x.m);
+    if (marks.length < 3 || marks.length < kids.length * 0.6) continue;
+    const names = marks.map((x) => clean(x.k.textContent)).filter((t) => t && t.length < 32);
+    if (parent.closest("nav") && !names.length) continue;
+    seen.add(parent);
+    const m0 = marks[0].m;
+    const cs = getComputedStyle(m0);
+    const masked = (cs.maskImage && cs.maskImage !== "none") || (cs.webkitMaskImage && cs.webkitMaskImage !== "none");
+    const colours = new Set(
+      marks.map(({ m }) => {
+        const c = getComputedStyle(m);
+        if (m.tagName === "IMG") return `img:${m.getAttribute("src")}`;
+        // The colours the marks are painted in (computed, so classes and currentColor count), not their attributes.
+        if (m.tagName === "svg") return [...m.querySelectorAll("path, circle, rect, polygon, ellipse")].slice(0, 8).map((p) => { const pc = getComputedStyle(p); return `${pc.fill}/${pc.stroke}`; }).join(",") || c.color;
+        return c.backgroundColor;
+      }),
+    );
+    const markColour = m0.tagName === "IMG" ? null : rgb(masked ? cs.backgroundColor : cs.color).slice(0, 3);
+    const textEl = marks[0].k;
+    // A row inside a decorative miniature (an aria-hidden or inert preview of a page) is part of a picture.
+    const hidden = parent.closest("[aria-hidden=true], [inert]");
+    const hb = hidden?.getBoundingClientRect();
+    rows.push({
+      section: sectionOf(parent),
+      selector: sel(parent),
+      inPreview: Boolean(hb && hb.width >= 120 && hb.height >= 80),
+      // Outline icons (stroke only, like a feature list's icons) are not brand marks.
+      icons: marks.every(({ m }) => m.tagName === "svg" && [...m.querySelectorAll("path, circle, rect, polygon, line, polyline")].every((p) => { const pc = getComputedStyle(p); return pc.fill === "none" && pc.stroke !== "none"; })),
+      count: marks.length,
+      names: names.slice(0, 12),
+      markPx: Math.round(m0.getBoundingClientRect().height),
+      textPx: parseFloat(getComputedStyle(textEl).fontSize),
+      // One colour across the row: masks painted alike, or SVGs filled alike (a masked row in brand colours is not).
+      monochrome: (masked || m0.tagName === "svg") && colours.size <= 1,
+      // Marks that say what they are (alt, aria-label or title): a logo row without visible names.
+      labelled: marks.filter(({ m, k }) => clean(m.getAttribute("alt") ?? m.getAttribute("aria-label") ?? m.getAttribute("title") ?? k.getAttribute("aria-label") ?? m.querySelector?.("title")?.textContent)).length,
+      // Round marks without names are avatars, not logos.
+      avatars: !names.length && marks.every(({ m }) => { const r = parseFloat(getComputedStyle(m).borderTopLeftRadius); return /%/.test(getComputedStyle(m).borderTopLeftRadius) || r >= m.getBoundingClientRect().width * 0.4; }),
+      paintedByMask: Boolean(masked),
+      contrast: markColour ? contrast(markColour, bgOf(parent)) : null,
+      opacity: parseFloat(getComputedStyle(parent).opacity),
+    });
+  }
+
+  // The page's ground: the median section background (an app often paints it on a wrapper, not the body).
+  const sectionLums = sections.map((s) => document.querySelector(s.selector)).filter(Boolean).map((r) => lum(bgOf(r))).sort((x, y) => x - y);
+  const ground = sectionLums.length ? sectionLums[Math.floor(sectionLums.length / 2)] : lum(bgOf(document.body));
+  // Devices per section, to spot the same move repeated in every section.
+  const devices = sections.map((s) => {
+    const inS = (el) => sectionOf(el) === s.index;
+    const set = [];
+    if (kickers.some((k) => k.section === s.index)) set.push("kicker label above the heading");
+    if (kickers.some((k) => k.section === s.index && /^\d{1,2}/.test(k.text))) set.push("section number");
+    if (media.some((m) => m.section === s.index && m.kind === "static picture" && m.framed && m.screenshot)) set.push("framed screenshot");
+    const els = [...document.querySelectorAll(s.selector + ", " + s.selector + " *")].slice(0, 600);
+    if (els.some((e) => getComputedStyle(e).backgroundImage.includes("gradient") && e.getBoundingClientRect().width > vw * 0.3)) set.push("gradient backdrop");
+    const root = document.querySelector(s.selector);
+    // A band is a device only against the page's own ground: a dark band on a light page, a light band on a dark
+    // one. On a dark page every section is dark, and that is the ground, not a device repeated in every section.
+    const band = root ? lum(bgOf(root)) : null;
+    if (band != null && ground >= 0.2 && band < 0.05) set.push("dark band");
+    if (band != null && ground < 0.05 && band > 0.4) set.push("light band");
+    const h = root?.querySelector("h2, h1");
+    if (h) {
+      const hb = abs(h);
+      const p = [...root.querySelectorAll("p")].find((p) => {
+        const pb = abs(p);
+        return pb.x > hb.x + hb.w - 4 && Math.abs(pb.y - hb.y) < 80;
+      });
+      if (p) set.push("two-column head (heading left, sentence right)");
+      if (getComputedStyle(h.parentElement).borderTopStyle !== "none" && parseFloat(getComputedStyle(h.parentElement).borderTopWidth) > 0) set.push("rule above the heading");
+    }
+    return { section: s.index, devices: set, inS };
+  });
+  const tally = {};
+  for (const d of devices) for (const x of d.devices) tally[x] = [...(tally[x] ?? []), d.section];
+
+  // What moves: CSS animations and transitions on the page, plus what scripts set up (counted by palate's init script).
+  const all = [...document.body.querySelectorAll("*")];
+  const animated = all.filter((e) => getComputedStyle(e).animationName !== "none" && visible(e));
+  const transitioned = all.filter((e) => {
+    const d = getComputedStyle(e).transitionDuration.split(",").map(parseFloat);
+    return d.some((x) => x > 0) && visible(e);
+  });
+  const props = {};
+  for (const e of transitioned) for (const p of getComputedStyle(e).transitionProperty.split(",").map((x) => x.trim())) props[p] = (props[p] ?? 0) + 1;
+  const counters = window.__palateMotion ?? {};
+
+  return {
+    kickers: kickers.map(({ text, section, before }) => ({ text, section, before })),
+    media,
+    logoRows: rows.slice(0, 6),
+    repeated: Object.entries(tally).filter(([, s]) => s.length >= 3).map(([device, s]) => ({ device, sections: s })),
+    perSection: devices.map(({ section, devices }) => ({ section, devices })),
+    motion: {
+      cssAnimations: animated.length,
+      animationNames: [...new Set(animated.map((e) => getComputedStyle(e).animationName))].slice(0, 6),
+      transitions: transitioned.length,
+      transitionProps: Object.entries(props).sort((a, b) => b[1] - a[1]).slice(0, 6).map(([p, n]) => `${p}×${n}`),
+      scrollObservers: counters.io ?? null,
+      scriptedAnimations: counters.waapi ?? null,
+      started: counters.started ?? null,
+      entrances: counters.entrances ?? null,
+      startedProps: Object.entries(counters.props ?? {}).sort((a, b) => b[1] - a[1]).slice(0, 5).map(([p, n]) => `${p}×${n}`),
+      styled: counters.styled ? counters.styled.size : null,
+    },
+  };
+};

package/src/page-fingerprint.js

@@ -0,0 +1,281 @@
+// Runs inside the page (read as text and evaluated). Reduces a rendered page to its skeleton (one token per
+// vertical band) and finds the AI-default patterns, so palate can tell when a screen looks generated or
+// repeats one built before. Tokens: C/L = centred or left-led, digit = layout columns, w = a framed
+// panel (product window, big card), m = big media, gN = a grid of N equal items, b = own background.
+() => {
+  const vw = window.innerWidth;
+  const visible = (el) => {
+    const r = el.getBoundingClientRect();
+    if (r.width < 2 || r.height < 2) return false;
+    const cs = getComputedStyle(el);
+    return cs.visibility !== "hidden" && cs.display !== "none" && parseFloat(cs.opacity) > 0.01;
+  };
+  const kids = (el) => Array.from(el.children).filter(visible);
+  const ownText = (el) => Array.from(el.childNodes).filter((n) => n.nodeType === 3).map((n) => n.textContent).join("").trim();
+  const bgOf = (el) => getComputedStyle(el).backgroundColor;
+  const clear = (c) => !c || c === "transparent" || /rgba\([^)]*,\s*0\)$/.test(c);
+  const pageBg = clear(bgOf(document.body)) ? bgOf(document.documentElement) : bgOf(document.body);
+  const hue = (c) => {
+    const m = c.match(/[\d.]+/g);
+    if (!m) return null;
+    const [r, g, b] = m.slice(0, 3).map((v) => Number(v) / 255);
+    const max = Math.max(r, g, b);
+    const min = Math.min(r, g, b);
+    const d = max - min;
+    if (d < 0.12) return null;
+    const h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    return (h * 60 + 360) % 360;
+  };
+
+  // Rows: groups of 3+ siblings side by side (same top), the raw material of grids and strips.
+  const rows = [];
+  for (const el of document.body.querySelectorAll("*")) {
+    if (el.closest("svg")) continue;
+    const ks = kids(el);
+    if (ks.length < 3) continue;
+    const byTop = new Map();
+    for (const k of ks) {
+      const t = Math.round(k.getBoundingClientRect().top / 6);
+      byTop.set(t, [...(byTop.get(t) ?? []), k]);
+    }
+    for (const group of byTop.values()) {
+      if (group.length < 3) continue;
+      const ws = group.map((g) => g.getBoundingClientRect().width);
+      rows.push({ parent: el, items: group, equal: Math.max(...ws) / Math.max(1, Math.min(...ws)) < 1.15, top: group[0].getBoundingClientRect().top + scrollY });
+    }
+  }
+
+  // Bands: the page's vertical sections, found by descending through single wrappers.
+  let root = document.querySelector("main") ?? document.body;
+  for (let i = 0; i < 6; i++) {
+    const ks = kids(root);
+    const tall = ks.filter((k) => k.getBoundingClientRect().height > 40);
+    if (tall.length === 1 && tall[0].getBoundingClientRect().height > root.getBoundingClientRect().height * 0.8) root = tall[0];
+    else break;
+  }
+  let bandEls = kids(root).filter((k) => k.getBoundingClientRect().height >= 40);
+  const header = document.querySelector("body header, [role=banner]");
+  if (header && !root.contains(header) && visible(header)) bandEls = [header, ...bandEls];
+
+  const info = [];
+  const bands = bandEls.slice(0, 24).map((band) => {
+    const br = band.getBoundingClientRect();
+    let focal = null;
+    let size = 0;
+    for (const el of band.querySelectorAll("*")) {
+      if (!ownText(el) || !visible(el)) continue;
+      const s = parseFloat(getComputedStyle(el).fontSize);
+      if (s > size) {
+        size = s;
+        focal = el;
+      }
+    }
+    const fr = focal?.getBoundingClientRect();
+    const centred = fr && Math.abs(fr.left + fr.width / 2 - (br.left + br.width / 2)) < br.width * 0.05 && getComputedStyle(focal).textAlign === "center";
+    // Layout columns: descend through wrappers until the band splits, then count what sits side by side.
+    let box = band;
+    for (let i = 0; i < 8; i++) {
+      const ks = kids(box);
+      if (ks.length === 1) box = ks[0];
+      else break;
+    }
+    const top = kids(box);
+    // Side by side = overlapping vertically with the first wide child (columns may be centred, not top-aligned).
+    const wide = top.filter((k) => k.getBoundingClientRect().width > 80);
+    const f0 = wide[0]?.getBoundingClientRect();
+    const across = f0 ? wide.filter((k) => {
+      const r = k.getBoundingClientRect();
+      return Math.min(r.bottom, f0.bottom) - Math.max(r.top, f0.top) > Math.min(r.height, f0.height) * 0.3;
+    }) : [];
+    const cols = Math.max(1, Math.min(across.length, 9));
+    // A framed panel (a product window, a big card): own surface or border, rounded, a real share of the band.
+    const panel = Array.from(band.querySelectorAll("div, section, figure, article, aside")).some((el) => {
+      const r = el.getBoundingClientRect();
+      if (r.width * r.height < br.width * br.height * 0.15 || r.width > br.width * 0.9) return false;
+      const cs = getComputedStyle(el);
+      return parseFloat(cs.borderTopLeftRadius) >= 6 && (parseFloat(cs.borderTopWidth) > 0 || (!clear(cs.backgroundColor) && cs.backgroundColor !== bgOf(band))) && el.querySelectorAll("*").length > 25;
+    });
+    // A grid of equal items anywhere in the band (cards, tiers, tiles).
+    const grid = rows.filter((r) => (band.contains(r.parent) || band === r.parent) && r.equal).sort((a, b) => b.items.length - a.items.length)[0];
+    const mediaShare = Math.max(0, ...Array.from(band.querySelectorAll("img, video, canvas, svg, picture")).map((m) => {
+      const r = m.getBoundingClientRect();
+      return (r.width * r.height) / Math.max(1, br.width * br.height);
+    }));
+    const media = mediaShare > 0.15;
+    const ownBg = !clear(bgOf(band)) && bgOf(band) !== pageBg;
+    // Kept for the layout memory: what the band holds and how its columns are proportioned.
+    const ws = across.map((k) => k.getBoundingClientRect().width);
+    info.push({ top: Math.round(br.top + scrollY), height: Math.round(br.height), focal: Math.round(size), centred: Boolean(centred), cols, ratio: ws.length > 1 ? +(Math.max(...ws) / Math.max(1, Math.min(...ws))).toFixed(2) : 1, media: +Math.min(1, mediaShare).toFixed(2), panel, grid: grid ? grid.items.length : 0, ownBg, header: band === header });
+    return `${centred ? "C" : "L"}${cols}${panel ? "w" : ""}${media ? "m" : ""}${grid ? `g${Math.min(grid.items.length, 9)}` : ""}${ownBg ? "b" : ""}`;
+  });
+
+  // The AI defaults, measured.
+  const found = new Set();
+  const textOf = (el) => (el.innerText || "").trim();
+  // A product drawn in HTML (a mock window, a picture of the app): its own stats, chips and icons are the
+  // product's, not the page's.
+  const MOCK = "[aria-hidden=true], [role=img], [inert], [data-product], [role=group][aria-label], [role=group][aria-labelledby], figure";
+  const mockOf = (el) => (el.nodeType === 1 ? el : el.parentElement)?.closest(MOCK) ?? null;
+  for (const r of rows) {
+    const items = r.items;
+    if (r.equal && items.length <= 4 && items.every((it) => {
+      const icon = Array.from(it.querySelectorAll("svg, img")).find((s) => s.getBoundingClientRect().width <= 56);
+      return icon && it.querySelector("h2, h3, h4, strong, [class*=title]") && textOf(it).length > 30 && it.getBoundingClientRect().height < 420;
+    })) found.add("icon-feature-trio");
+    // Logos: one row of 4 to 12 small pictures of a similar height with no text, outside a product mock. A
+    // grid of glyphs (many rows from one parent, a kiln shelf of pots) is a picture, not a logo row.
+    const logoish = (it) => {
+      const media = it.matches("img, svg") ? [it] : Array.from(it.querySelectorAll("img, svg")).filter((m) => !m.parentElement.closest("svg") && visible(m));
+      return media.length === 1 && textOf(it).length < 2;
+    };
+    const hs = items.map((it) => it.getBoundingClientRect().height);
+    const siblingRows = rows.filter((o) => o.parent === r.parent).length;
+    if (items.length >= 4 && items.length <= 12 && siblingRows <= 2 && items.every(logoish) && Math.max(...hs) <= 80 && Math.min(...hs) >= 12 && Math.max(...hs) / Math.min(...hs) <= 1.6 && !mockOf(r.parent)) found.add("logo-strip");
+    // Stats: 3 to 5 items, each a big numeral (not a price, a time or a date) with a short label and no
+    // action, outside a product mock. Price heads in a pricing ledger and a timeline of times are not stats.
+    const NUMERAL = /^[+~<>]?\s?\d[\d.,]*\s?(%|[kKmMbB]\+?|\+|×|x)?(\s?\/\s?\d[\d.,]*\s?[kKmMbB%]?)?$|^\d+(\.\d+)?×$|^24\/7$/;
+    const bigNumber = (it) => Array.from(it.querySelectorAll("*")).concat(it).some((el) => {
+      const t = ownText(el).replace(/\s+/g, " ");
+      return t && NUMERAL.test(t) && !/^(19|20)\d\d$/.test(t) && parseFloat(getComputedStyle(el).fontSize) >= 26;
+    });
+    const PLAN = /\b(free|starter|basic|pro|plus|premium|team|business|enterprise|standard|growth|scale)\b/i;
+    const statItem = (it) => {
+      const t = textOf(it).replace(/\s+/g, " ");
+      if (!bigNumber(it) || /[$€£¥₹]|\b(USD|EUR|GBP)\b|\/\s?(mo|month|yr|year)\b|per (month|year|seat|user)/i.test(t)) return false;
+      if (/\b\d{1,2}:\d{2}\b|\b\d{1,2}\s?(am|pm)\b/i.test(t)) return false;
+      const head = it.querySelector("h2, h3, h4, h5");
+      return t.length <= 90 && !it.querySelector("a[href], button, input, select") && !(head && PLAN.test(head.textContent));
+    };
+    if (items.length >= 3 && items.length <= 5 && items.every(statItem) && !mockOf(r.parent)) found.add("stat-row");
+    const priced = items.filter((it) => /[$€£₹]\s?\d/.test(textOf(it))).length;
+    if (r.equal && items.length >= 3 && items.length <= 4 && priced >= items.length - 1 && items.every((it) => it.querySelector("a, button") && it.getBoundingClientRect().height > 200)) found.add("three-tier-pricing");
+    if (items.length >= 3 && items.every((it) => /^[“"]/.test(textOf(it)) || it.querySelector("blockquote"))) found.add("quote-grid");
+  }
+  const first = bandEls.find((b) => b !== header) ?? bandEls[0];
+  if (first && bands[bandEls.indexOf(first)]?.startsWith("C")) {
+    const actions = Array.from(first.querySelectorAll("a, button")).filter((a) => visible(a) && a.getBoundingClientRect().height >= 32);
+    if (actions.length >= 2) found.add("centred-hero");
+  }
+  if (first) {
+    let focal = null;
+    let size = 0;
+    for (const el of first.querySelectorAll("*")) {
+      const s = parseFloat(getComputedStyle(el).fontSize);
+      if (ownText(el) && s > size) {
+        size = s;
+        focal = el;
+      }
+    }
+    const fRect = focal?.getBoundingClientRect();
+    const ft = fRect?.top ?? 0;
+    for (const el of first.querySelectorAll("*")) {
+      const r = el.getBoundingClientRect();
+      const cs = getComputedStyle(el);
+      if (r.height > 0 && r.height <= 36 && r.bottom <= ft && ft - r.bottom < 120 && fRect && r.left < fRect.right && r.right > fRect.left && parseFloat(cs.borderTopLeftRadius) >= r.height / 2 - 1 && textOf(el).length > 2 && textOf(el).length < 60 && (!clear(cs.backgroundColor) || parseFloat(cs.borderTopWidth) > 0)) {
+        found.add("eyebrow-pill");
+        break;
+      }
+    }
+  }
+  let eyebrows = 0;
+  for (const h of document.querySelectorAll("h1, h2")) {
+    if (!visible(h)) continue;
+    const hr = h.getBoundingClientRect();
+    let prev = h.previousElementSibling;
+    if (!prev && h.parentElement) prev = h.parentElement.previousElementSibling;
+    if (!prev || !visible(prev)) continue;
+    const pr = prev.getBoundingClientRect();
+    const cs = getComputedStyle(prev);
+    const t = textOf(prev);
+    if (t.length > 1 && t.length < 50 && hr.top - pr.bottom < 32 && parseFloat(cs.fontSize) <= 14 && (cs.textTransform === "uppercase" || (t === t.toUpperCase() && /[A-Z]{3}/.test(t)))) eyebrows++;
+  }
+  if (eyebrows >= 2) found.add("eyebrow-label");
+  let pills = 0;
+  const pillHues = new Map();
+  let gradientHues = [];
+  for (const el of document.body.querySelectorAll("*")) {
+    if (!visible(el)) continue;
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    if (r.height <= 28 && r.width < 160 && parseFloat(cs.borderTopLeftRadius) >= r.height / 2 - 1 && textOf(el).length > 1 && !mockOf(el)) {
+      const h = hue(cs.backgroundColor);
+      if (h !== null) {
+        pills++;
+        const k = Math.round(h / 40);
+        pillHues.set(k, (pillHues.get(k) ?? 0) + 1);
+      }
+    }
+    if (/gradient/.test(cs.backgroundImage) && r.width * r.height > vw * 120) {
+      gradientHues.push(...(cs.backgroundImage.match(/rgba?\([^)]*\)/g) ?? []).map(hue).filter((h) => h !== null));
+    }
+    if (/blur\((\d+)/.test(cs.filter) && Number(cs.filter.match(/blur\((\d+)/)[1]) >= 40) found.add("glow");
+  }
+  // Confetti: many filled pills in three or more hues, each hue used more than once (a couple of status chips
+  // in a product mock are not it).
+  if (pills >= 8 && [...pillHues.values()].filter((n) => n >= 2).length >= 3) found.add("pill-rainbow");
+  if (gradientHues.some((h) => h >= 230 && h <= 300) && gradientHues.some((h) => h < 230 || h > 300 || h >= 260)) found.add("purple-blue-gradient");
+  if (/\b(John Doe|Jane Doe|Jane Smith|Acme|Lorem ipsum)\b/i.test(document.body.innerText)) found.add("generic-sample");
+
+  // Style, for the layout memory: what the type, colour and shapes are, measured from computed styles.
+  // Any CSS colour (rgb, oklch, lab, color()) to #rrggbb, through a 1×1 canvas; null when mostly transparent.
+  const ctx = Object.assign(document.createElement("canvas"), { width: 1, height: 1 }).getContext("2d", { willReadFrequently: true });
+  const seen = new Map();
+  const hex = (c) => {
+    if (!c || clear(c)) return null;
+    if (!seen.has(c)) {
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = "#000";
+      ctx.fillStyle = c;
+      ctx.fillRect(0, 0, 1, 1);
+      const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+      seen.set(c, a < 128 ? null : "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join(""));
+    }
+    return seen.get(c);
+  };
+  const fam = new Map();
+  const colors = new Map();
+  let head = null;
+  for (const el of document.body.querySelectorAll("*")) {
+    if (el.closest("svg") || !ownText(el) || !visible(el)) continue;
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    const f = cs.fontFamily.split(",")[0].replace(/["']/g, "").trim();
+    fam.set(f, (fam.get(f) ?? 0) + r.width * r.height);
+    colors.set(hex(cs.color), (colors.get(hex(cs.color)) ?? 0) + r.width * r.height);
+    const size = parseFloat(cs.fontSize);
+    if (r.top + scrollY < innerHeight * 1.5 && (!head || size > head.size)) head = { size: Math.round(size), weight: Number(cs.fontWeight) || 400, family: f, tracking: cs.letterSpacing === "normal" ? 0 : +(parseFloat(cs.letterSpacing) / size).toFixed(3), align: cs.textAlign, upper: cs.textTransform === "uppercase", italic: cs.fontStyle === "italic", text: ownText(el).slice(0, 60) };
+  }
+  const radii = new Map();
+  const accents = new Map();
+  for (const el of document.body.querySelectorAll("*")) {
+    if (!visible(el)) continue;
+    const cs = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    const hasSurface = !clear(cs.backgroundColor) || parseFloat(cs.borderTopWidth) > 0;
+    if (hasSurface && r.width > 40 && r.height > 24) {
+      const rad = Math.round(Math.min(parseFloat(cs.borderTopLeftRadius) || 0, r.height / 2));
+      const key = rad >= r.height / 2 - 1 && r.height < 64 ? "pill" : String(rad);
+      radii.set(key, (radii.get(key) ?? 0) + 1);
+    }
+    if (el.matches("a, button, [role=button]") && hue(hex(cs.backgroundColor)?.replace(/^#(..)(..)(..)$/, (_, r, g, b) => `rgb(${parseInt(r, 16)},${parseInt(g, 16)},${parseInt(b, 16)})`) ?? "") !== null) accents.set(hex(cs.backgroundColor), (accents.get(hex(cs.backgroundColor)) ?? 0) + 1);
+  }
+  // The canvas colour: the first real background from the content root outwards.
+  let canvas = null;
+  for (let el = root; el && !canvas; el = el.parentElement) canvas = hex(bgOf(el));
+  canvas = canvas ?? "#ffffff";
+  const top = (m, n) => [...m.entries()].filter(([k]) => k).sort((a, b) => b[1] - a[1]).slice(0, n).map(([k]) => k);
+  const bandBgs = [...new Set(bandEls.map((b) => hex(bgOf(b))).filter(Boolean))];
+  const style = {
+    fonts: top(fam, 3),
+    headline: head,
+    bg: canvas,
+    bands: bandBgs.slice(0, 5),
+    text: top(colors, 1)[0] ?? null,
+    accent: top(accents, 1)[0] ?? null,
+    radii: top(radii, 3),
+    height: document.documentElement.scrollHeight,
+  };
+
+  const firstScreen = bands.filter((_, i) => !info[i]?.header).slice(0, 3);
+  return { skeleton: bands, bands: info, firstScreen, style, cliches: [...found] };
+};