@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/videos/app/remotion/components/InteractiveZoneEditor.tsx

@@ -1,273 +0,0 @@
-import React from "react";
-
-export interface Zone {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
-export interface ZoneConfig {
-  zone: Zone;
-  label: string;
-  color: string;
-}
-
-interface InteractiveZoneEditorProps {
-  zones: ZoneConfig[];
-  onZoneChange?: (label: string, newZone: Zone) => void;
-  enabled?: boolean;
-}
-
-type DragMode =
-  | "move"
-  | "resize-se"
-  | "resize-sw"
-  | "resize-ne"
-  | "resize-nw"
-  | null;
-
-export const InteractiveZoneEditor: React.FC<InteractiveZoneEditorProps> = ({
-  zones,
-  onZoneChange,
-  enabled = true,
-}) => {
-  const [selectedZone, setSelectedZone] = React.useState<string | null>(null);
-  const [dragMode, setDragMode] = React.useState<DragMode>(null);
-  const [dragStart, setDragStart] = React.useState<{
-    x: number;
-    y: number;
-  } | null>(null);
-  const [originalZone, setOriginalZone] = React.useState<Zone | null>(null);
-  const [hoveredZone, setHoveredZone] = React.useState<string | null>(null);
-
-  const handleMouseDown = (
-    e: React.MouseEvent,
-    label: string,
-    mode: DragMode,
-  ) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const zoneConfig = zones.find((z) => z.label === label);
-    if (!zoneConfig) return;
-
-    setSelectedZone(label);
-    setDragMode(mode);
-    setDragStart({ x: e.clientX, y: e.clientY });
-    setOriginalZone({ ...zoneConfig.zone });
-  };
-
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!dragMode || !dragStart || !originalZone || !selectedZone) return;
-
-    const deltaX = e.clientX - dragStart.x;
-    const deltaY = e.clientY - dragStart.y;
-
-    let newZone: Zone = { ...originalZone };
-
-    if (dragMode === "move") {
-      newZone.x = originalZone.x + deltaX;
-      newZone.y = originalZone.y + deltaY;
-    } else if (dragMode === "resize-se") {
-      newZone.width = Math.max(20, originalZone.width + deltaX);
-      newZone.height = Math.max(20, originalZone.height + deltaY);
-    } else if (dragMode === "resize-sw") {
-      newZone.x = originalZone.x + deltaX;
-      newZone.width = Math.max(20, originalZone.width - deltaX);
-      newZone.height = Math.max(20, originalZone.height + deltaY);
-    } else if (dragMode === "resize-ne") {
-      newZone.width = Math.max(20, originalZone.width + deltaX);
-      newZone.y = originalZone.y + deltaY;
-      newZone.height = Math.max(20, originalZone.height - deltaY);
-    } else if (dragMode === "resize-nw") {
-      newZone.x = originalZone.x + deltaX;
-      newZone.y = originalZone.y + deltaY;
-      newZone.width = Math.max(20, originalZone.width - deltaX);
-      newZone.height = Math.max(20, originalZone.height - deltaY);
-    }
-
-    onZoneChange?.(selectedZone, newZone);
-  };
-
-  const handleMouseUp = () => {
-    setDragMode(null);
-    setDragStart(null);
-    setOriginalZone(null);
-  };
-
-  React.useEffect(() => {
-    if (dragMode) {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-      return () => {
-        window.removeEventListener("mousemove", handleMouseMove);
-        window.removeEventListener("mouseup", handleMouseUp);
-      };
-    }
-  }, [dragMode, dragStart, originalZone, selectedZone]);
-
-  // Disabled mode: render read-only zone overlays without any interaction.
-  if (!enabled) {
-    return (
-      <>
-        {zones.map(({ zone, label, color }) => (
-          <div
-            key={label}
-            style={{
-              position: "absolute",
-              left: zone.x,
-              top: zone.y,
-              width: zone.width,
-              height: zone.height,
-              backgroundColor: color,
-              border: "2px solid red",
-              pointerEvents: "none",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              fontSize: 10,
-              color: "white",
-              fontWeight: "bold",
-              textShadow: "0 0 3px black",
-            }}
-          >
-            {label}
-          </div>
-        ))}
-      </>
-    );
-  }
-
-  return (
-    <>
-      {zones.map(({ zone, label, color }) => {
-        const isSelected = selectedZone === label;
-        const isHovered = hoveredZone === label;
-
-        return (
-          <div
-            key={label}
-            style={{
-              position: "absolute",
-              left: zone.x,
-              top: zone.y,
-              width: zone.width,
-              height: zone.height,
-              pointerEvents: "auto",
-            }}
-            onMouseEnter={() => setHoveredZone(label)}
-            onMouseLeave={() => setHoveredZone(null)}
-          >
-            <div
-              onMouseDown={(e) => handleMouseDown(e, label, "move")}
-              style={{
-                position: "absolute",
-                inset: 0,
-                backgroundColor: color,
-                border: `2px solid ${isSelected ? "yellow" : isHovered ? "white" : "red"}`,
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: 10,
-                color: "white",
-                fontWeight: "bold",
-                textShadow: "0 0 3px black",
-                cursor: dragMode ? "grabbing" : "grab",
-                userSelect: "none",
-              }}
-            >
-              {label}
-              <div
-                style={{
-                  position: "absolute",
-                  top: 2,
-                  right: 2,
-                  fontSize: 8,
-                  opacity: 0.8,
-                }}
-              >
-                {Math.round(zone.x)}, {Math.round(zone.y)}
-              </div>
-              <div
-                style={{
-                  position: "absolute",
-                  bottom: 2,
-                  right: 2,
-                  fontSize: 8,
-                  opacity: 0.8,
-                }}
-              >
-                {Math.round(zone.width)}×{Math.round(zone.height)}
-              </div>
-            </div>
-
-            {(isSelected || isHovered) && (
-              <>
-                <div
-                  onMouseDown={(e) => handleMouseDown(e, label, "resize-se")}
-                  style={{
-                    position: "absolute",
-                    right: -4,
-                    bottom: -4,
-                    width: 8,
-                    height: 8,
-                    backgroundColor: "yellow",
-                    border: "1px solid black",
-                    cursor: "nwse-resize",
-                    zIndex: 10,
-                  }}
-                />
-
-                <div
-                  onMouseDown={(e) => handleMouseDown(e, label, "resize-sw")}
-                  style={{
-                    position: "absolute",
-                    left: -4,
-                    bottom: -4,
-                    width: 8,
-                    height: 8,
-                    backgroundColor: "yellow",
-                    border: "1px solid black",
-                    cursor: "nesw-resize",
-                    zIndex: 10,
-                  }}
-                />
-
-                <div
-                  onMouseDown={(e) => handleMouseDown(e, label, "resize-ne")}
-                  style={{
-                    position: "absolute",
-                    right: -4,
-                    top: -4,
-                    width: 8,
-                    height: 8,
-                    backgroundColor: "yellow",
-                    border: "1px solid black",
-                    cursor: "nesw-resize",
-                    zIndex: 10,
-                  }}
-                />
-
-                <div
-                  onMouseDown={(e) => handleMouseDown(e, label, "resize-nw")}
-                  style={{
-                    position: "absolute",
-                    left: -4,
-                    top: -4,
-                    width: 8,
-                    height: 8,
-                    backgroundColor: "yellow",
-                    border: "1px solid black",
-                    cursor: "nwse-resize",
-                    zIndex: 10,
-                  }}
-                />
-              </>
-            )}
-          </div>
-        );
-      })}
-    </>
-  );
-};

