Add per-viewport deviceScaleFactor (DPR) support

[jeremyfelt]

Summary

Adds an optional per-viewport deviceScaleFactor (device pixel ratio) to reglance.json, so pages can be screenshotted as they appear on retina / high-density displays.

"viewports": [
  { "name": "desktop", "width": 1920, "height": 1080 },
  { "name": "mobile", "width": 390, "height": 844 },
  { "name": "mobile-retina", "width": 390, "height": 844, "deviceScaleFactor": 2 }
]

What changed

• Config (src/config.mjs) — validateViewports accepts an optional deviceScaleFactor, validated as a positive number (fractional ratios like 1.5 allowed). Defaults to 1 when omitted.
• Capture (src/capture.mjs) — Playwright can only set deviceScaleFactor at context creation, so captures are now grouped one browser context per DPR (new groupViewportsByScaleFactor helper) rather than one per viewport. Viewports usually share a ratio, so this is cheaper while still letting setViewportSize switch sizes within a group. First viewport in each context navigates fresh; the rest reuse the page (reloading unless --skip-reload).
• Report UI (src/report.mjs + templates) — the ratio is surfaced as a @2x-style suffix in the index table, the viewport filter dropdown, the per-comparison report, and the HTML-diff report. Shown only for non-default ratios, so standard captures stay clean.
• Docs — README viewport row + a note covering retina usage, context grouping, and the re-baseline caveat; example config gains a mobile-retina viewport.

Caveat worth noting

A 2× capture has double the pixel dimensions of its 1× counterpart, so introducing or changing a viewport's deviceScaleFactor will diff as fully changed until reglance control is re-run. Give retina variants distinct viewport names (e.g. mobile vs mobile-retina) since slugs are {key}-{viewport}.

Testing

npm run lint clean (0 errors) and npm test — 91 tests pass, including new coverage for the grouping helper, config validation, and report rendering (annotated vs clean).

🤖 Generated with Claude Code