@agent-native/core 0.85.7 → 0.86.0

package/corpus/templates/videos/app/remotion/ui-components/Cursor.tsx

@@ -1,182 +0,0 @@
-import React from "react";
-
-/**
- * Cursor Component - Animated cursor for Remotion compositions
- *
- * Displays a cursor (arrow, pointer hand, or text I-beam) at specified coordinates.
- * Useful for screen recording simulations, UI demonstrations, and interactive tutorials.
- */
-
-export type CursorType = "default" | "pointer" | "text";
-
-export type CursorProps = {
-  /** X position in pixels (from left edge) */
-  x?: number;
-  /** Y position in pixels (from top edge) */
-  y?: number;
-  /** Cursor type */
-  type?: CursorType;
-  /** Auto cursor type from hover zones (overrides type when provided) */
-  autoType?: CursorType;
-  /** Overall opacity */
-  opacity?: number;
-  /** Scale factor */
-  scale?: number;
-  /** Is currently clicking (triggers click animation) */
-  isClicking?: boolean;
-  /** Current frame (for click animation timing) */
-  currentFrame?: number;
-  /** Array of frames where clicks start (for multi-click animations) */
-  clickStartFrames?: number[];
-};
-
-export const Cursor: React.FC<CursorProps> = ({
-  x = 0,
-  y = 0,
-  type = "default",
-  autoType,
-  opacity = 1,
-  scale = 1,
-  isClicking = false,
-  currentFrame = 0,
-  clickStartFrames = [],
-}) => {
-  // Click animation: quick scale down and back up over 6 frames
-  // Check all click start frames to find if any animation should be playing
-  let clickScale = 1;
-  const clickAnimationDuration = 6;
-
-  for (const clickFrame of clickStartFrames) {
-    const framesSinceClick = currentFrame - clickFrame;
-    if (framesSinceClick >= 0 && framesSinceClick < clickAnimationDuration) {
-      // 0→3: scale down to 0.85
-      // 3→6: scale back up to 1.0
-      if (framesSinceClick < 3) {
-        clickScale = 1 - (framesSinceClick / 3) * 0.15;
-      } else {
-        clickScale = 0.85 + ((framesSinceClick - 3) / 3) * 0.15;
-      }
-      break; // Only play one click animation at a time
-    }
-  }
-
-  const finalScale = scale * clickScale;
-
-  // Use autoType if provided (from hover zones), otherwise use manual type
-  const effectiveType = autoType ?? type;
-
-  return (
-    <div
-      style={{
-        position: "absolute",
-        left: x,
-        top: y,
-        opacity,
-        transform: `scale(${finalScale})`,
-        transformOrigin: "top left",
-        pointerEvents: "none",
-        zIndex: 9999,
-      }}
-    >
-      {effectiveType === "default" && <DefaultCursor />}
-      {effectiveType === "pointer" && <PointerCursor />}
-      {effectiveType === "text" && <TextCursor />}
-    </div>
-  );
-};
-
-// ─── Default Arrow Cursor ────────────────────────────────────────────────────
-
-export const DefaultCursor: React.FC = () => (
-  <svg
-    width="25"
-    height="38"
-    viewBox="0 0 25 38"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{ display: "block" }}
-  >
-    <path
-      d="M0 33.4066V0L24.2197 24.2198H10.022L9.1868 24.4285L0 33.4066Z"
-      fill="white"
-    />
-    <path
-      d="M19.0001 34.8682L11.4836 38L1.67041 14.8242L9.39567 11.6924L19.0001 34.8682Z"
-      fill="white"
-    />
-    <path
-      d="M9.76019 17.9947L5.90967 19.6112L12.3755 35.0133L16.226 33.3968L9.76019 17.9947Z"
-      fill="black"
-    />
-    <path
-      d="M2.08789 5.01111V28.3957L8.35162 22.3408L9.18678 22.132H19.2087L2.08789 5.01111Z"
-      fill="black"
-    />
-  </svg>
-);
-
-// ─── Pointer Hand Cursor ─────────────────────────────────────────────────────
-
-export const PointerCursor: React.FC = () => (
-  <svg
-    width="39"
-    height="41"
-    viewBox="0 0 39 41"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{ display: "block" }}
-  >
-    <path
-      d="M8.28877 31.6628C7.52144 30.6397 6.7541 28.8492 5.21944 26.5472C4.4521 25.2684 2.1501 22.7106 1.38277 21.6875C0.871216 20.6644 0.871215 20.1528 1.12699 19.1297C1.38277 17.595 2.91744 16.3161 4.70788 16.3161C5.98677 16.3161 7.26566 17.3392 8.28877 18.1066C8.80032 18.6181 9.56766 19.6412 10.0792 20.1528C10.5908 20.6644 10.5908 20.9201 11.1023 21.4317C11.6139 22.199 11.8697 22.7106 11.6139 21.6875C11.3581 20.4086 11.1023 18.3624 10.5908 16.3161C10.335 14.7815 10.0792 14.5257 9.82343 13.5026C9.56766 12.2237 9.31188 11.4564 9.0561 10.1775C8.80033 9.41014 8.54455 7.36391 8.28877 6.3408C8.03299 5.06191 8.03299 2.75991 9.0561 1.7368C9.82344 0.96947 11.3581 0.713693 12.3812 1.22525C13.6601 1.99258 14.4274 3.78303 14.6832 4.55036C15.1948 5.82925 15.7063 7.61969 15.9621 9.66591C16.4737 12.2237 17.241 16.0604 17.241 16.8277C17.241 15.8046 16.9852 14.0141 17.241 12.991C17.4968 12.2237 18.0083 11.2006 19.0314 10.9448C19.7988 10.689 20.5661 10.689 21.3334 10.689C22.1008 10.9448 22.8681 11.4564 23.3797 11.9679C24.4028 13.5026 24.4028 16.8277 24.4028 16.5719C24.6585 15.5488 24.6585 13.5026 25.1701 12.4795C25.4259 11.9679 26.449 11.4564 26.9605 11.2006C27.7279 10.9448 28.751 10.9448 29.5183 11.2006C30.0299 11.2006 31.053 11.9679 31.3088 12.4795C31.8203 13.2468 32.0761 15.8046 32.3319 16.8277C32.3319 17.0835 32.5877 15.8046 33.0992 15.0372C34.1223 13.5026 37.7032 12.991 37.959 16.5719C37.959 18.3624 37.959 18.1066 37.959 19.3855C37.959 20.6644 37.959 21.4317 37.959 22.4548C37.959 23.4779 37.7032 25.7799 37.4474 26.803C37.1917 27.5704 36.4243 29.3608 35.657 30.3839C35.657 30.3839 32.8434 33.4532 32.5876 34.9879C32.3319 36.5226 32.3319 36.5226 32.3319 37.5457C32.3319 38.5688 32.5876 39.8477 32.5876 39.8477C32.5876 39.8477 30.5414 40.1035 29.5183 39.8477C28.4952 39.5919 27.2163 37.8015 26.9605 37.0341C26.449 36.2668 25.6817 36.2668 25.1701 37.0341C24.6585 38.0572 23.3797 39.8477 22.3565 39.8477C20.5661 40.1035 16.9852 39.8477 14.4274 39.8477C14.4274 39.8477 14.939 37.2899 13.9159 36.2668C13.1485 35.4995 11.8697 34.2206 11.1023 33.4532L8.28877 31.6628Z"
-      fill="white"
-    />
-    <path
-      d="M8.28877 31.6628C7.52144 30.6397 6.7541 28.8492 5.21944 26.5472C4.4521 25.2684 2.1501 22.7106 1.38277 21.6875C0.871216 20.6644 0.871215 20.1528 1.12699 19.1297C1.38277 17.595 2.91744 16.3161 4.70788 16.3161C5.98677 16.3161 7.26566 17.3392 8.28877 18.1066C8.80032 18.6181 9.56766 19.6412 10.0792 20.1528C10.5908 20.6644 10.5908 20.9201 11.1023 21.4317C11.6139 22.199 11.8697 22.7106 11.6139 21.6875C11.3581 20.4086 11.1023 18.3624 10.5908 16.3161C10.335 14.7815 10.0792 14.5257 9.82343 13.5026C9.56766 12.2237 9.31188 11.4564 9.0561 10.1775C8.80033 9.41014 8.54455 7.36391 8.28877 6.3408C8.03299 5.06191 8.03299 2.75991 9.0561 1.7368C9.82344 0.96947 11.3581 0.713693 12.3812 1.22525C13.6601 1.99258 14.4274 3.78303 14.6832 4.55036C15.1948 5.82925 15.7063 7.61969 15.9621 9.66591C16.4737 12.2237 17.241 16.0604 17.241 16.8277C17.241 15.8046 16.9852 14.0141 17.241 12.991C17.4968 12.2237 18.0083 11.2006 19.0314 10.9448C19.7988 10.689 20.5661 10.689 21.3334 10.689C22.1008 10.9448 22.8681 11.4564 23.3797 11.9679C24.4028 13.5026 24.4028 16.8277 24.4028 16.5719C24.6585 15.5488 24.6585 13.5026 25.1701 12.4795C25.4259 11.9679 26.449 11.4564 26.9605 11.2006C27.7279 10.9448 28.751 10.9448 29.5183 11.2006C30.0299 11.2006 31.053 11.9679 31.3088 12.4795C31.8203 13.2468 32.0761 15.8046 32.3319 16.8277C32.3319 17.0835 32.5877 15.8046 33.0992 15.0372C34.1223 13.5026 37.7032 12.991 37.959 16.5719C37.959 18.3624 37.959 18.1066 37.959 19.3855C37.959 20.6644 37.959 21.4317 37.959 22.4548C37.959 23.4779 37.7032 25.7799 37.4474 26.803C37.1917 27.5704 36.4243 29.3608 35.657 30.3839C35.657 30.3839 32.8434 33.4532 32.5876 34.9879C32.3319 36.5226 32.3319 36.5226 32.3319 37.5457C32.3319 38.5688 32.5876 39.8477 32.5876 39.8477C32.5876 39.8477 30.5414 40.1035 29.5183 39.8477C28.4952 39.5919 27.2163 37.8015 26.9605 37.0341C26.449 36.2668 25.6817 36.2668 25.1701 37.0341C24.6585 38.0572 23.3797 39.8477 22.3565 39.8477C20.5661 40.1035 16.9852 39.8477 14.4274 39.8477C14.4274 39.8477 14.939 37.2899 13.9159 36.2668C13.1485 35.4995 11.8697 34.2206 11.1023 33.4532L8.28877 31.6628Z"
-      stroke="black"
-      strokeWidth="1.91833"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M24.4023 32.4301L24.1465 23.7336"
-      stroke="black"
-      strokeWidth="1.91833"
-      strokeLinecap="round"
-    />
-    <path
-      d="M19.2866 23.7336V32.4301"
-      stroke="black"
-      strokeWidth="1.91833"
-      strokeLinecap="round"
-    />
-    <path
-      d="M28.9561 32.7116V24.0151"
-      stroke="black"
-      strokeWidth="1.91833"
-      strokeLinecap="round"
-    />
-  </svg>
-);
-
-// ─── Text I-Beam Cursor ──────────────────────────────────────────────────────
-
-export const TextCursor: React.FC = () => (
-  <svg
-    width="21"
-    height="40"
-    viewBox="0 0 21 40"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={{ display: "block" }}
-  >
-    <path
-      fillRule="evenodd"
-      clipRule="evenodd"
-      d="M15.9428 1.14614C16.9037 1.08086 17.9336 1.11093 18.6831 1.17078L18.9014 5.60897C17.7457 5.55055 16.9843 5.52876 16.321 5.56852C15.0516 5.84514 14.4707 6.15382 13.8033 6.61716C13.3445 6.93337 12.5931 7.96045 12.276 8.6684V18.7409H14.4903V23.1429H12.276V31.079C12.5929 31.786 13.3445 32.811 13.8131 33.1327C14.4383 33.5686 14.9832 33.8814 15.4657 34.0471C17.5207 34.295 17.377 34.1447 18.5473 34.1821L19.0831 38.569C17.666 38.6392 16.7775 38.6537 15.9412 38.5962C15.249 38.5487 14.6689 38.4535 14.2238 38.3095C13.2989 38.0218 12.3321 37.5097 11.2885 36.782C10.9146 36.5254 10.4961 36.1372 10.084 35.6768C9.70591 36.1245 9.33061 36.5033 9.01029 36.7541C8.11378 37.4505 7.08814 37.9615 5.99343 38.3051C5.52384 38.4565 4.94508 38.551 4.25495 38.5985C3.2909 38.6648 2.25801 38.6347 1.50791 38.5745L1.29287 34.1364C2.44153 34.1948 3.20472 34.2168 3.86905 34.1767C5.24173 33.8672 5.81441 33.6176 6.28142 33.2549C6.71881 32.9124 7.57842 31.7456 7.83834 31.072L7.86568 23.1429H5.64633V18.7409H7.86951V8.68294C7.57656 8.00179 6.72342 6.83272 6.29135 6.49597C5.84467 6.15032 5.31782 5.88872 4.73454 5.6948C2.6761 5.44842 2.81899 5.59766 1.64857 5.56089L1.10938 1.17378C2.53065 1.10366 3.41818 1.08923 4.25332 1.14606C4.94263 1.19297 5.52063 1.28671 5.98304 1.43465C7.09277 1.78628 8.11361 2.29515 9.0131 2.9912C9.33127 3.23917 9.70652 3.61773 10.0853 4.06625C10.4947 3.60806 10.9095 3.22221 11.2788 2.96771C12.332 2.2365 13.2939 1.72594 14.2053 1.4372C14.6742 1.28684 15.2526 1.19303 15.9428 1.14614Z"
-      fill="black"
-      stroke="white"
-      strokeWidth="2.21875"
-      strokeLinejoin="round"
-    />
-  </svg>
-);

