@domandigital/craft 0.19.3 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @domandigital/craft
 
+## 0.20.0
+
+### Minor Changes
+
+- 63dfae5: Every viewport, and a phone optimised beyond fit (DOM-787, part of DOM-772). `@domandigital/craft/phone` gains `measureViewports(page, options)`, `measureSite(browser, options)` and a `craft viewports` command beside `craft phone-first`. They take a page through the ladder (320, 375, 390, 430, landscape 844 x 390, 768, 1024, 1280, 1440, 1920, phone first in order and in every report) and a width sweep from 320 to 1920 in 16 to 32px steps, resizing the one loaded page in place. At any width: sideways scroll, visible text over other visible text and a cut-off page title, with the exact widths that fail. On a short phone (375 x 667): the main action (`mainAction`, a selector, global or per route) on the first screen or pinned; fixed and sticky layers over a quarter of the screen; images more than 2.5 times their displayed width or narrower than it; phone, email and number fields with the wrong `type` or `inputmode`; personal-data fields with no `autocomplete`; UK phone numbers in the text that are not `tel:` links. On a landscape phone: header and fixed layers over half the height. At 1440 and 1920: body lines over 80 characters and stretched images. Every threshold has a house default (`DEFAULT_THRESHOLDS`) and can be overridden. The new checks are baselined like the 375px ones: they use the same `phone-first.baseline.json` and `craft phone-first --measured`, and `measurePhone` and the existing baseline format work as before. STANDARD.md section 10 gains "Optimised for the phone" and "Every viewport is intended".
+
 ## 0.19.3
 
 ### Patch Changes

package/README.md

@@ -266,6 +266,57 @@ baseline that claims more than is there, so it only shrinks: fix a breach and
 lower its count in the same PR. `--update-baseline` writes the baseline that
 makes the current run pass; run it once when the gate goes in.
 
+## Every viewport
+
+Fitting at 375 is the floor (STANDARD.md section 10, DOM-787). The
+every-viewport measure takes a page through the ladder (320, 375, 390, 430,
+landscape 844 x 390, 768, 1024, 1280, 1440, 1920, phone first in order and in
+every report) and a width sweep from 320 to 1920 in 16 to 32px steps, resizing
+the one loaded page in place:
+
+- **At any width:** sideways scroll, visible text over other visible text, a
+  cut-off page title (`h1`), and text under 12px. A failure names the exact
+  widths: `(at 320-352, 400)`.
+- **On a short phone (375 x 667):** the main action (`mainAction`, a selector,
+  global or per route) is on the first screen or pinned; fixed and sticky
+  layers together cover at most 25% of the screen; an image is not more than
+  2.5 times wider than shown (`oversized`) nor narrower than shown
+  (`upscaled`); a field that looks like a phone, email or number uses
+  `type="tel"`, `type="email"` or an `inputmode`; a name, email, phone or
+  address field carries `autocomplete`; a UK phone number in the text is a
+  `tel:` link.
+- **On a landscape phone (844 x 390):** header and fixed layers leave at least
+  half the height.
+- **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.
+
+Each threshold has a house default (`DEFAULT_THRESHOLDS`) and can be
+overridden per site or portal.
+
+```ts
+import { PHONE, measureViewports } from "@domandigital/craft/phone";
+
+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" });
+});
+```
+
+`measureViewports` works on the page the suite opened and signed in, so a
+portal keeps its fixtures. `measureSite(browser, { base, routes })` opens each
+route itself, the phone half in a phone context and the wide half in a desktop
+one, for a page anyone can open: create-site's `measure.mjs` uses it.
+`craft viewports --url <base> --route /` is the same for the command line: it
+measures, writes the measured routes, and judges them against the same
+`phone-first.baseline.json`. The new checks are baselined like the 375px ones:
+existing failures are listed (one line per element and check, with the widths
+left out so a failure at one more width is not a new failure), a new failure
+fails, and a baseline that claims more than is there fails too.
+`craft phone-first --measured` judges the same files, and keeps working on
+routes measured only at 375 with `measurePhone`.
+
 ## API
 
 | Area | Exports |

