convex-cms 0.0.5-alpha.4 → 0.0.5-alpha.5

package/admin-dist/server/_ssr/{media-qv5IAsMZ.mjs → media-CD2_NUMw.mjs}

@@ -1,18 +1,19 @@
-import { r as reactExports, j as jsxRuntimeExports } from "../_chunks/_libs/react.mjs";
-import { d as useNavigate } from "../_chunks/_libs/@tanstack/react-router.mjs";
-import { u as useSettingsConfig, a as api, c as cn, D as DropdownMenu, d as DropdownMenuTrigger, e as DropdownMenuContent, f as DropdownMenuItem, g as DropdownMenuSeparator, B as Button } from "./router-nSVkxb6Y.mjs";
-import { T as Tabs, a as TabsList, b as TabsTrigger, U as UploadDropzone } from "./tabs-DYXEi9kq.mjs";
-import { C as CmsPageHeader } from "./CmsPageHeader-DHRrdOZa.mjs";
-import { C as CmsToolbar } from "./CmsToolbar-zTE45z2q.mjs";
-import { I as Input, a as Checkbox, C as CmsEmptyState, D as Dialog, d as DialogContent, e as DialogHeader, f as DialogTitle, g as DialogFooter, b as CmsConfirmDialog, c as CmsDialog } from "./CmsEmptyState-fbnGt3LD.mjs";
-import { B as Badge, C as CmsButton } from "./CmsButton-DOiTVKQq.mjs";
-import { T as TaxonomyFilter } from "./TaxonomyFilter-XAtaJC2z.mjs";
-import { L as Label } from "./label-qn2Afwl4.mjs";
-import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem } from "./select-BKQlQScw.mjs";
+import { j as jsxRuntimeExports, r as reactExports } from "../_chunks/_libs/react.mjs";
+import { h as useSettingsConfig, a as api, c as cn, D as DropdownMenu, d as DropdownMenuTrigger, e as DropdownMenuContent, f as DropdownMenuItem, g as DropdownMenuSeparator, B as Button } from "./router-x6Ab8T4s.mjs";
+import { B as Badge, C as CmsButton } from "./CmsButton-DbzfJru_.mjs";
+import { T as Tabs, a as TabsList, b as TabsTrigger, U as UploadDropzone } from "./tabs-4FWM0sn8.mjs";
+import { C as CmsPageHeader } from "./CmsPageHeader-ClNPU7Up.mjs";
+import { C as CmsToolbar } from "./CmsToolbar-BKv1nL6u.mjs";
+import { I as Input, a as Checkbox, C as CmsEmptyState, D as Dialog, d as DialogContent, e as DialogHeader, f as DialogTitle, g as DialogFooter, b as CmsConfirmDialog, c as CmsDialog } from "./CmsEmptyState-CuvcXr3Z.mjs";
+import { T as TaxonomyFilter } from "./TaxonomyFilter-BPQ57Mwk.mjs";
+import { L as Label } from "./label-PblVvdRv.mjs";
+import { S as Select, a as SelectTrigger, b as SelectValue, c as SelectContent, d as SelectItem } from "./select-CrfEkFJw.mjs";
 import { a as VisuallyHidden } from "../_chunks/_libs/@radix-ui/react-visually-hidden.mjs";
-import { T as Textarea } from "./textarea-CI0Jqx2x.mjs";
+import { T as Textarea } from "./textarea-CZVaroMc.mjs";
+import { u as useTanStackNavigation } from "./tanstack-adapter-D3ZcKtbY.mjs";
 import { u as useQuery, d as useMutation } from "../_libs/convex.mjs";
-import { I as Image, w as Trash2, H as House, a1 as ChevronLeft, a2 as FolderPlus, a3 as Upload, N as Search, X, o as Folder, R as RotateCcw, a4 as Ellipsis, W as Pencil, a5 as FolderInput, a6 as EllipsisVertical, h as Eye, a7 as Download, a8 as Link2, a9 as File, J as FileText, aa as Music, ab as Video, ac as Copy, f as ChevronRight, V as Tag, L as LoaderCircle, Q as Plus } from "../_libs/lucide-react.mjs";
+import { I as Image, w as Trash2, H as House, a2 as ChevronLeft, a3 as FolderPlus, a4 as Upload, N as Search, X, o as Folder, R as RotateCcw, a5 as Ellipsis, W as Pencil, a6 as FolderInput, a7 as EllipsisVertical, h as Eye, a8 as Download, a9 as Link2, aa as File, J as FileText, ab as Music, ac as Video, ad as Copy, f as ChevronRight, V as Tag, L as LoaderCircle, Q as Plus } from "../_libs/lucide-react.mjs";
+import "../_chunks/_libs/@tanstack/react-router.mjs";
 import "../_libs/tiny-warning.mjs";
 import "../_chunks/_libs/@tanstack/router-core.mjs";
 import "../_libs/cookie-es.mjs";
@@ -33,14 +34,17 @@ import "../_chunks/_libs/@tanstack/react-store.mjs";
 import "../_libs/use-sync-external-store.mjs";
 import "../_libs/clsx.mjs";
 import "../_libs/tailwind-merge.mjs";
-import "../_chunks/_libs/@radix-ui/react-slot.mjs";
-import "../_chunks/_libs/@radix-ui/react-compose-refs.mjs";
-import "../_chunks/_libs/@radix-ui/react-dropdown-menu.mjs";
+import "../_chunks/_libs/@radix-ui/react-collapsible.mjs";
 import "../_chunks/_libs/@radix-ui/primitive.mjs";
 import "../_chunks/_libs/@radix-ui/react-context.mjs";
 import "../_chunks/_libs/@radix-ui/react-use-controllable-state.mjs";
 import "../_chunks/_libs/@radix-ui/react-use-layout-effect.mjs";
+import "../_chunks/_libs/@radix-ui/react-compose-refs.mjs";
 import "../_chunks/_libs/@radix-ui/react-primitive.mjs";
+import "../_chunks/_libs/@radix-ui/react-slot.mjs";
+import "../_chunks/_libs/@radix-ui/react-presence.mjs";
+import "../_chunks/_libs/@radix-ui/react-id.mjs";
+import "../_chunks/_libs/@radix-ui/react-dropdown-menu.mjs";
 import "../_chunks/_libs/@radix-ui/react-menu.mjs";
 import "../_chunks/_libs/@radix-ui/react-collection.mjs";
 import "../_chunks/_libs/@radix-ui/react-direction.mjs";
