@thetechfossil/upfiles 1.0.11 → 1.0.13

package/dist/index.js

@@ -1,85 +1,111 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+'use strict';
+
+var React4 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var Dialog2 = require('@radix-ui/react-dialog');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
   }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+  n.default = e;
+  return Object.freeze(n);
+}
 
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  ConnectProjectDialog: () => ConnectProjectDialog,
-  ImageManager: () => ImageManager,
-  ProjectFilesWidget: () => ProjectFilesWidget,
-  UpfilesClient: () => UpfilesClient,
-  Uploader: () => Uploader,
-  addApiKeyManually: () => addApiKeyManually,
-  connectProject: () => connectProject,
-  connectUsingApiKey: () => connectUsingApiKey,
-  createClientWithKey: () => createClientWithKey,
-  createProject: () => createProject,
-  fetchFileThumbnails: () => fetchFileThumbnails,
-  fetchProjectFiles: () => fetchProjectFiles,
-  fetchProjectImagesWithThumbs: () => fetchProjectImagesWithThumbs,
-  listProjects: () => listProjects
-});
-module.exports = __toCommonJS(index_exports);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var Dialog2__namespace = /*#__PURE__*/_interopNamespace(Dialog2);
 
 // src/client.ts
+var 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,
@@ -90,8 +116,12 @@ var UpfilesClient = class {
       let msg = "Failed to get upload URL";
       try {
         const data = await res.json();
-        msg = data.error || msg;
-      } catch {
+        if (res.status === 413 && data.error === "STORAGE_QUOTA_EXCEEDED") {
+          throw new StorageQuotaError(data.message || "Storage quota exceeded", data.details);
+        }
+        msg = data.message || data.error || msg;
+      } catch (e) {
+        if (e instanceof StorageQuotaError) throw e;
       }
       throw new Error(msg);
     }
