@thangdevalone/meet-layout-grid-core 1.0.0 → 1.0.4

package/dist/index.mjs

@@ -35,6 +35,8 @@ function getGridItemDimensions({
   let h = 0;
   let a = 1;
   let b = 1;
+  const isPortrait = H > W;
+  const minCols = N >= 2 && isPortrait ? 2 : 1;
   const widths = [];
   for (let n = 1; n <= N; n++) {
     widths.push((W - s * (n - 1)) / n, (H - s * (n - 1)) / (n * r));
@@ -45,12 +47,27 @@ function getGridItemDimensions({
     h = w * r;
     a = Math.floor((W + s) / (w + s));
     b = Math.floor((H + s) / (h + s));
+    if (a < minCols && N >= minCols) {
+      continue;
+    }
     if (a * b >= N) {
-      a = Math.ceil(N / b);
+      a = Math.max(minCols, Math.ceil(N / b));
       b = Math.ceil(N / a);
       break;
     }
   }
+  if (a < minCols && N >= minCols) {
+    a = minCols;
+    b = Math.ceil(N / a);
+    w = (W - s * (a - 1)) / a;
+    h = w * r;
+    const requiredHeight = b * h + (b - 1) * s;
+    if (requiredHeight > H) {
+      const scale = H / requiredHeight;
+      h = h * scale;
+      w = h / r;
+    }
+  }
   return { width: w, height: h, rows: b, cols: a };
 }
 function createGridItemPositioner({
@@ -67,21 +84,23 @@ function createGridItemPositioner({
   let firstLeft = (W - (w * cols + (cols - 1) * gap)) / 2;
   const topAdd = h + gap;
   const leftAdd = w + gap;
-  let col = 0;
-  let row = 0;
   const incompleteRowCols = count % cols;
+  const lastRowStartIndex = incompleteRowCols > 0 ? count - incompleteRowCols : count - cols;
   function getPosition(index) {
-    const remaining = count - index;
-    if (remaining === incompleteRowCols && incompleteRowCols > 0) {
-      firstLeft = (W - (w * remaining + (remaining - 1) * gap)) / 2;
+    const row = Math.floor(index / cols);
+    const col = index % cols;
+    const isInLastRow = incompleteRowCols > 0 && index >= lastRowStartIndex;
+    let leftOffset = firstLeft;
+    if (isInLastRow) {
+      const lastRowItemCount = incompleteRowCols;
+      const colInLastRow = index - lastRowStartIndex;
+      leftOffset = (W - (w * lastRowItemCount + (lastRowItemCount - 1) * gap)) / 2;
+      const top2 = firstTop + row * topAdd;
+      const left2 = leftOffset + colInLastRow * leftAdd;
+      return { top: top2, left: left2 };
     }
     const top = firstTop + row * topAdd;
-    const left = firstLeft + col * leftAdd;
-    col++;
-    if ((index + 1) % cols === 0) {
-      row++;
-      col = 0;
-    }
+    const left = leftOffset + col * leftAdd;
     return { top, left };
   }
   return getPosition;
@@ -110,13 +129,25 @@ function createGrid({ aspectRatio, count, dimensions, gap }) {
   };
 }
 function createSidebarGrid(options) {
-  const { dimensions, gap, aspectRatio, count, sidebarPosition = "right", sidebarRatio = 0.25, pinnedIndex = 0 } = options;
+  const { dimensions, gap, aspectRatio, count, sidebarPosition = "right", sidebarRatio = 0.25, pinnedIndex = 0, maxVisibleOthers = 0, currentOthersPage = 0 } = options;
   if (count === 0) {
     return createEmptyMeetGridResult("sidebar");
   }
+  if (count === 1) {
+    const grid = createGrid({ ...options, count: 1 });
+    const pagination2 = createDefaultPagination(1);
+    return {
+      ...grid,
+      layoutMode: "sidebar",
+      getItemDimensions: () => ({ width: grid.width, height: grid.height }),
+      isMainItem: () => true,
+      pagination: pagination2,
+      isItemVisible: () => true
+    };
+  }
   const { width: W, height: H } = dimensions;
   const ratio = getAspectRatio(aspectRatio);
-  const isVertical = sidebarPosition === "bottom";
+  const isVertical = sidebarPosition === "bottom" || sidebarPosition === "top";
   let mainWidth;
   let mainHeight;
   let sidebarWidth;
@@ -138,125 +169,285 @@ function createSidebarGrid(options) {
     mainItemHeight = mainHeight;
     mainItemWidth = mainItemHeight / ratio;
   }
-  const sidebarCount = count - 1;
-  let thumbWidth;
-  let thumbHeight;
-  if (sidebarCount > 0) {
+  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;
+  let thumbCols = 1;
+  let thumbRows = 1;
+  let thumbWidth = 0;
+  let thumbHeight = 0;
+  if (visibleOthers > 0) {
+    let bestArea = 0;
     if (isVertical) {
-      thumbWidth = Math.min((sidebarWidth - (sidebarCount - 1) * gap) / sidebarCount, sidebarHeight / ratio);
-      thumbHeight = thumbWidth * ratio;
+      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 {
-      thumbHeight = Math.min((sidebarHeight - (sidebarCount - 1) * gap) / sidebarCount, sidebarWidth / ratio);
-      thumbWidth = thumbHeight / ratio;
+      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;
+        }
+      }
     }
-  } else {
-    thumbWidth = 0;
-    thumbHeight = 0;
   }
   const positions = [];
-  const mainLeft = isVertical ? gap + (mainWidth - mainItemWidth) / 2 : sidebarPosition === "left" ? sidebarWidth + gap * 2 + (mainWidth - mainItemWidth) / 2 : gap + (mainWidth - mainItemWidth) / 2;
-  const mainTop = isVertical ? gap + (mainHeight - mainItemHeight) / 2 : gap + (mainHeight - mainItemHeight) / 2;
+  let mainLeft;
+  let mainTop;
+  if (isVertical) {
+    mainLeft = gap + (mainWidth - mainItemWidth) / 2;
+    mainTop = sidebarPosition === "top" ? sidebarHeight + gap * 2 + (mainHeight - mainItemHeight) / 2 : gap + (mainHeight - mainItemHeight) / 2;
+  } else {
+    mainLeft = sidebarPosition === "left" ? sidebarWidth + 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 }
   };
+  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 {
+    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;
-    let left;
-    let top;
-    if (isVertical) {
-      const totalThumbWidth = sidebarCount * thumbWidth + (sidebarCount - 1) * gap;
-      const startLeft = gap + (sidebarWidth - totalThumbWidth) / 2;
-      left = startLeft + sidebarIndex * (thumbWidth + gap);
-      top = mainHeight + gap * 2;
+    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 {
-      left = sidebarPosition === "left" ? gap : mainWidth + gap * 2;
-      const totalThumbHeight = sidebarCount * thumbHeight + (sidebarCount - 1) * gap;
-      const startTop = gap + (sidebarHeight - totalThumbHeight) / 2;
-      top = startTop + sidebarIndex * (thumbHeight + gap);
+      positions[i] = {
+        position: { top: -9999, left: -9999 },
+        dimensions: { width: 0, height: 0 }
+      };
     }
-    positions[i] = {
-      position: { top, left },
-      dimensions: { width: thumbWidth, height: thumbHeight }
-    };
     sidebarIndex++;
   }
+  const pagination = {
+    enabled: maxVisibleOthers > 0 && totalOthers > maxVisibleOthers,
+    currentPage: safeCurrentOthersPage,
+    totalPages: othersTotalPages,
+    itemsOnPage,
+    startIndex: startOthersIndex,
+    endIndex: endOthersIndex
+  };
   return {
     width: mainItemWidth,
     height: mainItemHeight,
-    rows: isVertical ? 2 : 1,
-    cols: isVertical ? 1 : 2,
+    rows: isVertical ? 1 + thumbRows : thumbRows,
+    cols: isVertical ? thumbCols : 1 + thumbCols,
     layoutMode: "sidebar",
     getPosition: (index) => positions[index]?.position ?? { top: 0, left: 0 },
     getItemDimensions: (index) => positions[index]?.dimensions ?? { width: 0, height: 0 },
-    isMainItem: (index) => index === pinnedIndex
+    isMainItem: (index) => index === pinnedIndex,
+    pagination,
+    isItemVisible: (index) => {
+      if (index === pinnedIndex)
+        return true;
+      let sIdx = 0;
+      for (let i = 0; i < index; i++) {
+        if (i !== pinnedIndex)
+          sIdx++;
+      }
+      return sIdx >= startOthersIndex && sIdx < endOthersIndex;
+    },
+    // Extra info
+    hiddenCount
   };
 }
 function createSpeakerGrid(options) {
-  const { dimensions, gap, aspectRatio, count, speakerIndex = 0 } = 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
+      isMainItem: () => true,
+      pagination: pagination2,
+      isItemVisible: () => true
     };
   }
   const { width: W, height: H } = dimensions;
   const ratio = getAspectRatio(aspectRatio);
-  const speakerHeight = (H - gap * 3) * 0.65;
-  const othersHeight = (H - gap * 3) * 0.35;
+  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 > speakerHeight) {
-    speakerH = speakerHeight;
+  if (speakerH > speakerAreaHeight) {
+    speakerH = speakerAreaHeight;
     speakerW = speakerH / ratio;
   }
-  const othersCount = count - 1;
-  let otherW = Math.min((W - gap * 2 - (othersCount - 1) * gap) / othersCount, othersHeight / ratio);
-  let otherH = otherW * ratio;
-  if (otherH > othersHeight) {
-    otherH = othersHeight;
-    otherW = otherH / 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 + (speakerHeight - speakerH) / 2,
+      top: gap + (speakerAreaHeight - speakerH) / 2,
       left: gap + (W - gap * 2 - speakerW) / 2
     },
     dimensions: { width: speakerW, height: speakerH }
   };
-  const totalOthersWidth = othersCount * otherW + (othersCount - 1) * gap;
-  const startLeft = gap + (W - gap * 2 - totalOthersWidth) / 2;
+  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;
-    positions[i] = {
-      position: {
-        top: speakerHeight + gap * 2 + (othersHeight - otherH) / 2,
-        left: startLeft + otherIndex * (otherW + gap)
-      },
-      dimensions: { width: otherW, height: otherH }
-    };
+    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: 2,
-    cols: othersCount,
+    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
+    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
   };
 }
 function createSpotlightGrid(options) {
@@ -273,6 +464,7 @@ function createSpotlightGrid(options) {
     top: gap + (H - gap * 2 - spotHeight) / 2,
     left: gap + (W - gap * 2 - spotWidth) / 2
   };
+  const pagination = createDefaultPagination(1);
   return {
     width: spotWidth,
     height: spotHeight,
@@ -281,7 +473,36 @@ function createSpotlightGrid(options) {
     layoutMode: "spotlight",
     getPosition: (index) => index === pinnedIndex ? position : { top: -9999, left: -9999 },
     getItemDimensions: (index) => index === pinnedIndex ? { width: spotWidth, height: spotHeight } : { width: 0, height: 0 },
-    isMainItem: (index) => index === pinnedIndex
+    isMainItem: (index) => index === pinnedIndex,
+    pagination,
+    isItemVisible: (index) => index === pinnedIndex
+  };
+}
+function createDefaultPagination(count) {
+  return {
+    enabled: false,
+    currentPage: 0,
+    totalPages: 1,
+    itemsOnPage: count,
+    startIndex: 0,
+    endIndex: count
+  };
+}
+function createPaginationInfo(count, maxItemsPerPage, currentPage) {
+  if (!maxItemsPerPage || maxItemsPerPage <= 0 || maxItemsPerPage >= count) {
+    return createDefaultPagination(count);
+  }
+  const totalPages = Math.ceil(count / maxItemsPerPage);
+  const page = Math.min(Math.max(0, currentPage ?? 0), totalPages - 1);
+  const startIndex = page * maxItemsPerPage;
+  const endIndex = Math.min(startIndex + maxItemsPerPage, count);
+  return {
+    enabled: true,
+    currentPage: page,
+    totalPages,
+    itemsOnPage: endIndex - startIndex,
+    startIndex,
+    endIndex
   };
 }
 function createEmptyMeetGridResult(layoutMode) {
@@ -293,7 +514,9 @@ function createEmptyMeetGridResult(layoutMode) {
     layoutMode,
     getPosition: () => ({ top: 0, left: 0 }),
     getItemDimensions: () => ({ width: 0, height: 0 }),
-    isMainItem: () => false
+    isMainItem: () => false,
+    pagination: createDefaultPagination(0),
+    isItemVisible: () => false
   };
 }
 function createMeetGrid(options) {
@@ -310,12 +533,31 @@ function createMeetGrid(options) {
       return createSidebarGrid(options);
     case "gallery":
     default: {
-      const grid = createGrid(options);
+      const { maxItemsPerPage, currentPage, pinnedIndex, sidebarPosition = "right" } = options;
+      if (pinnedIndex !== void 0 && pinnedIndex >= 0 && pinnedIndex < count) {
+        return createSidebarGrid({ ...options, sidebarPosition });
+      }
+      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) {
+          return { top: -9999, left: -9999 };
+        }
+        return grid.getPosition(pageRelativeIndex);
+      };
       return {
         ...grid,
         layoutMode: "gallery",
+        getPosition,
         getItemDimensions: () => ({ width: grid.width, height: grid.height }),
-        isMainItem: () => false
+        isMainItem: () => false,
+        pagination,
+        isItemVisible: (index) => index >= pagination.startIndex && index < pagination.endIndex
       };
     }
   }

package/package.json

@@ -1,49 +1,50 @@
-{
-    "name": "@thangdevalone/meet-layout-grid-core",
-    "version": "1.0.0",
-    "description": "Core grid calculation logic for meet-layout-grid",
-    "type": "module",
-    "main": "./dist/index.cjs",
-    "module": "./dist/index.mjs",
-    "types": "./dist/index.d.ts",
-    "exports": {
-        ".": {
-            "import": {
-                "types": "./dist/index.d.mts",
-                "default": "./dist/index.mjs"
-            },
-            "require": {
-                "types": "./dist/index.d.cts",
-                "default": "./dist/index.cjs"
-            }
-        }
-    },
-    "files": [
-        "dist"
-    ],
-    "scripts": {
-        "build": "unbuild",
-        "dev": "unbuild --watch",
-        "clean": "rimraf dist",
-        "test": "vitest run",
-        "test:watch": "vitest"
-    },
-    "keywords": [
-        "grid",
-        "responsive",
-        "meeting",
-        "video",
-        "layout"
-    ],
-    "author": "ThangDevAlone",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/thangdevalone/meet-layout-grid"
-    },
-    "devDependencies": {
-        "unbuild": "^2.0.0",
-        "vitest": "^1.0.0",
-        "rimraf": "^5.0.0"
-    }
-}
+{
+  "name": "@thangdevalone/meet-layout-grid-core",
+  "version": "1.0.4",
+  "description": "Core grid calculation logic for meet-layout-grid",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "grid",
+    "responsive",
+    "meeting",
+    "video",
+    "layout"
+  ],
+  "author": "ThangDevAlone",
+  "license": "MIT",
+  "homepage": "https://github.com/thangdevalone/meet-layout-grid#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thangdevalone/meet-layout-grid"
+  },
+  "devDependencies": {
+    "unbuild": "^2.0.0",
+    "vitest": "^1.0.0",
+    "rimraf": "^5.0.0"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --watch",
+    "clean": "rimraf dist",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}