refactor(studio): simplify hooks, split contexts, remove dead code

.fallowrc.jsonc

@@ -35,6 +35,8 @@
     "packages/studio/src/components/nle/TimelineEditorNotice.tsx",
     // Zoom hook extracted for downstream razor-blade PRs (#1330, #1331).
     "packages/studio/src/player/components/useTimelineZoom.ts",
+    // Preview helper consumed dynamically from the studio iframe bridge.
+    "packages/studio/src/hooks/gsapRuntimePreview.ts",
   ],
   "ignorePatterns": [
     "docs/**",

lefthook-local.yml

@@ -0,0 +1,14 @@
+commit-msg:
+  commands:
+    coauthor:
+      run: |
+        MSG_FILE="{1}"
+        TRAILER1="Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>"
+        if ! grep -qF "$TRAILER1" "$MSG_FILE"; then
+          # Ensure blank line before trailers
+          if [ -n "$(tail -c1 "$MSG_FILE")" ]; then
+            echo "" >> "$MSG_FILE"
+          fi
+          echo "" >> "$MSG_FILE"
+          echo "$TRAILER1" >> "$MSG_FILE"
+        fi

packages/studio/src/captions/store.ts

@@ -59,7 +59,7 @@ const initialState = {
   sourceFilePath: null,
 };
 
-export const useCaptionStore = create<CaptionState>((set) => ({
+export const useCaptionStore = create<CaptionState>((set, get) => ({
   ...initialState,
 
   // Basic
@@ -82,15 +82,11 @@ export const useCaptionStore = create<CaptionState>((set) => ({
       return { selectedSegmentIds: new Set([id]), selectedGroupId: null };
     }),
 
-  selectGroup: (id) =>
-    set((state) => {
-      const group = state.model?.groups.get(id);
-      if (!group) return {};
-      return {
-        selectedSegmentIds: new Set(group.segmentIds),
-        selectedGroupId: id,
-      };
-    }),
+  selectGroup: (id) => {
+    const group = get().model?.groups.get(id);
+    if (!group) return;
+    set({ selectedSegmentIds: new Set(group.segmentIds), selectedGroupId: id });
+  },
 
   selectAll: () =>
     set((state) => {
@@ -101,7 +97,11 @@ export const useCaptionStore = create<CaptionState>((set) => ({
       };
     }),
 
-  clearSelection: () => set({ selectedSegmentIds: new Set(), selectedGroupId: null }),
+  clearSelection: () => {
+    const { selectedSegmentIds, selectedGroupId } = get();
+    if (selectedSegmentIds.size === 0 && selectedGroupId === null) return;
+    set({ selectedSegmentIds: new Set(), selectedGroupId: null });
+  },
 
   // Segment mutations
   updateSegmentStyle: (segmentId, style) =>

packages/studio/src/components/StudioHeader.tsx

@@ -5,9 +5,9 @@ import {
   STUDIO_MANUAL_EDITING_DISABLED_TITLE,
 } from "./editor/manualEditingAvailability";
 import { getHistoryShortcutLabel } from "../utils/studioHelpers";
-import { useStudioContext } from "../contexts/StudioContext";
+import { useStudioShellContext } from "../contexts/StudioContext";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
-import { useDomEditContext } from "../contexts/DomEditContext";
+import { useDomEditActionsContext } from "../contexts/DomEditContext";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 
 export interface StudioHeaderProps {
@@ -150,9 +150,9 @@ export function StudioHeader({
   inspectorPanelActive,
   onExport,
 }: StudioHeaderProps) {
-  const { projectId, editHistory, handleUndo, handleRedo } = useStudioContext();
+  const { projectId, editHistory, handleUndo, handleRedo } = useStudioShellContext();
   const { rightCollapsed, setRightCollapsed, setRightPanelTab } = usePanelLayoutContext();
-  const { clearDomSelection } = useDomEditContext();
+  const { clearDomSelection } = useDomEditActionsContext();
 
   return (
     <div className="flex items-center justify-between h-10 px-3 bg-neutral-900 border-b border-neutral-800 flex-shrink-0">

packages/studio/src/components/StudioLeftSidebar.tsx

@@ -4,7 +4,7 @@ import { LeftSidebar, type LeftSidebarHandle } from "./sidebar/LeftSidebar";
 import { MediaPreview } from "./MediaPreview";
 import { isMediaFile } from "../utils/mediaTypes";
 import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
-import { useStudioContext } from "../contexts/StudioContext";
+import { useStudioShellContext } from "../contexts/StudioContext";
 import { useFileManagerContext } from "../contexts/FileManagerContext";
 import { getPersistedRenderSettings } from "./renders/renderSettings";
 import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
@@ -39,7 +39,7 @@ export function StudioLeftSidebar({
     handlePanelResizeMove,
     handlePanelResizeEnd,
   } = usePanelLayoutContext();
-  const { projectId, renderQueue, waitForPendingDomEditSaves } = useStudioContext();
+  const { projectId, renderQueue, waitForPendingDomEditSaves } = useStudioShellContext();
   const {
     compositions,
     assets,