@hyperframes/studio 0.7.79 → 0.7.80

package/src/components/editor/EaseCurveSection.tsx

@@ -10,6 +10,7 @@ import { holdCurvePath, MiniCurveSvg, sampledPath } from "./easeCurveSvg";
 import { EaseBezierField, SpringBounceField, WiggleField } from "./EaseParamFields";
 import { EASE_CURVES, EASE_LABELS, resolveEaseCurveTuple } from "./gsapAnimationConstants";
 import { roundToCenti } from "../../utils/rounding";
+import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 export { MiniCurveSvg } from "./easeCurveSvg";
 
@@ -320,19 +321,36 @@ function EaseParameterField({
   return <EaseBezierField tuple={tuple} onCommit={onCommit} />;
 }
 
+/**
+ * How long an optimistically painted ease may outlive its commit. Long enough
+ * for a normal write-reparse-rerender round trip, short enough that a dropped
+ * write self-corrects while the author is still looking at the panel.
+ */
+const PENDING_EASE_TIMEOUT_MS = 2000;
+
 export function EaseCurveSection({
   ease,
   onCustomEaseCommit,
+  collidingAnimationTargets,
 }: {
   ease: string;
   onCustomEaseCommit: (ease: string) => void;
+  collidingAnimationTargets?: AnimationKeyframeTarget[];
 }) {
-  const springBounce = parseSpringBounce(ease);
+  // The ease this section painted optimistically, still waiting for its commit
+  // to round-trip back through the `ease` prop.
+  const [pendingEase, setPendingEase] = useState<string | null>(null);
+  // Every value committed and not yet seen coming back, oldest first. It takes
+  // the whole queue, not just the latest, to tell an older commit echoing back
+  // apart from an edit made somewhere else.
+  const inFlightEasesRef = useRef<string[]>([]);
+  const displayedEase = pendingEase ?? ease;
+  const springBounce = parseSpringBounce(displayedEase);
   const isSpring = springBounce !== null;
-  const wiggleConfig = parseWiggleEase(ease);
+  const wiggleConfig = parseWiggleEase(displayedEase);
   const isWiggle = wiggleConfig !== null;
   const mode: EaseMode = isSpring ? "spring" : isWiggle ? "wiggle" : "curve";
-  const curve = resolveEditableCurve(ease, springBounce);
+  const curve = resolveEditableCurve(displayedEase, springBounce);
 
   const [draft, setDraft] = useState<Pts | null>(null);
   const [hover, setHover] = useState<"p1" | "p2" | null>(null);
@@ -346,8 +364,43 @@ export function EaseCurveSection({
   // `ease` changes, `curve` already equals the draft, so the handoff is seamless.
   useEffect(() => {
     setDraft(null);
+    const inFlight = inFlightEasesRef.current;
+    const landed = inFlight.indexOf(ease);
+    if (landed < 0) {
+      // A value this section never sent: someone else edited the ease, so the
+      // real value wins over anything optimistic still on screen.
+      inFlight.length = 0;
+      setPendingEase(null);
+      return;
+    }
+    // One of this section's own commits came back. Everything sent before it
+    // is settled with it, but a NEWER commit may still be in flight, and
+    // repainting this older value while waiting for that one is the
+    // wiggle-then-spring-then-wiggle flicker of a fast double switch.
+    inFlight.splice(0, landed + 1);
+    if (inFlight.length === 0) setPendingEase(null);
   }, [ease]);
 
+  // A commit is fire-and-forget, so a write that is rejected or lands as a
+  // no-op never changes `ease`, and the optimistic value would sit on screen
+  // claiming a curve the composition does not have. Nothing downstream reports
+  // that failure, so the display is time-bounded instead: fall back to the
+  // committed truth when the round trip does not arrive.
+  useEffect(() => {
+    if (pendingEase === null) return;
+    const timer = setTimeout(() => {
+      inFlightEasesRef.current.length = 0;
+      setPendingEase(null);
+    }, PENDING_EASE_TIMEOUT_MS);
+    return () => clearTimeout(timer);
+  }, [pendingEase]);
+
+  const commitEase = (nextEase: string) => {
+    inFlightEasesRef.current.push(nextEase);
+    setPendingEase(nextEase);
+    onCustomEaseCommit(nextEase);
+  };
+
   const activeTuple = draft ?? curve;
   const displayTuple = activeTuple ?? DEFAULT_CURVE;
   const [x1, y1, x2, y2] = displayTuple;
@@ -358,8 +411,12 @@ export function EaseCurveSection({
   const a1 = { x: xToSvg(1), y: yToSvg(1) };
   const p1 = { x: xToSvg(x1), y: yToSvg(clampView(y1)) };
   const p2 = { x: xToSvg(x2), y: yToSvg(clampView(y2)) };
-  const curvePath = curvePathFor(ease, springBounce, wiggleConfig, displayTuple);
-  const showGraph = activeTuple !== null || isWiggle || ease === "hold";
+  // Read the OPTIMISTIC ease everywhere the graph is derived, so a mode switch
+  // paints immediately instead of waiting for the committed prop to come back.
+  const curvePath = curvePathFor(displayedEase, springBounce, wiggleConfig, displayTuple);
+  const showGraph = activeTuple !== null || isWiggle || displayedEase === "hold";
+  // `curve !== null` is what keeps Hold handle-free: it draws a graph (a flat
+  // step) but has no editable control points to drag.
   const showHandles = curve !== null && !isSpring && !isWiggle;
 
   const handlePointerDown = (handle: "p1" | "p2", e: React.PointerEvent) => {
@@ -394,10 +451,9 @@ export function EaseCurveSection({
     if (!draggingRef.current || !draft) return;
     draggingRef.current = null;
     const path = `M0,0 C${draft[0]},${draft[1]} ${draft[2]},${draft[3]} 1,1`;
-    // Clear after the synchronous parent commit settles. This also clears a
-    // same-string commit, where the `ease` dependency effect would not run.
-    onCustomEaseCommit(`custom(${path})`);
-    queueMicrotask(() => setDraft(null));
+    // Commit only — the draft stays on screen and is cleared by the effect above
+    // once the committed `ease` prop comes back, so the curve never flickers.
+    commitEase(`custom(${path})`);
   };
 
   const handleKeyDown = (handle: "p1" | "p2", event: React.KeyboardEvent<SVGCircleElement>) => {
@@ -406,20 +462,26 @@ export function EaseCurveSection({
     event.preventDefault();
     event.stopPropagation();
     setDraft(next);
-    onCustomEaseCommit(`custom(M0,0 C${next[0]},${next[1]} ${next[2]},${next[3]} 1,1)`);
-    queueMicrotask(() => setDraft(null));
+    // Same no-flicker contract as the pointer path: commit and let the effect
+    // clear the draft, rather than dropping it on the next microtask.
+    commitEase(`custom(M0,0 C${next[0]},${next[1]} ${next[2]},${next[3]} 1,1)`);
   };
 
   const top = yToSvg(1);
   const bottom = yToSvg(0);
   const left = xToSvg(0);
   const right = xToSvg(1);
-  const label = resolveEditorLabel(ease, springBounce, isWiggle);
+  const label = resolveEditorLabel(displayedEase, springBounce, isWiggle);
 
   return (
     <div className="rounded-lg bg-neutral-900/50 p-2">
-      <EaseTypeDropdown kind={mode} ease={ease} label={label} onSelect={onCustomEaseCommit} />
-      <EaseModeToggle mode={mode} onCommit={onCustomEaseCommit} />
+      <EaseTypeDropdown kind={mode} ease={displayedEase} label={label} onSelect={commitEase} />
+      {collidingAnimationTargets && collidingAnimationTargets.length > 1 && (
+        <p className="mb-1 text-[9px] text-neutral-500">
+          Applies to {collidingAnimationTargets.length} animations
+        </p>
+      )}
+      <EaseModeToggle mode={mode} onCommit={commitEase} />
       <span className="sr-only" aria-live="polite">
         {MODE_LABELS[mode]} ease editor selected
       </span>
@@ -560,7 +622,7 @@ export function EaseCurveSection({
             springBounce={springBounce}
             wiggleConfig={wiggleConfig}
             tuple={displayTuple}
-            onCommit={onCustomEaseCommit}
+            onCommit={commitEase}
           />
         </>
       ) : (

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

@@ -0,0 +1,102 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { DesignPanelInputProvider } from "../../contexts/DesignPanelInputContext";
+import { usePlayerStore } from "../../player";
+import { GsapAnimationSection } from "./GsapAnimationSection";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+vi.mock("./AnimationCard", () => ({
+  AnimationCard: ({
+    animation,
+    focusedSegment,
+    onFocusSegmentConsumed,
+  }: {
+    animation: GsapAnimation;
+    focusedSegment: { tweenPercentage: number } | null;
+    onFocusSegmentConsumed: () => void;
+  }) => (
+    <button
+      type="button"
+      data-testid={`animation-${animation.id}`}
+      data-focused={focusedSegment ? String(focusedSegment.tweenPercentage) : ""}
+      // Mirrors the real card: the consume callback only fires from the effect
+      // that runs when this card actually received a focusedSegment.
+      onClick={() => focusedSegment && onFocusSegmentConsumed()}
+    />
+  ),
+}));
+
+vi.mock("./GsapAddAnimationControl", () => ({ GsapAddAnimationControl: () => null }));
+
+afterEach(() => {
+  document.body.innerHTML = "";
+  usePlayerStore.getState().reset();
+});
+
+const sharedAnimation: GsapAnimation = {
+  id: "shared-animation",
+  targetSelector: ".shared",
+  method: "to",
+  position: 0,
+  properties: { x: 100 },
+};
+
+const requiredCallbacks = {
+  onAddAnimation: vi.fn(),
+  onUpdateProperty: vi.fn(),
+  onUpdateMeta: vi.fn(),
+  onDeleteAnimation: vi.fn(),
+  onAddProperty: vi.fn(),
+  onRemoveProperty: vi.fn(),
+};
+
+function renderSection(elementId: string) {
+  const host = document.createElement("div");
+  document.body.append(host);
+  const root = createRoot(host);
+  const render = (nextElementId: string) => {
+    act(() => {
+      root.render(
+        <DesignPanelInputProvider section="test">
+          <GsapAnimationSection
+            {...requiredCallbacks}
+            elementId={nextElementId}
+            animations={[sharedAnimation]}
+          />
+        </DesignPanelInputProvider>,
+      );
+    });
+  };
+  render(elementId);
+  return { host, root, render };
+}
+
+describe("GsapAnimationSection", () => {
+  it("consumes a shared animation id only for the focused element", () => {
+    usePlayerStore.getState().setFocusedEaseSegment({
+      elementId: "index.html#second",
+      animationId: sharedAnimation.id,
+      tweenPercentage: 50,
+    });
+    const view = renderSection("index.html#first");
+    const card = view.host.querySelector<HTMLButtonElement>(
+      "[data-testid='animation-shared-animation']",
+    );
+    if (!card) throw new Error("expected animation card");
+
+    expect(card.dataset.focused).toBe("");
+    act(() => card.click());
+    expect(usePlayerStore.getState().focusedEaseSegment?.elementId).toBe("index.html#second");
+
+    view.render("index.html#second");
+    expect(card.dataset.focused).toBe("50");
+    act(() => card.click());
+    expect(usePlayerStore.getState().focusedEaseSegment).toBeNull();
+    act(() => view.root.unmount());
+  });
+});

package/src/components/editor/GsapAnimationSection.tsx

@@ -13,6 +13,7 @@ import { usePlayerStore } from "../../player";
 import { GsapAddAnimationControl } from "./GsapAddAnimationControl";
 
 interface GsapAnimationSectionProps extends GsapAnimationEditCallbacks {
+  elementId: string;
   animations: GsapAnimation[];
   multipleTimelines?: boolean;
   unsupportedTimelinePattern?: boolean;
@@ -21,6 +22,7 @@ interface GsapAnimationSectionProps extends GsapAnimationEditCallbacks {
 
 export const GsapAnimationSection = memo(function GsapAnimationSection({
   animations,
+  elementId,
   multipleTimelines,
   unsupportedTimelinePattern,
   onAddAnimation,
@@ -55,7 +57,10 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
               animation={anim}
               defaultExpanded={index === 0}
               focusedSegment={
-                focusedEaseSegment?.animationId === anim.id ? focusedEaseSegment : null
+                focusedEaseSegment?.elementId === elementId &&
+                focusedEaseSegment.animationId === anim.id
+                  ? focusedEaseSegment
+                  : null
               }
               onFocusSegmentConsumed={clearFocusedEaseSegment}
             />

package/src/components/editor/KeyframeEaseList.tsx

@@ -1,6 +1,7 @@
 import type { GsapPercentageKeyframe } from "@hyperframes/core/gsap-parser";
 import { EASE_LABELS } from "./gsapAnimationConstants";
 import { EaseCurveSection } from "./EaseCurveSection";
+import type { AnimationKeyframeTarget } from "../../hooks/gsapTweenSynth";
 
 // The full GSAP easing vocabulary offered by the "Set all…" bulk control —
 // every standard family in in/out/inOut, so authors aren't limited to a curated
@@ -44,6 +45,7 @@ export function KeyframeEaseList({
   keyframes,
   globalEase,
   expandedPct,
+  collidingAnimationTargets,
   onToggle,
   onEaseCommit,
   onApplyAll,
@@ -51,6 +53,7 @@ export function KeyframeEaseList({
   keyframes: GsapPercentageKeyframe[];
   globalEase: string;
   expandedPct: number | null;
+  collidingAnimationTargets?: AnimationKeyframeTarget[];
   onToggle: (pct: number | null) => void;
   onEaseCommit: (pct: number, ease: string) => void;
   /** Apply one ease to every segment at once (clears per-segment overrides). */
@@ -119,6 +122,7 @@ export function KeyframeEaseList({
               <div className="px-2 pb-2">
                 <EaseCurveSection
                   ease={segEase}
+                  collidingAnimationTargets={collidingAnimationTargets}
                   onCustomEaseCommit={(ease) => onEaseCommit(kf.percentage, ease)}
                 />
               </div>

package/src/components/editor/MotionPathOverlay.tsx

@@ -1,3 +1,4 @@
+import { scopedElementKey } from "../../hooks/gsapKeyframeCacheHelpers";
 import { memo, useEffect, useRef, useState, type RefObject } from "react";
 import type { DomEditSelection } from "./domEditing";
 import { useDomEditContext } from "../../contexts/DomEditContext";
@@ -11,6 +12,7 @@ import {
   KeyframeDiamondContextMenu,
   type KeyframeDiamondContextMenuState,
 } from "../../player/components/KeyframeDiamondContextMenu";
+import type { TimelineKeyframeTarget } from "../../player/components/timelineKeyframeIdentity";
 import {
   commitAddKeyframe,
   commitAddWaypoint,
@@ -95,15 +97,19 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
   const [draft, setDraft] = useState<Draft | null>(null);
   const [ghost, setGhost] = useState<{ x: number; y: number; segIndex: number } | null>(null);
   const [hoverNode, setHoverNode] = useState<number | null>(null);
-  // Right-click context menu on a keyframe node — same delete actions as the
-  // timeline keyframe diamond.
-  const [kfMenu, setKfMenu] = useState<KeyframeDiamondContextMenuState | null>(null);
+  // Right-click context menu on a path node — same delete actions as the
+  // timeline keyframe diamond. The node it was opened on rides along, because
+  // which entries apply depends on whether it is a keyframe or a waypoint.
+  const [kfMenu, setKfMenu] = useState<{
+    state: KeyframeDiamondContextMenuState;
+    ref: MotionNodeRef;
+  } | null>(null);
   // The keyframe % selected by clicking its node — highlighted, and the next drag
   // modifies it rather than adding a keyframe.
   const activeKeyframePct = usePlayerStore((s) => s.activeKeyframePct);
   const timelineElement = usePlayerStore((state) => {
     if (!selection) return undefined;
-    const sourceScopedId = `${selection.sourceFile || "index.html"}#${selection.id}`;
+    const sourceScopedId = scopedElementKey(selection);
     return state.elements.find(
       (element) => (element.key ?? element.id) === sourceScopedId || element.id === selection.id,
     );
@@ -435,21 +441,47 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
   };
 
   const elementId = selection?.id ?? null;
-  // Right-click a keyframe node → the timeline's keyframe context menu (delete
-  // this keyframe / delete all), so motion-path keyframes are removable in place.
+  // Right-click any path node → the timeline's keyframe context menu (delete this
+  // one / delete all), so path nodes are removable in place. Waypoints open it
+  // too: returning early for them let the browser's own context menu open over
+  // the editor overlay, which is never what a right-click on a node should do.
   const onNodeContextMenu = (e: React.MouseEvent, ref: MotionNodeRef) => {
-    if (ref.type !== "keyframe" || !animId || !elementId || !timelineElement) return;
+    if (!animId || !elementId || !timelineElement) return;
     e.preventDefault();
     e.stopPropagation();
     setKfMenu({
-      x: e.clientX,
-      y: e.clientY,
-      element: timelineElement,
-      elementId,
-      percentage: ref.pct,
-      tweenPercentage: ref.pct,
+      ref,
+      state: {
+        x: e.clientX,
+        y: e.clientY,
+        element: timelineElement,
+        elementId,
+        // A waypoint carries no percentage of its own: one tween-level ease owns
+        // every segment, and its index is the identity the delete acts on. The
+        // menu never reads this for a waypoint, because the only entry that
+        // would (Move to Playhead) is hidden below.
+        percentage: ref.type === "keyframe" ? ref.pct : 0,
+        tweenPercentage: ref.type === "keyframe" ? ref.pct : 0,
+      },
     });
   };
+  const menuRef = kfMenu?.ref;
+  // Deleting one node: by tween-% for a keyframe, by path index for a waypoint.
+  // A waypoint delete is offered on the same condition as the hover x badge,
+  // because removeMotionPathPointInScript refuses to drop an arc below two
+  // anchors and the entry would silently do nothing.
+  const onMenuDelete =
+    menuRef === undefined || !animId
+      ? undefined
+      : menuRef.type === "keyframe"
+        ? (_elId: string, keyframe: TimelineKeyframeTarget) => {
+            handleGsapRemoveKeyframe(animId, keyframe.percentage);
+          }
+        : removable
+          ? () => {
+              void commitRemoveWaypoint(animId, menuRef.index, commitMutation);
+            }
+          : undefined;
 
   return (
     <>
@@ -531,14 +563,17 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
       </svg>
       {kfMenu && (
         <KeyframeDiamondContextMenu
-          state={kfMenu}
+          state={kfMenu.state}
           onClose={() => setKfMenu(null)}
-          onDelete={(_elId, keyframe) =>
-            animId && handleGsapRemoveKeyframe(animId, keyframe.percentage)
-          }
+          onDelete={onMenuDelete}
           onDeleteAll={() => animId && handleGsapRemoveAllKeyframes(animId)}
-          onMoveToPlayhead={(_element, keyframe) =>
-            animId && handleGsapMoveKeyframeToPlayhead(animId, keyframe.percentage)
+          // Retiming needs a percentage of this node's own, which a waypoint
+          // does not have.
+          onMoveToPlayhead={
+            kfMenu.ref.type === "keyframe"
+              ? (_element, keyframe) =>
+                  animId && handleGsapMoveKeyframeToPlayhead(animId, keyframe.percentage)
+              : undefined
           }
         />
       )}

package/src/components/editor/PropertyPanel.tsx

@@ -1,3 +1,4 @@
+import { scopedElementKey } from "../../hooks/gsapKeyframeCacheHelpers";
 import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { Move } from "../../icons/SystemIcons";
 import { InspectorHeaderActions } from "./InspectorHeaderActions";
@@ -101,6 +102,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
     onUpdateArcSegment,
     onUnroll,
     onUpdateKeyframeEase,
+    onUpdateSegmentEase,
     onSetAllKeyframeEases,
     onAddKeyframe,
     onRemoveKeyframe,
@@ -556,6 +558,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
           onAddGsapProperty &&
           onAddGsapAnimation && (
             <GsapAnimationSection
+              elementId={scopedElementKey(element)}
               animations={gsapAnimations}
               multipleTimelines={gsapMultipleTimelines}
               unsupportedTimelinePattern={gsapUnsupportedTimelinePattern}
@@ -573,6 +576,7 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
               onUnroll={onUnroll}
               onUpdateKeyframeEase={onUpdateKeyframeEase}
               onSetAllKeyframeEases={onSetAllKeyframeEases}
+              onUpdateSegmentEase={onUpdateSegmentEase}
             />
           )}
 

package/src/components/editor/PropertyPanelFlat.tsx

@@ -1,10 +1,9 @@
+import { scopedElementKey } from "../../hooks/gsapKeyframeCacheHelpers";
 import { type ReactNode, useEffect, useRef, useState } from "react";
-import { resolveEditingSections } from "@hyperframes/core/editing";
 import { DesignPanelInputProvider } from "../../contexts/DesignPanelInputContext";
 import { slugifyDesignInput } from "../../utils/designInputTracking";
-import type { DomEditSelection } from "./domEditing";
 import { isTextEditableSelection } from "./domEditing";
-import type { PropertyPanelProps } from "./propertyPanelHelpers";
+import type { PropertyPanelFlatProps } from "./propertyPanelFlatProps";
 import { formatPxMetricValue } from "./propertyPanelHelpers";
 import { PropertyPanelFlatHeader } from "./PropertyPanelFlatHeader";
 import { PropertyPanelFlatFooter } from "./PropertyPanelFlatFooter";
@@ -34,8 +33,6 @@ import {
   FlatOverlaysSection,
 } from "./propertyPanelFlatOverlaysSection";
 
-type EditingSections = ReturnType<typeof resolveEditingSections>;
-
 type FlatGroupDescriptor = {
   id: string;
   title: string;
@@ -135,92 +132,9 @@ export function PropertyPanelFlat({
   onUpdateArcSegment,
   onUnroll,
   onUpdateKeyframeEase,
+  onUpdateSegmentEase,
   onSetAllKeyframeEases,
-}: 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"
-  | "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: EditingSections;
-    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;
-  }) {
+}: PropertyPanelFlatProps) {
   // PropertyPanel keys this component by selection, so the default is per element.
   const [openGroupId, setOpenGroupId] = useState<string>(() =>
     isTextEditableSelection(element)
@@ -253,7 +167,7 @@ export function PropertyPanelFlat({
   // flips synchronously while the panel still renders its predecessor, so a
   // stale panel would consume a request meant for its successor whenever the
   // two share a class-selector animation id.
-  const renderedElementId = `${element.sourceFile}#${element.id}`;
+  const renderedElementId = scopedElementKey(element);
   // Adjusted during render (not an effect) so the card mounts on the same
   // commit the request lands on. Keyed on request identity: a group the user
   // closes afterwards stays closed.
@@ -330,6 +244,7 @@ export function PropertyPanelFlat({
           onUpdateArcSegment,
           onUnroll,
           onUpdateKeyframeEase,
+          onUpdateSegmentEase,
           onSetAllKeyframeEases,
         }
       : null;

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");