@agent-native/core 0.85.7 → 0.86.1

package/corpus/templates/videos/app/remotion/testing/animationTestUtils.ts

@@ -1,366 +0,0 @@
-/**
- * Animation Testing Utilities
- *
- * Helpers for testing animated components and animations
- */
-
-import type { CursorFrame } from "@/remotion/hooks/useCursorHistory";
-import { validateAnimation } from "@/remotion/utils/animationHelpers";
-import type { AnimationTrack } from "@/types";
-import type {
-  ElementAnimation,
-  AnimatedPropertyConfig,
-} from "@/types/elementAnimations";
-import { getAnimationValue } from "@/types/elementAnimations";
-
-/**
- * Create mock cursor history for testing hover states
- */
-export function createMockCursorHistory(
-  frames: number,
-  position: { x: number; y: number },
-  clicking: number = 0,
-): CursorFrame[] {
-  return Array.from({ length: frames }, () => ({
-    x: position.x,
-    y: position.y,
-    clicking,
-  }));
-}
-
-/**
- * Create mock cursor track for testing
- */
-export function createMockCursorTrack(
-  clickFrames: number[] = [],
-): AnimationTrack {
-  return {
-    id: "cursor",
-    label: "Cursor",
-    startFrame: 0,
-    endFrame: 300,
-    easing: "linear",
-    animatedProps: [
-      {
-        property: "x",
-        from: "0",
-        to: "0",
-        unit: "px",
-        keyframes: [],
-      },
-      {
-        property: "y",
-        from: "0",
-        to: "0",
-        unit: "px",
-        keyframes: [],
-      },
-      {
-        property: "isClicking",
-        from: "0",
-        to: "0",
-        unit: "",
-        keyframes: clickFrames.flatMap((frame) => [
-          { frame, value: "1", easing: "linear" },
-          { frame: frame + 2, value: "0", easing: "linear" },
-        ]),
-      },
-    ],
-  };
-}
-
-/**
- * Test if hover state is detected correctly
- */
-export function testHoverDetection(
-  cursorHistory: CursorFrame[],
-  zone: { x: number; y: number; width: number; height: number },
-  expectedProgress: number,
-  tolerance: number = 0.01,
-): { passed: boolean; actual: number; expected: number } {
-  let hoverFrames = 0;
-  const cursorSize = 32;
-  const padding = 8;
-
-  cursorHistory.forEach(({ x, y }) => {
-    const wasHovering =
-      x + cursorSize > zone.x - padding &&
-      x < zone.x + zone.width + padding &&
-      y + cursorSize > zone.y - padding &&
-      y < zone.y + zone.height + padding;
-
-    if (wasHovering) hoverFrames++;
-  });
-
-  const actualProgress = hoverFrames / cursorHistory.length;
-  const passed = Math.abs(actualProgress - expectedProgress) <= tolerance;
-
-  return {
-    passed,
-    actual: actualProgress,
-    expected: expectedProgress,
-  };
-}
-
-/**
- * Test animation property interpolation
- */
-export function testPropertyInterpolation(
-  property: AnimatedPropertyConfig,
-  testCases: Array<{ progress: number; expected: number | string }>,
-): {
-  passed: boolean;
-  failures: Array<{ progress: number; actual: any; expected: any }>;
-} {
-  const failures: Array<{ progress: number; actual: any; expected: any }> = [];
-
-  testCases.forEach(({ progress, expected }) => {
-    const actual = getAnimationValue(property, progress);
-
-    // Handle numeric comparison with tolerance
-    if (typeof expected === "number" && typeof actual === "number") {
-      if (Math.abs(actual - expected) > 0.01) {
-        failures.push({ progress, actual, expected });
-      }
-    } else if (actual !== expected) {
-      failures.push({ progress, actual, expected });
-    }
-  });
-
-  return {
-    passed: failures.length === 0,
-    failures,
-  };
-}
-
-/**
- * Test animation configuration validity
- */
-export function testAnimationValidity(animation: ElementAnimation): {
-  passed: boolean;
-  errors: string[];
-} {
-  const result = validateAnimation(animation);
-  return { passed: result.valid, errors: result.errors };
-}
-
-/**
- * Create a test suite for an element's animations
- */
-export function createAnimationTestSuite(
-  elementType: string,
-  hoverAnimation?: ElementAnimation,
-  clickAnimation?: ElementAnimation,
-) {
-  return {
-    /**
-     * Test hover animation properties
-     */
-    testHoverAnimation() {
-      if (!hoverAnimation) {
-        console.warn(`No hover animation for ${elementType}`);
-        return { passed: false, reason: "No hover animation defined" };
-      }
-
-      const validity = validateAnimation(hoverAnimation);
-      if (!validity.valid) {
-        return {
-          passed: false,
-          reason: "Invalid animation",
-          errors: validity.errors,
-        };
-      }
-
-      // Test that hover animation has reasonable duration (3-15 frames)
-      if (hoverAnimation.duration < 3 || hoverAnimation.duration > 15) {
-        return {
-          passed: false,
-          reason: `Hover duration ${hoverAnimation.duration} outside recommended range (3-15 frames)`,
-        };
-      }
-
-      return { passed: true };
-    },
-
-    /**
-     * Test click animation properties
-     */
-    testClickAnimation() {
-      if (!clickAnimation) {
-        console.warn(`No click animation for ${elementType}`);
-        return { passed: false, reason: "No click animation defined" };
-      }
-
-      const validity = validateAnimation(clickAnimation);
-      if (!validity.valid) {
-        return {
-          passed: false,
-          reason: "Invalid animation",
-          errors: validity.errors,
-        };
-      }
-
-      // Test that click animation has reasonable duration (5-20 frames)
-      if (clickAnimation.duration < 5 || clickAnimation.duration > 20) {
-        return {
-          passed: false,
-          reason: `Click duration ${clickAnimation.duration} outside recommended range (5-20 frames)`,
-        };
-      }
-
-      return { passed: true };
-    },
-
-    /**
-     * Test all property keyframes
-     */
-    testKeyframes() {
-      const results: Record<string, any> = {};
-
-      if (hoverAnimation) {
-        hoverAnimation.properties.forEach((prop) => {
-          results[`hover-${prop.property}`] = {
-            keyframeCount: prop.keyframes.length,
-            hasStart: prop.keyframes.some((kf) => kf.progress === 0),
-            hasEnd: prop.keyframes.some((kf) => kf.progress === 1),
-          };
-        });
-      }
-
-      if (clickAnimation) {
-        clickAnimation.properties.forEach((prop) => {
-          results[`click-${prop.property}`] = {
-            keyframeCount: prop.keyframes.length,
-            hasStart: prop.keyframes.some((kf) => kf.progress === 0),
-            hasEnd: prop.keyframes.some((kf) => kf.progress === 1),
-          };
-        });
-      }
-
-      return results;
-    },
-
-    /**
-     * Run all tests
-     */
-    runAll() {
-      const results = {
-        hover: this.testHoverAnimation(),
-        click: this.testClickAnimation(),
-        keyframes: this.testKeyframes(),
-      };
-
-      const passed = results.hover.passed && results.click.passed;
-
-      return {
-        passed,
-        results,
-        elementType,
-      };
-    },
-  };
-}
-
-/**
- * Mock getAnimationsForElement function for testing
- */
-export function createMockGetAnimations(
-  animations: Record<string, ElementAnimation[]>,
-) {
-  return (compositionId: string, elementType: string): ElementAnimation[] => {
-    const key = `${compositionId}-${elementType}`;
-    return animations[key] || [];
-  };
-}
-
-/**
- * Snapshot test for animated styles at different progress values
- */
-export function snapshotAnimatedStyles(
-  animation: ElementAnimation,
-  progressSteps: number[] = [0, 0.25, 0.5, 0.75, 1],
-): Record<number, Record<string, any>> {
-  const snapshots: Record<number, Record<string, any>> = {};
-
-  progressSteps.forEach((progress) => {
-    const styles: Record<string, any> = {};
-
-    animation.properties.forEach((prop) => {
-      styles[prop.property] = getAnimationValue(prop, progress);
-    });
-
-    snapshots[progress] = styles;
-  });
-
-  return snapshots;
-}
-
-/**
- * Performance test - measure animation calculation time
- */
-export function benchmarkAnimation(
-  animation: ElementAnimation,
-  iterations: number = 1000,
-): { averageMs: number; minMs: number; maxMs: number } {
-  const times: number[] = [];
-
-  for (let i = 0; i < iterations; i++) {
-    const progress = Math.random();
-    const start = performance.now();
-
-    animation.properties.forEach((prop) => {
-      getAnimationValue(prop, progress);
-    });
-
-    const end = performance.now();
-    times.push(end - start);
-  }
-
-  return {
-    averageMs: times.reduce((a, b) => a + b) / times.length,
-    minMs: Math.min(...times),
-    maxMs: Math.max(...times),
-  };
-}
-
-/**
- * Visual regression helper - generate test frames
- */
-export function generateTestFrames(
-  totalFrames: number,
-  hoverStart: number,
-  hoverEnd: number,
-  clickFrame: number,
-): {
-  frame: number;
-  hoverProgress: number;
-  clickProgress: number;
-}[] {
-  const frames: any[] = [];
-
-  for (let frame = 0; frame < totalFrames; frame++) {
-    let hoverProgress = 0;
-    if (frame >= hoverStart && frame <= hoverEnd) {
-      hoverProgress = (frame - hoverStart) / (hoverEnd - hoverStart);
-    } else if (frame > hoverEnd) {
-      hoverProgress = 1 - (frame - hoverEnd) / 10;
-      hoverProgress = Math.max(0, hoverProgress);
-    }
-
-    let clickProgress = 0;
-    const clickDuration = 12;
-    if (frame >= clickFrame && frame < clickFrame + clickDuration * 2) {
-      const elapsed = frame - clickFrame;
-      const raw = elapsed / clickDuration;
-      clickProgress = raw <= 1 ? raw : 2 - raw;
-    }
-
-    frames.push({
-      frame,
-      hoverProgress: Math.max(0, Math.min(1, hoverProgress)),
-      clickProgress: Math.max(0, Math.min(1, clickProgress)),
-    });
-  }
-
-  return frames;
-}

