@rakun-kit/manager-react 1.0.4 → 1.3.0

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

@@ -1,5 +1,38 @@
 "use strict";
 'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -14,6 +47,7 @@ const sonner_1 = require("sonner");
 const button_1 = require("../../ui/button.js");
 const card_1 = require("../../ui/card.js");
 const context_menu_1 = require("../../ui/context-menu.js");
+const dialog_1 = require("../../ui/dialog.js");
 const file_upload_1 = require("../../ui/file-upload.js");
 const scroll_area_1 = require("../../ui/scroll-area.js");
 const skeleton_1 = require("../../ui/skeleton.js");
@@ -24,21 +58,26 @@ const ExpandedPreviewDialog_1 = __importDefault(require("./dialogs/ExpandedPrevi
 const MediaCreateFolderDialog_1 = __importDefault(require("./dialogs/MediaCreateFolderDialog.js"));
 const MediaDeleteDialog_1 = __importDefault(require("./dialogs/MediaDeleteDialog.js"));
 const MediaEditDialog_1 = __importDefault(require("./dialogs/MediaEditDialog.js"));
+const MediaImageEditorDialog_1 = __importDefault(require("./dialogs/MediaImageEditorDialog.js"));
 const MediaMoveDialog_1 = __importDefault(require("./dialogs/MediaMoveDialog.js"));
 const useExpandedPreview_1 = require("./hooks/useExpandedPreview.js");
 const useMediaPreviewRenderer_1 = require("./hooks/useMediaPreviewRenderer.js");
 const useMediaUpload_1 = require("./hooks/useMediaUpload.js");
-const PreviewsToolbar_1 = __importDefault(require("./toolbar/PreviewsToolbar.js"));
+const PreviewsToolbar_1 = __importStar(require("./toolbar/PreviewsToolbar.js"));
 const mediaPreview_1 = require("./utils/mediaPreview.js");
 const PreviewsGridLargeView_1 = __importDefault(require("./views/PreviewsGridLargeView.js"));
 const PreviewsGridSmallView_1 = __importDefault(require("./views/PreviewsGridSmallView.js"));
 const PreviewsListView_1 = __importDefault(require("./views/PreviewsListView.js"));
 const PreviewsViewLoader_1 = __importDefault(require("./views/PreviewsViewLoader.js"));
+const media_1 = require("../../../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';
 function Previews() {
     const managerClient = (0, react_2.useManagerClient)();
     const queryClient = (0, react_query_1.useQueryClient)();
-    const { currentFolderId, setCurrentFolderId, folders, onCreateFolder, refetchFoldersTree, forcedMediaTypeFilter, externalEditFolderRequest, externalDeleteFolderRequest, selectable, selectedMediaIds, onSelect, onUpload, } = (0, MediaLibraryContext_1.useMediaLibrary)();
+    const { uploadMedia } = (0, media_1.useMedia)();
+    const { currentFolderId, currentFolderPath, setCurrentFolderId, folders, onCreateFolder, refetchFoldersTree, forcedMediaTypeFilter, externalEditFolderRequest, externalDeleteFolderRequest, selectable, selectedMediaIds, onSelect, onUpload, } = (0, MediaLibraryContext_1.useMediaLibrary)();
     const [viewMode, setViewMode] = (0, react_1.useState)('grid-sm');
     const [mediaTypeFilter, setMediaTypeFilter] = (0, react_1.useState)('all');
     const effectiveMediaTypeFilter = forcedMediaTypeFilter ?? mediaTypeFilter;
@@ -50,11 +89,17 @@ function Previews() {
     const [editTarget, setEditTarget] = (0, react_1.useState)(null);
     const [editName, setEditName] = (0, react_1.useState)('');
     const [moveTarget, setMoveTarget] = (0, react_1.useState)(null);
+    const [imageEditTarget, setImageEditTarget] = (0, react_1.useState)(null);
+    const [imageEditUrl, setImageEditUrl] = (0, react_1.useState)('');
+    const [isSavingImageEdit, setIsSavingImageEdit] = (0, react_1.useState)(false);
     const [destinationFolderId, setDestinationFolderId] = (0, react_1.useState)('');
+    const [selectionMode, setSelectionMode] = (0, react_1.useState)(false);
+    const [bulkSelectedIds, setBulkSelectedIds] = (0, react_1.useState)(() => new Set());
+    const [bulkDeleteOpen, setBulkDeleteOpen] = (0, react_1.useState)(false);
+    const [isBulkDeleting, setIsBulkDeleting] = (0, react_1.useState)(false);
+    const [isMoving, setIsMoving] = (0, react_1.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/' } };
@@ -63,10 +108,7 @@ function Previews() {
             case 'document':
                 return {
                     ...folderFilter,
-                    $or: [
-                        { mime: { $regex: '^application/' } },
-                        { mime: { $regex: '^text/' } },
-                    ],
+                    $or: [{ mime: { $regex: '^application/' } }, { mime: { $regex: '^text/' } }],
                 };
             default:
                 return folderFilter;
@@ -93,10 +135,13 @@ function Previews() {
         input: currentFolderId ? { parentId: currentFolderId } : {},
     });
     const deleteMutation = (0, react_2.useManagerMutation)('manager.delete');
+    const deleteFolderMutation = (0, react_2.useManagerMutation)('manager.media.deleteFolder');
     const updateMutation = (0, react_2.useManagerMutation)('manager.update');
-    const media = (data?.items ??
-        []);
+    const media = (data?.items ?? []);
     const childFoldersData = childFolders;
+    const canBulkSelect = !selectable;
+    const bulkSelectedIdsList = (0, react_1.useMemo)(() => Array.from(bulkSelectedIds), [bulkSelectedIds]);
+    const bulkSelectedCount = bulkSelectedIdsList.length;
     const folderOptions = (0, react_1.useMemo)(() => [
         { _id: null, name: 'Base folder', path: '/' },
         ...[...(folders ?? [])].sort((a, b) => a.path.localeCompare(b.path)),
@@ -119,7 +164,7 @@ function Previews() {
             return result.url;
         },
     });
-    const { expandedPreview, expandedPreviewUrl, setExpandedPreview, onMediaClick, } = (0, useExpandedPreview_1.useExpandedPreview)({
+    const { expandedPreview, expandedPreviewUrl, setExpandedPreview, onMediaClick } = (0, useExpandedPreview_1.useExpandedPreview)({
         selectable,
         onSelect,
         resolveOriginalUrl: async (item) => {
@@ -132,6 +177,67 @@ function Previews() {
             return result.url;
         },
     });
+    (0, react_1.useEffect)(() => {
+        setSelectionMode(false);
+        setBulkSelectedIds(new Set());
+    }, [currentFolderId, effectiveMediaTypeFilter]);
+    (0, react_1.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]);
+    (0, react_1.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);
+    };
     (0, react_1.useEffect)(() => {
         if (!externalEditFolderRequest)
             return;
@@ -149,21 +255,40 @@ 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);
+                    sonner_1.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);
                 sonner_1.toast.success(`${deleteTarget.contentType === 'MediaFolder' ? 'Folder' : 'File'} deleted successfully`);
             },
@@ -201,17 +326,29 @@ function Previews() {
             data: { name: nextName },
         }, {
             onSuccess: async () => {
-                await Promise.all([
-                    refetch(),
-                    refetchChildFolders(),
-                    refetchFoldersTree(),
-                ]);
+                await Promise.all([refetch(), refetchChildFolders(), refetchFoldersTree()]);
                 setEditTarget(null);
                 sonner_1.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: (0, react_2.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)) {
@@ -220,53 +357,145 @@ 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: (0, react_2.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('');
-                sonner_1.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();
+            sonner_1.toast.success(`${successCount} file${successCount === 1 ? '' : 's'} moved successfully`);
+        }
+        if (failedCount > 0) {
+            sonner_1.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) {
+            sonner_1.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('');
+            sonner_1.toast.success('Edited image saved');
+        }
+        catch (error) {
+            sonner_1.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();
+            sonner_1.toast.success('Image details saved');
+        }
+        catch (error) {
+            sonner_1.toast.error(error instanceof Error ? error.message : 'Could not save image details');
+        }
+    };
     const onRequestMove = (item) => {
         setMoveTarget({
             id: item._id,
@@ -275,6 +504,53 @@ 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();
+            sonner_1.toast.success(`${successCount} file${successCount === 1 ? '' : 's'} deleted successfully`);
+        }
+        if (failedCount > 0) {
+            sonner_1.toast.error(`${failedCount} file${failedCount === 1 ? '' : 's'} failed. ${getActionErrorMessage(lastError)}`);
+        }
+        setIsBulkDeleting(false);
+    };
     const ViewComponent = viewMode === 'list'
         ? PreviewsListView_1.default
         : viewMode === 'grid-sm'
@@ -288,9 +564,20 @@ 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,
@@ -301,25 +588,38 @@ function Previews() {
         effectiveMediaTypeFilter,
         isMediaTypeFilterLocked,
         viewMode,
+        selectionMode,
+        bulkSelectedIds,
+        bulkSelectedCount,
+        canBulkSelect,
         selectedMediaIds,
-        onMediaClick,
+        handleMediaClick,
+        toggleBulkSelection,
+        selectVisible,
+        onRequestSelect,
+        onRequestBulkMove,
+        clearBulkSelection,
         onRequestEdit,
+        onRequestImageEdit,
         onRequestMove,
         onRequestDelete,
         renderPreview,
     ]);
-    return ((0, jsx_runtime_1.jsx)(scroll_area_1.ScrollArea, { className: 'h-[calc(100%-2.5rem)] w-full', children: (0, jsx_runtime_1.jsxs)(MediaPreviewContext_1.MediaPreviewProvider, { value: mediaPreviewContextValue, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'mb-2 grid w-full grid-cols-2 gap-2 p-1 lg:grid-cols-6', children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { variant: 'outline', disabled: isCreatingFolder, size: 'lg', className: 'justify-start', onClick: () => {
+    return ((0, jsx_runtime_1.jsx)(scroll_area_1.ScrollArea, { className: "h-[calc(100%-2.5rem)] w-full", children: (0, jsx_runtime_1.jsxs)(MediaPreviewContext_1.MediaPreviewProvider, { value: mediaPreviewContextValue, children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-2 grid w-full grid-cols-2 gap-2 p-1 lg:grid-cols-6", "data-tour": "media-folders", children: [(0, jsx_runtime_1.jsxs)(button_1.Button, { variant: "outline", disabled: isCreatingFolder, size: "lg", className: "justify-start", onClick: () => {
                                 setIsCreateFolderDialogOpen(true);
-                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FolderPlus, { className: 'size-4' }), (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: "Create folder" })] }), isLoadingChildFolders
-                            ? Array.from({ length: 4 }).map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: 'flex items-center gap-2 rounded-lg border bg-card p-2', children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: 'h-7 w-7 rounded-md' }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: 'h-4 flex-1' })] }, `child-folder-skeleton-${index}`)))
+                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.FolderPlus, { className: "size-4" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: "Create folder" })] }), isLoadingChildFolders
+                            ? Array.from({ length: 4 }).map((_, index) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 rounded-lg border bg-card p-2", children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-7 w-7 rounded-md" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { className: "h-4 flex-1" })] }, `child-folder-skeleton-${index}`)))
                             : childFoldersData?.items?.length
