@hyperframes/studio 0.8.102 → 0.8.104

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

@@ -267,3 +267,35 @@ describe("usePreviewInteraction", () => {
     cleanup();
   });
 });
+
+describe("a refused move's toast", () => {
+  it("gives the refusal's own reason first, else the selection's", () => {
+    const showToast = vi.fn();
+    let blocked!: (selection: DomEditSelection, reason?: string) => void;
+    function Harness() {
+      blocked = usePreviewInteraction({
+        captionEditMode: false,
+        compositionLoading: false,
+        previewIframeRef: { current: null },
+        showToast,
+        applyDomSelection: vi.fn(),
+        resolveDomSelectionFromPreviewPoint: vi.fn(async () => null),
+        resolveAllDomSelectionsFromPreviewPoint: vi.fn(async () => []),
+        updateDomEditHoverSelection: vi.fn(),
+        setActiveGroupElement: vi.fn(),
+      }).handleBlockedDomMove;
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(React.createElement(Harness)));
+    const selection = makeSelection("Box", document.createElement("div"));
+    selection.capabilities.reasonIfDisabled = "Locked layer.";
+    blocked(selection, "Studio can't read it.");
+    blocked(selection);
+    act(() => root.unmount());
+    expect(showToast.mock.calls).toEqual([
+      ["Studio can't read it.", "info"],
+      ["Locked layer.", "info"],
+    ]);
+  });
+});

package/src/hooks/usePreviewInteraction.ts

