@hyperframes/studio 0.7.5 → 0.7.7

package/src/hooks/useRazorSplit.ts

@@ -1,5 +1,4 @@
 import { useCallback, useRef } from "react";
-import { editLog } from "../utils/editDebugLog";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
@@ -120,7 +119,6 @@ async function executeSplit(
   if (!patchTarget) throw new Error("Clip is missing a patchable target.");
 
   const targetPath = element.sourceFile || activeCompPath || "index.html";
-  editLog("razor-split", { id: element.domId ?? element.id, splitTime, file: targetPath });
   const originalContent = await readFileContent(pid, targetPath);
   const newId = generateSplitId(collectHtmlIds(originalContent), element.domId || "clip");
 
@@ -134,7 +132,6 @@ async function executeSplit(
     element.duration,
   );
   if (!splitResult.ok) throw new Error("Failed to split clip.");
-  editLog("razor-split:done", { changed: splitResult.changed, newId });
   if (!splitResult.changed) {
     return { targetPath, originalContent, patchedContent: originalContent, changed: false };
   }

package/src/player/components/Player.tsx

@@ -252,11 +252,6 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
                 if (assetPollRef.current) clearInterval(assetPollRef.current);
                 assetPollRef.current = null;
                 setAssetsLoading(false);
-                if (lastUnloaded) {
-                  console.debug(
-                    "[Player] Asset-loading overlay timed out after 10s; hiding anyway. Check network or asset integrity.",
-                  );
-                }
               }
             }, 100);
           } else {

package/src/player/components/timelineIcons.tsx

@@ -39,7 +39,8 @@ const ICONS: Record<string, ReactNode> = {
 };
 
 export function getTrackStyle(tag: string): TrackVisualStyle {
-  if (!tag) console.warn("[Timeline] getTrackStyle received empty tag, defaulting to div");
+  // Defensive: callers may pass an empty/undefined tag; fall back to "div"
+  // (restores the #1679 null-guard that a restack had dropped).
   const safeTag = tag || "div";
   const trackStyle = getTimelineTrackStyle(safeTag);
   const normalized = safeTag.toLowerCase();

package/src/player/hooks/useTimelinePlayer.ts

@@ -199,8 +199,7 @@ export function useTimelinePlayer() {
       }
 
       return bestAdapter;
-    } catch (err) {
-      console.warn("[useTimelinePlayer] Could not get playback adapter (cross-origin)", err);
+    } catch {
       return null;
     }
   }, []);
@@ -264,9 +263,7 @@ export function useTimelinePlayer() {
           }
         }
       }
-    } catch (err) {
-      console.warn("[useTimelinePlayer] Could not set playback rate (cross-origin)", err);
-    }
+    } catch {}
   }, []);
   const applyPreviewAudioState = useCallback((playbackRateOverride?: number) => {
     const { audioMuted, playbackRate } = usePlayerStore.getState();
@@ -506,9 +503,7 @@ export function useTimelinePlayer() {
           if (msSinceTimeline > 500) {
             enrichMissingCompositionsRef.current();
           }
-        } catch (err) {
-          console.warn("[useTimelinePlayer] Could not read clip manifest from iframe", err);
-        }
+        } catch {}
       }
       if (data?.source === "hf-preview" && data?.type === "timeline" && Array.isArray(data.clips)) {
         lastTimelineMessageRef.current = Date.now();
@@ -524,12 +519,7 @@ export function useTimelinePlayer() {
                 syncTimelineElements(els);
               }
             }
-          } catch (err) {
-            console.warn(
-              "[useTimelinePlayer] Could not read timeline elements on navigate (cross-origin)",
-              err,
-            );
-          }
+          } catch {}
         }
       }
     };

package/src/player/hooks/useTimelineSyncCallbacks.ts

