@wix/ricos 11.20.3 → 11.20.5

package/dist/cjs/plugin-gallery/viewer/collage-rows.js

@@ -0,0 +1,361 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var collage_rows_exports = {};
+__export(collage_rows_exports, {
+  getRowsRegimes: () => getRowsRegimes,
+  layoutRows: () => layoutRows
+});
+module.exports = __toCommonJS(collage_rows_exports);
+const ROWS_GROUP_TYPES = {
+  lll: ["1", "2v", "3t", "3b"],
+  llp: ["1", "2v", "3t"],
+  lpl: ["1", "2v", "3t", "3b"],
+  pll: ["1", "2v", "3b"],
+  lpp: ["1", "2v", "3t"],
+  plp: ["1", "2v"],
+  ppl: ["1", "3b"],
+  ppp: ["1", "2h"]
+};
+const GROUP_SIZE = { "1": 1, "2h": 2, "2v": 2, "3t": 3, "3b": 3 };
+const LANDSCAPE_MIN_RATIO = 0.999;
+const MIN_ITEM_SIZE = 120;
+const SIZE_TOLERANCE = 1e-6;
+const INCOMPLETE_STRIP_STRETCH = 1.5;
+const MIN_JUSTIFIED_SIZE = 30;
+const MIN_GALLERY = 160;
+const MAX_GALLERY = 4e3;
+const FAR_GALLERY = 1e9;
+const PROBE_FACTOR = 1.1;
+const REGIME_PRECISION = 0.25;
+const PREFERRED_GALLERIES = [740, 360, 1e3, 1300, 1700];
+const ratioOf = (item) => item.width / item.height;
+const getGroupWidth = (type, [a, b, c], height, spacing) => {
+  switch (type) {
+    case "1":
+      return height * a + spacing * (1 - a);
+    case "2h":
+      return height * (a + b) + spacing * (2 - a - b);
+    case "2v": {
+      const ratio = 1 / (1 / a + 1 / b);
+      return height * ratio + spacing * (1 - 2 * ratio);
+    }
+    case "3t":
+    case "3b": {
+      const pair = type === "3t" ? b + c : a + b;
+      const large = type === "3t" ? a : c;
+      const ratio = 1 / (1 / pair + 1 / large);
+      return height * ratio + spacing * (2 / pair + 1 / large - 2) * ratio;
+    }
+  }
+};
+const getItemRects = (type, ratios, width, height, spacing) => {
+  const [a, b, c] = ratios;
+  const natural = getGroupWidth(type, ratios, height, spacing);
+  switch (type) {
+    case "1":
+      return [[0, 0, width - spacing, height - spacing]];
+    case "2v": {
+      const bottomHeight = (natural - spacing) / b;
+      return [
+        [0, 0, width - spacing, height - bottomHeight - 2 * spacing],
+        [0, height - bottomHeight - spacing, width - spacing, bottomHeight]
+      ];
+    }
+    case "2h": {
+      const itemHeight = height - spacing;
+      const rightWidth = itemHeight * b;
+      return [
+        [0, 0, width - rightWidth - 2 * spacing, itemHeight],
+        [width - rightWidth - spacing, 0, rightWidth, itemHeight]
+      ];
+    }
+    case "3t": {
+      const topHeight = (natural - spacing) / a;
+      const pairHeight = height - topHeight - 2 * spacing;
+      const rightWidth = pairHeight * c;
+      return [
+        [0, 0, width - spacing, topHeight],
+        [0, height - pairHeight - spacing, width - rightWidth - 2 * spacing, pairHeight],
+        [width - rightWidth - spacing, height - pairHeight - spacing, rightWidth, pairHeight]
+      ];
+    }
+    case "3b": {
+      const bottomHeight = (natural - spacing) / c;
+      const pairHeight = height - bottomHeight - 2 * spacing;
+      const rightWidth = pairHeight * b;
+      return [
+        [0, 0, width - rightWidth - 2 * spacing, pairHeight],
+        [width - rightWidth - spacing, 0, rightWidth, pairHeight],
+        [0, height - bottomHeight - spacing, width - spacing, bottomHeight]
+      ];
+    }
+  }
+};
+const getGroupType = (items, first, forcedSize, seed) => {
+  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", "2v"] : ROWS_GROUP_TYPES[orientations];
+  const dense = types[types.length - 1].startsWith("3") ? types.slice(1) : types;
+  return dense[seed % dense.length];
+};
+const getGroup = (items, first, seed, rowHeight, spacing, singles) => {
+  const maxSize = singles.has(first) ? 1 : Math.min(3, items.length - first);
+  for (let forcedSize = maxSize; forcedSize > 1; forcedSize--) {
+    const type = getGroupType(items, first, forcedSize, seed);
+    const ratios2 = items.slice(first, first + GROUP_SIZE[type]).map(ratioOf);
+    const width = getGroupWidth(type, ratios2, rowHeight, spacing);
+    const fits = type === "1" || getItemRects(type, ratios2, width, rowHeight, spacing).every(
+      ([, , itemWidth, itemHeight]) => Math.min(itemWidth, itemHeight) >= MIN_ITEM_SIZE - SIZE_TOLERANCE
+    );
+    if (fits) {
+      return { type, first, ratios: ratios2, ratio: width / rowHeight };
+    }
+  }
+  const ratios = [ratioOf(items[first])];
+  return {
+    type: "1",
+    first,
+    ratios,
+    ratio: getGroupWidth("1", ratios, rowHeight, spacing) / rowHeight
+  };
+};
+const isStripFull = (stripRatio, groupRatio, isLastGroup, gallery, rowHeight) => {
+  if (stripRatio === 0) {
+    return false;
+  }
+  const withGroup = gallery / (stripRatio + groupRatio) - rowHeight;
+  const withoutGroup = gallery / stripRatio - rowHeight;
+  const endsCloserWithout = Math.abs(withoutGroup) < Math.abs(withGroup);
+  const isFull = withoutGroup < 0 || withGroup < 0 && endsCloserWithout;
+  return isFull && (!isLastGroup || endsCloserWithout);
+};
+const layoutRows = (items, gallery, spacing, targetSize) => {
+  const rowHeight = Math.floor(targetSize) + Math.ceil(spacing);
+  const rects = [];
+  const keys = [];
+  const singles = /* @__PURE__ */ new Set();
+  const breaks = /* @__PURE__ */ new Set();
+  let top = 0;
+  let strip = [];
+  let stripRatio = 0;
+  let stripFirst = 0;
+  let first = 0;
+  const placeStrip = (height, justified) => {
+    let left = 0;
+    for (let index = 0; index < strip.length; index++) {
+      const group = strip[index];
+      const isLast = index === strip.length - 1;
+      const width = isLast && justified ? gallery - left : getGroupWidth(group.type, group.ratios, height, spacing);
+      const groupRects = getItemRects(group.type, group.ratios, width, height, spacing);
+      const collapses = justified && groupRects.some(
+        ([, , itemWidth, itemHeight]) => Math.min(itemWidth, itemHeight) < MIN_JUSTIFIED_SIZE
+      );
+      if (collapses && group.type !== "1") {
+        singles.add(group.first);
+        return false;
+      }
+      const breakAt = index > 0 ? group.first : strip[index + 1]?.first;
+      if (collapses && breakAt !== void 0 && !breaks.has(breakAt)) {
+        breaks.add(breakAt);
+        return false;
+      }
+      if (collapses && strip.length === 1) {
+        const itemWidth = gallery - spacing;
+        rects[group.first] = [0, top, itemWidth, itemWidth / group.ratios[0]];
+        keys.push(`=${group.first}`);
+        top += itemWidth / group.ratios[0] + spacing;
+        return true;
+      }
+      groupRects.forEach(([x, y, itemWidth, itemHeight], offset) => {
+        rects[group.first + offset] = [left + x, top + y, itemWidth, itemHeight];
+      });
+      left += width;
+    }
+    keys.push(`${strip.map((group) => `${group.type}${group.first}`).join()}${justified ? "" : "!"}`);
+    top += height;
+    return true;
+  };
+  const closeStrip = (height, justified) => {
+    if (!placeStrip(height, justified)) {
+      first = stripFirst;
+    }
+    strip = [];
+    stripRatio = 0;
+    stripFirst = first;
+  };
+  while (first < items.length) {
+    const seed = keys.length + 1 + strip.length + 1;
+    const group = getGroup(items, first, seed, rowHeight, spacing, singles);
+    const isLastGroup = first + GROUP_SIZE[group.type] >= items.length;
+    if (strip.length > 0 && (breaks.has(first) || isStripFull(stripRatio, group.ratio, isLastGroup, gallery, rowHeight))) {
+      closeStrip(gallery / stripRatio, true);
+      continue;
+    }
+    strip.push(group);
+    stripRatio += group.ratio;
+    first += GROUP_SIZE[group.type];
+    if (first >= items.length) {
+      const justifiedHeight = gallery / stripRatio;
+      const isIncomplete = rowHeight * INCOMPLETE_STRIP_STRETCH < justifiedHeight;
+      closeStrip(isIncomplete ? rowHeight : justifiedHeight, !isIncomplete);
+    }
+  }
+  return { rects, key: keys.join("|") };
+};
+const toLinear = (atLow, atHigh, low, high) => {
+  const a = (atHigh - atLow) / (high - low);
+  return [a, atLow - a * low];
+};
+const valueAt = ([a, b], gallery) => a * gallery + b;
+const getProbes = () => {
+  const probes = [];
+  for (let gallery = MIN_GALLERY; gallery < MAX_GALLERY; gallery *= PROBE_FACTOR) {
+    probes.push(gallery);
+  }
+  return [...probes, MAX_GALLERY, FAR_GALLERY];
+};
+const MAX_REPAIRS = 4;
+const getStackedRects = (items, spacing) => {
+  let y = [0, 0];
+  return items.map((item) => {
+    const ratio = ratioOf(item);
+    const height = [1 / ratio, -spacing / ratio];
+    const rect = { x: [0, 0], y, width: [1, -spacing], height };
+    y = [y[0] + height[0], y[1] + height[1] + spacing];
+    return rect;
+  });
+};
+const getRowsRegimes = (items, spacing, targetSize, maxRegimes) => {
+  const keyAt = (gallery) => layoutRows(items, gallery, spacing, targetSize).key;
+  const narrowDown = (outside, inside, key) => {
+    if (keyAt(outside) === key) {
+      return outside;
+    }
+    let [low, high] = [outside, inside];
+    while (Math.abs(high - low) > REGIME_PRECISION) {
+      const middle = (low + high) / 2;
+      if (keyAt(middle) === key) {
+        high = middle;
+      } else {
+        low = middle;
+      }
+    }
+    return high;
+  };
+  const regimeAround = (gallery, below, above) => {
+    const key = keyAt(gallery);
+    const start = narrowDown(below, gallery, key);
+    const end = narrowDown(above, gallery, key);
+    const margin = Math.min(REGIME_PRECISION, (end - start) / 4);
+    const [low, high] = end - start > 0 ? [start + margin, end - margin] : [start, start];
+    const atLow = layoutRows(items, low, spacing, targetSize).rects;
+    const atHigh = high > low ? layoutRows(items, high, spacing, targetSize).rects : atLow;
+    return {
+      start,
+      end,
+      rects: atLow.map((rect, item) => {
+        const [x, y, width, height] = rect.map(
+          (value, coordinate) => high > low ? toLinear(value, atHigh[item][coordinate], low, high) : [0, value]
+        );
+        return { x, y, width, height };
+      })
+    };
+  };
+  const fitsOver = ({ start, end, rects }, to) => rects.every(
+    ({ x, width, height }) => [start, to].every((gallery) => {
+      const floorOf = (size) => Math.min(MIN_JUSTIFIED_SIZE, valueAt(size, start), valueAt(size, end)) - REGIME_PRECISION;
+      return valueAt(width, gallery) >= floorOf(width) && valueAt(height, gallery) >= floorOf(height) && valueAt(x, gallery) + valueAt(width, gallery) <= gallery - spacing + REGIME_PRECISION;
+    })
+  );
+  const probes = getProbes();
+  const runs = probes.reduce((found, gallery, index) => {
+    const key = keyAt(gallery);
+    const last = found[found.length - 1];
+    if (last?.key === key) {
+      last.last = index;
+    } else {
+      found.push({ key, first: index, last: index });
+    }
+    return found;
+  }, []);
+  const regimeOfRun = (index) => {
+    const run = runs[index];
+    return regimeAround(
+      probes[run.first],
+      probes[Math.max(0, run.first - 1)],
+      probes[Math.min(probes.length - 1, run.last + 1)]
+    );
+  };
+  const runAt = (gallery) => Math.max(
+    0,
+    runs.findIndex((run) => probes[run.last] >= gallery)
+  );
+  const keptRuns = /* @__PURE__ */ new Set([0, runs.length - 1]);
+  const slots = maxRegimes + (runs[runs.length - 1].first === probes.length - 1 ? 1 : 0);
+  PREFERRED_GALLERIES.map(runAt).forEach((index) => {
+    if (keptRuns.size < slots) {
+      keptRuns.add(index);
+    }
+  });
+  const kept = [...keptRuns].sort((a, b) => a - b).map(regimeOfRun);
+  const stacked = getStackedRects(items, spacing);
+  let repairs = 0;
+  for (let index = 0; index < kept.length - 1; ) {
+    const [regime, next] = [kept[index], kept[index + 1]];
+    if (fitsOver(regime, next.start - REGIME_PRECISION) || next.start - regime.end < 2 * REGIME_PRECISION) {
+      index++;
+      continue;
+    }
+    if (repairs >= MAX_REPAIRS) {
+      kept.splice(index + 1, 0, { start: regime.end, end: next.start, rects: stacked });
+      index += 2;
+      continue;
+    }
+    repairs++;
+    kept.splice(index + 1, 0, regimeAround((regime.end + next.start) / 2, regime.end, next.start));
+  }
+  const widest = kept[kept.length - 1];
+  const holdsBeyond = widest.rects.every(
+    ({ x, width, height }) => width[0] >= -SIZE_TOLERANCE && height[0] >= -SIZE_TOLERANCE && x[0] + width[0] <= 1 + SIZE_TOLERANCE
+  );
+  if (!holdsBeyond || !fitsOver(widest, widest.end)) {
+    kept.push({ start: widest.end, end: Infinity, rects: stacked });
+  }
+  const narrowest = kept[0];
+  const narrowestChecked = Math.min(spacing + MIN_JUSTIFIED_SIZE, narrowest.start);
+  const holdsAt = (gallery) => narrowest.rects.every(
+    ({ x, width, height }) => valueAt(width, gallery) >= -REGIME_PRECISION && valueAt(height, gallery) >= -REGIME_PRECISION && valueAt(x, gallery) + valueAt(width, gallery) <= gallery - spacing + REGIME_PRECISION
+  );
+  let stackedBelow = 0;
+  if (!holdsAt(narrowestChecked)) {
+    let [low, high] = [narrowestChecked, narrowest.start];
+    while (high - low > REGIME_PRECISION) {
+      const middle = (low + high) / 2;
+      [low, high] = holdsAt(middle) ? [low, middle] : [middle, high];
+    }
+    stackedBelow = high;
+  }
+  return kept.map((regime, position) => ({
+    minGallery: position === 0 ? stackedBelow : regime.start,
+    rects: regime.rects
+  }));
+};
+//# sourceMappingURL=collage-rows.js.map

