@agent-native/core 0.77.2 → 0.77.4

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconPlus,
   IconTrash,
@@ -57,7 +58,6 @@ import { MotionCurveSelect } from "./MotionCurveSelect";
 const PROPERTY_OPTIONS = [
   {
     value: "scale",
-    label: "Scale",
     unit: "x",
     min: 0,
     max: 3,
@@ -67,7 +67,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "translateX",
-    label: "Translate X",
     unit: "px",
     min: -500,
     max: 500,
@@ -77,7 +76,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "translateY",
-    label: "Translate Y",
     unit: "px",
     min: -500,
     max: 500,
@@ -87,7 +85,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "translateZ",
-    label: "Translate Z",
     unit: "px",
     min: -500,
     max: 500,
@@ -97,7 +94,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "rotateX",
-    label: "Rotate X",
     unit: "deg",
     min: -360,
     max: 360,
@@ -107,7 +103,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "rotateY",
-    label: "Rotate Y",
     unit: "deg",
     min: -360,
     max: 360,
@@ -117,7 +112,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "rotateZ",
-    label: "Rotate Z",
     unit: "deg",
     min: -360,
     max: 360,
@@ -127,7 +121,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "opacity",
-    label: "Opacity",
     unit: "",
     min: 0,
     max: 1,
@@ -137,7 +130,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "brightness",
-    label: "Brightness",
     unit: "x",
     min: 0,
     max: 3,
@@ -147,7 +139,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "blur",
-    label: "Blur",
     unit: "px",
     min: 0,
     max: 20,
@@ -157,7 +148,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "skewX",
-    label: "Skew X",
     unit: "deg",
     min: -45,
     max: 45,
@@ -167,7 +157,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "skewY",
-    label: "Skew Y",
     unit: "deg",
     min: -45,
     max: 45,
@@ -177,7 +166,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "borderRadius",
-    label: "Border Radius",
     unit: "px",
     min: 0,
     max: 100,
@@ -187,7 +175,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "borderWidth",
-    label: "Border Width",
     unit: "px",
     min: 0,
     max: 20,
@@ -197,7 +184,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "borderOpacity",
-    label: "Border Opacity",
     unit: "",
     min: 0,
     max: 1,
@@ -207,7 +193,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "backgroundOpacity",
-    label: "Background Opacity",
     unit: "",
     min: 0,
     max: 1,
@@ -217,7 +202,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "shadowBlur",
-    label: "Shadow Blur",
     unit: "px",
     min: 0,
     max: 100,
@@ -227,7 +211,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "shadowSpread",
-    label: "Shadow Spread",
     unit: "px",
     min: -50,
     max: 50,
@@ -239,7 +222,6 @@ const PROPERTY_OPTIONS = [
   // This prevents color flashing by starting from the element's actual resting color
   {
     value: "backgroundColor",
-    label: "Background Color",
     unit: "",
     defaultStart: "#1e293b",
     defaultEnd: "#ef4444",
@@ -247,7 +229,6 @@ const PROPERTY_OPTIONS = [
   },
   {
     value: "borderColor",
-    label: "Border Color",
     unit: "",
     defaultStart: "#9ca3af",
     defaultEnd: "#fbbf24",
@@ -256,6 +237,7 @@ const PROPERTY_OPTIONS = [
 ] as const;
 
 export const CurrentElementPanel: React.FC = () => {
+  const t = useT();
   const {
     currentElement,
     getAnimationsForElement,
@@ -280,11 +262,10 @@ export const CurrentElementPanel: React.FC = () => {
       <div className="text-center py-8 px-4 bg-muted/30 rounded-lg border border-dashed border-border m-4">
         <IconClick className="w-8 h-8 mx-auto mb-3 text-green-400/40" />
         <p className="text-xs font-medium text-muted-foreground">
-          No component selected
+          {t("editor.currentElement.noComponentSelected")}
         </p>
         <p className="text-[10px] text-muted-foreground/60 mt-1 leading-relaxed">
-          Hover over an interactive element in the preview to edit its cursor
-          behavior and animations
+          {t("editor.currentElement.noComponentSelectedHelp")}
         </p>
       </div>
     );
@@ -512,8 +493,10 @@ export const CurrentElementPanel: React.FC = () => {
           }
         >
           <Icon className="w-3.5 h-3.5 text-green-400" />
-          <span className="text-xs font-medium capitalize">
-            {animation.triggerType} state
+          <span className="text-xs font-medium">
+            {animation.triggerType === "hover"
+              ? t("editor.currentElement.hoverState")
+              : t("editor.currentElement.clickState")}
           </span>
           <Button
             variant="ghost"
@@ -536,7 +519,9 @@ export const CurrentElementPanel: React.FC = () => {
           <div className="p-3 space-y-3">
             {/* Duration */}
             <div className="space-y-1.5">
-              <Label className="text-xs">Duration (seconds)</Label>
+              <Label className="text-xs">
+                {t("editor.currentElement.durationSeconds")}
+              </Label>
               <input
                 key={`duration-${animation.id}-${animation.duration}`}
                 type="number"
@@ -558,14 +543,14 @@ export const CurrentElementPanel: React.FC = () => {
             <MotionCurveSelect
               value={(animation.easing as EasingKey) || "linear"}
               onChange={(easing) => handleUpdateEasing(animation.id, easing)}
-              label="Motion Curve"
+              label={t("editor.currentElement.motionCurve")}
               accentColor="green-400"
             />
 
             {/* Add Property Section */}
             <div className="space-y-1.5 pb-4">
               <Label className="text-xs text-muted-foreground">
-                Add Property
+                {t("editor.currentElement.addProperty")}
               </Label>
               <div className="flex gap-2">
                 <Button
@@ -584,12 +569,16 @@ export const CurrentElementPanel: React.FC = () => {
                   onValueChange={(val) => setSelectedPropertyToAdd(val)}
                 >
                   <SelectTrigger className="flex-1 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-green-400/40 cursor-pointer">
-                    <SelectValue placeholder="Select a property" />
+                    <SelectValue
+                      placeholder={t("editor.currentElement.selectProperty")}
+                    />
                   </SelectTrigger>
                   <SelectContent>
                     {PROPERTY_OPTIONS.map((opt) => (
                       <SelectItem key={opt.value} value={opt.value}>
-                        {opt.label}
+                        {t(`editor.currentElement.properties.${opt.value}`, {
+                          defaultValue: opt.value,
+                        })}
                       </SelectItem>
                     ))}
                   </SelectContent>
@@ -600,7 +589,7 @@ export const CurrentElementPanel: React.FC = () => {
             {/* Animated Properties */}
             {animation.properties.length > 0 && (
               <Label className="text-xs text-muted-foreground">
-                Animated Properties
+                {t("editor.currentElement.animatedProperties")}
               </Label>
             )}
             <div className="space-y-2">
@@ -625,7 +614,11 @@ export const CurrentElementPanel: React.FC = () => {
                     className="group flex items-center gap-2"
                   >
                     <span className="text-xs font-medium capitalize text-green-400 min-w-[80px] flex-shrink-0">
-                      {prop.property.replace(/([A-Z])/g, " $1").trim()}
+                      {t(`editor.currentElement.properties.${prop.property}`, {
+                        defaultValue: prop.property
+                          .replace(/([A-Z])/g, " $1")
+                          .trim(),
+                      })}
                     </span>
                     <Button
                       variant="ghost"
@@ -692,7 +685,7 @@ export const CurrentElementPanel: React.FC = () => {
       <div className="space-y-2 pb-3 border-b border-border">
         <div className="flex items-center justify-between">
           <div className="text-[10px] uppercase tracking-wider text-muted-foreground font-medium">
-            Editing Component
+            {t("editor.currentElement.editingComponent")}
           </div>
         </div>
         <div className="px-3 py-2 bg-green-500/10 border border-green-500/30 rounded-lg">
@@ -708,7 +701,9 @@ export const CurrentElementPanel: React.FC = () => {
       {/* Cursor Type Section */}
       <div className="space-y-2">
         <div className="flex items-center justify-between">
-          <Label className="text-xs">Cursor Type</Label>
+          <Label className="text-xs">
+            {t("editor.currentElement.cursorType")}
+          </Label>
           {storedCursorType && (
             <Tooltip>
               <TooltipTrigger asChild>
@@ -721,7 +716,9 @@ export const CurrentElementPanel: React.FC = () => {
                   <IconTrash className="w-3 h-3 text-muted-foreground hover:text-green-400" />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Reset to default</TooltipContent>
+              <TooltipContent>
+                {t("editor.currentElement.resetToDefault")}
+              </TooltipContent>
             </Tooltip>
           )}
         </div>
@@ -744,7 +741,9 @@ export const CurrentElementPanel: React.FC = () => {
                 </div>
               </button>
             </TooltipTrigger>
-            <TooltipContent>Arrow (Default)</TooltipContent>
+            <TooltipContent>
+              {t("editor.currentElement.arrowDefault")}
+            </TooltipContent>
           </Tooltip>
 
           {/* Pointer Hand */}
@@ -765,7 +764,9 @@ export const CurrentElementPanel: React.FC = () => {
                 </div>
               </button>
             </TooltipTrigger>
-            <TooltipContent>Pointer (Hand)</TooltipContent>
+            <TooltipContent>
+              {t("editor.currentElement.pointerHand")}
+            </TooltipContent>
           </Tooltip>
 
           {/* Text I-Beam */}
@@ -786,13 +787,15 @@ export const CurrentElementPanel: React.FC = () => {
                 </div>
               </button>
             </TooltipTrigger>
-            <TooltipContent>Text (I-beam)</TooltipContent>
+            <TooltipContent>
+              {t("editor.currentElement.textIBeam")}
+            </TooltipContent>
           </Tooltip>
         </div>
         <p className="text-xs text-muted-foreground">
           {storedCursorType
-            ? "Custom cursor type (click trash to reset)"
-            : "Using inferred cursor type"}
+            ? t("editor.currentElement.customCursorType")
+            : t("editor.currentElement.usingInferredCursorType")}
         </p>
       </div>
 
@@ -812,7 +815,7 @@ export const CurrentElementPanel: React.FC = () => {
             onClick={() => handleAddAnimation("hover")}
           >
             <IconPointer className="w-3 h-3 mr-1" />
-            Add Hover
+            {t("editor.currentElement.addHover")}
           </Button>
         )}
         {!clickAnimation && (
@@ -823,7 +826,7 @@ export const CurrentElementPanel: React.FC = () => {
             onClick={() => handleAddAnimation("click")}
           >
             <IconClick className="w-3 h-3 mr-1" />
-            Add click state
+            {t("editor.currentElement.addClickState")}
           </Button>
         )}
       </div>

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconMouse,
   IconPlus,
@@ -79,6 +80,7 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
   compositionHeight = 1080,
   compositionId,
 }) => {
+  const t = useT();
   const [localState, setLocalState] = useState<CursorState>(DEFAULT_CURSOR);
   const [isOnKeyframe, setIsOnKeyframe] = useState(false);
 
@@ -384,10 +386,10 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
         <IconMouse className="h-8 w-8 mx-auto opacity-50 text-sky-400" />
         <div className="space-y-1">
           <p className="text-xs font-medium text-foreground/80">
-            Add animated cursor
+            {t("raw.cursor.addAnimated")}
           </p>
           <p className="text-[10px] text-muted-foreground leading-relaxed">
-            Animate a cursor overlay for tutorials, demos, and screen recordings
+            {t("raw.cursor.addAnimatedDescription")}
           </p>
         </div>
         <Button
@@ -396,7 +398,7 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
           className="w-full bg-sky-500/10 hover:bg-sky-500/20 text-sky-400 border border-sky-500/30"
         >
           <IconPlus className="h-3 w-3 mr-1" />
-          Cursor Animation
+          {t("raw.cursor.animation")}
         </Button>
       </div>
     );
@@ -424,20 +426,28 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
                 ? "bg-sky-500/20 text-sky-400 border-sky-500/30"
                 : ""
             }`}
-            aria-label={isClickingAtFrame() ? "Click ON" : "Add Click"}
+            aria-label={
+              isClickingAtFrame()
+                ? t("raw.cursor.clickOn")
+                : t("raw.cursor.addClick")
+            }
           >
             <IconClick className="h-3 w-3" />
-            Play click
+            {t("raw.cursor.playClick")}
           </Button>
         </TooltipTrigger>
         <TooltipContent>
-          {isClickingAtFrame() ? "Click ON" : "Add Click"}
+          {isClickingAtFrame()
+            ? t("raw.cursor.clickOn")
+            : t("raw.cursor.addClick")}
         </TooltipContent>
       </Tooltip>
 
       {/* Position Controls */}
       <div className="space-y-2">
-        <Label className="text-xs text-muted-foreground">Position</Label>
+        <Label className="text-xs text-muted-foreground">
+          {t("raw.cursor.position")}
+        </Label>
         <div className="grid grid-cols-2 gap-2">
           <div>
             <Label className="text-[10px] text-muted-foreground">X (px)</Label>
@@ -475,7 +485,9 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
       {/* Cursor Type - Only show when no cursor interactions */}
       {!hasCursorInteractions && (
         <div className="space-y-2">
-          <Label className="text-xs text-muted-foreground">Cursor Type</Label>
+          <Label className="text-xs text-muted-foreground">
+            {t("raw.cursor.type")}
+          </Label>
           <div className="grid grid-cols-3 gap-2">
             {/* Default Arrow */}
             <Tooltip>
@@ -501,7 +513,9 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
                   </div>
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Arrow (Default)</TooltipContent>
+              <TooltipContent>
+                {t("editor.currentElement.arrowDefault")}
+              </TooltipContent>
             </Tooltip>
 
             {/* Pointer Hand */}
@@ -528,7 +542,9 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
                   </div>
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Pointer (Hand)</TooltipContent>
+              <TooltipContent>
+                {t("editor.currentElement.pointerHand")}
+              </TooltipContent>
             </Tooltip>
 
             {/* Text I-Beam */}
@@ -555,7 +571,9 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
                   </div>
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Text (I-beam)</TooltipContent>
+              <TooltipContent>
+                {t("editor.currentElement.textIBeam")}
+              </TooltipContent>
             </Tooltip>
           </div>
         </div>
@@ -566,11 +584,10 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
             <IconAlertCircle className="w-3 h-3 text-blue-400 flex-shrink-0" />
             <div className="flex-1">
               <p className="text-[10px] text-blue-200/90 font-medium">
-                Interactive Composition
+                {t("raw.cursor.interactiveComposition")}
               </p>
               <p className="text-[9px] text-blue-200/70 mt-0.5">
-                Cursor type should be "default" - it will auto-change to
-                "pointer" when hovering over interactive elements
+                {t("raw.cursor.defaultPointerHelp")}
               </p>
             </div>
           </div>
@@ -579,7 +596,9 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
       {/* Visibility & Scale */}
       <div className="grid grid-cols-2 gap-2">
         <div className="space-y-2">
-          <Label className="text-xs text-muted-foreground">Visibility</Label>
+          <Label className="text-xs text-muted-foreground">
+            {t("raw.cursor.visibility")}
+          </Label>
           <Button
             variant="outline"
             size="sm"
@@ -593,12 +612,12 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
             {localState.opacity > 0 ? (
               <>
                 <IconEye className="h-3 w-3 mr-1" />
-                Visible
+                {t("raw.cursor.visible")}
               </>
             ) : (
               <>
                 <IconEyeOff className="h-3 w-3 mr-1" />
-                Hidden
+                {t("raw.cursor.hidden")}
               </>
             )}
           </Button>
@@ -638,7 +657,7 @@ export const CursorControls: React.FC<CursorControlsProps> = ({
         onDuplicate={handleDuplicateKeyframe}
         onReset={resetAll}
         onRemove={removeKeyframe}
-        resetTooltip="Reset all keyframes"
+        resetTooltip={t("raw.keyframes.resetDefaults")}
       />
     </div>
   );

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { useRef, useState, useCallback } from "react";
 
 import {
@@ -34,6 +35,7 @@ export const CursorPositioningOverlay: React.FC<
   onUpdateTrack,
   isPlaying,
 }) => {
+  const t = useT();
   const overlayRef = useRef<HTMLDivElement>(null);
   const [isDragging, setIsDragging] = useState(false);
 
@@ -230,7 +232,7 @@ export const CursorPositioningOverlay: React.FC<
           {/* Invisible overlay for click-and-drag */}
         </div>
       </TooltipTrigger>
-      <TooltipContent>Click and drag to position cursor</TooltipContent>
+      <TooltipContent>{t("raw.cursor.clickDragPosition")}</TooltipContent>
     </Tooltip>
   );
 };

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconChevronRight,
   IconFolder,
@@ -41,6 +42,7 @@ export function LibraryFolderRow({
   onDropComposition,
   onRemoveFromFolder,
 }: LibraryFolderRowProps) {
+  const t = useT();
   const [expanded, setExpanded] = useState(true);
   const [isRenaming, setIsRenaming] = useState(false);
   const [renameValue, setRenameValue] = useState(folder.name);
@@ -176,7 +178,7 @@ export function LibraryFolderRow({
                   <IconPencil className="h-3 w-3" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Rename folder</TooltipContent>
+              <TooltipContent>{t("raw.folders.rename")}</TooltipContent>
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
@@ -187,7 +189,7 @@ export function LibraryFolderRow({
                   <IconTrash className="h-3 w-3" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Delete folder</TooltipContent>
+              <TooltipContent>{t("raw.folders.delete")}</TooltipContent>
             </Tooltip>
           </div>
         )}
@@ -198,7 +200,7 @@ export function LibraryFolderRow({
         <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">
-              Drag videos here
+              {t("raw.folders.dragVideosHere")}
             </div>
           ) : (
             compositions.map((comp) => (
@@ -219,7 +221,9 @@ export function LibraryFolderRow({
                       <IconX className="h-2.5 w-2.5" />
                     </button>
                   </TooltipTrigger>
-                  <TooltipContent>Remove from folder</TooltipContent>
+                  <TooltipContent>
+                    {t("raw.folders.removeFromFolder")}
+                  </TooltipContent>
                 </Tooltip>
               </div>
             ))

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

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client";
+
 import {
   Tooltip,
   TooltipContent,
@@ -26,24 +28,25 @@ export const MotionCurveSelect: React.FC<MotionCurveSelectProps> = ({
   value,
   onChange,
   accentColor = "blue-400",
-  label = "Motion Curve (arriving)",
+  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">{label}</Label>
+      <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="Controls how the animation moves to this keyframe"
+              aria-label={t("raw.motion.controlsKeyframe")}
             >
               <SelectValue />
             </SelectTrigger>
           </TooltipTrigger>
-          <TooltipContent>
-            Controls how the animation moves to this keyframe
-          </TooltipContent>
+          <TooltipContent>{t("raw.motion.controlsKeyframe")}</TooltipContent>
         </Tooltip>
         <SelectContent>
           {EASING_OPTIONS.map((opt) => (

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

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client";
+
 import type { CompositionEntry } from "@/remotion/registry";
 
 type PropsEditorProps = {
@@ -180,6 +182,8 @@ export function PropsEditor({
   props,
   onPropsChange,
 }: PropsEditorProps) {
+  const t = useT();
+
   const handleChange = (key: string, value: any) => {
     onPropsChange({ ...props, [key]: value });
   };
@@ -194,10 +198,10 @@ export function PropsEditor({
       ) : (
         <div className="text-center py-6 px-4 bg-muted/30 rounded-lg border border-dashed border-border">
           <p className="text-xs text-muted-foreground">
-            No properties to configure
+            {t("raw.props.emptyTitle")}
           </p>
           <p className="text-xs text-muted-foreground/60 mt-1">
-            Add to the video by asking the agent to create something
+            {t("raw.props.emptyDescription")}
           </p>
         </div>
       )}