@hyperframes/studio 0.7.71 → 0.7.73

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