← snapshot

/**
 * Opens the lab's focus overlay for named tiles and captures each at 420px,
 * which is the only way to judge whether a figure is actually well-formed —
 * a 210px thumbnail hides a broken distance field.
 *
 * Usage: node tour/lab-focus.mjs "Menger lattice" "Kaleido shards"
 */

import { mkdir } from "node:fs/promises";
import path from "node:path";
import { fileURLToPath } from "node:url";
import { chromium } from "@playwright/test";

const HERE = path.dirname(fileURLToPath(import.meta.url));
const OUT = path.join(HERE, "lab");
const BASE = process.env.TOUR_BASE ?? "http://localhost:3000";
const WANTED = process.argv.slice(2);

async function main() {
  await mkdir(OUT, { recursive: true });
  const browser = await chromium.launch();
  const page = await browser.newPage({
    viewport: { width: 1200, height: 900 },
    deviceScaleFactor: 1,
    colorScheme: "dark",
  });
  await page.goto(`${BASE}/lab`, { waitUntil: "networkidle" });
  await page.waitForSelector(".jac-lab-tile");

  for (const label of WANTED) {
    const tile = page.locator(".jac-lab-tile", { hasText: label }).first();
    await tile.scrollIntoViewIfNeeded();
    await tile.evaluate((el) => el.click());
    await page.waitForSelector(".jac-lab-focus");
    await page.waitForTimeout(2200);
    const slug = label.toLowerCase().replace(/[^a-z0-9]+/g, "-");
    await page.locator(".jac-lab-focus-inner").screenshot({
      path: path.join(OUT, `focus-${slug}.png`),
    });
    await page.locator(".jac-lab-focus .jac-btn").click();
    await page.waitForTimeout(400);
    console.log(`focus-${slug}.png`);
  }
  await browser.close();
}

main().catch((e) => {
  console.error(e);
  process.exit(1);
});