@agent-native/core 0.85.7 → 0.86.0

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

@@ -1,196 +0,0 @@
-/**
- * ═══════════════════════════════════════════════════════════════════════════
- * FILE ITEM ATOM
- * ═══════════════════════════════════════════════════════════════════════════
- *
- * A file list item with icon, name, and optional metadata.
- * Demonstrates hover brightness animation.
- *
- * Features:
- * - File icon support
- * - Optional line count badge
- * - Optional file path
- * - Hover brightness effect
- *
- * ═══════════════════════════════════════════════════════════════════════════
- */
-
-import { AbsoluteFill } 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 FileItemProps = {
-  icon?: string;
-  name?: string;
-  lineCount?: string;
-  path?: string;
-  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 === "x")!.keyframes = [
-    { frame: 0, value: "200" },
-    { frame: 15, value: "890" },
-    { frame: 90, value: "890" },
-    { frame: 120, value: "1720" },
-    { frame: 150, value: "1720" },
-  ];
-  cursor.animatedProps!.find((p) => p.property === "y")!.keyframes = [
-    { frame: 0, value: "200" },
-    { frame: 15, value: "540" },
-    { frame: 90, value: "540" },
-    { 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 FileItem = createInteractiveComposition<FileItemProps>({
-  fallbackTracks: FALLBACK_TRACKS,
-
-  render: ({ cursorHistory, registerForCursor }, props) => {
-    const {
-      icon = "https://api.builder.io/api/v1/image/assets/YJIGb4i01jvw0SRdL5Bt/10ff8b681a169f3c2b0c90b4fd672a0e7173771b?placeholderIfAbsent=true",
-      name = "MyComponent.tsx",
-      lineCount = "+ 42",
-      path = "client/remotion/compositions",
-      x = 760,
-      y = 528,
-    } = props;
-
-    const itemWidth = 260;
-    const itemHeight = 24;
-
-    const item = useInteractiveComponent({
-      id: "file-item",
-      elementType: "FileItem",
-      label: name,
-      compositionId: "file-item",
-      zone: { x, y, width: itemWidth, height: itemHeight },
-      cursorHistory,
-      interactiveElementType: "card",
-      hoverAnimation: brightnessHover(0.15),
-    });
-
-    registerForCursor(item);
-
-    const fontSize = 13;
-    const iconSize = 16;
-    const gap = 7;
-
-    return (
-      <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
-        <AnimatedElement
-          interactive={item}
-          as="div"
-          style={{
-            position: "absolute",
-            left: x,
-            top: y,
-            width: itemWidth,
-            height: itemHeight,
-            display: "flex",
-            alignItems: "center",
-            gap: `${gap}px`,
-            cursor: "pointer",
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {/* File Icon */}
-          <img
-            src={icon}
-            alt=""
-            style={{
-              aspectRatio: 1,
-              objectFit: "contain",
-              objectPosition: "center",
-              width: iconSize,
-              flexShrink: 0,
-            }}
-          />
-
-          {/* File Name */}
-          <div
-            style={{
-              fontSize,
-              color: "#a4a4a4",
-              flexShrink: 1,
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap",
-              minWidth: 0,
-            }}
-          >
-            {name}
-          </div>
-
-          {/* Line Count Badge */}
-          {lineCount && (
-            <div
-              style={{
-                fontSize: 11,
-                color: "#4ade80",
-                marginLeft: "auto",
-                flexShrink: 0,
-              }}
-            >
-              {lineCount}
-            </div>
-          )}
-
-          {/* File Path */}
-          {path && (
-            <div
-              style={{
-                fontSize: 11,
-                color: "#8a8a8a",
-                flexShrink: 0,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
-            >
-              {path}
-            </div>
-          )}
-        </AnimatedElement>
-      </AbsoluteFill>
-    );
-  },
-});

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

@@ -1,199 +0,0 @@
-/**
- * ═══════════════════════════════════════════════════════════════════════════
- * FOLDER ITEM ATOM
- * ═══════════════════════════════════════════════════════════════════════════
- *
- * A collapsible folder item with chevron icon.
- * Demonstrates hover brightness and expand/collapse animation.
- *
- * Features:
- * - Chevron icon (rotates when expanded)
- * - Folder icon
- * - Folder name
- * - Hover brightness effect
- *
- * ═══════════════════════════════════════════════════════════════════════════
- */
-
-import { AbsoluteFill } 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 FolderItemProps = {
-  name?: string;
-  isExpanded?: boolean;
-  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 === "x")!.keyframes = [
-    { frame: 0, value: "200" },
-    { frame: 15, value: "890" },
-    { frame: 90, value: "890" },
-    { frame: 120, value: "1720" },
-    { frame: 150, value: "1720" },
-  ];
-  cursor.animatedProps!.find((p) => p.property === "y")!.keyframes = [
-    { frame: 0, value: "200" },
-    { frame: 15, value: "540" },
-    { frame: 90, value: "540" },
-    { 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 FolderItem = createInteractiveComposition<FolderItemProps>({
-  fallbackTracks: FALLBACK_TRACKS,
-
-  render: ({ cursorHistory, registerForCursor }, props) => {
-    const { name = "client", isExpanded = true, x = 760, y = 528 } = props;
-
-    const itemWidth = 260;
-    const itemHeight = 24;
-
-    const folder = useInteractiveComponent({
-      id: "folder-item",
-      elementType: "FolderItem",
-      label: name,
-      compositionId: "folder-item",
-      zone: { x, y, width: itemWidth, height: itemHeight },
-      cursorHistory,
-      interactiveElementType: "card",
-      hoverAnimation: brightnessHover(0.12),
-    });
-
-    registerForCursor(folder);
-
-    const fontSize = 13;
-    const gap = 6;
-
-    return (
-      <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
-        <AnimatedElement
-          interactive={folder}
-          as="div"
-          style={{
-            position: "absolute",
-            left: x,
-            top: y,
-            width: itemWidth,
-            height: itemHeight,
-            display: "flex",
-            alignItems: isExpanded ? "end" : "center",
-            gap: isExpanded ? "5px" : "4px",
-            cursor: "pointer",
-          }}
-        >
-          {/* Chevron Icon */}
-          {isExpanded ? (
-            <div
-              style={{
-                display: "flex",
-                paddingLeft: 5,
-                paddingRight: 5,
-                paddingTop: 4,
-                paddingBottom: 4,
-                alignItems: "center",
-                overflow: "hidden",
-                width: 14,
-              }}
-            >
-              <img
-                src="https://api.builder.io/api/v1/image/assets/YJIGb4i01jvw0SRdL5Bt/2f7e835c418bdf085373048598835166dfbceb0c?placeholderIfAbsent=true"
-                alt=""
-                style={{
-                  aspectRatio: 0.57,
-                  objectFit: "contain",
-                  objectPosition: "center",
-                  width: 4,
-                  flexShrink: 0,
-                }}
-              />
-            </div>
-          ) : (
-            <img
-              src="https://api.builder.io/api/v1/image/assets/YJIGb4i01jvw0SRdL5Bt/13dadd4473c8a647901e721f8b909948c3fb26f9?placeholderIfAbsent=true"
-              alt=""
-              style={{
-                aspectRatio: 1,
-                objectFit: "contain",
-                objectPosition: "center",
-                width: 14,
-                flexShrink: 0,
-              }}
-            />
-          )}
-
-          {/* Folder Icon + Name Container */}
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              gap: `${gap}px`,
-            }}
-          >
-            {/* Folder Icon */}
-            <img
-              src="https://api.builder.io/api/v1/image/assets/YJIGb4i01jvw0SRdL5Bt/0eff81acf5a556bcdb7fe959d106beee500c5274?placeholderIfAbsent=true"
-              alt=""
-              style={{
-                aspectRatio: 1,
-                objectFit: "contain",
-                objectPosition: "center",
-                width: 16,
-                flexShrink: 0,
-              }}
-            />
-
-            {/* Folder Name */}
-            <div
-              style={{
-                fontSize,
-                color: "#a4a4a4",
-                whiteSpace: "nowrap",
-              }}
-            >
-              {name}
-            </div>
-          </div>
-        </AnimatedElement>
-      </AbsoluteFill>
-    );
-  },
-});

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

@@ -1,177 +0,0 @@
-/**
- * ═══════════════════════════════════════════════════════════════════════════
- * PRIMARY BUTTON ATOM
- * ═══════════════════════════════════════════════════════════════════════════
- *
- * A primary action button with solid background and optional icon.
- * Used for main CTAs like "Send PR" or "Push to Remote".
- *
- * Features:
- * - Solid background color
- * - Optional icon (image URL)
- * - 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 PrimaryButtonProps = {
-  label?: string;
-  icon?: string;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-  backgroundColor?: 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 PrimaryButton = createInteractiveComposition<PrimaryButtonProps>({
-  fallbackTracks: FALLBACK_TRACKS,
-
-  render: ({ cursorHistory, registerForCursor }, props) => {
-    const {
-      label = "Send PR",
-      icon = "https://api.builder.io/api/v1/image/assets/YJIGb4i01jvw0SRdL5Bt/81e7eb620e52aae529258200f6dff2cc38027cd8?placeholderIfAbsent=true",
-      x = 860,
-      y = 524,
-      width = 82,
-      height = 32,
-      backgroundColor = "#48a1ff",
-      textColor = "#000000",
-    } = props;
-    const { width: videoWidth, height: videoHeight } = useVideoConfig();
-
-    const buttonWidth = width;
-    const buttonHeight = height;
-    const buttonX = typeof x === "number" ? x : (videoWidth - buttonWidth) / 2;
-    const buttonY =
-      typeof y === "number" ? y : (videoHeight - buttonHeight) / 2;
-
-    const button = useInteractiveComponent({
-      id: "primary-button",
-      elementType: "Button",
-      label,
-      compositionId: "primary-button",
-      zone: {
-        x: buttonX,
-        y: buttonY,
-        width: buttonWidth,
-        height: buttonHeight,
-      },
-      cursorHistory,
-      interactiveElementType: "button",
-      hoverAnimation: brightnessHover(0.3),
-    });
-
-    registerForCursor(button);
-
-    const fontSize = 11;
-    const paddingX = 7;
-    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: "start",
-            gap: icon ? "4px" : "0",
-            paddingLeft: paddingX,
-            paddingRight: paddingX,
-            paddingTop: paddingY,
-            paddingBottom: paddingY,
-            backgroundColor,
-            borderRadius: 6,
-            color: textColor,
-            fontSize,
-            fontWeight: 500,
-            cursor: "pointer",
-            whiteSpace: "nowrap",
-          }}
-        >
-          {icon && (
-            <img
-              src={icon}
-              alt=""
-              style={{
-                aspectRatio: 1,
-                objectFit: "contain",
-                objectPosition: "center",
-                width: 16,
-              }}
-            />
-          )}
-          <span>{label}</span>
-        </AnimatedElement>
-      </AbsoluteFill>
-    );
-  },
-});