@lodashventure/medusa-collection-thumbnail 1.0.1 → 1.0.2

package/.medusa/server/src/admin/index.js

@@ -0,0 +1,342 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const adminSdk = require("@medusajs/admin-sdk");
+const ui = require("@medusajs/ui");
+const icons = require("@medusajs/icons");
+const react = require("react");
+require("@medusajs/admin-shared");
+const CollectionThumbnailUploader = ({
+  collectionId,
+  initialThumbnail,
+  onThumbnailChange,
+  className
+}) => {
+  const [thumbnail, setThumbnail] = react.useState(initialThumbnail || null);
+  const [isUploading, setIsUploading] = react.useState(false);
+  const [isDragging, setIsDragging] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [previewUrl, setPreviewUrl] = react.useState(null);
+  const validateFile = (file) => {
+    const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+    if (!allowedTypes.includes(file.type)) {
+      setError("Please upload a valid image file (JPEG, PNG, GIF, or WebP)");
+      return false;
+    }
+    if (file.size > 5 * 1024 * 1024) {
+      setError("File size must be less than 5MB");
+      return false;
+    }
+    return true;
+  };
+  const handleFileUpload = async (file) => {
+    if (!validateFile(file)) return;
+    setError(null);
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreviewUrl(reader.result);
+    };
+    reader.readAsDataURL(file);
+    if (collectionId) {
+      setIsUploading(true);
+      const formData = new FormData();
+      formData.append("thumbnail", file);
+      try {
+        const response = await fetch(`/admin/collections/${collectionId}/thumbnail`, {
+          method: "POST",
+          body: formData,
+          credentials: "include"
+        });
+        if (response.ok) {
+          const result = await response.json();
+          setThumbnail(result.collection.thumbnail);
+          setPreviewUrl(null);
+          onThumbnailChange == null ? void 0 : onThumbnailChange(result.collection.thumbnail);
+        } else {
+          const errorData = await response.json();
+          setError(errorData.error || "Failed to upload thumbnail");
+          setPreviewUrl(null);
+        }
+      } catch (err) {
+        setError("Error uploading thumbnail");
+        setPreviewUrl(null);
+      } finally {
+        setIsUploading(false);
+      }
+    } else {
+      onThumbnailChange == null ? void 0 : onThumbnailChange(previewUrl);
+    }
+  };
+  const handleDelete = async () => {
+    if (!confirm("Are you sure you want to delete the thumbnail?")) return;
+    if (collectionId) {
+      setIsUploading(true);
+      setError(null);
+      try {
+        const response = await fetch(`/admin/collections/${collectionId}/thumbnail`, {
+          method: "DELETE",
+          credentials: "include"
+        });
+        if (response.ok) {
+          setThumbnail(null);
+          setPreviewUrl(null);
+          onThumbnailChange == null ? void 0 : onThumbnailChange(null);
+        } else {
+          const errorData = await response.json();
+          setError(errorData.error || "Failed to delete thumbnail");
+        }
+      } catch (err) {
+        setError("Error deleting thumbnail");
+      } finally {
+        setIsUploading(false);
+      }
+    } else {
+      setPreviewUrl(null);
+      onThumbnailChange == null ? void 0 : onThumbnailChange(null);
+    }
+  };
+  const handleDragEnter = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+  const handleDragOver = react.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = react.useCallback((e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    const file = (_a = e.dataTransfer.files) == null ? void 0 : _a[0];
+    if (file) {
+      handleFileUpload(file);
+    }
+  }, []);
+  const displayImage = thumbnail || previewUrl;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.clx("space-y-4", className), children: [
+    displayImage ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative overflow-hidden rounded-lg border border-ui-border-base", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: (displayImage == null ? void 0 : displayImage.startsWith("http")) || (displayImage == null ? void 0 : displayImage.startsWith("data:")) ? displayImage : `http://localhost:9000${displayImage}`,
+            alt: "Collection thumbnail",
+            className: "h-64 w-full object-cover"
+          }
+        ),
+        isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-white", children: "Uploading..." }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          ui.Button,
+          {
+            variant: "secondary",
+            disabled: isUploading,
+            onClick: () => {
+              var _a;
+              return (_a = document.getElementById("thumbnail-file-input")) == null ? void 0 : _a.click();
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(icons.CloudArrowUp, { className: "mr-2" }),
+              "Replace"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "danger", disabled: isUploading, onClick: handleDelete, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "mr-2" }),
+          "Delete"
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: ui.clx(
+          "flex h-64 flex-col items-center justify-center rounded-lg border-2 border-dashed transition-colors",
+          isDragging ? "border-ui-border-interactive bg-ui-bg-highlight" : "border-ui-border-base bg-ui-bg-subtle",
+          !isUploading && "cursor-pointer"
+        ),
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onClick: () => {
+          var _a;
+          return !isUploading && ((_a = document.getElementById("thumbnail-file-input")) == null ? void 0 : _a.click());
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: "mb-4 h-12 w-12 text-ui-fg-subtle" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-2 text-lg font-medium", children: isDragging ? "Drop image here" : "Upload thumbnail" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "mb-4 text-center text-ui-fg-subtle", children: "Drag and drop an image here, or click to select" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-sm text-ui-fg-subtle", children: "JPEG, PNG, GIF, or WebP • Max 5MB" }),
+          isUploading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Uploading..." }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id: "thumbnail-file-input",
+        type: "file",
+        accept: "image/jpeg,image/png,image/gif,image/webp",
+        onChange: (e) => {
+          var _a;
+          const file = (_a = e.target.files) == null ? void 0 : _a[0];
+          if (file) handleFileUpload(file);
+        },
+        className: "hidden"
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-error", children: error })
+  ] });
+};
+const CollectionThumbnailWidget = ({ data }) => {
+  const [thumbnail, setThumbnail] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [showUploader, setShowUploader] = react.useState(false);
+  react.useEffect(() => {
+    fetchThumbnail();
+  }, [data.id]);
+  const fetchThumbnail = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch(`/admin/collections/${data.id}/thumbnail`, {
+        credentials: "include"
+      });
+      if (response.ok) {
+        const result = await response.json();
+        setThumbnail(result.thumbnail || null);
+      }
+    } catch (error) {
+      console.error("Failed to fetch thumbnail:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleDeleteThumbnail = async () => {
+    if (!confirm("Are you sure you want to delete this thumbnail?")) return;
+    try {
+      const response = await fetch(`/admin/collections/${data.id}/thumbnail`, {
+        method: "DELETE",
+        credentials: "include"
+      });
+      if (response.ok) {
+        setThumbnail(null);
+      } else {
+        alert("Failed to delete thumbnail");
+      }
+    } catch (error) {
+      alert("Error deleting thumbnail");
+    }
+  };
+  const handleUploaderClose = () => {
+    setShowUploader(false);
+    fetchThumbnail();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.Container, { className: "p-0", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "Loading thumbnail..." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "p-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Collection Thumbnail" }) }),
+      thumbnail ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: thumbnail.startsWith("http") ? thumbnail : `http://localhost:9000${thumbnail}`,
+            alt: data.title,
+            className: "w-full h-48 object-cover rounded-lg"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Button,
+            {
+              variant: "secondary",
+              size: "small",
+              onClick: () => setShowUploader(true),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.CloudArrowUp, {}),
+                "Replace"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Button,
+            {
+              variant: "danger",
+              size: "small",
+              onClick: handleDeleteThumbnail,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {}),
+                "Delete"
+              ]
+            }
+          )
+        ] })
+      ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-2 border-dashed border-ui-border-base rounded-lg p-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.PhotoSolid, { className: "h-12 w-12 text-ui-fg-subtle mb-4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle mb-4", children: "No thumbnail uploaded for this collection" }),
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { onClick: () => setShowUploader(true), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(icons.CloudArrowUp, { className: "mr-2" }),
+          "Upload Thumbnail"
+        ] })
+      ] }) })
+    ] }),
+    showUploader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-2xl rounded-lg bg-ui-bg-base p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Upload Thumbnail" }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "text-ui-fg-subtle", children: data.title })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "secondary", onClick: handleUploaderClose, children: "Close" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        CollectionThumbnailUploader,
+        {
+          collectionId: data.id,
+          initialThumbnail: thumbnail || void 0,
+          onThumbnailChange: (url) => {
+            if (!url) {
+              handleUploaderClose();
+            }
+          }
+        }
+      )
+    ] }) })
+  ] });
+};
+adminSdk.defineWidgetConfig({
+  zone: "product_collection.details.after"
+});
+const widgetModule = { widgets: [
+  {
+    Component: CollectionThumbnailWidget,
+    zone: ["product_collection.details.after"]
+  }
+] };
+const routeModule = {
+  routes: []
+};
+const menuItemModule = {
+  menuItems: []
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: {} };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+module.exports = plugin;

package/.medusa/server/src/admin/index.mjs

@@ -0,0 +1,343 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { defineWidgetConfig } from "@medusajs/admin-sdk";
+import { clx, Button, Text, Container, Heading } from "@medusajs/ui";
+import { CloudArrowUp, Trash, PhotoSolid } from "@medusajs/icons";
+import { useState, useCallback, useEffect } from "react";
+import "@medusajs/admin-shared";
+const CollectionThumbnailUploader = ({
+  collectionId,
+  initialThumbnail,
+  onThumbnailChange,
+  className
+}) => {
+  const [thumbnail, setThumbnail] = useState(initialThumbnail || null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [error, setError] = useState(null);
+  const [previewUrl, setPreviewUrl] = useState(null);
+  const validateFile = (file) => {
+    const allowedTypes = ["image/jpeg", "image/png", "image/gif", "image/webp"];
+    if (!allowedTypes.includes(file.type)) {
+      setError("Please upload a valid image file (JPEG, PNG, GIF, or WebP)");
+      return false;
+    }
+    if (file.size > 5 * 1024 * 1024) {
+      setError("File size must be less than 5MB");
+      return false;
+    }
+    return true;
+  };
+  const handleFileUpload = async (file) => {
+    if (!validateFile(file)) return;
+    setError(null);
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      setPreviewUrl(reader.result);
+    };
+    reader.readAsDataURL(file);
+    if (collectionId) {
+      setIsUploading(true);
+      const formData = new FormData();
+      formData.append("thumbnail", file);
+      try {
+        const response = await fetch(`/admin/collections/${collectionId}/thumbnail`, {
+          method: "POST",
+          body: formData,
+          credentials: "include"
+        });
+        if (response.ok) {
+          const result = await response.json();
+          setThumbnail(result.collection.thumbnail);
+          setPreviewUrl(null);
+          onThumbnailChange == null ? void 0 : onThumbnailChange(result.collection.thumbnail);
+        } else {
+          const errorData = await response.json();
+          setError(errorData.error || "Failed to upload thumbnail");
+          setPreviewUrl(null);
+        }
+      } catch (err) {
+        setError("Error uploading thumbnail");
+        setPreviewUrl(null);
+      } finally {
+        setIsUploading(false);
+      }
+    } else {
+      onThumbnailChange == null ? void 0 : onThumbnailChange(previewUrl);
+    }
+  };
+  const handleDelete = async () => {
+    if (!confirm("Are you sure you want to delete the thumbnail?")) return;
+    if (collectionId) {
+      setIsUploading(true);
+      setError(null);
+      try {
+        const response = await fetch(`/admin/collections/${collectionId}/thumbnail`, {
+          method: "DELETE",
+          credentials: "include"
+        });
+        if (response.ok) {
+          setThumbnail(null);
+          setPreviewUrl(null);
+          onThumbnailChange == null ? void 0 : onThumbnailChange(null);
+        } else {
+          const errorData = await response.json();
+          setError(errorData.error || "Failed to delete thumbnail");
+        }
+      } catch (err) {
+        setError("Error deleting thumbnail");
+      } finally {
+        setIsUploading(false);
+      }
+    } else {
+      setPreviewUrl(null);
+      onThumbnailChange == null ? void 0 : onThumbnailChange(null);
+    }
+  };
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = useCallback((e) => {
+    var _a;
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+    const file = (_a = e.dataTransfer.files) == null ? void 0 : _a[0];
+    if (file) {
+      handleFileUpload(file);
+    }
+  }, []);
+  const displayImage = thumbnail || previewUrl;
+  return /* @__PURE__ */ jsxs("div", { className: clx("space-y-4", className), children: [
+    displayImage ? /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-lg border border-ui-border-base", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: (displayImage == null ? void 0 : displayImage.startsWith("http")) || (displayImage == null ? void 0 : displayImage.startsWith("data:")) ? displayImage : `http://localhost:9000${displayImage}`,
+            alt: "Collection thumbnail",
+            className: "h-64 w-full object-cover"
+          }
+        ),
+        isUploading && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsx("div", { className: "text-white", children: "Uploading..." }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "secondary",
+            disabled: isUploading,
+            onClick: () => {
+              var _a;
+              return (_a = document.getElementById("thumbnail-file-input")) == null ? void 0 : _a.click();
+            },
+            children: [
+              /* @__PURE__ */ jsx(CloudArrowUp, { className: "mr-2" }),
+              "Replace"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(Button, { variant: "danger", disabled: isUploading, onClick: handleDelete, children: [
+          /* @__PURE__ */ jsx(Trash, { className: "mr-2" }),
+          "Delete"
+        ] })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clx(
+          "flex h-64 flex-col items-center justify-center rounded-lg border-2 border-dashed transition-colors",
+          isDragging ? "border-ui-border-interactive bg-ui-bg-highlight" : "border-ui-border-base bg-ui-bg-subtle",
+          !isUploading && "cursor-pointer"
+        ),
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onClick: () => {
+          var _a;
+          return !isUploading && ((_a = document.getElementById("thumbnail-file-input")) == null ? void 0 : _a.click());
+        },
+        children: [
+          /* @__PURE__ */ jsx(PhotoSolid, { className: "mb-4 h-12 w-12 text-ui-fg-subtle" }),
+          /* @__PURE__ */ jsx(Text, { className: "mb-2 text-lg font-medium", children: isDragging ? "Drop image here" : "Upload thumbnail" }),
+          /* @__PURE__ */ jsx(Text, { className: "mb-4 text-center text-ui-fg-subtle", children: "Drag and drop an image here, or click to select" }),
+          /* @__PURE__ */ jsx(Text, { className: "text-sm text-ui-fg-subtle", children: "JPEG, PNG, GIF, or WebP • Max 5MB" }),
+          isUploading && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(Text, { children: "Uploading..." }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: "thumbnail-file-input",
+        type: "file",
+        accept: "image/jpeg,image/png,image/gif,image/webp",
+        onChange: (e) => {
+          var _a;
+          const file = (_a = e.target.files) == null ? void 0 : _a[0];
+          if (file) handleFileUpload(file);
+        },
+        className: "hidden"
+      }
+    ),
+    error && /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-error", children: error })
+  ] });
+};
+const CollectionThumbnailWidget = ({ data }) => {
+  const [thumbnail, setThumbnail] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [showUploader, setShowUploader] = useState(false);
+  useEffect(() => {
+    fetchThumbnail();
+  }, [data.id]);
+  const fetchThumbnail = async () => {
+    setLoading(true);
+    try {
+      const response = await fetch(`/admin/collections/${data.id}/thumbnail`, {
+        credentials: "include"
+      });
+      if (response.ok) {
+        const result = await response.json();
+        setThumbnail(result.thumbnail || null);
+      }
+    } catch (error) {
+      console.error("Failed to fetch thumbnail:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleDeleteThumbnail = async () => {
+    if (!confirm("Are you sure you want to delete this thumbnail?")) return;
+    try {
+      const response = await fetch(`/admin/collections/${data.id}/thumbnail`, {
+        method: "DELETE",
+        credentials: "include"
+      });
+      if (response.ok) {
+        setThumbnail(null);
+      } else {
+        alert("Failed to delete thumbnail");
+      }
+    } catch (error) {
+      alert("Error deleting thumbnail");
+    }
+  };
+  const handleUploaderClose = () => {
+    setShowUploader(false);
+    fetchThumbnail();
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx(Container, { className: "p-0", children: /* @__PURE__ */ jsx(Text, { children: "Loading thumbnail..." }) });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Container, { className: "p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-4", children: /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Collection Thumbnail" }) }),
+      thumbnail ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: thumbnail.startsWith("http") ? thumbnail : `http://localhost:9000${thumbnail}`,
+            alt: data.title,
+            className: "w-full h-48 object-cover rounded-lg"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center gap-2", children: [
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "secondary",
+              size: "small",
+              onClick: () => setShowUploader(true),
+              children: [
+                /* @__PURE__ */ jsx(CloudArrowUp, {}),
+                "Replace"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              variant: "danger",
+              size: "small",
+              onClick: handleDeleteThumbnail,
+              children: [
+                /* @__PURE__ */ jsx(Trash, {}),
+                "Delete"
+              ]
+            }
+          )
+        ] })
+      ] }) }) : /* @__PURE__ */ jsx("div", { className: "border-2 border-dashed border-ui-border-base rounded-lg p-8", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [
+        /* @__PURE__ */ jsx(PhotoSolid, { className: "h-12 w-12 text-ui-fg-subtle mb-4" }),
+        /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle mb-4", children: "No thumbnail uploaded for this collection" }),
+        /* @__PURE__ */ jsxs(Button, { onClick: () => setShowUploader(true), children: [
+          /* @__PURE__ */ jsx(CloudArrowUp, { className: "mr-2" }),
+          "Upload Thumbnail"
+        ] })
+      ] }) })
+    ] }),
+    showUploader && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsxs("div", { className: "w-full max-w-2xl rounded-lg bg-ui-bg-base p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Heading, { level: "h2", children: "Upload Thumbnail" }),
+          /* @__PURE__ */ jsx(Text, { className: "text-ui-fg-subtle", children: data.title })
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: handleUploaderClose, children: "Close" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        CollectionThumbnailUploader,
+        {
+          collectionId: data.id,
+          initialThumbnail: thumbnail || void 0,
+          onThumbnailChange: (url) => {
+            if (!url) {
+              handleUploaderClose();
+            }
+          }
+        }
+      )
+    ] }) })
+  ] });
+};
+defineWidgetConfig({
+  zone: "product_collection.details.after"
+});
+const widgetModule = { widgets: [
+  {
+    Component: CollectionThumbnailWidget,
+    zone: ["product_collection.details.after"]
+  }
+] };
+const routeModule = {
+  routes: []
+};
+const menuItemModule = {
+  menuItems: []
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: {} };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+export {
+  plugin as default
+};