@palate/cli 0.0.0-stage → 0.0.1

package/src/page-states.js

@@ -0,0 +1,703 @@
+// Runs inside the page (read as text and evaluated with an op and its argument). The stateful parts of a
+// screen and how each holds up in a state:
+//   find       lists, tables and card grids, forms, numbers, images and text that comes from data, plus buttons
+//              that may act; marks each with data-palate-c so the same render can find it again
+//   mark       finds the same parts again in another render (by selector, then by their items' signature)
+//   measure    per part: items, overflow and clipping, layout breaks, empty / error / loading messages that
+//              appeared, broken images; page-wide: sideways scroll, leaked "undefined", "1 items", the focus
+//   transform  DOM-level states for data that is static in the code: long text, many items, one item
+//   texts      every visible text, to tell what a state added
+//   focus      where keyboard focus is, and whether it can be seen
+(op, arg = {}) => {
+  const clean = (s) => (s ?? "").replace(/\s+/g, " ").trim();
+  const visible = (el) => {
+    if (!el || el.nodeType !== 1) return false;
+    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.02;
+  };
+  const box = (el) => {
+    const r = el.getBoundingClientRect();
+    return { x: Math.round(r.left + scrollX), y: Math.round(r.top + scrollY), width: Math.round(r.width), height: Math.round(r.height) };
+  };
+  // Not data: navigation, menus, decorative miniatures, palate's own overlay.
+  const CHROME = "nav, header, footer, [role=navigation], [role=banner], [role=contentinfo], [role=tablist], [role=menu], [role=menubar], [role=listbox], [role=tree], select, datalist, svg, [aria-hidden=true], [inert], script, style, template, noscript, [data-palate-ignore]";
+  const stableId = (id) => id && !/^[:«]|^radix-|^headlessui-|^react-aria|:r[\w]*:|«|\d{4,}/.test(id) && document.querySelectorAll(`#${CSS.escape(id)}`).length === 1;
+  const selOf = (el) => {
+    const parts = [];
+    for (let e = el; e && e.nodeType === 1 && e !== document.body; e = e.parentElement) {
+      if (stableId(e.id)) {
+        parts.unshift(`#${CSS.escape(e.id)}`);
+        return parts.join(" > ");
+      }
+      let n = 1;
+      for (let s = e.previousElementSibling; s; s = s.previousElementSibling) if (s.tagName === e.tagName) n++;
+      parts.unshift(`${e.tagName.toLowerCase()}:nth-of-type(${n})`);
+    }
+    return ["body", ...parts].join(" > ");
+  };
+  const kidsOf = (p) => [...p.children].flatMap((k) => (getComputedStyle(k).display === "contents" ? kidsOf(k) : [k]));
+  const sigOf = (el) => `${el.tagName.toLowerCase()}${[...el.classList].filter((c) => /^[a-z_-][\w-]*$/i.test(c) && !/^(is-|active|selected|current|open|first|last|odd|even)/.test(c)).sort().slice(0, 5).map((c) => `.${c}`).join("")}`;
+  const shapeOf = (el) => [...el.children].slice(0, 4).map((c) => c.tagName).join(",");
+  const ownText = (el) => clean([...el.childNodes].filter((n) => n.nodeType === 3).map((n) => n.textContent).join(" "));
+  const EMPTY_RE = /\b(no \w+(?: \w+)? (?:yet|found|here|to show|available|match)|nothing (?:here|to show|yet|found)|is empty|empty|no results|no items|no data|get started|add (?:your|a|the) first|create (?:your|a|the) first|invite (?:your|a|the)? ?first|start by)\b|^no \w+/i;
+  const ERROR_RE = /\b(error|wrong|couldn.?t|could not|can.?t (?:load|reach|connect|save)|cannot|failed|failure|unable|problem|try again|retry|offline|no connection|connection (?:lost|failed)|went wrong|unavailable|timed? ?out|not respond)/i;
+  const LOADING_RE = /\b(loading|fetching|please wait|one moment|saving|sending|submitting|joining|inviting|working|uploading)\b|…$|\.\.\.$/i;
+  const CUES = "[aria-busy=true], [role=progressbar], progress, [class*=skeleton i], [class*=spinner i], [class*=loading i], [class*=loader i], [class*=shimmer i], [class*=placeholder-glow], .animate-pulse, .animate-spin, [data-loading], [data-state=loading], [data-pending]";
+
+  // Every visible element's own text, so a state's new text can be told from what was there before.
+  const allTexts = () => {
+    const out = [];
+    for (const el of document.body.querySelectorAll("*")) {
+      if (/^(SCRIPT|STYLE|NOSCRIPT|TEMPLATE|svg)$/i.test(el.tagName) || el.closest("svg, [data-palate-ignore]")) continue;
+      const t = ownText(el);
+      if (t && t.length <= 300 && visible(el)) out.push({ t, el });
+    }
+    return out;
+  };
+
+  const labelOf = (e) => clean(e.getAttribute("aria-label") || (e.getAttribute("aria-labelledby") && document.getElementById(e.getAttribute("aria-labelledby").split(/\s+/)[0])?.textContent) || "");
+  // The part's own name: its label, the heading just before it, or the label of the region it sits in. A
+  // labelled region is a boundary: the heading of the section next to it is not this part's.
+  const headingOf = (el) => {
+    if (labelOf(el)) return labelOf(el).slice(0, 60);
+    for (let e = el, k = 0; e && e !== document.body && k < 5; e = e.parentElement, k++) {
+      if (e !== el && e.matches("section, article, aside, form, fieldset, [role=region], [role=dialog], [role=group]") && labelOf(e)) return labelOf(e).slice(0, 60);
+      for (let s = e.previousElementSibling; s; s = s.previousElementSibling) {
+        const h = s.matches("h1, h2, h3, h4, h5, h6, [role=heading]") ? s : s.querySelector("h1, h2, h3, h4, h5, h6, [role=heading]");
+        if (h && clean(h.textContent)) return clean(h.textContent).slice(0, 60);
+      }
+    }
+    return "";
+  };
+  // Text that names another part (its heading, the label of its region, a legend or caption) is that part's
+  // label, not a part of its own.
+  const HEADING = "h1, h2, h3, h4, h5, h6, [role=heading], label, legend, caption, th, dt, figcaption";
+  const labelsAPart = (block, parts) => {
+    const t = clean(block.textContent);
+    if (block.id && document.querySelector(`[aria-labelledby~="${CSS.escape(block.id)}"], [aria-describedby~="${CSS.escape(block.id)}"]`)) return true;
+    if (!block.matches(HEADING)) return false;
+    return parts.some((p) => p.contains(block) || headingOf(p) === t.slice(0, 60) || (block.closest("section, article, aside, [role=region], form, fieldset") ?? document.body).contains(p) && block.closest("section, article, aside, [role=region], form, fieldset"));
+  };
+  const regionOf = (el) => {
+    const r = el.parentElement?.closest("section, article, aside, form, [role=region], [role=dialog], main > *, li, td");
+    return r && r !== document.body && r.getBoundingClientRect().height < Math.max(innerHeight * 2.5, 2000) ? r : el.parentElement?.parentElement ?? el.parentElement ?? el;
+  };
+  const surface = (el) => {
+    const cs = getComputedStyle(el);
+    return (cs.backgroundColor !== "rgba(0, 0, 0, 0)" && cs.backgroundColor !== "transparent") || parseFloat(cs.borderTopWidth) > 0 || cs.boxShadow !== "none";
+  };
+
+  // A collection: a container whose visible children are mostly the same kind of item (same tag and classes,
+  // same inner shape), each with text or a picture. The outermost such container wins.
+  const collections = () => {
+    const cands = [];
+    for (const el of document.body.querySelectorAll("*")) {
+      if (/^(P|H[1-6]|SPAN|A|BUTTON|LABEL|TR|IMG|PICTURE|BODY|MAIN|SELECT|OPTION|svg|path|g|INPUT|TEXTAREA|CODE|PRE)$/i.test(el.tagName)) continue;
+      if (el.closest(CHROME) || !visible(el)) continue;
+      const kids = kidsOf(el).filter((k) => !/^(SCRIPT|STYLE|TEMPLATE|BR|HR|LINK)$/.test(k.tagName) && visible(k));
+      const listy = /^(UL|OL|TBODY|DL)$/.test(el.tagName) || /^(list|grid|feed|rowgroup|table)$/.test(el.getAttribute("role") || "");
+      const min = listy ? 2 : 3;
+      if (kids.length < min) continue;
+      const counts = new Map();
+      for (const k of kids) counts.set(sigOf(k), (counts.get(sigOf(k)) || 0) + 1);
+      const [sig, n] = [...counts].sort((a, b) => b[1] - a[1])[0];
+      if (n < min || n < kids.length * 0.6) continue;
+      const items = kids.filter((k) => sigOf(k) === sig);
+      if (items.some((k) => /^(SECTION|MAIN|HEADER|FOOTER|NAV|ASIDE|FORM)$/.test(k.tagName))) continue;
+      const leaf = items.every((k) => !k.children.length || /^(P|H[1-6]|SPAN|EM|STRONG|A|CODE|B|I|SMALL|BUTTON)$/.test(k.tagName));
+      if (leaf && !listy) continue;
+      // The same inner shape: page blocks that only share a class don't count.
+      const shapes = new Map();
+      for (const k of items) shapes.set(shapeOf(k), (shapes.get(shapeOf(k)) || 0) + 1);
+      if (Math.max(...shapes.values()) < items.length * 0.6) continue;
+      const rects = items.map((k) => k.getBoundingClientRect());
+      if (rects.some((b) => b.height > Math.max(innerHeight * 0.9, 760))) continue;
+      if (rects.reduce((a, b) => a + b.width * b.height, 0) < 3000) continue;
+      if (!items.every((k) => clean(k.textContent) || k.querySelector("img, picture, canvas, video, svg"))) continue;
+      cands.push({ el, items, sig, shape: [...shapes].sort((a, b) => b[1] - a[1])[0][0], listy });
+    }
+    return cands.filter((c) => !cands.some((o) => o !== c && o.items.some((it) => it.contains(c.el))));
+  };
+
+  const kindOf = (c) => {
+    const el = c.el;
+    if (/^(TBODY|TABLE)$/.test(el.tagName) || /rowgroup|table/.test(el.getAttribute("role") || "")) return "table";
+    const tops = new Set(c.items.map((k) => Math.round(k.getBoundingClientRect().top)));
+    const lefts = new Set(c.items.map((k) => Math.round(k.getBoundingClientRect().left)));
+    if (c.items.filter(surface).length >= c.items.length * 0.6) return tops.size > 1 && lefts.size > 1 ? "cards" : lefts.size > 1 ? "cards" : "list";
+    return tops.size > 1 && lefts.size > 1 ? "grid" : "list";
+  };
+
+  const describe = (el) => {
+    if (!el) return null;
+    const t = clean(el.getAttribute?.("aria-label") || el.textContent || el.value || el.getAttribute?.("placeholder") || "").slice(0, 50);
+    return `<${el.tagName.toLowerCase()}${el.id && stableId(el.id) ? `#${el.id}` : ""}>${t ? ` "${t}"` : ""}`;
+  };
+
+  // Where a focused control that can't be seen itself shows its focus: its label, the label around it, its
+  // wrapper or a sibling (and what they hold), compared focused and blurred with transitions off. Focus is
+  // put back as it was. The first visible element whose paint changed, or null.
+  const focusShownOn = (a) => {
+    const near = new Set([...(a.labels ?? []), a.closest("label"), a.parentElement, a.nextElementSibling, a.previousElementSibling].filter((e) => e && e !== document.body));
+    const cands = [];
+    for (const e of near) for (const x of [e, ...e.querySelectorAll("*")].slice(0, 12)) if (x !== a && !cands.includes(x)) cands.push(x);
+    const props = (c) => [c.outlineStyle, c.outlineWidth, c.outlineColor, c.boxShadow, c.borderTopColor, c.borderBottomColor, c.borderTopWidth, c.backgroundColor, c.backgroundImage, c.color, c.textDecorationLine, c.opacity, c.transform].join("|");
+    const paint = (x) => [props(getComputedStyle(x)), ...["::before", "::after"].map((p) => getComputedStyle(x, p)).filter((c) => c.content && c.content !== "none" && c.content !== "normal").map(props)].join("~");
+    const still = document.createElement("style");
+    still.setAttribute("data-palate-ignore", "");
+    still.textContent = "*, *::before, *::after { transition: none !important; animation-play-state: paused !important; }";
+    document.head.appendChild(still);
+    try {
+      const on = cands.map(paint);
+      a.blur();
+      const off = cands.map(paint);
+      a.focus({ preventScroll: true, focusVisible: true });
+      return cands.find((x, i) => on[i] !== off[i] && visible(x)) ?? null;
+    } finally {
+      if (document.activeElement !== a) a.focus({ preventScroll: true });
+      still.remove();
+    }
+  };
+
+  if (op === "texts") return [...new Set(allTexts().map((x) => x.t))].slice(0, 4000);
+
+  if (op === "find") {
+    const out = [];
+    const taken = [];
+    const cols = collections()
+      .sort((a, b) => b.el.getBoundingClientRect().width * b.el.getBoundingClientRect().height - a.el.getBoundingClientRect().width * a.el.getBoundingClientRect().height)
+      .slice(0, 10)
+      .sort((a, b) => (a.el.compareDocumentPosition(b.el) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1));
+    for (const c of cols) {
+      const kind = kindOf(c);
+      out.push({ el: c.el, kind, sig: c.sig, shape: c.shape, count: c.items.length, itemBox: box(c.items[0]), texts: c.items.slice(0, 3).map((k) => clean(k.textContent).slice(0, 80)), images: c.el.querySelectorAll("img").length });
+      taken.push(c.el);
+    }
+    const inTaken = (el) => taken.some((t) => t.contains(el));
+    // Forms, and inputs with a button beside them outside any form. Same-looking forms are tested once.
+    const forms = [];
+    for (const f of document.querySelectorAll("form")) if (visible(f) && !f.closest("[aria-hidden=true], [inert], [data-palate-ignore]")) forms.push({ el: f, orphan: false });
+    for (const i of document.querySelectorAll("input:not([type=hidden]):not([type=checkbox]):not([type=radio]), textarea")) {
+      if (i.closest("form") || !visible(i) || i.closest(CHROME)) continue;
+      // A live filter (a search box over a list, filter chips beside it) has nothing to submit or fail.
+      if (i.type === "search" || i.closest("[role=search]")) continue;
+      let g = i.parentElement;
+      for (let k = 0; g && k < 3 && !g.querySelector("button"); k++) g = g.parentElement;
+      if (g?.querySelector("button") && !forms.some((f) => f.el.contains(g) || g.contains(f.el))) forms.push({ el: g, orphan: true });
+    }
+    for (const f of forms.slice(0, 4)) {
+      const fields = [...f.el.querySelectorAll("input:not([type=hidden]):not([type=submit]):not([type=button]), textarea, select")].filter(visible).map((x) => ({ sel: selOf(x), type: x.tagName === "INPUT" ? x.type : x.tagName.toLowerCase(), name: x.name || x.id || "", required: x.required || x.getAttribute("aria-required") === "true", label: clean(x.labels?.[0]?.textContent || x.getAttribute("aria-label") || x.placeholder || "").slice(0, 40), rules: { pattern: x.getAttribute("pattern") || null, minLength: x.minLength > 0 ? x.minLength : null, maxLength: x.maxLength > 0 ? x.maxLength : null, inputMode: x.getAttribute("inputmode") || null, autocomplete: x.getAttribute("autocomplete") || null, placeholder: x.placeholder || null, min: x.getAttribute("min"), max: x.getAttribute("max") } }));
+      const submit = f.el.querySelector("button[type=submit], input[type=submit], button:not([type])") ?? f.el.querySelector("button");
+      if (!fields.length || !submit) continue;
+      const name = clean(f.el.getAttribute("aria-label") || f.el.querySelector("legend, h2, h3, h4")?.textContent || f.el.querySelector("label")?.textContent || "").slice(0, 60);
+      out.push({ el: f.el, kind: "form", name, texts: [name, clean(submit.textContent || submit.value)].filter(Boolean), orphan: f.orphan, fields, submit: selOf(submit), submitText: clean(submit.textContent || submit.value).slice(0, 40), noValidate: Boolean(f.el.noValidate), formSig: `${fields.map((x) => x.type).join(",")}|${clean(submit.textContent)}` });
+    }
+    // Numbers set large (counters, totals), outside collections.
+    let nums = 0;
+    for (const el of document.body.querySelectorAll("*")) {
+      if (nums >= 4 || el.closest(CHROME) || inTaken(el)) continue;
+      const t = ownText(el);
+      if (!/^[$€£¥]?\s?\d[\d.,]*\s?(%|[kKmMbB]|\+)?$/.test(t) || parseFloat(getComputedStyle(el).fontSize) < 20 || !visible(el)) continue;
+      out.push({ el, kind: "number", texts: [t] });
+      nums++;
+    }
+    // Large standalone images.
+    let imgs = 0;
+    for (const im of document.querySelectorAll("img")) {
+      if (imgs >= 4 || im.closest(CHROME) || inTaken(im)) continue;
+      const r = im.getBoundingClientRect();
+      if (r.width < 100 || r.height < 60 || !visible(im)) continue;
+      out.push({ el: im, kind: "image", texts: [im.alt || ""] });
+      imgs++;
+    }
+    // Text that came from data (it matches a string the app fetched), outside collections and forms.
+    const data = new Set((arg.dataStrings ?? []).filter((s) => s.length >= 3));
+    if (data.size) {
+      const seen = new Set();
+      const parts = out.map((c) => c.el);
+      // A whole word or phrase from the data: "firing" (a status) is not in "This week's firings".
+      const escRe = (x) => x.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+      const inText = (t, d) => t === d || (d.length >= 6 && new RegExp(`(^|[^\\w])${escRe(d)}($|[^\\w])`).test(t));
+      for (const { t, el } of allTexts()) {
+        if (seen.size >= 4 || inTaken(el) || el.closest("form") || el.closest(CHROME)) continue;
+        if (![...data].some((d) => inText(t, d))) continue;
+        const block = el.closest("p, h1, h2, h3, h4, h5, h6, li, dd, td, div") ?? el;
+        if (seen.has(block) || labelsAPart(block, parts) || labelsAPart(el, parts)) continue;
+        seen.add(block);
+        out.push({ el: block, kind: "text", texts: [t.slice(0, 80)] });
+      }
+    }
+    // Buttons that may act (not submits, not navigation): tested by clicking, with the network mocked.
+    const actions = [...document.querySelectorAll("button:not([type=submit]), [role=button]")]
+      .filter((b) => visible(b) && !b.closest(CHROME) && !b.closest("form") && !b.matches(":disabled") && !b.closest("[aria-disabled=true]") && clean(b.textContent || b.getAttribute("aria-label")).length > 0)
+      .slice(0, 8)
+      .map((b) => ({ sel: selOf(b), text: clean(b.textContent || b.getAttribute("aria-label")).slice(0, 40) }));
+    const components = out.map((c, i) => {
+      const id = `C${i + 1}`;
+      c.el.setAttribute("data-palate-c", id);
+      const region = regionOf(c.el);
+      const { el, ...rest } = c;
+      return { id, ...rest, selector: selOf(el), region: selOf(region), heading: rest.name || headingOf(el), className: typeof el.className === "string" ? el.className.slice(0, 160) : "", box: box(el), tag: el.tagName.toLowerCase() };
+    });
+    return { components, actions, title: document.title };
+  }
+
+  if (op === "mark") {
+    const res = {};
+    for (const c of arg.components ?? []) {
+      let el = document.querySelector(`[data-palate-c="${c.id}"]`);
+      let via = el ? "marked" : null;
+      if (!el) {
+        try {
+          el = document.querySelector(c.selector);
+        } catch {}
+        // The selector may now point at something else: for collections, its items must still look the same.
+        if (el && c.sig && !kidsOf(el).some((k) => sigOf(k) === c.sig) && kidsOf(el).length) el = null;
+        if (el && el.tagName.toLowerCase() !== c.tag) el = null;
+        via = el ? "selector" : null;
+      }
+      if (!el && c.sig) {
+        el = [...document.body.querySelectorAll(c.tag)].find((x) => !x.closest("[data-palate-ignore]") && kidsOf(x).filter((k) => sigOf(k) === c.sig).length >= 1) ?? null;
+        via = el ? "items" : null;
+      }
+      if (el) el.setAttribute("data-palate-c", c.id);
+      res[c.id] = { present: Boolean(el && visible(el)), via };
+    }
+    return res;
+  }
+
+  if (op === "transform") {
+    const NAME = "Maximiliana Alexandrova-Featherstonehaugh de la Cruz-Villanueva";
+    const COMPANY = "International Consolidated Holdings & Subsidiaries Worldwide Ltd.";
+    const EMAIL = "maximiliana.alexandrova-featherstonehaugh@international-consolidated-holdings.co.uk";
+    const WORD = "Supercalifragilisticexpialidocious-pneumonoultramicroscopicsilicovolcanoconiosis";
+    const longer = (t, i) => {
+      if (/^\S+@\S+\.\S+$/.test(t)) return EMAIL;
+      if (/^[$€£¥]?\s?\d[\d.,]*\s?(%|[kKmMbB]|\+)?$/.test(t)) return "1,234,567,890";
+      if (/^https?:\/\//.test(t)) return `https://example.com/${WORD.toLowerCase()}/${WORD.toLowerCase()}`;
+      if (t.length <= 32 && t.split(" ").length <= 4 && /^[A-Z]/.test(t)) return i % 2 ? COMPANY : NAME;
+      return `${t} ${t} ${t}`;
+    };
+    // Long text goes only where data would: names, titles and values in items, cells and fields. Fixed copy
+    // around them (control and segment labels, column and term labels, captions, footnotes, the section's
+    // own heading, a number in a heading, sentences) stays as written: it only grows when someone edits it.
+    const UI_COPY = "legend, th, dt, caption, figcaption, small, sup, sub, footer, h1, h2, [role=note]";
+    // A control whose text is one short label (a segment, a tab, a radio's span) is UI copy; a control that
+    // holds a record (a selectable card with a piece, a name and a status) is data.
+    const CONTROL = "label, button, [role=button], [role=radio], [role=tab], [role=switch], [role=option], [aria-pressed], [aria-checked], [aria-selected]";
+    const slotsOf = (e) => {
+      const out = [];
+      const w = document.createTreeWalker(e, NodeFilter.SHOW_TEXT);
+      for (let n; (n = w.nextNode()); ) if (clean(n.textContent) && !n.parentElement.closest("svg, .sr-only, [aria-hidden=true]")) out.push(clean(n.textContent));
+      return out;
+    };
+    const NOTE = /(^|[\s_-])(foot|footnote|footnotes|fine|fineprint|note|notes|legal|disclaimer|caption|eyebrow|kicker)([\s_-]|$)/i;
+    const dataSlot = (p, root, t) => {
+      // Prose (a sentence, a description) is written copy; data is short: a name, a title, a value.
+      if (t.split(/\s+/).length > 6 || (/[.!?:]$/.test(t) && t.split(/\s+/).length > 2)) return false;
+      // A product drawn in HTML on the page (a labelled mock window, a figure) shows demo data written once.
+      if (p.closest("[role=group][aria-label], [role=group][aria-labelledby], [role=img], figure, [data-product]")) return false;
+      const ui = p.closest(UI_COPY);
+      if (ui && (root.contains(ui) || ui.contains(root))) return false;
+      const ctl = p.closest(CONTROL);
+      if (ctl && root.contains(ctl)) {
+        const slots = slotsOf(ctl);
+        if (slots.length <= 2 && slots.join(" ").split(" ").length <= 5) return false;
+      }
+      for (let e = p; e && e !== document.body; e = e.parentElement) {
+        if (NOTE.test(`${e.id} ${typeof e.className === "string" ? e.className : ""}`)) return false;
+        if (e === root) break;
+      }
+      return !(/^[$€£¥]?\s?\d[\d.,]*\s?(%|[kKmMbB]|\+)?$/.test(t) && p.closest("h1, h2, h3, h4, h5, h6, [role=heading]"));
+    };
+    const done = {};
+    for (const c of arg.components ?? []) {
+      const el = document.querySelector(`[data-palate-c="${c.id}"]`);
+      if (!el) continue;
+      const items = c.sig ? kidsOf(el).filter((k) => sigOf(k) === c.sig) : [];
+      if (arg.mode === "many" && items.length) {
+        let last = items[items.length - 1];
+        let n = items.length;
+        while (n < (arg.n ?? 50)) {
+          const copy = items[n % items.length].cloneNode(true);
+          copy.removeAttribute("id");
+          copy.querySelectorAll("[id]").forEach((x) => x.removeAttribute("id"));
+          last.parentNode.insertBefore(copy, last.nextSibling);
+          last = copy;
+          n++;
+        }
+        done[c.id] = n;
+      } else if (arg.mode === "one" && items.length > 1) {
+        items.slice(1).forEach((k) => k.remove());
+        done[c.id] = 1;
+      } else if (arg.mode === "long") {
+        const roots = items.length ? items : [el];
+        let changed = 0;
+        roots.forEach((root, i) => {
+          const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+          let k = 0;
+          for (let n; (n = walker.nextNode()) && k < 3; ) {
+            const t = clean(n.textContent);
+            if (!t || n.parentElement.closest("svg, script, style") || !dataSlot(n.parentElement, el, t)) continue;
+            n.textContent = longer(t, i + k);
+            if (i === 0 && k === 0) n.textContent += ` ${WORD}`;
+            k++;
+            changed++;
+          }
+        });
+        done[c.id] = changed;
+      }
+    }
+    return done;
+  }
+
+  if (op === "measure") {
+    const base = new Set(arg.baseTexts ?? []);
+    const texts = allTexts();
+    const fresh = texts.filter((x) => !base.has(x.t));
+    const pageCues = [...document.querySelectorAll(CUES)].filter((e) => visible(e) && !e.closest("[data-palate-ignore]")).map(describe).slice(0, 4);
+    const brokenImg = (im) => visible(im) && im.complete && im.naturalWidth === 0 && !!(im.currentSrc || im.src);
+    // An avatar: small, round, and next to a person's name (or named as one). A photo of a thing is not.
+    const PERSON = /^[A-Z][a-zà-ÿ'’.-]+(?:\s+(?:de|da|van|von|la|le|del|di|[A-Z][a-zà-ÿ'’.-]+)){1,3}$/;
+    const avatarish = (im) => {
+      const r = im.getBoundingClientRect();
+      const cs = getComputedStyle(im);
+      const radius = parseFloat(cs.borderTopLeftRadius) || 0;
+      const round = /%/.test(cs.borderTopLeftRadius) ? radius >= 40 : radius >= Math.min(r.width, r.height) * 0.4;
+      const named = /avatar|profile|user|member|author/i.test(`${im.className} ${im.alt} ${im.currentSrc || im.src}`);
+      let person = PERSON.test(clean(im.alt));
+      for (let e = im.parentElement, k = 0; e && !person && k < 3; e = e.parentElement, k++) person = [...e.querySelectorAll("*")].some((x) => x !== im && !x.children.length && PERSON.test(clean(x.textContent)));
+      return r.width <= 64 && round && (person || named);
+    };
+    const overflowIn = (root) => {
+      const out = [];
+      const cr = root.getBoundingClientRect();
+      for (const el of [root, ...root.querySelectorAll("*")]) {
+        if (out.length >= 8) break;
+        if (el.closest("svg") || !visible(el)) continue;
+        const cs = getComputedStyle(el);
+        if (/^inline$/.test(cs.display)) continue;
+        const text = ownText(el) || (el.children.length === 0 ? clean(el.textContent) : "");
+        const sel = selOf(el);
+        if (el.clientWidth > 0 && el.scrollWidth > el.clientWidth + 1) {
+          if (/hidden|clip/.test(cs.overflowX)) {
+            if (cs.textOverflow === "ellipsis") {
+              if (!el.title && !el.closest("[title]") && !el.getAttribute("aria-label")) out.push({ kind: "ellipsis", sel, text: text.slice(0, 60), px: el.scrollWidth - el.clientWidth });
+            } else if (text) out.push({ kind: "clip", sel, text: text.slice(0, 60), px: el.scrollWidth - el.clientWidth });
+          } else if (cs.overflowX === "visible" && text) out.push({ kind: "spill", sel, text: text.slice(0, 60), px: el.scrollWidth - el.clientWidth });
+        }
+        if (text && el.clientHeight > 0 && el.scrollHeight > el.clientHeight + 2 && /hidden|clip/.test(cs.overflowY) && cs.webkitLineClamp === "none" && !(cs.textOverflow === "ellipsis")) out.push({ kind: "clip-y", sel, text: text.slice(0, 60), px: el.scrollHeight - el.clientHeight });
+        if (text && el !== root && getComputedStyle(root).overflowX === "visible") {
+          const r = el.getBoundingClientRect();
+          const past = Math.max(r.right - cr.right, cr.left - r.left);
+          if (past > 2 && r.width > 0) out.push({ kind: "outside", sel, text: text.slice(0, 60), px: Math.round(past) });
+        }
+      }
+      // One entry per element, the most telling first.
+      const seen = new Set();
+      return out.filter((o) => !seen.has(o.sel) && seen.add(o.sel));
+    };
+    const comps = {};
+    for (const c of arg.components ?? []) {
+      const el = document.querySelector(`[data-palate-c="${c.id}"]`);
+      let region = null;
+      try {
+        region = (el && el.parentElement?.closest("section, article, aside, form, [role=region], [role=dialog], main > *")) || document.querySelector(c.region);
+      } catch {}
+      if (region && region.getBoundingClientRect().height > Math.max(innerHeight * 2.5, 2000)) region = el?.parentElement ?? null;
+      const scope = region ?? el;
+      const within = (node) => Boolean((scope && scope.contains(node)) || (el && el.contains(node)));
+      const here = fresh.filter((x) => within(x.el)).map((x) => x.t);
+      // New text in the part's own place: inside it, or where it was on the page.
+      const b0 = c.box;
+      const inPlace = fresh
+        .filter((x) => {
+          if (el && el.contains(x.el)) return true;
+          if (!b0) return false;
+          const r = x.el.getBoundingClientRect();
+          const y = r.top + scrollY;
+          return y >= b0.y - 24 && y <= b0.y + Math.max(b0.height, 160) && r.right + scrollX > b0.x && r.left + scrollX < b0.x + b0.width;
+        })
+        .map((x) => x.t);
+      const items = el && c.sig ? kidsOf(el).filter((k) => sigOf(k) === c.sig && visible(k)) : [];
+      const count = el && c.sig ? items.length : null;
+      const cueEls = scope ? [...scope.querySelectorAll(CUES)].filter(visible) : [];
+      const runningAnims = scope ? document.getAnimations().filter((a) => a.playState === "running" && a.effect?.getTiming?.().iterations === Infinity && a.effect?.target && scope.contains(a.effect.target) && visible(a.effect.target)).length : 0;
+      const cue = cueEls.length ? describe(cueEls[0]) : scope?.getAttribute("aria-busy") === "true" ? "aria-busy" : here.find((t) => LOADING_RE.test(t)) ? `"${here.find((t) => LOADING_RE.test(t))}"` : runningAnims ? `${runningAnims} running animation(s)` : null;
+      const scopeTexts = scope ? texts.filter((x) => scope.contains(x.el)).map((x) => x.t) : [];
+      const errorEl = scope ? [...scope.querySelectorAll("[role=alert], [aria-live]")].find((a) => visible(a) && clean(a.textContent)) : null;
+      comps[c.id] = {
+        present: Boolean(el && visible(el)),
+        box: el && visible(el) ? box(el) : null,
+        regionBox: region && visible(region) ? box(region) : null,
+        count,
+        itemBox: items[0] ? box(items[0]) : null,
+        newTexts: here.slice(0, 8),
+        emptyMsg: inPlace.find((t) => EMPTY_RE.test(t)) ?? here.find((t) => EMPTY_RE.test(t)) ?? ((count === 0 || !el) && inPlace.length ? inPlace[0] : null) ?? fresh.find((x) => EMPTY_RE.test(x.t) && x.t.length < 160)?.t ?? null,
+        inPlace: inPlace.slice(0, 6),
+        errorMsg: here.find((t) => ERROR_RE.test(t)) ?? (errorEl && !base.has(clean(errorEl.textContent)) ? clean(errorEl.textContent).slice(0, 120) : null) ?? fresh.find((x) => ERROR_RE.test(x.t) && x.t.length < 200)?.t ?? null,
+        retry: scope ? [...scope.querySelectorAll("button, a[href], [role=button]")].some((b) => visible(b) && /retry|try again|reload|refresh/i.test(b.textContent)) || fresh.some((x) => /retry|try again|reload|refresh/i.test(x.t) && x.el.closest("button, a, [role=button]")) : false,
+        loadingCue: cue,
+        actions: scope ? [...scope.querySelectorAll("button, a[href], [role=button]")].filter(visible).map((b) => clean(b.textContent || b.getAttribute("aria-label"))).filter(Boolean).slice(0, 4) : [],
+        scopeText: scopeTexts.join(" ").slice(0, 400),
+        overflow: el && visible(el) ? overflowIn(el) : [],
+        broken: el ? [...(el.tagName === "IMG" ? [el] : el.querySelectorAll("img"))].filter(brokenImg).map((im) => ({ src: (im.currentSrc || im.src).slice(-60), alt: im.alt, w: Math.round(im.getBoundingClientRect().width), avatar: avatarish(im) })).slice(0, 6) : [],
+        // How far the part reaches past the right edge of the screen (it makes the page scroll sideways).
+        past: el && visible(el) ? Math.max(0, Math.round(el.getBoundingClientRect().right - document.documentElement.clientWidth)) : 0,
+        paging: scope ? [...scope.querySelectorAll("button, a, nav")].some((b) => visible(b) && (/show more|load more|view all|see all|next|previous|older|newer|page \d/i.test(b.textContent) || /pagination/i.test(b.getAttribute("aria-label") || ""))) || (el && /auto|scroll/.test(getComputedStyle(el).overflowY) && el.scrollHeight > el.clientHeight + 4) : false,
+      };
+    }
+    const fields = (arg.fields ?? []).map((s) => {
+      try {
+        const f = document.querySelector(s);
+        return f ? f.value ?? "" : null;
+      } catch {
+        return null;
+      }
+    });
+    let submit = null;
+    if (arg.submit) {
+      try {
+        const b = document.querySelector(arg.submit);
+        if (b) submit = { disabled: Boolean(b.disabled), ariaDisabled: b.getAttribute("aria-disabled") === "true", busy: b.getAttribute("aria-busy") === "true", text: clean(b.textContent || b.value), cue: [...b.querySelectorAll(CUES)].some(visible) || [...b.querySelectorAll("svg")].some((s) => /spin|loader|loading/i.test(s.getAttribute("class") || "")) };
+      } catch {}
+    }
+    // "1 pieces", "1 members": one of anything, in the plural. "0 piece" when the page says "pieces" elsewhere.
+    const NOT_PLURAL = /(ss|us|is|ics|ous)$|^(does|goes|always|perhaps|towards|across|unless|plus|minus|this|thus|news|series|species|lens|alias|atlas|canvas|chaos|whereas|besides|sometimes|nevertheless)$/;
+    const baseJoined = [...base].join(" \n ");
+    const slip = (t) => {
+      const one = t.match(/(?:^|[^\d.,\w])1\s+([a-z]{3,}s)\b/);
+      if (one && !NOT_PLURAL.test(one[1])) return true;
+      const zero = t.match(/(?:^|[^\d.,\w])0\s+([a-z]{3,})\b/);
+      return Boolean(zero && !/s$/.test(zero[1]) && new RegExp(`(^|\\W)${zero[1]}s(\\W|$)`).test(baseJoined));
+    };
+    // Own text, and short blocks whose number and word sit in different elements (<b>1</b> pieces).
+    const shortBlocks = [...document.body.querySelectorAll("*")].filter((el) => el.children.length && el.children.length <= 4 && !el.closest("svg, script, style") && visible(el)).map((el) => clean(el.textContent)).filter((t) => t.length <= 60);
+    const a = document.activeElement;
+    const root = document.querySelector("#root, #app, #__next, #svelte, [data-reactroot]");
+    return {
+      comps,
+      // A crashed render: the app's root emptied, or a dev error overlay on top.
+      rootEmpty: Boolean(root && !root.children.length),
+      overlay: Boolean(document.querySelector("vite-error-overlay, #webpack-dev-server-client-overlay")),
+      overflowX: Math.max(0, document.documentElement.scrollWidth - document.documentElement.clientWidth),
+      pageHeight: document.documentElement.scrollHeight,
+      bodyText: clean(document.body.innerText).length,
+      newTexts: fresh.map((x) => x.t).slice(0, 30),
+      errorTexts: fresh.filter((x) => ERROR_RE.test(x.t) && x.t.length < 200).map((x) => x.t).slice(0, 4),
+      emptyTexts: fresh.filter((x) => EMPTY_RE.test(x.t) && x.t.length < 160).map((x) => x.t).slice(0, 4),
+      leaks: texts.filter((x) => /^(undefined|null|NaN|\[object Object\]|Invalid Date)$/.test(x.t) || /\b(undefined|NaN)\b|\[object Object\]/.test(x.t)).map((x) => ({ text: x.t.slice(0, 60), sel: selOf(x.el) })).slice(0, 4),
+      plurals: [...new Set(texts.map((x) => x.t).concat(shortBlocks).filter((t) => t.length <= 80 && slip(t)).map((t) => t.slice(0, 60)))].filter((t, i, a) => !a.some((o) => o !== t && t.includes(o))).slice(0, 3),
+      broken: [...document.querySelectorAll("img")].filter(brokenImg).map((im) => ({ src: (im.currentSrc || im.src).slice(-60), alt: im.alt, sel: selOf(im), w: Math.round(im.getBoundingClientRect().width) })).slice(0, 10),
+      images: [...document.querySelectorAll("img")].filter(visible).length,
+      cues: pageCues,
+      fields,
+      submit,
+      focus: !a || a === document.body || a === document.documentElement ? null : describe(a),
+    };
+  }
+
+  // After a send: how many records show the values palate typed (not counting success notes), how many
+  // success messages are up, and the retry button the UI offers, if any.
+  if (op === "outcome") {
+    const base = new Set(arg.baseTexts ?? []);
+    const SUCCESS = /\b(sent|saved|added|created|invited|success(?:ful(?:ly)?)?|done|thanks|thank you|submitted|subscribed|updated|scheduled|booked|confirmed)\b/i;
+    const values = (arg.values ?? []).filter((v) => v && v.length >= 6);
+    const texts = allTexts();
+    const note = (el) => el.closest("[role=status], [role=alert], [aria-live], [role=dialog]");
+    const records = texts.filter((x) => values.some((v) => x.t.includes(v)) && !SUCCESS.test(x.t) && !note(x.el) && !x.el.closest("form")).length;
+    const successes = texts.filter((x) => !base.has(x.t) && SUCCESS.test(x.t) && x.t.length < 160 && !/^(sent|saved|done)$/i.test(x.t) && !x.el.closest("button, label, h1, h2, h3, h4")).map((x) => x.t);
+    const retry = [...document.querySelectorAll("button, [role=button], a")].find((b) => visible(b) && !b.disabled && /^(retry|try again|resend|send again|re-?try)\b/i.test(clean(b.textContent || b.getAttribute("aria-label"))));
+    return { records, successes: successes.slice(0, 4), retry: retry ? selOf(retry) : null };
+  }
+
+  // Keyboard error recovery (one form, arg: { id, fields, submit }):
+  //   active        where focus is: which of the form's fields, its submit, inside the form at all
+  //   recover-arm   before the submit: the values, the texts and the live regions as they are, and a watch on
+  //                 every live region from here on (a message set and cleared in between is still seen)
+  //   recover-read  after it: each field (aria-invalid, :invalid, what its aria-describedby / aria-errormessage
+  //                 point at), the message on screen, the live regions that changed, where focus went (a field
+  //                 or an error summary linking to one), and whether field and message fit the screen
+  const LIVE = "[role=alert], [role=status], [role=log], [aria-live]:not([aria-live=off]), output";
+  const VALID_RE = /\b(required|invalid|enter (?:a|an|your|the)|must|please|valid|missing|format|too (?:long|short)|at (?:least|most)|can.?t be (?:blank|empty)|isn.?t|doesn.?t look|not a|looks? like|incorrect)\b/i;
+  const msgish = (t) => ERROR_RE.test(t) || VALID_RE.test(t);
+  const formEl = () => (arg.id ? document.querySelector(`[data-palate-c="${arg.id}"]`) : null);
+  const fieldEls = () => (arg.fields ?? []).map((s) => {
+    try {
+      return document.querySelector(s);
+    } catch {
+      return null;
+    }
+  });
+  const vbox = (el) => {
+    const r = el.getBoundingClientRect();
+    return { left: Math.round(r.left), top: Math.round(r.top), width: Math.round(r.width), height: Math.round(r.height), right: Math.round(r.right), bottom: Math.round(r.bottom) };
+  };
+  const offX = (el) => {
+    const r = el.getBoundingClientRect();
+    return r.left < -1 || r.right > document.documentElement.clientWidth + 1;
+  };
+  // Covered by something fixed or sticky (a header, a cookie bar), not by its own label.
+  const coveredBy = (el) => {
+    const r = el.getBoundingClientRect();
+    for (const [fx, fy] of [[0.5, 0.5], [0.12, 0.3], [0.88, 0.3]]) {
+      const x = r.left + r.width * fx;
+      const y = r.top + r.height * fy;
+      if (x < 0 || y < 0 || x >= innerWidth || y >= innerHeight) continue;
+      const t = document.elementFromPoint(x, y);
+      if (!t || el.contains(t) || t.contains(el) || t.closest("[data-palate-ignore]")) continue;
+      for (let e = t; e && e !== document.body; e = e.parentElement) if (/fixed|sticky/.test(getComputedStyle(e).position)) return describe(e);
+    }
+    return null;
+  };
+  const liveRegions = () => [...document.querySelectorAll(LIVE)];
+  const liveInfo = (el) => ({ role: el.getAttribute("role") || el.tagName.toLowerCase(), ariaLive: el.getAttribute("aria-live"), alert: el.getAttribute("role") === "alert" || el.getAttribute("aria-live") === "assertive", hidden: !el.getClientRects().length || Boolean(el.closest("[aria-hidden=true], [hidden]")) });
+
+  if (op === "active") {
+    const a = document.activeElement;
+    const f = formEl();
+    if (!a || a === document.body || a === document.documentElement) return { body: true, field: -1, submit: false, inForm: false };
+    let submit = false;
+    try {
+      submit = Boolean(arg.submit && document.querySelector(arg.submit) === a);
+    } catch {}
+    return { field: fieldEls().indexOf(a), submit, inForm: Boolean(f && f.contains(a)), sel: selOf(a), what: describe(a) };
+  }
+
+  if (op === "recover-arm") {
+    const prev = window.__palateRec;
+    if (prev && arg.again) {
+      prev.submits = 0;
+      prev.invalids = 0;
+      return { values: fieldEls().map((x) => (x ? x.value ?? "" : null)) };
+    }
+    const st = (window.__palateRec = { texts: new Set(allTexts().map((x) => x.t)), before: new Map(), live: [], submits: 0, invalids: 0 });
+    for (const el of liveRegions()) st.before.set(el, clean(el.textContent));
+    st.look = () => {
+      for (const el of liveRegions()) {
+        const t = clean(el.textContent);
+        if (!t || (st.before.has(el) && st.before.get(el) === t) || st.live.some((x) => x.el === el && x.text === t)) continue;
+        st.live.push({ el, text: t.slice(0, 200), existed: st.before.has(el), ...liveInfo(el) });
+      }
+    };
+    new MutationObserver(st.look).observe(document.body, { subtree: true, childList: true, characterData: true, attributes: true, attributeFilter: ["role", "aria-live", "hidden", "class", "style"] });
+    document.addEventListener("submit", () => st.submits++, true);
+    document.addEventListener("invalid", () => st.invalids++, true);
+    return { values: fieldEls().map((x) => (x ? x.value ?? "" : null)) };
+  }
+
+  if (op === "recover-read") {
+    const st = window.__palateRec ?? { texts: new Set(), before: new Map(), live: [], submits: 0, invalids: 0, look: () => {} };
+    st.look();
+    const form = formEl();
+    const els = fieldEls();
+    const fresh = allTexts().filter((x) => !st.texts.has(x.t));
+    const refs = (el, attr) => (el.getAttribute(attr) ?? "").split(/\s+/).filter(Boolean).map((id) => document.getElementById(id)).filter(Boolean)
+      .map((d) => ({ attr, id: d.id, text: clean(d.textContent).slice(0, 160), visible: visible(d) && Boolean(clean(d.textContent)), fresh: Boolean(clean(d.textContent)) && !st.texts.has(clean(d.textContent)) }));
+    const fields = els.map((el) => el && {
+      id: el.id || null,
+      value: el.value ?? "",
+      ariaInvalid: el.getAttribute("aria-invalid") === "true",
+      nativeInvalid: Boolean(el.matches?.(":invalid")),
+      validationMessage: (el.validationMessage || "").slice(0, 120),
+      described: [...refs(el, "aria-describedby"), ...refs(el, "aria-errormessage")],
+      box: vbox(el),
+      offX: offX(el),
+      coveredBy: visible(el) ? coveredBy(el) : null,
+    });
+    // The message on screen: what a marked field points at, else new text in or next to the form that reads
+    // like an error, else any new text in the form, else an error anywhere (a toast).
+    const marked = els.filter((el, i) => el && (fields[i].ariaInvalid || fields[i].nativeInvalid));
+    let msgEl = null;
+    for (const el of marked) {
+      for (const id of `${el.getAttribute("aria-describedby") ?? ""} ${el.getAttribute("aria-errormessage") ?? ""}`.split(/\s+/).filter(Boolean)) {
+        const d = document.getElementById(id);
+        const t = clean(d?.textContent);
+        if (!msgEl && d && visible(d) && t && (!st.texts.has(t) || msgish(t))) msgEl = d;
+      }
+    }
+    if (!msgEl) {
+      const fr = form?.getBoundingClientRect();
+      const near = fresh.filter((x) => form && (form.contains(x.el) || (() => {
+        const r = x.el.getBoundingClientRect();
+        return r.bottom >= fr.top - 80 && r.top <= fr.bottom + 80;
+      })()));
+      msgEl = (near.find((x) => msgish(x.t)) ?? near.find((x) => form?.contains(x.el) && !x.el.closest("button, label")) ?? fresh.find((x) => msgish(x.t) && x.t.length < 200))?.el ?? null;
+    }
+    const message = msgEl ? { text: clean(msgEl.textContent).slice(0, 160), sel: selOf(msgEl), box: vbox(msgEl), offX: offX(msgEl), inLive: Boolean(msgEl.closest(LIVE)) } : null;
+    // Focus: a field, or an error summary (the focused element or a block just around it links to a field).
+    const a = document.activeElement;
+    const none = !a || a === document.body || a === document.documentElement;
+    let summary = null;
+    for (let e = none ? null : a, k = 0; e && e !== document.body && k < 3 && !summary; e = e.parentElement, k++) {
+      const links = [...(e.matches("a[href^='#']") ? [e] : []), ...e.querySelectorAll("a[href^='#']")].map((l) => decodeURIComponent(l.getAttribute("href").slice(1))).filter(Boolean);
+      if (links.length && links.some((id) => els.some((x) => x && x.id === id))) summary = { sel: selOf(e), links, alert: Boolean(e.closest("[role=alert], [aria-live=assertive], [aria-live=polite]")), labelled: Boolean(e.getAttribute("aria-labelledby") || e.getAttribute("aria-label") || e.querySelector("h1, h2, h3, h4, [role=heading]")) };
+    }
+    let submitted = false;
+    try {
+      submitted = Boolean(arg.submit && document.querySelector(arg.submit) === a);
+    } catch {}
+    return {
+      fields,
+      message,
+      stillShown: arg.message ? allTexts().some((x) => x.t === arg.message || (arg.message.length > 12 && x.t.includes(arg.message))) : false,
+      live: st.live.map(({ el, ...x }) => x).slice(0, 8),
+      submits: st.submits,
+      invalids: st.invalids,
+      nativeBlocked: st.invalids > 0 && st.submits === 0,
+      active: none ? { body: true, field: -1 } : { field: els.indexOf(a), submit: submitted, sel: selOf(a), what: describe(a), summary, coveredBy: visible(a) ? coveredBy(a) : null, offX: offX(a) },
+      overflowX: Math.max(0, document.documentElement.scrollWidth - document.documentElement.clientWidth),
+      width: document.documentElement.clientWidth,
+    };
+  }
+
+  // After palate filled a form and pressed send: which fields the page says are wrong (aria-invalid, :invalid,
+  // or named by a new validation message), and that message.
+  if (op === "validity") {
+    const base = new Set(arg.baseTexts ?? []);
+    const form = formEl();
+    // Validation also asks ("Choose a collection.", "Add the date…").
+    const ASK = /^(please )?(choose|select|pick|add|enter|tell|give|fill|provide|type|confirm|agree|accept)\b/i;
+    const fresh = allTexts().filter((x) => !base.has(x.t) && (msgish(x.t) || ASK.test(x.t)) && x.t.length < 200 && !x.el.closest("button, label"));
+    const near = fresh.filter((x) => form && (form.contains(x.el) || form.parentElement?.contains(x.el)));
+    const message = (near[0] ?? fresh[0])?.t ?? null;
+    const fields = fieldEls().map((el) => {
+      if (!el) return null;
+      // A hint that was there before the send ("The town is fine if…") is not an error.
+      const said = `${el.getAttribute("aria-describedby") ?? ""} ${el.getAttribute("aria-errormessage") ?? ""}`.split(/\s+/).filter(Boolean).map((id) => clean(document.getElementById(id)?.textContent)).filter((t) => t && (msgish(t) || ASK.test(t)) && !base.has(t));
+      return { invalid: el.getAttribute("aria-invalid") === "true" || Boolean(el.matches?.(":invalid")), said: said[0] ?? null, value: el.value ?? "", checked: Boolean(el.checked) };
+    });
+    return { fields, message };
+  }
+
+  if (op === "focus") {
+    const a = document.activeElement;
+    if (!a || a === document.body || a === document.documentElement) return { body: true };
+    const r = a.getBoundingClientRect();
+    const cs = getComputedStyle(a);
+    let hidden = r.width < 1 || r.height < 1 || cs.visibility === "hidden";
+    for (let e = a; e && !hidden; e = e.parentElement) if (parseFloat(getComputedStyle(e).opacity) < 0.05) hidden = true;
+    const inView = r.bottom > 0 && r.top < innerHeight && r.right > 0 && r.left < innerWidth;
+    let obscured = null;
+    if (!hidden && inView) {
+      const x = Math.min(innerWidth - 1, Math.max(0, r.left + r.width / 2));
+      const y = Math.min(innerHeight - 1, Math.max(0, r.top + Math.min(r.height / 2, 10)));
+      const top = document.elementFromPoint(x, y);
+      if (top && top !== a && !a.contains(top) && !top.contains(a) && !top.closest("[data-palate-ignore]")) obscured = describe(top.closest("header, nav, [role=banner], [role=dialog], aside, div") ?? top);
+    }
+    const sr = /sr-only|visually-hidden|skip/i.test(`${a.className} ${a.parentElement?.className ?? ""}`);
+    // A native control hidden on purpose (opacity 0, sr-only, clipped) draws its focus on its label or a
+    // sibling (`input:focus-visible + span`): fine when that shows, lost when nothing does.
+    const clipped = (cs.clip && cs.clip !== "auto") || /inset\(50%|inset\(100%/.test(cs.clipPath) || (r.width <= 2 && r.height <= 2);
+    if (a.matches("input, select, textarea") && (hidden || sr || clipped)) {
+      const by = focusShownOn(a);
+      const br = by?.getBoundingClientRect();
+      const byInView = br ? br.bottom > 0 && br.top < innerHeight && br.right > 0 && br.left < innerWidth : inView;
+      return { sel: selOf(a), what: describe(a), hidden: !by, shownOn: by ? describe(by) : null, inView: byInView, obscured: by ? null : obscured, y: Math.round((br ?? r).top + scrollY) };
+    }
+    return { sel: selOf(a), what: describe(a), hidden: hidden && !sr, inView, obscured, y: Math.round(r.top + scrollY) };
+  }
+
+  return null;
+};