@muhgholy/next-drive 1.0.2 → 1.1.1

package/README.md

@@ -23,6 +23,7 @@ npm install @muhgholy/next-drive
 -    Next.js >= 14
 -    React >= 18
 -    Mongoose >= 7
+-    Tailwind CSS >= 3
 
 **System Requirements:**
 
@@ -31,6 +32,29 @@ npm install @muhgholy/next-drive
      -    Ubuntu: `sudo apt install ffmpeg`
      -    Windows: Download from official site and add to PATH.
 
+### Tailwind CSS Configuration
+
+Since this package uses Tailwind CSS for styling, you **must** configure Tailwind to scan the package's files:
+
+```js
+// tailwind.config.js
+export default {
+	content: [
+		"./app/**/*.{js,ts,jsx,tsx,mdx}",
+		"./pages/**/*.{js,ts,jsx,tsx,mdx}",
+		"./components/**/*.{js,ts,jsx,tsx,mdx}",
+		// Add the next-drive package
+		"./node_modules/@muhgholy/next-drive/dist/**/*.{js,mjs}",
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};
+```
+
+> **Note**: The CSS is automatically injected when you import from `@muhgholy/next-drive/client` - no need to manually import stylesheets.
+
 ## Quick Start
 
 ### 1. Configure Server
@@ -74,7 +98,10 @@ export const drive = driveConfiguration({
 
 Set up the API route handler that `next-drive` will use to communicate with the client.
 
-**Important:** The API route must be in the `pages` folder (Pages Router) for Next.js to handle the request properly.
+**Important:**
+
+-    The API route must be in the `pages` folder (Pages Router)
+-    **You MUST disable Next.js body parser** for uploads to work properly
 
 ```typescript
 // pages/api/drive.ts
@@ -83,8 +110,35 @@ import { driveAPIHandler } from "@muhgholy/next-drive/server";
 import type { NextApiRequest, NextApiResponse } from "next";
 
 export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+	// Manually parse JSON body for non-upload requests
+	if (!req.body) req.body = {};
+
+	if (req.headers["content-type"]?.includes("application/json")) {
+		try {
+			const buffer = await new Promise<Buffer>((resolve, reject) => {
+				const chunks: Buffer[] = [];
+				req.on("data", (chunk) => chunks.push(chunk));
+				req.on("end", () => resolve(Buffer.concat(chunks)));
+				req.on("error", reject);
+			});
+
+			if (buffer.length > 0) {
+				req.body = JSON.parse(buffer.toString());
+			}
+		} catch (e) {
+			console.error("Failed to parse JSON body", e);
+		}
+	}
+
 	return driveAPIHandler(req, res);
 }
+
+// ⚠️ CRITICAL: Disable body parser for file uploads
+export const config = {
+	api: {
+		bodyParser: false,
+	},
+};
 ```
 
 ### 3. Add Provider
@@ -147,6 +201,49 @@ type MyFormData = z.infer<typeof myFormSchema>;
 
 ## Key Capabilities
 
+### Client-Side File URLs
+
+**Generate File URL:**
+
+```typescript
+import { useDrive } from "@muhgholy/next-drive/client";
+import type { TDriveFile } from "@muhgholy/next-drive/client";
+
+function MyComponent() {
+	const { createUrl } = useDrive();
+
+	// Basic URL generation
+	const url = createUrl(driveFile);
+	// Returns: /api/drive?action=serve&id={fileId}
+
+	// With image quality and format
+	const url = createUrl(driveFile, {
+		quality: "medium",
+		format: "webp",
+	});
+	// Returns: /api/drive?action=serve&id={fileId}&q=medium&format=webp
+
+	// Use in Next.js Image component
+	return <Image src={createUrl(driveFile)} alt={driveFile.file.name} />;
+}
+```
+
+**Responsive Image SrcSet:**
+
+```typescript
+import { useDrive } from "@muhgholy/next-drive/client";
+
+function ResponsiveImage({ driveFile }: { driveFile: TDriveFile }) {
+	const { createUrl, createSrcSet } = useDrive();
+
+	// Generate responsive srcSet for optimal image loading
+	const { srcSet, sizes } = createSrcSet(driveFile, "webp");
+
+	// Use in img tag
+	return <img src={createUrl(driveFile, { quality: "medium" })} srcSet={srcSet} sizes={sizes} alt={driveFile.file.name} />;
+}
+```
+
 ### Server-Side File Access
 
 **Get File URL:**

package/dist/client/index.css

@@ -1,48 +1,53 @@
 /* src/client/styles.css */
-:root {
-  --background: 0 0% 100%;
-  --foreground: 222.2 84% 4.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 222.2 84% 4.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 222.2 84% 4.9%;
-  --primary: 222.2 47.4% 11.2%;
-  --primary-foreground: 210 40% 98%;
-  --secondary: 210 40% 96.1%;
-  --secondary-foreground: 222.2 47.4% 11.2%;
-  --muted: 210 40% 96.1%;
-  --muted-foreground: 215.4 16.3% 46.9%;
-  --accent: 210 40% 96.1%;
-  --accent-foreground: 222.2 47.4% 11.2%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 214.3 31.8% 91.4%;
-  --input: 214.3 31.8% 91.4%;
-  --ring: 222.2 84% 4.9%;
-  --radius: 0.5rem;
-}
-.dark {
-  --background: 222.2 84% 4.9%;
-  --foreground: 210 40% 98%;
-  --card: 222.2 84% 4.9%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222.2 84% 4.9%;
-  --popover-foreground: 210 40% 98%;
-  --primary: 210 40% 98%;
-  --primary-foreground: 222.2 47.4% 11.2%;
-  --secondary: 217.2 32.6% 17.5%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217.2 32.6% 17.5%;
-  --muted-foreground: 215 20.2% 65.1%;
-  --accent: 217.2 32.6% 17.5%;
-  --accent-foreground: 210 40% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 210 40% 98%;
-  --border: 217.2 32.6% 17.5%;
-  --input: 217.2 32.6% 17.5%;
-  --ring: 212.7 26.8% 83.9%;
-}
-* {
-  border-color: hsl(var(--border));
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+  * {
+    border-color: hsl(var(--border));
+  }
 }
 /*# sourceMappingURL=index.css.map */

package/dist/client/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/client/styles.css"],"sourcesContent":[":root {\n    --background: 0 0% 100%;\n    --foreground: 222.2 84% 4.9%;\n\n    --card: 0 0% 100%;\n    --card-foreground: 222.2 84% 4.9%;\n\n    --popover: 0 0% 100%;\n    --popover-foreground: 222.2 84% 4.9%;\n\n    --primary: 222.2 47.4% 11.2%;\n    --primary-foreground: 210 40% 98%;\n\n    --secondary: 210 40% 96.1%;\n    --secondary-foreground: 222.2 47.4% 11.2%;\n\n    --muted: 210 40% 96.1%;\n    --muted-foreground: 215.4 16.3% 46.9%;\n\n    --accent: 210 40% 96.1%;\n    --accent-foreground: 222.2 47.4% 11.2%;\n\n    --destructive: 0 84.2% 60.2%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 214.3 31.8% 91.4%;\n    --input: 214.3 31.8% 91.4%;\n    --ring: 222.2 84% 4.9%;\n\n    --radius: 0.5rem;\n}\n\n.dark {\n    --background: 222.2 84% 4.9%;\n    --foreground: 210 40% 98%;\n\n    --card: 222.2 84% 4.9%;\n    --card-foreground: 210 40% 98%;\n\n    --popover: 222.2 84% 4.9%;\n    --popover-foreground: 210 40% 98%;\n\n    --primary: 210 40% 98%;\n    --primary-foreground: 222.2 47.4% 11.2%;\n\n    --secondary: 217.2 32.6% 17.5%;\n    --secondary-foreground: 210 40% 98%;\n\n    --muted: 217.2 32.6% 17.5%;\n    --muted-foreground: 215 20.2% 65.1%;\n\n    --accent: 217.2 32.6% 17.5%;\n    --accent-foreground: 210 40% 98%;\n\n    --destructive: 0 62.8% 30.6%;\n    --destructive-foreground: 210 40% 98%;\n\n    --border: 217.2 32.6% 17.5%;\n    --input: 217.2 32.6% 17.5%;\n    --ring: 212.7 26.8% 83.9%;\n}\n\n* {\n    border-color: hsl(var(--border));\n}"],"mappings":";AAAA;AACI,gBAAc,EAAE,GAAG;AACnB,gBAAc,MAAM,IAAI;AAExB,UAAQ,EAAE,GAAG;AACb,qBAAmB,MAAM,IAAI;AAE7B,aAAW,EAAE,GAAG;AAChB,wBAAsB,MAAM,IAAI;AAEhC,aAAW,MAAM,MAAM;AACvB,wBAAsB,IAAI,IAAI;AAE9B,eAAa,IAAI,IAAI;AACrB,0BAAwB,MAAM,MAAM;AAEpC,WAAS,IAAI,IAAI;AACjB,sBAAoB,MAAM,MAAM;AAEhC,YAAU,IAAI,IAAI;AAClB,uBAAqB,MAAM,MAAM;AAEjC,iBAAe,EAAE,MAAM;AACvB,4BAA0B,IAAI,IAAI;AAElC,YAAU,MAAM,MAAM;AACtB,WAAS,MAAM,MAAM;AACrB,UAAQ,MAAM,IAAI;AAElB,YAAU;AACd;AAEA,CAAC;AACG,gBAAc,MAAM,IAAI;AACxB,gBAAc,IAAI,IAAI;AAEtB,UAAQ,MAAM,IAAI;AAClB,qBAAmB,IAAI,IAAI;AAE3B,aAAW,MAAM,IAAI;AACrB,wBAAsB,IAAI,IAAI;AAE9B,aAAW,IAAI,IAAI;AACnB,wBAAsB,MAAM,MAAM;AAElC,eAAa,MAAM,MAAM;AACzB,0BAAwB,IAAI,IAAI;AAEhC,WAAS,MAAM,MAAM;AACrB,sBAAoB,IAAI,MAAM;AAE9B,YAAU,MAAM,MAAM;AACtB,uBAAqB,IAAI,IAAI;AAE7B,iBAAe,EAAE,MAAM;AACvB,4BAA0B,IAAI,IAAI;AAElC,YAAU,MAAM,MAAM;AACtB,WAAS,MAAM,MAAM;AACrB,UAAQ,MAAM,MAAM;AACxB;AAEA;AACI,gBAAc,IAAI,IAAI;AAC1B;","names":[]}
+{"version":3,"sources":["../../src/client/styles.css"],"sourcesContent":["@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n    :root {\n        --background: 0 0% 100%;\n        --foreground: 222.2 84% 4.9%;\n\n        --card: 0 0% 100%;\n        --card-foreground: 222.2 84% 4.9%;\n\n        --popover: 0 0% 100%;\n        --popover-foreground: 222.2 84% 4.9%;\n\n        --primary: 222.2 47.4% 11.2%;\n        --primary-foreground: 210 40% 98%;\n\n        --secondary: 210 40% 96.1%;\n        --secondary-foreground: 222.2 47.4% 11.2%;\n\n        --muted: 210 40% 96.1%;\n        --muted-foreground: 215.4 16.3% 46.9%;\n\n        --accent: 210 40% 96.1%;\n        --accent-foreground: 222.2 47.4% 11.2%;\n\n        --destructive: 0 84.2% 60.2%;\n        --destructive-foreground: 210 40% 98%;\n\n        --border: 214.3 31.8% 91.4%;\n        --input: 214.3 31.8% 91.4%;\n        --ring: 222.2 84% 4.9%;\n\n        --radius: 0.5rem;\n    }\n\n    .dark {\n        --background: 222.2 84% 4.9%;\n        --foreground: 210 40% 98%;\n\n        --card: 222.2 84% 4.9%;\n        --card-foreground: 210 40% 98%;\n\n        --popover: 222.2 84% 4.9%;\n        --popover-foreground: 210 40% 98%;\n\n        --primary: 210 40% 98%;\n        --primary-foreground: 222.2 47.4% 11.2%;\n\n        --secondary: 217.2 32.6% 17.5%;\n        --secondary-foreground: 210 40% 98%;\n\n        --muted: 217.2 32.6% 17.5%;\n        --muted-foreground: 215 20.2% 65.1%;\n\n        --accent: 217.2 32.6% 17.5%;\n        --accent-foreground: 210 40% 98%;\n\n        --destructive: 0 62.8% 30.6%;\n        --destructive-foreground: 210 40% 98%;\n\n        --border: 217.2 32.6% 17.5%;\n        --input: 217.2 32.6% 17.5%;\n        --ring: 212.7 26.8% 83.9%;\n    }\n\n    * {\n        border-color: hsl(var(--border));\n    }\n}"],"mappings":";AAAA,UAAU;AACV,UAAU;AACV,UAAU;AAEV;AACI;AACI,kBAAc,EAAE,GAAG;AACnB,kBAAc,MAAM,IAAI;AAExB,YAAQ,EAAE,GAAG;AACb,uBAAmB,MAAM,IAAI;AAE7B,eAAW,EAAE,GAAG;AAChB,0BAAsB,MAAM,IAAI;AAEhC,eAAW,MAAM,MAAM;AACvB,0BAAsB,IAAI,IAAI;AAE9B,iBAAa,IAAI,IAAI;AACrB,4BAAwB,MAAM,MAAM;AAEpC,aAAS,IAAI,IAAI;AACjB,wBAAoB,MAAM,MAAM;AAEhC,cAAU,IAAI,IAAI;AAClB,yBAAqB,MAAM,MAAM;AAEjC,mBAAe,EAAE,MAAM;AACvB,8BAA0B,IAAI,IAAI;AAElC,cAAU,MAAM,MAAM;AACtB,aAAS,MAAM,MAAM;AACrB,YAAQ,MAAM,IAAI;AAElB,cAAU;AACd;AAEA,GAAC;AACG,kBAAc,MAAM,IAAI;AACxB,kBAAc,IAAI,IAAI;AAEtB,YAAQ,MAAM,IAAI;AAClB,uBAAmB,IAAI,IAAI;AAE3B,eAAW,MAAM,IAAI;AACrB,0BAAsB,IAAI,IAAI;AAE9B,eAAW,IAAI,IAAI;AACnB,0BAAsB,MAAM,MAAM;AAElC,iBAAa,MAAM,MAAM;AACzB,4BAAwB,IAAI,IAAI;AAEhC,aAAS,MAAM,MAAM;AACrB,wBAAoB,IAAI,MAAM;AAE9B,cAAU,MAAM,MAAM;AACtB,yBAAqB,IAAI,IAAI;AAE7B,mBAAe,EAAE,MAAM;AACvB,8BAA0B,IAAI,IAAI;AAElC,cAAU,MAAM,MAAM;AACtB,aAAS,MAAM,MAAM;AACrB,YAAQ,MAAM,MAAM;AACxB;AAEA;AACI,kBAAc,IAAI,IAAI;AAC1B;AACJ;","names":[]}

package/dist/client/index.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { l as TDrivePathItem, d as TDatabaseDrive, m as TDriveQuota, i as TDriveAPIResponse, n as TDriveUploadState, e as TDriveFile } from '../index-CIbbTroj.js';
-export { o as driveFileSchemaZod } from '../index-CIbbTroj.js';
+import { n as TDrivePathItem, d as TDatabaseDrive, o as TDriveQuota, e as TDriveFile, f as TImageQuality, g as TImageFormat, k as TDriveAPIResponse, p as TDriveUploadState } from '../index-C4pw1JjP.js';
+export { q as driveFileSchemaZod } from '../index-C4pw1JjP.js';
 import 'zod';
 
 type TDriveContext = {
@@ -47,6 +47,14 @@ type TDriveContext = {
     };
     selectedFileIds: string[];
     setSelectedFileIds: React.Dispatch<React.SetStateAction<string[]>>;
+    createUrl: (driveFile: TDriveFile, options?: {
+        quality?: TImageQuality;
+        format?: TImageFormat;
+    }) => string;
+    createSrcSet: (driveFile: TDriveFile, format?: TImageFormat) => {
+        srcSet: string;
+        sizes: string;
+    };
     navigateToFolder: (item: {
         id: string | null;
         name: string;
@@ -122,4 +130,4 @@ declare const DriveHeader: () => React.JSX.Element;
 
 declare const DriveSidebar: () => React.JSX.Element;
 
-export { DriveExplorer, DriveFileChooser, DriveHeader, DrivePathBar, DriveProvider, DriveSidebar, DriveStorageIndicator, DriveUpload, type TDriveContext, TDriveFile, useDrive, useUpload };
+export { DriveExplorer, DriveFileChooser, DriveHeader, DrivePathBar, DriveProvider, DriveSidebar, DriveStorageIndicator, DriveUpload, type TDriveContext, TDriveFile, TImageFormat, TImageQuality, useDrive, useUpload };

package/dist/client/index.js

@@ -1,6 +1,75 @@
 // src/client/context.tsx
 import React, { createContext, useContext, useState, useCallback, useMemo } 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 } 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__ */ jsx(Folder, { className: cn("text-blue-500 fill-blue-500/20", className) });
+  if (mime.startsWith("image/")) return /* @__PURE__ */ jsx(Image, { className: cn("text-purple-500", className) });
+  if (mime.startsWith("video/")) return /* @__PURE__ */ jsx(Video, { className: cn("text-red-500", className) });
+  if (mime.startsWith("audio/")) return /* @__PURE__ */ jsx(Music, { className: cn("text-yellow-500", className) });
+  if (mime === "application/pdf") return /* @__PURE__ */ jsx(FileText, { className: cn("text-orange-500", className) });
+  if (mime.includes("text") || mime.includes("document")) return /* @__PURE__ */ jsx(FileText, { className: cn("text-slate-500", className) });
+  if (mime.includes("zip") || mime.includes("compressed")) return /* @__PURE__ */ jsx(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__ */ jsx(FileCode, { className: cn("text-green-500", className) });
+  return /* @__PURE__ */ jsx(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;
+  });
+};
+var driveCreateUrl = (driveFile, apiEndpoint, options) => {
+  const params = new URLSearchParams({
+    action: "serve",
+    id: driveFile.id
+  });
+  if (options?.quality) params.set("q", options.quality);
+  if (options?.format) params.set("format", options.format);
+  return `${apiEndpoint}?${params.toString()}`;
+};
+var driveCreateSrcSet = (driveFile, apiEndpoint, format = "webp") => {
+  const qualities = ["ultralow", "low", "medium", "high"];
+  const qualityWidthMap = {
+    ultralow: 200,
+    low: 400,
+    medium: 800,
+    high: 1200,
+    normal: 1600
+  };
+  const srcSet = qualities.map((quality) => {
+    const url = driveCreateUrl(driveFile, apiEndpoint, { quality, format });
+    return `${url} ${qualityWidthMap[quality]}w`;
+  }).join(", ");
+  const sizes = "(max-width: 320px) 200px, (max-width: 480px) 400px, (max-width: 768px) 800px, 1200px";
+  return { srcSet, sizes };
+};
+
+// src/client/context.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
 var DriveContext = createContext(null);
 var DriveProvider = (props) => {
   const { children, apiEndpoint, initialActiveAccountId = null, initialSelectionMode = { type: "SINGLE" }, defaultSelectedFileIds = [] } = props;
@@ -216,7 +285,13 @@ var DriveProvider = (props) => {
   React.useEffect(() => {
     refreshAccounts();
   }, [refreshAccounts]);
-  return /* @__PURE__ */ jsx(DriveContext.Provider, { value: {
+  const createUrl = useCallback((driveFile, options) => {
+    return driveCreateUrl(driveFile, apiEndpoint, options);
+  }, [apiEndpoint]);
+  const createSrcSet = useCallback((driveFile, format) => {
+    return driveCreateSrcSet(driveFile, apiEndpoint, format);
+  }, [apiEndpoint]);
+  return /* @__PURE__ */ jsx2(DriveContext.Provider, { value: {
     apiEndpoint,
     currentFolderId,
     path,
@@ -247,6 +322,8 @@ var DriveProvider = (props) => {
     selectionMode,
     selectedFileIds,
     setSelectedFileIds,
+    createUrl,
+    createSrcSet,
     navigateToFolder,
     navigateUp,
     refreshItems,
@@ -415,48 +492,6 @@ var useUpload = (apiEndpoint, activeAccountId, onUploadComplete) => {
 // src/client/file-chooser.tsx
 import { useState as useState6, 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, RotateCcw, ChevronRight as ChevronRight3 } from "lucide-react";