@penpair/web 0.2.0 → 0.3.1

package/examples/component-pilot/renderer.mjs

@@ -0,0 +1,100 @@
+// Copy into the adopting project; Playwright and its browser are optional project dependencies.
+import { chromium } from "playwright";
+const properties = [
+  "width",
+  "height",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "rowGap",
+  "columnGap",
+  "borderRadius",
+  "borderWidth",
+  "borderColor",
+  "backgroundColor",
+  "color",
+  "fontFamily",
+  "fontSize",
+  "fontWeight",
+  "lineHeight",
+  "boxShadow",
+];
+export async function measure(cases) {
+  const browser = await chromium.launch();
+  try {
+    const measurements = [];
+    for (const c of cases) {
+      const context = await browser.newContext({
+        viewport: c.viewport,
+        reducedMotion: "reduce",
+      });
+      try {
+        const page = await context.newPage();
+        // The project fixture must render the real pinned components with its actual theme.
+        // It must expose the observed context and ready marker AFTER activating the requested state.
+        const url = new URL("http://127.0.0.1:4173/component-pilot");
+        url.searchParams.set("theme", c.theme);
+        url.searchParams.set("state", c.state);
+        await page.goto(url.href, {
+          waitUntil: "networkidle",
+          timeout: 15000,
+        });
+        await page.locator('[data-pilot-ready="true"]').waitFor({
+          timeout: 10000,
+        });
+        const observed = await page.evaluate(
+          async ({ c, properties }) => {
+            await document.fonts.ready;
+            const root = document.querySelector(c.selector);
+            if (!root || document.querySelectorAll(c.selector).length !== 1) {
+              throw new Error("Fixture selector missing or ambiguous");
+            }
+            if (
+              root.getAttribute("data-pilot-theme") !== c.theme ||
+              root.getAttribute("data-pilot-state") !== c.state
+            ) {
+              throw new Error("Fixture context was not activated");
+            }
+            const nodes = [
+              root,
+              ...root.querySelectorAll("[data-pilot-part]"),
+            ];
+            const parts = Object.create(null);
+            for (const node of nodes) {
+              const name = node === root ? "root" : node.getAttribute("data-pilot-part");
+              if (!name || parts[name]) {
+                throw new Error("Duplicate anatomy part");
+              }
+              const style = getComputedStyle(node);
+              parts[name] = Object.fromEntries(
+                properties.map((key) => [
+                  key,
+                  style[key] || null,
+                ]),
+              );
+            }
+            return {
+              id: c.id,
+              parts,
+              environment: {
+                browser: navigator.userAgent,
+                fontsReady: document.fonts.status === "loaded",
+              },
+            };
+          },
+          {
+            c,
+            properties,
+          },
+        );
+        measurements.push(observed);
+      } finally {
+        await context.close();
+      }
+    }
+    return measurements;
+  } finally {
+    await browser.close();
+  }
+}

package/examples/coverage-matrix.json

