@hyperframes/studio 0.7.79 → 0.7.81

package/src/hooks/useDomEditSession.test.tsx

@@ -5,6 +5,7 @@ import { describe, expect, it, vi } from "vitest";
 import { shouldUseSdkCutover } from "../utils/sdkCutover";
 import type { PatchOperation } from "../utils/sourcePatcher";
 import type { Composition } from "@hyperframes/sdk";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { UseDomEditSessionParams } from "./useDomEditSession";
 
 const styleOp = (property: string, value: string): PatchOperation => ({
@@ -57,6 +58,8 @@ const capturedOnReorderShadow: { fn: ((targets: string[]) => void) | undefined }
   fn: undefined,
 };
 
+const domEditSelectionRef: { current: DomEditSelection | null } = { current: null };
+const gsapCommitMutation = Object.assign(vi.fn(), { batch: vi.fn() });
 vi.mock("../utils/sdkResolverShadow", () => ({
   runResolverShadow: vi.fn(),
   recordResolverParity: (...args: unknown[]) => recordResolverParity(...args),
@@ -83,11 +86,11 @@ vi.mock("./useDomEditCommits", () => ({
 }));
 vi.mock("./useDomSelection", () => ({
   useDomSelection: () => ({
-    domEditSelection: null,
+    domEditSelection: domEditSelectionRef.current,
     domEditGroupSelections: [],
     domEditHoverSelection: null,
     activeGroupElement: null,
-    domEditSelectionRef: { current: null },
+    domEditSelectionRef,
     domEditGroupSelectionsRef: { current: [] },
     setActiveGroupElement: vi.fn(),
     applyDomSelection: vi.fn(),
@@ -123,7 +126,7 @@ vi.mock("./useGsapTweenCache", () => ({
 }));
 vi.mock("./useGsapScriptCommits", () => ({
   useGsapScriptCommits: () => ({
-    commitMutation: vi.fn(),
+    commitMutation: gsapCommitMutation,
     updateGsapProperty: vi.fn(),
     updateGsapMeta: vi.fn(),
     deleteGsapAnimation: vi.fn(),
@@ -277,3 +280,149 @@ describe("onReorderShadow source filter", () => {
     }
   });
 });
+
+describe("bulk segment ease commits", () => {
+  it("uses one ordered batch for many ids and sane paths for one or no ids", async () => {
+    const { useDomEditSession } = await import("./useDomEditSession");
+    const selection: DomEditSelection = {
+      id: "hero",
+      element: document.createElement("div"),
+      label: "Hero",
+      tagName: "DIV",
+      sourceFile: "index.html",
+      compositionPath: "index.html",
+      isCompositionHost: false,
+      isInsideLockedComposition: false,
+      boundingBox: { x: 0, y: 0, width: 100, height: 100 },
+      textContent: null,
+      dataAttributes: {},
+      inlineStyles: {},
+      computedStyles: {},
+      textFields: [],
+      capabilities: {
+        canSelect: true,
+        canEditStyles: true,
+        canCrop: true,
+        canMove: true,
+        canResize: true,
+        canApplyManualOffset: true,
+        canApplyManualSize: true,
+        canApplyManualRotation: true,
+      },
+    };
+    domEditSelectionRef.current = selection;
+    gsapCommitMutation.mockClear();
+    gsapCommitMutation.batch.mockClear();
+    let updateSegmentEase:
+      | ((targets: Array<{ animationId: string; tweenPercentage: number }>, ease: string) => void)
+      | undefined;
+
+    function Probe() {
+      const params: UseDomEditSessionParams = {
+        projectId: "proj-1",
+        activeCompPath: "index.html",
+        isMasterView: false,
+        compIdToSrc: new Map(),
+        captionEditMode: false,
+        compositionLoading: false,
+        previewIframeRef: { current: null },
+        timelineElements: [],
+        setSelectedTimelineElementId: vi.fn(),
+        setRightCollapsed: vi.fn(),
+        setRightPanelTab: vi.fn(),
+        showToast: vi.fn(),
+        refreshPreviewDocumentVersion: vi.fn(),
+        queueDomEditSave: async <T,>(save: () => Promise<T>) => save(),
+        readProjectFile: async () => "",
+        writeProjectFile: async () => {},
+        updateEditingFileContent: vi.fn(),
+        domEditSaveTimestampRef: { current: 0 },
+        editHistory: { recordEdit: async () => {} },
+        fileTree: [],
+        importedFontAssetsRef: { current: [] },
+        projectDir: null,
+        projectIdRef: { current: "proj-1" },
+        previewIframe: null,
+        refreshKey: 0,
+        previewDocumentVersion: 0,
+        rightPanelTab: "design",
+        applyStudioManualEditsToPreviewRef: { current: async () => {} },
+        syncPreviewHistoryHotkey: vi.fn(),
+        reloadPreview: vi.fn(),
+        setRefreshKey: vi.fn(),
+      };
+      updateSegmentEase = useDomEditSession(params).handleUpdateSegmentEase;
+      return null;
+    }
+
+    const container = document.createElement("div");
+    const root = createRoot(container);
+    act(() => root.render(<Probe />));
+    try {
+      expect(updateSegmentEase).toBeTypeOf("function");
+      if (!updateSegmentEase) return;
+      const options = { label: "Update segment ease", softReload: true };
+      const targets = [
+        { animationId: "move-x", tweenPercentage: 20 },
+        { animationId: "move-y", tweenPercentage: 50 },
+        { animationId: "fade", tweenPercentage: 80 },
+      ];
+      updateSegmentEase(targets, "power2.inOut");
+
+      expect(gsapCommitMutation).not.toHaveBeenCalled();
+      expect(gsapCommitMutation.batch).toHaveBeenCalledTimes(1);
+      expect(gsapCommitMutation.batch).toHaveBeenCalledWith(
+        targets.map(({ animationId, tweenPercentage }) => ({
+          selection,
+          mutation: {
+            type: "update-keyframe",
+            animationId,
+            percentage: tweenPercentage,
+            properties: {},
+            ease: "power2.inOut",
+          },
+          options,
+        })),
+        options,
+      );
+
+      gsapCommitMutation.mockClear();
+      gsapCommitMutation.batch.mockClear();
+      updateSegmentEase([{ animationId: "fade", tweenPercentage: 25 }], "none");
+      expect(gsapCommitMutation).toHaveBeenCalledTimes(1);
+      expect(gsapCommitMutation).toHaveBeenCalledWith(
+        selection,
+        {
+          type: "update-keyframe",
+          animationId: "fade",
+          percentage: 25,
+          properties: {},
+          ease: "none",
+        },
+        { label: "Update keyframe ease", softReload: true },
+      );
+      expect(gsapCommitMutation.batch).not.toHaveBeenCalled();
+
+      gsapCommitMutation.mockClear();
+      updateSegmentEase([], "linear");
+      expect(gsapCommitMutation).not.toHaveBeenCalled();
+      expect(gsapCommitMutation.batch).not.toHaveBeenCalled();
+
+      // A commit with no batch transport (a wrapped one, e.g. inside a gesture
+      // transaction) must still write every tween. Optional-chaining the batch
+      // call would drop the whole edit here and report nothing.
+      gsapCommitMutation.mockClear();
+      const restoreBatch = gsapCommitMutation.batch;
+      Reflect.deleteProperty(gsapCommitMutation, "batch");
+      try {
+        updateSegmentEase(targets, "power1.in");
+        expect(gsapCommitMutation).toHaveBeenCalledTimes(targets.length);
+      } finally {
+        gsapCommitMutation.batch = restoreBatch;
+      }
+    } finally {
+      domEditSelectionRef.current = null;
+      act(() => root.unmount());
+    }
+  });
+});

package/src/hooks/useDomEditSession.ts

@@ -19,8 +19,7 @@ import { useGsapCacheVersion } from "./useGsapTweenCache";
 import { useDomEditWiring } from "./useDomEditWiring";
 import { useGsapAwareEditing } from "./useGsapAwareEditing";
 import { useStudioSelectionPublisher } from "./useStudioSelectionPublisher";
-
-// ── Types ──
+import { useKeyframeEaseCommits } from "./useKeyframeEaseCommits";
 
 interface RecordEditInput {
   label: string;
@@ -71,8 +70,6 @@ export interface UseDomEditSessionParams {
   forceReloadSdkSession?: () => void;
 }
 
-// ── Hook ──
-
 export function useDomEditSession({
   projectId,
   activeCompPath,
@@ -113,8 +110,6 @@ export function useDomEditSession({
   forceReloadSdkSession,
 }: UseDomEditSessionParams) {
   void _setRefreshKey;
-  // ── Selection ──
-
   const {
     domEditSelection,
     domEditGroupSelections,
@@ -149,8 +144,6 @@ export function useDomEditSession({
     rightPanelTab,
   });
 
-  // ── Agent modal ──
-
   const {
     agentModalOpen,
     agentModalAnchorPoint,
@@ -423,9 +416,6 @@ export function useDomEditSession({
     removeAllKeyframes,
     handleDomManualEditsReset,
   });
-
-  // ── Preview interaction ──
-
   const {
     handlePreviewCanvasMouseDown,
     handlePreviewCanvasPointerMove,
@@ -444,9 +434,6 @@ export function useDomEditSession({
     setActiveGroupElement,
     onClickToSource,
   });
-
-  // ── GSAP-aware geometry intercepts + animated property commit ──
-
   const {
     handleGsapAwarePathOffsetCommit,
     handleGsapAwareGroupPathOffsetCommit,
@@ -473,45 +460,8 @@ export function useDomEditSession({
     setArcPath,
     updateArcSegment,
   });
-
-  const handleUpdateKeyframeEase = useCallback(
-    (animationId: string, percentage: number, ease: string) => {
-      const sel = domEditSelectionRef.current;
-      if (!sel) return;
-      gsapCommitMutation(
-        sel,
-        {
-          type: "update-keyframe",
-          animationId,
-          percentage,
-          properties: {},
-          ease,
-        },
-        { label: "Update keyframe ease", softReload: true },
-      );
-    },
-    [gsapCommitMutation, domEditSelectionRef],
-  );
-
-  // Apply one ease to every segment at once (AE select-all + F9): set easeEach
-  // and strip per-keyframe overrides in a single mutation.
-  const handleSetAllKeyframeEases = useCallback(
-    (animationId: string, ease: string) => {
-      const sel = domEditSelectionRef.current;
-      if (!sel) return;
-      gsapCommitMutation(
-        sel,
-        {
-          type: "update-meta",
-          animationId,
-          updates: { easeEach: ease, resetKeyframeEases: true },
-        },
-        { label: "Apply ease to all segments", softReload: true },
-      );
-    },
-    [gsapCommitMutation, domEditSelectionRef],
-  );
-
+  const { handleUpdateSegmentEase, handleUpdateKeyframeEase, handleSetAllKeyframeEases } =
+    useKeyframeEaseCommits({ gsapCommitMutation, domEditSelectionRef });
   return {
     // State
     domEditSelection,
@@ -591,6 +541,7 @@ export function useDomEditSession({
     commitAnimatedProperty,
     commitAnimatedProperties,
     handleSetArcPath,
+    handleUpdateSegmentEase,
     handleUpdateArcSegment,
     handleUnroll,
     invalidateGsapCache: bumpGsapCache,

package/src/hooks/useGsapTweenCache.ts

@@ -5,6 +5,7 @@ import { readRuntimeKeyframes, scanAllRuntimeKeyframes } from "./gsapRuntimeBrid
 import {
   clearKeyframeCacheForElement,
   pruneKeyframeCacheToFiles,
+  publishKeyframeCache,
   writeGsapAnimationsForElement,
 } from "./gsapKeyframeCacheHelpers";
 import { resolveClipTimingBasis, toAbsoluteTime, toClipPercentage } from "./gsapShared";
@@ -12,6 +13,7 @@ import {
   deduplicateKeyframes,
   isStaticPositionHold,
   synthesizeFlatTweenKeyframes,
+  type MergeableKeyframe,
 } from "./gsapTweenSynth";
 import { fetchParsedAnimations, populateKeyframeCacheFromAst } from "./keyframeCacheAstLoad";
 
@@ -266,13 +268,7 @@ export function useGsapAnimationsForElement(
       domClipChildren,
     );
 
-    const allKeyframes: Array<
-      GsapKeyframesData["keyframes"][0] & {
-        tweenPercentage?: number;
-        propertyGroup?: string;
-        animationId?: string;
-      }
-    > = [];
+    const allKeyframes: MergeableKeyframe[] = [];
     let format: GsapKeyframesData["format"] = "percentage";
     let ease: string | undefined;
     let easeEach: string | undefined;
@@ -318,11 +314,15 @@ export function useGsapAnimationsForElement(
       ...(ease ? { ease } : {}),
       ...(easeEach ? { easeEach } : {}),
     };
-    const { setKeyframeCache } = usePlayerStore.getState();
-    setKeyframeCache(`${sourceFile}#${elementId}`, merged);
-    // PropertyPanel reads the cache by bare elementId (without sourceFile prefix),
-    // so write a duplicate entry under the bare key for cross-component lookups.
-    setKeyframeCache(elementId, merged);
+    // PropertyPanel reads the cache by bare elementId (without sourceFile
+    // prefix), so the same entry is written under the bare key for
+    // cross-component lookups. Both keys land in one publish: a reader that woke
+    // between two separate writes saw the prefixed key updated and the bare one
+    // still stale.
+    publishKeyframeCache((draft) => {
+      draft.keyframeCache.set(`${sourceFile}#${elementId}`, merged);
+      draft.keyframeCache.set(elementId, merged);
+    });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [elementId, sourceFile, animations, domClipChildrenKey]);
 
@@ -421,29 +421,35 @@ export function usePopulateKeyframeCacheForFile(
       }
       const scanned = scanAllRuntimeKeyframes(iframe, clipById);
       if (scanned.size === 0) return false;
-      const { setKeyframeCache, keyframeCache } = usePlayerStore.getState();
-      for (const [id, data] of scanned) {
-        const cacheKey = `${sf}#${id}`;
-        const fallbackKey = `index.html#${id}`;
-        const alreadyCached =
-          keyframeCache.has(cacheKey) || keyframeCache.has(fallbackKey) || keyframeCache.has(id);
-        if (alreadyCached) continue;
-        // Skip position-only set tweens from runtime too — same filter as AST path
-        const isPosOnly =
-          data.keyframes.length === 1 &&
-          Object.keys(data.keyframes[0].properties).every((k) => k === "x" || k === "y");
-        if (isPosOnly) {
-          continue;
+      // One publish for the whole scan: a scan of a 120-clip composition used to
+      // emit up to three store notifications per element, and every subscriber
+      // in between re-rendered against a cache only partly filled in.
+      publishKeyframeCache((draft) => {
+        for (const [id, data] of scanned) {
+          const cacheKey = `${sf}#${id}`;
+          const fallbackKey = `index.html#${id}`;
+          const alreadyCached =
+            draft.keyframeCache.has(cacheKey) ||
+            draft.keyframeCache.has(fallbackKey) ||
+            draft.keyframeCache.has(id);
+          if (alreadyCached) continue;
+          // Skip position-only set tweens from runtime too, same filter as AST path
+          const isPosOnly =
+            data.keyframes.length === 1 &&
+            Object.keys(data.keyframes[0].properties).every((k) => k === "x" || k === "y");
+          if (isPosOnly) {
+            continue;
+          }
+          const entry = {
+            format: "percentage" as const,
+            keyframes: data.keyframes,
+            ...(data.easeEach ? { easeEach: data.easeEach } : {}),
+          };
+          draft.keyframeCache.set(cacheKey, entry);
+          if (sf !== "index.html") draft.keyframeCache.set(fallbackKey, entry);
+          draft.keyframeCache.set(id, entry);
         }
-        const entry = {
-          format: "percentage" as const,
-          keyframes: data.keyframes,
-          ...(data.easeEach ? { easeEach: data.easeEach } : {}),
-        };
-        setKeyframeCache(cacheKey, entry);
-        if (sf !== "index.html") setKeyframeCache(fallbackKey, entry);
-        setKeyframeCache(id, entry);
-      }
+      });
       runtimeScanDoneRef.current = `kf-cache:${projectId}:${sf}:${version}`;
       return true;
     };

package/src/hooks/useKeyframeEaseCommits.ts

@@ -0,0 +1,78 @@
+import { useCallback, type RefObject } from "react";
+import type { CommitMutation } from "./gsapScriptCommitTypes";
+import type { AnimationKeyframeTarget } from "./gsapTweenSynth";
+import type { DomEditSelection } from "../components/editor/domEditing";
+
+interface KeyframeEaseCommitsInput {
+  gsapCommitMutation: CommitMutation;
+  domEditSelectionRef: RefObject<DomEditSelection | null>;
+}
+
+export function useKeyframeEaseCommits({
+  gsapCommitMutation,
+  domEditSelectionRef,
+}: KeyframeEaseCommitsInput) {
+  const handleUpdateSegmentEase = useCallback(
+    (targets: AnimationKeyframeTarget[], ease: string) => {
+      const selection = domEditSelectionRef.current;
+      if (!selection || targets.length === 0) return;
+      const options = {
+        label: targets.length === 1 ? "Update keyframe ease" : "Update segment ease",
+        softReload: true,
+      };
+      const calls = targets.map(({ animationId, tweenPercentage }) => ({
+        selection,
+        mutation: {
+          type: "update-keyframe",
+          animationId,
+          percentage: tweenPercentage,
+          properties: {},
+          ease,
+        },
+        options,
+      }));
+      if (calls.length === 1) {
+        const call = calls[0];
+        if (call) void gsapCommitMutation(call.selection, call.mutation, call.options);
+        return;
+      }
+      const batch = gsapCommitMutation.batch;
+      if (batch) {
+        void batch(calls, options);
+        return;
+      }
+      // A wrapped commit (a gesture transaction, say) carries no batch
+      // transport. Serial keeps the edit correct at the cost of one round trip
+      // per tween and one undo entry per tween; an optional-chained call here
+      // would silently drop the whole edit instead.
+      for (const call of calls)
+        void gsapCommitMutation(call.selection, call.mutation, call.options);
+    },
+    [gsapCommitMutation, domEditSelectionRef],
+  );
+
+  const handleUpdateKeyframeEase = useCallback(
+    (animationId: string, percentage: number, ease: string) =>
+      handleUpdateSegmentEase([{ animationId, tweenPercentage: percentage }], ease),
+    [handleUpdateSegmentEase],
+  );
+
+  const handleSetAllKeyframeEases = useCallback(
+    (animationId: string, ease: string) => {
+      const sel = domEditSelectionRef.current;
+      if (!sel) return;
+      gsapCommitMutation(
+        sel,
+        {
+          type: "update-meta",
+          animationId,
+          updates: { easeEach: ease, resetKeyframeEases: true },
+        },
+        { label: "Apply ease to all segments", softReload: true },
+      );
+    },
+    [gsapCommitMutation, domEditSelectionRef],
+  );
+
+  return { handleUpdateSegmentEase, handleUpdateKeyframeEase, handleSetAllKeyframeEases };
+}

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

@@ -66,4 +66,25 @@ describe("KeyframeDiamondContextMenu", () => {
     expect(onDelete).toHaveBeenCalledWith("box", target);
     expect(onMoveToPlayhead).toHaveBeenCalledWith(element, target);
   });
+
+  // An arc waypoint on a two-anchor path cannot be dropped on its own, so the
+  // caller withholds onDelete rather than offering an entry that does nothing.
+  it("hides the single-node delete when no handler is given", () => {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    const root = createRoot(host);
+    act(() =>
+      root.render(
+        <KeyframeDiamondContextMenu state={state} onClose={() => {}} onDeleteAll={vi.fn()} />,
+      ),
+    );
+
+    const labels = Array.from(document.body.querySelectorAll("button")).map(
+      (button) => button.textContent,
+    );
+    expect(labels).toEqual(["Delete All Keyframes"]);
+
+    act(() => root.unmount());
+    host.remove();
+  });
 });

package/src/player/components/KeyframeDiamondContextMenu.tsx

@@ -19,7 +19,10 @@ export interface KeyframeDiamondContextMenuState {
 interface KeyframeDiamondContextMenuProps {
   state: KeyframeDiamondContextMenuState;
   onClose: () => void;
-  onDelete: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
+  /** Omitted where this node cannot be deleted on its own (see the arc-waypoint
+   *  floor in removeMotionPathPointInScript): an entry that silently no-ops is
+   *  worse than no entry. */
+  onDelete?: (elementId: string, keyframe: TimelineKeyframeTarget) => void;
   onDeleteAll: (element: TimelineElement) => void;
   /** Retime the keyframe to the current playhead, preserving its value + ease. */
   onMoveToPlayhead?: (element: TimelineElement, keyframe: TimelineKeyframeTarget) => void;
@@ -43,7 +46,9 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
   };
 
   const menuWidth = 200;
-  const menuHeight = onMoveToPlayhead ? 100 : 70;
+  // Measured off the rendered rows, so the flip-up test below stays right as
+  // optional entries drop out.
+  const menuHeight = 10 + (1 + (onMoveToPlayhead ? 1 : 0) + (onDelete ? 1 : 0)) * 30;
   const overflowY = state.y + menuHeight - window.innerHeight;
   const adjustedX = state.x + menuWidth > window.innerWidth ? state.x - menuWidth : state.x;
   const adjustedY = overflowY > 0 ? state.y - overflowY - 8 : state.y;
@@ -71,16 +76,18 @@ export const KeyframeDiamondContextMenu = memo(function KeyframeDiamondContextMe
       )}
 
       {/* Delete */}
-      <button
-        type="button"
-        className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
-        onClick={() => {
-          onDelete(state.elementId, keyframe);
-          onClose();
-        }}
-      >
-        Delete Keyframe
-      </button>
+      {onDelete && (
+        <button
+          type="button"
+          className="w-full flex items-center gap-2 px-3 py-1.5 text-xs text-red-400 hover:bg-neutral-800 cursor-pointer text-left"
+          onClick={() => {
+            onDelete(state.elementId, keyframe);
+            onClose();
+          }}
+        >
+          Delete Keyframe
+        </button>
+      )}
 
       <button
         type="button"

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

@@ -658,7 +658,18 @@ describe("TimelineClipDiamonds", () => {
         <TimelineDiamondLane
           keyframesData={{
             format: "percentage",
-            keyframes: [kf(0), kf(50), kf(100, { easeAmbiguous: lastAmbiguous })],
+            keyframes: [
+              kf(0),
+              kf(50),
+              kf(100, {
+                collidingAnimationTargets: lastAmbiguous
+                  ? [
+                      { animationId: "anim-1", tweenPercentage: 100 },
+                      { animationId: "anim-2", tweenPercentage: 75 },
+                    ]
+                  : undefined,
+              }),
+            ],
           }}
           clipWidthPx={clipWidthPx}
           clipHeightPx={48}
@@ -675,15 +686,16 @@ describe("TimelineClipDiamonds", () => {
     return { host, root };
   };
 
-  it("hides the inline ease button on an ambiguous merged segment", () => {
-    // Segments 0->50 and 50->100; the 50->100 segment ends on the ambiguous
-    // keyframe, so its hover/ease-button area is not rendered.
+  it("shows the inline ease button on a colliding merged segment (bulk edit)", () => {
+    // Both segments (0->50, 50->100) render their ease button; the 50->100
+    // segment ends on a keyframe shared by two animations and the button now
+    // bulk-edits both rather than being hidden.
     const { host, root } = renderSegmentLane(true);
-    expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(1);
+    expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(2);
     act(() => root.unmount());
   });
 
-  it("keeps the inline ease button on unambiguous merged segments", () => {
+  it("shows the inline ease button on single-animation merged segments", () => {
     const { host, root } = renderSegmentLane(false);
     expect(host.querySelectorAll("[data-keyframe-ease-segment]").length).toBe(2);
     act(() => root.unmount());