package/corpus/templates/videos/app/remotion/trackAnimation.ts

@@ -1,179 +0,0 @@
-import { spring, interpolate } from "remotion";
-
-import type { AnimationTrack, EasingKey } from "@/types";
-
-import { getEasingFunction } from "./easingFunctions";
-
-type SpringConfig = {
-  damping?: number;
-  stiffness?: number;
-  mass?: number;
-  overshootClamping?: boolean;
-};
-
-/**
- * Maps an EasingKey to a Remotion spring config.
- * "spring" → bouncy (low damping), others → tightly tuned for each curve shape.
- */
-export function easingToSpringConfig(easing: EasingKey): SpringConfig {
-  switch (easing) {
-    case "spring":
-      return { damping: 25, stiffness: 150, mass: 0.5 };
-    case "ease-out":
-      return { damping: 200, stiffness: 400 };
-    case "ease-in":
-      return { damping: 200, stiffness: 20 };
-    case "ease-in-out":
-      return { damping: 200, stiffness: 80 };
-    case "linear":
-      return { damping: 200, stiffness: 200, overshootClamping: true };
-    default:
-      return { damping: 200 };
-  }
-}
-
-/**
- * Returns a 0 → 1 progress value driven by an AnimationTrack.
- *
- * • "spring" easing  → Remotion spring(), starts at track.startFrame.
- * • All other easings → GSAP-style easing curves over [startFrame, endFrame].
- */
-export function trackProgress(
-  frame: number,
-  fps: number,
-  track: AnimationTrack,
-): number {
-  const { startFrame, endFrame, easing } = track;
-
-  if (easing === "spring") {
-    return spring({
-      frame,
-      fps,
-      delay: startFrame,
-      config: easingToSpringConfig(easing),
-    });
-  }
-
-  const elapsed = Math.max(0, frame - startFrame);
-  const duration = Math.max(1, endFrame - startFrame);
-  const t = Math.min(1, elapsed / duration);
-
-  // Use new easing functions
-  const easingFn = getEasingFunction(easing);
-  return easingFn(t);
-}
-
-/**
- * Looks up a track by id from an array, returning a fallback if not found.
- */
-export function findTrack(
-  tracks: AnimationTrack[],
-  id: string,
-  fallback: AnimationTrack,
-): AnimationTrack {
-  return tracks.find((t) => t.id === id) ?? fallback;
-}
-
-/**
- * Reads the from/to numeric values for a CSS property from a track's
- * animatedProps list and returns the interpolated value at the given progress.
- *
- * Falls back to defaultFrom/defaultTo if the property isn't defined on the track.
- */
-export function getPropValue(
-  progress: number,
-  track: AnimationTrack,
-  property: string,
-  defaultFrom: number,
-  defaultTo: number,
-): number {
-  const prop = track.animatedProps?.find((p) => p.property === property);
-  const fromNum = prop ? parseFloat(prop.from) : NaN;
-  const toNum = prop ? parseFloat(prop.to) : NaN;
-  const from = Number.isFinite(fromNum) ? fromNum : defaultFrom;
-  const to = Number.isFinite(toNum) ? toNum : defaultTo;
-  return interpolate(progress, [0, 1], [from, to]);
-}
-
-/**
- * Reads a CSS property value from a track using keyframe-based interpolation.
- * If the property has keyframes, interpolates between nearest keyframes.
- * Otherwise, falls back to from/to behavior using track progress.
- *
- * Keyframe behavior:
- * - Before first keyframe → hold first value
- * - After last keyframe → hold last value
- * - Between keyframes → linear interpolation
- * - No keyframes → use from/to with trackProgress
- */
-export function getPropValueKeyframed(
-  frame: number,
-  fps: number,
-  track: AnimationTrack | undefined,
-  property: string,
-  defaultValue: number,
-): number {
-  const prop = track?.animatedProps?.find((p) => p.property === property);
-
-  // No property defined → use default
-  if (!prop) return defaultValue;
-
-  // Has keyframes → interpolate between nearest keyframes
-  if (prop.keyframes && prop.keyframes.length > 0) {
-    const sorted = [...prop.keyframes].sort((a, b) => a.frame - b.frame);
-
-    // Before first keyframe → hold first value
-    if (frame <= sorted[0].frame) {
-      const val = parseFloat(sorted[0].value);
-      return Number.isFinite(val) ? val : defaultValue;
-    }
-
-    // After last keyframe → hold last value
-    if (frame >= sorted[sorted.length - 1].frame) {
-      const val = parseFloat(sorted[sorted.length - 1].value);
-      return Number.isFinite(val) ? val : defaultValue;
-    }
-
-    // Between keyframes → interpolation with easing
-    for (let i = 0; i < sorted.length - 1; i++) {
-      const curr = sorted[i];
-      const next = sorted[i + 1];
-
-      if (frame >= curr.frame && frame <= next.frame) {
-        const from = parseFloat(curr.value);
-        const to = parseFloat(next.value);
-
-        // Safety check: if either value is invalid, use defaults
-        if (!Number.isFinite(from) || !Number.isFinite(to)) {
-          return defaultValue;
-        }
-
-        const frameDiff = next.frame - curr.frame;
-        // Prevent division by zero
-        if (frameDiff === 0) return from;
-
-        const t = (frame - curr.frame) / frameDiff;
-
-        // Apply easing: read from destination keyframe (the one we're arriving at)
-        // This way, setting easing on a keyframe affects the motion arriving at it
-        const easing = next.easing ?? prop.easing ?? "linear";
-        const easingFn = getEasingFunction(easing);
-        const easedT = easingFn(t);
-
-        return from + (to - from) * easedT;
-      }
-    }
-  }
-
-  // Fall back to from/to (existing behavior)
-  const from = parseFloat(prop.from);
-  const to = parseFloat(prop.to);
-
-  // Safety check for from/to values
-  if (!Number.isFinite(from) || !Number.isFinite(to)) {
-    return defaultValue;
-  }
-
-  const progress = trackProgress(frame, fps, track!);
-  return interpolate(progress, [0, 1], [from, to]);
-}

