@hyperframes/studio 0.7.39 → 0.7.40

package/src/components/editor/offCanvasIndicatorRefresh.ts

@@ -0,0 +1,99 @@
+import type React from "react";
+import type { OffCanvasRect } from "./OffCanvasIndicators";
+import { recomputeOffCanvasIndicators } from "./offCanvasIndicatorGeometry";
+
+interface OffCanvasIndicatorRefreshOptions {
+  iframeRef: React.RefObject<HTMLIFrameElement | null>;
+  overlayRef: React.RefObject<HTMLDivElement | null>;
+  compRectRef: React.MutableRefObject<{ left: number; top: number; width: number; height: number }>;
+  activeCompositionPathRef: React.MutableRefObject<string | null>;
+  dirtyRef: React.MutableRefObject<boolean>;
+  sigRef: React.MutableRefObject<string>;
+  observerRef: React.MutableRefObject<MutationObserver | null>;
+  observedDocRef: React.MutableRefObject<Document | null>;
+  elementsRef: React.MutableRefObject<Map<string, HTMLElement>>;
+  setRects: (rects: OffCanvasRect[]) => void;
+}
+
+function compSignature(comp: { left: number; top: number; width: number; height: number }): string {
+  return `${Math.round(comp.left)}:${Math.round(comp.top)}:${Math.round(comp.width)}:${Math.round(comp.height)}`;
+}
+
+function clearIndicators(options: OffCanvasIndicatorRefreshOptions): void {
+  options.dirtyRef.current = false;
+  options.sigRef.current = "";
+  options.elementsRef.current = new Map();
+  options.setRects([]);
+}
+
+function observeDoc(doc: Document, markDirty: () => void): MutationObserver | null {
+  const Observer = doc.defaultView?.MutationObserver ?? globalThis.MutationObserver;
+  if (!Observer) return null;
+  const observer = new Observer(markDirty);
+  observer.observe(doc.documentElement, {
+    attributes: true,
+    // data-hidden is included explicitly: hiding an element writes data-hidden, and
+    // although the runtime honoring also writes display:"none" (a style mutation we'd
+    // catch anyway), keying on the attribute directly makes the coupling robust to any
+    // future throttling of that runtime sync.
+    attributeFilter: ["style", "class", "transform", "width", "height", "data-hidden"],
+    childList: true,
+    subtree: true,
+  });
+  return observer;
+}
+
+export function startOffCanvasIndicatorRefresh(
+  options: OffCanvasIndicatorRefreshOptions,
+): () => void {
+  let frame = 0;
+  let lastCompSig = "";
+  const markDirty = () => {
+    options.dirtyRef.current = true;
+  };
+  const attachObserver = (doc: Document | null) => {
+    options.observerRef.current?.disconnect();
+    options.observerRef.current = doc?.documentElement ? observeDoc(doc, markDirty) : null;
+    options.observedDocRef.current = doc;
+    options.sigRef.current = "";
+  };
+  const update = () => {
+    frame = requestAnimationFrame(update);
+    const iframe = options.iframeRef.current;
+    const overlayEl = options.overlayRef.current;
+    const doc = iframe?.contentDocument ?? null;
+    if (doc !== options.observedDocRef.current) {
+      attachObserver(doc);
+      markDirty();
+    }
+    const comp = options.compRectRef.current;
+    const nextCompSig = compSignature(comp);
+    if (nextCompSig !== lastCompSig) {
+      lastCompSig = nextCompSig;
+      markDirty();
+    }
+    if (!iframe || !overlayEl) {
+      if (options.dirtyRef.current) clearIndicators(options);
+      return;
+    }
+    if (!options.dirtyRef.current) return;
+    options.dirtyRef.current = false;
+    recomputeOffCanvasIndicators(
+      iframe,
+      overlayEl,
+      doc,
+      comp,
+      options.activeCompositionPathRef.current,
+      options.sigRef,
+      options.elementsRef,
+      options.setRects,
+    );
+  };
+  frame = requestAnimationFrame(update);
+  return () => {
+    cancelAnimationFrame(frame);
+    options.observerRef.current?.disconnect();
+    options.observerRef.current = null;
+    options.observedDocRef.current = null;
+  };
+}