@@ -260,9 +260,10 @@ export function usePreviewInteraction({
   }, [updateDomEditHoverSelection]);
 
   const handleBlockedDomMove = useCallback(
-    (selection: DomEditSelection) => {
+    (selection: DomEditSelection, reason?: string) => {
       showToast(
-        selection.capabilities.reasonIfDisabled ??
+        reason ??
+          selection.capabilities.reasonIfDisabled ??
           "This element can't be adjusted directly from the preview.",
         "info",
       );

package/src/player/components/TimelineClipFades.test.tsx

@@ -1,7 +1,7 @@
 // @vitest-environment happy-dom
 
 import React, { act } from "react";
-import { createRoot } from "react-dom/client";
+import { createRoot, type Root } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import type { TimelineElement } from "../store/playerStore";
 import { TimelineClipFades } from "./TimelineClipFades";
@@ -9,7 +9,10 @@ import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+const mounted: Root[] = [];
+
 afterEach(() => {
+  act(() => mounted.splice(0).forEach((root) => root.unmount()));
   document.body.innerHTML = "";
 });
 
@@ -31,6 +34,7 @@ function render(
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
+  mounted.push(root);
   const onSetElementAttributeLive = vi.fn();
   const onSetElementAttributeQuiet = vi.fn().mockResolvedValue(undefined);
   const onRevertElementAttributeLive = vi.fn();
@@ -97,6 +101,14 @@ describe("TimelineClipFades", () => {
     act(() => root.unmount());
   });
 
+  it("clips the ramps to the clip's rounded corners", () => {
+    const { host, root } = render(clip, { showHandles: false, provide: false });
+    const ramps = host.querySelector<SVGElement>('[data-testid="clip-fade-ramps"]');
+    expect(ramps?.style.overflow).toBe("hidden");
+    expect(ramps?.style.borderRadius).toBe("inherit");
+    act(() => root.unmount());
+  });
+
   it("renders nothing for a clip without fades when the handles are hidden", () => {
     const { host, root } = render(
       { ...clip, fadeIn: undefined, fadeOut: undefined },
@@ -113,7 +125,7 @@ describe("TimelineClipFades", () => {
     const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
     if (!handle) throw new Error("expected a fade-in handle");
     armCapture(handle);
-    // The handle sits at the 1 s mark (x=100). Drag 150 px right → 2.5 s.
+    // 150 px of rightward travel adds 1.5 s to the 1 s fade-in, wherever the press lands.
     act(() => handle.dispatchEvent(pointer("pointerdown", 100)));
     act(() => handle.dispatchEvent(pointer("pointermove", 200)));
     act(() => handle.dispatchEvent(pointer("pointermove", 250)));
@@ -134,7 +146,7 @@ describe("TimelineClipFades", () => {
     const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-out"]');
     if (!handle) throw new Error("expected a fade-out handle");
     armCapture(handle);
-    // Pressed at x=1000 with a 2 s fade-out. 300 px left → 5 s.
+    // 300 px of leftward travel adds 3 s to the 2 s fade-out, wherever the press lands.
     act(() => handle.dispatchEvent(pointer("pointerdown", 1000)));
     act(() => handle.dispatchEvent(pointer("pointermove", 700)));
     expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-out", "5");
@@ -179,6 +191,30 @@ describe("TimelineClipFades", () => {
     act(() => root.unmount());
   });
 
+  it("cancels a drag on Escape pressed while focus is elsewhere, and saves nothing", () => {
+    const { host, onSetElementAttributeQuiet, onRevertElementAttributeLive } = render(clip);
+    const elsewhere = document.createElement("button");
+    document.body.append(elsewhere);
+    elsewhere.focus();
+    const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    if (!handle) throw new Error("expected a fade-in handle");
+    armCapture(handle);
+    act(() => handle.dispatchEvent(pointer("pointerdown", 100)));
+    act(() => handle.dispatchEvent(pointer("pointermove", 300)));
+    expect(document.activeElement).toBe(elsewhere);
+    act(() => {
+      document.activeElement?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+    });
+    act(() => handle.dispatchEvent(pointer("pointerup", 300)));
+    expect(onSetElementAttributeQuiet).not.toHaveBeenCalled();
+    expect(onRevertElementAttributeLive).toHaveBeenCalledWith(clip, "data-fade-in");
+    expect(host.querySelector('[data-testid="clip-fade-in"]')?.getAttribute("points")).toBe(
+      "0,0 100,0 0,100",
+    );
+  });
+
   it.each([
     ["above the window", 300, -40],
     ["on the window's right edge", window.innerWidth, 10],
@@ -200,6 +236,70 @@ describe("TimelineClipFades", () => {
     act(() => root.unmount());
   });
 
+  it.each([
+    ["in", "Fade in 0.25 s"],
+    ["out", "Fade out 0.4 s"],
+  ])(
+    "gives the fade-%s handle a 24 px target and a tooltip naming its length",
+    async (edge, text) => {
+      const { host, root } = render({ ...clip, fadeIn: 0.25, fadeOut: 0.4 });
+      const handle = host.querySelector<HTMLElement>(`[data-testid="clip-fade-handle-${edge}"]`);
+      if (!handle) throw new Error(`expected a fade-${edge} handle`);
+      expect(parseFloat(handle.style.width)).toBeGreaterThanOrEqual(24);
+      expect(parseFloat(handle.style.height)).toBeGreaterThanOrEqual(24);
+      expect(handle.getAttribute("title")).toBe("");
+      act(() => handle.focus());
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+      expect(document.querySelector('[role="tooltip"]')?.textContent).toBe(text);
+      act(() => root.unmount());
+    },
+  );
+
+  it.each([0.3, 3])("pins the handles to the top corners for a %s s fade-in", (fadeIn) => {
+    const { host } = render({ ...clip, fadeIn, fadeOut: 0.4 });
+    const inHandle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    const fadeOut = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-out"]');
+    expect(inHandle?.style.left).toBe("0px");
+    expect(fadeOut?.style.left).toBe(`${1000 - 24}px`);
+  });
+
+  it("lengthens a fade by the pointer's inward travel from wherever the press lands", () => {
+    const { host, onSetElementAttributeLive } = render(clip);
+    const fadeIn = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    const fadeOut = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-out"]');
+    if (!fadeIn || !fadeOut) throw new Error("expected both handles");
+    armCapture(fadeIn);
+    armCapture(fadeOut);
+    act(() => fadeIn.dispatchEvent(pointer("pointerdown", 12)));
+    act(() => fadeIn.dispatchEvent(pointer("pointermove", 162)));
+    expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-in", "2.5");
+    act(() => fadeIn.dispatchEvent(pointer("pointerup", 162)));
+    act(() => fadeOut.dispatchEvent(pointer("pointerdown", 988, 2)));
+    act(() => fadeOut.dispatchEvent(pointer("pointermove", 888, 2)));
+    expect(onSetElementAttributeLive).toHaveBeenLastCalledWith(clip, "data-fade-out", "3");
+  });
+
+  it("paints the handles above the clip's waveform and thumbnail layers", () => {
+    const { host } = render(clip);
+    const handle = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    expect(Number(handle?.style.zIndex)).toBeGreaterThan(10);
+  });
+
+  it("splits a clip narrower than two targets between the handles", () => {
+    const { host } = render({ ...clip, duration: 0.3, fadeIn: 0.1, fadeOut: 0.1 });
+    const fadeIn = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-in"]');
+    const fadeOut = host.querySelector<HTMLElement>('[data-testid="clip-fade-handle-out"]');
+    expect([fadeIn?.style.left, fadeIn?.style.width]).toEqual(["0px", "15px"]);
+    expect([fadeOut?.style.left, fadeOut?.style.width]).toEqual(["15px", "15px"]);
+    const dot = fadeIn?.firstElementChild as HTMLElement;
+    expect(getComputedStyle(dot).width).toBe("10px");
+    // Layout is not real here; tests/e2e/fade-handles.mjs measures the box in Chrome.
+    expect(getComputedStyle(dot).flexShrink).toBe("0");
+    expect(getComputedStyle(dot).pointerEvents).toBe("none");
+  });
+
   it("does not let a press on the dot start the clip's own move gesture", () => {
     const outer = vi.fn();
     const { host, root } = render(clip, { onClipPointerDown: outer });