@btst/stack 2.12.2 → 3.0.0-rc.2

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

@@ -5,12 +5,19 @@ import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { Loader2, Upload } from 'lucide-react';
 import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
 import { matchesAccept } from './utils.mjs';
+import { useTranslate, useNotify, useCan } from '@btst/stack/context';
 
 function UploadTab({
   folderId,
   accept,
   onUploaded
 }) {
+  const t = useTranslate();
+  const notify = useNotify();
+  const { can: canCreate } = useCan({
+    resource: "media:asset",
+    action: "create"
+  });
   const [dragging, setDragging] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [error, setError] = useState(null);
@@ -19,6 +26,7 @@ function UploadTab({
   const acceptAttr = accept?.join(",") ?? void 0;
   const handleFiles = useCallback(
     async (files) => {
+      if (!canCreate) return;
       const fileArr = Array.from(files);
       if (fileArr.length === 0) return;
       setError(null);
@@ -26,7 +34,15 @@ function UploadTab({
       try {
         for (const file of fileArr) {
           if (accept && !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({
@@ -34,20 +50,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__ */ jsxs("div", { className: "flex h-full flex-col gap-3", children: [
     /* @__PURE__ */ jsx(
       "div",
       {
         onDragOver: (e) => {
+          if (!canCreate) return;
           e.preventDefault();
           setDragging(true);
         },
@@ -63,12 +88,12 @@ function UploadTab({
         ),
         children: uploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Loader2, { className: "size-8 animate-spin text-muted-foreground" }),
-          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Uploading\u2026" })
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t("media.upload.uploading", "Uploading\u2026") })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(Upload, { className: "size-8 text-muted-foreground" }),
           /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Drop files here" }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "or click to browse" })
+            /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: t("media.upload.dropHere", "Drop files here") }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: t("media.upload.orBrowse", "or click to browse") })
           ] }),
           /* @__PURE__ */ jsx(
             Button,
@@ -77,7 +102,7 @@ function UploadTab({
               variant: "outline",
               size: "sm",
               onClick: () => fileInputRef.current?.click(),
-              children: "Choose files"
+              children: t("media.upload.chooseFiles", "Choose files")
             }
           )
         ] })

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

@@ -6,35 +6,41 @@ const useMedia = require('../../hooks/use-media.cjs');
 const input = require('../../../../../../../ui/src/components/input.cjs');
 const button = require('../../../../../../../ui/src/components/button.cjs');
 const LucideIcons = require('lucide-react');
+const context = require('@btst/stack/context');
 
 function UrlTab({
   folderId,
   onRegistered
 }) {
+  const t = context.useTranslate();
+  const { can: canCreate } = context.useCan({
+    resource: "media:asset",
+    action: "create"
+  });
   const [url, setUrl] = React.useState("");
-  const [error, setError] = React.useState(null);
-  const { mutateAsync: registerAsset, isPending } = useMedia.useRegisterAsset();
+  const form = useMedia.useRegisterAssetForm({
+    folderId: folderId ?? void 0,
+    onSuccess: onRegistered
+  });
   const handleSubmit = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    setError(null);
+    if (!canCreate) return;
+    form.clearErrors();
     const trimmed = url.trim();
     if (!trimmed) return;
-    try {
-      const filename = trimmed.split("/").pop() ?? "asset";
-      const asset = await registerAsset({
-        url: trimmed,
-        filename,
-        folderId: folderId ?? void 0
-      });
+    const asset = await form.submit({ url: trimmed });
+    if (asset) {
       setUrl("");
-      onRegistered(asset);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to register URL");
     }
   };
+  if (!canCreate) return null;
+  const urlError = form.fieldErrors.url;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-full flex-col gap-3 pt-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Paste a public URL to register it as an asset without uploading a file." }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: t(
+      "media.url.description",
+      "Paste a public URL to register it as an asset without uploading a file."
+    ) }),
     /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -45,7 +51,10 @@ function UrlTab({
             autoCapitalize: "none",
             autoCorrect: "off",
             value: url,
-            onChange: (e) => setUrl(e.target.value),
+            onChange: (e) => {
+              setUrl(e.target.value);
+              form.clearErrors();
+            },
             placeholder: "https://example.com/image.png",
             className: "flex-1",
             "data-testid": "media-url-input",
@@ -57,16 +66,16 @@ function UrlTab({
           {
             type: "submit",
             size: "sm",
-            disabled: isPending || !url.trim(),
+            disabled: form.isSubmitting || !url.trim(),
             className: "w-full sm:w-auto",
             children: [
-              isPending ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "mr-1 size-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "mr-1 size-4" }),
-              "Use URL"
+              form.isSubmitting ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "mr-1 size-4 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Check, { className: "mr-1 size-4" }),
+              t("media.url.use", "Use URL")
             ]
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: error })
+      urlError ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", children: String(urlError) }) : null
     ] })
   ] });
 }

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

@@ -1,38 +1,44 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useState } from 'react';
-import { useRegisterAsset } from '../../hooks/use-media.mjs';
+import { useRegisterAssetForm } from '../../hooks/use-media.mjs';
 import { Input } from '../../../../../../../ui/src/components/input.mjs';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { Loader2, Check } from 'lucide-react';
