@thetechfossil/upfiles 1.0.11 → 1.0.13

package/dist/index.mjs

@@ -1,36 +1,89 @@
+import * as React4 from 'react';
+import React4__default, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as Dialog2 from '@radix-ui/react-dialog';
+
 // 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(/\/$/, "");
-    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;
+    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,
@@ -41,8 +94,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);
     }
@@ -78,7 +135,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}`);
@@ -107,22 +168,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";
@@ -138,16 +193,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";
@@ -161,26 +207,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";
@@ -194,19 +233,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";
@@ -224,17 +297,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,
@@ -258,16 +322,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";
@@ -285,29 +340,21 @@ var UpfilesClient = class {
     };
   }
   getEventsUrl(projectId) {
-    const basePath = this.thumbnailsPath.replace(/\/thumbnails$/, "");
-    const eventsPath = `${basePath}/events`;
     const target = this.baseUrl ? `${this.baseUrl}/api/events` : "/api/events";
     const url = new URL(target, window.location.href);
-    if (this.apiKey) {
-      url.searchParams.set("apiKey", this.apiKey);
-    }
-    if (projectId) {
-      url.searchParams.set("projectId", projectId);
+    if (!this.getToken && !this.apiKey && (projectId || this.projectId)) {
+      url.searchParams.set("projectId", projectId || this.projectId);
     }
     return url.toString();
   }
 };
-
-// src/Uploader.tsx
-import React, { useCallback, useMemo, useRef, useState } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
+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,
@@ -318,36 +365,124 @@ var Uploader = ({
   dropzoneClassName,
   children,
   projectId,
+  userId,
   folderPath,
   fetchThumbnails,
   autoRecordToDb = true,
   recordUrl = "/api/files",
-  autoUpload = false
+  autoUpload = false,
+  thumbnailEnabled,
+  thumbnailSizes
 }) => {
   const inputRef = useRef(null);
   const client = useMemo(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
   const [files, setFiles] = useState([]);
   const [isUploading, setIsUploading] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
-  const addFiles = useCallback((incoming) => {
-    const filtered = incoming.filter((f2) => {
-      if (f2.size > maxFileSize) {
-        return false;
-      }
-      return true;
+  const [quotaError, setQuotaError] = useState(null);
+  const showThumbnailUI = thumbnailEnabled !== void 0;
+  const [thumbEnabled, setThumbEnabled] = useState(thumbnailEnabled ?? true);
+  const [thumbSizes, setThumbSizes] = useState(thumbnailSizes ?? [256, 512]);
+  const [thumbFileIds, setThumbFileIds] = useState(/* @__PURE__ */ new Set());
+  const thumbEnabledRef = useRef(thumbnailEnabled ?? true);
+  const thumbSizesRef = useRef(thumbnailSizes ?? [256, 512]);
+  const thumbFileIdsRef = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    thumbEnabledRef.current = thumbEnabled;
+  }, [thumbEnabled]);
+  useEffect(() => {
+    thumbSizesRef.current = thumbSizes;
+  }, [thumbSizes]);
+  useEffect(() => {
+    thumbFileIdsRef.current = thumbFileIds;
+  }, [thumbFileIds]);
+  const pendingImages = useMemo(
+    () => files.filter((f2) => f2.type.startsWith("image/") && f2.status === "pending"),
+    [files]
+  );
+  const thumbSelectedCount = useMemo(
+    () => pendingImages.filter((f2) => thumbFileIds.has(f2.id)).length,
+    [pendingImages, thumbFileIds]
+  );
+  const handleThumbEnabledToggle = 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 = 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 toggleFileThumb = 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 limited = filtered.slice(0, Math.max(0, maxFiles - files.length));
+  }, []);
+  const selectAllThumbs = 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 = 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 = 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 = 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 = useCallback((e) => {
     const fs = Array.from(e.target.files || []);
     addFiles(fs);
@@ -368,7 +503,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
@@ -395,14 +530,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);
@@ -426,39 +564,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 = 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"));
@@ -467,8 +652,8 @@ var Uploader = ({
     } finally {
       setIsUploading(false);
     }
-  }, [files, onComplete, onError, uploadOne]);
-  React.useEffect(() => {
+  }, [files, client, onComplete, onError, uploadOne]);
+  React4__default.useEffect(() => {
     if (autoUpload && files.some((f2) => f2.status === "pending") && !isUploading) {
       const timer = setTimeout(() => {
         uploadAll();
@@ -515,15 +700,32 @@ var Uploader = ({
           children ?? /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
             /* @__PURE__ */ jsx("div", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Drop files here or click to browse" }),
             /* @__PURE__ */ jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: [
-              multiple ? `Up to ${maxFiles} files` : "Single file",
-              " \u2022 Max ",
-              (maxFileSize / (1024 * 1024)).toFixed(0),
-              "MB"
+              !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__ */ 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__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ 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__ */ 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__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ] }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-300", children: quotaError }) }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setQuotaError(null),
+          className: "text-red-400 hover:text-red-600 dark:hover:text-red-300 transition-colors",
+          children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ] })
+        }
+      )
+    ] }) }),
     files.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-8 space-y-4", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 dark:border-gray-800 pb-4", children: [
         /* @__PURE__ */ jsx("h4", { className: "font-semibold text-gray-900 dark:text-gray-100", children: "Selected Files" }),
@@ -548,12 +750,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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs("p", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-purple-500", children: [
+                /* @__PURE__ */ jsx("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+                /* @__PURE__ */ jsx("polyline", { points: "2 17 12 22 22 17" }),
+                /* @__PURE__ */ jsx("polyline", { points: "2 12 12 17 22 12" })
+              ] }),
+              "Generate Thumbnails"
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: thumbEnabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              thumbSelectedCount,
+              " of ",
+              pendingImages.length,
+              " image",
+              pendingImages.length !== 1 ? "s" : "",
+              " selected",
+              " \xB7 ",
+              /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-gray-600 dark:text-gray-400 mb-2", children: "Sizes:" }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-2 flex-wrap", children: THUMBNAIL_SIZE_OPTIONS.map((size) => {
+            const active = thumbSizes.includes(size);
+            return /* @__PURE__ */ 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__ */ jsx("p", { className: "text-xs text-amber-600 dark:text-amber-400 mt-2", children: "Select at least one size." })
+        ] })
+      ] }),
       /* @__PURE__ */ jsx("div", { className: "grid gap-3", children: files.map((f2) => /* @__PURE__ */ jsx("div", { className: "group relative bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-xl p-4 transition-all hover:shadow-md", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
         /* @__PURE__ */ jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-50 dark:bg-gray-800 flex items-center justify-center flex-shrink-0", children: f2.type.startsWith("image/") ? /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-indigo-500", children: [
           /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
@@ -577,7 +843,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__ */ jsxs("label", { className: "mt-1.5 inline-flex items-center gap-1.5 cursor-pointer select-none", children: [
+            /* @__PURE__ */ 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__ */ jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Generate thumbnail" })
+          ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex-shrink-0 ml-4", children: [
           f2.status === "success" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
@@ -611,7 +889,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",
@@ -626,10 +904,6 @@ var Uploader = ({
     ] })
   ] });
 };
-
-// src/ProjectFilesWidget.tsx
-import React2, { useEffect, useMemo as useMemo2, useState as useState2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var ProjectFilesWidget = ({
   clientOptions,
   folderPath,
@@ -645,16 +919,16 @@ var ProjectFilesWidget = ({
   showDelete = false,
   refreshInterval = 5e3
 }) => {
-  const client = useMemo2(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
-  const [files, setFiles] = useState2([]);
-  const [loading, setLoading] = useState2(false);
-  const [error, setError] = useState2(null);
-  const [query, setQuery] = useState2("");
-  const [savingKey, setSavingKey] = useState2(null);
-  const [deletingKey, setDeletingKey] = useState2(null);
-  const lastUpdatedRef = React2.useRef(null);
-  const isFetchingRef = React2.useRef(false);
-  const fetchFiles = React2.useCallback(async (isPolling = false) => {
+  const client = useMemo(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
+  const [files, setFiles] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [query, setQuery] = useState("");
+  const [savingKey, setSavingKey] = useState(null);
+  const [deletingKey, setDeletingKey] = useState(null);
+  const lastUpdatedRef = React4__default.useRef(null);
+  const isFetchingRef = React4__default.useRef(false);
+  const fetchFiles = React4__default.useCallback(async (isPolling = false) => {
     if (isFetchingRef.current) return;
     isFetchingRef.current = true;
     if (!isPolling) setLoading(true);
@@ -699,10 +973,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;
           }
@@ -722,9 +1004,9 @@ var ProjectFilesWidget = ({
       setDeletingKey(null);
     }
   };
-  return /* @__PURE__ */ jsxs2("div", { className, children: [
-    /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
-      /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsx(
         "input",
         {
           type: "text",
@@ -734,7 +1016,7 @@ var ProjectFilesWidget = ({
           style: { flex: 1, padding: 8, border: "1px solid #e5e7eb", borderRadius: 6 }
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx(
         "button",
         {
           onClick: () => {
@@ -746,26 +1028,26 @@ var ProjectFilesWidget = ({
         }
       )
     ] }),
-    loading && /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, color: "#666" }, children: "Loading files\u2026" }),
-    error && /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, color: "#b91c1c" }, children: error }),
-    !loading && !error && /* @__PURE__ */ jsxs2("ul", { className: listClassName, style: { listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }, children: [
-      visible.map((f2) => /* @__PURE__ */ jsxs2(
+    loading && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#666" }, children: "Loading files\u2026" }),
+    error && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#b91c1c" }, children: error }),
+    !loading && !error && /* @__PURE__ */ jsxs("ul", { className: listClassName, style: { listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }, children: [
+      visible.map((f2) => /* @__PURE__ */ jsxs(
         "li",
         {
           className: itemClassName,
           style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 10, display: "flex", justifyContent: "space-between", alignItems: "center" },
           children: [
-            /* @__PURE__ */ jsxs2("div", { style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx2("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.originalName }),
-              /* @__PURE__ */ jsxs2("div", { style: { fontSize: 12, color: "#666" }, children: [
+            /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.originalName }),
+              /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#666" }, children: [
                 (f2.size / (1024 * 1024)).toFixed(2),
                 " MB \u2022 ",
                 f2.contentType
               ] })
             ] }),
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx2("a", { href: f2.url, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" }),
-              /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ jsx("a", { href: f2.url, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" }),
+              /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: async () => {
@@ -802,7 +1084,7 @@ var ProjectFilesWidget = ({
                   children: savingKey === f2.key ? "Saving\u2026" : "Use"
                 }
               ),
-              showDelete && /* @__PURE__ */ jsx2(
+              showDelete && /* @__PURE__ */ jsx(
                 "button",
                 {
                   onClick: () => handleDelete(f2.key),
@@ -816,17 +1098,26 @@ var ProjectFilesWidget = ({
         },
         f2.key
       )),
-      visible.length === 0 && /* @__PURE__ */ jsx2("li", { style: { fontSize: 12, color: "#666" }, children: "No files found" })
+      visible.length === 0 && /* @__PURE__ */ jsx("li", { style: { fontSize: 12, color: "#666" }, children: "No files found" })
     ] })
   ] });
 };
 
-// src/ConnectProjectDialog.tsx
-import * as React3 from "react";
-import * as Dialog from "@radix-ui/react-dialog";
-
 // 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);
@@ -834,7 +1125,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);
@@ -845,7 +1136,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 ?? [];
@@ -854,53 +1145,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 };
 }
@@ -914,19 +1226,16 @@ function connectUsingApiKey(opts) {
   const client = new UpfilesClient({ baseUrl, apiKey, apiKeyHeader: opts.apiKeyHeader ?? "authorization" });
   return { apiKey, client };
 }
-
-// src/ConnectProjectDialog.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "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.useState("existing");
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [projects, setProjects] = React4.useState([]);
+  const [selectedProjectId, setSelectedProjectId] = React4.useState("");
+  const [manualKey, setManualKey] = React4.useState("");
+  const [newProjectName, setNewProjectName] = React4.useState("");
+  const resetState = React4.useCallback(() => {
     setMode("existing");
     setLoading(false);
     setError(null);
@@ -935,7 +1244,7 @@ function ConnectProjectDialog(props) {
     setManualKey("");
     setNewProjectName("");
   }, []);
-  React3.useEffect(() => {
+  React4.useEffect(() => {
     const run = async () => {
       if (!open || mode !== "existing") return;
       try {
@@ -987,7 +1296,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();
@@ -997,8 +1306,8 @@ function ConnectProjectDialog(props) {
       setLoading(false);
     }
   };
-  const ModeSwitcher = /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-3 gap-2", children: [
-    /* @__PURE__ */ jsx3(
+  const ModeSwitcher = /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+    /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1007,7 +1316,7 @@ function ConnectProjectDialog(props) {
         children: "Connect existing"
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1016,7 +1325,7 @@ function ConnectProjectDialog(props) {
         children: "Add API key"
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -1026,19 +1335,19 @@ function ConnectProjectDialog(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ jsx3(Dialog.Root, { open, onOpenChange: (o) => {
+  return /* @__PURE__ */ jsx(Dialog2.Root, { open, onOpenChange: (o) => {
     if (!o) resetState();
     onOpenChange(o);
-  }, children: /* @__PURE__ */ jsxs3(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx3(Dialog.Overlay, { className: "fixed inset-0 bg-black/40" }),
-    /* @__PURE__ */ jsx3(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__ */ jsxs3("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ jsx3(Dialog.Title, { className: "text-lg font-semibold", children: title ?? "Connect to Upfiles" }),
-      /* @__PURE__ */ jsx3(Dialog.Description, { className: "text-sm text-muted-foreground", children: description ?? "Choose how to connect your project to retrieve an API key." }),
+  }, children: /* @__PURE__ */ jsxs(Dialog2.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40" }),
+    /* @__PURE__ */ jsx(Dialog2.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__ */ jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx(Dialog2.Title, { className: "text-lg font-semibold", children: title ?? "Connect to Upfiles" }),
+      /* @__PURE__ */ jsx(Dialog2.Description, { className: "text-sm text-muted-foreground", children: description ?? "Choose how to connect your project to retrieve an API key." }),
       ModeSwitcher,
-      error && /* @__PURE__ */ jsx3("div", { className: "rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
-      mode === "existing" && /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx3("label", { className: "text-sm font-medium", children: "Project" }),
-        /* @__PURE__ */ jsxs3(
+      error && /* @__PURE__ */ 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__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Project" }),
+        /* @__PURE__ */ jsxs(
           "select",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -1046,14 +1355,14 @@ function ConnectProjectDialog(props) {
             onChange: (e) => setSelectedProjectId(e.target.value),
             disabled: loading,
             children: [
-              projects.length === 0 && /* @__PURE__ */ jsx3("option", { value: "", children: loading ? "Loading..." : "No projects found" }),
-              projects.map((p) => /* @__PURE__ */ jsx3("option", { value: p.id, children: p.name }, p.id))
+              projects.length === 0 && /* @__PURE__ */ jsx("option", { value: "", children: loading ? "Loading..." : "No projects found" }),
+              projects.map((p) => /* @__PURE__ */ jsx("option", { value: p.id, children: p.name }, p.id))
             ]
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ jsx3(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx3("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -1065,9 +1374,9 @@ function ConnectProjectDialog(props) {
           )
         ] })
       ] }),
-      mode === "manual" && /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx3("label", { className: "text-sm font-medium", children: "API key" }),
-        /* @__PURE__ */ jsx3(
+      mode === "manual" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "API key" }),
+        /* @__PURE__ */ jsx(
           "input",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -1077,9 +1386,9 @@ function ConnectProjectDialog(props) {
             disabled: loading
           }
         ),
-        /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ jsx3(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx3("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -1091,9 +1400,9 @@ function ConnectProjectDialog(props) {
           )
         ] })
       ] }),
-      mode === "new" && /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx3("label", { className: "text-sm font-medium", children: "Project name" }),
-        /* @__PURE__ */ jsx3(
+      mode === "new" && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", children: "Project name" }),
+        /* @__PURE__ */ jsx(
           "input",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -1103,10 +1412,10 @@ function ConnectProjectDialog(props) {
             disabled: loading
           }
         ),
-        /* @__PURE__ */ jsx3("p", { className: "text-xs text-muted-foreground", children: "A project will be created in your Upfiles account and an API key generated." }),
-        /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ jsx3(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx3("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ jsx3(
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "A project will be created in your Upfiles account and an API key generated." }),
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -1156,60 +1465,77 @@ async function fetchProjectImagesWithThumbs(clientOptions, opts) {
   results.sort((a, b) => (keyToIndex.get(a.key) ?? 0) - (keyToIndex.get(b.key) ?? 0));
   return { items: results, updatedAt };
 }
-
-// src/ImageManager.tsx
-import * as React4 from "react";
-import * as Dialog2 from "@radix-ui/react-dialog";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
-var IconGrid = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
-  /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1" }),
-  /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
-  /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
-  /* @__PURE__ */ jsx4("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
+var IconGrid = ({ className }) => /* @__PURE__ */ 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__ */ jsx("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
+  /* @__PURE__ */ jsx("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
 ] });
-var IconUploadCloud = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
-  /* @__PURE__ */ jsx4("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
-  /* @__PURE__ */ jsx4("path", { d: "M12 12v9" }),
-  /* @__PURE__ */ jsx4("path", { d: "m16 16-4-4-4 4" })
+var IconUploadCloud = ({ className }) => /* @__PURE__ */ 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__ */ 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__ */ jsx("path", { d: "M12 12v9" }),
+  /* @__PURE__ */ jsx("path", { d: "m16 16-4-4-4 4" })
 ] });
-var IconFolder = ({ className }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "0", className, children: /* @__PURE__ */ jsx4("path", { d: "M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" }) });
-var IconFolderPlus = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
-  /* @__PURE__ */ jsx4("path", { d: "M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2Z" }),
-  /* @__PURE__ */ jsx4("line", { x1: "12", x2: "12", y1: "10", y2: "16" }),
-  /* @__PURE__ */ jsx4("line", { x1: "9", x2: "15", y1: "13", y2: "13" })
+var IconFolder = ({ className }) => /* @__PURE__ */ 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__ */ 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__ */ 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__ */ 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__ */ jsx("line", { x1: "12", x2: "12", y1: "10", y2: "16" }),
+  /* @__PURE__ */ jsx("line", { x1: "9", x2: "15", y1: "13", y2: "13" })
 ] });
-var IconSearch = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
-  /* @__PURE__ */ jsx4("circle", { cx: "11", cy: "11", r: "8" }),
-  /* @__PURE__ */ jsx4("path", { d: "m21 21-4.3-4.3" })
+var IconSearch = ({ className }) => /* @__PURE__ */ 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__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
 ] });
-var IconRefresh = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
-  /* @__PURE__ */ jsx4("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-  /* @__PURE__ */ jsx4("path", { d: "M21 3v5h-5" }),
-  /* @__PURE__ */ jsx4("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-  /* @__PURE__ */ jsx4("path", { d: "M8 16H3v5" })
+var IconRefresh = ({ className }) => /* @__PURE__ */ 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__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 3v5h-5" }),
+  /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 16H3v5" })
 ] });
-var IconChevronRight = ({ className }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx4("path", { d: "m9 18 6-6-6-6" }) });
-var IconTrash = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
-  /* @__PURE__ */ jsx4("path", { d: "M3 6h18" }),
-  /* @__PURE__ */ jsx4("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
-  /* @__PURE__ */ jsx4("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
-  /* @__PURE__ */ jsx4("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
-  /* @__PURE__ */ jsx4("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+var IconChevronRight = ({ className }) => /* @__PURE__ */ 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__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+var IconTrash = ({ className }) => /* @__PURE__ */ 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__ */ jsx("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+  /* @__PURE__ */ jsx("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+  /* @__PURE__ */ jsx("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
 ] });
-var IconX = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
-  /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
+var IconX = ({ className }) => /* @__PURE__ */ 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__ */ jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
 ] });
-var IconHome = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
-  /* @__PURE__ */ jsx4("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
-  /* @__PURE__ */ jsx4("polyline", { points: "9 22 9 12 15 12 15 22" })
+var IconHome = ({ className }) => /* @__PURE__ */ 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__ */ jsx("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+  /* @__PURE__ */ jsx("polyline", { points: "9 22 9 12 15 12 15 22" })
 ] });
-var IconImage = ({ className }) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
-  /* @__PURE__ */ jsx4("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-  /* @__PURE__ */ jsx4("circle", { cx: "9", cy: "9", r: "2" }),
-  /* @__PURE__ */ jsx4("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+var IconImage = ({ className }) => /* @__PURE__ */ 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__ */ jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
 ] });
-var IconLoader = ({ className }) => /* @__PURE__ */ jsx4("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsx4("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var IconLoader = ({ className }) => /* @__PURE__ */ 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__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var IconLayers = ({ className }) => /* @__PURE__ */ 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__ */ jsx("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+  /* @__PURE__ */ jsx("polyline", { points: "2 17 12 22 22 17" }),
+  /* @__PURE__ */ jsx("polyline", { points: "2 12 12 17 22 12" })
+] });
+var VisuallyHidden = ({ children }) => /* @__PURE__ */ 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,
@@ -1217,6 +1543,7 @@ function ImageManager(props) {
     clientOptions,
     projectId,
     folderPath,
+    userId,
     title,
     description,
     className,
@@ -1230,7 +1557,9 @@ function ImageManager(props) {
     maxFiles = 10,
     mode = "full",
     showDelete = true,
-    refreshInterval = 5e3
+    refreshInterval = 5e3,
+    stayOnUploadAfterComplete = false,
+    thumbnailConfig
   } = props;
   const [activeView, setActiveView] = React4.useState(mode === "upload" ? "upload" : "browse");
   const [loading, setLoading] = React4.useState(false);
@@ -1246,8 +1575,21 @@ function ImageManager(props) {
   const [creatingFolder, setCreatingFolder] = React4.useState(false);
   const [fileToDelete, setFileToDelete] = React4.useState(null);
   const [thumbnailSelectorFile, setThumbnailSelectorFile] = React4.useState(null);
+  const [selectedThumbnailForFile, setSelectedThumbnailForFile] = React4.useState(null);
+  const [previewFile, setPreviewFile] = React4.useState(null);
+  const [generatingThumbnails, setGeneratingThumbnails] = React4.useState(false);
   const lastUpdatedRef = React4.useRef(null);
   const isFetchingRef = React4.useRef(false);
+  const deduplicateFiles = React4.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.useCallback(async (isPolling = false) => {
     if (isFetchingRef.current) return;
     isFetchingRef.current = true;
@@ -1258,13 +1600,14 @@ 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(list);
+      setFiles(deduplicateFiles(list));
       setFolders(foldersData);
       lastUpdatedRef.current = updatedAt;
     } catch (e) {
@@ -1287,30 +1630,6 @@ function ImageManager(props) {
       load();
     }
   }, [open, activeView, load, mode]);
-  React4.useEffect(() => {
-    if (!open) return;
-    const client = new UpfilesClient(clientOptions);
-    const url = client.getEventsUrl(projectId);
-    const eventSource = new EventSource(url);
-    eventSource.onmessage = (event) => {
-      try {
-        const payload = JSON.parse(event.data);
-        if (payload.type === "file:uploaded") {
-          const newFile = payload.data.file;
-          setFiles((prev) => {
-            if (prev.find((f2) => f2.key === newFile.key)) return prev;
-            return [newFile, ...prev];
-          });
-        } 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.useMemo(() => {
     const q = query.trim().toLowerCase();
     return !q ? files : files.filter((i) => (i.originalName || "").toLowerCase().includes(q));
@@ -1334,10 +1653,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;
           }
@@ -1397,65 +1724,87 @@ function ImageManager(props) {
     });
     return options;
   }, [breadcrumbs, currentFolderId, folders]);
+  const handleThumbnailClick = React4.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.useState("current");
   const activeBreadcrumbPath = React4.useMemo(() => {
     return breadcrumbs.length > 1 ? breadcrumbs.slice(1).map((b) => b.name).join("/") + "/" : void 0;
   }, [breadcrumbs]);
-  return /* @__PURE__ */ jsxs4(Dialog2.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ jsxs4(Dialog2.Portal, { children: [
-      /* @__PURE__ */ jsx4(Dialog2.Overlay, { className: "fixed inset-0 bg-gray-900/50 backdrop-blur-sm z-50 transition-all duration-300" }),
-      /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs(Dialog2.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxs(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx(Dialog2.Overlay, { className: "fixed inset-0 bg-black/60 z-[9999]" }),
+      /* @__PURE__ */ jsxs(
         Dialog2.Content,
         {
-          className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[85vh] max-w-6xl rounded-2xl bg-white dark:bg-gray-950 shadow-2xl z-50 overflow-hidden flex flex-row ${className ?? ""}`,
+          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__ */ jsxs4("div", { className: "w-64 bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col flex-shrink-0", children: [
-              /* @__PURE__ */ jsxs4("div", { className: "p-6", children: [
-                /* @__PURE__ */ jsxs4("h2", { className: "text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2", children: [
-                  /* @__PURE__ */ jsx4(IconImage, { className: "text-blue-600" }),
+            /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(Dialog2.Title, { children: title ?? "Media Library" }) }),
+            /* @__PURE__ */ 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__ */ jsxs("div", { className: "p-6", children: [
+                /* @__PURE__ */ jsxs("h2", { className: "text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsx(IconImage, { className: "text-blue-600" }),
                   title ?? "Media Library"
                 ] }),
-                /* @__PURE__ */ jsx4("p", { className: "text-xs text-gray-500 mt-1", children: description ?? "Manage your assets" })
+                /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: description ?? "Manage your assets" })
               ] }),
-              /* @__PURE__ */ jsxs4("nav", { className: "flex-1 px-3 space-y-1", children: [
-                /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs("nav", { className: "flex-1 px-3 space-y-1", children: [
+                /* @__PURE__ */ 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__ */ jsx4(IconGrid, { className: "w-4 h-4" }),
+                      /* @__PURE__ */ jsx(IconGrid, { className: "w-4 h-4" }),
                       "All Files"
                     ]
                   }
                 ),
-                mode === "full" && /* @__PURE__ */ jsxs4(
+                mode === "full" && /* @__PURE__ */ 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__ */ jsx4(IconUploadCloud, { className: "w-4 h-4" }),
+                      /* @__PURE__ */ jsx(IconUploadCloud, { className: "w-4 h-4" }),
                       "Upload New"
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx4("div", { className: "p-4 border-t border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxs4("div", { className: "text-xs text-center text-gray-400", children: [
+              /* @__PURE__ */ jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxs("div", { className: "text-xs text-center text-gray-400", children: [
                 files.length,
                 " files \u2022 ",
                 folders.length,
                 " folders"
               ] }) })
             ] }),
-            /* @__PURE__ */ jsxs4("div", { className: "flex-1 flex flex-col bg-white dark:bg-gray-950 relative", children: [
-              /* @__PURE__ */ jsxs4("div", { className: "h-16 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between px-6 gap-4", children: [
-                /* @__PURE__ */ jsx4("div", { className: "flex items-center gap-4 flex-1", children: activeView === "browse" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                  /* @__PURE__ */ jsxs4("div", { className: "flex items-center text-sm text-gray-500 overflow-hidden whitespace-nowrap", children: [
-                    /* @__PURE__ */ jsx4("button", { onClick: () => handleBreadcrumbClick(0), className: "hover:text-blue-600 transition-colors", children: /* @__PURE__ */ jsx4(IconHome, { className: "w-4 h-4" }) }),
-                    breadcrumbs.slice(1).map((b, i) => /* @__PURE__ */ jsxs4(React4.Fragment, { children: [
-                      /* @__PURE__ */ jsx4(IconChevronRight, { className: "w-4 h-4 text-gray-300 mx-1" }),
-                      /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 flex flex-col bg-white dark:bg-gray-950 relative", children: [
+              /* @__PURE__ */ 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__ */ jsx("div", { className: "flex items-center gap-4 flex-1", children: activeView === "browse" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center text-sm text-gray-500 overflow-hidden whitespace-nowrap", children: [
+                    /* @__PURE__ */ jsx("button", { onClick: () => handleBreadcrumbClick(0), className: "hover:text-blue-600 transition-colors", children: /* @__PURE__ */ jsx(IconHome, { className: "w-4 h-4" }) }),
+                    breadcrumbs.slice(1).map((b, i) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+                      /* @__PURE__ */ jsx(IconChevronRight, { className: "w-4 h-4 text-gray-300 mx-1" }),
+                      /* @__PURE__ */ jsx(
                         "button",
                         {
                           onClick: () => handleBreadcrumbClick(i + 1),
@@ -1463,23 +1812,23 @@ function ImageManager(props) {
                           children: b.name
                         }
                       )
-                    ] }, b.id || i))
+                    ] }, `${b.id || "breadcrumb"}-${i}`))
                   ] }),
-                  /* @__PURE__ */ jsx4("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
-                  /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
+                  /* @__PURE__ */ 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__ */ jsx4(IconRefresh, { className: `w-4 h-4 ${loading ? "animate-spin" : ""}` })
+                      children: /* @__PURE__ */ jsx(IconRefresh, { className: `w-4 h-4 ${loading ? "animate-spin" : ""}` })
                     }
                   ),
-                  /* @__PURE__ */ jsx4("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
-                  /* @__PURE__ */ jsxs4("div", { className: "relative flex-1 max-w-sm group", children: [
-                    /* @__PURE__ */ jsx4(IconSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" }),
-                    /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsx("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
+                  /* @__PURE__ */ jsxs("div", { className: "relative flex-1 max-w-sm group", children: [
+                    /* @__PURE__ */ 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__ */ jsx(
                       "input",
                       {
                         value: query,
@@ -1490,45 +1839,58 @@ function ImageManager(props) {
                     )
                   ] })
                 ] }) }),
-                /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
-                  activeView === "browse" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                    /* @__PURE__ */ jsx4("button", { onClick: () => setShowCreateFolder(true), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10 rounded-lg transition-colors", title: "New Folder", children: /* @__PURE__ */ jsx4(IconFolderPlus, { className: "w-5 h-5" }) }),
-                    /* @__PURE__ */ jsx4("button", { onClick: () => load(), className: `p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10 rounded-lg transition-colors ${loading ? "animate-spin text-blue-600" : ""}`, title: "Refresh", children: /* @__PURE__ */ jsx4(IconLoader, { className: "w-5 h-5" }) })
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  activeView === "browse" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ 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__ */ jsx(IconFolderPlus, { className: "w-5 h-5" }) }),
+                    /* @__PURE__ */ 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__ */ jsx(IconLoader, { className: "w-5 h-5" }) })
                   ] }),
-                  /* @__PURE__ */ jsx4(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx4("button", { className: "ml-2 p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 rounded-lg transition-colors", children: /* @__PURE__ */ jsx4(IconX, { className: "w-5 h-5" }) }) })
+                  /* @__PURE__ */ jsx(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ 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__ */ jsx(IconX, { className: "w-5 h-5" }) }) })
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs4("div", { className: "flex-1 overflow-y-auto p-6 bg-gray-50/30 dark:bg-gray-900/30", children: [
-                activeView === "browse" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
-                  error && /* @__PURE__ */ jsx4("div", { className: "mb-6 bg-red-50 text-red-600 p-4 rounded-lg text-sm border border-red-100 flex items-center gap-2", children: /* @__PURE__ */ jsx4("span", { children: error }) }),
-                  /* @__PURE__ */ jsxs4("div", { className: gridClassName ?? "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6", children: [
-                    visibleFolders.map((folder) => /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-6 bg-gray-50/30 dark:bg-gray-900/30", children: [
+                activeView === "browse" && /* @__PURE__ */ jsxs(Fragment, { children: [
+                  error && /* @__PURE__ */ 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__ */ jsx("span", { children: error }) }),
+                  /* @__PURE__ */ 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__ */ 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__ */ jsx4("div", { className: "w-16 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-500 group-hover:scale-110 transition-transform", children: /* @__PURE__ */ jsx4(IconFolder, { className: "w-8 h-8 drop-shadow-sm" }) }),
-                          /* @__PURE__ */ jsx4("span", { className: "text-sm font-medium text-gray-700 truncate w-full text-center", children: folder.name })
+                          /* @__PURE__ */ 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__ */ jsx(IconFolder, { className: "w-8 h-8 drop-shadow-sm" }) }),
+                          /* @__PURE__ */ 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__ */ jsxs4(
+                      const displayUrl = f2.url;
+                      const hasThumbnails = f2.thumbnails && f2.thumbnails.length > 0;
+                      return /* @__PURE__ */ jsxs(
                         "div",
                         {
-                          className: "group relative aspect-[4/3] bg-white rounded-xl border border-gray-200 overflow-hidden shadow-sm hover:shadow-xl hover:shadow-gray-200/50 hover:border-blue-300 transition-all duration-300",
+                          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__ */ jsx4("img", { src: thumbUrl, alt: "", className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" }),
-                            /* @__PURE__ */ jsx4("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 justify-center transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300", children: [
-                              /* @__PURE__ */ jsx4(
+                            /* @__PURE__ */ 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__ */ 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__ */ jsx(IconLayers, { className: "w-4 h-4" })
+                              }
+                            ),
+                            /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex gap-2 justify-center transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300", children: [
+                              /* @__PURE__ */ jsx(
                                 "button",
                                 {
-                                  onClick: () => {
+                                  onClick: (e) => {
+                                    e.stopPropagation();
                                     onSelect({
                                       url: f2.url,
                                       key: f2.key,
@@ -1543,7 +1905,7 @@ function ImageManager(props) {
                                   children: "Select"
                                 }
                               ),
-                              showDelete && /* @__PURE__ */ jsx4(
+                              showDelete && /* @__PURE__ */ jsx(
                                 "button",
                                 {
                                   onClick: (e) => {
@@ -1551,57 +1913,70 @@ function ImageManager(props) {
                                     setFileToDelete(f2);
                                   },
                                   className: "p-1.5 bg-white/20 text-white text-xs font-semibold rounded-md hover:bg-red-500 backdrop-blur-md transition-colors",
-                                  children: /* @__PURE__ */ jsx4(IconTrash, { className: "w-4 h-4" })
+                                  children: /* @__PURE__ */ jsx(IconTrash, { className: "w-4 h-4" })
                                 }
                               )
                             ] }) }),
-                            /* @__PURE__ */ jsx4("div", { className: "absolute top-2 right-2 bg-black/50 backdrop-blur-md text-white text-[10px] px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity", children: f2.originalName.split(".").pop()?.toUpperCase() })
+                            /* @__PURE__ */ 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__ */ jsxs4("div", { className: "h-full flex flex-col items-center justify-center text-gray-400", children: [
-                    /* @__PURE__ */ jsx4("div", { className: "w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx4(IconSearch, { className: "w-8 h-8 opacity-40" }) }),
-                    /* @__PURE__ */ jsx4("h3", { className: "text-gray-900 font-medium mb-1", children: "No Assets Found" }),
-                    /* @__PURE__ */ jsx4("p", { className: "text-sm", children: "Try uploading a file or creating a new folder." })
+                  !loading && visibleFolders.length === 0 && visibleFiles.length === 0 && /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col items-center justify-center text-gray-400", children: [
+                    /* @__PURE__ */ jsx("div", { className: "w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4", children: /* @__PURE__ */ jsx(IconSearch, { className: "w-8 h-8 opacity-40" }) }),
+                    /* @__PURE__ */ jsx("h3", { className: "text-gray-900 font-medium mb-1", children: "No Assets Found" }),
+                    /* @__PURE__ */ jsx("p", { className: "text-sm", children: "Try uploading a file or creating a new folder." })
                   ] })
                 ] }),
-                activeView === "upload" && /* @__PURE__ */ jsx4("div", { className: "h-full flex flex-col items-center justify-center max-w-2xl mx-auto", children: /* @__PURE__ */ jsxs4("div", { className: "w-full bg-white rounded-2xl border border-gray-200 p-8 shadow-sm", children: [
-                  /* @__PURE__ */ jsxs4("h3", { className: "text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2", children: [
-                    /* @__PURE__ */ jsx4(IconUploadCloud, { className: "text-blue-500" }),
+                activeView === "upload" && /* @__PURE__ */ jsx("div", { className: "h-full flex flex-col items-center justify-center max-w-2xl mx-auto gap-4", children: /* @__PURE__ */ jsxs("div", { className: "w-full bg-white rounded-2xl border border-gray-200 p-8 shadow-sm", children: [
+                  /* @__PURE__ */ jsxs("h3", { className: "text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsx(IconUploadCloud, { className: "text-blue-500" }),
                     "Upload Files"
                   ] }),
-                  /* @__PURE__ */ jsxs4("div", { className: "mb-6", children: [
-                    /* @__PURE__ */ jsx4("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Target Folder" }),
-                    /* @__PURE__ */ jsxs4("div", { className: "flex gap-2", children: [
-                      /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
+                    /* @__PURE__ */ jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Target Folder" }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                      /* @__PURE__ */ 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__ */ jsx4("option", { value: opt.id, children: opt.name }, opt.id))
+                          children: uploadFoldersList.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.id, children: opt.name }, opt.id))
                         }
                       ),
-                      /* @__PURE__ */ jsx4("button", { onClick: () => setShowCreateFolder(true), className: "px-3 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 transition-colors", children: /* @__PURE__ */ jsx4(IconFolderPlus, { className: "w-5 h-5" }) })
+                      /* @__PURE__ */ jsx("button", { onClick: () => setShowCreateFolder(true), className: "px-3 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 transition-colors", children: /* @__PURE__ */ jsx(IconFolderPlus, { className: "w-5 h-5" }) })
                     ] })
                   ] }),
-                  /* @__PURE__ */ jsx4(
+                  /* @__PURE__ */ jsx(
                     Uploader,
                     {
                       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,
@@ -1609,26 +1984,31 @@ function ImageManager(props) {
                             contentType: file.type,
                             uploadedAt: (/* @__PURE__ */ new Date()).toISOString(),
                             url: file.publicUrl,
-                            thumbnails: file.thumbnails
+                            thumbnails
                           };
-                          setFiles((prev) => [newItem, ...prev]);
+                          setFiles((prev) => {
+                            if (prev.find((f2) => f2.key === newItem.key)) return prev;
+                            return deduplicateFiles([newItem, ...prev]);
+                          });
                         }
                       },
                       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",
                       buttonClassName: "hidden",
-                      children: /* @__PURE__ */ jsxs4("div", { className: "flex flex-col items-center gap-4", children: [
-                        /* @__PURE__ */ jsx4("div", { className: "w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx4(IconUploadCloud, { className: "w-6 h-6" }) }),
-                        /* @__PURE__ */ jsxs4("div", { children: [
-                          /* @__PURE__ */ jsx4("p", { className: "text-gray-900 font-medium", children: "Click to upload or drag and drop" }),
-                          /* @__PURE__ */ jsxs4("p", { className: "text-xs text-gray-500 mt-1", children: [
+                      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+                        /* @__PURE__ */ jsx("div", { className: "w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx(IconUploadCloud, { className: "w-6 h-6" }) }),
+                        /* @__PURE__ */ jsxs("div", { children: [
+                          /* @__PURE__ */ jsx("p", { className: "text-gray-900 font-medium", children: "Click to upload or drag and drop" }),
+                          /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-500 mt-1", children: [
                             "Supports PNG, JPG, GIF up to ",
                             Math.round(maxFileSize / 1024 / 1024),
                             "MB"
@@ -1644,11 +2024,12 @@ function ImageManager(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx4(Dialog2.Root, { open: showCreateFolder, onOpenChange: setShowCreateFolder, children: /* @__PURE__ */ jsxs4(Dialog2.Portal, { children: [
-      /* @__PURE__ */ jsx4(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 z-[60]" }),
-      /* @__PURE__ */ jsxs4(Dialog2.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl z-[61] outline-none", children: [
-        /* @__PURE__ */ jsx4(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-4", children: "New Folder" }),
-        /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx(Dialog2.Root, { open: showCreateFolder, onOpenChange: setShowCreateFolder, children: /* @__PURE__ */ jsxs(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 z-[10010]" }),
+      /* @__PURE__ */ jsxs(Dialog2.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl z-[10011] outline-none", "aria-describedby": "new-folder-description", children: [
+        /* @__PURE__ */ jsx(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-4", children: "New Folder" }),
+        /* @__PURE__ */ jsx(Dialog2.Description, { id: "new-folder-description", className: "sr-only", children: "Create a new folder to organize your files" }),
+        /* @__PURE__ */ jsx(
           "input",
           {
             autoFocus: true,
@@ -1659,9 +2040,9 @@ function ImageManager(props) {
             onKeyDown: (e) => e.key === "Enter" && handleCreateFolder()
           }
         ),
-        /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-3", children: [
-          /* @__PURE__ */ jsx4("button", { onClick: () => setShowCreateFolder(false), className: "px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg", children: "Cancel" }),
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3", children: [
+          /* @__PURE__ */ 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__ */ jsx(
             "button",
             {
               onClick: handleCreateFolder,
@@ -1673,21 +2054,21 @@ function ImageManager(props) {
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsx4(Dialog2.Root, { open: !!fileToDelete, onOpenChange: (open2) => !open2 && setFileToDelete(null), children: /* @__PURE__ */ jsxs4(Dialog2.Portal, { children: [
-      /* @__PURE__ */ jsx4(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 z-[80]" }),
-      /* @__PURE__ */ jsxs4(Dialog2.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md rounded-xl bg-white p-6 shadow-2xl z-[81]", children: [
-        /* @__PURE__ */ jsx4(Dialog2.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Delete File" }),
-        /* @__PURE__ */ jsxs4(Dialog2.Description, { className: "text-gray-600 mb-6", children: [
+    /* @__PURE__ */ jsx(Dialog2.Root, { open: !!fileToDelete, onOpenChange: (open2) => !open2 && setFileToDelete(null), children: /* @__PURE__ */ jsxs(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 z-[10020]" }),
+      /* @__PURE__ */ jsxs(Dialog2.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md rounded-xl bg-white p-6 shadow-2xl z-[10021]", "aria-describedby": "delete-file-description", children: [
+        /* @__PURE__ */ jsx(Dialog2.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Delete File" }),
+        /* @__PURE__ */ jsxs(Dialog2.Description, { id: "delete-file-description", className: "text-gray-600 mb-6", children: [
           "Are you sure you want to delete ",
-          /* @__PURE__ */ jsxs4("span", { className: "font-semibold text-gray-900", children: [
+          /* @__PURE__ */ jsxs("span", { className: "font-semibold text-gray-900", children: [
             '"',
             fileToDelete?.originalName,
             '"'
           ] }),
           "?"
         ] }),
-        /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-3", children: [
-          /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsx(
             "button",
             {
               onClick: () => setFileToDelete(null),
@@ -1695,7 +2076,7 @@ function ImageManager(props) {
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ jsx4(
+          /* @__PURE__ */ jsx(
             "button",
             {
               onClick: handleDelete,
@@ -1706,22 +2087,346 @@ function ImageManager(props) {
           )
         ] })
       ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Dialog2.Root, { open: !!thumbnailSelectorFile, onOpenChange: (open2) => !open2 && setThumbnailSelectorFile(null), children: /* @__PURE__ */ jsxs(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx(Dialog2.Overlay, { className: "fixed inset-0 bg-black/50 z-[10030]" }),
+      /* @__PURE__ */ jsxs(Dialog2.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__ */ jsxs("div", { className: "p-6 border-b border-gray-200", children: [
+          /* @__PURE__ */ jsx(Dialog2.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select Thumbnail" }),
+          /* @__PURE__ */ jsxs(Dialog2.Description, { id: "thumbnail-selector-description", className: "text-gray-600", children: [
+            "Choose a thumbnail size for ",
+            /* @__PURE__ */ jsxs("span", { className: "font-semibold text-gray-900", children: [
+              '"',
+              thumbnailSelectorFile?.originalName,
+              '"'
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "p-6 overflow-y-auto max-h-[60vh]", children: [
+          generatingThumbnails && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-3 py-8 text-gray-500", children: [
+            /* @__PURE__ */ jsx(IconLoader, { className: "w-5 h-5 animate-spin" }),
+            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Generating thumbnails..." })
+          ] }),
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "aspect-square bg-gray-100 flex items-center justify-center relative", children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: thumbnailSelectorFile?.url,
+                        alt: "Original",
+                        className: "w-full h-full object-cover"
+                      }
+                    ),
+                    selectedThumbnailForFile === null && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-blue-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "p-3 bg-white", children: [
+                    /* @__PURE__ */ jsx("div", { className: "font-medium text-sm text-gray-900", children: "Original" }),
+                    /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: "Full size" })
+                  ] })
+                ]
+              }
+            ),
+            thumbnailSelectorFile?.thumbnails?.map((thumbnail) => /* @__PURE__ */ 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__ */ jsxs("div", { className: "aspect-square bg-gray-100 flex items-center justify-center relative", children: [
+                    /* @__PURE__ */ jsx(
+                      "img",
+                      {
+                        src: thumbnail.url,
+                        alt: `${thumbnail.size}px thumbnail`,
+                        className: "w-full h-full object-cover"
+                      }
+                    ),
+                    selectedThumbnailForFile?.id === thumbnail.id && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-blue-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsx("svg", { className: "w-4 h-4 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ 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__ */ jsxs("div", { className: "p-3 bg-white", children: [
+                    /* @__PURE__ */ jsxs("div", { className: "font-medium text-sm text-gray-900", children: [
+                      thumbnail.size,
+                      "px"
+                    ] }),
+                    /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500", children: thumbnail.sizeType || "Thumbnail" })
+                  ] })
+                ]
+              },
+              thumbnail.id
+            ))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "p-6 border-t border-gray-200 flex justify-end gap-3", children: [
+          /* @__PURE__ */ 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__ */ 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);
+                }
+              },
+              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__ */ jsx(Dialog2.Root, { open: !!previewFile, onOpenChange: (open2) => !open2 && setPreviewFile(null), children: /* @__PURE__ */ jsxs(Dialog2.Portal, { children: [
+      /* @__PURE__ */ jsx(Dialog2.Overlay, { className: "fixed inset-0 bg-black/90 z-[10040]", onClick: () => setPreviewFile(null) }),
+      /* @__PURE__ */ jsx(Dialog2.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__ */ jsxs("div", { className: "relative w-full h-full flex flex-col", children: [
+        /* @__PURE__ */ 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__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-white", children: [
+            /* @__PURE__ */ jsx(Dialog2.Title, { className: "text-xl font-semibold mb-1", children: previewFile?.originalName }),
+            /* @__PURE__ */ jsxs(Dialog2.Description, { id: "image-preview-description", className: "text-sm text-gray-300", children: [
+              previewFile?.size ? `${(previewFile.size / 1024).toFixed(1)} KB` : "",
+              " \u2022 ",
+              previewFile?.contentType
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setPreviewFile(null),
+              className: "p-2 bg-white/10 hover:bg-white/20 rounded-lg backdrop-blur-md transition-colors",
+              children: /* @__PURE__ */ jsx(IconX, { className: "w-6 h-6 text-white" })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex gap-3 justify-center", children: [
+          /* @__PURE__ */ 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);
+                }
+              },
+              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__ */ 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?.contentType?.startsWith("image/") && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                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: [
+                /* @__PURE__ */ jsx(IconLayers, { className: "w-5 h-5" }),
+                "Select Thumbnail"
+              ]
+            }
+          )
+        ] }) })
+      ] }) })
     ] }) })
   ] });
 }
-export {
-  ConnectProjectDialog,
-  ImageManager,
-  ProjectFilesWidget,
-  UpfilesClient,
-  Uploader,
-  addApiKeyManually,
-  connectProject,
-  connectUsingApiKey,
-  createClientWithKey,
-  createProject,
-  fetchFileThumbnails,
-  fetchProjectFiles,
-  fetchProjectImagesWithThumbs,
-  listProjects
-};
+function useUpfilesInhouse(config) {
+  const {
+    baseUrl,
+    getToken,
+    userId,
+    projectName = "default",
+    enabled = true
+  } = config;
+  const [state, setState] = useState({ clientOptions: null, projectId: null, loading: false, error: null });
+  const [retryCount, setRetryCount] = useState(0);
+  const [token, setToken] = useState(
+    typeof getToken === "string" ? getToken : null
+  );
+  const getTokenFn = useCallback(() => {
+    return typeof getToken === "function" ? getToken() : getToken;
+  }, [getToken]);
+  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 = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const buildClientOptions = useCallback(
+    () => ({
+      baseUrl,
+      getToken: getTokenFn,
+      projectName
+    }),
+    [baseUrl, getTokenFn, projectName]
+  );
+  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 = useCallback(() => {
+    setRetryCount((c) => c + 1);
+  }, []);
+  const clearCache = useCallback(() => {
+    setState({ clientOptions: null, projectId: null, loading: false, error: null });
+  }, []);
+  return {
+    ...state,
+    isReady: !!state.clientOptions,
+    retry,
+    clearCache
+  };
+}
+
+export { ConnectProjectDialog, ImageManager, ProjectFilesWidget, StorageQuotaError, UpfilesClient, Uploader, addApiKeyManually, connectProject, connectUsingApiKey, createClientWithKey, createProject, createProjectWithApiKey, fetchFileThumbnails, fetchProjectFiles, fetchProjectImagesWithThumbs, listProjects, updateProject, useUpfilesInhouse };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map