package/corpus/templates/videos/app/remotion/trackHelpers.ts

@@ -1,110 +0,0 @@
-/**
- * Track Creation Helpers
- *
- * Standalone helpers for creating standard camera and cursor tracks.
- * Kept separate from registry.ts to avoid circular imports:
- *   registry.ts → compositions → createInteractiveComposition → trackHelpers (no cycle!)
- *
- * CRITICAL CURSOR PATTERN:
- *   Cursor "type" must always be the string "default" (never "0" or "1").
- *   The autoCursorType system automatically overrides it to "pointer" on hover.
- */
-
-import type { AnimationTrack, EasingKey } from "@/types";
-
-/**
- * Create a standard camera track with default values (no movement).
- */
-export function createCameraTrack(durationInFrames: number): AnimationTrack {
-  return {
-    id: "camera",
-    label: "Camera",
-    startFrame: 0,
-    endFrame: durationInFrames,
-    easing: "linear",
-    animatedProps: [
-      { property: "translateX", from: "0", to: "0", unit: "px", keyframes: [] },
-      { property: "translateY", from: "0", to: "0", unit: "px", keyframes: [] },
-      { property: "scale", from: "1", to: "1", unit: "", keyframes: [] },
-      { property: "rotateX", from: "0", to: "0", unit: "deg", keyframes: [] },
-      { property: "rotateY", from: "0", to: "0", unit: "deg", keyframes: [] },
-      {
-        property: "perspective",
-        from: "800",
-        to: "800",
-        unit: "px",
-        keyframes: [],
-      },
-    ],
-  };
-}
-
-/**
- * Create a standard cursor track with the correct configuration.
- *
- * CRITICAL: The "type" property must be "default" (not "0" or "1").
- * Never add keyframes to the type property — autoCursorType handles hover changes.
- */
-export function createCursorTrack(
-  durationInFrames: number,
-  options?: {
-    startX?: number;
-    startY?: number;
-    startOpacity?: number;
-    easing?: EasingKey;
-  },
-): AnimationTrack {
-  const {
-    startX = 960,
-    startY = 540,
-    startOpacity = 1,
-    easing = "expo.inOut",
-  } = options || {};
-
-  return {
-    id: "cursor",
-    label: "Cursor",
-    startFrame: 0,
-    endFrame: durationInFrames,
-    easing,
-    animatedProps: [
-      {
-        property: "x",
-        from: String(startX),
-        to: String(startX),
-        unit: "px",
-        keyframes: [],
-      },
-      {
-        property: "y",
-        from: String(startY),
-        to: String(startY),
-        unit: "px",
-        keyframes: [],
-      },
-      {
-        property: "opacity",
-        from: String(startOpacity),
-        to: String(startOpacity),
-        unit: "",
-        keyframes: [],
-      },
-      { property: "scale", from: "1", to: "1", unit: "", keyframes: [] },
-      // CRITICAL: Must be "default" — autoCursorType overrides to "pointer" on hover
-      { property: "type", from: "default", to: "default", unit: "" },
-      { property: "isClicking", from: "0", to: "0", unit: "", keyframes: [] },
-    ],
-  };
-}
-
-/**
- * Create standard camera + cursor tracks for a new composition.
- */
-export function createStandardTracks(
-  durationInFrames: number,
-): AnimationTrack[] {
-  return [
-    createCameraTrack(durationInFrames),
-    createCursorTrack(durationInFrames),
-  ];
-}