@hyperframes/studio 0.7.75 → 0.7.77

package/src/components/editor/GsapAddAnimationControl.tsx

@@ -0,0 +1,68 @@
+import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants";
+
+const STYLES = {
+  classic: {
+    method:
+      "rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white",
+    cancel: "px-1.5 text-[11px] text-neutral-500 hover:text-neutral-300",
+    trigger: "text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200",
+  },
+  flat: {
+    method:
+      "rounded-lg border border-panel-border-input bg-panel-input px-2.5 py-1.5 text-[11px] font-medium text-panel-text-2 transition-colors hover:border-panel-text-4 hover:text-panel-text-0",
+    cancel: "px-1.5 text-[11px] text-panel-text-3 hover:text-panel-text-1",
+    trigger: "text-[11px] font-medium text-panel-text-3 transition-colors hover:text-panel-text-1",
+  },
+};
+
+export function GsapAddAnimationControl({
+  open,
+  setOpen,
+  onAddAnimation,
+  track,
+  variant,
+}: {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  onAddAnimation: (method: "to" | "from" | "set" | "fromTo") => void;
+  track: (control: string, name: string) => void;
+  variant: keyof typeof STYLES;
+}) {
+  const styles = STYLES[variant];
+
+  return (
+    <div className="relative pt-1">
+      {open ? (
+        <div className="flex gap-1.5">
+          {ADD_METHODS.map((method) => (
+            <button
+              key={method}
+              type="button"
+              title={METHOD_TOOLTIPS[method]}
+              onClick={() => {
+                track("button", `Add ${method} animation`);
+                onAddAnimation(method);
+                setOpen(false);
+              }}
+              className={styles.method}
+            >
+              {ADD_METHOD_LABELS[method] ?? method}
+            </button>
+          ))}
+          <button type="button" onClick={() => setOpen(false)} className={styles.cancel}>
+            Cancel
+          </button>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={() => setOpen(true)}
+          className={styles.trigger}
+          title="Add a new animation effect to this element"
+        >
+          + Add effect
+        </button>
+      )}
+    </div>
+  );
+}

package/src/components/editor/GsapAnimationSection.tsx

@@ -2,13 +2,15 @@ import { memo, useState } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import { Film } from "../../icons/SystemIcons";
 import { Section } from "./propertyPanelPrimitives";
-import { ADD_METHODS, ADD_METHOD_LABELS, METHOD_TOOLTIPS } from "./gsapAnimationConstants";
 import { AnimationCard } from "./AnimationCard";
 import {
-  trackAnimationMetaUpdate,
   type GsapAnimationEditCallbacks,
+  withTrackedGsapAnimationCallbacks,
+  clearFocusedEaseSegment,
 } from "./gsapAnimationCallbacks";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+import { usePlayerStore } from "../../player";
