@domandigital/craft 0.19.3 → 0.20.0

package/dist/phone.js

@@ -1,10 +1,23 @@
 // src/phone/index.ts
-import { mkdirSync, writeFileSync } from "fs";
-import { join } from "path";
+import { mkdirSync as mkdirSync2, writeFileSync as writeFileSync2 } from "fs";
+import { join as join2 } from "path";
+
+// src/phone/constants.ts
+var PHONE = {
+  viewport: { width: 375, height: 812 },
+  deviceScaleFactor: 2,
+  isMobile: true,
+  hasTouch: true
+};
+var PHONE_FLOORS = { targetPx: 44, fieldFontPx: 16, textPx: 12 };
+var DEFAULT_MEASURED_DIR = "phone-first/measured";
+var routeFile = (route) => `${route === "/" ? "home" : route.replace(/^\/+|\/+$/g, "").replace(/[^\w.-]+/g, "-")}.json`;
 
 // src/phone/measure-in-page.ts
 function measurePhoneInPage(floors) {
   const out = [];
+  const only = floors.only;
+  const on = (c) => !only || only.includes(c);
   const vw = document.documentElement.clientWidth;
   const shown = (e) => {
     const s = getComputedStyle(e);
@@ -19,7 +32,8 @@ function measurePhoneInPage(floors) {
     const text = (e.textContent ?? "").replace(/\s+/g, " ").trim() || e.getAttribute("aria-label") || e.getAttribute("name") || e.getAttribute("placeholder") || "";
     return `<${e.tagName.toLowerCase()}>${text ? ` "${text.slice(0, 40)}"` : ""}`;
   };
-  if (vw > window.screen.width + 1) {
+  if (!on("scroll")) {
+  } else if (vw > window.screen.width + 1) {
     out.push({ check: "scroll", element: "<meta name=viewport>", detail: `the page lays out at ${vw}px on a ${window.screen.width}px phone: no width=device-width viewport meta` });
   } else if (document.documentElement.scrollWidth > vw + 1) {
     const wide = Array.from(document.body.querySelectorAll("*")).filter((e) => shown(e) && e.getBoundingClientRect().right > vw + 1).filter((e, _, all) => !all.some((o) => o !== e && o.contains(e))).slice(0, 3).map(describe);
@@ -30,7 +44,7 @@ function measurePhoneInPage(floors) {
     const block = e.parentElement?.closest("p, li, dd, td, th, blockquote, figcaption, address");
     return !!block && (block.textContent ?? "").trim().length > (e.textContent ?? "").trim().length;
   };
-  const targets = Array.from(document.querySelectorAll("a[href], button, input:not([type='hidden']), select, textarea, [role='button'], [role='tab'], [role='menuitem'], summary")).filter(shown);
+  const targets = (!on("target") ? [] : Array.from(document.querySelectorAll("a[href], button, input:not([type='hidden']), select, textarea, [role='button'], [role='tab'], [role='menuitem'], summary"))).filter(shown);
   for (const e of targets) {
     const r = e.getBoundingClientRect();
     if (quiet(e) || inline(e) || r.width <= 1 || r.height <= 1) continue;
@@ -41,19 +55,19 @@ function measurePhoneInPage(floors) {
     if (w < floors.targetPx || h < floors.targetPx) out.push({ check: "target", element: describe(e), detail: `${w}x${h}px, under ${floors.targetPx}x${floors.targetPx}` });
   }
   const NOT_TEXT = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "submit", "reset", "button", "image"]);
-  for (const e of Array.from(document.querySelectorAll("input:not([type='hidden']), select, textarea"))) {
+  for (const e of on("field") ? Array.from(document.querySelectorAll("input:not([type='hidden']), select, textarea")) : []) {
     if (!shown(e) || quiet(e) || e.tagName === "INPUT" && NOT_TEXT.has(e.type)) continue;
     const px = parseFloat(getComputedStyle(e).fontSize);
     if (px < floors.fieldFontPx) out.push({ check: "field", element: describe(e), detail: `set at ${px}px, under ${floors.fieldFontPx}px, so Safari on iOS zooms on focus` });
   }
-  for (const e of Array.from(document.body.querySelectorAll("*"))) {
+  for (const e of on("text") ? Array.from(document.body.querySelectorAll("*")) : []) {
     if (!shown(e) || quiet(e) || ["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE"].includes(e.tagName)) continue;
     const own = Array.from(e.childNodes).filter((n) => n.nodeType === 3).map((n) => n.textContent ?? "").join(" ").replace(/\s+/g, " ").trim();
     if (!own) continue;
     const px = parseFloat(getComputedStyle(e).fontSize);
     if (px < floors.textPx) out.push({ check: "text", element: `<${e.tagName.toLowerCase()}> "${own.slice(0, 40)}"`, detail: `${px}px, under ${floors.textPx}px` });
   }
-  for (const e of Array.from(document.querySelectorAll("h1"))) {
+  for (const e of on("title") ? Array.from(document.querySelectorAll("h1")) : []) {
     if (!shown(e) || quiet(e)) continue;
     const s = getComputedStyle(e);
     const clipsX = e.scrollWidth > e.clientWidth + 1 && s.overflowX !== "visible";
@@ -63,6 +77,294 @@ function measurePhoneInPage(floors) {
   return out;
 }
 
+// src/phone/measure-viewport-in-page.ts
+function measureViewportInPage(arg) {
+  const { groups, thresholds: t } = arg;
+  const out = [];
+  const vw = document.documentElement.clientWidth;
+  const vh = document.documentElement.clientHeight;
+  const pct = (n) => `${Math.round(n * 100)}%`;
+  const px = (n) => `${Math.round(n)}px`;
+  const shown = (e) => {
+    const s = getComputedStyle(e);
+    if (s.display === "none" || s.visibility === "hidden" || e.getClientRects().length === 0) return false;
+    return typeof e.checkVisibility === "function" ? e.checkVisibility({ contentVisibilityAuto: true, visibilityProperty: true }) : true;
+  };
+  const hiddenByMarkup = (e) => !!e.closest("[aria-hidden='true'], .sr-only, .visually-hidden, [hidden]");
+  const faded = (e) => {
+    for (let n = e; n && n !== document.documentElement; n = n.parentElement) if (getComputedStyle(n).opacity === "0") return true;
+    return false;
+  };
+  const describe = (e) => {
+    const text = (e.textContent ?? "").replace(/\s+/g, " ").trim() || e.getAttribute("aria-label") || e.getAttribute("name") || e.getAttribute("placeholder") || "";
+    return `<${e.tagName.toLowerCase()}>${text ? ` "${text.slice(0, 40)}"` : ""}`;
+  };
+  const add = (check, element, detail) => {
+    out.push({ check, element, detail });
+  };
+  const clipBoxes = /* @__PURE__ */ new Map();
+  const clipsOf = (e) => {
+    const had = clipBoxes.get(e);
+    if (had) return had;
+    const boxes = [];
+    for (let n = e.parentElement; n && n !== document.documentElement && n !== document.body; n = n.parentElement) {
+      const s = getComputedStyle(n);
+      if (/hidden|clip|auto|scroll/.test(s.overflowX + s.overflowY)) boxes.push(n.getBoundingClientRect());
+    }
+    clipBoxes.set(e, boxes);
+    return boxes;
+  };
+  const hardClipsOf = (e) => {
+    const boxes = [];
+    for (let n = e.parentElement; n && n !== document.documentElement && n !== document.body; n = n.parentElement) {
+      const s = getComputedStyle(n);
+      if (/hidden|clip/.test(s.overflowX) || /hidden|clip/.test(s.overflowY)) boxes.push(n.getBoundingClientRect());
+    }
+    return boxes;
+  };
+  const inLayers = /* @__PURE__ */ new Map();
+  const inLayer = (e) => {
+    const had = inLayers.get(e);
+    if (had !== void 0) return had;
+    const p = getComputedStyle(e).position;
+    const v = p === "fixed" || p === "sticky" || !!e.parentElement && inLayer(e.parentElement);
+    inLayers.set(e, v);
+    return v;
+  };
+  const textBoxes = () => {
+    const boxes = [];
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    const range = document.createRange();
+    const skip = /* @__PURE__ */ new Set(["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "OPTION", "TEXTAREA", "TITLE"]);
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      const owner = n.parentElement;
+      if (!owner || skip.has(owner.tagName) || !(n.textContent ?? "").trim() || !shown(owner) || hiddenByMarkup(owner) || faded(owner)) continue;
+      range.selectNodeContents(n);
+      for (const rect of Array.from(range.getClientRects())) {
+        let { left: l, top: tp, right: r, bottom: b } = rect;
+        for (const c of clipsOf(owner)) {
+          l = Math.max(l, c.left);
+          tp = Math.max(tp, c.top);
+          r = Math.min(r, c.right);
+          b = Math.min(b, c.bottom);
+        }
+        if (r - l >= 1 && b - tp >= 1) boxes.push({ l, t: tp, r, b, owner, node: n });
+      }
+    }
+    return boxes;
+  };
+  const nameOf = (b) => `<${b.owner.tagName.toLowerCase()}> "${(b.node.textContent ?? "").replace(/\s+/g, " ").trim().slice(0, 40)}"`;
+  const layerCover = () => {
+    const painted = (e) => {
+      const s = getComputedStyle(e);
+      const bg = s.backgroundColor;
+      const clear = bg === "rgba(0, 0, 0, 0)" || bg === "transparent";
+      return !clear || s.backgroundImage !== "none" || parseFloat(s.borderTopWidth) > 0 || parseFloat(s.borderBottomWidth) > 0 || s.boxShadow !== "none" || /^(IMG|SVG|VIDEO|CANVAS|IFRAME|BUTTON|INPUT)$/i.test(e.tagName) || Array.from(e.childNodes).some((c) => c.nodeType === 3 && (c.textContent ?? "").trim());
+    };
+    const paintedBoxes = (e, depth) => {
+      if (!shown(e) || getComputedStyle(e).pointerEvents === "none" || faded(e)) return [];
+      if (painted(e)) return [{ e, r: e.getBoundingClientRect() }];
+      return depth > 6 ? [] : Array.from(e.children).flatMap((c) => paintedBoxes(c, depth + 1));
+    };
+    const read = () => {
+      const boxes = Array.from(document.body.querySelectorAll("*")).filter((e) => ["fixed", "sticky"].includes(getComputedStyle(e).position)).flatMap((e) => paintedBoxes(e, 0)).map(({ e, r }) => ({ e, l: Math.max(0, r.left), t: Math.max(0, r.top), r: Math.min(vw, r.right), b: Math.min(vh, r.bottom) })).filter((b) => b.r - b.l > 1 && b.b - b.t > 1);
+      const xs = [...new Set(boxes.flatMap((b) => [b.l, b.r]))].sort((a, b) => a - b);
+      const ys = [...new Set(boxes.flatMap((b) => [b.t, b.b]))].sort((a, b) => a - b);
+      let area = 0;
+      for (let i = 0; i < xs.length - 1; i++) {
+        for (let j = 0; j < ys.length - 1; j++) {
+          if (boxes.some((b) => b.l <= xs[i] && b.r >= xs[i + 1] && b.t <= ys[j] && b.b >= ys[j + 1])) area += (xs[i + 1] - xs[i]) * (ys[j + 1] - ys[j]);
+        }
+      }
+      return { share: area / (vw * vh), names: [...new Set(boxes.map((b) => describe(b.e)))].slice(0, 4) };
+    };
+    const top = read();
+    const home = window.scrollY;
+    window.scrollTo({ top: Math.min(document.documentElement.scrollHeight - vh, Math.round(vh * 1.5)), behavior: "instant" });
+    const moved = read();
+    window.scrollTo({ top: home, behavior: "instant" });
+    return moved.share > top.share ? moved : top;
+  };
+  const imageName = (img) => {
+    const alt = (img.getAttribute("alt") ?? "").trim();
+    const file = (img.currentSrc || img.src).split("?")[0].split("/").pop() ?? "";
+    return `<img> "${(alt || file).slice(0, 40)}"`;
+  };
+  const images = (kinds) => {
+    for (const img of Array.from(document.images)) {
+      const src = img.currentSrc || img.src;
+      if (!img.complete || !img.naturalWidth || !src || /\.svg(\?|$)|^data:image\/svg/i.test(src) || !shown(img) || hiddenByMarkup(img) || faded(img)) continue;
+      const shownPx = img.getBoundingClientRect().width;
+      if (shownPx < t.minImagePx) continue;
+      const ratio = img.naturalWidth / shownPx;
+      if (kinds.includes("oversized") && ratio > t.oversizeRatio) {
+        add("image", `${imageName(img)} oversized`, `the file is ${img.naturalWidth}px wide, shown at ${px(shownPx)} (${ratio.toFixed(1)}x; a 2x phone needs ${px(shownPx * 2)}). Serve a smaller one with srcset and sizes`);
+      }
+      if (kinds.includes("upscaled") && ratio < t.upscaleRatio) {
+        add("image", `${imageName(img)} upscaled`, `the file is ${img.naturalWidth}px wide, stretched to ${px(shownPx)}. Serve one at least that wide`);
+      }
+    }
+  };
+  if (groups.includes("sweep")) {
+    if (arg.metaViewport && vw > window.screen.width + 1) {
+      add("scroll", "<meta name=viewport>", `the page lays out at ${vw}px on a ${window.screen.width}px phone: no width=device-width viewport meta`);
+    } else if (document.documentElement.scrollWidth > vw + 1) {
+      const wide = Array.from(document.body.querySelectorAll("*")).filter((e) => shown(e) && e.getBoundingClientRect().right > vw + 1).filter((e, _, all) => !all.some((o) => o !== e && o.contains(e))).slice(0, 3).map(describe);
+      add("scroll", "<html>", `the page is ${document.documentElement.scrollWidth}px wide at ${vw}px${wide.length ? `; widest: ${wide.join(", ")}` : ""}`);
+    }
+    const boxes = textBoxes().sort((a, b) => a.t - b.t);
+    const seen = /* @__PURE__ */ new Set();
+    for (let i = 0; i < boxes.length && seen.size < 15; i++) {
+      const a = boxes[i];
+      for (let j = i + 1; j < boxes.length && boxes[j].t < a.b; j++) {
+        const b = boxes[j];
+        if (a.node === b.node) continue;
+        const w = Math.min(a.r, b.r) - Math.max(a.l, b.l);
+        const h = Math.min(a.b, b.b) - Math.max(a.t, b.t);
+        if (w < 3 || h < t.overlapShare * Math.min(a.b - a.t, b.b - b.t)) continue;
+        const x = Math.max(a.l, b.l) + w / 2;
+        const y = Math.max(a.t, b.t) + h / 2;
+        const onScreen = x >= 0 && x < vw && y >= 0 && y < vh;
+        if (!onScreen && inLayer(a.owner) !== inLayer(b.owner)) continue;
+        if (onScreen && getComputedStyle(a.owner).pointerEvents !== "none" && getComputedStyle(b.owner).pointerEvents !== "none") {
+          const stack = document.elementsFromPoint(x, y);
+          const at = (o) => stack.findIndex((e) => e === o || o.contains(e));
+          const [ia, ib] = [at(a.owner), at(b.owner)];
+          if (ia < 0 || ib < 0) continue;
+          const lower = ia > ib ? a.owner : b.owner;
+          const covers = (e) => {
+            const s = getComputedStyle(e);
+            const alpha = s.backgroundColor === "transparent" ? 0 : parseFloat(s.backgroundColor.match(/[,/]\s*([\d.]+)%?\)$/)?.[1] ?? "1");
+            return !e.contains(lower) && (alpha >= 0.9 || s.backgroundImage !== "none");
+          };
+          if (stack.slice(0, Math.max(ia, ib)).some(covers)) continue;
+        }
+        const names = [nameOf(a), nameOf(b)].sort();
+        const key = names.join(" / ");
+        if (seen.has(key)) continue;
+        seen.add(key);
+        add("overlap", key, `visible text overlaps other text by ${px(w)} x ${px(h)}`);
+      }
+    }
+    for (const e of Array.from(document.querySelectorAll("h1, [role='heading'][aria-level='1']"))) {
+      if (!shown(e) || hiddenByMarkup(e)) continue;
+      const s = getComputedStyle(e);
+      const clipsX = e.scrollWidth > e.clientWidth + 1 && s.overflowX !== "visible";
+      const clipsY = e.scrollHeight > e.clientHeight + 1 && s.overflowY !== "visible";
+      const range = document.createRange();
+      range.selectNodeContents(e);
+      const r = range.getBoundingClientRect();
+      const cutByParent = r.width > 0 && hardClipsOf(e).some((c) => r.right > c.right + 1 || r.left < c.left - 1 || r.bottom > c.bottom + 1);
+      if (clipsX || clipsY || cutByParent) add("title", describe(e), "the page title is cut off");
+    }
+  }
+  if (groups.includes("optimise")) {
+    if (arg.mainAction) {
+      const matches = Array.from(document.querySelectorAll(arg.mainAction)).filter((e) => shown(e) && !hiddenByMarkup(e));
+      if (matches.length === 0) {
+        add("action", arg.mainAction, "no visible element matches the main action selector");
+      } else {
+        const pinned = (e) => ["fixed", "sticky"].includes(getComputedStyle(e).position) || !!e.parentElement && e.parentElement !== document.body && pinned(e.parentElement);
+        const fits = matches.some((e) => {
+          const r = e.getBoundingClientRect();
+          return pinned(e) || r.top >= 0 && r.bottom <= vh + 1;
+        });
+        if (!fits) {
+          const r = matches[0].getBoundingClientRect();
+          add("action", describe(matches[0]), `the main action starts ${px(r.top)} down a ${px(vh)} screen: it is not on the first screen or pinned`);
+        }
+      }
+    }
+    const cover = layerCover();
+    if (cover.share > t.maxLayerShare) add("layers", "fixed and sticky layers", `together cover ${pct(cover.share)} of a ${px(vh)} screen, over the ${pct(t.maxLayerShare)} allowed: ${cover.names.join(", ")}`);
+    images(["oversized", "upscaled"]);
+    const clean = (s) => s.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/[_\-.[\]]+/g, " ").toLowerCase();
+    const PHONE2 = /\b(phone|tel|telephone|mobile)\b/;
+    const EMAIL = /\be ?mail\b/;
+    const NUMBER = /\b(otp|one time code|verification code|security code|quantity|qty|age|cvc|cvv|pin|card number|cc number|number of|amount)\b/;
+    const PERSONAL = /\b(name|first name|last name|given|family|surname|email|e mail|phone|tel|telephone|mobile|address|street|city|town|postcode|post code|zip|country|county|company|organisation|organization|username|user name|password|card|birth|dob)\b/;
+    const NOT_TEXT = /* @__PURE__ */ new Set(["hidden", "checkbox", "radio", "range", "color", "file", "submit", "reset", "button", "image", "date", "time", "datetime-local", "month", "week"]);
+    for (const e of Array.from(document.querySelectorAll("input, textarea"))) {
+      const field = e;
+      if (!shown(e) || hiddenByMarkup(e) || NOT_TEXT.has(field.type) || field.type === "search" || e.closest("[role='search']")) continue;
+      const label = Array.from(field.labels ?? []).map((l) => l.textContent ?? "").join(" ");
+      const named = e.getAttribute("aria-label") ?? "";
+      const signals = clean([e.getAttribute("name"), e.id, named, e.getAttribute("placeholder"), e.getAttribute("autocomplete"), label].filter(Boolean).join(" "));
+      const inputmode = (e.getAttribute("inputmode") ?? "").toLowerCase();
+      const type = e.tagName === "TEXTAREA" ? "textarea" : field.type;
+      const kinds = [];
+      if (PHONE2.test(signals)) kinds.push("phone");
+      if (EMAIL.test(signals)) kinds.push("email");
+      if (NUMBER.test(signals)) kinds.push("number");
+      const who = `<${e.tagName.toLowerCase()}> "${(label.replace(/\s+/g, " ").trim() || named || e.getAttribute("name") || e.id || e.getAttribute("placeholder") || type).slice(0, 40)}"`;
+      if (e.tagName === "INPUT" && kinds.length === 1) {
+        const [kind] = kinds;
+        const good = kind === "phone" ? type === "tel" || inputmode === "tel" : kind === "email" ? type === "email" || inputmode === "email" : type === "number" || ["numeric", "decimal", "tel"].includes(inputmode);
+        if (!good) {
+          const use = kind === "phone" ? 'type="tel"' : kind === "email" ? 'type="email"' : 'inputmode="numeric" (or "decimal")';
+          add("input", who, `looks like ${kind === "number" ? "a number" : kind === "email" ? "an email" : "a phone"} field but is type="${type}"${inputmode ? ` inputmode="${inputmode}"` : ""}, so the phone shows the wrong keyboard. Use ${use}`);
+        }
+      }
+      const personal = e.tagName === "INPUT" && (["email", "tel", "password"].includes(type) || PERSONAL.test(signals));
+      const auto = (e.getAttribute("autocomplete") ?? "").trim().toLowerCase();
+      if (personal && (auto === "" || auto === "off")) {
+        add("autocomplete", who, `${auto ? 'autocomplete="off" stops the phone filling it in' : "the autocomplete attribute is missing, so the phone cannot fill it in"}. Name what it holds, as in autocomplete="email"`);
+      }
+    }
+    const UK = /(?<![\w+])(?:\+44[\s-]?(?:\(0\))?|0)\d(?:[\s-]?\d){8,9}(?!\d)/g;
+    const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT);
+    const dials = /* @__PURE__ */ new Set();
+    for (let n = walker.nextNode(); n; n = walker.nextNode()) {
+      const owner = n.parentElement;
+      if (!owner || ["SCRIPT", "STYLE", "NOSCRIPT", "TEMPLATE", "TEXTAREA"].includes(owner.tagName) || !shown(owner) || hiddenByMarkup(owner) || owner.closest("a[href^='tel:' i]")) continue;
+      for (const m of (n.textContent ?? "").matchAll(UK)) {
+        const digits = m[0].replace(/\D/g, "");
+        if (!(digits.length === 11 && digits.startsWith("0")) && !(digits.length === 12 && digits.startsWith("44")) && !(digits.length === 13 && digits.startsWith("440"))) continue;
+        const shownAs = m[0].replace(/\s+/g, " ").trim();
+        if (dials.has(shownAs)) continue;
+        dials.add(shownAs);
+        add("tel", `<${owner.tagName.toLowerCase()}> "${shownAs}"`, `a phone number that is not a tel: link. Wrap it in <a href="tel:${digits.startsWith("0") ? `+44${digits.slice(1)}` : `+${digits.replace(/^440/, "44")}`}">`);
+      }
+    }
+  }
+  if (groups.includes("landscape")) {
+    const cover = layerCover();
+    if (cover.share > t.landscapeMaxLayerShare) {
+      add("landscape", "header and fixed layers", `together cover ${pct(cover.share)} of a ${px(vh)} landscape screen, over the ${pct(t.landscapeMaxLayerShare)} allowed: ${cover.names.join(", ")}`);
+    }
+  }
+  if (groups.includes("wide")) {
+    images(["upscaled"]);
+    const paragraphs = Array.from(document.querySelectorAll("p, li:not(:has(p)), dd, blockquote:not(:has(p))"));
+    for (const e of paragraphs) {
+      if (!shown(e) || hiddenByMarkup(e) || faded(e) || e.closest("nav, header, footer, aside, pre, table, [role='navigation'], [role='menu'], [role='banner'], [role='contentinfo'], [role='dialog'], [role='alertdialog']") || inLayer(e)) continue;
+      const range = document.createRange();
+      range.selectNodeContents(e);
+      const lines = /* @__PURE__ */ new Map();
+      for (const r of Array.from(range.getClientRects())) {
+        if (r.width < 1 || r.height < 1) continue;
+        const key = Math.round(r.top / 4);
+        const had = lines.get(key);
+        if (had) {
+          had.l = Math.min(had.l, r.left);
+          had.r = Math.max(had.r, r.right);
+        } else lines.set(key, { l: r.left, r: r.right });
+      }
+      const longest = Math.max(0, ...Array.from(lines.values()).map((l) => l.r - l.l));
+      if (longest < 1) continue;
+      const probe = document.createElement("span");
+      probe.style.cssText = "position:absolute;visibility:hidden;display:inline-block;width:1ch;height:1px;font:inherit;letter-spacing:normal";
+      e.appendChild(probe);
+      const ch = probe.getBoundingClientRect().width;
+      probe.remove();
+      if (ch <= 0) continue;
+      const chars = longest / ch;
+      if (chars > t.maxLineCh) add("linelength", describe(e), `lines run ${Math.round(chars)} characters at ${vw}px, over the ${t.maxLineCh} allowed. Cap the measure with max-width in ch`);
+    }
+  }
+  return out;
+}
+
 // src/phone/judge.ts
 var EMPTY_BASELINE = { static: [], measured: [] };
 var MEDIA = /@(?:custom-)?media\b([^{;]*)/g;
@@ -183,7 +485,16 @@ var LABEL = {
   target: "small target",
   field: "small field",
   text: "small text",
-  title: "title cut off"
+  title: "title cut off",
+  overlap: "text overlaps text",
+  action: "main action out of reach",
+  layers: "fixed layers cover too much",
+  landscape: "landscape screen eaten by fixed layers",
+  image: "image not sized for its place",
+  input: "wrong keyboard",
+  autocomplete: "field the phone cannot fill in",
+  tel: "phone number is not a link",
+  linelength: "line too long"
 };
 function writeBaseline(findings, routes, note) {
   const byFile = tally(findings, (f) => f.file);
@@ -197,16 +508,204 @@ function writeBaseline(findings, routes, note) {
   };
 }
 
-// src/phone/index.ts
-var PHONE = {
-  viewport: { width: 375, height: 812 },
-  deviceScaleFactor: 2,
-  isMobile: true,
-  hasTouch: true
+// src/phone/viewports.ts
+var BANDS = [
+  { band: "phone", from: 320, to: 479 },
+  { band: "large-phone", from: 480, to: 767 },
+  { band: "tablet", from: 768, to: 1023 },
+  { band: "laptop", from: 1024, to: 1439 },
+  { band: "wide", from: 1440, to: null }
+];
+var bandOf = (width) => [...BANDS].reverse().find((b) => width >= b.from)?.band ?? "phone";
+var LADDER = [
+  { name: "320", width: 320, height: 568, phone: true },
+  { name: "375", width: 375, height: 812, phone: true },
+  { name: "390", width: 390, height: 844, phone: true },
+  { name: "430", width: 430, height: 932, phone: true },
+  { name: "844x390", width: 844, height: 390, phone: true, landscape: true },
+  { name: "768", width: 768, height: 1024, phone: false },
+  { name: "1024", width: 1024, height: 768, phone: false },
+  { name: "1280", width: 1280, height: 800, phone: false },
+  { name: "1440", width: 1440, height: 900, phone: false },
+  { name: "1920", width: 1920, height: 1080, phone: false }
+];
+var SHORT_PHONE = { name: "375x667", width: 375, height: 667, phone: true };
+var WIDE_WIDTHS = [1440, 1920];
+var DEFAULT_SWEEP = { from: 320, to: 1920, step: 16, wideStep: 32, wideFrom: 1024, height: 800 };
+function sweepWidths(sweep = DEFAULT_SWEEP) {
+  const out = [];
+  for (let w = sweep.from; w <= sweep.to; w += w < sweep.wideFrom ? sweep.step : sweep.wideStep) out.push(w);
+  if (out.at(-1) !== sweep.to) out.push(sweep.to);
+  return out;
+}
+var DEFAULT_THRESHOLDS = {
+  maxLayerShare: 0.25,
+  landscapeMaxLayerShare: 0.5,
+  oversizeRatio: 2.5,
+  upscaleRatio: 1,
+  maxLineCh: 80,
+  overlapShare: 0.4,
+  minImagePx: 32
 };
-var PHONE_FLOORS = { targetPx: 44, fieldFontPx: 16, textPx: 12 };
-var DEFAULT_MEASURED_DIR = "phone-first/measured";
-var routeFile = (route) => `${route === "/" ? "home" : route.replace(/^\/+|\/+$/g, "").replace(/[^\w.-]+/g, "-")}.json`;
+var mainActionFor = (config, route) => typeof config === "string" ? config : config ? config[route] ?? config["*"] : void 0;
+function formatWidths(failing, tested) {
+  const plain = tested.filter((n) => /^\d+$/.test(n)).sort((a, b) => Number(a) - Number(b));
+  const rank = new Map(plain.map((name, i) => [name, i]));
+  const names = [...new Set(failing)];
+  const runs = [];
+  for (const name of names.filter((n) => rank.has(n)).sort((a, b) => rank.get(a) - rank.get(b))) {
+    const last = runs.at(-1);
+    if (last && rank.get(name) === rank.get(last.at(-1)) + 1) last.push(name);
+    else runs.push([name]);
+  }
+  const out = runs.map((r) => r.length > 1 ? `${r[0]}-${r.at(-1)}` : r[0]);
+  return [...out, ...names.filter((n) => !rank.has(n))].join(", ");
+}
+var keyOf = (f) => `${f.check}\0${f.element.replace(/("[^]*)$/, (t) => t.replace(/\d+/g, "#"))}`;
+function mergeViewportFindings(perViewport, tested) {
+  const merged = /* @__PURE__ */ new Map();
+  for (const { viewport, findings } of perViewport) {
+    const counts = /* @__PURE__ */ new Map();
+    for (const f of findings) {
+      const k = keyOf(f);
+      const had = counts.get(k);
+      if (had) had.n++;
+      else counts.set(k, { first: f, n: 1 });
+    }
+    for (const [k, { first, n }] of counts) {
+      const had = merged.get(k);
+      if (had) {
+        had.at.push(viewport);
+        had.most = Math.max(had.most, n);
+      } else merged.set(k, { first, at: [viewport], most: n });
+    }
+  }
+  const out = [];
+  for (const { first, at, most } of merged.values()) {
+    for (let i = 0; i < most; i++) out.push({ ...first, detail: `${first.detail} (at ${formatWidths(at, tested)})` });
+  }
+  return out;
+}
+
+// src/phone/run.ts
+import { mkdirSync, writeFileSync } from "fs";
+import { join } from "path";
+function plan(options) {
+  const ladder = options.ladder ?? LADDER;
+  const scope = options.scope ?? "all";
+  const phoneSide = scope !== "wide";
+  const wideSide = scope !== "phone";
+  const stops = [];
+  const widthsDone = /* @__PURE__ */ new Set();
+  for (const v of ladder.filter((x) => x.phone && !x.landscape)) {
+    if (!phoneSide) continue;
+    stops.push({ name: v.name, width: v.width, height: v.height, ladder: true, groups: ["sweep"], touch: true });
+    widthsDone.add(v.width);
+  }
+  if (phoneSide) {
+    stops.push({ name: SHORT_PHONE.name, width: SHORT_PHONE.width, height: SHORT_PHONE.height, ladder: true, groups: ["optimise"], touch: false });
+    for (const v of ladder.filter((x) => x.landscape)) stops.push({ name: v.name, width: v.width, height: v.height, ladder: true, groups: ["sweep", "landscape"], touch: true });
+  }
+  const rest = [];
+  for (const v of ladder.filter((x) => !x.phone)) {
+    if (!wideSide || widthsDone.has(v.width)) continue;
+    rest.push({ name: v.name, width: v.width, height: v.height, ladder: true, groups: v.width >= 1440 ? ["sweep", "wide"] : ["sweep"], touch: false });
+    widthsDone.add(v.width);
+  }
+  if (options.sweep !== false) {
+    const sweep = { ...DEFAULT_SWEEP, ...options.sweep ?? {} };
+    for (const w of sweepWidths(sweep)) {
+      if (widthsDone.has(w) || (w < 768 ? !phoneSide : !wideSide)) continue;
+      rest.push({ name: String(w), width: w, height: sweep.height, ladder: false, groups: ["sweep"], touch: false });
+      widthsDone.add(w);
+    }
+  }
+  return [...stops, ...rest.sort((a, b) => a.width - b.width)];
+}
+var settle = async (page, ms) => void await page.evaluate((wait) => new Promise((done) => requestAnimationFrame(() => requestAnimationFrame(() => setTimeout(done, wait)))), ms);
+async function loadEverything(page) {
+  await page.evaluate(async () => {
+    const h = document.documentElement.scrollHeight;
+    for (let y = 0; y < h; y += Math.max(300, window.innerHeight - 100)) {
+      window.scrollTo({ top: y, behavior: "instant" });
+      await new Promise((r) => setTimeout(r, 40));
+    }
+    await Promise.all(Array.from(document.images).map((i) => i.complete ? null : new Promise((r) => {
+      i.onload = i.onerror = () => r(null);
+      setTimeout(r, 3e3);
+    })));
+    await document.fonts?.ready;
+    window.scrollTo({ top: 0, behavior: "instant" });
+  }, void 0);
+}
+async function collect(page, options) {
+  const thresholds = { ...DEFAULT_THRESHOLDS, ...options.thresholds ?? {} };
+  const floors = { ...PHONE_FLOORS, ...options.floors ?? {} };
+  const mainAction = mainActionFor(options.mainAction, options.route);
+  const perViewport = [];
+  const tested = [];
+  for (const stop of plan(options)) {
+    await page.setViewportSize({ width: stop.width, height: stop.height });
+    await settle(page, stop.ladder ? 150 : 60);
+    if (stop.ladder) await loadEverything(page);
+    if (stop.ladder) await options.onViewport?.(page, { name: stop.name, width: stop.width, height: stop.height, phone: stop.touch || stop.width < 768, landscape: stop.groups.includes("landscape") }, options.route);
+    const findings = [];
+    if (stop.ladder) findings.push(...await page.evaluate(measurePhoneInPage, { ...floors, only: stop.touch ? ["target", "field", "text"] : ["text"] }));
+    findings.push(...await page.evaluate(measureViewportInPage, { groups: stop.groups, thresholds, mainAction, metaViewport: stop.width < 768 }));
+    perViewport.push({ viewport: stop.name, findings });
+    tested.push(stop.name);
+  }
+  return { perViewport, tested };
+}
+function finish(route, collected, out) {
+  const result = { route, viewports: collected.tested, findings: mergeViewportFindings(collected.perViewport, collected.tested), perViewport: collected.perViewport };
+  if (out !== false) writeMeasured(result, out ?? DEFAULT_MEASURED_DIR);
+  return result;
+}
+function writeMeasured(result, dir) {
+  mkdirSync(dir, { recursive: true });
+  const { route, viewport, viewports, findings } = result;
+  writeFileSync(join(dir, routeFile(route)), `${JSON.stringify({ route, ...viewport ? { viewport } : {}, ...viewports ? { viewports } : {}, findings }, null, 1)}
+`);
+}
+async function measureViewports(page, options) {
+  if (!options.route.startsWith("/")) throw new Error(`measureViewports: route "${options.route}" should start with /`);
+  await page.evaluate(() => document.fonts?.ready.then(() => void 0), void 0);
+  return finish(options.route, await collect(page, options), options.out);
+}
+async function measureSite(browser, options) {
+  const result = { routes: [], errors: [] };
+  for (const route of options.routes) {
+    const collected = [];
+    let failed = null;
+    for (const [scope, context] of [
+      ["phone", PHONE],
+      ["wide", { viewport: { width: 1024, height: 768 }, deviceScaleFactor: 1 }]
+    ]) {
+      const ctx = await browser.newContext({ ...context });
+      try {
+        const page = await ctx.newPage();
+        const resp = await page.goto(options.base + route).catch((error) => ({ ok: () => false, status: () => error.message }));
+        if (!resp || !resp.ok()) {
+          failed = `HTTP ${resp?.status()}`;
+          break;
+        }
+        await page.evaluate(() => document.fonts?.ready.then(() => void 0), void 0);
+        collected.push(await collect(page, { ...options, route, scope }));
+      } finally {
+        await ctx.close();
+      }
+    }
+    if (failed) {
+      result.errors.push({ route, error: failed });
+      continue;
+    }
+    result.routes.push(finish(route, { perViewport: collected.flatMap((c) => c.perViewport), tested: collected.flatMap((c) => c.tested) }, options.out));
+  }
+  return result;
+}
+
+// src/phone/index.ts
 async function measurePhone(page, options) {
   if (!options.route.startsWith("/")) throw new Error(`measurePhone: route "${options.route}" should start with /`);
   await page.evaluate(() => document.fonts?.ready.then(() => void 0), void 0);
@@ -214,24 +713,38 @@ async function measurePhone(page, options) {
   const viewport = page.viewportSize?.() ?? void 0;
   const result = { route: options.route, ...viewport ? { viewport } : {}, findings };
   const dir = options.out ?? DEFAULT_MEASURED_DIR;
-  mkdirSync(dir, { recursive: true });
-  writeFileSync(join(dir, routeFile(options.route)), `${JSON.stringify(result, null, 1)}
+  mkdirSync2(dir, { recursive: true });
+  writeFileSync2(join2(dir, routeFile(options.route)), `${JSON.stringify(result, null, 1)}
 `);
   return result;
 }
 export {
+  BANDS,
   DEFAULT_MEASURED_DIR,
+  DEFAULT_SWEEP,
+  DEFAULT_THRESHOLDS,
   EMPTY_BASELINE,
+  LADDER,
   PHONE,
   PHONE_FLOORS,
+  SHORT_PHONE,
+  WIDE_WIDTHS,
+  bandOf,
   checkExceptions,
+  formatWidths,
   judgeMeasured,
   judgeStatic,
+  mainActionFor,
   measurePhone,
   measurePhoneInPage,
+  measureSite,
+  measureViewportInPage,
+  measureViewports,
+  mergeViewportFindings,
   normaliseElement,
   reasonOf,
   routeFile,
   scanPhoneFirst,
+  sweepWidths,
   writeBaseline
 };