@hyperframes/studio 0.7.79 → 0.7.80

package/src/components/editor/holdEaseSeek.test.ts

@@ -0,0 +1,37 @@
+// Real gsap, not a parseEase stub: this pins the seek behaviour of the `hold`
+// ease against the engine that actually runs it, and gsap is a studio
+// dependency. core's own customEase.test.ts covers the resolver in isolation.
+import { installStudioCustomEase } from "@hyperframes/core/runtime/custom-ease";
+import { gsap } from "gsap";
+import { describe, expect, it } from "vitest";
+
+describe("Studio hold ease", () => {
+  it("holds the start value under seek until the destination time", () => {
+    const runtimeGsap = { parseEase: gsap.parseEase.bind(gsap) };
+    expect(installStudioCustomEase(runtimeGsap)).toBe(true);
+    const hold = runtimeGsap.parseEase("hold");
+    expect(hold).toBeTypeOf("function");
+    if (typeof hold !== "function") return;
+
+    const target = { value: 0 };
+    const timeline = gsap.timeline({ paused: true }).to(
+      target,
+      {
+        value: 100,
+        duration: 2,
+        ease: hold,
+      },
+      0,
+    );
+
+    timeline.seek(0.5);
+    expect(target.value).toBe(0);
+    timeline.seek(1);
+    expect(target.value).toBe(0);
+    timeline.seek(1.99);
+    expect(target.value).toBe(0);
+    timeline.seek(2);
+    expect(target.value).toBe(100);
+    timeline.kill();
+  });
+});

package/src/components/editor/propertyPanelFlatMotionSection.test.tsx

@@ -5,11 +5,15 @@ import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { FlatMotionSection, FlatTimingRow } from "./propertyPanelFlatMotionSection";
 import type { DomEditSelection } from "./domEditing";
+import { usePlayerStore } from "../../player";
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
   document.body.innerHTML = "";
+  // The store is module-global, so a test that parks a focused ease segment
+  // would otherwise leak it into every test that runs after it.
+  usePlayerStore.getState().reset();
 });
 
 function baseElement(overrides: Partial<DomEditSelection> = {}): DomEditSelection {
@@ -270,3 +274,68 @@ describe("FlatMotionSection", () => {
     act(() => root.unmount());
   });
 });
+
+it("forwards focused bulk segment easing through the flat animation card", () => {
+  const onUpdateKeyframeEase = vi.fn();
+  const onUpdateSegmentEase = vi.fn();
+  usePlayerStore.setState({
+    focusedEaseSegment: {
+      elementId: "index.html#hero",
+      animationId: "a1",
+      tweenPercentage: 50,
+      collidingAnimationTargets: [
+        { animationId: "a1", tweenPercentage: 50 },
+        { animationId: "a2", tweenPercentage: 75 },
+      ],
+    },
+  });
+  const { host, root } = renderInto(
+    <FlatMotionSection
+      element={baseElement()}
+      animations={[
+        {
+          id: "a1",
+          method: "to",
+          position: 0,
+          duration: 1,
+          properties: { x: 100 },
+          keyframes: {
+            format: "percentage",
+            keyframes: [
+              { percentage: 0, properties: { x: 0 } },
+              { percentage: 50, properties: { x: 100 } },
+            ],
+          },
+        } as never,
+      ]}
+      showTiming={false}
+      showEffects
+      onSetAttribute={vi.fn()}
+      onAddAnimation={vi.fn()}
+      onUpdateProperty={vi.fn()}
+      onUpdateMeta={vi.fn()}
+      onDeleteAnimation={vi.fn()}
+      onAddProperty={vi.fn()}
+      onRemoveProperty={vi.fn()}
+      onUpdateKeyframeEase={onUpdateKeyframeEase}
+      onUpdateSegmentEase={onUpdateSegmentEase}
+    />,
+  );
+
+  const dropdown = host.querySelector<HTMLButtonElement>("[data-ease-type-dropdown]");
+  expect(dropdown).not.toBeNull();
+  act(() => dropdown?.click());
+  const preset = host.querySelector<HTMLButtonElement>('[data-ease-preset-id="quad-out"]');
+  expect(preset).not.toBeNull();
+  act(() => preset?.click());
+
+  expect(onUpdateSegmentEase).toHaveBeenCalledExactlyOnceWith(
+    [
+      { animationId: "a1", tweenPercentage: 50 },
+      { animationId: "a2", tweenPercentage: 75 },
+    ],
+    "power2.out",
+  );
+  expect(onUpdateKeyframeEase).not.toHaveBeenCalled();
+  act(() => root.unmount());
+});

