@hyperframes/studio 0.6.100 → 0.6.102

package/src/hooks/useDomEditSession.ts

@@ -9,7 +9,7 @@ import { useAskAgentModal } from "./useAskAgentModal";
 import { useDomSelection } from "./useDomSelection";
 import { usePreviewInteraction } from "./usePreviewInteraction";
 import { useDomEditCommits } from "./useDomEditCommits";
-import { runShadowDispatch } from "../utils/sdkShadow";
+import { runShadowDispatch, runShadowDelete } from "../utils/sdkShadow";
 import { useGsapScriptCommits } from "./useGsapScriptCommits";
 import { useGsapCacheVersion } from "./useGsapTweenCache";
 import { useDomEditWiring } from "./useDomEditWiring";
@@ -194,6 +194,7 @@ export function useDomEditSession({
     onCacheInvalidate: bumpGsapCache,
     onFileContentChanged: updateEditingFileContent,
     showToast,
+    sdkSession,
   });
 
   // ── DOM commit handlers ──
@@ -235,6 +236,7 @@ export function useDomEditSession({
     onDomEditPersisted: sdkSession
       ? (sel, ops) => runShadowDispatch(sdkSession, sel, ops)
       : undefined,
+    onElementDeleted: sdkSession ? (sel) => runShadowDelete(sdkSession, sel.hfId) : undefined,
   });
 
   // ── Wiring: selection sync, GSAP cache, preview sync, selection handlers ──
