@thangdevalone/meet-layout-grid-core 1.1.1 → 1.2.0

package/dist/index.mjs

@@ -19,7 +19,7 @@ function parseAspectRatio(ratio) {
 function calculateContentDimensions(cellDimensions, itemRatio, defaultRatio) {
   const { width: cellW, height: cellH } = cellDimensions;
   const effectiveRatio = itemRatio ?? (defaultRatio ? defaultRatio : void 0);
-  if (!effectiveRatio || effectiveRatio === "fill" || effectiveRatio === "auto") {
+  if (!effectiveRatio || effectiveRatio === "auto") {
     return {
       width: cellW,
       height: cellH,
@@ -50,184 +50,7 @@ function createGetItemContentDimensions(getItemDimensions, itemAspectRatios, def
     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,
-  aspectRatio,
-  gap
-}) {
+function getGridItemDimensions({ count, dimensions, aspectRatio, gap }) {
   let { width: W, height: H } = dimensions;
   if (W === 0 || H === 0 || count === 0) {
     return { width: 0, height: 0, rows: 1, cols: 1 };
@@ -333,10 +156,19 @@ function createGrid({ aspectRatio, count, dimensions, gap }) {
     getPosition
   };
 }
-function createSidebarGrid(options) {
-  const { dimensions, gap, aspectRatio, count, sidebarPosition = "right", sidebarRatio = 0.25, pinnedIndex = 0, maxVisible = 0, currentVisiblePage = 0, flexLayout = false, itemAspectRatios } = options;
+function createFlexiblePinGrid(options) {
+  const {
+    dimensions,
+    gap,
+    aspectRatio,
+    count,
+    othersPosition = "right",
+    pinnedIndex = 0,
+    maxVisible = 0,
+    currentVisiblePage = 0
+  } = options;
   if (count === 0) {
-    return createEmptyMeetGridResult("sidebar");
+    return createEmptyMeetGridResult("gallery");
   }
   if (count === 1) {
     const { width: W2, height: H2 } = dimensions;
@@ -349,7 +181,7 @@ function createSidebarGrid(options) {
       height: mainHeight2,
       rows: 1,
       cols: 1,
-      layoutMode: "sidebar",
+      layoutMode: "gallery",
       getPosition: () => ({ top: gap, left: gap }),
       getItemDimensions: getItemDimensions2,
       isMainItem: () => true,
@@ -357,165 +189,113 @@ function createSidebarGrid(options) {
       isItemVisible: () => true,
       hiddenCount: 0,
       getLastVisibleOthersIndex: () => -1,
-      getItemContentDimensions: createGetItemContentDimensions(getItemDimensions2, options.itemAspectRatios, aspectRatio)
+      getItemContentDimensions: createGetItemContentDimensions(
+        getItemDimensions2,
+        options.itemAspectRatios,
+        aspectRatio
+      )
     };
   }
   const { width: W, height: H } = dimensions;
+  const isPortrait = H > W;
+  const effectivePosition = isPortrait ? "bottom" : othersPosition;
+  const isVertical = effectivePosition === "bottom" || effectivePosition === "top";
   const ratio = getAspectRatio(aspectRatio);
-  const isVertical = sidebarPosition === "bottom" || sidebarPosition === "top";
+  const totalOthers = count - 1;
+  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 isPaginationMode = othersTotalPages > 1;
+  const isActivelyPaginating = isPaginationMode && currentVisiblePage > 0;
+  const hiddenCount = isActivelyPaginating ? 0 : totalOthers > itemsOnPage ? totalOthers - itemsOnPage + 1 : 0;
   let mainWidth;
   let mainHeight;
-  let sidebarWidth;
-  let sidebarHeight;
+  let othersAreaWidth;
+  let othersAreaHeight;
   if (isVertical) {
-    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;
+    const areaW = W - gap * 2;
+    const othersRatio = isPortrait ? 1 : ratio;
+    let bestOthersH = 0;
     let bestThumbArea = 0;
-    const maxRows = Math.min(3, visibleOthersCalc || 1);
+    const maxRows = Math.min(3, visibleOthers || 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)
+      const cols = Math.ceil((visibleOthers || 1) / rows);
+      const thumbW = (areaW - (cols - 1) * gap) / cols;
+      const thumbH = thumbW * othersRatio;
+      const requiredH = rows * thumbH + (rows - 1) * gap + gap * 2;
+      const areaRatio = requiredH / H;
+      if (areaRatio > 0.5)
+        continue;
+      if (thumbH < 40)
         continue;
       const thumbArea = thumbW * thumbH;
       if (thumbArea > bestThumbArea) {
         bestThumbArea = thumbArea;
-        bestSidebarH = requiredSidebarH;
+        bestOthersH = requiredH;
       }
     }
-    if (bestSidebarH === 0) {
-      bestSidebarH = H * (isPortraitMode ? 0.3 : 0.25);
+    if (bestOthersH === 0) {
+      bestOthersH = H * (isPortrait ? 0.25 : 0.2);
     }
-    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;
+    const minRatio = 0.12;
+    const maxRatio = 0.45;
+    if (bestOthersH / H < minRatio)
+      bestOthersH = H * minRatio;
+    else if (bestOthersH / H > maxRatio)
+      bestOthersH = H * maxRatio;
+    othersAreaHeight = bestOthersH;
+    othersAreaWidth = areaW;
+    mainHeight = H - othersAreaHeight - gap * 3;
+    mainWidth = areaW;
   } else {
-    const totalOthersCalc = count - 1;
-    const visibleOthersCalc = maxVisible > 0 ? Math.min(maxVisible, totalOthersCalc) : totalOthersCalc;
-    const baseSidebarH = H - gap * 2;
-    let bestSidebarW = W * sidebarRatio - gap;
+    const areaH = H - gap * 2;
+    let bestOthersW = W * 0.2;
     let bestScore = 0;
-    const maxCols = Math.min(3, visibleOthersCalc || 1);
+    const maxCols = Math.min(3, visibleOthers || 1);
     for (let cols = 1; cols <= maxCols; cols++) {
-      const rows = Math.ceil((visibleOthersCalc || 1) / cols);
-      const thumbH = (baseSidebarH - (rows - 1) * gap) / rows;
+      const rows = Math.ceil((visibleOthers || 1) / cols);
+      const thumbH = (areaH - (rows - 1) * gap) / rows;
       const thumbW = thumbH / ratio;
-      const requiredSidebarW = cols * thumbW + (cols - 1) * gap + gap * 2;
-      const sidebarRatioTest = requiredSidebarW / W;
+      const requiredW = cols * thumbW + (cols - 1) * gap + gap * 2;
+      const areaRatio = requiredW / W;
       const thumbArea = thumbW * thumbH;
-      const mainAreaBonus = (1 - sidebarRatioTest) * 0.5;
+      const mainAreaBonus = (1 - areaRatio) * 0.5;
       const score = thumbArea * (1 + mainAreaBonus);
-      if (sidebarRatioTest >= 0.12 && sidebarRatioTest <= 0.4 && score > bestScore) {
-        bestSidebarW = requiredSidebarW;
+      if (areaRatio >= 0.1 && areaRatio <= 0.4 && score > bestScore) {
+        bestOthersW = requiredW;
         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;
+    if (bestOthersW / W < 0.1)
+      bestOthersW = W * 0.12;
+    else if (bestOthersW / W > 0.4)
+      bestOthersW = W * 0.35;
+    othersAreaWidth = bestOthersW;
+    othersAreaHeight = areaH;
+    mainWidth = W - othersAreaWidth - gap * 2;
+    mainHeight = areaH;
   }
   const mainItemWidth = mainWidth;
   const mainItemHeight = mainHeight;
-  const totalOthers = count - 1;
-  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 isPaginationMode = othersTotalPages > 1;
-  const isActivelyPaginating = isPaginationMode && currentVisiblePage > 0;
-  const hiddenCount = isActivelyPaginating ? 0 : totalOthers > itemsOnPage ? totalOthers - itemsOnPage + 1 : 0;
   const positions = [];
   let mainLeft;
   let mainTop;
   if (isVertical) {
     mainLeft = gap + (mainWidth - mainItemWidth) / 2;
-    mainTop = sidebarPosition === "top" ? sidebarHeight + gap * 2 + (mainHeight - mainItemHeight) / 2 : gap + (mainHeight - mainItemHeight) / 2;
+    mainTop = effectivePosition === "top" ? othersAreaHeight + gap * 2 + (mainHeight - mainItemHeight) / 2 : gap + (mainHeight - mainItemHeight) / 2;
   } else {
-    mainLeft = sidebarPosition === "left" ? sidebarWidth + gap * 2 + (mainWidth - mainItemWidth) / 2 : gap + (mainWidth - mainItemWidth) / 2;
+    mainLeft = effectivePosition === "left" ? othersAreaWidth + gap * 2 + (mainWidth - mainItemWidth) / 2 : gap + (mainWidth - mainItemWidth) / 2;
     mainTop = gap + (mainHeight - mainItemHeight) / 2;
   }
   positions[pinnedIndex] = {
     position: { top: mainTop, left: mainLeft },
     dimensions: { width: mainItemWidth, height: mainItemHeight }
   };
-  let sidebarOffsetLeft;
-  let sidebarOffsetTop;
-  if (isVertical) {
-    sidebarOffsetLeft = gap;
-    sidebarOffsetTop = sidebarPosition === "top" ? gap : mainHeight + gap * 2;
-  } else {
-    sidebarOffsetLeft = sidebarPosition === "left" ? gap : mainWidth + gap * 2;
-    sidebarOffsetTop = gap;
-  }
-  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);
-      }
-      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: flexItem.top + sidebarOffsetTop - gap,
-          left: flexItem.left + sidebarOffsetLeft - gap
-        },
-        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 {
+  {
+    const othersRatio = isPortrait ? 1 : ratio;
     let thumbCols = 1;
     let thumbRows = 1;
     let thumbWidth = 0;
@@ -525,20 +305,17 @@ function createSidebarGrid(options) {
         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;
+          const maxTileW = (othersAreaWidth - (cols - 1) * gap) / cols;
+          const maxTileH = (othersAreaHeight - (rows - 1) * gap) / rows;
           let tileW = maxTileW;
-          let tileH = tileW * ratio;
+          let tileH = tileW * othersRatio;
           if (tileH > maxTileH) {
             tileH = maxTileH;
-            tileW = tileH / ratio;
+            tileW = tileH / othersRatio;
           }
           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;
+          const score = area * colsMultiplier;
           if (score > bestScore) {
             bestScore = score;
             thumbCols = cols;
@@ -552,9 +329,9 @@ function createSidebarGrid(options) {
         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 maxTileH = (othersAreaHeight - (rows - 1) * gap) / rows;
           const idealTileW = maxTileH * targetRatio;
-          const maxTileW = (sidebarWidth - (cols - 1) * gap) / cols;
+          const maxTileW = (othersAreaWidth - (cols - 1) * gap) / cols;
           let tileW, tileH;
           if (idealTileW <= maxTileW) {
             tileW = idealTileW;
@@ -564,9 +341,8 @@ function createSidebarGrid(options) {
             tileH = tileW / targetRatio;
           }
           const area = tileW * tileH * visibleOthers;
-          const score = area;
-          if (score > bestScore) {
-            bestScore = score;
+          if (area > bestScore) {
+            bestScore = area;
             thumbCols = cols;
             thumbRows = rows;
             thumbWidth = tileW;
@@ -580,19 +356,19 @@ function createSidebarGrid(options) {
     let gridStartLeft;
     let gridStartTop;
     if (isVertical) {
-      gridStartLeft = gap + (sidebarWidth - totalGridWidth) / 2;
-      gridStartTop = sidebarPosition === "top" ? gap + (sidebarHeight - totalGridHeight) / 2 : mainHeight + gap * 2 + (sidebarHeight - totalGridHeight) / 2;
+      gridStartLeft = gap + (othersAreaWidth - totalGridWidth) / 2;
+      gridStartTop = effectivePosition === "top" ? gap + (othersAreaHeight - totalGridHeight) / 2 : mainHeight + gap * 2 + (othersAreaHeight - totalGridHeight) / 2;
     } else {
-      gridStartLeft = sidebarPosition === "left" ? gap + (sidebarWidth - totalGridWidth) / 2 : mainWidth + gap * 2 + (sidebarWidth - totalGridWidth) / 2;
-      gridStartTop = gap + (sidebarHeight - totalGridHeight) / 2;
+      gridStartLeft = effectivePosition === "left" ? gap + (othersAreaWidth - totalGridWidth) / 2 : mainWidth + gap * 2 + (othersAreaWidth - totalGridWidth) / 2;
+      gridStartTop = gap + (othersAreaHeight - totalGridHeight) / 2;
     }
-    let sidebarIndex = 0;
+    let othersIndex = 0;
     for (let i = 0; i < count; i++) {
       if (i === pinnedIndex)
         continue;
-      const isInVisibleRange = sidebarIndex >= startOthersIndex && sidebarIndex < endOthersIndex;
+      const isInVisibleRange = othersIndex >= startOthersIndex && othersIndex < endOthersIndex;
       if (isInVisibleRange) {
-        const pageRelativeIndex = sidebarIndex - startOthersIndex;
+        const pageRelativeIndex = othersIndex - startOthersIndex;
         const row = Math.floor(pageRelativeIndex / thumbCols);
         const col = pageRelativeIndex % thumbCols;
         const itemsInLastRow = itemsOnPage % thumbCols || thumbCols;
@@ -601,9 +377,9 @@ function createSidebarGrid(options) {
         if (row === lastRowIndex && itemsInLastRow < thumbCols) {
           const rowWidth = itemsInLastRow * thumbWidth + (itemsInLastRow - 1) * gap;
           if (isVertical) {
-            rowLeft = gap + (sidebarWidth - rowWidth) / 2;
+            rowLeft = gap + (othersAreaWidth - rowWidth) / 2;
           } else {
-            rowLeft = (sidebarPosition === "left" ? gap : mainWidth + gap * 2) + (sidebarWidth - rowWidth) / 2;
+            rowLeft = (effectivePosition === "left" ? gap : mainWidth + gap * 2) + (othersAreaWidth - rowWidth) / 2;
           }
         }
         positions[i] = {
@@ -619,7 +395,7 @@ function createSidebarGrid(options) {
           dimensions: { width: 0, height: 0 }
         };
       }
-      sidebarIndex++;
+      othersIndex++;
     }
   }
   const pagination = {
@@ -651,7 +427,7 @@ function createSidebarGrid(options) {
     height: mainItemHeight,
     rows: isVertical ? 2 : 1,
     cols: isVertical ? 1 : 2,
-    layoutMode: "sidebar",
+    layoutMode: "gallery",
     getPosition: (index) => positions[index]?.position ?? { top: 0, left: 0 },
     getItemDimensions,
     isMainItem: (index) => index === pinnedIndex,
@@ -668,14 +444,18 @@ function createSidebarGrid(options) {
     },
     hiddenCount,
     getLastVisibleOthersIndex,
-    getItemContentDimensions: createGetItemContentDimensions(getItemDimensions, options.itemAspectRatios, aspectRatio)
+    getItemContentDimensions: createGetItemContentDimensions(
+      getItemDimensions,
+      options.itemAspectRatios,
+      aspectRatio
+    )
   };
 }
 function createSpotlightGrid(options) {
-  const { dimensions, gap, aspectRatio, pinnedIndex = 0, flexLayout = false, itemAspectRatios } = options;
+  const { dimensions, gap, aspectRatio, pinnedIndex = 0, itemAspectRatios } = options;
   const { width: W, height: H } = dimensions;
-  const itemRatio = flexLayout && itemAspectRatios?.[pinnedIndex];
-  const shouldFill = itemRatio === "fill" || itemRatio === "auto";
+  const itemRatio = itemAspectRatios?.[pinnedIndex];
+  const shouldFill = itemRatio === "auto";
   let spotWidth;
   let spotHeight;
   if (shouldFill) {
@@ -709,7 +489,11 @@ function createSpotlightGrid(options) {
     isItemVisible: (index) => index === pinnedIndex,
     hiddenCount: 0,
     getLastVisibleOthersIndex: () => -1,
-    getItemContentDimensions: createGetItemContentDimensions(getItemDimensions, options.itemAspectRatios, aspectRatio)
+    getItemContentDimensions: createGetItemContentDimensions(
+      getItemDimensions,
+      options.itemAspectRatios,
+      aspectRatio
+    )
   };
 }
 function createDefaultPagination(count) {
@@ -757,23 +541,143 @@ function createEmptyMeetGridResult(layoutMode) {
     getItemContentDimensions: () => ({ width: 0, height: 0, offsetTop: 0, offsetLeft: 0 })
   };
 }
+function hasMixedRatios(itemAspectRatios, defaultRatio) {
+  if (!itemAspectRatios || itemAspectRatios.length === 0)
+    return false;
+  const ratios = /* @__PURE__ */ new Set();
+  for (const r of itemAspectRatios) {
+    ratios.add(r ?? defaultRatio);
+  }
+  return ratios.size > 1;
+}
+function createFlexibleGalleryGrid(options) {
+  const { dimensions, gap, aspectRatio, count, itemAspectRatios = [] } = options;
+  if (count === 0) {
+    return createEmptyMeetGridResult("gallery");
+  }
+  const { width: W, height: H } = dimensions;
+  const availW = W - gap * 2;
+  const availH = H - gap * 2;
+  const itemWHRatios = [];
+  for (let i = 0; i < count; i++) {
+    const ratioStr = itemAspectRatios[i] ?? aspectRatio;
+    const hw = getAspectRatio(ratioStr);
+    itemWHRatios.push(1 / hw);
+  }
+  function packRows(rowHeight) {
+    const result = [];
+    let currentRow = [];
+    let rowW = 0;
+    for (let i = 0; i < count; i++) {
+      const itemW = itemWHRatios[i] * rowHeight;
+      const gapW = currentRow.length > 0 ? gap : 0;
+      if (currentRow.length > 0 && rowW + gapW + itemW > availW) {
+        result.push(currentRow);
+        currentRow = [i];
+        rowW = itemW;
+      } else {
+        currentRow.push(i);
+        rowW += gapW + itemW;
+      }
+    }
+    if (currentRow.length > 0) {
+      result.push(currentRow);
+    }
+    return result;
+  }
+  let lo = 20;
+  let hi = availH;
+  let bestRows = [];
+  for (let iter = 0; iter < 50; iter++) {
+    const mid = (lo + hi) / 2;
+    const rows = packRows(mid);
+    const totalH = rows.length * mid + (rows.length - 1) * gap;
+    if (totalH > availH) {
+      hi = mid;
+    } else {
+      lo = mid;
+    }
+  }
+  const idealRowH = (lo + hi) / 2;
+  bestRows = packRows(idealRowH);
+  if (bestRows.length > 1 && bestRows[bestRows.length - 1].length === 1) {
+    const lastItem = bestRows[bestRows.length - 1][0];
+    const prevRow = bestRows[bestRows.length - 2];
+    if (prevRow.length <= 4) {
+      prevRow.push(lastItem);
+      bestRows.pop();
+    }
+  }
+  const posMap = /* @__PURE__ */ new Map();
+  const rowCount = bestRows.length;
+  const rowHeights = [];
+  for (const row of bestRows) {
+    const totalUnitW = row.reduce((s, idx) => s + itemWHRatios[idx], 0);
+    const netW = availW - (row.length - 1) * gap;
+    rowHeights.push(netW / totalUnitW);
+  }
+  const totalRowH = rowHeights.reduce((s, h) => s + h, 0) + (rowCount - 1) * gap;
+  const globalScale = availH / totalRowH;
+  let currentTop = gap;
+  for (let ri = 0; ri < rowCount; ri++) {
+    const row = bestRows[ri];
+    const finalRowH = rowHeights[ri] * globalScale;
+    const totalUnitW = row.reduce((s, idx) => s + itemWHRatios[idx], 0);
+    const netW = availW - (row.length - 1) * gap;
+    const itemWidths = row.map((idx) => itemWHRatios[idx] / totalUnitW * netW);
+    let currentLeft = gap;
+    for (let ci = 0; ci < row.length; ci++) {
+      posMap.set(row[ci], {
+        position: { top: currentTop, left: currentLeft },
+        dimensions: { width: itemWidths[ci], height: finalRowH }
+      });
+      currentLeft += itemWidths[ci] + gap;
+    }
+    currentTop += finalRowH + gap;
+  }
+  const getPosition = (index) => {
+    return posMap.get(index)?.position ?? { top: -9999, left: -9999 };
+  };
+  const getItemDimensions = (index) => {
+    return posMap.get(index)?.dimensions ?? { width: 0, height: 0 };
+  };
+  const pagination = createDefaultPagination(count);
+  return {
+    width: availW,
+    height: availH,
+    rows: rowCount,
+    cols: rowCount > 0 ? Math.max(...bestRows.map((r) => r.length)) : 0,
+    layoutMode: "gallery",
+    getPosition,
+    getItemDimensions,
+    isMainItem: () => false,
+    pagination,
+    isItemVisible: () => true,
+    hiddenCount: 0,
+    getLastVisibleOthersIndex: () => -1,
+    getItemContentDimensions: createGetItemContentDimensions(
+      getItemDimensions,
+      itemAspectRatios,
+      aspectRatio
+    )
+  };
+}
 function createMeetGrid(options) {
-  const { layoutMode = "gallery", count, flexLayout = false } = options;
+  const { layoutMode = "gallery", count } = options;
   if (count === 0) {
     return createEmptyMeetGridResult(layoutMode);
   }
   switch (layoutMode) {
     case "spotlight":
       return createSpotlightGrid(options);
-    case "sidebar":
-      return createSidebarGrid(options);
     case "gallery":
     default: {
-      const { maxItemsPerPage, currentPage, pinnedIndex, sidebarPosition = "right", dimensions, maxVisible = 0 } = options;
+      const { maxItemsPerPage, currentPage, pinnedIndex, maxVisible = 0 } = options;
       if (pinnedIndex !== void 0 && pinnedIndex >= 0 && pinnedIndex < count) {
-        const isPortrait = dimensions.width < dimensions.height;
-        const effectiveSidebarPosition = isPortrait ? "bottom" : sidebarPosition;
-        return createSidebarGrid({ ...options, sidebarPosition: effectiveSidebarPosition });
+        return createFlexiblePinGrid(options);
+      }
+      if (hasMixedRatios(options.itemAspectRatios, options.aspectRatio)) {
+        return createFlexibleGalleryGrid(options);
       }
       let visibleCount = count;
       let hiddenCount = 0;
@@ -799,57 +703,6 @@ function createMeetGrid(options) {
         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 grid = createGrid({ ...options, count: effectiveCount });
       const getPosition = (index) => {
         const relativeIndex = index - startIndex;
@@ -870,7 +723,11 @@ function createMeetGrid(options) {
         isItemVisible: (index) => index >= startIndex && index < endIndex,
         hiddenCount,
         getLastVisibleOthersIndex: () => hiddenCount > 0 ? lastVisibleIndex : -1,
-        getItemContentDimensions: createGetItemContentDimensions(getItemDimensions, options.itemAspectRatios, options.aspectRatio)
+        getItemContentDimensions: createGetItemContentDimensions(
+          getItemDimensions,
+          options.itemAspectRatios,
+          options.aspectRatio
+        )
       };
     }
   }
@@ -892,4 +749,4 @@ function getSpringConfig(preset = "smooth") {
   };
 }
 
-export { calculateContentDimensions, calculateFlexLayout, calculateFlexStrip, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
+export { calculateContentDimensions, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };