@thetechfossil/upfiles 0.3.0-beta → 0.3.1-beta

package/dist/index.mjs

@@ -167,19 +167,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,7 +198,7 @@ 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 {
       update({ status: "uploading", progress: 1 });
@@ -255,19 +255,19 @@ var Uploader = ({
     }
   }, [client, projectId, folderPath, fetchThumbnails]);
   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 +321,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 +336,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)) })
     ] })
   ] });
 };
@@ -395,7 +395,7 @@ 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())
   );
   return /* @__PURE__ */ jsxs2("div", { className, children: [
     /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 8, alignItems: "center", marginBottom: 8 }, children: [
@@ -435,31 +435,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 +483,460 @@ 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"
                 }
               )
             ] })
           ]
         },
-        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/ImagePickerDialog.tsx
+import * as React4 from "react";
+import * as Dialog2 from "@radix-ui/react-dialog";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function ImagePickerDialog(props) {
+  const { open, onOpenChange, clientOptions, folderPath, title, description, className, gridClassName, onSelect } = props;
+  const [loading, setLoading] = React4.useState(false);
+  const [error, setError] = React4.useState(null);
+  const [items, setItems] = React4.useState([]);
+  const [query, setQuery] = React4.useState("");
+  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;
+    load();
+  }, [open, load]);
+  const visible = React4.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return !q ? items : items.filter((i) => (i.originalName || "").toLowerCase().includes(q));
+  }, [items, query]);
+  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-3xl rounded-lg border bg-white p-4 shadow-lg ${className ?? ""}`, children: /* @__PURE__ */ jsxs4("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsx4(Dialog2.Title, { className: "text-lg font-semibold", children: title ?? "Select an image" }),
+      /* @__PURE__ */ jsx4(Dialog2.Description, { className: "text-sm text-muted-foreground", children: description ?? "Browse your project images. Thumbnails are shown when available." }),
+      /* @__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-[60vh] overflow-auto",
+          children: [
+            !loading && visible.map((f2) => {
+              const thumbUrl = f2.thumbnails?.[0]?.url || f2.url;
+              return /* @__PURE__ */ jsxs4(
+                "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: "group relative aspect-square overflow-hidden rounded border",
+                  title: f2.originalName,
+                  children: [
+                    /* @__PURE__ */ jsx4(
+                      "img",
+                      {
+                        src: thumbUrl,
+                        alt: f2.originalName,
+                        className: "h-full w-full object-cover transition-transform group-hover:scale-105"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx4("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 bg-black/50 p-1 text-[10px] text-white", children: (f2.originalName || "").slice(0, 28) })
+                  ]
+                },
+                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" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx4("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx4(Dialog2.Close, { asChild: true, children: /* @__PURE__ */ jsx4("button", { type: "button", className: "px-3 py-2 text-sm rounded border", children: "Close" }) }) })
+    ] }) })
+  ] }) });
+}
 export {
+  ConnectProjectDialog,
+  ImagePickerDialog,
   ProjectFilesWidget,
   UpfilesClient,
-  Uploader
+  Uploader,
+  addApiKeyManually,
+  connectProject,
+  connectUsingApiKey,
+  createClientWithKey,
+  createProject,
+  fetchFileThumbnails,
+  fetchProjectFiles,
+  fetchProjectImagesWithThumbs,
+  listProjects
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thetechfossil/upfiles",
-  "version": "0.3.0-beta",
+  "version": "0.3.1-beta",
   "description": "Lightweight client and React components for Upfiles Plugin API (presigned S3)",
   "license": "MIT",
   "author": "UpFiles",
@@ -31,9 +31,11 @@
     "prepublishOnly": "bun run build"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=18",
+    "@radix-ui/react-dialog": ">=1.0.0"
   },
   "devDependencies": {
+    "@radix-ui/react-dialog": "^1.1.15",
     "@types/react": "^19",
     "tsup": "^8.3.0",
     "typescript": "^5.6.2"