From f24a1a9ce7250965df8e89ece4403d373c9d01e9 Mon Sep 17 00:00:00 2001
From: James Russo <james.russo@heygen.com>
Date: Mon, 29 Jun 2026 22:32:52 -0700
Subject: [PATCH] feat(studio): make storyboard view default available (remove
 FF) (#1794)

* feat(studio): make storyboard view default available (remove FF)

Removes STUDIO_STORYBOARD_ENABLED. The storyboard view-mode toggle was
gated behind a default-off feature flag (VITE_STUDIO_ENABLE_STORYBOARD)
since #1529. With the storyboard experience now ready for broad
exposure, drop the gating and make the toggle available unconditionally.

Changes:
- packages/studio/src/components/editor/manualEditingAvailability.ts:
  delete the STUDIO_STORYBOARD_ENABLED constant.
- packages/studio/src/App.tsx: drop the import + FF arg to
  useViewModeState(). Hook is now called argument-free.
- packages/studio/src/components/StudioHeader.tsx: drop the import + the
  conditional-render guard on <ViewModeToggle />. The toggle always
  renders in StudioHeader's center slot.
- packages/studio/src/contexts/ViewModeContext.tsx: remove the enabled:
  boolean parameter from useViewModeState() and simplify.
- packages/studio/fixtures/storyboard-sample/README.md: drop the
  VITE_STUDIO_ENABLE_STORYBOARD=1 prefix from the preview command.

The VITE_STUDIO_ENABLE_STORYBOARD / VITE_STUDIO_STORYBOARD_ENABLED env
vars become no-ops after this change.

Co-Authored-By: Jerrai <noreply@anthropic.com>

* docs(skills): drop stale VITE_STUDIO_ENABLE_STORYBOARD reference

The Storyboard view is now available by default (the FF removed in this PR);
storyboard-format.md no longer points at the dead env var, and skills-manifest
is regenerated for the hyperframes-core hash. Closes the Via/Magi review nit.

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

---------

Co-authored-by: Jerrai <noreply@anthropic.com>
---
 .../fixtures/storyboard-sample/README.md      |  4 +--
 packages/studio/src/App.tsx                   |  7 ++---
 .../studio/src/components/StudioHeader.tsx    |  5 ++--
 .../editor/manualEditingAvailability.ts       | 10 -------
 .../studio/src/contexts/ViewModeContext.tsx   | 29 +++++++------------
 skills-manifest.json                          |  2 +-
 .../references/storyboard-format.md           |  2 +-
 7 files changed, 18 insertions(+), 41 deletions(-)

diff --git a/packages/studio/fixtures/storyboard-sample/README.md b/packages/studio/fixtures/storyboard-sample/README.md
index ab3df39d4..cf76a5b14 100644
--- a/packages/studio/fixtures/storyboard-sample/README.md
+++ b/packages/studio/fixtures/storyboard-sample/README.md
@@ -13,10 +13,10 @@ It exercises the storyboard contract end to end:
 - Frame 5 (`05-cta.html`) is intentionally **absent** and `status: outline`, so
   the grid has an outline placeholder to render.
 
-Preview the storyboard view (flag-gated):
+Preview the storyboard view:
 
 ```bash
-VITE_STUDIO_ENABLE_STORYBOARD=1 npx hyperframes preview packages/studio/fixtures/storyboard-sample
+npx hyperframes preview packages/studio/fixtures/storyboard-sample
 ```
 
 Inspect just the parsed manifest the Studio consumes:
diff --git a/packages/studio/src/App.tsx b/packages/studio/src/App.tsx
index 897061e22..83a52c723 100644
--- a/packages/studio/src/App.tsx
+++ b/packages/studio/src/App.tsx
@@ -36,10 +36,7 @@ import {
 import type { DomEditSelection } from "./components/editor/domEditing";
 import { StudioHeader } from "./components/StudioHeader";
 import { useGestureCommit } from "./hooks/useGestureCommit";
-import {
-  STUDIO_KEYFRAMES_ENABLED,
-  STUDIO_STORYBOARD_ENABLED,
-} from "./components/editor/manualEditingAvailability";
+import { STUDIO_KEYFRAMES_ENABLED } from "./components/editor/manualEditingAvailability";
 import { GestureTrailOverlay } from "./components/editor/GestureTrailOverlay";
 import { StudioLeftSidebar } from "./components/StudioLeftSidebar";
 import { StudioPreviewArea } from "./components/StudioPreviewArea";
@@ -65,7 +62,7 @@ type CanvasRect = { left: number; top: number; width: number; height: number };
 export function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
   const initialUrlStateRef = useRef(readStudioUrlStateFromWindow());
-  const viewModeValue = useViewModeState(STUDIO_STORYBOARD_ENABLED);
+  const viewModeValue = useViewModeState();
 
   // sessionStorage-backed: fires once per tab, survives HMR remounts
   useEffect(() => {
diff --git a/packages/studio/src/components/StudioHeader.tsx b/packages/studio/src/components/StudioHeader.tsx
index f998a8db2..d30b4fafb 100644
--- a/packages/studio/src/components/StudioHeader.tsx
+++ b/packages/studio/src/components/StudioHeader.tsx
@@ -3,7 +3,6 @@ import { RotateCcw, RotateCw, Camera } from "../icons/SystemIcons";
 import {
   STUDIO_INSPECTOR_PANELS_ENABLED,
   STUDIO_MANUAL_EDITING_DISABLED_TITLE,
-  STUDIO_STORYBOARD_ENABLED,
 } from "./editor/manualEditingAvailability";
 import { getHistoryShortcutLabel } from "../utils/studioHelpers";
 import { useStudioShellContext } from "../contexts/StudioContext";
@@ -204,8 +203,8 @@ export function StudioHeader({
         </span>
         <span className="text-[11px] font-medium text-neutral-300">{projectId}</span>
       </div>
-      {/* Center: storyboard / preview toggle (flag-gated) */}
-      {STUDIO_STORYBOARD_ENABLED && <ViewModeToggle />}
+      {/* Center: storyboard / preview toggle */}
+      <ViewModeToggle />
       {/* Right: toolbar buttons */}
       <div className="flex items-center gap-1.5">
         <button
diff --git a/packages/studio/src/components/editor/manualEditingAvailability.ts b/packages/studio/src/components/editor/manualEditingAvailability.ts
index 785eaa772..a8b3faf67 100644
--- a/packages/studio/src/components/editor/manualEditingAvailability.ts
+++ b/packages/studio/src/components/editor/manualEditingAvailability.ts
@@ -82,16 +82,6 @@ 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,
-);
-
 export const STUDIO_PREVIEW_SELECTION_ENABLED = STUDIO_INSPECTOR_PANELS_ENABLED;
 
 // Stage 7 Step 3c: SDK cutover — routes inline-style ops through SDK dispatch
diff --git a/packages/studio/src/contexts/ViewModeContext.tsx b/packages/studio/src/contexts/ViewModeContext.tsx
index f359f4182..f9a17dfc3 100644
--- a/packages/studio/src/contexts/ViewModeContext.tsx
+++ b/packages/studio/src/contexts/ViewModeContext.tsx
@@ -44,14 +44,11 @@ export interface ViewModeValue {
 }
 
 /**
- * Owns the view-mode state. When `enabled` is false (storyboard flag off) the
- * mode is pinned to `timeline` and the URL is left untouched, so the feature is
- * fully inert until the flag is on.
+ * Owns the view-mode state — initial read from `?view=`, toggling, popstate sync.
+ * Storyboard mode is always available; no flag gating.
  */
-export function useViewModeState(enabled: boolean): ViewModeValue {
-  const [viewMode, setMode] = useState<StudioViewMode>(() =>
-    enabled ? readViewModeFromUrl() : "timeline",
-  );
+export function useViewModeState(): ViewModeValue {
+  const [viewMode, setMode] = useState<StudioViewMode>(() => readViewModeFromUrl());
 
   // Reflect genuine browser back/forward between history entries with a different
   // `?view=`. Note: our own writes use `replaceState` (below), which does NOT fire
@@ -60,23 +57,17 @@ export function useViewModeState(enabled: boolean): ViewModeValue {
   // the mount-time read); a scripted `pushState`/`replaceState` to `?view=` would not be
   // reflected here, by design.
   useEffect(() => {
-    if (!enabled) return;
     const onPopState = () => setMode(readViewModeFromUrl());
     window.addEventListener("popstate", onPopState);
     return () => window.removeEventListener("popstate", onPopState);
-  }, [enabled]);
+  }, []);
 
-  const setViewMode = useCallback(
-    (mode: StudioViewMode) => {
-      if (!enabled) return;
-      setMode(mode);
-      writeViewModeToUrl(mode);
-    },
-    [enabled],
-  );
+  const setViewMode = useCallback((mode: StudioViewMode) => {
+    setMode(mode);
+    writeViewModeToUrl(mode);
+  }, []);
 
-  const effectiveMode = enabled ? viewMode : "timeline";
-  return useMemo(() => ({ viewMode: effectiveMode, setViewMode }), [effectiveMode, setViewMode]);
+  return useMemo(() => ({ viewMode, setViewMode }), [viewMode, setViewMode]);
 }
 
 const ViewModeContext = createContext<ViewModeValue | null>(null);
diff --git a/skills-manifest.json b/skills-manifest.json
index 718f70fe4..8548f5078 100644
--- a/skills-manifest.json
+++ b/skills-manifest.json
@@ -26,7 +26,7 @@
       "files": 7
     },
     "hyperframes-core": {
-      "hash": "6243b6f09c94cce1",
+      "hash": "57d63243e8dcd11e",
       "files": 13
     },
     "hyperframes-creative": {
diff --git a/skills/hyperframes-core/references/storyboard-format.md b/skills/hyperframes-core/references/storyboard-format.md
index e9d962ba3..c46bda11d 100644
--- a/skills/hyperframes-core/references/storyboard-format.md
+++ b/skills/hyperframes-core/references/storyboard-format.md
@@ -2,7 +2,7 @@
 
 Defines the storyboard's **base data format** only: the `STORYBOARD.md` file shape and the `StoryboardManifest` it parses into. How a workflow _generates_ a storyboard lives in that workflow; the optional narration/TTS file (`SCRIPT.md`) is a separate concern owned by the TTS step, not here.
 
-A storyboard is the **plan layer** for a video — an ordered set of **frames** (key moments) in one markdown file. HyperFrames Studio renders it as a contact sheet (the Storyboard view, behind `VITE_STUDIO_ENABLE_STORYBOARD=1`). Parser: `@hyperframes/core/storyboard` → `StoryboardManifest`; read API: `GET /api/projects/<id>/storyboard`.
+A storyboard is the **plan layer** for a video — an ordered set of **frames** (key moments) in one markdown file. HyperFrames Studio renders it as a contact sheet (the Storyboard view, available by default in every Studio session). Parser: `@hyperframes/core/storyboard` → `StoryboardManifest`; read API: `GET /api/projects/<id>/storyboard`.
 
 ## Frontmatter (global direction)