package/STANDARD.md

@@ -161,6 +161,8 @@ Mobile first is a rule about **order and floor**, not about a layout. The phone
 is designed, built and measured first, and every wider layout is derived from
 it. A desktop layout squeezed onto a phone keeps the desktop's priorities and
 drops whatever did not fit; a phone layout widened keeps what matters and adds.
+Fitting on a phone is the floor. The bar is a page optimised for the phone and
+intended at every width, and the two sub-sections below set it.
 
 - **The phone is the base.** Base styles are the phone layout. Wider layouts
   are added with `min-width` queries only (Tailwind: unprefixed is the phone,
@@ -169,7 +171,7 @@ drops whatever did not fit; a phone layout widened keeps what matters and adds.
 - **375px is the floor.** Every surface is designed and measured at **375 CSS
   px** first, the narrowest iPhone width in common use (SE, mini, X to 11 Pro).
   Nothing scrolls sideways at 375. 390 is still measured: it is the width the
-  design is accepted at.
+  design is accepted at. 320 still works (see "Every viewport is intended").
 - **Touch targets at least 44 × 44 CSS px.** A link inside a sentence is exempt,
   as in WCAG's own inline exception. 24px (SC 2.5.8, AA) is what an audit asks
   for; 44 is the house bar.
@@ -182,6 +184,86 @@ drops whatever did not fit; a phone layout widened keeps what matters and adds.
 
 *Source: WCAG 2.2 SC 2.5.5 (Target Size, Enhanced), SC 2.5.8 and SC 1.4.4; Apple Human Interface Guidelines, "Accessibility" (44 × 44 pt hit targets); WebKit's focus zoom on fields under 16px; Lighthouse's default mobile emulation; Google Search Central, "Mobile-first indexing"; Luke Wroblewski, "Mobile First" (2011).*
 
+### Optimised for the phone
+
+A visitor on a phone has a small screen, one thumb, a slow connection and a
+task. The page is built for that and measured on a **short phone, 375 × 667**
+(an iPhone SE), the least height a visitor has.
+
+- **The first screen says what this is and offers the main action.** At
+  375 × 667, with no scroll, the visitor can read what the page is and who it
+  is for, and can reach the main action: call, book, buy or enquire. On a long
+  page the main action stays in thumb reach, pinned to the bottom edge or
+  repeated, because the lower half is the half a thumb reaches.
+- **Thumb reach.** Most people tap with one thumb. Frequent actions sit in the
+  lower two thirds of the screen; a control that only the top corner holds is
+  for rare use.
+- **Use what a phone can do.** A telephone number is a `tel:` link, a text
+  message address an `sms:` link and a street address a map link, so one tap
+  calls, messages or navigates. Each field asks for the keyboard that fits:
+  `type="tel"`, `type="email"`, `inputmode="numeric"` or `"decimal"`. A field
+  that asks for personal data carries `autocomplete` (`name`, `email`, `tel`,
+  `street-address`, `postal-code`), so the phone fills it. Nothing needs hover:
+  what hover reveals is also there on tap and on focus. Anything pinned to an
+  edge keeps clear of the safe area (`env(safe-area-inset-*)`, with
+  `viewport-fit=cover`), so the notch, the home indicator and rounded corners
+  never cover it.
+- **Overlays take at most a quarter of a short screen.** The header, a cookie
+  bar, a chat button and every other fixed or sticky layer together cover at
+  most 25% of 375 × 667. A dialog the visitor opens is theirs and is not
+  counted; a layer that is there on arrival is.
+- **Images are sized for the phone.** `srcset` and `sizes` give a 2x screen a
+  file about twice its displayed width. A file more than about 2.5 times its
+  displayed width is oversized: the phone downloads pixels it throws away. A
+  file narrower than its displayed width is upscaled and soft.
+- **It is fast on a throttled phone.** On the mobile Lighthouse profile
+  (simulated slow 4G, 4x CPU slowdown): Largest Contentful Paint 2.5 s or
+  less, Interaction to Next Paint 200 ms or less, Cumulative Layout Shift 0.1
+  or less.
+- **Landscape is usable.** A phone is held either way up. At 844 × 390 nothing
+  needed is hidden behind a fixed layer, the header and fixed layers leave at
+  least half the height, and no content is cut off.
+
+*Source: Steven Hoober, "How Do Users Really Hold Mobile Devices?" (UXmatters, 2013) and "Design for Fingers, Touch, and People" (UXmatters, 2017); Josh Clark, "Designing for Touch" (A Book Apart, 2015); RFC 3966 (`tel:`), RFC 5724 (`sms:`) and RFC 5870 (`geo:`); WHATWG HTML Standard, `inputmode` and the autofill field names; WCAG 2.2 SC 1.3.5 (Identify Input Purpose) and SC 1.3.4 (Orientation); W3C Media Queries Level 4, the `hover` and `pointer` features; CSS Environment Variables Module Level 1 (`env(safe-area-inset-*)`) and WebKit, "Designing Websites for iPhone X" (2017); Google Search Central, "Helping users easily access content on mobile" (intrusive interstitials); web.dev, "Web Vitals" (the good thresholds for LCP, INP and CLS) and "Serve responsive images".*
+
+### Every viewport is intended
+
+A page is seen at every width from a 320px phone to a 1920px screen, and each
+width gets a layout someone meant. Five bands each look designed:
+
+| Band | Width in CSS px |
+| --- | --- |
+| Phone | 320 to 479 |
+| Large phone | 480 to 767 |
+| Tablet | 768 to 1023 |
+| Laptop | 1024 to 1439 |
+| Wide | 1440 and up |
+
+- **A tablet is a layout of its own.** At 768 to 1023 the page is neither the
+  phone stretched across the width nor the laptop squeezed to fit. The tablet
+  band is designed and captured like the others.
+- **320 works.** Content reflows at 320 CSS px with no sideways scroll and no
+  loss of information or function (WCAG SC 1.4.10, the same as 400% zoom on a
+  1280px screen).
+- **Lines are 45 to 80 characters.** Body text keeps a readable measure at
+  every width. On a wide screen it is capped (`max-width` in `ch`), and the
+  layout holds to a sensible width instead of stretching with the window.
+  Images are never shown larger than their file.
+- **The sweep catches what the breakpoints miss.** The ladder (320, 375, 390,
+  430, 844 × 390 landscape, 768, 1024, 1280, 1440, 1920) is captured, and one
+  page load is resized from 320 to 1920 in steps of 16 to 32px. At any width
+  nothing scrolls sideways, no visible text sits on other visible text and no
+  page title is cut off. The report names the exact widths that fail, phone
+  first.
+
+The measure is `@domandigital/craft/phone` (`measureViewports`,
+`measureSite`, `craft viewports`): one measure that create-site's
+`measure.mjs` and every portal gate use. Each check can be baselined: a
+repo's existing failures are listed in the open, a new failure fails, and the
+baseline only shrinks.
+
+*Source: WCAG 2.2 SC 1.4.10 (Reflow) and SC 1.4.8 (Visual Presentation: no more than 80 characters a line); Robert Bringhurst, "The Elements of Typographic Style", chapter 2, "Rhythm and Proportion" (45 to 75 characters a line); Ethan Marcotte, "Responsive Web Design" (A List Apart, 2010); web.dev, "Responsive web design basics".*
+
 ## 11. What is deliberately not a rule
 
 The package emits **plain CSS custom properties** precisely so these stay free:
@@ -193,8 +275,9 @@ The package emits **plain CSS custom properties** precisely so these stay free:
 - **Where tokens live.** A `:root` block, a generated file, a Tailwind theme:
   the package does not care.
 - **Layout, grid and component structure.** Not a rule, at any width. Section
-  10 fixes the order the widths are designed in and the floor they are
-  measured at; what the phone layout looks like stays free. Layout *defaults*
+  10 fixes the order the widths are designed in, the floor they are measured
+  at and the five bands each is designed for; what each layout looks like
+  stays free. Layout *defaults*
   (hero straight into a trust strip, three icon cards, a reveal on every
   section) are measured as character in [CHARACTER.md](./CHARACTER.md), as
   warnings with a declared-exception path, never as rules here.

package/dist/{chunk-XVMKZ4SM.js → chunk-3CD3DTEI.js}

@@ -5,7 +5,7 @@ import {
 import {
   describeTypicality,
   loadNull
-} from "./chunk-D2FTTM4F.js";
+} from "./chunk-H4UF2I7V.js";
 import {
   SOURCE_FILE,
   finish,
@@ -14,7 +14,7 @@ import {
   parseFlags,
   prepareReport,
   readPaths
-} from "./chunk-BK4AS2RU.js";
+} from "./chunk-LZVTN2KI.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{chunk-D2FTTM4F.js → chunk-H4UF2I7V.js}

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

package/dist/{cli-6LCOSHMW.js → chunk-IJUZ7RV4.js}

@@ -1,18 +1,3 @@
-import {
-  SOURCE_FILE,
-  readPaths
-} from "./chunk-BK4AS2RU.js";
-import {
-  toJson
-} from "./chunk-QIEDBL4J.js";
-import "./chunk-WK2WMWTH.js";
-import "./chunk-CZ7KT452.js";
-import "./chunk-QYBAVU3P.js";
-
-// src/phone/cli.ts
-import { existsSync, readdirSync, readFileSync, writeFileSync } from "fs";
-import { join, resolve } from "path";
-
 // src/phone/judge.ts
 var EMPTY_BASELINE = { static: [], measured: [] };
 var MEDIA = /@(?:custom-)?media\b([^{;]*)/g;
@@ -133,7 +118,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);
@@ -147,103 +141,11 @@ function writeBaseline(findings, routes, note) {
   };
 }
 
