@hyperframes/studio 0.8.81 → 0.8.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.81",
+  "version": "0.8.82",
   "description": "",
   "repository": {
     "type": "git",
@@ -52,12 +52,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.81",
-    "@hyperframes/parsers": "0.8.81",
-    "@hyperframes/player": "0.8.81",
-    "@hyperframes/sdk": "0.8.81",
-    "@hyperframes/shader-transitions": "0.8.81",
-    "@hyperframes/studio-server": "0.8.81"
+    "@hyperframes/core": "0.8.82",
+    "@hyperframes/parsers": "0.8.82",
+    "@hyperframes/player": "0.8.82",
+    "@hyperframes/sdk": "0.8.82",
+    "@hyperframes/shader-transitions": "0.8.82",
+    "@hyperframes/studio-server": "0.8.82"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -73,7 +73,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.81"
+    "@hyperframes/producer": "0.8.82"
   },
   "peerDependencies": {
     "react": "19",

package/src/components/TimelineHistoryButtons.dom.test.tsx

@@ -16,8 +16,10 @@ const handleUndo = vi.fn();
 const handleRedo = vi.fn();
 const trackStudioEvent = vi.fn();
 
+const studioShell = { editHistory, handleUndo, handleRedo };
+let shell: typeof studioShell | null = studioShell;
 vi.mock("../contexts/StudioContext", () => ({
-  useStudioShellContext: () => ({ editHistory, handleUndo, handleRedo }),
+  useStudioShellContextOptional: () => shell,
 }));
 vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent }));
 
@@ -31,6 +33,7 @@ beforeEach(() => {
     undoLabel: undefined,
     redoLabel: undefined,
   });
+  shell = studioShell;
   vi.clearAllMocks();
 });
 
@@ -115,3 +118,37 @@ it("classifies Undo and Redo for the hotkey filters at their new location (KTD13
     expect(shouldIgnorePlaybackShortcutTarget(el), label).toBe(true);
   }
 });
+
+it("takes a host's history props over the shell's", async () => {
+  editHistory.canUndo = true;
+  editHistory.redoLabel = "shell move";
+  const onUndo = vi.fn();
+  const onRedo = vi.fn();
+  const host = mount(
+    <TimelineHistoryButtons
+      canUndo={false}
+      canRedo
+      redoLabel="host trim"
+      onUndo={onUndo}
+      onRedo={onRedo}
+    />,
+  );
+
+  expect(button(host, "Undo").disabled).toBe(true);
+  act(() => button(host, "Redo").focus());
+  await act(async () => {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  });
+  expect(document.querySelector('[role="tooltip"]')?.textContent).toContain("Redo host trim");
+  click(button(host, "Redo"));
+
+  expect(onRedo).toHaveBeenCalledTimes(1);
+  expect(handleRedo).not.toHaveBeenCalled();
+});
+
+it("keeps a button disabled when it has no handler, whatever canUndo/canRedo say", () => {
+  shell = null;
+  const host = mount(<TimelineHistoryButtons canUndo canRedo />);
+
+  for (const label of ["Undo", "Redo"]) expect(button(host, label).disabled).toBe(true);
+});

package/src/components/TimelineHistoryButtons.tsx

@@ -1,4 +1,4 @@
-import { useStudioShellContext } from "../contexts/StudioContext";
+import { useStudioShellContextOptional } from "../contexts/StudioContext";
 import { RotateCcw, RotateCw } from "../icons/SystemIcons";
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { historyTooltipLabel } from "../utils/studioHelpers";
@@ -7,13 +7,14 @@ import { Tooltip } from "./ui";
 
 interface HistoryButtonProps {
   action: "undo" | "redo";
-  enabled: boolean;
+  can: boolean;
   label: string | undefined;
-  onClick: () => Promise<void> | void;
+  onClick: (() => Promise<void> | void) | undefined;
 }
 
