@hyperframes/studio 0.6.91 → 0.6.93

package/src/player/components/TimelineClipDiamonds.tsx

@@ -123,7 +123,8 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
         const kfKey = `${elementId}:${kf.percentage}`;
         const isKfSelected = selectedKeyframes.has(kfKey);
         const atPlayhead = isSelected && Math.abs(kf.percentage - currentPercentage) < 0.5;
-        const color = isKfSelected || atPlayhead ? accentColor : "#a3a3a3";
+        const isHighlighted = isKfSelected || atPlayhead;
+        const color = isHighlighted ? accentColor : "#a3a3a3";
         return (
           <button
             key={`${i}-${kf.percentage}`}
@@ -135,6 +136,7 @@ export const TimelineClipDiamonds = memo(function TimelineClipDiamonds({
               transform: "translateY(-50%)",
               width: diamondSize,
               height: diamondSize,
+              zIndex: isHighlighted ? 2 : 1,
               pointerEvents: "auto",
               background: "none",
               border: "none",

package/src/player/store/playerStore.ts

@@ -6,6 +6,10 @@ export interface KeyframeCacheEntry {
   format: string;
   keyframes: Array<{
     percentage: number;
+    /** Original tween-relative percentage (server mutations need this, not the clip-relative `percentage`). */
+    tweenPercentage?: number;
+    /** Which property group the source tween belongs to (position, scale, rotation, visual, etc.). */
+    propertyGroup?: string;
     properties: Record<string, number | string>;
     ease?: string;
   }>;
@@ -74,6 +78,11 @@ interface PlayerState {
   toggleSelectedKeyframe: (key: string) => void;
   clearSelectedKeyframes: () => void;
 
+  /** Tween-relative percentage of the last-clicked keyframe diamond. Operations
+   *  (drag, resize, rotate) target this instead of recomputing from playhead. */
+  activeKeyframePct: number | null;
+  setActiveKeyframePct: (pct: number | null) => void;
+
   /** Multi-select: additional selected elements beyond selectedElementId. */
   selectedElementIds: Set<string>;
   toggleSelectedElementId: (id: string) => void;
@@ -170,6 +179,9 @@ export const usePlayerStore = create<PlayerState>((set) => ({
     }),
   clearSelectedKeyframes: () => set({ selectedKeyframes: new Set() }),
 
+  activeKeyframePct: null,
+  setActiveKeyframePct: (pct) => set({ activeKeyframePct: pct }),
+
   keyframeClipboard: null,
   setKeyframeClipboard: (data) => set({ keyframeClipboard: data }),
 

package/src/utils/globalTimeCompiler.test.ts

@@ -103,8 +103,8 @@ describe("resolveTweenDuration", () => {
     expect(resolveTweenDuration(makeAnim({ duration: 2 }))).toBe(2);
   });
 
-  test("missing duration defaults to 1", () => {
-    expect(resolveTweenDuration(makeAnim({ duration: undefined }))).toBe(1);
+  test("missing duration defaults to GSAP default (0.5)", () => {
+    expect(resolveTweenDuration(makeAnim({ duration: undefined }))).toBe(0.5);
   });
 });
 

package/src/utils/globalTimeCompiler.ts

@@ -27,6 +27,7 @@ export function isTimeWithinTween(
 }
 
 export function resolveTweenStart(animation: GsapAnimation): number | null {
+  if (animation.resolvedStart != null) return animation.resolvedStart;
   if (typeof animation.position === "number") return animation.position;
   const parsed = Number.parseFloat(animation.position as string);
   if (!Number.isNaN(parsed)) return parsed;
@@ -34,7 +35,7 @@ export function resolveTweenStart(animation: GsapAnimation): number | null {
 }
 
 export function resolveTweenDuration(animation: GsapAnimation): number {
-  return animation.duration ?? 1;
+  return animation.duration ?? 0.5;
 }
 
 export function findTweenAtTime(

package/src/utils/gsapSoftReload.test.ts

@@ -28,10 +28,26 @@ function buildMockIframe(overrides: Record<string, unknown> = {}) {
     ...overrides,
   };
 
+  // Intercept appendChild: when a <script> is appended, simulate execution by
+  // repopulating __timelines (mimicking what the real GSAP script would do).
+  const realAppendChild = container.appendChild.bind(container);
+  container.appendChild = <T extends Node>(node: T): T => {
+    const result = realAppendChild(node);
+    if (node instanceof HTMLScriptElement && node.textContent?.includes("gsap.timeline")) {
+      // Simulate the script populating __timelines
+      const cw = contentWindow as { __timelines?: Record<string, unknown> };
+      if (cw.__timelines) {
+        cw.__timelines.root = { kill: vi.fn(), pause: vi.fn() };
+      }
+    }
+    return result;
+  };
+
   const contentDocument = {
     querySelectorAll: (sel: string) => (sel === "script:not([src])" ? [scriptEl] : []),
     createElement: (tag: string) => document.createElement(tag),
     body: container,
+    head: document.createElement("div"),
   };
 
   return {

package/src/utils/gsapSoftReload.ts

@@ -7,6 +7,8 @@ type IframeWindow = Window & {
   gsap?: {
     timeline?: (...args: unknown[]) => unknown;
     registerPlugin?: (...plugins: unknown[]) => unknown;
+    set?: (targets: Element | Element[], vars: Record<string, unknown>) => void;
+    globalTimeline?: { getChildren?: (deep: boolean) => Array<{ kill?: () => void }> };
   };
   MotionPathPlugin?: unknown;
 };
@@ -29,6 +31,14 @@ function findGsapScriptElements(doc: Document): HTMLScriptElement[] {
   return results;
 }
 
+/** Check that the new script repopulated __timelines with at least one entry. */
+function verifyTimelinesPopulated(win: IframeWindow): boolean {
+  const tlKeys = win.__timelines
+    ? Object.keys(win.__timelines).filter((k) => k !== "__proxied")
+    : [];
+  return tlKeys.length > 0;
+}
+
 /**
  * Replace the GSAP script in the live iframe without reloading. This preserves
  * the WebGL context and shader transition cache.
@@ -56,24 +66,30 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
 
   const currentTime = 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
+  // returned. We optimistically return true because the script WILL execute
+  // once the plugin loads; the alternative (returning false) would trigger a
+  // full iframe reload that destroys the very WebGL context we're preserving.
+  let deferredToAsync = false;
+
   const doReload = () => {
     const timelines = win.__timelines;
+    const allTargets: Element[] = [];
+
     if (timelines) {
       for (const key of Object.keys(timelines)) {
+        if (key === "__proxied") continue;
         try {
           const tl = timelines[key] as {
             kill?: () => void;
             getChildren?: (deep: boolean) => Array<{ targets?: () => Element[] }>;
           };
-          const allTargets: Element[] = [];
           if (tl?.getChildren) {
             try {
               for (const child of tl.getChildren(true)) {
                 if (typeof child.targets === "function") {
-                  for (const t of child.targets()) {
-                    allTargets.push(t);
-                    delete (t as unknown as Record<string, unknown>)._gsap;
-                  }
+                  for (const t of child.targets()) allTargets.push(t);
                 }
               }
             } catch {}
@@ -84,6 +100,23 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
       }
     }
 
+    // Kill bare gsap.to/from tweens not registered on __timelines
+    if (win.gsap?.globalTimeline?.getChildren) {
+      try {
+        for (const child of win.gsap.globalTimeline.getChildren(false)) {
+          child.kill?.();
+        }
+      } catch {}
+    }
+
+    // Clear residual inline transforms left by killed tweens so from() tweens
+    // don't read stale end values from the DOM on re-execution
+    if (allTargets.length > 0 && win.gsap?.set) {
+      try {
+        win.gsap.set(allTargets, { clearProps: "all" });
+      } catch {}
+    }
+
     oldScriptEl.remove();
 
     const executeScript = () => {
@@ -98,10 +131,9 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
       win.__hfStudioManualEditsApply?.();
     };
 
-    // Load MotionPathPlugin on demand if the script uses motionPath.
-    // Uses the same CDN as composition templates (GSAP_CDN in constants.ts).
     const needsMotionPath = /motionPath\s*[:{]/.test(scriptText);
     if (needsMotionPath && !win.MotionPathPlugin && win.gsap) {
+      deferredToAsync = true;
       const pluginScript = doc.createElement("script");
       pluginScript.src = "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/MotionPathPlugin.min.js";
       pluginScript.onload = () => executeScript();
@@ -119,7 +151,10 @@ export function applySoftReload(iframe: HTMLIFrameElement | null, scriptText: st
     } else {
       doReload();
     }
-    return true;
+    // When MotionPath needs async loading, the script hasn't executed yet —
+    // skip the __timelines check and return true optimistically.
+    if (deferredToAsync) return true;
+    return verifyTimelinesPopulated(win);
   } catch {
     return false;
   }

package/src/utils/rdpSimplify.ts

@@ -97,7 +97,7 @@ function simplifyTimeSeries(
 export function simplifyGestureSamples(
   samples: Array<{ time: number; properties: Record<string, number> }>,
   totalDuration: number,
-  epsilon: number,
+  epsilon: number | ((key: string) => number),
 ): Map<number, Record<string, number>> {
   if (samples.length === 0) return new Map();
   if (totalDuration <= 0) return new Map();
@@ -120,7 +120,8 @@ export function simplifyGestureSamples(
         series.push({ time: s.time, value: s.properties[key] });
       }
     }
-    const simplified = simplifyTimeSeries(series, epsilon);
+    const keyEpsilon = typeof epsilon === "function" ? epsilon(key) : epsilon;
+    const simplified = simplifyTimeSeries(series, keyEpsilon);
     for (const pt of simplified) {
       survivingTimes.add(pt.time);
     }

package/src/utils/timelineElementSplit.test.ts

@@ -0,0 +1,50 @@
+import { describe, it, expect } from "vitest";
+import { SPLIT_BOUNDARY_EPSILON_S, isSplitTimeWithinBounds } from "./timelineElementSplit";
+
+describe("isSplitTimeWithinBounds", () => {
+  const start = 1;
+  const duration = 4;
+  const end = start + duration;
+
+  it("accepts the exact lower clamp boundary", () => {
+    // The timeline canvas clamps an edge click to exactly
+    // start + SPLIT_BOUNDARY_EPSILON_S, so that value must be splittable.
+    expect(isSplitTimeWithinBounds(start + SPLIT_BOUNDARY_EPSILON_S, start, duration)).toBe(true);
+  });
+
+  it("accepts the exact upper clamp boundary", () => {
+    expect(
+      isSplitTimeWithinBounds(start + duration - SPLIT_BOUNDARY_EPSILON_S, start, duration),
+    ).toBe(true);
+  });
+
+  it("accepts an interior split time", () => {
+    expect(isSplitTimeWithinBounds(3, start, duration)).toBe(true);
+  });
+
+  it("rejects times at or outside the clip edges", () => {
+    expect(isSplitTimeWithinBounds(start, start, duration)).toBe(false);
+    expect(isSplitTimeWithinBounds(end, start, duration)).toBe(false);
+    expect(isSplitTimeWithinBounds(start - 1, start, duration)).toBe(false);
+    expect(isSplitTimeWithinBounds(end + 1, start, duration)).toBe(false);
+  });
+
+  it("rejects times inside the epsilon margins", () => {
+    expect(isSplitTimeWithinBounds(start + SPLIT_BOUNDARY_EPSILON_S / 2, start, duration)).toBe(
+      false,
+    );
+    expect(isSplitTimeWithinBounds(end - SPLIT_BOUNDARY_EPSILON_S / 2, start, duration)).toBe(
+      false,
+    );
+  });
+
+  it("rejects every time on a clip shorter than two epsilons", () => {
+    // Math.max(min, Math.min(max, t)) collapses to min when the clip is too
+    // short for the clamp range; that collapsed value must still be rejected.
+    const shortDuration = SPLIT_BOUNDARY_EPSILON_S;
+    expect(isSplitTimeWithinBounds(start + SPLIT_BOUNDARY_EPSILON_S, start, shortDuration)).toBe(
+      false,
+    );
+    expect(isSplitTimeWithinBounds(start + shortDuration / 2, start, shortDuration)).toBe(false);
+  });
+});

package/src/utils/timelineElementSplit.ts

@@ -5,6 +5,22 @@ export { buildPatchTarget, readFileContent } from "../hooks/timelineEditingHelpe
 /** Minimum distance (seconds) from clip boundaries to allow a split. */
 export const SPLIT_BOUNDARY_EPSILON_S = 0.03;
 
+/**
+ * True when splitTime leaves at least SPLIT_BOUNDARY_EPSILON_S on both sides
+ * of the cut. Inclusive at the epsilon offsets: the timeline canvas clamps
+ * edge clicks to exactly start/end ± epsilon, so the clamped value must pass.
+ */
+export function isSplitTimeWithinBounds(
+  splitTime: number,
+  clipStart: number,
+  clipDuration: number,
+): boolean {
+  return (
+    splitTime >= clipStart + SPLIT_BOUNDARY_EPSILON_S &&
+    splitTime <= clipStart + clipDuration - SPLIT_BOUNDARY_EPSILON_S
+  );
+}
+
 export function canSplitElement(el: TimelineElement): boolean {
   return (
     !el.timelineLocked &&