@pushwoosh/smart-components-kit 1.0.88 → 1.0.90

package/ExportCSV/ExportCsvBanner/ExportCsvBanner.js

@@ -4,6 +4,7 @@ import { Color, ShapeRadius } from '@pushwoosh/kit-constants';
 import { Horizontal } from '@pushwoosh/kit-helpers';
 import { DangerTriangleIcon, DownloadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
+import { useLang } from '../polyglot';
 import { useExportService } from '../useExportService';
 import { useExportVisibility } from './hooks/useExportVisibility';
 export const ExportCsvBanner = ({
@@ -14,6 +15,7 @@ export const ExportCsvBanner = ({
   isKeepPageOpenWarning,
   onClose
 }) => {
+  const lang = useLang();
   const {
     getLastTasks,
     getStatus,
@@ -72,13 +74,17 @@ export const ExportCsvBanner = ({
             status,
             filename: data.file,
             args,
-            progressTitle: 'Exporting list:',
-            resultSubTitle: 'Result:'
+            progressTitle: lang({
+              message: 'SMART.EXPORT_CSV.PROGRESS_TITLE'
+            }),
+            resultSubTitle: lang({
+              message: 'SMART.EXPORT_CSV.RESULT_SUBTITLE'
+            })
           });
         }
       });
     }
-  }, [getLastTasks, isHidden, lastTasksParams, updateExportTask]);
+  }, [getLastTasks, isHidden, lastTasksParams, updateExportTask, lang]);
   const handleClose = useCallback(() => {
     hide();
     onClose === null || onClose === void 0 || onClose();
@@ -99,7 +105,9 @@ export const ExportCsvBanner = ({
     "$bgColor": Color.CLEAR
   }, status === 'STATUS_SUCCESS' && React.createElement(ExportResult, {
     type: "success",
-    title: "Exporting complete",
+    title: lang({
+      message: 'SMART.EXPORT_CSV.SUCCESS_TITLE'
+    }),
     subtitle: `${resultSubTitle} ${filename}`,
     handleClose: handleClose,
     rightSlot: React.createElement("a", {
@@ -112,7 +120,9 @@ export const ExportCsvBanner = ({
         size: "small",
         view: "filled"
       })
-    }, "Download CSV"))
+    }, lang({
+      message: 'SMART.EXPORT_CSV.DOWNLOAD'
+    })))
   }), status === 'STATUS_PENDING' && (isKeepPageOpenWarning ? React.createElement(ProgressBar, {
     title: progressTitle,
     percentValue: progress,
@@ -120,14 +130,20 @@ export const ExportCsvBanner = ({
       "$color": Color.WARNING,
       "$variant": "h5",
       "$uppercase": true
-    }, "Keep page open during export")
+    }, lang({
+      message: 'SMART.EXPORT_CSV.KEEP_PAGE_OPEN'
+    }))
   }) : React.createElement(ProgressBar, {
     title: progressTitle,
     percentValue: progress
   })), status === 'STATUS_FAILED' && React.createElement(ExportResult, {
     type: "error",
-    title: "Export failed",
-    subtitle: "Please try again",
+    title: lang({
+      message: 'SMART.EXPORT_CSV.FAILED_TITLE'
+    }),
+    subtitle: lang({
+      message: 'SMART.EXPORT_CSV.FAILED_SUBTITLE'
+    }),
     leftSlotIcon: React.createElement(DangerTriangleIcon, {
       size: "medium",
       view: "filled"

package/ExportCSV/polyglot/index.d.ts

@@ -0,0 +1,2 @@
+import { type ExportCsvMessages } from './types';
+export declare const Lang: import("react").FC<import("@pushwoosh/dumb-components/polyglot").LangProps<ExportCsvMessages>>, useLang: () => (props: import("@pushwoosh/dumb-components/polyglot").LangProps<ExportCsvMessages>) => string;

package/ExportCSV/polyglot/index.js

@@ -0,0 +1,10 @@
+import { createLang } from '@pushwoosh/dumb-components/polyglot';
+import { messages as en } from './messages_en';
+import { messages as ru } from './messages_ru';
+export const {
+  Lang,
+  useLang
+} = createLang({
+  en,
+  ru
+});

package/ExportCSV/polyglot/messages_en.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type ExportCsvMessages } from './types';
+export declare const messages: LangMessages<ExportCsvMessages>;

package/ExportCSV/polyglot/messages_en.js

@@ -0,0 +1,9 @@
+export const messages = {
+  'SMART.EXPORT_CSV.PROGRESS_TITLE': 'Exporting list:',
+  'SMART.EXPORT_CSV.RESULT_SUBTITLE': 'Result:',
+  'SMART.EXPORT_CSV.SUCCESS_TITLE': 'Exporting complete',
+  'SMART.EXPORT_CSV.DOWNLOAD': 'Download CSV',
+  'SMART.EXPORT_CSV.KEEP_PAGE_OPEN': 'Keep page open during export',
+  'SMART.EXPORT_CSV.FAILED_TITLE': 'Export failed',
+  'SMART.EXPORT_CSV.FAILED_SUBTITLE': 'Please try again'
+};

package/ExportCSV/polyglot/messages_ru.d.ts

@@ -0,0 +1,3 @@
+import type { LangMessages } from '@pushwoosh/dumb-components/polyglot';
+import { type ExportCsvMessages } from './types';
+export declare const messages: LangMessages<ExportCsvMessages>;

package/ExportCSV/polyglot/messages_ru.js

@@ -0,0 +1,9 @@
+export const messages = {
+  'SMART.EXPORT_CSV.PROGRESS_TITLE': 'Экспорт списка:',
+  'SMART.EXPORT_CSV.RESULT_SUBTITLE': 'Результат:',
+  'SMART.EXPORT_CSV.SUCCESS_TITLE': 'Экспорт завершён',
+  'SMART.EXPORT_CSV.DOWNLOAD': 'Скачать CSV',
+  'SMART.EXPORT_CSV.KEEP_PAGE_OPEN': 'Не закрывайте страницу во время экспорта',
+  'SMART.EXPORT_CSV.FAILED_TITLE': 'Ошибка экспорта',
+  'SMART.EXPORT_CSV.FAILED_SUBTITLE': 'Попробуйте ещё раз'
+};

package/ExportCSV/polyglot/types.d.ts

@@ -0,0 +1,10 @@
+import type { NoParams } from '@pushwoosh/dumb-components/polyglot';
+export type ExportCsvMessages = {
+    'SMART.EXPORT_CSV.PROGRESS_TITLE': NoParams;
+    'SMART.EXPORT_CSV.RESULT_SUBTITLE': NoParams;
+    'SMART.EXPORT_CSV.SUCCESS_TITLE': NoParams;
+    'SMART.EXPORT_CSV.DOWNLOAD': NoParams;
+    'SMART.EXPORT_CSV.KEEP_PAGE_OPEN': NoParams;
+    'SMART.EXPORT_CSV.FAILED_TITLE': NoParams;
+    'SMART.EXPORT_CSV.FAILED_SUBTITLE': NoParams;
+};

package/ExportCSV/polyglot/types.js

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

package/MediaStore/CreateVariantDrawer.d.ts

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

package/MediaStore/CreateVariantDrawer.js

@@ -0,0 +1,216 @@
+import React, { useEffect, useState } from 'react';
+import { Button, Drawer, DrawerBody, DrawerHeader, DrawerTitle, NativeInput, useToast } from '@pushwoosh/dumb-components';
+import { Columns, Vertical } from '@pushwoosh/kit-helpers';
+import { CloseIcon } from '@pushwoosh/kit-icons';
+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';
+const RATIOS = [{
+  value: 'ASPECT_RATIO_1_1',
+  label: '1:1',
+  ar: 1
+}, {
+  value: 'ASPECT_RATIO_4_3',
+  label: '4:3',
+  ar: 4 / 3
+}, {
+  value: 'ASPECT_RATIO_3_2',
+  label: '3:2',
+  ar: 3 / 2
+}, {
+  value: 'ASPECT_RATIO_4_5',
+  label: '4:5',
+  ar: 4 / 5
+}, {
+  value: 'ASPECT_RATIO_5_4',
+  label: '5:4',
+  ar: 5 / 4
+}, {
+  value: 'ASPECT_RATIO_16_9',
+  label: '16:9',
+  ar: 16 / 9
+}, {
+  value: 'ASPECT_RATIO_16_10',
+  label: '16:10',
+  ar: 16 / 10
+}, {
+  value: 'ASPECT_RATIO_21_9',
+  label: '21:9',
+  ar: 21 / 9
+}, {
+  value: 'ASPECT_RATIO_9_16',
+  label: '9:16',
+  ar: 9 / 16
+}];
+const DEFAULT_RATIO = 'ASPECT_RATIO_16_9';
+const DEFAULT_SIZE = '1080';
+const DEFAULT_QUALITY = '90';
+export const CreateVariantDrawer = ({
+  application,
+  original,
+  isOpen,
+  existingVariants,
+  onClose,
+  onCreated
+}) => {
+  const lang = useLang();
+  const {
+    rpcGateway
+  } = useSPAContext();
+  const {
+    openToast
+  } = useToast();
+  const [ratio, setRatio] = useState(DEFAULT_RATIO);
+  const [dimension, setDimension] = useState('width');
+  const [size, setSize] = useState(DEFAULT_SIZE);
+  const [quality, setQuality] = useState(DEFAULT_QUALITY);
+  const [isCreating, setIsCreating] = useState(false);
+  // 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.
+  useEffect(() => {
+    if (original) {
+      setRatio(DEFAULT_RATIO);
+      setDimension('width');
+      setSize(DEFAULT_SIZE);
+      setQuality(DEFAULT_QUALITY);
+    }
+  }, [original]);
+  const isJpeg = /jpe?g/i.test((original === null || original === void 0 ? void 0 : original.mimeType) ?? '');
+  const sizeValue = Number(size);
+  const isSizeValid = Number.isFinite(sizeValue) && sizeValue > 0;
+  const qualityValue = Number(quality);
+  const isQualityValid = !isJpeg || Number.isFinite(qualityValue) && qualityValue >= 1 && qualityValue <= 100;
+  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 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.
+    const parent = original;
+    setIsCreating(true);
+    try {
+      const response = await rpcGateway.mediaFiles.CreateVariant({
+        application,
+        uuid: parent.uuid,
+        ratio,
+        size: {
+          type: dimension,
+          data: sizeValue
+        },
+        ...(isJpeg ? {
+          quality: qualityValue
+        } : {})
+      });
+      openToast({
+        title: lang({
+          message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SUCCESS'
+        }),
+        type: 'success'
+      });
+      onCreated(parent.uuid, response.file);
+    } catch (error) {
+      openToast({
+        title: error.message || lang({
+          message: 'SMART.MEDIA_STORE.CREATE_VARIANT.ERROR'
+        }),
+        type: 'error'
+      });
+    } finally {
+      setIsCreating(false);
+    }
+  };
+  return React.createElement(Drawer, {
+    size: "medium",
+    isOpen: isOpen,
+    onClose: onClose
+  }, React.createElement(DrawerHeader, null, React.createElement(DrawerTitle, null, React.createElement("span", null, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.TITLE'
+  })), React.createElement(Button, {
+    view: "ghost",
+    color: "secondary",
+    size: "compact",
+    icon: React.createElement(CloseIcon, {
+      size: "small"
+    }),
+    "aria-label": lang({
+      message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CLOSE'
+    }),
+    onClick: onClose
+  }))), React.createElement(DrawerBody, null, original && React.createElement(Vertical, {
+    "$gap": 20
+  }, React.createElement("div", null, React.createElement(FieldLabel, null, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_LABEL'
+  })), React.createElement(Chips, null, RATIOS.map(item => React.createElement(Chip, {
+    key: item.value,
+    type: "button",
+    "$active": item.value === ratio,
+    onClick: () => setRatio(item.value)
+  }, item.label)))), React.createElement("div", null, React.createElement(FieldLabel, null, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.SIZE_LABEL'
+  })), React.createElement(Columns, {
+    "$sizes": "auto 1fr",
+    "$gap": 8,
+    "$alignItems": "center"
+  }, React.createElement(Segment, null, React.createElement(SegmentItem, {
+    type: "button",
+    "$active": dimension === 'width',
+    onClick: () => setDimension('width')
+  }, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.WIDTH'
+  })), React.createElement(SegmentItem, {
+    type: "button",
+    "$active": dimension === 'height',
+    onClick: () => setDimension('height')
+  }, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.HEIGHT'
+  }))), React.createElement(NativeInput, {
+    type: "number",
+    min: 1,
+    value: size,
+    "$isErrored": !isSizeValid,
+    onChange: event => setSize(event.target.value)
+  }))), React.createElement(Vertical, {
+    "$gap": 6
+  }, React.createElement(PreviewStage, null, React.createElement(PreviewFrame, {
+    "$ratio": selectedRatio.ar
+  }, React.createElement(PreviewImage, {
+    src: original.url,
+    alt: original.filename
+  }))), isSizeValid && React.createElement(Text, null, selectedRatio.label, ' · ', outputWidth, ' × ', outputHeight)), isJpeg && React.createElement("div", null, React.createElement(FieldLabel, null, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.QUALITY_LABEL'
+  })), React.createElement(NativeInput, {
+    type: "number",
+    min: 1,
+    max: 100,
+    value: quality,
+    "$isErrored": !isQualityValid,
+    onChange: event => setQuality(event.target.value)
+  })), ratioExists && React.createElement(Text, null, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.RATIO_EXISTS'
+  })), React.createElement(Button, {
+    color: "primary",
+    size: "field",
+    isDisabled: !isSizeValid || !isQualityValid || ratioExists,
+    isLoading: isCreating,
+    onClick: () => void handleCreate()
+  }, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.CREATE_BUTTON'
+  })), React.createElement("div", null, React.createElement(FieldLabel, null, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.EXISTING_LABEL'
+  })), existingVariants.length === 0 ? React.createElement(Text, null, lang({
+    message: 'SMART.MEDIA_STORE.CREATE_VARIANT.NO_VARIANTS'
+  })) : React.createElement(VariantStrip, null, existingVariants.map(variant => React.createElement(VariantThumb, {
+    key: variant.uuid
+  }, React.createElement(TileImage, {
+    src: getThumbUrl(variant),
+    alt: variant.filename
+  }), React.createElement(VariantThumbCaption, null, getRatioLabel(variant) || variant.filename))))))));
+};

