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

package/dist/index.d.cts

@@ -14,12 +14,11 @@ interface Position {
 }
 /**
  * Layout modes for the grid
- * - gallery: Equal-sized tiles in a responsive grid
- * - speaker: Active speaker takes larger space (2x size)
+ * - gallery: Equal-sized tiles in a responsive grid (use pinnedIndex for pin mode)
  * - spotlight: Single participant in focus, others hidden
- * - sidebar: Main view with thumbnail strip on the side
+ * - sidebar: Main view with thumbnail strip on the side (use sidebarPosition for top/bottom/left/right)
  */
-type LayoutMode = 'gallery' | 'speaker' | 'spotlight' | 'sidebar';
+type LayoutMode = 'gallery' | 'spotlight' | 'sidebar';
 /**
  * Options for creating a basic grid
  */
@@ -33,16 +32,40 @@ interface GridOptions {
     /** Gap between items in pixels */
     gap: number;
 }
+/**
+ * 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;
+}
 /**
  * Extended options for meet-style grid with layout modes
  */
 interface MeetGridOptions extends GridOptions {
     /** Layout mode for the grid */
     layoutMode?: LayoutMode;
-    /** Index of pinned item (for speaker/spotlight modes) */
+    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
     pinnedIndex?: number;
-    /** Index of active speaker */
-    speakerIndex?: number;
     /** Sidebar position (for sidebar mode) */
     sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Sidebar width ratio (0-1) */
@@ -51,10 +74,34 @@ interface MeetGridOptions extends GridOptions {
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
-    /** Maximum visible "others" in speaker/sidebar modes (0 = show all) */
-    maxVisibleOthers?: number;
-    /** Current page for "others" in speaker/sidebar modes (0-based) */
-    currentOthersPage?: 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)
+     * When set, shows a '+X' indicator on the last visible item.
+     * @default 0
+     */
+    maxVisible?: number;
+    /** Current page for items (0-based), used when maxVisible > 0 for pagination */
+    currentVisiblePage?: number;
+    /**
+     * Per-item aspect ratio configurations (index-based)
+     * 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?: (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
@@ -88,13 +135,22 @@ interface GridResult {
     /** Function to get position of item at index */
     getPosition: (index: number) => Position;
 }
