@pushwoosh/smart-components-kit 1.15.0 → 1.16.1

package/MediaStorage/GenerateImageTab.d.ts

@@ -6,9 +6,12 @@ type GenerateImageTabProps = {
     aspectRatios?: string[];
     defaultAspectRatio?: string;
     promptContext?: PromptContext;
+    /** Library images the model takes the style of; picked on the Library tab. */
+    styleRefs?: MediaFile[];
+    onStyleRefsChange?: (files: MediaFile[]) => void;
     onSelect: (file: MediaFile, alt: string) => void;
     onGenerated: () => void;
 };
-/** Prompt (+ optional message context) → 1–4 variants that onyx stores in the library; each preview is already a library file. */
+/** Prompt (+ optional message context and style references) → 1–4 variants that onyx stores in the library; each preview is already a library file. */
 export declare const GenerateImageTab: FC<GenerateImageTabProps>;
 export {};

package/MediaStorage/GenerateImageTab.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button, Checkbox, NativeSelect } from '@pushwoosh/dumb-components';
+import { CloseIcon } from '@pushwoosh/kit-icons';
 import { useSPAContext } from '@pushwoosh/spa-context';
-import { GENERATE_ASPECT_RATIOS, GENERATE_VARIANT_COUNTS, storedVariants } from './aiGallery';
+import { GENERATE_ASPECT_RATIOS, GENERATE_VARIANT_COUNTS, STYLE_REFS_MAX, storedVariants } from './aiGallery';
 import { useErrorToast } from './hooks';
+import { getThumbUrl } from './mediaFile.utils';
 import { useLang } from './polyglot';
-import { GenerateControls, GeneratedGrid, GeneratedPreview, GeneratedVariant, GenerateForm, PromptField } from './styles';
+import { GenerateControls, GeneratedGrid, GeneratedPreview, GeneratedVariant, GenerateForm, PromptField, StyleRefRemove, StyleRefs, StyleRefsHeader, StyleRefsRow, StyleRefThumb } from './styles';
 const ASPECT_LABELS = {
   '1:1': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_SQUARE',
   '4:3': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_LANDSCAPE',
@@ -19,12 +21,14 @@ const generateButtonMessage = (busy, hasResult) => {
   if (busy) return 'SMART.MEDIA_STORAGE.GENERATE.GENERATING';
   return hasResult ? 'SMART.MEDIA_STORAGE.GENERATE.AGAIN' : 'SMART.MEDIA_STORAGE.GENERATE.BUTTON';
 };
-/** Prompt (+ optional message context) → 1–4 variants that onyx stores in the library; each preview is already a library file. */
+/** Prompt (+ optional message context and style references) → 1–4 variants that onyx stores in the library; each preview is already a library file. */
 export const GenerateImageTab = ({
   application,
   aspectRatios,
   defaultAspectRatio,
   promptContext,
+  styleRefs = [],
+  onStyleRefsChange,
   onSelect,
   onGenerated
 }) => {
@@ -60,6 +64,9 @@ export const GenerateImageTab = ({
         ...(hasContext && useContext ? {
           contextTitle: promptContext?.title ?? '',
           contextBody: promptContext?.body ?? ''
+        } : {}),
+        ...(styleRefs.length > 0 ? {
+          referenceMediaUuids: styleRefs.map(file => file.uuid)
         } : {})
       };
       const res = await rpcGatewayAIAssistant.aiGen.GenerateMediaImage(request);
@@ -109,6 +116,46 @@ export const GenerateImageTab = ({
           message: generateButtonMessage(busy, generated !== null)
         })
       })]
