@hyperframes/studio 0.7.25 → 0.7.26

package/src/player/components/TimelineClipDiamonds.test.tsx

@@ -0,0 +1,215 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function pointerEvent(type: string, init: PointerEventInit): Event {
+  if (typeof PointerEvent === "function") return new PointerEvent(type, init);
+  return new MouseEvent(type, init);
+}
+
+function renderDiamonds(onClickKeyframe = vi.fn()) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  act(() => {
+    root.render(
+      <TimelineClipDiamonds
+        keyframesData={{
+          format: "percentage",
+          keyframes: [
+            { percentage: 0, properties: { x: 0 } },
+            { percentage: 50, properties: { x: 100 } },
+          ],
+        }}
+        clipWidthPx={200}
+        clipHeightPx={48}
+        accentColor="#4ba3d2"
+        isSelected
+        currentPercentage={0}
+        elementId="clip-1"
+        selectedKeyframes={new Set()}
+        onClickKeyframe={onClickKeyframe}
+      />,
+    );
+  });
+  return { host, root, onClickKeyframe };
+}
+
+describe("TimelineClipDiamonds", () => {
+  it("treats primary pointerup without drag as a keyframe click", () => {
+    const { host, root, onClickKeyframe } = renderDiamonds();
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
+    expect(diamond).not.toBeNull();
+
+    act(() => {
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0 }));
+    });
+
+    expect(onClickKeyframe).toHaveBeenCalledWith(50);
+    act(() => root.unmount());
+  });
+
+  it("does not treat secondary pointerup as a keyframe click", () => {
+    const { host, root, onClickKeyframe } = renderDiamonds();
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
+    expect(diamond).not.toBeNull();
+
+    act(() => {
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 2 }));
+    });
+
+    expect(onClickKeyframe).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  // Regression: once the clip is selected, canDrag arms on every diamond
+  // press. A real click's few px of mouse/trackpad jitter then resolves (via
+  // the neighbour clamp) back onto ~the same position — "noop", not "move" —
+  // which fell through neither branch and silently did nothing: no
+  // selection, no retime. It must still count as the click it was.
+  it("treats a drag-armed press that resolves to a no-op move as a click", () => {
+    const onClickKeyframe = vi.fn();
+    const onMoveKeyframe = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineClipDiamonds
+          keyframesData={{
+            format: "percentage",
+            keyframes: [
+              { percentage: 0, properties: { x: 0 } },
+              { percentage: 50, properties: { x: 100 } },
+            ],
+          }}
+          clipWidthPx={5000}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onClickKeyframe={onClickKeyframe}
+          onMoveKeyframe={onMoveKeyframe}
+        />,
+      );
+    });
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
+    expect(diamond).not.toBeNull();
+
+    act(() => {
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }),
+      );
+      // 4px of travel at a 5000px clip width is ~0.08 clip-% — above the drag
+      // threshold (so resolveKeyframeDrag doesn't short-circuit to "click"
+      // itself) but below the no-op epsilon once neighbour-clamped.
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 104 }));
+    });
+
+    expect(onClickKeyframe).toHaveBeenCalledWith(50);
+    expect(onMoveKeyframe).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+
+  // Regression: a genuine retime (drag far enough to actually move the
+  // keyframe) committed the move but never selected/parked on the result —
+  // the diamond it was just dragged looked exactly like one nothing happened
+  // to. Select it at its NEW position too.
+  it("selects the keyframe at its new position after a real drag-retime", () => {
+    const onClickKeyframe = vi.fn();
+    const onMoveKeyframe = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineClipDiamonds
+          keyframesData={{
+            format: "percentage",
+            keyframes: [
+              { percentage: 0, properties: { x: 0 } },
+              { percentage: 50, properties: { x: 100 } },
+            ],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onClickKeyframe={onClickKeyframe}
+          onMoveKeyframe={onMoveKeyframe}
+        />,
+      );
+    });
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
+    expect(diamond).not.toBeNull();
+
+    act(() => {
+      diamond!.dispatchEvent(
+        pointerEvent("pointerdown", { bubbles: true, button: 0, clientX: 100 }),
+      );
+      // 4px at a 200px clip width is 2 clip-% — well past the no-op epsilon,
+      // a real retime.
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0, clientX: 104 }));
+    });
+
+    expect(onMoveKeyframe).toHaveBeenCalledWith("clip-1", 50, 52);
+    expect(onClickKeyframe).toHaveBeenCalledWith(52);
+    act(() => root.unmount());
+  });
+
+  // Regression: onClickKeyframe's state updates can re-render the diamond
+  // button out from under the gesture before the browser auto-synthesizes the
+  // "click" event that follows a button's pointerdown+pointerup. That orphaned
+  // click then bubbles to the ancestor clip's onClick, which toggles selection
+  // off whenever the clip is already selected — the state a diamond click
+  // always happens in — so every keyframe click immediately deselected its
+  // own clip. suppressClickRef lets that ancestor ignore the stray click.
+  it("arms suppressClickRef synchronously on a keyframe click", () => {
+    const suppressClickRef = { current: false };
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <TimelineClipDiamonds
+          keyframesData={{
+            format: "percentage",
+            keyframes: [{ percentage: 50, properties: { x: 100 } }],
+          }}
+          clipWidthPx={200}
+          clipHeightPx={48}
+          accentColor="#4ba3d2"
+          isSelected
+          currentPercentage={0}
+          elementId="clip-1"
+          selectedKeyframes={new Set()}
+          onClickKeyframe={vi.fn()}
+          suppressClickRef={suppressClickRef}
+        />,
+      );
+    });
+    const diamond = host.querySelector<HTMLButtonElement>('button[title="50%"]');
+    expect(diamond).not.toBeNull();
+
+    act(() => {
+      diamond!.dispatchEvent(pointerEvent("pointerup", { bubbles: true, button: 0 }));
+    });
+
+    expect(suppressClickRef.current).toBe(true);
+    act(() => root.unmount());
+  });
+});