+import { useTranslate, useCan } from '@btst/stack/context';
 
 function UrlTab({
   folderId,
   onRegistered
 }) {
+  const t = useTranslate();
+  const { can: canCreate } = useCan({
+    resource: "media:asset",
+    action: "create"
+  });
   const [url, setUrl] = useState("");
-  const [error, setError] = useState(null);
-  const { mutateAsync: registerAsset, isPending } = useRegisterAsset();
+  const form = useRegisterAssetForm({
+    folderId: folderId ?? void 0,
+    onSuccess: onRegistered
+  });
   const handleSubmit = async (e) => {
     e.preventDefault();
     e.stopPropagation();
-    setError(null);
+    if (!canCreate) return;
+    form.clearErrors();
     const trimmed = url.trim();
     if (!trimmed) return;
-    try {
-      const filename = trimmed.split("/").pop() ?? "asset";
-      const asset = await registerAsset({
-        url: trimmed,
-        filename,
-        folderId: folderId ?? void 0
-      });
+    const asset = await form.submit({ url: trimmed });
+    if (asset) {
       setUrl("");
-      onRegistered(asset);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to register URL");
     }
   };
+  if (!canCreate) return null;
+  const urlError = form.fieldErrors.url;
   return /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col gap-3 pt-2", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Paste a public URL to register it as an asset without uploading a file." }),
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: t(
+      "media.url.description",
+      "Paste a public URL to register it as an asset without uploading a file."
+    ) }),
     /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "flex flex-col gap-2", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row", children: [
         /* @__PURE__ */ jsx(
@@ -43,7 +49,10 @@ function UrlTab({
             autoCapitalize: "none",
             autoCorrect: "off",
             value: url,
-            onChange: (e) => setUrl(e.target.value),
+            onChange: (e) => {
+              setUrl(e.target.value);
+              form.clearErrors();
+            },
             placeholder: "https://example.com/image.png",
             className: "flex-1",
             "data-testid": "media-url-input",
@@ -55,16 +64,16 @@ function UrlTab({
           {
             type: "submit",
             size: "sm",
-            disabled: isPending || !url.trim(),
+            disabled: form.isSubmitting || !url.trim(),
             className: "w-full sm:w-auto",
             children: [
-              isPending ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1 size-4 animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "mr-1 size-4" }),
-              "Use URL"
+              form.isSubmitting ? /* @__PURE__ */ jsx(Loader2, { className: "mr-1 size-4 animate-spin" }) : /* @__PURE__ */ jsx(Check, { className: "mr-1 size-4" }),
+              t("media.url.use", "Use URL")
             ]
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error })
+      urlError ? /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: String(urlError) }) : null
     ] })
   ] });
 }

package/dist/packages/stack/src/plugins/media/client/components/pages/library-page.cjs

