fix(studio): keyframe drag + recording bug bash

21 fixes: capture GSAP base at drag start, translate:none before
gsap.set, skip reapplyPathOffsets for GSAP elements, clamp recording
seek, _auto flag for 100% keyframes, overlay flash fix, block edits
during recording.

Author: miguel-heygen

packages/core/src/runtime/init.ts

@@ -954,33 +954,13 @@ export function initSandboxRuntimeModular(): void {
         state.capturedTimeline.totalTime(seekTime, false);
       }
 
-      // Strip stale CSS offset artifacts from GSAP-targeted elements.
-      // These leak into the HTML when the CSS offset path fires for a
-      // GSAP-animated element (stale cache race). On reload, both the
-      // offset and GSAP transform stack, doubling the visual position.
-      const staleEls = document.querySelectorAll("[data-hf-studio-path-offset]");
-      if (staleEls.length > 0 && state.capturedTimeline.getChildren) {
-        const tweenTargets = new Set<Element>();
-        try {
-          for (const child of state.capturedTimeline.getChildren(true)) {
-            if (typeof child.targets === "function") {
-              for (const t of child.targets()) tweenTargets.add(t);
-            }
-          }
-        } catch {
-          /* timeline access guard */
-        }
-        for (const el of staleEls) {
-          if (!tweenTargets.has(el)) continue;
-          const htmlEl = el as HTMLElement;
-          htmlEl.removeAttribute("data-hf-studio-path-offset");
-          htmlEl.removeAttribute("data-hf-studio-original-translate");
-          htmlEl.removeAttribute("data-hf-studio-original-inline-translate");
-          htmlEl.style.removeProperty("--hf-studio-offset-x");
-          htmlEl.style.removeProperty("--hf-studio-offset-y");
-          htmlEl.style.removeProperty("translate");
-        }
-      }
+      // GSAP bakes the CSS `translate` into style.transform on seek.
+      // The Studio seek wrapper (installStudioManualEditSeekReapply) calls
+      // reapplyPositionEditsAfterSeek to un-bake it. Call the apply hook
+      // directly here as well, since the wrapper may not be installed yet
+      // during initial rebind (timing race on first load / soft reload).
+      const applyFn = (window as Record<string, unknown>).__hfStudioManualEditsApply;
+      if (typeof applyFn === "function") applyFn();
     }
     if (resolution.diagnostics) {
       postRuntimeMessage({
@@ -1002,25 +982,12 @@ export function initSandboxRuntimeModular(): void {
     });
     // Stamp data-start / data-duration on GSAP-targeted elements that lack
     // them so the Studio timeline can discover individual animated elements.
-    // Skip elements whose ancestor already carries timing — stamping them
-    // would override the parent's clip visibility and cause preview/render
-    // parity drift.
     {
       const rootComp = resolveRootCompositionElement();
       const rootDuration = boundDuration > 0 ? boundDuration : 0;
       const dur = String(rootDuration > 0 ? rootDuration : 1);
       const seen = new Set<Element>();
 
-      const hasTimedAncestor = (el: HTMLElement): boolean => {
-        let cursor = el.parentElement;
-        while (cursor) {
-          if (cursor.hasAttribute("data-start")) return true;
-          if (cursor === rootComp) return false;
-          cursor = cursor.parentElement;
-        }
-        return false;
-      };
-
       // Stamp GSAP-targeted elements
       if (state.capturedTimeline.getChildren) {
         try {
@@ -1030,7 +997,6 @@ export function initSandboxRuntimeModular(): void {
               if (!(target instanceof HTMLElement)) continue;
               if (target === rootComp) continue;
               if (target.hasAttribute("data-start")) continue;
-              if (hasTimedAncestor(target)) continue;
               if (seen.has(target)) continue;
               seen.add(target);
               target.setAttribute("data-start", "0");
@@ -1050,7 +1016,6 @@ export function initSandboxRuntimeModular(): void {
           if (!(el instanceof HTMLElement)) continue;
           if (el === rootComp) continue;
           if (el.hasAttribute("data-start")) continue;
-          if (hasTimedAncestor(el)) continue;
           if (seen.has(el)) continue;
           if (el.tagName === "SCRIPT" || el.tagName === "STYLE" || el.tagName === "LINK") continue;
           seen.add(el);

packages/core/src/studio-api/helpers/sourceMutation.ts

@@ -195,7 +195,11 @@ export function patchElementInHtml(
         }
         break;
       case "text-content":
-        if (op.value != null) htmlEl.textContent = op.value;
+        if (op.value != null) {
+          const inner = htmlEl.children.length === 1 ? htmlEl.firstElementChild : null;
+          const textTarget = inner ? (inner as unknown as HTMLElement) : htmlEl;
+          textTarget.textContent = op.value;
+        }
         break;
     }
   }
@@ -219,6 +223,35 @@ export interface SplitElementResult {
   newId: string | null;
 }
 
+function resolveElementTiming(el: Element): {
+  start: number;
+  duration: number;
+  usesDataEnd: boolean;
+} {
+  const start = parseFloat(el.getAttribute("data-start") ?? "0") || 0;
+  const usesDataEnd = el.hasAttribute("data-end");
+  const duration = usesDataEnd
+    ? parseFloat(el.getAttribute("data-end") ?? "") - start || 0
+    : parseFloat(el.getAttribute("data-duration") ?? "0") || 0;
+  return { start, duration, usesDataEnd };
+}
+
+function setElementDuration(
+  el: Element,
+  start: number,
+  duration: number,
+  usesDataEnd: boolean,
+): void {
+  if (usesDataEnd) {
+    const endTime = String(Math.round((start + duration) * 1000) / 1000);
+    el.setAttribute("data-end", endTime);
+    el.removeAttribute("data-duration");
+  } else {
+    el.setAttribute("data-duration", String(Math.round(duration * 1000) / 1000));
+    el.removeAttribute("data-end");
+  }
+}
+
 export function splitElementInHtml(
   source: string,
   target: SourceMutationTarget,
@@ -229,8 +262,7 @@ export function splitElementInHtml(
   const el = findTargetElement(document, target);
   if (!el || !isHTMLElement(el)) return { html: source, matched: false, newId: null };
 
-  const start = parseFloat(el.getAttribute("data-start") ?? "0") || 0;
-  const duration = parseFloat(el.getAttribute("data-duration") ?? "0") || 0;
+  const { start, duration, usesDataEnd } = resolveElementTiming(el);
   if (duration <= 0 || splitTime <= start || splitTime >= start + duration) {
     return { html: source, matched: false, newId: null };
   }
@@ -241,7 +273,7 @@ export function splitElementInHtml(
   const clone = el.cloneNode(true) as HTMLElement;
   clone.setAttribute("id", newId);
   clone.setAttribute("data-start", String(Math.round(splitTime * 1000) / 1000));
-  clone.setAttribute("data-duration", String(Math.round(secondDuration * 1000) / 1000));
+  setElementDuration(clone, splitTime, secondDuration, usesDataEnd);
 
   // Adjust media trim offset for the second half
   const playbackStartAttr = el.hasAttribute("data-playback-start")
@@ -251,15 +283,16 @@ export function splitElementInHtml(
       : null;
   if (playbackStartAttr) {
     const currentTrim = parseFloat(el.getAttribute(playbackStartAttr) ?? "0") || 0;
-    const rate = parseFloat(el.getAttribute("data-playback-rate") ?? "1") || 1;
+    const rateRaw = parseFloat(el.getAttribute("data-playback-rate") ?? "");
+    const rate = Number.isFinite(rateRaw) ? rateRaw : 1;
     clone.setAttribute(
       playbackStartAttr,
       String(Math.round((currentTrim + firstDuration * rate) * 1000) / 1000),
     );
   }
 
   // Trim the original element's duration
-  el.setAttribute("data-duration", String(Math.round(firstDuration * 1000) / 1000));
+  setElementDuration(el, start, firstDuration, usesDataEnd);
 
   // Insert clone after original
   if (el.nextSibling) {

packages/studio/src/components/editor/DomEditOverlay.tsx

@@ -252,6 +252,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     groupOverlayItems.every((item) => item.selection.capabilities.canApplyManualOffset);
 
   const handleOverlayMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!allowCanvasMovement) return;
     if (suppressNextOverlayMouseDownRef.current) {
       suppressNextOverlayMouseDownRef.current = false;
       suppressNextBoxMouseDownRef.current = false;
@@ -312,6 +313,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   };
 
   const handleBoxClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!allowCanvasMovement) return;
     if (gestureRef.current || groupGestureRef.current) return;
     if (suppressNextBoxClickRef.current) {
       suppressNextBoxClickRef.current = false;
@@ -344,7 +346,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       onPointerUp={gestures.onPointerUp}
       onPointerCancel={() => gestures.clearPointerState(selectionRef)}
     >
-      {hoverSelection && hoverRect && (
+      {hoverSelection && hoverRect && compRect.width > 0 && (
         <div
           aria-hidden="true"
           data-dom-edit-hover-box="true"
@@ -374,7 +376,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           })()}
         />
       )}
-      {hasGroupSelection && groupOverlayItems.length > 1 && groupBounds && (
+      {hasGroupSelection && groupOverlayItems.length > 1 && groupBounds && compRect.width > 0 && (
         <>
           {groupOverlayItems.map((item) => (
             <div
@@ -408,7 +410,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           />
         </>
       )}
-      {!hasGroupSelection && selection && overlayRect && (
+      {!hasGroupSelection && selection && overlayRect && compRect.width > 0 && (
         <>
           {allowCanvasMovement && selection.capabilities.canApplyManualRotation && (
             <div
@@ -485,6 +487,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         </>
       )}
       {childRects.length > 0 &&
+        compRect.width > 0 &&
         childRects.map((cr, i) => (
           <div
             key={i}

packages/studio/src/components/editor/manualEdits.ts

@@ -240,6 +240,7 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
     "renderSeek",
   );
   const wrappedTimelineSeek = wrapSeekReapplyFunction(studioWin, studioWin.__timeline, "seek");
+  wrapSeekReapplyFunction(studioWin, studioWin.__timeline, "totalTime");
   const wrappedPlayerPlay = wrapPlayReapplyFunction(studioWin, studioWin.__player, "play");
   const wrappedTimelinePlay = wrapPlayReapplyFunction(studioWin, studioWin.__timeline, "play");
   const wrappedPlayerPause = wrapApplyAfterFunction(studioWin, studioWin.__player, "pause");
@@ -250,6 +251,7 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
   for (const timeline of Object.values(studioWin.__timelines ?? {})) {
     wrappedNamedTimelineSeek =
       wrapSeekReapplyFunction(studioWin, timeline, "seek") || wrappedNamedTimelineSeek;
+    wrapSeekReapplyFunction(studioWin, timeline, "totalTime");
     wrappedNamedTimelinePlay =
       wrapPlayReapplyFunction(studioWin, timeline, "play") || wrappedNamedTimelinePlay;
     wrappedNamedTimelinePause =
@@ -268,6 +270,7 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
         if (typeof value === "object" && value !== null) {
           const tl = value as Record<string, unknown>;
           wrapSeekReapplyFunction(studioWin, tl, "seek");
+          wrapSeekReapplyFunction(studioWin, tl, "totalTime");
           wrapPlayReapplyFunction(studioWin, tl, "play");
           wrapApplyAfterFunction(studioWin, tl, "pause");
           studioWin.__hfStudioManualEditsApply?.();

packages/studio/src/components/editor/manualEditsDom.ts

@@ -273,11 +273,25 @@ export function applyStudioPathOffsetDraft(
 ): void {
   promoteInlineForTransform(element);
   writeStudioPathOffsetVars(element, offset, { updateBase: false });
-  element.style.setProperty(
-    "translate",
-    composeTranslateValue(element, `${Math.round(offset.x)}px`, `${Math.round(offset.y)}px`),
-  );
-  stripGsapTranslateFromTransform(element);
+
+  const isGsapAnimated = gsapAnimatesProperty(element, "x", "y");
+  if (isGsapAnimated) {
+    // For GSAP-animated elements: use gsap.set for positioning (the timeline
+    // is paused during drag). Set translate:none explicitly to prevent
+    // double-counting with the transform.
+    element.style.setProperty("translate", "none");
+    const win = element.ownerDocument.defaultView as
+      | (Window & { gsap?: { set: (el: Element, vars: Record<string, unknown>) => void } })
+      | null;
+    win?.gsap?.set(element, { x: offset.x, y: offset.y });
+  } else {
+    // Non-GSAP elements: use CSS translate as before.
+    element.style.setProperty(
+      "translate",
+      composeTranslateValue(element, `${Math.round(offset.x)}px`, `${Math.round(offset.y)}px`),
+    );
+    stripGsapTranslateFromTransform(element);
+  }
 }
 
 /* ── Box size apply ───────────────────────────────────────────────── */
@@ -505,6 +519,10 @@ function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
 
 function reapplyPathOffsets(doc: Document): void {
   for (const el of queryStudioElements(doc, STUDIO_PATH_OFFSET_ATTR)) {
+    // Skip elements where GSAP actively animates position — GSAP bakes the
+    // CSS translate into its transform and sets translate: none every tick.
+    // Stripping/restoring would oscillate against GSAP's rendering.
+    if (gsapAnimatesProperty(el, "x", "y")) continue;
     const x = el.style.getPropertyValue(STUDIO_OFFSET_X_PROP);
     const y = el.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
     if (x || y) {

packages/studio/src/components/editor/manualOffsetDrag.ts

@@ -232,6 +232,41 @@ export function createManualOffsetDragMember(input: {
   rect: ManualOffsetDragRect;
 }): ManualOffsetDragMemberResult {
   const initialOffset = readStudioPathOffset(input.element);
+  input.element.setAttribute("data-hf-drag-initial-offset-x", String(initialOffset.x));
+  input.element.setAttribute("data-hf-drag-initial-offset-y", String(initialOffset.y));
+
+  // Capture GSAP's x/y BEFORE any draft applies gsap.set — the commit path
+  // needs the original (uncorrupted) GSAP position to compute the new keyframe value.
+  const win = input.element.ownerDocument.defaultView as
+    | (Window & {
+        gsap?: { getProperty?: (el: Element, prop: string) => number };
+        __timelines?: Record<string, { pause?: () => void; paused?: () => boolean }>;
+      })
+    | null;
+  const gsapX = win?.gsap?.getProperty?.(input.element, "x") || 0;
+  const gsapY = win?.gsap?.getProperty?.(input.element, "y") || 0;
+  input.element.setAttribute("data-hf-drag-gsap-base-x", String(gsapX));
+  input.element.setAttribute("data-hf-drag-gsap-base-y", String(gsapY));
+
+  // Pause GSAP timelines during drag to prevent the tween from overwriting
+  // the draft's gsap.set on every tick. Track which we paused to resume later.
+  if (win?.__timelines) {
+    const paused: string[] = [];
+    for (const [id, tl] of Object.entries(win.__timelines)) {
+      try {
+        if (tl?.pause && !tl.paused?.()) {
+          tl.pause();
+          paused.push(id);
+        }
+      } catch {
+        /* cross-origin guard */
+      }
+    }
+    if (paused.length > 0) {
+      input.element.setAttribute("data-hf-drag-paused-timelines", paused.join(","));
+    }
+  }
+
   const initialPathOffset = captureStudioPathOffset(input.element);
   const gestureToken = beginStudioManualEditGesture(input.element);
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset);
@@ -313,11 +348,35 @@ function restoreManualOffsetDragMember(member: ManualOffsetDragMember): void {
 export function restoreManualOffsetDragMembers(members: ManualOffsetDragMember[]): void {
   for (const member of members) {
     restoreManualOffsetDragMember(member);
+    resumeGsapTimelines(member.element);
   }
 }
 
 export function endManualOffsetDragMembers(members: ManualOffsetDragMember[]): void {
   for (const member of members) {
     endStudioManualEditGesture(member.element, member.gestureToken);
+    member.element.removeAttribute("data-hf-drag-initial-offset-x");
+    member.element.removeAttribute("data-hf-drag-initial-offset-y");
+    member.element.removeAttribute("data-hf-drag-gsap-base-x");
+    member.element.removeAttribute("data-hf-drag-gsap-base-y");
+    resumeGsapTimelines(member.element);
   }
 }
+
+function resumeGsapTimelines(element: HTMLElement): void {
+  const ids = element.getAttribute("data-hf-drag-paused-timelines");
+  element.removeAttribute("data-hf-drag-paused-timelines");
+  if (!ids) return;
+  const win = element.ownerDocument.defaultView as
+    | (Window & {
+        __timelines?: Record<string, { pause?: () => void }>;
+        __player?: { seek?: (t: number) => void; getTime?: () => number };
+      })
+    | null;
+  if (!win) return;
+  // Re-seek to the current time to restore the paused timeline's render state.
+  // play() would start playback; pause() already stops. Seek re-renders at the
+  // current position without starting playback.
+  const t = win.__player?.getTime?.() ?? 0;
+  win.__player?.seek?.(t);
+}

packages/studio/src/components/editor/useDomEditOverlayRects.ts

@@ -113,7 +113,13 @@ export function useDomEditOverlayRects({
 
     const update = () => {
       frame = requestAnimationFrame(update);
-      if (rafPausedRef.current) return;
+      if (rafPausedRef.current) {
+        if (childRectsRef.current.length > 0) {
+          childRectsRef.current = [];
+          setChildRectsState([]);
+        }
+        return;
+      }
 
       const sel = selectionRef.current;
       const iframe = iframeRef.current;
@@ -143,7 +149,8 @@ export function useDomEditOverlayRects({
           resolvedElementRef as ResolvedElementRef,
         );
         if (el && isElementVisibleForOverlay(el)) {
-          setOverlayRect(toOverlayRect(overlayEl, iframe, el));
+          const nextRect = toOverlayRect(overlayEl, iframe, el);
+          setOverlayRect(nextRect);
           const descendants = el.querySelectorAll("*");
           if (descendants.length > 0 && descendants.length <= 60) {
             const nextChildRects: OverlayRect[] = [];