@hyperframes/studio 0.8.97 → 0.8.99

package/src/components/editor/manualEditsDom.ts

@@ -32,9 +32,9 @@ import {
   STUDIO_ORIGINAL_TRANSFORM_DISPLAY_ATTR,
   STUDIO_ROTATION_TRANSFORM_ORIGIN,
 } from "./manualEditsTypes";
-import { roundRotationAngle } from "./manualEditsParsing";
 import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
+import { roundTo3, roundToLayoutPx } from "../../utils/rounding";
 
 /* ── Gesture tracking ─────────────────────────────────────────────── */
 let studioManualEditGestureId = 0;
@@ -203,8 +203,8 @@ function writeStudioPathOffsetVars(
 ): void {
   prepareStudioPathOffsetBase(element, options.updateBase ?? true);
   element.setAttribute(STUDIO_PATH_OFFSET_ATTR, "true");
-  element.style.setProperty(STUDIO_OFFSET_X_PROP, `${Math.round(offset.x)}px`);
-  element.style.setProperty(STUDIO_OFFSET_Y_PROP, `${Math.round(offset.y)}px`);
+  element.style.setProperty(STUDIO_OFFSET_X_PROP, `${roundTo3(offset.x)}px`);
+  element.style.setProperty(STUDIO_OFFSET_Y_PROP, `${roundTo3(offset.y)}px`);
 }
 
 /* ── Path offset apply ────────────────────────────────────────────── */
@@ -325,7 +325,7 @@ export function applyStudioPathOffsetDraft(
   // Non-GSAP elements: use CSS translate as before.
   element.style.setProperty(
     "translate",
-    composeTranslateValue(element, `${Math.round(offset.x)}px`, `${Math.round(offset.y)}px`),
+    composeTranslateValue(element, `${roundTo3(offset.x)}px`, `${roundTo3(offset.y)}px`),
   );
   stripGsapTranslateFromTransform(element);
 }
