feat(studio): storyboard view-mode toggle and shell (#1529)

Second PR in the Studio storyboarding stack. Adds the top-level toggle
between the storyboard and the timeline/preview stage, behind the flag.

- STUDIO_STORYBOARD_ENABLED flag (VITE_STUDIO_ENABLE_STORYBOARD, default
  off) now gates the UI.
- ViewModeContext: timeline|storyboard state mirrored to the ?view= query
  param, so it survives reloads and an agent can deep-link ?view=storyboard.
- Segmented Storyboard|Preview control in StudioHeader (flag-gated).
- StudioApp swaps the whole center stage for a full-width StoryboardView
  when storyboard mode is active.
- useStoryboard hook + StoryboardView shell: global-direction header,
  loading/error/empty states. The frame contact-sheet grid lands in PR3.
- Extract StudioOverlays from App.tsx to stay within the 600-line studio
  decomposition budget.

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

packages/studio/src/components/editor/manualEditingAvailability.ts

@@ -82,6 +82,16 @@ export const STUDIO_RAZOR_TOOL_ENABLED = resolveStudioBooleanEnvFlag(
   true,
 );
 
+// Storyboard view: a top-level, toggleable view that renders STORYBOARD.md as a
+// contact sheet of live HTML frame tiles, replacing the timeline/preview stage.
+// Opt-in / off by default until the experience is ready for broad exposure.
+//   VITE_STUDIO_ENABLE_STORYBOARD=1 npx hyperframes preview
+export const STUDIO_STORYBOARD_ENABLED = resolveStudioBooleanEnvFlag(
+  env,
+  ["VITE_STUDIO_ENABLE_STORYBOARD", "VITE_STUDIO_STORYBOARD_ENABLED"],
+  false,
+);
+
 // When disabled (the default), drag/resize/rotate commits always take the CSS
 // persist path instead of being intercepted into GSAP script keyframe
 // mutations. The keyframe intercept rewrites timeline tweens from drag