@hyperframes/studio 0.8.106 → 0.8.108

package/src/hooks/canvasQuickSaves.test.tsx

@@ -14,38 +14,56 @@ const SOURCE =
   '<!doctype html><html><head></head><body><div data-hf-id="hf-card" style="color: red">Card</div>' +
   '<div id="clip" class="clip" data-start="1" data-duration="5" data-track-index="0"></div></body></html>';
 
-// The server patches whatever is on disk; the writer refuses a stale base like If-Match does.
-// The first write can be held mid-flight.
+// The server patches whatever is on disk, a font rule included; the writer refuses a stale base
+// like If-Match does. The first write, a patch or a whole file, can be held mid-flight.
 function fakeProject() {
   let disk = SOURCE;
   const refused: string[] = [];
   let writes = 0;
+  let wholeFileWrites = 0;
   let release = () => {};
   const firstWrite = new Promise<void>((resolve) => (release = resolve));
+  const holdFirst = async () => {
+    if (++writes === 1) await firstWrite;
+  };
   vi.stubGlobal(
     "fetch",
     vi.fn(async (input: string, init?: RequestInit) => {
       if (input.includes("/file-mutations/patch-element/")) {
-        const { operations } = JSON.parse(String(init?.body)) as {
+        await holdFirst();
+        const { operations, fontFaceCss } = JSON.parse(String(init?.body)) as {
           operations: Array<{ property?: string; value?: string }>;
+          fontFaceCss?: string;
         };
         for (const op of operations) {
           if (op.property === "color") disk = disk.replace(/color: \w+/, `color: ${op.value}`);
         }
+        if (fontFaceCss && !disk.includes(fontFaceCss))
+          disk = disk.replace(
+            "</head>",
+            `<style data-hf-studio-fonts="true">${fontFaceCss}</style></head>`,
+          );
         return Response.json({ ok: true, changed: true, matched: true, content: disk });
       }
       return Response.json({ content: disk });
     }),
   );
   const writeProjectFile = async (path: string, content: string, expected?: string) => {
-    if (++writes === 1) await firstWrite;
+    wholeFileWrites += 1;
+    await holdFirst();
     if (expected !== undefined && expected !== disk && content !== disk) {
       refused.push(path);
       throw new Error(`409 conflict on ${path}`);
     }
     disk = content;
   };
-  return { writeProjectFile, refused, release: () => release(), read: () => disk };
+  return {
+    writeProjectFile,
+    refused,
+    release: () => release(),
+    read: () => disk,
+    wholeFileWrites: () => wholeFileWrites,
+  };
 }
 
 type Project = ReturnType<typeof fakeProject>;
@@ -158,7 +176,7 @@ afterEach(() => {
 });
 
 describe("canvas edit commits share the file queue", () => {
-  it("lands a second canvas commit started while the first one's font write is held", async () => {
+  it("lands a second canvas commit started while the first one's font save is held", async () => {
     const project = fakeProject();
     const { hook, selection, toasts } = mountCanvasCommits(project);
     const font = {
@@ -174,8 +192,55 @@ describe("canvas edit commits share the file queue", () => {
     );
 
     expect(toasts).toEqual([]);
-    expect(project.read()).toContain("@font-face");
+    expect(project.read().match(/@font-face/g)).toHaveLength(1);
     expect(project.read()).toContain("color: green");
+    expect(project.wholeFileWrites(), "the font rides the edit's own patch").toBe(0);
+  });
+
+  it("writes a batch's prepared content over the patch and saves it once", async () => {
+    const project = fakeProject();
+    const { hook, selection, toasts } = mountCanvasCommits(project);
+    project.release();
+
+    const saved = await hook.handleDomAttributeBatchCommit(
+      selection,
+      [{ type: "attribute", property: "data-note", value: "1" }],
+      {
+        label: "Edit with prepared content",
+        prepareContent: (html) => html.replace("</head>", '<meta data-prepared="1"></head>'),
+      },
+    );
+
+    expect(saved).toBe(true);
+    expect(toasts).toEqual([]);
+    expect(project.read().match(/data-prepared="1"/g)).toHaveLength(1);
+    expect(project.wholeFileWrites()).toBe(1);
+  });
+
+  it("reports a failed follow-up write as a failed commit, not as saved", async () => {
+    const project = fakeProject();
+    project.release();
+    const failing = {
+      ...project,
+      writeProjectFile: async () => {
+        throw new Error("409 conflict");
+      },
+    };
+    const { hook, selection, toasts } = mountCanvasCommits(failing);
+
+    const saved = await hook.handleDomAttributeBatchCommit(
+      selection,
+      [{ type: "attribute", property: "data-note", value: "1" }],
+      {
+        label: "Edit with prepared content",
+        prepareContent: (html) => html.replace("</head>", '<meta data-prepared="1"></head>'),
+      },
+    );
+
+    expect(saved).toBe(false);
+    expect(toasts).toHaveLength(1);
+    expect(toasts[0]).toContain("couldn't finish updating");
+    expect(project.read()).not.toContain("data-prepared");
   });
 
   it("lands a canvas commit started while a timeline save is writing", async () => {

package/src/hooks/domEditCommitTypes.ts

@@ -1,4 +1,5 @@
 import type { DomEditSelection } from "../components/editor/domEditing";
+import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { PatchOperation, PatchTarget } from "../utils/sourcePatcher";
 
 export interface DomEditPatchBatch {
@@ -53,7 +54,16 @@ export type PersistDomEditOperations = (
     coalesceKey?: string;
     coalesceMs?: number;
     skipRefresh?: boolean;
+    deferRender?: boolean;
+    importedFont?: ImportedFontAsset;
     prepareContent?: (html: string, sourceFile: string) => string;
     shouldSave?: () => boolean;
   },
 ) => Promise<DomEditPersistOutcome | undefined>;
+
+/** Several data-* and HTML attribute ops on one element as ONE persist and ONE undo entry. */
+export type CommitDomAttributeBatch = (
+  selection: DomEditSelection,
+  operations: PatchOperation[],
+  options: { label: string; prepareContent?: (html: string) => string },
+) => Promise<boolean>;

package/src/hooks/domEditPersistFailure.ts

@@ -19,6 +19,15 @@ export class DomEditPersistUnsafeValueError extends Error {
   }
 }
 
+export class DomEditPersistPreparedWriteError extends Error {
+  readonly alreadyToasted = true;
+
+  constructor(targetPath: string) {
+    super(`The edit saved but its follow-up write to ${targetPath} did not`);
+    this.name = "DomEditPersistPreparedWriteError";
+  }
+}
+
 export type DomEditPersistFailureSelection = Pick<
   DomEditSelection,
   "label" | "hfId" | "id" | "selector" | "selectorIndex" | "sourceFile"
@@ -48,7 +57,9 @@ function getSelectionLabel(selection: DomEditPersistFailureSelection): string {
 
 export function wasAlreadyToasted(error: unknown): boolean {
   return (
-    (error instanceof DomEditPersistUnsafeValueError || error instanceof StudioSaveHttpError) &&
+    (error instanceof DomEditPersistUnsafeValueError ||
+      error instanceof DomEditPersistPreparedWriteError ||
+      error instanceof StudioSaveHttpError) &&
     error.alreadyToasted
   );
 }

package/src/hooks/domStyleCommit.fonts.test.ts

@@ -2,6 +2,7 @@
 import { expect, it } from "vitest";
 import type { DomEditSelection } from "../components/editor/domEditing";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
+import { importedFontFaceCssFor } from "../utils/studioFontHelpers";
 import { commitDomStyles, type DomStyleCommitContext } from "./domStyleCommit";
 
 const selection = (id: string): DomEditSelection =>
@@ -28,7 +29,7 @@ const poppins = (file: string, weight: string): ImportedFontAsset => ({
 });
 
 it("each font a host hands over is saved as its own face, with the weight and style it draws", async () => {
-  let html = '<html><head></head><body><h1 id="title"></h1><p id="subtitle"></p></body></html>';
+  const faces: string[] = [];
   let listed: ImportedFontAsset | null = null;
   const context: DomStyleCommitContext = {
     activeCompPath: "index.html",
@@ -39,16 +40,16 @@ it("each font a host hands over is saved as its own face, with the weight and st
     persistDomEditOperations: (async (
       _selection: DomEditSelection,
       _operations: unknown,
-      options?: { prepareContent?: (html: string, sourceFile: string) => string },
+      options?: { importedFont?: ImportedFontAsset },
     ) => {
-      html = options?.prepareContent?.(html, "index.html") ?? html;
+      if (options?.importedFont)
+        faces.push(importedFontFaceCssFor(options.importedFont, "index.html"));
     }) as unknown as DomStyleCommitContext["persistDomEditOperations"],
   };
   listed = poppins("Poppins-SemiBold.ttf", "600");
   await commitDomStyles(context, selection("title"), { "font-family": "Poppins" });
   listed = poppins("Poppins-Regular.ttf", "400");
   await commitDomStyles(context, selection("subtitle"), { "font-family": "Poppins" });
-  const faces = html.match(/@font-face[^}]*}/g) ?? [];
   expect(faces).toHaveLength(2);
   expect(faces[0]).toContain('Poppins-SemiBold.ttf"); font-weight: 600; font-style: normal;');
   expect(faces[1]).toContain('Poppins-Regular.ttf"); font-weight: 400; font-style: normal;');

package/src/hooks/domStyleCommit.ts

@@ -4,11 +4,7 @@ import {
   isManualGeometryStyleProperty,
   normalizeDomEditStyleValue,
 } from "../utils/studioHelpers";
-import {
-  injectPreviewGoogleFont,
-  injectPreviewImportedFont,
-  ensureImportedFontFace,
-} from "../utils/studioFontHelpers";
+import { injectPreviewGoogleFont, injectPreviewImportedFont } from "../utils/studioFontHelpers";
 import {
   buildDomEditStylePatchOperation,
   findElementForSelection,
@@ -105,9 +101,7 @@ export async function commitDomStyles(
         label: "Edit layer style",
         // Inline styles are already live, so a reload would only blank the preview.
         skipRefresh: true,
-        prepareContent: importedFont
-          ? (html, sourceFile) => ensureImportedFontFace(html, importedFont, sourceFile)
-          : undefined,
+        importedFont: importedFont ?? undefined,
       }),
     shouldRevert: ownsAny,
     revert: () => {

package/src/hooks/gsapDragCommit.ts

@@ -273,14 +273,9 @@ export async function commitStaticGsapRotation(
 }
 
 /**
- * Commit a STATIC element resize as a `tl.set("#el",{width,height})` — the
- * single-source size channel for elements with no size animation (mirrors
- * `commitStaticGsapPosition`). Use this instead of a single-stop `keyframes`
- * tween: one keyframe at the playhead % renders NaN/0 at every other frame, so
- * the element collapses/disappears (worst when resized off the 0% mark). A `set`
- * holds the size at all times. Re-resizing an element that already has a size
- * `set` UPDATES it in place with one `update-properties`; a new element
- * gets one `add` with `method:"set"`.
+ * A static resize as `tl.set("#el",{width,height})`, only where the script already writes the size
+ * (else it is CSS). A set, not a one-stop keyframe tween, which renders NaN/0 off its keyframe.
+ * Updates an existing size set in place, else adds one.
  */
 export async function commitStaticGsapSize(
   selection: DomEditSelection,

package/src/hooks/gsapDragPositionCommit.ts

@@ -1,4 +1,5 @@
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { PROPERTY_GROUPS } from "@hyperframes/parsers/gsap-constants";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { resolveTweenStart, resolveTweenDuration } from "../utils/globalTimeCompiler";
@@ -179,7 +180,11 @@ async function commitFlatViaKeyframes(
   if (runtime && ts !== null) {
     const { gsapLib, el, mainTl } = runtime;
     const draggedValues: Record<string, number> = {};
-    for (const key of Object.keys(properties)) {
+    const channelsTheClearWipes = new Set([
+      ...Object.keys(properties),
+      ...PROPERTY_GROUPS.position,
+    ]);
+    for (const key of channelsTheClearWipes) {
       const v = Number(gsapLib.getProperty(el, key));
       if (Number.isFinite(v)) draggedValues[key] = v;
     }

package/src/hooks/gsapEditOutcome.ts

@@ -44,7 +44,8 @@ export type GsapEditOutcome =
       ownsDragOffset?: boolean;
     }
   | { status: "blocked"; reason: GsapEditBlockReason; detail?: GsapEditBlockDetail }
-  | { status: "element-offset" };
+  | { status: "element-offset" }
+  | { status: "element-size" };
 
 export const GSAP_EDIT_BLOCK_COPY: Record<GsapEditBlockReason, string> = {
   "no-selector": "This layer needs a stable selector before Studio can save the edit.",

package/src/hooks/gsapResizeElementSize.test.tsx

@@ -0,0 +1,136 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import { applyStudioBoxSizeDraft } from "../components/editor/manualEdits";
+import { mountReactHarness } from "./domSelectionTestHarness";
+import { useDomGeometryCommits } from "./useDomGeometryCommits";
+import { useGsapAwareEditing } from "./useGsapAwareEditing";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+// The bench's hold fixture: an off-timeline `gsap.set` positions #target; its size is stylesheet CSS.
+const positionHold = {
+  id: "#target-set-0-position",
+  targetSelector: "#target",
+  propertyGroup: "position",
+  method: "set",
+  properties: { x: 40, y: 20 },
+  position: 0,
+  resolvedStart: 0,
+  duration: 0,
+  global: true,
+} as unknown as GsapAnimation;
+
+const widthTween = {
+  id: "#target-to-0-size",
+  targetSelector: "#target",
+  propertyGroup: "size",
+  method: "to",
+  properties: { width: 400, height: 300 },
+  position: 0,
+  resolvedStart: 0,
+  duration: 4,
+} as unknown as GsapAnimation;
+
+function mount(animations: GsapAnimation[]) {
+  const element = Object.assign(document.createElement("div"), {
+    id: "target",
+    _gsap: { renderTransform: () => {} },
+  });
+  // GSAP's own inline mask on an element whose transform it renders.
+  element.style.setProperty("scale", "none");
+  document.body.append(element);
+  const gsap = { getProperty: () => 0, set: vi.fn() };
+  const iframe = {
+    contentWindow: { gsap, __timelines: {} },
+    contentDocument: document,
+  } as unknown as HTMLIFrameElement;
+  const selection = { element, id: "target", selector: "#target" } as unknown as DomEditSelection;
+  const commitMutation = vi.fn().mockResolvedValue(undefined);
+  const commitPatch = vi.fn().mockResolvedValue(undefined);
+  let resize!: ReturnType<typeof useGsapAwareEditing>["handleGsapAwareBoxSizeCommit"];
+  function Harness() {
+    const { stageElementPositionOffset, handleDomBoxSizeCommit } = useDomGeometryCommits({
+      showToast: vi.fn(),
+      commitPositionPatchToHtml: commitPatch,
+      readOnlyPreview: false,
+    });
+    resize = useGsapAwareEditing({
+      domEditSelection: selection,
+      selectedGsapAnimations: animations,
+      gsapCommitMutation: commitMutation,
+      previewIframeRef: { current: iframe },
+      showToast: vi.fn(),
+      bumpGsapCache: vi.fn(),
+      makeFetchFallback: () => async () => animations,
+      trackGsapInteractionFailure: vi.fn(),
+      stageElementPositionOffset,
+      handleDomBoxSizeCommit,
+      handleDomRotationCommit: vi.fn(),
+      commitPositionPatchToHtml: commitPatch,
+      addGsapAnimation: vi.fn(),
+      convertToKeyframes: vi.fn(),
+      setArcPath: vi.fn(),
+      updateArcSegment: vi.fn(),
+    }).handleGsapAwareBoxSizeCommit;
+    return null;
+  }
+  const root = mountReactHarness(<Harness />);
+  const size = { width: 340, height: 227 };
+  applyStudioBoxSizeDraft(element, size);
+  return { selection, size, commitMutation, commitPatch, resize, root };
+}
+
+const writesSize = (mutation: { properties?: object; keyframes?: Array<{ properties: object }> }) =>
+  [mutation.properties, ...(mutation.keyframes ?? []).map((k) => k.properties)].some(
+    (props) => !!props && ("width" in props || "height" in props),
+  );
+
+describe("resizing an element GSAP positions", () => {
+  it("saves a size the script never writes as the element's CSS width/height, not a tl.set", async () => {
+    const h = mount([positionHold]);
+
+    await act(() => h.resize(h.selection, h.size, { x: -50, y: -33.5 }));
+
+    const mutations = h.commitMutation.mock.calls.map((call) => call[1]);
+    expect(mutations.filter(writesSize)).toEqual([]);
+    // The anchor still moves the GSAP hold, in the same undo step as the CSS size.
+    expect(mutations.some((m) => m.animationId === positionHold.id)).toBe(true);
+    const [, patches, options] = h.commitPatch.mock.calls.at(-1)!;
+    expect(patches).toEqual(
+      expect.arrayContaining([
+        { type: "inline-style", property: "width", value: "340px" },
+        { type: "inline-style", property: "height", value: "227px" },
+      ]),
+    );
+    expect(patches.filter((p: { property: string }) => p.property === "scale")).toEqual([]);
+    expect(options.coalesceKey).toBe(h.commitMutation.mock.calls[0]![2].coalesceKey);
+    // Saved before the GSAP write and without its own render, so the GSAP reload renders last.
+    expect(options.deferRender).toBe(true);
+    expect(h.commitPatch.mock.invocationCallOrder.at(-1)).toBeLessThan(
+      h.commitMutation.mock.invocationCallOrder[0]!,
+    );
+    act(() => h.root.unmount());
+  });
+
+  it("still saves the size through GSAP when a tween animates it", async () => {
+    const h = mount([positionHold, widthTween]);
+
+    await act(() => h.resize(h.selection, h.size, { x: -50, y: -33.5 }));
+
+    const mutations = h.commitMutation.mock.calls.map((call) => call[1]);
+    expect(mutations.filter(writesSize).length).toBeGreaterThan(0);
+    const cssSize = h.commitPatch.mock.calls
+      .flatMap((call) => call[1])
+      .filter((p: { property: string }) => p.property === "width" || p.property === "height");
+    expect(cssSize).toEqual([]);
+    act(() => h.root.unmount());
+  });
+});

package/src/hooks/gsapResizeGeometrySweep.test.ts

@@ -238,7 +238,9 @@ async function runCase(testCase: Case): Promise<string[]> {
     async () => animations,
   );
 
-  const { scale, size } = committed(commitMutation.mock.calls);
+  const { scale, size: written } = committed(commitMutation.mock.calls);
+  const size =
+    outcome.status === "element-size" ? { w: testCase.drop.w, h: testCase.drop.h } : written;
   const settled = renderRect(
     { box: size ?? testCase.box, pos: { ...live.pos }, scale: scale ?? testCase.liveScale },
     testCase.rotation,

package/src/hooks/gsapResizeIntercept.test.ts

@@ -529,7 +529,7 @@ function titleSelection(): DomEditSelection {
   return { id: "title", selector: "#title", element: el } as DomEditSelection;
 }
 
-it("writes a plain size on an element whose only tween is a fade", async () => {
+it("hands the size to the element's CSS when its only tween is a fade", async () => {
   const fade = {
     id: "#title-to-0-visual",
     targetSelector: "#title",
@@ -550,14 +550,6 @@ it("writes a plain size on an element whose only tween is a fade", async () => {
     commitMutation,
   );
 
-  expect(handled).toMatchObject({ status: "persisted" });
-  const mutations = commitMutation.mock.calls.map((call) => call[1] as { type: string });
-  expect(mutations.filter((m) => /keyframe/i.test(m.type))).toEqual([]);
-  expect(mutations).toContainEqual({
-    type: "add",
-    targetSelector: "#title",
-    method: "set",
-    position: 0,
-    properties: { width: 424, height: 237 },
-  });
+  expect(handled).toEqual({ status: "element-size" });
+  expect(commitMutation).not.toHaveBeenCalled();
 });

package/src/hooks/gsapResizeIntercept.ts

@@ -38,6 +38,7 @@ import { animationWritesAnyProperty, type GsapEditOutcome } from "./gsapEditOutc
 import { preflightGsapResizeIntercept, resizeRoute } from "./gsapResizePreflight";
 
 const IDENTITY_ONE_PROPS = new Set(["opacity", "autoAlpha", "scale", "scaleX", "scaleY"]);
+const SIZE_PROPS = new Set(["width", "height"]);
 
 /** Build identity (zero / one) values for each property in `source`. */
 function synthesizeIdentityProps(
@@ -101,7 +102,7 @@ export async function tryGsapResizeIntercept(
   const fetchedAnimations = fetchFallbackAnimations ? await fetchFallbackAnimations() : [];
   const outcome = preflightGsapResizeIntercept(selection, animations, iframe, fetchedAnimations);
   if (outcome.status === "blocked") return outcome;
-  const { resizeGroup, resizeProperties, workingAnimations } = resizeRoute(
+  const { allKnownAnimations, resizeGroup, resizeProperties, workingAnimations } = resizeRoute(
     animations,
     fetchedAnimations,
   );
@@ -131,6 +132,10 @@ export async function tryGsapResizeIntercept(
     size,
   });
   if (!anim || isInstantHold(anim)) {
+    const scriptWritesSize = allKnownAnimations.some((a) =>
+      animationWritesAnyProperty(a, SIZE_PROPS),
+    );
+    if (!scriptWritesSize) return { status: "element-size" };
     const sel = selectorFromSelection(selection) ?? writeTargetSelector(selection);
     if (!sel) return { status: "blocked", reason: "no-selector" };
     // A scale hold is not a size hold.
@@ -541,7 +546,6 @@ export async function tryGsapResizeIntercept(
     return { status: "persisted", ownsDragOffset: await finalizeScaleResizeCommit() };
   }
 
-  const SIZE_PROPS = new Set(["width", "height"]);
   const backfillDefaults: Record<string, number> = {};
   for (const k of Object.keys(runtimeProps)) {
     if (SIZE_PROPS.has(k)) continue;

package/src/hooks/gsapResizeMixedTween.test.ts

@@ -163,6 +163,5 @@ it("leaves the drag offset to the caller when it commits size, not scale", async
     async () => [scaleHold],
   );
 
-  expect(outcome.status).toBe("persisted");
-  expect(outcome.status === "persisted" && outcome.ownsDragOffset).not.toBe(true);
+  expect(outcome.status).toBe("element-size");
 });

package/src/hooks/gsapRuntimeBridge.test.ts

@@ -567,3 +567,58 @@ describe("tryGsapDragIntercept — motion paths", () => {
     );
   });
 });
+
+describe("tryGsapDragIntercept — position self-heal", () => {
+  const xyTween = {
+    ...stalePositionAnim,
+    id: "#puck-b-to-0-position",
+    position: 0,
+    resolvedStart: 0,
+  };
+  const centringSet = {
+    id: "#puck-b-set-0-position",
+    targetSelector: "#puck-b",
+    propertyGroup: "position",
+    method: "set",
+    properties: { xPercent: -50, yPercent: -50 },
+    position: 0,
+    duration: 0,
+  } as unknown as GsapAnimation;
+  const xySet = { ...centringSet, properties: { x: 10, y: 20 } } as GsapAnimation;
+  const liveTween = {
+    targets: () => [{ id: "puck-b" }],
+    vars: { x: -180, y: -60, duration: 2 },
+    duration: () => 2,
+    startTime: () => 0,
+  };
+
+  async function drag(second: GsapAnimation) {
+    usePlayerStore.setState({ currentTime: 1 });
+    const animations = [second, xyTween];
+    const commitMutation = vi.fn();
+    await tryGsapDragIntercept(
+      selection,
+      { x: -50, y: 30 },
+      animations,
+      fakeIframe("puck-b", [liveTween]),
+      commitMutation,
+      async () => animations,
+    );
+    return commitMutation.mock.calls.map(([, mutation]) => mutation);
+  }
+
+  it("keeps an xPercent/yPercent centring set and moves the x/y tween", async () => {
+    const mutations = await drag(centringSet);
+    expect(mutations.map((m) => m.type)).not.toContain("consolidate-position-writes");
+    expect(mutations.length).toBeGreaterThan(0);
+    expect(mutations.every((m) => m.animationId === xyTween.id)).toBe(true);
+  });
+
+  it("consolidates a second x/y write", async () => {
+    const mutations = await drag(xySet);
+    expect(mutations[0]).toMatchObject({
+      type: "consolidate-position-writes",
+      keepAnimationId: xyTween.id,
+    });
+  });
+});

package/src/hooks/gsapRuntimeBridge.ts

@@ -9,6 +9,7 @@
  * easing, or seek position.
  */
 import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
+import { isXYPositionWrite } from "@hyperframes/parsers/gsap-constants";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 
@@ -245,8 +246,7 @@ export async function tryGsapDragIntercept(
   // the live keyframed/real tween if present (else any), strip the rest, so the
   // commit below updates ONE write instead of fighting duplicates.
   let workingAnimations = animations;
-  const isPosWrite = (a: GsapAnimation) =>
-    a.targetSelector === selector && a.propertyGroup === "position";
+  const isPosWrite = (a: GsapAnimation) => a.targetSelector === selector && isXYPositionWrite(a);
   if (animations.filter(isPosWrite).length > 1 && fetchFallbackAnimations) {
     const fresh = await fetchFallbackAnimations();
     const dupes = fresh.filter(isPosWrite);
@@ -331,7 +331,9 @@ export async function tryGsapDragIntercept(
     const fresh = await fetchFallbackAnimations();
     const freshMatch = fresh.find(
       (a) =>
-        a.targetSelector === posAnim!.targetSelector && a.propertyGroup === posAnim!.propertyGroup,
+        a.targetSelector === posAnim!.targetSelector &&
+        a.propertyGroup === posAnim!.propertyGroup &&
+        isXYPositionWrite(a) === isXYPositionWrite(posAnim!),
     );
     if (freshMatch && freshMatch.id !== posAnim.id) {
       posAnim = freshMatch;

package/src/hooks/gsapRuntimeKeyframes.ts

@@ -12,6 +12,7 @@ import { buildArcPath, type ArcPathConfig } from "@hyperframes/core/gsap-parser-
 import { parsePercentageKeyframes, toAbsoluteTime } from "./gsapShared";
 import { roundTo3 } from "../utils/rounding";
 import { BOX_SIZE_STYLE_PROPS } from "../components/editor/manualEditsDomPatches";
+import { gsapRendersTransform } from "../components/editor/gsapAnimatesProperty";
 
 /**
  * A GSAP tween's `vars` object — intentionally open: it mixes channel values
@@ -446,9 +447,6 @@ export const ROTATION_CHANNELS: string[] = [
   ...["rotate", "rotateX", "rotateY", "rotateZ"],
 ];
 
-const gsapRendersTransform = (el: Element) =>
-  !!(el as { _gsap?: { renderTransform?: unknown } })._gsap?.renderTransform;
-
 /** GSAP owns this element's position: a tween or hold writes it, or GSAP already renders its
  *  transform (a CSS translate would then apply twice). Everything else moves by plain CSS. */
 export function gsapWritesPosition(el: Element): boolean {