@hyperframes/studio 0.6.72 → 0.6.74

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -0,0 +1,164 @@
+import { memo, useCallback, useEffect, useRef } from "react";
+import { EASE_LABELS } from "../../components/editor/gsapAnimationConstants";
+
+export interface KeyframeDiamondContextMenuState {
+  x: number;
+  y: number;
+  elementId: string;
+  percentage: number;
+  currentEase?: string;
+}
+
+interface KeyframeDiamondContextMenuProps {
+  state: KeyframeDiamondContextMenuState;
+  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;
+}
+
+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 = useRef<HTMLDivElement>(null);
+  const easeSubmenuRef = useRef<HTMLDivElement>(null);
+
+  const dismiss = useCallback(
+    (e: MouseEvent | KeyboardEvent) => {
+      if (e instanceof KeyboardEvent && e.key !== "Escape") return;
+      if (e instanceof MouseEvent && menuRef.current?.contains(e.target as Node)) return;
+      onClose();
+    },
+    [onClose],
+  );
+
+  useEffect(() => {
+    document.addEventListener("mousedown", dismiss);
+    document.addEventListener("keydown", dismiss);
+    return () => {
+      document.removeEventListener("mousedown", dismiss);
+      document.removeEventListener("keydown", dismiss);
+    };
+  }, [dismiss]);
+
+  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";
+
+  return (
+    <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);
+          onClose();
+        }}
+      >
+        Delete Keyframe
+      </button>
+
+      <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={() => {
+          onDeleteAll(state.elementId);
+          onClose();
+        }}
+      >
+        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>
+  );
+});

package/src/player/components/Timeline.test.ts

@@ -12,6 +12,7 @@ import {
   shouldHandleTimelineDeleteKey,
   shouldAutoScrollTimeline,
 } from "./Timeline";