package/corpus/templates/videos/app/remotion/compositions/BlankComposition.tsx

@@ -1,204 +0,0 @@
-import { AbsoluteFill } from "remotion";
-
-import { createInteractiveComposition } from "@/remotion/hooks/createInteractiveComposition";
-import { InteractiveButton } from "@/remotion/ui-components/InteractiveButton";
-import { InteractiveCard } from "@/remotion/ui-components/InteractiveCard";
-import type { AnimationTrack } from "@/types";
-
-export type BlankCompositionProps = {
-  showExamples?: boolean;
-  tracks?: AnimationTrack[];
-};
-
-const FALLBACK_TRACKS: AnimationTrack[] = [
-  {
-    id: "camera",
-    label: "Camera",
-    startFrame: 0,
-    endFrame: 240,
-    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: [],
-      },
-    ],
-  },
-  {
-    id: "cursor",
-    label: "Cursor",
-    startFrame: 0,
-    endFrame: 240,
-    easing: "expo.inOut",
-    animatedProps: [
-      { property: "x", from: "960", to: "960", unit: "px", keyframes: [] },
-      { property: "y", from: "540", to: "540", 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: "" },
-    ],
-  },
-];
-
-/**
- * BlankComposition - Starting template for new compositions
- *
- * DEMONSTRATES BEST PRACTICES:
- * ✓ Uses createInteractiveComposition for automatic setup
- * ✓ Includes example interactive components (button & card)
- * ✓ Shows proper zone positioning and sizing
- * ✓ Registers all components with cursor system
- * ✓ Ready for camera movements and cursor interactions
- *
- * TO GET STARTED:
- * 1. Hover over the example components to see them in Cursor Interactions panel
- * 2. Add hover animations (scale, lift, glow, etc.)
- * 3. Add click animations for interactive feedback
- * 4. Replace/remove examples and add your own interactive elements
- * 5. Use camera controls to pan, zoom, and tilt
- *
- * CREATING YOUR OWN INTERACTIVE COMPONENTS:
- * - Import InteractiveButton or InteractiveCard from @/remotion/ui-components
- * - Or create custom components using useInteractiveComponent hook
- * - Always define precise zones for accurate hover detection
- * - Always register components with registerForCursor
- * - Always use safe fallbacks (?.value ?? 0) for animation values
- */
-export const BlankComposition =
-  createInteractiveComposition<BlankCompositionProps>({
-    fallbackTracks: FALLBACK_TRACKS,
-    render: (context, props) => {
-      const { showExamples = true } = props;
-
-      return (
-        <AbsoluteFill style={{ backgroundColor: "#0a0a0a" }}>
-          {/* Main content area */}
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "100%",
-              height: "100%",
-              flexDirection: "column",
-              gap: 40,
-            }}
-          >
-            {/* Placeholder message */}
-            <p
-              style={{
-                color: "rgba(255, 255, 255, 0.3)",
-                fontSize: 32,
-                fontFamily: "'Inter', sans-serif",
-                textAlign: "center",
-                maxWidth: "80%",
-              }}
-            >
-              Add to the video by asking the agent to create something
-            </p>
-
-            {showExamples && (
-              <>
-                <p
-                  style={{
-                    color: "rgba(255, 255, 255, 0.2)",
-                    fontSize: 16,
-                    fontFamily: "'Inter', sans-serif",
-                    textAlign: "center",
-                    maxWidth: "60%",
-                  }}
-                >
-                  Hover over the examples below to see them in the Cursor
-                  Interactions panel →
-                </p>
-
-                {/* Example Interactive Button */}
-                <InteractiveButton
-                  id="example-button"
-                  compositionId="blank"
-                  label="Click Me!"
-                  x={810}
-                  y={450}
-                  width={300}
-                  height={60}
-                  backgroundColor="#00B5FF"
-                  textColor="#ffffff"
-                  cursorHistory={context.cursorHistory}
-                  tracks={context.tracks}
-                  registerForCursor={context.registerForCursor}
-                />
-
-                {/* Example Interactive Cards */}
-                <div
-                  style={{
-                    position: "absolute",
-                    top: 600,
-                    left: 460,
-                    display: "flex",
-                    gap: 40,
-                  }}
-                >
-                  <InteractiveCard
-                    id="example-card-1"
-                    compositionId="blank"
-                    title="Interactive Card"
-                    description="Hover to select and add animations"
-                    icon="A"
-                    x={0}
-                    y={0}
-                    width={300}
-                    height={200}
-                    accentColor="#00B5FF"
-                    cursorHistory={context.cursorHistory}
-                    tracks={context.tracks}
-                    registerForCursor={context.registerForCursor}
-                  />
-
-                  <InteractiveCard
-                    id="example-card-2"
-                    compositionId="blank"
-                    title="Another Card"
-                    description="Add scale, lift, glow effects"
-                    icon="B"
-                    x={340}
-                    y={0}
-                    width={300}
-                    height={200}
-                    accentColor="#00B5FF"
-                    cursorHistory={context.cursorHistory}
-                    tracks={context.tracks}
-                    registerForCursor={context.registerForCursor}
-                  />
-
-                  <InteractiveCard
-                    id="example-card-3"
-                    compositionId="blank"
-                    title="One More"
-                    description="Each has unique animations"
-                    icon="C"
-                    x={680}
-                    y={0}
-                    width={300}
-                    height={200}
-                    accentColor="#ec4899"
-                    cursorHistory={context.cursorHistory}
-                    tracks={context.tracks}
-                    registerForCursor={context.registerForCursor}
-                  />
-                </div>
-              </>
-            )}
-          </div>
-        </AbsoluteFill>
-      );
-    },
-  });

