@thetechfossil/upfiles 1.0.9 → 1.0.12

package/dist/index.js

@@ -1,64 +1,43 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+'use strict';
+
+var React4 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var Dialog2 = require('@radix-ui/react-dialog');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
   }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+  n.default = e;
+  return Object.freeze(n);
+}
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  ConnectProjectDialog: () => ConnectProjectDialog,
-  ImageManager: () => ImageManager,
-  ProjectFilesWidget: () => ProjectFilesWidget,
-  UpfilesClient: () => UpfilesClient,
-  Uploader: () => Uploader,
-  addApiKeyManually: () => addApiKeyManually,
-  connectProject: () => connectProject,
-  connectUsingApiKey: () => connectUsingApiKey,
-  createClientWithKey: () => createClientWithKey,
-  createProject: () => createProject,
-  fetchFileThumbnails: () => fetchFileThumbnails,
-  fetchProjectFiles: () => fetchProjectFiles,
-  fetchProjectImagesWithThumbs: () => fetchProjectImagesWithThumbs,
-  listProjects: () => listProjects
-});
-module.exports = __toCommonJS(index_exports);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var Dialog2__namespace = /*#__PURE__*/_interopNamespace(Dialog2);
 
 // src/client.ts
 var UpfilesClient = class {
   constructor(opts) {
     this.baseUrl = opts.baseUrl?.replace(/\/$/, "");
-    this.presignPath = opts.presignPath ?? "/api/plugin/upload/presigned-url";
+    this.presignPath = opts.presignPath ?? "/api/plugin/upload";
     this.presignUrl = opts.presignUrl;
     this.headers = opts.headers;
     this.withCredentials = opts.withCredentials;
     this.apiKey = opts.apiKey;
     this.apiKeyHeader = opts.apiKeyHeader ?? "authorization";
     this.thumbnailsPath = opts.thumbnailsPath ?? "/api/plugin/thumbnails";
-    this.completionPath = opts.completionPath ?? "/api/plugin/upload/complete";
+    this.completionPath = opts.completionPath ?? "/api/plugin/files";
+    this.foldersPath = opts.foldersPath ?? "/api/plugin/folders";
     this.callCompletionEndpoint = opts.callCompletionEndpoint ?? false;
   }
   async getPresignedUrl(params) {
@@ -181,6 +160,7 @@ var UpfilesClient = class {
       }
       throw new Error(msg);
     }
+    return res.json();
   }
   async getThumbnails(fileKey) {
     const target = this.baseUrl ? `${this.baseUrl}${this.thumbnailsPath}` : this.thumbnailsPath;
@@ -241,6 +221,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`;
@@ -267,13 +306,24 @@ 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) {
+    this.thumbnailsPath.replace(/\/thumbnails$/, "");
+    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();
   }
 };
-
-// src/Uploader.tsx
-var import_react = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
 var Uploader = ({
   clientOptions,
   multiple = true,
@@ -292,16 +342,16 @@ var Uploader = ({
   projectId,
   folderPath,
   fetchThumbnails,
-  autoRecordToDb = false,
+  autoRecordToDb = true,
   recordUrl = "/api/files",
   autoUpload = false
 }) => {
-  const inputRef = (0, import_react.useRef)(null);
-  const client = (0, import_react.useMemo)(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
-  const [files, setFiles] = (0, import_react.useState)([]);
-  const [isUploading, setIsUploading] = (0, import_react.useState)(false);
-  const [isDragOver, setIsDragOver] = (0, import_react.useState)(false);
-  const addFiles = (0, import_react.useCallback)((incoming) => {
+  const inputRef = React4.useRef(null);
+  const client = React4.useMemo(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
+  const [files, setFiles] = React4.useState([]);
+  const [isUploading, setIsUploading] = React4.useState(false);
+  const [isDragOver, setIsDragOver] = React4.useState(false);
+  const addFiles = React4.useCallback((incoming) => {
     const filtered = incoming.filter((f2) => {
       if (f2.size > maxFileSize) {
         return false;
@@ -320,18 +370,18 @@ var Uploader = ({
     }));
     setFiles((prev) => [...prev, ...mapped]);
   }, [files.length, maxFileSize, maxFiles]);
-  const onInputChange = (0, import_react.useCallback)((e) => {
+  const onInputChange = React4.useCallback((e) => {
     const fs = Array.from(e.target.files || []);
     addFiles(fs);
     if (inputRef.current) inputRef.current.value = "";
   }, [addFiles]);
-  const handleDrop = (0, import_react.useCallback)((e) => {
+  const handleDrop = React4.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
     addFiles(Array.from(e.dataTransfer.files || []));
   }, [addFiles]);
-  const uploadOne = (0, import_react.useCallback)(async (item) => {
+  const uploadOne = React4.useCallback(async (item) => {
     const update = (patch) => {
       setFiles((prev) => prev.map((f2) => f2.id === item.id ? { ...f2, ...patch } : f2));
     };
@@ -366,9 +416,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,
@@ -382,15 +433,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",
@@ -413,7 +470,7 @@ var Uploader = ({
       throw err;
     }
   }, [client, projectId, folderPath, fetchThumbnails, autoRecordToDb, recordUrl, clientOptions, onUploadBegin, onUploadProgress, onClientUploadComplete]);
-  const uploadAll = (0, import_react.useCallback)(async () => {
+  const uploadAll = React4.useCallback(async () => {
     const targets = files.filter((f2) => f2.status === "pending");
     if (!targets.length) return;
     setIsUploading(true);
@@ -433,7 +490,7 @@ var Uploader = ({
       setIsUploading(false);
     }
   }, [files, onComplete, onError, uploadOne]);
-  import_react.default.useEffect(() => {
+  React4__namespace.default.useEffect(() => {
     if (autoUpload && files.some((f2) => f2.status === "pending") && !isUploading) {
       const timer = setTimeout(() => {
         uploadAll();
@@ -441,8 +498,8 @@ var Uploader = ({
       return () => clearTimeout(timer);
     }
   }, [autoUpload, files, isUploading, uploadAll]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         ref: inputRef,
@@ -453,10 +510,10 @@ var Uploader = ({
         onChange: onInputChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    /* @__PURE__ */ jsxRuntime.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();
@@ -471,60 +528,126 @@ var Uploader = ({
         onClick: () => inputRef.current?.click(),
         role: "button",
         "aria-label": "Upload files",
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 16 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 600 }, children: "Drop files here or click to browse" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+          ] }) }),
+          children ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Drop files here or click to browse" }),
+            /* @__PURE__ */ jsxRuntime.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__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginTop: 12 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", gap: 8, marginBottom: 8 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          {
-            className: buttonClassName,
-            disabled: isUploading || files.every((f2) => f2.status !== "pending"),
-            onClick: uploadAll,
-            children: isUploading ? "Uploading..." : "Upload"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
-          {
-            className: buttonClassName,
-            disabled: isUploading,
-            onClick: () => setFiles([]),
-            children: "Clear"
-          }
-        )
+    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 dark:border-gray-800 pb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-gray-900 dark:text-gray-100", children: "Selected Files" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ (0, import_jsx_runtime.jsx)("ul", { style: { display: "grid", gap: 8, listStyle: "none", padding: 0 }, children: files.map((f2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 8 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 12, color: "#666" }, children: [
-            (f2.size / (1024 * 1024)).toFixed(2),
-            " MB"
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3", children: files.map((f2) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+        ] }) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" })
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate pr-4", children: f2.name }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 font-medium whitespace-nowrap", children: [
+              (f2.size / (1024 * 1024)).toFixed(2),
+              " MB"
+            ] })
           ] }),
-          f2.error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: "#b91c1c" }, children: f2.error }),
-          f2.publicUrl && f2.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: f2.publicUrl, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" })
+          f2.status === "error" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-red-500 font-medium mt-1", children: f2.error }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `h-full transition-all duration-300 ${f2.status === "success" ? "bg-green-500" : "bg-blue-500"}`,
+              style: { width: `${f2.progress}%` }
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 120, textAlign: "right" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { height: 6, background: "#e5e7eb", borderRadius: 999, overflow: "hidden" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: `${f2.progress}%`, height: "100%", background: f2.status === "error" ? "#ef4444" : "#2563eb" } }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, color: "#666", marginTop: 4 }, children: f2.status })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 ml-4", children: [
+          f2.status === "success" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+            f2.publicUrl && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 3 21 3 21 9" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                ] })
+              }
+            )
+          ] }),
+          f2.status === "error" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ] }) }),
+          f2.status === "uploading" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold text-blue-600 dark:text-blue-400", children: [
+            f2.progress,
+            "%"
+          ] }),
+          f2.status === "pending" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] })
+            }
+          )
         ] })
       ] }) }, f2.id)) })
     ] })
   ] });
 };
-
-// src/ProjectFilesWidget.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
 var ProjectFilesWidget = ({
   clientOptions,
   folderPath,
@@ -537,34 +660,47 @@ var ProjectFilesWidget = ({
   onSaved,
   onDelete,
   deleteUrl = "/api/files",
-  showDelete = false
+  showDelete = false,
+  refreshInterval = 5e3
 }) => {
-  const client = (0, import_react2.useMemo)(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
-  const [files, setFiles] = (0, import_react2.useState)([]);
-  const [loading, setLoading] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const [query, setQuery] = (0, import_react2.useState)("");
-  const [savingKey, setSavingKey] = (0, import_react2.useState)(null);
-  const [deletingKey, setDeletingKey] = (0, import_react2.useState)(null);
-  (0, import_react2.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 client = React4.useMemo(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
+  const [files, setFiles] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [query, setQuery] = React4.useState("");
+  const [savingKey, setSavingKey] = React4.useState(null);
+  const [deletingKey, setDeletingKey] = React4.useState(null);
+  const lastUpdatedRef = React4__namespace.default.useRef(null);
+  const isFetchingRef = React4__namespace.default.useRef(false);
+  const fetchFiles = React4__namespace.default.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]);
+  React4.useEffect(() => {
+    fetchFiles();
+  }, [fetchFiles]);
+  React4.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())
   );
@@ -604,9 +740,9 @@ var ProjectFilesWidget = ({
       setDeletingKey(null);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           type: "text",
@@ -616,49 +752,38 @@ var ProjectFilesWidget = ({
           style: { flex: 1, padding: 8, border: "1px solid #e5e7eb", borderRadius: 6 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           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"
         }
       )
     ] }),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, color: "#666" }, children: "Loading files\u2026" }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, color: "#b91c1c" }, children: error }),
-    !loading && !error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("ul", { className: listClassName, style: { listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }, children: [
-      visible.map((f2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#666" }, children: "Loading files\u2026" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#b91c1c" }, children: error }),
+    !loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: listClassName, style: { listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }, children: [
+      visible.map((f2) => /* @__PURE__ */ jsxRuntime.jsxs(
         "li",
         {
           className: itemClassName,
           style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 10, display: "flex", justifyContent: "space-between", alignItems: "center" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.originalName }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: 12, color: "#666" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.originalName }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 12, color: "#666" }, children: [
                 (f2.size / (1024 * 1024)).toFixed(2),
                 " MB \u2022 ",
                 f2.contentType
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: f2.url, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("a", { href: f2.url, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   onClick: async () => {
@@ -695,7 +820,7 @@ var ProjectFilesWidget = ({
                   children: savingKey === f2.key ? "Saving\u2026" : "Use"
                 }
               ),
-              showDelete && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              showDelete && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   onClick: () => handleDelete(f2.key),
@@ -709,15 +834,11 @@ var ProjectFilesWidget = ({
         },
         f2.key
       )),
-      visible.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { style: { fontSize: 12, color: "#666" }, children: "No files found" })
+      visible.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("li", { style: { fontSize: 12, color: "#666" }, children: "No files found" })
     ] })
   ] });
 };
 
-// src/ConnectProjectDialog.tsx
-var React3 = __toESM(require("react"));
-var Dialog = __toESM(require("@radix-ui/react-dialog"));
-
 // src/projectConnect.ts
 var f = (globalThis.fetch || fetch).bind(globalThis);
 async function httpJson(input, init, useFetch) {
@@ -807,19 +928,16 @@ function connectUsingApiKey(opts) {
   const client = new UpfilesClient({ baseUrl, apiKey, apiKeyHeader: opts.apiKeyHeader ?? "authorization" });
   return { apiKey, client };
 }
-
-// src/ConnectProjectDialog.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
 function ConnectProjectDialog(props) {
   const { baseUrl, open, onOpenChange, onConnected, fetchImpl, title, description, className } = props;
-  const [mode, setMode] = React3.useState("existing");
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [projects, setProjects] = React3.useState([]);
-  const [selectedProjectId, setSelectedProjectId] = React3.useState("");
-  const [manualKey, setManualKey] = React3.useState("");
-  const [newProjectName, setNewProjectName] = React3.useState("");
-  const resetState = React3.useCallback(() => {
+  const [mode, setMode] = React4__namespace.useState("existing");
+  const [loading, setLoading] = React4__namespace.useState(false);
+  const [error, setError] = React4__namespace.useState(null);
+  const [projects, setProjects] = React4__namespace.useState([]);
+  const [selectedProjectId, setSelectedProjectId] = React4__namespace.useState("");
+  const [manualKey, setManualKey] = React4__namespace.useState("");
+  const [newProjectName, setNewProjectName] = React4__namespace.useState("");
+  const resetState = React4__namespace.useCallback(() => {
     setMode("existing");
     setLoading(false);
     setError(null);
@@ -828,7 +946,7 @@ function ConnectProjectDialog(props) {
     setManualKey("");
     setNewProjectName("");
   }, []);
-  React3.useEffect(() => {
+  React4__namespace.useEffect(() => {
     const run = async () => {
       if (!open || mode !== "existing") return;
       try {
@@ -890,8 +1008,8 @@ function ConnectProjectDialog(props) {
       setLoading(false);
     }
   };
-  const ModeSwitcher = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const ModeSwitcher = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -900,7 +1018,7 @@ function ConnectProjectDialog(props) {
         children: "Connect existing"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -909,7 +1027,7 @@ function ConnectProjectDialog(props) {
         children: "Add API key"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -919,19 +1037,19 @@ function ConnectProjectDialog(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Root, { open, onOpenChange: (o) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open, onOpenChange: (o) => {
     if (!o) resetState();
     onOpenChange(o);
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Dialog.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Overlay, { className: "fixed inset-0 bg-black/40" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Content, { className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-md rounded-lg border bg-white p-4 shadow-lg ${className ?? ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Title, { className: "text-lg font-semibold", children: title ?? "Connect to Upfiles" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Description, { className: "text-sm text-muted-foreground", children: description ?? "Choose how to connect your project to retrieve an API key." }),
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/40" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Content, { className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-md rounded-lg border bg-white p-4 shadow-lg ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-lg font-semibold", children: title ?? "Connect to Upfiles" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Description, { className: "text-sm text-muted-foreground", children: description ?? "Choose how to connect your project to retrieve an API key." }),
       ModeSwitcher,
-      error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
-      mode === "existing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm font-medium", children: "Project" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
+      mode === "existing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Project" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -939,14 +1057,14 @@ function ConnectProjectDialog(props) {
             onChange: (e) => setSelectedProjectId(e.target.value),
             disabled: loading,
             children: [
-              projects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: loading ? "Loading..." : "No projects found" }),
-              projects.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: p.id, children: p.name }, p.id))
+              projects.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: loading ? "Loading..." : "No projects found" }),
+              projects.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, children: p.name }, p.id))
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -958,9 +1076,9 @@ function ConnectProjectDialog(props) {
           )
         ] })
       ] }),
-      mode === "manual" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm font-medium", children: "API key" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      mode === "manual" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "API key" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -970,9 +1088,9 @@ function ConnectProjectDialog(props) {
             disabled: loading
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -984,9 +1102,9 @@ function ConnectProjectDialog(props) {
           )
         ] })
       ] }),
-      mode === "new" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm font-medium", children: "Project name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      mode === "new" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Project name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -996,10 +1114,10 @@ function ConnectProjectDialog(props) {
             disabled: loading
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-muted-foreground", children: "A project will be created in your Upfiles account and an API key generated." }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "A project will be created in your Upfiles account and an API key generated." }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1025,7 +1143,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 = [];
@@ -1047,13 +1165,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
-var React4 = __toESM(require("react"));
-var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var IconGrid = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
+] });
+var IconUploadCloud = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12v9" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m16 16-4-4-4 4" })
+] });
+var IconFolder = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "10", y2: "16" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", x2: "15", y1: "13", y2: "13" })
+] });
+var IconSearch = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
+] });
+var IconRefresh = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3v5h-5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16H3v5" })
+] });
+var IconChevronRight = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) });
+var IconTrash = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+] });
+var IconX = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
+] });
+var IconHome = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 22 9 12 15 12 15 22" })
+] });
+var IconImage = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+] });
+var IconLoader = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var IconLayers = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsx("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 17 12 22 22 17" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 12 12 17 22 12" })
+] });
 function ImageManager(props) {
   const {
     open,
@@ -1073,224 +1240,746 @@ 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 [loading, setLoading] = React4.useState(false);
-  const [error, setError] = React4.useState(null);
-  const [items, setItems] = React4.useState([]);
-  const [query, setQuery] = React4.useState("");
-  const [deleting, setDeleting] = React4.useState(null);
-  const load = React4.useCallback(async () => {
+  const [activeView, setActiveView] = React4__namespace.useState(mode === "upload" ? "upload" : "browse");
+  const [loading, setLoading] = React4__namespace.useState(false);
+  const [error, setError] = React4__namespace.useState(null);
+  const [currentFolderId, setCurrentFolderId] = React4__namespace.useState(void 0);
+  const [breadcrumbs, setBreadcrumbs] = React4__namespace.useState([{ id: void 0, name: "Home" }]);
+  const [files, setFiles] = React4__namespace.useState([]);
+  const [folders, setFolders] = React4__namespace.useState([]);
+  const [query, setQuery] = React4__namespace.useState("");
+  const [deleting, setDeleting] = React4__namespace.useState(null);
+  const [showCreateFolder, setShowCreateFolder] = React4__namespace.useState(false);
+  const [newFolderName, setNewFolderName] = React4__namespace.useState("");
+  const [creatingFolder, setCreatingFolder] = React4__namespace.useState(false);
+  const [fileToDelete, setFileToDelete] = React4__namespace.useState(null);
+  const [thumbnailSelectorFile, setThumbnailSelectorFile] = React4__namespace.useState(null);
+  const [selectedThumbnailForFile, setSelectedThumbnailForFile] = React4__namespace.useState(null);
+  const [previewFile, setPreviewFile] = React4__namespace.useState(null);
+  const lastUpdatedRef = React4__namespace.useRef(null);
+  const isFetchingRef = React4__namespace.useRef(false);
+  const deduplicateFiles = React4__namespace.useCallback((files2) => {
+    const seen = /* @__PURE__ */ new Set();
+    return files2.filter((file) => {
+      if (seen.has(file.key)) {
+        return false;
+      }
+      seen.add(file.key);
+      return true;
+    });
+  }, []);
+  const load = React4__namespace.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(deduplicateFiles(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]);
-  React4.useEffect(() => {
+  }, [clientOptions, folderPath, currentFolderId, breadcrumbs]);
+  React4__namespace.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__namespace.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 deduplicateFiles([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__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Dialog2.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 dark:bg-black/60" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "space-y-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 dark:text-white", children: title ?? "Image Manager" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2 border-b border-gray-200 dark:border-gray-700", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "button",
+    };
+    return () => eventSource.close();
+  }, [open, clientOptions, projectId]);
+  const visibleFiles = React4__namespace.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return !q ? files : files.filter((i) => (i.originalName || "").toLowerCase().includes(q));
+  }, [files, query]);
+  const visibleFolders = React4__namespace.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__namespace.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__namespace.useState("current");
+  const activeBreadcrumbPath = React4__namespace.useMemo(() => {
+    return breadcrumbs.length > 1 ? breadcrumbs.slice(1).map((b) => b.name).join("/") + "/" : void 0;
+  }, [breadcrumbs]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/60 backdrop-blur-sm z-50 transition-all duration-300 flex items-center justify-center" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Dialog2__namespace.Content,
+        {
+          className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] h-[90vh] max-w-7xl min-w-[800px] min-h-[600px] rounded-2xl bg-white dark:bg-gray-950 shadow-2xl z-[51] overflow-hidden flex flex-row ${className ?? ""}`,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              Dialog2__namespace.Title,
               {
-                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"
+                style: {
+                  position: "absolute",
+                  width: "1px",
+                  height: "1px",
+                  padding: "0",
+                  margin: "-1px",
+                  overflow: "hidden",
+                  clip: "rect(0, 0, 0, 0)",
+                  whiteSpace: "nowrap",
+                  border: "0"
+                },
+                children: title ?? "Media Library"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-              "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__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2 items-center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                "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__ */ (0, import_jsx_runtime4.jsx)("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" })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-64 min-w-[256px] bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col flex-shrink-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconImage, { className: "text-blue-600" }),
+                  title ?? "Media Library"
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: description ?? "Manage your assets" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex-1 px-3 space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "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__ */ jsxRuntime.jsx(IconGrid, { className: "w-4 h-4" }),
+                      "All Files"
+                    ]
+                  }
+                ),
+                mode === "full" && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "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__ */ jsxRuntime.jsx(IconUploadCloud, { className: "w-4 h-4" }),
+                      "Upload New"
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-center text-gray-400", children: [
+                files.length,
+                " files \u2022 ",
+                folders.length,
+                " folders"
+              ] }) })
             ] }),