+import { RULER_H, TRACK_H } from "./timelineLayout";
 import { formatTime } from "../lib/time";
 
 describe("generateTicks", () => {
@@ -230,7 +231,7 @@ describe("getTimelinePlayheadLeft", () => {
 
 describe("getTimelineCanvasHeight", () => {
   it("includes bottom scroll buffer below the last track", () => {
-    expect(getTimelineCanvasHeight(3)).toBeGreaterThan(24 + 3 * 72);
+    expect(getTimelineCanvasHeight(3)).toBeGreaterThan(RULER_H + 3 * TRACK_H);
   });
 
   it("still keeps ruler space when there are no tracks", () => {

package/src/player/components/Timeline.tsx

@@ -8,17 +8,20 @@ import { useTimelineRangeSelection } from "./useTimelineRangeSelection";
 import { useTimelinePlayhead } from "./useTimelinePlayhead";
 import { type TrackVisualStyle, getTrackStyle } from "./timelineIcons";
 import { getTimelinePixelsPerSecond } from "./timelineZoom";
-import { TIMELINE_ASSET_MIME, TIMELINE_BLOCK_MIME } from "../../utils/timelineAssetDrop";
+import { useTimelineAssetDrop } from "./timelineDragDrop";
 import { TimelineEmptyState } from "./TimelineEmptyState";
 import { TimelineCanvas } from "./TimelineCanvas";
+import {
+  KeyframeDiamondContextMenu,
+  type KeyframeDiamondContextMenuState,
+} from "./KeyframeDiamondContextMenu";
 import { useTimelineClipDrag } from "./useTimelineClipDrag";
+import { ClipContextMenu } from "./ClipContextMenu";
 import {
   GUTTER,
-  TRACK_H,
   generateTicks,
   getTimelineCanvasHeight,
   shouldShowTimelineShortcutHint,
-  resolveTimelineAssetDrop,
 } from "./timelineLayout";
 
 // Re-export pure utilities so existing imports from "./Timeline" still resolve.
@@ -66,7 +69,13 @@ interface TimelineProps {
     updates: Pick<TimelineElement, "start" | "duration" | "playbackStart">,
   ) => Promise<void> | void;
   onBlockedEditAttempt?: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
+  onSplitElement?: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   onSelectElement?: (element: TimelineElement | null) => void;
+  onDeleteKeyframe?: (elementId: string, percentage: number) => void;
+  onDeleteAllKeyframes?: (elementId: string) => void;
+  onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
+  onMoveKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
+  onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
   theme?: Partial<TimelineTheme>;
 }
 
@@ -82,7 +91,13 @@ export const Timeline = memo(function Timeline({
   onMoveElement,
   onResizeElement,
   onBlockedEditAttempt,
+  onSplitElement,
   onSelectElement,
+  onDeleteKeyframe,
+  onDeleteAllKeyframes,
+  onChangeKeyframeEase,
+  onMoveKeyframe,
+  onToggleKeyframeAtPlayhead,
   theme: themeOverrides,
 }: TimelineProps = {}) {
   const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
@@ -120,6 +135,12 @@ export const Timeline = memo(function Timeline({
 
   const [showPopover, setShowPopover] = useState(false);
   const [showShortcutHint, setShowShortcutHint] = useState(true);
+  const [kfContextMenu, setKfContextMenu] = useState<KeyframeDiamondContextMenuState | null>(null);
+  const [clipContextMenu, setClipContextMenu] = useState<{
+    x: number;
+    y: number;
+    element: TimelineElement;
+  } | null>(null);
   const [viewportWidth, setViewportWidth] = useState(0);
   const roRef = useRef<ResizeObserver | null>(null);
   const shortcutHintRafRef = useRef(0);
@@ -231,6 +252,10 @@ export const Timeline = memo(function Timeline({
   }, [draggedClip, trackOrder]);
 
   const totalH = getTimelineCanvasHeight(displayTrackOrder.length);
+  const keyframeCache = usePlayerStore((s) => s.keyframeCache);
+  const selectedKeyframes = usePlayerStore((s) => s.selectedKeyframes);
+  const toggleSelectedKeyframe = usePlayerStore((s) => s.toggleSelectedKeyframe);
+
   const selectedElement = useMemo(
     () => elements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
     [elements, selectedElementId],
@@ -337,71 +362,15 @@ export const Timeline = memo(function Timeline({
     [resizingClip],
   );
 
-  const [isDragOver, setIsDragOver] = useState(false);
-  const handleAssetDragOver = useCallback((e: React.DragEvent) => {
-    const hasFiles = e.dataTransfer.files.length > 0;
-    const types = Array.from(e.dataTransfer.types);
-    const hasAsset = types.includes(TIMELINE_ASSET_MIME);
-    const hasBlock = types.includes(TIMELINE_BLOCK_MIME);
-    if (!hasFiles && !hasAsset && !hasBlock) return;
-    e.preventDefault();
-    if (hasAsset || hasBlock) e.dataTransfer.dropEffect = "copy";
-    setIsDragOver(true);
-  }, []);
-
-  const handleAssetDrop = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
-      setIsDragOver(false);
-      const scroll = scrollRef.current;
-      const rect = scroll?.getBoundingClientRect();
-      const dropInput = {
-        rectLeft: rect?.left ?? 0,
-        rectTop: rect?.top ?? 0,
-        scrollLeft: scroll?.scrollLeft ?? 0,
-        scrollTop: scroll?.scrollTop ?? 0,
-        pixelsPerSecond: ppsRef.current,
-        duration: durationRef.current,
-        trackHeight: TRACK_H,
-        trackOrder: trackOrderRef.current,
-      };
-      if (onFileDrop && e.dataTransfer.files.length > 0) {
-        void onFileDrop(
-          Array.from(e.dataTransfer.files),
-          scroll && rect ? resolveTimelineAssetDrop(dropInput, e.clientX, e.clientY) : undefined,
-        );
-        return;
-      }
-      const assetPayload = e.dataTransfer.getData(TIMELINE_ASSET_MIME);
-      if (assetPayload && onAssetDrop && scroll && rect) {
-        try {
-          const parsed = JSON.parse(assetPayload) as { path?: string };
-          if (parsed.path)
-            void onAssetDrop(
-              parsed.path,
-              resolveTimelineAssetDrop(dropInput, e.clientX, e.clientY),
-            );
-        } catch {
-          /* ignore malformed drag payloads */
-        }
-        return;
-      }
-      const blockPayload = e.dataTransfer.getData(TIMELINE_BLOCK_MIME);
-      if (blockPayload && onBlockDrop && scroll && rect) {
-        try {
-          const parsed = JSON.parse(blockPayload) as { name?: string };
-          if (parsed.name)
-            void onBlockDrop(
-              parsed.name,
-              resolveTimelineAssetDrop(dropInput, e.clientX, e.clientY),
-            );
-        } catch {
-          /* ignore malformed drag payloads */
-        }
-      }
-    },
-    [onAssetDrop, onBlockDrop, onFileDrop],
-  );
+  const { isDragOver, setIsDragOver, handleAssetDragOver, handleAssetDrop } = useTimelineAssetDrop({
+    scrollRef,
+    ppsRef,
+    durationRef,
+    trackOrderRef,
+    onFileDrop,
+    onAssetDrop,
+    onBlockDrop,
+  });
 
   if (!timelineReady || elements.length === 0) {
     return (
@@ -477,6 +446,48 @@ export const Timeline = memo(function Timeline({
           shiftClickClipRef={shiftClickClipRef}
           getPreviewElement={getPreviewElement}
           getTrackStyle={getTrackStyle}
+          keyframeCache={keyframeCache}
+          selectedKeyframes={selectedKeyframes}
+          currentTime={currentTime}
+          onToggleKeyframeAtPlayhead={onToggleKeyframeAtPlayhead}
+          onClickKeyframe={(el, pct) => {
+            usePlayerStore.getState().clearSelectedKeyframes();
+            const elKey = el.key ?? el.id;
+            setSelectedElementId(elKey);
+            onSelectElement?.(el);
+            const absTime = el.start + (pct / 100) * el.duration;
+            onSeek?.(absTime);
+          }}
+          onShiftClickKeyframe={(elId, pct) => {
+            toggleSelectedKeyframe(`${elId}:${pct}`);
+          }}
+          onDragKeyframe={(el, oldPct, newPct) => {
+            onMoveKeyframe?.(el, oldPct, newPct);
+          }}
+          onContextMenuKeyframe={(e, elId, pct) => {
+            const el = elements.find((x) => (x.key ?? x.id) === elId);
+            if (el) {
+              setSelectedElementId(elId);
+              onSelectElement?.(el);
+              const absTime = el.start + (pct / 100) * el.duration;
+              onSeek?.(absTime);
+            }
+            const kfData = keyframeCache.get(elId);
+            const kf = kfData?.keyframes.find((k) => k.percentage === pct);
+            setKfContextMenu({
+              x: e.clientX,
+              y: e.clientY,
+              elementId: elId,
+              percentage: pct,
+              currentEase: kf?.ease ?? kfData?.ease,
+            });
+          }}
+          onContextMenuClip={(e, el) => {
+            e.preventDefault();
+            setSelectedElementId(el.key ?? el.id);
+            onSelectElement?.(el);
+            setClipContextMenu({ x: e.clientX, y: e.clientY, element: el });
+          }}
         />
       </div>
 
@@ -511,6 +522,35 @@ export const Timeline = memo(function Timeline({
           }}
         />
       )}
+
+      {kfContextMenu && (
+        <KeyframeDiamondContextMenu
+          state={kfContextMenu}
+          onClose={() => setKfContextMenu(null)}
+          onDelete={(elId, pct) => onDeleteKeyframe?.(elId, pct)}
+          onDeleteAll={(elId) => onDeleteAllKeyframes?.(elId)}
+          onChangeEase={(elId, pct, ease) => onChangeKeyframeEase?.(elId, pct, ease)}
+          onCopyProperties={(elId, pct) => {
+            const kfData = keyframeCache.get(elId);
+            const kf = kfData?.keyframes.find((k) => k.percentage === pct);
+            if (kf) {
+              void navigator.clipboard.writeText(JSON.stringify(kf.properties, null, 2));
+            }
+          }}
+        />
+      )}
+
+      {clipContextMenu && (
+        <ClipContextMenu
+          x={clipContextMenu.x}
+          y={clipContextMenu.y}
+          element={clipContextMenu.element}
+          currentTime={currentTime}
+          onClose={() => setClipContextMenu(null)}
+          onSplit={(el, time) => onSplitElement?.(el, time)}
+          onDelete={(el) => _onDeleteElement?.(el)}
+        />
+      )}
     </div>
   );
 });

package/src/player/components/TimelineCanvas.tsx

@@ -1,5 +1,6 @@
 import { memo, type ReactNode } from "react";
 import { TimelineClip } from "./TimelineClip";
+import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
 import { TimelineRuler } from "./TimelineRuler";
 import {
   getTimelineEditCapabilities,
@@ -8,9 +9,10 @@ import {
 } from "./timelineEditing";
 import { getRenderedTimelineElement, type TimelineTheme } from "./timelineTheme";
 import { GUTTER, TRACK_H, RULER_H, CLIP_Y, CLIP_HANDLE_W } from "./timelineLayout";
-import type { TimelineElement } from "../store/playerStore";
+import type { TimelineElement, KeyframeCacheEntry } from "../store/playerStore";
 import type { DraggedClipState, ResizingClipState, BlockedClipState } from "./useTimelineClipDrag";
 import type { TrackVisualStyle } from "./timelineIcons";
+import { STUDIO_KEYFRAMES_ENABLED } from "../../components/editor/manualEditingAvailability";
 
 interface TimelineCanvasProps {
   major: number[];
@@ -58,6 +60,15 @@ interface TimelineCanvasProps {
   } | null>;
   getPreviewElement: (element: TimelineElement) => TimelineElement;
   getTrackStyle: (tag: string) => TrackVisualStyle;
+  keyframeCache?: Map<string, KeyframeCacheEntry>;
+  selectedKeyframes: Set<string>;
+  currentTime: number;
+  onClickKeyframe?: (element: TimelineElement, percentage: number) => void;
+  onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
+  onDragKeyframe?: (element: TimelineElement, oldPct: number, newPct: number) => void;
+  onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
+  onContextMenuClip?: (e: React.MouseEvent, element: TimelineElement) => void;
+  onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
 }
 
 export const TimelineCanvas = memo(function TimelineCanvas({
@@ -99,6 +110,15 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   shiftClickClipRef,
   getPreviewElement,
   getTrackStyle,
+  keyframeCache,
+  selectedKeyframes,
+  currentTime,
+  onClickKeyframe,
+  onShiftClickKeyframe,
+  onDragKeyframe,
+  onContextMenuKeyframe,
+  onContextMenuClip,
+  onToggleKeyframeAtPlayhead: _onToggleKeyframeAtPlayhead,
 }: TimelineCanvasProps) {
   const draggedElement = draggedClip?.element ?? null;
   const activeDraggedElement =
@@ -231,6 +251,10 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                 return (
                   <TimelineClip
                     key={clipKey}
+                    onContextMenu={(e: React.MouseEvent) => {
+                      e.preventDefault();
+                      onContextMenuClip?.(e, el);
+                    }}
                     el={previewElement}
                     pps={pps}
                     clipY={CLIP_Y}
@@ -328,6 +352,28 @@ export const TimelineCanvas = memo(function TimelineCanvas({
                     }}
                   >
                     {renderClipChildren(previewElement, clipStyle)}
+                    {STUDIO_KEYFRAMES_ENABLED && keyframeCache?.get(elementKey) && (
+                      <TimelineClipDiamonds
+                        keyframesData={keyframeCache.get(elementKey)!}
+                        clipWidthPx={Math.max(previewElement.duration * pps, 4)}
+                        clipHeightPx={TRACK_H - 2 * CLIP_Y}
+                        accentColor={clipStyle.accent}
+                        isSelected={isSelected}
+                        currentPercentage={
+                          previewElement.duration > 0
+                            ? ((currentTime - previewElement.start) / previewElement.duration) * 100
+                            : 0
+                        }
+                        elementId={elementKey}
+                        selectedKeyframes={selectedKeyframes}
+                        onClickKeyframe={(pct) => onClickKeyframe?.(previewElement, pct)}
+                        onShiftClickKeyframe={onShiftClickKeyframe}
+                        onDragKeyframe={(oldPct, newPct) =>
+                          onDragKeyframe?.(previewElement, oldPct, newPct)
+                        }
+                        onContextMenuKeyframe={onContextMenuKeyframe}
+                      />
+                    )}
                   </TimelineClip>
                 );
               })}

package/src/player/components/TimelineClip.tsx

@@ -23,6 +23,7 @@ interface TimelineClipProps {
   onResizeStart?: (edge: "start" | "end", e: React.PointerEvent) => void;
   onClick: (e: React.MouseEvent) => void;
   onDoubleClick: (e: React.MouseEvent) => void;
+  onContextMenu?: (e: React.MouseEvent) => void;
   children?: ReactNode;
 }
 
@@ -44,6 +45,7 @@ export const TimelineClip = memo(function TimelineClip({
   onResizeStart,
   onClick,
   onDoubleClick,
+  onContextMenu,
   children,
 }: TimelineClipProps) {
   const leftPx = el.start * pps;
@@ -51,14 +53,14 @@ export const TimelineClip = memo(function TimelineClip({
   const handleOpacity = getClipHandleOpacity({ isHovered, isSelected, isDragging });
 
   const borderColor = isSelected
-    ? trackStyle.accent + "60"
+    ? trackStyle.accent
     : isHovered
       ? theme.clipBorderHover
       : theme.clipBorder;
   const boxShadow = isDragging
     ? theme.clipShadowDragging
     : isSelected
-      ? `0 0 0 1px ${trackStyle.accent}40`
+      ? `0 0 0 1px ${trackStyle.accent}80, 0 0 8px ${trackStyle.accent}25`
       : isHovered
         ? theme.clipShadowHover
         : theme.clipShadow;
@@ -69,7 +71,9 @@ export const TimelineClip = memo(function TimelineClip({
     <div
       data-clip="true"
       className={
-        hasCustomContent ? "absolute overflow-hidden" : "absolute flex items-center overflow-hidden"
+        hasCustomContent
+          ? "absolute overflow-visible"
+          : "absolute flex items-center overflow-visible"
       }
       style={{
         left: leftPx,
@@ -96,6 +100,7 @@ export const TimelineClip = memo(function TimelineClip({
       onPointerDown={onPointerDown}
       onClick={onClick}
       onDoubleClick={onDoubleClick}
+      onContextMenu={onContextMenu}
     >
       {/* Left accent stripe */}
       <div