@agent-native/core 0.85.7 → 0.86.0

package/corpus/templates/videos/app/remotion/library-components/SecondaryButton.tsx

@@ -1,167 +0,0 @@
-/**
- * ═══════════════════════════════════════════════════════════════════════════
- * SECONDARY BUTTON ATOM
- * ═══════════════════════════════════════════════════════════════════════════
- *
- * A secondary/outline button with optional icon.
- * Demonstrates hover brightness animation.
- *
- * Features:
- * - Optional icon
- * - Outline style with border
- * - Hover brightness effect
- * - Click animation
- *
- * ═══════════════════════════════════════════════════════════════════════════
- */
-
-import { AbsoluteFill, useVideoConfig } from "remotion";
-
-import { AnimatedElement } from "@/remotion/components/AnimatedElement";
-import { createInteractiveComposition } from "@/remotion/hooks/createInteractiveComposition";
-import { useInteractiveComponent } from "@/remotion/hooks/useInteractiveComponent";
-import { createCameraTrack, createCursorTrack } from "@/remotion/trackHelpers";
-import type { AnimationTrack, AnimationShorthand } from "@/types";
-
-// Custom brightness hover animation
-const brightnessHover = (amount: number): AnimationShorthand => ({
-  duration: 6,
-  easing: "expo.out",
-  properties: [{ property: "brightness", from: 1, to: 1 + amount, unit: "" }],
-});
-
-export type SecondaryButtonProps = {
-  label?: string;
-  icon?: string;
-  x?: number;
-  y?: number;
-  backgroundColor?: string;
-  borderColor?: string;
-  textColor?: string;
-  tracks?: AnimationTrack[];
-};
-
-const FALLBACK_TRACKS: AnimationTrack[] = (() => {
-  const tracks = [
-    createCameraTrack(150),
-    createCursorTrack(150, { startX: 200, startY: 200 }),
-  ];
-  const cursor = tracks[1];
-
-  const cx = String(1920 / 2 - 16);
-  const cy = String(1080 / 2 - 16);
-
-  cursor.animatedProps!.find((p) => p.property === "x")!.keyframes = [
-    { frame: 0, value: "200" },
-    { frame: 15, value: cx },
-    { frame: 90, value: cx },
-    { frame: 120, value: "1720" },
-    { frame: 150, value: "1720" },
-  ];
-  cursor.animatedProps!.find((p) => p.property === "y")!.keyframes = [
-    { frame: 0, value: "200" },
-    { frame: 15, value: cy },
-    { frame: 90, value: cy },
-    { frame: 120, value: "200" },
-    { frame: 150, value: "200" },
-  ];
-  cursor.animatedProps!.find((p) => p.property === "isClicking")!.keyframes = [
-    { frame: 0, value: "0" },
-    { frame: 59, value: "0" },
-    { frame: 60, value: "1" },
-    { frame: 70, value: "0" },
-    { frame: 150, value: "0" },
-  ];
-  cursor.animatedProps!.find((p) => p.property === "opacity")!.keyframes = [
-    { frame: 0, value: "0" },
-    { frame: 5, value: "0" },
-    { frame: 15, value: "1" },
-    { frame: 90, value: "1" },
-    { frame: 100, value: "0" },
-    { frame: 150, value: "0" },
-  ];
-
-  return tracks;
-})();
-
-export const SecondaryButton =
-  createInteractiveComposition<SecondaryButtonProps>({
-    fallbackTracks: FALLBACK_TRACKS,
-
-    render: ({ cursorHistory, registerForCursor }, props) => {
-      const {
-        label = "Share",
-        icon = "🔗",
-        x = 860,
-        y = 524,
-        backgroundColor = "#2a2a2a",
-        borderColor = "#393939",
-        textColor = "#ffffff",
-      } = props;
-      const { width, height } = useVideoConfig();
-
-      const buttonWidth = 90;
-      const buttonHeight = 32;
-      const buttonX = typeof x === "number" ? x : (width - buttonWidth) / 2;
-      const buttonY = typeof y === "number" ? y : (height - buttonHeight) / 2;
-
-      const button = useInteractiveComponent({
-        id: "secondary-button",
-        elementType: "Button",
-        label,
-        compositionId: "secondary-button",
-        zone: {
-          x: buttonX,
-          y: buttonY,
-          width: buttonWidth,
-          height: buttonHeight,
-        },
-        cursorHistory,
-        interactiveElementType: "button",
-        hoverAnimation: brightnessHover(0.2),
-      });
-
-      registerForCursor(button);
-
-      const fontSize = 11;
-      const paddingX = 11;
-      const paddingY = 5;
-
-      return (
-        <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
-          <AnimatedElement
-            interactive={button}
-            as="div"
-            style={{
-              position: "absolute",
-              left: buttonX,
-              top: buttonY,
-              width: buttonWidth,
-              height: buttonHeight,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              gap: icon ? "4px" : "0",
-              paddingLeft: paddingX,
-              paddingRight: paddingX,
-              paddingTop: paddingY,
-              paddingBottom: paddingY,
-              backgroundColor,
-              border: `1px solid ${borderColor}`,
-              borderRadius: 6,
-              color: textColor,
-              fontSize,
-              fontWeight: 500,
-              cursor: "pointer",
-              whiteSpace: "nowrap",
-            }}
-          >
-            {icon && (
-              <span style={{ fontSize: 16, lineHeight: "16px" }}>{icon}</span>
-            )}
-            <span>{label}</span>
-          </AnimatedElement>
-        </AbsoluteFill>
-      );
-    },
-  });

package/corpus/templates/videos/app/remotion/library-components/SectionHeader.tsx

@@ -1,108 +0,0 @@
-/**
- * ═══════════════════════════════════════════════════════════════════════════
- * SECTION HEADER ATOM
- * ═══════════════════════════════════════════════════════════════════════════
- *
- * A section header with icon and uppercase text.
- * Used for consistent section labeling like "ALL CHANGES", "ALL FILES", etc.
- *
- * Features:
- * - Icon image support
- * - Uppercase text styling
- * - Consistent typography
- * - Optional chevron/dropdown indicator
- *
- * ═══════════════════════════════════════════════════════════════════════════
- */
-
-import { AbsoluteFill } from "remotion";
-
-import { createInteractiveComposition } from "@/remotion/hooks/createInteractiveComposition";
-import { createCameraTrack, createCursorTrack } from "@/remotion/trackHelpers";
-import type { AnimationTrack } from "@/types";
-
-export type SectionHeaderProps = {
-  icon?: string;
-  iconWidth?: number;
-  label?: string;
-  chevron?: string;
-  chevronWidth?: number;
-  x?: number;
-  y?: number;
-  tracks?: AnimationTrack[];
-};
-
-const FALLBACK_TRACKS: AnimationTrack[] = (() => {
-  const tracks = [
-    createCameraTrack(150),
-    createCursorTrack(150, { startX: 200, startY: 200 }),
-  ];
-  const cursor = tracks[1];
-
-  cursor.animatedProps!.find((p) => p.property === "opacity")!.keyframes = [
-    { frame: 0, value: "0" },
-    { frame: 150, value: "0" },
-  ];
-
-  return tracks;
-})();
-
-export const SectionHeader = createInteractiveComposition<SectionHeaderProps>({
-  fallbackTracks: FALLBACK_TRACKS,
-
-  render: ({ cursorHistory, registerForCursor }, props) => {
-    const {
-      icon = "https://api.builder.io/api/v1/image/assets/YJIGb4i01jvw0SRdL5Bt/f872b16106ef6bbaea80fcefece2392325659d2c?placeholderIfAbsent=true",
-      iconWidth = 14,
-      label = "ALL CHANGES",
-      chevron,
-      chevronWidth = 12,
-      x = 760,
-      y = 528,
-    } = props;
-
-    return (
-      <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
-        <div
-          style={{
-            position: "absolute",
-            left: x,
-            top: y,
-            display: "flex",
-            alignItems: "center",
-            gap: "4px",
-            fontSize: 11,
-            fontWeight: 600,
-            color: "#a4a4a4",
-            letterSpacing: 0.5,
-            textTransform: "uppercase",
-          }}
-        >
-          <img
-            src={icon}
-            alt=""
-            style={{
-              aspectRatio: 1,
-              objectFit: "contain",
-              objectPosition: "center",
-              width: iconWidth,
-            }}
-          />
-          <span>{label}</span>
-          {chevron && (
-            <img
-              src={chevron}
-              alt=""
-              style={{
-                aspectRatio: 1,
-                objectFit: "contain",
-                objectPosition: "center",
-                width: chevronWidth,
-              }}
-            />
-          )}
-        </div>
-      </AbsoluteFill>
-    );
-  },
-});

