npm - @thetechfossil/upfiles - Versions diffs - 1.0.11 → 1.0.12 - Mend

@thetechfossil/upfiles 1.0.11 → 1.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/dist/index.js CHANGED Viewed

@@ -1,64 +1,42 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+'use strict';
+var React4 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var Dialog2 = require('@radix-ui/react-dialog');
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
   }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+  n.default = e;
+  return Object.freeze(n);
+}
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  ConnectProjectDialog: () => ConnectProjectDialog,
-  ImageManager: () => ImageManager,
-  ProjectFilesWidget: () => ProjectFilesWidget,
-  UpfilesClient: () => UpfilesClient,
-  Uploader: () => Uploader,
-  addApiKeyManually: () => addApiKeyManually,
-  connectProject: () => connectProject,
-  connectUsingApiKey: () => connectUsingApiKey,
-  createClientWithKey: () => createClientWithKey,
-  createProject: () => createProject,
-  fetchFileThumbnails: () => fetchFileThumbnails,
-  fetchProjectFiles: () => fetchProjectFiles,
-  fetchProjectImagesWithThumbs: () => fetchProjectImagesWithThumbs,
-  listProjects: () => listProjects
-});
-module.exports = __toCommonJS(index_exports);
+var React4__namespace = /*#__PURE__*/_interopNamespace(React4);
+var Dialog2__namespace = /*#__PURE__*/_interopNamespace(Dialog2);
 // src/client.ts
 var UpfilesClient = class {
   constructor(opts) {
     this.baseUrl = opts.baseUrl?.replace(/\/$/, "");
-    this.presignPath = opts.presignPath ?? "/api/plugin/upload/presigned-url";
+    this.presignPath = opts.presignPath ?? "/api/plugin/upload";
     this.presignUrl = opts.presignUrl;
     this.headers = opts.headers;
     this.withCredentials = opts.withCredentials;
     this.apiKey = opts.apiKey;
     this.apiKeyHeader = opts.apiKeyHeader ?? "authorization";
     this.thumbnailsPath = opts.thumbnailsPath ?? "/api/plugin/thumbnails";
-    this.completionPath = opts.completionPath ?? "/api/plugin/upload/complete";
+    this.completionPath = opts.completionPath ?? "/api/plugin/files";
     this.foldersPath = opts.foldersPath ?? "/api/plugin/folders";
     this.callCompletionEndpoint = opts.callCompletionEndpoint ?? false;
   }
@@ -334,8 +312,7 @@ var UpfilesClient = class {
     };
   }
   getEventsUrl(projectId) {
-    const basePath = this.thumbnailsPath.replace(/\/thumbnails$/, "");
-    const eventsPath = `${basePath}/events`;
+    this.thumbnailsPath.replace(/\/thumbnails$/, "");
     const target = this.baseUrl ? `${this.baseUrl}/api/events` : "/api/events";
     const url = new URL(target, window.location.href);
     if (this.apiKey) {
@@ -347,10 +324,6 @@ var UpfilesClient = class {
     return url.toString();
   }
 };
-// src/Uploader.tsx
-var import_react = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
 var Uploader = ({
   clientOptions,
   multiple = true,
@@ -373,12 +346,12 @@ var Uploader = ({
   recordUrl = "/api/files",
   autoUpload = false
 }) => {
-  const inputRef = (0, import_react.useRef)(null);
-  const client = (0, import_react.useMemo)(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
-  const [files, setFiles] = (0, import_react.useState)([]);
-  const [isUploading, setIsUploading] = (0, import_react.useState)(false);
-  const [isDragOver, setIsDragOver] = (0, import_react.useState)(false);
-  const addFiles = (0, import_react.useCallback)((incoming) => {
+  const inputRef = React4.useRef(null);
+  const client = React4.useMemo(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
+  const [files, setFiles] = React4.useState([]);
+  const [isUploading, setIsUploading] = React4.useState(false);
+  const [isDragOver, setIsDragOver] = React4.useState(false);
+  const addFiles = React4.useCallback((incoming) => {
     const filtered = incoming.filter((f2) => {
       if (f2.size > maxFileSize) {
         return false;
@@ -397,18 +370,18 @@ var Uploader = ({
     }));
     setFiles((prev) => [...prev, ...mapped]);
   }, [files.length, maxFileSize, maxFiles]);
-  const onInputChange = (0, import_react.useCallback)((e) => {
+  const onInputChange = React4.useCallback((e) => {
     const fs = Array.from(e.target.files || []);
     addFiles(fs);
     if (inputRef.current) inputRef.current.value = "";
   }, [addFiles]);
-  const handleDrop = (0, import_react.useCallback)((e) => {
+  const handleDrop = React4.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     setIsDragOver(false);
     addFiles(Array.from(e.dataTransfer.files || []));
   }, [addFiles]);
-  const uploadOne = (0, import_react.useCallback)(async (item) => {
+  const uploadOne = React4.useCallback(async (item) => {
     const update = (patch) => {
       setFiles((prev) => prev.map((f2) => f2.id === item.id ? { ...f2, ...patch } : f2));
     };
@@ -497,7 +470,7 @@ var Uploader = ({
       throw err;
     }
   }, [client, projectId, folderPath, fetchThumbnails, autoRecordToDb, recordUrl, clientOptions, onUploadBegin, onUploadProgress, onClientUploadComplete]);
-  const uploadAll = (0, import_react.useCallback)(async () => {
+  const uploadAll = React4.useCallback(async () => {
     const targets = files.filter((f2) => f2.status === "pending");
     if (!targets.length) return;
     setIsUploading(true);
@@ -517,7 +490,7 @@ var Uploader = ({
       setIsUploading(false);
     }
   }, [files, onComplete, onError, uploadOne]);
-  import_react.default.useEffect(() => {
+  React4__namespace.default.useEffect(() => {
     if (autoUpload && files.some((f2) => f2.status === "pending") && !isUploading) {
       const timer = setTimeout(() => {
         uploadAll();
@@ -525,8 +498,8 @@ var Uploader = ({
       return () => clearTimeout(timer);
     }
   }, [autoUpload, files, isUploading, uploadAll]);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {
         ref: inputRef,
@@ -537,7 +510,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,14 +529,14 @@ 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: [
+          children ?? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-lg font-semibold text-gray-900 dark:text-gray-100", children: "Drop files here or click to browse" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-500 dark:text-gray-400 mt-1", children: [
               multiple ? `Up to ${maxFiles} files` : "Single file",
               " \u2022 Max ",
               (maxFileSize / (1024 * 1024)).toFixed(0),
@@ -573,26 +546,26 @@ var Uploader = ({
         ]
       }
     ),
-    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)(
+    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",
@@ -603,24 +576,24 @@ var Uploader = ({
           )
         ] })
       ] }),
-      /* @__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" })
+      /* @__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"}`,
@@ -628,10 +601,10 @@ var Uploader = ({
             }
           ) })
         ] }),
-        /* @__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,23 +612,23 @@ 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) => {
@@ -664,9 +637,9 @@ var Uploader = ({
               },
               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 +648,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 +663,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 +691,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);
@@ -771,9 +740,9 @@ var ProjectFilesWidget = ({
       setDeletingKey(null);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         "input",
         {
           type: "text",
@@ -783,7 +752,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 +764,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 +820,7 @@ var ProjectFilesWidget = ({
                   children: savingKey === f2.key ? "Saving\u2026" : "Use"
                 }
               ),
-              showDelete && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              showDelete && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
                   onClick: () => handleDelete(f2.key),
@@ -865,15 +834,11 @@ var ProjectFilesWidget = ({
         },
         f2.key
       )),
-      visible.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { style: { fontSize: 12, color: "#666" }, children: "No files found" })
+      visible.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("li", { style: { fontSize: 12, color: "#666" }, children: "No files found" })
     ] })
   ] });
 };
-// src/ConnectProjectDialog.tsx
-var React3 = __toESM(require("react"));
-var Dialog = __toESM(require("@radix-ui/react-dialog"));
 // src/projectConnect.ts
 var f = (globalThis.fetch || fetch).bind(globalThis);
 async function httpJson(input, init, useFetch) {
@@ -963,19 +928,16 @@ function connectUsingApiKey(opts) {
   const client = new UpfilesClient({ baseUrl, apiKey, apiKeyHeader: opts.apiKeyHeader ?? "authorization" });
   return { apiKey, client };
 }
-// src/ConnectProjectDialog.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
 function ConnectProjectDialog(props) {
   const { baseUrl, open, onOpenChange, onConnected, fetchImpl, title, description, className } = props;
-  const [mode, setMode] = React3.useState("existing");
-  const [loading, setLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const [projects, setProjects] = React3.useState([]);
-  const [selectedProjectId, setSelectedProjectId] = React3.useState("");
-  const [manualKey, setManualKey] = React3.useState("");
-  const [newProjectName, setNewProjectName] = React3.useState("");
-  const resetState = React3.useCallback(() => {
+  const [mode, setMode] = React4__namespace.useState("existing");
+  const [loading, setLoading] = React4__namespace.useState(false);
+  const [error, setError] = React4__namespace.useState(null);
+  const [projects, setProjects] = React4__namespace.useState([]);
+  const [selectedProjectId, setSelectedProjectId] = React4__namespace.useState("");
+  const [manualKey, setManualKey] = React4__namespace.useState("");
+  const [newProjectName, setNewProjectName] = React4__namespace.useState("");
+  const resetState = React4__namespace.useCallback(() => {
     setMode("existing");
     setLoading(false);
     setError(null);
@@ -984,7 +946,7 @@ function ConnectProjectDialog(props) {
     setManualKey("");
     setNewProjectName("");
   }, []);
-  React3.useEffect(() => {
+  React4__namespace.useEffect(() => {
     const run = async () => {
       if (!open || mode !== "existing") return;
       try {
@@ -1046,8 +1008,8 @@ function ConnectProjectDialog(props) {
       setLoading(false);
     }
   };
-  const ModeSwitcher = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "grid grid-cols-3 gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  const ModeSwitcher = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -1056,7 +1018,7 @@ function ConnectProjectDialog(props) {
         children: "Connect existing"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -1065,7 +1027,7 @@ function ConnectProjectDialog(props) {
         children: "Add API key"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -1075,19 +1037,19 @@ function ConnectProjectDialog(props) {
       }
     )
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Root, { open, onOpenChange: (o) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open, onOpenChange: (o) => {
     if (!o) resetState();
     onOpenChange(o);
-  }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(Dialog.Portal, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Overlay, { className: "fixed inset-0 bg-black/40" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Content, { className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-md rounded-lg border bg-white p-4 shadow-lg ${className ?? ""}`, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Title, { className: "text-lg font-semibold", children: title ?? "Connect to Upfiles" }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Description, { className: "text-sm text-muted-foreground", children: description ?? "Choose how to connect your project to retrieve an API key." }),
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/40" }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Content, { className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-md rounded-lg border bg-white p-4 shadow-lg ${className ?? ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-lg font-semibold", children: title ?? "Connect to Upfiles" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Description, { className: "text-sm text-muted-foreground", children: description ?? "Choose how to connect your project to retrieve an API key." }),
       ModeSwitcher,
-      error && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
-      mode === "existing" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm font-medium", children: "Project" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
+      mode === "existing" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Project" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
           "select",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -1095,14 +1057,14 @@ function ConnectProjectDialog(props) {
             onChange: (e) => setSelectedProjectId(e.target.value),
             disabled: loading,
             children: [
-              projects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: "", children: loading ? "Loading..." : "No projects found" }),
-              projects.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: p.id, children: p.name }, p.id))
+              projects.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: loading ? "Loading..." : "No projects found" }),
+              projects.map((p) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: p.id, children: p.name }, p.id))
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1114,9 +1076,9 @@ function ConnectProjectDialog(props) {
           )
         ] })
       ] }),
-      mode === "manual" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm font-medium", children: "API key" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      mode === "manual" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "API key" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -1126,9 +1088,9 @@ function ConnectProjectDialog(props) {
             disabled: loading
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1140,9 +1102,9 @@ function ConnectProjectDialog(props) {
           )
         ] })
       ] }),
-      mode === "new" && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("label", { className: "text-sm font-medium", children: "Project name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      mode === "new" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium", children: "Project name" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             className: "w-full rounded border px-3 py-2 text-sm",
@@ -1152,10 +1114,10 @@ function ConnectProjectDialog(props) {
             disabled: loading
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "text-xs text-muted-foreground", children: "A project will be created in your Upfiles account and an API key generated." }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex justify-end gap-2 pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Dialog.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "A project will be created in your Upfiles account and an API key generated." }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Close, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               type: "button",
@@ -1205,60 +1167,60 @@ 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__ */ (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 IconUploadCloud = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 14.899A7 7 0 1 1 15.71 8h1.79a4.5 4.5 0 0 1 2.5 8.242" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12v9" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m16 16-4-4-4 4" })
 ] });
-var IconFolder = ({ className }) => /* @__PURE__ */ (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 IconFolder = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "currentColor", stroke: "currentColor", strokeWidth: "0", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" }) });
+var IconFolderPlus = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 2H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2Z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", x2: "12", y1: "10", y2: "16" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", x2: "15", y1: "13", y2: "13" })
 ] });
-var IconSearch = ({ className }) => /* @__PURE__ */ (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 IconSearch = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 21-4.3-4.3" })
 ] });
-var IconRefresh = ({ className }) => /* @__PURE__ */ (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 IconRefresh = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 3v5h-5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16H3v5" })
 ] });
-var IconChevronRight = ({ className }) => /* @__PURE__ */ (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 IconChevronRight = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) });
+var IconTrash = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 6h18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "10", x2: "10", y1: "11", y2: "17" }),
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "14", x2: "14", y1: "11", y2: "17" })
 ] });
-var IconX = ({ className }) => /* @__PURE__ */ (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 IconX = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 6 6 18" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m6 6 12 12" })
 ] });
