# Admin UI Pixel Matching Workflow

This repo now supports route-level visual diffs against Figma PNG references.

## Tools Used

- Storybook: manual page-level UI review and iteration
- Playwright: deterministic screenshot capture
- Pixelmatch: image diffing against Figma PNG references
- VisBug: browser-side spacing/typography inspection during manual tuning

## Figma Reference Source

References are read from:

`/Users/ashwin/workspace/Admin Panel/Nxtgauge Figma`

## Run Visual Pixel Tests

```bash
npm run test:visual
```

This runs `tests/e2e/admin-visual.spec.ts`, captures route screenshots, compares them with Pixelmatch, and writes artifacts to:

- `tests/visual-artifacts/actual`
- `tests/visual-artifacts/diff`

## Storybook Pages For Manual Tuning

```bash
npm run storybook
```

Use stories in:

- `src/stories/admin/AdminPages.stories.tsx`

These stories mirror the same admin routes used in visual tests.

## Using VisBug During Tuning

Install/use VisBug bookmarklet or extension in the Storybook browser tab and inspect:

- spacing
- typography sizes
- alignment
- box-model dimensions

Then rerun:

```bash
npm run test:visual
```

until visual differences are within acceptable thresholds.