@hyperframes/studio 0.6.53 → 0.6.55

package/src/components/editor/manualEdits.test.ts

@@ -516,3 +516,104 @@ describe("studio manual edits", () => {
     expect(frames).toHaveLength(0);
   });
 });
+
+describe("applyStudioPathOffset sets correct attribute name", () => {
+  it("sets data-hf-studio-path-offset without double data- prefix", () => {
+    const window = new Window();
+    const el = window.document.createElement("div");
+    window.document.body.append(el);
+
+    applyStudioPathOffset(el, { x: 100, y: 50 });
+
+    expect(el.getAttribute("data-hf-studio-path-offset")).toBe("true");
+    expect(el.getAttribute("data-data-hf-studio-path-offset")).toBeNull();
+  });
+
+  it("stores offset in CSS vars alongside the attribute marker", () => {
+    const window = new Window();
+    const el = window.document.createElement("div");
+    window.document.body.append(el);
+
+    applyStudioPathOffset(el, { x: 50, y: 25 });
+
+    expect(el.getAttribute("data-hf-studio-path-offset")).toBe("true");
+    expect(el.style.getPropertyValue(STUDIO_OFFSET_X_PROP)).toBe("50px");
+    expect(el.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)).toBe("25px");
+    expect(el.style.getPropertyValue("translate")).toContain(STUDIO_OFFSET_X_PROP);
+  });
+
+  it("corrects offset applied on top of legacy double-prefix element", () => {
+    const window = new Window();
+    const el = window.document.createElement("div");
+    el.setAttribute("data-data-hf-studio-path-offset", "true");
+    el.style.setProperty(STUDIO_OFFSET_X_PROP, "200px");
+    el.style.setProperty(STUDIO_OFFSET_Y_PROP, "-30px");
+    window.document.body.append(el);
+
+    applyStudioPathOffset(el, { x: 200, y: -30 });
+
+    expect(el.getAttribute("data-hf-studio-path-offset")).toBe("true");
+    expect(readStudioPathOffset(el)).toEqual({ x: 200, y: -30 });
+    expect(el.style.getPropertyValue("translate")).toContain(STUDIO_OFFSET_X_PROP);
+  });
+});
+
+describe("applyStudioPathOffset strips GSAP double-counted translate", () => {
+  it("strips GSAP transform translate when applying offset", () => {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    window.document.body.append(element);
+
+    // Simulate GSAP having baked translate into the transform matrix
+    element.style.setProperty("transform", "matrix(1, 0, 0, 1, 200, 0)");
+
+    applyStudioPathOffset(element, { x: 200, y: 0 });
+
+    // The transform translate should be stripped (GSAP's 200px removed)
+    const transform = element.style.getPropertyValue("transform");
+    if (transform && transform !== "none") {
+      const m = new window.DOMMatrix(transform);
+      expect(m.m41).toBe(0);
+      expect(m.m42).toBe(0);
+    }
+    // The offset should be stored in CSS vars
+    expect(readStudioPathOffset(element).x).toBe(200);
+  });
+
+  it("subtracts only the studio offset from GSAP transform, preserving animation values", () => {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    window.document.body.append(element);
+
+    // GSAP has scale + baked translate (offset 50) + animation contribution (-70)
+    // Total m42 = 50 + (-70) = -20
+    element.style.setProperty("transform", "matrix(0.5, 0, 0, 0.5, 0, -20)");
+
+    applyStudioPathOffset(element, { x: 0, y: 50 });
+
+    const transform = element.style.getPropertyValue("transform");
+    if (transform && transform !== "none") {
+      const m = new window.DOMMatrix(transform);
+      expect(m.a).toBeCloseTo(0.5);
+      expect(m.d).toBeCloseTo(0.5);
+      // Only the studio offset (50) is subtracted, animation contribution (-70) preserved
+      expect(m.m41).toBe(0);
+      expect(m.m42).toBe(-70);
+    }
+    expect(readStudioPathOffset(element).y).toBe(50);
+  });
+
+  it("offset survives repeated applyStudioPathOffset calls without drift", () => {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    window.document.body.append(element);
+
+    // Apply offset 3 times with same value (simulates reapply hook firing multiple times)
+    applyStudioPathOffset(element, { x: 100, y: -20 });
+    applyStudioPathOffset(element, { x: 100, y: -20 });
+    applyStudioPathOffset(element, { x: 100, y: -20 });
+
+    expect(readStudioPathOffset(element).x).toBe(100);
+    expect(readStudioPathOffset(element).y).toBe(-20);
+  });
+});

