@hyperframes/studio 0.8.103 → 0.8.105

package/src/hooks/plainRotation.test.ts

@@ -0,0 +1,122 @@
+// @vitest-environment happy-dom
+
+import { describe, expect, it, vi } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import {
+  applyStudioRotation,
+  reapplyPositionEditsAfterSeek,
+} from "../components/editor/manualEdits";
+import { STUDIO_ROTATION_ATTR } from "../components/editor/manualEditsTypes";
+import type { ElementOffsetStagerDeps } from "./elementOffsetStager";
+import { savePlainRotation } from "./plainRotation";
+import { readShownRotation } from "../components/editor/plainTranslate";
+
+function rotate(
+  element: HTMLElement,
+  angle: number,
+  options: { save?: () => Promise<void>; readOnlyPreview?: boolean } = {},
+) {
+  element.id = "box";
+  document.body.append(element);
+  const commitPositionPatchToHtml = vi.fn<ElementOffsetStagerDeps["commitPositionPatchToHtml"]>(
+    options.save ?? (() => Promise.resolve()),
+  );
+  const selection = { element, id: "box", selector: "#box" } as unknown as DomEditSelection;
+  const saved = savePlainRotation(
+    { commitPositionPatchToHtml, readOnlyPreview: options.readOnlyPreview },
+    selection,
+    { angle },
+  );
+  return { saved, commitPositionPatchToHtml, selection };
+}
+
+describe("savePlainRotation", () => {
+  it("saves the element's own rotate, less what its transform turns, with no Studio marks", async () => {
+    const element = document.createElement("div");
+    element.style.transform = "rotate(10deg)";
+    const { saved, commitPositionPatchToHtml, selection } = rotate(element, 55);
+    await saved;
+    expect(element.style.getPropertyValue("rotate")).toBe("45deg");
+    expect(commitPositionPatchToHtml).toHaveBeenCalledWith(
+      selection,
+      [{ type: "inline-style", property: "rotate", value: "45deg" }],
+      expect.objectContaining({ label: "Rotate layer" }),
+    );
+    expect(element.hasAttribute(STUDIO_ROTATION_ATTR)).toBe(false);
+  });
+
+  it("drops a legacy Studio rotation in the same write, so a seek does not put its angle back", async () => {
+    const element = document.createElement("div");
+    applyStudioRotation(element, { angle: 15 });
+    const { saved, commitPositionPatchToHtml } = rotate(element, 40);
+    await saved;
+    const patches = commitPositionPatchToHtml.mock.calls[0]![1];
+    expect(patches).toContainEqual({
+      type: "attribute",
+      property: STUDIO_ROTATION_ATTR,
+      value: null,
+    });
+    expect(patches.at(-1)).toEqual({ type: "inline-style", property: "rotate", value: "40deg" });
+    reapplyPositionEditsAfterSeek(document);
+    expect(element.style.getPropertyValue("rotate")).toBe("40deg");
+  });
+
+  it("puts the live rotate back when the save fails", async () => {
+    const element = document.createElement("div");
+    element.style.setProperty("rotate", "12deg");
+    const { saved } = rotate(element, 30, { save: () => Promise.reject(new Error("offline")) });
+    await expect(saved).rejects.toThrow("offline");
+    expect(element.style.getPropertyValue("rotate")).toBe("12deg");
+  });
+
+  it("writes nothing in a read-only preview", async () => {
+    const element = document.createElement("div");
+    const { saved, commitPositionPatchToHtml } = rotate(element, 30, { readOnlyPreview: true });
+    await saved;
+    expect(element.style.getPropertyValue("rotate")).toBe("");
+    expect(commitPositionPatchToHtml).not.toHaveBeenCalled();
+  });
+
+  it("saves a transform-centred element's turn in its transform and puts it back on a failed save", async () => {
+    const element = document.createElement("div");
+    element.style.transform = "translate(-120px, -80px)";
+    const { saved, commitPositionPatchToHtml } = rotate(element, 25, {
+      save: () => Promise.reject(new Error("offline")),
+    });
+    expect(commitPositionPatchToHtml.mock.calls[0]![1]).toEqual([
+      {
+        type: "inline-style",
+        property: "transform",
+        value: "translate(-120px, -80px) rotate(25deg)",
+      },
+    ]);
+    await expect(saved).rejects.toThrow("offline");
+    expect(element.style.getPropertyValue("transform")).toBe("translate(-120px, -80px)");
+  });
+
+  it("makes an inline element inline-block, as a turn needs, and puts it back on a failed save", async () => {
+    const element = document.createElement("span");
+    element.style.setProperty("display", "inline");
+    const { saved, commitPositionPatchToHtml } = rotate(element, 20, {
+      save: () => Promise.reject(new Error("offline")),
+    });
+    expect(commitPositionPatchToHtml.mock.calls[0]![1]).toEqual([
+      { type: "inline-style", property: "display", value: "inline-block" },
+      { type: "inline-style", property: "rotate", value: "20deg" },
+    ]);
+    await expect(saved).rejects.toThrow("offline");
+    expect(element.style.getPropertyValue("display")).toBe("inline");
+  });
+});
+
+describe("readShownRotation", () => {
+  it("shows an element's own CSS turn, and GSAP's legacy reading once GSAP turns it", () => {
+    const element = document.createElement("div");
+    document.body.append(element);
+    element.style.setProperty("rotate", "25deg");
+    expect(readShownRotation(element)).toEqual({ angle: 25 });
+    Object.assign(element, { _gsap: { renderTransform: () => {} } });
+    applyStudioRotation(element, { angle: 15 });
+    expect(readShownRotation(element)).toEqual({ angle: 15 });
+  });
+});