@@ -164,9 +164,7 @@ export function useTimelineSyncCallbacks({
         const dedupedMissing = missing.filter((m) => !finalIds.has(m.id));
         syncTimelineElements([...updatedEls, ...dedupedMissing]);
       }
-    } catch (err) {
-      console.warn("[useTimelinePlayer] enrichMissingCompositions failed", err);
-    }
+    } catch {}
   }, [iframeRef, syncTimelineElements]);
 
   const initializeAdapter = useCallback(() => {
@@ -241,9 +239,7 @@ export function useTimelineSyncCallbacks({
           if (fallbackElement) syncTimelineElements([fallbackElement]);
         }
       }
-    } catch (err) {
-      console.warn("[useTimelinePlayer] Could not read timeline elements from iframe", err);
-    }
+    } catch {}
     return true;
   }, [
     getAdapter,
@@ -295,9 +291,6 @@ export function useTimelineSyncCallbacks({
     probeIntervalRef.current = setTimeout(() => {
       if (!settled) {
         trySettle();
-        if (!settled) {
-          console.warn("[useTimelinePlayer] Runtime did not signal readiness within 5s");
-        }
       }
       window.removeEventListener("message", onMessage);
     }, 5000) as unknown as ReturnType<typeof setInterval>;

package/src/player/lib/timelineIframeHelpers.ts

@@ -121,9 +121,7 @@ export function setPreviewMediaMuted(iframe: HTMLIFrameElement | null, muted: bo
       return;
     }
     postPreviewControl(iframe, "set-muted", { muted });
-  } catch (err) {
-    console.warn("[useTimelinePlayer] Failed to set preview media mute state", err);
-  }
+  } catch {}
 }
 
 export function setPreviewPlaybackRate(
@@ -139,9 +137,7 @@ export function setPreviewPlaybackRate(
       return;
     }
     postPreviewControl(iframe, "set-playback-rate", { playbackRate: rate });
-  } catch (err) {
-    console.warn("[useTimelinePlayer] Failed to set preview playback rate", err);
-  }
+  } catch {}
 }
 
 /**

package/src/telemetry/client.ts

@@ -129,6 +129,8 @@ function send(url: string, payload: string): void {
 function showNoticeOnce(): void {
   if (hasShownNotice()) return;
   markNoticeShown();
+  // Intentional one-time consent disclosure (not debug noise): tells users
+  // anonymous analytics are on and how to opt out. Kept behind a pragma.
   // eslint-disable-next-line no-console
   console.info(
     "%c[HyperFrames]%c Anonymous studio usage analytics enabled. " +

package/src/utils/gestureSmoother.test.ts

@@ -0,0 +1,48 @@
+import { describe, expect, it } from "vitest";
+import { smoothGestureKeyframes } from "./gestureSmoother";
+
+describe("smoothGestureKeyframes", () => {
+  it("returns input unchanged for ≤2 keyframes", () => {
+    const kfs = [
+      { percentage: 0, properties: { x: 0, y: 0 } },
+      { percentage: 100, properties: { x: 100, y: 100 } },
+    ];
+    expect(smoothGestureKeyframes(kfs, 3)).toEqual(kfs);
+  });
+
+  it("pins first and last keyframes", () => {
+    const kfs = [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 50, properties: { x: 999 } },
+      { percentage: 100, properties: { x: 200 } },
+    ];
+    const result = smoothGestureKeyframes(kfs, 3);
+    expect(result[0].properties.x).toBe(0);
+    expect(result[result.length - 1].properties.x).toBe(200);
+  });
+
+  it("smooths a zigzag into a gentler curve", () => {
+    const kfs = [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 25, properties: { x: 100 } },
+      { percentage: 50, properties: { x: 0 } },
+      { percentage: 75, properties: { x: 100 } },
+      { percentage: 100, properties: { x: 0 } },
+    ];
+    const result = smoothGestureKeyframes(kfs, 2);
+    const mid = result[2].properties.x as number;
+    // The sharp 0→100→0 zigzag should be softened — mid should be
+    // pulled toward the neighbors, not stay at exactly 0.
+    expect(mid).toBeGreaterThan(0);
+    expect(mid).toBeLessThan(100);
+  });
+
+  it("returns input unchanged with radius 0", () => {
+    const kfs = [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 50, properties: { x: 999 } },
+      { percentage: 100, properties: { x: 0 } },
+    ];
+    expect(smoothGestureKeyframes(kfs, 0)).toEqual(kfs);
+  });
+});

package/src/utils/gestureSmoother.ts

@@ -0,0 +1,46 @@
+// ponytail: Gaussian-weighted moving average over gesture keyframes.
+// Rounds off jittery corners from raw pointer input while preserving
+// overall path shape. First/last keyframes are pinned (never moved).
+// Upgrade path: Catmull-Rom spline if users need curve-fitted paths.
+
+interface Keyframe {
+  percentage: number;
+  properties: Record<string, number | string>;
+}
+
+function gaussianWeight(distance: number, sigma: number): number {
+  return Math.exp(-(distance * distance) / (2 * sigma * sigma));
+}
+
+export function smoothGestureKeyframes(keyframes: Keyframe[], radius: number): Keyframe[] {
+  if (keyframes.length <= 2 || radius <= 0) return keyframes;
+  const sigma = radius / 2;
+  const numericKeys = new Set<string>();
+  for (const kf of keyframes) {
+    for (const [k, v] of Object.entries(kf.properties)) {
+      if (typeof v === "number") numericKeys.add(k);
+    }
+  }
+  if (numericKeys.size === 0) return keyframes;
+
+  return keyframes.map((kf, i) => {
+    if (i === 0 || i === keyframes.length - 1) return kf;
+    const smoothed: Record<string, number | string> = { ...kf.properties };
+    for (const key of numericKeys) {
+      let weightSum = 0;
+      let valueSum = 0;
+      for (let j = Math.max(0, i - radius); j <= Math.min(keyframes.length - 1, i + radius); j++) {
+        const v = keyframes[j].properties[key];
+        if (typeof v !== "number") continue;
+        // Weight by index distance, not time. Samples here are roughly evenly
+        // spaced, so for the small radius (3) this is fine; switch to a
+        // percentage-domain distance if the window ever grows much larger.
+        const w = gaussianWeight(j - i, sigma);
+        weightSum += w;
+        valueSum += v * w;
+      }
+      if (weightSum > 0) smoothed[key] = Math.round((valueSum / weightSum) * 1000) / 1000;
+    }
+    return { percentage: kf.percentage, properties: smoothed };
+  });
+}

package/src/utils/marqueeGeometry.test.ts

@@ -0,0 +1,123 @@
+import { describe, expect, it } from "vitest";
+import { marqueeIntersectsObb, rectsOverlap, type Point, type Rect } from "./marqueeGeometry";
+
+type Corners = [Point, Point, Point, Point];
+
+function rotateCorners(cx: number, cy: number, w: number, h: number, deg: number): Corners {
+  const rad = (deg * Math.PI) / 180;
+  const cos = Math.cos(rad);
+  const sin = Math.sin(rad);
+  const hw = w / 2;
+  const hh = h / 2;
+  const local: [number, number][] = [
+    [-hw, -hh],
+    [hw, -hh],
+    [hw, hh],
+    [-hw, hh],
+  ];
+  return local.map(([lx, ly]) => ({
+    x: cx + cos * lx - sin * ly,
+    y: cy + sin * lx + cos * ly,
+  })) as Corners;
+}
+
+function aabbCorners(r: Rect): Corners {
+  return [
+    { x: r.left, y: r.top },
+    { x: r.left + r.width, y: r.top },
+    { x: r.left + r.width, y: r.top + r.height },
+    { x: r.left, y: r.top + r.height },
+  ];
+}
+
+describe("rectsOverlap", () => {
+  it("overlapping rects", () => {
+    expect(
+      rectsOverlap(
+        { left: 0, top: 0, width: 10, height: 10 },
+        { left: 5, top: 5, width: 10, height: 10 },
+      ),
+    ).toBe(true);
+  });
+
+  it("non-overlapping rects", () => {
+    expect(
+      rectsOverlap(
+        { left: 0, top: 0, width: 10, height: 10 },
+        { left: 20, top: 20, width: 10, height: 10 },
+      ),
+    ).toBe(false);
+  });
+});
+
+describe("marqueeIntersectsObb", () => {
+  it("axis-aligned overlap", () => {
+    const marquee: Rect = { left: 0, top: 0, width: 100, height: 100 };
+    const corners = aabbCorners({ left: 50, top: 50, width: 80, height: 80 });
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("axis-aligned no overlap", () => {
+    const marquee: Rect = { left: 0, top: 0, width: 50, height: 50 };
+    const corners = aabbCorners({ left: 100, top: 100, width: 50, height: 50 });
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(false);
+  });
+
+  it("marquee fully contains element", () => {
+    const marquee: Rect = { left: 0, top: 0, width: 200, height: 200 };
+    const corners = aabbCorners({ left: 50, top: 50, width: 20, height: 20 });
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("element fully contains marquee", () => {
+    const marquee: Rect = { left: 50, top: 50, width: 10, height: 10 };
+    const corners = aabbCorners({ left: 0, top: 0, width: 200, height: 200 });
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("45-degree rotated square: AABB overlaps but OBB does not", () => {
+    // 100x100 square rotated 45° centered at (200,200)
+    // Its AABB extends to ~(129,129)-(271,271)
+    // A marquee at (0,0)-(135,135) overlaps the AABB but NOT the diamond
+    const corners = rotateCorners(200, 200, 100, 100, 45);
+    const marquee: Rect = { left: 0, top: 0, width: 135, height: 135 };
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(false);
+  });
+
+  it("45-degree rotated square: OBB overlaps", () => {
+    // Same rotated square, marquee reaches the diamond's left point
+    const corners = rotateCorners(200, 200, 100, 100, 45);
+    const marquee: Rect = { left: 0, top: 150, width: 155, height: 100 };
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("zero-width marquee returns false", () => {
+    const corners = aabbCorners({ left: 0, top: 0, width: 100, height: 100 });
+    expect(marqueeIntersectsObb({ left: 50, top: 50, width: 0, height: 50 }, corners)).toBe(false);
+  });
+
+  it("zero-area element returns false for degenerate OBB", () => {
+    const corners: Corners = [
+      { x: 50, y: 50 },
+      { x: 50, y: 50 },
+      { x: 50, y: 50 },
+      { x: 50, y: 50 },
+    ];
+    const marquee: Rect = { left: 0, top: 0, width: 100, height: 100 };
+    // Degenerate point — SAT still works (projections are zero-length intervals)
+    // A point inside the marquee should still intersect
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("30-degree rotated rectangle clips marquee corner", () => {
+    const corners = rotateCorners(150, 150, 200, 50, 30);
+    const marquee: Rect = { left: 0, top: 0, width: 80, height: 130 };
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(true);
+  });
+
+  it("30-degree rotated rectangle misses marquee", () => {
+    const corners = rotateCorners(300, 300, 50, 50, 30);
+    const marquee: Rect = { left: 0, top: 0, width: 100, height: 100 };
+    expect(marqueeIntersectsObb(marquee, corners)).toBe(false);
+  });
+});

package/src/utils/marqueeGeometry.ts

@@ -0,0 +1,172 @@
+export interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Rect {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+type Corners = [Point, Point, Point, Point];
+
+function isIdentityMatrix(m: DOMMatrix): boolean {
+  const e = 1e-6;
+  return Math.abs(m.a - 1) < e && Math.abs(m.b) < e && Math.abs(m.c) < e && Math.abs(m.d - 1) < e;
+}
+
+function rectsOverlap(a: Rect, b: Rect): boolean {
+  return (
+    a.left < b.left + b.width &&
+    a.left + a.width > b.left &&
+    a.top < b.top + b.height &&
+    a.top + a.height > b.top
+  );
+}
+
+function projectOntoAxis(corners: Corners, ax: number, ay: number): [number, number] {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const c of corners) {
+    const dot = c.x * ax + c.y * ay;
+    if (dot < min) min = dot;
+    if (dot > max) max = dot;
+  }
+  return [min, max];
+}
+
+function projectionsOverlap(a: [number, number], b: [number, number]): boolean {
+  return a[0] <= b[1] && b[0] <= a[1];
+}
+
+/**
+ * SAT intersection test between an axis-aligned marquee rect and a
+ * convex quadrilateral (the element's OBB corners in overlay space).
+ *
+ * Separating axes: 2 from the AABB (horizontal, vertical) + 2 from
+ * the OBB's edge normals. If projections overlap on all 4 axes, the
+ * shapes intersect.
+ */
+export function marqueeIntersectsObb(marquee: Rect, corners: Corners): boolean {
+  if (marquee.width <= 0 || marquee.height <= 0) return false;
+
+  const mCorners: Corners = [
+    { x: marquee.left, y: marquee.top },
+    { x: marquee.left + marquee.width, y: marquee.top },
+    { x: marquee.left + marquee.width, y: marquee.top + marquee.height },
+    { x: marquee.left, y: marquee.top + marquee.height },
+  ];
+
+  // AABB axes: (1,0) and (0,1)
+  const mProjX: [number, number] = [marquee.left, marquee.left + marquee.width];
+  const mProjY: [number, number] = [marquee.top, marquee.top + marquee.height];
+
+  const oProjX = projectOntoAxis(corners, 1, 0);
+  const oProjY = projectOntoAxis(corners, 0, 1);
+
+  if (!projectionsOverlap(mProjX, oProjX)) return false;
+  if (!projectionsOverlap(mProjY, oProjY)) return false;
+
+  // OBB edge normals (only need 2 — edges 0→1 and 1→2)
+  for (let i = 0; i < 2; i++) {
+    const edge = {
+      x: corners[i + 1].x - corners[i].x,
+      y: corners[i + 1].y - corners[i].y,
+    };
+    const len = Math.hypot(edge.x, edge.y);
+    if (len < 1e-9) continue;
+    const ax = -edge.y / len;
+    const ay = edge.x / len;
+
+    const mProj = projectOntoAxis(mCorners, ax, ay);
+    const oProj = projectOntoAxis(corners, ax, ay);
+    if (!projectionsOverlap(mProj, oProj)) return false;
+  }
+
+  return true;
+}
+
+/**
+ * Compute the four corners of an element's OBB in overlay-pixel space.
+ *
+ * For elements with an identity transform, returns the axis-aligned
+ * corners from the element's BCR mapped to overlay space (fast path).
+ */
+// fallow-ignore-next-line complexity
+export function elementObbCorners(
+  element: HTMLElement,
+  overlayEl: HTMLDivElement,
+  iframe: HTMLIFrameElement,
+): Corners | null {
+  const doc = iframe.contentDocument;
+  if (!doc) return null;
+
+  const iframeRect = iframe.getBoundingClientRect();
+  const overlayRect = overlayEl.getBoundingClientRect();
+  const root = doc.querySelector<HTMLElement>("[data-composition-id]") ?? doc.documentElement;
+  const declaredW = Number.parseFloat(root?.getAttribute("data-width") ?? "");
+  const declaredH = Number.parseFloat(root?.getAttribute("data-height") ?? "");
+  const rootW = declaredW > 0 ? declaredW : root?.getBoundingClientRect().width || 1;
+  const rootH = declaredH > 0 ? declaredH : root?.getBoundingClientRect().height || 1;
+
+  const scaleX = iframeRect.width / rootW;
+  const scaleY = iframeRect.height / rootH;
+  const offsetX = iframeRect.left - overlayRect.left;
+  const offsetY = iframeRect.top - overlayRect.top;
+
+  const win = element.ownerDocument.defaultView;
+  if (!win) return null;
+
+  const transform = win.getComputedStyle(element).transform;
+  const m = transform && transform !== "none" ? new DOMMatrix(transform) : new DOMMatrix();
+
+  if (isIdentityMatrix(m)) {
+    const r = element.getBoundingClientRect();
+    const left = offsetX + r.left * scaleX;
+    const top = offsetY + r.top * scaleY;
+    const w = r.width * scaleX;
+    const h = r.height * scaleY;
+    return [
+      { x: left, y: top },
+      { x: left + w, y: top },
+      { x: left + w, y: top + h },
+      { x: left, y: top + h },
+    ];
+  }
+
+  // Walk offsetParent chain for pre-transform position
+  let ox = 0;
+  let oy = 0;
+  let el: HTMLElement | null = element;
+  while (el && el !== doc.body && el !== doc.documentElement) {
+    ox += el.offsetLeft;
+    oy += el.offsetTop;
+    el = el.offsetParent as HTMLElement | null;
+  }
+
+  const w = element.offsetWidth;
+  const h = element.offsetHeight;
+  // ponytail: center-based transform — CSS transforms originate at 50% 50%
+  const cx = ox + w / 2;
+  const cy = oy + h / 2;
+
+  const localCorners: [number, number][] = [
+    [-w / 2, -h / 2],
+    [w / 2, -h / 2],
+    [w / 2, h / 2],
+    [-w / 2, h / 2],
+  ];
+
+  return localCorners.map(([lx, ly]) => {
+    const tx = m.a * lx + m.c * ly + cx;
+    const ty = m.b * lx + m.d * ly + cy;
+    return {
+      x: offsetX + tx * scaleX,
+      y: offsetY + ty * scaleY,
+    };
+  }) as Corners;
+}
+
+export { rectsOverlap };