@@ -342,7 +342,7 @@ function readParentFlexBasisPixels(
   if (display !== "flex" && display !== "inline-flex") return null;
 
   const direction = readStyleOrComputed(parent, "flex-direction").trim();
-  return Math.round(Math.max(1, direction.startsWith("column") ? size.height : size.width));
+  return roundToLayoutPx(Math.max(1, direction.startsWith("column") ? size.height : size.width));
 }
 
 function restoreStaleStudioScaleResize(element: HTMLElement): void {
@@ -417,8 +417,8 @@ function writeStudioBoxSizeVars(
   }
 
   element.setAttribute(STUDIO_BOX_SIZE_ATTR, "true");
-  element.style.setProperty(STUDIO_WIDTH_PROP, `${Math.round(Math.max(1, size.width))}px`);
-  element.style.setProperty(STUDIO_HEIGHT_PROP, `${Math.round(Math.max(1, size.height))}px`);
+  element.style.setProperty(STUDIO_WIDTH_PROP, `${roundToLayoutPx(Math.max(1, size.width))}px`);
+  element.style.setProperty(STUDIO_HEIGHT_PROP, `${roundToLayoutPx(Math.max(1, size.height))}px`);
 }
 
 function applyStudioBoxSizeDimensions(
@@ -428,8 +428,8 @@ function applyStudioBoxSizeDimensions(
   writeStudioBoxSizeVars(element, size);
   restoreStaleStudioScaleResize(element);
 
-  const width = Math.round(Math.max(1, size.width));
-  const height = Math.round(Math.max(1, size.height));
+  const width = roundToLayoutPx(Math.max(1, size.width));
+  const height = roundToLayoutPx(Math.max(1, size.height));
   element.style.setProperty("box-sizing", "border-box");
   element.style.setProperty("width", `${width}px`);
   element.style.setProperty("height", `${height}px`);
@@ -457,10 +457,26 @@ export function applyStudioBoxSize(
   applyStudioBoxSizeDimensions(element, size);
 }
 
+// The element's box before a resize draft first changed it; gone once the resize saves or is restored.
+const boxSizeDraftBases = new WeakMap<HTMLElement, { width: number; height: number }>();
+
+export function readStudioBoxSizeDraftBase(
+  element: HTMLElement,
+): { width: number; height: number } | null {
+  return boxSizeDraftBases.get(element) ?? null;
+}
+
+export function forgetStudioBoxSizeDraftBase(element: HTMLElement): void {
+  boxSizeDraftBases.delete(element);
+}
+
 export function applyStudioBoxSizeDraft(
   element: HTMLElement,
   size: { width: number; height: number },
 ): void {
+  if (!boxSizeDraftBases.has(element)) {
+    boxSizeDraftBases.set(element, { width: element.offsetWidth, height: element.offsetHeight });
+  }
   promoteInlineForTransform(element);
   applyStudioBoxSizeDimensions(element, size);
 }
@@ -509,7 +525,7 @@ function writeStudioRotationVars(
 ): void {
   prepareStudioRotationBase(element, options.updateBase ?? true);
   element.setAttribute(STUDIO_ROTATION_ATTR, "true");
-  element.style.setProperty(STUDIO_ROTATION_PROP, `${roundRotationAngle(rotation.angle)}deg`);
+  element.style.setProperty(STUDIO_ROTATION_PROP, `${roundTo3(rotation.angle)}deg`);
   element.style.setProperty("transform-origin", STUDIO_ROTATION_TRANSFORM_ORIGIN);
 }
 
@@ -529,6 +545,6 @@ export function applyStudioRotationDraft(element: HTMLElement, rotation: { angle
   element.setAttribute(STUDIO_ROTATION_DRAFT_ATTR, "true");
   element.style.setProperty(
     "rotate",
-    composeStudioRotationValue(element, `${roundRotationAngle(rotation.angle)}deg`),
+    composeStudioRotationValue(element, `${roundTo3(rotation.angle)}deg`),
   );
 }

package/src/components/editor/manualEditsParsing.ts

@@ -3,10 +3,6 @@ export function finiteNumber(value: unknown): number | null {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
 
-export function roundRotationAngle(angle: number): number {
-  return Math.round(angle * 10) / 10;
-}
-
 /* ── File path utilities ──────────────────────────────────────────── */
 function normalizeStudioFileChangePath(path: string): string {
   return path

package/src/components/editor/manualEditsSnapshot.ts

@@ -3,6 +3,7 @@ import {
   styleUsesStudioSize,
   styleUsesStudioRotation,
   restoreInlineDisplay,
+  forgetStudioBoxSizeDraftBase,
 } from "./manualEditsDom";
 import {
   STUDIO_OFFSET_X_PROP,
@@ -114,6 +115,7 @@ function restoreStyleProperty(element: HTMLElement, property: string, value: str
 }
 
 export function restoreStudioBoxSize(element: HTMLElement, previous: StudioBoxSizeSnapshot): void {
+  forgetStudioBoxSizeDraftBase(element);
   restoreStyleProperty(element, "width", previous.width);
   restoreStyleProperty(element, "height", previous.height);
   restoreStyleProperty(element, "min-width", previous.minWidth);
@@ -290,6 +292,7 @@ export function clearStudioRotation(element: HTMLElement): void {
 }
 
 export function clearStudioBoxSize(element: HTMLElement): void {
+  forgetStudioBoxSizeDraftBase(element);
   if (
     element.hasAttribute(STUDIO_BOX_SIZE_ATTR) ||
     styleUsesStudioSize(element.style.getPropertyValue("width")) ||

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

@@ -13,6 +13,7 @@ import {
   type ManualOffsetDragMatrix,
 } from "./manualOffsetDrag";
 import { STUDIO_OFFSET_X_PROP, STUDIO_OFFSET_Y_PROP } from "./manualEdits";
+import { computeDraggedGsapPosition } from "../../hooks/draggedGsapPosition";
 
 function expectMatrixClose(actual: ManualOffsetDragMatrix, expected: ManualOffsetDragMatrix): void {
   expect(actual.a).toBeCloseTo(expected.a, 6);
@@ -449,6 +450,19 @@ describe("GSAP-element drag — dot-a flies regressions", () => {
   });
 });
 
+describe("sub-pixel drags", () => {
+  it("draft and commit both land the exact fractional position", () => {
+    const { element, sets, member } = makeGsapDot();
+    const m = member();
+    applyManualOffsetDragDraft(m, 10.25, -3.5);
+    const draft = sets.at(-1)!;
+    expect(draft).toEqual({ x: m.baseGsap.x + 10.25, y: m.baseGsap.y - 3.5 });
+    const offset = applyManualOffsetDragCommit(m, 10.25, -3.5);
+    const { newX, newY } = computeDraggedGsapPosition(element, offset, m.baseGsap);
+    expect({ x: newX, y: newY }).toEqual(draft);
+  });
+});
+
 describe("a stylesheet translate after a committed GSAP drag", () => {
   function draggedTitle(css: string, oldOffsetChannel = false, withGsap = true) {
     const window = new Window();

package/src/components/editor/propertyPanelFont.test.tsx

@@ -2,13 +2,32 @@
 
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { FontFamilyField } from "./propertyPanelFont";
+import { sortFontOptions } from "./propertyPanelHelpers";
+
+vi.mock("./propertyPanelHelpers", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("./propertyPanelHelpers")>();
+  return { ...actual, sortFontOptions: vi.fn(actual.sortFontOptions) };
+});
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+// The font APIs are stubbed and every family is off the Google lists, so no test reaches the network.
+beforeEach(() => {
+  vi.stubGlobal(
+    "fetch",
+    vi.fn(async (url: string) => ({
+      ok: true,
+      json: async () => ({ fonts: url.includes("google") ? ["Roboto Slab"] : ["Arial"] }),
+    })),
+  );
+});
+
 afterEach(() => {
   document.body.innerHTML = "";
+  document.head.innerHTML = "";
+  vi.unstubAllGlobals();
 });
 
 describe("FontFamilyField flat trigger", () => {
@@ -17,14 +36,38 @@ describe("FontFamilyField flat trigger", () => {
     document.body.append(host);
     const root = createRoot(host);
     act(() => {
-      root.render(
-        <FontFamilyField flat value="JetBrains Mono" importedFonts={[]} onCommit={vi.fn()} />,
-      );
+      root.render(<FontFamilyField flat value="Georgia" importedFonts={[]} onCommit={vi.fn()} />);
     });
     const trigger = host.querySelector<HTMLButtonElement>('[data-flat-font-trigger="true"]');
     expect(trigger).not.toBeNull();
     expect(trigger?.className).not.toContain("border-neutral-800");
-    expect(host.textContent).toContain("JetBrains Mono");
+    expect(host.textContent).toContain("Georgia");
     act(() => root.unmount());
   });
 });
+
+describe("FontFamilyField font list", () => {
+  it("builds the list only while the dropdown is open", async () => {
+    vi.mocked(sortFontOptions).mockClear();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    const render = (value: string) =>
+      root.render(<FontFamilyField flat value={value} importedFonts={[]} onCommit={vi.fn()} />);
+    try {
+      await act(async () => render("Arial"));
+      // The font lists arrive and the value changes while the dropdown is closed, as during a drag.
+      await act(async () => render("Georgia"));
+      expect(sortFontOptions).not.toHaveBeenCalled();
+
+      const trigger = host.querySelector<HTMLButtonElement>('[data-flat-font-trigger="true"]');
+      await act(async () => trigger?.click());
+      expect(sortFontOptions).toHaveBeenCalledTimes(1);
+      expect(host.textContent).toContain("Roboto Slab");
+      expect(document.head.querySelector('link[href*="fonts.googleapis.com"]')).toBeNull();
+    } finally {
+      act(() => root.unmount());
+      host.remove();
+    }
+  });
+});

package/src/components/editor/propertyPanelFont.tsx

@@ -276,6 +276,7 @@ export function FontFamilyField({
   );
 
   const options = useMemo(() => {
+    if (!open) return [];
     const documentFonts = collectDocumentFontFamilies();
     const googleSet = new Set(googleFonts.map((f) => f.toLowerCase()));
     const taggedLocal = localFonts.map(
@@ -294,7 +295,7 @@ export function FontFamilyField({
         ...DEFAULT_FONT_FAMILIES.map((f): FontOption => ({ family: f, source: "System" })),
       ]),
     );
-  }, [currentFamily, googleFonts, localFonts, projectFontAssets]);
+  }, [open, currentFamily, googleFonts, localFonts, projectFontAssets]);
 
   const filteredOptions = useMemo(() => {
     const matches = options.filter((o) => fontMatchesQuery(o.family, query));

package/src/components/editor/shiftDragAxisLock.test.tsx

@@ -193,7 +193,6 @@ describe("a shift press on a selected box starts the drag", () => {
         selectionKey="box"
         groupSelectionCount={0}
         gestures={spies as never}
-        onBoxMouseDown={vi.fn()}
         onBoxClick={vi.fn()}
       />
     ));
@@ -207,7 +206,6 @@ describe("a shift press on a selected box starts the drag", () => {
         allowBodyDrag
         groupCanMove={groupCanMove}
         gestures={spies as never}
-        onBoxMouseDown={vi.fn()}
         onBoxClick={vi.fn()}
       />
     ));

package/src/components/nle/TimelinePane.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from "react";
 import { Timeline } from "../../player";
 import type { TimelineElement, TimelineTimeRange } from "../../player";
+import type { TimelineProps } from "../../player/components/TimelineTypes";
 import type { BlockedTimelineEditIntent } from "../../player/components/timelineEditing";
 import { AudioMeterStrip } from "./AudioMeterStrip";
 import { useTimelineEditContext } from "../../contexts/TimelineEditContext";
@@ -45,6 +46,7 @@ export interface TimelinePaneProps {
   onPasteClip?: () => Promise<void>;
   onDuplicateClip?: () => Promise<boolean>;
   canPasteClip?: () => boolean;
+  clipMenuItems?: TimelineProps["clipMenuItems"];
 }
 
 export function TimelinePane({
@@ -64,6 +66,7 @@ export function TimelinePane({
   onPasteClip,
   onDuplicateClip,
   canPasteClip,
+  clipMenuItems,
 }: TimelinePaneProps) {
   const {
     seek,
@@ -119,6 +122,7 @@ export function TimelinePane({
               onPasteClip={onPasteClip}
               onDuplicateClip={onDuplicateClip}
               canPasteClip={canPasteClip}
+              clipMenuItems={clipMenuItems}
             />
           </div>
           <AudioMeterStrip />

package/src/hooks/domSelectionTestHarness.ts

@@ -12,6 +12,14 @@ export function installReactActEnvironment(): void {
   });
 }
 
+export function withInlineLayoutBox<T extends HTMLElement>(el: T): T {
+  Object.defineProperties(el, {
+    offsetWidth: { get: () => Number.parseFloat(el.style.width) || 0 },
+    offsetHeight: { get: () => Number.parseFloat(el.style.height) || 0 },
+  });
+  return el;
+}
+
 /** Mount a React element into a fresh detached host and return its root. */
 export function mountReactHarness(node: React.ReactElement): Root {
   const host = document.createElement("div");

package/src/hooks/draggedGsapPosition.ts

@@ -1,3 +1,5 @@
+import { roundTo3 } from "../utils/rounding";
+
 /**
  * Drag → GSAP position math, shared by the commit path
  * (`gsapDragCommit.commitGsapPositionFromDrag` / `commitStaticGsapPosition`) and
@@ -39,8 +41,8 @@ export function computeDraggedGsapPosition(
   const baseGsapX = Number.isFinite(parsedBaseX) ? parsedBaseX : fallbackBase.x;
   const baseGsapY = Number.isFinite(parsedBaseY) ? parsedBaseY : fallbackBase.y;
   return {
-    newX: Math.round(baseGsapX + adjX),
-    newY: Math.round(baseGsapY + adjY),
+    newX: roundTo3(baseGsapX + adjX),
+    newY: roundTo3(baseGsapY + adjY),
     baseGsapX,
     baseGsapY,
   };

package/src/hooks/gsapDragCommit.ts

@@ -10,7 +10,7 @@ import {
 } from "../components/editor/manualEditsTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
-import { roundTo3 } from "../utils/rounding";
+import { roundTo3, roundToLayoutPx } from "../utils/rounding";
 import { computeElementPercentage, writeTargetSelector } from "./gsapShared";
 import { computeDraggedGsapPosition } from "./draggedGsapPosition";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
@@ -289,8 +289,8 @@ export async function commitStaticGsapSize(
   existingSet: GsapAnimation | null,
   callbacks: GsapDragCommitCallbacks,
 ): Promise<void> {
-  const width = Math.round(size.width);
-  const height = Math.round(size.height);
+  const width = roundToLayoutPx(size.width);
+  const height = roundToLayoutPx(size.height);
   if (existingSet) {
     await callbacks.commitMutation(
       selection,
@@ -320,7 +320,7 @@ export async function commitStaticGsapSize(
 
 /** Rounded `n` when it's a positive finite number, else `fallback`. */
 function positiveOr(n: number, fallback: number): number {
-  return Number.isFinite(n) && n > 0 ? Math.round(n) : fallback;
+  return Number.isFinite(n) && n > 0 ? roundToLayoutPx(n) : fallback;
 }
 
 /**
@@ -366,8 +366,8 @@ export async function commitKeyframedSizeFromResize(
   const td = resolveTweenDuration(animatedTween);
   if (!(td > 0)) return false;
 
-  const newW = Math.round(size.width);
-  const newH = Math.round(size.height);
+  const newW = roundToLayoutPx(size.width);
+  const newH = roundToLayoutPx(size.height);
   const prior = resolvePriorSize(sizeSet, selection.element, newW, newH);
 
   const ct = usePlayerStore.getState().currentTime;

package/src/hooks/gsapEditOutcome.ts

@@ -67,6 +67,12 @@ export function assertGsapEditPersisted(outcome: GsapEditOutcome): void {
   if (outcome.status === "blocked") throw new GsapEditBlockedError(outcome.reason, outcome.detail);
 }
 
+/** A move only a shared tween positions is saved on the element itself; a blocked one throws. */
+export async function saveMove(outcome: GsapEditOutcome, saveOnElement: () => Promise<void>) {
+  if (outcome.status === "element-offset") return saveOnElement();
+  assertGsapEditPersisted(outcome);
+}
+
 function assertGsapAnimationDirectlyEditable(animation: GsapAnimation): void {
   const editability = editabilityForProvenance(animation.provenance);
   if (editability === "unroll") throw new GsapEditBlockedError("unroll-required");

package/src/hooks/gsapResizeIntercept.ts

@@ -31,7 +31,7 @@ import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { commitGsapPositionFromDrag } from "./gsapDragPositionCommit";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
-import { roundTo3 } from "../utils/rounding";
+import { roundTo3, roundToLayoutPx } from "../utils/rounding";
 import { resolveGroupTween } from "./gsapRuntimeBridge";
 import { logResize } from "../utils/resizeDebug";
 import { animationWritesAnyProperty, type GsapEditOutcome } from "./gsapEditOutcome";
@@ -287,8 +287,8 @@ export async function tryGsapResizeIntercept(
     }
   } else {
     resizeProps = {
-      width: Math.round(size.width),
-      height: Math.round(size.height),
+      width: roundToLayoutPx(size.width),
+      height: roundToLayoutPx(size.height),
     };
   }
   // Finalize a scale-route commit: tear down the gesture's inline width/height
@@ -358,8 +358,8 @@ export async function tryGsapResizeIntercept(
     // persisted file agree exactly (commitStaticGsapPosition composes the same
     // rounded value from this delta).
     const corrected = {
-      x: Math.round(base.x + residual.x),
-      y: Math.round(base.y + residual.y),
+      x: roundTo3(base.x + residual.x),
+      y: roundTo3(base.y + residual.y),
     };
     logResize("scale-finalize", {
       dropPoint: scaleDraftDropPoint,

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -319,6 +319,17 @@ describe("tryGsapRotationIntercept — instant holds", () => {
     expect(commitMutation).not.toHaveBeenCalled();
   });
 
+  it("commits the exact angle the draft showed", async () => {
+    const commitMutation = vi.fn();
+
+    await tryGsapRotationIntercept(selection, 75.25, [], null, commitMutation);
+    expect(commitMutation).toHaveBeenCalledWith(
+      selection,
+      expect.objectContaining({ type: "add", properties: { rotation: 75.25 } }),
+      expect.anything(),
+    );
+  });
+
   it("does not let an unrelated helper-authored skew tween block 2D rotation", async () => {
     const helperSkew = {
       id: "#puck-b-to-rotation",

package/src/hooks/gsapRuntimeBridge.ts

@@ -27,6 +27,7 @@ import { commitWholePropertyOffset } from "./gsapWholePropertyOffsetCommit";
 import { isGestureTransactionCommit } from "./gestureTransaction";
 import { tweenReach, tweensForThisElement } from "./gsapTweenReach";
 import { resolveTweenDuration } from "../utils/globalTimeCompiler";
+import { roundTo3 } from "../utils/rounding";
 import type { GsapDragCommitCallbacks } from "./gsapDragCommit";
 import { isInstantHold, selectorFromSelection, writeTargetSelector } from "./gsapShared";
 import {
@@ -446,7 +447,7 @@ export async function tryGsapRotationIntercept(
   // `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);
+  const newRotation = roundTo3(angle);
   // 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

package/src/hooks/gsapRuntimeKeyframes.test.ts

@@ -167,6 +167,13 @@ describe("hasNonHoldTweenForElement — strict live-tween existence (drag stale-
     expect(hasNonHoldTweenForElement(fakeIframe(el, [liveTween]), "#puck-b")).toBe(true);
   });
 
+  it("true when the tween sits in a later timeline (a soft reload re-adds main last)", () => {
+    const iframe = fakeIframe(el, []);
+    const win = iframe.contentWindow as unknown as { __timelines: Record<string, unknown> };
+    win.__timelines.main = { getChildren: () => [liveTween] };
+    expect(hasNonHoldTweenForElement(iframe, "#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);
   });

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -200,7 +200,7 @@ function varsCarryChannel(vars: Record<string, unknown> | undefined, channels: s
 /**
  * Like `varsCarryChannel` but for a keyframe tween: the channels live inside the
  * keyframe steps (`vars.keyframes`), not as own props of `vars`. Handles the object
- * form (`{ "0%": {...} }`) and the array form (`[{...}, ...]`).
+ * form (`{ "0%": {...} }`), the array form (`[{...}, ...]`) and the object-of-arrays form.
  */
 function keyframeVarsCarryChannel(
   vars: Record<string, unknown> | undefined,
@@ -208,6 +208,8 @@ function keyframeVarsCarryChannel(
 ): boolean {
   const kf = vars?.keyframes;
   if (!kf || typeof kf !== "object") return false;
+  if (!Array.isArray(kf) && channels.some((ch) => Object.prototype.hasOwnProperty.call(kf, ch)))
+    return true;
   const steps = Array.isArray(kf) ? kf : Object.values(kf);
   return steps.some(
     (step) =>
@@ -375,8 +377,9 @@ export function readRuntimeKeyframes(
 }
 
 /**
- * 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
+ * Whether any live timeline has at least one NON-HOLD tween (non-zero duration,
+ * not the studio position-hold `set`) targeting `selector`. Every timeline is read:
+ * a soft reload re-adds the rebuilt composition's key last. 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
@@ -387,37 +390,47 @@ export function readRuntimeKeyframes(
  * rotation/scale tween doesn't make a static position hold enter the keyframe
  * branch.
  */
-// fallow-ignore-next-line complexity
 export function hasNonHoldTweenForElement(
   iframe: HTMLIFrameElement | null,
   selector: string,
   compositionId?: string,
   channels?: 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;
+  return !!targetEl && hasNonHoldTween(timelinesOf(iframe), targetEl, channels, compositionId);
+}
 
-  // fallow-ignore-next-line code-duplication
-  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 && (!channels || readCarriesChannel(read, channels))) return true;
+/** `hasNonHoldTweenForElement` for an element in hand, read from its own window's timelines. */
+export function elementHasNonHoldTween(el: Element, channels?: string[]): boolean {
+  const win = el.ownerDocument.defaultView as {
+    __timelines?: Record<string, RuntimeTimeline>;
+  } | null;
+  return hasNonHoldTween(win?.__timelines ?? null, el, channels);
+}
+
+// fallow-ignore-next-line complexity
+function hasNonHoldTween(
+  timelines: Record<string, RuntimeTimeline> | null,
+  targetEl: Element,
+  channels?: string[],
+  compositionId?: string,
+): boolean {
+  if (!timelines) return false;
+  for (const tlId of compositionId ? [compositionId] : Object.keys(timelines)) {
+    // fallow-ignore-next-line code-duplication
+    for (const tween of timelines[tlId]?.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)
+      if (channels && keyframeVarsCarryChannel(tween.vars, channels)) return true;
+      const read = readTween(tween.vars);
+      if (read && (!channels || readCarriesChannel(read, channels))) return true;
+    }
   }
   return false;
 }