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

* fix(studio): guard Zustand no-op setters and fix useConsoleErrorCapture memory leak

- Guard setIsPlaying to skip set() when value unchanged (eliminates 60
  notifications/sec during reverse playback)
- Guard caption store selectGroup to bail before set() when group missing
  (prevents empty Zustand notifications)
- Guard clearSelection to skip when already empty
- Fix useConsoleErrorCapture: restore original console.error, remove error
  event listener, and delete __hfErrorCapture flag on cleanup

* fix(studio): delete dead files and unused exports

Remove 7 dead files (audioBeatDetection, keyframeSnapping,
timelineInspector, DopesheetStrip, StaggerControls,
TimelineLayerPanel, TimelineEditorNotice) and their test companions.

Delete unused computeFitToChildrenSize export from propertyPanelHelpers.

Fix re-export indirection: useDomEditCommits and studioMotionOps.test
now import patch builders directly from manualEditsDomPatches instead
of the re-export passthrough in manualEditsDom.

* fix(studio): eliminate effect-chain state mirroring for lint findings, hover, and GSAP fetch

Move lint findingsByElement sync from App.tsx into useLintModal where
the value is produced, removing the mirroring useEffect. Consolidate
4 hover-clearing effects in useDomSelection into 2 (one unconditional
on context change, one conditional combining caption mode, selection
match, and disconnected element checks). Fold the GSAP retry effect
into the fetch effect in useGsapTweenCache, scheduling a single retry
via setTimeout when the initial fetch returns 0 animations.

Eliminates 3 unnecessary render cycles from effect chains.

* fix(studio): memoize renderQueue, toolbar, and canvas rect to prevent re-render cascade

- Wrap renderQueue object in useMemo so StudioContext consumers don't
  re-render on every App render
- Memoize timelineToolbar JSX so NLELayout memo isn't defeated
- Move canvasRect getBoundingClientRect() from render-time IIFE to a
  useLayoutEffect-backed ref, eliminating layout thrashing
- Track and clear setTimeout handles in refreshPreviewDocumentVersion
  to prevent stale timer accumulation on rapid calls and unmount

* refactor(studio): consolidate GSAP shared primitives — defaults, iframe access, keyframe parsing

Extract duplicated PROPERTY_DEFAULTS, IframeGsap interface, iframe
accessors (getIframeGsap, queryIframeElement), percentage keyframe
parsing, and toAbsoluteTime into a single gsapShared.ts module.

Removes ~120 lines of copy-pasted logic across 8 hook files, reducing
drift risk between the duplicate implementations.

* fix(studio): remove dead store fields, dead file, duplicate helper, and unsafe assertions

* refactor(studio): deduplicate selector helpers, rounding utils, percentage computation, and iframe access

* fix(studio): split StudioContext into Shell + Playback to prevent cascade re-renders

* refactor(studio): decompose useGsapScriptCommits into focused mutation hooks

* refactor(studio): decompose useFileManager into focused file operation hooks

Extract useFileTree (tree loading, refresh, derived assets/compositions)
and useEditorSave (debounced save with history tracking) from the 508-LOC
useFileManager. The parent hook composes both and retains file I/O,
click-to-source, upload/import, and CRUD — preserving the same public
interface so no consumers change.

* refactor(studio): decompose useDomEditCommits into focused commit hooks

Extract geometry (path offset, box size, rotation) and element lifecycle
(delete, z-index reorder) into useDomGeometryCommits and
useElementLifecycleOps. Parent keeps persistDomEditOperations as core
and composes all sub-hooks — public interface unchanged.

* refactor(studio): simplify useAppHotkeys with declarative command table

* refactor(studio): simplify useAppHotkeys with declarative command table

Replace 15 individual useRef callback refs with a single cbRef object.
Extract keydown dispatch into pure dispatchModifierKey/dispatchPlainKey
functions. Merge duplicate undo/redo logic into shared applyHistory.
Extract cross-origin listener boilerplate into safeAddListener/safeRemoveListener.

Hook body: 204 LOC (down from 445). Public API unchanged.

* fix(studio): remove unused getDomEditTargetKey import

* refactor(studio): decompose useDomEditSession into focused editing hooks

Extract GSAP-aware geometry intercepts (move/resize/rotation) and
animated property commit into useGsapAwareEditing, and selection
wiring, GSAP cache management, preview sync, and selection handlers
into useDomEditWiring. The parent remains a pure composition shell.

* style(studio): fix formatting in 5 files

* fix(studio): trim App.tsx to 598 lines (under 600 limit)

---------

Co-authored-by: Miguel Ángel <miguel07alm@protonmail.com>

Author: miguel-heygen

.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/App.tsx

@@ -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/captions/store.ts

@@ -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/StudioHeader.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,