@hyperframes/studio 0.8.106 → 0.8.108

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/carveOutput.ts

@@ -0,0 +1,54 @@
+import {
+  HF_AUDIO_FX_ATTR,
+  serializeAudioFxChain,
+  type HfAudioFxChain,
+} from "@hyperframes/core/audio-fx";
+import { type HfAutomation } from "@hyperframes/core/audio-automation";
+import { isCarveVoiceElement } from "./useFxCarveGrouping.js";
+import { automationAttrValue, HF_AUDIO_AUTOMATION_ATTR } from "./propertyPanelAutomation";
+import type { CarveClip } from "./useFxCarveNodes.js";
+import { readClipClock } from "./clipAudioClock.js";
+
+/** Lanes belonging to nodes the carve generated, which a re-run replaces. */
+export function withoutCarveLanes(automation: HfAutomation, chain: HfAudioFxChain): HfAutomation {
+  const prefixes = chain.nodes.filter((n) => n.fromCarve && n.id).map((n) => `fx.${n.id}.`);
+  if (prefixes.length === 0) return automation;
+  return {
+    version: automation.version,
+    lanes: automation.lanes.filter((lane) => !prefixes.some((p) => lane.target.startsWith(p))),
+  };
+}
+
+/** Every named voice still present with a src; a deleted source is skipped, not fatal. */
+export function resolveCarveVoices(doc: Document, sources: readonly string[]): CarveClip[] {
+  const voices: CarveClip[] = [];
+  for (const id of sources) {
+    const el = doc.getElementById(id);
+    // By tag name: iframe-realm elements fail `instanceof HTMLAudioElement`.
+    if (!isCarveVoiceElement(el)) continue;
+    const src = el.getAttribute("src");
+    if (!src) continue;
+    const clock = readClipClock((name) => el.getAttribute(name));
+    voices.push({ src, start: el.getAttribute("data-start"), clock });
+  }
+  return voices;
+}
+
+/** Remove the filters and lanes a carve generated once it no longer names a voice. */
+export async function dropCarveOutput(
+  chain: HfAudioFxChain,
+  automation: HfAutomation,
+  onSetAttributeQuiet: (attr: string, value: string | null) => void | Promise<void>,
+): Promise<void> {
+  const carriedOver = withoutCarveLanes(automation, chain);
+  if (carriedOver.lanes.length !== automation.lanes.length) {
+    await onSetAttributeQuiet(HF_AUDIO_AUTOMATION_ATTR, automationAttrValue(carriedOver) || null);
+  }
+  const kept = chain.nodes.filter((n) => !n.fromCarve);
+  if (kept.length !== chain.nodes.length) {
+    await onSetAttributeQuiet(
+      HF_AUDIO_FX_ATTR,
+      kept.length ? serializeAudioFxChain({ version: 1, nodes: kept }) : null,
+    );
+  }
+}

package/src/components/editor/cropPresetStore.ts

@@ -0,0 +1,33 @@
+import { create } from "zustand";
+
+export interface CropPresetBarTarget {
+  hfId?: string;
+  id?: string;
+}
+
+interface CropPresetBarState {
+  openFor: CropPresetBarTarget | null;
+  open: (target: CropPresetBarTarget) => void;
+  close: () => void;
+}
+
+/** Which clip the crop preset bar is open for; the canvas shows it while that element is selected. */
+export const useCropPresetBarStore = create<CropPresetBarState>((set) => ({
+  openFor: null,
+  open: (target) => set({ openFor: target }),
+  close: () => set({ openFor: null }),
+}));
+
+export function isCropBarTarget(element: Element, target: CropPresetBarTarget | null): boolean {
+  if (!target) return false;
+  const hfId = element.getAttribute("data-hf-id");
+  if (target.hfId && hfId) return target.hfId === hfId;
+  return Boolean(target.id) && element.id === target.id;
+}
+
+/** The crop lift is a stylesheet rule, so the inline clip-path is still the committed one. */
+export function committedClipPath(element: Element): string | null {
+  const style = element.getAttribute("style") ?? "";
+  const match = /(?:^|;)\s*clip-path\s*:\s*([^;]+)/i.exec(style);
+  return match?.[1]?.trim() ?? null;
+}

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

@@ -0,0 +1,41 @@
+import { describe, expect, it } from "vitest";
+import { CROP_ASPECT_PRESETS, centredCropInsets } from "./cropPresets";
+
+describe("centredCropInsets", () => {
+  it("trims the sides of a wide frame to 9:16, centred", () => {
+    const insets = centredCropInsets(1920, 1080, 9 / 16);
+    expect(insets.top).toBe(0);
+    expect(insets.bottom).toBe(0);
+    expect(insets.left).toBeCloseTo((1920 - 607.5) / 2, 6);
+    expect(insets.right).toBeCloseTo(insets.left, 6);
+  });
+
+  it("trims top and bottom of a tall frame to 16:9", () => {
+    const insets = centredCropInsets(1080, 1920, 16 / 9);
+    expect(insets.left).toBe(0);
+    expect(insets.right).toBe(0);
+    expect(insets.top).toBeCloseTo((1920 - 607.5) / 2, 6);
+    expect(insets.bottom).toBeCloseTo(insets.top, 6);
+  });
+
+  it("leaves the visible box in the requested ratio", () => {
+    for (const [w, h] of [
+      [1920, 1080],
+      [1080, 1920],
+      [800, 800],
+    ]) {
+      for (const { ratio } of CROP_ASPECT_PRESETS) {
+        const i = centredCropInsets(w, h, ratio);
+        expect((w - i.left - i.right) / (h - i.top - i.bottom)).toBeCloseTo(ratio, 6);
+      }
+    }
+  });
+
+  it("is no crop when the frame already has the ratio", () => {
+    expect(centredCropInsets(1600, 900, 16 / 9)).toEqual({ top: 0, right: 0, bottom: 0, left: 0 });
+  });
+
+  it("offers the four spec ratios", () => {
+    expect(CROP_ASPECT_PRESETS.map((p) => p.label)).toEqual(["16:9", "9:16", "1:1", "4:5"]);
+  });
+});

package/src/components/editor/cropPresets.ts

@@ -0,0 +1,24 @@
+import type { ClipPathInsetSides } from "./clipPathHelpers";
+
+export const CROP_ASPECT_PRESETS = [
+  { label: "16:9", ratio: 16 / 9 },
+  { label: "9:16", ratio: 9 / 16 },
+  { label: "1:1", ratio: 1 },
+  { label: "4:5", ratio: 4 / 5 },
+] as const;
+
+/** Insets (element CSS px) that leave the largest centred box of `ratio` (width / height). */
+export function centredCropInsets(
+  width: number,
+  height: number,
+  ratio: number,
+): ClipPathInsetSides {
+  const none = { top: 0, right: 0, bottom: 0, left: 0 };
+  if (width <= 0 || height <= 0 || ratio <= 0) return none;
+  if (width / height > ratio) {
+    const side = (width - height * ratio) / 2;
+    return side > 1e-9 ? { ...none, left: side, right: side } : none;
+  }
+  const band = (height - width / ratio) / 2;
+  return band > 1e-9 ? { ...none, top: band, bottom: band } : none;
+}

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/domEditingLayers.test.ts

@@ -7,6 +7,7 @@ import {
   buildTextFieldChildLocator,
   readHfId,
   liveLayerElement,
+  domEditSelectionToFacts,
 } from "./domEditingLayers";
 import type { DomEditTextField } from "./domEditingTypes";
 
@@ -332,3 +333,23 @@ describe("liveLayerElement", () => {
     ).toBe("strip");
   });
 });
+
+describe("domEditSelectionToFacts hasAudio", () => {
+  async function factsFor(html: string) {
+    document.body.innerHTML = html;
+    const node = document.body.firstElementChild;
+    if (!(node instanceof HTMLElement)) throw new Error("expected element");
+    const selection = await resolveDomEditSelection(node, opts);
+    document.body.innerHTML = "";
+    if (!selection) throw new Error("expected selection");
+    return domEditSelectionToFacts(selection);
+  }
+
+  it("is true for an unmuted video, false for muted or data-has-audio=false", async () => {
+    expect((await factsFor(`<video id="v1"></video>`)).hasAudio).toBe(true);
+    expect((await factsFor(`<video id="v2" data-has-audio="true"></video>`)).hasAudio).toBe(true);
+    expect((await factsFor(`<video id="v3" muted></video>`)).hasAudio).toBe(false);
+    expect((await factsFor(`<video id="v4" data-has-audio="false"></video>`)).hasAudio).toBe(false);
+    expect((await factsFor(`<div id="d1"></div>`)).hasAudio).toBe(false);
+  });
+});

