feat(app): route every page with wouter

Replace the single-scroll showcase and its anchor/scrollIntoView
navigation with real routes: /, /patterns, /components/*, /foundations/*,
/docs/*, plus a 404 fallback.

- src/app/routes.tsx is the route table and the only source for paths,
  section headings, sidebar entries, breadcrumbs and the rail, so
  navigation cannot drift from the pages that exist
- src/pages/* holds one component per route; App.tsx is now the shell
  (topbar, sidebar, breadcrumbs, Switch, right rail, scroll-to-top)
- the active pattern moves into the URL (/patterns?pattern=table) and the
  sidebar/palette deep-link into it; SearchPalette results now carry a path
- Sidebar/RightRail render <Link> with aria-current; Hero and Topbar use
  route links too (ButtonLink keeps the button visual)
- PATTERNS + PatternId move to src/data/patterns.ts (no non-component
  export in a component file), pattern buttons gain aria-pressed
- tests/routing.test.tsx: registry/nav invariants, per-route rendering,
  sidebar navigation, pattern deep links, 404

AGENTS.md

@@ -44,6 +44,7 @@ Browser tooling here has no console access. Runtime errors therefore render into
 - **StatCard**: `trend` is sentiment (badge color), `direction` is the arrow and defaults to the sign of `change` — a "good" latency drop is `trend="up"` with `change="-4.2ms"` rendering a green `↓ -4.2ms`.
 - **Reusable Application Patterns**: `src/components/examples/` (`MetricsDashboard`, `SettingsPanel`, `ServiceTable`, `DeploymentModal`).
 - **Icon Library**: the registry in `src/components/icon-registry.ts` maps every `IconName` to a lucide component (strictly typed — typos fail `tsc`, unknown names at runtime **throw in dev** so the error sink surfaces them). 41 curated icons power the showcase; `lucide-react` ships 1,400+ for direct import.
+- **Routing — wouter (3 kB)**: the route table is `src/app/routes.tsx` and it drives the `<Switch>` in `App.tsx`, the sidebar, the breadcrumbs, the right rail and the ⌘K palette, so navigation cannot drift from the pages that exist. Adding a page = a `src/pages/*.tsx` component plus one registry entry (`path`, `group`, `label`, `index`, `kicker`, `title`, `description`, `meta`, `page`). Navigation is real links (`<Link href>`), never `onClick` + `scrollIntoView`; the shell scrolls to top on every location change. State that belongs in the URL lives in the query (`/patterns?pattern=table`), read with `useSearchParams` and validated by a registry helper (`patternFromSearch`). Deep links work because Vite serves the SPA fallback.
 
 ## Structure
 
@@ -53,8 +54,14 @@ src/
   utils.css         ← token-compliant smart CSS utility classes
   index.css         ← fonts, tokens & utils import, base resets
   App.css           ← application component styles (token-driven, plain CSS)
-  App.tsx           ← page composition & showcase layout
+  App.tsx           ← app shell: topbar + sidebar + breadcrumbs + <Switch> routes + right rail
   main.tsx          ← mounts App inside the ErrorBoundary, installs the dev error sink
+  app/
+    AppStateProvider.tsx ← global settings (theme, viewMode, sidebar, ⌘K search) + persistence
+    appState.ts          ← context, types, useAppState()
+    routes.tsx           ← route table: paths, headings, nav groups, URL helpers
+    persist.ts           ← guarded localStorage read/write + storage keys
+  pages/            ← one component per route (OverviewPage, ButtonsPage, PatternsPage, …)
   dev/
     ErrorBoundary.tsx, errorSink.ts ← render runtime errors into #dev-errors
   utils/
@@ -77,9 +84,10 @@ src/
     Sidebar.tsx, Section.tsx, FormField.tsx, TokenGrid.tsx,
     MarkdownRenderer.tsx, CodeEditor.tsx, Button.tsx
   data/
-    library.ts      ← demo content, nav groups (patternId routing) & color tokens
+    library.ts      ← demo content (button examples, color tokens)
+    patterns.ts     ← pattern catalogue + PatternId (feeds /patterns?pattern=…)
 tests/              ← vitest suites (jsdom): overlay, icon-registry, useTimeout,
-                      check-tokens guard
+                      app-state, routing, check-tokens guard
 scripts/check-tokens.mjs ← token contract guard (part of npm run check)
 ```