@hyperframes/studio 0.8.108 → 0.8.110

package/src/components/editor/InlineTextCaret.tsx

@@ -0,0 +1,211 @@
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
+import type { InlineTextEditSession } from "../../hooks/useInlineTextEdit";
+
+/** The drawn caret's width on screen, whatever the preview's scale. */
+export const CARET_PX = 2;
+
+interface CaretPlacement {
+  left: number;
+  top: number;
+  height: number;
+  color: string;
+}
+
+/**
+ * The caret of a text edited in place, drawn at screen size: the preview is scaled, so the browser's 1 px caret
+ * shrinks below a pixel. This one follows the real selection; the browser's own is transparent meanwhile.
+ */
+export function InlineTextCaret({
+  session,
+  iframe,
+}: {
+  session: InlineTextEditSession | null;
+  iframe: HTMLIFrameElement | null;
+}) {
+  const [placement, setPlacement] = useState<CaretPlacement | null>(null);
+  const element = session?.element ?? null;
+
+  useEffect(() => {
+    if (!element || !iframe) {
+      setPlacement(null);
+      return;
+    }
+    const doc = element.ownerDocument;
+    const view = doc.defaultView;
+    const studio = iframe.ownerDocument.defaultView;
+    const color = caretColorOf(element);
+    const ownCaret = element.style.caretColor;
+    element.style.caretColor = "transparent";
+    let composing = false;
+    let side: CaretSide = "after";
+    const update = () =>
+      setPlacement(composing ? null : placeAtCaret(element, iframe, color, side));
+    // The DOM has no side for a soft-wrap point (one line's end is the next one's start): the key that moved there
+    // says which, as CodeMirror and ProseMirror keep it.
+    const onKey = ({ key }: KeyboardEvent) => {
+      if (!MODIFIERS.has(key)) side = SIDE_OF_KEY[key] ?? "after";
+    };
+    const onPress = () => void (side = "after");
+    const composition = (on: boolean) => () => {
+      composing = on;
+      update();
+    };
+    const start = composition(true);
+    const end = composition(false);
+    // The preview moves by transforms (the player's scale, a pan or zoom of the stage) that fire no event: the iframe's
+    // box is checked each frame and a move re-places the caret.
+    let box = "";
+    let frame = 0;
+    const follow = () => {
+      const { left, top, width, height } = iframe.getBoundingClientRect();
+      const now = `${left},${top},${width},${height}`;
+      if (now !== box) {
+        box = now;
+        update();
+      }
+      frame = studio?.requestAnimationFrame(follow) ?? 0;
+    };
+    doc.addEventListener("selectionchange", update);
+    element.addEventListener("keydown", onKey);
+    element.addEventListener("pointerdown", onPress);
+    element.addEventListener("input", update);
+    element.addEventListener("focus", update);
+    element.addEventListener("blur", update);
+    element.addEventListener("compositionstart", start);
+    element.addEventListener("compositionend", end);
+    view?.addEventListener("resize", update);
+    view?.addEventListener("scroll", update, true);
+    follow();
+    return () => {
+      studio?.cancelAnimationFrame(frame);
+      doc.removeEventListener("selectionchange", update);
+      element.removeEventListener("keydown", onKey);
+      element.removeEventListener("pointerdown", onPress);
+      element.removeEventListener("input", update);
+      element.removeEventListener("focus", update);
+      element.removeEventListener("blur", update);
+      element.removeEventListener("compositionstart", start);
+      element.removeEventListener("compositionend", end);
+      view?.removeEventListener("resize", update);
+      view?.removeEventListener("scroll", update, true);
+      element.style.caretColor = ownCaret;
+    };
+  }, [element, iframe]);
+
+  if (!placement || !iframe) return null;
+  // On Studio's body: a transformed ancestor in the canvas would make `fixed` relative to itself, not the viewport.
+  return createPortal(
+    <div
+      // Keyed on where it stands, so each move starts the blink lit, as the system caret does.
+      key={`${placement.left},${placement.top}`}
+      data-inline-text-caret="true"
+      aria-hidden="true"
+      className="hf-inline-text-caret pointer-events-none fixed z-200"
+      style={{
+        left: placement.left,
+        top: placement.top,
+        width: CARET_PX,
+        height: placement.height,
+        background: placement.color,
+      }}
+    />,
+    iframe.ownerDocument.body,
+  );
+}
+
+/** The colour the browser would draw its caret in: `caret-color`, or the text's colour when that is `auto`. */
+function caretColorOf(element: HTMLElement): string {
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  if (!style) return "currentColor";
+  return style.caretColor && style.caretColor !== "auto" ? style.caretColor : style.color;
+}
+
+type CaretSide = "before" | "after";
+const MODIFIERS = new Set(["Shift", "Control", "Alt", "Meta"]);
+// Only End leaves Chrome's own caret at the earlier line's end; an arrow onto a wrap point lands on the next line.
+const SIDE_OF_KEY: Record<string, CaretSide> = { End: "before" };
+
+/** Where the caret stands on Studio's screen, or null when there is none to draw: a range selected, the text not
+ * focused, or the selection outside it. */
+
+function placeAtCaret(
+  element: HTMLElement,
+  iframe: HTMLIFrameElement,
+  color: string,
+  side: CaretSide,
+): CaretPlacement | null {
+  const view = element.ownerDocument.defaultView;
+  const range = view ? caretRange(element, view) : null;
+  if (!view || !range) return null;
+  const rect = (side === "before" && endOfCharBefore(range)) || caretRect(range, element, view);
+  const box = iframe.getBoundingClientRect();
+  const scale = view.innerWidth ? box.width / view.innerWidth : 1;
+  return {
+    left: box.left + rect.left * scale - CARET_PX / 2,
+    top: box.top + rect.top * scale,
+    height: rect.height * scale,
+    color,
+  };
+}
+
+/** The collapsed range's box on its line. A caret between two nodes has none, so it stands beside them; an empty
+ * text has neither, so it stands at the text's start, one line tall. */
+function caretRect(range: Range, element: HTMLElement, view: Window) {
+  const last = [...range.getClientRects()].reverse().find((rect) => rect.height > 0);
+  if (last) return { left: last.left, top: last.top, height: last.height };
+  const beside = besideNode(range);
+  if (beside) return beside;
+  const style = view.getComputedStyle(element);
+  const box = element.getBoundingClientRect();
+  const fontSize = Number.parseFloat(style.fontSize) || 16;
+  const line = Number.parseFloat(style.lineHeight) || fontSize * 1.2;
+  return {
+    left: box.left + (Number.parseFloat(style.paddingLeft) || 0),
+    top: box.top + (Number.parseFloat(style.paddingTop) || 0),
+    height: line,
+  };
+}
+
+function caretRange(element: HTMLElement, view: Window): Range | null {
+  const doc = element.ownerDocument;
+  const selection = view.getSelection();
+  if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) return null;
+  if (!doc.hasFocus() || !element.contains(doc.activeElement)) return null;
+  const range = selection.getRangeAt(0);
+  return element.contains(range.startContainer) ? range : null;
+}
+
+/** The right edge of the character just before a collapsed range in a text node: where a caret that came from
+ * before a soft-wrap point stands, at the end of the earlier line. */
+function endOfCharBefore({ startContainer: at, startOffset: offset }: Range) {
+  if (at.nodeType !== Node.TEXT_NODE || offset === 0) return null;
+  const char = at.ownerDocument!.createRange();
+  // An emoji's second half alone has no box: take the whole pair.
+  const low = /[\uDC00-\uDFFF]/.test((at as Text).data[offset - 1] ?? "");
+  char.setStart(at, offset - (low && offset > 1 ? 2 : 1));
+  char.setEnd(at, offset);
+  // A trailing space at a wrap has a box on each line; the earlier line's comes first.
+  const rect = [...char.getClientRects()].find((each) => each.height > 0);
+  return rect ? { left: rect.right, top: rect.top, height: rect.height } : null;
+}
+
+/** At an element boundary: the end of the node before, or the start of the node after (a line break's own line). */
+function besideNode(range: Range) {
+  const [before, after] = neighbours(range);
+  const node = before && before.nodeName !== "BR" ? before : (after ?? before);
+  if (!node) return null;
+  const around = range.cloneRange();
+  around.selectNode(node);
+  const rects = [...around.getClientRects()].filter((rect) => rect.height > 0);
+  const end = node === before;
+  const rect = end ? rects.at(-1) : rects[0];
+  return rect ? { left: end ? rect.right : rect.left, top: rect.top, height: rect.height } : null;
+}
+
+/** The nodes either side of a collapsed range; an empty text node is a boundary too, between its siblings. */
+function neighbours({ startContainer: at, startOffset: offset }: Range) {
+  return at.nodeType === Node.TEXT_NODE
+    ? [at.previousSibling, at.nextSibling]
+    : [at.childNodes[offset - 1] ?? null, at.childNodes[offset] ?? null];
+}

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

