import { expect, test } from "@playwright/test";
import { readFileSync } from "node:fs";

// One visual baseline per primitive: __screenshots__/<name>.png. The list is
// generated by the Rust side (dist/manifest.json), so adding a primitive to the
// gallery (one line in tests/support/gallery.rs) adds a screenshot here with no
// TypeScript change.
const NAMES: string[] = JSON.parse(readFileSync(new URL("./dist/manifest.json", import.meta.url), "utf8"));

for (const name of NAMES) {
  test(`- mismatch on: ${name}`, async ({ page }) => {
    await page.goto(`/${name}.html`);

    // Tailwind compiles in-browser (CDN engine) after load; networkidle fires
    // once its script has loaded and stopped fetching, then the small buffer
    // covers the synchronous compile + paint. The viewport (not #stage) is the
    // screenshot target so `position: fixed` overlays — dialog, sheet, drawer —
    // are captured even though they contribute no height to the stage box.
    await page.waitForLoadState("networkidle");
    await page.evaluate(() => document.fonts.ready);
    await page.waitForTimeout(800);

    await expect(page).toHaveScreenshot(`${name}.png`);
  });
}
