@hyperframes/studio 0.8.114 → 0.8.116

package/src/hooks/gsapPositionDetection.ts

@@ -7,7 +7,7 @@
  */
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore } from "../player/store/playerStore";
-import { getIframeGsap, queryIframeElement } from "./gsapShared";
+import { getIframeGsap, KEYFRAME_PCT_MATCH, queryIframeElement } from "./gsapShared";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 
 // fallow-ignore-next-line complexity
@@ -47,52 +47,71 @@ export function findGsapPositionAnimation(
   if (animations.length === 0) return null;
   const currentTime = usePlayerStore.getState().currentTime;
 
-  const scored = animations
-    .filter((a) => animHasPosition(a) || a.keyframes || animations.length === 1)
-    .map((a) => {
-      let score = 0;
-      if (animHasPosition(a)) score += 10;
-      if (a.keyframes) score += 5;
-      if (selector && a.targetSelector === selector) score += 8;
-      else if (a.targetSelector.includes(",")) score -= 5;
-      const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
-      const dur = a.duration ?? 0;
-      if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) score += 50;
-      else
-        score -= Math.round(
-          Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5,
-        );
-      return { anim: a, score };
-    });
+  const scored = animations.filter(animHasPosition).map((a) => {
+    let score = 0;
+    if (a.keyframes) score += 5;
+    if (selector && a.targetSelector === selector) score += 8;
+    else if (a.targetSelector.includes(",")) score -= 5;
+    return { anim: a, score: score + playheadProximity(a, currentTime) };
+  });
   scored.sort((a, b) => b.score - a.score);
-  return scored[0]?.anim ?? animations[0];
+  return scored[0]?.anim ?? null;
+}
+
+function playheadProximity(a: GsapAnimation, currentTime: number): number {
+  const pos = a.resolvedStart ?? (typeof a.position === "number" ? a.position : 0);
+  const dur = a.duration ?? 0;
+  if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) return 50;
+  return -Math.round(Math.min(Math.abs(currentTime - pos), Math.abs(currentTime - pos - dur)) * 5);
+}
+
+/** Whether the file states `anim`'s value at `time`; a tween's implicit start is GSAP's current value. */
+function statesValueAt(anim: GsapAnimation, time: number): boolean {
+  const duration = resolveTweenDuration(anim);
+  if (!(duration > 0)) return false;
+  const pct = ((time - (resolveTweenStart(anim) ?? 0)) / duration) * 100;
+  const near = (keyframe: number) => Math.abs(keyframe - pct) <= KEYFRAME_PCT_MATCH;
+  if (anim.keyframes) return anim.keyframes.keyframes.some((kf) => near(kf.percentage));
+  if (anim.method === "from") return near(0);
+  return near(100) || (anim.method === "fromTo" && near(0));
 }
 
 /**
  * From a set of candidate tweens, pick the one whose time range is closest to
  * the current playhead. A tween that *contains* the playhead wins outright;
  * otherwise the nearest endpoint wins. This ensures a drag at t=6s edits (or
- * extends) the 4s tween, not the 1.5s one. Tie-break: most keyframes (so a
- * gesture-recorded tween beats a stub when both are equidistant).
+ * extends) the 4s tween, not the 1.5s one. Ties: the one whose file states a value at the
+ * playhead (the later one, which renders, if both do), then most keyframes.
  */
 // fallow-ignore-next-line complexity
 export function pickClosestToPlayhead(anims: GsapAnimation[]): GsapAnimation | null {
   if (anims.length <= 1) return anims[0] ?? null;
   const ct = usePlayerStore.getState().currentTime;
   return anims.reduce((best, a) => {
-    const s = resolveTweenStart(a) ?? 0;
-    const e = s + resolveTweenDuration(a);
-    const dist = ct >= s && ct <= e ? 0 : Math.min(Math.abs(ct - s), Math.abs(ct - e));
-    const bestS = resolveTweenStart(best) ?? 0;
-    const bestE = bestS + resolveTweenDuration(best);
-    const bestDist =
-      ct >= bestS && ct <= bestE ? 0 : Math.min(Math.abs(ct - bestS), Math.abs(ct - bestE));
+    const dist = playheadDistance(a, ct);
+    const bestDist = playheadDistance(best, ct);
     if (dist < bestDist) return a;
-    if (
-      dist === bestDist &&
-      (a.keyframes?.keyframes.length ?? 0) > (best.keyframes?.keyframes.length ?? 0)
-    )
-      return a;
+    const stated = dist === 0 && bestDist === 0 ? statedValueWinner(a, best, ct) : null;
+    if (stated) return stated;
+    if (dist === bestDist && keyframeCount(a) > keyframeCount(best)) return a;
     return best;
   });
 }
