@mercurjs/admin 2.2.0-canary.2 → 2.2.0-canary.21

package/dist/collection-media-ESJUYVF7.js

@@ -0,0 +1,654 @@
+import {
+  COLLECTION_IMAGE_FORMATS,
+  getCollectionGallery,
+  uploadCollectionImages
+} from "./chunk-BN6OOLJA.js";
+import {
+  FileUpload
+} from "./chunk-VSLHL2AZ.js";
+import "./chunk-TKGWSUEI.js";
+import {
+  KeyboundForm
+} from "./chunk-SITRHMZZ.js";
+import {
+  RouteFocusModal,
+  useRouteModal
+} from "./chunk-FWJLS7XD.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import {
+  useCollection,
+  useUpdateCollection
+} from "./chunk-QKJGSZI2.js";
+import "./chunk-M2E3PKA4.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-ZBWL72TB.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/collections/collection-media/collection-media.tsx
+import { useTranslation as useTranslation3 } from "react-i18next";
+import { useParams } from "react-router-dom";
+
+// src/pages/collections/collection-media/components/collection-media-view/collection-media-view.tsx
+import { useMemo } from "react";
+import { useSearchParams } from "react-router-dom";
+
+// src/pages/collections/collection-media/components/edit-collection-media-form/edit-collection-media-form.tsx
+import { Fragment, useCallback, useState } from "react";
+import { FeaturedBadge, ThumbnailBadge } from "@medusajs/icons";
+import {
+  Button,
+  Checkbox,
+  CommandBar,
+  Text,
+  Tooltip,
+  clx,
+  toast
+} from "@medusajs/ui";
+import {
+  DndContext,
+  DragOverlay,
+  KeyboardSensor,
+  PointerSensor,
+  defaultDropAnimationSideEffects,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  arrayMove,
+  rectSortingStrategy,
+  sortableKeyboardCoordinates,
+  useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useFieldArray, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { z } from "zod";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MediaSchema = z.object({
+  id: z.string().optional(),
+  url: z.string(),
+  file: z.any().nullable(),
+  // File
+  is_thumbnail: z.boolean(),
+  is_banner: z.boolean()
+});
+var EditCollectionMediaSchema = z.object({
+  media: z.array(MediaSchema)
+});
+var EditCollectionMediaForm = ({
+  collection
+}) => {
+  const [selection, setSelection] = useState({});
+  const { t } = useTranslation();
+  const { handleSuccess } = useRouteModal();
+  const form = useForm({
+    defaultValues: {
+      media: getCollectionGallery(collection.images).map((image) => ({
+        id: image.id,
+        url: image.url,
+        file: null,
+        is_thumbnail: image.is_thumbnail,
+        is_banner: image.is_banner
+      }))
+    },
+    resolver: zodResolver(EditCollectionMediaSchema)
+  });
+  const { fields, append, remove, update } = useFieldArray({
+    name: "media",
+    control: form.control,
+    keyName: "field_id"
+  });
+  const [activeId, setActiveId] = useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragEnd = (event) => {
+    setActiveId(null);
+    const { active, over } = event;
+    if (active.id !== over?.id) {
+      const oldIndex = fields.findIndex((item) => item.field_id === active.id);
+      const newIndex = fields.findIndex((item) => item.field_id === over?.id);
+      form.setValue("media", arrayMove(fields, oldIndex, newIndex), {
+        shouldDirty: true,
+        shouldTouch: true
+      });
+    }
+  };
+  const handleDragStart = (event) => setActiveId(event.active.id);
+  const handleDragCancel = () => setActiveId(null);
+  const { mutateAsync, isPending } = useUpdateCollection(collection.id);
+  const handleSubmit = form.handleSubmit(async ({ media }) => {
+    const images = await uploadCollectionImages({
+      media: media.map((m) => ({
+        url: m.url,
+        file: m.file,
+        is_thumbnail: m.is_thumbnail,
+        is_banner: m.is_banner
+      }))
+    });
+    await mutateAsync(images, {
+      onSuccess: () => {
+        toast.success(t("collections.media.edit.successToast"));
+        handleSuccess();
+      },
+      onError: (error) => {
+        toast.error(error.message);
+      }
+    });
+  });
+  const handleCheckedChange = useCallback(
+    (id) => (val) => {
+      if (!val) {
+        const { [id]: _, ...rest } = selection;
+        setSelection(rest);
+      } else {
+        setSelection((prev) => ({ ...prev, [id]: true }));
+      }
+    },
+    [selection]
+  );
+  const handleDelete = () => {
+    const ids = Object.keys(selection);
+    const indices = ids.map((id) => fields.findIndex((m) => m.field_id === id));
+    remove(indices);
+    setSelection({});
+  };
+  const handlePromote = (role) => {
+    const ids = Object.keys(selection);
+    if (!ids.length) {
+      return;
+    }
+    const targetIndex = fields.findIndex((m) => m.field_id === ids[0]);
+    fields.forEach((field, i) => {
+      const shouldBe = i === targetIndex;
+      if (field[role] !== shouldBe) {
+        update(i, { ...field, [role]: shouldBe });
+      }
+    });
+    setSelection({});
+  };
+  const onUploaded = (files) => {
+    files.forEach(
+      (f) => append({
+        url: f.url,
+        file: f.file,
+        is_thumbnail: false,
+        is_banner: false
+      })
+    );
+  };
+  const selectionCount = Object.keys(selection).length;
+  return /* @__PURE__ */ jsx(RouteFocusModal.Form, { blockSearchParams: true, form, children: /* @__PURE__ */ jsxs(
+    KeyboundForm,
+    {
+      className: "flex size-full flex-col overflow-hidden",
+      onSubmit: handleSubmit,
+      children: [
+        /* @__PURE__ */ jsx(RouteFocusModal.Header, { children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end gap-x-2", children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", asChild: true, children: /* @__PURE__ */ jsx(Link, { to: { pathname: ".", search: void 0 }, children: t("collections.media.galleryLabel") }) }) }) }),
+        /* @__PURE__ */ jsx(RouteFocusModal.Body, { className: "flex flex-col overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "flex size-full flex-col-reverse lg:grid lg:grid-cols-[1fr_560px]", children: [
+          /* @__PURE__ */ jsx(
+            DndContext,
+            {
+              sensors,
+              onDragEnd: handleDragEnd,
+              onDragStart: handleDragStart,
+              onDragCancel: handleDragCancel,
+              children: /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-subtle size-full overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "grid h-fit auto-rows-auto grid-cols-4 gap-6 p-6", children: [
+                /* @__PURE__ */ jsx(
+                  SortableContext,
+                  {
+                    items: fields.map((m) => m.field_id),
+                    strategy: rectSortingStrategy,
+                    children: fields.map((m) => /* @__PURE__ */ jsx(
+                      MediaGridItem,
+                      {
+                        media: m,
+                        checked: !!selection[m.field_id],
+                        onCheckedChange: handleCheckedChange(m.field_id)
+                      },
+                      m.field_id
+                    ))
+                  }
+                ),
+                /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: dropAnimationConfig, children: activeId ? /* @__PURE__ */ jsx(
+                  MediaGridItemOverlay,
+                  {
+                    media: fields.find((m) => m.field_id === activeId)
+                  }
+                ) : null })
+              ] }) })
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "bg-ui-bg-base overflow-auto border-b px-6 py-4 lg:border-b-0 lg:border-l", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-y-1", children: [
+              /* @__PURE__ */ jsx(Text, { size: "small", weight: "plus", leading: "compact", children: t("collections.media.label") }),
+              /* @__PURE__ */ jsx(Form.Hint, { children: t("collections.media.editHint") })
+            ] }),
+            /* @__PURE__ */ jsx(
+              FileUpload,
+              {
+                label: t("collections.media.upload.title"),
+                hint: t("collections.media.upload.hint"),
+                formats: COLLECTION_IMAGE_FORMATS,
+                onUploaded
+              }
+            )
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(CommandBar, { open: !!selectionCount, children: /* @__PURE__ */ jsxs(CommandBar.Bar, { children: [
+          /* @__PURE__ */ jsx(CommandBar.Value, { children: t("general.countSelected", { count: selectionCount }) }),
+          /* @__PURE__ */ jsx(CommandBar.Seperator, {}),
+          selectionCount === 1 && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              CommandBar.Command,
+              {
+                action: () => handlePromote("is_thumbnail"),
+                label: t("collections.media.actions.setThumbnail"),
+                shortcut: "t"
+              }
+            ),
+            /* @__PURE__ */ jsx(CommandBar.Seperator, {}),
+            /* @__PURE__ */ jsx(
+              CommandBar.Command,
+              {
+                action: () => handlePromote("is_banner"),
+                label: t("collections.media.actions.setBanner"),
+                shortcut: "b"
+              }
+            ),
+            /* @__PURE__ */ jsx(CommandBar.Seperator, {})
+          ] }),
+          /* @__PURE__ */ jsx(
+            CommandBar.Command,
+            {
+              action: handleDelete,
+              label: t("actions.delete"),
+              shortcut: "d"
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(RouteFocusModal.Footer, { children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-x-2", children: [
+          /* @__PURE__ */ jsx(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "small", children: t("actions.cancel") }) }),
+          /* @__PURE__ */ jsx(Button, { size: "small", type: "submit", isLoading: isPending, children: t("actions.save") })
+        ] }) })
+      ]
+    }
+  ) });
+};
+var dropAnimationConfig = {
+  sideEffects: defaultDropAnimationSideEffects({
+    styles: { active: { opacity: "0.4" } }
+  })
+};
+var RoleBadges = ({ media }) => {
+  const { t } = useTranslation();
+  if (!media.is_thumbnail && !media.is_banner) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "absolute left-2 top-2 flex items-center gap-x-1", children: [
+    media.is_thumbnail && /* @__PURE__ */ jsx(Tooltip, { content: t("collections.media.thumbnail"), children: /* @__PURE__ */ jsx(ThumbnailBadge, {}) }),
+    media.is_banner && /* @__PURE__ */ jsx(Tooltip, { content: t("collections.media.banner"), children: /* @__PURE__ */ jsx(FeaturedBadge, { className: "text-ui-fg-interactive" }) })
+  ] });
+};
+var MediaGridItem = ({
+  media,
+  checked,
+  onCheckedChange
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: media.field_id });
+  const style = {
+    opacity: isDragging ? 0.4 : void 0,
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "group bg-ui-bg-subtle-hover shadow-elevation-card-rest hover:shadow-elevation-card-hover focus-visible:shadow-borders-focus relative aspect-square h-auto max-w-full overflow-hidden rounded-lg outline-none",
+      style,
+      ref: setNodeRef,
+      children: [
+        /* @__PURE__ */ jsx(RoleBadges, { media }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clx("absolute inset-0 cursor-grab touch-none outline-none", {
+              "cursor-grabbing": isDragging
+            }),
+            ref: setActivatorNodeRef,
+            ...attributes,
+            ...listeners
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: clx("transition-fg absolute right-2 top-2 opacity-0", {
+              "group-focus-within:opacity-100 group-hover:opacity-100 group-focus:opacity-100": !isDragging && !checked,
+              "opacity-100": checked
+            }),
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                onClick: (e) => e.stopPropagation(),
+                checked,
+                onCheckedChange
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: media.url,
+            alt: "",
+            className: "size-full object-cover object-center"
+          }
+        )
+      ]
+    }
+  );
+};
+var MediaGridItemOverlay = ({ media }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "group bg-ui-bg-subtle-hover shadow-elevation-card-rest relative aspect-square h-auto max-w-full cursor-grabbing overflow-hidden rounded-lg outline-none", children: [
+    /* @__PURE__ */ jsx(RoleBadges, { media }),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: media.url,
+        alt: "",
+        className: "size-full object-cover object-center"
+      }
+    )
+  ] });
+};
+
+// src/pages/collections/collection-media/components/collection-media-gallery/collection-media-gallery.tsx
+import {
+  ArrowDownTray,
+  FeaturedBadge as FeaturedBadge2,
+  ThumbnailBadge as ThumbnailBadge2,
+  Trash,
+  TriangleLeftMini,
+  TriangleRightMini
+} from "@medusajs/icons";
+import { Button as Button2, IconButton, Text as Text2, Tooltip as Tooltip2, clx as clx2, usePrompt } from "@medusajs/ui";
+import { useCallback as useCallback2, useEffect, useState as useState2 } from "react";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { Link as Link2, useLocation } from "react-router-dom";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var CollectionMediaGallery = ({
+  collection
+}) => {
+  const { state } = useLocation();
+  const [curr, setCurr] = useState2(state?.curr || 0);
+  const { t } = useTranslation2();
+  const prompt = usePrompt();
+  const { mutateAsync, isPending } = useUpdateCollection(collection.id);
+  const media = getCollectionGallery(collection.images);
+  const next = useCallback2(() => {
+    if (isPending) {
+      return;
+    }
+    setCurr((current) => (current + 1) % media.length);
+  }, [media, isPending]);
+  const prev = useCallback2(() => {
+    if (isPending) {
+      return;
+    }
+    setCurr((current) => (current - 1 + media.length) % media.length);
+  }, [media, isPending]);
+  const goTo = useCallback2(
+    (index) => {
+      if (isPending) {
+        return;
+      }
+      setCurr(index);
+    },
+    [isPending]
+  );
+  const handleDownloadCurrent = () => {
+    if (isPending) {
+      return;
+    }
+    const a = document.createElement("a");
+    a.href = media[curr].url;
+    a.download = "image";
+    a.target = "_blank";
+    a.click();
+  };
+  const handleDeleteCurrent = async () => {
+    const current = media[curr];
+    const res = await prompt({
+      title: t("general.areYouSure"),
+      description: t("collections.media.deleteWarning"),
+      confirmText: t("actions.delete"),
+      cancelText: t("actions.cancel")
+    });
+    if (!res) {
+      return;
+    }
+    const remaining = media.filter((image) => image.id !== current.id).map((image) => ({
+      url: image.url,
+      is_thumbnail: image.is_thumbnail,
+      is_banner: image.is_banner
+    }));
+    if (curr === media.length - 1) {
+      setCurr((index) => Math.max(0, index - 1));
+    }
+    await mutateAsync({ media: remaining });
+  };
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "ArrowRight") {
+        next();
+      } else if (e.key === "ArrowLeft") {
+        prev();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [next, prev]);
+  const noMedia = !media.length;
+  return /* @__PURE__ */ jsxs2("div", { className: "flex size-full flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx2(RouteFocusModal.Header, { children: /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-end gap-x-2", children: [
+      /* @__PURE__ */ jsx2(
+        IconButton,
+        {
+          size: "small",
+          type: "button",
+          onClick: handleDeleteCurrent,
+          disabled: noMedia,
+          children: /* @__PURE__ */ jsx2(Trash, {})
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        IconButton,
+        {
+          size: "small",
+          type: "button",
+          onClick: handleDownloadCurrent,
+          disabled: noMedia,
+          children: /* @__PURE__ */ jsx2(ArrowDownTray, {})
+        }
+      ),
+      /* @__PURE__ */ jsx2(Button2, { variant: "secondary", size: "small", asChild: true, children: /* @__PURE__ */ jsx2(Link2, { to: { pathname: ".", search: "view=edit" }, children: t("actions.edit") }) })
+    ] }) }),
+    /* @__PURE__ */ jsxs2(RouteFocusModal.Body, { className: "flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx2(Canvas, { curr, media }),
+      /* @__PURE__ */ jsx2(Preview, { curr, media, prev, next, goTo })
+    ] })
+  ] });
+};
+var Canvas = ({
+  media,
+  curr
+}) => {
+  const { t } = useTranslation2();
+  if (media.length === 0) {
+    return /* @__PURE__ */ jsxs2("div", { className: "bg-ui-bg-subtle flex size-full flex-col items-center justify-center gap-y-4 pb-8 pt-6", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx2(
+          Text2,
+          {
+            size: "small",
+            leading: "compact",
+            weight: "plus",
+            className: "text-ui-fg-subtle",
+            children: t("collections.media.empty.header")
+          }
+        ),
+        /* @__PURE__ */ jsx2(Text2, { size: "small", className: "text-ui-fg-muted", children: t("collections.media.empty.description") })
+      ] }),
+      /* @__PURE__ */ jsx2(Button2, { size: "small", variant: "secondary", asChild: true, children: /* @__PURE__ */ jsx2(Link2, { to: "?view=edit", children: t("collections.media.upload.title") }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsx2("div", { className: "bg-ui-bg-subtle relative size-full overflow-hidden", children: /* @__PURE__ */ jsx2("div", { className: "flex size-full items-center justify-center p-6", children: /* @__PURE__ */ jsxs2("div", { className: "relative inline-block max-h-full max-w-full", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "absolute left-2 top-2 flex items-center gap-x-1", children: [
+      media[curr].is_thumbnail && /* @__PURE__ */ jsx2(Tooltip2, { content: t("collections.media.thumbnail"), children: /* @__PURE__ */ jsx2(ThumbnailBadge2, {}) }),
+      media[curr].is_banner && /* @__PURE__ */ jsx2(Tooltip2, { content: t("collections.media.banner"), children: /* @__PURE__ */ jsx2(FeaturedBadge2, { className: "text-ui-fg-interactive" }) })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "img",
+      {
+        src: media[curr].url,
+        alt: "",
+        className: "object-fit shadow-elevation-card-rest max-h-[calc(100vh-200px)] w-auto rounded-xl object-contain"
+      }
+    )
+  ] }) }) });
+};
+var MAX_VISIBLE_ITEMS = 8;
+var Preview = ({
+  media,
+  curr,
+  prev,
+  next,
+  goTo
+}) => {
+  if (!media.length) {
+    return null;
+  }
+  const getVisibleItems = (items, index) => {
+    if (items.length <= MAX_VISIBLE_ITEMS) {
+      return items;
+    }
+    const half = Math.floor(MAX_VISIBLE_ITEMS / 2);
+    const start = (index - half + items.length) % items.length;
+    const end = (start + MAX_VISIBLE_ITEMS) % items.length;
+    if (end < start) {
+      return [...items.slice(start), ...items.slice(0, end)];
+    }
+    return items.slice(start, end);
+  };
+  const visibleItems = getVisibleItems(media, curr);
+  return /* @__PURE__ */ jsxs2("div", { className: "flex shrink-0 items-center justify-center gap-x-2 border-t p-3", children: [
+    /* @__PURE__ */ jsx2(
+      IconButton,
+      {
+        size: "small",
+        variant: "transparent",
+        className: "text-ui-fg-muted",
+        type: "button",
+        onClick: prev,
+        children: /* @__PURE__ */ jsx2(TriangleLeftMini, { className: "rtl:rotate-180" })
+      }
+    ),
+    /* @__PURE__ */ jsx2("div", { className: "flex items-center gap-x-2", children: visibleItems.map((item) => {
+      const isCurrentImage = item.id === media[curr].id;
+      const originalIndex = media.findIndex((i) => i.id === item.id);
+      return /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "aria-label": "Media file input",
+          onClick: () => goTo(originalIndex),
+          className: clx2(
+            "transition-fg size-7 overflow-hidden rounded-[4px] outline-none",
+            {
+              "shadow-borders-focus": isCurrentImage
+            }
+          ),
+          children: /* @__PURE__ */ jsx2("img", { src: item.url, alt: "", className: "size-full object-cover" })
+        },
+        item.id
+      );
+    }) }),
+    /* @__PURE__ */ jsx2(
+      IconButton,
+      {
+        size: "small",
+        variant: "transparent",
+        className: "text-ui-fg-muted",
+        type: "button",
+        onClick: next,
+        children: /* @__PURE__ */ jsx2(TriangleRightMini, { className: "rtl:rotate-180" })
+      }
+    )
+  ] });
+};
+
+// src/pages/collections/collection-media/components/collection-media-view/collection-media-view-context.tsx
+import { createContext } from "react";
+var CollectionMediaViewContext = createContext(null);
+
+// src/pages/collections/collection-media/components/collection-media-view/collection-media-view.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var getView = (searchParams) => {
+  const view = searchParams.get("view");
+  if (view === "edit" /* EDIT */) {
+    return "edit" /* EDIT */;
+  }
+  return "gallery" /* GALLERY */;
+};
+var CollectionMediaView = ({
+  collection
+}) => {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const view = getView(searchParams);
+  const contextValue = useMemo(
+    () => ({
+      goToGallery: () => setSearchParams({ view: "gallery" /* GALLERY */ }),
+      goToEdit: () => setSearchParams({ view: "edit" /* EDIT */ })
+    }),
+    [setSearchParams]
+  );
+  return /* @__PURE__ */ jsx3(CollectionMediaViewContext.Provider, { value: contextValue, children: view === "edit" /* EDIT */ ? /* @__PURE__ */ jsx3(EditCollectionMediaForm, { collection }) : /* @__PURE__ */ jsx3(CollectionMediaGallery, { collection }) });
+};
+
+// src/pages/collections/collection-media/collection-media.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var CollectionMedia = () => {
+  const { t } = useTranslation3();
+  const { id } = useParams();
+  const { collection, isLoading, isError, error } = useCollection(id);
+  const ready = !isLoading && !!collection;
+  if (isError) {
+    throw error;
+  }
+  return /* @__PURE__ */ jsxs3(RouteFocusModal, { "data-testid": "collection-media-modal", children: [
+    /* @__PURE__ */ jsx4(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx4("span", { className: "sr-only", children: t("collections.media.label") }) }),
+    /* @__PURE__ */ jsx4(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx4("span", { className: "sr-only", children: t("collections.media.edit.description") }) }),
+    ready && /* @__PURE__ */ jsx4(CollectionMediaView, { collection })
+  ] });
+};
+export {
+  CollectionMedia as Component
+};