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

package/README.md

@@ -1,6 +1,8 @@
 # @thangdevalone/meet-layout-grid-react
 
-React bindings for meet-layout-grid with Motion animations.
+React 18+ bindings for meet-layout-grid with Motion animations.
+
+> For full documentation, layout modes, and API reference, see the [main README](https://github.com/thangdevalone/meet-layout-grid#readme).
 
 ## Installation
 
@@ -8,19 +10,14 @@ React bindings for meet-layout-grid with Motion animations.
 npm install @thangdevalone/meet-layout-grid-react
 ```
 
-## Quick start
+## Quick Start
 
 ```tsx
 import { GridContainer, GridItem } from '@thangdevalone/meet-layout-grid-react'
 
 function MeetingGrid({ participants }) {
   return (
-    <GridContainer
-      aspectRatio="16:9"
-      gap={8}
-      layoutMode="gallery"
-      count={participants.length}
-    >
+    <GridContainer aspectRatio="16:9" gap={8} layoutMode="gallery" count={participants.length}>
       {participants.map((p, index) => (
         <GridItem key={p.id} index={index}>
           <VideoTile participant={p} />
@@ -35,75 +32,64 @@ function MeetingGrid({ participants }) {
 
 ### `<GridContainer>`
 
-Wraps the grid, computes layout, provides context.
-
-```tsx
-<GridContainer
-  aspectRatio="16:9"
-  gap={8}
-  count={6}
-  layoutMode="gallery"
-  pinnedIndex={0}
-  sidebarPosition="right"
-  sidebarRatio={0.25}
-  springPreset="smooth"
->
-  {children}
-</GridContainer>
-```
+Wraps the grid, computes layout, and provides context to children.
+
+| Prop               | Type           | Default     | Description                    |
+| ------------------ | -------------- | ----------- | ------------------------------ |
+| `aspectRatio`      | `string`       | `'16:9'`    | Default tile aspect ratio      |
+| `gap`              | `number`       | `8`         | Gap between tiles (px)         |
+| `count`            | `number`       | required    | Number of items                |
+| `layoutMode`       | `LayoutMode`   | `'gallery'` | `gallery` \| `spotlight`       |
+| `pinnedIndex`      | `number`       | -           | Pinned participant index       |
+| `othersPosition`   | `string`       | `'right'`   | Thumbnail position in pin mode |
+| `springPreset`     | `SpringPreset` | `'smooth'`  | Animation preset               |
+| `maxItemsPerPage`  | `number`       | -           | Max items per page             |
+| `currentPage`      | `number`       | `0`         | Current page                   |
+| `maxVisible`       | `number`       | -           | Max visible in others area     |
+| `itemAspectRatios` | `array`        | -           | Per-item aspect ratios         |
 
 ### `<GridItem>`
 
-One grid cell; uses Motion for layout animation.
-
-```tsx
-<GridItem index={0} disableAnimation={false}>
-  {content}
-</GridItem>
-```
-
-## Hooks
+Single grid cell with Motion layout animation.
 
-### `useGridDimensions(ref)`
+| Prop               | Type      | Default  | Description              |
+| ------------------ | --------- | -------- | ------------------------ |
+| `index`            | `number`  | required | Item index               |
+| `disableAnimation` | `boolean` | `false`  | Disable layout animation |
 
-Uses ResizeObserver to track element size.
+Render prop: `{({ contentDimensions, isLastVisibleOther, hiddenCount }) => ...}`
 
-```tsx
-const ref = useRef<HTMLDivElement>(null)
-const dimensions = useGridDimensions(ref)
-// { width: number, height: number }
-```
+### `<FloatingGridItem>`
 
-### `useMeetGrid(options)`
+Draggable Picture-in-Picture overlay with corner snapping.
 
-Compute grid layout yourself.
+| Prop             | Type       | Default          | Description                  |
+| ---------------- | ---------- | ---------------- | ---------------------------- |
+| `width`          | `number`   | -                | Floating item width          |
+| `height`         | `number`   | -                | Floating item height         |
+| `anchor`         | `string`   | `'bottom-right'` | Corner anchor position       |
+| `visible`        | `boolean`  | `true`           | Show/hide the floating item  |
+| `edgePadding`    | `number`   | -                | Padding from container edges |
+| `borderRadius`   | `number`   | -                | Border radius                |
+| `onAnchorChange` | `function` | -                | Callback when anchor changes |
 
-```tsx
-const grid = useMeetGrid({
-  dimensions: { width: 800, height: 600 },
-  count: 6,
-  aspectRatio: '16:9',
-  gap: 8,
-  layoutMode: 'sidebar',
-  sidebarPosition: 'bottom', // speaker-like layout
-})
-
-const { top, left } = grid.getPosition(index)
-const { width, height } = grid.getItemDimensions(index)
-```
+### `<GridOverlay>`
 
-## Layout modes
+Full-grid overlay for screen sharing, whiteboard, etc.
 
-- **gallery** — Same-size tiles (use `pinnedIndex` to pin a participant)
-- **spotlight** — Single participant
-- **sidebar** — Main + thumbnails (use `sidebarPosition: 'bottom'` for speaker-like layout)
+| Prop              | Type      | Default | Description              |
+| ----------------- | --------- | ------- | ------------------------ |
+| `visible`         | `boolean` | `false` | Show/hide the overlay    |
+| `backgroundColor` | `string`  | -       | Overlay background color |
 
-## Animation presets
+## Hooks
 
-- `snappy` — Fast feedback
-- `smooth` — Layout changes (default)
-- `gentle` — Subtle
-- `bouncy` — Slight overshoot
+| Hook                     | Description                               |
+| ------------------------ | ----------------------------------------- |
+| `useGridDimensions(ref)` | Track element size via ResizeObserver     |
+| `useMeetGrid(options)`   | Compute grid layout programmatically      |
+| `useGridContext()`       | Access grid context from child components |
+| `useGridAnimation()`     | Access animation config from context      |
 
 ## License
 

package/dist/index.cjs

@@ -57,13 +57,11 @@ function useMeetGrid(options) {
     options.gap,
     options.layoutMode,
     options.pinnedIndex,
-    options.sidebarPosition,
-    options.sidebarRatio,
+    options.othersPosition,
     options.maxItemsPerPage,
     options.currentPage,
     options.maxVisible,
     options.currentVisiblePage,
-    options.flexLayout,
     itemAspectRatiosKey
   ]);
 }
@@ -71,128 +69,104 @@ function useGridAnimation(preset = "smooth") {
   return React.useMemo(() => meetLayoutGridCore.getSpringConfig(preset), [preset]);
 }
 
-const GridContainer = React.forwardRef(
-  function GridContainer2({
-    children,
-    aspectRatio = "16:9",
-    gap = 8,
-    count,
-    layoutMode = "gallery",
+const GridContainer = React.forwardRef(function GridContainer2({
+  children,
+  aspectRatio = "16:9",
+  gap = 8,
+  count,
+  layoutMode = "gallery",
+  pinnedIndex,
+  othersPosition,
+  springPreset = "smooth",
+  style,
+  className,
+  maxItemsPerPage,
+  currentPage,
+  maxVisible,
+  currentVisiblePage,
+  itemAspectRatios,
+  ...props
+}, forwardedRef) {
+  const internalRef = React.useRef(null);
+  const ref = forwardedRef || internalRef;
+  const dimensions = useGridDimensions(ref);
+  const childCount = count ?? React__default.Children.count(children);
+  const gridOptions = {
+    dimensions,
+    count: childCount,
+    aspectRatio,
+    gap,
+    layoutMode,
     pinnedIndex,
-    sidebarPosition,
-    sidebarRatio,
-    springPreset = "smooth",
-    style,
-    className,
+    othersPosition,
     maxItemsPerPage,
     currentPage,
     maxVisible,
     currentVisiblePage,
-    itemAspectRatios,
-    flexLayout,
-    ...props
-  }, forwardedRef) {
-    const internalRef = React.useRef(null);
-    const ref = forwardedRef || internalRef;
-    const dimensions = useGridDimensions(ref);
-    const childCount = count ?? React__default.Children.count(children);
-    const gridOptions = {
-      dimensions,
-      count: childCount,
-      aspectRatio,
-      gap,
-      layoutMode,
-      pinnedIndex,
-      sidebarPosition,
-      sidebarRatio,
-      maxItemsPerPage,
-      currentPage,
-      maxVisible,
-      currentVisiblePage,
-      itemAspectRatios,
-      flexLayout
-    };
-    const grid = useMeetGrid(gridOptions);
-    const containerStyle = {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      ...style
-    };
-    return /* @__PURE__ */ React__default.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React__default.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+    itemAspectRatios
+  };
+  const grid = useMeetGrid(gridOptions);
+  const containerStyle = {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    ...style
+  };
+  return /* @__PURE__ */ React__default.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React__default.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+});
+const GridItem = React.forwardRef(function GridItem2({
+  index,
+  children,
+  itemAspectRatio,
+  transition: customTransition,
+  disableAnimation = false,
+  className,
+  style,
+  ...props
+}, ref) {
+  const { grid, springPreset } = useGridContext();
+  if (!grid) {
+    return null;
   }
-);
-const GridItem = React.forwardRef(
-  function GridItem2({
-    index,
-    children,
-    itemAspectRatio,
-    transition: customTransition,
-    disableAnimation = false,
-    className,
-    style,
-    ...props
-  }, ref) {
-    const { grid, springPreset } = useGridContext();
-    if (!grid) {
-      return null;
-    }
-    if (!grid.isItemVisible(index)) {
-      return null;
-    }
-    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;
-    }
-    const springConfig = meetLayoutGridCore.getSpringConfig(springPreset);
-    const transition = customTransition ?? {
-      type: springConfig.type,
-      stiffness: springConfig.stiffness,
-      damping: springConfig.damping
-    };
-    const animatedStyle = {
-      position: "absolute",
-      width,
-      height,
-      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",
-        {
-          ref,
-          style: { ...animatedStyle, ...style },
-          className,
-          "data-grid-index": index,
-          "data-grid-main": isMain,
-          ...props
-        },
-        renderChildren()
-      );
+  if (!grid.isItemVisible(index)) {
+    return null;
+  }
+  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;
+  }
+  const springConfig = meetLayoutGridCore.getSpringConfig(springPreset);
+  const transition = customTransition ?? {
+    type: springConfig.type,
+    stiffness: springConfig.stiffness,
+    damping: springConfig.damping
+  };
+  const animatedStyle = {
+    position: "absolute",
+    width,
+    height,
+    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(
-      react.motion.div,
+      "div",
       {
         ref,
-        layout: true,
-        initial: false,
-        animate: animatedStyle,
-        transition,
-        style,
+        style: { ...animatedStyle, ...style },
         className,
         "data-grid-index": index,
         "data-grid-main": isMain,
@@ -201,7 +175,23 @@ const GridItem = React.forwardRef(
       renderChildren()
     );
   }
-);
+  return /* @__PURE__ */ React__default.createElement(
+    react.motion.div,
+    {
+      ref,
+      layout: true,
+      initial: false,
+      animate: animatedStyle,
+      transition,
+      style,
+      className,
+      "data-grid-index": index,
+      "data-grid-main": isMain,
+      ...props
+    },
+    renderChildren()
+  );
+});
 const FloatingGridItem = React.forwardRef(
   function FloatingGridItem2({
     children,
@@ -224,20 +214,26 @@ const FloatingGridItem = React.forwardRef(
     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]);
+    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);
@@ -321,29 +317,27 @@ const FloatingGridItem = React.forwardRef(
     );
   }
 );
-const GridOverlay = React.forwardRef(
-  function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
-    if (!visible)
-      return null;
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        ref,
-        style: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor,
-          ...style
-        },
-        ...props
+const GridOverlay = React.forwardRef(function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor,
+        ...style
       },
-      children
-    );
-  }
-);
+      ...props
+    },
+    children
+  );
+});
 
 exports.createGrid = meetLayoutGridCore.createGrid;
 exports.createGridItemPositioner = meetLayoutGridCore.createGridItemPositioner;

