@pushwoosh/smart-components-kit 1.20.0 → 1.21.1

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, getRequestedSize, getStoredOrigin, getStoredSize } 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,14 +108,32 @@ export const CreateCropDrawer = ({
   const chooseRatio = next => {
     setRatio(next);
     setViewedCrop(null);
+    setFocal(CENTER_FOCAL);
   };
   const viewCrop = crop => {
     setRatio('original');
     setViewedCrop(crop);
   };
   const selectedRatio = RATIOS.find(item => item.value === ratio) ?? RATIOS[0];
-  const outputWidth = dimension === 'width' ? sizeValue : Math.round(sizeValue * selectedRatio.ar);
-  const outputHeight = dimension === 'height' ? sizeValue : Math.round(sizeValue / selectedRatio.ar);
+  const [ratioW, ratioH] = selectedRatio.label.split(':').map(Number);
+  const {
+    width: outputWidth,
+    height: outputHeight
+  } = getRequestedSize(ratioW, ratioH, dimension, sizeValue);
+  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));
+  const storedSize = cropWindow ? getStoredSize(cropWindow, {
+    width: outputWidth,
+    height: outputHeight
+  }) : {
+    width: outputWidth,
+    height: outputHeight
+  };
+  const isCapped = storedSize.width !== outputWidth || storedSize.height !== outputHeight;
   // 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 +148,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 !== storedSize.width || height !== storedSize.height) 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 +167,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 +177,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,19 +309,38 @@ 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, {
             children: [originalMeta.width, ' × ', originalMeta.height]
           }), !isOriginalView && isSizeValid && _jsxs(Text, {
-            children: [selectedRatio.label, ' · ', outputWidth, ' × ', outputHeight]
+            children: [selectedRatio.label, ' · ', storedSize.width, ' × ', storedSize.height]
+          }), !isOriginalView && isSizeValid && isCapped && _jsx(Text, {
+            children: lang({
+              message: 'SMART.MEDIA_STORAGE.CREATE_CROP.CAPPED_HINT'
+            })
           })]
         }), !isOriginalView && isJpeg && _jsxs("div", {
           children: [_jsx(FieldLabel, {

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/cropWindow.d.ts

@@ -0,0 +1,35 @@
+/** 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;
+/** Size requested by the width/height field, derived like rpc-v2 `targetSize` (integer division). */
+export declare const getRequestedSize: (ratioW: number, ratioH: number, dimension: "width" | "height", size: number) => {
+    width: number;
+    height: number;
+};
+/** Size rpc-v2 stores for a request: the requested one when smaller than the window, else the window. */
+export declare const getStoredSize: (window: CropRect, requested: {
+    width: number;
+    height: number;
+}) => {
+    width: number;
+    height: number;
+};

package/MediaStorage/cropWindow.js

@@ -0,0 +1,56 @@
+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;
+};
+/** Size requested by the width/height field, derived like rpc-v2 `targetSize` (integer division). */
+export const getRequestedSize = (ratioW, ratioH, dimension, size) => {
+  const value = Math.floor(size);
+  if (!(value > 0)) return {
+    width: 0,
+    height: 0
+  };
+  return dimension === 'width' ? {
+    width: value,
+    height: Math.floor(value * ratioH / ratioW)
+  } : {
+    width: Math.floor(value * ratioW / ratioH),
+    height: value
+  };
+};
+/** Size rpc-v2 stores for a request: the requested one when smaller than the window, else the window. */
+export const getStoredSize = (window, requested) => requested.width > 0 && requested.height > 0 && requested.width < window.width ? requested : {
+  width: window.width,
+  height: window.height
+};

package/MediaStorage/polyglot/messages_ar.js

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'الأصل أصغر، لذلك يُحفظ الاقتصاص بهذا الحجم',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'মূল ছবি ছোট, তাই ক্রপ এই আকারে সংরক্ষিত হবে',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'Das Original ist kleiner, daher wird der Zuschnitt in dieser Größe gespeichert',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'The original is smaller, so the crop is saved at this size',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'El original es más pequeño, así que el recorte se guarda con este tamaño',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'L’original est plus petit, le recadrage est donc enregistré à cette taille',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'המקור קטן יותר, ולכן החיתוך יישמר בגודל הזה',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'मूल छवि छोटी है, इसलिए क्रॉप इसी आकार में सहेजा जाएगा',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': '元画像が小さいため、このサイズで保存されます',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': '원본이 더 작아 이 크기로 저장됩니다',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'O original é menor, então o recorte é salvo neste tamanho',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'Оригинал меньше, поэтому кроп сохранится в этом размере',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': 'ภาพต้นฉบับเล็กกว่า จึงบันทึกภาพครอปที่ขนาดนี้',
+  '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

@@ -52,6 +52,8 @@ 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.CAPPED_HINT': '原图较小，裁剪将按此尺寸保存',
+  '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

@@ -75,6 +75,8 @@ 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.CAPPED_HINT': 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.20.0",
+  "version": "1.21.1",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",