package/dist/cjs/plugin-gallery/viewer/collage-rows.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-gallery/viewer/collage-rows.ts"],
+  "sourcesContent": ["import type { NormalizedGalleryItem } from '../media/normalize-gallery-items.js';\n\n// A port of ProGallery's Rows Collage layout (pro-layouts 5, MIT): groups of\n// up to three items fill strips across the gallery, each strip justified to\n// the gallery width unless it is the last one and would grow too tall.\n//\n// Within a range of gallery widths where the strips and groups stay the same,\n// every item's position and size are linear in the gallery width, so\n// `layout-collage.scss` can lay them out exactly from coefficients alone.\n\n/** `value = a × gallery + b` in px, `gallery` being the width plus spacing. */\nexport type LinearSize = [a: number, b: number];\n\nexport type RowsRect = { x: LinearSize; y: LinearSize; width: LinearSize; height: LinearSize };\n\n/** A layout from a gallery width (plus spacing) up, until the next regime's. */\nexport type RowsRegime = { minGallery: number; rects: RowsRect[] };\n\ntype GroupType = '1' | '2h' | '2v' | '3t' | '3b';\n\n// ProGallery's group types for Rows by the orientations of the next three\n// items, without the types its Collage did not allow.\nconst ROWS_GROUP_TYPES: Record<string, GroupType[]> = {\n  lll: ['1', '2v', '3t', '3b'],\n  llp: ['1', '2v', '3t'],\n  lpl: ['1', '2v', '3t', '3b'],\n  pll: ['1', '2v', '3b'],\n  lpp: ['1', '2v', '3t'],\n  plp: ['1', '2v'],\n  ppl: ['1', '3b'],\n  ppp: ['1', '2h'],\n};\n\nconst GROUP_SIZE: Record<GroupType, number> = { '1': 1, '2h': 2, '2v': 2, '3t': 3, '3b': 3 };\n\nconst LANDSCAPE_MIN_RATIO = 0.999;\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// A last strip may stay narrower than the gallery once justifying it would\n// make it taller than this many times the target row height.\nconst INCOMPLETE_STRIP_STRETCH = 1.5;\n\n// Justifying a strip resizes groups that fit at the target row height; one\n// whose item would shrink below this size is split into singles instead.\n// ProGallery let such items collapse to 1px.\nconst MIN_JUSTIFIED_SIZE = 30;\n\n// Gallery widths, plus spacing, probed for regimes, each this factor apart,\n// and the precision each change between two probes is then narrowed down to.\n// A regime narrower than the probes' spacing can go unnoticed.\nconst MIN_GALLERY = 160;\nconst MAX_GALLERY = 4000;\n// Far enough that every gallery is a single strip kept at the target row\n// height, whose layout no longer changes with the width: the last probe, so\n// the widest regime holds at any width.\nconst FAR_GALLERY = 1e9;\nconst PROBE_FACTOR = 1.1;\nconst REGIME_PRECISION = 0.25;\n\n// Widths most worth keeping exact when a gallery has more regimes than the\n// layout can switch between, most important first: content columns, phones\n// and wide pages.\nconst PREFERRED_GALLERIES = [740, 360, 1000, 1300, 1700];\n\ntype Rect = [x: number, y: number, width: number, height: number];\n\ntype Group = { type: GroupType; first: number; ratios: number[]; ratio: number };\n\nconst ratioOf = (item: NormalizedGalleryItem) => item.width / item.height;\n\n// The group's width at a given height, by ProGallery's Group formulas.\nconst getGroupWidth = (type: GroupType, [a, b, c]: number[], height: number, spacing: number) => {\n  switch (type) {\n    case '1':\n      return height * a + spacing * (1 - a);\n    case '2h':\n      return height * (a + b) + spacing * (2 - a - b);\n    case '2v': {\n      const ratio = 1 / (1 / a + 1 / b);\n      return height * ratio + spacing * (1 - 2 * ratio);\n    }\n    case '3t':\n    case '3b': {\n      const pair = type === '3t' ? b + c : a + b;\n      const large = type === '3t' ? a : c;\n      const ratio = 1 / (1 / pair + 1 / large);\n      return height * ratio + spacing * (2 / pair + 1 / large - 2) * ratio;\n    }\n  }\n};\n\n// Item rects within a group `height` tall, as ProGallery sized and pinned\n// them: at the group's natural width for that height, then stretched to\n// `width` (the remainder of a justified strip), which only widens items.\nconst getItemRects = (\n  type: GroupType,\n  ratios: number[],\n  width: number,\n  height: number,\n  spacing: number\n): Rect[] => {\n  const [a, b, c] = ratios;\n  const natural = getGroupWidth(type, ratios, height, spacing);\n  switch (type) {\n    case '1':\n      return [[0, 0, width - spacing, height - spacing]];\n    case '2v': {\n      const bottomHeight = (natural - spacing) / b;\n      return [\n        [0, 0, width - spacing, height - bottomHeight - 2 * spacing],\n        [0, height - bottomHeight - spacing, width - spacing, bottomHeight],\n      ];\n    }\n    case '2h': {\n      const itemHeight = height - spacing;\n      const rightWidth = itemHeight * b;\n      return [\n        [0, 0, width - rightWidth - 2 * spacing, itemHeight],\n        [width - rightWidth - spacing, 0, rightWidth, itemHeight],\n      ];\n    }\n    case '3t': {\n      const topHeight = (natural - spacing) / a;\n      const pairHeight = height - topHeight - 2 * spacing;\n      const rightWidth = pairHeight * c;\n      return [\n        [0, 0, width - spacing, topHeight],\n        [0, height - pairHeight - spacing, width - rightWidth - 2 * spacing, pairHeight],\n        [width - rightWidth - spacing, height - pairHeight - spacing, rightWidth, pairHeight],\n      ];\n    }\n    case '3b': {\n      const bottomHeight = (natural - spacing) / c;\n      const pairHeight = height - bottomHeight - 2 * spacing;\n      const rightWidth = pairHeight * b;\n      return [\n        [0, 0, width - rightWidth - 2 * spacing, pairHeight],\n        [width - rightWidth - spacing, 0, rightWidth, pairHeight],\n        [0, height - bottomHeight - spacing, width - spacing, bottomHeight],\n      ];\n    }\n  }\n};\n\nconst getGroupType = (\n  items: NormalizedGalleryItem[],\n  first: number,\n  forcedSize: number,\n  seed: 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', '2v'] : ROWS_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[seed % dense.length];\n};\n\n// ProGallery's Rows group from `first`, sized at the target row height: picked\n// by its position in the strip and broken up into fewer items while any item\n// would fall below MIN_ITEM_SIZE. `singles` start groups of one regardless.\nconst getGroup = (\n  items: NormalizedGalleryItem[],\n  first: number,\n  seed: number,\n  rowHeight: number,\n  spacing: number,\n  singles: Set<number>\n): Group => {\n  const maxSize = singles.has(first) ? 1 : Math.min(3, items.length - first);\n  for (let forcedSize = maxSize; forcedSize > 1; forcedSize--) {\n    const type = getGroupType(items, first, forcedSize, seed);\n    const ratios = items.slice(first, first + GROUP_SIZE[type]).map(ratioOf);\n    const width = getGroupWidth(type, ratios, rowHeight, spacing);\n    const fits =\n      type === '1' ||\n      getItemRects(type, ratios, width, rowHeight, spacing).every(\n        ([, , itemWidth, itemHeight]) =>\n          Math.min(itemWidth, itemHeight) >= MIN_ITEM_SIZE - SIZE_TOLERANCE\n      );\n    if (fits) {\n      return { type, first, ratios, ratio: width / rowHeight };\n    }\n  }\n  const ratios = [ratioOf(items[first])];\n  return {\n    type: '1',\n    first,\n    ratios,\n    ratio: getGroupWidth('1', ratios, rowHeight, spacing) / rowHeight,\n  };\n};\n\n// Whether a strip should close before taking `group`: once it is shorter than\n// the target, or would end closer to it without the group than with it. The\n// gallery's last group joins a strip that is already too short unless it\n// ends closer to the target without it.\nconst isStripFull = (\n  stripRatio: number,\n  groupRatio: number,\n  isLastGroup: boolean,\n  gallery: number,\n  rowHeight: number\n) => {\n  if (stripRatio === 0) {\n    return false;\n  }\n  const withGroup = gallery / (stripRatio + groupRatio) - rowHeight;\n  const withoutGroup = gallery / stripRatio - rowHeight;\n  const endsCloserWithout = Math.abs(withoutGroup) < Math.abs(withGroup);\n  const isFull = withoutGroup < 0 || (withGroup < 0 && endsCloserWithout);\n  return isFull && (!isLastGroup || endsCloserWithout);\n};\n\n/**\n * ProGallery's Rows Collage for a gallery `gallery` wide, one spacing\n * included: item rects and a key that changes whenever the strips do.\n */\nexport const layoutRows = (\n  items: NormalizedGalleryItem[],\n  gallery: number,\n  spacing: number,\n  targetSize: number\n) => {\n  // ProGallery's target row height, which counts one spacing in.\n  const rowHeight = Math.floor(targetSize) + Math.ceil(spacing);\n  const rects: Rect[] = [];\n  const keys: string[] = [];\n  // Where justifying a strip would collapse an item, these change how it is\n  // rebuilt: groups of one from `singles`, and new strips from `breaks`.\n  const singles = new Set<number>();\n  const breaks = new Set<number>();\n  let top = 0;\n  let strip: Group[] = [];\n  let stripRatio = 0;\n  let stripFirst = 0;\n  let first = 0;\n\n  // Places the strip's items, or adds the constraint that keeps an item from\n  // collapsing and reports that the strip needs rebuilding.\n  const placeStrip = (height: number, justified: boolean) => {\n    let left = 0;\n    for (let index = 0; index < strip.length; index++) {\n      const group = strip[index];\n      const isLast = index === strip.length - 1;\n      const width =\n        isLast && justified\n          ? gallery - left\n          : getGroupWidth(group.type, group.ratios, height, spacing);\n      const groupRects = getItemRects(group.type, group.ratios, width, height, spacing);\n      const collapses =\n        justified &&\n        groupRects.some(\n          ([, , itemWidth, itemHeight]) => Math.min(itemWidth, itemHeight) < MIN_JUSTIFIED_SIZE\n        );\n      if (collapses && group.type !== '1') {\n        singles.add(group.first);\n        return false;\n      }\n      // A single shrinks in a strip holding too many groups, so the strip\n      // breaks before it, or after it when it comes first.\n      const breakAt = index > 0 ? group.first : strip[index + 1]?.first;\n      if (collapses && breakAt !== undefined && !breaks.has(breakAt)) {\n        breaks.add(breakAt);\n        return false;\n      }\n      // Alone, it can still collapse where ProGallery's strip ratio, which\n      // counts spacing in, outweighs the item's own: it then keeps its own.\n      if (collapses && strip.length === 1) {\n        const itemWidth = gallery - spacing;\n        rects[group.first] = [0, top, itemWidth, itemWidth / group.ratios[0]];\n        keys.push(`=${group.first}`);\n        top += itemWidth / group.ratios[0] + spacing;\n        return true;\n      }\n      groupRects.forEach(([x, y, itemWidth, itemHeight], offset) => {\n        rects[group.first + offset] = [left + x, top + y, itemWidth, itemHeight];\n      });\n      left += width;\n    }\n    keys.push(`${strip.map(group => `${group.type}${group.first}`).join()}${justified ? '' : '!'}`);\n    top += height;\n    return true;\n  };\n\n  // Each rebuild adds a new single or break, so a strip is rebuilt at most\n  // twice per item in it.\n  const closeStrip = (height: number, justified: boolean) => {\n    if (!placeStrip(height, justified)) {\n      first = stripFirst;\n    }\n    strip = [];\n    stripRatio = 0;\n    stripFirst = first;\n  };\n\n  while (first < items.length) {\n    // ProGallery seeded a Rows group by its strip and its place in that strip.\n    const seed = keys.length + 1 + strip.length + 1;\n    const group = getGroup(items, first, seed, rowHeight, spacing, singles);\n    const isLastGroup = first + GROUP_SIZE[group.type] >= items.length;\n    if (\n      strip.length > 0 &&\n      (breaks.has(first) || isStripFull(stripRatio, group.ratio, isLastGroup, gallery, rowHeight))\n    ) {\n      closeStrip(gallery / stripRatio, true);\n      continue;\n    }\n    strip.push(group);\n    stripRatio += group.ratio;\n    first += GROUP_SIZE[group.type];\n    if (first >= items.length) {\n      const justifiedHeight = gallery / stripRatio;\n      const isIncomplete = rowHeight * INCOMPLETE_STRIP_STRETCH < justifiedHeight;\n      closeStrip(isIncomplete ? rowHeight : justifiedHeight, !isIncomplete);\n    }\n  }\n  return { rects, key: keys.join('|') };\n};\n\nconst toLinear = (atLow: number, atHigh: number, low: number, high: number): LinearSize => {\n  const a = (atHigh - atLow) / (high - low);\n  return [a, atLow - a * low];\n};\n\nconst valueAt = ([a, b]: LinearSize, gallery: number) => a * gallery + b;\n\nconst getProbes = () => {\n  const probes: number[] = [];\n  for (let gallery = MIN_GALLERY; gallery < MAX_GALLERY; gallery *= PROBE_FACTOR) {\n    probes.push(gallery);\n  }\n  return [...probes, MAX_GALLERY, FAR_GALLERY];\n};\n\ntype Run = { key: string; first: number; last: number };\n\ntype Regime = { start: number; end: number; rects: RowsRect[] };\n\n// Regimes added where a kept layout would otherwise stretch over widths where\n// it no longer fits; past these, the remaining such widths are stacked.\nconst MAX_REPAIRS = 4;\n\n// Each item on a strip of its own, which fits at any width: the last resort\n// for widths no few layouts can cover.\nconst getStackedRects = (items: NormalizedGalleryItem[], spacing: number): RowsRect[] => {\n  let y: LinearSize = [0, 0];\n  return items.map(item => {\n    const ratio = ratioOf(item);\n    const height: LinearSize = [1 / ratio, -spacing / ratio];\n    const rect = { x: [0, 0] as LinearSize, y, width: [1, -spacing] as LinearSize, height };\n    y = [y[0] + height[0], y[1] + height[1] + spacing];\n    return rect;\n  });\n};\n\n/**\n * The Collage's Rows layouts by gallery width (plus spacing), narrowest first.\n * Past `maxRegimes`, the narrowest and widest are kept, then those around\n * PREFERRED_GALLERIES, each stretching over the widths up to the next — and\n * more are kept where a stretched layout would shrink an item or overflow.\n * Below the first regime's `minGallery`, 0 unless the narrowest layout would\n * overflow there, the items stack.\n */\nexport const getRowsRegimes = (\n  items: NormalizedGalleryItem[],\n  spacing: number,\n  targetSize: number,\n  maxRegimes: number\n): RowsRegime[] => {\n  const keyAt = (gallery: number) => layoutRows(items, gallery, spacing, targetSize).key;\n  // Between a width laid out otherwise and a width laid out as `key`, the\n  // width laid out as `key` closest to the former.\n  const narrowDown = (outside: number, inside: number, key: string) => {\n    if (keyAt(outside) === key) {\n      return outside;\n    }\n    let [low, high] = [outside, inside];\n    while (Math.abs(high - low) > REGIME_PRECISION) {\n      const middle = (low + high) / 2;\n      if (keyAt(middle) === key) {\n        high = middle;\n      } else {\n        low = middle;\n      }\n    }\n    return high;\n  };\n\n  // The regime laid out like `gallery`, found between two widths outside it.\n  const regimeAround = (gallery: number, below: number, above: number): Regime => {\n    const key = keyAt(gallery);\n    const start = narrowDown(below, gallery, key);\n    const end = narrowDown(above, gallery, key);\n    // Sampled strictly inside the regime, where its own layout holds.\n    const margin = Math.min(REGIME_PRECISION, (end - start) / 4);\n    const [low, high] = end - start > 0 ? [start + margin, end - margin] : [start, start];\n    const atLow = layoutRows(items, low, spacing, targetSize).rects;\n    const atHigh = high > low ? layoutRows(items, high, spacing, targetSize).rects : atLow;\n    return {\n      start,\n      end,\n      rects: atLow.map((rect, item) => {\n        const [x, y, width, height] = rect.map(\n          (value, coordinate): LinearSize =>\n            high > low ? toLinear(value, atHigh[item][coordinate], low, high) : [0, value]\n        );\n        return { x, y, width, height };\n      }),\n    };\n  };\n\n  // Every condition is linear in the width, so a layout that fits at both\n  // ends of a range fits throughout: no item shrinks below what it has at\n  // the regime's own ends (or MIN_JUSTIFIED_SIZE), and none overflows.\n  const fitsOver = ({ start, end, rects }: Regime, to: number) =>\n    rects.every(({ x, width, height }) =>\n      [start, to].every(gallery => {\n        const floorOf = (size: LinearSize) =>\n          Math.min(MIN_JUSTIFIED_SIZE, valueAt(size, start), valueAt(size, end)) - REGIME_PRECISION;\n        return (\n          valueAt(width, gallery) >= floorOf(width) &&\n          valueAt(height, gallery) >= floorOf(height) &&\n          valueAt(x, gallery) + valueAt(width, gallery) <= gallery - spacing + REGIME_PRECISION\n        );\n      })\n    );\n\n  const probes = getProbes();\n  const runs = probes.reduce<Run[]>((found, gallery, index) => {\n    const key = keyAt(gallery);\n    const last = found[found.length - 1];\n    if (last?.key === key) {\n      last.last = index;\n    } else {\n      found.push({ key, first: index, last: index });\n    }\n    return found;\n  }, []);\n  const regimeOfRun = (index: number) => {\n    const run = runs[index];\n    return regimeAround(\n      probes[run.first],\n      probes[Math.max(0, run.first - 1)],\n      probes[Math.min(probes.length - 1, run.last + 1)]\n    );\n  };\n\n  const runAt = (gallery: number) =>\n    Math.max(\n      0,\n      runs.findIndex(run => probes[run.last] >= gallery)\n    );\n  const keptRuns = new Set([0, runs.length - 1]);\n  // A widest regime that begins only past the probed widths takes no slot.\n  const slots = maxRegimes + (runs[runs.length - 1].first === probes.length - 1 ? 1 : 0);\n  PREFERRED_GALLERIES.map(runAt).forEach(index => {\n    if (keptRuns.size < slots) {\n      keptRuns.add(index);\n    }\n  });\n  const kept = [...keptRuns].sort((a, b) => a - b).map(regimeOfRun);\n  const stacked = getStackedRects(items, spacing);\n  let repairs = 0;\n\n  // Where a kept layout no longer fits up to the next, the layout midway\n  // into the widths past its own takes over there.\n  for (let index = 0; index < kept.length - 1; ) {\n    const [regime, next] = [kept[index], kept[index + 1]];\n    if (\n      fitsOver(regime, next.start - REGIME_PRECISION) ||\n      next.start - regime.end < 2 * REGIME_PRECISION\n    ) {\n      index++;\n      continue;\n    }\n    // Past the budget, the widths the layout no longer fits are stacked,\n    // which fits anywhere, while every other width keeps its own layout.\n    if (repairs >= MAX_REPAIRS) {\n      kept.splice(index + 1, 0, { start: regime.end, end: next.start, rects: stacked });\n      index += 2;\n      continue;\n    }\n    repairs++;\n    kept.splice(index + 1, 0, regimeAround((regime.end + next.start) / 2, regime.end, next.start));\n  }\n  // The widest regime extends indefinitely, so it must not shrink or overflow\n  // anything as the width grows.\n  const widest = kept[kept.length - 1];\n  const holdsBeyond = widest.rects.every(\n    ({ x, width, height }) =>\n      width[0] >= -SIZE_TOLERANCE &&\n      height[0] >= -SIZE_TOLERANCE &&\n      x[0] + width[0] <= 1 + SIZE_TOLERANCE\n  );\n  if (!holdsBeyond || !fitsOver(widest, widest.end)) {\n    kept.push({ start: widest.end, end: Infinity, rects: stacked });\n  }\n  // The narrowest regime, sampled from MIN_GALLERY only, holds below it unless\n  // shrinking turns an item negative or overflows it; below where it would,\n  // the items stack. Narrower than MIN_JUSTIFIED_SIZE, even stacked items are\n  // slivers, so the check ends there.\n  const narrowest = kept[0];\n  const narrowestChecked = Math.min(spacing + MIN_JUSTIFIED_SIZE, narrowest.start);\n  const holdsAt = (gallery: number) =>\n    narrowest.rects.every(\n      ({ x, width, height }) =>\n        valueAt(width, gallery) >= -REGIME_PRECISION &&\n        valueAt(height, gallery) >= -REGIME_PRECISION &&\n        valueAt(x, gallery) + valueAt(width, gallery) <= gallery - spacing + REGIME_PRECISION\n    );\n  let stackedBelow = 0;\n  if (!holdsAt(narrowestChecked)) {\n    let [low, high] = [narrowestChecked, narrowest.start];\n    while (high - low > REGIME_PRECISION) {\n      const middle = (low + high) / 2;\n      [low, high] = holdsAt(middle) ? [low, middle] : [middle, high];\n    }\n    stackedBelow = high;\n  }\n  return kept.map((regime, position) => ({\n    minGallery: position === 0 ? stackedBelow : regime.start,\n    rects: regime.rects,\n  }));\n};\n"],
+  "mappings": "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",
+  "names": ["ratios"]
+}

