@hyperframes/studio 0.6.91 → 0.6.92

package/src/hooks/useGestureCommit.ts

@@ -7,10 +7,13 @@ import { useGestureRecording } from "./useGestureRecording";
 import { simplifyGestureSamples } from "../utils/rdpSimplify";
 import { usePlayerStore } from "../player";
 import type { DomEditSelection } from "../components/editor/domEditing";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { classifyPropertyGroup } from "@hyperframes/core/gsap-parser";
 
 // Minimal subset of the session used by gesture commit
 interface GestureSessionRef {
   domEditSelection: DomEditSelection | null;
+  selectedGsapAnimations?: GsapAnimation[];
   commitMutation?: (
     mutation: Record<string, unknown>,
     options: { label: string; softReload?: boolean },
@@ -43,6 +46,9 @@ export function useGestureCommit({
   const recordingAutoStopRef = useRef<ReturnType<typeof setInterval>>(undefined);
   const recordingStartTimeRef = useRef(0);
   const commitInFlightRef = useRef(false);
+  // Capture selection at recording start so commit always targets the recorded element,
+  // even if the user's selection changes mid-recording.
+  const capturedSelectionRef = useRef<DomEditSelection | null>(null);
 
   // Unmount: clear auto-stop interval
   useEffect(() => () => clearInterval(recordingAutoStopRef.current), []);
@@ -50,7 +56,9 @@ export function useGestureCommit({
   // fallow-ignore-next-line complexity
   const stopAndCommitRecording = useCallback(async () => {
     clearInterval(recordingAutoStopRef.current);
-    if (commitInFlightRef.current) return;
+    if (commitInFlightRef.current) {
+      return;
+    }
     commitInFlightRef.current = true;
     gestureStateRef.current = "idle";
     isGestureRecordingRef.current = false;
@@ -59,7 +67,7 @@ export function useGestureCommit({
     store.setIsPlaying(false);
     try {
       const liveSession = domEditSessionRef.current;
-      const sel = liveSession.domEditSelection;
+      const sel = capturedSelectionRef.current;
       if (!sel) {
         if (frozenSamples.length > 2) {
           showToast("Selection lost during recording", "error");
@@ -77,7 +85,13 @@ export function useGestureCommit({
         return;
       }
 
-      const simplified = simplifyGestureSamples(frozenSamples, duration, 5);
+      // Per-property epsilon: small-range properties (opacity 0–1, scale ~0.01–10)
+      // need a much tighter tolerance than positional properties (x/y in px).
+      const simplified = simplifyGestureSamples(frozenSamples, duration, (key) => {
+        if (key === "opacity") return 0.01;
+        if (key === "scale" || key === "scaleX" || key === "scaleY") return 0.01;
+        return 5;
+      });
       const sortedPcts = Array.from(simplified.keys()).sort((a, b) => a - b);
 
       // Ensure a 0% keyframe exists with the element's start-of-recording position
@@ -97,19 +111,90 @@ export function useGestureCommit({
           percentage: pct,
           properties: simplified.get(pct) as Record<string, number | string>,
         }));
-
-        await liveSession.commitMutation(
-          {
-            type: "add-with-keyframes",
-            targetSelector: selector,
-            position: Math.round(recStart * 1000) / 1000,
-            duration: Math.round(duration * 1000) / 1000,
-            keyframes,
-          },
-          { label: "Gesture recording", softReload: true },
+        const hasPositionProps = keyframes.some((kf) =>
+          Object.keys(kf.properties).some((k) => classifyPropertyGroup(k) === "position"),
         );
+        const allAnims = liveSession.selectedGsapAnimations ?? [];
+        const existingPositionTween = hasPositionProps
+          ? allAnims.find((a) => a.propertyGroup === "position" && a.targetSelector === selector)
+          : undefined;
+        if (existingPositionTween) {
+          const tweenStart = existingPositionTween.resolvedStart ?? 0;
+          const tweenDur = existingPositionTween.duration ?? duration;
+          const tweenEnd = tweenStart + tweenDur;
+          const recEnd = recStart + duration;
+
+          // Only merge if the recording overlaps the existing tween's time range.
+          // No overlap → fall through to add-with-keyframes (creates a separate tween).
+          const overlaps = recStart < tweenEnd + 0.05 && recEnd > tweenStart - 0.05;
+
+          if (overlaps) {
+            const existingKfs = existingPositionTween.keyframes?.keyframes ?? [];
+            const rangeStartPct =
+              tweenDur > 0 ? Math.max(0, ((recStart - tweenStart) / tweenDur) * 100) : 0;
+            const rangeEndPct =
+              tweenDur > 0 ? Math.min(100, ((recEnd - tweenStart) / tweenDur) * 100) : 100;
+
+            const preserved = existingKfs
+              .filter(
+                (kf) => kf.percentage < rangeStartPct - 0.5 || kf.percentage > rangeEndPct + 0.5,
+              )
+              .map((kf) => ({
+                percentage: kf.percentage,
+                properties: kf.properties,
+                ...(kf.ease ? { ease: kf.ease } : {}),
+              }));
+
+            const mapped = keyframes.map((kf) => ({
+              percentage: rangeStartPct + (kf.percentage / 100) * (rangeEndPct - rangeStartPct),
+              properties: kf.properties,
+            }));
+
+            const merged = [...preserved, ...mapped].sort((a, b) => a.percentage - b.percentage);
+
+            await liveSession.commitMutation(
+              {
+                type: "replace-with-keyframes",
+                animationId: existingPositionTween.id,
+                targetSelector: selector,
+                position:
+                  typeof existingPositionTween.position === "number"
+                    ? existingPositionTween.position
+                    : tweenStart,
+                duration: tweenDur,
+                keyframes: merged,
+              },
+              { label: "Gesture recording (merge)", softReload: true },
+            );
+          } else {
+            await liveSession.commitMutation(
+              {
+                type: "add-with-keyframes",
+                targetSelector: selector,
+                position: Math.round(recStart * 1000) / 1000,
+                duration: Math.round(duration * 1000) / 1000,
+                keyframes,
+              },
+              { label: "Gesture recording (new range)", softReload: true },
+            );
+          }
+        } else {
+          await liveSession.commitMutation(
+            {
+              type: "add-with-keyframes",
+              targetSelector: selector,
+              position: Math.round(recStart * 1000) / 1000,
+              duration: Math.round(duration * 1000) / 1000,
+              keyframes,
+            },
+            { label: "Gesture recording", softReload: true },
+          );
+        }
       }
       showToast(`Recorded ${sortedPcts.length} keyframes`, "info");
+    } catch (err) {
+      console.error("[GR:error]", err);
+      showToast(`Gesture commit failed: ${err}`, "error");
     } finally {
       store.requestSeek(recordingStartTimeRef.current);
       gestureRecording.clearSamples();
@@ -139,6 +224,7 @@ export function useGestureCommit({
     const elStart = Number.parseFloat(sel.dataAttributes?.start ?? "0") || 0;
     const elDur = Number.parseFloat(sel.dataAttributes?.duration ?? "0") || 0;
     const elementEnd = elDur > 0 ? elStart + elDur : undefined;
+    capturedSelectionRef.current = sel;
     gestureRecording.startRecording(sel.element, iframe, elementEnd);
     gestureStateRef.current = "recording";
     isGestureRecordingRef.current = true;

package/src/hooks/useGestureRecording.ts

@@ -126,8 +126,12 @@ function applyRuntimePreview(
 
 function recordSample(r: RecordingRefs, time: number, properties: Record<string, number>): void {
   const sampleProps = { ...properties };
-  if ("x" in sampleProps) sampleProps.x -= r.cssVarOffset.x;
-  if ("y" in sampleProps) sampleProps.y -= r.cssVarOffset.y;
+  // Subtract both the CSS var offset AND the pointer-element snap offset
+  // so the first sample doesn't include the snap-to-cursor jump.
+  if ("x" in sampleProps)
+    sampleProps.x -= r.cssVarOffset.x + r.pointerElementOffset.x / (r.scale || 1);
+  if ("y" in sampleProps)
+    sampleProps.y -= r.cssVarOffset.y + r.pointerElementOffset.y / (r.scale || 1);
   r.samples.push({ time, properties: sampleProps });
   r.trail.push({ x: r.pointer.x, y: r.pointer.y });
 }
@@ -307,6 +311,18 @@ export function useGestureRecording() {
       };
 
       const handleWheel = (e: WheelEvent) => {
+        // Capture startPointer on first wheel if no pointermove has fired yet,
+        // preventing an enormous bogus first keyframe from stale startPointer.
+        if (!r.hasMoved) {
+          r.startPointer = { x: r.pointer.x, y: r.pointer.y };
+          r.pointerElementOffset = {
+            x: r.pointer.x - elCenterViewport.x,
+            y: r.pointer.y - elCenterViewport.y,
+          };
+          r.basePosition.x += r.pointerElementOffset.x / iframeScale;
+          r.basePosition.y += r.pointerElementOffset.y / iframeScale;
+          r.hasMoved = true;
+        }
         r.scrollDelta += e.deltaY;
         r.modifiers = { shift: e.shiftKey, alt: e.altKey, meta: e.metaKey || e.ctrlKey };
       };

package/src/hooks/useGsapScriptCommits.ts

@@ -51,6 +51,7 @@ function ensureElementAddressable(selection: DomEditSelection): {
 
 interface MutationResult {
   ok: boolean;
+  changed?: boolean;
   parsed?: ParsedGsap;
   before?: string;
   after?: string;
@@ -131,9 +132,16 @@ export function useGsapScriptCommits({
       const pid = projectIdRef.current;
       if (!pid) return;
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
-
       const result = await mutateGsapScript(pid, targetPath, mutation);
-      if (!result?.ok) return;
+      if (!result) {
+        if (options.skipReload) return;
+        throw new Error(`Mutation failed: ${mutation.type}`);
+      }
+
+      if (result.changed === false) {
+        if (options.skipReload) return;
+        return;
+      }
 
       domEditSaveTimestampRef.current = Date.now();
 
@@ -252,6 +260,16 @@ export function useGsapScriptCommits({
     },
     [commitMutation],
   );
+  const deleteAllForSelector = useCallback(
+    (selection: DomEditSelection, targetSelector: string) => {
+      void commitMutation(
+        selection,
+        { type: "delete-all-for-selector", targetSelector },
+        { label: "Delete all animations for element" },
+      );
+    },
+    [commitMutation],
+  );
   const addGsapAnimation = useCallback(
     // fallow-ignore-next-line complexity
     async (
@@ -441,7 +459,9 @@ export function useGsapScriptCommits({
         apply: () => {
           const prev = readKeyframeSnapshot(sf, elementId);
           if (prev) {
-            const newKeyframes = prev.keyframes.filter((kf) => kf.percentage !== percentage);
+            const newKeyframes = prev.keyframes.filter(
+              (kf) => Math.abs((kf.tweenPercentage ?? kf.percentage) - percentage) > 0.2,
+            );
             writeKeyframeCache(sf, elementId, { ...prev, keyframes: newKeyframes });
           }
           return prev;
@@ -548,6 +568,7 @@ export function useGsapScriptCommits({
     updateGsapProperty,
     updateGsapMeta,
     deleteGsapAnimation,
+    deleteAllForSelector,
     addGsapAnimation,
     addGsapProperty,
     removeGsapProperty,

package/src/hooks/useGsapSelectionHandlers.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useRef } from "react";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { usePlayerStore } from "../player";
 
@@ -13,6 +13,7 @@ export function useGsapSelectionHandlers({
   updateGsapProperty,
   updateGsapMeta,
   deleteGsapAnimation,
+  deleteAllForSelector,
   addGsapAnimation,
   addGsapProperty,
   removeGsapProperty,
@@ -40,6 +41,7 @@ export function useGsapSelectionHandlers({
     updates: { duration?: number; ease?: string; position?: number },
   ) => void;
   deleteGsapAnimation: (sel: DomEditSelection, animId: string) => void;
+  deleteAllForSelector: (sel: DomEditSelection, targetSelector: string) => void;
   addGsapAnimation: (
     sel: DomEditSelection,
     method: "to" | "from" | "set" | "fromTo",
@@ -79,6 +81,9 @@ export function useGsapSelectionHandlers({
   handleDomManualEditsReset: (sel: DomEditSelection) => void;
   selectedGsapAnimations: { id: string; keyframes?: unknown }[];
 }) {
+  const lastSelectionRef = useRef<DomEditSelection | null>(null);
+  if (domEditSelection) lastSelectionRef.current = domEditSelection;
+
   const handleGsapUpdateProperty = useCallback(
     (animId: string, prop: string, value: number | string) => {
       if (!domEditSelection) return;
@@ -97,12 +102,22 @@ export function useGsapSelectionHandlers({
 
   const handleGsapDeleteAnimation = useCallback(
     (animId: string) => {
-      if (!domEditSelection) return;
-      deleteGsapAnimation(domEditSelection, animId);
+      const sel = domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      deleteGsapAnimation(sel, animId);
     },
     [domEditSelection, deleteGsapAnimation],
   );
 
+  const handleGsapDeleteAllForElement = useCallback(
+    (targetSelector: string) => {
+      const sel = domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      deleteAllForSelector(sel, targetSelector);
+    },
+    [domEditSelection, deleteAllForSelector],
+  );
+
   const handleGsapAddAnimation = useCallback(
     (method: "to" | "from" | "set" | "fromTo") => {
       if (!domEditSelection) return;
@@ -205,6 +220,7 @@ export function useGsapSelectionHandlers({
     handleGsapUpdateProperty,
     handleGsapUpdateMeta,
     handleGsapDeleteAnimation,
+    handleGsapDeleteAllForElement,
     handleGsapAddAnimation,
     handleGsapAddProperty,
     handleGsapRemoveProperty,

package/src/hooks/useGsapTweenCache.ts

@@ -264,9 +264,11 @@ export function useGsapAnimationsForElement(
       (el) => el.domId === elementId || (el.key ?? el.id) === `${sourceFile}#${elementId}`,
     );
     const elStart = timelineEl?.start ?? 0;
-    const elDuration = timelineEl?.duration ?? 4;
+    const elDuration = timelineEl?.duration ?? 1;
 
-    const allKeyframes: GsapKeyframesData["keyframes"] = [];
+    const allKeyframes: Array<
+      GsapKeyframesData["keyframes"][0] & { tweenPercentage?: number; propertyGroup?: string }
+    > = [];
     let format: GsapKeyframesData["format"] = "percentage";
     let ease: string | undefined;
     let easeEach: string | undefined;
@@ -275,7 +277,8 @@ export function useGsapAnimationsForElement(
       if (!kf) continue;
       // Convert tween-relative percentages to clip-relative so diamonds
       // render at the correct position within the timeline clip.
-      const tweenPos = typeof anim.position === "number" ? anim.position : 0;
+      const tweenPos =
+        anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
       const tweenDur = anim.duration ?? elDuration;
       for (const k of kf.keyframes) {
         const absTime = tweenPos + (k.percentage / 100) * tweenDur;
@@ -283,7 +286,12 @@ export function useGsapAnimationsForElement(
           elDuration > 0
             ? Math.round(((absTime - elStart) / elDuration) * 1000) / 10
             : k.percentage;
-        allKeyframes.push({ ...k, percentage: clipPct });
+        allKeyframes.push({
+          ...k,
+          percentage: clipPct,
+          tweenPercentage: k.percentage,
+          propertyGroup: anim.propertyGroup,
+        });
       }
       format = kf.format;
       if (kf.ease) ease = kf.ease;
@@ -305,6 +313,9 @@ export function useGsapAnimationsForElement(
     };
     const { setKeyframeCache } = usePlayerStore.getState();
     setKeyframeCache(`${sourceFile}#${elementId}`, merged);
+    // PropertyPanel reads the cache by bare elementId (without sourceFile prefix),
+    // so write a duplicate entry under the bare key for cross-component lookups.
+    setKeyframeCache(elementId, merged);
   }, [elementId, sourceFile, animations]);
 
   return { animations, multipleTimelines, unsupportedTimelinePattern };
@@ -327,13 +338,14 @@ export function usePopulateKeyframeCacheForFile(
   version: number,
   iframeRef?: React.RefObject<HTMLIFrameElement | null>,
 ): void {
+  const elementCount = usePlayerStore((s) => s.elements.length);
   const lastFetchKeyRef = useRef("");
 
   const runtimeScanDoneRef = useRef("");
   const astFetchDoneRef = useRef("");
 
   useEffect(() => {
-    const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}`;
+    const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}:${elementCount}`;
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
     runtimeScanDoneRef.current = "";
@@ -358,21 +370,26 @@ export function usePopulateKeyframeCacheForFile(
         if (!id) continue;
         const kfData = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
         if (!kfData) continue;
-        // Convert tween-relative percentages to clip-relative.
-        const tweenPos = typeof anim.position === "number" ? anim.position : 0;
+        const tweenPos =
+          anim.resolvedStart ?? (typeof anim.position === "number" ? anim.position : 0);
         const tweenDur = anim.duration ?? 1;
         const timelineEl = elements.find(
           (el) => el.domId === id || (el.key ?? el.id) === `${sf}#${id}`,
         );
         const elStart = timelineEl?.start ?? 0;
-        const elDuration = timelineEl?.duration ?? 4;
+        const elDuration = timelineEl?.duration ?? 1;
         const clipKeyframes = kfData.keyframes.map((kf) => {
           const absTime = tweenPos + (kf.percentage / 100) * tweenDur;
           const clipPct =
             elDuration > 0
               ? Math.round(((absTime - elStart) / elDuration) * 1000) / 10
               : kf.percentage;
-          return { ...kf, percentage: clipPct };
+          return {
+            ...kf,
+            percentage: clipPct,
+            tweenPercentage: kf.percentage,
+            propertyGroup: anim.propertyGroup,
+          };
         });
         const existing = mergedByElement.get(id);
         if (existing) {
@@ -388,7 +405,10 @@ export function usePopulateKeyframeCacheForFile(
       }
       astFetchDoneRef.current = fetchKey;
     });
-  }, [projectId, sourceFile, version]);
+    // elementCount is in the deps because new timeline elements (e.g. after a
+    // sub-composition expand) need their keyframe cache populated immediately;
+    // without it the effect won't re-run when elements appear/disappear.
+  }, [projectId, sourceFile, version, elementCount]);
 
   // Separate effect for runtime keyframe discovery — polls until the iframe
   // has loaded GSAP timelines, independent of the AST fetch lifecycle.

package/src/hooks/useRazorSplit.ts

@@ -7,7 +7,7 @@ import {
   canSplitElement,
   buildPatchTarget,
   readFileContent,
-  SPLIT_BOUNDARY_EPSILON_S,
+  isSplitTimeWithinBounds,
 } from "../utils/timelineElementSplit";
 import type { RecordEditInput } from "./useTimelineEditing";
 
@@ -171,12 +171,7 @@ export function useRazorSplit({
       const pid = projectIdRef.current;
       if (!pid || !canSplitElement(element)) return;
 
-      const clipStart = element.start;
-      const clipEnd = element.start + element.duration;
-      if (
-        splitTime <= clipStart + SPLIT_BOUNDARY_EPSILON_S ||
-        splitTime >= clipEnd - SPLIT_BOUNDARY_EPSILON_S
-      ) {
+      if (!isSplitTimeWithinBounds(splitTime, element.start, element.duration)) {
         return;
       }
 

package/src/player/components/ClipContextMenu.tsx

@@ -1,4 +1,5 @@
 import { memo } from "react";
+import { createPortal } from "react-dom";
 import type { TimelineElement } from "../store/playerStore";
 import { canSplitElement } from "../../utils/timelineElementSplit";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
@@ -24,8 +25,11 @@ export const ClipContextMenu = memo(function ClipContextMenu({
 }: ClipContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
 
-  const adjustedX = Math.min(x, window.innerWidth - 200);
-  const adjustedY = Math.min(y, window.innerHeight - 200);
+  const menuWidth = 200;
+  const menuHeight = 80;
+  const overflowY = y + menuHeight - window.innerHeight;
+  const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
+  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
 
   const isSplittable = canSplitElement(element) && ["video", "audio", "img"].includes(element.tag);
   const canSplit =
@@ -37,7 +41,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       ? `Split at ${currentTime.toFixed(2)}s`
       : "Split (move playhead inside clip)";
 
-  return (
+  return createPortal(
     <div
       ref={menuRef}
       className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
@@ -78,6 +82,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
         <span>Delete</span>
         <span className="text-neutral-500 text-[10px] ml-3">⌫</span>
       </button>
-    </div>
+    </div>,
+    document.body,
   );
 });

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -1,5 +1,5 @@
-import { memo, useRef } from "react";
-import { EASE_LABELS } from "../../components/editor/gsapAnimationConstants";
+import { memo } from "react";
+import { createPortal } from "react-dom";
 import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
 
 export interface KeyframeDiamondContextMenuState {
@@ -7,6 +7,7 @@ export interface KeyframeDiamondContextMenuState {
   y: number;
   elementId: string;
   percentage: number;
+  tweenPercentage?: number;
   currentEase?: string;
 }
 
@@ -15,105 +16,36 @@ interface KeyframeDiamondContextMenuProps {
   onClose: () => void;
   onDelete: (elementId: string, percentage: number) => void;
   onDeleteAll: (elementId: string) => void;
-  onChangeEase: (elementId: string, percentage: number, ease: string) => void;
-  onCopyProperties: (elementId: string, percentage: number) => void;
+  onChangeEase?: (elementId: string, percentage: number, ease: string) => void;
+  onCopyProperties?: (elementId: string, percentage: number) => void;
 }
 
-const EASE_PRESETS = [
-  "none",
-  "power1.out",
-  "power2.out",
-  "power3.out",
-  "power1.in",
-  "power2.in",
-  "power1.inOut",
-  "power2.inOut",
-  "back.out",
-  "elastic.out",
-  "bounce.out",
-  "expo.out",
-] as const;
-
 export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMenu({
   state,
   onClose,
   onDelete,
   onDeleteAll,
-  onChangeEase,
-  onCopyProperties,
 }: KeyframeDiamondContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
-  const easeSubmenuRef = useRef<HTMLDivElement>(null);
-
-  const adjustedX = Math.min(state.x, window.innerWidth - 200);
-  const adjustedY = Math.min(state.y, window.innerHeight - 300);
 
-  const currentEaseLabel = state.currentEase
-    ? (EASE_LABELS[state.currentEase] ?? state.currentEase)
-    : "Default";
+  const menuWidth = 200;
+  const menuHeight = 70;
+  const overflowY = state.y + menuHeight - window.innerHeight;
+  const adjustedX = state.x + menuWidth > window.innerWidth ? state.x - menuWidth : state.x;
+  const adjustedY = overflowY > 0 ? state.y - overflowY - 8 : state.y;
 
-  return (
+  return createPortal(
     <div
       ref={menuRef}
       className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
     >
-      {/* Ease submenu */}
-      <div className="relative group">
-        <button
-          type="button"
-          className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
-        >
-          <span>
-            Ease: <span className="text-neutral-500">{currentEaseLabel}</span>
-          </span>
-          <svg width="8" height="8" viewBox="0 0 8 8" className="text-neutral-500 ml-2">
-            <path d="M3 1l4 3-4 3" fill="none" stroke="currentColor" strokeWidth="1.2" />
-          </svg>
-        </button>
-        <div
-          ref={easeSubmenuRef}
-          className="absolute left-full top-0 ml-0.5 hidden group-hover:block bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[160px] max-h-[300px] overflow-y-auto"
-        >
-          {EASE_PRESETS.map((ease) => (
-            <button
-              key={ease}
-              type="button"
-              className={`w-full flex items-center gap-2 px-3 py-1.5 text-xs hover:bg-neutral-800 cursor-pointer text-left ${
-                ease === state.currentEase ? "text-white font-medium" : "text-neutral-300"
-              }`}
-              onClick={() => {
-                onChangeEase(state.elementId, state.percentage, ease);
-                onClose();
-              }}
-            >
-              {ease === state.currentEase && (
-                <svg
-                  width="8"
-                  height="8"
-                  viewBox="0 0 8 8"
-                  className="text-green-400 flex-shrink-0"
-                >
-                  <path d="M1 4l2 2 4-4" fill="none" stroke="currentColor" strokeWidth="1.5" />
-                </svg>
-              )}
-              <span className={ease === state.currentEase ? "" : "ml-[16px]"}>
-                {EASE_LABELS[ease] ?? ease}
-              </span>
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Separator */}
-      <div className="my-1 border-t border-neutral-700/60" />
-
       {/* Delete */}
       <button
         type="button"
         className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
         onClick={() => {
-          onDelete(state.elementId, state.percentage);
+          onDelete(state.elementId, state.tweenPercentage ?? state.percentage);
           onClose();
         }}
       >
@@ -130,18 +62,7 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
       >
         Delete All Keyframes
       </button>
-
-      {/* Copy Properties */}
-      <button
-        type="button"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-300 hover:bg-neutral-800 cursor-pointer text-left"
-        onClick={() => {
-          onCopyProperties(state.elementId, state.percentage);
-          onClose();
-        }}
-      >
-        Copy Properties
-      </button>
-    </div>
+    </div>,
+    document.body,
   );
 });

package/src/player/components/Timeline.tsx

@@ -448,6 +448,9 @@ export const Timeline = memo(function Timeline({
             onSelectElement?.(el);
             const absTime = el.start + (pct / 100) * el.duration;
             onSeek?.(absTime);
+            const kfData = keyframeCache?.get(elKey);
+            const kf = kfData?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.5);
+            usePlayerStore.getState().setActiveKeyframePct(kf?.tweenPercentage ?? null);
           }}
           onShiftClickKeyframe={(elId, pct) => {
             toggleSelectedKeyframe(`${elId}:${pct}`);
@@ -464,12 +467,13 @@ export const Timeline = memo(function Timeline({
               onSeek?.(absTime);
             }
             const kfData = keyframeCache.get(elId);
-            const kf = kfData?.keyframes.find((k) => k.percentage === pct);
+            const kf = kfData?.keyframes.find((k) => Math.abs(k.percentage - pct) < 0.2);
             setKfContextMenu({
-              x: e.clientX,
-              y: e.clientY,
+              x: e.clientX + 4,
+              y: e.clientY + 2,
               elementId: elId,
               percentage: pct,
+              tweenPercentage: kf?.tweenPercentage,
               currentEase: kf?.ease ?? kfData?.ease,
             });
           }}