@hyperframes/studio 0.6.122-alpha.0 → 0.7.0

package/src/hooks/gsapRuntimeBridge.ts

@@ -13,14 +13,22 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 
 import { readAllAnimatedProperties, readGsapProperty } from "./gsapRuntimeReaders";
+import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
 import {
-  commitGsapPositionFromDrag,
+  commitStaticGsapPosition,
+  commitStaticGsapRotation,
+  commitStaticGsapSize,
+  commitWholePathOffset,
   computeCurrentPercentage,
+  findPositionSetAnimation,
+  findRotationSetAnimation,
+  findSizeSetAnimation,
   materializeIfDynamic,
 } from "./gsapDragCommit";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
 import { getIframeGsap, queryIframeElement, selectorFromSelection } from "./gsapShared";
+import { hasNonHoldTweenForElement } from "./gsapRuntimeKeyframes";
 import { roundTo3 } from "../utils/rounding";
 
 // ── Runtime reads ──────────────────────────────────────────────────────────
@@ -196,17 +204,9 @@ export async function tryGsapDragIntercept(
   iframe: HTMLIFrameElement | null,
   commitMutation: GsapDragCommitCallbacks["commitMutation"],
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
+  options?: { altKey?: boolean },
 ): Promise<boolean> {
   const selector = selectorFromSelection(selection);
-  console.log(
-    "[drag:4] tryGsapDragIntercept",
-    JSON.stringify({
-      sel: selection.id,
-      selector,
-      animCount: animations.length,
-      groups: animations.map((a) => a.propertyGroup).filter(Boolean),
-    }),
-  );
   if (!selector) {
     return false;
   }
@@ -218,44 +218,62 @@ export async function tryGsapDragIntercept(
     commitMutation,
     fetchFallbackAnimations,
   );
-  console.log(
-    "[drag:4] resolveGroupTween('position') →",
-    resolved
-      ? JSON.stringify({ id: resolved.anim.id, group: resolved.anim.propertyGroup })
-      : "null",
-  );
 
   let posAnim = resolved?.anim ?? null;
+  let resolvedAnimations = resolved?.animations ?? animations;
   if (!posAnim) {
     posAnim = findGsapPositionAnimation(animations, selector);
     if (!posAnim && fetchFallbackAnimations) {
       const fresh = await fetchFallbackAnimations();
+      resolvedAnimations = fresh;
       posAnim = findGsapPositionAnimation(fresh, selector);
-      console.log(
-        "[drag:4] findGsapPositionAnimation (fetched) →",
-        posAnim ? posAnim.id : "null",
-        "freshCount:",
-        fresh.length,
-      );
     }
   }
-  if (!posAnim) {
-    return false;
+
+  const gsapPos = readGsapPositionFromIframe(iframe, selector) ?? { x: 0, y: 0 };
+
+  // STATIC case (single source of truth = GSAP timeline): the element has no LIVE
+  // keyframed/tweened position motion. Use the strict non-hold check — a leftover
+  // position-hold `set` (after a delete-all, or a stale parse that lags it) must
+  // NOT count as live motion. Either way the position belongs in a
+  // `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.
+  if (!hasNonHoldTweenForElement(iframe, selector)) {
+    const existingSet =
+      posAnim && posAnim.method === "set" && posAnim.targetSelector === selector
+        ? posAnim
+        : findPositionSetAnimation(resolvedAnimations, selector);
+    await commitStaticGsapPosition(selection, offset, gsapPos, selector, existingSet, {
+      commitMutation,
+      fetchAnimations: fetchFallbackAnimations,
+    });
+    return true;
   }
 
-  const gsapPos = readGsapPositionFromIframe(iframe, selector);
-  if (!gsapPos) {
-    return false;
+  if (!posAnim) return false;
+
+  // Verify the anim ID is still valid in the current file. The React-state
+  // `animations` list can lag behind the file after a prior mutation changed
+  // the tween's position/method (which changes the ID). Re-fetch to get the
+  // current ID and avoid a stale-ID remove that creates duplicate tweens.
+  if (fetchFallbackAnimations) {
+    const fresh = await fetchFallbackAnimations();
+    const freshMatch = fresh.find(
+      (a) =>
+        a.targetSelector === posAnim!.targetSelector && a.propertyGroup === posAnim!.propertyGroup,
+    );
+    if (freshMatch && freshMatch.id !== posAnim.id) {
+      posAnim = freshMatch;
+    }
   }
 
-  console.log(
-    "[drag:4] committing GSAP position drag",
-    JSON.stringify({ posAnimId: posAnim.id, gsapPos }),
-  );
-  await commitGsapPositionFromDrag(selection, posAnim, offset, gsapPos, iframe, selector, {
-    commitMutation,
-    fetchAnimations: fetchFallbackAnimations,
-  });
+  const cbs = { commitMutation, fetchAnimations: fetchFallbackAnimations };
+  if (options?.altKey) {
+    await commitWholePathOffset(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
+  } else {
+    await commitGsapPositionFromDrag(selection, posAnim, offset, gsapPos, iframe, selector, cbs);
+  }
   return true;
 }
 
@@ -303,33 +321,14 @@ export async function tryGsapResizeIntercept(
   );
 
   let anim = resolved?.anim ?? null;
-  if (!anim) {
-    // No size-group tween exists — create one. Use the element's timing
-    // from any existing animation, or fall back to element data attributes.
-    const refAnim = animations[0];
-    const elStart =
-      refAnim?.resolvedStart ?? (Number.parseFloat(selection.dataAttributes?.start ?? "0") || 0);
-    const elDuration = Number.parseFloat(selection.dataAttributes?.duration ?? "5") || 5;
-    const ct = usePlayerStore.getState().currentTime;
-    const pct = elDuration > 0 ? Math.round(((ct - elStart) / elDuration) * 1000) / 10 : 0;
+  if (!anim || anim.method === "set") {
     const sel = selectorFromSelection(selection);
     if (!sel) return false;
-    await commitMutation(
-      selection,
-      {
-        type: "add-with-keyframes",
-        targetSelector: sel,
-        position: roundTo3(elStart),
-        duration: roundTo3(elDuration),
-        keyframes: [
-          {
-            percentage: Math.max(0, Math.min(100, pct)),
-            properties: { width: Math.round(size.width), height: Math.round(size.height) },
-          },
-        ],
-      },
-      { label: "Resize (new size keyframe)", softReload: true },
-    );
+    const sizeSet = anim?.method === "set" ? anim : findSizeSetAnimation(animations, sel);
+    await commitStaticGsapSize(selection, size, sel, sizeSet, {
+      commitMutation,
+      fetchAnimations: fetchFallbackAnimations,
+    });
     return true;
   }
 
@@ -374,6 +373,13 @@ export async function tryGsapResizeIntercept(
         { type: "convert-to-keyframes", animationId: anim.id, resolvedFromValues },
         { label: "Convert to keyframes for resize", skipReload: true, coalesceKey },
       );
+      if (fetchFallbackAnimations) {
+        const fresh = await fetchFallbackAnimations();
+        const refreshed = fresh.find(
+          (a) => a.targetSelector === anim!.targetSelector && a.keyframes,
+        );
+        if (refreshed) anim = refreshed;
+      }
     }
   }
 
@@ -463,6 +469,9 @@ export async function tryGsapRotationIntercept(
   commitMutation: GsapDragCommitCallbacks["commitMutation"],
   fetchFallbackAnimations?: () => Promise<GsapAnimation[]>,
 ): Promise<boolean> {
+  const selector = selectorFromSelection(selection);
+  if (!selector) return false;
+
   // Resolve the rotation-group tween, splitting legacy mixed tweens if needed.
   const resolved = await resolveGroupTween(
     "rotation",
@@ -471,6 +480,7 @@ export async function tryGsapRotationIntercept(
     commitMutation,
     fetchFallbackAnimations,
   );
+  const resolvedAnimations = resolved?.animations ?? animations;
 
   // Fallback: legacy heuristic for hand-written scripts
   let anim = resolved?.anim ?? null;
@@ -481,20 +491,27 @@ export async function tryGsapRotationIntercept(
       anim = fresh.find((a) => "rotation" in a.properties || a.keyframes) ?? null;
     }
   }
-  if (!anim) return false;
 
-  const selector = selectorFromSelection(selection);
-  if (!selector) return false;
+  // `angle` is the ABSOLUTE target rotation resolved by the gesture (gsap base +
+  // pointer sweep) or the inspector — so it IS the new rotation. No base re-add: the
+  // gesture's live preview already gsap.set this value (single source of truth).
+  const newRotation = Math.round(angle);
 
-  let gsapRotation = 0;
-  const gsap = getIframeGsap(iframe);
-  const rotEl = gsap ? queryIframeElement(iframe, selector) : null;
-  if (gsap && rotEl) {
-    gsapRotation = Number(gsap.getProperty(rotEl, "rotation")) || 0;
+  // STATIC case (single source of truth = GSAP timeline): no rotation tween, so the
+  // angle belongs in a `tl.set("#el",{rotation})`, not a keyframe conversion —
+  // mirroring the static position set. Idempotent: re-rotate updates an existing
+  // rotation set in place, else add a new one. This replaces the old
+  // `--hf-studio-rotation` CSS-var fallback (the same dual-channel bug class).
+  if (!anim) {
+    const existingSet = findRotationSetAnimation(resolvedAnimations, selector);
+    await commitStaticGsapRotation(selection, newRotation, selector, existingSet, {
+      commitMutation,
+      fetchAnimations: fetchFallbackAnimations,
+    });
+    return true;
   }
 
   const pct = computeCurrentPercentage(selection, anim);
-  const newRotation = Math.round(gsapRotation + angle);
 
   if (anim.hasUnresolvedKeyframes || anim.hasUnresolvedSelector) {
     const newId = await materializeIfDynamic(anim, iframe, commitMutation, selection);

package/src/hooks/gsapRuntimeKeyframes.test.ts

@@ -1,5 +1,133 @@
 import { describe, expect, it } from "vitest";
-import { arcPathFromMotionPathValue } from "./gsapRuntimeKeyframes";
+import {
+  arcPathFromMotionPathValue,
+  hasNonHoldTweenForElement,
+  readRuntimeKeyframes,
+} from "./gsapRuntimeKeyframes";
+
+// Build a fake preview iframe whose runtime timeline holds the given child tweens
+// and resolves `selector` to `el`.
+function fakeIframe(el: { id: string }, children: unknown[], now?: number): HTMLIFrameElement {
+  const timeline = {
+    getChildren: () => children,
+    duration: () => 14.6,
+    ...(now != null ? { time: () => now } : {}),
+  };
+  return {
+    contentWindow: { __timelines: { "index.html": timeline } },
+    contentDocument: { querySelector: (sel: string) => (sel === `#${el.id}` ? el : null) },
+  } as unknown as HTMLIFrameElement;
+}
+
+describe("readRuntimeKeyframes — zero-duration set must not shadow the keyframed tween", () => {
+  const el = { id: "puck-b" };
+  const holdSet = {
+    targets: () => [el],
+    // `data` is the STUDIO_HOLD_MARKER sentinel ("hf-hold") from core's gsapParser.
+    // TODO(core follow-up): re-export STUDIO_HOLD_MARKER via the @hyperframes/core/
+    // gsap-parser subpath so this fixture can import the const instead of the literal.
+    vars: { x: 0, y: 0, data: "hf-hold" },
+    duration: () => 0,
+    startTime: () => 0,
+  };
+  const kfTween = {
+    targets: () => [el],
+    vars: {
+      keyframes: [
+        { x: 0, y: 0 },
+        { x: -180, y: -60 },
+        { x: -320, y: 40 },
+        { x: -460, y: -20 },
+      ],
+      duration: 3.4,
+      ease: "power1.inOut",
+    },
+    duration: () => 3.4,
+    startTime: () => 1.0,
+  };
+
+  it("reads all 4 keyframes from the to() even when a hold-set precedes it", () => {
+    const read = readRuntimeKeyframes(fakeIframe(el, [holdSet, kfTween]), "#puck-b");
+    expect(read?.keyframes).toHaveLength(4);
+  });
+
+  it("returns null when the element only has a zero-duration set (no real motion)", () => {
+    expect(readRuntimeKeyframes(fakeIframe(el, [holdSet]), "#puck-b")).toBeNull();
+  });
+});
+
+describe("readRuntimeKeyframes — multiple tweens pick the one under the playhead", () => {
+  const el = { id: "puck-a" };
+  // Two non-overlapping gesture recordings → two separate keyframed tweens.
+  const gestureA = {
+    targets: () => [el],
+    vars: {
+      keyframes: [
+        { x: 0, y: 0 },
+        { x: -100, y: 50 },
+      ],
+      duration: 2.03,
+    },
+    duration: () => 2.03,
+    startTime: () => 1.033, // range [1.033, 3.063]
+  };
+  const gestureB = {
+    targets: () => [el],
+    vars: {
+      keyframes: [
+        { x: 10, y: 10 },
+        { x: 20, y: 20 },
+        { x: 30, y: 30 },
+      ],
+      duration: 1.129,
+    },
+    duration: () => 1.129,
+    startTime: () => 3.342, // range [3.342, 4.471]
+  };
+
+  it("playhead inside the SECOND tween reads the second tween (not the first)", () => {
+    const read = readRuntimeKeyframes(fakeIframe(el, [gestureA, gestureB], 3.373), "#puck-a");
+    expect(read?.keyframes).toHaveLength(3); // gestureB
+  });
+
+  it("playhead inside the FIRST tween reads the first tween", () => {
+    const read = readRuntimeKeyframes(fakeIframe(el, [gestureA, gestureB], 2.0), "#puck-a");
+    expect(read?.keyframes).toHaveLength(2); // gestureA
+  });
+
+  it("playhead outside every range falls back to the first keyframed tween", () => {
+    const read = readRuntimeKeyframes(fakeIframe(el, [gestureA, gestureB], 9.0), "#puck-a");
+    expect(read?.keyframes).toHaveLength(2); // gestureA (first)
+  });
+});
+
+describe("hasNonHoldTweenForElement — strict live-tween existence (drag stale-parse guard)", () => {
+  const el = { id: "puck-b" };
+  const holdSet = {
+    targets: () => [el],
+    vars: { x: 0, y: 0, data: "hf-hold" },
+    duration: () => 0,
+    startTime: () => 0,
+  };
+  const liveTween = {
+    targets: () => [el],
+    vars: { x: -120, y: 40, duration: 1 },
+    duration: () => 1,
+    startTime: () => 1,
+  };
+
+  it("true when a non-hold tween targets the element", () => {
+    expect(hasNonHoldTweenForElement(fakeIframe(el, [liveTween]), "#puck-b")).toBe(true);
+  });
+
+  it("false when only a zero-duration hold/set remains (post delete-all)", () => {
+    expect(hasNonHoldTweenForElement(fakeIframe(el, [holdSet]), "#puck-b")).toBe(false);
+  });
+
+  it("false when the element has no tweens at all", () => {
+    expect(hasNonHoldTweenForElement(fakeIframe(el, []), "#puck-b")).toBe(false);
+  });
+});
 
 describe("arcPathFromMotionPathValue", () => {
   it("builds arc config from object form { path, curviness }", () => {

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -12,20 +12,23 @@ import { buildArcPath, type ArcPathConfig } from "@hyperframes/core/gsap-parser-
 import { parsePercentageKeyframes, toAbsoluteTime } from "./gsapShared";
 import { roundTo3 } from "../utils/rounding";
 
-interface RuntimeTween {
+export interface RuntimeTween {
   targets?: () => Element[];
   vars?: Record<string, unknown>;
   duration?: () => number;
   startTime?: () => number;
+  invalidate?: () => RuntimeTween;
 }
 
-interface RuntimeTimeline {
+export interface RuntimeTimeline {
   getChildren?: (deep: boolean) => RuntimeTween[];
   duration?: () => number;
+  time?: () => number;
+  invalidate?: () => RuntimeTimeline;
 }
 
 type Pct = { percentage: number; properties: Record<string, number | string> };
-type ReadTween = { keyframes: Pct[]; easeEach?: string; arcPath?: ArcPathConfig };
+export type ReadTween = { keyframes: Pct[]; easeEach?: string; arcPath?: ArcPathConfig };
 
 export interface RuntimeKeyframeEntry {
   keyframes: Pct[];
@@ -71,6 +74,17 @@ function isXY(p: unknown): p is { x: number; y: number } {
   return !!p && typeof (p as any).x === "number" && typeof (p as any).y === "number";
 }
 
+/**
+ * A tween we must skip when reading keyframes: a zero-duration `set`/hold (incl.
+ * the studio pre-keyframe position hold, tagged `data: STUDIO_HOLD_MARKER`).
+ * These sit before the real keyframed tween and otherwise shadow it — `readTween`
+ * would fall back to a degenerate 2-point flat path from the set's values, hiding
+ * the actual multi-keyframe motion. `!(duration > 0)` also rejects NaN durations.
+ */
+function isZeroDurationSet(duration: number): boolean {
+  return !(duration > 0);
+}
+
 /** Coordinates + curviness from a live `vars.motionPath` value (object or array form), or null. */
 function coordsFromMotionPath(mp: unknown): {
   coords: Array<{ x: number; y: number }>;
@@ -149,6 +163,95 @@ function tweenTiming(tween: RuntimeTween): { start: number; duration: number } {
   };
 }
 
+export interface ResolvedRuntimeTween {
+  /** The live GSAP tween targeting the selector. */
+  tween: RuntimeTween;
+  /** The composition timeline that owns it. */
+  timeline: RuntimeTimeline;
+}
+
+/**
+ * Whether a tween's `vars` carry at least one of `channels` as an OWN property.
+ * Used to disambiguate co-located `set`s: an element can have separate
+ * `tl.set("#el",{x,y})` and `tl.set("#el",{rotation})` tweens, and a position
+ * patch must land on the {x,y} set — never the rotation-only one.
+ */
+function varsCarryChannel(vars: Record<string, unknown> | undefined, channels: string[]): boolean {
+  if (!vars) return false;
+  for (const ch of channels) {
+    if (Object.prototype.hasOwnProperty.call(vars, ch)) return true;
+  }
+  return false;
+}
+
+/**
+ * Resolve the live tween targeting `selector` using the SAME all-timelines scan
+ * `readRuntimeKeyframes` uses, so read and write agree on "which tween". With
+ * `kind: "keyframe"` it skips zero-duration `set`s and prefers the tween whose
+ * range contains the playhead (matching the reader). With `kind: "set"` it picks
+ * the zero-duration `set`/hold instead. Returns null when none matches.
+ *
+ * `channels` disambiguates co-located `set`s (CHANNEL-BLIND otherwise): when
+ * provided with `kind: "set"`, a set carrying ONE of those channels wins, and a
+ * set carrying ONLY disjoint channels is skipped (so patching {x,y} never lands
+ * on a rotation-only set). With no channel-matching set, it falls back to the
+ * first matching set (back-compat). `channels` is ignored for `kind: "keyframe"`.
+ */
+export function resolveRuntimeTween(
+  iframe: HTMLIFrameElement | null,
+  selector: string,
+  kind: "keyframe" | "set",
+  compositionId?: string,
+  channels?: string[],
+): ResolvedRuntimeTween | null {
+  const timelines = timelinesOf(iframe);
+  if (!timelines) return null;
+
+  let targetEl: Element | null = null;
+  try {
+    targetEl = iframe?.contentDocument?.querySelector(selector) ?? null;
+  } catch {
+    return null;
+  }
+  if (!targetEl) return null;
+
+  const tlIds = compositionId
+    ? [compositionId]
+    : Object.keys(timelines).filter((k) => typeof timelines[k]?.getChildren === "function");
+
+  const wantChannels = kind === "set" && channels && channels.length > 0 ? channels : null;
+
+  let first: ResolvedRuntimeTween | null = null;
+  let channelMatch: ResolvedRuntimeTween | null = null;
+  for (const tlId of tlIds) {
+    const timeline = timelines[tlId];
+    if (!timeline?.getChildren) continue;
+    const now = typeof timeline.time === "function" ? timeline.time() : null;
+    for (const tween of timeline.getChildren(true)) {
+      if (!tween.vars || !matchesElement(tween, targetEl)) continue;
+      const dur = typeof tween.duration === "function" ? tween.duration() : 0;
+      const isSet = !(dur > 0);
+      if (kind === "set" ? !isSet : isSet) continue;
+      if (wantChannels) {
+        if (varsCarryChannel(tween.vars, wantChannels)) {
+          if (channelMatch === null) channelMatch = { tween, timeline };
+        } else if (first === null) {
+          // A set carrying only disjoint channels: remember as last-resort
+          // fallback, but never prefer it over a channel-matching set.
+          first = { tween, timeline };
+        }
+        continue;
+      }
+      if (first === null) first = { tween, timeline };
+      if (kind === "keyframe" && now != null) {
+        const start = typeof tween.startTime === "function" ? tween.startTime() : 0;
+        if (now >= start - 1e-3 && now <= start + dur + 1e-3) return { tween, timeline };
+      }
+    }
+  }
+  return channelMatch ?? first;
+}
+
 /**
  * Read keyframes (incl. motionPath arcs) for one selector from the live timeline.
  * Returns tween-relative percentages; callers convert to clip-relative.
@@ -160,10 +263,6 @@ export function readRuntimeKeyframes(
 ): ReadTween | null {
   const timelines = timelinesOf(iframe);
   if (!timelines) return null;
-  const tlId = compositionId || Object.keys(timelines)[0];
-  if (!tlId) return null;
-  const timeline = timelines[tlId];
-  if (!timeline?.getChildren) return null;
 
   let targetEl: Element | null = null;
   try {
@@ -173,12 +272,84 @@ export function readRuntimeKeyframes(
   }
   if (!targetEl) return null;
 
+  // Search the element's OWN composition timeline. With inlined subcompositions the
+  // preview has multiple timelines (one per composition), and the element belongs to
+  // exactly one — so we can't assume the first key (order isn't stable across soft
+  // reloads, which delete+re-add the rebuilt key). Scan every timeline for tweens
+  // targeting this element; only its composition's timeline matches. An explicit
+  // compositionId still pins the search. (`__proxied` and other non-timeline markers
+  // are skipped by the getChildren guard.)
+  const tlIds = compositionId
+    ? [compositionId]
+    : Object.keys(timelines).filter((k) => typeof timelines[k]?.getChildren === "function");
+  if (tlIds.length === 0) return null;
+
+  // The element can have MORE THAN ONE keyframed tween at disjoint time ranges
+  // (e.g. two non-overlapping gesture recordings → two separate `to()`s). The
+  // overlay must draw the segment under the PLAYHEAD, not blindly the first one
+  // — otherwise recording a second gesture leaves the path stuck on the first.
+  let firstRead: ReadTween | null = null;
+  for (const tlId of tlIds) {
+    const timeline = timelines[tlId];
+    if (!timeline?.getChildren) continue;
+    const now = typeof timeline.time === "function" ? timeline.time() : null;
+    for (const tween of timeline.getChildren(true)) {
+      if (!tween.vars || !matchesElement(tween, targetEl)) continue;
+      const dur = typeof tween.duration === "function" ? tween.duration() : 0;
+      if (isZeroDurationSet(dur)) continue; // skip hold/set tweens (see isZeroDurationSet)
+      const read = readTween(tween.vars);
+      if (!read) continue;
+      if (firstRead === null) firstRead = read;
+      // Prefer the tween whose [start, start+dur] contains the playhead.
+      if (now != null) {
+        const start = typeof tween.startTime === "function" ? tween.startTime() : 0;
+        if (now >= start - 1e-3 && now <= start + dur + 1e-3) return read;
+      }
+    }
+  }
+  // Playhead outside every tween's range (or timeline has no clock): the element
+  // still has motion, so fall back to the first keyframed tween.
+  return firstRead;
+}
+
+/**
+ * Whether the live timeline has at least one NON-HOLD tween (non-zero duration,
+ * not the studio position-hold `set`) targeting `selector`. Stricter than a
+ * truthy `readRuntimeKeyframes`: that returns a flat read for any property-bearing
+ * tween, so it can't distinguish a real animation from a leftover hold/marker.
+ * The drag's stale-parse guard needs this exact distinction — after a delete-all
+ * only a hold may remain, and resurrecting the deleted tween from the stale parse
+ * must be avoided.
+ */
+export function hasNonHoldTweenForElement(
+  iframe: HTMLIFrameElement | null,
+  selector: string,
+  compositionId?: string,
+): boolean {
+  const timelines = timelinesOf(iframe);
+  if (!timelines) return false;
+  const tlId =
+    compositionId ||
+    Object.keys(timelines).find((k) => typeof timelines[k]?.getChildren === "function");
+  if (!tlId) return false;
+  const timeline = timelines[tlId];
+  if (!timeline?.getChildren) return false;
+
+  let targetEl: Element | null = null;
+  try {
+    targetEl = iframe?.contentDocument?.querySelector(selector) ?? null;
+  } catch {
+    return false;
+  }
+  if (!targetEl) return false;
+
   for (const tween of timeline.getChildren(true)) {
     if (!tween.vars || !matchesElement(tween, targetEl)) continue;
-    const read = readTween(tween.vars);
-    if (read) return read;
+    const dur = typeof tween.duration === "function" ? tween.duration() : 0;
+    if (isZeroDurationSet(dur)) continue; // skip hold/set tweens (see isZeroDurationSet)
+    if (readTween(tween.vars)) return true;
   }
-  return null;
+  return false;
 }
 
 /** Convert tween-relative keyframes to clip-relative % using the element's clip dims. */
@@ -217,9 +388,10 @@ function addScanEntry(
   clipById?: ClipDims,
 ): void {
   if (!tween.targets || !tween.vars) return;
+  const { start, duration } = tweenTiming(tween);
+  if (isZeroDurationSet(duration)) return; // skip hold/set tweens (see isZeroDurationSet)
   const read = readTween(tween.vars);
   if (!read) return;
-  const { start, duration } = tweenTiming(tween);
   for (const target of tween.targets()) {
     const id = (target as HTMLElement).id;
     if (id && !result.has(id)) result.set(id, buildEntry(read, start, duration, clipById?.get(id)));