@agent-native/core 0.85.7 → 0.86.0

package/corpus/templates/videos/app/types.ts

@@ -1,200 +0,0 @@
-export type EasingKey =
-  | "linear"
-  | "ease-in"
-  | "ease-out"
-  | "ease-in-out"
-  | "power1.in"
-  | "power1.out"
-  | "power1.inOut"
-  | "power2.in"
-  | "power2.out"
-  | "power2.inOut"
-  | "power3.in"
-  | "power3.out"
-  | "power3.inOut"
-  | "power4.in"
-  | "power4.out"
-  | "power4.inOut"
-  | "back.in"
-  | "back.out"
-  | "back.inOut"
-  | "bounce.in"
-  | "bounce.out"
-  | "bounce.inOut"
-  | "circ.in"
-  | "circ.out"
-  | "circ.inOut"
-  | "elastic.in"
-  | "elastic.out"
-  | "elastic.inOut"
-  | "expo.in"
-  | "expo.out"
-  | "expo.inOut"
-  | "sine.in"
-  | "sine.out"
-  | "sine.inOut"
-  | "spring";
-
-// ─── Animated property ────────────────────────────────────────────────────────
-
-export interface AnimatedProp {
-  /** CSS property name, e.g. "translateY", "opacity", or any custom string */
-  property: string;
-  /** Initial value (numeric as string, e.g. "60") OR a CSS snippet for custom props */
-  from: string;
-  /** Final value */
-  to: string;
-  /** Unit appended when rendering, e.g. "px", "deg", "" */
-  unit: string;
-  /** When true, 'property' is user-defined and from/to are raw CSS value strings */
-  isCustom?: boolean;
-  /**
-   * Plain-English explanation of what this property does and how its
-   * parameters work. Shown prominently above the code block.
-   */
-  description?: string;
-  /**
-   * Source code snippet showing exactly how this value is computed.
-   * Read-only — shown for transparency. Edit the source file to change behavior.
-   */
-  codeSnippet?: string;
-  /**
-   * When true, this property is driven entirely by code (no editable from/to).
-   * The description + code viewer are shown instead of numeric inputs.
-   */
-  programmatic?: boolean;
-  /**
-   * For programmatic animations: exposes internal values as user-adjustable parameters.
-   * These appear as number inputs in the UI, giving users control over hardcoded values
-   * without needing to edit the source code.
-   */
-  parameters?: Array<{
-    name: string; // Key used to access value (e.g., "avgCharWidth")
-    label: string; // Display label in UI (e.g., "Character Width")
-    default: number; // Default value
-    min?: number; // Minimum value (for validation/slider)
-    max?: number; // Maximum value (for validation/slider)
-    step?: number; // Step increment (e.g., 0.05)
-  }>;
-  /**
-   * Stores user-adjusted parameter values for programmatic animations.
-   * Keys match the `name` field in parameters array.
-   */
-  parameterValues?: Record<string, number>;
-  /**
-   * Optional keyframe array for multi-point animations.
-   * When present, keyframes take precedence from/to values.
-   * Each keyframe specifies an absolute frame number and value.
-   */
-  keyframes?: Array<{
-    frame: number; // Absolute frame number
-    value: string; // Numeric value as string (e.g., "1.5")
-    easing?: EasingKey; // Motion curve for this keyframe segment
-  }>;
-  /** Motion curve for keyframed properties (applies to all segments) */
-  easing?: EasingKey;
-}
-
-export interface CommonPropTemplate {
-  label: string;
-  property: string;
-  unit: string;
-  defaultFrom: string;
-  defaultTo: string;
-  isCustom?: boolean;
-}
-
-export interface AnimationPropertyShorthand {
-  property: string;
-  from: number | string;
-  to: number | string;
-  unit?: string;
-  min?: number;
-  max?: number;
-}
-
-export interface AnimationShorthand {
-  duration: number;
-  easing?: EasingKey | string;
-  properties: AnimationPropertyShorthand[];
-}
-
-/** Preset list shown in the "Add Property" picker inside TrackPropertiesPanel */
-export const COMMON_PROP_TEMPLATES: CommonPropTemplate[] = [
-  {
-    label: "Translate Y",
-    property: "translateY",
-    unit: "px",
-    defaultFrom: "40",
-    defaultTo: "0",
-  },
-  {
-    label: "Translate X",
-    property: "translateX",
-    unit: "px",
-    defaultFrom: "-40",
-    defaultTo: "0",
-  },
-  {
-    label: "Opacity",
-    property: "opacity",
-    unit: "",
-    defaultFrom: "0",
-    defaultTo: "1",
-  },
-  {
-    label: "Scale",
-    property: "scale",
-    unit: "",
-    defaultFrom: "0",
-    defaultTo: "1",
-  },
-  {
-    label: "Rotate",
-    property: "rotate",
-    unit: "deg",
-    defaultFrom: "-15",
-    defaultTo: "0",
-  },
-  {
-    label: "Width",
-    property: "width",
-    unit: "px",
-    defaultFrom: "0",
-    defaultTo: "200",
-  },
-  {
-    label: "Blur",
-    property: "blur",
-    unit: "px",
-    defaultFrom: "8",
-    defaultTo: "0",
-  },
-  {
-    label: "Radius (%)",
-    property: "radius",
-    unit: "%",
-    defaultFrom: "0",
-    defaultTo: "35",
-  },
-  {
-    label: "Custom CSS",
-    property: "custom",
-    unit: "",
-    defaultFrom: "",
-    defaultTo: "",
-    isCustom: true,
-  },
-];
-
-// ─── Animation track ──────────────────────────────────────────────────────────
-
-export interface AnimationTrack {
-  id: string;
-  label: string;
-  startFrame: number;
-  endFrame: number;
-  easing: EasingKey;
-  /** CSS properties this track animates, with their from → to values */
-  animatedProps?: AnimatedProp[];
-}