package/dist/index.d.cts

@@ -59,12 +59,14 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     count?: number;
     /** Layout mode */
     layoutMode?: LayoutMode;
-    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
+    /** Index of pinned/focused item (main participant for pin/spotlight modes) */
     pinnedIndex?: number;
-    /** Sidebar position */
-    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Sidebar 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';
     /** Spring animation preset */
     springPreset?: SpringPreset;
     /** Custom container style */
@@ -75,23 +77,16 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
-    /** Maximum visible items (0 = show all). In gallery mode: limits all items. In sidebar: limits "others". */
+    /** Maximum visible items (0 = show all). In gallery mode without pin: limits all items. With pin: 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]
+     * Use different ratios for mobile (9:16), desktop (16:9).
+     * @example ['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;
 }
 /**
  * Container component for the meet grid.

package/dist/index.d.mts

@@ -59,12 +59,14 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     count?: number;
     /** Layout mode */
     layoutMode?: LayoutMode;
-    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
+    /** Index of pinned/focused item (main participant for pin/spotlight modes) */
     pinnedIndex?: number;
-    /** Sidebar position */
-    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Sidebar 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';
     /** Spring animation preset */
     springPreset?: SpringPreset;
     /** Custom container style */
@@ -75,23 +77,16 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
-    /** Maximum visible items (0 = show all). In gallery mode: limits all items. In sidebar: limits "others". */
+    /** Maximum visible items (0 = show all). In gallery mode without pin: limits all items. With pin: 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]
+     * Use different ratios for mobile (9:16), desktop (16:9).
+     * @example ['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;
 }
 /**
  * Container component for the meet grid.

package/dist/index.d.ts

@@ -59,12 +59,14 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     count?: number;
     /** Layout mode */
     layoutMode?: LayoutMode;
