@agent-native/core 0.77.3 → 0.77.6

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

@@ -4,6 +4,8 @@ import {
   sendToAgentChat,
   openAgentSidebar,
   appApiPath,
+  useFormatters,
+  useT,
 } from "@agent-native/core/client";
 import {
   IconWorld,
@@ -60,11 +62,6 @@ interface UploadedFile {
   textContent?: string;
 }
 
-type ExistingDesignSystem = {
-  id: string;
-  title: string;
-};
-
 function normalizeWebsiteUrlInput(input: string): string | null {
   const trimmed = input.trim();
   if (!trimmed) return null;
@@ -96,6 +93,7 @@ export function DesignSystemSetup({
   onComplete,
   editingId,
 }: DesignSystemSetupProps) {
+  const t = useT();
   const [companyName, setCompanyName] = useState("");
   const [websiteUrl, setWebsiteUrl] = useState("");
   const [websiteUrls, setWebsiteUrls] = useState<string[]>([]);
@@ -130,11 +128,10 @@ export function DesignSystemSetup({
   });
 
   const { data: designSystemsData } = useActionQuery<{
-    designSystems: ExistingDesignSystem[];
+    designSystems: Array<{ id: string; title: string }>;
   }>("list-design-systems");
 
-  const existingSystems: ExistingDesignSystem[] =
-    designSystemsData?.designSystems ?? [];
+  const existingSystems = designSystemsData?.designSystems ?? [];
   const [selectedSystemId, setSelectedSystemId] = useState("");
 
   useEffect(() => {
@@ -243,7 +240,7 @@ export function DesignSystemSetup({
         setter((prev) => [...prev, ...newFiles]);
       });
     },
-    [],
+    [t],
   );
 
   const handleFigImport = useCallback(
@@ -252,14 +249,14 @@ export function DesignSystemSetup({
       event.target.value = "";
       if (!file) return;
       if (!file.name.toLowerCase().endsWith(".fig")) {
-        setFigError(
-          "Please choose a .fig file (in Figma: File > Save local copy).",
-        );
+        setFigError(t("designSystemSetup.figFileRequired"));
         return;
       }
       if (file.size > MAX_FIG_UPLOAD_BYTES) {
         setFigError(
-          `File too large (max ${formatFileSize(MAX_FIG_UPLOAD_BYTES)}).`,
+          t("designSystemSetup.figFileTooLarge", {
+            maxSize: formatFileSize(MAX_FIG_UPLOAD_BYTES),
+          }),
         );
         return;
       }
@@ -276,12 +273,14 @@ export function DesignSystemSetup({
         });
         const parsed = await readFigImportResponse(res);
         setFigResult(parsed);
-        setFigTitle(parsed.suggestedTitle || "Imported brand");
+        setFigTitle(
+          parsed.suggestedTitle || t("designSystemSetup.importedBrand"),
+        );
       } catch (err) {
         setFigError(
           err instanceof Error
             ? err.message
-            : "Could not parse that Figma file.",
+            : t("designSystemSetup.figParseFailed"),
         );
       } finally {
         setFigParsing(false);
@@ -293,7 +292,9 @@ export function DesignSystemSetup({
   const handleCreateFromFig = useCallback(async () => {
     if (!figResult) return;
     const title =
-      figTitle.trim() || figResult.suggestedTitle || "Imported brand";
+      figTitle.trim() ||
+      figResult.suggestedTitle ||
+      t("designSystemSetup.importedBrand");
     setFigCreating(true);
     try {
       await createSystemMutation.mutateAsync({
@@ -301,18 +302,20 @@ export function DesignSystemSetup({
         data: JSON.stringify(figResult.data),
         customInstructions: figResult.customInstructions || "",
       } as any);
-      toast({ title: "Design system created from Figma" });
+      toast({ title: t("designSystemSetup.figmaCreated") });
       onComplete();
     } catch (err) {
       setFigCreating(false);
       toast({
-        title: "Could not create the design system",
+        title: t("designSystemSetup.createFailed"),
         description:
-          err instanceof Error ? err.message : "Something went wrong",
+          err instanceof Error
+            ? err.message
+            : t("designSystemSetup.genericError"),
         variant: "destructive",
       });
     }
-  }, [figResult, figTitle, createSystemMutation, onComplete]);
+  }, [figResult, figTitle, createSystemMutation, onComplete, t]);
 
   const handleEditSave = async () => {
     if (!editingId) return;
@@ -325,10 +328,10 @@ export function DesignSystemSetup({
         customInstructions,
       });
       onComplete();
-      toast({ title: "Design system updated" });
+      toast({ title: t("designSystemSetup.updated") });
     } catch {
       toast({
-        title: "Failed to update",
+        title: t("designSystemSetup.updateFailed"),
         variant: "destructive",
       });
     } finally {
@@ -442,9 +445,8 @@ export function DesignSystemSetup({
     openAgentSidebar();
     sendToAgentChat({ message: parts.join("\n"), submit: true });
     toast({
-      title: "Design system generation started",
-      description:
-        "You can keep working while the agent processes the sources.",
+      title: t("designSystemSetup.generationStarted"),
+      description: t("designSystemSetup.generationStartedDescription"),
     });
     onComplete();
   }, [
@@ -460,6 +462,7 @@ export function DesignSystemSetup({
     brandNotes,
     customInstructions,
     onComplete,
+    t,
   ]);
 
   return (
@@ -468,12 +471,14 @@ export function DesignSystemSetup({
         <DialogHeader className="px-6 pt-6 pb-0">
           <DialogTitle className="text-foreground flex items-center gap-2">
             <IconPalette className="w-5 h-5 text-[#609FF8]" />
-            {editingId ? "Edit Design System" : "New Design System"}
+            {editingId
+              ? t("designSystemSetup.editTitle")
+              : t("designSystemSetup.newTitle")}
           </DialogTitle>
           <DialogDescription className="text-muted-foreground">
             {editingId
-              ? "Update your brand identity."
-              : "Provide any combination of sources — the more context, the better the result."}
+              ? t("designSystemSetup.editDescription")
+              : t("designSystemSetup.newDescription")}
           </DialogDescription>
         </DialogHeader>
 
@@ -481,11 +486,13 @@ export function DesignSystemSetup({
           <div className="space-y-5 py-4">
             {/* Company Name */}
             <div className="space-y-2">
-              <Label className="text-foreground/80">Company / Brand</Label>
+              <Label className="text-foreground/80">
+                {t("designSystemSetup.companyBrand")}
+              </Label>
               <Input
                 value={companyName}
                 onChange={(e) => setCompanyName(e.target.value)}
-                placeholder="Acme Inc. — We build developer tools..."
+                placeholder={t("designSystemSetup.companyBrandPlaceholder")}
                 className="bg-accent border-border text-foreground placeholder:text-muted-foreground"
               />
             </div>
@@ -496,7 +503,7 @@ export function DesignSystemSetup({
                 <div className="space-y-2">
                   <Label className="text-foreground/80 flex items-center gap-1.5">
                     <IconBrandFigma className="w-3.5 h-3.5" />
-                    Figma file
+                    {t("designSystemSetup.figmaFile")}
                   </Label>
                   {!figResult ? (
                     <>
@@ -509,12 +516,11 @@ export function DesignSystemSetup({
                         {figParsing ? (
                           <span className="inline-flex items-center gap-2 text-xs text-muted-foreground">
                             <IconLoader2 className="w-3.5 h-3.5 animate-spin" />
-                            Parsing Figma file...
+                            {t("designSystemSetup.parsingFigmaFile")}
                           </span>
                         ) : (
                           <span className="text-xs text-muted-foreground">
-                            Upload a .fig local copy to create a slide design
-                            system
+                            {t("designSystemSetup.uploadFigDescription")}
                           </span>
                         )}
                       </button>
@@ -554,13 +560,13 @@ export function DesignSystemSetup({
                 <div className="space-y-2">
                   <Label className="text-foreground/80 flex items-center gap-1.5">
                     <IconWorld className="w-3.5 h-3.5" />
-                    Website URL
+                    {t("designSystemSetup.websiteUrl")}
                   </Label>
                   <div className="flex gap-2">
                     <Input
                       value={websiteUrl}
                       onChange={(e) => setWebsiteUrl(e.target.value)}
-                      placeholder="example.com or Nike"
+                      placeholder={t("designSystemSetup.websitePlaceholder")}
                       className="bg-accent border-border text-foreground placeholder:text-muted-foreground"
                       onBlur={() => {
                         const normalized = normalizeWebsiteUrlInput(websiteUrl);
@@ -576,7 +582,7 @@ export function DesignSystemSetup({
                       onClick={addWebsiteUrl}
                       className="shrink-0 cursor-pointer"
                     >
-                      Add
+                      {t("designSystemSetup.add")}
                     </Button>
                   </div>
                   <TagList
@@ -591,7 +597,7 @@ export function DesignSystemSetup({
                 <div className="space-y-2">
                   <Label className="text-foreground/80 flex items-center gap-1.5">
                     <IconBrandGithub className="w-3.5 h-3.5" />
-                    GitHub Repository
+                    {t("designSystemSetup.githubRepository")}
                   </Label>
                   <div className="flex gap-2">
                     <Input
@@ -609,7 +615,7 @@ export function DesignSystemSetup({
                       onClick={addGithubLink}
                       className="shrink-0 cursor-pointer"
                     >
-                      Add
+                      {t("designSystemSetup.add")}
                     </Button>
                   </div>
                   <TagList
@@ -624,7 +630,7 @@ export function DesignSystemSetup({
                 <div className="space-y-2">
                   <Label className="text-foreground/80 flex items-center gap-1.5">
                     <IconFolder className="w-3.5 h-3.5" />
-                    Code Files
+                    {t("designSystemSetup.codeFiles")}
                   </Label>
                   <button
                     onClick={() => codeInputRef.current?.click()}
@@ -637,7 +643,7 @@ export function DesignSystemSetup({
                     className="w-full border border-dashed border-border rounded-lg p-4 text-center hover:border-foreground/20 cursor-pointer"
                   >
                     <p className="text-xs text-muted-foreground">
-                      CSS, Tailwind config, theme files — drop or click
+                      {t("designSystemSetup.codeFilesDrop")}
                     </p>
                   </button>
                   <input
@@ -664,7 +670,7 @@ export function DesignSystemSetup({
                 <div className="space-y-2">
                   <Label className="text-foreground/80 flex items-center gap-1.5">
                     <IconFileDescription className="w-3.5 h-3.5" />
-                    Documents & Presentations
+                    {t("designSystemSetup.documents")}
                   </Label>
                   <button
                     onClick={() => docInputRef.current?.click()}
@@ -677,7 +683,7 @@ export function DesignSystemSetup({
                     className="w-full border border-dashed border-border rounded-lg p-4 text-center hover:border-foreground/20 cursor-pointer"
                   >
                     <p className="text-xs text-muted-foreground">
-                      PPTX, DOCX, PDF, Markdown, TXT — brand guides, design docs
+                      {t("designSystemSetup.documentsDrop")}
                     </p>
                   </button>
                   <input
@@ -704,14 +710,14 @@ export function DesignSystemSetup({
                 <div className="space-y-2">
                   <Label className="text-foreground/80 flex items-center gap-1.5">
                     <IconPhoto className="w-3.5 h-3.5" />
-                    Screenshots & Visual References
+                    {t("designSystemSetup.visualReferences")}
                   </Label>
                   <button
                     onClick={() => imageInputRef.current?.click()}
                     className="w-full border border-dashed border-border rounded-lg p-4 text-center hover:border-foreground/20 cursor-pointer"
                   >
                     <p className="text-xs text-muted-foreground">
-                      Product screenshots, mood boards, logos
+                      {t("designSystemSetup.visualReferencesDrop")}
                     </p>
                   </button>
                   <input
@@ -744,7 +750,7 @@ export function DesignSystemSetup({
                 {existingSystems.length > 0 && (
                   <div className="space-y-2">
                     <Label className="text-foreground/80">
-                      Fork an existing design system
+                      {t("designSystemSetup.forkExisting")}
                     </Label>
                     <div className="grid grid-cols-2 gap-2">
                       {existingSystems
@@ -780,12 +786,14 @@ export function DesignSystemSetup({
             {/* Brand Notes */}
             <div className="space-y-2">
               <Label className="text-foreground/80">
-                {editingId ? "Brand Notes" : "Additional Notes"}
+                {editingId
+                  ? t("designSystemSetup.brandNotes")
+                  : t("designSystemSetup.additionalNotes")}
               </Label>
               <Textarea
                 value={brandNotes}
                 onChange={(e) => setBrandNotes(e.target.value)}
-                placeholder="Design preferences, constraints, brand guidelines..."
+                placeholder={t("designSystemSetup.notesPlaceholder")}
                 rows={3}
                 className="bg-accent border-border text-foreground placeholder:text-muted-foreground resize-none"
               />
@@ -793,17 +801,20 @@ export function DesignSystemSetup({
 
             {/* Custom Instructions — durable, stored on the design system */}
             <div className="space-y-2">
-              <Label className="text-foreground/80">Custom instructions</Label>
+              <Label className="text-foreground/80">
+                {t("designSystemSetup.customInstructions")}
+              </Label>
               <Textarea
                 value={customInstructions}
                 onChange={(e) => setCustomInstructions(e.target.value)}
-                placeholder="e.g. Always open with a single-stat title slide. Never use bullet lists longer than 3 items. Keep slide titles under 6 words..."
+                placeholder={t(
+                  "designSystemSetup.customInstructionsPlaceholder",
+                )}
                 rows={4}
                 className="bg-accent border-border text-foreground placeholder:text-muted-foreground resize-none"
               />
               <p className="text-[11px] text-muted-foreground">
-                Saved with the design system. Re-applied every time the agent
-                uses it to generate slides.
+                {t("designSystemSetup.customInstructionsDescription")}
               </p>
             </div>
           </div>
@@ -817,7 +828,7 @@ export function DesignSystemSetup({
             disabled={generating}
             className="text-muted-foreground hover:text-foreground cursor-pointer"
           >
-            Cancel
+            {t("designSystemSetup.cancel")}
           </Button>
           <Button
             onClick={handleGenerate}
@@ -827,12 +838,12 @@ export function DesignSystemSetup({
             {generating ? (
               <>
                 <IconLoader2 className="w-4 h-4 animate-spin" />
-                Saving...
+                {t("designSystemSetup.saving")}
               </>
             ) : editingId ? (
-              "Save Changes"
+              t("designSystemSetup.saveChanges")
             ) : (
-              "Continue to generation"
+              t("designSystemSetup.continueToGeneration")
             )}
           </Button>
         </div>
@@ -848,6 +859,7 @@ function TagList({
   items: string[];
   onRemove: (index: number) => void;
 }) {
+  const t = useT();
   if (items.length === 0) return null;
   return (
     <div className="space-y-1">
@@ -860,6 +872,7 @@ function TagList({
           <span className="truncate flex-1">{item}</span>
           <button
             onClick={() => onRemove(i)}
+            aria-label={t("designSystemSetup.removeItem", { item })}
             className="text-muted-foreground hover:text-foreground/70 shrink-0 cursor-pointer"
           >
             <IconX className="w-3.5 h-3.5" />
@@ -885,14 +898,16 @@ function FigImportPreview({
   onCreate: () => void;
   onReset: () => void;
 }) {
+  const t = useT();
+  const { formatNumber } = useFormatters();
   const colors = result.data.colors;
   const colorEntries = (
     [
-      ["Accent", "accent"],
-      ["Primary", "primary"],
-      ["Secondary", "secondary"],
-      ["Background", "background"],
-      ["Text", "text"],
+      [t("designSystemSetup.colorAccent"), "accent"],
+      [t("designSystemSetup.colorPrimary"), "primary"],
+      [t("designSystemSetup.colorSecondary"), "secondary"],
+      [t("designSystemSetup.colorBackground"), "background"],
+      [t("designSystemSetup.colorText"), "text"],
     ] as const
   ).filter(([, key]) => colors[key]);
   const typography = result.data.typography;
@@ -904,25 +919,35 @@ function FigImportPreview({
         {result.preview.thumbnailDataUrl ? (
           <img
             src={result.preview.thumbnailDataUrl}
-            alt="Figma file thumbnail"
+            alt={t("designSystemSetup.figmaThumbnailAlt")}
             className="h-16 w-24 shrink-0 rounded-md border border-border object-cover"
           />
         ) : null}
         <div className="min-w-0 flex-1 space-y-1.5">
           <Label className="text-xs text-muted-foreground">
-            Design system name
+            {t("designSystemSetup.designSystemName")}
           </Label>
           <Input
             value={title}
             onChange={(event) => onTitleChange(event.target.value)}
             className="bg-card border-border text-foreground"
-            placeholder="Brand name"
+            placeholder={t("designSystemSetup.brandNamePlaceholder")}
           />
           <p className="text-[11px] text-muted-foreground">
-            {result.preview.nodeCount.toLocaleString()} nodes,{" "}
-            {gradients.length} gradient{gradients.length === 1 ? "" : "s"},{" "}
-            {result.preview.imageCount} image
-            {result.preview.imageCount === 1 ? "" : "s"}
+            {t("designSystemSetup.figPreviewStats", {
+              nodes: t("designSystemSetup.nodeCount", {
+                count: result.preview.nodeCount,
+                formattedCount: formatNumber(result.preview.nodeCount),
+              }),
+              gradients: t("designSystemSetup.gradientCount", {
+                count: gradients.length,
+                formattedCount: formatNumber(gradients.length),
+              }),
+              images: t("designSystemSetup.imageCount", {
+                count: result.preview.imageCount,
+                formattedCount: formatNumber(result.preview.imageCount),
+              }),
+            })}
           </p>
         </div>
       </div>
@@ -963,14 +988,18 @@ function FigImportPreview({
         <div className="text-xs text-foreground/80">
           {typography.headingFont && (
             <span>
-              <span className="text-muted-foreground">Headings:</span>{" "}
+              <span className="text-muted-foreground">
+                {t("designSystemSetup.headingsLabel")}
+              </span>{" "}
               {typography.headingFont}
               {typography.headingWeight ? ` ${typography.headingWeight}` : ""}
             </span>
           )}
           {typography.bodyFont && (
             <span className="ml-3">
-              <span className="text-muted-foreground">Body:</span>{" "}
+              <span className="text-muted-foreground">
+                {t("designSystemSetup.bodyLabel")}
+              </span>{" "}
               {typography.bodyFont}
             </span>
           )}
@@ -987,10 +1016,10 @@ function FigImportPreview({
           {creating ? (
             <>
               <IconLoader2 className="w-3.5 h-3.5 animate-spin" />
-              Creating...
+              {t("designSystemSetup.creating")}
             </>
           ) : (
-            "Create design system"
+            t("designSystemSetup.createDesignSystem")
           )}
         </Button>
         <Button
@@ -1000,7 +1029,7 @@ function FigImportPreview({
           disabled={creating}
           className="cursor-pointer"
         >
-          Choose another file
+          {t("designSystemSetup.chooseAnotherFile")}
         </Button>
       </div>
     </div>
@@ -1014,6 +1043,7 @@ function FileList({
   files: UploadedFile[];
   onRemove: (id: string) => void;
 }) {
+  const t = useT();
   if (files.length === 0) return null;
   return (
     <div className="space-y-1">
@@ -1029,6 +1059,7 @@ function FileList({
           </span>
           <button
             onClick={() => onRemove(f.id)}
+            aria-label={t("designSystemSetup.removeItem", { item: f.name })}
             className="text-muted-foreground hover:text-foreground/70 shrink-0 cursor-pointer"
           >
             <IconX className="w-3.5 h-3.5" />

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

@@ -1,3 +1,4 @@
+import { useT } from "@agent-native/core/client";
 import {
   DndContext,
   closestCenter,
@@ -44,11 +45,11 @@ import {
 
 // ─── Animation type options ───────────────────────────────────────────────────
 
-const ANIM_TYPES: { value: AnimationType; label: string }[] = [
-  { value: "appear", label: "Appear" },
-  { value: "fade", label: "Fade" },
-  { value: "slide-up", label: "Slide Up" },
-  { value: "zoom", label: "Zoom" },
+const ANIM_TYPES: { value: AnimationType; labelKey: string }[] = [
+  { value: "appear", labelKey: "animations.appear" },
+  { value: "fade", labelKey: "animations.fade" },
+  { value: "slide-up", labelKey: "animations.slideUp" },
+  { value: "zoom", labelKey: "animations.zoom" },
 ];
 
 // ─── Sortable animation item ──────────────────────────────────────────────────
@@ -68,6 +69,7 @@ function SortableAnimationItem({
   onRemove,
   onChangeType,
 }: SortableItemProps) {
+  const t = useT();
   const {
     attributes,
     listeners,
@@ -106,7 +108,8 @@ function SortableAnimationItem({
 
       {/* Element preview */}
       <span className="flex-1 text-[11px] text-muted-foreground truncate min-w-0">
-        {preview || `Element ${anim.elementIndex + 1}`}
+        {preview ||
+          t("animations.elementFallback", { index: anim.elementIndex + 1 })}
       </span>
 
       {/* Type selector */}
@@ -118,9 +121,9 @@ function SortableAnimationItem({
           <SelectValue />
         </SelectTrigger>
         <SelectContent>
-          {ANIM_TYPES.map((t) => (
-            <SelectItem key={t.value} value={t.value}>
-              {t.label}
+          {ANIM_TYPES.map((type) => (
+            <SelectItem key={type.value} value={type.value}>
+              {t(type.labelKey)}
             </SelectItem>
           ))}
         </SelectContent>
@@ -151,6 +154,7 @@ export function AnimationsPanel({
   onUpdateSlide,
   onClose,
 }: AnimationsPanelProps) {
+  const t = useT();
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
   );
@@ -244,12 +248,12 @@ export function AnimationsPanel({
       {/* Header */}
       <div className="flex items-center justify-between px-3 py-2.5 border-b border-border">
         <span className="text-xs font-medium text-foreground/90">
-          Animations
+          {t("animations.title")}
         </span>
         <button
           onClick={onClose}
           className="text-muted-foreground/70 hover:text-muted-foreground"
-          aria-label="Close animations panel"
+          aria-label={t("animations.close")}
         >
           <IconX className="w-3.5 h-3.5" />
         </button>
@@ -259,9 +263,9 @@ export function AnimationsPanel({
       <div className="flex-1 overflow-y-auto">
         {animations.length === 0 ? (
           <div className="px-3 py-6 text-center text-[11px] text-muted-foreground/70 leading-relaxed">
-            No animations yet.
+            {t("animations.emptyTitle")}
             <br />
-            Add elements below to reveal them on click.
+            {t("animations.emptyDescription")}
           </div>
         ) : (
           <div className="px-2 py-2">
@@ -291,7 +295,7 @@ export function AnimationsPanel({
                 onClick={clearAll}
                 className="mt-1 w-full text-[10px] text-muted-foreground/70 hover:text-muted-foreground py-1"
               >
-                Clear all
+                {t("animations.clearAll")}
               </button>
             )}
           </div>
@@ -302,14 +306,14 @@ export function AnimationsPanel({
           <div className="border-t border-border px-2 py-2">
             <div className="flex items-center justify-between mb-1.5 px-1">
               <span className="text-[9px] font-medium text-muted-foreground/70 uppercase tracking-wider">
-                Elements
+                {t("animations.elements")}
               </span>
               {unaddedElements.length > 0 && (
                 <button
                   onClick={autoFill}
                   className="flex items-center gap-0.5 text-[9px] text-[#609FF8]/70 hover:text-[#609FF8]"
                 >
-                  Auto-fill
+                  {t("animations.autoFill")}
                 </button>
               )}
             </div>
@@ -338,7 +342,7 @@ export function AnimationsPanel({
 
         {availableElements.length === 0 && (
           <div className="px-3 py-4 text-center text-[11px] text-muted-foreground/70">
-            No animatable elements detected on this slide.
+            {t("animations.noAnimatableElements")}
           </div>
         )}
       </div>

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

@@ -1,4 +1,4 @@
-import { appBasePath } from "@agent-native/core/client";
+import { appBasePath, useT } from "@agent-native/core/client";
 import { IconUpload, IconTrash, IconLoader2, IconX } from "@tabler/icons-react";
 import { useState, useEffect, useCallback, useRef } from "react";
 import { createPortal } from "react-dom";
@@ -23,6 +23,7 @@ export default function AssetLibraryPanel({
   onSelectAsset,
   anchorRef,
 }: AssetLibraryPanelProps) {
+  const t = useT();
   const [assets, setAssets] = useState<Asset[]>([]);
   const [loading, setLoading] = useState(false);
   const [uploading, setUploading] = useState(false);
@@ -137,7 +138,9 @@ export default function AssetLibraryPanel({
       className="w-[min(20rem,calc(100vw-24px))] max-h-[420px] 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">Asset Library</h3>
+        <h3 className="text-sm font-semibold text-foreground">
+          {t("editorToolbar.assetLibrary")}
+        </h3>
         <button
           onClick={() => onOpenChange(false)}
           className="text-muted-foreground/70 hover:text-muted-foreground transition-colors"
@@ -175,7 +178,7 @@ export default function AssetLibraryPanel({
           </div>
         ) : assets.length === 0 ? (
           <div className="text-center py-8 text-muted-foreground text-xs">
-            No assets yet.
+            {t("raw.noAssetsYet")}
           </div>
         ) : (
           <div className="grid grid-cols-3 gap-2">