@btst/stack 2.12.2 → 3.0.0-rc.2

package/dist/packages/stack/src/plugins/media/api/getters.cjs

@@ -24,18 +24,21 @@ async function listAssets(adapter, params) {
       operator: "eq"
     });
   }
-  const needsInMemoryFilter = !!query.query;
+  const searchQuery = query.query?.trim() || void 0;
+  const needsInMemoryFilter = !!searchQuery;
   const dbWhere = whereConditions.length > 0 ? whereConditions : void 0;
   const dbTotal = !needsInMemoryFilter ? await adapter.count({ model: "mediaAsset", where: dbWhere }) : void 0;
   let assets = await adapter.findMany({
     model: "mediaAsset",
-    limit: !needsInMemoryFilter ? query.limit : void 0,
+    // Adapters do not expose portable substring search. Bound the fallback
+    // scan to the newest 1,000 rows so a search cannot load an entire table.
+    limit: needsInMemoryFilter ? 1e3 : query.limit,
     offset: !needsInMemoryFilter ? query.offset : void 0,
     where: dbWhere,
     sortBy: { field: "createdAt", direction: "desc" }
   });
-  if (query.query) {
-    const searchLower = query.query.toLowerCase();
+  if (searchQuery) {
+    const searchLower = searchQuery.toLowerCase();
     assets = assets.filter(
       (asset) => asset.filename.toLowerCase().includes(searchLower) || asset.originalName.toLowerCase().includes(searchLower) || asset.alt?.toLowerCase().includes(searchLower)
     );

package/dist/packages/stack/src/plugins/media/api/getters.mjs

@@ -22,18 +22,21 @@ async function listAssets(adapter, params) {
       operator: "eq"
     });
   }
-  const needsInMemoryFilter = !!query.query;
+  const searchQuery = query.query?.trim() || void 0;
+  const needsInMemoryFilter = !!searchQuery;
   const dbWhere = whereConditions.length > 0 ? whereConditions : void 0;
   const dbTotal = !needsInMemoryFilter ? await adapter.count({ model: "mediaAsset", where: dbWhere }) : void 0;
   let assets = await adapter.findMany({
     model: "mediaAsset",
-    limit: !needsInMemoryFilter ? query.limit : void 0,
+    // Adapters do not expose portable substring search. Bound the fallback
+    // scan to the newest 1,000 rows so a search cannot load an entire table.
+    limit: needsInMemoryFilter ? 1e3 : query.limit,
     offset: !needsInMemoryFilter ? query.offset : void 0,
     where: dbWhere,
     sortBy: { field: "createdAt", direction: "desc" }
   });