-// src/phone/cli.ts
-var USAGE = "usage: craft phone-first [--config phone-first.json] [--measured <dir>] [--update-baseline] [--json]";
-function parse(args) {
-  const flags = { config: "phone-first.json", update: false, json: false };
-  for (let i = 0; i < args.length; i++) {
-    const a = args[i];
-    if (a === "--update-baseline") flags.update = true;
-    else if (a === "--json") flags.json = true;
-    else if (a === "--config" || a === "--measured") {
-      const v = args[++i];
-      if (!v || v.startsWith("--")) return `${a} needs a value`;
-      if (a === "--config") flags.config = v;
-      else flags.measured = v;
-    } else return `unknown argument ${a}`;
-  }
-  return flags;
-}
-function loadConfig(path) {
-  if (!existsSync(path)) throw new Error(`no ${path}. Write one: { "source": ["<dirs with styles and components>"], "baseline": "phone-first.baseline.json" }`);
-  const c = JSON.parse(readFileSync(path, "utf8"));
-  if (!Array.isArray(c.source) || c.source.length === 0 || c.source.some((s) => typeof s !== "string")) throw new Error(`${path}: "source" should list the folders to scan`);
-  if (c.ignore !== void 0 && (!Array.isArray(c.ignore) || c.ignore.some((s) => typeof s !== "string"))) throw new Error(`${path}: "ignore" should be a list of globs`);
-  if (c.exceptions !== void 0 && !Array.isArray(c.exceptions)) throw new Error(`${path}: "exceptions" should be a list of { "file", "reason" }`);
-  return { source: c.source, ignore: c.ignore ?? [], exceptions: c.exceptions ?? [], baseline: c.baseline ?? "phone-first.baseline.json" };
-}
-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 ?? [] };
-}
-function loadMeasured(dir) {
-  if (!existsSync(dir)) throw new Error(`--measured ${dir}: no such folder. Run the portal's phone-first specs first; they write it.`);
-  const routes = readdirSync(dir).filter((f) => f.endsWith(".json")).sort().map((f) => JSON.parse(readFileSync(join(dir, f), "utf8")));
-  if (routes.length === 0) throw new Error(`--measured ${dir}: no measured routes in it. Did the phone-first specs run?`);
-  return routes;
-}
-function runPhoneFirst(args, io) {
-  const flags = parse(args);
-  if (typeof flags === "string") {
-    io.err(`craft phone-first: ${flags}
-${USAGE}`);
-    return 2;
-  }
-  try {
-    const config = loadConfig(resolve(io.cwd, flags.config));
-    const baselinePath = resolve(io.cwd, config.baseline);
-    const baseline = loadBaseline(baselinePath);
-    const exceptionProblems = checkExceptions(config.exceptions, (f) => existsSync(resolve(io.cwd, f)));
-    const sources = config.source.filter((s2) => existsSync(resolve(io.cwd, s2)));
-    const missing = config.source.filter((s2) => !sources.includes(s2));
-    if (missing.length) throw new Error(`${flags.config}: source ${missing.join(", ")} not found`);
-    const files = readPaths(sources, io.cwd, SOURCE_FILE, void 0, config.ignore);
-    const { findings, excused } = scanPhoneFirst(files, config.exceptions);
-    const routes = flags.measured ? loadMeasured(resolve(io.cwd, flags.measured)) : null;
-    if (flags.update) {
-      const next = writeBaseline(findings, routes ?? [], baseline.note);
-      if (!routes) next.measured = baseline.measured;
-      writeFileSync(baselinePath, `${JSON.stringify(next, null, 2)}
-`);
-      io.out(`craft phone-first: wrote ${config.baseline} (${next.static.reduce((n, s2) => n + s2.count, 0)} static, ${next.measured.reduce((n, m2) => n + m2.count, 0)} measured)`);
-      return exceptionProblems.length ? 1 : 0;
-    }
-    const s = judgeStatic(findings, baseline);
-    const m = routes ? judgeMeasured(routes, baseline) : { fresh: [], stale: [], known: 0 };
-    const failed = exceptionProblems.length + s.fresh.length + s.stale.length + m.fresh.length + m.stale.length > 0;
-    if (flags.json) {
-      io.out(toJson({ pass: !failed, files: files.length, excused, routes: routes?.map((r) => r.route) ?? null, exceptionProblems, static: s, measured: m }));
-      return failed ? 1 : 0;
-    }
-    const section = (title, lines) => lines.length ? `
-${title}
-${lines.map((l) => `  ${l}`).join("\n")}` : "";
-    const known = s.known + m.known;
-    const summary = [
-      `${files.length} files${routes ? ` and ${routes.length} route${routes.length === 1 ? "" : "s"} at 375px` : ""}`,
-      excused ? `${excused} recorded exception${excused === 1 ? "" : "s"}` : null,
-      known ? `${known} known breach${known === 1 ? "" : "es"} in ${config.baseline}` : null
-    ].filter(Boolean).join(", ");
-    if (!failed) {
-      io.out(`craft phone-first: pass. ${summary}.`);
-      return 0;
-    }
-    io.err(
-      [
-        `craft phone-first: fail. ${summary}.`,
-        section("The exceptions:", exceptionProblems),
-        section("Built desktop first (write the phone as the base styles and widen with min-width; a genuine exception takes `mobile-first-ok: <reason>` on its line):", s.fresh),
-        section("Measured at 375px:", m.fresh),
-        section("The baseline claims more than is there (good: lower it, so the fix stays fixed):", [...s.stale, ...m.stale])
-      ].join("")
-    );
-    return 1;
-  } catch (error) {
-    io.err(`craft phone-first: ${error.message}`);
-    return 2;
-  }
-}
 export {
-  runPhoneFirst
+  EMPTY_BASELINE,
+  scanPhoneFirst,
+  checkExceptions,
+  judgeStatic,
+  judgeMeasured,
+  writeBaseline
 };

