@hyperframes/studio 0.8.81 → 0.8.83

package/src/components/editor/DomEditOverlay.tsx

@@ -54,6 +54,14 @@ interface DomEditOverlayProps {
   groupSelections?: DomEditSelection[];
   hoverSelection: DomEditSelection | null;
   allowCanvasMovement?: boolean;
+  /** "host": no hover, marquee or box re-select; Enter with nothing focused still opens text. */
+  canvasInput?: "overlay" | "host";
+  onTextEditingChange?: (editing: boolean) => void;
+  /** A click on a single selection's box, in either mode; the event may be the pointerup. */
+  onSelectionBoxClick?: (
+    event: React.MouseEvent<HTMLDivElement>,
+    selection: DomEditSelection,
+  ) => void;
   onCanvasMouseDown: (
     event: React.MouseEvent<HTMLDivElement>,
     options?: PreviewMouseDownOptions,
@@ -117,7 +125,10 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   groupSelections = [],
   hoverSelection,
   allowCanvasMovement = true,
-  onCanvasMouseDown,
+  canvasInput = "overlay",
+  onTextEditingChange,
+  onSelectionBoxClick,
+  onCanvasMouseDown: onCanvasMouseDownProp,
   onCanvasPointerMove,
   onCanvasPointerLeave,
   onSelectionChange,
@@ -133,6 +144,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   onApplyZIndex,
 }: DomEditOverlayProps) {
   const readOnly = usePreviewReadOnly();
+  const hostInput = canvasInput === "host";
   const overlayRef = useRef<HTMLDivElement | null>(null);
   const boxRef = useRef<HTMLDivElement | null>(null);
   const onMarqueeSelectRef = useRef(onMarqueeSelect);
@@ -150,6 +162,13 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 
   const selectionRef = useRef(selection);
   selectionRef.current = selection;
+  const onCanvasMouseDown: typeof onCanvasMouseDownProp = (event, options) => {
+    const sel = selectionRef.current;
+    if (sel && boxRef.current?.contains(event.target as Node | null)) {
+      onSelectionBoxClick?.(event, sel);
+    }
+    if (!hostInput) onCanvasMouseDownProp(event, options);
+  };
 
   // Brief highlight on the sibling a forward/backward z step crossed — drawn
   // in this studio overlay, never in the iframe DOM (see useZOrderCrossedFlash).
@@ -163,7 +182,14 @@ export const DomEditOverlay = memo(function DomEditOverlay({
   hoverSelectionRef.current = hoverSelection;
 
   // Double-click an element to edit its text where it sits.
-  const inlineText = useInlineTextEditing(selectionRef);
+  const inlineText = useInlineTextEditing(selectionRef, { enterFromWindow: hostInput });
+  const onTextEditingChangeRef = useRef(onTextEditingChange);
+  onTextEditingChangeRef.current = onTextEditingChange;
+  useEffect(() => {
+    if (!inlineText.editing) return;
+    onTextEditingChangeRef.current?.(true);
+    return () => onTextEditingChangeRef.current?.(false);
+  }, [inlineText.editing]);
   const onPathOffsetCommitRef = useRef(onPathOffsetCommit);
   onPathOffsetCommitRef.current = onPathOffsetCommit;
   const onGroupPathOffsetCommitRef = useRef(onGroupPathOffsetCommit);
@@ -322,7 +348,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
 
   // fallow-ignore-next-line complexity
   const handleOverlayPointerDown = (event: React.PointerEvent<HTMLDivElement>) => {
-    if (!allowCanvasMovement || event.button !== 0) return;
+    if (!allowCanvasMovement || hostInput || event.button !== 0) return;
     if (event.shiftKey) {
       const shiftIframe = iframeRef.current;
       const candidate = resolveShiftClickCandidate({
@@ -378,9 +404,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           )
         : null;
       if (freshTarget) return;
-      const overlayEl = overlayRef.current;
-      if (overlayEl) {
-        const oRect = overlayEl.getBoundingClientRect();
+      if (overlayRef.current) {
         // Anywhere empty on the overlay starts one, not just inside the frame.
         // An element dragged past the edge sits OUT there in the grey, and a
         // rubber band that refuses to start there cannot reach it — which left
@@ -390,17 +414,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         event.preventDefault();
         event.stopPropagation();
         suppressNextOverlayMouseDownRef.current = true;
-        (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
-        const cx = event.clientX - oRect.left;
-        const cy = event.clientY - oRect.top;
-        marquee.marqueeRef.current = {
-          startX: cx,
-          startY: cy,
-          currentX: cx,
-          currentY: cy,
-          pointerId: event.pointerId,
-          pastThreshold: false,
-        };
+        marquee.begin(event);
         return;
       }
     }
@@ -440,7 +454,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       // Standing aside is the only way the caret below can be reached, and is
       // what keeps selection, drag and marquee from firing mid-edit.
       className={`absolute inset-0 z-10 outline-hidden ${
-        inlineText.editing ? "pointer-events-none" : "pointer-events-auto"
+        inlineText.editing || hostInput ? "pointer-events-none" : "pointer-events-auto"
       }`}
       data-editing-text={inlineText.editing ? "true" : undefined}
       tabIndex={-1}
@@ -451,6 +465,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
         // A pointer gesture supersedes a pending nudge burst — commit it first
         // so the gesture's member snapshot starts from the nudged position.
         flushNudge();
+        suppressNextBoxClickRef.current = false;
         // Not while editing: taking focus back would send the keystroke nowhere.
         if (!inlineText.editing) {
           focusDomEditOverlayElement(event.currentTarget as FocusableDomEditOverlay);
@@ -467,9 +482,9 @@ export const DomEditOverlay = memo(function DomEditOverlay({
       onPointerLeave={() => onCanvasPointerLeaveRef.current()}
       onPointerUp={marquee.onPointerUp}
       onPointerCancel={marquee.onPointerCancel}
-      onContextMenu={handleContextMenu}
+      onContextMenu={hostInput ? undefined : handleContextMenu}
     >
-      {hoverSelection && hoverRect && compRect.width > 0 && (
+      {!hostInput && hoverSelection && hoverRect && compRect.width > 0 && (
         <div
           aria-hidden="true"
           data-dom-edit-hover-box="true"
@@ -516,7 +531,7 @@ export const DomEditOverlay = memo(function DomEditOverlay({
           editing session, which does. */}
       {inlineText.toolbar}
       <OffCanvasIndicators
-        rects={offCanvasRects}
+        rects={hostInput ? [] : offCanvasRects}
         elements={offCanvasElementsRef}
         compRect={compRect}
         selection={selection}

package/src/components/editor/LayersPanel.tsx

@@ -343,7 +343,7 @@ export const LayersPanel = memo(function LayersPanel() {
 
       // ONE undo entry for the whole gesture: the z persist and the timeline
       // lane mirror below share this per-gesture-unique key (same contract as
-      // the canvas menu's wiring in PreviewOverlays).
+      // the canvas menu's wiring in ConnectedDomEditOverlay).
       const coalesceKey = zReorderCoalesceKey(entries, "layer-drag");
       const desiredOrderKeys = desiredBottomToTop.map(
         (l) =>

package/src/components/editor/MarqueeOverlay.tsx

@@ -1,6 +1,6 @@
 import type { Rect } from "../../utils/marqueeGeometry";
 
-interface MarqueeOverlayProps {
+export interface MarqueeOverlayProps {
   /** Elements the marquee currently intersects — outlined live before mouse-up. */
   candidateRects: Rect[];
   /** The marquee drag rectangle itself, or null when not marquee-selecting. */

package/src/components/editor/SnapGuideOverlay.tsx

@@ -15,7 +15,7 @@ const GUIDE_COLOR = "rgba(255, 68, 204, 0.85)";
 const SPACING_COLOR = "rgba(255, 68, 204, 0.6)";
 const SPACING_BG = "rgba(255, 68, 204, 0.15)";
 
-interface SnapGuideOverlayProps {
+export interface SnapGuideOverlayProps {
   snapGuidesRef: RefObject<SnapGuidesState | null>;
   /** Composition rect in overlay space — guide lines span exactly this rect. */
   compositionLeft: number;

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

@@ -1,11 +1,7 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
-import {
-  applyStudioBoxSize,
-  applyStudioPathOffset,
-  readStudioBoxSize,
-  reapplyPositionEditsAfterSeek,
-} from "./manualEditsDom";
+import { applyStudioBoxSize, applyStudioPathOffset, readStudioBoxSize } from "./manualEditsDom";
+import { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";
 import { buildBoxSizePatches, buildPathOffsetPatches } from "./manualEditsDomPatches";
 import { createManualOffsetDragMember, applyManualOffsetDragCommit } from "./manualOffsetDrag";
 import { computeNextResizeAnchor } from "./domEditResizeLocal";

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

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import { clipAudioOnItsClock, readClipClock } from "./clipAudioClock";
+
+const RATE = 48000;
+const sine = (seconds: number, hz: number) =>
+  Float32Array.from({ length: RATE * seconds }, (_, i) => Math.sin((2 * Math.PI * hz * i) / RATE));
+const zeroCrossingsPerSecond = (x: Float32Array) => {
+  let n = 0;
+  for (let i = 1; i < x.length; i += 1) if (x[i - 1]! < 0 !== x[i]! < 0) n += 1;
+  return n / (x.length / RATE);
+};
+
+describe("readClipClock", () => {
+  it("reads the in-point, the rate lane over the constant, and a positive duration", () => {
+    const attrs: Record<string, string> = {
+      "data-playback-start": "1.5",
+      "data-media-start": "9",
+      "data-playback-rate": "3",
+      "data-automation":
+        '{"version":1,"lanes":[{"target":"rate","points":[{"t":0,"v":2},{"t":4,"v":2}]}]}',
+      "data-duration": "4",
+    };
+    const clock = readClipClock((name) => attrs[name]);
+    expect({ ...clock, rate: typeof clock.rate }).toEqual({
+      inPoint: 1.5,
+      rate: "object",
+      duration: 4,
+    });
+    expect(readClipClock((name) => (name === "data-duration" ? "0" : null))).toEqual({
+      inPoint: 0,
+      rate: 1,
+      duration: null,
+    });
+  });
+});
+
+describe("clipAudioOnItsClock", () => {
+  it("is the exact slice the clip plays at rate 1", () => {
+    const samples = sine(4, 440);
+    const out = clipAudioOnItsClock(samples, RATE, { inPoint: 1, rate: 1, duration: 2 });
+    expect(Array.from(out)).toEqual(Array.from(samples.subarray(RATE, 3 * RATE)));
+  });
+
+  it("lasts the clip's duration at 2x, consuming twice as much source", () => {
+    // Each sample holds its own source time, so the output reads back where it was taken from.
+    const samples = Float32Array.from({ length: RATE * 6 }, (_, i) => i / RATE);
+    const out = clipAudioOnItsClock(samples, RATE, { inPoint: 1, rate: 2, duration: 2 });
+    expect({ length: out.length, atOneSecond: Number(out[RATE]!.toFixed(1)) }).toEqual({
+      length: 2 * RATE,
+      atOneSecond: 3,
+    });
+  });
+
+  it("keeps the pitch at 2x and 0.5x", () => {
+    const samples = sine(4, 440);
+    for (const rate of [2, 0.5]) {
+      const out = clipAudioOnItsClock(samples, RATE, { inPoint: 0, rate, duration: 1.5 });
+      expect(zeroCrossingsPerSecond(out) / 880).toBeCloseTo(1, 1);
+    }
+  });
+});

package/src/components/editor/clipAudioClock.ts

@@ -0,0 +1,78 @@
+import {
+  resolveRateSpec,
+  sourceTimeAt,
+  timeAtSourceTime,
+  type RateSpec,
+} from "@hyperframes/core/speed-ramp";
+import {
+  readDataDurationSeconds,
+  readMediaOffsetSeconds,
+  readPlaybackRate,
+  type AttrReader,
+} from "@hyperframes/parsers/media-duration";
+
+/** Where a clip's audio starts in its file, how fast it plays, and for how long (null: to the end). */
+export interface ClipClock {
+  inPoint: number;
+  rate: RateSpec;
+  duration: number | null;
+}
+
+export function readClipClock(getAttr: AttrReader): ClipClock {
+  return {
+    inPoint: readMediaOffsetSeconds(getAttr),
+    rate: resolveRateSpec(getAttr("data-automation"), readPlaybackRate(getAttr)),
+    duration: readDataDurationSeconds(getAttr),
+  };
+}
+
+/** The source samples a clip plays, still on the file's clock. */
+export function clipSourceWindow(
+  samples: Float32Array,
+  sampleRate: number,
+  clock: ClipClock,
+): Float32Array {
+  const from = Math.min(samples.length, Math.floor(clock.inPoint * sampleRate));
+  const to = clock.duration
+    ? Math.min(
+        samples.length,
+        from + Math.ceil(sourceTimeAt(clock.rate, clock.duration) * sampleRate),
+      )
+    : samples.length;
+  return samples.subarray(from, to);
+}
+
+const GRAIN = 4096;
+const HOP = GRAIN / 2;
+const HANN = Float32Array.from(
+  { length: GRAIN },
+  (_, k) => 0.5 - 0.5 * Math.cos((2 * Math.PI * k) / GRAIN),
+);
+
+/**
+ * The audio heard over clip time [0, duration]. Off rate 1, Hann grains overlap-added at the source
+ * time each lands on: pitch kept, like export's atempo, close enough for band and level analysis.
+ */
+export function clipAudioOnItsClock(
+  samples: Float32Array,
+  sampleRate: number,
+  clock: ClipClock,
+): Float32Array {
+  const source = clipSourceWindow(samples, sampleRate, clock);
+  if (clock.rate === 1) return source;
+  const out = new Float32Array(
+    Math.round(timeAtSourceTime(clock.rate, source.length / sampleRate) * sampleRate),
+  );
+  // Grains are not phase-aligned, so off rate 1 the level reads ~1.3 dB low (up to ~3 dB on
+  // tones); a WSOLA stretch would keep it.
+  for (let at = -HOP; at < out.length; at += HOP) {
+    const centre = Math.round(sourceTimeAt(clock.rate, (at + HOP) / sampleRate) * sampleRate);
+    for (let k = 0; k < GRAIN; k += 1) {
+      const o = at + k;
+      const s = centre - HOP + k;
+      if (o < 0 || o >= out.length || s < 0 || s >= source.length) continue;
+      out[o] = (out[o] ?? 0) + (HANN[k] ?? 0) * (source[s] ?? 0);
+    }
+  }
+  return out;
+}

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

@@ -432,6 +432,30 @@ describe("studio manual edits", () => {
     expect(applied).toBe(11);
   });
 
+  it("reapplies once after a seek that applied, and again once a held seek lands", async () => {
+    const previewWindow = new Window() as unknown as Parameters<
+      typeof installStudioManualEditSeekReapply
+    >[0] & { __player: Record<string, unknown> };
+    let landed = () => {};
+    const held = new Promise<void>((resolve) => (landed = resolve));
+    previewWindow.__player = { seek: (time: number) => (time > 5 ? held : undefined) };
+    let applied = 0;
+    installStudioManualEditSeekReapply(previewWindow, () => {
+      applied += 1;
+    });
+    const seek = previewWindow.__player.seek as (time: number) => unknown;
+
+    seek(1);
+    await Promise.resolve();
+    expect(applied).toBe(1);
+    expect(seek(5.5)).toBe(held);
+    expect(applied).toBe(2);
+    landed();
+    await held;
+    await Promise.resolve();
+    expect(applied).toBe(3);
+  });
+
   it("reapplies manual edits while fresh playback is active", () => {
     const window = new Window();
     const frames: FrameRequestCallback[] = [];

package/src/components/editor/manualEdits.ts

@@ -30,9 +30,10 @@ export {
   applyStudioBoxSizeDraft,
   applyStudioRotation,
   applyStudioRotationDraft,
-  reapplyPositionEditsAfterSeek,
 } from "./manualEditsDom";
 
+export { reapplyPositionEditsAfterSeek } from "./manualEditsSeekReapply";
+
 export {
   captureStudioBoxSize,
   captureStudioRotation,
@@ -78,6 +79,7 @@ function wrapSeekReapplyFunction(
   win: StudioManualEditSeekWindow,
   owner: Record<string, unknown> | undefined,
   key: string,
+  reapplyWhenHeldSeekLands = false,
 ): boolean {
   const fn = owner?.[key];
   if (!owner || typeof fn !== "function") return false;
@@ -87,6 +89,8 @@ function wrapSeekReapplyFunction(
   const wrappedSeek = function (this: unknown, ...args: unknown[]): unknown {
     const result = seek.apply(this, args);
     win.__hfStudioManualEditsApply?.();
+    const held = reapplyWhenHeldSeekLands ? (result as PromiseLike<void> | undefined) : undefined;
+    if (typeof held?.then === "function") void held.then(() => win.__hfStudioManualEditsApply?.());
     return result;
   };
   markWrapped(wrappedSeek);
@@ -256,7 +260,7 @@ export function installStudioManualEditSeekReapply(win: Window, apply: () => voi
   studioWin[STUDIO_MANUAL_EDITS_APPLY_PROP] = apply;
 
   const wrappedHfSeek = wrapSeekReapplyFunction(studioWin, studioWin.__hf, "seek");
-  const wrappedPlayerSeek = wrapSeekReapplyFunction(studioWin, studioWin.__player, "seek");
+  const wrappedPlayerSeek = wrapSeekReapplyFunction(studioWin, studioWin.__player, "seek", true);
   const wrappedPlayerRenderSeek = wrapSeekReapplyFunction(
     studioWin,
     studioWin.__player,

package/src/components/editor/manualEditsDom.ts

@@ -33,7 +33,6 @@ import {
   STUDIO_ROTATION_TRANSFORM_ORIGIN,
 } from "./manualEditsTypes";
 import { roundRotationAngle } from "./manualEditsParsing";
-import { applyStudioMotionFromDom } from "./studioMotion";
 import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
 
@@ -533,67 +532,3 @@ export function applyStudioRotationDraft(element: HTMLElement, rotation: { angle
     composeStudioRotationValue(element, `${roundRotationAngle(rotation.angle)}deg`),
   );
 }
-
-/* ── Seek reapply (position + motion) ────────────────────────────── */
-function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
-  const ctor = doc.defaultView?.HTMLElement;
-  if (!ctor) return [];
-  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 {
-  for (const el of queryStudioElements(doc, STUDIO_PATH_OFFSET_ATTR)) {
-    // Unlike size below, the offset channels COMPOSE — applying both doubles the move.
-    if (gsapAnimatesProperty(el, "x", "y")) continue;
-    const x = el.style.getPropertyValue(STUDIO_OFFSET_X_PROP);
-    const y = el.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
-    if (!x && !y) continue;
-    const offset = { x: Number.parseFloat(x) || 0, y: Number.parseFloat(y) || 0 };
-    applyStudioPathOffset(el, offset, { updateBase: false });
-  }
-}
-
-/**
- * Put the studio's committed size back after a seek, GSAP-sized elements included.
- * Size does not compose the way the offset above does: both channels write width
- * and height, so the later write wins on the same number. Standing aside meant
- * nothing held the size while a soft reload reverted the old timeline (GSAP hands
- * back each tween's recorded starting width), so the element sat at its stylesheet
- * size until the new one rendered — the jump after a resize.
- */
-function reapplyBoxSizes(doc: Document): void {
-  for (const el of queryStudioElements(doc, STUDIO_BOX_SIZE_ATTR)) {
-    const w = Number.parseFloat(el.style.getPropertyValue(STUDIO_WIDTH_PROP));
-    const h = Number.parseFloat(el.style.getPropertyValue(STUDIO_HEIGHT_PROP));
-    if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {
-      applyStudioBoxSize(el, { width: w, height: h });
-    }
-  }
-}
-function reapplyRotations(doc: Document): void {
-  for (const el of queryStudioElements(doc, STUDIO_ROTATION_ATTR)) {
-    const angle = Number.parseFloat(el.style.getPropertyValue(STUDIO_ROTATION_PROP));
-    if (Number.isFinite(angle)) {
-      applyStudioRotation(el, { angle });
-    }
-  }
-}
-
-export function reapplyPositionEditsAfterSeek(doc: Document): void {
-  reapplyPathOffsets(doc);
-  reapplyBoxSizes(doc);
-  reapplyRotations(doc);
-  applyStudioMotionFromDom(doc);
-}

package/src/components/editor/manualEditsSeekReapply.ts

@@ -0,0 +1,136 @@
+// Puts Studio's committed edits back after a timeline seek has rendered over them.
+import {
+  STUDIO_BOX_SIZE_ATTR,
+  STUDIO_HEIGHT_PROP,
+  STUDIO_OFFSET_X_PROP,
+  STUDIO_OFFSET_Y_PROP,
+  STUDIO_PATH_OFFSET_ATTR,
+  STUDIO_ROTATION_ATTR,
+  STUDIO_ROTATION_PROP,
+  STUDIO_WIDTH_PROP,
+} from "./manualEditsTypes";
+import { applyStudioBoxSize, applyStudioPathOffset, applyStudioRotation } from "./manualEditsDom";
+import { applyStudioMotionFromDom } from "./studioMotion";
+import { STUDIO_MOTION_ATTR, STUDIO_MOTION_TIMELINE_ID } from "./studioMotionTypes";
+import { gsapAnimatesProperty } from "./gsapAnimatesProperty";
+
+function queryStudioElements(doc: Document, attr: string): HTMLElement[] {
+  const ctor = doc.defaultView?.HTMLElement;
+  if (!ctor) return [];
+  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 {
+  for (const el of queryStudioElements(doc, STUDIO_PATH_OFFSET_ATTR)) {
+    // Unlike size below, the offset channels add up: applying both doubles the move.
+    if (gsapAnimatesProperty(el, "x", "y")) continue;
+    const x = el.style.getPropertyValue(STUDIO_OFFSET_X_PROP);
+    const y = el.style.getPropertyValue(STUDIO_OFFSET_Y_PROP);
+    if (!x && !y) continue;
+    const offset = { x: Number.parseFloat(x) || 0, y: Number.parseFloat(y) || 0 };
+    applyStudioPathOffset(el, offset, { updateBase: false });
+  }
+}
+
+/**
+ * Put the committed size back after a seek, GSAP-sized elements included: both write width and height,
+ * so the later write wins. Standing aside let a soft reload revert to the stylesheet size for a frame.
+ */
+function reapplyBoxSizes(doc: Document): void {
+  for (const el of queryStudioElements(doc, STUDIO_BOX_SIZE_ATTR)) {
+    const w = Number.parseFloat(el.style.getPropertyValue(STUDIO_WIDTH_PROP));
+    const h = Number.parseFloat(el.style.getPropertyValue(STUDIO_HEIGHT_PROP));
+    if (Number.isFinite(w) && Number.isFinite(h) && w > 0 && h > 0) {
+      applyStudioBoxSize(el, { width: w, height: h });
+    }
+  }
+}
+function reapplyRotations(doc: Document): void {
+  for (const el of queryStudioElements(doc, STUDIO_ROTATION_ATTR)) {
+    const angle = Number.parseFloat(el.style.getPropertyValue(STUDIO_ROTATION_PROP));
+    if (Number.isFinite(angle)) {
+      applyStudioRotation(el, { angle });
+    }
+  }
+}
+
+// Every mark a reapply below acts on, the legacy double-prefixed ones included.
+const STUDIO_EDIT_ATTRS = [STUDIO_PATH_OFFSET_ATTR, STUDIO_BOX_SIZE_ATTR, STUDIO_ROTATION_ATTR]
+  .flatMap((attr) => [attr, `data-${attr}`])
+  .concat(STUDIO_MOTION_ATTR);
+// One selector each: Chrome answers a lone attribute selector without walking the DOM, a comma list it walks.
+const STUDIO_EDIT_SELECTORS = STUDIO_EDIT_ATTRS.map((attr) =>
+  attr === STUDIO_MOTION_ATTR ? `[${attr}]` : `[${attr}="true"]`,
+);
+
+interface EditMarkCache {
+  observer: MutationObserver;
+  stale: boolean;
+  has: boolean;
+}
+const editMarkCaches = new WeakMap<Document, EditMarkCache>();
+
+function scanForEditMarks(doc: Document): boolean {
+  return STUDIO_EDIT_SELECTORS.some((selector) => doc.querySelector(selector) !== null);
+}
+
+// Rescans only after a mark attribute or the tree changed, so a seek on a steady film does no lookup.
+function hasEditMarks(doc: Document): boolean {
+  const Observer = doc.defaultView?.MutationObserver;
+  if (!Observer) return scanForEditMarks(doc);
+  let cache = editMarkCaches.get(doc);
+  if (!cache) {
+    const entry: EditMarkCache = {
+      observer: new Observer(() => {
+        entry.stale = true;
+      }),
+      stale: true,
+      has: false,
+    };
+    entry.observer.observe(doc, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: STUDIO_EDIT_ATTRS,
+    });
+    editMarkCaches.set(doc, entry);
+    cache = entry;
+  }
+  // A mark set earlier in this task has not reached the observer callback yet.
+  if (cache.observer.takeRecords().length > 0) cache.stale = true;
+  if (cache.stale) {
+    cache.has = scanForEditMarks(doc);
+    cache.stale = false;
+  }
+  return cache.has;
+}
+
+function hasStudioEdits(doc: Document): boolean {
+  const timelines = (doc.defaultView as { __timelines?: Record<string, unknown> } | null)
+    ?.__timelines;
+  // A motion timeline outlives its marks until the next reapply kills it.
+  return Boolean(timelines?.[STUDIO_MOTION_TIMELINE_ID]) || hasEditMarks(doc);
+}
+
+export function reapplyPositionEditsAfterSeek(doc: Document): void {
+  // Runs after every seek, so several times per playback frame.
+  if (!hasStudioEdits(doc)) return;
+  reapplyPathOffsets(doc);
+  reapplyBoxSizes(doc);
+  reapplyRotations(doc);
+  applyStudioMotionFromDom(doc);
+  // The reapply rewrites the marks it read; the film still has them, so no rescan is due.
+  editMarkCaches.get(doc)?.observer.takeRecords();
+}