package/corpus/templates/videos/app/remotion/compositions/index.ts

@@ -1,2 +0,0 @@
-// Compositions are imported directly from their files.
-// This barrel export is kept for convention.

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

@@ -1,132 +0,0 @@
-import type { AnimationTrack } from "@/types";
-
-export interface CursorTrackOptions {
-  /** Starting position before entering (default: off-screen left) */
-  startPosition?: { x: number; y: number };
-  /** Position where cursor hovers over the component */
-  hoverPosition: { x: number; y: number };
-  /** Position where cursor exits to (default: off-screen right) */
-  exitPosition?: { x: number; y: number };
-  /** Frame when click happens (default: 80) */
-  clickFrame?: number;
-  /** Frame when hover starts (default: 40) */
-  hoverStartFrame?: number;
-  /** Frame when hover ends (default: 110) */
-  hoverEndFrame?: number;
-}
-
-/**
- * Creates a standardized 5-second (150 frames @ 30fps) cursor track for component previews
- * Demonstrates hover and click interactions clearly
- */
-export function createComponentCursorTrack(
-  options: CursorTrackOptions,
-): AnimationTrack {
-  const {
-    startPosition = { x: 200, y: 200 }, // Start from top-left visible area
-    hoverPosition,
-    exitPosition = { x: 1720, y: 200 }, // Exit to top-right
-    clickFrame = 80,
-    hoverStartFrame = 40,
-    hoverEndFrame = 110,
-  } = options;
-
-  return {
-    id: "cursor",
-    label: "Cursor",
-    startFrame: 0,
-    endFrame: 150,
-    easing: "linear",
-    animatedProps: [
-      {
-        property: "x",
-        from: "0",
-        to: "0",
-        unit: "px",
-        keyframes: [
-          { frame: 0, value: String(startPosition.x) },
-          { frame: hoverStartFrame, value: String(hoverPosition.x) },
-          { frame: hoverEndFrame, value: String(hoverPosition.x) },
-          { frame: 130, value: String(exitPosition.x) },
-          { frame: 150, value: String(exitPosition.x) },
-        ],
-      },
-      {
-        property: "y",
-        from: "0",
-        to: "0",
-        unit: "px",
-        keyframes: [
-          { frame: 0, value: String(startPosition.y) },
-          { frame: hoverStartFrame, value: String(hoverPosition.y) },
-          { frame: hoverEndFrame, value: String(hoverPosition.y) },
-          { frame: 130, value: String(exitPosition.y) },
-          { frame: 150, value: String(exitPosition.y) },
-        ],
-      },
-      {
-        property: "isClicking",
-        from: "0",
-        to: "0",
-        unit: "",
-        keyframes: [
-          { frame: 0, value: "0" },
-          { frame: clickFrame - 1, value: "0" },
-          { frame: clickFrame, value: "1" },
-          { frame: clickFrame + 10, value: "0" },
-          { frame: 150, value: "0" },
-        ],
-      },
-      // CRITICAL: type must be constant "default" — autoCursorType switches to "pointer" on hover automatically
-      // Never use "0"/"1" values or keyframes here
-      {
-        property: "type",
-        from: "default",
-        to: "default",
-        unit: "",
-      },
-      {
-        property: "opacity",
-        from: "1",
-        to: "1",
-        unit: "",
-        keyframes: [
-          { frame: 0, value: "1" },
-          { frame: 150, value: "1" },
-        ],
-      },
-    ],
-  };
-}
-
-/**
- * Pre-configured cursor track for centered component
- */
-export function createCenteredCursorTrack(
-  width: number,
-  height: number,
-): AnimationTrack {
-  return createComponentCursorTrack({
-    hoverPosition: {
-      x: width / 2 - 16, // -16 to account for cursor size
-      y: height / 2 - 16,
-    },
-  });
-}
-
-/**
- * Pre-configured cursor track for component at specific position
- */
-export function createPositionedCursorTrack(
-  x: number,
-  y: number,
-  width: number,
-  height: number,
-): AnimationTrack {
-  return createComponentCursorTrack({
-    hoverPosition: {
-      x: x + width / 2 - 16,
-      y: y + height / 2 - 16,
-    },
-  });
-}