@@ -0,0 +1,126 @@
+{
+  "baselines": {
+    "page": "Candidate",
+    "root": "design/baselines",
+    "frames": [
+      {
+        "frame": "Home / Default / Desktop / Light",
+        "id": "home-desktop-light",
+        "route": "home",
+        "case": {
+          "viewport": {
+            "width": 1440,
+            "height": 900
+          },
+          "theme": "light",
+          "state": "default",
+          "fixture": "home-populated-v1",
+          "fonts": [
+            "Your pinned font family and weight"
+          ]
+        }
+      },
+      {
+        "frame": "Home / Default / Mobile / Light",
+        "id": "home-mobile-light",
+        "route": "home",
+        "case": {
+          "viewport": {
+            "width": 390,
+            "height": 844
+          },
+          "theme": "light",
+          "state": "default",
+          "fixture": "home-populated-v1",
+          "fonts": [
+            "Your pinned font family and weight"
+          ]
+        }
+      },
+      {
+        "frame": "Home / Empty / Mobile / Light",
+        "id": "home-mobile-empty",
+        "route": "home",
+        "case": {
+          "viewport": {
+            "width": 390,
+            "height": 844
+          },
+          "theme": "light",
+          "state": "empty",
+          "fixture": "home-empty-v1",
+          "fonts": [
+            "Your pinned font family and weight"
+          ]
+        }
+      }
+    ],
+    "coverage": {
+      "required": [
+        {
+          "route": "home",
+          "viewport": {
+            "width": 1440,
+            "height": 900
+          },
+          "theme": "light",
+          "state": "default",
+          "fixture": "home-populated-v1"
+        },
+        {
+          "route": "home",
+          "viewport": {
+            "width": 1440,
+            "height": 900
+          },
+          "theme": "dark",
+          "state": "default",
+          "fixture": "home-populated-v1"
+        },
+        {
+          "route": "home",
+          "viewport": {
+            "width": 390,
+            "height": 844
+          },
+          "theme": "light",
+          "state": "default",
+          "fixture": "home-populated-v1"
+        },
+        {
+          "route": "home",
+          "viewport": {
+            "width": 390,
+            "height": 844
+          },
+          "theme": "light",
+          "state": "empty",
+          "fixture": "home-empty-v1"
+        },
+        {
+          "route": "home",
+          "viewport": {
+            "width": 390,
+            "height": 844
+          },
+          "theme": "dark",
+          "state": "empty",
+          "fixture": "home-empty-v1"
+        }
+      ],
+      "unsupported": [
+        {
+          "route": "home",
+          "viewport": {
+            "width": 390,
+            "height": 844
+          },
+          "theme": "dark",
+          "state": "empty",
+          "fixture": "home-empty-v1",
+          "reason": "This case still needs a reviewed design and deterministic fixture"
+        }
+      ]
+    }
+  }
+}

package/examples/hello-card/README.md

@@ -0,0 +1,18 @@
+# Hello, card
+
+Copy these four JavaScript bodies into the configured scratch project. Use existing active typography, color, spacing and radius token names. The files create one named root, record an explicit ownership marker, bind its card/text and independently read the result. Repeating a completed build preserves IDs. A changed, renamed, ambiguous or differently owned example refuses a fresh build rather than deleting content.
+
+From that project's root (adjust the copied paths):
+
+```sh
+penpair run-file examples/hello-card/build.js \
+  --include @kit --include examples/hello-card/helpers.js \
+  --inspect examples/hello-card/inspect.js --readback examples/hello-card/readback.js \
+  --page Candidate --param name=HelloExample --param marker=hello-example-1 \
+  --param typo=YOUR_TYPOGRAPHY_TOKEN --param color=YOUR_COLOR_TOKEN \
+  --param space=YOUR_SPACING_TOKEN --param radius=YOUR_RADIUS_TOKEN
+```
+
+Review inspection, then repeat with `--apply`. The marker is ownership bookkeeping, not authorization or authentication. Save the returned `rootId`; export it twice and look at the resulting image. Independent token/structure verification does not approve visual parity. Use a separate reviewed operation for later edits or removal.
+
+For a temporary example that is built, exported and removed automatically, use the opt-in `probe --deep --kit --write` on an authorized scratch file. Read [kit contracts and limits](../../docs/build-kit.md).

package/examples/hello-card/build.js

@@ -0,0 +1,24 @@
+// penpair: write
+// penpair: idempotent
+const observation = inspectHelloExample();
+if (!CFG.inspection || JSON.stringify(observation.rootIds) !== JSON.stringify(CFG.inspection.rootIds)) throw new Error("Page source changed before creating the example");
+if (observation.satisfied) return { ok: true, alreadyBuilt: true, rootId: observation.id };
+if (observation.id) throw new Error("Existing example needs a separate reviewed edit");
+let root = null, built = false;
+try {
+  root = penpot.createBoard();
+  root.name = CFG.name;
+  root.setSharedPluginData("penpair", "example", CFG.marker);
+  root.fills = [];
+  root.resize(300, 180);
+  pp.recipe("hello-card", root, {
+    box: { name: "Hello card", w: 240, gap: CFG.space, pad: [CFG.space, CFG.space, CFG.space, CFG.space], stroke: CFG.color, radius: CFG.radius },
+    text: { typo: CFG.typo, color: CFG.color },
+    label: "Hello, card",
+  });
+  await pp.flush({ root });
+  built = true;
+  return { ok: true, rootId: root.id };
+} finally {
+  if (!built && root) root.remove();
+}

package/examples/hello-card/helpers.js

