@zappie/verify 0.1.5 → 0.2.2

package/dist/index.js

@@ -11,14 +11,15 @@ import {
   stableErrorCode,
   validateConfig,
   validateLine
-} from "./chunk-JYFSFOIS.js";
+} from "./chunk-47RIF6JW.js";
 
 // src/error.ts
 var VerifyError = class extends Error {
-  constructor(code, message, hint) {
+  constructor(code, message, hint, skip = false) {
     super(message);
     this.code = code;
     this.hint = hint;
+    this.skip = skip;
     this.name = "VerifyError";
   }
 };
@@ -27,6 +28,9 @@ function assertion(condition, code, message, hint) {
     throw new VerifyError(code, message, hint);
   }
 }
+function skipCheck(code, message, hint) {
+  throw new VerifyError(code, message, hint, true);
+}
 
 // src/local-preview.ts
 import { spawn } from "child_process";
@@ -285,7 +289,7 @@ async function debugValue(page, expression) {
 }
 var mobile = { width: 390, height: 844 };
 var desktop = { width: 1440, height: 900 };
-async function applyPhoneProfile(page) {
+async function applyPhoneProfile(page, rate) {
   const cdp = await page.context().newCDPSession(page);
   await cdp.send("Network.enable");
   await cdp.send("Network.setCacheDisabled", { cacheDisabled: true });
@@ -296,7 +300,7 @@ async function applyPhoneProfile(page) {
     uploadThroughput: 1e5,
     connectionType: "cellular3g"
   });
-  await cdp.send("Emulation.setCPUThrottlingRate", { rate: 4 });
+  await cdp.send("Emulation.setCPUThrottlingRate", { rate });
   return cdp;
 }
 
@@ -391,6 +395,161 @@ async function installFault(page, fault) {
       await route.continue();
     });
   }
