@pushwoosh/smart-components-kit 1.1.0 → 1.1.2

package/MediaStore/{CreateVariantDrawer.d.ts → CreateCropDrawer.d.ts}

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

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

@@ -7,7 +7,7 @@ import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
 import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Chip, Chips, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, TileImage, VariantStrip, VariantThumb, VariantThumbCaption } from './styled';
+import { Chip, Chips, CropStrip, CropThumb, CropThumbCaption, FieldLabel, PreviewFrame, PreviewImage, PreviewStage, Segment, SegmentItem, TileImage } from './styled';
 const RATIOS = [{
   value: 'ASPECT_RATIO_1_1',
   label: '1:1',
@@ -48,11 +48,11 @@ const RATIOS = [{
 const DEFAULT_RATIO = 'ASPECT_RATIO_16_9';
 const DEFAULT_SIZE = '1080';
 const DEFAULT_QUALITY = '90';
-export const CreateVariantDrawer = ({
+export const CreateCropDrawer = ({
   application,
   original,
   isOpen,
-  existingVariants,
+  existingCrops,
   onClose,
   onCreated
 }) => {
@@ -87,14 +87,14 @@ export const CreateVariantDrawer = ({
   const selectedRatio = RATIOS.find(item => item.value === ratio) ?? RATIOS[0];
   const outputWidth = dimension === 'width' ? sizeValue : Math.round(sizeValue * selectedRatio.ar);
   const outputHeight = dimension === 'height' ? sizeValue : Math.round(sizeValue / selectedRatio.ar);
-  const ratioExists = existingVariants.some(variant => {
-    var _variant$meta;
-    return ((_variant$meta = variant.meta) === null || _variant$meta === void 0 ? void 0 : _variant$meta.type) === 'imageMeta' && variant.meta.data.ratio === selectedRatio.label;
+  const ratioExists = existingCrops.some(crop => {
+    var _crop$meta;
+    return ((_crop$meta = crop.meta) === null || _crop$meta === void 0 ? void 0 : _crop$meta.type) === 'imageMeta' && crop.meta.data.ratio === selectedRatio.label;
   });
   const handleCreate = async () => {
     if (!original || !isSizeValid || !isQualityValid || ratioExists) return;
     // Capture the parent up front so a concurrent reopen for another image
-    // can't misroute the created variant.
+    // can't misroute the created crop.
     const parent = original;
     setIsCreating(true);
     try {
@@ -112,7 +112,7 @@ export const CreateVariantDrawer = ({
       });
       openToast({
         title: lang({
-          message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS'
+          message: 'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS'
         }),
         type: 'success'
       });
@@ -120,7 +120,7 @@ export const CreateVariantDrawer = ({
     } catch (error) {
       openToast({
         title: error.message || lang({
-          message: 'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR'
+          message: 'SMART.MEDIA_STORE.CREATE_CROP.ERROR'
         }),
         type: 'error'
       });
@@ -136,7 +136,7 @@ export const CreateVariantDrawer = ({
       children: _jsxs(DrawerTitle, {
         children: [_jsx("span", {
           children: lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.TITLE'
           })
         }), _jsx(Button, {
           view: "ghost",
@@ -146,7 +146,7 @@ export const CreateVariantDrawer = ({
             size: "small"
           }),
           "aria-label": lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.CLOSE'
           }),
           onClick: onClose
         })]
@@ -157,7 +157,7 @@ export const CreateVariantDrawer = ({
         children: [_jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL'
             })
           }), _jsx(Chips, {
             children: RATIOS.map(item => _jsx(Chip, {
@@ -170,7 +170,7 @@ export const CreateVariantDrawer = ({
         }), _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL'
             })
           }), _jsxs(Columns, {
             "$sizes": "auto 1fr",
@@ -182,14 +182,14 @@ export const CreateVariantDrawer = ({
                 "$active": dimension === 'width',
                 onClick: () => setDimension('width'),
                 children: lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH'
+                  message: 'SMART.MEDIA_STORE.CREATE_CROP.WIDTH'
                 })
               }), _jsx(SegmentItem, {
                 type: "button",
                 "$active": dimension === 'height',
                 onClick: () => setDimension('height'),
                 children: lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT'
+                  message: 'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT'
                 })
               })]
             }), _jsx(NativeInput, {
@@ -216,7 +216,7 @@ export const CreateVariantDrawer = ({
         }), isJpeg && _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL'
             })
           }), _jsx(NativeInput, {
             type: "number",
@@ -228,7 +228,7 @@ export const CreateVariantDrawer = ({
           })]
         }), ratioExists && _jsx(Text, {
           children: lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS'
           })
         }), _jsx(Button, {
           color: "primary",
@@ -237,26 +237,26 @@ export const CreateVariantDrawer = ({
           isLoading: isCreating,
           onClick: () => void handleCreate(),
           children: lang({
-            message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON'
+            message: 'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON'
           })
         }), _jsxs("div", {
           children: [_jsx(FieldLabel, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL'
             })
-          }), existingVariants.length === 0 ? _jsx(Text, {
+          }), existingCrops.length === 0 ? _jsx(Text, {
             children: lang({
-              message: 'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS'
+              message: 'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS'
             })
-          }) : _jsx(VariantStrip, {
-            children: existingVariants.map(variant => _jsxs(VariantThumb, {
+          }) : _jsx(CropStrip, {
+            children: existingCrops.map(crop => _jsxs(CropThumb, {
               children: [_jsx(TileImage, {
-                src: getThumbUrl(variant),
-                alt: variant.filename
-              }), _jsx(VariantThumbCaption, {
-                children: getRatioLabel(variant) || variant.filename
+                src: getThumbUrl(crop),
+                alt: crop.filename
+              }), _jsx(CropThumbCaption, {
+                children: getRatioLabel(crop) || crop.filename
               })]
-            }, variant.uuid))
+            }, crop.uuid))
           })]
         })]
       })

package/MediaStore/MediaStore.d.ts

@@ -1,12 +1,8 @@
 import { type FC } from 'react';
-export type MediaStoreProps = {
-    /** Application code whose media files are listed. */
-    application: string;
-    /** Initial page to load (zero-based). Defaults to 0. */
-    page?: number;
-    /** Page size. Defaults to 30. */
-    perPage?: number;
-    /** Called with the chosen file URL (original or variant). */
-    onSelect: (url: string) => void;
-};
+import type { MediaStoreProps } from './types';
+/**
+ * Controlled media gallery: the parent owns the current page (and page size)
+ * and is notified of navigation via `onPageChange`. For a self-contained
+ * version that keeps the page in internal state, use `MediaStorePaginated`.
+ */
 export declare const MediaStore: FC<MediaStoreProps>;

package/MediaStore/MediaStore.js

@@ -1,22 +1,28 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, useToast } from '@pushwoosh/dumb-components';
-import { Horizontal } from '@pushwoosh/kit-helpers';
+import { Horizontal, useAsync } from '@pushwoosh/kit-helpers';
 import { CheckIcon, EditIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
-import { CreateVariantDrawer } from './CreateVariantDrawer';
+import { CreateCropDrawer } from './CreateCropDrawer';
 import { getRatioLabel, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage, VariantBadge } from './styled';
-const DEFAULT_PER_PAGE = 30;
+import { CropBadge, Dropzone, EmptyState, Grid, HiddenInput, Tile, TileActions, TileImage } from './styled';
 const UPLOAD_PATH = '/api/media/upload';
+/**
+ * Controlled media gallery: the parent owns the current page (and page size)
+ * and is notified of navigation via `onPageChange`. For a self-contained
+ * version that keeps the page in internal state, use `MediaStorePaginated`.
+ */
 export const MediaStore = ({
   application,
-  page: initialPage = 0,
-  perPage = DEFAULT_PER_PAGE,
+  page,
+  perPage,
+  onPageChange,
   onSelect
 }) => {
+  var _listAsync$value, _listAsync$value2;
   const lang = useLang();
   const {
     rpcGateway,
@@ -29,51 +35,54 @@ export const MediaStore = ({
     openToast
   } = useToast();
   const uploadInputRef = useRef(null);
-  const loadTokenRef = useRef(0);
-  const [files, setFiles] = useState([]);
-  const [variantsByUuid, setVariantsByUuid] = useState({});
-  const [loading, setLoading] = useState(false);
-  const [page, setPage] = useState(initialPage);
-  const [total, setTotal] = useState(0);
+  // `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.
+  const [reloadToken, setReloadToken] = useState(0);
   const [isUploading, setIsUploading] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
-  const [createVariantFor, setCreateVariantFor] = useState(null);
-  const fetchFiles = useCallback(async p => {
-    // Guard against races: a newer load invalidates in-flight results of older ones.
-    const token = ++loadTokenRef.current;
-    setLoading(true);
-    setVariantsByUuid({});
-    let originals;
-    try {
-      const response = await rpcGateway.mediaFiles.List({
-        application,
-        page: p,
-        perPage
+  const [createCropFor, setCreateCropFor] = useState(null);
+  const listAsync = useAsync(async () => {
+    const response = await rpcGateway.mediaFiles.List({
+      application,
+      page,
+      perPage
+    });
+    // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
+    return {
+      files: response.files ?? [],
+      total: response.total
+    };
+  }, [rpcGateway, application, page, perPage, reloadToken]);
+  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;
+  useEffect(() => {
+    if (listAsync.error) {
+      openToast({
+        title: listAsync.error.message || lang({
+          message: 'SMART.MEDIA_STORE.LOAD_ERROR'
+        }),
+        type: 'error'
       });
-      if (token !== loadTokenRef.current) return;
-      // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
-      originals = response.files ?? [];
-      setFiles(originals);
-      setTotal(response.total);
-      setPage(response.page);
-    } catch (error) {
-      if (token === loadTokenRef.current) {
-        openToast({
-          title: error.message || lang({
-            message: 'SMART.MEDIA_STORE.LOAD_ERROR'
-          }),
-          type: 'error'
-        });
-      }
-      return;
-    } finally {
-      if (token === loadTokenRef.current) {
-        setLoading(false);
-      }
     }
-    // Originals are already on screen. The List of originals carries no variant
-    // count, so fetch each original's variants in the background and let the
-    // "N variants" badge appear per file as soon as its request resolves.
+  }, [listAsync.error, openToast, lang]);
+  // The List of originals carries no crop count, so once a page of originals
+  // resolves, fetch each one's crops in the background and let the
+  // "N crops" badge appear per file as soon as its request resolves. The
+  // cleanup flag drops results of a page that has since been replaced.
+  useEffect(() => {
+    var _listAsync$value3;
+    const originals = (_listAsync$value3 = listAsync.value) === null || _listAsync$value3 === void 0 ? void 0 : _listAsync$value3.files;
+    if (!originals) return undefined;
+    setCropsByUuid({});
+    let cancelled = false;
     originals.forEach(file => {
       void (async () => {
         try {
@@ -81,8 +90,8 @@ export const MediaStore = ({
             application,
             parentUuid: file.uuid
           });
-          if (token !== loadTokenRef.current) return;
-          setVariantsByUuid(prev => ({
+          if (cancelled) return;
+          setCropsByUuid(prev => ({
             ...prev,
             [file.uuid]: response.files ?? []
           }));
@@ -91,10 +100,10 @@ export const MediaStore = ({
         }
       })();
     });
-  }, [rpcGateway, application, perPage, openToast, lang]);
-  useEffect(() => {
-    void fetchFiles(initialPage);
-  }, [fetchFiles, initialPage]);
+    return () => {
+      cancelled = true;
+    };
+  }, [listAsync.value, rpcGateway, application]);
   const uploadFiles = async selected => {
     const images = selected.filter(file => file.type.startsWith('image/'));
     if (images.length === 0) return;
@@ -120,7 +129,13 @@ export const MediaStore = ({
           }),
           type: 'success'
         });
-        void fetchFiles(0);
+        // 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 {
+          onPageChange(0);
+        }
       }
       if (failed > 0) {
         openToast({
@@ -137,10 +152,10 @@ export const MediaStore = ({
       setIsUploading(false);
     }
   };
-  const handleVariantCreated = (parentUuid, variant) => {
-    setVariantsByUuid(prev => ({
+  const handleCropCreated = (parentUuid, crop) => {
+    setCropsByUuid(prev => ({
       ...prev,
-      [parentUuid]: [...(prev[parentUuid] ?? []), variant]
+      [parentUuid]: [...(prev[parentUuid] ?? []), crop]
     }));
   };
   const totalPages = Math.ceil(total / perPage);
@@ -188,18 +203,18 @@ export const MediaStore = ({
     }), !loading && files.length > 0 && _jsxs(_Fragment, {
       children: [_jsx(Grid, {
         children: files.map(file => {
-          const variants = variantsByUuid[file.uuid] ?? [];
+          const crops = cropsByUuid[file.uuid] ?? [];
           return _jsxs(Tile, {
             children: [_jsx(TileImage, {
               src: getThumbUrl(file),
               alt: file.filename
-            }), variants.length > 0 && _jsx(VariantBadge, {
+            }), crops.length > 0 && _jsx(CropBadge, {
               children: lang({
-                message: 'SMART.MEDIA_STORE.VARIANTS_BADGE',
-                count: variants.length
+                message: 'SMART.MEDIA_STORE.CROPS_BADGE',
+                count: crops.length
               })
             }), _jsxs(TileActions, {
-              children: [variants.length > 0 ? _jsx(DropdownMenuButton, {
+              children: [crops.length > 0 ? _jsx(DropdownMenuButton, {
                 color: "secondary",
                 size: "compact",
                 icon: _jsx(CheckIcon, {
@@ -212,10 +227,10 @@ export const MediaStore = ({
                     children: lang({
                       message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
                     })
-                  }), variants.map(variant => _jsx(DropdownMenuItem, {
-                    onClick: () => onSelect(variant.url),
-                    children: getRatioLabel(variant) || variant.filename
-                  }, variant.uuid))]
+                  }), crops.map(crop => _jsx(DropdownMenuItem, {
+                    onClick: () => onSelect(crop.url),
+                    children: getRatioLabel(crop) || crop.filename
+                  }, crop.uuid))]
                 })
               }) : _jsx(Button, {
                 color: "secondary",
@@ -235,9 +250,9 @@ export const MediaStore = ({
                   view: "lined"
                 }),
                 "aria-label": lang({
-                  message: 'SMART.MEDIA_STORE.CREATE_VARIANT_HINT'
+                  message: 'SMART.MEDIA_STORE.CREATE_CROP_HINT'
                 }),
-                onClick: () => setCreateVariantFor(file)
+                onClick: () => setCreateCropFor(file)
               })]
             })]
           }, file.uuid);
@@ -254,7 +269,7 @@ export const MediaStore = ({
           color: "secondary",
           size: "field",
           isDisabled: page <= 0,
-          onClick: () => void fetchFiles(page - 1),
+          onClick: () => onPageChange(page - 1),
           children: lang({
             message: 'SMART.MEDIA_STORE.PREV_BUTTON'
           })
@@ -265,19 +280,19 @@ export const MediaStore = ({
           color: "secondary",
           size: "field",
           isDisabled: page + 1 >= totalPages,
-          onClick: () => void fetchFiles(page + 1),
+          onClick: () => onPageChange(page + 1),
           children: lang({
             message: 'SMART.MEDIA_STORE.NEXT_BUTTON'
           })
         })]
       })]
-    }), _jsx(CreateVariantDrawer, {
+    }), _jsx(CreateCropDrawer, {
       application: application,
-      original: createVariantFor,
-      isOpen: createVariantFor !== null,
-      existingVariants: createVariantFor ? variantsByUuid[createVariantFor.uuid] ?? [] : [],
-      onClose: () => setCreateVariantFor(null),
-      onCreated: handleVariantCreated
+      original: createCropFor,
+      isOpen: createCropFor !== null,
+      existingCrops: createCropFor ? cropsByUuid[createCropFor.uuid] ?? [] : [],
+      onClose: () => setCreateCropFor(null),
+      onCreated: handleCropCreated
     })]
   });
 };

package/MediaStore/MediaStorePaginated.d.ts

@@ -0,0 +1,8 @@
+import { type FC } from 'react';
+import type { MediaStorePaginatedProps } from './types';
+/**
+ * Self-contained {@link MediaStore} that owns the current page in internal
+ * state. Use this when the host has no opinion on pagination state; reach for
+ * `MediaStore` directly to drive the page from the URL or another store.
+ */
+export declare const MediaStorePaginated: FC<MediaStorePaginatedProps>;

package/MediaStore/MediaStorePaginated.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { MediaStore } from './MediaStore';
+const DEFAULT_PER_PAGE = 30;
+/**
+ * Self-contained {@link MediaStore} that owns the current page in internal
+ * state. Use this when the host has no opinion on pagination state; reach for
+ * `MediaStore` directly to drive the page from the URL or another store.
+ */
+export const MediaStorePaginated = ({
+  application,
+  initialPage = 0,
+  perPage = DEFAULT_PER_PAGE,
+  onSelect
+}) => {
+  const [page, setPage] = useState(initialPage);
+  return _jsx(MediaStore, {
+    application: application,
+    page: page,
+    perPage: perPage,
+    onPageChange: setPage,
+    onSelect: onSelect
+  });
+};

package/MediaStore/index.d.ts

@@ -1 +1,3 @@
-export { MediaStore, type MediaStoreProps } from './MediaStore';
+export { MediaStore } from './MediaStore';
+export { MediaStorePaginated } from './MediaStorePaginated';
+export type { MediaStoreProps, MediaStorePaginatedProps } from './types';

package/MediaStore/index.js

@@ -1 +1,2 @@
-export { MediaStore } from './MediaStore';
+export { MediaStore } from './MediaStore';
+export { MediaStorePaginated } from './MediaStorePaginated';

package/MediaStore/mediaFile.utils.d.ts

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

package/MediaStore/mediaFile.utils.js

@@ -3,7 +3,7 @@ export const getThumbUrl = file => {
   var _file$meta;
   return ((_file$meta = file.meta) === null || _file$meta === void 0 ? void 0 : _file$meta.type) === 'imageMeta' ? file.meta.data.thumbnailUrl : file.url;
 };
-/** Aspect-ratio label (e.g. "16:9") for a variant; empty for originals. */
+/** Aspect-ratio label (e.g. "16:9") for a crop; empty for originals. */
 export const getRatioLabel = file => {
   var _file$meta2;
   return ((_file$meta2 = file.meta) === null || _file$meta2 === void 0 ? void 0 : _file$meta2.type) === 'imageMeta' ? file.meta.data.ratio : '';

package/MediaStore/polyglot/messages_en.js

@@ -9,20 +9,20 @@ export const messages = {
   'SMART.MEDIA_STORE.LOAD_ERROR': 'Failed to load media files',
   'SMART.MEDIA_STORE.UPLOAD_ERROR': 'Failed to upload image',
   'SMART.MEDIA_STORE.UPLOAD_SUCCESS': 'Image uploaded',
-  'SMART.MEDIA_STORE.VARIANTS_BADGE': '{{count}} var.',
+  'SMART.MEDIA_STORE.CROPS_BADGE': '{{count}} cr.',
   'SMART.MEDIA_STORE.SELECT_ORIGINAL': 'Original',
-  'SMART.MEDIA_STORE.CREATE_VARIANT_HINT': 'Create variants',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE': 'Create variant',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE': 'Close',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL': 'Aspect ratio',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL': 'Size',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH': 'Width',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT': 'Height',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL': 'JPEG quality (1–100)',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON': 'Create variant',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS': 'A variant with this aspect ratio already exists',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL': 'Existing variants',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS': 'No variants yet',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS': 'Variant created',
-  'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR': 'Failed to create variant'
+  'SMART.MEDIA_STORE.CREATE_CROP_HINT': 'Create crops',
+  'SMART.MEDIA_STORE.CREATE_CROP.TITLE': 'Create crop',
+  'SMART.MEDIA_STORE.CREATE_CROP.CLOSE': 'Close',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_LABEL': 'Aspect ratio',
+  'SMART.MEDIA_STORE.CREATE_CROP.SIZE_LABEL': 'Size',
+  'SMART.MEDIA_STORE.CREATE_CROP.WIDTH': 'Width',
+  'SMART.MEDIA_STORE.CREATE_CROP.HEIGHT': 'Height',
+  'SMART.MEDIA_STORE.CREATE_CROP.QUALITY_LABEL': 'JPEG quality (1–100)',
+  'SMART.MEDIA_STORE.CREATE_CROP.CREATE_BUTTON': 'Create crop',
+  'SMART.MEDIA_STORE.CREATE_CROP.RATIO_EXISTS': 'A crop with this aspect ratio already exists',
+  'SMART.MEDIA_STORE.CREATE_CROP.EXISTING_LABEL': 'Existing crops',
+  'SMART.MEDIA_STORE.CREATE_CROP.NO_CROPS': 'No crops yet',
+  'SMART.MEDIA_STORE.CREATE_CROP.SUCCESS': 'Crop created',
+  'SMART.MEDIA_STORE.CREATE_CROP.ERROR': 'Failed to create crop'
 };

package/MediaStore/polyglot/messages_ru.js

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

package/MediaStore/polyglot/types.d.ts

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

package/MediaStore/styled.d.ts

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

package/MediaStore/styled.js

@@ -12,8 +12,8 @@ export const TileImage = styled.img.withConfig({
   displayName: "TileImage",
   componentId: "sc-1d9kmgw-2"
 })(["width:100%;aspect-ratio:1;object-fit:cover;display:block;"]);
-export const VariantBadge = styled.span.withConfig({
-  displayName: "VariantBadge",
+export const CropBadge = styled.span.withConfig({
+  displayName: "CropBadge",
   componentId: "sc-1d9kmgw-3"
 })(["position:absolute;top:6px;right:6px;font-size:10px;font-weight:", ";line-height:1;color:", ";background:", ";border-radius:20px;padding:3px 7px;pointer-events:none;"], FontWeight.BOLD, Color.CLEAR, Color.PRIMARY);
 export const TileActions = styled.div.withConfig({
@@ -36,7 +36,7 @@ export const HiddenInput = styled.input.withConfig({
   displayName: "HiddenInput",
   componentId: "sc-1d9kmgw-7"
 })(["display:none;"]);
-/* ---------- CreateVariantDrawer ---------- */
+/* ---------- CreateCropDrawer ---------- */
 export const PreviewStage = styled.div.withConfig({
   displayName: "PreviewStage",
   componentId: "sc-1d9kmgw-8"
@@ -81,15 +81,15 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
   $active
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
-export const VariantStrip = styled.div.withConfig({
-  displayName: "VariantStrip",
+export const CropStrip = styled.div.withConfig({
+  displayName: "CropStrip",
   componentId: "sc-1d9kmgw-16"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
-export const VariantThumb = styled.div.withConfig({
-  displayName: "VariantThumb",
+export const 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);
-export const VariantThumbCaption = styled.div.withConfig({
-  displayName: "VariantThumbCaption",
+export const CropThumbCaption = styled.div.withConfig({
+  displayName: "CropThumbCaption",
   componentId: "sc-1d9kmgw-18"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);

package/MediaStore/types.d.ts

@@ -0,0 +1,22 @@
+export type MediaStoreProps = {
+    /** Application code whose media files are listed. */
+    application: string;
+    /** Current page (zero-based). Controlled by the parent. */
+    page: number;
+    /** Page size. */
+    perPage: number;
+    /** Called when the user requests a different page. */
+    onPageChange: (page: number) => void;
+    /** Called with the chosen file URL (original or crop). */
+    onSelect: (url: string) => void;
+};
+export type MediaStorePaginatedProps = {
+    /** Application code whose media files are listed. */
+    application: string;
+    /** Initial page to load (zero-based). Defaults to 0. */
+    initialPage?: number;
+    /** Page size. Defaults to 30. */
+    perPage?: number;
+    /** Called with the chosen file URL (original or crop). */
+    onSelect: (url: string) => void;
+};

package/MediaStore/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -49,5 +49,5 @@
     "react": "^16.14.0 || ^18.0.0",
     "react-dom": "^16.14.0 || ^18.0.0"
   },
-  "version": "1.1.0"
+  "version": "1.1.2"
 }