@thangdevalone/meet-layout-grid-vue 1.3.1 → 1.3.3

package/dist/index.cjs

@@ -124,6 +124,25 @@ 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.
+     */
+    floatBreakpoints: {
+      type: Array,
+      default: void 0
+    },
     /** HTML tag to render */
     tag: {
       type: String,
@@ -145,7 +164,10 @@ const GridContainer = vue.defineComponent({
       currentPage: props.currentPage,
       maxVisible: props.maxVisible,
       currentVisiblePage: props.currentVisiblePage,
-      itemAspectRatios: props.itemAspectRatios
+      itemAspectRatios: props.itemAspectRatios,
+      floatWidth: props.floatWidth,
+      floatHeight: props.floatHeight,
+      floatBreakpoints: props.floatBreakpoints
     }));
     const grid = useMeetGrid(gridOptions);
     vue.provide(GridContextKey, {
@@ -198,7 +220,7 @@ const GridItem = vue.defineComponent({
       console.warn("GridItem must be used inside a GridContainer");
       return () => null;
     }
-    const { grid, springPreset } = context;
+    const { grid, springPreset, dimensions: containerDimensions } = context;
     const position = vue.computed(() => grid.value.getPosition(props.index));
     const dimensions = vue.computed(() => grid.value.getItemDimensions(props.index));
     const contentDimensions = vue.computed(
@@ -213,63 +235,211 @@ 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 floatAnchor = vue.ref(
+      "bottom-right"
+    );
+    const x = motionV.useMotionValue(0);
+    const y = motionV.useMotionValue(0);
+    const floatInitialized = vue.ref(false);
+    const getFloatCornerPos = (corner) => {
+      const padding = 12;
+      const dims = containerDimensions.value;
+      const fw = floatDims.value.width;
+      const fh = floatDims.value.height;
+      switch (corner) {
+        case "top-left":
+          return { x: padding, y: padding };
+        case "top-right":
+          return { x: dims.width - fw - padding, y: padding };
+        case "bottom-left":
+          return { x: padding, y: dims.height - fh - padding };
+        case "bottom-right":
+        default:
+          return { x: dims.width - fw - padding, y: dims.height - fh - padding };
+      }
+    };
+    const findFloatNearestCorner = (posX, posY) => {
+      const fw = floatDims.value.width;
+      const fh = floatDims.value.height;
+      const centerX = posX + fw / 2;
+      const centerY = posY + fh / 2;
+      const dims = containerDimensions.value;
+      const isLeft = centerX < dims.width / 2;
+      const isTop = centerY < dims.height / 2;
+      if (isTop && isLeft)
+        return "top-left";
+      if (isTop && !isLeft)
+        return "top-right";
+      if (!isTop && isLeft)
+        return "bottom-left";
+      return "bottom-right";
+    };
+    vue.watch(isFloat, (floating) => {
+      if (!floating) {
+        floatInitialized.value = false;
+      }
+    });
+    vue.watch(
+      [isFloat, () => containerDimensions.value.width, () => containerDimensions.value.height],
+      ([floating, w, h2]) => {
+        if (floating && w > 0 && h2 > 0 && !floatInitialized.value) {
+          const pos = getFloatCornerPos(floatAnchor.value);
+          x.set(pos.x);
+          y.set(pos.y);
+          floatInitialized.value = true;
+        }
+      },
+      { 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);
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          motionV.animate(x, pos.x, springCfg);
+          motionV.animate(y, pos.y, springCfg);
+        }
+      }
+    );
     const isLastVisibleOther = vue.computed(() => {
       const lastVisibleOthersIndex = grid.value.getLastVisibleOthersIndex();
       return props.index === lastVisibleOthersIndex;
     });
     const hiddenCount = vue.computed(() => grid.value.hiddenCount);
     const springConfig = meetLayoutGridCore.getSpringConfig(springPreset);
+    const gridX = motionV.useMotionValue(0);
+    const gridY = motionV.useMotionValue(0);
+    const gridAnimReady = vue.ref(false);
+    vue.watch(
+      [
+        () => position.value.top,
+        () => position.value.left,
+        isFloat,
+        isHidden
+      ],
+      ([, , floating, hidden]) => {
+        if (floating || hidden) {
+          gridAnimReady.value = false;
+          return;
+        }
+        const pos = position.value;
+        if (!gridAnimReady.value) {
+          gridX.set(pos.left);
+          gridY.set(pos.top);
+          gridAnimReady.value = true;
+        } else {
+          const cfg = {
+            type: "spring",
+            stiffness: springConfig.stiffness,
+            damping: springConfig.damping
+          };
+          motionV.animate(gridX, pos.left, cfg);
+          motionV.animate(gridY, pos.top, cfg);
+        }
+      },
+      { immediate: true }
+    );
     const slotProps = vue.computed(() => ({
       contentDimensions: contentDimensions.value,
       isLastVisibleOther: isLastVisibleOther.value,
-      hiddenCount: hiddenCount.value
+      hiddenCount: hiddenCount.value,
+      isFloat: isFloat.value
     }));
     return () => {
       if (isHidden.value) {
         return null;
       }
-      const animateProps = {
-        width: dimensions.value.width,
-        height: dimensions.value.height,
-        top: position.value.top,
-        left: position.value.left
-      };
+      if (isFloat.value) {
+        const dims = containerDimensions.value;
+        if (dims.width === 0 || dims.height === 0)
+          return null;
+        const dragConstraints = {
+          left: 12,
+          right: dims.width - floatDims.value.width - 12,
+          top: 12,
+          bottom: dims.height - floatDims.value.height - 12
+        };
+        const handleDragEnd = () => {
+          const currentX = x.get();
+          const currentY = y.get();
+          const nearestCorner = findFloatNearestCorner(currentX, currentY);
+          floatAnchor.value = nearestCorner;
+          const snapPos = getFloatCornerPos(nearestCorner);
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          motionV.animate(x, snapPos.x, springCfg);
+          motionV.animate(y, snapPos.y, springCfg);
+        };
+        return vue.h(
+          motionV.motion.div,
+          {
+            // Key forces Vue to recreate this element when switching float↔grid
+            key: `float-${props.index}`,
+            drag: true,
+            dragMomentum: false,
+            dragElastic: 0.1,
+            dragConstraints,
+            style: {
+              position: "absolute",
+              width: `${floatDims.value.width}px`,
+              height: `${floatDims.value.height}px`,
+              borderRadius: "12px",
+              boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
+              overflow: "hidden",
+              cursor: "grab",
+              zIndex: 100,
+              touchAction: "none",
+              left: 0,
+              top: 0,
+              x,
+              y
+            },
+            whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+            transition: { type: "spring", stiffness: 400, damping: 30 },
+            "data-grid-index": props.index,
+            "data-grid-float": true,
+            onDragEnd: handleDragEnd
+          },
+          () => slots.default?.(slotProps.value)
+        );
+      }
+      const itemWidth = dimensions.value.width;
+      const itemHeight = dimensions.value.height;
       if (props.disableAnimation) {
         return vue.h(
           props.tag,
           {
             style: {
               position: "absolute",
-              ...animateProps,
-              width: `${animateProps.width}px`,
-              height: `${animateProps.height}px`,
-              top: `${animateProps.top}px`,
-              left: `${animateProps.left}px`
+              width: `${itemWidth}px`,
+              height: `${itemHeight}px`,
+              top: `${position.value.top}px`,
+              left: `${position.value.left}px`
             },
             "data-grid-index": props.index,
             "data-grid-main": isMain.value
           },
-          // Pass all slot props
           slots.default?.(slotProps.value)
         );
       }
       return vue.h(
         motionV.motion.div,
         {
-          as: props.tag,
-          animate: animateProps,
-          transition: {
-            type: springConfig.type,
-            stiffness: springConfig.stiffness,
-            damping: springConfig.damping
-          },
+          key: `grid-${props.index}`,
           style: {
-            position: "absolute"
+            position: "absolute",
+            top: 0,
+            left: 0,
+            x: gridX,
+            y: gridY,
+            width: `${itemWidth}px`,
+            height: `${itemHeight}px`
           },
           "data-grid-index": props.index,
           "data-grid-main": isMain.value
         },
-        // Pass all slot props
         () => slots.default?.(slotProps.value)
       );
     };
@@ -314,16 +484,26 @@ const GridOverlay = vue.defineComponent({
 const FloatingGridItem = vue.defineComponent({
   name: "FloatingGridItem",
   props: {
-    /** Width of the floating item */
+    /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
     width: {
       type: Number,
       default: 120
     },
-    /** Height of the floating item */
+    /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
     height: {
       type: Number,
       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.
+     */
+    breakpoints: {
+      type: Array,
+      default: void 0
+    },
     /** Initial position (x, y from container edges) */
     initialPosition: {
       type: Object,
@@ -364,10 +544,14 @@ const FloatingGridItem = vue.defineComponent({
     }
     const { dimensions } = context;
     const currentAnchor = vue.ref(props.anchor);
-    const isDragging = vue.ref(false);
-    const dragOffset = vue.ref({ x: 0, y: 0 });
-    const startPos = vue.ref({ x: 0, y: 0 });
-    const displayPosition = vue.ref({ x: 0, y: 0 });
+    const effectiveSize = vue.computed(() => {
+      if (props.breakpoints && props.breakpoints.length > 0 && dimensions.value.width > 0) {
+        return meetLayoutGridCore.resolveFloatSize(dimensions.value.width, props.breakpoints);
+      }
+      return { width: props.width, height: props.height };
+    });
+    const x = motionV.useMotionValue(0);
+    const y = motionV.useMotionValue(0);
     const isInitialized = vue.ref(false);
     const containerDimensions = vue.computed(() => ({
       width: dimensions.value.width,
@@ -376,21 +560,23 @@ const FloatingGridItem = vue.defineComponent({
     const getCornerPosition = (corner) => {
       const padding = props.edgePadding + props.initialPosition.x;
       const dims = containerDimensions.value;
+      const ew = effectiveSize.value.width;
+      const eh = effectiveSize.value.height;
       switch (corner) {
         case "top-left":
           return { x: padding, y: padding };
         case "top-right":
-          return { x: dims.width - props.width - padding, y: padding };
+          return { x: dims.width - ew - padding, y: padding };
         case "bottom-left":
-          return { x: padding, y: dims.height - props.height - padding };
+          return { x: padding, y: dims.height - eh - padding };
         case "bottom-right":
         default:
-          return { x: dims.width - props.width - padding, y: dims.height - props.height - padding };
+          return { x: dims.width - ew - padding, y: dims.height - eh - padding };
       }
     };
-    const findNearestCorner = (x, y) => {
-      const centerX = x + props.width / 2;
-      const centerY = y + props.height / 2;
+    const findNearestCorner = (posX, posY) => {
+      const centerX = posX + effectiveSize.value.width / 2;
+      const centerY = posY + effectiveSize.value.height / 2;
       const dims = containerDimensions.value;
       const containerCenterX = dims.width / 2;
       const containerCenterY = dims.height / 2;
@@ -404,78 +590,95 @@ const FloatingGridItem = vue.defineComponent({
         return "bottom-left";
       return "bottom-right";
     };
-    const currentPos = vue.computed(() => getCornerPosition(currentAnchor.value));
-    const handleDragStart = (e) => {
-      isDragging.value = true;
-      const pos = "touches" in e ? e.touches[0] : e;
-      startPos.value = { x: pos.clientX, y: pos.clientY };
-      dragOffset.value = { x: 0, y: 0 };
-    };
-    const handleDragMove = (e) => {
-      if (!isDragging.value)
-        return;
-      e.preventDefault();
-      const pos = "touches" in e ? e.touches[0] : e;
-      dragOffset.value = {
-        x: pos.clientX - startPos.value.x,
-        y: pos.clientY - startPos.value.y
-      };
-      displayPosition.value = {
-        x: currentPos.value.x + dragOffset.value.x,
-        y: currentPos.value.y + dragOffset.value.y
-      };
-    };
-    const handleDragEnd = () => {
-      if (!isDragging.value)
-        return;
-      isDragging.value = false;
-      const finalX = displayPosition.value.x;
-      const finalY = displayPosition.value.y;
-      const nearestCorner = findNearestCorner(finalX, finalY);
-      currentAnchor.value = nearestCorner;
-      emit("anchorChange", nearestCorner);
-      displayPosition.value = getCornerPosition(nearestCorner);
-      dragOffset.value = { x: 0, y: 0 };
-    };
+    vue.watch(
+      [() => containerDimensions.value.width, () => containerDimensions.value.height],
+      ([w, h2]) => {
+        if (w > 0 && h2 > 0 && !isInitialized.value) {
+          const pos = getCornerPosition(currentAnchor.value);
+          x.set(pos.x);
+          y.set(pos.y);
+          isInitialized.value = true;
+        }
+      },
+      { immediate: true }
+    );
+    vue.watch(
+      [
+        () => props.anchor,
+        () => containerDimensions.value.width,
+        () => containerDimensions.value.height
+      ],
+      ([newAnchor, w, h2]) => {
+        if (isInitialized.value && w > 0 && h2 > 0 && newAnchor !== currentAnchor.value) {
+          currentAnchor.value = newAnchor;
+          const pos = getCornerPosition(newAnchor);
+          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);
+          const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+          motionV.animate(x, pos.x, springCfg);
+          motionV.animate(y, pos.y, springCfg);
+        }
+      }
+    );
     return () => {
       const dims = containerDimensions.value;
       if (!props.visible || dims.width === 0 || dims.height === 0) {
         return null;
       }
-      if (!isInitialized.value) {
-        displayPosition.value = currentPos.value;
-        isInitialized.value = true;
-      }
+      const ew = effectiveSize.value.width;
+      const eh = effectiveSize.value.height;
+      const padding = props.edgePadding + props.initialPosition.x;
+      const dragConstraints = {
+        left: padding,
+        right: dims.width - ew - padding,
+        top: padding,
+        bottom: dims.height - eh - padding
+      };
+      const handleDragEnd = () => {
+        const currentX = x.get();
+        const currentY = y.get();
+        const nearestCorner = findNearestCorner(currentX, currentY);
+        currentAnchor.value = nearestCorner;
+        emit("anchorChange", nearestCorner);
+        const snapPos = getCornerPosition(nearestCorner);
+        const springCfg = { type: "spring", stiffness: 400, damping: 30 };
+        motionV.animate(x, snapPos.x, springCfg);
+        motionV.animate(y, snapPos.y, springCfg);
+      };
       return vue.h(
         motionV.motion.div,
         {
-          animate: {
-            x: displayPosition.value.x,
-            y: displayPosition.value.y,
-            opacity: 1,
-            scale: isDragging.value ? 1.05 : 1
-          },
-          transition: isDragging.value ? { duration: 0 } : { type: "spring", stiffness: 400, damping: 30 },
+          drag: true,
+          dragMomentum: false,
+          dragElastic: 0.1,
+          dragConstraints,
           style: {
             position: "absolute",
-            width: `${props.width}px`,
-            height: `${props.height}px`,
+            width: `${ew}px`,
+            height: `${eh}px`,
             borderRadius: `${props.borderRadius}px`,
-            boxShadow: isDragging.value ? "0 8px 32px rgba(0,0,0,0.4)" : props.boxShadow,
+            boxShadow: props.boxShadow,
             overflow: "hidden",
-            cursor: isDragging.value ? "grabbing" : "grab",
+            cursor: "grab",
             zIndex: 100,
             touchAction: "none",
             left: 0,
-            top: 0
+            top: 0,
+            x,
+            y
           },
-          onMousedown: handleDragStart,
-          onMousemove: handleDragMove,
-          onMouseup: handleDragEnd,
-          onMouseleave: handleDragEnd,
-          onTouchstart: handleDragStart,
-          onTouchmove: handleDragMove,
-          onTouchend: handleDragEnd
+          whileDrag: { cursor: "grabbing", scale: 1.05, boxShadow: "0 8px 32px rgba(0,0,0,0.4)" },
+          transition: { type: "spring", stiffness: 400, damping: 30 },
+          onDragEnd: handleDragEnd
         },
         slots.default?.()
       );
@@ -483,12 +686,14 @@ const FloatingGridItem = vue.defineComponent({
   }
 });
 
+exports.DEFAULT_FLOAT_BREAKPOINTS = meetLayoutGridCore.DEFAULT_FLOAT_BREAKPOINTS;
 exports.createGrid = meetLayoutGridCore.createGrid;
 exports.createGridItemPositioner = meetLayoutGridCore.createGridItemPositioner;
 exports.createMeetGrid = meetLayoutGridCore.createMeetGrid;
 exports.getAspectRatio = meetLayoutGridCore.getAspectRatio;
 exports.getGridItemDimensions = meetLayoutGridCore.getGridItemDimensions;
 exports.getSpringConfig = meetLayoutGridCore.getSpringConfig;
+exports.resolveFloatSize = meetLayoutGridCore.resolveFloatSize;
 exports.springPresets = meetLayoutGridCore.springPresets;
 exports.FloatingGridItem = FloatingGridItem;
 exports.GridContainer = GridContainer;

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as _thangdevalone_meet_layout_grid_core from '@thangdevalone/meet-layout-grid-core';
-import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio } from '@thangdevalone/meet-layout-grid-core';
-export { ContentDimensions, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, springPresets } from '@thangdevalone/meet-layout-grid-core';
+import { GridDimensions, MeetGridOptions, MeetGridResult, SpringPreset, LayoutMode, ItemAspectRatio, PipBreakpoint } from '@thangdevalone/meet-layout-grid-core';
+export { ContentDimensions, DEFAULT_FLOAT_BREAKPOINTS, GridDimensions, GridOptions, ItemAspectRatio, LayoutMode, MeetGridOptions, MeetGridResult, PipBreakpoint, Position, SpringPreset, createGrid, createGridItemPositioner, createMeetGrid, getAspectRatio, getGridItemDimensions, getSpringConfig, resolveFloatSize, springPresets } from '@thangdevalone/meet-layout-grid-core';
 import * as vue from 'vue';
 import { Ref, ComputedRef, InjectionKey, PropType } from 'vue';
 
@@ -121,6 +121,25 @@ 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.
+     */
+    floatBreakpoints: {
+        type: PropType<PipBreakpoint[]>;
+        default: undefined;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -197,6 +216,25 @@ 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.
+     */
+    floatBreakpoints: {
+        type: PropType<PipBreakpoint[]>;
+        default: undefined;
+    };
     /** HTML tag to render */
     tag: {
         type: StringConstructor;
@@ -214,6 +252,9 @@ declare const GridContainer: vue.DefineComponent<vue.ExtractPropTypes<{
     maxVisible: number;
     currentVisiblePage: number;
     itemAspectRatios: (string | undefined)[];
+    floatWidth: number;
+    floatHeight: number;
+    floatBreakpoints: PipBreakpoint[];
     tag: string;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const GridItem: vue.DefineComponent<vue.ExtractPropTypes<{
@@ -294,16 +335,26 @@ declare const GridOverlay: vue.DefineComponent<vue.ExtractPropTypes<{
     visible: boolean;
 }, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
 declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
-    /** Width of the floating item */
+    /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
     width: {
         type: NumberConstructor;
         default: number;
     };
-    /** Height of the floating item */
+    /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
     height: {
         type: NumberConstructor;
         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.
+     */
+    breakpoints: {
+        type: PropType<PipBreakpoint[]>;
+        default: undefined;
+    };
     /** Initial position (x, y from container edges) */
     initialPosition: {
         type: PropType<{
@@ -343,16 +394,26 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
 }>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
     [key: string]: any;
 }> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "anchorChange"[], "anchorChange", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
-    /** Width of the floating item */
+    /** Width of the floating item (px). Overridden by `breakpoints` when provided. */
     width: {
         type: NumberConstructor;
         default: number;
     };
-    /** Height of the floating item */
+    /** Height of the floating item (px). Overridden by `breakpoints` when provided. */
     height: {
         type: NumberConstructor;
         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.
+     */
+    breakpoints: {
+        type: PropType<PipBreakpoint[]>;
+        default: undefined;
+    };
     /** Initial position (x, y from container edges) */
     initialPosition: {
         type: PropType<{
@@ -398,6 +459,7 @@ declare const FloatingGridItem: vue.DefineComponent<vue.ExtractPropTypes<{
     width: number;
     anchor: "top-left" | "top-right" | "bottom-left" | "bottom-right";
     visible: boolean;
+    breakpoints: PipBreakpoint[];
     initialPosition: {
         x: number;
         y: number;