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

package/README.md

@@ -43,7 +43,6 @@ Wraps the grid, computes layout, provides context.
   gap={8}
   count={6}
   layoutMode="gallery"
-  speakerIndex={0}
   pinnedIndex={0}
   sidebarPosition="right"
   sidebarRatio={0.25}
@@ -85,7 +84,8 @@ const grid = useMeetGrid({
   count: 6,
   aspectRatio: '16:9',
   gap: 8,
-  layoutMode: 'speaker',
+  layoutMode: 'sidebar',
+  sidebarPosition: 'bottom', // speaker-like layout
 })
 
 const { top, left } = grid.getPosition(index)
@@ -94,10 +94,9 @@ const { width, height } = grid.getItemDimensions(index)
 
 ## Layout modes
 
-- **gallery** — Same-size tiles
-- **speaker** — One large tile
+- **gallery** — Same-size tiles (use `pinnedIndex` to pin a participant)
 - **spotlight** — Single participant
-- **sidebar** — Main + thumbnails
+- **sidebar** — Main + thumbnails (use `sidebarPosition: 'bottom'` for speaker-like layout)
 
 ## Animation presets
 

package/dist/index.cjs

@@ -46,6 +46,7 @@ function useGridDimensions(ref) {
   return dimensions;
 }
 function useMeetGrid(options) {
+  const itemAspectRatiosKey = options.itemAspectRatios?.join(",") ?? "";
   return React.useMemo(() => {
     return meetLayoutGridCore.createMeetGrid(options);
   }, [
@@ -56,13 +57,14 @@ function useMeetGrid(options) {
     options.gap,
     options.layoutMode,
     options.pinnedIndex,
-    options.speakerIndex,
     options.sidebarPosition,
     options.sidebarRatio,
     options.maxItemsPerPage,
     options.currentPage,
-    options.maxVisibleOthers,
-    options.currentOthersPage
+    options.maxVisible,
+    options.currentVisiblePage,
+    options.flexLayout,
+    itemAspectRatiosKey
   ]);
 }
 function useGridAnimation(preset = "smooth") {
@@ -77,7 +79,6 @@ const GridContainer = React.forwardRef(
     count,
     layoutMode = "gallery",
     pinnedIndex,
-    speakerIndex,
     sidebarPosition,
     sidebarRatio,
     springPreset = "smooth",
@@ -85,8 +86,10 @@ const GridContainer = React.forwardRef(
     className,
     maxItemsPerPage,
     currentPage,
-    maxVisibleOthers,
-    currentOthersPage,
+    maxVisible,
+    currentVisiblePage,
+    itemAspectRatios,
+    flexLayout,
     ...props
   }, forwardedRef) {
     const internalRef = React.useRef(null);
@@ -100,13 +103,14 @@ const GridContainer = React.forwardRef(
       gap,
       layoutMode,
       pinnedIndex,
-      speakerIndex,
       sidebarPosition,
       sidebarRatio,
       maxItemsPerPage,
       currentPage,
-      maxVisibleOthers,
-      currentOthersPage
+      maxVisible,
+      currentVisiblePage,
+      itemAspectRatios,
+      flexLayout
     };
     const grid = useMeetGrid(gridOptions);
     const containerStyle = {
@@ -123,6 +127,7 @@ const GridItem = React.forwardRef(
   function GridItem2({
     index,
     children,
+    itemAspectRatio,
     transition: customTransition,
     disableAnimation = false,
     className,
@@ -138,6 +143,7 @@ const GridItem = React.forwardRef(
     }
     const { top, left } = grid.getPosition(index);
     const { width, height } = grid.getItemDimensions(index);
+    const contentDimensions = grid.getItemContentDimensions(index, itemAspectRatio);
     const isMain = grid.isMainItem(index);
     if (grid.layoutMode === "spotlight" && !isMain) {
       return null;
@@ -155,6 +161,15 @@ const GridItem = React.forwardRef(
       top,
       left
     };
+    const lastVisibleOthersIndex = grid.getLastVisibleOthersIndex();
+    const isLastVisibleOther = index === lastVisibleOthersIndex;
+    const hiddenCount = grid.hiddenCount;
+    const renderChildren = () => {
+      if (typeof children === "function") {
+        return children({ contentDimensions, isLastVisibleOther, hiddenCount });
+      }
+      return children;
+    };
     if (disableAnimation) {
       return /* @__PURE__ */ React__default.createElement(
         "div",
@@ -166,7 +181,7 @@ const GridItem = React.forwardRef(
           "data-grid-main": isMain,
           ...props
         },
-        children
+        renderChildren()
       );
     }
     return /* @__PURE__ */ React__default.createElement(
@@ -183,6 +198,125 @@ const GridItem = React.forwardRef(
         "data-grid-main": isMain,
         ...props
       },
+      renderChildren()
+    );
+  }
+);
+const FloatingGridItem = React.forwardRef(
+  function FloatingGridItem2({
+    children,
+    width = 120,
+    height = 160,
+    initialPosition = { x: 16, y: 16 },
+    anchor: initialAnchor = "bottom-right",
+    visible = true,
+    edgePadding = 12,
+    onAnchorChange,
+    transition,
+    borderRadius = 12,
+    boxShadow = "0 4px 20px rgba(0,0,0,0.3)",
+    className,
+    style,
+    ...props
+  }, ref) {
+    const { dimensions } = useGridContext();
+    const [currentAnchor, setCurrentAnchor] = React__default.useState(initialAnchor);
+    const x = react.useMotionValue(0);
+    const y = react.useMotionValue(0);
+    const [isInitialized, setIsInitialized] = React__default.useState(false);
+    const getCornerPosition = React__default.useCallback((corner) => {
+      const padding = edgePadding + initialPosition.x;
+      switch (corner) {
+        case "top-left":
+          return { x: padding, y: padding };
+        case "top-right":
+          return { x: dimensions.width - width - padding, y: padding };
+        case "bottom-left":
+          return { x: padding, y: dimensions.height - height - padding };
+        case "bottom-right":
+        default:
+          return { x: dimensions.width - width - padding, y: dimensions.height - height - padding };
+      }
+    }, [dimensions.width, dimensions.height, width, height, edgePadding, initialPosition.x]);
+    React__default.useEffect(() => {
+      if (dimensions.width > 0 && dimensions.height > 0 && !isInitialized) {
+        const pos = getCornerPosition(currentAnchor);
+        x.set(pos.x);
+        y.set(pos.y);
+        setIsInitialized(true);
+      }
+    }, [dimensions.width, dimensions.height, currentAnchor, getCornerPosition, isInitialized, x, y]);
+    React__default.useEffect(() => {
+      if (isInitialized && dimensions.width > 0 && dimensions.height > 0) {
+        const pos = getCornerPosition(currentAnchor);
+        const springConfig = { type: "spring", stiffness: 400, damping: 30 };
+        react.animate(x, pos.x, springConfig);
+        react.animate(y, pos.y, springConfig);
+      }
+    }, [currentAnchor, dimensions.width, dimensions.height, getCornerPosition, isInitialized, x, y]);
+    if (!visible || dimensions.width === 0 || dimensions.height === 0)
+      return null;
+    const findNearestCorner = (posX, posY) => {
+      const centerX = posX + width / 2;
+      const centerY = posY + height / 2;
+      const containerCenterX = dimensions.width / 2;
+      const containerCenterY = dimensions.height / 2;
+      const isLeft = centerX < containerCenterX;
+      const isTop = centerY < containerCenterY;
+      if (isTop && isLeft)
+        return "top-left";
+      if (isTop && !isLeft)
+        return "top-right";
+      if (!isTop && isLeft)
+        return "bottom-left";
+      return "bottom-right";
+    };
+    const dragConstraints = {
+      left: edgePadding,
+      right: dimensions.width - width - edgePadding,
+      top: edgePadding,
+      bottom: dimensions.height - height - edgePadding
+    };
+    const floatingStyle = {
+      position: "absolute",
+      width,
+      height,
+      borderRadius,
+      boxShadow,
+      overflow: "hidden",
+      cursor: "grab",
+      zIndex: 100,
+      touchAction: "none",
+      left: 0,
+      top: 0,
+      ...style
+    };
+    const handleDragEnd = () => {
+      const currentX = x.get();
+      const currentY = y.get();
+      const nearestCorner = findNearestCorner(currentX, currentY);
+      setCurrentAnchor(nearestCorner);
+      onAnchorChange?.(nearestCorner);
+      const snapPos = getCornerPosition(nearestCorner);
+      const springConfig = { type: "spring", stiffness: 400, damping: 30 };
+      react.animate(x, snapPos.x, springConfig);
+      react.animate(y, snapPos.y, springConfig);
+    };
+    return /* @__PURE__ */ React__default.createElement(
+      react.motion.div,
+      {
+        ref,
+        drag: true,
+        dragMomentum: false,
+        dragElastic: 0.1,
+        dragConstraints,
+        style: { ...floatingStyle, x, y },
+        className,
+        onDragEnd: handleDragEnd,
+        whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+        transition: transition ?? { type: "spring", stiffness: 400, damping: 30 },
+        ...props
+      },
       children
     );
   }
@@ -218,6 +352,7 @@ exports.getAspectRatio = meetLayoutGridCore.getAspectRatio;
 exports.getGridItemDimensions = meetLayoutGridCore.getGridItemDimensions;
 exports.getSpringConfig = meetLayoutGridCore.getSpringConfig;
 exports.springPresets = meetLayoutGridCore.springPresets;
+exports.FloatingGridItem = FloatingGridItem;
 exports.GridContainer = GridContainer;
 exports.GridContext = GridContext;
 exports.GridItem = GridItem;

package/dist/index.d.cts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { RefObject, HTMLAttributes, ReactNode, CSSProperties } from 'react';
-import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@thangdevalone/meet-layout-grid-core';
-export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, ContentDimensions } from '@thangdevalone/meet-layout-grid-core';
+export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
 import { HTMLMotionProps, Transition } from 'motion/react';
 
 interface GridContextValue {
@@ -59,10 +59,8 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     count?: number;
     /** Layout mode */
     layoutMode?: LayoutMode;
-    /** Index of pinned item */
+    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
     pinnedIndex?: number;
-    /** Index of active speaker */
-    speakerIndex?: number;
     /** Sidebar position */
     sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Sidebar ratio (0-1) */
@@ -77,21 +75,71 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     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 all items. In sidebar: limits "others". */
+    maxVisible?: number;
+    /** Current page for visible items (0-based), used when maxVisible > 0 */
+    currentVisiblePage?: number;
+    /**
+     * Per-item aspect ratio configurations.
+     * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
+     * @example ['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;
 }
 /**
  * Container component for the meet grid.
  * Provides grid context to child GridItem components.
  */
 declare const GridContainer: React__default.ForwardRefExoticComponent<GridContainerProps & React__default.RefAttributes<HTMLDivElement>>;
-interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition'> {
+interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition' | 'children'> {
     /** Index of this item in the grid */
     index: number;
-    /** Children to render inside the item */
-    children: ReactNode;
+    /**
+     * Children to render inside the item.
+     * Can be a ReactNode or a render function that receives contentDimensions and visibility info.
+     * @example
+     * // Simple usage
+     * <GridItem index={0}><Video /></GridItem>
+     *
+     * // With contentDimensions for flexible aspect ratios
+     * <GridItem index={0}>
+     *   {({ contentDimensions }) => (
+     *     <Video style={{
+     *       width: contentDimensions.width,
+     *       height: contentDimensions.height,
+     *       marginTop: contentDimensions.offsetTop,
+     *       marginLeft: contentDimensions.offsetLeft
+     *     }} />
+     *   )}
+     * </GridItem>
+     *
+     * // With hidden count for '+X more' indicator
+     * <GridItem index={index}>
+     *   {({ isLastVisibleOther, hiddenCount }) => (
+     *     <div>
+     *       {isLastVisibleOther && hiddenCount > 0 && (
+     *         <span className="more-indicator">+{hiddenCount}</span>
+     *       )}
+     *     </div>
+     *   )}
+     * </GridItem>
+     */
+    children: ReactNode | ((props: {
+        contentDimensions: ContentDimensions;
+        /** True if this is the last visible item in the "others" section */
+        isLastVisibleOther: boolean;
+        /** Number of hidden items (for '+X more' indicator) */
+        hiddenCount: number;
+    }) => ReactNode);
+    /** Optional item-specific aspect ratio (overrides itemAspectRatios from container) */
+    itemAspectRatio?: ItemAspectRatio;
     /** Custom transition override */
     transition?: Transition;
     /** Whether to disable animations */
@@ -106,6 +154,43 @@ interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initia
  * Automatically positions itself based on index in the grid.
  */
 declare const GridItem: React__default.ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+interface FloatingGridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'children'> {
+    /** Children to render inside the floating item */
+    children: ReactNode;
+    /** Width of the floating item */
+    width?: number;
+    /** Height of the floating item */
+    height?: number;
+    /** Initial position (x, y from container edges) */
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    /** Which corner to anchor: 'top-left', 'top-right', 'bottom-left', 'bottom-right' */
+    anchor?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Whether the item is visible */
+    visible?: boolean;
+    /** Padding from container edges */
+    edgePadding?: number;
+    /** Callback when anchor changes after snap */
+    onAnchorChange?: (anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right') => void;
+    /** Custom transition */
+    transition?: Transition;
+    /** Border radius */
+    borderRadius?: number;
+    /** Box shadow */
+    boxShadow?: string;
+    /** Additional class name */
+    className?: string;
+    /** Custom style */
+    style?: CSSProperties;
+}
+/**
+ * Floating Grid Item component that can be dragged around the screen.
+ * Snaps to the nearest corner when released (like iOS/Android PiP).
+ * Perfect for Picture-in-Picture style floating video in zoom mode.
+ */
+declare const FloatingGridItem: React__default.ForwardRefExoticComponent<Omit<FloatingGridItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {
     /** Whether to show the overlay */
     visible?: boolean;
@@ -117,5 +202,5 @@ interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare const GridOverlay: React__default.ForwardRefExoticComponent<GridOverlayProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
-export type { GridContainerProps, GridItemProps, GridOverlayProps };
+export { FloatingGridItem, GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
+export type { FloatingGridItemProps, GridContainerProps, GridItemProps, GridOverlayProps };

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { RefObject, HTMLAttributes, ReactNode, CSSProperties } from 'react';
-import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@thangdevalone/meet-layout-grid-core';
-export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, ContentDimensions } from '@thangdevalone/meet-layout-grid-core';
+export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
 import { HTMLMotionProps, Transition } from 'motion/react';
 
 interface GridContextValue {
@@ -59,10 +59,8 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     count?: number;
     /** Layout mode */
     layoutMode?: LayoutMode;
-    /** Index of pinned item */
+    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
     pinnedIndex?: number;
-    /** Index of active speaker */
-    speakerIndex?: number;
     /** Sidebar position */
     sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Sidebar ratio (0-1) */
@@ -77,21 +75,71 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     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 all items. In sidebar: limits "others". */
+    maxVisible?: number;
+    /** Current page for visible items (0-based), used when maxVisible > 0 */
+    currentVisiblePage?: number;
+    /**
+     * Per-item aspect ratio configurations.
+     * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
+     * @example ['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;
 }
 /**
  * Container component for the meet grid.
  * Provides grid context to child GridItem components.
  */
 declare const GridContainer: React__default.ForwardRefExoticComponent<GridContainerProps & React__default.RefAttributes<HTMLDivElement>>;
-interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition'> {
+interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition' | 'children'> {
     /** Index of this item in the grid */
     index: number;
-    /** Children to render inside the item */
-    children: ReactNode;
+    /**
+     * Children to render inside the item.
+     * Can be a ReactNode or a render function that receives contentDimensions and visibility info.
+     * @example
+     * // Simple usage
+     * <GridItem index={0}><Video /></GridItem>
+     *
+     * // With contentDimensions for flexible aspect ratios
+     * <GridItem index={0}>
+     *   {({ contentDimensions }) => (
+     *     <Video style={{
+     *       width: contentDimensions.width,
+     *       height: contentDimensions.height,
+     *       marginTop: contentDimensions.offsetTop,
+     *       marginLeft: contentDimensions.offsetLeft
+     *     }} />
+     *   )}
+     * </GridItem>
+     *
+     * // With hidden count for '+X more' indicator
+     * <GridItem index={index}>
+     *   {({ isLastVisibleOther, hiddenCount }) => (
+     *     <div>
+     *       {isLastVisibleOther && hiddenCount > 0 && (
+     *         <span className="more-indicator">+{hiddenCount}</span>
+     *       )}
+     *     </div>
+     *   )}
+     * </GridItem>
+     */
+    children: ReactNode | ((props: {
+        contentDimensions: ContentDimensions;
+        /** True if this is the last visible item in the "others" section */
+        isLastVisibleOther: boolean;
+        /** Number of hidden items (for '+X more' indicator) */
+        hiddenCount: number;
+    }) => ReactNode);
+    /** Optional item-specific aspect ratio (overrides itemAspectRatios from container) */
+    itemAspectRatio?: ItemAspectRatio;
     /** Custom transition override */
     transition?: Transition;
     /** Whether to disable animations */
@@ -106,6 +154,43 @@ interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initia
  * Automatically positions itself based on index in the grid.
  */
 declare const GridItem: React__default.ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+interface FloatingGridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'children'> {
+    /** Children to render inside the floating item */
+    children: ReactNode;
+    /** Width of the floating item */
+    width?: number;
+    /** Height of the floating item */
+    height?: number;
+    /** Initial position (x, y from container edges) */
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    /** Which corner to anchor: 'top-left', 'top-right', 'bottom-left', 'bottom-right' */
+    anchor?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Whether the item is visible */
+    visible?: boolean;
+    /** Padding from container edges */
+    edgePadding?: number;
+    /** Callback when anchor changes after snap */
+    onAnchorChange?: (anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right') => void;
+    /** Custom transition */
+    transition?: Transition;
+    /** Border radius */
+    borderRadius?: number;
+    /** Box shadow */
+    boxShadow?: string;
+    /** Additional class name */
+    className?: string;
+    /** Custom style */
+    style?: CSSProperties;
+}
+/**
+ * Floating Grid Item component that can be dragged around the screen.
+ * Snaps to the nearest corner when released (like iOS/Android PiP).
+ * Perfect for Picture-in-Picture style floating video in zoom mode.
+ */
+declare const FloatingGridItem: React__default.ForwardRefExoticComponent<Omit<FloatingGridItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {
     /** Whether to show the overlay */
     visible?: boolean;
@@ -117,5 +202,5 @@ interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare const GridOverlay: React__default.ForwardRefExoticComponent<GridOverlayProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
-export type { GridContainerProps, GridItemProps, GridOverlayProps };
+export { FloatingGridItem, GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
+export type { FloatingGridItemProps, GridContainerProps, GridItemProps, GridOverlayProps };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import React__default, { RefObject, HTMLAttributes, ReactNode, CSSProperties } from 'react';
-import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode } from '@thangdevalone/meet-layout-grid-core';
-export { GridDimensions, GridOptions, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, ContentDimensions } from '@thangdevalone/meet-layout-grid-core';
+export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PaginationInfo, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
 import { HTMLMotionProps, Transition } from 'motion/react';
 
 interface GridContextValue {
@@ -59,10 +59,8 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     count?: number;
     /** Layout mode */
     layoutMode?: LayoutMode;
-    /** Index of pinned item */
+    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
     pinnedIndex?: number;
-    /** Index of active speaker */
-    speakerIndex?: number;
     /** Sidebar position */
     sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
     /** Sidebar ratio (0-1) */
@@ -77,21 +75,71 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     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 all items. In sidebar: limits "others". */
+    maxVisible?: number;
+    /** Current page for visible items (0-based), used when maxVisible > 0 */
+    currentVisiblePage?: number;
+    /**
+     * Per-item aspect ratio configurations.
+     * Use different ratios for mobile (9:16), desktop (16:9), or whiteboard (fill).
+     * @example ['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;
 }
 /**
  * Container component for the meet grid.
  * Provides grid context to child GridItem components.
  */
 declare const GridContainer: React__default.ForwardRefExoticComponent<GridContainerProps & React__default.RefAttributes<HTMLDivElement>>;
-interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition'> {
+interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'transition' | 'children'> {
     /** Index of this item in the grid */
     index: number;
-    /** Children to render inside the item */
-    children: ReactNode;
+    /**
+     * Children to render inside the item.
+     * Can be a ReactNode or a render function that receives contentDimensions and visibility info.
+     * @example
+     * // Simple usage
+     * <GridItem index={0}><Video /></GridItem>
+     *
+     * // With contentDimensions for flexible aspect ratios
+     * <GridItem index={0}>
+     *   {({ contentDimensions }) => (
+     *     <Video style={{
+     *       width: contentDimensions.width,
+     *       height: contentDimensions.height,
+     *       marginTop: contentDimensions.offsetTop,
+     *       marginLeft: contentDimensions.offsetLeft
+     *     }} />
+     *   )}
+     * </GridItem>
+     *
+     * // With hidden count for '+X more' indicator
+     * <GridItem index={index}>
+     *   {({ isLastVisibleOther, hiddenCount }) => (
+     *     <div>
+     *       {isLastVisibleOther && hiddenCount > 0 && (
+     *         <span className="more-indicator">+{hiddenCount}</span>
+     *       )}
+     *     </div>
+     *   )}
+     * </GridItem>
+     */
+    children: ReactNode | ((props: {
+        contentDimensions: ContentDimensions;
+        /** True if this is the last visible item in the "others" section */
+        isLastVisibleOther: boolean;
+        /** Number of hidden items (for '+X more' indicator) */
+        hiddenCount: number;
+    }) => ReactNode);
+    /** Optional item-specific aspect ratio (overrides itemAspectRatios from container) */
+    itemAspectRatio?: ItemAspectRatio;
     /** Custom transition override */
     transition?: Transition;
     /** Whether to disable animations */
@@ -106,6 +154,43 @@ interface GridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initia
  * Automatically positions itself based on index in the grid.
  */
 declare const GridItem: React__default.ForwardRefExoticComponent<Omit<GridItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+interface FloatingGridItemProps extends Omit<HTMLMotionProps<'div'>, 'animate' | 'initial' | 'children'> {
+    /** Children to render inside the floating item */
+    children: ReactNode;
+    /** Width of the floating item */
+    width?: number;
+    /** Height of the floating item */
+    height?: number;
+    /** Initial position (x, y from container edges) */
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    /** Which corner to anchor: 'top-left', 'top-right', 'bottom-left', 'bottom-right' */
+    anchor?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    /** Whether the item is visible */
+    visible?: boolean;
+    /** Padding from container edges */
+    edgePadding?: number;
+    /** Callback when anchor changes after snap */
+    onAnchorChange?: (anchor: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right') => void;
+    /** Custom transition */
+    transition?: Transition;
+    /** Border radius */
+    borderRadius?: number;
+    /** Box shadow */
+    boxShadow?: string;
+    /** Additional class name */
+    className?: string;
+    /** Custom style */
+    style?: CSSProperties;
+}
+/**
+ * Floating Grid Item component that can be dragged around the screen.
+ * Snaps to the nearest corner when released (like iOS/Android PiP).
+ * Perfect for Picture-in-Picture style floating video in zoom mode.
+ */
+declare const FloatingGridItem: React__default.ForwardRefExoticComponent<Omit<FloatingGridItemProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {
     /** Whether to show the overlay */
     visible?: boolean;
@@ -117,5 +202,5 @@ interface GridOverlayProps extends HTMLAttributes<HTMLDivElement> {
  */
 declare const GridOverlay: React__default.ForwardRefExoticComponent<GridOverlayProps & React__default.RefAttributes<HTMLDivElement>>;
 
-export { GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
-export type { GridContainerProps, GridItemProps, GridOverlayProps };
+export { FloatingGridItem, GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
+export type { FloatingGridItemProps, GridContainerProps, GridItemProps, GridOverlayProps };

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState, useEffect, useMemo, forwardRef, useRef } from 'react';
 import { createMeetGrid, getSpringConfig } from '@thangdevalone/meet-layout-grid-core';
 export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
-import { motion } from 'motion/react';
+import { motion, useMotionValue, animate } from 'motion/react';
 
 const GridContext = createContext(null);
 function useGridContext() {
@@ -41,6 +41,7 @@ function useGridDimensions(ref) {
   return dimensions;
 }
 function useMeetGrid(options) {
+  const itemAspectRatiosKey = options.itemAspectRatios?.join(",") ?? "";
   return useMemo(() => {
     return createMeetGrid(options);
   }, [
@@ -51,13 +52,14 @@ function useMeetGrid(options) {
     options.gap,
     options.layoutMode,
     options.pinnedIndex,
-    options.speakerIndex,
     options.sidebarPosition,
     options.sidebarRatio,
     options.maxItemsPerPage,
     options.currentPage,
-    options.maxVisibleOthers,
-    options.currentOthersPage
+    options.maxVisible,
+    options.currentVisiblePage,
+    options.flexLayout,
+    itemAspectRatiosKey
   ]);
 }
 function useGridAnimation(preset = "smooth") {
@@ -72,7 +74,6 @@ const GridContainer = forwardRef(
     count,
     layoutMode = "gallery",
     pinnedIndex,
-    speakerIndex,
     sidebarPosition,
     sidebarRatio,
     springPreset = "smooth",
@@ -80,8 +81,10 @@ const GridContainer = forwardRef(
     className,
     maxItemsPerPage,
     currentPage,
-    maxVisibleOthers,
-    currentOthersPage,
+    maxVisible,
+    currentVisiblePage,
+    itemAspectRatios,
+    flexLayout,
     ...props
   }, forwardedRef) {
     const internalRef = useRef(null);
@@ -95,13 +98,14 @@ const GridContainer = forwardRef(
       gap,
       layoutMode,
       pinnedIndex,
-      speakerIndex,
       sidebarPosition,
       sidebarRatio,
       maxItemsPerPage,
       currentPage,
-      maxVisibleOthers,
-      currentOthersPage
+      maxVisible,
+      currentVisiblePage,
+      itemAspectRatios,
+      flexLayout
     };
     const grid = useMeetGrid(gridOptions);
     const containerStyle = {
@@ -118,6 +122,7 @@ const GridItem = forwardRef(
   function GridItem2({
     index,
     children,
+    itemAspectRatio,
     transition: customTransition,
     disableAnimation = false,
     className,
@@ -133,6 +138,7 @@ const GridItem = forwardRef(
     }
     const { top, left } = grid.getPosition(index);
     const { width, height } = grid.getItemDimensions(index);
+    const contentDimensions = grid.getItemContentDimensions(index, itemAspectRatio);
     const isMain = grid.isMainItem(index);
     if (grid.layoutMode === "spotlight" && !isMain) {
       return null;
@@ -150,6 +156,15 @@ const GridItem = forwardRef(
       top,
       left
     };
+    const lastVisibleOthersIndex = grid.getLastVisibleOthersIndex();
+    const isLastVisibleOther = index === lastVisibleOthersIndex;
+    const hiddenCount = grid.hiddenCount;
+    const renderChildren = () => {
+      if (typeof children === "function") {
+        return children({ contentDimensions, isLastVisibleOther, hiddenCount });
+      }
+      return children;
+    };
     if (disableAnimation) {
       return /* @__PURE__ */ React.createElement(
         "div",
@@ -161,7 +176,7 @@ const GridItem = forwardRef(
           "data-grid-main": isMain,
           ...props
         },
-        children
+        renderChildren()
       );
     }
     return /* @__PURE__ */ React.createElement(
@@ -178,6 +193,125 @@ const GridItem = forwardRef(
         "data-grid-main": isMain,
         ...props
       },
+      renderChildren()
+    );
+  }
+);
+const FloatingGridItem = forwardRef(
+  function FloatingGridItem2({
+    children,
+    width = 120,
+    height = 160,
+    initialPosition = { x: 16, y: 16 },
+    anchor: initialAnchor = "bottom-right",
+    visible = true,
+    edgePadding = 12,
+    onAnchorChange,
+    transition,
+    borderRadius = 12,
+    boxShadow = "0 4px 20px rgba(0,0,0,0.3)",
+    className,
+    style,
+    ...props
+  }, ref) {
+    const { dimensions } = useGridContext();
+    const [currentAnchor, setCurrentAnchor] = React.useState(initialAnchor);
+    const x = useMotionValue(0);
+    const y = useMotionValue(0);
+    const [isInitialized, setIsInitialized] = React.useState(false);
+    const getCornerPosition = React.useCallback((corner) => {
+      const padding = edgePadding + initialPosition.x;
+      switch (corner) {
+        case "top-left":
+          return { x: padding, y: padding };
+        case "top-right":
+          return { x: dimensions.width - width - padding, y: padding };
+        case "bottom-left":
+          return { x: padding, y: dimensions.height - height - padding };
+        case "bottom-right":
+        default:
+          return { x: dimensions.width - width - padding, y: dimensions.height - height - padding };
+      }
+    }, [dimensions.width, dimensions.height, width, height, edgePadding, initialPosition.x]);
+    React.useEffect(() => {
+      if (dimensions.width > 0 && dimensions.height > 0 && !isInitialized) {
+        const pos = getCornerPosition(currentAnchor);
+        x.set(pos.x);
+        y.set(pos.y);
+        setIsInitialized(true);
+      }
+    }, [dimensions.width, dimensions.height, currentAnchor, getCornerPosition, isInitialized, x, y]);
+    React.useEffect(() => {
+      if (isInitialized && dimensions.width > 0 && dimensions.height > 0) {
+        const pos = getCornerPosition(currentAnchor);
+        const springConfig = { type: "spring", stiffness: 400, damping: 30 };
+        animate(x, pos.x, springConfig);
+        animate(y, pos.y, springConfig);
+      }
+    }, [currentAnchor, dimensions.width, dimensions.height, getCornerPosition, isInitialized, x, y]);
+    if (!visible || dimensions.width === 0 || dimensions.height === 0)
+      return null;
+    const findNearestCorner = (posX, posY) => {
+      const centerX = posX + width / 2;
+      const centerY = posY + height / 2;
+      const containerCenterX = dimensions.width / 2;
+      const containerCenterY = dimensions.height / 2;
+      const isLeft = centerX < containerCenterX;
+      const isTop = centerY < containerCenterY;
+      if (isTop && isLeft)
+        return "top-left";
+      if (isTop && !isLeft)
+        return "top-right";
+      if (!isTop && isLeft)
+        return "bottom-left";
+      return "bottom-right";
+    };
+    const dragConstraints = {
+      left: edgePadding,
+      right: dimensions.width - width - edgePadding,
+      top: edgePadding,
+      bottom: dimensions.height - height - edgePadding
+    };
+    const floatingStyle = {
+      position: "absolute",
+      width,
+      height,
+      borderRadius,
+      boxShadow,
+      overflow: "hidden",
+      cursor: "grab",
+      zIndex: 100,
+      touchAction: "none",
+      left: 0,
+      top: 0,
+      ...style
+    };
+    const handleDragEnd = () => {
+      const currentX = x.get();
+      const currentY = y.get();
+      const nearestCorner = findNearestCorner(currentX, currentY);
+      setCurrentAnchor(nearestCorner);
+      onAnchorChange?.(nearestCorner);
+      const snapPos = getCornerPosition(nearestCorner);
+      const springConfig = { type: "spring", stiffness: 400, damping: 30 };
+      animate(x, snapPos.x, springConfig);
+      animate(y, snapPos.y, springConfig);
+    };
+    return /* @__PURE__ */ React.createElement(
+      motion.div,
+      {
+        ref,
+        drag: true,
+        dragMomentum: false,
+        dragElastic: 0.1,
+        dragConstraints,
+        style: { ...floatingStyle, x, y },
+        className,
+        onDragEnd: handleDragEnd,
+        whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+        transition: transition ?? { type: "spring", stiffness: 400, damping: 30 },
+        ...props
+      },
       children
     );
   }
@@ -206,4 +340,4 @@ const GridOverlay = forwardRef(
   }
 );
 
-export { GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };
+export { FloatingGridItem, GridContainer, GridContext, GridItem, GridOverlay, useGridAnimation, useGridContext, useGridDimensions, useMeetGrid };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangdevalone/meet-layout-grid-react",
-  "version": "1.0.8",
+  "version": "1.1.0",
   "description": "React integration for meet-layout-grid with Motion animations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "motion": "^11.15.0",
-    "@thangdevalone/meet-layout-grid-core": "1.0.8"
+    "@thangdevalone/meet-layout-grid-core": "1.1.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",