@pushwoosh/smart-components-kit 1.1.1 → 1.1.3

package/MediaStore/CreateCropDrawer.d.ts

@@ -0,0 +1,13 @@
+import { type FC } from 'react';
+import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
+type CreateCropDrawerProps = {
+    application: string;
+    original: MediaFile | null;
+    isOpen: boolean;
+    existingCrops: MediaFile[];
+    onClose: () => void;
+    onCreated: (parentUuid: string, crop: MediaFile) => void;
+    onDeleted: (parentUuid: string, cropUuid: string) => void;
+};
+export declare const CreateCropDrawer: FC<CreateCropDrawerProps>;
+export {};

package/MediaStore/{CreateVariantDrawer.js → CreateCropDrawer.js}

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
-import { Button, Drawer, DrawerBody, DrawerHeader, DrawerTitle, NativeInput, useToast } from '@pushwoosh/dumb-components';
+import { Button, Drawer, DrawerBody, DrawerHeader, DrawerTitle, ModalConfirm, NativeInput, useToast } from '@pushwoosh/dumb-components';
 import { Columns, Vertical } from '@pushwoosh/kit-helpers';
-import { CloseIcon } from '@pushwoosh/kit-icons';
+import { CloseIcon, TrashIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
+import { useDeleteMediaFile } from './hooks';
 import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Chip, Chips, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, TileImage, VariantStrip, VariantThumb, VariantThumbCaption } from './styled';
+import { Chip, Chips, CropStrip, CropThumb, CropThumbCaption, CropThumbDelete, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, TileImage } from './styled';
 const RATIOS = [{
   value: 'ASPECT_RATIO_1_1',
   label: '1:1',
@@ -48,13 +49,14 @@ const RATIOS = [{
 const DEFAULT_RATIO = 'ASPECT_RATIO_16_9';
 const DEFAULT_SIZE = '1080';
 const DEFAULT_QUALITY = '90';
-export const CreateVariantDrawer = ({
+export const CreateCropDrawer = ({
   application,
   original,
   isOpen,
-  existingVariants,
+  existingCrops,
   onClose,
-  onCreated
+  onCreated,
+  onDeleted
 }) => {
   const lang = useLang();
   const {
@@ -63,11 +65,13 @@ export const CreateVariantDrawer = ({
   const {
     openToast
   } = useToast();
+  const deleteMediaFile = useDeleteMediaFile(application);
   const [ratio, setRatio] = useState(DEFAULT_RATIO);
   const [dimension, setDimension] = useState('width');
   const [size, setSize] = useState(DEFAULT_SIZE);
   const [quality, setQuality] = useState(DEFAULT_QUALITY);
   const [isCreating, setIsCreating] = useState(false);
+  const [pendingDeleteCrop, setPendingDeleteCrop] = useState(null);
   // The drawer mounts once and is toggled via `isOpen`, so reset every field
   // whenever it opens for a different original — otherwise values (and the
   // `ratioExists` guard) leak from the previously edited image.
@@ -87,14 +91,14 @@ export const CreateVariantDrawer = ({
   const selectedRatio = RATIOS.find(item => item.value === ratio) ?? RATIOS[0];
   const outputWidth = dimension === 'width' ? sizeValue : Math.round(sizeValue * selectedRatio.ar);
   const outputHeight = dimension === 'height' ? sizeValue : Math.round(sizeValue / selectedRatio.ar);
-  const ratioExists = existingVariants.some(variant => {
-    var _variant$meta;
-    return ((_variant$meta = variant.meta) === null || _variant$meta === void 0 ? void 0 : _variant$meta.type) === 'imageMeta' && variant.meta.data.ratio === selectedRatio.label;
+  const ratioExists = existingCrops.some(crop => {
+    var _crop$meta;
+    return ((_crop$meta = crop.meta) === null || _crop$meta === void 0 ? void 0 : _crop$meta.type) === 'imageMeta' && crop.meta.data.ratio === selectedRatio.label;
   });
   const handleCreate = async () => {
     if (!original || !isSizeValid || !isQualityValid || ratioExists) return;
     // Capture the parent up front so a concurrent reopen for another image
-    // can't misroute the created variant.
+    // can't misroute the created crop.
     const parent = original;
     setIsCreating(true);
     try {
@@ -112,7 +116,7 @@ export const CreateVariantDrawer = ({
       });
       openToast({
         title: lang({
-          message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS'
+          message: 'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS'
         }),
         type: 'success'
       });
@@ -120,7 +124,7 @@ export const CreateVariantDrawer = ({
     } catch (error) {
       openToast({
         title: error.message || lang({
-          message: 'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR'
+          message: 'SMART.MEDIA_STORE.CREATE_CROP.ERROR'
         }),
         type: 'error'
       });
@@ -128,6 +132,17 @@ export const CreateVariantDrawer = ({
       setIsCreating(false);
     }
   };
+  const handleDeleteCrop = async () => {
+    const crop = pendingDeleteCrop;
+    setPendingDeleteCrop(null);
+    if (!crop) return;
+    // `parent_uuid` is set on crops; fall back to the open original's uuid.
+    const parentUuid = crop.parentUuid ?? (original === null || original === void 0 ? void 0 : original.uuid);
+    if (!parentUuid) return;
+    if (await deleteMediaFile(crop.uuid)) {
+      onDeleted(parentUuid, crop.uuid);
+    }
+  };
   return _jsxs(Drawer, {
     size: "medium",
     isOpen: isOpen,
@@ -136,7 +151,7 @@ export const CreateVariantDrawer = ({
       children: _jsxs(DrawerTitle, {
         children: [_jsx("span", {
           children: lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.TITLE'
           })
         }), _jsx(Button, {
           view: "ghost",
@@ -146,7 +161,7 @@ export const CreateVariantDrawer = ({
             size: "small"
           }),
           "aria-label": lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.CLOSE'
           }),
           onClick: onClose
         })]
@@ -157,7 +172,7 @@ export const CreateVariantDrawer = ({
         children: [_jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL'
             })
           }), _jsx(Chips, {
             children: RATIOS.map(item => _jsx(Chip, {
@@ -170,7 +185,7 @@ export const CreateVariantDrawer = ({
         }), _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL'
             })
           }), _jsxs(Columns, {
             "$sizes": "auto 1fr",
@@ -182,14 +197,14 @@ export const CreateVariantDrawer = ({
                 "$active": dimension === 'width',
                 onClick: () => setDimension('width'),
                 children: lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH'
+                  message: 'SMART.MEDIA_STORE.CREATE_CROP.WIDTH'
                 })
               }), _jsx(SegmentItem, {
                 type: "button",
                 "$active": dimension === 'height',
                 onClick: () => setDimension('height'),
                 children: lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT'
+                  message: 'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT'
                 })
               })]
             }), _jsx(NativeInput, {
@@ -216,7 +231,7 @@ export const CreateVariantDrawer = ({
         }), isJpeg && _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL'
             })
           }), _jsx(NativeInput, {
             type: "number",
@@ -228,7 +243,7 @@ export const CreateVariantDrawer = ({
           })]
         }), ratioExists && _jsx(Text, {
           children: lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS'
           })
         }), _jsx(Button, {
           color: "primary",
@@ -237,29 +252,53 @@ export const CreateVariantDrawer = ({
           isLoading: isCreating,
           onClick: () => void handleCreate(),
           children: lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON'
           })
         }), _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL'
             })
-          }), existingVariants.length === 0 ? _jsx(Text, {
+          }), existingCrops.length === 0 ? _jsx(Text, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS'
             })
-          }) : _jsx(VariantStrip, {
-            children: existingVariants.map(variant => _jsxs(VariantThumb, {
+          }) : _jsx(CropStrip, {
+            children: existingCrops.map(crop => _jsxs(CropThumb, {
               children: [_jsx(TileImage, {
-                src: getThumbUrl(variant),
-                alt: variant.filename
-              }), _jsx(VariantThumbCaption, {
-                children: getRatioLabel(variant) || variant.filename
+                src: getThumbUrl(crop),
+                alt: crop.filename
+              }), _jsx(CropThumbDelete, {
+                children: _jsx(Button, {
+                  color: "secondary",
+                  size: "compact",
+                  icon: _jsx(TrashIcon, {
+                    size: "small",
+                    view: "lined"
+                  }),
+                  "aria-label": lang({
+                    message: 'SMART.MEDIA_STORE.CREATE_CROP.DELETE_HINT'
+                  }),
+                  onClick: () => setPendingDeleteCrop(crop)
+                })
+              }), _jsx(CropThumbCaption, {
+                children: getRatioLabel(crop) || crop.filename
               })]
-            }, variant.uuid))
+            }, crop.uuid))
           })]
         })]
       })
+    }), _jsx(ModalConfirm, {
+      isOpen: pendingDeleteCrop !== null,
+      title: lang({
+        message: 'SMART.MEDIA_STORE.CREATE_CROP.DELETE_CONFIRM.TITLE'
+      }),
+      confirmButtonText: lang({
+        message: 'SMART.MEDIA_STORE.CREATE_CROP.DELETE_CONFIRM.BUTTON'
+      }),
+      confirmButtonColor: "danger",
+      onAccept: () => void handleDeleteCrop(),
+      onCancel: () => setPendingDeleteCrop(null)
     })]
   });
 };

package/MediaStore/MediaStore.d.ts

@@ -3,6 +3,6 @@ import type { MediaStoreProps } from './types';
 /**
  * Controlled media gallery: the parent owns the current page (and page size)
  * and is notified of navigation via `onPageChange`. For a self-contained
- * variant that keeps the page in internal state, use `MediaStorePaginated`.
+ * version that keeps the page in internal state, use `MediaStorePaginated`.
  */
 export declare const MediaStore: FC<MediaStoreProps>;

package/MediaStore/MediaStore.js

@@ -1,19 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, useToast } from '@pushwoosh/dumb-components';
+import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, useToast } from '@pushwoosh/dumb-components';
 import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
-import { CheckIcon, EditIcon, UploadIcon } from '@pushwoosh/kit-icons';
+import { CheckIcon, EditIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
-import { CreateVariantDrawer } from './CreateVariantDrawer';
-import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
+import { CreateCropDrawer } from './CreateCropDrawer';
+import { useDeleteMediaFile } from './hooks';
+import { formatBytes, getRatioLabel, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, VariantBadge } from './styled';
+import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, UsageLine } from './styled';
 const UPLOAD_PATH = '/api/media/upload';
 /**
  * Controlled media gallery: the parent owns the current page (and page size)
  * and is notified of navigation via `onPageChange`. For a self-contained
- * variant that keeps the page in internal state, use `MediaStorePaginated`.
+ * version that keeps the page in internal state, use `MediaStorePaginated`.
  */
 export const MediaStore = ({
   application,
@@ -34,18 +35,23 @@ export const MediaStore = ({
   const {
     openToast
   } = useToast();
+  const deleteMediaFile = useDeleteMediaFile(application);
   const uploadInputRef = useRef(null);
   // `uploadFiles` resolves asynchronously; read the latest page from the ref so
   // the post-upload decision isn't made on a value captured at click time.
   const pageRef = useRef(page);
   pageRef.current = page;
-  const [variantsByUuid, setVariantsByUuid] = useState({});
-  // Bumped to force a reload of the current page (e.g. after an upload) when
-  // the page prop itself does not change.
+  const [cropsByUuid, setCropsByUuid] = useState({});
+  // Bumped to force a reload of the current page when the originals list changes
+  // without the page prop changing (upload, delete of an original).
   const [reloadToken, setReloadToken] = useState(0);
+  // Bumped on changes that affect storage usage but not the originals list
+  // (crop create/delete), so the usage line refreshes without refetching files.
+  const [usageToken, setUsageToken] = useState(0);
   const [isUploading, setIsUploading] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
-  const [createVariantFor, setCreateVariantFor] = useState(null);
+  const [createCropFor, setCreateCropFor] = useState(null);
+  const [pendingDelete, setPendingDelete] = useState(null);
   const listAsync = useAsync(async () => {
     const response = await rpcGateway.mediaFiles.List({
       application,
@@ -58,11 +64,17 @@ export const MediaStore = ({
       total: response.total
     };
   }, [rpcGateway, application, page, perPage, reloadToken]);
+  const usageAsync = useAsync(() => rpcGateway.mediaFiles.GetUsage({
+    application
+  }), [rpcGateway, application, reloadToken, usageToken]);
   const {
     loading
   } = listAsync;
   const files = ((_listAsync$value = listAsync.value) === null || _listAsync$value === void 0 ? void 0 : _listAsync$value.files) ?? [];
   const total = ((_listAsync$value2 = listAsync.value) === null || _listAsync$value2 === void 0 ? void 0 : _listAsync$value2.total) ?? 0;
+  // Read inside the async delete handler to avoid a stale-closure decision.
+  const filesCountRef = useRef(files.length);
+  filesCountRef.current = files.length;
   useEffect(() => {
     if (listAsync.error) {
       openToast({
@@ -73,15 +85,15 @@ export const MediaStore = ({
       });
     }
   }, [listAsync.error, openToast, lang]);
-  // The List of originals carries no variant count, so once a page of originals
-  // resolves, fetch each one's variants in the background and let the
-  // "N variants" badge appear per file as soon as its request resolves. The
+  // The List of originals carries no crop count, so once a page of originals
+  // resolves, fetch each one's crops in the background and let the
+  // "N crops" badge appear per file as soon as its request resolves. The
   // cleanup flag drops results of a page that has since been replaced.
   useEffect(() => {
     var _listAsync$value3;
     const originals = (_listAsync$value3 = listAsync.value) === null || _listAsync$value3 === void 0 ? void 0 : _listAsync$value3.files;
     if (!originals) return undefined;
-    setVariantsByUuid({});
+    setCropsByUuid({});
     let cancelled = false;
     originals.forEach(file => {
       void (async () => {
@@ -91,7 +103,7 @@ export const MediaStore = ({
             parentUuid: file.uuid
           });
           if (cancelled) return;
-          setVariantsByUuid(prev => ({
+          setCropsByUuid(prev => ({
             ...prev,
             [file.uuid]: response.files ?? []
           }));
@@ -129,13 +141,13 @@ export const MediaStore = ({
           }),
           type: 'success'
         });
-        // Jump back to the first page to surface the freshly uploaded files. If
-        // already there, the prop won't change, so bump the reload token too.
-        if (pageRef.current === 0) {
-          setReloadToken(token => token + 1);
-        } else {
+        // Surface the freshly uploaded files on the first page. Bump the reload
+        // token unconditionally (refetches page 0 / refreshes usage); also
+        // navigate when we're not already there.
+        if (pageRef.current !== 0) {
           onPageChange(0);
         }
+        setReloadToken(token => token + 1);
       }
       if (failed > 0) {
         openToast({
@@ -152,15 +164,42 @@ export const MediaStore = ({
       setIsUploading(false);
     }
   };
-  const handleVariantCreated = (parentUuid, variant) => {
-    setVariantsByUuid(prev => ({
+  const handleCropCreated = (parentUuid, crop) => {
+    setCropsByUuid(prev => ({
       ...prev,
-      [parentUuid]: [...(prev[parentUuid] ?? []), variant]
+      [parentUuid]: [...(prev[parentUuid] ?? []), crop]
     }));
+    setUsageToken(token => token + 1);
+  };
+  const handleCropDeleted = (parentUuid, cropUuid) => {
+    setCropsByUuid(prev => ({
+      ...prev,
+      [parentUuid]: (prev[parentUuid] ?? []).filter(crop => crop.uuid !== cropUuid)
+    }));
+    setUsageToken(token => token + 1);
+  };
+  const handleDeleteConfirmed = async () => {
+    const file = pendingDelete;
+    setPendingDelete(null);
+    if (!file) return;
+    if (!(await deleteMediaFile(file.uuid))) return;
+    // Deleting an original drops its crops too. If it was the last item on a
+    // non-first page, step back so we don't land on an empty page; the page
+    // change refetches the list. Otherwise refetch the current page.
+    if (filesCountRef.current === 1 && pageRef.current > 0) {
+      onPageChange(pageRef.current - 1);
+    }
+    setReloadToken(token => token + 1);
   };
   const totalPages = Math.ceil(total / perPage);
   return _jsxs(_Fragment, {
-    children: [_jsxs(Dropzone, {
+    children: [usageAsync.value && _jsx(UsageLine, {
+      children: lang({
+        message: 'SMART.MEDIA_STORE.USAGE',
+        count: usageAsync.value.totalCount,
+        size: formatBytes(usageAsync.value.totalSize)
+      })
+    }), _jsxs(Dropzone, {
       type: "button",
       "$dragOver": isDragOver,
       disabled: isUploading,
@@ -203,18 +242,18 @@ export const MediaStore = ({
     }), !loading && files.length > 0 && _jsxs(_Fragment, {
       children: [_jsx(Grid, {
         children: files.map(file => {
-          const variants = variantsByUuid[file.uuid] ?? [];
+          const crops = cropsByUuid[file.uuid] ?? [];
           return _jsxs(Tile, {
             children: [_jsx(TileImage, {
               src: getThumbUrl(file),
               alt: file.filename
-            }), variants.length > 0 && _jsx(VariantBadge, {
+            }), crops.length > 0 && _jsx(CropBadge, {
               children: lang({
-                message: 'SMART.MEDIA_STORE.VARIANTS_BADGE',
-                count: variants.length
+                message: 'SMART.MEDIA_STORE.CROPS_BADGE',
+                count: crops.length
               })
             }), _jsxs(TileActions, {
-              children: [variants.length > 0 ? _jsx(DropdownMenuButton, {
+              children: [crops.length > 0 ? _jsx(DropdownMenuButton, {
                 color: "secondary",
                 size: "compact",
                 icon: _jsx(CheckIcon, {
@@ -227,10 +266,10 @@ export const MediaStore = ({
                     children: lang({
                       message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
                     })
-                  }), variants.map(variant => _jsx(DropdownMenuItem, {
-                    onClick: () => onSelect(variant.url),
-                    children: getRatioLabel(variant) || variant.filename
-                  }, variant.uuid))]
+                  }), crops.map(crop => _jsx(DropdownMenuItem, {
+                    onClick: () => onSelect(crop.url),
+                    children: getRatioLabel(crop) || crop.filename
+                  }, crop.uuid))]
                 })
               }) : _jsx(Button, {
                 color: "secondary",
@@ -250,9 +289,20 @@ export const MediaStore = ({
                   view: "lined"
                 }),
                 "aria-label": lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT_HINT'
+                  message: 'SMART.MEDIA_STORE.CREATE_CROP_HINT'
+                }),
+                onClick: () => setCreateCropFor(file)
+              }), _jsx(Button, {
+                color: "secondary",
+                size: "compact",
+                icon: _jsx(TrashIcon, {
+                  size: "small",
+                  view: "lined"
+                }),
+                "aria-label": lang({
+                  message: 'SMART.MEDIA_STORE.DELETE_HINT'
                 }),
-                onClick: () => setCreateVariantFor(file)
+                onClick: () => setPendingDelete(file)
               })]
             })]
           }, file.uuid);
@@ -286,13 +336,28 @@ export const MediaStore = ({
           })
         })]
       })]
-    }), _jsx(CreateVariantDrawer, {
+    }), _jsx(CreateCropDrawer, {
       application: application,
-      original: createVariantFor,
-      isOpen: createVariantFor !== null,
-      existingVariants: createVariantFor ? variantsByUuid[createVariantFor.uuid] ?? [] : [],
-      onClose: () => setCreateVariantFor(null),
-      onCreated: handleVariantCreated
+      original: createCropFor,
+      isOpen: createCropFor !== null,
+      existingCrops: createCropFor ? cropsByUuid[createCropFor.uuid] ?? [] : [],
+      onClose: () => setCreateCropFor(null),
+      onCreated: handleCropCreated,
+      onDeleted: handleCropDeleted
+    }), _jsx(ModalConfirm, {
+      isOpen: pendingDelete !== null,
+      title: lang({
+        message: 'SMART.MEDIA_STORE.DELETE_CONFIRM.TITLE'
+      }),
+      description: lang({
+        message: 'SMART.MEDIA_STORE.DELETE_CONFIRM.DESCRIPTION'
+      }),
+      confirmButtonText: lang({
+        message: 'SMART.MEDIA_STORE.DELETE_CONFIRM.BUTTON'
+      }),
+      confirmButtonColor: "danger",
+      onAccept: () => void handleDeleteConfirmed(),
+      onCancel: () => setPendingDelete(null)
     })]
   });
 };

package/MediaStore/hooks.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Returns a function that deletes a media file (original or crop) and shows the
+ * success/error toast. Resolves to `true` on success so the caller can run its
+ * own post-delete routing (refetch, state update, pagination), `false` on
+ * failure. Both `MediaStore` and `CreateCropDrawer` share this.
+ */
+export declare function useDeleteMediaFile(application: string): (uuid: string) => Promise<boolean>;

package/MediaStore/hooks.js

@@ -0,0 +1,42 @@
+import { useToast } from '@pushwoosh/dumb-components';
+import { usePersistentFunction } from '@pushwoosh/kit-helpers';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import { useLang } from './polyglot';
+/**
+ * Returns a function that deletes a media file (original or crop) and shows the
+ * success/error toast. Resolves to `true` on success so the caller can run its
+ * own post-delete routing (refetch, state update, pagination), `false` on
+ * failure. Both `MediaStore` and `CreateCropDrawer` share this.
+ */
+export function useDeleteMediaFile(application) {
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const {
+    openToast
+  } = useToast();
+  const lang = useLang();
+  return usePersistentFunction(async uuid => {
+    try {
+      await rpcGateway.mediaFiles.Delete({
+        application,
+        uuid
+      });
+      openToast({
+        title: lang({
+          message: 'SMART.MEDIA_STORE.DELETE_SUCCESS'
+        }),
+        type: 'success'
+      });
+      return true;
+    } catch (error) {
+      openToast({
+        title: error.message || lang({
+          message: 'SMART.MEDIA_STORE.DELETE_ERROR'
+        }),
+        type: 'error'
+      });
+      return false;
+    }
+  });
+}

package/MediaStore/mediaFile.utils.d.ts

@@ -1,5 +1,7 @@
 import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
 /** Thumbnail URL from image meta, falling back to the full-size URL. */
 export declare const getThumbUrl: (file: MediaFile) => string;
-/** Aspect-ratio label (e.g. "16:9") for a variant; empty for originals. */
+/** Aspect-ratio label (e.g. "16:9") for a crop; empty for originals. */
 export declare const getRatioLabel: (file: MediaFile) => string;
+/** Human-readable byte size, e.g. 4404019 -> "4.2 MB". */
+export declare const formatBytes: (bytes: number) => string;

package/MediaStore/mediaFile.utils.js

@@ -3,8 +3,19 @@ export const getThumbUrl = file => {
   var _file$meta;
   return ((_file$meta = file.meta) === null || _file$meta === void 0 ? void 0 : _file$meta.type) === 'imageMeta' ? file.meta.data.thumbnailUrl : file.url;
 };
-/** Aspect-ratio label (e.g. "16:9") for a variant; empty for originals. */
+/** Aspect-ratio label (e.g. "16:9") for a crop; empty for originals. */
 export const getRatioLabel = file => {
   var _file$meta2;
   return ((_file$meta2 = file.meta) === null || _file$meta2 === void 0 ? void 0 : _file$meta2.type) === 'imageMeta' ? file.meta.data.ratio : '';
+};
+const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
+/** Human-readable byte size, e.g. 4404019 -> "4.2 MB". */
+export const formatBytes = bytes => {
+  if (bytes === 0) return '0 B';
+  if (!Number.isFinite(bytes) || bytes < 0) return '—';
+  const exp = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), BYTE_UNITS.length - 1);
+  const value = bytes / 1024 ** exp;
+  // Whole numbers for bytes and for values >= 100; one decimal otherwise.
+  const rounded = exp === 0 || value >= 100 ? Math.round(value) : Math.round(value * 10) / 10;
+  return `${rounded} ${BYTE_UNITS[exp]}`;
 };

package/MediaStore/polyglot/messages_en.js

@@ -9,20 +9,30 @@ export const messages = {
   'SMART.MEDIA_STORE.LOAD_ERROR': 'Failed to load media files',
   'SMART.MEDIA_STORE.UPLOAD_ERROR': 'Failed to upload image',
   'SMART.MEDIA_STORE.UPLOAD_SUCCESS': 'Image uploaded',
-  'SMART.MEDIA_STORE.VARIANTS_BADGE': '{{count}} var.',
+  'SMART.MEDIA_STORE.USAGE': '{{count}} files · {{size}}',
+  'SMART.MEDIA_STORE.CROPS_BADGE': '{{count}} cr.',
   'SMART.MEDIA_STORE.SELECT_ORIGINAL': 'Original',
-  'SMART.MEDIA_STORE.CREATE_VARIANT_HINT': 'Create variants',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE': 'Create variant',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE': 'Close',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL': 'Aspect ratio',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL': 'Size',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH': 'Width',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT': 'Height',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL': 'JPEG quality (1–100)',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON': 'Create variant',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS': 'A variant with this aspect ratio already exists',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL': 'Existing variants',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS': 'No variants yet',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS': 'Variant created',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR': 'Failed to create variant'
+  'SMART.MEDIA_STORE.CREATE_CROP_HINT': 'Create crops',
+  'SMART.MEDIA_STORE.DELETE_HINT': 'Delete',
+  'SMART.MEDIA_STORE.DELETE_SUCCESS': 'Deleted',
+  'SMART.MEDIA_STORE.DELETE_ERROR': 'Failed to delete',
+  'SMART.MEDIA_STORE.DELETE_CONFIRM.TITLE': 'Delete this file?',
+  'SMART.MEDIA_STORE.DELETE_CONFIRM.DESCRIPTION': 'Deleting the original also removes all of its crops. This can’t be undone.',
+  'SMART.MEDIA_STORE.DELETE_CONFIRM.BUTTON': 'Delete',
+  'SMART.MEDIA_STORE.CREATE_CROP.TITLE': 'Create crop',
+  'SMART.MEDIA_STORE.CREATE_CROP.CLOSE': 'Close',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL': 'Aspect ratio',
+  'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL': 'Size',
+  'SMART.MEDIA_STORE.CREATE_CROP.WIDTH': 'Width',
+  'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT': 'Height',
+  'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL': 'JPEG quality (1–100)',
+  'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON': 'Create crop',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS': 'A crop with this aspect ratio already exists',
+  'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL': 'Existing crops',
+  'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS': 'No crops yet',
+  'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS': 'Crop created',
+  'SMART.MEDIA_STORE.CREATE_CROP.ERROR': 'Failed to create crop',
+  'SMART.MEDIA_STORE.CREATE_CROP.DELETE_HINT': 'Delete crop',
+  'SMART.MEDIA_STORE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Delete this crop?',
+  'SMART.MEDIA_STORE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Delete'
 };

package/MediaStore/polyglot/messages_ru.js

@@ -9,20 +9,30 @@ export const messages = {
   'SMART.MEDIA_STORE.LOAD_ERROR': 'Не удалось загрузить медиафайлы',
   'SMART.MEDIA_STORE.UPLOAD_ERROR': 'Не удалось загрузить изображение',
   'SMART.MEDIA_STORE.UPLOAD_SUCCESS': 'Изображение загружено',
-  'SMART.MEDIA_STORE.VARIANTS_BADGE': '{{count}} вар.',
+  'SMART.MEDIA_STORE.USAGE': '{{count}} файлов · {{size}}',
+  'SMART.MEDIA_STORE.CROPS_BADGE': '{{count}} кр.',
   'SMART.MEDIA_STORE.SELECT_ORIGINAL': 'Оригинал',
-  'SMART.MEDIA_STORE.CREATE_VARIANT_HINT': 'Создать варианты',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE': 'Создание варианта',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE': 'Закрыть',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL': 'Соотношение сторон',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL': 'Размер',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH': 'Ширина',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT': 'Высота',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL': 'Качество JPEG (1–100)',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON': 'Создать вариант',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS': 'Вариант с таким соотношением сторон уже существует',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL': 'Созданные варианты',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS': 'Вариантов пока нет',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS': 'Вариант создан',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR': 'Не удалось создать вариант'
+  'SMART.MEDIA_STORE.CREATE_CROP_HINT': 'Создать кропы',
+  'SMART.MEDIA_STORE.DELETE_HINT': 'Удалить',
+  'SMART.MEDIA_STORE.DELETE_SUCCESS': 'Удалено',
+  'SMART.MEDIA_STORE.DELETE_ERROR': 'Не удалось удалить',
+  'SMART.MEDIA_STORE.DELETE_CONFIRM.TITLE': 'Удалить файл?',
+  'SMART.MEDIA_STORE.DELETE_CONFIRM.DESCRIPTION': 'Удаление оригинала также удалит все его кропы. Действие необратимо.',
+  'SMART.MEDIA_STORE.DELETE_CONFIRM.BUTTON': 'Удалить',
+  'SMART.MEDIA_STORE.CREATE_CROP.TITLE': 'Создание кропа',
+  'SMART.MEDIA_STORE.CREATE_CROP.CLOSE': 'Закрыть',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL': 'Соотношение сторон',
+  'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL': 'Размер',
+  'SMART.MEDIA_STORE.CREATE_CROP.WIDTH': 'Ширина',
+  'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT': 'Высота',
+  'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL': 'Качество JPEG (1–100)',
+  'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON': 'Создать кроп',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS': 'Кроп с таким соотношением сторон уже существует',
+  'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL': 'Созданные кропы',
+  'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS': 'Кропов пока нет',
+  'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS': 'Кроп создан',
+  'SMART.MEDIA_STORE.CREATE_CROP.ERROR': 'Не удалось создать кроп',
+  'SMART.MEDIA_STORE.CREATE_CROP.DELETE_HINT': 'Удалить кроп',
+  'SMART.MEDIA_STORE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Удалить кроп?',
+  'SMART.MEDIA_STORE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Удалить'
 };

package/MediaStore/polyglot/types.d.ts

@@ -10,22 +10,35 @@ export type MediaStoreMessages = {
     'SMART.MEDIA_STORE.LOAD_ERROR': NoParams;
     'SMART.MEDIA_STORE.UPLOAD_ERROR': NoParams;
     'SMART.MEDIA_STORE.UPLOAD_SUCCESS': NoParams;
-    'SMART.MEDIA_STORE.VARIANTS_BADGE': {
+    'SMART.MEDIA_STORE.USAGE': {
+        count: number;
+        size: string;
+    };
+    'SMART.MEDIA_STORE.CROPS_BADGE': {
         count: number;
     };
     'SMART.MEDIA_STORE.SELECT_ORIGINAL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT_HINT': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS': NoParams;
-    'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP_HINT': NoParams;
+    'SMART.MEDIA_STORE.DELETE_HINT': NoParams;
+    'SMART.MEDIA_STORE.DELETE_SUCCESS': NoParams;
+    'SMART.MEDIA_STORE.DELETE_ERROR': NoParams;
+    'SMART.MEDIA_STORE.DELETE_CONFIRM.TITLE': NoParams;
+    'SMART.MEDIA_STORE.DELETE_CONFIRM.DESCRIPTION': NoParams;
+    'SMART.MEDIA_STORE.DELETE_CONFIRM.BUTTON': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.TITLE': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.CLOSE': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.WIDTH': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.ERROR': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.DELETE_HINT': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.DELETE_CONFIRM.TITLE': NoParams;
+    'SMART.MEDIA_STORE.CREATE_CROP.DELETE_CONFIRM.BUTTON': NoParams;
 };

package/MediaStore/styled.d.ts

@@ -1,13 +1,14 @@
 export declare const Grid: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Tile: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const TileImage: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const VariantBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const CropBadge: import("styled-components").StyledComponent<"span", any, {}, never>;
 export declare const TileActions: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const EmptyState: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Dropzone: import("styled-components").StyledComponent<"button", any, {
     $dragOver?: boolean;
 }, never>;
 export declare const HiddenInput: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const UsageLine: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PreviewStage: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const PreviewFrame: import("styled-components").StyledComponent<"div", any, {
     $ratio: number;
@@ -22,6 +23,7 @@ export declare const Segment: import("styled-components").StyledComponent<"div",
 export declare const SegmentItem: import("styled-components").StyledComponent<"button", any, {
     $active?: boolean;
 }, never>;
-export declare const VariantStrip: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VariantThumb: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const VariantThumbCaption: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CropStrip: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CropThumb: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CropThumbDelete: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CropThumbCaption: import("styled-components").StyledComponent<"div", any, {}, never>;

package/MediaStore/styled.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Color, FontWeight } from '@pushwoosh/kit-constants';
+import { Color, FontSize, FontWeight } from '@pushwoosh/kit-constants';
 export const Grid = styled.div.withConfig({
   displayName: "Grid",
   componentId: "sc-1d9kmgw-0"
@@ -12,8 +12,8 @@ export const TileImage = styled.img.withConfig({
   displayName: "TileImage",
   componentId: "sc-1d9kmgw-2"
 })(["width:100%;aspect-ratio:1;object-fit:cover;display:block;"]);
-export const VariantBadge = styled.span.withConfig({
-  displayName: "VariantBadge",
+export const CropBadge = styled.span.withConfig({
+  displayName: "CropBadge",
   componentId: "sc-1d9kmgw-3"
 })(["position:absolute;top:6px;right:6px;font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;pointer-events:none;"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
 export const TileActions = styled.div.withConfig({
@@ -36,32 +36,36 @@ export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
   componentId: "sc-1d9kmgw-7"
 })(["display:none;"]);
-/* ---------- CreateVariantDrawer ---------- */
+export const UsageLine = styled.div.withConfig({
+  displayName: "UsageLine",
+  componentId: "sc-1d9kmgw-8"
+})(["margin-bottom:8px;text-align:right;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
+/* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
-  componentId: "sc-1d9kmgw-8"
+  componentId: "sc-1d9kmgw-9"
 })(["display:flex;align-items:center;justify-content:center;min-height:200px;max-height:360px;padding:12px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
 export const PreviewFrame = styled.div.withConfig({
   displayName: "PreviewFrame",
-  componentId: "sc-1d9kmgw-9"
+  componentId: "sc-1d9kmgw-10"
 })(["aspect-ratio:", ";max-width:100%;max-height:336px;overflow:hidden;border-radius:4px;"], ({
   $ratio
 }) => $ratio);
 export const PreviewImage = styled.img.withConfig({
   displayName: "PreviewImage",
-  componentId: "sc-1d9kmgw-10"
+  componentId: "sc-1d9kmgw-11"
 })(["width:100%;height:100%;object-fit:cover;display:block;"]);
 export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
-  componentId: "sc-1d9kmgw-11"
+  componentId: "sc-1d9kmgw-12"
 })(["font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:", ";margin-bottom:6px;"], Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-1d9kmgw-12"
+  componentId: "sc-1d9kmgw-13"
 })(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Chip = styled.button.withConfig({
   displayName: "Chip",
-  componentId: "sc-1d9kmgw-13"
+  componentId: "sc-1d9kmgw-14"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:6px 12px;border-radius:20px;border:1px solid ", ";background:", ";color:", ";transition:background 0.12s,border-color 0.12s;"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.DIVIDER, ({
@@ -71,25 +75,29 @@ export const Chip = styled.button.withConfig({
 }) => $active ? Color.CLEAR : Color.MAIN);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
-  componentId: "sc-1d9kmgw-14"
+  componentId: "sc-1d9kmgw-15"
 })(["display:inline-flex;border:1px solid ", ";border-radius:6px;overflow:hidden;"], Color.DIVIDER);
 export const SegmentItem = styled.button.withConfig({
   displayName: "SegmentItem",
-  componentId: "sc-1d9kmgw-15"
+  componentId: "sc-1d9kmgw-16"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border:none;background:", ";color:", ";& + &{border-left:1px solid ", ";}"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
   $active
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
-export const VariantStrip = styled.div.withConfig({
-  displayName: "VariantStrip",
-  componentId: "sc-1d9kmgw-16"
-})(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
-export const VariantThumb = styled.div.withConfig({
-  displayName: "VariantThumb",
+export const CropStrip = styled.div.withConfig({
+  displayName: "CropStrip",
   componentId: "sc-1d9kmgw-17"
-})(["width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
-export const VariantThumbCaption = styled.div.withConfig({
-  displayName: "VariantThumbCaption",
+})(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
+export const CropThumb = styled.div.withConfig({
+  displayName: "CropThumb",
   componentId: "sc-1d9kmgw-18"
+})(["position:relative;width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
+export const CropThumbDelete = styled.div.withConfig({
+  displayName: "CropThumbDelete",
+  componentId: "sc-1d9kmgw-19"
+})(["position:absolute;top:4px;right:4px;opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], CropThumb);
+export const CropThumbCaption = styled.div.withConfig({
+  displayName: "CropThumbCaption",
+  componentId: "sc-1d9kmgw-20"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);

package/MediaStore/types.d.ts

@@ -7,7 +7,7 @@ export type MediaStoreProps = {
     perPage: number;
     /** Called when the user requests a different page. */
     onPageChange: (page: number) => void;
-    /** Called with the chosen file URL (original or variant). */
+    /** Called with the chosen file URL (original or crop). */
     onSelect: (url: string) => void;
 };
 export type MediaStorePaginatedProps = {
@@ -17,6 +17,6 @@ export type MediaStorePaginatedProps = {
     initialPage?: number;
     /** Page size. Defaults to 30. */
     perPage?: number;
-    /** Called with the chosen file URL (original or variant). */
+    /** Called with the chosen file URL (original or crop). */
     onSelect: (url: string) => void;
 };

package/package.json

@@ -26,7 +26,7 @@
     "@pushwoosh/kit-helpers": "^4.9.1",
     "@pushwoosh/kit-icons": "^2.1.6",
     "@pushwoosh/kit-typography": "^1.7.3",
-    "@pushwoosh/rpc-v2-http-api-data": "^0.1.974",
+    "@pushwoosh/rpc-v2-http-api-data": "^0.1.980",
     "@pushwoosh/spa-context": "^1.1.2",
     "idb-keyval": "^6.2.2",
     "react-hook-form": "^7.68.0",
@@ -49,5 +49,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.1.1"
+  "version": "1.1.3"
 }

package/MediaStore/CreateVariantDrawer.d.ts

@@ -1,12 +0,0 @@
-import { type FC } from 'react';
-import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
-type CreateVariantDrawerProps = {
-    application: string;
-    original: MediaFile | null;
-    isOpen: boolean;
-    existingVariants: MediaFile[];
-    onClose: () => void;
-    onCreated: (parentUuid: string, variant: MediaFile) => void;
-};
-export declare const CreateVariantDrawer: FC<CreateVariantDrawerProps>;
-export {};