+/**
+ * Content dimensions result with positioning info
+ */
+interface ContentDimensions extends GridDimensions {
+    /** Offset from cell top to center the content */
+    offsetTop: number;
+    /** Offset from cell left to center the content */
+    offsetLeft: number;
+}
 /**
  * Extended result for meet-style grid
  */
 interface MeetGridResult extends GridResult {
     /** Layout mode used */
     layoutMode: LayoutMode;
-    /** Get item dimensions (may vary by index in some modes) */
+    /** Get item cell dimensions (the grid cell size, may vary by index in some modes) */
     getItemDimensions: (index: number) => GridDimensions;
     /** Check if item is the main/featured item */
     isMainItem: (index: number) => boolean;
@@ -102,6 +158,43 @@ interface MeetGridResult extends GridResult {
     pagination: PaginationInfo;
     /** Check if item should be visible on current page */
     isItemVisible: (index: number) => boolean;
+    /**
+     * Number of hidden items (for '+X more' indicator).
+     * When maxVisible is set and there are more participants than allowed,
+     * this indicates how many are hidden.
+     */
+    hiddenCount: number;
+    /**
+     * Get the last visible item index in the "others" section.
+     * Returns -1 if no items are visible or if there's no "others" section.
+     * Useful for showing '+X more' indicator on the last visible item.
+     */
+    getLastVisibleOthersIndex: () => number;
+    /**
+     * Get the actual content dimensions within a cell.
+     * Use this when items have different aspect ratios (e.g., phone vs desktop).
+     * 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)
+     * @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,
+     *   height: content.height,
+     *   marginTop: content.offsetTop,
+     *   marginLeft: content.offsetLeft
+     * }}>
+     */
+    getItemContentDimensions: (index: number, itemRatio?: ItemAspectRatio) => ContentDimensions;
 }
 /**
  * Parses the Aspect Ratio string to actual ratio (height/width)
@@ -116,6 +209,53 @@ declare function parseAspectRatio(ratio: string): {
     widthRatio: number;
     heightRatio: number;
 };
+/**
+ * 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 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
@@ -193,5 +333,5 @@ declare function getSpringConfig(preset?: SpringPreset): {
     type: "spring";
 };
 
-export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
-export type { GridDimensions, GridOptions, GridResult, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset };
+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 };

package/dist/index.d.mts

@@ -14,12 +14,11 @@ interface Position {
 }
 /**
  * Layout modes for the grid
- * - gallery: Equal-sized tiles in a responsive grid
- * - speaker: Active speaker takes larger space (2x size)
+ * - gallery: Equal-sized tiles in a responsive grid (use pinnedIndex for pin mode)
  * - spotlight: Single participant in focus, others hidden
- * - sidebar: Main view with thumbnail strip on the side
+ * - sidebar: Main view with thumbnail strip on the side (use sidebarPosition for top/bottom/left/right)
  */
-type LayoutMode = 'gallery' | 'speaker' | 'spotlight' | 'sidebar';
+type LayoutMode = 'gallery' | 'spotlight' | 'sidebar';
 /**
  * Options for creating a basic grid
  */
@@ -33,16 +32,40 @@ interface GridOptions {
     /** Gap between items in pixels */
     gap: number;
 }
+/**
+ * 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;
+}
 /**
  * Extended options for meet-style grid with layout modes
  */
 interface MeetGridOptions extends GridOptions {
     /** Layout mode for the grid */
     layoutMode?: LayoutMode;
-    /** Index of pinned item (for speaker/spotlight modes) */
+    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
     pinnedIndex?: number;
-    /** Index of active speaker */
-    speakerIndex?: number;
     /** Sidebar position (for sidebar mode) */
     sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Sidebar width ratio (0-1) */
@@ -51,10 +74,34 @@ interface MeetGridOptions extends GridOptions {
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
-    /** Maximum visible "others" in speaker/sidebar modes (0 = show all) */
-    maxVisibleOthers?: number;
-    /** Current page for "others" in speaker/sidebar modes (0-based) */
-    currentOthersPage?: 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)
+     * When set, shows a '+X' indicator on the last visible item.
+     * @default 0
+     */
+    maxVisible?: number;
+    /** Current page for items (0-based), used when maxVisible > 0 for pagination */
+    currentVisiblePage?: number;
+    /**
+     * Per-item aspect ratio configurations (index-based)
+     * 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?: (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
@@ -88,13 +135,22 @@ interface GridResult {
     /** Function to get position of item at index */
     getPosition: (index: number) => Position;
 }
+/**
+ * Content dimensions result with positioning info
+ */
+interface ContentDimensions extends GridDimensions {
+    /** Offset from cell top to center the content */
+    offsetTop: number;
+    /** Offset from cell left to center the content */
+    offsetLeft: number;
+}
 /**
  * Extended result for meet-style grid
  */
 interface MeetGridResult extends GridResult {
     /** Layout mode used */
     layoutMode: LayoutMode;
-    /** Get item dimensions (may vary by index in some modes) */
+    /** Get item cell dimensions (the grid cell size, may vary by index in some modes) */
     getItemDimensions: (index: number) => GridDimensions;
     /** Check if item is the main/featured item */
     isMainItem: (index: number) => boolean;
@@ -102,6 +158,43 @@ interface MeetGridResult extends GridResult {
     pagination: PaginationInfo;
     /** Check if item should be visible on current page */
     isItemVisible: (index: number) => boolean;
+    /**
+     * Number of hidden items (for '+X more' indicator).
+     * When maxVisible is set and there are more participants than allowed,
+     * this indicates how many are hidden.
+     */
+    hiddenCount: number;
+    /**
+     * Get the last visible item index in the "others" section.
+     * Returns -1 if no items are visible or if there's no "others" section.
+     * Useful for showing '+X more' indicator on the last visible item.
+     */
+    getLastVisibleOthersIndex: () => number;
+    /**
+     * Get the actual content dimensions within a cell.
+     * Use this when items have different aspect ratios (e.g., phone vs desktop).
+     * 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)
+     * @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,
+     *   height: content.height,
+     *   marginTop: content.offsetTop,
+     *   marginLeft: content.offsetLeft
+     * }}>
+     */
+    getItemContentDimensions: (index: number, itemRatio?: ItemAspectRatio) => ContentDimensions;
 }
 /**
  * Parses the Aspect Ratio string to actual ratio (height/width)
@@ -116,6 +209,53 @@ declare function parseAspectRatio(ratio: string): {
     widthRatio: number;
     heightRatio: number;
 };
+/**
+ * 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 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
@@ -193,5 +333,5 @@ declare function getSpringConfig(preset?: SpringPreset): {
     type: "spring";
 };
 
-export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
-export type { GridDimensions, GridOptions, GridResult, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset };
+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 };

package/dist/index.d.ts

@@ -14,12 +14,11 @@ interface Position {
 }
 /**
  * Layout modes for the grid
- * - gallery: Equal-sized tiles in a responsive grid
- * - speaker: Active speaker takes larger space (2x size)
+ * - gallery: Equal-sized tiles in a responsive grid (use pinnedIndex for pin mode)
  * - spotlight: Single participant in focus, others hidden
- * - sidebar: Main view with thumbnail strip on the side
+ * - sidebar: Main view with thumbnail strip on the side (use sidebarPosition for top/bottom/left/right)
  */
-type LayoutMode = 'gallery' | 'speaker' | 'spotlight' | 'sidebar';
+type LayoutMode = 'gallery' | 'spotlight' | 'sidebar';
 /**
  * Options for creating a basic grid
  */
@@ -33,16 +32,40 @@ interface GridOptions {
     /** Gap between items in pixels */
     gap: number;
 }
+/**
+ * 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;
+}
 /**
  * Extended options for meet-style grid with layout modes
  */
 interface MeetGridOptions extends GridOptions {
     /** Layout mode for the grid */
     layoutMode?: LayoutMode;
-    /** Index of pinned item (for speaker/spotlight modes) */
+    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
     pinnedIndex?: number;
-    /** Index of active speaker */
-    speakerIndex?: number;
     /** Sidebar position (for sidebar mode) */
     sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Sidebar width ratio (0-1) */
@@ -51,10 +74,34 @@ interface MeetGridOptions extends GridOptions {
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
-    /** Maximum visible "others" in speaker/sidebar modes (0 = show all) */
-    maxVisibleOthers?: number;
-    /** Current page for "others" in speaker/sidebar modes (0-based) */
-    currentOthersPage?: 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)
+     * When set, shows a '+X' indicator on the last visible item.
+     * @default 0
+     */
+    maxVisible?: number;
+    /** Current page for items (0-based), used when maxVisible > 0 for pagination */
+    currentVisiblePage?: number;
+    /**
+     * Per-item aspect ratio configurations (index-based)
+     * 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?: (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
@@ -88,13 +135,22 @@ interface GridResult {
     /** Function to get position of item at index */
     getPosition: (index: number) => Position;
 }
+/**
+ * Content dimensions result with positioning info
+ */
+interface ContentDimensions extends GridDimensions {
+    /** Offset from cell top to center the content */
+    offsetTop: number;
+    /** Offset from cell left to center the content */
+    offsetLeft: number;
+}
 /**
  * Extended result for meet-style grid
  */
 interface MeetGridResult extends GridResult {
     /** Layout mode used */
     layoutMode: LayoutMode;
-    /** Get item dimensions (may vary by index in some modes) */
+    /** Get item cell dimensions (the grid cell size, may vary by index in some modes) */
     getItemDimensions: (index: number) => GridDimensions;
     /** Check if item is the main/featured item */
     isMainItem: (index: number) => boolean;
@@ -102,6 +158,43 @@ interface MeetGridResult extends GridResult {
     pagination: PaginationInfo;
     /** Check if item should be visible on current page */
     isItemVisible: (index: number) => boolean;
+    /**
+     * Number of hidden items (for '+X more' indicator).
+     * When maxVisible is set and there are more participants than allowed,
+     * this indicates how many are hidden.
+     */
+    hiddenCount: number;
+    /**
+     * Get the last visible item index in the "others" section.
+     * Returns -1 if no items are visible or if there's no "others" section.
+     * Useful for showing '+X more' indicator on the last visible item.
+     */
+    getLastVisibleOthersIndex: () => number;
+    /**
+     * Get the actual content dimensions within a cell.
+     * Use this when items have different aspect ratios (e.g., phone vs desktop).
+     * 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)
+     * @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,
+     *   height: content.height,
+     *   marginTop: content.offsetTop,
+     *   marginLeft: content.offsetLeft
+     * }}>
+     */
+    getItemContentDimensions: (index: number, itemRatio?: ItemAspectRatio) => ContentDimensions;
 }
 /**
  * Parses the Aspect Ratio string to actual ratio (height/width)
@@ -116,6 +209,53 @@ declare function parseAspectRatio(ratio: string): {
     widthRatio: number;
     heightRatio: number;
 };
+/**
+ * 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 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
@@ -193,5 +333,5 @@ declare function getSpringConfig(preset?: SpringPreset): {
     type: "spring";
 };
 
-export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, parseAspectRatio, springPresets };
-export type { GridDimensions, GridOptions, GridResult, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset };
+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 };