package/corpus/templates/videos/app/utils/compositionHelpers.ts

@@ -1,445 +0,0 @@
-/**
- * Composition Creation Helpers
- *
- * Utilities for programmatically creating Remotion compositions
- * with all features: camera, cursor, interactions, multi-keyframe selection
- */
-
-import type { AnimationTrack, AnimatedProp, EasingKey } from "@/types";
-
-/**
- * Create a camera track with default values
- * Camera tracks should always span the full composition duration
- */
-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 cursor track with default values
- * Default position is centered for 1920x1080 (Wide format)
- */
-export function createCursorTrack(
-  durationInFrames: number,
-  options: {
-    centerX?: number;
-    centerY?: number;
-    easing?: EasingKey;
-  } = {},
-): AnimationTrack {
-  const { centerX = 960, centerY = 540, easing = "expo.inOut" } = options;
-
-  return {
-    id: "cursor",
-    label: "Cursor",
-    startFrame: 0,
-    endFrame: durationInFrames,
-    easing,
-    animatedProps: [
-      {
-        property: "x",
-        from: String(centerX),
-        to: String(centerX),
-        unit: "px",
-        keyframes: [],
-      },
-      {
-        property: "y",
-        from: String(centerY),
-        to: String(centerY),
-        unit: "px",
-        keyframes: [],
-      },
-      { property: "opacity", from: "1", to: "1", unit: "", keyframes: [] },
-      { property: "scale", from: "1", to: "1", unit: "", keyframes: [] },
-      { property: "type", from: "default", to: "default", unit: "" },
-      { property: "isClicking", from: "0", to: "0", unit: "" },
-    ],
-  };
-}
-
-/**
- * Create a simple animation track
- */
-export function createAnimationTrack(
-  id: string,
-  label: string,
-  startFrame: number,
-  endFrame: number,
-  properties: Array<{
-    property: string;
-    from: string;
-    to: string;
-    unit: string;
-  }>,
-  easing: EasingKey = "spring",
-): AnimationTrack {
-  return {
-    id,
-    label,
-    startFrame,
-    endFrame,
-    easing,
-    animatedProps: properties.map((prop) => ({
-      ...prop,
-      keyframes: [],
-    })),
-  };
-}
-
-/**
- * Create a fade-in animation track
- */
-export function createFadeInTrack(
-  id: string,
-  label: string,
-  startFrame: number,
-  duration: number = 30,
-): AnimationTrack {
-  return createAnimationTrack(
-    id,
-    label,
-    startFrame,
-    startFrame + duration,
-    [{ property: "opacity", from: "0", to: "1", unit: "" }],
-    "spring",
-  );
-}
-
-/**
- * Create a slide-in animation track
- */
-export function createSlideInTrack(
-  id: string,
-  label: string,
-  startFrame: number,
-  duration: number = 30,
-  direction: "left" | "right" | "up" | "down" = "left",
-): AnimationTrack {
-  const properties: Array<{
-    property: string;
-    from: string;
-    to: string;
-    unit: string;
-  }> = [{ property: "opacity", from: "0", to: "1", unit: "" }];
-
-  switch (direction) {
-    case "left":
-      properties.push({
-        property: "translateX",
-        from: "-80",
-        to: "0",
-        unit: "px",
-      });
-      break;
-    case "right":
-      properties.push({
-        property: "translateX",
-        from: "80",
-        to: "0",
-        unit: "px",
-      });
-      break;
-    case "up":
-      properties.push({
-        property: "translateY",
-        from: "80",
-        to: "0",
-        unit: "px",
-      });
-      break;
-    case "down":
-      properties.push({
-        property: "translateY",
-        from: "-80",
-        to: "0",
-        unit: "px",
-      });
-      break;
-  }
-
-  return createAnimationTrack(
-    id,
-    label,
-    startFrame,
-    startFrame + duration,
-    properties,
-    "spring",
-  );
-}
-
-/**
- * Create a scale animation track
- */
-export function createScaleTrack(
-  id: string,
-  label: string,
-  startFrame: number,
-  duration: number = 30,
-  fromScale: number = 0.5,
-  toScale: number = 1,
-): AnimationTrack {
-  return createAnimationTrack(
-    id,
-    label,
-    startFrame,
-    startFrame + duration,
-    [
-      {
-        property: "scale",
-        from: String(fromScale),
-        to: String(toScale),
-        unit: "",
-      },
-      { property: "opacity", from: "0", to: "1", unit: "" },
-    ],
-    "spring",
-  );
-}
-
-/**
- * Add a keyframe to an animated property
- */
-export function addKeyframe(
-  prop: AnimatedProp,
-  frame: number,
-  value: string,
-  easing?: EasingKey,
-): AnimatedProp {
-  const keyframes = prop.keyframes || [];
-
-  // Check if keyframe already exists at this frame
-  const existingIndex = keyframes.findIndex((kf) => kf.frame === frame);
-
-  if (existingIndex >= 0) {
-    // Update existing keyframe
-    keyframes[existingIndex] = { frame, value, ...(easing && { easing }) };
-  } else {
-    // Add new keyframe and sort
-    keyframes.push({ frame, value, ...(easing && { easing }) });
-    keyframes.sort((a, b) => a.frame - b.frame);
-  }
-
-  return {
-    ...prop,
-    keyframes,
-  };
-}
-
-/**
- * Add multiple keyframes at once
- */
-export function addKeyframes(
-  prop: AnimatedProp,
-  keyframes: Array<{ frame: number; value: string; easing?: EasingKey }>,
-): AnimatedProp {
-  let result = prop;
-  for (const kf of keyframes) {
-    result = addKeyframe(result, kf.frame, kf.value, kf.easing);
-  }
-  return result;
-}
-
-/**
- * Create cursor path keyframes from an array of positions
- */
-export function createCursorPath(
-  frames: number[],
-  positions: Array<{ x: number; y: number }>,
-  easing: string = "expo.inOut",
-): Array<{
-  property: string;
-  keyframes: Array<{ frame: number; value: string; easing?: string }>;
-}> {
-  const xKeyframes = positions.map((pos, i) => ({
-    frame: frames[i],
-    value: String(pos.x),
-    easing,
-  }));
-
-  const yKeyframes = positions.map((pos, i) => ({
-    frame: frames[i],
-    value: String(pos.y),
-    easing,
-  }));
-
-  return [
-    { property: "x", keyframes: xKeyframes },
-    { property: "y", keyframes: yKeyframes },
-  ];
-}
-
-/**
- * Create click event keyframes
- * Each click is 3 frames: click on → click off
- */
-export function createClickEvents(
-  clickFrames: number[],
-): Array<{ frame: number; value: string }> {
-  const keyframes: Array<{ frame: number; value: string }> = [];
-
-  for (const frame of clickFrames) {
-    keyframes.push(
-      { frame, value: "1" }, // Click starts
-      { frame: frame + 3, value: "0" }, // Click ends 3 frames later
-    );
-  }
-
-  keyframes.sort((a, b) => a.frame - b.frame);
-  return keyframes;
-}
-
-/**
- * Validate that a composition has all required tracks
- */
-export function validateComposition(tracks: AnimationTrack[]): {
-  valid: boolean;
-  errors: string[];
-  warnings: string[];
-} {
-  const errors: string[] = [];
-  const warnings: string[] = [];
-
-  // Check for camera track
-  const cameraTrack = tracks.find((t) => t.id === "camera");
-  if (!cameraTrack) {
-    errors.push("Missing required camera track (id: 'camera')");
-  } else {
-    // Validate camera properties
-    const requiredProps = [
-      "translateX",
-      "translateY",
-      "scale",
-      "rotateX",
-      "rotateY",
-      "perspective",
-    ];
-    const cameraProps = cameraTrack.animatedProps?.map((p) => p.property) || [];
-    const missing = requiredProps.filter((p) => !cameraProps.includes(p));
-    if (missing.length > 0) {
-      errors.push(`Camera track missing properties: ${missing.join(", ")}`);
-    }
-  }
-
-  // Check for cursor track (warning, not error - some comps might not need it)
-  const cursorTrack = tracks.find((t) => t.id === "cursor");
-  if (!cursorTrack) {
-    warnings.push("No cursor track found - cursor interactions will not work");
-  } else {
-    // Validate cursor properties
-    const requiredProps = ["x", "y", "opacity", "scale", "type", "isClicking"];
-    const cursorProps = cursorTrack.animatedProps?.map((p) => p.property) || [];
-    const missing = requiredProps.filter((p) => !cursorProps.includes(p));
-    if (missing.length > 0) {
-      warnings.push(`Cursor track missing properties: ${missing.join(", ")}`);
-    }
-  }
-
-  return {
-    valid: errors.length === 0,
-    errors,
-    warnings,
-  };
-}
-
-/**
- * Get composition dimensions based on format preset
- */
-export function getCompositionDimensions(
-  format: "square" | "wide" | "vertical",
-): {
-  width: number;
-  height: number;
-} {
-  switch (format) {
-    case "square":
-      return { width: 1080, height: 1080 };
-    case "wide":
-      return { width: 1920, height: 1080 };
-    case "vertical":
-      return { width: 1080, height: 1920 };
-    default:
-      return { width: 1920, height: 1080 }; // Default to wide
-  }
-}
-
-/**
- * Calculate center position for cursor based on composition size
- */
-export function getCursorCenter(
-  width: number,
-  height: number,
-): { x: number; y: number } {
-  return {
-    x: width / 2,
-    y: height / 2,
-  };
-}
-
-/**
- * Convert seconds to frames
- */
-export function secondsToFrames(seconds: number, fps: number = 30): number {
-  return Math.round(seconds * fps);
-}
-
-/**
- * Convert frames to seconds
- */
-export function framesToSeconds(frames: number, fps: number = 30): number {
-  return frames / fps;
-}
-
-/**
- * Create a programmatic animation property
- */
-export function createProgrammaticProp(
-  property: string,
-  description: string,
-  codeSnippet: string,
-  parameters: Array<{
-    name: string;
-    label: string;
-    default: number;
-    min: number;
-    max: number;
-    step: number;
-  }> = [],
-): AnimatedProp {
-  const parameterValues: Record<string, number> = {};
-  parameters.forEach((p) => {
-    parameterValues[p.name] = p.default;
-  });
-
-  return {
-    property,
-    from: "",
-    to: "",
-    unit: "",
-    programmatic: true,
-    description,
-    parameters,
-    parameterValues,
-    codeSnippet,
-  };
-}

