@hyperframes/studio 0.7.70 → 0.7.72

package/src/components/editor/PropertyPanelFlat.tsx

@@ -23,6 +23,15 @@ import {
   FlatColorGradingAccessory,
   FlatColorGradingSection,
 } from "./propertyPanelFlatColorGradingSection";
+import {
+  activeColorGradingEffectCount,
+  FlatEffectsAccessory,
+  FlatEffectsSection,
+} from "./propertyPanelFlatEffectsSection";
+import {
+  deriveMediaOverlayPlacement,
+  FlatOverlaysSection,
+} from "./propertyPanelFlatOverlaysSection";
 
 type EditingSections = ReturnType<typeof resolveEditingSections>;
 
@@ -34,11 +43,7 @@ type FlatGroupDescriptor = {
   content: ReactNode;
 };
 
-// Type-only fallback for the Motion effect-card callbacks. Used solely to
-// satisfy FlatMotionSection's required-callback shape when the effect list is
-// gated off (showEffects === false, so none of these are ever invoked). Keeps
-// the gated-off path free of `!` non-null assertions — the real, narrowed
-// handlers flow through only when the double-gate below passes.
+// Required callback shape for the gated-off Motion effect list.
 const EMPTY_GSAP_EFFECT_HANDLERS = {
   onAddAnimation: () => {},
   onUpdateProperty: () => {},
@@ -48,15 +53,7 @@ const EMPTY_GSAP_EFFECT_HANDLERS = {
   onRemoveProperty: () => {},
 };
 
-/**
- * The flat "Ledger" inspector shell (design_handoff_studio_inspector).
- *
- * Extracted from PropertyPanel so that file stays under the 600-LOC gate
- * (same one-directional-import precedent as FlatTextSection). Rendered only
- * when STUDIO_FLAT_INSPECTOR_ENABLED is on; owns the one-open group state.
- *
- * The Text/Style/Layout/Motion/Media/Grade groups share the one-open accordion.
- */
+/** The flat inspector shell with one shared open-group state. */
 // fallow-ignore-next-line complexity
 export function PropertyPanelFlat({
   element,
@@ -93,6 +90,7 @@ export function PropertyPanelFlat({
   onAskAgent,
   onToggleElementHidden,
   onImportAssets,
+  onAddMediaOverlay,
   onImportFonts,
   recordingState,
   recordingDuration,
@@ -113,10 +111,7 @@ export function PropertyPanelFlat({
   currentTime,
   animIdForProp,
   gsapRuntimeValues,
-  // Renamed: PropertyPanel.tsx still computes/passes these for its own legacy
-  // (non-flat) panel, but the flat path recomputes its own basis below via
-  // deriveElementTiming so it agrees with Motion's Timing row — ignore the
-  // parent's naive `elDuration ?? 1` fallback.
+  // The flat path derives timing consistently with its Motion section.
   elStart: _elStart,
   elDuration: _elDuration,
   onCommitAnimatedProperty,
@@ -164,6 +159,7 @@ export function PropertyPanelFlat({
   | "onAskAgent"
   | "onToggleElementHidden"
   | "onImportAssets"
+  | "onAddMediaOverlay"
   | "onImportFonts"
   | "fontAssets"
   | "gsapAnimations"
@@ -187,9 +183,6 @@ export function PropertyPanelFlat({
   | "recordingDuration"
   | "onToggleRecording"
 > &
-  // Layout-group values (Plan 3a Task 5). All are derived locals or handlers in
-  // PropertyPanel; compose their exact shapes from FlatLayoutSection's own props
-  // via Pick so a signature change there propagates here instead of drifting.
   Pick<
     Parameters<typeof FlatLayoutSection>[0],
     | "displayX"
@@ -227,12 +220,7 @@ export function PropertyPanelFlat({
     onCopyElementInfo: () => void;
     currentTime: number;
   }) {
-  // Lazy initializer: pick whichever group actually renders for this element
-  // (Text if text-editable, else Style if style-editable, else none open) so a
-  // style-only element doesn't start with everything collapsed. Only runs on
-  // mount — PropertyPanel.tsx keys <PropertyPanelFlat> by element identity so
-  // switching the selection re-mounts this component and re-derives the
-  // default instead of preserving stale state across unrelated elements.
+  // PropertyPanel keys this component by selection, so the default is per element.
   const [openGroupId, setOpenGroupId] = useState<string>(() =>
     isTextEditableSelection(element)
       ? "text"
@@ -243,33 +231,16 @@ export function PropertyPanelFlat({
           : "layout",
   );
 
-  // Tracks which group(s) are actively transitioning this toggle cycle, so
-  // their header/body gets the fast entrance animation (hf-flat-group-enter)
-  // and no one else's does. Deliberately NOT derived from remounting alone:
-  // FlatGroupHeader instances are keyed by group id and React normally
-  // preserves them across re-renders, but toggling a non-adjacent group still
-  // shifts the untouched collapsed siblings between the before/after-open
-  // slices below, and Chromium restarts a CSS animation on that kind of
-  // position shift even though nothing about the sibling actually changed.
-  // Gating on these ids (cleared shortly after the 120ms CSS animation
-  // finishes) keeps the animation scoped to only the groups that actually
-  // just toggled. Two ids, not one: the clicked (newly-opening/closing) group
-  // AND whichever group was open immediately before the click and got
-  // implicitly closed by it — both freshly-mounted headers need to animate.
+  // Animate only the groups that changed during this toggle cycle.
   const [justToggledIds, setJustToggledIds] = useState<string[]>([]);
   const justToggledTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const panelBodyRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
     return () => {
       if (justToggledTimeoutRef.current) clearTimeout(justToggledTimeoutRef.current);
     };
   }, []);
 
-  // Grade group state. Called unconditionally (React rules-of-hooks) even when
-  // sections.colorGrading is false — unlike the legacy ColorGradingSection,
-  // which is only mounted when the section is active, PropertyPanelFlat is not
-  // remounted per-section so the hook must run every render. Shares one state
-  // object between the group's header accessory (compare/status/reset) and its
-  // body (the FlatColorGradingSection controls).
   const colorGradingController = useColorGradingController({
     projectId,
     element,
@@ -281,9 +252,7 @@ export function PropertyPanelFlat({
   const isTextEditable = isTextEditableSelection(element);
   const elementKind = sections.media ? "media" : element.textFields.length > 0 ? "text" : "other";
   const toggleOpen = (groupId: string) => {
-    // Capture what was open BEFORE this click (this render's closure over
-    // openGroupId), so the group that's about to be implicitly closed can be
-    // tracked too — not just the one the user clicked.
+    const isOpening = openGroupId !== groupId;
     const previousOpenGroupId = openGroupId;
     setOpenGroupId((current) => (current === groupId ? "" : groupId));
     const implicitlyClosedId =
@@ -291,34 +260,20 @@ export function PropertyPanelFlat({
     setJustToggledIds(implicitlyClosedId ? [groupId, implicitlyClosedId] : [groupId]);
     if (justToggledTimeoutRef.current) clearTimeout(justToggledTimeoutRef.current);
     justToggledTimeoutRef.current = setTimeout(() => setJustToggledIds([]), 200);
+    if (isOpening) {
+      requestAnimationFrame(() =>
+        panelBodyRef.current
+          ?.querySelector<HTMLElement>('[data-flat-group-open="true"]')
+          ?.scrollIntoView?.({ block: "start" }),
+      );
+    }
   };
-  // Basis for the Layout keyframe gutter (X/Y/W/H/Angle + 3D Transform) —
-  // must agree with Motion's Timing row (FlatTimingRow), which infers the
-  // range from animations when there's no explicit data-duration. Computed
-  // here (not threaded from PropertyPanel) both to keep that file under its
-  // 600-LOC gate and because element/gsapAnimations are already in scope.
   const { start: elStart, duration: elDuration } = deriveElementTiming(element, gsapAnimations);
-  // Trivial percentage→time seek, derived here rather than threaded from
-  // PropertyPanel (keeps that file under its 600-LOC gate).
   const seekFromKfPct = (pct: number) => onSeekToTime?.(elStart + (pct / 100) * elDuration);
-  // Playhead position within the SAME corrected elStart/elDuration basis as
-  // seekFromKfPct above — recomputed here (not threaded as `currentPct` from
-  // PropertyPanel, which still derives it against its own naive basis for the
-  // legacy panel) so KeyframeNavigation's diamond active-state and prev/next
-  // arrow targeting agree with where a keyframe click actually seeks to
-  // (follow-up fix to 684ec4e87, which corrected the seek basis but left this
-  // one still naive).
+  // Use the same timing basis for seeking and active keyframe state.
   const currentPct = elDuration > 0 ? ((currentTime - elStart) / elDuration) * 100 : 0;
 
-  // Motion group double-gate — reproduces the legacy PropertyPanel gate exactly:
-  //  • Timing (sections.timing) shows via resolveEditingSections, same as today.
-  //  • The effect-card list shows only when STUDIO_GSAP_PANEL_ENABLED is on AND
-  //    all five edit handlers are present (identical to PropertyPanel's legacy
-  //    `<GsapAnimationSection>` guard).
-  // Computing the narrowed handler bundle inside the `&&`-guarded ternary lets
-  // TypeScript prove each handler non-undefined without a `!` assertion; the
-  // noop bundle only fills the type when the gate is off (never invoked, since
-  // FlatMotionSection guards every call behind showEffects).
+  // Match the legacy Motion gate while preserving TypeScript narrowing.
   const showMotionTiming = Boolean(sections.timing);
   const gsapEffectHandlers =
     STUDIO_GSAP_PANEL_ENABLED &&
@@ -347,9 +302,6 @@ export function PropertyPanelFlat({
   const showMotionEffects = gsapEffectHandlers !== null;
   const showMotionGroup = showMotionTiming || showMotionEffects;
 
-  // Ordered group descriptors — one per FlatGroup this panel renders, gated by
-  // the same conditions the inline JSX used. Split below into before-open/
-  // open/after-open regions for the one-open accordion.
   const groups: FlatGroupDescriptor[] = [];
   if (isTextEditable) {
     groups.push({
@@ -372,8 +324,6 @@ export function PropertyPanelFlat({
     });
   }
   if (showEditableSections) {
-    // Number.isFinite guard (not `|| 1`): opacity 0 is a real value — an
-    // invisible element must summarize as 0%, not 100%.
     const opacityValue = parseFloat(styles.opacity ?? "1");
     const opacityPct = Math.round((Number.isFinite(opacityValue) ? opacityValue : 1) * 100);
     groups.push({
@@ -398,8 +348,6 @@ export function PropertyPanelFlat({
     groups.push({
       id: "layout",
       title: "Layout",
-      // No scrub accessory: FlatRow/CommitField has no pointer-drag scrubbing
-      // (wheel/arrow keys only) — advertising "drag values to scrub" here lies.
       summary: `${formatPxMetricValue(displayX)},${formatPxMetricValue(displayY)} · ${Math.round(displayW)}×${Math.round(displayH)}`,
       content: (
         <FlatLayoutSection
@@ -470,15 +418,56 @@ export function PropertyPanelFlat({
           assets={assets}
           onImportAssets={onImportAssets}
           onCommitColorGrading={colorGradingController.commitColorGrading}
+          onPreviewColorGrading={colorGradingController.previewColorGrading}
           applyScope={colorGradingController.applyScope}
           applyBusy={colorGradingController.applyBusy}
           onSetApplyScope={colorGradingController.setApplyScope}
           onApplyToScope={() => void colorGradingController.applyToScope()}
           onApplyScopeAvailable={Boolean(onApplyColorGradingScope)}
           mediaMetadata={colorGradingController.mediaMetadata}
+          presetPreviews={colorGradingController.presetPreviews}
+          onRequestPresetPreviews={colorGradingController.requestPresetPreviews}
+        />
+      ),
+    });
+    const activeEffects = activeColorGradingEffectCount(colorGradingController.grading);
+    const effectsProps = {
+      grading: colorGradingController.grading,
+      onCommitColorGrading: colorGradingController.commitColorGrading,
+    };
+    groups.push({
+      id: "effects",
+      title: "Effects",
+      accessory: <FlatEffectsAccessory {...effectsProps} />,
+      summary: activeEffects ? `${activeEffects} active` : "none",
+      content: (
+        <FlatEffectsSection
+          {...effectsProps}
+          previews={colorGradingController.effectPreviews}
+          presetPreviews={colorGradingController.presetPreviews}
+          onPreviewColorGrading={colorGradingController.previewColorGrading}
+          onRequestEffectPreviews={colorGradingController.requestEffectPreviews}
+          onRequestPresetPreviews={colorGradingController.requestPresetPreviews}
         />
       ),
     });
+    if (onAddMediaOverlay) {
+      groups.push({
+        id: "overlays",
+        title: "Overlays",
+        summary: "add layer",
+        content: (
+          <FlatOverlaysSection
+            onAddOverlay={(blockName) =>
+              onAddMediaOverlay(
+                blockName,
+                deriveMediaOverlayPlacement(element, { start: elStart, duration: elDuration }),
+              )
+            }
+          />
+        ),
+      });
+    }
   }
   if (sections.media) {
     groups.push({
@@ -499,13 +488,6 @@ export function PropertyPanelFlat({
     });
   }
 
-  // Fixed-headers + scrollable-open-section layout (design_handoff
-  // scrollable-open-section, replaces the prior sticky-stacking mechanism):
-  // collapsed headers before/after the open group render in normal document
-  // flow and never move. Only the open group's own body content scrolls, in
-  // a dedicated region between the two fixed header stacks. When no group is
-  // open, every group is just a collapsed header — there's no scrollable
-  // middle region at all, since nothing is expanded.
   const openIndex = groups.findIndex((g) => g.id === openGroupId);
   const beforeOpen = openIndex === -1 ? groups : groups.slice(0, openIndex);
   const openGroup = openIndex === -1 ? null : groups[openIndex];
@@ -532,7 +514,11 @@ export function PropertyPanelFlat({
             showUngroup={Boolean(onUngroup && element.dataAttributes["hf-group"] != null)}
           />
         </DesignPanelInputProvider>
-        <div data-flat-panel-body="true" className="flex min-h-0 flex-1 flex-col overflow-y-auto">
+        <div
+          ref={panelBodyRef}
+          data-flat-panel-body="true"
+          className="flex min-h-0 flex-1 flex-col overflow-y-auto"
+        >
           {beforeOpen.map((g) => (
             <DesignPanelInputProvider key={g.id} section={slugifyDesignInput(g.title)}>
               <FlatGroupHeader
@@ -546,7 +532,7 @@ export function PropertyPanelFlat({
           ))}
           {openGroup && (
             <DesignPanelInputProvider section={slugifyDesignInput(openGroup.title)}>
-              <div data-flat-group-open="true" className="flex min-h-0 flex-1 flex-col">
+              <div data-flat-group-open="true" className="flex min-h-[180px] flex-none flex-col">
                 <FlatGroupHeader
                   title={openGroup.title}
                   isOpen

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

@@ -5,15 +5,15 @@ describe("patchMediaColorGradingInHtml", () => {
   it("adds color grading to video and image tags only", () => {
     const { html, count } = patchMediaColorGradingInHtml(
       `<div><video id="v"></video><img id="i" /><audio id="a"></audio></div>`,
-      `{"preset":"natural-lift"}`,
+      `{"preset":"clean-studio"}`,
     );
 
     expect(count).toBe(2);
     expect(html).toContain(
-      `video id="v" data-color-grading="{&quot;preset&quot;:&quot;natural-lift&quot;}"`,
+      `video id="v" data-color-grading="{&quot;preset&quot;:&quot;clean-studio&quot;}"`,
     );
     expect(html).toContain(
-      `img id="i" data-color-grading="{&quot;preset&quot;:&quot;natural-lift&quot;}"`,
+      `img id="i" data-color-grading="{&quot;preset&quot;:&quot;clean-studio&quot;}"`,
     );
     expect(html).toContain(`<audio id="a"></audio>`);
   });

package/src/components/editor/easeCurveSvg.tsx

@@ -0,0 +1,65 @@
+import { evaluateWiggleEase, parseWiggleEase } from "@hyperframes/core/wiggle-ease";
+import { evaluateSpringEase, parseSpringBounce } from "@hyperframes/core/spring-ease";
+import { resolveEaseCurveTuple } from "./gsapAnimationConstants";
+
+export function sampledPath(
+  samples: number,
+  x: (progress: number) => number,
+  y: (value: number) => number,
+  evaluate: (progress: number) => number,
+): string {
+  return Array.from({ length: samples + 1 }, (_, index) => {
+    const progress = index / samples;
+    return `${index === 0 ? "M" : "L"}${x(progress)},${y(evaluate(progress))}`;
+  }).join(" ");
+}
+
+export function holdCurvePath(left: number, bottom: number, right: number, top: number): string {
+  return `M${left},${bottom} L${right},${bottom} L${right},${top}`;
+}
+
+export function MiniCurveSvg({
+  ease,
+  active,
+  size = 24,
+}: {
+  ease: string;
+  active: boolean;
+  size?: number;
+}) {
+  const springBounce = parseSpringBounce(ease);
+  const wiggle = parseWiggleEase(ease);
+  const curve = resolveEaseCurveTuple(ease);
+  const [x1, y1, x2, y2] = curve;
+  const s = size;
+  const p = size / 8;
+  const g = s - p * 2;
+  const sx = (px: number) => p + g * px;
+  const sy = (py: number) => s - p - g * py;
+  const d =
+    ease === "hold"
+      ? holdCurvePath(p, s - p, s - p, p)
+      : wiggle
+        ? sampledPath(64, sx, sy, (progress) =>
+            evaluateWiggleEase(progress, wiggle.wiggles, wiggle.type, wiggle.amplitude),
+          )
+        : springBounce !== null
+          ? sampledPath(
+              24,
+              sx,
+              (value) => sy(value / 1.2),
+              (progress) => evaluateSpringEase(progress, springBounce),
+            )
+          : `M${p},${s - p} C${sx(x1)},${sy(y1)} ${sx(x2)},${sy(y2)} ${s - p},${p}`;
+  return (
+    <svg width={s} height={s} viewBox={`0 0 ${s} ${s}`}>
+      <path
+        d={d}
+        fill="none"
+        stroke={active ? "#3CE6AC" : "#737373"}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}

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

@@ -0,0 +1,114 @@
+// Imports the parsers SOURCE (not the published subpath) so newly-added eases
+// like circ.inOut resolve before the parsers dist is rebuilt.
+import { SUPPORTED_EASES } from "../../../../parsers/src/gsapConstants";
+import { parseSpringBounce } from "@hyperframes/core/spring-ease";
+import { parseWiggleEase } from "@hyperframes/core/wiggle-ease";
+import { describe, expect, it } from "vitest";
+import { EASE_PRESETS, easePresetLabel } from "./easePresetLibrary";
+import { resolveEaseCurveTuple } from "./gsapAnimationConstants";
+
+const CUSTOM_EASE_PATTERN =
+  /^custom\(M0,0 C-?\d+(?:\.\d+)?,-?\d+(?:\.\d+)? -?\d+(?:\.\d+)?,-?\d+(?:\.\d+)? 1,1\)$/;
+
+describe("EASE_PRESETS", () => {
+  it("contains the complete 32-preset Graphs library with unique fields", () => {
+    expect(EASE_PRESETS).toHaveLength(32);
+    expect(new Set(EASE_PRESETS.map(({ id }) => id))).toHaveLength(32);
+    expect(new Set(EASE_PRESETS.map(({ label }) => label))).toHaveLength(32);
+    expect(new Set(EASE_PRESETS.map(({ ease }) => ease))).toHaveLength(32);
+  });
+
+  it("preserves the required standard, Flow, and Bounce mappings", () => {
+    const easeByLabel = Object.fromEntries(EASE_PRESETS.map(({ label, ease }) => [label, ease]));
+
+    expect(easeByLabel).toMatchObject({
+      Linear: "none",
+      "Ease In": "power1.in",
+      "Quad In": "power2.in",
+      "Cubic In": "power3.in",
+      "Ease Out": "power1.out",
+      "Quad Out": "power2.out",
+      "Cubic Out": "power3.out",
+      "Ease In & Out": "power1.inOut",
+      "Quad Ease": "power2.inOut",
+      "Cubic Ease": "power3.inOut",
+      "Circular Ease": "circ.inOut",
+      "Ease In Back": "back.in",
+      "Ease Out Back": "back.out",
+      "Flow 1": "wiggle(1,easeInOut,0.20)",
+      "Flow 2": "wiggle(2,easeInOut,0.15)",
+      "Flow 3": "wiggle(3,easeInOut,0.12)",
+      "Flow 4": "wiggle(4,easeInOut,0.10)",
+      "Flow 5": "wiggle(5,easeInOut,0.08)",
+      "Flow 6": "wiggle(6,easeInOut,0.07)",
+      "Flow 7": "wiggle(7,easeInOut,0.06)",
+      "Bounce 1": "wiggle(4,easeOut,0.22)",
+      "Bounce 2": "wiggle(6,easeOut,0.26)",
+      "Bounce 3": "wiggle(9,uniform,0.32)",
+      "Bounce 4": "wiggle(5,anticipate,0.28)",
+      Hold: "hold",
+    });
+
+    const flows = EASE_PRESETS.filter(({ id }) => id.startsWith("flow-"));
+    expect(flows.map(({ label }) => label)).toEqual([
+      "Flow 1",
+      "Flow 2",
+      "Flow 3",
+      "Flow 4",
+      "Flow 5",
+      "Flow 6",
+      "Flow 7",
+    ]);
+    expect(flows.every(({ ease }) => parseWiggleEase(ease) !== null)).toBe(true);
+  });
+
+  it("uses supported or valid custom eases that all resolve to finite geometry", () => {
+    for (const preset of EASE_PRESETS) {
+      expect(
+        SUPPORTED_EASES.includes(preset.ease as (typeof SUPPORTED_EASES)[number]) ||
+          CUSTOM_EASE_PATTERN.test(preset.ease) ||
+          parseSpringBounce(preset.ease) !== null ||
+          parseWiggleEase(preset.ease) !== null,
+        `${preset.label} has unsupported ease ${preset.ease}`,
+      ).toBe(true);
+      expect(resolveEaseCurveTuple(preset.ease).every(Number.isFinite)).toBe(true);
+    }
+  });
+
+  it("assigns every preset a valid kind", () => {
+    const kinds = new Set(["curve", "spring", "wiggle"]);
+
+    for (const preset of EASE_PRESETS) {
+      expect(kinds.has(preset.kind)).toBe(true);
+    }
+  });
+
+  it("uses valid bounce values for spring presets", () => {
+    for (const preset of EASE_PRESETS.filter(({ kind }) => kind === "spring")) {
+      const bounce = parseSpringBounce(preset.ease);
+
+      expect(bounce).not.toBeNull();
+      expect(bounce).toBeGreaterThanOrEqual(0);
+      expect(bounce).toBeLessThanOrEqual(1);
+    }
+  });
+
+  it("uses parseable eases for wiggle presets", () => {
+    for (const preset of EASE_PRESETS.filter(({ kind }) => kind === "wiggle")) {
+      expect(parseWiggleEase(preset.ease)).not.toBeNull();
+    }
+  });
+
+  it("preserves stable preset ids", () => {
+    for (const id of ["flow-7", "hold", "rebound-in"]) {
+      expect(EASE_PRESETS.some((preset) => preset.id === id)).toBe(true);
+    }
+  });
+
+  it("resolves preset labels by exact ease", () => {
+    expect(easePresetLabel("spring(0.6)")).toBe("Bouncy");
+    expect(easePresetLabel("back.in")).toBe("Ease In Back");
+    expect(easePresetLabel("wiggle(9,uniform,0.32)")).toBe("Bounce 3");
+    expect(easePresetLabel("custom(x)")).toBeNull();
+  });
+});

package/src/components/editor/easePresetLibrary.ts

@@ -0,0 +1,49 @@
+export const EASE_PRESETS = [
+  { id: "linear", label: "Linear", ease: "none", kind: "curve" },
+  { id: "ease-in", label: "Ease In", ease: "power1.in", kind: "curve" },
+  { id: "quad-in", label: "Quad In", ease: "power2.in", kind: "curve" },
+  { id: "cubic-in", label: "Cubic In", ease: "power3.in", kind: "curve" },
+  { id: "ease-out", label: "Ease Out", ease: "power1.out", kind: "curve" },
+  { id: "quad-out", label: "Quad Out", ease: "power2.out", kind: "curve" },
+  { id: "cubic-out", label: "Cubic Out", ease: "power3.out", kind: "curve" },
+  { id: "ease", label: "Ease In & Out", ease: "power1.inOut", kind: "curve" },
+  { id: "quad-ease", label: "Quad Ease", ease: "power2.inOut", kind: "curve" },
+  { id: "cubic-ease", label: "Cubic Ease", ease: "power3.inOut", kind: "curve" },
+  { id: "circular-ease", label: "Circular Ease", ease: "circ.inOut", kind: "curve" },
+  { id: "rebound-in", label: "Ease In Back", ease: "back.in", kind: "curve" },
+  { id: "rebound-out", label: "Ease Out Back", ease: "back.out", kind: "curve" },
+  { id: "flow-1", label: "Flow 1", ease: "wiggle(1,easeInOut,0.20)", kind: "wiggle" },
+  { id: "flow-2", label: "Flow 2", ease: "wiggle(2,easeInOut,0.15)", kind: "wiggle" },
+  { id: "flow-3", label: "Flow 3", ease: "wiggle(3,easeInOut,0.12)", kind: "wiggle" },
+  { id: "flow-4", label: "Flow 4", ease: "wiggle(4,easeInOut,0.10)", kind: "wiggle" },
+  { id: "flow-5", label: "Flow 5", ease: "wiggle(5,easeInOut,0.08)", kind: "wiggle" },
+  { id: "flow-6", label: "Flow 6", ease: "wiggle(6,easeInOut,0.07)", kind: "wiggle" },
+  { id: "flow-7", label: "Flow 7", ease: "wiggle(7,easeInOut,0.06)", kind: "wiggle" },
+  { id: "bounce-1", label: "Bounce 1", ease: "wiggle(4,easeOut,0.22)", kind: "wiggle" },
+  { id: "bounce-2", label: "Bounce 2", ease: "wiggle(6,easeOut,0.26)", kind: "wiggle" },
+  { id: "bounce-3", label: "Bounce 3", ease: "wiggle(9,uniform,0.32)", kind: "wiggle" },
+  { id: "bounce-4", label: "Bounce 4", ease: "wiggle(5,anticipate,0.28)", kind: "wiggle" },
+  { id: "hold", label: "Hold", ease: "hold", kind: "curve" },
+  {
+    id: "rebound-ease",
+    label: "Ease In & Out Back",
+    ease: "back.inOut",
+    kind: "curve",
+  },
+  { id: "expo-in", label: "Expo In", ease: "expo.in", kind: "curve" },
+  { id: "expo-out", label: "Expo Out", ease: "expo.out", kind: "curve" },
+  // Runtime spring(bounce) approximates Figma stiffness and damping with bounce alone.
+  { id: "spring-gentle", label: "Gentle", ease: "spring(0.15)", kind: "spring" },
+  { id: "spring-quick", label: "Quick", ease: "spring(0.4)", kind: "spring" },
+  { id: "spring-bouncy", label: "Bouncy", ease: "spring(0.6)", kind: "spring" },
+  { id: "spring-slow", label: "Slow", ease: "spring(0.25)", kind: "spring" },
+] as const satisfies ReadonlyArray<{
+  id: string;
+  label: string;
+  ease: string;
+  kind: "curve" | "spring" | "wiggle";
+}>;
+
+export function easePresetLabel(ease: string): string | null {
+  return EASE_PRESETS.find((preset) => preset.ease === ease)?.label ?? null;
+}

package/src/components/editor/gsapAnimationConstants.ts

@@ -1,4 +1,4 @@
-import { controlPointsForGsapEase } from "./studioMotion";
+import { controlPointsForGsapEase, parseStudioCustomEaseData } from "./studioMotion";
 
 export const METHOD_LABELS: Record<string, string> = {
   set: "Set",
@@ -116,9 +116,14 @@ export const EASE_CURVES: Record<string, [number, number, number, number]> = {
   "back.out": [0.34, 1.56, 0.64, 1],
   "back.in": [0.36, 0, 0.66, -0.56],
   "back.inOut": [0.68, -0.55, 0.27, 1.55],
+  "circ.inOut": [0.785, 0.135, 0.15, 0.86],
   "expo.out": [0.16, 1, 0.3, 1],
   "expo.in": [0.7, 0, 0.84, 0],
   "expo.inOut": [0.87, 0, 0.13, 1],
+  "bounce.out": [0.34, 1.56, 0.64, 0.74],
+  "bounce.in": [0.36, 0.26, 0.66, -0.56],
+  "elastic.out(1,0.3)": [0.16, 1.45, 0.28, 0.82],
+  "elastic.inOut(1,0.3)": [0.68, -0.55, 0.32, 1.55],
   // After Effects polarity: "in" eases into the keyframe (slow END, CP2 y=1),
   // "out" eases out of it (slow START, CP1 y=0). Matches the "(AE)" labels.
   "ae-ease": [0.333, 0, 0.667, 1],
@@ -126,18 +131,15 @@ export const EASE_CURVES: Record<string, [number, number, number, number]> = {
   "ae-ease-out": [0.333, 0, 0.667, 0.667],
 };
 
-export function parseCustomEaseFromString(ease: string): {
-  x1: number;
-  y1: number;
-  x2: number;
-  y2: number;
-} {
-  const match = ease.match(/^custom\((.+)\)$/);
-  if (!match) return controlPointsForGsapEase("power2.out");
-  const data = match[1];
-  const nums = data.match(/[\d.]+/g)?.map(Number);
-  if (!nums || nums.length < 6) return controlPointsForGsapEase("power2.out");
-  return { x1: nums[2], y1: nums[3], x2: nums[4], y2: nums[5] };
+export function resolveEaseCurveTuple(ease: string): [number, number, number, number] {
+  if (ease.startsWith("custom(")) {
+    const points = parseStudioCustomEaseData(ease.match(/^custom\((.+)\)$/)?.[1]);
+    if (points) return [points.x1, points.y1, points.x2, points.y2];
+  }
+  const curve = EASE_CURVES[ease];
+  if (curve) return curve;
+  const points = controlPointsForGsapEase(ease);
+  return [points.x1, points.y1, points.x2, points.y2];
 }
 
 export const PERCENT_PROPS = new Set(["opacity", "autoAlpha"]);