@hyperframes/studio 0.8.103 → 0.8.105

package/src/hooks/useGsapAwareEditing.test.tsx

@@ -4,6 +4,7 @@ import React, { act } from "react";
 import { afterEach, describe, expect, it, vi, type Mock } from "vitest";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import type { RotationCommit } from "../components/editor/rotationDraft";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
 import { mountReactHarness, withInlineLayoutBox } from "./domSelectionTestHarness";
 import { DomEditCropHandles } from "../components/editor/DomEditCropHandles";
@@ -41,6 +42,7 @@ vi.mock("./useSafeGsapCommitMutation", () => ({
 }));
 
 import { useGsapAwareEditing } from "./useGsapAwareEditing";
+import { tryGsapRotationIntercept } from "./gsapRuntimeBridge";
 
 afterEach(() => {
   vi.clearAllMocks();
@@ -54,8 +56,10 @@ function gsapPositioned(tag: string): HTMLElement {
 function mountResizeHandler(
   animations: GsapAnimation[],
   targetAnimations: GsapAnimation[] = animations,
+  gsapOwnsBox = true,
+  hasGsapWriter = true,
 ) {
-  const element = document.createElement("div");
+  const element = gsapOwnsBox ? gsapPositioned("div") : document.createElement("div");
   const selection = { element, id: "clip", selector: "#clip" } as unknown as DomEditSelection;
   const fallback = vi.fn().mockResolvedValue(undefined);
   const anchorSave = vi.fn().mockResolvedValue(undefined);
@@ -63,6 +67,7 @@ function mountResizeHandler(
   const elementOffset = vi.fn(() => ({ save: anchorSave, rollback: anchorRollback }));
   const commitMutation = vi.fn().mockResolvedValue(undefined);
   const commitPatch = vi.fn().mockResolvedValue(undefined);
+  const fetchAnimations = vi.fn(() => vi.fn().mockResolvedValue(targetAnimations));
   let resize:
     | ((
         selection: DomEditSelection,
@@ -76,14 +81,15 @@ function mountResizeHandler(
     const editing = useGsapAwareEditing({
       domEditSelection: selection,
       selectedGsapAnimations: animations,
-      gsapCommitMutation: commitMutation,
+      gsapCommitMutation: hasGsapWriter ? commitMutation : null,
       previewIframeRef: { current: null },
       showToast: vi.fn(),
       bumpGsapCache: vi.fn(),
-      makeFetchFallback: () => vi.fn().mockResolvedValue(targetAnimations),
+      makeFetchFallback: fetchAnimations,
       trackGsapInteractionFailure: vi.fn(),
       stageElementPositionOffset: elementOffset,
       handleDomBoxSizeCommit: fallback,
+      handleDomRotationCommit: vi.fn(),
       commitPositionPatchToHtml: commitPatch,
       addGsapAnimation: vi.fn(),
       convertToKeyframes: vi.fn(),
@@ -103,6 +109,7 @@ function mountResizeHandler(
     anchorRollback,
     commitMutation,
     commitPatch,
+    fetchAnimations,
     resize: resize!,
     property: property!,
     root,
@@ -116,13 +123,21 @@ function mountGroupHandler({
   makeFetchFallback,
   trackGsapInteractionFailure = vi.fn(),
   stageElementPositionOffset = vi.fn(),
+  handleDomRotationCommit = vi.fn(),
 }: Pick<AwareEditingParams, "gsapCommitMutation" | "makeFetchFallback"> &
-  Partial<Pick<AwareEditingParams, "trackGsapInteractionFailure" | "stageElementPositionOffset">>) {
+  Partial<
+    Pick<
+      AwareEditingParams,
+      "trackGsapInteractionFailure" | "stageElementPositionOffset" | "handleDomRotationCommit"
+    >
+  >) {
   let groupCommit!: (updates: DomEditGroupPathOffsetCommit[]) => Promise<void>;
   let pathOffsetCommit!: (
     selection: DomEditSelection,
     next: { x: number; y: number },
+    route?: { plainTranslate?: boolean },
   ) => Promise<void>;
+  let rotationCommit!: (selection: DomEditSelection, next: RotationCommit) => Promise<void>;
   function Harness() {
     const editing = useGsapAwareEditing({
       domEditSelection: null,
@@ -135,6 +150,7 @@ function mountGroupHandler({
       trackGsapInteractionFailure,
       stageElementPositionOffset,
       handleDomBoxSizeCommit: vi.fn(),
+      handleDomRotationCommit,
       commitPositionPatchToHtml: vi.fn(),
       addGsapAnimation: vi.fn(),
       convertToKeyframes: vi.fn(),
@@ -143,13 +159,19 @@ function mountGroupHandler({
     });
     groupCommit = editing.handleGsapAwareGroupPathOffsetCommit;
     pathOffsetCommit = editing.handleGsapAwarePathOffsetCommit;
+    rotationCommit = editing.handleGsapAwareRotationCommit;
     return null;
   }
   const root = mountReactHarness(<Harness />);
   return {
     groupCommit: (updates: DomEditGroupPathOffsetCommit[]) => groupCommit(updates),
-    pathOffsetCommit: (selection: DomEditSelection, next: { x: number; y: number }) =>
-      pathOffsetCommit(selection, next),
+    pathOffsetCommit: (
+      selection: DomEditSelection,
+      next: { x: number; y: number },
+      route?: { plainTranslate?: boolean },
+    ) => pathOffsetCommit(selection, next, route),
+    rotationCommit: (selection: DomEditSelection, next: RotationCommit) =>
+      rotationCommit(selection, next),
     root,
   };
 }
@@ -167,7 +189,7 @@ describe("useGsapAwareEditing moves of an element GSAP does not position", () =>
     });
     const box = { element: document.createElement("div"), id: "box", selector: "#box" };
     await act(() => pathOffsetCommit(box as unknown as DomEditSelection, { x: 130.25, y: 90 }));
-    expect(stageElementPositionOffset).toHaveBeenCalledWith(box, { x: 130.25, y: 90 });
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(box, { x: 130.25, y: 90 }, true);
     expect(save).toHaveBeenCalledTimes(1);
     expect(gsapCommitMutation).not.toHaveBeenCalled();
     expect(makeFetchFallback).not.toHaveBeenCalled();
@@ -176,6 +198,127 @@ describe("useGsapAwareEditing moves of an element GSAP does not position", () =>
   });
 });
 
+describe("useGsapAwareEditing keeps the route a gesture chose at press", () => {
+  it.each([
+    ["the CSS route, on an element GSAP has since taken over", true, () => gsapPositioned("div")],
+    [
+      "the GSAP route, on an element that now looks GSAP-free",
+      false,
+      () => document.createElement("div"),
+    ],
+  ])("%s", async (_, plainTranslate, makeElement) => {
+    mocks.drag.mockResolvedValue({ status: "persisted" });
+    const save = vi.fn().mockResolvedValue(undefined);
+    const stageElementPositionOffset = vi.fn(() => ({ save, rollback: vi.fn() }));
+    const { pathOffsetCommit, groupCommit, root } = mountGroupHandler({
+      gsapCommitMutation: vi.fn().mockResolvedValue(undefined),
+      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
+      stageElementPositionOffset,
+    });
+    const box = {
+      element: makeElement(),
+      id: "box",
+      selector: "#box",
+    } as unknown as DomEditSelection;
+    await act(() => pathOffsetCommit(box, { x: 40, y: 20 }, { plainTranslate }));
+    await act(() => groupCommit([{ selection: box, next: { x: 40, y: 20 }, plainTranslate }]));
+    expect(stageElementPositionOffset.mock.calls.length).toBe(plainTranslate ? 2 : 0);
+    expect(mocks.drag.mock.calls.some((call) => call[0] === box)).toBe(!plainTranslate);
+    act(() => root.unmount());
+  });
+});
+
+describe("useGsapAwareEditing refuses a group GSAP took over before writing any member", () => {
+  it("writes no member when one CSS-route member has been folded since the press", async () => {
+    const stageElementPositionOffset = vi.fn(() => ({ save: vi.fn(), rollback: vi.fn() }));
+    const { groupCommit, root } = mountGroupHandler({
+      gsapCommitMutation: vi.fn().mockResolvedValue(undefined),
+      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
+      stageElementPositionOffset,
+    });
+    const card = {
+      element: document.createElement("div"),
+      id: "card",
+    } as unknown as DomEditSelection;
+    const folded = Object.assign(document.createElement("div"), {
+      _gsap: { renderTransform: () => {}, x: "94px", y: "66px" },
+    });
+    const box = { element: folded, id: "box" } as unknown as DomEditSelection;
+    await expect(
+      act(() =>
+        groupCommit([
+          { selection: card, next: { x: 1, y: 2 }, plainTranslate: true },
+          { selection: box, next: { x: 1, y: 2 }, plainTranslate: true },
+        ]),
+      ),
+    ).rejects.toThrow(/animation took over/);
+    expect(stageElementPositionOffset).not.toHaveBeenCalled();
+    act(() => root.unmount());
+  });
+});
+
+describe("useGsapAwareEditing rotation routing", () => {
+  function rotate(element: HTMLElement) {
+    const handleDomRotationCommit = vi.fn().mockResolvedValue(undefined);
+    const gsapCommitMutation = vi.fn();
+    const h = mountGroupHandler({
+      gsapCommitMutation,
+      makeFetchFallback: () => vi.fn().mockResolvedValue([]),
+      handleDomRotationCommit,
+    });
+    const box = { element, id: "box", selector: "#box" } as unknown as DomEditSelection;
+    return { ...h, box, handleDomRotationCommit, gsapCommitMutation };
+  }
+
+  it("turns an element GSAP does not turn by the CSS writer, with no GSAP write", async () => {
+    const h = rotate(document.createElement("div"));
+    await act(() => h.rotationCommit(h.box, { angle: 55 }));
+    expect(h.handleDomRotationCommit).toHaveBeenCalledWith(h.box, { angle: 55 });
+    expect(tryGsapRotationIntercept).not.toHaveBeenCalled();
+    expect(h.gsapCommitMutation).not.toHaveBeenCalled();
+    act(() => h.root.unmount());
+  });
+
+  it("leaves an element a GSAP tween turns to the GSAP rotation route", async () => {
+    vi.mocked(tryGsapRotationIntercept).mockResolvedValue({ status: "persisted" });
+    const element = document.createElement("div");
+    const h = rotate(element);
+    const tween = { vars: { rotation: 30 }, targets: () => [element] };
+    Object.assign(window, { __timelines: { main: { getChildren: () => [tween] } } });
+    try {
+      await act(() => h.rotationCommit(h.box, { angle: 55 }));
+    } finally {
+      delete (window as { __timelines?: unknown }).__timelines;
+    }
+    expect(tryGsapRotationIntercept).toHaveBeenCalledTimes(1);
+    expect(h.handleDomRotationCommit).not.toHaveBeenCalled();
+    act(() => h.root.unmount());
+  });
+
+  it("saves a turn the press drew as CSS by the CSS writer, even once a GSAP tween turns the element", async () => {
+    const element = document.createElement("div");
+    const h = rotate(element);
+    const tween = { vars: { rotation: 30 }, targets: () => [element] };
+    Object.assign(window, { __timelines: { main: { getChildren: () => [tween] } } });
+    const plain = {
+      property: "rotate",
+      before: "",
+      after: "",
+      share: 0,
+      sign: 1,
+      inline: false,
+    } as const;
+    try {
+      await act(() => h.rotationCommit(h.box, { angle: 55, plain }));
+    } finally {
+      delete (window as { __timelines?: unknown }).__timelines;
+    }
+    expect(h.handleDomRotationCommit).toHaveBeenCalledWith(h.box, { angle: 55, plain });
+    expect(tryGsapRotationIntercept).not.toHaveBeenCalled();
+    act(() => h.root.unmount());
+  });
+});
+
 describe("useGsapAwareEditing shared-tween moves", () => {
   it("saves a single drag through the element's own offset", async () => {
     mocks.drag.mockResolvedValue({ status: "element-offset" });
@@ -189,7 +332,7 @@ describe("useGsapAwareEditing shared-tween moves", () => {
     });
     const word = { element: gsapPositioned("span"), hfId: "w0", selector: ".w" };
     await act(() => pathOffsetCommit(word as unknown as DomEditSelection, { x: 40, y: 20 }));
-    expect(stageElementPositionOffset).toHaveBeenCalledWith(word, { x: 40, y: 20 });
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(word, { x: 40, y: 20 }, false);
     expect(save).toHaveBeenCalledTimes(1);
     expect(commitMutation).not.toHaveBeenCalled();
     act(() => root.unmount());
@@ -219,8 +362,18 @@ describe("useGsapAwareEditing shared-tween moves", () => {
       ] as unknown as DomEditGroupPathOffsetCommit[]),
     );
     const groupKey = expect.stringMatching(/^group-drag:\d+$/);
-    expect(stageElementPositionOffset).toHaveBeenCalledWith(word, { x: 40, y: 20 }, groupKey);
-    expect(stageElementPositionOffset).toHaveBeenCalledWith(plain, { x: 40, y: 20 }, groupKey);
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(
+      word,
+      { x: 40, y: 20 },
+      false,
+      groupKey,
+    );
+    expect(stageElementPositionOffset).toHaveBeenCalledWith(
+      plain,
+      { x: 40, y: 20 },
+      true,
+      groupKey,
+    );
     expect(mocks.drag.mock.calls.some((call) => call[0] === plain)).toBe(false);
     act(() => root.unmount());
   });
@@ -252,6 +405,36 @@ describe("useGsapAwareEditing anchored resize", () => {
     act(() => h.root.unmount());
   });
 
+  it("resizes a box GSAP does not own through the CSS writer, with no GSAP write or fetch", async () => {
+    const h = mountResizeHandler([], [], false);
+    const restore = vi.fn();
+    await act(() =>
+      h.resize(h.selection, { width: 300, height: 200 }, { x: -50.5, y: -25 }, restore),
+    );
+    expect(h.fallback).toHaveBeenCalledWith(
+      h.selection,
+      { width: 300, height: 200 },
+      { x: -50.5, y: -25 },
+      restore,
+    );
+    expect(mocks.resize).not.toHaveBeenCalled();
+    expect(mocks.drag).not.toHaveBeenCalled();
+    expect(h.commitMutation).not.toHaveBeenCalled();
+    expect(h.fetchAnimations).not.toHaveBeenCalled();
+    act(() => h.root.unmount());
+  });
+
+  it("fails a GSAP-owned resize loudly when there is no GSAP writer, never writing CSS", async () => {
+    const h = mountResizeHandler([], [], true, false);
+    const restore = vi.fn();
+    await expect(
+      act(() => h.resize(h.selection, { width: 300, height: 200 }, undefined, restore)),
+    ).rejects.toThrow("no GSAP writer");
+    expect(h.fallback).not.toHaveBeenCalled();
+    expect(restore).toHaveBeenCalledTimes(1);
+    act(() => h.root.unmount());
+  });
+
   it("rejects a blocked resize instead of falling through to a competing DOM write", async () => {
     mocks.resize.mockResolvedValue({ status: "blocked", reason: "source-uneditable" });
     const h = mountResizeHandler([]);
@@ -287,7 +470,7 @@ describe("useGsapAwareEditing anchored resize", () => {
     await act(() => h.resize(h.selection, { width: 300, height: 200 }, { x: -50, y: -25 }));
     const key = h.commitMutation.mock.calls[0]![2].coalesceKey;
     expect(key).toMatch(/^tx:/);
-    expect(h.elementOffset).toHaveBeenCalledWith(h.selection, { x: -50, y: -25 }, key);
+    expect(h.elementOffset).toHaveBeenCalledWith(h.selection, { x: -50, y: -25 }, false, key);
     expect(h.anchorSave.mock.invocationCallOrder[0]).toBeGreaterThan(
       h.commitMutation.mock.invocationCallOrder[0]!,
     );

package/src/hooks/useGsapAwareEditing.ts

@@ -7,6 +7,7 @@
  * Extracted from useDomEditSession to isolate the GSAP intercept routing
  * from the rest of the editing orchestration.
  */
+import type { RotationCommit } from "../components/editor/rotationDraft";
 import { useCallback } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
@@ -28,15 +29,18 @@ import type {
 import { setElementGsapPosition } from "../utils/elementGsap";
 import { logResize, logResizeSettle } from "../utils/resizeDebug";
 import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
+import type { MoveCommitOptions } from "../components/editor/domEditOverlayGestures";
 import { runGestureTransaction } from "./gestureTransaction";
 import {
+  gsapWritesBox,
   gsapWritesPosition,
+  gsapWritesRotation,
   hasNonHoldTweenForElement,
   POSITION_CHANNELS,
 } from "./gsapRuntimeKeyframes";
 import { assertGsapEditPersisted, saveMove } from "./gsapEditOutcome";
 import type { GsapAnimationFetchOptions } from "./useGsapAnimationFetchFallback";
-import type { ElementOffsetStagerDeps } from "./elementOffsetStager";
+import { refuseGsapTakeover, type ElementOffsetStagerDeps } from "./elementOffsetStager";
 import {
   prepareCropResize,
   saveCropResize,
@@ -80,12 +84,15 @@ export interface UseGsapAwareEditingParams {
   stageElementPositionOffset: (
     selection: DomEditSelection,
     next: { x: number; y: number },
+    plainTranslate: boolean,
     coalesceKey?: string,
   ) => { save: () => Promise<void>; rollback: () => void };
+  handleDomRotationCommit: (selection: DomEditSelection, next: RotationCommit) => Promise<void>;
   handleDomBoxSizeCommit: (
     selection: DomEditSelection,
     next: { width: number; height: number },
     offset?: { x: number; y: number },
+    restore?: () => void,
   ) => Promise<void>;
   commitPositionPatchToHtml: ElementOffsetStagerDeps["commitPositionPatchToHtml"];
   // GSAP script commit ops (from useGsapScriptCommits)
@@ -131,6 +138,7 @@ export function useGsapAwareEditing({
   trackGsapInteractionFailure,
   stageElementPositionOffset,
   handleDomBoxSizeCommit,
+  handleDomRotationCommit,
   commitPositionPatchToHtml,
   addGsapAnimation,
   convertToKeyframes,
@@ -151,10 +159,11 @@ export function useGsapAwareEditing({
     async (
       selection: DomEditSelection,
       next: { x: number; y: number },
-      modifiers?: { altKey?: boolean },
+      modifiers?: MoveCommitOptions,
     ) => {
-      if (!gsapWritesPosition(selection.element))
-        return stageElementPositionOffset(selection, next).save();
+      // A gesture and the panel carry their route; webmcp's moveTo decides here.
+      if (modifiers?.plainTranslate ?? !gsapWritesPosition(selection.element))
+        return stageElementPositionOffset(selection, next, true).save();
       if (gsapCommitMutation) {
         try {
           const ownedAnimations = getGsapAnimationsForSelection(selection);
@@ -170,7 +179,7 @@ export function useGsapAwareEditing({
             makeFetchFallback(selection),
             modifiers,
           );
-          await saveMove(outcome, () => stageElementPositionOffset(selection, next).save());
+          await saveMove(outcome, () => stageElementPositionOffset(selection, next, false).save());
         } catch (error) {
           trackGsapInteractionFailure(error, selection, "drag", "Move animated layer");
           throw error;
@@ -197,13 +206,9 @@ export function useGsapAwareEditing({
       // it survives the N sequential server round-trips) onto each commit —
       // otherwise each member records its own entry and it takes N presses to undo.
       const coalesceKey = `group-drag:${++groupDragCommitCounter}`;
-      // Members are written one at a time, and a write that re-renders the preview
-      // re-runs the whole script — which still holds the OLD position of every
-      // member not yet written. Those members snap back to where they started and
-      // stay there until their own write lands, which is the single element seen
-      // jumping mid-commit while the rest of the group sat still. The drafted
-      // positions are already on screen, so holding the render until the last
-      // member has been written costs nothing and never shows a half-moved group.
+      // Members are written one at a time, and a re-render re-runs the script with the OLD
+      // position of every member not yet written, so they snap back until their own write
+      // lands. The drafts are already on screen: hold the render until the last member.
       let renderOnCommit = false;
       const previewFallbackLatch = { pending: false };
       const withGroupOptions = (options: CommitMutationOptions): CommitMutationOptions => ({
@@ -236,17 +241,17 @@ export function useGsapAwareEditing({
         return Promise.resolve();
       };
       const preflightAnimations = new Map<DomEditSelection, GsapAnimation[]>();
-      const offsetMembers = new Set<DomEditSelection>();
-      // Editability is user-atomic: prove every member can be written before
-      // the first source mutation. Network failures after this point retain the
-      // existing multi-request semantics, but a blocked member can never leave
-      // earlier siblings partially moved.
-      // Every member reads the same file, and a preflight writes nothing — so run
-      // them together. The parse layer shares one in-flight request per file, which
-      // turns N sequential round trips into one.
+      // Members saved on themselves, each with its route: true for its CSS translate.
+      const offsetMembers = new Map<DomEditSelection, boolean>();
+      // Editability is user-atomic: prove every member can be written before the first source
+      // mutation, so a blocked member never leaves earlier siblings partially moved. Preflights
+      // write nothing and share one in-flight parse per file, so they run together.
       const preflightResults = await Promise.allSettled(
-        updates.map(async ({ selection }) => {
-          if (!gsapWritesPosition(selection.element)) return void offsetMembers.add(selection);
+        updates.map(async ({ selection, plainTranslate }) => {
+          if (plainTranslate ?? !gsapWritesPosition(selection.element)) {
+            refuseGsapTakeover(selection.element, showToast);
+            return void offsetMembers.set(selection, true);
+          }
           const animations = await makeFetchFallback(selection, { failOnFetchError: true })();
           preflightAnimations.set(selection, animations);
           const outcome = await tryGsapDragIntercept(
@@ -258,7 +263,7 @@ export function useGsapAwareEditing({
             undefined,
             { preflightOnly: true, group: true },
           );
-          if (outcome.status === "element-offset") offsetMembers.add(selection);
+          if (outcome.status === "element-offset") offsetMembers.set(selection, false);
           assertGsapEditPersisted(outcome);
         }),
       );
@@ -277,8 +282,9 @@ export function useGsapAwareEditing({
       );
       for (const [index, { selection, next }] of updates.entries()) {
         renderOnCommit = index === lastScriptWrite;
-        if (offsetMembers.has(selection)) {
-          await stageElementPositionOffset(selection, next, coalesceKey).save();
+        const plain = offsetMembers.get(selection);
+        if (plain !== undefined) {
+          await stageElementPositionOffset(selection, next, plain, coalesceKey).save();
           continue;
         }
         try {
@@ -318,6 +324,7 @@ export function useGsapAwareEditing({
       makeFetchFallback,
       trackGsapInteractionFailure,
       stageElementPositionOffset,
+      showToast,
     ],
   );
 
@@ -328,6 +335,8 @@ export function useGsapAwareEditing({
       offset?: { x: number; y: number },
       restore: () => void = () => undefined,
     ) => {
+      if (!gsapWritesBox(selection.element))
+        return handleDomBoxSizeCommit(selection, next, offset, restore);
       let targetAnimations: GsapAnimation[];
       try {
         const ownedAnimations = getGsapAnimationsForSelection(selection);
@@ -411,7 +420,8 @@ export function useGsapAwareEditing({
                 );
                 // Saved after the size, under its undo key, so the two are one step.
                 await saveMove(dragOutcome, async () => {
-                  anchorMove = stageElementPositionOffset(selection, offset, coalesceKey);
+                  const plain = !gsapWritesPosition(selection.element);
+                  anchorMove = stageElementPositionOffset(selection, offset, plain, coalesceKey);
                 });
               }
               logResizeSettle(selection.element, ownsDragOffset ? "gsap-scale" : "gsap-size");
@@ -421,13 +431,7 @@ export function useGsapAwareEditing({
               throw error;
             }
           }
-          logResize("dom-route", {
-            next,
-            offset: offset ?? null,
-            hadGsapMutation: !!gsapCommitMutation,
-          });
-          logResizeSettle(selection.element, "dom-route");
-          await handleDomBoxSizeCommit(selection, next, offset);
+          throw new Error("Resize of a GSAP-owned box has no GSAP writer");
         },
         afterBufferedCommitsSaved: async () => {
           await anchorMove?.save();
@@ -456,17 +460,13 @@ export function useGsapAwareEditing({
   );
 
   const handleGsapAwareRotationCommit = useCallback(
-    async (selection: DomEditSelection, next: { angle: number }) => {
+    async (selection: DomEditSelection, next: RotationCommit) => {
+      if (next.plain || !gsapWritesRotation(selection.element))
+        return handleDomRotationCommit(selection, next);
       if (gsapCommitMutation) {
         try {
-          const ownedAnimations = getGsapAnimationsForSelection(selection);
-          const targetAnimations = Array.isArray(ownedAnimations)
-            ? ownedAnimations
-            : await ownedAnimations;
-          // Single source of truth for rotation too: tryGsapRotationIntercept handles
-          // tweened elements (keyframes) and static ones (a tl.set), so there's no
-          // CSS-var fallback. Selectorless/computed source rejects so the gesture
-          // transaction can restore its draft instead of reporting a false success.
+          const targetAnimations = await getGsapAnimationsForSelection(selection);
+          // A keyframe or a tl.set; a computed source rejects, so the gesture restores its draft.
           const outcome = await tryGsapRotationIntercept(
             selection,
             next.angle,
@@ -488,6 +488,7 @@ export function useGsapAwareEditing({
       makeFetchFallback,
       trackGsapInteractionFailure,
       getGsapAnimationsForSelection,
+      handleDomRotationCommit,
     ],
   );
 

package/src/hooks/useInlineTextEdit.test.tsx

@@ -345,7 +345,7 @@ describe("useInlineTextEdit", () => {
       act(() => root.unmount());
     });
 
-    it("cancels on Escape", () => {
+    it("commits on Escape", () => {
       const element = heading("Original");
       const { controls, root, onCommit } = mount();
       act(() => {
@@ -355,8 +355,38 @@ describe("useInlineTextEdit", () => {
       element.textContent = "half-typed";
       press(element, "Escape");
 
-      expect(element.textContent).toBe("Original");
-      expect(onCommit).not.toHaveBeenCalled();
+      expect(element.textContent).toBe("half-typed");
+      expect(onCommit).toHaveBeenCalledTimes(1);
+      expect(controls().session).toBeNull();
+      act(() => root.unmount());
+    });
+
+    // The save carries the styled markup it replaced, which is what undo puts back.
+    it("saves typing ended by Escape once, with the markup it replaced", async () => {
+      const element = heading();
+      element.innerHTML = 'Hello <span style="color: red">world</span>';
+      const { controls, root, onCommit } = mount();
+      act(() => {
+        controls().start(element);
+      });
+      await act(async () => {
+        await new Promise((resolve) => requestAnimationFrame(() => resolve(null)));
+      });
+      expect(document.activeElement).toBe(element);
+
+      element.innerHTML = 'Hello <span style="color: red">world</span>!';
+      press(element, "Escape");
+
+      expect(onCommit.mock.calls).toEqual([
+        [
+          {
+            element,
+            html: 'Hello <span style="color: red">world</span>!',
+            previousHtml: 'Hello <span style="color: red">world</span>',
+          },
+        ],
+      ]);
+      expect(element.innerHTML).toBe('Hello <span style="color: red">world</span>!');
       act(() => root.unmount());
     });
 

package/src/hooks/useInlineTextEdit.ts

@@ -203,7 +203,7 @@ export function useInlineTextEdit({
       }
       if (event.key === "Escape") {
         event.preventDefault();
-        cancel();
+        commit();
       }
     };
     // Clicking away keeps the work, which is what every other field in Studio
@@ -243,7 +243,7 @@ export function useInlineTextEdit({
       element.removeEventListener("dragover", onDragOver);
       element.removeEventListener("drop", onDrop);
     };
-  }, [session, commit, cancel]);
+  }, [session, commit]);
 
   // Unmount keeps the typed words, as blur does. Read through a ref so a new
   // onCommit never closes the session mid-edit.

package/src/player/components/ClipContextMenu.tsx

@@ -201,7 +201,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       <button
         type="button"
         role="menuitem"
-        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left"
+        className="w-full flex items-center justify-between px-3 py-1.5 text-xs text-danger-ink hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden cursor-pointer text-left"
         onClick={() => {
           onDelete(element);
           onClose();

package/src/player/components/CompositionThumbnail.tsx

@@ -1,7 +1,11 @@
 import { memo, useMemo, type CSSProperties } from "react";
 import { useThumbnailLease } from "../../hooks/useThumbnailLease";
 import { useThumbnailStripSize } from "../../hooks/useThumbnailStripSize";
-import { createThumbnailKey, type ThumbnailPriority } from "../lib/thumbnailScheduler";
+import {
+  createThumbnailKey,
+  type ThumbnailPriority,
+  type ThumbnailRequest,
+} from "../lib/thumbnailScheduler";
 import { TIMELINE_VIEWPORT_BUDGETS } from "../lib/timelineViewportBudgets";
 import { computeThumbnailStrip, probeImageAspect } from "./thumbnailUtils";
 
@@ -85,6 +89,22 @@ export function compositionPathOfPreviewUrl(previewUrl: string): string {
   return match?.[1] ? decodeURIComponent(match[1]) : "index.html";
 }
 
+export function compositionThumbnailRequest(
+  url: string,
+  projectId: string,
+  { sessionEpoch = 0, priority = "visible", rich = false }: Partial<ThumbnailRequest> = {},
+): ThumbnailRequest {
+  return {
+    key: createThumbnailKey({ kind: "composition", url }),
+    projectId,
+    sessionEpoch,
+    kind: "composition",
+    priority,
+    rich,
+    load: (signal: AbortSignal) => loadCompositionImage(url, signal),
+  };
+}
+
 async function loadCompositionImage(url: string, signal: AbortSignal) {
   const response = await fetch(url, { signal });
   if (!response.ok) throw new Error(`Composition thumbnail failed (${response.status})`);
@@ -132,15 +152,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
     contentRevision,
   });
   const request = useMemo(
-    () => ({
-      key: createThumbnailKey({ kind: "composition", url }),
-      projectId,
-      sessionEpoch,
-      kind: "composition" as const,
-      priority,
-      rich: true,
-      load: (signal: AbortSignal) => loadCompositionImage(url, signal),
-    }),
+    () => compositionThumbnailRequest(url, projectId, { sessionEpoch, priority, rich: true }),
     [priority, projectId, sessionEpoch, url],
   );
   const snapshot = useThumbnailLease(request);
@@ -182,7 +194,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
         </div>
       )}
       {snapshot.status === "loading" && (
-        <div className="absolute inset-0 animate-pulse bg-white/[0.035]" />
+        <div className="absolute inset-0 animate-pulse bg-text-0/[0.035]" />
       )}
       {label && (
         <div className="absolute inset-y-0 left-3 z-10 flex items-center">