@@ -57,9 +61,7 @@ import "../_chunks/_libs/@floating-ui/utils.mjs";
 import "../_chunks/_libs/@radix-ui/react-arrow.mjs";
 import "../_chunks/_libs/@radix-ui/react-use-size.mjs";
 import "../_chunks/_libs/@radix-ui/react-portal.mjs";
-import "../_chunks/_libs/@radix-ui/react-presence.mjs";
 import "../_chunks/_libs/@radix-ui/react-roving-focus.mjs";
-import "../_chunks/_libs/@radix-ui/react-id.mjs";
 import "../_libs/aria-hidden.mjs";
 import "../_libs/react-remove-scroll.mjs";
 import "../_libs/tslib.mjs";
@@ -85,7 +87,7 @@ import "../_chunks/_libs/@radix-ui/react-tabs.mjs";
 import "../_chunks/_libs/@radix-ui/react-dialog.mjs";
 import "../_chunks/_libs/@radix-ui/react-checkbox.mjs";
 import "../_chunks/_libs/@radix-ui/react-use-previous.mjs";
-import "./command-C0Di14--.mjs";
+import "./command-CEf8YBxY.mjs";
 import "../_libs/cmdk.mjs";
 import "../_chunks/_libs/@radix-ui/react-label.mjs";
 import "../_chunks/_libs/@radix-ui/react-select.mjs";