@@ -1,14 +1,16 @@
 // @vitest-environment happy-dom
 
 import React, { act } from "react";
-import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
+import { cleanupMounted, trackedRoot } from "../ui/mountHost.testHelpers";
 import { InlineTextToolbar, swatchBackground } from "./InlineTextToolbar";
 import type { InlineTextEditSession } from "../../hooks/useInlineTextEdit";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
+  // Unmount before clearing the body: the bar is portaled there, so clearing first orphans React's node.
+  cleanupMounted();
   document.body.innerHTML = "";
 });
 
@@ -33,7 +35,7 @@ function scene(html: string) {
 function render(session: InlineTextEditSession | null, iframe: HTMLIFrameElement | null) {
   const host = document.createElement("div");
   document.body.append(host);
-  const root = createRoot(host);
+  const root = trackedRoot(host);
   act(() => root.render(<InlineTextToolbar session={session} iframe={iframe} />));
   return { host, root, rerender: () => act(() => root.render(<div />)) };
 }
@@ -49,8 +51,21 @@ function selectAll(element: HTMLElement) {
   });
 }
 
+function selectAt(element: HTMLElement, top: number) {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  range.getBoundingClientRect = () =>
+    ({ left: 20, top, width: 100, height: 10 }) as unknown as DOMRect;
+  const selection = document.getSelection()!;
+  act(() => {
+    selection.removeAllRanges();
+    selection.addRange(range);
+    document.dispatchEvent(new Event("selectionchange"));
+  });
+}
+
 function toolbarIn(host: HTMLElement): HTMLElement | null {
-  return host.querySelector<HTMLElement>('[data-inline-text-toolbar="true"]');
+  return host.ownerDocument.querySelector<HTMLElement>('[data-inline-text-toolbar="true"]');
 }
 
 function renderSelected(html = "hello world") {
@@ -120,7 +135,7 @@ describe("InlineTextToolbar", () => {
     // these are the handlers that would deselect the element.
     const host = document.createElement("div");
     document.body.append(host);
-    const root = createRoot(host);
+    const root = trackedRoot(host);
     act(() =>
       root.render(
         <div
@@ -152,7 +167,7 @@ describe("InlineTextToolbar", () => {
     const { host } = render(session, iframe);
     selectAll(element);
 
-    const input = host.querySelector<HTMLInputElement>('input[type="color"]')!;
+    const input = host.ownerDocument.querySelector<HTMLInputElement>('input[type="color"]')!;
     expect(input.className).toContain("w-full");
     expect(input.className).toContain("h-full");
     expect(input.className).toContain("min-w-0");
@@ -161,14 +176,14 @@ describe("InlineTextToolbar", () => {
   it("styles the selected characters when a control is used", () => {
     const { element, host } = renderSelected();
 
-    act(() => host.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
+    act(() => host.ownerDocument.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
 
     expect(element.innerHTML).toBe('<span style="font-weight: 700">hello world</span>');
   });
 
   it("ignores a click when the selection disappeared before React hid the toolbar", () => {
     const { element, host } = renderSelected();
-    const bold = host.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!;
+    const bold = host.ownerDocument.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!;
 
     expect(() => {
       act(() => {
@@ -185,8 +200,12 @@ describe("InlineTextToolbar", () => {
 
     selectAll(element);
 
-    expect(host.querySelector('[aria-label="Italic"]')?.getAttribute("aria-pressed")).toBe("true");
-    expect(host.querySelector('[aria-label="Bold"]')?.getAttribute("aria-pressed")).toBe("false");
+    expect(
+      host.ownerDocument.querySelector('[aria-label="Italic"]')?.getAttribute("aria-pressed"),
+    ).toBe("true");
+    expect(
+      host.ownerDocument.querySelector('[aria-label="Bold"]')?.getAttribute("aria-pressed"),
+    ).toBe("false");
   });
 
   it("turns a style back off when the control is used again", () => {
@@ -194,7 +213,7 @@ describe("InlineTextToolbar", () => {
     const { host } = render(session, iframe);
     selectAll(element);
 
-    act(() => host.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
+    act(() => host.ownerDocument.querySelector<HTMLButtonElement>('[aria-label="Bold"]')!.click());
 
     expect(element.innerHTML).toBe("words");
   });
@@ -202,16 +221,7 @@ describe("InlineTextToolbar", () => {
   it("places itself over the selection, mapped out of the scaled composition", () => {
     const { element, session, iframe } = scene("hello world");
     const { host } = render(session, iframe);
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.getBoundingClientRect = () =>
-      ({ left: 20, top: 40, width: 100, height: 10 }) as unknown as DOMRect;
-    const selection = document.getSelection()!;
-    act(() => {
-      selection.removeAllRanges();
-      selection.addRange(range);
-      document.dispatchEvent(new Event("selectionchange"));
-    });
+    selectAt(element, 40);
 
     const toolbar = toolbarIn(host)!;
     // Frame at 100,50; scale 400/innerWidth; centre of the range, above it.
@@ -223,16 +233,7 @@ describe("InlineTextToolbar", () => {
     const { element, session, iframe } = scene("hello world");
     iframe.getBoundingClientRect = () => ({ left: 0, top: 0, width: 400 }) as DOMRect;
     const { host } = render(session, iframe);
-    const range = document.createRange();
-    range.selectNodeContents(element);
-    range.getBoundingClientRect = () =>
-      ({ left: 20, top: 0, width: 100, height: 10 }) as unknown as DOMRect;
-    const selection = document.getSelection()!;
-    act(() => {
-      selection.removeAllRanges();
-      selection.addRange(range);
-      document.dispatchEvent(new Event("selectionchange"));
-    });
+    selectAt(element, 0);
 
     const toolbar = toolbarIn(host)!;
     const scale = 400 / window.innerWidth;
@@ -271,7 +272,9 @@ describe("InlineTextToolbar", () => {
 
     selectAll(element);
 
-    expect(host.querySelector<HTMLInputElement>('input[type="color"]')?.value).toBe("#ff0000");
+    expect(host.ownerDocument.querySelector<HTMLInputElement>('input[type="color"]')?.value).toBe(
+      "#ff0000",
+    );
   });
 });
 

package/src/components/editor/InlineTextToolbar.tsx

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { applyInlineStyle } from "./inlineTextStyleRange";
 import { readInlineStyle, readInlineStyleSpread } from "./inlineTextStyleRead";
 import { parseCssColor, toHexColor } from "./colorValue";
@@ -69,10 +70,10 @@ export function InlineTextToolbar({
     [session, refresh],
   );
 
-  if (!placement) return null;
+  if (!placement || !iframe) return null;
   const styles = placement.styles;
 
-  return (
+  return createPortal(
     <div
       data-inline-text-toolbar="true"
       role="toolbar"
@@ -89,8 +90,8 @@ export function InlineTextToolbar({
       // The default, because a press anywhere in Studio moves the focus, and
       // moving it out of the text collapses the selection being styled.
       //
-      // The propagation, because this renders inside the canvas overlay: a
-      // press that reaches the canvas is read as a click on the composition,
+      // The propagation, because React bubbles it through the canvas overlay
+      // that renders this bar: a press that reaches the canvas is read as a click on the composition,
       // which deselects the element and commits the edit out from under the
       // button that was just pressed.
       onPointerDown={swallow}
@@ -147,7 +148,8 @@ export function InlineTextToolbar({
         on={styles["text-decoration-line"] === "underline"}
         onToggle={(on) => apply({ "text-decoration-line": on ? "underline" : null })}
       />
-    </div>
+    </div>,
+    iframe.ownerDocument.body,
   );
 }
 

package/src/components/editor/PropertyPanelFlat.tsx

@@ -5,6 +5,7 @@ import { DesignPanelInputProvider } from "../../contexts/DesignPanelInputContext
 import { slugifyDesignInput } from "../../utils/designInputTracking";
 import { isTextEditableSelection } from "./domEditing";
 import type { PropertyPanelFlatProps } from "./propertyPanelFlatProps";
+import { useLinkedSpeedCommit, withLinkedPlaybackRate } from "./linkedSpeedEdits";
 import { formatPxMetricValue } from "./propertyPanelHelpers";
 import { audioFxSummary } from "./audioFxSummary";
 import { resolveAudioGroups } from "@hyperframes/core/audio-groups";
@@ -289,10 +290,12 @@ export function PropertyPanelFlat({
   const showMotionEffects = gsapEffectHandlers !== null && !audioSelection;
   const showMotionGroup = showMotionTiming || showMotionEffects;
 
+  const linkedSpeed = useLinkedSpeedCommit(element, forwardedProps.onSetAttributeBatch);
   const volumeAutomation = useVolumeAutomation(
     element,
     currentTime,
     onSetAttributeQuiet ?? onSetAttributeLive,
+    linkedSpeed,
   );
 
   // The group this clip belongs to, if any — the Audio FX summary reads
@@ -505,7 +508,7 @@ export function PropertyPanelFlat({
           element={element}
           styles={styles}
           onSetStyle={onSetStyle}
-          onSetAttribute={onSetAttribute}
+          onSetAttribute={withLinkedPlaybackRate(onSetAttribute, linkedSpeed)}
           {...volumeAutomation}
         />
       ),

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

@@ -196,6 +196,7 @@ function evt(clientX: number, clientY: number) {
     clientY,
     pointerId: 1,
     button: 0,
+    buttons: 1,
     altKey: false,
     shiftKey: false,
     preventDefault() {},

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

@@ -182,7 +182,10 @@ async function settle() {
 
 const fire = (target: Element, type: string, init: MouseEventInit = {}) => {
   act(() => {
-    target.dispatchEvent(new MouseEvent(type, { bubbles: true, cancelable: true, ...init }));
+    const buttons = type === "pointerdown" || type === "pointermove" ? 1 : 0;
+    target.dispatchEvent(
+      new MouseEvent(type, { bubbles: true, cancelable: true, buttons, ...init }),
+    );
   });
 };
 

package/src/components/editor/domEditInlineText.ts

@@ -54,18 +54,20 @@ export function canEditElementTextInline(element: HTMLElement | null): boolean {
 }
 
 function hasOnlyFormattingChildren(element: HTMLElement): boolean {
-  const HTMLElementClass = element.ownerDocument.defaultView?.HTMLElement;
-  if (!HTMLElementClass) return false;
   for (const child of Array.from(element.children)) {
     if (!isRichTextFormattingTag(child.tagName)) return false;
-    if (!(child instanceof HTMLElementClass)) return false;
+    if (!isHtmlFromAnyWindow(child)) return false;
     // Formatting nests, and a structural child hidden inside a span is still
     // structural.
-    if (!hasOnlyFormattingChildren(child)) return false;
+    if (!hasOnlyFormattingChildren(child as HTMLElement)) return false;
   }
   return true;
 }
 
+function isHtmlFromAnyWindow(node: Element): boolean {
+  return node.namespaceURI === "http://www.w3.org/1999/xhtml";
+}
+
 /** Where and when a press landed, for recognising the next one as a pair. */
 export interface PressMark {
   x: number;

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

@@ -30,6 +30,13 @@ describe("canEditElementTextInline", () => {
     expect(canEditElementTextInline(element)).toBe(true);
   });
 
+  it("opens styled copy whose formatting comes from another window", () => {
+    const element = mount("<h1>a <strong>bold</strong></h1>");
+    // happy-dom shares classes across windows; drop this window's HTMLElement as a foreign realm would.
+    Object.setPrototypeOf(element.firstElementChild, Element.prototype);
+    expect(canEditElementTextInline(element)).toBe(true);
+  });
+
   it("keeps out an element with a structural child, which the panel edits field by field", () => {
     expect(canEditElementTextInline(mount("<div><h1>a</h1><p>b</p></div>"))).toBe(false);
   });

package/src/components/editor/domEditOverlayGestures.ts

@@ -49,6 +49,7 @@ export interface GestureState {
   kind: GestureKind;
   mode: "path-offset" | "box-size" | "rotation";
   selection: DomEditSelection;
+  pointerId: number;
   startX: number;
   startY: number;
   centerX: number;
@@ -93,6 +94,7 @@ export interface GestureState {
 }
 
 export interface GroupGestureState {
+  pointerId: number;
   startX: number;
   startY: number;
   originItems: GroupOverlayItem[];
@@ -103,6 +105,14 @@ export interface GroupGestureState {
   travelled?: boolean;
 }
 
+/** Only the pressing pointer's moves with its button held drive a gesture, not Chromium's buttonless resends. */
+export function movesGesture(
+  gesture: { pointerId: number },
+  e: { pointerId: number; buttons: number },
+): boolean {
+  return e.pointerId === gesture.pointerId && (e.buttons & 1) === 1;
+}
+
 export interface BlockedMoveState {
   pointerId: number;
   startX: number;

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

@@ -177,6 +177,7 @@ describe("a rotate on a page that loads GSAP", () => {
       clientY,
       pointerId: 1,
       button: 0,
+      buttons: 1,
       shiftKey: false,
       preventDefault() {},
       stopPropagation() {},

package/src/components/editor/domEditOverlayStartGesture.ts

@@ -119,6 +119,7 @@ export function startGroupDrag(
     e.currentTarget.setPointerCapture(e.pointerId);
     opts.rafPausedRef.current = true;
     opts.groupGestureRef.current = {
+      pointerId: e.pointerId,
       startX: e.clientX,
       startY: e.clientY,
       originItems: items,
@@ -265,6 +266,7 @@ export function startGesture(
       kind,
       mode,
       selection: sel,
+      pointerId: e.pointerId,
       startX: e.clientX,
       startY: e.clientY,
       centerX,

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

@@ -66,8 +66,24 @@ const byId = (iframe: HTMLIFrameElement | null, id: string) =>
   iframe!.contentDocument!.getElementById(id) as HTMLElement;
 const api = (): TimelinePlayerApi => player.getApi();
 
-function pointer(target: Element, type: string, x: number, y: number) {
-  const init = { bubbles: true, cancelable: true, button: 0, pointerId: 1, clientX: x, clientY: y };
+function pointer(
+  target: Element,
+  type: string,
+  x: number,
+  y: number,
+  extra: PointerEventInit = {},
+) {
+  const buttons = type === "pointerdown" || type === "pointermove" ? 1 : 0;
+  const init = {
+    bubbles: true,
+    cancelable: true,
+    button: 0,
+    buttons,
+    pointerId: 1,
+    clientX: x,
+    clientY: y,
+    ...extra,
+  };
   act(() => void target.dispatchEvent(new PointerEvent(type, init)));
 }
 
@@ -252,6 +268,27 @@ describe("a reload during a drag", () => {
   });
 });
 
+describe("a drag moves only with its own pointer pressed", () => {
+  it.each([
+    ["no button held, as Chromium sends after a layout change", { buttons: 0 }],
+    ["another pointer", { pointerId: 2 }],
+  ])(
+    "a move with %s at a fixed point leaves the drop where the pointer let go",
+    async (_, stray) => {
+      const { live, overlay, box } = mountEditor(false);
+      pointer(box, "pointerdown", 150, 150);
+      pointer(overlay, "pointermove", 170, 160);
+      pointer(overlay, "pointermove", 20, 20, stray);
+      pointer(overlay, "pointermove", 190, 170);
+      pointer(overlay, "pointermove", 20, 20, stray);
+      expect(byId(live, "title").style.getPropertyValue("translate")).toBe("40px 20px");
+      pointer(overlay, "pointerup", 190, 170);
+      await settle();
+      expect(file.title).toBe("translate: 40px 20px");
+    },
+  );
+});
+
 type Editor = ReturnType<typeof mountEditor>;
 
 describe("every way a drag ends without a drop clears its mark and promotes the held reload", () => {