+import { GsapAddAnimationControl } from "./GsapAddAnimationControl";
 
 interface GsapAnimationSectionProps extends GsapAnimationEditCallbacks {
   animations: GsapAnimation[];
@@ -21,41 +23,13 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
   animations,
   multipleTimelines,
   unsupportedTimelinePattern,
-  onUpdateProperty,
-  onUpdateMeta,
-  onDeleteAnimation,
-  onAddProperty,
-  onRemoveProperty,
-  onUpdateFromProperty,
-  onAddFromProperty,
-  onRemoveFromProperty,
   onAddAnimation,
-  onLivePreview,
-  onLivePreviewEnd,
-  onSetArcPath,
-  onUpdateArcSegment,
-  onUpdateKeyframeEase,
-  onSetAllKeyframeEases,
-  onUnroll,
+  ...callbacks
 }: GsapAnimationSectionProps) {
   const track = useTrackDesignInput();
   const [addMenuOpen, setAddMenuOpen] = useState(false);
-  const trackProperty = (property: string) => {
-    const control =
-      property === "visibility"
-        ? "toggle"
-        : property === "filter" || property === "clipPath"
-          ? "text"
-          : "metric";
-    track(control, property);
-  };
-  const updateMeta = (
-    animationId: string,
-    updates: { duration?: number; ease?: string; position?: number },
-  ) => {
-    trackAnimationMetaUpdate(track, updates);
-    onUpdateMeta(animationId, updates);
-  };
+  const trackedCallbacks = withTrackedGsapAnimationCallbacks(callbacks, track);
+  const focusedEaseSegment = usePlayerStore((s) => s.focusedEaseSegment);
 
   return (
     <Section title="Animation" icon={<Film size={15} />}>
@@ -76,137 +50,24 @@ export const GsapAnimationSection = memo(function GsapAnimationSection({
         <div className="space-y-2">
           {animations.map((anim, index) => (
             <AnimationCard
+              {...trackedCallbacks}
               key={anim.id}
               animation={anim}
               defaultExpanded={index === 0}
-              onUpdateProperty={(animationId, property, value) => {
-                trackProperty(property);
-                onUpdateProperty(animationId, property, value);
-              }}
-              onUpdateMeta={updateMeta}
-              onDeleteAnimation={(animationId) => {
-                track("button", "Remove animation");
-                onDeleteAnimation(animationId);
-              }}
-              onAddProperty={(animationId, property) => {
-                track("select", "Add effect property");
-                onAddProperty(animationId, property);
-              }}
-              onRemoveProperty={(animationId, property) => {
-                track("button", `Remove ${property}`);
-                onRemoveProperty(animationId, property);
-              }}
-              onUpdateFromProperty={
-                onUpdateFromProperty
-                  ? (animationId, property, value) => {
-                      trackProperty(property);
-                      onUpdateFromProperty(animationId, property, value);
-                    }
-                  : undefined
-              }
-              onAddFromProperty={
-                onAddFromProperty
-                  ? (animationId, property) => {
-                      track("select", "Add from property");
-                      onAddFromProperty(animationId, property);
-                    }
-                  : undefined
-              }
-              onRemoveFromProperty={
-                onRemoveFromProperty
-                  ? (animationId, property) => {
-                      track("button", `Remove from ${property}`);
-                      onRemoveFromProperty(animationId, property);
-                    }
-                  : undefined
-              }
-              onLivePreview={onLivePreview}
-              onLivePreviewEnd={onLivePreviewEnd}
-              onSetArcPath={
-                onSetArcPath
-                  ? (animationId, config) => {
-                      track(
-                        "toggle",
-                        config.autoRotate !== undefined ? "Auto rotate" : "Arc motion",
-                      );
-                      onSetArcPath(animationId, config);
-                    }
-                  : undefined
-              }
-              onUpdateArcSegment={
-                onUpdateArcSegment
-                  ? (animationId, segmentIndex, update) => {
-                      if (update.curviness === undefined) {
-                        track("button", `Reset arc segment ${segmentIndex + 1}`);
-                      }
-                      onUpdateArcSegment(animationId, segmentIndex, update);
-                    }
-                  : undefined
-              }
-              onUpdateKeyframeEase={
-                onUpdateKeyframeEase
-                  ? (animationId, percentage, ease) => {
-                      track("select", "Keyframe ease");
-                      onUpdateKeyframeEase(animationId, percentage, ease);
-                    }
-                  : undefined
-              }
-              onSetAllKeyframeEases={
-                onSetAllKeyframeEases
-                  ? (animationId, ease) => {
-                      track("select", "All keyframe eases");
-                      onSetAllKeyframeEases(animationId, ease);
-                    }
-                  : undefined
-              }
-              onUnroll={
-                onUnroll
-                  ? (animationId) => {
-                      track("button", "Unroll animation");
-                      onUnroll(animationId);
-                    }
-                  : undefined
+              focusedSegment={
+                focusedEaseSegment?.animationId === anim.id ? focusedEaseSegment : null
               }
+              onFocusSegmentConsumed={clearFocusedEaseSegment}
             />
           ))}
 
-          <div className="relative pt-1">
-            {addMenuOpen ? (
-              <div className="flex gap-1.5">
-                {ADD_METHODS.map((method) => (
-                  <button
-                    key={method}
-                    type="button"
-                    title={METHOD_TOOLTIPS[method]}
-                    onClick={() => {
-                      track("button", `Add ${method} animation`);
-                      onAddAnimation(method);
-                      setAddMenuOpen(false);
-                    }}
-                    className="rounded-lg border border-neutral-700 bg-neutral-900 px-2.5 py-1.5 text-[11px] font-medium text-neutral-300 transition-colors hover:border-neutral-600 hover:text-white"
-                  >
-                    {ADD_METHOD_LABELS[method] ?? method}
-                  </button>
-                ))}
-                <button
-                  type="button"
-                  onClick={() => setAddMenuOpen(false)}
-                  className="px-1.5 text-[11px] text-neutral-500 hover:text-neutral-300"
-                >
-                  Cancel
-                </button>
-              </div>
-            ) : (
-              <button
-                type="button"
-                onClick={() => setAddMenuOpen(true)}
-                className="text-[11px] font-medium text-neutral-400 transition-colors hover:text-neutral-200"
-                title="Add a new animation effect to this element"
-              >
-                + Add effect
-              </button>
-            )}
-          </div>
+          <GsapAddAnimationControl
+            open={addMenuOpen}
+            setOpen={setAddMenuOpen}
+            onAddAnimation={onAddAnimation}
+            track={track}
+            variant="classic"
+          />
         </div>
       )}
     </Section>

package/src/components/editor/KeyframeEaseList.tsx

@@ -93,7 +93,11 @@ export function KeyframeEaseList({
           ? "Custom"
           : (EASE_LABELS[segEase] ?? segEase);
         return (
-          <div key={`${i}-${kf.percentage}`} className="rounded-md bg-neutral-900/50">
+          <div
+            key={`${i}-${kf.percentage}`}
+            data-ease-segment-pct={kf.percentage}
+            className="rounded-md bg-neutral-900/50"
+          >
             <button
               type="button"
               onClick={() => onToggle(isExpanded ? null : kf.percentage)}

package/src/components/editor/KeyframeNavigation.tsx

@@ -11,17 +11,50 @@ interface KeyframeNavigationProps {
     tweenPercentage?: number;
     properties: Record<string, number | string>;
     ease?: string;
+    /** The tween that authored this keyframe, when the cache knows it. */
+    animationId?: string;
   }> | null;
   /** Current playhead percentage within the element's lifetime (0-100) */
   currentPercentage: number;
   onSeek: (percentage: number) => void;
   onAddKeyframe: (percentage: number) => void;
-  onRemoveKeyframe: (percentage: number) => void;
+  /** `animationId` is the clicked keyframe's OWN tween; see handleDiamondClick. */
+  onRemoveKeyframe: (percentage: number, animationId?: string) => void;
   onConvertToKeyframes: () => void;
 }
 
 const TOLERANCE = 0.5;
 
+interface NavigableKeyframe {
+  percentage: number;
+  tweenPercentage?: number;
+  properties: Record<string, number | string>;
+}
+
+export function getKeyframeNavigationState<Keyframe extends NavigableKeyframe>(
+  keyframes: readonly Keyframe[],
+  currentPercentage: number,
+  property?: string,
+) {
+  const propertyKeyframes = property
+    ? keyframes.filter((keyframe) => property in keyframe.properties)
+    : keyframes;
+  return {
+    propertyKeyframes,
+    prevKeyframe:
+      propertyKeyframes
+        .filter((keyframe) => keyframe.percentage < currentPercentage - TOLERANCE)
+        .at(-1) ?? null,
+    nextKeyframe:
+      propertyKeyframes.find((keyframe) => keyframe.percentage > currentPercentage + TOLERANCE) ??
+      null,
+    currentKeyframe:
+      propertyKeyframes.find(
+        (keyframe) => Math.abs(keyframe.percentage - currentPercentage) <= TOLERANCE,
+      ) ?? null,
+  };
+}
+
 /**
  * Convert a clip-relative percentage (element lifetime, used for display/seek) to
  * the TWEEN-relative percentage the GSAP writer/runtime key on. The clip→tween
@@ -92,18 +125,12 @@ export const KeyframeNavigation = memo(function KeyframeNavigation({
   onRemoveKeyframe,
   onConvertToKeyframes,
 }: KeyframeNavigationProps) {
-  // Find keyframes that contain this property
-  const propertyKeyframes = keyframes?.filter((kf) => property in kf.properties) ?? [];
-
-  const prevKf =
-    propertyKeyframes.filter((kf) => kf.percentage < currentPercentage - TOLERANCE).at(-1) ?? null;
-
-  const nextKf =
-    propertyKeyframes.find((kf) => kf.percentage > currentPercentage + TOLERANCE) ?? null;
-
-  const atCurrent =
-    propertyKeyframes.find((kf) => Math.abs(kf.percentage - currentPercentage) <= TOLERANCE) ??
-    null;
+  const {
+    propertyKeyframes,
+    prevKeyframe: prevKf,
+    nextKeyframe: nextKf,
+    currentKeyframe: atCurrent,
+  } = getKeyframeNavigationState(keyframes ?? [], currentPercentage, property);
 
   // Diamond state
   let diamondState: DiamondState;
@@ -128,7 +155,12 @@ export const KeyframeNavigation = memo(function KeyframeNavigation({
     if (diamondState === "ghost") {
       onConvertToKeyframes();
     } else if (diamondState === "active" && atCurrent) {
-      onRemoveKeyframe(atCurrent.tweenPercentage ?? atCurrent.percentage);
+      // Report the keyframe's OWN tween. A merged gutter row shows the keyframes
+      // of every tween in the property group, so the caller's "the group's
+      // animation" guess names the wrong tween whenever the clicked keyframe
+      // belongs to a sibling — and the writer then finds no keyframe at that
+      // percentage and silently does nothing.
+      onRemoveKeyframe(atCurrent.tweenPercentage ?? atCurrent.percentage, atCurrent.animationId);
     } else {
       onAddKeyframe(clipToTweenPercentage(propertyKeyframes, currentPercentage));
     }

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

@@ -0,0 +1,59 @@
+// @vitest-environment happy-dom
+
+import { act } from "react";
+import { beforeAll, describe, expect, it, vi } from "vitest";
+import { installReactActEnvironment, mountReactHarness } from "../../hooks/domSelectionTestHarness";
+import { KeyframeNavigation } from "./KeyframeNavigation";
+
+beforeAll(installReactActEnvironment);
+
+/**
+ * Regression: a merged gutter row shows the keyframes of EVERY tween in the
+ * property group. The panel guesses "the group's animation" for the write, so a
+ * click on a keyframe authored by a sibling tween named the wrong animation and
+ * the writer silently found nothing to remove. The diamond now reports the
+ * clicked keyframe's own animationId.
+ */
+const MERGED_ROW = [
+  { percentage: 0, tweenPercentage: 0, properties: { x: 0 }, animationId: "delta-to-500-position" },
+  {
+    percentage: 50,
+    tweenPercentage: 25,
+    properties: { x: 120 },
+    animationId: "delta-to-4000-position",
+  },
+];
+
+function clickDiamond(currentPercentage: number, onRemoveKeyframe: (...args: never[]) => void) {
+  const root = mountReactHarness(
+    <KeyframeNavigation
+      property="x"
+      keyframes={MERGED_ROW}
+      currentPercentage={currentPercentage}
+      onSeek={vi.fn()}
+      onAddKeyframe={vi.fn()}
+      onRemoveKeyframe={onRemoveKeyframe as never}
+      onConvertToKeyframes={vi.fn()}
+    />,
+  );
+  const diamond = document.querySelector<HTMLElement>('[title="Remove x keyframe"]');
+  expect(diamond).not.toBeNull();
+  act(() => {
+    diamond?.click();
+  });
+  act(() => root.unmount());
+}
+
+describe("KeyframeNavigation diamond", () => {
+  it("reports the clicked keyframe's own animation on a merged row", () => {
+    const onRemoveKeyframe = vi.fn();
+    clickDiamond(50, onRemoveKeyframe);
+    expect(onRemoveKeyframe).toHaveBeenCalledWith(25, "delta-to-4000-position");
+  });
+
+  it("still reports the first tween's keyframe as its own", () => {
+    const onRemoveKeyframe = vi.fn();
+    clickDiamond(0, onRemoveKeyframe);
+    expect(onRemoveKeyframe).toHaveBeenCalledWith(0, "delta-to-500-position");
+  });
+});

package/src/components/editor/MotionPathOverlay.tsx

@@ -45,6 +45,19 @@ type DragState = {
   ref: MotionNodeRef;
 };
 
+/**
+ * Tween-% for a stop inserted at fraction `t` along the segment between two
+ * nodes. null when either end is not a keyframe (arc waypoints carry no %).
+ */
+function interpolatedKeyframePct(
+  a: MotionNodeRef | undefined,
+  b: MotionNodeRef | undefined,
+  t: number,
+): number | null {
+  if (a?.type !== "keyframe" || b?.type !== "keyframe") return null;
+  return Math.round((a.pct + (b.pct - a.pct) * t) * 1000) / 1000;
+}
+
 const NODE_PX = 6; // node radius in screen pixels (kept constant across zoom)
 // Click-vs-drag cutoff in SCREEN pixels. Below this the pointer-up is a click
 // (select the keyframe); at or above it the gesture commits a move. Screen-space
@@ -88,6 +101,13 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
   // 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}`;
+    return state.elements.find(
+      (element) => (element.key ?? element.id) === sourceScopedId || element.id === selection.id,
+    );
+  });
   // Set-destination mode is armed from the preview toolbar (replaces the old
   // double-click-on-canvas UX). See createMode effects below.
   const armed = usePlayerStore((s) => s.motionPathArmed);
@@ -395,13 +415,10 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
       void commitAddWaypoint(animId, np.segIndex + 1, x, y, commitMutation);
     } else {
       // Linear keyframe path: interpolate the new stop's tween-% from the two
-      // keyframes bounding the clicked segment (np.t = fraction along it), then
-      // insert it. Lands ON the current line, so the dot doesn't jump — drag it
-      // after to bend the path.
-      const a = abs[np.segIndex]?.ref;
-      const b = abs[np.segIndex + 1]?.ref;
-      if (a?.type !== "keyframe" || b?.type !== "keyframe") return;
-      const pct = Math.round((a.pct + (b.pct - a.pct) * np.t) * 1000) / 1000;
+      // keyframes bounding the clicked segment, then insert it. Lands ON the
+      // current line, so the dot doesn't jump — drag it after to bend the path.
+      const pct = interpolatedKeyframePct(abs[np.segIndex]?.ref, abs[np.segIndex + 1]?.ref, np.t);
+      if (pct === null) return;
       e.stopPropagation();
       void commitAddKeyframe(animId, pct, x, y, commitMutation);
     }
@@ -418,12 +435,13 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
   // Right-click a keyframe node → the timeline's keyframe context menu (delete
   // this keyframe / delete all), so motion-path keyframes are removable in place.
   const onNodeContextMenu = (e: React.MouseEvent, ref: MotionNodeRef) => {
-    if (ref.type !== "keyframe" || !animId || !elementId) return;
+    if (ref.type !== "keyframe" || !animId || !elementId || !timelineElement) return;
     e.preventDefault();
     e.stopPropagation();
     setKfMenu({
       x: e.clientX,
       y: e.clientY,
+      element: timelineElement,
       elementId,
       percentage: ref.pct,
       tweenPercentage: ref.pct,
@@ -512,9 +530,13 @@ export const MotionPathOverlay = memo(function MotionPathOverlay({
         <KeyframeDiamondContextMenu
           state={kfMenu}
           onClose={() => setKfMenu(null)}
-          onDelete={(_elId, pct) => animId && handleGsapRemoveKeyframe(animId, pct)}
+          onDelete={(_elId, keyframe) =>
+            animId && handleGsapRemoveKeyframe(animId, keyframe.percentage)
+          }
           onDeleteAll={() => animId && handleGsapRemoveAllKeyframes(animId)}
-          onMoveToPlayhead={(_elId, pct) => animId && handleGsapMoveKeyframeToPlayhead(animId, pct)}
+          onMoveToPlayhead={(_element, keyframe) =>
+            animId && handleGsapMoveKeyframeToPlayhead(animId, keyframe.percentage)
+          }
         />
       )}
     </>

package/src/components/editor/PropertyPanel.tsx

@@ -408,7 +408,9 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                       onCommitAnimatedProperty &&
                       void onCommitAnimatedProperty(element, "x", displayX)
                     }
-                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("x"), pct)}
+                    onRemoveKeyframe={(pct, animationId) =>
+                      onRemoveKeyframe?.(animationId ?? animIdForProp("x"), pct)
+                    }
                     onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("x"))}
                   />
                 )}