package/dist/cjs/plugin-gallery/viewer/collage-styles.js

@@ -0,0 +1,73 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var collage_styles_exports = {};
+__export(collage_styles_exports, {
+  COLLAGE_SCOPE_ATTRIBUTE: () => COLLAGE_SCOPE_ATTRIBUTE,
+  getCollageStyles: () => getCollageStyles
+});
+module.exports = __toCommonJS(collage_styles_exports);
+var import_build_responsive_css = require("./../../_shared/build-responsive-css.js");
+var import_gallery_image_sizes = require("./gallery-image-sizes.js");
+const COLLAGE_SCOPE_ATTRIBUTE = "data-ricos-collage";
+const FALLBACK_WIDTH = 760;
+const toDeclarations = (declarations) => Object.entries(declarations).map(([property, value]) => `${property}: ${value};`).join(" ");
+const toQuery = (minWidth, nextMinWidth) => [
+  minWidth > 0 && `(min-width: ${(0, import_gallery_image_sizes.roundCssNumber)(minWidth)}px)`,
+  nextMinWidth !== void 0 && `(not (min-width: ${(0, import_gallery_image_sizes.roundCssNumber)(nextMinWidth)}px))`
+].filter(Boolean).join(" and ");
+const toScope = (text) => {
+  let hash = 2166136261;
+  for (let index = 0; index < text.length; index++) {
+    hash = Math.imul(hash ^ text.charCodeAt(index), 16777619) >>> 0;
+  }
+  return `c${hash.toString(36)}`;
+};
+const mergeRanges = (ranges) => [...ranges].sort((a, b) => a.minWidth - b.minWidth).reduce((merged, range) => {
+  const last = merged[merged.length - 1];
+  if (!last || toDeclarations(last.declarations) !== toDeclarations(range.declarations)) {
+    merged.push(range);
+  }
+  return merged;
+}, []);
+const getCollageStyles = (targets) => {
+  const merged = targets.map(({ className, ranges }) => ({
+    className,
+    ranges: mergeRanges(ranges)
+  }));
+  const scope = toScope(JSON.stringify(merged));
+  const css = merged.flatMap(({ className, ranges }) => {
+    if (ranges.length === 0) {
+      return [];
+    }
+    const selector = `[${COLLAGE_SCOPE_ATTRIBUTE}=${scope}] .${className}`;
+    const base = ranges.reduce(
+      (found, range) => range.minWidth <= FALLBACK_WIDTH ? range : found
+    );
+    return [
+      `${selector} {${toDeclarations(base.declarations)}}`,
+      ...ranges.length > 1 ? ranges.map(
+        (range, index) => (0, import_build_responsive_css.buildResponsiveCss)(toQuery(range.minWidth, ranges[index + 1]?.minWidth), [
+          { selector, declarations: toDeclarations(range.declarations) }
+        ])
+      ) : []
+    ];
+  }).join("\n");
+  return { scope, css };
+};
+//# sourceMappingURL=collage-styles.js.map