@@ -263,6 +265,9 @@ export function useDomEditSession({
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,
   } = useDomEditWiring({
+    // Pre-existing prop-drilling clone (same param set forwarded to
+    // useDomEditWiring); surfaced by this PR's adjacent edits, not introduced.
+    // fallow-ignore-next-line code-duplication
     projectId,
     activeCompPath,
     domEditSelection,

package/src/hooks/useDomGeometryCommits.ts

@@ -1,5 +1,4 @@
 import { useCallback } from "react";
-import { STUDIO_GSAP_DRAG_INTERCEPT_ENABLED } from "../components/editor/manualEditingAvailability";
 import { getDomEditTargetKey, type DomEditSelection } from "../components/editor/domEditing";
 import {
   applyStudioPathOffset,
@@ -19,45 +18,11 @@ import {
 } from "../components/editor/manualEditsDomPatches";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
 import type { PatchOperation } from "../utils/sourcePatcher";
+import { isElementGsapTargeted } from "./gsapTargetCache";
 
 export const GSAP_CSS_FALLBACK_BLOCKED_MESSAGE =
   "This element is GSAP-animated — dragging via CSS would corrupt keyframes";
 
-// ── Helpers ──
-
-type TimelineLike = { getChildren?: (nested: boolean) => Array<{ targets?: () => Element[] }> };
-
-// fallow-ignore-next-line complexity
-function isElementGsapTargeted(iframe: HTMLIFrameElement | null, element: HTMLElement): boolean {
-  // When the GSAP drag intercept is disabled for debugging, treat every
-  // element as un-targeted so commits take the plain CSS persist path.
-  if (!STUDIO_GSAP_DRAG_INTERCEPT_ENABLED) return false;
-  if (!iframe?.contentWindow) return false;
-  let timelines: Record<string, TimelineLike> | undefined;
-  try {
-    timelines = (iframe.contentWindow as Window & { __timelines?: Record<string, TimelineLike> })
-      .__timelines;
-  } catch {
-    return false;
-  }
-  if (!timelines) return false;
-  const id = element.id;
-  for (const tl of Object.values(timelines)) {
-    if (!tl?.getChildren) continue;
-    try {
-      for (const child of tl.getChildren(true)) {
-        if (!child.targets) continue;
-        for (const t of child.targets()) {
-          if (t === element || (id && t.id === id)) return true;
-        }
-      }
-    } catch {
-      continue;
-    }
-  }
-  return false;
-}
-
 // ── Hook ──
 
 interface UseDomGeometryCommitsParams {

package/src/hooks/useElementLifecycleOps.ts

@@ -31,6 +31,8 @@ interface UseElementLifecycleOpsParams {
     patches: PatchOperation[],
     options: { label: string; coalesceKey: string; skipRefresh?: boolean },
   ) => Promise<void>;
+  /** Stage 7 Step 3b: called after a successful server-side element delete (shadow). */
+  onElementDeleted?: (selection: DomEditSelection) => void;
 }
 
 export function useElementLifecycleOps({
@@ -43,6 +45,7 @@ export function useElementLifecycleOps({
   reloadPreview,
   clearDomSelection,
   commitPositionPatchToHtml,
+  onElementDeleted,
 }: UseElementLifecycleOpsParams) {
   // fallow-ignore-next-line complexity
   const handleDomEditElementDelete = useCallback(
@@ -103,6 +106,7 @@ export function useElementLifecycleOps({
         clearDomSelection();
         usePlayerStore.getState().setSelectedElementId(null);
         reloadPreview();
+        onElementDeleted?.(selection);
         showToast(`Deleted ${label}. Use Undo to restore it.`, "info");
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to delete element";
@@ -114,6 +118,7 @@ export function useElementLifecycleOps({
       clearDomSelection,
       domEditSaveTimestampRef,
       editHistory.recordEdit,
+      onElementDeleted,
       projectIdRef,
       reloadPreview,
       showToast,

package/src/hooks/useGsapAnimationOps.ts

@@ -1,6 +1,8 @@
 import { useCallback } from "react";
+import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { roundTo3 } from "../utils/rounding";
+import { runShadowGsapTween, type ShadowGsapOp } from "../utils/sdkShadow";
 import {
   assignGsapTargetAutoIdIfNeeded,
   ensureElementAddressable,
@@ -13,6 +15,8 @@ interface GsapAnimationOpsParams {
   commitMutation: CommitMutation;
   commitMutationSafely: SafeGsapCommitMutation;
   showToast: (message: string, tone?: "error" | "info") => void;
+  /** Stage 7 Step 3b: SDK session for shadow GSAP dispatch (server stays authoritative). */
+  sdkSession?: Composition | null;
 }
 
 export function useGsapAnimationOps({
@@ -21,6 +25,7 @@ export function useGsapAnimationOps({
   commitMutation,
   commitMutationSafely,
   showToast,
+  sdkSession,
 }: GsapAnimationOpsParams) {
   const updateGsapMeta = useCallback(
     (
@@ -28,27 +33,34 @@ export function useGsapAnimationOps({
       animationId: string,
       updates: { duration?: number; ease?: string; position?: number },
     ) => {
+      // Shadow op (server animationId shares the SDK id-space): existence via
+      // runShadowGsapTween (live session) + value fidelity via the chokepoint.
+      const shadowGsapOp: ShadowGsapOp = {
+        kind: "set",
+        animationId,
+        properties: { duration: updates.duration, ease: updates.ease, position: updates.position },
+      };
       commitMutationSafely(
         selection,
         { type: "update-meta", animationId, updates },
-        {
-          label: "Edit GSAP animation",
-          coalesceKey: `gsap:${animationId}:meta`,
-        },
+        { label: "Edit GSAP animation", coalesceKey: `gsap:${animationId}:meta`, shadowGsapOp },
       );
+      if (sdkSession) runShadowGsapTween(sdkSession, shadowGsapOp);
     },
-    [commitMutationSafely],
+    [commitMutationSafely, sdkSession],
   );
 
   const deleteGsapAnimation = useCallback(
     (selection: DomEditSelection, animationId: string) => {
+      const shadowGsapOp: ShadowGsapOp = { kind: "remove", animationId };
       commitMutationSafely(
         selection,
         { type: "delete", animationId, stripStudioEdits: true },
-        { label: "Delete GSAP animation" },
+        { label: "Delete GSAP animation", shadowGsapOp },
       );
+      if (sdkSession) runShadowGsapTween(sdkSession, shadowGsapOp);
     },
-    [commitMutationSafely],
+    [commitMutationSafely, sdkSession],
   );
 
   const deleteAllForSelector = useCallback(
@@ -62,7 +74,10 @@ export function useGsapAnimationOps({
     [commitMutation],
   );
 
+  // Pre-existing complexity (auto-id assignment + per-method defaults); this PR
+  // adds only a guarded shadow-op construction at the tail.
   const addGsapAnimation = useCallback(
+    // fallow-ignore-next-line complexity
     async (
       selection: DomEditSelection,
       method: "to" | "from" | "set" | "fromTo",
@@ -95,6 +110,26 @@ export function useGsapAnimationOps({
         fromTo: { x: 0, y: 0, opacity: 1 },
       };
 
+      // Shadow op (server stays authoritative). "set" has no SDK method, so it
+      // is not shadowed; otherwise: existence via runShadowGsapTween (live) +
+      // value fidelity via the chokepoint (shadowGsapOp in options).
+      const shadowGsapOp: ShadowGsapOp | undefined =
+        selection.hfId && method !== "set"
+          ? {
+              kind: "add",
+              target: selection.hfId,
+              tween: {
+                method,
+                position,
+                duration,
+                ease: "power2.out",
+                ...(method === "fromTo"
+                  ? { fromProperties: { opacity: 0 }, toProperties: toDefaults[method] }
+                  : { properties: toDefaults[method] ?? { opacity: 1 } }),
+              },
+            }
+          : undefined;
+
       await commitMutation(
         selection,
         {
@@ -107,10 +142,12 @@ export function useGsapAnimationOps({
           properties: toDefaults[method] ?? { opacity: 1 },
           fromProperties: method === "fromTo" ? { opacity: 0 } : undefined,
         },
-        { label: `Add GSAP ${method} animation` },
+        { label: `Add GSAP ${method} animation`, shadowGsapOp },
       );
+
+      if (sdkSession && shadowGsapOp) runShadowGsapTween(sdkSession, shadowGsapOp);
     },
-    [activeCompPath, commitMutation, projectIdRef, showToast],
+    [activeCompPath, commitMutation, projectIdRef, showToast, sdkSession],
   );
 
   return {

package/src/hooks/useGsapScriptCommits.ts

@@ -2,6 +2,7 @@ import { useCallback } from "react";
 import { findUnsafeMutationValues } from "@hyperframes/core/studio-api/finite-mutation";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { applySoftReload } from "../utils/gsapSoftReload";
+import { resolveGsapFidelityArgs, runShadowGsapFidelity } from "../utils/sdkShadowGsapFidelity";
 import { updateKeyframeCacheFromParsed } from "./gsapKeyframeCacheHelpers";
 import {
   GsapMutationHttpError,
@@ -43,7 +44,10 @@ async function mutateGsapScript(
 
 // oxfmt-ignore
 // fallow-ignore-next-line complexity
-export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast }: GsapScriptCommitsParams) {
+export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession }: GsapScriptCommitsParams) {
+  // Pre-existing complexity (server mutate + history + reload branches); this PR
+  // adds only a guarded shadow-fidelity dispatch.
+  // fallow-ignore-next-line complexity
   const commitMutation = useCallback(async (selection: DomEditSelection, mutation: Record<string, unknown>, options: CommitMutationOptions) => {
     const pid = projectIdRef.current;
     if (!pid) return;
@@ -64,6 +68,21 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
     }
     if (result.changed === false) return;
     domEditSaveTimestampRef.current = Date.now();
+    // Shadow value fidelity: diff the SDK's GSAP writer output against the
+    // server's, from the same pre-op file. Fire-and-forget; server authoritative.
+    // Only meta-level ops carry shadowGsapOp today (add / update-meta / delete via
+    // useGsapAnimationOps). Per-property and keyframe handlers (useGsapPropertyDebounce,
+    // useGsapKeyframeOps) intentionally don't synthesize one yet — deferred follow-up.
+    // scriptText is null when the composition has no GSAP script; nothing to diff.
+    const fidelityArgs = resolveGsapFidelityArgs(
+      sdkSession,
+      options.shadowGsapOp,
+      result.before,
+      result.scriptText,
+    );
+    if (fidelityArgs) {
+      void runShadowGsapFidelity(fidelityArgs.before, fidelityArgs.op, fidelityArgs.serverScript);
+    }
     if (result.before != null && result.after != null) {
       await editHistory.recordEdit({ label: options.label, kind: "manual", coalesceKey: options.coalesceKey, files: { [targetPath]: { before: result.before, after: result.after } } });
     }
@@ -77,11 +96,11 @@ export function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIfra
       reloadPreview();
     }
     onCacheInvalidate();
-  }, [projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast]);
+  }, [projectIdRef, activeCompPath, previewIframeRef, editHistory, domEditSaveTimestampRef, reloadPreview, onCacheInvalidate, onFileContentChanged, showToast, sdkSession]);
   const trackGsapSaveFailure = useGsapSaveFailureTelemetry(activeCompPath);
   const commitMutationSafely = useSafeGsapCommitMutation(commitMutation, trackGsapSaveFailure, showToast);
   const propertyOps = useGsapPropertyDebounce(commitMutationSafely);
-  const animationOps = useGsapAnimationOps({ projectIdRef, activeCompPath, commitMutation, commitMutationSafely, showToast });
+  const animationOps = useGsapAnimationOps({ projectIdRef, activeCompPath, commitMutation, commitMutationSafely, showToast, sdkSession });
   const keyframeOps = useGsapKeyframeOps({ activeCompPath, commitMutation, commitMutationSafely, trackGsapSaveFailure });
   const arcPathOps = useGsapArcPathOps(commitMutationSafely);
   return { commitMutation, ...propertyOps, ...animationOps, ...keyframeOps, ...arcPathOps };

package/src/hooks/useGsapTweenCache.ts

@@ -3,6 +3,10 @@ import type { GsapAnimation, GsapKeyframesData, ParsedGsap } from "@hyperframes/
 import type { GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeBridge";
+import {
+  clearKeyframeCacheForElement,
+  clearKeyframeCacheForFile,
+} from "./gsapKeyframeCacheHelpers";
 import { PROPERTY_DEFAULTS, toAbsoluteTime } from "./gsapShared";
 
 function deduplicateKeyframes(keyframes: GsapPercentageKeyframe[]): GsapPercentageKeyframe[] {
@@ -301,10 +305,7 @@ export function useGsapAnimationsForElement(
       if (kf.easeEach) easeEach = kf.easeEach;
     }
     if (allKeyframes.length === 0) {
-      const { keyframeCache, setKeyframeCache } = usePlayerStore.getState();
-      if (keyframeCache.has(`${sourceFile}#${elementId}`)) {
-        setKeyframeCache(`${sourceFile}#${elementId}`, undefined);
-      }
+      clearKeyframeCacheForElement(sourceFile, elementId);
       return;
     }
     const dedupedKeyframes = deduplicateKeyframes(allKeyframes);
@@ -358,14 +359,11 @@ export function usePopulateKeyframeCacheForFile(
     const sf = sourceFile;
     fetchParsedAnimations(projectId, sf).then((parsed) => {
       if (!parsed) return;
-      const { setKeyframeCache, keyframeCache } = usePlayerStore.getState();
-      const sfPrefix = `${sf}#`;
-      const fallbackPrefix = "index.html#";
-      for (const key of keyframeCache.keys()) {
-        if (key.startsWith(sfPrefix) || (sf !== "index.html" && key.startsWith(fallbackPrefix))) {
-          setKeyframeCache(key, undefined);
-        }
-      }
+      const { setKeyframeCache } = usePlayerStore.getState();
+      // Drop the file's stale entries (including the bare keys consumers read)
+      // before repopulating, so an element whose keyframes were removed and is
+      // absent from this scan doesn't keep showing diamonds.
+      clearKeyframeCacheForFile(sf);
       const { elements } = usePlayerStore.getState();
       const mergedByElement = new Map<string, GsapKeyframesData>();
       for (const anim of parsed.animations) {

package/src/hooks/useRazorSplit.ts

@@ -3,6 +3,7 @@ import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import { getTimelineElementLabel, collectHtmlIds } from "../utils/studioHelpers";
+import { trackStudioRazorSplit } from "../telemetry/events";
 import {
   canSplitElement,
   buildPatchTarget,
@@ -196,6 +197,7 @@ export function useRazorSplit({
         });
 
         reloadPreview();
+        trackStudioRazorSplit({ mode: "single", count: 1 });
         showToast(`Split ${getTimelineElementLabel(element)} at ${splitTime.toFixed(2)}s`, "info");
         if (skippedSelectors?.length) {
           showToast(
@@ -277,6 +279,7 @@ export function useRazorSplit({
         });
 
         reloadPreview();
+        trackStudioRazorSplit({ mode: "all", count: splitCount });
         showToast(`Split ${splitCount} clips at ${splitTime.toFixed(2)}s`, "info");
       } catch (error) {
         const message = error instanceof Error ? error.message : "Failed to split clips";

package/src/hooks/useSafeGsapCommitMutation.ts

@@ -1,20 +1,7 @@
 import { useCallback } from "react";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { getStudioSaveErrorMessage, trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
-
-type CommitMutationOptions = {
-  label: string;
-  coalesceKey?: string;
-  softReload?: boolean;
-  skipReload?: boolean;
-  beforeReload?: () => void;
-};
-
-type CommitMutation = (
-  selection: DomEditSelection,
-  mutation: Record<string, unknown>,
-  options: CommitMutationOptions,
-) => Promise<void>;
+import type { CommitMutation, CommitMutationOptions } from "./gsapScriptCommitTypes";
 
 type TrackGsapSaveFailure = (
   error: unknown,

package/src/hooks/useSdkSession.ts

@@ -20,12 +20,15 @@ export function shouldReloadSdkSession(payload: unknown, activeCompPath: string
  * (projectId, activeCompPath) change, disposes the old one on cleanup, and
  * re-opens it when the active composition file changes on disk (code editor,
  * agent, or server-side patch) so the in-memory linkedom document never goes
- * stale. The persist queue writes back to `activeCompPath` (not the
- * "composition.html" default).
+ * stale.
  *
- * The session is idle until Step 3c routes dispatch ops through it; re-opening
- * is therefore purely additive — no SDK self-write exists yet, so there is no
- * persist echo. Step 3c must add self-write suppression once dispatch writes.
+ * Opened WITHOUT a persist queue: this session is shadow-telemetry +
+ * selection-sync only — it reads from the server but must NEVER write back.
+ * Shadow dispatch ops mutate the in-memory model and are discarded on the next
+ * reload-on-change (the studio's own authoritative write triggers it). Routing
+ * authoritative writes through this session (cutover, Step 3c+) must re-add
+ * persist TOGETHER WITH self-write suppression — without it, the SDK's
+ * serialize() output races and clobbers the studio's authoritative write.
  */
 export function useSdkSession(
   projectId: string | null,
@@ -37,6 +40,9 @@ export function useSdkSession(
   // ── Re-open on external change to the active composition ──
   useEffect(() => {
     if (!activeCompPath) return;
+    // Pre-existing clone of the file-change reload handler (usePreviewPersistence);
+    // surfaced by this PR's adjacent edits, not introduced by it.
+    // fallow-ignore-next-line code-duplication
     const handler = (payload?: unknown) => {
       if (shouldReloadSdkSession(payload, activeCompPath)) {
         setReloadToken((t) => t + 1);
@@ -69,13 +75,10 @@ export function useSdkSession(
       .read(activeCompPath)
       .then(async (content) => {
         if (cancelled || typeof content !== "string") return;
-        comp = await openComposition(content, {
-          persist: adapter,
-          persistPath: activeCompPath,
-        });
-        comp.on("persist:error", (e) => {
-          console.warn("[sdk] persist:error", e.error);
-        });
+        // No persist — shadow/selection only; see the hook docstring. The SDK
+        // must not write back to the server while it shadows the authoritative
+        // studio path.
+        comp = await openComposition(content);
         // Cleanup may have fired while openComposition was awaited; dispose immediately.
         if (cancelled) {
           comp.dispose();

package/src/hooks/useTimelineEditing.ts

@@ -1,4 +1,11 @@
+// Pre-existing-complex timeline hook (DOM patch + GSAP position shift/scale +
+// playback-start resolution); this PR adds guarded shadow-timing dispatches in
+// the move/resize .then() chains, which nudges several callbacks over the CC
+// threshold. The added branches are telemetry-only.
+// fallow-ignore-file complexity
 import { useCallback, useRef } from "react";
+import type { Composition } from "@hyperframes/sdk";
+import { runShadowTiming } from "../utils/sdkShadow";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
 import { useRazorSplit } from "./useRazorSplit";
@@ -33,7 +40,7 @@ import type { PersistTimelineEditInput } from "./timelineEditingHelpers";
 
 // ── Types ──
 
-export interface RecordEditInput {
+interface RecordEditInput {
   label: string;
   kind: EditHistoryKind;
   coalesceKey?: string;
@@ -53,6 +60,8 @@ interface UseTimelineEditingOptions {
   pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
   uploadProjectFiles: (files: Iterable<File>, dir?: string) => Promise<string[]>;
   isRecordingRef?: React.RefObject<boolean>;
+  /** Stage 7 Step 3b: SDK session for shadow timing dispatch (server stays authoritative). */
+  sdkSession?: Composition | null;
 }
 
 // ── Hook ──
@@ -70,6 +79,7 @@ export function useTimelineEditing({
   pendingTimelineEditPathRef,
   uploadProjectFiles,
   isRecordingRef,
+  sdkSession,
 }: UseTimelineEditingOptions) {
   const projectIdRef = useRef(projectId);
   projectIdRef.current = projectId;
@@ -138,6 +148,11 @@ export function useTimelineEditing({
           value: String(updates.track),
         });
       }).then(() => {
+        if (sdkSession)
+          runShadowTiming(sdkSession, element.hfId, {
+            start: updates.start,
+            trackIndex: updates.track,
+          });
         const pid = projectIdRef.current;
         if (delta !== 0 && element.domId && pid) {
           return shiftGsapPositions(pid, filePath, element.domId, delta)
@@ -146,7 +161,7 @@ export function useTimelineEditing({
         }
       });
     },
-    [previewIframeRef, enqueueEdit, activeCompPath, reloadPreview],
+    [previewIframeRef, enqueueEdit, activeCompPath, reloadPreview, sdkSession],
   );
 
   const handleTimelineElementResize = useCallback(
@@ -190,6 +205,11 @@ export function useTimelineEditing({
         }
         return patched;
       }).then(() => {
+        if (sdkSession)
+          runShadowTiming(sdkSession, element.hfId, {
+            start: updates.start,
+            duration: updates.duration,
+          });
         const pid = projectIdRef.current;
         if (timingChanged && element.domId && pid) {
           return scaleGsapPositions(
@@ -207,7 +227,7 @@ export function useTimelineEditing({
         return reloadPreview();
       });
     },
-    [previewIframeRef, enqueueEdit, activeCompPath, reloadPreview],
+    [previewIframeRef, enqueueEdit, activeCompPath, reloadPreview, sdkSession],
   );
 
   const handleTimelineElementDelete = useCallback(

package/src/player/components/Timeline.tsx

@@ -3,6 +3,7 @@ import { useMusicBeatAnalysis } from "../../hooks/useMusicBeatAnalysis";
 import { isMusicTrack } from "../../utils/timelineInspector";
 import { remapBeatAnalysisToComposition } from "../../utils/beatEditActions";
 import { usePlayerStore, type TimelineElement } from "../store/playerStore";
+import { useExpandedTimelineElements } from "../hooks/useExpandedTimelineElements";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { EditPopover } from "./EditModal";
 import { defaultTimelineTheme, type TimelineTheme } from "./timelineTheme";
@@ -28,7 +29,10 @@ import {
   shouldShowTimelineShortcutHint,
 } from "./timelineLayout";
 import type { TimelineDropCallbacks } from "./timelineCallbacks";
-import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
+import {
+  useResolvedTimelineEditCallbacks,
+  type TimelineEditOverrides,
+} from "./useResolvedTimelineEditCallbacks";
 
 // Re-export pure utilities so existing imports from "./Timeline" still resolve.
 export {
@@ -45,7 +49,7 @@ export {
   getDefaultDroppedTrack,
 } from "./timelineLayout";
 
-interface TimelineProps extends TimelineDropCallbacks {
+interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides {
   onSeek?: (time: number) => void;
   onDrillDown?: (element: TimelineElement) => void;
   renderClipContent?: (
@@ -67,6 +71,10 @@ export const Timeline = memo(function Timeline({
   onAssetDrop,
   onBlockDrop,
   onDeleteElement: _onDeleteElement,
+  onMoveElement: onMoveElementOverride,
+  onResizeElement: onResizeElementOverride,
+  onBlockedEditAttempt: onBlockedEditAttemptOverride,
+  onSplitElement: onSplitElementOverride,
   onSelectElement,
   theme: themeOverrides,
 }: TimelineProps = {}) {
@@ -80,14 +88,18 @@ export const Timeline = memo(function Timeline({
     onDeleteAllKeyframes,
     onChangeKeyframeEase,
     onMoveKeyframe,
-  } = useTimelineEditContext();
+  } = useResolvedTimelineEditCallbacks({
+    onMoveElement: onMoveElementOverride,
+    onResizeElement: onResizeElementOverride,
+    onBlockedEditAttempt: onBlockedEditAttemptOverride,
+    onSplitElement: onSplitElementOverride,
+  });
   const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
   useMusicBeatAnalysis();
-  const elements = usePlayerStore((s) => s.elements);
+  const rawElements = usePlayerStore((s) => s.elements);
+  const expandedElements = useExpandedTimelineElements();
   const beatAnalysis = usePlayerStore((s) => s.beatAnalysis);
   const musicElement = usePlayerStore((s) => s.elements.find(isMusicTrack) ?? null);
-
-  // Merge user edits + remap beats from audio-file → composition coordinates.
   const beatEdits = usePlayerStore((s) => s.beatEdits);
   const adjustedBeatAnalysis = useMemo(
     () => remapBeatAnalysisToComposition(beatAnalysis, musicElement, beatEdits),
@@ -176,21 +188,21 @@ export const Timeline = memo(function Timeline({
 
   const effectiveDuration = useMemo(() => {
     const safeDur = Number.isFinite(duration) ? duration : 0;
-    if (elements.length === 0) return safeDur;
-    const maxEnd = Math.max(...elements.map((el) => el.start + el.duration));
+    if (rawElements.length === 0) return safeDur;
+    const maxEnd = Math.max(...rawElements.map((el) => el.start + el.duration));
     const result = Math.max(safeDur, maxEnd);
     return Number.isFinite(result) ? result : safeDur;
-  }, [elements, duration]);
+  }, [rawElements, duration]);
 
   const tracks = useMemo(() => {
-    const map = new Map<number, typeof elements>();
-    for (const el of elements) {
+    const map = new Map<number, typeof expandedElements>();
+    for (const el of expandedElements) {
       const list = map.get(el.track) ?? [];
       list.push(el);
       map.set(el.track, list);
     }
     return Array.from(map.entries()).sort(([a], [b]) => a - b);
-  }, [elements]);
+  }, [expandedElements]);
 
   const trackStyles = useMemo(() => {
     const map = new Map<number, TrackVisualStyle>();
@@ -247,8 +259,9 @@ export const Timeline = memo(function Timeline({
   const toggleSelectedKeyframe = usePlayerStore((s) => s.toggleSelectedKeyframe);
 
   const selectedElement = useMemo(
-    () => elements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
-    [elements, selectedElementId],
+    () =>
+      expandedElements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
+    [expandedElements, selectedElementId],
   );
   const selectedElementRef = useRef<TimelineElement | null>(selectedElement);
   selectedElementRef.current = selectedElement;
@@ -283,7 +296,7 @@ export const Timeline = memo(function Timeline({
     effectiveDuration,
     pps,
     timelineReady,
-    elementsLength: elements.length,
+    elementsLength: expandedElements.length,
     setZoomMode,
     setManualZoomPercent,
     onSeek,
@@ -332,7 +345,7 @@ export const Timeline = memo(function Timeline({
 
   useEffect(() => {
     syncShortcutHintVisibility();
-  }, [syncShortcutHintVisibility, timelineReady, elements.length, totalH]);
+  }, [syncShortcutHintVisibility, timelineReady, expandedElements.length, totalH]);
 
   const getPreviewElement = useCallback(
     (element: TimelineElement): TimelineElement => {
@@ -362,7 +375,7 @@ export const Timeline = memo(function Timeline({
     onBlockDrop,
   });
 
-  if (!timelineReady || elements.length === 0) {
+  if (!timelineReady || expandedElements.length === 0) {
     return (
       <TimelineEmptyState
         isDragOver={isDragOver}
@@ -482,7 +495,7 @@ export const Timeline = memo(function Timeline({
             }
           }}
           onContextMenuKeyframe={(e, elId, pct) => {
-            const el = elements.find((x) => (x.key ?? x.id) === elId);
+            const el = expandedElements.find((x) => (x.key ?? x.id) === elId);
             if (el) {
               setSelectedElementId(elId);
               onSelectElement?.(el);