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>

packages/studio/src/hooks/gsapRuntimeReaders.ts

@@ -3,31 +3,29 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { classifyPropertyGroup, type PropertyGroupName } from "@hyperframes/core/gsap-parser";
-
-interface IframeGsap {
-  getProperty: (el: Element, prop: string) => number;
-}
+import { getIframeGsap, queryIframeElement } from "./gsapShared";
+import { roundTo3 } from "../utils/rounding";
 
 export function readGsapProperty(
   iframe: HTMLIFrameElement | null,
   selector: string | null,
   prop: string,
 ): number | null {
-  if (!iframe?.contentWindow || !selector) return null;
+  if (!selector) return null;
+  const gsap = getIframeGsap(iframe);
+  if (!gsap) return null;
+  const el = queryIframeElement(iframe, selector);
+  if (!el) return null;
   try {
-    const gsap = (iframe.contentWindow as unknown as { gsap?: IframeGsap }).gsap;
-    if (!gsap?.getProperty) return null;
-    const el = iframe.contentDocument?.querySelector(selector);
-    if (!el) return null;
     const val = Number(gsap.getProperty(el, prop));
     if (!Number.isFinite(val)) return null;
-    return POSITION_PROPS.has(prop) ? Math.round(val) : Math.round(val * 1000) / 1000;
+    return POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
   } catch {
     return null;
   }
 }
 
-const POSITION_PROPS = new Set(["x", "y", "xPercent", "yPercent"]);
+export const POSITION_PROPS = new Set(["x", "y", "xPercent", "yPercent"]);
 const GSAP_CONFIG_KEYS = new Set([
   "duration",
   "ease",
@@ -56,22 +54,17 @@ export function readAllAnimatedProperties(
   group?: PropertyGroupName,
 ): Record<string, number> {
   const result: Record<string, number> = {};
-  if (!iframe?.contentWindow) return result;
-  let gsap: IframeGsap | undefined;
-  try {
-    gsap = (iframe.contentWindow as unknown as { gsap?: IframeGsap }).gsap;
-  } catch {
-    return result;
-  }
-  if (!gsap?.getProperty) return result;
+  if (!iframe) return result;
+  const gsap = getIframeGsap(iframe);
+  if (!gsap) return result;
+  const el = queryIframeElement(iframe, selector);
+  if (!el) return result;
   let doc: Document | null = null;
   try {
-    doc = iframe.contentDocument;
+    doc = iframe?.contentDocument ?? null;
   } catch {
-    return result;
+    /* cross-origin guard — doc stays null */
   }
-  const el = doc?.querySelector(selector);
-  if (!el) return result;
 
   const propKeys = new Set<string>();
   if (anim.keyframes) {
@@ -94,7 +87,7 @@ export function readAllAnimatedProperties(
   for (const prop of propKeys) {
     const val = Number(gsap.getProperty(el, prop));
     if (Number.isFinite(val)) {
-      result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : Math.round(val * 1000) / 1000;
+      result[prop] = POSITION_PROPS.has(prop) ? Math.round(val) : roundTo3(val);
     }
   }
 
@@ -166,7 +159,7 @@ export function readAllAnimatedProperties(
     if (!allTweenedProps.has(prop)) continue;
     const val = Number(gsap.getProperty(el, prop));
     if (Number.isFinite(val) && Math.round(val * 1000) !== Math.round(defaultVal * 1000)) {
-      result[prop] = Math.round(val * 1000) / 1000;
+      result[prop] = roundTo3(val);
     }
   }
 
@@ -208,7 +201,7 @@ export function readAllAnimatedProperties(
     }
     if (Number.isFinite(cssVal) && Math.round(gsapVal * 1000) === Math.round(cssVal * 1000))
       continue;
-    result[prop] = Math.round(gsapVal * 1000) / 1000;
+    result[prop] = roundTo3(gsapVal);
   }
 
   return result;