@thetechfossil/upfiles 1.0.12 → 1.0.13

package/dist/index.js

@@ -26,6 +26,13 @@ var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
 var Dialog2__namespace = /*#__PURE__*/_interopNamespace(Dialog2);
 
 // src/client.ts
+var StorageQuotaError = class extends Error {
+  constructor(message, details) {
+    super(message);
+    this.name = "StorageQuotaError";
+    this.details = details;
+  }
+};
 var UpfilesClient = class {
   constructor(opts) {
     this.baseUrl = opts.baseUrl?.replace(/\/$/, "");
@@ -39,25 +46,66 @@ var UpfilesClient = class {
     this.completionPath = opts.completionPath ?? "/api/plugin/files";
     this.foldersPath = opts.foldersPath ?? "/api/plugin/folders";
     this.callCompletionEndpoint = opts.callCompletionEndpoint ?? false;
+    this.getToken = opts.getToken;
+    this.projectId = opts.projectId;
+    this.projectName = opts.projectName;
   }
-  async getPresignedUrl(params) {
-    if (!params.fileName) throw new Error("fileName is required");
-    if (!params.fileType) throw new Error("fileType is required");
-    if (!params.fileSize || params.fileSize <= 0) throw new Error("fileSize must be > 0");
-    const target = this.presignUrl ? this.presignUrl : this.baseUrl ? `${this.baseUrl}${this.presignPath}` : this.presignPath;
-    const headers = {
-      "content-type": "application/json",
-      ...this.headers || {}
-    };
+  /** Build auth headers for API requests. Priority: getToken (JWT) > apiKey > static headers */
+  async buildAuthHeaders() {
+    const headers = { ...this.headers || {} };
+    if (this.getToken) {
+      const token = await this.getToken();
+      if (token) {
+        headers["authorization"] = `Bearer ${token}`;
+      }
+      if (this.projectName) {
+        headers["x-project-name"] = this.projectName;
+      } else if (this.projectId) {
+        headers["x-project-id"] = this.projectId;
+      }
+      return headers;
+    }
     if (this.apiKey) {
       if (this.apiKeyHeader === "authorization") {
-        headers["authorization"] = this.apiKey.startsWith("upk_") ? `Bearer ${this.apiKey}` : this.apiKey;
+        headers["authorization"] = this.apiKey.startsWith("upf_") ? `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;
       }
     }
+    return headers;
+  }
+  /** Get storage quota info for the project */
+  async getQuota() {
+    const basePath = this.presignPath.replace(/\/upload$/, "");
+    const target = this.baseUrl ? `${this.baseUrl}${basePath}/quota` : `${basePath}/quota`;
+    const headers = await this.buildAuthHeaders();
+    const res = await fetch(target, {
+      method: "GET",
+      headers,
+      credentials: this.withCredentials ? "include" : "same-origin"
+    });
+    if (!res.ok) {
+      let msg = "Failed to get storage quota";
+      try {
+        const data = await res.json();
+        msg = data.message || data.error || msg;
+      } catch {
+      }
+      throw new Error(msg);
+    }
+    return res.json();
+  }
+  async getPresignedUrl(params) {
+    if (!params.fileName) throw new Error("fileName is required");
+    if (!params.fileType) throw new Error("fileType is required");
+    if (!params.fileSize || params.fileSize <= 0) throw new Error("fileSize must be > 0");
+    const target = this.presignUrl ? this.presignUrl : this.baseUrl ? `${this.baseUrl}${this.presignPath}` : this.presignPath;
+    const headers = {
+      "content-type": "application/json",
+      ...await this.buildAuthHeaders()
+    };
     const res = await fetch(target, {
       method: "POST",
       headers,
@@ -68,8 +116,12 @@ var UpfilesClient = class {
       let msg = "Failed to get upload URL";
       try {
         const data = await res.json();
-        msg = data.error || msg;
-      } catch {
+        if (res.status === 413 && data.error === "STORAGE_QUOTA_EXCEEDED") {
+          throw new StorageQuotaError(data.message || "Storage quota exceeded", data.details);
+        }
+        msg = data.message || data.error || msg;
+      } catch (e) {
+        if (e instanceof StorageQuotaError) throw e;
       }
       throw new Error(msg);
     }
@@ -105,7 +157,11 @@ var UpfilesClient = class {
           originalName: file.name,
           size: file.size,
           contentType: file.type || "application/octet-stream",
-          projectId: extras?.projectId
+          projectId: extras?.projectId,
+          url: presign.publicUrl,
+          userId: extras?.userId
+          // userId might be passed in extras but not typed yet in this method signature, easy fix is to cast or update signature. Better to update signature but for now access via cast to keep change minimal if extras type isn't fully updated here locally. Wait, the plan said "Update upload method to pass...". I should probably check if I can update extras type locally or just cast. The `upload` method signature has `extras`. I should probably update `extras` type in the signature if I can.
+          // Actually, looking at the code, `extras` is defined inline: `extras?: { projectId?: string; folderPath?: string; fetchThumbnails?: boolean; callCompletionEndpoint?: boolean }`. I should update this type definition too.
         });
       } catch (error) {
         throw new Error(`Upload verification failed: ${error.message}`);
@@ -134,22 +190,16 @@ var UpfilesClient = class {
     const target = this.baseUrl ? `${this.baseUrl}${this.completionPath}` : this.completionPath;
     const headers = {
       "content-type": "application/json",
-      ...this.headers || {}
+      ...await this.buildAuthHeaders()
     };
-    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(params)
+      body: JSON.stringify({
+        ...params,
+        key: params.fileKey
+      })
     });
     if (!res.ok) {
       let msg = "Failed to complete upload";
@@ -165,16 +215,7 @@ var UpfilesClient = class {
   async getThumbnails(fileKey) {
     const target = this.baseUrl ? `${this.baseUrl}${this.thumbnailsPath}` : this.thumbnailsPath;
     const url = `${target}?fileKey=${encodeURIComponent(fileKey)}`;
-    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 headers = await this.buildAuthHeaders();
     const res = await fetch(url, { method: "GET", headers, credentials: this.withCredentials ? "include" : "same-origin" });
     if (!res.ok) {
       let msg = "Failed to fetch thumbnails";
@@ -188,26 +229,19 @@ var UpfilesClient = class {
     const data = await res.json();
     return data?.thumbnails ?? [];
   }
-  async generateThumbnails(fileKey) {
+  async generateThumbnails(fileKey, sizes) {
     const target = this.baseUrl ? `${this.baseUrl}${this.thumbnailsPath}` : this.thumbnailsPath;
     const headers = {
       "content-type": "application/json",
-      ...this.headers || {}
+      ...await this.buildAuthHeaders()
     };
-    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 body = { fileKey };
+    if (sizes && sizes.length > 0) body.sizes = sizes;
     const res = await fetch(target, {
       method: "POST",
       headers,
       credentials: this.withCredentials ? "include" : "same-origin",
-      body: JSON.stringify({ fileKey })
+      body: JSON.stringify(body)
     });
     if (!res.ok) {
       let msg = "Failed to generate thumbnails";
@@ -221,19 +255,53 @@ var UpfilesClient = class {
     const data = await res.json();
     return { masterWebp: data.masterWebp, thumbnails: data.thumbnails ?? [] };
   }
+  /** Get thumbnail settings for the project (requires API key) */
+  async getThumbnailSettings() {
+    const basePath = this.presignPath.replace(/\/upload$/, "");
+    const target = this.baseUrl ? `${this.baseUrl}${basePath}/settings/thumbnails` : `${basePath}/settings/thumbnails`;
+    const headers = await this.buildAuthHeaders();
+    const res = await fetch(target, {
+      method: "GET",
+      headers,
+      credentials: this.withCredentials ? "include" : "same-origin"
+    });
+    if (!res.ok) {
+      let msg = "Failed to get thumbnail settings";
+      try {
+        const d = await res.json();
+        msg = d.message || msg;
+      } catch {
+      }
+      throw new Error(msg);
+    }
+    return res.json();
+  }
+  /** Update thumbnail settings for the project (requires API key with write scope) */
+  async updateThumbnailSettings(settings) {
+    const basePath = this.presignPath.replace(/\/upload$/, "");
+    const target = this.baseUrl ? `${this.baseUrl}${basePath}/settings/thumbnails` : `${basePath}/settings/thumbnails`;
+    const headers = { "content-type": "application/json", ...await this.buildAuthHeaders() };
+    const res = await fetch(target, {
+      method: "PATCH",
+      headers,
+      credentials: this.withCredentials ? "include" : "same-origin",
+      body: JSON.stringify(settings)
+    });
+    if (!res.ok) {
+      let msg = "Failed to update thumbnail settings";
+      try {
+        const d = await res.json();
+        msg = d.message || msg;
+      } catch {
+      }
+      throw new Error(msg);
+    }
+    return res.json();
+  }
   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 headers = await this.buildAuthHeaders();
     const res = await fetch(url, { method: "GET", headers, credentials: this.withCredentials ? "include" : "same-origin" });
     if (!res.ok) {
       let msg = "Failed to fetch folders";
@@ -251,17 +319,8 @@ var UpfilesClient = class {
     const target = this.baseUrl ? `${this.baseUrl}${this.foldersPath}` : this.foldersPath;
     const headers = {
       "content-type": "application/json",
-      ...this.headers || {}
+      ...await this.buildAuthHeaders()
     };
-    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,
@@ -285,16 +344,7 @@ var UpfilesClient = class {
     const filesPath = `${basePath}/files`;
     const target = this.baseUrl ? `${this.baseUrl}${filesPath}` : filesPath;
     const url = params?.folderPath ? `${target}?folderPath=${encodeURIComponent(params.folderPath)}` : 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 headers = await this.buildAuthHeaders();
     const res = await fetch(url, { method: "GET", headers, credentials: this.withCredentials ? "include" : "same-origin" });
     if (!res.ok) {
       let msg = "Failed to fetch files";
@@ -312,24 +362,21 @@ var UpfilesClient = class {
     };
   }
   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);
+    if (!this.getToken && !this.apiKey && (projectId || this.projectId)) {
+      url.searchParams.set("projectId", projectId || this.projectId);
     }
     return url.toString();
   }
 };
+var THUMBNAIL_SIZE_OPTIONS = [64, 128, 256, 512];
 var Uploader = ({
   clientOptions,
   multiple = true,
   accept = ["image/*", "video/*", "audio/*", "application/pdf", "text/plain", "application/json"],
-  maxFileSize = 100 * 1024 * 1024,
-  maxFiles = 10,
+  maxFileSize = 0,
+  maxFiles = 0,
   onComplete,
   onError,
   onUploadBegin,
@@ -340,36 +387,124 @@ var Uploader = ({
   dropzoneClassName,
   children,
   projectId,
+  userId,
   folderPath,
   fetchThumbnails,
   autoRecordToDb = true,
   recordUrl = "/api/files",
-  autoUpload = false
+  autoUpload = false,
+  thumbnailEnabled,
+  thumbnailSizes
 }) => {
   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;
-      }
-      return true;
+  const [quotaError, setQuotaError] = React4.useState(null);
+  const showThumbnailUI = thumbnailEnabled !== void 0;
+  const [thumbEnabled, setThumbEnabled] = React4.useState(thumbnailEnabled ?? true);
+  const [thumbSizes, setThumbSizes] = React4.useState(thumbnailSizes ?? [256, 512]);
+  const [thumbFileIds, setThumbFileIds] = React4.useState(/* @__PURE__ */ new Set());
+  const thumbEnabledRef = React4.useRef(thumbnailEnabled ?? true);
+  const thumbSizesRef = React4.useRef(thumbnailSizes ?? [256, 512]);
+  const thumbFileIdsRef = React4.useRef(/* @__PURE__ */ new Set());
+  React4.useEffect(() => {
+    thumbEnabledRef.current = thumbEnabled;
+  }, [thumbEnabled]);
+  React4.useEffect(() => {
+    thumbSizesRef.current = thumbSizes;
+  }, [thumbSizes]);
+  React4.useEffect(() => {
+    thumbFileIdsRef.current = thumbFileIds;
+  }, [thumbFileIds]);
+  const pendingImages = React4.useMemo(
+    () => files.filter((f2) => f2.type.startsWith("image/") && f2.status === "pending"),
+    [files]
+  );
+  const thumbSelectedCount = React4.useMemo(
+    () => pendingImages.filter((f2) => thumbFileIds.has(f2.id)).length,
+    [pendingImages, thumbFileIds]
+  );
+  const handleThumbEnabledToggle = React4.useCallback(() => {
+    const newVal = !thumbEnabledRef.current;
+    thumbEnabledRef.current = newVal;
+    setThumbEnabled(newVal);
+    if (newVal) {
+      setFiles((prev) => {
+        const ids = prev.filter((f2) => f2.type.startsWith("image/") && f2.status === "pending").map((f2) => f2.id);
+        if (ids.length > 0) {
+          const next = new Set(thumbFileIdsRef.current);
+          ids.forEach((id) => next.add(id));
+          thumbFileIdsRef.current = next;
+          setThumbFileIds(next);
+        }
+        return prev;
+      });
+    }
+  }, []);
+  const toggleThumbSize = React4.useCallback((size) => {
+    setThumbSizes((prev) => {
+      const next = prev.includes(size) ? prev.filter((s) => s !== size) : [...prev, size].sort((a, b) => a - b);
+      thumbSizesRef.current = next;
+      return next;
     });
-    const limited = filtered.slice(0, Math.max(0, maxFiles - files.length));
+  }, []);
+  const toggleFileThumb = React4.useCallback((fileId) => {
+    setThumbFileIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(fileId)) next.delete(fileId);
+      else next.add(fileId);
+      thumbFileIdsRef.current = next;
+      return next;
+    });
+  }, []);
+  const selectAllThumbs = React4.useCallback(() => {
+    const ids = pendingImages.map((f2) => f2.id);
+    const next = new Set(thumbFileIdsRef.current);
+    ids.forEach((id) => next.add(id));
+    thumbFileIdsRef.current = next;
+    setThumbFileIds(next);
+  }, [pendingImages]);
+  const deselectAllThumbs = React4.useCallback(() => {
+    const pendingSet = new Set(pendingImages.map((f2) => f2.id));
+    const next = new Set([...thumbFileIdsRef.current].filter((id) => !pendingSet.has(id)));
+    thumbFileIdsRef.current = next;
+    setThumbFileIds(next);
+  }, [pendingImages]);
+  const addFiles = React4.useCallback((incoming) => {
+    setQuotaError(null);
+    const filtered = maxFileSize > 0 ? incoming.filter((f2) => f2.size <= maxFileSize) : incoming;
+    const limited = maxFiles > 0 ? filtered.slice(0, Math.max(0, maxFiles - files.length)) : filtered;
     const mapped = limited.map((f2) => ({
       id: Math.random().toString(36).slice(2),
       file: f2,
       name: f2.name,
       size: f2.size,
-      type: f2.type,
+      type: f2.type || "application/octet-stream",
       progress: 0,
       status: "pending"
     }));
     setFiles((prev) => [...prev, ...mapped]);
-  }, [files.length, maxFileSize, maxFiles]);
+    if (showThumbnailUI && thumbEnabledRef.current) {
+      const imageIds = mapped.filter((f2) => f2.type.startsWith("image/")).map((f2) => f2.id);
+      if (imageIds.length > 0) {
+        const next = new Set(thumbFileIdsRef.current);
+        imageIds.forEach((id) => next.add(id));
+        thumbFileIdsRef.current = next;
+        setThumbFileIds(next);
+      }
+    }
+  }, [files.length, maxFileSize, maxFiles, showThumbnailUI]);
+  const removeFile = React4.useCallback((fileId) => {
+    setFiles((prev) => prev.filter((f2) => f2.id !== fileId));
+    if (showThumbnailUI) {
+      const next = new Set(thumbFileIdsRef.current);
+      next.delete(fileId);
+      thumbFileIdsRef.current = next;
+      setThumbFileIds(next);
+    }
+  }, [showThumbnailUI]);
   const onInputChange = React4.useCallback((e) => {
     const fs = Array.from(e.target.files || []);
     addFiles(fs);
@@ -390,7 +525,7 @@ var Uploader = ({
       update({ status: "uploading", progress: 1 });
       const presign = await client.getPresignedUrl({
         fileName: item.name,
-        fileType: item.type,
+        fileType: item.type || "application/octet-stream",
         fileSize: item.size,
         projectId,
         folderPath
@@ -417,14 +552,17 @@ var Uploader = ({
         xhr.send(item.file);
       });
       let completionResult = null;
-      if (autoRecordToDb && projectId) {
+      const canRecordToDb = autoRecordToDb && (projectId || clientOptions?.projectName || clientOptions?.projectId || clientOptions?.apiKey);
+      if (canRecordToDb) {
         try {
           completionResult = await client.completeUpload({
             fileKey: presign.fileKey,
             originalName: item.name,
             size: item.size,
-            contentType: item.type,
-            projectId
+            contentType: item.type || "application/octet-stream",
+            projectId,
+            url: presign.publicUrl,
+            userId
           });
         } catch (e) {
           console.error("Failed to complete upload:", e);
@@ -448,39 +586,86 @@ var Uploader = ({
       }
       const finalFileKey = completionResult?.file?.key || presign.fileKey;
       const finalPublicUrl = completionResult?.file?.url || presign.publicUrl;
+      const fileThumbEnabled = showThumbnailUI && thumbEnabledRef.current && thumbFileIdsRef.current.has(item.id);
       const result = {
         ...item,
         status: "success",
         progress: 100,
-        fileKey: presign.fileKey,
-        publicUrl: presign.publicUrl,
+        fileKey: finalFileKey,
+        publicUrl: finalPublicUrl,
         projectId: presign.projectId,
         apiKeyId: presign.apiKeyId,
+        thumbnailEnabled: showThumbnailUI ? fileThumbEnabled : void 0,
+        thumbnailSizesSelected: showThumbnailUI ? fileThumbEnabled ? [...thumbSizesRef.current] : [] : void 0,
         // @ts-ignore - allow downstream to access thumbs if present
         thumbnails: thumbs,
         // @ts-ignore - allow downstream to access masterWebp if present
         masterWebp
       };
-      update({ status: "success", progress: 100, fileKey: presign.fileKey, publicUrl: presign.publicUrl });
+      update({ status: "success", progress: 100, fileKey: finalFileKey, publicUrl: finalPublicUrl });
       onClientUploadComplete?.(result);
       return result;
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Upload failed";
+      const message = err instanceof StorageQuotaError ? err.message : err instanceof Error ? err.message : "Upload failed";
       update({ status: "error", error: message });
       throw err;
     }
-  }, [client, projectId, folderPath, fetchThumbnails, autoRecordToDb, recordUrl, clientOptions, onUploadBegin, onUploadProgress, onClientUploadComplete]);
+  }, [client, projectId, userId, folderPath, fetchThumbnails, autoRecordToDb, recordUrl, clientOptions, onUploadBegin, onUploadProgress, onClientUploadComplete, showThumbnailUI]);
   const uploadAll = React4.useCallback(async () => {
     const targets = files.filter((f2) => f2.status === "pending");
     if (!targets.length) return;
+    setQuotaError(null);
     setIsUploading(true);
     try {
+      try {
+        const quota = await client.getQuota();
+        if (quota.limitBytes > 0) {
+          const totalPendingSize = targets.reduce((sum, f2) => sum + f2.size, 0);
+          const remaining = quota.limitBytes - quota.usedBytes;
+          if (totalPendingSize > remaining) {
+            const fmt = (n) => {
+              if (n >= 1024 * 1024 * 1024) return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+              if (n >= 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(2)} MB`;
+              if (n >= 1024) return `${(n / 1024).toFixed(2)} KB`;
+              return `${n} B`;
+            };
+            const errMsg = `Storage quota exceeded. Remaining: ${fmt(remaining)}, Upload size: ${fmt(totalPendingSize)}`;
+            setQuotaError(errMsg);
+            targets.forEach((t) => {
+              setFiles((prev) => prev.map((f2) => f2.id === t.id ? { ...f2, status: "error", error: errMsg } : f2));
+            });
+            onError?.(new StorageQuotaError(errMsg, {
+              limit: quota.limitBytes,
+              used: quota.usedBytes,
+              remaining,
+              fileSize: totalPendingSize
+            }));
+            return;
+          }
+        }
+      } catch (e) {
+        if (e instanceof StorageQuotaError) {
+          setQuotaError(e.message);
+          targets.forEach((t) => {
+            setFiles((prev) => prev.map((f2) => f2.id === t.id ? { ...f2, status: "error", error: e.message } : f2));
+          });
+          onError?.(e);
+          return;
+        }
+      }
       const results = [];
       for (const f2 of targets) {
         try {
           const done = await uploadOne(f2);
           results.push(done);
         } catch (e) {
+          if (e instanceof StorageQuotaError) {
+            setQuotaError(e.message);
+            setFiles((prev) => prev.map(
+              (file) => file.status === "pending" ? { ...file, status: "error", error: e.message } : file
+            ));
+            break;
+          }
         }
       }
       onComplete?.(results.filter((f2) => f2.status === "success"));
@@ -489,7 +674,7 @@ var Uploader = ({
     } finally {
       setIsUploading(false);
     }
-  }, [files, onComplete, onError, uploadOne]);
+  }, [files, client, onComplete, onError, uploadOne]);
   React4__namespace.default.useEffect(() => {
     if (autoUpload && files.some((f2) => f2.status === "pending") && !isUploading) {
       const timer = setTimeout(() => {
@@ -537,15 +722,32 @@ var Uploader = ({
           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"
+              !multiple ? "Single file" : maxFiles > 0 ? `Up to ${maxFiles} files` : "Multiple files",
+              maxFileSize > 0 ? ` \u2022 Max ${(maxFileSize / (1024 * 1024)).toFixed(0)}MB per file` : ""
             ] })
           ] })
         ]
       }
     ),