-    /** Index of pinned/focused item (main participant for spotlight/sidebar modes) */
+    /** Index of pinned/focused item (main participant for pin/spotlight modes) */
     pinnedIndex?: number;
-    /** Sidebar position */
-    sidebarPosition?: 'left' | 'right' | 'top' | 'bottom';
-    /** Sidebar 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';
     /** Spring animation preset */
     springPreset?: SpringPreset;
     /** Custom container style */
@@ -75,23 +77,16 @@ interface GridContainerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'child
     maxItemsPerPage?: number;
     /** Current page index (0-based) for pagination */
     currentPage?: number;
-    /** Maximum visible items (0 = show all). In gallery mode: limits all items. In sidebar: limits "others". */
+    /** Maximum visible items (0 = show all). In gallery mode without pin: limits all items. With pin: 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]
+     * Use different ratios for mobile (9:16), desktop (16:9).
+     * @example ['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;
 }
 /**
  * Container component for the meet grid.

package/dist/index.mjs

@@ -52,13 +52,11 @@ function useMeetGrid(options) {
     options.gap,
     options.layoutMode,
     options.pinnedIndex,
-    options.sidebarPosition,
-    options.sidebarRatio,
+    options.othersPosition,
     options.maxItemsPerPage,
     options.currentPage,
     options.maxVisible,
     options.currentVisiblePage,
-    options.flexLayout,
     itemAspectRatiosKey
   ]);
 }
@@ -66,128 +64,104 @@ function useGridAnimation(preset = "smooth") {
   return useMemo(() => getSpringConfig(preset), [preset]);
 }
 
-const GridContainer = forwardRef(
-  function GridContainer2({
-    children,
-    aspectRatio = "16:9",
-    gap = 8,
-    count,
-    layoutMode = "gallery",
+const GridContainer = forwardRef(function GridContainer2({
+  children,
+  aspectRatio = "16:9",
+  gap = 8,
+  count,
+  layoutMode = "gallery",
+  pinnedIndex,
+  othersPosition,
+  springPreset = "smooth",
+  style,
+  className,
+  maxItemsPerPage,
+  currentPage,
+  maxVisible,
+  currentVisiblePage,
+  itemAspectRatios,
+  ...props
+}, forwardedRef) {
+  const internalRef = useRef(null);
+  const ref = forwardedRef || internalRef;
+  const dimensions = useGridDimensions(ref);
+  const childCount = count ?? React.Children.count(children);
+  const gridOptions = {
+    dimensions,
+    count: childCount,
+    aspectRatio,
+    gap,
+    layoutMode,
     pinnedIndex,
-    sidebarPosition,
-    sidebarRatio,
-    springPreset = "smooth",
-    style,
-    className,
+    othersPosition,
     maxItemsPerPage,
     currentPage,
     maxVisible,
     currentVisiblePage,
-    itemAspectRatios,
-    flexLayout,
-    ...props
-  }, forwardedRef) {
-    const internalRef = useRef(null);
-    const ref = forwardedRef || internalRef;
-    const dimensions = useGridDimensions(ref);
-    const childCount = count ?? React.Children.count(children);
-    const gridOptions = {
-      dimensions,
-      count: childCount,
-      aspectRatio,
-      gap,
-      layoutMode,
-      pinnedIndex,
-      sidebarPosition,
-      sidebarRatio,
-      maxItemsPerPage,
-      currentPage,
-      maxVisible,
-      currentVisiblePage,
-      itemAspectRatios,
-      flexLayout
-    };
-    const grid = useMeetGrid(gridOptions);
-    const containerStyle = {
-      position: "relative",
-      width: "100%",
-      height: "100%",
-      overflow: "hidden",
-      ...style
-    };
-    return /* @__PURE__ */ React.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+    itemAspectRatios
+  };
+  const grid = useMeetGrid(gridOptions);
+  const containerStyle = {
+    position: "relative",
+    width: "100%",
+    height: "100%",
+    overflow: "hidden",
+    ...style
+  };
+  return /* @__PURE__ */ React.createElement(GridContext.Provider, { value: { dimensions, grid, springPreset } }, /* @__PURE__ */ React.createElement("div", { ref, style: containerStyle, className, ...props }, children));
+});
+const GridItem = forwardRef(function GridItem2({
+  index,
+  children,
+  itemAspectRatio,
+  transition: customTransition,
+  disableAnimation = false,
+  className,
+  style,
+  ...props
+}, ref) {
+  const { grid, springPreset } = useGridContext();
+  if (!grid) {
+    return null;
   }
-);
-const GridItem = forwardRef(
-  function GridItem2({
-    index,
-    children,
-    itemAspectRatio,
-    transition: customTransition,
-    disableAnimation = false,
-    className,
-    style,
-    ...props
-  }, ref) {
-    const { grid, springPreset } = useGridContext();
-    if (!grid) {
-      return null;
-    }
-    if (!grid.isItemVisible(index)) {
-      return null;
-    }
-    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;
-    }
-    const springConfig = getSpringConfig(springPreset);
-    const transition = customTransition ?? {
-      type: springConfig.type,
-      stiffness: springConfig.stiffness,
-      damping: springConfig.damping
-    };
-    const animatedStyle = {
-      position: "absolute",
-      width,
-      height,
-      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",
-        {
-          ref,
-          style: { ...animatedStyle, ...style },
-          className,
-          "data-grid-index": index,
-          "data-grid-main": isMain,
-          ...props
-        },
-        renderChildren()
-      );
+  if (!grid.isItemVisible(index)) {
+    return null;
+  }
+  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;
+  }
+  const springConfig = getSpringConfig(springPreset);
+  const transition = customTransition ?? {
+    type: springConfig.type,
+    stiffness: springConfig.stiffness,
+    damping: springConfig.damping
+  };
+  const animatedStyle = {
+    position: "absolute",
+    width,
+    height,
+    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(
-      motion.div,
+      "div",
       {
         ref,
-        layout: true,
-        initial: false,
-        animate: animatedStyle,
-        transition,
-        style,
+        style: { ...animatedStyle, ...style },
         className,
         "data-grid-index": index,
         "data-grid-main": isMain,
@@ -196,7 +170,23 @@ const GridItem = forwardRef(
       renderChildren()
     );
   }
-);
+  return /* @__PURE__ */ React.createElement(
+    motion.div,
+    {
+      ref,
+      layout: true,
+      initial: false,
+      animate: animatedStyle,
+      transition,
+      style,
+      className,
+      "data-grid-index": index,
+      "data-grid-main": isMain,
+      ...props
+    },
+    renderChildren()
+  );
+});
 const FloatingGridItem = forwardRef(
   function FloatingGridItem2({
     children,
@@ -219,20 +209,26 @@ const FloatingGridItem = forwardRef(
     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]);
+    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);
@@ -316,28 +312,26 @@ const FloatingGridItem = forwardRef(
     );
   }
 );
-const GridOverlay = forwardRef(
-  function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
-    if (!visible)
-      return null;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref,
-        style: {
-          position: "absolute",
-          inset: 0,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          backgroundColor,
-          ...style
-        },
-        ...props
+const GridOverlay = forwardRef(function GridOverlay2({ visible = true, backgroundColor = "rgba(0,0,0,0.5)", children, style, ...props }, ref) {
+  if (!visible)
+    return null;
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor,
+        ...style
       },
-      children
-    );
-  }
-);
+      ...props
+    },
+    children
+  );
+});
 
 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.1.0",
+  "version": "1.2.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.1.0"
+    "@thangdevalone/meet-layout-grid-core": "1.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",