@domandigital/craft 0.19.2 → 0.20.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- 95af0f3: `craft phone-first` folds digits only in an element's text, so `<h1>` stays `<h1>` in a baseline, and says how many of a breach it found ("3 of them", "2 found, the baseline allows 1") (DOM-775).
+
 ## 0.19.2
 
 ### 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-EKGHL4D2.js → chunk-3CD3DTEI.js}

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

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

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

package/dist/chunk-IJUZ7RV4.js

@@ -0,0 +1,151 @@
+// src/phone/judge.ts
+var EMPTY_BASELINE = { static: [], measured: [] };
+var MEDIA = /@(?:custom-)?media\b([^{;]*)/g;
+var CAPS_WIDTH = /\bmax-(?:device-)?width\s*:|\bwidth\s*<|>=?\s*(?:device-)?width\b/i;
+var VARIANT = /(?<![\w@-])max-(\[[^\]\s]+\]|[a-z0-9]+):/g;
+var NOT_VARIANTS = /* @__PURE__ */ new Set(["width", "height", "lines", "resolution", "zoom", "inline-size", "block-size"]);
+var OK = /mobile-first-ok\b:?(.*)/;
+function reasonOf(line) {
+  const m = line?.match(OK);
+  return m ? m[1].replace(/\*\/|-->|[{}]/g, "").trim() : null;
+}
+function scanPhoneFirst(files, exceptions = []) {
+  const excusedFiles = new Set(exceptions.filter((e) => e.reason?.trim()).map((e) => e.file));
+  const findings = [];
+  let excused = 0;
+  for (const { path, text } of files) {
+    if (excusedFiles.has(path)) continue;
+    const lines = text.split("\n");
+    const lineOf = (index) => text.slice(0, index).split("\n").length;
+    const found = [];
+    for (const m of text.matchAll(MEDIA)) {
+      if (CAPS_WIDTH.test(m[1])) found.push({ line: lineOf(m.index), what: `${m[0].slice(0, m[0].length - m[1].length)}${m[1].replace(/\s+/g, " ").trimEnd()}` });
+    }
+    for (const m of text.matchAll(VARIANT)) {
+      if (!NOT_VARIANTS.has(m[1])) found.push({ line: lineOf(m.index), what: m[0] });
+    }
+    for (const { line, what } of found.sort((a, b) => a.line - b.line)) {
+      const here = reasonOf(lines[line - 1]);
+      const above = reasonOf(lines[line - 2]);
+      if (here || above) {
+        excused++;
+        continue;
+      }
+      findings.push({ file: path, line, what: here === "" || above === "" ? `${what} (mobile-first-ok with no reason)` : what });
+    }
+  }
+  return { findings, excused };
+}
+function checkExceptions(exceptions, exists) {
+  const problems = [];
+  exceptions.forEach((e, i) => {
+    const at = `exceptions[${i}]`;
+    const x = e;
+    if (typeof x?.file !== "string" || !x.file.trim()) problems.push(`${at}: names no file`);
+    else if (typeof x.reason !== "string" || !x.reason.trim()) problems.push(`${at} (${x.file}): no reason. Say why this file needs a max-width query, or remove the exception.`);
+    else if (!exists(x.file)) problems.push(`${at}: ${x.file} is not there. Remove the exception.`);
+  });
+  return problems;
+}
+var normaliseElement = (element) => element.replace(/("[^]*)$/, (text) => text.replace(/\d+/g, "#"));
+var tally = (items, key) => {
+  const m = /* @__PURE__ */ new Map();
+  for (const item of items) {
+    const k = key(item);
+    const had = m.get(k);
+    if (had) had.count++;
+    else m.set(k, { item, count: 1 });
+  }
+  return m;
+};
+function judgeStatic(findings, baseline) {
+  const byFile = tally(findings, (f) => f.file);
+  const allowed = new Map(baseline.static.map((b) => [b.file, b.count]));
+  const fresh = [];
+  const stale = [];
+  let known = 0;
+  for (const [file, { count }] of byFile) {
+    const allow = allowed.get(file) ?? 0;
+    known += Math.min(count, allow);
+    if (count > allow) {
+      const here = findings.filter((f) => f.file === file);
+      const lead = allow ? `${file}: ${count} desktop-first rules, the baseline allows ${allow}. One of these is new:` : `${file}:`;
+      fresh.push(`${lead}
+${here.map((f) => `    line ${f.line}: ${f.what}`).join("\n")}`);
+    }
+  }
+  for (const { file, count } of baseline.static) {
+    const now = byFile.get(file)?.count ?? 0;
+    if (now < count) stale.push(`${file}: the baseline allows ${count}, there ${now === 1 ? "is" : "are"} ${now} now. Lower it to ${now}${now ? "" : " (remove the line)"}.`);
+  }
+  return { fresh, stale, known };
+}
+var measuredKey = (route, check, element) => `${route}\0${check}\0${element}`;
+function judgeMeasured(routes, baseline) {
+  const fresh = [];
+  const stale = [];
+  let known = 0;
+  const allowed = new Map(baseline.measured.map((b) => [measuredKey(b.route, b.check, b.element), b.count]));
+  const seen = /* @__PURE__ */ new Map();
+  const measured = new Set(routes.map((r) => r.route));
+  for (const { route, findings } of routes) {
+    const counted = tally(findings, (f) => measuredKey(route, f.check, normaliseElement(f.element)));
+    for (const [key, { item, count }] of counted) {
+      seen.set(key, count);
+      const allow = allowed.get(key) ?? 0;
+      known += Math.min(count, allow);
+      if (count > allow) {
+        const times = allow ? ` (${count} found, the baseline allows ${allow})` : count > 1 ? ` (${count} of them)` : "";
+        fresh.push(`${route}: ${LABEL[item.check]} ${item.element}: ${item.detail}${times}`);
+      }
+    }
+  }
+  const missing = /* @__PURE__ */ new Set();
+  for (const b of baseline.measured) {
+    const key = measuredKey(b.route, b.check, b.element);
+    if (!measured.has(b.route)) {
+      if (!missing.has(b.route)) stale.push(`${b.route}: in the baseline but not measured this run. Measure it, or remove its lines.`);
+      missing.add(b.route);
+      continue;
+    }
+    const now = seen.get(key) ?? 0;
+    if (now < b.count) stale.push(`${b.route}: ${LABEL[b.check]} ${b.element}: the baseline allows ${b.count}, ${now} found. Lower it to ${now}${now ? "" : " (remove the line)"}.`);
+  }
+  return { fresh, stale, known };
+}
+var LABEL = {
+  scroll: "scrolls sideways",
+  target: "small target",
+  field: "small field",
+  text: "small text",
+  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);
+  const measured = routes.flatMap(
+    ({ route, findings: findings2 }) => [...tally(findings2, (f) => measuredKey(route, f.check, normaliseElement(f.element))).values()].map(({ item, count }) => ({ route, check: item.check, element: normaliseElement(item.element), count }))
+  );
+  return {
+    ...note ? { note } : {},
+    static: [...byFile.values()].map(({ item, count }) => ({ file: item.file, count, found: findings.filter((f) => f.file === item.file).map((f) => f.what) })).sort((a, b) => a.file.localeCompare(b.file)),
+    measured: measured.sort((a, b) => a.route.localeCompare(b.route) || a.check.localeCompare(b.check) || a.element.localeCompare(b.element))
+  };
+}
+
+export {
+  EMPTY_BASELINE,
+  scanPhoneFirst,
+  checkExceptions,
+  judgeStatic,
+  judgeMeasured,
+  writeBaseline
+};

package/dist/{chunk-D2PEKYKH.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-GUEBFFF3.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-BZSJIUQH.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-OS5ESEJV.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-T3IA7IQK.js").then((m) => m.runEstate(rest, io));
+    return import("./cli-3IAIKGCP.js").then((m) => m.runEstate(rest, io));
   }
   if (command === "null") {
-    return import("./cli-GUEBFFF3.js").then((m) => m.runNull(rest, io));
+    return import("./cli-EDQNTWDD.js").then((m) => m.runNull(rest, io));
   }
   if (command === "calibrate") {
-    return import("./cli-VLNOQYEL.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-GUEBFFF3.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-RAH4CKYY.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-KTN5OXHZ.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-ZKZCPVQ6.js → chunk-RFU5CIST.js}

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

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

@@ -4,11 +4,11 @@ import {
   formatPairs,
   loadEstate,
   runEstate
-} from "./chunk-ZKZCPVQ6.js";
+} from "./chunk-RFU5CIST.js";
 import "./chunk-4LJFZH2I.js";
-import "./chunk-EDM4L5WJ.js";
+import "./chunk-H4UF2I7V.js";
 import "./chunk-OQXTQQAU.js";
-import "./chunk-D2PEKYKH.js";
+import "./chunk-LZVTN2KI.js";
 import "./chunk-QIEDBL4J.js";
 import "./chunk-WUACK2HX.js";
 import "./chunk-WK2WMWTH.js";

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

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

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

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

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

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

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

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