@@ -397,20 +399,20 @@ function MediaTaxonomyPicker({
   const inputRef = reactExports.useRef(null);
   const suggestionsRef = reactExports.useRef(null);
   const containerRef = reactExports.useRef(null);
-  const currentTerms = useQuery(api.taxonomies.getTermsByMedia, {
+  const currentTerms = useQuery(api.admin.getTermsByMedia, {
     mediaId,
     taxonomyId
   });
   const selectedTermIds = currentTerms?.map((t) => t._id) ?? [];
-  const suggestionsResult = useQuery(api.taxonomies.suggestTerms, {
+  const suggestionsResult = useQuery(api.admin.suggestTerms, {
     taxonomyId,
     query: inputValue,
     limit: 10,
     excludeIds: selectedTermIds
   });
   const suggestions = suggestionsResult ?? [];
-  const setMediaTermsMutation = useMutation(api.taxonomies.setMediaTerms);
-  const createTermMutation = useMutation(api.taxonomies.createTermAndAddToMedia);
+  const setMediaTermsMutation = useMutation(api.admin.setMediaTerms);
+  const createTermMutation = useMutation(api.admin.createTermAndAddToMedia);
   reactExports.useEffect(() => {
     function handleClickOutside(event) {
       if (containerRef.current && !containerRef.current.contains(event.target)) {
@@ -661,8 +663,8 @@ function MediaAssetEditDialog({
   const [tagsInput, setTagsInput] = reactExports.useState("");
   const [isSaving, setIsSaving] = reactExports.useState(false);
   const [error, setError] = reactExports.useState("");
-  const updateAsset = useMutation(api.media.updateAsset);
-  const taxonomiesResult = useQuery(api.taxonomies.list, {
+  const updateAsset = useMutation(api.admin.updateMediaAsset);
+  const taxonomiesResult = useQuery(api.admin.listTaxonomies, {
     isActive: true,
     paginationOpts: { numItems: 50, cursor: null }
   });
@@ -841,7 +843,7 @@ function MediaFolderEditDialog({
   const [description, setDescription] = reactExports.useState("");
   const [isSaving, setIsSaving] = reactExports.useState(false);
   const [error, setError] = reactExports.useState("");
-  const updateFolder = useMutation(api.media.updateFolder);
+  const updateFolder = useMutation(api.admin.updateMediaFolder);
   reactExports.useEffect(() => {
     if (folder) {
       setName(folder.name);
@@ -1150,8 +1152,8 @@ function MediaMoveModal({
   );
   const [isMoving, setIsMoving] = reactExports.useState(false);
   const [error, setError] = reactExports.useState("");
-  const folderTree = useQuery(api.media.getFolderTree, {});
-  const moveAssets = useMutation(api.media.moveAssets);
+  const folderTree = useQuery(api.admin.getMediaFolderTree, {});
+  const moveAssets = useMutation(api.admin.moveMediaAssets);
   const sortedFolders = reactExports.useMemo(() => {
     if (!folderTree) return [];
     const buildTree = (parentId, depth) => {
@@ -1276,9 +1278,7 @@ function formatDate(timestamp) {
   });
 }
 function getMediaTypeIcon(type, className = "size-6") {
-  const iconProps = {
-    className
-  };
+  const iconProps = { className };
   switch (type) {
     case "image":
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { ...iconProps });
@@ -1302,19 +1302,15 @@ function getMediaTypeFromMimeType(mimeType) {
   }
   return "other";
 }
-function MediaPage() {
-  const {
-    settings
-  } = useSettingsConfig();
-  const navigate = useNavigate();
+function MediaPage({ api: api2, navigation, settings }) {
   reactExports.useEffect(() => {
     if (settings && !settings.features.mediaManagement) {
-      navigate({
-        to: "/"
-      });
+      navigation.navigate("/");
     }
-  }, [settings, navigate]);
-  const [currentFolderId, setCurrentFolderId] = reactExports.useState(void 0);
+  }, [settings, navigation]);
+  const [currentFolderId, setCurrentFolderId] = reactExports.useState(
+    void 0
+  );
   const [searchQuery, setSearchQuery] = reactExports.useState("");
   const [typeFilter, setTypeFilter] = reactExports.useState("");
   const [selectedTermIds, setSelectedTermIds] = reactExports.useState([]);
@@ -1326,8 +1322,12 @@ function MediaPage() {
   const [isCreatingFolder, setIsCreatingFolder] = reactExports.useState(false);
   const [folderError, setFolderError] = reactExports.useState("");
   const [previewIndex, setPreviewIndex] = reactExports.useState(null);
-  const [editingAsset, setEditingAsset] = reactExports.useState(null);
-  const [editingFolder, setEditingFolder] = reactExports.useState(null);
+  const [editingAsset, setEditingAsset] = reactExports.useState(
+    null
+  );
+  const [editingFolder, setEditingFolder] = reactExports.useState(
+    null
+  );
   const [deleteTarget, setDeleteTarget] = reactExports.useState(null);
   const [isDeleting, setIsDeleting] = reactExports.useState(false);
   const [showMoveModal, setShowMoveModal] = reactExports.useState(false);
@@ -1339,30 +1339,34 @@ function MediaPage() {
   const [showPermanentDeleteConfirm, setShowPermanentDeleteConfirm] = reactExports.useState(false);
   const [permanentDeleteTarget, setPermanentDeleteTarget] = reactExports.useState(null);
   const isTrashView = activeView === "trash";
-  const assetsResult = useQuery(api.media.listAssets, {
+  const assetsResult = useQuery(api2.listMediaAssets, {
     folderId: isTrashView ? void 0 : currentFolderId,
     type: typeFilter || void 0,
     search: searchQuery || void 0,
     deletedOnly: isTrashView ? true : void 0,
-    paginationOpts: {
-      numItems: 100,
-      cursor: null
-    }
+    paginationOpts: { numItems: 100, cursor: null }
   });
-  const trashCount = useQuery(api.media.getTrashCount, {});
-  const mediaByTermResult0 = useQuery(api.taxonomies.getMediaByTerm, selectedTermIds[0] ? {
-    termId: selectedTermIds[0]
-  } : "skip");
-  const mediaByTermResult1 = useQuery(api.taxonomies.getMediaByTerm, selectedTermIds[1] ? {
-    termId: selectedTermIds[1]
-  } : "skip");
-  const mediaByTermResult2 = useQuery(api.taxonomies.getMediaByTerm, selectedTermIds[2] ? {
-    termId: selectedTermIds[2]
-  } : "skip");
+  const trashCount = useQuery(api2.getMediaTrashCount, {});
+  const mediaByTermResult0 = useQuery(
+    api2.getMediaByTerm,
+    selectedTermIds[0] ? { termId: selectedTermIds[0] } : "skip"
+  );
+  const mediaByTermResult1 = useQuery(
+    api2.getMediaByTerm,
+    selectedTermIds[1] ? { termId: selectedTermIds[1] } : "skip"
+  );
+  const mediaByTermResult2 = useQuery(
+    api2.getMediaByTerm,
+    selectedTermIds[2] ? { termId: selectedTermIds[2] } : "skip"
+  );
   const termFilteredMediaIds = reactExports.useMemo(() => {
     if (selectedTermIds.length === 0) return null;
     const ids = /* @__PURE__ */ new Set();
-    const results = [mediaByTermResult0, mediaByTermResult1, mediaByTermResult2];
+    const results = [
+      mediaByTermResult0,
+      mediaByTermResult1,
+      mediaByTermResult2
+    ];
     for (let i = 0; i < selectedTermIds.length && i < 3; i++) {
       const result = results[i];
       if (result?.page) {
@@ -1372,26 +1376,36 @@ function MediaPage() {
       }
     }
     return ids;
-  }, [selectedTermIds, mediaByTermResult0, mediaByTermResult1, mediaByTermResult2]);
-  const folders = useQuery(api.media.listFolders, {
+  }, [
+    selectedTermIds,
+    mediaByTermResult0,
+    mediaByTermResult1,
+    mediaByTermResult2
+  ]);
+  const folders = useQuery(api2.listMediaFolders, {
     parentId: isTrashView ? void 0 : currentFolderId,
     deletedOnly: isTrashView || void 0
   });
-  const currentFolder = useQuery(api.media.getFolder, currentFolderId ? {
-    id: currentFolderId
-  } : "skip");
-  const folderTree = useQuery(api.media.getFolderTree, {});
-  const createFolder = useMutation(api.media.createFolder);
-  const deleteAsset = useMutation(api.media.deleteAsset);
-  const deleteFolder = useMutation(api.media.deleteFolder);
-  const restoreAsset = useMutation(api.media.restoreAsset);
-  const restoreFolder = useMutation(api.media.restoreFolder);
-  const permanentDeleteAsset = useMutation(api.media.permanentDeleteAsset);
-  const bulkPermanentDeleteAssets = useMutation(api.media.bulkPermanentDeleteAssets);
+  const currentFolder = useQuery(
+    api2.getMediaFolder,
+    currentFolderId ? { id: currentFolderId } : "skip"
+  );
+  const folderTree = useQuery(api2.getMediaFolderTree, {});
+  const createFolder = useMutation(api2.createMediaFolder);
+  const deleteAsset = useMutation(api2.deleteMediaAsset);
+  const deleteFolder = useMutation(api2.deleteMediaFolder);
+  const restoreAsset = useMutation(api2.restoreMediaAsset);
+  const restoreFolder = useMutation(api2.restoreMediaFolder);
+  const permanentDeleteAsset = useMutation(api2.permanentDeleteMediaAsset);
+  const bulkPermanentDeleteAssets = useMutation(
+    api2.bulkPermanentDeleteMediaAssets
+  );
   const breadcrumbPath = reactExports.useMemo(() => {
     if (!currentFolderId || !folderTree) return [];
     const path = [];
-    let folder = folderTree.find((f) => f._id === currentFolderId);
+    let folder = folderTree.find(
+      (f) => f._id === currentFolderId
+    );
     while (folder) {
       path.unshift(folder);
       const parentId = folder.parentId;
@@ -1437,16 +1451,19 @@ function MediaPage() {
     setSelectedAssets(/* @__PURE__ */ new Set());
     setIsSelectionMode(false);
   }, []);
-  const handleAssetClick = reactExports.useCallback((assetId) => {
-    if (isSelectionMode) {
-      handleAssetSelect(assetId);
-    } else {
-      const index = assetsResult?.page?.findIndex((a) => a._id === assetId) ?? -1;
-      if (index !== -1) {
-        setPreviewIndex(index);
+  const handleAssetClick = reactExports.useCallback(
+    (assetId) => {
+      if (isSelectionMode) {
+        handleAssetSelect(assetId);
+      } else {
+        const index = assetsResult?.page?.findIndex((a) => a._id === assetId) ?? -1;
+        if (index !== -1) {
+          setPreviewIndex(index);
+        }
       }
-    }
-  }, [isSelectionMode, handleAssetSelect, assetsResult?.page]);
+    },
+    [isSelectionMode, handleAssetSelect, assetsResult?.page]
+  );
   const handlePreviewNavigate = reactExports.useCallback((index) => {
     setPreviewIndex(index);
   }, []);
@@ -1455,13 +1472,9 @@ function MediaPage() {
     setIsDeleting(true);
     try {
       if (deleteTarget.type === "asset") {
-        await deleteAsset({
-          id: deleteTarget.id
-        });
+        await deleteAsset({ id: deleteTarget.id });
       } else {
-        await deleteFolder({
-          id: deleteTarget.id
-        });
+        await deleteFolder({ id: deleteTarget.id });
       }
       setDeleteTarget(null);
     } catch (err) {
@@ -1474,9 +1487,9 @@ function MediaPage() {
     if (selectedAssets.size === 0) return;
     setIsBulkDeleting(true);
     try {
-      const deletePromises = Array.from(selectedAssets).map((id) => deleteAsset({
-        id
-      }));
+      const deletePromises = Array.from(selectedAssets).map(
+        (id) => deleteAsset({ id })
+      );
       await Promise.all(deletePromises);
       setSelectedAssets(/* @__PURE__ */ new Set());
       setIsSelectionMode(false);
@@ -1491,25 +1504,26 @@ function MediaPage() {
     setSelectedAssets(/* @__PURE__ */ new Set());
     setIsSelectionMode(false);
   }, []);
-  const handleRestore = reactExports.useCallback(async (assetId) => {
-    setIsRestoring(true);
-    try {
-      await restoreAsset({
-        id: assetId
-      });
-    } catch (err) {
-      console.error("Restore failed:", err);
-    } finally {
-      setIsRestoring(false);
-    }
-  }, [restoreAsset]);
+  const handleRestore = reactExports.useCallback(
+    async (assetId) => {
+      setIsRestoring(true);
+      try {
+        await restoreAsset({ id: assetId });
+      } catch (err) {
+        console.error("Restore failed:", err);
+      } finally {
+        setIsRestoring(false);
+      }
+    },
+    [restoreAsset]
+  );
   const handleBulkRestore = reactExports.useCallback(async () => {
     if (selectedAssets.size === 0) return;
     setIsRestoring(true);
     try {
-      const restorePromises = Array.from(selectedAssets).map((id) => restoreAsset({
-        id
-      }));
+      const restorePromises = Array.from(selectedAssets).map(
+        (id) => restoreAsset({ id })
+      );
       await Promise.all(restorePromises);
       setSelectedAssets(/* @__PURE__ */ new Set());
       setIsSelectionMode(false);
@@ -1519,32 +1533,29 @@ function MediaPage() {
       setIsRestoring(false);
     }
   }, [selectedAssets, restoreAsset]);
-  const handleRestoreFolder = reactExports.useCallback(async (folderId) => {
-    setIsRestoring(true);
-    try {
-      await restoreFolder({
-        id: folderId
-      });
-    } catch (err) {
-      console.error("Restore folder failed:", err);
-    } finally {
-      setIsRestoring(false);
-    }
-  }, [restoreFolder]);
+  const handleRestoreFolder = reactExports.useCallback(
+    async (folderId) => {
+      setIsRestoring(true);
+      try {
+        await restoreFolder({ id: folderId });
+      } catch (err) {
+        console.error("Restore folder failed:", err);
+      } finally {
+        setIsRestoring(false);
+      }
+    },
+    [restoreFolder]
+  );
   const handlePermanentDelete = reactExports.useCallback(async () => {
     if (!permanentDeleteTarget) return;
     setIsPermanentlyDeleting(true);
     try {
       if (permanentDeleteTarget === "bulk") {
-        await bulkPermanentDeleteAssets({
-          ids: Array.from(selectedAssets)
-        });
+        await bulkPermanentDeleteAssets({ ids: Array.from(selectedAssets) });
         setSelectedAssets(/* @__PURE__ */ new Set());
         setIsSelectionMode(false);
       } else {
-        await permanentDeleteAsset({
-          id: permanentDeleteTarget
-        });
+        await permanentDeleteAsset({ id: permanentDeleteTarget });
       }
       setShowPermanentDeleteConfirm(false);
       setPermanentDeleteTarget(null);
@@ -1553,7 +1564,12 @@ function MediaPage() {
     } finally {
       setIsPermanentlyDeleting(false);
     }
-  }, [permanentDeleteTarget, permanentDeleteAsset, bulkPermanentDeleteAssets, selectedAssets]);
+  }, [
+    permanentDeleteTarget,
+    permanentDeleteAsset,
+    bulkPermanentDeleteAssets,
+    selectedAssets
+  ]);
   const handleCreateFolder = reactExports.useCallback(async () => {
     if (!newFolderName.trim()) {
       setFolderError("Folder name is required");
@@ -1569,7 +1585,9 @@ function MediaPage() {
       setShowNewFolderModal(false);
       setNewFolderName("");
     } catch (error) {
-      setFolderError(error instanceof Error ? error.message : "Failed to create folder");
+      setFolderError(
+        error instanceof Error ? error.message : "Failed to create folder"
+      );
     } finally {
       setIsCreatingFolder(false);
     }
@@ -1586,101 +1604,212 @@ function MediaPage() {
     return assets.filter((asset) => termFilteredMediaIds.has(asset._id));
   }, [assetsResult?.page, termFilteredMediaIds]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6 p-6", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CmsPageHeader, { title: "Media Library", description: "Upload, organize, and manage media assets for your content." }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Tabs, { value: activeView, onValueChange: (v) => handleViewChange(v), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "library", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { className: "mr-1.5 size-4" }),
-        "Library"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "trash", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "mr-1.5 size-4" }),
-        "Trash",
-        trashCount && trashCount.total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "secondary", className: "ml-1.5", children: trashCount.total })
-      ] })
-    ] }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CmsPageHeader,
+      {
+        title: "Media Library",
+        description: "Upload, organize, and manage media assets for your content."
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Tabs,
+      {
+        value: activeView,
+        onValueChange: (v) => handleViewChange(v),
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "library", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { className: "mr-1.5 size-4" }),
+            "Library"
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsTrigger, { value: "trash", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "mr-1.5 size-4" }),
+            "Trash",
+            trashCount && trashCount.total > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "secondary", className: "ml-1.5", children: trashCount.total })
+          ] })
+        ] })
+      }
+    ),
     !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsxs("nav", { className: "flex items-center gap-1", "aria-label": "Folder navigation", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("button", { className: cn("flex items-center gap-1.5 rounded-md px-2 py-1 text-sm transition-colors", !currentFolderId ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"), onClick: handleNavigateToRoot, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(House, { className: "size-4" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "All Files" })
-      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "button",
+        {
+          className: cn(
+            "flex items-center gap-1.5 rounded-md px-2 py-1 text-sm transition-colors",
+            !currentFolderId ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+          ),
+          onClick: handleNavigateToRoot,
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(House, { className: "size-4" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "All Files" })
+          ]
+        }
+      ),
       breadcrumbPath.map((folder, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "mx-1 text-muted-foreground", children: "/" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: cn("rounded-md px-2 py-1 text-sm transition-colors", index === breadcrumbPath.length - 1 ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"), onClick: () => handleFolderClick(folder._id), children: folder.name })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            className: cn(
+              "rounded-md px-2 py-1 text-sm transition-colors",
+              index === breadcrumbPath.length - 1 ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-muted hover:text-foreground"
+            ),
+            onClick: () => handleFolderClick(folder._id),
+            children: folder.name
+          }
+        )
       ] }, folder._id))
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CmsToolbar, { left: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { type: "search", placeholder: "Search files...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), className: "w-64 pl-9" }),
-        searchQuery && /* @__PURE__ */ jsxRuntimeExports.jsx("button", { className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-muted", onClick: () => setSearchQuery(""), "aria-label": "Clear search", children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4 text-muted-foreground" }) })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: typeFilter || "all", onValueChange: (v) => setTypeFilter(v === "all" ? "" : v), children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-36", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All Types" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "all", children: "All Types" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "image", children: "Images" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "video", children: "Videos" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "audio", children: "Audio" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "document", children: "Documents" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "other", children: "Other" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(TaxonomyFilter, { selectedTermIds, onChange: setSelectedTermIds, placeholder: "Tags" }),
-      assetsResult?.page && assetsResult.page.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isSelectionMode, onCheckedChange: (checked) => {
-          setIsSelectionMode(checked);
-          if (!checked) {
-            setSelectedAssets(/* @__PURE__ */ new Set());
-          }
-        } }),
-        "Selection Mode"
-      ] })
-    ] }), right: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
-      isSelectionMode && selectedAssets.size > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground", children: [
-        selectedAssets.size,
-        " selected"
-      ] }),
-      isSelectionMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "secondary", size: "sm", onClick: handleSelectAll, children: "Select All" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "secondary", size: "sm", onClick: handleDeselectAll, children: "Clear" })
-      ] }),
-      currentFolderId && !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsxs(CmsButton, { variant: "secondary", onClick: handleNavigateUp, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "size-4" }),
-        "Up"
-      ] }),
-      !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(CmsButton, { variant: "secondary", onClick: () => setShowNewFolderModal(true), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(FolderPlus, { className: "size-4" }),
-          "New Folder"
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CmsToolbar,
+      {
+        left: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Input,
+              {
+                type: "search",
+                placeholder: "Search files...",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value),
+                className: "w-64 pl-9"
+              }
+            ),
+            searchQuery && /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "button",
+              {
+                className: "absolute right-2 top-1/2 -translate-y-1/2 rounded p-0.5 hover:bg-muted",
+                onClick: () => setSearchQuery(""),
+                "aria-label": "Clear search",
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4 text-muted-foreground" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            Select,
+            {
+              value: typeFilter || "all",
+              onValueChange: (v) => setTypeFilter(v === "all" ? "" : v),
+              children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "w-36", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All Types" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "all", children: "All Types" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "image", children: "Images" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "video", children: "Videos" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "audio", children: "Audio" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "document", children: "Documents" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "other", children: "Other" })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            TaxonomyFilter,
+            {
+              selectedTermIds,
+              onChange: setSelectedTermIds,
+              placeholder: "Tags"
+            }
+          ),
+          assetsResult?.page && assetsResult.page.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "flex cursor-pointer items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Checkbox,
+              {
+                checked: isSelectionMode,
+                onCheckedChange: (checked) => {
+                  setIsSelectionMode(checked);
+                  if (!checked) {
+                    setSelectedAssets(/* @__PURE__ */ new Set());
+                  }
+                }
+              }
+            ),
+            "Selection Mode"
+          ] })
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(CmsButton, { onClick: () => setShowUploadModal(true), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-4" }),
-          "Upload Files"
+        right: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+          isSelectionMode && selectedAssets.size > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-muted-foreground", children: [
+            selectedAssets.size,
+            " selected"
+          ] }),
+          isSelectionMode && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              CmsButton,
+              {
+                variant: "secondary",
+                size: "sm",
+                onClick: handleSelectAll,
+                children: "Select All"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              CmsButton,
+              {
+                variant: "secondary",
+                size: "sm",
+                onClick: handleDeselectAll,
+                children: "Clear"
+              }
+            )
+          ] }),
+          currentFolderId && !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsxs(CmsButton, { variant: "secondary", onClick: handleNavigateUp, children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronLeft, { className: "size-4" }),
+            "Up"
+          ] }),
+          !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              CmsButton,
+              {
+                variant: "secondary",
+                onClick: () => setShowNewFolderModal(true),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(FolderPlus, { className: "size-4" }),
+                  "New Folder"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs(CmsButton, { onClick: () => setShowUploadModal(true), children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-4" }),
+              "Upload Files"
+            ] })
+          ] })
         ] })