package/dist/cjs/plugin-gallery/viewer/collage-styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-gallery/viewer/collage-styles.ts"],
+  "sourcesContent": ["import { buildResponsiveCss } from './../../_shared/build-responsive-css.js';\n\nimport { roundCssNumber } from './gallery-image-sizes.js';\n\ntype Declarations = Record<string, string>;\n\n/** Declarations from a gallery width up, until the next range's. */\nexport type CollageRange = { minWidth: number; declarations: Declarations };\n\n/** Ranges for the Collage's list and for its cells, by class name. */\nexport type CollageTargets = { className: string; ranges: CollageRange[] }[];\n\n// The scope attribute's value is a hash of the rules, so two galleries share a\n// scope only when their rules are identical and style both alike.\nexport const COLLAGE_SCOPE_ATTRIBUTE = 'data-ricos-collage';\n\n// The base layout, which also serves browsers without size container queries,\n// is that of a typical content width.\nconst FALLBACK_WIDTH = 760;\n\n// Rendered as a `<style>` text child, which the server renderer escapes, so the\n// rules must not contain `\"`, `'`, `<`, `>` or `&` (see `node-animations.tsx`).\nconst toDeclarations = (declarations: Declarations) =>\n  Object.entries(declarations)\n    .map(([property, value]) => `${property}: ${value};`)\n    .join(' ');\n\n// A range ends exactly where the next begins, at any fractional width, by\n// negating the next one's condition (range syntax would need `<`).\nconst toQuery = (minWidth: number, nextMinWidth?: number) =>\n  [\n    minWidth > 0 && `(min-width: ${roundCssNumber(minWidth)}px)`,\n    nextMinWidth !== undefined && `(not (min-width: ${roundCssNumber(nextMinWidth)}px))`,\n  ]\n    .filter(Boolean)\n    .join(' and ');\n\n// FNV-1a, in base 36. An attribute selector's unquoted value must not start\n// with a digit, hence the prefix.\nconst toScope = (text: string) => {\n  let hash = 0x811c9dc5;\n  for (let index = 0; index < text.length; index++) {\n    hash = Math.imul(hash ^ text.charCodeAt(index), 0x01000193) >>> 0;\n  }\n  return `c${hash.toString(36)}`;\n};\n\n// Sorts the ranges and merges neighbours of the same declarations.\nconst mergeRanges = (ranges: CollageRange[]) =>\n  [...ranges]\n    .sort((a, b) => a.minWidth - b.minWidth)\n    .reduce<CollageRange[]>((merged, range) => {\n      const last = merged[merged.length - 1];\n      if (!last || toDeclarations(last.declarations) !== toDeclarations(range.declarations)) {\n        merged.push(range);\n      }\n      return merged;\n    }, []);\n\n/**\n * The Collage's own breakpoints as scoped rules: each target's base\n * declarations, then a responsive rule per range of widths, which queries the\n * Collage root in container mode and the viewport in viewport mode.\n */\nexport const getCollageStyles = (targets: CollageTargets) => {\n  const merged = targets.map(({ className, ranges }) => ({\n    className,\n    ranges: mergeRanges(ranges),\n  }));\n  const scope = toScope(JSON.stringify(merged));\n  const css = merged\n    .flatMap(({ className, ranges }) => {\n      if (ranges.length === 0) {\n        return [];\n      }\n      const selector = `[${COLLAGE_SCOPE_ATTRIBUTE}=${scope}] .${className}`;\n      const base = ranges.reduce((found, range) =>\n        range.minWidth <= FALLBACK_WIDTH ? range : found\n      );\n      return [\n        `${selector} {${toDeclarations(base.declarations)}}`,\n        ...(ranges.length > 1\n          ? ranges.map((range, index) =>\n              buildResponsiveCss(toQuery(range.minWidth, ranges[index + 1]?.minWidth), [\n                { selector, declarations: toDeclarations(range.declarations) },\n              ])\n            )\n          : []),\n      ];\n    })\n    .join('\\n');\n  return { scope, css };\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCAAmC;AAEnC,iCAA+B;AAYxB,MAAM,0BAA0B;AAIvC,MAAM,iBAAiB;AAIvB,MAAM,iBAAiB,CAAC,iBACtB,OAAO,QAAQ,YAAY,EACxB,IAAI,CAAC,CAAC,UAAU,KAAK,MAAM,GAAG,QAAQ,KAAK,KAAK,GAAG,EACnD,KAAK,GAAG;AAIb,MAAM,UAAU,CAAC,UAAkB,iBACjC;AAAA,EACE,WAAW,KAAK,mBAAe,2CAAe,QAAQ,CAAC;AAAA,EACvD,iBAAiB,UAAa,wBAAoB,2CAAe,YAAY,CAAC;AAChF,EACG,OAAO,OAAO,EACd,KAAK,OAAO;AAIjB,MAAM,UAAU,CAAC,SAAiB;AAChC,MAAI,OAAO;AACX,WAAS,QAAQ,GAAG,QAAQ,KAAK,QAAQ,SAAS;AAChD,WAAO,KAAK,KAAK,OAAO,KAAK,WAAW,KAAK,GAAG,QAAU,MAAM;AAAA,EAClE;AACA,SAAO,IAAI,KAAK,SAAS,EAAE,CAAC;AAC9B;AAGA,MAAM,cAAc,CAAC,WACnB,CAAC,GAAG,MAAM,EACP,KAAK,CAAC,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,EACtC,OAAuB,CAAC,QAAQ,UAAU;AACzC,QAAM,OAAO,OAAO,OAAO,SAAS,CAAC;AACrC,MAAI,CAAC,QAAQ,eAAe,KAAK,YAAY,MAAM,eAAe,MAAM,YAAY,GAAG;AACrF,WAAO,KAAK,KAAK;AAAA,EACnB;AACA,SAAO;AACT,GAAG,CAAC,CAAC;AAOF,MAAM,mBAAmB,CAAC,YAA4B;AAC3D,QAAM,SAAS,QAAQ,IAAI,CAAC,EAAE,WAAW,OAAO,OAAO;AAAA,IACrD;AAAA,IACA,QAAQ,YAAY,MAAM;AAAA,EAC5B,EAAE;AACF,QAAM,QAAQ,QAAQ,KAAK,UAAU,MAAM,CAAC;AAC5C,QAAM,MAAM,OACT,QAAQ,CAAC,EAAE,WAAW,OAAO,MAAM;AAClC,QAAI,OAAO,WAAW,GAAG;AACvB,aAAO,CAAC;AAAA,IACV;AACA,UAAM,WAAW,IAAI,uBAAuB,IAAI,KAAK,MAAM,SAAS;AACpE,UAAM,OAAO,OAAO;AAAA,MAAO,CAAC,OAAO,UACjC,MAAM,YAAY,iBAAiB,QAAQ;AAAA,IAC7C;AACA,WAAO;AAAA,MACL,GAAG,QAAQ,KAAK,eAAe,KAAK,YAAY,CAAC;AAAA,MACjD,GAAI,OAAO,SAAS,IAChB,OAAO;AAAA,QAAI,CAAC,OAAO,cACjB,gDAAmB,QAAQ,MAAM,UAAU,OAAO,QAAQ,CAAC,GAAG,QAAQ,GAAG;AAAA,UACvE,EAAE,UAAU,cAAc,eAAe,MAAM,YAAY,EAAE;AAAA,QAC/D,CAAC;AAAA,MACH,IACA,CAAC;AAAA,IACP;AAAA,EACF,CAAC,EACA,KAAK,IAAI;AACZ,SAAO,EAAE,OAAO,IAAI;AACtB;",
+  "names": []
+}