@@ -0,0 +1,27 @@
+// penpair: read
+function inspectHelloExample() {
+  for (const key of ["name", "marker", "typo", "color", "space", "radius"]) {
+    if (typeof CFG[key] !== "string" || !CFG[key]) throw new Error("Required example parameter: " + key);
+  }
+  const roots = penpot.currentPage.root.children.filter(shape => shape.name === CFG.name);
+  if (roots.length > 1) throw new Error("Example root name is ambiguous");
+  const expected = { name: CFG.name, marker: CFG.marker, title: "Hello, card", typo: CFG.typo, color: CFG.color, space: CFG.space, radius: CFG.radius, count: 3 };
+  const root = roots[0];
+  const owned = penpot.currentPage.root.children.filter(shape => typeof shape.getSharedPluginData === "function" && shape.getSharedPluginData("penpair", "example") === CFG.marker);
+  if (owned.length > 1 || owned.length === 1 && owned[0] !== root) throw new Error("The owned marker moved or became ambiguous; inspect it before creating another example");
+  if (!root) return { expected, actual: { missing: true }, id: null, satisfied: false, rootIds: penpot.currentPage.root.children.map(shape => shape.id).sort() };
+  if (typeof root.getSharedPluginData !== "function" || root.getSharedPluginData("penpair", "example") !== CFG.marker) throw new Error("Existing root is not owned by this example marker");
+  const nodes = [], stack = [root], seen = new Set();
+  while (stack.length) {
+    if (nodes.length >= 20) throw new Error("Example subtree is unexpectedly large");
+    const shape = stack.pop();
+    if (!shape.id || seen.has(shape.id)) throw new Error("Invalid example identity");
+    seen.add(shape.id); nodes.push(shape);
+    for (const child of shape.children || []) stack.push(child);
+  }
+  const cards = nodes.filter(shape => shape.type === "board" && shape.name === "Hello card");
+  const texts = nodes.filter(shape => shape.type === "text");
+  const card = cards.length === 1 ? cards[0] : null, text = texts.length === 1 ? texts[0] : null;
+  const actual = { name: root.name, marker: root.getSharedPluginData("penpair", "example"), title: text?.characters ?? null, typo: text?.tokens?.typography ?? null, color: text?.tokens?.fill ?? null, space: card?.tokens?.rowGap ?? null, radius: card?.tokens?.borderRadiusTopLeft ?? null, count: nodes.length };
+  return { expected, actual, id: root.id, satisfied: JSON.stringify(expected) === JSON.stringify(actual), rootIds: penpot.currentPage.root.children.map(shape => shape.id).sort() };
+}

package/examples/hello-card/inspect.js

@@ -0,0 +1,4 @@
+// penpair: read
+const observation = inspectHelloExample();
+if (observation.id && !observation.satisfied) throw new Error("Owned example differs; inspect it before preparing a separate edit");
+return { ok: true, ...observation };

package/examples/hello-card/readback.js

@@ -0,0 +1,3 @@
+// penpair: read
+const observation = inspectHelloExample();
+return { ok: true, rootId: observation.id, verification: { expected: observation.expected, actual: observation.actual } };

package/examples/reflection-browser/README.md

