@agent-native/core 0.77.3 → 0.77.6

package/corpus/templates/content/app/components/editor/extensions/LocalMdxComponentNode.tsx

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import { IconPencil } from "@tabler/icons-react";
 import {
   Node as TiptapNode,
@@ -87,6 +88,7 @@ function LocalComponentInputEditor({
   getPos: NodeViewProps["getPos"];
   updateAttributes: NodeViewProps["updateAttributes"];
 }) {
+  const t = useT();
   const updateProp = (name: string, value: unknown) => {
     const pos = getPos();
     const liveNode =
@@ -138,7 +140,9 @@ function LocalComponentInputEditor({
       <PopoverContent align="end" sideOffset={6} className="w-80 space-y-4">
         <div className="min-w-0">
           <div className="truncate text-sm font-semibold">{componentName}</div>
-          <div className="text-xs text-muted-foreground">Component inputs</div>
+          <div className="text-xs text-muted-foreground">
+            {t("editor.localComponentInputs")}
+          </div>
         </div>
         <div className="space-y-3">
           {Object.entries(inputs).map(([name, input]) => {
@@ -160,7 +164,9 @@ function LocalComponentInputEditor({
                         updateProp(name, event.currentTarget.checked)
                       }
                     />
-                    <span>{input.description ?? "Enabled"}</span>
+                    <span>
+                      {input.description ?? t("editor.localComponentEnabled")}
+                    </span>
                   </label>
                 ) : input.type === "select" ? (
                   <select
@@ -171,7 +177,9 @@ function LocalComponentInputEditor({
                       updateProp(name, event.currentTarget.value)
                     }
                   >
-                    <option value="">Default</option>
+                    <option value="">
+                      {t("editor.localComponentDefault")}
+                    </option>
                     {(input.options ?? []).map((option) => {
                       const normalized = optionParts(option);
                       return (
@@ -229,6 +237,7 @@ function LocalMdxComponentView({
   node,
   updateAttributes,
 }: NodeViewProps) {
+  const t = useT();
   const name = typeof node.attrs.name === "string" ? node.attrs.name : "";
   const Component = name ? localContentComponents[name] : null;
   const inputs = name ? localContentComponentInputs[name] : undefined;
@@ -249,8 +258,8 @@ function LocalMdxComponentView({
         contentEditable={false}
         data-local-mdx-component={name}
       >
-        <code>{name ? `<${name} />` : "Local MDX component"}</code> uses JSX
-        props that cannot be previewed yet.
+        <code>{name ? `<${name} />` : t("editor.localMdxComponent")}</code>{" "}
+        {t("editor.localMdxUnsupportedProps")}
       </NodeViewWrapper>
     );
   }
@@ -262,8 +271,8 @@ function LocalMdxComponentView({
         contentEditable={false}
         data-local-mdx-component={name}
       >
-        <code>{name ? `<${name} />` : "Local MDX component"}</code> not found in
-        local components.
+        <code>{name ? `<${name} />` : t("editor.localMdxComponent")}</code>{" "}
+        {t("editor.localMdxNotFound")}
       </NodeViewWrapper>
     );
   }

package/corpus/templates/content/app/components/editor/extensions/VideoBlock.tsx

@@ -1,4 +1,4 @@
-import { sendToAgentChat } from "@agent-native/core/client";
+import { sendToAgentChat, useT } from "@agent-native/core/client";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import {
   IconArrowsMaximize,
@@ -56,8 +56,6 @@ interface VideoResizeState {
 }
 
 const MIN_VIDEO_WIDTH = 200;
-const VIDEO_TRANSCRIPT_PLACEHOLDER_LABEL = "Transcribing video...";
-
 function createTranscriptPlaceholder(label: string): string {
   const id =
     typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
@@ -91,7 +89,13 @@ function videoDownloadName(src: string): string {
   return "video";
 }
 
-async function downloadVideo(src: string) {
+async function downloadVideo(
+  src: string,
+  copy: {
+    started: string;
+    opened: string;
+  },
+) {
   const filename = videoDownloadName(src);
 
   try {
@@ -106,7 +110,7 @@ async function downloadVideo(src: string) {
     anchor.click();
     anchor.remove();
     URL.revokeObjectURL(url);
-    toast.success("Video download started.");
+    toast.success(copy.started);
   } catch {
     const anchor = document.createElement("a");
     anchor.href = src;
@@ -116,16 +120,22 @@ async function downloadVideo(src: string) {
     document.body.append(anchor);
     anchor.click();
     anchor.remove();
-    toast.info("Opened video in a new tab.");
+    toast.info(copy.opened);
   }
 }
 
-async function copyVideo(src: string) {
+async function copyVideo(
+  src: string,
+  copy: {
+    copied: string;
+    failed: string;
+  },
+) {
   try {
     await navigator.clipboard.writeText(src);
-    toast.success("Copied video URL.");
+    toast.success(copy.copied);
   } catch {
-    toast.error("Could not copy video.");
+    toast.error(copy.failed);
   }
 }
 
@@ -138,6 +148,7 @@ export function VideoBlock({
   extension,
   getPos,
 }: NodeViewProps) {
+  const t = useT();
   const [isHovered, setIsHovered] = useState(false);
   const [sourcePanelOpen, setSourcePanelOpen] = useState(false);
   const [sourcePanelDismissed, setSourcePanelDismissed] = useState(false);
@@ -194,7 +205,7 @@ export function VideoBlock({
       : 0;
     const scrollTop = scrollContainer ? scrollContainer.scrollTop : 0;
     const offsetTop = coords.top - containerTop + scrollTop;
-    options.onVideoComment("Video", offsetTop);
+    options.onVideoComment(t("editor.media.video"), offsetTop);
   }
 
   function openReplacePanel() {
@@ -219,7 +230,7 @@ export function VideoBlock({
     if (typeof position !== "number") return null;
     const insertAt = position + node.nodeSize;
     const placeholderText = createTranscriptPlaceholder(
-      VIDEO_TRANSCRIPT_PLACEHOLDER_LABEL,
+      t("editor.media.transcribingVideo"),
     );
 
     const inserted = editor
@@ -227,7 +238,7 @@ export function VideoBlock({
       .focus()
       .insertContentAt(
         insertAt,
-        `<details open><summary>Transcript</summary><p>${placeholderText}</p></details>`,
+        `<details open><summary>${t("editor.media.transcript")}</summary><p>${placeholderText}</p></details>`,
       )
       .setNodeSelection(insertAt)
       .scrollIntoView()
@@ -239,18 +250,18 @@ export function VideoBlock({
   function handleTranscribe() {
     const documentId = options.documentId;
     if (!documentId) {
-      toast.error("Could not find the current document.");
+      toast.error(t("editor.media.currentDocumentMissing"));
       return;
     }
 
     const placeholderText = insertTranscriptPlaceholder();
     if (!placeholderText) {
-      toast.error("Could not add a transcript block.");
+      toast.error(t("editor.media.transcriptBlockFailed"));
       return;
     }
     setMoreMenuOpen(false);
     sendToAgentChat({
-      message: "Transcribe this video and add the transcript below it.",
+      message: t("editor.media.transcribeVideoPrompt"),
       context: [
         "The user clicked Transcribe on a video block in Content.",
         `Document ID: ${documentId}`,
@@ -262,7 +273,7 @@ export function VideoBlock({
       ].join("\n"),
       submit: true,
     });
-    toast.success("Transcription started.");
+    toast.success(t("editor.media.transcriptionStarted"));
   }
 
   function handleLightboxViewportPointerDown(
@@ -278,7 +289,7 @@ export function VideoBlock({
     const closeBuffer = 4 * (Number.isFinite(rootFontSize) ? rootFontSize : 16);
     const isFarOutsideVideo =
       event.clientX < videoRect.left - closeBuffer ||
-      event.clientX > videoRect.right + closeBuffer ||
+      event.clientX > videoRect.right + closeBuffer || // i18n-ignore non-copy geometry expression
       event.clientY < videoRect.top - closeBuffer ||
       event.clientY > videoRect.bottom + closeBuffer;
 
@@ -361,12 +372,12 @@ export function VideoBlock({
     event.currentTarget.value = "";
     if (!file) return;
 
-    const toastId = toast.loading("Uploading video...");
+    const toastId = toast.loading(t("editor.media.uploadingVideo"));
     try {
       const nextSrc = await uploadVideoFile(file);
       updateAttributes({ src: nextSrc });
       setSourcePanelOpen(false);
-      toast.success("Video added", { id: toastId });
+      toast.success(t("editor.media.videoAdded"), { id: toastId });
     } catch (error) {
       toast.error(videoUploadErrorMessage(error), { id: toastId });
     }
@@ -383,7 +394,7 @@ export function VideoBlock({
         throw new Error("Invalid protocol");
       }
     } catch {
-      toast.error("Paste a valid video URL.");
+      toast.error(t("editor.media.pasteValidVideoUrl"));
       return;
     }
 
@@ -407,7 +418,7 @@ export function VideoBlock({
             className="media-source-panel__tab"
             onClick={() => setSourceTab("upload")}
           >
-            Upload
+            {t("editor.media.upload")}
           </button>
           <button
             type="button"
@@ -416,7 +427,7 @@ export function VideoBlock({
             className="media-source-panel__tab"
             onClick={() => setSourceTab("link")}
           >
-            Link
+            {t("editor.media.link")}
           </button>
         </div>
 
@@ -428,7 +439,7 @@ export function VideoBlock({
               className="w-full"
               onClick={() => fileInputRef.current?.click()}
             >
-              Upload file
+              {t("editor.media.uploadFile")}
             </Button>
           </div>
         ) : (
@@ -438,13 +449,15 @@ export function VideoBlock({
               type="url"
               value={videoUrl}
               onChange={(event) => setVideoUrl(event.target.value)}
-              placeholder="Paste the video link..."
+              placeholder={t("editor.media.pasteVideoLink")}
             />
             <Button type="submit" className="w-full">
-              {replace ? "Replace video" : "Embed video"}
+              {replace
+                ? t("editor.media.replaceVideo")
+                : t("editor.media.embedVideo")}
             </Button>
             <p className="text-center text-xs text-muted-foreground">
-              Works with direct video links from the web
+              {t("editor.media.videoLinkHint")}
             </p>
           </form>
         )}
@@ -479,7 +492,11 @@ export function VideoBlock({
             }}
           >
             <IconVideo size={20} />
-            <span>{isUploading ? "Uploading video..." : "Add a video"}</span>
+            <span>
+              {isUploading
+                ? t("editor.media.uploadingVideo")
+                : t("editor.media.addVideo")}
+            </span>
           </button>
 
           <input
@@ -541,7 +558,7 @@ export function VideoBlock({
               type="button"
               className="media-block__resize-handle media-block__resize-handle--left"
               data-visible={controlsVisible ? "true" : undefined}
-              aria-label="Resize video from left"
+              aria-label={t("editor.media.resizeVideoFromLeft")}
               aria-hidden={!controlsVisible}
               tabIndex={controlsVisible ? 0 : -1}
               onPointerDown={(event) => handleResizePointerDown(event, "left")}
@@ -550,7 +567,7 @@ export function VideoBlock({
               type="button"
               className="media-block__resize-handle media-block__resize-handle--right"
               data-visible={controlsVisible ? "true" : undefined}
-              aria-label="Resize video from right"
+              aria-label={t("editor.media.resizeVideoFromRight")}
               aria-hidden={!controlsVisible}
               tabIndex={controlsVisible ? 0 : -1}
               onPointerDown={(event) => handleResizePointerDown(event, "right")}
@@ -576,12 +593,12 @@ export function VideoBlock({
                     type="button"
                     onClick={handleComment}
                     className="media-block__toolbar-btn"
-                    aria-label="Comment on video"
+                    aria-label={t("editor.media.commentOnVideo")}
                   >
                     <IconMessageCircle size={16} />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Comment</TooltipContent>
+                <TooltipContent>{t("editor.comment")}</TooltipContent>
               </Tooltip>
 
               <Tooltip>
@@ -590,26 +607,31 @@ export function VideoBlock({
                     type="button"
                     onClick={openLightbox}
                     className="media-block__toolbar-btn"
-                    aria-label="Expand video"
+                    aria-label={t("editor.media.expandVideo")}
                   >
                     <IconArrowsMaximize size={16} />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Expand</TooltipContent>
+                <TooltipContent>{t("editor.media.expand")}</TooltipContent>
               </Tooltip>
 
               <Tooltip>
                 <TooltipTrigger asChild>
                   <button
                     type="button"
-                    onClick={() => void downloadVideo(src)}
+                    onClick={() =>
+                      void downloadVideo(src, {
+                        started: t("editor.media.videoDownloadStarted"),
+                        opened: t("editor.media.openedVideoInNewTab"),
+                      })
+                    }
                     className="media-block__toolbar-btn"
-                    aria-label="Download video"
+                    aria-label={t("editor.media.downloadVideo")}
                   >
                     <IconDownload size={16} />
                   </button>
                 </TooltipTrigger>
-                <TooltipContent>Download</TooltipContent>
+                <TooltipContent>{t("editor.media.download")}</TooltipContent>
               </Tooltip>
 
               <Popover open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
@@ -617,9 +639,9 @@ export function VideoBlock({
                   <button
                     type="button"
                     className="media-block__toolbar-btn"
-                    aria-label="More video actions"
+                    aria-label={t("editor.media.moreVideoActions")}
                     data-media-dropdown-trigger
-                    title="More"
+                    title={t("editor.media.more")}
                     onPointerDown={(event) => {
                       event.preventDefault();
                       event.stopPropagation();
@@ -638,7 +660,9 @@ export function VideoBlock({
                   sideOffset={8}
                   role="menu"
                 >
-                  <div className="media-block__dropdown-label">Video</div>
+                  <div className="media-block__dropdown-label">
+                    {t("editor.media.video")}
+                  </div>
                   <div className="media-block__dropdown-group">
                     <button
                       type="button"
@@ -652,7 +676,7 @@ export function VideoBlock({
                       >
                         <IconFileText size={18} />
                       </span>
-                      <span>Transcribe</span>
+                      <span>{t("editor.media.transcribe")}</span>
                     </button>
                     <button
                       type="button"
@@ -669,7 +693,7 @@ export function VideoBlock({
                       >
                         <IconRefresh size={18} />
                       </span>
-                      <span>Replace</span>
+                      <span>{t("editor.media.replace")}</span>
                     </button>
                     <button
                       type="button"
@@ -677,7 +701,10 @@ export function VideoBlock({
                       role="menuitem"
                       onClick={() => {
                         setMoreMenuOpen(false);
-                        void copyVideo(src);
+                        void copyVideo(src, {
+                          copied: t("editor.media.copiedVideoUrl"),
+                          failed: t("editor.media.couldNotCopyVideo"),
+                        });
                       }}
                     >
                       <span
@@ -686,7 +713,7 @@ export function VideoBlock({
                       >
                         <IconCopy size={18} />
                       </span>
-                      <span>Copy video</span>
+                      <span>{t("editor.media.copyVideo")}</span>
                     </button>
                   </div>
                   <div
@@ -708,7 +735,7 @@ export function VideoBlock({
                     >
                       <IconTrash size={18} />
                     </span>
-                    <span>Delete</span>
+                    <span>{t("editor.media.delete")}</span>
                   </button>
                 </PopoverContent>
               </Popover>
@@ -726,7 +753,9 @@ export function VideoBlock({
               aria-describedby={undefined}
               onOpenAutoFocus={(event) => event.preventDefault()}
             >
-              <DialogTitle className="sr-only">Video preview</DialogTitle>
+              <DialogTitle className="sr-only">
+                {t("editor.media.videoPreview")}
+              </DialogTitle>
               <div
                 className="media-lightbox__viewport"
                 onPointerDown={handleLightboxViewportPointerDown}
@@ -741,12 +770,20 @@ export function VideoBlock({
                 />
               </div>
 
-              <div className="media-lightbox__toolbar" aria-label="Video view">
+              <div
+                className="media-lightbox__toolbar"
+                aria-label={t("editor.media.videoView")}
+              >
                 <button
                   type="button"
                   className="media-lightbox__toolbar-btn"
-                  aria-label="Download video"
-                  onClick={() => void downloadVideo(src)}
+                  aria-label={t("editor.media.downloadVideo")}
+                  onClick={() =>
+                    void downloadVideo(src, {
+                      started: t("editor.media.videoDownloadStarted"),
+                      opened: t("editor.media.openedVideoInNewTab"),
+                    })
+                  }
                 >
                   <IconDownload size={17} />
                 </button>
@@ -754,7 +791,7 @@ export function VideoBlock({
                 <button
                   type="button"
                   className="media-lightbox__toolbar-btn"
-                  aria-label="Close video preview"
+                  aria-label={t("editor.media.closeVideoPreview")}
                   onClick={() => handleLightboxOpenChange(false)}
                 >
                   <IconArrowsMinimize size={17} />

package/corpus/templates/content/app/components/editor/image-upload.ts

@@ -73,15 +73,15 @@ export function hasAudioFiles(dataTransfer: DataTransfer | null): boolean {
 }
 
 export function imageUploadErrorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : "Image upload failed.";
+  return error instanceof Error ? error.message : "Image upload failed."; // i18n-ignore fallback for non-React upload helper
 }
 
 export function videoUploadErrorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : "Video upload failed.";
+  return error instanceof Error ? error.message : "Video upload failed."; // i18n-ignore fallback for non-React upload helper
 }
 
 export function audioUploadErrorMessage(error: unknown): string {
-  return error instanceof Error ? error.message : "Audio upload failed.";
+  return error instanceof Error ? error.message : "Audio upload failed."; // i18n-ignore fallback for non-React upload helper
 }
 
 function uploadResponseMessage(

package/corpus/templates/content/app/components/editor/localComponentSlashItems.ts

@@ -29,6 +29,7 @@ function humanizeComponentName(name: string) {
 
 export function buildLocalComponentSlashItems(
   components: Record<string, unknown>,
+  copy: { description?: string } = {},
 ): LocalComponentSlashItem[] {
   return Object.entries(components)
     .filter(
@@ -41,7 +42,7 @@ export function buildLocalComponentSlashItems(
       const raw = `<${name} />`;
       return {
         title,
-        description: "Local MDX component",
+        description: copy.description ?? "Local MDX component", // i18n-ignore fallback for tests/non-React callers
         searchText: `${name} ${title} local component mdx`,
         icon: IconComponents,
         action: (editor) => {