package/src/player/components/TimelineClipDiamonds.tsx

@@ -45,6 +45,10 @@ interface TimelineClipDiamondsProps {
     fromClipPercentage: number,
     toClipPercentage: number,
   ) => void;
+  /** Set while resolving a diamond press so the ancestor clip's onClick (which
+   *  toggles selection off when already selected) ignores the native "click"
+   *  the browser auto-synthesizes after this button's pointerdown+pointerup. */
+  suppressClickRef?: React.RefObject<boolean>;
 }
 
 const DIAMOND_RATIO = 0.8;
@@ -76,6 +80,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   onShiftClickKeyframe,
   onContextMenuKeyframe,
   onMoveKeyframe,
+  suppressClickRef,
 }: TimelineClipDiamondsProps) {
   // Hooks must run before the early return below.
   const dragRef = useRef<DragState | null>(null);
@@ -83,6 +88,21 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   // (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);
+  // The button element can re-render (reposition/unmount) synchronously from
+  // the state updates onClickKeyframe/onMoveKeyframe trigger, before the
+  // browser gets to auto-synthesize the "click" event that normally follows
+  // pointerdown+pointerup on a button. That orphaned click then fires on
+  // whatever ancestor is still there — the clip wrapper — whose own onClick
+  // toggles selection off when the clip is already selected (the state a
+  // diamond click always happens in). Suppressing it here is the same fix
+  // already used for clip drag/resize in useTimelineClipDrag.ts.
+  const suppressNextClick = () => {
+    if (!suppressClickRef) return;
+    suppressClickRef.current = true;
+    requestAnimationFrame(() => {
+      suppressClickRef.current = false;
+    });
+  };
 
   if (clipWidthPx < 20) return null;
 
@@ -102,7 +122,19 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
   const canDrag = isSelected && !!onMoveKeyframe;
 
   return (
-    <div className="absolute inset-0" style={{ zIndex: 3, pointerEvents: "none" }}>
+    <div
+      className="absolute inset-0"
+      style={{
+        // Above the clip's trim-handle strips (TimelineClip.tsx, z-index 4) so
+        // a keyframe sitting in the first/last ~14px of the clip stays
+        // clickable instead of being covered by the resize handle. This div
+        // establishes its own stacking context (position + z-index), so the
+        // diamonds' own z-index (1/2) can't escape it on their own — the bump
+        // has to happen here.
+        zIndex: 5,
+        pointerEvents: "none",
+      }}
+    >
       {sorted.map((kf, i) => {
         if (i === 0) return null;
         const prev = sorted[i - 1]!;
@@ -178,6 +210,8 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
           const d = dragRef.current;
           // No drag armed (canDrag false / non-primary press) → treat as a click.
           if (!d || d.kfKey !== kfKey) {
+            if (e.button !== 0) return;
+            suppressNextClick();
             if (e.shiftKey) onShiftClickKeyframe?.(elementId, kf.percentage);
             else onClickKeyframe?.(kf.percentage);
             return;
@@ -186,6 +220,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
           dragRef.current = null;
           setPreview(null);
           e.currentTarget.releasePointerCapture?.(e.pointerId);
+          suppressNextClick();
           const res = resolveKeyframeDrag({
             pointerDownX: d.startX,
             pointerUpX: e.clientX,
@@ -194,11 +229,20 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
             draggedIndex: i,
             sortedClipPcts,
           });
-          if (res.kind === "click") {
+          if (res.kind === "click" || res.kind === "noop") {
+            // "noop" is a press with enough pointer jitter to arm a drag (canDrag
+            // is on for every diamond once the clip is selected) that resolved
+            // back onto ~the same position — no real retime, so treat it as the
+            // click it was. Otherwise a normal click with a few px of mouse/
+            // trackpad drift silently does nothing: no selection, no move.
             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);
+            // A retime still targeted this exact diamond — park/select it at its
+            // new position, same as a plain click, or a drag that actually moved
+            // something looks identical to one that silently did nothing.
+            onClickKeyframe?.(res.toClipPct);
           }
         };
 

package/src/player/store/playerStore.ts

@@ -104,6 +104,12 @@ interface PlayerState {
   setMotionPathArmed: (armed: boolean) => void;
   motionPathCreateAvailable: boolean;
   setMotionPathCreateAvailable: (available: boolean) => void;
+  /** Global toggle for the "Add keyframe" diamond in the timeline toolbar (#1808).
+   *  When false, a manual drag/resize/rotate edit on an element that already has
+   *  a live tween shifts every keyframe by the edit's delta (preserving the
+   *  animation's shape) instead of inserting/updating a keyframe at the playhead. */
+  autoKeyframeEnabled: boolean;
+  setAutoKeyframeEnabled: (enabled: boolean) => void;
 
   /** Multi-select: additional selected elements beyond selectedElementId. */
   selectedElementIds: Set<string>;
@@ -238,6 +244,8 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   setMotionPathArmed: (armed) => set({ motionPathArmed: armed }),
   motionPathCreateAvailable: false,
   setMotionPathCreateAvailable: (available) => set({ motionPathCreateAvailable: available }),
+  autoKeyframeEnabled: true,
+  setAutoKeyframeEnabled: (enabled) => set({ autoKeyframeEnabled: enabled }),
 
   selectedElementIds: new Set<string>(),
   toggleSelectedElementId: (id: string) =>

package/src/utils/gsapSoftReload.test.ts

@@ -100,6 +100,18 @@ describe("applySoftReload", () => {
     expect(contentWindow.__hfStudioManualEditsApply).toHaveBeenCalled();
   });
 
+  it("seeks to the caller-supplied currentTime override instead of the iframe's own __player.getTime()", () => {
+    // Regression: the iframe's raw __player.getTime() (2.0 here, per the mock)
+    // can desync from the studio's authoritative scrub position — e.g. a
+    // keyframe-node drag parks the playhead via the store before this reload's
+    // async commit resolves. The rebuilt timeline must re-seek to the caller's
+    // value, not the iframe's possibly-stale one.
+    const { iframe, contentWindow } = buildMockIframe();
+    const result = applySoftReload(iframe, SCRIPT_TEXT, undefined, 0);
+    expect(result).toBe("applied");
+    expect(contentWindow.__player.seek).toHaveBeenCalledWith(0);
+  });
+
   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

package/src/utils/gsapSoftReload.ts

@@ -175,6 +175,7 @@ export function applySoftReload(
   iframe: HTMLIFrameElement | null,
   scriptText: string,
   onAsyncFailure?: () => void,
+  currentTimeOverride?: number,
 ): SoftReloadResult {
   if (!iframe || !scriptText) return "cannot-soft-reload";
 
@@ -210,7 +211,14 @@ export function applySoftReload(
   // rather than killing the target timeline and appending an orphan script.
   if (gsapScripts.length > 1 && staleScripts.length === 0) return "cannot-soft-reload";
 
-  const currentTime = win.__player?.getTime?.() ?? 0;
+  // Prefer the caller-supplied scrub position (the studio's own authoritative
+  // currentTime, e.g. usePlayerStore) over the iframe's raw `__player.getTime()`:
+  // the two can desync (a keyframe-node drag parks the playhead via the store
+  // BEFORE this reload's async commit resolves, and the iframe's own GSAP clock
+  // doesn't reliably reflect that yet), which re-seeks the freshly rebuilt
+  // timeline to the wrong frame and leaves the element (and its overlay)
+  // rendered at a stale/unrelated position.
+  const currentTime = currentTimeOverride ?? win.__player?.getTime?.() ?? 0;
 
   // Track whether the MotionPath async path was taken. When it is, the script
   // executes inside pluginScript.onload — after applySoftReload has already
@@ -300,8 +308,13 @@ export function applySoftReload(
       const s = doc.createElement("script");
       s.textContent = `(function(){${scriptText}\n})();`;
       doc.body.appendChild(s);
-      win.__hfForceTimelineRebind?.();
+      // Seek BEFORE rebind: __hfForceTimelineRebind's own internal force-render
+      // (see init.ts) renders the freshly-created timeline at whatever the
+      // runtime's internal scrub position already is, not at whatever we pass
+      // here afterward — a redundant seek() call after rebind can be a GSAP
+      // no-op if the timeline already reports being at that time internally.
       win.__player?.seek?.(currentTime);
+      win.__hfForceTimelineRebind?.();
       win.__hfStudioManualEditsApply?.();
     };