@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/videos/app/components/CursorPositioningOverlay.tsx

@@ -1,238 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import { useRef, useState, useCallback } from "react";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { getPropValueKeyframed } from "@/remotion/trackAnimation";
-import type { AnimationTrack } from "@/types";
-
-interface CursorPositioningOverlayProps {
-  compositionWidth: number;
-  compositionHeight: number;
-  currentFrame: number;
-  fps: number;
-  tracks: AnimationTrack[];
-  onUpdateTrack: (id: string, patch: Partial<AnimationTrack>) => void;
-  isPlaying: boolean;
-}
-
-/**
- * Interactive overlay for click-and-drag cursor positioning.
- * Only visible when video is paused.
- * Automatically creates/updates x/y keyframes at current frame.
- */
-export const CursorPositioningOverlay: React.FC<
-  CursorPositioningOverlayProps
-> = ({
-  compositionWidth,
-  compositionHeight,
-  currentFrame,
-  fps,
-  tracks,
-  onUpdateTrack,
-  isPlaying,
-}) => {
-  const t = useT();
-  const overlayRef = useRef<HTMLDivElement>(null);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const cursorTrack = tracks.find((t) => t.id === "cursor");
-  const cameraTrack = tracks.find((t) => t.id === "camera");
-
-  // Get current camera transform values to adjust cursor coordinates
-  const getCameraTransform = useCallback(() => {
-    if (!cameraTrack) {
-      return { translateX: 0, translateY: 0, scale: 1 };
-    }
-    return {
-      translateX: getPropValueKeyframed(
-        currentFrame,
-        fps,
-        cameraTrack,
-        "translateX",
-        0,
-      ),
-      translateY: getPropValueKeyframed(
-        currentFrame,
-        fps,
-        cameraTrack,
-        "translateY",
-        0,
-      ),
-      scale: getPropValueKeyframed(currentFrame, fps, cameraTrack, "scale", 1),
-    };
-  }, [cameraTrack, currentFrame, fps]);
-
-  const updateCursorPosition = useCallback(
-    (x: number, y: number) => {
-      if (!cursorTrack) return;
-
-      // Get camera transforms
-      const camera = getCameraTransform();
-
-      // Convert screen coordinates to composition coordinates accounting for camera
-      // Formula: (screenPos - translate) / scale
-      // Also account for composition center offset
-      const centerX = compositionWidth / 2;
-      const centerY = compositionHeight / 2;
-
-      const adjustedX =
-        (x - centerX - camera.translateX) / camera.scale + centerX;
-      const adjustedY =
-        (y - centerY - camera.translateY) / camera.scale + centerY;
-
-      // Clamp to composition bounds
-      const clampedX = Math.max(0, Math.min(compositionWidth, adjustedX));
-      const clampedY = Math.max(0, Math.min(compositionHeight, adjustedY));
-
-      // Find x and y properties
-      const xProp = cursorTrack.animatedProps?.find((p) => p.property === "x");
-      const yProp = cursorTrack.animatedProps?.find((p) => p.property === "y");
-
-      if (!xProp || !yProp) return;
-
-      // Update or create keyframes
-      const updateKeyframes = (keyframes: any[] = [], value: string) => {
-        const existingIdx = keyframes.findIndex(
-          (kf) => kf.frame === currentFrame,
-        );
-        if (existingIdx >= 0) {
-          return keyframes.map((kf, i) =>
-            i === existingIdx ? { ...kf, value } : kf,
-          );
-        }
-        return [
-          ...keyframes,
-          { frame: currentFrame, value, easing: "expo.inOut" },
-        ];
-      };
-
-      const newXKeyframes = updateKeyframes(
-        xProp.keyframes,
-        clampedX.toString(),
-      );
-      const newYKeyframes = updateKeyframes(
-        yProp.keyframes,
-        clampedY.toString(),
-      );
-
-      const updatedProps = cursorTrack.animatedProps?.map((p) => {
-        if (p.property === "x") return { ...p, keyframes: newXKeyframes };
-        if (p.property === "y") return { ...p, keyframes: newYKeyframes };
-        return p;
-      });
-
-      onUpdateTrack("cursor", { animatedProps: updatedProps });
-    },
-    [
-      cursorTrack,
-      currentFrame,
-      compositionWidth,
-      compositionHeight,
-      onUpdateTrack,
-      getCameraTransform,
-    ],
-  );
-
-  /**
-   * Convert mouse event to composition coordinates, accounting for:
-   * 1. Player aspect ratio and letterboxing/pillarboxing
-   * 2. Actual rendered size vs overlay size
-   */
-  const getCompositionCoordinates = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (!overlayRef.current) return { x: 0, y: 0 };
-
-      const rect = overlayRef.current.getBoundingClientRect();
-      const compositionAspect = compositionWidth / compositionHeight;
-      const containerAspect = rect.width / rect.height;
-
-      let renderWidth: number;
-      let renderHeight: number;
-      let offsetX = 0;
-      let offsetY = 0;
-
-      if (containerAspect > compositionAspect) {
-        // Container is wider - pillarboxing (black bars on sides)
-        renderHeight = rect.height;
-        renderWidth = renderHeight * compositionAspect;
-        offsetX = (rect.width - renderWidth) / 2;
-      } else {
-        // Container is taller - letterboxing (black bars on top/bottom)
-        renderWidth = rect.width;
-        renderHeight = renderWidth / compositionAspect;
-        offsetY = (rect.height - renderHeight) / 2;
-      }
-
-      // Convert mouse position to composition coordinates
-      const mouseX = e.clientX - rect.left - offsetX;
-      const mouseY = e.clientY - rect.top - offsetY;
-
-      const x = (mouseX / renderWidth) * compositionWidth;
-      const y = (mouseY / renderHeight) * compositionHeight;
-
-      return { x, y };
-    },
-    [compositionWidth, compositionHeight],
-  );
-
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (!cursorTrack) return;
-
-      const { x, y } = getCompositionCoordinates(e);
-      updateCursorPosition(x, y);
-      setIsDragging(true);
-    },
-    [cursorTrack, getCompositionCoordinates, updateCursorPosition],
-  );
-
-  const handleMouseMove = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (!isDragging) return;
-
-      const { x, y } = getCompositionCoordinates(e);
-      updateCursorPosition(x, y);
-    },
-    [isDragging, getCompositionCoordinates, updateCursorPosition],
-  );
-
-  const handleMouseUp = useCallback(() => {
-    setIsDragging(false);
-  }, []);
-
-  // Don't show overlay during playback or if no cursor track exists
-  if (isPlaying || !cursorTrack) {
-    return null;
-  }
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          ref={overlayRef}
-          onMouseDown={handleMouseDown}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleMouseUp}
-          onMouseLeave={handleMouseUp}
-          style={{
-            position: "absolute",
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 56, // Exclude control bar at bottom
-            cursor: isDragging ? "grabbing" : "crosshair",
-            zIndex: 10,
-            pointerEvents: "auto",
-          }}
-        >
-          {/* Invisible overlay for click-and-drag */}
-        </div>
-      </TooltipTrigger>
-      <TooltipContent>{t("raw.cursor.clickDragPosition")}</TooltipContent>
-    </Tooltip>
-  );
-};