+  if (fault === "extra-h1") {
+    await page.addInitScript(() => {
+      new MutationObserver(() => {
+        const main = document.querySelector("main");
+        if (main && !document.querySelector("[data-verify-extra-h1]")) {
+          const heading = document.createElement("h1");
+          heading.setAttribute("data-verify-extra-h1", "");
+          heading.textContent = "Second heading";
+          main.append(heading);
+        }
+      }).observe(document, { childList: true, subtree: true });
+    });
+  }
+  if (fault === "overlay-markers") {
+    await page.addInitScript(() => {
+      new MutationObserver(() => {
+        for (const node of document.querySelectorAll(
+          "[data-zappie-cart-trigger]:not([data-zappie-overlay-trigger])"
+        )) {
+          node.setAttribute("data-zappie-overlay-trigger", "bag");
+        }
+        for (const node of document.querySelectorAll(
+          '[role="dialog"]:not([data-zappie-overlay])'
+        )) {
+          if (node.textContent?.includes("Your cart")) {
+            node.setAttribute("data-zappie-overlay", "bag");
+          }
+        }
+      }).observe(document, { childList: true, subtree: true });
+    });
+  }
+  if (fault === "bag-on-tap") {
+    let release = () => {
+    };
+    let tapped = Promise.resolve();
+    const reset2 = () => {
+      release();
+      tapped = new Promise((resolve) => {
+        release = resolve;
+      });
+    };
+    reset2();
+    page.on("framenavigated", (frame) => {
+      if (frame === page.mainFrame()) {
+        reset2();
+      }
+    });
+    await page.exposeFunction("__verifyTapped", () => release());
+    await page.addInitScript(() => {
+      document.addEventListener(
+        "click",
+        () => {
+          void window.__verifyTapped?.();
+        },
+        { capture: true }
+      );
+    });
+    await page.route(
+      /\/assets\/cart-drawer-[^/]*\.js(?:\?|$)/,
+      async (route) => {
+        await tapped;
+        await route.continue().catch(() => {
+        });
+      }
+    );
+  }
+  if (fault === "one-slow-open") {
+    await page.addInitScript(() => {
+      document.addEventListener(
+        "click",
+        (event) => {
+          if (!(event.target instanceof Element) || !event.target.closest("[data-zappie-overlay-trigger]")) {
+            return;
+          }
+          const taps = Number(sessionStorage.getItem("__verifyTaps") ?? 0);
+          sessionStorage.setItem("__verifyTaps", String(taps + 1));
+          if (taps % 3 === 0) {
+            const until = performance.now() + 250;
+            while (performance.now() < until) {
+            }
+          }
+        },
+        { capture: true }
+      );
+    });
+  }
+  if (fault === "late-hydration") {
+    await page.route(
+      /\/assets\/entry\.client-[^/]*\.js(?:\?|$)/,
+      async (route) => {
+        const response = await route.fetch();
+        const headers = Object.fromEntries(
+          Object.entries(response.headers()).filter(
+            ([name]) => !["content-encoding", "content-length"].includes(name)
+          )
+        );
+        await route.fulfill({
+          response,
+          headers,
+          body: `await new Promise((resolve) => setTimeout(resolve, 2000));
+${await response.text()}`
+        });
+      }
+    );
+  }
+  if (fault === "late-idle") {
+    await page.addInitScript(() => {
+      const request = window.requestIdleCallback?.bind(window);
+      const cancel = window.cancelIdleCallback?.bind(window);
+      if (!request || !cancel) {
+        return;
+      }
+      const handles = /* @__PURE__ */ new Map();
+      let next = 1;
+      window.requestIdleCallback = (callback, options) => {
+        const handle = next++;
+        handles.set(
+          handle,
+          window.setTimeout(() => {
+            handles.set(handle, -request(callback, options));
+          }, 1500)
+        );
+        return handle;
+      };
+      window.cancelIdleCallback = (handle) => {
+        const scheduled = handles.get(handle);
+        if (scheduled === void 0) {
+          return;
+        }
+        if (scheduled < 0) {
+          cancel(-scheduled);
+        } else {
+          window.clearTimeout(scheduled);
+        }
+        handles.delete(handle);
+      };
+    });
+  }
+  if (fault === "no-overlay-markers") {
+    await page.addInitScript(() => {
+      new MutationObserver(() => {
+        for (const node of document.querySelectorAll(
+          "[data-zappie-overlay-trigger], [data-zappie-overlay]"
+        )) {
+          node.removeAttribute("data-zappie-overlay-trigger");
+          node.removeAttribute("data-zappie-overlay");
+        }
+      }).observe(document, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["data-zappie-overlay-trigger", "data-zappie-overlay"]
+      });
+    });
+  }
   if (fault === "quick-add-via-item") {
     await page.addInitScript(() => {
       const removeQuickAdds = () => {
@@ -1319,6 +1478,115 @@ var v10 = {
 
 // src/checks/v13-accessibility.ts
 import AxeBuilder from "@axe-core/playwright";
+
+// src/checks/semantics.ts
+var TOUCH_TARGET_PX = 44;
+async function semanticFindings(page, scope) {
+  return page.evaluate(
+    ({ scope: scope2, minimum }) => {
+      const findings = [];
+      const rendered = (element) => element.checkVisibility() && !element.closest('[aria-hidden="true"]');
+      const describe = (element) => {
+        const id = element.id ? `#${element.id}` : "";
+        const text = (element.textContent ?? "").trim().replace(/\s+/g, " ");
+        return `<${element.tagName.toLowerCase()}${id}>${text ? ` "${text.slice(0, 40)}"` : ""}`;
+      };
+      if (scope2.page) {
+        const main = [
+          ...document.querySelectorAll('main, [role="main"]')
+        ].filter(rendered);
+        if (main.length === 0) {
+          findings.push({
+            code: "main_landmark_missing",
+            message: "The page has no main landmark"
+          });
+        }
+        const headings = [
+          ...document.querySelectorAll('h1, [role="heading"][aria-level="1"]')
+        ].filter(
+          (element) => rendered(element) && !element.closest('[role="dialog"], dialog')
+        );
+        if (headings.length !== 1) {
+          findings.push({
+            code: "h1_count",
+            message: `The page has ${headings.length} h1 headings${headings.length > 1 ? `: ${headings.map(describe).join(", ")}` : ""}`
+          });
+        }
+      }
+      const named = (element) => {
+        const label2 = element.getAttribute("aria-label")?.trim();
+        if (label2) {
+          return true;
+        }
+        const ids = element.getAttribute("aria-labelledby")?.split(/\s+/) ?? [];
+        return ids.some(
+          (id) => Boolean(document.getElementById(id)?.textContent?.trim())
+        );
+      };
+      for (const dialog of document.querySelectorAll(
+        '[role="dialog"], [role="alertdialog"], dialog[open]'
+      )) {
+        if (rendered(dialog) && !named(dialog)) {
+          findings.push({
+            code: "dialog_name_missing",
+            message: `${describe(dialog)} has no accessible name`
+          });
+        }
+      }
+      for (const element of document.querySelectorAll("[tabindex]")) {
+        if (Number(element.getAttribute("tabindex")) > 0) {
+          findings.push({
+            code: "positive_tabindex",
+            message: `${describe(element)} has tabindex="${element.getAttribute("tabindex")}"`
+          });
+        }
+      }
+      if (scope2.phone) {
+        const controls = document.querySelectorAll(
+          'button, a[href], input:not([type="hidden"]), select, textarea, summary, [role="button"], [role="link"], [role="tab"], [role="checkbox"], [role="radio"], [role="switch"], [role="menuitem"], [role="option"]'
+        );
+        const small = [];
+        for (const element of controls) {
+          if (!rendered(element) || element.matches(":disabled") || // Inline text links sit in a line of text; WCAG exempts them.
+          element.matches("a") && getComputedStyle(element).display === "inline") {
+            continue;
+          }
+          const box = element.getBoundingClientRect();
+          const label2 = element.closest("label")?.getBoundingClientRect();
+          if (box.width <= 2 || box.height <= 2) {
+            if (!label2) {
+              continue;
+            }
+          }
+          const width = Math.max(box.width, label2?.width ?? 0);
+          const height = Math.max(box.height, label2?.height ?? 0);
+          if (width + 0.5 < minimum || height + 0.5 < minimum) {
+            small.push(
+              `${describe(element)} ${Math.round(width)}\xD7${Math.round(height)} px`
+            );
+          }
+        }
+        if (small.length > 0) {
+          findings.push({
+            code: "touch_target_too_small",
+            message: `Controls under ${minimum}\xD7${minimum} px on a phone: ${small.slice(0, 8).join(", ")}${small.length > 8 ? ` and ${small.length - 8} more` : ""}`
+          });
+        }
+      }
+      return findings;
+    },
+    { scope, minimum: TOUCH_TARGET_PX }
+  );
+}
+var semanticHints = {
+  main_landmark_missing: "Wrap the page's main content in a <main> element.",
+  h1_count: "Give each page exactly one h1 that names it.",
+  dialog_name_missing: "Name every dialog with aria-labelledby pointing at its title, or with aria-label.",
+  positive_tabindex: "Remove positive tabindex values. Use the DOM order, or tabindex 0 and -1.",
+  touch_target_too_small: "Make every menu control at least 44\xD744 px on a phone, with padding or a larger hit area."
+};
+
+// src/checks/v13-accessibility.ts
 async function severeViolations(page) {
   const analysis = await new AxeBuilder({ page }).analyze();
   return analysis.violations.filter(
@@ -1343,6 +1611,16 @@ async function controlsAreReachable(page, selectors) {
   }
   return false;
 }
+async function holdsFocus(target2) {
+  for (let attempt = 0; attempt < 20; attempt++) {
+    const inside = await target2.evaluate((node) => node.contains(document.activeElement)).catch(() => false);
+    if (inside) {
+      return true;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+  return false;
+}
 var v13 = {
   id: "V13",
   title: "Accessibility",
@@ -1352,6 +1630,10 @@ var v13 = {
     await open(page);
     await applyPageFault(page, fault);
     const violations = await severeViolations(page);
+    const semantics = await semanticFindings(page, {
+      page: true,
+      phone: viewport.width < 768
+    });
     const item = sortedItems(await readMenu(options)).find(
       (entry) => entry.isAvailable
     );
@@ -1361,11 +1643,25 @@ var v13 = {
       "No available item can be opened for accessibility checks",
       "Keep one available item in the test menu."
     );
-    await page.locator(`[data-zappie-item="${item.id}"]`).first().locator("xpath=..").getByRole("link", { name: "View details" }).click();
+    const card = page.locator(`[data-zappie-item="${item.id}"]`).first().locator("xpath=..");
+    await card.getByRole("link", { name: "View details" }).click();
     violations.push(...await severeViolations(page));
+    semantics.push(
+      ...await semanticFindings(page, { page: false, phone: false })
+    );
     await page.getByRole("button", { name: "Close item" }).click();
-    await page.locator("[data-zappie-cart-trigger]").first().click();
+    if (!await holdsFocus(card)) {
+      semantics.push({
+        code: "focus_not_returned",
+        message: "Focus did not return to the item card after the item closed"
+      });
+    }
+    const cartTrigger = page.locator("[data-zappie-cart-trigger]").first();
+    await cartTrigger.click();
     violations.push(...await severeViolations(page));
+    semantics.push(
+      ...await semanticFindings(page, { page: false, phone: false })
+    );
     const message = violations.flatMap(
       (entry) => entry.nodes.map((node) => `${entry.id}: ${node.target.join(" ")}`)
     ).join(", ");
@@ -1376,6 +1672,25 @@ var v13 = {
       "Fix every serious or critical axe violation in the menu, item dialog, cart and order page."
     );
     await page.keyboard.press("Escape");
+    if (!await holdsFocus(cartTrigger)) {
+      semantics.push({
+        code: "focus_not_returned",
+        message: "Focus did not return to the cart control after the cart closed"
+      });
+    }
+    const [semantic] = semantics;
+    assertion(
+      !semantic,
+      semantic?.code ?? "semantics",
+      semantics.map(({ message: message2 }) => message2).join(". "),
+      [
+        ...new Set(
+          semantics.map(
+            ({ code }) => semanticHints[code] ?? "Return focus to the control that opened an overlay when it closes."
+          )
+        )
+      ].join(" ")
+    );
     await context.addCookies([
       {
         name: "zappie_session",
@@ -1421,9 +1736,9 @@ var v14 = {
   id: "V14",
   title: "Performance budget",
   viewports: "mobile",
-  async run({ page, metrics, fault }, viewport) {
+  async run({ page, metrics, fault, cpuThrottlingRate: cpuThrottlingRate2 }, viewport) {
     await page.setViewportSize(viewport);
-    const cdp = await applyPhoneProfile(page);
+    const cdp = await applyPhoneProfile(page, cpuThrottlingRate2);
     await page.addInitScript(() => {
       const state = { lcp: 0, cls: 0 };
       Object.assign(window, { __zappiePerformance: state });
@@ -1451,24 +1766,27 @@ var v14 = {
     await page.waitForTimeout(500);
     const values = await page.evaluate(async () => {
       const observed = window.__zappiePerformance ?? { lcp: 0, cls: 0 };
-      const scripts = performance.getEntriesByType("resource").filter((entry) => entry.name.endsWith(".js"));
-      const sizes = await Promise.all(
-        scripts.map(async (entry) => {
-          if (typeof CompressionStream === "undefined") {
-            const timing = entry;
-            return timing.encodedBodySize || timing.transferSize;
-          }
-          const response = await fetch(entry.name);
-          const compressed = response.body?.pipeThrough(
-            new CompressionStream("gzip")
-          );
-          return compressed ? (await new Response(compressed).arrayBuffer()).byteLength : 0;
-        })
-      );
-      const js = sizes.reduce((sum, size) => sum + size, 0);
-      return { ...observed, js };
+      const resources = performance.getEntriesByType("resource");
+      const gzipped = async (entry) => {
+        if (typeof CompressionStream === "undefined") {
+          const timing = entry;
+          return timing.encodedBodySize || timing.transferSize;
+        }
+        const response = await fetch(entry.name);
+        const compressed = response.body?.pipeThrough(
+          new CompressionStream("gzip")
+        );
+        return compressed ? (await new Response(compressed).arrayBuffer()).byteLength : 0;
+      };
+      const total = async (extension) => (await Promise.all(
+        resources.filter(
+          (entry) => new URL(entry.name).pathname.endsWith(extension)
+        ).map(gzipped)
+      )).reduce((sum, size) => sum + size, 0);
+      return { ...observed, js: await total(".js"), css: await total(".css") };
     });
     metrics.menuJsKbGz = Math.round(values.js / 1024 * 10) / 10;
+    metrics.menuCssKbGz = Math.round(values.css / 1024 * 10) / 10;
     metrics.lcpMs = Math.round(values.lcp);
     metrics.cls = Math.round(values.cls * 1e3) / 1e3;
     assertion(
@@ -1500,9 +1818,9 @@ var v15 = {
   id: "V15",
   title: "Tappable product cards",
   viewports: "mobile",
-  async run({ page, metrics }, viewport) {
+  async run({ page, metrics, cpuThrottlingRate: cpuThrottlingRate2 }, viewport) {
     await page.setViewportSize(viewport);
-    const cdp = await applyPhoneProfile(page);
+    const cdp = await applyPhoneProfile(page, cpuThrottlingRate2);
     try {
       await page.goto("/", { waitUntil: "domcontentloaded" });
       await cdp.send("Network.setCacheDisabled", { cacheDisabled: false });
@@ -1617,6 +1935,372 @@ function itemRouteModule(itemPath) {
   return route ? new URL(route.module, location.href).pathname : void 0;
 }
 
+// src/checks/overlays.ts
+var OVERLAY_NAMES = ["bag", "branch", "search", "item"];
+var IDLE_FALLBACK_MS = 2e3;
+var NETWORK_QUIET_MS = 500;
+var SETTLE_ROUNDS = 3;
+var SETTLE_TIMEOUT_MS = 15e3;
+var triggerSelector = (name) => `[data-zappie-overlay-trigger="${name}"]`;
+var overlaySelector = (name) => `[data-zappie-overlay="${name}"]`;
+var markersHint = 'Add data-zappie-overlay-trigger="bag", "branch", "search" or "item" to each control that opens that overlay, and data-zappie-overlay with the same name on its role="dialog" element. Until the menu has them, this check is skipped.';
+async function overlayTriggers(page) {
+  const found = [];
+  for (const name of OVERLAY_NAMES) {
+    const trigger = page.locator(`${triggerSelector(name)}:visible`).first();
+    if (await trigger.count() > 0) {
+      found.push({ name, trigger });
+    }
+  }
+  return found;
+}
+function skipWithoutTriggers(found) {
+  if (found.length === 0) {
+    skipCheck(
+      "overlay_markers_missing",
+      "The menu has no data-zappie-overlay-trigger controls",
+      markersHint
+    );
+  }
+}
+function armOverlayTimer(page, name, timeoutMs) {
+  return page.evaluate(
+    ({ selector, timeout }) => {
+      const state = {};
+      Object.assign(window, { __zappieOverlayTimer: state });
+      const visible = () => {
+        const node = document.querySelector(selector);
+        if (!(node instanceof HTMLElement)) {
+          return false;
+        }
+        const box = node.getBoundingClientRect();
+        return box.width > 0 && box.height > 0 && node.checkVisibility();
+      };
+      document.addEventListener(
+        "click",
+        (event) => {
+          const started = event.timeStamp;
+          const frame = () => {
+            if (visible()) {
+              requestAnimationFrame(() => {
+                state.ms = performance.now() - started;
+              });
+              return;
+            }
+            if (performance.now() - started > timeout) {
+              state.ms = -1;
+              return;
+            }
+            requestAnimationFrame(frame);
+          };
+          requestAnimationFrame(frame);
+        },
+        { capture: true, once: true }
+      );
+    },
+    { selector: overlaySelector(name), timeout: timeoutMs }
+  );
+}
+async function readOverlayTimer(page) {
+  const handle = await page.waitForFunction(
+    () => window.__zappieOverlayTimer?.ms
+  );
+  const ms = await handle.jsonValue();
+  return ms < 0 ? void 0 : ms;
+}
+async function overlayIsOpen(page, name) {
+  return page.locator(`${overlaySelector(name)}:visible`).first().isVisible().catch(() => false);
+}
+function watchNetwork(page) {
+  const inflight = /* @__PURE__ */ new Set();
+  const activity = { at: Date.now(), requests: 0 };
+  const started = (request) => {
+    inflight.add(request);
+    activity.at = Date.now();
+    activity.requests++;
+  };
+  const ended = (request) => {
+    inflight.delete(request);
+    activity.at = Date.now();
+  };
+  page.on("request", started);
+  page.on("requestfinished", ended);
+  page.on("requestfailed", ended);
+  return {
+    get requests() {
+      return activity.requests;
+    },
+    /** Resolves once no request has been in flight for 500 ms, or at the deadline. */
+    async quiet(deadline) {
+      for (; ; ) {
+        const now = Date.now();
+        if (now >= deadline) {
+          return;
+        }
+        if (inflight.size === 0 && now - activity.at >= NETWORK_QUIET_MS) {
+          return;
+        }
+        await new Promise((resolve) => setTimeout(resolve, 50));
+      }
+    },
+    /** Starts the quiet window again from now. */
+    restart() {
+      activity.at = Date.now();
+    },
+    stop() {
+      page.off("request", started);
+      page.off("requestfinished", ended);
+      page.off("requestfailed", ended);
+    }
+  };
+}
+function hydrated() {
+  const nodes = [
+    document.querySelector("[data-zappie-item]"),
+    ...document.querySelectorAll("[data-zappie-overlay-trigger]")
+  ];
+  return nodes.every(
+    (node) => node !== null && Object.keys(node).some(
+      (key) => key.startsWith("__reactProps$") || key.startsWith("__reactFiber$")
+    )
+  );
+}
+async function openSettledMenu(page) {
+  const network = watchNetwork(page);
+  try {
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await page.locator("[data-zappie-item]").first().waitFor();
+    const deadline = Date.now() + SETTLE_TIMEOUT_MS;
+    const remaining = () => Math.max(deadline - Date.now(), 1);
+    await page.waitForFunction(hydrated, null, { timeout: remaining() }).catch(() => void 0);
+    await page.waitForLoadState("load", { timeout: remaining() }).catch(() => void 0);
+    network.restart();
+    await network.quiet(deadline);
+    for (let round = 0; round < SETTLE_ROUNDS; round++) {
+      const before = network.requests;
+      await page.evaluate(
+        ({ fallback, remaining: remaining2 }) => new Promise((resolve) => {
+          window.setTimeout(resolve, remaining2);
+          const idle = (then) => {
+            if (typeof window.requestIdleCallback === "function") {
+              window.requestIdleCallback(() => then());
+            } else {
+              window.setTimeout(then, fallback);
+            }
+          };
+          idle(() => idle(resolve));
+        }),
+        { fallback: IDLE_FALLBACK_MS, remaining: remaining() }
+      );
+      await network.quiet(deadline);
+      if (network.requests === before || Date.now() >= deadline) {
+        return;
+      }
+    }
+  } finally {
+    network.stop();
+  }
+}
+
+// src/checks/v16-overlays-open-quickly.ts
+var OVERLAY_OPEN_BUDGET_MS = 100;
+var OVERLAY_OPEN_SAMPLES = 3;
+var OPEN_TIMEOUT_MS = 5e3;
+var median = (values) => {
+  const sorted = [...values].sort((a, b) => a - b);
+  return sorted[Math.floor(sorted.length / 2)];
+};
+var v16 = {
+  id: "V16",
+  title: "Overlays open quickly",
+  viewports: "mobile",
+  async run({ page, metrics, cpuThrottlingRate: cpuThrottlingRate2 }, viewport) {
+    await page.setViewportSize(viewport);
+    const cdp = await applyPhoneProfile(page, cpuThrottlingRate2);
+    try {
+      await openSettledMenu(page);
+      const names = (await overlayTriggers(page)).map(({ name }) => name);
+      skipWithoutTriggers(names);
+      await cdp.send("Network.setCacheDisabled", { cacheDisabled: false });
+      const timings = {};
+      const samples = {};
+      const unopened = [];
+      for (const name of names) {
+        const opens = [];
+        for (let sample = 0; sample < OVERLAY_OPEN_SAMPLES; sample++) {
+          await openSettledMenu(page);
+          const trigger = page.locator(`${triggerSelector(name)}:visible`).first();
+          await trigger.evaluate(
+            (node) => node.scrollIntoView({ block: "center", inline: "nearest" })
+          );
+          await armOverlayTimer(page, name, OPEN_TIMEOUT_MS);
+          await trigger.click({ noWaitAfter: true });
+          const ms = await readOverlayTimer(page);
+          if (ms === void 0) {
+            break;
+          }
+          opens.push(Math.round(ms));
+        }
+        if (opens.length < OVERLAY_OPEN_SAMPLES) {
+          unopened.push(name);
+        } else {
+          samples[name] = opens;
+          timings[name] = median(opens);
+        }
+      }
+      metrics.overlayOpenMs = timings;
+      metrics.overlayOpenSamplesMs = samples;
+      assertion(
+        unopened.length === 0,
+        "overlay_not_opened",
+        `No data-zappie-overlay painted after tapping ${unopened.map((name) => `the ${name} trigger`).join(", ")}`,
+        `Put data-zappie-overlay with the trigger's name on the role="dialog" element that the trigger opens.`
+      );
+      const slow = Object.entries(timings).filter(
+        ([, ms]) => ms > OVERLAY_OPEN_BUDGET_MS
+      );
+      assertion(
+        slow.length === 0,
+        "overlay_open_too_slow",
+        `Overlays took longer than ${OVERLAY_OPEN_BUDGET_MS} ms to paint, as the median of ${OVERLAY_OPEN_SAMPLES} opens: ${slow.map(([name, ms]) => `${name} ${ms} ms (${samples[name].join(", ")} ms)`).join(", ")}`,
+        "Load overlay code with deferred() from @zappie/foundations, spread useIntentPreload on the trigger, and keep work out of the first render so the overlay paints within 100 ms of the tap."
+      );
+    } finally {
+      await cdp.detach();
+    }
+  }
+};
+
+// src/checks/v17-overlay-focus.ts
+var focusInside = (page, name) => page.evaluate(
+  (selector) => Boolean(document.activeElement?.closest(selector)) || // A native modal dialog keeps focus in its top layer even when the element itself is the dialog.
+  document.activeElement === document.querySelector(selector),
+  overlaySelector(name)
+);
+async function eventually(check, timeoutMs = 1e3) {
+  const deadline = Date.now() + timeoutMs;
+  for (; ; ) {
+    if (await check()) {
+      return true;
+    }
+    if (Date.now() > deadline) {
+      return false;
+    }
+    await new Promise((resolve) => setTimeout(resolve, 50));
+  }
+}
+var settlesInside = (page, name) => eventually(() => focusInside(page, name), 300);
+var scrollLocked = (page) => page.evaluate(() => {
+  const root = document.scrollingElement ?? document.documentElement;
+  if (root.scrollHeight <= window.innerHeight) {
+    return true;
+  }
+  const held = (element) => {
+    const style = getComputedStyle(element);
+    return ["hidden", "clip"].includes(style.overflowY) || ["hidden", "clip"].includes(style.overflow) || style.position === "fixed";
+  };
+  return held(document.documentElement) || held(document.body);
+});
+async function checkOverlay(page, name) {
+  await openSettledMenu(page);
+  const trigger = page.locator(`${triggerSelector(name)}:visible`).first();
+  await trigger.focus();
+  await page.keyboard.press("Enter");
+  if (!await eventually(() => overlayIsOpen(page, name), 5e3)) {
+    return [
+      {
+        code: "overlay_not_opened",
+        message: `Enter on the ${name} trigger did not open its data-zappie-overlay`,
+        hint: "Open the overlay from the keyboard as well as by tap, and mark its dialog with data-zappie-overlay."
+      }
+    ];
+  }
+  const findings = [];
+  if (!await eventually(() => focusInside(page, name))) {
+    findings.push({
+      code: "overlay_focus_not_moved",
+      message: `Focus stayed outside the ${name} overlay after it opened`,
+      hint: "Move focus into the overlay when it opens. Overlay from @zappie/foundations does this."
+    });
+  } else {
+    const stops = await page.locator(overlaySelector(name)).first().evaluate(
+      (node) => node.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      ).length
+    );
+    let escaped = false;
+    for (let index = 0; index < Math.min(stops + 2, 30) && !escaped; index++) {
+      await page.keyboard.press("Tab");
+      escaped = !await settlesInside(page, name);
+    }
+    if (!escaped) {
+      await page.keyboard.press("Shift+Tab");
+      escaped = !await settlesInside(page, name);
+    }
+    if (escaped) {
+      findings.push({
+        code: "overlay_focus_escaped",
+        message: `Tab moved focus out of the open ${name} overlay`,
+        hint: "Keep Tab and Shift+Tab inside the overlay while it is open. Overlay from @zappie/foundations traps focus."
+      });
+    }
+  }
+  if (!await scrollLocked(page)) {
+    findings.push({
+      code: "overlay_scroll_unlocked",
+      message: `The page behind the open ${name} overlay can still scroll`,
+      hint: "Lock page scroll while the overlay is open. Overlay from @zappie/foundations does this."
+    });
+  }
+  await page.keyboard.press("Escape");
+  if (!await eventually(async () => !await overlayIsOpen(page, name))) {
+    findings.push({
+      code: "overlay_escape_ignored",
+      message: `Escape did not close the ${name} overlay`,
+      hint: "Close the overlay on Escape."
+    });
+    return findings;
+  }
+  const returned = await eventually(
+    () => page.evaluate(
+      (selector) => Boolean(document.activeElement?.closest(selector)),
+      triggerSelector(name)
+    )
+  );
+  if (!returned) {
+    findings.push({
+      code: "overlay_focus_not_returned",
+      message: `Focus did not return to the ${name} trigger after the overlay closed`,
+      hint: "Return focus to the control that opened the overlay when it closes. Overlay from @zappie/foundations does this."
+    });
+  }
+  return findings;
+}
+var v17 = {
+  id: "V17",
+  title: "Overlays manage focus",
+  viewports: "mobile",
+  async run({ page }, viewport) {
+    await page.setViewportSize(viewport);
+    await page.goto("/", { waitUntil: "domcontentloaded" });
+    await page.locator("[data-zappie-item]").first().waitFor();
+    const names = (await overlayTriggers(page)).map(({ name }) => name);
+    skipWithoutTriggers(names);
+    const findings = [];
+    for (const name of names) {
+      findings.push(...await checkOverlay(page, name));
+    }
+    const [first] = findings;
+    if (first) {
+      throw new VerifyError(
+        first.code,
+        findings.map(({ message }) => message).join(". "),
+        [...new Set(findings.map(({ hint }) => hint))].join(" ")
+      );
+    }
+  }
+};
+
 // src/checks/index.ts
 var checks = [
   v01,
@@ -1630,7 +2314,9 @@ var checks = [
   v10,
   v13,
   v14,
-  v15
+  v15,
+  v16,
+  v17
 ];
 var blocked = [
   [
@@ -1676,6 +2362,60 @@ function skippedChecks(suite) {
   ];
 }
 
+// src/cpu.ts
+var REFERENCE_CPU_BENCHMARK = 26e3;
+var REFERENCE_CPU_THROTTLING_RATE = 4;
+var MIN_RATE = 1;
+var MAX_RATE = 8;
+var ROUNDS = 5;
+var ROUND_MS = 100;
+function cpuThrottlingRate(benchmark) {
+  if (!Number.isFinite(benchmark) || benchmark <= 0) {
+    return REFERENCE_CPU_THROTTLING_RATE;
+  }
+  const rate = REFERENCE_CPU_THROTTLING_RATE * benchmark / REFERENCE_CPU_BENCHMARK;
+  return Math.round(Math.min(Math.max(rate, MIN_RATE), MAX_RATE) * 10) / 10;
+}
+async function benchmarkCpu(browser) {
+  const context = await browser.newContext();
+  try {
+    const page = await context.newPage();
+    return await page.evaluate(
+      ({ rounds, roundMs }) => {
+        const work = () => {
+          let text = "";
+          for (let index = 0; index < 500; index++) {
+            text += String.fromCharCode(97 + index % 26);
+          }
+          const values = Array.from(
+            { length: 500 },
+            (_, index) => index * 7919 % 500
+          );
+          values.sort((a, b) => a - b);
+          return text.length + values[0];
+        };
+        const scores = [];
+        let sink = 0;
+        for (let round = 0; round < rounds; round++) {
+          const started = performance.now();
+          let iterations = 0;
+          while (performance.now() - started < roundMs) {
+            sink += work();
+            iterations++;
+          }
+          scores.push(iterations * 1e3 / (performance.now() - started));
+        }
+        scores.sort((a, b) => a - b);
+        window.__verifySink = sink;
+        return Math.round(scores[Math.floor(scores.length / 2)]);
+      },
+      { rounds: ROUNDS, roundMs: ROUND_MS }
+    );
+  } finally {
+    await context.close();
+  }
+}
+
 // src/report.ts
 import { createPrivateKey, randomUUID, sign } from "crypto";
 var REPORT_SCHEMA = "https://registry.zappie.ai/v1/schema/verify-report.json";
@@ -1762,7 +2502,7 @@ async function reset(options) {
 }
 
 // src/version.ts
-var PACKAGE_VERSION = true ? "0.1.5" : "0.0.0-development";
+var PACKAGE_VERSION = true ? "0.2.2" : "0.0.0-development";
 
 // src/runner.ts
 var VERSION = PACKAGE_VERSION;
@@ -1811,7 +2551,7 @@ async function execute(check, run2) {
       message: failure instanceof Error ? failure.message : String(failure),
       hint: `Fix the failure in ${check.id} (${check.title.toLowerCase()}) and rerun verify.`
     };
-    if (error.code === "dependency_blocked") {
+    if (error.code === "dependency_blocked" || failure instanceof VerifyError && failure.skip) {
       return {
         id: check.id,
         title: check.title,
@@ -1853,12 +2593,29 @@ async function runVerify(options, fault) {
   }
   const started = Date.now();
   const browser = await chromium.launch();
+  const cpuBenchmark = await benchmarkCpu(browser).catch(() => void 0);
+  const throttlingRate = cpuBenchmark === void 0 ? REFERENCE_CPU_THROTTLING_RATE : cpuThrottlingRate(cpuBenchmark);
   const context = await browser.newContext(browserOptions(options));
   if (options.standInForPlatform) {
     await context.route(
       "**/_zappie/view",
       (route) => route.fulfill({ status: 204 })
     );
+    await context.route(
+      (url) => url.pathname === "/_zappie/session",
+      async (route) => {
+        const cookie = await route.request().headerValue("cookie") ?? "";
+        const signedIn = cookie.split(";").some((part) => part.trim() === "zappie_session=signed");
+        await route.fulfill({
+          status: 200,
+          contentType: "application/json",
+          headers: { "cache-control": "no-store" },
+          body: JSON.stringify({
+            customer: signedIn ? { id: "customer_verify", given_name: "Test" } : null
+          })
+        });
+      }
+    );
   }
   await context.tracing.start({ screenshots: true, snapshots: true });
   const page = await context.newPage();
@@ -1871,6 +2628,7 @@ async function runVerify(options, fault) {
     context,
     page,
     metrics,
+    cpuThrottlingRate: throttlingRate,
     ...fault ? { fault } : {}
   };
   const results = [await reset(options)];
@@ -1899,7 +2657,9 @@ async function runVerify(options, fault) {
         runner: options.runner ?? "cli",
         verifyVersion: VERSION,
         sdkVersion,
-        browser: `chromium ${browser.version()}`
+        browser: `chromium ${browser.version()}`,
+        ...cpuBenchmark === void 0 ? {} : { cpuBenchmark },
+        cpuThrottlingRate: throttlingRate
       },
       startedAt: new Date(started).toISOString(),
       durationMs: Date.now() - started,
@@ -1971,12 +2731,64 @@ function normalizeUrl(value) {
   }
 }
 
+// src/regression.ts
+var DEFAULT_REGRESSION_THRESHOLDS = {
+  menuJsKbGz: { relative: 0.05, absolute: 2 },
+  menuCssKbGz: { relative: 0.05, absolute: 1 },
+  lcpMs: { relative: 0.1, absolute: 150 },
+  cls: { relative: 0, absolute: 0.02 },
+  productCardTappableMs: { relative: 0.1, absolute: 150 },
+  productCardOpenMs: { relative: 0.15, absolute: 30 },
+  overlayOpenMs: { relative: 0.15, absolute: 20 }
+};
+function flatten(metrics) {
+  const values = /* @__PURE__ */ new Map();
+  for (const [key, value] of Object.entries(metrics)) {
+    if (key === "overlayOpenMs" && value && typeof value === "object") {
+      for (const [name, ms] of Object.entries(value)) {
+        if (Number.isFinite(ms)) {
+          values.set(`overlayOpenMs.${name}`, {
+            kind: "overlayOpenMs",
+            value: ms
+          });
+        }
+      }
+    } else if (key in DEFAULT_REGRESSION_THRESHOLDS && typeof value === "number" && Number.isFinite(value)) {
+      values.set(key, { kind: key, value });
+    }
+  }
+  return values;
+}
+function findRegressions(baseline, head, thresholds = {}) {
+  const limits = { ...DEFAULT_REGRESSION_THRESHOLDS, ...thresholds };
+  const current = flatten(head.metrics);
+  const regressions = [];
+  for (const [metric, { kind, value: base }] of flatten(baseline.metrics)) {
+    const { relative, absolute } = limits[kind];
+    const allowed = base + Math.max(absolute, relative * base);
+    const value = current.get(metric)?.value;
+    if (value === void 0 || value > allowed) {
+      regressions.push({
+        metric,
+        base,
+        head: value,
+        allowed: Math.round(allowed * 1e3) / 1e3
+      });
+    }
+  }
+  return regressions.sort(
+    (left, right) => left.metric.localeCompare(right.metric)
+  );
+}
+
 // src/index.ts
 function verify(options) {
   return runVerify(options);
 }
 export {
+  DEFAULT_REGRESSION_THRESHOLDS,
   VerifyError,
+  findRegressions,
   printSummary,
   verify,
   verifyProject