@thetechfossil/upfiles 0.6.0 → 1.0.2

package/dist/index.mjs

@@ -153,13 +153,18 @@ var Uploader = ({
   maxFiles = 10,
   onComplete,
   onError,
+  onUploadBegin,
+  onUploadProgress,
+  onClientUploadComplete,
   className,
   buttonClassName,
   dropzoneClassName,
   children,
   projectId,
   folderPath,
-  fetchThumbnails
+  fetchThumbnails,
+  autoRecordToDb = false,
+  recordUrl = "/api/files"
 }) => {
   const inputRef = useRef(null);
   const client = useMemo(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
@@ -167,19 +172,19 @@ var Uploader = ({
   const [isUploading, setIsUploading] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
   const addFiles = useCallback((incoming) => {
-    const filtered = incoming.filter((f) => {
-      if (f.size > maxFileSize) {
+    const filtered = incoming.filter((f2) => {
+      if (f2.size > maxFileSize) {
         return false;
       }
       return true;
     });
     const limited = filtered.slice(0, Math.max(0, maxFiles - files.length));
-    const mapped = limited.map((f) => ({
+    const mapped = limited.map((f2) => ({
       id: Math.random().toString(36).slice(2),
-      file: f,
-      name: f.name,
-      size: f.size,
-      type: f.type,
+      file: f2,
+      name: f2.name,
+      size: f2.size,
+      type: f2.type,
       progress: 0,
       status: "pending"
     }));
@@ -198,9 +203,10 @@ var Uploader = ({
   }, [addFiles]);
   const uploadOne = useCallback(async (item) => {
     const update = (patch) => {
-      setFiles((prev) => prev.map((f) => f.id === item.id ? { ...f, ...patch } : f));
+      setFiles((prev) => prev.map((f2) => f2.id === item.id ? { ...f2, ...patch } : f2));
     };
     try {
+      onUploadBegin?.(item.name);
       update({ status: "uploading", progress: 1 });
       const presign = await client.getPresignedUrl({
         fileName: item.name,
@@ -216,6 +222,7 @@ var Uploader = ({
           if (ev.lengthComputable) {
             const pct = Math.min(99, Math.floor(ev.loaded / ev.total * 100));
             update({ progress: pct });
+            onUploadProgress?.(item.name, pct);
           }
         };
         xhr.onload = () => {
@@ -236,8 +243,39 @@ var Uploader = ({
         }
       } catch {
       }
-      update({ status: "success", progress: 100, fileKey: presign.fileKey, publicUrl: presign.publicUrl });
-      return {
+      if (autoRecordToDb && projectId) {
+        try {
+          const baseUrl = clientOptions?.baseUrl || "";
+          const url = baseUrl ? `${baseUrl}${recordUrl}` : recordUrl;
+          const headers = {
+            "content-type": "application/json",
+            ...clientOptions?.headers || {}
+          };
+          if (clientOptions?.apiKey) {
+            const keyHeader = clientOptions.apiKeyHeader || "authorization";
+            if (keyHeader === "authorization") {
+              headers["authorization"] = clientOptions.apiKey.startsWith("upk_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
+            } else {
+              headers[keyHeader] = clientOptions.apiKey;
+            }
+          }
+          await fetch(url, {
+            method: "POST",
+            headers,
+            credentials: clientOptions?.withCredentials ? "include" : "same-origin",
+            body: JSON.stringify({
+              key: presign.fileKey,
+              originalName: item.name,
+              size: item.size,
+              contentType: item.type,
+              projectId
+            })
+          });
+        } catch (e) {
+          console.warn("Failed to record file to database:", e);
+        }
+      }
+      const result = {
         ...item,
         status: "success",
         progress: 100,
@@ -248,26 +286,29 @@ var Uploader = ({
         // @ts-ignore - allow downstream to access thumbs if present
         thumbnails: thumbs
       };
+      update({ status: "success", progress: 100, fileKey: presign.fileKey, publicUrl: presign.publicUrl });
+      onClientUploadComplete?.(result);
+      return result;
     } catch (err) {
       const message = err instanceof Error ? err.message : "Upload failed";
       update({ status: "error", error: message });
       throw err;
     }
-  }, [client, projectId, folderPath, fetchThumbnails]);
+  }, [client, projectId, folderPath, fetchThumbnails, autoRecordToDb, recordUrl, clientOptions, onUploadBegin, onUploadProgress, onClientUploadComplete]);
   const uploadAll = useCallback(async () => {
-    const targets = files.filter((f) => f.status === "pending");
+    const targets = files.filter((f2) => f2.status === "pending");
     if (!targets.length) return;
     setIsUploading(true);
     try {
       const results = [];
-      for (const f of targets) {
+      for (const f2 of targets) {
         try {
-          const done = await uploadOne(f);
+          const done = await uploadOne(f2);
           results.push(done);
         } catch (e) {
         }
       }
-      onComplete?.(results.filter((f) => f.status === "success"));
+      onComplete?.(results.filter((f2) => f2.status === "success"));
     } catch (e) {
       onError?.(e);
     } finally {
@@ -321,7 +362,7 @@ var Uploader = ({
           "button",
           {
             className: buttonClassName,
-            disabled: isUploading || files.every((f) => f.status !== "pending"),
+            disabled: isUploading || files.every((f2) => f2.status !== "pending"),
             onClick: uploadAll,
             children: isUploading ? "Uploading..." : "Upload"
           }
@@ -336,21 +377,21 @@ var Uploader = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx("ul", { style: { display: "grid", gap: 8, listStyle: "none", padding: 0 }, children: files.map((f) => /* @__PURE__ */ jsx("li", { style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 8 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx("ul", { style: { display: "grid", gap: 8, listStyle: "none", padding: 0 }, children: files.map((f2) => /* @__PURE__ */ jsx("li", { style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 8 }, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
         /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
-          /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f.name }),
+          /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.name }),
           /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "#666" }, children: [
-            (f.size / (1024 * 1024)).toFixed(2),
+            (f2.size / (1024 * 1024)).toFixed(2),
             " MB"
           ] }),
-          f.error && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#b91c1c" }, children: f.error }),
-          f.publicUrl && f.status === "success" && /* @__PURE__ */ jsx("a", { href: f.publicUrl, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" })
+          f2.error && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#b91c1c" }, children: f2.error }),
+          f2.publicUrl && f2.status === "success" && /* @__PURE__ */ jsx("a", { href: f2.publicUrl, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" })
         ] }),
         /* @__PURE__ */ jsxs("div", { style: { minWidth: 120, textAlign: "right" }, children: [
-          /* @__PURE__ */ jsx("div", { style: { height: 6, background: "#e5e7eb", borderRadius: 999, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { width: `${f.progress}%`, height: "100%", background: f.status === "error" ? "#ef4444" : "#2563eb" } }) }),
-          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#666", marginTop: 4 }, children: f.status })
+          /* @__PURE__ */ jsx("div", { style: { height: 6, background: "#e5e7eb", borderRadius: 999, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { width: `${f2.progress}%`, height: "100%", background: f2.status === "error" ? "#ef4444" : "#2563eb" } }) }),
+          /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#666", marginTop: 4 }, children: f2.status })
         ] })
-      ] }) }, f.id)) })
+      ] }) }, f2.id)) })
     ] })
   ] });
 };
@@ -367,7 +408,10 @@ var ProjectFilesWidget = ({
   onSelect,
   saveUrl,
   onSave,
-  onSaved
+  onSaved,
+  onDelete,
+  deleteUrl = "/api/files",
+  showDelete = false
 }) => {
   const client = useMemo2(() => new UpfilesClient(clientOptions ?? {}), [clientOptions]);
   const [files, setFiles] = useState2([]);
@@ -375,6 +419,7 @@ var ProjectFilesWidget = ({
   const [error, setError] = useState2(null);
   const [query, setQuery] = useState2("");
   const [savingKey, setSavingKey] = useState2(null);
+  const [deletingKey, setDeletingKey] = useState2(null);
   useEffect(() => {
     let cancelled = false;
     const run = async () => {
@@ -395,8 +440,44 @@ var ProjectFilesWidget = ({
     };
   }, [client, folderPath]);
   const visible = files.filter(
-    (f) => !query ? true : (f.originalName || "").toLowerCase().includes(query.toLowerCase())
+    (f2) => !query ? true : (f2.originalName || "").toLowerCase().includes(query.toLowerCase())
   );
+  const handleDelete = async (key) => {
+    if (!confirm("Delete this file?")) return;
+    try {
+      setDeletingKey(key);
+      if (onDelete) {
+        await onDelete(key);
+      } else {
+        const baseUrl = clientOptions?.baseUrl || "";
+        const url = baseUrl ? `${baseUrl}${deleteUrl}` : deleteUrl;
+        const headers = {
+          "content-type": "application/json",
+          ...clientOptions?.headers || {}
+        };
+        if (clientOptions?.apiKey) {
+          const keyHeader = clientOptions.apiKeyHeader || "authorization";
+          if (keyHeader === "authorization") {
+            headers["authorization"] = clientOptions.apiKey.startsWith("upk_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
+          } else {
+            headers[keyHeader] = clientOptions.apiKey;
+          }
+        }
+        const res = await fetch(url, {
+          method: "DELETE",
+          headers,
+          credentials: clientOptions?.withCredentials ? "include" : "same-origin",
+          body: JSON.stringify({ fileKey: key })
+        });
+        if (!res.ok) throw new Error("Delete failed");
+      }
+      setFiles((prev) => prev.filter((f2) => f2.key !== key));
+    } catch (e) {
+      alert(e?.message || "Failed to delete");
+    } finally {
+      setDeletingKey(null);
+    }
+  };
   return /* @__PURE__ */ jsxs2("div", { className, children: [
     /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
       /* @__PURE__ */ jsx2(
@@ -435,31 +516,31 @@ var ProjectFilesWidget = ({
     loading && /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, color: "#666" }, children: "Loading files\u2026" }),
     error && /* @__PURE__ */ jsx2("div", { style: { fontSize: 12, color: "#b91c1c" }, children: error }),
     !loading && !error && /* @__PURE__ */ jsxs2("ul", { className: listClassName, style: { listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 8 }, children: [
-      visible.map((f) => /* @__PURE__ */ jsxs2(
+      visible.map((f2) => /* @__PURE__ */ jsxs2(
         "li",
         {
           className: itemClassName,
           style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 10, display: "flex", justifyContent: "space-between", alignItems: "center" },
           children: [
             /* @__PURE__ */ jsxs2("div", { style: { minWidth: 0 }, children: [
-              /* @__PURE__ */ jsx2("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f.originalName }),
+              /* @__PURE__ */ jsx2("div", { style: { fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis" }, children: f2.originalName }),
               /* @__PURE__ */ jsxs2("div", { style: { fontSize: 12, color: "#666" }, children: [
-                (f.size / (1024 * 1024)).toFixed(2),
+                (f2.size / (1024 * 1024)).toFixed(2),
                 " MB \u2022 ",
-                f.contentType
+                f2.contentType
               ] })
             ] }),
             /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
-              /* @__PURE__ */ jsx2("a", { href: f.url, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" }),
+              /* @__PURE__ */ jsx2("a", { href: f2.url, target: "_blank", rel: "noreferrer", style: { fontSize: 12, color: "#2563eb" }, children: "View" }),
               /* @__PURE__ */ jsx2(
                 "button",
                 {
                   onClick: async () => {
-                    const selected = { name: f.originalName, key: f.key, url: f.url, size: f.size, contentType: f.contentType };
+                    const selected = { name: f2.originalName, key: f2.key, url: f2.url, size: f2.size, contentType: f2.contentType };
                     onSelect(selected);
                     if (typeof onSave === "function" || !!saveUrl) {
                       try {
-                        setSavingKey(f.key);
+                        setSavingKey(f2.key);
                         if (typeof onSave === "function") {
                           await onSave(selected);
                           onSaved?.();
@@ -483,22 +564,579 @@ var ProjectFilesWidget = ({
                       }
                     }
                   },
-                  disabled: savingKey === f.key,
-                  style: { padding: "6px 10px", background: "#2563eb", color: "#fff", border: "1px solid #1d4ed8", borderRadius: 6, opacity: savingKey === f.key ? 0.7 : 1 },
-                  children: savingKey === f.key ? "Saving\u2026" : "Use"
+                  disabled: savingKey === f2.key,
+                  style: { padding: "6px 10px", background: "#2563eb", color: "#fff", border: "1px solid #1d4ed8", borderRadius: 6, opacity: savingKey === f2.key ? 0.7 : 1 },
+                  children: savingKey === f2.key ? "Saving\u2026" : "Use"
+                }
+              ),
+              showDelete && /* @__PURE__ */ jsx2(
+                "button",
+                {
+                  onClick: () => handleDelete(f2.key),
+                  disabled: deletingKey === f2.key,
+                  style: { padding: "6px 10px", background: "#dc2626", color: "#fff", border: "1px solid #b91c1c", borderRadius: 6, opacity: deletingKey === f2.key ? 0.7 : 1 },
+                  children: deletingKey === f2.key ? "Deleting\u2026" : "Delete"
                 }
               )
             ] })
           ]
         },
-        f.key
+        f2.key
       )),
       visible.length === 0 && /* @__PURE__ */ jsx2("li", { style: { fontSize: 12, color: "#666" }, children: "No files found" })
     ] })
   ] });
 };
+
+// src/ConnectProjectDialog.tsx
+import * as React3 from "react";
+import * as Dialog from "@radix-ui/react-dialog";
+
+// src/projectConnect.ts
+var f = (globalThis.fetch || fetch).bind(globalThis);
+async function httpJson(input, init, useFetch) {
+  const doFetch = useFetch ?? f;
+  const res = await doFetch(input, init);
+  if (!res.ok) {
+    let msg = `Request failed (${res.status})`;
+    try {
+      const j = await res.json();
+      msg = j?.error || msg;
+    } catch {
+    }
+    throw new Error(msg);
+  }
+  return res.json();
+}
+async function listProjects(opts) {
+  const url = `${opts.baseUrl.replace(/\/$/, "")}/api/projects`;
+  const data = await httpJson(
+    url,
+    { method: "GET", credentials: "include" },
+    opts.fetch
+  );
+  return data?.projects ?? [];
+}
+async function createProject(opts) {
+  const base = opts.baseUrl.replace(/\/$/, "");
+  const created = await httpJson(
+    `${base}/api/projects`,
+    {
+      method: "POST",
+      credentials: "include",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ name: opts.name })
+    },
+    opts.fetch
+  );
+  const projectId = created?.project?.id;
+  if (!projectId) throw new Error("Failed to create project");
+  const keyLabel = opts.keyName || `Plugin key ${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
+  const key = await httpJson(
+    `${base}/api/projects/${projectId}/keys`,
+    {
+      method: "POST",
+      credentials: "include",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ name: keyLabel })
+    },
+    opts.fetch
+  );
+  const plaintext = key?.key?.plaintext;
+  if (!plaintext) throw new Error("Failed to create API key");
+  return { apiKey: plaintext, projectId };
+}
+async function connectProject(opts) {
+  const base = opts.baseUrl.replace(/\/$/, "");
+  const keyLabel = opts.keyName || `Plugin key ${(/* @__PURE__ */ new Date()).toISOString().slice(0, 10)}`;
+  const key = await httpJson(
+    `${base}/api/projects/${opts.projectId}/keys`,
+    {
+      method: "POST",
+      credentials: "include",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ name: keyLabel })
+    },
+    opts.fetch
+  );
+  const plaintext = key?.key?.plaintext;
+  if (!plaintext) throw new Error("Failed to create API key");
+  return { apiKey: plaintext };
+}
+function addApiKeyManually(apiKey) {
+  const k = (apiKey || "").trim();
+  if (!k) throw new Error("API key is required");
+  if (!/^upk_[A-Za-z0-9]+/.test(k)) {
+    console.warn("Provided API key does not match expected format upk_*");
+  }
+  return { apiKey: k };
+}
+function createClientWithKey(baseUrl, apiKey) {
+  return new UpfilesClient({ baseUrl, apiKey, apiKeyHeader: "authorization" });
+}
+function connectUsingApiKey(opts) {
+  const baseUrl = opts.baseUrl.replace(/\/$/, "");
+  const apiKey = (opts.apiKey || "").trim();
+  if (!apiKey) throw new Error("apiKey is required");
+  const client = new UpfilesClient({ baseUrl, apiKey, apiKeyHeader: opts.apiKeyHeader ?? "authorization" });
+  return { apiKey, client };
+}
+
+// src/ConnectProjectDialog.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function ConnectProjectDialog(props) {
+  const { baseUrl, open, onOpenChange, onConnected, fetchImpl, title, description, className } = props;
+  const [mode, setMode] = React3.useState("existing");
+  const [loading, setLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const [projects, setProjects] = React3.useState([]);
+  const [selectedProjectId, setSelectedProjectId] = React3.useState("");
+  const [manualKey, setManualKey] = React3.useState("");
+  const [newProjectName, setNewProjectName] = React3.useState("");
+  const resetState = React3.useCallback(() => {
+    setMode("existing");
+    setLoading(false);
+    setError(null);
+    setProjects([]);
+    setSelectedProjectId("");
+    setManualKey("");
+    setNewProjectName("");
+  }, []);
+  React3.useEffect(() => {
+    const run = async () => {
+      if (!open || mode !== "existing") return;
+      try {
+        setLoading(true);
+        setError(null);
+        const opts = { baseUrl, fetch: fetchImpl };
+        const list = await listProjects(opts);
+        setProjects(list);
+        if (list.length && !selectedProjectId) setSelectedProjectId(list[0].id);
+      } catch (e) {
+        setError(e?.message || "Failed to fetch projects");
+      } finally {
+        setLoading(false);
+      }
+    };
+    run();
+  }, [open, mode, baseUrl]);
+  const handleConnectExisting = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      if (!selectedProjectId) throw new Error("Please select a project");
+      const { apiKey } = await connectProject({ baseUrl, projectId: selectedProjectId, fetch: fetchImpl });
+      onConnected(apiKey, { projectId: selectedProjectId, source: "existing" });
+      onOpenChange(false);
+      resetState();
+    } catch (e) {
+      setError(e?.message || "Failed to connect project");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleManual = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const { apiKey } = addApiKeyManually(manualKey);
+      onConnected(apiKey, { source: "manual" });
+      onOpenChange(false);
+      resetState();
+    } catch (e) {
+      setError(e?.message || "Invalid API key");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleCreate = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      if (!newProjectName.trim()) throw new Error("Project name is required");
+      const { apiKey, projectId } = await createProject({ baseUrl, name: newProjectName.trim(), fetch: fetchImpl });
+      onConnected(apiKey, { projectId, source: "new" });
+      onOpenChange(false);
+      resetState();
+    } catch (e) {
+      setError(e?.message || "Failed to create project");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const ModeSwitcher = /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-3 gap-2", children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: `px-3 py-2 rounded border text-sm ${mode === "existing" ? "bg-primary text-primary-foreground" : "bg-background"} `,
+        onClick: () => setMode("existing"),
+        children: "Connect existing"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: `px-3 py-2 rounded border text-sm ${mode === "manual" ? "bg-primary text-primary-foreground" : "bg-background"} `,
+        onClick: () => setMode("manual"),
+        children: "Add API key"
+      }
+    ),
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        type: "button",
+        className: `px-3 py-2 rounded border text-sm ${mode === "new" ? "bg-primary text-primary-foreground" : "bg-background"} `,
+        onClick: () => setMode("new"),
+        children: "Create new"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx3(Dialog.Root, { open, onOpenChange: (o) => {
+    if (!o) resetState();
+    onOpenChange(o);
+  }, children: /* @__PURE__ */ jsxs3(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx3(Dialog.Overlay, { className: "fixed inset-0 bg-black/40" }),
+    /* @__PURE__ */ jsx3(Dialog.Content, { className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-md rounded-lg border bg-white p-4 shadow-lg ${className ?? ""}`, children: /* @__PURE__ */ jsxs3("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx3(Dialog.Title, { className: "text-lg font-semibold", children: title ?? "Connect to Upfiles" }),
+      /* @__PURE__ */ jsx3(Dialog.Description, { className: "text-sm text-muted-foreground", children: description ?? "Choose how to connect your project to retrieve an API key." }),
+      ModeSwitcher,
+      error && /* @__PURE__ */ jsx3("div", { className: "rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
+      mode === "existing" && /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx3("label", { className: "text-sm font-medium", children: "Project" }),
+        /* @__PURE__ */ jsxs3(
+          "select",
+          {
+            className: "w-full rounded border px-3 py-2 text-sm",
+            value: selectedProjectId,
+            onChange: (e) => setSelectedProjectId(e.target.value),
+            disabled: loading,
+            children: [
+              projects.length === 0 && /* @__PURE__ */ jsx3("option", { value: "", children: loading ? "Loading..." : "No projects found" }),
+              projects.map((p) => /* @__PURE__ */ jsx3("option", { value: p.id, children: p.name }, p.id))
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx3(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx3("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "px-3 py-2 text-sm rounded bg-blue-600 text-white disabled:opacity-60",
+              onClick: handleConnectExisting,
+              disabled: loading || !selectedProjectId,
+              children: loading ? "Connecting\u2026" : "Connect"
+            }
+          )
+        ] })
+      ] }),
+      mode === "manual" && /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx3("label", { className: "text-sm font-medium", children: "API key" }),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            className: "w-full rounded border px-3 py-2 text-sm",
+            placeholder: "upk_...",
+            value: manualKey,
+            onChange: (e) => setManualKey(e.target.value),
+            disabled: loading
+          }
+        ),
+        /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx3(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx3("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "px-3 py-2 text-sm rounded bg-blue-600 text-white disabled:opacity-60",
+              onClick: handleManual,
+              disabled: loading || !manualKey.trim(),
+              children: loading ? "Adding\u2026" : "Add key"
+            }
+          )
+        ] })
+      ] }),
+      mode === "new" && /* @__PURE__ */ jsxs3("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx3("label", { className: "text-sm font-medium", children: "Project name" }),
+        /* @__PURE__ */ jsx3(
+          "input",
+          {
+            className: "w-full rounded border px-3 py-2 text-sm",
+            placeholder: "My project",
+            value: newProjectName,
+            onChange: (e) => setNewProjectName(e.target.value),
+            disabled: loading
+          }
+        ),
+        /* @__PURE__ */ jsx3("p", { className: "text-xs text-muted-foreground", children: "A project will be created in your Upfiles account and an API key generated." }),
+        /* @__PURE__ */ jsxs3("div", { className: "flex justify-end gap-2 pt-2", children: [
+          /* @__PURE__ */ jsx3(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx3("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Cancel" }) }),
+          /* @__PURE__ */ jsx3(
+            "button",
+            {
+              type: "button",
+              className: "px-3 py-2 text-sm rounded bg-blue-600 text-white disabled:opacity-60",
+              onClick: handleCreate,
+              disabled: loading || !newProjectName.trim(),
+              children: loading ? "Creating\u2026" : "Create & connect"
+            }
+          )
+        ] })
+      ] })
+    ] }) })
+  ] }) });
+}
+
+// src/files.ts
+async function fetchProjectFiles(clientOptions, folderPath) {
+  const client = new UpfilesClient(clientOptions);
+  return client.getProjectFiles({ folderPath });
+}
+async function fetchFileThumbnails(clientOptions, fileKey) {
+  const client = new UpfilesClient(clientOptions);
+  return client.getThumbnails(fileKey);
+}
+async function fetchProjectImagesWithThumbs(clientOptions, opts) {
+  const files = await fetchProjectFiles(clientOptions, opts?.folderPath);
+  const limit = Math.max(1, Math.min(opts?.limitConcurrent ?? 6, 12));
+  const queue = [...files];
+  const results = [];
+  async function worker() {
+    while (queue.length) {
+      const f2 = queue.shift();
+      try {
+        const thumbs = await fetchFileThumbnails(clientOptions, f2.key).catch(() => void 0);
+        results.push({ ...f2, thumbnails: thumbs });
+      } catch {
+        results.push({ ...f2 });
+      }
+    }
+  }
+  await Promise.all(Array.from({ length: Math.min(limit, files.length || 1) }, () => worker()));
+  return results;
+}
+
+// src/ImageManager.tsx
+import * as React4 from "react";
+import * as Dialog2 from "@radix-ui/react-dialog";
+import { Fragment, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ImageManager(props) {
+  const {
+    open,
+    onOpenChange,
+    clientOptions,
+    projectId,
+    folderPath,
+    title,
+    description,
+    className,
+    gridClassName,
+    onSelect,
+    onDelete,
+    deleteUrl = "/api/files",
+    autoRecordToDb = true,
+    fetchThumbnails = true,
+    maxFileSize = 100 * 1024 * 1024,
+    maxFiles = 10,
+    mode = "full",
+    showDelete = true
+  } = props;
+  const [tab, setTab] = React4.useState(mode === "upload" ? "upload" : "browse");
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [items, setItems] = React4.useState([]);
+  const [query, setQuery] = React4.useState("");
+  const [deleting, setDeleting] = React4.useState(null);
+  const load = React4.useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const list = await fetchProjectImagesWithThumbs(clientOptions, { folderPath, limitConcurrent: 6 });
+      setItems(list);
+    } catch (e) {
+      setError(e?.message || "Failed to load images");
+    } finally {
+      setLoading(false);
+    }
+  }, [clientOptions, folderPath]);
+  React4.useEffect(() => {
+    if (!open) return;
+    if (mode !== "upload" && tab === "browse") {
+      load();
+    }
+  }, [open, tab, load, mode]);
+  const visible = React4.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return !q ? items : items.filter((i) => (i.originalName || "").toLowerCase().includes(q));
+  }, [items, query]);
+  const handleDelete = React4.useCallback(
+    async (key) => {
+      if (!confirm("Delete this file?")) return;
+      try {
+        setDeleting(key);
+        if (onDelete) {
+          await onDelete(key);
+        } else {
+          const baseUrl = clientOptions?.baseUrl || "";
+          const url = baseUrl ? `${baseUrl}${deleteUrl}` : deleteUrl;
+          const headers = {
+            "content-type": "application/json",
+            ...clientOptions?.headers || {}
+          };
+          if (clientOptions?.apiKey) {
+            const keyHeader = clientOptions.apiKeyHeader || "authorization";
+            if (keyHeader === "authorization") {
+              headers["authorization"] = clientOptions.apiKey.startsWith("upk_") ? `Bearer ${clientOptions.apiKey}` : clientOptions.apiKey;
+            } else {
+              headers[keyHeader] = clientOptions.apiKey;
+            }
+          }
+          const res = await fetch(url, {
+            method: "DELETE",
+            headers,
+            credentials: clientOptions?.withCredentials ? "include" : "same-origin",
+            body: JSON.stringify({ fileKey: key })
+          });
+          if (!res.ok) throw new Error("Delete failed");
+        }
+        setItems((prev) => prev.filter((f2) => f2.key !== key));
+      } catch (e) {
+        alert(e?.message || "Failed to delete");
+      } finally {
+        setDeleting(null);
+      }
+    },
+    [clientOptions, deleteUrl, onDelete]
+  );
+  return /* @__PURE__ */ jsx4(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs4(Dialog2.Portal, { children: [
+    /* @__PURE__ */ jsx4(Dialog2.Overlay, { className: "fixed inset-0 bg-black/40" }),
+    /* @__PURE__ */ jsx4(
+      Dialog2.Content,
+      {
+        className: `fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[95vw] max-w-4xl rounded-lg border bg-white p-4 shadow-lg max-h-[90vh] overflow-auto ${className ?? ""}`,
+        children: /* @__PURE__ */ jsxs4("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsx4(Dialog2.Title, { className: "text-lg font-semibold", children: title ?? "Image Manager" }),
+          /* @__PURE__ */ jsx4(Dialog2.Description, { className: "text-sm text-muted-foreground", children: description ?? "Upload new images or select from existing ones." }),
+          mode === "full" && /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 border-b", children: [
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: () => setTab("browse"),
+                className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${tab === "browse" ? "border-blue-600 text-blue-600" : "border-transparent text-gray-600 hover:text-gray-900"}`,
+                children: "Browse"
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: () => setTab("upload"),
+                className: `px-4 py-2 text-sm font-medium border-b-2 transition-colors ${tab === "upload" ? "border-blue-600 text-blue-600" : "border-transparent text-gray-600 hover:text-gray-900"}`,
+                children: "Upload"
+              }
+            )
+          ] }),
+          (mode === "browse" || mode === "full" && tab === "browse") && /* @__PURE__ */ jsxs4(Fragment, { children: [
+            /* @__PURE__ */ jsxs4("div", { className: "flex gap-2 items-center", children: [
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  className: "w-full rounded border px-3 py-2 text-sm",
+                  placeholder: "Search by filename...",
+                  value: query,
+                  onChange: (e) => setQuery(e.target.value)
+                }
+              ),
+              /* @__PURE__ */ jsx4("button", { type: "button", className: "px-3 py-2 text-sm rounded border", onClick: load, disabled: loading, children: loading ? "Loading\u2026" : "Refresh" })
+            ] }),
+            error && /* @__PURE__ */ jsx4("div", { className: "rounded border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700", children: error }),
+            /* @__PURE__ */ jsxs4("div", { className: gridClassName ?? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 max-h-[50vh] overflow-auto", children: [
+              !loading && visible.map((f2) => {
+                const thumbUrl = f2.thumbnails?.[0]?.url || f2.url;
+                return /* @__PURE__ */ jsxs4("div", { className: "group relative aspect-square overflow-hidden rounded border", children: [
+                  /* @__PURE__ */ jsx4("img", { src: thumbUrl, alt: f2.originalName, className: "h-full w-full object-cover" }),
+                  /* @__PURE__ */ jsxs4("div", { className: "absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-colors flex items-center justify-center gap-2", children: [
+                    /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          onSelect({
+                            url: f2.url,
+                            key: f2.key,
+                            originalName: f2.originalName,
+                            size: f2.size,
+                            contentType: f2.contentType,
+                            thumbnails: f2.thumbnails
+                          });
+                          onOpenChange(false);
+                        },
+                        className: "opacity-0 group-hover:opacity-100 px-3 py-1 text-xs bg-blue-600 text-white rounded",
+                        children: "Select"
+                      }
+                    ),
+                    showDelete && /* @__PURE__ */ jsx4(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => handleDelete(f2.key),
+                        disabled: deleting === f2.key,
+                        className: "opacity-0 group-hover:opacity-100 px-3 py-1 text-xs bg-red-600 text-white rounded disabled:opacity-50",
+                        children: deleting === f2.key ? "..." : "Delete"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 bg-black/50 p-1 text-[10px] text-white truncate", children: f2.originalName })
+                ] }, f2.key);
+              }),
+              loading && /* @__PURE__ */ jsx4("div", { className: "col-span-full text-sm text-muted-foreground", children: "Loading\u2026" }),
+              !loading && visible.length === 0 && /* @__PURE__ */ jsx4("div", { className: "col-span-full text-sm text-muted-foreground", children: "No images found" })
+            ] })
+          ] }),
+          (mode === "upload" || mode === "full" && tab === "upload") && /* @__PURE__ */ jsx4(
+            Uploader,
+            {
+              clientOptions,
+              projectId,
+              folderPath,
+              accept: ["image/*"],
+              maxFileSize,
+              maxFiles,
+              autoRecordToDb,
+              fetchThumbnails,
+              onComplete: (files) => {
+                if (mode === "full") {
+                  load();
+                  setTab("browse");
+                } else {
+                }
+              },
+              dropzoneClassName: "border-2 border-dashed border-gray-300 rounded-lg p-8 text-center cursor-pointer hover:border-blue-500 transition-colors",
+              buttonClassName: "px-4 py-2 text-sm rounded border bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50"
+            }
+          ),
+          /* @__PURE__ */ jsx4("div", { className: "flex justify-end gap-2 pt-2 border-t", children: /* @__PURE__ */ jsx4(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx4("button", { type: "button", className: "px-4 py-2 text-sm rounded border", children: "Close" }) }) })
+        ] })
+      }
+    )
+  ] }) });
+}
 export {
+  ConnectProjectDialog,
+  ImageManager,
   ProjectFilesWidget,
   UpfilesClient,
-  Uploader
+  Uploader,
+  addApiKeyManually,
+  connectProject,
+  connectUsingApiKey,
+  createClientWithKey,
+  createProject,
+  fetchFileThumbnails,
+  fetchProjectFiles,
+  fetchProjectImagesWithThumbs,
+  listProjects
 };