package/src/components/editor/manualEdits.ts

@@ -3,9 +3,7 @@ export {
   STUDIO_OFFSET_X_PROP,
   STUDIO_OFFSET_Y_PROP,
   STUDIO_WIDTH_PROP,
-  STUDIO_HEIGHT_PROP,
   STUDIO_ROTATION_PROP,
-  type StudioManualEditSeekWindow,
   type StudioBoxSizeSnapshot,
   type StudioRotationSnapshot,
   type StudioPathOffsetSnapshot,
@@ -20,7 +18,6 @@ export {
   readStudioPathOffset,
   readStudioBoxSize,
   readStudioRotation,
-  readGsapTranslateFromTransform,
   applyStudioPathOffset,
   applyStudioPathOffsetDraft,
   applyStudioBoxSize,
@@ -28,8 +25,6 @@ export {
   applyStudioRotation,
   applyStudioRotationDraft,
   reapplyPositionEditsAfterSeek,
-  buildMotionPatches,
-  buildClearMotionPatches,
 } from "./manualEditsDom";
 
 export {
@@ -51,7 +46,6 @@ import {
   STUDIO_MANUAL_EDITS_PLAYBACK_FRAME_PROP,
 } from "./manualEditsTypes";
 import { finiteNumber } from "./manualEditsParsing";
-import { isStudioManualEditGestureActive } from "./manualEditsDom";
 
 /* ── Seek/play reapply wrappers ───────────────────────────────────── */
 function markWrapped(fn: (...args: unknown[]) => unknown): void {
@@ -262,6 +256,28 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
       wrapApplyAfterFunction(studioWin, timeline, "pause") || wrappedNamedTimelinePause;
   }
 
+  // Auto-wrap timelines registered AFTER this install runs. GSAP compositions
+  // register via `window.__timelines[id] = tl` which may happen after the
+  // Studio hook runs. The Proxy intercepts new registrations and wraps
+  // seek/play/pause immediately, closing the gap that causes translate doubling.
+  if (studioWin.__timelines && !(studioWin.__timelines as Record<string, unknown>).__proxied) {
+    const original = studioWin.__timelines;
+    studioWin.__timelines = new Proxy(original, {
+      set(target, prop, value) {
+        target[prop as string] = value;
+        if (typeof value === "object" && value !== null) {
+          const tl = value as Record<string, unknown>;
+          wrapSeekReapplyFunction(studioWin, tl, "seek");
+          wrapPlayReapplyFunction(studioWin, tl, "play");
+          wrapApplyAfterFunction(studioWin, tl, "pause");
+          studioWin.__hfStudioManualEditsApply?.();
+        }
+        return true;
+      },
+    });
+    (studioWin.__timelines as Record<string, unknown>).__proxied = true;
+  }
+
   if (isStudioManualEditPlaybackActive(studioWin)) {
     startStudioManualEditPlaybackReapply(studioWin);
   }
@@ -280,6 +296,3 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
     wrappedNamedTimelinePause
   );
 }
-
-// Re-export for internal use (seek hooks need this)
-export { isStudioManualEditGestureActive };

package/src/components/editor/manualEditsDom.ts

@@ -48,7 +48,7 @@ export function endStudioManualEditGesture(element: HTMLElement, token?: string)
   element.removeAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
 }
 
