@agent-native/core 0.77.2 → 0.77.4

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

@@ -347,7 +347,7 @@ export function Sidebar({
                       <IconFolderPlus className="h-3.5 w-3.5" />
                     </button>
                   </TooltipTrigger>
-                  <TooltipContent>New folder</TooltipContent>
+                  <TooltipContent>{t("raw.folders.newFolder")}</TooltipContent>
                 </Tooltip>
               </div>
 
@@ -428,7 +428,7 @@ export function Sidebar({
                   {folders.length > 0 &&
                     uncategorizedCompositions.length === 0 && (
                       <p className="text-[10px] text-center text-muted-foreground/40">
-                        Drop here to remove from folder
+                        {t("raw.folders.dropToRemove")}
                       </p>
                     )}
                 </div>
@@ -503,7 +503,7 @@ export function Sidebar({
                       <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
                         <IconClick className="w-3.5 h-3.5 text-green-400" />
                         <span className="text-xs font-medium">
-                          Cursor Interactions
+                          {t("raw.sidebar.cursorInteractions")}
                         </span>
                         <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
                       </div>
@@ -524,7 +524,7 @@ export function Sidebar({
                     <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
                       <IconAdjustmentsHorizontal className="w-3.5 h-3.5 text-amber-400" />
                       <span className="text-xs font-medium">
-                        Animation Track
+                        {t("raw.sidebar.animationTrack")}
                       </span>
                       {selectedTrack && (
                         <span className="text-[9px] font-mono text-muted-foreground/60 ml-auto mr-2">
@@ -547,10 +547,10 @@ export function Sidebar({
                     ) : (
                       <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">
-                          Select a track to edit its properties
+                          {t("raw.sidebar.selectTrack")}
                         </p>
                         <p className="text-xs text-muted-foreground/60 mt-1">
-                          Click any track in the timeline below
+                          {t("raw.sidebar.clickAnyTrack")}
                         </p>
                       </div>
                     )}
@@ -596,7 +596,7 @@ export function Sidebar({
               </div>
             ) : (
               <div className="text-xs text-muted-foreground text-center py-8">
-                Select a composition to edit properties
+                {t("raw.sidebar.selectComposition")}
               </div>
             )}
           </TabsContent>

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconCamera,
   IconMouse,
@@ -402,7 +403,7 @@ function RangeBar({
     window.addEventListener("mouseup", onMouseUp);
   };
 
-  const isZoomed = viewStart > 0 || viewEnd < durationInFrames;
+  const isZoomed = viewStart > 0 || viewEnd < durationInFrames; // i18n-ignore scanner false positive
   const HANDLE_COLOR = isZoomed
     ? "rgba(0,181,255,0.85)"
     : "rgba(148,163,184,0.65)";
@@ -513,6 +514,7 @@ export function Timeline({
   onCameraKeyframeClick,
   isPlaying = false,
 }: TimelineProps) {
+  const t = useT();
   const isMobile = useIsMobile();
   const LABEL_WIDTH = isMobile ? LABEL_WIDTH_MOBILE : LABEL_WIDTH_DESKTOP;
   const barAreaRef = useRef<HTMLDivElement>(null);
@@ -1923,7 +1925,7 @@ export function Timeline({
           <AlertDialogHeader>
             <AlertDialogTitle className="flex items-center gap-3 text-sm">
               <IconAlertCircle className="w-5 h-5 text-yellow-500 flex-shrink-0" />
-              Keyframe overlap
+              {t("raw.timeline.keyframeOverlap")}
             </AlertDialogTitle>
             <AlertDialogDescription className="text-xs leading-relaxed">
               Moving the keyframe(s) would create an overlap at frame{" "}
@@ -1968,7 +1970,7 @@ export function Timeline({
               }}
               className="w-full"
             >
-              Replace Existing Keyframes
+              {t("raw.timeline.replaceExistingKeyframes")}
             </AlertDialogAction>
             <AlertDialogCancel
               onClick={() => {
@@ -1988,7 +1990,7 @@ export function Timeline({
               }}
               className="w-full"
             >
-              Undo Move
+              {t("raw.timeline.undoMove")}
             </AlertDialogCancel>
           </AlertDialogFooter>
         </AlertDialogContent>
@@ -2047,14 +2049,14 @@ export function Timeline({
                   className="w-full px-3 py-1.5 text-left text-xs hover:bg-secondary transition-colors flex items-center gap-2 text-foreground/80 hover:text-foreground"
                 >
                   <IconRotate className="w-3.5 h-3.5 text-muted-foreground" />
-                  Clear track
+                  {t("raw.timeline.clearTrack")}
                 </button>
                 <button
                   onClick={() => handleDeleteTrack(contextMenu.trackId)}
                   className="w-full px-3 py-1.5 text-left text-xs hover:bg-destructive/10 transition-colors flex items-center gap-2 text-foreground/80 hover:text-destructive"
                 >
                   <IconTrash className="w-3.5 h-3.5 text-muted-foreground" />
-                  Delete track
+                  {t("raw.timeline.deleteTrack")}
                 </button>
               </div>
             </div>

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconClock,
   IconPlus,
@@ -110,6 +111,7 @@ type TrackPropertiesPanelProps = {
 // ─── Read-only code block ─────────────────────────────────────────────────────
 
 function CodeBlock({ snippet }: { snippet: string }) {
+  const t = useT();
   const [copied, setCopied] = useState(false);
 
   const handleCopy = () => {
@@ -125,7 +127,7 @@ function CodeBlock({ snippet }: { snippet: string }) {
         <div className="flex items-center gap-1.5">
           <IconBraces size={9} className="text-zinc-500/70" />
           <span className="text-[9px] font-mono text-zinc-500/70 uppercase tracking-wider">
-            read-only
+            {t("editor.track.readOnly")}
           </span>
         </div>
         <button
@@ -138,7 +140,7 @@ function CodeBlock({ snippet }: { snippet: string }) {
           ) : (
             <IconCopy size={9} />
           )}
-          {copied ? "copied" : "copy"}
+          {copied ? t("editor.track.copied") : t("editor.track.copy")}
         </button>
       </div>
       <pre className="bg-zinc-950/50 text-[10px] font-mono text-zinc-400 leading-relaxed p-2.5 overflow-x-auto whitespace-pre">
@@ -159,6 +161,7 @@ function ExpressionPropRow({
   onRemove: () => void;
   onUpdate?: (updated: AnimatedProp) => void;
 }) {
+  const t = useT();
   const isProgrammatic = prop.programmatic ?? false;
   // Start collapsed - code is read-only and for curious users only
   const [expanded, setExpanded] = useState(false);
@@ -232,7 +235,7 @@ function ExpressionPropRow({
               style={{ color: `${EXPR_COLOR}70` }}
             >
               <span className="uppercase tracking-wider">
-                {expanded ? "hide" : "code"}
+                {expanded ? t("editor.track.hide") : t("editor.track.code")}
               </span>
               <IconChevronDown
                 size={10}
@@ -241,13 +244,17 @@ function ExpressionPropRow({
             </button>
           </TooltipTrigger>
           <TooltipContent>
-            {expanded ? "Hide code" : "View expression code"}
+            {expanded
+              ? t("editor.track.hideCode")
+              : t("editor.track.viewExpressionCode")}
           </TooltipContent>
         </Tooltip>
 
         <button
           onClick={onRemove}
-          aria-label={`Remove ${prop.property}`}
+          aria-label={t("editor.track.removeProperty", {
+            property: prop.property,
+          })}
           className="flex-shrink-0 text-muted-foreground/30 hover:text-destructive/60 transition-colors"
         >
           <IconX size={11} />
@@ -264,7 +271,7 @@ function ExpressionPropRow({
             className="text-[10px] uppercase tracking-wider font-semibold"
             style={{ color: `${EXPR_COLOR}80` }}
           >
-            Parameters
+            {t("editor.track.parameters")}
           </span>
           <div className="space-y-2">
             {prop.parameters.map((param) => {
@@ -273,7 +280,9 @@ function ExpressionPropRow({
               return (
                 <div key={param.name} className="space-y-0.5">
                   <label className="text-[9px] text-muted-foreground/60 font-mono">
-                    {param.label}
+                    {t(`editor.track.parametersByName.${param.name}`, {
+                      defaultValue: param.label,
+                    })}
                   </label>
                   <input
                     type="number"
@@ -319,7 +328,7 @@ function ExpressionPropRow({
                   className="text-[10px] uppercase tracking-wider font-semibold"
                   style={{ color: `${EXPR_COLOR}80` }}
                 >
-                  How it works
+                  {t("editor.track.howItWorks")}
                 </span>
               </div>
               <p className="text-[11px] leading-relaxed text-muted-foreground/70">
@@ -335,12 +344,12 @@ function ExpressionPropRow({
                 className="text-[10px] uppercase tracking-wider font-semibold"
                 style={{ color: `${EXPR_COLOR}80` }}
               >
-                Values
+                {t("editor.track.values")}
               </span>
               <div className="flex items-center gap-1.5">
                 <div className="flex-1 space-y-0.5">
                   <span className="text-[9px] text-muted-foreground/40 font-mono">
-                    from
+                    {t("editor.track.from")}
                   </span>
                   <input
                     type="number"
@@ -354,7 +363,7 @@ function ExpressionPropRow({
                 </span>
                 <div className="flex-1 space-y-0.5">
                   <span className="text-[9px] text-muted-foreground/40 font-mono">
-                    to
+                    {t("editor.track.to")}
                   </span>
                   <input
                     type="number"
@@ -370,8 +379,7 @@ function ExpressionPropRow({
                 )}
               </div>
               <p className="text-[9px] text-muted-foreground/35 italic">
-                Edit these values in the track's Animated Properties section
-                above.
+                {t("editor.track.editValuesInAnimatedProperties")}
               </p>
             </div>
           )}
@@ -384,10 +392,10 @@ function ExpressionPropRow({
                   className="text-[10px] uppercase tracking-wider font-semibold"
                   style={{ color: `${EXPR_COLOR}80` }}
                 >
-                  Expression
+                  {t("editor.track.expression")}
                 </span>
                 <span className="text-[8px] text-muted-foreground/40 font-mono italic">
-                  read-only
+                  {t("editor.track.readOnly")}
                 </span>
               </div>
               <CodeBlock snippet={prop.codeSnippet} />
@@ -412,6 +420,7 @@ function AnimatedPropRow({
   onUpdate: (updated: AnimatedProp) => void;
   onRemove: () => void;
 }) {
+  const t = useT();
   const isCustom = prop.isCustom ?? false;
   const hasCode = !!prop.codeSnippet || !!prop.description;
   const [codeOpen, setCodeOpen] = useState(false);
@@ -433,7 +442,7 @@ function AnimatedPropRow({
         {isCustom ? (
           <input
             value={prop.property === "custom" ? "" : prop.property}
-            placeholder="css-property…"
+            placeholder={t("editor.track.cssPropertyPlaceholder")}
             onChange={(e) =>
               onUpdate({ ...prop, property: e.target.value || "custom" })
             }
@@ -480,14 +489,18 @@ function AnimatedPropRow({
               </button>
             </TooltipTrigger>
             <TooltipContent>
-              {codeOpen ? "Hide details" : "How this works"}
+              {codeOpen
+                ? t("editor.track.hideDetails")
+                : t("editor.track.howThisWorks")}
             </TooltipContent>
           </Tooltip>
         )}
 
         <button
           onClick={onRemove}
-          aria-label={`Remove ${prop.property}`}
+          aria-label={t("editor.track.removeProperty", {
+            property: prop.property,
+          })}
           className="flex-shrink-0 text-muted-foreground/40 hover:text-destructive/70 transition-colors"
         >
           <IconX size={11} />
@@ -499,24 +512,24 @@ function AnimatedPropRow({
         <div className="space-y-1.5">
           <div className="flex items-start gap-1">
             <span className="text-[9px] text-muted-foreground/50 w-7 pt-1 flex-shrink-0 font-mono">
-              from
+              {t("editor.track.from")}
             </span>
             <textarea
               rows={2}
               value={prop.from}
-              placeholder="e.g. translateX(-100%) rotate(10deg)"
+              placeholder={t("editor.track.fromExample")}
               onChange={(e) => onUpdate({ ...prop, from: e.target.value })}
               className="flex-1 bg-background border border-border/60 rounded px-1.5 py-1 text-[10px] font-mono text-foreground/80 resize-none focus:outline-none focus:ring-1 focus:ring-primary/40"
             />
           </div>
           <div className="flex items-start gap-1">
             <span className="text-[9px] text-muted-foreground/50 w-7 pt-1 flex-shrink-0 font-mono">
-              to
+              {t("editor.track.to")}
             </span>
             <textarea
               rows={2}
               value={prop.to}
-              placeholder="e.g. translateX(0) rotate(0deg)"
+              placeholder={t("editor.track.toExample")}
               onChange={(e) => onUpdate({ ...prop, to: e.target.value })}
               className="flex-1 bg-background border border-border/60 rounded px-1.5 py-1 text-[10px] font-mono text-foreground/80 resize-none focus:outline-none focus:ring-1 focus:ring-primary/40"
             />
@@ -555,7 +568,7 @@ function AnimatedPropRow({
           {prop.keyframes && prop.keyframes.length > 0 && (
             <div className="space-y-0.5">
               <label className="text-[8px] text-muted-foreground/50 uppercase tracking-wider">
-                Motion Curve
+                {t("editor.currentElement.motionCurve")}
               </label>
               <Select
                 value={prop.easing ?? "linear"}
@@ -567,13 +580,13 @@ function AnimatedPropRow({
                   <TooltipTrigger asChild>
                     <SelectTrigger
                       className="w-full h-auto text-[10px] bg-background border border-border/60 rounded px-1.5 py-1 text-foreground/80 focus:outline-none focus:ring-1 focus:ring-primary/40"
-                      aria-label="Applies to all keyframe segments"
+                      aria-label={t("editor.track.appliesToAllKeyframes")}
                     >
                       <SelectValue />
                     </SelectTrigger>
                   </TooltipTrigger>
                   <TooltipContent>
-                    Applies to all keyframe segments
+                    {t("editor.track.appliesToAllKeyframes")}
                   </TooltipContent>
                 </Tooltip>
                 <SelectContent>
@@ -603,7 +616,7 @@ function AnimatedPropRow({
                   style={{ color: accentColor, opacity: 0.6 }}
                 />
                 <span className="text-[9px] uppercase tracking-wider font-semibold text-muted-foreground/50">
-                  How it works
+                  {t("editor.track.howItWorks")}
                 </span>
               </div>
               <p className="text-[11px] leading-relaxed text-muted-foreground/65">
@@ -629,6 +642,7 @@ function PropPicker({
   accentColor: string;
   onSelect: (property: string) => void;
 }) {
+  const t = useT();
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
@@ -649,7 +663,7 @@ function PropPicker({
         >
           <span className="flex items-center gap-1">
             <IconPlus size={9} />
-            Add property…
+            {t("editor.track.addProperty")}
           </span>
           <IconChevronDown size={9} />
         </button>
@@ -681,6 +695,7 @@ export function TrackPropertiesPanel({
   durationInFrames,
   onUpdateTrack,
 }: TrackPropertiesPanelProps) {
+  const t = useT();
   const duration = track.endFrame - track.startFrame;
   const startSec = (track.startFrame / fps).toFixed(2);
   const endSec = (track.endFrame / fps).toFixed(2);
@@ -733,7 +748,7 @@ export function TrackPropertiesPanel({
       {/* ── Label ──────────────────────────────────────────────────────── */}
       <div className="space-y-1">
         <label className="text-[10px] text-muted-foreground uppercase tracking-wider">
-          Label
+          {t("editor.track.label")}
         </label>
         <input
           type="text"
@@ -746,7 +761,7 @@ export function TrackPropertiesPanel({
       {/* ── Easing ─────────────────────────────────────────────────────── */}
       <div className="space-y-1">
         <label className="text-[10px] text-muted-foreground uppercase tracking-wider">
-          Timing Function
+          {t("editor.track.timingFunction")}
         </label>
         <div className="relative">
           <Select
@@ -779,7 +794,8 @@ export function TrackPropertiesPanel({
       <div className="grid grid-cols-2 gap-2">
         <div className="space-y-1">
           <label className="text-[10px] text-muted-foreground uppercase tracking-wider">
-            Start <span className="normal-case opacity-40">(f)</span>
+            {t("editor.track.start")}{" "}
+            <span className="normal-case opacity-40">(f)</span>
           </label>
           <input
             type="number"
@@ -799,7 +815,8 @@ export function TrackPropertiesPanel({
         </div>
         <div className="space-y-1">
           <label className="text-[10px] text-muted-foreground uppercase tracking-wider">
-            End <span className="normal-case opacity-40">(f)</span>
+            {t("editor.track.end")}{" "}
+            <span className="normal-case opacity-40">(f)</span>
           </label>
           <input
             type="number"
@@ -840,7 +857,7 @@ export function TrackPropertiesPanel({
           <div className="flex items-center gap-1.5">
             <IconCode size={11} style={{ color: accentColor, opacity: 0.8 }} />
             <span className="text-[10px] text-muted-foreground uppercase tracking-wider">
-              Animated Properties
+              {t("editor.currentElement.animatedProperties")}
             </span>
           </div>
           {animatedProps.length > 0 && (
@@ -862,7 +879,7 @@ export function TrackPropertiesPanel({
             className="text-[10px] text-muted-foreground/35 text-center py-3 rounded-lg border border-dashed"
             style={{ borderColor: `${accentColor}20` }}
           >
-            No properties — add one below
+            {t("editor.track.noProperties")}
           </div>
         ) : (
           <div className="space-y-1.5">

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconX, IconGripHorizontal } from "@tabler/icons-react";
 import { useState, useRef, useCallback } from "react";
 
@@ -16,7 +17,7 @@ import { cn } from "@/lib/utils";
 export const DEFAULT_COMPOSITION_TWEAKS: TweakDefinition[] = [
   {
     id: "accentColor",
-    label: "Accent color",
+    label: "accentColor",
     type: "color-swatches",
     options: [
       { value: "#00E5FF", label: "Cyan", color: "#00E5FF" },
@@ -44,7 +45,7 @@ export const DEFAULT_COMPOSITION_TWEAKS: TweakDefinition[] = [
   },
   {
     id: "fps",
-    label: "Frame rate",
+    label: "fps",
     type: "segment",
     options: [
       { value: "24", label: "24" },
@@ -55,7 +56,7 @@ export const DEFAULT_COMPOSITION_TWEAKS: TweakDefinition[] = [
   },
   {
     id: "easing",
-    label: "Default easing",
+    label: "easing",
     type: "segment",
     options: [
       { value: "linear", label: "Linear" },
@@ -66,7 +67,7 @@ export const DEFAULT_COMPOSITION_TWEAKS: TweakDefinition[] = [
   },
   {
     id: "animationSpeed",
-    label: "Animation speed",
+    label: "animationSpeed",
     type: "slider",
     defaultValue: 50,
     min: 0,
@@ -75,7 +76,7 @@ export const DEFAULT_COMPOSITION_TWEAKS: TweakDefinition[] = [
   },
   {
     id: "motionBlur",
-    label: "Motion blur",
+    label: "motionBlur",
     type: "toggle",
     defaultValue: false,
   },
@@ -98,6 +99,7 @@ export function TweaksPanel({
   visible,
   onClose,
 }: TweaksPanelProps) {
+  const t = useT();
   const [collapsed, setCollapsed] = useState(false);
   const [position, setPosition] = useState({ x: 16, y: 16 });
   const dragging = useRef(false);
@@ -150,11 +152,11 @@ export function TweaksPanel({
             onClick={() => setCollapsed((c) => !c)}
             className="cursor-pointer text-[11px] font-semibold uppercase tracking-wider text-muted-foreground hover:text-muted-foreground"
           >
-            Tweaks
+            {t("editor.tweaks.title")}
           </button>
         </div>
         <button
-          aria-label="Close tweaks panel"
+          aria-label={t("editor.tweaks.closePanel")}
           onMouseDown={(e) => e.stopPropagation()}
           onClick={(e) => {
             e.stopPropagation();
@@ -194,10 +196,13 @@ function TweakControl({
   value: string | number | boolean;
   onChange: (v: string | number | boolean) => void;
 }) {
+  const t = useT();
+  const labelKey = `editor.tweaks.controls.${tweak.id}` as const;
+
   return (
     <div>
       <div className="mb-1.5 text-[11px] text-muted-foreground">
-        {tweak.label}
+        {t(labelKey, { defaultValue: tweak.label })}
       </div>
 
       {tweak.type === "color-swatches" && (
@@ -216,7 +221,11 @@ function TweakControl({
                   style={{ backgroundColor: opt.color || opt.value }}
                 />
               </TooltipTrigger>
-              <TooltipContent>{opt.label}</TooltipContent>
+              <TooltipContent>
+                {t(`editor.tweaks.options.${opt.label}`, {
+                  defaultValue: opt.label,
+                })}
+              </TooltipContent>
             </Tooltip>
           ))}
         </div>

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { Player, type PlayerRef } from "@remotion/player";
 import {
   IconPlayerPlay,
@@ -66,6 +67,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     },
     ref,
   ) {
+    const t = useT();
     const playerRef = useRef<PlayerRef>(null);
     const containerRef = useRef<HTMLDivElement>(null);
     const [playing, setPlaying] = useState(false);
@@ -267,7 +269,7 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
     // Range bounds in seconds, for the time display
     const rangeStartTime = viewStart / composition.fps;
     const rangeEndTime = rangeEnd / composition.fps;
-    const isRanged = viewStart > 0 || rangeEnd < composition.durationInFrames;
+    const isRanged = viewStart > 0 || rangeEnd < composition.durationInFrames; // i18n-ignore scanner false positive
 
     const formatTime = (seconds: number) => {
       const m = Math.floor(seconds / 60);
@@ -366,13 +368,13 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
                 <TooltipTrigger asChild>
                   <button
                     onClick={restart}
-                    aria-label="Go to start"
+                    aria-label={t("raw.player.goToStart")}
                     className="p-2.5 sm:p-2 text-muted-foreground hover:text-foreground rounded-lg hover:bg-secondary"
                   >
                     <IconPlayerSkipBack size={16} />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Go to start</TooltipContent>
+                <TooltipContent>{t("raw.player.goToStart")}</TooltipContent>
               </Tooltip>
               <Tooltip>
                 <TooltipTrigger asChild>
@@ -438,12 +440,14 @@ export const VideoPlayer = forwardRef<VideoPlayerHandle, VideoPlayerProps>(
                   <TooltipTrigger asChild>
                     <SelectTrigger
                       className="h-auto text-[10px] px-2 py-1 rounded-md bg-secondary/50 hover:bg-secondary text-muted-foreground hover:text-foreground border border-border/50 hover:border-border font-mono cursor-pointer w-auto gap-1"
-                      aria-label="Playback speed"
+                      aria-label={t("raw.player.playbackSpeed")}
                     >
                       <SelectValue />
                     </SelectTrigger>
                   </TooltipTrigger>
-                  <TooltipContent>Playback speed</TooltipContent>
+                  <TooltipContent>
+                    {t("raw.player.playbackSpeed")}
+                  </TooltipContent>
                 </Tooltip>
                 <SelectContent>
                   <SelectItem value="0.25">0.25×</SelectItem>