@domandigital/craft 0.21.0 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @domandigital/craft
 
+## 0.22.0
+
+### Minor Changes
+
+- 3902169: The every-viewport measure counts phone screens to the footer (DOM-1052, part of DOM-772): page height at 375 x 667 over 667, with lazy images loaded. `screens` sets a length budget per route, route pattern or prefix (`{ "/": 6.5, "/services/*": 6, "/areas/[town]": 5, "*": 9 }`, the most specific wins), on `measureViewports`, `measureRoute`, `measureSite` and `viewports.json`. A route over its budget fails a new `screens` check ("page too long for a phone"), baselined like the others; with no budget the count is only reported. `ViewportsResult.screens` and the measured file carry the count, `craft viewports` and `craft phone-first --measured` print it for every route, and `screenBudgetFor`, `checkScreenBudgets` and `formatScreens` are exported. The Bellerose home page ran 12.7 phone screens against a target of 6.5.
+
 ## 0.21.0
 
 ### Minor Changes

package/README.md

@@ -371,6 +371,13 @@ the one loaded page in place:
   `tel:` link.
 - **On a landscape phone (844 x 390):** header and fixed layers leave at least
   half the height.
+- **Page length (phone screens):** page height at 375 x 667 over 667, to the
+  footer (lazy images loaded). A phone page has a length budget (the Bellerose
+  home page ran 12.7 screens against a target of 6.5). Set one per route or
+  route pattern with `screens`; a route over its budget fails the `screens`
+  check, and with no budget the count is only reported. Keys are a route
+  (`/`), a pattern (`/areas/[town]`), a prefix (`/services/*`, the route and
+  everything under it) or `*`; the most specific wins.
 - **At 1440 and 1920:** body lines are at most 80 characters (width over the
   `ch` of the element's own font) and no image is stretched past its file.
 
@@ -384,10 +391,16 @@ test.use(PHONE);
 test(`every viewport: ${route}`, async ({ page }) => {
   await page.goto(route);
   // Resizes this page in place; writes phone-first/measured/<route>.json.
-  await measureViewports(page, { route, mainAction: ".hero a" });
+  await measureViewports(page, { route, mainAction: ".hero a", screens: { "/": 6.5, "/services/*": 6 } });
 });
 ```
 
+`result.screens` holds the count, and it is written to the measured file;
+`craft viewports` and `craft phone-first --measured` print it for every route
+(`phone screens to the footer: / 5.8 of 6.5`). In `viewports.json` the budget is
+`"screens": { "/": 6.5, "/services/*": 6 }`; in create-site's
+`site.programme.json` it is `measure.screens`.
+
 `measureViewports` works on the page the suite opened and signed in, so a
 portal keeps its fixtures. `measureRoute(open, { route, mainAction })` does
 both halves for such a page: `open("phone")` and `open("wide")` return the

package/dist/{chunk-FNB3NP57.js → chunk-6PZG4MJS.js}

@@ -3,7 +3,7 @@ import {
 } from "./chunk-OQXTQQAU.js";
 import {
   parseFlags
-} from "./chunk-4WAIOZ4W.js";
+} from "./chunk-OVWVKMPS.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{chunk-4WAIOZ4W.js → chunk-OVWVKMPS.js}

@@ -633,7 +633,7 @@ async function briefFor(flags, cwd) {
     if (typeof brief === "string" && brief.trim()) return brief;
   } else if (flags.direction) throw new Error(`no such file: ${flags.direction}`);
   if (flags.null) {
-    const { loadNull } = await import("./cli-PBCU7Z64.js");
+    const { loadNull } = await import("./cli-SZ4SZLUN.js");
     return loadNull(flags.null, cwd).brief;
   }
   return void 0;
@@ -659,37 +659,37 @@ async function compareWithCompetitor(flags, io) {
 function run(argv, io) {
   const [command, ...rest] = argv;
   if (command === "direction") {
-    return import("./cli-RHDNHL4U.js").then((m) => m.runDirection(rest, io));
+    return import("./cli-R2HBESHI.js").then((m) => m.runDirection(rest, io));
   }
   if (command === "report" || command === "retrofit") {
-    return import("./cli-YSGPGQ7R.js").then((m) => m.runReport(command, rest, io));
+    return import("./cli-T7A3BU5J.js").then((m) => m.runReport(command, rest, io));
   }
   if (command === "register") {
     return import("./cli-7QL26YPR.js").then((m) => m.runRegister(rest, io));
   }
   if (command === "estate") {
-    return import("./cli-5QI6NIZN.js").then((m) => m.runEstate(rest, io));
+    return import("./cli-WZA5IXSR.js").then((m) => m.runEstate(rest, io));
   }
   if (command === "null") {
-    return import("./cli-PBCU7Z64.js").then((m) => m.runNull(rest, io));
+    return import("./cli-SZ4SZLUN.js").then((m) => m.runNull(rest, io));
   }
   if (command === "calibrate") {
-    return import("./cli-5VHX5EJF.js").then((m) => m.runCalibrate(rest, io));
+    return import("./cli-AM4FLXGM.js").then((m) => m.runCalibrate(rest, io));
   }
   if (command === "tells" && rest[0] === "harvest") {
-    return import("./cli-PBCU7Z64.js").then((m) => m.runHarvest(rest, io)).catch((error) => {
+    return import("./cli-SZ4SZLUN.js").then((m) => m.runHarvest(rest, io)).catch((error) => {
       io.err(`craft: ${error.message}`);
       return 2;
     });
   }
   if (command === "phone-first") {
-    return import("./cli-EYHRJJAX.js").then((m) => m.runPhoneFirst(rest, io));
+    return import("./cli-YNIJOEJK.js").then((m) => m.runPhoneFirst(rest, io));
   }
   if (command === "viewports") {
-    return import("./viewports-cli-XYYX4SKV.js").then((m) => m.runViewports(rest, io));
+    return import("./viewports-cli-F7KJIVZL.js").then((m) => m.runViewports(rest, io));
   }
   if (command === "snapshot" || command === "audit") {
-    return import("./cli-XAWJWK7I.js").then((m) => m.runAudit(command, rest, io));
+    return import("./cli-7DL4BKA7.js").then((m) => m.runAudit(command, rest, io));
   }
   if (!command || command === "help" || command === "--help" || command === "-h") {
     io.out(HELP);

package/dist/{chunk-STWH5EYU.js → chunk-RBQCGDQQ.js}

@@ -7,10 +7,10 @@ import {
 } from "./chunk-G47ZCBD5.js";
 import {
   loadNull
-} from "./chunk-FNB3NP57.js";
+} from "./chunk-6PZG4MJS.js";
 import {
   parseFlags
-} from "./chunk-4WAIOZ4W.js";
+} from "./chunk-OVWVKMPS.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{chunk-BQ7H23QP.js → chunk-XSKLVEI6.js}

@@ -147,7 +147,8 @@ var LABEL = {
   input: "wrong keyboard",
   autocomplete: "field the phone cannot fill in",
   tel: "phone number is not a link",
-  linelength: "line too long"
+  linelength: "line too long",
+  screens: "page too long for a phone"
 };
 function writeBaseline(findings, routes, note, previous) {
   const byFile = tally(findings, (f) => f.file);
@@ -245,6 +246,102 @@ function judgeRoutes(pages, measuredRoutes, excluded = []) {
   return { missing: pages.filter((p) => !covered.has(p)), problems, covered: covered.size };
 }
 
+// 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 screenBudgetFor(budgets, route) {
+  if (!budgets) return void 0;
+  const path = cleanRoute(route);
+  let best;
+  for (const key of Object.keys(budgets)) {
+    const prefix = key.endsWith("/*") ? key.slice(0, -1) : null;
+    const hit = key === "*" ? 0 : prefix ? path === key.slice(0, -2) || path.startsWith(prefix) ? 1 + prefix.length : -1 : routeMatches(key, path) ? key === path ? 1e4 : 5e3 + key.length : -1;
+    if (hit >= 0 && (!best || hit > best.score)) best = { key, score: hit };
+  }
+  return best ? budgets[best.key] : void 0;
+}
+function checkScreenBudgets(budgets, where = "screens") {
+  if (budgets === void 0) return void 0;
+  if (!budgets || typeof budgets !== "object" || Array.isArray(budgets)) throw new Error(`${where} should map a route to its budget in phone screens, such as { "/": 6.5, "/services/*": 6 }`);
+  for (const [route, value] of Object.entries(budgets)) {
+    if (route !== "*" && !route.startsWith("/")) throw new Error(`${where}: "${route}" should start with / (or be *)`);
+    if (typeof value !== "number" || !(value > 0)) throw new Error(`${where}: "${route}" should be a number of phone screens above 0, not ${JSON.stringify(value)}`);
+  }
+  return budgets;
+}
+function formatScreens(routes, budgets) {
+  return routes.filter((r) => r.screens !== void 0).map((r) => {
+    const budget = screenBudgetFor(budgets, r.route);
+    return `${r.route} ${r.screens}${budget === void 0 ? "" : ` of ${budget}`}`;
+  }).join(", ");
+}
+function formatWidths(failing, tested) {
+  const plain = tested.filter((n) => /^\d+$/.test(n)).sort((a, b) => Number(a) - Number(b));
+  const rank2 = new Map(plain.map((name, i) => [name, i]));
+  const names = [...new Set(failing)];
+  const runs = [];
+  for (const name of names.filter((n) => rank2.has(n)).sort((a, b) => rank2.get(a) - rank2.get(b))) {
+    const last = runs.at(-1);
+    if (last && rank2.get(name) === rank2.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) => !rank2.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;
+}
+
 export {
   parseBaseline,
   EMPTY_BASELINE,
@@ -257,5 +354,15 @@ export {
   hasUnexcusedEntries,
   routesFromPages,
   routesFromManifest,
-  judgeRoutes
+  judgeRoutes,
+  LADDER,
+  SHORT_PHONE,
+  DEFAULT_SWEEP,
+  sweepWidths,
+  DEFAULT_THRESHOLDS,
+  mainActionFor,
+  screenBudgetFor,
+  checkScreenBudgets,
+  formatScreens,
+  mergeViewportFindings
 };

package/dist/{chunk-BYXDX66D.js → chunk-ZS7PQNJU.js}

@@ -5,7 +5,7 @@ import {
 import {
   describeTypicality,
   loadNull
-} from "./chunk-FNB3NP57.js";
+} from "./chunk-6PZG4MJS.js";
 import {
   SOURCE_FILE,
   finish,
@@ -14,7 +14,7 @@ import {
   parseFlags,
   prepareReport,
   readPaths
-} from "./chunk-4WAIOZ4W.js";
+} from "./chunk-OVWVKMPS.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{cli-XAWJWK7I.js → cli-7DL4BKA7.js}

@@ -4,12 +4,12 @@ import {
   merge,
   resolvePages,
   runAudit
-} from "./chunk-BYXDX66D.js";
+} from "./chunk-ZS7PQNJU.js";
 import "./chunk-6DRBFDWT.js";
 import "./chunk-JYNXGCYZ.js";
-import "./chunk-FNB3NP57.js";
+import "./chunk-6PZG4MJS.js";
 import "./chunk-OQXTQQAU.js";
-import "./chunk-4WAIOZ4W.js";
+import "./chunk-OVWVKMPS.js";
 import "./chunk-QIEDBL4J.js";
 import "./chunk-WUACK2HX.js";
 import "./chunk-DE2ZAV4G.js";

package/dist/{cli-5VHX5EJF.js → cli-AM4FLXGM.js}

@@ -4,11 +4,11 @@ import {
 import {
   expandNullTargets,
   loadNull
-} from "./chunk-FNB3NP57.js";
+} from "./chunk-6PZG4MJS.js";
 import "./chunk-OQXTQQAU.js";
 import {
   parseFlags
-} from "./chunk-4WAIOZ4W.js";
+} from "./chunk-OVWVKMPS.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{cli-RHDNHL4U.js → cli-R2HBESHI.js}

@@ -22,7 +22,7 @@ import {
 } from "./chunk-G47ZCBD5.js";
 import {
   parseFlags
-} from "./chunk-4WAIOZ4W.js";
+} from "./chunk-OVWVKMPS.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{cli-PBCU7Z64.js → cli-SZ4SZLUN.js}

@@ -9,9 +9,9 @@ import {
   runHarvest,
   runNull,
   serveDir
-} from "./chunk-FNB3NP57.js";
+} from "./chunk-6PZG4MJS.js";
 import "./chunk-OQXTQQAU.js";
-import "./chunk-4WAIOZ4W.js";
+import "./chunk-OVWVKMPS.js";
 import "./chunk-QIEDBL4J.js";
 import "./chunk-WUACK2HX.js";
 import "./chunk-DE2ZAV4G.js";

package/dist/{cli-YSGPGQ7R.js → cli-T7A3BU5J.js}

@@ -3,21 +3,21 @@ import {
 } from "./chunk-OKVHWXYV.js";
 import {
   merge
-} from "./chunk-BYXDX66D.js";
+} from "./chunk-ZS7PQNJU.js";
 import "./chunk-6DRBFDWT.js";
 import "./chunk-JYNXGCYZ.js";
 import {
   SIBLING_AT,
   compareToEstate,
   loadEstate
-} from "./chunk-STWH5EYU.js";
+} from "./chunk-RBQCGDQQ.js";
 import {
   PAGE_TYPES,
   validateDirection
 } from "./chunk-G47ZCBD5.js";
 import {
   loadNull
-} from "./chunk-FNB3NP57.js";
+} from "./chunk-6PZG4MJS.js";
 import "./chunk-OQXTQQAU.js";
 import {
   COPY_FILE,
@@ -28,7 +28,7 @@ import {
   loadExceptions,
   parseFlags,
   readPaths
-} from "./chunk-4WAIOZ4W.js";
+} from "./chunk-OVWVKMPS.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{cli-5QI6NIZN.js → cli-WZA5IXSR.js}

@@ -4,11 +4,11 @@ import {
   formatPairs,
   loadEstate,
   runEstate
-} from "./chunk-STWH5EYU.js";
+} from "./chunk-RBQCGDQQ.js";
 import "./chunk-G47ZCBD5.js";
-import "./chunk-FNB3NP57.js";
+import "./chunk-6PZG4MJS.js";
 import "./chunk-OQXTQQAU.js";
-import "./chunk-4WAIOZ4W.js";
+import "./chunk-OVWVKMPS.js";
 import "./chunk-QIEDBL4J.js";
 import "./chunk-WUACK2HX.js";
 import "./chunk-DE2ZAV4G.js";

package/dist/{cli-EYHRJJAX.js → cli-YNIJOEJK.js}

@@ -1,6 +1,7 @@
 import {
   EMPTY_BASELINE,
   checkExceptions,
+  formatScreens,
   hasUnexcusedEntries,
   judgeGrowth,
   judgeMeasured,
@@ -11,11 +12,11 @@ import {
   routesFromPages,
   scanPhoneFirst,
   writeBaseline
-} from "./chunk-BQ7H23QP.js";
+} from "./chunk-XSKLVEI6.js";
 import {
   SOURCE_FILE,
   readPaths
-} from "./chunk-4WAIOZ4W.js";
+} from "./chunk-OVWVKMPS.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";
@@ -213,7 +214,9 @@ ${lines.map((l) => `  ${l}`).join("\n")}` : "";
       covered && app.routes.length ? `${app.routes.length} page route${app.routes.length === 1 ? "" : "s"} covered` : null
     ].filter(Boolean).join(", ");
     if (!failed) {
-      io.out(`craft phone-first: pass. ${summary}.${[baseNote, routeNote].filter(Boolean).map((n) => `
+      const screens = routes ? formatScreens(routes) : "";
+      io.out(`craft phone-first: pass. ${summary}.${screens ? `
+  phone screens to the footer: ${screens}` : ""}${[baseNote, routeNote].filter(Boolean).map((n) => `
   note: ${n}`).join("")}`);
       return 0;
     }

package/dist/cli.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   run
-} from "./chunk-4WAIOZ4W.js";
+} from "./chunk-OVWVKMPS.js";
 import "./chunk-QIEDBL4J.js";
 import "./chunk-DE2ZAV4G.js";
 import "./chunk-ONA73THJ.js";

