@hyperframes/studio 0.7.78 → 0.7.80

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

@@ -26,7 +26,6 @@ describe("withTrackedGsapAnimationCallbacks", () => {
     const onLivePreviewEnd = vi.fn();
     callbacks.onLivePreview = onLivePreview;
     callbacks.onLivePreviewEnd = onLivePreviewEnd;
-
     const tracked = withTrackedGsapAnimationCallbacks(callbacks, vi.fn());
 
     expect(tracked.onUpdateFromProperty).toBeUndefined();
@@ -37,6 +36,7 @@ describe("withTrackedGsapAnimationCallbacks", () => {
     expect(tracked.onUpdateKeyframeEase).toBeUndefined();
     expect(tracked.onSetAllKeyframeEases).toBeUndefined();
     expect(tracked.onUnroll).toBeUndefined();
+    expect(tracked.onUpdateSegmentEase).toBeUndefined();
     expect(tracked.onLivePreview).toBe(onLivePreview);
     expect(tracked.onLivePreviewEnd).toBe(onLivePreviewEnd);
   });
@@ -57,6 +57,7 @@ describe("withTrackedGsapAnimationCallbacks", () => {
       onUpdateArcSegment: mutation("arc-segment"),
       onUpdateKeyframeEase: mutation("keyframe-ease"),
       onSetAllKeyframeEases: mutation("all-eases"),
+      onUpdateSegmentEase: mutation("segment-ease"),
       onUnroll: mutation("unroll"),
     };
     const tracked = withTrackedGsapAnimationCallbacks(callbacks, (control, name) => {
@@ -79,6 +80,10 @@ describe("withTrackedGsapAnimationCallbacks", () => {
     requireCallback(tracked.onUpdateArcSegment)("a1", 1, { curviness: 0.5 });
     requireCallback(tracked.onUpdateKeyframeEase)("a1", 50, "power2.out");
     requireCallback(tracked.onSetAllKeyframeEases)("a1", "none");
+    requireCallback(tracked.onUpdateSegmentEase)(
+      [{ animationId: "a1", tweenPercentage: 50 }],
+      "none",
+    );
     requireCallback(tracked.onUnroll)("a1");
 
     expect(events).toEqual([
@@ -115,6 +120,8 @@ describe("withTrackedGsapAnimationCallbacks", () => {
       "mutate:keyframe-ease",
       "track:select:All keyframe eases",
       "mutate:all-eases",
+      "track:select:Segment ease",
+      "mutate:segment-ease",
       "track:button:Unroll animation",
       "mutate:unroll",
     ]);

package/src/components/editor/gsapAnimationCallbacks.ts

@@ -1,5 +1,6 @@
 import type { ArcPathSegment } from "@hyperframes/parsers/gsap-parser";
 import { usePlayerStore } from "../../player";
+import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 /**
  * Edit callbacks shared by GsapAnimationSection and each AnimationCard it
@@ -30,6 +31,7 @@ export interface GsapAnimationEditCallbacks {
     update: Partial<ArcPathSegment>,
   ) => void;
   onUpdateKeyframeEase?: (animationId: string, percentage: number, ease: string) => void;
+  onUpdateSegmentEase?: (targets: AnimationKeyframeTarget[], ease: string) => void;
   /** Apply one ease to every keyframe segment at once (clears per-segment overrides). */
   onSetAllKeyframeEases?: (animationId: string, ease: string) => void;
   /** Unroll a computed (helper/loop) tween into literal tweens so it edits directly. */
@@ -122,6 +124,12 @@ export function withTrackedGsapAnimationCallbacks(
       : undefined,
     onLivePreview: callbacks.onLivePreview,
     onLivePreviewEnd: callbacks.onLivePreviewEnd,
+    onUpdateSegmentEase: callbacks.onUpdateSegmentEase
+      ? (targets, ease) => {
+          track("select", "Segment ease");
+          callbacks.onUpdateSegmentEase?.(targets, ease);
+        }
+      : undefined,
     onSetArcPath: callbacks.onSetArcPath
       ? (animationId, config) => {
           track("toggle", config.autoRotate !== undefined ? "Auto rotate" : "Arc motion");

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

@@ -180,3 +180,45 @@ describe("resolveKeyframeRetime — guards", () => {
     expect(r.pctRemap).toEqual([]);
   });
 });
+
+describe("resolveKeyframeRetime — move percentages are rounded like the resize path", () => {
+  // The move branch used to return the raw quotient, so `74.81203007518799%`
+  // landed in the user's source and churned the diff on every drag.
+  const decimals = (n: number): number => String(n).split(".")[1]?.length ?? 0;
+
+  it("rounds a repeating quotient to 3dp", () => {
+    const r = resolveKeyframeRetime({
+      tweenStart: 2,
+      tweenDuration: 3,
+      keyframes: KEYFRAMES,
+      draggedTweenPct: 0,
+      dropAbsTime: 3, // (3-2)/3 = 33.333333333333336%
+    });
+    expect(r.kind).toBe("move");
+    expect(r.toTweenPct).toBe(33.333);
+  });
+
+  it("never emits more than 3 decimal places", () => {
+    for (const tweenDuration of [3, 7, 9, 11, 133]) {
+      const r = resolveKeyframeRetime({
+        tweenStart: 2,
+        tweenDuration,
+        keyframes: KEYFRAMES,
+        draggedTweenPct: 0,
+        dropAbsTime: 3,
+      });
+      expect(r.kind).toBe("move");
+      expect(decimals(r.toTweenPct ?? 0)).toBeLessThanOrEqual(3);
+    }
+  });
+
+  it("leaves an already-short percentage untouched", () => {
+    const r = resolveKeyframeRetime({
+      ...WINDOW,
+      keyframes: KEYFRAMES,
+      draggedTweenPct: 0,
+      dropAbsTime: 3, // (3-2)/4 = exactly 25%
+    });
+    expect(r.toTweenPct).toBe(25);
+  });
+});

package/src/components/editor/keyframeRetime.ts

@@ -121,7 +121,10 @@ export function resolveKeyframeRetime(opts: {
 
   // Within the tween window → plain move (re-key the tween-%).
   if (dropAbsTime >= tweenStart - EPSILON_TIME && dropAbsTime <= tweenEnd + EPSILON_TIME) {
-    const toTweenPct = clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100);
+    // Round here, not at the return: the no-op test below and the value written
+    // to source must be the same number. The resize branch already rounds, so
+    // this keeps both write paths at the authored 3dp precision.
+    const toTweenPct = round3(clamp(((dropAbsTime - tweenStart) / tweenDuration) * 100, 0, 100));
     if (Math.abs(toTweenPct - draggedTweenPct) < NOOP_EPSILON_PCT) return { kind: "noop" };
     return { kind: "move", toTweenPct };
   }

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

@@ -0,0 +1,65 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import type { DomEditSelection } from "./domEditingTypes";
+import { buildStableSelector, getSelectorIndex } from "./domEditingDom";
+import { selectorFor } from "./motionPathSelection";
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function selectionFor(el: HTMLElement): DomEditSelection {
+  const selector = buildStableSelector(el);
+  return {
+    element: el,
+    id: el.id || undefined,
+    hfId: el.getAttribute("data-hf-id") || undefined,
+    selector,
+    selectorIndex: getSelectorIndex(document, el, selector, "index.html", null),
+    sourceFile: "index.html",
+    dataAttributes: { start: "0", duration: "2" },
+  } as unknown as DomEditSelection;
+}
+
+function mountGroupSiblings(): HTMLElement[] {
+  document.body.innerHTML = `
+    <div id="scene" class="clip" data-start="0" data-duration="2">
+      <div class="group"></div>
+      <div class="group"></div>
+      <div class="group"></div>
+    </div>
+  `;
+  return Array.from(document.querySelectorAll<HTMLElement>(".group"));
+}
+
+describe("selectorFor", () => {
+  it("addresses one element for a class-only sibling", () => {
+    const groups = mountGroupSiblings();
+    const selector = selectorFor(selectionFor(groups[2]!));
+
+    // The bare ".group" both measured home off the FIRST sibling and wrote the
+    // new motion path onto all three.
+    expect(selector).not.toBe(".group");
+    expect(document.querySelectorAll(selector!)).toHaveLength(1);
+    expect(document.querySelector(selector!)).toBe(groups[2]);
+  });
+
+  it("keeps a unique id target", () => {
+    document.body.innerHTML = `<div id="hero"></div>`;
+    const el = document.querySelector<HTMLElement>("#hero")!;
+
+    expect(selectorFor(selectionFor(el))).toBe("#hero");
+  });
+
+  it("returns null with no selection", () => {
+    expect(selectorFor(null)).toBeNull();
+  });
+
+  it("returns null when no rung addresses one element", () => {
+    const groups = mountGroupSiblings();
+    const selection = selectionFor(groups[1]!);
+    groups[1]!.remove();
+
+    expect(selectorFor(selection)).toBeNull();
+  });
+});

package/src/components/editor/motionPathSelection.ts

@@ -5,11 +5,21 @@
  */
 import type { GsapAnimation } from "@hyperframes/parsers/gsap-parser";
 import type { DomEditSelection } from "./domEditing";
+import { writeTargetSelector } from "../../hooks/gsapShared";
 
+/**
+ * The selector the overlay both MEASURES the element by and authors a new
+ * motion path against.
+ *
+ * Both halves need exactly one element. The selection's own selector is a bare
+ * class for an id-less element, so a `.group` sibling read its home position off
+ * the FIRST sibling (skewing the destination the click computes) and then wrote
+ * `add-motion-path` onto all five. `writeTargetSelector` is the same one-element
+ * narrowing every other new-tween writer goes through; null means no such form
+ * exists, and the overlay hides "set destination" rather than write a wrong one.
+ */
 export function selectorFor(sel: DomEditSelection | null): string | null {
-  if (!sel) return null;
-  if (sel.id) return `#${CSS.escape(sel.id)}`;
-  return sel.selector ?? null;
+  return sel ? writeTargetSelector(sel) : null;
 }
 
 /** The animation whose path is editable on-canvas: literal, statically resolved,

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

@@ -1,43 +1,85 @@
 // @vitest-environment happy-dom
 
 import React, { act } from "react";
-import { createRoot } from "react-dom/client";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { __resetDesignInputThrottle } from "../../utils/designInputTracking";
 import { ColorField } from "./propertyPanelColor";
 
+const trackStudioEvent = vi.hoisted(() => vi.fn());
+
+vi.mock("../../utils/studioTelemetry", () => ({
+  trackStudioEvent: (...args: unknown[]) => trackStudioEvent(...args),
+}));
+
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
+const roots: Root[] = [];
+
+beforeEach(() => {
+  trackStudioEvent.mockReset();
+  __resetDesignInputThrottle();
+});
+
 afterEach(() => {
+  for (const root of roots) act(() => root.unmount());
+  roots.length = 0;
   document.body.innerHTML = "";
 });
 
-function renderColorField(onCommit: (value: string) => void): void {
+function renderColorField({
+  value = "#333333",
+  onPreview,
+  onCommit = vi.fn(),
+}: {
+  value?: string;
+  onPreview?: (value: string) => void;
+  onCommit?: (value: string) => void;
+} = {}): HTMLElement {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
+  roots.push(root);
   act(() => {
-    root.render(<ColorField flat label="Color" value="rgb(255, 176, 32)" onCommit={onCommit} />);
+    root.render(
+      <ColorField flat label="Color" value={value} onPreview={onPreview} onCommit={onCommit} />,
+    );
   });
+  return host;
+}
+
+function changeInput(input: HTMLInputElement, value: string): void {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  if (!setter) throw new Error("expected native input value setter");
+  setter.call(input, value);
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function openHexInput(host: HTMLElement): HTMLInputElement {
+  const trigger = host.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
+  if (!trigger) throw new Error("Color trigger was not rendered");
+  act(() => trigger.click());
+  const input = document.querySelector<HTMLInputElement>('input[spellcheck="false"]');
+  if (!input) throw new Error("Hex input was not rendered");
+  return input;
+}
+
+function clickOutside(): void {
+  document.body.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
 }
 
 describe("ColorField flat trigger", () => {
   it("renders label and value inline with a small swatch, no boxed border", () => {
-    const host = document.createElement("div");
-    document.body.append(host);
-    const root = createRoot(host);
-    act(() => {
-      root.render(<ColorField flat label="Color" value="rgb(255, 176, 32)" onCommit={vi.fn()} />);
-    });
+    const host = renderColorField({ value: "rgb(255, 176, 32)" });
     const trigger = host.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
     expect(trigger).not.toBeNull();
     expect(trigger?.className).not.toContain("border-neutral-800");
     expect(host.textContent).toContain("Color");
-    act(() => root.unmount());
   });
 
   it("persists one keyboard slider gesture on keyup", () => {
     const onCommit = vi.fn();
-    renderColorField(onCommit);
+    renderColorField({ value: "rgb(255, 176, 32)", onCommit });
     const trigger = document.querySelector<HTMLButtonElement>('[data-flat-color-trigger="true"]');
     if (!trigger) throw new Error("Color trigger was not rendered");
     act(() => {
@@ -57,3 +99,130 @@ describe("ColorField flat trigger", () => {
     expect(onCommit).toHaveBeenCalledOnce();
   });
 });
+
+describe("ColorField hex editing", () => {
+  it("allows #333333 to be backspaced to #3 without snapping", () => {
+    const input = openHexInput(renderColorField());
+
+    for (const value of ["#33333", "#3333", "#333", "#33", "#3"]) {
+      act(() => changeInput(input, value));
+      expect(input.value).toBe(value);
+    }
+  });
+
+  it("does not silently change #22CC66 to #2222CC while backspacing", () => {
+    const input = openHexInput(renderColorField({ value: "#22CC66" }));
+
+    for (const value of ["#22CC6", "#22CC", "#22C"]) {
+      act(() => changeInput(input, value));
+      expect(input.value).toBe(value);
+      expect(input.value).not.toBe("#2222CC");
+    }
+  });
+
+  it("commits a full replacement after selecting the existing value", () => {
+    const onCommit = vi.fn();
+    const input = openHexInput(renderColorField({ onCommit }));
+    input.focus();
+    input.select();
+
+    act(() => changeInput(input, "#12AB34"));
+    act(() => input.blur());
+
+    expect(onCommit).toHaveBeenCalledOnce();
+    expect(onCommit).toHaveBeenCalledWith("rgb(18, 171, 52)");
+  });
+
+  it("commits a complete pending hex on outside-click", () => {
+    const onCommit = vi.fn();
+    const input = openHexInput(renderColorField({ onCommit }));
+
+    act(() => changeInput(input, "#12AB34"));
+    act(clickOutside);
+
+    expect(onCommit).toHaveBeenCalledOnce();
+    expect(onCommit).toHaveBeenCalledWith("rgb(18, 171, 52)");
+  });
+
+  it("commits a 3-digit hex shorthand on outside-click", () => {
+    // parseCssColor accepts shorthand, so the gesture resolver has to as well;
+    // #F00 is ordinary designer input and used to be dropped in silence.
+    const onCommit = vi.fn();
+    const input = openHexInput(renderColorField({ onCommit }));
+
+    act(() => changeInput(input, "#F00"));
+    act(clickOutside);
+
+    expect(onCommit).toHaveBeenCalledOnce();
+    expect(onCommit).toHaveBeenCalledWith("rgb(255, 0, 0)");
+  });
+
+  it("does not commit an incomplete pending hex on outside-click", () => {
+    const onCommit = vi.fn();
+    const host = renderColorField({ value: "#224466", onCommit });
+    const input = openHexInput(host);
+
+    act(() => changeInput(input, "#12AB3"));
+    act(clickOutside);
+
+    expect(onCommit).not.toHaveBeenCalled();
+    // The settle also has to put the field back, or the panel re-opens showing
+    // a value the composition never took.
+    expect(openHexInput(host).value).toBe("#224466");
+  });
+
+  it("cancels a pending hex edit on Escape and restores the previous value", () => {
+    const onPreview = vi.fn();
+    const onCommit = vi.fn();
+    const host = renderColorField({ value: "#224466", onPreview, onCommit });
+    const input = openHexInput(host);
+
+    act(() => changeInput(input, "#12AB34"));
+    act(() => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" })));
+
+    expect(onCommit).not.toHaveBeenCalled();
+    expect(onPreview).toHaveBeenLastCalledWith("rgb(34, 68, 102)");
+    expect(openHexInput(host).value).toBe("#224466");
+  });
+
+  it("still commits a complete hex on Tab-blur", () => {
+    const onCommit = vi.fn();
+    const input = openHexInput(renderColorField({ onCommit }));
+    input.focus();
+
+    act(() => changeInput(input, "#12AB34"));
+    act(() => input.blur());
+
+    expect(onCommit).toHaveBeenCalledOnce();
+    expect(onCommit).toHaveBeenCalledWith("rgb(18, 171, 52)");
+  });
+
+  it("live-previews only a hex length that parses, 3 or 6 digits", () => {
+    const onPreview = vi.fn();
+    const input = openHexInput(renderColorField({ value: "#112233", onPreview }));
+
+    // 4 and 5 digits are mid-typing, so they must stay silent.
+    act(() => changeInput(input, "#3333"));
+    act(() => changeInput(input, "#33333"));
+    expect(onPreview).not.toHaveBeenCalled();
+
+    act(() => changeInput(input, "#333333"));
+    expect(onPreview).toHaveBeenCalledOnce();
+    expect(onPreview).toHaveBeenCalledWith("rgb(51, 51, 51)");
+
+    act(() => changeInput(input, "#333"));
+    expect(onPreview).toHaveBeenCalledTimes(2);
+    expect(onPreview).toHaveBeenLastCalledWith("rgb(51, 51, 51)");
+  });
+
+  it("tracks exactly once per completed edit, not once per keystroke", () => {
+    const input = openHexInput(renderColorField());
+
+    for (const value of ["#", "#1", "#12", "#12A", "#12AB", "#12AB3", "#12AB34"]) {
+      act(() => changeInput(input, value));
+    }
+    act(clickOutside);
+
+    expect(trackStudioEvent).toHaveBeenCalledOnce();
+  });
+});

package/src/components/editor/propertyPanelColor.tsx

@@ -184,11 +184,27 @@ export function ColorField({
   const brightnessPercent = Math.round(hsv.value * 100);
   const alphaPercent = Math.round(draftColor.alpha * 100);
 
-  const updateColorDraft = useCallback((nextValue: string) => {
+  const updateColorDraft = useCallback((nextValue: string, source: "hex" | "picker") => {
     const nextColor = parseCssColor(nextValue);
     if (!nextColor) return;
     setDraftColor(nextColor);
-    setHexDraft(toHexColor(nextColor).toUpperCase());
+    if (source === "picker") setHexDraft(toHexColor(nextColor).toUpperCase());
+  }, []);
+  const resolveColorGestureValue = useCallback((nextValue: string) => {
+    const source = nextValue.startsWith("#") ? "hex" : "picker";
+    // Only a COMPLETE hex resolves, so a half-typed one neither previews nor
+    // commits. Both lengths parseCssColor accepts count as complete: gating on
+    // 6 alone silently dropped #F00 and friends, which the old onBlur committed.
+    if (source === "hex" && !/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(nextValue)) return null;
+    const nextColor = parseCssColor(nextValue);
+    if (!nextColor) return null;
+    return {
+      source,
+      value: formatCssColor({
+        ...nextColor,
+        alpha: source === "hex" ? draftColorRef.current.alpha : nextColor.alpha,
+      }),
+    } as const;
   }, []);
   const persistColorValue = useCallback(
     (nextValue: string) => {
@@ -203,12 +219,17 @@ export function ColorField({
     settle: settleColorGesture,
     cancel: cancelColorGesture,
   } = useInspectorGestureTransaction({
-    sourceValue: value,
+    sourceValue: formatCssColor(colorFromCss(value)),
     onPreview: (nextValue) => {
-      updateColorDraft(nextValue);
-      onPreview?.(nextValue);
+      const resolved = resolveColorGestureValue(nextValue);
+      if (!resolved) return;
+      updateColorDraft(resolved.value, resolved.source);
+      onPreview?.(resolved.value);
+    },
+    onCommit: (nextValue) => {
+      const resolved = resolveColorGestureValue(nextValue);
+      if (resolved) persistColorValue(resolved.value);
     },
-    onCommit: persistColorValue,
   });
 
   useEffect(() => {
@@ -288,13 +309,11 @@ export function ColorField({
     commitHsv({ saturation, value: nextValue });
   };
 
-  const handleHexCommit = (nextHex: string) => {
+  const handleHexChange = (nextHex: string) => {
     setHexDraft(nextHex);
     const normalized = nextHex.trim().startsWith("#") ? nextHex.trim() : `#${nextHex.trim()}`;
-    const parsed = parseCssColor(normalized);
-    if (!parsed) return;
-    const nextValue = formatCssColor({ ...parsed, alpha: draftColorRef.current.alpha });
-    updateColorDraft(nextValue);
+    beginColorGesture();
+    previewColorGesture(normalized);
   };
 
   const picker = open
@@ -413,21 +432,8 @@ export function ColorField({
               <span className={LABEL}>Hex</span>
               <input
                 value={hexDraft}
-                onChange={(event) => handleHexCommit(event.target.value)}
-                onBlur={() => {
-                  const normalized = hexDraft.trim().startsWith("#")
-                    ? hexDraft.trim()
-                    : `#${hexDraft.trim()}`;
-                  const parsed = parseCssColor(normalized);
-                  if (parsed) {
-                    const nextValue = formatCssColor({
-                      ...parsed,
-                      alpha: draftColorRef.current.alpha,
-                    });
-                    persistColorValue(nextValue);
-                  }
-                  setHexDraft(toHexColor(draftColorRef.current).toUpperCase());
-                }}
+                onChange={(event) => handleHexChange(event.target.value)}
+                onBlur={settleColorGesture}
                 className={`${FIELD} h-10 w-full text-[11px] font-medium outline-none`}
                 spellCheck={false}
               />

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