@wix/ricos 11.20.3 → 11.20.5

package/dist/es/plugin-gallery/modals/settings/layout-settings/canonicalize-masonry-settings.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/plugin-gallery/modals/settings/layout-settings/canonicalize-masonry-settings.ts"],
-  "sourcesContent": ["import type { GalleryOptions as LegacyGalleryOptions } from './../../../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport type { GalleryOptions } from './../../../../ricos-schema/next-schema/index.js';\n\nimport { resolveGalleryLayout } from '../../../viewer/resolve-gallery-layout.js';\n\nexport const canonicalizeLegacyCollageOptions = (options: GalleryOptions): GalleryOptions => {\n  if (options.layout?.type !== 'COLLAGE') {\n    return options;\n  }\n\n  const layout = resolveGalleryLayout({\n    options: options as unknown as LegacyGalleryOptions,\n    isMobile: false,\n  });\n  if (layout.type !== 'MASONRY') {\n    return options;\n  }\n\n  return {\n    layout: {\n      type: 'MASONRY',\n      orientation: layout.orientation,\n      // Horizontal Masonry is compatibility-only and has no editor control,\n      // so the first live edit must return the gallery to an editable flow.\n      horizontalScroll: false,\n    },\n    item: {\n      targetSize: layout.targetSize,\n      spacing: layout.spacing,\n    },\n  };\n};\n"],
-  "mappings": "AAGA,SAAS,4BAA4B;AAE9B,MAAM,mCAAmC,CAAC,YAA4C;AAC3F,MAAI,QAAQ,QAAQ,SAAS,WAAW;AACtC,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,qBAAqB;AAAA,IAClC;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACD,MAAI,OAAO,SAAS,WAAW;AAC7B,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,aAAa,OAAO;AAAA;AAAA;AAAA,MAGpB,kBAAkB;AAAA,IACpB;AAAA,IACA,MAAM;AAAA,MACJ,YAAY,OAAO;AAAA,MACnB,SAAS,OAAO;AAAA,IAClB;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { GalleryOptions as LegacyGalleryOptions } from './../../../../ricos-schema/legacy/wix/rich_content/v1/index.js';\nimport type { GalleryOptions } from './../../../../ricos-schema/next-schema/index.js';\n\nimport {\n  DEFAULT_TARGET_SIZE,\n  resolveGalleryLayout,\n} from '../../../viewer/resolve-gallery-layout.js';\n\nexport const canonicalizeLegacyCollageOptions = (options: GalleryOptions): GalleryOptions => {\n  if (options.layout?.type !== 'COLLAGE') {\n    return options;\n  }\n\n  const layout = resolveGalleryLayout({\n    options: options as unknown as LegacyGalleryOptions,\n    isMobile: false,\n  });\n  if (layout.type !== 'COLLAGE' && layout.type !== 'MASONRY') {\n    return options;\n  }\n\n  // The editor offers no Collage, so the first live edit turns it into Masonry\n  // with Masonry's defaults, keeping only the resolved spacing.\n  return {\n    layout: {\n      type: 'MASONRY',\n      orientation: 'ROWS',\n      // Horizontal Masonry is compatibility-only and has no editor control,\n      // so the first live edit must return the gallery to an editable flow.\n      horizontalScroll: false,\n    },\n    item: {\n      targetSize: DEFAULT_TARGET_SIZE,\n      spacing: layout.spacing,\n    },\n  };\n};\n"],
+  "mappings": "AAGA;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAEA,MAAM,mCAAmC,CAAC,YAA4C;AAC3F,MAAI,QAAQ,QAAQ,SAAS,WAAW;AACtC,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,qBAAqB;AAAA,IAClC;AAAA,IACA,UAAU;AAAA,EACZ,CAAC;AACD,MAAI,OAAO,SAAS,aAAa,OAAO,SAAS,WAAW;AAC1D,WAAO;AAAA,EACT;AAIA,SAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,aAAa;AAAA;AAAA;AAAA,MAGb,kBAAkB;AAAA,IACpB;AAAA,IACA,MAAM;AAAA,MACJ,YAAY;AAAA,MACZ,SAAS,OAAO;AAAA,IAClB;AAAA,EACF;AACF;",
   "names": []
 }