-      ] })
-    ] }) }),
+      }
+    ),
     isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center justify-center py-12", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-8 animate-spin rounded-full border-2 border-muted border-t-primary" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: "Loading media library..." })
     ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
       !isTrashView && folders && folders.length > 0 && !searchQuery && /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "mb-3 text-sm font-medium text-muted-foreground", children: "Folders" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-6", children: folders.map((folder) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative flex flex-col items-center gap-2 rounded-lg border bg-card p-4 text-center transition-colors hover:border-primary/50 hover:bg-muted/50 cursor-pointer", onClick: () => handleFolderClick(folder._id), children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediaFolderActions, { folder: {
-            _id: folder._id,
-            name: folder.name
-          }, onEdit: () => setEditingFolder({
-            _id: folder._id,
-            name: folder.name,
-            description: folder.description
-          }), onDelete: () => setDeleteTarget({
-            type: "folder",
-            id: folder._id,
-            name: folder.name
-          }) }) }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Folder, { className: "size-10 text-amber-500" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-sm font-medium", children: folder.name })
-        ] }, folder._id)) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-6", children: folders.map((folder) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "group relative flex cursor-pointer flex-col items-center gap-2 rounded-lg border bg-card p-4 text-center transition-colors hover:border-primary/50 hover:bg-muted/50",
+            onClick: () => handleFolderClick(folder._id),
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-2 top-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                MediaFolderActions,
+                {
+                  folder: { _id: folder._id, name: folder.name },
+                  onEdit: () => setEditingFolder({
+                    _id: folder._id,
+                    name: folder.name,
+                    description: folder.description
+                  }),
+                  onDelete: () => setDeleteTarget({
+                    type: "folder",
+                    id: folder._id,
+                    name: folder.name
+                  })
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Folder, { className: "size-10 text-amber-500" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-sm font-medium", children: folder.name })
+            ]
+          },
+          folder._id
+        )) })
       ] }),
       isTrashView && folders && folders.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs("h3", { className: "mb-3 text-sm font-medium text-muted-foreground", children: [
@@ -1688,14 +1817,30 @@ function MediaPage() {
           folders.length,
           ")"
         ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-6", children: folders.map((folder) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "group relative flex flex-col items-center gap-2 rounded-lg border border-destructive/20 bg-card p-4 text-center opacity-60", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(Folder, { className: "size-10 text-amber-500/50" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-sm font-medium", children: folder.name }),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs(CmsButton, { variant: "secondary", size: "sm", onClick: () => handleRestoreFolder(folder._id), disabled: isRestoring, children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "mr-1 size-3" }),
-            "Restore"
-          ] })
-        ] }, folder._id)) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4 md:grid-cols-6", children: folders.map((folder) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "div",
+          {
+            className: "group relative flex flex-col items-center gap-2 rounded-lg border border-destructive/20 bg-card p-4 text-center opacity-60",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Folder, { className: "size-10 text-amber-500/50" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "truncate text-sm font-medium", children: folder.name }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                CmsButton,
+                {
+                  variant: "secondary",
+                  size: "sm",
+                  onClick: () => handleRestoreFolder(folder._id),
+                  disabled: isRestoring,
+                  children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "mr-1 size-3" }),
+                    "Restore"
+                  ]
+                }
+              )
+            ]
+          },
+          folder._id
+        )) })
       ] }),
       displayedAssets.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { children: [
         !isTrashView && folders && folders.length > 0 && !searchQuery && /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "mb-3 text-sm font-medium text-muted-foreground", children: "Files" }),
