fix(studio): remove keyframe dragging from the timeline

Dragging timeline keyframe diamonds was unreliable — clip<->tween percentage
remapping, an optimistic-hold workaround, and an intermittent no-op/revert when
the GSAP session lagged the drag (its own comments document the flakiness). Remove
the drag interaction entirely: diamonds still display, click-to-seek, and offer the
context menu (add/remove/ease) — keyframe timing is edited via the playhead + panel,
which are deterministic. Deletes the keyframe-move plan module + its wiring through
TimelineClipDiamonds -> TimelineCanvas -> Timeline -> TimelineEditContext.

Author: miguel-heygen

packages/studio/src/components/StudioPreviewArea.tsx

@@ -21,8 +21,6 @@ import { useDomEditActionsContext, useDomEditSelectionContext } from "../context
 import { TimelineEditProvider } from "../contexts/TimelineEditContext";
 import type { BlockPreviewInfo } from "./sidebar/BlocksTab";
 import { readStudioUiPreferences } from "../utils/studioUiPreferences";
-import { fetchParsedAnimations } from "../hooks/useGsapTweenCache";
-import { pickKeyframeTween, computeKeyframeMovePlan } from "./editor/keyframeMove";
 import type { GestureRecordingState } from "./editor/GestureRecordControl";
 
 export interface StudioPreviewAreaProps {
@@ -182,45 +180,6 @@ export function StudioPreviewArea({
         }
       },
       // fallow-ignore-next-line complexity
-      onMoveKeyframe: async (_el: TimelineElement, oldPct: number, newPct: number) => {
-        // Resolve the dragged element's selection + parsed animations on demand
-        // (both awaited and cached) rather than relying on the async DOM-edit
-        // session being loaded for this element — that coupling made the commit
-        // intermittently no-op (revert) when dragging before the session caught up.
-        if (!projectId) return;
-        const sourceFile = _el.sourceFile || activeCompPath || "index.html";
-        const [selection, parsed] = await Promise.all([
-          buildDomSelectionForTimelineElement(_el),
-          fetchParsedAnimations(projectId, sourceFile),
-        ]);
-        if (!selection || !parsed) return;
-
-        const cached = usePlayerStore.getState().keyframeCache.get(_el.key ?? _el.id);
-        const cachedKf = cached?.keyframes.find((k) => Math.abs(k.percentage - oldPct) < 0.2);
-        const origAbsTime = _el.start + (oldPct / 100) * _el.duration;
-        const anim = pickKeyframeTween(
-          parsed.animations,
-          _el,
-          origAbsTime,
-          cachedKf?.propertyGroup,
-        );
-        if (!anim) return;
-
-        const plan = computeKeyframeMovePlan(
-          anim,
-          cachedKf?.tweenPercentage ?? oldPct,
-          _el,
-          newPct,
-        );
-        if (plan.meta) handleGsapUpdateMeta(anim.id, plan.meta, selection);
-        for (const pct of plan.removes) handleGsapRemoveKeyframe(anim.id, pct, selection);
-        for (const add of plan.adds) {
-          for (const [prop, val] of Object.entries(add.properties)) {
-            handleGsapAddKeyframe(anim.id, add.pct, prop, val, selection);
-          }
-        }
-      },
-      // fallow-ignore-next-line complexity
       onToggleKeyframeAtPlayhead: (el: TimelineElement) => {
         const currentTime = usePlayerStore.getState().currentTime;
         const pct =

packages/studio/src/components/editor/keyframeMove.test.ts

@@ -39,7 +39,6 @@ export function TimelineEditProvider({
       value.onDeleteKeyframe,
       value.onDeleteAllKeyframes,
       value.onChangeKeyframeEase,
-      value.onMoveKeyframe,
       value.onToggleKeyframeAtPlayhead,
     ],
   );

packages/studio/src/components/editor/keyframeMove.ts

@@ -20,7 +20,6 @@ import {
   type KeyframeDiamondContextMenuState,
 } from "./KeyframeDiamondContextMenu";
 import { useTimelineClipDrag } from "./useTimelineClipDrag";
-import { snapKeyframePctToBeat } from "./timelineEditing";
 import { ClipContextMenu } from "./ClipContextMenu";
 import {
   GUTTER,
@@ -87,7 +86,6 @@ export const Timeline = memo(function Timeline({
     onDeleteKeyframe,
     onDeleteAllKeyframes,
     onChangeKeyframeEase,
-    onMoveKeyframe,
   } = useResolvedTimelineEditCallbacks({
     onMoveElement: onMoveElementOverride,
     onResizeElement: onResizeElementOverride,
@@ -481,19 +479,6 @@ export const Timeline = memo(function Timeline({
           onShiftClickKeyframe={(elId, pct) => {
             toggleSelectedKeyframe(`${elId}:${pct}`);
           }}
-          onDragKeyframe={(el, oldPct, newPct) => {
-            onMoveKeyframe?.(el, oldPct, newPct);
-          }}
-          onSnapKeyframePct={(el, pct) =>
-            snapKeyframePctToBeat(el, pct, adjustedBeatAnalysis?.beatTimes, pps)
-          }
-          onPickKeyframeElement={(el) => {
-            const elKey = el.key ?? el.id;
-            if (selectedElementId !== elKey) {
-              setSelectedElementId(elKey);
-              onSelectElement?.(el);
-            }
-          }}
           onContextMenuKeyframe={(e, elId, pct) => {
             const el = expandedElements.find((x) => (x.key ?? x.id) === elId);
             if (el) {

packages/studio/src/contexts/TimelineEditContext.tsx

@@ -91,11 +91,6 @@ interface TimelineCanvasProps {
   currentTime: number;
   onClickKeyframe?: (element: TimelineElement, percentage: number) => void;
   onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
-  onDragKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
-  /** Snap a keyframe's clip-relative % to the nearest beat (returns unchanged when none in range). */
-  onSnapKeyframePct?: (element: TimelineElement, pct: number) => number;
-  /** Select the element when a keyframe drag starts (loads its GSAP session). */
-  onPickKeyframeElement?: (element: TimelineElement) => void;
   onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
   onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
   beatAnalysis?: MusicBeatAnalysis | null;
@@ -143,9 +138,6 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   currentTime,
   onClickKeyframe,
   onShiftClickKeyframe,
-  onDragKeyframe,
-  onSnapKeyframePct,
-  onPickKeyframeElement,
   onContextMenuKeyframe,
   onContextMenuClip,
   beatAnalysis,
@@ -446,11 +438,6 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                         selectedKeyframes={selectedKeyframes}
                         onClickKeyframe={(pct) => onClickKeyframe?.(previewElement, pct)}
                         onShiftClickKeyframe={onShiftClickKeyframe}
-                        onDragKeyframe={(oldPct, newPct) =>
-                          onDragKeyframe?.(previewElement, oldPct, newPct)
-                        }
-                        snapPct={(pct) => onSnapKeyframePct?.(previewElement, pct) ?? pct}
-                        onPickForDrag={() => onPickKeyframeElement?.(previewElement)}
                         onContextMenuKeyframe={onContextMenuKeyframe}
                       />
                     )}