package/dist/es/plugin-gallery/modals/settings/layout-settings/layout-controls-section/image-ratio-control-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "8e527df6";
+var styleDataHash = "7690697f";
 const injectCss = (() => {
-  var css = `.mixc0{border:1px solid #000}.sQ-AH{height:33.75%;width:60%}.BoP3u{height:45%;width:60%}.zAq7L{height:60%;width:60%}.B7L1X{height:60%;width:45%}._7GE6u{height:60%;width:33.75%}`;
+  var css = `.R59X6{border:1px solid #000}.wwrem{height:33.75%;width:60%}.-ox9g{height:45%;width:60%}._64Bm2{height:60%;width:60%}._-6LhX{height:60%;width:45%}.KsuL6{height:60%;width:33.75%}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,12 +21,12 @@ const injectCss = (() => {
 });
 injectCss();
 var image_ratio_control_default = {
-  "imageRatioSelector_ratioIcon": "mixc0",
-  "imageRatioSelector_16_9": "sQ-AH",
-  "imageRatioSelector_4_3": "BoP3u",
-  "imageRatioSelector_1_1": "zAq7L",
-  "imageRatioSelector_3_4": "B7L1X",
-  "imageRatioSelector_9_16": "_7GE6u"
+  "imageRatioSelector_ratioIcon": "R59X6",
+  "imageRatioSelector_16_9": "wwrem",
+  "imageRatioSelector_4_3": "-ox9g",
+  "imageRatioSelector_1_1": "_64Bm2",
+  "imageRatioSelector_3_4": "_-6LhX",
+  "imageRatioSelector_9_16": "KsuL6"
 };
 export {
   image_ratio_control_default as default,

package/dist/es/plugin-gallery/modals/settings/layout-settings/layout-controls-section/image-ratio-control-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/plugin-gallery/modals/settings/layout-settings/layout-controls-section/image-ratio-control.scss"],
-  "sourcesContent": ["var styleDataHash = '8e527df6';  \nexport const injectCss = (() => {\n  var css = `.mixc0{border:1px solid #000}.sQ-AH{height:33.75%;width:60%}.BoP3u{height:45%;width:60%}.zAq7L{height:60%;width:60%}.B7L1X{height:60%;width:45%}._7GE6u{height:60%;width:33.75%}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"imageRatioSelector_ratioIcon\": \"mixc0\",\n  \"imageRatioSelector_16_9\": \"sQ-AH\",\n  \"imageRatioSelector_4_3\": \"BoP3u\",\n  \"imageRatioSelector_1_1\": \"zAq7L\",\n  \"imageRatioSelector_3_4\": \"B7L1X\",\n  \"imageRatioSelector_9_16\": \"_7GE6u\"\n};"],
+  "sourcesContent": ["var styleDataHash = '7690697f';  \nexport const injectCss = (() => {\n  var css = `.R59X6{border:1px solid #000}.wwrem{height:33.75%;width:60%}.-ox9g{height:45%;width:60%}._64Bm2{height:60%;width:60%}._-6LhX{height:60%;width:45%}.KsuL6{height:60%;width:33.75%}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"imageRatioSelector_ratioIcon\": \"R59X6\",\n  \"imageRatioSelector_16_9\": \"wwrem\",\n  \"imageRatioSelector_4_3\": \"-ox9g\",\n  \"imageRatioSelector_1_1\": \"_64Bm2\",\n  \"imageRatioSelector_3_4\": \"_-6LhX\",\n  \"imageRatioSelector_9_16\": \"KsuL6\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,8BAAQ;AAAA,EACb,gCAAgC;AAAA,EAChC,2BAA2B;AAAA,EAC3B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,0BAA0B;AAAA,EAC1B,2BAA2B;AAC7B;",
   "names": []
 }

package/dist/es/plugin-gallery/modals/settings/layout-settings/layout-controls-section/layout-controls-section.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/plugin-gallery/modals/settings/layout-settings/layout-controls-section/layout-controls-section.tsx"],
-  "sourcesContent": ["import { Box, Divider, Text } from '@wix/design-system';\nimport React, { useContext } from 'react';\n\nimport { RicosContext } from './../../../../../ricos-context/index.js';\nimport type {\n  GalleryOptions_ItemStyle_Crop,\n  GalleryOptions_Layout_Type,\n  GalleryOptions_Thumbnails_Alignment,\n} from './../../../../../ricos-schema/next-schema/index.js';\nimport { GalleryOptions_Layout_Orientation } from './../../../../../ricos-schema/next-schema/index.js';\nimport type { LogBiFn } from './../../../../../_shared/bi-context-provider/bi-context-provider.js';\nimport type { PmGalleryNode } from './../../../../../_shared/pm-node-types.js';\nimport {\n  SliderWithInput,\n  usePanelContainerElement,\n} from './../../../../../ui-components/index.js';\n\nimport {\n  LAYOUT_SETTINGS_ITEMS_PER_ROW_INPUT,\n  LAYOUT_SETTINGS_ITEMS_PER_ROW_SLIDER,\n  LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_INPUT,\n  LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_SLIDER,\n  LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_INPUT,\n  LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_SLIDER,\n  LAYOUT_SETTINGS_THUMBNAIL_SIZE_INPUT,\n  LAYOUT_SETTINGS_THUMBNAIL_SIZE_SLIDER,\n} from '../../../../data-hooks.js';\nimport { canonicalizeLegacyCollageOptions } from '../canonicalize-masonry-settings.js';\nimport { ImageOrientationControl } from './image-orientation-control.js';\nimport { ImageRatioControl } from './image-ratio-control.js';\nimport { ThumbnailAlignmentControl } from './thumbnail-alignment-control.js';\nimport { ThumbnailCropControl } from './thumbnail-crop-control.js';\n\ntype LayoutControlsSectionProps = {\n  layout: GalleryOptions_Layout_Type;\n  data: PmGalleryNode['attrs'];\n  updateData: (data: PmGalleryNode['attrs']) => void;\n  logBi: LogBiFn;\n};\n\ntype SettingControl =\n  | 'imageOrientation'\n  | 'thumbnailSize'\n  | 'spacing'\n  | 'itemsPerRow'\n  | 'thumbnailCrop'\n  | 'imageRatio'\n  | 'thumbnailAlignment'\n  | 'thumbnailSpacing'\n  | 'divider';\n\nconst controlsByLayout: Partial<Record<GalleryOptions_Layout_Type, SettingControl[]>> = {\n  MASONRY: ['imageOrientation', 'divider', 'thumbnailSize', 'spacing'],\n  GRID: ['thumbnailCrop', 'imageRatio', 'divider', 'itemsPerRow', 'spacing'],\n  THUMBNAIL: ['thumbnailAlignment', 'divider', 'thumbnailSpacing'],\n  SLIDER: ['spacing', 'thumbnailCrop', 'imageRatio'],\n  SLIDESHOW: [],\n  PANORAMA: ['spacing'],\n  COLUMN: ['spacing'],\n  MAGIC: [],\n  FULLSIZE: [],\n};\n\nexport const LayoutControlsSection: React.FC<LayoutControlsSectionProps> = ({\n  data,\n  updateData,\n  layout,\n  logBi,\n}) => {\n  const { t } = useContext(RicosContext);\n  const containerEl = usePanelContainerElement();\n\n  // A legacy Collage renders with the Masonry defaults, so the controls must\n  // show those values too. They reach the document only once a control changes.\n  const options = data.options ? canonicalizeLegacyCollageOptions(data.options) : data.options;\n\n  const getValueFromOptionsItem = (name: 'targetSize' | 'spacing' | 'crop' | 'ratio') =>\n    options?.item?.[name];\n\n  const getValueFromOptionsThumbnails = (name: 'spacing' | 'placement') =>\n    options?.thumbnails?.[name];\n\n  const getNumericValue = (value: $TSFixMe, defaultValue: $TSFixMe) =>\n    typeof value === 'number' ? value : defaultValue;\n\n  const applyGallerySetting = (setting: $TSFixMe, key: $TSFixMe) => {\n    const componentData = {\n      ...data,\n      options: {\n        ...options,\n        [key]: { ...options?.[key as keyof typeof options], ...setting },\n      },\n    };\n    updateData(componentData);\n  };\n\n  const controls: Record<SettingControl, React.ReactNode> = {\n    itemsPerRow: (\n      <SliderWithInput\n        min={1}\n        max={5}\n        label={t('GallerySettings_Sliders_Items_Per_Row')}\n        sliderDataHook={LAYOUT_SETTINGS_ITEMS_PER_ROW_SLIDER}\n        inputDataHook={LAYOUT_SETTINGS_ITEMS_PER_ROW_INPUT}\n        onChange={value => applyGallerySetting({ numberOfColumns: value }, 'layout')}\n        tooltipAppendTo={containerEl}\n        value={options?.layout?.numberOfColumns ?? 1}\n        logBi={logBi}\n      />\n    ),\n    thumbnailSize: (\n      <SliderWithInput\n        min={10}\n        max={1000}\n        sliderDataHook={LAYOUT_SETTINGS_THUMBNAIL_SIZE_SLIDER}\n        inputDataHook={LAYOUT_SETTINGS_THUMBNAIL_SIZE_INPUT}\n        onChange={value => applyGallerySetting({ targetSize: value }, 'item')}\n        value={getNumericValue(getValueFromOptionsItem('targetSize'), 300)}\n        label={\n          options?.layout?.orientation === 'COLUMNS'\n            ? t('GallerySettings_LayoutControlSection_Column')\n            : t('GallerySettings_LayoutControlSection_Row')\n        }\n        tooltipAppendTo={containerEl}\n        logBi={logBi}\n      />\n    ),\n    spacing: (\n      <SliderWithInput\n        onChange={value => applyGallerySetting({ spacing: value }, 'item')}\n        value={getNumericValue(getValueFromOptionsItem('spacing'), 5)}\n        label={t('GallerySettings_Spacing_Between_Items')}\n        sliderDataHook={LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_SLIDER}\n        inputDataHook={LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_INPUT}\n        tooltipTextKey={t('GallerySettings_Spacing_Between_Items_Tooltip')}\n        min={0}\n        max={100}\n        tooltipAppendTo={containerEl}\n        logBi={logBi}\n      />\n    ),\n    thumbnailSpacing: (\n      <SliderWithInput\n        onChange={value => applyGallerySetting({ spacing: Math.trunc(value) }, 'thumbnails')}\n        value={getNumericValue(getValueFromOptionsThumbnails('spacing'), 5)}\n        label={t('GallerySettings_Spacing_Between_Items')}\n        sliderDataHook={LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_SLIDER}\n        inputDataHook={LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_INPUT}\n        tooltipTextKey={t('GallerySettings_Spacing_Between_Items_Tooltip')}\n        min={0}\n        max={100}\n        tooltipAppendTo={containerEl}\n        logBi={logBi}\n      />\n    ),\n    thumbnailCrop: (\n      <ThumbnailCropControl\n        onChange={value => applyGallerySetting({ crop: value }, 'item')}\n        value={getValueFromOptionsItem('crop') as GalleryOptions_ItemStyle_Crop}\n        logBi={logBi}\n      />\n    ),\n    imageRatio: (\n      <ImageRatioControl\n        onChange={value => applyGallerySetting({ ratio: value }, 'item')}\n        value={getValueFromOptionsItem('ratio') as number}\n        logBi={logBi}\n      />\n    ),\n    imageOrientation: (\n      <ImageOrientationControl\n        onChange={value => applyGallerySetting({ orientation: value }, 'layout')}\n        value={options?.layout?.orientation ?? GalleryOptions_Layout_Orientation.COLUMNS}\n        logBi={logBi}\n      />\n    ),\n    thumbnailAlignment: (\n      <ThumbnailAlignmentControl\n        onChange={value => applyGallerySetting({ placement: value }, 'thumbnails')}\n        value={getValueFromOptionsThumbnails('placement') as GalleryOptions_Thumbnails_Alignment}\n        logBi={logBi}\n      />\n    ),\n    divider: <Divider />,\n  };\n\n  const layoutControls = controlsByLayout[layout] ?? [];\n  if (layoutControls.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <Box marginTop=\"SP3\" marginBottom=\"SP2\" marginInline=\"-24px\">\n        <Divider />\n      </Box>\n      <Box direction=\"vertical\" gap=\"SP2\">\n        <Text weight=\"bold\" size=\"small\">\n          {t('GalleryPlugin_Layout_Options_Title')}\n        </Text>\n        {layoutControls.map(name => controls[name])}\n      </Box>\n    </>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { Box, Divider, Text } from '@wix/design-system';\nimport React, { useContext } from 'react';\n\nimport { RicosContext } from './../../../../../ricos-context/index.js';\nimport type {\n  GalleryOptions_ItemStyle_Crop,\n  GalleryOptions_Layout_Type,\n  GalleryOptions_Thumbnails_Alignment,\n} from './../../../../../ricos-schema/next-schema/index.js';\nimport { GalleryOptions_Layout_Orientation } from './../../../../../ricos-schema/next-schema/index.js';\nimport type { LogBiFn } from './../../../../../_shared/bi-context-provider/bi-context-provider.js';\nimport type { PmGalleryNode } from './../../../../../_shared/pm-node-types.js';\nimport {\n  SliderWithInput,\n  usePanelContainerElement,\n} from './../../../../../ui-components/index.js';\n\nimport {\n  LAYOUT_SETTINGS_ITEMS_PER_ROW_INPUT,\n  LAYOUT_SETTINGS_ITEMS_PER_ROW_SLIDER,\n  LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_INPUT,\n  LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_SLIDER,\n  LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_INPUT,\n  LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_SLIDER,\n  LAYOUT_SETTINGS_THUMBNAIL_SIZE_INPUT,\n  LAYOUT_SETTINGS_THUMBNAIL_SIZE_SLIDER,\n} from '../../../../data-hooks.js';\nimport { canonicalizeLegacyCollageOptions } from '../canonicalize-masonry-settings.js';\nimport { ImageOrientationControl } from './image-orientation-control.js';\nimport { ImageRatioControl } from './image-ratio-control.js';\nimport { ThumbnailAlignmentControl } from './thumbnail-alignment-control.js';\nimport { ThumbnailCropControl } from './thumbnail-crop-control.js';\n\ntype LayoutControlsSectionProps = {\n  layout: GalleryOptions_Layout_Type;\n  data: PmGalleryNode['attrs'];\n  updateData: (data: PmGalleryNode['attrs']) => void;\n  logBi: LogBiFn;\n};\n\ntype SettingControl =\n  | 'imageOrientation'\n  | 'thumbnailSize'\n  | 'spacing'\n  | 'itemsPerRow'\n  | 'thumbnailCrop'\n  | 'imageRatio'\n  | 'thumbnailAlignment'\n  | 'thumbnailSpacing'\n  | 'divider';\n\nconst controlsByLayout: Partial<Record<GalleryOptions_Layout_Type, SettingControl[]>> = {\n  MASONRY: ['imageOrientation', 'divider', 'thumbnailSize', 'spacing'],\n  GRID: ['thumbnailCrop', 'imageRatio', 'divider', 'itemsPerRow', 'spacing'],\n  THUMBNAIL: ['thumbnailAlignment', 'divider', 'thumbnailSpacing'],\n  SLIDER: ['spacing', 'thumbnailCrop', 'imageRatio'],\n  SLIDESHOW: [],\n  PANORAMA: ['spacing'],\n  COLUMN: ['spacing'],\n  MAGIC: [],\n  FULLSIZE: [],\n};\n\nexport const LayoutControlsSection: React.FC<LayoutControlsSectionProps> = ({\n  data,\n  updateData,\n  layout,\n  logBi,\n}) => {\n  const { t } = useContext(RicosContext);\n  const containerEl = usePanelContainerElement();\n\n  // A legacy Collage has no controls of its own and becomes Masonry with the\n  // Masonry defaults on its first edit, so the controls show those values. They\n  // reach the document only once a control changes.\n  const options = data.options ? canonicalizeLegacyCollageOptions(data.options) : data.options;\n\n  const getValueFromOptionsItem = (name: 'targetSize' | 'spacing' | 'crop' | 'ratio') =>\n    options?.item?.[name];\n\n  const getValueFromOptionsThumbnails = (name: 'spacing' | 'placement') =>\n    options?.thumbnails?.[name];\n\n  const getNumericValue = (value: $TSFixMe, defaultValue: $TSFixMe) =>\n    typeof value === 'number' ? value : defaultValue;\n\n  const applyGallerySetting = (setting: $TSFixMe, key: $TSFixMe) => {\n    const componentData = {\n      ...data,\n      options: {\n        ...options,\n        [key]: { ...options?.[key as keyof typeof options], ...setting },\n      },\n    };\n    updateData(componentData);\n  };\n\n  const controls: Record<SettingControl, React.ReactNode> = {\n    itemsPerRow: (\n      <SliderWithInput\n        min={1}\n        max={5}\n        label={t('GallerySettings_Sliders_Items_Per_Row')}\n        sliderDataHook={LAYOUT_SETTINGS_ITEMS_PER_ROW_SLIDER}\n        inputDataHook={LAYOUT_SETTINGS_ITEMS_PER_ROW_INPUT}\n        onChange={value => applyGallerySetting({ numberOfColumns: value }, 'layout')}\n        tooltipAppendTo={containerEl}\n        value={options?.layout?.numberOfColumns ?? 1}\n        logBi={logBi}\n      />\n    ),\n    thumbnailSize: (\n      <SliderWithInput\n        min={10}\n        max={1000}\n        sliderDataHook={LAYOUT_SETTINGS_THUMBNAIL_SIZE_SLIDER}\n        inputDataHook={LAYOUT_SETTINGS_THUMBNAIL_SIZE_INPUT}\n        onChange={value => applyGallerySetting({ targetSize: value }, 'item')}\n        value={getNumericValue(getValueFromOptionsItem('targetSize'), 300)}\n        label={\n          options?.layout?.orientation === 'COLUMNS'\n            ? t('GallerySettings_LayoutControlSection_Column')\n            : t('GallerySettings_LayoutControlSection_Row')\n        }\n        tooltipAppendTo={containerEl}\n        logBi={logBi}\n      />\n    ),\n    spacing: (\n      <SliderWithInput\n        onChange={value => applyGallerySetting({ spacing: value }, 'item')}\n        value={getNumericValue(getValueFromOptionsItem('spacing'), 5)}\n        label={t('GallerySettings_Spacing_Between_Items')}\n        sliderDataHook={LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_SLIDER}\n        inputDataHook={LAYOUT_SETTINGS_SPACING_BETWEEN_ITEMS_INPUT}\n        tooltipTextKey={t('GallerySettings_Spacing_Between_Items_Tooltip')}\n        min={0}\n        max={100}\n        tooltipAppendTo={containerEl}\n        logBi={logBi}\n      />\n    ),\n    thumbnailSpacing: (\n      <SliderWithInput\n        onChange={value => applyGallerySetting({ spacing: Math.trunc(value) }, 'thumbnails')}\n        value={getNumericValue(getValueFromOptionsThumbnails('spacing'), 5)}\n        label={t('GallerySettings_Spacing_Between_Items')}\n        sliderDataHook={LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_SLIDER}\n        inputDataHook={LAYOUT_SETTINGS_SPACING_BETWEEN_THUMBNAILS_INPUT}\n        tooltipTextKey={t('GallerySettings_Spacing_Between_Items_Tooltip')}\n        min={0}\n        max={100}\n        tooltipAppendTo={containerEl}\n        logBi={logBi}\n      />\n    ),\n    thumbnailCrop: (\n      <ThumbnailCropControl\n        onChange={value => applyGallerySetting({ crop: value }, 'item')}\n        value={getValueFromOptionsItem('crop') as GalleryOptions_ItemStyle_Crop}\n        logBi={logBi}\n      />\n    ),\n    imageRatio: (\n      <ImageRatioControl\n        onChange={value => applyGallerySetting({ ratio: value }, 'item')}\n        value={getValueFromOptionsItem('ratio') as number}\n        logBi={logBi}\n      />\n    ),\n    imageOrientation: (\n      <ImageOrientationControl\n        onChange={value => applyGallerySetting({ orientation: value }, 'layout')}\n        value={options?.layout?.orientation ?? GalleryOptions_Layout_Orientation.COLUMNS}\n        logBi={logBi}\n      />\n    ),\n    thumbnailAlignment: (\n      <ThumbnailAlignmentControl\n        onChange={value => applyGallerySetting({ placement: value }, 'thumbnails')}\n        value={getValueFromOptionsThumbnails('placement') as GalleryOptions_Thumbnails_Alignment}\n        logBi={logBi}\n      />\n    ),\n    divider: <Divider />,\n  };\n\n  const layoutControls = controlsByLayout[layout] ?? [];\n  if (layoutControls.length === 0) {\n    return null;\n  }\n\n  return (\n    <>\n      <Box marginTop=\"SP3\" marginBottom=\"SP2\" marginInline=\"-24px\">\n        <Divider />\n      </Box>\n      <Box direction=\"vertical\" gap=\"SP2\">\n        <Text weight=\"bold\" size=\"small\">\n          {t('GalleryPlugin_Layout_Options_Title')}\n        </Text>\n        {layoutControls.map(name => controls[name])}\n      </Box>\n    </>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/es/plugin-gallery/modals/settings/layout-settings/layout-controls-section/thumbnail-alignment-control-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "facaa946";
+var styleDataHash = "e0e44fe9";
 const injectCss = (() => {
-  var css = `.DbQEw{transform:rotate(0)}.QYzpD{transform:rotate(90deg)}._3CcX2{transform:rotate(180deg)}.XJq9J{transform:rotate(270deg)}.lfgBw{margin:5px}`;
+  var css = `.ACj8a{transform:rotate(0)}.d2uIq{transform:rotate(90deg)}._6RZR0{transform:rotate(180deg)}.aJcFK{transform:rotate(270deg)}.FH1xN{margin:5px}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,11 +21,11 @@ const injectCss = (() => {
 });
 injectCss();
 var thumbnail_alignment_control_default = {
-  "thumbnailPlacementSelector_BOTTOM": "DbQEw",
-  "thumbnailPlacementSelector_LEFT": "QYzpD",
-  "thumbnailPlacementSelector_TOP": "_3CcX2",
-  "thumbnailPlacementSelector_RIGHT": "XJq9J",
-  "thumbnailPlacementSelector": "lfgBw"
+  "thumbnailPlacementSelector_BOTTOM": "ACj8a",
+  "thumbnailPlacementSelector_LEFT": "d2uIq",
+  "thumbnailPlacementSelector_TOP": "_6RZR0",
+  "thumbnailPlacementSelector_RIGHT": "aJcFK",
+  "thumbnailPlacementSelector": "FH1xN"
 };
 export {
   thumbnail_alignment_control_default as default,

package/dist/es/plugin-gallery/modals/settings/layout-settings/layout-controls-section/thumbnail-alignment-control-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/plugin-gallery/modals/settings/layout-settings/layout-controls-section/thumbnail-alignment-control.scss"],
-  "sourcesContent": ["var styleDataHash = 'facaa946';  \nexport const injectCss = (() => {\n  var css = `.DbQEw{transform:rotate(0)}.QYzpD{transform:rotate(90deg)}._3CcX2{transform:rotate(180deg)}.XJq9J{transform:rotate(270deg)}.lfgBw{margin:5px}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"thumbnailPlacementSelector_BOTTOM\": \"DbQEw\",\n  \"thumbnailPlacementSelector_LEFT\": \"QYzpD\",\n  \"thumbnailPlacementSelector_TOP\": \"_3CcX2\",\n  \"thumbnailPlacementSelector_RIGHT\": \"XJq9J\",\n  \"thumbnailPlacementSelector\": \"lfgBw\"\n};"],
+  "sourcesContent": ["var styleDataHash = 'e0e44fe9';  \nexport const injectCss = (() => {\n  var css = `.ACj8a{transform:rotate(0)}.d2uIq{transform:rotate(90deg)}._6RZR0{transform:rotate(180deg)}.aJcFK{transform:rotate(270deg)}.FH1xN{margin:5px}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"thumbnailPlacementSelector_BOTTOM\": \"ACj8a\",\n  \"thumbnailPlacementSelector_LEFT\": \"d2uIq\",\n  \"thumbnailPlacementSelector_TOP\": \"_6RZR0\",\n  \"thumbnailPlacementSelector_RIGHT\": \"aJcFK\",\n  \"thumbnailPlacementSelector\": \"FH1xN\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,sCAAQ;AAAA,EACb,qCAAqC;AAAA,EACrC,mCAAmC;AAAA,EACnC,kCAAkC;AAAA,EAClC,oCAAoC;AAAA,EACpC,8BAA8B;AAChC;",
   "names": []
 }

package/dist/es/plugin-gallery/modals/settings/media-settings/media-list/sortable-item-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "f7f72f80";
+var styleDataHash = "4582aa1d";
 const injectCss = (() => {
-  var css = `.U4-ZL{border-radius:var(--ricos-settings-whitebox-border-radius,0);cursor:grab;height:100%}.U4-ZL:active{cursor:grabbing}.U4-ZL:hover{opacity:.7}`;
+  var css = `.lkaeb{border-radius:var(--ricos-settings-whitebox-border-radius,0);cursor:grab;height:100%}.lkaeb:active{cursor:grabbing}.lkaeb:hover{opacity:.7}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,7 +21,7 @@ const injectCss = (() => {
 });
 injectCss();
 var sortable_item_default = {
-  "itemImage": "U4-ZL"
+  "itemImage": "lkaeb"
 };
 export {
   sortable_item_default as default,

package/dist/es/plugin-gallery/modals/settings/media-settings/media-list/sortable-item-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/plugin-gallery/modals/settings/media-settings/media-list/sortable-item.scss"],
-  "sourcesContent": ["var styleDataHash = 'f7f72f80';  \nexport const injectCss = (() => {\n  var css = `.U4-ZL{border-radius:var(--ricos-settings-whitebox-border-radius,0);cursor:grab;height:100%}.U4-ZL:active{cursor:grabbing}.U4-ZL:hover{opacity:.7}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"itemImage\": \"U4-ZL\"\n};"],
+  "sourcesContent": ["var styleDataHash = '4582aa1d';  \nexport const injectCss = (() => {\n  var css = `.lkaeb{border-radius:var(--ricos-settings-whitebox-border-radius,0);cursor:grab;height:100%}.lkaeb:active{cursor:grabbing}.lkaeb:hover{opacity:.7}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"itemImage\": \"lkaeb\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,wBAAQ;AAAA,EACb,aAAa;AACf;",
   "names": []
 }

package/dist/es/plugin-gallery/modals/settings/media-settings/media-list/sortable-list-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "2f3f2c60";
+var styleDataHash = "2cd43483";
 const injectCss = (() => {
-  var css = `.j5bqW{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));grid-gap:12px}.j5bqW .GG7Pm{aspect-ratio:1}.j5bqW .M0DQg{aspect-ratio:1}`;
+  var css = `.p19Q-{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));grid-gap:12px}.p19Q- .zS5OC{aspect-ratio:1}.p19Q- .XQyVr{aspect-ratio:1}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,9 +21,9 @@ const injectCss = (() => {
 });
 injectCss();
 var sortable_list_default = {
-  "container": "j5bqW",
-  "item": "GG7Pm",
-  "fileUpload": "M0DQg"
+  "container": "p19Q-",
+  "item": "zS5OC",
+  "fileUpload": "XQyVr"
 };
 export {
   sortable_list_default as default,

package/dist/es/plugin-gallery/modals/settings/media-settings/media-list/sortable-list-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/plugin-gallery/modals/settings/media-settings/media-list/sortable-list.scss"],
-  "sourcesContent": ["var styleDataHash = '2f3f2c60';  \nexport const injectCss = (() => {\n  var css = `.j5bqW{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));grid-gap:12px}.j5bqW .GG7Pm{aspect-ratio:1}.j5bqW .M0DQg{aspect-ratio:1}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"container\": \"j5bqW\",\n  \"item\": \"GG7Pm\",\n  \"fileUpload\": \"M0DQg\"\n};"],
+  "sourcesContent": ["var styleDataHash = '2cd43483';  \nexport const injectCss = (() => {\n  var css = `.p19Q-{display:grid;grid-template-columns:repeat(3,minmax(72px,1fr));grid-gap:12px}.p19Q- .zS5OC{aspect-ratio:1}.p19Q- .XQyVr{aspect-ratio:1}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"container\": \"p19Q-\",\n  \"item\": \"zS5OC\",\n  \"fileUpload\": \"XQyVr\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,wBAAQ;AAAA,EACb,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,cAAc;AAChB;",
   "names": []
 }

package/dist/es/plugin-gallery/statics/styles/gallery-component-scss.js

@@ -1,6 +1,6 @@
-var styleDataHash = "173a900e";
+var styleDataHash = "058d1285";
 const injectCss = (() => {
-  var css = `.w4CXZ{background-color:#fff;height:100%;width:100%}`;
+  var css = `._82bHu{background-color:#fff;height:100%;width:100%}`;
   var isTest = typeof process !== "undefined" && process.env && false;
   if (isTest || !css || typeof document === "undefined") {
     return;
@@ -21,7 +21,7 @@ const injectCss = (() => {
 });
 injectCss();
 var gallery_component_default = {
-  "mobileNativeLoaderContainer": "w4CXZ"
+  "mobileNativeLoaderContainer": "_82bHu"
 };
 export {
   gallery_component_default as default,

package/dist/es/plugin-gallery/statics/styles/gallery-component-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-gallery/statics/styles/gallery-component.scss"],
-  "sourcesContent": ["var styleDataHash = '173a900e';  \nexport const injectCss = (() => {\n  var css = `.w4CXZ{background-color:#fff;height:100%;width:100%}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"mobileNativeLoaderContainer\": \"w4CXZ\"\n};"],
+  "sourcesContent": ["var styleDataHash = '058d1285';  \nexport const injectCss = (() => {\n  var css = `._82bHu{background-color:#fff;height:100%;width:100%}`;\n  var isTest = typeof process !== 'undefined' && process.env && process.env['NODE_ENV'] === 'test';\n\n  if (isTest || !css || typeof document === 'undefined') { return; }\n  if (document.querySelector('style[data-ricos-style-hash=\"' + styleDataHash + '\"]')) { return; }\n\n  var head = document.head || document.getElementsByTagName('head')[0];\n  var style = document.createElement('style');\n  style.setAttribute('data-ricos-style-hash', styleDataHash);\n  style.type = 'text/css';\n\n  head.appendChild(style);\n\n  if (style.styleSheet) {\n    style.styleSheet.cssText = css;\n  } else {\n    style.appendChild(document.createTextNode(css));\n  }\n});\n\ninjectCss();\n\n\n\nexport default {\n  \"mobileNativeLoaderContainer\": \"_82bHu\"\n};"],
   "mappings": "AAAA,IAAI,gBAAgB;AACb,MAAM,aAAa,MAAM;AAC9B,MAAI,MAAM;AACV,MAAI,SAAS,OAAO,YAAY,eAAe,QAAQ,OAAO;AAE9D,MAAI,UAAU,CAAC,OAAO,OAAO,aAAa,aAAa;AAAE;AAAA,EAAQ;AACjE,MAAI,SAAS,cAAc,kCAAkC,gBAAgB,IAAI,GAAG;AAAE;AAAA,EAAQ;AAE9F,MAAI,OAAO,SAAS,QAAQ,SAAS,qBAAqB,MAAM,EAAE,CAAC;AACnE,MAAI,QAAQ,SAAS,cAAc,OAAO;AAC1C,QAAM,aAAa,yBAAyB,aAAa;AACzD,QAAM,OAAO;AAEb,OAAK,YAAY,KAAK;AAEtB,MAAI,MAAM,YAAY;AACpB,UAAM,WAAW,UAAU;AAAA,EAC7B,OAAO;AACL,UAAM,YAAY,SAAS,eAAe,GAAG,CAAC;AAAA,EAChD;AACF;AAEA,UAAU;AAIV,IAAO,4BAAQ;AAAA,EACb,+BAA+B;AACjC;",
   "names": []
 }

package/dist/es/plugin-gallery/statics/styles/gallery-media-scss.js

@@ -1,25 +1,25 @@
 var gallery_media_default = {
-  "media": "_6J9Gq",
-  "fit": "_8jRNg",
-  "failure": "zW7oN",
-  "playButton": "D5Y79",
-  "playIcon": "IezIb",
-  "navigationArrow": "mXyIJ",
-  "arrowStart": "_9BJRu",
-  "arrowEnd": "oedEd",
-  "arrowIcon": "jXvzn",
-  "fill": "iNS5R",
-  "intrinsic": "I9s2T",
-  "cell": "oiGga",
-  "expandButton": "qQ8vW",
-  "expandIcon": "jeOL0",
-  "expandChrome": "p4-Fv",
-  "expandIconGlyph": "_8DiSE",
-  "editorOverlay": "_31MjQ",
-  "horizontal": "_3m4Rz",
-  "viewport": "_6URoZ",
-  "track": "yqSZS",
-  "previous": "wEHVx"
+  "media": "iizEA",
+  "fit": "_3zeqy",
+  "failure": "YjyUY",
+  "playButton": "eite2",
+  "playIcon": "okpUz",
+  "navigationArrow": "Vvdkm",
+  "arrowStart": "C0w3T",
+  "arrowEnd": "OyB8O",
+  "arrowIcon": "J0i1x",
+  "fill": "b2o-E",
+  "intrinsic": "Wvbdk",
+  "cell": "PXWWe",
+  "expandButton": "AuHrT",
+  "expandIcon": "MGV-x",
+  "expandChrome": "VMu-h",
+  "expandIconGlyph": "_7dFXn",
+  "editorOverlay": "ynMWI",
+  "horizontal": "nDKdf",
+  "viewport": "_4JEMd",
+  "track": "ySUzr",
+  "previous": "sCtZw"
 };
 export {
   gallery_media_default as default

package/dist/es/plugin-gallery/statics/styles/gallery-media-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-gallery/statics/styles/gallery-media.scss"],
-  "sourcesContent": ["export default {\n  \"media\": \"_6J9Gq\",\n  \"fit\": \"_8jRNg\",\n  \"failure\": \"zW7oN\",\n  \"playButton\": \"D5Y79\",\n  \"playIcon\": \"IezIb\",\n  \"navigationArrow\": \"mXyIJ\",\n  \"arrowStart\": \"_9BJRu\",\n  \"arrowEnd\": \"oedEd\",\n  \"arrowIcon\": \"jXvzn\",\n  \"fill\": \"iNS5R\",\n  \"intrinsic\": \"I9s2T\",\n  \"cell\": \"oiGga\",\n  \"expandButton\": \"qQ8vW\",\n  \"expandIcon\": \"jeOL0\",\n  \"expandChrome\": \"p4-Fv\",\n  \"expandIconGlyph\": \"_8DiSE\",\n  \"editorOverlay\": \"_31MjQ\",\n  \"horizontal\": \"_3m4Rz\",\n  \"viewport\": \"_6URoZ\",\n  \"track\": \"yqSZS\",\n  \"previous\": \"wEHVx\"\n};"],
+  "sourcesContent": ["export default {\n  \"media\": \"iizEA\",\n  \"fit\": \"_3zeqy\",\n  \"failure\": \"YjyUY\",\n  \"playButton\": \"eite2\",\n  \"playIcon\": \"okpUz\",\n  \"navigationArrow\": \"Vvdkm\",\n  \"arrowStart\": \"C0w3T\",\n  \"arrowEnd\": \"OyB8O\",\n  \"arrowIcon\": \"J0i1x\",\n  \"fill\": \"b2o-E\",\n  \"intrinsic\": \"Wvbdk\",\n  \"cell\": \"PXWWe\",\n  \"expandButton\": \"AuHrT\",\n  \"expandIcon\": \"MGV-x\",\n  \"expandChrome\": \"VMu-h\",\n  \"expandIconGlyph\": \"_7dFXn\",\n  \"editorOverlay\": \"ynMWI\",\n  \"horizontal\": \"nDKdf\",\n  \"viewport\": \"_4JEMd\",\n  \"track\": \"ySUzr\",\n  \"previous\": \"sCtZw\"\n};"],
   "mappings": "AAAA,IAAO,wBAAQ;AAAA,EACb,SAAS;AAAA,EACT,OAAO;AAAA,EACP,WAAW;AAAA,EACX,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,mBAAmB;AAAA,EACnB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,YAAY;AACd;",
   "names": []
 }

package/dist/es/plugin-gallery/statics/styles/viewer-scss.js

@@ -1,5 +1,5 @@
 var viewer_default = {
-  "galleryContainer": "_1zfUR"
+  "galleryContainer": "c7xbR"
 };
 export {
   viewer_default as default

package/dist/es/plugin-gallery/statics/styles/viewer-scss.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/plugin-gallery/statics/styles/viewer.scss"],
-  "sourcesContent": ["export default {\n  \"galleryContainer\": \"_1zfUR\"\n};"],
+  "sourcesContent": ["export default {\n  \"galleryContainer\": \"c7xbR\"\n};"],
   "mappings": "AAAA,IAAO,iBAAQ;AAAA,EACb,oBAAoB;AACtB;",
   "names": []
 }

package/dist/es/plugin-gallery/viewer/collage-groups.js

@@ -0,0 +1,127 @@
+const COLUMNS_GROUP_TYPES = {
+  lll: ["1", "2h"],
+  llp: ["1", "3r"],
+  lpl: ["1", "2h"],
+  pll: ["1", "2h", "3l"],
+  lpp: ["1", "2h", "3r"],
+  plp: ["1", "2h", "3l", "3r"],
+  ppl: ["1", "2h", "3l"],
+  ppp: ["1", "2h", "3l", "3r"]
+};
+const LANDSCAPE_MIN_RATIO = 0.999;
+const MIN_ITEM_SIZE = 120;
+const SIZE_TOLERANCE = 1e-6;
+const THRESHOLD_MARGIN = 0.01;
+const ratioOf = (item) => item.width / item.height;
+const GROUP_SIZE = { "1": 1, "2h": 2, "3l": 3, "3r": 3 };
+const GROUP_SHAPES = {
+  "1": ["big"],
+  "2h": ["small", "small"],
+  "3l": ["big", "small", "small"],
+  "3r": ["small", "small", "big"]
+};
+const getItemSizes = (type, ratios, width, spacing) => {
+  const [a, b, c] = ratios;
+  switch (type) {
+    case "1":
+      return [[width - spacing, (width - spacing) / a]];
+    case "2h": {
+      const height = (width - 2 * spacing) / (a + b);
+      return [
+        [a * height, height],
+        [b * height, height]
+      ];
+    }
+    case "3l":
+    case "3r": {
+      const large = type === "3l" ? a : c;
+      const stacked = type === "3l" ? [b, c] : [a, b];
+      const groupRatio = (stacked[0] + stacked[1]) / (a * b + b * c + a * c);
+      const largeHeight = width * groupRatio + spacing * (1 - groupRatio * (2 + large));
+      const stackWidth = width - large * largeHeight - 2 * spacing;
+      const stack = stacked.map((ratio) => [stackWidth, stackWidth / ratio]);
+      const largeSize = [large * largeHeight, largeHeight];
+      return type === "3l" ? [largeSize, ...stack] : [...stack, largeSize];
+    }
+  }
+};
+const fitsMinItemSize = (type, ratios, width, spacing) => type === "1" || getItemSizes(type, ratios, width, spacing).every(
+  (size) => Math.min(...size) >= MIN_ITEM_SIZE - SIZE_TOLERANCE
+);
+const getMinColumn = (type, ratios, spacing) => {
+  if (type === "1") {
+    return 0;
+  }
+  const atZero = getItemSizes(type, ratios, 0, spacing).flat();
+  const atOne = getItemSizes(type, ratios, 1, spacing).flat();
+  return Math.max(...atZero.map((size, index) => (MIN_ITEM_SIZE - size) / (atOne[index] - size)));
+};
+const getColumnsGroupType = (items, first, forcedSize) => {
+  if (forcedSize === 1) {
+    return "1";
+  }
+  const orientations = items.slice(first, first + 3).map((item) => ratioOf(item) < LANDSCAPE_MIN_RATIO ? "p" : "l").join("");
+  const types = forcedSize === 2 ? ["1", "2h"] : COLUMNS_GROUP_TYPES[orientations];
+  const dense = types[types.length - 1].startsWith("3") ? types.slice(1) : types;
+  return dense[(items[first].seed ?? 0) % dense.length];
+};
+const getColumnsShapes = (items, width, spacing) => {
+  const shapes = [];
+  while (shapes.length < items.length) {
+    const first = shapes.length;
+    let type = "1";
+    for (let forcedSize = Math.min(3, items.length - first); forcedSize > 0; forcedSize--) {
+      type = getColumnsGroupType(items, first, forcedSize);
+      const ratios = items.slice(first, first + GROUP_SIZE[type]).map(ratioOf);
+      if (fitsMinItemSize(type, ratios, width, spacing)) {
+        break;
+      }
+    }
+    shapes.push(...GROUP_SHAPES[type]);
+  }
+  return shapes;
+};
+const getPairs = (shapes) => {
+  const pairs = [];
+  for (let index = 0; index < shapes.length - 1; index++) {
+    if (shapes[index] === "small" && shapes[index + 1] === "small") {
+      pairs.push([index, index + 1]);
+      index++;
+    }
+  }
+  return pairs;
+};
+const MAX_GROUPINGS = 64;
+const getThresholds = (items, spacing) => {
+  const thresholds = /* @__PURE__ */ new Set();
+  items.forEach((_, first) => {
+    for (let forcedSize = Math.min(3, items.length - first); forcedSize > 1; forcedSize--) {
+      const type = getColumnsGroupType(items, first, forcedSize);
+      if (type !== "1") {
+        const ratios = items.slice(first, first + GROUP_SIZE[type]).map(ratioOf);
+        thresholds.add(getMinColumn(type, ratios, spacing));
+      }
+    }
+  });
+  return [...thresholds].sort((a, b) => b - a);
+};
+const getCollageRegimes = (items, spacing, maxRegimes) => {
+  const singles = items.map(() => "big");
+  const shapesAt = (threshold) => threshold === void 0 ? singles : getColumnsShapes(items, threshold + THRESHOLD_MARGIN, spacing);
+  const thresholds = getThresholds(items, spacing).slice(0, MAX_GROUPINGS);
+  const wider = [];
+  let shapes = shapesAt(thresholds[0]);
+  for (let index = 0; index < thresholds.length && wider.length < maxRegimes - 1; index++) {
+    const below = shapesAt(thresholds[index + 1]);
+    if (below.some((shape, item) => shape !== shapes[item])) {
+      wider.push({ minColumn: thresholds[index], shapes });
+      shapes = below;
+    }
+  }
+  return [{ minColumn: 0, shapes: singles }, ...wider.reverse()];
+};
+export {
+  getCollageRegimes,
+  getPairs
+};
+//# sourceMappingURL=collage-groups.js.map

package/dist/es/plugin-gallery/viewer/collage-groups.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-gallery/viewer/collage-groups.ts"],
+  "sourcesContent": ["import type { NormalizedGalleryItem } from '../media/normalize-gallery-items.js';\n\n/** A pair item, or a single as wide as its column. */\nexport type CellShape = 'small' | 'big';\n\n/**\n * The grouping of a Collage from one column width up, until the next regime's.\n * `minColumn` counts one spacing in, as ProGallery measured columns.\n */\nexport type CollageRegime = { minColumn: number; shapes: CellShape[] };\n\ntype GroupType = '1' | '2h' | '3l' | '3r';\n\n// ProGallery's group types for Columns by the orientations of the next three\n// items, without the types its Collage did not allow.\nconst COLUMNS_GROUP_TYPES: Record<string, GroupType[]> = {\n  lll: ['1', '2h'],\n  llp: ['1', '3r'],\n  lpl: ['1', '2h'],\n  pll: ['1', '2h', '3l'],\n  lpp: ['1', '2h', '3r'],\n  plp: ['1', '2h', '3l', '3r'],\n  ppl: ['1', '2h', '3l'],\n  ppp: ['1', '2h', '3l', '3r'],\n};\n\n// ProGallery counted anything from this ratio up as a landscape.\nconst LANDSCAPE_MIN_RATIO = 0.999;\n\n// ProGallery broke a group up once any of its items would fall below this size\n// on its shorter side.\nconst MIN_ITEM_SIZE = 120;\n// Floating-point headroom, so an item exactly at the minimum keeps fitting.\nconst SIZE_TOLERANCE = 1e-6;\n\n// Rounding headroom for a group exactly at its threshold.\nconst THRESHOLD_MARGIN = 0.01;\n\nconst ratioOf = (item: NormalizedGalleryItem) => item.width / item.height;\n\nconst GROUP_SIZE: Record<GroupType, number> = { '1': 1, '2h': 2, '3l': 3, '3r': 3 };\n\n// The grid has no group of two items stacked beside a third, so those take a\n// single and a pair, the single where ProGallery put the large item.\nconst GROUP_SHAPES: Record<GroupType, CellShape[]> = {\n  '1': ['big'],\n  '2h': ['small', 'small'],\n  '3l': ['big', 'small', 'small'],\n  '3r': ['small', 'small', 'big'],\n};\n\n// Item [width, height] pairs of a group laid out in a column `width` wide, one\n// spacing included, by ProGallery's Group formulas.\nconst getItemSizes = (type: GroupType, ratios: number[], width: number, spacing: number) => {\n  const [a, b, c] = ratios;\n  switch (type) {\n    case '1':\n      return [[width - spacing, (width - spacing) / a]];\n    case '2h': {\n      const height = (width - 2 * spacing) / (a + b);\n      return [\n        [a * height, height],\n        [b * height, height],\n      ];\n    }\n    case '3l':\n    case '3r': {\n      const large = type === '3l' ? a : c;\n      const stacked = type === '3l' ? [b, c] : [a, b];\n      const groupRatio = (stacked[0] + stacked[1]) / (a * b + b * c + a * c);\n      const largeHeight = width * groupRatio + spacing * (1 - groupRatio * (2 + large));\n      const stackWidth = width - large * largeHeight - 2 * spacing;\n      const stack = stacked.map(ratio => [stackWidth, stackWidth / ratio]);\n      const largeSize = [large * largeHeight, largeHeight];\n      return type === '3l' ? [largeSize, ...stack] : [...stack, largeSize];\n    }\n  }\n};\n\nconst fitsMinItemSize = (type: GroupType, ratios: number[], width: number, spacing: number) =>\n  type === '1' ||\n  getItemSizes(type, ratios, width, spacing).every(\n    size => Math.min(...size) >= MIN_ITEM_SIZE - SIZE_TOLERANCE\n  );\n\n// The narrowest column that fits a group: every item size is linear in the\n// column width, so two samples give each one's threshold.\nconst getMinColumn = (type: GroupType, ratios: number[], spacing: number) => {\n  if (type === '1') {\n    return 0;\n  }\n  const atZero = getItemSizes(type, ratios, 0, spacing).flat();\n  const atOne = getItemSizes(type, ratios, 1, spacing).flat();\n  return Math.max(...atZero.map((size, index) => (MIN_ITEM_SIZE - size) / (atOne[index] - size)));\n};\n\nconst getColumnsGroupType = (\n  items: NormalizedGalleryItem[],\n  first: number,\n  forcedSize: number\n): GroupType => {\n  if (forcedSize === 1) {\n    return '1';\n  }\n  const orientations = items\n    .slice(first, first + 3)\n    .map(item => (ratioOf(item) < LANDSCAPE_MIN_RATIO ? 'p' : 'l'))\n    .join('');\n  const types: GroupType[] = forcedSize === 2 ? ['1', '2h'] : COLUMNS_GROUP_TYPES[orientations];\n  // ProGallery's 0.8 collage density dropped singles wherever a group of three\n  // was possible.\n  const dense = types[types.length - 1].startsWith('3') ? types.slice(1) : types;\n  return dense[(items[first].seed ?? 0) % dense.length];\n};\n\n// ProGallery's Columns grouping in a column `width` wide (one spacing\n// included): each group picked from its first item, and broken up into\n// fewer items while any would fall below MIN_ITEM_SIZE.\nconst getColumnsShapes = (items: NormalizedGalleryItem[], width: number, spacing: number) => {\n  const shapes: CellShape[] = [];\n  while (shapes.length < items.length) {\n    const first = shapes.length;\n    let type: GroupType = '1';\n    for (let forcedSize = Math.min(3, items.length - first); forcedSize > 0; forcedSize--) {\n      type = getColumnsGroupType(items, first, forcedSize);\n      const ratios = items.slice(first, first + GROUP_SIZE[type]).map(ratioOf);\n      if (fitsMinItemSize(type, ratios, width, spacing)) {\n        break;\n      }\n    }\n    shapes.push(...GROUP_SHAPES[type]);\n  }\n  return shapes;\n};\n\n/** Index pairs of consecutive small cells. */\nexport const getPairs = (shapes: CellShape[]) => {\n  const pairs: [number, number][] = [];\n  for (let index = 0; index < shapes.length - 1; index++) {\n    if (shapes[index] === 'small' && shapes[index + 1] === 'small') {\n      pairs.push([index, index + 1]);\n      index++;\n    }\n  }\n  return pairs;\n};\n\n// Groupings computed while looking for the widest regimes, past which the\n// narrower widths render all singles, which always fit.\nconst MAX_GROUPINGS = 64;\n\n// Column widths where a grouping can change: where the group ProGallery would\n// pick at an item, or the pair it falls back to, starts to fit. Widest first.\nconst getThresholds = (items: NormalizedGalleryItem[], spacing: number) => {\n  const thresholds = new Set<number>();\n  items.forEach((_, first) => {\n    for (let forcedSize = Math.min(3, items.length - first); forcedSize > 1; forcedSize--) {\n      const type = getColumnsGroupType(items, first, forcedSize);\n      if (type !== '1') {\n        const ratios = items.slice(first, first + GROUP_SIZE[type]).map(ratioOf);\n        thresholds.add(getMinColumn(type, ratios, spacing));\n      }\n    }\n  });\n  return [...thresholds].sort((a, b) => b - a);\n};\n\n/**\n * The Columns Collage's groupings by column width, narrowest first: all\n * singles below the first regime's `minColumn`, and at most `maxRegimes`.\n */\nexport const getCollageRegimes = (\n  items: NormalizedGalleryItem[],\n  spacing: number,\n  maxRegimes: number\n): CollageRegime[] => {\n  const singles: CellShape[] = items.map(() => 'big');\n  // Just past a threshold, where the group's sizes reach the minimum.\n  const shapesAt = (threshold: number | undefined) =>\n    threshold === undefined\n      ? singles\n      : getColumnsShapes(items, threshold + THRESHOLD_MARGIN, spacing);\n\n  // From the widest grouping down, each regime starts at the threshold below\n  // which the grouping changes. Past the limit, narrower widths stay singles.\n  const thresholds = getThresholds(items, spacing).slice(0, MAX_GROUPINGS);\n  const wider: CollageRegime[] = [];\n  let shapes = shapesAt(thresholds[0]);\n  for (let index = 0; index < thresholds.length && wider.length < maxRegimes - 1; index++) {\n    const below = shapesAt(thresholds[index + 1]);\n    if (below.some((shape, item) => shape !== shapes[item])) {\n      wider.push({ minColumn: thresholds[index], shapes });\n      shapes = below;\n    }\n  }\n  return [{ minColumn: 0, shapes: singles }, ...wider.reverse()];\n};\n"],
+  "mappings": "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",
+  "names": []
+}