@hyperframes/studio 0.8.102 → 0.8.104

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

@@ -1,9 +1,13 @@
 // @vitest-environment happy-dom
 
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
 import { describe, expect, it, vi } from "vitest";
+import { useManualEditDisabledFlags } from "./previewReadOnlyContext";
 import type { DomEditSelection } from "./domEditingTypes";
 import { GsapEditBlockedError } from "../../hooks/gsapEditOutcome";
 import { createTransformCommitHandlers } from "./propertyPanelTransformCommit";
+import { readMoveOffset, UNREADABLE_TRANSLATE } from "./plainTranslate";
 
 describe("createTransformCommitHandlers", () => {
   it.each([
@@ -55,3 +59,79 @@ describe("createTransformCommitHandlers", () => {
     expect(onSetManualRotation).not.toHaveBeenCalled();
   });
 });
+
+describe("the panel's position fields on a translate Studio can't read", () => {
+  it("are disabled", () => {
+    (globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+    const box = document.createElement("div");
+    box.style.setProperty("translate", "abs(10% - 50px) 30px");
+    const seen: boolean[] = [];
+    function Probe({ element }: { element: HTMLElement }) {
+      seen.push(
+        useManualEditDisabledFlags({ canApplyManualOffset: true } as never, readMoveOffset(element))
+          .manualOffsetEditingDisabled,
+      );
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(React.createElement(Probe, { element: box })));
+    box.style.setProperty("translate", "40px 30px");
+    act(() => root.render(React.createElement(Probe, { element: box })));
+    act(() => root.unmount());
+    expect(seen).toEqual([true, false]);
+  });
+
+  it("commit nothing and say why", async () => {
+    const onSetManualOffset = vi.fn();
+    const showToast = vi.fn();
+    const box = document.createElement("div");
+    box.style.setProperty("translate", "abs(10% - 50px) 30px");
+    const element = { id: "box", selector: "#box", element: box } as unknown as DomEditSelection;
+    const handlers = createTransformCommitHandlers({
+      element,
+      styles: {},
+      hasGsapAnimation: false,
+      gsapAnimId: null,
+      gsapKeyframes: null,
+      currentPct: 0,
+      onCommitAnimatedProperty: undefined,
+      onAddKeyframe: undefined,
+      onSetManualOffset,
+      onSetManualSize: vi.fn(),
+      onSetManualRotation: vi.fn(),
+      showToast,
+    });
+    await handlers.commitManualOffset("y", "20px");
+    expect(onSetManualOffset).not.toHaveBeenCalled();
+    expect(showToast).toHaveBeenCalledWith(UNREADABLE_TRANSLATE);
+  });
+});
+
+describe("the panel's position fields", () => {
+  it("read and move an element without GSAP by its CSS translate, on the route they chose", async () => {
+    const onSetManualOffset = vi.fn();
+    const box = document.createElement("div");
+    box.style.setProperty("translate", "40px 30px");
+    const element = { id: "box", selector: "#box", element: box } as unknown as DomEditSelection;
+    const handlers = createTransformCommitHandlers({
+      element,
+      styles: {},
+      hasGsapAnimation: false,
+      gsapAnimId: null,
+      gsapKeyframes: null,
+      currentPct: 0,
+      onCommitAnimatedProperty: undefined,
+      onAddKeyframe: undefined,
+      onSetManualOffset,
+      onSetManualSize: vi.fn(),
+      onSetManualRotation: vi.fn(),
+      showToast: vi.fn(),
+    });
+    await handlers.commitManualOffset("x", "100px");
+    expect(onSetManualOffset).toHaveBeenCalledWith(
+      element,
+      { x: 100, y: 30 },
+      { plainTranslate: true },
+    );
+  });
+});

package/src/components/editor/propertyPanelTransformCommit.ts

@@ -1,6 +1,7 @@
+import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
 import type { DomEditSelection } from "./domEditingTypes";
 import { readStudioBoxSize } from "./manualEdits";
-import { readMoveOffset } from "./plainTranslate";
+import { readMoveOffset, UNREADABLE_TRANSLATE } from "./plainTranslate";
 import { parsePxMetricValue, type PropertyPanelProps } from "./propertyPanelHelpers";
 
 interface TransformCommitDeps {
@@ -74,12 +75,16 @@ export function createTransformCommitHandlers({
       )
     )
       return;
-    const current = readMoveOffset(element.element);
+    const plainTranslate = !gsapWritesPosition(element.element);
+    const current = readMoveOffset(element.element, plainTranslate);
+    if (!Number.isFinite(current.x) || !Number.isFinite(current.y))
+      return void showToast?.(UNREADABLE_TRANSLATE);
     await Promise.resolve(
-      onSetManualOffset(element, {
-        x: axis === "x" ? parsed : current.x,
-        y: axis === "y" ? parsed : current.y,
-      }),
+      onSetManualOffset(
+        element,
+        { x: axis === "x" ? parsed : current.x, y: axis === "y" ? parsed : current.y },
+        { plainTranslate },
+      ),
     );
   };
 

package/src/components/editor/propertyPanelTypes.ts

@@ -79,6 +79,7 @@ export interface PropertyPanelProps {
   onSetManualOffset: (
     element: DomEditSelection,
     next: { x: number; y: number },
+    route?: { plainTranslate: boolean },
   ) => void | Promise<void>;
   onSetManualSize: (
     element: DomEditSelection,

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

@@ -0,0 +1,111 @@
+// @vitest-environment happy-dom
+
+import { afterEach, expect, it, vi } from "vitest";
+import { savePlainRotation } from "../../hooks/plainRotation";
+import { applyStudioRotation } from "./manualEdits";
+import type { ElementOffsetStagerDeps } from "../../hooks/elementOffsetStager";
+import type { DomEditSelection } from "./domEditing";
+import type { GestureState, UseDomEditOverlayGesturesOptions } from "./domEditOverlayGestures";
+import { createDomEditOverlayGestureHandlers } from "./useDomEditOverlayGestures";
+
+const ref = <T>(current: T) => ({ current });
+
+function evt(clientX: number, clientY: number) {
+  return {
+    clientX,
+    clientY,
+    pointerId: 1,
+    button: 0,
+    altKey: false,
+    shiftKey: false,
+    preventDefault() {},
+    stopPropagation() {},
+    currentTarget: { setPointerCapture() {} },
+  } as unknown as React.PointerEvent<HTMLDivElement>;
+}
+
+afterEach(() => {
+  document.head.innerHTML = "";
+  document.body.innerHTML = "";
+});
+
+async function rotateWord(before: (word: HTMLElement) => void = () => {}) {
+  const sheet = document.head.appendChild(document.createElement("style"));
+  sheet.textContent = "#word { display: inline; }";
+  const element = document.body.appendChild(document.createElement("span"));
+  element.id = "word";
+  element.textContent = "Word";
+  const selection = {
+    element,
+    id: "word",
+    selector: "#word",
+    selectorIndex: 0,
+    sourceFile: "index.html",
+    tagName: "span",
+    label: "Word",
+    textContent: "Word",
+    textFields: [],
+    capabilities: { canMove: true, canApplyManualRotation: true },
+  } as unknown as DomEditSelection;
+  const commitPositionPatchToHtml = vi.fn<ElementOffsetStagerDeps["commitPositionPatchToHtml"]>(
+    () => Promise.resolve(),
+  );
+  const saves: Promise<void>[] = [];
+  const opts: UseDomEditOverlayGesturesOptions = {
+    overlayRef: ref<HTMLDivElement | null>(document.createElement("div")),
+    iframeRef: ref<HTMLIFrameElement | null>(document.createElement("iframe")),
+    boxRef: ref<HTMLDivElement | null>(document.createElement("div")),
+    selectionRef: ref<DomEditSelection | null>(selection),
+    hoverSelectionRef: ref<DomEditSelection | null>(null),
+    overlayRectRef: ref({ left: 0, top: 0, width: 200, height: 100, editScaleX: 1, editScaleY: 1 }),
+    groupOverlayItemsRef: ref([]),
+    gestureRef: ref<GestureState | null>(null),
+    groupGestureRef: ref(null),
+    blockedMoveRef: ref(null),
+    rafPausedRef: ref(false),
+    suppressNextBoxClickRef: ref(false),
+    setOverlayRect: () => {},
+    setGroupOverlayItems: () => {},
+    onBlockedMoveRef: ref(() => {}),
+    onManualDragStartRef: ref(() => {}),
+    onPathOffsetCommitRef: ref(() => {}),
+    onGroupPathOffsetCommitRef: ref(() => {}),
+    onBoxSizeCommitRef: ref(() => {}),
+    onRotationCommitRef: ref((s, next) => {
+      const saved = savePlainRotation({ commitPositionPatchToHtml }, s, next);
+      saves.push(saved);
+      return saved;
+    }),
+    onCanvasPointerMoveRef: ref(() => Promise.resolve(null)),
+    onCanvasMouseDown: () => {},
+    snapGuidesRef: ref(null),
+  } as unknown as UseDomEditOverlayGesturesOptions;
+  before(element);
+  const handlers = createDomEditOverlayGestureHandlers(opts);
+
+  handlers.startGesture("rotate", evt(200, 50));
+  handlers.onPointerMove(evt(100, 150));
+  handlers.onPointerUp(evt(100, 150));
+  await Promise.all(saves);
+
+  expect(saves).toHaveLength(1);
+  return commitPositionPatchToHtml.mock.calls[0]![1];
+}
+
+const INLINE_BLOCK = { type: "inline-style", property: "display", value: "inline-block" };
+const turnOf = (patches: Awaited<ReturnType<typeof rotateWord>>) =>
+  patches.findLast((patch) => patch.type === "inline-style" && patch.property === "rotate");
+
+it("saves an inline span's turn with the inline-block it was drawn with, after the draft and the hold", async () => {
+  expect(await rotateWord()).toContainEqual(INLINE_BLOCK);
+});
+
+it("saves inline-block and the whole turn for a word an older Studio already turned 15 deg", async () => {
+  const plain = await rotateWord();
+  document.head.innerHTML = "";
+  document.body.innerHTML = "";
+  const legacy = await rotateWord((word) => applyStudioRotation(word, { angle: 15 }));
+  expect(legacy).toContainEqual(INLINE_BLOCK);
+  const degrees = (patches: typeof plain) => Number.parseFloat(String(turnOf(patches)?.value));
+  expect(degrees(legacy)).toBe(degrees(plain) + 15);
+});

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

@@ -0,0 +1,111 @@
+import { Window } from "happy-dom";
+import { describe, expect, it, vi } from "vitest";
+import { applyRotationDraft, readCssRotationTarget, readRotationBase } from "./rotationDraft";
+
+describe("rotate in a composition without GSAP", () => {
+  it("starts from the authored CSS rotation and drafts the absolute angle the commit writes", () => {
+    const window = new Window();
+    window.document.head.innerHTML = "<style>#title { rotate: 30deg; }</style>";
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    const base = readRotationBase(element, true);
+    expect(base).toBeCloseTo(30);
+    applyRotationDraft(element, 55, readCssRotationTarget(element));
+    expect(element.style.getPropertyValue("rotate")).toBe("55deg");
+  });
+
+  it("drafts only the part of the angle the CSS rotate owns, leaving transform and scale theirs", () => {
+    const cases: Array<[string, number, number]> = [
+      ["transform: rotate(30deg);", 30, 25],
+      ["rotate: 20deg; transform: rotate(10deg);", 30, 45],
+      ["scale: -1 1;", 180, 25],
+      ["transform: scaleX(-1);", 180, 25],
+    ];
+    for (const [css, base, drafted] of cases) {
+      const window = new Window();
+      window.document.head.innerHTML = `<style>#title { ${css} }</style>`;
+      const element = window.document.createElement("h1");
+      element.id = "title";
+      window.document.body.append(element);
+      expect({ css, base: readRotationBase(element, true) }).toEqual({
+        css,
+        base: expect.closeTo(base),
+      });
+      applyRotationDraft(element, base + 25, readCssRotationTarget(element));
+      const rotate = Number.parseFloat(element.style.getPropertyValue("rotate"));
+      expect({ css, rotate }).toEqual({ css, rotate: expect.closeTo(drafted) });
+    }
+  });
+
+  it("never asks GSAP, nor restyles per frame, when GSAP turns nothing on the element", () => {
+    const window = new Window();
+    const gsap = { set: vi.fn(), getProperty: vi.fn(() => 0) };
+    Object.assign(window, { gsap });
+    window.document.head.innerHTML = "<style>#title { rotate: 30deg; }</style>";
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    expect(readRotationBase(element, true)).toBeCloseTo(30);
+    const target = readCssRotationTarget(element);
+    const styleReads = vi.spyOn(window, "getComputedStyle");
+    applyRotationDraft(element, 55, target);
+    expect(styleReads).not.toHaveBeenCalled();
+    expect(element.style.getPropertyValue("rotate")).toBe("55deg");
+    expect(gsap.set).not.toHaveBeenCalled();
+    expect(gsap.getProperty).not.toHaveBeenCalled();
+    applyRotationDraft(element, 55, null);
+    expect(element.style.getPropertyValue("rotate")).toBe("none");
+    expect(gsap.set).toHaveBeenCalledWith(element, { rotation: 55 });
+  });
+
+  it("turns a transform-centred element inside its transform, after the translate, so it stays put", () => {
+    const window = new Window();
+    window.document.head.innerHTML =
+      "<style>#title { rotate: 30deg; transform: translate(-120px, -80px); }</style>";
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    const target = readCssRotationTarget(element);
+    expect(target).toEqual({
+      property: "transform",
+      before: "translate(-120px, -80px)",
+      after: "",
+      share: expect.closeTo(30),
+      sign: 1,
+      inline: false,
+    });
+    applyRotationDraft(element, 55, target);
+    expect(element.style.getPropertyValue("transform")).toBe(
+      "translate(-120px, -80px) rotate(25deg)",
+    );
+    expect(element.style.getPropertyValue("rotate")).toBe("");
+    // The next rotate replaces its own turn instead of stacking a second one.
+    applyRotationDraft(element, 70, readCssRotationTarget(element));
+    expect(element.style.getPropertyValue("transform")).toBe(
+      "translate(-120px, -80px) rotate(40deg)",
+    );
+  });
+
+  // Each case turns 25 deg with the cursor: the fold GSAP and the outline read goes up by 25, unsheared.
+  it.each([
+    ["a mirrored transform", "transform: translate(-120px, -80px) scaleX(-1);", 180],
+    ["a stretched transform", "transform: translate(-120px, -80px) scale(2, 1);", 0],
+    ["a mirroring scale property", "scale: -1 1; transform: translate(-120px, -80px);", 180],
+  ])("turns %s centred element with the cursor, in place", (_, css, base) => {
+    const window = new Window();
+    window.document.head.innerHTML = `<style>#title { ${css} }</style>`;
+    const element = window.document.createElement("h1");
+    element.id = "title";
+    window.document.body.append(element);
+    const turned = (angle: number) => (((angle % 360) + 360) % 360) % 360;
+    expect(turned(readRotationBase(element, true))).toBeCloseTo(base);
+    applyRotationDraft(element, base + 25, readCssRotationTarget(element));
+    const transform = element.style.getPropertyValue("transform");
+    expect(transform.startsWith("translate(-120px, -80px) rotate(")).toBe(true);
+    expect(turned(readRotationBase(element, true))).toBeCloseTo(base + 25);
+    const m = new window.DOMMatrix(window.getComputedStyle(element).transform);
+    expect(m.a * m.c + m.b * m.d).toBeCloseTo(0);
+    expect([m.e, m.f]).toEqual([-120, -80]);
+  });
+});

package/src/components/editor/rotationDraft.ts

@@ -0,0 +1,145 @@
+import { readCssRotation } from "../../hooks/draggedGsapPosition";
+import { roundTo3 } from "../../utils/rounding";
+import type { PatchOperation } from "../../utils/sourcePatcher";
+import {
+  readStudioRotation,
+  restoreStudioRotation,
+  type StudioRotationSnapshot,
+} from "./manualEdits";
+import { getOffsetDragGsap } from "./manualOffsetDrag";
+import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
+
+function lastRuleTransform(element: HTMLElement): string {
+  let value = "";
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules: CSSStyleRule[] = [];
+    try {
+      rules = Array.from(sheet.cssRules) as CSSStyleRule[];
+    } catch {
+      // a cross-origin sheet
+    }
+    for (const rule of rules) {
+      const declared = rule.style?.getPropertyValue("transform");
+      if (declared && element.matches(rule.selectorText)) value = declared;
+    }
+  }
+  return value;
+}
+
+// ponytail: the authored transform if it moves the box, from the last matching rule in sheet order;
+// specificity, !important and @media are not weighed. Weigh them when a film's rule is missed.
+function translatingTransform(element: HTMLElement): string {
+  const view = element.ownerDocument.defaultView;
+  const computed = view?.getComputedStyle(element).transform ?? "none";
+  const m = computed === "none" ? null : new view!.DOMMatrix(computed);
+  if (!m || (m.m41 === 0 && m.m42 === 0)) return "";
+  const value = element.style.getPropertyValue("transform") || lastRuleTransform(element);
+  return value === "none" ? "" : value;
+}
+
+/** Where a plain rotate draws its turn, read once at press: the element's own `rotate`, or, when its
+ *  transform translates it (often the translate(-50%, -50%) centring), a rotate() right after that
+ *  translate, so the box turns in place in screen space. `share` is what the rest already turns. */
+export interface CssRotationTarget {
+  property: "rotate" | "transform";
+  before: string;
+  after: string;
+  share: number;
+  /** -1 when a mirroring `scale` property flips a turn made inside the transform. */
+  sign: number;
+  /** An inline box does not transform, so the turn makes it inline-block. */
+  inline: boolean;
+}
+
+export type RotationCommit = { angle: number; plain?: CssRotationTarget };
+
+const TRANSLATE = /^translate(?:3d|X|Y|Z)?\(/i;
+const OWN_TURN = /^rotate\(\s*-?[\d.]+(?:e[+-]?\d+)?deg\s*\)$/i;
+
+export function readCssRotationTarget(element: HTMLElement): CssRotationTarget {
+  const style = element.ownerDocument.defaultView?.getComputedStyle(element);
+  const inline = style?.display === "inline";
+  const transform = translatingTransform(element);
+  if (!transform) {
+    const share = readCssRotation(element, false);
+    return { property: "rotate", before: "", after: "", share, sign: 1, inline };
+  }
+  const parts = splitTopLevelWhitespace(transform);
+  const lead = parts.findIndex((part) => !TRANSLATE.test(part));
+  const split = lead < 0 ? parts.length : lead;
+  const rest = parts.slice(split);
+  if (OWN_TURN.test(rest[0] ?? "")) rest.shift();
+  const [before, after] = [parts.slice(0, split).join(" "), rest.join(" ")];
+  const [sx = 1, sy = sx] = splitTopLevelWhitespace(style?.getPropertyValue("scale") ?? "").map(
+    Number.parseFloat,
+  );
+  const inlineStyle = element.style;
+  const saved = [
+    inlineStyle.getPropertyValue("transform"),
+    inlineStyle.getPropertyPriority("transform"),
+  ];
+  inlineStyle.setProperty("transform", `${before} ${after}`.trim() || "none");
+  const share = readCssRotation(element);
+  inlineStyle.setProperty("transform", saved[0] ?? "", saved[1] ?? "");
+  return { property: "transform", before, after, share, sign: sx * sy < 0 ? -1 : 1, inline };
+}
+
+/** Draws `angle` where `target` says, and returns the source patches that save it as drawn. */
+export function applyCssRotation(
+  element: HTMLElement,
+  angle: number,
+  target = readCssRotationTarget(element),
+): Array<PatchOperation & { value: string }> {
+  const turn = `${roundTo3(target.sign * (angle - target.share))}deg`;
+  const value =
+    target.property === "rotate"
+      ? turn
+      : [target.before, `rotate(${turn})`, target.after].filter(Boolean).join(" ");
+  const patches: Array<PatchOperation & { value: string }> = [
+    { type: "inline-style", property: target.property, value },
+  ];
+  if (target.inline) {
+    patches.unshift({ type: "inline-style", property: "display", value: "inline-block" });
+  }
+  for (const patch of patches) element.style.setProperty(patch.property, patch.value);
+  return patches;
+}
+
+/** Back to the press: the rotation snapshot and, for a plain rotate, the inline transform it drew in. */
+export function restorePlainRotation(element: HTMLElement, snapshot: StudioRotationSnapshot): void {
+  restoreStudioRotation(element, snapshot);
+  element.style.setProperty("transform", snapshot.transform);
+  element.style.setProperty("display", snapshot.display);
+}
+
+// `plain`, read at press: where a turn GSAP does not own draws; null for GSAP's rotation.
+export function applyRotationDraft(
+  element: HTMLElement,
+  angle: number,
+  plain: CssRotationTarget | null,
+): void {
+  if (plain) return void applyCssRotation(element, angle, plain);
+  element.style.setProperty("rotate", "none");
+  getOffsetDragGsap(element)?.set(element, { rotation: angle });
+}
+
+/** Back to the gesture start: the CSS snapshot, and GSAP's rotation without the legacy var. */
+export function restoreRotationDraft(
+  element: HTMLElement,
+  angle: number,
+  snapshot: StudioRotationSnapshot,
+  plain: boolean,
+): void {
+  if (plain) return restorePlainRotation(element, snapshot);
+  getOffsetDragGsap(element)?.set(element, {
+    rotation: angle - (Number.parseFloat(snapshot.studioRotation) || 0),
+  });
+  restoreStudioRotation(element, snapshot);
+}
+
+/** The angle a rotate gesture starts from, as the element shows it. */
+export function readRotationBase(element: HTMLElement, plain: boolean): number {
+  if (plain) return readCssRotation(element);
+  const gsapRotation = Number(getOffsetDragGsap(element)?.getProperty(element, "rotation") ?? 0);
+  return gsapRotation + readStudioRotation(element).angle;
+}

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

@@ -71,7 +71,9 @@ function HookHost({
   element,
   previewIframeRef,
   onApplyScope,
+  projectId = "proj",
 }: {
+  projectId?: string;
   onState: (state: ReturnType<typeof useColorGradingController>) => void;
   onSetAttributeLive: (attr: string, value: string | null) => void;
   element: DomEditSelection;
@@ -79,7 +81,7 @@ function HookHost({
   onApplyScope?: ApplyScope;
 }) {
   const state = useColorGradingController({
-    projectId: "proj",
+    projectId,
     element,
     previewIframeRef,
     onSetAttributeLive,
@@ -94,6 +96,7 @@ function renderHook(
   initialElement: DomEditSelection = makeElement(),
   previewIframeRef?: React.RefObject<HTMLIFrameElement | null>,
   onApplyScope?: ApplyScope,
+  projectId?: string,
 ) {
   const host = document.createElement("div");
   document.body.append(host);
@@ -108,6 +111,7 @@ function renderHook(
           element,
           previewIframeRef,
           onApplyScope,
+          projectId,
         }),
       );
     });
@@ -763,6 +767,37 @@ describe("useColorGradingController", () => {
     act(() => second.root.unmount());
     vi.unstubAllGlobals();
   });
+
+  it("keeps media metadata apart for 'p:a' + 'b.mp4' and 'p' + 'a:b.mp4'", async () => {
+    const video = (src: string) => {
+      const el = document.createElement("video");
+      el.setAttribute("src", src);
+      return el;
+    };
+    const fetchMock = vi.fn().mockResolvedValue({
+      ok: true,
+      json: () => Promise.resolve({ metadata: { kind: "video", color: { dynamicRange: "hdr" } } }),
+    } as unknown as Response);
+    vi.stubGlobal("fetch", fetchMock);
+    for (const [projectId, src] of [
+      ["p:a", "b.mp4"],
+      ["p", "a:b.mp4"],
+    ]) {
+      const { root } = renderHook(
+        vi.fn(),
+        makeElement({ element: video(src) }),
+        undefined,
+        undefined,
+        projectId,
+      );
+      await act(async () => {
+        await Promise.resolve();
+      });
+      act(() => root.unmount());
+    }
+    expect(fetchMock).toHaveBeenCalledTimes(2);
+    vi.unstubAllGlobals();
+  });
 });
 
 describe("useColorGradingController after the preview iframe is replaced", () => {

package/src/components/editor/useColorGradingController.ts

@@ -284,13 +284,13 @@ export function useColorGradingController({
   useEffect(() => {
     setMediaMetadata(null);
     if (!selectedAssetPath) return;
-    const cacheKey = `${projectId}:${selectedAssetPath}`;
+    const cacheKey = mediaMetadataUrl(projectId, selectedAssetPath);
     if (MEDIA_METADATA_CACHE.has(cacheKey)) {
       setMediaMetadata(MEDIA_METADATA_CACHE.get(cacheKey) ?? null);
       return;
     }
     const controller = new AbortController();
-    fetch(mediaMetadataUrl(projectId, selectedAssetPath), { signal: controller.signal })
+    fetch(cacheKey, { signal: controller.signal })
       .then(async (response) => {
         if (!response.ok) return { ok: false as const };
         const data: MediaMetadataResponse | null = await response.json();

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

@@ -46,6 +46,7 @@ function Harness({
     groupGestureRef: makeRef(null),
     blockedMoveRef: makeRef(null),
     onManualDragStartRef: makeRef(() => {}),
+    onBlockedMoveRef: makeRef(() => {}),
     onPathOffsetCommitRef: makeRef(onPathOffsetCommit),
     onGroupPathOffsetCommitRef: makeRef(async () => {}),
   });
@@ -226,3 +227,36 @@ describe("useDomEditNudge — selection cleanup keyed on stable identity", () =>
     elementB.remove();
   });
 });
+
+describe("useDomEditNudge carries the route its press chose", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    __resetForTests();
+  });
+  afterEach(() => vi.useRealTimers());
+
+  it("commits an element without GSAP on the CSS route", () => {
+    const host = document.createElement("div");
+    const root = createRoot(host);
+    const element = document.createElement("div");
+    document.body.append(element);
+    const commit = vi.fn();
+    act(() => {
+      root.render(
+        React.createElement(Harness, {
+          selection: makeSelection("Dot", element),
+          onPathOffsetCommit: commit,
+        }),
+      );
+    });
+    act(() => dispatchArrowRight());
+    act(() => vi.advanceTimersByTime(CANVAS_NUDGE_COMMIT_DEBOUNCE_MS + 10));
+    expect(commit).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.anything(),
+      expect.objectContaining({ plainTranslate: true }),
+    );
+    act(() => root.unmount());
+    element.remove();
+  });
+});