@@ -127,7 +157,11 @@ var UpfilesClient = class {
           originalName: file.name,
           size: file.size,
           contentType: file.type || "application/octet-stream",
-          projectId: extras?.projectId
+          projectId: extras?.projectId,
+          url: presign.publicUrl,
+          userId: extras?.userId
+          // userId might be passed in extras but not typed yet in this method signature, easy fix is to cast or update signature. Better to update signature but for now access via cast to keep change minimal if extras type isn't fully updated here locally. Wait, the plan said "Update upload method to pass...". I should probably check if I can update extras type locally or just cast. The `upload` method signature has `extras`. I should probably update `extras` type in the signature if I can.
+          // Actually, looking at the code, `extras` is defined inline: `extras?: { projectId?: string; folderPath?: string; fetchThumbnails?: boolean; callCompletionEndpoint?: boolean }`. I should update this type definition too.
         });
       } catch (error) {
         throw new Error(`Upload verification failed: ${error.message}`);
@@ -156,22 +190,16 @@ var UpfilesClient = class {
     const target = this.baseUrl ? `${this.baseUrl}${this.completionPath}` : this.completionPath;
     const headers = {
       "content-type": "application/json",
-      ...this.headers || {}
+      ...await this.buildAuthHeaders()
     };
-    if (this.apiKey) {
-      if (this.apiKeyHeader === "authorization") {
-        headers["authorization"] = this.apiKey.startsWith("upk_") ? `Bearer ${this.apiKey}` : this.apiKey;
-      } else if (this.apiKeyHeader === "x-api-key") {
-        headers["x-api-key"] = this.apiKey;
-      } else {
-        headers["x-up-api-key"] = this.apiKey;
-      }
-    }
     const res = await fetch(target, {
       method: "POST",
       headers,
       credentials: this.withCredentials ? "include" : "same-origin",
-      body: JSON.stringify(params)
+      body: JSON.stringify({
+        ...params,
+        key: params.fileKey
+      })
     });
     if (!res.ok) {
       let msg = "Failed to complete upload";
@@ -187,16 +215,7 @@ var UpfilesClient = class {
   async getThumbnails(fileKey) {
     const target = this.baseUrl ? `${this.baseUrl}${this.thumbnailsPath}` : this.thumbnailsPath;
     const url = `${target}?fileKey=${encodeURIComponent(fileKey)}`;
-    const headers = { ...this.headers || {} };
-    if (this.apiKey) {
-      if (this.apiKeyHeader === "authorization") {
-        headers["authorization"] = this.apiKey.startsWith("upk_") ? `Bearer ${this.apiKey}` : this.apiKey;
-      } else if (this.apiKeyHeader === "x-api-key") {
-        headers["x-api-key"] = this.apiKey;
-      } else {
-        headers["x-up-api-key"] = this.apiKey;
-      }
-    }
+    const headers = await this.buildAuthHeaders();
     const res = await fetch(url, { method: "GET", headers, credentials: this.withCredentials ? "include" : "same-origin" });
     if (!res.ok) {
       let msg = "Failed to fetch thumbnails";
@@ -210,26 +229,19 @@ var UpfilesClient = class {
     const data = await res.json();
     return data?.thumbnails ?? [];
   }
-  async generateThumbnails(fileKey) {
+  async generateThumbnails(fileKey, sizes) {
     const target = this.baseUrl ? `${this.baseUrl}${this.thumbnailsPath}` : this.thumbnailsPath;
     const headers = {
       "content-type": "application/json",
-      ...this.headers || {}
+      ...await this.buildAuthHeaders()
     };
-    if (this.apiKey) {
-      if (this.apiKeyHeader === "authorization") {
-        headers["authorization"] = this.apiKey.startsWith("upk_") ? `Bearer ${this.apiKey}` : this.apiKey;
-      } else if (this.apiKeyHeader === "x-api-key") {
-        headers["x-api-key"] = this.apiKey;
-      } else {
-        headers["x-up-api-key"] = this.apiKey;
-      }
-    }
+    const body = { fileKey };
+    if (sizes && sizes.length > 0) body.sizes = sizes;
     const res = await fetch(target, {
       method: "POST",
       headers,
       credentials: this.withCredentials ? "include" : "same-origin",
-      body: JSON.stringify({ fileKey })
+      body: JSON.stringify(body)
     });
     if (!res.ok) {
       let msg = "Failed to generate thumbnails";
@@ -243,19 +255,53 @@ var UpfilesClient = class {
     const data = await res.json();
     return { masterWebp: data.masterWebp, thumbnails: data.thumbnails ?? [] };
   }
+  /** Get thumbnail settings for the project (requires API key) */
+  async getThumbnailSettings() {
+    const basePath = this.presignPath.replace(/\/upload$/, "");
+    const target = this.baseUrl ? `${this.baseUrl}${basePath}/settings/thumbnails` : `${basePath}/settings/thumbnails`;
+    const headers = await this.buildAuthHeaders();
+    const res = await fetch(target, {
+      method: "GET",
+      headers,
+      credentials: this.withCredentials ? "include" : "same-origin"
+    });
+    if (!res.ok) {
+      let msg = "Failed to get thumbnail settings";
+      try {
+        const d = await res.json();
+        msg = d.message || msg;
+      } catch {
+      }
+      throw new Error(msg);
+    }
+    return res.json();
+  }
+  /** Update thumbnail settings for the project (requires API key with write scope) */
+  async updateThumbnailSettings(settings) {
+    const basePath = this.presignPath.replace(/\/upload$/, "");
+    const target = this.baseUrl ? `${this.baseUrl}${basePath}/settings/thumbnails` : `${basePath}/settings/thumbnails`;
+    const headers = { "content-type": "application/json", ...await this.buildAuthHeaders() };
+    const res = await fetch(target, {
+      method: "PATCH",
+      headers,
+      credentials: this.withCredentials ? "include" : "same-origin",
+      body: JSON.stringify(settings)
+    });
+    if (!res.ok) {
+      let msg = "Failed to update thumbnail settings";
+      try {
+        const d = await res.json();
+        msg = d.message || msg;
+      } catch {
+      }
+      throw new Error(msg);
+    }
+    return res.json();
+  }
   async getFolders(parentId) {
     const target = this.baseUrl ? `${this.baseUrl}${this.foldersPath}` : this.foldersPath;
     const url = parentId ? `${target}?parentId=${encodeURIComponent(parentId)}` : target;
-    const headers = { ...this.headers || {} };
-    if (this.apiKey) {
-      if (this.apiKeyHeader === "authorization") {
-        headers["authorization"] = this.apiKey.startsWith("upk_") ? `Bearer ${this.apiKey}` : this.apiKey;
-      } else if (this.apiKeyHeader === "x-api-key") {
-        headers["x-api-key"] = this.apiKey;
-      } else {
-        headers["x-up-api-key"] = this.apiKey;
-      }
-    }
+    const headers = await this.buildAuthHeaders();
     const res = await fetch(url, { method: "GET", headers, credentials: this.withCredentials ? "include" : "same-origin" });
     if (!res.ok) {
       let msg = "Failed to fetch folders";
@@ -273,17 +319,8 @@ var UpfilesClient = class {
     const target = this.baseUrl ? `${this.baseUrl}${this.foldersPath}` : this.foldersPath;
     const headers = {
       "content-type": "application/json",
-      ...this.headers || {}
+      ...await this.buildAuthHeaders()
     };
-    if (this.apiKey) {
-      if (this.apiKeyHeader === "authorization") {
-        headers["authorization"] = this.apiKey.startsWith("upk_") ? `Bearer ${this.apiKey}` : this.apiKey;
-      } else if (this.apiKeyHeader === "x-api-key") {
-        headers["x-api-key"] = this.apiKey;
-      } else {
-        headers["x-up-api-key"] = this.apiKey;
-      }
-    }
     const res = await fetch(target, {
       method: "POST",
       headers,
@@ -307,16 +344,7 @@ var UpfilesClient = class {
     const filesPath = `${basePath}/files`;
     const target = this.baseUrl ? `${this.baseUrl}${filesPath}` : filesPath;
     const url = params?.folderPath ? `${target}?folderPath=${encodeURIComponent(params.folderPath)}` : target;
-    const headers = { ...this.headers || {} };
-    if (this.apiKey) {
-      if (this.apiKeyHeader === "authorization") {
-        headers["authorization"] = this.apiKey.startsWith("upk_") ? `Bearer ${this.apiKey}` : this.apiKey;
-      } else if (this.apiKeyHeader === "x-api-key") {
-        headers["x-api-key"] = this.apiKey;
-      } else {
-        headers["x-up-api-key"] = this.apiKey;
-      }
-    }
+    const headers = await this.buildAuthHeaders();
     const res = await fetch(url, { method: "GET", headers, credentials: this.withCredentials ? "include" : "same-origin" });
     if (!res.ok) {
       let msg = "Failed to fetch files";
@@ -334,29 +362,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
-var import_react = __toESM(require("react"));
-var import_jsx_runtime = require("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,
@@ -367,48 +387,136 @@ var Uploader = ({
   dropzoneClassName,
   children,
   projectId,
+  userId,
   folderPath,
   fetchThumbnails,
   autoRecordToDb = true,
   recordUrl = "/api/files",
-  autoUpload = false
+  autoUpload = false,
+  thumbnailEnabled,
+  thumbnailSizes
 }) => {
-  const inputRef = (0, import_react.useRef)(null);
-  const client = (0, import_react.useMemo)(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
-  const [files, setFiles] = (0, import_react.useState)([]);
-  const [isUploading, setIsUploading] = (0, import_react.useState)(false);
-  const [isDragOver, setIsDragOver] = (0, import_react.useState)(false);
-  const addFiles = (0, import_react.useCallback)((incoming) => {
-    const filtered = incoming.filter((f2) => {
-      if (f2.size > maxFileSize) {
-        return false;
-      }
-      return true;
+  const inputRef = React4.useRef(null);
+  const client = React4.useMemo(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
+  const [files, setFiles] = React4.useState([]);
+  const [isUploading, setIsUploading] = React4.useState(false);
+  const [isDragOver, setIsDragOver] = React4.useState(false);
+  const [quotaError, setQuotaError] = React4.useState(null);
+  const showThumbnailUI = thumbnailEnabled !== void 0;
+  const [thumbEnabled, setThumbEnabled] = React4.useState(thumbnailEnabled ?? true);
+  const [thumbSizes, setThumbSizes] = React4.useState(thumbnailSizes ?? [256, 512]);
+  const [thumbFileIds, setThumbFileIds] = React4.useState(/* @__PURE__ */ new Set());
+  const thumbEnabledRef = React4.useRef(thumbnailEnabled ?? true);
+  const thumbSizesRef = React4.useRef(thumbnailSizes ?? [256, 512]);
+  const thumbFileIdsRef = React4.useRef(/* @__PURE__ */ new Set());
+  React4.useEffect(() => {
+    thumbEnabledRef.current = thumbEnabled;
+  }, [thumbEnabled]);
+  React4.useEffect(() => {
+    thumbSizesRef.current = thumbSizes;
+  }, [thumbSizes]);
+  React4.useEffect(() => {
+    thumbFileIdsRef.current = thumbFileIds;
+  }, [thumbFileIds]);
+  const pendingImages = React4.useMemo(
+    () => files.filter((f2) => f2.type.startsWith("image/") && f2.status === "pending"),
+    [files]
+  );
+  const thumbSelectedCount = React4.useMemo(
+    () => pendingImages.filter((f2) => thumbFileIds.has(f2.id)).length,
+    [pendingImages, thumbFileIds]
+  );
+  const handleThumbEnabledToggle = React4.useCallback(() => {
+    const newVal = !thumbEnabledRef.current;
+    thumbEnabledRef.current = newVal;
+    setThumbEnabled(newVal);
+    if (newVal) {
+      setFiles((prev) => {
+        const ids = prev.filter((f2) => f2.type.startsWith("image/") && f2.status === "pending").map((f2) => f2.id);
+        if (ids.length > 0) {
+          const next = new Set(thumbFileIdsRef.current);
+          ids.forEach((id) => next.add(id));
+          thumbFileIdsRef.current = next;
+          setThumbFileIds(next);
+        }
+        return prev;
+      });
+    }
+  }, []);
+  const toggleThumbSize = React4.useCallback((size) => {
+    setThumbSizes((prev) => {
+      const next = prev.includes(size) ? prev.filter((s) => s !== size) : [...prev, size].sort((a, b) => a - b);
+      thumbSizesRef.current = next;
+      return next;
+    });
+  }, []);
+  const toggleFileThumb = React4.useCallback((fileId) => {
+    setThumbFileIds((prev) => {
+      const next = new Set(prev);
+      if (next.has(fileId)) next.delete(fileId);
+      else next.add(fileId);
+      thumbFileIdsRef.current = next;
+      return next;
     });
-    const limited = filtered.slice(0, Math.max(0, maxFiles - files.length));
+  }, []);
+  const selectAllThumbs = React4.useCallback(() => {
+    const ids = pendingImages.map((f2) => f2.id);
+    const next = new Set(thumbFileIdsRef.current);
+    ids.forEach((id) => next.add(id));
+    thumbFileIdsRef.current = next;
+    setThumbFileIds(next);
+  }, [pendingImages]);
+  const deselectAllThumbs = React4.useCallback(() => {
+    const pendingSet = new Set(pendingImages.map((f2) => f2.id));
+    const next = new Set([...thumbFileIdsRef.current].filter((id) => !pendingSet.has(id)));
+    thumbFileIdsRef.current = next;
+    setThumbFileIds(next);
+  }, [pendingImages]);
+  const addFiles = React4.useCallback((incoming) => {
+    setQuotaError(null);
+    const filtered = maxFileSize > 0 ? incoming.filter((f2) => f2.size <= maxFileSize) : incoming;
+    const limited = maxFiles > 0 ? filtered.slice(0, Math.max(0, maxFiles - files.length)) : filtered;
     const mapped = limited.map((f2) => ({
       id: Math.random().toString(36).slice(2),
       file: f2,
       name: f2.name,
       size: f2.size,
-      type: f2.type,
+      type: f2.type || "application/octet-stream",
       progress: 0,
       status: "pending"
     }));
     setFiles((prev) => [...prev, ...mapped]);
-  }, [files.length, maxFileSize, maxFiles]);
-  const onInputChange = (0, import_react.useCallback)((e) => {
+    if (showThumbnailUI && thumbEnabledRef.current) {
+      const imageIds = mapped.filter((f2) => f2.type.startsWith("image/")).map((f2) => f2.id);
+      if (imageIds.length > 0) {
+        const next = new Set(thumbFileIdsRef.current);
+        imageIds.forEach((id) => next.add(id));
+        thumbFileIdsRef.current = next;
+        setThumbFileIds(next);
+      }
+    }
+  }, [files.length, maxFileSize, maxFiles, showThumbnailUI]);
+  const removeFile = React4.useCallback((fileId) => {
+    setFiles((prev) => prev.filter((f2) => f2.id !== fileId));
+    if (showThumbnailUI) {
+      const next = new Set(thumbFileIdsRef.current);
+      next.delete(fileId);
+      thumbFileIdsRef.current = next;
+      setThumbFileIds(next);
+    }
+  }, [showThumbnailUI]);
+  const onInputChange = React4.useCallback((e) => {
     const fs = Array.from(e.target.files || []);
     addFiles(fs);
     if (inputRef.current) inputRef.current.value = "";
   }, [addFiles]);
-  const handleDrop = (0, import_react.useCallback)((e) => {
+  const handleDrop = React4.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
     addFiles(Array.from(e.dataTransfer.files || []));
   }, [addFiles]);
-  const uploadOne = (0, import_react.useCallback)(async (item) => {
+  const uploadOne = React4.useCallback(async (item) => {
     const update = (patch) => {
       setFiles((prev) => prev.map((f2) => f2.id === item.id ? { ...f2, ...patch } : f2));
     };
@@ -417,7 +525,7 @@ var Uploader = ({
       update({ status: "uploading", progress: 1 });
       const presign = await client.getPresignedUrl({
         fileName: item.name,
-        fileType: item.type,
+        fileType: item.type || "application/octet-stream",
         fileSize: item.size,
         projectId,
         folderPath
@@ -444,14 +552,17 @@ var Uploader = ({
         xhr.send(item.file);
       });
       let completionResult = null;
-      if (autoRecordToDb && projectId) {
+      const canRecordToDb = autoRecordToDb && (projectId || clientOptions?.projectName || clientOptions?.projectId || clientOptions?.apiKey);
+      if (canRecordToDb) {
         try {
           completionResult = await client.completeUpload({
             fileKey: presign.fileKey,
             originalName: item.name,
             size: item.size,
-            contentType: item.type,
-            projectId
+            contentType: item.type || "application/octet-stream",
+            projectId,
+            url: presign.publicUrl,
+            userId
           });
         } catch (e) {
           console.error("Failed to complete upload:", e);
@@ -475,39 +586,86 @@ var Uploader = ({
       }
       const finalFileKey = completionResult?.file?.key || presign.fileKey;
       const finalPublicUrl = completionResult?.file?.url || presign.publicUrl;
+      const fileThumbEnabled = showThumbnailUI && thumbEnabledRef.current && thumbFileIdsRef.current.has(item.id);
       const result = {
         ...item,
         status: "success",
         progress: 100,
-        fileKey: presign.fileKey,
-        publicUrl: presign.publicUrl,
+        fileKey: finalFileKey,
+        publicUrl: finalPublicUrl,
         projectId: presign.projectId,
         apiKeyId: presign.apiKeyId,
+        thumbnailEnabled: showThumbnailUI ? fileThumbEnabled : void 0,
+        thumbnailSizesSelected: showThumbnailUI ? fileThumbEnabled ? [...thumbSizesRef.current] : [] : void 0,
         // @ts-ignore - allow downstream to access thumbs if present
         thumbnails: thumbs,
         // @ts-ignore - allow downstream to access masterWebp if present
         masterWebp
       };
-      update({ status: "success", progress: 100, fileKey: presign.fileKey, publicUrl: presign.publicUrl });
+      update({ status: "success", progress: 100, fileKey: finalFileKey, publicUrl: finalPublicUrl });
       onClientUploadComplete?.(result);
       return result;
     } catch (err) {
-      const message = err instanceof Error ? err.message : "Upload failed";
+      const message = err instanceof StorageQuotaError ? err.message : err instanceof Error ? err.message : "Upload failed";
       update({ status: "error", error: message });
       throw err;
     }
-  }, [client, projectId, folderPath, fetchThumbnails, autoRecordToDb, recordUrl, clientOptions, onUploadBegin, onUploadProgress, onClientUploadComplete]);
-  const uploadAll = (0, import_react.useCallback)(async () => {
+  }, [client, projectId, userId, folderPath, fetchThumbnails, autoRecordToDb, recordUrl, clientOptions, onUploadBegin, onUploadProgress, onClientUploadComplete, showThumbnailUI]);
+  const uploadAll = React4.useCallback(async () => {
     const targets = files.filter((f2) => f2.status === "pending");
     if (!targets.length) return;
+    setQuotaError(null);
     setIsUploading(true);
     try {
+      try {
+        const quota = await client.getQuota();
+        if (quota.limitBytes > 0) {
+          const totalPendingSize = targets.reduce((sum, f2) => sum + f2.size, 0);
+          const remaining = quota.limitBytes - quota.usedBytes;
+          if (totalPendingSize > remaining) {
+            const fmt = (n) => {
+              if (n >= 1024 * 1024 * 1024) return `${(n / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+              if (n >= 1024 * 1024) return `${(n / (1024 * 1024)).toFixed(2)} MB`;
+              if (n >= 1024) return `${(n / 1024).toFixed(2)} KB`;
+              return `${n} B`;
+            };
+            const errMsg = `Storage quota exceeded. Remaining: ${fmt(remaining)}, Upload size: ${fmt(totalPendingSize)}`;
+            setQuotaError(errMsg);
+            targets.forEach((t) => {
+              setFiles((prev) => prev.map((f2) => f2.id === t.id ? { ...f2, status: "error", error: errMsg } : f2));
+            });
+            onError?.(new StorageQuotaError(errMsg, {
+              limit: quota.limitBytes,
+              used: quota.usedBytes,
+              remaining,
+              fileSize: totalPendingSize
+            }));
+            return;
+          }
+        }
+      } catch (e) {
+        if (e instanceof StorageQuotaError) {
+          setQuotaError(e.message);
+          targets.forEach((t) => {
+            setFiles((prev) => prev.map((f2) => f2.id === t.id ? { ...f2, status: "error", error: e.message } : f2));
+          });
+          onError?.(e);
+          return;
+        }
+      }
       const results = [];
       for (const f2 of targets) {
         try {
           const done = await uploadOne(f2);
           results.push(done);
         } catch (e) {
+          if (e instanceof StorageQuotaError) {
+            setQuotaError(e.message);
+            setFiles((prev) => prev.map(
+              (file) => file.status === "pending" ? { ...file, status: "error", error: e.message } : file
+            ));
+            break;
+          }
         }
       }
       onComplete?.(results.filter((f2) => f2.status === "success"));
@@ -516,8 +674,8 @@ var Uploader = ({
     } finally {
       setIsUploading(false);
     }
-  }, [files, onComplete, onError, uploadOne]);
-  import_react.default.useEffect(() => {
+  }, [files, client, onComplete, onError, uploadOne]);
+  React4__namespace.default.useEffect(() => {
     if (autoUpload && files.some((f2) => f2.status === "pending") && !isUploading) {
       const timer = setTimeout(() => {
         uploadAll();
@@ -525,8 +683,8 @@ var Uploader = ({
       return () => clearTimeout(timer);
     }
   }, [autoUpload, files, isUploading, uploadAll]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         ref: inputRef,
@@ -537,7 +695,7 @@ var Uploader = ({
         onChange: onInputChange
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         className: `${dropzoneClassName} border-2 border-dashed rounded-xl transition-all duration-200 cursor-pointer p-10 flex flex-col items-center justify-center gap-4 ${isDragOver ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 bg-gray-50/50 dark:bg-gray-900/50"}`,
@@ -556,82 +714,175 @@ var Uploader = ({
         role: "button",
         "aria-label": "Upload files",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "17 8 12 3 7 8" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+            /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "17 8 12 3 7 8" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
           ] }) }),
-          children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Drop files here or click to browse" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.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"
+          children ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Drop files here or click to browse" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: [
+              !multiple ? "Single file" : maxFiles > 0 ? `Up to ${maxFiles} files` : "Multiple files",
+              maxFileSize > 0 ? ` \u2022 Max ${(maxFileSize / (1024 * 1024)).toFixed(0)}MB per file` : ""
             ] })
           ] })
         ]
       }
     ),
-    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mt-8 space-y-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between border-b border-gray-100 dark:border-gray-800 pb-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { className: "font-semibold text-gray-900 dark:text-gray-100", children: "Selected Files" }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    quotaError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-xl", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 w-8 h-8 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-red-600 dark:text-red-400", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-red-800 dark:text-red-300", children: quotaError }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setQuotaError(null),
+          className: "text-red-400 hover:text-red-600 dark:hover:text-red-300 transition-colors",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          ] })
+        }
+      )
+    ] }) }),
+    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-8 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-gray-100 dark:border-gray-800 pb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "font-semibold text-gray-900 dark:text-gray-100", children: "Selected Files" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               className: "px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-lg hover:bg-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors shadow-sm",
               disabled: isUploading || files.every((f2) => f2.status !== "pending"),
               onClick: uploadAll,
-              children: isUploading ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "animate-spin h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
+              children: isUploading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4 text-white", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
                 ] }),
                 "Uploading..."
               ] }) : "Upload All"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               className: "px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 text-sm font-semibold rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 disabled:opacity-50 transition-colors",
               disabled: isUploading,
-              onClick: () => setFiles([]),
+              onClick: () => {
+                setFiles([]);
+                if (showThumbnailUI) {
+                  const empty = /* @__PURE__ */ new Set();
+                  thumbFileIdsRef.current = empty;
+                  setThumbFileIds(empty);
+                }
+              },
               children: "Clear"
             }
           )
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid gap-3", children: files.map((f2) => /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "21 15 16 10 5 21" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-blue-500", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "14 2 14 8 20 8" })
+      showThumbnailUI && pendingImages.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-purple-50 dark:bg-purple-900/10 border border-purple-200 dark:border-purple-800/50 rounded-xl p-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-purple-500", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+                /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 17 12 22 22 17" }),
+                /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 12 12 17 22 12" })
+              ] }),
+              "Generate Thumbnails"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: thumbEnabled ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              thumbSelectedCount,
+              " of ",
+              pendingImages.length,
+              " image",
+              pendingImages.length !== 1 ? "s" : "",
+              " selected",
+              " \xB7 ",
+              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: selectAllThumbs, className: "text-purple-600 hover:text-purple-700 dark:text-purple-400 dark:hover:text-purple-300", children: "Select all" }),
+              " \xB7 ",
+              /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: deselectAllThumbs, className: "text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300", children: "Deselect all" })
+            ] }) : "Disabled for all images" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: handleThumbEnabledToggle,
+              className: `relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors focus:outline-none ${thumbEnabled ? "bg-blue-600" : "bg-gray-200 dark:bg-gray-700"}`,
+              role: "switch",
+              "aria-checked": thumbEnabled,
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition ${thumbEnabled ? "translate-x-5" : "translate-x-0"}` })
+            }
+          )
+        ] }),
+        thumbEnabled && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-medium text-gray-600 dark:text-gray-400 mb-2", children: "Sizes:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2 flex-wrap", children: THUMBNAIL_SIZE_OPTIONS.map((size) => {
+            const active = thumbSizes.includes(size);
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleThumbSize(size),
+                className: `px-3 py-1 rounded-full text-xs font-medium border transition-colors ${active ? "bg-purple-600 border-purple-600 text-white" : "bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:border-purple-400 hover:text-purple-600"}`,
+                children: [
+                  size,
+                  "px"
+                ]
+              },
+              size
+            );
+          }) }),
+          thumbSizes.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-amber-600 dark:text-amber-400 mt-2", children: "Select at least one size." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-3", children: files.map((f2) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group relative bg-white dark:bg-gray-900 border border-gray-100 dark:border-gray-800 rounded-xl p-4 transition-all hover:shadow-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-lg bg-gray-50 dark:bg-gray-800 flex items-center justify-center flex-shrink-0", children: f2.type.startsWith("image/") ? /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-indigo-500", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "21 15 16 10 5 21" })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-blue-500", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "14 2 14 8 20 8" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate pr-4", children: f2.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "text-xs text-gray-500 font-medium whitespace-nowrap", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium text-gray-900 dark:text-gray-100 truncate pr-4", children: f2.name }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-gray-500 font-medium whitespace-nowrap", children: [
               (f2.size / (1024 * 1024)).toFixed(2),
               " MB"
             ] })
           ] }),
-          f2.status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-xs text-red-500 font-medium mt-1", children: f2.error }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1.5 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          f2.status === "error" ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-red-500 font-medium mt-1", children: f2.error }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-full bg-gray-100 dark:bg-gray-800 rounded-full overflow-hidden mt-2", children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               className: `h-full transition-all duration-300 ${f2.status === "success" ? "bg-green-500" : "bg-blue-500"}`,
               style: { width: `${f2.progress}%` }
             }
-          ) })
+          ) }),
+          showThumbnailUI && thumbEnabled && f2.type.startsWith("image/") && f2.status === "pending" && /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "mt-1.5 inline-flex items-center gap-1.5 cursor-pointer select-none", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "checkbox",
+                checked: thumbFileIds.has(f2.id),
+                onChange: () => toggleFileThumb(f2.id),
+                className: "w-3.5 h-3.5 rounded accent-purple-600 cursor-pointer"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Generate thumbnail" })
+          ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-shrink-0 ml-4", children: [
-          f2.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) }),
-            f2.publicUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-shrink-0 ml-4", children: [
+          f2.status === "success" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) }) }),
+            f2.publicUrl && /* @__PURE__ */ jsxRuntime.jsx(
               "a",
               {
                 href: f2.publicUrl,
@@ -639,34 +890,34 @@ var Uploader = ({
                 rel: "noreferrer",
                 className: "p-1.5 text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-md transition-colors",
                 title: "View online",
-                children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 3 21 3 21 9" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "15 3 21 3 21 9" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
                 ] })
               }
             )
           ] }),
-          f2.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+          f2.status === "error" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-6 w-6 items-center justify-center rounded-full bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+            /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
           ] }) }),
-          f2.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "text-xs font-semibold text-blue-600 dark:text-blue-400", children: [
+          f2.status === "uploading" && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-semibold text-blue-600 dark:text-blue-400", children: [
             f2.progress,
             "%"
           ] }),
-          f2.status === "pending" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          f2.status === "pending" && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               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",
-              children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
               ] })
             }
           )
@@ -675,10 +926,6 @@ var Uploader = ({
     ] })
   ] });
 };
-
-// src/ProjectFilesWidget.tsx
-var import_react2 = __toESM(require("react"));
-var import_jsx_runtime2 = require("react/jsx-runtime");
 var ProjectFilesWidget = ({
   clientOptions,
   folderPath,
@@ -694,16 +941,16 @@ var ProjectFilesWidget = ({
   showDelete = false,
   refreshInterval = 5e3
 }) => {
-  const client = (0, import_react2.useMemo)(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
-  const [files, setFiles] = (0, import_react2.useState)([]);
-  const [loading, setLoading] = (0, import_react2.useState)(false);
-  const [error, setError] = (0, import_react2.useState)(null);
-  const [query, setQuery] = (0, import_react2.useState)("");
-  const [savingKey, setSavingKey] = (0, import_react2.useState)(null);
-  const [deletingKey, setDeletingKey] = (0, import_react2.useState)(null);
-  const lastUpdatedRef = import_react2.default.useRef(null);
-  const isFetchingRef = import_react2.default.useRef(false);
-  const fetchFiles = import_react2.default.useCallback(async (isPolling = false) => {
+  const client = React4.useMemo(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
+  const [files, setFiles] = React4.useState([]);
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [query, setQuery] = React4.useState("");
+  const [savingKey, setSavingKey] = React4.useState(null);
+  const [deletingKey, setDeletingKey] = React4.useState(null);
+  const lastUpdatedRef = React4__namespace.default.useRef(null);
+  const isFetchingRef = React4__namespace.default.useRef(false);
+  const fetchFiles = React4__namespace.default.useCallback(async (isPolling = false) => {
     if (isFetchingRef.current) return;
     isFetchingRef.current = true;
     if (!isPolling) setLoading(true);
@@ -722,10 +969,10 @@ var ProjectFilesWidget = ({
       isFetchingRef.current = false;
     }
   }, [client, folderPath]);
-  (0, import_react2.useEffect)(() => {
+  React4.useEffect(() => {
     fetchFiles();
   }, [fetchFiles]);
-  (0, import_react2.useEffect)(() => {
+  React4.useEffect(() => {
     if (!refreshInterval || refreshInterval <= 0) return;
     const timer = setInterval(() => {
       fetchFiles(true);
@@ -748,10 +995,18 @@ var ProjectFilesWidget = ({
           "content-type": "application/json",
           ...clientOptions?.headers || {}
         };
-        if (clientOptions?.apiKey) {
+        const token = clientOptions?.getToken?.();
+        if (token) {
+          headers["authorization"] = `Bearer ${token}`;
+          if (clientOptions.projectName) {
+            headers["x-project-name"] = clientOptions.projectName;
+          } else if (clientOptions.projectId) {
+            headers["x-project-id"] = clientOptions.projectId;
+          }
+        } else if (clientOptions?.apiKey) {
           const keyHeader = clientOptions.apiKeyHeader || "authorization";
           if (keyHeader === "authorization") {
-            headers["authorization"] = clientOptions.apiKey.startsWith("upk_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
+            headers["authorization"] = clientOptions.apiKey.startsWith("upf_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
           } else {
             headers[keyHeader] = clientOptions.apiKey;
           }
@@ -771,9 +1026,9 @@ var ProjectFilesWidget = ({
       setDeletingKey(null);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           type: "text",
@@ -783,7 +1038,7 @@ var ProjectFilesWidget = ({
           style: { flex: 1, padding: 8, border: "1px solid #e5e7eb", borderRadius: 6 }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           onClick: () => {
@@ -795,26 +1050,26 @@ var ProjectFilesWidget = ({
         }
       )
     ] }),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, color: "#666" }, children: "Loading files\u2026" }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontSize: 12, color: "#b91c1c" }, children: error }),
-    !loading && !error && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("ul", { className: listClassName, style: { listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }, children: [
-      visible.map((f2) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    loading && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#666" }, children: "Loading files\u2026" }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontSize: 12, color: "#b91c1c" }, children: error }),
+    !loading && !error && /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: listClassName, style: { listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }, children: [
+      visible.map((f2) => /* @__PURE__ */ jsxRuntime.jsxs(
         "li",
         {
           className: itemClassName,
           style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 10, display: "flex", justifyContent: "space-between", alignItems: "center" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.originalName }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { fontSize: 12, color: "#666" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.originalName }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 12, color: "#666" }, children: [
                 (f2.size / (1024 * 1024)).toFixed(2),
                 " MB \u2022 ",
                 f2.contentType
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { href: f2.url, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" }),
-              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx("a", { href: f2.url, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   onClick: async () => {
@@ -851,7 +1106,7 @@ var ProjectFilesWidget = ({
                   children: savingKey === f2.key ? "Saving\u2026" : "Use"
                 }
               ),
-              showDelete && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              showDelete && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   onClick: () => handleDelete(f2.key),
@@ -865,17 +1120,26 @@ var ProjectFilesWidget = ({
         },
         f2.key
       )),
-      visible.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { style: { fontSize: 12, color: "#666" }, children: "No files found" })
+      visible.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("li", { style: { fontSize: 12, color: "#666" }, children: "No files found" })
     ] })
   ] });
 };
 
-// src/ConnectProjectDialog.tsx
-var React3 = __toESM(require("react"));
-var Dialog = __toESM(require("@radix-ui/react-dialog"));
-
 // src/projectConnect.ts
 var f = (globalThis.fetch || fetch).bind(globalThis);
+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);
@@ -883,7 +1147,7 @@ async function httpJson(input, init, useFetch) {
     let msg = `Request failed (${res.status})`;
     try {
       const j = await res.json();
-      msg = j?.error || msg;
+      msg = j?.error || j?.message || msg;
     } catch {
     }
     throw new Error(msg);
@@ -894,7 +1158,7 @@ async function listProjects(opts) {
   const url = `${opts.baseUrl.replace(/\/$/, "")}/api/projects`;
   const data = await httpJson(
     url,
-    { method: "GET", credentials: "include" },
+    buildInit(opts, { method: "GET" }),
     opts.fetch
   );
   return data?.projects ?? [];
@@ -903,53 +1167,74 @@ async function createProject(opts) {
   const base = opts.baseUrl.replace(/\/$/, "");
   const created = await httpJson(
     `${base}/api/projects`,
-    {
+    buildInit(opts, {
       method: "POST",
-      credentials: "include",
       headers: { "content-type": "application/json" },
-      body: JSON.stringify({ name: opts.name })
-    },
+      body: JSON.stringify({
+        name: opts.name,
+        isInHouse: opts.isInHouse,
+        freeStorageLimitBytes: opts.freeStorageLimitBytes
+      })
+    }),
     opts.fetch
   );
   const projectId = created?.project?.id;
   if (!projectId) throw new Error("Failed to create project");
+  return { projectId, project: created?.project };
+}
+async function createProjectWithApiKey(opts) {
+  const base = opts.baseUrl.replace(/\/$/, "");
+  const { projectId } = await createProject(opts);
   const keyLabel = opts.keyName || `Plugin key ${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
   const key = await httpJson(
     `${base}/api/projects/${projectId}/keys`,
-    {
+    buildInit(opts, {
       method: "POST",
-      credentials: "include",
       headers: { "content-type": "application/json" },
       body: JSON.stringify({ name: keyLabel })
-    },
+    }),
     opts.fetch
   );
-  const plaintext = key?.key?.plaintext;
+  const plaintext = key?.key?.secret ?? key?.key?.plaintext;
   if (!plaintext) throw new Error("Failed to create API key");
   return { apiKey: plaintext, projectId };
 }
