feat: components shell — sidebar, TOC, mobile nav, live razor:preview

[Shewart]

Summary

Ships the full Blazor-native docs chrome for Phase 1: sidebar, header, table of contents, prev/next nav, mobile drawer, and — the biggest win — a live razor:preview block that renders real Blazor components mid-markdown with a shadcn-style Preview/Code tab frame.

What's in it

Sidebar (DocsSidebar)

• Collapsible sections (fumadocs pattern — closed by default, active-path auto-opens)
• Lucide-style icons per section header and page item
• Package selector at the top (ShellDocs · Markdown · Core · CLI · Components)
• Sidebar footer with GitHub icon + theme toggle
• Fixed drawer + backdrop under 1024px; sticky sidebar above
• Auto-close on route change

Header (DocsHeader)

• Hover mega-menu with 2-col icon cards (AddNavMenu("Documentation", ...))
• Search chip (Cmd+K trigger, inert until Phase 2 search lands)
• Theme toggle + GitHub link
• Hamburger on mobile with animated open/close

Table of Contents (TableOfContents)

• Pure-JS scroll spy — no SignalR round-trip during scroll
• Coloured bar slides between headings with spring easing
• Grey rail via border-left on the list, coloured bar rides on top via transform: translateY
• Sticky "On this page" title with solid bg; list scrolls independently
• Container-scoped auto-scroll to keep the active link visible (never touches window scroll)
• Smooth-scroll click nav — prevents Blazor Router from mis-routing bare #foo hrefs
• Re-attaches JS on Blazor SPA nav via a heading-signature check

Content

• MarkdownContent → new <PreviewFrame> for razor:preview blocks with Preview/Code tabs, copy button, per-element Prism highlight
• Demo <Callout> registered via RegisterComponent<T>() so preview blocks have something real to render

Nav (PrevNextNav)

• Bare chevrons (no boxes), inline with page title
• Optional description subtitle
• Slides 2-3px on hover

Mobile (MobileNavState)

• Scoped service, drawer state + OnChange event
• Drawer wired to DocsLayout + DocsSidebar; hamburger in DocsHeader

Marketing pages (Preview app)

• Home: hero + features + code-window showcase + install steps + primitives grid + CTA
• Blog with 6 sample posts
• Showcase with 6 sample sites and submit-yours CTA

Content

• callout.md rewritten with 4 live preview examples covering all four variants
• components/tabs.md — long-form page for TOC scroll testing (~15 h2 / 20 h3)

Notes

• Prism ships no razor grammar; the preview code tab uses language-markup (Prism's HTML/XML), which colours tags/attrs/strings cleanly for razor snippets
• Full <ComponentPreview> with live prop editing is deferred to Phase 2 (feat/api-reference-primitives)
• No search implementation yet — the header chip is a visual placeholder for feat/search-primitives
• Marketing pages use the existing HomeLayout; docs use DocsLayout (unchanged in this branch — floating-sidebar refactor deferred to feat/floating-sidebar-layout)

Test plan

• Nav to /docs/introduction, /docs/theming, /docs/components/callout, /docs/components/tabs — sidebar auto-opens the right section, active page is highlighted
• /docs/components/callout — click all 4 Preview/Code tabs, verify live render + syntax-coloured code + copy button flip
• /docs/components/tabs — scroll slowly, TOC thumb slides smoothly and keeps the active link on-screen
• Click a TOC link — smooth-scrolls to heading, does not redirect to home
• Resize under 1024px — hamburger appears, drawer opens, backdrop closes it, route change auto-closes it
• Prev/Next cards — Next arrow flush right, Prev arrow flush left, both slide on hover
• Hover the "Documentation" nav item — mega-menu drops down, all 4 cards clickable
• Switch light/dark theme — thumb + all chevrons + icons flip correctly