-function HistoryButton({ action, enabled, label, onClick }: HistoryButtonProps) {
+function HistoryButton({ action, can, label, onClick }: HistoryButtonProps) {
   const Icon = action === "undo" ? RotateCcw : RotateCw;
+  const enabled = Boolean(onClick) && can;
   return (
     <Tooltip label={historyTooltipLabel(action, label)}>
       <button
@@ -23,7 +24,7 @@ function HistoryButton({ action, enabled, label, onClick }: HistoryButtonProps)
         className={enabled ? flatIdle : flatDisabled}
         onClick={() => {
           trackStudioEvent("toolbar_action", { action });
-          void onClick();
+          void onClick?.();
         }}
       >
         <Icon size={16} />
@@ -32,22 +33,33 @@ function HistoryButton({ action, enabled, label, onClick }: HistoryButtonProps)
   );
 }
 
-/** Undo and Redo, on the one edit-history path the shell already owns. */
-export function TimelineHistoryButtons() {
-  const { editHistory, handleUndo, handleRedo } = useStudioShellContext();
+export interface TimelineHistoryButtonsProps {
+  canUndo?: boolean;
+  canRedo?: boolean;
+  undoLabel?: string;
+  redoLabel?: string;
+  onUndo?: () => Promise<void> | void;
+  onRedo?: () => Promise<void> | void;
+}
+
+/** Undo and Redo: a host's props win, else the shell's edit history. */
+export function TimelineHistoryButtons(props: TimelineHistoryButtonsProps) {
+  const shell = useStudioShellContextOptional();
+  const onUndo = props.onUndo ?? shell?.handleUndo;
+  const onRedo = props.onRedo ?? shell?.handleRedo;
   return (
     <>
       <HistoryButton
         action="undo"
-        enabled={editHistory.canUndo}
-        label={editHistory.undoLabel}
-        onClick={handleUndo}
+        can={props.canUndo ?? shell?.editHistory.canUndo ?? false}
+        label={props.undoLabel ?? shell?.editHistory.undoLabel}
+        onClick={onUndo}
       />
       <HistoryButton
         action="redo"
-        enabled={editHistory.canRedo}
-        label={editHistory.redoLabel}
-        onClick={handleRedo}
+        can={props.canRedo ?? shell?.editHistory.canRedo ?? false}
+        label={props.redoLabel ?? shell?.editHistory.redoLabel}
+        onClick={onRedo}
       />
     </>
   );

package/src/components/TimelineToolbar.test.tsx

@@ -12,7 +12,7 @@ import { AudioMeterStrip } from "./nle/AudioMeterStrip";
 import { TimelineToolbar } from "./TimelineToolbar";
 
 vi.mock("../contexts/StudioContext", () => ({
-  useStudioShellContext: () => ({
+  useStudioShellContextOptional: () => ({
     previewIframeRef: { current: null },
     editHistory: { canUndo: false, canRedo: false },
     handleUndo: vi.fn(),
@@ -214,3 +214,11 @@ describe("TimelineToolbar audio meters", () => {
     }
   });
 });
+
+describe("TimelineToolbar add beat", () => {
+  it("shows Add beat by default, as Studio does", () => {
+    const { host, root } = renderToolbar();
+    expect(host.querySelector('button[aria-label="Add beat at playhead"]')).not.toBeNull();
+    act(() => root.unmount());
+  });
+});

package/src/components/TimelineToolbar.tsx

@@ -19,7 +19,7 @@ import { Tooltip } from "./ui";
 import { AudioMetersIcon } from "./icons/AudioMetersIcon";
 import { RippleEditIcon } from "./icons/RippleEditIcon";
 import { flatActive, flatBtn, flatDisabled, flatIdle } from "./timelineToolbarStyles";
-import { TimelineHistoryButtons } from "./TimelineHistoryButtons";
+import { TimelineHistoryButtons, type TimelineHistoryButtonsProps } from "./TimelineHistoryButtons";
 import { Scissors } from "../icons/SystemIcons";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "./editor/domEditingTypes";
@@ -33,9 +33,11 @@ interface DomEditSessionSlice extends EnableKeyframesSession {
   selectedGsapAnimations: GsapAnimation[];
 }
 
-interface TimelineToolbarProps {
+export interface TimelineToolbarProps {
   domEditSession?: DomEditSessionSlice;
   onSplitElement?: (element: TimelineElement, splitTime: number) => void;
+  history?: TimelineHistoryButtonsProps;
+  showAddBeat?: boolean;
 }
 
 interface KeyframeToggleState {
@@ -127,7 +129,12 @@ function useKeyframeToggle(session?: DomEditSessionSlice) {
 }
 
 // fallow-ignore-next-line complexity
-export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineToolbarProps) {
+export function TimelineToolbar({
+  domEditSession,
+  onSplitElement,
+  history,
+  showAddBeat = true,
+}: TimelineToolbarProps) {
   const activeTool = usePlayerStore((s) => s.activeTool);
   const setActiveTool = usePlayerStore((s) => s.setActiveTool);
   const timelineSnapEnabled = usePlayerStore((s) => s.timelineSnapEnabled);
@@ -195,7 +202,7 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
     <div className="border-b border-neutral-800/60">
       <div className="flex items-center justify-between px-2 py-0.5">
         <div className="flex items-center gap-0.5">
-          <TimelineHistoryButtons />
+          <TimelineHistoryButtons {...history} />
           <Tooltip label="Selection tool (V)">
             <button
               type="button"
@@ -416,7 +423,8 @@ export function TimelineToolbar({ domEditSession, onSplitElement }: TimelineTool
               );
             })()}
           {(() => {
-            // Always rendered (CapCut-style): before beat analysis loads (or when
+            if (!showAddBeat) return null;
+            // Rendered whenever shown (CapCut-style): before beat analysis loads (or when
             // the project has no analyzed music) the button fades to a disabled
             // state instead of unmounting, so the toolbar layout never shifts.
             const canAdd = beatAnalysisReady && canAddBeatAt(currentTime);

package/src/components/editor/BlockParamsPanel.tsx

@@ -3,6 +3,7 @@ import type { BlockParam } from "@hyperframes/core/registry";
 import { useFileManagerContextOptional } from "../../contexts/FileManagerContext";
 import { useStudioPlaybackContext } from "../../contexts/StudioContext";
 import { trackBlockParamCommit } from "../../telemetry/events";
+import { serializeStudioFileMutation } from "../../utils/studioFileMutationCoordinator";
 
 interface BlockParamsPanelProps {
   blockName: string;
@@ -77,7 +78,11 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
           trackBlockParamCommit({ tone: "error", blockName, key });
           return;
         }
-        await fileManager.writeProjectFile(compositionPath, content.replace(matcher, nextValue));
+        await fileManager.writeProjectFile(
+          compositionPath,
+          content.replace(matcher, nextValue),
+          content,
+        );
         appliedRef.current[key] = nextValue;
         setCommitState({ tone: "saved" });
         trackBlockParamCommit({ tone: "saved", blockName, key });
@@ -90,16 +95,15 @@ export const BlockParamsPanel = memo(function BlockParamsPanel({
     [fileManager, compositionPath, setRefreshKey, blockName],
   );
 
-  // Commits are serialized: two params committing concurrently would each
-  // read-modify-write the same file and the second write would drop the first.
-  const commitChainRef = useRef<Promise<void>>(Promise.resolve());
+  // Commits join the file's queue: two read-modify-writes of one file must not interleave.
   const commitParam = useCallback(
-    (key: string, nextValue: string) => {
-      const run = commitChainRef.current.then(() => commitParamNow(key, nextValue));
-      commitChainRef.current = run.catch(() => undefined);
-      return run;
-    },
-    [commitParamNow],
+    (key: string, nextValue: string) =>
+      fileManager
+        ? serializeStudioFileMutation(fileManager.writeProjectFile, compositionPath, () =>
+            commitParamNow(key, nextValue),
+          )
+        : Promise.resolve(),
+    [commitParamNow, compositionPath, fileManager],
   );
 
   const handleChange = useCallback(

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/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();
+}