+
+function playheadDistance(anim: GsapAnimation, time: number): number {
+  const s = resolveTweenStart(anim) ?? 0;
+  const e = s + resolveTweenDuration(anim);
+  return time >= s && time <= e ? 0 : Math.min(Math.abs(time - s), Math.abs(time - e));
+}
+
+function statedValueWinner(a: GsapAnimation, b: GsapAnimation, time: number) {
+  const [mine, theirs] = [statesValueAt(a, time), statesValueAt(b, time)];
+  if (mine !== theirs) return mine ? a : b;
+  const [s, bS] = [resolveTweenStart(a) ?? 0, resolveTweenStart(b) ?? 0];
+  if (mine && s !== bS) return s > bS ? a : b;
+  return null;
+}
+
+function keyframeCount(anim: GsapAnimation): number {
+  return anim.keyframes?.keyframes.length ?? 0;
+}

package/src/hooks/gsapResizeDropPoint.test.ts

@@ -148,17 +148,18 @@ function positionAnimation(
   } as unknown as GsapAnimation;
 }
 
-/** Every x/y a run wrote, in commit order. */
+/** Every x/y a run wrote AT THE PLAYHEAD (percentage 0 here), in commit order. */
 function persistedPositions(calls: unknown[][]): Array<{ x?: number; y?: number }> {
   const written: Array<{ x?: number; y?: number }> = [];
   for (const call of calls) {
     const mutation = call[1] as {
       properties?: Record<string, number>;
-      keyframes?: Array<{ properties: Record<string, number> }>;
+      keyframes?: Array<{ percentage: number; properties: Record<string, number> }>;
       x?: number;
       y?: number;
     };
-    const sources = [mutation.properties, ...(mutation.keyframes ?? []).map((k) => k.properties)];
+    const atPlayhead = (mutation.keyframes ?? []).filter((k) => k.percentage === 0);
+    const sources = [mutation.properties, ...atPlayhead.map((k) => k.properties)];
     if (mutation.x != null || mutation.y != null) written.push({ x: mutation.x, y: mutation.y });
     for (const source of sources) {
       if (source && (source.x != null || source.y != null))

package/src/hooks/gsapResizeElementSize.test.tsx

@@ -37,6 +37,7 @@ const widthTween = {
   position: 0,
   resolvedStart: 0,
   duration: 4,
+  ease: "none",
 } as unknown as GsapAnimation;
 
 function mount(animations: GsapAnimation[]) {

package/src/hooks/gsapResizeGeometrySweep.test.ts

@@ -23,17 +23,13 @@
  * the way through. A sweep across rotations is what tells us it is.
  */
 import { afterEach, expect, it, vi } from "vitest";
-import { classifyTweenPropertyGroup } from "@hyperframes/core/gsap-parser";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
+import { elTween, resetGsapEditState } from "./gsapParsedTween.test-helpers";
 import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
 
-afterEach(() => {
-  vi.restoreAllMocks();
-  usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
-  document.body.innerHTML = "";
-});
+afterEach(resetGsapEditState);
 
 const LAYOUT = { left: 120, top: 520 };
 
@@ -57,20 +53,6 @@ function renderRect(pose: Pose, rotationDeg: number) {
 
 type Props = Record<string, number>;
 
-function tween(id: string, properties: Props, duration: number): GsapAnimation {
-  return {
-    id,
-    targetSelector: "#el",
-    propertyGroup: classifyTweenPropertyGroup(properties),
-    method: "to",
-    properties,
-    position: 0,
-    resolvedStart: 0,
-    duration,
-    ...(duration === 0 ? { extras: { immediateRender: "__raw:true" } } : {}),
-  } as unknown as GsapAnimation;
-}
-
 interface Case {
   name: string;
   /** The element's untransformed CSS box. */
@@ -99,18 +81,24 @@ const ROTATIONS = [0, -8, 45, -47, 90, 180];
  * the size routes here however it looks from the animation list.
  */
 const ROUTES = {
-  "scale tween": { animations: () => [tween("#el-scale", { scale: 1 }, 2)], settles: true },
+  "scale tween": {
+    animations: () => [elTween("#el-scale", { scale: 1 }, 2, "none")],
+    settles: true,
+  },
   "scale longhands": {
-    animations: () => [tween("#el-scale", { scaleX: 1, scaleY: 1 }, 2)],
+    animations: () => [elTween("#el-scale", { scaleX: 1, scaleY: 1 }, 2, "none")],
     settles: true,
   },
-  "scale instant hold": { animations: () => [tween("#el-scale", { scale: 1 }, 0)], settles: false },
+  "scale instant hold": {
+    animations: () => [elTween("#el-scale", { scale: 1 }, 0, "none")],
+    settles: false,
+  },
   "size tween": {
-    animations: () => [tween("#el-size", { width: 630, height: 408 }, 2)],
+    animations: () => [elTween("#el-size", { width: 630, height: 408 }, 2, "none")],
     settles: false,
   },
   "size instant hold": {
-    animations: () => [tween("#el-size", { width: 630, height: 408 }, 0)],
+    animations: () => [elTween("#el-size", { width: 630, height: 408 }, 0, "none")],
     settles: false,
   },
 } as const;

package/src/hooks/gsapResizeIntercept.test.ts

@@ -3,12 +3,21 @@ import { afterEach, expect, it, vi } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
+import { observeGsapGesture } from "./gsapGestureOutcome";
+import { trackStudioEvent } from "../utils/studioTelemetry";
+import type { CommitMutation } from "./gsapScriptCommitTypes";
 import { computeCurrentPercentage } from "./gsapDragCommit";
-import { tryGsapResizeIntercept } from "./gsapResizeIntercept";
+import { commitSizeAtPlayhead, tryGsapResizeIntercept } from "./gsapResizeIntercept";
+import { liveTween, previewWith, tween } from "./gsapParsedTween.test-helpers";
+
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 
 afterEach(() => {
+  vi.clearAllMocks();
   vi.restoreAllMocks();
   usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null });
+  // One #clip per test: leftovers would make every tween on it look shared.
+  document.body.innerHTML = "";
 });
 
 /**
@@ -36,10 +45,18 @@ function fakeIframe(el: HTMLElement, gsapValues: Record<string, number>) {
   // The element's OPACITY intro tween lives on the timeline: unfiltered
   // capture would pick `opacity` up via the other-tween sweep.
   const opacityIntro = { targets: () => [el], vars: { opacity: 0, duration: 0.8 } };
+  const scaleIntro = liveTween(
+    el,
+    { start: 0.2, duration: 0.8, vars: { scale: 0.9 }, ends: { scaleX: [0.9, 1] } },
+    { from: true },
+  );
   return {
     contentWindow: {
-      __timelines: { main: { getChildren: () => [opacityIntro] } },
-      gsap: { getProperty: (_el: Element, prop: string) => gsapValues[prop] ?? 0 },
+      __timelines: { main: { getChildren: () => [opacityIntro, scaleIntro] } },
+      gsap: {
+        getProperty: (_el: Element, prop: string) => gsapValues[prop] ?? 0,
+        defaults: () => ({ ease: "power1.out" }),
+      },
     },
     contentDocument: document,
   } as unknown as HTMLIFrameElement;
@@ -289,24 +306,26 @@ async function runResize(
   return committed;
 }
 
-it("scale-route resize converts via the group filter and commits scale, not width/height", async () => {
+it("scale-route resize keyframes scale through the group filter, not width/height", async () => {
   const el = makeGradedElement();
   const iframe = fakeIframe(el, { scale: 1, scaleX: 1, scaleY: 1, opacity: 0, rotation: 0 });
   // uniform: 800/640 === 450/360
   const committed = await runResize(el, iframe, { width: 800, height: 450 });
 
-  const convert = committed.find((m) => m.type === "convert-to-keyframes");
-  expect(convert).toBeDefined();
-  const fromValues = convert!.resolvedFromValues as Record<string, number>;
-  // Group filter: the opacity intro tween must NOT leak into the conversion.
-  expect(fromValues).not.toHaveProperty("opacity");
-  expect(fromValues).toHaveProperty("scale");
+  const keyframes = committed.find((m) => m.type === "replace-with-keyframes")?.keyframes as
+    | Array<{ properties: Record<string, number> }>
+    | undefined;
+  // Group filter: the opacity intro tween must NOT leak into the scale keyframes.
+  expect(keyframes?.some((k) => "opacity" in k.properties)).toBe(false);
+  expect(keyframes?.some((k) => "scale" in k.properties)).toBe(true);
 
   // Every committed property is scale-group — the resize never writes
   // width/height for a scale-driven element (the double-apply bug class).
   const allProps = committed.flatMap((m) => [
     ...Object.keys((m.properties as Record<string, unknown>) ?? {}),
-    ...Object.keys((m.resolvedFromValues as Record<string, unknown>) ?? {}),
+    ...((m.keyframes as Array<{ properties: object }>) ?? []).flatMap((k) =>
+      Object.keys(k.properties),
+    ),
   ]);
   expect(allProps).not.toContain("width");
   expect(allProps).not.toContain("height");
@@ -553,3 +572,69 @@ it("hands the size to the element's CSS when its only tween is a fade", async ()
   expect(handled).toEqual({ status: "element-size" });
   expect(commitMutation).not.toHaveBeenCalled();
 });
+
+it.each([
+  ["stays put", { x: 0, y: 0 }, { width: 300 }, undefined],
+  ["moves", { x: -40, y: 0 }, { width: 300, x: 10, y: 0 }, true],
+])(
+  "a size written at the playhead carries the anchor only when the box %s",
+  async (_, offset, written, owns) => {
+    const selection = titleSelection();
+    const el = selection.element;
+    el.setAttribute("data-hf-drag-gsap-base-x", "50");
+    el.setAttribute("data-hf-drag-gsap-base-y", "0");
+    const slide = tween({
+      id: "#title-to-0",
+      targetSelector: "#title",
+      propertyGroup: undefined,
+      method: "to",
+      properties: { x: 100, width: 320 },
+      resolvedStart: 0,
+      duration: 2,
+      ease: "none",
+    });
+    usePlayerStore.setState({ currentTime: 1 });
+    const commitMutation = vi.fn();
+    const live = liveTween(el, { start: 0, duration: 2, vars: slide.properties });
+
+    const outcome = await commitSizeAtPlayhead(
+      selection,
+      slide,
+      { width: 300 },
+      previewWith(el, [live]),
+      offset,
+      { commitMutation },
+    );
+
+    expect(outcome.ownsDragOffset).toBe(owns);
+    const mutation = commitMutation.mock.calls[0]![1];
+    expect(mutation.keyframes[0].properties).toEqual(written);
+  },
+);
+
+it.each([
+  [5, 1],
+  [0.5, 1],
+  [0.2, 0],
+])("counts scale resize insertion at %ss", async (time, count) => {
+  const el = makeGradedElement();
+  const iframe = fakeIframe(el, { scale: 1, scaleX: 1, scaleY: 1 });
+  usePlayerStore.setState({ currentTime: time, activeKeyframePct: null });
+  const writer: CommitMutation = async (_selection, _mutation, options) => {
+    options.onResult?.({ ok: true, changed: true });
+  };
+  const outcome = observeGsapGesture(writer);
+  const result = await tryGsapResizeIntercept(
+    { id: "clip", selector: "#clip", element: el } as DomEditSelection,
+    { width: 700, height: 400 },
+    [keyframedScaleFixture()],
+    iframe,
+    outcome.commit!,
+  );
+  expect(result.status).toBe("persisted");
+  outcome.finish();
+  expect(trackStudioEvent).toHaveBeenCalledTimes(count);
+  if (count) expect(trackStudioEvent).toHaveBeenCalledWith("keyframe", { action: "add" });
+  el.remove();
+  document.querySelector("#__hf_color_grading_clip")?.remove();
+});