+    quotaError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-8 h-8 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center", 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", className: "text-red-600 dark:text-red-400", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-300", children: quotaError }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setQuotaError(null),
+          className: "text-red-400 hover:text-red-600 dark:hover:text-red-300 transition-colors",
+          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" })
+          ] })
+        }
+      )
+    ] }) }),
     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" }),
@@ -570,12 +772,76 @@ var Uploader = ({
             {
               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([]),
+              onClick: () => {
+                setFiles([]);
+                if (showThumbnailUI) {
+                  const empty = /* @__PURE__ */ new Set();
+                  thumbFileIdsRef.current = empty;
+                  setThumbFileIds(empty);
+                }
+              },
               children: "Clear"
             }
           )
         ] })
       ] }),
+      showThumbnailUI && pendingImages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-purple-50 dark:bg-purple-900/10 border border-purple-200 dark:border-purple-800/50 rounded-xl p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", 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", className: "text-purple-500", 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" })
+              ] }),
+              "Generate Thumbnails"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: thumbEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              thumbSelectedCount,
+              " of ",
+              pendingImages.length,
+              " image",
+              pendingImages.length !== 1 ? "s" : "",
+              " selected",
+              " \xB7 ",
+              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: selectAllThumbs, className: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300", children: "Select all" }),
+              " \xB7 ",
+              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: deselectAllThumbs, className: "text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300", children: "Deselect all" })
+            ] }) : "Disabled for all images" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleThumbEnabledToggle,
+              className: `relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none ${thumbEnabled ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"}`,
+              role: "switch",
+              "aria-checked": thumbEnabled,
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition ${thumbEnabled ? "translate-x-5" : "translate-x-0"}` })
+            }
+          )
+        ] }),
+        thumbEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-gray-600 dark:text-gray-400 mb-2", children: "Sizes:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 flex-wrap", children: THUMBNAIL_SIZE_OPTIONS.map((size) => {
+            const active = thumbSizes.includes(size);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleThumbSize(size),
+                className: `px-3 py-1 rounded-full text-xs font-medium border transition-colors ${active ? "bg-purple-600 border-purple-600 text-white" : "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-purple-400 hover:text-purple-600"}`,
+                children: [
+                  size,
+                  "px"
+                ]
+              },
+              size
+            );
+          }) }),
+          thumbSizes.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-amber-600 dark:text-amber-400 mt-2", children: "Select at least one size." })
+        ] })
+      ] }),
       /* @__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" }),
@@ -599,7 +865,19 @@ var Uploader = ({
               className: `h-full transition-all duration-300 ${f2.status === "success" ? "bg-green-500" : "bg-blue-500"}`,
               style: { width: `${f2.progress}%` }
             }
-          ) })
+          ) }),
+          showThumbnailUI && thumbEnabled && f2.type.startsWith("image/") && f2.status === "pending" && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mt-1.5 inline-flex items-center gap-1.5 cursor-pointer select-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: thumbFileIds.has(f2.id),
+                onChange: () => toggleFileThumb(f2.id),
+                className: "w-3.5 h-3.5 rounded accent-purple-600 cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Generate thumbnail" })
+          ] })
         ] }),
         /* @__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: [
@@ -633,7 +911,7 @@ var Uploader = ({
             {
               onClick: (e) => {
                 e.stopPropagation();
-                setFiles((prev) => prev.filter((file) => file.id !== f2.id));
+                removeFile(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",
@@ -717,10 +995,18 @@ var ProjectFilesWidget = ({
           "content-type": "application/json",
           ...clientOptions?.headers || {}
         };
-        if (clientOptions?.apiKey) {
+        const token = clientOptions?.getToken?.();
+        if (token) {
+          headers["authorization"] = `Bearer ${token}`;
+          if (clientOptions.projectName) {
+            headers["x-project-name"] = clientOptions.projectName;
+          } else if (clientOptions.projectId) {
+            headers["x-project-id"] = clientOptions.projectId;
+          }
+        } else if (clientOptions?.apiKey) {
           const keyHeader = clientOptions.apiKeyHeader || "authorization";
           if (keyHeader === "authorization") {
-            headers["authorization"] = clientOptions.apiKey.startsWith("upk_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
+            headers["authorization"] = clientOptions.apiKey.startsWith("upf_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
           } else {
             headers[keyHeader] = clientOptions.apiKey;
           }
@@ -841,6 +1127,19 @@ var ProjectFilesWidget = ({
 
 // src/projectConnect.ts
 var f = (globalThis.fetch || fetch).bind(globalThis);
+function buildInit(opts, extra) {
+  const headers = {
+    ...extra?.headers || {}
+  };
+  if (opts.token) {
+    headers["authorization"] = `Bearer ${opts.token}`;
+  }
+  return {
+    ...extra,
+    headers,
+    credentials: opts.token ? "same-origin" : "include"
+  };
+}
 async function httpJson(input, init, useFetch) {
   const doFetch = useFetch ?? f;
   const res = await doFetch(input, init);
@@ -848,7 +1147,7 @@ async function httpJson(input, init, useFetch) {
     let msg = `Request failed (${res.status})`;
     try {
       const j = await res.json();
-      msg = j?.error || msg;
+      msg = j?.error || j?.message || msg;
     } catch {
     }
     throw new Error(msg);
@@ -859,7 +1158,7 @@ async function listProjects(opts) {
   const url = `${opts.baseUrl.replace(/\/$/, "")}/api/projects`;
   const data = await httpJson(
     url,
-    { method: "GET", credentials: "include" },
+    buildInit(opts, { method: "GET" }),
     opts.fetch
   );
   return data?.projects ?? [];
@@ -868,53 +1167,74 @@ async function createProject(opts) {
   const base = opts.baseUrl.replace(/\/$/, "");
   const created = await httpJson(
     `${base}/api/projects`,
-    {
+    buildInit(opts, {
       method: "POST",
-      credentials: "include",
       headers: { "content-type": "application/json" },
-      body: JSON.stringify({ name: opts.name })
-    },
+      body: JSON.stringify({
+        name: opts.name,
+        isInHouse: opts.isInHouse,
+        freeStorageLimitBytes: opts.freeStorageLimitBytes
+      })
+    }),
     opts.fetch
   );
   const projectId = created?.project?.id;
   if (!projectId) throw new Error("Failed to create project");
+  return { projectId, project: created?.project };
+}
+async function createProjectWithApiKey(opts) {
+  const base = opts.baseUrl.replace(/\/$/, "");
+  const { projectId } = await createProject(opts);
   const keyLabel = opts.keyName || `Plugin key ${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
   const key = await httpJson(
     `${base}/api/projects/${projectId}/keys`,
-    {
+    buildInit(opts, {
       method: "POST",
-      credentials: "include",
       headers: { "content-type": "application/json" },
       body: JSON.stringify({ name: keyLabel })
-    },
+    }),
     opts.fetch
   );
-  const plaintext = key?.key?.plaintext;
+  const plaintext = key?.key?.secret ?? key?.key?.plaintext;
   if (!plaintext) throw new Error("Failed to create API key");
   return { apiKey: plaintext, projectId };
 }