package/src/components/editor/propertyPanelHelpers.ts

@@ -2,6 +2,7 @@ import { parseCssColor, type ParsedColor } from "./colorValue";
 import { COMMON_LOCAL_FONT_FAMILIES } from "./fontCatalog";
 import type { DomEditSelection } from "./domEditing";
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
+import type { TimelineElement } from "../../player";
 import { roundToCenti } from "../../utils/rounding";
 
 export type {
@@ -18,6 +19,16 @@ export function stripQueryAndHash(value: string): string {
   return value.slice(0, Math.min(queryIndex, hashIndex));
 }
 
+export function isSelectedElementHidden(
+  elements: readonly TimelineElement[],
+  selectedElementId: string | null,
+): boolean {
+  if (!selectedElementId) return false;
+  return (
+    elements.find((element) => (element.key ?? element.id) === selectedElementId)?.hidden === true
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Font types & constants (shared by font and section modules)        */
 /* ------------------------------------------------------------------ */

package/src/components/editor/propertyPanelTypes.ts

@@ -52,6 +52,7 @@ export interface PropertyPanelProps {
   onAddTextField: (afterFieldKey?: string) => string | Promise<string | null> | null;
   onRemoveTextField: (fieldKey: string) => void;
   onAskAgent: () => void;
+  onToggleElementHidden?: (elementKey: string, hidden: boolean) => void | Promise<void>;
   onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
   fontAssets?: ImportedFontAsset[];
   onImportFonts?: (files: FileList | File[]) => Promise<ImportedFontAsset[]>;

package/src/contexts/TimelineEditContext.tsx

@@ -32,6 +32,7 @@ export function TimelineEditProvider({
     [
       value.onMoveElement,
       value.onResizeElement,
+      value.onToggleTrackHidden,
       value.onBlockedEditAttempt,
       value.onSplitElement,
       value.onRazorSplit,

package/src/hooks/gsapDragCommit.test.ts

@@ -5,6 +5,7 @@ import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
 import {
   commitStaticGsapPosition,
   commitStaticGsapRotation,
+  findExistingPositionWrite,
   parkPlayheadOnKeyframe,
   type GsapDragCommitCallbacks,
 } from "./gsapDragCommit";
@@ -75,6 +76,7 @@ describe("commitGsapPositionFromDrag — flat tween", () => {
   });
 
   it("extends the existing tween (never spawns a parallel one) when dragged OUTSIDE its range", async () => {
+    // fallow-ignore-next-line code-duplication
     usePlayerStore.setState({ currentTime: 6 }); // outside [1.2, 3.4]
     const { types, callbacks } = recordingCallbacks();
 
@@ -94,7 +96,9 @@ describe("commitGsapPositionFromDrag — flat tween", () => {
   });
 
   it("adds a keyframe at the playhead when dragged INSIDE its range", async () => {
+    // fallow-ignore-next-line code-duplication
     usePlayerStore.setState({ currentTime: 2 }); // inside [1.2, 3.4]
+    // fallow-ignore-next-line code-duplication
     const { types, callbacks } = recordingCallbacks();
 
     await commitGsapPositionFromDrag(
@@ -115,6 +119,7 @@ describe("commitGsapPositionFromDrag — flat tween", () => {
     // User clicked the 100% diamond (activeKeyframePct=100), playhead drifted past
     // the end. Expect: convert + add-keyframe AT 100% — not replace-with-keyframes.
     usePlayerStore.setState({ currentTime: 6, activeKeyframePct: 100 }); // outside [1.2, 3.4]
+    // fallow-ignore-next-line code-duplication
     const { types, mutations, callbacks } = recordingCallbacks();
 
     await commitGsapPositionFromDrag(
@@ -338,6 +343,7 @@ describe("commitStaticGsapPosition — instantPatch (value-only set)", () => {
     await commitStaticGsapPosition(
       selection(),
       { x: -50, y: 30 },
+      // fallow-ignore-next-line code-duplication
       { x: 0, y: 0 },
       "#puck-a",
       null, // no existing set → `add` a new base gsap.set
@@ -352,6 +358,55 @@ describe("commitStaticGsapPosition — instantPatch (value-only set)", () => {
   });
 });
 
+// A degenerate `tl.to("#el",{keyframes:{...},duration:0})` — what a pre-fix drag
+// left behind when it routed a STATIC position hold (sitting beside a keyframed
+// rotation) into the keyframe branch. A duration-0 keyframed tween renders its
+// final keyframe at every playhead, so the element froze and "couldn't move".
+const keyframedZeroDurationHold = (): GsapAnimation =>
+  ({
+    id: "#puck-a-frozen",
+    targetSelector: "#puck-a",
+    method: "to",
+    propertyGroup: "position",
+    duration: 0,
+    keyframes: {
+      keyframes: [
+        { percentage: 0, properties: { x: 100, y: 50 } },
+        { percentage: 100, properties: { x: -260, y: -70 } },
+      ],
+    },
+    properties: {},
+  }) as unknown as GsapAnimation;
+
+describe("static position hold recognition + heal (frozen duration-0 keyframed tween)", () => {
+  beforeEach(() => usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null }));
+
+  it("findExistingPositionWrite recognizes a keyframed zero-duration position hold", () => {
+    const found = findExistingPositionWrite([keyframedZeroDurationHold()], "#puck-a");
+    expect(found?.id).toBe("#puck-a-frozen");
+  });
+
+  it("commitStaticGsapPosition heals a keyframed hold by delete + clean add-set (never update-property)", async () => {
+    const { commits, callbacks } = optionRecordingCallbacks();
+
+    await commitStaticGsapPosition(
+      selection(),
+      { x: -50, y: 30 },
+      { x: 0, y: 0 },
+      "#puck-a",
+      keyframedZeroDurationHold(),
+      callbacks,
+    );
+
+    const types = commits.map((c) => c.mutation.type);
+    // Can't update-property into keyframes — must delete the frozen tween and
+    // write a clean static set, so the element becomes freely movable.
+    expect(types).toEqual(["delete", "add"]);
+    expect(types).not.toContain("update-property");
+    expect((commits[1].mutation as { method?: string }).method).toBe("set");
+  });
+});
+
 describe("commitStaticGsapRotation — instantPatch (value-only set)", () => {
   beforeEach(() => usePlayerStore.setState({ currentTime: 0, activeKeyframePct: null }));
 
@@ -377,6 +432,7 @@ describe("commitStaticGsapRotation — instantPatch (value-only set)", () => {
   it("ADDS a global gsap.set with a global-set instantPatch (off-timeline, no flash)", async () => {
     const { commits, callbacks } = optionRecordingCallbacks();
 
+    // fallow-ignore-next-line code-duplication
     await commitStaticGsapRotation(selection(), 42, "#puck-a", null, callbacks);
 
     expect(commits).toHaveLength(1);

package/src/hooks/gsapDragCommit.ts

@@ -14,7 +14,16 @@ import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeComp
 import { roundTo3 } from "../utils/rounding";
 import { computeElementPercentage } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
-import type { RuntimeTweenChange, SetPatchProps } from "./gsapRuntimePatch";
+import type { RuntimeTweenChange } from "./gsapRuntimePatch";
+import {
+  setPatchFromUpdateProperties,
+  setPatchFromUpdateProperty,
+} from "./gsapDragStaticSetHelpers";
+export {
+  findExistingPositionWrite,
+  findRotationSetAnimation,
+  findSizeSetAnimation,
+} from "./gsapDragStaticSetHelpers";
 export interface GsapDragCommitCallbacks {
   commitMutation: (
     selection: DomEditSelection,
@@ -103,86 +112,6 @@ export async function materializeIfDynamic(
 
 // ── Drag → GSAP position math ──────────────────────────────────────────────
 
-/** The shape of an `update-property` mutation a static-set nudge POSTs. */
-interface UpdatePropertyMutation {
-  type: "update-property";
-  animationId: string;
-  property: string;
-  value: number;
-}
-
-/**
- * Build the `instantPatch` for a value-only `tl.set` from the SAME
- * `update-property` mutation(s) that are POSTed — so the patch can never carry a
- * value the source write didn't (one source of truth). Each mutation contributes
- * its `{property: value}` channel to the patch's props.
- */
-function setPatchFromUpdateProperties(
-  selector: string,
-  mutations: UpdatePropertyMutation[],
-  global = false,
-): { selector: string; change: RuntimeTweenChange } {
-  const props: SetPatchProps = {};
-  for (const m of mutations) props[m.property as keyof SetPatchProps] = m.value;
-  // An off-timeline `gsap.set` has no runtime tween to patch — apply it to the
-  // element directly. An on-timeline `tl.set` mutates its tween (so a re-seek keeps it).
-  return { selector, change: { kind: global ? "global-set" : "set", props } };
-}
-
-/** Single-mutation convenience over {@link setPatchFromUpdateProperties}. */
-function setPatchFromUpdateProperty(
-  selector: string,
-  mutation: UpdatePropertyMutation,
-  global = false,
-): { selector: string; change: RuntimeTweenChange } {
-  return setPatchFromUpdateProperties(selector, [mutation], global);
-}
-
-/**
- * Find the studio position-hold `set` for a selector — a `tl.set("#el",{x,y})`
- * with no duration. This is what a static-element nudge writes/updates.
- */
-function findPositionSetAnimation(
-  animations: GsapAnimation[],
-  selector: string,
-): GsapAnimation | null {
-  return (
-    animations.find(
-      (a) =>
-        a.method === "set" &&
-        a.targetSelector === selector &&
-        ("x" in a.properties || "y" in a.properties),
-    ) ?? null
-  );
-}
-
-/**
- * Find the EXISTING static position HOLD to update for a static-hold drag. Not
- * just a `set`: a degenerate `tl.to("#el",{duration:0,x,y})` (what
- * remove-all-keyframes leaves behind) is a held position too, and the next drag
- * must UPDATE it in place rather than append a second `gsap.set` that fights it
- * (the duplicate-position-write bug). Only zero-duration holds qualify — a
- * live-duration `to`/`from` is NOT a static hold (and in the static path it's a
- * stale/phantom parse: re-committing it would resurrect a just-deleted tween).
- * Prefers a `set` (the canonical static channel) when both forms exist.
- */
-function findExistingPositionWrite(
-  animations: GsapAnimation[],
-  selector: string,
-): GsapAnimation | null {
-  const set = findPositionSetAnimation(animations, selector);
-  if (set) return set;
-  return (
-    animations.find(
-      (a) =>
-        a.targetSelector === selector &&
-        a.propertyGroup === "position" &&
-        !a.keyframes &&
-        (a.duration ?? 0) === 0,
-    ) ?? null
-  );
-}
-
 /**
  * Commit a STATIC element drag as a `tl.set("#el",{x,y})` — the single-source
  * position channel for elements with no position animation. Idempotent: a
@@ -201,6 +130,34 @@ export async function commitStaticGsapPosition(
 ): Promise<void> {
   const { newX, newY } = computeDraggedGsapPosition(selection.element, studioOffset, gsapPos);
   if (existingSet) {
+    if (existingSet.keyframes) {
+      // Keyframed zero-duration hold (drag-path corruption): can't update-property
+      // into keyframes — delete it and write a clean static set instead.
+      const coalesceKey = `gsap:heal-static:${existingSet.id}`;
+      await callbacks.commitMutation(
+        selection,
+        { type: "delete", animationId: existingSet.id },
+        { label: "Move layer", skipReload: true, coalesceKey },
+      );
+      await callbacks.commitMutation(
+        selection,
+        {
+          type: "add",
+          targetSelector: selector,
+          method: "set",
+          position: 0,
+          properties: { x: newX, y: newY },
+          global: true,
+        },
+        {
+          label: "Move layer",
+          softReload: true,
+          coalesceKey,
+          instantPatch: { selector, change: { kind: "global-set", props: { x: newX, y: newY } } },
+        },
+      );
+      return;
+    }
     // Update in place — two single-property mutations (the API updates one prop
     // per call). Coalesce them and reload only after the second lands.
     const coalesceKey = `gsap:set-nudge:${existingSet.id}`;
@@ -262,19 +219,6 @@ export async function commitStaticGsapPosition(
   );
 }
 
-export { findExistingPositionWrite };
-
-function findRotationSetAnimation(
-  animations: GsapAnimation[],
-  selector: string,
-): GsapAnimation | null {
-  return (
-    animations.find(
-      (a) => a.method === "set" && a.targetSelector === selector && "rotation" in a.properties,
-    ) ?? null
-  );
-}
-
 /**
  * Commit a STATIC element rotation as a `tl.set("#el",{rotation})` — the single-
  * source rotation channel for elements with no rotation animation (mirrors
@@ -328,19 +272,6 @@ export async function commitStaticGsapRotation(
   );
 }
 
-export { findRotationSetAnimation };
-
-function findSizeSetAnimation(animations: GsapAnimation[], selector: string): GsapAnimation | null {
-  return (
-    animations.find(
-      (a) =>
-        a.method === "set" &&
-        a.targetSelector === selector &&
-        ("width" in a.properties || "height" in a.properties),
-    ) ?? null
-  );
-}
-
 /**
  * Commit a STATIC element resize as a `tl.set("#el",{width,height})` — the
  * single-source size channel for elements with no size animation (mirrors
@@ -489,8 +420,6 @@ export async function commitKeyframedSizeFromResize(
   return true;
 }
 
-export { findSizeSetAnimation };
-
 // ── Whole-path offset (plain drag on animated element) ──────────────────
 
 /**
@@ -498,6 +427,7 @@ export { findSizeSetAnimation };
  * shifts together so the animation shape is preserved and the element can't
  * dart off-screen. For flat tweens (no keyframes), convert first then shift.
  */
+// fallow-ignore-next-line code-duplication
 // fallow-ignore-next-line complexity
 export async function commitWholePathOffset(
   selection: DomEditSelection,
@@ -515,6 +445,7 @@ export async function commitWholePathOffset(
     gsapPos,
   );
   const deltaX = newX - baseGsapX;
+  // fallow-ignore-next-line code-duplication
   const deltaY = newY - baseGsapY;
   const origX = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-x") ?? "") || 0;
   const origY = Number.parseFloat(el.getAttribute("data-hf-drag-initial-offset-y") ?? "") || 0;
@@ -525,6 +456,7 @@ export async function commitWholePathOffset(
     el.removeAttribute("data-hf-drag-initial-offset-y");
   };
 
+  // fallow-ignore-next-line code-duplication
   let effectiveAnim = anim;
   if (anim.keyframes) {
     const newId = await materializeIfDynamic(anim, iframe, callbacks.commitMutation, selection);

package/src/hooks/gsapDragPositionCommit.ts

@@ -202,6 +202,7 @@ async function commitFlatViaKeyframes(
   }
 
   const coalesceKey = `gsap:convert-drag:${anim.id}`;
+  // fallow-ignore-next-line code-duplication
   await callbacks.commitMutation(
     selection,
     {
@@ -229,6 +230,7 @@ async function commitFlatViaKeyframes(
   if (editedSelected) parkPlayheadOnKeyframe(anim, pct);
 }
 
+// fallow-ignore-next-line code-duplication
 // fallow-ignore-next-line complexity
 export async function commitGsapPositionFromDrag(
   selection: DomEditSelection,
@@ -240,6 +242,7 @@ export async function commitGsapPositionFromDrag(
   callbacks: GsapDragCommitCallbacks,
 ): Promise<void> {
   const el = selection.element;
+  // fallow-ignore-next-line code-duplication
   const { newX, newY, baseGsapX, baseGsapY } = computeDraggedGsapPosition(
     el,
     studioOffset,

package/src/hooks/gsapDragStaticSetHelpers.ts

@@ -0,0 +1,109 @@
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { resolveTweenDuration } from "../utils/globalTimeCompiler";
+import type { RuntimeTweenChange, SetPatchProps } from "./gsapRuntimePatch";
+
+/** The shape of an `update-property` mutation a static-set nudge POSTs. */
+interface UpdatePropertyMutation {
+  type: "update-property";
+  animationId: string;
+  property: string;
+  value: number;
+}
+
+/**
+ * Build the `instantPatch` for a value-only `tl.set` from the SAME
+ * `update-property` mutation(s) that are POSTed — so the patch can never carry a
+ * value the source write didn't (one source of truth). Each mutation contributes
+ * its `{property: value}` channel to the patch's props.
+ */
+export function setPatchFromUpdateProperties(
+  selector: string,
+  mutations: UpdatePropertyMutation[],
+  global = false,
+): { selector: string; change: RuntimeTweenChange } {
+  const props: SetPatchProps = {};
+  for (const m of mutations) props[m.property as keyof SetPatchProps] = m.value;
+  // An off-timeline `gsap.set` has no runtime tween to patch — apply it to the
+  // element directly. An on-timeline `tl.set` mutates its tween (so a re-seek keeps it).
+  return { selector, change: { kind: global ? "global-set" : "set", props } };
+}
+
+/** Single-mutation convenience over {@link setPatchFromUpdateProperties}. */
+export function setPatchFromUpdateProperty(
+  selector: string,
+  mutation: UpdatePropertyMutation,
+  global = false,
+): { selector: string; change: RuntimeTweenChange } {
+  return setPatchFromUpdateProperties(selector, [mutation], global);
+}
+
+/**
+ * Find the studio position-hold `set` for a selector — a `tl.set("#el",{x,y})`
+ * with no duration. This is what a static-element nudge writes/updates.
+ */
+function findPositionSetAnimation(
+  animations: GsapAnimation[],
+  selector: string,
+): GsapAnimation | null {
+  return (
+    animations.find(
+      (a) =>
+        a.method === "set" &&
+        a.targetSelector === selector &&
+        ("x" in a.properties || "y" in a.properties),
+    ) ?? null
+  );
+}
+
+/**
+ * Find the EXISTING static position HOLD to update for a static-hold drag. Not
+ * just a `set`: a degenerate `tl.to("#el",{duration:0,x,y})` (what
+ * remove-all-keyframes leaves behind) is a held position too, and the next drag
+ * must UPDATE it in place rather than append a second `gsap.set` that fights it
+ * (the duplicate-position-write bug). Only zero-duration holds qualify — a
+ * live-duration `to`/`from` is NOT a static hold (and in the static path it's a
+ * stale/phantom parse: re-committing it would resurrect a just-deleted tween).
+ * A keyframed zero-duration `to` is ALSO a static hold (a drag-path corruption
+ * artifact) and must be recognized so the static commit normalizes it.
+ * Prefers a `set` (the canonical static channel) when both forms exist.
+ */
+export function findExistingPositionWrite(
+  animations: GsapAnimation[],
+  selector: string,
+): GsapAnimation | null {
+  const set = findPositionSetAnimation(animations, selector);
+  if (set) return set;
+  return (
+    animations.find(
+      (a) =>
+        a.targetSelector === selector &&
+        a.propertyGroup === "position" &&
+        resolveTweenDuration(a) === 0,
+    ) ?? null
+  );
+}
+
+export function findRotationSetAnimation(
+  animations: GsapAnimation[],
+  selector: string,
+): GsapAnimation | null {
+  return (
+    animations.find(
+      (a) => a.method === "set" && a.targetSelector === selector && "rotation" in a.properties,
+    ) ?? null
+  );
+}
+
+export function findSizeSetAnimation(
+  animations: GsapAnimation[],
+  selector: string,
+): GsapAnimation | null {
+  return (
+    animations.find(
+      (a) =>
+        a.method === "set" &&
+        a.targetSelector === selector &&
+        ("width" in a.properties || "height" in a.properties),
+    ) ?? null
+  );
+}

package/src/hooks/gsapRuntimeBridge.ts

@@ -38,6 +38,23 @@ import {
 import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
 import { roundTo3 } from "../utils/rounding";
 
+// Position channels — used to scope the "has a live position tween?" check so a
+// sibling rotation/scale animation never forces a static position hold into the
+// keyframe branch (which corrupts it into a frozen duration-0 keyframed tween).
+const POSITION_CHANNELS = [
+  "x",
+  "y",
+  "xPercent",
+  "yPercent",
+  "left",
+  "top",
+  // GSAP normalizes translateX/Y to x/y at play time, but readTween reads the
+  // AUTHORED shape — include them so a hand-authored translateX/Y position tween
+  // still counts as a live position tween.
+  "translateX",
+  "translateY",
+];
+
 // ── Property-group tween resolution ───────────────────────────────────────
 
 /**
@@ -185,7 +202,7 @@ export async function tryGsapDragIntercept(
   // `tl.set("#el",{x,y})`, not a keyframe conversion: re-nudge an existing set in
   // place (idempotent), else add a new one. This also covers the stale-cache
   // phantom — committing a set is correct because the element genuinely has no live motion.
-  const hasNonHold = hasNonHoldTweenForElement(iframe, selector);
+  const hasNonHold = hasNonHoldTweenForElement(iframe, selector, undefined, POSITION_CHANNELS);
   // A KEYFRAMED position tween — even one that's currently a flat constant ("hold",
   // e.g. 0% and 100% identical) — is still an animation the user is building, so a
   // drag must add/update a keyframe, NOT fall back to a static `set`. Without this,
@@ -193,7 +210,9 @@ export async function tryGsapDragIntercept(
   // fights the tween (the "drag didn't create a keyframe / didn't persist" bug). The
   // static path is only for elements with NO keyframed position tween (truly static,
   // or just a leftover position-hold `set`).
-  const hasKeyframedPosTween = !!posAnim?.keyframes;
+  // A zero-duration keyframed tween is a static HOLD, not a live animation —
+  // treat it as static so the drag heals it instead of feeding it more keyframes.
+  const hasKeyframedPosTween = !!posAnim?.keyframes && resolveTweenDuration(posAnim) > 0;
   if (!hasNonHold && !hasKeyframedPosTween) {
     const existingSet =
       posAnim && posAnim.method === "set" && posAnim.targetSelector === selector
@@ -362,6 +381,7 @@ export async function tryGsapResizeIntercept(
   const outsideRange = ts !== null && td > 0 && (ct < ts - 0.01 || ct > ts + td + 0.01); // Convert flat tweens to keyframes only for in-range resizes.
   // Outside-range uses the extend path which handles everything atomically.
   if (!outsideRange) {
+    // fallow-ignore-next-line code-duplication
     if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
       const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);
       if (newId) anim = { ...anim, id: newId };
@@ -530,6 +550,7 @@ export async function tryGsapRotationIntercept(
     return true;
   }
 
+  // fallow-ignore-next-line code-duplication
   if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
     const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);
     if (newId) anim = { ...anim, id: newId };