@thangdevalone/meeting-grid-layout-vue 1.5.11 → 1.9.0

package/README.md

@@ -52,9 +52,7 @@ Wraps the grid and provides layout via `provide`/`inject`.
 | `max-visible`          | `number`                                  | `0`         | Max visible in others area (0 = show all)                            |
 | `current-visible-page` | `number`                                  | `0`         | Current page for visible items (when max-visible > 0)                |
 | `item-aspect-ratios`   | `(ItemAspectRatio \| undefined)[]`        | -           | Per-item aspect ratios                                               |
-| `float-width`          | `number`                                  | -           | Width of the auto-float PiP (2-person mode). Overrides breakpoints.  |
-| `float-height`         | `number`                                  | -           | Height of the auto-float PiP (2-person mode). Overrides breakpoints. |
-| `float-breakpoints`    | `PipBreakpoint[]`                         | -           | Responsive breakpoints for auto-float PiP (see [Responsive PiP](#responsive-pip)) |
+| `float-size`           | `FloatSize`                               | `'medium'`  | Responsive size for auto-float PiP: `'small' \| 'medium' \| 'large'` |
 | `pip-index`            | `number`                                  | `1`         | Which participant (0 or 1) is the floating PiP in 2-person mode      |
 | `pin-only`             | `boolean`                                 | `false`     | Mobile/tablet pin-only mode: page 0 = pinned full-screen, page 1+ = others gallery (≤1024px) |
 | `disable-float`        | `boolean`                                 | `false`     | Disable Floating PiP in 2-person mode; shows standard gallery grid instead |
@@ -91,9 +89,8 @@ Draggable Picture-in-Picture overlay with corner snapping.
 
 | Prop               | Type                                                          | Default                          | Description                                      |
 | ------------------ | ------------------------------------------------------------- | -------------------------------- | ------------------------------------------------ |
-| `width`            | `number`                                                      | `120`                            | Floating item width (px). Overridden by `breakpoints`. |
-| `height`           | `number`                                                      | `160`                            | Floating item height (px). Overridden by `breakpoints`. |
-| `breakpoints`      | `PipBreakpoint[]`                                             | -                                | Responsive breakpoints (see [Responsive PiP](#responsive-pip)) |
+| `size`             | `'small' \| 'medium' \| 'large'`                              | -                                | Responsive pre-defined sizes (see [Responsive PiP](#responsive-pip)) |
+| `aspect-ratio`     | `string`                                                      | `'16:9'`                         | Aspect ratio of the floating PiP item            |
 | `initial-position` | `{ x: number; y: number }`                                    | `{ x: 16, y: 16 }`              | Extra offset from anchor corner                  |
 | `anchor`           | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` | `'bottom-right'`               | Which corner to snap/anchor the item             |
 | `visible`          | `boolean`                                                     | `true`                           | Whether the floating item is visible             |
@@ -118,21 +115,21 @@ Full-grid overlay for screen sharing, whiteboard, etc.
 
 ## Responsive PiP
 
-PiP auto-adjusts size based on container width via breakpoints:
+PiP auto-adjusts size based on container width via pre-defined sizes:
 
 ```vue
 <script setup>
-import { FloatingGridItem, GridContainer, GridItem, DEFAULT_FLOAT_BREAKPOINTS } from '@thangdevalone/meeting-grid-layout-vue'
+import { FloatingGridItem, GridContainer, GridItem } from '@thangdevalone/meeting-grid-layout-vue'
 </script>
 
 <template>
   <!-- Standalone — auto-responsive -->
-  <FloatingGridItem :breakpoints="DEFAULT_FLOAT_BREAKPOINTS">
+  <FloatingGridItem size="large">
     <VideoTile />
   </FloatingGridItem>
 
   <!-- Auto-float in 2-person mode -->
-  <GridContainer :count="2" :float-breakpoints="DEFAULT_FLOAT_BREAKPOINTS">
+  <GridContainer :count="2" float-size="large">
     <GridItem v-for="(p, i) in participants" :key="p.id" :index="i">
       <VideoTile :participant="p" />
     </GridItem>
@@ -140,7 +137,7 @@ import { FloatingGridItem, GridContainer, GridItem, DEFAULT_FLOAT_BREAKPOINTS }
 </template>
 ```
 
-> See the [main README](https://github.com/thangdevalone/meeting-grid-layout#floating-pip-picture-in-picture) for default breakpoint table, custom breakpoints, and `resolveFloatSize` utility.
+> See the [main README](https://github.com/thangdevalone/meeting-grid-layout#floating-pip-picture-in-picture) for full documentation on `floatSize`.
 
 ## Composables
 
@@ -157,12 +154,11 @@ import { FloatingGridItem, GridContainer, GridItem, DEFAULT_FLOAT_BREAKPOINTS }
 | --------------------------- | ---------- | ------------------------------------------------ |
 | `createMeetGrid`            | function   | Create grid layout (Vanilla JS)                  |
 | `createGrid`                | function   | Low-level grid computation                       |
-| `resolveFloatSize`          | function   | Resolve PiP size for a given container width     |
-| `DEFAULT_FLOAT_BREAKPOINTS` | constant   | Ready-made 5-level responsive PiP breakpoints    |
+| `resolveFloatWidth`         | function   | Resolve PiP width for a given container width     |
 | `getSpringConfig`           | function   | Get spring config from preset name               |
 | `springPresets`             | object     | All spring presets                                |
 | `getAspectRatio`            | function   | Parse aspect ratio string                        |
-| `PipBreakpoint`             | type       | Breakpoint definition type                       |
+| `FloatSize`                 | type       | Float size enum (`'small'`, `'medium'`, `'large'`) |
 | `ContentDimensions`         | type       | Content dimensions with offset                   |
 
 ## License

package/dist/index.cjs

@@ -124,24 +124,13 @@ const GridContainer = vue.defineComponent({
       type: Array,
       default: void 0
     },
-    /** Custom width for the floating PiP item in 2-person mode */
-    floatWidth: {
-      type: Number,
-      default: void 0
-    },
-    /** Custom height for the floating PiP item in 2-person mode */
-    floatHeight: {
-      type: Number,
-      default: void 0
-    },
     /**
-     * Responsive breakpoints for the floating PiP in 2-person mode.
-     * When provided, PiP size auto-adjusts based on container width.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating PiP window.
+     * 'small', 'medium', or 'large'.
      */
-    floatBreakpoints: {
-      type: Array,
-      default: void 0
+    floatSize: {
+      type: String,
+      default: "medium"
     },
     /**
      * Index of the participant to show as the floating PiP in 2-person mode.
@@ -183,6 +172,14 @@ const GridContainer = vue.defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * If true, forces the GridItem wrappers to maintain their aspect ratio exactly.
+     * @default false
+     */
+    forceAspectRatio: {
+      type: Boolean,
+      default: false
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -205,19 +202,19 @@ const GridContainer = vue.defineComponent({
       maxVisible: props.maxVisible,
       currentVisiblePage: props.currentVisiblePage,
       itemAspectRatios: props.itemAspectRatios,
-      floatWidth: props.floatWidth,
-      floatHeight: props.floatHeight,
-      floatBreakpoints: props.floatBreakpoints,
+      floatSize: props.floatSize,
       pipIndex: props.pipIndex,
       pinOnly: props.pinOnly,
-      disableFloat: props.disableFloat
+      disableFloat: props.disableFloat,
+      forceAspectRatio: props.forceAspectRatio
     }));
     const grid = useMeetGrid(gridOptions);
     vue.provide(GridContextKey, {
       grid,
       springPreset: vue.toRef(props, "springPreset"),
       dimensions,
-      disableAnimation: vue.toRef(props, "disableAnimation")
+      disableAnimation: vue.toRef(props, "disableAnimation"),
+      forceAspectRatio: vue.toRef(props, "forceAspectRatio")
     });
     return () => vue.h(
       props.tag,
@@ -264,15 +261,40 @@ const GridItem = vue.defineComponent({
       console.warn("GridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation } = context;
+    const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation, forceAspectRatio } = context;
     const noAnimation = vue.computed(() => containerDisableAnimation.value || props.disableAnimation);
-    const position = vue.computed(() => grid.value.getPosition(props.index));
-    const dimensions = vue.computed(() => grid.value.getItemDimensions(props.index));
-    const contentDimensions = vue.computed(
-      () => grid.value.getItemContentDimensions(props.index, props.itemAspectRatio)
-    );
     const isMain = vue.computed(() => grid.value.isMainItem(props.index));
     const isVisible = vue.computed(() => grid.value.isItemVisible(props.index));
+    const isFloat = vue.computed(() => grid.value.floatIndex === props.index);
+    const shouldForceRatio = vue.computed(() => forceAspectRatio.value || isFloat.value);
+    const position = vue.computed(() => {
+      const pos = grid.value.getPosition(props.index);
+      if (shouldForceRatio.value && !isFloat.value) {
+        const contentDims = grid.value.getItemContentDimensions(props.index, props.itemAspectRatio);
+        return {
+          top: pos.top + contentDims.offsetTop,
+          left: pos.left + contentDims.offsetLeft
+        };
+      }
+      return pos;
+    });
+    const dimensions = vue.computed(() => {
+      if (shouldForceRatio.value && !isFloat.value) {
+        const contentDims = grid.value.getItemContentDimensions(props.index, props.itemAspectRatio);
+        return {
+          width: contentDims.width,
+          height: contentDims.height
+        };
+      }
+      return grid.value.getItemDimensions(props.index);
+    });
+    const contentDimensions = vue.computed(() => {
+      const dims = grid.value.getItemContentDimensions(props.index, props.itemAspectRatio);
+      if (shouldForceRatio.value) {
+        return { ...dims, offsetTop: 0, offsetLeft: 0 };
+      }
+      return dims;
+    });
     const isHidden = vue.computed(() => {
       if (grid.value.layoutMode === "spotlight" && !isMain.value)
         return true;
@@ -280,8 +302,10 @@ const GridItem = vue.defineComponent({
         return true;
       return false;
     });
-    const isFloat = vue.computed(() => grid.value.floatIndex === props.index);
-    const floatDims = vue.computed(() => grid.value.floatDimensions ?? { width: 120, height: 160 });
+    const floatDims = vue.computed(() => {
+      const dims = grid.value.getItemContentDimensions(props.index, props.itemAspectRatio);
+      return { width: dims.width, height: dims.height };
+    });
     const floatAnchor = vue.ref(
       "bottom-right"
     );
@@ -339,20 +363,21 @@ const GridItem = vue.defineComponent({
       { immediate: true }
     );
     vue.watch(
-      [floatAnchor, () => containerDimensions.value.width, () => containerDimensions.value.height],
-      ([, w, h2]) => {
-        if (isFloat.value && floatInitialized.value && w > 0 && h2 > 0) {
-          const pos = getFloatCornerPos(floatAnchor.value);
-          if (noAnimation.value) {
-            x.set(pos.x);
-            y.set(pos.y);
-          } else {
-            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-            motionV.animate(x, pos.x, springCfg);
-            motionV.animate(y, pos.y, springCfg);
-          }
+      () => [
+        floatAnchor.value,
+        containerDimensions.value.width,
+        containerDimensions.value.height,
+        floatDims.value.width,
+        floatDims.value.height
+      ],
+      ([newAnchor, cw, ch]) => {
+        if (isFloat.value && floatInitialized.value && cw > 0 && ch > 0) {
+          const pos = getFloatCornerPos(newAnchor);
+          x.set(pos.x);
+          y.set(pos.y);
         }
-      }
+      },
+      { flush: "post" }
     );
     const isLastVisibleOther = vue.computed(() => {
       const lastVisibleOthersIndex = grid.value.getLastVisibleOthersIndex();
@@ -564,14 +589,16 @@ const FloatingGridItem = vue.defineComponent({
       default: 160
     },
     /**
-     * Responsive breakpoints for PiP sizing.
-     * When provided, width/height auto-adjust based on container width.
-     * Overrides the fixed `width`/`height` props.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating item.
+     * 'small', 'medium', or 'large'.
      */
-    breakpoints: {
-      type: Array,
-      default: void 0
+    size: {
+      type: String,
+      default: "medium"
+    },
+    aspectRatio: {
+      type: String,
+      default: "16:9"
     },
     /** Initial position (x, y from container edges) */
     initialPosition: {
@@ -614,10 +641,13 @@ const FloatingGridItem = vue.defineComponent({
     const { dimensions, disableAnimation: containerDisableAnimation } = context;
     const currentAnchor = vue.ref(props.anchor);
     const effectiveSize = vue.computed(() => {
-      if (props.breakpoints && props.breakpoints.length > 0 && dimensions.value.width > 0) {
-        return meetingGridLayoutCore.resolveFloatSize(dimensions.value.width, props.breakpoints);
-      }
-      return { width: props.width, height: props.height };
+      const hwRatio = meetingGridLayoutCore.getAspectRatio(props.aspectRatio);
+      const baseSize = meetingGridLayoutCore.resolveFloatWidth(dimensions.value.width, props.size);
+      const baseArea = baseSize * baseSize;
+      return {
+        width: Math.sqrt(baseArea / hwRatio),
+        height: Math.sqrt(baseArea * hwRatio)
+      };
     });
     const x = motionV.useMotionValue(0);
     const y = motionV.useMotionValue(0);
@@ -672,41 +702,24 @@ const FloatingGridItem = vue.defineComponent({
       { immediate: true }
     );
     vue.watch(
-      [
-        () => props.anchor,
-        () => containerDimensions.value.width,
-        () => containerDimensions.value.height
+      () => [
+        props.anchor,
+        containerDimensions.value.width,
+        containerDimensions.value.height,
+        effectiveSize.value.width,
+        effectiveSize.value.height
       ],
-      ([newAnchor, w, h2]) => {
-        if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
-          currentAnchor.value = newAnchor;
-          const pos = getCornerPosition(newAnchor);
-          if (containerDisableAnimation.value) {
-            x.set(pos.x);
-            y.set(pos.y);
-          } else {
-            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-            motionV.animate(x, pos.x, springCfg);
-            motionV.animate(y, pos.y, springCfg);
-          }
-        }
-      }
-    );
-    vue.watch(
-      [() => effectiveSize.value.width, () => effectiveSize.value.height],
-      () => {
-        if (isInitialized.value && containerDimensions.value.width > 0 && containerDimensions.value.height > 0) {
-          const pos = getCornerPosition(currentAnchor.value);
-          if (containerDisableAnimation) {
-            x.set(pos.x);
-            y.set(pos.y);
-          } else {
-            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-            motionV.animate(x, pos.x, springCfg);
-            motionV.animate(y, pos.y, springCfg);
+      ([newAnchor, cw, ch]) => {
+        if (isInitialized.value && cw > 0 && ch > 0) {
+          if (newAnchor !== currentAnchor.value) {
+            currentAnchor.value = newAnchor;
           }
+          const pos = getCornerPosition(newAnchor);
+          x.set(pos.x);
+          y.set(pos.y);
         }
-      }
+      },
+      { flush: "post" }
     );
     return () => {
       const dims = containerDimensions.value;
@@ -776,6 +789,7 @@ exports.createMeetGrid = meetingGridLayoutCore.createMeetGrid;
 exports.getAspectRatio = meetingGridLayoutCore.getAspectRatio;
 exports.getGridItemDimensions = meetingGridLayoutCore.getGridItemDimensions;
 exports.getSpringConfig = meetingGridLayoutCore.getSpringConfig;
+exports.resolveFloatWidth = meetingGridLayoutCore.resolveFloatWidth;
 exports.springPresets = meetingGridLayoutCore.springPresets;
 exports.FloatingGridItem = FloatingGridItem;
 exports.GridContainer = GridContainer;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as _thangdevalone_meeting_grid_layout_core from '@thangdevalone/meeting-grid-layout-core';
-import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint } from '@thangdevalone/meeting-grid-layout-core';
-export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, FloatSize } from '@thangdevalone/meeting-grid-layout-core';
+export { ContentDimensions, FloatSize, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatWidth, springPresets } from '@thangdevalone/meeting-grid-layout-core';
 import * as vue from 'vue';
 import { Ref, ComputedRef, InjectionKey, PropType } from 'vue';
 
@@ -55,6 +55,7 @@ interface GridContextValue {
     springPreset: Ref<SpringPreset>;
     dimensions: Ref<GridDimensions>;
     disableAnimation: Ref<boolean>;
+    forceAspectRatio: Ref<boolean>;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -126,24 +127,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(ItemAspectRatio | undefined)[]>;
         default: undefined;
     };
-    /** Custom width for the floating PiP item in 2-person mode */
-    floatWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    /** Custom height for the floating PiP item in 2-person mode */
-    floatHeight: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     /**
-     * Responsive breakpoints for the floating PiP in 2-person mode.
-     * When provided, PiP size auto-adjusts based on container width.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating PiP window.
+     * 'small', 'medium', or 'large'.
      */
-    floatBreakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    floatSize: {
+        type: PropType<FloatSize>;
+        default: string;
     };
     /**
      * Index of the participant to show as the floating PiP in 2-person mode.
@@ -185,6 +175,14 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * If true, forces the GridItem wrappers to maintain their aspect ratio exactly.
+     * @default false
+     */
+    forceAspectRatio: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -261,24 +259,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(ItemAspectRatio | undefined)[]>;
         default: undefined;
     };
-    /** Custom width for the floating PiP item in 2-person mode */
-    floatWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    /** Custom height for the floating PiP item in 2-person mode */
-    floatHeight: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     /**
-     * Responsive breakpoints for the floating PiP in 2-person mode.
-     * When provided, PiP size auto-adjusts based on container width.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating PiP window.
+     * 'small', 'medium', or 'large'.
      */
-    floatBreakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    floatSize: {
+        type: PropType<FloatSize>;
+        default: string;
     };
     /**
      * Index of the participant to show as the floating PiP in 2-person mode.
@@ -320,6 +307,14 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * If true, forces the GridItem wrappers to maintain their aspect ratio exactly.
+     * @default false
+     */
+    forceAspectRatio: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -337,13 +332,12 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     maxVisible: number;
     currentVisiblePage: number;
     itemAspectRatios: (string | undefined)[];
-    floatWidth: number;
-    floatHeight: number;
-    floatBreakpoints: PipBreakpoint[];
+    floatSize: FloatSize;
     pipIndex: number;
     pinOnly: boolean;
     disableFloat: boolean;
     disableAnimation: boolean;
+    forceAspectRatio: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -435,14 +429,16 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
     /**
-     * Responsive breakpoints for PiP sizing.
-     * When provided, width/height auto-adjust based on container width.
-     * Overrides the fixed `width`/`height` props.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating item.
+     * 'small', 'medium', or 'large'.
      */
-    breakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
     };
     /** Initial position (x, y from container edges) */
     initialPosition: {
@@ -494,14 +490,16 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
     /**
-     * Responsive breakpoints for PiP sizing.
-     * When provided, width/height auto-adjust based on container width.
-     * Overrides the fixed `width`/`height` props.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating item.
+     * 'small', 'medium', or 'large'.
      */
-    breakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
     };
     /** Initial position (x, y from container edges) */
     initialPosition: {
@@ -542,13 +540,14 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onAnchorChange?: ((...args: any[]) => any) | undefined;
 }>, {
+    aspectRatio: string;
     borderRadius: number;
     boxShadow: string;
     height: number;
     width: number;
     anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    size: "small" | "medium" | "large";
     visible: boolean;
-    breakpoints: PipBreakpoint[];
     initialPosition: {
         x: number;
         y: number;

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as _thangdevalone_meeting_grid_layout_core from '@thangdevalone/meeting-grid-layout-core';
-import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint } from '@thangdevalone/meeting-grid-layout-core';
-export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, FloatSize } from '@thangdevalone/meeting-grid-layout-core';
+export { ContentDimensions, FloatSize, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatWidth, springPresets } from '@thangdevalone/meeting-grid-layout-core';
 import * as vue from 'vue';
 import { Ref, ComputedRef, InjectionKey, PropType } from 'vue';
 
@@ -55,6 +55,7 @@ interface GridContextValue {
     springPreset: Ref<SpringPreset>;
     dimensions: Ref<GridDimensions>;
     disableAnimation: Ref<boolean>;
+    forceAspectRatio: Ref<boolean>;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -126,24 +127,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(ItemAspectRatio | undefined)[]>;
         default: undefined;
     };
-    /** Custom width for the floating PiP item in 2-person mode */
-    floatWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    /** Custom height for the floating PiP item in 2-person mode */
-    floatHeight: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     /**
-     * Responsive breakpoints for the floating PiP in 2-person mode.
-     * When provided, PiP size auto-adjusts based on container width.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating PiP window.
+     * 'small', 'medium', or 'large'.
      */
-    floatBreakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    floatSize: {
+        type: PropType<FloatSize>;
+        default: string;
     };
     /**
      * Index of the participant to show as the floating PiP in 2-person mode.
@@ -185,6 +175,14 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * If true, forces the GridItem wrappers to maintain their aspect ratio exactly.
+     * @default false
+     */
+    forceAspectRatio: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -261,24 +259,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(ItemAspectRatio | undefined)[]>;
         default: undefined;
     };
-    /** Custom width for the floating PiP item in 2-person mode */
-    floatWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    /** Custom height for the floating PiP item in 2-person mode */
-    floatHeight: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     /**
-     * Responsive breakpoints for the floating PiP in 2-person mode.
-     * When provided, PiP size auto-adjusts based on container width.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating PiP window.
+     * 'small', 'medium', or 'large'.
      */
-    floatBreakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    floatSize: {
+        type: PropType<FloatSize>;
+        default: string;
     };
     /**
      * Index of the participant to show as the floating PiP in 2-person mode.
@@ -320,6 +307,14 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * If true, forces the GridItem wrappers to maintain their aspect ratio exactly.
+     * @default false
+     */
+    forceAspectRatio: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -337,13 +332,12 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     maxVisible: number;
     currentVisiblePage: number;
     itemAspectRatios: (string | undefined)[];
-    floatWidth: number;
-    floatHeight: number;
-    floatBreakpoints: PipBreakpoint[];
+    floatSize: FloatSize;
     pipIndex: number;
     pinOnly: boolean;
     disableFloat: boolean;
     disableAnimation: boolean;
+    forceAspectRatio: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -435,14 +429,16 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
     /**
-     * Responsive breakpoints for PiP sizing.
-     * When provided, width/height auto-adjust based on container width.
-     * Overrides the fixed `width`/`height` props.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating item.
+     * 'small', 'medium', or 'large'.
      */
-    breakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
     };
     /** Initial position (x, y from container edges) */
     initialPosition: {
@@ -494,14 +490,16 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
     /**
-     * Responsive breakpoints for PiP sizing.
-     * When provided, width/height auto-adjust based on container width.
-     * Overrides the fixed `width`/`height` props.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating item.
+     * 'small', 'medium', or 'large'.
      */
-    breakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
     };
     /** Initial position (x, y from container edges) */
     initialPosition: {
@@ -542,13 +540,14 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onAnchorChange?: ((...args: any[]) => any) | undefined;
 }>, {
+    aspectRatio: string;
     borderRadius: number;
     boxShadow: string;
     height: number;
     width: number;
     anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    size: "small" | "medium" | "large";
     visible: boolean;
-    breakpoints: PipBreakpoint[];
     initialPosition: {
         x: number;
         y: number;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _thangdevalone_meeting_grid_layout_core from '@thangdevalone/meeting-grid-layout-core';
-import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint } from '@thangdevalone/meeting-grid-layout-core';
-export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, FloatSize } from '@thangdevalone/meeting-grid-layout-core';
+export { ContentDimensions, FloatSize, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatWidth, springPresets } from '@thangdevalone/meeting-grid-layout-core';
 import * as vue from 'vue';
 import { Ref, ComputedRef, InjectionKey, PropType } from 'vue';
 
@@ -55,6 +55,7 @@ interface GridContextValue {
     springPreset: Ref<SpringPreset>;
     dimensions: Ref<GridDimensions>;
     disableAnimation: Ref<boolean>;
+    forceAspectRatio: Ref<boolean>;
 }
 declare const GridContextKey: InjectionKey<GridContextValue>;
 declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -126,24 +127,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(ItemAspectRatio | undefined)[]>;
         default: undefined;
     };
-    /** Custom width for the floating PiP item in 2-person mode */
-    floatWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    /** Custom height for the floating PiP item in 2-person mode */
-    floatHeight: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     /**
-     * Responsive breakpoints for the floating PiP in 2-person mode.
-     * When provided, PiP size auto-adjusts based on container width.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating PiP window.
+     * 'small', 'medium', or 'large'.
      */
-    floatBreakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    floatSize: {
+        type: PropType<FloatSize>;
+        default: string;
     };
     /**
      * Index of the participant to show as the floating PiP in 2-person mode.
@@ -185,6 +175,14 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * If true, forces the GridItem wrappers to maintain their aspect ratio exactly.
+     * @default false
+     */
+    forceAspectRatio: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -261,24 +259,13 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: PropType<(ItemAspectRatio | undefined)[]>;
         default: undefined;
     };
-    /** Custom width for the floating PiP item in 2-person mode */
-    floatWidth: {
-        type: NumberConstructor;
-        default: undefined;
-    };
-    /** Custom height for the floating PiP item in 2-person mode */
-    floatHeight: {
-        type: NumberConstructor;
-        default: undefined;
-    };
     /**
-     * Responsive breakpoints for the floating PiP in 2-person mode.
-     * When provided, PiP size auto-adjusts based on container width.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating PiP window.
+     * 'small', 'medium', or 'large'.
      */
-    floatBreakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    floatSize: {
+        type: PropType<FloatSize>;
+        default: string;
     };
     /**
      * Index of the participant to show as the floating PiP in 2-person mode.
@@ -320,6 +307,14 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
         type: BooleanConstructor;
         default: boolean;
     };
+    /**
+     * If true, forces the GridItem wrappers to maintain their aspect ratio exactly.
+     * @default false
+     */
+    forceAspectRatio: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -337,13 +332,12 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     maxVisible: number;
     currentVisiblePage: number;
     itemAspectRatios: (string | undefined)[];
-    floatWidth: number;
-    floatHeight: number;
-    floatBreakpoints: PipBreakpoint[];
+    floatSize: FloatSize;
     pipIndex: number;
     pinOnly: boolean;
     disableFloat: boolean;
     disableAnimation: boolean;
+    forceAspectRatio: boolean;
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -435,14 +429,16 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
     /**
-     * Responsive breakpoints for PiP sizing.
-     * When provided, width/height auto-adjust based on container width.
-     * Overrides the fixed `width`/`height` props.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating item.
+     * 'small', 'medium', or 'large'.
      */
-    breakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
     };
     /** Initial position (x, y from container edges) */
     initialPosition: {
@@ -494,14 +490,16 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
         default: number;
     };
     /**
-     * Responsive breakpoints for PiP sizing.
-     * When provided, width/height auto-adjust based on container width.
-     * Overrides the fixed `width`/`height` props.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating item.
+     * 'small', 'medium', or 'large'.
      */
-    breakpoints: {
-        type: PropType<PipBreakpoint[]>;
-        default: undefined;
+    size: {
+        type: PropType<"small" | "medium" | "large">;
+        default: string;
+    };
+    aspectRatio: {
+        type: StringConstructor;
+        default: string;
     };
     /** Initial position (x, y from container edges) */
     initialPosition: {
@@ -542,13 +540,14 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
 }>> & Readonly<{
     onAnchorChange?: ((...args: any[]) => any) | undefined;
 }>, {
+    aspectRatio: string;
     borderRadius: number;
     boxShadow: string;
     height: number;
     width: number;
     anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    size: "small" | "medium" | "large";
     visible: boolean;
-    breakpoints: PipBreakpoint[];
     initialPosition: {
         x: number;
         y: number;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { createMeetGrid, getSpringConfig, resolveFloatSize } from '@thangdevalone/meeting-grid-layout-core';
-export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meeting-grid-layout-core';
+import { createMeetGrid, getSpringConfig, getAspectRatio, resolveFloatWidth } from '@thangdevalone/meeting-grid-layout-core';
+export { createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatWidth, springPresets } from '@thangdevalone/meeting-grid-layout-core';
 import { useResizeObserver } from '@vueuse/core';
 import { ref, onMounted, computed, defineComponent, provide, toRef, h, inject, watch } from 'vue';
 import { useMotionValue, animate, motion } from 'motion-v';
@@ -123,24 +123,13 @@ const GridContainer = defineComponent({
       type: Array,
       default: void 0
     },
-    /** Custom width for the floating PiP item in 2-person mode */
-    floatWidth: {
-      type: Number,
-      default: void 0
-    },
-    /** Custom height for the floating PiP item in 2-person mode */
-    floatHeight: {
-      type: Number,
-      default: void 0
-    },
     /**
-     * Responsive breakpoints for the floating PiP in 2-person mode.
-     * When provided, PiP size auto-adjusts based on container width.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating PiP window.
+     * 'small', 'medium', or 'large'.
      */
-    floatBreakpoints: {
-      type: Array,
-      default: void 0
+    floatSize: {
+      type: String,
+      default: "medium"
     },
     /**
      * Index of the participant to show as the floating PiP in 2-person mode.
@@ -182,6 +171,14 @@ const GridContainer = defineComponent({
       type: Boolean,
       default: false
     },
+    /**
+     * If true, forces the GridItem wrappers to maintain their aspect ratio exactly.
+     * @default false
+     */
+    forceAspectRatio: {
+      type: Boolean,
+      default: false
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -204,19 +201,19 @@ const GridContainer = defineComponent({
       maxVisible: props.maxVisible,
       currentVisiblePage: props.currentVisiblePage,
       itemAspectRatios: props.itemAspectRatios,
-      floatWidth: props.floatWidth,
-      floatHeight: props.floatHeight,
-      floatBreakpoints: props.floatBreakpoints,
+      floatSize: props.floatSize,
       pipIndex: props.pipIndex,
       pinOnly: props.pinOnly,
-      disableFloat: props.disableFloat
+      disableFloat: props.disableFloat,
+      forceAspectRatio: props.forceAspectRatio
     }));
     const grid = useMeetGrid(gridOptions);
     provide(GridContextKey, {
       grid,
       springPreset: toRef(props, "springPreset"),
       dimensions,
-      disableAnimation: toRef(props, "disableAnimation")
+      disableAnimation: toRef(props, "disableAnimation"),
+      forceAspectRatio: toRef(props, "forceAspectRatio")
     });
     return () => h(
       props.tag,
@@ -263,15 +260,40 @@ const GridItem = defineComponent({
       console.warn("GridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation } = context;
+    const { grid, springPreset, dimensions: containerDimensions, disableAnimation: containerDisableAnimation, forceAspectRatio } = context;
     const noAnimation = computed(() => containerDisableAnimation.value || props.disableAnimation);
-    const position = computed(() => grid.value.getPosition(props.index));
-    const dimensions = computed(() => grid.value.getItemDimensions(props.index));
-    const contentDimensions = computed(
-      () => grid.value.getItemContentDimensions(props.index, props.itemAspectRatio)
-    );
     const isMain = computed(() => grid.value.isMainItem(props.index));
     const isVisible = computed(() => grid.value.isItemVisible(props.index));
+    const isFloat = computed(() => grid.value.floatIndex === props.index);
+    const shouldForceRatio = computed(() => forceAspectRatio.value || isFloat.value);
+    const position = computed(() => {
+      const pos = grid.value.getPosition(props.index);
+      if (shouldForceRatio.value && !isFloat.value) {
+        const contentDims = grid.value.getItemContentDimensions(props.index, props.itemAspectRatio);
+        return {
+          top: pos.top + contentDims.offsetTop,
+          left: pos.left + contentDims.offsetLeft
+        };
+      }
+      return pos;
+    });
+    const dimensions = computed(() => {
+      if (shouldForceRatio.value && !isFloat.value) {
+        const contentDims = grid.value.getItemContentDimensions(props.index, props.itemAspectRatio);
+        return {
+          width: contentDims.width,
+          height: contentDims.height
+        };
+      }
+      return grid.value.getItemDimensions(props.index);
+    });
+    const contentDimensions = computed(() => {
+      const dims = grid.value.getItemContentDimensions(props.index, props.itemAspectRatio);
+      if (shouldForceRatio.value) {
+        return { ...dims, offsetTop: 0, offsetLeft: 0 };
+      }
+      return dims;
+    });
     const isHidden = computed(() => {
       if (grid.value.layoutMode === "spotlight" && !isMain.value)
         return true;
@@ -279,8 +301,10 @@ const GridItem = defineComponent({
         return true;
       return false;
     });
-    const isFloat = computed(() => grid.value.floatIndex === props.index);
-    const floatDims = computed(() => grid.value.floatDimensions ?? { width: 120, height: 160 });
+    const floatDims = computed(() => {
+      const dims = grid.value.getItemContentDimensions(props.index, props.itemAspectRatio);
+      return { width: dims.width, height: dims.height };
+    });
     const floatAnchor = ref(
       "bottom-right"
     );
@@ -338,20 +362,21 @@ const GridItem = defineComponent({
       { immediate: true }
     );
     watch(
-      [floatAnchor, () => containerDimensions.value.width, () => containerDimensions.value.height],
-      ([, w, h2]) => {
-        if (isFloat.value && floatInitialized.value && w > 0 && h2 > 0) {
-          const pos = getFloatCornerPos(floatAnchor.value);
-          if (noAnimation.value) {
-            x.set(pos.x);
-            y.set(pos.y);
-          } else {
-            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-            animate(x, pos.x, springCfg);
-            animate(y, pos.y, springCfg);
-          }
+      () => [
+        floatAnchor.value,
+        containerDimensions.value.width,
+        containerDimensions.value.height,
+        floatDims.value.width,
+        floatDims.value.height
+      ],
+      ([newAnchor, cw, ch]) => {
+        if (isFloat.value && floatInitialized.value && cw > 0 && ch > 0) {
+          const pos = getFloatCornerPos(newAnchor);
+          x.set(pos.x);
+          y.set(pos.y);
         }
-      }
+      },
+      { flush: "post" }
     );
     const isLastVisibleOther = computed(() => {
       const lastVisibleOthersIndex = grid.value.getLastVisibleOthersIndex();
@@ -563,14 +588,16 @@ const FloatingGridItem = defineComponent({
       default: 160
     },
     /**
-     * Responsive breakpoints for PiP sizing.
-     * When provided, width/height auto-adjust based on container width.
-     * Overrides the fixed `width`/`height` props.
-     * Use `DEFAULT_FLOAT_BREAKPOINTS` for a ready-made 5-level responsive config.
+     * Pre-defined responsive size for the floating item.
+     * 'small', 'medium', or 'large'.
      */
-    breakpoints: {
-      type: Array,
-      default: void 0
+    size: {
+      type: String,
+      default: "medium"
+    },
+    aspectRatio: {
+      type: String,
+      default: "16:9"
     },
     /** Initial position (x, y from container edges) */
     initialPosition: {
@@ -613,10 +640,13 @@ const FloatingGridItem = defineComponent({
     const { dimensions, disableAnimation: containerDisableAnimation } = context;
     const currentAnchor = ref(props.anchor);
     const effectiveSize = computed(() => {
-      if (props.breakpoints && props.breakpoints.length > 0 && dimensions.value.width > 0) {
-        return resolveFloatSize(dimensions.value.width, props.breakpoints);
-      }
-      return { width: props.width, height: props.height };
+      const hwRatio = getAspectRatio(props.aspectRatio);
+      const baseSize = resolveFloatWidth(dimensions.value.width, props.size);
+      const baseArea = baseSize * baseSize;
+      return {
+        width: Math.sqrt(baseArea / hwRatio),
+        height: Math.sqrt(baseArea * hwRatio)
+      };
     });
     const x = useMotionValue(0);
     const y = useMotionValue(0);
@@ -671,41 +701,24 @@ const FloatingGridItem = defineComponent({
       { immediate: true }
     );
     watch(
-      [
-        () => props.anchor,
-        () => containerDimensions.value.width,
-        () => containerDimensions.value.height
+      () => [
+        props.anchor,
+        containerDimensions.value.width,
+        containerDimensions.value.height,
+        effectiveSize.value.width,
+        effectiveSize.value.height
       ],
-      ([newAnchor, w, h2]) => {
-        if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
-          currentAnchor.value = newAnchor;
-          const pos = getCornerPosition(newAnchor);
-          if (containerDisableAnimation.value) {
-            x.set(pos.x);
-            y.set(pos.y);
-          } else {
-            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-            animate(x, pos.x, springCfg);
-            animate(y, pos.y, springCfg);
-          }
-        }
-      }
-    );
-    watch(
-      [() => effectiveSize.value.width, () => effectiveSize.value.height],
-      () => {
-        if (isInitialized.value && containerDimensions.value.width > 0 && containerDimensions.value.height > 0) {
-          const pos = getCornerPosition(currentAnchor.value);
-          if (containerDisableAnimation) {
-            x.set(pos.x);
-            y.set(pos.y);
-          } else {
-            const springCfg = { type: "spring", stiffness: 400, damping: 30 };
-            animate(x, pos.x, springCfg);
-            animate(y, pos.y, springCfg);
+      ([newAnchor, cw, ch]) => {
+        if (isInitialized.value && cw > 0 && ch > 0) {
+          if (newAnchor !== currentAnchor.value) {
+            currentAnchor.value = newAnchor;
           }
+          const pos = getCornerPosition(newAnchor);
+          x.set(pos.x);
+          y.set(pos.y);
         }
-      }
+      },
+      { flush: "post" }
     );
     return () => {
       const dims = containerDimensions.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thangdevalone/meeting-grid-layout-vue",
-  "version": "1.5.11",
+  "version": "1.9.0",
   "description": "Vue 3 integration for meeting-grid-layout with Motion animations",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -43,7 +43,7 @@
   "dependencies": {
     "@vueuse/core": "^10.7.0",
     "motion-v": "^1.0.0",
-    "@thangdevalone/meeting-grid-layout-core": "1.5.11"
+    "@thangdevalone/meeting-grid-layout-core": "1.9.0"
   },
   "devDependencies": {
     "vue": "^3.4.0",