package/corpus/templates/videos/app/components/LibraryFolderRow.tsx

@@ -1,235 +0,0 @@
-import { useT } from "@agent-native/core/client";
-import {
-  IconChevronRight,
-  IconFolder,
-  IconFolderOpen,
-  IconPencil,
-  IconTrash,
-  IconX,
-} from "@tabler/icons-react";
-import { useState, useRef } from "react";
-
-import { CompositionCard } from "@/components/CompositionCard";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import type { VideoFolder } from "@/hooks/use-folders";
-import { cn } from "@/lib/utils";
-import type { CompositionEntry } from "@/remotion/registry";
-
-type LibraryFolderRowProps = {
-  folder: VideoFolder;
-  compositions: CompositionEntry[];
-  selectedCompositionId: string | null;
-  onSelectComposition: (id: string) => void;
-  onDelete?: (id: string) => void;
-  onRenameFolder: (folderId: string, name: string) => void;
-  onDeleteFolder: (folderId: string) => void;
-  onDropComposition: (compositionId: string, folderId: string) => void;
-  onRemoveFromFolder: (compositionId: string) => void;
-};
-
-export function LibraryFolderRow({
-  folder,
-  compositions,
-  selectedCompositionId,
-  onSelectComposition,
-  onDelete,
-  onRenameFolder,
-  onDeleteFolder,
-  onDropComposition,
-  onRemoveFromFolder,
-}: LibraryFolderRowProps) {
-  const t = useT();
-  const [expanded, setExpanded] = useState(true);
-  const [isRenaming, setIsRenaming] = useState(false);
-  const [renameValue, setRenameValue] = useState(folder.name);
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [showActions, setShowActions] = useState(false);
-  const renameInputRef = useRef<HTMLInputElement>(null);
-
-  // Auto-expand if a child composition is currently selected
-  const hasSelectedChild = compositions.some(
-    (c) => c.id === selectedCompositionId,
-  );
-  const isExpanded = expanded || hasSelectedChild;
-
-  const handleRenameStart = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setRenameValue(folder.name);
-    setIsRenaming(true);
-    setTimeout(() => renameInputRef.current?.select(), 50);
-  };
-
-  const handleRenameCommit = () => {
-    if (renameValue.trim()) {
-      onRenameFolder(folder.id, renameValue.trim());
-    }
-    setIsRenaming(false);
-  };
-
-  const handleRenameKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter") handleRenameCommit();
-    if (e.key === "Escape") {
-      setRenameValue(folder.name);
-      setIsRenaming(false);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-    setIsDragOver(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    // Only clear if leaving the folder container itself
-    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-      setIsDragOver(false);
-    }
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragOver(false);
-    const compositionId = e.dataTransfer.getData("text/composition-id");
-    if (compositionId) {
-      onDropComposition(compositionId, folder.id);
-      setExpanded(true);
-    }
-  };
-
-  return (
-    <div
-      className={cn(
-        "rounded-lg transition-all",
-        isDragOver && "ring-2 ring-primary/50 bg-primary/5",
-      )}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-    >
-      {/* Folder header */}
-      <div
-        role="button"
-        tabIndex={0}
-        className={cn(
-          "flex items-center gap-1.5 px-2 py-1.5 rounded-lg cursor-pointer transition-colors select-none",
-          "hover:bg-secondary/60",
-          isDragOver && "bg-primary/10",
-        )}
-        onClick={() => !isRenaming && setExpanded((v) => !v)}
-        onKeyDown={(e) => {
-          if ((e.key === "Enter" || e.key === " ") && !isRenaming) {
-            e.preventDefault();
-            setExpanded((v) => !v);
-          }
-        }}
-        onMouseEnter={() => setShowActions(true)}
-        onMouseLeave={() => setShowActions(false)}
-      >
-        <IconChevronRight
-          className={cn(
-            "h-3 w-3 flex-shrink-0 text-muted-foreground transition-transform",
-            isExpanded && "rotate-90",
-          )}
-        />
-
-        {isExpanded ? (
-          <IconFolderOpen className="h-3.5 w-3.5 flex-shrink-0 text-amber-400" />
-        ) : (
-          <IconFolder className="h-3.5 w-3.5 flex-shrink-0 text-amber-400" />
-        )}
-
-        {isRenaming ? (
-          <input
-            ref={renameInputRef}
-            value={renameValue}
-            onChange={(e) => setRenameValue(e.target.value)}
-            onBlur={handleRenameCommit}
-            onKeyDown={handleRenameKeyDown}
-            onClick={(e) => e.stopPropagation()}
-            className="flex-1 min-w-0 text-xs bg-background border border-primary/50 rounded px-1 py-0 outline-none"
-            autoFocus
-          />
-        ) : (
-          <span className="flex-1 min-w-0 text-xs font-medium truncate">
-            {folder.name}
-          </span>
-        )}
-
-        <span className="text-[10px] text-muted-foreground/50 flex-shrink-0 tabular-nums">
-          {compositions.length}
-        </span>
-
-        {showActions && !isRenaming && (
-          <div
-            className="flex items-center gap-0.5"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={handleRenameStart}
-                  className="p-0.5 rounded hover:bg-secondary text-muted-foreground hover:text-foreground transition-colors"
-                >
-                  <IconPencil className="h-3 w-3" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>{t("raw.folders.rename")}</TooltipContent>
-            </Tooltip>
-            <Tooltip>
-              <TooltipTrigger asChild>
-                <button
-                  onClick={() => onDeleteFolder(folder.id)}
-                  className="p-0.5 rounded hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
-                >
-                  <IconTrash className="h-3 w-3" />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent>{t("raw.folders.delete")}</TooltipContent>
-            </Tooltip>
-          </div>
-        )}
-      </div>
-
-      {/* Folder contents */}
-      {isExpanded && (
-        <div className="ml-4 mt-0.5 pb-0.5 space-y-0.5">
-          {compositions.length === 0 ? (
-            <div className="text-[10px] text-muted-foreground/40 px-2 py-2 italic">
-              {t("raw.folders.dragVideosHere")}
-            </div>
-          ) : (
-            compositions.map((comp) => (
-              <div key={comp.id} className="relative group/item">
-                <CompositionCard
-                  composition={comp}
-                  isSelected={comp.id === selectedCompositionId}
-                  onClick={() => onSelectComposition(comp.id)}
-                  onDelete={onDelete}
-                  draggable
-                />
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <button
-                      onClick={() => onRemoveFromFolder(comp.id)}
-                      className="absolute top-1 right-7 p-0.5 rounded opacity-0 group-hover/item:opacity-100 bg-secondary/80 hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-all"
-                    >
-                      <IconX className="h-2.5 w-2.5" />
-                    </button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    {t("raw.folders.removeFromFolder")}
-                  </TooltipContent>
-                </Tooltip>
-              </div>
-            ))
-          )}
-        </div>
-      )}
-    </div>
-  );
-}

