@agent-native/core 0.75.4 → 0.76.0

package/corpus/templates/slides/app/i18n/ko-KR.ts

@@ -0,0 +1,55 @@
+const messages = {
+  root: {
+    commandPresentations: "프레젠테이션",
+    searchDecks: "덱 검색",
+    commandAppearance: "모양",
+    toggleTheme: "테마 전환",
+  },
+  header: {
+    settings: "설정",
+    decks: "덱",
+    designSystems: "디자인 시스템",
+    team: "팀",
+    extensions: "확장",
+    deck: "덱",
+    tool: "도구",
+    slides: "Slides",
+  },
+  navigation: {
+    settings: "설정",
+    brand: "Slides",
+    decks: "덱",
+    designSystems: "디자인 시스템",
+    team: "팀",
+  },
+  settings: {
+    title: "설정",
+    description: "이 앱의 언어 및 워크스페이스 환경설정입니다.",
+    languageTitle: "언어",
+    languageDescription:
+      "인터페이스 언어를 선택하세요. 이 기본 설정은 계정에 저장됩니다.",
+    languageLabel: "인터페이스 언어",
+    workspaceTitle: "워크스페이스",
+    workspaceDescription:
+      "팀원, 조직 접근 권한, 공유 워크스페이스 환경설정을 관리합니다.",
+    openTeamSettings: "팀 설정 열기",
+    openResourceSettings: "리소스 설정 열기",
+    agentTitle: "에이전트 설정",
+    agentDescription:
+      "오른쪽 사이드바의 에이전트 설정을 열어 모델, API 키, 자동화, 음성 및 기타 제어를 관리합니다.",
+    openAgentSettings: "에이전트 설정 열기",
+  },
+  agent: {
+    emptyState: "프레젠테이션에 대해 무엇이든 물어보세요",
+    suggestionPitch: "이 문서로 10장짜리 피치덱 만들기",
+    suggestionBrand: "이 덱에 우리 브랜드 적용",
+    suggestionHero: "이 슬라이드의 히어로 이미지 생성",
+  },
+  sidebar: {
+    openNavigation: "탐색 열기",
+    expandSidebar: "사이드바 펼치기",
+    collapseSidebar: "사이드바 접기",
+  },
+};
+
+export default messages;

package/corpus/templates/slides/app/i18n/pt-BR.ts

@@ -0,0 +1,55 @@
+const messages = {
+  root: {
+    commandPresentations: "Apresentações",
+    searchDecks: "Buscar decks",
+    commandAppearance: "Aparência",
+    toggleTheme: "Alternar tema",
+  },
+  header: {
+    settings: "Configurações",
+    decks: "Decks",
+    designSystems: "Sistemas de design",
+    team: "Equipe",
+    extensions: "Extensões",
+    deck: "Deck",
+    tool: "Ferramenta",
+    slides: "Slides",
+  },
+  navigation: {
+    settings: "Configurações",
+    brand: "Slides",
+    decks: "Decks",
+    designSystems: "Sistemas de design",
+    team: "Equipe",
+  },
+  settings: {
+    title: "Configurações",
+    description: "Preferências de idioma e espaço de trabalho deste app.",
+    languageTitle: "Idioma",
+    languageDescription:
+      "Escolha o idioma da interface. Essa preferência é salva na sua conta.",
+    languageLabel: "Idioma da interface",
+    workspaceTitle: "Espaço de trabalho",
+    workspaceDescription:
+      "Gerencie membros da equipe, acesso da organização e preferências compartilhadas.",
+    openTeamSettings: "Abrir configurações da equipe",
+    openResourceSettings: "Abrir configurações de recursos",
+    agentTitle: "Configurações do agente",
+    agentDescription:
+      "Abra as configurações do agente na barra lateral para modelos, chaves de API, automações, voz e outros controles.",
+    openAgentSettings: "Abrir configurações do agente",
+  },
+  agent: {
+    emptyState: "Pergunte qualquer coisa sobre suas apresentações",
+    suggestionPitch: "Crie um pitch de 10 slides a partir deste doc",
+    suggestionBrand: "Aplique nossa marca a este deck",
+    suggestionHero: "Gere uma imagem hero para este slide",
+  },
+  sidebar: {
+    openNavigation: "Abrir navegação",
+    expandSidebar: "Expandir barra lateral",
+    collapseSidebar: "Recolher barra lateral",
+  },
+};
+
+export default messages;