-                                ? childFoldersData.items.map((folder) => ((0, jsx_runtime_1.jsxs)(context_menu_1.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(context_menu_1.ContextMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { className: 'size-4' }), (0, jsx_runtime_1.jsx)("span", { className: 'truncate', children: folder.name })] }) }), (0, jsx_runtime_1.jsx)(MediaContextMenuContent_1.default, { item: folder })] }, folder._id)))
-                                : null] }), (0, jsx_runtime_1.jsxs)(file_upload_1.FileUpload, { value: files, onValueChange: setFiles, onUpload: handleUpload, onFileReject: onFileReject, maxFiles: 5, className: 'relative w-full p-1', multiple: true, disabled: isUploading, children: [(0, jsx_runtime_1.jsx)(PreviewsToolbar_1.default, {}), (0, jsx_runtime_1.jsx)(file_upload_1.FileUploadList, { className: 'mb-3', children: files.map((file) => ((0, jsx_runtime_1.jsxs)(file_upload_1.FileUploadItem, { value: file, children: [(0, jsx_runtime_1.jsx)(file_upload_1.FileUploadItemPreview, {}), (0, jsx_runtime_1.jsxs)("div", { className: 'min-w-0 flex-1', children: [(0, jsx_runtime_1.jsx)(file_upload_1.FileUploadItemMetadata, {}), (0, jsx_runtime_1.jsx)(file_upload_1.FileUploadItemProgress, { className: 'mt-2' })] }), (0, jsx_runtime_1.jsx)(file_upload_1.FileUploadItemDelete, { className: 'rounded-md p-1 hover:bg-accent/40', children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: 'size-4' }) })] }, file.name + file.lastModified))) }), (0, jsx_runtime_1.jsx)(file_upload_1.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: (0, jsx_runtime_1.jsxs)("div", { className: 'relative w-full', children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { className: 'flex flex-col items-center gap-1 text-center', children: [(0, jsx_runtime_1.jsx)("div", { className: 'flex items-center justify-center rounded-full border p-2.5', children: (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: 'size-6 text-muted-foreground' }) }), (0, jsx_runtime_1.jsx)("p", { className: 'font-medium text-sm', children: "Drag & drop files here" }), (0, jsx_runtime_1.jsx)("p", { className: 'text-muted-foreground text-xs', children: "Upload max 5 files each up to 5MB" })] }) }), isLoading ? (0, jsx_runtime_1.jsx)(PreviewsViewLoader_1.default, { viewMode: viewMode }) : null, !isLoading && media.length === 0 ? ((0, jsx_runtime_1.jsx)(card_1.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 ? ((0, jsx_runtime_1.jsx)(ViewComponent, { media: media })) : null] }) })] }), (0, jsx_runtime_1.jsx)(MediaDeleteDialog_1.default, { target: deleteTarget, isLoading: deleteMutation.isPending, onClose: () => setDeleteTarget(null), onConfirm: handleConfirmDelete }), (0, jsx_runtime_1.jsx)(MediaEditDialog_1.default, { target: editTarget, value: editName, isLoading: updateMutation.isPending, onValueChange: setEditName, onClose: () => setEditTarget(null), onConfirm: handleConfirmEdit }), (0, jsx_runtime_1.jsx)(MediaMoveDialog_1.default, { target: moveTarget, folders: folderOptions, value: destinationFolderId, isLoading: updateMutation.isPending, onValueChange: setDestinationFolderId, onClose: () => {
+                                ? childFoldersData.items.map((folder) => ((0, jsx_runtime_1.jsxs)(context_menu_1.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(context_menu_1.ContextMenuTrigger, { asChild: true, children: (0, jsx_runtime_1.jsxs)(button_1.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: [(0, jsx_runtime_1.jsx)(lucide_react_1.Folder, { className: "size-4" }), (0, jsx_runtime_1.jsx)("span", { className: "truncate", children: folder.name })] }) }), (0, jsx_runtime_1.jsx)(MediaContextMenuContent_1.default, { item: folder })] }, folder._id)))
+                                : null] }), (0, jsx_runtime_1.jsxs)(file_upload_1.FileUpload, { value: files, onValueChange: setFiles, onUpload: handleUpload, onFileReject: onFileReject, maxFiles: 20, className: "relative w-full p-1", multiple: true, disabled: isUploading, children: [(0, jsx_runtime_1.jsx)(PreviewsToolbar_1.default, {}), (0, jsx_runtime_1.jsx)(file_upload_1.FileUploadList, { className: "mb-3", children: files.map((file) => ((0, jsx_runtime_1.jsxs)(file_upload_1.FileUploadItem, { value: file, children: [(0, jsx_runtime_1.jsx)(file_upload_1.FileUploadItemPreview, {}), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)(file_upload_1.FileUploadItemMetadata, {}), (0, jsx_runtime_1.jsx)(file_upload_1.FileUploadItemProgress, { className: "mt-2" })] }), (0, jsx_runtime_1.jsx)(file_upload_1.FileUploadItemDelete, { className: "rounded-md p-1 hover:bg-accent/40", children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { className: "size-4" }) })] }, file.name + file.lastModified))) }), (0, jsx_runtime_1.jsx)(file_upload_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-full", "data-tour": "media-grid", children: [(0, jsx_runtime_1.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: (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col items-center gap-1 text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center rounded-full border p-2.5", children: (0, jsx_runtime_1.jsx)(lucide_react_1.Upload, { className: "size-6 text-muted-foreground" }) }), (0, jsx_runtime_1.jsx)("p", { className: "font-medium text-sm", children: "Drag & drop files here" }), (0, jsx_runtime_1.jsx)("p", { className: "text-muted-foreground text-xs", children: "Upload max 20 files each up to 5MB" })] }) }), isLoading ? (0, jsx_runtime_1.jsx)(PreviewsViewLoader_1.default, { viewMode: viewMode }) : null, !isLoading && media.length === 0 ? ((0, jsx_runtime_1.jsx)(card_1.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 ? (0, jsx_runtime_1.jsx)(ViewComponent, { media: media }) : null, (0, jsx_runtime_1.jsx)(PreviewsToolbar_1.PreviewsSelectionToolbar, {})] }) })] }), (0, jsx_runtime_1.jsx)(MediaDeleteDialog_1.default, { target: deleteTarget, isLoading: deleteMutation.isPending || deleteFolderMutation.isPending, onClose: () => setDeleteTarget(null), onConfirm: handleConfirmDelete }), (0, jsx_runtime_1.jsx)(MediaEditDialog_1.default, { target: editTarget, value: editName, isLoading: updateMutation.isPending, onValueChange: setEditName, onClose: () => setEditTarget(null), onConfirm: handleConfirmEdit }), (0, jsx_runtime_1.jsx)(MediaMoveDialog_1.default, { target: moveTarget, folders: folderOptions, value: destinationFolderId, isLoading: isMoving || updateMutation.isPending, onValueChange: setDestinationFolderId, onClose: () => {
                         setMoveTarget(null);
                         setDestinationFolderId('');
-                    }, onConfirm: handleConfirmMove }), (0, jsx_runtime_1.jsx)(MediaCreateFolderDialog_1.default, { open: isCreateFolderDialogOpen, value: newFolderName, isLoading: isCreatingFolder, onValueChange: setNewFolderName, onClose: () => {
+                    }, onConfirm: () => void handleConfirmMove() }), (0, jsx_runtime_1.jsx)(MediaImageEditorDialog_1.default, { target: imageEditTarget, imageUrl: imageEditUrl, isSaving: isSavingImageEdit, onClose: () => {
+                        setImageEditTarget(null);
+                        setImageEditUrl('');
+                    }, onSave: handleSaveImageEdit }), (0, jsx_runtime_1.jsx)(dialog_1.Dialog, { open: bulkDeleteOpen, onOpenChange: setBulkDeleteOpen, children: (0, jsx_runtime_1.jsxs)(dialog_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(dialog_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(dialog_1.DialogTitle, { children: "Delete selected files" }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogDescription, { children: ["This will delete ", bulkSelectedCount, " selected file", bulkSelectedCount === 1 ? '' : 's', "."] })] }), (0, jsx_runtime_1.jsxs)(dialog_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { variant: "ghost", onClick: () => setBulkDeleteOpen(false), children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { variant: "destructive", loading: isBulkDeleting, disabled: bulkSelectedCount === 0, onClick: () => void handleConfirmBulkDelete(), children: "Delete" })] })] }) }), (0, jsx_runtime_1.jsx)(MediaCreateFolderDialog_1.default, { open: isCreateFolderDialogOpen, value: newFolderName, isLoading: isCreatingFolder, onValueChange: setNewFolderName, onClose: () => {
                         setIsCreateFolderDialogOpen(false);
                         setNewFolderName('');
-                    }, onConfirm: handleConfirmCreateFolder }), (0, jsx_runtime_1.jsx)(ExpandedPreviewDialog_1.default, { preview: expandedPreview, previewUrl: expandedPreviewUrl, onClose: () => setExpandedPreview(null) })] }) }));
+                    }, onConfirm: handleConfirmCreateFolder }), (0, jsx_runtime_1.jsx)(ExpandedPreviewDialog_1.default, { preview: expandedPreview, previewUrl: expandedPreviewUrl, isSaving: updateMutation.isPending, onClose: () => setExpandedPreview(null), onSaveDetails: handleSavePreviewDetails })] }) }));
 }
 //# sourceMappingURL=Previews.js.map