@hyperframes/studio 0.7.18 → 0.7.20

package/src/player/components/TimelineClipDiamonds.tsx

@@ -1,8 +1,15 @@
-import { memo } from "react";
+import { memo, useRef, useState } from "react";
 import { BEAT_BAND_H } from "./BeatStrip";
+import {
+  KEYFRAME_DRAG_THRESHOLD_PX,
+  previewClipPct,
+  resolveKeyframeDrag,
+} from "../../components/editor/keyframeDrag";
 
 interface KeyframeEntry {
   percentage: number;
+  /** Tween-relative percentage (the retime mutation keys on this, not clip %). */
+  tweenPercentage?: number;
   properties: Record<string, number | string>;
   ease?: string;
 }
@@ -29,6 +36,15 @@ interface TimelineClipDiamondsProps {
   onClickKeyframe?: (percentage: number) => void;
   onShiftClickKeyframe?: (elementId: string, percentage: number) => void;
   onContextMenuKeyframe?: (e: React.MouseEvent, elementId: string, percentage: number) => void;
+  /** Drag-to-retime: move a keyframe to a new time, preserving its value + ease.
+   *  Both percentages are clip-relative: `fromClipPercentage` identifies the
+   *  dragged keyframe, `toClipPercentage` is the neighbour-clamped drop position.
+   *  The handler decides move (within the tween) vs resize (past its boundary). */
+  onMoveKeyframe?: (
+    elementId: string,
+    fromClipPercentage: number,
+    toClipPercentage: number,
+  ) => void;
 }
 
 const DIAMOND_RATIO = 0.8;
@@ -39,6 +55,13 @@ const DIAMOND_RATIO = 0.8;
 const KF_MIN_PCT = -5;
 const KF_MAX_PCT = 105;
 
+type DragState = {
+  kfKey: string;
+  startX: number;
+  fromClipPct: number;
+  moved: boolean;
+};
+
 export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   keyframesData,
   clipWidthPx,
@@ -52,7 +75,15 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   onClickKeyframe,
   onShiftClickKeyframe,
   onContextMenuKeyframe,