@@ -1708,125 +1853,349 @@ function MediaPage() {
           const assetId = asset._id;
           const isSelected = selectedAssets.has(assetId);
           const mediaType = getMediaTypeFromMimeType(asset.mimeType);
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("group relative flex flex-col overflow-hidden rounded-lg border bg-card transition-all cursor-pointer hover:border-primary/50", isSelected && "border-primary ring-2 ring-primary/20"), onClick: () => handleAssetClick(assetId), children: [
-            isSelectionMode && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-2 top-2 z-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { checked: isSelected, onCheckedChange: () => handleAssetSelect(assetId), onClick: (e) => e.stopPropagation(), className: "bg-white/80" }) }),
-            !isSelectionMode && !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-2 top-2 z-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(MediaAssetActions, { asset: {
-              _id: asset._id,
-              name: asset.name,
-              url: asset.url
-            }, onView: () => {
-              const index = displayedAssets.findIndex((a) => a._id === asset._id);
-              if (index !== -1) setPreviewIndex(index);
-            }, onEdit: () => setEditingAsset({
-              _id: asset._id,
-              name: asset.name,
-              title: asset.title,
-              description: asset.description,
-              altText: asset.altText,
-              tags: asset.tags
-            }), onDelete: () => setDeleteTarget({
-              type: "asset",
-              id: asset._id,
-              name: asset.name
-            }) }) }),
-            !isSelectionMode && isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute right-2 top-2 z-10 flex gap-1 opacity-0 group-hover:opacity-100", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "secondary", size: "icon-sm", onClick: (e) => {
-                e.stopPropagation();
-                handleRestore(asset._id);
-              }, title: "Restore", children: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-4" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "danger", size: "icon-sm", onClick: (e) => {
-                e.stopPropagation();
-                setPermanentDeleteTarget(asset._id);
-                setShowPermanentDeleteConfirm(true);
-              }, title: "Delete Forever", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-4" }) })
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "aspect-square overflow-hidden bg-muted", children: mediaType === "image" && asset.url ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: asset.url, alt: asset.title || asset.name, className: "h-full w-full object-cover" }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-full items-center justify-center text-muted-foreground", children: getMediaTypeIcon(mediaType, "size-10") }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "truncate text-sm font-medium", title: asset.name, children: asset.name }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-xs text-muted-foreground", children: [
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "capitalize", children: mediaType }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "•" }),
-                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatFileSize(asset.size ?? 0) })
-              ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: formatDate(asset._creationTime) })
-            ] })
-          ] }, asset._id);
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              className: cn(
+                "group relative flex cursor-pointer flex-col overflow-hidden rounded-lg border bg-card transition-all hover:border-primary/50",
+                isSelected && "border-primary ring-2 ring-primary/20"
+              ),
+              onClick: () => handleAssetClick(assetId),
+              children: [
+                isSelectionMode && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-2 top-2 z-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Checkbox,
+                  {
+                    checked: isSelected,
+                    onCheckedChange: () => handleAssetSelect(assetId),
+                    onClick: (e) => e.stopPropagation(),
+                    className: "bg-white/80"
+                  }
+                ) }),
+                !isSelectionMode && !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute right-2 top-2 z-10", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  MediaAssetActions,
+                  {
+                    asset: {
+                      _id: asset._id,
+                      name: asset.name,
+                      url: asset.url
+                    },
+                    onView: () => {
+                      const index = displayedAssets.findIndex(
+                        (a) => a._id === asset._id
+                      );
+                      if (index !== -1) setPreviewIndex(index);
+                    },
+                    onEdit: () => setEditingAsset({
+                      _id: asset._id,
+                      name: asset.name,
+                      title: asset.title,
+                      description: asset.description,
+                      altText: asset.altText,
+                      tags: asset.tags
+                    }),
+                    onDelete: () => setDeleteTarget({
+                      type: "asset",
+                      id: asset._id,
+                      name: asset.name
+                    })
+                  }
+                ) }),
+                !isSelectionMode && isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute right-2 top-2 z-10 flex gap-1 opacity-0 group-hover:opacity-100", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    CmsButton,
+                    {
+                      variant: "secondary",
+                      size: "icon-sm",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        handleRestore(asset._id);
+                      },
+                      title: "Restore",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-4" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    CmsButton,
+                    {
+                      variant: "danger",
+                      size: "icon-sm",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        setPermanentDeleteTarget(asset._id);
+                        setShowPermanentDeleteConfirm(true);
+                      },
+                      title: "Delete Forever",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-4" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "aspect-square overflow-hidden bg-muted", children: mediaType === "image" && asset.url ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  "img",
+                  {
+                    src: asset.url,
+                    alt: asset.title || asset.name,
+                    className: "h-full w-full object-cover"
+                  }
+                ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-full items-center justify-center text-muted-foreground", children: getMediaTypeIcon(mediaType, "size-10") }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "p-2", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "p",
+                    {
+                      className: "truncate text-sm font-medium",
+                      title: asset.name,
+                      children: asset.name
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-0.5 flex items-center gap-1 text-xs text-muted-foreground", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "capitalize", children: mediaType }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "•" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: formatFileSize(asset.size ?? 0) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-0.5 text-xs text-muted-foreground", children: formatDate(asset._creationTime) })
+                ] })
+              ]
+            },
+            asset._id
+          );
         }) }),
         !assetsResult.isDone && /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "mt-4 text-center text-sm text-muted-foreground", children: [
           "Showing ",
           assetsResult.page.length,
           " files. More files available."
         ] })