package/src/utils/optimisticUpdate.ts

@@ -11,8 +11,7 @@ export async function executeOptimistic<T>(options: OptimisticUpdateOptions<T>):
   const snapshot = options.apply();
   try {
     await options.persist();
-  } catch (error) {
+  } catch {
     options.rollback(snapshot);
-    console.warn("[optimistic] Mutation failed, rolled back:", error);
   }
 }

package/src/utils/sourcePatcher.ts

@@ -239,16 +239,6 @@ function execDataAttrPattern(html: string, attr: string, value: string): TagMatc
   const pattern = new RegExp(`(<[^>]*\\b${attr}=(["'])${escapeRegex(value)}\\2[^>]*)>`, "i");
   const match = pattern.exec(html);
   if (match?.index == null) return null;
-  // Defensive: a second exact match means a duplicate id/attr in the source
-  // (id drift). Don't silently patch the first while leaving the other stale —
-  // surface it. By the mint contract this should never fire.
-  const all = html.match(new RegExp(`<[^>]*\\b${attr}=(["'])${escapeRegex(value)}\\1[^>]*>`, "gi"));
-  if (all && all.length > 1) {
-    // eslint-disable-next-line no-console
-    console.warn(
-      `sourcePatcher: ${attr}="${value}" matched ${all.length} elements; patching the first. ids/attrs must be unique per document.`,
-    );
-  }
   return { tag: match[1], start: match.index, end: match.index + match[1].length };
 }
 

