Adds one-click demo and committed screenshots so forkers see what the plugin produces without running anything. Plugin contract unchanged. - Inline <script id="demo-state-v1"> block (37 KB) built by scripts/build-demo-state.mjs from playground/test-fixtures/*.md - "Last inn demo-data" button on onboarding (replaces all state with demo) - raw_markdown persistence on project.reports[id] with equal-value guard - rehydratePasteImports() auto-fills textareas + re-renders visualizations on project surface mount - tests/screenshot/ standalone Playwright runner (own package.json) - 24 committed screenshots in playground/screenshots/v1.10.0/ (12 surfaces x 2 themes, deviceScaleFactor 2 retina, fullPage) Tests: 215 + 201 + 70 + 7 = 493 PASS, no regressions. Docs updated per OBLIGATORISK three-level rule (plugin README, plugin CLAUDE, marketplace root README, CHANGELOG). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1.7 KiB
Playground screenshot tooling
Standalone Playwright runner that captures playground screenshots for documentation.
Usage
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:
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/*.pngso forkers see what the plugin looks like without running anything. - Don't commit
node_modules/(gitignored).