-            error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "group relative aspect-square overflow-hidden rounded border border-gray-200 dark:border-gray-700", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("img", { src: thumbUrl, alt: f2.originalName, className: "h-full w-full object-cover" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                      "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__ */ (0, import_jsx_runtime4.jsx)(
-                      "button",
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col bg-white dark:bg-gray-950 relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-16 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between px-6 gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 flex-1", children: activeView === "browse" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 overflow-hidden whitespace-nowrap", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleBreadcrumbClick(0), className: "hover:text-blue-600 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx(IconHome, { className: "w-4 h-4" }) }),
+                    breadcrumbs.slice(1).map((b, i) => /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, { className: "w-4 h-4 text-gray-300 mx-1" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "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 || "breadcrumb"}-${i}`))
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "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__ */ jsxRuntime.jsx(IconRefresh, { className: `w-4 h-4 ${loading ? "animate-spin" : ""}` })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 max-w-sm group", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(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__ */ jsxRuntime.jsx(
+                      "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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  activeView === "browse" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx(IconFolderPlus, { className: "w-5 h-5" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx(IconLoader, { className: "w-5 h-5" }) })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-span-full text-sm text-gray-600 dark:text-gray-400", children: "Loading\u2026" }),
-              !loading && visible.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "col-span-full text-sm text-gray-600 dark:text-gray-400", children: "No images found" })
+                  /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx(IconX, { className: "w-5 h-5" }) }) })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-6 bg-gray-50/30 dark:bg-gray-900/30", children: [
+                activeView === "browse" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  error && /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx("span", { children: error }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("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__ */ jsxRuntime.jsxs(
+                      "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__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx(IconFolder, { className: "w-8 h-8 drop-shadow-sm" }) }),
+                          /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsxs(
+                        "div",
+                        {
+                          onClick: () => setPreviewFile(f2),
+                          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 cursor-pointer",
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("img", { src: thumbUrl, alt: f2.originalName, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 justify-center transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "button",
+                                {
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    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"
+                                }
+                              ),
+                              fWithThumbs.thumbnails && fWithThumbs.thumbnails.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                                "button",
+                                {
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    setThumbnailSelectorFile(f2);
+                                    setSelectedThumbnailForFile(null);
+                                  },
+                                  className: "p-1.5 bg-white/20 text-white text-xs font-semibold rounded-md hover:bg-purple-500 backdrop-blur-md transition-colors",
+                                  title: "Select Thumbnail",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(IconLayers, { className: "w-4 h-4" })
+                                }
+                              ),
+                              showDelete && /* @__PURE__ */ jsxRuntime.jsx(
+                                "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__ */ jsxRuntime.jsx(IconTrash, { className: "w-4 h-4" })
+                                }
+                              )
+                            ] }) }),
+                            /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col items-center justify-center text-gray-400", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: "w-8 h-8 opacity-40" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-gray-900 font-medium mb-1", children: "No Assets Found" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "Try uploading a file or creating a new folder." })
+                  ] })
+                ] }),
+                activeView === "upload" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full flex flex-col items-center justify-center max-w-2xl mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-white rounded-2xl border border-gray-200 p-8 shadow-sm", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(IconUploadCloud, { className: "text-blue-500" }),
+                    "Upload Files"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Target Folder" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "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__ */ jsxRuntime.jsx("option", { value: opt.id, children: opt.name }, opt.id))
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setShowCreateFolder(true), className: "px-3 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx(IconFolderPlus, { className: "w-5 h-5" }) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    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) => {
+                            if (prev.find((f2) => f2.key === newItem.key)) return prev;
+                            return deduplicateFiles([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__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(IconUploadCloud, { className: "w-6 h-6" }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-900 font-medium", children: "Click to upload or drag and drop" }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mt-1", children: [
+                            "Supports PNG, JPG, GIF up to ",
+                            Math.round(maxFileSize / 1024 / 1024),
+                            "MB"
+                          ] })
+                        ] })
+                      ] })
+                    }
+                  )
+                ] }) })
+              ] })
             ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: showCreateFolder, onOpenChange: setShowCreateFolder, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/40 z-[60]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.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", "aria-describedby": "new-folder-description", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-lg font-semibold text-gray-900 mb-4", children: "New Folder" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Description, { id: "new-folder-description", className: "sr-only", children: "Create a new folder to organize your files" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "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__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("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__ */ jsxRuntime.jsx(
+            "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__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: !!fileToDelete, onOpenChange: (open2) => !open2 && setFileToDelete(null), children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/40 z-[80]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.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]", "aria-describedby": "delete-file-description", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Delete File" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Description, { id: "delete-file-description", className: "text-gray-600 mb-6", children: [
+          "Are you sure you want to delete ",
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900", children: [
+            '"',
+            fileToDelete?.originalName,
+            '"'
           ] }),
