@thetechfossil/upfiles 1.0.9 → 1.0.11

package/dist/index.mjs

@@ -10,6 +10,7 @@ var UpfilesClient = class {
     this.apiKeyHeader = opts.apiKeyHeader ?? "authorization";
     this.thumbnailsPath = opts.thumbnailsPath ?? "/api/plugin/thumbnails";
     this.completionPath = opts.completionPath ?? "/api/plugin/upload/complete";
+    this.foldersPath = opts.foldersPath ?? "/api/plugin/folders";
     this.callCompletionEndpoint = opts.callCompletionEndpoint ?? false;
   }
   async getPresignedUrl(params) {
@@ -132,6 +133,7 @@ var UpfilesClient = class {
       }
       throw new Error(msg);
     }
+    return res.json();
   }
   async getThumbnails(fileKey) {
     const target = this.baseUrl ? `${this.baseUrl}${this.thumbnailsPath}` : this.thumbnailsPath;
@@ -192,6 +194,65 @@ var UpfilesClient = class {
     const data = await res.json();
     return { masterWebp: data.masterWebp, thumbnails: data.thumbnails ?? [] };
   }
+  async getFolders(parentId) {
+    const target = this.baseUrl ? `${this.baseUrl}${this.foldersPath}` : this.foldersPath;
+    const url = parentId ? `${target}?parentId=${encodeURIComponent(parentId)}` : target;
+    const headers = { ...this.headers || {} };
+    if (this.apiKey) {
+      if (this.apiKeyHeader === "authorization") {
+        headers["authorization"] = this.apiKey.startsWith("upk_") ? `Bearer ${this.apiKey}` : this.apiKey;
+      } else if (this.apiKeyHeader === "x-api-key") {
+        headers["x-api-key"] = this.apiKey;
+      } else {
+        headers["x-up-api-key"] = this.apiKey;
+      }
+    }
+    const res = await fetch(url, { method: "GET", headers, credentials: this.withCredentials ? "include" : "same-origin" });
+    if (!res.ok) {
+      let msg = "Failed to fetch folders";
+      try {
+        const data2 = await res.json();
+        msg = data2.error || msg;
+      } catch {
+      }
+      throw new Error(msg);
+    }
+    const data = await res.json();
+    return data?.folders ?? [];
+  }
+  async createFolder(name, parentId) {
+    const target = this.baseUrl ? `${this.baseUrl}${this.foldersPath}` : this.foldersPath;
+    const headers = {
+      "content-type": "application/json",
+      ...this.headers || {}
+    };
+    if (this.apiKey) {
+      if (this.apiKeyHeader === "authorization") {
+        headers["authorization"] = this.apiKey.startsWith("upk_") ? `Bearer ${this.apiKey}` : this.apiKey;
+      } else if (this.apiKeyHeader === "x-api-key") {
+        headers["x-api-key"] = this.apiKey;
+      } else {
+        headers["x-up-api-key"] = this.apiKey;
+      }
+    }
+    const res = await fetch(target, {
+      method: "POST",
+      headers,
+      credentials: this.withCredentials ? "include" : "same-origin",
+      body: JSON.stringify({ name, parentId })
+    });
+    if (!res.ok) {
+      let msg = "Failed to create folder";
+      try {
+        const data2 = await res.json();
+        msg = data2.error || msg;
+      } catch {
+      }
+      throw new Error(msg);
+    }
+    const data = await res.json();
+    return data.folder;
+  }
   async getProjectFiles(params) {
     const basePath = this.thumbnailsPath.replace(/\/thumbnails$/, "");
     const filesPath = `${basePath}/files`;
@@ -218,7 +279,23 @@ var UpfilesClient = class {
       throw new Error(msg);
     }
     const data = await res.json();
-    return data?.files ?? [];
+    return {
+      files: data?.files ?? [],
+      updatedAt: res.headers.get("X-Files-Updated-At")
+    };
+  }
+  getEventsUrl(projectId) {
+    const basePath = this.thumbnailsPath.replace(/\/thumbnails$/, "");
+    const eventsPath = `${basePath}/events`;
+    const target = this.baseUrl ? `${this.baseUrl}/api/events` : "/api/events";
+    const url = new URL(target, window.location.href);
+    if (this.apiKey) {
+      url.searchParams.set("apiKey", this.apiKey);
+    }
+    if (projectId) {
+      url.searchParams.set("projectId", projectId);
+    }
+    return url.toString();
   }
 };
 