package/src/utils/velocityEaseFitter.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import { fitEasesFromVelocity, type FittedKeyframe } from "./velocityEaseFitter";
+
+function makeSamples(
+  count: number,
+  duration: number,
+  velocityFn: (t: number) => number,
+): { time: number; properties: Record<string, number> }[] {
+  const samples = [];
+  let pos = 0;
+  for (let i = 0; i <= count; i++) {
+    const t = (i / count) * duration;
+    const v = velocityFn(t / duration);
+    pos += v * (duration / count);
+    samples.push({ time: t, properties: { x: pos } });
+  }
+  return samples;
+}
+
+describe("fitEasesFromVelocity", () => {
+  it("constant speed → no ease assigned", () => {
+    const kfs: FittedKeyframe[] = [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 100, properties: { x: 100 } },
+    ];
+    const samples = makeSamples(60, 1, () => 100);
+    const result = fitEasesFromVelocity(kfs, samples, 1);
+    expect(result[1].ease).toBeUndefined();
+  });
+
+  it("decelerate at end → AE Easy Ease In (slow-end curve)", () => {
+    const kfs: FittedKeyframe[] = [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 100, properties: { x: 100 } },
+    ];
+    // Start fast, end slow → playback must also be slow at the end (CP2 y=1).
+    const samples = makeSamples(60, 1, (t) => Math.max(0, 200 * (1 - t)));
+    const result = fitEasesFromVelocity(kfs, samples, 1);
+    expect(result[1].ease).toBe("custom(M0,0 C0.333,0.333 0.667,1 1,1)");
+  });
+
+  it("accelerate from start → AE Easy Ease Out (slow-start curve)", () => {
+    const kfs: FittedKeyframe[] = [
+      { percentage: 0, properties: { x: 0 } },
+      { percentage: 100, properties: { x: 100 } },
+    ];
+    // Start slow, end fast → playback must also be slow at the start (CP1 y=0).
+    const samples = makeSamples(60, 1, (t) => 200 * t);
+    const result = fitEasesFromVelocity(kfs, samples, 1);
+    expect(result[1].ease).toBe("custom(M0,0 C0.333,0 0.667,0.667 1,1)");
+  });
+
+  it("single keyframe → returns unchanged", () => {
+    const kfs: FittedKeyframe[] = [{ percentage: 0, properties: { x: 0 } }];
+    const result = fitEasesFromVelocity(kfs, [], 1);
+    expect(result).toEqual(kfs);
+  });
+});