package/dist/phone.cjs

@@ -33,7 +33,9 @@ __export(phone_exports, {
   WIDE_WIDTHS: () => WIDE_WIDTHS,
   bandOf: () => bandOf,
   checkExceptions: () => checkExceptions,
+  checkScreenBudgets: () => checkScreenBudgets,
   cleanRoute: () => cleanRoute,
+  formatScreens: () => formatScreens,
   formatWidths: () => formatWidths,
   hasReason: () => hasReason,
   hasUnexcusedEntries: () => hasUnexcusedEntries,
@@ -57,6 +59,7 @@ __export(phone_exports, {
   routesFromManifest: () => routesFromManifest,
   routesFromPages: () => routesFromPages,
   scanPhoneFirst: () => scanPhoneFirst,
+  screenBudgetFor: () => screenBudgetFor,
   sweepWidths: () => sweepWidths,
   writeBaseline: () => writeBaseline
 });
@@ -580,7 +583,8 @@ var LABEL = {
   input: "wrong keyboard",
   autocomplete: "field the phone cannot fill in",
   tel: "phone number is not a link",
-  linelength: "line too long"
+  linelength: "line too long",
+  screens: "page too long for a phone"
 };
 function writeBaseline(findings, routes, note, previous) {
   const byFile = tally(findings, (f) => f.file);
@@ -718,6 +722,32 @@ var DEFAULT_THRESHOLDS = {
   minImagePx: 32
 };
 var mainActionFor = (config, route) => typeof config === "string" ? config : config ? config[route] ?? config["*"] : void 0;
+function screenBudgetFor(budgets, route) {
+  if (!budgets) return void 0;
+  const path = cleanRoute(route);
+  let best;
+  for (const key of Object.keys(budgets)) {
+    const prefix = key.endsWith("/*") ? key.slice(0, -1) : null;
+    const hit = key === "*" ? 0 : prefix ? path === key.slice(0, -2) || path.startsWith(prefix) ? 1 + prefix.length : -1 : routeMatches(key, path) ? key === path ? 1e4 : 5e3 + key.length : -1;
+    if (hit >= 0 && (!best || hit > best.score)) best = { key, score: hit };
+  }
+  return best ? budgets[best.key] : void 0;
+}
+function checkScreenBudgets(budgets, where = "screens") {
+  if (budgets === void 0) return void 0;
+  if (!budgets || typeof budgets !== "object" || Array.isArray(budgets)) throw new Error(`${where} should map a route to its budget in phone screens, such as { "/": 6.5, "/services/*": 6 }`);
+  for (const [route, value] of Object.entries(budgets)) {
+    if (route !== "*" && !route.startsWith("/")) throw new Error(`${where}: "${route}" should start with / (or be *)`);
+    if (typeof value !== "number" || !(value > 0)) throw new Error(`${where}: "${route}" should be a number of phone screens above 0, not ${JSON.stringify(value)}`);
+  }
+  return budgets;
+}
+function formatScreens(routes, budgets) {
+  return routes.filter((r) => r.screens !== void 0).map((r) => {
+    const budget = screenBudgetFor(budgets, r.route);
+    return `${r.route} ${r.screens}${budget === void 0 ? "" : ` of ${budget}`}`;
+  }).join(", ");
+}
 function formatWidths(failing, tested) {
   const plain = tested.filter((n) => /^\d+$/.test(n)).sort((a, b) => Number(a) - Number(b));
   const rank2 = new Map(plain.map((name, i) => [name, i]));
@@ -814,6 +844,7 @@ async function collect(page, options) {
   const mainAction = mainActionFor(options.mainAction, options.route);
   const perViewport = [];
   const tested = [];
+  let screens;
   for (const stop of plan(options)) {
     await page.setViewportSize({ width: stop.width, height: stop.height });
     await settle(page, stop.ladder ? 150 : 60);
@@ -822,20 +853,36 @@ async function collect(page, options) {
     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 }));
+    if (stop.name === SHORT_PHONE.name) {
+      const height = await page.evaluate(() => document.documentElement.scrollHeight, void 0);
+      screens = Math.round(height / stop.height * 10) / 10;
+      const budget = screenBudgetFor(options.screens, options.route);
+      if (budget !== void 0 && screens > budget) findings.push({ check: "screens", element: "<page>", detail: `${screens} phone screens to the footer at ${stop.width} x ${stop.height}, over the budget of ${budget} for ${options.route}` });
+    }
     perViewport.push({ viewport: stop.name, findings });
     tested.push(stop.name);
   }
-  return { perViewport, tested };
+  return { perViewport, tested, ...screens !== void 0 ? { screens } : {} };
+}
+function mergeCollected(collected) {
+  const screens = collected.find((c) => c.screens !== void 0)?.screens;
+  return { perViewport: collected.flatMap((c) => c.perViewport), tested: collected.flatMap((c) => c.tested), ...screens !== void 0 ? { screens } : {} };
 }
 function finish(route, collected, out) {
-  const result = { route, viewports: collected.tested, findings: mergeViewportFindings(collected.perViewport, collected.tested), perViewport: collected.perViewport };
+  const result = {
+    route,
+    viewports: collected.tested,
+    ...collected.screens !== void 0 ? { screens: collected.screens } : {},
+    findings: mergeViewportFindings(collected.perViewport, collected.tested),
+    perViewport: collected.perViewport
+  };
   if (out !== false) writeMeasured(result, out ?? DEFAULT_MEASURED_DIR);
   return result;
 }
 function writeMeasured(result, dir) {
   (0, import_node_fs.mkdirSync)(dir, { recursive: true });
-  const { route, viewport, viewports, findings } = result;
-  (0, import_node_fs.writeFileSync)((0, import_node_path.join)(dir, routeFile(route)), `${JSON.stringify({ route, ...viewport ? { viewport } : {}, ...viewports ? { viewports } : {}, findings }, null, 1)}
+  const { route, viewport, viewports, screens, findings } = result;
+  (0, import_node_fs.writeFileSync)((0, import_node_path.join)(dir, routeFile(route)), `${JSON.stringify({ route, ...viewport ? { viewport } : {}, ...viewports ? { viewports } : {}, ...screens !== void 0 ? { screens } : {}, findings }, null, 1)}
 `);
 }
 async function measureViewports(page, options) {
@@ -856,7 +903,7 @@ async function measureRoute(open, options) {
       await close?.();
     }
   }
-  return finish(options.route, { perViewport: collected.flatMap((c) => c.perViewport), tested: collected.flatMap((c) => c.tested) }, options.out);
+  return finish(options.route, mergeCollected(collected), options.out);
 }
 async function measureSite(browser, options) {
   const result = { routes: [], errors: [] };
@@ -885,7 +932,7 @@ async function measureSite(browser, options) {
       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));
+    result.routes.push(finish(route, mergeCollected(collected), options.out));
   }
   return result;
 }
@@ -918,7 +965,9 @@ async function measurePhone(page, options) {
   WIDE_WIDTHS,
   bandOf,
   checkExceptions,
+  checkScreenBudgets,
   cleanRoute,
+  formatScreens,
   formatWidths,
   hasReason,
   hasUnexcusedEntries,
@@ -942,6 +991,7 @@ async function measurePhone(page, options) {
   routesFromManifest,
   routesFromPages,
   scanPhoneFirst,
+  screenBudgetFor,
   sweepWidths,
   writeBaseline
 });

package/dist/phone.d.cts

@@ -28,7 +28,7 @@ interface PhoneFloors {
  * What a measure can find. The first five are the 375px floors (DOM-775); the
  * rest are the every-viewport and phone-optimisation checks (DOM-787).
  */
-type PhoneCheck = "scroll" | "target" | "field" | "text" | "title" | "overlap" | "action" | "layers" | "landscape" | "image" | "input" | "autocomplete" | "tel" | "linelength";
+type PhoneCheck = "scroll" | "target" | "field" | "text" | "title" | "overlap" | "action" | "layers" | "landscape" | "image" | "input" | "autocomplete" | "tel" | "linelength" | "screens";
 interface RawPhoneFinding {
     check: PhoneCheck;
     /** `<tag> "text"`: what a person looks for on the page. */
@@ -92,6 +92,8 @@ interface MeasuredRoute {
     };
     /** Set by the every-viewport measure: the viewports and widths the findings were gathered across, phone first. */
     viewports?: string[];
+    /** Phone screens to the footer (page height at 375 x 667 over 667), from the every-viewport measure. Absent when the short phone was not measured. */
+    screens?: number;
     findings: RawPhoneFinding[];
 }
 interface Baseline {
@@ -266,6 +268,23 @@ declare const DEFAULT_THRESHOLDS: Thresholds;
 /** The main action, as a selector: one for the whole site, or one per route (`*` is the fallback). */
 type MainAction = string | Record<string, string>;
 declare const mainActionFor: (config: MainAction | undefined, route: string) => string | undefined;
+/**
+ * A length budget per page type, in phone screens to the footer (page height at
+ * 375 x 667 over 667). Keys are a route (`/`), a route pattern (`/services/[slug]`),
+ * a prefix (`/services/*`: the route and everything under it) or `*` for the
+ * rest; the most specific match wins. No match is no budget: the count is
+ * reported and never fails.
+ */
+type ScreenBudgets = Record<string, number>;
+/** The budget for a route, or undefined when none of the keys covers it. */
+declare function screenBudgetFor(budgets: ScreenBudgets | undefined, route: string): number | undefined;
+/** `screens` as a person types it into config: every budget a positive number. */
+declare function checkScreenBudgets(budgets: unknown, where?: string): ScreenBudgets | undefined;
+/** `/ 12.7, /services 4.1`: the count per route, for the line a run prints whether or not a budget is set. */
+declare function formatScreens(routes: {
+    route: string;
+    screens?: number;
+}[], budgets?: ScreenBudgets): string;
 /**
  * Widths as a person reads them: `320-352, 400, 1440`. A run is consecutive
  * tested widths that all fail. A landscape or short-phone name (`844x390`)
@@ -385,6 +404,13 @@ interface MeasureViewportsOptions {
     floors?: Partial<PhoneFloors>;
     /** The main action's selector: one for all routes, or per route with `*` as the fallback. Absent: not checked. */
     mainAction?: MainAction;
+    /**
+     * A length budget per route, in phone screens to the footer (page height at
+     * 375 x 667 over 667): `{ "/": 6.5, "/services/*": 6 }`. A route over its
+     * budget fails the `screens` check. Without a budget the count is only
+     * reported, in `ViewportsResult.screens`.
+     */
+    screens?: ScreenBudgets;
     /** The width sweep, or `false` to measure the ladder only. */
     sweep?: Partial<Sweep> | false;
     /** Replace the ladder. */
@@ -522,4 +548,4 @@ interface MeasurePhoneOptions {
  */
 declare function measurePhone(page: MinimalPage, options: MeasurePhoneOptions): Promise<MeasuredRoute>;
 
-export { BANDS, type Band, type Baseline, DEFAULT_MEASURED_DIR, DEFAULT_SWEEP, DEFAULT_THRESHOLDS, DESKTOP, EMPTY_BASELINE, type ExcludedRoute, type FileException, type InPageGroup, type Judgement, LADDER, type MainAction, type MeasurePhoneOptions, type MeasureSiteOptions, type MeasureViewportsOptions, type MeasuredRoute, type OpenedPage, PHONE, PHONE_FLOORS, type PhoneCheck, type PhoneFloors, type RawPhoneFinding, type RouteJudgement, SHORT_PHONE, type SiteBrowser, type SitePage, type SiteResult, type StaticFinding, type Sweep, type Thresholds, type Viewport, type ViewportArg, type ViewportPage, type ViewportsResult, WIDE_WIDTHS, bandOf, checkExceptions, cleanRoute, formatWidths, hasReason, hasUnexcusedEntries, judgeGrowth, judgeMeasured, judgeRoutes, judgeStatic, mainActionFor, measurePhone, measurePhoneInPage, measureRoute, measureSite, measureViewportInPage, measureViewports, mergeViewportFindings, normaliseElement, parseBaseline, reasonOf, routeFile, routeMatches, routesFromManifest, routesFromPages, scanPhoneFirst, sweepWidths, writeBaseline };
+export { BANDS, type Band, type Baseline, DEFAULT_MEASURED_DIR, DEFAULT_SWEEP, DEFAULT_THRESHOLDS, DESKTOP, EMPTY_BASELINE, type ExcludedRoute, type FileException, type InPageGroup, type Judgement, LADDER, type MainAction, type MeasurePhoneOptions, type MeasureSiteOptions, type MeasureViewportsOptions, type MeasuredRoute, type OpenedPage, PHONE, PHONE_FLOORS, type PhoneCheck, type PhoneFloors, type RawPhoneFinding, type RouteJudgement, SHORT_PHONE, type ScreenBudgets, type SiteBrowser, type SitePage, type SiteResult, type StaticFinding, type Sweep, type Thresholds, type Viewport, type ViewportArg, type ViewportPage, type ViewportsResult, WIDE_WIDTHS, bandOf, checkExceptions, checkScreenBudgets, cleanRoute, formatScreens, formatWidths, hasReason, hasUnexcusedEntries, judgeGrowth, judgeMeasured, judgeRoutes, judgeStatic, mainActionFor, measurePhone, measurePhoneInPage, measureRoute, measureSite, measureViewportInPage, measureViewports, mergeViewportFindings, normaliseElement, parseBaseline, reasonOf, routeFile, routeMatches, routesFromManifest, routesFromPages, scanPhoneFirst, screenBudgetFor, sweepWidths, writeBaseline };

package/dist/phone.d.ts

@@ -28,7 +28,7 @@ interface PhoneFloors {
  * What a measure can find. The first five are the 375px floors (DOM-775); the
  * rest are the every-viewport and phone-optimisation checks (DOM-787).
  */
-type PhoneCheck = "scroll" | "target" | "field" | "text" | "title" | "overlap" | "action" | "layers" | "landscape" | "image" | "input" | "autocomplete" | "tel" | "linelength";
+type PhoneCheck = "scroll" | "target" | "field" | "text" | "title" | "overlap" | "action" | "layers" | "landscape" | "image" | "input" | "autocomplete" | "tel" | "linelength" | "screens";
 interface RawPhoneFinding {
     check: PhoneCheck;
     /** `<tag> "text"`: what a person looks for on the page. */
@@ -92,6 +92,8 @@ interface MeasuredRoute {
     };
     /** Set by the every-viewport measure: the viewports and widths the findings were gathered across, phone first. */
     viewports?: string[];
+    /** Phone screens to the footer (page height at 375 x 667 over 667), from the every-viewport measure. Absent when the short phone was not measured. */
+    screens?: number;
     findings: RawPhoneFinding[];
 }
 interface Baseline {
@@ -266,6 +268,23 @@ declare const DEFAULT_THRESHOLDS: Thresholds;
 /** The main action, as a selector: one for the whole site, or one per route (`*` is the fallback). */
 type MainAction = string | Record<string, string>;
 declare const mainActionFor: (config: MainAction | undefined, route: string) => string | undefined;
+/**
+ * A length budget per page type, in phone screens to the footer (page height at
+ * 375 x 667 over 667). Keys are a route (`/`), a route pattern (`/services/[slug]`),
+ * a prefix (`/services/*`: the route and everything under it) or `*` for the
+ * rest; the most specific match wins. No match is no budget: the count is
+ * reported and never fails.
+ */
+type ScreenBudgets = Record<string, number>;
+/** The budget for a route, or undefined when none of the keys covers it. */
+declare function screenBudgetFor(budgets: ScreenBudgets | undefined, route: string): number | undefined;
+/** `screens` as a person types it into config: every budget a positive number. */
+declare function checkScreenBudgets(budgets: unknown, where?: string): ScreenBudgets | undefined;
+/** `/ 12.7, /services 4.1`: the count per route, for the line a run prints whether or not a budget is set. */
+declare function formatScreens(routes: {
+    route: string;
+    screens?: number;
+}[], budgets?: ScreenBudgets): string;
 /**
  * Widths as a person reads them: `320-352, 400, 1440`. A run is consecutive
  * tested widths that all fail. A landscape or short-phone name (`844x390`)
@@ -385,6 +404,13 @@ interface MeasureViewportsOptions {
     floors?: Partial<PhoneFloors>;
     /** The main action's selector: one for all routes, or per route with `*` as the fallback. Absent: not checked. */
     mainAction?: MainAction;
+    /**
+     * A length budget per route, in phone screens to the footer (page height at
+     * 375 x 667 over 667): `{ "/": 6.5, "/services/*": 6 }`. A route over its
+     * budget fails the `screens` check. Without a budget the count is only
+     * reported, in `ViewportsResult.screens`.
+     */
+    screens?: ScreenBudgets;
     /** The width sweep, or `false` to measure the ladder only. */
     sweep?: Partial<Sweep> | false;
     /** Replace the ladder. */
@@ -522,4 +548,4 @@ interface MeasurePhoneOptions {
  */
 declare function measurePhone(page: MinimalPage, options: MeasurePhoneOptions): Promise<MeasuredRoute>;
 
-export { BANDS, type Band, type Baseline, DEFAULT_MEASURED_DIR, DEFAULT_SWEEP, DEFAULT_THRESHOLDS, DESKTOP, EMPTY_BASELINE, type ExcludedRoute, type FileException, type InPageGroup, type Judgement, LADDER, type MainAction, type MeasurePhoneOptions, type MeasureSiteOptions, type MeasureViewportsOptions, type MeasuredRoute, type OpenedPage, PHONE, PHONE_FLOORS, type PhoneCheck, type PhoneFloors, type RawPhoneFinding, type RouteJudgement, SHORT_PHONE, type SiteBrowser, type SitePage, type SiteResult, type StaticFinding, type Sweep, type Thresholds, type Viewport, type ViewportArg, type ViewportPage, type ViewportsResult, WIDE_WIDTHS, bandOf, checkExceptions, cleanRoute, formatWidths, hasReason, hasUnexcusedEntries, judgeGrowth, judgeMeasured, judgeRoutes, judgeStatic, mainActionFor, measurePhone, measurePhoneInPage, measureRoute, measureSite, measureViewportInPage, measureViewports, mergeViewportFindings, normaliseElement, parseBaseline, reasonOf, routeFile, routeMatches, routesFromManifest, routesFromPages, scanPhoneFirst, sweepWidths, writeBaseline };
+export { BANDS, type Band, type Baseline, DEFAULT_MEASURED_DIR, DEFAULT_SWEEP, DEFAULT_THRESHOLDS, DESKTOP, EMPTY_BASELINE, type ExcludedRoute, type FileException, type InPageGroup, type Judgement, LADDER, type MainAction, type MeasurePhoneOptions, type MeasureSiteOptions, type MeasureViewportsOptions, type MeasuredRoute, type OpenedPage, PHONE, PHONE_FLOORS, type PhoneCheck, type PhoneFloors, type RawPhoneFinding, type RouteJudgement, SHORT_PHONE, type ScreenBudgets, type SiteBrowser, type SitePage, type SiteResult, type StaticFinding, type Sweep, type Thresholds, type Viewport, type ViewportArg, type ViewportPage, type ViewportsResult, WIDE_WIDTHS, bandOf, checkExceptions, checkScreenBudgets, cleanRoute, formatScreens, formatWidths, hasReason, hasUnexcusedEntries, judgeGrowth, judgeMeasured, judgeRoutes, judgeStatic, mainActionFor, measurePhone, measurePhoneInPage, measureRoute, measureSite, measureViewportInPage, measureViewports, mergeViewportFindings, normaliseElement, parseBaseline, reasonOf, routeFile, routeMatches, routesFromManifest, routesFromPages, scanPhoneFirst, screenBudgetFor, sweepWidths, writeBaseline };

package/dist/phone.js

@@ -518,7 +518,8 @@ var LABEL = {
   input: "wrong keyboard",
   autocomplete: "field the phone cannot fill in",
   tel: "phone number is not a link",
-  linelength: "line too long"
+  linelength: "line too long",
+  screens: "page too long for a phone"
 };
 function writeBaseline(findings, routes, note, previous) {
   const byFile = tally(findings, (f) => f.file);
@@ -656,6 +657,32 @@ var DEFAULT_THRESHOLDS = {
   minImagePx: 32
 };
 var mainActionFor = (config, route) => typeof config === "string" ? config : config ? config[route] ?? config["*"] : void 0;
+function screenBudgetFor(budgets, route) {
+  if (!budgets) return void 0;
+  const path = cleanRoute(route);
+  let best;
+  for (const key of Object.keys(budgets)) {
+    const prefix = key.endsWith("/*") ? key.slice(0, -1) : null;
+    const hit = key === "*" ? 0 : prefix ? path === key.slice(0, -2) || path.startsWith(prefix) ? 1 + prefix.length : -1 : routeMatches(key, path) ? key === path ? 1e4 : 5e3 + key.length : -1;
+    if (hit >= 0 && (!best || hit > best.score)) best = { key, score: hit };
+  }
+  return best ? budgets[best.key] : void 0;
+}
+function checkScreenBudgets(budgets, where = "screens") {
+  if (budgets === void 0) return void 0;
+  if (!budgets || typeof budgets !== "object" || Array.isArray(budgets)) throw new Error(`${where} should map a route to its budget in phone screens, such as { "/": 6.5, "/services/*": 6 }`);
+  for (const [route, value] of Object.entries(budgets)) {
+    if (route !== "*" && !route.startsWith("/")) throw new Error(`${where}: "${route}" should start with / (or be *)`);
+    if (typeof value !== "number" || !(value > 0)) throw new Error(`${where}: "${route}" should be a number of phone screens above 0, not ${JSON.stringify(value)}`);
+  }
+  return budgets;
+}
+function formatScreens(routes, budgets) {
+  return routes.filter((r) => r.screens !== void 0).map((r) => {
+    const budget = screenBudgetFor(budgets, r.route);
+    return `${r.route} ${r.screens}${budget === void 0 ? "" : ` of ${budget}`}`;
+  }).join(", ");
+}
 function formatWidths(failing, tested) {
   const plain = tested.filter((n) => /^\d+$/.test(n)).sort((a, b) => Number(a) - Number(b));
   const rank2 = new Map(plain.map((name, i) => [name, i]));
@@ -752,6 +779,7 @@ async function collect(page, options) {
   const mainAction = mainActionFor(options.mainAction, options.route);
   const perViewport = [];
   const tested = [];
+  let screens;
   for (const stop of plan(options)) {
     await page.setViewportSize({ width: stop.width, height: stop.height });
     await settle(page, stop.ladder ? 150 : 60);
@@ -760,20 +788,36 @@ async function collect(page, options) {
     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 }));
+    if (stop.name === SHORT_PHONE.name) {
+      const height = await page.evaluate(() => document.documentElement.scrollHeight, void 0);
+      screens = Math.round(height / stop.height * 10) / 10;
+      const budget = screenBudgetFor(options.screens, options.route);
+      if (budget !== void 0 && screens > budget) findings.push({ check: "screens", element: "<page>", detail: `${screens} phone screens to the footer at ${stop.width} x ${stop.height}, over the budget of ${budget} for ${options.route}` });
+    }
     perViewport.push({ viewport: stop.name, findings });
     tested.push(stop.name);
   }
-  return { perViewport, tested };
+  return { perViewport, tested, ...screens !== void 0 ? { screens } : {} };
+}
+function mergeCollected(collected) {
+  const screens = collected.find((c) => c.screens !== void 0)?.screens;
+  return { perViewport: collected.flatMap((c) => c.perViewport), tested: collected.flatMap((c) => c.tested), ...screens !== void 0 ? { screens } : {} };
 }
 function finish(route, collected, out) {
-  const result = { route, viewports: collected.tested, findings: mergeViewportFindings(collected.perViewport, collected.tested), perViewport: collected.perViewport };
+  const result = {
+    route,
+    viewports: collected.tested,
+    ...collected.screens !== void 0 ? { screens: collected.screens } : {},
+    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)}
+  const { route, viewport, viewports, screens, findings } = result;
+  writeFileSync(join(dir, routeFile(route)), `${JSON.stringify({ route, ...viewport ? { viewport } : {}, ...viewports ? { viewports } : {}, ...screens !== void 0 ? { screens } : {}, findings }, null, 1)}
 `);
 }
 async function measureViewports(page, options) {
@@ -794,7 +838,7 @@ async function measureRoute(open, options) {
       await close?.();
     }
   }
-  return finish(options.route, { perViewport: collected.flatMap((c) => c.perViewport), tested: collected.flatMap((c) => c.tested) }, options.out);
+  return finish(options.route, mergeCollected(collected), options.out);
 }
 async function measureSite(browser, options) {
   const result = { routes: [], errors: [] };
@@ -823,7 +867,7 @@ async function measureSite(browser, options) {
       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));
+    result.routes.push(finish(route, mergeCollected(collected), options.out));
   }
   return result;
 }
@@ -855,7 +899,9 @@ export {
   WIDE_WIDTHS,
   bandOf,
   checkExceptions,
+  checkScreenBudgets,
   cleanRoute,
+  formatScreens,
   formatWidths,
   hasReason,
   hasUnexcusedEntries,
@@ -879,6 +925,7 @@ export {
   routesFromManifest,
   routesFromPages,
   scanPhoneFirst,
+  screenBudgetFor,
   sweepWidths,
   writeBaseline
 };

package/dist/{viewports-cli-XYYX4SKV.js → viewports-cli-F7KJIVZL.js}

@@ -1,9 +1,19 @@
 import {
+  DEFAULT_SWEEP,
+  DEFAULT_THRESHOLDS,
   EMPTY_BASELINE,
+  LADDER,
+  SHORT_PHONE,
+  checkScreenBudgets,
+  formatScreens,
   judgeMeasured,
+  mainActionFor,
+  mergeViewportFindings,
   parseBaseline,
+  screenBudgetFor,
+  sweepWidths,
   writeBaseline
-} from "./chunk-BQ7H23QP.js";
+} from "./chunk-XSKLVEI6.js";
 import {
   loadPlaywright
 } from "./chunk-6DRBFDWT.js";
@@ -390,76 +400,6 @@ function measureViewportInPage(arg) {
   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;
@@ -515,6 +455,7 @@ async function collect(page, options) {
   const mainAction = mainActionFor(options.mainAction, options.route);
   const perViewport = [];
   const tested = [];
+  let screens;
   for (const stop of plan(options)) {
     await page.setViewportSize({ width: stop.width, height: stop.height });
     await settle(page, stop.ladder ? 150 : 60);
@@ -523,20 +464,36 @@ async function collect(page, options) {
     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 }));
+    if (stop.name === SHORT_PHONE.name) {
+      const height = await page.evaluate(() => document.documentElement.scrollHeight, void 0);
+      screens = Math.round(height / stop.height * 10) / 10;
+      const budget = screenBudgetFor(options.screens, options.route);
+      if (budget !== void 0 && screens > budget) findings.push({ check: "screens", element: "<page>", detail: `${screens} phone screens to the footer at ${stop.width} x ${stop.height}, over the budget of ${budget} for ${options.route}` });
+    }
     perViewport.push({ viewport: stop.name, findings });
     tested.push(stop.name);
   }
-  return { perViewport, tested };
+  return { perViewport, tested, ...screens !== void 0 ? { screens } : {} };
+}
+function mergeCollected(collected) {
+  const screens = collected.find((c) => c.screens !== void 0)?.screens;
+  return { perViewport: collected.flatMap((c) => c.perViewport), tested: collected.flatMap((c) => c.tested), ...screens !== void 0 ? { screens } : {} };
 }
 function finish(route, collected, out) {
-  const result = { route, viewports: collected.tested, findings: mergeViewportFindings(collected.perViewport, collected.tested), perViewport: collected.perViewport };
+  const result = {
+    route,
+    viewports: collected.tested,
+    ...collected.screens !== void 0 ? { screens: collected.screens } : {},
+    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)}
+  const { route, viewport, viewports, screens, findings } = result;
+  writeFileSync(join(dir, routeFile(route)), `${JSON.stringify({ route, ...viewport ? { viewport } : {}, ...viewports ? { viewports } : {}, ...screens !== void 0 ? { screens } : {}, findings }, null, 1)}
 `);
 }
 var DESKTOP = { viewport: { width: 1024, height: 768 }, deviceScaleFactor: 1 };
@@ -567,7 +524,7 @@ async function measureSite(browser, options) {
       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));
+    result.routes.push(finish(route, mergeCollected(collected), options.out));
   }
   return result;
 }
