@hyperframes/studio 0.7.18 → 0.7.19

package/src/hooks/useGsapKeyframeOps.test.tsx

@@ -0,0 +1,101 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+// Tell React this is an act-capable environment so act(...) flushes effects.
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { useGsapKeyframeOps } from "./useGsapKeyframeOps";
+
+type HookApi = ReturnType<typeof useGsapKeyframeOps>;
+
+let cleanup: (() => void) | null = null;
+afterEach(() => {
+  cleanup?.();
+  cleanup = null;
+});
+
+const selection: DomEditSelection = { id: "box", selector: "#box" } as DomEditSelection;
+
+function renderKeyframeOps(over: {
+  commitMutation: (...args: unknown[]) => Promise<unknown>;
+  trackGsapSaveFailure: (...args: unknown[]) => void;
+}) {
+  const captured: { api: HookApi | null } = { api: null };
+  function Probe() {
+    captured.api = useGsapKeyframeOps({
+      activeCompPath: "index.html",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test doubles
+      commitMutation: over.commitMutation as any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test doubles
+      commitMutationSafely: (() => {}) as any,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- test doubles
+      trackGsapSaveFailure: over.trackGsapSaveFailure as any,
+      sdkSession: null,
+      sdkDeps: null,
+    });
+    return null;
+  }
+  const container = document.createElement("div");
+  const root = createRoot(container);
+  act(() => {
+    root.render(<Probe />);
+  });
+  cleanup = () => act(() => root.unmount());
+  if (!captured.api) throw new Error("hook did not initialize");
+  return captured.api;
+}
+
+describe("useGsapKeyframeOps — resizeKeyframedTween", () => {
+  it("issues a resize-keyframed-tween mutation with the remap + window", async () => {
+    const commitMutation = vi.fn<(...args: unknown[]) => Promise<unknown>>(async () => ({
+      ok: true,
+    }));
+    const trackGsapSaveFailure = vi.fn<(...args: unknown[]) => void>();
+    const api = renderKeyframeOps({ commitMutation, trackGsapSaveFailure });
+
+    const pctRemap = [
+      { from: 0, to: 0 },
+      { from: 100, to: 100 },
+    ];
+    await act(async () => {
+      api.resizeKeyframedTween(selection, "box-to-0-opacity", 0.2, 2, pctRemap);
+    });
+
+    expect(commitMutation).toHaveBeenCalledTimes(1);
+    const [sel, mutation] = commitMutation.mock.calls[0]!;
+    expect(sel).toBe(selection);
+    expect(mutation).toEqual({
+      type: "resize-keyframed-tween",
+      animationId: "box-to-0-opacity",
+      position: 0.2,
+      duration: 2,
+      pctRemap,
+    });
+    expect(trackGsapSaveFailure).not.toHaveBeenCalled();
+  });
+
+  it("routes a rejected commit to trackGsapSaveFailure (no unhandled rejection)", async () => {
+    const error = new Error("network down");
+    const commitMutation = vi.fn<(...args: unknown[]) => Promise<unknown>>(async () => {
+      throw error;
+    });
+    const trackGsapSaveFailure = vi.fn<(...args: unknown[]) => void>();
+    const api = renderKeyframeOps({ commitMutation, trackGsapSaveFailure });
+
+    await act(async () => {
+      api.resizeKeyframedTween(selection, "box-to-0-opacity", 0.2, 2, [{ from: 100, to: 100 }]);
+      // let the rejected commit promise settle inside act
+      await Promise.resolve();
+    });
+
+    expect(trackGsapSaveFailure).toHaveBeenCalledTimes(1);
+    const [errArg, selArg, mutationArg, labelArg] = trackGsapSaveFailure.mock.calls[0]!;
+    expect(errArg).toBe(error);
+    expect(selArg).toBe(selection);
+    expect((mutationArg as { type: string }).type).toBe("resize-keyframed-tween");
+    expect(labelArg).toBe("Retime keyframe (resize tween)");
+  });
+});

package/src/hooks/useGsapKeyframeOps.ts

@@ -12,7 +12,11 @@ import {
 } from "../utils/sdkCutover";
 import type { KeyframeCacheEntry } from "../player/store/playerStore";
 import { commitKeyframeAtTimeImpl } from "./gsapKeyframeCommit";