-var IconHome = ({ className }) => /* @__PURE__ */ (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 IconHome = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 22 9 12 15 12 15 22" })
 ] });
-var IconImage = ({ className }) => /* @__PURE__ */ (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 IconImage = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+] });
+var IconLoader = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+var IconLayers = ({ className }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 17 12 22 22 17" }),
+  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "2 12 12 17 22 12" })
 ] });
-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" }) });
 function ImageManager(props) {
   const {
     open,
@@ -1281,23 +1243,35 @@ function ImageManager(props) {
     showDelete = true,
     refreshInterval = 5e3
   } = 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 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 {
@@ -1313,7 +1287,7 @@ function ImageManager(props) {
       const { items: list, updatedAt } = filesData;
       if (isPolling && updatedAt && updatedAt === lastUpdatedRef.current) {
       }
-      setFiles(list);
+      setFiles(deduplicateFiles(list));
       setFolders(foldersData);
       lastUpdatedRef.current = updatedAt;
     } catch (e) {
@@ -1323,7 +1297,7 @@ function ImageManager(props) {
       isFetchingRef.current = false;
     }
   }, [clientOptions, folderPath, currentFolderId, breadcrumbs]);
-  React4.useEffect(() => {
+  React4__namespace.useEffect(() => {
     if (!open) {
       setFiles([]);
       setFolders([]);
@@ -1336,7 +1310,7 @@ function ImageManager(props) {
       load();
     }
   }, [open, activeView, load, mode]);
-  React4.useEffect(() => {
+  React4__namespace.useEffect(() => {
     if (!open) return;
     const client = new UpfilesClient(clientOptions);
     const url = client.getEventsUrl(projectId);
@@ -1348,7 +1322,7 @@ function ImageManager(props) {
           const newFile = payload.data.file;
           setFiles((prev) => {
             if (prev.find((f2) => f2.key === newFile.key)) return prev;
-            return [newFile, ...prev];
+            return deduplicateFiles([newFile, ...prev]);
           });
         } else if (payload.type === "file:deleted") {
           const deletedKey = payload.data.fileKey || payload.data.file?.key;
@@ -1360,11 +1334,11 @@ function ImageManager(props) {
     };
     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]);
@@ -1433,7 +1407,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 +1420,82 @@ function ImageManager(props) {
     });
     return options;
   }, [breadcrumbs, currentFolderId, folders]);
-  const [selectedUploadFolder, setSelectedUploadFolder] = React4.useState("current");
-  const activeBreadcrumbPath = React4.useMemo(() => {
+  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 backdrop-blur-sm z-50 transition-all duration-300 flex items-center justify-center" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        Dialog2__namespace.Content,
         {
-          className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[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-[51] 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(
+              Dialog2__namespace.Title,
+              {
+                style: {
+                  position: "absolute",
+                  width: "1px",
+                  height: "1px",
+                  padding: "0",
+                  margin: "-1px",
+                  overflow: "hidden",
+                  clip: "rect(0, 0, 0, 0)",
+                  whiteSpace: "nowrap",
+                  border: "0"
+                },
+                children: title ?? "Media Library"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.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 +1503,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,26 +1530,26 @@ 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
@@ -1567,17 +1558,19 @@ function ImageManager(props) {
                       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)(
+                      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: thumbUrl, alt: f2.originalName, className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" }),
+                            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex flex-col justify-end p-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 justify-center transform translate-y-2 group-hover:translate-y-0 transition-transform duration-300", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
                                 "button",
                                 {
-                                  onClick: () => {
+                                  onClick: (e) => {
+                                    e.stopPropagation();
                                     onSelect({
                                       url: f2.url,
                                       key: f2.key,
@@ -1592,7 +1585,20 @@ function ImageManager(props) {
                                   children: "Select"
                                 }
                               ),
-                              showDelete && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                              fWithThumbs.thumbnails && fWithThumbs.thumbnails.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                                "button",
+                                {
+                                  onClick: (e) => {
+                                    e.stopPropagation();
+                                    setThumbnailSelectorFile(f2);
+                                    setSelectedThumbnailForFile(null);
+                                  },
+                                  className: "p-1.5 bg-white/20 text-white text-xs font-semibold rounded-md hover:bg-purple-500 backdrop-blur-md transition-colors",
+                                  title: "Select Thumbnail",
+                                  children: /* @__PURE__ */ jsxRuntime.jsx(IconLayers, { className: "w-4 h-4" })
+                                }
+                              ),
+                              showDelete && /* @__PURE__ */ jsxRuntime.jsx(
                                 "button",
                                 {
                                   onClick: (e) => {
@@ -1600,44 +1606,44 @@ 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", 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,
@@ -1660,7 +1666,10 @@ function ImageManager(props) {
                             url: file.publicUrl,
                             thumbnails: file.thumbnails
                           };
-                          setFiles((prev) => [newItem, ...prev]);
+                          setFiles((prev) => {
+                            if (prev.find((f2) => f2.key === newItem.key)) return prev;
+                            return deduplicateFiles([newItem, ...prev]);
+                          });
                         }
                       },
                       onComplete: () => {
@@ -1673,11 +1682,11 @@ function ImageManager(props) {
                       },
                       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 +1702,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-[60]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-sm rounded-xl bg-white p-6 shadow-2xl z-[61] outline-none", "aria-describedby": "new-folder-description", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-lg font-semibold text-gray-900 mb-4", children: "New Folder" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Description, { id: "new-folder-description", className: "sr-only", children: "Create a new folder to organize your files" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
           "input",
           {
             autoFocus: true,
@@ -1708,9 +1718,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 +1732,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-[80]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-md rounded-xl bg-white p-6 shadow-2xl z-[81]", "aria-describedby": "delete-file-description", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Delete File" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Description, { id: "delete-file-description", className: "text-gray-600 mb-6", children: [
           "Are you sure you want to delete ",
-          /* @__PURE__ */ (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 +1754,7 @@ function ImageManager(props) {
               children: "Cancel"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          /* @__PURE__ */ jsxRuntime.jsx(
             "button",
             {
               onClick: handleDelete,
@@ -1755,23 +1765,221 @@ function ImageManager(props) {
           )
         ] })
       ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Root, { open: !!thumbnailSelectorFile, onOpenChange: (open2) => !open2 && setThumbnailSelectorFile(null), children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Portal, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Overlay, { className: "fixed inset-0 bg-black/50 z-[90]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-4xl max-h-[80vh] rounded-xl bg-white shadow-2xl z-[91] overflow-hidden", "aria-describedby": "thumbnail-selector-description", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6 border-b border-gray-200", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-xl font-semibold text-gray-900 mb-2", children: "Select Thumbnail" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Description, { id: "thumbnail-selector-description", className: "text-gray-600", children: [
+            "Choose a thumbnail size for ",
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-gray-900", children: [
+              '"',
+              thumbnailSelectorFile?.originalName,
+              '"'
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-6 overflow-y-auto max-h-[60vh]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              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-[100]", onClick: () => setPreviewFile(null) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Content, { className: "fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[90vw] h-[90vh] z-[101] outline-none", "aria-describedby": "image-preview-description", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative w-full h-full flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 z-10 bg-gradient-to-b from-black/70 to-transparent p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-white", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Dialog2__namespace.Title, { className: "text-xl font-semibold mb-1", children: previewFile?.originalName }),
+            /* @__PURE__ */ jsxRuntime.jsxs(Dialog2__namespace.Description, { id: "image-preview-description", className: "text-sm text-gray-300", children: [
+              previewFile?.size ? `${(previewFile.size / 1024).toFixed(1)} KB` : "",
+              " \u2022 ",
+              previewFile?.contentType
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setPreviewFile(null),
+              className: "p-2 bg-white/10 hover:bg-white/20 rounded-lg backdrop-blur-md transition-colors",
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconX, { className: "w-6 h-6 text-white" })
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: previewFile?.url,
+            alt: previewFile?.originalName,
+            className: "max-w-full max-h-full object-contain",
+            onError: (e) => {
+              const target = e.target;
+              target.style.display = "none";
+              const errorDiv = document.createElement("div");
+              errorDiv.className = "text-white text-center";
+              errorDiv.innerHTML = `
+                      <div class="text-red-400 mb-2">Failed to load image</div>
+                      <div class="text-sm text-gray-400">URL: ${previewFile?.url}</div>
+                    `;
+              target.parentElement?.appendChild(errorDiv);
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 z-10 bg-gradient-to-t from-black/70 to-transparent p-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                if (previewFile) {
+                  onSelect({
+                    url: previewFile.url,
+                    key: previewFile.key,
+                    originalName: previewFile.originalName,
+                    size: previewFile.size,
+                    contentType: previewFile.contentType,
+                    thumbnails: previewFile.thumbnails
+                  });
+                  onOpenChange(false);
+                  setPreviewFile(null);
+                }
+              },
+              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?.thumbnails && previewFile.thumbnails.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                setThumbnailSelectorFile(previewFile);
+                setSelectedThumbnailForFile(null);
+                setPreviewFile(null);
+              },
+              className: "px-6 py-2.5 bg-purple-600 text-white font-semibold rounded-lg hover:bg-purple-500 shadow-lg flex items-center gap-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconLayers, { className: "w-5 h-5" }),
+                "Select Thumbnail"
+              ]
+            }
+          )
+        ] }) })
+      ] }) })
     ] }) })
   ] });
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  ConnectProjectDialog,
-  ImageManager,
-  ProjectFilesWidget,
-  UpfilesClient,
-  Uploader,
-  addApiKeyManually,
-  connectProject,
-  connectUsingApiKey,
-  createClientWithKey,
-  createProject,
-  fetchFileThumbnails,
-  fetchProjectFiles,
-  fetchProjectImagesWithThumbs,
-  listProjects
-});
+exports.ConnectProjectDialog = ConnectProjectDialog;
+exports.ImageManager = ImageManager;
+exports.ProjectFilesWidget = ProjectFilesWidget;
+exports.UpfilesClient = UpfilesClient;
+exports.Uploader = Uploader;
+exports.addApiKeyManually = addApiKeyManually;
+exports.connectProject = connectProject;
+exports.connectUsingApiKey = connectUsingApiKey;
+exports.createClientWithKey = createClientWithKey;
+exports.createProject = createProject;
+exports.fetchFileThumbnails = fetchFileThumbnails;
+exports.fetchProjectFiles = fetchProjectFiles;
+exports.fetchProjectImagesWithThumbs = fetchProjectImagesWithThumbs;
+exports.listProjects = listProjects;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map