@@ -633,6 +590,7 @@ ${USAGE}`);
         ...config.mainAction ? { mainAction: config.mainAction } : {},
         ...config.thresholds ? { thresholds: config.thresholds } : {},
         ...config.floors ? { floors: config.floors } : {},
+        ...config.screens ? { screens: checkScreenBudgets(config.screens, "viewports.json screens") } : {},
         sweep: flags.sweep ? config.sweep : false,
         ...captures ? {
           onViewport: async (page, viewport, route) => {
@@ -657,7 +615,7 @@ ${USAGE}`);
     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 }));
+      io.out(toJson({ pass: !failed, routes: site.routes.map((r) => ({ route: r.route, viewports: r.viewports, screens: r.screens ?? null, findings: r.findings.length })), errors: site.errors, measured: judged }));
       return failed ? 1 : 0;
     }
     const section = (title, lines) => lines.length ? `
@@ -665,13 +623,16 @@ ${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` : ""}`;
+    const screens = formatScreens(site.routes, config.screens);
+    const screensLine = screens ? `
+  phone screens to the footer: ${screens}` : "";
     if (!failed) {
-      io.out(`craft viewports: pass. ${summary}.`);
+      io.out(`craft viewports: pass. ${summary}.${screensLine}`);
       return 0;
     }
     io.err(
       [
-        `craft viewports: fail. ${summary}.`,
+        `craft viewports: fail. ${summary}.${screensLine}`,
         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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@domandigital/craft",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "private": false,
   "description": "The Doman Digital house craft standard as numbers: OKLCh colour ramps that snap to existing anchors, derived semantic tokens with measured WCAG and APCA contrast, one shared motion vocabulary for CSS and JS, and a base stylesheet. Zero dependencies.",
   "license": "Apache-2.0",