package/src/hooks/plainRotation.ts

@@ -0,0 +1,42 @@
+import type { DomEditSelection } from "../components/editor/domEditing";
+import { captureStudioRotation, clearStudioRotation } from "../components/editor/manualEdits";
+import { buildClearRotationPatches } from "../components/editor/manualEditsDomPatches";
+import { STUDIO_ROTATION_ATTR } from "../components/editor/manualEditsTypes";
+import {
+  applyCssRotation,
+  restorePlainRotation,
+  type RotationCommit,
+} from "../components/editor/rotationDraft";
+import type { PatchOperation } from "../utils/sourcePatcher";
+import type { ElementOffsetStagerDeps } from "./elementOffsetStager";
+
+let plainRotateCounter = 0;
+
+/** GSAP does not turn the element: `next` is its whole angle, drawn and saved as its CSS turn. */
+export function savePlainRotation(
+  { commitPositionPatchToHtml, readOnlyPreview }: Omit<ElementOffsetStagerDeps, "showToast">,
+  selection: DomEditSelection,
+  next: RotationCommit,
+): Promise<void> {
+  if (readOnlyPreview) return Promise.resolve();
+  const { element } = selection;
+  const before = captureStudioRotation(element);
+  // Legacy marks go in the same write, or a seek puts their angle back; clearing them voids the press read.
+  const patches: PatchOperation[] = element.hasAttribute(STUDIO_ROTATION_ATTR)
+    ? buildClearRotationPatches(element)
+    : [];
+  if (patches.length) clearStudioRotation(element);
+  const drawn = applyCssRotation(element, next.angle, patches.length ? undefined : next.plain);
+  patches.push(...drawn);
+  const turn = drawn.at(-1)!;
+  return commitPositionPatchToHtml(selection, patches, {
+    label: "Rotate layer",
+    coalesceKey: `rotate:${++plainRotateCounter}`,
+    coalesceMs: Number.POSITIVE_INFINITY,
+  }).catch((error) => {
+    if (element.style.getPropertyValue(turn.property) === turn.value) {
+      restorePlainRotation(element, before);
+    }
+    throw error;
+  });
+}

package/src/hooks/useClipboard.source.test.ts

