@agent-native/core 0.77.3 → 0.77.4

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

@@ -1,4 +1,4 @@
-import { agentNativePath } from "@agent-native/core/client";
+import { agentNativePath, useT } from "@agent-native/core/client";
 import {
   IconX,
   IconCheck,
@@ -18,7 +18,7 @@ interface CloudUpgradeProps {
 interface Provider {
   id: string;
   name: string;
-  description: string;
+  descriptionKey: string;
   urlPrefix: string;
   needsAuthToken: boolean;
   steps: string[];
@@ -28,7 +28,7 @@ const PROVIDERS: Provider[] = [
   {
     id: "turso",
     name: "Turso",
-    description: "SQLite at the edge",
+    descriptionKey: "raw.cloud.providers.sqliteEdge",
     urlPrefix: "libsql://",
     needsAuthToken: true,
     steps: [
@@ -42,7 +42,7 @@ const PROVIDERS: Provider[] = [
   {
     id: "neon",
     name: "Neon",
-    description: "Serverless Postgres",
+    descriptionKey: "raw.cloud.providers.serverlessPostgres",
     urlPrefix: "postgres://",
     needsAuthToken: false,
     steps: [
@@ -56,7 +56,7 @@ const PROVIDERS: Provider[] = [
   {
     id: "supabase",
     name: "Supabase",
-    description: "Open source Firebase alternative",
+    descriptionKey: "raw.cloud.providers.firebaseAlternative",
     urlPrefix: "postgres://",
     needsAuthToken: false,
     steps: [
@@ -69,8 +69,8 @@ const PROVIDERS: Provider[] = [
   },
   {
     id: "d1",
-    name: "Cloudflare D1",
-    description: "SQLite on Cloudflare's edge",
+    name: "Cloudflare D1", // i18n-ignore stable provider name
+    descriptionKey: "raw.cloud.providers.sqliteCloudflareEdge",
     urlPrefix: "d1://",
     needsAuthToken: true,
     steps: [
@@ -89,6 +89,7 @@ export function CloudUpgrade({
   description = "To share content publicly, connect a cloud database.",
   onClose,
 }: CloudUpgradeProps) {
+  const t = useT();
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [dbUrl, setDbUrl] = useState("");
   const [authToken, setAuthToken] = useState("");
@@ -163,12 +164,14 @@ export function CloudUpgrade({
         window.location.reload();
       }, 1500);
     } catch (e) {
-      setErrorMsg(e instanceof Error ? e.message : "Connection failed");
+      setErrorMsg(
+        e instanceof Error ? e.message : t("raw.cloud.connectionFailed"),
+      );
       setStatus("error");
     } finally {
       connectingRef.current = false;
     }
-  }, [dbUrl, authToken]);
+  }, [dbUrl, authToken, t]);
 
   const isConnecting = status === "saving" || status === "polling";
 
@@ -219,7 +222,7 @@ export function CloudUpgrade({
               {p.name}
             </span>
             <span className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
-              {p.description}
+              {t(p.descriptionKey)}
             </span>
           </button>
         ))}
@@ -229,7 +232,7 @@ export function CloudUpgrade({
       {provider && (
         <div className="mb-5 rounded-lg border border-zinc-100 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-900">
           <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400">
-            Setup steps
+            {t("raw.cloud.setupSteps")}
           </p>
           <ol className="space-y-1">
             {provider.steps.map((step, i) => (
@@ -275,7 +278,7 @@ export function CloudUpgrade({
             </label>
             <input
               type="password"
-              placeholder="Auth token"
+              placeholder={t("raw.cloud.authToken")}
               value={authToken}
               onChange={(e) => setAuthToken(e.target.value)}
               disabled={isConnecting}
@@ -296,7 +299,7 @@ export function CloudUpgrade({
       {status === "success" && (
         <div className="mt-3 flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400">
           <IconCheck className="h-3.5 w-3.5" />
-          <span>Connected successfully. Reloading...</span>
+          <span>{t("raw.cloud.connectedReloading")}</span>
         </div>
       )}
 
@@ -311,14 +314,14 @@ export function CloudUpgrade({
             <IconLoader2 className="h-4 w-4 animate-spin" />
             <span>
               {status === "saving"
-                ? "Saving credentials..."
-                : "Testing connection..."}
+                ? t("raw.cloud.savingCredentials")
+                : t("raw.cloud.testingConnection")}
             </span>
           </>
         ) : (
           <>
             <IconDatabase className="h-4 w-4" />
-            <span>Test & Connect</span>
+            <span>{t("raw.cloud.testConnect")}</span>
           </>
         )}
       </button>

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

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client";
+
 import { cn } from "@/lib/utils";
 
 export type CompSettings = {
@@ -21,6 +23,7 @@ export function CompSettingsEditor({
   settings,
   onChange,
 }: CompSettingsEditorProps) {
+  const t = useT();
   const durationSeconds = +(settings.durationInFrames / settings.fps).toFixed(
     2,
   );
@@ -60,7 +63,9 @@ export function CompSettingsEditor({
 
         {/* Size presets */}
         <div className="space-y-1.5">
-          <label className="text-xs text-muted-foreground">Output Size</label>
+          <label className="text-xs text-muted-foreground">
+            {t("raw.compositionSettings.outputSize")}
+          </label>
           <div className="flex gap-1">
             {SIZE_PRESETS.map((preset) => {
               const active =

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconBox,
   IconAdjustmentsHorizontal,
@@ -49,6 +50,7 @@ export function ComponentLibrarySidebar({
   propValues,
   onPropChange,
 }: ComponentLibrarySidebarProps) {
+  const t = useT();
   const [tab, setTab] = useState<"components" | "properties">("components");
   const [openSections, setOpenSections] = useState({
     props: true,
@@ -111,13 +113,13 @@ export function ComponentLibrarySidebar({
             value="components"
             className="flex-1 px-3 py-1.5 text-xs font-medium rounded-md text-muted-foreground data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-none"
           >
-            Components
+            {t("editor.library.componentsTab")}
           </TabsTrigger>
           <TabsTrigger
             value="properties"
             className="flex-1 px-3 py-1.5 text-xs font-medium rounded-md text-muted-foreground data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-none"
           >
-            Properties
+            {t("editor.library.propertiesTab")}
           </TabsTrigger>
         </TabsList>
 
@@ -126,10 +128,10 @@ export function ComponentLibrarySidebar({
           <div className="h-full flex flex-col">
             <div className="px-4 py-3 border-b border-border">
               <h2 className="text-sm font-semibold text-foreground">
-                Component Library
+                {t("editor.library.title")}
               </h2>
               <p className="text-xs text-muted-foreground mt-1">
-                Organized by atomic design
+                {t("editor.library.organizedByAtomicDesign")}
               </p>
             </div>
 
@@ -137,8 +139,10 @@ export function ComponentLibrarySidebar({
               {libraryComponents.length === 0 ? (
                 <div className="text-center py-8 text-muted-foreground text-sm">
                   <IconBox className="w-8 h-8 mx-auto mb-2 opacity-50" />
-                  <p>No components yet</p>
-                  <p className="text-xs mt-1">Components will appear here</p>
+                  <p>{t("editor.library.noComponents")}</p>
+                  <p className="text-xs mt-1">
+                    {t("editor.library.componentsWillAppear")}
+                  </p>
                 </div>
               ) : (
                 Array.from(componentsByCategory.entries()).map(
@@ -160,7 +164,9 @@ export function ComponentLibrarySidebar({
                               isExpanded && "rotate-90",
                             )}
                           />
-                          {category}
+                          {t(`editor.library.categories.${category}`, {
+                            defaultValue: category,
+                          })}
                           <span className="ml-auto text-[10px] font-mono">
                             {components.length}
                           </span>
@@ -213,7 +219,7 @@ export function ComponentLibrarySidebar({
                     <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-green-400" />
                       <span className="text-xs font-medium">
-                        Cursor Interactions
+                        {t("editor.library.cursorInteractions")}
                       </span>
                       <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
                     </div>
@@ -232,7 +238,7 @@ export function ComponentLibrarySidebar({
                       <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
                         <IconFileText className="w-3.5 h-3.5 text-sky-400" />
                         <span className="text-xs font-medium">
-                          Text Animations
+                          {t("editor.library.textAnimations")}
                         </span>
                         <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
                       </div>
@@ -243,11 +249,10 @@ export function ComponentLibrarySidebar({
                           <IconInfoCircle className="w-4 h-4 text-sky-400 flex-shrink-0 mt-0.5" />
                           <div>
                             <p className="text-xs font-medium text-sky-200 mb-1">
-                              Interactive Text Input
+                              {t("editor.library.interactiveTextInput")}
                             </p>
                             <p className="text-xs text-sky-300/80">
-                              Type in the "Ask Builder" textarea below. The send
-                              button will light up blue when text is entered.
+                              {t("editor.library.interactiveTextInputHelp")}
                             </p>
                           </div>
                         </div>
@@ -255,17 +260,12 @@ export function ComponentLibrarySidebar({
 
                       <div className="space-y-2">
                         <p className="text-xs text-muted-foreground">
-                          This component is now fully interactive:
+                          {t("editor.library.fullyInteractive")}
                         </p>
                         <ul className="text-xs text-muted-foreground space-y-1 ml-4 list-disc">
-                          <li>
-                            Type in the textarea to see the blue send button
-                          </li>
-                          <li>Click the send button to clear the text</li>
-                          <li>
-                            Hover over the button to see the grow/brightness
-                            effect
-                          </li>
+                          <li>{t("editor.library.typeToSeeSendButton")}</li>
+                          <li>{t("editor.library.clickSendToClear")}</li>
+                          <li>{t("editor.library.hoverToSeeEffect")}</li>
                         </ul>
                       </div>
                     </div>
@@ -284,7 +284,7 @@ export function ComponentLibrarySidebar({
                     <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
                       <IconFileText className="w-3.5 h-3.5 text-blue-400" />
                       <span className="text-xs font-medium">
-                        Component Props
+                        {t("editor.properties.componentProps")}
                       </span>
                       <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
                     </div>
@@ -295,13 +295,13 @@ export function ComponentLibrarySidebar({
                       {/* Preview Notice */}
                       <div className="px-4 py-3 bg-muted/30 rounded-lg border border-dashed border-border">
                         <p className="text-xs text-muted-foreground">
-                          Changes are for preview only and won't be saved
+                          {t("editor.library.previewOnly")}
                         </p>
                       </div>
 
                       {selectedComponent.propTypes.length === 0 ? (
                         <p className="text-xs text-muted-foreground">
-                          No configurable props
+                          {t("editor.properties.noConfigurableProps")}
                         </p>
                       ) : (
                         selectedComponent.propTypes.map((prop) => {
@@ -401,7 +401,7 @@ export function ComponentLibrarySidebar({
                     <div className="flex items-center gap-2 p-2 rounded hover:bg-secondary/50 transition-colors">
                       <IconInfoCircle className="w-3.5 h-3.5 text-amber-400" />
                       <span className="text-xs font-medium">
-                        Component IconInfoCircle
+                        {t("editor.library.componentInfo")}
                       </span>
                       <IconChevronRight className="w-3 h-3 ml-auto group-open:rotate-90 transition-transform text-muted-foreground" />
                     </div>
@@ -409,7 +409,7 @@ export function ComponentLibrarySidebar({
                   <div className="mt-1 px-4 py-3 space-y-3 text-xs text-muted-foreground">
                     <div>
                       <div className="font-medium text-foreground mb-1">
-                        Dimensions
+                        {t("editor.properties.dimensions")}
                       </div>
                       <div>
                         {selectedComponent.width} × {selectedComponent.height}px
@@ -418,7 +418,7 @@ export function ComponentLibrarySidebar({
 
                     <div>
                       <div className="font-medium text-foreground mb-1">
-                        Duration
+                        {t("editor.properties.duration")}
                       </div>
                       <div>
                         {selectedComponent.durationInFrames} frames @{" "}
@@ -433,7 +433,7 @@ export function ComponentLibrarySidebar({
 
                     <div>
                       <div className="font-medium text-foreground mb-1">
-                        Component ID
+                        {t("editor.properties.componentId")}
                       </div>
                       <code className="px-1.5 py-0.5 bg-secondary rounded font-mono">
                         {selectedComponent.id}
@@ -445,7 +445,7 @@ export function ComponentLibrarySidebar({
             ) : (
               <div className="h-full flex items-center justify-center p-4">
                 <p className="text-sm text-muted-foreground text-center">
-                  Select a component to view its properties
+                  {t("editor.library.selectComponent")}
                 </p>
               </div>
             )}

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconX,
   IconChevronRight,
@@ -23,6 +24,7 @@ export function ComponentPropsPanel({
   component,
   onClose,
 }: ComponentPropsPanelProps) {
+  const t = useT();
   const [openSections, setOpenSections] = useState({
     props: true,
     animations: false,
@@ -36,7 +38,9 @@ export function ComponentPropsPanel({
     <div className="w-80 border-l border-border bg-secondary/30 flex flex-col overflow-hidden">
       {/* Header */}
       <div className="px-4 py-3 border-b border-border flex items-center justify-between">
-        <h2 className="text-sm font-semibold text-foreground">Properties</h2>
+        <h2 className="text-sm font-semibold text-foreground">
+          {t("editor.properties.title")}
+        </h2>
         <Tooltip>
           <TooltipTrigger asChild>
             <button
@@ -46,7 +50,7 @@ export function ComponentPropsPanel({
               <IconX className="w-4 h-4" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Close panel</TooltipContent>
+          <TooltipContent>{t("editor.properties.closePanel")}</TooltipContent>
         </Tooltip>
       </div>
 
@@ -68,14 +72,16 @@ export function ComponentPropsPanel({
               )}
             />
             <IconFileText className="w-4 h-4" />
-            <span className="text-sm font-medium">Component Props</span>
+            <span className="text-sm font-medium">
+              {t("editor.properties.componentProps")}
+            </span>
           </summary>
 
           {openSections.props && (
             <div className="px-4 py-3 space-y-4 bg-secondary/20">
               {component.propTypes.length === 0 ? (
                 <p className="text-xs text-muted-foreground">
-                  No configurable props
+                  {t("editor.properties.noConfigurableProps")}
                 </p>
               ) : (
                 component.propTypes.map((prop) => (
@@ -94,7 +100,9 @@ export function ComponentPropsPanel({
                     )}
 
                     <div className="text-xs">
-                      <span className="text-muted-foreground">Default: </span>
+                      <span className="text-muted-foreground">
+                        {t("editor.properties.defaultValue")}{" "}
+                      </span>
                       <code className="px-1.5 py-0.5 bg-secondary rounded font-mono">
                         {typeof prop.defaultValue === "string"
                           ? `"${prop.defaultValue}"`
@@ -127,36 +135,42 @@ export function ComponentPropsPanel({
               )}
             />
             <IconAdjustmentsHorizontal className="w-4 h-4" />
-            <span className="text-sm font-medium">Animations</span>
+            <span className="text-sm font-medium">
+              {t("editor.properties.animations")}
+            </span>
           </summary>
 
           {openSections.animations && (
             <div className="px-4 py-3 space-y-3 bg-secondary/20">
               <p className="text-xs text-muted-foreground">
-                This component includes default hover and click animations.
-                Animations are controlled by the interaction system and can be
-                customized through the animation API.
+                {t("editor.properties.animationsDescription")}
               </p>
 
               <div className="space-y-2">
                 <div className="text-xs">
-                  <div className="font-medium mb-1">Hover Animation</div>
+                  <div className="font-medium mb-1">
+                    {t("editor.properties.hoverAnimation")}
+                  </div>
                   <div className="text-muted-foreground">
-                    Scale effect with smooth transition
+                    {t("editor.properties.hoverAnimationDescription")}
                   </div>
                 </div>
 
                 <div className="text-xs">
-                  <div className="font-medium mb-1">Click Animation</div>
+                  <div className="font-medium mb-1">
+                    {t("editor.properties.clickAnimation")}
+                  </div>
                   <div className="text-muted-foreground">
-                    Press down effect on click
+                    {t("editor.properties.clickAnimationDescription")}
                   </div>
                 </div>
               </div>
 
               {component.tracks && component.tracks.length > 0 && (
                 <div className="pt-3 border-t border-border">
-                  <div className="text-xs font-medium mb-2">Tracks</div>
+                  <div className="text-xs font-medium mb-2">
+                    {t("editor.properties.tracks")}
+                  </div>
                   <div className="space-y-1.5">
                     {component.tracks.map((track) => (
                       <div
@@ -180,14 +194,18 @@ export function ComponentPropsPanel({
         {/* Component Info */}
         <div className="px-4 py-3 space-y-3 text-xs text-muted-foreground">
           <div>
-            <div className="font-medium text-foreground mb-1">Dimensions</div>
+            <div className="font-medium text-foreground mb-1">
+              {t("editor.properties.dimensions")}
+            </div>
             <div>
               {component.width} × {component.height}px
             </div>
           </div>
 
           <div>
-            <div className="font-medium text-foreground mb-1">Duration</div>
+            <div className="font-medium text-foreground mb-1">
+              {t("editor.properties.duration")}
+            </div>
             <div>
               {component.durationInFrames} frames @ {component.fps}fps (
               {(component.durationInFrames / component.fps).toFixed(1)}s)
@@ -195,7 +213,9 @@ export function ComponentPropsPanel({
           </div>
 
           <div>
-            <div className="font-medium text-foreground mb-1">Component ID</div>
+            <div className="font-medium text-foreground mb-1">
+              {t("editor.properties.componentId")}
+            </div>
             <code className="px-1.5 py-0.5 bg-secondary rounded font-mono">
               {component.id}
             </code>

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconBox, IconStack2 } from "@tabler/icons-react";
 
 import { cn } from "@/lib/utils";
@@ -14,6 +15,8 @@ export function ComponentsSidebar({
   selectedComponentId,
   onSelectComponent,
 }: ComponentsSidebarProps) {
+  const t = useT();
+
   if (!open) return null;
 
   return (
@@ -25,7 +28,7 @@ export function ComponentsSidebar({
           Components
         </h2>
         <p className="text-xs text-muted-foreground mt-1">
-          Reusable UI components
+          {t("raw.componentsSidebar.reusable")}
         </p>
       </div>
 
@@ -34,8 +37,10 @@ export function ComponentsSidebar({
         {libraryComponents.length === 0 ? (
           <div className="text-center py-8 text-muted-foreground text-sm">
             <IconBox className="w-8 h-8 mx-auto mb-2 opacity-50" />
-            <p>No components yet</p>
-            <p className="text-xs mt-1">Components will appear here</p>
+            <p>{t("raw.componentsSidebar.emptyTitle")}</p>
+            <p className="text-xs mt-1">
+              {t("raw.componentsSidebar.emptyDescription")}
+            </p>
           </div>
         ) : (
           libraryComponents.map((component) => (

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { Player } from "@remotion/player";
 import { IconTrash } from "@tabler/icons-react";
 import { useState } from "react";
@@ -35,6 +36,7 @@ export function CompositionCard({
   onDelete,
   draggable = false,
 }: CompositionCardProps) {
+  const t = useT();
   const [confirmOpen, setConfirmOpen] = useState(false);
 
   const handleDragStart = (e: React.DragEvent) => {
@@ -110,7 +112,9 @@ export function CompositionCard({
                 <IconTrash className="w-3.5 h-3.5" />
               </button>
             </TooltipTrigger>
-            <TooltipContent>Delete composition</TooltipContent>
+            <TooltipContent>
+              {t("editor.composition.deleteComposition")}
+            </TooltipContent>
           </Tooltip>
         )}
       </div>
@@ -118,9 +122,13 @@ export function CompositionCard({
       <AlertDialog open={confirmOpen} onOpenChange={setConfirmOpen}>
         <AlertDialogContent>
           <AlertDialogHeader>
-            <AlertDialogTitle>Delete "{composition.title}"?</AlertDialogTitle>
+            <AlertDialogTitle>
+              {t("editor.composition.deleteCompositionTitle", {
+                title: composition.title,
+              })}
+            </AlertDialogTitle>
             <AlertDialogDescription>
-              This cannot be undone.
+              {t("editor.composition.deleteCompositionDescription")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <AlertDialogFooter>