@agent-native/core 0.77.3 → 0.77.4

package/corpus/templates/slides/app/components/editor/ImageOverlay.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconPhoto,
   IconFolderOpen,
@@ -33,6 +34,7 @@ export default function ImageOverlay({
   onToggleObjectFit,
   onClose,
 }: ImageOverlayProps) {
+  const t = useT();
   const menuRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -92,7 +94,7 @@ export default function ImageOverlay({
         className="image-overlay-btn"
       >
         <IconFolderOpen className="w-3.5 h-3.5 text-[#00E5FF]" />
-        Asset Library
+        {t("editorToolbar.assetLibrary")}
       </button>
       <button
         onClick={() => {

package/corpus/templates/slides/app/components/editor/ImageSearchPanel.tsx

@@ -1,4 +1,4 @@
-import { appBasePath } from "@agent-native/core/client";
+import { appBasePath, useT } from "@agent-native/core/client";
 import { IconX, IconSearch, IconLoader2 } from "@tabler/icons-react";
 import { useState, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
@@ -26,6 +26,7 @@ export default function ImageSearchPanel({
   onOpenChange,
   onSelectImage,
 }: ImageSearchPanelProps) {
+  const t = useT();
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<SearchResult[]>([]);
   const [loading, setLoading] = useState(false);
@@ -97,7 +98,9 @@ export default function ImageSearchPanel({
       className="w-[min(24rem,calc(100vw-24px))] max-h-[480px] bg-popover border border-border rounded-xl shadow-2xl shadow-black/60 overflow-hidden flex flex-col"
     >
       <div className="px-4 pt-3 pb-2 flex items-center justify-between flex-shrink-0">
-        <h3 className="text-sm font-semibold text-foreground">Search Images</h3>
+        <h3 className="text-sm font-semibold text-foreground">
+          {t("raw.imageSearchTitle")}
+        </h3>
         <button
           onClick={() => onOpenChange(false)}
           className="text-muted-foreground/70 hover:text-muted-foreground transition-colors"
@@ -119,7 +122,7 @@ export default function ImageSearchPanel({
               onKeyDown={(e) => {
                 if (e.key === "Enter") handleSearch();
               }}
-              placeholder="Search for images..."
+              placeholder={t("raw.searchImagesPlaceholder")}
               className="w-full pl-8 pr-3 py-1.5 bg-muted border border-border rounded-lg text-sm text-foreground placeholder:text-muted-foreground/70 outline-none focus:border-[#609FF8]/50"
             />
           </div>
@@ -131,7 +134,7 @@ export default function ImageSearchPanel({
             {loading ? (
               <IconLoader2 className="w-3.5 h-3.5 animate-spin" />
             ) : (
-              "Search"
+              t("raw.search")
             )}
           </button>
         </div>
@@ -145,7 +148,7 @@ export default function ImageSearchPanel({
         )}
         {!loading && results.length === 0 && !error && (
           <div className="text-center py-8 text-muted-foreground text-xs">
-            Search for logos, images, icons...
+            {t("raw.searchForLogosImagesIcons")}
           </div>
         )}
         {loading && (

package/corpus/templates/slides/app/components/editor/ImportButton.tsx

@@ -1,4 +1,4 @@
-import { agentNativePath, appBasePath } from "@agent-native/core/client";
+import { agentNativePath, appBasePath, useT } from "@agent-native/core/client";
 import { IconUpload } from "@tabler/icons-react";
 import { useRef } from "react";
 
@@ -14,6 +14,7 @@ interface ImportButtonProps {
 }
 
 export function ImportButton({ deckId, onImportComplete }: ImportButtonProps) {
+  const t = useT();
   const fileRef = useRef<HTMLInputElement>(null);
 
   const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -64,7 +65,7 @@ export function ImportButton({ deckId, onImportComplete }: ImportButtonProps) {
           />
         </button>
       </TooltipTrigger>
-      <TooltipContent>Import PPTX, DOCX, or PDF</TooltipContent>
+      <TooltipContent>{t("raw.importFileTypes")}</TooltipContent>
     </Tooltip>
   );
 }

package/corpus/templates/slides/app/components/editor/LogoSearchPanel.tsx

@@ -1,4 +1,8 @@
-import { agentNativePath, useActionQuery } from "@agent-native/core/client";
+import {
+  agentNativePath,
+  useActionQuery,
+  useT,
+} from "@agent-native/core/client";
 import { IconX, IconSearch, IconLoader2 } from "@tabler/icons-react";
 import { useState, useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
@@ -21,6 +25,7 @@ export default function LogoSearchPanel({
   onOpenChange,
   onSelectLogo,
 }: LogoSearchPanelProps) {
+  const t = useT();
   const [query, setQuery] = useState("");
   const [results, setResults] = useState<LogoResult[]>([]);
   const [loading, setLoading] = useState(false);
@@ -111,7 +116,7 @@ export default function LogoSearchPanel({
 
   // Build variations for the selected domain
   const variations = selectedDomain
-    ? buildVariations(selectedDomain, brandfetchId)
+    ? buildVariations(selectedDomain, brandfetchId, t)
     : [];
 
   return createPortal(
@@ -137,7 +142,7 @@ export default function LogoSearchPanel({
               {selectedDomain}
             </button>
           ) : (
-            "Logo Search"
+            t("raw.logoSearchTitle")
           )}
         </h3>
         <button
@@ -162,7 +167,7 @@ export default function LogoSearchPanel({
                 onKeyDown={(e) => {
                   if (e.key === "Enter") handleSearch();
                 }}
-                placeholder="Search company name (e.g. Intuit)"
+                placeholder={t("raw.searchCompanyPlaceholder")}
                 className="w-full pl-8 pr-3 py-1.5 bg-muted border border-border rounded-lg text-sm text-foreground placeholder:text-muted-foreground/70 outline-none focus:border-[#609FF8]/50"
               />
             </div>
@@ -174,7 +179,7 @@ export default function LogoSearchPanel({
               {loading ? (
                 <IconLoader2 className="w-3.5 h-3.5 animate-spin" />
               ) : (
-                "Search"
+                t("raw.search")
               )}
             </button>
           </div>
@@ -191,7 +196,7 @@ export default function LogoSearchPanel({
         {/* IconSearch results */}
         {!selectedDomain && !loading && results.length === 0 && !error && (
           <div className="text-center py-6 text-muted-foreground text-xs">
-            Search for a company to find their logo
+            {t("raw.searchCompanyLogo")}
           </div>
         )}
 
@@ -318,6 +323,7 @@ interface VariationGroup {
 function buildVariations(
   domain: string,
   _brandfetchId: string | null,
+  t: ReturnType<typeof useT>,
 ): VariationGroup[] {
   // Brandfetch CDN works without client ID for free tier
   const bf = (path: string) => `https://cdn.brandfetch.io/${domain}/${path}`;
@@ -329,19 +335,23 @@ function buildVariations(
       label: "Logo",
       items: [
         { label: "Default", url: bf("logo.png"), bg: "rgba(255,255,255,0.03)" },
-        { label: "On dark", url: bf("theme/dark/logo.png"), bg: "#111" },
+        { label: t("raw.onDark"), url: bf("theme/dark/logo.png"), bg: "#111" },
         { label: "SVG", url: bf("logo.svg"), bg: "rgba(255,255,255,0.03)" },
       ],
     },
     {
-      label: "Symbol / Icon",
+      label: t("raw.symbolIcon"),
       items: [
         {
           label: "Symbol",
           url: bf("symbol.png"),
           bg: "rgba(255,255,255,0.03)",
         },
-        { label: "Symbol dark", url: bf("theme/dark/symbol.png"), bg: "#111" },
+        {
+          label: t("raw.symbolDark"),
+          url: bf("theme/dark/symbol.png"),
+          bg: "#111",
+        },
         { label: "Icon", url: bf("icon.png"), bg: "rgba(255,255,255,0.03)" },
       ],
     },
@@ -354,7 +364,7 @@ function buildVariations(
           bg: "rgba(255,255,255,0.03)",
         },
         {
-          label: "For dark bg",
+          label: t("raw.forDarkBg"),
           url: ld("size=400&format=png&retina=true&theme=light"),
           bg: "#111",
         },

package/corpus/templates/slides/app/components/editor/MermaidToExcalidrawPanel.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconTransform, IconLoader2 } from "@tabler/icons-react";
 import { useState, useCallback } from "react";
 
@@ -12,6 +13,7 @@ export function MermaidToExcalidrawPanel({
   onConvert,
   onCancel,
 }: MermaidToExcalidrawPanelProps) {
+  const t = useT();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState("");
 
@@ -47,7 +49,7 @@ export function MermaidToExcalidrawPanel({
   return (
     <div className="p-3 space-y-3">
       <div className="text-xs text-muted-foreground">
-        Convert this mermaid diagram to an editable Excalidraw drawing?
+        {t("raw.mermaidConvertPrompt")}
       </div>
       <pre className="text-[10px] text-muted-foreground bg-muted rounded p-2 max-h-24 overflow-auto">
         {mermaidDefinition.slice(0, 300)}

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

@@ -1,4 +1,4 @@
-import { appBasePath, PromptComposer } from "@agent-native/core/client";
+import { appBasePath, PromptComposer, useT } from "@agent-native/core/client";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
 
@@ -51,6 +51,7 @@ export default function PromptPopover({
   onBeforeUpload,
   children,
 }: PromptPopoverProps) {
+  const t = useT();
   const [uploading, setUploading] = useState(false);
   const [promptText, setPromptText] = useState("");
   const [googleDocContext, setGoogleDocContext] = useState("");
@@ -151,16 +152,16 @@ export default function PromptPopover({
         onSubmit(enrichedText, uploaded);
       } catch (error) {
         toast({
-          title: "Upload failed",
+          title: t("raw.uploadFailed"),
           description:
             error instanceof Error
               ? error.message
-              : "Could not upload the attached file.",
+              : t("raw.uploadAttachedFailed"),
           variant: "destructive",
         });
       }
     },
-    [googleDocContext, onBeforeUpload, onSubmit, uploadFiles],
+    [googleDocContext, onBeforeUpload, onSubmit, uploadFiles, t],
   );
 
   useEffect(() => {

package/corpus/templates/slides/app/components/editor/ShareDialog.tsx

@@ -1,4 +1,4 @@
-import { appBasePath } from "@agent-native/core/client";
+import { appBasePath, useT } from "@agent-native/core/client";
 import {
   IconShare2,
   IconCopy,
@@ -29,6 +29,7 @@ interface ShareDialogProps {
 }
 
 export default function ShareDialog({ deck, children }: ShareDialogProps) {
+  const t = useT();
   const [open, setOpen] = useState(false);
   const [shareUrl, setShareUrl] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
@@ -50,7 +51,7 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
 
       if (!res.ok) {
         const err = await res.json();
-        throw new Error(err.error || "Failed to create share link");
+        throw new Error(err.error || t("share.createFailed"));
       }
 
       const data = await res.json();
@@ -88,8 +89,8 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
       >
         {showCloudUpgrade || isLocal ? (
           <CloudUpgrade
-            title="Share Presentation"
-            description="To share presentations publicly, connect a cloud database so your slides can be accessed from anywhere."
+            title={t("share.title")}
+            description={t("share.cloudUpgradeDescription")}
             onClose={() => {
               setShowCloudUpgrade(false);
               setOpen(false);
@@ -100,11 +101,10 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
             <div className="mb-3">
               <div className="text-foreground flex items-center gap-2 text-sm font-semibold">
                 <IconShare2 className="w-4 h-4 text-[#609FF8]" />
-                Share Presentation
+                {t("share.title")}
               </div>
               <div className="text-muted-foreground text-xs mt-0.5">
-                Create a shareable link for "{deck.title}". Only this
-                presentation will be accessible — no other decks.
+                {t("share.description", { title: deck.title })}
               </div>
             </div>
 
@@ -113,22 +113,23 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
                 <>
                   <div className="bg-muted/50 rounded-lg p-3 border border-border">
                     <h4 className="text-sm font-medium text-foreground/90 mb-2">
-                      What gets shared:
+                      {t("share.whatGetsShared")}
                     </h4>
                     <ul className="text-xs text-muted-foreground space-y-1">
                       <li>
-                        - Slide content and layouts ({deck.slides.length}{" "}
-                        slides)
+                        {t("share.slideContent", {
+                          count: deck.slides.length,
+                        })}
                       </li>
-                      <li>- Presentation view (fullscreen)</li>
+                      <li>{t("share.presentationView")}</li>
                     </ul>
                     <h4 className="text-sm font-medium text-foreground/90 mt-3 mb-2">
-                      What stays private:
+                      {t("share.whatStaysPrivate")}
                     </h4>
                     <ul className="text-xs text-muted-foreground space-y-1">
-                      <li>- Speaker notes</li>
-                      <li>- Other presentations</li>
-                      <li>- Editing access</li>
+                      <li>{t("share.speakerNotes")}</li>
+                      <li>{t("share.otherPresentations")}</li>
+                      <li>{t("share.editingAccess")}</li>
                     </ul>
                   </div>
 
@@ -146,12 +147,12 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
                     {loading ? (
                       <>
                         <IconLoader2 className="w-4 h-4 animate-spin" />
-                        Creating link...
+                        {t("share.creatingLink")}
                       </>
                     ) : (
                       <>
                         <IconShare2 className="w-4 h-4" />
-                        Create Share Link
+                        {t("share.createShareLink")}
                       </>
                     )}
                   </button>
@@ -169,7 +170,7 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
                         <button
                           onClick={handleCopy}
                           className="flex-shrink-0 p-2 rounded-lg bg-accent hover:bg-accent border border-border transition-colors"
-                          aria-label="Copy link"
+                          aria-label={t("share.copyLink")}
                         >
                           {copied ? (
                             <IconCheck className="w-4 h-4 text-green-400" />
@@ -178,7 +179,7 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
                           )}
                         </button>
                       </TooltipTrigger>
-                      <TooltipContent>Copy link</TooltipContent>
+                      <TooltipContent>{t("share.copyLink")}</TooltipContent>
                     </Tooltip>
                   </div>
 
@@ -189,11 +190,11 @@ export default function ShareDialog({ deck, children }: ShareDialogProps) {
                     className="flex items-center justify-center gap-2 w-full px-4 py-2 rounded-lg bg-accent hover:bg-accent border border-border text-foreground/70 text-sm transition-colors"
                   >
                     <IconExternalLink className="w-3.5 h-3.5" />
-                    Open shared link
+                    {t("share.openSharedLink")}
                   </a>
 
                   <p className="text-[11px] text-muted-foreground/70 text-center">
-                    Anyone with this link can view this presentation.
+                    {t("share.anyoneWithLink")}
                   </p>
                 </>
               )}

package/corpus/templates/slides/app/components/editor/SlideBubbleMenu.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   IconBold,
   IconItalic,
@@ -112,6 +113,7 @@ function ColorPicker({
   editor: Editor;
   onClose: () => void;
 }) {
+  const t = useT();
   const [palette, setPalette] = useState<string[]>(getBrandPalette);
   const [editMode, setEditMode] = useState(false);
   const [addingColor, setAddingColor] = useState(false);
@@ -146,7 +148,7 @@ function ColorPicker({
     <div className="w-[180px]">
       <div className="flex items-center justify-between mb-2">
         <span className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider">
-          Brand Colors
+          {t("slideTextMenu.brandColors")}
         </span>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -162,7 +164,7 @@ function ColorPicker({
               <IconPencil size={11} />
             </button>
           </TooltipTrigger>
-          <TooltipContent>Edit palette</TooltipContent>
+          <TooltipContent>{t("slideTextMenu.editPalette")}</TooltipContent>
         </Tooltip>
       </div>
 
@@ -206,7 +208,7 @@ function ColorPicker({
                 <IconPlus size={10} />
               </button>
             </TooltipTrigger>
-            <TooltipContent>Add color</TooltipContent>
+            <TooltipContent>{t("slideTextMenu.addColor")}</TooltipContent>
           </Tooltip>
         )}
       </div>
@@ -221,7 +223,7 @@ function ColorPicker({
           className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground w-full"
         >
           <IconX size={11} />
-          Remove color
+          {t("slideTextMenu.removeColor")}
         </button>
       </div>
     </div>
@@ -229,6 +231,7 @@ function ColorPicker({
 }
 
 export function SlideBubbleMenu({ editor, onComment }: SlideBubbleMenuProps) {
+  const t = useT();
   const [showLinkInput, setShowLinkInput] = useState(false);
   const [linkUrl, setLinkUrl] = useState("");
   const [colorOpen, setColorOpen] = useState(false);
@@ -264,64 +267,64 @@ export function SlideBubbleMenu({ editor, onComment }: SlideBubbleMenuProps) {
   const buttons: (ButtonItem | DividerItem)[] = [
     {
       icon: IconBold,
-      title: "Bold",
+      title: t("slideTextMenu.bold"),
       action: () => editor.chain().focus().toggleBold().run(),
       isActive: () => editor.isActive("bold"),
     },
     {
       icon: IconItalic,
-      title: "Italic",
+      title: t("slideTextMenu.italic"),
       action: () => editor.chain().focus().toggleItalic().run(),
       isActive: () => editor.isActive("italic"),
     },
     {
       icon: IconStrikethrough,
-      title: "Strikethrough",
+      title: t("slideTextMenu.strikethrough"),
       action: () => editor.chain().focus().toggleStrike().run(),
       isActive: () => editor.isActive("strike"),
     },
     {
       icon: IconCode,
-      title: "Code",
+      title: t("slideTextMenu.code"),
       action: () => editor.chain().focus().toggleCode().run(),
       isActive: () => editor.isActive("code"),
     },
     { type: "divider" },
     {
       icon: IconH1,
-      title: "Heading 1",
+      title: t("slideTextMenu.heading1"),
       action: () => editor.chain().focus().toggleHeading({ level: 1 }).run(),
       isActive: () => editor.isActive("heading", { level: 1 }),
     },
     {
       icon: IconH2,
-      title: "Heading 2",
+      title: t("slideTextMenu.heading2"),
       action: () => editor.chain().focus().toggleHeading({ level: 2 }).run(),
       isActive: () => editor.isActive("heading", { level: 2 }),
     },
     {
       icon: IconH3,
-      title: "Heading 3",
+      title: t("slideTextMenu.heading3"),
       action: () => editor.chain().focus().toggleHeading({ level: 3 }).run(),
       isActive: () => editor.isActive("heading", { level: 3 }),
     },
     { type: "divider" },
     {
       icon: IconList,
-      title: "Bullet List",
+      title: t("slideTextMenu.bulletList"),
       action: () => editor.chain().focus().toggleBulletList().run(),
       isActive: () => editor.isActive("bulletList"),
     },
     {
       icon: IconListNumbers,
-      title: "Ordered List",
+      title: t("slideTextMenu.orderedList"),
       action: () => editor.chain().focus().toggleOrderedList().run(),
       isActive: () => editor.isActive("orderedList"),
     },
     { type: "divider" },
     {
       icon: IconLink,
-      title: "Link",
+      title: t("slideTextMenu.link"),
       action: toggleLink,
       isActive: () => editor.isActive("link"),
     },
@@ -349,7 +352,7 @@ export function SlideBubbleMenu({ editor, onComment }: SlideBubbleMenuProps) {
                   setLinkUrl("");
                 }
               }}
-              placeholder="Paste URL..."
+              placeholder={t("slideTextMenu.pasteUrl")}
               className="w-48 bg-transparent text-foreground text-sm outline-none placeholder-muted-foreground/70 border-b border-border pb-0.5"
               autoFocus
             />
@@ -357,7 +360,7 @@ export function SlideBubbleMenu({ editor, onComment }: SlideBubbleMenuProps) {
               onClick={handleSetLink}
               className="text-xs text-[#609FF8] hover:text-[#7AB2FA] font-medium"
             >
-              Apply
+              {t("slideTextMenu.apply")}
             </button>
             <button
               onClick={() => {
@@ -366,7 +369,7 @@ export function SlideBubbleMenu({ editor, onComment }: SlideBubbleMenuProps) {
               }}
               className="text-xs text-muted-foreground hover:text-foreground"
             >
-              Cancel
+              {t("slideTextMenu.cancel")}
             </button>
           </div>
         ) : (
@@ -426,7 +429,7 @@ export function SlideBubbleMenu({ editor, onComment }: SlideBubbleMenuProps) {
                     </button>
                   </PopoverTrigger>
                 </TooltipTrigger>
-                <TooltipContent>Text color</TooltipContent>
+                <TooltipContent>{t("slideTextMenu.textColor")}</TooltipContent>
               </Tooltip>
               <PopoverContent
                 side="bottom"
@@ -439,8 +442,16 @@ export function SlideBubbleMenu({ editor, onComment }: SlideBubbleMenuProps) {
                   onClose={() => setColorOpen(false)}
                 />
                 <div className="mt-2 pt-2 border-t border-border flex gap-2 text-[10px] text-muted-foreground">
-                  <span>{shortcutLabel("cmd+alt+c")} copy style</span>
-                  <span>{shortcutLabel("cmd+alt+v")} paste style</span>
+                  <span>
+                    {t("slideTextMenu.copyStyleShortcut", {
+                      shortcut: shortcutLabel("cmd+alt+c"),
+                    })}
+                  </span>
+                  <span>
+                    {t("slideTextMenu.pasteStyleShortcut", {
+                      shortcut: shortcutLabel("cmd+alt+v"),
+                    })}
+                  </span>
                 </div>
               </PopoverContent>
             </Popover>
@@ -465,7 +476,7 @@ export function SlideBubbleMenu({ editor, onComment }: SlideBubbleMenuProps) {
                       <IconMessageCircle size={14} stroke={2} />
                     </button>
                   </TooltipTrigger>
-                  <TooltipContent>Comment</TooltipContent>
+                  <TooltipContent>{t("slideTextMenu.comment")}</TooltipContent>
                 </Tooltip>
               </>
             )}