@@ -433,7 +435,9 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                       onCommitAnimatedProperty &&
                       void onCommitAnimatedProperty(element, "y", displayY)
                     }
-                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("y"), pct)}
+                    onRemoveKeyframe={(pct, animationId) =>
+                      onRemoveKeyframe?.(animationId ?? animIdForProp("y"), pct)
+                    }
                     onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("y"))}
                   />
                 )}
@@ -458,7 +462,9 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                       onCommitAnimatedProperty &&
                       void onCommitAnimatedProperty(element, "width", displayW)
                     }
-                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("width"), pct)}
+                    onRemoveKeyframe={(pct, animationId) =>
+                      onRemoveKeyframe?.(animationId ?? animIdForProp("width"), pct)
+                    }
                     onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("width"))}
                   />
                 )}
@@ -483,7 +489,9 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                       onCommitAnimatedProperty &&
                       void onCommitAnimatedProperty(element, "height", displayH)
                     }
-                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("height"), pct)}
+                    onRemoveKeyframe={(pct, animationId) =>
+                      onRemoveKeyframe?.(animationId ?? animIdForProp("height"), pct)
+                    }
                     onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("height"))}
                   />
                 )}
@@ -507,7 +515,9 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
                       onCommitAnimatedProperty &&
                       void onCommitAnimatedProperty(element, "rotation", displayR)
                     }
-                    onRemoveKeyframe={(pct) => onRemoveKeyframe?.(animIdForProp("rotation"), pct)}
+                    onRemoveKeyframe={(pct, animationId) =>
+                      onRemoveKeyframe?.(animationId ?? animIdForProp("rotation"), pct)
+                    }
                     onConvertToKeyframes={() => onConvertToKeyframes?.(animIdForProp("rotation"))}
                   />
                 )}