-          (mode === "upload" || mode === "full" && tab === "upload") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            Uploader,
+          "?"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setFileToDelete(null),
+              className: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "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"
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: !!thumbnailSelectorFile, onOpenChange: (open2) => !open2 && setThumbnailSelectorFile(null), children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/50 z-[90]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl max-h-[80vh] rounded-xl bg-white shadow-2xl z-[91] overflow-hidden", "aria-describedby": "thumbnail-selector-description", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 border-b border-gray-200", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select Thumbnail" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Description, { id: "thumbnail-selector-description", className: "text-gray-600", children: [
+            "Choose a thumbnail size for ",
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900", children: [
+              '"',
+              thumbnailSelectorFile?.originalName,
+              '"'
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 overflow-y-auto max-h-[60vh]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              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]);
+              onClick: () => setSelectedThumbnailForFile(null),
+              className: `group cursor-pointer rounded-lg border-2 overflow-hidden transition-all ${selectedThumbnailForFile === null ? "border-blue-500 ring-2 ring-blue-200" : "border-gray-200 hover:border-blue-300"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square bg-gray-100 flex items-center justify-center relative", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: thumbnailSelectorFile?.url,
+                      alt: "Original",
+                      className: "w-full h-full object-cover"
+                    }
+                  ),
+                  selectedThumbnailForFile === null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-blue-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-white", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm text-gray-900", children: "Original" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: "Full size" })
+                ] })
+              ]
+            }
+          ),
+          thumbnailSelectorFile?.thumbnails?.map((thumbnail) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              onClick: () => setSelectedThumbnailForFile(thumbnail),
+              className: `group cursor-pointer rounded-lg border-2 overflow-hidden transition-all ${selectedThumbnailForFile?.id === thumbnail.id ? "border-blue-500 ring-2 ring-blue-200" : "border-gray-200 hover:border-blue-300"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square bg-gray-100 flex items-center justify-center relative", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "img",
+                    {
+                      src: thumbnail.url,
+                      alt: `${thumbnail.size}px thumbnail`,
+                      className: "w-full h-full object-cover"
+                    }
+                  ),
+                  selectedThumbnailForFile?.id === thumbnail.id && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-blue-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }) })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-white", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-medium text-sm text-gray-900", children: [
+                    thumbnail.size,
+                    "px"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: thumbnail.sizeType || "Thumbnail" })
+                ] })
+              ]
+            },
+            thumbnail.id
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 border-t border-gray-200 flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setThumbnailSelectorFile(null),
+              className: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                if (thumbnailSelectorFile) {
+                  onSelect({
+                    url: selectedThumbnailForFile?.url || thumbnailSelectorFile.url,
+                    key: thumbnailSelectorFile.key,
+                    originalName: thumbnailSelectorFile.originalName,
+                    size: thumbnailSelectorFile.size,
+                    contentType: thumbnailSelectorFile.contentType,
+                    thumbnails: thumbnailSelectorFile.thumbnails,
+                    selectedThumbnail: selectedThumbnailForFile || void 0
+                  });
+                  onOpenChange(false);
+                  setThumbnailSelectorFile(null);
                 }
               },
