@hyperframes/studio 0.8.106 → 0.8.107

package/dist/player.js

@@ -1,6 +1,6 @@
 import {
   Player
-} from "./chunk-ICTZJPQQ.js";
+} from "./chunk-4OZC426H.js";
 import "./chunk-NCUBAVGK.js";
 import "./chunk-DI4LCJHL.js";
 import "./chunk-PZ5AY32C.js";

package/package.json

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

package/src/App.tsx

@@ -30,6 +30,7 @@ import { useStudioSdkSessions } from "./hooks/useStudioSdkSessions";
 import { useStudioExternalFileChanges } from "./hooks/useStudioExternalFileChanges";
 import { useBlockHandlers } from "./hooks/useBlockHandlers";
 import { useAppHotkeys } from "./hooks/useAppHotkeys";
+import { trackedStudioEdit } from "./utils/studioPendingEdits";
 import { useClipboard } from "./hooks/useClipboard";
 import { deleteSelectedKeyframes } from "./hooks/timelineEditingHelpers";
 import { useCaptionDetection } from "./hooks/useCaptionDetection";
@@ -256,7 +257,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     showToast,
     syncHistoryPreviewAfterApply: previewPersistence.syncHistoryPreviewAfterApply,
     showHistoryRestoreNow: previewPersistence.showHistoryRestoreNow,
-    waitForPendingDomEditSaves: previewPersistence.waitForPendingDomEditSaves,
+    settlePendingEdits: previewPersistence.settlePendingEdits,
     handleCopy,
     handlePaste,
     handleCut,
@@ -315,9 +316,10 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     readOnlyPreview,
   });
   domEditSelectionBridgeRef.current = domEditSession.domEditSelection;
-  handleDomZIndexReorderCommitRef.current = domEditSession.handleDomZIndexReorderCommit;
+  const { handleDomZIndexReorderCommit: zCommit, handleDomEditElementDelete: del } = domEditSession;
+  handleDomZIndexReorderCommitRef.current = trackedStudioEdit(zCommit);
   clearDomSelectionRef.current = domEditSession.clearDomSelection;
-  handleDomEditElementDeleteRef.current = domEditSession.handleDomEditElementDelete;
+  handleDomEditElementDeleteRef.current = trackedStudioEdit(del);
   resetKeyframesRef.current = domEditSession.handleResetSelectedElementKeyframes;
   invalidateGsapCacheRef.current = domEditSession.invalidateGsapCache;
   deleteSelectedKeyframesRef.current = () => deleteSelectedKeyframes(domEditSession);

package/src/agentToolsExport.test.ts

@@ -0,0 +1,8 @@
+import { expect, it } from "vitest";
+import { buildStudioTools, collectStudioLookScene } from "@hyperframes/studio";
+
+it("exports Studio's agent tools for a host's own edit session", () => {
+  const names = buildStudioTools({ current: {} as never }).map((tool) => tool.name);
+  expect(names).toEqual(expect.arrayContaining(["studio_look", "studio_seek"]));
+  expect(typeof collectStudioLookScene).toBe("function");
+});

package/src/captions/keyboard.test.ts

@@ -53,4 +53,10 @@ describe("shouldHandleCaptionNudgeKey", () => {
     expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowUp"), div)).toBe(true);
     expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowUp"), null)).toBe(true);
   });
+
+  it.each(["video", "audio"])("leaves the arrows to a focused <%s controls>", (tag) => {
+    const player = document.createElement(tag);
+    player.setAttribute("controls", "");
+    expect(shouldHandleCaptionNudgeKey(mockKeyboardEvent("ArrowRight"), player)).toBe(false);
+  });
 });

package/src/components/StudioRightPanels.tsx