package/corpus/templates/slides/app/i18n/zh-CN.ts

@@ -0,0 +1,53 @@
+const messages = {
+  root: {
+    commandPresentations: "演示文稿",
+    searchDecks: "搜索幻灯片",
+    commandAppearance: "外观",
+    toggleTheme: "切换主题",
+  },
+  header: {
+    settings: "设置",
+    decks: "幻灯片",
+    designSystems: "设计系统",
+    team: "团队",
+    extensions: "扩展",
+    deck: "幻灯片",
+    tool: "工具",
+    slides: "Slides",
+  },
+  navigation: {
+    settings: "设置",
+    brand: "Slides",
+    decks: "幻灯片",
+    designSystems: "设计系统",
+    team: "团队",
+  },
+  settings: {
+    title: "设置",
+    description: "此应用的语言和工作区偏好设置。",
+    languageTitle: "语言",
+    languageDescription: "选择界面语言。此偏好会保存到你的账户。",
+    languageLabel: "界面语言",
+    workspaceTitle: "工作区",
+    workspaceDescription: "管理团队成员、组织访问权限和共享工作区偏好。",
+    openTeamSettings: "打开团队设置",
+    openResourceSettings: "打开资源设置",
+    agentTitle: "代理设置",
+    agentDescription:
+      "打开代理侧边栏设置，管理模型、API 密钥、自动化、语音和其他代理控制项。",
+    openAgentSettings: "打开代理设置",
+  },
+  agent: {
+    emptyState: "可以询问我任何关于演示文稿的问题",
+    suggestionPitch: "根据这份文档制作 10 页推介幻灯片",
+    suggestionBrand: "将我们的品牌应用到这份幻灯片",
+    suggestionHero: "为这页幻灯片生成主视觉图片",
+  },
+  sidebar: {
+    openNavigation: "打开导航",
+    expandSidebar: "展开侧边栏",
+    collapseSidebar: "折叠侧边栏",
+  },
+};
+
+export default messages;

package/corpus/templates/slides/app/root.tsx

@@ -20,6 +20,7 @@ import {
   exitSelectionMode as coreExitSelectionMode,
   useCommandMenuShortcut,
   useDbSync,
+  useT,
 } from "@agent-native/core/client";
 import { Layout as AppLayout } from "@/components/layout/Layout";
 import { IconSun, IconMoon } from "@tabler/icons-react";
@@ -29,8 +30,12 @@ import type { LinksFunction } from "react-router";
 import stylesheet from "./global.css?url";
 import { configureTracking } from "@agent-native/core/client";
 import changelog from "../CHANGELOG.md?raw";
-import { getThemeInitScript } from "@agent-native/core/client";
+import {
+  getLocaleInitScript,
+  getThemeInitScript,
+} from "@agent-native/core/client";
 import { TAB_ID } from "@/lib/tab-id";