@@ -0,0 +1,49 @@
+# Real browser comparison starter
+
+Copy `capture.mjs` and `provider.mjs` into the adopting project, or use the shipped copies under `node_modules/@penpair/web/examples/reflection-browser/`. This is a starting provider for the existing `ImplementationProvider.runCase` contract. It does not install a browser, change your application or approve a design.
+
+Use your project's pinned Playwright and matching browser installation. A copied provider resolves `@penpair/core` from its project; declare it at the same version as the other Penpair packages, or pass its three IO helpers explicitly as `io`. Keep all Penpair versions aligned. Do not use the fixture hooks as application evidence.
+
+In your trusted project provider:
+
+```js
+import { chromium } from 'playwright'; // the adopter's pinned version
+import { createBrowserProvider } from './provider.mjs';
+import { hooks } from './project-hooks.mjs';
+export async function runCase(test) {
+  const browser = await chromium.launch();
+  try {
+    return await createBrowserProvider({ browser, baseURL: 'http://127.0.0.1:5173', projectRoot: process.cwd(), hooks }).runCase(test);
+  } finally { await browser.close(); }
+}
+```
+
+Required hooks:
+
+| Hook | Contract |
+| --- | --- |
+| `route(test)` | Return the exact intended route; must match `test.route` on the configured app origin. |
+| `setup(page, test)` | Explicitly establish application fixture, theme and state using your app's controls or test APIs. |
+| `observe(page, test)` | Independently read **actual** `{theme,state,fixture}` from rendered DOM/application evidence. Never return the requested fields directly. |
+| `captureRoot(test)` | Return one unique CSS selector for the design region. |
+| `expectedFonts(test)` | Return explicit webfont `{family,weight,style}` faces; each must be observed loaded in `document.fonts`. System-font fallback cannot stand in for webfont evidence. |
+| `prepareCapture(page, test, root)` | Optional explicit scroll/sticky setup after automatic scroll. Use it when a shell would cover the root. Occlusion checks refuse covered captures; the starter does not hide your shell. |
+
+The provider measures the viewport and device scale (default 1), waits for font faces/weights and three equal root boxes, parks the pointer outside the viewport, checks hover and sampled occlusion, and rounds the document box **outward to whole CSS pixels**. It captures that clip against the full document so viewport trimming cannot silently remove a pixel. Root dimensions must match the design case. It never resizes a screenshot to improve the comparison. Metadata retains root/clip, browser version, actual fonts, scroll, pointer and layout evidence. Occlusion checks sample points; inspect images for unsampled overlays and animation differences.
+
+The comparison uses exact decoded RGBA pixel differences in a browser canvas. The numeric ratio is evidence; inspect image differences and retain `owner-review-required`. Baseline hashes, paths and PNG dimensions are still independently checked by the adapter. Old schema-1 providers remain readable; this starter requires its complete capture metadata.
+
+```sh
+penpair reflection plan --map design/implementation-cases.json
+penpair reflection check --map design/implementation-cases.json --provider design/browser/run.mjs
+```
+
+These commands require registered `@penpair/reflection-check` and current exact approved design cases. See [adapter setup](../../docs/adapters.md). `runCase` must close its browser/context as above. Do not store credentials in hooks or evidence.
+
+## Local plumbing trial
+
+From this repository, run `pnpm smoke:browser` using a locally installed pinned Playwright and browser. Optional `PENPAIR_PLAYWRIGHT_MODULE` selects an absolute module path; `PENPAIR_BROWSER_EXECUTABLE` or `PENPAIR_BROWSER_CHANNEL` selects an existing test browser. No absolute machine paths are committed to the example.
+
+The script starts/stops a loopback fixture, captures desktop/mobile × light/dark × loaded/empty, tests wrong theme, missing face/weight, delayed font loading, scale mismatch, hover and sticky occlusion, and verifies unchanged baseline bytes. Its browser references are deliberately **unapproved synthetic fixtures**. They exercise plumbing; they are not Penpot acceptance or owner-approved design baselines.
+
+The fixture's Abel Regular font is redistributed under [SIL OFL](fixture/OFL.txt), retrieved from [Google Fonts](https://github.com/google/fonts/tree/main/ofl/abel), SHA-256 `8809dcad25318225052f88333e208c5aad4adcb7b2c934c135735ec19aa410b4`. Browser APIs follow [Playwright screenshot documentation](https://playwright.dev/docs/api/class-page#page-screenshot) and [font-loading evidence](https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet).

package/examples/reflection-browser/capture.mjs

