Stories Library UI — picker for all 4 cinematic stories

> **Skills:** TypeScript · React · Motion (already in deps)
> **Time:** ~3 hours
> **Good for:** Frontend devs who want to plug into the Story Mode framework
> **Difficulty:** Beginner-friendly

---

## Context

After v0.10, Story Mode has 4 stories: `rise-of-vader`, `order-of-the-sith`, `skywalker-family`, `clone-wars` — but the only one exposed in the UI is Rise of Vader (hardcoded in `NavRail`'s Play button). The other 3 are invisible.

## Goal

A small "Stories" surface that lists all stories from `STORIES` in `lib/data/stories.ts` and lets users pick which to play. Tasteful, on-brand.

## Where to start

- `lib/data/stories.ts` — `STORIES: Story[]` is the list. Each has `id`, `title`, `blurb`, `estimatedSec`, `beats.length`.
- `components/explorer/NavRail.tsx` — currently the Play button hard-codes `playStory("rise-of-vader")`. Replace with a dropdown / popover or a dedicated "Stories" panel.
- `components/cinematic/StoryMode.tsx` — `playStory(id)` action takes any id. No framework changes needed.

## UI options

A. **Dropdown** off the Play button — shows all stories with title + duration, click to play. Quick.
B. **Side sheet** that slides in from the NavRail — shows blurb + beat count + interrupts triggered. More polished.
C. **Stories tab** — a fourth view next to galaxy/timeline/lineage. Heavier; probably overkill.

Recommended: B. Use Motion for the sheet, drei-style hairlines, mono caption typography.

## Acceptance criteria

- All 4 stories visible
- Click any → starts that story (current Play UX)
- Currently-playing story has a clear "now playing" indicator
- Esc dismisses the picker
- Reduced motion respected