@pushwoosh/smart-components-kit 1.1.2 → 1.1.4

package/MediaStore/CreateCropDrawer.d.ts

@@ -7,6 +7,7 @@ type CreateCropDrawerProps = {
     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/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, CropStrip, CropThumb, CropThumbCaption, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, TileImage } 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',
@@ -54,7 +55,8 @@ export const CreateCropDrawer = ({
   isOpen,
   existingCrops,
   onClose,
-  onCreated
+  onCreated,
+  onDeleted
 }) => {
   const lang = useLang();
   const {
@@ -63,11 +65,13 @@ export const CreateCropDrawer = ({
   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.
@@ -128,6 +132,17 @@ export const CreateCropDrawer = ({
       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,
@@ -253,6 +268,19 @@ export const CreateCropDrawer = ({
               children: [_jsx(TileImage, {
                 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
               })]
@@ -260,6 +288,17 @@ export const CreateCropDrawer = ({
           })]
         })]
       })
+    }), _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.js

@@ -1,14 +1,15 @@
 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 { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
-import { CheckIcon, EditIcon, UploadIcon } from '@pushwoosh/kit-icons';
+import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, useToast } from '@pushwoosh/dumb-components';
+import { FlexContainer, useAsync } from '@pushwoosh/kit-helpers';
+import { CheckIcon, EditIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { CreateCropDrawer } from './CreateCropDrawer';
-import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
+import { useDeleteMediaFile } from './hooks';
+import { formatBytes, getRatioLabel, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage } 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)
@@ -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 [cropsByUuid, setCropsByUuid] = useState({});
-  // Bumped to force a reload of the current page (e.g. after an upload) when
-  // the page prop itself does not change.
+  // 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 [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({
@@ -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({
@@ -157,8 +169,30 @@ export const MediaStore = ({
       ...prev,
       [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);
+  const showPagination = !loading && files.length > 0 && totalPages > 1;
   return _jsxs(_Fragment, {
     children: [_jsxs(Dropzone, {
       type: "button",
@@ -200,70 +234,81 @@ export const MediaStore = ({
       children: lang({
         message: 'SMART.MEDIA_STORE.EMPTY'
       })
-    }), !loading && files.length > 0 && _jsxs(_Fragment, {
-      children: [_jsx(Grid, {
-        children: files.map(file => {
-          const crops = cropsByUuid[file.uuid] ?? [];
-          return _jsxs(Tile, {
-            children: [_jsx(TileImage, {
-              src: getThumbUrl(file),
-              alt: file.filename
-            }), crops.length > 0 && _jsx(CropBadge, {
-              children: lang({
-                message: 'SMART.MEDIA_STORE.CROPS_BADGE',
-                count: crops.length
+    }), !loading && files.length > 0 && _jsx(Grid, {
+      children: files.map(file => {
+        const crops = cropsByUuid[file.uuid] ?? [];
+        return _jsxs(Tile, {
+          children: [_jsx(TileImage, {
+            src: getThumbUrl(file),
+            alt: file.filename
+          }), crops.length > 0 && _jsx(CropBadge, {
+            children: lang({
+              message: 'SMART.MEDIA_STORE.CROPS_BADGE',
+              count: crops.length
+            })
+          }), _jsxs(TileActions, {
+            children: [crops.length > 0 ? _jsx(DropdownMenuButton, {
+              color: "secondary",
+              size: "compact",
+              icon: _jsx(CheckIcon, {
+                size: "small"
+              }),
+              menuPlacement: "bottom-start",
+              children: _jsxs(DropdownMenuSection, {
+                children: [_jsx(DropdownMenuItem, {
+                  onClick: () => onSelect(file.url),
+                  children: lang({
+                    message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
+                  })
+                }), crops.map(crop => _jsx(DropdownMenuItem, {
+                  onClick: () => onSelect(crop.url),
+                  children: getRatioLabel(crop) || crop.filename
+                }, crop.uuid))]
               })
-            }), _jsxs(TileActions, {
-              children: [crops.length > 0 ? _jsx(DropdownMenuButton, {
-                color: "secondary",
-                size: "compact",
-                icon: _jsx(CheckIcon, {
-                  size: "small"
-                }),
-                menuPlacement: "bottom-start",
-                children: _jsxs(DropdownMenuSection, {
-                  children: [_jsx(DropdownMenuItem, {
-                    onClick: () => onSelect(file.url),
-                    children: lang({
-                      message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
-                    })
-                  }), crops.map(crop => _jsx(DropdownMenuItem, {
-                    onClick: () => onSelect(crop.url),
-                    children: getRatioLabel(crop) || crop.filename
-                  }, crop.uuid))]
-                })
-              }) : _jsx(Button, {
-                color: "secondary",
-                size: "compact",
-                icon: _jsx(CheckIcon, {
-                  size: "small"
-                }),
-                "aria-label": lang({
-                  message: 'SMART.MEDIA_STORE.SELECT_HINT'
-                }),
-                onClick: () => onSelect(file.url)
-              }), _jsx(Button, {
-                color: "secondary",
-                size: "compact",
-                icon: _jsx(EditIcon, {
-                  size: "small",
-                  view: "lined"
-                }),
-                "aria-label": lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_CROP_HINT'
-                }),
-                onClick: () => setCreateCropFor(file)
-              })]
+            }) : _jsx(Button, {
+              color: "secondary",
+              size: "compact",
+              icon: _jsx(CheckIcon, {
+                size: "small"
+              }),
+              "aria-label": lang({
+                message: 'SMART.MEDIA_STORE.SELECT_HINT'
+              }),
+              onClick: () => onSelect(file.url)
+            }), _jsx(Button, {
+              color: "secondary",
+              size: "compact",
+              icon: _jsx(EditIcon, {
+                size: "small",
+                view: "lined"
+              }),
+              "aria-label": lang({
+                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: () => setPendingDelete(file)
             })]
-          }, file.uuid);
-        })
-      }), totalPages > 1 && _jsxs(Horizontal, {
-        "$justifyContent": "center",
+          })]
+        }, file.uuid);
+      })
+    }), (showPagination || usageAsync.value) && _jsxs(FlexContainer, {
+      "$alignItems": "center",
+      "$margin": {
+        top: 16
+      },
+      children: [showPagination && _jsxs(FlexContainer, {
         "$alignItems": "center",
         "$gap": 8,
-        "$margin": {
-          top: 16
-        },
         children: [_jsx(Button, {
           view: "ghost",
           color: "secondary",
@@ -285,6 +330,12 @@ export const MediaStore = ({
             message: 'SMART.MEDIA_STORE.NEXT_BUTTON'
           })
         })]
+      }), usageAsync.value && _jsx(UsageLine, {
+        children: lang({
+          message: 'SMART.MEDIA_STORE.USAGE',
+          count: usageAsync.value.totalCount,
+          size: formatBytes(usageAsync.value.totalSize)
+        })
       })]
     }), _jsx(CreateCropDrawer, {
       application: application,
@@ -292,7 +343,22 @@ export const MediaStore = ({
       isOpen: createCropFor !== null,
       existingCrops: createCropFor ? cropsByUuid[createCropFor.uuid] ?? [] : [],
       onClose: () => setCreateCropFor(null),
-      onCreated: handleCropCreated
+      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

@@ -3,3 +3,5 @@ import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
 export declare const getThumbUrl: (file: MediaFile) => string;
 /** 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

@@ -7,4 +7,15 @@ export const getThumbUrl = file => {
 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,9 +9,16 @@ 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.USAGE': '{{count}} files · {{size}}',
   'SMART.MEDIA_STORE.CROPS_BADGE': '{{count}} cr.',
   'SMART.MEDIA_STORE.SELECT_ORIGINAL': 'Original',
   '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',
@@ -24,5 +31,8 @@ export const messages = {
   '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.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,9 +9,16 @@ export const messages = {
   'SMART.MEDIA_STORE.LOAD_ERROR': 'Не удалось загрузить медиафайлы',
   'SMART.MEDIA_STORE.UPLOAD_ERROR': 'Не удалось загрузить изображение',
   'SMART.MEDIA_STORE.UPLOAD_SUCCESS': 'Изображение загружено',
+  'SMART.MEDIA_STORE.USAGE': '{{count}} файлов · {{size}}',
   'SMART.MEDIA_STORE.CROPS_BADGE': '{{count}} кр.',
   'SMART.MEDIA_STORE.SELECT_ORIGINAL': 'Оригинал',
   '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': 'Соотношение сторон',
@@ -24,5 +31,8 @@ export const messages = {
   '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.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,11 +10,21 @@ export type MediaStoreMessages = {
     'SMART.MEDIA_STORE.LOAD_ERROR': NoParams;
     'SMART.MEDIA_STORE.UPLOAD_ERROR': NoParams;
     'SMART.MEDIA_STORE.UPLOAD_SUCCESS': NoParams;
+    '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_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;
@@ -28,4 +38,7 @@ export type MediaStoreMessages = {
     '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

@@ -8,6 +8,7 @@ export declare const Dropzone: import("styled-components").StyledComponent<"butt
     $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;
@@ -24,4 +25,5 @@ export declare const SegmentItem: import("styled-components").StyledComponent<"b
 }, 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"
@@ -36,32 +36,36 @@ export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
   componentId: "sc-1d9kmgw-7"
 })(["display:none;"]);
+export const UsageLine = styled.div.withConfig({
+  displayName: "UsageLine",
+  componentId: "sc-1d9kmgw-8"
+})(["margin-left:auto;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,11 +75,11 @@ 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, ({
@@ -83,13 +87,17 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
 export const CropStrip = styled.div.withConfig({
   displayName: "CropStrip",
-  componentId: "sc-1d9kmgw-16"
+  componentId: "sc-1d9kmgw-17"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
 export const CropThumb = styled.div.withConfig({
   displayName: "CropThumb",
-  componentId: "sc-1d9kmgw-17"
-})(["width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
+  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-18"
+  componentId: "sc-1d9kmgw-20"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);

package/package.json

@@ -23,10 +23,10 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@pushwoosh/dumb-components": "^1.1.134",
     "@pushwoosh/kit-constants": "^1.6.9",
-    "@pushwoosh/kit-helpers": "^4.9.1",
+    "@pushwoosh/kit-helpers": "^4.11.0",
     "@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.2"
+  "version": "1.1.4"
 }