-import { readKeyframeSnapshot, writeKeyframeCache } from "./gsapKeyframeCacheHelpers";
+import {
+  clearKeyframeCacheForElement,
+  readKeyframeSnapshot,
+  writeKeyframeCache,
+} from "./gsapKeyframeCacheHelpers";
 import type {
   CommitMutation,
   SafeGsapCommitMutation,
@@ -201,6 +205,56 @@ export function useGsapKeyframeOps({
     [activeCompPath, commitMutation, trackGsapSaveFailure, sdkSession, sdkDeps],
   );
 
+  const moveKeyframe = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      fromPercentage: number,
+      toPercentage: number,
+    ) => {
+      const mutation = { type: "move-keyframe", animationId, fromPercentage, toPercentage };
+      // No SDK persist helper exists for retime — server path only. The post-commit
+      // updateKeyframeCacheFromParsed re-keys the diamond from the fresh parse, so no
+      // optimistic cache write is needed (mapping the tween-% to clip-% here would
+      // duplicate that math). softReload mirrors remove-keyframe.
+      void commitMutation(selection, mutation, {
+        label: `Move keyframe to ${toPercentage}%`,
+        softReload: true,
+      }).catch((error) => {
+        trackGsapSaveFailure(error, selection, mutation, `Move keyframe to ${toPercentage}%`);
+      });
+    },
+    [commitMutation, trackGsapSaveFailure],
+  );
+
+  const resizeKeyframedTween = useCallback(
+    (
+      selection: DomEditSelection,
+      animationId: string,
+      position: number,
+      duration: number,
+      pctRemap: Array<{ from: number; to: number }>,
+    ) => {
+      const mutation = {
+        type: "resize-keyframed-tween",
+        animationId,
+        position,
+        duration,
+        pctRemap,
+      };
+      // Boundary drag-to-retime: the server re-keys keyframes in place + grows the
+      // tween window, preserving _auto / per-keyframe ease / easeEach / outer ease.
+      // softReload re-keys the diamonds from the fresh parse (mirrors moveKeyframe).
+      void commitMutation(selection, mutation, {
+        label: "Retime keyframe (resize tween)",
+        softReload: true,
+      }).catch((error) => {
+        trackGsapSaveFailure(error, selection, mutation, "Retime keyframe (resize tween)");
+      });
+    },
+    [commitMutation, trackGsapSaveFailure],
+  );
+
   const convertToKeyframes = useCallback(
     async (
       selection: DomEditSelection,
@@ -233,8 +287,13 @@ export function useGsapKeyframeOps({
 
   const removeAllKeyframes = useCallback(
     async (selection: DomEditSelection, animationId: string) => {
+      const targetPath = selection.sourceFile || activeCompPath || "index.html";
+      // remove-all-keyframes collapses the tween to a static hold and the commit
+      // path doesn't return parsed animations, so the keyframe cache is never
+      // refreshed — clear it here so the timeline diamonds disappear immediately.
+      const elementId = selection.id ?? selection.selector?.match(/^#([\w-]+)/)?.[1] ?? null;
+      if (elementId) clearKeyframeCacheForElement(targetPath, elementId);
       if (sdkSession && sdkDeps) {
-        const targetPath = selection.sourceFile || activeCompPath || "index.html";
         const handled = await sdkGsapRemoveAllKeyframesPersist(
           targetPath,
           animationId,
@@ -267,6 +326,8 @@ export function useGsapKeyframeOps({
     addKeyframe,
     addKeyframeBatch,
     removeKeyframe,
+    moveKeyframe,
+    resizeKeyframedTween,
     convertToKeyframes,
     removeAllKeyframes,
     commitKeyframeAtTime,

package/src/hooks/useGsapSelectionHandlers.ts

@@ -1,6 +1,8 @@
 import { useCallback, useRef } from "react";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import { usePlayerStore } from "../player";
+import { computeCurrentPercentage } from "./gsapDragCommit";
 import { trackStudioSaveFailure } from "../utils/studioSaveDiagnostics";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 
@@ -25,6 +27,8 @@ export function useGsapSelectionHandlers({
   addKeyframe,
   addKeyframeBatch,
   removeKeyframe,
+  moveKeyframe,
+  resizeKeyframedTween,
   convertToKeyframes,
   removeAllKeyframes,
   handleDomManualEditsReset,
@@ -73,6 +77,19 @@ export function useGsapSelectionHandlers({
     properties: Record<string, number | string>,
   ) => Promise<void>;
   removeKeyframe: (sel: DomEditSelection, animId: string, percentage: number) => void;
+  moveKeyframe: (
+    sel: DomEditSelection,
+    animId: string,
+    fromPercentage: number,
+    toPercentage: number,
+  ) => void;
+  resizeKeyframedTween: (
+    sel: DomEditSelection,
+    animId: string,
+    position: number,
+    duration: number,
+    pctRemap: Array<{ from: number; to: number }>,
+  ) => void;
   convertToKeyframes: (
     sel: DomEditSelection,
     animId: string,
@@ -82,7 +99,7 @@ export function useGsapSelectionHandlers({
   removeAllKeyframes: (sel: DomEditSelection, animId: string) => void;
 
   handleDomManualEditsReset: (sel: DomEditSelection) => void;
-  selectedGsapAnimations: { id: string; keyframes?: unknown }[];
+  selectedGsapAnimations: GsapAnimation[];
 }) {
   const lastSelectionRef = useRef<DomEditSelection | null>(null);
   if (domEditSelection) lastSelectionRef.current = domEditSelection;
@@ -233,6 +250,57 @@ export function useGsapSelectionHandlers({
     [domEditSelection, removeKeyframe],
   );
 
+  const handleGsapMoveKeyframeToPlayhead = useCallback(
+    (animId: string, fromPercentage: number, selectionOverride?: DomEditSelection | null) => {
+      const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      // Retime the keyframe to the playhead, preserving its value + ease. The
+      // playhead's tween-relative percentage is the move target.
+      const anim = selectedGsapAnimations.find((a) => a.id === animId);
+      const toPercentage = computeCurrentPercentage(sel, anim);
+      trackStudioEvent("keyframe", { action: "move_to_playhead" });
+      moveKeyframe(sel, animId, fromPercentage, toPercentage);
+    },
+    [domEditSelection, selectedGsapAnimations, moveKeyframe],
+  );
+
+  const handleGsapMoveKeyframe = useCallback(
+    (
+      animId: string,
+      fromPercentage: number,
+      toPercentage: number,
+      selectionOverride?: DomEditSelection | null,
+    ) => {
+      const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      // Atomic retime: preserves the keyframe's value + per-keyframe ease. Both
+      // percentages are tween-relative (the drag handler converts the drop
+      // position before calling). No optimistic runtime hold — the soft-reload
+      // re-keys the diamond from source.
+      trackStudioEvent("keyframe", { action: "retime" });
+      moveKeyframe(sel, animId, fromPercentage, toPercentage);
+    },
+    [domEditSelection, moveKeyframe],
+  );
+
+  const handleGsapResizeKeyframedTween = useCallback(
+    (
+      animId: string,
+      position: number,
+      duration: number,
+      pctRemap: Array<{ from: number; to: number }>,
+      selectionOverride?: DomEditSelection | null,
+    ) => {
+      const sel = selectionOverride ?? domEditSelection ?? lastSelectionRef.current;
+      if (!sel) return;
+      // Boundary drag-to-retime: grows/shifts the tween window + re-keys keyframes
+      // in place. Distinct telemetry action so resize is separable from in-window move.
+      trackStudioEvent("keyframe", { action: "retime_resize" });
+      resizeKeyframedTween(sel, animId, position, duration, pctRemap);
+    },
+    [domEditSelection, resizeKeyframedTween],
+  );
+
   const handleGsapConvertToKeyframes = useCallback(
     (animId: string, resolvedFromValues?: Record<string, number | string>, duration?: number) => {
       if (!domEditSelection) return Promise.resolve();
@@ -280,6 +348,9 @@ export function useGsapSelectionHandlers({
     handleGsapAddKeyframe,
     handleGsapAddKeyframeBatch,
     handleGsapRemoveKeyframe,
+    handleGsapMoveKeyframeToPlayhead,
+    handleGsapMoveKeyframe,
+    handleGsapResizeKeyframedTween,
     handleGsapConvertToKeyframes,
     handleGsapRemoveAllKeyframes,
     handleResetSelectedElementKeyframes,

package/src/hooks/useGsapTweenCache.ts

@@ -128,7 +128,7 @@ export async function fetchParsedAnimations(
  * Fall back to the sub-comp HOST's bounds, resolved via domClipChildren (the host's
  * data-composition-src is stripped in the rendered DOM, so we can't query it).
  */
-function resolveClipTimingBasis(
+export function resolveClipTimingBasis(
   elementId: string,
   sourceFile: string,
   elements: ReadonlyArray<{
@@ -346,9 +346,16 @@ export function useGsapAnimationsForElement(
     let ease: string | undefined;
     let easeEach: string | undefined;
     for (const anim of animations) {
+      // A static position hold (only x/y, no real motion) is a `set`, not a
+      // keyframe — don't synthesize a diamond for it. Covers both `tl.set(...)`
+      // and the `tl.to({ duration: 0, immediateRender: true })` hold that
+      // remove-all-keyframes collapses to (which is otherwise shown as a stray
+      // 0% keyframe).
       if (
-        anim.method === "set" &&
-        Object.keys(anim.properties).every((k) => k === "x" || k === "y")
+        !anim.keyframes &&
+        Object.keys(anim.properties).length > 0 &&
+        Object.keys(anim.properties).every((k) => k === "x" || k === "y") &&
+        (anim.method === "set" || (anim.duration ?? 0) === 0)
       )
         continue;
       const kf = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
@@ -454,11 +461,13 @@ export function usePopulateKeyframeCacheForFile(
       const mergedByElement = new Map<string, GsapKeyframesData>();
       for (const anim of parsed.animations) {
         if (anim.hasUnresolvedKeyframes) continue;
-        // Position-only set tweens are static holds (created by drag), not
-        // keyframed animations — skip them so they don't show timeline diamonds.
-        if (anim.method === "set") {
+        // Position-only static holds are not keyframed animations — skip them so
+        // they don't draw a timeline diamond. Covers both a `tl.set(...)` and the
+        // `tl.to({ duration: 0, immediateRender: true })` that remove-all-keyframes
+        // collapses a keyframed tween to.
+        if (!anim.keyframes && (anim.method === "set" || (anim.duration ?? 0) === 0)) {
           const propKeys = Object.keys(anim.properties).filter((k) => k !== "immediateRender");
-          if (propKeys.every((k) => k === "x" || k === "y")) {
+          if (propKeys.length > 0 && propKeys.every((k) => k === "x" || k === "y")) {
             continue;
           }
         }

package/src/hooks/useKeyframeKeyboard.ts

@@ -33,53 +33,48 @@ export function useKeyframeKeyboard({
     (e: KeyboardEvent) => {
       if (!enabled) return;
       if (isTextInput(document.activeElement)) return;
+      if (e.metaKey || e.ctrlKey) return; // never shadow browser/system combos
 
       const hasSelectedKeyframes = usePlayerStore.getState().selectedKeyframes.size > 0;
 
+      // Only consume a key we can actually act on. The fall-through matters:
+      // these keys (k/j/arrows) double as JKL playback shortcuts in
+      // usePlaybackKeyboard, so when a handler is absent we must let the event
+      // continue. When we DO act, stopImmediatePropagation prevents the playback
+      // handler from also firing (e.g. K pausing instead of adding a keyframe).
+      // The listener is registered in the capture phase so it runs first.
+      const consume = (run: () => void) => {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+        run();
+      };
+
       switch (e.key.toLowerCase()) {
         case "k":
-          if (!e.metaKey && !e.ctrlKey) {
-            e.preventDefault();
-            onAddKeyframe?.();
-          }
+          if (onAddKeyframe) consume(onAddKeyframe);
           break;
         case "delete":
         case "backspace":
-          if (hasSelectedKeyframes) {
-            e.preventDefault();
-            onDeleteKeyframe?.();
-          }
+          if (onDeleteKeyframe && hasSelectedKeyframes) consume(onDeleteKeyframe);
           break;
-        case "j":
-          if (!e.metaKey && !e.ctrlKey) {
-            e.preventDefault();
-            if (e.shiftKey) onNextKeyframe?.();
-            else onPrevKeyframe?.();
-          }
+        case "j": {
+          const nav = e.shiftKey ? onNextKeyframe : onPrevKeyframe;
+          if (nav) consume(nav);
           break;
+        }
         case "h":
-          if (!e.metaKey && !e.ctrlKey && hasSelectedKeyframes) {
-            e.preventDefault();
-            onToggleHold?.();
-          }
+          if (onToggleHold && hasSelectedKeyframes) consume(onToggleHold);
           break;
         case "u":
-          if (!e.metaKey && !e.ctrlKey) {
-            e.preventDefault();
-            onToggleExpand?.();
-          }
+          if (onToggleExpand) consume(onToggleExpand);
           break;
         case "arrowleft":
-          if (hasSelectedKeyframes && !e.metaKey && !e.ctrlKey && !e.altKey) {
-            e.preventDefault();
-            onNudgeKeyframe?.(-1, e.shiftKey);
-          }
+          if (onNudgeKeyframe && hasSelectedKeyframes && !e.altKey)
+            consume(() => onNudgeKeyframe(-1, e.shiftKey));
           break;
         case "arrowright":
-          if (hasSelectedKeyframes && !e.metaKey && !e.ctrlKey && !e.altKey) {
-            e.preventDefault();
-            onNudgeKeyframe?.(1, e.shiftKey);
-          }
+          if (onNudgeKeyframe && hasSelectedKeyframes && !e.altKey)
+            consume(() => onNudgeKeyframe(1, e.shiftKey));
           break;
       }
     },
@@ -97,7 +92,9 @@ export function useKeyframeKeyboard({
 
   useEffect(() => {
     if (!enabled) return;
-    window.addEventListener("keydown", handler);
-    return () => window.removeEventListener("keydown", handler);
+    // Capture phase: run before usePlaybackKeyboard's (bubble-phase) JKL handler
+    // so an active keyframe shortcut can claim the key.
+    window.addEventListener("keydown", handler, { capture: true });
+    return () => window.removeEventListener("keydown", handler, { capture: true });
   }, [enabled, handler]);
 }

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -18,6 +18,8 @@ interface KeyframeDiamondContextMenuProps {
   onDeleteAll: (elementId: string) => void;
   onChangeEase?: (elementId: string, percentage: number, ease: string) => void;
   onCopyProperties?: (elementId: string, percentage: number) => void;
+  /** Retime the keyframe to the current playhead, preserving its value + ease. */
+  onMoveToPlayhead?: (elementId: string, fromPercentage: number) => void;
 }
 
 export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMenu({
@@ -25,11 +27,12 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
   onClose,
   onDelete,
   onDeleteAll,
+  onMoveToPlayhead,
 }: KeyframeDiamondContextMenuProps) {
   const menuRef = useContextMenuDismiss(onClose);
 
   const menuWidth = 200;
-  const menuHeight = 70;
+  const menuHeight = onMoveToPlayhead ? 100 : 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;
@@ -40,12 +43,28 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
       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 }}
     >
+      {onMoveToPlayhead && (
+        <button
+          type="button"
+          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-neutral-200 hover:bg-neutral-800 cursor-pointer text-left"
+          onClick={() => {
+            // Pass clip-% — resolveKeyframeTarget keys the cache lookup on clip-%
+            // and returns the tween-% for the mutation. Passing tween-% here would
+            // miss the lookup on any tween whose window is shorter than the clip.
+            onMoveToPlayhead(state.elementId, state.percentage);
+            onClose();
+          }}
+        >
+          Move to Playhead
+        </button>
+      )}
+
       {/* 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.tweenPercentage ?? state.percentage);
+          onDelete(state.elementId, state.percentage);
           onClose();
         }}
       >

package/src/player/components/PlayerControls.tsx

@@ -1,4 +1,6 @@
 import { useRef, useCallback, useEffect, memo } from "react";
+import gsap from "gsap";
+import { MorphSVGPlugin } from "gsap/MorphSVGPlugin";
 import { formatFrameTime, formatTime, stepFrameTime } from "../lib/time";
 import { shouldMutePreviewAudio } from "../lib/timelineIframeHelpers";
 import { usePlayerStore } from "../store/playerStore";
@@ -14,20 +16,45 @@ type TimeDisplayMode = "time" | "frame";
 
 /* ── Icon sub-components ─────────────────────────────────────────── */
 
-function PlayIcon() {
-  return (
-    <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
-      <polygon points="6,3 20,12 6,21" />
-    </svg>
-  );
-}
+gsap.registerPlugin(MorphSVGPlugin);
 
-function PauseIcon() {
+// Play glyph: the right-hand blade from the HyperFrames favicon (points right).
+// Pause glyph: two bars centred in the same coordinate space so MorphSVG can
+// tween one `d` into the other. Both shapes live in the favicon's 0-100 space
+// and the svg viewBox frames the blade's bounding box.
+const PLAY_BLADE_D =
+  "M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z";
+const PAUSE_BARS_D = "M56 28H67V71H56Z M73 28H84V71H73Z";
+
+// Morph the play blade <-> pause bars on toggle via GSAP MorphSVG. Both glyphs
+// are one path whose `d` tweens; the initial render matches `playing` with no
+// animation, and prefers-reduced-motion snaps instead of tweening.
+function PlayPauseMorphIcon({ playing }: { playing: boolean }) {
+  const pathRef = useRef<SVGPathElement>(null);
+  const isFirstRun = useRef(true);
+  useEffect(() => {
+    const el = pathRef.current;
+    if (!el) return;
+    const target = playing ? PAUSE_BARS_D : PLAY_BLADE_D;
+    const reduceMotion =
+      typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    if (isFirstRun.current || reduceMotion) {
+      isFirstRun.current = false;
+      gsap.set(el, { morphSVG: target });
+      return;
+    }
+    const tween = gsap.to(el, { duration: 0.28, ease: "power2.inOut", morphSVG: target });
+    return () => {
+      tween.kill();
+    };
+  }, [playing]);
   return (
-    <svg width="12" height="12" viewBox="0 0 24 24" fill="#FAFAFA" aria-hidden="true">
-      <rect x="6" y="4" width="4" height="16" rx="1" />
-      <rect x="14" y="4" width="4" height="16" rx="1" />
-    </svg>
+    <span className="relative inline-flex h-3 w-3 items-center justify-center" aria-hidden="true">
+      <svg width="12" height="12" viewBox="46 21 54 56" fill="#FAFAFA">
+        <path ref={pathRef} d={playing ? PAUSE_BARS_D : PLAY_BLADE_D} />
+      </svg>
+    </span>
   );
 }
 
@@ -420,7 +447,7 @@ export const PlayerControls = memo(function PlayerControls({
           className="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-lg disabled:opacity-30 disabled:pointer-events-none transition-colors"
           style={{ background: "rgba(255,255,255,0.06)" }}
         >
-          {isPlaying ? <PauseIcon /> : <PlayIcon />}
+          <PlayPauseMorphIcon playing={isPlaying} />
         </button>
       </Tooltip>
 

package/src/player/components/Timeline.tsx

@@ -86,6 +86,8 @@ export const Timeline = memo(function Timeline({
     onDeleteKeyframe,
     onDeleteAllKeyframes,
     onChangeKeyframeEase,
+    onMoveKeyframeToPlayhead,
+    onMoveKeyframe,
   } = useResolvedTimelineEditCallbacks({
     onMoveElement: onMoveElementOverride,
     onResizeElement: onResizeElementOverride,
@@ -479,6 +481,7 @@ export const Timeline = memo(function Timeline({
           onShiftClickKeyframe={(elId, pct) => {
             toggleSelectedKeyframe(`${elId}:${pct}`);
           }}
+          onMoveKeyframe={onMoveKeyframe}
           onContextMenuKeyframe={(e, elId, pct) => {
             const el = expandedElements.find((x) => (x.key ?? x.id) === elId);
             if (el) {
@@ -556,6 +559,11 @@ export const Timeline = memo(function Timeline({
           onDelete={(elId, pct) => onDeleteKeyframe?.(elId, pct)}
           onDeleteAll={(elId) => onDeleteAllKeyframes?.(elId)}
           onChangeEase={(elId, pct, ease) => onChangeKeyframeEase?.(elId, pct, ease)}
+          onMoveToPlayhead={
+            onMoveKeyframeToPlayhead
+              ? (elId, pct) => onMoveKeyframeToPlayhead(elId, pct)
+              : undefined
+          }
           onCopyProperties={(elId, pct) => {
             const kfData = keyframeCache.get(elId);
             const kf = kfData?.keyframes.find((k) => k.percentage === pct);

package/src/player/components/TimelineCanvas.tsx

@@ -92,6 +92,11 @@ interface TimelineCanvasProps {
   onClickKeyframe?: (element: TimelineElement, percentage: number) => void;
   onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
   onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
+  onMoveKeyframe?: (
+    elementId: string,
+    fromClipPercentage: number,
+    toClipPercentage: number,
+  ) => void;
   onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
   beatAnalysis?: MusicBeatAnalysis | null;
 }
@@ -139,6 +144,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   onClickKeyframe,
   onShiftClickKeyframe,
   onContextMenuKeyframe,
+  onMoveKeyframe,
   onContextMenuClip,
   beatAnalysis,
 }: TimelineCanvasProps) {
@@ -439,6 +445,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                         onClickKeyframe={(pct) => onClickKeyframe?.(previewElement, pct)}
                         onShiftClickKeyframe={onShiftClickKeyframe}
                         onContextMenuKeyframe={onContextMenuKeyframe}
+                        onMoveKeyframe={onMoveKeyframe}
                       />
                     )}
                   </TimelineClip>