-              onComplete: (files) => {
-                if (mode === "full") {
-                  setTimeout(() => {
-                    load();
-                    setTab("browse");
-                  }, 500);
+              className: "px-4 py-2 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700",
+              children: [
+                "Select ",
+                selectedThumbnailForFile ? `${selectedThumbnailForFile.size}px Thumbnail` : "Original"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: !!previewFile, onOpenChange: (open2) => !open2 && setPreviewFile(null), children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/90 z-[100]", onClick: () => setPreviewFile(null) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[90vh] z-[101] outline-none", "aria-describedby": "image-preview-description", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/70 to-transparent p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-xl font-semibold mb-1", children: previewFile?.originalName }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Description, { id: "image-preview-description", className: "text-sm text-gray-300", children: [
+              previewFile?.size ? `${(previewFile.size / 1024).toFixed(1)} KB` : "",
+              " \u2022 ",
+              previewFile?.contentType
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setPreviewFile(null),
+              className: "p-2 bg-white/10 hover:bg-white/20 rounded-lg backdrop-blur-md transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { className: "w-6 h-6 text-white" })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: previewFile?.url,
+            alt: previewFile?.originalName,
+            className: "max-w-full max-h-full object-contain",
+            onError: (e) => {
+              const target = e.target;
+              target.style.display = "none";
+              const errorDiv = document.createElement("div");
+              errorDiv.className = "text-white text-center";
+              errorDiv.innerHTML = `
+                      <div class="text-red-400 mb-2">Failed to load image</div>
+                      <div class="text-sm text-gray-400">URL: ${previewFile?.url}</div>
+                    `;
+              target.parentElement?.appendChild(errorDiv);
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/70 to-transparent p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                if (previewFile) {
+                  onSelect({
+                    url: previewFile.url,
+                    key: previewFile.key,
+                    originalName: previewFile.originalName,
+                    size: previewFile.size,
+                    contentType: previewFile.contentType,
+                    thumbnails: previewFile.thumbnails
+                  });
+                  onOpenChange(false);
+                  setPreviewFile(null);
                 }
               },
-              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"
+              className: "px-6 py-2.5 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-500 shadow-lg",
+              children: "Select Image"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex justify-end gap-2 pt-2 border-t border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: previewFile?.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              onClick: (e) => e.stopPropagation(),
+              className: "px-6 py-2.5 bg-white/10 text-white font-semibold rounded-lg hover:bg-white/20 backdrop-blur-md transition-colors",
+              children: "Open in New Tab"
+            }
+          ),
+          previewFile?.thumbnails && previewFile.thumbnails.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setThumbnailSelectorFile(previewFile);
+                setSelectedThumbnailForFile(null);
+                setPreviewFile(null);
+              },
+              className: "px-6 py-2.5 bg-purple-600 text-white font-semibold rounded-lg hover:bg-purple-500 shadow-lg flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconLayers, { className: "w-5 h-5" }),
+                "Select Thumbnail"
+              ]
+            }
+          )
+        ] }) })
+      ] }) })
+    ] }) })
+  ] });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ConnectProjectDialog,
-  ImageManager,
-  ProjectFilesWidget,
-  UpfilesClient,
-  Uploader,
-  addApiKeyManually,
-  connectProject,
-  connectUsingApiKey,
-  createClientWithKey,
-  createProject,
-  fetchFileThumbnails,
-  fetchProjectFiles,
-  fetchProjectImagesWithThumbs,
-  listProjects
-});
+
+exports.ConnectProjectDialog = ConnectProjectDialog;
+exports.ImageManager = ImageManager;
+exports.ProjectFilesWidget = ProjectFilesWidget;
+exports.UpfilesClient = UpfilesClient;
+exports.Uploader = Uploader;
+exports.addApiKeyManually = addApiKeyManually;
+exports.connectProject = connectProject;
+exports.connectUsingApiKey = connectUsingApiKey;
+exports.createClientWithKey = createClientWithKey;
+exports.createProject = createProject;
+exports.fetchFileThumbnails = fetchFileThumbnails;
+exports.fetchProjectFiles = fetchProjectFiles;
+exports.fetchProjectImagesWithThumbs = fetchProjectImagesWithThumbs;
+exports.listProjects = listProjects;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map