package/src/components/editor/propertyPanelFlatMotionSection.tsx

@@ -1,3 +1,4 @@
+import { scopedElementKey } from "../../hooks/gsapKeyframeCacheHelpers";
 import { useState } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
@@ -143,7 +144,7 @@ export function FlatMotionSection({
   // the store's selectedElementId, which flips synchronously during async
   // selection resolution), so a shared class-selector animation id can't open
   // the wrong element's editor.
-  const renderedElementId = `${element.sourceFile}#${element.id}`;
+  const renderedElementId = scopedElementKey(element);
   const focusedHere =
     focusedEaseSegment && focusedEaseSegment.elementId === renderedElementId
       ? focusedEaseSegment

package/src/components/editor/propertyPanelFlatProps.ts

@@ -0,0 +1,91 @@
+import type { resolveEditingSections } from "@hyperframes/core/editing";
+import type { DomEditSelection } from "./domEditing";
+import type { PropertyPanelProps } from "./propertyPanelHelpers";
+import type { FlatLayoutSection } from "./propertyPanelFlatLayoutSection";
+
+export type PropertyPanelFlatProps = Pick<
+  PropertyPanelProps,
+  | "projectId"
+  | "projectDir"
+  | "assets"
+  | "previewIframeRef"
+  | "onClearSelection"
+  | "onUngroup"
+  | "onSetStyle"
+  | "onPreviewStyle"
+  | "onSetAttribute"
+  | "onSetAttributes"
+  | "onSetAttributeLive"
+  | "onApplyColorGradingScope"
+  | "onSetHtmlAttribute"
+  | "onRemoveBackground"
+  | "onSetText"
+  | "onSetTextFieldStyle"
+  | "onPreviewTextFieldStyle"
+  | "onAddTextField"
+  | "onRemoveTextField"
+  | "onAskAgent"
+  | "onToggleElementHidden"
+  | "onImportAssets"
+  | "onAddMediaOverlay"
+  | "onImportFonts"
+  | "fontAssets"
+  | "gsapAnimations"
+  | "gsapMultipleTimelines"
+  | "gsapUnsupportedTimelinePattern"
+  | "onUpdateGsapProperty"
+  | "onUpdateGsapMeta"
+  | "onDeleteGsapAnimation"
+  | "onAddGsapProperty"
+  | "onRemoveGsapProperty"
+  | "onUpdateGsapFromProperty"
+  | "onAddGsapFromProperty"
+  | "onRemoveGsapFromProperty"
+  | "onAddGsapAnimation"
+  | "onSetArcPath"
+  | "onUpdateArcSegment"
+  | "onUnroll"
+  | "onUpdateKeyframeEase"
+  | "onSetAllKeyframeEases"
+  | "onUpdateSegmentEase"
+  | "recordingState"
+  | "recordingDuration"
+  | "onToggleRecording"
+> &
+  Pick<
+    Parameters<typeof FlatLayoutSection>[0],
+    | "displayX"
+    | "displayY"
+    | "displayW"
+    | "displayH"
+    | "displayR"
+    | "manualOffsetEditingDisabled"
+    | "manualSizeEditingDisabled"
+    | "manualRotationEditingDisabled"
+    | "commitManualOffset"
+    | "commitManualSize"
+    | "commitManualRotation"
+    | "gsapAnimId"
+    | "navKeyframes"
+    | "animIdForProp"
+    | "gsapRuntimeValues"
+    | "elStart"
+    | "elDuration"
+    | "onCommitAnimatedProperty"
+    | "onCommitAnimatedProperties"
+    | "onSeekToTime"
+    | "onRemoveKeyframe"
+    | "onConvertToKeyframes"
+  > & {
+    element: DomEditSelection;
+    styles: Record<string, string>;
+    sections: ReturnType<typeof resolveEditingSections>;
+    sourceLabel: string;
+    gsapBorderRadius: { tl: number; tr: number; br: number; bl: number } | null;
+    showEditableSections: boolean;
+    selectedElementHidden: boolean;
+    selectedElementId: string | null;
+    clipboardCopied: boolean;
+    onCopyElementInfo: () => void;
+    currentTime: number;
+  };

package/src/components/editor/propertyPanelTypes.ts

@@ -2,6 +2,7 @@ import type { RefObject } from "react";
 import type { ArcPathSegment, GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import type { DomEditSelection } from "./domEditing";
 import type { ImportedFontAsset } from "./fontAssets";
+import type { GsapAnimationEditCallbacks } from "./gsapAnimationCallbacks";
 
 export interface BackgroundRemovalProgress {
   status: "processing" | "complete" | "failed";
@@ -123,6 +124,7 @@ export interface PropertyPanelProps {
   onRemoveKeyframe?: (animationId: string, percentage: number) => void;
   onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
   onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
+  onUpdateSegmentEase?: NonNullable<GsapAnimationEditCallbacks["onUpdateSegmentEase"]>;
   onConvertToKeyframes?: (animationId: string, duration?: number) => void;
   onCommitAnimatedProperty?: (
     selection: DomEditSelection,

package/src/contexts/DomEditContext.tsx

@@ -71,6 +71,7 @@ export interface DomEditActionsValue extends Pick<
   | "commitMutation"
   | "applyMarqueeSelection"
   | "handleUpdateKeyframeEase"
+  | "handleUpdateSegmentEase"
   | "handleSetAllKeyframeEases"
 > {}
 
@@ -200,6 +201,7 @@ export function DomEditProvider({
     applyMarqueeSelection,
     handleUpdateKeyframeEase,
     handleSetAllKeyframeEases,
+    handleUpdateSegmentEase,
   },
   children,
 }: {
@@ -281,6 +283,7 @@ export function DomEditProvider({
       commitMutation: stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleUpdateSegmentEase,
       handleSetAllKeyframeEases,
     }),
     [
@@ -349,6 +352,7 @@ export function DomEditProvider({
       stableCommitMutation,
       applyMarqueeSelection,
       handleUpdateKeyframeEase,
+      handleUpdateSegmentEase,
       handleSetAllKeyframeEases,
     ],
   );

package/src/hooks/gsapKeyframeCacheHelpers.test.ts

@@ -3,8 +3,8 @@ import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { usePlayerStore, type KeyframeCacheEntry } from "../player/store/playerStore";
 import {
   clearKeyframeCacheForElement,
-  clearKeyframeCacheForFile,
   pruneKeyframeCacheToFiles,
+  replaceKeyframeCacheForFile,
   updateKeyframeCacheFromParsed,
 } from "./gsapKeyframeCacheHelpers";
 
@@ -70,48 +70,6 @@ describe("clearKeyframeCacheForElement", () => {
   });
 });
 
-describe("clearKeyframeCacheForFile", () => {
-  it("clears the prefixed, fallback, and bare keys for every element of the file", () => {
-    seed("comp.html#a");
-    seed("index.html#a");
-    seed("a");
-    seed("comp.html#b");
-    seed("b");
-
-    clearKeyframeCacheForFile("comp.html");
-
-    for (const key of ["comp.html#a", "index.html#a", "a", "comp.html#b", "b"]) {
-      expect(cache().has(key)).toBe(false);
-    }
-  });
-
-  // Several composition files re-scan concurrently, so a clear that walked the
-  // index.html alias would delete rows a sibling file had just written.
-  it("leaves an index.html-owned element alone when another file re-scans", () => {
-    seed("index.html#title");
-    seed("title");
-    seed("comp.html#a");
-
-    clearKeyframeCacheForFile("comp.html");
-
-    expect(cache().has("index.html#title")).toBe(true);
-    expect(cache().has("title")).toBe(true);
-    expect(cache().has("comp.html#a")).toBe(false);
-  });
-
-  it("leaves entries that belong to a different source file", () => {
-    seed("comp.html#a");
-    seed("a");
-    seed("other.html#z");
-    seed("z");
-
-    clearKeyframeCacheForFile("comp.html");
-
-    expect(cache().has("other.html#z")).toBe(true);
-    expect(cache().has("z")).toBe(true);
-  });
-});
-
 describe("pruneKeyframeCacheToFiles", () => {
   // Switching composition leaves the previous comp's elements cached with no
   // owner left to clear them: each file only ever clears its own entries.
@@ -152,9 +110,140 @@ describe("pruneKeyframeCacheToFiles", () => {
     expect(cache().has("index.html#hero")).toBe(true);
     expect(cache().has("comp.html#a")).toBe(true);
   });
+
+  // The prune runs immediately before the atomic repopulate on every
+  // composition switch. One notification per stale element put every subscriber
+  // through a cache that was progressively emptier, which is the flash the
+  // atomic repopulate exists to avoid.
+  it("drops every stale file in one notification", () => {
+    seed("old.html#a");
+    seed("old.html#b");
+    seed("older.html#c");
+    seed("kept.html#k");
+    let notifications = 0;
+    const unsubscribe = usePlayerStore.subscribe(() => {
+      notifications += 1;
+    });
+
+    pruneKeyframeCacheToFiles(["kept.html"]);
+    unsubscribe();
+
+    expect(notifications).toBe(1);
+    expect([...cache().keys()]).toEqual(["kept.html#k"]);
+  });
+
+  // A prune that finds nothing stale must not hand subscribers a fresh Map
+  // identity: every keyframe consumer re-renders on cache identity alone.
+  it("does not publish when nothing is stale", () => {
+    seed("kept.html#k");
+    const before = cache();
+    let notifications = 0;
+    const unsubscribe = usePlayerStore.subscribe(() => {
+      notifications += 1;
+    });
+
+    pruneKeyframeCacheToFiles(["kept.html"]);
+    unsubscribe();
+
+    expect(notifications).toBe(0);
+    expect(cache()).toBe(before);
+  });
+});
+
+describe("replaceKeyframeCacheForFile", () => {
+  it("publishes complete keyframe and animation maps in one notification", () => {
+    const staleEntry = entry();
+    const otherEntry = entry();
+    const staleAnimation = animWithKeyframes("stale");
+    const freshAnimation = animWithKeyframes("fresh");
+    usePlayerStore.setState({
+      keyframeCache: new Map([
+        ["scene.html#stale", staleEntry],
+        ["index.html#stale", staleEntry],
+        ["stale", staleEntry],
+        ["other.html#other", otherEntry],
+        ["other", otherEntry],
+      ]),
+      gsapAnimations: new Map([
+        ["scene.html#stale", [staleAnimation]],
+        ["index.html#stale", [staleAnimation]],
+        ["stale", [staleAnimation]],
+        ["other.html#other", [staleAnimation]],
+        ["other", [staleAnimation]],
+      ]),
+    });
+    const snapshots: Array<{ cacheKeys: string[]; animationKeys: string[] }> = [];
+    const unsubscribe = usePlayerStore.subscribe((state) => {
+      snapshots.push({
+        cacheKeys: [...state.keyframeCache.keys()].sort(),
+        animationKeys: [...state.gsapAnimations.keys()].sort(),
+      });
+    });
+
+    replaceKeyframeCacheForFile(
+      "scene.html",
+      new Map([["fresh", entry()]]),
+      new Map([["fresh", [freshAnimation]]]),
+    );
+    unsubscribe();
+
+    expect(snapshots).toEqual([
+      {
+        cacheKeys: ["fresh", "index.html#fresh", "other", "other.html#other", "scene.html#fresh"],
+        animationKeys: [
+          "fresh",
+          "index.html#fresh",
+          "other",
+          "other.html#other",
+          "scene.html#fresh",
+        ],
+      },
+    ]);
+    expect(usePlayerStore.getState().gsapAnimations.get("scene.html#fresh")).toEqual([
+      freshAnimation,
+    ]);
+  });
 });
 
 describe("updateKeyframeCacheFromParsed", () => {
+  it("records colliding animation targets with their own tween percentages", () => {
+    const animation = (
+      id: string,
+      propertyGroup: string,
+      properties: Record<string, number>,
+      percentage: number,
+      resolvedStart: number,
+    ): GsapAnimation => ({
+      ...animWithKeyframes(id),
+      targetSelector: "#hero",
+      propertyGroup,
+      resolvedStart,
+      keyframes: { format: "percentage", keyframes: [{ percentage, properties }] },
+    });
+
+    usePlayerStore.setState({
+      elements: [{ id: "hero", domId: "hero", tag: "div", start: 0, duration: 4, track: 0 }],
+    });
+
+    updateKeyframeCacheFromParsed(
+      [
+        animation("hero-position", "position", { x: 100 }, 50, 0.5),
+        animation("hero-visual", "visual", { opacity: 1 }, 80, 0.2),
+        animation("hero-position", "position", { y: 50 }, 25, 0.75),
+        animation("hero-scale", "scale", { scale: 2 }, 60, 0.4),
+      ],
+      "scene.html",
+      "hero",
+      {},
+    );
+
+    expect(cache().get("scene.html#hero")?.keyframes[0]?.collidingAnimationTargets).toEqual([
+      { animationId: "hero-position", tweenPercentage: 50 },
+      { animationId: "hero-visual", tweenPercentage: 80 },
+      { animationId: "hero-scale", tweenPercentage: 60 },
+    ]);
+  });
+
   it("serializes a multi-keyframe tween with a stable shape and animation identity", () => {
     const animation: GsapAnimation = {
       ...animWithKeyframes("hero"),