@thangdevalone/meet-layout-grid-core 1.0.8 → 1.1.0

package/dist/index.mjs

@@ -16,6 +16,212 @@ function parseAspectRatio(ratio) {
   }
   return { widthRatio: width, heightRatio: height };
 }
+function calculateContentDimensions(cellDimensions, itemRatio, defaultRatio) {
+  const { width: cellW, height: cellH } = cellDimensions;
+  const effectiveRatio = itemRatio ?? (defaultRatio ? defaultRatio : void 0);
+  if (!effectiveRatio || effectiveRatio === "fill" || effectiveRatio === "auto") {
+    return {
+      width: cellW,
+      height: cellH,
+      offsetTop: 0,
+      offsetLeft: 0
+    };
+  }
+  const ratio = getAspectRatio(effectiveRatio);
+  let contentW = cellW;
+  let contentH = contentW * ratio;
+  if (contentH > cellH) {
+    contentH = cellH;
+    contentW = contentH / ratio;
+  }
+  const offsetTop = (cellH - contentH) / 2;
+  const offsetLeft = (cellW - contentW) / 2;
+  return {
+    width: contentW,
+    height: contentH,
+    offsetTop,
+    offsetLeft
+  };
+}
+function createGetItemContentDimensions(getItemDimensions, itemAspectRatios, defaultRatio) {
+  return (index, itemRatio) => {
+    const cellDimensions = getItemDimensions(index);
+    const effectiveRatio = itemRatio ?? itemAspectRatios?.[index] ?? defaultRatio;
+    return calculateContentDimensions(cellDimensions, effectiveRatio, defaultRatio);
+  };
+}
+function calculateFlexLayout(options) {
+  const { dimensions, count, aspectRatio, gap, itemAspectRatios, preferHorizontal } = options;
+  if (count === 0 || dimensions.width === 0 || dimensions.height === 0) {
+    return [];
+  }
+  const containerWidth = dimensions.width - gap * 2;
+  const containerHeight = dimensions.height - gap * 2;
+  const getItemAspectValue = (index) => {
+    const itemRatio = itemAspectRatios?.[index] ?? aspectRatio;
+    if (!itemRatio || itemRatio === "fill" || itemRatio === "auto") {
+      return 16 / 9;
+    }
+    const parsed = parseAspectRatio(itemRatio);
+    return parsed ? parsed.widthRatio / parsed.heightRatio : 16 / 9;
+  };
+  const aspectValues = [];
+  for (let i = 0; i < count; i++) {
+    aspectValues.push(getItemAspectValue(i));
+  }
+  const avgAspect = aspectValues.reduce((a, b) => a + b, 0) / count;
+  const containerAspect = containerWidth / containerHeight;
+  let numRows;
+  if (preferHorizontal) {
+    const sumAspects = aspectValues.reduce((a, b) => a + b, 0);
+    const singleRowHeight = containerWidth / sumAspects;
+    if (singleRowHeight <= containerHeight) {
+      numRows = 1;
+    } else {
+      numRows = Math.ceil(Math.sqrt(count * containerHeight / containerWidth / avgAspect));
+      numRows = Math.max(1, Math.min(count, numRows));
+    }
+  } else {
+    numRows = Math.round(Math.sqrt(count / (containerAspect / avgAspect)));
+    numRows = Math.max(1, Math.min(count, numRows));
+  }
+  const itemsPerRow = Math.ceil(count / numRows);
+  const rows = [];
+  for (let i = 0; i < count; i += itemsPerRow) {
+    const row = [];
+    for (let j = i; j < Math.min(i + itemsPerRow, count); j++) {
+      row.push(j);
+    }
+    rows.push(row);
+  }
+  const rowHeights = [];
+  for (const row of rows) {
+    const sumAspects = row.reduce((sum, idx) => sum + aspectValues[idx], 0);
+    const totalGapWidth = (row.length - 1) * gap;
+    const height = (containerWidth - totalGapWidth) / sumAspects;
+    rowHeights.push(height);
+  }
+  const totalGapHeight = (rows.length - 1) * gap;
+  const totalNaturalHeight = rowHeights.reduce((a, b) => a + b, 0);
+  const scale = Math.min(1, (containerHeight - totalGapHeight) / totalNaturalHeight);
+  for (let i = 0; i < rowHeights.length; i++) {
+    rowHeights[i] *= scale;
+  }
+  const totalScaledHeight = rowHeights.reduce((a, b) => a + b, 0) + totalGapHeight;
+  const verticalOffset = (containerHeight - totalScaledHeight) / 2;
+  const items = [];
+  let currentTop = gap + verticalOffset;
+  for (let rowIndex = 0; rowIndex < rows.length; rowIndex++) {
+    const row = rows[rowIndex];
+    const rowHeight = rowHeights[rowIndex];
+    let rowWidth = 0;
+    for (const idx of row) {
+      rowWidth += rowHeight * aspectValues[idx];
+    }
+    rowWidth += (row.length - 1) * gap;
+    const horizontalOffset = (containerWidth - rowWidth) / 2;
+    let currentLeft = gap + horizontalOffset;
+    for (const itemIndex of row) {
+      const aspect = aspectValues[itemIndex];
+      const itemWidth = rowHeight * aspect;
+      items[itemIndex] = {
+        index: itemIndex,
+        width: itemWidth,
+        height: rowHeight,
+        left: currentLeft,
+        top: currentTop,
+        row: rowIndex,
+        widthFactor: aspect
+      };
+      currentLeft += itemWidth + gap;
+    }
+    currentTop += rowHeight + gap;
+  }
+  return items;
+}
+function calculateFlexStrip(options) {
+  const { dimensions, count, aspectRatio, gap, itemAspectRatios, direction, offset = { left: 0, top: 0 } } = options;
+  if (count === 0 || dimensions.width === 0 || dimensions.height === 0) {
+    return [];
+  }
+  const stripWidth = dimensions.width;
+  const stripHeight = dimensions.height;
+  const getItemAspectValue = (index) => {
+    const itemRatio = itemAspectRatios?.[index] ?? aspectRatio;
+    if (!itemRatio || itemRatio === "fill" || itemRatio === "auto") {
+      return 16 / 9;
+    }
+    const parsed = parseAspectRatio(itemRatio);
+    return parsed ? parsed.widthRatio / parsed.heightRatio : 16 / 9;
+  };
+  const aspectValues = [];
+  for (let i = 0; i < count; i++) {
+    aspectValues.push(getItemAspectValue(i));
+  }
+  const items = [];
+  if (direction === "horizontal") {
+    const availableHeight = stripHeight;
+    const totalGaps = (count - 1) * gap;
+    let totalNaturalWidth = 0;
+    for (let i = 0; i < count; i++) {
+      totalNaturalWidth += availableHeight * aspectValues[i];
+    }
+    totalNaturalWidth += totalGaps;
+    let scale = (stripWidth - totalGaps) / (totalNaturalWidth - totalGaps);
+    scale = Math.min(scale, 2);
+    const itemHeight = availableHeight * scale;
+    let scaledTotalWidth = totalGaps;
+    for (let i = 0; i < count; i++) {
+      scaledTotalWidth += itemHeight * aspectValues[i];
+    }
+    let currentLeft = offset.left + (stripWidth - scaledTotalWidth) / 2;
+    const itemTop = offset.top + (stripHeight - itemHeight) / 2;
+    for (let i = 0; i < count; i++) {
+      const itemWidth = itemHeight * aspectValues[i];
+      items[i] = {
+        index: i,
+        width: itemWidth,
+        height: itemHeight,
+        left: currentLeft,
+        top: itemTop,
+        row: 0,
+        widthFactor: aspectValues[i]
+      };
+      currentLeft += itemWidth + gap;
+    }
+  } else {
+    const availableWidth = stripWidth;
+    const totalGaps = (count - 1) * gap;
+    let totalNaturalHeight = 0;
+    for (let i = 0; i < count; i++) {
+      totalNaturalHeight += availableWidth / aspectValues[i];
+    }
+    totalNaturalHeight += totalGaps;
+    let scale = (stripHeight - totalGaps) / (totalNaturalHeight - totalGaps);
+    scale = Math.min(scale, 2);
+    const itemWidth = availableWidth * scale;
+    let scaledTotalHeight = totalGaps;
+    for (let i = 0; i < count; i++) {
+      scaledTotalHeight += itemWidth / aspectValues[i];
+    }
+    let currentTop = offset.top + (stripHeight - scaledTotalHeight) / 2;
+    const itemLeft = offset.left + (stripWidth - itemWidth) / 2;
+    for (let i = 0; i < count; i++) {
+      const itemHeight = itemWidth / aspectValues[i];
+      items[i] = {
+        index: i,
+        width: itemWidth,
+        height: itemHeight,
+        left: itemLeft,
+        top: currentTop,
+        row: i,
+        widthFactor: aspectValues[i]
+      };
+      currentTop += itemHeight + gap;
+    }
+  }
+  return items;
+}
 function getGridItemDimensions({
   count,
   dimensions,
@@ -35,8 +241,7 @@ function getGridItemDimensions({
   let h = 0;
   let a = 1;
   let b = 1;
-  const isPortrait = H > W;
-  const minCols = N >= 2 && isPortrait ? 2 : 1;
+  const minCols = 1;
   const widths = [];
   for (let n = 1; n <= N; n++) {
     widths.push((W - s * (n - 1)) / n, (H - s * (n - 1)) / (n * r));
@@ -129,20 +334,30 @@ function createGrid({ aspectRatio, count, dimensions, gap }) {
   };
 }
 function createSidebarGrid(options) {
-  const { dimensions, gap, aspectRatio, count, sidebarPosition = "right", sidebarRatio = 0.25, pinnedIndex = 0, maxVisibleOthers = 0, currentOthersPage = 0 } = options;
+  const { dimensions, gap, aspectRatio, count, sidebarPosition = "right", sidebarRatio = 0.25, pinnedIndex = 0, maxVisible = 0, currentVisiblePage = 0, flexLayout = false, itemAspectRatios } = options;
   if (count === 0) {
     return createEmptyMeetGridResult("sidebar");
   }
   if (count === 1) {
-    const grid = createGrid({ ...options, count: 1 });
+    const { width: W2, height: H2 } = dimensions;
+    const mainWidth2 = W2 - gap * 2;
+    const mainHeight2 = H2 - gap * 2;
+    const getItemDimensions2 = () => ({ width: mainWidth2, height: mainHeight2 });
     const pagination2 = createDefaultPagination(1);
     return {
-      ...grid,
+      width: mainWidth2,
+      height: mainHeight2,
+      rows: 1,
+      cols: 1,
       layoutMode: "sidebar",
-      getItemDimensions: () => ({ width: grid.width, height: grid.height }),
+      getPosition: () => ({ top: gap, left: gap }),
+      getItemDimensions: getItemDimensions2,
       isMainItem: () => true,
       pagination: pagination2,
-      isItemVisible: () => true
+      isItemVisible: () => true,
+      hiddenCount: 0,
+      getLastVisibleOthersIndex: () => -1,
+      getItemContentDimensions: createGetItemContentDimensions(getItemDimensions2, options.itemAspectRatios, aspectRatio)
     };
   }
   const { width: W, height: H } = dimensions;
@@ -153,76 +368,84 @@ function createSidebarGrid(options) {
   let sidebarWidth;
   let sidebarHeight;
   if (isVertical) {
-    mainHeight = H * (1 - sidebarRatio) - gap;
-    mainWidth = W - gap * 2;
-    sidebarHeight = H * sidebarRatio - gap;
-    sidebarWidth = W - gap * 2;
+    const totalOthersCalc = count - 1;
+    const visibleOthersCalc = maxVisible > 0 ? Math.min(maxVisible, totalOthersCalc) : totalOthersCalc;
+    const baseSidebarW = W - gap * 2;
+    const targetRatio = 1 / ratio;
+    const isPortraitMode = H > W * 1.2;
+    const maxSidebarRatio = isPortraitMode ? 0.45 : 0.38;
+    const minSidebarRatio = isPortraitMode ? 0.25 : 0.18;
+    const minThumbH = isPortraitMode ? 70 : 60;
+    let bestSidebarH = 0;
+    let bestThumbArea = 0;
+    const maxRows = Math.min(3, visibleOthersCalc || 1);
+    for (let rows = 1; rows <= maxRows; rows++) {
+      const cols = Math.ceil((visibleOthersCalc || 1) / rows);
+      const thumbW = (baseSidebarW - (cols - 1) * gap) / cols;
+      const thumbH = thumbW / targetRatio;
+      const requiredSidebarH = rows * thumbH + (rows - 1) * gap + gap * 2;
+      const sidebarRatioCalc = requiredSidebarH / H;
+      if (sidebarRatioCalc > maxSidebarRatio + 0.05 || thumbH < minThumbH)
+        continue;
+      const thumbArea = thumbW * thumbH;
+      if (thumbArea > bestThumbArea) {
+        bestThumbArea = thumbArea;
+        bestSidebarH = requiredSidebarH;
+      }
+    }
+    if (bestSidebarH === 0) {
+      bestSidebarH = H * (isPortraitMode ? 0.3 : 0.25);
+    }
+    if (bestSidebarH / H < minSidebarRatio)
+      bestSidebarH = H * minSidebarRatio;
+    else if (bestSidebarH / H > maxSidebarRatio)
+      bestSidebarH = H * maxSidebarRatio;
+    sidebarHeight = bestSidebarH;
+    sidebarWidth = baseSidebarW;
+    mainHeight = H - sidebarHeight - gap * 3;
+    mainWidth = baseSidebarW;
   } else {
-    mainWidth = W * (1 - sidebarRatio) - gap * 2;
-    mainHeight = H - gap * 2;
-    sidebarWidth = W * sidebarRatio - gap;
-    sidebarHeight = H - gap * 2;
-  }
-  let mainItemWidth = mainWidth;
-  let mainItemHeight = mainItemWidth * ratio;
-  if (mainItemHeight > mainHeight) {
-    mainItemHeight = mainHeight;
-    mainItemWidth = mainItemHeight / ratio;
+    const totalOthersCalc = count - 1;
+    const visibleOthersCalc = maxVisible > 0 ? Math.min(maxVisible, totalOthersCalc) : totalOthersCalc;
+    const baseSidebarH = H - gap * 2;
+    let bestSidebarW = W * sidebarRatio - gap;
+    let bestScore = 0;
+    const maxCols = Math.min(3, visibleOthersCalc || 1);
+    for (let cols = 1; cols <= maxCols; cols++) {
+      const rows = Math.ceil((visibleOthersCalc || 1) / cols);
+      const thumbH = (baseSidebarH - (rows - 1) * gap) / rows;
+      const thumbW = thumbH / ratio;
+      const requiredSidebarW = cols * thumbW + (cols - 1) * gap + gap * 2;
+      const sidebarRatioTest = requiredSidebarW / W;
+      const thumbArea = thumbW * thumbH;
+      const mainAreaBonus = (1 - sidebarRatioTest) * 0.5;
+      const score = thumbArea * (1 + mainAreaBonus);
+      if (sidebarRatioTest >= 0.12 && sidebarRatioTest <= 0.4 && score > bestScore) {
+        bestSidebarW = requiredSidebarW;
+        bestScore = score;
+      }
+    }
+    if (bestSidebarW / W < 0.12)
+      bestSidebarW = W * 0.15;
+    else if (bestSidebarW / W > 0.4)
+      bestSidebarW = W * 0.35;
+    sidebarWidth = bestSidebarW;
+    sidebarHeight = baseSidebarH;
+    mainWidth = W - sidebarWidth - gap * 2;
+    mainHeight = baseSidebarH;
   }
+  const mainItemWidth = mainWidth;
+  const mainItemHeight = mainHeight;
   const totalOthers = count - 1;
-  const visibleOthers = maxVisibleOthers > 0 ? Math.min(maxVisibleOthers, totalOthers) : totalOthers;
-  const othersTotalPages = maxVisibleOthers > 0 ? Math.ceil(totalOthers / maxVisibleOthers) : 1;
-  const safeCurrentOthersPage = Math.min(currentOthersPage, Math.max(0, othersTotalPages - 1));
-  const startOthersIndex = safeCurrentOthersPage * maxVisibleOthers;
+  const visibleOthers = maxVisible > 0 ? Math.min(maxVisible, totalOthers) : totalOthers;
+  const othersTotalPages = maxVisible > 0 ? Math.ceil(totalOthers / maxVisible) : 1;
+  const safeCurrentVisiblePage = Math.min(currentVisiblePage, Math.max(0, othersTotalPages - 1));
+  const startOthersIndex = safeCurrentVisiblePage * (maxVisible > 0 ? maxVisible : totalOthers);
   const endOthersIndex = Math.min(startOthersIndex + visibleOthers, totalOthers);
   const itemsOnPage = endOthersIndex - startOthersIndex;
-  const hiddenCount = totalOthers - itemsOnPage;
-  let thumbCols = 1;
-  let thumbRows = 1;
-  let thumbWidth = 0;
-  let thumbHeight = 0;
-  if (visibleOthers > 0) {
-    let bestArea = 0;
-    if (isVertical) {
-      for (let cols = 1; cols <= visibleOthers; cols++) {
-        const rows = Math.ceil(visibleOthers / cols);
-        const maxTileW = (sidebarWidth - (cols - 1) * gap) / cols;
-        const maxTileH = (sidebarHeight - (rows - 1) * gap) / rows;
-        let tileW = maxTileW;
-        let tileH = tileW * ratio;
-        if (tileH > maxTileH) {
-          tileH = maxTileH;
-          tileW = tileH / ratio;
-        }
-        if (tileW * tileH > bestArea) {
-          bestArea = tileW * tileH;
-          thumbCols = cols;
-          thumbRows = rows;
-          thumbWidth = tileW;
-          thumbHeight = tileH;
-        }
-      }
-    } else {
-      for (let rows = 1; rows <= visibleOthers; rows++) {
-        const cols = Math.ceil(visibleOthers / rows);
-        const maxTileH = (sidebarHeight - (rows - 1) * gap) / rows;
-        const maxTileW = (sidebarWidth - (cols - 1) * gap) / cols;
-        let tileH = maxTileH;
-        let tileW = tileH / ratio;
-        if (tileW > maxTileW) {
-          tileW = maxTileW;
-          tileH = tileW * ratio;
-        }
-        if (tileW * tileH > bestArea) {
-          bestArea = tileW * tileH;
-          thumbCols = cols;
-          thumbRows = rows;
-          thumbWidth = tileW;
-          thumbHeight = tileH;
-        }
-      }
-    }
-  }
+  const isPaginationMode = othersTotalPages > 1;
+  const isActivelyPaginating = isPaginationMode && currentVisiblePage > 0;
+  const hiddenCount = isActivelyPaginating ? 0 : totalOthers > itemsOnPage ? totalOthers - itemsOnPage + 1 : 0;
   const positions = [];
   let mainLeft;
   let mainTop;
@@ -237,68 +460,200 @@ function createSidebarGrid(options) {
     position: { top: mainTop, left: mainLeft },
     dimensions: { width: mainItemWidth, height: mainItemHeight }
   };
-  const totalGridWidth = thumbCols * thumbWidth + (thumbCols - 1) * gap;
-  const totalGridHeight = thumbRows * thumbHeight + (thumbRows - 1) * gap;
-  let gridStartLeft;
-  let gridStartTop;
+  let sidebarOffsetLeft;
+  let sidebarOffsetTop;
   if (isVertical) {
-    gridStartLeft = gap + (sidebarWidth - totalGridWidth) / 2;
-    gridStartTop = sidebarPosition === "top" ? gap + (sidebarHeight - totalGridHeight) / 2 : mainHeight + gap * 2 + (sidebarHeight - totalGridHeight) / 2;
+    sidebarOffsetLeft = gap;
+    sidebarOffsetTop = sidebarPosition === "top" ? gap : mainHeight + gap * 2;
   } else {
-    gridStartLeft = sidebarPosition === "left" ? gap + (sidebarWidth - totalGridWidth) / 2 : mainWidth + gap * 2 + (sidebarWidth - totalGridWidth) / 2;
-    gridStartTop = gap + (sidebarHeight - totalGridHeight) / 2;
+    sidebarOffsetLeft = sidebarPosition === "left" ? gap : mainWidth + gap * 2;
+    sidebarOffsetTop = gap;
   }
-  let sidebarIndex = 0;
-  for (let i = 0; i < count; i++) {
-    if (i === pinnedIndex)
-      continue;
-    const isInVisibleRange = sidebarIndex >= startOthersIndex && sidebarIndex < endOthersIndex;
-    if (isInVisibleRange) {
-      const pageRelativeIndex = sidebarIndex - startOthersIndex;
-      const row = Math.floor(pageRelativeIndex / thumbCols);
-      const col = pageRelativeIndex % thumbCols;
-      const itemsInLastRow = itemsOnPage % thumbCols || thumbCols;
-      let rowLeft = gridStartLeft;
-      const lastRowIndex = Math.ceil(itemsOnPage / thumbCols) - 1;
-      if (row === lastRowIndex && itemsInLastRow < thumbCols) {
-        const rowWidth = itemsInLastRow * thumbWidth + (itemsInLastRow - 1) * gap;
-        if (isVertical) {
-          rowLeft = gap + (sidebarWidth - rowWidth) / 2;
-        } else {
-          rowLeft = (sidebarPosition === "left" ? gap : mainWidth + gap * 2) + (sidebarWidth - rowWidth) / 2;
-        }
+  if (flexLayout && itemAspectRatios && itemsOnPage > 0) {
+    const othersAspectRatios = [];
+    const originalIndices = [];
+    let othersIdx = 0;
+    for (let i = 0; i < count; i++) {
+      if (i === pinnedIndex)
+        continue;
+      if (othersIdx >= startOthersIndex && othersIdx < endOthersIndex) {
+        othersAspectRatios.push(itemAspectRatios[i]);
+        originalIndices.push(i);
       }
-      positions[i] = {
+      othersIdx++;
+    }
+    const flexItems = calculateFlexLayout({
+      dimensions: { width: sidebarWidth + gap * 2, height: sidebarHeight + gap * 2 },
+      count: itemsOnPage,
+      aspectRatio,
+      gap,
+      itemAspectRatios: othersAspectRatios,
+      preferHorizontal: isVertical
+      // bottom/top sidebars should use horizontal layout
+    });
+    for (let i = 0; i < flexItems.length; i++) {
+      const originalIndex = originalIndices[i];
+      const flexItem = flexItems[i];
+      positions[originalIndex] = {
         position: {
-          top: gridStartTop + row * (thumbHeight + gap),
-          left: rowLeft + col * (thumbWidth + gap)
+          top: flexItem.top + sidebarOffsetTop - gap,
+          left: flexItem.left + sidebarOffsetLeft - gap
         },
-        dimensions: { width: thumbWidth, height: thumbHeight }
+        dimensions: { width: flexItem.width, height: flexItem.height }
       };
+    }
+    let sidebarIndex = 0;
+    for (let i = 0; i < count; i++) {
+      if (i === pinnedIndex)
+        continue;
+      const isInVisibleRange = sidebarIndex >= startOthersIndex && sidebarIndex < endOthersIndex;
+      if (!isInVisibleRange) {
+        positions[i] = {
+          position: { top: -9999, left: -9999 },
+          dimensions: { width: 0, height: 0 }
+        };
+      }
+      sidebarIndex++;
+    }
+  } else {
+    let thumbCols = 1;
+    let thumbRows = 1;
+    let thumbWidth = 0;
+    let thumbHeight = 0;
+    if (visibleOthers > 0) {
+      if (isVertical) {
+        let bestScore = -1;
+        for (let cols = 1; cols <= visibleOthers; cols++) {
+          const rows = Math.ceil(visibleOthers / cols);
+          const maxTileW = (sidebarWidth - (cols - 1) * gap) / cols;
+          const maxTileH = (sidebarHeight - (rows - 1) * gap) / rows;
+          let tileW = maxTileW;
+          let tileH = tileW * ratio;
+          if (tileH > maxTileH) {
+            tileH = maxTileH;
+            tileW = tileH / ratio;
+          }
+          const area = tileW * tileH;
+          const itemRatio = tileW / tileH;
+          const idealRatio = 16 / 9;
+          const ratioScore = 1 / (1 + Math.abs(Math.log(itemRatio / idealRatio)));
+          const colsMultiplier = cols >= rows ? 1.5 : 0.5;
+          const score = area * ratioScore * colsMultiplier;
+          if (score > bestScore) {
+            bestScore = score;
+            thumbCols = cols;
+            thumbRows = rows;
+            thumbWidth = tileW;
+            thumbHeight = tileH;
+          }
+        }
+      } else {
+        let bestScore = -1;
+        const targetRatio = 1 / ratio;
+        for (let rows = 1; rows <= visibleOthers; rows++) {
+          const cols = Math.ceil(visibleOthers / rows);
+          const maxTileH = (sidebarHeight - (rows - 1) * gap) / rows;
+          const idealTileW = maxTileH * targetRatio;
+          const maxTileW = (sidebarWidth - (cols - 1) * gap) / cols;
+          let tileW, tileH;
+          if (idealTileW <= maxTileW) {
+            tileW = idealTileW;
+            tileH = maxTileH;
+          } else {
+            tileW = maxTileW;
+            tileH = tileW / targetRatio;
+          }
+          const area = tileW * tileH * visibleOthers;
+          const score = area;
+          if (score > bestScore) {
+            bestScore = score;
+            thumbCols = cols;
+            thumbRows = rows;
+            thumbWidth = tileW;
+            thumbHeight = tileH;
+          }
+        }
+      }
+    }
+    const totalGridWidth = thumbCols * thumbWidth + (thumbCols - 1) * gap;
+    const totalGridHeight = thumbRows * thumbHeight + (thumbRows - 1) * gap;
+    let gridStartLeft;
+    let gridStartTop;
+    if (isVertical) {
+      gridStartLeft = gap + (sidebarWidth - totalGridWidth) / 2;
+      gridStartTop = sidebarPosition === "top" ? gap + (sidebarHeight - totalGridHeight) / 2 : mainHeight + gap * 2 + (sidebarHeight - totalGridHeight) / 2;
     } else {
-      positions[i] = {
-        position: { top: -9999, left: -9999 },
-        dimensions: { width: 0, height: 0 }
-      };
+      gridStartLeft = sidebarPosition === "left" ? gap + (sidebarWidth - totalGridWidth) / 2 : mainWidth + gap * 2 + (sidebarWidth - totalGridWidth) / 2;
+      gridStartTop = gap + (sidebarHeight - totalGridHeight) / 2;
+    }
+    let sidebarIndex = 0;
+    for (let i = 0; i < count; i++) {
+      if (i === pinnedIndex)
+        continue;
+      const isInVisibleRange = sidebarIndex >= startOthersIndex && sidebarIndex < endOthersIndex;
+      if (isInVisibleRange) {
+        const pageRelativeIndex = sidebarIndex - startOthersIndex;
+        const row = Math.floor(pageRelativeIndex / thumbCols);
+        const col = pageRelativeIndex % thumbCols;
+        const itemsInLastRow = itemsOnPage % thumbCols || thumbCols;
+        let rowLeft = gridStartLeft;
+        const lastRowIndex = Math.ceil(itemsOnPage / thumbCols) - 1;
+        if (row === lastRowIndex && itemsInLastRow < thumbCols) {
+          const rowWidth = itemsInLastRow * thumbWidth + (itemsInLastRow - 1) * gap;
+          if (isVertical) {
+            rowLeft = gap + (sidebarWidth - rowWidth) / 2;
+          } else {
+            rowLeft = (sidebarPosition === "left" ? gap : mainWidth + gap * 2) + (sidebarWidth - rowWidth) / 2;
+          }
+        }
+        positions[i] = {
+          position: {
+            top: gridStartTop + row * (thumbHeight + gap),
+            left: rowLeft + col * (thumbWidth + gap)
+          },
+          dimensions: { width: thumbWidth, height: thumbHeight }
+        };
+      } else {
+        positions[i] = {
+          position: { top: -9999, left: -9999 },
+          dimensions: { width: 0, height: 0 }
+        };
+      }
+      sidebarIndex++;
     }
-    sidebarIndex++;
   }
   const pagination = {
-    enabled: maxVisibleOthers > 0 && totalOthers > maxVisibleOthers,
-    currentPage: safeCurrentOthersPage,
+    enabled: maxVisible > 0 && totalOthers > maxVisible,
+    currentPage: safeCurrentVisiblePage,
     totalPages: othersTotalPages,
     itemsOnPage,
     startIndex: startOthersIndex,
     endIndex: endOthersIndex
   };
+  const getItemDimensions = (index) => positions[index]?.dimensions ?? { width: 0, height: 0 };
+  const getLastVisibleOthersIndex = () => {
+    if (itemsOnPage === 0)
+      return -1;
+    let othersIdx = 0;
+    let lastVisibleOriginalIdx = -1;
+    for (let i = 0; i < count; i++) {
+      if (i === pinnedIndex)
+        continue;
+      if (othersIdx >= startOthersIndex && othersIdx < endOthersIndex) {
+        lastVisibleOriginalIdx = i;
+      }
+      othersIdx++;
+    }
+    return lastVisibleOriginalIdx;
+  };
   return {
     width: mainItemWidth,
     height: mainItemHeight,
-    rows: isVertical ? 1 + thumbRows : thumbRows,
-    cols: isVertical ? thumbCols : 1 + thumbCols,
+    rows: isVertical ? 2 : 1,
+    cols: isVertical ? 1 : 2,
     layoutMode: "sidebar",
     getPosition: (index) => positions[index]?.position ?? { top: 0, left: 0 },
-    getItemDimensions: (index) => positions[index]?.dimensions ?? { width: 0, height: 0 },
+    getItemDimensions,
     isMainItem: (index) => index === pinnedIndex,
     pagination,
     isItemVisible: (index) => {
@@ -311,160 +666,36 @@ function createSidebarGrid(options) {
       }
       return sIdx >= startOthersIndex && sIdx < endOthersIndex;
     },
-    // Extra info
-    hiddenCount
-  };
-}
-function createSpeakerGrid(options) {
-  const { dimensions, gap, aspectRatio, count, speakerIndex = 0, maxVisibleOthers = 0, currentOthersPage = 0 } = options;
-  if (count === 0) {
-    return createEmptyMeetGridResult("speaker");
-  }
-  if (count === 1) {
-    const grid = createGrid({ ...options, count: 1 });
-    const pagination2 = createDefaultPagination(1);
-    return {
-      ...grid,
-      layoutMode: "speaker",
-      getItemDimensions: () => ({ width: grid.width, height: grid.height }),
-      isMainItem: () => true,
-      pagination: pagination2,
-      isItemVisible: () => true
-    };
-  }
-  const { width: W, height: H } = dimensions;
-  const ratio = getAspectRatio(aspectRatio);
-  const totalOthers = count - 1;
-  const visibleOthers = maxVisibleOthers > 0 ? Math.min(maxVisibleOthers, totalOthers) : totalOthers;
-  const othersTotalPages = maxVisibleOthers > 0 ? Math.ceil(totalOthers / maxVisibleOthers) : 1;
-  const safeCurrentOthersPage = Math.min(currentOthersPage, Math.max(0, othersTotalPages - 1));
-  const startOthersIndex = safeCurrentOthersPage * maxVisibleOthers;
-  const endOthersIndex = Math.min(startOthersIndex + visibleOthers, totalOthers);
-  const itemsOnPage = endOthersIndex - startOthersIndex;
-  const hiddenCount = totalOthers - itemsOnPage;
-  const speakerAreaHeight = (H - gap * 3) * 0.65;
-  const othersAreaHeight = (H - gap * 3) * 0.35;
-  const othersAreaWidth = W - gap * 2;
-  let speakerW = W - gap * 2;
-  let speakerH = speakerW * ratio;
-  if (speakerH > speakerAreaHeight) {
-    speakerH = speakerAreaHeight;
-    speakerW = speakerH / ratio;
-  }
-  let bestCols = 1;
-  let bestTileW = 0;
-  let bestTileH = 0;
-  if (visibleOthers > 0) {
-    for (let cols = 1; cols <= visibleOthers; cols++) {
-      const rows = Math.ceil(visibleOthers / cols);
-      const maxTileW = (othersAreaWidth - (cols - 1) * gap) / cols;
-      const maxTileH = (othersAreaHeight - (rows - 1) * gap) / rows;
-      let tileW = maxTileW;
-      let tileH = tileW * ratio;
-      if (tileH > maxTileH) {
-        tileH = maxTileH;
-        tileW = tileH / ratio;
-      }
-      if (tileW * tileH > bestTileW * bestTileH) {
-        bestCols = cols;
-        bestTileW = tileW;
-        bestTileH = tileH;
-      }
-    }
-  }
-  const otherCols = bestCols;
-  const otherRows = Math.ceil(visibleOthers / otherCols) || 1;
-  const otherW = bestTileW;
-  const otherH = bestTileH;
-  const positions = [];
-  positions[speakerIndex] = {
-    position: {
-      top: gap + (speakerAreaHeight - speakerH) / 2,
-      left: gap + (W - gap * 2 - speakerW) / 2
-    },
-    dimensions: { width: speakerW, height: speakerH }
-  };
-  const totalGridWidth = otherCols * otherW + (otherCols - 1) * gap;
-  const totalGridHeight = otherRows * otherH + (otherRows - 1) * gap;
-  const gridStartLeft = gap + (othersAreaWidth - totalGridWidth) / 2;
-  const gridStartTop = speakerAreaHeight + gap * 2 + (othersAreaHeight - totalGridHeight) / 2;
-  let otherIndex = 0;
-  for (let i = 0; i < count; i++) {
-    if (i === speakerIndex)
-      continue;
-    const isInVisibleRange = otherIndex >= startOthersIndex && otherIndex < endOthersIndex;
-    if (isInVisibleRange) {
-      const pageRelativeIndex = otherIndex - startOthersIndex;
-      const row = Math.floor(pageRelativeIndex / otherCols);
-      const col = pageRelativeIndex % otherCols;
-      const lastRowIndex = Math.ceil(itemsOnPage / otherCols) - 1;
-      const itemsInLastRow = itemsOnPage % otherCols || otherCols;
-      let rowStartLeft = gridStartLeft;
-      if (row === lastRowIndex && itemsInLastRow < otherCols) {
-        const rowWidth = itemsInLastRow * otherW + (itemsInLastRow - 1) * gap;
-        rowStartLeft = gap + (othersAreaWidth - rowWidth) / 2;
-      }
-      positions[i] = {
-        position: {
-          top: gridStartTop + row * (otherH + gap),
-          left: rowStartLeft + col * (otherW + gap)
-        },
-        dimensions: { width: otherW, height: otherH }
-      };
-    } else {
-      positions[i] = {
-        position: { top: -9999, left: -9999 },
-        dimensions: { width: 0, height: 0 }
-      };
-    }
-    otherIndex++;
-  }
-  const pagination = {
-    enabled: maxVisibleOthers > 0 && totalOthers > maxVisibleOthers,
-    currentPage: safeCurrentOthersPage,
-    totalPages: othersTotalPages,
-    itemsOnPage,
-    startIndex: startOthersIndex,
-    endIndex: endOthersIndex
-  };
-  return {
-    width: speakerW,
-    height: speakerH,
-    rows: 1 + otherRows,
-    cols: otherCols,
-    layoutMode: "speaker",
-    getPosition: (index) => positions[index]?.position ?? { top: 0, left: 0 },
-    getItemDimensions: (index) => positions[index]?.dimensions ?? { width: 0, height: 0 },
-    isMainItem: (index) => index === speakerIndex,
-    pagination,
-    isItemVisible: (index) => {
-      if (index === speakerIndex)
-        return true;
-      let sIdx = 0;
-      for (let i = 0; i < index; i++) {
-        if (i !== speakerIndex)
-          sIdx++;
-      }
-      return sIdx >= startOthersIndex && sIdx < endOthersIndex;
-    },
-    hiddenCount
+    hiddenCount,
+    getLastVisibleOthersIndex,
+    getItemContentDimensions: createGetItemContentDimensions(getItemDimensions, options.itemAspectRatios, aspectRatio)
   };
 }
 function createSpotlightGrid(options) {
-  const { dimensions, gap, aspectRatio, pinnedIndex = 0 } = options;
+  const { dimensions, gap, aspectRatio, pinnedIndex = 0, flexLayout = false, itemAspectRatios } = options;
   const { width: W, height: H } = dimensions;
-  const ratio = getAspectRatio(aspectRatio);
-  let spotWidth = W - gap * 2;
-  let spotHeight = spotWidth * ratio;
-  if (spotHeight > H - gap * 2) {
+  const itemRatio = flexLayout && itemAspectRatios?.[pinnedIndex];
+  const shouldFill = itemRatio === "fill" || itemRatio === "auto";
+  let spotWidth;
+  let spotHeight;
+  if (shouldFill) {
+    spotWidth = W - gap * 2;
     spotHeight = H - gap * 2;
-    spotWidth = spotHeight / ratio;
+  } else {
+    const ratio = itemRatio ? getAspectRatio(itemRatio) : getAspectRatio(aspectRatio);
+    spotWidth = W - gap * 2;
+    spotHeight = spotWidth * ratio;
+    if (spotHeight > H - gap * 2) {
+      spotHeight = H - gap * 2;
+      spotWidth = spotHeight / ratio;
+    }
   }
   const position = {
     top: gap + (H - gap * 2 - spotHeight) / 2,
     left: gap + (W - gap * 2 - spotWidth) / 2
   };
   const pagination = createDefaultPagination(1);
+  const getItemDimensions = (index) => index === pinnedIndex ? { width: spotWidth, height: spotHeight } : { width: 0, height: 0 };
   return {
     width: spotWidth,
     height: spotHeight,
@@ -472,10 +703,13 @@ function createSpotlightGrid(options) {
     cols: 1,
     layoutMode: "spotlight",
     getPosition: (index) => index === pinnedIndex ? position : { top: -9999, left: -9999 },
-    getItemDimensions: (index) => index === pinnedIndex ? { width: spotWidth, height: spotHeight } : { width: 0, height: 0 },
+    getItemDimensions,
     isMainItem: (index) => index === pinnedIndex,
     pagination,
-    isItemVisible: (index) => index === pinnedIndex
+    isItemVisible: (index) => index === pinnedIndex,
+    hiddenCount: 0,
+    getLastVisibleOthersIndex: () => -1,
+    getItemContentDimensions: createGetItemContentDimensions(getItemDimensions, options.itemAspectRatios, aspectRatio)
   };
 }
 function createDefaultPagination(count) {
@@ -506,6 +740,7 @@ function createPaginationInfo(count, maxItemsPerPage, currentPage) {
   };
 }
 function createEmptyMeetGridResult(layoutMode) {
+  const getItemDimensions = () => ({ width: 0, height: 0 });
   return {
     width: 0,
     height: 0,
@@ -513,51 +748,129 @@ function createEmptyMeetGridResult(layoutMode) {
     cols: 0,
     layoutMode,
     getPosition: () => ({ top: 0, left: 0 }),
-    getItemDimensions: () => ({ width: 0, height: 0 }),
+    getItemDimensions,
     isMainItem: () => false,
     pagination: createDefaultPagination(0),
-    isItemVisible: () => false
+    isItemVisible: () => false,
+    hiddenCount: 0,
+    getLastVisibleOthersIndex: () => -1,
+    getItemContentDimensions: () => ({ width: 0, height: 0, offsetTop: 0, offsetLeft: 0 })
   };
 }
 function createMeetGrid(options) {
-  const { layoutMode = "gallery", count } = options;
+  const { layoutMode = "gallery", count, flexLayout = false } = options;
   if (count === 0) {
     return createEmptyMeetGridResult(layoutMode);
   }
   switch (layoutMode) {
     case "spotlight":
       return createSpotlightGrid(options);
-    case "speaker":
-      return createSpeakerGrid(options);
     case "sidebar":
       return createSidebarGrid(options);
     case "gallery":
     default: {
-      const { maxItemsPerPage, currentPage, pinnedIndex, sidebarPosition = "right" } = options;
+      const { maxItemsPerPage, currentPage, pinnedIndex, sidebarPosition = "right", dimensions, maxVisible = 0 } = options;
       if (pinnedIndex !== void 0 && pinnedIndex >= 0 && pinnedIndex < count) {
-        return createSidebarGrid({ ...options, sidebarPosition });
+        const isPortrait = dimensions.width < dimensions.height;
+        const effectiveSidebarPosition = isPortrait ? "bottom" : sidebarPosition;
+        return createSidebarGrid({ ...options, sidebarPosition: effectiveSidebarPosition });
+      }
+      let visibleCount = count;
+      let hiddenCount = 0;
+      let startIndex = 0;
+      let endIndex = count;
+      if (maxItemsPerPage && maxItemsPerPage > 0) {
+        const pagination2 = createPaginationInfo(count, maxItemsPerPage, currentPage);
+        visibleCount = pagination2.itemsOnPage;
+        startIndex = pagination2.startIndex;
+        endIndex = pagination2.endIndex;
+      } else if (maxVisible > 0 && count > maxVisible) {
+        visibleCount = maxVisible;
+        hiddenCount = count - maxVisible + 1;
+        startIndex = 0;
+        endIndex = maxVisible;
+      }
+      const pagination = maxItemsPerPage && maxItemsPerPage > 0 ? createPaginationInfo(count, maxItemsPerPage, currentPage) : {
+        enabled: false,
+        currentPage: 0,
+        totalPages: 1,
+        itemsOnPage: visibleCount,
+        startIndex,
+        endIndex
+      };
+      const effectiveCount = visibleCount;
+      if (flexLayout && options.itemAspectRatios) {
+        const pageItemRatios = options.itemAspectRatios.slice(startIndex, startIndex + effectiveCount);
+        const flexItems = calculateFlexLayout({
+          dimensions: options.dimensions,
+          count: effectiveCount,
+          aspectRatio: options.aspectRatio,
+          gap: options.gap,
+          itemAspectRatios: pageItemRatios
+        });
+        const getPosition2 = (index) => {
+          const relativeIndex = index - startIndex;
+          if (relativeIndex < 0 || relativeIndex >= effectiveCount) {
+            return { top: -9999, left: -9999 };
+          }
+          const item = flexItems[relativeIndex];
+          return item ? { top: item.top, left: item.left } : { top: -9999, left: -9999 };
+        };
+        const getItemDimensions2 = (index) => {
+          const relativeIndex = index - startIndex;
+          if (relativeIndex < 0 || relativeIndex >= effectiveCount) {
+            return { width: 0, height: 0 };
+          }
+          const item = flexItems[relativeIndex];
+          return item ? { width: item.width, height: item.height } : { width: 0, height: 0 };
+        };
+        const getItemContentDimensions = (index) => {
+          const dims = getItemDimensions2(index);
+          return {
+            width: dims.width,
+            height: dims.height,
+            offsetTop: 0,
+            offsetLeft: 0
+          };
+        };
+        const lastVisibleIndex2 = endIndex - 1;
+        return {
+          width: flexItems[0]?.width ?? 0,
+          height: flexItems[0]?.height ?? 0,
+          rows: Math.max(...flexItems.map((i) => i.row)) + 1,
+          cols: flexItems.filter((i) => i.row === 0).length,
+          layoutMode: "gallery",
+          getPosition: getPosition2,
+          getItemDimensions: getItemDimensions2,
+          isMainItem: () => false,
+          pagination,
+          isItemVisible: (index) => index >= startIndex && index < endIndex,
+          hiddenCount,
+          getLastVisibleOthersIndex: () => hiddenCount > 0 ? lastVisibleIndex2 : -1,
+          getItemContentDimensions
+        };
       }
-      const pagination = createPaginationInfo(count, maxItemsPerPage, currentPage);
-      const effectiveCount = pagination.enabled ? pagination.itemsOnPage : count;
       const grid = createGrid({ ...options, count: effectiveCount });
       const getPosition = (index) => {
-        if (!pagination.enabled) {
-          return grid.getPosition(index);
-        }
-        const pageRelativeIndex = index - pagination.startIndex;
-        if (pageRelativeIndex < 0 || pageRelativeIndex >= pagination.itemsOnPage) {
+        const relativeIndex = index - startIndex;
+        if (relativeIndex < 0 || relativeIndex >= effectiveCount) {
           return { top: -9999, left: -9999 };
         }
-        return grid.getPosition(pageRelativeIndex);
+        return grid.getPosition(relativeIndex);
       };
+      const getItemDimensions = () => ({ width: grid.width, height: grid.height });
+      const lastVisibleIndex = endIndex - 1;
       return {
         ...grid,
         layoutMode: "gallery",
         getPosition,
-        getItemDimensions: () => ({ width: grid.width, height: grid.height }),
+        getItemDimensions,
         isMainItem: () => false,
         pagination,
-        isItemVisible: (index) => index >= pagination.startIndex && index < pagination.endIndex
+        isItemVisible: (index) => index >= startIndex && index < endIndex,
+        hiddenCount,
+        getLastVisibleOthersIndex: () => hiddenCount > 0 ? lastVisibleIndex : -1,
+        getItemContentDimensions: createGetItemContentDimensions(getItemDimensions, options.itemAspectRatios, options.aspectRatio)
       };
     }
   }
@@ -579,4 +892,4 @@ function getSpringConfig(preset = "smooth") {
   };
 }
 
-export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
+export { calculateContentDimensions, calculateFlexLayout, calculateFlexStrip, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };