@pushwoosh/smart-components-kit 1.11.1 → 1.13.0

package/MediaStorage/GenerateImageTab.d.ts

@@ -0,0 +1,12 @@
+import { type FC } from 'react';
+import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
+type GenerateImageTabProps = {
+    application: string;
+    aspectRatios?: string[];
+    defaultAspectRatio?: string;
+    onSelect: (file: MediaFile, alt: string) => void;
+    onGenerated: () => void;
+};
+/** Prompt → one image that onyx stores in the library; the preview is already the stored file. */
+export declare const GenerateImageTab: FC<GenerateImageTabProps>;
+export {};

package/MediaStorage/GenerateImageTab.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, NativeSelect } from '@pushwoosh/dumb-components';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import { GENERATE_ASPECT_RATIOS, toMediaFile } from './aiGallery';
+import { useErrorToast } from './hooks';
+import { useLang } from './polyglot';
+import { GenerateControls, GeneratedPreview, GenerateForm, PromptField } from './styles';
+const ASPECT_LABELS = {
+  '1:1': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_SQUARE',
+  '4:3': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_LANDSCAPE',
+  '16:9': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE',
+  '21:9': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER',
+  '3:4': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT',
+  '9:16': 'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL'
+};
+const isLabelledAspect = ratio => ratio in ASPECT_LABELS;
+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 → one image that onyx stores in the library; the preview is already the stored file. */
+export const GenerateImageTab = ({
+  application,
+  aspectRatios,
+  defaultAspectRatio,
+  onSelect,
+  onGenerated
+}) => {
+  const {
+    rpcGatewayAIAssistant
+  } = useSPAContext();
+  const errorToast = useErrorToast();
+  const lang = useLang();
+  const ratios = aspectRatios?.length ? aspectRatios : GENERATE_ASPECT_RATIOS;
+  const [prompt, setPrompt] = useState('');
+  const [aspect, setAspect] = useState(defaultAspectRatio && ratios.includes(defaultAspectRatio) ? defaultAspectRatio : ratios[0]);
+  const [busy, setBusy] = useState(false);
+  const [generated, setGenerated] = useState(null);
+  const aspectLabel = ratio => {
+    return isLabelledAspect(ratio) ? lang({
+      message: ASPECT_LABELS[ratio]
+    }) : ratio;
+  };
+  const generate = async () => {
+    const text = prompt.trim();
+    if (!text || busy) return;
+    setGenerated(null);
+    setBusy(true);
+    try {
+      const res = await rpcGatewayAIAssistant.aiGen.GenerateMediaImage({
+        application,
+        prompt: text,
+        aspectRatio: aspect
+      });
+      setGenerated({
+        file: toMediaFile(res, 'ai', `${res.mediaUuid}.png`),
+        alt: text
+      });
+      onGenerated();
+    } catch (error) {
+      errorToast('SMART.MEDIA_STORAGE.GENERATE.ERROR', error);
+    } finally {
+      setBusy(false);
+    }
+  };
+  return _jsxs(GenerateForm, {
+    children: [_jsx(PromptField, {
+      value: prompt,
+      rows: 3,
+      placeholder: lang({
+        message: 'SMART.MEDIA_STORAGE.GENERATE.PROMPT_PLACEHOLDER'
+      }),
+      onChange: event => setPrompt(event.target.value)
+    }), _jsxs(GenerateControls, {
+      children: [ratios.length > 1 && _jsx(NativeSelect, {
+        value: aspect,
+        onChange: event => setAspect(event.target.value),
+        children: ratios.map(ratio => _jsx("option", {
+          value: ratio,
+          children: aspectLabel(ratio)
+        }, ratio))
+      }), _jsx(Button, {
+        color: "primary",
+        size: "field",
+        isDisabled: busy || !prompt.trim(),
+        onClick: () => void generate(),
+        children: lang({
+          message: generateButtonMessage(busy, generated !== null)
+        })
+      }), generated && _jsx(Button, {
+        color: "secondary",
+        size: "field",
+        onClick: () => onSelect(generated.file, generated.alt),
+        children: lang({
+          message: 'SMART.MEDIA_STORAGE.GENERATE.SELECT'
+        })
+      })]
+    }), generated && _jsx(GeneratedPreview, {
+      src: generated.file.url,
+      alt: generated.alt
+    })]
+  });
+};