@@ -23,6 +23,7 @@ function LibraryPageComponent() {
     components.ComposedRoute,
     {
       path: "/media",
+      permission: { resource: "media:asset", action: "read" },
       PageComponent: LibraryPage,
       ErrorComponent: LibraryError,
       LoadingComponent: LibraryLoading,

package/dist/packages/stack/src/plugins/media/client/components/pages/library-page.internal.cjs

@@ -7,13 +7,15 @@ const useMedia = require('../../hooks/use-media.cjs');
 const button = require('../../../../../../../ui/src/components/button.cjs');
 const LucideIcons = require('lucide-react');
 const utils = require('../../../../../../../ui/src/lib/utils.cjs');
-const sonner = require('sonner');
 const context = require('@btst/stack/context');
+const client = require('@btst/stack/client');
 const useRouteLifecycle = require('../../../../../../../ui/src/hooks/use-route-lifecycle.cjs');
 const browseTab = require('../media-picker/browse-tab.cjs');
 const folderTree = require('../media-picker/folder-tree.cjs');
 
 function LibraryPage() {
+  const t = context.useTranslate();
+  const notify = context.useNotify();
   const overrides = context.usePluginOverrides("media", {});
   useRouteLifecycle.useRouteLifecycle({
     routeName: "library",
@@ -21,41 +23,71 @@ function LibraryPage() {
       path: "/media",
       isSSR: typeof window === "undefined"
     },
-    overrides,
-    beforeRenderHook: (overrides2, context) => {
-      if (overrides2.onBeforeLibraryPageRendered) {
-        return overrides2.onBeforeLibraryPageRendered(context);
-      }
-      return true;
-    }
+    overrides
   });
-  const [selectedFolder, setSelectedFolder] = React.useState(null);
+  const [{ folder, q: search }, setListState] = client.useListState("media-library", {
+    folder: { type: "string", default: "" },
+    q: { type: "string", default: "", history: "replace" }
+  });
+  const selectedFolder = folder || null;
+  const [searchInput, setSearchInput] = React.useState(search);
+  const lastSyncedSearch = React.useRef(search);
+  React.useEffect(() => {
+    if (search !== lastSyncedSearch.current) {
+      lastSyncedSearch.current = search;
+      setSearchInput(search);
+    }
+  }, [search]);
+  React.useEffect(() => {
+    if (searchInput === search) return;
+    const timeout = setTimeout(() => {
+      lastSyncedSearch.current = searchInput;
+      setListState({ q: searchInput });
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [searchInput, search, setListState]);
+  const setSelectedFolder = React.useCallback(
+    (id) => setListState({ folder: id ?? "" }),
+    [setListState]
+  );
   const [dragging, setDragging] = React.useState(false);
   const fileInputRef = React.useRef(null);
   const { mutateAsync: uploadAsset, isPending: isUploading } = useMedia.useUploadAsset();
   const { mutateAsync: deleteAsset } = useMedia.useDeleteAsset();
-  const { apiBaseURL = "" } = overrides;
+  const { can: canCreateAsset } = context.useCan({
+    resource: "media:asset",
+    action: "create"
+  });
   const handleUpload = React.useCallback(
     async (files) => {
+      if (!canCreateAsset) return;
       const arr = Array.from(files);
       for (const file of arr) {
         try {
           await uploadAsset({ file, folderId: selectedFolder ?? void 0 });
-          sonner.toast.success(`Uploaded ${file.name}`);
+          notify.success(
+            t("media.toasts.uploadSuccess", "Uploaded {{filename}}", {
+              filename: file.name
+            })
+          );
         } catch (err) {
-          sonner.toast.error(err instanceof Error ? err.message : "Upload failed");
+          notify.error(
+            err instanceof Error ? err.message : t("media.toasts.uploadError", "Upload failed")
+          );
         }
       }
     },
-    [selectedFolder, uploadAsset]
+    [canCreateAsset, notify, selectedFolder, t, uploadAsset]
   );
   const handleDelete = async (id) => {
-    if (!confirm("Delete this asset?")) return;
+    if (!confirm(t("media.assets.deleteConfirm", "Delete this asset?"))) return;
     try {
       await deleteAsset(id);
-      sonner.toast.success("Deleted");
+      notify.success(t("media.toasts.deleteSuccess", "Asset deleted"));
     } catch (err) {
-      sonner.toast.error(err instanceof Error ? err.message : "Delete failed");
+      notify.error(
+        err instanceof Error ? err.message : t("media.toasts.deleteError", "Delete failed")
+      );
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex h-[calc(100dvh-4rem)] flex-col overflow-hidden md:flex-row", children: [
@@ -68,17 +100,19 @@ function LibraryPage() {
           dragging && "ring-2 ring-inset ring-ring"
         ),
         onDragOver: (e) => {
+          if (!canCreateAsset) return;
           e.preventDefault();
           setDragging(true);
         },
         onDragLeave: () => setDragging(false),
         onDrop: (e) => {
+          if (!canCreateAsset) return;
           e.preventDefault();
           setDragging(false);
           void handleUpload(e.dataTransfer.files);
         },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-end", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(context.CanAccess, { resource: "media:asset", action: "create", children: [
             /* @__PURE__ */ jsxRuntime.jsxs(
               button.Button,
               {
@@ -88,7 +122,7 @@ function LibraryPage() {
                 className: "w-full sm:w-auto",
                 children: [
                   isUploading ? /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Loader2, { className: "mr-2 size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "mr-2 size-3.5" }),
-                  "Upload"
+                  t("media.actions.upload", "Upload")
                 ]
               }
             ),
@@ -102,18 +136,23 @@ function LibraryPage() {
                 onChange: (e) => e.target.files && handleUpload(e.target.files)
               }
             )
-          ] }),
-          dragging && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border-2 border-dashed border-ring p-8 text-center", children: [
+          ] }) }),
+          dragging && canCreateAsset && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border-2 border-dashed border-ring p-8 text-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.Upload, { className: "mx-auto mb-2 size-10 text-ring" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: "Drop files to upload" })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: t("media.upload.dropFiles", "Drop files to upload") })
           ] }) }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 min-h-0 p-3 sm:p-4", children: /* @__PURE__ */ jsxRuntime.jsx(
             browseTab.BrowseTab,
             {
               folderId: selectedFolder,
+              search: searchInput,
+              searchQuery: search,
+              onSearchChange: setSearchInput,
               onDelete: handleDelete,
-              apiBaseURL,
-              emptyMessage: "No files yet. Drag & drop or click Upload."
+              emptyMessage: t(
+                "media.assets.emptyLibrary",
+                "No files yet. Drag & drop or click Upload."
+              )
             }
           ) })
         ]