package/corpus/templates/videos/app/components/MotionCurveSelect.tsx

@@ -1,61 +0,0 @@
-import { useT } from "@agent-native/core/client";
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { EASING_OPTIONS } from "@/remotion/easingFunctions";
-import type { EasingKey } from "@/types";
-
-import { Label } from "./ui/label";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "./ui/select";
-
-interface MotionCurveSelectProps {
-  value: EasingKey;
-  onChange: (easing: EasingKey) => void;
-  accentColor?: string;
-  label?: string;
-}
-
-export const MotionCurveSelect: React.FC<MotionCurveSelectProps> = ({
-  value,
-  onChange,
-  accentColor = "blue-400",
-  label,
-}) => {
-  const t = useT();
-  const displayLabel = label ?? t("editor.currentElement.motionCurve");
-
-  return (
-    <div className="space-y-1.5 pt-2 border-t border-border/40">
-      <Label className="text-xs text-muted-foreground">{displayLabel}</Label>
-      <Select value={value} onValueChange={(val) => onChange(val as EasingKey)}>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <SelectTrigger
-              className={`w-full h-auto text-xs bg-secondary border border-border rounded-lg pl-2.5 py-1.5 text-foreground focus:outline-none focus:ring-2 focus:ring-${accentColor}/40`}
-              aria-label={t("raw.motion.controlsKeyframe")}
-            >
-              <SelectValue />
-            </SelectTrigger>
-          </TooltipTrigger>
-          <TooltipContent>{t("raw.motion.controlsKeyframe")}</TooltipContent>
-        </Tooltip>
-        <SelectContent>
-          {EASING_OPTIONS.map((opt) => (
-            <SelectItem key={opt.value} value={opt.value}>
-              {opt.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
-  );
-};