@lodashventure/medusa-hero 1.0.12 → 1.0.14

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

@@ -0,0 +1,1147 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const adminSdk = require("@medusajs/admin-sdk");
+const ui = require("@medusajs/ui");
+const react = require("react");
+const reactDropzone = require("react-dropzone");
+const icons = require("@medusajs/icons");
+const core = require("@dnd-kit/core");
+const sortable = require("@dnd-kit/sortable");
+const lucideReact = require("lucide-react");
+const Medusa = require("@medusajs/js-sdk");
+const utilities = require("@dnd-kit/utilities");
+const clx = require("clsx");
+require("@medusajs/admin-shared");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+const Medusa__default = /* @__PURE__ */ _interopDefault(Medusa);
+const clx__default = /* @__PURE__ */ _interopDefault(clx);
+const CategoryHeroWidget = ({ data }) => {
+  var _a;
+  const categoryId = data == null ? void 0 : data.id;
+  const [hero, setHero] = react.useState(
+    ((_a = data == null ? void 0 : data.metadata) == null ? void 0 : _a.hero) || null
+  );
+  const [uploading, setUploading] = react.useState(false);
+  const onDrop = react.useCallback(
+    async (acceptedFiles) => {
+      if (!acceptedFiles || acceptedFiles.length === 0) return;
+      const file = acceptedFiles[0];
+      const formData = new FormData();
+      formData.append("file", file);
+      setUploading(true);
+      try {
+        const response = await fetch(
+          `/admin/categories/${categoryId}/hero`,
+          {
+            method: "POST",
+            body: formData
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Failed to upload hero image");
+        }
+        const result = await response.json();
+        setHero(result.category.hero);
+        ui.toast.success("Hero Image", {
+          description: "Hero image uploaded successfully",
+          duration: 3e3
+        });
+      } catch (error) {
+        console.error("Upload error:", error);
+        ui.toast.error("Error", {
+          description: "Failed to upload hero image",
+          duration: 3e3
+        });
+      } finally {
+        setUploading(false);
+      }
+    },
+    [categoryId]
+  );
+  const handleDelete = async () => {
+    if (!confirm("Are you sure you want to delete this hero image?")) return;
+    try {
+      const response = await fetch(
+        `/admin/categories/${categoryId}/hero`,
+        {
+          method: "DELETE"
+        }
+      );
+      if (!response.ok) {
+        throw new Error("Failed to delete hero image");
+      }
+      setHero(null);
+      ui.toast.success("Hero Image", {
+        description: "Hero image deleted successfully",
+        duration: 3e3
+      });
+    } catch (error) {
+      console.error("Delete error:", error);
+      ui.toast.error("Error", {
+        description: "Failed to delete hero image",
+        duration: 3e3
+      });
+    }
+  };
+  const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone({
+    onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"]
+    },
+    maxFiles: 1,
+    disabled: uploading
+  });
+  let dropzoneMessage = "Drag & drop a hero image here, or click to select";
+  if (uploading) {
+    dropzoneMessage = "Uploading...";
+  } else if (isDragActive) {
+    dropzoneMessage = "Drop the image here";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Category Hero Image" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: hero ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-64 border border-ui-border-base rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: hero,
+          alt: "Category hero",
+          className: "w-full h-full object-cover"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Button,
+        {
+          variant: "danger",
+          onClick: handleDelete,
+          className: "w-full",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "mr-2" }),
+            "Delete Hero Image"
+          ]
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...getRootProps(),
+        className: `
+              border-2 border-dashed rounded-lg p-8 text-center cursor-pointer
+              transition-colors
+              ${isDragActive ? "border-ui-fg-interactive bg-ui-bg-interactive" : "border-ui-border-base hover:border-ui-fg-interactive"}
+              ${uploading ? "opacity-50 cursor-not-allowed" : ""}
+            `,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+          /* @__PURE__ */ jsxRuntime.jsx(icons.CloudArrowUp, { className: "mx-auto mb-4 text-ui-fg-muted" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg-subtle", children: dropzoneMessage }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ui-fg-muted mt-2", children: "Supported formats: PNG, JPG, JPEG, GIF, WebP" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ui-fg-muted", children: "Recommended size: 1920x600 pixels" })
+        ]
+      }
+    ) })
+  ] });
+};
+adminSdk.defineWidgetConfig({
+  zone: "product_category.details.after"
+});
+const CategoryThumbnailWidget = ({ data }) => {
+  var _a;
+  const categoryId = data == null ? void 0 : data.id;
+  const [thumbnail, setThumbnail] = react.useState(
+    ((_a = data == null ? void 0 : data.metadata) == null ? void 0 : _a.thumbnail) || null
+  );
+  const [uploading, setUploading] = react.useState(false);
+  const onDrop = react.useCallback(
+    async (acceptedFiles) => {
+      if (!acceptedFiles || acceptedFiles.length === 0) return;
+      const file = acceptedFiles[0];
+      const formData = new FormData();
+      formData.append("file", file);
+      setUploading(true);
+      try {
+        const response = await fetch(
+          `/admin/categories/${categoryId}/thumbnail`,
+          {
+            method: "POST",
+            body: formData
+          }
+        );
+        if (!response.ok) {
+          throw new Error("Failed to upload thumbnail");
+        }
+        const result = await response.json();
+        setThumbnail(result.category.thumbnail);
+        ui.toast.success("Thumbnail", {
+          description: "Thumbnail uploaded successfully",
+          duration: 3e3
+        });
+      } catch (error) {
+        console.error("Upload error:", error);
+        ui.toast.error("Error", {
+          description: "Failed to upload thumbnail",
+          duration: 3e3
+        });
+      } finally {
+        setUploading(false);
+      }
+    },
+    [categoryId]
+  );
+  const handleDelete = async () => {
+    if (!confirm("Are you sure you want to delete this thumbnail?")) return;
+    try {
+      const response = await fetch(
+        `/admin/categories/${categoryId}/thumbnail`,
+        {
+          method: "DELETE"
+        }
+      );
+      if (!response.ok) {
+        throw new Error("Failed to delete thumbnail");
+      }
+      setThumbnail(null);
+      ui.toast.success("Thumbnail", {
+        description: "Thumbnail deleted successfully",
+        duration: 3e3
+      });
+    } catch (error) {
+      console.error("Delete error:", error);
+      ui.toast.error("Error", {
+        description: "Failed to delete thumbnail",
+        duration: 3e3
+      });
+    }
+  };
+  const { getRootProps, getInputProps, isDragActive } = reactDropzone.useDropzone({
+    onDrop,
+    accept: {
+      "image/*": [".png", ".jpg", ".jpeg", ".gif", ".webp"]
+    },
+    maxFiles: 1,
+    disabled: uploading
+  });
+  let dropzoneMessage = "Drag & drop an image here, or click to select";
+  if (uploading) {
+    dropzoneMessage = "Uploading...";
+  } else if (isDragActive) {
+    dropzoneMessage = "Drop the image here";
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Container, { className: "divide-y p-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between px-6 py-4", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Heading, { level: "h2", children: "Category Thumbnail" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-4", children: thumbnail ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-48 border border-ui-border-base rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: thumbnail,
+          alt: "Category thumbnail",
+          className: "w-full h-full object-cover"
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(ui.Button, { variant: "danger", onClick: handleDelete, className: "w-full", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, { className: "mr-2" }),
+        "Delete Thumbnail"
+      ] })
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...getRootProps(),
+        className: `
+              border-2 border-dashed rounded-lg p-8 text-center cursor-pointer
+              transition-colors
+              ${isDragActive ? "border-ui-fg-interactive bg-ui-bg-interactive" : "border-ui-border-base hover:border-ui-fg-interactive"}
+              ${uploading ? "opacity-50 cursor-not-allowed" : ""}
+            `,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps() }),
+          /* @__PURE__ */ jsxRuntime.jsx(icons.CloudArrowUp, { className: "mx-auto mb-4 text-ui-fg-muted" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui-fg-subtle", children: dropzoneMessage }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ui-fg-muted mt-2", children: "Supported formats: PNG, JPG, JPEG, GIF, WebP" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-ui-fg-muted", children: "Recommended size: 400x400 pixels" })
+        ]
+      }
+    ) })
+  ] });
+};
+adminSdk.defineWidgetConfig({
+  zone: "product_category.details.after"
+});
+const sdk = new Medusa__default.default({
+  baseUrl: "/",
+  debug: false,
+  auth: {
+    type: "session"
+  }
+});
+const useHeroes = () => {
+  const [data, setData] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const fetchHeroes = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await sdk.client.fetch("/admin/heroes", {
+        method: "GET"
+      });
+      setData(response ?? { heroes: [], count: 0 });
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error("Failed to fetch heroes")
+      );
+      setData({ heroes: [], count: 0 });
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  react.useEffect(() => {
+    fetchHeroes();
+  }, []);
+  return {
+    data,
+    isLoading,
+    error,
+    refetch: fetchHeroes
+  };
+};
+const DraggableItem = ({ hero }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg shadow-md border border-gray-200 dark:border-gray-700 opacity-80 scale-105 bg-white dark:bg-gray-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: hero.url,
+        alt: `Hero ${hero.id}`,
+        className: "object-cover w-full h-48 rounded-t-lg"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-sm truncate text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800", children: hero.id })
+  ] }) });
+};
+const EditHeroLinkDrawerContent = ({
+  hero,
+  onSuccess,
+  onCancel
+}) => {
+  const [link, setLink] = react.useState(hero.link || "");
+  const [isLoading, setIsLoading] = react.useState(false);
+  const handleSave = async () => {
+    setIsLoading(true);
+    try {
+      const response = await fetch("/admin/heroes/update-link", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        credentials: "include",
+        body: JSON.stringify({
+          id: hero.id,
+          link: link.trim() || null
+        })
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || "Failed to update link");
+      }
+      onSuccess();
+    } catch (error) {
+      console.error(error);
+      alert(
+        `Error updating link: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg border overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: hero.url,
+        alt: `Hero ${hero.id}`,
+        className: "w-full h-48 object-cover"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Label,
+        {
+          htmlFor: "hero-link",
+          className: "text-sm font-medium flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-4 w-4" }),
+            "Click URL"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Input,
+        {
+          id: "hero-link",
+          type: "url",
+          placeholder: "https://example.com",
+          value: link,
+          onChange: (e) => setLink(e.target.value),
+          disabled: isLoading,
+          className: "w-full"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Add a URL where users will be redirected when clicking this hero. Leave empty to remove the link." })
+    ] }),
+    hero.link && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 bg-muted/50 rounded-lg", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground mb-1", children: "Current link:" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: hero.link,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: "text-sm text-primary hover:underline break-all",
+          children: hero.link
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3 justify-end", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          variant: "secondary",
+          onClick: onCancel,
+          disabled: isLoading,
+          children: "Cancel"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ui.Button,
+        {
+          variant: "primary",
+          onClick: handleSave,
+          isLoading,
+          children: "Save Link"
+        }
+      )
+    ] })
+  ] });
+};
+const GridItem = ({
+  hero,
+  isSelected,
+  onClick,
+  onSelect,
+  onEditLink
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `
+        relative overflow-hidden rounded-lg shadow-md cursor-pointer hover:shadow-lg
+        transition-all duration-200 ease-in-out
+        bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700
+        ${isSelected ? "ring-2 ring-offset-2 ring-blue-500 dark:ring-offset-gray-900" : ""}
+      `,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: hero.url || "/placeholder.svg?height=200&width=300",
+              alt: `Hero ${hero.id}`,
+              className: "object-cover w-full h-48"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 flex items-center justify-between gap-2 bg-white dark:bg-gray-800", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "truncate text-sm flex items-center gap-2 text-gray-900 dark:text-gray-100", children: [
+            hero.link && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-3 w-3 text-blue-500 dark:text-blue-400 flex-shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: hero.id })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `
+          absolute top-2 left-2 w-6 h-6 rounded-md flex items-center justify-center
+          ${isSelected ? "bg-blue-500 text-white" : "bg-white/90 dark:bg-gray-800/90 border border-gray-300 dark:border-gray-600"}
+          ${isSelected ? "visible" : "invisible group-hover:visible"}
+          transition-opacity duration-200
+        `,
+            onClick: onSelect,
+            children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-2 right-2 invisible group-hover:visible", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            variant: "secondary",
+            className: "size-8 rounded-md p-0 bg-white/90 dark:bg-gray-800/90 hover:bg-white dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-600",
+            onClick: onEditLink,
+            children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Edit, { className: "h-4 w-4 text-gray-700 dark:text-gray-300" })
+          }
+        ) })
+      ]
+    }
+  );
+};
+const SortableItem = ({ hero }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({ id: hero.id });
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition,
+    zIndex: isDragging ? 10 : 1,
+    opacity: isDragging ? 0.5 : 1
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: "rounded-lg shadow-md border border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 transition-all relative bg-white dark:bg-gray-800",
+      ...attributes,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...listeners, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: hero.url,
+            alt: `Hero ${hero.id}`,
+            className: "object-cover w-full h-48 rounded-t-lg"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 text-sm truncate text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800", children: hero.id })
+      ] })
+    }
+  );
+};
+const UploadHeroDrawerContent = ({
+  maxFileSizeMb = 10,
+  onSuccess
+}) => {
+  const [files, setFiles] = react.useState([]);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const onDrop = react.useCallback((acceptedFiles) => {
+    const newFiles = acceptedFiles.map((file) => {
+      const id = crypto.randomUUID();
+      let preview;
+      if (file.type.startsWith("image/")) {
+        preview = URL.createObjectURL(file);
+      }
+      return {
+        file,
+        id,
+        preview,
+        link: ""
+      };
+    });
+    setFiles((prev) => [...prev, ...newFiles]);
+  }, []);
+  const removeFile = (id) => {
+    setFiles((files2) => {
+      const fileToRemove = files2.find((f) => f.id === id);
+      if (fileToRemove == null ? void 0 : fileToRemove.preview) {
+        URL.revokeObjectURL(fileToRemove.preview);
+      }
+      return files2.filter((f) => f.id !== id);
+    });
+  };
+  const updateFileLink = (id, link) => {
+    setFiles((files2) => files2.map((f) => f.id === id ? { ...f, link } : f));
+  };
+  const handleResetFiles = () => {
+    setFiles([]);
+  };
+  const handleUploadFiles = async () => {
+    setIsLoading(true);
+    try {
+      const formData = new FormData();
+      files.forEach((file) => {
+        if (!file.file) {
+          return;
+        }
+        formData.append("files", file.file);
+      });
+      const response = await fetch("/admin/heroes", {
+        method: "POST",
+        body: formData,
+        credentials: "include"
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || "Upload failed");
+      }
+      const data = await response.json();
+      const uploadedFiles = data.files;
+      const updatePromises = uploadedFiles.map(
+        async (uploadedFile, index) => {
+          var _a;
+          const fileLink = (_a = files[index]) == null ? void 0 : _a.link;
+          if (fileLink && fileLink.trim()) {
+            await fetch("/admin/heroes/update-link", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json"
+              },
+              credentials: "include",
+              body: JSON.stringify({
+                id: uploadedFile.id,
+                link: fileLink.trim()
+              })
+            });
+          }
+          return uploadedFile;
+        }
+      );
+      await Promise.all(updatePromises);
+      setFiles([]);
+      onSuccess(uploadedFiles);
+      return {
+        files,
+        uploadedFiles
+      };
+    } catch (error) {
+      console.error(error);
+      alert(
+        `Error uploading files: ${error instanceof Error ? error.message : "Unknown error"}`
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+    isFocused
+  } = reactDropzone.useDropzone({
+    onDrop,
+    accept: {
+      "image/*": []
+    },
+    maxSize: maxFileSizeMb * 1024 * 1024
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ...getRootProps(),
+        className: clx__default.default(
+          "border-2 border-dashed rounded-xl p-10 transition-all duration-150 ease-in-out cursor-pointer",
+          "flex flex-col items-center justify-center gap-4",
+          isDragActive ? "bg-primary/5 border-primary/50" : "bg-background hover:bg-muted/50",
+          isDragAccept ? "border-green-500 bg-green-50 dark:bg-green-950/20" : "",
+          isDragReject ? "border-red-500 bg-red-50 dark:bg-red-950/20" : "",
+          isFocused ? "ring-2 ring-ring ring-offset-2" : "",
+          "focus-visible:outline-none"
+        ),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("input", { ...getInputProps(), disabled: isLoading }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-full bg-primary/10 p-4", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { className: "h-8 w-8 text-primary" }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center space-y-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-lg", children: isDragActive ? isDragAccept ? "Drop files to upload" : "This file type is not supported" : "Drag & drop images here" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+              "or ",
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary font-medium", children: "browse images" }),
+              " ",
+              "from your computer"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+              "(max ",
+              maxFileSizeMb,
+              "MB)"
+            ] })
+          ] })
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("h3", { className: "text-lg font-medium", children: [
+            "Selected Files (",
+            files.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              isLoading,
+              variant: "primary",
+              onClick: handleUploadFiles,
+              children: "Confirm Upload"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.Button,
+          {
+            isLoading,
+            variant: "secondary",
+            onClick: handleResetFiles,
+            children: "Clear All"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-6 grid-cols-1", children: files.map((fileItem) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "rounded-lg border bg-card text-card-foreground shadow-sm overflow-hidden",
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4 p-4", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: fileItem.preview ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-32 overflow-hidden rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: fileItem.preview || "/placeholder.svg",
+                alt: fileItem.file.name,
+                className: "w-full h-full object-cover"
+              }
+            ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-32 h-32 flex items-center justify-center bg-muted/50 rounded-lg", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImageIcon, { className: "h-8 w-8 text-primary" }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium", children: fileItem.file.name }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+                    (fileItem.file.size / 1024).toFixed(1),
+                    " KB"
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.Button,
+                  {
+                    isLoading,
+                    variant: "secondary",
+                    className: "size-8 rounded-full p-0.5 text-red-400",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      removeFile(fileItem.id);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash, { className: "h-4 w-4" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Remove file" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  ui.Label,
+                  {
+                    htmlFor: `link-${fileItem.id}`,
+                    className: "text-sm font-medium flex items-center gap-2",
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Link, { className: "h-4 w-4" }),
+                      "Click URL (optional)"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Input,
+                  {
+                    id: `link-${fileItem.id}`,
+                    type: "url",
+                    placeholder: "https://example.com",
+                    value: fileItem.link || "",
+                    onChange: (e) => updateFileLink(fileItem.id, e.target.value),
+                    disabled: isLoading,
+                    className: "w-full"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: "Add a URL where users will be redirected when clicking this hero" })
+              ] })
+            ] })
+          ] })
+        },
+        fileItem.id
+      )) })
+    ] })
+  ] });
+};
+const HeroPage = () => {
+  const [open, setOpen] = react.useState(false);
+  const [editLinkOpen, setEditLinkOpen] = react.useState(false);
+  const [selectedHeroForEdit, setSelectedHeroForEdit] = react.useState(
+    null
+  );
+  const [selectedImage, setSelectedImage] = react.useState(null);
+  const [selectedIds, setSelectedIds] = react.useState(/* @__PURE__ */ new Set());
+  const [reorderMode, setReorderMode] = react.useState(false);
+  const [orderedHeroes, setOrderedHeros] = react.useState([]);
+  const [activeHero, setActiveHero] = react.useState(null);
+  const [isLoading, setIsLoading] = react.useState(false);
+  const dialog = ui.usePrompt();
+  const { data: heroData, refetch } = useHeroes();
+  const { count = 0, heroes = [] } = heroData || {};
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, {
+      activationConstraint: {
+        distance: 8
+        // 8px movement required before drag starts
+      }
+    }),
+    core.useSensor(core.KeyboardSensor, {
+      coordinateGetter: sortable.sortableKeyboardCoordinates
+    })
+  );
+  const toggleImageSelection = (e, id) => {
+    e.stopPropagation();
+    const newSelectedIds = new Set(selectedIds);
+    if (newSelectedIds.has(id)) {
+      newSelectedIds.delete(id);
+    } else {
+      newSelectedIds.add(id);
+    }
+    setSelectedIds(newSelectedIds);
+  };
+  const selectAll = () => {
+    const allIds = heroes.map((hero) => hero.id);
+    setSelectedIds(new Set(allIds));
+  };
+  const deselectAll = () => {
+    setSelectedIds(/* @__PURE__ */ new Set());
+  };
+  const openLightbox = (hero) => {
+    setSelectedImage(hero);
+  };
+  const closeLightbox = () => {
+    setSelectedImage(null);
+  };
+  const openEditLinkDrawer = (e, hero) => {
+    e.stopPropagation();
+    setSelectedHeroForEdit(hero);
+    setEditLinkOpen(true);
+  };
+  const closeEditLinkDrawer = () => {
+    setEditLinkOpen(false);
+    setSelectedHeroForEdit(null);
+  };
+  const toggleReorderMode = async () => {
+    if (reorderMode) {
+      const confirmed = await dialog({
+        title: "Save Changes?",
+        description: "Do you want to save your reordering changes?",
+        variant: "confirmation",
+        confirmText: "Save",
+        cancelText: "Discard"
+      });
+      if (confirmed) {
+        saveNewOrder();
+      } else {
+        setOrderedHeros([]);
+        setReorderMode(false);
+      }
+    } else {
+      setOrderedHeros([...heroes]);
+      setReorderMode(true);
+    }
+  };
+  const handleDragStart = (event) => {
+    const { active } = event;
+    const activeHero2 = orderedHeroes.find((hero) => hero.id === active.id);
+    if (activeHero2) {
+      setActiveHero(activeHero2);
+    }
+  };
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setOrderedHeros((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id);
+        const newIndex = items.findIndex((item) => item.id === over.id);
+        return sortable.arrayMove(items, oldIndex, newIndex);
+      });
+    }
+    setActiveHero(null);
+  };
+  const saveNewOrder = async () => {
+    try {
+      await sdk.client.fetch("/admin/heroes/reorder", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: {
+          ids: orderedHeroes.map((hero) => hero.id)
+        }
+      });
+      setReorderMode(false);
+      refetch();
+    } catch (error) {
+      console.error("Failed to save new order:", error);
+    }
+  };
+  const handleDeleteMultiple = async () => {
+    const isConfirmed = await dialog({
+      title: "Confirm Deletion",
+      description: `Are you sure you want to delete ${selectedIds.size} selected images? This action cannot be undone.`,
+      confirmText: "Delete",
+      cancelText: "Cancel"
+    });
+    if (!isConfirmed) return;
+    const ids = Array.from(selectedIds);
+    setIsLoading(true);
+    try {
+      await fetch("/admin/heroes", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ ids })
+      });
+      setSelectedIds(/* @__PURE__ */ new Set());
+      refetch();
+    } catch {
+      console.error("Failed to delete heroes");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-6", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto px-4 py-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "text-2xl font-bold", children: [
+        "Heros (",
+        count,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Drawer,
+        {
+          open,
+          onOpenChange: (openChanged) => setOpen(openChanged),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Drawer.Trigger,
+              {
+                onClick: () => {
+                  setOpen(true);
+                },
+                asChild: true,
+                children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { isLoading, children: "Upload new hero" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { children: "Upload new hero" }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                UploadHeroDrawerContent,
+                {
+                  maxFileSizeMb: 10,
+                  onSuccess: () => {
+                    setOpen(false);
+                    refetch();
+                  }
+                }
+              ) })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Drawer,
+      {
+        open: editLinkOpen,
+        onOpenChange: (openChanged) => {
+          if (!openChanged) {
+            closeEditLinkDrawer();
+          }
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Drawer.Content, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Title, { children: "Edit Hero Link" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Drawer.Body, { children: selectedHeroForEdit && /* @__PURE__ */ jsxRuntime.jsx(
+            EditHeroLinkDrawerContent,
+            {
+              hero: selectedHeroForEdit,
+              onSuccess: () => {
+                closeEditLinkDrawer();
+                refetch();
+              },
+              onCancel: closeEditLinkDrawer
+            }
+          ) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container mx-auto px-4 py-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+        selectedIds.size > 0 && !reorderMode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-2", children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              isLoading,
+              onClick: selectAll,
+              disabled: count === 0,
+              children: "Select All"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Button,
+            {
+              isLoading,
+              onClick: deselectAll,
+              disabled: selectedIds.size === 0,
+              children: "Deselect All"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Button,
+            {
+              isLoading,
+              variant: "danger",
+              onClick: () => handleDeleteMultiple(),
+              disabled: selectedIds.size === 0,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { className: "h-4 w-4" }),
+                "Delete (",
+                selectedIds.size,
+                ")"
+              ]
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "ml-auto", children: [
+          heroes.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Button,
+            {
+              isLoading,
+              onClick: toggleReorderMode,
+              variant: reorderMode ? "secondary" : "primary",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MoveHorizontal, { className: "h-4 w-4 mr-2" }),
+                reorderMode ? "Exit Reorder" : "Reorder"
+              ]
+            }
+          ),
+          reorderMode && /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Button,
+            {
+              isLoading,
+              onClick: saveNewOrder,
+              variant: "primary",
+              className: "ml-2",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "h-4 w-4 mr-2" }),
+                "Save Order"
+              ]
+            }
+          )
+        ] })
+      ] }),
+      reorderMode ? /* @__PURE__ */ jsxRuntime.jsxs(
+        core.DndContext,
+        {
+          sensors,
+          collisionDetection: core.closestCenter,
+          onDragStart: handleDragStart,
+          onDragEnd: handleDragEnd,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              sortable.SortableContext,
+              {
+                items: orderedHeroes.map((hero) => hero.id),
+                strategy: sortable.rectSortingStrategy,
+                children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 isolate", children: orderedHeroes.map((hero) => /* @__PURE__ */ jsxRuntime.jsx(SortableItem, { hero }, hero.id)) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { children: activeHero ? /* @__PURE__ */ jsxRuntime.jsx(DraggableItem, { hero: activeHero }) : null })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 group", children: heroes.map((hero) => /* @__PURE__ */ jsxRuntime.jsx(
+        GridItem,
+        {
+          hero,
+          isSelected: selectedIds.has(hero.id),
+          onClick: () => openLightbox(hero),
+          onSelect: (e) => toggleImageSelection(e, hero.id),
+          onEditLink: (e) => openEditLinkDrawer(e, hero)
+        },
+        hero.id
+      )) }),
+      selectedImage && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4",
+          onClick: closeLightbox,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.Button,
+              {
+                isLoading,
+                className: "absolute top-4 right-4 text-white bg-black/50 p-2 rounded-full hover:bg-black/70",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  closeLightbox();
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { className: "h-6 w-6" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: "relative max-w-screen-xl max-h-screen overflow-auto",
+                onClick: (e) => e.stopPropagation(),
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "img",
+                  {
+                    src: selectedImage.url || "/placeholder.svg",
+                    alt: `Hero ${selectedImage.id}`,
+                    className: "max-h-[90vh] max-w-full object-contain mx-auto"
+                  }
+                )
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] }) });
+};
+const HeroUpload = () => {
+  return /* @__PURE__ */ jsxRuntime.jsx(HeroPage, {});
+};
+const config = adminSdk.defineRouteConfig({
+  label: "Hero",
+  icon: icons.StackPerspective
+});
+const widgetModule = { widgets: [
+  {
+    Component: CategoryHeroWidget,
+    zone: ["product_category.details.after"]
+  },
+  {
+    Component: CategoryThumbnailWidget,
+    zone: ["product_category.details.after"]
+  }
+] };
+const routeModule = {
+  routes: [
+    {
+      Component: HeroUpload,
+      path: "/heroes"
+    }
+  ]
+};
+const menuItemModule = {
+  menuItems: [
+    {
+      label: config.label,
+      icon: config.icon,
+      path: "/heroes",
+      nested: void 0
+    }
+  ]
+};
+const formModule = { customFields: {} };
+const displayModule = {
+  displays: {}
+};
+const i18nModule = { resources: {} };
+const plugin = {
+  widgetModule,
+  routeModule,
+  menuItemModule,
+  formModule,
+  displayModule,
+  i18nModule
+};
+module.exports = plugin;