package/corpus/templates/videos/app/remotion/ui-components/InteractiveButton.tsx

@@ -1,116 +0,0 @@
-import React from "react";
-
-import { AnimatedElement } from "@/remotion/components/AnimatedElement";
-import type { CursorFrame } from "@/remotion/hooks/useCursorHistory";
-import { useInteractiveComponent } from "@/remotion/hooks/useInteractiveComponent";
-import type { AnimationTrack } from "@/types";
-
-/**
- * InteractiveButton - A reusable button component that demonstrates best practices
- * for creating interactive elements in Video Studio.
- *
- * KEY PRINCIPLES:
- * 1. Always use useInteractiveComponent hook - makes it selectable
- * 2. Define precise zones - accurate hover/click detection
- * 3. Register with cursor system - shows in Cursor Interactions panel
- * 4. Use AnimatedElement - automatically applies ALL animated properties
- * 5. Safe fallbacks built-in - works without animations configured
- *
- * CRITICAL: Use AnimatedElement instead of manual property extraction!
- * This ensures ALL properties added via UI (backgroundColor, scale, blur, etc.) work automatically.
- *
- * @example
- * ```tsx
- * <InteractiveButton
- *   id="my-button"
- *   compositionId="my-comp"
- *   label="Click Me"
- *   x={100}
- *   y={100}
- *   width={200}
- *   height={60}
- *   cursorHistory={context.cursorHistory}
- *   tracks={context.tracks}
- *   registerForCursor={context.registerForCursor}
- * />
- * ```
- */
-export function InteractiveButton({
-  id,
-  compositionId,
-  label,
-  x,
-  y,
-  width,
-  height,
-  backgroundColor = "#00B5FF",
-  textColor = "#ffffff",
-  cursorHistory,
-  tracks,
-  registerForCursor,
-  onClick,
-}: {
-  id: string;
-  compositionId: string;
-  label: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  backgroundColor?: string;
-  textColor?: string;
-  cursorHistory: CursorFrame[];
-  tracks: AnimationTrack[];
-  registerForCursor: (component: any) => void;
-  onClick?: () => void;
-}) {
-  // Register as interactive component - THIS IS REQUIRED for all interactive elements
-  const interactive = useInteractiveComponent({
-    compositionId,
-    id,
-    elementType: "Button",
-    label,
-    zone: { x, y, width, height },
-    cursorHistory,
-    tracks,
-    interactiveElementType: "button",
-  });
-
-  // Register with cursor system so it shows in Cursor Interactions panel
-  React.useEffect(() => {
-    registerForCursor(interactive);
-  }, [interactive.hover.isHovering, interactive.click.isClicking]);
-
-  // Handle click events
-  React.useEffect(() => {
-    if (interactive.click.isClicking && onClick) {
-      onClick();
-    }
-  }, [interactive.click.isClicking, onClick]);
-
-  return (
-    <AnimatedElement
-      interactive={interactive}
-      as="div"
-      style={{
-        position: "absolute",
-        left: x,
-        top: y,
-        width,
-        height,
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        backgroundColor,
-        borderRadius: 12,
-        fontFamily: "Inter, sans-serif",
-        fontSize: 16,
-        fontWeight: 600,
-        color: textColor,
-        cursor: interactive.hover.isHovering ? "pointer" : "default",
-      }}
-    >
-      {label}
-    </AnimatedElement>
-  );
-}