+async function updateProject(opts) {
+  const base = opts.baseUrl.replace(/\/$/, "");
+  const body = {};
+  if (opts.isInHouse !== void 0) body.isInHouse = opts.isInHouse;
+  if (opts.freeStorageLimitBytes !== void 0) body.freeStorageLimitBytes = opts.freeStorageLimitBytes;
+  await httpJson(
+    `${base}/api/projects/${opts.projectId}`,
+    buildInit(opts, {
+      method: "PUT",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify(body)
+    }),
+    opts.fetch
+  );
+}
 async function connectProject(opts) {
   const base = opts.baseUrl.replace(/\/$/, "");
   const keyLabel = opts.keyName || `Plugin key ${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
   const key = await httpJson(
     `${base}/api/projects/${opts.projectId}/keys`,
-    {
+    buildInit(opts, {
       method: "POST",
-      credentials: "include",
       headers: { "content-type": "application/json" },
       body: JSON.stringify({ name: keyLabel })
-    },
+    }),
     opts.fetch
   );
-  const plaintext = key?.key?.plaintext;
+  const plaintext = key?.key?.secret ?? key?.key?.plaintext;
   if (!plaintext) throw new Error("Failed to create API key");
   return { apiKey: plaintext };
 }
 function addApiKeyManually(apiKey) {
   const k = (apiKey || "").trim();
   if (!k) throw new Error("API key is required");
-  if (!/^upk_[A-Za-z0-9]+/.test(k)) {
-    console.warn("Provided API key does not match expected format upk_*");
+  if (!/^upf_[A-Za-z0-9_-]+/.test(k)) {
+    console.warn("Provided API key does not match expected format upf_*");
   }
   return { apiKey: k };
 }
@@ -963,19 +1248,16 @@ function connectUsingApiKey(opts) {
   const client = new UpfilesClient({ baseUrl, apiKey, apiKeyHeader: opts.apiKeyHeader ?? "authorization" });
   return { apiKey, client };
 }
-
-// src/ConnectProjectDialog.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
 function ConnectProjectDialog(props) {
   const { baseUrl, open, onOpenChange, onConnected, fetchImpl, title, description, className } = props;
-  const [mode, setMode] = React3.useState("existing");
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [projects, setProjects] = React3.useState([]);
-  const [selectedProjectId, setSelectedProjectId] = React3.useState("");
-  const [manualKey, setManualKey] = React3.useState("");
-  const [newProjectName, setNewProjectName] = React3.useState("");
-  const resetState = React3.useCallback(() => {
+  const [mode, setMode] = React4__namespace.useState("existing");
+  const [loading, setLoading] = React4__namespace.useState(false);
+  const [error, setError] = React4__namespace.useState(null);
+  const [projects, setProjects] = React4__namespace.useState([]);
+  const [selectedProjectId, setSelectedProjectId] = React4__namespace.useState("");
+  const [manualKey, setManualKey] = React4__namespace.useState("");
+  const [newProjectName, setNewProjectName] = React4__namespace.useState("");
+  const resetState = React4__namespace.useCallback(() => {
     setMode("existing");
     setLoading(false);
     setError(null);
@@ -984,7 +1266,7 @@ function ConnectProjectDialog(props) {
     setManualKey("");
     setNewProjectName("");
   }, []);
-  React3.useEffect(() => {
+  React4__namespace.useEffect(() => {
     const run = async () => {
       if (!open || mode !== "existing") return;
       try {
@@ -1036,7 +1318,7 @@ function ConnectProjectDialog(props) {
       setLoading(true);
       setError(null);
       if (!newProjectName.trim()) throw new Error("Project name is required");
-      const { apiKey, projectId } = await createProject({ baseUrl, name: newProjectName.trim(), fetch: fetchImpl });
+      const { apiKey, projectId } = await createProjectWithApiKey({ baseUrl, name: newProjectName.trim(), fetch: fetchImpl });
       onConnected(apiKey, { projectId, source: "new" });
       onOpenChange(false);
       resetState();
@@ -1046,8 +1328,8 @@ function ConnectProjectDialog(props) {
       setLoading(false);
     }
   };
-  const ModeSwitcher = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const ModeSwitcher = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -1056,7 +1338,7 @@ function ConnectProjectDialog(props) {
         children: "Connect existing"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -1065,7 +1347,7 @@ function ConnectProjectDialog(props) {
         children: "Add API key"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -1075,19 +1357,19 @@ function ConnectProjectDialog(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Root, { open, onOpenChange: (o) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open, onOpenChange: (o) => {
     if (!o) resetState();
     onOpenChange(o);
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Dialog.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Overlay, { className: "fixed inset-0 bg-black/40" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Content, { className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-md rounded-lg border bg-white p-4 shadow-lg ${className ?? ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Title, { className: "text-lg font-semibold", children: title ?? "Connect to Upfiles" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Description, { className: "text-sm text-muted-foreground", children: description ?? "Choose how to connect your project to retrieve an API key." }),
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/40" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Content, { className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-md rounded-lg border bg-white p-4 shadow-lg ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-lg font-semibold", children: title ?? "Connect to Upfiles" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Description, { className: "text-sm text-muted-foreground", children: description ?? "Choose how to connect your project to retrieve an API key." }),
       ModeSwitcher,
-      error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
-      mode === "existing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm font-medium", children: "Project" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
+      mode === "existing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Project" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -1095,14 +1377,14 @@ function ConnectProjectDialog(props) {
             onChange: (e) => setSelectedProjectId(e.target.value),
             disabled: loading,
             children: [
-              projects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: loading ? "Loading..." : "No projects found" }),
-              projects.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: p.id, children: p.name }, p.id))
+              projects.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: loading ? "Loading..." : "No projects found" }),
+              projects.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, children: p.name }, p.id))
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1114,9 +1396,9 @@ function ConnectProjectDialog(props) {
           )
         ] })
       ] }),
-      mode === "manual" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm font-medium", children: "API key" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      mode === "manual" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "API key" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -1126,9 +1408,9 @@ function ConnectProjectDialog(props) {
             disabled: loading
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1140,9 +1422,9 @@ function ConnectProjectDialog(props) {
           )
         ] })
       ] }),
-      mode === "new" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm font-medium", children: "Project name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      mode === "new" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Project name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -1152,10 +1434,10 @@ function ConnectProjectDialog(props) {
             disabled: loading
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-muted-foreground", children: "A project will be created in your Upfiles account and an API key generated." }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "A project will be created in your Upfiles account and an API key generated." }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1205,60 +1487,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
-var React4 = __toESM(require("react"));
-var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var IconGrid = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
+var IconGrid = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "7", x: "3", y: "3", rx: "1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "7", x: "14", y: "3", rx: "1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "7", x: "14", y: "14", rx: "1" }),
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "7", height: "7", x: "3", y: "14", rx: "1" })
+] });
+var IconUploadCloud = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12v9" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m16 16-4-4-4 4" })
 ] });
-var IconUploadCloud = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 12v9" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m16 16-4-4-4 4" })
+var IconFolder = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "0", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" }) });
+var IconFolderPlus = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2Z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "10", y2: "16" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", x2: "15", y1: "13", y2: "13" })
 ] });
-var IconFolder = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "12", x2: "12", y1: "10", y2: "16" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "9", x2: "15", y1: "13", y2: "13" })
+var IconSearch = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
 ] });
-var IconSearch = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m21 21-4.3-4.3" })
+var IconRefresh = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3v5h-5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16H3v5" })
 ] });
-var IconRefresh = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 3v5h-5" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 16H3v5" })
+var IconChevronRight = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) });
+var IconTrash = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
 ] });
-var IconChevronRight = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m9 18 6-6-6-6" }) });
-var IconTrash = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M3 6h18" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
+var IconX = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
 ] });
-var IconX = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 6 6 18" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 6 12 12" })
+var IconHome = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 22 9 12 15 12 15 22" })
 ] });
-var IconHome = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "9 22 9 12 15 12 15 22" })
+var IconImage = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
 ] });
-var IconImage = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
-  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+var IconLoader = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var IconLayers = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 17 12 22 22 17" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 12 12 17 22 12" })
 ] });
-var IconLoader = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var VisuallyHidden = ({ children }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    style: {
+      position: "absolute",
+      width: "1px",
+      height: "1px",
+      padding: "0",
+      margin: "-1px",
+      overflow: "hidden",
+      clip: "rect(0, 0, 0, 0)",
+      whiteSpace: "nowrap",
+      border: "0"
+    },
+    children
+  }
+);
 function ImageManager(props) {
   const {
     open,
@@ -1266,6 +1565,7 @@ function ImageManager(props) {
     clientOptions,
     projectId,
     folderPath,
+    userId,
     title,
     description,
     className,
@@ -1279,25 +1579,40 @@ 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);
-  const [error, setError] = React4.useState(null);
-  const [currentFolderId, setCurrentFolderId] = React4.useState(void 0);
-  const [breadcrumbs, setBreadcrumbs] = React4.useState([{ id: void 0, name: "Home" }]);
-  const [files, setFiles] = React4.useState([]);
-  const [folders, setFolders] = React4.useState([]);
-  const [query, setQuery] = React4.useState("");
-  const [deleting, setDeleting] = React4.useState(null);
-  const [showCreateFolder, setShowCreateFolder] = React4.useState(false);
-  const [newFolderName, setNewFolderName] = React4.useState("");
-  const [creatingFolder, setCreatingFolder] = React4.useState(false);
-  const [fileToDelete, setFileToDelete] = React4.useState(null);
-  const [thumbnailSelectorFile, setThumbnailSelectorFile] = React4.useState(null);
-  const lastUpdatedRef = React4.useRef(null);
-  const isFetchingRef = React4.useRef(false);
-  const load = React4.useCallback(async (isPolling = false) => {
+  const [activeView, setActiveView] = React4__namespace.useState(mode === "upload" ? "upload" : "browse");
+  const [loading, setLoading] = React4__namespace.useState(false);
+  const [error, setError] = React4__namespace.useState(null);
+  const [currentFolderId, setCurrentFolderId] = React4__namespace.useState(void 0);
+  const [breadcrumbs, setBreadcrumbs] = React4__namespace.useState([{ id: void 0, name: "Home" }]);
+  const [files, setFiles] = React4__namespace.useState([]);
+  const [folders, setFolders] = React4__namespace.useState([]);
+  const [query, setQuery] = React4__namespace.useState("");
+  const [deleting, setDeleting] = React4__namespace.useState(null);
+  const [showCreateFolder, setShowCreateFolder] = React4__namespace.useState(false);
+  const [newFolderName, setNewFolderName] = React4__namespace.useState("");
+  const [creatingFolder, setCreatingFolder] = React4__namespace.useState(false);
+  const [fileToDelete, setFileToDelete] = React4__namespace.useState(null);
+  const [thumbnailSelectorFile, setThumbnailSelectorFile] = React4__namespace.useState(null);
+  const [selectedThumbnailForFile, setSelectedThumbnailForFile] = React4__namespace.useState(null);
+  const [previewFile, setPreviewFile] = React4__namespace.useState(null);
+  const [generatingThumbnails, setGeneratingThumbnails] = React4__namespace.useState(false);
+  const lastUpdatedRef = React4__namespace.useRef(null);
+  const isFetchingRef = React4__namespace.useRef(false);
+  const deduplicateFiles = React4__namespace.useCallback((files2) => {
+    const seen = /* @__PURE__ */ new Set();
+    return files2.filter((file) => {
+      if (seen.has(file.key)) {
+        return false;
+      }
+      seen.add(file.key);
+      return true;
+    });
+  }, []);
+  const load = React4__namespace.useCallback(async (isPolling = false) => {
     if (isFetchingRef.current) return;
     isFetchingRef.current = true;
     try {
@@ -1307,13 +1622,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) {
@@ -1323,7 +1639,7 @@ function ImageManager(props) {
       isFetchingRef.current = false;
     }
   }, [clientOptions, folderPath, currentFolderId, breadcrumbs]);
-  React4.useEffect(() => {
+  React4__namespace.useEffect(() => {
     if (!open) {
       setFiles([]);
       setFolders([]);
@@ -1336,35 +1652,11 @@ 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 visibleFiles = React4__namespace.useMemo(() => {
     const q = query.trim().toLowerCase();
     return !q ? files : files.filter((i) => (i.originalName || "").toLowerCase().includes(q));
   }, [files, query]);
-  const visibleFolders = React4.useMemo(() => {
+  const visibleFolders = React4__namespace.useMemo(() => {
     const q = query.trim().toLowerCase();
     return !q ? folders : folders.filter((f2) => (f2.name || "").toLowerCase().includes(q));
   }, [folders, query]);
@@ -1383,10 +1675,18 @@ function ImageManager(props) {
           "content-type": "application/json",
           ...clientOptions?.headers || {}
         };
-        if (clientOptions?.apiKey) {
+        const token = clientOptions?.getToken?.();
+        if (token) {
+          headers["authorization"] = `Bearer ${token}`;
+          if (clientOptions.projectName) {
+            headers["x-project-name"] = clientOptions.projectName;
+          } else if (clientOptions.projectId) {
+            headers["x-project-id"] = clientOptions.projectId;
+          }
+        } else if (clientOptions?.apiKey) {
           const keyHeader = clientOptions.apiKeyHeader || "authorization";
           if (keyHeader === "authorization") {
-            headers["authorization"] = clientOptions.apiKey.startsWith("upk_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
+            headers["authorization"] = clientOptions.apiKey.startsWith("upf_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
           } else {
             headers[keyHeader] = clientOptions.apiKey;
           }
@@ -1433,7 +1733,7 @@ function ImageManager(props) {
     setCurrentFolderId(target.id);
     setQuery("");
   };
-  const uploadFoldersList = React4.useMemo(() => {
+  const uploadFoldersList = React4__namespace.useMemo(() => {
     const options = [];
     options.push({ id: "root", name: "Root ( / )", path: void 0 });
     if (currentFolderId) {
@@ -1446,65 +1746,87 @@ function ImageManager(props) {
     });
     return options;
   }, [breadcrumbs, currentFolderId, folders]);
-  const [selectedUploadFolder, setSelectedUploadFolder] = React4.useState("current");
-  const activeBreadcrumbPath = React4.useMemo(() => {
+  const handleThumbnailClick = React4__namespace.useCallback(async (f2) => {
+    if (f2.thumbnails && f2.thumbnails.length > 0) {
+      setThumbnailSelectorFile(f2);
+      setSelectedThumbnailForFile(null);
+      return;
+    }
+    setGeneratingThumbnails(true);
+    setThumbnailSelectorFile(f2);
+    setSelectedThumbnailForFile(null);
+    try {
+      const client = new UpfilesClient(clientOptions);
+      const result = await client.generateThumbnails(f2.key);
+      const updatedFile = { ...f2, thumbnails: result.thumbnails };
+      setThumbnailSelectorFile(updatedFile);
+      setFiles((prev) => prev.map((file) => file.key === f2.key ? updatedFile : file));
+    } catch (e) {
+      console.error("Failed to generate thumbnails:", e);
+    } finally {
+      setGeneratingThumbnails(false);
+    }
+  }, [clientOptions]);
+  const [selectedUploadFolder, setSelectedUploadFolder] = React4__namespace.useState("current");
+  const activeBreadcrumbPath = React4__namespace.useMemo(() => {
     return breadcrumbs.length > 1 ? breadcrumbs.slice(1).map((b) => b.name).join("/") + "/" : void 0;
   }, [breadcrumbs]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Dialog2.Root, { open, onOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Dialog2.Portal, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Overlay, { className: "fixed inset-0 bg-gray-900/50 backdrop-blur-sm z-50 transition-all duration-300" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-        Dialog2.Content,
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Root, { open, onOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/60 z-[9999]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Dialog2__namespace.Content,
         {
-          className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[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__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "p-6", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("h2", { className: "text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconImage, { className: "text-blue-600" }),
+            /* @__PURE__ */ jsxRuntime.jsx(VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { children: title ?? "Media Library" }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-64 min-w-[256px] bg-gray-50 dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col flex-shrink-0", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-lg font-bold text-gray-900 dark:text-white flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconImage, { className: "text-blue-600" }),
                   title ?? "Media Library"
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-xs text-gray-500 mt-1", children: description ?? "Manage your assets" })
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-gray-500 mt-1", children: description ?? "Manage your assets" })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("nav", { className: "flex-1 px-3 space-y-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: "flex-1 px-3 space-y-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
                   {
                     onClick: () => setActiveView("browse"),
                     className: `w-full flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors ${activeView === "browse" ? "bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"}`,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconGrid, { className: "w-4 h-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(IconGrid, { className: "w-4 h-4" }),
                       "All Files"
                     ]
                   }
                 ),
-                mode === "full" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                mode === "full" && /* @__PURE__ */ jsxRuntime.jsxs(
                   "button",
                   {
                     onClick: () => setActiveView("upload"),
                     className: `w-full flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg transition-colors ${activeView === "upload" ? "bg-white dark:bg-gray-800 text-blue-600 dark:text-blue-400 shadow-sm" : "text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"}`,
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconUploadCloud, { className: "w-4 h-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(IconUploadCloud, { className: "w-4 h-4" }),
                       "Upload New"
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "p-4 border-t border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-xs text-center text-gray-400", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 border-t border-gray-200 dark:border-gray-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-xs text-center text-gray-400", children: [
                 files.length,
                 " files \u2022 ",
                 folders.length,
                 " folders"
               ] }) })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1 flex flex-col bg-white dark:bg-gray-950 relative", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex items-center gap-4 flex-1", children: activeView === "browse" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center text-sm text-gray-500 overflow-hidden whitespace-nowrap", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => handleBreadcrumbClick(0), className: "hover:text-blue-600 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconHome, { className: "w-4 h-4" }) }),
-                    breadcrumbs.slice(1).map((b, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(React4.Fragment, { children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconChevronRight, { className: "w-4 h-4 text-gray-300 mx-1" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 flex flex-col bg-white dark:bg-gray-950 relative", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-16 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between px-6 gap-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 flex-1", children: activeView === "browse" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center text-sm text-gray-500 overflow-hidden whitespace-nowrap", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => handleBreadcrumbClick(0), className: "hover:text-blue-600 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx(IconHome, { className: "w-4 h-4" }) }),
+                    breadcrumbs.slice(1).map((b, i) => /* @__PURE__ */ jsxRuntime.jsxs(React4__namespace.Fragment, { children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(IconChevronRight, { className: "w-4 h-4 text-gray-300 mx-1" }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
                         "button",
                         {
                           onClick: () => handleBreadcrumbClick(i + 1),
@@ -1512,23 +1834,23 @@ function ImageManager(props) {
                           children: b.name
                         }
                       )
-                    ] }, b.id || i))
+                    ] }, `${b.id || "breadcrumb"}-${i}`))
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
                     "button",
                     {
                       onClick: () => load(),
                       disabled: loading,
                       className: "p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-md transition-all disabled:opacity-50",
                       title: "Refresh",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconRefresh, { className: `w-4 h-4 ${loading ? "animate-spin" : ""}` })
+                      children: /* @__PURE__ */ jsxRuntime.jsx(IconRefresh, { className: `w-4 h-4 ${loading ? "animate-spin" : ""}` })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative flex-1 max-w-sm group", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-px bg-gray-200 dark:bg-gray-700 mx-2" }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 max-w-sm group", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: "absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 group-focus-within:text-blue-500 transition-colors" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(
                       "input",
                       {
                         value: query,
@@ -1539,45 +1861,58 @@ function ImageManager(props) {
                     )
                   ] })
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  activeView === "browse" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(IconFolderPlus, { className: "w-5 h-5" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(IconLoader, { className: "w-5 h-5" }) })
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                  activeView === "browse" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setShowCreateFolder(true), className: "p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10 rounded-lg transition-colors", title: "New Folder", children: /* @__PURE__ */ jsxRuntime.jsx(IconFolderPlus, { className: "w-5 h-5" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => load(), className: `p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/10 rounded-lg transition-colors ${loading ? "animate-spin text-blue-600" : ""}`, title: "Refresh", children: /* @__PURE__ */ jsxRuntime.jsx(IconLoader, { className: "w-5 h-5" }) })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(IconX, { className: "w-5 h-5" }) }) })
+                  /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: "ml-2 p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 rounded-lg transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { className: "w-5 h-5" }) }) })
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-1 overflow-y-auto p-6 bg-gray-50/30 dark:bg-gray-900/30", children: [
-                activeView === "browse" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-                  error && /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)("span", { children: error }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsxs)(
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto p-6 bg-gray-50/30 dark:bg-gray-900/30", children: [
+                activeView === "browse" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-6 bg-red-50 text-red-600 p-4 rounded-lg text-sm border border-red-100 flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: error }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: gridClassName ?? "grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-6", children: [
+                    visibleFolders.map((folder) => /* @__PURE__ */ jsxRuntime.jsxs(
                       "div",
                       {
                         onClick: () => handleNavigate(folder),
                         className: "group flex flex-col items-center gap-3 p-4 rounded-xl border border-gray-200/60 bg-white hover:border-blue-200 hover:shadow-lg hover:shadow-blue-500/5 hover:-translate-y-1 transition-all cursor-pointer",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(IconFolder, { className: "w-8 h-8 drop-shadow-sm" }) }),
-                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm font-medium text-gray-700 truncate w-full text-center", children: folder.name })
+                          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-12 bg-blue-50 rounded-lg flex items-center justify-center text-blue-500 group-hover:scale-110 transition-transform", children: /* @__PURE__ */ jsxRuntime.jsx(IconFolder, { className: "w-8 h-8 drop-shadow-sm" }) }),
+                          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-gray-700 truncate w-full text-center", children: folder.name })
                         ]
                       },
                       folder.id
                     )),
                     visibleFiles.map((f2) => {
-                      const fWithThumbs = f2;
-                      const bestThumb = fWithThumbs.thumbnails?.sort((a, b) => a.size - b.size).find((t) => t.size >= 300) || fWithThumbs.thumbnails?.[fWithThumbs.thumbnails?.length - 1];
-                      const thumbUrl = bestThumb?.url || f2.url;
-                      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+                      const displayUrl = f2.url;
+                      const hasThumbnails = f2.thumbnails && f2.thumbnails.length > 0;
+                      return /* @__PURE__ */ jsxRuntime.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__ */ (0, import_jsx_runtime4.jsx)("img", { src: thumbUrl, alt: "", className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2 justify-center transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300", children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                            /* @__PURE__ */ jsxRuntime.jsx("img", { src: displayUrl, alt: f2.originalName, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" }),
+                            f2.contentType?.startsWith("image/") && /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                onClick: (e) => {
+                                  e.stopPropagation();
+                                  handleThumbnailClick(f2);
+                                },
+                                className: `absolute top-2 left-2 p-1.5 text-white rounded-md opacity-0 group-hover:opacity-100 transition-opacity shadow-lg ${hasThumbnails ? "bg-purple-600/90 hover:bg-purple-500" : "bg-gray-600/90 hover:bg-purple-500"}`,
+                                title: hasThumbnails ? "View Thumbnails" : "Generate Thumbnails",
+                                children: /* @__PURE__ */ jsxRuntime.jsx(IconLayers, { className: "w-4 h-4" })
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 justify-center transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
                                 "button",
                                 {
-                                  onClick: () => {
+                                  onClick: (e) => {
+                                    e.stopPropagation();
                                     onSelect({
                                       url: f2.url,
                                       key: f2.key,
@@ -1592,7 +1927,7 @@ function ImageManager(props) {
                                   children: "Select"
                                 }
                               ),
-                              showDelete && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              showDelete && /* @__PURE__ */ jsxRuntime.jsx(
                                 "button",
                                 {
                                   onClick: (e) => {
@@ -1600,57 +1935,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__ */ (0, import_jsx_runtime4.jsx)(IconTrash, { className: "w-4 h-4" })
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(IconTrash, { className: "w-4 h-4" })
                                 }
                               )
                             ] }) }),
-                            /* @__PURE__ */ (0, import_jsx_runtime4.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() })
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 bg-black/50 backdrop-blur-md text-white text-[10px] px-1.5 py-0.5 rounded opacity-0 group-hover:opacity-100 transition-opacity", children: f2.originalName.split(".").pop()?.toUpperCase() })
                           ]
                         },
                         f2.key
                       );
                     })
                   ] }),
-                  !loading && visibleFolders.length === 0 && visibleFiles.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "h-full flex flex-col items-center justify-center text-gray-400", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconSearch, { className: "w-8 h-8 opacity-40" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "text-gray-900 font-medium mb-1", children: "No Assets Found" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-sm", children: "Try uploading a file or creating a new folder." })
+                  !loading && visibleFolders.length === 0 && visibleFiles.length === 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "h-full flex flex-col items-center justify-center text-gray-400", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-16 h-16 bg-gray-100 rounded-2xl flex items-center justify-center mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(IconSearch, { className: "w-8 h-8 opacity-40" }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-gray-900 font-medium mb-1", children: "No Assets Found" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm", children: "Try uploading a file or creating a new folder." })
                   ] })
                 ] }),
-                activeView === "upload" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "h-full flex flex-col items-center justify-center max-w-2xl mx-auto", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "w-full bg-white rounded-2xl border border-gray-200 p-8 shadow-sm", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("h3", { className: "text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconUploadCloud, { className: "text-blue-500" }),
+                activeView === "upload" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full flex flex-col items-center justify-center max-w-2xl mx-auto gap-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-white rounded-2xl border border-gray-200 p-8 shadow-sm", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-semibold text-gray-900 mb-6 flex items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(IconUploadCloud, { className: "text-blue-500" }),
                     "Upload Files"
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mb-6", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Target Folder" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex gap-2", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm font-medium text-gray-700 mb-2", children: "Target Folder" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
                         "select",
                         {
                           value: selectedUploadFolder,
                           onChange: (e) => setSelectedUploadFolder(e.target.value),
                           className: "block w-full rounded-lg border-gray-200 bg-gray-50 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 p-2.5",
-                          children: uploadFoldersList.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: opt.id, children: opt.name }, opt.id))
+                          children: uploadFoldersList.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.id, children: opt.name }, opt.id))
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => setShowCreateFolder(true), className: "px-3 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 transition-colors", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconFolderPlus, { className: "w-5 h-5" }) })
+                      /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setShowCreateFolder(true), className: "px-3 bg-gray-100 hover:bg-gray-200 rounded-lg text-gray-600 transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx(IconFolderPlus, { className: "w-5 h-5" }) })
                     ] })
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  /* @__PURE__ */ jsxRuntime.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,
@@ -1658,26 +2006,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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(IconUploadCloud, { className: "w-6 h-6" }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-gray-900 font-medium", children: "Click to upload or drag and drop" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { className: "text-xs text-gray-500 mt-1", children: [
+                      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-12 h-12 bg-blue-100 text-blue-600 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(IconUploadCloud, { className: "w-6 h-6" }) }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-gray-900 font-medium", children: "Click to upload or drag and drop" }),
+                          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-gray-500 mt-1", children: [
                             "Supports PNG, JPG, GIF up to ",
                             Math.round(maxFileSize / 1024 / 1024),
                             "MB"
@@ -1693,11 +2046,12 @@ function ImageManager(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Root, { open: showCreateFolder, onOpenChange: setShowCreateFolder, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Dialog2.Portal, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 z-[60]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.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-[61] outline-none", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Title, { className: "text-lg font-semibold text-gray-900 mb-4", children: "New Folder" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: showCreateFolder, onOpenChange: setShowCreateFolder, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/40 z-[10010]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl z-[10011] outline-none", "aria-describedby": "new-folder-description", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-lg font-semibold text-gray-900 mb-4", children: "New Folder" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Description, { id: "new-folder-description", className: "sr-only", children: "Create a new folder to organize your files" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             autoFocus: true,
@@ -1708,9 +2062,9 @@ function ImageManager(props) {
             onKeyDown: (e) => e.key === "Enter" && handleCreateFolder()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-end gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.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__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setShowCreateFolder(false), className: "px-4 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 rounded-lg", children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: handleCreateFolder,
@@ -1722,21 +2076,21 @@ function ImageManager(props) {
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Root, { open: !!fileToDelete, onOpenChange: (open2) => !open2 && setFileToDelete(null), children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Dialog2.Portal, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40 z-[80]" }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.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-[81]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Dialog2.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Delete File" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(Dialog2.Description, { className: "text-gray-600 mb-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: !!fileToDelete, onOpenChange: (open2) => !open2 && setFileToDelete(null), children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/40 z-[10020]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md rounded-xl bg-white p-6 shadow-2xl z-[10021]", "aria-describedby": "delete-file-description", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Delete File" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Description, { id: "delete-file-description", className: "text-gray-600 mb-6", children: [
           "Are you sure you want to delete ",
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "font-semibold text-gray-900", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900", children: [
             '"',
             fileToDelete?.originalName,
             '"'
           ] }),
           "?"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-end gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: () => setFileToDelete(null),
@@ -1744,7 +2098,7 @@ function ImageManager(props) {
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: handleDelete,
@@ -1755,23 +2109,363 @@ function ImageManager(props) {
           )
         ] })
       ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: !!thumbnailSelectorFile, onOpenChange: (open2) => !open2 && setThumbnailSelectorFile(null), children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/50 z-[10030]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl max-h-[80vh] rounded-xl bg-white shadow-2xl z-[10031] overflow-hidden", "aria-describedby": "thumbnail-selector-description", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 border-b border-gray-200", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select Thumbnail" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Description, { id: "thumbnail-selector-description", className: "text-gray-600", children: [
+            "Choose a thumbnail size for ",
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900", children: [
+              '"',
+              thumbnailSelectorFile?.originalName,
+              '"'
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 overflow-y-auto max-h-[60vh]", children: [
+          generatingThumbnails && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-center gap-3 py-8 text-gray-500", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconLoader, { className: "w-5 h-5 animate-spin" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "Generating thumbnails..." })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 ${generatingThumbnails ? "opacity-50 pointer-events-none" : ""}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                onClick: () => setSelectedThumbnailForFile(null),
+                className: `group cursor-pointer rounded-lg border-2 overflow-hidden transition-all ${selectedThumbnailForFile === null ? "border-blue-500 ring-2 ring-blue-200" : "border-gray-200 hover:border-blue-300"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square bg-gray-100 flex items-center justify-center relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: thumbnailSelectorFile?.url,
+                        alt: "Original",
+                        className: "w-full h-full object-cover"
+                      }
+                    ),
+                    selectedThumbnailForFile === null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-blue-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-white", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-medium text-sm text-gray-900", children: "Original" }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: "Full size" })
+                  ] })
+                ]
+              }
+            ),
+            thumbnailSelectorFile?.thumbnails?.map((thumbnail) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                onClick: () => setSelectedThumbnailForFile(thumbnail),
+                className: `group cursor-pointer rounded-lg border-2 overflow-hidden transition-all ${selectedThumbnailForFile?.id === thumbnail.id ? "border-blue-500 ring-2 ring-blue-200" : "border-gray-200 hover:border-blue-300"}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square bg-gray-100 flex items-center justify-center relative", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: thumbnail.url,
+                        alt: `${thumbnail.size}px thumbnail`,
+                        className: "w-full h-full object-cover"
+                      }
+                    ),
+                    selectedThumbnailForFile?.id === thumbnail.id && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-blue-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-4 h-4 text-white", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z", clipRule: "evenodd" }) }) }) })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-white", children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "font-medium text-sm text-gray-900", children: [
+                      thumbnail.size,
+                      "px"
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-gray-500", children: thumbnail.sizeType || "Thumbnail" })
+                  ] })
+                ]
+              },
+              thumbnail.id
+            ))
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 border-t border-gray-200 flex justify-end gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setThumbnailSelectorFile(null),
+              className: "px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 rounded-lg",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => {
+                if (thumbnailSelectorFile) {
+                  onSelect({
+                    url: selectedThumbnailForFile?.url || thumbnailSelectorFile.url,
+                    key: thumbnailSelectorFile.key,
+                    originalName: thumbnailSelectorFile.originalName,
+                    size: thumbnailSelectorFile.size,
+                    contentType: thumbnailSelectorFile.contentType,
+                    thumbnails: thumbnailSelectorFile.thumbnails,
+                    selectedThumbnail: selectedThumbnailForFile || void 0
+                  });
+                  onOpenChange(false);
+                  setThumbnailSelectorFile(null);
+                }
+              },
+              className: "px-4 py-2 text-sm font-medium rounded-lg bg-blue-600 text-white hover:bg-blue-700",
+              children: [
+                "Select ",
+                selectedThumbnailForFile ? `${selectedThumbnailForFile.size}px Thumbnail` : "Original"
+              ]
+            }
+          )
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: !!previewFile, onOpenChange: (open2) => !open2 && setPreviewFile(null), children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/90 z-[10040]", onClick: () => setPreviewFile(null) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[90vh] z-[10041] outline-none", "aria-describedby": "image-preview-description", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/70 to-transparent p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-xl font-semibold mb-1", children: previewFile?.originalName }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Description, { id: "image-preview-description", className: "text-sm text-gray-300", children: [
+              previewFile?.size ? `${(previewFile.size / 1024).toFixed(1)} KB` : "",
+              " \u2022 ",
+              previewFile?.contentType
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setPreviewFile(null),
+              className: "p-2 bg-white/10 hover:bg-white/20 rounded-lg backdrop-blur-md transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { className: "w-6 h-6 text-white" })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: previewFile?.url,
+            alt: previewFile?.originalName,
+            className: "max-w-full max-h-full object-contain",
+            onError: (e) => {
+              const target = e.target;
+              target.style.display = "none";
+              const errorDiv = document.createElement("div");
+              errorDiv.className = "text-white text-center";
+              errorDiv.innerHTML = `
+                      <div class="text-red-400 mb-2">Failed to load image</div>
+                      <div class="text-sm text-gray-400">URL: ${previewFile?.url}</div>
+                    `;
+              target.parentElement?.appendChild(errorDiv);
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/70 to-transparent p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                if (previewFile) {
+                  onSelect({
+                    url: previewFile.url,
+                    key: previewFile.key,
+                    originalName: previewFile.originalName,
+                    size: previewFile.size,
+                    contentType: previewFile.contentType,
+                    thumbnails: previewFile.thumbnails
+                  });
+                  onOpenChange(false);
+                  setPreviewFile(null);
+                }
+              },
+              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__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: previewFile?.url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              onClick: (e) => e.stopPropagation(),
+              className: "px-6 py-2.5 bg-white/10 text-white font-semibold rounded-lg hover:bg-white/20 backdrop-blur-md transition-colors",
+              children: "Open in New Tab"
+            }
+          ),
+          previewFile?.contentType?.startsWith("image/") && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconLayers, { className: "w-5 h-5" }),
+                "Select Thumbnail"
+              ]
+            }
+          )
+        ] }) })
+      ] }) })
     ] }) })
   ] });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ConnectProjectDialog,
-  ImageManager,
-  ProjectFilesWidget,
-  UpfilesClient,
-  Uploader,
-  addApiKeyManually,
-  connectProject,
-  connectUsingApiKey,
-  createClientWithKey,
-  createProject,
-  fetchFileThumbnails,
-  fetchProjectFiles,
-  fetchProjectImagesWithThumbs,
-  listProjects
-});
+function useUpfilesInhouse(config) {
+  const {
+    baseUrl,
+    getToken,
+    userId,
+    projectName = "default",
+    enabled = true
+  } = config;
+  const [state, setState] = React4.useState({ clientOptions: null, projectId: null, loading: false, error: null });
+  const [retryCount, setRetryCount] = React4.useState(0);
+  const [token, setToken] = React4.useState(
+    typeof getToken === "string" ? getToken : null
+  );
+  const getTokenFn = React4.useCallback(() => {
+    return typeof getToken === "function" ? getToken() : getToken;
+  }, [getToken]);
+  React4.useEffect(() => {
+    let cancelled = false;
+    async function resolveToken() {
+      const next = await getTokenFn();
+      if (!cancelled) {
+        setToken(next ?? null);
+      }
+    }
+    resolveToken();
+    window.addEventListener("focus", resolveToken);
+    window.addEventListener("storage", resolveToken);
+    return () => {
+      cancelled = true;
+      window.removeEventListener("focus", resolveToken);
+      window.removeEventListener("storage", resolveToken);
+    };
+  }, [getTokenFn]);
+  const mountedRef = React4.useRef(true);
+  React4.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const buildClientOptions = React4.useCallback(
+    () => ({
+      baseUrl,
+      getToken: getTokenFn,
+      projectName
+    }),
+    [baseUrl, getTokenFn, projectName]
+  );
+  React4.useEffect(() => {
+    if (!enabled || !token || !userId) {
+      setState({ clientOptions: null, projectId: null, loading: false, error: null });
+      return;
+    }
+    let cancelled = false;
+    async function provision() {
+      if (!mountedRef.current) return;
+      setState((prev) => ({ ...prev, loading: true, error: null }));
+      try {
+        const connectOpts = { baseUrl, token };
+        const projects = await listProjects(connectOpts);
+        if (cancelled || !mountedRef.current) return;
+        const existing = projects.find((p) => p.name === projectName);
+        if (existing) {
+          await updateProject({
+            ...connectOpts,
+            projectId: existing.id,
+            isInHouse: true,
+            freeStorageLimitBytes: 2147483648
+            // 2GB
+          });
+        } else {
+          try {
+            await createProject({
+              ...connectOpts,
+              name: projectName,
+              isInHouse: true,
+              freeStorageLimitBytes: 2147483648
+              // 2GB in bytes
+            });
+          } catch (err) {
+            if (err?.message?.includes("409") || err?.message?.includes("duplicate") || err?.message?.includes("already exists")) {
+              const retryProjects = await listProjects(connectOpts);
+              const found = retryProjects.find((p) => p.name === projectName);
+              if (!found) throw err;
+              await updateProject({
+                ...connectOpts,
+                projectId: found.id,
+                isInHouse: true,
+                freeStorageLimitBytes: 2147483648
+                // 2GB
+              });
+            } else {
+              throw err;
+            }
+          }
+        }
+        if (cancelled || !mountedRef.current) return;
+        setState({
+          clientOptions: buildClientOptions(),
+          projectId: null,
+          loading: false,
+          error: null
+        });
+      } catch (err) {
+        if (cancelled || !mountedRef.current) return;
+        setState({
+          clientOptions: null,
+          projectId: null,
+          loading: false,
+          error: err?.message || "Failed to auto-connect upfiles"
+        });
+      }
+    }
+    provision();
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, token, userId, baseUrl, projectName, retryCount, buildClientOptions]);
+  const retry = React4.useCallback(() => {
+    setRetryCount((c) => c + 1);
+  }, []);
+  const clearCache = React4.useCallback(() => {
+    setState({ clientOptions: null, projectId: null, loading: false, error: null });
+  }, []);
+  return {
+    ...state,
+    isReady: !!state.clientOptions,
+    retry,
+    clearCache
+  };
+}
+
+exports.ConnectProjectDialog = ConnectProjectDialog;
+exports.ImageManager = ImageManager;
+exports.ProjectFilesWidget = ProjectFilesWidget;
+exports.StorageQuotaError = StorageQuotaError;
+exports.UpfilesClient = UpfilesClient;
+exports.Uploader = Uploader;
+exports.addApiKeyManually = addApiKeyManually;
+exports.connectProject = connectProject;
+exports.connectUsingApiKey = connectUsingApiKey;
+exports.createClientWithKey = createClientWithKey;
+exports.createProject = createProject;
+exports.createProjectWithApiKey = createProjectWithApiKey;
+exports.fetchFileThumbnails = fetchFileThumbnails;
+exports.fetchProjectFiles = fetchProjectFiles;
+exports.fetchProjectImagesWithThumbs = fetchProjectImagesWithThumbs;
+exports.listProjects = listProjects;
+exports.updateProject = updateProject;
+exports.useUpfilesInhouse = useUpfilesInhouse;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map