-  if (query.query) {
-    const searchLower = query.query.toLowerCase();
+  if (searchQuery) {
+    const searchLower = searchQuery.toLowerCase();
     assets = assets.filter(
       (asset) => asset.filename.toLowerCase().includes(searchLower) || asset.originalName.toLowerCase().includes(searchLower) || asset.alt?.toLowerCase().includes(searchLower)
     );

package/dist/packages/stack/src/plugins/media/api/plugin.cjs

@@ -1,7 +1,6 @@
 'use strict';
 
 const api = require('@btst/stack/plugins/api');
-const z = require('zod');
 const db = require('../db.cjs');
 const schemas = require('../schemas.cjs');
 const getters = require('./getters.cjs');
@@ -73,7 +72,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
         const context = { query, headers };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeListAssets) {
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => hooks.onBeforeListAssets(query, context),
             ctx.error,
             "Unauthorized: Cannot list assets"
@@ -95,7 +94,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
         };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeUpload) {
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => hooks.onBeforeUpload(
               {
                 filename: ctx.body.filename,
@@ -181,7 +180,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
           throw ctx.error(404, { message: "Asset not found" });
         }
         if (hooks?.onBeforeUpdateAsset) {
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => hooks.onBeforeUpdateAsset(existing, ctx.body, context),
             ctx.error,
             "Unauthorized: Cannot update asset"
@@ -222,7 +221,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
           throw ctx.error(404, { message: "Asset not found" });
         }
         if (hooks?.onBeforeDelete) {
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => hooks.onBeforeDelete(asset, context),
             ctx.error,
             "Unauthorized: Cannot delete asset"
@@ -250,9 +249,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
       "/media/folders",
       {
         method: "GET",
-        query: z.z.object({
-          parentId: z.z.string().optional()
-        })
+        query: schemas.FolderListQuerySchema
       },
       async (ctx) => {
         const filter = { parentId: ctx.query.parentId };
@@ -262,7 +259,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
         };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeListFolders) {
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => hooks.onBeforeListFolders(filter, context),
             ctx.error,
             "Unauthorized: Cannot list folders"
@@ -284,7 +281,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
         };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeCreateFolder) {
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => hooks.onBeforeCreateFolder(ctx.body, context),
             ctx.error,
             "Unauthorized: Cannot create folder"
@@ -321,7 +318,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
           throw ctx.error(404, { message: "Folder not found" });
         }
         if (hooks?.onBeforeDeleteFolder) {
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => hooks.onBeforeDeleteFolder(folder, context),
             ctx.error,
             "Unauthorized: Cannot delete folder"
@@ -386,7 +383,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
         const context = { headers: ctx.headers };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeUpload) {
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => hooks.onBeforeUpload(
               {
                 filename: file.name,
@@ -468,7 +465,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
         };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeUpload) {
-          await utils.runHookWithShim(
+          await utils.runHook(
             () => hooks.onBeforeUpload(
               {
                 filename: ctx.body.filename,
@@ -540,7 +537,7 @@ const mediaBackendPlugin = (config) => api.defineBackendPlugin({
             const mimeType = parsed.mimeType ?? "application/octet-stream";
             const size = parsed.size;
             if (hooks?.onBeforeUpload) {
-              await utils.runHookWithShim(
+              await utils.runHook(
                 () => hooks.onBeforeUpload(
                   { filename, mimeType, size },
                   context

package/dist/packages/stack/src/plugins/media/api/plugin.mjs

@@ -1,11 +1,10 @@
 import { defineBackendPlugin, createEndpoint } from '@btst/stack/plugins/api';
-import { z } from 'zod';
 import { mediaSchema } from '../db.mjs';
-import { AssetListQuerySchema, createAssetSchema, updateAssetSchema, createFolderSchema, uploadTokenRequestSchema } from '../schemas.mjs';
+import { AssetListQuerySchema, createAssetSchema, updateAssetSchema, FolderListQuerySchema, createFolderSchema, uploadTokenRequestSchema } from '../schemas.mjs';
 import { getFolderByName, getFolderById, listFolders, getAssetById, listAssets } from './getters.mjs';
 import { createFolder, updateAsset, createAsset, deleteAsset, deleteFolder } from './mutations.mjs';
 import { isDirectAdapter, isS3Adapter, isVercelBlobAdapter } from './storage-adapter.mjs';
-import { runHookWithShim } from '../../utils.mjs';
+import { runHook } from '../../utils.mjs';
 
 function sanitizeS3KeySegment(s) {
   return s.replace(/[/\\]/g, "-").replace(/\.\./g, "_").trim() || "unknown";
@@ -71,7 +70,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
         const context = { query, headers };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeListAssets) {
-          await runHookWithShim(
+          await runHook(
             () => hooks.onBeforeListAssets(query, context),
             ctx.error,
             "Unauthorized: Cannot list assets"
@@ -93,7 +92,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
         };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeUpload) {
-          await runHookWithShim(
+          await runHook(
             () => hooks.onBeforeUpload(
               {
                 filename: ctx.body.filename,
@@ -179,7 +178,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
           throw ctx.error(404, { message: "Asset not found" });
         }
         if (hooks?.onBeforeUpdateAsset) {
-          await runHookWithShim(
+          await runHook(
             () => hooks.onBeforeUpdateAsset(existing, ctx.body, context),
             ctx.error,
             "Unauthorized: Cannot update asset"
@@ -220,7 +219,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
           throw ctx.error(404, { message: "Asset not found" });
         }
         if (hooks?.onBeforeDelete) {
-          await runHookWithShim(
+          await runHook(
             () => hooks.onBeforeDelete(asset, context),
             ctx.error,
             "Unauthorized: Cannot delete asset"
@@ -248,9 +247,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
       "/media/folders",
       {
         method: "GET",
-        query: z.object({
-          parentId: z.string().optional()
-        })
+        query: FolderListQuerySchema
       },
       async (ctx) => {
         const filter = { parentId: ctx.query.parentId };
@@ -260,7 +257,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
         };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeListFolders) {
-          await runHookWithShim(
+          await runHook(
             () => hooks.onBeforeListFolders(filter, context),
             ctx.error,
             "Unauthorized: Cannot list folders"
@@ -282,7 +279,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
         };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeCreateFolder) {
-          await runHookWithShim(
+          await runHook(
             () => hooks.onBeforeCreateFolder(ctx.body, context),
             ctx.error,
             "Unauthorized: Cannot create folder"
@@ -319,7 +316,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
           throw ctx.error(404, { message: "Folder not found" });
         }
         if (hooks?.onBeforeDeleteFolder) {
-          await runHookWithShim(
+          await runHook(
             () => hooks.onBeforeDeleteFolder(folder, context),
             ctx.error,
             "Unauthorized: Cannot delete folder"
@@ -384,7 +381,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
         const context = { headers: ctx.headers };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeUpload) {
-          await runHookWithShim(
+          await runHook(
             () => hooks.onBeforeUpload(
               {
                 filename: file.name,
@@ -466,7 +463,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
         };
         const tenantId = resolveTenantId ? await resolveTenantId(context) ?? void 0 : void 0;
         if (hooks?.onBeforeUpload) {
-          await runHookWithShim(
+          await runHook(
             () => hooks.onBeforeUpload(
               {
                 filename: ctx.body.filename,
@@ -538,7 +535,7 @@ const mediaBackendPlugin = (config) => defineBackendPlugin({
             const mimeType = parsed.mimeType ?? "application/octet-stream";
             const size = parsed.size;
             if (hooks?.onBeforeUpload) {
-              await runHookWithShim(
+              await runHook(
                 () => hooks.onBeforeUpload(
                   { filename, mimeType, size },
                   context

package/dist/packages/stack/src/plugins/media/api/query-key-defs.cjs

@@ -4,16 +4,21 @@ function assetListDiscriminator(params) {
   return {
     folderId: params?.folderId,
     mimeType: params?.mimeType,
-    query: params?.query,
+    query: params?.query?.trim() || void 0,
     limit: params?.limit,
     offset: params?.offset
   };
 }
+function folderListDiscriminator(parentId) {
+  if (parentId === void 0) return "all";
+  return parentId === null ? "root" : parentId;
+}
 const MEDIA_QUERY_KEYS = {
-  assetsList: (params) => ["media", "assets", "list", assetListDiscriminator(params)],
-  assetDetail: (id) => ["media", "assets", "detail", id],
-  foldersList: (parentId) => ["media", "folders", "list", parentId ?? "root"]
+  assetsList: (params) => ["mediaAssets", "list", assetListDiscriminator(params)],
+  assetDetail: (id) => ["mediaAssets", "detail", id],
+  foldersList: (parentId) => ["mediaFolders", "list", folderListDiscriminator(parentId)]
 };
 
 exports.MEDIA_QUERY_KEYS = MEDIA_QUERY_KEYS;
 exports.assetListDiscriminator = assetListDiscriminator;
+exports.folderListDiscriminator = folderListDiscriminator;

package/dist/packages/stack/src/plugins/media/api/query-key-defs.mjs

@@ -2,15 +2,19 @@ function assetListDiscriminator(params) {
   return {
     folderId: params?.folderId,
     mimeType: params?.mimeType,
-    query: params?.query,
+    query: params?.query?.trim() || void 0,
     limit: params?.limit,
     offset: params?.offset
   };
 }
+function folderListDiscriminator(parentId) {
+  if (parentId === void 0) return "all";
+  return parentId === null ? "root" : parentId;
+}
 const MEDIA_QUERY_KEYS = {
-  assetsList: (params) => ["media", "assets", "list", assetListDiscriminator(params)],
-  assetDetail: (id) => ["media", "assets", "detail", id],
-  foldersList: (parentId) => ["media", "folders", "list", parentId ?? "root"]
+  assetsList: (params) => ["mediaAssets", "list", assetListDiscriminator(params)],
+  assetDetail: (id) => ["mediaAssets", "detail", id],
+  foldersList: (parentId) => ["mediaFolders", "list", folderListDiscriminator(parentId)]
 };
 
-export { MEDIA_QUERY_KEYS, assetListDiscriminator };
+export { MEDIA_QUERY_KEYS, assetListDiscriminator, folderListDiscriminator };

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

@@ -7,34 +7,58 @@ const LucideIcons = require('lucide-react');
 const utils = require('./utils.cjs');
 const context = require('@btst/stack/context');
 const assetPreviewButton = require('./asset-preview-button.cjs');
-const sonner = require('sonner');
 
 function AssetCard({
   asset,
   onToggle,
   selected = false,
-  onDelete,
-  apiBaseURL
+  onDelete
 }) {
+  const t = context.useTranslate();
+  const notify = context.useNotify();
   const { mutateAsync: deleteAsset } = useMedia.useDeleteAsset();
-  const { Image: ImageComponent } = context.usePluginOverrides("media", {});
+  const { can: canDelete } = context.useCan({
+    resource: "media:asset",
+    action: "delete",
+    params: { id: asset.id }
+  });
+  const { api, router } = context.useStack();
+  const ImageComponent = router?.Image;
   const imageAsset = utils.isImage(asset.mimeType);
   const selectable = typeof onToggle === "function";
-  const copyUrl = () => {
+  const copyUrl = async () => {
     let fullUrl;
     try {
-      fullUrl = new URL(asset.url, apiBaseURL).href;
+      fullUrl = new URL(asset.url, api?.baseURL).href;
     } catch {
       fullUrl = asset.url;
     }
-    navigator.clipboard.writeText(fullUrl).then(() => sonner.toast.success("URL copied"));
+    try {
+      await navigator.clipboard.writeText(fullUrl);
+      notify.success(t("media.toasts.copySuccess", "URL copied"));
+    } catch {
+      notify.error(t("media.toasts.copyError", "Failed to copy URL"));
+    }
   };
-  const handleDelete = () => {
+  const handleDelete = async () => {
+    if (!canDelete) return;
     if (onDelete) {
-      return onDelete(asset.id);
+      await onDelete(asset.id);
+      return;
     }
-    if (confirm(`Delete "${asset.originalName}"?`)) {
-      return deleteAsset(asset.id).catch(console.error);
+    if (confirm(
+      t("media.assets.deleteNamedConfirm", 'Delete "{{filename}}"?', {
+        filename: asset.originalName
+      })
+    )) {
+      try {
+        await deleteAsset(asset.id);
+        notify.success(t("media.toasts.deleteSuccess", "Asset deleted"));
+      } catch (error) {
+        notify.error(
+          error instanceof Error ? error.message : t("media.toasts.deleteError", "Delete failed")
+        );
+      }
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -87,14 +111,14 @@ function AssetCard({
         ] }),
         selected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-1 top-1 rounded-full bg-primary p-0.5 text-primary-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "size-3" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute right-1 top-1 hidden gap-1 group-hover:flex", children: [
-          apiBaseURL ? /* @__PURE__ */ jsxRuntime.jsx(
+          api?.baseURL ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              title: "Copy URL",
+              title: t("media.actions.copyUrl", "Copy URL"),
               onClick: (e) => {
                 e.stopPropagation();
-                copyUrl();
+                void copyUrl();
               },
               className: "rounded bg-background/80 p-0.5 shadow hover:bg-background",
               children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Copy, { className: "size-3" })
@@ -107,11 +131,11 @@ function AssetCard({
               className: "rounded bg-background/80 p-0.5 shadow hover:bg-background"
             }
           ) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
+          canDelete ? /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
-              title: "Delete",
+              title: t("media.actions.delete", "Delete"),
               onClick: (e) => {
                 e.stopPropagation();
                 void handleDelete();
@@ -119,7 +143,7 @@ function AssetCard({
               className: "rounded bg-destructive/80 p-0.5 text-white hover:bg-destructive",
               children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Trash2, { className: "size-3" })
             }
-          )
+          ) : null
         ] })
       ]
     }

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

@@ -3,36 +3,60 @@ import { useDeleteAsset } from '../../hooks/use-media.mjs';
 import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
 import { File, Check, Copy, Trash2 } from 'lucide-react';
 import { isImage, formatBytes } from './utils.mjs';
-import { usePluginOverrides } from '@btst/stack/context';
+import { useTranslate, useNotify, useCan, useStack } from '@btst/stack/context';
 import { AssetPreviewButton } from './asset-preview-button.mjs';
-import { toast } from 'sonner';
 
 function AssetCard({
   asset,
   onToggle,
   selected = false,
-  onDelete,
-  apiBaseURL
+  onDelete
 }) {
+  const t = useTranslate();
+  const notify = useNotify();
   const { mutateAsync: deleteAsset } = useDeleteAsset();
-  const { Image: ImageComponent } = usePluginOverrides("media", {});
+  const { can: canDelete } = useCan({
+    resource: "media:asset",
+    action: "delete",
+    params: { id: asset.id }
+  });
+  const { api, router } = useStack();
+  const ImageComponent = router?.Image;
   const imageAsset = isImage(asset.mimeType);
   const selectable = typeof onToggle === "function";
-  const copyUrl = () => {
+  const copyUrl = async () => {
     let fullUrl;
     try {
-      fullUrl = new URL(asset.url, apiBaseURL).href;
+      fullUrl = new URL(asset.url, api?.baseURL).href;
     } catch {
       fullUrl = asset.url;
     }
-    navigator.clipboard.writeText(fullUrl).then(() => toast.success("URL copied"));
+    try {
+      await navigator.clipboard.writeText(fullUrl);
+      notify.success(t("media.toasts.copySuccess", "URL copied"));
+    } catch {
+      notify.error(t("media.toasts.copyError", "Failed to copy URL"));
+    }
   };
-  const handleDelete = () => {
+  const handleDelete = async () => {
+    if (!canDelete) return;
     if (onDelete) {
-      return onDelete(asset.id);
+      await onDelete(asset.id);
+      return;
     }
-    if (confirm(`Delete "${asset.originalName}"?`)) {
-      return deleteAsset(asset.id).catch(console.error);
+    if (confirm(
+      t("media.assets.deleteNamedConfirm", 'Delete "{{filename}}"?', {
+        filename: asset.originalName
+      })
+    )) {
+      try {
+        await deleteAsset(asset.id);
+        notify.success(t("media.toasts.deleteSuccess", "Asset deleted"));
+      } catch (error) {
+        notify.error(
+          error instanceof Error ? error.message : t("media.toasts.deleteError", "Delete failed")
+        );
+      }
     }
   };
   return /* @__PURE__ */ jsxs(
@@ -85,14 +109,14 @@ function AssetCard({
         ] }),
         selected && /* @__PURE__ */ jsx("div", { className: "absolute right-1 top-1 rounded-full bg-primary p-0.5 text-primary-foreground", children: /* @__PURE__ */ jsx(Check, { className: "size-3" }) }),
         /* @__PURE__ */ jsxs("div", { className: "absolute right-1 top-1 hidden gap-1 group-hover:flex", children: [
-          apiBaseURL ? /* @__PURE__ */ jsx(
+          api?.baseURL ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              title: "Copy URL",
+              title: t("media.actions.copyUrl", "Copy URL"),
               onClick: (e) => {
                 e.stopPropagation();
-                copyUrl();
+                void copyUrl();
               },
               className: "rounded bg-background/80 p-0.5 shadow hover:bg-background",
               children: /* @__PURE__ */ jsx(Copy, { className: "size-3" })
@@ -105,11 +129,11 @@ function AssetCard({
               className: "rounded bg-background/80 p-0.5 shadow hover:bg-background"
             }
           ) : null,
-          /* @__PURE__ */ jsx(
+          canDelete ? /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              title: "Delete",
+              title: t("media.actions.delete", "Delete"),
               onClick: (e) => {
                 e.stopPropagation();
                 void handleDelete();
@@ -117,7 +141,7 @@ function AssetCard({
               className: "rounded bg-destructive/80 p-0.5 text-white hover:bg-destructive",
               children: /* @__PURE__ */ jsx(Trash2, { className: "size-3" })
             }
-          )
+          ) : null
         ] })
       ]
     }

package/dist/packages/stack/src/plugins/media/client/components/media-picker/asset-preview-button.cjs

@@ -5,19 +5,23 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 const dialog = require('../../../../../../../ui/src/components/dialog.cjs');
 const LucideIcons = require('lucide-react');
+const context = require('@btst/stack/context');
 
 function AssetPreviewButton({
   asset,
   className
 }) {
+  const t = context.useTranslate();
   const [open, setOpen] = React.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
-        title: "Preview",
-        "aria-label": `Preview ${asset.originalName}`,
+        title: t("media.actions.preview", "Preview"),
+        "aria-label": t("media.assets.previewLabel", "Preview {{filename}}", {
+          filename: asset.originalName
+        }),
         onClick: (event) => {
           event.stopPropagation();
           setOpen(true);
@@ -37,7 +41,7 @@ function AssetPreviewButton({
             dialog.DialogClose,
             {
               className: "absolute right-4 top-4 z-10 rounded bg-black/60 p-2 text-white transition hover:bg-black/80",
-              "aria-label": "Close preview",
+              "aria-label": t("media.actions.closePreview", "Close preview"),
               children: /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.X, { className: "size-4" })
             }
           ),

package/dist/packages/stack/src/plugins/media/client/components/media-picker/asset-preview-button.mjs

@@ -3,19 +3,23 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose } from '../../../../../../../ui/src/components/dialog.mjs';
 import { Eye, X } from 'lucide-react';
+import { useTranslate } from '@btst/stack/context';
 
 function AssetPreviewButton({
   asset,
   className
 }) {
+  const t = useTranslate();
   const [open, setOpen] = useState(false);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        title: "Preview",
-        "aria-label": `Preview ${asset.originalName}`,
+        title: t("media.actions.preview", "Preview"),
+        "aria-label": t("media.assets.previewLabel", "Preview {{filename}}", {
+          filename: asset.originalName
+        }),
         onClick: (event) => {
           event.stopPropagation();
           setOpen(true);
@@ -35,7 +39,7 @@ function AssetPreviewButton({
             DialogClose,
             {
               className: "absolute right-4 top-4 z-10 rounded bg-black/60 p-2 text-white transition hover:bg-black/80",
-              "aria-label": "Close preview",
+              "aria-label": t("media.actions.closePreview", "Close preview"),
               children: /* @__PURE__ */ jsx(X, { className: "size-4" })
             }
           ),