@domandigital/craft 0.19.3 → 0.20.1

package/dist/viewports-cli-C4VXMPKK.js

@@ -0,0 +1,683 @@
+import {
+  EMPTY_BASELINE,
+  judgeMeasured,
+  writeBaseline
+} from "./chunk-IJUZ7RV4.js";
+import {
+  loadPlaywright
+} from "./chunk-YOZLPNJS.js";
+import "./chunk-JYNXGCYZ.js";
+import {
+  toJson
+} from "./chunk-QIEDBL4J.js";
+import "./chunk-JGWOA4LI.js";
+import "./chunk-7DQDF3VL.js";
+import "./chunk-QYBAVU3P.js";
+
+// src/phone/viewports-cli.ts
+import { existsSync, mkdirSync as mkdirSync2, readFileSync, writeFileSync as writeFileSync2 } from "fs";
+import { join as join2, resolve } 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/run.ts
+import { mkdirSync, writeFileSync } from "fs";
+import { join } from "path";
+
+// 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);
+    return s.display !== "none" && s.visibility !== "hidden" && e.getClientRects().length > 0;
+  };
+  const offPage = (e) => {
+    const r = e.getBoundingClientRect();
+    return r.right <= 0 || r.bottom + window.scrollY <= 0 || r.left >= vw;
+  };
+  const quiet = (e) => !!e.closest("[aria-hidden='true'], .sr-only, .visually-hidden, [hidden]") || offPage(e);
+  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)}"` : ""}`;
+  };
+  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);
+    out.push({ check: "scroll", element: "<html>", detail: `the page is ${document.documentElement.scrollWidth}px wide at ${vw}px${wide.length ? `; widest: ${wide.join(", ")}` : ""}` });
+  }
+  const inline = (e) => {
+    if (e.tagName !== "A" || getComputedStyle(e).display !== "inline") return false;
+    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 = (!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;
+    const labels = "labels" in e && e.labels ? Array.from(e.labels).filter(shown) : [];
+    const boxes = [r, ...labels.map((l) => l.getBoundingClientRect())];
+    const w = Math.round(Math.max(...boxes.map((b) => b.width)));
+    const h = Math.round(Math.max(...boxes.map((b) => b.height)));
+    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 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 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 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";
+    const clipsY = e.scrollHeight > e.clientHeight + 1 && s.overflowY !== "visible";
+    if (clipsX || clipsY) out.push({ check: "title", element: describe(e), detail: "the page title is cut off" });
+  }
+  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/viewports.ts
+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 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 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
+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 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/viewports-cli.ts
+var USAGE = "usage: craft viewports [--url <base>] [--route <path>]... [--config viewports.json] [--out <dir>] [--captures <dir>] [--baseline <file>] [--update-baseline] [--no-sweep] [--json]";
+function parse(args) {
+  const flags = { routes: [], update: false, sweep: true, json: false };
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i];
+    if (a === "--update-baseline") flags.update = true;
+    else if (a === "--no-sweep") flags.sweep = false;
+    else if (a === "--json") flags.json = true;
+    else if (["--config", "--url", "--route", "--routes", "--out", "--captures", "--baseline"].includes(a)) {
+      const v = args[++i];
+      if (!v || v.startsWith("--")) return `${a} needs a value`;
+      if (a === "--route") flags.routes.push(v);
+      else if (a === "--routes") flags.routes.push(...v.split(",").filter(Boolean));
+      else flags[a.slice(2)] = v;
+    } else return `unknown argument ${a}`;
+  }
+  return flags;
+}
+function loadConfig(path, cwd) {
+  const file = resolve(cwd, path ?? "viewports.json");
+  if (!existsSync(file)) {
+    if (path) throw new Error(`no ${path}`);
+    return {};
+  }
+  return JSON.parse(readFileSync(file, "utf8"));
+}
+function loadBaseline(path) {
+  if (!existsSync(path)) return EMPTY_BASELINE;
+  const b = JSON.parse(readFileSync(path, "utf8"));
+  return { ...b.note ? { note: b.note } : {}, static: b.static ?? [], measured: b.measured ?? [] };
+}
+async function runViewports(args, io) {
+  const flags = parse(args);
+  if (typeof flags === "string") {
+    io.err(`craft viewports: ${flags}
+${USAGE}`);
+    return 2;
+  }
+  try {
+    const config = loadConfig(flags.config, io.cwd);
+    const base = (flags.url ?? config.url)?.replace(/\/$/, "");
+    const routes = flags.routes.length ? flags.routes : config.routes ?? ["/"];
+    if (!base) throw new Error(`no site to open. Pass --url <base>, or set "url" in viewports.json.
+${USAGE}`);
+    for (const r of routes) if (!r.startsWith("/")) throw new Error(`route "${r}" should start with /`);
+    const out = resolve(io.cwd, flags.out ?? config.out ?? DEFAULT_MEASURED_DIR);
+    const baselinePath = resolve(io.cwd, flags.baseline ?? config.baseline ?? "phone-first.baseline.json");
+    const captures = flags.captures ? resolve(io.cwd, flags.captures) : void 0;
+    if (captures) mkdirSync2(captures, { recursive: true });
+    const pw = await loadPlaywright();
+    const executablePath = process.env.CRAFT_CHROMIUM || void 0;
+    const browser = await pw.chromium.launch({ headless: true, ...executablePath ? { executablePath } : {} });
+    let site;
+    try {
+      site = await measureSite(browser, {
+        base,
+        routes,
+        out,
+        ...config.mainAction ? { mainAction: config.mainAction } : {},
+        ...config.thresholds ? { thresholds: config.thresholds } : {},
+        ...config.floors ? { floors: config.floors } : {},
+        sweep: flags.sweep ? config.sweep : false,
+        ...captures ? {
+          onViewport: async (page, viewport, route) => {
+            await page.screenshot({ path: join2(captures, `${routeFile(route).replace(/\.json$/, "")}-${viewport.name}.png`), fullPage: true });
+          }
+        } : {}
+      });
+    } finally {
+      await browser.close();
+    }
+    const baseline = loadBaseline(baselinePath);
+    const measuredRoutes = new Set(site.routes.map((r) => r.route));
+    if (flags.update) {
+      const next = writeBaseline([], site.routes, baseline.note);
+      next.static = baseline.static;
+      next.measured = [...baseline.measured.filter((m) => !measuredRoutes.has(m.route)), ...next.measured].sort((a, b) => a.route.localeCompare(b.route) || a.check.localeCompare(b.check) || a.element.localeCompare(b.element));
+      writeFileSync2(baselinePath, `${JSON.stringify(next, null, 2)}
+`);
+      io.out(`craft viewports: wrote ${flags.baseline ?? config.baseline ?? "phone-first.baseline.json"} (${next.measured.reduce((n, m) => n + m.count, 0)} measured)`);
+      return site.errors.length ? 1 : 0;
+    }
+    const judged = judgeMeasured(site.routes, { ...baseline, measured: baseline.measured.filter((m) => measuredRoutes.has(m.route)) });
+    const failed = site.errors.length + judged.fresh.length + judged.stale.length > 0;
+    if (flags.json) {
+      io.out(toJson({ pass: !failed, routes: site.routes.map((r) => ({ route: r.route, viewports: r.viewports, findings: r.findings.length })), errors: site.errors, measured: judged }));
+      return failed ? 1 : 0;
+    }
+    const section = (title, lines) => lines.length ? `
+${title}
+${lines.map((l) => `  ${l}`).join("\n")}` : "";
+    const viewports = site.routes[0]?.viewports ?? [];
+    const summary = `${site.routes.length} route${site.routes.length === 1 ? "" : "s"} at ${viewports.length} viewports${judged.known ? `, ${judged.known} known breach${judged.known === 1 ? "" : "es"} in the baseline` : ""}`;
+    if (!failed) {
+      io.out(`craft viewports: pass. ${summary}.`);
+      return 0;
+    }
+    io.err(
+      [
+        `craft viewports: fail. ${summary}.`,
+        section("Did not answer (not measured, so not passed):", site.errors.map((e) => `${e.route}: ${e.error}`)),
+        section("Measured across the viewports, phone first:", judged.fresh),
+        section("The baseline claims more than is there (good: lower it, so the fix stays fixed):", judged.stale)
+      ].join("")
+    );
+    return 1;
+  } catch (error) {
+    io.err(`craft viewports: ${error.message}`);
+    return 2;
+  }
+}
+export {
+  runViewports
+};