package/corpus/templates/videos/app/remotion/library-components/TEMPLATE.tsx

@@ -1,211 +0,0 @@
-/**
- * ═══════════════════════════════════════════════════════════════════════════
- * INTERACTIVE COMPONENT TEMPLATE
- * ═══════════════════════════════════════════════════════════════════════════
- *
- * Copy this file to create a new interactive library component.
- * All the boilerplate is set up correctly for the three-state model:
- *
- *   STANDARD ──[hover in]──▶ HOVER ──[click in]──▶ CLICK
- *                 ◀──[hover out]──         ◀──[click out (returns to HOVER)]──
- *
- * CHECKLIST FOR NEW COMPONENTS:
- * 1. Rename MyComponent / MyComponentProps throughout
- * 2. Define the zone (x, y, width, height) based on component size
- * 3. Set hoverAnimation — the standard→hover transition
- * 4. Set clickAnimation — the hover→click transition (from: is ignored, only to: matters)
- * 5. Add your visual JSX inside AnimatedElement
- * 6. Register in componentRegistry.ts + library-components/index.ts
- *
- * ═══════════════════════════════════════════════════════════════════════════
- */
-
-import React from "react";
-import { AbsoluteFill, useVideoConfig } from "remotion";
-
-import { AnimatedElement } from "@/remotion/components/AnimatedElement";
-import { createInteractiveComposition } from "@/remotion/hooks/createInteractiveComposition";
-import { useInteractiveComponent } from "@/remotion/hooks/useInteractiveComponent";
-import { createCameraTrack, createCursorTrack } from "@/remotion/trackHelpers";
-import type { AnimationTrack } from "@/types";
-
-// ─── Props ────────────────────────────────────────────────────────────────────
-
-export type MyComponentProps = {
-  // Add your props here
-  label?: string;
-  backgroundColor?: string;
-  textColor?: string;
-  // Required by createInteractiveComposition — do not remove
-  tracks?: AnimationTrack[];
-};
-
-// ─── Fallback Tracks ──────────────────────────────────────────────────────────
-// Used when no tracks are provided (e.g. in component library preview)
-// ALWAYS use createCameraTrack + createCursorTrack helpers — never write raw tracks!
-
-const COMPONENT_WIDTH = 200;
-const COMPONENT_HEIGHT = 60;
-const CANVAS_WIDTH = 1920;
-const CANVAS_HEIGHT = 1080;
-const DURATION = 150; // 5s @ 30fps — standard component preview duration
-
-const FALLBACK_TRACKS: AnimationTrack[] = (() => {
-  const tracks = [
-    createCameraTrack(DURATION),
-    createCursorTrack(DURATION, {
-      startX: 200,
-      startY: 200,
-      startOpacity: 0, // Fade in if desired
-    }),
-  ];
-
-  const cursor = tracks[1];
-  const cx = String(CANVAS_WIDTH / 2 - 16); // Center the cursor on the component
-  const cy = String(CANVAS_HEIGHT / 2 - 16);
-
-  // Timeline: arrive at 0.5s (frame 15), click at 2s (frame 60), exit at 3.5s (frame 105)
-  cursor.animatedProps!.find((p) => p.property === "x")!.keyframes = [
-    { frame: 0, value: "200" },
-    { frame: 15, value: cx }, // Cursor arrives
-    { frame: 90, value: cx }, // Hover period
-    { frame: 120, value: "1720" },
-    { frame: 150, value: "1720" },
-  ];
-  cursor.animatedProps!.find((p) => p.property === "y")!.keyframes = [
-    { frame: 0, value: "200" },
-    { frame: 15, value: cy },
-    { frame: 90, value: cy },
-    { frame: 120, value: "200" },
-    { frame: 150, value: "200" },
-  ];
-  cursor.animatedProps!.find((p) => p.property === "isClicking")!.keyframes = [
-    { frame: 0, value: "0" },
-    { frame: 59, value: "0" },
-    { frame: 60, value: "1" }, // Click
-    { frame: 70, value: "0" },
-    { frame: 150, value: "0" },
-  ];
-  cursor.animatedProps!.find((p) => p.property === "opacity")!.keyframes = [
-    { frame: 0, value: "0" },
-    { frame: 5, value: "0" },
-    { frame: 15, value: "1" }, // Fade in
-    { frame: 90, value: "1" },
-    { frame: 100, value: "0" }, // Fade out
-    { frame: 150, value: "0" },
-  ];
-  // NOTE: cursor type stays "default" — autoCursorType switches to "pointer" on hover
-
-  return tracks;
-})();
-
-// ─── Component ────────────────────────────────────────────────────────────────
-
-export const MyComponent = createInteractiveComposition<MyComponentProps>({
-  fallbackTracks: FALLBACK_TRACKS,
-
-  render: ({ cursorHistory, registerForCursor }, props) => {
-    const {
-      label = "Click Me",
-      backgroundColor = "#3b82f6",
-      textColor = "#ffffff",
-    } = props;
-
-    const { width, height } = useVideoConfig();
-
-    // Center component on canvas
-    const compX = (width - COMPONENT_WIDTH) / 2;
-    const compY = (height - COMPONENT_HEIGHT) / 2;
-
-    // ─── Three-State Animation Setup ────────────────────────────────────────
-    // The system handles: STANDARD → HOVER → CLICK → HOVER → STANDARD
-    // hoverAnimation: defines what changes from standard → hover
-    // clickAnimation: defines the peak click state (hover→click→hover)
-    //   NOTE: `from` values in clickAnimation are IGNORED when hovering.
-    //         Only `to` matters — it defines the peak click state.
-    //         Click animate-out returns to HOVER state, not standard.
-    const interactive = useInteractiveComponent({
-      id: "my-component",
-      elementType: "MyComponent",
-      label: "My Component",
-      compositionId: "my-component",
-      zone: {
-        x: compX,
-        y: compY,
-        width: COMPONENT_WIDTH,
-        height: COMPONENT_HEIGHT,
-      },
-      cursorHistory,
-      interactiveElementType: "button", // or "card" for card-like components
-
-      // HOVER: standard → hover
-      hoverAnimation: {
-        duration: 6,
-        easing: "expo.out",
-        properties: [
-          { property: "scale", from: 1, to: 1.05, unit: "" },
-          { property: "brightness", from: 1, to: 1.1, unit: "" },
-        ],
-      },
-
-      // CLICK: hover → click (from: ignored, only to: matters)
-      clickAnimation: {
-        duration: 8,
-        easing: "expo.out",
-        properties: [
-          { property: "scale", from: 1, to: 0.95, unit: "" }, // from: ignored!
-          { property: "brightness", from: 1, to: 1.3, unit: "" },
-        ],
-      },
-    });
-
-    // Register for autoCursorType (pointer on hover)
-    React.useEffect(() => {
-      registerForCursor(interactive);
-    }, [
-      interactive.hover.isHovering,
-      interactive.click.isClicking,
-      registerForCursor,
-    ]);
-
-    return (
-      <AbsoluteFill
-        style={{
-          backgroundColor: "#0f172a",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        {/*
-          AnimatedElement automatically applies ALL animated properties.
-          Add hover/click animations via the UI — no code changes needed!
-          The three-state model is handled by the underlying system.
-        */}
-        <AnimatedElement
-          interactive={interactive}
-          as="div"
-          style={{
-            position: "absolute",
-            left: compX,
-            top: compY,
-            width: COMPONENT_WIDTH,
-            height: COMPONENT_HEIGHT,
-            backgroundColor,
-            color: textColor,
-            borderRadius: 12,
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            fontSize: 16,
-            fontWeight: 600,
-            fontFamily: "Inter, sans-serif",
-            cursor: "pointer",
-          }}
-        >
-          {label}
-        </AnimatedElement>
-      </AbsoluteFill>
-    );
-  },
-});

package/corpus/templates/videos/app/remotion/library-components/index.ts

@@ -1,10 +0,0 @@
-// Organisms
-export { Card, type CardProps } from "./Card";
-export { CodePanel, type CodePanelProps } from "./CodePanel";
-// Atoms
-export { Button, type ButtonProps } from "./Button";
-export { SecondaryButton, type SecondaryButtonProps } from "./SecondaryButton";
-export { PrimaryButton, type PrimaryButtonProps } from "./PrimaryButton";
-export { SectionHeader, type SectionHeaderProps } from "./SectionHeader";
-export { FileItem, type FileItemProps } from "./FileItem";
-export { FolderItem, type FolderItemProps } from "./FolderItem";

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

@@ -1,91 +0,0 @@
-import type React from "react";
-
-import type { AnimationTrack } from "@/types";
-
-import {
-  BlankComposition,
-  type BlankCompositionProps,
-} from "./compositions/BlankComposition";
-import {
-  createCameraTrack,
-  createCursorTrack,
-  createStandardTracks,
-} from "./trackHelpers";
-
-export type CompositionEntry = {
-  id: string;
-  title: string;
-  description: string;
-  component: React.FC<any>;
-  durationInFrames: number;
-  fps: number;
-  width: number;
-  height: number;
-  defaultProps: Record<string, any>;
-  tracks: AnimationTrack[];
-  storage?: "registry" | "database";
-  /** Increment when registry defaults should replace stale local overrides. */
-  version?: number;
-};
-
-export const compositions: CompositionEntry[] = [];
-
-export { createCameraTrack, createCursorTrack, createStandardTracks };
-
-function titleToSlug(title: string): string {
-  if (!title || !title.trim()) return "temp";
-
-  return (
-    title
-      .toLowerCase()
-      .trim()
-      .replace(/[^a-z0-9]+/g, "-") // Replace non-alphanumeric with hyphens
-      .replace(/^-+|-+$/g, "") // Remove leading/trailing hyphens
-      .replace(/-+/g, "-") || // Replace multiple hyphens with single
-    "temp"
-  ); // Fallback if result is empty
-}
-
-/**
- * Find the next available slug by appending -2, -3, etc.
- */
-function getAvailableSlug(baseSlug: string): string {
-  let slug = baseSlug;
-  let counter = 2;
-
-  while (compositions.some((c) => c.id === slug)) {
-    slug = `${baseSlug}-${counter}`;
-    counter++;
-  }
-
-  return slug;
-}
-
-/**
- * Create a new blank composition with camera and cursor tracks
- */
-export function createBlankComposition(title: string): CompositionEntry {
-  const baseSlug = titleToSlug(title);
-  const id = getAvailableSlug(baseSlug);
-  const durationInFrames = 240;
-
-  return {
-    id,
-    title: title.trim() || "Untitled Composition",
-    description: "Blank composition",
-    component: BlankComposition,
-    durationInFrames,
-    fps: 30,
-    width: 1920,
-    height: 1080,
-    defaultProps: {} satisfies BlankCompositionProps,
-    tracks: createStandardTracks(durationInFrames),
-  };
-}
-
-/**
- * Add a new composition to the registry
- */
-export function addComposition(composition: CompositionEntry) {
-  compositions.push(composition);
-}