@luigisbox/luma 0.0.0-stage → 0.2.0

package/parity/probe.mjs

@@ -0,0 +1,1239 @@
+// The in-page side of `yarn luma parity`: functions handed to page.evaluate /
+// addInitScript (each one self-contained: Playwright sends its source, not
+// its closure). Reading values follows the visual-review method: computed
+// styles and boxes from the live DOM, every value whole, never a value read
+// from a screenshot.
+
+/**
+ * Before any script of the page (addInitScript): Math.random from a fixed
+ * seed (a carousel's random start, a shuffled banner), so two runs lay the
+ * page out alike. Luma's ids come from crypto, which stays random: nothing
+ * measured depends on them.
+ * @param {number} seed
+ */
+export function seedRandom(seed) {
+  let s = seed >>> 0;
+  Math.random = () => {
+    s = (s + 0x6d2b79f5) >>> 0;
+    let t = s;
+    t = Math.imul(t ^ (t >>> 15), t | 1);
+    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * Before any script of the page (addInitScript): `window.__parityDeep`, the
+ * selector engine of every other probe here, which sees into open shadow
+ * roots. Luma's autocomplete renders in one (`[data-lbx="ac-overlay"]` and
+ * its `shadowRoot`; `dom: 'light'` is the opt-out), and a shop's header can be
+ * a web component. A selector matches across the boundaries on its path:
+ * `[data-lbx="ac-overlay"] [data-lbx-part~="ac-row"]` finds the rows inside
+ * the overlay's shadow root (descendant and child combinators go from an
+ * element in a shadow root to its host; sibling ones stay in one tree), and
+ * a part's selector finds it inside its root's shadow trees too.
+ *
+ * Deterministic: the elements of a scope in one order, the composed tree's
+ * (an element, then its shadow tree, then its light children). With no open
+ * shadow root under the document, it is `querySelectorAll` as it was.
+ *   all(scope, selector) -> Element[]    one(scope, selector) -> Element | null
+ *   text(el, hidden) -> string           what renders: shadow trees and slots' assigned nodes, the flat tree
+ *   parent(el) -> Element | null         the composed parent (a shadow root's host)
+ * Closed shadow roots stay closed: nothing in them is measured.
+ */
+export function deepInit() {
+  if (window.__parityDeep) return;
+  const parent = (e) => e.parentElement ?? (e.parentNode instanceof ShadowRoot ? e.parentNode.host : null);
+  /** Top-level splits: a selector list into selectors, a selector into compounds and combinators. */
+  const scan = (s, at) => {
+    const out = [];
+    let depth = 0;
+    let quote = '';
+    let start = 0;
+    for (let i = 0; i < s.length; i++) {
+      const c = s[i];
+      if (quote) {
+        if (c === '\\') i++;
+        else if (c === quote) quote = '';
+      } else if (c === '\\') i++;
+      else if (c === '"' || c === "'") quote = c;
+      else if (c === '(' || c === '[') depth++;
+      else if (c === ')' || c === ']') depth--;
+      else if (!depth) {
+        const n = at(s, i);
+        if (n) {
+          out.push(s.slice(start, i), n.op);
+          i += n.len - 1;
+          start = i + 1;
+        }
+      }
+    }
+    out.push(s.slice(start));
+    return out;
+  };
+  const comma = (s, i) => (s[i] === ',' ? { op: ',', len: 1 } : null);
+  const combinator = (s, i) => {
+    if (!/[\s>+~]/.test(s[i])) return null;
+    let j = i;
+    let op = ' ';
+    while (j < s.length && /[\s>+~]/.test(s[j])) {
+      if (s[j] !== ' ' && !/\s/.test(s[j])) op = s[j];
+      j++;
+    }
+    return { op, len: j - i };
+  };
+  const cache = new Map();
+  /** A selector as [compound, combinator, compound, …] lists, one per selector of the list. */
+  const parse = (sel) => {
+    let p = cache.get(sel);
+    if (!p) {
+      p = scan(sel, comma)
+        .filter((_, i) => i % 2 === 0)
+        .map((x) => scan(x.trim(), combinator));
+      cache.set(sel, p);
+    }
+    return p;
+  };
+  const is = (el, compound) => {
+    try {
+      return el.matches(compound);
+    } catch {
+      return false;
+    }
+  };
+  /** el matches the selector's compound at k, with the compounds before it on its composed ancestors (or siblings). */
+  const from = (el, t, k) => {
+    if (!is(el, t[k])) return false;
+    if (k === 0) return true;
+    const op = t[k - 1];
+    if (op === '>') {
+      const a = parent(el);
+      return !!a && from(a, t, k - 2);
+    }
+    if (op === '+') {
+      const a = el.previousElementSibling;
+      return !!a && from(a, t, k - 2);
+    }
+    if (op === '~') {
+      for (let a = el.previousElementSibling; a; a = a.previousElementSibling) if (from(a, t, k - 2)) return true;
+      return false;
+    }
+    for (let a = parent(el); a; a = parent(a)) if (from(a, t, k - 2)) return true;
+    return false;
+  };
+  /** Every element under a scope (document, element, shadow root) in composed-tree order; whether any is in a shadow tree. */
+  const walk = (scope, out) => {
+    const kids = scope.nodeType === 1 && scope.shadowRoot ? [scope.shadowRoot, ...scope.children] : [...scope.children];
+    for (const k of kids) {
+      if (k instanceof ShadowRoot) {
+        out.shadow = true;
+        walk(k, out);
+        continue;
+      }
+      out.push(k);
+      walk(k, out);
+    }
+    return out;
+  };
+  const all = (scope, sel) => {
+    const els = walk(scope, Object.assign([], { shadow: false }));
+    if (!els.shadow && scope.getRootNode() === document) {
+      try {
+        return [...scope.querySelectorAll(sel)];
+      } catch {
+        return [];
+      }
+    }
+    const list = parse(sel);
+    return els.filter((el) => list.some((t) => t.length && from(el, t, t.length - 1)));
+  };
+  const one = (scope, sel) => all(scope, sel)[0] ?? null;
+  /** The text a shopper sees in el (the flat tree), elements `hidden(e)` says are hidden left out. */
+  const text = (el, hidden) => {
+    const parts = [];
+    const visit = (e) => {
+      if (hidden(e)) return;
+      const kids = e.shadowRoot ? e.shadowRoot.childNodes : e instanceof HTMLSlotElement && e.assignedNodes().length ? e.assignedNodes() : e.childNodes;
+      for (const n of kids) {
+        if (n.nodeType === 3) parts.push(n.textContent);
+        else if (n.nodeType === 1) visit(n);
+      }
+    };
+    visit(el);
+    return parts.join('').replace(/\s+/g, ' ').trim();
+  };
+  Object.defineProperty(window, '__parityDeep', { value: { all, one, text, parent }, enumerable: false });
+}
+
+/**
+ * Ours, before any script (addInitScript): the products their page shows,
+ * in their order, in our listing. Luma's product request (search or
+ * collections, `type` = the products' type) goes out as it is (its total,
+ * cursor and guid, so facets and the pager are the real query's); then
+ * requests for exactly their products (`field` in their ids: no scope or
+ * filter of our page, so their category listing's products reach our search
+ * page as well as our category page), and the answer Luma gets carries
+ * those hits in their order. A next page asked for gets none (the
+ * comparison is of the first page). `window.__parity.aligned` says what was
+ * asked and found, and with which queries; `window.__parity.hits` the
+ * catalog's records shown, per request ({ id: their id, hit }), in our order.
+ *
+ * The id requests (parity/pairing.mjs): with a collections `surface`, by id
+ * alone first (collections take no query); then the search endpoint with
+ * each of `queries` in turn (many channels answer an empty query with zero
+ * hits: their products are asked for with a query that finds them, the
+ * page's, their category's name, their titles' words), each asking only for
+ * the ids the ones before did not find, until every one is found or the
+ * queries are spent.
+ *
+ * Pairing (their id to our hit) never depends on the fields the build asks
+ * for: when the build lists `return_fields` without the pairing field, the
+ * id requests (only they) ask for that field too, and the hits Luma gets
+ * leave it out again, so what renders is what the build renders. With
+ * `pair: 'url'` their ids are links (relative, absolute, another host) and
+ * our hit's is its `url` (else `web_url`, else `field`), both compared as
+ * the decoded path without a trailing slash; the request asks for `field` in
+ * each id as found and in its path and absolute forms, so a catalog storing
+ * either form is found.
+ * @param {{ ids: string[], field: string, type: string, surface?: string, numeric?: boolean, pair?: 'field' | 'url', queries?: string[] }} cfg
+ */
+export function alignInit(cfg) {
+  const real = window.fetch;
+  const state = (window.__parity = window.__parity || { aligned: [] });
+  if (!cfg.ids.length) return;
+  const byUrl = cfg.pair === 'url';
+  const json = (o) => new Response(JSON.stringify(o), { status: 200, headers: { 'content-type': 'application/json' } });
+  const first = (v) => (Array.isArray(v) ? v[0] : v);
+  const path = (v) => {
+    try {
+      let p = new URL(String(v), location.href).pathname;
+      try {
+        p = decodeURI(p);
+      } catch {}
+      return p.length > 1 ? p.replace(/\/+$/, '') : p;
+    } catch {
+      return '';
+    }
+  };
+  const keyOfId = (id) => (byUrl ? path(id) : String(id));
+  const valueOf = (h) => {
+    const v = byUrl ? (first(h.url) ?? first(h.web_url) ?? first(h[cfg.field])) : first(h[cfg.field]);
+    return v == null ? '' : byUrl ? path(v) : String(v);
+  };
+  /** The filter's values for some ids: the ids; for links, each one's path and absolute forms too. */
+  const values = (list) => {
+    if (!byUrl) return list.map((x) => (cfg.numeric ? Number(x) : String(x)));
+    const out = [];
+    for (const id of list) {
+      const p = path(id);
+      for (const v of [String(id), p, p && `${location.origin}${p}`]) if (v && !out.includes(v)) out.push(v);
+    }
+    return out;
+  };
+  const queries = Array.isArray(cfg.queries) && cfg.queries.length ? cfg.queries : [''];
+  window.fetch = async function (input, init) {
+    const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url;
+    const m = /\/discovery\/v1\/(search|collections)\?/.exec(url);
+    let body = null;
+    try {
+      body = m && init && typeof init.body === 'string' ? JSON.parse(init.body) : null;
+    } catch {
+      body = null;
+    }
+    if (!body || body.type !== cfg.type) return real.call(this, input, init);
+    if (body.cursor) return json({ hits: [], total: 0, next_page_cursor: null, pagination_status: 'exhausted' });
+    const orig = await real.call(this, input, init);
+    if (!orig.ok) return orig;
+    const j = await orig.json();
+    // The pairing field, for the id requests only: the build's own request and what it renders stay as they are.
+    // A field the API returns unasked (`@id`, `@type`, `@title`, or one the build's own answer carries) stays.
+    const asked = Array.isArray(body.return_fields) ? body.return_fields : null;
+    const added = asked && !asked.includes(cfg.field) ? [cfg.field] : [];
+    const strip = added.filter((f) => !f.startsWith('@') && !(j.hits || []).some((h) => h && f in h));
+    const fields = added.length ? [...asked, ...added] : asked;
+    /** The id requests, in order: by id on a collections surface (no query), then the search endpoint with each query. */
+    const plan = [];
+    if (cfg.surface) plan.push({ endpoint: 'collections', surface: cfg.surface, query: null });
+    else if (m[1] === 'collections') plan.push({ endpoint: 'collections', surface: new URL(url).searchParams.get('surface_id'), query: null });
+    for (const q of queries) plan.push({ endpoint: 'search', surface: m[1] === 'search' ? new URL(url).searchParams.get('surface_id') : null, query: q });
+    const by = new Map();
+    const tried = [];
+    for (const step of plan) {
+      const wanted = cfg.ids.filter((id) => !by.has(keyOfId(id)));
+      if (!wanted.length) break;
+      const ids = values(wanted);
+      const u = new URL(url);
+      u.pathname = u.pathname.replace(/\/(search|collections)$/, `/${step.endpoint}`);
+      if (step.surface) u.searchParams.set('surface_id', step.surface);
+      else u.searchParams.delete('surface_id');
+      let b2;
+      if (step.endpoint === 'collections') {
+        b2 = { type: body.type, size: Math.min(wanted.length, 100), collection_filters: { [cfg.field]: { in: ids } } };
+        if (cfg.surface == null) b2 = { ...body, size: Math.min(wanted.length, 100), filters: { [cfg.field]: { in: ids } } };
+        if (cfg.surface == null) delete b2.collection_filters;
+      } else {
+        // Exactly their products, whatever our page asks (not our scope, filters or sort), with a query that finds them.
+        b2 = m[1] === 'search' ? { ...body } : { type: body.type };
+        Object.assign(b2, { size: Math.min(wanted.length, 100), query: step.query, filters: { [cfg.field]: { in: ids } } });
+        delete b2.collection_filters;
+      }
+      delete b2.sort;
+      delete b2.cursor;
+      if (fields) b2.return_fields = fields;
+      else delete b2.return_fields;
+      let hits = [];
+      try {
+        const r2 = await real.call(this, u.href, { ...init, body: JSON.stringify(b2) });
+        if (r2.ok) hits = (await r2.json()).hits || [];
+      } catch {
+        hits = [];
+      }
+      const before = by.size;
+      for (const h of hits) {
+        const k = valueOf(h);
+        if (k && !by.has(k) && wanted.some((id) => keyOfId(id) === k)) by.set(k, h);
+      }
+      tried.push({ endpoint: step.endpoint, query: step.query, asked: wanted.length, found: by.size - before });
+    }
+    const used = new Set();
+    const ordered = [];
+    const records = [];
+    for (const id of cfg.ids) {
+      const h = by.get(keyOfId(id));
+      if (!h || used.has(h)) continue;
+      used.add(h);
+      records.push({ id, hit: h });
+      ordered.push(strip.length ? Object.fromEntries(Object.entries(h).filter(([k]) => !strip.includes(k))) : h);
+    }
+    // The catalog's records, in the order Luma shows them: the evidence a text difference is the data's (owner.mjs).
+    (state.hits = state.hits || []).push(records);
+    state.aligned.push({ endpoint: m[1], pair: byUrl ? 'url' : cfg.field, added, asked: cfg.ids.length, found: ordered.length, missing: cfg.ids.filter((id) => !by.has(keyOfId(id))), queries: tried });
+    return json({ ...j, hits: ordered });
+  };
+}
+
+/**
+ * Settles the page for measuring: the hidden regions out (`hide`: cookie
+ * banners, chat widgets), images in the measured roots loaded eagerly and
+ * decoded, webfonts loaded, every CSS animation and transition finished
+ * (infinite ones cancelled), two frames. Transitions are finished, not
+ * switched off: their computed `transition` is measured too.
+ * @param {{ roots: string[], hide: string[] }} arg
+ */
+export async function stabilize(arg) {
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  if (arg.hide.length && !document.querySelector('style[data-parity="hide"]')) {
+    const st = document.createElement('style');
+    st.setAttribute('data-parity', 'hide');
+    st.textContent = `${arg.hide.join(',\n')} { display: none !important; }`;
+    (document.head || document.documentElement).appendChild(st);
+  }
+  // A hidden region inside a shadow root (a web-component header's banner): the document's style does not reach it.
+  if (D) for (const sel of arg.hide) for (const el of qa(document, sel)) if (el.getRootNode() !== document) el.style.setProperty('display', 'none', 'important');
+  const within = (ms, p) => Promise.race([p, new Promise((r) => setTimeout(r, ms))]);
+  const imgs = new Set();
+  for (const sel of arg.roots) for (const r of qa(document, sel)) for (const img of qa(r, 'img')) imgs.add(img);
+  for (const img of imgs) if (img.loading === 'lazy') img.loading = 'eager';
+  await within(
+    8000,
+    Promise.all(
+      [...imgs].map((img) =>
+        (img.complete ? Promise.resolve() : new Promise((r) => (img.addEventListener('load', r, { once: true }), img.addEventListener('error', r, { once: true }))))
+          .then(() => (img.naturalWidth ? img.decode().catch(() => {}) : undefined)),
+      ),
+    ),
+  );
+  await within(8000, document.fonts.ready);
+  for (const a of document.getAnimations()) {
+    try {
+      const t = a.effect && a.effect.getComputedTiming();
+      if (t && t.endTime === Infinity) a.cancel();
+      else a.finish();
+    } catch {
+      try {
+        a.cancel();
+      } catch {}
+    }
+  }
+  await new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(r)));
+}
+
+/**
+ * The boxes of every root of `selectors` (rounded to 1/64 px, as layout is):
+ * equal on two reads a moment apart = the layout has settled.
+ * @param {string[]} selectors
+ */
+export function boxes(selectors) {
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const out = [];
+  for (const sel of selectors) {
+    for (const el of qa(document, sel).slice(0, 60)) {
+      const r = el.getBoundingClientRect();
+      out.push([r.x, r.y + scrollY, r.width, r.height].map((v) => Math.round(v * 64) / 64).join(','));
+    }
+  }
+  return out.join(';');
+}
+
+/**
+ * The keys their page lists its products under (ids for the API), in their
+ * order, visible elements only, each once.
+ * @param {{ selector: string, attr: string, child?: string, transform?: 'path' | 'absolute' | null, max: number }} arg
+ */
+export function collectIds(arg) {
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const out = [];
+  for (const el of qa(document, arg.selector)) {
+    const r = el.getBoundingClientRect();
+    if (!r.width || !r.height) continue;
+    const src = arg.child ? (qa(el, arg.child)[0] ?? null) : el;
+    let v = src ? src.getAttribute(arg.attr) : null;
+    if (!v) continue;
+    if (arg.transform === 'path' || arg.transform === 'absolute') {
+      try {
+        const u = new URL(v, location.href);
+        v = arg.transform === 'path' ? u.pathname : `${u.origin}${u.pathname}`;
+      } catch {
+        continue;
+      }
+    }
+    v = v.trim();
+    if (v && !out.includes(v)) out.push(v);
+    if (out.length >= arg.max) break;
+  }
+  return out;
+}
+
+/**
+ * One component on the page: its roots (all of them for a repeated one,
+ * else the first visible), each root's box and computed style, its parts
+ * (relative selectors) with boxes relative to the root, their visible text,
+ * the grid when the component is one (columns per row, gaps, item width).
+ * Elements are kept in `window.__parityEls` (by `ref`) for the rendered-font
+ * lookup (CDP), no attribute is written into the page.
+ * @param {{ root: string, parts: Record<string, string>, key: { attr: string, child?: string, transform?: 'path' | 'absolute' } | null, all: boolean, max: number, grid: { item: string } | null, props: string[], ref?: number }} arg
+ */
+export function measure(arg) {
+  const els = (window.__parityEls = window.__parityEls || []);
+  const COLOR = /color$/;
+  const canvas = document.createElement('canvas');
+  canvas.width = canvas.height = 1;
+  const ctx = canvas.getContext('2d', { willReadFrequently: true });
+  const cache = new Map();
+  /** The browser's own sRGB reading of a colour in any space (oklch, lab, color-mix). */
+  const rgba = (v) => {
+    if (/^rgba?\(/.test(v) || v === 'transparent') return undefined;
+    if (cache.has(v)) return cache.get(v);
+    let out;
+    try {
+      ctx.clearRect(0, 0, 1, 1);
+      ctx.fillStyle = '#000';
+      ctx.fillStyle = v;
+      ctx.fillRect(0, 0, 1, 1);
+      const d = ctx.getImageData(0, 0, 1, 1).data;
+      out = [d[0], d[1], d[2], Math.round((d[3] / 255) * 1000) / 1000];
+    } catch {
+      out = undefined;
+    }
+    cache.set(v, out);
+    return out;
+  };
+  const visible = (el) => {
+    if (!el) return false;
+    const r = el.getBoundingClientRect();
+    if (!(r.width > 0 && r.height > 0)) return false;
+    return getComputedStyle(el).visibility !== 'hidden';
+  };
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const q = (root, sel, all) => (all ? qa(root, sel) : (qa(root, sel)[0] ?? null));
+  /** Text a sighted shopper reads: visually hidden text (sr-only: a 1 px clipped box) and hidden elements left out. */
+  const textOf = (el) => {
+    const parts = [];
+    const hidden = new Map();
+    const up = (e) => (D ? D.parent(e) : e.parentElement);
+    const isHidden = (node) => {
+      for (let e = node; e; e = up(e)) {
+        if (hidden.has(e)) return hidden.get(e);
+        const s = getComputedStyle(e);
+        const r = e.getBoundingClientRect();
+        const h = s.display === 'none' || s.visibility === 'hidden' || ((r.width <= 1 || r.height <= 1) && (s.overflow !== 'visible' || s.clip !== 'auto' || s.clipPath !== 'none'));
+        if (h) {
+          hidden.set(e, true);
+          return true;
+        }
+        if (e === el) break;
+      }
+      return false;
+    };
+    // Open shadow trees and slots too (the flat tree): what renders.
+    if (D) return D.text(el, isHidden);
+    const w = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+    for (let n = w.nextNode(); n; n = w.nextNode()) {
+      if (isHidden(n.parentElement)) continue;
+      parts.push(n.textContent);
+    }
+    return parts.join('').replace(/\s+/g, ' ').trim();
+  };
+  const styleOf = (el) => {
+    const s = getComputedStyle(el);
+    const out = {};
+    for (const p of arg.props) {
+      const v = s.getPropertyValue(p);
+      out[p] = COLOR.test(p) ? { raw: v, rgba: rgba(v) } : v;
+      if (out[p] && out[p].rgba === undefined && typeof out[p] === 'object') delete out[p].rgba;
+    }
+    return out;
+  };
+  const ref = (el) => {
+    els.push(el);
+    return els.length - 1;
+  };
+  /**
+   * The controls in a part, by kind (docs/PARITY.md, "Parts of parts"): a slider (input[type=range],
+   * role=slider, jQuery UI's, noUiSlider's, ion.rangeSlider's), text inputs, selects, checkboxes, radios,
+   * buttons. Rendered ones (a visually hidden checkbox counts), not display: none.
+   */
+  const controlsOf = (el) => {
+    const SLIDER = '[data-lbx-part~="range-slider"], input[type=range], [role=slider], .ui-slider, .noUi-target, .irs, .rc-slider, .MuiSlider-root';
+    const kinds = { slider: 0, input: 0, select: 0, checkbox: 0, radio: 0, button: 0 };
+    const all = [el, ...qa(el, '*')].filter((e) => e.getClientRects().length > 0);
+    const sliders = all.filter((e) => e.matches(SLIDER));
+    kinds.slider = sliders.filter((e) => !sliders.some((s) => s !== e && s.contains(e))).length;
+    for (const e of all) {
+      if (sliders.some((s) => s.contains(e))) continue;
+      const t = (e.getAttribute('type') || '').toLowerCase();
+      if (e.tagName === 'SELECT') kinds.select++;
+      else if (e.tagName === 'INPUT' && t === 'checkbox') kinds.checkbox++;
+      else if (e.tagName === 'INPUT' && t === 'radio') kinds.radio++;
+      else if (e.tagName === 'INPUT' && !/^(hidden|submit|button|reset|image|range)$/.test(t)) kinds.input++;
+      else if (e.tagName === 'TEXTAREA') kinds.input++;
+      else if (e.tagName === 'BUTTON' || (e.tagName === 'INPUT' && /^(submit|button|reset|image)$/.test(t))) kinds.button++;
+    }
+    return kinds;
+  };
+  /**
+   * Consecutive siblings of the first of `list` (the ones of its composed parent, in order, at most 12),
+   * as page boxes [x, y, width, height]: the space between one and the next (compare.mjs layoutOf).
+   * Null when it has none (one element, or the others elsewhere).
+   */
+  const siblingsOf = (list) => {
+    if (list.length < 2) return null;
+    const up = (e) => (D ? D.parent(e) : e.parentElement);
+    const p = up(list[0]);
+    const same = list.filter((e) => up(e) === p).slice(0, 12);
+    if (same.length < 2) return null;
+    return same.map((e) => {
+      const r = e.getBoundingClientRect();
+      return [r.x + scrollX, r.y + scrollY, r.width, r.height].map((v) => Math.round(v * 64) / 64);
+    });
+  };
+  const one = (root) => {
+    const rb = root.getBoundingClientRect();
+    const box = (el) => {
+      const r = el.getBoundingClientRect();
+      return { x: r.x - rb.x, y: r.y - rb.y, width: r.width, height: r.height };
+    };
+    const parts = {};
+    for (const [name, sel] of Object.entries(arg.parts)) {
+      const all = q(root, sel, true).filter(visible);
+      const el = all[0] ?? null;
+      parts[name] = el ? { present: true, box: box(el), style: styleOf(el), text: textOf(el), ref: ref(el), font: null, siblings: siblingsOf(all), controls: controlsOf(el) } : { present: false };
+    }
+    let key = null;
+    if (arg.key) {
+      const src = arg.key.child ? q(root, arg.key.child, false) : root;
+      key = src ? src.getAttribute(arg.key.attr) : null;
+      if (key && arg.key.transform)
+        try {
+          const u = new URL(key, location.href);
+          key = arg.key.transform === 'path' ? u.pathname : `${u.origin}${u.pathname}`;
+        } catch {}
+    }
+    let grid = null;
+    if (arg.grid) {
+      const items = q(root, arg.grid.item, true).filter(visible).map((e) => e.getBoundingClientRect());
+      const s = getComputedStyle(root);
+      grid = { columns: 0, columnGap: null, rowGap: null, itemWidth: null, items: items.length, padding: ['padding-top', 'padding-right', 'padding-bottom', 'padding-left'].map((p) => parseFloat(s.getPropertyValue(p)) || 0) };
+      if (items.length) {
+        const top = items[0].top;
+        const row1 = items.filter((r) => Math.abs(r.top - top) < 2);
+        grid.columns = row1.length;
+        grid.itemWidth = items[0].width;
+        if (row1.length > 1) grid.columnGap = row1[1].left - row1[0].right;
+        const next = items.find((r) => r.top > top + 2);
+        if (next) grid.rowGap = next.top - Math.max(...row1.map((r) => r.bottom));
+      }
+    }
+    return { present: true, key, box: { x: 0, y: 0, width: rb.width, height: rb.height }, style: styleOf(root), text: textOf(root), ref: ref(root), font: null, parts, grid };
+  };
+  if (arg.ref != null) return [els[arg.ref]].filter(visible).map(one);
+  const roots = q(document, arg.root, true).filter(visible);
+  const chosen = arg.all ? roots.slice(0, arg.max) : roots.slice(0, 1);
+  const out = chosen.map(one);
+  // A repeated component's instances side by side (tiles in a row, facet groups in a column): their gaps, their columns.
+  if (arg.all && out.length) out[0].siblings = siblingsOf(roots);
+  return out;
+}
+
+/**
+ * Their page, for the id requests' queries (parity/pairing.mjs): its
+ * heading (their category's name: the first visible h1, else the
+ * breadcrumb's last item) and their tiles' titles (a heading or an element
+ * named title/name in each tile, else its longest link text).
+ * @param {{ selector: string | null }} arg
+ */
+export function theirHints(arg) {
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const vis = (el) => {
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0 && getComputedStyle(el).visibility !== 'hidden';
+  };
+  const text = (el) => (el?.textContent ?? '').replace(/\s+/g, ' ').trim();
+  const h1 = qa(document, 'h1').find(vis);
+  const crumb = qa(document, '[aria-label*="breadcrumb" i] li, .breadcrumb li, .breadcrumbs li, [itemtype*="BreadcrumbList"] [itemprop="itemListElement"]').filter(vis).pop();
+  const heading = text(h1) || text(crumb) || '';
+  const titles = [];
+  for (const t of arg.selector ? qa(document, arg.selector).filter(vis).slice(0, 24) : []) {
+    const named = qa(t, 'h1, h2, h3, h4, h5, h6, [itemprop="name"], [class*="title" i], [class*="name" i]').find(vis);
+    const link = qa(t, 'a[href]').map(text).sort((a, b) => b.length - a.length)[0];
+    const v = text(named) || link || text(t);
+    if (v) titles.push(v.slice(0, 200));
+  }
+  return { heading: heading.length <= 80 ? heading : '', titles };
+}
+
+/**
+ * Before any script (addInitScript): the page's storage set as the map says
+ * (`pages.<name>.storage`: a view mode their page reads), and every storage
+ * key the page reads recorded (`window.__parityStorage`): a listing whose
+ * view mode (grid or list, its columns) comes from storage says so in the
+ * report.
+ * @param {{ set: { localStorage?: Record<string, string>, sessionStorage?: Record<string, string> } | null }} cfg
+ */
+export function storageInit(cfg) {
+  const reads = (window.__parityStorage = window.__parityStorage || []);
+  try {
+    for (const area of ['localStorage', 'sessionStorage']) for (const [k, v] of Object.entries(cfg.set?.[area] ?? {})) window[area].setItem(k, v);
+  } catch {}
+  try {
+    const get = Storage.prototype.getItem;
+    Storage.prototype.getItem = function (k) {
+      const v = get.call(this, k);
+      try {
+        const area = this === window.localStorage ? 'localStorage' : 'sessionStorage';
+        if (!reads.some((r) => r.area === area && r.key === String(k))) reads.push({ area, key: String(k), value: v });
+      } catch {}
+      return v;
+    };
+  } catch {}
+}
+
+/**
+ * Before any script (addInitScript): the page's layout shifts (the Layout
+ * Instability API; shifts right after an input left out, as CLS does), each
+ * with the elements that moved and where they were: `window.__parityCls`.
+ * `blocksOf` counts the ones of their elements above our components.
+ */
+export function clsInit() {
+  const out = (window.__parityCls = { entries: [] });
+  const rect = (r) => (r ? { x: r.x, y: r.y + scrollY, width: r.width, height: r.height } : null);
+  try {
+    new PerformanceObserver((list) => {
+      for (const e of list.getEntries()) {
+        if (e.hadRecentInput || out.entries.length >= 200) continue;
+        const sources = (e.sources ?? []).filter((s) => s.node && s.node.nodeType === 1).map((s) => ({ node: s.node, before: rect(s.previousRect) }));
+        out.entries.push({ value: e.value, sources });
+      }
+    }).observe({ type: 'layout-shift', buffered: true });
+  } catch {}
+}
+
+/**
+ * The collateral check's view of a page (docs/PARITY.md, "The collateral
+ * check"): every block of the page outside the regions (our components',
+ * Luma's own elements, the map's `collateral.ignore`), by its path from the
+ * body, in page coordinates. The walk goes down only into the ancestors of a
+ * region (`container`: the body, a column wrapping the listing), so a block
+ * is the largest element beside a region: their header, a sidebar, a
+ * banner, the footer (`outside`, with its direct children, for their
+ * presence). A path is tag, id and classes (Luma's `lbx-` ones aside), with
+ * the occurrence among alike siblings: the same element on their page
+ * without us and on ours. Elements are kept in `window.__parityEls` for the
+ * crops; `top` is the first region's top (what is above it keeps its place).
+ * @param {{ regions: string[], ignore: string[] }} arg
+ */
+export function blocksOf(arg) {
+  const els = (window.__parityEls = window.__parityEls || []);
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const up = (e) => (D ? D.parent(e) : e.parentElement);
+  const vis = (el) => {
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0 && getComputedStyle(el).visibility !== 'hidden';
+  };
+  const SKIP = new Set(['SCRIPT', 'STYLE', 'LINK', 'META', 'NOSCRIPT', 'TEMPLATE', 'BR', 'BASE', 'TITLE']);
+  const luma = (el) => el.tagName.startsWith('LBX-') || el.hasAttribute('data-lbx') || el.hasAttribute('data-lbx-part');
+  const regions = new Set();
+  for (const sel of arg.regions) for (const el of qa(document, sel)) regions.add(el);
+  for (const el of document.querySelectorAll('body *')) if (luma(el)) regions.add(el);
+  const ignored = new Set();
+  for (const sel of arg.ignore) for (const el of qa(document, sel)) ignored.add(el);
+  // The ancestors of every region: walked into; what is beside them is a block.
+  const holds = new Set();
+  let top = null;
+  for (const r of regions) {
+    // A hidden region (an overlay not open) holds nothing: its ancestors stay blocks.
+    if (!vis(r)) continue;
+    const y = r.getBoundingClientRect().y + scrollY;
+    top = top == null ? y : Math.min(top, y);
+    for (let a = up(r); a; a = up(a)) holds.add(a);
+  }
+  const r64 = (v) => Math.round(v * 64) / 64;
+  const boxOf = (el) => {
+    const r = el.getBoundingClientRect();
+    return { x: r64(r.x + scrollX), y: r64(r.y + scrollY), width: r64(r.width), height: r64(r.height) };
+  };
+  const sig = (el) => {
+    const id = el.id && !/\d{3,}|^lbx/i.test(el.id) ? `#${el.id}` : '';
+    const cls = [...el.classList].filter((c) => !/^lbx/i.test(c)).sort().slice(0, 3).map((c) => `.${c}`).join('');
+    return `${el.tagName.toLowerCase()}${id}${cls}`;
+  };
+  /** An element's children with their paths (the occurrence of a signature among its siblings: `:2`). */
+  const kids = (el, path) => {
+    const seen = new Map();
+    const out = [];
+    for (const k of el.children) {
+      if (SKIP.has(k.tagName)) continue;
+      const s = sig(k);
+      const n = (seen.get(s) ?? 0) + 1;
+      seen.set(s, n);
+      out.push([k, `${path} > ${s}${n > 1 ? `:${n}` : ''}`]);
+    }
+    return out;
+  };
+  const blocks = [];
+  const walk = (el, path, depth) => {
+    for (const [k, p] of kids(el, path)) {
+      if (blocks.length >= 80) return;
+      if (regions.has(k) || ignored.has(k)) continue;
+      const present = vis(k);
+      if (holds.has(k)) {
+        blocks.push({ path: p, kind: 'container', present, box: present ? boxOf(k) : null, ref: null, children: [] });
+        if (depth < 14) walk(k, p, depth + 1);
+        continue;
+      }
+      if (!present) {
+        blocks.push({ path: p, kind: 'outside', present: false, box: null, ref: null, children: [] });
+        continue;
+      }
+      els.push(k);
+      const children = kids(k, p)
+        .filter(([c]) => !regions.has(c) && !ignored.has(c) && vis(c) && c.getBoundingClientRect().width >= 4 && c.getBoundingClientRect().height >= 4)
+        .map(([, cp]) => cp);
+      blocks.push({ path: p, kind: 'outside', present: true, box: boxOf(k), ref: els.length - 1, children });
+    }
+  };
+  walk(document.body, 'body', 0);
+  // The layout shifts of their elements above our components (clsInit): what our render moved of their page.
+  // Below our components an element moves with their height (compared as theirs); in them, it is ours.
+  const inRegion = (n) => {
+    for (let e = n; e; e = up(e)) if (regions.has(e)) return true;
+    return false;
+  };
+  const name = (n) => `${n.tagName.toLowerCase()}${n.id ? `#${n.id}` : ''}${[...n.classList].slice(0, 2).map((c) => `.${c}`).join('')}`;
+  let cls = null;
+  if (window.__parityCls) {
+    cls = { value: 0, shifts: [] };
+    for (const e of window.__parityCls.entries) {
+      const theirs = e.sources.filter((x) => x.node.isConnected !== false && !inRegion(x.node) && x.before && (top == null || x.before.y + x.before.height <= top + 1));
+      if (!theirs.length) continue;
+      cls.value += e.value;
+      if (cls.shifts.length < 10) cls.shifts.push({ value: Math.round(e.value * 10000) / 10000, nodes: theirs.map((x) => name(x.node)) });
+    }
+    cls.value = Math.round(cls.value * 10000) / 10000;
+  }
+  return { blocks, top: top == null ? null : r64(top), cls };
+}
+
+/**
+ * The vertical layout around the listing (docs/PARITY.md, "The layout around
+ * the listing"): the listing's box (the union of the regions shown: the
+ * map's components, Luma's `lbx-search` / `lbx-plp`), the nearest element
+ * that renders something above it (`above`: its bottom, the heading, a
+ * toolbar) and below it (`below`: its top, the next block, the footer), the
+ * gap to each; the elements filling each gap (`fillers`, outermost, with
+ * their min-height, height, padding and margin: the fix hint); and the
+ * elements between the listing and what follows it that render nothing yet
+ * take more than `empty` px (`empty`: an empty column a theme gives a
+ * min-height). Elements are named by their path from the body, as
+ * `blocksOf` names them. Their elements only: never in a region, never
+ * Luma's, never fixed (a cookie bar), never in `ignore`.
+ * @param {{ regions: string[], ignore: string[], empty?: number }} arg
+ */
+export function aroundOf(arg) {
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const up = (e) => (D ? D.parent(e) : e.parentElement);
+  const shown = (el) => {
+    const r = el.getBoundingClientRect();
+    if (!(r.width > 0 && r.height > 0)) return false;
+    if (el.checkVisibility) return el.checkVisibility({ opacityProperty: true, visibilityProperty: true });
+    return getComputedStyle(el).visibility !== 'hidden';
+  };
+  const r64 = (v) => Math.round(v * 64) / 64;
+  const SKIP = new Set(['SCRIPT', 'STYLE', 'LINK', 'META', 'NOSCRIPT', 'TEMPLATE', 'BR', 'BASE', 'TITLE', 'HEAD']);
+  const MEDIA = new Set(['IMG', 'SVG', 'svg', 'VIDEO', 'CANVAS', 'IFRAME', 'INPUT', 'SELECT', 'TEXTAREA', 'BUTTON', 'PICTURE', 'OBJECT', 'EMBED', 'HR']);
+  const luma = (el) => el.tagName.startsWith('LBX-') || el.hasAttribute('data-lbx') || el.hasAttribute('data-lbx-part');
+  const regions = new Set();
+  for (const sel of arg.regions) for (const el of qa(document, sel)) regions.add(el);
+  // The listing: the map's regions and Luma's listing hosts (their "show more" and pager are in them).
+  const listing = [...regions, ...document.querySelectorAll('lbx-search, lbx-plp')].filter((el) => el.isConnected && shown(el));
+  if (!listing.length) return null;
+  let top = Infinity;
+  let bottom = -Infinity;
+  for (const el of listing) {
+    const r = el.getBoundingClientRect();
+    top = Math.min(top, r.top + scrollY);
+    bottom = Math.max(bottom, r.bottom + scrollY);
+  }
+  const ignored = new Set();
+  for (const sel of arg.ignore) for (const el of qa(document, sel)) ignored.add(el);
+  // Not theirs to measure: in a region, Luma's, ignored by the map.
+  const ours = (el) => {
+    for (let e = el; e && e !== document.body; e = up(e)) if (regions.has(e) || luma(e) || ignored.has(e)) return true;
+    return false;
+  };
+  const holds = new Set();
+  for (const el of listing) for (let a = up(el); a; a = up(a)) holds.add(a);
+  const fixed = (el) => {
+    for (let e = el; e && e !== document.body; e = up(e)) if (getComputedStyle(e).position === 'fixed') return true;
+    return false;
+  };
+  const alpha = (c) => {
+    const m = /rgba?\(([^)]+)\)/.exec(c || '');
+    if (!m) return c && c !== 'transparent' ? 1 : 0;
+    const p = m[1].split(/[\s,/]+/).filter(Boolean);
+    return p.length > 3 ? Number(p[3]) : 1;
+  };
+  /** What the element itself draws: its own text, a medium, a background, a border, a shadow, an outline, a pseudo-element's content. */
+  const paints = (el) => {
+    if (MEDIA.has(el.tagName)) return true;
+    for (const n of el.childNodes) if (n.nodeType === 3 && n.textContent.trim()) return true;
+    const s = getComputedStyle(el);
+    if (s.backgroundImage !== 'none' || alpha(s.backgroundColor) > 0) return true;
+    for (const side of ['Top', 'Right', 'Bottom', 'Left']) if (parseFloat(s[`border${side}Width`]) > 0 && s[`border${side}Style`] !== 'none' && s[`border${side}Style`] !== 'hidden' && alpha(s[`border${side}Color`]) > 0) return true;
+    if (s.boxShadow !== 'none') return true;
+    if (s.outlineStyle !== 'none' && parseFloat(s.outlineWidth) > 0) return true;
+    for (const p of ['::before', '::after']) {
+      const c = getComputedStyle(el, p).content;
+      if (c && c !== 'none' && c !== 'normal' && c !== '""') return true;
+    }
+    return false;
+  };
+  const sig = (el) => {
+    const id = el.id && !/\d{3,}|^lbx/i.test(el.id) ? `#${el.id}` : '';
+    const cls = [...el.classList].filter((c) => !/^lbx/i.test(c)).sort().slice(0, 3).map((c) => `.${c}`).join('');
+    return `${el.tagName.toLowerCase()}${id}${cls}`;
+  };
+  /** Its path from the body, as blocksOf names a block (`:2` the second alike sibling). */
+  const pathOf = (el) => {
+    const segs = [];
+    for (let e = el; e && e !== document.body && e.parentElement; e = e.parentElement) {
+      const s = sig(e);
+      let n = 0;
+      for (const k of e.parentElement.children) {
+        if (SKIP.has(k.tagName) || sig(k) !== s) continue;
+        n++;
+        if (k === e) break;
+      }
+      segs.unshift(`${s}${n > 1 ? `:${n}` : ''}`);
+    }
+    return segs.join(' > ');
+  };
+  const px = (v) => Math.round(parseFloat(v) * 100) / 100 || 0;
+  const styleOf = (el) => {
+    const s = getComputedStyle(el);
+    const r = el.getBoundingClientRect();
+    return { height: r64(r.height), minHeight: s.minHeight, paddingTop: px(s.paddingTop), paddingBottom: px(s.paddingBottom), marginTop: px(s.marginTop), marginBottom: px(s.marginBottom) };
+  };
+  // Their elements, in document order, with their boxes in page coordinates.
+  const all = [];
+  for (const el of document.body.querySelectorAll('*')) {
+    if (SKIP.has(el.tagName) || regions.has(el) || holds.has(el) || ours(el) || !shown(el)) continue;
+    const r = el.getBoundingClientRect();
+    all.push({ el, top: r.top + scrollY, bottom: r.bottom + scrollY });
+  }
+  let above = null;
+  let below = null;
+  for (const x of all) {
+    if (x.top >= bottom - 1 && (!below || x.top < below.top) && paints(x.el) && !fixed(x.el)) below = x;
+    if (x.bottom <= top + 1 && (!above || x.bottom > above.bottom) && paints(x.el) && !fixed(x.el)) above = x;
+  }
+  /** The outermost elements in a band (y from a to b), the tallest first. */
+  const within = (a, b) => {
+    const out = [];
+    for (const x of all) {
+      if (x.top < a - 1 || x.bottom > b + 1 || x.bottom - x.top < 1 || fixed(x.el)) continue;
+      if (out.some((o) => o.el.contains(x.el))) continue;
+      out.push(x);
+    }
+    return out.sort((p, q) => q.bottom - q.top - (p.bottom - p.top) || p.top - q.top).slice(0, 4).map((x) => ({ path: pathOf(x.el), ...styleOf(x.el) }));
+  };
+  // Renders nothing: no text shown, nothing in it (itself included) that paints.
+  const blank = (el) => !(el.innerText ?? '').trim() && !paints(el) && ![...el.querySelectorAll('*')].some((k) => shown(k) && paints(k));
+  const limit = arg.empty ?? 100;
+  const edge = below ? below.top : Infinity;
+  const empty = [];
+  const seen = [];
+  for (const x of all) {
+    if (x.top < bottom - 1 || x.bottom > edge + 1 || x.bottom - x.top <= limit || seen.some((s) => s.contains(x.el))) continue;
+    if (!blank(x.el) || fixed(x.el)) continue;
+    seen.push(x.el);
+    empty.push({ path: pathOf(x.el), ...styleOf(x.el) });
+  }
+  const end = (x, at) => (x ? { path: pathOf(x.el), at: r64(at), ...styleOf(x.el) } : null);
+  return {
+    listing: { top: r64(top), bottom: r64(bottom) },
+    above: above ? { ...end(above, above.bottom), gap: r64(top - above.bottom) } : null,
+    below: below ? { ...end(below, below.top), gap: r64(below.top - bottom) } : null,
+    fillers: { above: above ? within(above.bottom, top) : [], below: below ? within(bottom, below.top) : [] },
+    empty,
+  };
+}
+
+/**
+ * Before any script (addInitScript): what each frame of the page painted
+ * (docs/PARITY.md, "The hold"), the technique of Luma's
+ * browser tests: a ResizeObserver on a 1 px probe whose
+ * width flips every frame samples each frame after its layout and before its
+ * paint. A frame shows `theirs` when one of their listing's elements
+ * (`theirs`, their components' selectors) is visible outside Luma's own
+ * elements, `ours` when Luma's listing shows content. Consecutive equal
+ * frames are counted: `window.__parityFrames` [{ n, theirs, ours }].
+ * @param {{ theirs: string[] }} spec
+ */
+export function framesInit(spec) {
+  if (window.__parityFrames || window.top !== window) return;
+  const F = (window.__parityFrames = []);
+  const luma = (el) => !!el.closest('lbx-search, lbx-plp, [data-lbx]');
+  const vis = (el) => {
+    if (!el.isConnected) return false;
+    const r = el.getBoundingClientRect();
+    if (!(r.width > 0 && r.height > 0)) return false;
+    return el.checkVisibility ? el.checkVisibility({ opacityProperty: true, visibilityProperty: true }) : getComputedStyle(el).visibility !== 'hidden';
+  };
+  const q = (sel) => {
+    try {
+      return [...document.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const sample = () => {
+    const theirs = spec.theirs.some((s) => q(s).some((el) => !luma(el) && vis(el)));
+    const ours = q('lbx-search, lbx-plp').some((el) => vis(el) && !!el.querySelector('[data-lbx-list] > *, [data-lbx-part~="tile"]'));
+    const last = F[F.length - 1];
+    if (last && last.theirs === theirs && last.ours === ours) last.n++;
+    else if (F.length < 400) F.push({ n: 1, theirs, ours });
+  };
+  let probe = null;
+  let flip = false;
+  const ro = new ResizeObserver(() => sample());
+  const tick = () => {
+    if (!probe && document.documentElement) {
+      probe = document.createElement('lbx-parity-probe');
+      probe.style.cssText = 'position:fixed;top:0;left:0;height:1px;width:1px;pointer-events:none;opacity:0;contain:strict;';
+      document.documentElement.appendChild(probe);
+      ro.observe(probe);
+    }
+    if (probe) probe.style.width = (flip = !flip) ? '2px' : '1px';
+    requestAnimationFrame(tick);
+  };
+  requestAnimationFrame(tick);
+}
+
+/**
+ * The boxes the alignment compares (docs/PARITY.md, "Alignment"), in page
+ * coordinates: per item, the first visible match of `root` (and of `part`
+ * inside it), else null. An item with `field` is a search field: its visible
+ * box is the wrapper that draws it (the outermost ancestor of the input, or
+ * the input, with a border, a background or a shadow, no taller than the
+ * input by more than 24 px and no wider than 3 times it), not the input
+ * inset in it.
+ * @param {{ items: { key: string, root?: string, part?: string | null, field?: string }[] }} arg
+ */
+export function edgesOf(arg) {
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const up = (e) => (D ? D.parent(e) : e.parentElement);
+  const vis = (el) => {
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0 && getComputedStyle(el).visibility !== 'hidden';
+  };
+  const r64 = (v) => Math.round(v * 64) / 64;
+  const boxOf = (el) => {
+    const r = el.getBoundingClientRect();
+    return { x: r64(r.x + scrollX), y: r64(r.y + scrollY), width: r64(r.width), height: r64(r.height) };
+  };
+  const alpha = (c) => {
+    const m = /rgba?\(([^)]+)\)/.exec(c || '');
+    if (!m) return c && c !== 'transparent' ? 1 : 0;
+    const p = m[1].split(/[\s,/]+/).filter(Boolean);
+    return p.length > 3 ? Number(p[3]) : 1;
+  };
+  const draws = (el) => {
+    const s = getComputedStyle(el);
+    for (const side of ['Top', 'Right', 'Bottom', 'Left']) if (parseFloat(s[`border${side}Width`]) > 0 && s[`border${side}Style`] !== 'none' && alpha(s[`border${side}Color`]) > 0) return true;
+    return s.boxShadow !== 'none' || alpha(s.backgroundColor) > 0 || s.backgroundImage !== 'none';
+  };
+  /** The box a shopper sees as the field: the outermost wrapper close around the input that draws something. */
+  const fieldOf = (input) => {
+    const ri = input.getBoundingClientRect();
+    let best = draws(input) ? input : null;
+    for (let e = up(input); e && e !== document.body; e = up(e)) {
+      const r = e.getBoundingClientRect();
+      if (r.height > ri.height + 24 || r.width > ri.width * 3 + 8) break;
+      if (draws(e)) best = e;
+    }
+    return best ?? input;
+  };
+  const out = {};
+  for (const it of arg.items) {
+    let el = null;
+    if (it.field) {
+      const input = qa(document, it.field).find(vis);
+      el = input ? fieldOf(input) : null;
+    } else if (it.root) {
+      const root = qa(document, it.root).find(vis) ?? null;
+      el = root && it.part ? (qa(root, it.part).find(vis) ?? null) : root;
+    }
+    out[it.key] = el ? boxOf(el) : null;
+  }
+  return out;
+}
+
+/**
+ * Before any script (addInitScript): every DOM change of the page counted
+ * (`window.__parityMutations.n`: children, attributes, text), the frame
+ * probe's aside: what an action changed when it did not navigate
+ * (docs/PARITY.md, "Behaviour").
+ */
+export function mutationsInit() {
+  if (window.__parityMutations) return;
+  const m = (window.__parityMutations = { n: 0 });
+  const mine = (n) => !!n && n.nodeType === 1 && n.tagName === 'LBX-PARITY-PROBE';
+  const start = () => {
+    new MutationObserver((list) => {
+      for (const r of list) {
+        if (mine(r.target)) continue;
+        if (r.type === 'childList' && [...r.addedNodes, ...r.removedNodes].every(mine)) continue;
+        m.n++;
+      }
+    }).observe(document.documentElement, { childList: true, subtree: true, attributes: true, characterData: true });
+  };
+  if (document.documentElement) start();
+  else
+    new MutationObserver((_, o) => {
+      if (!document.documentElement) return;
+      o.disconnect();
+      start();
+    }).observe(document, { childList: true });
+}
+
+/**
+ * The element an interaction acts on (docs/PARITY.md, "Behaviour"): the
+ * component's instance showing the paired product (`value`: its key
+ * attribute's value; else the first visible instance), the part in it (else
+ * the root itself), and in that the control (a label's checkbox, a
+ * wrapper's select). Kept as `window.__parityTarget`; returns what it is and
+ * the ids the instance carries (its data attributes' values: the product's
+ * ids on that side).
+ * @param {{ root: string, part: string | null, key: { attr: string, child?: string } | null, value: string | null }} arg
+ */
+export function targetOf(arg) {
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const vis = (el) => {
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0 && getComputedStyle(el).visibility !== 'hidden';
+  };
+  const keyOf = (r) => {
+    if (!arg.key) return null;
+    const src = arg.key.child ? (qa(r, arg.key.child)[0] ?? null) : r;
+    return src ? src.getAttribute(arg.key.attr) : null;
+  };
+  const roots = qa(document, arg.root).filter(vis);
+  const root = (arg.value != null ? roots.find((r) => keyOf(r) === arg.value) : null) ?? roots[0] ?? null;
+  window.__parityTarget = null;
+  if (!root) return { found: false, why: `no ${arg.root} on the page` };
+  const el = arg.part ? (qa(root, arg.part).find((e) => e.getClientRects().length > 0) ?? null) : root;
+  if (!el) return { found: false, why: `no ${arg.part} in ${arg.root}` };
+  const CONTROL = 'select, input:not([type=hidden]), button, a[href], [role=checkbox], [role=button], [role=slider]';
+  const control = el.matches(CONTROL) ? el : (qa(el, CONTROL)[0] ?? el);
+  window.__parityTarget = control;
+  const ids = [];
+  for (const e of [root, ...qa(root, '*')].slice(0, 200))
+    for (const a of e.attributes) if (/^data-/.test(a.name) && a.value && a.value.length <= 64 && /\d/.test(a.value) && !ids.includes(a.value)) ids.push(a.value);
+  return {
+    found: true,
+    key: keyOf(root),
+    tag: control.tagName.toLowerCase(),
+    type: control.getAttribute('type'),
+    href: control.getAttribute('href'),
+    checked: 'checked' in control ? !!control.checked : null,
+    options: control.tagName === 'SELECT' ? [...control.options].map((o) => ({ value: o.value, label: o.textContent.trim(), selected: o.selected })) : null,
+    ids: ids.slice(0, 20),
+  };
+}
+
+/**
+ * The state an interaction's watches read (docs/PARITY.md, "Behaviour"): per
+ * watch, how many elements match, the first rendered one's text, its checked
+ * state (a checkbox's, aria-checked, aria-pressed) and value; the target's
+ * own checked state and value; the DOM changes so far (mutationsInit).
+ * @param {{ watch: { name: string, sel: string | null }[] }} arg
+ */
+export function readWatches(arg) {
+  const D = window.__parityDeep;
+  const qa = (sel) => {
+    if (D) return D.all(document, sel);
+    try {
+      return [...document.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const checked = (e) => {
+    if (!e) return null;
+    if (e.tagName === 'INPUT' && /^(checkbox|radio)$/i.test(e.type)) return !!e.checked;
+    if (e.hasAttribute('aria-checked')) return e.getAttribute('aria-checked') === 'true';
+    if (e.hasAttribute('aria-pressed')) return e.getAttribute('aria-pressed') === 'true';
+    return null;
+  };
+  const value = (e) => (e && (e.tagName === 'INPUT' || e.tagName === 'SELECT' || e.tagName === 'TEXTAREA') ? e.value : null);
+  const out = {};
+  for (const w of arg.watch) {
+    if (!w.sel) {
+      out[w.name] = null;
+      continue;
+    }
+    const all = qa(w.sel);
+    const e = all.find((x) => x.getClientRects().length > 0) ?? all[0] ?? null;
+    out[w.name] = { count: all.length, text: e ? (e.innerText ?? e.textContent ?? '').replace(/\s+/g, ' ').trim().slice(0, 200) : null, checked: checked(e), value: value(e) };
+  }
+  const t = window.__parityTarget;
+  return { watches: out, target: t && t.isConnected ? { checked: checked(t), value: value(t) } : null, mutations: window.__parityMutations ? window.__parityMutations.n : null };
+}
+
+/**
+ * Our controls without a counterpart (docs/PARITY.md, "Behaviour"): in the
+ * instance of each root (a component's: the paired product's, else the
+ * first), the links, buttons, checkboxes, radios and selects that are none of
+ * the mapped elements (`mapped`: ours of the parts theirs has too), hold none
+ * and are in none. Each as a path from its root, to find it again on a fresh
+ * page.
+ * @param {{ items: { component: string, root: string, mapped: string[], key: { attr: string } | null, value: string | null }[], max?: number }} arg
+ */
+export function strayControls(arg) {
+  const D = window.__parityDeep;
+  const qa = (scope, sel) => {
+    if (D) return D.all(scope, sel);
+    try {
+      return [...scope.querySelectorAll(sel)];
+    } catch {
+      return [];
+    }
+  };
+  const vis = (el) => {
+    const r = el.getBoundingClientRect();
+    return r.width > 0 && r.height > 0 && getComputedStyle(el).visibility !== 'hidden';
+  };
+  const CONTROL = 'a[href], button, [role=button], input[type=checkbox], input[type=radio], [role=checkbox], select';
+  const out = [];
+  for (const it of arg.items) {
+    const roots = qa(document, it.root).filter(vis);
+    const root = (it.value != null && it.key ? roots.find((r) => r.getAttribute(it.key.attr) === it.value) : null) ?? roots[0];
+    if (!root) continue;
+    const mapped = it.mapped.flatMap((s) => qa(root, s));
+    const covered = (e) => mapped.some((m) => m === e || m.contains(e) || e.contains(m));
+    const controls = qa(root, CONTROL).filter((e) => e.getClientRects().length > 0 && !covered(e));
+    for (const e of controls.slice(0, arg.max ?? 6)) {
+      const path = [];
+      for (let x = e; x && x !== root; x = x.parentElement) {
+        const same = x.parentElement ? [...x.parentElement.children].filter((y) => y.tagName === x.tagName) : [x];
+        path.unshift(`${x.tagName.toLowerCase()}${same.length > 1 ? `:nth-of-type(${same.indexOf(x) + 1})` : ''}`);
+      }
+      const label = (e.getAttribute('aria-label') || e.textContent || e.getAttribute('title') || e.getAttribute('href') || '').replace(/\s+/g, ' ').trim().slice(0, 60);
+      out.push({ component: it.component, path: `:scope > ${path.join(' > ')}`, tag: e.tagName.toLowerCase(), label, href: e.getAttribute('href') });
+    }
+  }
+  return out;
+}