package/dist/{chunk-BK4AS2RU.js → chunk-LZVTN2KI.js}

@@ -392,6 +392,7 @@ Usage
   craft register brief <plain|persuasive|warm|literary> [--json]
   craft register check <file> --as <register> [--json]
   craft phone-first [--config phone-first.json] [--measured <dir>] [--update-baseline] [--json]
+  craft viewports [--url <base>] [--route <path>]... [--config viewports.json] [--out <dir>] [--captures <dir>] [--baseline <file>] [--update-baseline] [--no-sweep] [--json]
 
 scan      Markup, component code and stylesheets (source and compiled CSS).
           --staged reads the git index, for a pre-commit hook.
@@ -454,6 +455,15 @@ phone-first  The phone-first gate for a portal or app (STANDARD.md section
           cut-off title), unless phone-first.baseline.json already lists it.
           A baseline that claims more than is there fails too: it only
           shrinks. Exit 1 on a breach, 2 on bad usage.
+viewports Every viewport, for a running site (STANDARD.md section 10). Opens
+          each route at the ladder (320, 375, 390, 430, 844 x 390 landscape,
+          768, 1024, 1280, 1440, 1920) and sweeps 320 to 1920: sideways
+          scroll, text over text and a cut-off title at any width; on a
+          375 x 667 phone the main action, fixed layers, image sizes, field
+          keyboards, autocomplete and tap-to-call; landscape; line length and
+          stretched images at 1440 and 1920. Writes the measured routes for
+          craft phone-first --measured and judges them against the same
+          baseline. Needs playwright. Exit 1 on a breach, 2 on bad usage.
 
 ci options (scan, copy, audit)
   --baseline <file>     Report only findings the baseline does not already
