@hyperframes/studio 0.6.86 → 0.6.87

package/src/hooks/useGsapTweenCache.ts

@@ -1,8 +1,72 @@
 import { useEffect, useMemo, useRef, useState, useCallback } from "react";
-import type { GsapAnimation, ParsedGsap } from "@hyperframes/core/gsap-parser";
+import type { GsapAnimation, GsapKeyframesData, ParsedGsap } from "@hyperframes/core/gsap-parser";
+import type { GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
 import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeBridge";
 
+function deduplicateKeyframes(keyframes: GsapPercentageKeyframe[]): GsapPercentageKeyframe[] {
+  const byPct = new Map<number, GsapPercentageKeyframe>();
+  for (const kf of keyframes) {
+    const existing = byPct.get(kf.percentage);
+    if (existing) {
+      existing.properties = { ...existing.properties, ...kf.properties };
+      if (kf.ease) existing.ease = kf.ease;
+    } else {
+      byPct.set(kf.percentage, { ...kf, properties: { ...kf.properties } });
+    }
+  }
+  return Array.from(byPct.values()).sort((a, b) => a.percentage - b.percentage);
+}
+
+const PROPERTY_DEFAULTS: Record<string, number> = {
+  opacity: 1,
+  x: 0,
+  y: 0,
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  rotation: 0,
+};
+
+function synthesizeFlatTweenKeyframes(anim: GsapAnimation): GsapKeyframesData | null {
+  if (anim.method === "set") {
+    return {
+      format: "percentage",
+      keyframes: [{ percentage: 0, properties: { ...anim.properties } }],
+    };
+  }
+  const toProps = anim.properties;
+  const fromProps = anim.fromProperties;
+  if (!toProps || Object.keys(toProps).length === 0) return null;
+
+  const startProps: Record<string, number | string> = {};
+  const endProps: Record<string, number | string> = {};
+
+  if (anim.method === "from") {
+    for (const [k, v] of Object.entries(toProps)) {
+      startProps[k] = v;
+      endProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
+    }
+  } else if (anim.method === "fromTo" && fromProps) {
+    Object.assign(startProps, fromProps);
+    Object.assign(endProps, toProps);
+  } else {
+    for (const [k, v] of Object.entries(toProps)) {
+      startProps[k] = PROPERTY_DEFAULTS[k] ?? 0;
+      endProps[k] = v;
+    }
+  }
+
+  return {
+    format: "percentage",
+    keyframes: [
+      { percentage: 0, properties: startProps },
+      { percentage: 100, properties: endProps },
+    ],
+    ...(anim.ease ? { ease: anim.ease } : {}),
+  };
+}
+
 function extractIdFromSelector(selector: string): string | null {
   const match = selector.match(/^#([\w-]+)/);
   return match ? match[1] : null;
@@ -31,7 +95,12 @@ export function getAnimationsForElement(
   if (target.selector) matchers.add(target.selector);
   if (matchers.size === 0) return [];
   return animations.filter((a) =>
-    a.targetSelector.split(",").some((part) => matchers.has(part.trim())),
+    a.targetSelector.split(",").some((part) => {
+      const trimmed = part.trim();
+      if (matchers.has(trimmed)) return true;
+      const lastSimple = trimmed.split(/\s+/).pop();
+      return lastSimple ? matchers.has(lastSimple) : false;
+    }),
   );
 }
 
@@ -182,12 +251,60 @@ export function useGsapAnimationsForElement(
 
   // Populate keyframe cache for the selected element.
   // Key format must match timeline element keys: "sourceFile#domId".
+  // Merges keyframes from ALL animations targeting this element and synthesizes
+  // flat tweens so the cache is never downgraded vs the bulk populate.
   const elementId = target?.id ?? null;
   useEffect(() => {
     if (!elementId) return;
+
+    // Resolve the element's time range from the player store so we can
+    // convert tween-relative keyframe percentages to clip-relative ones.
+    const { elements } = usePlayerStore.getState();
+    const timelineEl = elements.find(
+      (el) => el.domId === elementId || (el.key ?? el.id) === `${sourceFile}#${elementId}`,
+    );
+    const elStart = timelineEl?.start ?? 0;
+    const elDuration = timelineEl?.duration ?? 4;
+
+    const allKeyframes: GsapKeyframesData["keyframes"] = [];
+    let format: GsapKeyframesData["format"] = "percentage";
+    let ease: string | undefined;
+    let easeEach: string | undefined;
+    for (const anim of animations) {
+      const kf = anim.keyframes ?? synthesizeFlatTweenKeyframes(anim);
+      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 tweenDur = anim.duration ?? elDuration;
+      for (const k of kf.keyframes) {
+        const absTime = tweenPos + (k.percentage / 100) * tweenDur;
+        const clipPct =
+          elDuration > 0
+            ? Math.round(((absTime - elStart) / elDuration) * 1000) / 10
+            : k.percentage;
+        allKeyframes.push({ ...k, percentage: clipPct });
+      }
+      format = kf.format;
+      if (kf.ease) ease = kf.ease;
+      if (kf.easeEach) easeEach = kf.easeEach;
+    }
+    if (allKeyframes.length === 0) {
+      const { keyframeCache, setKeyframeCache } = usePlayerStore.getState();
+      if (keyframeCache.has(`${sourceFile}#${elementId}`)) {
+        setKeyframeCache(`${sourceFile}#${elementId}`, undefined);
+      }
+      return;
+    }
+    const dedupedKeyframes = deduplicateKeyframes(allKeyframes);
+    const merged: GsapKeyframesData = {
+      format,
+      keyframes: dedupedKeyframes,
+      ...(ease ? { ease } : {}),
+      ...(easeEach ? { easeEach } : {}),
+    };
     const { setKeyframeCache } = usePlayerStore.getState();
-    const withKeyframes = animations.find((a) => a.keyframes);
-    setKeyframeCache(`${sourceFile}#${elementId}`, withKeyframes?.keyframes ?? undefined);
+    setKeyframeCache(`${sourceFile}#${elementId}`, merged);
   }, [elementId, sourceFile, animations]);
 
   return { animations, multipleTimelines, unsupportedTimelinePattern };
@@ -213,25 +330,63 @@ export function usePopulateKeyframeCacheForFile(
   const lastFetchKeyRef = useRef("");
 
   const runtimeScanDoneRef = useRef("");
+  const astFetchDoneRef = useRef("");
 
   useEffect(() => {
     const fetchKey = `kf-cache:${projectId}:${sourceFile}:${version}`;
     if (fetchKey === lastFetchKeyRef.current) return;
     lastFetchKeyRef.current = fetchKey;
     runtimeScanDoneRef.current = "";
+    astFetchDoneRef.current = "";
     if (!projectId) return;
 
     const sf = sourceFile;
     fetchParsedAnimations(projectId, sf).then((parsed) => {
       if (!parsed) return;
-      const { setKeyframeCache } = usePlayerStore.getState();
+      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 { elements } = usePlayerStore.getState();
+      const mergedByElement = new Map<string, GsapKeyframesData>();
       for (const anim of parsed.animations) {
         const id = extractIdFromSelector(anim.targetSelector);
-        if (!id || !anim.keyframes) continue;
-        setKeyframeCache(`${sf}#${id}`, anim.keyframes);
-        if (sf !== "index.html") setKeyframeCache(`index.html#${id}`, anim.keyframes);
+        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 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 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 };
+        });
+        const existing = mergedByElement.get(id);
+        if (existing) {
+          existing.keyframes = deduplicateKeyframes([...existing.keyframes, ...clipKeyframes]);
+        } else {
+          mergedByElement.set(id, { ...kfData, keyframes: clipKeyframes });
+        }
+      }
+      for (const [id, kfData] of mergedByElement) {
+        setKeyframeCache(`${sf}#${id}`, kfData);
+        setKeyframeCache(id, kfData);
+        if (sf !== "index.html") setKeyframeCache(`index.html#${id}`, kfData);
       }
-      runtimeScanDoneRef.current = fetchKey;
+      astFetchDoneRef.current = fetchKey;
     });
   }, [projectId, sourceFile, version]);
 
@@ -246,7 +401,8 @@ export function usePopulateKeyframeCacheForFile(
 
     const tryRuntimeScan = () => {
       if (runtimeScanDoneRef.current === `kf-cache:${projectId}:${sf}:${version}`) return true;
-      const iframe = iframeRef?.current;
+      const iframe =
+        iframeRef?.current ?? document.querySelector<HTMLIFrameElement>("iframe[src*='/preview/']");
       if (!iframe) return false;
       const scanned = scanAllRuntimeKeyframes(iframe);
       if (scanned.size === 0) return false;
@@ -254,7 +410,8 @@ export function usePopulateKeyframeCacheForFile(
       for (const [id, data] of scanned) {
         const cacheKey = `${sf}#${id}`;
         const fallbackKey = `index.html#${id}`;
-        if (keyframeCache.has(cacheKey) || keyframeCache.has(fallbackKey)) continue;
+        if (keyframeCache.has(cacheKey) || keyframeCache.has(fallbackKey) || keyframeCache.has(id))
+          continue;
         const entry = {
           format: "percentage" as const,
           keyframes: data.keyframes,
@@ -262,6 +419,7 @@ export function usePopulateKeyframeCacheForFile(
         };
         setKeyframeCache(cacheKey, entry);
         if (sf !== "index.html") setKeyframeCache(fallbackKey, entry);
+        setKeyframeCache(id, entry);
       }
       runtimeScanDoneRef.current = `kf-cache:${projectId}:${sf}:${version}`;
       return true;

package/src/hooks/useKeyframeKeyboard.ts

@@ -0,0 +1,103 @@
+import { useEffect, useCallback } from "react";
+import { usePlayerStore } from "../player/store/playerStore";
+
+interface KeyframeKeyboardOptions {
+  enabled: boolean;
+  onAddKeyframe?: () => void;
+  onDeleteKeyframe?: () => void;
+  onPrevKeyframe?: () => void;
+  onNextKeyframe?: () => void;
+  onToggleHold?: () => void;
+  onToggleExpand?: () => void;
+  onNudgeKeyframe?: (direction: -1 | 1, large: boolean) => void;
+}
+
+function isTextInput(el: Element | null): boolean {
+  if (!el) return false;
+  const tag = el.tagName;
+  if (tag === "INPUT" || tag === "TEXTAREA" || tag === "SELECT") return true;
+  return (el as HTMLElement).isContentEditable === true;
+}
+
+export function useKeyframeKeyboard({
+  enabled,
+  onAddKeyframe,
+  onDeleteKeyframe,
+  onPrevKeyframe,
+  onNextKeyframe,
+  onToggleHold,
+  onToggleExpand,
+  onNudgeKeyframe,
+}: KeyframeKeyboardOptions): void {
+  const handler = useCallback(
+    (e: KeyboardEvent) => {
+      if (!enabled) return;
+      if (isTextInput(document.activeElement)) return;
+
+      const hasSelectedKeyframes = usePlayerStore.getState().selectedKeyframes.size > 0;
+
+      switch (e.key.toLowerCase()) {
+        case "k":
+          if (!e.metaKey && !e.ctrlKey) {
+            e.preventDefault();
+            onAddKeyframe?.();
+          }
+          break;
+        case "delete":
+        case "backspace":
+          if (hasSelectedKeyframes) {
+            e.preventDefault();
+            onDeleteKeyframe?.();
+          }
+          break;
+        case "j":
+          if (!e.metaKey && !e.ctrlKey) {
+            e.preventDefault();
+            if (e.shiftKey) onNextKeyframe?.();
+            else onPrevKeyframe?.();
+          }
+          break;
+        case "h":
+          if (!e.metaKey && !e.ctrlKey && hasSelectedKeyframes) {
+            e.preventDefault();
+            onToggleHold?.();
+          }
+          break;
+        case "u":
+          if (!e.metaKey && !e.ctrlKey) {
+            e.preventDefault();
+            onToggleExpand?.();
+          }
+          break;
+        case "arrowleft":
+          if (hasSelectedKeyframes && !e.metaKey && !e.ctrlKey && !e.altKey) {
+            e.preventDefault();
+            onNudgeKeyframe?.(-1, e.shiftKey);
+          }
+          break;
+        case "arrowright":
+          if (hasSelectedKeyframes && !e.metaKey && !e.ctrlKey && !e.altKey) {
+            e.preventDefault();
+            onNudgeKeyframe?.(1, e.shiftKey);
+          }
+          break;
+      }
+    },
+    [
+      enabled,
+      onAddKeyframe,
+      onDeleteKeyframe,
+      onPrevKeyframe,
+      onNextKeyframe,
+      onToggleHold,
+      onToggleExpand,
+      onNudgeKeyframe,
+    ],
+  );
+
+  useEffect(() => {
+    if (!enabled) return;
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [enabled, handler]);
+}

package/src/hooks/useStudioContextValue.ts

@@ -17,7 +17,6 @@ interface StudioContextInput {
   compositionLoading: boolean;
   refreshKey: number;
   setRefreshKey: React.Dispatch<React.SetStateAction<number>>;
-  currentTime: number;
   timelineElements: StudioContextValue["timelineElements"];
   isPlaying: boolean;
   editHistory: { canUndo: boolean; canRedo: boolean; undoLabel: string; redoLabel: string };
@@ -50,7 +49,7 @@ export function buildStudioContextValue(input: StudioContextInput): StudioContex
     compositionLoading: input.compositionLoading,
     refreshKey: input.refreshKey,
     setRefreshKey: input.setRefreshKey,
-    currentTime: input.currentTime,
+
     timelineElements: input.timelineElements,
     isPlaying: input.isPlaying,
     editHistory: input.editHistory,
@@ -81,6 +80,7 @@ export function useInspectorState(
   rightCollapsed: boolean,
   isPlaying: boolean,
   domEditSelection: DomEditSelection | null,
+  isGestureRecording?: boolean,
 ): InspectorState {
   // fallow-ignore-next-line complexity
   return useMemo(() => {
@@ -101,9 +101,10 @@ export function useInspectorState(
       inspectorPanelActive,
       inspectorButtonActive:
         STUDIO_INSPECTOR_PANELS_ENABLED && !rightCollapsed && inspectorPanelActive,
-      shouldShowSelectedDomBounds: inspectorPanelActive && !rightCollapsed && !isPlaying,
+      shouldShowSelectedDomBounds:
+        inspectorPanelActive && !rightCollapsed && !isPlaying && !isGestureRecording,
     };
-  }, [rightPanelTab, rightCollapsed, isPlaying, domEditSelection]);
+  }, [rightPanelTab, rightCollapsed, isPlaying, domEditSelection, isGestureRecording]);
 }
 
 // fallow-ignore-next-line complexity

package/src/hooks/useStudioUrlState.ts

@@ -11,7 +11,6 @@ import {
 interface UseStudioUrlStateParams {
   projectId: string | null;
   activeCompPath: string | null;
-  currentTime: number;
   duration: number;
   isPlaying: boolean;
   compositionLoading: boolean;
@@ -57,7 +56,6 @@ function replaceHash(nextHash: string) {
 export function useStudioUrlState({
   projectId,
   activeCompPath,
-  currentTime,
   duration,
   isPlaying,
   compositionLoading,
@@ -72,6 +70,7 @@ export function useStudioUrlState({
   applyDomSelection,
   initialState,
 }: UseStudioUrlStateParams) {
+  const currentTime = usePlayerStore((s) => s.currentTime);
   const hydratedSeekRef = useRef(initialState.currentTime == null);
   const hydratedInitialTimeRef = useRef(initialState.currentTime == null);
   const hydratedSelectionRef = useRef(initialState.selection == null);

package/src/hooks/useTimelineEditing.ts

@@ -41,13 +41,27 @@ interface UseTimelineEditingOptions {
   previewIframeRef: React.RefObject<HTMLIFrameElement | null>;
   pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
   uploadProjectFiles: (files: Iterable<File>, dir?: string) => Promise<string[]>;
+  isRecordingRef?: React.RefObject<boolean>;
 }
 
 // ── Helpers ──
 
-function buildPatchTarget(element: { domId?: string; selector?: string; selectorIndex?: number }) {
+function buildPatchTarget(element: {
+  domId?: string;
+  hfId?: string;
+  selector?: string;
+  selectorIndex?: number;
+}) {
   if (element.domId) {
-    return { id: element.domId, selector: element.selector, selectorIndex: element.selectorIndex };
+    return {
+      id: element.domId,
+      hfId: element.hfId,
+      selector: element.selector,
+      selectorIndex: element.selectorIndex,
+    };
+  }
+  if (element.hfId) {
+    return { hfId: element.hfId, selector: element.selector, selectorIndex: element.selectorIndex };
   }
   if (element.selector) {
     return { selector: element.selector, selectorIndex: element.selectorIndex };
@@ -174,6 +188,7 @@ export function useTimelineEditing({
   previewIframeRef,
   pendingTimelineEditPathRef,
   uploadProjectFiles,
+  isRecordingRef,
 }: UseTimelineEditingOptions) {
   const projectIdRef = useRef(projectId);
   projectIdRef.current = projectId;
@@ -187,6 +202,10 @@ export function useTimelineEditing({
       label: string,
       buildPatches: PersistTimelineEditInput["buildPatches"],
     ): Promise<void> => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return Promise.resolve();
+      }
       const pid = projectIdRef.current;
       if (!pid) return Promise.resolve();
       const queued = editQueueRef.current.then(() =>
@@ -213,6 +232,8 @@ export function useTimelineEditing({
       writeProjectFile,
       domEditSaveTimestampRef,
       pendingTimelineEditPathRef,
+      showToast,
+      isRecordingRef,
     ],
   );
 
@@ -274,6 +295,10 @@ export function useTimelineEditing({
 
   const handleTimelineElementDelete = useCallback(
     async (element: TimelineElement) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No active project");
       const label = getTimelineElementLabel(element);
@@ -338,6 +363,7 @@ export function useTimelineEditing({
       writeProjectFile,
       domEditSaveTimestampRef,
       reloadPreview,
+      isRecordingRef,
     ],
   );
 
@@ -347,6 +373,10 @@ export function useTimelineEditing({
       placement: Pick<TimelineElement, "start" | "track">,
       durationOverride?: number,
     ) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
       const pid = projectIdRef.current;
       if (!pid) throw new Error("No active project");
 
@@ -415,11 +445,16 @@ export function useTimelineEditing({
       writeProjectFile,
       domEditSaveTimestampRef,
       reloadPreview,
+      isRecordingRef,
     ],
   );
 
   const handleTimelineFileDrop = useCallback(
     async (files: File[], placement?: Pick<TimelineElement, "start" | "track">) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
       const pid = projectIdRef.current;
       if (!pid) return;
       const uploaded = await uploadProjectFiles(files);
@@ -453,7 +488,14 @@ export function useTimelineEditing({
         );
       }
     },
-    [activeCompPath, handleTimelineAssetDrop, timelineElements, uploadProjectFiles],
+    [
+      activeCompPath,
+      handleTimelineAssetDrop,
+      timelineElements,
+      uploadProjectFiles,
+      isRecordingRef,
+      showToast,
+    ],
   );
 
   const handleBlockedTimelineEdit = useCallback(
@@ -468,6 +510,10 @@ export function useTimelineEditing({
 
   const handleTimelineElementSplit = useCallback(
     async (element: TimelineElement, splitTime: number) => {
+      if (isRecordingRef?.current) {
+        showToast("Cannot edit timeline while recording", "error");
+        return;
+      }
       const pid = projectIdRef.current;
       if (!pid) return;
 
@@ -555,6 +601,7 @@ export function useTimelineEditing({
       writeProjectFile,
       domEditSaveTimestampRef,
       reloadPreview,
+      isRecordingRef,
     ],
   );
 

package/src/hooks/useToast.ts

@@ -16,5 +16,10 @@ export function useToast() {
     if (timerRef.current) clearTimeout(timerRef.current);
   });
 
-  return { appToast, showToast };
+  const dismissToast = useCallback(() => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setAppToast(null);
+  }, []);
+
+  return { appToast, showToast, dismissToast };
 }

package/src/player/components/ShortcutsPanel.tsx

@@ -17,6 +17,46 @@ const SHORTCUT_SECTIONS = [
       { key: "F", label: "Toggle fullscreen" },
     ],
   },
+  {
+    title: "Keyframes",
+    hints: [
+      { key: "K", label: "Add keyframe at playhead" },
+      { key: "Del", label: "Delete selected keyframe" },
+      { key: "H", label: "Toggle hold / bezier" },
+      { key: "U", label: "Expand / collapse properties" },
+      { key: "R", label: "Record gesture" },
+    ],
+  },
+  {
+    title: "Editing",
+    hints: [
+      { key: "⌘Z", label: "Undo" },
+      { key: "⌘⇧Z", label: "Redo" },
+      { key: "⌘C", label: "Copy element" },
+      { key: "⌘V", label: "Paste element" },
+      { key: "⌘X", label: "Cut element" },
+      { key: "S", label: "Split clip at playhead" },
+      { key: "Del", label: "Delete selected element" },
+    ],
+  },
+  {
+    title: "Gesture recording modifiers",
+    hints: [
+      { key: "Drag", label: "Record x / y position" },
+      { key: "Scroll", label: "Record z depth" },
+      { key: "⇧ Drag", label: "Record rotationX / rotationY" },
+      { key: "⌥ Drag", label: "Record rotation" },
+      { key: "⌘ Drag↕", label: "Record opacity" },
+      { key: "⌘ Scroll", label: "Record scale" },
+    ],
+  },
+  {
+    title: "Panels",
+    hints: [
+      { key: "⌘1", label: "Compositions tab" },
+      { key: "⌘2", label: "Assets tab" },
+    ],
+  },
   {
     title: "Work area",
     hints: [

package/src/player/components/TimelineClipDiamonds.tsx

@@ -102,7 +102,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
         const x2 = (kf.percentage / 100) * clipWidthPx;
         return (
           <div
-            key={`line-${prev.percentage}-${kf.percentage}`}
+            key={`line-${i}-${prev.percentage}-${kf.percentage}`}
             className="absolute"
             style={{
               left: x1,
@@ -118,7 +118,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
         );
       })}
 
-      {sorted.map((kf) => {
+      {sorted.map((kf, i) => {
         const leftPx = (kf.percentage / 100) * clipWidthPx - half;
         const kfKey = `${elementId}:${kf.percentage}`;
         const isKfSelected = selectedKeyframes.has(kfKey);
@@ -126,7 +126,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
         const color = isKfSelected || atPlayhead ? accentColor : "#a3a3a3";
         return (
           <button
-            key={kf.percentage}
+            key={`${i}-${kf.percentage}`}
             type="button"
             className="absolute"
             style={{