-export function isStudioManualEditGestureActive(element: HTMLElement): boolean {
+function isStudioManualEditGestureActive(element: HTMLElement): boolean {
   return element.hasAttribute(STUDIO_MANUAL_EDIT_GESTURE_ATTR);
 }
 
@@ -213,26 +213,15 @@ function writeStudioPathOffsetVars(
 
 // GSAP 3.x reads the resolved CSS `translate` individual property at initialization and bakes it
 // into element.style.transform (as a matrix) on every seek. When the studio's reapply hook also
-// writes `translate`, both properties compose additively, doubling the visual offset. This helper
-// zeroes out only the translate component (m41/m42) so the `translate` prop isn't double-counted.
+// writes `translate`, both properties compose additively, doubling the visual offset.
+//
+// This helper subtracts only the baked studio offset from m41/m42, preserving any GSAP animation
+// contribution (e.g. a tween animating y: -20). The studio offset is read from the CSS custom
+// properties which tell us exactly how much was baked from the CSS translate.
 function isIdentityAfterTranslateStrip(m: DOMMatrix): boolean {
   return m.is2D && m.a === 1 && m.b === 0 && m.c === 0 && m.d === 1;
 }
 
-export function readGsapTranslateFromTransform(element: HTMLElement): { x: number; y: number } {
-  const transform = element.style.getPropertyValue("transform");
-  if (!transform || transform === "none") return { x: 0, y: 0 };
-  const DOMMatrixCtor = (element.ownerDocument.defaultView as (Window & typeof globalThis) | null)
-    ?.DOMMatrix;
-  if (!DOMMatrixCtor) return { x: 0, y: 0 };
-  try {
-    const m = new DOMMatrixCtor(transform);
-    return { x: m.m41, y: m.m42 };
-  } catch {
-    return { x: 0, y: 0 };
-  }
-}
-
 function stripGsapTranslateFromTransform(element: HTMLElement): void {
   const transform = element.style.getPropertyValue("transform");
   if (!transform || transform === "none") return;
@@ -242,9 +231,11 @@ function stripGsapTranslateFromTransform(element: HTMLElement): void {
   try {
     const m = new DOMMatrixCtor(transform);
     if (m.m41 === 0 && m.m42 === 0) return;
-    m.m41 = 0;
-    m.m42 = 0;
-    if (isIdentityAfterTranslateStrip(m)) {
+    const offsetX = readPxCustomProperty(element, STUDIO_OFFSET_X_PROP);
+    const offsetY = readPxCustomProperty(element, STUDIO_OFFSET_Y_PROP);
+    m.m41 -= offsetX;
+    m.m42 -= offsetY;
+    if (Math.abs(m.m41) < 0.01 && Math.abs(m.m42) < 0.01 && isIdentityAfterTranslateStrip(m)) {
       element.style.removeProperty("transform");
     } else {
       element.style.setProperty("transform", m.toString());
@@ -493,9 +484,19 @@ export {
 function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
   const ctor = doc.defaultView?.HTMLElement;
   if (!ctor) return [];
-  return Array.from(doc.querySelectorAll(`[${attr}="true"]`)).filter(
+  const elements = Array.from(doc.querySelectorAll(`[${attr}="true"]`)).filter(
     (el): el is HTMLElement => el instanceof ctor,
   );
+  // Handle legacy HTML files where attributes were persisted with a double data- prefix
+  const legacyAttr = `data-${attr}`;
+  for (const el of doc.querySelectorAll(`[${legacyAttr}="true"]`)) {
+    if (el instanceof ctor && !el.hasAttribute(attr)) {
+      el.setAttribute(attr, "true");
+      el.removeAttribute(legacyAttr);
+      elements.push(el);
+    }
+  }
+  return elements;
 }
 
 function reapplyPathOffsets(doc: Document): void {

package/src/components/editor/manualOffsetDrag.test.ts

@@ -1,8 +1,10 @@
 import { Window } from "happy-dom";
 import { describe, expect, it } from "vitest";
 import {
+  applyManualOffsetDragCommit,
   applyManualOffsetDragMatrix,
   createManualOffsetDragMember,
+  endManualOffsetDragMembers,
   invertManualOffsetDragMatrix,
   measureManualOffsetDragScreenToOffsetMatrix,
   resolveManualOffsetForPointerDelta,
@@ -140,8 +142,8 @@ describe("measureManualOffsetDragScreenToOffsetMatrix", () => {
   });
 });
 
-describe("createManualOffsetDragMember GSAP translate compensation", () => {
-  it("folds GSAP translate from element.style.transform into initialOffset", () => {
+describe("createManualOffsetDragMember uses raw CSS var offset", () => {
+  it("ignores GSAP transform — initialOffset comes from CSS vars only", () => {
     const window = new Window();
     const element = window.document.createElement("div");
     window.document.body.append(element);
@@ -164,14 +166,18 @@ describe("createManualOffsetDragMember GSAP translate compensation", () => {
     expect(result.ok).toBe(true);
     if (!result.ok) return;
     expect(result.member.initialOffset.x).toBe(0);
-    expect(result.member.initialOffset.y).toBe(-20);
+    expect(result.member.initialOffset.y).toBe(0);
   });
 
-  it("leaves initialOffset unchanged when no GSAP transform is present", () => {
+  it("reads only the CSS var offset, not GSAP transform", () => {
     const window = new Window();
     const element = window.document.createElement("div");
     window.document.body.append(element);
 
+    element.style.setProperty(STUDIO_OFFSET_X_PROP, "30px");
+    element.style.setProperty(STUDIO_OFFSET_Y_PROP, "10px");
+    element.style.setProperty("transform", "translate(50px, -15px)");
+
     element.getBoundingClientRect = () => {
       const offsetX = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
       const offsetY = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)) || 0;
@@ -187,35 +193,42 @@ describe("createManualOffsetDragMember GSAP translate compensation", () => {
 
     expect(result.ok).toBe(true);
     if (!result.ok) return;
-    expect(result.member.initialOffset.x).toBe(0);
-    expect(result.member.initialOffset.y).toBe(0);
+    expect(result.member.initialOffset.x).toBe(30);
+    expect(result.member.initialOffset.y).toBe(10);
   });
 
-  it("combines existing manual offset with GSAP translate", () => {
+  it("does not accumulate drift across multiple drag cycles", () => {
     const window = new Window();
     const element = window.document.createElement("div");
     window.document.body.append(element);
 
-    element.style.setProperty(STUDIO_OFFSET_X_PROP, "30px");
-    element.style.setProperty(STUDIO_OFFSET_Y_PROP, "10px");
-    element.style.setProperty("transform", "translate(50px, -15px)");
-
     element.getBoundingClientRect = () => {
       const offsetX = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
       const offsetY = Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_Y_PROP)) || 0;
       return new window.DOMRect(10 + offsetX, 20 + offsetY, 100, 50);
     };
 
-    const result = createManualOffsetDragMember({
-      key: "test",
-      selection: { element } as never,
-      element,
-      rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
-    });
-
-    expect(result.ok).toBe(true);
-    if (!result.ok) return;
-    expect(result.member.initialOffset.x).toBe(80);
-    expect(result.member.initialOffset.y).toBe(-5);
+    // Simulate GSAP baking a translate into transform each cycle
+    for (let cycle = 0; cycle < 3; cycle++) {
+      element.style.setProperty("transform", `translate(${50 * (cycle + 1)}px, 0px)`);
+
+      const result = createManualOffsetDragMember({
+        key: "test",
+        selection: { element } as never,
+        element,
+        rect: { left: 10, top: 20, width: 100, height: 50, editScaleX: 1, editScaleY: 1 },
+      });
+
+      expect(result.ok).toBe(true);
+      if (!result.ok) return;
+      // initialOffset should always be the CSS var value, never inflated by GSAP transform
+      const currentRawX =
+        Number.parseFloat(element.style.getPropertyValue(STUDIO_OFFSET_X_PROP)) || 0;
+      expect(result.member.initialOffset.x).toBe(currentRawX);
+
+      // Simulate drag commit: apply a small offset
+      applyManualOffsetDragCommit(result.member, 10, 0);
+      endManualOffsetDragMembers([result.member]);
+    }
   });
 });

package/src/components/editor/manualOffsetDrag.ts

@@ -5,7 +5,6 @@ import {
   beginStudioManualEditGesture,
   captureStudioPathOffset,
   endStudioManualEditGesture,
-  readGsapTranslateFromTransform,
   readStudioPathOffset,
   restoreStudioPathOffset,
   type StudioPathOffsetSnapshot,
@@ -232,12 +231,7 @@ export function createManualOffsetDragMember(input: {
   element: HTMLElement;
   rect: ManualOffsetDragRect;
 }): ManualOffsetDragMemberResult {
-  const rawOffset = readStudioPathOffset(input.element);
-  const gsapTranslate = readGsapTranslateFromTransform(input.element);
-  const initialOffset = {
-    x: rawOffset.x + gsapTranslate.x,
-    y: rawOffset.y + gsapTranslate.y,
-  };
+  const initialOffset = readStudioPathOffset(input.element);
   const initialPathOffset = captureStudioPathOffset(input.element);
   const gestureToken = beginStudioManualEditGesture(input.element);
   const measured = measureManualOffsetDragScreenToOffsetMatrix(input.element, initialOffset);

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -103,6 +103,8 @@ export function MetricField({
   disabled,
   liveCommit,
   scrub,
+  suffix,
+  tooltip,
   onCommit,
 }: {
   label: string;
@@ -110,6 +112,8 @@ export function MetricField({
   disabled?: boolean;
   liveCommit?: boolean;
   scrub?: boolean;
+  suffix?: string;
+  tooltip?: string;
   onCommit: (nextValue: string) => void;
 }) {
   const scrubRef = useRef<{ startX: number; startValue: number; pointerId: number } | null>(null);
@@ -151,7 +155,7 @@ export function MetricField({
       : ({ className: "flex-shrink-0 text-[11px] font-medium text-neutral-500" } as const);
 
   return (
-    <div className={FIELD}>
+    <div className={FIELD} title={tooltip}>
       <div className="flex min-w-0 items-center gap-3">
         <span {...scrubProps}>{label}</span>
         <CommitField
@@ -160,6 +164,7 @@ export function MetricField({
           liveCommit={liveCommit}
           onCommit={onCommit}
         />
+        {suffix && <span className="flex-shrink-0 text-[10px] text-neutral-600">{suffix}</span>}
       </div>
     </div>
   );

package/src/contexts/DomEditContext.tsx

@@ -53,6 +53,15 @@ export function DomEditProvider({
     setAgentModalOpen,
     setAgentPromptSelectionContext,
     setAgentModalAnchorPoint,
+    selectedGsapAnimations,
+    gsapMultipleTimelines,
+    gsapUnsupportedTimelinePattern,
+    handleGsapUpdateProperty,
+    handleGsapUpdateMeta,
+    handleGsapDeleteAnimation,
+    handleGsapAddAnimation,
+    handleGsapAddProperty,
+    handleGsapRemoveProperty,
   },
   children,
 }: {
@@ -101,6 +110,15 @@ export function DomEditProvider({
       setAgentModalOpen,
       setAgentPromptSelectionContext,
       setAgentModalAnchorPoint,
+      selectedGsapAnimations,
+      gsapMultipleTimelines,
+      gsapUnsupportedTimelinePattern,
+      handleGsapUpdateProperty,
+      handleGsapUpdateMeta,
+      handleGsapDeleteAnimation,
+      handleGsapAddAnimation,
+      handleGsapAddProperty,
+      handleGsapRemoveProperty,
     }),
     [
       domEditSelection,
@@ -143,6 +161,15 @@ export function DomEditProvider({
       setAgentModalOpen,
       setAgentPromptSelectionContext,
       setAgentModalAnchorPoint,
+      selectedGsapAnimations,
+      gsapMultipleTimelines,
+      gsapUnsupportedTimelinePattern,
+      handleGsapUpdateProperty,
+      handleGsapUpdateMeta,
+      handleGsapDeleteAnimation,
+      handleGsapAddAnimation,
+      handleGsapAddProperty,
+      handleGsapRemoveProperty,
     ],
   );
   return <DomEditContext value={stable}>{children}</DomEditContext>;

package/src/hooks/useDomEditSession.ts

@@ -1,7 +1,11 @@
 import { useCallback, useEffect, useRef } from "react";
 import type { TimelineElement } from "../player";
-import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
+import {
+  STUDIO_INSPECTOR_PANELS_ENABLED,
+  STUDIO_GSAP_PANEL_ENABLED,
+} from "../components/editor/manualEditingAvailability";
 import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
+import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
 import type { RightPanelTab } from "../utils/studioHelpers";
@@ -11,6 +15,8 @@ import { useAskAgentModal } from "./useAskAgentModal";
 import { useDomSelection } from "./useDomSelection";
 import { usePreviewInteraction } from "./usePreviewInteraction";
 import { useDomEditCommits } from "./useDomEditCommits";
+import { useGsapScriptCommits } from "./useGsapScriptCommits";
+import { useGsapAnimationsForElement, useGsapCacheVersion } from "./useGsapTweenCache";
 
 // ── Types ──
 
@@ -185,6 +191,39 @@ export function useDomEditSession({
     onClickToSource,
   });
 
+  // ── GSAP script editing ──
+
+  const { version: gsapCacheVersion, bump: bumpGsapCache } = useGsapCacheVersion();
+
+  const {
+    animations: selectedGsapAnimations,
+    multipleTimelines: gsapMultipleTimelines,
+    unsupportedTimelinePattern: gsapUnsupportedTimelinePattern,
+  } = useGsapAnimationsForElement(
+    STUDIO_GSAP_PANEL_ENABLED ? (projectId ?? null) : null,
+    domEditSelection?.sourceFile || activeCompPath || "index.html",
+    domEditSelection
+      ? { id: domEditSelection.id ?? null, selector: domEditSelection.selector ?? null }
+      : null,
+    gsapCacheVersion,
+  );
+
+  const {
+    updateGsapProperty,
+    updateGsapMeta,
+    deleteGsapAnimation,
+    addGsapAnimation,
+    addGsapProperty,
+    removeGsapProperty,
+  } = useGsapScriptCommits({
+    projectIdRef,
+    activeCompPath,
+    editHistory,
+    domEditSaveTimestampRef,
+    reloadPreview,
+    onCacheInvalidate: bumpGsapCache,
+  });
+
   // ── Commit handlers (delegated to useDomEditCommits) ──
 
   const {
@@ -224,7 +263,53 @@ export function useDomEditSession({
     buildDomSelectionFromTarget,
   });
 
-  // ── Effects ──
+  const handleGsapUpdateProperty = useCallback(
+    (animId: string, prop: string, value: number | string) => {
+      if (!domEditSelection) return;
+      updateGsapProperty(domEditSelection, animId, prop, value);
+    },
+    [domEditSelection, updateGsapProperty],
+  );
+
+  const handleGsapUpdateMeta = useCallback(
+    (animId: string, updates: { duration?: number; ease?: string; position?: number }) => {
+      if (!domEditSelection) return;
+      updateGsapMeta(domEditSelection, animId, updates);
+    },
+    [domEditSelection, updateGsapMeta],
+  );
+
+  const handleGsapDeleteAnimation = useCallback(
+    (animId: string) => {
+      if (!domEditSelection) return;
+      deleteGsapAnimation(domEditSelection, animId);
+    },
+    [domEditSelection, deleteGsapAnimation],
+  );
+
+  const handleGsapAddAnimation = useCallback(
+    (method: "to" | "from" | "set") => {
+      if (!domEditSelection) return;
+      addGsapAnimation(domEditSelection, method, currentTime);
+    },
+    [domEditSelection, addGsapAnimation, currentTime],
+  );
+
+  const handleGsapAddProperty = useCallback(
+    (animId: string, prop: string) => {
+      if (!domEditSelection) return;
+      addGsapProperty(domEditSelection, animId, prop);
+    },
+    [domEditSelection, addGsapProperty],
+  );
+
+  const handleGsapRemoveProperty = useCallback(
+    (animId: string, prop: string) => {
+      if (!domEditSelection) return;
+      removeGsapProperty(domEditSelection, animId, prop);
+    },
+    [domEditSelection, removeGsapProperty],
+  );
 
   // Sync selection from preview document on load / refresh
   // eslint-disable-next-line no-restricted-syntax
@@ -243,6 +328,8 @@ export function useDomEditSession({
       }
       if (!doc) return;
 
+      reapplyPositionEditsAfterSeek(doc);
+
       const nextElement = findElementForSelection(doc, currentSelection, activeCompPath);
       if (!nextElement) {
         applyDomSelection(null, { revealPanel: false });
@@ -345,5 +432,16 @@ export function useDomEditSession({
     setAgentModalOpen,
     setAgentPromptSelectionContext,
     setAgentModalAnchorPoint,
+
+    // GSAP script editing
+    selectedGsapAnimations,
+    gsapMultipleTimelines,
+    gsapUnsupportedTimelinePattern,
+    handleGsapUpdateProperty,
+    handleGsapUpdateMeta,
+    handleGsapDeleteAnimation,
+    handleGsapAddAnimation,
+    handleGsapAddProperty,
+    handleGsapRemoveProperty,
   };
 }

package/src/hooks/useDomSelection.ts

@@ -16,6 +16,7 @@ import {
   resolveDomEditSelection,
   type DomEditSelection,
 } from "../components/editor/domEditing";
+import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
 
 // ── Types ──
 
@@ -218,6 +219,11 @@ export function useDomSelection({
     ) => {
       const iframe = previewIframeRef.current;
       if (!iframe || captionEditMode) return null;
+      try {
+        if (iframe.contentDocument) reapplyPositionEditsAfterSeek(iframe.contentDocument);
+      } catch {
+        /* cross-origin guard */
+      }
       const target = getPreviewTargetFromPointer(iframe, clientX, clientY, activeCompPath);
       if (!target) return null;
       return buildDomSelectionFromTarget(target, {
@@ -245,6 +251,8 @@ export function useDomSelection({
       }
       if (!doc) return null;
 
+      reapplyPositionEditsAfterSeek(doc);
+
       const targetElement = findElementForTimelineElement(doc, element, {
         activeCompositionPath: activeCompPath,
         compIdToSrc,