package/dist/cjs/plugin-gallery/viewer/gallery-renderer.js

@@ -33,6 +33,7 @@ __export(gallery_renderer_exports, {
 module.exports = __toCommonJS(gallery_renderer_exports);
 var import_react = __toESM(require("react"));
 var import_normalize_gallery_items = require("../media/normalize-gallery-items.js");
+var import_layout_collage = require("./layout-collage.js");
 var import_layout_column = require("./layout-column.js");
 var import_layout_fullsize = require("./layout-fullsize.js");
 var import_layout_grid = require("./layout-grid.js");
@@ -49,7 +50,8 @@ const DEFAULT_GALLERY_LAYOUTS = {
   SLIDER: (props) => /* @__PURE__ */ import_react.default.createElement(import_layout_slider.LayoutSlider, { ...props }),
   COLUMN: (props) => /* @__PURE__ */ import_react.default.createElement(import_layout_column.LayoutColumn, { ...props }),
   THUMBNAIL: (props) => /* @__PURE__ */ import_react.default.createElement(import_layout_thumbnail.LayoutThumbnail, { ...props }),
-  MASONRY: (props) => /* @__PURE__ */ import_react.default.createElement(import_layout_masonry.LayoutMasonry, { ...props })
+  MASONRY: (props) => /* @__PURE__ */ import_react.default.createElement(import_layout_masonry.LayoutMasonry, { ...props }),
+  COLLAGE: (props) => /* @__PURE__ */ import_react.default.createElement(import_layout_collage.LayoutCollage, { ...props })
 };
 const GalleryRenderer = ({
   data,

package/dist/cjs/plugin-gallery/viewer/gallery-renderer.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/plugin-gallery/viewer/gallery-renderer.tsx"],
-  "sourcesContent": ["import type { ReactElement } from 'react';\nimport React from 'react';\n\nimport type { GalleryData } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\n\nimport {\n  normalizeGalleryItems,\n  type NormalizedGalleryItem,\n} from '../media/normalize-gallery-items.js';\nimport { LayoutColumn } from './layout-column.js';\nimport { LayoutFullsize } from './layout-fullsize.js';\nimport { LayoutGrid } from './layout-grid.js';\nimport { LayoutMasonry } from './layout-masonry.js';\nimport { LayoutPanorama } from './layout-panorama.js';\nimport { LayoutSlider } from './layout-slider.js';\nimport { LayoutThumbnail } from './layout-thumbnail.js';\nimport type { GalleryRendererRuntime } from './native-gallery-types.js';\nimport { resolveGalleryLayout, type ResolvedGalleryLayout } from './resolve-gallery-layout.js';\n\ntype LayoutProps<Layout extends ResolvedGalleryLayout> = {\n  items: NormalizedGalleryItem[];\n  layout: Layout;\n  nodeId: string;\n  runtime: GalleryRendererRuntime;\n};\n\ntype LayoutOf<Type extends ResolvedGalleryLayout['type']> = Extract<\n  ResolvedGalleryLayout,\n  { type: Type }\n>;\n\ntype LayoutRenderer<Type extends ResolvedGalleryLayout['type']> = (\n  props: LayoutProps<LayoutOf<Type>>\n) => ReactElement;\n\nexport type GalleryLayoutComponents = {\n  [Type in ResolvedGalleryLayout['type']]: LayoutRenderer<Type>;\n};\n\nconst callLayout = <Type extends ResolvedGalleryLayout['type']>(\n  layouts: GalleryLayoutComponents,\n  type: Type,\n  props: LayoutProps<LayoutOf<Type>>\n) => layouts[type](props);\n\nconst DEFAULT_GALLERY_LAYOUTS: GalleryLayoutComponents = {\n  PANORAMA: props => <LayoutPanorama {...props} />,\n  GRID: props => <LayoutGrid {...props} />,\n  FULLSIZE: props => <LayoutFullsize {...props} />,\n  SLIDER: props => <LayoutSlider {...props} />,\n  COLUMN: props => <LayoutColumn {...props} />,\n  THUMBNAIL: props => <LayoutThumbnail {...props} />,\n  MASONRY: props => <LayoutMasonry {...props} />,\n};\n\ntype GalleryRendererProps = {\n  data: GalleryData;\n  nodeId: string;\n  isMobile: boolean;\n  runtime: GalleryRendererRuntime;\n  /** Override layout components in tests. Production uses `DEFAULT_GALLERY_LAYOUTS`. */\n  layouts?: GalleryLayoutComponents;\n};\n\nexport const GalleryRenderer = ({\n  data,\n  nodeId,\n  isMobile,\n  runtime,\n  layouts = DEFAULT_GALLERY_LAYOUTS,\n}: GalleryRendererProps) => {\n  const items = normalizeGalleryItems({\n    items: data.items || [],\n    nodeId,\n    disableDownload: data.disableDownload,\n    relValue: runtime.relValue,\n    anchorTarget: runtime.anchorTarget,\n    baseUrl: runtime.baseUrl,\n  });\n  const layout = resolveGalleryLayout({ options: data.options, isMobile });\n  const rendererRuntime = {\n    ...runtime,\n    disableExpand: data.disableExpand || runtime.disableExpand,\n  };\n\n  if (items.length === 0) {\n    return (\n      <div\n        data-hook=\"native-gallery-renderer\"\n        data-layout={layout.type}\n        data-gallery-empty=\"true\"\n      />\n    );\n  }\n\n  const content = callLayout(layouts, layout.type, {\n    items,\n    nodeId,\n    runtime: rendererRuntime,\n    layout,\n  });\n\n  return (\n    <div data-hook=\"native-gallery-renderer\" data-layout={layout.type}>\n      {content}\n    </div>\n  );\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAIlB,qCAGO;AACP,2BAA6B;AAC7B,6BAA+B;AAC/B,yBAA2B;AAC3B,4BAA8B;AAC9B,6BAA+B;AAC/B,2BAA6B;AAC7B,8BAAgC;AAEhC,oCAAiE;AAsBjE,MAAM,aAAa,CACjB,SACA,MACA,UACG,QAAQ,IAAI,EAAE,KAAK;AAExB,MAAM,0BAAmD;AAAA,EACvD,UAAU,WAAS,6BAAAA,QAAA,cAAC,yCAAgB,GAAG,OAAO;AAAA,EAC9C,MAAM,WAAS,6BAAAA,QAAA,cAAC,iCAAY,GAAG,OAAO;AAAA,EACtC,UAAU,WAAS,6BAAAA,QAAA,cAAC,yCAAgB,GAAG,OAAO;AAAA,EAC9C,QAAQ,WAAS,6BAAAA,QAAA,cAAC,qCAAc,GAAG,OAAO;AAAA,EAC1C,QAAQ,WAAS,6BAAAA,QAAA,cAAC,qCAAc,GAAG,OAAO;AAAA,EAC1C,WAAW,WAAS,6BAAAA,QAAA,cAAC,2CAAiB,GAAG,OAAO;AAAA,EAChD,SAAS,WAAS,6BAAAA,QAAA,cAAC,uCAAe,GAAG,OAAO;AAC9C;AAWO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAA4B;AAC1B,QAAM,YAAQ,sDAAsB;AAAA,IAClC,OAAO,KAAK,SAAS,CAAC;AAAA,IACtB;AAAA,IACA,iBAAiB,KAAK;AAAA,IACtB,UAAU,QAAQ;AAAA,IAClB,cAAc,QAAQ;AAAA,IACtB,SAAS,QAAQ;AAAA,EACnB,CAAC;AACD,QAAM,aAAS,oDAAqB,EAAE,SAAS,KAAK,SAAS,SAAS,CAAC;AACvE,QAAM,kBAAkB;AAAA,IACtB,GAAG;AAAA,IACH,eAAe,KAAK,iBAAiB,QAAQ;AAAA,EAC/C;AAEA,MAAI,MAAM,WAAW,GAAG;AACtB,WACE,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAa,OAAO;AAAA,QACpB,sBAAmB;AAAA;AAAA,IACrB;AAAA,EAEJ;AAEA,QAAM,UAAU,WAAW,SAAS,OAAO,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EACF,CAAC;AAED,SACE,6BAAAA,QAAA,cAAC,SAAI,aAAU,2BAA0B,eAAa,OAAO,QAC1D,OACH;AAEJ;",
+  "sourcesContent": ["import type { ReactElement } from 'react';\nimport React from 'react';\n\nimport type { GalleryData } from './../../ricos-schema/legacy/wix/rich_content/v1/index.js';\n\nimport {\n  normalizeGalleryItems,\n  type NormalizedGalleryItem,\n} from '../media/normalize-gallery-items.js';\nimport { LayoutCollage } from './layout-collage.js';\nimport { LayoutColumn } from './layout-column.js';\nimport { LayoutFullsize } from './layout-fullsize.js';\nimport { LayoutGrid } from './layout-grid.js';\nimport { LayoutMasonry } from './layout-masonry.js';\nimport { LayoutPanorama } from './layout-panorama.js';\nimport { LayoutSlider } from './layout-slider.js';\nimport { LayoutThumbnail } from './layout-thumbnail.js';\nimport type { GalleryRendererRuntime } from './native-gallery-types.js';\nimport { resolveGalleryLayout, type ResolvedGalleryLayout } from './resolve-gallery-layout.js';\n\ntype LayoutProps<Layout extends ResolvedGalleryLayout> = {\n  items: NormalizedGalleryItem[];\n  layout: Layout;\n  nodeId: string;\n  runtime: GalleryRendererRuntime;\n};\n\ntype LayoutOf<Type extends ResolvedGalleryLayout['type']> = Extract<\n  ResolvedGalleryLayout,\n  { type: Type }\n>;\n\ntype LayoutRenderer<Type extends ResolvedGalleryLayout['type']> = (\n  props: LayoutProps<LayoutOf<Type>>\n) => ReactElement;\n\nexport type GalleryLayoutComponents = {\n  [Type in ResolvedGalleryLayout['type']]: LayoutRenderer<Type>;\n};\n\nconst callLayout = <Type extends ResolvedGalleryLayout['type']>(\n  layouts: GalleryLayoutComponents,\n  type: Type,\n  props: LayoutProps<LayoutOf<Type>>\n) => layouts[type](props);\n\nconst DEFAULT_GALLERY_LAYOUTS: GalleryLayoutComponents = {\n  PANORAMA: props => <LayoutPanorama {...props} />,\n  GRID: props => <LayoutGrid {...props} />,\n  FULLSIZE: props => <LayoutFullsize {...props} />,\n  SLIDER: props => <LayoutSlider {...props} />,\n  COLUMN: props => <LayoutColumn {...props} />,\n  THUMBNAIL: props => <LayoutThumbnail {...props} />,\n  MASONRY: props => <LayoutMasonry {...props} />,\n  COLLAGE: props => <LayoutCollage {...props} />,\n};\n\ntype GalleryRendererProps = {\n  data: GalleryData;\n  nodeId: string;\n  isMobile: boolean;\n  runtime: GalleryRendererRuntime;\n  /** Override layout components in tests. Production uses `DEFAULT_GALLERY_LAYOUTS`. */\n  layouts?: GalleryLayoutComponents;\n};\n\nexport const GalleryRenderer = ({\n  data,\n  nodeId,\n  isMobile,\n  runtime,\n  layouts = DEFAULT_GALLERY_LAYOUTS,\n}: GalleryRendererProps) => {\n  const items = normalizeGalleryItems({\n    items: data.items || [],\n    nodeId,\n    disableDownload: data.disableDownload,\n    relValue: runtime.relValue,\n    anchorTarget: runtime.anchorTarget,\n    baseUrl: runtime.baseUrl,\n  });\n  const layout = resolveGalleryLayout({ options: data.options, isMobile });\n  const rendererRuntime = {\n    ...runtime,\n    disableExpand: data.disableExpand || runtime.disableExpand,\n  };\n\n  if (items.length === 0) {\n    return (\n      <div\n        data-hook=\"native-gallery-renderer\"\n        data-layout={layout.type}\n        data-gallery-empty=\"true\"\n      />\n    );\n  }\n\n  const content = callLayout(layouts, layout.type, {\n    items,\n    nodeId,\n    runtime: rendererRuntime,\n    layout,\n  });\n\n  return (\n    <div data-hook=\"native-gallery-renderer\" data-layout={layout.type}>\n      {content}\n    </div>\n  );\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAkB;AAIlB,qCAGO;AACP,4BAA8B;AAC9B,2BAA6B;AAC7B,6BAA+B;AAC/B,yBAA2B;AAC3B,4BAA8B;AAC9B,6BAA+B;AAC/B,2BAA6B;AAC7B,8BAAgC;AAEhC,oCAAiE;AAsBjE,MAAM,aAAa,CACjB,SACA,MACA,UACG,QAAQ,IAAI,EAAE,KAAK;AAExB,MAAM,0BAAmD;AAAA,EACvD,UAAU,WAAS,6BAAAA,QAAA,cAAC,yCAAgB,GAAG,OAAO;AAAA,EAC9C,MAAM,WAAS,6BAAAA,QAAA,cAAC,iCAAY,GAAG,OAAO;AAAA,EACtC,UAAU,WAAS,6BAAAA,QAAA,cAAC,yCAAgB,GAAG,OAAO;AAAA,EAC9C,QAAQ,WAAS,6BAAAA,QAAA,cAAC,qCAAc,GAAG,OAAO;AAAA,EAC1C,QAAQ,WAAS,6BAAAA,QAAA,cAAC,qCAAc,GAAG,OAAO;AAAA,EAC1C,WAAW,WAAS,6BAAAA,QAAA,cAAC,2CAAiB,GAAG,OAAO;AAAA,EAChD,SAAS,WAAS,6BAAAA,QAAA,cAAC,uCAAe,GAAG,OAAO;AAAA,EAC5C,SAAS,WAAS,6BAAAA,QAAA,cAAC,uCAAe,GAAG,OAAO;AAC9C;AAWO,MAAM,kBAAkB,CAAC;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AACZ,MAA4B;AAC1B,QAAM,YAAQ,sDAAsB;AAAA,IAClC,OAAO,KAAK,SAAS,CAAC;AAAA,IACtB;AAAA,IACA,iBAAiB,KAAK;AAAA,IACtB,UAAU,QAAQ;AAAA,IAClB,cAAc,QAAQ;AAAA,IACtB,SAAS,QAAQ;AAAA,EACnB,CAAC;AACD,QAAM,aAAS,oDAAqB,EAAE,SAAS,KAAK,SAAS,SAAS,CAAC;AACvE,QAAM,kBAAkB;AAAA,IACtB,GAAG;AAAA,IACH,eAAe,KAAK,iBAAiB,QAAQ;AAAA,EAC/C;AAEA,MAAI,MAAM,WAAW,GAAG;AACtB,WACE,6BAAAA,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,aAAU;AAAA,QACV,eAAa,OAAO;AAAA,QACpB,sBAAmB;AAAA;AAAA,IACrB;AAAA,EAEJ;AAEA,QAAM,UAAU,WAAW,SAAS,OAAO,MAAM;AAAA,IAC/C;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT;AAAA,EACF,CAAC;AAED,SACE,6BAAAA,QAAA,cAAC,SAAI,aAAU,2BAA0B,eAAa,OAAO,QAC1D,OACH;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/plugin-gallery/viewer/layout-collage-scss.js

@@ -0,0 +1,31 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var layout_collage_exports = {};
+__export(layout_collage_exports, {
+  default: () => layout_collage_default
+});
+module.exports = __toCommonJS(layout_collage_exports);
+var layout_collage_default = {
+  "collageRoot": "THaGx",
+  "collage": "vVKd0",
+  "collageCell": "uCaXh",
+  "fine": "MA8Hq",
+  "rows": "CL2Px"
+};
+//# sourceMappingURL=layout-collage-scss.js.map

package/dist/cjs/plugin-gallery/viewer/layout-collage-scss.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/plugin-gallery/viewer/layout-collage.scss"],
+  "sourcesContent": ["export default {\n  \"collageRoot\": \"THaGx\",\n  \"collage\": \"vVKd0\",\n  \"collageCell\": \"uCaXh\",\n  \"fine\": \"MA8Hq\",\n  \"rows\": \"CL2Px\"\n};"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAO,yBAAQ;AAAA,EACb,eAAe;AAAA,EACf,WAAW;AAAA,EACX,eAAe;AAAA,EACf,QAAQ;AAAA,EACR,QAAQ;AACV;",
+  "names": []
+}