@@ -621,7 +631,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-TMLHMNWU.js");
+    const { loadNull } = await import("./cli-EDQNTWDD.js");
     return loadNull(flags.null, cwd).brief;
   }
   return void 0;
@@ -647,34 +657,37 @@ async function compareWithCompetitor(flags, io) {
 function run(argv, io) {
   const [command, ...rest] = argv;
   if (command === "direction") {
-    return import("./cli-APYEOHFV.js").then((m) => m.runDirection(rest, io));
+    return import("./cli-YUVATZD5.js").then((m) => m.runDirection(rest, io));
   }
   if (command === "report" || command === "retrofit") {
-    return import("./cli-4LEAEOOV.js").then((m) => m.runReport(command, rest, io));
+    return import("./cli-5DONIRMR.js").then((m) => m.runReport(command, rest, io));
   }
   if (command === "register") {
     return import("./cli-VPARW6FY.js").then((m) => m.runRegister(rest, io));
   }
   if (command === "estate") {
-    return import("./cli-QAYH2OX5.js").then((m) => m.runEstate(rest, io));
+    return import("./cli-3IAIKGCP.js").then((m) => m.runEstate(rest, io));
   }
   if (command === "null") {
-    return import("./cli-TMLHMNWU.js").then((m) => m.runNull(rest, io));
+    return import("./cli-EDQNTWDD.js").then((m) => m.runNull(rest, io));
   }
   if (command === "calibrate") {
-    return import("./cli-Q5X3W6I4.js").then((m) => m.runCalibrate(rest, io));
+    return import("./cli-73JCUXAV.js").then((m) => m.runCalibrate(rest, io));
   }
   if (command === "tells" && rest[0] === "harvest") {
-    return import("./cli-TMLHMNWU.js").then((m) => m.runHarvest(rest, io)).catch((error) => {
+    return import("./cli-EDQNTWDD.js").then((m) => m.runHarvest(rest, io)).catch((error) => {
       io.err(`craft: ${error.message}`);
       return 2;
     });
   }
   if (command === "phone-first") {
-    return import("./cli-6LCOSHMW.js").then((m) => m.runPhoneFirst(rest, io));
+    return import("./cli-YHS2VPWQ.js").then((m) => m.runPhoneFirst(rest, io));
+  }
+  if (command === "viewports") {
+    return import("./viewports-cli-RYV4LDQK.js").then((m) => m.runViewports(rest, io));
   }
   if (command === "snapshot" || command === "audit") {
-    return import("./cli-WN2GHYPF.js").then((m) => m.runAudit(command, rest, io));
+    return import("./cli-EOXIJOJN.js").then((m) => m.runAudit(command, rest, io));
   }
   if (!command || command === "help" || command === "--help" || command === "-h") {
     io.out(HELP);

package/dist/{chunk-6M2LK7QE.js → chunk-RFU5CIST.js}

@@ -7,10 +7,10 @@ import {
 } from "./chunk-4LJFZH2I.js";
 import {
   loadNull
-} from "./chunk-D2FTTM4F.js";
+} from "./chunk-H4UF2I7V.js";
 import {
   parseFlags
-} from "./chunk-BK4AS2RU.js";
+} from "./chunk-LZVTN2KI.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{cli-QAYH2OX5.js → cli-3IAIKGCP.js}

@@ -4,11 +4,11 @@ import {
   formatPairs,
   loadEstate,
   runEstate
-} from "./chunk-6M2LK7QE.js";
+} from "./chunk-RFU5CIST.js";
 import "./chunk-4LJFZH2I.js";
-import "./chunk-D2FTTM4F.js";
+import "./chunk-H4UF2I7V.js";
 import "./chunk-OQXTQQAU.js";
-import "./chunk-BK4AS2RU.js";
+import "./chunk-LZVTN2KI.js";
 import "./chunk-QIEDBL4J.js";
 import "./chunk-WUACK2HX.js";
 import "./chunk-WK2WMWTH.js";

package/dist/{cli-4LEAEOOV.js → cli-5DONIRMR.js}

@@ -3,21 +3,21 @@ import {
 } from "./chunk-OKVHWXYV.js";
 import {
   merge
-} from "./chunk-XVMKZ4SM.js";
+} from "./chunk-3CD3DTEI.js";
 import "./chunk-VDUIIWG7.js";
 import "./chunk-JYNXGCYZ.js";
 import {
   SIBLING_AT,
   compareToEstate,
   loadEstate
-} from "./chunk-6M2LK7QE.js";
+} from "./chunk-RFU5CIST.js";
 import {
   PAGE_TYPES,
   validateDirection
 } from "./chunk-4LJFZH2I.js";
 import {
   loadNull
-} from "./chunk-D2FTTM4F.js";
+} from "./chunk-H4UF2I7V.js";
 import "./chunk-OQXTQQAU.js";
 import {
   COPY_FILE,
@@ -28,7 +28,7 @@ import {
   loadExceptions,
   parseFlags,
   readPaths
-} from "./chunk-BK4AS2RU.js";
+} from "./chunk-LZVTN2KI.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{cli-Q5X3W6I4.js → cli-73JCUXAV.js}

