@muhgholy/next-drive 0.1.0

package/dist/client/index.js

@@ -0,0 +1,2863 @@
+// src/client/context.tsx
+import React, { createContext, useContext, useState, useCallback, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var DriveContext = createContext(null);
+var DriveProvider = (props) => {
+  const { children, apiEndpoint, initialActiveAccountId = null, initialSelectionMode = { type: "SINGLE" }, defaultSelectedFileIds = [] } = props;
+  const [accounts, setAccounts] = useState([]);
+  const [activeAccountId, setActiveAccountIdState] = useState(initialActiveAccountId);
+  const [currentFolderId, setCurrentFolderId] = useState(null);
+  const [path, setPath] = useState([{ id: null, name: "Home" }]);
+  const [allItems, setAllItems] = useState({});
+  const [searchResults, setSearchResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [quota, setQuota] = useState(null);
+  const activeCacheKey = activeAccountId || "LOCAL";
+  const setActiveAccountId = useCallback((id) => {
+    setActiveAccountIdState(id);
+    if (id) localStorage.setItem("drive_active_account", id);
+    else localStorage.removeItem("drive_active_account");
+    setCurrentFolderId(null);
+    setPath([{ id: null, name: "Home" }]);
+    setSearchResults([]);
+  }, []);
+  React.useEffect(() => {
+    const stored = localStorage.getItem("drive_active_account");
+    if (stored) setActiveAccountIdState(stored);
+  }, []);
+  const [viewMode, setViewMode] = useState("GRID");
+  const [currentView, setCurrentView] = useState("BROWSE");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchScope, setSearchScope] = useState("ACTIVE");
+  const [groupBy, setGroupBy] = useState("NONE");
+  const [sortBy, setSortBy] = useState({ field: "createdAt", order: -1 });
+  const items = useMemo(() => {
+    const currentItems = allItems[activeCacheKey] || [];
+    if (currentView === "TRASH") return currentItems.filter((i) => i.trashedAt !== null);
+    if (currentView === "SEARCH") return searchResults;
+    return currentItems.filter((i) => i.parentId === currentFolderId && !i.trashedAt);
+  }, [allItems, activeCacheKey, currentFolderId, currentView, searchResults]);
+  const setItems = useCallback((updater) => {
+    setAllItems((prev) => {
+      const currentCache = prev[activeCacheKey] || [];
+      let newItems;
+      if (typeof updater === "function") {
+        const viewItems = currentCache.filter((i) => i.parentId === currentFolderId && !i.trashedAt);
+        const updatedViewItems = updater(viewItems);
+        newItems = [...currentCache.filter((i) => i.parentId !== currentFolderId || i.trashedAt), ...updatedViewItems];
+      } else {
+        newItems = [...currentCache.filter((i) => i.parentId !== currentFolderId || i.trashedAt), ...updater];
+      }
+      return { ...prev, [activeCacheKey]: newItems };
+    });
+  }, [activeCacheKey, currentFolderId]);
+  const [selectionMode] = useState(initialSelectionMode);
+  const [selectedFileIds, setSelectedFileIds] = useState(defaultSelectedFileIds);
+  const [hasMore, setHasMore] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const callAPI = useCallback(async (action, options) => {
+    const { query, ...fetchOptions } = options || {};
+    const params = new URLSearchParams({ action, ...query });
+    const url = `${apiEndpoint}?${params.toString()}`;
+    const headers = { "Content-Type": "application/json", ...fetchOptions?.headers || {} };
+    if (activeAccountId) headers["x-drive-account"] = activeAccountId;
+    try {
+      const response = await fetch(url, { ...fetchOptions, headers });
+      return await response.json();
+    } catch (err) {
+      return { status: 0, message: err instanceof Error ? err.message : "Network error" };
+    }
+  }, [apiEndpoint, activeAccountId]);
+  const refreshItems = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    setHasMore(false);
+    let response;
+    if (currentView === "TRASH") {
+      response = await callAPI("trash");
+    } else if (currentView === "SEARCH" && searchQuery) {
+      response = await callAPI("search", { query: { q: searchQuery, limit: "50", trashed: searchScope === "TRASH" ? "true" : "false" } });
+    } else {
+      response = await callAPI("list", { query: { folderId: currentFolderId || "root", limit: "50" } });
+    }
+    if (response.status === 200 && response.data) {
+      if (currentView === "SEARCH") {
+        setSearchResults(response.data.items);
+      } else {
+        setAllItems((prev) => {
+          const currentCache = prev[activeCacheKey] || [];
+          const existingIds = new Set(response.data.items.map((i) => i.id));
+          const filtered = currentCache.filter((i) => !existingIds.has(i.id));
+          return {
+            ...prev,
+            [activeCacheKey]: [...filtered, ...response.data.items]
+          };
+        });
+      }
+      setHasMore(!!response.data.hasMore);
+    } else {
+      setError(response.message || "Failed to load items");
+    }
+    setIsLoading(false);
+  }, [callAPI, currentFolderId, currentView, searchQuery, searchScope, activeCacheKey]);
+  const refreshAccounts = useCallback(async () => {
+    const response = await callAPI("listAccounts");
+    if (response.status === 200 && response.data) {
+      setAccounts(response.data.accounts);
+    }
+  }, [callAPI]);
+  const loadMore = useCallback(async () => {
+    if (!hasMore || isLoading || isLoadingMore || currentView === "TRASH") return;
+    setIsLoadingMore(true);
+    const currentItems = items;
+    const lastItem = currentItems[currentItems.length - 1];
+    const afterId = lastItem ? lastItem.id : void 0;
+    if (!afterId) {
+      setIsLoadingMore(false);
+      return;
+    }
+    let response;
+    if (currentView === "SEARCH" && searchQuery) {
+      setIsLoadingMore(false);
+      return;
+    } else {
+      response = await callAPI("list", {
+        query: { folderId: currentFolderId || "root", limit: "50", afterId }
+      });
+    }
+    if (response && response.status === 200 && response.data) {
+      setAllItems((prev) => {
+        const currentCache = prev[activeCacheKey] || [];
+        return {
+          ...prev,
+          [activeCacheKey]: [...currentCache, ...response.data.items]
+        };
+      });
+      setHasMore(!!response.data.hasMore);
+    }
+    setIsLoadingMore(false);
+  }, [callAPI, currentFolderId, hasMore, isLoading, isLoadingMore, items, currentView, searchQuery, activeCacheKey]);
+  const refreshQuota = useCallback(async () => {
+    const response = await callAPI("quota");
+    if (response.status === 200 && response.data) setQuota(response.data);
+  }, [callAPI]);
+  const navigateToFolder = useCallback((item) => {
+    setCurrentView("BROWSE");
+    setSearchQuery("");
+    if (item === null) {
+      setCurrentFolderId(null);
+      setPath([{ id: null, name: "Home" }]);
+      setSelectedFileIds([]);
+      return;
+    }
+    setCurrentFolderId(item.id);
+    setPath((prev) => {
+      const existingIndex = prev.findIndex((p) => p.id === item.id);
+      if (existingIndex !== -1) {
+        return prev.slice(0, existingIndex + 1);
+      }
+      return [...prev, { id: item.id, name: item.name }];
+    });
+    setSelectedFileIds([]);
+  }, []);
+  const navigateUp = useCallback(() => {
+    setCurrentView("BROWSE");
+    setSearchQuery("");
+    if (path.length <= 1) return;
+    const newPath = path.slice(0, -1);
+    setPath(newPath);
+    setCurrentFolderId(newPath[newPath.length - 1]?.id || null);
+    setSelectedFileIds([]);
+  }, [path]);
+  const moveItem = useCallback(async (itemId, targetFolderId) => {
+    setAllItems((prev) => {
+      const currentCache = prev[activeCacheKey] || [];
+      const newItems = currentCache.map(
+        (item) => item.id === itemId ? { ...item, parentId: targetFolderId === "root" ? null : targetFolderId } : item
+      );
+      return { ...prev, [activeCacheKey]: newItems };
+    });
+    await callAPI("move", {
+      method: "POST",
+      body: JSON.stringify({ ids: [itemId], targetFolderId })
+    });
+  }, [callAPI, activeCacheKey]);
+  const deleteItems = useCallback(async (ids) => {
+    setAllItems((prev) => {
+      const currentCache = prev[activeCacheKey] || [];
+      let newItems;
+      if (currentView === "TRASH") {
+        newItems = currentCache.filter((item) => !ids.includes(item.id));
+      } else {
+        newItems = currentCache.map(
+          (item) => ids.includes(item.id) ? { ...item, trashedAt: /* @__PURE__ */ new Date() } : item
+        );
+      }
+      return { ...prev, [activeCacheKey]: newItems };
+    });
+    setSelectedFileIds([]);
+    if (currentView === "TRASH") {
+      for (const id of ids) {
+        await callAPI("deletePermanent", { query: { id } });
+      }
+    } else {
+      for (const id of ids) {
+        await callAPI("delete", { query: { id } });
+      }
+    }
+  }, [callAPI, activeCacheKey, currentView]);
+  React.useEffect(() => {
+    refreshItems();
+  }, [currentFolderId, currentView, refreshItems, activeAccountId]);
+  React.useEffect(() => {
+    refreshQuota();
+  }, [refreshQuota, activeAccountId]);
+  React.useEffect(() => {
+    refreshAccounts();
+  }, [refreshAccounts]);
+  return /* @__PURE__ */ jsx(DriveContext.Provider, { value: {
+    apiEndpoint,
+    currentFolderId,
+    path,
+    items,
+    allItems,
+    setItems,
+    setAllItems,
+    isLoading,
+    error,
+    quota,
+    refreshQuota,
+    accounts,
+    activeAccountId,
+    setActiveAccountId,
+    refreshAccounts,
+    viewMode,
+    setViewMode,
+    groupBy,
+    setGroupBy,
+    sortBy,
+    setSortBy,
+    currentView,
+    setCurrentView,
+    searchQuery,
+    setSearchQuery,
+    searchScope,
+    setSearchScope,
+    selectionMode,
+    selectedFileIds,
+    setSelectedFileIds,
+    navigateToFolder,
+    navigateUp,
+    refreshItems,
+    callAPI,
+    moveItem,
+    deleteItems,
+    loadMore,
+    hasMore,
+    isLoadingMore
+  }, children });
+};
+var useDrive = () => {
+  const context = useContext(DriveContext);
+  if (!context) throw new Error("useDrive must be used within a DriveProvider");
+  return context;
+};
+
+// src/client/hooks/useUpload.ts
+import { useState as useState2, useCallback as useCallback2, useRef, useEffect } from "react";
+var MAX_CONCURRENT_UPLOADS = 2;
+var getChunkSize = (fileSize) => {
+  if (fileSize < 50 * 1024 * 1024) return 2 * 1024 * 1024;
+  if (fileSize < 200 * 1024 * 1024) return 4 * 1024 * 1024;
+  if (fileSize < 1024 * 1024 * 1024) return 8 * 1024 * 1024;
+  return 16 * 1024 * 1024;
+};
+var useUpload = (apiEndpoint, activeAccountId, onUploadComplete) => {
+  const [uploads, setUploads] = useState2([]);
+  const abortControllers = useRef(/* @__PURE__ */ new Map());
+  const filesRef = useRef(/* @__PURE__ */ new Map());
+  const metaRef = useRef(/* @__PURE__ */ new Map());
+  const updateUpload = useCallback2((id, updates) => {
+    setUploads((prev) => prev.map((u) => u.id === id ? { ...u, ...updates } : u));
+  }, []);
+  const uploadChunk = async (formData) => {
+    try {
+      const headers = {};
+      if (activeAccountId) headers["x-drive-account"] = activeAccountId;
+      const response = await fetch(`${apiEndpoint}?action=upload`, { method: "POST", body: formData, headers });
+      if (!response.ok) {
+        const text = await response.text();
+        try {
+          const json = JSON.parse(text);
+          const msg = json.message || json.error?.message || `Status ${response.status}`;
+          const canRetry = [408, 429, 502, 503, 504].includes(response.status);
+          return [false, msg, canRetry];
+        } catch {
+          const isRetryable = response.status >= 500 || response.status === 429;
+          return [false, `Server error ${response.status}: ${text.slice(0, 100)}`, isRetryable];
+        }
+      }
+      const data = await response.json();
+      if (data.status !== 200) return [false, data.message || "Upload failed", false];
+      return [true, data.data, false];
+    } catch (error) {
+      return [false, error instanceof Error ? error.message : "Network error", true];
+    }
+  };
+  const processItem = async (item, file, folderId) => {
+    const controller = new AbortController();
+    abortControllers.current.set(item.id, controller);
+    updateUpload(item.id, { status: "uploading" });
+    const chunkSize = getChunkSize(file.size);
+    const totalChunks = Math.ceil(file.size / chunkSize);
+    let driveId = item.driveId;
+    try {
+      for (let i = item.currentChunk; i < totalChunks; i++) {
+        if (controller.signal.aborted) throw new Error("Cancelled");
+        updateUpload(item.id, { currentChunk: i });
+        const start = i * chunkSize;
+        const end = Math.min(start + chunkSize, file.size);
+        const chunk = file.slice(start, end);
+        const formData = new FormData();
+        formData.append("chunk", chunk);
+        formData.append("chunkIndex", String(i));
+        formData.append("totalChunks", String(totalChunks));
+        formData.append("fileName", file.name);
+        formData.append("fileSize", String(file.size));
+        formData.append("fileType", file.type);
+        formData.append("folderId", folderId || "root");
+        if (driveId) formData.append("driveId", driveId);
+        let attempts = 0;
+        let success = false;
+        while (!success && attempts < 3 && !controller.signal.aborted) {
+          const [ok, result, canRetry] = await uploadChunk(formData);
+          if (ok) {
+            success = true;
+            if (result.type === "UPLOAD_STARTED" && result.driveId) {
+              driveId = result.driveId;
+              updateUpload(item.id, { driveId });
+            } else if (result.type === "UPLOAD_COMPLETE") {
+              if (onUploadComplete) onUploadComplete(result.item);
+            }
+          } else {
+            if (!canRetry) throw new Error(result);
+            attempts++;
+            if (attempts === 3) throw new Error(result);
+            await new Promise((r) => setTimeout(r, 1e3 * attempts));
+          }
+        }
+      }
+      updateUpload(item.id, { status: "complete", currentChunk: totalChunks });
+    } catch (error) {
+      if (error.message === "Cancelled") {
+        updateUpload(item.id, { status: "cancelled" });
+      } else {
+        updateUpload(item.id, { status: "error", error: error.message });
+      }
+    } finally {
+      abortControllers.current.delete(item.id);
+    }
+  };
+  const uploadFiles = useCallback2(async (files, folderId) => {
+    const newUploads = [];
+    files.forEach((file) => {
+      const id = `upload_${Date.now()}_${Math.random().toString(36).slice(2)}`;
+      const chunkSize = getChunkSize(file.size);
+      filesRef.current.set(id, file);
+      metaRef.current.set(id, { folderId });
+      newUploads.push({
+        id,
+        name: file.name,
+        size: file.size,
+        status: "queued",
+        currentChunk: 0,
+        totalChunks: Math.ceil(file.size / chunkSize)
+      });
+    });
+    setUploads((prev) => [...prev, ...newUploads]);
+  }, []);
+  const cancelUpload = useCallback2(async (id) => {
+    const controller = abortControllers.current.get(id);
+    if (controller) {
+      controller.abort();
+    } else {
+      updateUpload(id, { status: "cancelled" });
+    }
+    const upload = uploads.find((u) => u.id === id);
+    if (upload?.driveId) {
+      fetch(`${apiEndpoint}?action=cancel&id=${upload.driveId}`, { method: "POST" }).catch(() => {
+      });
+    }
+  }, [apiEndpoint, updateUpload, uploads]);
+  const cancelAllUploads = useCallback2(async () => {
+    uploads.forEach((u) => {
+      if (["queued", "uploading", "pending"].includes(u.status)) {
+        cancelUpload(u.id);
+      }
+    });
+  }, [uploads, cancelUpload]);
+  useEffect(() => {
+    const activeCount = uploads.filter((u) => u.status === "uploading").length;
+    if (activeCount >= MAX_CONCURRENT_UPLOADS) return;
+    const queued = uploads.find((u) => u.status === "queued");
+    if (queued) {
+      const file = filesRef.current.get(queued.id);
+      const meta = metaRef.current.get(queued.id);
+      if (file) {
+        processItem(queued, file, meta?.folderId || null);
+      }
+    }
+  }, [uploads]);
+  return { uploads, uploadFiles, cancelUpload, cancelAllUploads };
+};
+
+// src/client/file-chooser.tsx
+import { useState as useState7, useCallback as useCallback4, useMemo as useMemo3, useEffect as useEffect5 } from "react";
+
+// src/client/utils.tsx
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+import { File, Folder, Image, Video, Music, FileText, FileCode, FileArchive } from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var formatBytes = (bytes, decimals = 2) => {
+  if (bytes === 0) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
+};
+var getFileIcon = (mime, isFolder, className = "w-6 h-6") => {
+  if (isFolder) return /* @__PURE__ */ jsx2(Folder, { className: cn("text-blue-500 fill-blue-500/20", className) });
+  if (mime.startsWith("image/")) return /* @__PURE__ */ jsx2(Image, { className: cn("text-purple-500", className) });
+  if (mime.startsWith("video/")) return /* @__PURE__ */ jsx2(Video, { className: cn("text-red-500", className) });
+  if (mime.startsWith("audio/")) return /* @__PURE__ */ jsx2(Music, { className: cn("text-yellow-500", className) });
+  if (mime === "application/pdf") return /* @__PURE__ */ jsx2(FileText, { className: cn("text-orange-500", className) });
+  if (mime.includes("text") || mime.includes("document")) return /* @__PURE__ */ jsx2(FileText, { className: cn("text-slate-500", className) });
+  if (mime.includes("zip") || mime.includes("compressed")) return /* @__PURE__ */ jsx2(FileArchive, { className: cn("text-amber-500", className) });
+  if (mime.includes("javascript") || mime.includes("typescript") || mime.includes("json") || mime.includes("html") || mime.includes("css")) return /* @__PURE__ */ jsx2(FileCode, { className: cn("text-green-500", className) });
+  return /* @__PURE__ */ jsx2(File, { className: cn("text-gray-400", className) });
+};
+var matchesMimeFilter = (mime, isFolder, filter) => {
+  if (!filter) return true;
+  if (isFolder) return true;
+  if (filter === "*/*") return true;
+  const types = filter.split(",").map((t) => t.trim());
+  return types.some((type) => {
+    if (type === mime) return true;
+    if (type.endsWith("/*")) {
+      const prefix = type.slice(0, -2);
+      return mime.startsWith(`${prefix}/`);
+    }
+    return false;
+  });
+};
+
+// src/client/components/drive/explorer.tsx
+import React7, { useMemo as useMemo2, useEffect as useEffect4, useRef as useRef3 } from "react";
+import { Folder as Folder2, Loader2 as Loader22, Info, RotateCcw, ChevronRight as ChevronRight3 } from "lucide-react";
+import { isToday, isYesterday, startOfWeek, subWeeks, isAfter } from "date-fns";
+
+// src/client/components/ui/context-menu.tsx
+import * as React2 from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuSubTrigger = React2.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx3(ChevronRight, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  ContextMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+var ContextMenuContent = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(ContextMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx3(
+  ContextMenuPrimitive.Content,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-80 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx3(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuCheckboxItem = React2.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx3("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx3(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(Check, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React2.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx3("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx3(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx3(Circle, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React2.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx3(
+  ContextMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+var ContextMenuSeparator = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+var ContextMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      className: cn(
+        "ml-auto text-xs tracking-widest text-muted-foreground",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+// src/client/components/dialog.tsx
+import { useEffect as useEffect2, useState as useState3 } from "react";
+import { AlertCircle } from "lucide-react";
+
+// src/client/components/ui/alert.tsx
+import { cva } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Alert({
+  className,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "alert",
+      role: "alert",
+      className: cn(alertVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+function AlertTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "alert-title",
+      className: cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "alert-description",
+      className: cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/client/components/ui/button.tsx
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx5(
+    Comp,
+    {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+
+// src/client/components/ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx6(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs2(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs2(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx6(X, { className: "size-4" }),
+                /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Description,
+    {
+      "data-slot": "dialog-description",
+      className: cn("text-muted-foreground text-sm", className),
+      ...props
+    }
+  );
+}
+
+// src/client/components/ui/input.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "input",
+    {
+      type,
+      "data-slot": "input",
+      className: cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/client/components/ui/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx8 } from "react/jsx-runtime";
+function Label2({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    LabelPrimitive.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/client/components/dialog.tsx
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+var DialogConfirmation = (props) => {
+  const { title, description, onConfirm, disableEscapeKeyDown, inputs, onClose, open } = props;
+  const [error, setError] = useState3(null);
+  const [isLoading, setIsLoading] = useState3(false);
+  const [inputsValue, setInputsValue] = useState3(
+    () => inputs?.reduce((acc, input) => ({
+      ...acc,
+      [input.id]: input.default ?? ""
+    }), {}) ?? {}
+  );
+  const handleConfirm = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await (inputs ? onConfirm(inputsValue) : onConfirm());
+      if (response[0]) {
+        onClose();
+      } else {
+        setError(response[1]);
+      }
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const handleClose = () => {
+    if (isLoading) return;
+    onClose();
+  };
+  const handleOpenChange = (isOpen) => {
+    if (!isOpen) {
+      handleClose();
+    }
+  };
+  const handleKeyPress = (event) => {
+    if (event.key === "Enter" && isFormValid()) {
+      event.preventDefault();
+      handleConfirm();
+    }
+  };
+  const isFormValid = () => {
+    if (!inputs) return true;
+    return inputs.every(
+      (input) => !input.required || inputsValue[input.id] && inputsValue[input.id].trim() !== ""
+    );
+  };
+  useEffect2(() => {
+    setInputsValue(
+      inputs?.reduce((acc, input) => ({
+        ...acc,
+        [input.id]: input.default ?? ""
+      }), {}) ?? {}
+    );
+    setError(null);
+  }, [inputs]);
+  return /* @__PURE__ */ jsx9(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs3(
+    DialogContent,
+    {
+      onInteractOutside: (e) => {
+        if (disableEscapeKeyDown) {
+          e.preventDefault();
+        }
+      },
+      onEscapeKeyDown: (e) => {
+        if (disableEscapeKeyDown) {
+          e.preventDefault();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsxs3(DialogHeader, { children: [
+          /* @__PURE__ */ jsx9(DialogTitle, { children: title }),
+          /* @__PURE__ */ jsx9(DialogDescription, { children: description })
+        ] }),
+        error && /* @__PURE__ */ jsxs3(Alert, { variant: "destructive", children: [
+          /* @__PURE__ */ jsx9(AlertCircle, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx9(AlertTitle, { children: "Error" }),
+          /* @__PURE__ */ jsx9(AlertDescription, { children: error })
+        ] }),
+        inputs && inputs.length > 0 && /* @__PURE__ */ jsx9("div", { className: "grid gap-4 py-4", children: inputs.map((input, index) => /* @__PURE__ */ jsxs3("div", { className: "grid gap-2", children: [
+          /* @__PURE__ */ jsx9(Label2, { htmlFor: input.id, children: input.name }),
+          /* @__PURE__ */ jsx9(
+            Input,
+            {
+              id: input.id,
+              required: input.required,
+              value: inputsValue[input.id] || "",
+              onChange: (e) => setInputsValue({ ...inputsValue, [input.id]: e.target.value }),
+              onKeyDown: index === inputs.length - 1 ? handleKeyPress : void 0
+            }
+          )
+        ] }, input.id)) }),
+        /* @__PURE__ */ jsxs3(DialogFooter, { children: [
+          /* @__PURE__ */ jsx9(Button, { variant: "outline", onClick: handleClose, disabled: isLoading, children: "Cancel" }),
+          /* @__PURE__ */ jsx9(
+            Button,
+            {
+              onClick: handleConfirm,
+              disabled: isLoading || !isFormValid(),
+              children: "Confirm"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+};
+
+// src/client/components/drive/explorer.tsx
+import { Pencil, Trash2 as Trash22, FolderPlus } from "lucide-react";
+
+// src/client/components/ui/sheet.tsx
+import * as React3 from "react";
+import * as SheetPrimitive from "@radix-ui/react-dialog";
+import { cva as cva3 } from "class-variance-authority";
+import { X as X2 } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var Sheet = SheetPrimitive.Root;
+var SheetTrigger = SheetPrimitive.Trigger;
+var SheetPortal = SheetPrimitive.Portal;
+var SheetOverlay = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  SheetPrimitive.Overlay,
+  {
+    className: cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    ),
+    ...props,
+    ref
+  }
+));
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
+var sheetVariants = cva3(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React3.forwardRef(({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ jsxs4(SheetPortal, { children: [
+  /* @__PURE__ */ jsx10(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs4(
+    SheetPrimitive.Content,
+    {
+      ref,
+      className: cn(sheetVariants({ side }), className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs4(SheetPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary", children: [
+          /* @__PURE__ */ jsx10(X2, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] }));
+SheetContent.displayName = SheetPrimitive.Content.displayName;
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx10(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx10(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  SheetPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = SheetPrimitive.Title.displayName;
+var SheetDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+  SheetPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = SheetPrimitive.Description.displayName;
+
+// src/client/components/drive/file/details.tsx
+import { Copy, FileText as FileText2, Calendar, HardDrive, Hash, Film, Image as ImageIcon } from "lucide-react";
+
+// src/client/components/ui/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Separator2({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx11(
+    SeparatorPrimitive.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation,
+      className: cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/client/components/drive/file/details.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
+var DriveFileDetails = (props) => {
+  const { item, isOpen, onClose, apiEndpoint } = props;
+  if (!item) return null;
+  const isFile = item.information.type === "FILE";
+  const isFolder = item.information.type === "FOLDER";
+  const tokenParam = item.token ? `&token=${item.token}` : "";
+  const thumbnailUrl = `${apiEndpoint}?action=thumbnail&id=${item.id}&size=medium${tokenParam}`;
+  const fileUrl = `${apiEndpoint}?action=serve&id=${item.id}${tokenParam}`;
+  const DetailItem = ({ icon: Icon, label, value }) => /* @__PURE__ */ jsxs5("div", { className: "flex items-start gap-3 py-3", children: [
+    /* @__PURE__ */ jsx12(Icon, { className: "size-4 text-muted-foreground mt-0.5" }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex-1 space-y-0.5", children: [
+      /* @__PURE__ */ jsx12("p", { className: "text-xs font-medium text-muted-foreground", children: label }),
+      /* @__PURE__ */ jsx12("div", { className: "text-sm text-foreground break-all", children: value })
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx12(Sheet, { open: isOpen, onOpenChange: onClose, children: /* @__PURE__ */ jsxs5(SheetContent, { className: "w-[90%] sm:max-w-md overflow-y-auto", children: [
+    /* @__PURE__ */ jsxs5(SheetHeader, { className: "pb-4", children: [
+      /* @__PURE__ */ jsx12(SheetTitle, { children: "Details" }),
+      /* @__PURE__ */ jsx12(SheetDescription, { children: "View information about this item." })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center p-6 bg-muted/20 rounded-lg border", children: [
+        item.information.type === "FILE" && (item.information.mime.startsWith("image/") || item.information.mime.startsWith("video/")) ? /* @__PURE__ */ jsx12("div", { className: "aspect-video w-full rounded-md overflow-hidden bg-background border shadow-sm flex items-center justify-center", children: /* @__PURE__ */ jsx12("img", { src: thumbnailUrl, alt: item.name, className: "object-contain size-full" }) }) : /* @__PURE__ */ jsx12("div", { className: "size-20 bg-muted rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx12(FileText2, { className: "size-10 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx12("h3", { className: "mt-4 font-medium text-center break-all", children: item.name }),
+        /* @__PURE__ */ jsx12("p", { className: "text-xs text-muted-foreground mt-1", children: item.information.type === "FOLDER" ? "Folder" : item.information.mime })
+      ] }),
+      /* @__PURE__ */ jsx12(Separator2, {}),
+      /* @__PURE__ */ jsxs5("div", { className: "space-y-1", children: [
+        /* @__PURE__ */ jsx12(DetailItem, { icon: HardDrive, label: "Size", value: item.information.type === "FOLDER" ? "-" : formatBytes(item.information.sizeInBytes) }),
+        /* @__PURE__ */ jsx12(DetailItem, { icon: Calendar, label: "Created", value: new Date(item.createdAt).toLocaleString() }),
+        item.information.type === "FILE" && /* @__PURE__ */ jsxs5(Fragment, { children: [
+          /* @__PURE__ */ jsx12(DetailItem, { icon: FileText2, label: "Type", value: item.information.mime }),
+          item.information.width && /* @__PURE__ */ jsx12(DetailItem, { icon: ImageIcon, label: "Dimensions", value: `${item.information.width} x ${item.information.height}` }),
+          item.information.duration && /* @__PURE__ */ jsx12(DetailItem, { icon: Film, label: "Duration", value: `${Math.round(item.information.duration)}s` }),
+          item.information.hash && /* @__PURE__ */ jsx12(DetailItem, { icon: Hash, label: "Hash (SHA-256)", value: /* @__PURE__ */ jsxs5("span", { className: "font-mono text-xs", children: [
+            item.information.hash.substring(0, 16),
+            "..."
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx12(Separator2, {}),
+      /* @__PURE__ */ jsxs5("div", { className: "flex gap-2", children: [
+        item.information.type === "FILE" && /* @__PURE__ */ jsx12(Button, { className: "w-full", variant: "outline", onClick: () => window.open(fileUrl, "_blank"), children: "Download / View" }),
+        /* @__PURE__ */ jsxs5(Button, { className: "w-full", variant: "secondary", onClick: () => {
+          navigator.clipboard.writeText(item.id);
+        }, children: [
+          /* @__PURE__ */ jsx12(Copy, { className: "mr-2 size-3.5" }),
+          " Copy ID"
+        ] })
+      ] })
+    ] })
+  ] }) });
+};
+
+// src/client/components/drive/path-bar.tsx
+import { useDroppable } from "@dnd-kit/core";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var DroppablePathItem = (props) => {
+  const { id, name, isLast, onClick } = props;
+  const { currentFolderId } = useDrive();
+  const droppableId = `path-${id ?? "root"}`;
+  const { isOver, setNodeRef } = useDroppable({
+    id: droppableId,
+    data: { type: "pathItem", folderId: id }
+  });
+  const isCurrentFolder = id === currentFolderId;
+  if (isLast) {
+    return /* @__PURE__ */ jsx13(
+      "span",
+      {
+        ref: setNodeRef,
+        className: cn(
+          "font-medium text-foreground px-1 text-xs sm:text-sm truncate max-w-30 sm:max-w-none",
+          isOver && !isCurrentFolder && "bg-primary/20 rounded"
+        ),
+        "aria-current": "page",
+        title: name,
+        children: name
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx13(
+    Button,
+    {
+      ref: setNodeRef,
+      variant: "ghost",
+      size: "sm",
+      className: cn(
+        "h-auto font-normal text-xs sm:text-sm px-1.5 sm:px-2 py-0.5 sm:py-1 truncate max-w-25 sm:max-w-37.5",
+        isOver && !isCurrentFolder && "ring-2 ring-primary bg-primary/10 scale-105"
+      ),
+      onClick,
+      type: "button",
+      title: name,
+      children: name
+    }
+  );
+};
+var DrivePathBar = () => {
+  const { path, navigateToFolder } = useDrive();
+  return /* @__PURE__ */ jsx13("ol", { className: "flex items-center gap-1 sm:gap-1.5 text-sm text-muted-foreground bg-muted/30 px-2 sm:px-3 py-1.5 sm:py-2 rounded-md border w-full overflow-x-auto flex-nowrap min-w-0", "aria-label": "Breadcrumb", role: "navigation", children: path.map((item, index) => {
+    const isLast = index === path.length - 1;
+    return /* @__PURE__ */ jsxs6("li", { className: "flex items-center gap-1 sm:gap-1.5 shrink-0", children: [
+      index > 0 && /* @__PURE__ */ jsx13("span", { className: "text-muted-foreground/50 text-xs", "aria-hidden": "true", children: "/" }),
+      /* @__PURE__ */ jsx13(
+        DroppablePathItem,
+        {
+          id: item.id,
+          name: item.name,
+          isLast,
+          onClick: () => navigateToFolder(item)
+        }
+      )
+    ] }, item.id ?? "root");
+  }) });
+};
+
+// src/client/components/drive/upload.tsx
+import React4, { useState as useState4, useRef as useRef2, useCallback as useCallback3 } from "react";
+import { Upload as UploadIcon, X as X3, Loader2, CheckCircle2, AlertCircle as AlertCircle2, Clock } from "lucide-react";
+
+// src/client/components/ui/progress.tsx
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function Progress({
+  className,
+  value,
+  indicatorClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx14(
+    ProgressPrimitive.Root,
+    {
+      "data-slot": "progress",
+      className: cn(
+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx14(
+        ProgressPrimitive.Indicator,
+        {
+          "data-slot": "progress-indicator",
+          className: cn("bg-primary h-full w-full flex-1 transition-all", indicatorClassName),
+          style: { transform: `translateX(-${100 - (value || 0)}%)` }
+        }
+      )
+    }
+  );
+}
+
+// src/client/components/drive/upload.tsx
+import { Fragment as Fragment2, jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var UploadStatusIcon = ({ status }) => {
+  switch (status) {
+    case "complete":
+      return /* @__PURE__ */ jsx15(CheckCircle2, { className: "size-4 text-emerald-500" });
+    case "error":
+      return /* @__PURE__ */ jsx15(AlertCircle2, { className: "size-4 text-destructive" });
+    case "cancelled":
+      return /* @__PURE__ */ jsx15(X3, { className: "size-4 text-muted-foreground" });
+    case "uploading":
+      return /* @__PURE__ */ jsx15(Loader2, { className: "size-4 text-primary animate-spin" });
+    default:
+      return /* @__PURE__ */ jsx15(Clock, { className: "size-4 text-muted-foreground" });
+  }
+};
+var DriveUpload = (props) => {
+  const { compact = false, onComplete } = props;
+  const [isDragging, setIsDragging] = useState4(false);
+  const [showUploadsDialog, setShowUploadsDialog] = useState4(false);
+  const inputRef = useRef2(null);
+  const { currentFolderId, refreshItems, apiEndpoint, activeAccountId } = useDrive();
+  const { uploads, uploadFiles, cancelUpload, cancelAllUploads } = useUpload(apiEndpoint, activeAccountId, () => {
+    refreshItems();
+    onComplete?.(null);
+  });
+  React4.useEffect(() => {
+    if (!showUploadsDialog || uploads.length === 0) return;
+    const allFinished = uploads.every(
+      (u) => ["complete", "error", "cancelled"].includes(u.status)
+    );
+    if (allFinished) {
+      const timer = setTimeout(() => {
+        setShowUploadsDialog(false);
+      }, 2e3);
+      return () => clearTimeout(timer);
+    }
+  }, [uploads, showUploadsDialog]);
+  const handleFiles = useCallback3((files) => {
+    if (!files || files.length === 0) return;
+    uploadFiles(Array.from(files), currentFolderId);
+    setShowUploadsDialog(true);
+  }, [uploadFiles, currentFolderId, refreshItems, onComplete]);
+  const handleDrag = useCallback3((e, dragging) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(dragging);
+  }, []);
+  const handleDrop = useCallback3((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    handleFiles(e.dataTransfer.files);
+  }, [handleFiles]);
+  const hasUploadsInProgress = uploads.some((u) => ["uploading", "queued", "pending"].includes(u.status));
+  const activeUploads = uploads.filter((u) => ["uploading", "queued", "pending"].includes(u.status));
+  const renderDialog = () => /* @__PURE__ */ jsx15(Dialog, { open: showUploadsDialog, onOpenChange: setShowUploadsDialog, children: /* @__PURE__ */ jsxs7(DialogContent, { className: "sm:max-w-md p-0 gap-0", children: [
+    /* @__PURE__ */ jsxs7(DialogHeader, { className: "px-4 py-3 border-b flex-row items-center justify-between space-y-0", children: [
+      /* @__PURE__ */ jsx15(DialogTitle, { className: "text-base", children: "Upload Status" }),
+      hasUploadsInProgress && /* @__PURE__ */ jsx15(
+        Button,
+        {
+          type: "button",
+          size: "sm",
+          variant: "ghost",
+          className: "text-destructive hover:text-destructive",
+          onClick: cancelAllUploads,
+          children: "Cancel All"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs7("div", { className: "divide-y max-h-80 overflow-y-auto", children: [
+      uploads.length === 0 && /* @__PURE__ */ jsx15("div", { className: "p-4 text-center text-sm text-muted-foreground", children: "No uploads" }),
+      uploads.map((upload) => {
+        const percent = upload.status === "complete" ? 100 : upload.status === "error" || !upload.totalChunks ? 0 : Math.round(upload.currentChunk / upload.totalChunks * 100);
+        return /* @__PURE__ */ jsxs7("div", { className: "px-4 py-2.5", children: [
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-start gap-2 mb-1.5", children: [
+            /* @__PURE__ */ jsx15(UploadStatusIcon, { status: upload.status }),
+            /* @__PURE__ */ jsxs7("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsx15("p", { className: "text-sm font-medium truncate", children: upload.name }),
+              /* @__PURE__ */ jsxs7("p", { className: cn(
+                "text-xs",
+                upload.status === "error" ? "text-destructive" : "text-muted-foreground"
+              ), children: [
+                upload.status === "uploading" && "Uploading...",
+                upload.status === "queued" && "Waiting in queue",
+                upload.status === "pending" && "Preparing...",
+                upload.status === "complete" && "Upload complete",
+                upload.status === "error" && (upload.error || "Upload failed"),
+                upload.status === "cancelled" && "Upload cancelled"
+              ] })
+            ] }),
+            ["uploading", "queued", "pending"].includes(upload.status) && /* @__PURE__ */ jsx15(
+              Button,
+              {
+                type: "button",
+                size: "icon",
+                variant: "ghost",
+                className: "shrink-0 text-muted-foreground hover:text-destructive",
+                onClick: () => cancelUpload(upload.id),
+                children: /* @__PURE__ */ jsx15(X3, { className: "size-3.5" })
+              }
+            )
+          ] }),
+          upload.status === "uploading" && /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2 pl-6", children: [
+            /* @__PURE__ */ jsx15(Progress, { value: percent, className: "flex-1" }),
+            /* @__PURE__ */ jsxs7("span", { className: "text-xs tabular-nums text-muted-foreground w-8", children: [
+              percent,
+              "%"
+            ] })
+          ] })
+        ] }, upload.id);
+      })
+    ] })
+  ] }) });
+  if (compact) {
+    return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx15("input", { ref: inputRef, type: "file", multiple: true, onChange: (e) => {
+          handleFiles(e.target.files);
+          e.target.value = "";
+        }, className: "hidden", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs7(
+          Button,
+          {
+            onClick: () => inputRef.current?.click(),
+            type: "button",
+            size: "sm",
+            disabled: hasUploadsInProgress,
+            children: [
+              /* @__PURE__ */ jsx15(UploadIcon, { className: "size-4 mr-1.5" }),
+              " Upload Files"
+            ]
+          }
+        ),
+        uploads.length > 0 && /* @__PURE__ */ jsxs7(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            onClick: () => setShowUploadsDialog(true),
+            children: [
+              activeUploads.length > 0 && /* @__PURE__ */ jsx15(Loader2, { className: "size-3.5 mr-1.5 animate-spin" }),
+              activeUploads.length > 0 ? `Uploading (${activeUploads.length})` : "Upload Status"
+            ]
+          }
+        )
+      ] }),
+      renderDialog()
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: cn(
+          "flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-lg cursor-pointer transition-colors",
+          isDragging ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50"
+        ),
+        onDragEnter: (e) => handleDrag(e, true),
+        onDragLeave: (e) => handleDrag(e, false),
+        onDragOver: (e) => handleDrag(e, true),
+        onDrop: handleDrop,
+        onClick: () => inputRef.current?.click(),
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => e.key === "Enter" && inputRef.current?.click(),
+        children: [
+          /* @__PURE__ */ jsx15("input", { ref: inputRef, type: "file", multiple: true, onChange: (e) => {
+            handleFiles(e.target.files);
+            e.target.value = "";
+          }, className: "hidden", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-2 text-center", children: [
+            /* @__PURE__ */ jsx15("div", { className: "p-3 rounded-full bg-background border shadow-sm", children: /* @__PURE__ */ jsx15(UploadIcon, { className: "size-6 text-muted-foreground" }) }),
+            /* @__PURE__ */ jsx15("div", { className: "text-sm font-medium text-foreground", children: isDragging ? "Drop files here" : "Click or drag files to upload" })
+          ] })
+        ]
+      }
+    ),
+    hasUploadsInProgress && /* @__PURE__ */ jsx15("div", { className: "mt-4 text-center", children: /* @__PURE__ */ jsx15(Button, { variant: "link", onClick: () => setShowUploadsDialog(true), children: "View Upload Progress" }) }),
+    renderDialog()
+  ] });
+};
+
+// src/client/components/drive/sidebar.tsx
+import {
+  Database,
+  HardDrive as HardDrive2,
+  Plus,
+  LogOut,
+  Check as Check3,
+  ChevronsUpDown,
+  FolderOpen,
+  Trash2,
+  Menu
+} from "lucide-react";
+
+// src/client/components/ui/dropdown-menu.tsx
+import * as React5 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check as Check2, ChevronRight as ChevronRight2, Circle as Circle2 } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuSubTrigger = React5.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx16(ChevronRight2, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React5.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx16(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx16(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React5.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx16(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React5.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    checked,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(Check2, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React5.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs8(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx16("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx16(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx16(Circle2, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React5.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx16(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx16(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx16(
+    "span",
+    {
+      className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+      ...props
+    }
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/client/components/drive/storage/indicator.tsx
+import { useEffect as useEffect3 } from "react";
+import { Cloud, AlertCircle as AlertCircle3 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var DriveStorageIndicator = (props) => {
+  const { compact = false, className } = props;
+  const { quota, refreshQuota } = useDrive();
+  useEffect3(() => {
+    refreshQuota();
+  }, []);
+  if (!quota) return null;
+  const { usedInBytes, totalInBytes, percentage } = quota;
+  const isNearFull = percentage >= 90;
+  const isFull = percentage >= 100;
+  const stateColor = isFull ? "text-destructive" : isNearFull ? "text-yellow-600 dark:text-yellow-500" : "text-primary";
+  const solidColor = isFull ? "bg-destructive" : isNearFull ? "bg-yellow-500" : "bg-primary";
+  if (compact) {
+    return /* @__PURE__ */ jsxs9("div", { className: cn("flex items-center gap-3 text-xs font-medium text-muted-foreground", className), children: [
+      /* @__PURE__ */ jsxs9("span", { className: "shrink-0 flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx17(Cloud, { className: "size-3.5" }),
+        "Storage"
+      ] }),
+      /* @__PURE__ */ jsx17(Progress, { value: percentage, indicatorClassName: cn("bg-gradient-to-r from-blue-500 to-cyan-500", isNearFull && "from-yellow-500 to-orange-500", isFull && "bg-destructive"), className: "w-24 sm:w-32" }),
+      /* @__PURE__ */ jsxs9("span", { className: "shrink-0 whitespace-nowrap", children: [
+        formatBytes(usedInBytes),
+        " / ",
+        formatBytes(totalInBytes)
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+    /* @__PURE__ */ jsxs9("div", { className: "flex items-center justify-between gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx17(Cloud, { className: cn("size-4", stateColor) }),
+        /* @__PURE__ */ jsx17("span", { className: "text-xs font-medium text-muted-foreground", children: "Storage" })
+      ] }),
+      /* @__PURE__ */ jsxs9("span", { className: "text-xs font-semibold tabular-nums", children: [
+        percentage,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx17(
+      Progress,
+      {
+        value: percentage,
+        className: "h-1.5",
+        indicatorClassName: cn(
+          "transition-all duration-500",
+          isFull ? "bg-destructive" : isNearFull ? "bg-yellow-500" : "bg-gradient-to-r from-blue-500 to-purple-500"
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between items-center mt-1.5", children: [
+      /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: formatBytes(usedInBytes) }),
+      /* @__PURE__ */ jsx17("span", { className: "text-[10px] text-muted-foreground tabular-nums", children: formatBytes(totalInBytes) })
+    ] }),
+    isNearFull && /* @__PURE__ */ jsxs9("div", { className: cn(
+      "flex items-center gap-1.5 text-[10px] font-medium px-2 py-1 rounded-md mt-2",
+      isFull ? "bg-destructive/10 text-destructive" : "bg-yellow-500/10 text-yellow-600 dark:text-yellow-500"
+    ), children: [
+      /* @__PURE__ */ jsx17(AlertCircle3, { className: "size-3 shrink-0" }),
+      /* @__PURE__ */ jsx17("span", { children: isFull ? "Storage full" : "Almost full" })
+    ] })
+  ] });
+};
+
+// src/client/components/drive/sidebar.tsx
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var SidebarContent = () => {
+  const {
+    accounts,
+    activeAccountId,
+    setActiveAccountId,
+    callAPI,
+    refreshAccounts,
+    currentView,
+    setCurrentView
+  } = useDrive();
+  const currentAccountName = activeAccountId ? accounts.find((a) => a.id === activeAccountId)?.name || "Unknown Account" : "Local Storage";
+  const currentAccountEmail = activeAccountId ? accounts.find((a) => a.id === activeAccountId)?.email : "On this device";
+  return /* @__PURE__ */ jsxs10("div", { className: "w-full h-full flex flex-col bg-muted/10 border-r", children: [
+    /* @__PURE__ */ jsx18("div", { className: "p-3 border-b", children: /* @__PURE__ */ jsxs10(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx18(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(Button, { variant: "ghost", className: "w-full justify-between px-2 h-auto min-h-12 py-2 hover:bg-muted/50", children: [
+        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-2 sm:gap-3 text-left min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx18("div", { className: "size-8 sm:size-9 rounded-md bg-primary/10 flex items-center justify-center shrink-0", children: activeAccountId ? /* @__PURE__ */ jsx18(Database, { className: "size-4" }) : /* @__PURE__ */ jsx18(HardDrive2, { className: "size-4" }) }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex flex-col truncate min-w-0", children: [
+            /* @__PURE__ */ jsx18("span", { className: "text-sm font-semibold truncate", children: currentAccountName }),
+            /* @__PURE__ */ jsx18("span", { className: "text-xs text-muted-foreground truncate font-normal", children: currentAccountEmail })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx18(ChevronsUpDown, { className: "size-4 text-muted-foreground shrink-0 opacity-50 ml-1" })
+      ] }) }),
+      /* @__PURE__ */ jsxs10(DropdownMenuContent, { className: "w-60", align: "start", children: [
+        /* @__PURE__ */ jsx18(DropdownMenuLabel, { className: "text-xs font-normal text-muted-foreground", children: "Switch Account" }),
+        /* @__PURE__ */ jsxs10(DropdownMenuItem, { onClick: () => setActiveAccountId(null), className: "gap-2", children: [
+          /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center size-6 rounded bg-muted", children: /* @__PURE__ */ jsx18(HardDrive2, { className: "size-3.5" }) }),
+          /* @__PURE__ */ jsx18("div", { className: "flex flex-col flex-1", children: /* @__PURE__ */ jsx18("span", { className: "text-sm font-medium", children: "Local Storage" }) }),
+          activeAccountId === null && /* @__PURE__ */ jsx18(Check3, { className: "size-3.5 text-primary" })
+        ] }),
+        accounts.length > 0 && /* @__PURE__ */ jsx18(DropdownMenuSeparator, {}),
+        accounts.map((account) => /* @__PURE__ */ jsxs10(DropdownMenuItem, { onClick: () => setActiveAccountId(account.id), className: "gap-2 group", children: [
+          /* @__PURE__ */ jsx18("div", { className: "flex items-center justify-center size-6 rounded bg-muted", children: /* @__PURE__ */ jsx18(Database, { className: "size-3.5" }) }),
+          /* @__PURE__ */ jsxs10("div", { className: "flex flex-col flex-1 overflow-hidden", children: [
+            /* @__PURE__ */ jsx18("span", { className: "text-sm font-medium truncate", children: account.name }),
+            /* @__PURE__ */ jsx18("span", { className: "text-xs text-muted-foreground truncate", children: account.email })
+          ] }),
+          activeAccountId === account.id ? /* @__PURE__ */ jsx18(Check3, { className: "size-3.5 text-primary" }) : /* @__PURE__ */ jsx18(
+            LogOut,
+            {
+              className: "size-3.5 text-destructive transition-opacity hover:bg-destructive/10 rounded-sm",
+              onClick: async (e) => {
+                e.stopPropagation();
+                if (confirm("Are you sure you want to disconnect this account? Synced files will be deleted from local cache.")) {
+                  await callAPI("removeAccount", { query: { id: account.id } });
+                  await refreshAccounts();
+                  if (activeAccountId === account.id) setActiveAccountId(null);
+                }
+              }
+            }
+          )
+        ] }, account.id)),
+        /* @__PURE__ */ jsx18(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs10(DropdownMenuSub, { children: [
+          /* @__PURE__ */ jsxs10(DropdownMenuSubTrigger, { className: "gap-2 text-primary focus:text-primary", children: [
+            /* @__PURE__ */ jsx18(Plus, { className: "size-4" }),
+            /* @__PURE__ */ jsx18("span", { className: "font-medium", children: "Add Storage Account" })
+          ] }),
+          /* @__PURE__ */ jsx18(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx18(DropdownMenuItem, { onClick: async () => {
+            const res = await callAPI("getAuthUrl", { query: { provider: "GOOGLE" } });
+            if (res.status !== 200 || !res.data?.url) {
+              alert(res.message || "Failed to initialize account connection");
+              return;
+            }
+            if (res.status === 200 && res.data?.url) {
+              const width = 600;
+              const height = 600;
+              const left = window.screen.width / 2 - width / 2;
+              const top = window.screen.height / 2 - height / 2;
+              window.open(
+                res.data.url,
+                "Connect to Google Drive",
+                `width=${width},height=${height},top=${top},left=${left}`
+              );
+              const listener = (event) => {
+                if (event.data === "oauth-success") {
+                  refreshAccounts();
+                  window.removeEventListener("message", listener);
+                }
+              };
+              window.addEventListener("message", listener);
+            }
+          }, children: "Google Drive" }) })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex-1 px-3 py-2 space-y-1", children: [
+      /* @__PURE__ */ jsxs10(
+        Button,
+        {
+          variant: currentView !== "TRASH" ? "secondary" : "ghost",
+          className: cn("w-full justify-start gap-3", currentView !== "TRASH" && "bg-primary/10 text-primary hover:bg-primary/15"),
+          onClick: () => setCurrentView("BROWSE"),
+          children: [
+            /* @__PURE__ */ jsx18(FolderOpen, { className: "size-4" }),
+            "My Files"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs10(
+        Button,
+        {
+          variant: currentView === "TRASH" ? "secondary" : "ghost",
+          className: cn("w-full justify-start gap-3", currentView === "TRASH" && "bg-destructive/10 text-destructive hover:bg-destructive/15"),
+          onClick: () => setCurrentView("TRASH"),
+          children: [
+            /* @__PURE__ */ jsx18(Trash2, { className: "size-4" }),
+            "Trash"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx18("div", { className: "px-3 py-2.5 mt-auto border-t bg-background/50", children: /* @__PURE__ */ jsx18(DriveStorageIndicator, {}) })
+  ] });
+};
+var DriveSidebar = () => {
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx18("div", { className: "lg:hidden", children: /* @__PURE__ */ jsxs10(Sheet, { children: [
+      /* @__PURE__ */ jsx18(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx18(
+        Button,
+        {
+          variant: "ghost",
+          size: "icon",
+          className: "h-9 w-9",
+          "aria-label": "Open menu",
+          children: /* @__PURE__ */ jsx18(Menu, { className: "h-5 w-5" })
+        }
+      ) }),
+      /* @__PURE__ */ jsx18(SheetContent, { side: "left", className: "w-70 sm:w-80 p-0", children: /* @__PURE__ */ jsx18(SidebarContent, {}) })
+    ] }) }),
+    /* @__PURE__ */ jsx18("div", { className: "hidden lg:flex w-full h-full", children: /* @__PURE__ */ jsx18(SidebarContent, {}) })
+  ] });
+};
+
+// src/client/components/drive/explorer.tsx
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+  useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Fragment as Fragment5, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var SortableItem = ({ id, children, disabled, isDragOverTarget }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id, disabled });
+  const style = {
+    transform: isDragOverTarget ? void 0 : CSS.Transform.toString(transform),
+    transition: isDragOverTarget ? "transform 0.15s ease" : transition,
+    opacity: isDragging ? 0.5 : 1,
+    zIndex: isDragging ? 50 : "auto",
+    position: "relative"
+  };
+  return /* @__PURE__ */ jsx19("div", { ref: setNodeRef, style, ...attributes, ...listeners, children });
+};
+var DriveExplorer = (props) => {
+  const { onItemClick, onItemDoubleClick, mimeFilter, className, selectableFolders = false } = props;
+  const {
+    items,
+    isLoading,
+    error,
+    apiEndpoint,
+    currentFolderId,
+    setItems,
+    viewMode,
+    groupBy,
+    sortBy,
+    setSortBy,
+    selectedFileIds,
+    setSelectedFileIds,
+    selectionMode,
+    navigateToFolder,
+    hasMore,
+    loadMore,
+    isLoadingMore,
+    refreshItems,
+    callAPI,
+    currentView,
+    moveItem,
+    deleteItems
+  } = useDrive();
+  const [dialogs, setDialogs] = React7.useState({
+    newFolder: false,
+    rename: false,
+    delete: false
+  });
+  const [itemToDelete, setItemToDelete] = React7.useState(null);
+  const [renameItem, setRenameItem] = React7.useState(null);
+  const [detailsItem, setDetailsItem] = React7.useState(null);
+  const [dragOverFolderId, setDragOverFolderId] = React7.useState(null);
+  const [draggingItemId, setDraggingItemId] = React7.useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } }),
+    // Prevent drag on simple click
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
+  );
+  const handleDragStart = (event) => {
+    setDraggingItemId(event.active.id);
+  };
+  const handleDragOver = (event) => {
+    const { over } = event;
+    if (!over) {
+      setDragOverFolderId(null);
+      return;
+    }
+    const overItem = items.find((i) => i.id === over.id);
+    if (overItem?.information.type === "FOLDER" && over.id !== draggingItemId) {
+      setDragOverFolderId(over.id);
+    } else {
+      setDragOverFolderId(null);
+    }
+  };
+  const handleDragEnd = async (event) => {
+    const { active, over } = event;
+    setDragOverFolderId(null);
+    setDraggingItemId(null);
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const overId = over.id;
+    if (overId.startsWith("path-")) {
+      const targetFolderId = overId.replace("path-", "");
+      await moveItem(active.id, targetFolderId === "root" ? "root" : targetFolderId);
+      return;
+    }
+    const overItem = items.find((i) => i.id === over.id);
+    const activeItem = items.find((i) => i.id === active.id);
+    if (overItem?.information.type === "FOLDER" && activeItem) {
+      await moveItem(active.id, over.id);
+      return;
+    }
+    setItems((prevItems) => {
+      const oldIndex2 = prevItems.findIndex((i) => i.id === active.id);
+      const newIndex2 = prevItems.findIndex((i) => i.id === over.id);
+      return arrayMove(prevItems, oldIndex2, newIndex2);
+    });
+    if (sortBy.field !== "order") {
+      setSortBy({ field: "order", order: 1 });
+    }
+    const oldIndex = items.findIndex((i) => i.id === active.id);
+    const newIndex = items.findIndex((i) => i.id === over.id);
+    const newOrderIds = arrayMove(items, oldIndex, newIndex).map((i) => i.id);
+    await callAPI("reorder", {
+      method: "POST",
+      body: JSON.stringify({ ids: newOrderIds })
+    });
+  };
+  const processedItems = useMemo2(() => {
+    let filtered = items;
+    if (mimeFilter) {
+      filtered = filtered.filter((item) => matchesMimeFilter(item.information.type === "FILE" ? item.information.mime : "", item.information.type === "FOLDER", mimeFilter));
+    }
+    return [...filtered].sort((a, b) => {
+      if (a.information.type === "FOLDER" && b.information.type !== "FOLDER") return -1;
+      if (a.information.type !== "FOLDER" && b.information.type === "FOLDER") return 1;
+      const field = sortBy.field;
+      const order = sortBy.order;
+      if (field === "order") {
+        return 0;
+      }
+      let valA, valB;
+      if (field === "name") {
+        valA = a.name.toLowerCase();
+        valB = b.name.toLowerCase();
+      } else if (field === "size") {
+        valA = a.information.type === "FILE" ? a.information.sizeInBytes : 0;
+        valB = b.information.type === "FILE" ? b.information.sizeInBytes : 0;
+      } else {
+        valA = new Date(a.createdAt).getTime();
+        valB = new Date(b.createdAt).getTime();
+      }
+      if (valA < valB) return -1 * order;
+      if (valA > valB) return 1 * order;
+      return 0;
+    });
+  }, [items, mimeFilter, sortBy]);
+  const groupedItems = useMemo2(() => {
+    if (groupBy === "NONE") return { "All": processedItems };
+    const groups = {
+      "Today": [],
+      "Yesterday": [],
+      "Earlier this Week": [],
+      "Last Week": [],
+      "Older": []
+    };
+    const now = /* @__PURE__ */ new Date();
+    const startOfCurrentWeek = startOfWeek(now);
+    const startOfLastWeek = startOfWeek(subWeeks(now, 1));
+    processedItems.forEach((item) => {
+      const date = new Date(item.createdAt);
+      if (isToday(date)) groups["Today"].push(item);
+      else if (isYesterday(date)) groups["Yesterday"].push(item);
+      else if (isAfter(date, startOfCurrentWeek)) groups["Earlier this Week"].push(item);
+      else if (isAfter(date, startOfLastWeek)) groups["Last Week"].push(item);
+      else groups["Older"].push(item);
+    });
+    return Object.fromEntries(Object.entries(groups).filter(([_, items2]) => items2.length > 0));
+  }, [processedItems, groupBy]);
+  const observerTarget = useRef3(null);
+  useEffect4(() => {
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting && hasMore && !isLoadingMore) loadMore();
+    }, { threshold: 0.1 });
+    if (observerTarget.current) observer.observe(observerTarget.current);
+    return () => {
+      if (observerTarget.current) observer.unobserve(observerTarget.current);
+    };
+  }, [hasMore, isLoadingMore, loadMore]);
+  const lastTapTime = useRef3(0);
+  const lastTapItemId = useRef3(null);
+  const tapTimeout = useRef3(null);
+  const handleItemClick = (e, item) => {
+    const isTouchEvent = e.type === "touchend";
+    if (isTouchEvent) {
+      const now = Date.now();
+      const timeSinceLastTap = now - lastTapTime.current;
+      const isSameItem = lastTapItemId.current === item.id;
+      if (timeSinceLastTap < 300 && isSameItem) {
+        if (tapTimeout.current) {
+          clearTimeout(tapTimeout.current);
+          tapTimeout.current = null;
+        }
+        if (item.information.type === "FOLDER" && currentView === "BROWSE") {
+          navigateToFolder(item);
+        } else {
+          onItemDoubleClick?.(item);
+        }
+        lastTapTime.current = 0;
+        lastTapItemId.current = null;
+        return;
+      }
+      lastTapTime.current = now;
+      lastTapItemId.current = item.id;
+      if (tapTimeout.current) clearTimeout(tapTimeout.current);
+      if (item.information.type === "FOLDER" && currentView === "BROWSE" && !selectableFolders) {
+        tapTimeout.current = setTimeout(() => {
+          navigateToFolder(item);
+          if (onItemClick) onItemClick(item);
+        }, 250);
+      } else {
+        if (onItemClick) onItemClick(item);
+        if (selectionMode.type === "MULTIPLE") {
+          if (selectedFileIds.includes(item.id)) {
+            setSelectedFileIds((prev) => prev.filter((id) => id !== item.id));
+          } else {
+            if (selectionMode.maxFile && selectedFileIds.length >= selectionMode.maxFile) return;
+            setSelectedFileIds((prev) => [...prev, item.id]);
+          }
+        } else {
+          setSelectedFileIds([item.id]);
+        }
+      }
+    } else {
+      if (item.information.type === "FOLDER" && !selectableFolders) {
+        if (onItemClick) onItemClick(item);
+        return;
+      }
+      if (onItemClick) onItemClick(item);
+      if (selectionMode.type === "MULTIPLE") {
+        if (selectedFileIds.includes(item.id)) {
+          setSelectedFileIds((prev) => prev.filter((id) => id !== item.id));
+        } else {
+          if (selectionMode.maxFile && selectedFileIds.length >= selectionMode.maxFile) return;
+          setSelectedFileIds((prev) => [...prev, item.id]);
+        }
+      } else {
+        setSelectedFileIds([item.id]);
+      }
+    }
+  };
+  const handleItemDoubleClick = (e, item) => {
+    if (item.information.type === "FOLDER") {
+      if (currentView === "BROWSE") navigateToFolder(item);
+    } else onItemDoubleClick?.(item);
+  };
+  useEffect4(() => {
+    return () => {
+      if (tapTimeout.current) clearTimeout(tapTimeout.current);
+    };
+  }, []);
+  const enableDrag = currentView === "BROWSE";
+  const stateContent = (() => {
+    if (isLoading && items.length === 0) {
+      return /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center py-12 flex-1", children: /* @__PURE__ */ jsx19(Loader22, { className: "size-6 animate-spin text-muted-foreground" }) });
+    }
+    if (error) {
+      return /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-center p-12 text-destructive bg-destructive/10 rounded-lg flex-1", children: error });
+    }
+    if (processedItems.length === 0) {
+      return /* @__PURE__ */ jsxs11(ContextMenu, { children: [
+        /* @__PURE__ */ jsx19(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11("div", { className: cn("flex flex-col items-center justify-center py-12 text-center flex-1", className), children: [
+          /* @__PURE__ */ jsx19("div", { className: "size-12 rounded-full bg-muted flex items-center justify-center mb-3", children: /* @__PURE__ */ jsx19(Folder2, { className: "size-6 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsx19("p", { className: "text-sm text-muted-foreground", children: currentView === "SEARCH" ? "No files match your search" : currentView === "TRASH" ? "Trash is empty" : "No files found" }),
+          currentView === "BROWSE" && /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground/60 mt-1", children: "Right-click to create a folder" })
+        ] }) }),
+        /* @__PURE__ */ jsx19(ContextMenuContent, { children: currentView === "BROWSE" ? /* @__PURE__ */ jsxs11(ContextMenuItem, { onClick: () => setDialogs((prev) => ({ ...prev, newFolder: true })), children: [
+          /* @__PURE__ */ jsx19(FolderPlus, { className: "mr-2 size-4" }),
+          " New Folder"
+        ] }) : /* @__PURE__ */ jsx19("div", { className: "px-2 py-6 text-center", children: /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground", children: "No actions available" }) }) })
+      ] });
+    }
+    return null;
+  })();
+  return /* @__PURE__ */ jsx19(DndContext, { sensors, collisionDetection: closestCenter, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxs11("div", { className: "flex flex-col h-full w-full overflow-hidden bg-background/50", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "h-14 px-3 sm:px-4 border-b bg-background/95 backdrop-blur-sm shrink-0 flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx19("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx19(DriveSidebar, {}) }),
+      /* @__PURE__ */ jsx19("div", { className: "hidden lg:flex flex-1 min-w-0", children: /* @__PURE__ */ jsx19(DrivePathBar, {}) }),
+      /* @__PURE__ */ jsx19(DriveUpload, { compact: true, onComplete: () => refreshItems() })
+    ] }),
+    /* @__PURE__ */ jsx19("div", { className: "lg:hidden px-3 py-2 border-b bg-background/95 backdrop-blur-sm shrink-0", children: /* @__PURE__ */ jsx19(DrivePathBar, {}) }),
+    stateContent || /* @__PURE__ */ jsxs11(ContextMenu, { children: [
+      /* @__PURE__ */ jsx19(ContextMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs11("div", { className: cn("flex-1 overflow-y-auto min-h-0 container mx-auto p-2 sm:p-3 md:p-4", className), children: [
+        /* @__PURE__ */ jsx19("div", { className: "space-y-4 sm:space-y-6 pb-8 sm:pb-12", children: Object.entries(groupedItems).map(([groupName, groupItems]) => /* @__PURE__ */ jsxs11("div", { className: "space-y-3", children: [
+          groupBy !== "NONE" && /* @__PURE__ */ jsxs11("h3", { className: "text-sm font-medium text-muted-foreground flex items-center gap-2", children: [
+            groupName,
+            " ",
+            /* @__PURE__ */ jsxs11("span", { className: "text-xs opacity-50", children: [
+              "(",
+              groupItems.length,
+              ")"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx19(SortableContext, { items: groupItems.map((i) => i.id), strategy: rectSortingStrategy, disabled: !enableDrag, children: /* @__PURE__ */ jsx19("div", { className: cn(
+            viewMode === "GRID" ? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-2 sm:gap-3 md:gap-4" : "flex flex-col gap-1"
+          ), children: groupItems.map((item) => {
+            const isSelected = selectedFileIds.includes(item.id);
+            const isFolder = item.information.type === "FOLDER";
+            const isDragOver = isFolder && dragOverFolderId === item.id;
+            const tokenParam = item.token ? `&token=${item.token}` : "";
+            const fileUrl = `${apiEndpoint}?action=serve&id=${item.id}${tokenParam}`;
+            const thumbnailUrl = `${apiEndpoint}?action=thumbnail&id=${item.id}&size=${viewMode === "GRID" ? "medium" : "small"}${tokenParam}`;
+            const isThumbnailable = !isFolder && item.information.type === "FILE" && (item.information.mime.startsWith("image/") || item.information.mime.startsWith("video/"));
+            return /* @__PURE__ */ jsx19(SortableItem, { id: item.id, disabled: !enableDrag, isDragOverTarget: isDragOver, children: /* @__PURE__ */ jsxs11(ContextMenu, { children: [
+              /* @__PURE__ */ jsx19(ContextMenuTrigger, { children: /* @__PURE__ */ jsx19(
+                "div",
+                {
+                  className: cn(
+                    "group relative cursor-pointer transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+                    viewMode === "GRID" ? "flex flex-col rounded-xl border bg-card hover:bg-accent/50 hover:shadow-sm overflow-hidden" : "flex items-center p-2 rounded-lg hover:bg-accent/50 gap-3 border border-transparent hover:border-border",
+                    isSelected && "ring-2 ring-primary border-primary/50 bg-accent/30",
+                    isDragOver && "ring-2 ring-primary border-primary scale-[1.02] bg-primary/10 shadow-lg transition-transform"
+                  ),
+                  onClick: (e) => handleItemClick(e, item),
+                  onTouchEnd: (e) => {
+                    e.preventDefault();
+                    handleItemClick(e, item);
+                  },
+                  onDoubleClick: (e) => handleItemDoubleClick(e, item),
+                  role: "button",
+                  tabIndex: 0,
+                  children: viewMode === "GRID" ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
+                    /* @__PURE__ */ jsxs11("div", { className: "aspect-square w-full bg-muted/20 flex items-center justify-center overflow-hidden relative", children: [
+                      isThumbnailable ? /* @__PURE__ */ jsx19("img", { src: thumbnailUrl, alt: item.name, className: "size-full object-contain transition-transform group-hover:scale-105 duration-300", loading: "lazy" }) : /* @__PURE__ */ jsx19("div", { className: "transition-transform group-hover:scale-110 duration-200", children: getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "size-10 text-muted-foreground/70") }),
+                      isSelected && /* @__PURE__ */ jsx19("div", { className: "absolute top-2 right-2 size-5 bg-primary rounded-full flex items-center justify-center shadow-sm animate-in zoom-in-50", children: /* @__PURE__ */ jsx19("div", { className: "size-2 bg-primary-foreground rounded-full" }) }),
+                      isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx19("div", { className: "absolute bottom-2 right-2 lg:hidden size-6 bg-primary/90 rounded-full flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx19(ChevronRight3, { className: "size-3.5 text-primary-foreground" }) })
+                    ] }),
+                    /* @__PURE__ */ jsxs11("div", { className: "p-3", children: [
+                      /* @__PURE__ */ jsx19("div", { className: "flex items-start justify-between gap-2", children: /* @__PURE__ */ jsx19("span", { className: "text-sm font-medium truncate w-full text-card-foreground", title: item.name, children: item.name }) }),
+                      /* @__PURE__ */ jsx19("div", { className: "flex items-center justify-between mt-1 text-xs text-muted-foreground", children: /* @__PURE__ */ jsx19("span", { children: isFolder ? "Folder" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) }) })
+                    ] })
+                  ] }) : /* @__PURE__ */ jsxs11(Fragment5, { children: [
+                    /* @__PURE__ */ jsx19("div", { className: "size-9 shrink-0 rounded-md overflow-hidden bg-muted/40 flex items-center justify-center border", children: isThumbnailable ? /* @__PURE__ */ jsx19("img", { src: thumbnailUrl, alt: item.name, className: "size-full object-contain", loading: "lazy" }) : getFileIcon(item.information.type === "FILE" ? item.information.mime : "", isFolder, "size-4 text-muted-foreground") }),
+                    /* @__PURE__ */ jsx19("span", { className: "text-sm font-medium truncate flex-1 text-card-foreground", title: item.name, children: item.name }),
+                    /* @__PURE__ */ jsx19("span", { className: "text-xs text-muted-foreground w-20 text-right", children: isFolder ? "-" : formatBytes(item.information.type === "FILE" ? item.information.sizeInBytes : 0) }),
+                    isFolder && currentView === "BROWSE" && /* @__PURE__ */ jsx19(ChevronRight3, { className: "size-4 text-muted-foreground lg:hidden shrink-0" })
+                  ] })
+                }
+              ) }),
+              /* @__PURE__ */ jsx19(ContextMenuContent, { children: currentView === "TRASH" ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
+                /* @__PURE__ */ jsxs11(ContextMenuItem, { onClick: async () => {
+                  await callAPI("restore", { method: "POST", query: { id: item.id } });
+                  await refreshItems();
+                }, children: [
+                  /* @__PURE__ */ jsx19(RotateCcw, { className: "mr-2 size-4" }),
+                  " Restore"
+                ] }),
+                /* @__PURE__ */ jsx19(ContextMenuSeparator, {}),
+                /* @__PURE__ */ jsxs11(ContextMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => {
+                  setItemToDelete(item);
+                  setDialogs((prev) => ({ ...prev, delete: true }));
+                }, children: [
+                  /* @__PURE__ */ jsx19(Trash22, { className: "mr-2 size-4" }),
+                  " Delete Forever"
+                ] })
+              ] }) : /* @__PURE__ */ jsxs11(Fragment5, { children: [
+                /* @__PURE__ */ jsxs11(ContextMenuItem, { onClick: () => setDetailsItem(item), children: [
+                  /* @__PURE__ */ jsx19(Info, { className: "mr-2 size-4" }),
+                  " Details"
+                ] }),
+                /* @__PURE__ */ jsxs11(ContextMenuItem, { onClick: () => {
+                  setRenameItem(item);
+                  setDialogs((prev) => ({ ...prev, rename: true }));
+                }, children: [
+                  /* @__PURE__ */ jsx19(Pencil, { className: "mr-2 size-4" }),
+                  " Rename"
+                ] }),
+                /* @__PURE__ */ jsx19(ContextMenuSeparator, {}),
+                /* @__PURE__ */ jsxs11(ContextMenuItem, { className: "text-destructive focus:text-destructive", onClick: () => {
+                  setItemToDelete(item);
+                  setDialogs((prev) => ({ ...prev, delete: true }));
+                }, children: [
+                  /* @__PURE__ */ jsx19(Trash22, { className: "mr-2 size-4" }),
+                  " Delete"
+                ] })
+              ] }) })
+            ] }) }, item.id);
+          }) }) })
+        ] }, groupName)) }),
+        hasMore && /* @__PURE__ */ jsxs11("div", { ref: observerTarget, className: "flex justify-center py-4", children: [
+          isLoadingMore && /* @__PURE__ */ jsx19(Loader22, { className: "size-6 animate-spin text-muted-foreground" }),
+          !isLoadingMore && /* @__PURE__ */ jsx19("div", { className: "h-4 w-full" })
+        ] }),
+        /* @__PURE__ */ jsx19(
+          DriveFileDetails,
+          {
+            item: detailsItem,
+            isOpen: !!detailsItem,
+            onClose: () => setDetailsItem(null),
+            apiEndpoint
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          DialogConfirmation,
+          {
+            open: dialogs.newFolder,
+            onClose: () => setDialogs((prev) => ({ ...prev, newFolder: false })),
+            title: "Create New Folder",
+            description: "Enter a name for the new folder",
+            inputs: [{ type: "INPUT", id: "name", name: "Folder name", required: true }],
+            onConfirm: async (inputs) => {
+              try {
+                await callAPI("createFolder", {
+                  method: "POST",
+                  body: JSON.stringify({ name: inputs.name, parentId: currentFolderId || "root" })
+                });
+                await refreshItems();
+                return [true];
+              } catch (error2) {
+                return [false, error2 instanceof Error ? error2.message : "Failed to create folder"];
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          DialogConfirmation,
+          {
+            open: dialogs.rename,
+            onClose: () => {
+              setDialogs((prev) => ({ ...prev, rename: false }));
+              setRenameItem(null);
+            },
+            title: `Rename ${renameItem?.information.type === "FOLDER" ? "Folder" : "File"}`,
+            description: "Enter a new name",
+            inputs: [{ type: "INPUT", id: "name", name: "Name", default: renameItem?.name, required: true }],
+            onConfirm: async (inputs) => {
+              if (!renameItem) return [false, "No item selected"];
+              try {
+                await callAPI("rename", {
+                  method: "PATCH",
+                  query: { id: renameItem.id },
+                  body: JSON.stringify({ newName: inputs.name })
+                });
+                await refreshItems();
+                setRenameItem(null);
+                return [true];
+              } catch (error2) {
+                return [false, error2 instanceof Error ? error2.message : "Failed to rename"];
+              }
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx19(
+          DialogConfirmation,
+          {
+            open: dialogs.delete,
+            onClose: () => {
+              setDialogs((prev) => ({ ...prev, delete: false }));
+              setItemToDelete(null);
+            },
+            title: currentView === "TRASH" ? "Delete Permanently?" : "Move to Trash?",
+            description: currentView === "TRASH" ? `This will permanently delete "${itemToDelete?.name}". You cannot undo this action.` : `Are you sure you want to move "${itemToDelete?.name}" to trash?`,
+            onConfirm: async () => {
+              if (!itemToDelete) return [false, "No item selected"];
+              try {
+                await deleteItems([itemToDelete.id]);
+                await refreshItems();
+                setItemToDelete(null);
+                return [true];
+              } catch (error2) {
+                return [false, error2 instanceof Error ? error2.message : "Failed to delete"];
+              }
+            }
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsx19(ContextMenuContent, { children: currentView === "BROWSE" ? /* @__PURE__ */ jsxs11(ContextMenuItem, { onClick: () => setDialogs((prev) => ({ ...prev, newFolder: true })), children: [
+        /* @__PURE__ */ jsx19(FolderPlus, { className: "mr-2 size-4" }),
+        " New Folder"
+      ] }) : /* @__PURE__ */ jsx19("div", { className: "px-2 py-6 text-center", children: /* @__PURE__ */ jsx19("p", { className: "text-xs text-muted-foreground", children: "No actions available" }) }) })
+    ] })
+  ] }) });
+};
+
+// src/client/components/drive/header.tsx
+import { useState as useState5 } from "react";
+import {
+  Trash2 as Trash23,
+  ArrowUpDown,
+  LayoutGrid,
+  List,
+  Group as Group3,
+  Calendar as Calendar2,
+  ArrowDownAZ,
+  ArrowUpAZ,
+  ArrowDown01,
+  ArrowUp01,
+  Check as Check4,
+  RotateCcw as RotateCcw2,
+  Menu as Menu2
+} from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
+var DriveHeader = () => {
+  const {
+    viewMode,
+    setViewMode,
+    groupBy,
+    setGroupBy,
+    sortBy,
+    setSortBy,
+    selectedFileIds,
+    setItems,
+    apiEndpoint,
+    setSelectedFileIds,
+    currentView,
+    setCurrentView,
+    searchQuery,
+    setSearchQuery,
+    callAPI,
+    refreshItems,
+    searchScope,
+    setSearchScope
+  } = useDrive();
+  const [dialogs, setDialogs] = useState5({ delete: false, emptyTrash: false });
+  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-wrap items-center gap-2 border-b bg-muted/30 p-2", children: [
+    (selectedFileIds.length > 0 || currentView === "TRASH") && /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx20(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx20(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "gap-1.5",
+          children: /* @__PURE__ */ jsx20(Menu2, { className: "size-4" })
+        }
+      ) }),
+      /* @__PURE__ */ jsxs12(DropdownMenuContent, { align: "start", children: [
+        selectedFileIds.length > 0 && currentView === "TRASH" && /* @__PURE__ */ jsxs12(
+          DropdownMenuItem,
+          {
+            onClick: async () => {
+              try {
+                await Promise.all(selectedFileIds.map(
+                  (id) => fetch(`${apiEndpoint}?action=restore&id=${id}`, { method: "POST" })
+                ));
+                await refreshItems();
+                setSelectedFileIds([]);
+              } catch (error) {
+                console.error("Error restoring files:", error);
+              }
+            },
+            children: [
+              /* @__PURE__ */ jsx20(RotateCcw2, { className: "size-3.5 mr-2" }),
+              "Restore (",
+              selectedFileIds.length,
+              ")"
+            ]
+          }
+        ),
+        selectedFileIds.length > 0 && /* @__PURE__ */ jsxs12(
+          DropdownMenuItem,
+          {
+            onClick: () => setDialogs((prev) => ({ ...prev, delete: true })),
+            className: "text-destructive focus:text-destructive",
+            children: [
+              /* @__PURE__ */ jsx20(Trash23, { className: "size-3.5 mr-2" }),
+              currentView === "TRASH" ? "Delete Forever" : "Delete",
+              " (",
+              selectedFileIds.length,
+              ")"
+            ]
+          }
+        ),
+        currentView === "TRASH" && selectedFileIds.length === 0 && /* @__PURE__ */ jsxs12(
+          DropdownMenuItem,
+          {
+            onClick: () => setDialogs((prev) => ({ ...prev, emptyTrash: true })),
+            className: "text-destructive focus:text-destructive",
+            children: [
+              /* @__PURE__ */ jsx20(Trash23, { className: "size-3.5 mr-2" }),
+              "Empty Trash"
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx20(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(
+        Button,
+        {
+          type: "button",
+          variant: groupBy !== "NONE" ? "secondary" : "ghost",
+          size: "sm",
+          className: "gap-1.5",
+          children: [
+            /* @__PURE__ */ jsx20(Group3, { className: "size-3.5" }),
+            /* @__PURE__ */ jsx20("span", { className: "hidden sm:inline", children: groupBy === "NONE" ? "Group" : "Grouped" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsxs12(DropdownMenuContent, { align: "start", children: [
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setGroupBy("NONE"), children: [
+          groupBy === "NONE" && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20("span", { className: cn(groupBy !== "NONE" && "pl-5.5"), children: "No Grouping" })
+        ] }),
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setGroupBy("CREATED_AT"), children: [
+          groupBy === "CREATED_AT" && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20("span", { className: cn(groupBy !== "CREATED_AT" && "pl-5.5"), children: "Created Date" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex-1 min-w-0 sm:min-w-50 relative", children: [
+      /* @__PURE__ */ jsx20(
+        Input,
+        {
+          type: "text",
+          placeholder: "Search files...",
+          className: "w-full pl-8 pr-7 h-9",
+          value: searchQuery,
+          onChange: (e) => {
+            const val = e.target.value;
+            setSearchQuery(val);
+            if (val.trim().length > 0) {
+              if (currentView !== "SEARCH") {
+                setSearchScope(currentView === "TRASH" ? "TRASH" : "ACTIVE");
+              }
+              setCurrentView("SEARCH");
+            } else if (currentView === "SEARCH") {
+              setCurrentView(searchScope === "TRASH" ? "TRASH" : "BROWSE");
+            }
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx20("div", { className: "absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground pointer-events-none", children: /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-search", children: [
+        /* @__PURE__ */ jsx20("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx20("path", { d: "m21 21-4.3-4.3" })
+      ] }) }),
+      searchQuery && /* @__PURE__ */ jsx20(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "absolute right-0.5 top-1/2 -translate-y-1/2 h-7 w-7 text-muted-foreground",
+          onClick: () => {
+            setSearchQuery("");
+            setCurrentView(searchScope === "TRASH" ? "TRASH" : "BROWSE");
+          },
+          children: /* @__PURE__ */ jsxs12("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide lucide-x", children: [
+            /* @__PURE__ */ jsx20("path", { d: "M18 6 6 18" }),
+            /* @__PURE__ */ jsx20("path", { d: "m6 6 12 12" })
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx20(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs12(Button, { type: "button", variant: "ghost", size: "sm", className: "gap-1.5", children: [
+        /* @__PURE__ */ jsx20(ArrowUpDown, { className: "size-3.5" }),
+        /* @__PURE__ */ jsx20("span", { className: "hidden sm:inline max-w-24 truncate", children: sortBy.field === "id" ? "Default" : sortBy.field === "order" ? "Custom" : sortBy.field === "createdAt" ? sortBy.order === -1 ? "Date: Newest" : "Date: Oldest" : sortBy.field === "name" ? sortBy.order === 1 ? "Name: A to Z" : "Name: Z to A" : sortBy.field === "size" ? sortBy.order === -1 ? "Size: Large" : "Size: Small" : "Sort" })
+      ] }) }),
+      /* @__PURE__ */ jsxs12(DropdownMenuContent, { align: "end", children: [
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setSortBy({ field: "order", order: 1 }), children: [
+          sortBy.field === "order" && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20("span", { className: cn(sortBy.field !== "order" && "pl-5.5"), children: "Custom Order" })
+        ] }),
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setSortBy({ field: "id", order: 1 }), children: [
+          sortBy.field === "id" && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20("span", { className: cn(sortBy.field !== "id" && "pl-5.5"), children: "Default" })
+        ] }),
+        /* @__PURE__ */ jsx20(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setSortBy({ field: "createdAt", order: -1 }), children: [
+          sortBy.field === "createdAt" && sortBy.order === -1 && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20(Calendar2, { className: cn("size-3.5 mr-2", sortBy.field === "createdAt" && sortBy.order === -1 ? "" : "ml-5.5") }),
+          "Date: Newest"
+        ] }),
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setSortBy({ field: "createdAt", order: 1 }), children: [
+          sortBy.field === "createdAt" && sortBy.order === 1 && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20(Calendar2, { className: cn("size-3.5 mr-2", sortBy.field === "createdAt" && sortBy.order === 1 ? "" : "ml-5.5") }),
+          "Date: Oldest"
+        ] }),
+        /* @__PURE__ */ jsx20(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setSortBy({ field: "name", order: 1 }), children: [
+          sortBy.field === "name" && sortBy.order === 1 && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20(ArrowDownAZ, { className: cn("size-3.5 mr-2", sortBy.field === "name" && sortBy.order === 1 ? "" : "ml-5.5") }),
+          "Name: A to Z"
+        ] }),
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setSortBy({ field: "name", order: -1 }), children: [
+          sortBy.field === "name" && sortBy.order === -1 && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20(ArrowUpAZ, { className: cn("size-3.5 mr-2", sortBy.field === "name" && sortBy.order === -1 ? "" : "ml-5.5") }),
+          "Name: Z to A"
+        ] }),
+        /* @__PURE__ */ jsx20(DropdownMenuSeparator, {}),
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setSortBy({ field: "size", order: -1 }), children: [
+          sortBy.field === "size" && sortBy.order === -1 && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20(ArrowDown01, { className: cn("size-3.5 mr-2", sortBy.field === "size" && sortBy.order === -1 ? "" : "ml-5.5") }),
+          "Size: Large"
+        ] }),
+        /* @__PURE__ */ jsxs12(DropdownMenuItem, { onClick: () => setSortBy({ field: "size", order: 1 }), children: [
+          sortBy.field === "size" && sortBy.order === 1 && /* @__PURE__ */ jsx20(Check4, { className: "size-3.5 mr-2" }),
+          /* @__PURE__ */ jsx20(ArrowUp01, { className: cn("size-3.5 mr-2", sortBy.field === "size" && sortBy.order === 1 ? "" : "ml-5.5") }),
+          "Size: Small"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx20("div", { className: "w-px h-5 bg-border" }),
+    /* @__PURE__ */ jsxs12("div", { className: "flex bg-muted rounded-md p-0.5 gap-0.5", children: [
+      /* @__PURE__ */ jsx20(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: cn("h-8 w-8", viewMode === "GRID" && "bg-white shadow-sm hover:bg-white"),
+          onClick: () => setViewMode("GRID"),
+          "aria-label": "Grid View",
+          "aria-pressed": viewMode === "GRID",
+          children: /* @__PURE__ */ jsx20(LayoutGrid, { className: "size-4" })
+        }
+      ),
+      /* @__PURE__ */ jsx20(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: cn("h-8 w-8", viewMode === "LIST" && "bg-white shadow-sm hover:bg-white"),
+          onClick: () => setViewMode("LIST"),
+          "aria-label": "List View",
+          "aria-pressed": viewMode === "LIST",
+          children: /* @__PURE__ */ jsx20(List, { className: "size-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx20(
+      DialogConfirmation,
+      {
+        open: dialogs.delete,
+        onClose: () => setDialogs((prev) => ({ ...prev, delete: false })),
+        title: currentView === "TRASH" ? "Delete Permanently?" : "Move to Trash?",
+        description: currentView === "TRASH" ? `This will permanently delete ${selectedFileIds.length} item(s). You cannot undo this action.` : `Are you sure you want to move ${selectedFileIds.length} item(s) to trash?`,
+        onConfirm: async () => {
+          if (selectedFileIds.length === 0) return [false, "No files selected"];
+          try {
+            if (currentView === "TRASH") {
+              await Promise.all(selectedFileIds.map(
+                (id) => fetch(`${apiEndpoint}?action=deletePermanent&id=${id}`, { method: "DELETE" })
+              ));
+              await refreshItems();
+              setSelectedFileIds([]);
+            } else {
+              const response = await fetch(`${apiEndpoint}?action=deleteMany`, {
+                method: "DELETE",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ ids: selectedFileIds })
+              });
+              const result = await response.json();
+              if (result.status === 200) {
+                setItems((prevItems) => prevItems.filter((item) => !selectedFileIds.includes(item.id)));
+                setSelectedFileIds([]);
+              } else {
+                return [false, result.message || "Failed to delete files"];
+              }
+            }
+            return [true];
+          } catch (error) {
+            return [false, error instanceof Error ? error.message : "Error deleting files"];
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx20(
+      DialogConfirmation,
+      {
+        open: dialogs.emptyTrash,
+        onClose: () => setDialogs((prev) => ({ ...prev, emptyTrash: false })),
+        title: "Empty Trash?",
+        description: "All items in the trash will be permanently deleted. This action cannot be undone.",
+        onConfirm: async () => {
+          try {
+            await callAPI("emptyTrash", { method: "POST" });
+            await refreshItems();
+            return [true];
+          } catch (e) {
+            return [false, e instanceof Error ? e.message : "Failed to empty trash"];
+          }
+        }
+      }
+    )
+  ] });
+};
+
+// src/client/components/drive/file/preview.tsx
+import { useState as useState6 } from "react";
+import { Document, Page, pdfjs } from "react-pdf";
+import { jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
+if (typeof window !== "undefined") {
+  pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.js`;
+}
+var DriveFilePreview = (props) => {
+  const { item, onClose } = props;
+  const { apiEndpoint } = useDrive();
+  const [pdfNumPages, setPdfNumPages] = useState6(null);
+  if (item.information.type === "FOLDER") return null;
+  const mime = item.information.mime;
+  const tokenParam = item.token ? `&token=${item.token}` : "";
+  const fileUrl = `${apiEndpoint}?action=serve&id=${item.id}${tokenParam}`;
+  const renderContent = () => {
+    if (mime.startsWith("image/")) return /* @__PURE__ */ jsx21("img", { src: fileUrl, alt: item.name, className: "max-w-full max-h-[70vh] rounded-md object-contain shadow-sm" });
+    if (mime.startsWith("video/")) return /* @__PURE__ */ jsx21("video", { src: fileUrl, controls: true, autoPlay: true, className: "max-w-full max-h-[70vh] rounded-md shadow-sm bg-black", children: "Your browser does not support video playback." });
+    if (mime.startsWith("audio/")) return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center gap-6 py-8 px-4 w-full", children: [
+      /* @__PURE__ */ jsx21("div", { className: "w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center", children: /* @__PURE__ */ jsx21("span", { className: "text-4xl", children: "\u{1F3B5}" }) }),
+      /* @__PURE__ */ jsxs13("div", { className: "text-center space-y-1", children: [
+        /* @__PURE__ */ jsx21("h4", { className: "font-medium text-lg", children: item.name }),
+        /* @__PURE__ */ jsx21("p", { className: "text-sm text-muted-foreground", children: mime })
+      ] }),
+      /* @__PURE__ */ jsx21("audio", { src: fileUrl, controls: true, autoPlay: true, className: "w-full max-w-md mt-2", children: "Your browser does not support audio playback." })
+    ] });
+    if (mime === "application/pdf") {
+      return /* @__PURE__ */ jsxs13("div", { className: "max-h-[70vh] overflow-y-auto rounded-md border bg-white dark:bg-zinc-900 mx-auto w-full", children: [
+        /* @__PURE__ */ jsx21(Document, { file: fileUrl, onLoadSuccess: ({ numPages }) => setPdfNumPages(numPages), className: "flex flex-col items-center gap-4 p-4", children: pdfNumPages && Array.from(new Array(Math.min(pdfNumPages, 10)), (_, index) => /* @__PURE__ */ jsx21(
+          Page,
+          {
+            pageNumber: index + 1,
+            renderTextLayer: false,
+            renderAnnotationLayer: false,
+            className: "shadow-md",
+            width: 600
+          },
+          `page_${index + 1}`
+        )) }),
+        pdfNumPages && pdfNumPages > 10 && /* @__PURE__ */ jsxs13("div", { className: "p-4 text-center text-sm text-muted-foreground border-t bg-muted/20", children: [
+          "Showing 10 of ",
+          pdfNumPages,
+          " pages (Preview limited)"
+        ] })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs13("div", { className: "flex flex-col items-center justify-center gap-6 py-12", children: [
+      /* @__PURE__ */ jsx21("div", { className: "p-4 rounded-full bg-muted", children: /* @__PURE__ */ jsx21("span", { className: "text-4xl opacity-50", children: "\u{1F4C4}" }) }),
+      /* @__PURE__ */ jsxs13("div", { className: "text-center space-y-2", children: [
+        /* @__PURE__ */ jsx21("h4", { className: "font-medium", children: "Preview not available" }),
+        /* @__PURE__ */ jsx21("p", { className: "text-sm text-muted-foreground max-w-xs mx-auto", children: "This file type usually cannot be previewed in the browser." })
+      ] }),
+      /* @__PURE__ */ jsx21(Button, { asChild: true, children: /* @__PURE__ */ jsx21("a", { href: fileUrl, download: item.name, children: "Download File" }) })
+    ] });
+  };
+  return /* @__PURE__ */ jsx21(Dialog, { open: true, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs13(DialogContent, { className: "sm:max-w-5xl max-h-[90vh] flex flex-col gap-0 p-0", children: [
+    /* @__PURE__ */ jsx21(DialogHeader, { className: "px-4 py-3 border-b shrink-0 flex flex-row items-center justify-between", children: /* @__PURE__ */ jsx21(DialogTitle, { className: "truncate pr-8", children: item.name }) }),
+    /* @__PURE__ */ jsx21("div", { className: "p-6 overflow-auto flex items-center justify-center bg-muted/5 min-h-75 flex-1", children: renderContent() })
+  ] }) });
+};
+
+// src/client/file-chooser.tsx
+import { Upload as UploadIcon2, X as X4 } from "lucide-react";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
+var DriveFileChooser = (props) => {
+  const {
+    value,
+    onChange,
+    multiple,
+    accept,
+    placeholder,
+    className,
+    disabled,
+    error,
+    helperText
+  } = {
+    multiple: false,
+    placeholder: "Choose files...",
+    className: "",
+    disabled: false,
+    ...props
+  };
+  const { items, selectedFileIds, setSelectedFileIds } = useDrive();
+  const [isOpen, setIsOpen] = useState7(false);
+  const [previewFile, setPreviewFile] = useState7(null);
+  useEffect5(() => {
+    if (isOpen) {
+      if (!value) setSelectedFileIds([]);
+      else if (Array.isArray(value)) setSelectedFileIds(value.map((f) => f.id));
+      else setSelectedFileIds([value.id]);
+    }
+  }, [isOpen, value, setSelectedFileIds]);
+  const handleConfirm = useCallback4(() => {
+    const selectedItems = items.filter((item) => selectedFileIds.includes(item.id));
+    const files = selectedItems.map((item) => ({
+      id: item.id,
+      file: { name: item.name, mime: item.information.type === "FILE" ? item.information.mime : "", size: item.information.type === "FILE" ? item.information.sizeInBytes : 0 }
+    }));
+    onChange(multiple ? files : files[0] || null);
+    setIsOpen(false);
+  }, [items, selectedFileIds, multiple, onChange]);
+  const handleRemove = (idToRemove) => {
+    if (multiple && Array.isArray(value)) {
+      onChange(value.filter((f) => f.id !== idToRemove));
+    } else {
+      onChange(null);
+    }
+  };
+  const hasSelection = value && (Array.isArray(value) ? value.length > 0 : true);
+  const displayFiles = useMemo3(() => {
+    if (!value) return [];
+    return Array.isArray(value) ? value : [value];
+  }, [value]);
+  const isSingle = !multiple;
+  return /* @__PURE__ */ jsxs14("div", { className: cn("space-y-1.5", className), children: [
+    !hasSelection && /* @__PURE__ */ jsxs14(
+      "button",
+      {
+        type: "button",
+        onClick: () => !disabled && setIsOpen(true),
+        disabled,
+        className: cn(
+          "w-full flex items-center gap-3 px-3 py-2.5 rounded-md border border-dashed text-left transition-colors",
+          "hover:bg-accent hover:border-accent-foreground/20",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          error && "border-destructive bg-destructive/5 hover:bg-destructive/10",
+          disabled && "opacity-50 cursor-not-allowed hover:bg-transparent"
+        ),
+        children: [
+          /* @__PURE__ */ jsx22("div", { className: cn(
+            "flex items-center justify-center size-9 rounded-md bg-muted",
+            error && "bg-destructive/10"
+          ), children: /* @__PURE__ */ jsx22(UploadIcon2, { className: cn("size-4", error ? "text-destructive" : "text-muted-foreground") }) }),
+          /* @__PURE__ */ jsxs14("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx22("p", { className: cn("text-sm font-medium", error && "text-destructive"), children: isSingle ? "Select a file" : "Select files" }),
+            /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground", children: placeholder })
+          ] })
+        ]
+      }
+    ),
+    hasSelection && isSingle && displayFiles[0] && /* @__PURE__ */ jsxs14("div", { className: cn(
+      "flex items-center gap-2.5 px-2.5 py-2 rounded-md border bg-muted/30",
+      error && "border-destructive",
+      disabled && "opacity-50"
+    ), children: [
+      /* @__PURE__ */ jsx22("div", { className: "size-10 shrink-0 rounded overflow-hidden bg-muted flex items-center justify-center", children: getFileIcon(displayFiles[0].file.mime, false, "size-5 text-muted-foreground") }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx22("p", { className: "text-sm font-medium truncate", children: displayFiles[0].file.name }),
+        /* @__PURE__ */ jsx22("p", { className: "text-xs text-muted-foreground truncate", children: displayFiles[0].file.mime })
+      ] }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1 shrink-0", children: [
+        /* @__PURE__ */ jsx22(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setIsOpen(true),
+            disabled,
+            children: "Change"
+          }
+        ),
+        !disabled && /* @__PURE__ */ jsx22(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            onClick: () => handleRemove(displayFiles[0].id),
+            children: /* @__PURE__ */ jsx22(X4, { className: "size-3.5" })
+          }
+        )
+      ] })
+    ] }),
+    hasSelection && !isSingle && /* @__PURE__ */ jsxs14("div", { className: cn(
+      "rounded-md border",
+      error && "border-destructive",
+      disabled && "opacity-50"
+    ), children: [
+      /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between px-2.5 py-1.5 border-b bg-muted/30", children: [
+        /* @__PURE__ */ jsxs14("span", { className: "text-xs text-muted-foreground", children: [
+          displayFiles.length,
+          " files selected"
+        ] }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx22(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => setIsOpen(true),
+              disabled,
+              children: "Add more"
+            }
+          ),
+          !disabled && /* @__PURE__ */ jsx22(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              onClick: () => onChange([]),
+              children: "Clear all"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx22("div", { className: "divide-y max-h-40 overflow-y-auto", children: displayFiles.map((file) => /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 px-2.5 py-1.5 hover:bg-muted/30", children: [
+        /* @__PURE__ */ jsx22("div", { className: "size-7 shrink-0 rounded overflow-hidden bg-muted flex items-center justify-center", children: getFileIcon(file.file.mime, false, "size-3.5 text-muted-foreground") }),
+        /* @__PURE__ */ jsx22("span", { className: "flex-1 text-sm truncate", children: file.file.name }),
+        !disabled && /* @__PURE__ */ jsx22(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            onClick: () => handleRemove(file.id),
+            children: /* @__PURE__ */ jsx22(X4, { className: "size-3" })
+          }
+        )
+      ] }, file.id)) })
+    ] }),
+    error && helperText && /* @__PURE__ */ jsx22("p", { className: "text-xs text-destructive", children: helperText }),
+    /* @__PURE__ */ jsx22(Dialog, { open: isOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxs14(DialogContent, { className: "sm:max-w-5xl max-h-[85vh] w-[95vw] flex flex-col gap-0 p-0", children: [
+      /* @__PURE__ */ jsx22(DialogHeader, { className: "px-0 py-0 border-b shrink-0 flex flex-col gap-0", children: /* @__PURE__ */ jsx22("div", { className: "flex items-center justify-between px-3 sm:px-4 py-3 border-b", children: /* @__PURE__ */ jsx22(DialogTitle, { className: "text-sm sm:text-base", children: "File Explorer" }) }) }),
+      /* @__PURE__ */ jsxs14("div", { className: "flex-1 overflow-hidden flex min-h-0 bg-muted/5", children: [
+        /* @__PURE__ */ jsx22("div", { className: "hidden md:flex w-48 lg:w-52 border-r bg-background/50 flex-col", children: /* @__PURE__ */ jsx22(DriveSidebar, {}) }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex-1 flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsx22(DriveHeader, {}),
+          /* @__PURE__ */ jsx22(
+            DriveExplorer,
+            {
+              mimeFilter: accept,
+              onItemDoubleClick: (item) => {
+                if (item.information.type === "FILE") {
+                  setPreviewFile(item);
+                }
+              }
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs14(DialogFooter, { className: "px-3 sm:px-4 py-3 border-t bg-background shrink-0 gap-2 flex-row justify-end", children: [
+        /* @__PURE__ */ jsx22(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setIsOpen(false), children: "Cancel" }),
+        /* @__PURE__ */ jsxs14(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            onClick: handleConfirm,
+            disabled: selectedFileIds.length === 0,
+            children: [
+              "Select ",
+              selectedFileIds.length > 0 ? `(${selectedFileIds.length})` : ""
+            ]
+          }
+        )
+      ] })
+    ] }) }),
+    previewFile && /* @__PURE__ */ jsx22(DriveFilePreview, { item: previewFile, onClose: () => setPreviewFile(null) })
+  ] });
+};
+export {
+  DriveExplorer,
+  DriveFileChooser,
+  DriveFilePreview,
+  DriveHeader,
+  DrivePathBar,
+  DriveProvider,
+  DriveSidebar,
+  DriveStorageIndicator,
+  DriveUpload,
+  useDrive,
+  useUpload
+};
+//# sourceMappingURL=index.js.map