# Playground screenshot tooling

Standalone Playwright runner that captures playground screenshots for documentation.

## Usage

```bash
cd tests/screenshot
npm install
npx playwright install chromium   # one-time, ~150 MB
node run.mjs
```

Output goes to `../../playground/screenshots/v1.10.0/`.

## What it captures

For each theme (dark, light):

| # | Surface | Screen / tab |
|---|---------|--------------|
| 01 | Onboarding | Empty state |
| 02 | Project | Rapporter / Regulatory (default) |
| 03 | Project | Rapporter / each of 4 other tabs |
| 04-06 | Project | Oversikt / Kontekst / Eksport |
| 07 | Home | Project list with demo-prosjekt |
| 08 | Catalog | All 5 expansion-grupper |
| 09 | Onboarding | Prefilled from demo-state |

= ~18 PNGs, captured with `deviceScaleFactor: 2` (retina-crisp), `fullPage: true`.

## How the demo state works

The screenshot script clicks `[data-action="load-demo"]` which reads the
inline `<script type="application/json" id="demo-state-v1">` block from the
playground HTML. That block is generated by `scripts/build-demo-state.mjs`
and includes one demo project ("Demo: Innbygger-chatbot for byggesak") with
all 17 fixture markdowns pre-loaded as `raw_markdown`. After load, the
project surface re-runs `handlePasteImport` for each report so the
visualizations render automatically.

## Regenerating demo state

If `playground/test-fixtures/*.md` changes:

```bash
node scripts/build-demo-state.mjs
```

This rewrites the `<script id="demo-state-v1">` block in the playground HTML.

## Commit policy

- Commit `playground/screenshots/v1.10.0/*.png` so forkers see what the
  plugin looks like without running anything.
- Don't commit `node_modules/` (gitignored).