@rakun-kit/manager-react 1.2.0 → 1.3.1

package/dist/esm/components/media/previews/MediaContextMenuContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContextMenuContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/media/previews/MediaContextMenuContent.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iDAAiD,CAAA;AAEjF,KAAK,4BAA4B,GAAG;IAClC,IAAI,EAAE,WAAW,GAAG,UAAU,CAAA;CAC/B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,IAAI,GACL,EAAE,4BAA4B,2CA4B9B"}
+{"version":3,"file":"MediaContextMenuContent.d.ts","sourceRoot":"","sources":["../../../../../src/components/media/previews/MediaContextMenuContent.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAC9C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iDAAiD,CAAA;AAEjF,KAAK,4BAA4B,GAAG;IAClC,IAAI,EAAE,WAAW,GAAG,UAAU,CAAA;CAC/B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,IAAI,GACL,EAAE,4BAA4B,2CAoD9B"}

package/dist/esm/components/media/previews/MediaContextMenuContent.js

@@ -1,11 +1,12 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { FolderInput, Pencil, Trash2 } from 'lucide-react';
+import { Check, Crop, FolderInput, Pencil, Trash2 } from 'lucide-react';
 import { ContextMenuContent, ContextMenuItem, ContextMenuSeparator, } from '../../ui/context-menu.js';
 import { useMediaPreview } from './context/MediaPreviewContext.js';
 export default function MediaContextMenuContent({ item, }) {
-    const { onRequestEdit, onRequestMove, onRequestDelete } = useMediaPreview();
+    const { canBulkSelect, bulkSelectedIds, onRequestSelect, onRequestEdit, onRequestImageEdit, onRequestMove, onRequestDelete, } = useMediaPreview();
     const isMediaItem = '_type' in item && item._type === 'Media';
-    return (_jsxs(ContextMenuContent, { children: [_jsxs(ContextMenuItem, { onSelect: () => onRequestEdit?.(item), children: [_jsx(Pencil, { className: 'size-4' }), "Edit"] }), isMediaItem ? (_jsxs(_Fragment, { children: [_jsxs(ContextMenuItem, { onSelect: () => onRequestMove(item), children: [_jsx(FolderInput, { className: 'size-4' }), "Move to folder"] }), _jsx(ContextMenuSeparator, {})] })) : null, _jsxs(ContextMenuItem, { variant: 'destructive', onSelect: () => onRequestDelete?.(item), children: [_jsx(Trash2, { className: 'size-4' }), "Delete"] })] }));
+    const isImageItem = isMediaItem && item.mime.startsWith('image/');
+    return (_jsxs(ContextMenuContent, { children: [isMediaItem && canBulkSelect ? (_jsxs(_Fragment, { children: [_jsxs(ContextMenuItem, { onSelect: () => onRequestSelect(item), children: [_jsx(Check, { className: 'size-4' }), bulkSelectedIds.has(item._id) ? 'Deselect' : 'Select'] }), _jsx(ContextMenuSeparator, {})] })) : null, _jsxs(ContextMenuItem, { onSelect: () => onRequestEdit?.(item), children: [_jsx(Pencil, { className: 'size-4' }), "Edit"] }), isImageItem ? (_jsxs(ContextMenuItem, { onSelect: () => onRequestImageEdit(item), children: [_jsx(Crop, { className: 'size-4' }), "Crop and rotate"] })) : null, isMediaItem ? (_jsxs(_Fragment, { children: [_jsxs(ContextMenuItem, { onSelect: () => onRequestMove(item), children: [_jsx(FolderInput, { className: 'size-4' }), "Move to folder"] }), _jsx(ContextMenuSeparator, {})] })) : null, _jsxs(ContextMenuItem, { variant: 'destructive', onSelect: () => onRequestDelete?.(item), children: [_jsx(Trash2, { className: 'size-4' }), "Delete"] })] }));
 }
 //# sourceMappingURL=MediaContextMenuContent.js.map

package/dist/esm/components/media/previews/MediaContextMenuContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MediaContextMenuContent.js","sourceRoot":"","sources":["../../../../../src/components/media/previews/MediaContextMenuContent.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAE1D,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,oBAAoB,GACrB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAS/D,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,IAAI,GACyB;IAC7B,MAAM,EAAE,aAAa,EAAE,aAAa,EAAE,eAAe,EAAE,GAAG,eAAe,EAAE,CAAA;IAC3E,MAAM,WAAW,GAAG,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,CAAA;IAE7D,OAAO,CACL,MAAC,kBAAkB,eACjB,MAAC,eAAe,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,aACpD,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,GAAG,YAEb,EACjB,WAAW,CAAC,CAAC,CAAC,CACb,8BACE,MAAC,eAAe,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,aAClD,KAAC,WAAW,IAAC,SAAS,EAAC,QAAQ,GAAG,sBAElB,EAClB,KAAC,oBAAoB,KAAG,IACvB,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,MAAC,eAAe,IACd,OAAO,EAAC,aAAa,EACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,aAEvC,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,GAAG,cAEb,IACC,CACtB,CAAA;AACH,CAAC"}
+{"version":3,"file":"MediaContextMenuContent.js","sourceRoot":"","sources":["../../../../../src/components/media/previews/MediaContextMenuContent.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAEvE,OAAO,EACL,kBAAkB,EAClB,eAAe,EACf,oBAAoB,GACrB,MAAM,uBAAuB,CAAA;AAC9B,OAAO,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAS/D,MAAM,CAAC,OAAO,UAAU,uBAAuB,CAAC,EAC9C,IAAI,GACyB;IAC7B,MAAM,EACJ,aAAa,EACb,eAAe,EACf,eAAe,EACf,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,eAAe,GAChB,GAAG,eAAe,EAAE,CAAA;IACrB,MAAM,WAAW,GAAG,OAAO,IAAI,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,OAAO,CAAA;IAC7D,MAAM,WAAW,GAAG,WAAW,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAA;IAEjE,OAAO,CACL,MAAC,kBAAkB,eAChB,WAAW,IAAI,aAAa,CAAC,CAAC,CAAC,CAC9B,8BACE,MAAC,eAAe,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,aACpD,KAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,GAAG,EAC3B,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,IACtC,EAClB,KAAC,oBAAoB,KAAG,IACvB,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,MAAC,eAAe,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,EAAE,CAAC,IAAI,CAAC,aACpD,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,GAAG,YAEb,EACjB,WAAW,CAAC,CAAC,CAAC,CACb,MAAC,eAAe,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,IAAI,CAAC,aACvD,KAAC,IAAI,IAAC,SAAS,EAAC,QAAQ,GAAG,uBAEX,CACnB,CAAC,CAAC,CAAC,IAAI,EACP,WAAW,CAAC,CAAC,CAAC,CACb,8BACE,MAAC,eAAe,IAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC,aAClD,KAAC,WAAW,IAAC,SAAS,EAAC,QAAQ,GAAG,sBAElB,EAClB,KAAC,oBAAoB,KAAG,IACvB,CACJ,CAAC,CAAC,CAAC,IAAI,EACR,MAAC,eAAe,IACd,OAAO,EAAC,aAAa,EACrB,QAAQ,EAAE,GAAG,EAAE,CAAC,eAAe,EAAE,CAAC,IAAI,CAAC,aAEvC,KAAC,MAAM,IAAC,SAAS,EAAC,QAAQ,GAAG,cAEb,IACC,CACtB,CAAA;AACH,CAAC"}

package/dist/esm/components/media/previews/Previews.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Previews.d.ts","sourceRoot":"","sources":["../../../../../src/components/media/previews/Previews.tsx"],"names":[],"mappings":"AAgEA,MAAM,CAAC,OAAO,UAAU,QAAQ,4CAkgB/B"}
+{"version":3,"file":"Previews.d.ts","sourceRoot":"","sources":["../../../../../src/components/media/previews/Previews.tsx"],"names":[],"mappings":"AAmFA,MAAM,CAAC,OAAO,UAAU,QAAQ,4CA+1B/B"}

package/dist/esm/components/media/previews/Previews.js

@@ -8,6 +8,7 @@ import { toast } from 'sonner';
 import { Button } from '../../ui/button.js';
 import { Card } from '../../ui/card.js';
 import { ContextMenu, ContextMenuTrigger } from '../../ui/context-menu.js';
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, } from '../../ui/dialog.js';
 import { FileUpload, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, } from '../../ui/file-upload.js';
 import { ScrollArea } from '../../ui/scroll-area.js';
 import { Skeleton } from '../../ui/skeleton.js';
@@ -18,21 +19,26 @@ import ExpandedPreviewDialog from './dialogs/ExpandedPreviewDialog.js';
 import MediaCreateFolderDialog from './dialogs/MediaCreateFolderDialog.js';
 import MediaDeleteDialog from './dialogs/MediaDeleteDialog.js';
 import MediaEditDialog from './dialogs/MediaEditDialog.js';
+import MediaImageEditorDialog from './dialogs/MediaImageEditorDialog.js';
 import MediaMoveDialog from './dialogs/MediaMoveDialog.js';
 import { useExpandedPreview } from './hooks/useExpandedPreview.js';
 import { useMediaPreviewRenderer } from './hooks/useMediaPreviewRenderer.js';
 import { useMediaUpload } from './hooks/useMediaUpload.js';
-import PreviewsToolbar from './toolbar/PreviewsToolbar.js';
+import PreviewsToolbar, { PreviewsSelectionToolbar } from './toolbar/PreviewsToolbar.js';
 import { formatFileSize } from './utils/mediaPreview.js';
 import PreviewsGridLargeView from './views/PreviewsGridLargeView.js';
 import PreviewsGridSmallView from './views/PreviewsGridSmallView.js';
 import PreviewsListView from './views/PreviewsListView.js';
 import PreviewsViewLoader from './views/PreviewsViewLoader.js';
+import { useMedia } from '../../../media.js';
 const ROOT_FOLDER_VALUE = '__root__';
+const isMediaRecord = (item) => '_type' in item && item._type === 'Media';
+const getActionErrorMessage = (error) => error instanceof Error && error.message ? error.message : 'Action failed';
 export default function Previews() {
     const managerClient = useManagerClient();
     const queryClient = useQueryClient();
-    const { currentFolderId, setCurrentFolderId, folders, onCreateFolder, refetchFoldersTree, forcedMediaTypeFilter, externalEditFolderRequest, externalDeleteFolderRequest, selectable, selectedMediaIds, onSelect, onUpload, } = useMediaLibrary();
+    const { uploadMedia } = useMedia();
+    const { currentFolderId, currentFolderPath, setCurrentFolderId, folders, onCreateFolder, refetchFoldersTree, forcedMediaTypeFilter, externalEditFolderRequest, externalDeleteFolderRequest, selectable, selectedMediaIds, onSelect, onUpload, } = useMediaLibrary();
     const [viewMode, setViewMode] = useState('grid-sm');
     const [mediaTypeFilter, setMediaTypeFilter] = useState('all');
     const effectiveMediaTypeFilter = forcedMediaTypeFilter ?? mediaTypeFilter;
@@ -44,11 +50,17 @@ export default function Previews() {
     const [editTarget, setEditTarget] = useState(null);
     const [editName, setEditName] = useState('');
     const [moveTarget, setMoveTarget] = useState(null);
+    const [imageEditTarget, setImageEditTarget] = useState(null);
+    const [imageEditUrl, setImageEditUrl] = useState('');
+    const [isSavingImageEdit, setIsSavingImageEdit] = useState(false);
     const [destinationFolderId, setDestinationFolderId] = useState('');
+    const [selectionMode, setSelectionMode] = useState(false);
+    const [bulkSelectedIds, setBulkSelectedIds] = useState(() => new Set());
+    const [bulkDeleteOpen, setBulkDeleteOpen] = useState(false);
+    const [isBulkDeleting, setIsBulkDeleting] = useState(false);
+    const [isMoving, setIsMoving] = useState(false);
     const getMediaQueryFilter = (folderId, mediaType) => {
-        const folderFilter = folderId
-            ? { 'folder._id': folderId }
-            : { folder: { $exists: false } };
+        const folderFilter = folderId ? { 'folder._id': folderId } : { folder: { $exists: false } };
         switch (mediaType) {
             case 'image':
                 return { ...folderFilter, mime: { $regex: '^image/' } };
@@ -57,10 +69,7 @@ export default function Previews() {
             case 'document':
                 return {
                     ...folderFilter,
-                    $or: [
-                        { mime: { $regex: '^application/' } },
-                        { mime: { $regex: '^text/' } },
-                    ],
+                    $or: [{ mime: { $regex: '^application/' } }, { mime: { $regex: '^text/' } }],
                 };
             default:
                 return folderFilter;
@@ -87,10 +96,13 @@ export default function Previews() {
         input: currentFolderId ? { parentId: currentFolderId } : {},
     });
     const deleteMutation = useManagerMutation('manager.delete');
+    const deleteFolderMutation = useManagerMutation('manager.media.deleteFolder');
     const updateMutation = useManagerMutation('manager.update');
-    const media = (data?.items ??
-        []);
+    const media = (data?.items ?? []);
     const childFoldersData = childFolders;
+    const canBulkSelect = !selectable;
+    const bulkSelectedIdsList = useMemo(() => Array.from(bulkSelectedIds), [bulkSelectedIds]);
+    const bulkSelectedCount = bulkSelectedIdsList.length;
     const folderOptions = useMemo(() => [
         { _id: null, name: 'Base folder', path: '/' },
         ...[...(folders ?? [])].sort((a, b) => a.path.localeCompare(b.path)),
@@ -113,7 +125,7 @@ export default function Previews() {
             return result.url;
         },
     });
-    const { expandedPreview, expandedPreviewUrl, setExpandedPreview, onMediaClick, } = useExpandedPreview({
+    const { expandedPreview, expandedPreviewUrl, setExpandedPreview, onMediaClick } = useExpandedPreview({
         selectable,
         onSelect,
         resolveOriginalUrl: async (item) => {
@@ -126,6 +138,67 @@ export default function Previews() {
             return result.url;
         },
     });
+    useEffect(() => {
+        setSelectionMode(false);
+        setBulkSelectedIds(new Set());
+    }, [currentFolderId, effectiveMediaTypeFilter]);
+    useEffect(() => {
+        setBulkSelectedIds((prev) => {
+            if (prev.size === 0)
+                return prev;
+            const visibleIds = new Set(media.map((item) => item._id));
+            const next = new Set([...prev].filter((id) => visibleIds.has(id)));
+            return next.size === prev.size ? prev : next;
+        });
+    }, [media]);
+    useEffect(() => {
+        if (selectionMode && bulkSelectedCount === 0) {
+            setSelectionMode(false);
+        }
+    }, [selectionMode, bulkSelectedCount]);
+    const clearBulkSelection = () => {
+        setSelectionMode(false);
+        setBulkSelectedIds(new Set());
+    };
+    const toggleBulkSelection = (item) => {
+        if (canBulkSelect) {
+            setSelectionMode(true);
+        }
+        setBulkSelectedIds((prev) => {
+            const next = new Set(prev);
+            if (next.has(item._id)) {
+                next.delete(item._id);
+            }
+            else {
+                next.add(item._id);
+            }
+            return next;
+        });
+    };
+    const selectVisible = (items, selected) => {
+        if (canBulkSelect) {
+            setSelectionMode(true);
+        }
+        setBulkSelectedIds((prev) => {
+            const next = new Set(prev);
+            for (const item of items) {
+                if (selected) {
+                    next.add(item._id);
+                }
+                else {
+                    next.delete(item._id);
+                }
+            }
+            return next;
+        });
+    };
+    const handleMediaClick = (item) => {
+        if (canBulkSelect && selectionMode) {
+            toggleBulkSelection(item);
+            return;
+        }
+        onMediaClick(item);
+    };
     useEffect(() => {
         if (!externalEditFolderRequest)
             return;
@@ -143,21 +216,40 @@ export default function Previews() {
             contentType: 'MediaFolder',
             id: externalDeleteFolderRequest.id,
             name: externalDeleteFolderRequest.name,
+            path: externalDeleteFolderRequest.path,
+            parentId: externalDeleteFolderRequest.parentId,
         });
     }, [externalDeleteFolderRequest]);
     const handleConfirmDelete = () => {
         if (!deleteTarget)
             return;
+        if (deleteTarget.contentType === 'MediaFolder') {
+            deleteFolderMutation.mutate({
+                id: deleteTarget.id,
+                recursive: true,
+            }, {
+                onSuccess: async () => {
+                    await Promise.all([refetch(), refetchChildFolders(), refetchFoldersTree()]);
+                    const currentFolder = currentFolderId
+                        ? folders?.find((folder) => folder._id === currentFolderId)
+                        : null;
+                    const deletedPath = deleteTarget.path;
+                    if (currentFolderId === deleteTarget.id ||
+                        (deletedPath && currentFolder?.path.startsWith(`${deletedPath}/`))) {
+                        setCurrentFolderId(deleteTarget.parentId ?? null);
+                    }
+                    setDeleteTarget(null);
+                    toast.success('Folder deleted successfully');
+                },
+            });
+            return;
+        }
         deleteMutation.mutate({
             contentType: deleteTarget.contentType,
             id: deleteTarget.id,
         }, {
             onSuccess: async () => {
-                await Promise.all([
-                    refetch(),
-                    refetchChildFolders(),
-                    refetchFoldersTree(),
-                ]);
+                await Promise.all([refetch(), refetchChildFolders(), refetchFoldersTree()]);
                 setDeleteTarget(null);
                 toast.success(`${deleteTarget.contentType === 'MediaFolder' ? 'Folder' : 'File'} deleted successfully`);
             },
@@ -195,17 +287,29 @@ export default function Previews() {
             data: { name: nextName },
         }, {
             onSuccess: async () => {
-                await Promise.all([
-                    refetch(),
-                    refetchChildFolders(),
-                    refetchFoldersTree(),
-                ]);
+                await Promise.all([refetch(), refetchChildFolders(), refetchFoldersTree()]);
                 setEditTarget(null);
                 toast.success(`${editTarget.contentType === 'MediaFolder' ? 'Folder' : 'File'} updated successfully`);
             },
         });
     };
-    const handleConfirmMove = () => {
+    const invalidateMediaLists = async (sourceFolderId, targetFolderId) => {
+        await Promise.all(['all', 'image', 'video', 'document'].flatMap((mediaType) => [sourceFolderId, targetFolderId].map((folderId) => queryClient.invalidateQueries({
+            queryKey: createManagerQueryKey('manager.list', {
+                contentType: 'Media',
+                query: {
+                    filter: getMediaQueryFilter(folderId, mediaType),
+                    options: {
+                        limit: 'all',
+                        sort: {
+                            uploadedAt: 'desc',
+                        },
+                    },
+                },
+            }),
+        }))));
+    };
+    const handleConfirmMove = async () => {
         if (!moveTarget || !destinationFolderId)
             return;
         if (destinationFolderId === (moveTarget.currentFolderId ?? ROOT_FOLDER_VALUE)) {
@@ -214,53 +318,145 @@ export default function Previews() {
         }
         const sourceFolderId = moveTarget.currentFolderId ?? null;
         const targetFolderId = destinationFolderId === ROOT_FOLDER_VALUE ? null : destinationFolderId;
-        updateMutation.mutate({
-            contentType: 'Media',
-            id: moveTarget.id,
-            data: destinationFolderId === ROOT_FOLDER_VALUE
-                ? { folder: null }
-                : {
-                    folder: {
-                        type: 'existing',
-                        _id: destinationFolderId,
-                        contentType: 'MediaFolder',
-                    },
-                },
-        }, {
-            onSuccess: async () => {
-                await Promise.all([
-                    refetch(),
-                    ...['all', 'image', 'video', 'document'].flatMap((mediaType) => [sourceFolderId, targetFolderId].map((folderId) => queryClient.invalidateQueries({
-                        queryKey: createManagerQueryKey('manager.list', {
-                            contentType: 'Media',
-                            query: {
-                                filter: getMediaQueryFilter(folderId, mediaType),
-                                options: {
-                                    limit: 'all',
-                                    sort: {
-                                        uploadedAt: 'desc',
-                                    },
-                                },
+        const ids = moveTarget.ids ?? (moveTarget.id ? [moveTarget.id] : []);
+        if (ids.length === 0)
+            return;
+        setIsMoving(true);
+        let successCount = 0;
+        let failedCount = 0;
+        let lastError;
+        for (const id of ids) {
+            try {
+                await updateMutation.mutateAsync({
+                    contentType: 'Media',
+                    id,
+                    data: destinationFolderId === ROOT_FOLDER_VALUE
+                        ? { folder: null }
+                        : {
+                            folder: {
+                                type: 'existing',
+                                _id: destinationFolderId,
+                                contentType: 'MediaFolder',
                             },
-                        }),
-                    }))),
-                ]);
-                setMoveTarget(null);
-                setDestinationFolderId('');
-                toast.success('File moved successfully');
-            },
+                        },
+                });
+                successCount += 1;
+            }
+            catch (error) {
+                failedCount += 1;
+                lastError = error;
+            }
+        }
+        if (successCount > 0) {
+            await Promise.all([
+                refetch(),
+                invalidateMediaLists(sourceFolderId, targetFolderId),
+            ]);
+            setMoveTarget(null);
+            setDestinationFolderId('');
+            clearBulkSelection();
+            toast.success(`${successCount} file${successCount === 1 ? '' : 's'} moved successfully`);
+        }
+        if (failedCount > 0) {
+            toast.error(`${failedCount} file${failedCount === 1 ? '' : 's'} failed. ${getActionErrorMessage(lastError)}`);
+        }
+        setIsMoving(false);
+    };
+    const onRequestDelete = (item) => {
+        if (isMediaRecord(item)) {
+            setDeleteTarget({
+                contentType: 'Media',
+                id: item._id,
+                name: item.name,
+            });
+            return;
+        }
+        setDeleteTarget({
+            contentType: 'MediaFolder',
+            id: item._id,
+            name: item.name,
+            path: item.path,
+            parentId: item.parentId,
         });
     };
-    const onRequestDelete = (item) => setDeleteTarget({
-        contentType: '_type' in item && item._type === 'Media' ? 'Media' : 'MediaFolder',
-        id: item._id,
-        name: item.name,
-    });
-    const onRequestEdit = (item) => handleEdit({
-        contentType: '_type' in item && item._type === 'Media' ? 'Media' : 'MediaFolder',
-        id: item._id,
-        name: item.name,
-    });
+    const onRequestEdit = (item) => {
+        if (isMediaRecord(item)) {
+            onMediaClick(item);
+            return;
+        }
+        handleEdit({
+            contentType: '_type' in item && item._type === 'Media' ? 'Media' : 'MediaFolder',
+            id: item._id,
+            name: item.name,
+        });
+    };
+    const onRequestImageEdit = async (item) => {
+        if (!item.mime.startsWith('image/'))
+            return;
+        try {
+            const url = item.url
+                ? item.url
+                : (await managerClient.request('manager.media.getUrl', {
+                    key: item.key,
+                    access: item.access,
+                })).url;
+            setImageEditTarget(item);
+            setImageEditUrl(url);
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Could not open image editor');
+        }
+    };
+    const handleSaveImageEdit = async (file) => {
+        if (!imageEditTarget)
+            return;
+        try {
+            setIsSavingImageEdit(true);
+            await uploadMedia({
+                file,
+                folderId: currentFolderId || undefined,
+                folderPath: currentFolderPath,
+                name: file.name,
+                access: imageEditTarget.access,
+            });
+            await refetch();
+            setImageEditTarget(null);
+            setImageEditUrl('');
+            toast.success('Edited image saved');
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Could not save edited image');
+        }
+        finally {
+            setIsSavingImageEdit(false);
+        }
+    };
+    const handleSavePreviewDetails = async ({ name, title, alt, }) => {
+        if (!expandedPreview)
+            return;
+        try {
+            await updateMutation.mutateAsync({
+                contentType: 'Media',
+                id: expandedPreview._id,
+                data: {
+                    name: name || expandedPreview.name,
+                    title: title || null,
+                    alt: alt || null,
+                },
+            });
+            setExpandedPreview({
+                ...expandedPreview,
+                name: name || expandedPreview.name,
+                title: title || undefined,
+                alt: alt || undefined,
+            });
+            await refetch();
+            toast.success('Image details saved');
+        }
+        catch (error) {
+            toast.error(error instanceof Error ? error.message : 'Could not save image details');
+        }
+    };
     const onRequestMove = (item) => {
         setMoveTarget({
             id: item._id,
@@ -269,6 +465,53 @@ export default function Previews() {
         });
         setDestinationFolderId(item.folder?._id ?? ROOT_FOLDER_VALUE);
     };
+    const onRequestSelect = (item) => {
+        if (!canBulkSelect)
+            return;
+        setSelectionMode(true);
+        toggleBulkSelection(item);
+    };
+    const onRequestBulkMove = () => {
+        if (bulkSelectedIdsList.length === 0)
+            return;
+        setMoveTarget({
+            ids: bulkSelectedIdsList,
+            name: `${bulkSelectedIdsList.length} selected files`,
+            currentFolderId: currentFolderId ?? undefined,
+        });
+        setDestinationFolderId(currentFolderId ?? ROOT_FOLDER_VALUE);
+    };
+    const handleConfirmBulkDelete = async () => {
+        if (bulkSelectedIdsList.length === 0)
+            return;
+        setIsBulkDeleting(true);
+        let successCount = 0;
+        let failedCount = 0;
+        let lastError;
+        for (const id of bulkSelectedIdsList) {
+            try {
+                await deleteMutation.mutateAsync({
+                    contentType: 'Media',
+                    id,
+                });
+                successCount += 1;
+            }
+            catch (error) {
+                failedCount += 1;
+                lastError = error;
+            }
+        }
+        if (successCount > 0) {
+            await Promise.all([refetch(), refetchChildFolders(), refetchFoldersTree()]);
+            setBulkDeleteOpen(false);
+            clearBulkSelection();
+            toast.success(`${successCount} file${successCount === 1 ? '' : 's'} deleted successfully`);
+        }
+        if (failedCount > 0) {
+            toast.error(`${failedCount} file${failedCount === 1 ? '' : 's'} failed. ${getActionErrorMessage(lastError)}`);
+        }
+        setIsBulkDeleting(false);
+    };
     const ViewComponent = viewMode === 'list'
         ? PreviewsListView
         : viewMode === 'grid-sm'
@@ -282,9 +525,20 @@ export default function Previews() {
         setMediaTypeFilter,
         viewMode,
         setViewMode,
-        isSelected: (id) => selectedMediaIds?.has(id) ?? false,
-        onMediaClick,
+        isSelected: (id) => bulkSelectedIds.has(id) || (selectedMediaIds?.has(id) ?? false),
+        selectionMode,
+        bulkSelectedIds,
+        bulkSelectedCount,
+        canBulkSelect,
+        onMediaClick: handleMediaClick,
+        onToggleBulkSelection: toggleBulkSelection,
+        onSelectVisible: selectVisible,
+        onRequestSelect,
+        onRequestBulkDelete: () => setBulkDeleteOpen(true),
+        onRequestBulkMove,
+        onClearSelection: clearBulkSelection,
         onRequestEdit,
+        onRequestImageEdit,
         onRequestMove,
         onRequestDelete,
         renderPreview,
@@ -295,25 +549,38 @@ export default function Previews() {
         effectiveMediaTypeFilter,
         isMediaTypeFilterLocked,
         viewMode,
+        selectionMode,
+        bulkSelectedIds,
+        bulkSelectedCount,
+        canBulkSelect,
         selectedMediaIds,
-        onMediaClick,
+        handleMediaClick,
+        toggleBulkSelection,
+        selectVisible,
+        onRequestSelect,
+        onRequestBulkMove,
+        clearBulkSelection,
         onRequestEdit,
+        onRequestImageEdit,
         onRequestMove,
         onRequestDelete,
         renderPreview,
     ]);
-    return (_jsx(ScrollArea, { className: 'h-[calc(100%-2.5rem)] w-full', children: _jsxs(MediaPreviewProvider, { value: mediaPreviewContextValue, children: [_jsxs("div", { className: 'mb-2 grid w-full grid-cols-2 gap-2 p-1 lg:grid-cols-6', children: [_jsxs(Button, { variant: 'outline', disabled: isCreatingFolder, size: 'lg', className: 'justify-start', onClick: () => {
+    return (_jsx(ScrollArea, { className: "h-[calc(100%-2.5rem)] w-full", children: _jsxs(MediaPreviewProvider, { value: mediaPreviewContextValue, children: [_jsxs("div", { className: "mb-2 grid w-full grid-cols-2 gap-2 p-1 lg:grid-cols-6", "data-tour": "media-folders", children: [_jsxs(Button, { variant: "outline", disabled: isCreatingFolder, size: "lg", className: "justify-start", onClick: () => {
                                 setIsCreateFolderDialogOpen(true);
-                            }, children: [_jsx(FolderPlus, { className: 'size-4' }), _jsx("span", { className: 'truncate', children: "Create folder" })] }), isLoadingChildFolders
-                            ? Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: 'flex items-center gap-2 rounded-lg border bg-card p-2', children: [_jsx(Skeleton, { className: 'h-7 w-7 rounded-md' }), _jsx(Skeleton, { className: 'h-4 flex-1' })] }, `child-folder-skeleton-${index}`)))
+                            }, children: [_jsx(FolderPlus, { className: "size-4" }), _jsx("span", { className: "truncate", children: "Create folder" })] }), isLoadingChildFolders
+                            ? Array.from({ length: 4 }).map((_, index) => (_jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-card p-2", children: [_jsx(Skeleton, { className: "h-7 w-7 rounded-md" }), _jsx(Skeleton, { className: "h-4 flex-1" })] }, `child-folder-skeleton-${index}`)))
                             : childFoldersData?.items?.length
-                                ? childFoldersData.items.map((folder) => (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs(Button, { type: 'button', variant: 'outline', size: 'lg', className: 'justify-start data-[state=open]:bg-accent/60 data-[state=open]:ring-1 data-[state=open]:ring-primary/30', onClick: () => setCurrentFolderId(folder._id), children: [_jsx(Folder, { className: 'size-4' }), _jsx("span", { className: 'truncate', children: folder.name })] }) }), _jsx(MediaContextMenuContent, { item: folder })] }, folder._id)))
-                                : null] }), _jsxs(FileUpload, { value: files, onValueChange: setFiles, onUpload: handleUpload, onFileReject: onFileReject, maxFiles: 5, className: 'relative w-full p-1', multiple: true, disabled: isUploading, children: [_jsx(PreviewsToolbar, {}), _jsx(FileUploadList, { className: 'mb-3', children: files.map((file) => (_jsxs(FileUploadItem, { value: file, children: [_jsx(FileUploadItemPreview, {}), _jsxs("div", { className: 'min-w-0 flex-1', children: [_jsx(FileUploadItemMetadata, {}), _jsx(FileUploadItemProgress, { className: 'mt-2' })] }), _jsx(FileUploadItemDelete, { className: 'rounded-md p-1 hover:bg-accent/40', children: _jsx(X, { className: 'size-4' }) })] }, file.name + file.lastModified))) }), _jsx(FileUploadDropzone, { asChild: true, tabIndex: -1, onClick: (event) => event.preventDefault(), className: 'group/dropzone relative w-full rounded-xl border border-transparent p-0 hover:bg-transparent! focus-visible:bg-transparent! data-dragging:border-primary/40 data-dragging:bg-transparent!', children: _jsxs("div", { className: 'relative w-full', children: [_jsx("div", { className: 'pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-xl bg-background/50 opacity-0 backdrop-blur transition-opacity duration-200 ease-out group-data-dragging/dropzone:opacity-100', children: _jsxs("div", { className: 'flex flex-col items-center gap-1 text-center', children: [_jsx("div", { className: 'flex items-center justify-center rounded-full border p-2.5', children: _jsx(Upload, { className: 'size-6 text-muted-foreground' }) }), _jsx("p", { className: 'font-medium text-sm', children: "Drag & drop files here" }), _jsx("p", { className: 'text-muted-foreground text-xs', children: "Upload max 5 files each up to 5MB" })] }) }), isLoading ? _jsx(PreviewsViewLoader, { viewMode: viewMode }) : null, !isLoading && media.length === 0 ? (_jsx(Card, { className: 'w-full p-8 text-center text-muted-foreground text-sm', children: "No files in this folder yet." })) : null, !isLoading && media.length > 0 ? (_jsx(ViewComponent, { media: media })) : null] }) })] }), _jsx(MediaDeleteDialog, { target: deleteTarget, isLoading: deleteMutation.isPending, onClose: () => setDeleteTarget(null), onConfirm: handleConfirmDelete }), _jsx(MediaEditDialog, { target: editTarget, value: editName, isLoading: updateMutation.isPending, onValueChange: setEditName, onClose: () => setEditTarget(null), onConfirm: handleConfirmEdit }), _jsx(MediaMoveDialog, { target: moveTarget, folders: folderOptions, value: destinationFolderId, isLoading: updateMutation.isPending, onValueChange: setDestinationFolderId, onClose: () => {
+                                ? childFoldersData.items.map((folder) => (_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", size: "lg", className: "justify-start data-[state=open]:bg-accent/60 data-[state=open]:ring-1 data-[state=open]:ring-primary/30", onClick: () => setCurrentFolderId(folder._id), children: [_jsx(Folder, { className: "size-4" }), _jsx("span", { className: "truncate", children: folder.name })] }) }), _jsx(MediaContextMenuContent, { item: folder })] }, folder._id)))
+                                : null] }), _jsxs(FileUpload, { value: files, onValueChange: setFiles, onUpload: handleUpload, onFileReject: onFileReject, maxFiles: 20, className: "relative w-full p-1", multiple: true, disabled: isUploading, children: [_jsx(PreviewsToolbar, {}), _jsx(FileUploadList, { className: "mb-3", children: files.map((file) => (_jsxs(FileUploadItem, { value: file, children: [_jsx(FileUploadItemPreview, {}), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx(FileUploadItemMetadata, {}), _jsx(FileUploadItemProgress, { className: "mt-2" })] }), _jsx(FileUploadItemDelete, { className: "rounded-md p-1 hover:bg-accent/40", children: _jsx(X, { className: "size-4" }) })] }, file.name + file.lastModified))) }), _jsx(FileUploadDropzone, { asChild: true, tabIndex: -1, onClick: (event) => event.preventDefault(), className: "group/dropzone relative w-full rounded-xl border border-transparent p-0 hover:bg-transparent! focus-visible:bg-transparent! data-dragging:border-primary/40 data-dragging:bg-transparent!", children: _jsxs("div", { className: "relative w-full", "data-tour": "media-grid", children: [_jsx("div", { className: "pointer-events-none absolute inset-0 z-20 flex items-center justify-center rounded-xl bg-background/50 opacity-0 backdrop-blur transition-opacity duration-200 ease-out group-data-dragging/dropzone:opacity-100", children: _jsxs("div", { className: "flex flex-col items-center gap-1 text-center", children: [_jsx("div", { className: "flex items-center justify-center rounded-full border p-2.5", children: _jsx(Upload, { className: "size-6 text-muted-foreground" }) }), _jsx("p", { className: "font-medium text-sm", children: "Drag & drop files here" }), _jsx("p", { className: "text-muted-foreground text-xs", children: "Upload max 20 files each up to 5MB" })] }) }), isLoading ? _jsx(PreviewsViewLoader, { viewMode: viewMode }) : null, !isLoading && media.length === 0 ? (_jsx(Card, { className: "w-full p-8 text-center text-muted-foreground text-sm", children: "No files in this folder yet." })) : null, !isLoading && media.length > 0 ? _jsx(ViewComponent, { media: media }) : null, _jsx(PreviewsSelectionToolbar, {})] }) })] }), _jsx(MediaDeleteDialog, { target: deleteTarget, isLoading: deleteMutation.isPending || deleteFolderMutation.isPending, onClose: () => setDeleteTarget(null), onConfirm: handleConfirmDelete }), _jsx(MediaEditDialog, { target: editTarget, value: editName, isLoading: updateMutation.isPending, onValueChange: setEditName, onClose: () => setEditTarget(null), onConfirm: handleConfirmEdit }), _jsx(MediaMoveDialog, { target: moveTarget, folders: folderOptions, value: destinationFolderId, isLoading: isMoving || updateMutation.isPending, onValueChange: setDestinationFolderId, onClose: () => {
                         setMoveTarget(null);
                         setDestinationFolderId('');
-                    }, onConfirm: handleConfirmMove }), _jsx(MediaCreateFolderDialog, { open: isCreateFolderDialogOpen, value: newFolderName, isLoading: isCreatingFolder, onValueChange: setNewFolderName, onClose: () => {
+                    }, onConfirm: () => void handleConfirmMove() }), _jsx(MediaImageEditorDialog, { target: imageEditTarget, imageUrl: imageEditUrl, isSaving: isSavingImageEdit, onClose: () => {
+                        setImageEditTarget(null);
+                        setImageEditUrl('');
+                    }, onSave: handleSaveImageEdit }), _jsx(Dialog, { open: bulkDeleteOpen, onOpenChange: setBulkDeleteOpen, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Delete selected files" }), _jsxs(DialogDescription, { children: ["This will delete ", bulkSelectedCount, " selected file", bulkSelectedCount === 1 ? '' : 's', "."] })] }), _jsxs(DialogFooter, { children: [_jsx(Button, { variant: "ghost", onClick: () => setBulkDeleteOpen(false), children: "Cancel" }), _jsx(Button, { variant: "destructive", loading: isBulkDeleting, disabled: bulkSelectedCount === 0, onClick: () => void handleConfirmBulkDelete(), children: "Delete" })] })] }) }), _jsx(MediaCreateFolderDialog, { open: isCreateFolderDialogOpen, value: newFolderName, isLoading: isCreatingFolder, onValueChange: setNewFolderName, onClose: () => {
                         setIsCreateFolderDialogOpen(false);
                         setNewFolderName('');
-                    }, onConfirm: handleConfirmCreateFolder }), _jsx(ExpandedPreviewDialog, { preview: expandedPreview, previewUrl: expandedPreviewUrl, onClose: () => setExpandedPreview(null) })] }) }));
+                    }, onConfirm: handleConfirmCreateFolder }), _jsx(ExpandedPreviewDialog, { preview: expandedPreview, previewUrl: expandedPreviewUrl, isSaving: updateMutation.isPending, onClose: () => setExpandedPreview(null), onSaveDetails: handleSavePreviewDetails })] }) }));
 }
 //# sourceMappingURL=Previews.js.map