@@ -4,11 +4,11 @@ import {
 import {
   expandNullTargets,
   loadNull
-} from "./chunk-D2FTTM4F.js";
+} from "./chunk-H4UF2I7V.js";
 import "./chunk-OQXTQQAU.js";
 import {
   parseFlags
-} from "./chunk-BK4AS2RU.js";
+} from "./chunk-LZVTN2KI.js";
 import {
   toJson
 } from "./chunk-QIEDBL4J.js";

package/dist/{cli-TMLHMNWU.js → cli-EDQNTWDD.js}

@@ -9,9 +9,9 @@ import {
   runHarvest,
   runNull,
   serveDir
-} from "./chunk-D2FTTM4F.js";
+} from "./chunk-H4UF2I7V.js";
 import "./chunk-OQXTQQAU.js";
-import "./chunk-BK4AS2RU.js";
+import "./chunk-LZVTN2KI.js";
 import "./chunk-QIEDBL4J.js";
 import "./chunk-WUACK2HX.js";
 import "./chunk-WK2WMWTH.js";

package/dist/{cli-WN2GHYPF.js → cli-EOXIJOJN.js}

@@ -4,12 +4,12 @@ import {
   merge,
   resolvePages,
   runAudit
-} from "./chunk-XVMKZ4SM.js";
+} from "./chunk-3CD3DTEI.js";
 import "./chunk-VDUIIWG7.js";
 import "./chunk-JYNXGCYZ.js";
-import "./chunk-D2FTTM4F.js";
+import "./chunk-H4UF2I7V.js";
 import "./chunk-OQXTQQAU.js";
-import "./chunk-BK4AS2RU.js";
+import "./chunk-LZVTN2KI.js";
 import "./chunk-QIEDBL4J.js";
 import "./chunk-WUACK2HX.js";
 import "./chunk-WK2WMWTH.js";