wgsl-play 0.0.39 → 0.1.0

package/src/icons/refresh.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" width="20" height="20"><path fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" d="M17.66 17.66A8 8 0 1 1 19.45 9M19.95 4v5h-5"/></svg>

package/src/jsx-preact.ts

@@ -0,0 +1,15 @@
+/** Preact JSX augmentation for `<wgsl-play>`.
+ *  Side-effect import: `import "wgsl-play/jsx-preact"` once anywhere in your TS source. */
+
+import type { HTMLAttributes } from "preact";
+import type { WgslPlay, WgslPlayAttrs } from "./WgslPlay.ts";
+
+type WgslPlayTag = HTMLAttributes<WgslPlay> & WgslPlayAttrs;
+
+declare module "preact" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "wgsl-play": WgslPlayTag;
+    }
+  }
+}

package/src/test/BundleHydrator.test.ts

@@ -1,8 +1,7 @@
 import { readFileSync } from "node:fs";
 import { dirname, join } from "node:path";
 import { fileURLToPath } from "node:url";
-import { gunzipSync } from "fflate";
-import { parseTar } from "nanotar";
+import { parseTarGzip } from "nanotar";
 import { expect, test } from "vitest";
 import type { WeslBundleFile } from "wesl-fetch";
 import { loadBundlesFromFiles } from "wesl-fetch";
@@ -11,10 +10,9 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const testPkgDir = join(__dirname, "../../../test_pkg");
 