+    }), onStyleRefsChange && _jsxs(StyleRefs, {
+      children: [_jsxs(StyleRefsHeader, {
+        children: [lang({
+          message: 'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS',
+          count: styleRefs.length,
+          max: STYLE_REFS_MAX
+        }), styleRefs.length > 0 && _jsx(Button, {
+          view: "ghost",
+          color: "secondary",
+          size: "compact",
+          onClick: () => onStyleRefsChange([]),
+          children: lang({
+            message: 'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR'
+          })
+        })]
+      }), styleRefs.length > 0 ? _jsx(StyleRefsRow, {
+        children: styleRefs.map(file => _jsxs(StyleRefThumb, {
+          children: [_jsx("img", {
+            src: getThumbUrl(file),
+            alt: file.filename
+          }), _jsx(StyleRefRemove, {
+            children: _jsx(Button, {
+              view: "ghost",
+              color: "secondary",
+              size: "compact",
+              icon: _jsx(CloseIcon, {
+                size: "small"
+              }),
+              "aria-label": lang({
+                message: 'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE'
+              }),
+              onClick: () => onStyleRefsChange(styleRefs.filter(ref => ref.uuid !== file.uuid))
+            })
+          })]
+        }, file.uuid))
+      }) : _jsx(StyleRefsHeader, {
+        children: lang({
+          message: 'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT'
+        })
+      })]
     }), hasContext && _jsx(Checkbox, {
       label: lang({
         message: 'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT'

package/MediaStorage/MediaStorage.js

@@ -5,7 +5,7 @@ import { FlexContainer, useAsync } from '@pushwoosh/kit-helpers';
 import { CheckIcon, DropdownIcon, EditIcon, OpenIcon, TrashIcon, UploadIcon } from '@pushwoosh/kit-icons';
 import { Text } from '@pushwoosh/kit-typography';
 import { useSPAContext } from '@pushwoosh/spa-context';
-import { visibleSources } from './aiGallery';
+import { addStyleRefs, STYLE_REFS_MAX, visibleSources } from './aiGallery';
 import { CANVA_DESIGN_PRESETS } from './canvaEdit';
 import { CanvaImportDrawer } from './CanvaImportDrawer';
 import { CreateCropDrawer } from './CreateCropDrawer';
@@ -77,6 +77,7 @@ export const MediaStorage = ({
   const [selectedUuids, setSelectedUuids] = useState([]);
   const [isBulkDeleteOpen, setIsBulkDeleteOpen] = useState(false);
   const [isBulkDeleting, setIsBulkDeleting] = useState(false);
+  const [styleRefs, setStyleRefs] = useState([]);
   const [search, setSearch] = useState('');
   const [searchDraft, setSearchDraft] = useState('');
   // Format filtering belongs to the query, not the response: `total` and the page count come
@@ -295,6 +296,24 @@ export const MediaStorage = ({
     setSelectedUuids(prev => prev.includes(uuid) ? prev.filter(item => item !== uuid) : [...prev, uuid]);
   };
   const isAllSelected = files.length > 0 && selectedUuids.length === files.length;
+  const addSelectedToStyle = () => {
+    const {
+      refs,
+      dropped
+    } = addStyleRefs(styleRefs, files.filter(file => selectedUuids.includes(file.uuid)));
+    if (dropped > 0) {
+      openToast({
+        title: lang({
+          message: 'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT',
+          max: STYLE_REFS_MAX
+        }),
+        type: 'warning'
+      });
+    }
+    setStyleRefs(refs);
+    setSelectedUuids([]);
+    setTab('generate');
+  };
   const totalPages = Math.ceil(total / perPage);
   const showPagination = !loading && files.length > 0 && totalPages > 1;
   const library = _jsxs(_Fragment, {
@@ -413,6 +432,15 @@ export const MediaStorage = ({
           children: _jsx(Lang, {
             message: "SMART.MEDIA_STORAGE.BULK_DELETE_BUTTON"
           })
+        }), tabs.includes('generate') && _jsx(Button, {
+          color: "primary",
+          size: "compact",
+          view: "ghost",
+          isDisabled: isBulkDeleting,
+          onClick: addSelectedToStyle,
+          children: _jsx(Lang, {
+            message: "SMART.MEDIA_STORAGE.STYLE_REFS.ADD"
+          })
         })]
       })]
     }), !loading && files.length > 0 && _jsx(Grid, {
@@ -594,6 +622,8 @@ export const MediaStorage = ({
             aspectRatios: aspectRatios,
             defaultAspectRatio: defaultAspectRatio,
             promptContext: promptContext,
+            styleRefs: styleRefs,
+            onStyleRefsChange: setStyleRefs,
             onGenerated: showImportedFirst,
             onSelect: pickStored
           })

package/MediaStorage/aiGallery.d.ts

@@ -31,6 +31,13 @@ export type PromptContext = {
 };
 /** Variant counts the Generate tab offers; onyx caps a request at 4 and charges each one. */
 export declare const GENERATE_VARIANT_COUNTS: number[];
+/** Most library images onyx takes as style references for one generation (`reference_media_uuids`). */
+export declare const STYLE_REFS_MAX = 10;
+/** Appends the picks to the references, skipping repeats; anything past the cap is dropped. */
+export declare const addStyleRefs: (current: MediaFile[], picked: MediaFile[]) => {
+    refs: MediaFile[];
+    dropped: number;
+};
 /** Aspect ratios onyx accepts for a generated image, in picker order. */
 export declare const GENERATE_ASPECT_RATIOS: string[];
 /** One Pexels hit from `aiGen.SearchStockPhotos`. */

package/MediaStorage/aiGallery.js

@@ -1,5 +1,15 @@
 /** Variant counts the Generate tab offers; onyx caps a request at 4 and charges each one. */
 export const GENERATE_VARIANT_COUNTS = [1, 2, 4];
+/** Most library images onyx takes as style references for one generation (`reference_media_uuids`). */
+export const STYLE_REFS_MAX = 10;
+/** Appends the picks to the references, skipping repeats; anything past the cap is dropped. */
+export const addStyleRefs = (current, picked) => {
+  const merged = [...current, ...picked.filter(file => !current.some(ref => ref.uuid === file.uuid))];
+  return {
+    refs: merged.slice(0, STYLE_REFS_MAX),
+    dropped: Math.max(0, merged.length - STYLE_REFS_MAX)
+  };
+};
 /** Aspect ratios onyx accepts for a generated image, in picker order. */
 export const GENERATE_ASPECT_RATIOS = ['1:1', '4:3', '3:2', '16:9', '21:9', '5:4', '4:5', '3:4', '2:3', '9:16'];
 /** Longest stock query onyx accepts (`stockphotos.MaxQueryChars`); capping the input keeps 400 meaning "not configured". */

package/MediaStorage/polyglot/messages_ar.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'بورتريه (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'طويل (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ابحث باسم الملف…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'الرسم وفق عنوان الرسالة ونصها',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'مطابقة لرسالة الإشعار',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'استخدام كنمط',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': '{{max}} مراجع نمط كحد أقصى: لم تُضف الصور الزائدة',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'مراجع النمط: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'حدد صورًا في تبويب المكتبة واضغط «استخدام كنمط» — تأخذ الصورة الجديدة ألوانها وأجواءها لا محتواها',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'إزالة المرجع',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'مسح',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × صورة'
 };

package/MediaStorage/polyglot/messages_bn.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'পোর্ট্রেট (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'লম্বা (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ফাইলের নাম দিয়ে অনুসন্ধান করুন…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'বার্তার শিরোনাম ও টেক্সট অনুযায়ী আঁকুন',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'পুশ বার্তার সঙ্গে মিলিয়ে',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'স্টাইল হিসেবে ব্যবহার করুন',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'সর্বোচ্চ {{max}}টি স্টাইল রেফারেন্স: অতিরিক্ত ছবি যোগ হয়নি',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'স্টাইল রেফারেন্স: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'লাইব্রেরি ট্যাবে ছবি বেছে “স্টাইল হিসেবে ব্যবহার করুন” চাপুন — নতুন ছবি তাদের রং ও মেজাজ নেবে, বিষয়বস্তু নয়',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'রেফারেন্স সরান',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'মুছুন',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × ছবি'
 };

package/MediaStorage/polyglot/messages_de.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Hochformat (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Hoch (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Nach Dateinamen suchen…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Passend zu Titel und Text der Nachricht zeichnen',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Passend zur Push-Nachricht',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'Als Stil verwenden',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'Höchstens {{max}} Stilreferenzen: die übrigen Bilder wurden nicht hinzugefügt',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'Stilreferenzen: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'Markieren Sie Bilder im Tab „Bibliothek“ und klicken Sie auf „Als Stil verwenden“ – das neue Bild übernimmt Farben und Stimmung, nicht den Inhalt',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'Referenz entfernen',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'Leeren',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × Bild'
 };

package/MediaStorage/polyglot/messages_en.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Portrait (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Tall (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Search by file name…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Draw for the message title and text',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Match the push message',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'Use as style',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'Up to {{max}} style references: the extra images were not added',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'Style references: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'Tick images on the Library tab and press “Use as style” — the new image takes their colours and mood, not their content',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'Remove reference',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'Clear',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × image'
 };

package/MediaStorage/polyglot/messages_es.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Vertical (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Buscar por nombre de archivo…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Dibujar según el título y el texto del mensaje',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Acorde al mensaje push',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'Usar como estilo',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'Máximo {{max}} referencias de estilo: no se añadieron las imágenes sobrantes',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'Referencias de estilo: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'Marque imágenes en la pestaña Biblioteca y pulse «Usar como estilo»: la nueva imagen toma sus colores y ambiente, no su contenido',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'Quitar referencia',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'Borrar',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × imagen'
 };

package/MediaStorage/polyglot/messages_fr.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Portrait (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Haut (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Rechercher par nom de fichier…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Illustrer le titre et le texte du message',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Assorti au message push',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'Utiliser comme style',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': '{{max}} références de style au maximum : les images en trop n’ont pas été ajoutées',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'Références de style : {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'Cochez des images dans l’onglet Bibliothèque puis « Utiliser comme style » : la nouvelle image reprend leurs couleurs et leur ambiance, pas leur contenu',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'Retirer la référence',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'Effacer',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × image'
 };

package/MediaStorage/polyglot/messages_he.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'לאורך (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'גבוה (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'חיפוש לפי שם קובץ…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'לצייר לפי הכותרת והטקסט של ההודעה',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'בהתאם להודעת הפוש',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'שימוש כסגנון',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'עד {{max}} הפניות סגנון: התמונות העודפות לא נוספו',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'הפניות סגנון: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'סמנו תמונות בלשונית הספרייה ולחצו „שימוש כסגנון” — התמונה החדשה תיקח את הצבעים והאווירה שלהן, לא את התוכן',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'הסרת הפניה',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'ניקוי',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × תמונה'
 };

package/MediaStorage/polyglot/messages_hi.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'पोर्ट्रेट (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'टॉल (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'फ़ाइल नाम से खोजें…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'संदेश के शीर्षक और टेक्स्ट के अनुसार बनाएं',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'पुश संदेश के अनुरूप',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'स्टाइल के रूप में इस्तेमाल करें',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'अधिकतम {{max}} स्टाइल रेफ़रेंस: अतिरिक्त इमेज नहीं जोड़ी गईं',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'स्टाइल रेफ़रेंस: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'लाइब्रेरी टैब में इमेज चुनें और “स्टाइल के रूप में इस्तेमाल करें” दबाएँ — नई इमेज उनके रंग और मूड लेगी, सामग्री नहीं',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'रेफ़रेंस हटाएँ',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'साफ़ करें',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × छवि'
 };

package/MediaStorage/polyglot/messages_ja.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': '縦長 (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '縦長 (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ファイル名で検索…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'メッセージのタイトルと本文に合わせて描く',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'プッシュメッセージに合わせる',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'スタイルとして使用',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'スタイル参照は最大{{max}}枚です。超過した画像は追加されませんでした',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'スタイル参照: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'ライブラリタブで画像を選び「スタイルとして使用」を押すと、新しい画像はその色と雰囲気を取り入れます(内容はコピーしません)',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': '参照を削除',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'クリア',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × 画像'
 };

package/MediaStorage/polyglot/messages_ko.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': '세로 (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '세로형 (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': '파일 이름으로 검색…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': '메시지 제목과 본문에 맞춰 그리기',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': '푸시 메시지에 맞추기',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': '스타일로 사용',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': '스타일 참조는 최대 {{max}}개입니다. 초과한 이미지는 추가되지 않았습니다',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': '스타일 참조: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': '라이브러리 탭에서 이미지를 선택하고 “스타일로 사용”을 누르세요. 새 이미지는 내용이 아닌 색감과 분위기를 따릅니다',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': '참조 제거',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': '지우기',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × 이미지'
 };

package/MediaStorage/polyglot/messages_pt.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Retrato (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Alto (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Buscar por nome do arquivo…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Desenhar para o título e o texto da mensagem',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'De acordo com a mensagem push',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'Usar como estilo',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'No máximo {{max}} referências de estilo: as imagens excedentes não foram adicionadas',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'Referências de estilo: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'Marque imagens na aba Biblioteca e clique em “Usar como estilo” — a nova imagem adota as cores e o clima delas, não o conteúdo',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'Remover referência',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'Limpar',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × imagem'
 };

package/MediaStorage/polyglot/messages_ru.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'Портретная (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'Вертикальная (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'Поиск по имени файла…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Рисовать под заголовок и текст сообщения',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'Под текст пуша',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'Использовать как стиль',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'Не больше {{max}} референсов стиля: лишние картинки не добавлены',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'Референсы стиля: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'Отметьте картинки на вкладке «Библиотека» и нажмите «Использовать как стиль» — новая картинка возьмёт их цвета и настроение, а не содержание',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'Убрать референс',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'Очистить',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × картинка'
 };

package/MediaStorage/polyglot/messages_th.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'แนวตั้ง (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'แนวตั้งสูง (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ค้นหาตามชื่อไฟล์…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'วาดตามหัวข้อและข้อความของข้อความ',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': 'ให้เข้ากับข้อความพุช',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': 'ใช้เป็นสไตล์',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': 'อ้างอิงสไตล์ได้สูงสุด {{max}} ภาพ: ภาพที่เกินไม่ถูกเพิ่ม',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': 'อ้างอิงสไตล์: {{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': 'เลือกภาพในแท็บคลังภาพแล้วกด “ใช้เป็นสไตล์” — ภาพใหม่จะใช้สีและบรรยากาศ ไม่ใช่เนื้อหา',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': 'ลบภาพอ้างอิง',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': 'ล้าง',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × รูปภาพ'
 };

package/MediaStorage/polyglot/messages_zh.js

@@ -107,6 +107,12 @@ export const messages = {
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': '纵向 (3:4)',
   'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': '高 (9:16)',
   'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': '按文件名搜索…',
-  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': '根据消息标题和正文绘制',
+  'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': '匹配推送消息',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': '用作风格',
+  'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': '最多 {{max}} 张风格参考图:多余的图片未添加',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': '风格参考:{{count}} / {{max}}',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': '在“素材库”标签中勾选图片并点击“用作风格”——新图片会采用它们的色彩和氛围,而非内容',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': '移除参考图',
+  'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': '清空',
   'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': '{{count}} × 图片'
 };

package/MediaStorage/polyglot/types.d.ts

@@ -142,6 +142,17 @@ export type MediaStorageMessages = {
     'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': NoParams;
     'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': NoParams;
     'SMART.MEDIA_STORAGE.GENERATE.USE_CONTEXT': NoParams;
+    'SMART.MEDIA_STORAGE.STYLE_REFS.ADD': NoParams;
+    'SMART.MEDIA_STORAGE.STYLE_REFS.LIMIT': {
+        max: number;
+    };
+    'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS': {
+        count: number;
+        max: number;
+    };
+    'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_HINT': NoParams;
+    'SMART.MEDIA_STORAGE.GENERATE.STYLE_REF_REMOVE': NoParams;
+    'SMART.MEDIA_STORAGE.GENERATE.STYLE_REFS_CLEAR': NoParams;
     'SMART.MEDIA_STORAGE.GENERATE.VARIANTS': {
         count: number;
     };

package/MediaStorage/styles.d.ts

@@ -172,3 +172,18 @@ export declare const GeneratedGrid: import("styled-components/dist/types").IStyl
 export declare const GeneratedVariant: 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 StyleRefs: 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 StyleRefsHeader: 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 StyleRefsRow: 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 StyleRefThumb: 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 StyleRefRemove: 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;

package/MediaStorage/styles.js

@@ -197,4 +197,24 @@ export const GeneratedGrid = styled.div.withConfig({
 export const GeneratedVariant = styled.div.withConfig({
   displayName: "GeneratedVariant",
   componentId: "sc-uu3cbo-42"
-})(["display:flex;flex-direction:column;align-items:flex-start;gap:8px;"]);
+})(["display:flex;flex-direction:column;align-items:flex-start;gap:8px;"]);
+export const StyleRefs = styled.div.withConfig({
+  displayName: "StyleRefs",
+  componentId: "sc-uu3cbo-43"
+})(["display:flex;flex-direction:column;gap:8px;"]);
+export const StyleRefsHeader = styled.div.withConfig({
+  displayName: "StyleRefsHeader",
+  componentId: "sc-uu3cbo-44"
+})(["display:flex;align-items:center;gap:8px;font-size:", ";color:", ";"], FontSize.SMALL, Color.LOCKED);
+export const StyleRefsRow = styled.div.withConfig({
+  displayName: "StyleRefsRow",
+  componentId: "sc-uu3cbo-45"
+})(["display:flex;flex-wrap:wrap;gap:8px;"]);
+export const StyleRefThumb = styled.div.withConfig({
+  displayName: "StyleRefThumb",
+  componentId: "sc-uu3cbo-46"
+})(["position:relative;width:64px;height:64px;border-radius:6px;overflow:hidden;border:1px solid ", ";img{width:100%;height:100%;object-fit:cover;display:block;}"], Color.DIVIDER);
+export const StyleRefRemove = styled.div.withConfig({
+  displayName: "StyleRefRemove",
+  componentId: "sc-uu3cbo-47"
+})(["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.15.0",
+  "version": "1.16.1",
   "description": "Stateful, data-connected React components shared by Pushwoosh micro-frontends",
   "repository": {
     "type": "git",