+import { i18nCatalog } from "./i18n";
 configureTracking({
   getDefaultProps: (_name, properties) => ({
     ...properties,
@@ -90,11 +95,35 @@ function useExitSelectionOnOutsideClick() {
   }, []);
 }
 
-const THEME_INIT_SCRIPT = getThemeInitScript("dark", true);
+const THEME_INIT_SCRIPT_SELECTOR = "script[data-agent-native-theme-init]";
+const LOCALE_INIT_SCRIPT_SELECTOR = "script[data-agent-native-locale-init]";
+
+function getHydrationStableThemeInitScript() {
+  if (typeof document !== "undefined") {
+    const existing = document.querySelector<HTMLScriptElement>(
+      THEME_INIT_SCRIPT_SELECTOR,
+    );
+    if (existing?.innerHTML) return existing.innerHTML;
+  }
+  return getThemeInitScript("dark", true);
+}
+
+function getHydrationStableLocaleInitScript() {
+  if (typeof document !== "undefined") {
+    const existing = document.querySelector<HTMLScriptElement>(
+      LOCALE_INIT_SCRIPT_SELECTOR,
+    );
+    if (existing?.innerHTML) return existing.innerHTML;
+  }
+  return getLocaleInitScript();
+}
+
+const THEME_INIT_SCRIPT = getHydrationStableThemeInitScript();
+const LOCALE_INIT_SCRIPT = getHydrationStableLocaleInitScript();
 
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en" suppressHydrationWarning>
+    <html lang="en-US" dir="ltr" data-locale="en-US" suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
         <meta
@@ -102,9 +131,15 @@ export function Layout({ children }: { children: React.ReactNode }) {
           content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
         />
         <script
+          data-agent-native-theme-init
           suppressHydrationWarning
           dangerouslySetInnerHTML={{ __html: THEME_INIT_SCRIPT }}
         />
+        <script
+          data-agent-native-locale-init
+          suppressHydrationWarning
+          dangerouslySetInnerHTML={{ __html: LOCALE_INIT_SCRIPT }}
+        />
         <link rel="icon" type="image/svg+xml" href={appPath("/favicon.svg")} />
         <link rel="manifest" href={appPath("/manifest.json")} />
         <meta name="theme-color" content="#EC4899" />
@@ -145,6 +180,7 @@ function AppContent() {
   const { resolvedTheme, setTheme } = useTheme();
   const isDark = resolvedTheme === "dark";
   const [cmdkOpen, setCmdkOpen] = useState(false);
+  const t = useT();
   useCommandMenuShortcut(useCallback(() => setCmdkOpen(true), []));
   const location = useLocation();
 
@@ -169,16 +205,18 @@ function AppContent() {
         changelog={changelog}
         changelogKey="slides"
       >
-        <CommandMenu.Group heading="Presentations">
-          <CommandMenu.Item onSelect={() => {}}>Search decks</CommandMenu.Item>
+        <CommandMenu.Group heading={t("root.commandPresentations")}>
+          <CommandMenu.Item onSelect={() => {}}>
+            {t("root.searchDecks")}
+          </CommandMenu.Item>
         </CommandMenu.Group>
-        <CommandMenu.Group heading="Appearance">
+        <CommandMenu.Group heading={t("root.commandAppearance")}>
           <CommandMenu.Item
             onSelect={() => setTheme(isDark ? "light" : "dark")}
             keywords={["theme", "dark", "light", "mode"]}
           >
             {isDark ? <IconSun size={16} /> : <IconMoon size={16} />}
-            Toggle {isDark ? "light" : "dark"} mode
+            {t("root.toggleTheme")}
           </CommandMenu.Item>
         </CommandMenu.Group>
       </CommandMenu>
@@ -200,7 +238,11 @@ export default function Root() {
   }
 
   return (
-    <AppProviders queryClient={queryClient} defaultTheme="dark">
+    <AppProviders
+      queryClient={queryClient}
+      defaultTheme="dark"
+      i18n={{ catalog: i18nCatalog }}
+    >
       <AppContent />
       {/* useToast-based Toaster — separate from AppProviders' sonner Toaster.
           Components throughout the app call toast() from @/hooks/use-toast,

package/corpus/templates/slides/app/routes/settings.tsx

@@ -0,0 +1,85 @@
+import { Link } from "react-router";
+import {
+  ChangelogSettingsCard,
+  LanguagePicker,
+  openAgentSettings,
+  useT,
+} from "@agent-native/core/client";
+import { useSetPageTitle } from "@/components/layout/HeaderActions";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import changelog from "../../CHANGELOG.md?raw";
+
+export function meta() {
+  return [{ title: "Settings - Slides" }];
+}
+
+export default function SettingsRoute() {
+  const t = useT();
+  useSetPageTitle(t("settings.title"));
+
+  return (
+    <main className="mx-auto w-full max-w-3xl space-y-6 px-4 py-6 sm:px-6 sm:py-10">
+      <div className="space-y-1">
+        <h1 className="text-2xl font-semibold tracking-tight">
+          {t("settings.title")}
+        </h1>
+        <p className="text-sm leading-6 text-muted-foreground">
+          {t("settings.description")}
+        </p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t("settings.languageTitle")}
+          </CardTitle>
+          <CardDescription>{t("settings.languageDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent className="max-w-xs space-y-1.5">
+          <Label>{t("settings.languageLabel")}</Label>
+          <LanguagePicker label={t("settings.languageLabel")} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t("settings.workspaceTitle")}
+          </CardTitle>
+          <CardDescription>
+            {t("settings.workspaceDescription")}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" asChild>
+            <Link to="/team">{t("settings.openTeamSettings")}</Link>
+          </Button>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">
+            {t("settings.agentTitle")}
+          </CardTitle>
+          <CardDescription>{t("settings.agentDescription")}</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button variant="outline" onClick={() => openAgentSettings()}>
+            {t("settings.openAgentSettings")}
+          </Button>
+        </CardContent>
+      </Card>
+
+      <ChangelogSettingsCard markdown={changelog} />
+    </main>
+  );
+}

package/corpus/templates/slides/changelog/2026-06-24-a-new-settings-page-gives-quick-access-to-language-workspace.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-24
+---
+
+A new Settings page gives quick access to language, workspace, and agent preferences.

package/corpus/templates/slides/changelog/2026-06-24-added-a-language-picker-and-localized-app-chrome-for-support.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-06-24
+---
+
+Added a language picker and localized app chrome for supported languages.

package/corpus/templates/videos/.agents/skills/self-modifying-code/SKILL.md

@@ -66,6 +66,11 @@ el.dataset.selectedId = selectedItem?.id || "";
 
 **Use configuration-driven rendering** — Extract visual decisions (colors, layouts, sizes) into JSON config files in `data/`. The agent can modify the config (Tier 1) instead of the component source (Tier 2).
 
+**Keep localized copy in catalogs** — When editing visible UI copy, labels,
+toasts, empty states, prompts, or formatting, read `internationalization` and
+update `app/i18n/en-US.ts` plus existing locale catalogs instead of leaving new
+inline strings in components.
+
 ## Don't
 
 - Don't modify `.env` files or files containing secrets
@@ -80,3 +85,4 @@ el.dataset.selectedId = selectedItem?.id || "";
 - **actions** — The agent can create or modify actions to add new capabilities
 - **delegate-to-agent** — Self-modification requests come through the agent chat
 - **real-time-sync** — Database writes trigger change events to update the UI
+- **internationalization** — UI copy, language catalogs, locale switching, and RTL-safe edits

package/corpus/templates/videos/app/components/NewCompositionPopover.tsx

@@ -6,7 +6,11 @@ import {
 } from "@/components/ui/popover";
 import { IconPlus } from "@tabler/icons-react";
 import { cn } from "@/lib/utils";
-import { PromptComposer, useSendToAgentChat } from "@agent-native/core/client";
+import {
+  PromptComposer,
+  useSendToAgentChat,
+  useT,
+} from "@agent-native/core/client";
 
 type NewCompositionPopoverProps = {
   isNew: boolean;
@@ -23,6 +27,7 @@ export function NewCompositionPopover({
   const [isGenerating, setIsGenerating] = useState(false);
   const [submitError, setSubmitError] = useState<string | null>(null);
   const { send, codeRequiredDialog } = useSendToAgentChat();
+  const t = useT();
 
   // Auto-save after the agent finishes generating a new composition
   useEffect(() => {
@@ -58,7 +63,7 @@ export function NewCompositionPopover({
       const message =
         typeof detail?.message === "string"
           ? detail.message
-          : "The agent run failed before the composition could be created.";
+          : t("newComposition.runFailed");
       sessionStorage.setItem("videos:new-composition-error", message);
       finish();
     };
@@ -69,7 +74,7 @@ export function NewCompositionPopover({
       window.removeEventListener("agentNative.chatRunning", handleChatRunning);
       window.removeEventListener("agent-chat:run-error", handleRunError);
     };
-  }, [isGenerating, onGeneratingChange]);
+  }, [isGenerating, onGeneratingChange, t]);
 
   async function fileToDataUrl(file: File): Promise<string> {
     return new Promise((resolve, reject) => {
@@ -105,7 +110,7 @@ export function NewCompositionPopover({
       }
     } catch (error) {
       const message =
-        error instanceof Error ? error.message : "Could not read attachment.";
+        error instanceof Error ? error.message : t("newComposition.readFailed");
       setSubmitError(message);
       setIsGenerating(false);
       onGeneratingChange?.(false);
@@ -120,7 +125,7 @@ export function NewCompositionPopover({
       newTab: true,
     });
     if (result === null) {
-      setSubmitError("Could not start the composition request.");
+      setSubmitError(t("newComposition.startFailed"));
       setIsGenerating(false);
       onGeneratingChange?.(false);
       return;
@@ -152,7 +157,7 @@ export function NewCompositionPopover({
             )}
           >
             <IconPlus size={14} />
-            New Composition
+            {t("newComposition.button")}
           </button>
         </PopoverTrigger>
         <PopoverContent
@@ -163,16 +168,16 @@ export function NewCompositionPopover({
         >
           <div className="mb-2 px-1">
             <h3 className="text-sm font-semibold text-foreground">
-              New composition
+              {t("newComposition.title")}
             </h3>
             <p className="mt-1 text-xs text-muted-foreground">
-              Describe the video you want to create
+              {t("newComposition.description")}
             </p>
           </div>
           <PromptComposer
             autoFocus
             attachmentsEnabled
-            placeholder="Describe the video you want to create..."
+            placeholder={t("newComposition.placeholder")}
             draftScope="videos:new-composition"
             onSubmit={handleSubmit}
           />

package/corpus/templates/videos/app/components/Sidebar.tsx

@@ -31,7 +31,11 @@ import { useTimeline } from "@/contexts/TimelineContext";
 import { usePlayback } from "@/contexts/PlaybackContext";
 import { useFolders } from "@/hooks/use-folders";
 import { ExtensionsSidebarSection } from "@agent-native/core/client/extensions";
-import { DevDatabaseLink, FeedbackButton } from "@agent-native/core/client";
+import {
+  DevDatabaseLink,
+  FeedbackButton,
+  useT,
+} from "@agent-native/core/client";
 import { OrgSwitcher } from "@agent-native/core/client/org";
 import {
   Tooltip,
@@ -75,6 +79,7 @@ export function Sidebar({
   } = useTimeline();
 
   const { currentFrame, fps, onSeek } = usePlayback();
+  const t = useT();
 
   const {
     folders,
@@ -228,7 +233,7 @@ export function Sidebar({
   const navItems = [
     {
       icon: IconVideo,
-      label: "Animations",
+      labelKey: "navigation.animations",
       href: "/",
       active:
         !location.pathname.startsWith("/components") &&
@@ -237,19 +242,19 @@ export function Sidebar({
     },
     {
       icon: IconComponents,
-      label: "Components",
+      labelKey: "navigation.components",
       href: "/components",
       active: location.pathname.startsWith("/components"),
     },
     {
       icon: IconPalette,
-      label: "Design Systems",
+      labelKey: "navigation.designSystems",
       href: "/design-systems",
       active: location.pathname.startsWith("/design-systems"),
     },
     {
       icon: IconUsers,
-      label: "Team",
+      labelKey: "navigation.team",
       href: "/team",
       active: location.pathname === "/team",
     },
@@ -268,7 +273,9 @@ export function Sidebar({
       <div className="w-64 lg:w-72 h-full flex flex-col">
         {/* App name */}
         <div className="flex h-10 items-center px-3 border-b border-border shrink-0">
-          <span className="text-xs font-semibold tracking-tight">Videos</span>
+          <span className="text-xs font-semibold tracking-tight">
+            {t("navigation.brand")}
+          </span>
         </div>
 
         {/* Navigation */}
@@ -287,7 +294,7 @@ export function Sidebar({
                 )}
               >
                 <Icon className="h-3.5 w-3.5 shrink-0" />
-                {item.label}
+                {t(item.labelKey)}
               </Link>
             );
           })}
@@ -303,13 +310,13 @@ export function Sidebar({
               value="compositions"
               className="flex-1 px-3 py-1.5 text-xs font-medium rounded-md text-muted-foreground data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-none"
             >
-              Compositions
+              {t("studio.compositions")}
             </TabsTrigger>
             <TabsTrigger
               value="properties"
               className="flex-1 px-3 py-1.5 text-xs font-medium rounded-md text-muted-foreground data-[state=active]:bg-secondary data-[state=active]:text-foreground data-[state=active]:shadow-none"
             >
-              Properties
+              {t("studio.properties")}
               {selectedTrackId && (
                 <span className="ml-1 w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
               )}

package/corpus/templates/videos/app/components/StudioHeader.tsx

@@ -8,6 +8,7 @@ import {
   AgentToggleButton,
   NotificationsBell,
   ShareButton,
+  useT,
 } from "@agent-native/core/client";
 import { useDbStatus } from "@/hooks/use-db-status";
 import { CloudUpgrade } from "@/components/CloudUpgrade";
@@ -33,13 +34,16 @@ export function StudioHeader({
 }: StudioHeaderProps) {
   const { isLocal } = useDbStatus();
   const [shareOpen, setShareOpen] = useState(false);
+  const t = useT();
 
   return (
     <header className="flex items-center justify-between px-2 sm:px-4 h-12 border-b border-border bg-card/80 backdrop-blur-xl z-10 flex-shrink-0">
       <div className="flex items-center gap-1.5 sm:gap-3 min-w-0">
         <button
           onClick={onToggleSidebar}
-          aria-label={sidebarOpen ? "Close sidebar" : "Open sidebar"}
+          aria-label={
+            sidebarOpen ? t("studio.closeSidebar") : t("studio.openSidebar")
+          }
           className="p-2 sm:p-1.5 rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary cursor-pointer"
         >
           {sidebarOpen ? (
@@ -52,7 +56,7 @@ export function StudioHeader({
         <div className="w-px h-5 bg-border hidden sm:block" />
 
         <h1 className="text-sm font-semibold tracking-tight hidden sm:block">
-          Videos
+          {t("navigation.brand")}
         </h1>
       </div>
 
@@ -61,11 +65,11 @@ export function StudioHeader({
           <Popover open={shareOpen} onOpenChange={setShareOpen}>
             <PopoverTrigger asChild>
               <button
-                aria-label="Share"
+                aria-label={t("studio.share")}
                 className="p-2 sm:px-3 sm:py-1.5 text-xs font-medium rounded-md text-muted-foreground hover:text-foreground hover:bg-secondary/50 flex items-center gap-1.5 cursor-pointer"
               >
                 <IconShare2 className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
-                <span className="hidden sm:inline">Share</span>
+                <span className="hidden sm:inline">{t("studio.share")}</span>
               </button>
             </PopoverTrigger>
             <PopoverContent
@@ -74,8 +78,8 @@ export function StudioHeader({
               className="w-auto p-0 border-none bg-transparent shadow-none"
             >
               <CloudUpgrade
-                title="Share Videos"
-                description="To share or export videos, connect a cloud database so your compositions can be accessed from anywhere."
+                title={t("studio.shareVideos")}
+                description={t("studio.shareVideosDescription")}
                 onClose={() => setShareOpen(false)}
               />
             </PopoverContent>
@@ -88,12 +92,12 @@ export function StudioHeader({
           />
         ) : (
           <button
-            aria-label="Share"
+            aria-label={t("studio.share")}
             disabled
             className="p-2 sm:px-3 sm:py-1.5 text-xs font-medium rounded-md text-muted-foreground/50 flex items-center gap-1.5 cursor-not-allowed"
           >
             <IconShare2 className="w-4 h-4 sm:w-3.5 sm:h-3.5" />
-            <span className="hidden sm:inline">Share</span>
+            <span className="hidden sm:inline">{t("studio.share")}</span>
           </button>
         )}
         <NotificationsBell />