@pushwoosh/smart-components-kit 1.19.0 → 1.21.0

package/MediaStorage/CreateCropDrawer.js

@@ -5,6 +5,8 @@ import { Columns, Vertical } from '@pushwoosh/kit-helpers';
 import { CloseIcon, TrashIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
+import { CropFramePicker } from './CropFramePicker';
+import { CENTER_FOCAL, getCropWindow, getStoredOrigin } from './cropWindow';
 import { useDeleteMediaFile } from './hooks';
 import { getAspectRatio, getCropCaption, getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
@@ -80,6 +82,7 @@ export const CreateCropDrawer = ({
   const [isCreating, setIsCreating] = useState(false);
   const [pendingDeleteCrop, setPendingDeleteCrop] = useState(null);
   const [viewedCrop, setViewedCrop] = useState(null);
+  const [focal, setFocal] = useState(CENTER_FOCAL);
   // 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.
@@ -90,6 +93,7 @@ export const CreateCropDrawer = ({
       setSize(DEFAULT_SIZE);
       setQuality(DEFAULT_QUALITY);
       setViewedCrop(null);
+      setFocal(CENTER_FOCAL);
     }
   }, [original]);
   const isJpeg = /jpe?g/i.test(original?.mimeType ?? '');
@@ -104,6 +108,7 @@ export const CreateCropDrawer = ({
   const chooseRatio = next => {
     setRatio(next);
     setViewedCrop(null);
+    setFocal(CENTER_FOCAL);
   };
   const viewCrop = crop => {
     setRatio('original');
@@ -112,6 +117,13 @@ export const CreateCropDrawer = ({
   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 [ratioW, ratioH] = selectedRatio.label.split(':').map(Number);
+  const srcW = originalMeta?.width ?? 0;
+  const srcH = originalMeta?.height ?? 0;
+  const canPlaceWindow = !isOriginalView && srcW > 0 && srcH > 0;
+  const cropWindow = canPlaceWindow ? getCropWindow(srcW, srcH, ratioW, ratioH, focal) : null;
+  const centeredWindow = canPlaceWindow ? getCropWindow(srcW, srcH, ratioW, ratioH, CENTER_FOCAL) : null;
+  const isOffCenter = Boolean(cropWindow && centeredWindow && (cropWindow.x !== centeredWindow.x || cropWindow.y !== centeredWindow.y));
   // Both inputs are always visible: the driving one is editable, the other is
   // read-only and shows the value computed from the aspect ratio.
   const computedText = value => isSizeValid ? String(value) : '';
@@ -126,9 +138,18 @@ export const CreateCropDrawer = ({
     }
     setDimension(next);
   };
-  // Same ratio with a different size is allowed; only an exact ratio + output
-  // size match counts as a duplicate.
-  const duplicateExists = !isOriginalView && isSizeValid && existingCrops.some(crop => crop.meta?.type === 'imageMeta' && crop.meta.data.ratio === selectedRatio.label && crop.meta.data.width === outputWidth && crop.meta.data.height === outputHeight);
+  // A crop is the same one only at the same ratio, output size and window position.
+  const duplicateExists = !isOriginalView && isSizeValid && existingCrops.some(crop => {
+    if (crop.meta?.type !== 'imageMeta') return false;
+    const {
+      ratio: cropRatio,
+      width,
+      height
+    } = crop.meta.data;
+    if (cropRatio !== selectedRatio.label || width !== outputWidth || height !== outputHeight) return false;
+    const origin = getStoredOrigin(crop.url);
+    return isOffCenter ? origin?.x === cropWindow?.x && origin?.y === cropWindow?.y : origin === null;
+  });
   const handleCreate = async () => {
     if (!original || ratio === 'original' || !isSizeValid || !isQualityValid || duplicateExists) return;
     // Capture the parent up front so a concurrent reopen for another image
@@ -136,7 +157,7 @@ export const CreateCropDrawer = ({
     const parent = original;
     setIsCreating(true);
     try {
-      const response = await rpcGateway.mediaFiles.CreateVariant({
+      const request = {
         application,
         uuid: parent.uuid,
         ratio,
@@ -146,8 +167,12 @@ export const CreateCropDrawer = ({
         },
         ...(isJpeg ? {
           quality: qualityValue
+        } : {}),
+        ...(isOffCenter ? {
+          focalPoint: focal
         } : {})
-      });
+      };
+      const response = await rpcGateway.mediaFiles.CreateVariant(request);
       openToast({
         title: lang({
           message: 'SMART.MEDIA_STORAGE.CREATE_CROP.SUCCESS'
@@ -274,13 +299,28 @@ export const CreateCropDrawer = ({
         }), _jsxs(Vertical, {
           "$gap": 6,
           children: [_jsx(PreviewStage, {
-            children: _jsx(PreviewFrame, {
+            children: canPlaceWindow && cropWindow ? _jsx(CropFramePicker, {
+              src: original.url,
+              alt: original.filename,
+              imageRatio: srcW / srcH,
+              windowWidth: cropWindow.width / srcW,
+              windowHeight: cropWindow.height / srcH,
+              focal: focal,
+              label: lang({
+                message: 'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT'
+              }),
+              onChange: setFocal
+            }) : _jsx(PreviewFrame, {
               "$ratio": isOriginalView ? getAspectRatio(previewFile) : selectedRatio.ar,
               children: _jsx(PreviewImage, {
                 src: previewFile.url,
                 alt: previewFile.filename
               })
             })
+          }), canPlaceWindow && _jsx(Text, {
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CREATE_CROP.DRAG_HINT'
+            })
           }), viewedCrop && _jsx(Text, {
             children: getCropCaption(viewedCrop)
           }), isOriginalShown && originalMeta && _jsxs(Text, {

package/MediaStorage/CropFramePicker.d.ts

@@ -0,0 +1,15 @@
+import { type FC } from 'react';
+import { type Focal } from './cropWindow';
+type CropFramePickerProps = {
+    src: string;
+    alt: string;
+    imageRatio: number;
+    windowWidth: number;
+    windowHeight: number;
+    focal: Focal;
+    label: string;
+    onChange: (focal: Focal) => void;
+};
+/** Original image with a draggable crop window; sizes and focal are fractions of the image. */
+export declare const CropFramePicker: FC<CropFramePickerProps>;
+export {};

package/MediaStorage/CropFramePicker.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { clampFocal } from './cropWindow';
+import { CropFrame, CropFrameWindow, PreviewImage } from './styles';
+const KEY_STEP = 0.01;
+/** Original image with a draggable crop window; sizes and focal are fractions of the image. */
+export const CropFramePicker = ({
+  src,
+  alt,
+  imageRatio,
+  windowWidth,
+  windowHeight,
+  focal,
+  label,
+  onChange
+}) => {
+  const frameRef = useRef(null);
+  const dragRef = useRef(null);
+  const move = next => onChange(clampFocal(next, windowWidth, windowHeight));
+  const handlePointerDown = event => {
+    event.currentTarget.setPointerCapture(event.pointerId);
+    dragRef.current = {
+      clientX: event.clientX,
+      clientY: event.clientY,
+      focal
+    };
+  };
+  const handlePointerMove = event => {
+    const drag = dragRef.current;
+    const rect = frameRef.current?.getBoundingClientRect();
+    if (!drag || !rect || rect.width === 0 || rect.height === 0) return;
+    move({
+      x: drag.focal.x + (event.clientX - drag.clientX) / rect.width,
+      y: drag.focal.y + (event.clientY - drag.clientY) / rect.height
+    });
+  };
+  const handlePointerUp = () => {
+    dragRef.current = null;
+  };
+  const handleFrameClick = event => {
+    const rect = frameRef.current?.getBoundingClientRect();
+    if (!rect || rect.width === 0 || rect.height === 0) return;
+    move({
+      x: (event.clientX - rect.left) / rect.width,
+      y: (event.clientY - rect.top) / rect.height
+    });
+  };
+  const handleKeyDown = event => {
+    const delta = {
+      ArrowLeft: {
+        x: -KEY_STEP,
+        y: 0
+      },
+      ArrowRight: {
+        x: KEY_STEP,
+        y: 0
+      },
+      ArrowUp: {
+        x: 0,
+        y: -KEY_STEP
+      },
+      ArrowDown: {
+        x: 0,
+        y: KEY_STEP
+      }
+    };
+    const step = delta[event.key];
+    if (!step) return;
+    event.preventDefault();
+    move({
+      x: focal.x + step.x,
+      y: focal.y + step.y
+    });
+  };
+  return _jsxs(CropFrame, {
+    ref: frameRef,
+    "$ratio": imageRatio,
+    onPointerDown: handleFrameClick,
+    children: [_jsx(PreviewImage, {
+      src: src,
+      alt: alt,
+      draggable: false
+    }), _jsx(CropFrameWindow, {
+      role: "slider",
+      tabIndex: 0,
+      "aria-label": label,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": Math.round(focal.x * 100),
+      "aria-valuetext": `${Math.round(focal.x * 100)}%, ${Math.round(focal.y * 100)}%`,
+      title: label,
+      style: {
+        left: `${(focal.x - windowWidth / 2) * 100}%`,
+        top: `${(focal.y - windowHeight / 2) * 100}%`,
+        width: `${windowWidth * 100}%`,
+        height: `${windowHeight * 100}%`
+      },
+      onPointerDown: event => {
+        event.stopPropagation();
+        handlePointerDown(event);
+      },
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      onKeyDown: handleKeyDown
+    })]
+  });
+};

package/MediaStorage/MediaStorage.js

@@ -11,7 +11,7 @@ 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, MenuItemPreview, MenuItemThumb, SelectionBar, SearchField, SearchRow, SelectionCount, SourceBadge, TabBody, Tile, TileActions, TileBadges, TileCheckbox, TileImage, TooltipAnchor, UsageLine, VersionsBadge, WarningBadge } from './styles';
@@ -220,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'

package/MediaStorage/cropWindow.d.ts

@@ -0,0 +1,22 @@
+/** Center of a crop window as a fraction (0..1) of the original's width and height. */
+export type Focal = {
+    x: number;
+    y: number;
+};
+/** Crop window on the original, in source pixels. */
+export type CropRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export declare const CENTER_FOCAL: Focal;
+/** Largest ratioW:ratioH window inside srcW×srcH centered on focal; mirrors rpc-v2 `CropWindow`. */
+export declare const getCropWindow: (srcW: number, srcH: number, ratioW: number, ratioH: number, focal: Focal) => CropRect;
+/** The focal a window of that size can actually take: its center, kept inside the image. */
+export declare const clampFocal: (focal: Focal, windowW: number, windowH: number) => Focal;
+/** Window origin a variant was cut at, read from its `_at<x>x<y>` key suffix; null for a centered one. */
+export declare const getStoredOrigin: (url: string) => {
+    x: number;
+    y: number;
+} | null;

package/MediaStorage/cropWindow.js

@@ -0,0 +1,36 @@
+export const CENTER_FOCAL = {
+  x: 0.5,
+  y: 0.5
+};
+const clamp = (value, lo, hi) => Math.max(lo, Math.min(value, hi));
+/** Largest ratioW:ratioH window inside srcW×srcH centered on focal; mirrors rpc-v2 `CropWindow`. */
+export const getCropWindow = (srcW, srcH, ratioW, ratioH, focal) => {
+  let width = srcW;
+  let height = srcH;
+  if (srcW * ratioH > srcH * ratioW) {
+    width = Math.floor(srcH * ratioW / ratioH);
+  } else {
+    height = Math.floor(srcW * ratioH / ratioW);
+  }
+  const x = clamp(Math.floor(focal.x * srcW - width / 2), 0, srcW - width);
+  const y = clamp(Math.floor(focal.y * srcH - height / 2), 0, srcH - height);
+  return {
+    x,
+    y,
+    width,
+    height
+  };
+};
+/** The focal a window of that size can actually take: its center, kept inside the image. */
+export const clampFocal = (focal, windowW, windowH) => ({
+  x: clamp(focal.x, windowW / 2, 1 - windowW / 2),
+  y: clamp(focal.y, windowH / 2, 1 - windowH / 2)
+});
+/** Window origin a variant was cut at, read from its `_at<x>x<y>` key suffix; null for a centered one. */
+export const getStoredOrigin = url => {
+  const match = /_at(\d+)x(\d+)(?:\.[a-z0-9]+)?$/i.exec(url.split(/[?#]/)[0]);
+  return match ? {
+    x: Number(match[1]),
+    y: Number(match[2])
+  } : null;
+};

package/MediaStorage/mediaFile.utils.d.ts

@@ -11,3 +11,13 @@ export declare const getAspectRatio: (file: MediaFile) => number;
 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

@@ -33,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,6 +10,7 @@ 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}}',
@@ -51,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.DRAG_HINT': 'اسحب الإطار لاختيار منطقة الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'عرض هذا الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'حذف الاقتصاص',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'حذف هذا الاقتصاص؟',

package/MediaStorage/polyglot/messages_bn.js

@@ -10,6 +10,7 @@ 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}}টি সংস্করণ',
@@ -51,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.DRAG_HINT': 'ক্রপের এলাকা বেছে নিতে ফ্রেম টেনে আনুন',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'এই ক্রপ দেখান',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'ক্রপ মুছুন',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'এই ক্রপটি মুছবেন?',

package/MediaStorage/polyglot/messages_de.js

@@ -10,6 +10,7 @@ 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.',
@@ -51,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.DRAG_HINT': 'Rahmen ziehen, um den Zuschnitt zu wählen',
   '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?',

package/MediaStorage/polyglot/messages_en.js

@@ -10,6 +10,7 @@ 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.',
@@ -51,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.DRAG_HINT': 'Drag the frame to choose the crop area',
   '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?',

package/MediaStorage/polyglot/messages_es.js

@@ -10,6 +10,7 @@ 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.',
@@ -51,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.DRAG_HINT': 'Arrastra el marco para elegir el área del 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?',

package/MediaStorage/polyglot/messages_fr.js

@@ -10,6 +10,7 @@ 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.',
@@ -51,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.DRAG_HINT': 'Faites glisser le cadre pour choisir la zone 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 ?',

package/MediaStorage/polyglot/messages_he.js

@@ -10,6 +10,7 @@ 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}} גרס.',
@@ -51,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.DRAG_HINT': 'גררו את המסגרת כדי לבחור את אזור החיתוך',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'הצג חיתוך זה',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'מחיקת חיתוך',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'למחוק את החיתוך הזה?',

package/MediaStorage/polyglot/messages_hi.js

@@ -10,6 +10,7 @@ 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}} संस्करण',
@@ -51,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.DRAG_HINT': 'क्रॉप क्षेत्र चुनने के लिए फ़्रेम खींचें',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'यह क्रॉप दिखाएँ',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'क्रॉप हटाएँ',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'यह क्रॉप हटाएँ?',

package/MediaStorage/polyglot/messages_ja.js

@@ -10,6 +10,7 @@ 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}}',
@@ -51,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.DRAG_HINT': '枠をドラッグしてトリミング範囲を選択',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'このトリミングを表示',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'トリミングを削除',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'このトリミングを削除しますか？',

package/MediaStorage/polyglot/messages_ko.js

@@ -10,6 +10,7 @@ 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}}개',
@@ -51,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.DRAG_HINT': '프레임을 드래그해 크롭 영역을 선택하세요',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': '이 크롭 보기',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': '크롭 삭제',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': '이 크롭을 삭제하시겠습니까?',

package/MediaStorage/polyglot/messages_pt.js

@@ -10,6 +10,7 @@ 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.',
@@ -51,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.DRAG_HINT': 'Arraste o quadro para escolher a área do 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?',

package/MediaStorage/polyglot/messages_ru.js

@@ -10,6 +10,7 @@ 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}} вер.',
@@ -51,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.DRAG_HINT': 'Перетащите рамку, чтобы выбрать область кропа',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'Показать кроп',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'Удалить кроп',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'Удалить кроп?',

package/MediaStorage/polyglot/messages_th.js

@@ -10,6 +10,7 @@ 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}} เวอร์ชัน',
@@ -51,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.DRAG_HINT': 'ลากกรอบเพื่อเลือกพื้นที่ครอป',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': 'แสดงภาพครอปนี้',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': 'ลบครอป',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': 'ลบครอปนี้ใช่ไหม',

package/MediaStorage/polyglot/messages_zh.js

@@ -10,6 +10,7 @@ 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}} 个版本',
@@ -51,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.DRAG_HINT': '拖动框选择裁剪区域',
   'SMART.MEDIA_STORAGE.CREATE_CROP.PREVIEW_HINT': '查看此裁剪',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_HINT': '删除裁剪图',
   'SMART.MEDIA_STORAGE.CREATE_CROP.DELETE_CONFIRM.TITLE': '删除此裁剪图？',

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;
@@ -71,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.DRAG_HINT': 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;

package/MediaStorage/styles.d.ts

@@ -67,6 +67,21 @@ export declare const PreviewFrame: import("styled-components/dist/types").IStyle
 }, {
     $ratio: number;
 }>> & string;
+export declare const CropFrame: import("styled-components/dist/types").IStyledComponentBase<"web", Omit<import("styled-components").FastOmit<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;
+}, {
+    $ratio: number;
+}>, "as" | "forwardedAs"> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, "style"> & {
+    style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
+        [key: `--${string}`]: string | number | undefined;
+    }) | undefined;
+}> & string;
+export declare const CropFrameWindow: 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 PreviewImage: 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;

package/MediaStorage/styles.js

@@ -96,29 +96,37 @@ export const PreviewFrame = styled.div.withConfig({
 })(["aspect-ratio:", ";max-width:100%;max-height:336px;overflow:hidden;border-radius:4px;"], ({
   $ratio
 }) => $ratio);
+export const CropFrame = styled(PreviewFrame).withConfig({
+  displayName: "CropFrame",
+  componentId: "sc-uu3cbo-21"
+})(["position:relative;touch-action:none;user-select:none;cursor:crosshair;"]);
+export const CropFrameWindow = styled.div.withConfig({
+  displayName: "CropFrameWindow",
+  componentId: "sc-uu3cbo-22"
+})(["position:absolute;box-sizing:border-box;border:2px solid ", ";box-shadow:0 0 0 9999px rgba(0,0,0,0.5);cursor:move;touch-action:none;&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], Color.CLEAR, Color.PRIMARY);
 export const PreviewImage = styled.img.withConfig({
   displayName: "PreviewImage",
-  componentId: "sc-uu3cbo-21"
+  componentId: "sc-uu3cbo-23"
 })(["width:100%;height:100%;object-fit:cover;display:block;"]);
 export const FieldLabel = styled.div.withConfig({
   displayName: "FieldLabel",
-  componentId: "sc-uu3cbo-22"
+  componentId: "sc-uu3cbo-24"
 })(["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-23"
+  componentId: "sc-uu3cbo-25"
 })(["&[readonly]{background:", ";color:", ";}"], Color.SOFT_LIGHT, Color.LOCKED);
 export const Chips = styled.div.withConfig({
   displayName: "Chips",
-  componentId: "sc-uu3cbo-24"
+  componentId: "sc-uu3cbo-26"
 })(["display:flex;flex-wrap:wrap;gap:7px;"]);
 export const Segment = styled.div.withConfig({
   displayName: "Segment",
-  componentId: "sc-uu3cbo-25"
+  componentId: "sc-uu3cbo-27"
 })(["display:inline-flex;border:1px solid ", ";border-radius:6px;overflow:hidden;"], Color.DIVIDER);
 export const SegmentItem = styled.button.withConfig({
   displayName: "SegmentItem",
-  componentId: "sc-uu3cbo-26"
+  componentId: "sc-uu3cbo-28"
 })(["font:inherit;font-size:13px;cursor:pointer;padding:7px 14px;border:none;background:", ";color:", ";& + &{border-left:1px solid ", ";}"], ({
   $active
 }) => $active ? Color.PRIMARY : Color.CLEAR, ({
@@ -126,11 +134,11 @@ export const SegmentItem = styled.button.withConfig({
 }) => $active ? Color.CLEAR : Color.MAIN, Color.DIVIDER);
 export const CropStrip = styled.div.withConfig({
   displayName: "CropStrip",
-  componentId: "sc-uu3cbo-27"
+  componentId: "sc-uu3cbo-29"
 })(["display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start;"]);
 export const CropThumb = styled.div.withConfig({
   displayName: "CropThumb",
-  componentId: "sc-uu3cbo-28"
+  componentId: "sc-uu3cbo-30"
 })(["position:relative;width:88px;border:1px solid ", ";box-shadow:", ";border-radius:6px;overflow:hidden;background:", ";"], ({
   $selected
 }) => $selected ? Color.PRIMARY : Color.DIVIDER, ({
@@ -138,23 +146,23 @@ export const CropThumb = styled.div.withConfig({
 }) => $selected ? `0 0 0 1px ${Color.PRIMARY}` : 'none', Color.SOFT_LIGHT);
 export const CropThumbButton = styled.button.withConfig({
   displayName: "CropThumbButton",
-  componentId: "sc-uu3cbo-29"
+  componentId: "sc-uu3cbo-31"
 })(["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"
+  componentId: "sc-uu3cbo-32"
 })(["width:100%;aspect-ratio:1;object-fit:contain;display:block;"]);
 export const CropThumbDelete = styled.div.withConfig({
   displayName: "CropThumbDelete",
-  componentId: "sc-uu3cbo-31"
+  componentId: "sc-uu3cbo-33"
 })(["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-32"
+  componentId: "sc-uu3cbo-34"
 })(["font-size:10px;text-align:center;padding:3px 2px;color:", ";"], Color.LOCKED);
 export const DesignTile = styled.button.withConfig({
   displayName: "DesignTile",
-  componentId: "sc-uu3cbo-33"
+  componentId: "sc-uu3cbo-35"
 })(["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, ({
@@ -162,27 +170,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-34"
+  componentId: "sc-uu3cbo-36"
 })(["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-35"
+  componentId: "sc-uu3cbo-37"
 })(["display:flex;align-items:stretch;gap:12px;& > :first-child{flex:1;}"]);
 export const CanvaActions = styled.div.withConfig({
   displayName: "CanvaActions",
-  componentId: "sc-uu3cbo-36"
+  componentId: "sc-uu3cbo-38"
 })(["display:flex;flex-direction:column;justify-content:center;gap:8px;& > *{width:100%;}"]);
 export const TabBody = styled.div.withConfig({
   displayName: "TabBody",
-  componentId: "sc-uu3cbo-37"
+  componentId: "sc-uu3cbo-39"
 })(["padding-top:16px;"]);
 export const SearchRow = styled.div.withConfig({
   displayName: "SearchRow",
-  componentId: "sc-uu3cbo-38"
+  componentId: "sc-uu3cbo-40"
 })(["display:flex;gap:8px;margin-bottom:16px;"]);
 export const StockTile = styled.button.withConfig({
   displayName: "StockTile",
-  componentId: "sc-uu3cbo-39"
+  componentId: "sc-uu3cbo-41"
 })(["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', ({
@@ -190,59 +198,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-40"
+  componentId: "sc-uu3cbo-42"
 })(["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-41"
+  componentId: "sc-uu3cbo-43"
 })(["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-42"
+  componentId: "sc-uu3cbo-44"
 })(["display:flex;flex-direction:column;gap:12px;max-width:560px;"]);
 export const GenerateControls = styled.div.withConfig({
   displayName: "GenerateControls",
-  componentId: "sc-uu3cbo-43"
+  componentId: "sc-uu3cbo-45"
 })(["display:flex;align-items:center;gap:8px;"]);
 export const GeneratedPreview = styled.img.withConfig({
   displayName: "GeneratedPreview",
-  componentId: "sc-uu3cbo-44"
+  componentId: "sc-uu3cbo-46"
 })(["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-45"
+  componentId: "sc-uu3cbo-47"
 })(["flex:1;width:auto;max-width:none;"]);
 export const PromptField = styled(NativeTextarea).withConfig({
   displayName: "PromptField",
-  componentId: "sc-uu3cbo-46"
+  componentId: "sc-uu3cbo-48"
 })(["font-family:inherit;resize:vertical;"]);
 export const GeneratedGrid = styled.div.withConfig({
   displayName: "GeneratedGrid",
-  componentId: "sc-uu3cbo-47"
+  componentId: "sc-uu3cbo-49"
 })(["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-48"
+  componentId: "sc-uu3cbo-50"
 })(["display:flex;flex-direction:column;align-items:flex-start;gap:8px;"]);
 export const StyleRefs = styled.div.withConfig({
   displayName: "StyleRefs",
-  componentId: "sc-uu3cbo-49"
+  componentId: "sc-uu3cbo-51"
 })(["display:flex;flex-direction:column;gap:8px;"]);
 export const StyleRefsHeader = styled.div.withConfig({
   displayName: "StyleRefsHeader",
-  componentId: "sc-uu3cbo-50"
+  componentId: "sc-uu3cbo-52"
 })(["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-51"
+  componentId: "sc-uu3cbo-53"
 })(["display:flex;flex-wrap:wrap;gap:8px;"]);
 export const StyleRefThumb = styled.div.withConfig({
   displayName: "StyleRefThumb",
-  componentId: "sc-uu3cbo-52"
+  componentId: "sc-uu3cbo-54"
 })(["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-53"
+  componentId: "sc-uu3cbo-55"
 })(["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.19.0",
+  "version": "1.21.0",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",