-function loadBundlesFromTgz(tgzPath: string, packageName: string) {
+async function loadBundlesFromTgz(tgzPath: string, packageName: string) {
   const gzipData = readFileSync(tgzPath);
-  const tarData = gunzipSync(new Uint8Array(gzipData));
-  const entries = parseTar(tarData);
+  const entries = await parseTarGzip(new Uint8Array(gzipData));
   const bundleFiles: WeslBundleFile[] = entries
     .filter(f => f.name.endsWith("weslBundle.js"))
     .map(f => ({ packagePath: f.name, content: f.text, packageName }));
@@ -39,8 +37,8 @@ test("load bundles with dependencies from tgz", async () => {
   const multiTgz = join(testPkgDir, "multi_pkg-0.0.1.tgz");
   const depTgz = join(testPkgDir, "dependent_package-0.0.1.tgz");
 
-  const multiFiles = extractBundleFiles(multiTgz, "multi_pkg");
-  const depFiles = extractBundleFiles(depTgz, "dependent_package");
+  const multiFiles = await extractBundleFiles(multiTgz, "multi_pkg");
+  const depFiles = await extractBundleFiles(depTgz, "dependent_package");
 
   // Load all bundles together - each file knows its package name
   const allFiles = [...depFiles, ...multiFiles];
@@ -109,13 +107,12 @@ test("circular dependencies", async () => {
   expect(b.dependencies?.[0]).toBe(a);
 });
 
-function extractBundleFiles(
+async function extractBundleFiles(
   tgzPath: string,
   packageName: string,
-): WeslBundleFile[] {
+): Promise<WeslBundleFile[]> {
   const gzipData = readFileSync(tgzPath);
-  const tarData = gunzipSync(new Uint8Array(gzipData));
-  const entries = parseTar(tarData);
+  const entries = await parseTarGzip(new Uint8Array(gzipData));
   return entries
     .filter(f => f.name.endsWith("weslBundle.js"))
     .map(f => ({ packagePath: f.name, content: f.text, packageName }));

package/src/test/CanvasSize.test.ts

@@ -0,0 +1,48 @@
+import { expect, test } from "vitest";
+import { clampCanvas, entrySize } from "../CanvasSize.ts";
+
+function fakeEntry(opts: {
+  dp?: { inlineSize: number; blockSize: number };
+  css?: { inlineSize: number; blockSize: number };
+  rect?: { width: number; height: number };
+}): ResizeObserverEntry {
+  return {
+    devicePixelContentBoxSize: opts.dp ? [opts.dp] : undefined,
+    contentBoxSize: opts.css ? [opts.css] : undefined,
+    contentRect: opts.rect ?? { width: 0, height: 0 },
+  } as unknown as ResizeObserverEntry;
+}
+
+test("entrySize prefers devicePixelContentBoxSize when no override", () => {
+  const entry = fakeEntry({
+    dp: { inlineSize: 800, blockSize: 600 },
+    css: { inlineSize: 400, blockSize: 300 },
+  });
+  expect(entrySize(entry, null)).toEqual([800, 600]);
+});
+
+test("entrySize falls back to contentBoxSize × devicePixelRatio on Safari", () => {
+  globalThis.devicePixelRatio = 2;
+  const entry = fakeEntry({ css: { inlineSize: 400, blockSize: 300 } });
+  expect(entrySize(entry, null)).toEqual([800, 600]);
+});
+
+test("entrySize respects pixel-ratio override even when devicePixelContentBoxSize present", () => {
+  const entry = fakeEntry({
+    dp: { inlineSize: 800, blockSize: 600 },
+    css: { inlineSize: 400, blockSize: 300 },
+  });
+  expect(entrySize(entry, "1")).toEqual([400, 300]);
+});
+
+test("entrySize falls back to contentRect when contentBoxSize missing", () => {
+  const entry = fakeEntry({ rect: { width: 400, height: 300 } });
+  expect(entrySize(entry, "2")).toEqual([800, 600]);
+});
+
+test("clampCanvas floors and clamps to [1, max]", () => {
+  expect(clampCanvas(799.9, 8192)).toBe(799);
+  expect(clampCanvas(0.5, 8192)).toBe(1);
+  expect(clampCanvas(12000, 8192)).toBe(8192);
+  expect(clampCanvas(-5, 8192)).toBe(1);
+});

package/src/test/E2eHelpers.ts

@@ -0,0 +1,117 @@
+/** Shared Playwright helpers for wgsl-play e2e suites. */
+import { expect, type Page } from "@playwright/test";
+
+/** Wait for wgsl-play custom element to be defined and upgraded. */
+export async function waitForWgslPlay(page: Page) {
+  await page.waitForFunction(() => customElements.get("wgsl-play"));
+}
+
+/** Wait for a wgsl-play element to render at least one frame. */
+export async function waitForFrame(page: Page, selector: string) {
+  await page.waitForFunction(
+    sel =>
+      (document.querySelector(sel) as HTMLElement & { frameCount: number })
+        ?.frameCount > 0,
+    selector,
+  );
+}
+
+/** Get current frameCount for a wgsl-play element. */
+export async function getFrameCount(
+  page: Page,
+  selector: string,
+): Promise<number> {
+  return page.evaluate(
+    sel =>
+      (document.querySelector(sel) as HTMLElement & { frameCount: number })
+        ?.frameCount ?? 0,
+    selector,
+  );
+}
+
+/** Wait for frameCount to increase from current value (for re-renders after changes). */
+export async function waitForNewFrame(page: Page, selector: string) {
+  const before = await getFrameCount(page, selector);
+  await page.waitForFunction(
+    ([sel, prev]) =>
+      ((document.querySelector(sel) as HTMLElement & { frameCount: number })
+        ?.frameCount ?? 0) > prev,
+    [selector, before] as const,
+  );
+}
+
+/** Get canvas bounding box from inside shadow DOM. */
+export async function getCanvasBox(page: Page, playerId: string) {
+  return page.evaluate(id => {
+    const el = document.querySelector(id) as HTMLElement | null;
+    const canvas = el?.shadowRoot?.querySelector("canvas");
+    if (!canvas) return null;
+    const rect = canvas.getBoundingClientRect();
+    return { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
+  }, playerId);
+}
+
+/** Read the structured table data from a player's compute results panel. */
+export async function readResultsPanel(page: Page, playerId: string) {
+  const data = await page.evaluate(id => {
+    const el = document.querySelector(id) as HTMLElement | null;
+    const panel = el?.shadowRoot?.querySelector(".results-panel");
+    if (!panel) return null;
+    return Array.from(panel.querySelectorAll("section.result")).map(s => ({
+      caption: s.querySelector(".result-caption")?.textContent,
+      headers: Array.from(s.querySelectorAll("thead th")).map(
+        c => c.textContent,
+      ),
+      rows: Array.from(s.querySelectorAll("tbody tr")).map(r =>
+        Array.from(r.querySelectorAll("td")).map(c => c.textContent),
+      ),
+    }));
+  }, playerId);
+  if (!data) throw new Error(`no results panel found for ${playerId}`);
+  return data;
+}
+
+/** Wait for at least one results-panel table to be populated. */
+export async function waitForResults(page: Page, playerId: string) {
+  await page.waitForFunction(id => {
+    const el = document.querySelector(id) as HTMLElement | null;
+    const panel = el?.shadowRoot?.querySelector(".results-panel");
+    return (
+      !!panel &&
+      !panel.hasAttribute("hidden") &&
+      panel.querySelector("tbody tr") !== null
+    );
+  }, playerId);
+}
+
+/** Snapshot the structured DOM-text data from a results panel. */
+export async function expectResultsPanelSnapshot(
+  page: Page,
+  playerId: string,
+  name: string,
+) {
+  const data = await readResultsPanel(page, playerId);
+  expect(data).toMatchSnapshot(name);
+}
+
+/** Scroll player into view and snapshot its shadow DOM canvas. */
+export async function expectCanvasSnapshot(
+  page: Page,
+  playerId: string,
+  name: string,
+) {
+  await page.locator(playerId).scrollIntoViewIfNeeded();
+  const box = await getCanvasBox(page, playerId);
+  if (!box) {
+    const debug = await page.evaluate(id => {
+      const el = document.querySelector(id);
+      return { found: !!el, hasShadow: !!el?.shadowRoot };
+    }, playerId);
+    throw new Error(
+      `Canvas not found for ${playerId}: ${JSON.stringify(debug)}`,
+    );
+  }
+  await expect(page).toHaveScreenshot(name, {
+    clip: { x: box.x, y: box.y, width: box.width, height: box.height },
+  });
+}

package/src/test/RenderFrame.e2e.ts

@@ -0,0 +1,33 @@
+/** E2E test for the public `renderFrame()` capture hook. */
+import { expect, test } from "@playwright/test";
+import { waitForFrame, waitForWgslPlay } from "./E2eHelpers.ts";
+
+test("renderFrame captures a PNG even when called mid-build", async ({
+  page,
+}) => {
+  await page.goto("/basics.html");
+  await waitForWgslPlay(page);
+  await waitForFrame(page, "#basicPlayer");
+
+  // Replace the shader and call renderFrame() synchronously after, without
+  // awaiting any compile-success event. awaitIdleBuild must let the build
+  // finish before the snapshot.
+  const bytes = await page.evaluate(async () => {
+    const el = document.querySelector("#basicPlayer") as HTMLElement & {
+      shader: string;
+      renderFrame: () => Promise<void>;
+    };
+    el.shader = `import env::u;
+      @fragment fn fs_main(@builtin(position) pos: vec4f) -> @location(0) vec4f {
+        return vec4f(1.0, 0.0, 0.0, 1.0);
+      }`;
+    await el.renderFrame();
+    const canvas = el.shadowRoot?.querySelector("canvas") as HTMLCanvasElement;
+    const blob = await new Promise<Blob | null>(r =>
+      canvas.toBlob(b => r(b), "image/png"),
+    );
+    if (!blob) throw new Error("toBlob returned null");
+    return Array.from(new Uint8Array(await blob.arrayBuffer()).slice(0, 4));
+  });
+  expect(bytes).toEqual([0x89, 0x50, 0x4e, 0x47]);
+});

package/src/test/ResultsPanel.test.ts

@@ -0,0 +1,164 @@
+import { expect, test } from "vitest";
+import { parseSrcModule } from "wesl";
+import { TypeShapeError, varReflection } from "wesl-reflect";
+import { type BufferEntry, tableData } from "../ResultsPanel.ts";
+
+function entry(src: string, varName: string, data: ArrayBuffer): BufferEntry {
+  const ast = parseSrcModule({
+    modulePath: "test",
+    debugFilePath: "test.wesl",
+    src,
+  });
+  return { reflection: varReflection(ast, varName), data };
+}
+
+function f32Buffer(values: number[]): ArrayBuffer {
+  return new Float32Array(values).buffer;
+}
+function i32Buffer(values: number[]): ArrayBuffer {
+  return new Int32Array(values).buffer;
+}
+function u32Buffer(values: number[]): ArrayBuffer {
+  return new Uint32Array(values).buffer;
+}
+
+test("scalar f32 array - 'squares' canonical", () => {
+  const td = tableData(
+    entry(
+      `@buffer var<storage, read_write> result: array<f32, 4>;`,
+      "result",
+      f32Buffer([0, 1, 4, 9]),
+    ),
+  );
+  expect(td.caption).toBe("result: array<f32, 4>");
+  expect(td.headers).toEqual(["", "value"]);
+  expect(td.rows).toEqual([
+    ["0", "0.0"],
+    ["1", "1.0"],
+    ["2", "4.0"],
+    ["3", "9.0"],
+  ]);
+});
+
+test("u32 scalar values", () => {
+  const td = tableData(
+    entry(
+      `@buffer var<storage, read_write> r: array<u32, 3>;`,
+      "r",
+      u32Buffer([1, 2, 3]),
+    ),
+  );
+  expect(td.rows).toEqual([
+    ["0", "1"],
+    ["1", "2"],
+    ["2", "3"],
+  ]);
+});
+
+test("i32 negative values", () => {
+  const td = tableData(
+    entry(
+      `@buffer var<storage, read_write> r: array<i32, 2>;`,
+      "r",
+      i32Buffer([-7, 42]),
+    ),
+  );
+  expect(td.rows).toEqual([
+    ["0", "-7"],
+    ["1", "42"],
+  ]);
+});
+
+test("vec2f formats as (a, b)", () => {
+  const td = tableData(
+    entry(
+      `@buffer var<storage, read_write> v: array<vec2f, 2>;`,
+      "v",
+      f32Buffer([1, 2, 3, 4]),
+    ),
+  );
+  expect(td.rows).toEqual([
+    ["0", "(1.0, 2.0)"],
+    ["1", "(3.0, 4.0)"],
+  ]);
+});
+
+test("struct with two vec2f fields (Particle)", () => {
+  const td = tableData(
+    entry(
+      `
+        struct Particle { pos: vec2f, vel: vec2f }
+        @buffer var<storage, read_write> p: array<Particle, 2>;
+      `,
+      "p",
+      f32Buffer([0, 0, 0.1, 0, 1, 2, 0.1, 0]),
+    ),
+  );
+  expect(td.headers).toEqual(["", "pos", "vel"]);
+  expect(td.rows).toEqual([
+    ["0", "(0.0, 0.0)", "(0.1, 0.0)"],
+    ["1", "(1.0, 2.0)", "(0.1, 0.0)"],
+  ]);
+});
+
+test("single (non-array) scalar", () => {
+  const td = tableData(
+    entry(`@buffer var<storage, read_write> x: f32;`, "x", f32Buffer([1.5])),
+  );
+  expect(td.caption).toBe("x: f32");
+  expect(td.rows).toEqual([["0", "1.5"]]);
+});
+
+test("truncates beyond 256 rows and reports total", () => {
+  const N = 300;
+  const td = tableData(
+    entry(
+      `@buffer var<storage, read_write> big: array<u32, ${N}>;`,
+      "big",
+      u32Buffer(Array.from({ length: N }, (_, i) => i)),
+    ),
+  );
+  expect(td.rows).toHaveLength(256);
+  expect(td.truncated).toEqual({ totalRows: N });
+});
+
+test("f32 formatting: 4 sig figs for non-integers", () => {
+  const td = tableData(
+    entry(
+      `@buffer var<storage, read_write> f: array<f32, 3>;`,
+      "f",
+      f32Buffer([Math.PI, 1234.5678, 0.000123]),
+    ),
+  );
+  expect(td.rows[0][1]).toBe("3.142");
+  expect(td.rows[1][1]).toBe("1235");
+  expect(td.rows[2][1]).toBe("0.000123");
+});
+
+test("matrix element rejected as not table-renderable", () => {
+  expect(() =>
+    tableData(
+      entry(
+        `@buffer var<storage, read_write> m: array<mat4x4f, 1>;`,
+        "m",
+        new ArrayBuffer(64),
+      ),
+    ),
+  ).toThrow(TypeShapeError);
+});
+
+test("runtime-sized array derives rowCount from buffer byteLength", () => {
+  const td = tableData(
+    entry(
+      `@buffer var<storage, read_write> r: array<f32>;`,
+      "r",
+      f32Buffer([1, 2, 3]),
+    ),
+  );
+  expect(td.caption).toBe("r: array<f32>");
+  expect(td.rows).toEqual([
+    ["0", "1.0"],
+    ["1", "2.0"],
+    ["2", "3.0"],
+  ]);
+});

package/src/test/WgslPlay.basics.e2e.ts

@@ -0,0 +1,87 @@
+/** E2E tests for basics page (inline shaders, conditions, autoplay). */
+import { expect, test } from "@playwright/test";
+import {
+  expectCanvasSnapshot,
+  waitForFrame,
+  waitForNewFrame,
+  waitForWgslPlay,
+} from "./E2eHelpers.ts";
+
+test("wgsl-play component loads", async ({ page }, testInfo) => {
+  testInfo.setTimeout(10000); // Fast fail - 10s instead of 30s
+
+  const errors: string[] = [];
+  page.on("pageerror", err => errors.push(err.message));
+
+  await page.goto("/basics.html");
+
+  const defined = await page
+    .waitForFunction(() => customElements.get("wgsl-play"), { timeout: 5000 })
+    .then(() => true)
+    .catch(() => false);
+
+  if (!defined) {
+    const msg = errors.length
+      ? `JS errors: ${errors.join("; ")}`
+      : "No JS errors captured - check if module loaded";
+    throw new Error(`wgsl-play custom element not defined. ${msg}`);
+  }
+
+  const hasShadow = await page.evaluate(
+    () => !!document.querySelector("#basicPlayer")?.shadowRoot,
+  );
+  expect(hasShadow).toBe(true);
+});
+
+test("basic shader renders", async ({ page }) => {
+  await page.goto("/basics.html");
+  await waitForWgslPlay(page);
+
+  const basicPlayer = page.locator("#basicPlayer");
+  await expect(basicPlayer).toBeVisible();
+
+  const errorOverlay = basicPlayer.locator("text=Error");
+  await expect(errorOverlay).not.toBeVisible();
+
+  await expectCanvasSnapshot(page, "#basicPlayer", "basic-shader.png");
+});
+
+test("project.conditions - shows green initially, red after setting RED", async ({
+  page,
+}) => {
+  await page.goto("/basics.html");
+  await waitForFrame(page, "#conditionsPlayer");
+
+  await expectCanvasSnapshot(
+    page,
+    "#conditionsPlayer",
+    "conditions-initial-green.png",
+  );
+
+  await page.click("#load-red-condition");
+  await waitForNewFrame(page, "#conditionsPlayer");
+
+  await expectCanvasSnapshot(
+    page,
+    "#conditionsPlayer",
+    "conditions-after-red.png",
+  );
+});
+
+test("no critical console errors on basic load", async ({ page }) => {
+  const errors: string[] = [];
+  page.on("console", msg => {
+    if (msg.type() === "error") {
+      const text = msg.text();
+      if (!text.includes("favicon")) errors.push(text);
+    }
+  });
+
+  await page.goto("/basics.html");
+  await waitForFrame(page, "#basicPlayer");
+
+  const criticalErrors = errors.filter(
+    e => !e.includes("favicon") && !e.includes("404"),
+  );
+  expect(criticalErrors).toEqual([]);
+});

package/src/test/WgslPlay.compute.e2e.ts

@@ -0,0 +1,147 @@
+/** E2E tests for compute page (single-workgroup compute + readback panel). */
+import { expect, test } from "@playwright/test";
+import {
+  readResultsPanel,
+  waitForResults,
+  waitForWgslPlay,
+} from "./E2eHelpers.ts";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("/compute.html");
+  await waitForWgslPlay(page);
+});
+
+test("squares: single @buffer dispatched once", async ({ page }) => {
+  await waitForResults(page, "#squaresPlayer");
+  const data = await readResultsPanel(page, "#squaresPlayer");
+  expect(data).toEqual([
+    {
+      caption: "result: array<f32, 8>",
+      headers: ["", "value"],
+      rows: [
+        ["0", "0.0"],
+        ["1", "1.0"],
+        ["2", "4.0"],
+        ["3", "9.0"],
+        ["4", "16.0"],
+        ["5", "25.0"],
+        ["6", "36.0"],
+        ["7", "49.0"],
+      ],
+    },
+  ]);
+});
+
+test("two-buffers (input + output), both zero-initialized", async ({
+  page,
+}) => {
+  await waitForResults(page, "#prefixSumPlayer");
+  const data = await readResultsPanel(page, "#prefixSumPlayer");
+  const zeros4 = [
+    ["0", "0.0"],
+    ["1", "0.0"],
+    ["2", "0.0"],
+    ["3", "0.0"],
+  ];
+  expect(data).toEqual([
+    { caption: "input: array<f32, 4>", headers: ["", "value"], rows: zeros4 },
+    { caption: "output: array<f32, 4>", headers: ["", "value"], rows: zeros4 },
+  ]);
+});
+
+test("struct array renders one column per field", async ({ page }) => {
+  await waitForResults(page, "#particlesPlayer");
+  const data = await readResultsPanel(page, "#particlesPlayer");
+  expect(data).toEqual([
+    {
+      caption: "particles: array<Particle, 4>",
+      headers: ["", "pos", "vel"],
+      rows: [
+        ["0", "(0.0, 0.0)", "(0.0, 0.0)"],
+        ["1", "(1.0, 2.0)", "(0.1, 0.0)"],
+        ["2", "(2.0, 4.0)", "(0.2, 0.0)"],
+        ["3", "(3.0, 6.0)", "(0.3, 0.0)"],
+      ],
+    },
+  ]);
+});
+
+test("slider drives re-dispatch", async ({ page }) => {
+  await waitForResults(page, "#sliderPlayer");
+
+  // Move the slider; assert that re-dispatch lands the right values.
+  await page.evaluate(() => {
+    const player = document.querySelector("#sliderPlayer") as HTMLElement;
+    const input = player.shadowRoot?.querySelector(
+      'input[type="range"]',
+    ) as HTMLInputElement | null;
+    if (!input) throw new Error("slider not found");
+    input.value = "8";
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+
+  // After re-run with k=8, expect result[7] === 7 * 8 === 56.0
+  await page.waitForFunction(() => {
+    const el = document.querySelector("#sliderPlayer") as HTMLElement;
+    const cell = el?.shadowRoot?.querySelector(
+      ".results-panel tbody tr:last-of-type td:last-child",
+    );
+    return cell?.textContent === "56.0";
+  });
+
+  const data = await readResultsPanel(page, "#sliderPlayer");
+  expect(data).toEqual([
+    {
+      caption: "result: array<f32, 8>",
+      headers: ["", "value"],
+      rows: [
+        ["0", "0.0"],
+        ["1", "8.0"],
+        ["2", "16.0"],
+        ["3", "24.0"],
+        ["4", "32.0"],
+        ["5", "40.0"],
+        ["6", "48.0"],
+        ["7", "56.0"],
+      ],
+    },
+  ]);
+});
+
+test("runtime-sized array: host-sized default renders 256 f32 rows", async ({
+  page,
+}) => {
+  await waitForResults(page, "#runtimeArrayPlayer");
+  const data = await readResultsPanel(page, "#runtimeArrayPlayer");
+  expect(data).toHaveLength(1);
+  expect(data[0].caption).toBe("result: array<f32>");
+  // 1024-byte default / 4 bytes per f32 = 256 rows; shader writes only row 0.
+  expect(data[0].rows[0]).toEqual(["0", "1.0"]);
+  expect(data[0].rows[1]).toEqual(["1", "0.0"]);
+});
+
+const rejections: { id: string; pattern: RegExp }[] = [
+  {
+    id: "#rejectedTwoComputePlayer",
+    pattern: /compute mode requires exactly one @compute entry point/,
+  },
+  {
+    id: "#rejectedMixedPlayer",
+    pattern: /mixed compute and fragment entry points/,
+  },
+  {
+    id: "#rejectedMatrixPlayer",
+    pattern: /matrices are not supported/,
+  },
+];
+
+for (const { id, pattern } of rejections) {
+  test(`rejection: ${id}`, async ({ page }) => {
+    await page.waitForFunction(sel => {
+      const status = document.querySelector(`${sel}-status`) as HTMLElement;
+      return status?.dataset.rejected === "true";
+    }, id);
+    const status = await page.locator(`${id}-status`).textContent();
+    expect(status).toMatch(pattern);
+  });
+}