feat(web): hidden Swiss Grid style guide via double-click on the theme selector

[GmanFooFoo]

Was

Ein interner Style Guide für das Swiss Grid-Theme des md-viewer — gerendert vom Viewer selbst (wie Changelog/Readme) aus src/web-style-guide.md. Er dokumentiert die Swiss-Grid-Tokens (Light + Dark), Typografie, Markdown-Elemente und die Chrome-Komponenten. Nur Swiss Grid, wie gewünscht.

Trigger — versteckt

Erreichbar nur über einen Doppelklick auf die Theme-Auswahl (die „Swiss Grid"-Dropdown). Der Doppelklick erzwingt zusätzlich das Swiss-Grid-Theme, damit der Guide in seiner gedachten Optik erscheint. Kein Link, kein Footer-Eintrag, nicht suchbar — „für mich, keiner soll suchen."

Warum kein CHANGELOG-Eintrag

Der Footer-„Changelog"-Button rendert CHANGELOG.md live im Viewer auf md.neckarshore.ai. Ein [Unreleased]-Bullet würde das versteckte Feature also öffentlich verraten. Deshalb der sanktionierte skip-changelog-Bypass (AD-42) statt eines Eintrags.

Dateien

Datei	Änderung
src/web-style-guide.md	Neu — der Guide (base64 via __STYLE_GUIDE_B64__)
src/web-app.js	STYLE_GUIDE-Const + dblclick-Trigger auf #themeMenuBtn
build.sh	Payload-Injektion (spiegelt das CHANGELOG-Embed)
test/web-smoke.sh	Assertions: Payload embedded · Trigger wired · Placeholder-Guard erweitert
test/e2e/controls.spec.ts	Doppelklick öffnet den Guide in Swiss Grid
web/index.html	Rebuilt (0-Deletion-Diff: nur der neue Handler)

Verifikation (lokal grün)

• ./test/web-smoke.sh — PASSED, inkl. 4-theme×mode-block-Invariant (base64 schirmt die verbatim Token-Doku ab)
• npm run test:e2e — 17 passed (16 + der neue Trigger-Test)
• ./build.sh + git diff — nur web/index.html churnt (viewer.html byte-identisch)

Hinweis: Merge erst nach explizitem Go — kein Auto-Deploy.

🤖 Generated with Claude Code

https://claude.ai/code/session_01Nfbt26KeSjCNMbN85njRBE

Summary by CodeRabbit

• New Features
  • Added a built-in “Swiss Grid — Style Guide” Markdown guide to the web viewer.
  • Expanded the theme menu button gestures: double-click switches to the Swiss Grid theme and opens the guide; triple-click navigates to a dedicated style guide page.
• Bug Fixes
  • Builds now fail early when required web assets are missing.
• Tests
  • Added end-to-end coverage for the embedded guide, the hidden double-click shortcut, and the dedicated style guide page.
  • Updated web smoke checks to validate the embedded payload and allowed build placeholders.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
md-viewer	Ready	Preview, Comment	Jul 21, 2026 9:19am

[coderabbitai]

📝 Walkthrough

Walkthrough

The web build now embeds a Swiss Grid style guide, provides a standalone themed guide page, and adds hidden theme-button gestures for rendering or navigating to the guide. Smoke and end-to-end tests cover the build payload, gestures, page content, and metadata.

Changes

Swiss Grid style guide

Layer / File(s)	Summary
Style guide asset and build embedding src/web-style-guide.md, build.sh	Adds the Swiss Grid documentation, validates its source assets, and embeds the guide as base64 data in web/index.html.
Standalone style guide page web/style-guide.html	Adds the themed style guide page with token, typography, component, Markdown, light/dark mode, and no-index metadata support.
Embedded guide viewer interaction src/web-app.js, web/index.html	Decodes STYLE_GUIDE; single-click toggles the menu, double-click selects swiss and renders style-guide.md, and triple-click navigates to /style-guide.
Build and interaction validation test/web-smoke.sh, test/e2e/controls.spec.ts	Verifies payload embedding, gesture wiring, rendered guide content, standalone page content, and robots metadata.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant ThemeMenuButton
  participant WebApp
  participant RenderedViewer
  participant StyleGuidePage
  ThemeMenuButton->>WebApp: Double-click or triple-click
  WebApp->>WebApp: Close menu and apply swiss theme
  WebApp->>RenderedViewer: Render STYLE_GUIDE as style-guide.md
  WebApp->>StyleGuidePage: Navigate to /style-guide

Loading

Possibly related PRs

• neckarshore-mmps/md-viewer#2: Shares the web build payload embedding and theme/app wiring.
• neckarshore-mmps/md-viewer#3: Shares the theme dropdown and Swiss Grid interaction wiring.
• neckarshore-mmps/md-viewer#19: Shares Playwright coverage for web theme and menu controls.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely captures the main change: a hidden Swiss Grid style guide opened via double-click on the theme selector.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch linus/2026-07-21-md-viewer-style-guide

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

🧹 Nitpick comments (1)

test/e2e/controls.spec.ts (1)

65-69: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick win

Triple-click test only checks the URL, not that the destination actually renders.

window.location.href navigation still lands on the target URL even for a 404/error response, so this test doesn't prove /style-guide serves the standalone page — it only proves the URL changed. Consider asserting page content (e.g., the h1 text) after navigation, the same way the standalone-page test does.

✅ Suggested strengthening

 test("hidden gesture — triple-click the theme selector navigates to the HTML style guide", async ({ page }) => {
   await page.click("`#themeMenuBtn`", { clickCount: 3 });
   await page.waitForURL(/\/style-guide$/);
   expect(page.url()).toMatch(/\/style-guide$/);
+  await expect(page.locator("h1")).toContainText("Swiss Grid — Style Guide");
 });

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@test/e2e/controls.spec.ts` around lines 65 - 69, The triple-click test should
verify that the destination page renders, not only that navigation reaches
/style-guide. In the test “hidden gesture — triple-click the theme selector
navigates to the HTML style guide”, retain the URL assertion and add an
assertion for the expected standalone style-guide content, such as the page’s h1
text, matching the existing standalone-page test.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In `@test/e2e/controls.spec.ts`:
- Around line 65-69: The triple-click test should verify that the destination
page renders, not only that navigation reaches /style-guide. In the test “hidden
gesture — triple-click the theme selector navigates to the HTML style guide”,
retain the URL assertion and add an assertion for the expected standalone
style-guide content, such as the page’s h1 text, matching the existing
standalone-page test.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 6c604a64-3206-401f-be7f-5eb037514a07

📥 Commits

Reviewing files that changed from the base of the PR and between 4ac454b and b1087cb.

📒 Files selected for processing (5)

• src/web-app.js
• test/e2e/controls.spec.ts
• test/web-smoke.sh
• web/index.html
• web/style-guide.html