@agent-native/core 0.77.2 → 0.77.4

package/corpus/templates/design/app/components/design/PresentMode.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { useEffect, useCallback, useRef } from "react";
 
 interface PresentModeProps {
@@ -6,6 +7,7 @@ interface PresentModeProps {
 }
 
 export function PresentMode({ content, onExit }: PresentModeProps) {
+  const t = useT();
   const iframeRef = useRef<HTMLIFrameElement>(null);
 
   const handleKeyDown = useCallback(
@@ -59,7 +61,7 @@ export function PresentMode({ content, onExit }: PresentModeProps) {
         srcDoc={srcdoc}
         sandbox="allow-scripts"
         className="w-full h-full border-0"
-        title="Present Mode"
+        title={t("designEditor.presentMode")}
       />
     </div>
   );

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import type { TweakDefinition } from "@shared/api";
 import { IconX, IconGripHorizontal, IconPlus } from "@tabler/icons-react";
 import { useState, useRef, useCallback } from "react";
@@ -29,6 +30,7 @@ export function TweaksPanel({
   onRequestTweaks,
   visible,
 }: TweaksPanelProps) {
+  const t = useT();
   const [collapsed, setCollapsed] = useState(false);
   const [position, setPosition] = useState({ x: 16, y: 64 });
   const panelRef = useRef<HTMLDivElement>(null);
@@ -96,7 +98,7 @@ 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("designEditor.tweaks")}
           </button>
         </div>
         <div className="flex items-center gap-0.5">
@@ -113,12 +115,12 @@ export function TweaksPanel({
                     onRequestTweaks(e.currentTarget);
                   }}
                   className="size-6 cursor-pointer text-muted-foreground/70 hover:text-foreground"
-                  aria-label="Add tweaks"
+                  aria-label={t("designEditor.addTweaks")}
                 >
                   <IconPlus className="h-3.5 w-3.5" />
                 </Button>
               </TooltipTrigger>
-              <TooltipContent>Add tweaks</TooltipContent>
+              <TooltipContent>{t("designEditor.addTweaks")}</TooltipContent>
             </Tooltip>
           )}
           <button
@@ -129,7 +131,7 @@ export function TweaksPanel({
               onClose();
             }}
             className="flex size-6 cursor-pointer items-center justify-center rounded-md text-muted-foreground/70 hover:bg-accent hover:text-muted-foreground"
-            aria-label="Close tweaks"
+            aria-label={t("designEditor.closeTweaks")}
           >
             <IconX className="h-3 w-3" />
           </button>
@@ -151,7 +153,7 @@ export function TweaksPanel({
           ) : (
             <div className="space-y-2 rounded-lg border border-dashed border-border/80 bg-muted/20 p-3">
               <p className="text-xs leading-relaxed text-muted-foreground">
-                No tweak controls yet.
+                {t("designEditor.noTweakControls")}
               </p>
               {onRequestTweaks && (
                 <Button
@@ -162,7 +164,7 @@ export function TweaksPanel({
                   onClick={(e) => onRequestTweaks(e.currentTarget)}
                 >
                   <IconPlus className="h-3.5 w-3.5" />
-                  Add tweak controls
+                  {t("designEditor.addTweakControls")}
                 </Button>
               )}
             </div>

package/corpus/templates/design/app/components/design/VariantGrid.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconCheck } from "@tabler/icons-react";
 import { useState } from "react";
 
@@ -25,6 +26,7 @@ export function VariantGrid({
   onUse,
   compact = false,
 }: VariantGridProps) {
+  const t = useT();
   const [hoveredId, setHoveredId] = useState<string | null>(null);
   const [internalSelectedId, setInternalSelectedId] = useState<
     string | undefined
@@ -93,7 +95,7 @@ export function VariantGrid({
                 }}
                 role="button"
                 tabIndex={0}
-                aria-label={`Preview ${variant.label}`}
+                aria-label={t("home.designPreview")}
                 className={cn(
                   "relative flex-1 cursor-pointer overflow-hidden rounded-lg border-2 bg-muted/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
                   isSelected
@@ -130,9 +132,9 @@ export function VariantGrid({
                         e.stopPropagation();
                         onUse(variant.id);
                       }}
-                      aria-label={`Use ${variant.label}`}
+                      aria-label={t("designEditor.useThisDirection")}
                     >
-                      Use this direction
+                      {t("designEditor.useThisDirection")}
                     </Button>
                   </div>
                 )}
@@ -171,7 +173,7 @@ function wrapContent(content: string): string {
       return trimmed.replace(/<\/head>/i, `${previewStyle}</head>`);
     }
     return trimmed.replace(
-      /<html([^>]*)>/i,
+      /<html([^>]*)>/i, // i18n-ignore HTML parser regex, not UI copy
       `<html$1><head>${previewStyle}</head>`,
     );
   }

package/corpus/templates/design/app/components/design/VariantHandoffCard.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconCheck, IconCopy } from "@tabler/icons-react";
 import { useCallback, useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -21,6 +22,7 @@ export function VariantHandoffCard({
   pick,
   onDismiss,
 }: VariantHandoffCardProps) {
+  const t = useT();
   const [copied, setCopied] = useState(false);
 
   const writeClipboard = useCallback(async () => {
@@ -49,7 +51,9 @@ export function VariantHandoffCard({
     const ok = await writeClipboard();
     setCopied(ok);
     toast[ok ? "success" : "info"](
-      ok ? "Summary copied" : "Select the summary to copy it",
+      ok
+        ? t("designEditor.summaryCopied")
+        : t("designEditor.selectSummaryToCopy"),
     );
   };
 
@@ -73,7 +77,7 @@ export function VariantHandoffCard({
         </div>
 
         <p className="mt-3 text-sm text-muted-foreground">
-          Paste this summary into your coding agent to continue.
+          {t("designEditor.variantHandoffHelp")}
         </p>
 
         <Textarea
@@ -90,7 +94,7 @@ export function VariantHandoffCard({
             className="cursor-pointer"
             onClick={onDismiss}
           >
-            Dismiss
+            {t("designEditor.dismiss")}
           </Button>
           <Button
             size="sm"
@@ -102,7 +106,7 @@ export function VariantHandoffCard({
             ) : (
               <IconCopy className="h-3.5 w-3.5" />
             )}
-            {copied ? "Copied" : "Copy summary"}
+            {copied ? t("designEditor.copied") : t("designEditor.copySummary")}
           </Button>
         </div>
       </div>

package/corpus/templates/design/app/components/design/ViewportTabs.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconPlus, IconX } from "@tabler/icons-react";
 import { useState, useRef, useCallback } from "react";
 
@@ -27,6 +28,7 @@ export function ViewportTabs({
   onTabClose,
   onTabAdd,
 }: ViewportTabsProps) {
+  const t = useT();
   const [draggedTab, setDraggedTab] = useState<string | null>(null);
   const [contextTab, setContextTab] = useState<string | null>(null);
   const tabsRef = useRef<HTMLDivElement>(null);
@@ -122,13 +124,13 @@ export function ViewportTabs({
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="w-40">
               <DropdownMenuItem onClick={() => onTabClose(tab.id)}>
-                Close
+                {t("designEditor.closeTab")}
               </DropdownMenuItem>
               <DropdownMenuItem onClick={() => handleCloseOthers(tab.id)}>
-                Close Others
+                {t("designEditor.closeOtherTabs")}
               </DropdownMenuItem>
               <DropdownMenuItem onClick={handleCloseAll}>
-                Close All
+                {t("designEditor.closeAllTabs")}
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>

package/corpus/templates/design/app/components/design/ZoomControls.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconZoomIn,
   IconZoomOut,
@@ -27,6 +28,7 @@ interface ZoomControlsProps {
 }
 
 export function ZoomControls({ zoom, onZoomChange }: ZoomControlsProps) {
+  const t = useT();
   const [isEditing, setIsEditing] = useState(false);
   const [editValue, setEditValue] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
@@ -148,7 +150,7 @@ export function ZoomControls({ zoom, onZoomChange }: ZoomControlsProps) {
             <IconMaximize className="w-3.5 h-3.5" />
           </Button>
         </TooltipTrigger>
-        <TooltipContent>Fit to screen</TooltipContent>
+        <TooltipContent>{t("designEditor.fitToScreen")}</TooltipContent>
       </Tooltip>
     </div>
   );

package/corpus/templates/design/app/components/editor/PromptDialog.tsx

@@ -1,6 +1,7 @@
 import {
   appBasePath,
   PromptComposer,
+  useT,
   type PromptComposerSubmitOptions,
 } from "@agent-native/core/client";
 import {
@@ -144,6 +145,7 @@ function AssetsPickerDialog({
   onReady,
   onMessage,
 }: AssetsPickerDialogProps) {
+  const t = useT();
   const [pickerReady, setPickerReady] = useState(false);
 
   useEffect(() => {
@@ -165,13 +167,15 @@ function AssetsPickerDialog({
         className="flex h-[min(86vh,760px)] w-[min(96vw,1040px)] max-w-none flex-col gap-0 overflow-hidden p-0"
       >
         <div className="flex h-12 shrink-0 items-center border-b px-4">
-          <DialogTitle className="text-base">Assets</DialogTitle>
+          <DialogTitle className="text-base">
+            {t("promptDialog.assetsTitle")}
+          </DialogTitle>
         </div>
         <div className="relative min-h-0 flex-1 overflow-hidden bg-background">
           {!pickerReady && <AssetsPickerSkeleton />}
           <EmbeddedApp
             url={url}
-            title="Assets image picker"
+            title={t("promptDialog.assetsImagePicker")}
             className={`absolute inset-0 h-full w-full border-0 bg-background transition-opacity duration-150 ${
               pickerReady ? "opacity-100" : "pointer-events-none opacity-0"
             }`}
@@ -185,11 +189,12 @@ function AssetsPickerDialog({
 }
 
 function AssetsPickerSkeleton() {
+  const t = useT();
   return (
     <div
       className="absolute inset-0 flex flex-col gap-5 p-5"
       role="status"
-      aria-label="Loading Assets picker"
+      aria-label={t("promptDialog.loadingAssetsPicker")}
     >
       <div className="flex items-center gap-3">
         <Skeleton className="h-9 flex-1 rounded-md" />
@@ -241,7 +246,7 @@ export default function PromptPopover({
   open,
   onOpenChange,
   title,
-  placeholder = "Describe what you want...",
+  placeholder,
   onSkip,
   skipLabel = "Skip prompt",
   onSubmit,
@@ -254,6 +259,7 @@ export default function PromptPopover({
   onDesignSystemChange,
   onCreateDesignSystem,
 }: PromptPopoverProps) {
+  const t = useT();
   const [uploading, setUploading] = useState(false);
   const [pickedAssets, setPickedAssets] = useState<UploadedFile[]>([]);
   const [selectedUploadFiles, setSelectedUploadFiles] = useState<File[]>([]);
@@ -378,7 +384,9 @@ export default function PromptPopover({
         setSelectedUploadFiles([]);
       } catch (error) {
         toast.error(
-          error instanceof Error ? error.message : "Failed to upload file",
+          error instanceof Error
+            ? error.message
+            : t("promptDialog.failedToUploadFile"),
         );
       }
     },
@@ -423,7 +431,7 @@ export default function PromptPopover({
         },
       ]);
       setAssetsPickerOpen(false);
-      toast.success("Asset added");
+      toast.success(t("promptDialog.assetAdded"));
     },
     [],
   );
@@ -466,7 +474,7 @@ export default function PromptPopover({
             autoFocus
             attachmentsEnabled
             disabled={loading || uploading}
-            placeholder={placeholder}
+            placeholder={placeholder ?? t("home.describeBuild")}
             onSubmit={handleSubmit}
             attachButton={
               <PromptAttachmentMenu
@@ -493,11 +501,11 @@ export default function PromptPopover({
                   disabled={designSystemsLoading}
                 >
                   <SelectTrigger className="h-8 min-w-0 flex-1 text-xs">
-                    <SelectValue placeholder="Design system" />
+                    <SelectValue placeholder={t("promptDialog.designSystem")} />
                   </SelectTrigger>
                   <SelectContent>
                     <SelectItem value="none" className="text-xs">
-                      No design system
+                      {t("promptDialog.noDesignSystem")}
                     </SelectItem>
                     {designSystems.map((system) => (
                       <SelectItem
@@ -513,7 +521,7 @@ export default function PromptPopover({
                 </Select>
               ) : (
                 <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
-                  No design system
+                  {t("promptDialog.noDesignSystem")}
                 </span>
               )}
             </div>
@@ -526,7 +534,7 @@ export default function PromptPopover({
                 onClick={onCreateDesignSystem}
               >
                 <IconPlus className="h-3.5 w-3.5" />
-                New
+                {t("promptDialog.newDesignSystem")}
               </Button>
             )}
           </div>
@@ -543,7 +551,9 @@ export default function PromptPopover({
                 <button
                   type="button"
                   className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-background hover:text-foreground"
-                  aria-label={`Remove ${file.name}`}
+                  aria-label={t("promptDialog.removeAttachment", {
+                    name: file.name,
+                  })}
                   onClick={() => removeSelectedUploadFile(index)}
                 >
                   <IconX className="h-3.5 w-3.5" />
@@ -559,7 +569,9 @@ export default function PromptPopover({
                 <button
                   type="button"
                   className="inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-sm text-muted-foreground hover:bg-background hover:text-foreground"
-                  aria-label={`Remove ${asset.originalName}`}
+                  aria-label={t("promptDialog.removeAttachment", {
+                    name: asset.originalName,
+                  })}
                   onClick={() => removePickedAsset(asset.path)}
                 >
                   <IconX className="h-3.5 w-3.5" />
@@ -607,6 +619,7 @@ function PromptAttachmentMenu({
   onUploadFiles: (files: File[]) => void;
   onPickAsset: () => void;
 }) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   return (
@@ -627,7 +640,7 @@ function PromptAttachmentMenu({
           type="button"
           disabled={disabled}
           className="flex h-7 w-7 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground hover:bg-accent/50 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-30"
-          aria-label="Add"
+          aria-label={t("promptDialog.addAttachment")}
         >
           <IconPlus className="h-4 w-4" />
         </button>
@@ -647,10 +660,10 @@ function PromptAttachmentMenu({
           <IconUpload className="h-3.5 w-3.5 text-muted-foreground" />
           <span>
             <span className="block font-medium text-foreground">
-              Upload file
+              {t("promptDialog.uploadFile")}
             </span>
             <span className="block text-[10px] text-muted-foreground">
-              Images, PDFs, text/code
+              {t("promptDialog.uploadFileDescription")}
             </span>
           </span>
         </button>
@@ -665,10 +678,10 @@ function PromptAttachmentMenu({
           <IconPhoto className="h-3.5 w-3.5 text-muted-foreground" />
           <span>
             <span className="block font-medium text-foreground">
-              Pick asset
+              {t("promptDialog.pickAsset")}
             </span>
             <span className="block text-[10px] text-muted-foreground">
-              Browse or generate images
+              {t("promptDialog.pickAssetDescription")}
             </span>
           </span>
         </button>

package/corpus/templates/design/app/components/visual-editor/CanvasCommentPins.tsx

@@ -1,4 +1,4 @@
-import { sendToAgentChat } from "@agent-native/core/client";
+import { sendToAgentChat, useT } from "@agent-native/core/client";
 import {
   IconMessage,
   IconMessageCheck,
@@ -72,6 +72,7 @@ export function CanvasCommentPins({
   contextId,
   contextLabel,
 }: CanvasCommentPinsProps) {
+  const t = useT();
   const [pins, setPins] = useState<CanvasPin[]>([]);
   const [activePinId, setActivePinId] = useState<string | null>(null);
   const containerRef = useRef<HTMLElement | null>(null);
@@ -107,7 +108,7 @@ export function CanvasCommentPins({
       const rect = canvas.getBoundingClientRect();
       const xPct = ((clientX - rect.left) / rect.width) * 100;
       const yPct = ((clientY - rect.top) / rect.height) * 100;
-      if (xPct < 0 || xPct > 100 || yPct < 0 || yPct > 100) return;
+      if (xPct < 0 || xPct > 100 || yPct < 0 || yPct > 100) return; // i18n-ignore geometry bounds check, not UI copy
 
       // Build a best-effort selector for parent-DOM canvases. For iframe
       // canvases the transparent overlay captures the click, so target details
@@ -252,10 +253,10 @@ export function CanvasCommentPins({
         >
           <IconMessage className="w-3.5 h-3.5 text-[#609FF8]" />
           <span className="text-[11px] text-foreground">
-            Click anywhere to drop a comment pin
+            {t("visualEditor.clickToDropCommentPin")}
           </span>
           <span className="text-[10px] text-muted-foreground ml-1">
-            Esc to exit
+            {t("visualEditor.escToExit")}
           </span>
         </div>
       )}
@@ -298,7 +299,10 @@ export function CanvasCommentPins({
                 </button>
               </TooltipTrigger>
               <TooltipContent className="pointer-events-none">
-                {pin.draft || (pin.submitted ? "Comment sent" : "Comment")}
+                {pin.draft ||
+                  (pin.submitted
+                    ? t("visualEditor.commentSent")
+                    : t("visualEditor.comment"))}
               </TooltipContent>
             </Tooltip>
 
@@ -311,7 +315,7 @@ export function CanvasCommentPins({
                 className="absolute z-[260] left-3 top-1 w-72 rounded-lg border border-border bg-popover shadow-xl p-2"
               >
                 <p className="mb-2 text-xs font-semibold text-foreground">
-                  Edit design
+                  {t("visualEditor.editDesign")}
                 </p>
                 <Textarea
                   autoFocus
@@ -327,7 +331,7 @@ export function CanvasCommentPins({
                       removePin(pin.id);
                     }
                   }}
-                  placeholder="Tell the agent what to change…"
+                  placeholder={t("visualEditor.tellAgentWhatToChange")}
                   className="resize-none text-xs min-h-[60px]"
                 />
                 {pin.targetText && (
@@ -356,7 +360,7 @@ export function CanvasCommentPins({
                       disabled={!(pin.draft || "").trim()}
                     >
                       <IconSend className="w-3 h-3" />
-                      Send
+                      {t("visualEditor.send")}
                     </Button>
                   </div>
                 </div>

package/corpus/templates/design/app/components/visual-editor/DrawOverlay.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconEraser,
   IconArrowBackUp,
@@ -94,6 +95,7 @@ interface Stroke {
  * be `position: relative`.
  */
 export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
+  const t = useT();
   const containerRef = useRef<HTMLDivElement>(null);
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [color, setColor] = useState(PRESET_COLORS[0].color);
@@ -229,9 +231,9 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
     setStrokes([]);
     setTextAnnotations([]);
     setRedoStrokes([]);
-    toast("Cleared all annotations", {
+    toast(t("visualEditor.clearedAllAnnotations"), {
       action: {
-        label: "Undo",
+        label: t("visualEditor.undo"),
         onClick: () => {
           setStrokes(prevStrokes);
           setTextAnnotations(prevTexts);
@@ -350,7 +352,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
             }}
             className="h-7 w-48 border-primary bg-background text-sm"
             autoFocus
-            placeholder="Type annotation…"
+            placeholder={t("visualEditor.typeAnnotationFancy")}
           />
         </div>
       )}
@@ -425,7 +427,9 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
               <IconCursorText className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Type anywhere on the canvas</TooltipContent>
+          <TooltipContent>
+            {t("visualEditor.typeAnywhereOnCanvas")}
+          </TooltipContent>
         </Tooltip>
 
         {/* Undo last stroke */}
@@ -439,7 +443,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
               <IconArrowBackUp className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Undo stroke</TooltipContent>
+          <TooltipContent>{t("visualEditor.undoStroke")}</TooltipContent>
         </Tooltip>
 
         {/* Redo */}
@@ -453,7 +457,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
               <IconArrowForwardUp className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Redo stroke</TooltipContent>
+          <TooltipContent>{t("visualEditor.redoStroke")}</TooltipContent>
         </Tooltip>
 
         {/* Clear all */}
@@ -467,7 +471,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
               <IconEraser className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Clear all</TooltipContent>
+          <TooltipContent>{t("visualEditor.clearAll")}</TooltipContent>
         </Tooltip>
 
         <div className="mx-1 h-4 w-px bg-border" />
@@ -480,7 +484,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
             if (e.key === "Enter" && hasContent) send();
             if (e.key === "Escape") onClose();
           }}
-          placeholder="Tell the agent what to do…"
+          placeholder={t("visualEditor.tellAgentWhatToDo")}
           className="h-7 w-56 border-border bg-background text-xs"
         />
 
@@ -492,7 +496,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
           disabled={!hasContent}
         >
           <IconSend className="h-3 w-3" />
-          Send
+          {t("visualEditor.send")}
         </Button>
 
         {/* Close */}
@@ -505,7 +509,7 @@ export function DrawOverlay({ visible, onSend, onClose }: DrawOverlayProps) {
               <IconX className="h-3.5 w-3.5" />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Exit draw mode</TooltipContent>
+          <TooltipContent>{t("visualEditor.exitDrawMode")}</TooltipContent>
         </Tooltip>
       </div>
     </div>

package/corpus/templates/design/app/components/visual-editor/SaveStatusIndicator.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconCloudOff } from "@tabler/icons-react";
 
 import { cn } from "@/lib/utils";
@@ -14,18 +15,19 @@ export function SaveStatusIndicator({
   offline,
   className,
 }: SaveStatusIndicatorProps) {
+  const t = useT();
   if (offline) {
     return (
       <div
         data-save-status="offline"
-        title="Changes will save when reconnected"
+        title={t("visualEditor.changesSaveWhenReconnected")}
         className={cn(
           "flex items-center gap-1 text-[11px] text-amber-500",
           className,
         )}
       >
         <IconCloudOff className="w-3 h-3" />
-        <span className="hidden sm:inline">Offline</span>
+        <span className="hidden sm:inline">{t("visualEditor.offline")}</span>
       </div>
     );
   }