@unciatech/file-manager 0.0.31 → 0.0.33

package/dist/index.cjs

@@ -109,8 +109,89 @@ var VIDEO_SOURCE = {
 var VIDEO_SOURCES = Object.values(VIDEO_SOURCE);
 
 // hooks/use-file-handlers.ts
+var import_react2 = require("react");
+
+// hooks/use-browser-router.ts
 var import_react = require("react");
-var import_navigation = require("next/navigation");
+var LOCATION_CHANGE_EVENT = "locationchange";
+if (typeof window !== "undefined" && !window.__navigationPatched) {
+  window.__navigationPatched = true;
+  const originalPushState = window.history.pushState;
+  const originalReplaceState = window.history.replaceState;
+  window.history.pushState = function(...args) {
+    const result = originalPushState.apply(this, args);
+    setTimeout(() => window.dispatchEvent(new Event(LOCATION_CHANGE_EVENT)), 0);
+    return result;
+  };
+  window.history.replaceState = function(...args) {
+    const result = originalReplaceState.apply(this, args);
+    setTimeout(() => window.dispatchEvent(new Event(LOCATION_CHANGE_EVENT)), 0);
+    return result;
+  };
+}
+function useBrowserRouter({ basePath, onNavigate } = {}) {
+  const [pathname, setPathname] = (0, import_react.useState)(
+    () => typeof window !== "undefined" ? window.location.pathname : "/"
+  );
+  const [search, setSearch] = (0, import_react.useState)(
+    () => typeof window !== "undefined" ? window.location.search : ""
+  );
+  (0, import_react.useEffect)(() => {
+    const onUpdate = () => {
+      setPathname(window.location.pathname);
+      setSearch(window.location.search);
+    };
+    window.addEventListener("popstate", onUpdate);
+    window.addEventListener(LOCATION_CHANGE_EVENT, onUpdate);
+    return () => {
+      window.removeEventListener("popstate", onUpdate);
+      window.removeEventListener(LOCATION_CHANGE_EVENT, onUpdate);
+    };
+  }, []);
+  const push = (0, import_react.useCallback)(
+    (url, options) => {
+      if (onNavigate) {
+        onNavigate(url, options);
+      } else {
+        history.pushState(null, "", url);
+        if ((options == null ? void 0 : options.scroll) !== false) {
+          window.scrollTo(0, 0);
+        }
+      }
+    },
+    [onNavigate]
+  );
+  const replace = (0, import_react.useCallback)(
+    (url) => {
+      if (onNavigate) {
+        onNavigate(url, { replace: true });
+      } else {
+        history.replaceState(null, "", url);
+      }
+    },
+    [onNavigate]
+  );
+  const back = (0, import_react.useCallback)(() => {
+    history.back();
+  }, []);
+  const searchParams = (0, import_react.useMemo)(
+    () => new URLSearchParams(search),
+    [search]
+  );
+  const params = (0, import_react.useMemo)(() => {
+    if (!basePath) return {};
+    const base = basePath.replace(/\/$/, "");
+    const normalizedBase = base.startsWith("/") ? base : `/${base}`;
+    if (!pathname.startsWith(normalizedBase)) return {};
+    const rest = pathname.slice(normalizedBase.length).replace(/^\//, "");
+    if (!rest) return {};
+    const segments = rest.split("/").filter(Boolean);
+    return { path: segments[0] };
+  }, [pathname, basePath]);
+  return { push, replace, back, pathname, searchParams, params };
+}
+
+// hooks/use-file-handlers.ts
 var import_sonner = require("sonner");
 var toggleFilesInSelection = (prev, filesToToggle) => {
   let updated = [...prev];
@@ -160,8 +241,8 @@ function useFileHandlers(state) {
     setIsLoading,
     setFileDetailsModalFile
   } = state;
-  const router = (0, import_navigation.useRouter)();
-  const handleFileClick = (0, import_react.useCallback)(
+  const { push } = useBrowserRouter({ basePath: state.basePath, onNavigate: state.onNavigate });
+  const handleFileClick = (0, import_react2.useCallback)(
     (file, event, isCheckboxClick = false) => {
       const fileArray = [file];
       const isExplicitSelection = isCheckboxClick || event && (event.metaKey || event.ctrlKey);
@@ -187,7 +268,7 @@ function useFileHandlers(state) {
     },
     [mode, selectionMode, isInSelectionMode, setSelectedFiles, onFilesSelected, onClose, setFileDetailsModalFile]
   );
-  const handleFolderClick = (0, import_react.useCallback)(
+  const handleFolderClick = (0, import_react2.useCallback)(
     (folder, event, isCheckboxClick = false) => {
       const folderId = folder ? folder.id : null;
       const isExplicitSelection = isCheckboxClick || event && (event.metaKey || event.ctrlKey);
@@ -202,8 +283,9 @@ function useFileHandlers(state) {
       if (mode === MODE.PAGE) {
         setIsLoading(true);
         const path = basePath != null ? basePath : "/media";
-        const newUrl = folderId === null ? path : `${path}/${folderId}`;
-        router.push(newUrl);
+        const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+        const newUrl = folderId === null ? normalizedPath : `${normalizedPath}/${folderId}`;
+        push(newUrl);
       } else {
         setIsLoading(true);
         setSelectedFiles([]);
@@ -216,16 +298,16 @@ function useFileHandlers(state) {
         }
         params.set("page", "1");
         const newUrl = `${globalThis.location.pathname}?${params.toString()}`;
-        router.push(newUrl, { scroll: false });
+        push(newUrl, { scroll: false });
       }
     },
-    [isInSelectionMode, mode, router, setSelectedFolders, setSelectedFiles, basePath, setIsLoading]
+    [isInSelectionMode, mode, push, setSelectedFolders, setSelectedFiles, basePath, setIsLoading]
   );
-  const handleClearSelection = (0, import_react.useCallback)(() => {
+  const handleClearSelection = (0, import_react2.useCallback)(() => {
     setSelectedFiles([]);
     setSelectedFolders([]);
   }, [setSelectedFiles, setSelectedFolders]);
-  const handleSelectAllGlobal = (0, import_react.useCallback)(
+  const handleSelectAllGlobal = (0, import_react2.useCallback)(
     (checked) => {
       if (checked) {
         setSelectedFiles(files);
@@ -237,10 +319,10 @@ function useFileHandlers(state) {
     },
     [files, folders, mode, setSelectedFiles, setSelectedFolders]
   );
-  const refreshData = (0, import_react.useCallback)(async (silent = false) => {
+  const refreshData = (0, import_react2.useCallback)(async (silent = false) => {
     await loadData(silent);
   }, [loadData]);
-  const uploadFiles = (0, import_react.useCallback)(
+  const uploadFiles = (0, import_react2.useCallback)(
     async (fileUploadInput) => {
       var _a;
       try {
@@ -260,7 +342,7 @@ function useFileHandlers(state) {
     },
     [currentFolder, provider, refreshData, setSelectedFiles]
   );
-  const createFolder = (0, import_react.useCallback)(
+  const createFolder = (0, import_react2.useCallback)(
     async (name) => {
       var _a;
       try {
@@ -280,7 +362,7 @@ function useFileHandlers(state) {
     },
     [currentFolder, provider, refreshData, setSelectedFiles]
   );
-  const bulkMove = (0, import_react.useCallback)(
+  const bulkMove = (0, import_react2.useCallback)(
     async (targetFolderId) => {
       try {
         if (selectedFiles.length > 0) {
@@ -319,7 +401,7 @@ function useFileHandlers(state) {
       setSelectedFolders
     ]
   );
-  const renameFolder = (0, import_react.useCallback)(
+  const renameFolder = (0, import_react2.useCallback)(
     async (folderId, newName) => {
       try {
         setFolders(
@@ -340,7 +422,7 @@ function useFileHandlers(state) {
     },
     [provider, refreshData, setFolders]
   );
-  const updateFileMetadata = (0, import_react.useCallback)(
+  const updateFileMetadata = (0, import_react2.useCallback)(
     async (fileId, metadata) => {
       try {
         setFiles(
@@ -366,7 +448,7 @@ function useFileHandlers(state) {
     },
     [provider, refreshData, setFiles]
   );
-  const bulkDelete = (0, import_react.useCallback)(async () => {
+  const bulkDelete = (0, import_react2.useCallback)(async () => {
     try {
       if (selectedFiles.length > 0) {
         await provider.deleteFiles(selectedFiles.map((f) => f.id));
@@ -414,8 +496,7 @@ function useFileHandlers(state) {
 }
 
 // hooks/use-file-state.ts
-var import_navigation2 = require("next/navigation");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_sonner2 = require("sonner");
 function useFileState(options) {
   const {
@@ -427,16 +508,14 @@ function useFileState(options) {
     provider,
     onFilesSelected,
     onClose,
-    basePath
+    basePath,
+    onNavigate
   } = options;
-  const params = (0, import_navigation2.useParams)();
-  const searchParams = (0, import_navigation2.useSearchParams)();
-  const router = (0, import_navigation2.useRouter)();
-  const pathname = (0, import_navigation2.usePathname)();
+  const { params, searchParams, push, replace, pathname } = useBrowserRouter({ basePath, onNavigate });
   const pageFromUrl = Math.max(1, Number.parseInt(searchParams.get("page") || "1", 10));
   const limitFromUrl = Math.max(1, Number.parseInt(searchParams.get("limit") || "24", 10));
   const queryFromUrl = searchParams.get("query") || "";
-  const folderId = (0, import_react2.useMemo)(() => {
+  const folderId = (0, import_react3.useMemo)(() => {
     if (mode === MODE.PAGE && (params == null ? void 0 : params.path)) {
       const path = Array.isArray(params.path) ? params.path[0] : params.path;
       return typeof path === "string" && /^\d+$/.test(path) ? Number(path) : null;
@@ -449,53 +528,59 @@ function useFileState(options) {
     }
     return initialFolderId != null ? initialFolderId : null;
   }, [mode, params, searchParams, initialFolderId]);
-  const [files, setFiles] = (0, import_react2.useState)([]);
-  const [folders, setFolders] = (0, import_react2.useState)([]);
-  const [selectedFiles, setSelectedFiles] = (0, import_react2.useState)([]);
-  const [selectedFolders, setSelectedFolders] = (0, import_react2.useState)([]);
-  const [currentFolder, setCurrentFolder] = (0, import_react2.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react2.useState)(true);
-  const [pagination, setPagination] = (0, import_react2.useState)({
+  const [files, setFiles] = (0, import_react3.useState)([]);
+  const [folders, setFolders] = (0, import_react3.useState)([]);
+  const [selectedFiles, setSelectedFiles] = (0, import_react3.useState)([]);
+  const [selectedFolders, setSelectedFolders] = (0, import_react3.useState)([]);
+  const [currentFolder, setCurrentFolder] = (0, import_react3.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react3.useState)(true);
+  const [pagination, setPagination] = (0, import_react3.useState)({
     currentPage: pageFromUrl,
     totalPages: 1,
     totalFiles: 0,
     filesPerPage: limitFromUrl
   });
-  const currentFolderRef = (0, import_react2.useRef)(null);
+  const currentFolderRef = (0, import_react3.useRef)(null);
   currentFolderRef.current = currentFolder;
-  const [searchQuery, setSearchQuery] = (0, import_react2.useState)(queryFromUrl);
-  const [debouncedSearchQuery, setDebouncedSearchQuery] = (0, import_react2.useState)(queryFromUrl);
-  (0, import_react2.useEffect)(() => {
+  const [searchQuery, setSearchQuery] = (0, import_react3.useState)(queryFromUrl);
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = (0, import_react3.useState)(queryFromUrl);
+  (0, import_react3.useEffect)(() => {
     const handler = setTimeout(() => {
       setDebouncedSearchQuery(searchQuery);
     }, 300);
     return () => clearTimeout(handler);
   }, [searchQuery]);
-  const prevFolderIdRef = (0, import_react2.useRef)(folderId);
-  const updateUrlParams = (0, import_react2.useCallback)((page, limit) => {
-    const params2 = new URLSearchParams(searchParams.toString());
-    params2.set("page", page.toString());
-    params2.set("limit", limit.toString());
-    router.push(`${pathname}?${params2.toString()}`, { scroll: false });
-  }, [router, pathname, searchParams]);
-  (0, import_react2.useEffect)(() => {
+  const prevFolderIdRef = (0, import_react3.useRef)(folderId);
+  const updateUrlParams = (0, import_react3.useCallback)((page, limit, replaceUrl = false) => {
+    const urlParams = new URLSearchParams(searchParams.toString());
+    urlParams.set("page", page.toString());
+    urlParams.set("limit", limit.toString());
+    const qs = urlParams.toString();
+    const newUrl = qs ? `${pathname}?${qs}` : pathname;
+    if (replaceUrl) {
+      replace(newUrl);
+    } else {
+      push(newUrl, { scroll: false });
+    }
+  }, [push, replace, pathname, searchParams]);
+  (0, import_react3.useEffect)(() => {
     setPagination((prev) => __spreadProps(__spreadValues({}, prev), {
       currentPage: pageFromUrl,
       filesPerPage: limitFromUrl
     }));
     setSearchQuery(queryFromUrl);
   }, [pageFromUrl, limitFromUrl, queryFromUrl]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     if (folderId !== prevFolderIdRef.current) {
       if (mode === MODE.PAGE) {
-        updateUrlParams(1, limitFromUrl);
+        updateUrlParams(1, limitFromUrl, true);
       }
       prevFolderIdRef.current = folderId;
     }
   }, [folderId, limitFromUrl, updateUrlParams, mode]);
   const currentPage = pagination.currentPage;
   const filesPerPage = pagination.filesPerPage;
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     let cancelled = false;
     const syncAndLoad = async () => {
       if (folderId && (!currentFolderRef.current || currentFolderRef.current.id !== folderId)) {
@@ -574,18 +659,18 @@ function useFileState(options) {
     filesPerPage,
     debouncedSearchQuery
   ]);
-  (0, import_react2.useEffect)(() => {
+  (0, import_react3.useEffect)(() => {
     setSelectedFolders([]);
     setSelectedFiles([]);
   }, [currentFolder]);
-  const [isUploadModalOpen, setIsUploadModalOpen] = (0, import_react2.useState)(false);
-  const [isCreateFolderModalOpen, setIsCreateFolderModalOpen] = (0, import_react2.useState)(false);
-  const [isSearchModalOpen, setIsSearchModalOpen] = (0, import_react2.useState)(false);
-  const [isMoveFileModalOpen, setIsMoveFileModalOpen] = (0, import_react2.useState)(false);
-  const [isRenameFolderModalOpen, setIsRenameFolderModalOpen] = (0, import_react2.useState)(false);
-  const [folderToRename, setFolderToRename] = (0, import_react2.useState)(null);
-  const [fileDetailsModalFile, setFileDetailsModalFile] = (0, import_react2.useState)(null);
-  const loadData = (0, import_react2.useCallback)(async (silent = false) => {
+  const [isUploadModalOpen, setIsUploadModalOpen] = (0, import_react3.useState)(false);
+  const [isCreateFolderModalOpen, setIsCreateFolderModalOpen] = (0, import_react3.useState)(false);
+  const [isSearchModalOpen, setIsSearchModalOpen] = (0, import_react3.useState)(false);
+  const [isMoveFileModalOpen, setIsMoveFileModalOpen] = (0, import_react3.useState)(false);
+  const [isRenameFolderModalOpen, setIsRenameFolderModalOpen] = (0, import_react3.useState)(false);
+  const [folderToRename, setFolderToRename] = (0, import_react3.useState)(null);
+  const [fileDetailsModalFile, setFileDetailsModalFile] = (0, import_react3.useState)(null);
+  const loadData = (0, import_react3.useCallback)(async (silent = false) => {
     var _a;
     if (!silent) {
       setIsLoading(true);
@@ -621,7 +706,7 @@ function useFileState(options) {
   }, [currentFolder, mode, acceptedFileTypesForModal, allowedFileTypes, provider, currentPage, filesPerPage, debouncedSearchQuery]);
   const isInSelectionMode = () => selectedFiles.length > 0 || selectedFolders.length > 0;
   const getCurrentFolder = () => currentFolder;
-  const getSelectionState = (0, import_react2.useMemo)(() => {
+  const getSelectionState = (0, import_react3.useMemo)(() => {
     return () => {
       const totalItems = files.length + (mode === MODE.PAGE ? folders.length : 0);
       const selectedItems = selectedFiles.length + selectedFolders.length;
@@ -630,23 +715,24 @@ function useFileState(options) {
       return "indeterminate";
     };
   }, [files.length, folders.length, selectedFiles.length, selectedFolders.length, mode]);
-  const handlePageChange = (0, import_react2.useCallback)((newPage) => {
+  const handlePageChange = (0, import_react3.useCallback)((newPage) => {
     setPagination((prev) => __spreadProps(__spreadValues({}, prev), { currentPage: newPage }));
     if (mode === MODE.PAGE) {
       updateUrlParams(newPage, filesPerPage);
     }
   }, [updateUrlParams, filesPerPage, mode]);
-  const updateSearchQuery = (0, import_react2.useCallback)((newQuery) => {
+  const updateSearchQuery = (0, import_react3.useCallback)((newQuery) => {
     setSearchQuery(newQuery);
-    const params2 = new URLSearchParams(searchParams.toString());
+    const urlParams = new URLSearchParams(searchParams.toString());
     if (newQuery.trim()) {
-      params2.set("query", newQuery);
-      params2.set("page", "1");
+      urlParams.set("query", newQuery);
+      urlParams.set("page", "1");
     } else {
-      params2.delete("query");
+      urlParams.delete("query");
     }
-    router.push(`${pathname}?${params2.toString()}`, { scroll: false });
-  }, [router, pathname, searchParams]);
+    const qs = urlParams.toString();
+    replace(qs ? `${pathname}?${qs}` : pathname);
+  }, [replace, pathname, searchParams]);
   return {
     // State
     files,
@@ -697,14 +783,15 @@ function useFileState(options) {
     provider,
     onFilesSelected,
     onClose,
-    basePath
+    basePath,
+    onNavigate
   };
 }
 
 // context/file-manager-context.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var FileManagerContext = (0, import_react3.createContext)(void 0);
+var FileManagerContext = (0, import_react4.createContext)(void 0);
 function FileManagerProvider({
   children,
   mode = MODE.PAGE,
@@ -717,8 +804,9 @@ function FileManagerProvider({
   provider,
   basePath = "/media",
   maxUploadFiles = 50,
-  maxUploadSize = 100 * 1024 * 1024
+  maxUploadSize = 100 * 1024 * 1024,
   // 100MB
+  onNavigate
 }) {
   const state = useFileState({
     mode,
@@ -729,10 +817,11 @@ function FileManagerProvider({
     provider,
     onFilesSelected,
     onClose,
-    basePath
+    basePath,
+    onNavigate
   });
   const handlers = useFileHandlers(state);
-  const value = (0, import_react3.useMemo)(() => ({
+  const value = (0, import_react4.useMemo)(() => ({
     // State
     files: state.files,
     folders: state.folders,
@@ -794,7 +883,7 @@ function FileManagerProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FileManagerContext.Provider, { value, children });
 }
 function useFileManager() {
-  const context = (0, import_react3.useContext)(FileManagerContext);
+  const context = (0, import_react4.useContext)(FileManagerContext);
   if (context === void 0) {
     throw new Error("useFileManager must be used within a FileManagerProvider");
   }
@@ -2275,14 +2364,14 @@ function FileManagerHeader({
 }
 
 // components/modals/upload-modal.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // components/ui/dialog.tsx
 var import_class_variance_authority2 = require("class-variance-authority");
 var import_radix_ui2 = require("radix-ui");
 var import_jsx_runtime45 = require("react/jsx-runtime");
 var dialogContentVariants = (0, import_class_variance_authority2.cva)(
-  "flex flex-col fixed outline-0 z-50 border border-border bg-background shadow-lg shadow-black/5 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl",
+  "flex flex-col fixed outline-0 z-50 border border-border bg-background text-foreground shadow-lg shadow-black/5 duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 rounded-2xl",
   {
     variants: {
       variant: {
@@ -2671,7 +2760,7 @@ function getFileSize(bytes) {
 }
 
 // hooks/use-file-upload.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 var useFileUpload = (options = {}) => {
   const {
     maxFiles = Number.POSITIVE_INFINITY,
@@ -2683,7 +2772,7 @@ var useFileUpload = (options = {}) => {
     onFilesAdded,
     onError
   } = options;
-  const [state, setState] = (0, import_react4.useState)({
+  const [state, setState] = (0, import_react5.useState)({
     files: initialFiles.map((file) => ({
       file,
       id: file.id,
@@ -2692,8 +2781,8 @@ var useFileUpload = (options = {}) => {
     isDragging: false,
     errors: []
   });
-  const inputRef = (0, import_react4.useRef)(null);
-  (0, import_react4.useEffect)(() => {
+  const inputRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
     return () => {
       state.files.forEach((file) => {
         if (file.preview && file.file instanceof File) {
@@ -2702,7 +2791,7 @@ var useFileUpload = (options = {}) => {
       });
     };
   }, [state.files]);
-  const validateFile = (0, import_react4.useCallback)(
+  const validateFile = (0, import_react5.useCallback)(
     (file) => {
       if (file.size > maxSize) {
         return `File "${file.name}" exceeds the maximum size of ${getFileSize(maxSize)}.`;
@@ -2729,19 +2818,19 @@ var useFileUpload = (options = {}) => {
     },
     [accept, maxSize]
   );
-  const createPreview = (0, import_react4.useCallback)((file) => {
+  const createPreview = (0, import_react5.useCallback)((file) => {
     if (file instanceof File) {
       return URL.createObjectURL(file);
     }
     return file.url;
   }, []);
-  const generateUniqueId = (0, import_react4.useCallback)((file) => {
+  const generateUniqueId = (0, import_react5.useCallback)((file) => {
     if (file instanceof File) {
       return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
     }
     return file.id.toString();
   }, []);
-  const clearFiles = (0, import_react4.useCallback)(() => {
+  const clearFiles = (0, import_react5.useCallback)(() => {
     setState((prev) => {
       for (const file of prev.files) {
         if (file.preview && file.file instanceof File && file.file.type.startsWith("image/")) {
@@ -2759,7 +2848,7 @@ var useFileUpload = (options = {}) => {
       return newState;
     });
   }, [onFilesChange]);
-  const addFiles = (0, import_react4.useCallback)(
+  const addFiles = (0, import_react5.useCallback)(
     (newFiles) => {
       if (!newFiles || newFiles.length === 0) return;
       const newFilesArray = Array.from(newFiles);
@@ -2834,7 +2923,7 @@ var useFileUpload = (options = {}) => {
       onError
     ]
   );
-  const removeFile = (0, import_react4.useCallback)(
+  const removeFile = (0, import_react5.useCallback)(
     (id) => {
       setState((prev) => {
         const fileToRemove = prev.files.find((file) => file.id === id);
@@ -2851,17 +2940,17 @@ var useFileUpload = (options = {}) => {
     },
     [onFilesChange]
   );
-  const clearErrors = (0, import_react4.useCallback)(() => {
+  const clearErrors = (0, import_react5.useCallback)(() => {
     setState((prev) => __spreadProps(__spreadValues({}, prev), {
       errors: []
     }));
   }, []);
-  const handleDragEnter = (0, import_react4.useCallback)((e) => {
+  const handleDragEnter = (0, import_react5.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     setState((prev) => __spreadProps(__spreadValues({}, prev), { isDragging: true }));
   }, []);
-  const handleDragLeave = (0, import_react4.useCallback)((e) => {
+  const handleDragLeave = (0, import_react5.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     if (e.currentTarget.contains(e.relatedTarget)) {
@@ -2869,11 +2958,11 @@ var useFileUpload = (options = {}) => {
     }
     setState((prev) => __spreadProps(__spreadValues({}, prev), { isDragging: false }));
   }, []);
-  const handleDragOver = (0, import_react4.useCallback)((e) => {
+  const handleDragOver = (0, import_react5.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
-  const handleDrop = (0, import_react4.useCallback)(
+  const handleDrop = (0, import_react5.useCallback)(
     (e) => {
       var _a;
       e.preventDefault();
@@ -2893,7 +2982,7 @@ var useFileUpload = (options = {}) => {
     },
     [addFiles, multiple]
   );
-  const handleFileChange = (0, import_react4.useCallback)(
+  const handleFileChange = (0, import_react5.useCallback)(
     (e) => {
       if (e.target.files && e.target.files.length > 0) {
         addFiles(e.target.files);
@@ -2901,12 +2990,12 @@ var useFileUpload = (options = {}) => {
     },
     [addFiles]
   );
-  const openFileDialog = (0, import_react4.useCallback)(() => {
+  const openFileDialog = (0, import_react5.useCallback)(() => {
     if (inputRef.current) {
       inputRef.current.click();
     }
   }, []);
-  const getInputProps = (0, import_react4.useCallback)(
+  const getInputProps = (0, import_react5.useCallback)(
     (props = {}) => {
       var _a;
       return __spreadProps(__spreadValues({}, props), {
@@ -3146,9 +3235,9 @@ function UploadCloudIcon(props) {
 }
 
 // components/ui/close-button.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_jsx_runtime50 = require("react/jsx-runtime");
-var CloseButton = (0, import_react5.forwardRef)(
+var CloseButton = (0, import_react6.forwardRef)(
   (_a, ref) => {
     var _b = _a, { className, iconClassName, label = "Close" } = _b, props = __objRest(_b, ["className", "iconClassName", "label"]);
     return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
@@ -3178,11 +3267,11 @@ var CloseButton = (0, import_react5.forwardRef)(
 CloseButton.displayName = "CloseButton";
 
 // components/cards/image-card.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function ImageCard({ file }) {
   var _a;
-  const [hasError, setHasError] = (0, import_react6.useState)(false);
+  const [hasError, setHasError] = (0, import_react7.useState)(false);
   const imageSrc = file.previewUrl || file.url;
   if (imageSrc && !hasError) {
     return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
@@ -3207,10 +3296,10 @@ function ImageCardMetadata({ file }) {
 }
 
 // components/cards/video-card.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function VideoCard({ file, className }) {
-  const [hasError, setHasError] = (0, import_react7.useState)(false);
+  const [hasError, setHasError] = (0, import_react8.useState)(false);
   if (file.previewUrl && !hasError) {
     return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "relative w-full h-full", children: [
       /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
@@ -3361,7 +3450,7 @@ function UploadModal() {
   } = useFileManager();
   const acceptString = fileTypesToAccept(allowedFileTypes);
   const fileTypesDescription = getFileTypesDescription(allowedFileTypes);
-  const [uploadItems, setUploadItems] = (0, import_react8.useState)([]);
+  const [uploadItems, setUploadItems] = (0, import_react9.useState)([]);
   const [
     { isDragging, errors },
     {
@@ -3466,7 +3555,7 @@ function UploadModal() {
         "div",
         {
           className: cn(
-            "relative rounded-lg border-dashed border-[2.5px] bg-muted border-border px-6 py-16 text-center transition-colors mb-4",
+            "relative w-full rounded-xl border-2 border-dashed bg-muted border-muted-foreground/25 px-6 py-16 text-center transition-colors mb-4",
             isDragging ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-muted-foreground/50"
           ),
           onDragEnter: handleDragEnter,
@@ -3521,8 +3610,8 @@ function UploadModal() {
             iconClassName: "size-3"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative overflow-hidden rounded-lg border bg-card transition-colors", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "relative aspect-square bg-muted border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "w-[75%] h-[75%] flex items-center justify-center", children: fileItem.status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative w-full h-full flex items-center justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative overflow-hidden rounded-lg border border-muted-foreground/25 bg-card transition-colors", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "relative aspect-square bg-muted border-muted-foreground/25", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "flex h-full items-center justify-center p-4", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "w-[75%] h-[75%] flex items-center justify-center", children: fileItem.status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "relative w-full h-full flex items-center justify-center", children: [
             /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("svg", { className: "size-12 -rotate-90 absolute", viewBox: "0 0 48 48", children: [
               /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
                 "circle",
@@ -3594,7 +3683,7 @@ function UploadModal() {
 }
 
 // components/modals/create-folder.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // components/ui/input.tsx
 var import_class_variance_authority4 = require("class-variance-authority");
@@ -3742,7 +3831,7 @@ function CreateFolderModal() {
     folderToRename,
     setFolderToRename
   } = useFileManager();
-  const [editedName, setEditedName] = (0, import_react9.useState)(null);
+  const [editedName, setEditedName] = (0, import_react10.useState)(null);
   const isRenameMode = isRenameFolderModalOpen;
   const isOpen = isCreateFolderModalOpen || isRenameFolderModalOpen;
   const defaultFolderName = isRenameMode && folderToRename ? folderToRename.name : "";
@@ -3821,7 +3910,7 @@ function CreateFolderModal() {
 }
 
 // components/modals/move-modal.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 
 // lib/truncate-name.ts
 function middleTruncate(text, maxLength = 30) {
@@ -3832,16 +3921,16 @@ function middleTruncate(text, maxLength = 30) {
 }
 
 // hooks/use-intersection-observer.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useIntersectionObserver({
   threshold = 0,
   root = null,
   rootMargin = "0%"
 } = {}) {
-  const [entry, setEntry] = (0, import_react10.useState)();
-  const [node, setNode] = (0, import_react10.useState)(null);
-  const observer = (0, import_react10.useRef)(null);
-  (0, import_react10.useEffect)(() => {
+  const [entry, setEntry] = (0, import_react11.useState)();
+  const [node, setNode] = (0, import_react11.useState)(null);
+  const observer = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     if (observer.current) {
       observer.current.disconnect();
     }
@@ -3876,7 +3965,7 @@ function FolderTreeItem({
   treeState
 }) {
   var _a;
-  const [isOpen, setIsOpen] = (0, import_react11.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
   const hasChildren = ((_a = folder.folderCount) != null ? _a : 0) > 0;
   const isSelected = selectedFolderId === folder.id;
   const isDisabled = disabledFolderIds.includes(folder.id);
@@ -3889,7 +3978,7 @@ function FolderTreeItem({
     rootMargin: "100px"
   });
   const hasMore = pagination && pagination.currentPage < pagination.totalPages;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isOpen && (entry == null ? void 0 : entry.isIntersecting) && hasMore && !isLoading) {
       const nextPage = ((pagination == null ? void 0 : pagination.currentPage) || 1) + 1;
       onLoadChildren(folder.id, nextPage);
@@ -3977,15 +4066,15 @@ function MoveModal() {
     bulkMove,
     provider
   } = useFileManager();
-  const [targetFolderId, setTargetFolderId] = (0, import_react11.useState)(void 0);
-  const [treeState, setTreeState] = (0, import_react11.useState)({
+  const [targetFolderId, setTargetFolderId] = (0, import_react12.useState)(void 0);
+  const [treeState, setTreeState] = (0, import_react12.useState)({
     folders: /* @__PURE__ */ new Map(),
     loading: /* @__PURE__ */ new Set(),
     loaded: /* @__PURE__ */ new Set(),
     pagination: /* @__PURE__ */ new Map()
   });
-  const fetchingRef = (0, import_react11.useRef)(/* @__PURE__ */ new Set());
-  const hasInitializedRef = (0, import_react11.useRef)(false);
+  const fetchingRef = (0, import_react12.useRef)(/* @__PURE__ */ new Set());
+  const hasInitializedRef = (0, import_react12.useRef)(false);
   const { ref: rootObserverRef, entry: rootEntry } = useIntersectionObserver({
     threshold: 0.1,
     rootMargin: "100px"
@@ -3995,7 +4084,7 @@ function MoveModal() {
   const isRootLoading = treeState.loading.has(null);
   const disabledFolderIds = selectedFolders.map((f) => f.id);
   const rootFolders = treeState.folders.get(null) || [];
-  const loadFolders = (0, import_react11.useCallback)(async (folderId, page = 1) => {
+  const loadFolders = (0, import_react12.useCallback)(async (folderId, page = 1) => {
     if (fetchingRef.current.has(folderId)) return;
     fetchingRef.current.add(folderId);
     setTreeState((prev) => __spreadProps(__spreadValues({}, prev), {
@@ -4035,7 +4124,7 @@ function MoveModal() {
       fetchingRef.current.delete(folderId);
     }
   }, [provider]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isMoveFileModalOpen) {
       if (!hasInitializedRef.current) {
         hasInitializedRef.current = true;
@@ -4045,7 +4134,7 @@ function MoveModal() {
       hasInitializedRef.current = false;
     }
   }, [isMoveFileModalOpen, loadFolders]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (isMoveFileModalOpen && (rootEntry == null ? void 0 : rootEntry.isIntersecting) && rootHasMore && !isRootLoading) {
       const nextPage = ((rootPagination == null ? void 0 : rootPagination.currentPage) || 1) + 1;
       loadFolders(null, nextPage);
@@ -4141,7 +4230,7 @@ function MoveModal() {
 }
 
 // components/modals/image-modal.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // components/file-details/details-layout.tsx
 var import_jsx_runtime61 = require("react/jsx-runtime");
@@ -4179,11 +4268,11 @@ function DetailsLayout({
 
 // components/file-details/file-action-buttons.tsx
 var import_sonner3 = require("sonner");
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime62 = require("react/jsx-runtime");
 function FileDeleteButton({ file }) {
   const { provider, setFileDetailsModalFile, refreshData } = useFileManager();
-  const [deleting, setDeleting] = (0, import_react12.useState)(false);
+  const [deleting, setDeleting] = (0, import_react13.useState)(false);
   const handleDelete = async () => {
     setDeleting(true);
     try {
@@ -4213,7 +4302,7 @@ function FileDeleteButton({ file }) {
   );
 }
 function FileDownloadButton({ file }) {
-  const [downloading, setDownloading] = (0, import_react12.useState)(false);
+  const [downloading, setDownloading] = (0, import_react13.useState)(false);
   const handleDownload = async () => {
     setDownloading(true);
     try {
@@ -4245,7 +4334,7 @@ function FileDownloadButton({ file }) {
   );
 }
 function FileCopyLinkButton({ file }) {
-  const [copied, setCopied] = (0, import_react12.useState)(false);
+  const [copied, setCopied] = (0, import_react13.useState)(false);
   const handleCopyLink = async () => {
     try {
       await navigator.clipboard.writeText(file.url);
@@ -4366,7 +4455,7 @@ function formatDuration(seconds) {
 }
 
 // components/ui/field.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
 var import_class_variance_authority7 = require("class-variance-authority");
 var import_jsx_runtime65 = require("react/jsx-runtime");
 var fieldVariants = (0, import_class_variance_authority7.cva)(
@@ -4548,10 +4637,10 @@ function InputGroupInput(_a) {
 var import_jsx_runtime67 = require("react/jsx-runtime");
 function ImageModal({ file, onClose, onSave }) {
   var _a;
-  const [isSaving, setIsSaving] = (0, import_react14.useState)(false);
-  const [fileName, setFileName] = (0, import_react14.useState)(file.name);
-  const [alternativeText, setAlternativeText] = (0, import_react14.useState)(file.alternativeText || "");
-  const [caption, setCaption] = (0, import_react14.useState)(file.caption || "");
+  const [isSaving, setIsSaving] = (0, import_react15.useState)(false);
+  const [fileName, setFileName] = (0, import_react15.useState)(file.name);
+  const [alternativeText, setAlternativeText] = (0, import_react15.useState)(file.alternativeText || "");
+  const [caption, setCaption] = (0, import_react15.useState)(file.caption || "");
   const handleSave = async () => {
     setIsSaving(true);
     try {
@@ -4674,13 +4763,13 @@ function ImageModal({ file, onClose, onSave }) {
 }
 
 // components/modals/video-modal.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime68 = require("react/jsx-runtime");
 function VideoModal({ file, onClose, onSave }) {
   var _a, _b, _c;
-  const [isSaving, setIsSaving] = (0, import_react15.useState)(false);
-  const [fileName, setFileName] = (0, import_react15.useState)(file.name);
-  const [caption, setCaption] = (0, import_react15.useState)(file.caption || "");
+  const [isSaving, setIsSaving] = (0, import_react16.useState)(false);
+  const [fileName, setFileName] = (0, import_react16.useState)(file.name);
+  const [caption, setCaption] = (0, import_react16.useState)(file.caption || "");
   const handleSave = async () => {
     setIsSaving(true);
     try {
@@ -4781,13 +4870,13 @@ function VideoModal({ file, onClose, onSave }) {
 }
 
 // components/modals/audio-modal.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime69 = require("react/jsx-runtime");
 function AudioModal({ file, onClose, onSave }) {
   var _a, _b, _c;
-  const [isSaving, setIsSaving] = (0, import_react16.useState)(false);
-  const [fileName, setFileName] = (0, import_react16.useState)(file.name);
-  const [caption, setCaption] = (0, import_react16.useState)(file.caption || "");
+  const [isSaving, setIsSaving] = (0, import_react17.useState)(false);
+  const [fileName, setFileName] = (0, import_react17.useState)(file.name);
+  const [caption, setCaption] = (0, import_react17.useState)(file.caption || "");
   const handleSave = async () => {
     setIsSaving(true);
     try {
@@ -4889,13 +4978,13 @@ function AudioModal({ file, onClose, onSave }) {
 }
 
 // components/modals/file-modal.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 function FileModal({ file, onClose, onSave }) {
   var _a, _b, _c, _d;
-  const [isSaving, setIsSaving] = (0, import_react17.useState)(false);
-  const [fileName, setFileName] = (0, import_react17.useState)(file.name);
-  const [description, setDescription] = (0, import_react17.useState)(((_a = file.metaData) == null ? void 0 : _a.description) || "");
+  const [isSaving, setIsSaving] = (0, import_react18.useState)(false);
+  const [fileName, setFileName] = (0, import_react18.useState)(file.name);
+  const [description, setDescription] = (0, import_react18.useState)(((_a = file.metaData) == null ? void 0 : _a.description) || "");
   const handleSave = async () => {
     setIsSaving(true);
     try {
@@ -5209,7 +5298,6 @@ function Skeleton(_a) {
 }
 
 // components/layout/header-navigation.tsx
-var import_navigation3 = require("next/navigation");
 var import_jsx_runtime75 = require("react/jsx-runtime");
 function HeaderNavigation() {
   const {
@@ -5217,9 +5305,8 @@ function HeaderNavigation() {
     handleFolderClick,
     isLoading
   } = useFileManager();
-  const router = (0, import_navigation3.useRouter)();
   const handleBackClick = () => {
-    router.back();
+    history.back();
   };
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "flex item-center w-full", children: [
@@ -5326,7 +5413,7 @@ function DropdownMenuSeparator(_a) {
 }
 
 // components/modals/search-modal.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // components/ui/command.tsx
 var import_cmdk = require("cmdk");
@@ -5415,10 +5502,10 @@ function CommandItem(_a) {
 }
 
 // hooks/use-debounced-value.ts
-var import_react18 = require("react");
+var import_react19 = require("react");
 function useDebouncedValue(value, delay2 = 500) {
-  const [debouncedValue, setDebouncedValue] = (0, import_react18.useState)(value);
-  (0, import_react18.useEffect)(() => {
+  const [debouncedValue, setDebouncedValue] = (0, import_react19.useState)(value);
+  (0, import_react19.useEffect)(() => {
     const handler = setTimeout(() => {
       setDebouncedValue(value);
     }, delay2);
@@ -5433,13 +5520,13 @@ function useDebouncedValue(value, delay2 = 500) {
 var import_sonner4 = require("sonner");
 var import_jsx_runtime78 = require("react/jsx-runtime");
 function SearchDialog() {
-  const [searchQuery, setSearchQuery] = (0, import_react19.useState)("");
-  const [fileResults, setFileResults] = (0, import_react19.useState)([]);
-  const [folderResults, setFolderResults] = (0, import_react19.useState)([]);
-  const [loading, setLoading] = (0, import_react19.useState)(false);
+  const [searchQuery, setSearchQuery] = (0, import_react20.useState)("");
+  const [fileResults, setFileResults] = (0, import_react20.useState)([]);
+  const [folderResults, setFolderResults] = (0, import_react20.useState)([]);
+  const [loading, setLoading] = (0, import_react20.useState)(false);
   const { provider, handleFolderClick, handleClearSelection, isSearchModalOpen, setIsSearchModalOpen, setFileDetailsModalFile } = useFileManager();
   const debouncedSearchQuery = useDebouncedValue(searchQuery, 300);
-  const doSearch = (0, import_react19.useCallback)(async (q) => {
+  const doSearch = (0, import_react20.useCallback)(async (q) => {
     setLoading(true);
     try {
       const [files, folders] = await Promise.all([
@@ -5459,7 +5546,7 @@ function SearchDialog() {
       setLoading(false);
     }
   }, [provider]);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (isSearchModalOpen && debouncedSearchQuery.length > 0) {
       doSearch(debouncedSearchQuery);
     } else {
@@ -5635,7 +5722,7 @@ function CreateFolderAction() {
 }
 
 // components/layout/theme-toggle.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 
 // components/icons/theme.tsx
 var import_jsx_runtime81 = require("react/jsx-runtime");
@@ -5682,8 +5769,8 @@ function MoonIcon(props) {
 // components/layout/theme-toggle.tsx
 var import_jsx_runtime82 = require("react/jsx-runtime");
 function ThemeToggle() {
-  const [isDark, setIsDark] = (0, import_react20.useState)(false);
-  (0, import_react20.useEffect)(() => {
+  const [isDark, setIsDark] = (0, import_react21.useState)(false);
+  (0, import_react21.useEffect)(() => {
     const saved = localStorage.getItem("theme");
     const shouldBeDark = saved === "dark";
     setIsDark(shouldBeDark);
@@ -5841,7 +5928,7 @@ function ModalResponsiveHeaderActions({ onSearchClick }) {
 }
 
 // components/cards/card-context-menu.tsx
-var import_react21 = __toESM(require("react"), 1);
+var import_react22 = __toESM(require("react"), 1);
 
 // components/ui/context-menu.tsx
 var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"), 1);
@@ -5917,7 +6004,7 @@ function CardContextMenu({
       const MenuItemComponent = isDropdown ? DropdownMenuItem : ContextMenuItem;
       const SeparatorComponent = isDropdown ? DropdownMenuSeparator : ContextMenuSeparator;
       const nextItemIsDestructive = index < menuItems.length - 1 && menuItems[index + 1].variant === "destructive";
-      return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_react21.default.Fragment, { children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(import_react22.default.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime85.jsxs)(
           MenuItemComponent,
           {
@@ -6275,9 +6362,9 @@ function UnifiedGrid() {
 }
 
 // components/error-boundary.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime89 = require("react/jsx-runtime");
-var FileManagerErrorBoundary = class extends import_react22.Component {
+var FileManagerErrorBoundary = class extends import_react23.Component {
   constructor(props) {
     super(props);
     this.handleReset = () => {
@@ -6321,7 +6408,7 @@ var FileManagerErrorBoundary = class extends import_react22.Component {
 };
 
 // components/keyboard-shortcuts.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 function KeyboardShortcuts() {
   const {
     handleSelectAllGlobal,
@@ -6334,7 +6421,7 @@ function KeyboardShortcuts() {
     isSearchModalOpen,
     setIsSearchModalOpen
   } = useFileManager();
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     const handleKeyDown = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -6370,7 +6457,7 @@ function FileManager(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(FileManagerErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(FileManagerComposition.Page, __spreadProps(__spreadValues({}, props), { children: [
     /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(KeyboardShortcuts, {}),
     /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex h-full relative pb-12 overflow-hidden bg-background text-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex-1 flex w-full flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex-1 flex w-full flex-col overflow-y-auto", children: [
         /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(FileManagerComposition.Header, { children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)("div", { className: "flex w-full justify-between gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(HeaderNavigation, {}),
           /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(ResponsiveHeaderActions, {})
@@ -6385,7 +6472,7 @@ function FileManager(props) {
 }
 
 // components/file-manager-modal.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime91 = require("react/jsx-runtime");
 function FileManagerModal(_a) {
   var _b = _a, {
@@ -6399,14 +6486,14 @@ function FileManagerModal(_a) {
 }
 function ModalContent({ onClose }) {
   const { updateSearchQuery } = useFileManager();
-  const [isSearchActive, setIsSearchActive] = (0, import_react24.useState)(false);
-  const [searchInput, setSearchInput] = (0, import_react24.useState)("");
-  const searchInputRef = (0, import_react24.useRef)(null);
+  const [isSearchActive, setIsSearchActive] = (0, import_react25.useState)(false);
+  const [searchInput, setSearchInput] = (0, import_react25.useState)("");
+  const searchInputRef = (0, import_react25.useRef)(null);
   const debouncedSearch = useDebouncedValue(searchInput, 300);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     updateSearchQuery(debouncedSearch);
   }, [debouncedSearch, updateSearchQuery]);
-  (0, import_react24.useEffect)(() => {
+  (0, import_react25.useEffect)(() => {
     if (isSearchActive && searchInputRef.current) {
       searchInputRef.current.focus();
     }