package/corpus/templates/videos/app/utils/debug.ts

@@ -1,63 +0,0 @@
-const IS_DEV = import.meta.env.DEV;
-
-export const debug = {
-  log: (...args: unknown[]) => {
-    if (IS_DEV) {
-      console.log("[Videos]", ...args);
-    }
-  },
-
-  warn: (...args: unknown[]) => {
-    if (IS_DEV) {
-      console.warn("[Videos]", ...args);
-    }
-  },
-
-  error: (...args: unknown[]) => {
-    console.error("[Videos]", ...args);
-  },
-
-  verbose: (...args: unknown[]) => {
-    if (IS_DEV && import.meta.env.VITE_DEBUG_VERBOSE === "true") {
-      console.log("[Videos:Verbose]", ...args);
-    }
-  },
-
-  frame: (...args: unknown[]) => {
-    if (IS_DEV && import.meta.env.VITE_DEBUG_FRAMES === "true") {
-      console.log("[Videos:Frame]", ...args);
-    }
-  },
-
-  time: (label: string) => {
-    if (IS_DEV) {
-      console.time(`[Videos] ${label}`);
-    }
-  },
-
-  timeEnd: (label: string) => {
-    if (IS_DEV) {
-      console.timeEnd(`[Videos] ${label}`);
-    }
-  },
-
-  group: (label: string) => {
-    if (IS_DEV) {
-      console.group(`[Videos] ${label}`);
-    }
-  },
-
-  groupEnd: () => {
-    if (IS_DEV) {
-      console.groupEnd();
-    }
-  },
-};
-
-export function assert(condition: boolean, message: string): asserts condition {
-  if (!condition) {
-    const error = new Error(`Assertion failed: ${message}`);
-    debug.error(error);
-    throw error;
-  }
-}