package/src/components/editor/domEditingLayers.ts

@@ -1,4 +1,5 @@
 import { probeSourceElement } from "./probeSourceElement";
+import { isAudibleVideoNode } from "../../player/lib/timelineElementHelpers";
 import type { PatchOperation } from "../../utils/sourcePatcher";
 import {
   resolveEditingAffordances,
@@ -248,6 +249,7 @@ export function domEditSelectionToFacts(
     hasEditableText: selection.textFields.length > 0,
     hasTimingStart: selection.dataAttributes.start != null,
     animationCount,
+    hasAudio: isAudibleVideoNode(selection.element),
   };
 }
 

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

@@ -0,0 +1,71 @@
+// @vitest-environment happy-dom
+import { afterEach, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "./domEditing";
+import type { GestureState } from "./domEditOverlayGestures";
+import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
+import {
+  hasStudioPendingEdits,
+  revertNewestStudioPendingEdit,
+} from "../../utils/studioPendingEdits";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+const ref = <T>(current: T) => ({ current });
+const pointer = (x: number, y: number) => ({
+  clientX: x,
+  clientY: y,
+  pointerId: 1,
+  button: 0,
+  preventDefault() {},
+  stopPropagation() {},
+  currentTarget: { setPointerCapture() {}, releasePointerCapture() {} },
+});
+
+/** Drags a box without GSAP 100 px right and 60 px down; its save waits for `save`. */
+function dragWithSaveRunning(save: Promise<void>) {
+  const element = document.createElement("div");
+  element.style.setProperty("translate", "40px 30px");
+  document.body.append(element);
+  const selection = { element, capabilities: { canApplyManualOffset: true } };
+  const handlers = createDomEditOverlayGestureHandlers({
+    selectionRef: ref(selection as unknown as DomEditSelection),
+    overlayRectRef: ref({ left: 0, top: 0, width: 240, height: 160, editScaleX: 1, editScaleY: 1 }),
+    boxRef: ref(document.createElement("div")),
+    overlayRef: ref(null),
+    iframeRef: ref(null),
+    gestureRef: ref<GestureState | null>(null),
+    rafPausedRef: ref(false),
+    onManualDragStartRef: ref(vi.fn()),
+    onBlockedMoveRef: ref(vi.fn()),
+    onPathOffsetCommitRef: ref(vi.fn(() => save)),
+    snapGuidesRef: ref(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    setOverlayRect: vi.fn(),
+    suppressNextBoxClickRef: ref(false),
+    hoverSelectionRef: ref(null),
+    onCanvasMouseDown: vi.fn(),
+  } as never);
+  expect(handlers.startGesture("drag", pointer(10, 10) as never)).toBe(true);
+  handlers.onPointerUp(pointer(110, 70) as never);
+  return element;
+}
+
+it("a drag whose save is still running can be painted back at once, and shown again", async () => {
+  let saved!: () => void;
+  const element = dragWithSaveRunning(new Promise<void>((resolve) => (saved = resolve)));
+  const moved = element.style.getPropertyValue("translate");
+  expect(moved).not.toBe("40px 30px");
+
+  const showAgain = revertNewestStudioPendingEdit();
+  expect(element.style.getPropertyValue("translate")).toBe("40px 30px");
+  expect(revertNewestStudioPendingEdit()).toBeNull();
+  showAgain!();
+  expect(element.style.getPropertyValue("translate")).toBe(moved);
+
+  saved();
+  await vi.waitFor(() => expect(hasStudioPendingEdits()).toBe(false));
+  expect(revertNewestStudioPendingEdit()).toBeNull();
+});

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", () => {