package/corpus/templates/videos/app/remotion/ui-components/InteractiveCard.tsx

@@ -1,126 +0,0 @@
-import React from "react";
-
-import { AnimatedElement } from "@/remotion/components/AnimatedElement";
-import type { CursorFrame } from "@/remotion/hooks/useCursorHistory";
-import { useInteractiveComponent } from "@/remotion/hooks/useInteractiveComponent";
-import type { AnimationTrack } from "@/types";
-
-export function InteractiveCard({
-  id,
-  compositionId,
-  title,
-  description,
-  icon,
-  x,
-  y,
-  width,
-  height,
-  backgroundColor = "rgba(17, 24, 39, 0.7)",
-  borderColor = "#374151",
-  accentColor = "#00B5FF",
-  cursorHistory,
-  tracks,
-  registerForCursor,
-}: {
-  id: string;
-  compositionId: string;
-  title: string;
-  description?: string;
-  icon?: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  backgroundColor?: string;
-  borderColor?: string;
-  accentColor?: string;
-  cursorHistory: CursorFrame[];
-  tracks: AnimationTrack[];
-  registerForCursor: (component: any) => void;
-}) {
-  const interactive = useInteractiveComponent({
-    compositionId,
-    id,
-    elementType: "Card",
-    label: title,
-    zone: { x, y, width, height },
-    cursorHistory,
-    tracks,
-    interactiveElementType: "button",
-  });
-
-  React.useEffect(() => {
-    registerForCursor(interactive);
-  }, [interactive.hover.isHovering, interactive.click.isClicking]);
-
-  const glow = (interactive.animatedProperties?.glow as number) ?? 0;
-
-  return (
-    <AnimatedElement
-      interactive={interactive}
-      as="div"
-      style={{
-        position: "absolute",
-        left: x,
-        top: y,
-        width,
-        height,
-        borderRadius: 16,
-        borderWidth: "2px",
-        borderStyle: "solid",
-        borderColor: borderColor,
-        backdropFilter: "blur(10px)",
-        padding: 24,
-        fontFamily: "Inter, sans-serif",
-        backgroundColor,
-        cursor: interactive.hover.isHovering ? "pointer" : "default",
-      }}
-    >
-      {icon && (
-        <div
-          style={{
-            fontSize: 48,
-            marginBottom: 16,
-            filter: `drop-shadow(0 0 ${Math.max(10, glow / 2)}px ${accentColor})`,
-          }}
-        >
-          {icon}
-        </div>
-      )}
-
-      <div
-        style={{
-          fontSize: 20,
-          fontWeight: 700,
-          color: "#f1f5f9",
-          marginBottom: 8,
-        }}
-      >
-        {title}
-      </div>
-
-      {description && (
-        <div
-          style={{
-            fontSize: 14,
-            color: "#94a3b8",
-            lineHeight: 1.6,
-          }}
-        >
-          {description}
-        </div>
-      )}
-
-      <div
-        style={{
-          marginTop: 16,
-          height: 3,
-          background: `linear-gradient(90deg, ${accentColor} 0%, transparent 100%)`,
-          borderRadius: 2,
-          opacity: 0.6 + (interactive.hover.isHovering ? 0.4 : 0),
-          transition: "opacity 0.3s ease",
-        }}
-      />
-    </AnimatedElement>
-  );
-}

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

@@ -1,16 +0,0 @@
-/**
- * Interactive UI Components for Video Studio
- *
- * All components follow Video Studio best practices:
- * ✓ Use useInteractiveComponent hook
- * ✓ Register with cursor system
- * ✓ Safe animation fallbacks (?.value ?? 0)
- * ✓ Apply all animation properties
- * ✓ Provide visual feedback
- *
- * See animation-tracks skill for implementation details.
- */
-
-export { InteractiveButton } from "./InteractiveButton";
-export { InteractiveCard } from "./InteractiveCard";
-export { Cursor } from "./Cursor";