package/MediaStore/MediaStore.d.ts

@@ -0,0 +1,12 @@
+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;
+};
+export declare const MediaStore: FC<MediaStoreProps>;

package/MediaStore/MediaStore.js

@@ -0,0 +1,258 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { Button, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, useToast } from '@pushwoosh/dumb-components';
+import { Horizontal } 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 { 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;
+const UPLOAD_PATH = '/api/media/upload';
+export const MediaStore = ({
+  application,
+  page: initialPage = 0,
+  perPage = DEFAULT_PER_PAGE,
+  onSelect
+}) => {
+  const lang = useLang();
+  const {
+    rpcGateway,
+    httpClient,
+    helpers: {
+      getApiOrigin
+    }
+  } = useSPAContext();
+  const {
+    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);
+  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
+      });
+      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.
+    originals.forEach(file => {
+      void (async () => {
+        try {
+          const response = await rpcGateway.mediaFiles.List({
+            application,
+            parentUuid: file.uuid
+          });
+          if (token !== loadTokenRef.current) return;
+          setVariantsByUuid(prev => ({
+            ...prev,
+            [file.uuid]: response.files ?? []
+          }));
+        } catch {
+          // Ignore — the badge just won't appear for this file.
+        }
+      })();
+    });
+  }, [rpcGateway, application, perPage, openToast, lang]);
+  useEffect(() => {
+    void fetchFiles(initialPage);
+  }, [fetchFiles, initialPage]);
+  const uploadFiles = async selected => {
+    const images = selected.filter(file => file.type.startsWith('image/'));
+    if (images.length === 0) return;
+    setIsUploading(true);
+    try {
+      const results = await Promise.allSettled(images.map(file => {
+        const formData = new FormData();
+        formData.append('application', application);
+        formData.append('file', file);
+        formData.append('filename', file.name);
+        return httpClient.post(`${getApiOrigin('rpc-api')}${UPLOAD_PATH}`, {
+          body: formData,
+          params: undefined,
+          query: undefined,
+          withAuthorization: true
+        });
+      }));
+      const failed = results.filter(result => result.status === 'rejected').length;
+      if (failed < images.length) {
+        openToast({
+          title: lang({
+            message: 'SMART.MEDIA_STORE.UPLOAD_SUCCESS'
+          }),
+          type: 'success'
+        });
+        void fetchFiles(0);
+      }
+      if (failed > 0) {
+        openToast({
+          title: lang({
+            message: 'SMART.MEDIA_STORE.UPLOAD_ERROR'
+          }),
+          type: 'error'
+        });
+      }
+    } finally {
+      if (uploadInputRef.current) {
+        uploadInputRef.current.value = '';
+      }
+      setIsUploading(false);
+    }
+  };
+  const handleVariantCreated = (parentUuid, variant) => {
+    setVariantsByUuid(prev => ({
+      ...prev,
+      [parentUuid]: [...(prev[parentUuid] ?? []), variant]
+    }));
+  };
+  const totalPages = Math.ceil(total / perPage);
+  return React.createElement(React.Fragment, null, React.createElement(Dropzone, {
+    type: "button",
+    "$dragOver": isDragOver,
+    disabled: isUploading,
+    onClick: () => {
+      var _uploadInputRef$curre;
+      return (_uploadInputRef$curre = uploadInputRef.current) === null || _uploadInputRef$curre === void 0 ? void 0 : _uploadInputRef$curre.click();
+    },
+    onDragOver: event => {
+      event.preventDefault();
+      setIsDragOver(true);
+    },
+    onDragLeave: () => setIsDragOver(false),
+    onDrop: event => {
+      event.preventDefault();
+      setIsDragOver(false);
+      void uploadFiles(Array.from(event.dataTransfer.files));
+    }
+  }, React.createElement(UploadIcon, {
+    size: "medium",
+    view: "lined"
+  }), isUploading ? lang({
+    message: 'SMART.MEDIA_STORE.UPLOADING'
+  }) : lang({
+    message: 'SMART.MEDIA_STORE.DROPZONE_HINT'
+  })), React.createElement(HiddenInput, {
+    ref: uploadInputRef,
+    type: "file",
+    accept: "image/*",
+    multiple: true,
+    onChange: event => void uploadFiles(Array.from(event.target.files ?? []))
+  }), loading && React.createElement(EmptyState, null, lang({
+    message: 'SMART.MEDIA_STORE.LOADING'
+  })), !loading && files.length === 0 && React.createElement(EmptyState, null, lang({
+    message: 'SMART.MEDIA_STORE.EMPTY'
+  })), !loading && files.length > 0 && React.createElement(React.Fragment, null, React.createElement(Grid, null, files.map(file => {
+    const variants = variantsByUuid[file.uuid] ?? [];
+    return React.createElement(Tile, {
+      key: file.uuid
+    }, React.createElement(TileImage, {
+      src: getThumbUrl(file),
+      alt: file.filename
+    }), variants.length > 0 && React.createElement(VariantBadge, null, lang({
+      message: 'SMART.MEDIA_STORE.VARIANTS_BADGE',
+      count: variants.length
+    })), React.createElement(TileActions, null, variants.length > 0 ? React.createElement(DropdownMenuButton, {
+      color: "secondary",
+      size: "compact",
+      icon: React.createElement(CheckIcon, {
+        size: "small"
+      }),
+      menuPlacement: "bottom-start"
+    }, React.createElement(DropdownMenuSection, null, React.createElement(DropdownMenuItem, {
+      onClick: () => onSelect(file.url)
+    }, lang({
+      message: 'SMART.MEDIA_STORE.SELECT_ORIGINAL'
+    })), variants.map(variant => React.createElement(DropdownMenuItem, {
+      key: variant.uuid,
+      onClick: () => onSelect(variant.url)
+    }, getRatioLabel(variant) || variant.filename)))) : React.createElement(Button, {
+      color: "secondary",
+      size: "compact",
+      icon: React.createElement(CheckIcon, {
+        size: "small"
+      }),
+      "aria-label": lang({
+        message: 'SMART.MEDIA_STORE.SELECT_HINT'
+      }),
+      onClick: () => onSelect(file.url)
+    }), React.createElement(Button, {
+      color: "secondary",
+      size: "compact",
+      icon: React.createElement(EditIcon, {
+        size: "small",
+        view: "lined"
+      }),
+      "aria-label": lang({
+        message: 'SMART.MEDIA_STORE.CREATE_VARIANT_HINT'
+      }),
+      onClick: () => setCreateVariantFor(file)
+    })));
+  })), totalPages > 1 && React.createElement(Horizontal, {
+    "$justifyContent": "center",
+    "$alignItems": "center",
+    "$gap": 8,
+    "$margin": {
+      top: 16
+    }
+  }, React.createElement(Button, {
+    view: "ghost",
+    color: "secondary",
+    size: "field",
+    isDisabled: page <= 0,
+    onClick: () => void fetchFiles(page - 1)
+  }, lang({
+    message: 'SMART.MEDIA_STORE.PREV_BUTTON'
+  })), React.createElement(Text, null, `${page + 1} / ${totalPages}`), React.createElement(Button, {
+    view: "ghost",
+    color: "secondary",
+    size: "field",
+    isDisabled: page + 1 >= totalPages,
+    onClick: () => void fetchFiles(page + 1)
+  }, lang({
+    message: 'SMART.MEDIA_STORE.NEXT_BUTTON'
+  })))), React.createElement(CreateVariantDrawer, {
+    application: application,
+    original: createVariantFor,
+    isOpen: createVariantFor !== null,
+    existingVariants: createVariantFor ? variantsByUuid[createVariantFor.uuid] ?? [] : [],
+    onClose: () => setCreateVariantFor(null),
+    onCreated: handleVariantCreated
+  }));
+};

package/MediaStore/index.d.ts

@@ -0,0 +1 @@
+export { MediaStore, type MediaStoreProps } from './MediaStore';

package/MediaStore/index.js

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

package/MediaStore/mediaFile.utils.d.ts

@@ -0,0 +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. */
+export declare const getRatioLabel: (file: MediaFile) => string;

package/MediaStore/mediaFile.utils.js

@@ -0,0 +1,10 @@
+/** Thumbnail URL from image meta, falling back to the full-size URL. */
+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. */
+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/index.d.ts

@@ -0,0 +1,2 @@
+import { type MediaStoreMessages } from './types';
+export declare const Lang: import("react").FC<import("@pushwoosh/dumb-components/polyglot").LangProps<MediaStoreMessages>>, useLang: () => (props: import("@pushwoosh/dumb-components/polyglot").LangProps<MediaStoreMessages>) => string;