package/dist/packages/stack/src/plugins/media/client/components/pages/library-page.internal.mjs

@@ -1,17 +1,19 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useRef, useCallback } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import { useUploadAsset, useDeleteAsset } from '../../hooks/use-media.mjs';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { Loader2, Upload } from 'lucide-react';
 import { cn } from '../../../../../../../ui/src/lib/utils.mjs';
-import { toast } from 'sonner';
-import { usePluginOverrides } from '@btst/stack/context';
+import { useTranslate, useNotify, usePluginOverrides, useCan, CanAccess } from '@btst/stack/context';
+import { useListState } from '@btst/stack/client';
 import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
 import { BrowseTab } from '../media-picker/browse-tab.mjs';
 import { FolderTree } from '../media-picker/folder-tree.mjs';
 
 function LibraryPage() {
+  const t = useTranslate();
+  const notify = useNotify();
   const overrides = usePluginOverrides("media", {});
   useRouteLifecycle({
     routeName: "library",
@@ -19,41 +21,71 @@ function LibraryPage() {
       path: "/media",
       isSSR: typeof window === "undefined"
     },
-    overrides,
-    beforeRenderHook: (overrides2, context) => {
-      if (overrides2.onBeforeLibraryPageRendered) {
-        return overrides2.onBeforeLibraryPageRendered(context);
-      }
-      return true;
-    }
+    overrides
   });
-  const [selectedFolder, setSelectedFolder] = useState(null);
+  const [{ folder, q: search }, setListState] = useListState("media-library", {
+    folder: { type: "string", default: "" },
+    q: { type: "string", default: "", history: "replace" }
+  });
+  const selectedFolder = folder || null;
+  const [searchInput, setSearchInput] = useState(search);
+  const lastSyncedSearch = useRef(search);
+  useEffect(() => {
+    if (search !== lastSyncedSearch.current) {
+      lastSyncedSearch.current = search;
+      setSearchInput(search);
+    }
+  }, [search]);
+  useEffect(() => {
+    if (searchInput === search) return;
+    const timeout = setTimeout(() => {
+      lastSyncedSearch.current = searchInput;
+      setListState({ q: searchInput });
+    }, 300);
+    return () => clearTimeout(timeout);
+  }, [searchInput, search, setListState]);
+  const setSelectedFolder = useCallback(
+    (id) => setListState({ folder: id ?? "" }),
+    [setListState]
+  );
   const [dragging, setDragging] = useState(false);
   const fileInputRef = useRef(null);
   const { mutateAsync: uploadAsset, isPending: isUploading } = useUploadAsset();
   const { mutateAsync: deleteAsset } = useDeleteAsset();
-  const { apiBaseURL = "" } = overrides;
+  const { can: canCreateAsset } = useCan({
+    resource: "media:asset",
+    action: "create"
+  });
   const handleUpload = useCallback(
     async (files) => {
+      if (!canCreateAsset) return;
       const arr = Array.from(files);
       for (const file of arr) {
         try {
           await uploadAsset({ file, folderId: selectedFolder ?? void 0 });
-          toast.success(`Uploaded ${file.name}`);
+          notify.success(
+            t("media.toasts.uploadSuccess", "Uploaded {{filename}}", {
+              filename: file.name
+            })
+          );
         } catch (err) {
-          toast.error(err instanceof Error ? err.message : "Upload failed");
+          notify.error(
+            err instanceof Error ? err.message : t("media.toasts.uploadError", "Upload failed")
+          );
         }
       }
     },
-    [selectedFolder, uploadAsset]
+    [canCreateAsset, notify, selectedFolder, t, uploadAsset]
   );
   const handleDelete = async (id) => {
-    if (!confirm("Delete this asset?")) return;
+    if (!confirm(t("media.assets.deleteConfirm", "Delete this asset?"))) return;
     try {
       await deleteAsset(id);
-      toast.success("Deleted");
+      notify.success(t("media.toasts.deleteSuccess", "Asset deleted"));
     } catch (err) {
-      toast.error(err instanceof Error ? err.message : "Delete failed");
+      notify.error(
+        err instanceof Error ? err.message : t("media.toasts.deleteError", "Delete failed")
+      );
     }
   };
   return /* @__PURE__ */ jsxs("div", { className: "flex h-[calc(100dvh-4rem)] flex-col overflow-hidden md:flex-row", children: [
@@ -66,17 +98,19 @@ function LibraryPage() {
           dragging && "ring-2 ring-inset ring-ring"
         ),
         onDragOver: (e) => {
+          if (!canCreateAsset) return;
           e.preventDefault();
           setDragging(true);
         },
         onDragLeave: () => setDragging(false),
         onDrop: (e) => {
+          if (!canCreateAsset) return;
           e.preventDefault();
           setDragging(false);
           void handleUpload(e.dataTransfer.files);
         },
         children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-end", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 border-b px-4 py-3 sm:flex-row sm:items-center sm:justify-end", children: /* @__PURE__ */ jsxs(CanAccess, { resource: "media:asset", action: "create", children: [
             /* @__PURE__ */ jsxs(
               Button,
               {
@@ -86,7 +120,7 @@ function LibraryPage() {
                 className: "w-full sm:w-auto",
                 children: [
                   isUploading ? /* @__PURE__ */ jsx(Loader2, { className: "mr-2 size-3.5 animate-spin" }) : /* @__PURE__ */ jsx(Upload, { className: "mr-2 size-3.5" }),
-                  "Upload"
+                  t("media.actions.upload", "Upload")
                 ]
               }
             ),
@@ -100,18 +134,23 @@ function LibraryPage() {
                 onChange: (e) => e.target.files && handleUpload(e.target.files)
               }
             )
-          ] }),
-          dragging && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-ring p-8 text-center", children: [
+          ] }) }),
+          dragging && canCreateAsset && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/80", children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border-2 border-dashed border-ring p-8 text-center", children: [
             /* @__PURE__ */ jsx(Upload, { className: "mx-auto mb-2 size-10 text-ring" }),
-            /* @__PURE__ */ jsx("p", { className: "font-medium", children: "Drop files to upload" })
+            /* @__PURE__ */ jsx("p", { className: "font-medium", children: t("media.upload.dropFiles", "Drop files to upload") })
           ] }) }),
           /* @__PURE__ */ jsx("div", { className: "flex-1 min-h-0 p-3 sm:p-4", children: /* @__PURE__ */ jsx(
             BrowseTab,
             {
               folderId: selectedFolder,
+              search: searchInput,
+              searchQuery: search,
+              onSearchChange: setSearchInput,
               onDelete: handleDelete,
-              apiBaseURL,
-              emptyMessage: "No files yet. Drag & drop or click Upload."
+              emptyMessage: t(
+                "media.assets.emptyLibrary",
+                "No files yet. Drag & drop or click Upload."
+              )
             }
           ) })
         ]

package/dist/packages/stack/src/plugins/media/client/components/pages/library-page.mjs

@@ -21,6 +21,7 @@ function LibraryPageComponent() {
     ComposedRoute,
     {
       path: "/media",
+      permission: { resource: "media:asset", action: "read" },
       PageComponent: LibraryPage,
       ErrorComponent: LibraryError,
       LoadingComponent: LibraryLoading,

package/dist/packages/stack/src/plugins/media/client/hooks/media-resource.cjs

@@ -0,0 +1,12 @@
+"use client";
+'use strict';
+
+const hooks = require('@btst/stack/plugins/client/hooks');
+const plugins_media_queryKeys = require('../../../../../../../plugins/media/query-keys.cjs');
+
+const media = hooks.createResource({
+  plugin: "media",
+  resources: plugins_media_queryKeys.mediaResources
+});
+
+exports.media = media;

package/dist/packages/stack/src/plugins/media/client/hooks/media-resource.mjs

@@ -0,0 +1,10 @@
+"use client";
+import { createResource } from '@btst/stack/plugins/client/hooks';
+import { mediaResources } from '../../../../../../../plugins/media/query-keys.mjs';
+
+const media = createResource({
+  plugin: "media",
+  resources: mediaResources
+});
+
+export { media };