@@ -62,6 +62,7 @@ export function StudioRightPanels({
     handleDomAttributeQuietCommit,
     handleDomHtmlAttributeCommit,
     handleDomAttributesCommit,
+    handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -210,6 +211,7 @@ export function StudioRightPanels({
         onSetStyle={handleDomStyleCommit}
         onSetAttribute={handleDomAttributeCommit}
         onSetAttributes={handleDomAttributesCommit}
+        onSetAttributeBatch={handleDomAttributeBatchCommit}
         onSetAttributeLive={setAttributeWhileDragging}
         onSetAttributeQuiet={handleDomAttributeQuietCommit}
         onApplyColorGradingScope={handleApplyColorGradingScope}

package/src/components/TimelineToolbar.test.tsx

@@ -211,6 +211,33 @@ describe("TimelineToolbar — keyframes on audio tracks", () => {
   });
 });
 
+describe("TimelineToolbar snap key", () => {
+  let root: ReturnType<typeof createRoot> | null = null;
+  const snapBefore = usePlayerStore.getState().timelineSnapEnabled;
+  afterEach(() => {
+    act(() => root?.unmount());
+    root = null;
+    usePlayerStore.getState().setTimelineSnapEnabled(snapBefore);
+  });
+
+  it("N toggles snapping, but not while a picker that owns typing has focus", () => {
+    root = renderToolbar().root;
+    const pressN = (target: EventTarget) =>
+      act(() => {
+        target.dispatchEvent(new KeyboardEvent("keydown", { key: "n", bubbles: true }));
+      });
+    const before = usePlayerStore.getState().timelineSnapEnabled;
+    const picker = document.createElement("button");
+    picker.setAttribute("role", "combobox");
+    document.body.append(picker);
+
+    pressN(picker);
+    expect(usePlayerStore.getState().timelineSnapEnabled).toBe(before);
+    pressN(document.body);
+    expect(usePlayerStore.getState().timelineSnapEnabled).toBe(!before);
+  });
+});
+
 describe("TimelineToolbar Fit", () => {
   it("shows Fit as a named icon and says whether fit is on", () => {
     const { host, root } = renderToolbar();

package/src/components/TimelineToolbar.tsx

@@ -33,6 +33,7 @@ import { canSplitElement } from "../utils/timelineElementSplit";
 import { useAudioMetersVisible } from "../utils/audioMeterVisibility";
 import { useProjectHasAudio } from "../utils/audioMeterMath";
 import { canAddBeatAt, addBeatAtCompositionTime } from "../utils/beatEditActions";
+import { isTypingTarget } from "../utils/typingTarget";
 
 interface DomEditSessionSlice extends EnableKeyframesSession {
   domEditSelection: DomEditSelection | null;
@@ -196,14 +197,10 @@ export function TimelineToolbar({
   // "N" toggles timeline snapping (industry convention: Resolve/FCP).
   // Skip when typing in an input/contenteditable.
   useEffect(() => {
-    // fallow-ignore-next-line complexity
     const onKeyDown = (e: KeyboardEvent) => {
       if (e.key !== "n" && e.key !== "N") return;
       if (e.metaKey || e.ctrlKey || e.altKey) return;
-      const target = e.target instanceof HTMLElement ? e.target : null;
-      if (target?.isContentEditable) return;
-      const tag = target?.tagName?.toLowerCase() ?? "";
-      if (tag === "input" || tag === "textarea" || tag === "select") return;
+      if (isTypingTarget(e.target)) return;
       const store = usePlayerStore.getState();
       store.setTimelineSnapEnabled(!store.timelineSnapEnabled);
     };

package/src/components/editor/DomEditOverlay.tsx

@@ -32,7 +32,7 @@ import { CanvasContextMenu } from "./CanvasContextMenu";
 import { useInlineTextEditing } from "./useInlineTextEditing";
 import { usePreviewReadOnly } from "./previewReadOnlyContext";
 import { useMountEffect } from "../../hooks/useMountEffect";
-import { noteStudioManualEditSave as noteSave } from "./manualEditsDom";
+import { countStudioManualEditSave as counted } from "./manualEditsDom";
 import type { ZOrderAction, ZOrderPatch } from "./canvasContextMenuZOrder";
 import { getPreviewTargetFromPointer } from "../../utils/studioPreviewHelpers";
 import { logSelect } from "../../utils/selectDebug";
@@ -195,33 +195,27 @@ export const DomEditOverlay = memo(function DomEditOverlay({
     onTextEditingChangeRef.current?.(true);
     return () => onTextEditingChangeRef.current?.(false);
   }, [inlineText.editing]);
-  // Each canvas save is counted before it starts, so a reload requested earlier loads again.
+  // Each canvas save is counted, so a reload requested before it settles loads again.
   const onPathOffsetCommitRef = useRef(onPathOffsetCommit);
-  onPathOffsetCommitRef.current = (sel, ...rest) => {
-    noteSave(sel.element);
-    return onPathOffsetCommit(sel, ...rest);
-  };
+  onPathOffsetCommitRef.current = (sel, ...rest) =>
+    counted(sel.element, () => onPathOffsetCommit(sel, ...rest));
   const onGroupPathOffsetCommitRef = useRef(onGroupPathOffsetCommit);
   onGroupPathOffsetCommitRef.current = (updates) => {
-    if (updates[0]) noteSave(updates[0].selection.element);
-    return onGroupPathOffsetCommit(updates);
+    const save = () => onGroupPathOffsetCommit(updates);
+    return updates[0] ? counted(updates[0].selection.element, save) : save();
   };
   const onBoxSizeCommitRef = useRef(onBoxSizeCommit);
-  onBoxSizeCommitRef.current = (sel, ...rest) => {
-    noteSave(sel.element);
-    return onBoxSizeCommit(sel, ...rest);
-  };
+  onBoxSizeCommitRef.current = (sel, ...rest) =>
+    counted(sel.element, () => onBoxSizeCommit(sel, ...rest));
   const onRotationCommitRef = useRef(onRotationCommit);
-  onRotationCommitRef.current = (sel, next) => {
-    noteSave(sel.element);
-    return onRotationCommit(sel, next);
-  };
+  onRotationCommitRef.current = (sel, next) =>
+    counted(sel.element, () => onRotationCommit(sel, next));
   const onStyleCommitRef = useRef(onStyleCommit);
   onStyleCommitRef.current =
     onStyleCommit &&
     ((property, value) => {
-      if (selectionRef.current) noteSave(selectionRef.current.element);
-      return onStyleCommit(property, value);
+      const save = () => onStyleCommit(property, value);
+      return selectionRef.current ? counted(selectionRef.current.element, save) : save();
     });
   const onBlockedMoveRef = useRef(onBlockedMove);
   onBlockedMoveRef.current = onBlockedMove;

package/src/components/editor/PropertyPanel.tsx

@@ -58,7 +58,6 @@ export {
 export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelProps) {
   const {
     projectId,
-    projectDir,
     assets,
     element,
     multiSelectCount = 0,
@@ -72,8 +71,6 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
     onSetAttribute,
     onSetAttributeLive,
     onApplyColorGradingScope,
-    onSetHtmlAttribute,
-    onRemoveBackground,
     onSetManualOffset,
     onSetManualSize,
     onSetManualRotation,
@@ -374,17 +371,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
           />
         )}
 
-        {sections.media && (
-          <MediaSection
-            projectDir={projectDir}
-            element={element}
-            styles={styles}
-            onSetStyle={onSetStyle}
-            onSetAttribute={onSetAttribute}
-            onSetHtmlAttribute={onSetHtmlAttribute}
-            onRemoveBackground={onRemoveBackground}
-          />
-        )}
+        {sections.media && <MediaSection {...props} element={element} styles={styles} />}
 
         {sections.layout && (
           <Section title="Layout" icon={<Move size={15} />}>

package/src/components/editor/PropertyPanelFlat.tsx

@@ -61,7 +61,6 @@ export function PropertyPanelFlat({
   clipboardCopied,
   onCopyElementInfo,
   projectId,
-  projectDir,
   assets,
   previewIframeRef,
   onClearSelection,
@@ -73,8 +72,6 @@ export function PropertyPanelFlat({
   onSetAttributeLive,
   onSetAttributeQuiet,
   onApplyColorGradingScope,
-  onSetHtmlAttribute,
-  onRemoveBackground,
   onSetText,
   onSetTextFieldStyle,
   onPreviewTextFieldStyle,
@@ -130,6 +127,7 @@ export function PropertyPanelFlat({
   onUpdateKeyframeEase,
   onUpdateSegmentEase,
   onSetAllKeyframeEases,
+  ...forwardedProps
 }: PropertyPanelFlatProps) {
   // PropertyPanel keys this component by selection, so the default is per element.
   const [openGroupId, setOpenGroupId] = useState<string>(() =>
@@ -502,13 +500,12 @@ export function PropertyPanelFlat({
       summary: element.tagName,
       content: (
         <FlatMediaSection
-          projectDir={projectDir}
+          {...forwardedProps}
+          projectId={projectId}
           element={element}
           styles={styles}
           onSetStyle={onSetStyle}
           onSetAttribute={onSetAttribute}
-          onSetHtmlAttribute={onSetHtmlAttribute}
-          onRemoveBackground={onRemoveBackground}
           {...volumeAutomation}
         />
       ),

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

@@ -52,7 +52,7 @@ function AppHotkeyHarness() {
     writeProjectFile: vi.fn(async () => undefined),
     showToast: vi.fn(),
     syncHistoryPreviewAfterApply: vi.fn(async () => undefined),
-    waitForPendingDomEditSaves: vi.fn(async () => undefined),
+    settlePendingEdits: vi.fn(async () => undefined),
     handleCopy: vi.fn(() => false),
     handlePaste: vi.fn(async () => undefined),
     handleCut: vi.fn(async () => false),
@@ -133,6 +133,37 @@ describe("SnapToolbar keyboard shortcuts", () => {
   });
 });
 
+describe("SnapToolbar keys and a focused control", () => {
+  let root: ReturnType<typeof createRoot> | null = null;
+  afterEach(() => {
+    act(() => root?.unmount());
+    root = null;
+  });
+
+  const controls: Array<[string, string, string, string]> = [
+    ["a combobox", "button", "role", "combobox"],
+    ["a select", "select", "name", "font"],
+    ["a switch", "button", "role", "switch"],
+    ["a video player", "video", "controls", ""],
+  ];
+
+  it.each(controls)("leaves S and G alone while %s has focus", (_name, tag, attr, value) => {
+    root = renderToolbar().root;
+    const control = document.body.appendChild(document.createElement(tag));
+    control.setAttribute(attr, value);
+    act(() => {
+      for (const key of ["s", "g"])
+        control.dispatchEvent(
+          new KeyboardEvent("keydown", { key, bubbles: true, cancelable: true }),
+        );
+    });
+
+    const prefs = JSON.parse(window.localStorage.getItem("hf-studio-ui-preferences") ?? "{}");
+    expect(prefs.snapEnabled).not.toBe(false);
+    expect(prefs.gridVisible).not.toBe(true);
+  });
+});
+
 describe("SnapToolbar ruler and safe-margin toggles", () => {
   it.each([
     ["Toggle ruler", "rulerVisible"],

package/src/components/editor/SnapToolbar.tsx

@@ -2,6 +2,7 @@ import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { MagnetStraight, GridFour, Path, Ruler, FrameCorners } from "@phosphor-icons/react";
 import { usePlayerStore } from "../../player/store/playerStore";
 import { usePreviewOverlayContext } from "./PreviewOverlayProvider";
+import { ownsPlainKeys } from "../../utils/typingTarget";
 
 // fallow-ignore-next-line complexity
 export const SnapToolbar = memo(function SnapToolbar() {
@@ -35,10 +36,8 @@ export const SnapToolbar = memo(function SnapToolbar() {
     // fallow-ignore-next-line complexity
     const handleKeyDown = (e: KeyboardEvent) => {
       if (e.defaultPrevented) return;
-      const t = e.target;
-      if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement) return;
-      if (t instanceof HTMLElement && t.isContentEditable) return;
-      if (t instanceof HTMLIFrameElement) return;
+      if (ownsPlainKeys(e.target)) return;
+      if (e.target instanceof HTMLIFrameElement) return;
       if (e.key === "s" && !e.metaKey && !e.ctrlKey && !e.altKey) {
         e.preventDefault();
         updatePrefs({ snapEnabled: !prefs.snapEnabled });

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -219,10 +219,13 @@ export function startGesture(
         // Hold a % translate as the same px now, so a growing box can't drag it along mid-frame.
         if (result.member.plainTranslate) applyManualOffsetDragDraft(result.member, 0, 0);
       } else {
-        manualEditDragToken = beginStudioManualEditGesture(sel.element);
+        manualEditDragToken = beginStudioManualEditGesture(sel.element, "resize");
       }
     } else {
-      manualEditDragToken = beginStudioManualEditGesture(sel.element);
+      manualEditDragToken = beginStudioManualEditGesture(
+        sel.element,
+        kind === "rotate" ? "rotate" : "resize",
+      );
     }
   }
 

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

@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 import { expect, it } from "vitest";
-import { ensureImportedFontFace, injectPreviewImportedFont } from "../../utils/studioFontHelpers";
+import { importedFontFaceCssFor, injectPreviewImportedFont } from "../../utils/studioFontHelpers";
 import { importedFontFaceCss, type ImportedFontAsset } from "./fontAssets";
 
 const face = (file: string, extra: Partial<ImportedFontAsset> = {}): ImportedFontAsset => ({
@@ -30,24 +30,25 @@ it("a face says which weight and style it draws, a variable file its weight rang
   );
 });
 
-it("two weights of one family are both kept in the file and both drawn in the preview", () => {
+it("two weights of one family are both drawn in the preview", () => {
   const bold = face("Poppins-Bold.ttf", { weight: "700", style: "normal" });
   const regular = face("Poppins-Regular.ttf", { weight: "400", style: "normal" });
-  const html = "<html><head></head><body></body></html>";
-  const saved = ensureImportedFontFace(
-    ensureImportedFontFace(html, bold, "index.html"),
-    regular,
-    "index.html",
-  );
-  expect(saved).toContain("font-weight: 700;");
-  expect(saved).toContain("font-weight: 400;");
-  expect(ensureImportedFontFace(saved, bold, "index.html")).toBe(saved);
   injectPreviewImportedFont(document, bold);
   injectPreviewImportedFont(document, regular);
   injectPreviewImportedFont(document, bold);
   expect(document.head.querySelectorAll("style")).toHaveLength(2);
 });
 
+it("the saved rule points at the font from the file that uses it", () => {
+  const bold = face("Poppins-Bold.ttf");
+  expect(importedFontFaceCssFor(bold, "index.html")).toContain(
+    'url("assets/fonts/Poppins/Poppins-Bold.ttf")',
+  );
+  expect(importedFontFaceCssFor(bold, "compositions/intro.html")).toContain(
+    'url("../assets/fonts/Poppins/Poppins-Bold.ttf")',
+  );
+});
+
 it("a weight the browser would drop is left out, and a family cannot close the style block", () => {
   for (const weight of ["0", "5000", "bold", "700;}"])
     expect(importedFontFaceCss(face("x.ttf", { weight }))).not.toContain("font-weight");
@@ -56,14 +57,3 @@ it("a weight the browser would drop is left out, and a family cannot close the s
     "</style>",
   );
 });
-
-it("a file name with a replacement pattern is saved as written, not expanded into the page", () => {
-  const html = "<html><head></head><body>rest</body></html>";
-  const odd = { family: "Cash", path: "assets/Cash$'Font.ttf", url: "/Cash$'Font.ttf" };
-  const saved = ensureImportedFontFace(html, odd, "index.html");
-  expect(saved).toContain("Cash$'Font.ttf");
-  expect(saved.match(/<body>/g)).toHaveLength(1);
-  const again = ensureImportedFontFace(saved, { ...odd, path: "assets/Cash$&.ttf" }, "index.html");
-  expect(again).toContain("Cash$&.ttf");
-  expect(again.match(/<body>/g)).toHaveLength(1);
-});

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

@@ -72,18 +72,22 @@ function pointer(target: Element, type: string, x: number, y: number) {
 }
 
 /** The real player with a two-layer preview, and the real overlay editing it. */
-function mountEditor(group: boolean) {
+function mountEditor(
+  group: boolean,
+  saving: { landed: Promise<void> } = { landed: Promise.resolve() },
+) {
   file = { title: "", sub: "" };
   const live = makePreview(TWO_LAYERS);
   player = mountPlayerWithPreview(live);
   const selections = ["title", "sub"].map((id) => makeSelection(id, byId(live, id)));
+  for (const s of selections) s.capabilities.canApplyManualRotation = true;
+  const saveStyle = (sel: DomEditSelection | null, style: string) =>
+    saving.landed.then(() => void (file = { ...file, [sel?.id ?? "title"]: style }));
   layout.group = group
     ? selections.map((s) => ({ key: s.id, selection: s, element: s.element, rect: RECT }))
     : [];
-  const write = (sel: DomEditSelection, next: { x: number; y: number }) => {
-    file = { ...file, [sel.id!]: `translate: ${next.x}px ${next.y}px` };
-    return Promise.resolve();
-  };
+  const write = (sel: DomEditSelection, next: { x: number; y: number }) =>
+    saveStyle(sel, `translate: ${next.x}px ${next.y}px`);
   const onPathOffsetCommit = vi.fn(write);
   const onGroupPathOffsetCommit = vi.fn(
     async (updates: { selection: DomEditSelection; next: { x: number; y: number } }[]) => {
@@ -109,8 +113,9 @@ function mountEditor(group: boolean) {
             onBlockedMove={() => undefined}
             onPathOffsetCommit={onPathOffsetCommit}
             onGroupPathOffsetCommit={onGroupPathOffsetCommit}
-            onBoxSizeCommit={() => undefined}
-            onRotationCommit={() => undefined}
+            onBoxSizeCommit={(sel, size) => saveStyle(sel, `width: ${size.width}px`)}
+            onRotationCommit={(sel, next) => saveStyle(sel, `rotate: ${next.angle}deg`)}
+            onStyleCommit={(property, value) => saveStyle(selections[0]!, `${property}: ${value}`)}
           />
         </PreviewReadOnlyProvider>,
       ),
@@ -177,18 +182,70 @@ describe("a reload during a drag", () => {
     },
   );
 
-  it("that paints after the drop shows the drop from a fresh load, not the file before it", async () => {
-    const { live, overlay, box } = mountEditor(false);
-    pointer(box, "pointerdown", 150, 150);
-    pointer(overlay, "pointermove", 190, 170);
+  const handle = (overlay: HTMLElement, selector: string) => overlay.querySelector(selector)!;
+  const corner = (overlay: HTMLElement) =>
+    [...overlay.querySelectorAll<HTMLElement>("div.h-4.w-4")].reduce((a, b) =>
+      parseFloat(b.style.left) + parseFloat(b.style.top) >
+      parseFloat(a.style.left) + parseFloat(a.style.top)
+        ? b
+        : a,
+    );
+  // Each edit presses at `from`, drags to `to`, and releases on `on`.
+  const edits = {
+    move: (o: HTMLElement) => ({ press: handle(o, BOX), on: o, from: [150, 150], to: [190, 170] }),
+    resize: (o: HTMLElement) => ({ press: corner(o), on: o, from: [300, 200], to: [340, 220] }),
+    rotate: (o: HTMLElement) => ({
+      press: handle(o, '[aria-label="Rotate selection"]'),
+      on: o,
+      from: [200, 80],
+      to: [270, 150],
+    }),
+    crop: (o: HTMLElement) => {
+      const edge = handle(o, '[aria-label="Crop left"]');
+      return { press: edge, on: edge, from: [100, 150], to: [140, 150] };
+    },
+  };
+
+  function drag(edit: { press: Element; on: Element; from: number[]; to: number[] }) {
+    pointer(edit.press, "pointerdown", edit.from[0]!, edit.from[1]!);
+    pointer(edit.on, "pointermove", edit.to[0]!, edit.to[1]!);
+  }
+
+  it.each(Object.keys(edits) as (keyof typeof edits)[])(
+    "that paints after a %s shows it from a fresh load, not the file before it",
+    async (kind) => {
+      const { live, overlay } = mountEditor(false);
+      const edit = edits[kind](overlay);
+      drag(edit);
+      act(() => api().refreshPlayer());
+      const beforeDrop = served("?_t=1");
+      pointer(edit.on, "pointerup", edit.to[0]!, edit.to[1]!);
+      await settle();
+      expect(file.title, "the edit saved").not.toBe("");
+
+      const requested = await paintShadow(api, beforeDrop);
+      expect(api().iframeRef.current, "the file before the edit").toBe(live);
+      const fresh = served("?_t=2");
+      expect(await paintShadow(api, fresh)).toBeGreaterThan(requested);
+      expect(byId(fresh, "title").getAttribute("style")).toBe(file.title);
+    },
+  );
+
+  it("requested while the drop is still saving shows the drop from a fresh load", async () => {
+    let land: () => void = () => {};
+    const { live, overlay } = mountEditor(false, { landed: new Promise((r) => (land = r)) });
+    const edit = edits.move(overlay);
+    drag(edit);
+    pointer(edit.on, "pointerup", edit.to[0]!, edit.to[1]!);
+    await settle();
     act(() => api().refreshPlayer());
-    const beforeDrop = served("?_t=1");
-    pointer(overlay, "pointerup", 190, 170);
+    const beforeSave = served("?_t=1");
+    await act(async () => land());
     await settle();
     expect(file.title).toBe("translate: 40px 20px");
 
-    const requested = await paintShadow(api, beforeDrop);
-    expect(api().iframeRef.current, "the file before the drop").toBe(live);
+    const requested = await paintShadow(api, beforeSave);
+    expect(api().iframeRef.current, "the file before the save").toBe(live);
     const fresh = served("?_t=2");
     expect(await paintShadow(api, fresh)).toBeGreaterThan(requested);
     expect(byId(fresh, "title").style.getPropertyValue("translate")).toBe("40px 20px");
@@ -222,24 +279,30 @@ describe("every way a drag ends without a drop clears its mark and promotes the
     );
   });
 
-  it("a press that throws before the drag is armed leaves no mark behind", async () => {
-    const editor = mountEditor(false);
-    HTMLElement.prototype.setPointerCapture = () => {
-      throw new Error("capture refused");
-    };
-    const swallow = (event: ErrorEvent) => event.preventDefault();
-    window.addEventListener("error", swallow);
-    try {
-      pointer(editor.box, "pointerdown", 150, 150);
-    } catch {
-      // React may rethrow the handler's error; either way the mark must be gone.
-    } finally {
-      window.removeEventListener("error", swallow);
-    }
-    expect(marked(editor.live.contentDocument!)).toHaveLength(0);
-    const { shadow } = await reloadMidGesture();
-    expect(api().iframeRef.current).toBe(shadow);
-  });
+  it.each([
+    ["one layer", false],
+    ["a group", true],
+  ])(
+    "a press on %s that throws before the drag is armed leaves no mark behind",
+    async (_, group) => {
+      const editor = mountEditor(group);
+      HTMLElement.prototype.setPointerCapture = () => {
+        throw new Error("capture refused");
+      };
+      const swallow = (event: ErrorEvent) => event.preventDefault();
+      window.addEventListener("error", swallow);
+      try {
+        pointer(editor.box, "pointerdown", 150, 150);
+      } catch {
+        // React may rethrow the handler's error; either way the mark must be gone.
+      } finally {
+        window.removeEventListener("error", swallow);
+      }
+      expect(marked(editor.live.contentDocument!)).toHaveLength(0);
+      const { shadow } = await reloadMidGesture();
+      expect(api().iframeRef.current).toBe(shadow);
+    },
+  );
 });
 
 describe("an inline text edit", () => {

package/src/components/editor/gsapAnimatesProperty.ts

@@ -1,3 +1,6 @@
+export const gsapRendersTransform = (el: Element) =>
+  !!(el as { _gsap?: { renderTransform?: unknown } })._gsap?.renderTransform;
+
 /**
  * Checks whether GSAP actively animates one or more CSS/GSAP properties on
  * the given element by inspecting all registered `__timelines`.

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

@@ -1,3 +1,4 @@
+// fallow-ignore-file code-duplication
 import { describe, expect, it, vi } from "vitest";
 import { Window } from "happy-dom";
 import {
@@ -285,7 +286,7 @@ describe("studio manual edits", () => {
     expect(set).not.toHaveBeenCalled();
     expect(tickerTick).not.toHaveBeenCalled();
 
-    beginStudioManualEditGesture(card);
+    beginStudioManualEditGesture(card, "move");
     applyStudioPathOffsetDraft(card, { x: 35, y: -6 });
 
     expect(readStudioPathOffset(card)).toEqual({ x: 35, y: -6 });
@@ -395,8 +396,8 @@ describe("studio manual edits", () => {
     const card = document.getElementById("card") as HTMLElement;
 
     applyStudioPathOffset(card, { x: 40, y: 24 });
-    const firstToken = beginStudioManualEditGesture(card);
-    const secondToken = beginStudioManualEditGesture(card);
+    const firstToken = beginStudioManualEditGesture(card, "move");
+    const secondToken = beginStudioManualEditGesture(card, "move");
     endStudioManualEditGesture(card, firstToken);
 
     // Gesture still active — offset should remain