@agent-native/core 0.77.3 → 0.77.4

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

@@ -2,6 +2,7 @@ import {
   agentNativePath,
   appBasePath,
   appPath,
+  useT,
 } from "@agent-native/core/client";
 import {
   AgentToggleButton,
@@ -136,15 +137,15 @@ interface EditorToolbarProps {
   designSystemTitle?: string | null;
 }
 
-const slideLayoutOptions: { value: SlideLayout; label: string }[] = [
-  { value: "title", label: "Title" },
-  { value: "section", label: "Section Divider" },
-  { value: "content", label: "Content" },
-  { value: "two-column", label: "Two Column" },
-  { value: "image", label: "Image" },
-  { value: "statement", label: "Statement" },
-  { value: "full-image", label: "Full Image" },
-  { value: "blank", label: "Blank" },
+const slideLayoutOptions: { value: SlideLayout; labelKey: string }[] = [
+  { value: "title", labelKey: "editorToolbar.layoutTitle" },
+  { value: "section", labelKey: "editorToolbar.layoutSection" },
+  { value: "content", labelKey: "editorToolbar.layoutContent" },
+  { value: "two-column", labelKey: "editorToolbar.layoutTwoColumn" },
+  { value: "image", labelKey: "editorToolbar.layoutImage" },
+  { value: "statement", labelKey: "editorToolbar.layoutStatement" },
+  { value: "full-image", labelKey: "editorToolbar.layoutFullImage" },
+  { value: "blank", labelKey: "editorToolbar.layoutBlank" },
 ];
 
 const backgroundOptions = [
@@ -255,6 +256,7 @@ export default function EditorToolbar({
   designSystemTitle,
   canEdit = true,
 }: EditorToolbarProps) {
+  const t = useT();
   // Mirror Google Slides: the share dialog exposes both the editor URL
   // (primary) and the presentation URL (secondary). Access is enforced on
   // the deck, not the URL shape — anyone with at least viewer access can
@@ -303,8 +305,8 @@ export default function EditorToolbar({
     if (!file) return;
     setImporting(true);
     toast({
-      title: "Importing file",
-      description: `Reading ${file.name}...`,
+      title: t("editorToolbar.importingFile"),
+      description: t("editorToolbar.readingFile", { fileName: file.name }),
     });
     const formData = new FormData();
     formData.append("file", file);
@@ -315,11 +317,11 @@ export default function EditorToolbar({
       });
       const uploadData = await uploadRes.json();
       if (!uploadRes.ok) {
-        throw new Error(uploadData?.error || "Upload failed");
+        throw new Error(uploadData?.error || t("editorToolbar.uploadFailed"));
       }
       const uploaded = Array.isArray(uploadData) ? uploadData[0] : uploadData;
       const filePath = uploaded?.path || uploaded?.url;
-      if (!filePath) throw new Error("Upload did not return a file path");
+      if (!filePath) throw new Error(t("editorToolbar.uploadMissingPath"));
 
       const importRes = await fetch(
         agentNativePath("/_agent-native/actions/import-file"),
@@ -336,22 +338,28 @@ export default function EditorToolbar({
       );
       const importData = await importRes.json();
       if (!importRes.ok || importData?.error) {
-        throw new Error(importData?.error || "Import failed");
+        throw new Error(importData?.error || t("editorToolbar.importFailed"));
       }
       toast({
-        title: "Import complete",
-        description: `${importData.slideCount ?? "File"} slide${
-          importData.slideCount === 1 ? "" : "s"
-        } imported from ${file.name}.`,
+        title: t("editorToolbar.importComplete"),
+        description:
+          typeof importData.slideCount === "number"
+            ? t("editorToolbar.importCompleteSlides", {
+                count: importData.slideCount,
+                fileName: file.name,
+              })
+            : t("editorToolbar.importCompleteFile", {
+                fileName: file.name,
+              }),
       });
     } catch (err) {
       console.error("Import failed:", err);
       toast({
-        title: "Import failed",
+        title: t("editorToolbar.importFailed"),
         description:
           err instanceof Error
             ? err.message
-            : "Something went wrong importing this file.",
+            : t("editorToolbar.importFailedDescription"),
         variant: "destructive",
       });
     } finally {
@@ -368,12 +376,12 @@ export default function EditorToolbar({
           <Link
             to="/"
             className="p-2.5 sm:p-1.5 rounded-md hover:bg-accent transition-colors flex-shrink-0"
-            aria-label="Back to decks"
+            aria-label={t("editorToolbar.backToDecks")}
           >
             <IconArrowLeft className="w-4 h-4 text-muted-foreground" />
           </Link>
         </TooltipTrigger>
-        <TooltipContent>Back to decks</TooltipContent>
+        <TooltipContent>{t("editorToolbar.backToDecks")}</TooltipContent>
       </Tooltip>
 
       {/* Slide-list toggle (mobile only — desktop uses the app sidebar rail) */}
@@ -384,12 +392,12 @@ export default function EditorToolbar({
             className={`md:hidden p-2.5 sm:p-1.5 rounded-md hover:bg-accent transition-colors flex-shrink-0 ${
               sidebarOpen ? "text-muted-foreground" : "text-muted-foreground/70"
             }`}
-            aria-label="Toggle slide list"
+            aria-label={t("editorToolbar.toggleSlideList")}
           >
             <IconLayoutSidebar className="w-4 h-4" />
           </button>
         </TooltipTrigger>
-        <TooltipContent>Toggle slide list</TooltipContent>
+        <TooltipContent>{t("editorToolbar.toggleSlideList")}</TooltipContent>
       </Tooltip>
 
       {/* Deck title */}
@@ -412,14 +420,16 @@ export default function EditorToolbar({
             <div className="hidden max-w-[180px] items-center gap-1.5 rounded-md border border-border bg-accent/35 px-2 py-1 text-xs text-muted-foreground sm:flex">
               <IconPalette className="h-3.5 w-3.5 shrink-0 text-[#609FF8]" />
               <span className="truncate">
-                {designSystemTitle || "Design system"}
+                {designSystemTitle || t("editorToolbar.designSystem")}
               </span>
             </div>
           </TooltipTrigger>
           <TooltipContent>
             {designSystemTitle
-              ? `Using ${designSystemTitle}`
-              : "Using a linked design system"}
+              ? t("editorToolbar.usingDesignSystem", {
+                  title: designSystemTitle,
+                })
+              : t("editorToolbar.usingLinkedDesignSystem")}
           </TooltipContent>
         </Tooltip>
       )}
@@ -430,7 +440,7 @@ export default function EditorToolbar({
       {/* "View only" badge — mirrors Google Slides' viewer chrome */}
       {!canEdit && (
         <span className="flex-shrink-0 inline-flex items-center gap-1 rounded-full border border-border bg-muted/50 px-2.5 py-1 text-xs font-medium text-muted-foreground">
-          View only
+          {t("editorToolbar.viewOnly")}
         </span>
       )}
 
@@ -450,12 +460,12 @@ export default function EditorToolbar({
                     ? "text-foreground/90 bg-accent"
                     : "text-muted-foreground hover:text-foreground/70 hover:bg-accent"
                 }`}
-                aria-label="Slide settings"
+                aria-label={t("editorToolbar.slideSettings")}
               >
                 <IconSettings className="w-3.5 h-3.5" />
               </button>
             </TooltipTrigger>
-            <TooltipContent>Slide settings</TooltipContent>
+            <TooltipContent>{t("editorToolbar.slideSettings")}</TooltipContent>
           </Tooltip>
           <ToolbarPopover
             open={layoutOpen}
@@ -466,7 +476,7 @@ export default function EditorToolbar({
             <div className="py-1.5">
               {/* Layout section */}
               <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
-                Layout
+                {t("editorToolbar.layout")}
               </div>
               {slideLayoutOptions.map((opt) => (
                 <button
@@ -479,14 +489,14 @@ export default function EditorToolbar({
                   }`}
                 >
                   <IconLayout className="w-3 h-3" />
-                  {opt.label}
+                  {t(opt.labelKey)}
                 </button>
               ))}
 
               {/* Background section */}
               <div className="mx-2 my-1.5 border-t border-border" />
               <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
-                Background
+                {t("editorToolbar.background")}
               </div>
               <div className="px-3 pb-2">
                 <div className="grid grid-cols-4 gap-2">
@@ -509,7 +519,7 @@ export default function EditorToolbar({
               {/* Image & Assets section */}
               <div className="mx-2 my-1.5 border-t border-border" />
               <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
-                Media
+                {t("editorToolbar.media")}
               </div>
               <button
                 ref={imageGenButtonRef}
@@ -520,7 +530,7 @@ export default function EditorToolbar({
                 className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
               >
                 <IconPhoto className="w-3 h-3" />
-                Generate Image
+                {t("editorToolbar.generateImage")}
               </button>
               <button
                 ref={assetsButtonRef}
@@ -531,13 +541,13 @@ export default function EditorToolbar({
                 className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
               >
                 <IconFolderOpen className="w-3 h-3" />
-                Asset Library
+                {t("editorToolbar.assetLibrary")}
               </button>
 
               {/* Diagrams section */}
               <div className="mx-2 my-1.5 border-t border-border" />
               <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
-                Diagrams
+                {t("editorToolbar.diagrams")}
               </div>
               <button
                 onClick={() => {
@@ -561,7 +571,7 @@ graph TD
                 className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
               >
                 <IconSchema className="w-3 h-3" />
-                Insert Mermaid Diagram
+                {t("editorToolbar.insertMermaidDiagram")}
               </button>
               <button
                 onClick={() => {
@@ -578,7 +588,7 @@ graph TD
                 className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors"
               >
                 <IconPencil className="w-3 h-3" />
-                Excalidraw Canvas
+                {t("editorToolbar.excalidrawCanvas")}
               </button>
               {typeof currentSlide?.content === "string" &&
                 currentSlide.content.includes('class="mermaid"') && (
@@ -604,7 +614,7 @@ graph TD
                     className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-[#00E5FF]/80 hover:text-[#00E5FF] hover:bg-accent/50 transition-colors"
                   >
                     <IconTransform className="w-3 h-3" />
-                    Convert Mermaid → Excalidraw
+                    {t("editorToolbar.convertMermaidToExcalidraw")}
                   </button>
                 )}
               {currentSlide?.excalidrawData && (
@@ -617,37 +627,39 @@ graph TD
                   className="flex items-center gap-2 w-full px-3 py-1.5 text-xs text-muted-foreground hover:text-muted-foreground hover:bg-accent/50 transition-colors"
                 >
                   <IconPencil className="w-3 h-3" />
-                  Remove Excalidraw Canvas
+                  {t("editorToolbar.removeExcalidrawCanvas")}
                 </button>
               )}
 
               {/* Transitions section */}
               <div className="mx-2 my-1.5 border-t border-border" />
               <div className="px-3 py-1.5 text-[10px] font-medium text-muted-foreground/70 uppercase tracking-wider">
-                Transition
+                {t("editorToolbar.transition")}
               </div>
               <div className="px-3 pb-2.5 grid grid-cols-4 gap-1">
-                {(["instant", "fade", "slide", "zoom"] as const).map((t) => {
-                  const active =
-                    t === "instant"
-                      ? !currentSlide.transition ||
-                        currentSlide.transition === "instant" ||
-                        currentSlide.transition === "none"
-                      : currentSlide.transition === t;
-                  return (
-                    <button
-                      key={t}
-                      onClick={() => onUpdateSlide!({ transition: t })}
-                      className={`px-1.5 py-1 rounded text-[10px] font-medium capitalize border ${
-                        active
-                          ? "bg-[#609FF8]/20 text-[#609FF8] border-[#609FF8]/30"
-                          : "text-muted-foreground hover:text-foreground/70 hover:bg-accent/50 border-transparent"
-                      }`}
-                    >
-                      {t.charAt(0).toUpperCase() + t.slice(1)}
-                    </button>
-                  );
-                })}
+                {(["instant", "fade", "slide", "zoom"] as const).map(
+                  (transition) => {
+                    const active =
+                      transition === "instant"
+                        ? !currentSlide.transition ||
+                          currentSlide.transition === "instant" ||
+                          currentSlide.transition === "none"
+                        : currentSlide.transition === transition;
+                    return (
+                      <button
+                        key={transition}
+                        onClick={() => onUpdateSlide!({ transition })}
+                        className={`px-1.5 py-1 rounded text-[10px] font-medium capitalize border ${
+                          active
+                            ? "bg-[#609FF8]/20 text-[#609FF8] border-[#609FF8]/30"
+                            : "text-muted-foreground hover:text-foreground/70 hover:bg-accent/50 border-transparent"
+                        }`}
+                      >
+                        {t(`editorToolbar.transition_${transition}`)}
+                      </button>
+                    );
+                  },
+                )}
               </div>
 
               {/* Aspect Ratio section (deck-level) */}
@@ -655,7 +667,7 @@ graph TD
                 <>
                   <div className="mx-2 my-1.5 border-t border-white/[0.06]" />
                   <div className="px-3 py-1.5 text-[10px] font-medium text-white/30 uppercase tracking-wider">
-                    Aspect Ratio
+                    {t("editorToolbar.aspectRatio")}
                   </div>
                   <div className="px-3 pb-2.5 grid grid-cols-4 gap-1">
                     {ASPECT_RATIO_VALUES.map((r) => {
@@ -674,7 +686,9 @@ graph TD
                               {r}
                             </button>
                           </TooltipTrigger>
-                          <TooltipContent>{`Set deck to ${r}`}</TooltipContent>
+                          <TooltipContent>
+                            {t("editorToolbar.setAspectRatio", { ratio: r })}
+                          </TooltipContent>
                         </Tooltip>
                       );
                     })}
@@ -708,7 +722,7 @@ graph TD
                       ? "bg-accent text-foreground"
                       : "text-muted-foreground hover:text-foreground/70 hover:bg-accent"
                   }`}
-                  aria-label="Slide tools"
+                  aria-label={t("editorToolbar.slideTools")}
                 >
                   <IconWand className="w-4 h-4" />
                   {anyToolActive && !toolsOpen && (
@@ -716,7 +730,7 @@ graph TD
                   )}
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Slide tools</TooltipContent>
+              <TooltipContent>{t("editorToolbar.slideTools")}</TooltipContent>
             </Tooltip>
             <ToolbarPopover
               open={toolsOpen}
@@ -738,7 +752,7 @@ graph TD
                     }`}
                   >
                     <IconBolt className="w-3.5 h-3.5" />
-                    Element animations
+                    {t("editorToolbar.elementAnimations")}
                   </button>
                 )}
                 {onToggleTweaks && (
@@ -754,7 +768,7 @@ graph TD
                     }`}
                   >
                     <IconAdjustments className="w-3.5 h-3.5" />
-                    Tweaks
+                    {t("editorToolbar.tweaks")}
                   </button>
                 )}
                 {onToggleDrawMode && (
@@ -771,7 +785,7 @@ graph TD
                     }`}
                   >
                     <IconPencilPlus className="w-3.5 h-3.5" />
-                    Draw on slide
+                    {t("editorToolbar.drawOnSlide")}
                   </button>
                 )}
                 {onTogglePinMode && (
@@ -789,10 +803,9 @@ graph TD
                   >
                     <IconPin className="w-3.5 h-3.5 mt-0.5 flex-shrink-0" />
                     <span className="flex flex-col items-start min-w-0">
-                      <span>Pin comments</span>
+                      <span>{t("editorToolbar.pinComments")}</span>
                       <span className="text-[10px] text-muted-foreground/80 leading-tight mt-0.5">
-                        Click spots on the slide to queue several edits, then
-                        send them all at once.
+                        {t("editorToolbar.pinCommentsDescription")}
                       </span>
                     </span>
                   </button>
@@ -816,12 +829,16 @@ graph TD
                   onClick={onUndo}
                   disabled={!canUndo}
                   className="p-2.5 sm:p-1.5 rounded-md hover:bg-accent disabled:opacity-20 transition-colors"
-                  aria-label="Undo"
+                  aria-label={t("editorToolbar.undo")}
                 >
                   <IconArrowBackUp className="w-3.5 h-3.5 text-muted-foreground" />
                 </button>
               </TooltipTrigger>
-              <TooltipContent>Undo ({shortcutLabel("cmd+z")})</TooltipContent>
+              <TooltipContent>
+                {t("editorToolbar.undoWithShortcut", {
+                  shortcut: shortcutLabel("cmd+z"),
+                })}
+              </TooltipContent>
             </Tooltip>
             <Tooltip>
               <TooltipTrigger asChild>
@@ -829,13 +846,15 @@ graph TD
                   onClick={onRedo}
                   disabled={!canRedo}
                   className="p-2.5 sm:p-1.5 rounded-md hover:bg-accent disabled:opacity-20 transition-colors"
-                  aria-label="Redo"
+                  aria-label={t("editorToolbar.redo")}
                 >
                   <IconArrowForwardUp className="w-3.5 h-3.5 text-muted-foreground" />
                 </button>
               </TooltipTrigger>
               <TooltipContent>
-                Redo ({shortcutLabel("cmd+shift+z")})
+                {t("editorToolbar.redoWithShortcut", {
+                  shortcut: shortcutLabel("cmd+shift+z"),
+                })}
               </TooltipContent>
             </Tooltip>
           </div>
@@ -853,7 +872,7 @@ graph TD
                   : "text-muted-foreground hover:text-muted-foreground"
               }`}
             >
-              Preview
+              {t("editorToolbar.preview")}
             </button>
             <button
               onClick={() => onTabChange("code")}
@@ -863,7 +882,7 @@ graph TD
                   : "text-muted-foreground hover:text-muted-foreground"
               }`}
             >
-              Code
+              {t("editorToolbar.code")}
             </button>
           </div>
         </>
@@ -889,7 +908,7 @@ graph TD
                   ? "text-foreground bg-accent"
                   : "text-muted-foreground hover:text-foreground/70 hover:bg-accent"
               }`}
-              aria-label="Comments"
+              aria-label={t("editorToolbar.comments")}
             >
               <IconMessage className="w-3.5 h-3.5" />
               {unresolvedCommentCount > 0 && (
@@ -899,7 +918,7 @@ graph TD
               )}
             </button>
           </TooltipTrigger>
-          <TooltipContent>Comments</TooltipContent>
+          <TooltipContent>{t("editorToolbar.comments")}</TooltipContent>
         </Tooltip>
       )}
 
@@ -920,11 +939,13 @@ graph TD
           resourceId={deckId}
           resourceTitle={deckTitle}
           shareUrl={editorUrl}
-          shareUrlLabel="Editor link"
-          shareUrlDescription="Opens the deck in the editor. Anyone with access can use this link."
+          shareUrlLabel={t("editorToolbar.editorLink")}
+          shareUrlDescription={t("editorToolbar.editorLinkDescription")}
           secondaryShareUrl={presentationUrl}
-          secondaryShareUrlLabel="Presentation link"
-          secondaryShareUrlDescription="Opens directly in fullscreen presentation mode."
+          secondaryShareUrlLabel={t("editorToolbar.presentationLink")}
+          secondaryShareUrlDescription={t(
+            "editorToolbar.presentationLinkDescription",
+          )}
         />
       </div>
       {/* Present button — matches Share trigger height (h-9) */}
@@ -933,7 +954,7 @@ graph TD
         className="inline-flex h-9 flex-shrink-0 items-center justify-center gap-1.5 rounded-md border border-border bg-primary px-3 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90"
       >
         <IconPlayerPlay className="w-3.5 h-3.5" />
-        <span className="hidden sm:inline">Present</span>
+        <span className="hidden sm:inline">{t("editorToolbar.present")}</span>
       </Link>
 
       {/* Hidden file input for "Import" overflow menu item */}
@@ -953,13 +974,13 @@ graph TD
               <button
                 ref={historyButtonRef}
                 className="p-2.5 sm:p-1.5 rounded-md hover:bg-accent transition-colors flex-shrink-0 text-muted-foreground hover:text-foreground/70 cursor-pointer"
-                aria-label="More"
+                aria-label={t("editorToolbar.more")}
               >
                 <IconDots className="w-4 h-4" />
               </button>
             </DropdownMenuTrigger>
           </TooltipTrigger>
-          <TooltipContent>More</TooltipContent>
+          <TooltipContent>{t("editorToolbar.more")}</TooltipContent>
         </Tooltip>
         <DropdownMenuContent align="end" className="w-48">
           <DropdownMenuItem
@@ -971,11 +992,13 @@ graph TD
             ) : (
               <IconUpload className="w-4 h-4 mr-2" />
             )}
-            {importing ? "Importing..." : "Import file"}
+            {importing
+              ? t("editorToolbar.importing")
+              : t("editorToolbar.importFile")}
           </DropdownMenuItem>
           <DropdownMenuItem onClick={onShowHistory}>
             <IconHistory className="w-4 h-4 mr-2" />
-            Saved versions
+            {t("editorToolbar.savedVersions")}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
           <DropdownMenuItem onClick={() => setTheme(isDark ? "light" : "dark")}>
@@ -984,7 +1007,9 @@ graph TD
             ) : (
               <IconMoon className="w-4 h-4 mr-2" />
             )}
-            {isDark ? "Light theme" : "Dark theme"}
+            {isDark
+              ? t("editorToolbar.lightTheme")
+              : t("editorToolbar.darkTheme")}
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>