+  onMoveKeyframe,
 }: TimelineClipDiamondsProps) {
+  // Hooks must run before the early return below.
+  const dragRef = useRef<DragState | null>(null);
+  // Visual-only preview of the dragged diamond's clip-% — no runtime/GSAP hold
+  // (that optimistic hold was the #1763 flake). The atomic move-keyframe commit
+  // on drop re-keys the diamond from source.
+  const [preview, setPreview] = useState<{ kfKey: string; clipPct: number } | null>(null);
+
   if (clipWidthPx < 20) return null;
 
   // When the beat strip occupies the top band, shrink the diamonds and center
@@ -63,17 +94,12 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   const sorted = keyframesData.keyframes
     .filter((kf) => kf.percentage >= KF_MIN_PCT && kf.percentage <= KF_MAX_PCT)
     .sort((a, b) => a.percentage - b.percentage);
+  // Clip-%s of the sorted keyframes — the neighbour clamp (preview + drop) needs
+  // the whole row to bound the dragged diamond between its immediate siblings.
+  const sortedClipPcts = sorted.map((k) => k.percentage);
   const baseColor = isSelected ? accentColor : "#a3a3a3";
   const baseOpacity = isSelected ? 0.4 : 0.25;
-
-  const handleClick = (e: React.MouseEvent, pct: number) => {
-    e.stopPropagation();
-    if (e.shiftKey) {
-      onShiftClickKeyframe?.(elementId, pct);
-    } else {
-      onClickKeyframe?.(pct);
-    }
-  };
+  const canDrag = isSelected && !!onMoveKeyframe;
 
   return (
     <div className="absolute inset-0" style={{ zIndex: 3, pointerEvents: "none" }}>
@@ -102,17 +128,80 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
       })}
 
       {sorted.map((kf, i) => {
+        const kfKey = `${elementId}:${kf.percentage}`;
+        // While dragging this diamond, render it at the live preview clip-%.
+        const renderPct = preview?.kfKey === kfKey ? preview.clipPct : kf.percentage;
         // Center the diamond ON its keyframe %: left = (% · width) − half so the
         // diamond's midpoint sits exactly at the percentage. At 0% the midpoint
-        // is the clip's left edge (the diamond's left half overflows, which the
-        // overflow-visible clip shows) — NOT shifted fully inside. No clamp, or
-        // boundary keyframes (0% / 100%) would render off-center.
-        const leftPx = (kf.percentage / 100) * clipWidthPx - half;
-        const kfKey = `${elementId}:${kf.percentage}`;
+        // is the clip's left edge (the left half overflows, which the
+        // overflow-visible clip shows) — NOT shifted fully inside.
+        const leftPx = (renderPct / 100) * clipWidthPx - half;
         const isKfSelected = selectedKeyframes.has(kfKey);
         const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5;
         const isHighlighted = isKfSelected || atPlayhead;
         const color = isHighlighted ? accentColor : "#a3a3a3";
+
+        const onPointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
+          if (e.button !== 0) return;
+          e.stopPropagation();
+          if (canDrag) {
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+            dragRef.current = {
+              kfKey,
+              startX: e.clientX,
+              fromClipPct: kf.percentage,
+              moved: false,
+            };
+          }
+        };
+        const onPointerMove = (e: React.PointerEvent<HTMLButtonElement>) => {
+          const d = dragRef.current;
+          if (!d || d.kfKey !== kfKey) return;
+          if (!d.moved && Math.abs(e.clientX - d.startX) >= KEYFRAME_DRAG_THRESHOLD_PX) {
+            d.moved = true;
+          }
+          if (d.moved) {
+            setPreview({
+              kfKey,
+              clipPct: previewClipPct({
+                pointerDownX: d.startX,
+                pointerMoveX: e.clientX,
+                clipWidthPx,
+                draggedClipPct: d.fromClipPct,
+                draggedIndex: i,
+                sortedClipPcts,
+              }),
+            });
+          }
+        };
+        const onPointerUp = (e: React.PointerEvent<HTMLButtonElement>) => {
+          const d = dragRef.current;
+          // No drag armed (canDrag false / non-primary press) → treat as a click.
+          if (!d || d.kfKey !== kfKey) {
+            if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
+            else onClickKeyframe?.(kf.percentage);
+            return;
+          }
+          e.stopPropagation();
+          dragRef.current = null;
+          setPreview(null);
+          e.currentTarget.releasePointerCapture?.(e.pointerId);
+          const res = resolveKeyframeDrag({
+            pointerDownX: d.startX,
+            pointerUpX: e.clientX,
+            clipWidthPx,
+            draggedClipPct: d.fromClipPct,
+            draggedIndex: i,
+            sortedClipPcts,
+          });
+          if (res.kind === "click") {
+            if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
+            else onClickKeyframe?.(kf.percentage);
+          } else if (res.kind === "move" && res.toClipPct != null) {
+            onMoveKeyframe?.(elementId, d.fromClipPct, res.toClipPct);
+          }
+        };
+
         return (
           <button
             key={`${i}-${kf.percentage}`}
@@ -128,10 +217,13 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
               pointerEvents: "auto",
               background: "none",
               border: "none",
-              cursor: "pointer",
+              cursor: canDrag ? "ew-resize" : "pointer",
               padding: 0,
+              touchAction: "none",
             }}
-            onClick={(e) => handleClick(e, kf.percentage)}
+            onPointerDown={onPointerDown}
+            onPointerMove={onPointerMove}
+            onPointerUp={onPointerUp}
             onContextMenu={(e) => {
               e.preventDefault();
               e.stopPropagation();

package/src/player/components/timelineCallbacks.ts

@@ -39,5 +39,11 @@ export interface TimelineEditCallbacks {
   onDeleteKeyframe?: (elementId: string, percentage: number) => void;
   onDeleteAllKeyframes?: (elementId: string) => void;
   onChangeKeyframeEase?: (elementId: string, percentage: number, ease: string) => void;
+  onMoveKeyframeToPlayhead?: (elementId: string, percentage: number) => void;
+  onMoveKeyframe?: (
+    elementId: string,
+    fromClipPercentage: number,
+    toClipPercentage: number,
+  ) => void;
   onToggleKeyframeAtPlayhead?: (element: TimelineElement) => void;
 }

package/src/utils/gsapSoftReload.test.ts

@@ -100,6 +100,35 @@ describe("applySoftReload", () => {
     expect(contentWindow.__hfStudioManualEditsApply).toHaveBeenCalled();
   });
 
+  it("strips a stale inline transform from an orphaned (non-timeline-child) element", () => {
+    // Repro: an element dragged via gsap.set whose keyframes were then removed is
+    // no longer a timeline child, so the timeline-children sweep misses it. Its
+    // stale inline transform must still be cleared so it snaps back to its source
+    // (overlay) position instead of rendering offset.
+    const orphan = document.createElement("div");
+    orphan.style.cssText = "left: 1240px; top: 200px; transform: translate(449px, 0px)";
+    Object.assign(orphan, { _gsap: {} }); // GSAP cache marker (set by gsap.set)
+
+    const scriptEl = document.createElement("script");
+    scriptEl.textContent = 'const tl = gsap.timeline({ paused: true }); tl.to("#x", { x: 1 });';
+    const container = document.createElement("div");
+    container.appendChild(scriptEl);
+
+    const { iframe } = buildMockIframe({ gsap: { timeline: vi.fn(), set: vi.fn() } });
+    (iframe as unknown as { contentDocument: unknown }).contentDocument = {
+      querySelectorAll: (sel: string) =>
+        sel === "script:not([src])" ? [scriptEl] : sel === "[style*='transform']" ? [orphan] : [],
+      createElement: (tag: string) => document.createElement(tag),
+      body: container,
+      head: document.createElement("div"),
+    };
+
+    applySoftReload(iframe, SCRIPT_TEXT);
+
+    expect(orphan.style.transform).toBe(""); // stale GSAP transform stripped
+    expect(orphan.style.left).toBe("1240px"); // authored CSS base preserved
+  });
+
   it("wraps execution in __hfSuppressSceneMutations when available", () => {
     let suppressionCalled = false;
     const { iframe } = buildMockIframe({

package/src/utils/gsapSoftReload.ts

@@ -251,6 +251,25 @@ export function applySoftReload(
       }
     }
 
+    // Also reset elements carrying a GSAP-applied inline `transform` that the
+    // timeline-children sweep above missed — a dragged element whose position
+    // was a standalone `gsap.set` (never a timeline child), or one whose
+    // keyframes were just removed (no longer in any timeline). Their last
+    // `gsap.set` transform is otherwise orphaned: the re-run won't re-set it
+    // and the sweep above can't see it, so the element renders offset from its
+    // source position (matching the overlay) until a full reload. The clear
+    // below runs BEFORE the re-run, which re-applies the transform for any
+    // element the new script still animates.
+    const seenTargets = new Set<Element>(allTargets);
+    for (const el of doc.querySelectorAll<HTMLElement>("[style*='transform']")) {
+      // Gate on the GSAP cache (`_gsap`) so we only reset transforms GSAP owns —
+      // never strip an authored, non-GSAP inline transform.
+      if (el.style.transform && "_gsap" in el && !seenTargets.has(el)) {
+        seenTargets.add(el);
+        allTargets.push(el);
+      }
+    }
+
     // Reset GSAP's internal transform cache so from() tweens don't read stale
     // end values. `clearProps: "all"` is needed to flush the cache, but it also
     // nukes the element's CSS base (position, width, height, etc.) from the