@motion-proto/live-tokens 0.76.0 → 0.78.0

package/src/testing-js/page-compliance.contract.js

@@ -0,0 +1,829 @@
+import {
+  allContracts,
+  isInapplicable
+} from "./chunk-4JQX6WWL.js";
+import {
+  DEFAULT_PAGE_VIEWPORTS,
+  PAGES_ENV,
+  PAGE_VIEWPORTS_ENV
+} from "./chunk-NB3NZRBM.js";
+
+// src/testing/page-compliance.contract.ts
+import { test } from "@playwright/test";
+
+// src/editor/ui/sections/textStyles.ts
+var TEXT_STYLES = [
+  {
+    name: "heading-xl",
+    label: "Heading XL",
+    prefix: "--heading-xl",
+    defaultElement: "h1",
+    preview: "Page title"
+  },
+  {
+    name: "heading-lg",
+    label: "Heading LG",
+    prefix: "--heading-lg",
+    defaultElement: "h2",
+    preview: "Section heading"
+  },
+  {
+    name: "heading-md",
+    label: "Heading MD",
+    prefix: "--heading-md",
+    defaultElement: "h3",
+    preview: "Subsection heading"
+  },
+  {
+    name: "heading-sm",
+    label: "Heading SM",
+    prefix: "--heading-sm",
+    defaultElement: "h4",
+    preview: "Minor heading"
+  },
+  {
+    name: "body-md",
+    label: "Body MD",
+    prefix: "--body-md",
+    defaultElement: "p",
+    preview: "Body copy for comfortable reading."
+  },
+  {
+    name: "body-sm",
+    label: "Body SM",
+    prefix: "--body-sm",
+    defaultElement: "small",
+    preview: "Captions and secondary text."
+  },
+  {
+    name: "editorial-xl",
+    label: "Editorial XL",
+    prefix: "--editorial-xl",
+    defaultElement: "editorial-xl",
+    preview: "Pull quotes and opening statements."
+  },
+  {
+    name: "editorial-lg",
+    label: "Editorial LG",
+    prefix: "--editorial-lg",
+    defaultElement: "editorial-lg",
+    preview: "Standfirsts and section ledes."
+  },
+  {
+    name: "editorial-md",
+    label: "Editorial MD",
+    prefix: "--editorial-md",
+    defaultElement: "editorial-md",
+    preview: "Long-form reading, set in the editorial face."
+  },
+  {
+    name: "editorial-sm",
+    label: "Editorial SM",
+    prefix: "--editorial-sm",
+    defaultElement: "editorial-sm",
+    preview: "Captions, credits, and asides."
+  },
+  {
+    name: "code",
+    label: "Code",
+    prefix: "--code",
+    defaultElement: "code",
+    preview: "const total = sum(items);"
+  },
+  {
+    name: "eyebrow",
+    label: "Eyebrow",
+    prefix: "--eyebrow",
+    defaultElement: "eyebrow",
+    preview: "Overline label",
+    hasTextTransform: true
+  }
+];
+
+// src/editor/core/palettes/contrast.ts
+var AA_BODY = 4.5;
+var AA_LARGE = 3;
+function linearizeChannel(v8) {
+  const s = v8 / 255;
+  return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+}
+function relativeLuminance(hex2) {
+  const r = linearizeChannel(parseInt(hex2.slice(1, 3), 16));
+  const g = linearizeChannel(parseInt(hex2.slice(3, 5), 16));
+  const b = linearizeChannel(parseInt(hex2.slice(5, 7), 16));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrastRatio(a, b) {
+  const la = relativeLuminance(a);
+  const lb = relativeLuminance(b);
+  const hi = Math.max(la, lb);
+  const lo = Math.min(la, lb);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+// src/testing/support/pageHarness.ts
+var PageViolation = class extends Error {
+  constructor(rule, source, line, message) {
+    super(`[${rule}] ${source}:${line}: ${message}`);
+    this.rule = rule;
+    this.source = source;
+    this.line = line;
+    this.name = "PageViolation";
+  }
+  rule;
+  source;
+  line;
+};
+var PAGE_CONTAINER = "[data-live-tokens-page]";
+var CHROME = "[data-live-tokens-chrome]";
+function pageTargets() {
+  const raw = process.env[PAGES_ENV];
+  if (!raw) return [];
+  return JSON.parse(raw);
+}
+function pageViewports() {
+  const raw = process.env[PAGE_VIEWPORTS_ENV];
+  if (!raw) return DEFAULT_PAGE_VIEWPORTS;
+  return JSON.parse(raw);
+}
+var TRANSIENT_STATE = /\b(?:hover|active|disabled|focused|error|selected|open|menu|option|on)\b/;
+function restingState(label) {
+  return label === void 0 || !TRANSIENT_STATE.test(label.toLowerCase());
+}
+function variantPattern(label) {
+  if (!label) return null;
+  const words = label.toLowerCase().split(/\s+/);
+  const keys = [.../* @__PURE__ */ new Set([words.join("-"), ...words])].map((key) => key.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"));
+  return `(?:^|-)(?:${keys.join("|")})$`;
+}
+function paintChecks(contract, map) {
+  const checks = [];
+  for (const [part, properties] of Object.entries(map)) {
+    const declared = contract.parts[part];
+    if (declared === void 0) continue;
+    const locator = typeof declared === "string" ? { selector: declared } : declared;
+    if (typeof declared !== "string" && declared.portal) continue;
+    for (const [css, variable] of Object.entries(properties)) {
+      checks.push({
+        part,
+        selector: part === contract.root ? null : locator.selector,
+        pseudo: (typeof declared === "string" ? void 0 : declared.pseudo) ?? null,
+        css,
+        variable
+      });
+    }
+  }
+  return checks;
+}
+function restingPaintSpec(contract) {
+  const rootSelector = contract.parts[contract.root];
+  if (typeof rootSelector !== "string") return null;
+  const entries = [];
+  const inherited = contract.view ?? {};
+  for (const expectation of contract.properties) {
+    if ((expectation.setup ?? []).length > 0) continue;
+    if (!restingState(expectation.state)) continue;
+    const checks = paintChecks(contract, expectation.paints);
+    if (checks.length === 0) continue;
+    const variant = (expectation.variant ?? inherited.variant)?.toLowerCase() ?? null;
+    entries.push({ variant, pattern: variantPattern(variant), checks });
+  }
+  if (!isInapplicable(contract.states)) {
+    for (const state of contract.states) {
+      if (!state.paints || !restingState(state.state)) continue;
+      if ((state.setup ?? []).length > 0) continue;
+      const checks = paintChecks(contract, state.paints);
+      if (checks.length === 0) continue;
+      const variant = (state.variant ?? inherited.variant)?.toLowerCase() ?? null;
+      entries.push({ variant, pattern: variantPattern(variant), checks });
+    }
+  }
+  if (entries.length === 0) return null;
+  return { id: contract.id, root: rootSelector, entries };
+}
+var TEXT_AXES = ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing"];
+var BLOCK_DISPLAYS = ["block", "flow-root", "list-item", "flex", "grid", "table-cell", "table-caption"];
+var GRID_TOLERANCE = 1;
+var GRID_VIEWPORT = 768;
+var LARGE_TEXT_PX = 24;
+var LARGE_BOLD_PX = 18.66;
+var BOLD = 700;
+var cssName = (camel) => camel.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+function report(failures, scope, describe) {
+  const lines = failures.map(describe);
+  return lines.length === 1 ? lines[0] : `${lines.length} of ${scope}
+${lines.join("\n")}`;
+}
+function hex(rgb) {
+  const [r, g, b] = rgb.match(/\d+/g).map(Number);
+  return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+}
+function aaFloor(pair) {
+  const large = pair.fontSize >= LARGE_TEXT_PX || pair.fontSize >= LARGE_BOLD_PX && pair.fontWeight >= BOLD;
+  return large ? AA_LARGE : AA_BODY;
+}
+function reasons(skipped) {
+  return Object.entries(skipped).map(([reason, count]) => `${reason} (${count})`).join(", ");
+}
+var PageHarness = class _PageHarness {
+  constructor(page, target, viewport) {
+    this.page = page;
+    this.target = target;
+    this.viewport = viewport;
+  }
+  page;
+  target;
+  viewport;
+  static async open(page, target, viewport) {
+    await installPageProbe(page);
+    await page.setViewportSize(viewport);
+    await page.goto(target.route);
+    await page.locator(PAGE_CONTAINER).waitFor();
+    await page.waitForFunction((selectors) => {
+      const container = document.querySelector(selectors.container);
+      if (!container) return false;
+      const content = [...container.children].some((child) => !child.matches(selectors.chrome));
+      const themed = getComputedStyle(document.documentElement).getPropertyValue("--body-md-font-size").trim().length > 0;
+      return content && themed;
+    }, { container: PAGE_CONTAINER, chrome: CHROME });
+    await page.waitForLoadState("networkidle");
+    await page.evaluate(async () => {
+      await document.fonts.ready;
+      const frame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+      await frame();
+      await frame();
+    });
+    return new _PageHarness(page, target, viewport);
+  }
+  fail(rule, line, message) {
+    throw new PageViolation(rule, this.target.source, line, message);
+  }
+  /** Every shipped instance on the page, as the contract root selectors find
+   *  them, with the variant its own root classes name. */
+  async instances(specs) {
+    return this.page.evaluate(({ specs: list, container, chrome, source }) => {
+      const found = [];
+      const root = document.querySelector(container);
+      if (!root) return found;
+      for (const spec of list) {
+        const keyed = [];
+        for (const entry of spec.entries) {
+          if (entry.pattern !== null) keyed.push({ variant: entry.variant, pattern: new RegExp(entry.pattern) });
+        }
+        for (const element of root.querySelectorAll(spec.root)) {
+          if (element.closest(chrome)) continue;
+          const classes = [...element.classList];
+          const matched = keyed.find(({ pattern }) => classes.some((name) => pattern.test(name)));
+          found.push({
+            id: spec.id,
+            variant: matched?.variant ?? null,
+            line: window.__liveTokensPageLine(element, source)
+          });
+        }
+      }
+      return found;
+    }, { specs, container: PAGE_CONTAINER, chrome: CHROME, source: this.target.source });
+  }
+  /**
+   * Every element that renders text of its own: block-level, inside the page
+   * container, outside the router's chrome, and outside every shipped
+   * component root, whose slot typography the component owns.
+   */
+  async textElements(componentRoots2) {
+    return this.page.evaluate(({ roots, container, chrome, source, axes, displays }) => {
+      const found = [];
+      const root = document.querySelector(container);
+      if (!root) return found;
+      const inComponent = roots.join(", ");
+      for (const element of root.querySelectorAll("*")) {
+        if (element.closest(chrome)) continue;
+        if (inComponent && element.closest(inComponent)) continue;
+        const ownText = [...element.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim().length > 0);
+        if (!ownText) continue;
+        const style = getComputedStyle(element);
+        if (!displays.includes(style.display)) continue;
+        found.push({
+          line: window.__liveTokensPageLine(element, source),
+          tag: element.tagName.toLowerCase(),
+          axes: Object.fromEntries(axes.map((axis) => [axis, style[axis] ?? ""]))
+        });
+      }
+      return found;
+    }, {
+      roots: componentRoots2,
+      container: PAGE_CONTAINER,
+      chrome: CHROME,
+      source: this.target.source,
+      axes: [...TEXT_AXES],
+      displays: BLOCK_DISPLAYS
+    });
+  }
+  /** The page file line the element was written on, from Svelte's dev-build
+   *  element metadata. */
+  async lineOf(element) {
+    return element.evaluate((node, source) => window.__liveTokensPageLine(node, source), this.target.source);
+  }
+  /** Every resting paint obligation, measured on the instances themselves. */
+  async observePaints(specs) {
+    return this.page.evaluate(({ specs: list, container, chrome, source }) => {
+      const failures = [];
+      const uncovered = [];
+      let instances = 0;
+      let asserted = 0;
+      const root = document.querySelector(container);
+      if (!root) return { instances, asserted, failures, uncovered };
+      const normalize = (node, css, raw) => {
+        const probe = document.createElement("div");
+        probe.style.display = "none";
+        probe.style.borderStyle = "solid";
+        probe.style.outlineStyle = "solid";
+        probe.style.fontSize = getComputedStyle(node).fontSize;
+        (node.parentElement ?? document.body).appendChild(probe);
+        probe.style.setProperty(css.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`), raw);
+        const computed = getComputedStyle(probe)[css];
+        probe.remove();
+        return (computed ?? "").trim();
+      };
+      for (const spec of list) {
+        const patterns = spec.entries.map((entry) => entry.pattern === null ? null : new RegExp(entry.pattern));
+        const variants = [...new Set(spec.entries.map((entry) => entry.variant).filter((v) => v !== null))];
+        for (const element of root.querySelectorAll(spec.root)) {
+          if (element.closest(chrome)) continue;
+          instances++;
+          const classes = [...element.classList];
+          const line = window.__liveTokensPageLine(element, source);
+          let covered = false;
+          for (const [index, entry] of spec.entries.entries()) {
+            const pattern = patterns[index];
+            if (pattern && !classes.some((name) => pattern.test(name))) continue;
+            covered = true;
+            for (const check of entry.checks) {
+              const part = check.selector === null ? element : element.querySelector(check.selector);
+              if (!part) continue;
+              const style = getComputedStyle(part, check.pseudo ?? void 0);
+              const token = style.getPropertyValue(check.variable).trim();
+              if (!token) continue;
+              const expected = normalize(part, check.css, token);
+              const actual = (style[check.css] ?? "").trim();
+              asserted++;
+              if (actual !== expected) {
+                failures.push({
+                  id: spec.id,
+                  variant: entry.variant,
+                  line,
+                  part: check.part,
+                  css: check.css,
+                  variable: check.variable,
+                  actual,
+                  expected
+                });
+              }
+            }
+          }
+          if (!covered) uncovered.push({ id: spec.id, line, variants });
+        }
+      }
+      return { instances, asserted, failures, uncovered };
+    }, { specs, container: PAGE_CONTAINER, chrome: CHROME, source: this.target.source });
+  }
+  /** Every run of text on the page, against the theme's own style bundles as
+   *  they resolve at this viewport. */
+  async observeTextStyles(bundles2, componentRoots2) {
+    const elements = await this.textElements(componentRoots2);
+    const expected = await this.page.evaluate(({ list, axes }) => {
+      const style = getComputedStyle(document.documentElement);
+      const probe = document.createElement("div");
+      probe.style.position = "absolute";
+      probe.style.visibility = "hidden";
+      document.body.appendChild(probe);
+      const resolved = {};
+      for (const bundle of list) {
+        probe.style.cssText = "position:absolute;visibility:hidden";
+        for (const axis of axes) {
+          probe.style.setProperty(
+            axis.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`),
+            style.getPropertyValue(`${bundle.prefix}-${axis.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`)}`).trim()
+          );
+        }
+        const computed = getComputedStyle(probe);
+        resolved[bundle.name] = Object.fromEntries(axes.map((axis) => [axis, (computed[axis] ?? "").trim()]));
+      }
+      probe.remove();
+      return resolved;
+    }, { list: bundles2, axes: [...TEXT_AXES] });
+    const failures = [];
+    for (const element of elements) {
+      let best = { name: "", misses: [], distance: Number.POSITIVE_INFINITY };
+      for (const bundle of bundles2) {
+        const misses = TEXT_AXES.filter((axis2) => element.axes[axis2] !== expected[bundle.name][axis2]);
+        if (misses.length === 0) {
+          best = { name: bundle.name, misses: [], distance: 0 };
+          break;
+        }
+        const distance = misses.length + (misses.includes("fontFamily") ? 0.4 : 0) + (misses.includes("fontSize") ? 0.2 : 0);
+        if (distance < best.distance) best = { name: bundle.name, misses, distance };
+      }
+      if (best.misses.length === 0) continue;
+      const axis = best.misses[0];
+      failures.push({
+        line: element.line,
+        tag: element.tag,
+        nearest: best.name,
+        axis,
+        actual: element.axes[axis],
+        expected: expected[best.name][axis]
+      });
+    }
+    return { elements: elements.length, failures };
+  }
+  /**
+   * Every text and surface pair the page composes, with the tokens whose
+   * resolved values match them. The ratio itself is computed by the caller
+   * from the editor's own WCAG helper, so one implementation answers for the
+   * palette editor and for a page.
+   */
+  async observeContrast(componentRoots2) {
+    return this.page.evaluate(({ roots, container, chrome, source, displays }) => {
+      const pairs = [];
+      const skipped = {};
+      const skip = (reason) => {
+        skipped[reason] = (skipped[reason] ?? 0) + 1;
+      };
+      const root = document.querySelector(container);
+      if (!root) return { pairs, skipped };
+      const canvas = document.createElement("canvas");
+      canvas.width = 1;
+      canvas.height = 1;
+      const ctx = canvas.getContext("2d", { willReadFrequently: true });
+      ctx.globalCompositeOperation = "copy";
+      const rgba = (value) => {
+        ctx.fillStyle = "rgba(0, 0, 0, 0)";
+        ctx.fillStyle = value;
+        ctx.fillRect(0, 0, 1, 1);
+        const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+        return [r, g, b, a / 255];
+      };
+      const key = ([r, g, b]) => `${r},${g},${b}`;
+      const css = (c) => c[3] === 1 ? `rgb(${c[0]}, ${c[1]}, ${c[2]})` : `rgba(${c[0]}, ${c[1]}, ${c[2]}, ${c[3]})`;
+      const probe = document.createElement("div");
+      probe.style.display = "none";
+      document.body.appendChild(probe);
+      const named = /* @__PURE__ */ new Map();
+      const rootStyle = getComputedStyle(document.documentElement);
+      for (const name of rootStyle) {
+        if (!name.startsWith("--")) continue;
+        probe.style.color = "";
+        probe.style.color = `var(${name})`;
+        const resolved = getComputedStyle(probe).color;
+        if (!resolved) continue;
+        const colour = rgba(resolved);
+        if (colour[3] === 0) continue;
+        if (!named.has(key(colour))) named.set(key(colour), name);
+      }
+      probe.remove();
+      const over = (front, back) => [
+        Math.round(front[0] * front[3] + back[0] * (1 - front[3])),
+        Math.round(front[1] * front[3] + back[1] * (1 - front[3])),
+        Math.round(front[2] * front[3] + back[2] * (1 - front[3])),
+        1
+      ];
+      const inComponent = roots.join(", ");
+      for (const element of root.querySelectorAll("*")) {
+        if (element.closest(chrome)) continue;
+        if (inComponent && element.closest(inComponent)) continue;
+        const ownText = [...element.childNodes].some((node) => node.nodeType === Node.TEXT_NODE && (node.textContent ?? "").trim().length > 0);
+        if (!ownText) continue;
+        const style = getComputedStyle(element);
+        if (!displays.includes(style.display)) continue;
+        if (style.visibility !== "visible") continue;
+        const colour = rgba(style.color);
+        if (colour[3] === 0) continue;
+        let surface = null;
+        let reason = null;
+        for (let node = element; node; node = node.parentElement) {
+          const behind = getComputedStyle(node);
+          if (behind.mixBlendMode !== "normal") {
+            reason = "a blend mode";
+            break;
+          }
+          if (behind.backgroundImage !== "none") {
+            reason = "a gradient or an image behind the text";
+            break;
+          }
+          const paint = rgba(behind.backgroundColor);
+          if (paint[3] === 1) {
+            surface = paint;
+            break;
+          }
+          if (paint[3] > 0) {
+            reason = "a translucent surface";
+            break;
+          }
+        }
+        if (!surface) {
+          skip(reason ?? "no opaque surface behind the text");
+          continue;
+        }
+        pairs.push({
+          line: window.__liveTokensPageLine(element, source),
+          tag: element.tagName.toLowerCase(),
+          color: css(colour[3] === 1 ? colour : over(colour, surface)),
+          background: css(surface),
+          colorToken: named.get(key(colour[3] === 1 ? colour : over(colour, surface))) ?? null,
+          backgroundToken: named.get(key(surface)) ?? null,
+          fontSize: parseFloat(style.fontSize),
+          fontWeight: parseInt(style.fontWeight, 10) || 400
+        });
+      }
+      return { pairs, skipped };
+    }, {
+      roots: componentRoots2,
+      container: PAGE_CONTAINER,
+      chrome: CHROME,
+      source: this.target.source,
+      displays: BLOCK_DISPLAYS
+    });
+  }
+  /** Where each section of the page sits against the column grid it draws. */
+  async observeGrid() {
+    return this.page.evaluate(({ container, chrome, source, tolerance }) => {
+      const failures = [];
+      let grids = 0;
+      let children = 0;
+      const root = document.querySelector(container);
+      if (!root) return { grids, children, failures, pageLine: 1 };
+      const own = [...root.children].find((child) => !child.matches(chrome));
+      const pageLine = own ? window.__liveTokensPageLine(own, source) : 1;
+      const columns = parseInt(
+        getComputedStyle(document.documentElement).getPropertyValue("--columns-count").trim(),
+        10
+      );
+      if (!columns) return { grids, children, failures, pageLine };
+      for (const grid of root.querySelectorAll("*")) {
+        if (grid.closest(chrome)) continue;
+        const style = getComputedStyle(grid);
+        const tracks = style.gridTemplateColumns.split(/\s+/).map(parseFloat);
+        if (tracks.length !== columns || tracks.some((track) => !Number.isFinite(track))) continue;
+        grids++;
+        const box = grid.getBoundingClientRect();
+        const gap = parseFloat(style.columnGap) || 0;
+        let offset = box.left + parseFloat(style.borderLeftWidth) + parseFloat(style.paddingLeft);
+        const lines = [];
+        for (const track of tracks) {
+          lines.push(offset);
+          offset += track;
+          lines.push(offset);
+          offset += gap;
+        }
+        const nearest = (edge) => lines.reduce((best, line) => Math.abs(line - edge) < Math.abs(best - edge) ? line : best, lines[0]);
+        const items = getComputedStyle(grid).justifyItems;
+        for (const child of grid.children) {
+          if (child.matches(chrome)) continue;
+          const kid = getComputedStyle(child);
+          if (kid.display === "none" || kid.display === "contents") continue;
+          if (kid.position === "absolute" || kid.position === "fixed") continue;
+          const { left, right } = child.getBoundingClientRect();
+          children++;
+          const align = kid.justifySelf === "auto" ? items : kid.justifySelf;
+          const centred = align === "center";
+          const pinned = centred ? [] : align === "start" || align === "flex-start" || align === "left" ? ["left"] : align === "end" || align === "flex-end" || align === "right" ? ["right"] : ["left", "right"];
+          if (centred) {
+            const before = left - Math.max(...lines.filter((line) => line <= left + tolerance), lines[0]);
+            const after = Math.min(...lines.filter((line) => line >= right - tolerance), lines[lines.length - 1]) - right;
+            if (Math.abs(before - after) > tolerance) {
+              failures.push({
+                line: window.__liveTokensPageLine(child, source),
+                tag: child.tagName.toLowerCase(),
+                edge: before > after ? "left" : "right",
+                off: Math.round((before - after) * 10) / 10
+              });
+            }
+            continue;
+          }
+          for (const edge of pinned) {
+            const at = edge === "left" ? left : right;
+            const off = at - nearest(at);
+            if (Math.abs(off) <= tolerance) continue;
+            failures.push({
+              line: window.__liveTokensPageLine(child, source),
+              tag: child.tagName.toLowerCase(),
+              edge,
+              off: Math.round(off * 10) / 10
+            });
+          }
+        }
+      }
+      return { grids, children, failures, pageLine };
+    }, { container: PAGE_CONTAINER, chrome: CHROME, source: this.target.source, tolerance: GRID_TOLERANCE });
+  }
+  /** What the page pushes past the viewport, past its own container, or past
+   *  the box that clips it. */
+  async observeOverflow(specs) {
+    return this.page.evaluate(({ specs: list, container, chrome, source, tolerance }) => {
+      const failures = [];
+      let elements = 0;
+      const root = document.querySelector(container);
+      if (!root) return { elements, failures };
+      const own = [...root.children].find((child) => !child.matches(chrome));
+      const pageLine = own ? window.__liveTokensPageLine(own, source) : 1;
+      const page = document.documentElement;
+      if (page.scrollWidth > window.innerWidth + tolerance) {
+        failures.push({
+          line: pageLine,
+          tag: "html",
+          kind: "document",
+          detail: `the document scrolls to ${page.scrollWidth}px at a ${window.innerWidth}px viewport`
+        });
+      }
+      for (const element of root.querySelectorAll("*")) {
+        if (element.closest(chrome)) continue;
+        const style = getComputedStyle(element);
+        if (style.display === "none" || style.display === "contents") continue;
+        if (element.clientWidth === 0) continue;
+        elements++;
+        if (style.overflowX === "auto" || style.overflowX === "scroll") continue;
+        if (element.scrollWidth > element.clientWidth + tolerance) {
+          failures.push({
+            line: window.__liveTokensPageLine(element, source),
+            tag: element.tagName.toLowerCase(),
+            kind: "element",
+            detail: `<${element.tagName.toLowerCase()}> holds ${element.scrollWidth}px of content in ${element.clientWidth}px, and its overflow-x is ${style.overflowX}`
+          });
+        }
+      }
+      const clips = (style) => style.overflowX !== "visible" || style.overflowY !== "visible";
+      for (const spec of list) {
+        for (const instance of root.querySelectorAll(spec.root)) {
+          if (instance.closest(chrome)) continue;
+          let clipper = null;
+          for (let node = instance.parentElement; node; node = node.parentElement) {
+            if (clips(getComputedStyle(node))) {
+              clipper = node;
+              break;
+            }
+          }
+          if (!clipper) continue;
+          const box = instance.getBoundingClientRect();
+          const bounds = clipper.getBoundingClientRect();
+          const past = [
+            box.left < bounds.left - tolerance ? `${Math.round(bounds.left - box.left)}px past the left edge` : null,
+            box.right > bounds.right + tolerance ? `${Math.round(box.right - bounds.right)}px past the right edge` : null
+          ].filter((side) => side !== null);
+          if (past.length === 0) continue;
+          failures.push({
+            line: window.__liveTokensPageLine(instance, source),
+            tag: spec.id,
+            kind: "instance",
+            detail: `${spec.id} sits ${past.join(" and ")} of the <${clipper.tagName.toLowerCase()}> that clips it`
+          });
+        }
+      }
+      return { elements, failures };
+    }, { specs, container: PAGE_CONTAINER, chrome: CHROME, source: this.target.source, tolerance: 1 });
+  }
+  /**
+   * Every rule reports the same three ways: it throws a `PageViolation` the
+   * runner turns into a finding, returns a reason the run records as
+   * `inapplicable`, or returns null, which is the pass. The suite files hold
+   * no rule of their own so the defect fixtures measure what a consumer runs.
+   */
+  async assertComponentPaint(specs) {
+    const observed = await this.observePaints(specs);
+    if (observed.instances === 0) return `${this.target.source} renders no shipped component`;
+    if (observed.failures.length > 0) {
+      this.fail(
+        "page-component-paint",
+        observed.failures[0].line,
+        report(observed.failures, `${observed.asserted} contracted paints`, (failure) => `line ${failure.line}: ${failure.id}${failure.variant ? ` (${failure.variant})` : ""} paints ${failure.part} ${cssName(failure.css)}: ${failure.actual}, but ${failure.variable} resolves to ${failure.expected}`)
+      );
+    }
+    if (observed.uncovered.length > 0) {
+      return `${this.target.source}: no entry names the variant of ` + observed.uncovered.map((instance) => `${instance.id} at line ${instance.line}, which offers ${instance.variants.join(", ")}`).join("; ");
+    }
+    if (observed.asserted === 0) {
+      return `no contracted part of a shipped instance is rendered on ${this.target.source}`;
+    }
+    return null;
+  }
+  async assertTextStyle(bundles2, componentRoots2) {
+    const observed = await this.observeTextStyles(bundles2, componentRoots2);
+    if (observed.elements === 0) return `${this.target.source} renders no text outside a shipped component`;
+    if (observed.failures.length > 0) {
+      this.fail(
+        "page-text-style",
+        observed.failures[0].line,
+        report(observed.failures, `${observed.elements} runs of text`, (failure) => `line ${failure.line}: <${failure.tag}> is in no shipped text style. Nearest is ${failure.nearest}: its ${cssName(failure.axis)} is ${failure.expected}, the element's is ${failure.actual}`)
+      );
+    }
+    return null;
+  }
+  async assertContrast(componentRoots2) {
+    const observed = await this.observeContrast(componentRoots2);
+    const failures = observed.pairs.map((pair) => ({ pair, ratio: contrastRatio(hex(pair.color), hex(pair.background)), floor: aaFloor(pair) })).filter(({ ratio, floor }) => ratio < floor);
+    if (failures.length > 0) {
+      const names = (colour, token) => token ? `${token} (${colour})` : colour;
+      this.fail(
+        "page-contrast",
+        failures[0].pair.line,
+        report(failures, `${observed.pairs.length} text and surface pairs`, ({ pair, ratio, floor }) => `line ${pair.line}: <${pair.tag}> at ${pair.fontSize}px/${pair.fontWeight} sets ${names(pair.color, pair.colorToken)} on ${names(pair.background, pair.backgroundToken)}, a ratio of ${ratio.toFixed(2)} against the ${floor} AA floor`)
+      );
+    }
+    if (observed.pairs.length === 0) {
+      const why = reasons(observed.skipped);
+      return why ? `no text on ${this.target.source} sits on a surface the rule can read: ${why}` : `${this.target.source} renders no text outside a shipped component`;
+    }
+    return null;
+  }
+  async assertGrid() {
+    if (this.viewport.width < GRID_VIEWPORT) {
+      return `the page is one column at ${this.viewport.width}px, below the ${GRID_VIEWPORT}px the grid needs`;
+    }
+    const observed = await this.observeGrid();
+    if (observed.grids === 0) {
+      this.fail(
+        "page-grid",
+        observed.pageLine,
+        `${this.target.source} draws no column grid: no element on it has as many tracks as --columns-count. The page is the column grid, so its sections sit on one`
+      );
+    }
+    if (observed.failures.length > 0) {
+      this.fail(
+        "page-grid",
+        observed.failures[0].line,
+        report(observed.failures, `${observed.children} sections on ${observed.grids} column grids`, (failure) => `line ${failure.line}: <${failure.tag}> sits ${Math.abs(failure.off)}px to the ${failure.off < 0 ? "left" : "right"} of the nearest column line on its ${failure.edge}`)
+      );
+    }
+    return null;
+  }
+  async assertOverflow(specs) {
+    const observed = await this.observeOverflow(specs);
+    if (observed.failures.length > 0) {
+      this.fail(
+        "page-overflow",
+        observed.failures[0].line,
+        report(observed.failures, `${observed.elements} boxes`, (failure) => `line ${failure.line}: ${failure.detail}`)
+      );
+    }
+    return null;
+  }
+};
+async function installPageProbe(page) {
+  await page.addInitScript(() => {
+    window.__liveTokensPageLine = (node, source) => {
+      for (let element = node; element; element = element.parentElement) {
+        const loc = element.__svelte_meta?.loc;
+        if (!loc || typeof loc.file !== "string" || typeof loc.line !== "number") continue;
+        if (loc.file.split("\\").join("/").endsWith(source)) return loc.line;
+      }
+      return 1;
+    };
+  });
+}
+
+// src/testing/page-compliance.contract.ts
+var targets = pageTargets();
+var viewports = pageViewports();
+var bundles = TEXT_STYLES.map((style) => ({ name: style.name, prefix: style.prefix }));
+async function paintSpecs() {
+  const contracts = await allContracts();
+  return contracts.map((contract) => restingPaintSpec(contract)).filter((spec) => spec !== null);
+}
+async function componentRoots() {
+  const contracts = await allContracts();
+  return contracts.map((contract) => contract.parts[contract.root]).filter((declared) => typeof declared === "string");
+}
+for (const target of targets) {
+  for (const viewport of viewports) {
+    const at = `${viewport.width}x${viewport.height}`;
+    test(`page-component-paint | ${target.source} | ${at}`, async ({ page }) => {
+      const specs = await paintSpecs();
+      const harness = await PageHarness.open(page, target, viewport);
+      const inapplicable = await harness.assertComponentPaint(specs);
+      test.skip(inapplicable !== null, inapplicable ?? "");
+    });
+    test(`page-text-style | ${target.source} | ${at}`, async ({ page }) => {
+      const roots = await componentRoots();
+      const harness = await PageHarness.open(page, target, viewport);
+      const inapplicable = await harness.assertTextStyle(bundles, roots);
+      test.skip(inapplicable !== null, inapplicable ?? "");
+    });
+    test(`page-contrast | ${target.source} | ${at}`, async ({ page }) => {
+      const roots = await componentRoots();
+      const harness = await PageHarness.open(page, target, viewport);
+      const inapplicable = await harness.assertContrast(roots);
+      test.skip(inapplicable !== null, inapplicable ?? "");
+    });
+    test(`page-grid | ${target.source} | ${at}`, async ({ page }) => {
+      const harness = await PageHarness.open(page, target, viewport);
+      const inapplicable = await harness.assertGrid();
+      test.skip(inapplicable !== null, inapplicable ?? "");
+    });
+    test(`page-overflow | ${target.source} | ${at}`, async ({ page }) => {
+      const specs = await paintSpecs();
+      const harness = await PageHarness.open(page, target, viewport);
+      const inapplicable = await harness.assertOverflow(specs);
+      test.skip(inapplicable !== null, inapplicable ?? "");
+    });
+  }
+}
+//# sourceMappingURL=page-compliance.contract.js.map