@@ -0,0 +1,311 @@
+/** Browser plumbing only. Project hooks supply real setup and independent DOM readback. */
+export function outwardClip(box) {
+  if (
+    !box ||
+    ![
+      box.x,
+      box.y,
+      box.width,
+      box.height,
+    ].every(Number.isFinite) ||
+    box.x < 0 ||
+    box.y < 0 ||
+    box.width <= 0 ||
+    box.height <= 0
+  ) {
+    throw new Error("Capture root needs a finite, positive document box");
+  }
+  const x = Math.floor(box.x);
+  const y = Math.floor(box.y);
+  return {
+    x,
+    y,
+    width: Math.ceil(box.x + box.width) - x,
+    height: Math.ceil(box.y + box.height) - y,
+  };
+}
+export async function captureCase(page, test, hooks, { timeoutMs = 10000 } = {}) {
+  for (const name of [
+    "setup",
+    "observe",
+    "captureRoot",
+    "expectedFonts",
+  ]) {
+    if (typeof hooks[name] !== "function") {
+      throw new Error(`Required project hook: ${name}`);
+    }
+  }
+  page.setDefaultTimeout(timeoutMs);
+  await hooks.setup(page, test);
+  const selector = await hooks.captureRoot(test);
+  const root = page.locator(selector);
+  if ((await root.count()) !== 1) {
+    throw new Error("Capture root must resolve uniquely");
+  }
+  const expectedFonts = await hooks.expectedFonts(test);
+  if (
+    !Array.isArray(expectedFonts) ||
+    !expectedFonts.length ||
+    expectedFonts.some((font) => !font.family || !font.weight || !font.style)
+  ) {
+    throw new Error("Explicit font family/weight/style evidence is required");
+  }
+  await page.waitForFunction(
+    (fonts) => {
+      const clean = (value) => value.replace(/["']/g, "");
+      return (
+        document.fonts.status === "loaded" &&
+        fonts.every((wanted) =>
+          [
+            ...document.fonts,
+          ].some(
+            (face) =>
+              clean(face.family) === wanted.family &&
+              face.weight === wanted.weight &&
+              face.style === wanted.style &&
+              face.status === "loaded",
+          ),
+        )
+      );
+    },
+    expectedFonts,
+    {
+      timeout: timeoutMs,
+    },
+  );
+  await root.scrollIntoViewIfNeeded();
+  if (hooks.prepareCapture) {
+    await hooks.prepareCapture(page, test, root);
+  }
+  // Observe three complete stable boxes across animation frames, after scroll/sticky layout.
+  const rootBox = await root.evaluate(async (element, timeout) => {
+    let previous;
+    let equal = 0;
+    const deadline = performance.now() + timeout;
+    for (let count = 0; count < 120; count++) {
+      await new Promise((resolve, reject) => {
+        const timer = setTimeout(
+          () => reject(new Error("Capture layout deadline exceeded")),
+          Math.max(1, deadline - performance.now()),
+        );
+        requestAnimationFrame(() => {
+          clearTimeout(timer);
+          resolve();
+        });
+      });
+      const rect = element.getBoundingClientRect();
+      const box = {
+        x: rect.x + scrollX,
+        y: rect.y + scrollY,
+        width: rect.width,
+        height: rect.height,
+      };
+      const current = JSON.stringify(box);
+      equal = current === previous ? equal + 1 : 1;
+      if (equal === 3) {
+        return box;
+      }
+      previous = current;
+    }
+    throw new Error("Capture root did not settle");
+  }, timeoutMs);
+  const clip = outwardClip(rootBox);
+  const occlusion = await root.evaluate((element) => {
+    const r = element.getBoundingClientRect();
+    const left = Math.max(0, r.left);
+    const top = Math.max(0, r.top);
+    const right = Math.min(innerWidth, r.right);
+    const bottom = Math.min(innerHeight, r.bottom);
+    if (right - left < 2 || bottom - top < 2) {
+      throw new Error("Capture root has no observable viewport area");
+    }
+    const points = [
+      [
+        left + 1,
+        top + 1,
+      ],
+      [
+        right - 1,
+        top + 1,
+      ],
+      [
+        (left + right) / 2,
+        (top + bottom) / 2,
+      ],
+      [
+        left + 1,
+        bottom - 1,
+      ],
+      [
+        right - 1,
+        bottom - 1,
+      ],
+    ];
+    return {
+      samples: points.length,
+      blocked: points.filter(([x, y]) => {
+        const hit = document.elementFromPoint(x, y);
+        return !hit || !element.contains(hit);
+      }).length,
+    };
+  });
+  if (occlusion.blocked) {
+    throw new Error(
+      "Capture root is occluded by sticky shell or external content; use prepareCapture to establish the intended scroll state",
+    );
+  }
+  // Move outside the viewport; a corner inside a full-screen root is not a safe parking place.
+  await page.mouse.move(-10, -10);
+  const pointer = await root.evaluate((element) => ({
+    x: -10,
+    y: -10,
+    outsideRoot: !element.matches(":hover"),
+    hoveredControls: element.querySelectorAll(
+      "button:hover,a:hover,input:hover,select:hover,textarea:hover,[role=button]:hover",
+    ).length,
+  }));
+  if (!pointer.outsideRoot || pointer.hoveredControls !== 0) {
+    throw new Error("Hover contamination in capture root");
+  }
+  const observed = await hooks.observe(page, test);
+  const measured = await page.evaluate(() => ({
+    viewport: {
+      width: innerWidth,
+      height: innerHeight,
+    },
+    deviceScaleFactor: devicePixelRatio,
+    scroll: {
+      x: scrollX,
+      y: scrollY,
+    },
+    fonts: [
+      ...document.fonts,
+    ]
+      .filter((face) => face.status === "loaded")
+      .map((face) => ({
+        family: face.family.replace(/["']/g, ""),
+        weight: face.weight,
+        style: face.style,
+        status: face.status,
+      })),
+  }));
+  const actual = {
+    viewport: measured.viewport,
+    theme: observed.theme,
+    state: observed.state,
+    fixture: observed.fixture,
+  };
+  const desired = {
+    viewport: test.intent.viewport,
+    theme: test.intent.theme,
+    state: test.intent.state,
+    fixture: test.intent.fixture,
+  };
+  if (JSON.stringify(actual) !== JSON.stringify(desired)) {
+    throw new Error("Observed browser state/theme/fixture/viewport differs from requested case");
+  }
+  if (
+    clip.width !== desired.viewport.width ||
+    clip.height !== desired.viewport.height ||
+    measured.deviceScaleFactor !== test.baseline.scale
+  ) {
+    throw new Error(
+      "Rounded root dimensions or device scale differ from design case; do not resize the image",
+    );
+  }
+  const screenshot = await page.screenshot({
+    type: "png",
+    fullPage: true,
+    clip,
+    scale: "device",
+    animations: "disabled",
+    caret: "hide",
+  });
+  const after = await hooks.observe(page, test);
+  const afterBox = await root.boundingBox();
+  if (
+    JSON.stringify(after) !== JSON.stringify(observed) ||
+    !afterBox ||
+    JSON.stringify(
+      outwardClip({
+        ...afterBox,
+        x: afterBox.x + measured.scroll.x,
+        y: afterBox.y + measured.scroll.y,
+      }),
+    ) !== JSON.stringify(clip)
+  ) {
+    throw new Error("Browser source changed during capture");
+  }
+  return {
+    screenshot,
+    observed: actual,
+    fonts: [
+      ...new Set(measured.fonts.map((font) => font.family)),
+    ],
+    fontsReady: true,
+    capture: {
+      schemaVersion: 1,
+      root: selector,
+      rootBox,
+      clip,
+      rounding: "outward-css-pixels",
+      deviceScaleFactor: measured.deviceScaleFactor,
+      browser: {
+        name: page.context().browser().browserType().name(),
+        version: page.context().browser().version(),
+      },
+      fonts: measured.fonts,
+      pointer,
+      occlusion,
+      scroll: measured.scroll,
+      layoutSamples: 3,
+    },
+  };
+}
+
+/** Exact decoded RGBA pixel difference, without resizing or threshold-based approval. */
+export async function comparePng(page, baseline, screenshot) {
+  return page.evaluate(
+    async (images) => {
+      const decode = async (base64) => {
+        const image = new Image();
+        image.src = "data:image/png;base64," + base64;
+        await image.decode();
+        return image;
+      };
+      const [before, after] = await Promise.all(images.map(decode));
+      if (before.width !== after.width || before.height !== after.height) {
+        throw new Error("Comparison dimensions differ");
+      }
+      const canvas = document.createElement("canvas");
+      canvas.width = before.width;
+      canvas.height = before.height;
+      const context = canvas.getContext("2d", {
+        willReadFrequently: true,
+      });
+      context.drawImage(before, 0, 0);
+      const a = context.getImageData(0, 0, canvas.width, canvas.height).data;
+      context.clearRect(0, 0, canvas.width, canvas.height);
+      context.drawImage(after, 0, 0);
+      const b = context.getImageData(0, 0, canvas.width, canvas.height).data;
+      let changed = 0;
+      for (let index = 0; index < a.length; index += 4) {
+        if (
+          [
+            0,
+            1,
+            2,
+            3,
+          ].some((channel) => a[index + channel] !== b[index + channel])
+        ) {
+          changed++;
+        }
+      }
+      return changed / (canvas.width * canvas.height);
+    },
+    [
+      baseline.toString("base64"),
+      screenshot.toString("base64"),
+    ],
+  );
+}