@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/media/client/components/media-picker/index.cjs

@@ -19,12 +19,22 @@ function MediaPicker({
   multiple = false,
   accept
 }) {
+  const t = context.useTranslate();
+  const { can: canCreate, isPending: isCreatePermissionPending } = context.useCan({
+    resource: "media:asset",
+    action: "create"
+  });
   const [open, setOpen] = React.useState(false);
   const [selectedFolder, setSelectedFolder] = React.useState(null);
   const [selectedAssets, setSelectedAssets] = React.useState([]);
   const [activeTab, setActiveTab] = React.useState(
     "browse"
   );
+  React.useEffect(() => {
+    if (!isCreatePermissionPending && !canCreate && activeTab !== "browse") {
+      setActiveTab("browse");
+    }
+  }, [activeTab, canCreate, isCreatePermissionPending]);
   const handleClose = () => {
     setOpen(false);
     setSelectedAssets([]);
@@ -45,6 +55,7 @@ function MediaPicker({
     }
   };
   const handleUploaded = (asset) => {
+    if (!canCreate) return;
     if (multiple) {
       setSelectedAssets((prev) => [...prev, asset]);
     } else {
@@ -53,6 +64,7 @@ function MediaPicker({
     }
   };
   const handleUrlRegistered = (asset) => {
+    if (!canCreate) return;
     const toSelect = asset;
     handleClose();
     setTimeout(() => onSelect([toSelect]), 0);
@@ -80,11 +92,12 @@ function MediaPicker({
             },
             children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col overflow-hidden rounded-md", children: [
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: "Media Library" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: t("media.picker.title", "Media Library") }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
                   {
                     type: "button",
+                    "aria-label": t("media.actions.close", "Close"),
                     onClick: handleClose,
                     className: "rounded p-0.5 hover:bg-muted",
                     children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "size-4" })
@@ -106,41 +119,47 @@ function MediaPicker({
                     onValueChange: (v) => setActiveTab(v),
                     className: "flex flex-1 flex-col min-h-0",
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsxs(tabs.TabsList, { className: "grid h-auto w-full shrink-0 grid-cols-3 md:flex md:w-fit", children: [
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          tabs.TabsTrigger,
-                          {
-                            value: "browse",
-                            className: "h-8 px-2 text-xs md:h-6 md:px-3",
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Image, { className: "mr-1 size-3" }),
-                              "Browse"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          tabs.TabsTrigger,
-                          {
-                            value: "upload",
-                            className: "h-8 px-2 text-xs md:h-6 md:px-3",
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "mr-1 size-3" }),
-                              "Upload"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsxs(
-                          tabs.TabsTrigger,
-                          {
-                            value: "url",
-                            className: "h-8 px-2 text-xs md:h-6 md:px-3",
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "mr-1 size-3" }),
-                              "URL"
-                            ]
-                          }
-                        )
-                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsxs(
+                        tabs.TabsList,
+                        {
+                          className: `grid h-auto w-full shrink-0 ${canCreate ? "grid-cols-3" : "grid-cols-1"} md:flex md:w-fit`,
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsxs(
+                              tabs.TabsTrigger,
+                              {
+                                value: "browse",
+                                className: "h-8 px-2 text-xs md:h-6 md:px-3",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Image, { className: "mr-1 size-3" }),
+                                  t("media.tabs.browse", "Browse")
+                                ]
+                              }
+                            ),
+                            canCreate ? /* @__PURE__ */ jsxRuntime.jsxs(
+                              tabs.TabsTrigger,
+                              {
+                                value: "upload",
+                                className: "h-8 px-2 text-xs md:h-6 md:px-3",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "mr-1 size-3" }),
+                                  t("media.tabs.upload", "Upload")
+                                ]
+                              }
+                            ) : null,
+                            canCreate ? /* @__PURE__ */ jsxRuntime.jsxs(
+                              tabs.TabsTrigger,
+                              {
+                                value: "url",
+                                className: "h-8 px-2 text-xs md:h-6 md:px-3",
+                                children: [
+                                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Link, { className: "mr-1 size-3" }),
+                                  t("media.tabs.url", "URL")
+                                ]
+                              }
+                            ) : null
+                          ]
+                        }
+                      ),
                       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 min-h-0 flex-1", children: [
                         /* @__PURE__ */ jsxRuntime.jsx(
                           tabs.TabsContent,
@@ -158,7 +177,7 @@ function MediaPicker({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
+                        canCreate ? /* @__PURE__ */ jsxRuntime.jsx(
                           tabs.TabsContent,
                           {
                             value: "upload",
@@ -172,8 +191,8 @@ function MediaPicker({
                               }
                             )
                           }
-                        ),
-                        /* @__PURE__ */ jsxRuntime.jsx(
+                        ) : null,
+                        canCreate ? /* @__PURE__ */ jsxRuntime.jsx(
                           tabs.TabsContent,
                           {
                             value: "url",
@@ -186,14 +205,16 @@ function MediaPicker({
                               }
                             )
                           }
-                        )
+                        ) : null
                       ] })
                     ]
                   }
                 ) })
               ] }),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 border-t px-3 py-2 sm:flex-row sm:items-center sm:justify-between", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: selectedAssets.length > 0 ? `${selectedAssets.length} selected` : "Click a file to select it" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: selectedAssets.length > 0 ? t("media.picker.selected", "{{count}} selected", {
