docs(site): redesign the docs site and demo pages

[stormmuller]

Summary

This restyles the whole docs site in the Forge brand and moves every demo page to one new layout, DemoPage.

Site look and feel

• Fonts: self-hosted through @fontsource. Exo 2 for headings, Inter for body text, and JetBrains Mono for code and small letter-spaced labels.
• Theme:
  • Dark mode (now the default) sits on a navy gradient, with a brighter teal for links and icons and amber for calls to action.
  • Light mode keeps the same hues, with a darker teal so links stay readable on white.
  • The navbar is navy in both themes, so the white logo always shows.
  • Cards, code blocks, admonitions and the footer are restyled to match.
• Homepage:
  • A hero with the tagline, "Get started" and "Browse demos" buttons, and the npm install command.
  • A "What Forge is" grid of 16 engine modules. Each has a line icon (teal with an amber accent) and links to its guide.
  • Four featured demos.
• Demo catalogue: the landing page, category pages, cards and search box are restyled to match.

Demo pages

• Layout:
  • Header: title, a one-sentence summary and docs links. The title and summary come from src/data/demos.ts.
  • Game: a focusable game box. While it has focus, arrow keys and Space don't scroll the page.
  • Sidebar: a Controls card, optional extra panels, and a short "How it works" list whose items open the matching file in the code explorer.
  • Code explorer: files grouped by purpose, a type icon per file, and search and a type filter on demos with 6 or more files. It only shows engine code; DemoPage throws if a .tsx/.jsx file is listed.
• Reusable components: documentation-site/src/components/demo-page/ holds the parts above, plus the DemoSlider, DemoToggle, DemoChoice and DemoTextField setting controls.
• Rollout: all 41 demos use DemoPage, and the old Demo component and its helpers are deleted.
  • Each demo's controls were checked against its input code.
  • The text demo was rebuilt as one live playground, because most of the old showcase sat below the visible canvas.
  • The car demo's source comments were shortened; the code itself is unchanged.
• Docs: AGENTS.md and the add-feature-demo skill describe DemoPage.

Follow-ups, not in this PR

• KeyboardInputSource listens on the whole page and never calls preventDefault. Scoping it to the game's container is an engine API change.
• The nine-slice demo's code draws two panels, not three. Its "tile" panel is gone, and its size settings are hard-coded.

Related issue(s)

None.

Verification checklist

• npm run check-types passes with 0 errors
• npm test passes (not run; no /src changes)
• npm run lint passes with 0 errors
• npm run cspell passes with 0 errors
• npm run check-exports passes (not run; no /src changes)
• Any new/changed public API is exported from the module's index.ts (no engine API changes)
• Documentation under /documentation-site/docs/docs is updated if this change affects documented behavior (no engine behavior changed)
• documentation-site: npm run typecheck and npm run build pass. The build fails on broken links, so every module and docLinks route resolves.
• Checked in Chromium:
  • The homepage in dark, light and 390px-wide views.
  • A docs page in both themes and the demos landing page.
  • The car, text, ui-anchors and visibility demo pages.
  • Not every demo page has been opened in a browser.

Changelog

• Not required: this is a docs change.

🤖 Generated with Claude Code

https://claude.ai/code/session_01TJaAau36yMnVzEdEhG6VpB

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!