+async function updateProject(opts) {
+  const base = opts.baseUrl.replace(/\/$/, "");
+  const body = {};
+  if (opts.isInHouse !== void 0) body.isInHouse = opts.isInHouse;
+  if (opts.freeStorageLimitBytes !== void 0) body.freeStorageLimitBytes = opts.freeStorageLimitBytes;
+  await httpJson(
+    `${base}/api/projects/${opts.projectId}`,
+    buildInit(opts, {
+      method: "PUT",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(body)
+    }),
+    opts.fetch
+  );
+}
 async function connectProject(opts) {
   const base = opts.baseUrl.replace(/\/$/, "");
   const keyLabel = opts.keyName || `Plugin key ${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
   const key = await httpJson(
     `${base}/api/projects/${opts.projectId}/keys`,
-    {
+    buildInit(opts, {
       method: "POST",
-      credentials: "include",
       headers: { "content-type": "application/json" },
       body: JSON.stringify({ name: keyLabel })
-    },
+    }),
     opts.fetch
   );
-  const plaintext = key?.key?.plaintext;
+  const plaintext = key?.key?.secret ?? key?.key?.plaintext;
   if (!plaintext) throw new Error("Failed to create API key");
   return { apiKey: plaintext };
 }
 function addApiKeyManually(apiKey) {
   const k = (apiKey || "").trim();
   if (!k) throw new Error("API key is required");
-  if (!/^upk_[A-Za-z0-9]+/.test(k)) {
-    console.warn("Provided API key does not match expected format upk_*");
+  if (!/^upf_[A-Za-z0-9_-]+/.test(k)) {
+    console.warn("Provided API key does not match expected format upf_*");
   }
   return { apiKey: k };
 }
@@ -998,7 +1318,7 @@ function ConnectProjectDialog(props) {
       setLoading(true);
       setError(null);
       if (!newProjectName.trim()) throw new Error("Project name is required");
-      const { apiKey, projectId } = await createProject({ baseUrl, name: newProjectName.trim(), fetch: fetchImpl });
+      const { apiKey, projectId } = await createProjectWithApiKey({ baseUrl, name: newProjectName.trim(), fetch: fetchImpl });
       onConnected(apiKey, { projectId, source: "new" });
       onOpenChange(false);
       resetState();
@@ -1221,6 +1541,23 @@ var IconLayers = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xml
   /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 17 12 22 22 17" }),
   /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 12 12 17 22 12" })
 ] });
+var VisuallyHidden = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    style: {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0, 0, 0, 0)",
+      whiteSpace: "nowrap",
+      border: "0"
+    },
+    children
+  }
+);
 function ImageManager(props) {
   const {
     open,
@@ -1228,6 +1565,7 @@ function ImageManager(props) {
     clientOptions,
     projectId,
     folderPath,
+    userId,
     title,
     description,
     className,
@@ -1241,7 +1579,9 @@ function ImageManager(props) {
     maxFiles = 10,
     mode = "full",
     showDelete = true,
-    refreshInterval = 5e3
+    refreshInterval = 5e3,
+    stayOnUploadAfterComplete = false,
+    thumbnailConfig
   } = props;
   const [activeView, setActiveView] = React4__namespace.useState(mode === "upload" ? "upload" : "browse");
   const [loading, setLoading] = React4__namespace.useState(false);
@@ -1259,6 +1599,7 @@ function ImageManager(props) {
   const [thumbnailSelectorFile, setThumbnailSelectorFile] = React4__namespace.useState(null);
   const [selectedThumbnailForFile, setSelectedThumbnailForFile] = React4__namespace.useState(null);
   const [previewFile, setPreviewFile] = React4__namespace.useState(null);
+  const [generatingThumbnails, setGeneratingThumbnails] = React4__namespace.useState(false);
   const lastUpdatedRef = React4__namespace.useRef(null);
   const isFetchingRef = React4__namespace.useRef(false);
   const deduplicateFiles = React4__namespace.useCallback((files2) => {
@@ -1281,10 +1622,11 @@ function ImageManager(props) {
       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 }),
+        fetchProjectFiles(clientOptions, effectiveFolderPath),
         client.getFolders(currentFolderId)
       ]);
-      const { items: list, updatedAt } = filesData;
+      const { files: rawFiles, updatedAt } = filesData;
+      const list = rawFiles;
       if (isPolling && updatedAt && updatedAt === lastUpdatedRef.current) {
       }
       setFiles(deduplicateFiles(list));
@@ -1310,30 +1652,6 @@ function ImageManager(props) {
       load();
     }
   }, [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 {
-        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]);
-          });
-        } else if (payload.type === "file:deleted") {
-          const deletedKey = payload.data.fileKey || payload.data.file?.key;
-          setFiles((prev) => prev.filter((f2) => f2.key !== deletedKey));
-        }
-      } catch (e) {
-        console.error("SSE Error parsing message", e);
-      }
-    };
-    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));
@@ -1357,10 +1675,18 @@ function ImageManager(props) {
           "content-type": "application/json",
           ...clientOptions?.headers || {}
         };
-        if (clientOptions?.apiKey) {
+        const token = clientOptions?.getToken?.();
+        if (token) {
+          headers["authorization"] = `Bearer ${token}`;
+          if (clientOptions.projectName) {
+            headers["x-project-name"] = clientOptions.projectName;
+          } else if (clientOptions.projectId) {
+            headers["x-project-id"] = clientOptions.projectId;
+          }
+        } else if (clientOptions?.apiKey) {
           const keyHeader = clientOptions.apiKeyHeader || "authorization";
           if (keyHeader === "authorization") {
-            headers["authorization"] = clientOptions.apiKey.startsWith("upk_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
+            headers["authorization"] = clientOptions.apiKey.startsWith("upf_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
           } else {
             headers[keyHeader] = clientOptions.apiKey;
           }
@@ -1420,35 +1746,40 @@ function ImageManager(props) {
     });
     return options;
   }, [breadcrumbs, currentFolderId, folders]);
+  const handleThumbnailClick = React4__namespace.useCallback(async (f2) => {
+    if (f2.thumbnails && f2.thumbnails.length > 0) {
+      setThumbnailSelectorFile(f2);
+      setSelectedThumbnailForFile(null);
+      return;
+    }
+    setGeneratingThumbnails(true);
+    setThumbnailSelectorFile(f2);
+    setSelectedThumbnailForFile(null);
+    try {
+      const client = new UpfilesClient(clientOptions);
+      const result = await client.generateThumbnails(f2.key);
+      const updatedFile = { ...f2, thumbnails: result.thumbnails };
+      setThumbnailSelectorFile(updatedFile);
+      setFiles((prev) => prev.map((file) => file.key === f2.key ? updatedFile : file));
+    } catch (e) {
+      console.error("Failed to generate thumbnails:", e);
+    } finally {
+      setGeneratingThumbnails(false);
+    }
+  }, [clientOptions]);
   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.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/60 z-[9999]" }),
       /* @__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 ?? ""}`,
+          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-[10000] overflow-hidden flex flex-row ${className ?? ""}`,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              Dialog2__namespace.Title,
-              {
-                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__ */ jsxRuntime.jsx(VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { children: title ?? "Media Library" }) }),
             /* @__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: [
@@ -1555,16 +1886,27 @@ function ImageManager(props) {
                       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;
+                      const displayUrl = f2.url;
+                      const hasThumbnails = f2.thumbnails && f2.thumbnails.length > 0;
                       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("img", { src: displayUrl, alt: f2.originalName, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" }),
+                            f2.contentType?.startsWith("image/") && /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  handleThumbnailClick(f2);
+                                },
+                                className: `absolute top-2 left-2 p-1.5 text-white rounded-md opacity-0 group-hover:opacity-100 transition-opacity shadow-lg ${hasThumbnails ? "bg-purple-600/90 hover:bg-purple-500" : "bg-gray-600/90 hover:bg-purple-500"}`,
+                                title: hasThumbnails ? "View Thumbnails" : "Generate Thumbnails",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(IconLayers, { className: "w-4 h-4" })
+                              }
+                            ),
                             /* @__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",
@@ -1585,19 +1927,6 @@ function ImageManager(props) {
                                   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",
                                 {
@@ -1623,7 +1952,7 @@ function ImageManager(props) {
                     /* @__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: [
+                activeView === "upload" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full flex flex-col items-center justify-center max-w-2xl mx-auto gap-4", 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"
@@ -1648,15 +1977,28 @@ function ImageManager(props) {
                     {
                       clientOptions,
                       projectId,
+                      userId,
                       folderPath: uploadFoldersList.find((o) => o.id === selectedUploadFolder)?.path || activeBreadcrumbPath || folderPath,
                       accept: ["image/*"],
                       maxFileSize,
                       maxFiles,
                       autoRecordToDb,
-                      fetchThumbnails,
-                      autoUpload: true,
-                      onClientUploadComplete: (file) => {
+                      fetchThumbnails: false,
+                      autoUpload: false,
+                      thumbnailEnabled: thumbnailConfig?.enabled ?? true,
+                      thumbnailSizes: thumbnailConfig?.sizes,
+                      onClientUploadComplete: async (file) => {
                         if (file.status === "success" && file.publicUrl && file.fileKey) {
+                          let thumbnails = file.thumbnails;
+                          if (file.thumbnailEnabled && file.thumbnailSizesSelected && file.thumbnailSizesSelected.length > 0 && file.type?.startsWith("image/")) {
+                            try {
+                              const client = new UpfilesClient(clientOptions);
+                              const result = await client.generateThumbnails(file.fileKey, file.thumbnailSizesSelected);
+                              thumbnails = result.thumbnails;
+                            } catch (e) {
+                              console.warn("Failed to generate thumbnails:", e);
+                            }
+                          }
                           const newItem = {
                             key: file.fileKey,
                             originalName: file.name,
@@ -1664,7 +2006,7 @@ function ImageManager(props) {
                             contentType: file.type,
                             uploadedAt: (/* @__PURE__ */ new Date()).toISOString(),
                             url: file.publicUrl,
-                            thumbnails: file.thumbnails
+                            thumbnails
                           };
                           setFiles((prev) => {
                             if (prev.find((f2) => f2.key === newItem.key)) return prev;
@@ -1673,11 +2015,13 @@ function ImageManager(props) {
                         }
                       },
                       onComplete: () => {
-                        if (mode === "full") {
+                        if (mode === "full" && !stayOnUploadAfterComplete) {
                           setTimeout(() => {
                             setActiveView("browse");
                             load();
                           }, 1e3);
+                        } else {
+                          load();
                         }
                       },
                       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",
@@ -1703,8 +2047,8 @@ function ImageManager(props) {
       )
     ] }),
     /* @__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.Overlay, { className: "fixed inset-0 bg-black/40 z-[10010]" }),
+      /* @__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-[10011] 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(
@@ -1733,8 +2077,8 @@ function ImageManager(props) {
       ] })
     ] }) }),
     /* @__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.Overlay, { className: "fixed inset-0 bg-black/40 z-[10020]" }),
+      /* @__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-[10021]", "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 ",
@@ -1767,8 +2111,8 @@ function ImageManager(props) {
       ] })
     ] }) }),
     /* @__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.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/50 z-[10030]" }),
+      /* @__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-[10031] 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: [
@@ -1780,60 +2124,66 @@ function ImageManager(props) {
             ] })
           ] })
         ] }),
-        /* @__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",
-            {
-              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.jsxs("div", { className: "p-6 overflow-y-auto max-h-[60vh]", children: [
+          generatingThumbnails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 py-8 text-gray-500", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconLoader, { className: "w-5 h-5 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Generating thumbnails..." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 ${generatingThumbnails ? "opacity-50 pointer-events-none" : ""}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                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.jsx("div", { className: "text-xs text-gray-500", children: thumbnail.sizeType || "Thumbnail" })
-                ] })
-              ]
-            },
-            thumbnail.id
-          ))
-        ] }) }),
+                  /* @__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",
@@ -1872,8 +2222,8 @@ function ImageManager(props) {
       ] })
     ] }) }),
     /* @__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(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/90 z-[10040]", 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-[10041] 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 }),
@@ -1945,14 +2295,15 @@ function ImageManager(props) {
               children: "Open in New Tab"
             }
           ),
-          previewFile?.thumbnails && previewFile.thumbnails.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+          previewFile?.contentType?.startsWith("image/") && /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
               onClick: (e) => {
                 e.stopPropagation();
-                setThumbnailSelectorFile(previewFile);
-                setSelectedThumbnailForFile(null);
-                setPreviewFile(null);
+                if (previewFile) {
+                  handleThumbnailClick(previewFile);
+                  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: [
@@ -1966,10 +2317,142 @@ function ImageManager(props) {
     ] }) })
   ] });
 }
+function useUpfilesInhouse(config) {
+  const {
+    baseUrl,
+    getToken,
+    userId,
+    projectName = "default",
+    enabled = true
+  } = config;
+  const [state, setState] = React4.useState({ clientOptions: null, projectId: null, loading: false, error: null });
+  const [retryCount, setRetryCount] = React4.useState(0);
+  const [token, setToken] = React4.useState(
+    typeof getToken === "string" ? getToken : null
+  );
+  const getTokenFn = React4.useCallback(() => {
+    return typeof getToken === "function" ? getToken() : getToken;
+  }, [getToken]);
+  React4.useEffect(() => {
+    let cancelled = false;
+    async function resolveToken() {
+      const next = await getTokenFn();
+      if (!cancelled) {
+        setToken(next ?? null);
+      }
+    }
+    resolveToken();
+    window.addEventListener("focus", resolveToken);
+    window.addEventListener("storage", resolveToken);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("focus", resolveToken);
+      window.removeEventListener("storage", resolveToken);
+    };
+  }, [getTokenFn]);
+  const mountedRef = React4.useRef(true);
+  React4.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const buildClientOptions = React4.useCallback(
+    () => ({
+      baseUrl,
+      getToken: getTokenFn,
+      projectName
+    }),
+    [baseUrl, getTokenFn, projectName]
+  );
+  React4.useEffect(() => {
+    if (!enabled || !token || !userId) {
+      setState({ clientOptions: null, projectId: null, loading: false, error: null });
+      return;
+    }
+    let cancelled = false;
+    async function provision() {
+      if (!mountedRef.current) return;
+      setState((prev) => ({ ...prev, loading: true, error: null }));
+      try {
+        const connectOpts = { baseUrl, token };
+        const projects = await listProjects(connectOpts);
+        if (cancelled || !mountedRef.current) return;
+        const existing = projects.find((p) => p.name === projectName);
+        if (existing) {
+          await updateProject({
+            ...connectOpts,
+            projectId: existing.id,
+            isInHouse: true,
+            freeStorageLimitBytes: 2147483648
+            // 2GB
+          });
+        } else {
+          try {
+            await createProject({
+              ...connectOpts,
+              name: projectName,
+              isInHouse: true,
+              freeStorageLimitBytes: 2147483648
+              // 2GB in bytes
+            });
+          } catch (err) {
+            if (err?.message?.includes("409") || err?.message?.includes("duplicate") || err?.message?.includes("already exists")) {
+              const retryProjects = await listProjects(connectOpts);
+              const found = retryProjects.find((p) => p.name === projectName);
+              if (!found) throw err;
+              await updateProject({
+                ...connectOpts,
+                projectId: found.id,
+                isInHouse: true,
+                freeStorageLimitBytes: 2147483648
+                // 2GB
+              });
+            } else {
+              throw err;
+            }
+          }
+        }
+        if (cancelled || !mountedRef.current) return;
+        setState({
+          clientOptions: buildClientOptions(),
+          projectId: null,
+          loading: false,
+          error: null
+        });
+      } catch (err) {
+        if (cancelled || !mountedRef.current) return;
+        setState({
+          clientOptions: null,
+          projectId: null,
+          loading: false,
+          error: err?.message || "Failed to auto-connect upfiles"
+        });
+      }
+    }
+    provision();
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, token, userId, baseUrl, projectName, retryCount, buildClientOptions]);
+  const retry = React4.useCallback(() => {
+    setRetryCount((c) => c + 1);
+  }, []);
+  const clearCache = React4.useCallback(() => {
+    setState({ clientOptions: null, projectId: null, loading: false, error: null });
+  }, []);
+  return {
+    ...state,
+    isReady: !!state.clientOptions,
+    retry,
+    clearCache
+  };
+}
 
 exports.ConnectProjectDialog = ConnectProjectDialog;
 exports.ImageManager = ImageManager;
 exports.ProjectFilesWidget = ProjectFilesWidget;
+exports.StorageQuotaError = StorageQuotaError;
 exports.UpfilesClient = UpfilesClient;
 exports.Uploader = Uploader;
 exports.addApiKeyManually = addApiKeyManually;
@@ -1977,9 +2460,12 @@ exports.connectProject = connectProject;
 exports.connectUsingApiKey = connectUsingApiKey;
 exports.createClientWithKey = createClientWithKey;
 exports.createProject = createProject;
+exports.createProjectWithApiKey = createProjectWithApiKey;
 exports.fetchFileThumbnails = fetchFileThumbnails;
 exports.fetchProjectFiles = fetchProjectFiles;
 exports.fetchProjectImagesWithThumbs = fetchProjectImagesWithThumbs;
 exports.listProjects = listProjects;
+exports.updateProject = updateProject;
+exports.useUpfilesInhouse = useUpfilesInhouse;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map