+                  count: selectedAssets.length
+                }) : t("media.picker.selectHint", "Click a file to select it") }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full gap-2 sm:w-auto", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
                     button.Button,
@@ -203,7 +224,7 @@ function MediaPicker({
                       size: "sm",
                       onClick: handleClose,
                       className: "flex-1 sm:flex-none",
-                      children: "Cancel"
+                      children: t("media.actions.cancel", "Cancel")
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -215,7 +236,9 @@ function MediaPicker({
                       onClick: handleConfirm,
                       disabled: selectedAssets.length === 0,
                       className: "flex-1 sm:flex-none",
-                      children: multiple ? `Select ${selectedAssets.length > 0 ? `(${selectedAssets.length})` : ""}` : "Select"
+                      children: multiple ? t("media.actions.selectMany", "Select ({{count}})", {
+                        count: selectedAssets.length
+                      }) : t("media.actions.select", "Select")
                     }
                   )
                 ] })
@@ -231,14 +254,16 @@ function ImageInputField({
   value,
   onChange
 }) {
-  const { Image: ImageComponent } = context.usePluginOverrides("media", {});
+  const t = context.useTranslate();
+  const { router } = context.useStack();
+  const ImageComponent = router?.Image;
   if (value) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
       ImageComponent ? /* @__PURE__ */ jsxRuntime.jsx(
         ImageComponent,
         {
           src: value,
-          alt: "Featured image preview",
+          alt: t("media.image.previewAlt", "Featured image preview"),
           className: "h-auto w-full max-w-xs rounded-md border object-cover",
           width: 400,
           height: 300,
@@ -248,7 +273,7 @@ function ImageInputField({
         "img",
         {
           src: value,
-          alt: "Featured image preview",
+          alt: t("media.image.previewAlt", "Featured image preview"),
           className: "h-auto w-full max-w-xs rounded-md border object-cover",
           "data-testid": "image-preview"
         }
@@ -264,7 +289,7 @@ function ImageInputField({
                 size: "sm",
                 type: "button",
                 "data-testid": "open-media-picker",
-                children: "Change Image"
+                children: t("media.image.change", "Change Image")
               }
             ),
             accept: ["image/*"],
@@ -279,7 +304,7 @@ function ImageInputField({
             size: "sm",
             "data-testid": "remove-image-button",
             onClick: () => onChange(""),
-            children: "Remove"
+            children: t("media.image.remove", "Remove")
           }
         )
       ] })
@@ -295,7 +320,7 @@ function ImageInputField({
           size: "sm",
           type: "button",
           "data-testid": "open-media-picker",
-          children: "Browse Media"
+          children: t("media.image.browse", "Browse Media")
         }
       ),
       accept: ["image/*"],

package/dist/packages/stack/src/plugins/media/client/components/media-picker/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Popover, PopoverTrigger, PopoverContent } from '../../../../../../../ui/src/components/popover.mjs';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { Tabs, TabsList, TabsTrigger, TabsContent } from '../../../../../../../ui/src/components/tabs.mjs';
@@ -9,7 +9,7 @@ import { FolderTree } from './folder-tree.mjs';
 import { BrowseTab } from './browse-tab.mjs';
 import { UploadTab } from './upload-tab.mjs';
 import { UrlTab } from './url-tab.mjs';
-import { usePluginOverrides } from '@btst/stack/context';
+import { useTranslate, useCan, useStack } from '@btst/stack/context';
 
 function MediaPicker({
   trigger,
@@ -17,12 +17,22 @@ function MediaPicker({
   multiple = false,
   accept
 }) {
+  const t = useTranslate();
+  const { can: canCreate, isPending: isCreatePermissionPending } = useCan({
+    resource: "media:asset",
+    action: "create"
+  });
   const [open, setOpen] = useState(false);
   const [selectedFolder, setSelectedFolder] = useState(null);
   const [selectedAssets, setSelectedAssets] = useState([]);
   const [activeTab, setActiveTab] = useState(
     "browse"
   );
+  useEffect(() => {
+    if (!isCreatePermissionPending && !canCreate && activeTab !== "browse") {
+      setActiveTab("browse");
+    }
+  }, [activeTab, canCreate, isCreatePermissionPending]);
   const handleClose = () => {
     setOpen(false);
     setSelectedAssets([]);
@@ -43,6 +53,7 @@ function MediaPicker({
     }
   };
   const handleUploaded = (asset) => {
+    if (!canCreate) return;
     if (multiple) {
       setSelectedAssets((prev) => [...prev, asset]);
     } else {
@@ -51,6 +62,7 @@ function MediaPicker({
     }
   };
   const handleUrlRegistered = (asset) => {
+    if (!canCreate) return;
     const toSelect = asset;
     handleClose();
     setTimeout(() => onSelect([toSelect]), 0);
@@ -78,11 +90,12 @@ function MediaPicker({
             },
             children: /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden rounded-md", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b px-3 py-2", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: "Media Library" }),
+                /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold", children: t("media.picker.title", "Media Library") }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
+                    "aria-label": t("media.actions.close", "Close"),
                     onClick: handleClose,
                     className: "rounded p-0.5 hover:bg-muted",
                     children: /* @__PURE__ */ jsx(X, { className: "size-4" })
@@ -104,41 +117,47 @@ function MediaPicker({
                     onValueChange: (v) => setActiveTab(v),
                     className: "flex flex-1 flex-col min-h-0",
                     children: [
-                      /* @__PURE__ */ jsxs(TabsList, { className: "grid h-auto w-full shrink-0 grid-cols-3 md:flex md:w-fit", children: [
-                        /* @__PURE__ */ jsxs(
-                          TabsTrigger,
-                          {
-                            value: "browse",
-                            className: "h-8 px-2 text-xs md:h-6 md:px-3",
-                            children: [
-                              /* @__PURE__ */ jsx(Image, { className: "mr-1 size-3" }),
-                              "Browse"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs(
-                          TabsTrigger,
-                          {
-                            value: "upload",
-                            className: "h-8 px-2 text-xs md:h-6 md:px-3",
-                            children: [
-                              /* @__PURE__ */ jsx(Upload, { className: "mr-1 size-3" }),
-                              "Upload"
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsxs(
-                          TabsTrigger,
-                          {
-                            value: "url",
-                            className: "h-8 px-2 text-xs md:h-6 md:px-3",
-                            children: [
-                              /* @__PURE__ */ jsx(Link, { className: "mr-1 size-3" }),
-                              "URL"
-                            ]
-                          }
-                        )
-                      ] }),
+                      /* @__PURE__ */ jsxs(
+                        TabsList,
+                        {
+                          className: `grid h-auto w-full shrink-0 ${canCreate ? "grid-cols-3" : "grid-cols-1"} md:flex md:w-fit`,
+                          children: [
+                            /* @__PURE__ */ jsxs(
+                              TabsTrigger,
+                              {
+                                value: "browse",
+                                className: "h-8 px-2 text-xs md:h-6 md:px-3",
+                                children: [
+                                  /* @__PURE__ */ jsx(Image, { className: "mr-1 size-3" }),
+                                  t("media.tabs.browse", "Browse")
+                                ]
+                              }
+                            ),
+                            canCreate ? /* @__PURE__ */ jsxs(
+                              TabsTrigger,
+                              {
+                                value: "upload",
+                                className: "h-8 px-2 text-xs md:h-6 md:px-3",
+                                children: [
+                                  /* @__PURE__ */ jsx(Upload, { className: "mr-1 size-3" }),
+                                  t("media.tabs.upload", "Upload")
+                                ]
+                              }
+                            ) : null,
+                            canCreate ? /* @__PURE__ */ jsxs(
+                              TabsTrigger,
+                              {
+                                value: "url",
+                                className: "h-8 px-2 text-xs md:h-6 md:px-3",
+                                children: [
+                                  /* @__PURE__ */ jsx(Link, { className: "mr-1 size-3" }),
+                                  t("media.tabs.url", "URL")
+                                ]
+                              }
+                            ) : null
+                          ]
+                        }
+                      ),
                       /* @__PURE__ */ jsxs("div", { className: "mt-2 min-h-0 flex-1", children: [
                         /* @__PURE__ */ jsx(
                           TabsContent,
@@ -156,7 +175,7 @@ function MediaPicker({
                             )
                           }
                         ),
-                        /* @__PURE__ */ jsx(
+                        canCreate ? /* @__PURE__ */ jsx(
                           TabsContent,
                           {
                             value: "upload",
@@ -170,8 +189,8 @@ function MediaPicker({
                               }
                             )
                           }
-                        ),
-                        /* @__PURE__ */ jsx(
+                        ) : null,
+                        canCreate ? /* @__PURE__ */ jsx(
                           TabsContent,
                           {
                             value: "url",
@@ -184,14 +203,16 @@ function MediaPicker({
                               }
                             )
                           }
-                        )
+                        ) : null
                       ] })
                     ]
                   }
                 ) })
               ] }),
               /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 border-t px-3 py-2 sm:flex-row sm:items-center sm:justify-between", children: [
-                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: selectedAssets.length > 0 ? `${selectedAssets.length} selected` : "Click a file to select it" }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: selectedAssets.length > 0 ? t("media.picker.selected", "{{count}} selected", {
+                  count: selectedAssets.length
+                }) : t("media.picker.selectHint", "Click a file to select it") }),
                 /* @__PURE__ */ jsxs("div", { className: "flex w-full gap-2 sm:w-auto", children: [
                   /* @__PURE__ */ jsx(
                     Button,
@@ -201,7 +222,7 @@ function MediaPicker({
                       size: "sm",
                       onClick: handleClose,
                       className: "flex-1 sm:flex-none",
-                      children: "Cancel"
+                      children: t("media.actions.cancel", "Cancel")
                     }
                   ),
                   /* @__PURE__ */ jsx(
@@ -213,7 +234,9 @@ function MediaPicker({
                       onClick: handleConfirm,
                       disabled: selectedAssets.length === 0,
                       className: "flex-1 sm:flex-none",
-                      children: multiple ? `Select ${selectedAssets.length > 0 ? `(${selectedAssets.length})` : ""}` : "Select"
+                      children: multiple ? t("media.actions.selectMany", "Select ({{count}})", {
+                        count: selectedAssets.length
+                      }) : t("media.actions.select", "Select")
                     }
                   )
                 ] })
@@ -229,14 +252,16 @@ function ImageInputField({
   value,
   onChange
 }) {
-  const { Image: ImageComponent } = usePluginOverrides("media", {});
+  const t = useTranslate();
+  const { router } = useStack();
+  const ImageComponent = router?.Image;
   if (value) {
     return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
       ImageComponent ? /* @__PURE__ */ jsx(
         ImageComponent,
         {
           src: value,
-          alt: "Featured image preview",
+          alt: t("media.image.previewAlt", "Featured image preview"),
           className: "h-auto w-full max-w-xs rounded-md border object-cover",
           width: 400,
           height: 300,
@@ -246,7 +271,7 @@ function ImageInputField({
         "img",
         {
           src: value,
-          alt: "Featured image preview",
+          alt: t("media.image.previewAlt", "Featured image preview"),
           className: "h-auto w-full max-w-xs rounded-md border object-cover",
           "data-testid": "image-preview"
         }
@@ -262,7 +287,7 @@ function ImageInputField({
                 size: "sm",
                 type: "button",
                 "data-testid": "open-media-picker",
-                children: "Change Image"
+                children: t("media.image.change", "Change Image")
               }
             ),
             accept: ["image/*"],
@@ -277,7 +302,7 @@ function ImageInputField({
             size: "sm",
             "data-testid": "remove-image-button",
             onClick: () => onChange(""),
-            children: "Remove"
+            children: t("media.image.remove", "Remove")
           }
         )
       ] })
@@ -293,7 +318,7 @@ function ImageInputField({
           size: "sm",
           type: "button",
           "data-testid": "open-media-picker",
-          children: "Browse Media"
+          children: t("media.image.browse", "Browse Media")
         }
       ),
       accept: ["image/*"],

package/dist/packages/stack/src/plugins/media/client/components/media-picker/upload-tab.cjs

@@ -7,12 +7,19 @@ const button = require('../../../../../../../ui/src/components/button.cjs');
 const LucideIcons = require('lucide-react');
 const utils$1 = require('../../../../../../../ui/src/lib/utils.cjs');
 const utils = require('./utils.cjs');
+const context = require('@btst/stack/context');
 
 function UploadTab({
   folderId,
   accept,
   onUploaded
 }) {
+  const t = context.useTranslate();
+  const notify = context.useNotify();
+  const { can: canCreate } = context.useCan({
+    resource: "media:asset",
+    action: "create"
+  });
   const [dragging, setDragging] = React.useState(false);
   const [uploading, setUploading] = React.useState(false);
   const [error, setError] = React.useState(null);
@@ -21,6 +28,7 @@ function UploadTab({
   const acceptAttr = accept?.join(",") ?? void 0;
   const handleFiles = React.useCallback(
     async (files) => {
+      if (!canCreate) return;
       const fileArr = Array.from(files);
       if (fileArr.length === 0) return;
       setError(null);
@@ -28,7 +36,15 @@ function UploadTab({
       try {
         for (const file of fileArr) {
           if (accept && !utils.matchesAccept(file.type, accept)) {
-            setError(`File type ${file.type} is not accepted.`);
+            setError(
+              t(
+                "media.upload.invalidType",
+                "File type {{type}} is not accepted.",
+                {
+                  type: file.type
+                }
+              )
+            );
             continue;
           }
           const asset = await uploadAsset({
@@ -36,20 +52,29 @@ function UploadTab({
             folderId: folderId ?? void 0
           });
           onUploaded(asset);
+          notify.success(
+            t("media.toasts.uploadSuccess", "Uploaded {{filename}}", {
+              filename: file.name
+            })
+          );
         }
       } catch (err) {
-        setError(err instanceof Error ? err.message : "Upload failed");
+        setError(
+          err instanceof Error ? err.message : t("media.toasts.uploadError", "Upload failed")
+        );
       } finally {
         setUploading(false);
       }
     },
-    [accept, folderId, uploadAsset, onUploaded]
+    [accept, canCreate, folderId, notify, onUploaded, t, uploadAsset]
   );
+  if (!canCreate) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col gap-3", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         onDragOver: (e) => {
+          if (!canCreate) return;
           e.preventDefault();
           setDragging(true);
         },
@@ -65,12 +90,12 @@ function UploadTab({
         ),
         children: uploading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "size-8 animate-spin text-muted-foreground" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Uploading\u2026" })
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t("media.upload.uploading", "Uploading\u2026") })
         ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "size-8 text-muted-foreground" }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: "Drop files here" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "or click to browse" })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: t("media.upload.dropHere", "Drop files here") }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: t("media.upload.orBrowse", "or click to browse") })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
             button.Button,
@@ -79,7 +104,7 @@ function UploadTab({
               variant: "outline",
               size: "sm",
               onClick: () => fileInputRef.current?.click(),
-              children: "Choose files"
+              children: t("media.upload.chooseFiles", "Choose files")
             }
           )
         ] })