@agent-native/core 0.77.2 → 0.77.4

package/corpus/templates/slides/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,
@@ -28,7 +28,7 @@ const PROVIDERS: Provider[] = [
   {
     id: "turso",
     name: "Turso",
-    description: "SQLite at the edge",
+    description: "cloudSqliteEdge",
     urlPrefix: "libsql://",
     needsAuthToken: true,
     steps: [
@@ -42,7 +42,7 @@ const PROVIDERS: Provider[] = [
   {
     id: "neon",
     name: "Neon",
-    description: "Serverless Postgres",
+    description: "cloudServerlessPostgres",
     urlPrefix: "postgres://",
     needsAuthToken: false,
     steps: [
@@ -56,7 +56,7 @@ const PROVIDERS: Provider[] = [
   {
     id: "supabase",
     name: "Supabase",
-    description: "Open source Firebase alternative",
+    description: "cloudOpenSourceFirebaseAlternative",
     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
+    description: "cloudCloudflareSqliteEdge",
     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.cloudConnectionFailed"),
+      );
       setStatus("error");
     } finally {
       connectingRef.current = false;
     }
-  }, [dbUrl, authToken]);
+  }, [dbUrl, authToken, t]);
 
   const isConnecting = status === "saving" || status === "polling";
 
@@ -218,7 +221,7 @@ export function CloudUpgrade({
               {p.name}
             </span>
             <span className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">
-              {p.description}
+              {t(`raw.${p.description}`)}
             </span>
           </button>
         ))}
@@ -228,7 +231,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.cloudSetupSteps")}
           </p>
           <ol className="space-y-1">
             {provider.steps.map((step, i) => (
@@ -274,7 +277,7 @@ export function CloudUpgrade({
             </label>
             <input
               type="password"
-              placeholder="Auth token"
+              placeholder={t("raw.cloudAuthToken")}
               value={authToken}
               onChange={(e) => setAuthToken(e.target.value)}
               disabled={isConnecting}
@@ -295,7 +298,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.cloudConnectedReloading")}</span>
         </div>
       )}
 
@@ -317,7 +320,7 @@ export function CloudUpgrade({
         ) : (
           <>
             <IconDatabase className="h-4 w-4" />
-            <span>Test & Connect</span>
+            <span>{t("raw.cloudTestConnect")}</span>
           </>
         )}
       </button>

package/corpus/templates/slides/app/components/ThemeToggle.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconSun, IconMoon } from "@tabler/icons-react";
 import { useTheme } from "next-themes";
 import { useState, useEffect } from "react";
@@ -12,6 +13,7 @@ import { cn } from "@/lib/utils";
 
 export function ThemeToggle({ className }: { className?: string }) {
   const { setTheme, resolvedTheme } = useTheme();
+  const t = useT();
   const [mounted, setMounted] = useState(false);
 
   useEffect(() => setMounted(true), []);
@@ -38,7 +40,7 @@ export function ThemeToggle({ className }: { className?: string }) {
           )}
         </Button>
       </TooltipTrigger>
-      <TooltipContent>Toggle theme</TooltipContent>
+      <TooltipContent>{t("root.toggleTheme")}</TooltipContent>
     </Tooltip>
   );
 }

package/corpus/templates/slides/app/components/comments/SlideCommentsPanel.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconX,
   IconCheck,
@@ -60,6 +61,7 @@ function CommentItem({
   comment: SlideComment;
   onDelete: () => void;
 }) {
+  const t = useT();
   const [hovered, setHovered] = useState(false);
   return (
     <div
@@ -87,7 +89,7 @@ function CommentItem({
                     <IconTrash size={11} />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Delete comment</TooltipContent>
+                <TooltipContent>{t("comments.deleteComment")}</TooltipContent>
               </Tooltip>
             )}
           </div>
@@ -114,6 +116,7 @@ function PendingCommentInput({
   onDone: () => void;
   onCancel: () => void;
 }) {
+  const t = useT();
   const [text, setText] = useState("");
   const [error, setError] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -138,7 +141,7 @@ function PendingCommentInput({
       onDone();
     } catch (err) {
       setError(
-        err instanceof Error ? err.message : "Could not save this comment.",
+        err instanceof Error ? err.message : t("comments.saveCommentFailed"),
       );
     }
   };
@@ -161,7 +164,7 @@ function PendingCommentInput({
           if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) submit();
           if (e.key === "Escape") onCancel();
         }}
-        placeholder="Add a comment..."
+        placeholder={t("comments.addCommentPlaceholder")}
         rows={3}
         className="w-full bg-transparent text-foreground/90 text-[12px] px-3 py-2 outline-none resize-none placeholder:text-muted-foreground"
       />
@@ -174,7 +177,7 @@ function PendingCommentInput({
           onClick={onCancel}
           className="text-[11px] text-muted-foreground hover:text-foreground/80 px-2 py-1 rounded"
         >
-          Cancel
+          {t("comments.cancel")}
         </button>
         <button
           type="button"
@@ -182,7 +185,9 @@ function PendingCommentInput({
           disabled={!text.trim() || createComment.isPending}
           className="text-[11px] bg-[#609FF8] text-black font-medium px-2.5 py-1 rounded disabled:opacity-40 hover:bg-[#7AB2FA]"
         >
-          {createComment.isPending ? "Saving..." : "Comment"}
+          {createComment.isPending
+            ? t("comments.saving")
+            : t("comments.comment")}
         </button>
       </div>
     </div>
@@ -201,6 +206,7 @@ function ReplyInput({
   threadId: string;
   onDone: () => void;
 }) {
+  const t = useT();
   const [text, setText] = useState("");
   const [error, setError] = useState<string | null>(null);
   const textareaRef = useRef<HTMLTextAreaElement>(null);
@@ -225,7 +231,7 @@ function ReplyInput({
       onDone();
     } catch (err) {
       setError(
-        err instanceof Error ? err.message : "Could not save this reply.",
+        err instanceof Error ? err.message : t("comments.saveReplyFailed"),
       );
     }
   };
@@ -243,7 +249,7 @@ function ReplyInput({
           if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) submit();
           if (e.key === "Escape") onDone();
         }}
-        placeholder="Reply..."
+        placeholder={t("comments.replyPlaceholder")}
         rows={2}
         className="w-full bg-transparent text-foreground/90 text-[12px] px-3 py-2 outline-none resize-none placeholder:text-muted-foreground"
       />
@@ -256,7 +262,7 @@ function ReplyInput({
           onClick={onDone}
           className="text-[11px] text-muted-foreground hover:text-foreground/80 px-2 py-1 rounded"
         >
-          Cancel
+          {t("comments.cancel")}
         </button>
         <button
           type="button"
@@ -264,7 +270,7 @@ function ReplyInput({
           disabled={!text.trim() || createComment.isPending}
           className="text-[11px] bg-[#609FF8] text-black font-medium px-2.5 py-1 rounded disabled:opacity-40 hover:bg-[#7AB2FA]"
         >
-          Reply
+          {t("comments.reply")}
         </button>
       </div>
     </div>
@@ -281,6 +287,7 @@ function ThreadCard({
   deckId: string;
   slideId: string;
 }) {
+  const t = useT();
   const [replyOpen, setReplyOpen] = useState(false);
   const [showReplies, setShowReplies] = useState(false);
   const [hovered, setHovered] = useState(false);
@@ -334,7 +341,9 @@ function ThreadCard({
                         <IconCheck size={11} />
                       </button>
                     </TooltipTrigger>
-                    <TooltipContent>Resolve thread</TooltipContent>
+                    <TooltipContent>
+                      {t("comments.resolveThread")}
+                    </TooltipContent>
                   </Tooltip>
                   <Tooltip>
                     <TooltipTrigger asChild>
@@ -347,7 +356,9 @@ function ThreadCard({
                         <IconTrash size={11} />
                       </button>
                     </TooltipTrigger>
-                    <TooltipContent>Delete comment</TooltipContent>
+                    <TooltipContent>
+                      {t("comments.deleteComment")}
+                    </TooltipContent>
                   </Tooltip>
                 </>
               )}
@@ -369,8 +380,9 @@ function ThreadCard({
             size={11}
             className={`transition-transform ${showReplies ? "rotate-180" : ""}`}
           />
-          {showReplies ? "Hide" : `${replies.length}`}{" "}
-          {replies.length === 1 ? "reply" : "replies"}
+          {showReplies
+            ? t("comments.hideReplies")
+            : t("comments.replyCount", { count: replies.length })}
         </button>
       )}
 
@@ -395,7 +407,7 @@ function ThreadCard({
               onClick={() => setReplyOpen(true)}
               className="text-[11px] text-muted-foreground hover:text-foreground/80"
             >
-              Reply
+              {t("comments.reply")}
             </button>
           )}
         </div>
@@ -422,8 +434,8 @@ export function SlideCommentsPanel({
   onPendingDone,
   onClose,
 }: SlideCommentsPanelProps) {
-  const commentsQuery = useSlideComments(deckId, slideId);
-  const threads: CommentThread[] = commentsQuery.data ?? [];
+  const t = useT();
+  const { data: threads = [] } = useSlideComments(deckId, slideId);
   const [showResolved, setShowResolved] = useState(false);
   const [addingComment, setAddingComment] = useState(false);
 
@@ -443,7 +455,7 @@ export function SlideCommentsPanel({
       {/* Header */}
       <div className="flex items-center justify-between px-4 py-3 border-b border-border flex-shrink-0">
         <span className="text-[13px] font-medium text-foreground/80">
-          Comments
+          {t("comments.title")}
         </span>
         <div className="flex items-center gap-1">
           {!showInput && deckId && slideId && (
@@ -456,7 +468,7 @@ export function SlideCommentsPanel({
                   <IconMessageCircle size={14} />
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Add comment</TooltipContent>
+              <TooltipContent>{t("comments.addComment")}</TooltipContent>
             </Tooltip>
           )}
           <Tooltip>
@@ -468,7 +480,7 @@ export function SlideCommentsPanel({
                 <IconX size={14} />
               </button>
             </TooltipTrigger>
-            <TooltipContent>Close</TooltipContent>
+            <TooltipContent>{t("comments.close")}</TooltipContent>
           </Tooltip>
         </div>
       </div>
@@ -509,8 +521,8 @@ export function SlideCommentsPanel({
             className="w-full text-[11px] text-muted-foreground hover:text-foreground/70 py-1"
           >
             {showResolved
-              ? "Hide resolved"
-              : `Show ${resolvedThreads.length} resolved`}
+              ? t("comments.hideResolved")
+              : t("comments.showResolved", { count: resolvedThreads.length })}
           </button>
         )}
 
@@ -528,10 +540,10 @@ export function SlideCommentsPanel({
                 className="mx-auto mb-2 text-muted-foreground/60"
               />
               <p className="text-[12px] text-muted-foreground">
-                No comments yet
+                {t("comments.noCommentsYet")}
               </p>
               <p className="text-[11px] text-muted-foreground/70 mt-1">
-                Click to add a comment
+                {t("comments.clickToAddComment")}
               </p>
             </button>
           ) : (
@@ -541,10 +553,10 @@ export function SlideCommentsPanel({
                 className="mx-auto mb-2 text-muted-foreground/60"
               />
               <p className="text-[12px] text-muted-foreground">
-                No comments yet
+                {t("comments.noCommentsYet")}
               </p>
               <p className="text-[11px] text-muted-foreground/70 mt-1">
-                Select a slide to add one
+                {t("comments.selectSlideToAdd")}
               </p>
             </div>
           ))}

package/corpus/templates/slides/app/components/deck/DeckCard.tsx

@@ -1,4 +1,4 @@
-import { VisibilityBadge } from "@agent-native/core/client";
+import { VisibilityBadge, useT } from "@agent-native/core/client";
 import {
   IconDots,
   IconTrash,
@@ -37,6 +37,7 @@ export default function DeckCard({
   isDuplicating = false,
   designSystemTitle,
 }: DeckCardProps) {
+  const t = useT();
   const firstSlide = deck.slides?.[0];
   const [isRenaming, setIsRenaming] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
@@ -150,7 +151,7 @@ export default function DeckCard({
                 e.stopPropagation();
               }}
               className="p-2 sm:p-1.5 rounded-md bg-black/60 backdrop-blur-sm border border-border hover:bg-black/80"
-              aria-label="Deck options"
+              aria-label={t("raw.deckOptions")}
             >
               <IconDots className="w-3.5 h-3.5 text-foreground/70" />
             </button>

package/corpus/templates/slides/app/components/deck/SlideRenderer.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   useState,
   useEffect,
@@ -537,6 +538,7 @@ export function SlideInner({
   aspectRatio?: AspectRatio;
   onOverflowChange?: (info: SlideOverflowInfo) => void;
 }) {
+  const t = useT();
   const dims = getAspectRatioDims(aspectRatio);
   const sizeStyle: React.CSSProperties = {
     width: dims.width,
@@ -586,7 +588,7 @@ export function SlideInner({
           <Skeleton className="w-full h-full bg-white/[0.06]" />
         </div>
         <span className="text-xs text-white/40 animate-pulse">
-          Generating image...
+          {t("raw.generatingImage")}
         </span>
       </div>
     </div>

package/corpus/templates/slides/app/components/design-system/DesignSystemPreview.tsx

@@ -1,3 +1,5 @@
+import { useT } from "@agent-native/core/client";
+
 import { cn } from "@/lib/utils";
 
 import type { DesignSystemData } from "../../../shared/api";
@@ -11,6 +13,7 @@ export function DesignSystemPreview({
   data,
   className,
 }: DesignSystemPreviewProps) {
+  const t = useT();
   const swatches = [
     { label: "Primary", color: data.colors.primary },
     { label: "Secondary", color: data.colors.secondary },
@@ -81,7 +84,7 @@ export function DesignSystemPreview({
       {/* Mini slide preview */}
       <div className="p-4">
         <div className="text-[10px] font-medium uppercase tracking-wider text-muted-foreground mb-3">
-          Slide Preview
+          {t("raw.designSlidePreview")}
         </div>
         <div
           className="rounded-lg overflow-hidden"
@@ -119,7 +122,7 @@ export function DesignSystemPreview({
               letterSpacing: "-0.5px",
             }}
           >
-            Slide Title
+            {t("raw.designSlideTitle")}
           </div>
           <div
             style={{
@@ -131,8 +134,7 @@ export function DesignSystemPreview({
               lineHeight: 1.5,
             }}
           >
-            Supporting text appears here with your brand styling applied
-            consistently across all slides.
+            {t("raw.designSupportingText")}
           </div>
           {/* Accent bar */}
           <div