-      ] }) : isTrashView ? /* @__PURE__ */ jsxRuntimeExports.jsx(CmsEmptyState, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-8" }), title: "Trash is empty", description: "Deleted files will appear here. You can restore them or permanently delete them." }) : !folders?.length && /* @__PURE__ */ jsxRuntimeExports.jsx(CmsEmptyState, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { className: "size-8" }), title: "No media assets yet", description: "Upload images, videos, documents, and other files to use in your content.", action: {
-        label: "Upload Files",
-        onClick: () => setShowUploadModal(true)
-      } }),
-      searchQuery && displayedAssets.length === 0 && !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsx(CmsEmptyState, { icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "size-8" }), title: "No results found", description: `No files match "${searchQuery}". Try a different search term.`, action: {
-        label: "Clear Search",
-        onClick: () => setSearchQuery(""),
-        variant: "secondary"
-      } })
+      ] }) : isTrashView ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CmsEmptyState,
+        {
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Trash2, { className: "size-8" }),
+          title: "Trash is empty",
+          description: "Deleted files will appear here. You can restore them or permanently delete them."
+        }
+      ) : !folders?.length && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CmsEmptyState,
+        {
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Image, { className: "size-8" }),
+          title: "No media assets yet",
+          description: "Upload images, videos, documents, and other files to use in your content.",
+          action: {
+            label: "Upload Files",
+            onClick: () => setShowUploadModal(true)
+          }
+        }
+      ),
+      searchQuery && displayedAssets.length === 0 && !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CmsEmptyState,
+        {
+          icon: /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "size-8" }),
+          title: "No results found",
+          description: `No files match "${searchQuery}". Try a different search term.`,
+          action: {
+            label: "Clear Search",
+            onClick: () => setSearchQuery(""),
+            variant: "secondary"
+          }
+        }
+      )
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open: showNewFolderModal, onOpenChange: setShowNewFolderModal, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Create New Folder" }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4 py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { htmlFor: "folder-name", children: "Folder Name" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Input, { id: "folder-name", value: newFolderName, onChange: (e) => {
-          setNewFolderName(e.target.value);
-          setFolderError("");
-        }, placeholder: "Enter folder name", autoFocus: true, onKeyDown: (e) => {
-          if (e.key === "Enter" && !isCreatingFolder) {
-            handleCreateFolder();
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Input,
+          {
+            id: "folder-name",
+            value: newFolderName,
+            onChange: (e) => {
+              setNewFolderName(e.target.value);
+              setFolderError("");
+            },
+            placeholder: "Enter folder name",
+            autoFocus: true,
+            onKeyDown: (e) => {
+              if (e.key === "Enter" && !isCreatingFolder) {
+                handleCreateFolder();
+              }
+            }
           }
-        } }),
+        ),
         folderError && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-destructive", children: folderError })
       ] }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogFooter, { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "secondary", onClick: () => setShowNewFolderModal(false), disabled: isCreatingFolder, children: "Cancel" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { onClick: handleCreateFolder, disabled: isCreatingFolder || !newFolderName.trim(), loading: isCreatingFolder, children: "Create Folder" })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          CmsButton,
