import { chromium } from 'playwright';
const BASE = process.env.BASE_URL ?? 'http://localhost:5173';
const b = await chromium.launch();
const ctx = await b.newContext({ viewport: { width: 1280, height: 900 } });
const p = await ctx.newPage();

// Quick check across components that depend on palette tokens
const probes = [
  { route: '/uix/components/button', sel: '[data-button]', label: 'button (default)' },
  { route: '/uix/components/badge', sel: '[data-badge]', label: 'badge (default)' },
  { route: '/uix/components/switch', sel: '[data-switch]', label: 'switch (default)' }
];

for (const pr of probes) {
  try {
    await p.goto(BASE + pr.route, { waitUntil: 'domcontentloaded', timeout: 15000 });
    await p.waitForTimeout(400);
    const data = await p.locator(pr.sel).first().evaluate((el: Element) => ({
      dataColor: el.getAttribute('data-color'),
      dataVariant: el.getAttribute('data-variant'),
      bg: getComputedStyle(el).backgroundColor,
      borderColor: getComputedStyle(el).borderColor
    }));
    console.log(pr.label, JSON.stringify(data));
  } catch (e: any) {
    console.log(pr.label, 'ERR', e.message?.slice(0, 100));
  }
}
await b.close();