Implemented comprehensive SPA capabilities for the end-user search UI:
- **Instant-search**: 150ms debounce with §13.10 query coalescing
- **URL state encoding**: q+filters+sort+page in URL for bookmarkable searches
- **Keyboard navigation**: / to focus, ↑↓ to navigate results, Enter to open, Esc to clear
- **Highlighting**: Uses Meilisearch _formatted output for matched terms
- **Sort options**: Configurable sort dropdown with per-page selector (12/24/48)
- **Typo tolerance UI**: "Did you mean" suggestions on zero hits
- **Analytics beacon**: Click-through and latency tracking via POST /_miroir/ui/search/{index}/beacon
- **Dark mode**: Manual toggle + prefers-color-scheme support, stored in localStorage
- **Responsive design**: Mobile bottom-sheet facets, tablet 2-col, desktop 3-col, max-width 1440
- **Accessibility**: WCAG 2.2 AA - ARIA labels, live regions, keyboard shortcuts, screen reader support
- **Skeleton loaders**: Layout-shift-free loading states during instant-search keystrokes
- **Empty state**: Popular query suggestions (configurable via §13.18 canaries)
Design philosophy: Content-first with generous whitespace, system fonts, subtle motion
(180ms fade + translate), rounded corners (12px), soft shadows. Single configurable
accent color drives CTAs and highlights.
Bundle size: ~24KB total (HTML: 4KB, CSS: 11KB, JS: 20KB) - well under 60KB target.
Closes: miroir-uhj.21.4
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
8319fcc02c