package/MediaStorage/MediaStorage.js

@@ -1,19 +1,27 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { Button, Checkbox, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, useToast } from '@pushwoosh/dumb-components';
+import { Button, Checkbox, DropdownMenuButton, DropdownMenuItem, DropdownMenuSection, ModalConfirm, Tab, TabBar, TabPanel, Tabs, useToast } from '@pushwoosh/dumb-components';
 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 { CANVA_DESIGN_PRESETS } from './canvaEdit';
 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 { Lang, useLang } from './polyglot';
-import { CanvaActions, CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, SelectionBar, SelectionCount, SourceBadge, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
+import { StockPhotosTab } from './StockPhotosTab';
+import { CanvaActions, CountBadge, Dropzone, DropzoneRow, EmptyState, Grid, HiddenInput, SelectionBar, SearchField, SearchRow, SelectionCount, SourceBadge, TabBody, Tile, TileActions, TileBadges, TileCheckbox, TileImage, UsageLine, WarningBadge } from './styles';
 const UPLOAD_PATH = '/api/media/upload';
 const ALLOWED_IMAGE_EXTENSIONS = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
+const TAB_MESSAGES = {
+  library: 'SMART.MEDIA_STORAGE.TAB.LIBRARY',
+  stock: 'SMART.MEDIA_STORAGE.TAB.STOCK',
+  generate: 'SMART.MEDIA_STORAGE.TAB.GENERATE'
+};
 const isAllowedImage = file => {
   const name = file.name.toLowerCase();
   return ALLOWED_IMAGE_EXTENSIONS.some(ext => name.endsWith(ext));
@@ -30,7 +38,11 @@ export const MediaStorage = ({
   onPageChange,
   onSelect,
   extensions,
-  fileWarning
+  fileWarning,
+  sources,
+  aspectRatios,
+  defaultAspectRatio,
+  onSuggestAlt
 }) => {
   const lang = useLang();
   const {
@@ -64,6 +76,8 @@ export const MediaStorage = ({
   const [selectedUuids, setSelectedUuids] = useState([]);
   const [isBulkDeleteOpen, setIsBulkDeleteOpen] = useState(false);
   const [isBulkDeleting, setIsBulkDeleting] = useState(false);
+  const [search, setSearch] = useState('');
+  const [searchDraft, setSearchDraft] = useState('');
   // Format filtering belongs to the query, not the response: `total` and the page count come
   // from the filtered set, so a client-side filter would paginate over files it then hides.
   const listAsync = useAsync(async () => {
@@ -71,14 +85,15 @@ export const MediaStorage = ({
       application,
       page,
       perPage,
-      extensions
+      extensions,
+      searchByName: search || undefined
     });
     // protobuf JSON omits empty `repeated` fields, so `files` can be undefined.
     return {
       files: response.files ?? [],
       total: response.total
     };
-  }, [rpcGateway, application, page, perPage, extensions, reloadToken]);
+  }, [rpcGateway, application, page, perPage, extensions, search, reloadToken]);
   const usageAsync = useAsync(() => rpcGateway.mediaFiles.GetUsage({
     application
   }), [rpcGateway, application, reloadToken, usageToken]);
@@ -94,6 +109,24 @@ export const MediaStorage = ({
     setReloadToken(token => token + 1);
   };
   const canvaEdit = useCanvaEdit(application, Boolean(canvaStatus?.available), showImportedFirst);
+  const tabs = visibleSources(sources, extensions);
+  const [selectedTab, setTab] = useState(tabs[0]);
+  const tab = tabs.includes(selectedTab) ? selectedTab : tabs[0];
+  const pickStored = (file, alt) => {
+    const warning = fileWarning?.(file);
+    if (warning) {
+      openToast({
+        title: warning,
+        type: 'warning'
+      });
+      setTab('library');
+      return;
+    }
+    if (alt) {
+      onSuggestAlt?.(file, alt);
+    }
+    onSelect(file);
+  };
   const {
     loading
   } = listAsync;
@@ -144,6 +177,14 @@ export const MediaStorage = ({
       cancelled = true;
     };
   }, [listAsync.value, rpcGateway, application, extensions]);
+  const applySearch = value => {
+    if (value === search) return;
+    setSearch(value);
+    if (pageRef.current !== 0) {
+      onPageChange(0);
+    }
+  };
+  const commitSearch = () => applySearch(searchDraft.trim());
   const uploadFiles = async selected => {
     if (selected.length === 0) return;
     const images = selected.filter(isAllowedImage);
@@ -255,7 +296,7 @@ export const MediaStorage = ({
   const isAllSelected = files.length > 0 && selectedUuids.length === files.length;
   const totalPages = Math.ceil(total / perPage);
   const showPagination = !loading && files.length > 0 && totalPages > 1;
-  return _jsxs(_Fragment, {
+  const library = _jsxs(_Fragment, {
     children: [_jsxs(DropzoneRow, {
       children: [_jsxs(Dropzone, {
         type: "button",
@@ -316,6 +357,24 @@ export const MediaStorage = ({
       accept: ALLOWED_IMAGE_EXTENSIONS.join(','),
       multiple: true,
       onChange: event => void uploadFiles(Array.from(event.target.files ?? []))
+    }), _jsx(SearchRow, {
+      children: _jsx(SearchField, {
+        type: "search",
+        value: searchDraft,
+        placeholder: lang({
+          message: 'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER'
+        }),
+        onChange: event => {
+          setSearchDraft(event.target.value);
+          if (event.target.value === '') {
+            applySearch('');
+          }
+        },
+        onKeyDown: event => {
+          if (event.key === 'Enter') commitSearch();
+        },
+        onBlur: commitSearch
+      })
     }), loading && _jsx(EmptyState, {
       children: lang({
         message: 'SMART.MEDIA_STORAGE.LOADING'
@@ -497,7 +556,48 @@ export const MediaStorage = ({
           size: formatBytes(usageAsync.value.totalSize)
         })
       })]
-    }), canvaStatus?.available && _jsx(CanvaImportDrawer, {
+    })]
+  });
+  return _jsxs(_Fragment, {
+    children: [tabs.length > 1 ? _jsxs(Tabs, {
+      activeCode: tab,
+      onChange: code => setTab(code),
+      children: [_jsx(TabBar, {
+        children: tabs.map(source => _jsx(Tab, {
+          code: source,
+          children: _jsx(Lang, {
+            message: TAB_MESSAGES[source]
+          })
+        }, source))
+      }), _jsx(TabPanel, {
+        code: "library",
+        children: _jsx(TabBody, {
+          children: library
+        })
+      }), tabs.includes('stock') && _jsx(TabPanel, {
+        code: "stock",
+        children: _jsx(TabBody, {
+          children: _jsx(StockPhotosTab, {
+            application: application,
+            onImported: (file, alt) => {
+              showImportedFirst();
+              pickStored(file, alt);
+            }
+          })
+        })
+      }), tabs.includes('generate') && _jsx(TabPanel, {
+        code: "generate",
+        children: _jsx(TabBody, {
+          children: _jsx(GenerateImageTab, {
+            application: application,
+            aspectRatios: aspectRatios,
+            defaultAspectRatio: defaultAspectRatio,
+            onGenerated: showImportedFirst,
+            onSelect: pickStored
+          })
+        })
+      })]
+    }) : library, canvaStatus?.available && _jsx(CanvaImportDrawer, {
       application: application,
       isOpen: isCanvaOpen,
       status: canvaStatus,

package/MediaStorage/MediaStoragePaginated.js

@@ -8,21 +8,15 @@ const DEFAULT_PER_PAGE = 30;
  * `MediaStorage` directly to drive the page from the URL or another store.
  */
 export const MediaStoragePaginated = ({
-  application,
   initialPage = 0,
   perPage = DEFAULT_PER_PAGE,
-  onSelect,
-  extensions,
-  fileWarning
+  ...props
 }) => {
   const [page, setPage] = useState(initialPage);
   return _jsx(MediaStorage, {
-    application: application,
+    ...props,
     page: page,
     perPage: perPage,
-    onPageChange: setPage,
-    onSelect: onSelect,
-    extensions: extensions,
-    fileWarning: fileWarning
+    onPageChange: setPage
   });
 };

package/MediaStorage/StockPhotosTab.d.ts

@@ -0,0 +1,9 @@
+import { type FC } from 'react';
+import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
+type StockPhotosTabProps = {
+    application: string;
+    onImported: (file: MediaFile, alt: string) => void;
+};
+/** Pexels search through onyx; picking a photo copies it into the library and hands back the stored file. */
+export declare const StockPhotosTab: FC<StockPhotosTabProps>;
+export {};

package/MediaStorage/StockPhotosTab.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '@pushwoosh/dumb-components';
+import { useSPAContext } from '@pushwoosh/spa-context';
+import { isStockUnconfigured, STOCK_QUERY_MAX_CHARS, toMediaFile } from './aiGallery';
+import { useErrorToast } from './hooks';
+import { Lang, useLang } from './polyglot';
+import { EmptyState, Grid, ProviderNote, SearchField, SearchRow, StockCredit, StockTile, TileImage } from './styles';
+const PEXELS_HOME = 'https://www.pexels.com';
+/** Pexels search through onyx; picking a photo copies it into the library and hands back the stored file. */
+export const StockPhotosTab = ({
+  application,
+  onImported
+}) => {
+  const {
+    rpcGatewayAIAssistant
+  } = useSPAContext();
+  const errorToast = useErrorToast();
+  const lang = useLang();
+  const [query, setQuery] = useState('');
+  const [photos, setPhotos] = useState([]);
+  const [searched, setSearched] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [unconfigured, setUnconfigured] = useState(false);
+  const [importingId, setImportingId] = useState(null);
+  const search = async () => {
+    const q = query.trim();
+    if (!q || loading) return;
+    setLoading(true);
+    try {
+      const res = await rpcGatewayAIAssistant.aiGen.SearchStockPhotos({
+        application,
+        query: q,
+        page: 1,
+        provider: 'STOCK_PROVIDER_PEXELS'
+      });
+      setPhotos(res.photos ?? []);
+      setSearched(true);
+    } catch (error) {
+      if (isStockUnconfigured(error)) {
+        setUnconfigured(true);
+      } else {
+        errorToast('SMART.MEDIA_STORAGE.STOCK.SEARCH_ERROR', error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+  const importPhoto = async photo => {
+    if (importingId) return;
+    setImportingId(photo.id);
+    try {
+      const res = await rpcGatewayAIAssistant.aiGen.ImportStockPhoto({
+        application,
+        provider: 'STOCK_PROVIDER_PEXELS',
+        photoId: photo.id
+      });
+      onImported(toMediaFile(res, 'stock', `pexels-${photo.id}.jpg`), res.alt || photo.alt || '');
+    } catch (error) {
+      errorToast('SMART.MEDIA_STORAGE.STOCK.IMPORT_ERROR', error);
+    } finally {
+      setImportingId(null);
+    }
+  };
+  if (unconfigured) {
+    return _jsx(EmptyState, {
+      children: _jsx(Lang, {
+        message: "SMART.MEDIA_STORAGE.STOCK.UNCONFIGURED"
+      })
+    });
+  }
+  return _jsxs(_Fragment, {
+    children: [_jsxs(SearchRow, {
+      children: [_jsx(SearchField, {
+        type: "text",
+        value: query,
+        maxLength: STOCK_QUERY_MAX_CHARS,
+        placeholder: lang({
+          message: 'SMART.MEDIA_STORAGE.STOCK.SEARCH_PLACEHOLDER'
+        }),
+        onChange: event => setQuery(event.target.value),
+        onKeyDown: event => {
+          if (event.key === 'Enter') void search();
+        }
+      }), _jsx(Button, {
+        color: "secondary",
+        size: "field",
+        isDisabled: loading || !query.trim(),
+        onClick: () => void search(),
+        children: lang({
+          message: loading ? 'SMART.MEDIA_STORAGE.STOCK.SEARCHING' : 'SMART.MEDIA_STORAGE.STOCK.SEARCH_BUTTON'
+        })
+      })]
+    }), !searched && !loading && _jsx(EmptyState, {
+      children: _jsx(Lang, {
+        message: "SMART.MEDIA_STORAGE.STOCK.HINT"
+      })
+    }), searched && !loading && photos.length === 0 && _jsx(EmptyState, {
+      children: _jsx(Lang, {
+        message: "SMART.MEDIA_STORAGE.STOCK.NO_RESULTS"
+      })
+    }), photos.length > 0 && _jsx(Grid, {
+      children: photos.map(photo => _jsxs("div", {
+        children: [_jsx(StockTile, {
+          type: "button",
+          disabled: importingId !== null,
+          title: lang({
+            message: importingId === photo.id ? 'SMART.MEDIA_STORAGE.STOCK.IMPORTING' : 'SMART.MEDIA_STORAGE.STOCK.CLICK_TO_SELECT'
+          }),
+          "$avgColor": photo.avgColor,
+          "$dimmed": importingId !== null && importingId !== photo.id,
+          onClick: () => void importPhoto(photo),
+          children: _jsx(TileImage, {
+            src: photo.thumbUrl,
+            alt: photo.alt
+          })
+        }), _jsx(StockCredit, {
+          href: photo.photographerUrl,
+          target: "_blank",
+          rel: "noreferrer",
+          children: photo.photographer
+        })]
+      }, photo.id))
+    }), _jsxs(ProviderNote, {
+      children: [_jsx(Lang, {
+        message: "SMART.MEDIA_STORAGE.STOCK.ATTRIBUTION"
+      }), ' ', _jsx("a", {
+        href: PEXELS_HOME,
+        target: "_blank",
+        rel: "noreferrer",
+        children: "Pexels"
+      })]
+    })]
+  });
+};

package/MediaStorage/aiGallery.d.ts

@@ -0,0 +1,49 @@
+import type { MediaFile } from '@pushwoosh/rpc-v2-http-api-data/media_files';
+import type { MediaSource } from './types';
+/** Stored file as onyx returns it with a generated or imported image (`AiGenMediaFile`). */
+export type AiGenMediaFile = {
+    uuid: string;
+    filename: string;
+    url: string;
+    fileSize: number;
+    mimeType: string;
+    createdAt: string;
+    description?: string;
+    width: number;
+    height: number;
+    thumbnailUrl: string;
+    thumbnailWidth: number;
+    thumbnailHeight: number;
+};
+/** The part of a Generate / Stock import response the gallery reads; `file` is absent on older onyx builds. */
+export type AiGenStoredImage = {
+    url: string;
+    mediaUuid: string;
+    width: number;
+    height: number;
+    file?: AiGenMediaFile;
+};
+/** Aspect ratios onyx accepts for a generated image, in picker order. */
+export declare const GENERATE_ASPECT_RATIOS: string[];
+/** One Pexels hit from `aiGen.SearchStockPhotos`. */
+export type StockPhoto = {
+    id: string;
+    thumbUrl: string;
+    width: number;
+    height: number;
+    photographer: string;
+    photographerUrl: string;
+    avgColor: string;
+    alt: string;
+};
+/** Longest stock query onyx accepts (`stockphotos.MaxQueryChars`); capping the input keeps 400 meaning "not configured". */
+export declare const STOCK_QUERY_MAX_CHARS = 200;
+/** onyx answers an unconfigured Pexels key with FailedPrecondition, which the gateway turns into HTTP 400. */
+export declare const isStockUnconfigured: (error: unknown) => boolean;
+/**
+ * Sources to show: the requested ones minus those whose output the channel's `extensions` filter rejects.
+ * Stock is always JPEG; Generate is PNG or JPEG depending on the model, so it needs both accepted.
+ */
+export declare const visibleSources: (sources: MediaSource[] | undefined, extensions: string[] | undefined) => MediaSource[];
+/** Media-library file for an image onyx just stored, so `onSelect` gets the same shape as a library pick. */
+export declare const toMediaFile: (stored: AiGenStoredImage, source: "ai" | "stock", fallbackName: string) => MediaFile;

package/MediaStorage/aiGallery.js

@@ -0,0 +1,55 @@
+/** 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". */
+export const STOCK_QUERY_MAX_CHARS = 200;
+/** onyx answers an unconfigured Pexels key with FailedPrecondition, which the gateway turns into HTTP 400. */
+export const isStockUnconfigured = error => error.code === 400;
+const SOURCE_EXTENSIONS = {
+  stock: [['jpg', 'jpeg']],
+  generate: [['png'], ['jpg', 'jpeg']]
+};
+const normalizeExtension = ext => ext.replace(/^\./, '').toLowerCase();
+/**
+ * Sources to show: the requested ones minus those whose output the channel's `extensions` filter rejects.
+ * Stock is always JPEG; Generate is PNG or JPEG depending on the model, so it needs both accepted.
+ */
+export const visibleSources = (sources, extensions) => {
+  const requested = sources?.length ? sources : ['library'];
+  const allowed = extensions?.map(normalizeExtension);
+  return requested.filter(source => {
+    if (source === 'library' || !allowed) return true;
+    return SOURCE_EXTENSIONS[source].every(formats => formats.some(ext => allowed.includes(ext)));
+  });
+};
+/** Media-library file for an image onyx just stored, so `onSelect` gets the same shape as a library pick. */
+export const toMediaFile = (stored, source, fallbackName) => {
+  const {
+    file
+  } = stored;
+  const width = file?.width ?? stored.width;
+  const height = file?.height ?? stored.height;
+  return {
+    uuid: file?.uuid || stored.mediaUuid,
+    filename: file?.filename || fallbackName,
+    url: file?.url || stored.url,
+    fileSize: file?.fileSize ?? 0,
+    mimeType: file?.mimeType ?? '',
+    createdAt: file?.createdAt ? new Date(file.createdAt) : new Date(),
+    description: file?.description,
+    source,
+    version: 0,
+    versionRootUuid: file?.uuid || stored.mediaUuid,
+    versionsCount: 1,
+    meta: {
+      type: 'imageMeta',
+      data: {
+        width,
+        height,
+        thumbnailUrl: file?.thumbnailUrl || file?.url || stored.url,
+        thumbnailWidth: file?.thumbnailWidth ?? width,
+        thumbnailHeight: file?.thumbnailHeight ?? height,
+        ratio: ''
+      }
+    }
+  };
+};

package/MediaStorage/hooks.d.ts

@@ -13,4 +13,7 @@ type CanvaEdit = {
 };
 /** Sends images to Canva and, on the page Canva returns to, stores what the user brought back. */
 export declare function useCanvaEdit(application: string, isAvailable: boolean, onSaved: () => void): CanvaEdit;
+type ErrorToastTitle = 'SMART.MEDIA_STORAGE.STOCK.SEARCH_ERROR' | 'SMART.MEDIA_STORAGE.STOCK.IMPORT_ERROR' | 'SMART.MEDIA_STORAGE.GENERATE.ERROR';
+/** Error toast with a fixed title and the server's message as the description. */
+export declare function useErrorToast(): (title: ErrorToastTitle, error: unknown) => void;
 export {};

package/MediaStorage/hooks.js

@@ -204,4 +204,20 @@ export function useCanvaEdit(application, isAvailable, onSaved) {
     create,
     isSaving
   };
+}
+/** Error toast with a fixed title and the server's message as the description. */
+export function useErrorToast() {
+  const {
+    openToast
+  } = useToast();
+  const lang = useLang();
+  return usePersistentFunction((title, error) => {
+    openToast({
+      title: lang({
+        message: title
+      }),
+      description: error.message,
+      type: 'error'
+    });
+  });
 }

package/MediaStorage/index.d.ts

@@ -1,4 +1,4 @@
 export { MediaStorage } from './MediaStorage';
 export { MediaStoragePaginated } from './MediaStoragePaginated';
-export type { MediaStorageProps, MediaStoragePaginatedProps } from './types';
+export type { MediaSource, MediaStorageProps, MediaStoragePaginatedProps } from './types';
 export { connectCanva, ConsentClosedError, disconnectCanva, PopupBlockedError, UnsafeReturnPageError, } from './canva';

package/MediaStorage/mediaFile.utils.js

@@ -13,7 +13,9 @@ export const getCropCaption = file => {
 };
 const SOURCE_LABELS = {
   canva: 'Canva',
-  figma: 'Figma'
+  figma: 'Figma',
+  ai: 'AI',
+  stock: 'Pexels'
 };
 /** Brand name of the service an image was imported from; undefined for a file uploaded from disk. */
 export const getSourceLabel = file => file.source ? SOURCE_LABELS[file.source] : undefined;

package/MediaStorage/polyglot/messages_ar.js

@@ -79,5 +79,32 @@ export const messages = {
   'SMART.MEDIA_STORAGE.CANVA.SAVED': 'تم الحفظ من Canva',
   'SMART.MEDIA_STORAGE.CANVA.EDIT_COPY': 'تصميم Canva لهذه الصورة يخص مستخدمًا آخر — أنت تحرر نسخة',
   'SMART.MEDIA_STORAGE.CANVA.EDIT_ERROR': 'تعذّر فتح Canva',
-  'SMART.MEDIA_STORAGE.CANVA.SAVE_ERROR': 'تعذّر حفظ التصميم من Canva'
+  'SMART.MEDIA_STORAGE.CANVA.SAVE_ERROR': 'تعذّر حفظ التصميم من Canva',
+  'SMART.MEDIA_STORAGE.TAB.LIBRARY': 'المكتبة',
+  'SMART.MEDIA_STORAGE.TAB.STOCK': 'صور المخزون',
+  'SMART.MEDIA_STORAGE.TAB.GENERATE': 'إنشاء بالذكاء الاصطناعي',
+  'SMART.MEDIA_STORAGE.STOCK.SEARCH_PLACEHOLDER': 'ابحث عن صور مجانية… (مثل: تخفيضات الصيف، قهوة، مدينة)',
+  'SMART.MEDIA_STORAGE.STOCK.SEARCH_BUTTON': 'بحث',
+  'SMART.MEDIA_STORAGE.STOCK.SEARCHING': 'جارٍ البحث…',
+  'SMART.MEDIA_STORAGE.STOCK.HINT': 'ابحث في ملايين الصور المجانية',
+  'SMART.MEDIA_STORAGE.STOCK.NO_RESULTS': 'لم يتم العثور على شيء — جرب بحثًا آخر',
+  'SMART.MEDIA_STORAGE.STOCK.UNCONFIGURED': 'صور المخزون غير مهيأة في هذا التثبيت.',
+  'SMART.MEDIA_STORAGE.STOCK.SEARCH_ERROR': 'فشل البحث في الصور',
+  'SMART.MEDIA_STORAGE.STOCK.IMPORT_ERROR': 'تعذر استيراد الصورة',
+  'SMART.MEDIA_STORAGE.STOCK.IMPORTING': 'جارٍ الاستيراد…',
+  'SMART.MEDIA_STORAGE.STOCK.CLICK_TO_SELECT': 'انقر للتحديد',
+  'SMART.MEDIA_STORAGE.STOCK.ATTRIBUTION': 'الصور مقدمة من',
+  'SMART.MEDIA_STORAGE.GENERATE.PROMPT_PLACEHOLDER': 'صف الصورة… (مثال: صورة مسطحة لمستلزمات نزهة صيفية على خلفية بألوان الباستيل)',
+  'SMART.MEDIA_STORAGE.GENERATE.BUTTON': 'إنشاء',
+  'SMART.MEDIA_STORAGE.GENERATE.AGAIN': 'إنشاء مرة أخرى',
+  'SMART.MEDIA_STORAGE.GENERATE.GENERATING': 'جارٍ الإنشاء…',
+  'SMART.MEDIA_STORAGE.GENERATE.ERROR': 'فشل إنشاء الصورة',
+  'SMART.MEDIA_STORAGE.GENERATE.SELECT': 'إدراج صورة',
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_SQUARE': 'مربع (1:1)',
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_LANDSCAPE': 'منظر طبيعي (4:3)',
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_WIDE': 'عريض (16:9)',
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_BANNER': 'بانر (21:9)',
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_PORTRAIT': 'بورتريه (3:4)',
+  'SMART.MEDIA_STORAGE.GENERATE.ASPECT_TALL': 'طويل (9:16)',
+  'SMART.MEDIA_STORAGE.SEARCH_PLACEHOLDER': 'ابحث باسم الملف…'
 };