@@ -52,12 +52,16 @@ afterEach(() => {
 
 // The preview page: the saved markup with the preview's in-memory ids, a sub-composition
 // mounted inline, and the runtime's hide on both clips.
-function mountPreview(sub: string, bundle: (host: Element) => void): HTMLIFrameElement {
+function mountPreview(
+  sub: string,
+  bundle: (host: Element) => void,
+  saved = SAVED,
+): HTMLIFrameElement {
   const iframe = document.createElement("iframe");
   document.body.appendChild(iframe);
   const doc = iframe.contentDocument as Document;
   doc.open();
-  doc.write(ensureHfIds(SAVED));
+  doc.write(ensureHfIds(saved));
   doc.close();
   const parsed = new DOMParser().parseFromString(ensureHfIds(sub), "text/html");
   const subRoot = (parsed.querySelector("template") as HTMLTemplateElement).content
@@ -93,14 +97,15 @@ function mountClipboard(
   domSelection: DomEditSelection | null = null,
   sub = SUB,
   bundle: (host: Element) => void = () => {},
+  saved = SAVED,
 ) {
-  const files: Record<string, string> = { "index.html": SAVED, "compositions/sub.html": sub };
+  const files: Record<string, string> = { "index.html": saved, "compositions/sub.html": sub };
   const fail = { on: false };
   const delayMs: Record<string, number> = {};
   const domEditSave = { pending: Promise.resolve() };
   const domSelectionRef = { current: domSelection };
   stubFiles(files, fail, delayMs);
-  const iframe = mountPreview(sub, bundle);
+  const iframe = mountPreview(sub, bundle, saved);
   const writes: string[] = [];
   const deleted: string[] = [];
   const writeProjectFile = async (_path: string, content: string) => {
@@ -248,6 +253,39 @@ const SUB_SELECTION = {
   sourceFile: "compositions/sub.html",
 } as DomEditSelection;
 
+describe("paste of an element styled by its id", () => {
+  it("gives the copy the look its original has", async () => {
+    clearSelection();
+    const saved = SAVED.replace(
+      "<body>",
+      "<body><style>#badge { color: rgb(200, 30, 40); letter-spacing: 3px; }</style>",
+    ).replace("</h1>", '</h1><p id="badge">New</p>');
+    const selection = {
+      hfId: stampedHfId(saved, "#badge"),
+      selector: "#badge",
+      selectorIndex: 0,
+      sourceFile: "index.html",
+    } as DomEditSelection;
+    const { clipboard, writes } = mountClipboard(selection, SUB, () => {}, saved);
+    clipboard().handleCopy();
+    await clipboard().handlePaste();
+    const page = document.createElement("iframe");
+    document.body.appendChild(page);
+    const doc = page.contentDocument as Document;
+    doc.open();
+    doc.write(writes[0] ?? "");
+    doc.close();
+    const look = (id: string) => {
+      const style = (page.contentWindow as Window).getComputedStyle(
+        doc.getElementById(id) as Element,
+      );
+      return { color: style.color, letterSpacing: style.letterSpacing };
+    };
+    expect(look("badge")).toEqual({ color: "rgb(200, 30, 40)", letterSpacing: "3px" });
+    expect(look("badge-2")).toEqual(look("badge"));
+  });
+});
+
 describe("copy of a sub-composition clip", () => {
   it("rebases its relative asset paths to the project root, as the preview does", async () => {
     clearSelection();

package/src/hooks/useClipboard.ts

@@ -160,10 +160,17 @@ const hfIdsInFile = (content: string) =>
 export function pasteElementHtml(
   content: string,
   payload: { html: string; originSelector?: string; originSelectorIndex?: number },
+  fromThisFile = false,
 ): string {
   const reminted = remintHfIds(payload.html, new DOMParser(), hfIdsInFile(content));
   const deduped = deduplicateIds(reminted, collectHtmlIds(content));
-  return insertAsSibling(content, deduped, payload.originSelector, payload.originSelectorIndex);
+  const result = insertAsSibling(
+    content,
+    deduped,
+    payload.originSelector,
+    payload.originSelectorIndex,
+  );
+  return fromThisFile ? carryLook(result, renamedIds(reminted, deduped), 0) : result;
 }
 
 /** Shared insertion path for paste and duplicate, anchored at the playhead or the selection's end. Returns the
@@ -324,6 +331,7 @@ export function useClipboard({
           kind: "dom-element",
           html: savedMarkupElseLive(parseSavedSource(content), live, sourceFile),
           sourceFile,
+          projectId: projectIdRef.current ?? undefined,
           originSelector: domSelection.selector,
           originSelectorIndex: domSelection.selectorIndex,
         };
@@ -373,15 +381,17 @@ export function useClipboard({
     const targetPath = activeCompPath || "index.html";
     try {
       let pastedIds: string[] = [];
+      const fromThisFile = payload.sourceFile === targetPath && payload.projectId === pid;
       const paste = (originalContent: string) => {
-        if (payload.kind !== "timeline-clip") return pasteElementHtml(originalContent, payload);
+        if (payload.kind !== "timeline-clip")
+          return pasteElementHtml(originalContent, payload, fromThisFile);
         const { currentTime, elements } = usePlayerStore.getState();
         const pasted = pasteTimelineClips(
           originalContent,
           payload.clips,
           currentTime,
           elements,
-          payload.sourceFile === targetPath && payload.projectId === pid,
+          fromThisFile,
         );
         pastedIds = pasted.ids;
         // A clip pasted past the current composition end would exist in the

package/src/hooks/useDomEditCommits.ts

@@ -271,12 +271,10 @@ export function useDomEditCommits({
 
   const {
     stageElementPositionOffset,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset,
   } = useDomGeometryCommits({
-    previewIframeRef,
     showToast,
     commitPositionPatchToHtml,
     readOnlyPreview,
@@ -316,7 +314,6 @@ export function useDomEditCommits({
     handleDomRemoveTextField,
     stageElementPositionOffset,
     commitPositionPatchToHtml,
-    handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
     handleDomManualEditsReset,

package/src/hooks/useDomEditSession.ts

@@ -24,8 +24,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { membersForDelete, timelineElementsForDelete } from "./domEditDeleteMembers";
 import type { RecordEditInput } from "./domEditDeleteMembers";
 import type { DomEditTimelineParams } from "./useDomSelectionTypes";
-// Re-exported: the delete rule lives in its own module now, and callers (and its
-// own test) have always imported it from here.
+// Re-exported: the delete rule lives in its own module; callers and its test import it from here.
 export { membersForDelete };
 
 export interface UseDomEditSessionParams extends DomEditTimelineParams {
@@ -232,6 +231,7 @@ export function useDomEditSession({
     stageElementPositionOffset,
     commitPositionPatchToHtml,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     handleDomManualEditsReset,
     handleDomEditElementsDelete,
     handleDomZIndexReorderCommit,
@@ -256,9 +256,8 @@ export function useDomEditSession({
     readOnlyPreview,
     onTrySdkPersist: sdkSession
       ? (selection, operations, originalContent, targetPath, options) => {
-          // Decoupled tripwire, runs regardless of the cutover flag. originalContent lets
-          // the runtime-node filter suppress hf-ids absent from source (script-created
-          // nodes); the paths let a cross-file edit skip instead of a false not-found.
+          // Decoupled tripwire, regardless of the cutover flag. originalContent lets the runtime-node
+          // filter drop hf-ids absent from source; the paths skip a cross-file edit, not a not-found.
           runResolverShadow(sdkSession, selection.hfId, operations, originalContent, {
             targetPath,
             compositionPath: activeCompPath,
@@ -491,6 +490,7 @@ export function useDomEditSession({
     trackGsapInteractionFailure,
     stageElementPositionOffset,
     handleDomBoxSizeCommit,
+    handleDomRotationCommit: handleDomCssRotationCommit,
     commitPositionPatchToHtml,
     addGsapAnimation,
     convertToKeyframes,

package/src/hooks/useDomGeometryCommit.test.tsx

@@ -168,7 +168,32 @@ describe("useDomGeometryCommit, from the package entry", () => {
     expect(element.style.getPropertyValue("translate")).toBe("130.5px 90px");
     expect(calls.patches).toEqual([
       expect.objectContaining({
-        operations: [{ type: "inline-style", property: "translate", value: "130.5px 90px" }],
+        operations: [
+          { type: "inline-style", property: "translate", value: "130.5px 90px" },
+          { type: "attribute", property: "data-hf-studio-original-inline-translate", value: "" },
+        ],
+      }),
+    ]);
+    expect(calls.urls.filter((url) => url.includes("gsap"))).toEqual([]);
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+    unmount();
+  });
+
+  it("saves a GSAP-free resize as its inline size, with no GSAP script and no animation read", async () => {
+    const calls = stubPatchServer();
+    const { element, recordEdit, hook, unmount } = renderHost();
+
+    await expect(
+      hook().commitBoxSize(makeSelection("card", element), { width: 300, height: 90 }),
+    ).resolves.toEqual({ ok: true });
+
+    expect(element.style.getPropertyValue("width")).toBe("300px");
+    expect(calls.patches).toEqual([
+      expect.objectContaining({
+        operations: expect.arrayContaining([
+          { type: "inline-style", property: "width", value: "300px" },
+          { type: "inline-style", property: "height", value: "90px" },
+        ]),
       }),
     ]);
     expect(calls.urls.filter((url) => url.includes("gsap"))).toEqual([]);
@@ -188,6 +213,57 @@ describe("useDomGeometryCommit, from the package entry", () => {
     unmount();
   });
 
+  it("refuses a CSS move GSAP has folded into its x/y, writes nothing, and hands the translate back", async () => {
+    const calls = stubPatchServer();
+    const { element, hook, unmount } = renderHost();
+    element.style.setProperty("translate", "none");
+    Object.assign(element, { _gsap: { renderTransform: () => {}, x: "94px", y: "66px" } });
+    const set = vi.fn();
+    Object.assign(element.ownerDocument.defaultView!, { gsap: { set } });
+
+    await expect(
+      hook().commitPathOffset(
+        makeSelection("card", element),
+        { x: 1, y: 2 },
+        { plainTranslate: true },
+      ),
+    ).rejects.toThrow(/animation took over/);
+    delete (element.ownerDocument.defaultView as { gsap?: unknown }).gsap;
+    expect(calls.patches).toEqual([]);
+    expect(set).toHaveBeenCalledWith(element, { x: 0, y: 0, xPercent: 0, yPercent: 0 });
+    unmount();
+  });
+
+  it("saves a CSS move GSAP has only parsed, with nothing folded into its x/y", async () => {
+    const calls = stubPatchServer();
+    const { element, hook, unmount } = renderHost();
+    Object.assign(element, {
+      _gsap: { renderTransform: () => {}, x: "0px", y: "0px", xPercent: 0 },
+    });
+
+    await expect(
+      hook().commitPathOffset(
+        makeSelection("card", element),
+        { x: 1, y: 2 },
+        { plainTranslate: true },
+      ),
+    ).resolves.toEqual({ ok: true });
+    expect(calls.patches).toHaveLength(1);
+    unmount();
+  });
+
+  it("leaves a later move's translate alone when an earlier move's save fails", async () => {
+    stubPatchServer(500);
+    const { element, hook, unmount } = renderHost();
+    element.style.setProperty("translate", "40px 30px");
+
+    const saving = hook().commitPathOffset(makeSelection("card", element), { x: 1, y: 2 });
+    element.style.setProperty("translate", "7px 8px");
+    await expect(saving).rejects.toThrow();
+    expect(element.style.getPropertyValue("translate")).toBe("7px 8px");
+    unmount();
+  });
+
   it("keeps the same commits across renders, so the overlay's handlers stay put", () => {
     stubServer();
     const { hook, rerender, unmount } = renderHost();
@@ -216,6 +292,8 @@ describe("useDomGeometryCommit, from the package entry", () => {
     const showToast = vi.fn();
     const restore = vi.fn();
     const { element, recordEdit, hook, unmount } = renderHost({ showToast });
+    // GSAP renders the card's transform, so its resize reads animations first.
+    Object.assign(element, { _gsap: { renderTransform: () => undefined } });
 
     await expect(
       hook().commitBoxSize(

package/src/hooks/useDomGeometryCommit.ts

@@ -1,7 +1,11 @@
+import type { RotationCommit } from "../components/editor/rotationDraft";
 import { useCallback, useMemo, useRef, useState } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditing";
-import type { DomEditGroupPathOffsetCommit } from "../components/editor/DomEditOverlay";
+import type {
+  DomEditGroupPathOffsetCommit,
+  MoveCommitOptions,
+} from "../components/editor/DomEditOverlay";
 import { isPreviewBooted } from "../player/store/playerStore";
 import type { DomEditCommitOutcome } from "./domEditCommitRunner";
 import type { UseDomStyleCommitOptions } from "./useDomStyleCommit";
@@ -13,8 +17,8 @@ import { useGsapCacheVersion } from "./useGsapTweenCache";
 import { createDomEditSaveQueue } from "../utils/domEditSaveQueue";
 import { useDomEditPersist } from "./useDomEditPersist";
 import { useDomEditPositionPatchCommit } from "./useDomEditPositionPatchCommit";
+import { useDomGeometryCommits } from "./useDomGeometryCommits";
 import { useMountEffect } from "./useMountEffect";
-import { stageElementOffset } from "./elementOffsetStager";
 
 /**
  * Studio's `Player` must show the project, with `beginTimelineSession(projectId)` run before it
@@ -29,7 +33,7 @@ export interface DomGeometryCommits {
   commitPathOffset: (
     selection: DomEditSelection,
     next: { x: number; y: number },
-    modifiers?: { altKey?: boolean },
+    modifiers?: MoveCommitOptions,
   ) => Promise<DomEditCommitOutcome>;
   commitGroupPathOffset: (updates: DomEditGroupPathOffsetCommit[]) => Promise<DomEditCommitOutcome>;
   commitBoxSize: (
@@ -40,15 +44,13 @@ export interface DomGeometryCommits {
   ) => Promise<DomEditCommitOutcome>;
   commitRotation: (
     selection: DomEditSelection,
-    next: { angle: number },
+    next: RotationCommit,
   ) => Promise<DomEditCommitOutcome>;
   waitForPendingSaves: () => Promise<void>;
 }
 
 const noop = () => {};
 const NO_SELECTED_ANIMATIONS: GsapAnimation[] = [];
-// ponytail: unreachable, the GSAP writer always exists so a resize never takes the DOM route.
-const noDomBoxSizeRoute = () => Promise.reject(new Error("Resize has no DOM route here"));
 
 /**
  * Saves canvas moves, resizes and rotations through Studio's own GSAP-aware commits, for a host
@@ -107,16 +109,12 @@ export function useDomGeometryCommit({
     },
     [commitPositionPatchToHtml, queue],
   );
-  const stageElementPositionOffset = useCallback(
-    (selection: DomEditSelection, next: { x: number; y: number }, coalesceKey?: string) =>
-      stageElementOffset(
-        { commitPositionPatchToHtml: commitWithFreshQueue, showToast },
-        selection,
-        next,
-        coalesceKey,
-      ),
-    [commitWithFreshQueue, showToast],
-  );
+  const { stageElementPositionOffset, handleDomBoxSizeCommit, handleDomRotationCommit } =
+    useDomGeometryCommits({
+      showToast,
+      commitPositionPatchToHtml: commitWithFreshQueue,
+      readOnlyPreview: false,
+    });
   const makeFetchFallback = useGsapAnimationFetchFallback(projectId);
   const trackGsapInteractionFailure = useGsapInteractionFailureTelemetry(activeCompPath, showToast);
   const {
@@ -135,7 +133,8 @@ export function useDomGeometryCommit({
     makeFetchFallback,
     trackGsapInteractionFailure,
     stageElementPositionOffset,
-    handleDomBoxSizeCommit: noDomBoxSizeRoute,
+    handleDomBoxSizeCommit,
+    handleDomRotationCommit,
     commitPositionPatchToHtml: commitWithFreshQueue,
     addGsapAnimation: gsap.addGsapAnimation,
     convertToKeyframes: gsap.convertToKeyframes,