@lodashventure/medusa-media-manager 0.2.10 → 0.2.12

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useMemo, useCallback, useRef, useEffect } from "react";
 import { defineRouteConfig } from "@medusajs/admin-sdk";
 import { SquaresPlus, ListBullet, ArrowPath, CloudArrowUp, Photo, ShieldCheck, DocumentText, PlaySolid, X, CircleArrowUp, ArrowDownTray, SquareTwoStack, Trash } from "@medusajs/icons";
-import { Input, Select, TooltipProvider, Tooltip, IconButton, clx, Button, Badge, Skeleton, Table, StatusBadge, toast, Drawer, FocusModal, Textarea, Container, Heading, Alert } from "@medusajs/ui";
+import { Input, Select, TooltipProvider, Tooltip, IconButton, clx, Button, Badge, Skeleton, Table, StatusBadge, toast, Drawer, FocusModal, Textarea, Prompt, Container, Heading, Alert } from "@medusajs/ui";
 import "@medusajs/admin-shared";
 const ALL_OPTION_VALUE = "all";
 const normalizeSelectValue = (value) => {
@@ -703,11 +703,13 @@ const MediaAssetDialog = ({
   const [visibility, setVisibility] = useState("public");
   const [deletePromptOpen, setDeletePromptOpen] = useState(false);
   const [deleteAttempted, setDeleteAttempted] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
   useEffect(() => {
     if (!assetId) {
       setAsset(null);
       setPreviewUrl(null);
       setDeleteAttempted(false);
+      setDeletePromptOpen(false);
       return;
     }
     let isMounted = true;
@@ -801,6 +803,10 @@ const MediaAssetDialog = ({
     if (!assetId) {
       return;
     }
+    if (isDeleting) {
+      return;
+    }
+    setIsDeleting(true);
     try {
       await deleteMediaAsset(assetId, force);
       toast.success("Asset deleted");
@@ -813,6 +819,8 @@ const MediaAssetDialog = ({
       toast.error("Failed to delete", {
         description: (err == null ? void 0 : err.message) ?? "Unable to delete asset. If it's in use, try forcing deletion."
       });
+    } finally {
+      setIsDeleting(false);
     }
   };
   const handleVariantCopy = async (preset) => {
@@ -858,67 +866,239 @@ const MediaAssetDialog = ({
     }
   };
   const assetRelations = (asset == null ? void 0 : asset.relations) ?? [];
-  return /* @__PURE__ */ jsx(FocusModal, { open: Boolean(assetId), onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxs(
-    FocusModal.Content,
-    {
-      ref: modalContentRef,
-      className: "flex h-full w-full max-w-3xl flex-col overflow-y-auto p-6",
-      children: [
-        /* @__PURE__ */ jsxs(FocusModal.Header, { children: [
-          /* @__PURE__ */ jsx(FocusModal.Title, { className: "text-lg font-semibold", children: "Asset details" }),
-          /* @__PURE__ */ jsx(FocusModal.Description, { children: "Review and update metadata, copy delivery URLs, or replace the original file." })
-        ] }),
-        isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-ui-fg-subtle", children: "Loading asset..." }) }) : asset ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-y-6", children: [
-          /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-y-4", children: [
-            /* @__PURE__ */ jsx("div", { className: "aspect-video w-full overflow-hidden rounded-lg border border-ui-border-base bg-ui-bg-subtle", children: previewUrl ? /* @__PURE__ */ jsx(
-              "img",
-              {
-                src: previewUrl,
-                alt: asset.original_filename,
-                className: "h-full w-full object-contain"
-              }
-            ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center text-ui-fg-muted", children: /* @__PURE__ */ jsx(Photo, { className: "size-8" }) }) }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-ui-fg-subtle", children: [
-              /* @__PURE__ */ jsx("span", { children: asset.mime }),
-              /* @__PURE__ */ jsx("span", { children: "·" }),
-              /* @__PURE__ */ jsx("span", { children: formatFileSize(asset.size_bytes) }),
-              /* @__PURE__ */ jsx("span", { children: "·" }),
-              /* @__PURE__ */ jsxs("span", { children: [
-                "Updated ",
-                formatDateTime(asset.updated_at)
+  return /* @__PURE__ */ jsxs(FocusModal, { open: Boolean(assetId), onOpenChange: (open) => !open && onClose(), children: [
+    /* @__PURE__ */ jsxs(
+      FocusModal.Content,
+      {
+        ref: modalContentRef,
+        className: "flex h-full w-full max-w-3xl flex-col overflow-y-auto p-6",
+        children: [
+          /* @__PURE__ */ jsxs(FocusModal.Header, { children: [
+            /* @__PURE__ */ jsx(FocusModal.Title, { className: "text-lg font-semibold", children: "Asset details" }),
+            /* @__PURE__ */ jsx(FocusModal.Description, { children: "Review and update metadata, copy delivery URLs, or replace the original file." })
+          ] }),
+          isLoading ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "text-sm text-ui-fg-subtle", children: "Loading asset..." }) }) : asset ? /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-y-6", children: [
+            /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-y-4", children: [
+              /* @__PURE__ */ jsx("div", { className: "aspect-video w-full overflow-hidden rounded-lg border border-ui-border-base bg-ui-bg-subtle", children: previewUrl ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: previewUrl,
+                  alt: asset.original_filename,
+                  className: "h-full w-full object-contain"
+                }
+              ) : /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center text-ui-fg-muted", children: /* @__PURE__ */ jsx(Photo, { className: "size-8" }) }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2 text-xs text-ui-fg-subtle", children: [
+                /* @__PURE__ */ jsx("span", { children: asset.mime }),
+                /* @__PURE__ */ jsx("span", { children: "·" }),
+                /* @__PURE__ */ jsx("span", { children: formatFileSize(asset.size_bytes) }),
+                /* @__PURE__ */ jsx("span", { children: "·" }),
+                /* @__PURE__ */ jsxs("span", { children: [
+                  "Updated ",
+                  formatDateTime(asset.updated_at)
+                ] }),
+                /* @__PURE__ */ jsx(
+                  StatusBadge,
+                  {
+                    size: "small",
+                    color: STATUS_COLORS[asset.status] ?? "default",
+                    children: asset.status
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Badge,
+                  {
+                    size: "small",
+                    variant: asset.visibility === "public" ? "neutral" : "warning",
+                    className: "capitalize",
+                    children: asset.visibility
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    onClick: () => {
+                      var _a2;
+                      return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+                    },
+                    isLoading: isReplacing,
+                    children: [
+                      /* @__PURE__ */ jsx(CircleArrowUp, { className: "mr-1 size-4" }),
+                      "Replace file"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    type: "button",
+                    variant: "secondary",
+                    onClick: () => handleVariantCopy("medium"),
+                    children: [
+                      /* @__PURE__ */ jsx(ArrowDownTray, { className: "mr-1 size-4" }),
+                      "Get URL"
+                    ]
+                  }
+                )
               ] }),
               /* @__PURE__ */ jsx(
-                StatusBadge,
+                "input",
                 {
-                  size: "small",
-                  color: STATUS_COLORS[asset.status] ?? "default",
-                  children: asset.status
+                  type: "file",
+                  ref: fileInputRef,
+                  className: "hidden",
+                  onChange: (event) => {
+                    var _a2;
+                    return handleReplace(((_a2 = event.target.files) == null ? void 0 : _a2[0]) ?? null);
+                  }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    label: "Title",
+                    placeholder: "Hero banner",
+                    value: title,
+                    onChange: (event) => setTitle(event.target.value)
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    label: "Alt text",
+                    placeholder: "Describe the media for accessibility",
+                    value: altText,
+                    onChange: (event) => setAltText(event.target.value)
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  label: "Caption",
+                  placeholder: "Optional caption or notes",
+                  value: caption,
+                  onChange: (event) => setCaption(event.target.value)
                 }
               ),
               /* @__PURE__ */ jsx(
-                Badge,
+                Input,
                 {
-                  size: "small",
-                  variant: asset.visibility === "public" ? "neutral" : "warning",
-                  className: "capitalize",
-                  children: asset.visibility
+                  label: "Tags",
+                  placeholder: "summer, lookbook, hero",
+                  value: tagsInput,
+                  onChange: (event) => setTagsInput(event.target.value),
+                  helperText: "Separate tags with commas"
                 }
-              )
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
+                /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    value: status,
+                    onValueChange: (value) => setStatus(value),
+                    children: [
+                      /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Status" }) }),
+                      /* @__PURE__ */ jsxs(Select.Content, { children: [
+                        /* @__PURE__ */ jsx(Select.Item, { value: "draft", children: "Draft" }),
+                        /* @__PURE__ */ jsx(Select.Item, { value: "published", children: "Published" }),
+                        /* @__PURE__ */ jsx(Select.Item, { value: "archived", children: "Archived" })
+                      ] })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  Select,
+                  {
+                    value: visibility,
+                    onValueChange: (value) => setVisibility(value),
+                    children: [
+                      /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Visibility" }) }),
+                      /* @__PURE__ */ jsxs(Select.Content, { children: [
+                        /* @__PURE__ */ jsx(Select.Item, { value: "public", children: "Public" }),
+                        /* @__PURE__ */ jsx(Select.Item, { value: "private", children: "Private" })
+                      ] })
+                    ]
+                  }
+                )
+              ] })
             ] }),
-            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+            ((_a = asset.variants) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Variants" }),
+              /* @__PURE__ */ jsxs(Table, { children: [
+                /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+                  /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Name" }),
+                  /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Format" }),
+                  /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Dimensions" }),
+                  /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Size" }),
+                  /* @__PURE__ */ jsx(Table.HeaderCell, { className: "text-right", children: "Actions" })
+                ] }) }),
+                /* @__PURE__ */ jsx(Table.Body, { children: asset.variants.map((variant) => /* @__PURE__ */ jsxs(
+                  Table.Row,
+                  {
+                    children: [
+                      /* @__PURE__ */ jsx(Table.Cell, { className: "capitalize", children: variant.preset }),
+                      /* @__PURE__ */ jsx(Table.Cell, { children: variant.format }),
+                      /* @__PURE__ */ jsx(Table.Cell, { children: variant.width && variant.height ? `${variant.width}×${variant.height}` : "-" }),
+                      /* @__PURE__ */ jsx(Table.Cell, { children: formatFileSize(variant.size_bytes) }),
+                      /* @__PURE__ */ jsx(Table.Cell, { className: "flex justify-end gap-2", children: /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          size: "small",
+                          variant: "secondary",
+                          onClick: () => handleVariantCopy(variant.preset),
+                          children: [
+                            /* @__PURE__ */ jsx(SquareTwoStack, { className: "mr-1 size-4" }),
+                            " Copy URL"
+                          ]
+                        }
+                      ) })
+                    ]
+                  },
+                  variant.id ?? `${variant.preset}-${variant.format}`
+                )) })
+              ] })
+            ] }) : null,
+            /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
+              /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Usage" }),
+              assetRelations.length ? /* @__PURE__ */ jsxs(Table, { children: [
+                /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
+                  /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Entity" }),
+                  /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Reference" }),
+                  /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Role" })
+                ] }) }),
+                /* @__PURE__ */ jsx(Table.Body, { children: assetRelations.map((relation) => /* @__PURE__ */ jsxs(Table.Row, { children: [
+                  /* @__PURE__ */ jsx(Table.Cell, { className: "capitalize", children: relation.entity_type }),
+                  /* @__PURE__ */ jsx(Table.Cell, { className: "font-mono text-xs", children: relation.entity_id }),
+                  /* @__PURE__ */ jsx(Table.Cell, { children: relation.relation_role })
+                ] }, relation.id)) })
+              ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-ui-fg-subtle", children: "This asset is not linked to any entities." })
+            ] })
+          ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center text-sm text-ui-fg-subtle", children: "Select an asset to view details." }),
+          /* @__PURE__ */ jsxs(FocusModal.Footer, { className: "mt-6 flex flex-wrap items-center justify-between gap-3", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
               /* @__PURE__ */ jsxs(
                 Button,
                 {
                   type: "button",
-                  variant: "secondary",
+                  variant: "danger",
                   onClick: () => {
-                    var _a2;
-                    return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+                    if (!asset) {
+                      return;
+                    }
+                    setDeletePromptOpen(true);
                   },
-                  isLoading: isReplacing,
+                  disabled: !asset || isDeleting,
+                  isLoading: isDeleting,
                   children: [
-                    /* @__PURE__ */ jsx(CircleArrowUp, { className: "mr-1 size-4" }),
-                    "Replace file"
+                    /* @__PURE__ */ jsx(Trash, { className: "mr-1 size-4" }),
+                    " Delete"
                   ]
                 }
               ),
@@ -927,227 +1107,82 @@ const MediaAssetDialog = ({
                 {
                   type: "button",
                   variant: "secondary",
-                  onClick: () => handleVariantCopy("medium"),
+                  onClick: () => asset && handleVariantCopy("medium"),
+                  disabled: !asset,
                   children: [
-                    /* @__PURE__ */ jsx(ArrowDownTray, { className: "mr-1 size-4" }),
-                    "Get URL"
+                    /* @__PURE__ */ jsx(ArrowPath, { className: "mr-1 size-4" }),
+                    " Copy URL"
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "file",
-                ref: fileInputRef,
-                className: "hidden",
-                onChange: (event) => {
-                  var _a2;
-                  return handleReplace(((_a2 = event.target.files) == null ? void 0 : _a2[0]) ?? null);
-                }
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
-              /* @__PURE__ */ jsx(
-                Input,
-                {
-                  label: "Title",
-                  placeholder: "Hero banner",
-                  value: title,
-                  onChange: (event) => setTitle(event.target.value)
-                }
-              ),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, children: "Close" }),
               /* @__PURE__ */ jsx(
-                Input,
-                {
-                  label: "Alt text",
-                  placeholder: "Describe the media for accessibility",
-                  value: altText,
-                  onChange: (event) => setAltText(event.target.value)
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx(
-              Textarea,
-              {
-                label: "Caption",
-                placeholder: "Optional caption or notes",
-                value: caption,
-                onChange: (event) => setCaption(event.target.value)
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                label: "Tags",
-                placeholder: "summer, lookbook, hero",
-                value: tagsInput,
-                onChange: (event) => setTagsInput(event.target.value),
-                helperText: "Separate tags with commas"
-              }
-            ),
-            /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: [
-              /* @__PURE__ */ jsxs(
-                Select,
+                Button,
                 {
-                  value: status,
-                  onValueChange: (value) => setStatus(value),
-                  children: [
-                    /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Status" }) }),
-                    /* @__PURE__ */ jsxs(Select.Content, { children: [
-                      /* @__PURE__ */ jsx(Select.Item, { value: "draft", children: "Draft" }),
-                      /* @__PURE__ */ jsx(Select.Item, { value: "published", children: "Published" }),
-                      /* @__PURE__ */ jsx(Select.Item, { value: "archived", children: "Archived" })
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                Select,
-                {
-                  value: visibility,
-                  onValueChange: (value) => setVisibility(value),
-                  children: [
-                    /* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, { placeholder: "Visibility" }) }),
-                    /* @__PURE__ */ jsxs(Select.Content, { children: [
-                      /* @__PURE__ */ jsx(Select.Item, { value: "public", children: "Public" }),
-                      /* @__PURE__ */ jsx(Select.Item, { value: "private", children: "Private" })
-                    ] })
-                  ]
+                  onClick: handleSave,
+                  disabled: !asset || isSaving,
+                  isLoading: isSaving,
+                  children: "Save changes"
                 }
               )
             ] })
           ] }),
-          ((_a = asset.variants) == null ? void 0 : _a.length) ? /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Variants" }),
-            /* @__PURE__ */ jsxs(Table, { children: [
-              /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
-                /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Name" }),
-                /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Format" }),
-                /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Dimensions" }),
-                /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Size" }),
-                /* @__PURE__ */ jsx(Table.HeaderCell, { className: "text-right", children: "Actions" })
-              ] }) }),
-              /* @__PURE__ */ jsx(Table.Body, { children: asset.variants.map((variant) => /* @__PURE__ */ jsxs(
-                Table.Row,
-                {
-                  children: [
-                    /* @__PURE__ */ jsx(Table.Cell, { className: "capitalize", children: variant.preset }),
-                    /* @__PURE__ */ jsx(Table.Cell, { children: variant.format }),
-                    /* @__PURE__ */ jsx(Table.Cell, { children: variant.width && variant.height ? `${variant.width}×${variant.height}` : "-" }),
-                    /* @__PURE__ */ jsx(Table.Cell, { children: formatFileSize(variant.size_bytes) }),
-                    /* @__PURE__ */ jsx(Table.Cell, { className: "flex justify-end gap-2", children: /* @__PURE__ */ jsxs(
-                      Button,
-                      {
-                        size: "small",
-                        variant: "secondary",
-                        onClick: () => handleVariantCopy(variant.preset),
-                        children: [
-                          /* @__PURE__ */ jsx(SquareTwoStack, { className: "mr-1 size-4" }),
-                          " Copy URL"
-                        ]
-                      }
-                    ) })
-                  ]
-                },
-                variant.id ?? `${variant.preset}-${variant.format}`
-              )) })
-            ] })
-          ] }) : null,
-          /* @__PURE__ */ jsxs("section", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: "Usage" }),
-            assetRelations.length ? /* @__PURE__ */ jsxs(Table, { children: [
-              /* @__PURE__ */ jsx(Table.Header, { children: /* @__PURE__ */ jsxs(Table.Row, { children: [
-                /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Entity" }),
-                /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Reference" }),
-                /* @__PURE__ */ jsx(Table.HeaderCell, { children: "Role" })
-              ] }) }),
-              /* @__PURE__ */ jsx(Table.Body, { children: assetRelations.map((relation) => /* @__PURE__ */ jsxs(Table.Row, { children: [
-                /* @__PURE__ */ jsx(Table.Cell, { className: "capitalize", children: relation.entity_type }),
-                /* @__PURE__ */ jsx(Table.Cell, { className: "font-mono text-xs", children: relation.entity_id }),
-                /* @__PURE__ */ jsx(Table.Cell, { children: relation.relation_role })
-              ] }, relation.id)) })
-            ] }) : /* @__PURE__ */ jsx("p", { className: "text-sm text-ui-fg-subtle", children: "This asset is not linked to any entities." })
-          ] })
-        ] }) : /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center text-sm text-ui-fg-subtle", children: "Select an asset to view details." }),
-        /* @__PURE__ */ jsxs(FocusModal.Footer, { className: "mt-6 flex flex-wrap items-center justify-between gap-3", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsxs(
+          deleteAttempted && asset && /* @__PURE__ */ jsxs("div", { className: "mt-4 rounded-md border border-ui-border-base bg-ui-bg-subtle p-4 text-sm text-ui-fg-subtle", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-medium text-ui-fg-base", children: "Having trouble deleting?" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-1", children: "If the asset is still referenced, remove those relations first or attempt a force delete." }),
+            /* @__PURE__ */ jsx(
               Button,
               {
-                type: "button",
+                className: "mt-3",
                 variant: "danger",
+                size: "small",
+                disabled: isDeleting,
+                isLoading: isDeleting,
                 onClick: () => {
-                  if (!asset) {
-                    return;
-                  }
-                  const confirmDelete = window.confirm(
-                    "Delete this asset and all generated variants?"
+                  const confirmForce = window.confirm(
+                    "Force delete will remove the asset even if it is still referenced. Continue?"
                   );
-                  if (confirmDelete) {
-                    handleDelete(false);
+                  if (confirmForce) {
+                    handleDelete(true);
                   }
                 },
-                disabled: !asset,
-                children: [
-                  /* @__PURE__ */ jsx(Trash, { className: "mr-1 size-4" }),
-                  " Delete"
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsxs(
-              Button,
-              {
-                type: "button",
-                variant: "secondary",
-                onClick: () => asset && handleVariantCopy("medium"),
-                disabled: !asset,
-                children: [
-                  /* @__PURE__ */ jsx(ArrowPath, { className: "mr-1 size-4" }),
-                  " Copy URL"
-                ]
+                children: "Force delete"
               }
             )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Prompt,
+      {
+        variant: "confirmation",
+        open: Boolean(asset) && deletePromptOpen,
+        onOpenChange: (open) => setDeletePromptOpen(open),
+        children: /* @__PURE__ */ jsxs(Prompt.Content, { children: [
+          /* @__PURE__ */ jsxs(Prompt.Header, { children: [
+            /* @__PURE__ */ jsx(Prompt.Title, { children: "Delete asset" }),
+            /* @__PURE__ */ jsx(Prompt.Description, { children: asset ? `Delete "${asset.original_filename}" and all generated variants? This cannot be undone.` : "Delete this asset and all generated variants? This cannot be undone." })
           ] }),
-          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onClose, children: "Close" }),
-            /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(Prompt.Footer, { children: [
+            /* @__PURE__ */ jsx(Prompt.Cancel, { children: "Cancel" }),
+            /* @__PURE__ */ jsx(Prompt.Action, { asChild: true, children: /* @__PURE__ */ jsx(
               Button,
               {
-                onClick: handleSave,
-                disabled: !asset || isSaving,
-                isLoading: isSaving,
-                children: "Save changes"
+                variant: "danger",
+                onClick: () => handleDelete(false),
+                disabled: isDeleting,
+                isLoading: isDeleting,
+                children: "Delete"
               }
-            )
+            ) })
           ] })
-        ] }),
-        deleteAttempted && asset && /* @__PURE__ */ jsxs("div", { className: "mt-4 rounded-md border border-ui-border-base bg-ui-bg-subtle p-4 text-sm text-ui-fg-subtle", children: [
-          /* @__PURE__ */ jsx("p", { className: "font-medium text-ui-fg-base", children: "Having trouble deleting?" }),
-          /* @__PURE__ */ jsx("p", { className: "mt-1", children: "If the asset is still referenced, remove those relations first or attempt a force delete." }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              className: "mt-3",
-              variant: "danger",
-              size: "small",
-              onClick: () => {
-                const confirmForce = window.confirm(
-                  "Force delete will remove the asset even if it is still referenced. Continue?"
-                );
-                if (confirmForce) {
-                  handleDelete(true);
-                }
-              },
-              children: "Force delete"
-            }
-          )
         ] })
-      ]
-    }
-  ) });
+      }
+    )
+  ] });
 };
 const MediaAssetDrawer = MediaAssetDialog;
 const PAGE_SIZE = 24;