@@ -243,7 +320,7 @@ var Uploader = ({
   projectId,
   folderPath,
   fetchThumbnails,
-  autoRecordToDb = false,
+  autoRecordToDb = true,
   recordUrl = "/api/files",
   autoUpload = false
 }) => {
@@ -317,9 +394,10 @@ var Uploader = ({
         xhr.setRequestHeader("Content-Type", item.type || "application/octet-stream");
         xhr.send(item.file);
       });
+      let completionResult = null;
       if (autoRecordToDb && projectId) {
         try {
-          await client.completeUpload({
+          completionResult = await client.completeUpload({
             fileKey: presign.fileKey,
             originalName: item.name,
             size: item.size,
@@ -333,15 +411,21 @@ var Uploader = ({
       }
       let thumbs;
       let masterWebp;
-      try {
-        if (fetchThumbnails) {
-          const result2 = await client.generateThumbnails(presign.fileKey);
+      if (completionResult?.thumbnails?.length > 0) {
+        thumbs = completionResult.thumbnails;
+        masterWebp = completionResult.masterWebp;
+      } else if (fetchThumbnails) {
+        const fileKeyToUse = completionResult?.file?.key || presign.fileKey;
+        try {
+          const result2 = await client.generateThumbnails(fileKeyToUse);
           thumbs = result2.thumbnails;
           masterWebp = result2.masterWebp;
+        } catch (e) {
+          console.warn("Failed to generate thumbnails:", e);
         }
-      } catch (e) {
-        console.warn("Failed to generate thumbnails:", e);
       }
+      const finalFileKey = completionResult?.file?.key || presign.fileKey;
+      const finalPublicUrl = completionResult?.file?.url || presign.publicUrl;
       const result = {
         ...item,
         status: "success",
@@ -404,10 +488,10 @@ var Uploader = ({
         onChange: onInputChange
       }
     ),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        className: dropzoneClassName,
+        className: `${dropzoneClassName} border-2 border-dashed rounded-xl transition-all duration-200 cursor-pointer p-10 flex flex-col items-center justify-center gap-4 ${isDragOver ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 bg-gray-50/50 dark:bg-gray-900/50"}`,
         onDragOver: (e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -422,51 +506,121 @@ var Uploader = ({
         onClick: () => inputRef.current?.click(),
         role: "button",
         "aria-label": "Upload files",
-        children: children ?? /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: 16 }, children: [
-          /* @__PURE__ */ jsx("div", { style: { fontWeight: 600 }, children: "Drop files here or click to browse" }),
-          /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#666" }, children: [
-            multiple ? `Up to ${maxFiles} files` : "Single file",
-            " \u2022 Max ",
-            (maxFileSize / (1024 * 1024)).toFixed(0),
-            "MB"
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+          ] }) }),
+          children ?? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Drop files here or click to browse" }),
+            /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: [
+              multiple ? `Up to ${maxFiles} files` : "Single file",
+              " \u2022 Max ",
+              (maxFileSize / (1024 * 1024)).toFixed(0),
+              "MB"
+            ] })
           ] })
-        ] })
+        ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ jsxs("div", { style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginBottom: 8 }, children: [
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: buttonClassName,
-            disabled: isUploading || files.every((f2) => f2.status !== "pending"),
-            onClick: uploadAll,
-            children: isUploading ? "Uploading..." : "Upload"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            className: buttonClassName,
-            disabled: isUploading,
-            onClick: () => setFiles([]),
-            children: "Clear"
-          }
-        )
+    files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-8 space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 dark:border-gray-800 pb-4", children: [
+        /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 dark:text-gray-100", children: "Selected Files" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-sm",
+              disabled: isUploading || files.every((f2) => f2.status !== "pending"),
+              onClick: uploadAll,
+              children: isUploading ? /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+                ] }),
+                "Uploading..."
+              ] }) : "Upload All"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-semibold rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 transition-colors",
+              disabled: isUploading,
+              onClick: () => setFiles([]),
+              children: "Clear"
+            }
+          )
+        ] })
       ] }),
-      /* @__PURE__ */ jsx("ul", { style: { display: "grid", gap: 8, listStyle: "none", padding: 0 }, children: files.map((f2) => /* @__PURE__ */ jsx("li", { style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 8 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.name }),
-          /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#666" }, children: [
-            (f2.size / (1024 * 1024)).toFixed(2),
-            " MB"
+      /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: files.map((f2) => /* @__PURE__ */ jsx("div", { className: "group relative bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-xl p-4 transition-all hover:shadow-md", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-50 dark:bg-gray-800 flex items-center justify-center flex-shrink-0", children: f2.type.startsWith("image/") ? /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-indigo-500", children: [
+          /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+          /* @__PURE__ */ jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+          /* @__PURE__ */ jsx("polyline", { points: "21 15 16 10 5 21" })
+        ] }) : /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-blue-500", children: [
+          /* @__PURE__ */ jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+          /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate pr-4", children: f2.name }),
+            /* @__PURE__ */ jsxs("div", { className: "text-xs text-gray-500 font-medium whitespace-nowrap", children: [
+              (f2.size / (1024 * 1024)).toFixed(2),
+              " MB"
+            ] })
           ] }),
-          f2.error && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#b91c1c" }, children: f2.error }),
-          f2.publicUrl && f2.status === "success" && /* @__PURE__ */ jsx("a", { href: f2.publicUrl, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" })
+          f2.status === "error" ? /* @__PURE__ */ jsx("div", { className: "text-xs text-red-500 font-medium mt-1", children: f2.error }) : /* @__PURE__ */ jsx("div", { className: "h-1.5 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden mt-2", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `h-full transition-all duration-300 ${f2.status === "success" ? "bg-green-500" : "bg-blue-500"}`,
+              style: { width: `${f2.progress}%` }
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { style: { minWidth: 120, textAlign: "right" }, children: [
-          /* @__PURE__ */ jsx("div", { style: { height: 6, background: "#e5e7eb", borderRadius: 999, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { width: `${f2.progress}%`, height: "100%", background: f2.status === "error" ? "#ef4444" : "#2563eb" } }) }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#666", marginTop: 4 }, children: f2.status })
+        /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 ml-4", children: [
+          f2.status === "success" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+            f2.publicUrl && /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: f2.publicUrl,
+                target: "_blank",
+                rel: "noreferrer",
+                className: "p-1.5 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-md transition-colors",
+                title: "View online",
+                children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "15 3 21 3 21 9" }),
+                  /* @__PURE__ */ jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                ] })
+              }
+            )
+          ] }),
+          f2.status === "error" && /* @__PURE__ */ jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ] }) }),
+          f2.status === "uploading" && /* @__PURE__ */ jsxs("span", { className: "text-xs font-semibold text-blue-600 dark:text-blue-400", children: [
+            f2.progress,
+            "%"
+          ] }),
+          f2.status === "pending" && /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setFiles((prev) => prev.filter((file) => file.id !== f2.id));
+              },
+              className: "p-1.5 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-md transition-colors",
+              title: "Remove",
+              children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] })
+            }
+          )
         ] })
       ] }) }, f2.id)) })
     ] })
@@ -474,7 +628,7 @@ var Uploader = ({
 };
 
 // src/ProjectFilesWidget.tsx
-import { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
+import React2, { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ProjectFilesWidget = ({
   clientOptions,
@@ -488,7 +642,8 @@ var ProjectFilesWidget = ({
   onSaved,
   onDelete,
   deleteUrl = "/api/files",
-  showDelete = false
+  showDelete = false,
+  refreshInterval = 5e3
 }) => {
   const client = useMemo2(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
   const [files, setFiles] = useState2([]);
@@ -497,25 +652,37 @@ var ProjectFilesWidget = ({
   const [query, setQuery] = useState2("");
   const [savingKey, setSavingKey] = useState2(null);
   const [deletingKey, setDeletingKey] = useState2(null);
-  useEffect(() => {
-    let cancelled = false;
-    const run = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const data = await client.getProjectFiles({ folderPath });
-        if (!cancelled) setFiles(data);
-      } catch (e) {
-        if (!cancelled) setError(e?.message || "Failed to load files");
-      } finally {
-        if (!cancelled) setLoading(false);
+  const lastUpdatedRef = React2.useRef(null);
+  const isFetchingRef = React2.useRef(false);
+  const fetchFiles = React2.useCallback(async (isPolling = false) => {
+    if (isFetchingRef.current) return;
+    isFetchingRef.current = true;
+    if (!isPolling) setLoading(true);
+    setError(null);
+    try {
+      const { files: newFiles, updatedAt } = await client.getProjectFiles({ folderPath });
+      if (isPolling && updatedAt && updatedAt === lastUpdatedRef.current) {
+        return;
       }
-    };
-    run();
-    return () => {
-      cancelled = true;
-    };
+      setFiles(newFiles);
+      lastUpdatedRef.current = updatedAt;
+    } catch (e) {
+      if (!isPolling) setError(e?.message || "Failed to load files");
+    } finally {
+      if (!isPolling) setLoading(false);
+      isFetchingRef.current = false;
+    }
   }, [client, folderPath]);
+  useEffect(() => {
+    fetchFiles();
+  }, [fetchFiles]);
+  useEffect(() => {
+    if (!refreshInterval || refreshInterval <= 0) return;
+    const timer = setInterval(() => {
+      fetchFiles(true);
+    }, refreshInterval);
+    return () => clearInterval(timer);
+  }, [fetchFiles, refreshInterval]);
   const visible = files.filter(
     (f2) => !query ? true : (f2.originalName || "").toLowerCase().includes(query.toLowerCase())
   );
@@ -572,18 +739,7 @@ var ProjectFilesWidget = ({
         {
           onClick: () => {
             setQuery("");
-            (async () => {
-              setLoading(true);
-              setError(null);
-              try {
-                const data = await client.getProjectFiles({ folderPath });
-                setFiles(data);
-              } catch (e) {
-                setError(e?.message || "Failed to load files");
-              } finally {
-                setLoading(false);
-              }
-            })();
+            fetchFiles();
           },
           style: { padding: "8px 12px", border: "1px solid #e5e7eb", borderRadius: 6, background: "#fff" },
           children: "Refresh"
@@ -976,7 +1132,7 @@ async function fetchFileThumbnails(clientOptions, fileKey) {
   return client.getThumbnails(fileKey);
 }
 async function fetchProjectImagesWithThumbs(clientOptions, opts) {
-  const files = await fetchProjectFiles(clientOptions, opts?.folderPath);
+  const { files, updatedAt } = await fetchProjectFiles(clientOptions, opts?.folderPath);
   const limit = Math.max(1, Math.min(opts?.limitConcurrent ?? 6, 12));
   const queue = [...files];
   const results = [];
@@ -998,13 +1154,62 @@ async function fetchProjectImagesWithThumbs(clientOptions, opts) {
   await Promise.all(Array.from({ length: workers }, () => worker()));
   const keyToIndex = new Map(files.map((f2, i) => [f2.key, i]));
   results.sort((a, b) => (keyToIndex.get(a.key) ?? 0) - (keyToIndex.get(b.key) ?? 0));
-  return results;
+  return { items: results, updatedAt };
 }
 
 // src/ImageManager.tsx
 import * as React4 from "react";
 import * as Dialog2 from "@radix-ui/react-dialog";
-import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var IconGrid = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1" }),
+  /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
+  /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
+  /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
+] });
+var IconUploadCloud = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 12v9" }),
+  /* @__PURE__ */ jsx4("path", { d: "m16 16-4-4-4 4" })
+] });
+var IconFolder = ({ className }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "0", className, children: /* @__PURE__ */ jsx4("path", { d: "M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" }) });
+var IconFolderPlus = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("path", { d: "M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2Z" }),
+  /* @__PURE__ */ jsx4("line", { x1: "12", x2: "12", y1: "10", y2: "16" }),
+  /* @__PURE__ */ jsx4("line", { x1: "9", x2: "15", y1: "13", y2: "13" })
+] });
+var IconSearch = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx4("path", { d: "m21 21-4.3-4.3" })
+] });
+var IconRefresh = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ jsx4("path", { d: "M21 3v5h-5" }),
+  /* @__PURE__ */ jsx4("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+  /* @__PURE__ */ jsx4("path", { d: "M8 16H3v5" })
+] });
+var IconChevronRight = ({ className }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx4("path", { d: "m9 18 6-6-6-6" }) });
+var IconTrash = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsx4("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ jsx4("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+  /* @__PURE__ */ jsx4("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+  /* @__PURE__ */ jsx4("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+] });
+var IconX = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
+] });
+var IconHome = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+  /* @__PURE__ */ jsx4("polyline", { points: "9 22 9 12 15 12 15 22" })
+] });
+var IconImage = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsx4("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ jsx4("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+] });
+var IconLoader = ({ className }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx4("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
 function ImageManager(props) {
   const {
     open,
@@ -1024,209 +1229,485 @@ function ImageManager(props) {
     maxFileSize = 100 * 1024 * 1024,
     maxFiles = 10,
     mode = "full",
-    showDelete = true
+    showDelete = true,
+    refreshInterval = 5e3
   } = props;
-  const [tab, setTab] = React4.useState(mode === "upload" ? "upload" : "browse");
+  const [activeView, setActiveView] = React4.useState(mode === "upload" ? "upload" : "browse");
   const [loading, setLoading] = React4.useState(false);
   const [error, setError] = React4.useState(null);
-  const [items, setItems] = React4.useState([]);
+  const [currentFolderId, setCurrentFolderId] = React4.useState(void 0);
+  const [breadcrumbs, setBreadcrumbs] = React4.useState([{ id: void 0, name: "Home" }]);
+  const [files, setFiles] = React4.useState([]);
+  const [folders, setFolders] = React4.useState([]);
   const [query, setQuery] = React4.useState("");
   const [deleting, setDeleting] = React4.useState(null);
-  const load = React4.useCallback(async () => {
+  const [showCreateFolder, setShowCreateFolder] = React4.useState(false);
+  const [newFolderName, setNewFolderName] = React4.useState("");
+  const [creatingFolder, setCreatingFolder] = React4.useState(false);
+  const [fileToDelete, setFileToDelete] = React4.useState(null);
+  const [thumbnailSelectorFile, setThumbnailSelectorFile] = React4.useState(null);
+  const lastUpdatedRef = React4.useRef(null);
+  const isFetchingRef = React4.useRef(false);
+  const load = React4.useCallback(async (isPolling = false) => {
+    if (isFetchingRef.current) return;
+    isFetchingRef.current = true;
     try {
-      setLoading(true);
+      if (!isPolling) setLoading(true);
       setError(null);
-      const list = await fetchProjectImagesWithThumbs(clientOptions, { folderPath, limitConcurrent: 6 });
-      setItems(list);
+      const client = new UpfilesClient(clientOptions);
+      const currentPathPrefix = breadcrumbs.length > 1 ? breadcrumbs.slice(1).map((b) => b.name).join("/") + "/" : void 0;
+      const effectiveFolderPath = currentPathPrefix || folderPath;
+      const [filesData, foldersData] = await Promise.all([
+        fetchProjectImagesWithThumbs(clientOptions, { folderPath: effectiveFolderPath, limitConcurrent: 6 }),
+        client.getFolders(currentFolderId)
+      ]);
+      const { items: list, updatedAt } = filesData;
+      if (isPolling && updatedAt && updatedAt === lastUpdatedRef.current) {
+      }
+      setFiles(list);
+      setFolders(foldersData);
+      lastUpdatedRef.current = updatedAt;
     } catch (e) {
-      setError(e?.message || "Failed to load images");
+      if (!isPolling) setError(e?.message || "Failed to load images");
     } finally {
-      setLoading(false);
+      if (!isPolling) setLoading(false);
+      isFetchingRef.current = false;
     }
-  }, [clientOptions, folderPath]);
+  }, [clientOptions, folderPath, currentFolderId, breadcrumbs]);
   React4.useEffect(() => {
     if (!open) {
-      setItems([]);
+      setFiles([]);
+      setFolders([]);
       setQuery("");
       setError(null);
+      lastUpdatedRef.current = null;
       return;
     }
-    if (mode !== "upload" && tab === "browse") {
+    if (mode !== "upload" && activeView === "browse") {
       load();
     }
-  }, [open, tab, load, mode]);
-  const visible = React4.useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return !q ? items : items.filter((i) => (i.originalName || "").toLowerCase().includes(q));
-  }, [items, query]);
-  const handleDelete = React4.useCallback(
-    async (key) => {
-      if (!confirm("Delete this file?")) return;
+  }, [open, activeView, load, mode]);
+  React4.useEffect(() => {
+    if (!open) return;
+    const client = new UpfilesClient(clientOptions);
+    const url = client.getEventsUrl(projectId);
+    const eventSource = new EventSource(url);
+    eventSource.onmessage = (event) => {
       try {
-        setDeleting(key);
-        if (onDelete) {
-          await onDelete(key);
-        } else {
-          const baseUrl = clientOptions?.baseUrl || "";
-          const url = baseUrl ? `${baseUrl}${deleteUrl}` : deleteUrl;
-          const headers = {
-            "content-type": "application/json",
-            ...clientOptions?.headers || {}
-          };
-          if (clientOptions?.apiKey) {
-            const keyHeader = clientOptions.apiKeyHeader || "authorization";
-            if (keyHeader === "authorization") {
-              headers["authorization"] = clientOptions.apiKey.startsWith("upk_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
-            } else {
-              headers[keyHeader] = clientOptions.apiKey;
-            }
-          }
-          const res = await fetch(url, {
-            method: "DELETE",
-            headers,
-            credentials: clientOptions?.withCredentials ? "include" : "same-origin",
-            body: JSON.stringify({ fileKey: key })
+        const payload = JSON.parse(event.data);
+        if (payload.type === "file:uploaded") {
+          const newFile = payload.data.file;
+          setFiles((prev) => {
+            if (prev.find((f2) => f2.key === newFile.key)) return prev;
+            return [newFile, ...prev];
           });
-          if (!res.ok) throw new Error("Delete failed");
+        } else if (payload.type === "file:deleted") {
+          const deletedKey = payload.data.fileKey || payload.data.file?.key;
+          setFiles((prev) => prev.filter((f2) => f2.key !== deletedKey));
         }
-        setItems((prev) => prev.filter((f2) => f2.key !== key));
       } catch (e) {
-        alert(e?.message || "Failed to delete");
-      } finally {
-        setDeleting(null);
+        console.error("SSE Error parsing message", e);
       }
-    },
-    [clientOptions, deleteUrl, onDelete]
-  );
-  return /* @__PURE__ */ jsx4(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs4(Dialog2.Portal, { children: [
-    /* @__PURE__ */ jsx4(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 dark:bg-black/60" }),
-    /* @__PURE__ */ jsx4(
-      Dialog2.Content,
-      {
-        className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-4xl rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 shadow-lg max-h-[90vh] overflow-auto ${className ?? ""}`,
-        children: /* @__PURE__ */ jsxs4("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ jsx4(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title ?? "Image Manager" }),
-          /* @__PURE__ */ jsx4(Dialog2.Description, { className: "text-sm text-gray-600 dark:text-gray-400", children: description ?? "Upload new images or select from existing ones." }),
-          mode === "full" && /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 border-b border-gray-200 dark:border-gray-700", children: [
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                type: "button",
-                onClick: () => setTab("browse"),
-                className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${tab === "browse" ? "border-blue-600 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`,
-                children: "Browse"
-              }
-            ),
-            /* @__PURE__ */ jsx4(
-              "button",
-              {
-                type: "button",
-                onClick: () => setTab("upload"),
-                className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${tab === "upload" ? "border-blue-600 text-blue-600 dark:text-blue-400" : "border-transparent text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200"}`,
-                children: "Upload"
-              }
-            )
-          ] }),
-          (mode === "browse" || mode === "full" && tab === "browse") && /* @__PURE__ */ jsxs4(Fragment, { children: [
-            /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 items-center", children: [
-              /* @__PURE__ */ jsx4(
-                "input",
-                {
-                  className: "w-full rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white px-3 py-2 text-sm placeholder:text-gray-500 dark:placeholder:text-gray-400",
-                  placeholder: "Search by filename...",
-                  value: query,
-                  onChange: (e) => setQuery(e.target.value)
-                }
-              ),
-              /* @__PURE__ */ jsx4("button", { type: "button", className: "px-3 py-2 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600 disabled:opacity-50", onClick: load, disabled: loading, children: loading ? "Loading\u2026" : "Refresh" })
+    };
+    return () => eventSource.close();
+  }, [open, clientOptions, projectId]);
+  const visibleFiles = React4.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return !q ? files : files.filter((i) => (i.originalName || "").toLowerCase().includes(q));
+  }, [files, query]);
+  const visibleFolders = React4.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return !q ? folders : folders.filter((f2) => (f2.name || "").toLowerCase().includes(q));
+  }, [folders, query]);
+  const handleDelete = async () => {
+    if (!fileToDelete) return;
+    const key = fileToDelete.key;
+    try {
+      setDeleting(key);
+      if (onDelete) {
+        await onDelete(key);
+      } else {
+        const client = new UpfilesClient(clientOptions);
+        const baseUrl = clientOptions?.baseUrl || "";
+        const url = baseUrl ? `${baseUrl}${deleteUrl}` : deleteUrl;
+        const headers = {
+          "content-type": "application/json",
+          ...clientOptions?.headers || {}
+        };
+        if (clientOptions?.apiKey) {
+          const keyHeader = clientOptions.apiKeyHeader || "authorization";
+          if (keyHeader === "authorization") {
+            headers["authorization"] = clientOptions.apiKey.startsWith("upk_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
+          } else {
+            headers[keyHeader] = clientOptions.apiKey;
+          }
+        }
+        const res = await fetch(url, {
+          method: "DELETE",
+          headers,
+          credentials: clientOptions?.withCredentials ? "include" : "same-origin",
+          body: JSON.stringify({ fileKey: key })
+        });
+        if (!res.ok) throw new Error("Delete failed");
+      }
+      setFiles((prev) => prev.filter((f2) => f2.key !== key));
+      setFileToDelete(null);
+    } catch (e) {
+      alert(e?.message || "Failed to delete");
+    } finally {
+      setDeleting(null);
+    }
+  };
+  const handleCreateFolder = async () => {
+    if (!newFolderName.trim()) return;
+    setCreatingFolder(true);
+    try {
+      const client = new UpfilesClient(clientOptions);
+      await client.createFolder(newFolderName, currentFolderId);
+      setNewFolderName("");
+      setShowCreateFolder(false);
+      load();
+    } catch (e) {
+      alert(e.message || "Failed to create folder");
+    } finally {
+      setCreatingFolder(false);
+    }
+  };
+  const handleNavigate = (folder) => {
+    setCurrentFolderId(folder.id);
+    setBreadcrumbs((prev) => [...prev, { id: folder.id, name: folder.name }]);
+    setQuery("");
+  };
+  const handleBreadcrumbClick = (index) => {
+    const target = breadcrumbs[index];
+    setBreadcrumbs(breadcrumbs.slice(0, index + 1));
+    setCurrentFolderId(target.id);
+    setQuery("");
+  };
+  const uploadFoldersList = React4.useMemo(() => {
+    const options = [];
+    options.push({ id: "root", name: "Root ( / )", path: void 0 });
+    if (currentFolderId) {
+      const currentPath = breadcrumbs.slice(1).map((b) => b.name).join("/") + "/";
+      options.push({ id: "current", name: `Current ( ${breadcrumbs[breadcrumbs.length - 1].name} )`, path: currentPath });
+    }
+    folders.forEach((f2) => {
+      const parentPath = breadcrumbs.length > 1 ? breadcrumbs.slice(1).map((b) => b.name).join("/") + "/" : "";
+      options.push({ id: f2.id, name: f2.name, path: parentPath + f2.name + "/" });
+    });
+    return options;
+  }, [breadcrumbs, currentFolderId, folders]);
+  const [selectedUploadFolder, setSelectedUploadFolder] = React4.useState("current");
+  const activeBreadcrumbPath = React4.useMemo(() => {
+    return breadcrumbs.length > 1 ? breadcrumbs.slice(1).map((b) => b.name).join("/") + "/" : void 0;
+  }, [breadcrumbs]);
+  return /* @__PURE__ */ jsxs4(Dialog2.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxs4(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx4(Dialog2.Overlay, { className: "fixed inset-0 bg-gray-900/50 backdrop-blur-sm z-50 transition-all duration-300" }),
+      /* @__PURE__ */ jsxs4(
+        Dialog2.Content,
+        {
+          className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[85vh] max-w-6xl rounded-2xl bg-white dark:bg-gray-950 shadow-2xl z-50 overflow-hidden flex flex-row ${className ?? ""}`,
+          children: [
+            /* @__PURE__ */ jsxs4("div", { className: "w-64 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col flex-shrink-0", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "p-6", children: [
+                /* @__PURE__ */ jsxs4("h2", { className: "text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx4(IconImage, { className: "text-blue-600" }),
+                  title ?? "Media Library"
+                ] }),
+                /* @__PURE__ */ jsx4("p", { className: "text-xs text-gray-500 mt-1", children: description ?? "Manage your assets" })
+              ] }),
+              /* @__PURE__ */ jsxs4("nav", { className: "flex-1 px-3 space-y-1", children: [
+                /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    onClick: () => setActiveView("browse"),
+                    className: `w-full flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors ${activeView === "browse" ? "bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"}`,
+                    children: [
+                      /* @__PURE__ */ jsx4(IconGrid, { className: "w-4 h-4" }),
+                      "All Files"
+                    ]
+                  }
+                ),
+                mode === "full" && /* @__PURE__ */ jsxs4(
+                  "button",
+                  {
+                    onClick: () => setActiveView("upload"),
+                    className: `w-full flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors ${activeView === "upload" ? "bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"}`,
+                    children: [
+                      /* @__PURE__ */ jsx4(IconUploadCloud, { className: "w-4 h-4" }),
+                      "Upload New"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx4("div", { className: "p-4 border-t border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxs4("div", { className: "text-xs text-center text-gray-400", children: [
+                files.length,
+                " files \u2022 ",
+                folders.length,
+                " folders"
+              ] }) })
             ] }),
-            error && /* @__PURE__ */ jsx4("div", { className: "rounded border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20 px-3 py-2 text-sm text-red-700 dark:text-red-400", children: error }),
-            /* @__PURE__ */ jsxs4("div", { className: gridClassName ?? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 max-h-[50vh] overflow-auto", children: [
-              !loading && visible.map((f2) => {
-                const thumbUrl = f2.thumbnails?.[0]?.url || f2.url;
-                return /* @__PURE__ */ jsxs4("div", { className: "group relative aspect-square overflow-hidden rounded border border-gray-200 dark:border-gray-700", children: [
-                  /* @__PURE__ */ jsx4("img", { src: thumbUrl, alt: f2.originalName, className: "h-full w-full object-cover" }),
-                  /* @__PURE__ */ jsxs4("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center gap-2", children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col bg-white dark:bg-gray-950 relative", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "h-16 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between px-6 gap-4", children: [
+                /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-4 flex-1", children: activeView === "browse" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  /* @__PURE__ */ jsxs4("div", { className: "flex items-center text-sm text-gray-500 overflow-hidden whitespace-nowrap", children: [
+                    /* @__PURE__ */ jsx4("button", { onClick: () => handleBreadcrumbClick(0), className: "hover:text-blue-600 transition-colors", children: /* @__PURE__ */ jsx4(IconHome, { className: "w-4 h-4" }) }),
+                    breadcrumbs.slice(1).map((b, i) => /* @__PURE__ */ jsxs4(React4.Fragment, { children: [
+                      /* @__PURE__ */ jsx4(IconChevronRight, { className: "w-4 h-4 text-gray-300 mx-1" }),
+                      /* @__PURE__ */ jsx4(
+                        "button",
+                        {
+                          onClick: () => handleBreadcrumbClick(i + 1),
+                          className: `hover:text-blue-600 transition-colors truncate max-w-[100px] ${i === breadcrumbs.length - 2 ? "font-semibold text-gray-900 dark:text-white" : ""}`,
+                          children: b.name
+                        }
+                      )
+                    ] }, b.id || i))
+                  ] }),
+                  /* @__PURE__ */ jsx4("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      onClick: () => load(),
+                      disabled: loading,
+                      className: "p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-md transition-all disabled:opacity-50",
+                      title: "Refresh",
+                      children: /* @__PURE__ */ jsx4(IconRefresh, { className: `w-4 h-4 ${loading ? "animate-spin" : ""}` })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
+                  /* @__PURE__ */ jsxs4("div", { className: "relative flex-1 max-w-sm group", children: [
+                    /* @__PURE__ */ jsx4(IconSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" }),
                     /* @__PURE__ */ jsx4(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: () => {
-                          onSelect({
-                            url: f2.url,
-                            key: f2.key,
-                            originalName: f2.originalName,
-                            size: f2.size,
-                            contentType: f2.contentType,
-                            thumbnails: f2.thumbnails
-                          });
-                          onOpenChange(false);
-                        },
-                        className: "opacity-0 group-hover:opacity-100 px-3 py-1 text-xs bg-blue-600 hover:bg-blue-700 text-white rounded",
-                        children: "Select"
-                      }
-                    ),
-                    showDelete && /* @__PURE__ */ jsx4(
-                      "button",
+                      "input",
                       {
-                        type: "button",
-                        onClick: () => handleDelete(f2.key),
-                        disabled: deleting === f2.key,
-                        className: "opacity-0 group-hover:opacity-100 px-3 py-1 text-xs bg-red-600 hover:bg-red-700 text-white rounded disabled:opacity-50",
-                        children: deleting === f2.key ? "..." : "Delete"
+                        value: query,
+                        onChange: (e) => setQuery(e.target.value),
+                        placeholder: "Search files...",
+                        className: "w-full pl-9 pr-4 py-1.5 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-all"
                       }
                     )
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+                  activeView === "browse" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                    /* @__PURE__ */ jsx4("button", { onClick: () => setShowCreateFolder(true), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10 rounded-lg transition-colors", title: "New Folder", children: /* @__PURE__ */ jsx4(IconFolderPlus, { className: "w-5 h-5" }) }),
+                    /* @__PURE__ */ jsx4("button", { onClick: () => load(), className: `p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10 rounded-lg transition-colors ${loading ? "animate-spin text-blue-600" : ""}`, title: "Refresh", children: /* @__PURE__ */ jsx4(IconLoader, { className: "w-5 h-5" }) })
+                  ] }),
+                  /* @__PURE__ */ jsx4(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx4("button", { className: "ml-2 p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 rounded-lg transition-colors", children: /* @__PURE__ */ jsx4(IconX, { className: "w-5 h-5" }) }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs4("div", { className: "flex-1 overflow-y-auto p-6 bg-gray-50/30 dark:bg-gray-900/30", children: [
+                activeView === "browse" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+                  error && /* @__PURE__ */ jsx4("div", { className: "mb-6 bg-red-50 text-red-600 p-4 rounded-lg text-sm border border-red-100 flex items-center gap-2", children: /* @__PURE__ */ jsx4("span", { children: error }) }),
+                  /* @__PURE__ */ jsxs4("div", { className: gridClassName ?? "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6", children: [
+                    visibleFolders.map((folder) => /* @__PURE__ */ jsxs4(
+                      "div",
+                      {
+                        onClick: () => handleNavigate(folder),
+                        className: "group flex flex-col items-center gap-3 p-4 rounded-xl border border-gray-200/60 bg-white hover:border-blue-200 hover:shadow-lg hover:shadow-blue-500/5 hover:-translate-y-1 transition-all cursor-pointer",
+                        children: [
+                          /* @__PURE__ */ jsx4("div", { className: "w-16 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-500 group-hover:scale-110 transition-transform", children: /* @__PURE__ */ jsx4(IconFolder, { className: "w-8 h-8 drop-shadow-sm" }) }),
+                          /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-gray-700 truncate w-full text-center", children: folder.name })
+                        ]
+                      },
+                      folder.id
+                    )),
+                    visibleFiles.map((f2) => {
+                      const fWithThumbs = f2;
+                      const bestThumb = fWithThumbs.thumbnails?.sort((a, b) => a.size - b.size).find((t) => t.size >= 300) || fWithThumbs.thumbnails?.[fWithThumbs.thumbnails?.length - 1];
+                      const thumbUrl = bestThumb?.url || f2.url;
+                      return /* @__PURE__ */ jsxs4(
+                        "div",
+                        {
+                          className: "group relative aspect-[4/3] bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm hover:shadow-xl hover:shadow-gray-200/50 hover:border-blue-300 transition-all duration-300",
+                          children: [
+                            /* @__PURE__ */ jsx4("img", { src: thumbUrl, alt: "", className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" }),
+                            /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 justify-center transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300", children: [
+                              /* @__PURE__ */ jsx4(
+                                "button",
+                                {
+                                  onClick: () => {
+                                    onSelect({
+                                      url: f2.url,
+                                      key: f2.key,
+                                      originalName: f2.originalName,
+                                      size: f2.size,
+                                      contentType: f2.contentType,
+                                      thumbnails: f2.thumbnails
+                                    });
+                                    onOpenChange(false);
+                                  },
+                                  className: "px-3 py-1.5 bg-blue-600 text-white text-xs font-semibold rounded-md hover:bg-blue-500 shadow-lg",
+                                  children: "Select"
+                                }
+                              ),
+                              showDelete && /* @__PURE__ */ jsx4(
+                                "button",
+                                {
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    setFileToDelete(f2);
+                                  },
+                                  className: "p-1.5 bg-white/20 text-white text-xs font-semibold rounded-md hover:bg-red-500 backdrop-blur-md transition-colors",
+                                  children: /* @__PURE__ */ jsx4(IconTrash, { className: "w-4 h-4" })
+                                }
+                              )
+                            ] }) }),
+                            /* @__PURE__ */ jsx4("div", { className: "absolute top-2 right-2 bg-black/50 backdrop-blur-md text-white text-[10px] px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity", children: f2.originalName.split(".").pop()?.toUpperCase() })
+                          ]
+                        },
+                        f2.key
+                      );
+                    })
+                  ] }),
+                  !loading && visibleFolders.length === 0 && visibleFiles.length === 0 && /* @__PURE__ */ jsxs4("div", { className: "h-full flex flex-col items-center justify-center text-gray-400", children: [
+                    /* @__PURE__ */ jsx4("div", { className: "w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx4(IconSearch, { className: "w-8 h-8 opacity-40" }) }),
+                    /* @__PURE__ */ jsx4("h3", { className: "text-gray-900 font-medium mb-1", children: "No Assets Found" }),
+                    /* @__PURE__ */ jsx4("p", { className: "text-sm", children: "Try uploading a file or creating a new folder." })
+                  ] })
+                ] }),
+                activeView === "upload" && /* @__PURE__ */ jsx4("div", { className: "h-full flex flex-col items-center justify-center max-w-2xl mx-auto", children: /* @__PURE__ */ jsxs4("div", { className: "w-full bg-white rounded-2xl border border-gray-200 p-8 shadow-sm", children: [
+                  /* @__PURE__ */ jsxs4("h3", { className: "text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx4(IconUploadCloud, { className: "text-blue-500" }),
+                    "Upload Files"
+                  ] }),
+                  /* @__PURE__ */ jsxs4("div", { className: "mb-6", children: [
+                    /* @__PURE__ */ jsx4("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Target Folder" }),
+                    /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
+                      /* @__PURE__ */ jsx4(
+                        "select",
+                        {
+                          value: selectedUploadFolder,
+                          onChange: (e) => setSelectedUploadFolder(e.target.value),
+                          className: "block w-full rounded-lg border-gray-200 bg-gray-50 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 p-2.5",
+                          children: uploadFoldersList.map((opt) => /* @__PURE__ */ jsx4("option", { value: opt.id, children: opt.name }, opt.id))
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4("button", { onClick: () => setShowCreateFolder(true), className: "px-3 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 transition-colors", children: /* @__PURE__ */ jsx4(IconFolderPlus, { className: "w-5 h-5" }) })
+                    ] })
                   ] }),
-                  /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 bg-black/50 p-1 text-[10px] text-white truncate", children: f2.originalName })
-                ] }, f2.key);
-              }),
-              loading && /* @__PURE__ */ jsx4("div", { className: "col-span-full text-sm text-gray-600 dark:text-gray-400", children: "Loading\u2026" }),
-              !loading && visible.length === 0 && /* @__PURE__ */ jsx4("div", { className: "col-span-full text-sm text-gray-600 dark:text-gray-400", children: "No images found" })
+                  /* @__PURE__ */ jsx4(
+                    Uploader,
+                    {
+                      clientOptions,
+                      projectId,
+                      folderPath: uploadFoldersList.find((o) => o.id === selectedUploadFolder)?.path || activeBreadcrumbPath || folderPath,
+                      accept: ["image/*"],
+                      maxFileSize,
+                      maxFiles,
+                      autoRecordToDb,
+                      fetchThumbnails,
+                      autoUpload: true,
+                      onClientUploadComplete: (file) => {
+                        if (file.status === "success" && file.publicUrl && file.fileKey) {
+                          const newItem = {
+                            key: file.fileKey,
+                            originalName: file.name,
+                            size: file.size,
+                            contentType: file.type,
+                            uploadedAt: (/* @__PURE__ */ new Date()).toISOString(),
+                            url: file.publicUrl,
+                            thumbnails: file.thumbnails
+                          };
+                          setFiles((prev) => [newItem, ...prev]);
+                        }
+                      },
+                      onComplete: () => {
+                        if (mode === "full") {
+                          setTimeout(() => {
+                            setActiveView("browse");
+                            load();
+                          }, 1e3);
+                        }
+                      },
+                      dropzoneClassName: "border-2 border-dashed border-gray-300 bg-gray-50 rounded-xl p-12 text-center cursor-pointer hover:border-blue-500 hover:bg-blue-50/50 transition-all",
+                      buttonClassName: "hidden",
+                      children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-4", children: [
+                        /* @__PURE__ */ jsx4("div", { className: "w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx4(IconUploadCloud, { className: "w-6 h-6" }) }),
+                        /* @__PURE__ */ jsxs4("div", { children: [
+                          /* @__PURE__ */ jsx4("p", { className: "text-gray-900 font-medium", children: "Click to upload or drag and drop" }),
+                          /* @__PURE__ */ jsxs4("p", { className: "text-xs text-gray-500 mt-1", children: [
+                            "Supports PNG, JPG, GIF up to ",
+                            Math.round(maxFileSize / 1024 / 1024),
+                            "MB"
+                          ] })
+                        ] })
+                      ] })
+                    }
+                  )
+                ] }) })
+              ] })
             ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx4(Dialog2.Root, { open: showCreateFolder, onOpenChange: setShowCreateFolder, children: /* @__PURE__ */ jsxs4(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx4(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 z-[60]" }),
+      /* @__PURE__ */ jsxs4(Dialog2.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl z-[61] outline-none", children: [
+        /* @__PURE__ */ jsx4(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-4", children: "New Folder" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            autoFocus: true,
+            className: "w-full rounded-lg border border-gray-200 bg-gray-50 px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none mb-6",
+            placeholder: "Folder Name",
+            value: newFolderName,
+            onChange: (e) => setNewFolderName(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && handleCreateFolder()
+          }
+        ),
+        /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsx4("button", { onClick: () => setShowCreateFolder(false), className: "px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg", children: "Cancel" }),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              onClick: handleCreateFolder,
+              disabled: creatingFolder || !newFolderName.trim(),
+              className: "px-4 py-2 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50",
+              children: "Create"
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx4(Dialog2.Root, { open: !!fileToDelete, onOpenChange: (open2) => !open2 && setFileToDelete(null), children: /* @__PURE__ */ jsxs4(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx4(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 z-[80]" }),
+      /* @__PURE__ */ jsxs4(Dialog2.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md rounded-xl bg-white p-6 shadow-2xl z-[81]", children: [
+        /* @__PURE__ */ jsx4(Dialog2.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Delete File" }),
+        /* @__PURE__ */ jsxs4(Dialog2.Description, { className: "text-gray-600 mb-6", children: [
+          "Are you sure you want to delete ",
+          /* @__PURE__ */ jsxs4("span", { className: "font-semibold text-gray-900", children: [
+            '"',
+            fileToDelete?.originalName,
+            '"'
           ] }),
-          (mode === "upload" || mode === "full" && tab === "upload") && /* @__PURE__ */ jsx4(
-            Uploader,
+          "?"
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsx4(
+            "button",
             {
-              clientOptions,
-              projectId,
-              folderPath,
-              accept: ["image/*"],
-              maxFileSize,
-              maxFiles,
-              autoRecordToDb,
-              fetchThumbnails,
-              autoUpload: true,
-              onClientUploadComplete: (file) => {
-                if (file.status === "success" && file.publicUrl && file.fileKey) {
-                  const newItem = {
-                    key: file.fileKey,
-                    originalName: file.name,
-                    size: file.size,
-                    contentType: file.type,
-                    uploadedAt: (/* @__PURE__ */ new Date()).toISOString(),
-                    url: file.publicUrl,
-                    thumbnails: file.thumbnails
-                  };
-                  setItems((prev) => [newItem, ...prev]);
-                }
-              },
-              onComplete: (files) => {
-                if (mode === "full") {
-                  setTimeout(() => {
-                    load();
-                    setTab("browse");
-                  }, 500);
-                }
-              },
-              dropzoneClassName: "border-2 border-dashed border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700/50 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 dark:hover:border-blue-400 transition-colors text-gray-700 dark:text-gray-300",
-              buttonClassName: "px-4 py-2 text-sm rounded border border-gray-300 dark:border-gray-600 bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
+              onClick: () => setFileToDelete(null),
+              className: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg",
+              children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx4("div", { className: "flex justify-end gap-2 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ jsx4(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx4("button", { type: "button", className: "px-4 py-2 text-sm rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-600", children: "Close" }) }) })
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              onClick: handleDelete,
+              disabled: !!deleting,
+              className: "px-4 py-2 text-sm font-medium rounded-lg bg-red-600 text-white hover:bg-red-700 disabled:opacity-70",
+              children: deleting ? "Deleting..." : "Delete"
+            }
+          )
         ] })
-      }
-    )
-  ] }) });
+      ] })
+    ] }) })
+  ] });
 }
 export {
   ConnectProjectDialog,