+          {
+            variant: "secondary",
+            onClick: () => setShowNewFolderModal(false),
+            disabled: isCreatingFolder,
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          CmsButton,
+          {
+            onClick: handleCreateFolder,
+            disabled: isCreatingFolder || !newFolderName.trim(),
+            loading: isCreatingFolder,
+            children: "Create Folder"
+          }
+        )
       ] })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open: showUploadModal, onOpenChange: setShowUploadModal, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-lg", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(DialogTitle, { children: "Upload Files" }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(UploadDropzone, { currentFolderId, generateUploadUrl: api.media.generateUploadUrl, createAsset: api.media.createAsset, onUploadComplete: handleUploadComplete, maxFileSize: 50 * 1024 * 1024, maxConcurrentUploads: 3 }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(DialogFooter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "secondary", onClick: () => setShowUploadModal(false), children: "Close" }) })
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "py-4", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        UploadDropzone,
+        {
+          currentFolderId,
+          generateUploadUrl: api2.generateUploadUrl,
+          createAsset: api2.createMediaAsset,
+          onUploadComplete: handleUploadComplete,
+          maxFileSize: 50 * 1024 * 1024,
+          maxConcurrentUploads: 3
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(DialogFooter, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CmsButton,
+        {
+          variant: "secondary",
+          onClick: () => setShowUploadModal(false),
+          children: "Close"
+        }
+      ) })
     ] }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(MediaPreviewModal, { asset: previewIndex !== null && displayedAssets[previewIndex] ? displayedAssets[previewIndex] : null, assets: displayedAssets, currentIndex: previewIndex ?? 0, open: previewIndex !== null, onOpenChange: (open) => {
-      if (!open) setPreviewIndex(null);
-    }, onNavigate: handlePreviewNavigate, onEdit: isTrashView ? void 0 : (asset) => setEditingAsset({
-      _id: asset._id,
-      name: asset.name,
-      title: asset.title,
-      description: asset.description,
-      altText: asset.altText,
-      tags: asset.tags
-    }), onDelete: isTrashView ? void 0 : (asset) => setDeleteTarget({
-      type: "asset",
-      id: asset._id,
-      name: asset.name
-    }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(MediaAssetEditDialog, { asset: editingAsset, open: editingAsset !== null, onOpenChange: (open) => {
-      if (!open) setEditingAsset(null);
-    } }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(MediaFolderEditDialog, { folder: editingFolder, open: editingFolder !== null, onOpenChange: (open) => {
-      if (!open) setEditingFolder(null);
-    } }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CmsConfirmDialog, { open: deleteTarget !== null, onOpenChange: (open) => {
-      if (!open) setDeleteTarget(null);
-    }, title: `Delete ${deleteTarget?.type === "folder" ? "Folder" : "File"}?`, description: `Are you sure you want to delete "${deleteTarget?.name}"? ${deleteTarget?.type === "folder" ? "This will also delete all files inside the folder." : "This action can be undone from the trash."}`, confirmLabel: "Delete", onConfirm: handleDelete, variant: "danger", loading: isDeleting }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CmsConfirmDialog, { open: showBulkDeleteConfirm, onOpenChange: setShowBulkDeleteConfirm, title: "Delete Selected Files?", description: `Are you sure you want to delete ${selectedAssets.size} ${selectedAssets.size === 1 ? "file" : "files"}? This action can be undone from the trash.`, confirmLabel: "Delete All", onConfirm: handleBulkDelete, variant: "danger", loading: isBulkDeleting }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CmsConfirmDialog, { open: showPermanentDeleteConfirm, onOpenChange: (open) => {
-      setShowPermanentDeleteConfirm(open);
-      if (!open) setPermanentDeleteTarget(null);
-    }, title: permanentDeleteTarget === "bulk" ? `Delete ${selectedAssets.size} ${selectedAssets.size === 1 ? "File" : "Files"} Forever?` : "Delete Forever?", description: permanentDeleteTarget === "bulk" ? `This will permanently delete ${selectedAssets.size} ${selectedAssets.size === 1 ? "file" : "files"}. This action cannot be undone.` : "This will permanently delete this file. This action cannot be undone.", confirmLabel: "Delete Forever", onConfirm: handlePermanentDelete, variant: "danger", loading: isPermanentlyDeleting }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(MediaMoveModal, { open: showMoveModal, onOpenChange: setShowMoveModal, assetIds: Array.from(selectedAssets), currentFolderId, onMoved: handleBulkMoveComplete }),
-    isSelectionMode && !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsx(MediaBulkActionBar, { selectedCount: selectedAssets.size, onClear: handleDeselectAll, onMove: () => setShowMoveModal(true), onDelete: () => setShowBulkDeleteConfirm(true), isDeleting: isBulkDeleting }),
-    isSelectionMode && isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsx(MediaTrashBulkActionBar, { selectedCount: selectedAssets.size, onClear: handleDeselectAll, onRestore: handleBulkRestore, onPermanentDelete: () => {
-      setPermanentDeleteTarget("bulk");
-      setShowPermanentDeleteConfirm(true);
-    }, isRestoring, isDeleting: isPermanentlyDeleting })
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MediaPreviewModal,
+      {
+        asset: previewIndex !== null && displayedAssets[previewIndex] ? displayedAssets[previewIndex] : null,
+        assets: displayedAssets,
+        currentIndex: previewIndex ?? 0,
+        open: previewIndex !== null,
+        onOpenChange: (open) => {
+          if (!open) setPreviewIndex(null);
+        },
+        onNavigate: handlePreviewNavigate,
+        onEdit: isTrashView ? void 0 : (asset) => setEditingAsset({
+          _id: asset._id,
+          name: asset.name,
+          title: asset.title,
+          description: asset.description,
+          altText: asset.altText,
+          tags: asset.tags
+        }),
+        onDelete: isTrashView ? void 0 : (asset) => setDeleteTarget({
+          type: "asset",
+          id: asset._id,
+          name: asset.name
+        })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MediaAssetEditDialog,
+      {
+        asset: editingAsset,
+        open: editingAsset !== null,
+        onOpenChange: (open) => {
+          if (!open) setEditingAsset(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MediaFolderEditDialog,
+      {
+        folder: editingFolder,
+        open: editingFolder !== null,
+        onOpenChange: (open) => {
+          if (!open) setEditingFolder(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CmsConfirmDialog,
+      {
+        open: deleteTarget !== null,
+        onOpenChange: (open) => {
+          if (!open) setDeleteTarget(null);
+        },
+        title: `Delete ${deleteTarget?.type === "folder" ? "Folder" : "File"}?`,
+        description: `Are you sure you want to delete "${deleteTarget?.name}"? ${deleteTarget?.type === "folder" ? "This will also delete all files inside the folder." : "This action can be undone from the trash."}`,
+        confirmLabel: "Delete",
+        onConfirm: handleDelete,
+        variant: "danger",
+        loading: isDeleting
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CmsConfirmDialog,
+      {
+        open: showBulkDeleteConfirm,
+        onOpenChange: setShowBulkDeleteConfirm,
+        title: "Delete Selected Files?",
+        description: `Are you sure you want to delete ${selectedAssets.size} ${selectedAssets.size === 1 ? "file" : "files"}? This action can be undone from the trash.`,
+        confirmLabel: "Delete All",
+        onConfirm: handleBulkDelete,
+        variant: "danger",
+        loading: isBulkDeleting
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CmsConfirmDialog,
+      {
+        open: showPermanentDeleteConfirm,
+        onOpenChange: (open) => {
+          setShowPermanentDeleteConfirm(open);
+          if (!open) setPermanentDeleteTarget(null);
+        },
+        title: permanentDeleteTarget === "bulk" ? `Delete ${selectedAssets.size} ${selectedAssets.size === 1 ? "File" : "Files"} Forever?` : "Delete Forever?",
+        description: permanentDeleteTarget === "bulk" ? `This will permanently delete ${selectedAssets.size} ${selectedAssets.size === 1 ? "file" : "files"}. This action cannot be undone.` : "This will permanently delete this file. This action cannot be undone.",
+        confirmLabel: "Delete Forever",
+        onConfirm: handlePermanentDelete,
+        variant: "danger",
+        loading: isPermanentlyDeleting
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MediaMoveModal,
+      {
+        open: showMoveModal,
+        onOpenChange: setShowMoveModal,
+        assetIds: Array.from(selectedAssets),
+        currentFolderId,
+        onMoved: handleBulkMoveComplete
+      }
+    ),
+    isSelectionMode && !isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MediaBulkActionBar,
+      {
+        selectedCount: selectedAssets.size,
+        onClear: handleDeselectAll,
+        onMove: () => setShowMoveModal(true),
+        onDelete: () => setShowBulkDeleteConfirm(true),
+        isDeleting: isBulkDeleting
+      }
+    ),
+    isSelectionMode && isTrashView && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      MediaTrashBulkActionBar,
+      {
+        selectedCount: selectedAssets.size,
+        onClear: handleDeselectAll,
+        onRestore: handleBulkRestore,
+        onPermanentDelete: () => {
+          setPermanentDeleteTarget("bulk");
+          setShowPermanentDeleteConfirm(true);
+        },
+        isRestoring,
+        isDeleting: isPermanentlyDeleting
+      }
+    )
   ] });
 }
+function MediaRoute() {
+  const navigation = useTanStackNavigation();
+  const {
+    settings
+  } = useSettingsConfig();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(MediaPage, { api: api.admin, navigation, settings });
+}
 export {
-  MediaPage as component
+  MediaRoute as component
 };