Showcase page polish: feature-matched right rail, presenter-gated coaching, highlighted code

[sreetamdas]

Polish for /slides/tanstack-start/showcase. Three self-contained fixes, all confirmed live in the dev app. Good for one PR (#1 and #2 are independent of #3).

1. Right rail doesn't match the selected feature

With ?feature=rendering (or deployment/router) the left FeatureStory switches correctly, but the right rail (FunctionMiddlewareDemo) is always "live server function middleware" — only its feature arg changes. So a rendering story sits next to a server-function live prop.

Fix: make the rail feature-specific via a map keyed on activeFeature (replacing the always-on demo at showcase/-components.tsx:164):

• router → typed-links / URL-state demo (or keep the snapshot — its feature field is itself URL-state proof)
• server → the existing middleware demo (its natural home)
• rendering → the deferred-hydration island
• deployment → a small live Durable Object / poll-state panel (or a link into the live deck session)

2. Presenter coaching is shown to the audience

The page mixes proof with the speaker's stage directions, all visible if projected: TalkUseGuide (top), per-feature "How this helps the talk" / "What to do live" (card.talkUse / card.demoAction), and SpeakerFlow (bottom).

Fix: gate presenter-only content behind a presenter search param, mirroring the deck convention (route-shell.tsx already parses presenter). Add presenter?: boolean to the showcase search schema (-shared.ts + route.tsx), render the coaching only when presenter === true, and preserve the param across feature-pill Links. Default = clean audience view.

3. Code blocks are unstyled (one overflows)

ExampleCard / inline <pre> snippets are plain monochrome on bg-foreground/10 — no syntax highlighting — while the rest of the site uses Shiki (the page literally demos getHighlightedCode). The first card's <Link to="/stats" …> also clips on the right.

Fix: reuse the site's highlighter / Code component (or pre-highlight the fixed snippets in -showcase.server.ts, consistent with the static-function pattern the page describes). Ensure overflow-x-auto/wrapping so nothing clips.

---

Local design notes: .agents/plans/showcase-improvements.md. Found while reviewing the TanStack Start deck + showcase.

🤖 Generated with Claude Code

[sreetamdas]

Acceptance criteria (per fix)

1. Feature-matched rail: clicking each feature pill swaps both halves; no feature shows a rail whose heading contradicts the story heading. Keep one shared layout wrapper so column width/spacing stays stable across features.

2. Presenter-gated coaching: …/showcase (no param) shows zero stage directions; …?presenter=1 shows TalkUseGuide, SpeakerFlow, and the talkUse/demoAction blocks. Feature pills preserve the presenter param when navigating.

3. Highlighted code: snippets are syntax-highlighted and match site styling; no horizontal clipping at the showcase's max width.