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

package/dist/index.d.cts

@@ -14,11 +14,10 @@ interface Position {
 }
 /**
  * Layout modes for the grid
- * - gallery: Equal-sized tiles in a responsive grid (use pinnedIndex for pin mode)
+ * - gallery: Flexible grid that fills all available space. Supports pin mode with pinnedIndex.
  * - spotlight: Single participant in focus, others hidden
- * - sidebar: Main view with thumbnail strip on the side (use sidebarPosition for top/bottom/left/right)
  */
-type LayoutMode = 'gallery' | 'spotlight' | 'sidebar';
+type LayoutMode = 'gallery' | 'spotlight';
 /**
  * Options for creating a basic grid
  */
@@ -35,49 +34,31 @@ interface GridOptions {
 /**
  * Aspect ratio configuration for individual items
  * - string: Custom ratio like "16:9", "9:16", "4:3", "1:1"
- * - 'fill': Stretch to fill the entire cell (useful for whiteboard)
  * - 'auto': Use actual content dimensions (requires callback)
  */
-type ItemAspectRatio = string | 'fill' | 'auto';
-/**
- * Flex layout item info for variable-sized cells
- */
-interface FlexItemInfo {
-    /** Item index */
-    index: number;
-    /** Width of this item's cell */
-    width: number;
-    /** Height of this item's cell */
-    height: number;
-    /** Left position */
-    left: number;
-    /** Top position */
-    top: number;
-    /** Row this item belongs to */
-    row: number;
-    /** Width weight factor (based on aspect ratio) */
-    widthFactor: number;
-}
+type ItemAspectRatio = string | 'auto';
 /**
  * Extended options for meet-style grid with layout modes
  */
 interface MeetGridOptions extends GridOptions {
     /** Layout mode for the grid */
     layoutMode?: LayoutMode;
-    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
+    /** Index of pinned/focused item (main participant for spotlight/pin modes) */
     pinnedIndex?: number;
-    /** Sidebar position (for sidebar mode) */
-    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Sidebar width ratio (0-1) */
-    sidebarRatio?: number;
+    /**
+     * Position of "others" thumbnails when a participant is pinned.
+     * In portrait containers, this is forced to 'bottom'.
+     * @default 'right'
+     */
+    othersPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Maximum items per page for pagination (0 = no pagination) */
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
     /**
      * Maximum visible items (0 = show all).
-     * - In gallery mode: limits total items displayed
-     * - In sidebar mode: limits "others" in the thumbnail strip (main item always visible)
+     * - In gallery mode without pin: limits total items displayed
+     * - In gallery mode with pin: limits "others" thumbnails (pinned item always visible)
      * When set, shows a '+X' indicator on the last visible item.
      * @default 0
      */
@@ -89,19 +70,11 @@ interface MeetGridOptions extends GridOptions {
      * Allows different aspect ratios per participant:
      * - Use "9:16" for mobile/portrait participants
      * - Use "16:9" for desktop/landscape participants
-     * - Use "fill" for whiteboard (full cell, no ratio constraint)
      * - Use undefined to inherit from global aspectRatio
      * @example
-     * itemAspectRatios: ["16:9", "9:16", "fill", undefined]
+     * itemAspectRatios: ["16:9", "9:16", undefined]
      */
     itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    /**
-     * Enable flexible cell sizing based on item aspect ratios.
-     * When true, portrait items (9:16) get narrower cells, landscape items (16:9) get wider cells.
-     * Items are packed into rows intelligently.
-     * @default false
-     */
-    flexLayout?: boolean;
 }
 /**
  * Pagination info returned with grid result
@@ -176,16 +149,13 @@ interface MeetGridResult extends GridResult {
      * Returns dimensions fitted within the cell while maintaining the item's aspect ratio.
      *
      * @param index - The item index
-     * @param itemRatio - The item's aspect ratio ("16:9", "9:16", "fill", or undefined for cell dimensions)
+     * @param itemRatio - The item's aspect ratio ("16:9", "9:16", or undefined for cell dimensions)
      * @returns Content dimensions with offset for centering within the cell
      *
      * @example
      * // For a mobile participant (9:16)
      * const content = grid.getItemContentDimensions(0, "9:16")
      *
-     * // For whiteboard (fill entire cell)
-     * const content = grid.getItemContentDimensions(1, "fill")
-     *
      * // Apply in React:
      * <div style={{
      *   width: content.width,
@@ -212,55 +182,16 @@ declare function parseAspectRatio(ratio: string): {
 /**
  * Calculate content dimensions that fit within a cell while maintaining aspect ratio
  * @param cellDimensions - The cell dimensions to fit content into
- * @param itemRatio - The content's aspect ratio ("16:9", "9:16", "fill", etc.)
+ * @param itemRatio - The content's aspect ratio ("16:9", "9:16", etc.)
  * @param defaultRatio - The default aspect ratio to use if itemRatio is undefined
  * @returns Content dimensions with offset for centering
  */
 declare function calculateContentDimensions(cellDimensions: GridDimensions, itemRatio?: ItemAspectRatio, defaultRatio?: string): ContentDimensions;
-/**
- * Calculate flex layout with variable cell sizes.
- * Each item maintains its aspect ratio.
- * Items in the same row have the same height but different widths.
- */
-declare function calculateFlexLayout(options: {
-    dimensions: GridDimensions;
-    count: number;
-    aspectRatio: string;
-    gap: number;
-    itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    preferHorizontal?: boolean;
-}): FlexItemInfo[];
-/**
- * Calculate flex strip layout for sidebar (single row/column of items with different aspects).
- * Used for sidebar modes where "others" need flexible sizing.
- *
- * @param options - Strip layout options
- * @returns Array of items with positions and dimensions relative to strip origin
- */
-declare function calculateFlexStrip(options: {
-    /** Strip dimensions (width x height) */
-    dimensions: GridDimensions;
-    /** Number of items */
-    count: number;
-    /** Default aspect ratio */
-    aspectRatio: string;
-    /** Gap between items */
-    gap: number;
-    /** Per-item aspect ratios */
-    itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    /** Direction of the strip */
-    direction: 'horizontal' | 'vertical';
-    /** Offset to add to all positions */
-    offset?: {
-        left: number;
-        top: number;
-    };
-}): FlexItemInfo[];
 /**
  * Calculates grid item dimensions for items that can fit in a container.
  * Adapted from: https://stackoverflow.com/a/28268965
  */
-declare function getGridItemDimensions({ count, dimensions, aspectRatio, gap, }: GridOptions): {
+declare function getGridItemDimensions({ count, dimensions, aspectRatio, gap }: GridOptions): {
     width: number;
     height: number;
     rows: number;
@@ -333,5 +264,5 @@ declare function getSpringConfig(preset?: SpringPreset): {
     type: "spring";
 };
 
-export { calculateContentDimensions, calculateFlexLayout, calculateFlexStrip, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
-export type { ContentDimensions, FlexItemInfo, GridDimensions, GridOptions, GridResult, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset };
+export { calculateContentDimensions, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
+export type { ContentDimensions, GridDimensions, GridOptions, GridResult, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset };

package/dist/index.d.mts

@@ -14,11 +14,10 @@ interface Position {
 }
 /**
  * Layout modes for the grid
- * - gallery: Equal-sized tiles in a responsive grid (use pinnedIndex for pin mode)
+ * - gallery: Flexible grid that fills all available space. Supports pin mode with pinnedIndex.
  * - spotlight: Single participant in focus, others hidden
- * - sidebar: Main view with thumbnail strip on the side (use sidebarPosition for top/bottom/left/right)
  */
-type LayoutMode = 'gallery' | 'spotlight' | 'sidebar';
+type LayoutMode = 'gallery' | 'spotlight';
 /**
  * Options for creating a basic grid
  */
@@ -35,49 +34,31 @@ interface GridOptions {
 /**
  * Aspect ratio configuration for individual items
  * - string: Custom ratio like "16:9", "9:16", "4:3", "1:1"
- * - 'fill': Stretch to fill the entire cell (useful for whiteboard)
  * - 'auto': Use actual content dimensions (requires callback)
  */
-type ItemAspectRatio = string | 'fill' | 'auto';
-/**
- * Flex layout item info for variable-sized cells
- */
-interface FlexItemInfo {
-    /** Item index */
-    index: number;
-    /** Width of this item's cell */
-    width: number;
-    /** Height of this item's cell */
-    height: number;
-    /** Left position */
-    left: number;
-    /** Top position */
-    top: number;
-    /** Row this item belongs to */
-    row: number;
-    /** Width weight factor (based on aspect ratio) */
-    widthFactor: number;
-}
+type ItemAspectRatio = string | 'auto';
 /**
  * Extended options for meet-style grid with layout modes
  */
 interface MeetGridOptions extends GridOptions {
     /** Layout mode for the grid */
     layoutMode?: LayoutMode;
-    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
+    /** Index of pinned/focused item (main participant for spotlight/pin modes) */
     pinnedIndex?: number;
-    /** Sidebar position (for sidebar mode) */
-    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Sidebar width ratio (0-1) */
-    sidebarRatio?: number;
+    /**
+     * Position of "others" thumbnails when a participant is pinned.
+     * In portrait containers, this is forced to 'bottom'.
+     * @default 'right'
+     */
+    othersPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Maximum items per page for pagination (0 = no pagination) */
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
     /**
      * Maximum visible items (0 = show all).
-     * - In gallery mode: limits total items displayed
-     * - In sidebar mode: limits "others" in the thumbnail strip (main item always visible)
+     * - In gallery mode without pin: limits total items displayed
+     * - In gallery mode with pin: limits "others" thumbnails (pinned item always visible)
      * When set, shows a '+X' indicator on the last visible item.
      * @default 0
      */
@@ -89,19 +70,11 @@ interface MeetGridOptions extends GridOptions {
      * Allows different aspect ratios per participant:
      * - Use "9:16" for mobile/portrait participants
      * - Use "16:9" for desktop/landscape participants
-     * - Use "fill" for whiteboard (full cell, no ratio constraint)
      * - Use undefined to inherit from global aspectRatio
      * @example
-     * itemAspectRatios: ["16:9", "9:16", "fill", undefined]
+     * itemAspectRatios: ["16:9", "9:16", undefined]
      */
     itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    /**
-     * Enable flexible cell sizing based on item aspect ratios.
-     * When true, portrait items (9:16) get narrower cells, landscape items (16:9) get wider cells.
-     * Items are packed into rows intelligently.
-     * @default false
-     */
-    flexLayout?: boolean;
 }
 /**
  * Pagination info returned with grid result
@@ -176,16 +149,13 @@ interface MeetGridResult extends GridResult {
      * Returns dimensions fitted within the cell while maintaining the item's aspect ratio.
      *
      * @param index - The item index
-     * @param itemRatio - The item's aspect ratio ("16:9", "9:16", "fill", or undefined for cell dimensions)
+     * @param itemRatio - The item's aspect ratio ("16:9", "9:16", or undefined for cell dimensions)
      * @returns Content dimensions with offset for centering within the cell
      *
      * @example
      * // For a mobile participant (9:16)
      * const content = grid.getItemContentDimensions(0, "9:16")
      *
-     * // For whiteboard (fill entire cell)
-     * const content = grid.getItemContentDimensions(1, "fill")
-     *
      * // Apply in React:
      * <div style={{
      *   width: content.width,
@@ -212,55 +182,16 @@ declare function parseAspectRatio(ratio: string): {
 /**
  * Calculate content dimensions that fit within a cell while maintaining aspect ratio
  * @param cellDimensions - The cell dimensions to fit content into
- * @param itemRatio - The content's aspect ratio ("16:9", "9:16", "fill", etc.)
+ * @param itemRatio - The content's aspect ratio ("16:9", "9:16", etc.)
  * @param defaultRatio - The default aspect ratio to use if itemRatio is undefined
  * @returns Content dimensions with offset for centering
  */
 declare function calculateContentDimensions(cellDimensions: GridDimensions, itemRatio?: ItemAspectRatio, defaultRatio?: string): ContentDimensions;
-/**
- * Calculate flex layout with variable cell sizes.
- * Each item maintains its aspect ratio.
- * Items in the same row have the same height but different widths.
- */
-declare function calculateFlexLayout(options: {
-    dimensions: GridDimensions;
-    count: number;
-    aspectRatio: string;
-    gap: number;
-    itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    preferHorizontal?: boolean;
-}): FlexItemInfo[];
-/**
- * Calculate flex strip layout for sidebar (single row/column of items with different aspects).
- * Used for sidebar modes where "others" need flexible sizing.
- *
- * @param options - Strip layout options
- * @returns Array of items with positions and dimensions relative to strip origin
- */
-declare function calculateFlexStrip(options: {
-    /** Strip dimensions (width x height) */
-    dimensions: GridDimensions;
-    /** Number of items */
-    count: number;
-    /** Default aspect ratio */
-    aspectRatio: string;
-    /** Gap between items */
-    gap: number;
-    /** Per-item aspect ratios */
-    itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    /** Direction of the strip */
-    direction: 'horizontal' | 'vertical';
-    /** Offset to add to all positions */
-    offset?: {
-        left: number;
-        top: number;
-    };
-}): FlexItemInfo[];
 /**
  * Calculates grid item dimensions for items that can fit in a container.
  * Adapted from: https://stackoverflow.com/a/28268965
  */
-declare function getGridItemDimensions({ count, dimensions, aspectRatio, gap, }: GridOptions): {
+declare function getGridItemDimensions({ count, dimensions, aspectRatio, gap }: GridOptions): {
     width: number;
     height: number;
     rows: number;
@@ -333,5 +264,5 @@ declare function getSpringConfig(preset?: SpringPreset): {
     type: "spring";
 };
 
-export { calculateContentDimensions, calculateFlexLayout, calculateFlexStrip, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
-export type { ContentDimensions, FlexItemInfo, GridDimensions, GridOptions, GridResult, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset };
+export { calculateContentDimensions, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
+export type { ContentDimensions, GridDimensions, GridOptions, GridResult, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset };

package/dist/index.d.ts

@@ -14,11 +14,10 @@ interface Position {
 }
 /**
  * Layout modes for the grid
- * - gallery: Equal-sized tiles in a responsive grid (use pinnedIndex for pin mode)
+ * - gallery: Flexible grid that fills all available space. Supports pin mode with pinnedIndex.
  * - spotlight: Single participant in focus, others hidden
- * - sidebar: Main view with thumbnail strip on the side (use sidebarPosition for top/bottom/left/right)
  */
-type LayoutMode = 'gallery' | 'spotlight' | 'sidebar';
+type LayoutMode = 'gallery' | 'spotlight';
 /**
  * Options for creating a basic grid
  */
@@ -35,49 +34,31 @@ interface GridOptions {
 /**
  * Aspect ratio configuration for individual items
  * - string: Custom ratio like "16:9", "9:16", "4:3", "1:1"
- * - 'fill': Stretch to fill the entire cell (useful for whiteboard)
  * - 'auto': Use actual content dimensions (requires callback)
  */
-type ItemAspectRatio = string | 'fill' | 'auto';
-/**
- * Flex layout item info for variable-sized cells
- */
-interface FlexItemInfo {
-    /** Item index */
-    index: number;
-    /** Width of this item's cell */
-    width: number;
-    /** Height of this item's cell */
-    height: number;
-    /** Left position */
-    left: number;
-    /** Top position */
-    top: number;
-    /** Row this item belongs to */
-    row: number;
-    /** Width weight factor (based on aspect ratio) */
-    widthFactor: number;
-}
+type ItemAspectRatio = string | 'auto';
 /**
  * Extended options for meet-style grid with layout modes
  */
 interface MeetGridOptions extends GridOptions {
     /** Layout mode for the grid */
     layoutMode?: LayoutMode;
-    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
+    /** Index of pinned/focused item (main participant for spotlight/pin modes) */
     pinnedIndex?: number;
-    /** Sidebar position (for sidebar mode) */
-    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Sidebar width ratio (0-1) */
-    sidebarRatio?: number;
+    /**
+     * Position of "others" thumbnails when a participant is pinned.
+     * In portrait containers, this is forced to 'bottom'.
+     * @default 'right'
+     */
+    othersPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Maximum items per page for pagination (0 = no pagination) */
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
     /**
      * Maximum visible items (0 = show all).
-     * - In gallery mode: limits total items displayed
-     * - In sidebar mode: limits "others" in the thumbnail strip (main item always visible)
+     * - In gallery mode without pin: limits total items displayed
+     * - In gallery mode with pin: limits "others" thumbnails (pinned item always visible)
      * When set, shows a '+X' indicator on the last visible item.
      * @default 0
      */
@@ -89,19 +70,11 @@ interface MeetGridOptions extends GridOptions {
      * Allows different aspect ratios per participant:
      * - Use "9:16" for mobile/portrait participants
      * - Use "16:9" for desktop/landscape participants
-     * - Use "fill" for whiteboard (full cell, no ratio constraint)
      * - Use undefined to inherit from global aspectRatio
      * @example
-     * itemAspectRatios: ["16:9", "9:16", "fill", undefined]
+     * itemAspectRatios: ["16:9", "9:16", undefined]
      */
     itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    /**
-     * Enable flexible cell sizing based on item aspect ratios.
-     * When true, portrait items (9:16) get narrower cells, landscape items (16:9) get wider cells.
-     * Items are packed into rows intelligently.
-     * @default false
-     */
-    flexLayout?: boolean;
 }
 /**
  * Pagination info returned with grid result
@@ -176,16 +149,13 @@ interface MeetGridResult extends GridResult {
      * Returns dimensions fitted within the cell while maintaining the item's aspect ratio.
      *
      * @param index - The item index
-     * @param itemRatio - The item's aspect ratio ("16:9", "9:16", "fill", or undefined for cell dimensions)
+     * @param itemRatio - The item's aspect ratio ("16:9", "9:16", or undefined for cell dimensions)
      * @returns Content dimensions with offset for centering within the cell
      *
      * @example
      * // For a mobile participant (9:16)
      * const content = grid.getItemContentDimensions(0, "9:16")
      *
-     * // For whiteboard (fill entire cell)
-     * const content = grid.getItemContentDimensions(1, "fill")
-     *
      * // Apply in React:
      * <div style={{
      *   width: content.width,
@@ -212,55 +182,16 @@ declare function parseAspectRatio(ratio: string): {
 /**
  * Calculate content dimensions that fit within a cell while maintaining aspect ratio
  * @param cellDimensions - The cell dimensions to fit content into
- * @param itemRatio - The content's aspect ratio ("16:9", "9:16", "fill", etc.)
+ * @param itemRatio - The content's aspect ratio ("16:9", "9:16", etc.)
  * @param defaultRatio - The default aspect ratio to use if itemRatio is undefined
  * @returns Content dimensions with offset for centering
  */
 declare function calculateContentDimensions(cellDimensions: GridDimensions, itemRatio?: ItemAspectRatio, defaultRatio?: string): ContentDimensions;
-/**
- * Calculate flex layout with variable cell sizes.
- * Each item maintains its aspect ratio.
- * Items in the same row have the same height but different widths.
- */
-declare function calculateFlexLayout(options: {
-    dimensions: GridDimensions;
-    count: number;
-    aspectRatio: string;
-    gap: number;
-    itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    preferHorizontal?: boolean;
-}): FlexItemInfo[];
-/**
- * Calculate flex strip layout for sidebar (single row/column of items with different aspects).
- * Used for sidebar modes where "others" need flexible sizing.
- *
- * @param options - Strip layout options
- * @returns Array of items with positions and dimensions relative to strip origin
- */
-declare function calculateFlexStrip(options: {
-    /** Strip dimensions (width x height) */
-    dimensions: GridDimensions;
-    /** Number of items */
-    count: number;
-    /** Default aspect ratio */
-    aspectRatio: string;
-    /** Gap between items */
-    gap: number;
-    /** Per-item aspect ratios */
-    itemAspectRatios?: (ItemAspectRatio | undefined)[];
-    /** Direction of the strip */
-    direction: 'horizontal' | 'vertical';
-    /** Offset to add to all positions */
-    offset?: {
-        left: number;
-        top: number;
-    };
-}): FlexItemInfo[];
 /**
  * Calculates grid item dimensions for items that can fit in a container.
  * Adapted from: https://stackoverflow.com/a/28268965
  */
-declare function getGridItemDimensions({ count, dimensions, aspectRatio, gap, }: GridOptions): {
+declare function getGridItemDimensions({ count, dimensions, aspectRatio, gap }: GridOptions): {
     width: number;
     height: number;
     rows: number;
@@ -333,5 +264,5 @@ declare function getSpringConfig(preset?: SpringPreset): {
     type: "spring";
 };
 
-export { calculateContentDimensions, calculateFlexLayout, calculateFlexStrip, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
-export type { ContentDimensions, FlexItemInfo, GridDimensions, GridOptions, GridResult, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset };
+export { calculateContentDimensions, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
+export type { ContentDimensions, GridDimensions, GridOptions, GridResult, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset };