@pushwoosh/smart-components-kit 1.18.0 → 1.20.0

package/MediaStorage/CreateCropDrawer.js

@@ -6,9 +6,9 @@ import { CloseIcon, TrashIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { useDeleteMediaFile } from './hooks';
-import { getCropCaption, getThumbUrl } from './mediaFile.utils';
+import { getAspectRatio, getCropCaption, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Chips, CropStrip, CropThumb, CropThumbCaption, CropThumbDelete, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, SizeInput, TileImage } from './styles';
+import { Chips, CropStrip, CropThumb, CropThumbButton, CropThumbCaption, CropThumbDelete, CropThumbImage, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, SizeInput } from './styles';
 const RATIOS = [{
   value: 'ASPECT_RATIO_1_1',
   label: '1:1',
@@ -79,6 +79,7 @@ export const CreateCropDrawer = ({
   const [quality, setQuality] = useState(DEFAULT_QUALITY);
   const [isCreating, setIsCreating] = useState(false);
   const [pendingDeleteCrop, setPendingDeleteCrop] = useState(null);
+  const [viewedCrop, setViewedCrop] = 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.
@@ -88,6 +89,7 @@ export const CreateCropDrawer = ({
       setDimension('width');
       setSize(DEFAULT_SIZE);
       setQuality(DEFAULT_QUALITY);
+      setViewedCrop(null);
     }
   }, [original]);
   const isJpeg = /jpe?g/i.test(original?.mimeType ?? '');
@@ -96,8 +98,17 @@ export const CreateCropDrawer = ({
   const qualityValue = Number(quality);
   const isQualityValid = !isJpeg || Number.isFinite(qualityValue) && qualityValue >= 1 && qualityValue <= 100;
   const isOriginalView = ratio === 'original';
+  const isOriginalShown = isOriginalView && !viewedCrop;
   const originalMeta = original?.meta?.type === 'imageMeta' ? original.meta.data : null;
-  const originalRatio = originalMeta && originalMeta.height > 0 ? originalMeta.width / originalMeta.height : 1;
+  const previewFile = viewedCrop ?? original;
+  const chooseRatio = next => {
+    setRatio(next);
+    setViewedCrop(null);
+  };
+  const viewCrop = crop => {
+    setRatio('original');
+    setViewedCrop(crop);
+  };
   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);
@@ -144,10 +155,8 @@ export const CreateCropDrawer = ({
         type: 'success'
       });
       onCreated(parent.uuid, response.file);
-      // Back to the view-only default: the form's ratio+size now match the
-      // crop that was just created, so leaving it would flash the
-      // "duplicate exists" note right after a successful create.
-      setRatio('original');
+      // Show the stored result instead of the form, whose ratio+size now duplicate it.
+      viewCrop(response.file);
     } catch (error) {
       openToast({
         title: error.message || lang({
@@ -167,6 +176,7 @@ export const CreateCropDrawer = ({
     const parentUuid = crop.parentUuid ?? original?.uuid;
     if (!parentUuid) return;
     if (await deleteMediaFile(crop.uuid)) {
+      setViewedCrop(viewed => viewed?.uuid === crop.uuid ? null : viewed);
       onDeleted(parentUuid, crop.uuid);
     }
   };
@@ -194,7 +204,7 @@ export const CreateCropDrawer = ({
         })]
       })
     }), _jsx(DrawerBody, {
-      children: original && _jsxs(Vertical, {
+      children: original && previewFile && _jsxs(Vertical, {
         "$gap": 20,
         children: [_jsxs("div", {
           children: [_jsx(FieldLabel, {
@@ -203,14 +213,14 @@ export const CreateCropDrawer = ({
             })
           }), _jsxs(Chips, {
             children: [_jsx(Chip, {
-              "$selected": isOriginalView,
-              onClick: () => setRatio('original'),
+              "$selected": isOriginalShown,
+              onClick: () => chooseRatio('original'),
               children: lang({
                 message: 'SMART.MEDIA_STORAGE.CREATE_CROP.ORIGINAL'
               })
             }), RATIOS.map(item => _jsx(Chip, {
               "$selected": item.value === ratio,
-              onClick: () => setRatio(item.value),
+              onClick: () => chooseRatio(item.value),
               children: item.label
             }, item.value))]
           })]
@@ -265,13 +275,15 @@ export const CreateCropDrawer = ({
           "$gap": 6,
           children: [_jsx(PreviewStage, {
             children: _jsx(PreviewFrame, {
-              "$ratio": isOriginalView ? originalRatio : selectedRatio.ar,
+              "$ratio": isOriginalView ? getAspectRatio(previewFile) : selectedRatio.ar,
               children: _jsx(PreviewImage, {
-                src: original.url,
-                alt: original.filename
+                src: previewFile.url,
+                alt: previewFile.filename
               })
             })
-          }), isOriginalView && originalMeta && _jsxs(Text, {
+          }), viewedCrop && _jsx(Text, {
+            children: getCropCaption(viewedCrop)
+          }), isOriginalShown && originalMeta && _jsxs(Text, {
             children: [originalMeta.width, ' × ', originalMeta.height]
           }), !isOriginalView && isSizeValid && _jsxs(Text, {
             children: [selectedRatio.label, ' · ', outputWidth, ' × ', outputHeight]
@@ -313,9 +325,19 @@ export const CreateCropDrawer = ({
             })
           }) : _jsx(CropStrip, {
             children: existingCrops.map(crop => _jsxs(CropThumb, {
-              children: [_jsx(TileImage, {
-                src: getThumbUrl(crop),
-                alt: crop.filename
+              "$selected": viewedCrop?.uuid === crop.uuid,
+              children: [_jsxs(CropThumbButton, {
+                type: "button",
+                title: lang({
+                  message: 'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT'
+                }),
+                onClick: () => viewCrop(crop),
+                children: [_jsx(CropThumbImage, {
+                  src: getThumbUrl(crop),
+                  alt: crop.filename
+                }), _jsx(CropThumbCaption, {
+                  children: getCropCaption(crop)
+                })]
               }), _jsx(CropThumbDelete, {
                 children: _jsx(Button, {
                   color: "secondary",
@@ -329,8 +351,6 @@ export const CreateCropDrawer = ({
                   }),
                   onClick: () => setPendingDeleteCrop(crop)
                 })
-              }), _jsx(CropThumbCaption, {
-                children: getCropCaption(crop)
               })]
             }, crop.uuid))
           })]

package/MediaStorage/MediaStorage.js

@@ -11,10 +11,11 @@ import { CanvaImportDrawer } from './CanvaImportDrawer';
 import { CreateCropDrawer } from './CreateCropDrawer';
 import { GenerateImageTab } from './GenerateImageTab';
 import { useCanvaEdit, useDeleteMediaFile, useDeleteMediaFiles } from './hooks';
-import { formatBytes, getCropCaption, getSourceLabel, getThumbUrl, hasVersions } from './mediaFile.utils';
+import { compressionSavings, formatBytes, getCropCaption, getSourceLabel, getThumbUrl, hasVersions } from './mediaFile.utils';
 import { Lang, useLang } from './polyglot';
 import { StockPhotosTab } from './StockPhotosTab';
-import { CanvaActions, CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, SelectionBar, SearchField, SearchRow, SelectionCount, SourceBadge, TabBody, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
+import { CanvaActions, CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, MenuItemPreview, MenuItemThumb, SelectionBar, SearchField, SearchRow, SelectionCount, SourceBadge, TabBody, Tile, TileActions, TileBadges, TileCheckbox, TileImage, TooltipAnchor, UsageLine, VersionsBadge, WarningBadge } from './styles';
+import { VersionsDrawer } from './VersionsDrawer';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
 const TAB_MESSAGES = {
@@ -73,6 +74,7 @@ export const MediaStorage = ({
   const [isUploading, setIsUploading] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
   const [createCropFor, setCreateCropFor] = useState(null);
+  const [versionsFor, setVersionsFor] = useState(null);
   const [pendingDelete, setPendingDelete] = useState(null);
   const [selectedUuids, setSelectedUuids] = useState([]);
   const [isBulkDeleteOpen, setIsBulkDeleteOpen] = useState(false);
@@ -218,8 +220,13 @@ export const MediaStorage = ({
       }));
       const failed = results.filter(result => result.status === 'rejected').length;
       if (failed < images.length) {
+        const savings = compressionSavings(results.flatMap(result => result.status === 'fulfilled' ? [result.value] : []));
         openToast({
-          title: lang({
+          title: savings ? lang({
+            message: 'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED',
+            percent: savings.percent,
+            size: formatBytes(savings.savedBytes)
+          }) : lang({
             message: 'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS'
           }),
           type: 'success'
@@ -465,7 +472,12 @@ export const MediaStorage = ({
           }), _jsxs(TileBadges, {
             children: [sourceLabel && _jsx(SourceBadge, {
               children: sourceLabel
-            }), hasVersions(file) && _jsx(CountBadge, {
+            }), hasVersions(file) && _jsx(VersionsBadge, {
+              type: "button",
+              title: lang({
+                message: 'SMART.MEDIA_STORAGE.VERSIONS.HINT'
+              }),
+              onClick: () => setVersionsFor(file),
               children: lang({
                 message: 'SMART.MEDIA_STORAGE.VERSIONS_BADGE',
                 count: file.versionsCount
@@ -480,23 +492,38 @@ export const MediaStorage = ({
             title: warning,
             children: warning
           }), _jsxs(TileActions, {
-            children: [crops.length > 0 ? _jsx(DropdownMenuButton, {
-              color: "secondary",
-              size: "compact",
-              icon: _jsx(CheckIcon, {
-                size: "small"
+            children: [crops.length > 0 ? _jsx(TooltipAnchor, {
+              title: lang({
+                message: 'SMART.MEDIA_STORAGE.SELECT_HINT'
               }),
-              menuPlacement: "bottom-start",
-              children: _jsxs(DropdownMenuSection, {
-                children: [_jsx(DropdownMenuItem, {
-                  onClick: () => onSelect(file),
-                  children: lang({
-                    message: 'SMART.MEDIA_STORAGE.SELECT_ORIGINAL'
-                  })
-                }), crops.map(crop => _jsx(DropdownMenuItem, {
-                  onClick: () => onSelect(crop),
-                  children: getCropCaption(crop)
-                }, crop.uuid))]
+              children: _jsx(DropdownMenuButton, {
+                color: "secondary",
+                size: "compact",
+                icon: _jsx(CheckIcon, {
+                  size: "small"
+                }),
+                menuPlacement: "bottom-start",
+                children: _jsxs(DropdownMenuSection, {
+                  children: [_jsx(DropdownMenuItem, {
+                    onClick: () => onSelect(file),
+                    children: _jsxs(MenuItemPreview, {
+                      children: [_jsx(MenuItemThumb, {
+                        src: getThumbUrl(file),
+                        alt: ""
+                      }), lang({
+                        message: 'SMART.MEDIA_STORAGE.SELECT_ORIGINAL'
+                      })]
+                    })
+                  }), crops.map(crop => _jsx(DropdownMenuItem, {
+                    onClick: () => onSelect(crop),
+                    children: _jsxs(MenuItemPreview, {
+                      children: [_jsx(MenuItemThumb, {
+                        src: getThumbUrl(crop),
+                        alt: ""
+                      }), getCropCaption(crop)]
+                    })
+                  }, crop.uuid))]
+                })
               })
             }) : _jsx(Button, {
               color: "secondary",
@@ -504,7 +531,7 @@ export const MediaStorage = ({
               icon: _jsx(CheckIcon, {
                 size: "small"
               }),
-              "aria-label": lang({
+              title: lang({
                 message: 'SMART.MEDIA_STORAGE.SELECT_HINT'
               }),
               onClick: () => onSelect(file)
@@ -515,7 +542,7 @@ export const MediaStorage = ({
                 size: "small",
                 view: "lined"
               }),
-              "aria-label": lang({
+              title: lang({
                 message: 'SMART.MEDIA_STORAGE.CREATE_CROP_HINT'
               }),
               onClick: () => setCreateCropFor(file)
@@ -529,9 +556,6 @@ export const MediaStorage = ({
               title: lang({
                 message: 'SMART.MEDIA_STORAGE.CANVA.EDIT'
               }),
-              "aria-label": lang({
-                message: 'SMART.MEDIA_STORAGE.CANVA.EDIT'
-              }),
               onClick: () => void canvaEdit.edit(file)
             }), _jsx(Button, {
               color: "secondary",
@@ -540,7 +564,7 @@ export const MediaStorage = ({
                 size: "small",
                 view: "lined"
               }),
-              "aria-label": lang({
+              title: lang({
                 message: 'SMART.MEDIA_STORAGE.DELETE_HINT'
               }),
               isDisabled: isBulkDeleting,
@@ -644,6 +668,15 @@ export const MediaStorage = ({
       onClose: () => setCreateCropFor(null),
       onCreated: handleCropCreated,
       onDeleted: handleCropDeleted
+    }), _jsx(VersionsDrawer, {
+      application: application,
+      file: versionsFor,
+      isOpen: versionsFor !== null,
+      onClose: () => setVersionsFor(null),
+      onSelect: version => {
+        setVersionsFor(null);
+        onSelect(version);
+      }
     }), _jsx(ModalConfirm, {
       isOpen: pendingDelete !== null,
       title: lang({

package/MediaStorage/VersionsDrawer.d.ts

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
+type VersionsDrawerProps = {
+    application: string;
+    file: MediaFile | null;
+    isOpen: boolean;
+    onClose: () => void;
+    onSelect: (file: MediaFile) => void;
+};
+/** Drawer listing every stored version of one image, newest first, with a full-size preview. */
+export declare const VersionsDrawer: FC<VersionsDrawerProps>;
+export {};

package/MediaStorage/VersionsDrawer.js

@@ -0,0 +1,134 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Button, Drawer, DrawerBody, DrawerHeader, DrawerTitle, useToast } from '@pushwoosh/dumb-components';
+import { useAsync, Vertical } from '@pushwoosh/kit-helpers';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+import { Text } from '@pushwoosh/kit-typography';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import { formatBytes, getAspectRatio, getThumbUrl } from './mediaFile.utils';
+import { useLang } from './polyglot';
+import { CropStrip, CropThumb, CropThumbButton, CropThumbCaption, CropThumbImage, EmptyState, FieldLabel, PreviewFrame, PreviewImage, PreviewStage } from './styles';
+/** Drawer listing every stored version of one image, newest first, with a full-size preview. */
+export const VersionsDrawer = ({
+  application,
+  file,
+  isOpen,
+  onClose,
+  onSelect
+}) => {
+  const lang = useLang();
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const {
+    openToast
+  } = useToast();
+  const [picked, setPicked] = useState(null);
+  const versionsAsync = useAsync(async () => {
+    if (!file) return [];
+    const response = await rpcGateway.mediaFiles.List({
+      application,
+      versionRootUuid: file.versionRootUuid
+    });
+    return [...(response.files ?? [])].sort((a, b) => b.version - a.version);
+  }, [rpcGateway, application, file]);
+  useEffect(() => {
+    if (versionsAsync.error) {
+      openToast({
+        title: versionsAsync.error.message || lang({
+          message: 'SMART.MEDIA_STORAGE.LOAD_ERROR'
+        }),
+        type: 'error'
+      });
+    }
+  }, [versionsAsync.error, openToast, lang]);
+  const versions = versionsAsync.value ?? [];
+  const newest = versions[0];
+  const viewed = picked && versions.includes(picked) ? picked : newest;
+  const viewedMeta = viewed?.meta?.type === 'imageMeta' ? viewed.meta.data : null;
+  const versionLabel = version => version === newest ? lang({
+    message: 'SMART.MEDIA_STORAGE.VERSIONS.CURRENT',
+    number: version.version + 1
+  }) : lang({
+    message: 'SMART.MEDIA_STORAGE.VERSIONS.NUMBER',
+    number: version.version + 1
+  });
+  return _jsxs(Drawer, {
+    size: "medium",
+    isOpen: isOpen,
+    onClose: onClose,
+    children: [_jsx(DrawerHeader, {
+      children: _jsxs(DrawerTitle, {
+        children: [_jsx("span", {
+          children: lang({
+            message: 'SMART.MEDIA_STORAGE.VERSIONS.TITLE'
+          })
+        }), _jsx(Button, {
+          view: "ghost",
+          color: "secondary",
+          size: "compact",
+          icon: _jsx(CloseIcon, {
+            size: "small"
+          }),
+          "aria-label": lang({
+            message: 'SMART.MEDIA_STORAGE.CREATE_CROP.CLOSE'
+          }),
+          onClick: onClose
+        })]
+      })
+    }), _jsxs(DrawerBody, {
+      children: [versionsAsync.loading && _jsx(EmptyState, {
+        children: lang({
+          message: 'SMART.MEDIA_STORAGE.LOADING'
+        })
+      }), !versionsAsync.loading && !viewed && _jsx(EmptyState, {
+        children: lang({
+          message: versionsAsync.error ? 'SMART.MEDIA_STORAGE.LOAD_ERROR' : 'SMART.MEDIA_STORAGE.EMPTY'
+        })
+      }), !versionsAsync.loading && viewed && _jsxs(Vertical, {
+        "$gap": 20,
+        children: [_jsxs(Vertical, {
+          "$gap": 6,
+          children: [_jsx(PreviewStage, {
+            children: _jsx(PreviewFrame, {
+              "$ratio": getAspectRatio(viewed),
+              children: _jsx(PreviewImage, {
+                src: viewed.url,
+                alt: viewed.filename
+              })
+            })
+          }), _jsxs(Text, {
+            children: [versionLabel(viewed), viewedMeta && ` · ${viewedMeta.width} × ${viewedMeta.height}`, ` · ${formatBytes(viewed.fileSize)}`]
+          })]
+        }), _jsx(Button, {
+          color: "primary",
+          size: "field",
+          onClick: () => onSelect(viewed),
+          children: lang({
+            message: 'SMART.MEDIA_STORAGE.VERSIONS.SELECT'
+          })
+        }), _jsxs("div", {
+          children: [_jsx(FieldLabel, {
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL'
+            })
+          }), _jsx(CropStrip, {
+            children: versions.map(version => _jsx(CropThumb, {
+              "$selected": version === viewed,
+              children: _jsxs(CropThumbButton, {
+                type: "button",
+                onClick: () => setPicked(version),
+                children: [_jsx(CropThumbImage, {
+                  src: getThumbUrl(version),
+                  alt: version.filename
+                }), _jsx(CropThumbCaption, {
+                  children: versionLabel(version)
+                })]
+              })
+            }, version.uuid))
+          })]
+        })]
+      })]
+    })]
+  });
+};

package/MediaStorage/mediaFile.utils.d.ts

@@ -5,7 +5,19 @@ export declare const getThumbUrl: (file: MediaFile) => string;
 export declare const getCropCaption: (file: MediaFile) => string;
 /** Brand name of the service an image was imported from; undefined for a file uploaded from disk. */
 export declare const getSourceLabel: (file: MediaFile) => string | undefined;
+/** Width-to-height ratio from image meta; 1 when the meta carries no size. */
+export declare const getAspectRatio: (file: MediaFile) => number;
 /** True for an image that has been edited at least once, so older versions exist behind it. */
 export declare const hasVersions: (file: MediaFile) => boolean;
 /** Human-readable byte size, e.g. 4404019 -> "4.2 MB". */
 export declare const formatBytes: (bytes: number) => string;
+/** The part of the `/api/media/upload` answer the upload toast reads. */
+export type UploadedFile = {
+    file_size: number;
+    original_file_size?: number;
+};
+/** Savings of PNG compression over a batch: compressed files only; null when nothing worth a whole percent was saved. */
+export declare const compressionSavings: (files: UploadedFile[]) => {
+    percent: number;
+    savedBytes: number;
+} | null;

package/MediaStorage/mediaFile.utils.js

@@ -19,6 +19,8 @@ const SOURCE_LABELS = {
 };
 /** Brand name of the service an image was imported from; undefined for a file uploaded from disk. */
 export const getSourceLabel = file => file.source ? SOURCE_LABELS[file.source] : undefined;
+/** Width-to-height ratio from image meta; 1 when the meta carries no size. */
+export const getAspectRatio = file => file.meta?.type === 'imageMeta' && file.meta.data.height > 0 ? file.meta.data.width / file.meta.data.height : 1;
 /** True for an image that has been edited at least once, so older versions exist behind it. */
 export const hasVersions = file => file.versionsCount > 1;
 const BYTE_UNITS = ['B', 'KB', 'MB', 'GB', 'TB'];
@@ -31,4 +33,20 @@ export const formatBytes = bytes => {
   // 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]}`;
+};
+/** Savings of PNG compression over a batch: compressed files only; null when nothing worth a whole percent was saved. */
+export const compressionSavings = files => {
+  let before = 0;
+  let after = 0;
+  for (const file of files) {
+    if (file.original_file_size && file.original_file_size > file.file_size) {
+      before += file.original_file_size;
+      after += file.file_size;
+    }
+  }
+  const percent = before === 0 ? 0 : Math.round((1 - after / before) * 100);
+  return percent > 0 ? {
+    percent,
+    savedBytes: before - after
+  } : null;
 };

package/MediaStorage/polyglot/messages_ar.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'تعذّر رفع الصورة',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'تنسيق غير مدعوم. استخدم JPEG أو PNG أو GIF أو WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'تم رفع الصورة',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'تم رفع الصورة. تم ضغط PNG: توفير {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': 'الملفات: {{count}} · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': 'اقتصاصات: {{count}}',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': 'إصدارات: {{count}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'عرض الإصدارات',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'الإصدارات',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'الإصدار {{number}} · الحالي',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'الإصدار {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'استخدام هذا الإصدار',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'كل الإصدارات',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'سيتم حذف هذا الإصدار واقتصاصاته فقط، وسيظهر الإصدار السابق بدلًا منه. لا يمكن التراجع عن هذا الإجراء.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'الأصل',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'إنشاء اقتصاصات',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'لا توجد اقتصاصات بعد',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'تم إنشاء الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'تعذّر إنشاء الاقتصاص',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'عرض هذا الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'حذف الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'حذف هذا الاقتصاص؟',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'حذف',

package/MediaStorage/polyglot/messages_bn.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'ছবি আপলোড করা যায়নি',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'অসমর্থিত ফরম্যাট। JPEG, PNG, GIF বা WebP ব্যবহার করুন',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'ছবি আপলোড হয়েছে',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'ছবি আপলোড হয়েছে। PNG সংকুচিত: {{percent}}% সাশ্রয় ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}}টি ফাইল · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}}টি ক্রপ',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}}টি সংস্করণ',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'সংস্করণ দেখান',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'সংস্করণ',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'সংস্করণ {{number}} · বর্তমান',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'সংস্করণ {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'এই সংস্করণ ব্যবহার করুন',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'সব সংস্করণ',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'শুধু এই সংস্করণ এবং এর ক্রপ মুছে যাবে; এর জায়গায় আগের সংস্করণটি দেখানো হবে। এটি পূর্বাবস্থায় ফেরানো যাবে না।',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'মূল',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'ক্রপ তৈরি করুন',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'এখনো কোনো ক্রপ নেই',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'ক্রপ তৈরি হয়েছে',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'ক্রপ তৈরি করা যায়নি',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'এই ক্রপ দেখান',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'ক্রপ মুছুন',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'এই ক্রপটি মুছবেন?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'মুছুন',

package/MediaStorage/polyglot/messages_de.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Bild konnte nicht hochgeladen werden',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Nicht unterstütztes Format. Verwenden Sie JPEG, PNG, GIF oder WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Bild hochgeladen',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Bild hochgeladen. PNG komprimiert: {{percent}} % gespart ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} Dateien · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} Zuschn.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} Vers.',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'Versionen anzeigen',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'Versionen',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'Version {{number}} · aktuell',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'Version {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'Diese Version verwenden',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'Alle Versionen',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Nur diese Version und ihre Zuschnitte werden gelöscht; stattdessen wird die vorherige Version angezeigt. Dies kann nicht rückgängig gemacht werden.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Zuschnitte erstellen',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Noch keine Zuschnitte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Zuschnitt erstellt',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Zuschnitt konnte nicht erstellt werden',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Zuschnitt anzeigen',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Zuschnitt löschen',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Diesen Zuschnitt löschen?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Löschen',

package/MediaStorage/polyglot/messages_en.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Failed to upload image',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Unsupported format. Use JPEG, PNG, GIF or WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Image uploaded',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Image uploaded. PNG compressed: saved {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} files · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} cr.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} ver.',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'Show versions',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'Versions',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'Version {{number}} · current',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'Version {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'Use this version',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'All versions',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Only this version and its crops are deleted; the previous version is shown instead. This can’t be undone.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Create crops',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'No crops yet',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Crop created',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Failed to create crop',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Show this crop',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Delete crop',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Delete this crop?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Delete',

package/MediaStorage/polyglot/messages_es.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'No se pudo subir la imagen',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Formato no compatible. Usa JPEG, PNG, GIF o WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Imagen subida',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Imagen subida. PNG comprimido: ahorro del {{percent}} % ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} archivos · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} rec.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} vers.',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'Mostrar versiones',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'Versiones',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'Versión {{number}} · actual',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'Versión {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'Usar esta versión',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'Todas las versiones',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Solo se eliminan esta versión y sus recortes; en su lugar se muestra la versión anterior. Esta acción no se puede deshacer.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Crear recortes',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Aún no hay recortes',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Recorte creado',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'No se pudo crear el recorte',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Mostrar este recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Eliminar recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': '¿Eliminar este recorte?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Eliminar',

package/MediaStorage/polyglot/messages_fr.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Échec de l’importation de l’image',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Format non pris en charge. Utilisez JPEG, PNG, GIF ou WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Image importée',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Image importée. PNG compressé : {{percent}} % économisés ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} fichiers · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} recadr.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} vers.',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'Afficher les versions',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'Versions',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'Version {{number}} · actuelle',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'Version {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'Utiliser cette version',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'Toutes les versions',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Seuls cette version et ses recadrages sont supprimés ; la version précédente s’affiche à la place. Cette action est irréversible.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Créer des recadrages',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Aucun recadrage pour le moment',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Recadrage créé',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Échec de la création du recadrage',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Afficher ce recadrage',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Supprimer le recadrage',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Supprimer ce recadrage ?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Supprimer',

package/MediaStorage/polyglot/messages_he.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'העלאת התמונה נכשלה',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'פורמט לא נתמך. השתמשו ב-JPEG, PNG, GIF או WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'התמונה הועלתה',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'התמונה הועלתה. PNG נדחס: חיסכון של {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} קבצים · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} חית.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} גרס.',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'הצג גרסאות',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'גרסאות',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'גרסה {{number}} · נוכחית',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'גרסה {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'השתמש בגרסה זו',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'כל הגרסאות',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'רק הגרסה הזו והחיתוכים שלה יימחקו; במקומה תוצג הגרסה הקודמת. לא ניתן לבטל פעולה זו.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'מקורי',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'יצירת חיתוכים',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'אין עדיין חיתוכים',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'החיתוך נוצר',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'יצירת החיתוך נכשלה',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'הצג חיתוך זה',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'מחיקת חיתוך',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'למחוק את החיתוך הזה?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'מחיקה',

package/MediaStorage/polyglot/messages_hi.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'छवि अपलोड नहीं हो सकी',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'असमर्थित फ़ॉर्मेट। JPEG, PNG, GIF या WebP का उपयोग करें',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'छवि अपलोड हो गई',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'छवि अपलोड हो गई। PNG संपीड़ित: {{percent}}% की बचत ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} फ़ाइलें · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} क्रॉप',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} संस्करण',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'संस्करण दिखाएँ',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'संस्करण',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'संस्करण {{number}} · वर्तमान',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'संस्करण {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'यह संस्करण उपयोग करें',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'सभी संस्करण',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'केवल यह संस्करण और इसके क्रॉप हटेंगे; इसकी जगह पिछला संस्करण दिखाया जाएगा। इसे पूर्ववत नहीं किया जा सकता।',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'मूल',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'क्रॉप बनाएँ',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'अभी तक कोई क्रॉप नहीं',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'क्रॉप बनाया गया',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'क्रॉप नहीं बनाया जा सका',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'यह क्रॉप दिखाएँ',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'क्रॉप हटाएँ',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'यह क्रॉप हटाएँ?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'हटाएँ',

package/MediaStorage/polyglot/messages_ja.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': '画像のアップロードに失敗しました',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'サポートされていない形式です。JPEG、PNG、GIF、WebPを使用してください',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': '画像をアップロードしました',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': '画像をアップロードしました。PNG を圧縮: {{percent}}% 削減（{{size}}）',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}}ファイル · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': 'トリミング{{count}}',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': 'バージョン{{count}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'バージョンを表示',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'バージョン',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'バージョン {{number}} · 現在',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'バージョン {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'このバージョンを使用',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'すべてのバージョン',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'このバージョンとそのトリミングのみが削除され、代わりに以前のバージョンが表示されます。この操作は元に戻せません。',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'オリジナル',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'トリミングを作成',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'トリミングはまだありません',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'トリミングを作成しました',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'トリミングの作成に失敗しました',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'このトリミングを表示',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'トリミングを削除',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'このトリミングを削除しますか？',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': '削除',

package/MediaStorage/polyglot/messages_ko.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': '이미지를 업로드하지 못했습니다',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': '지원되지 않는 형식입니다. JPEG, PNG, GIF 또는 WebP를 사용하세요',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': '이미지가 업로드되었습니다',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': '이미지가 업로드되었습니다. PNG 압축: {{percent}}% 절감 ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '파일 {{count}}개 · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '크롭 {{count}}개',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '버전 {{count}}개',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': '버전 보기',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': '버전',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': '버전 {{number}} · 현재',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': '버전 {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': '이 버전 사용',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': '모든 버전',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': '이 버전과 해당 크롭만 삭제되며 대신 이전 버전이 표시됩니다. 이 작업은 되돌릴 수 없습니다.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': '원본',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': '크롭 만들기',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': '아직 크롭이 없습니다',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': '크롭이 생성되었습니다',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': '크롭을 생성하지 못했습니다',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': '이 크롭 보기',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': '크롭 삭제',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': '이 크롭을 삭제하시겠습니까?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': '삭제',

package/MediaStorage/polyglot/messages_pt.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Falha ao enviar a imagem',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Formato não suportado. Use JPEG, PNG, GIF ou WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Imagem enviada',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Imagem enviada. PNG comprimido: economia de {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} arquivos · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} rec.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} vers.',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'Mostrar versões',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'Versões',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'Versão {{number}} · atual',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'Versão {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'Usar esta versão',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'Todas as versões',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Apenas esta versão e seus recortes são excluídos; a versão anterior é exibida no lugar. Esta ação não pode ser desfeita.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Original',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Criar recortes',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Nenhum recorte ainda',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Recorte criado',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Falha ao criar o recorte',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Mostrar este recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Excluir recorte',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Excluir este recorte?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Excluir',

package/MediaStorage/polyglot/messages_ru.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'Не удалось загрузить изображение',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'Неподдерживаемый формат. Используйте JPEG, PNG, GIF или WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'Изображение загружено',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'Изображение загружено. PNG сжат: экономия {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} файлов · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} кр.',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} вер.',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'Показать версии',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'Версии',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'Версия {{number}} · текущая',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'Версия {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'Использовать эту версию',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'Все версии',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'Удалится только эта версия и её кропы, вместо неё снова появится предыдущая. Действие необратимо.',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'Оригинал',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'Создать кропы',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'Кропов пока нет',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'Кроп создан',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'Не удалось создать кроп',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Показать кроп',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Удалить кроп',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Удалить кроп?',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'Удалить',

package/MediaStorage/polyglot/messages_th.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': 'อัปโหลดรูปภาพไม่สำเร็จ',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': 'ไม่รองรับรูปแบบนี้ ใช้ JPEG, PNG, GIF หรือ WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': 'อัปโหลดรูปภาพแล้ว',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': 'อัปโหลดรูปภาพแล้ว บีบอัด PNG: ประหยัด {{percent}}% ({{size}})',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} ไฟล์ · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} ครอป',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} เวอร์ชัน',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': 'แสดงเวอร์ชัน',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': 'เวอร์ชัน',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': 'เวอร์ชัน {{number}} · ปัจจุบัน',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': 'เวอร์ชัน {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': 'ใช้เวอร์ชันนี้',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': 'ทุกเวอร์ชัน',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': 'จะลบเฉพาะเวอร์ชันนี้และครอปของเวอร์ชันนี้ และจะแสดงเวอร์ชันก่อนหน้าแทน การดำเนินการนี้ไม่สามารถย้อนกลับได้',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': 'ต้นฉบับ',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': 'สร้างครอป',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': 'ยังไม่มีครอป',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': 'สร้างครอปแล้ว',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': 'สร้างครอปไม่สำเร็จ',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'แสดงภาพครอปนี้',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'ลบครอป',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'ลบครอปนี้ใช่ไหม',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': 'ลบ',

package/MediaStorage/polyglot/messages_zh.js

@@ -10,9 +10,16 @@ export const messages = {
   'SMART.MEDIA_STORAGE.UPLOAD_ERROR': '上传图片失败',
   'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': '不支持的格式。请使用 JPEG、PNG、GIF 或 WebP',
   'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': '图片已上传',
+  'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': '图片已上传。PNG 已压缩：节省 {{percent}}%（{{size}}）',
   'SMART.MEDIA_STORAGE.USAGE': '{{count}} 个文件 · {{size}}',
   'SMART.MEDIA_STORAGE.CROPS_BADGE': '{{count}} 个裁剪图',
   'SMART.MEDIA_STORAGE.VERSIONS_BADGE': '{{count}} 个版本',
+  'SMART.MEDIA_STORAGE.VERSIONS.HINT': '查看版本',
+  'SMART.MEDIA_STORAGE.VERSIONS.TITLE': '版本',
+  'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': '版本 {{number}} · 当前',
+  'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': '版本 {{number}}',
+  'SMART.MEDIA_STORAGE.VERSIONS.SELECT': '使用此版本',
+  'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': '全部版本',
   'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': '仅删除此版本及其裁剪图，并改为显示上一个版本。此操作无法撤销。',
   'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': '原图',
   'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': '创建裁剪图',
@@ -45,6 +52,7 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': '暂无裁剪图',
   'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': '裁剪图已创建',
   'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': '创建裁剪图失败',
+  'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': '查看此裁剪',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': '删除裁剪图',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': '删除此裁剪图？',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': '删除',

package/MediaStorage/polyglot/types.d.ts

@@ -11,6 +11,10 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.UPLOAD_ERROR': NoParams;
     'SMART.MEDIA_STORAGE.UNSUPPORTED_FORMAT': NoParams;
     'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS': NoParams;
+    'SMART.MEDIA_STORAGE.UPLOAD_SUCCESS_COMPRESSED': {
+        percent: number;
+        size: string;
+    };
     'SMART.MEDIA_STORAGE.USAGE': {
         count: number;
         size: string;
@@ -22,6 +26,16 @@ export type MediaStorageMessages = {
         count: number;
     };
     'SMART.MEDIA_STORAGE.DELETE_CONFIRM.DESCRIPTION_VERSION': NoParams;
+    'SMART.MEDIA_STORAGE.VERSIONS.HINT': NoParams;
+    'SMART.MEDIA_STORAGE.VERSIONS.TITLE': NoParams;
+    'SMART.MEDIA_STORAGE.VERSIONS.CURRENT': {
+        number: number;
+    };
+    'SMART.MEDIA_STORAGE.VERSIONS.NUMBER': {
+        number: number;
+    };
+    'SMART.MEDIA_STORAGE.VERSIONS.SELECT': NoParams;
+    'SMART.MEDIA_STORAGE.VERSIONS.LIST_LABEL': NoParams;
     'SMART.MEDIA_STORAGE.SELECT_ORIGINAL': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP_HINT': NoParams;
     'SMART.MEDIA_STORAGE.DELETE_HINT': NoParams;
@@ -61,6 +75,7 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.CREATE_CROP.NO_CROPS': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.ERROR': NoParams;
+    'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': NoParams;
     'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.BUTTON': NoParams;

package/MediaStorage/styles.d.ts

@@ -15,6 +15,18 @@ export declare const TileBadges: import("styled-components/dist/types").IStyledC
 export declare const SourceBadge: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
+export declare const VersionsBadge: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const TooltipAnchor: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const MenuItemPreview: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const MenuItemThumb: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
 export declare const CountBadge: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
@@ -85,7 +97,15 @@ export declare const SegmentItem: import("styled-components/dist/types").IStyled
 export declare const CropStrip: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
-export declare const CropThumb: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+export declare const CropThumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}, {
+    $selected?: boolean;
+}>> & string;
+export declare const CropThumbButton: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
+}> & string;
+export declare const CropThumbImage: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "style"> & {
     style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
 }> & string;
 export declare const CropThumbDelete: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {

package/MediaStorage/styles.js

@@ -25,37 +25,53 @@ export const SourceBadge = styled.span.withConfig({
   displayName: "SourceBadge",
   componentId: "sc-uu3cbo-4"
 })(["font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;"], FontWeight.BOLD, Color.MAIN, Color.CLEAR);
+export const VersionsBadge = styled.button.withConfig({
+  displayName: "VersionsBadge",
+  componentId: "sc-uu3cbo-5"
+})(["font:inherit;font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border:none;border-radius:20px;padding:3px 7px;cursor:pointer;pointer-events:auto;&:hover{text-decoration:underline;}"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
+export const TooltipAnchor = styled.span.withConfig({
+  displayName: "TooltipAnchor",
+  componentId: "sc-uu3cbo-6"
+})(["display:contents;"]);
+export const MenuItemPreview = styled.span.withConfig({
+  displayName: "MenuItemPreview",
+  componentId: "sc-uu3cbo-7"
+})(["display:flex;align-items:center;gap:10px;padding:6px 0;text-align:left;"]);
+export const MenuItemThumb = styled.img.withConfig({
+  displayName: "MenuItemThumb",
+  componentId: "sc-uu3cbo-8"
+})(["width:64px;height:40px;object-fit:contain;flex-shrink:0;border-radius:4px;background:", ";"], Color.SOFT_LIGHT);
 export const CountBadge = styled.span.withConfig({
   displayName: "CountBadge",
-  componentId: "sc-uu3cbo-5"
+  componentId: "sc-uu3cbo-9"
 })(["font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
 export const WarningBadge = styled.span.withConfig({
   displayName: "WarningBadge",
-  componentId: "sc-uu3cbo-6"
+  componentId: "sc-uu3cbo-10"
 })(["position:absolute;bottom:0;left:0;right:0;font-size:10px;line-height:1.2;text-align:center;color:", ";background:", ";padding:3px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;"], Color.CLEAR, Color.WARNING);
 export const TileCheckbox = styled.div.withConfig({
   displayName: "TileCheckbox",
-  componentId: "sc-uu3cbo-7"
+  componentId: "sc-uu3cbo-11"
 })(["position:absolute;top:6px;left:6px;z-index:2;padding:2px;border-radius:4px;background:", ";"], Color.CLEAR);
 export const SelectionBar = styled.div.withConfig({
   displayName: "SelectionBar",
-  componentId: "sc-uu3cbo-8"
+  componentId: "sc-uu3cbo-12"
 })(["display:flex;align-items:center;gap:12px;min-height:32px;margin-bottom:12px;"]);
 export const SelectionCount = styled.span.withConfig({
   displayName: "SelectionCount",
-  componentId: "sc-uu3cbo-9"
+  componentId: "sc-uu3cbo-13"
 })(["font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 export const TileActions = styled.div.withConfig({
   displayName: "TileActions",
-  componentId: "sc-uu3cbo-10"
+  componentId: "sc-uu3cbo-14"
 })(["position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);opacity:0;transition:opacity 0.15s;", ":hover &{opacity:1;}@media (hover:none){opacity:1;}"], Tile);
 export const EmptyState = styled.div.withConfig({
   displayName: "EmptyState",
-  componentId: "sc-uu3cbo-11"
+  componentId: "sc-uu3cbo-15"
 })(["text-align:center;padding:48px 16px;color:", ";"], Color.LOCKED);
 export const Dropzone = styled.button.withConfig({
   displayName: "Dropzone",
-  componentId: "sc-uu3cbo-12"
+  componentId: "sc-uu3cbo-16"
 })(["width:100%;min-height:96px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px;font:inherit;font-size:13px;color:", ";cursor:pointer;border:2px dashed ", ";border-radius:8px;background:", ";transition:border-color 0.15s,background 0.15s;&:hover{border-color:", ";}&:disabled{cursor:default;opacity:0.7;}"], Color.LOCKED, ({
   $dragOver
 }) => $dragOver ? Color.PRIMARY : Color.DIVIDER, ({
@@ -63,46 +79,46 @@ export const Dropzone = styled.button.withConfig({
 }) => $dragOver ? Color.SOFT_LIGHT : Color.CLEAR, Color.PRIMARY);
 export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
-  componentId: "sc-uu3cbo-13"
+  componentId: "sc-uu3cbo-17"
 })(["display:none;"]);
 export const UsageLine = styled.div.withConfig({
   displayName: "UsageLine",
-  componentId: "sc-uu3cbo-14"
+  componentId: "sc-uu3cbo-18"
 })(["margin-left:auto;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 /* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
-  componentId: "sc-uu3cbo-15"
+  componentId: "sc-uu3cbo-19"
 })(["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-uu3cbo-16"
+  componentId: "sc-uu3cbo-20"
 })(["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-uu3cbo-17"
+  componentId: "sc-uu3cbo-21"
 })(["width:100%;height:100%;object-fit:cover;display:block;"]);
 export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
-  componentId: "sc-uu3cbo-18"
+  componentId: "sc-uu3cbo-22"
 })(["font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.4px;color:", ";margin-bottom:6px;"], Color.LOCKED);
 export const SizeInput = styled(NativeInput).withConfig({
   displayName: "SizeInput",
-  componentId: "sc-uu3cbo-19"
+  componentId: "sc-uu3cbo-23"
 })(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-uu3cbo-20"
+  componentId: "sc-uu3cbo-24"
 })(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
-  componentId: "sc-uu3cbo-21"
+  componentId: "sc-uu3cbo-25"
 })(["display:inline-flex;border:1px solid ", ";border-radius:6px;overflow:hidden;"], Color.DIVIDER);
 export const SegmentItem = styled.button.withConfig({
   displayName: "SegmentItem",
-  componentId: "sc-uu3cbo-22"
+  componentId: "sc-uu3cbo-26"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border:none;background:", ";color:", ";& + &{border-left:1px solid ", ";}"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
@@ -110,23 +126,35 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
 export const CropStrip = styled.div.withConfig({
   displayName: "CropStrip",
-  componentId: "sc-uu3cbo-23"
+  componentId: "sc-uu3cbo-27"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
 export const CropThumb = styled.div.withConfig({
   displayName: "CropThumb",
-  componentId: "sc-uu3cbo-24"
-})(["position:relative;width:88px;border:1px solid ", ";border-radius:6px;overflow:hidden;background:", ";"], Color.DIVIDER, Color.SOFT_LIGHT);
+  componentId: "sc-uu3cbo-28"
+})(["position:relative;width:88px;border:1px solid ", ";box-shadow:", ";border-radius:6px;overflow:hidden;background:", ";"], ({
+  $selected
+}) => $selected ? Color.PRIMARY : Color.DIVIDER, ({
+  $selected
+}) => $selected ? `0 0 0 1px ${Color.PRIMARY}` : 'none', Color.SOFT_LIGHT);
+export const CropThumbButton = styled.button.withConfig({
+  displayName: "CropThumbButton",
+  componentId: "sc-uu3cbo-29"
+})(["display:block;width:100%;padding:0;font:inherit;border:none;background:none;cursor:pointer;"]);
+export const CropThumbImage = styled.img.withConfig({
+  displayName: "CropThumbImage",
+  componentId: "sc-uu3cbo-30"
+})(["width:100%;aspect-ratio:1;object-fit:contain;display:block;"]);
 export const CropThumbDelete = styled.div.withConfig({
   displayName: "CropThumbDelete",
-  componentId: "sc-uu3cbo-25"
+  componentId: "sc-uu3cbo-31"
 })(["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-uu3cbo-26"
+  componentId: "sc-uu3cbo-32"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);
 export const DesignTile = styled.button.withConfig({
   displayName: "DesignTile",
-  componentId: "sc-uu3cbo-27"
+  componentId: "sc-uu3cbo-33"
 })(["display:flex;flex-direction:column;padding:0;font:inherit;text-align:left;cursor:pointer;background:", ";border-radius:6px;overflow:hidden;border:1px solid ", ";box-shadow:", ";transition:border-color 0.15s,box-shadow 0.15s;&:hover:not(:disabled){border-color:", ";}&:disabled{cursor:default;}"], Color.CLEAR, ({
   $selected
 }) => $selected ? Color.PRIMARY : Color.DIVIDER, ({
@@ -134,27 +162,27 @@ export const DesignTile = styled.button.withConfig({
 }) => $selected ? `0 0 0 1px ${Color.PRIMARY}` : 'none', Color.PRIMARY);
 export const DesignCaption = styled.span.withConfig({
   displayName: "DesignCaption",
-  componentId: "sc-uu3cbo-28"
+  componentId: "sc-uu3cbo-34"
 })(["display:flex;justify-content:space-between;gap:6px;padding:6px 8px;font-size:", ";color:", ";span:first-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}span:last-child{flex-shrink:0;color:", ";}"], FontSize.SMALL, Color.MAIN, Color.LOCKED);
 export const DropzoneRow = styled.div.withConfig({
   displayName: "DropzoneRow",
-  componentId: "sc-uu3cbo-29"
+  componentId: "sc-uu3cbo-35"
 })(["display:flex;align-items:stretch;gap:12px;& > :first-child{flex:1;}"]);
 export const CanvaActions = styled.div.withConfig({
   displayName: "CanvaActions",
-  componentId: "sc-uu3cbo-30"
+  componentId: "sc-uu3cbo-36"
 })(["display:flex;flex-direction:column;justify-content:center;gap:8px;& > *{width:100%;}"]);
 export const TabBody = styled.div.withConfig({
   displayName: "TabBody",
-  componentId: "sc-uu3cbo-31"
+  componentId: "sc-uu3cbo-37"
 })(["padding-top:16px;"]);
 export const SearchRow = styled.div.withConfig({
   displayName: "SearchRow",
-  componentId: "sc-uu3cbo-32"
+  componentId: "sc-uu3cbo-38"
 })(["display:flex;gap:8px;margin-bottom:16px;"]);
 export const StockTile = styled.button.withConfig({
   displayName: "StockTile",
-  componentId: "sc-uu3cbo-33"
+  componentId: "sc-uu3cbo-39"
 })(["all:unset;background-color:", ";opacity:", ";display:block;width:100%;box-sizing:border-box;cursor:pointer;border-radius:6px;overflow:hidden;border:1px solid ", ";transition:border-color 0.15s,opacity 0.15s;&:hover{border-color:", ";}&:disabled{cursor:default;}"], ({
   $avgColor
 }) => $avgColor || 'transparent', ({
@@ -162,59 +190,59 @@ export const StockTile = styled.button.withConfig({
 }) => $dimmed ? 0.6 : 1, Color.DIVIDER, Color.PRIMARY);
 export const StockCredit = styled.a.withConfig({
   displayName: "StockCredit",
-  componentId: "sc-uu3cbo-34"
+  componentId: "sc-uu3cbo-40"
 })(["display:block;margin-top:2px;padding:0 4px 4px;font-size:11px;color:", ";text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;&:hover{text-decoration:underline;}"], Color.LOCKED);
 export const ProviderNote = styled.div.withConfig({
   displayName: "ProviderNote",
-  componentId: "sc-uu3cbo-35"
+  componentId: "sc-uu3cbo-41"
 })(["margin-top:16px;text-align:center;font-size:12px;color:", ";a{color:", ";}"], Color.LOCKED, Color.MAIN);
 export const GenerateForm = styled.div.withConfig({
   displayName: "GenerateForm",
-  componentId: "sc-uu3cbo-36"
+  componentId: "sc-uu3cbo-42"
 })(["display:flex;flex-direction:column;gap:12px;max-width:560px;"]);
 export const GenerateControls = styled.div.withConfig({
   displayName: "GenerateControls",
-  componentId: "sc-uu3cbo-37"
+  componentId: "sc-uu3cbo-43"
 })(["display:flex;align-items:center;gap:8px;"]);
 export const GeneratedPreview = styled.img.withConfig({
   displayName: "GeneratedPreview",
-  componentId: "sc-uu3cbo-38"
+  componentId: "sc-uu3cbo-44"
 })(["display:block;max-width:100%;max-height:420px;border-radius:8px;border:1px solid ", ";"], Color.DIVIDER);
 export const SearchField = styled(NativeInput).withConfig({
   displayName: "SearchField",
-  componentId: "sc-uu3cbo-39"
+  componentId: "sc-uu3cbo-45"
 })(["flex:1;width:auto;max-width:none;"]);
 export const PromptField = styled(NativeTextarea).withConfig({
   displayName: "PromptField",
-  componentId: "sc-uu3cbo-40"
+  componentId: "sc-uu3cbo-46"
 })(["font-family:inherit;resize:vertical;"]);
 export const GeneratedGrid = styled.div.withConfig({
   displayName: "GeneratedGrid",
-  componentId: "sc-uu3cbo-41"
+  componentId: "sc-uu3cbo-47"
 })(["display:grid;grid-template-columns:", ";gap:16px;"], ({
   $single
 }) => $single ? '1fr' : 'repeat(2, minmax(0, 1fr))');
 export const GeneratedVariant = styled.div.withConfig({
   displayName: "GeneratedVariant",
-  componentId: "sc-uu3cbo-42"
+  componentId: "sc-uu3cbo-48"
 })(["display:flex;flex-direction:column;align-items:flex-start;gap:8px;"]);
 export const StyleRefs = styled.div.withConfig({
   displayName: "StyleRefs",
-  componentId: "sc-uu3cbo-43"
+  componentId: "sc-uu3cbo-49"
 })(["display:flex;flex-direction:column;gap:8px;"]);
 export const StyleRefsHeader = styled.div.withConfig({
   displayName: "StyleRefsHeader",
-  componentId: "sc-uu3cbo-44"
+  componentId: "sc-uu3cbo-50"
 })(["display:flex;align-items:center;gap:8px;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
 export const StyleRefsRow = styled.div.withConfig({
   displayName: "StyleRefsRow",
-  componentId: "sc-uu3cbo-45"
+  componentId: "sc-uu3cbo-51"
 })(["display:flex;flex-wrap:wrap;gap:8px;"]);
 export const StyleRefThumb = styled.div.withConfig({
   displayName: "StyleRefThumb",
-  componentId: "sc-uu3cbo-46"
+  componentId: "sc-uu3cbo-52"
 })(["position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;border:1px solid ", ";img{width:100%;height:100%;object-fit:cover;display:block;}"], Color.DIVIDER);
 export const StyleRefRemove = styled.div.withConfig({
   displayName: "StyleRefRemove",
-  componentId: "sc-uu3cbo-47"
+  componentId: "sc-uu3cbo-53"
 })(["position:absolute;top:2px;right:2px;border-radius:4px;background:", ";"], Color.CLEAR);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pushwoosh/smart-components-kit",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@pushwoosh/dumb-components": "^3.1.0",
+    "@pushwoosh/dumb-components": "^3.2.0",
     "@pushwoosh/kit-constants": "^2.1.1",
     "@pushwoosh/kit-helpers": "^4.16.0",
     "@pushwoosh/kit-icons": "^2.3.10",