@sguisse/react-grid-layout 2.2.3-sguisse.3

package/dist/chunk-UZL6BMXQ.mjs

@@ -0,0 +1,3146 @@
+import { defaultConstraints, setTransform, setTopLeft, perc, applyPositionConstraints, resizeItemInDirection, applySizeConstraints, verticalCompactor, defaultPositionStrategy, defaultGridConfig, defaultDragConfig, defaultResizeConfig, defaultDropConfig, getCompactor, sortBreakpoints, getBreakpointFromWidth, getColsFromBreakpoint, findOrGenerateResponsiveLayout, getIndentationValue } from './chunk-KKV4ZCG4.mjs';
+import { calcXYRaw, calcGridItemWHPx, clamp, calcGridColWidth, calcWHRaw, calcGridItemPosition, correctBounds, cloneLayout, getLayoutItem, cloneLayoutItem, moveElement, bottom, getGridPixelSteps, withLayoutItem, getAllCollisions, calcXY, __require } from './chunk-ITLZ7N2R.mjs';
+import React3, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import clsx from 'clsx';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { deepEqual } from 'fast-equals';
+
+var noopRef = () => {
+};
+function isTestRuntime() {
+  return process.env["NODE_ENV"] === "test";
+}
+function isRuntimeDndAvailable() {
+  return !isTestRuntime();
+}
+function loadReactDndRuntime() {
+  if (!isRuntimeDndAvailable()) {
+    return null;
+  }
+  return __require("@dnd-kit/react");
+}
+function loadSortableRuntime() {
+  if (!isRuntimeDndAvailable()) {
+    return null;
+  }
+  return __require("@dnd-kit/react/sortable");
+}
+function loadDomRuntime() {
+  if (!isRuntimeDndAvailable()) {
+    return null;
+  }
+  return __require("@dnd-kit/dom");
+}
+function DragDropProvider({
+  children,
+  ...props
+}) {
+  const runtime = loadReactDndRuntime();
+  if (!runtime) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  const Component = runtime.DragDropProvider;
+  return /* @__PURE__ */ jsx(Component, { ...props, children });
+}
+function DragOverlay({
+  children,
+  disabled,
+  dropAnimation
+}) {
+  const runtime = loadReactDndRuntime();
+  if (!runtime || disabled) {
+    return /* @__PURE__ */ jsx(Fragment, {});
+  }
+  const Component = runtime.DragOverlay;
+  return /* @__PURE__ */ jsx(Component, { disabled, dropAnimation, children });
+}
+function useRuntimeSortable(input) {
+  const runtime = loadSortableRuntime();
+  if (!runtime) {
+    return {
+      isDragSource: false,
+      ref: noopRef,
+      handleRef: noopRef
+    };
+  }
+  return runtime.useSortable(input);
+}
+function useRuntimeDraggable(input) {
+  const runtime = loadReactDndRuntime();
+  if (!runtime) {
+    return {
+      isDragSource: false,
+      ref: noopRef,
+      handleRef: noopRef
+    };
+  }
+  return runtime.useDraggable(input);
+}
+function useRuntimeDragDropMonitor(handlers) {
+  const runtime = loadReactDndRuntime();
+  if (!runtime) {
+    React3.useEffect(() => {
+      console.debug("[runtime] useDragDropMonitor: runtime unavailable, handlers not attached", handlers);
+    }, [handlers]);
+    return;
+  }
+  const wrappedHandlers = React3.useMemo(() => {
+    const wrap = (name, fn) => {
+      if (!fn) return void 0;
+      return (event, manager) => {
+        try {
+          console.debug(`[runtime] dnd-monitor ${name}`, event, manager);
+        } catch (err) {
+        }
+        fn(event, manager);
+      };
+    };
+    return {
+      onDragStart: wrap("onDragStart", handlers.onDragStart),
+      onDragMove: wrap("onDragMove", handlers.onDragMove),
+      onDragEnd: wrap("onDragEnd", handlers.onDragEnd)
+    };
+  }, [handlers]);
+  runtime.useDragDropMonitor(wrappedHandlers);
+}
+var PointerSensor = {
+  configure(options) {
+    const runtime = loadDomRuntime();
+    return runtime ? runtime.PointerSensor.configure(options) : options;
+  }
+};
+var KeyboardSensor = {
+  configure(options) {
+    const runtime = loadDomRuntime();
+    return runtime ? runtime.KeyboardSensor.configure(options) : options;
+  }
+};
+var PointerActivationConstraints = {
+  Distance: class Distance {
+    constructor(options) {
+      const runtime = loadDomRuntime();
+      if (runtime && runtime.PointerActivationConstraints && runtime.PointerActivationConstraints.Distance) {
+        return new runtime.PointerActivationConstraints.Distance(options);
+      }
+      this.options = options;
+    }
+  }
+};
+function describeElementForDebug(node) {
+  if (!(node instanceof Element)) {
+    return null;
+  }
+  const className = typeof node.className === "string" ? node.className.trim() : "";
+  return className.length > 0 ? `${node.tagName.toLowerCase()}.${className.replace(/\s+/g, ".")}` : node.tagName.toLowerCase();
+}
+function getGridItemResizeData(data) {
+  if (!data || typeof data !== "object") {
+    return null;
+  }
+  const itemId = data.itemId;
+  const axis = data.axis;
+  const kind = data.kind;
+  return kind === "resize" && typeof itemId === "string" && typeof axis === "string" ? { kind, itemId, axis } : null;
+}
+function GridResizeHandle({
+  axis,
+  itemId,
+  resizeHandle,
+  supportsDndKitResize,
+  onPointerDown,
+  onMouseDown,
+  onTouchStart
+}) {
+  const commonClassName = clsx(
+    "react-resizable-handle",
+    `react-resizable-handle-${axis}`
+  );
+  const { ref: resizeRef } = useRuntimeDraggable({
+    id: `${itemId}:resize:${axis}`,
+    data: {
+      kind: "resize",
+      itemId,
+      axis
+    },
+    disabled: !supportsDndKitResize,
+    feedback: "none"
+  });
+  const commonProps = {
+    className: commonClassName,
+    onPointerDown,
+    onMouseDown,
+    onTouchStart,
+    ref: supportsDndKitResize ? resizeRef : null,
+    style: { touchAction: "none" }
+  };
+  if (typeof resizeHandle === "function") {
+    return React3.cloneElement(
+      resizeHandle(axis, supportsDndKitResize ? resizeRef : null),
+      commonProps
+    );
+  }
+  if (React3.isValidElement(resizeHandle)) {
+    const element = resizeHandle;
+    return React3.cloneElement(element, {
+      ...commonProps,
+      className: clsx(commonClassName, element.props.className)
+    });
+  }
+  return /* @__PURE__ */ jsx("span", { ...commonProps }, axis);
+}
+function getTargetElement(target) {
+  return target instanceof HTMLElement ? target : null;
+}
+function isTouchInputEvent(event) {
+  return "changedTouches" in event;
+}
+function isMouseLikeInputEvent(event) {
+  return !isTouchInputEvent(event);
+}
+function getTrackedTouch(event, touchId) {
+  const touchLists = [event.changedTouches, event.touches, event.targetTouches];
+  for (const touchList of touchLists) {
+    for (let index = 0; index < touchList.length; index += 1) {
+      const touch = typeof touchList.item === "function" ? touchList.item(index) : touchList[index];
+      if (!touch) {
+        continue;
+      }
+      if (touchId === void 0 || touch.identifier === touchId) {
+        return touch;
+      }
+    }
+  }
+  return null;
+}
+function getInputCoordinates(event, touchId) {
+  if (isTouchInputEvent(event)) {
+    const touch = getTrackedTouch(event, touchId);
+    return touch ? { clientX: touch.clientX, clientY: touch.clientY } : null;
+  }
+  return { clientX: event.clientX, clientY: event.clientY };
+}
+function createResizeCandidate(origin, handle, deltaX, deltaY) {
+  const next = { ...origin };
+  if (handle.includes("e")) {
+    next.width = origin.width + deltaX;
+  }
+  if (handle.includes("s")) {
+    next.height = origin.height + deltaY;
+  }
+  if (handle.includes("w")) {
+    next.width = origin.width - deltaX;
+    next.left = origin.left + deltaX;
+  }
+  if (handle.includes("n")) {
+    next.height = origin.height - deltaY;
+    next.top = origin.top + deltaY;
+  }
+  return next;
+}
+function isPrimaryInputStart(kind, event) {
+  if (kind === "touch") {
+    return true;
+  }
+  return isMouseLikeInputEvent(event) && event.button === 0;
+}
+function getTrackedInputId(kind, event) {
+  return kind === "touch" && isTouchInputEvent(event) ? getTrackedTouch(event)?.identifier : void 0;
+}
+function isTrackedInputEvent(kind, startEvent, nextEvent) {
+  if (kind === "pointer" && nextEvent instanceof PointerEvent && startEvent instanceof PointerEvent) {
+    return nextEvent.pointerId === startEvent.pointerId;
+  }
+  return true;
+}
+function preventTouchMoveDefault(kind, event) {
+  if (kind === "touch" && isTouchInputEvent(event)) {
+    event.preventDefault();
+  }
+}
+function createNativeInteractionSession(kind, startEvent, node, onMove, onEnd) {
+  const ownerDocument = node.ownerDocument ?? document;
+  if (kind === "pointer" && startEvent instanceof PointerEvent) {
+    const moveListener = (moveEvent) => onMove(moveEvent);
+    const endListener = (endEvent) => onEnd(endEvent);
+    ownerDocument.addEventListener("pointermove", moveListener);
+    ownerDocument.addEventListener("pointerup", endListener);
+    ownerDocument.addEventListener("pointercancel", endListener);
+    node.setPointerCapture?.(startEvent.pointerId);
+    return () => {
+      ownerDocument.removeEventListener("pointermove", moveListener);
+      ownerDocument.removeEventListener("pointerup", endListener);
+      ownerDocument.removeEventListener("pointercancel", endListener);
+      if (node.hasPointerCapture?.(startEvent.pointerId)) {
+        node.releasePointerCapture(startEvent.pointerId);
+      }
+    };
+  }
+  if (kind === "mouse" && startEvent instanceof MouseEvent) {
+    const moveListener = (moveEvent) => onMove(moveEvent);
+    const endListener = (endEvent) => onEnd(endEvent);
+    ownerDocument.addEventListener("mousemove", moveListener);
+    ownerDocument.addEventListener("mouseup", endListener);
+    return () => {
+      ownerDocument.removeEventListener("mousemove", moveListener);
+      ownerDocument.removeEventListener("mouseup", endListener);
+    };
+  }
+  if (kind === "touch" && isTouchInputEvent(startEvent)) {
+    const moveListener = (moveEvent) => onMove(moveEvent);
+    const endListener = (endEvent) => onEnd(endEvent);
+    ownerDocument.addEventListener("touchmove", moveListener, {
+      passive: false
+    });
+    ownerDocument.addEventListener("touchend", endListener);
+    ownerDocument.addEventListener("touchcancel", endListener);
+    return () => {
+      ownerDocument.removeEventListener("touchmove", moveListener);
+      ownerDocument.removeEventListener("touchend", endListener);
+      ownerDocument.removeEventListener("touchcancel", endListener);
+    };
+  }
+  return () => {
+  };
+}
+function GridItem(props) {
+  const {
+    children,
+    cols,
+    containerWidth,
+    margin,
+    containerPadding,
+    rowHeight,
+    maxRows,
+    isDraggable,
+    isResizable,
+    isBounded,
+    static: isStatic,
+    useCSSTransforms = true,
+    usePercentages = false,
+    transformScale = 1,
+    positionStrategy,
+    dragThreshold = 0,
+    droppingPosition,
+    enableSortable = true,
+    className = "",
+    style,
+    handle = "",
+    cancel = "",
+    x,
+    y,
+    w,
+    h,
+    minW = 1,
+    maxW = Infinity,
+    minH = 1,
+    maxH = Infinity,
+    i,
+    resizeHandles,
+    resizeHandle,
+    constraints = defaultConstraints,
+    isDndKitDragSource = false,
+    layoutItem,
+    layout = [],
+    onDragStart: onDragStartProp,
+    onDrag: onDragProp,
+    onDragStop: onDragStopProp,
+    onResizeStart: onResizeStartProp,
+    onResize: onResizeProp,
+    onResizeStop: onResizeStopProp,
+    onResizeCancel: onResizeCancelProp
+  } = props;
+  const [dragging, setDragging] = useState(false);
+  const [resizing, setResizing] = useState(false);
+  const elementRef = useRef(null);
+  const dragPositionRef = useRef({ left: 0, top: 0 });
+  const resizePositionRef = useRef({
+    top: 0,
+    left: 0,
+    width: 0,
+    height: 0
+  });
+  const prevDroppingPositionRef = useRef(void 0);
+  const layoutRef = useRef(layout);
+  const dragSessionRef = useRef(null);
+  const resizeSessionRef = useRef(null);
+  const dragPendingRef = useRef(false);
+  const initialDragClientRef = useRef({ x: 0, y: 0 });
+  const thresholdExceededRef = useRef(false);
+  const draggingRef = useRef(false);
+  const activeDndResizeRef = useRef(null);
+  const runtimeDndAvailable = isRuntimeDndAvailable();
+  const nativePointerEventsAvailable = typeof window !== "undefined" && "PointerEvent" in window;
+  const runtimePointerEventsAvailable = enableSortable && nativePointerEventsAvailable;
+  const supportsDndKitRuntime = runtimeDndAvailable && runtimePointerEventsAvailable;
+  const supportsDndKitDrag = supportsDndKitRuntime && isDraggable && !isStatic;
+  const supportsDndKitResize = supportsDndKitRuntime && isResizable && !isStatic;
+  const useNativeDragFallback = !supportsDndKitDrag && isDraggable && !isStatic;
+  const useNativeResizeFallback = !supportsDndKitResize && isResizable && !isStatic;
+  layoutRef.current = layout;
+  const resolvedResizeHandles = useMemo(
+    () => [...resizeHandles ?? ["se"]],
+    [resizeHandles]
+  );
+  const sortableIndex = useMemo(
+    () => Math.max(0, layout.findIndex((item) => item.i === i)),
+    [layout, i]
+  );
+  const {
+    isDragSource: isSortableDragSource,
+    ref: sortableRef,
+    handleRef: sortableHandleRef
+  } = useRuntimeSortable({
+    id: i,
+    index: sortableIndex,
+    group: "react-grid-layout",
+    data: { kind: "drag", itemId: i },
+    disabled: !supportsDndKitDrag,
+    feedback: "none",
+    transition: null
+  });
+  const dragCancelSelector = useMemo(
+    () => [".react-resizable-handle", cancel].filter((value) => value.length > 0).join(","),
+    [cancel]
+  );
+  const setElementRef = useCallback(
+    (node) => {
+      elementRef.current = node;
+      console.debug("[GridItem] setElementRef", {
+        i,
+        node: describeElementForDebug(node),
+        connected: node?.isConnected ?? false,
+        supportsDndKitDrag,
+        handle
+      });
+      sortableRef(node);
+      if (!supportsDndKitDrag) {
+        sortableHandleRef(null);
+        return;
+      }
+      const handleElement = handle && node ? node.querySelector(handle) : null;
+      console.debug("[GridItem] setElementRef: sortable handle assigned", {
+        i,
+        handle,
+        handleElement: describeElementForDebug(handleElement)
+      });
+      sortableHandleRef(handleElement instanceof Element ? handleElement : null);
+    },
+    [handle, i, sortableHandleRef, sortableRef, supportsDndKitDrag]
+  );
+  const positionParams = useMemo(
+    () => ({
+      cols,
+      containerPadding,
+      containerWidth,
+      margin,
+      maxRows,
+      rowHeight
+    }),
+    [cols, containerPadding, containerWidth, margin, maxRows, rowHeight]
+  );
+  function createGridItemDndSnapshot(snapshotParams, item, dragPosition, resizePosition) {
+    const position = calcGridItemPosition(
+      snapshotParams,
+      item.x,
+      item.y,
+      item.w,
+      item.h,
+      dragPosition ?? null,
+      resizePosition ?? null
+    );
+    const { x: gridX, y: gridY } = calcXYRaw(
+      snapshotParams,
+      position.top,
+      position.left
+    );
+    return {
+      left: position.left,
+      top: position.top,
+      width: position.width,
+      height: position.height,
+      gridX,
+      gridY
+    };
+  }
+  function getGridItemPixelDelta(previous, next) {
+    return {
+      deltaX: next.left - previous.left,
+      deltaY: next.top - previous.top
+    };
+  }
+  const constraintContext = useMemo(
+    () => ({
+      cols,
+      maxRows,
+      containerWidth,
+      containerHeight: 0,
+      rowHeight,
+      margin,
+      layout: []
+    }),
+    [cols, maxRows, containerWidth, rowHeight, margin]
+  );
+  const getConstraintContext = useCallback(
+    () => ({
+      ...constraintContext,
+      layout: layoutRef.current
+    }),
+    [constraintContext]
+  );
+  const getRuntimeInteractionEvent = useCallback(
+    (event) => event.nativeEvent ?? event.operation.activatorEvent ?? new Event("drag"),
+    []
+  );
+  const effectiveLayoutItem = useMemo(
+    () => layoutItem ?? {
+      i,
+      x,
+      y,
+      w,
+      h,
+      minW,
+      maxW,
+      minH,
+      maxH
+    },
+    [layoutItem, i, x, y, w, h, minW, maxW, minH, maxH]
+  );
+  const createStyle = useCallback(
+    (pos2) => {
+      if (positionStrategy?.calcStyle) {
+        return positionStrategy.calcStyle(pos2);
+      }
+      if (useCSSTransforms) {
+        return setTransform(pos2);
+      }
+      const styleObject = setTopLeft(pos2);
+      if (usePercentages) {
+        return {
+          ...styleObject,
+          left: perc(pos2.left / containerWidth),
+          width: perc(pos2.width / containerWidth)
+        };
+      }
+      return styleObject;
+    },
+    [positionStrategy, useCSSTransforms, usePercentages, containerWidth]
+  );
+  const getDragStartPosition = useCallback(
+    (clientX, clientY, node) => {
+      const { offsetParent } = node;
+      if (!offsetParent) {
+        return null;
+      }
+      const parentRect = offsetParent.getBoundingClientRect();
+      const clientRect = node.getBoundingClientRect();
+      const cLeft = clientRect.left / transformScale;
+      const pLeft = parentRect.left / transformScale;
+      const cTop = clientRect.top / transformScale;
+      const pTop = parentRect.top / transformScale;
+      if (positionStrategy?.calcDragPosition) {
+        return positionStrategy.calcDragPosition(
+          clientX,
+          clientY,
+          clientX - clientRect.left,
+          clientY - clientRect.top
+        );
+      }
+      return {
+        left: cLeft - pLeft + offsetParent.scrollLeft,
+        top: cTop - pTop + offsetParent.scrollTop
+      };
+    },
+    [positionStrategy, transformScale]
+  );
+  const clearDragSession = useCallback(() => {
+    const session = dragSessionRef.current;
+    if (!session) {
+      return;
+    }
+    session.cleanup();
+    dragSessionRef.current = null;
+  }, []);
+  const clearResizeSession = useCallback(() => {
+    const session = resizeSessionRef.current;
+    if (!session) {
+      return;
+    }
+    session.cleanup();
+    resizeSessionRef.current = null;
+  }, []);
+  const emitDragStart = useCallback(
+    (event, node, newPosition, skipThreshold, clientX, clientY) => {
+      console.debug("[GridItem] emitDragStart", { i, skipThreshold, clientX, clientY, newPosition });
+      dragPositionRef.current = newPosition;
+      if (clientX !== void 0 && clientY !== void 0) {
+        initialDragClientRef.current = { x: clientX, y: clientY };
+      }
+      setDragging(true);
+      draggingRef.current = true;
+      if (dragThreshold > 0 && !skipThreshold) {
+        dragPendingRef.current = true;
+        thresholdExceededRef.current = false;
+        return;
+      }
+      dragPendingRef.current = false;
+      thresholdExceededRef.current = true;
+      if (!onDragStartProp) {
+        return;
+      }
+      const rawPos = calcXYRaw(positionParams, newPosition.top, newPosition.left);
+      const { x: newX, y: newY } = applyPositionConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawPos.x,
+        rawPos.y,
+        getConstraintContext()
+      );
+      console.debug("[GridItem] calling onDragStartProp", i, newX, newY);
+      onDragStartProp(i, newX, newY, {
+        e: event,
+        node,
+        newPosition
+      });
+    },
+    [
+      dragThreshold,
+      onDragStartProp,
+      positionParams,
+      constraints,
+      effectiveLayoutItem,
+      getConstraintContext,
+      i
+    ]
+  );
+  const emitDragMove = useCallback(
+    (event, node, deltaX, deltaY, clientX, clientY) => {
+      console.debug("[GridItem] emitDragMove", { i, deltaX, deltaY, clientX, clientY });
+      if (!draggingRef.current && !dragPendingRef.current) {
+        return;
+      }
+      if (dragPendingRef.current && !thresholdExceededRef.current && clientX !== void 0 && clientY !== void 0) {
+        const dx = clientX - initialDragClientRef.current.x;
+        const dy = clientY - initialDragClientRef.current.y;
+        const distance = Math.hypot(dx, dy);
+        if (distance < dragThreshold) {
+          return;
+        }
+        thresholdExceededRef.current = true;
+        dragPendingRef.current = false;
+        if (onDragStartProp) {
+          const rawPos2 = calcXYRaw(
+            positionParams,
+            dragPositionRef.current.top,
+            dragPositionRef.current.left
+          );
+          const { x: startX, y: startY } = applyPositionConstraints(
+            constraints,
+            effectiveLayoutItem,
+            rawPos2.x,
+            rawPos2.y,
+            getConstraintContext()
+          );
+          console.debug("[GridItem] emitting onDragStart from pending state", i, startX, startY);
+          onDragStartProp(i, startX, startY, {
+            e: event,
+            node,
+            newPosition: dragPositionRef.current
+          });
+        }
+      }
+      let top = dragPositionRef.current.top + deltaY;
+      let left = dragPositionRef.current.left + deltaX;
+      if (isBounded) {
+        const { offsetParent } = node;
+        if (offsetParent) {
+          const bottomBoundary = offsetParent.clientHeight - calcGridItemWHPx(h, rowHeight, margin[1]);
+          top = clamp(top, 0, bottomBoundary);
+          const colWidth = calcGridColWidth(positionParams);
+          const rightBoundary = containerWidth - calcGridItemWHPx(w, colWidth, margin[0]);
+          left = clamp(left, 0, rightBoundary);
+        }
+      }
+      const newPosition = { top, left };
+      dragPositionRef.current = newPosition;
+      if (!onDragProp) {
+        return;
+      }
+      const rawPos = calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = applyPositionConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawPos.x,
+        rawPos.y,
+        getConstraintContext()
+      );
+      console.debug("[GridItem] calling onDragProp", i, newX, newY);
+      onDragProp(i, newX, newY, {
+        e: event,
+        node,
+        newPosition
+      });
+    },
+    [
+      dragThreshold,
+      onDragStartProp,
+      positionParams,
+      constraints,
+      effectiveLayoutItem,
+      getConstraintContext,
+      i,
+      isBounded,
+      h,
+      rowHeight,
+      margin,
+      containerWidth,
+      w,
+      onDragProp
+    ]
+  );
+  const emitDragStop = useCallback(
+    (event, node) => {
+      console.debug("[GridItem] emitDragStop", { i, eventType: event?.type });
+      if (!draggingRef.current && !dragPendingRef.current) {
+        return;
+      }
+      const wasPending = dragPendingRef.current;
+      dragPendingRef.current = false;
+      thresholdExceededRef.current = false;
+      initialDragClientRef.current = { x: 0, y: 0 };
+      if (wasPending) {
+        setDragging(false);
+        draggingRef.current = false;
+        dragPositionRef.current = { left: 0, top: 0 };
+        return;
+      }
+      const { left, top } = dragPositionRef.current;
+      const newPosition = { top, left };
+      setDragging(false);
+      draggingRef.current = false;
+      dragPositionRef.current = { left: 0, top: 0 };
+      if (!onDragStopProp) {
+        return;
+      }
+      const rawPos = calcXYRaw(positionParams, top, left);
+      const { x: newX, y: newY } = applyPositionConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawPos.x,
+        rawPos.y,
+        getConstraintContext()
+      );
+      console.debug("[GridItem] calling onDragStopProp", i, newX, newY);
+      onDragStopProp(i, newX, newY, {
+        e: event,
+        node,
+        newPosition
+      });
+    },
+    [
+      onDragStopProp,
+      positionParams,
+      constraints,
+      effectiveLayoutItem,
+      getConstraintContext,
+      i
+    ]
+  );
+  const emitResize = useCallback(
+    (handlerName, event, data, origin) => {
+      console.debug("[GridItem] emitResize", { i, handlerName, data, origin });
+      const handler = handlerName === "onResizeStart" ? onResizeStartProp : handlerName === "onResize" ? onResizeProp : onResizeStopProp;
+      resizePositionRef.current = data.size;
+      if (!handler) {
+        console.debug("[GridItem] emitResize: no handler", handlerName);
+        return;
+      }
+      const updatedSize = resizeItemInDirection(
+        data.handle,
+        origin,
+        data.size,
+        containerWidth
+      );
+      resizePositionRef.current = updatedSize;
+      const rawSize = calcWHRaw(
+        positionParams,
+        updatedSize.width,
+        updatedSize.height
+      );
+      const { w: newW, h: newH } = applySizeConstraints(
+        constraints,
+        effectiveLayoutItem,
+        rawSize.w,
+        rawSize.h,
+        data.handle,
+        getConstraintContext()
+      );
+      console.debug("[GridItem] calling resize handler", { i, handlerName, newW, newH, updatedSize });
+      handler(i, newW, newH, {
+        e: event,
+        node: data.node,
+        size: updatedSize,
+        handle: data.handle
+      });
+    },
+    [
+      onResizeStartProp,
+      onResizeProp,
+      onResizeStopProp,
+      containerWidth,
+      positionParams,
+      constraints,
+      effectiveLayoutItem,
+      getConstraintContext,
+      i
+    ]
+  );
+  const clearDndResizeState = useCallback(() => {
+    activeDndResizeRef.current = null;
+    setResizing(false);
+    resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
+  }, []);
+  useRuntimeDragDropMonitor({
+    onDragStart: (event) => {
+      console.debug("[GridItem] runtime onDragStart", { i, event });
+      const resizeData = getGridItemResizeData(event.operation.source?.data);
+      if (!supportsDndKitResize || !resizeData || resizeData.itemId !== i) {
+        console.debug("[GridItem] runtime onDragStart: ignored", { supportsDndKitResize, resizeData });
+        return;
+      }
+      const node = elementRef.current;
+      if (!node) {
+        console.debug("[GridItem] runtime onDragStart: no node");
+        return;
+      }
+      const origin = calcGridItemPosition(positionParams, x, y, w, h);
+      activeDndResizeRef.current = {
+        axis: resizeData.axis,
+        node,
+        origin,
+        initialPointer: (() => {
+          const ae = event.operation.activatorEvent;
+          return ae ? { x: ae.clientX ?? 0, y: ae.clientY ?? 0 } : { x: 0, y: 0 };
+        })()
+      };
+      setResizing(true);
+      emitResize(
+        "onResizeStart",
+        getRuntimeInteractionEvent(event),
+        { node, size: origin, handle: resizeData.axis },
+        origin
+      );
+    },
+    onDragMove: (event) => {
+      console.debug("[GridItem] runtime onDragMove", { i, event });
+      const session = activeDndResizeRef.current;
+      const resizeData = getGridItemResizeData(event.operation.source?.data);
+      if (!session || !supportsDndKitResize || !resizeData || resizeData.itemId !== i || resizeData.axis !== session.axis) {
+        console.debug("[GridItem] runtime onDragMove: ignored", { session, resizeData });
+        return;
+      }
+      const moveTransform = event.to ? {
+        x: event.to.x - session.initialPointer.x,
+        y: event.to.y - session.initialPointer.y
+      } : event.operation.transform;
+      const nextCandidate = createResizeCandidate(
+        session.origin,
+        resizeData.axis,
+        moveTransform.x / transformScale,
+        moveTransform.y / transformScale
+      );
+      emitResize(
+        "onResize",
+        getRuntimeInteractionEvent(event),
+        { node: session.node, size: nextCandidate, handle: resizeData.axis },
+        session.origin
+      );
+    },
+    onDragEnd: (event) => {
+      console.debug("[GridItem] runtime onDragEnd", { i, event });
+      const session = activeDndResizeRef.current;
+      const resizeData = getGridItemResizeData(event.operation.source?.data);
+      if (!session || !supportsDndKitResize || !resizeData || resizeData.itemId !== i || resizeData.axis !== session.axis) {
+        console.debug("[GridItem] runtime onDragEnd: ignored", { session, resizeData });
+        return;
+      }
+      const nativeEnd = event.nativeEvent instanceof PointerEvent ? event.nativeEvent : null;
+      const endTransform = nativeEnd ? {
+        x: nativeEnd.clientX - session.initialPointer.x,
+        y: nativeEnd.clientY - session.initialPointer.y
+      } : event.operation.transform;
+      const nextCandidate = event.canceled ? session.origin : createResizeCandidate(
+        session.origin,
+        resizeData.axis,
+        endTransform.x / transformScale,
+        endTransform.y / transformScale
+      );
+      if (event.canceled) {
+        onResizeCancelProp?.(i);
+        clearDndResizeState();
+        return;
+      }
+      emitResize(
+        "onResizeStop",
+        getRuntimeInteractionEvent(event),
+        { node: session.node, size: nextCandidate, handle: resizeData.axis },
+        session.origin
+      );
+      clearDndResizeState();
+    }
+  });
+  const startDragSession = useCallback(
+    (event, kind) => {
+      if (!isDraggable || isStatic || dragSessionRef.current) {
+        return;
+      }
+      if (!isPrimaryInputStart(kind, event)) {
+        return;
+      }
+      const node = elementRef.current;
+      const target = getTargetElement(event.target);
+      if (!node || !target) {
+        return;
+      }
+      if (dragCancelSelector && target.closest(dragCancelSelector)) {
+        return;
+      }
+      if (handle && !target.closest(handle)) {
+        return;
+      }
+      const touchId = getTrackedInputId(kind, event);
+      const startCoords = getInputCoordinates(event, touchId);
+      if (!startCoords) {
+        return;
+      }
+      const startPosition = getDragStartPosition(
+        startCoords.clientX,
+        startCoords.clientY,
+        node
+      );
+      if (!startPosition) {
+        return;
+      }
+      clearDragSession();
+      event.preventDefault();
+      let lastClientX = startCoords.clientX;
+      let lastClientY = startCoords.clientY;
+      const handleMove = (moveEvent) => {
+        if (!isTrackedInputEvent(kind, event, moveEvent)) {
+          return;
+        }
+        const coords = getInputCoordinates(moveEvent, touchId);
+        if (!coords) {
+          return;
+        }
+        preventTouchMoveDefault(kind, moveEvent);
+        const deltaX = (coords.clientX - lastClientX) / transformScale;
+        const deltaY = (coords.clientY - lastClientY) / transformScale;
+        lastClientX = coords.clientX;
+        lastClientY = coords.clientY;
+        emitDragMove(
+          moveEvent,
+          node,
+          deltaX,
+          deltaY,
+          coords.clientX,
+          coords.clientY
+        );
+      };
+      const handleEnd = (endEvent) => {
+        if (!isTrackedInputEvent(kind, event, endEvent)) {
+          return;
+        }
+        clearDragSession();
+        emitDragStop(endEvent, node);
+      };
+      dragSessionRef.current = {
+        cleanup: createNativeInteractionSession(
+          kind,
+          event,
+          node,
+          handleMove,
+          handleEnd
+        )
+      };
+      emitDragStart(
+        event,
+        node,
+        startPosition,
+        false,
+        startCoords.clientX,
+        startCoords.clientY
+      );
+    },
+    [
+      isDraggable,
+      isStatic,
+      dragCancelSelector,
+      handle,
+      getDragStartPosition,
+      clearDragSession,
+      transformScale,
+      emitDragMove,
+      emitDragStop,
+      emitDragStart
+    ]
+  );
+  const handleDragPointerDown = useCallback(
+    (event) => {
+      startDragSession(event, "pointer");
+    },
+    [startDragSession]
+  );
+  const handleDragMouseDown = useCallback(
+    (event) => {
+      startDragSession(event, "mouse");
+    },
+    [startDragSession]
+  );
+  const handleDragTouchStart = useCallback(
+    (event) => {
+      startDragSession(event, "touch");
+    },
+    [startDragSession]
+  );
+  const startResizeSession = useCallback(
+    (handleAxis, nativeEvent, kind) => {
+      if (!isResizable || isStatic || resizeSessionRef.current) {
+        return;
+      }
+      if (!isPrimaryInputStart(kind, nativeEvent)) {
+        return;
+      }
+      const node = elementRef.current;
+      if (!node) {
+        return;
+      }
+      const touchId = getTrackedInputId(kind, nativeEvent);
+      const startCoords = getInputCoordinates(nativeEvent, touchId);
+      if (!startCoords) {
+        return;
+      }
+      clearResizeSession();
+      nativeEvent.preventDefault();
+      setResizing(true);
+      const origin = calcGridItemPosition(positionParams, x, y, w, h);
+      emitResize(
+        "onResizeStart",
+        nativeEvent,
+        { node, size: origin, handle: handleAxis },
+        origin
+      );
+      const startClientX = startCoords.clientX;
+      const startClientY = startCoords.clientY;
+      const handleMove = (moveEvent) => {
+        if (!isTrackedInputEvent(kind, nativeEvent, moveEvent)) {
+          return;
+        }
+        const coords = getInputCoordinates(moveEvent, touchId);
+        if (!coords) {
+          return;
+        }
+        preventTouchMoveDefault(kind, moveEvent);
+        const deltaX = (coords.clientX - startClientX) / transformScale;
+        const deltaY = (coords.clientY - startClientY) / transformScale;
+        const nextCandidate = createResizeCandidate(
+          origin,
+          handleAxis,
+          deltaX,
+          deltaY
+        );
+        emitResize(
+          "onResize",
+          moveEvent,
+          { node, size: nextCandidate, handle: handleAxis },
+          origin
+        );
+      };
+      const handleEnd = (endEvent) => {
+        if (!isTrackedInputEvent(kind, nativeEvent, endEvent)) {
+          return;
+        }
+        const coords = getInputCoordinates(endEvent, touchId) ?? startCoords;
+        const deltaX = (coords.clientX - startClientX) / transformScale;
+        const deltaY = (coords.clientY - startClientY) / transformScale;
+        const nextCandidate = createResizeCandidate(
+          origin,
+          handleAxis,
+          deltaX,
+          deltaY
+        );
+        clearResizeSession();
+        emitResize(
+          "onResizeStop",
+          endEvent,
+          { node, size: nextCandidate, handle: handleAxis },
+          origin
+        );
+        setResizing(false);
+        resizePositionRef.current = { top: 0, left: 0, width: 0, height: 0 };
+      };
+      resizeSessionRef.current = {
+        cleanup: createNativeInteractionSession(
+          kind,
+          nativeEvent,
+          node,
+          handleMove,
+          handleEnd
+        )
+      };
+    },
+    [
+      isResizable,
+      isStatic,
+      clearResizeSession,
+      positionParams,
+      x,
+      y,
+      w,
+      h,
+      emitResize,
+      transformScale
+    ]
+  );
+  const handleResizePointerDown = useCallback(
+    (handleAxis, event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      startResizeSession(handleAxis, event.nativeEvent, "pointer");
+    },
+    [startResizeSession]
+  );
+  const handleResizeMouseDown = useCallback(
+    (handleAxis, event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      startResizeSession(handleAxis, event.nativeEvent, "mouse");
+    },
+    [startResizeSession]
+  );
+  const handleResizeTouchStart = useCallback(
+    (handleAxis, event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      startResizeSession(handleAxis, event.nativeEvent, "touch");
+    },
+    [startResizeSession]
+  );
+  useEffect(() => {
+    if (!supportsDndKitDrag) {
+      console.debug("[GridItem] sortable handle effect: disabled", { i });
+      sortableHandleRef(null);
+      return;
+    }
+    const node = elementRef.current;
+    if (!node) {
+      console.debug("[GridItem] sortable handle effect: no node", { i, handle });
+      return;
+    }
+    const handleElement = handle ? node.querySelector(handle) : null;
+    console.debug("[GridItem] sortable handle effect: applied", {
+      i,
+      handle,
+      node: describeElementForDebug(node),
+      handleElement: describeElementForDebug(handleElement)
+    });
+    sortableHandleRef(handleElement instanceof Element ? handleElement : null);
+    return () => {
+      console.debug("[GridItem] sortable handle effect: cleanup", { i });
+      sortableHandleRef(null);
+    };
+  }, [supportsDndKitDrag, handle, i, sortableHandleRef]);
+  useEffect(() => {
+    if (!supportsDndKitDrag || isDndKitDragSource || resizing) {
+      return;
+    }
+    const node = elementRef.current;
+    if (!node) {
+      console.debug("[GridItem] sortable rebind skipped: no node", {
+        i,
+        x,
+        y,
+        w,
+        h,
+        isDndKitDragSource,
+        resizing
+      });
+      return;
+    }
+    const handleElement = handle ? node.querySelector(handle) : null;
+    console.debug("[GridItem] sortable rebind after geometry/state change", {
+      i,
+      x,
+      y,
+      w,
+      h,
+      node: describeElementForDebug(node),
+      handle,
+      handleElement: describeElementForDebug(handleElement),
+      isSortableDragSource,
+      isDndKitDragSource,
+      resizing
+    });
+    sortableHandleRef(null);
+    sortableRef(null);
+    sortableRef(node);
+    sortableHandleRef(handleElement instanceof Element ? handleElement : null);
+  }, [
+    h,
+    handle,
+    i,
+    isDndKitDragSource,
+    isSortableDragSource,
+    resizing,
+    sortableHandleRef,
+    sortableRef,
+    supportsDndKitDrag,
+    w,
+    x,
+    y
+  ]);
+  useEffect(() => {
+    if (!useNativeDragFallback) {
+      return;
+    }
+    const node = elementRef.current;
+    if (!node) {
+      return;
+    }
+    if (nativePointerEventsAvailable) {
+      node.addEventListener("pointerdown", handleDragPointerDown);
+    } else {
+      node.addEventListener("mousedown", handleDragMouseDown);
+      node.addEventListener("touchstart", handleDragTouchStart, {
+        passive: false
+      });
+    }
+    return () => {
+      if (nativePointerEventsAvailable) {
+        node.removeEventListener("pointerdown", handleDragPointerDown);
+      } else {
+        node.removeEventListener("mousedown", handleDragMouseDown);
+        node.removeEventListener("touchstart", handleDragTouchStart);
+      }
+    };
+  }, [
+    handleDragPointerDown,
+    handleDragMouseDown,
+    handleDragTouchStart,
+    nativePointerEventsAvailable,
+    useNativeDragFallback
+  ]);
+  useEffect(() => {
+    return () => {
+      clearDragSession();
+      clearResizeSession();
+    };
+  }, [clearDragSession, clearResizeSession]);
+  useEffect(() => {
+    if (!droppingPosition) {
+      return;
+    }
+    const node = elementRef.current;
+    if (!node) {
+      return;
+    }
+    const prevDroppingPosition = prevDroppingPositionRef.current ?? {
+      left: 0,
+      top: 0,
+      e: droppingPosition.e
+    };
+    const currentSnapshot = createGridItemDndSnapshot(
+      positionParams,
+      { x, y, w, h },
+      droppingPosition,
+      null
+    );
+    const previousSnapshot = createGridItemDndSnapshot(
+      positionParams,
+      { x, y, w, h },
+      prevDroppingPosition,
+      null
+    );
+    const nextPosition = {
+      left: currentSnapshot.left,
+      top: currentSnapshot.top
+    };
+    if (!dragging) {
+      emitDragStart(droppingPosition.e, node, nextPosition, true);
+    } else if (currentSnapshot.left !== previousSnapshot.left || currentSnapshot.top !== previousSnapshot.top) {
+      const { deltaX, deltaY } = getGridItemPixelDelta(
+        dragPositionRef.current,
+        nextPosition
+      );
+      emitDragMove(droppingPosition.e, node, deltaX, deltaY);
+    }
+    prevDroppingPositionRef.current = droppingPosition;
+  }, [droppingPosition, dragging, emitDragMove, emitDragStart, positionParams, x, y, w, h]);
+  const dndSnapshot = createGridItemDndSnapshot(
+    positionParams,
+    { x, y, w, h },
+    dragging ? dragPositionRef.current : null,
+    resizing ? resizePositionRef.current : null
+  );
+  const pos = {
+    left: dndSnapshot.left,
+    top: dndSnapshot.top,
+    width: dndSnapshot.width,
+    height: dndSnapshot.height
+  };
+  const child = React3.Children.only(children);
+  const childProps = child.props;
+  const childClassName = childProps["className"];
+  const childStyle = childProps["style"];
+  const childOnPointerDownCapture = childProps["onPointerDownCapture"];
+  const childOnMouseDownCapture = childProps["onMouseDownCapture"];
+  const childOnClickCapture = childProps["onClickCapture"];
+  const showSortableDragSource = supportsDndKitDrag && isSortableDragSource && isDndKitDragSource;
+  const renderResizeHandle = useCallback(
+    (axis) => {
+      return /* @__PURE__ */ jsx(
+        GridResizeHandle,
+        {
+          axis,
+          itemId: i,
+          resizeHandle,
+          supportsDndKitResize,
+          onPointerDown: useNativeResizeFallback && nativePointerEventsAvailable ? (event) => handleResizePointerDown(axis, event) : void 0,
+          onMouseDown: useNativeResizeFallback && !nativePointerEventsAvailable ? (event) => handleResizeMouseDown(axis, event) : void 0,
+          onTouchStart: useNativeResizeFallback && !nativePointerEventsAvailable ? (event) => handleResizeTouchStart(axis, event) : void 0
+        },
+        axis
+      );
+    },
+    [
+      handleResizePointerDown,
+      handleResizeMouseDown,
+      handleResizeTouchStart,
+      i,
+      nativePointerEventsAvailable,
+      resizeHandle,
+      supportsDndKitResize,
+      useNativeResizeFallback
+    ]
+  );
+  const nextChildren = React3.Children.toArray(
+    childProps["children"]
+  );
+  if (isResizable && !isStatic) {
+    nextChildren.push(...resolvedResizeHandles.map(renderResizeHandle));
+  }
+  return React3.cloneElement(
+    child,
+    {
+      ref: setElementRef,
+      className: clsx("react-grid-item", childClassName, className, {
+        static: isStatic,
+        resizing,
+        "react-draggable": isDraggable,
+        "react-draggable-dragging": dragging || showSortableDragSource,
+        dropping: Boolean(droppingPosition),
+        cssTransforms: useCSSTransforms,
+        "react-resizable-hide": !isResizable
+      }),
+      onPointerDownCapture: (event) => {
+        const node = elementRef.current;
+        console.debug("[GridItem] pointerdown capture", {
+          i,
+          target: describeElementForDebug(event.target),
+          currentTarget: describeElementForDebug(event.currentTarget),
+          node: describeElementForDebug(node),
+          connected: node?.isConnected ?? false,
+          supportsDndKitDrag,
+          isSortableDragSource,
+          isDndKitDragSource,
+          dragging,
+          resizing,
+          handle,
+          cancel,
+          visibility: node && typeof window !== "undefined" ? window.getComputedStyle(node).visibility : void 0,
+          pointerEvents: node && typeof window !== "undefined" ? window.getComputedStyle(node).pointerEvents : void 0
+        });
+        childOnPointerDownCapture?.(event);
+      },
+      onMouseDownCapture: (event) => {
+        console.debug("[GridItem] mousedown capture", {
+          i,
+          target: describeElementForDebug(event.target),
+          currentTarget: describeElementForDebug(event.currentTarget),
+          supportsDndKitDrag,
+          isSortableDragSource,
+          isDndKitDragSource,
+          dragging,
+          resizing
+        });
+        childOnMouseDownCapture?.(event);
+      },
+      onClickCapture: (event) => {
+        console.debug("[GridItem] click capture", {
+          i,
+          target: describeElementForDebug(event.target),
+          currentTarget: describeElementForDebug(event.currentTarget),
+          supportsDndKitDrag,
+          isSortableDragSource,
+          isDndKitDragSource,
+          dragging,
+          resizing
+        });
+        childOnClickCapture?.(event);
+      },
+      style: {
+        ...style,
+        ...childStyle,
+        ...createStyle(pos),
+        visibility: showSortableDragSource ? "hidden" : childStyle?.visibility,
+        touchAction: isDraggable || isResizable ? "none" : childStyle?.touchAction
+      }
+    },
+    ...nextChildren
+  );
+}
+function createGridLayoutInteractionSnapshot(dragState, resizeState, dropState) {
+  const isDragging = dragState.activeDrag !== null;
+  const isResizing = resizeState.resizing;
+  const isDropping = dropState.droppingPosition !== null;
+  return {
+    isDragging,
+    isResizing,
+    isDropping,
+    isInteracting: isDragging || isResizing || isDropping,
+    activeDragId: dragState.activeDrag?.i ?? null
+  };
+}
+function useGridLayout(options) {
+  const {
+    layout: propsLayout,
+    cols,
+    preventCollision = false,
+    onLayoutChange,
+    compactor = verticalCompactor,
+    droppingItemId = "__dropping-elem__"
+  } = options;
+  const isDraggingRef = useRef(false);
+  const [layout, setLayoutState] = useState(() => {
+    const corrected = correctBounds(cloneLayout(propsLayout), { cols });
+    return compactor.compact(corrected, cols);
+  });
+  const [dragState, setDragState] = useState({
+    activeDrag: null,
+    oldDragItem: null,
+    oldLayout: null
+  });
+  const [resizeState, setResizeState] = useState({
+    resizing: false,
+    oldResizeItem: null,
+    oldLayout: null
+  });
+  const [dropState, setDropState] = useState({
+    droppingDOMNode: null,
+    droppingPosition: null
+  });
+  const prevLayoutRef = useRef(layout);
+  const setLayout = useCallback(
+    (newLayout) => {
+      const corrected = correctBounds(cloneLayout(newLayout), { cols });
+      const compacted = compactor.compact(corrected, cols);
+      setLayoutState(compacted);
+    },
+    [cols, compactor]
+  );
+  useEffect(() => {
+    if (isDraggingRef.current) {
+      return;
+    }
+    if (!deepEqual(propsLayout, prevLayoutRef.current)) {
+      setLayout(propsLayout);
+    }
+  }, [propsLayout, setLayout]);
+  useEffect(() => {
+    if (!deepEqual(layout, prevLayoutRef.current)) {
+      prevLayoutRef.current = layout;
+      if (!layout.some((item) => item.i === droppingItemId)) {
+        onLayoutChange?.(layout);
+      }
+    }
+  }, [layout, onLayoutChange, droppingItemId]);
+  const onDragStart = useCallback(
+    (itemId, x, y) => {
+      const item = getLayoutItem(layout, itemId);
+      if (!item) {
+        return null;
+      }
+      isDraggingRef.current = true;
+      const placeholder = {
+        ...cloneLayoutItem(item),
+        x,
+        y,
+        static: false,
+        moved: false
+      };
+      setDragState({
+        activeDrag: placeholder,
+        oldDragItem: cloneLayoutItem(item),
+        oldLayout: cloneLayout(layout)
+      });
+      return placeholder;
+    },
+    [layout]
+  );
+  const onDrag = useCallback(
+    (itemId, x, y) => {
+      console.debug("[useGridLayout] onDrag received", { itemId, x, y });
+      const item = getLayoutItem(layout, itemId);
+      if (!item) {
+        console.debug("[useGridLayout] onDrag: item not found", itemId);
+        return;
+      }
+      setDragState((prev) => ({
+        ...prev,
+        activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null
+      }));
+      const newLayout = moveElement(
+        layout,
+        item,
+        x,
+        y,
+        true,
+        preventCollision,
+        compactor.type,
+        cols,
+        compactor.allowOverlap
+      );
+      console.debug("[useGridLayout] onDrag: moveElement computed", { itemId, x, y });
+      const compacted = compactor.compact(newLayout, cols);
+      setLayoutState(compacted);
+      console.debug("[useGridLayout] onDrag: setLayoutState applied", { length: compacted.length });
+    },
+    [layout, cols, compactor, preventCollision]
+  );
+  const onDragStop = useCallback(
+    (itemId, x, y) => {
+      const item = getLayoutItem(layout, itemId);
+      if (!item) {
+        return;
+      }
+      const newLayout = moveElement(
+        layout,
+        item,
+        x,
+        y,
+        true,
+        preventCollision,
+        compactor.type,
+        cols,
+        compactor.allowOverlap
+      );
+      const compacted = compactor.compact(newLayout, cols);
+      isDraggingRef.current = false;
+      setDragState({ activeDrag: null, oldDragItem: null, oldLayout: null });
+      setLayoutState(compacted);
+    },
+    [layout, cols, compactor, preventCollision]
+  );
+  const cancelDrag = useCallback(() => {
+    isDraggingRef.current = false;
+    setDragState((prev) => {
+      if (prev.oldLayout) {
+        const corrected = correctBounds(cloneLayout(prev.oldLayout), { cols });
+        const compacted = compactor.compact(corrected, cols);
+        setLayoutState(compacted);
+      }
+      return { activeDrag: null, oldDragItem: null, oldLayout: null };
+    });
+  }, [cols, compactor]);
+  const onResizeStart = useCallback(
+    (itemId) => {
+      const item = getLayoutItem(layout, itemId);
+      if (!item) {
+        return null;
+      }
+      setResizeState({
+        resizing: true,
+        oldResizeItem: cloneLayoutItem(item),
+        oldLayout: cloneLayout(layout)
+      });
+      return item;
+    },
+    [layout]
+  );
+  const onResize = useCallback(
+    (itemId, w, h, x, y) => {
+      const newLayout = layout.map((item) => {
+        if (item.i !== itemId) {
+          return item;
+        }
+        const updated = {
+          ...item,
+          w,
+          h
+        };
+        if (x !== void 0) {
+          updated.x = x;
+        }
+        if (y !== void 0) {
+          updated.y = y;
+        }
+        return updated;
+      });
+      const corrected = correctBounds(newLayout, { cols });
+      const compacted = compactor.compact(corrected, cols);
+      const activeResizeItem = getLayoutItem(compacted, itemId);
+      setLayoutState(compacted);
+      setDragState((prev) => ({
+        ...prev,
+        activeDrag: activeResizeItem ? cloneLayoutItem(activeResizeItem) : prev.activeDrag
+      }));
+    },
+    [layout, cols, compactor]
+  );
+  const onResizeStop = useCallback(
+    (itemId, w, h, x, y) => {
+      onResize(itemId, w, h, x, y);
+      setResizeState({
+        resizing: false,
+        oldResizeItem: null,
+        oldLayout: null
+      });
+      setDragState({ activeDrag: null, oldDragItem: null, oldLayout: null });
+    },
+    [onResize]
+  );
+  const cancelResize = useCallback(() => {
+    setResizeState((prev) => {
+      if (prev.oldLayout) {
+        const corrected = correctBounds(cloneLayout(prev.oldLayout), { cols });
+        const compacted = compactor.compact(corrected, cols);
+        setLayoutState(compacted);
+      }
+      return {
+        resizing: false,
+        oldResizeItem: null,
+        oldLayout: null
+      };
+    });
+    setDragState({ activeDrag: null, oldDragItem: null, oldLayout: null });
+  }, [cols, compactor]);
+  const onDropDragOver = useCallback(
+    (droppingItem, position) => {
+      const existingItem = getLayoutItem(layout, droppingItem.i);
+      isDraggingRef.current = true;
+      if (!existingItem) {
+        const newLayout = [...layout, droppingItem];
+        const corrected = correctBounds(newLayout, { cols });
+        setLayoutState(corrected);
+      }
+      setDropState({
+        droppingDOMNode: null,
+        droppingPosition: position
+      });
+    },
+    [layout, cols]
+  );
+  const onDropDragLeave = useCallback(() => {
+    const newLayout = layout.filter((item) => item.i !== droppingItemId);
+    setLayout(newLayout);
+    isDraggingRef.current = false;
+    setDragState({ activeDrag: null, oldDragItem: null, oldLayout: null });
+    setResizeState((prev) => ({
+      ...prev,
+      resizing: false
+    }));
+    setDropState({
+      droppingDOMNode: null,
+      droppingPosition: null
+    });
+  }, [layout, droppingItemId, setLayout]);
+  const onDrop = useCallback(
+    (droppingItem) => {
+      const newLayout = layout.map((item) => {
+        if (item.i !== droppingItemId) {
+          return item;
+        }
+        return {
+          ...item,
+          i: droppingItem.i,
+          static: false
+        };
+      });
+      const corrected = correctBounds(newLayout, { cols });
+      const compacted = compactor.compact(corrected, cols);
+      setLayoutState(compacted);
+      isDraggingRef.current = false;
+      setDragState({ activeDrag: null, oldDragItem: null, oldLayout: null });
+      setDropState({
+        droppingDOMNode: null,
+        droppingPosition: null
+      });
+    },
+    [layout, droppingItemId, cols, compactor]
+  );
+  const containerHeight = useMemo(() => bottom(layout), [layout]);
+  const interactionSnapshot = useMemo(
+    () => createGridLayoutInteractionSnapshot(dragState, resizeState, dropState),
+    [dragState, resizeState, dropState]
+  );
+  return {
+    layout,
+    setLayout,
+    dragState,
+    resizeState,
+    dropState,
+    onDragStart,
+    onDrag,
+    onDragStop,
+    cancelDrag,
+    onResizeStart,
+    onResize,
+    onResizeStop,
+    cancelResize,
+    onDropDragOver,
+    onDropDragLeave,
+    onDrop,
+    containerHeight,
+    isInteracting: interactionSnapshot.isInteracting,
+    compactor
+  };
+}
+var noop = () => {
+};
+var layoutClassName = "react-grid-layout";
+var isFirefox = false;
+try {
+  isFirefox = /firefox/i.test(navigator.userAgent);
+} catch {
+}
+function childrenEqual(a, b) {
+  const aArr = React3.Children.toArray(a);
+  const bArr = React3.Children.toArray(b);
+  if (aArr.length !== bArr.length) {
+    return false;
+  }
+  for (let i = 0; i < aArr.length; i++) {
+    const aChild = aArr[i];
+    const bChild = bArr[i];
+    if (aChild?.key !== bChild?.key) {
+      return false;
+    }
+  }
+  return true;
+}
+function synchronizeLayoutWithChildren(initialLayout, children, cols, compactor) {
+  const layout = [];
+  const childKeys = /* @__PURE__ */ new Set();
+  React3.Children.forEach(children, (child) => {
+    if (!React3.isValidElement(child) || child.key === null) {
+      return;
+    }
+    const key = String(child.key);
+    childKeys.add(key);
+    const existingItem = initialLayout.find((l) => l.i === key);
+    if (existingItem) {
+      layout.push(cloneLayoutItem(existingItem));
+      return;
+    }
+    const childProps = child.props;
+    const dataGrid = childProps["data-grid"];
+    if (dataGrid) {
+      layout.push({
+        i: key,
+        x: dataGrid.x ?? 0,
+        y: dataGrid.y ?? 0,
+        w: dataGrid.w ?? 1,
+        h: dataGrid.h ?? 1,
+        minW: dataGrid.minW,
+        maxW: dataGrid.maxW,
+        minH: dataGrid.minH,
+        maxH: dataGrid.maxH,
+        static: dataGrid.static,
+        isDraggable: dataGrid.isDraggable,
+        isResizable: dataGrid.isResizable,
+        resizeHandles: dataGrid.resizeHandles,
+        isBounded: dataGrid.isBounded
+      });
+      return;
+    }
+    layout.push({
+      i: key,
+      x: 0,
+      y: bottom(layout),
+      w: 1,
+      h: 1
+    });
+  });
+  const corrected = correctBounds(layout, { cols });
+  return compactor.compact(corrected, cols);
+}
+function createGridDropPlaceholder(config) {
+  return config.override ?? {
+    i: "__dropping-elem__",
+    x: 0,
+    y: 0,
+    ...config.defaultItem
+  };
+}
+function createGridInteractionState(activeDrag, resizing, droppingPosition) {
+  return {
+    isInteracting: activeDrag !== null || resizing || droppingPosition !== void 0,
+    activeDrag,
+    resizing,
+    droppingPosition
+  };
+}
+function getGridItemDragData(value) {
+  if (!value || typeof value !== "object") {
+    return null;
+  }
+  const kind = value.kind;
+  const itemId = value.itemId;
+  return kind === "drag" && typeof itemId === "string" ? { kind: "drag", itemId } : null;
+}
+function GridLayout(props) {
+  const {
+    children,
+    width,
+    gridConfig: gridConfigProp,
+    dragConfig: dragConfigProp,
+    resizeConfig: resizeConfigProp,
+    dropConfig: dropConfigProp,
+    positionStrategy = defaultPositionStrategy,
+    compactor: compactorProp,
+    constraints = defaultConstraints,
+    layout: propsLayout = [],
+    droppingItem: droppingItemProp,
+    autoSize = true,
+    className = "",
+    style = {},
+    innerRef,
+    onLayoutChange = noop,
+    onDragStart: onDragStartProp = noop,
+    onDrag: onDragProp = noop,
+    onDragStop: onDragStopProp = noop,
+    onResizeStart: onResizeStartProp = noop,
+    onResize: onResizeProp = noop,
+    onResizeStop: onResizeStopProp = noop,
+    onDrop: onDropProp = noop,
+    onDropDragOver: onDropDragOverProp = noop
+  } = props;
+  const gridConfig = useMemo(
+    () => ({ ...defaultGridConfig, ...gridConfigProp }),
+    [gridConfigProp]
+  );
+  const dragConfig = useMemo(
+    () => ({ ...defaultDragConfig, ...dragConfigProp }),
+    [dragConfigProp]
+  );
+  const resizeConfig = useMemo(
+    () => ({ ...defaultResizeConfig, ...resizeConfigProp }),
+    [resizeConfigProp]
+  );
+  const dropConfig = useMemo(
+    () => ({ ...defaultDropConfig, ...dropConfigProp }),
+    [dropConfigProp]
+  );
+  const { cols, rowHeight, maxRows, margin, containerPadding } = gridConfig;
+  const {
+    enabled: isDraggable,
+    bounded: isBounded,
+    handle: draggableHandle,
+    cancel: draggableCancel,
+    threshold: dragThreshold
+  } = dragConfig;
+  const {
+    enabled: isResizable,
+    handles: resizeHandles,
+    handleComponent: resizeHandle
+  } = resizeConfig;
+  const {
+    enabled: isDroppable,
+    defaultItem: defaultDropItem,
+    onDragOver: dropConfigOnDragOver
+  } = dropConfig;
+  const compactor = compactorProp ?? getCompactor("vertical");
+  const compactType = compactor.type;
+  const allowOverlap = compactor.allowOverlap;
+  const preventCollision = compactor.preventCollision ?? false;
+  const droppingItem = useMemo(
+    () => createGridDropPlaceholder({
+      defaultItem: defaultDropItem,
+      override: droppingItemProp
+    }),
+    [droppingItemProp, defaultDropItem]
+  );
+  const useCSSTransforms = positionStrategy.type === "transform";
+  const transformScale = positionStrategy.scale;
+  const effectiveContainerPadding = containerPadding ?? margin;
+  const positionParams = useMemo(
+    () => ({
+      cols,
+      margin,
+      maxRows,
+      rowHeight,
+      containerWidth: width,
+      containerPadding: effectiveContainerPadding
+    }),
+    [cols, margin, maxRows, rowHeight, width, effectiveContainerPadding]
+  );
+  const { stepX, stepY } = useMemo(
+    () => getGridPixelSteps(positionParams),
+    [positionParams]
+  );
+  const synchronizedLayout = useMemo(
+    () => synchronizeLayoutWithChildren(propsLayout, children, cols, compactor),
+    [propsLayout, children, cols, compactor]
+  );
+  const [mounted, setMounted] = useState(false);
+  const [droppingDOMNode, setDroppingDOMNode] = useState(
+    null
+  );
+  const [dragOverlayId, setDragOverlayId] = useState(null);
+  const containerRef = useRef(null);
+  const activeDndDragRef = useRef(null);
+  const setContainerNode = useCallback(
+    (node) => {
+      containerRef.current = node;
+      if (typeof innerRef === "function") {
+        innerRef(node);
+        return;
+      }
+      if (innerRef && "current" in innerRef) {
+        innerRef.current = node;
+      }
+    },
+    [innerRef]
+  );
+  const dndSensors = useMemo(
+    () => [
+      PointerSensor.configure({
+        activationConstraints: [
+          new PointerActivationConstraints.Distance({
+            value: Math.max(3, dragThreshold)
+          })
+        ],
+        preventActivation: (event, source) => {
+          const sourceData = source?.data;
+          if (sourceData?.kind === "resize") return false;
+          const target = event.target instanceof HTMLElement ? event.target : null;
+          return Boolean(
+            target && target.closest(
+              [".react-resizable-handle", draggableCancel].filter(Boolean).join(",")
+            )
+          );
+        }
+      }),
+      KeyboardSensor.configure({
+        offset: {
+          x: stepX,
+          y: stepY
+        }
+      })
+    ],
+    [dragThreshold, draggableCancel, stepX, stepY]
+  );
+  const {
+    layout,
+    setLayout,
+    dragState,
+    resizeState,
+    dropState,
+    onDragStart: beginDragState,
+    onDrag: updateDragState,
+    onDragStop: stopDragState,
+    cancelDrag: cancelDragState,
+    onResizeStart: beginResizeState,
+    onResize: updateResizeState,
+    onResizeStop: stopResizeState,
+    cancelResize: cancelResizeState,
+    onDropDragOver: updateDropPlaceholder,
+    onDropDragLeave: clearDropPlaceholder
+  } = useGridLayout({
+    layout: synchronizedLayout,
+    cols,
+    preventCollision,
+    compactor,
+    droppingItemId: droppingItem.i
+  });
+  const activeDrag = dragState.activeDrag;
+  const resizing = resizeState.resizing;
+  const droppingPosition = dropState.droppingPosition ?? void 0;
+  const interactionState = useMemo(
+    () => createGridInteractionState(activeDrag, resizing, droppingPosition),
+    [activeDrag, resizing, droppingPosition]
+  );
+  const oldDragItemRef = useRef(null);
+  const oldResizeItemRef = useRef(null);
+  const oldLayoutRef = useRef(null);
+  const dragEnterCounterRef = useRef(0);
+  const prevLayoutRef = useRef(layout);
+  const prevPropsLayoutRef = useRef(propsLayout);
+  const prevChildrenRef = useRef(children);
+  const prevCompactTypeRef = useRef(compactType);
+  const layoutRef = useRef(layout);
+  layoutRef.current = layout;
+  const childMap = useMemo(() => {
+    const next = /* @__PURE__ */ new Map();
+    React3.Children.forEach(children, (child) => {
+      if (!React3.isValidElement(child) || child.key === null) {
+        return;
+      }
+      next.set(String(child.key), child);
+    });
+    return next;
+  }, [children]);
+  const createConstraintContext = useCallback(
+    (currentLayout) => ({
+      cols,
+      maxRows,
+      containerWidth: width,
+      containerHeight: containerRef.current?.clientHeight ?? 0,
+      rowHeight,
+      margin,
+      layout: currentLayout
+    }),
+    [cols, maxRows, width, rowHeight, margin]
+  );
+  const getDragEventNativeEvent = useCallback(
+    (event) => event.nativeEvent ?? event.operation.activatorEvent ?? new Event("drag"),
+    []
+  );
+  const getDragSourceElement = useCallback(
+    (source) => {
+      const element = source?.element;
+      return element instanceof HTMLElement ? element : null;
+    },
+    []
+  );
+  const getDraggedGridPosition = useCallback(
+    (session, currentItem, transform) => {
+      const newPosition = {
+        left: session.origin.left + transform.x / transformScale,
+        top: session.origin.top + transform.y / transformScale
+      };
+      const rawPosition = calcXYRaw(
+        positionParams,
+        newPosition.top,
+        newPosition.left
+      );
+      const constrained = applyPositionConstraints(
+        constraints,
+        currentItem,
+        rawPosition.x,
+        rawPosition.y,
+        createConstraintContext(layoutRef.current)
+      );
+      return {
+        x: constrained.x,
+        y: constrained.y,
+        newPosition
+      };
+    },
+    [constraints, createConstraintContext, positionParams, transformScale]
+  );
+  useEffect(() => {
+    setMounted(true);
+    if (!deepEqual(layout, propsLayout)) {
+      onLayoutChange(layout);
+    }
+  }, []);
+  useEffect(() => {
+    if (activeDrag || droppingDOMNode) {
+      return;
+    }
+    const layoutChanged = !deepEqual(propsLayout, prevPropsLayoutRef.current);
+    const childrenChanged = !childrenEqual(children, prevChildrenRef.current);
+    const compactTypeChanged = compactType !== prevCompactTypeRef.current;
+    if (layoutChanged || childrenChanged || compactTypeChanged) {
+      const baseLayout = layoutChanged ? propsLayout : layoutRef.current;
+      const nextLayout = synchronizeLayoutWithChildren(
+        baseLayout,
+        children,
+        cols,
+        compactor
+      );
+      if (!deepEqual(nextLayout, layoutRef.current)) {
+        setLayout(nextLayout);
+      }
+    }
+    prevPropsLayoutRef.current = propsLayout;
+    prevChildrenRef.current = children;
+    prevCompactTypeRef.current = compactType;
+  }, [
+    propsLayout,
+    children,
+    cols,
+    compactType,
+    compactor,
+    activeDrag,
+    droppingDOMNode
+    // 'layout' intentionally omitted: we access it via layoutRef.current to avoid
+    // re-running on every drag-move. 'setLayout' omitted because it only changes
+    // when cols/compactor change, which are already in the deps.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  ]);
+  useEffect(() => {
+    if (!activeDrag && !deepEqual(layout, prevLayoutRef.current)) {
+      prevLayoutRef.current = layout;
+      const publicLayout = layout.filter((l) => l.i !== droppingItem.i);
+      onLayoutChange(publicLayout);
+    }
+  }, [layout, activeDrag, onLayoutChange, droppingItem.i]);
+  const containerHeight = useMemo(() => {
+    if (!autoSize) {
+      return void 0;
+    }
+    const nbRow = bottom(layout);
+    const containerPaddingY = effectiveContainerPadding[1];
+    return nbRow * rowHeight + (nbRow - 1) * margin[1] + containerPaddingY * 2 + "px";
+  }, [autoSize, layout, rowHeight, margin, effectiveContainerPadding]);
+  const onDragStart = useCallback(
+    (i, x, y, data) => {
+      const currentLayout = layoutRef.current;
+      const item = getLayoutItem(currentLayout, i);
+      if (!item) {
+        return;
+      }
+      oldDragItemRef.current = cloneLayoutItem(item);
+      oldLayoutRef.current = currentLayout;
+      beginDragState(i, x, y);
+      onDragStartProp(currentLayout, item, item, null, data.e, data.node);
+    },
+    [beginDragState, onDragStartProp]
+  );
+  const onDrag = useCallback(
+    (i, x, y, data) => {
+      const currentLayout = layoutRef.current;
+      const oldDragItem = oldDragItemRef.current;
+      const item = getLayoutItem(currentLayout, i);
+      if (!item) {
+        return;
+      }
+      const placeholder = {
+        w: item.w,
+        h: item.h,
+        x: item.x,
+        y: item.y,
+        i
+      };
+      const newLayout = moveElement(
+        currentLayout,
+        item,
+        x,
+        y,
+        true,
+        preventCollision,
+        compactType,
+        cols,
+        allowOverlap
+      );
+      onDragProp(newLayout, oldDragItem, item, placeholder, data.e, data.node);
+      updateDragState(i, x, y);
+    },
+    [
+      preventCollision,
+      compactType,
+      cols,
+      allowOverlap,
+      onDragProp,
+      updateDragState
+    ]
+  );
+  const onDragStop = useCallback(
+    (i, x, y, data) => {
+      const currentLayout = layoutRef.current;
+      const oldDragItem = oldDragItemRef.current;
+      const item = getLayoutItem(currentLayout, i);
+      if (!item) {
+        return;
+      }
+      const newLayout = moveElement(
+        currentLayout,
+        item,
+        x,
+        y,
+        true,
+        preventCollision,
+        compactType,
+        cols,
+        allowOverlap
+      );
+      const finalLayout = compactor.compact(newLayout, cols);
+      onDragStopProp(finalLayout, oldDragItem, item, null, data.e, data.node);
+      oldDragItemRef.current = null;
+      oldLayoutRef.current = null;
+      stopDragState(i, x, y);
+    },
+    [
+      preventCollision,
+      compactType,
+      cols,
+      allowOverlap,
+      compactor,
+      onDragStopProp,
+      stopDragState
+    ]
+  );
+  const handleDndKitDragStart = useCallback(
+    (event) => {
+      console.debug("[GridLayout] handleDndKitDragStart", {
+        sourceData: event.operation.source?.data,
+        activatorEvent: event.operation.activatorEvent,
+        nativeEvent: event.nativeEvent
+      });
+      const dragData = getGridItemDragData(event.operation.source?.data);
+      if (!dragData) {
+        console.debug("[GridLayout] handleDndKitDragStart: no dragData");
+        return;
+      }
+      const currentLayout = layoutRef.current;
+      const item = getLayoutItem(currentLayout, dragData.itemId);
+      if (!item) {
+        console.debug("[GridLayout] handleDndKitDragStart: item not found", dragData);
+        return;
+      }
+      const originPosition = calcGridItemPosition(
+        positionParams,
+        item.x,
+        item.y,
+        item.w,
+        item.h
+      );
+      const node = getDragSourceElement(event.operation.source);
+      const activatorEvent = event.operation.activatorEvent;
+      const initialPointer = activatorEvent ? { x: activatorEvent.clientX ?? 0, y: activatorEvent.clientY ?? 0 } : { x: 0, y: 0 };
+      activeDndDragRef.current = {
+        itemId: item.i,
+        node,
+        initialPointer,
+        origin: {
+          left: originPosition.left,
+          top: originPosition.top,
+          x: item.x,
+          y: item.y,
+          w: item.w,
+          h: item.h
+        }
+      };
+      console.debug("[GridLayout] activeDndDragRef set", activeDndDragRef.current);
+      setDragOverlayId(item.i);
+      console.debug("[GridLayout] invoking onDragStart callback", item.i, item.x, item.y);
+      onDragStart(item.i, item.x, item.y, {
+        e: getDragEventNativeEvent(event),
+        node: node ?? containerRef.current ?? document.body,
+        newPosition: {
+          left: originPosition.left,
+          top: originPosition.top
+        }
+      });
+    },
+    [getDragEventNativeEvent, getDragSourceElement, onDragStart, positionParams]
+  );
+  const handleDndKitDragMove = useCallback(
+    (event) => {
+      console.debug("[GridLayout] handleDndKitDragMove", {
+        transform: event.operation.transform,
+        to: event.to,
+        sourceData: event.operation.source?.data
+      });
+      const session = activeDndDragRef.current;
+      const dragData = getGridItemDragData(event.operation.source?.data);
+      if (!session || !dragData || session.itemId !== dragData.itemId) {
+        console.debug("[GridLayout] handleDndKitDragMove: session mismatch", { session, dragData });
+        return;
+      }
+      const currentLayout = layoutRef.current;
+      const item = getLayoutItem(currentLayout, session.itemId);
+      if (!item) {
+        console.debug("[GridLayout] handleDndKitDragMove: item not found", session.itemId);
+        return;
+      }
+      const transform = event.to ? {
+        x: event.to.x - session.initialPointer.x,
+        y: event.to.y - session.initialPointer.y
+      } : event.operation.transform;
+      const { x, y, newPosition } = getDraggedGridPosition(
+        session,
+        item,
+        transform
+      );
+      const node = getDragSourceElement(event.operation.source) ?? session.node;
+      console.debug("[GridLayout] invoking onDrag", session.itemId, { x, y, newPosition });
+      onDrag(session.itemId, x, y, {
+        e: getDragEventNativeEvent(event),
+        node: node ?? containerRef.current ?? document.body,
+        newPosition
+      });
+    },
+    [getDragEventNativeEvent, getDragSourceElement, getDraggedGridPosition, onDrag]
+  );
+  const handleDndKitDragEnd = useCallback(
+    (event) => {
+      console.debug("[GridLayout] handleDndKitDragEnd", {
+        canceled: event.canceled,
+        transform: event.operation.transform,
+        sourceData: event.operation.source?.data
+      });
+      const session = activeDndDragRef.current;
+      const dragData = getGridItemDragData(event.operation.source?.data);
+      activeDndDragRef.current = null;
+      setDragOverlayId(null);
+      if (!session || !dragData || session.itemId !== dragData.itemId) {
+        console.debug("[GridLayout] handleDndKitDragEnd: session or dragData mismatch", { session, dragData });
+        return;
+      }
+      if (event.canceled) {
+        console.debug("[GridLayout] drag canceled for", session.itemId);
+        oldDragItemRef.current = null;
+        oldLayoutRef.current = null;
+        cancelDragState();
+        return;
+      }
+      const currentLayout = layoutRef.current;
+      const item = getLayoutItem(currentLayout, session.itemId);
+      if (!item) {
+        console.debug("[GridLayout] handleDndKitDragEnd: item not found", session.itemId);
+        cancelDragState();
+        return;
+      }
+      const nativePointerEnd = event.nativeEvent instanceof PointerEvent ? event.nativeEvent : null;
+      const endTransform = nativePointerEnd ? {
+        x: nativePointerEnd.clientX - session.initialPointer.x,
+        y: nativePointerEnd.clientY - session.initialPointer.y
+      } : event.operation.transform;
+      const { x, y, newPosition } = getDraggedGridPosition(
+        session,
+        item,
+        endTransform
+      );
+      const node = getDragSourceElement(event.operation.source) ?? session.node;
+      console.debug("[GridLayout] invoking onDragStop", session.itemId, { x, y, newPosition });
+      onDragStop(session.itemId, x, y, {
+        e: getDragEventNativeEvent(event),
+        node: node ?? containerRef.current ?? document.body,
+        newPosition
+      });
+    },
+    [
+      cancelDragState,
+      getDragEventNativeEvent,
+      getDragSourceElement,
+      getDraggedGridPosition,
+      onDragStop
+    ]
+  );
+  const onResizeStart = useCallback(
+    (i, _w, _h, data) => {
+      const currentLayout = layoutRef.current;
+      const item = getLayoutItem(currentLayout, i);
+      if (!item) {
+        return;
+      }
+      oldResizeItemRef.current = cloneLayoutItem(item);
+      oldLayoutRef.current = currentLayout;
+      beginResizeState(i);
+      onResizeStartProp(currentLayout, item, item, null, data.e, data.node);
+    },
+    [beginResizeState, onResizeStartProp]
+  );
+  const onResize = useCallback(
+    (i, w, h, data) => {
+      const currentLayout = layoutRef.current;
+      const oldResizeItem = oldResizeItemRef.current;
+      const { handle } = data;
+      let shouldMoveItem = false;
+      let newX;
+      let newY;
+      const [newLayout, item] = withLayoutItem(currentLayout, i, (layoutItem) => {
+        newX = layoutItem.x;
+        newY = layoutItem.y;
+        if (["sw", "w", "nw", "n", "ne"].includes(handle)) {
+          if (["sw", "nw", "w"].includes(handle)) {
+            newX = layoutItem.x + (layoutItem.w - w);
+            w = layoutItem.x !== newX && newX < 0 ? layoutItem.w : w;
+            newX = newX < 0 ? 0 : newX;
+          }
+          if (["ne", "n", "nw"].includes(handle)) {
+            newY = layoutItem.y + (layoutItem.h - h);
+            h = layoutItem.y !== newY && newY < 0 ? layoutItem.h : h;
+            newY = newY < 0 ? 0 : newY;
+          }
+          shouldMoveItem = true;
+        }
+        if (preventCollision && !allowOverlap) {
+          const collisions = getAllCollisions(currentLayout, {
+            ...layoutItem,
+            w,
+            h,
+            x: newX ?? layoutItem.x,
+            y: newY ?? layoutItem.y
+          }).filter((layoutEntry) => layoutEntry.i !== layoutItem.i);
+          if (collisions.length > 0) {
+            newY = layoutItem.y;
+            h = layoutItem.h;
+            newX = layoutItem.x;
+            w = layoutItem.w;
+            shouldMoveItem = false;
+          }
+        }
+        layoutItem.w = w;
+        layoutItem.h = h;
+        return layoutItem;
+      });
+      if (!item) {
+        return;
+      }
+      let finalLayout = newLayout;
+      if (shouldMoveItem && newX !== void 0 && newY !== void 0) {
+        finalLayout = moveElement(
+          newLayout,
+          item,
+          newX,
+          newY,
+          true,
+          preventCollision,
+          compactType,
+          cols,
+          allowOverlap
+        );
+      }
+      const placeholder = {
+        w: item.w,
+        h: item.h,
+        x: item.x,
+        y: item.y,
+        i,
+        static: true
+      };
+      onResizeProp(
+        finalLayout,
+        oldResizeItem,
+        item,
+        placeholder,
+        data.e,
+        data.node
+      );
+      updateResizeState(i, w, h, newX, newY);
+    },
+    [
+      preventCollision,
+      allowOverlap,
+      compactType,
+      cols,
+      onResizeProp,
+      updateResizeState
+    ]
+  );
+  const onResizeStop = useCallback(
+    (i, w, h, data) => {
+      const currentLayout = layoutRef.current;
+      const oldResizeItem = oldResizeItemRef.current;
+      const item = getLayoutItem(currentLayout, i);
+      const finalLayout = compactor.compact(currentLayout, cols);
+      onResizeStopProp(
+        finalLayout,
+        oldResizeItem,
+        item ?? null,
+        null,
+        data.e,
+        data.node
+      );
+      oldResizeItemRef.current = null;
+      oldLayoutRef.current = null;
+      stopResizeState(
+        i,
+        item?.w ?? w,
+        item?.h ?? h,
+        item?.x,
+        item?.y
+      );
+    },
+    [cols, compactor, onResizeStopProp, stopResizeState]
+  );
+  const onResizeCancel = useCallback(
+    (_i) => {
+      oldResizeItemRef.current = null;
+      oldLayoutRef.current = null;
+      cancelResizeState();
+    },
+    [cancelResizeState]
+  );
+  const removeDroppingPlaceholder = useCallback(() => {
+    clearDropPlaceholder();
+    setDroppingDOMNode(null);
+  }, [clearDropPlaceholder]);
+  const handleDragOver = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (isFirefox && !e.nativeEvent.target?.classList.contains(layoutClassName)) {
+        return false;
+      }
+      const rawResult = dropConfigOnDragOver ? dropConfigOnDragOver(e.nativeEvent) : onDropDragOverProp(e);
+      if (rawResult === false) {
+        if (droppingDOMNode) {
+          removeDroppingPlaceholder();
+        }
+        return false;
+      }
+      const safeDragOverResult = rawResult ?? {};
+      const {
+        dragOffsetX = 0,
+        dragOffsetY = 0,
+        ...onDragOverResult
+      } = safeDragOverResult;
+      const finalDroppingItem = { ...droppingItem, ...onDragOverResult };
+      const gridRect = e.currentTarget.getBoundingClientRect();
+      const positionParams2 = {
+        cols,
+        margin,
+        maxRows,
+        rowHeight,
+        containerWidth: width,
+        containerPadding: effectiveContainerPadding
+      };
+      const actualColWidth = calcGridColWidth(positionParams2);
+      const itemPixelWidth = calcGridItemWHPx(
+        finalDroppingItem.w,
+        actualColWidth,
+        margin[0]
+      );
+      const itemPixelHeight = calcGridItemWHPx(
+        finalDroppingItem.h,
+        rowHeight,
+        margin[1]
+      );
+      const itemCenterOffsetX = itemPixelWidth / 2;
+      const itemCenterOffsetY = itemPixelHeight / 2;
+      const rawGridX = e.clientX - gridRect.left + dragOffsetX - itemCenterOffsetX;
+      const rawGridY = e.clientY - gridRect.top + dragOffsetY - itemCenterOffsetY;
+      const clampedGridX = Math.max(0, rawGridX);
+      const clampedGridY = Math.max(0, rawGridY);
+      const newDroppingPosition = {
+        left: clampedGridX / transformScale,
+        top: clampedGridY / transformScale,
+        e: e.nativeEvent
+      };
+      if (!droppingDOMNode) {
+        const calculatedPosition = calcXY(
+          positionParams2,
+          clampedGridY,
+          clampedGridX,
+          finalDroppingItem.w,
+          finalDroppingItem.h
+        );
+        setDroppingDOMNode(/* @__PURE__ */ jsx("div", {}, finalDroppingItem.i));
+        updateDropPlaceholder(
+          {
+            ...finalDroppingItem,
+            x: calculatedPosition.x,
+            y: calculatedPosition.y,
+            static: false,
+            isDraggable: true
+          },
+          newDroppingPosition
+        );
+        return;
+      }
+      if (!droppingPosition || droppingPosition.left !== newDroppingPosition.left || droppingPosition.top !== newDroppingPosition.top) {
+        updateDropPlaceholder(finalDroppingItem, newDroppingPosition);
+      }
+    },
+    [
+      dropConfigOnDragOver,
+      onDropDragOverProp,
+      droppingDOMNode,
+      removeDroppingPlaceholder,
+      droppingItem,
+      cols,
+      margin,
+      maxRows,
+      rowHeight,
+      width,
+      effectiveContainerPadding,
+      transformScale,
+      droppingPosition,
+      updateDropPlaceholder
+    ]
+  );
+  const handleDragLeave = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragEnterCounterRef.current--;
+      if (dragEnterCounterRef.current < 0) {
+        dragEnterCounterRef.current = 0;
+      }
+      if (dragEnterCounterRef.current === 0) {
+        removeDroppingPlaceholder();
+      }
+    },
+    [removeDroppingPlaceholder]
+  );
+  const handleDragEnter = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    dragEnterCounterRef.current++;
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const currentLayout = layoutRef.current;
+      const item = currentLayout.find((l) => l.i === droppingItem.i);
+      dragEnterCounterRef.current = 0;
+      removeDroppingPlaceholder();
+      onDropProp(currentLayout, item, e.nativeEvent);
+    },
+    [droppingItem.i, removeDroppingPlaceholder, onDropProp]
+  );
+  const processGridItem = useCallback(
+    (child, isDroppingItem) => {
+      if (!child || !child.key) {
+        return null;
+      }
+      const layoutItem = getLayoutItem(layout, String(child.key));
+      if (!layoutItem) {
+        return null;
+      }
+      const draggable = typeof layoutItem.isDraggable === "boolean" ? layoutItem.isDraggable : !layoutItem.static && isDraggable;
+      const resizable = typeof layoutItem.isResizable === "boolean" ? layoutItem.isResizable : !layoutItem.static && isResizable;
+      const resizeHandlesOptions = layoutItem.resizeHandles || [...resizeHandles];
+      const bounded = draggable && isBounded && layoutItem.isBounded !== false;
+      const resizeHandleElement = resizeHandle;
+      return /* @__PURE__ */ jsx(
+        GridItem,
+        {
+          containerWidth: width,
+          cols,
+          margin,
+          containerPadding: effectiveContainerPadding,
+          maxRows,
+          rowHeight,
+          cancel: draggableCancel,
+          handle: draggableHandle,
+          onDragStart: isDroppingItem ? void 0 : onDragStart,
+          onDrag: isDroppingItem ? void 0 : onDrag,
+          onDragStop: isDroppingItem ? void 0 : onDragStop,
+          onResizeStart,
+          onResize,
+          onResizeStop,
+          onResizeCancel,
+          isDraggable: draggable,
+          isResizable: resizable,
+          isBounded: bounded,
+          enableSortable: !isDroppingItem,
+          useCSSTransforms: useCSSTransforms && mounted,
+          usePercentages: !mounted,
+          transformScale,
+          positionStrategy,
+          dragThreshold,
+          w: layoutItem.w,
+          h: layoutItem.h,
+          x: layoutItem.x,
+          y: layoutItem.y,
+          i: layoutItem.i,
+          minH: layoutItem.minH,
+          minW: layoutItem.minW,
+          maxH: layoutItem.maxH,
+          maxW: layoutItem.maxW,
+          static: layoutItem.static,
+          isDndKitDragSource: !isDroppingItem && dragOverlayId === layoutItem.i,
+          droppingPosition: isDroppingItem ? interactionState.droppingPosition : void 0,
+          resizeHandles: resizeHandlesOptions,
+          resizeHandle: resizeHandleElement,
+          constraints,
+          layoutItem,
+          layout,
+          children: child
+        },
+        layoutItem.i
+      );
+    },
+    [
+      layout,
+      width,
+      cols,
+      margin,
+      effectiveContainerPadding,
+      maxRows,
+      rowHeight,
+      draggableCancel,
+      draggableHandle,
+      onDragStart,
+      onDrag,
+      onDragStop,
+      onResizeStart,
+      onResize,
+      onResizeStop,
+      isDraggable,
+      isResizable,
+      isBounded,
+      useCSSTransforms,
+      mounted,
+      transformScale,
+      positionStrategy,
+      dragThreshold,
+      dragOverlayId,
+      interactionState.droppingPosition,
+      resizeHandles,
+      resizeHandle,
+      constraints
+    ]
+  );
+  const renderPlaceholder = () => {
+    if (!interactionState.isInteracting || !interactionState.activeDrag) {
+      return null;
+    }
+    const placeholderId = `__rgl-interaction-placeholder__${interactionState.activeDrag.i}`;
+    return /* @__PURE__ */ jsx(
+      GridItem,
+      {
+        w: interactionState.activeDrag.w,
+        h: interactionState.activeDrag.h,
+        x: interactionState.activeDrag.x,
+        y: interactionState.activeDrag.y,
+        i: placeholderId,
+        className: `react-grid-placeholder ${interactionState.resizing ? "placeholder-resizing" : ""}`,
+        containerWidth: width,
+        cols,
+        margin,
+        containerPadding: effectiveContainerPadding,
+        maxRows,
+        rowHeight,
+        isDraggable: false,
+        isResizable: false,
+        isBounded: false,
+        onResizeCancel,
+        enableSortable: false,
+        useCSSTransforms,
+        transformScale,
+        constraints,
+        layout,
+        children: /* @__PURE__ */ jsx("div", {})
+      },
+      placeholderId
+    );
+  };
+  const renderDragOverlay = useCallback(() => {
+    if (!dragOverlayId) {
+      return null;
+    }
+    const child = childMap.get(dragOverlayId);
+    const session = activeDndDragRef.current;
+    if (!child || !session) {
+      return null;
+    }
+    const childProps = child.props;
+    const childClassName = childProps["className"];
+    const childStyle = childProps["style"];
+    const size = calcGridItemPosition(
+      positionParams,
+      session.origin.x,
+      session.origin.y,
+      session.origin.w,
+      session.origin.h
+    );
+    return React3.cloneElement(child, {
+      className: clsx(
+        "react-grid-item",
+        "react-draggable",
+        "react-draggable-dragging",
+        childClassName
+      ),
+      style: {
+        ...childStyle,
+        width: size.width,
+        height: size.height,
+        touchAction: "none"
+      }
+    });
+  }, [childMap, dragOverlayId, positionParams]);
+  const mergedClassName = clsx(layoutClassName, className);
+  const mergedStyle = {
+    height: containerHeight,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    DragDropProvider,
+    {
+      sensors: dndSensors,
+      onDragStart: handleDndKitDragStart,
+      onDragMove: handleDndKitDragMove,
+      onDragEnd: handleDndKitDragEnd,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: setContainerNode,
+            className: mergedClassName,
+            style: mergedStyle,
+            onDrop: isDroppable ? handleDrop : void 0,
+            onDragLeave: isDroppable ? handleDragLeave : void 0,
+            onDragEnter: isDroppable ? handleDragEnter : void 0,
+            onDragOver: isDroppable ? handleDragOver : void 0,
+            children: [
+              React3.Children.map(children, (child) => {
+                if (!React3.isValidElement(child)) {
+                  return null;
+                }
+                return processGridItem(child);
+              }),
+              isDroppable && droppingDOMNode && processGridItem(droppingDOMNode, true),
+              renderPlaceholder()
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(DragOverlay, { disabled: !dragOverlayId, dropAnimation: null, children: renderDragOverlay() })
+      ]
+    }
+  );
+}
+var DEFAULT_BREAKPOINTS = {
+  lg: 1200,
+  md: 996,
+  sm: 768,
+  xs: 480,
+  xxs: 0
+};
+var DEFAULT_COLS = {
+  lg: 12,
+  md: 10,
+  sm: 6,
+  xs: 4,
+  xxs: 2
+};
+function cloneResponsiveLayouts(layouts) {
+  const cloned = {};
+  for (const breakpoint of Object.keys(layouts)) {
+    const layout = layouts[breakpoint];
+    if (layout) {
+      cloned[breakpoint] = cloneLayout(layout);
+    }
+  }
+  return cloned;
+}
+function useResponsiveLayout(options) {
+  const {
+    width,
+    breakpoint: breakpointProp,
+    breakpoints = DEFAULT_BREAKPOINTS,
+    cols: colsConfig = DEFAULT_COLS,
+    layouts: propsLayouts = {},
+    compactor = verticalCompactor,
+    onBreakpointChange,
+    onLayoutChange,
+    onWidthChange
+  } = options;
+  const sortedBreakpoints = useMemo(
+    () => sortBreakpoints(breakpoints),
+    [breakpoints]
+  );
+  const initialBreakpoint = useMemo(
+    () => breakpointProp ?? getBreakpointFromWidth(breakpoints, width),
+    []
+  );
+  const [layoutsState, setLayoutsState] = useState(
+    () => cloneResponsiveLayouts(propsLayouts)
+  );
+  const prevWidthRef = useRef(width);
+  const prevBreakpointRef = useRef(initialBreakpoint);
+  const prevBreakpointsRef = useRef(breakpoints);
+  const prevColsRef = useRef(colsConfig);
+  const prevPropsLayoutsRef = useRef(propsLayouts);
+  const prevLayoutsRef = useRef(layoutsState);
+  const layoutsRef = useRef(layoutsState);
+  const currentBreakpoint = breakpointProp ?? getBreakpointFromWidth(breakpoints, width);
+  const currentCols = getColsFromBreakpoint(currentBreakpoint, colsConfig);
+  const propsLayoutsChanged = !deepEqual(propsLayouts, prevPropsLayoutsRef.current);
+  const sourceLayouts = useMemo(
+    () => propsLayoutsChanged ? cloneResponsiveLayouts(propsLayouts) : layoutsState,
+    [propsLayoutsChanged, propsLayouts, layoutsState]
+  );
+  const layout = useMemo(
+    () => findOrGenerateResponsiveLayout(
+      sourceLayouts,
+      breakpoints,
+      currentBreakpoint,
+      prevBreakpointRef.current,
+      currentCols,
+      compactor
+    ),
+    [sourceLayouts, breakpoints, currentBreakpoint, currentCols, compactor]
+  );
+  const effectiveLayouts = useMemo(() => {
+    const currentLayout = sourceLayouts[currentBreakpoint];
+    if (currentLayout && deepEqual(currentLayout, layout)) {
+      return sourceLayouts;
+    }
+    return {
+      ...sourceLayouts,
+      [currentBreakpoint]: cloneLayout(layout)
+    };
+  }, [sourceLayouts, currentBreakpoint, layout]);
+  const setLayoutForBreakpoint = useCallback((breakpoint, layout2) => {
+    setLayoutsState((previousLayouts) => ({
+      ...previousLayouts,
+      [breakpoint]: cloneLayout(layout2)
+    }));
+  }, []);
+  const setLayouts = useCallback((layouts) => {
+    setLayoutsState(cloneResponsiveLayouts(layouts));
+  }, []);
+  useEffect(() => {
+    layoutsRef.current = layoutsState;
+  }, [layoutsState]);
+  useEffect(() => {
+    if (!propsLayoutsChanged) {
+      return;
+    }
+    const nextLayouts = cloneResponsiveLayouts(propsLayouts);
+    setLayoutsState(nextLayouts);
+    layoutsRef.current = nextLayouts;
+    prevPropsLayoutsRef.current = propsLayouts;
+  }, [propsLayoutsChanged, propsLayouts]);
+  useEffect(() => {
+    const widthChanged = width !== prevWidthRef.current;
+    const breakpointChanged = currentBreakpoint !== prevBreakpointRef.current;
+    const breakpointsChanged = !deepEqual(breakpoints, prevBreakpointsRef.current);
+    const colsChanged = !deepEqual(colsConfig, prevColsRef.current);
+    const layoutsChanged = !deepEqual(effectiveLayouts, layoutsRef.current);
+    if (layoutsChanged) {
+      setLayoutsState(effectiveLayouts);
+      layoutsRef.current = effectiveLayouts;
+    }
+    if (widthChanged || breakpointChanged || breakpointsChanged || colsChanged) {
+      onWidthChange?.(width, [10, 10], currentCols, null);
+      if (breakpointChanged || breakpointsChanged || colsChanged) {
+        onBreakpointChange?.(currentBreakpoint, currentCols);
+      }
+    }
+    if (layoutsChanged && !propsLayoutsChanged) {
+      onLayoutChange?.(layout, effectiveLayouts);
+    }
+    prevWidthRef.current = width;
+    prevBreakpointRef.current = currentBreakpoint;
+    prevBreakpointsRef.current = breakpoints;
+    prevColsRef.current = colsConfig;
+    prevLayoutsRef.current = effectiveLayouts;
+    if (!propsLayoutsChanged) {
+      prevPropsLayoutsRef.current = propsLayouts;
+    }
+  }, [
+    width,
+    currentBreakpoint,
+    currentCols,
+    breakpoints,
+    colsConfig,
+    effectiveLayouts,
+    layout,
+    onBreakpointChange,
+    onLayoutChange,
+    onWidthChange,
+    propsLayouts,
+    propsLayoutsChanged
+  ]);
+  return {
+    layout,
+    layouts: effectiveLayouts,
+    breakpoint: currentBreakpoint,
+    cols: currentCols,
+    setLayoutForBreakpoint,
+    setLayouts,
+    sortedBreakpoints
+  };
+}
+var noop2 = () => {
+};
+function synchronizeLayoutWithChildren2(initialLayout, children, cols, compactor) {
+  const layout = [];
+  React3.Children.forEach(children, (child) => {
+    if (!React3.isValidElement(child) || child.key === null) return;
+    const key = String(child.key);
+    const existingItem = initialLayout.find((l) => l.i === key);
+    if (existingItem) {
+      layout.push({
+        ...existingItem,
+        i: key
+      });
+      return;
+    }
+    const childProps = child.props;
+    const dataGrid = childProps["data-grid"];
+    if (dataGrid) {
+      layout.push({
+        i: key,
+        x: dataGrid.x ?? 0,
+        y: dataGrid.y ?? 0,
+        w: dataGrid.w ?? 1,
+        h: dataGrid.h ?? 1,
+        minW: dataGrid.minW,
+        maxW: dataGrid.maxW,
+        minH: dataGrid.minH,
+        maxH: dataGrid.maxH,
+        static: dataGrid.static,
+        isDraggable: dataGrid.isDraggable,
+        isResizable: dataGrid.isResizable,
+        resizeHandles: dataGrid.resizeHandles,
+        isBounded: dataGrid.isBounded
+      });
+      return;
+    }
+    layout.push({
+      i: key,
+      x: 0,
+      y: bottom(layout),
+      w: 1,
+      h: 1
+    });
+  });
+  const corrected = correctBounds(layout, { cols });
+  return compactor.compact(corrected, cols);
+}
+function ResponsiveGridLayout(props) {
+  const {
+    children,
+    width,
+    breakpoint: breakpointProp,
+    breakpoints = DEFAULT_BREAKPOINTS,
+    cols: colsConfig = DEFAULT_COLS,
+    layouts: propsLayouts = {},
+    rowHeight = 150,
+    maxRows = Infinity,
+    margin: marginProp = [10, 10],
+    containerPadding: containerPaddingProp = null,
+    compactor: compactorProp,
+    onBreakpointChange = noop2,
+    onLayoutChange = noop2,
+    onWidthChange = noop2,
+    ...restProps
+  } = props;
+  const compactor = compactorProp ?? getCompactor("vertical");
+  const {
+    layout: responsiveLayout,
+    layouts,
+    breakpoint,
+    cols,
+    setLayouts
+  } = useResponsiveLayout({
+    width,
+    breakpoint: breakpointProp,
+    breakpoints,
+    cols: colsConfig,
+    layouts: propsLayouts,
+    compactor
+  });
+  const prevWidthRef = useRef(width);
+  const prevBreakpointRef = useRef(breakpoint);
+  const prevBreakpointsRef = useRef(breakpoints);
+  const prevColsRef = useRef(colsConfig);
+  const prevCompactTypeRef = useRef(compactor.type);
+  const currentMargin = useMemo(
+    () => getIndentationValue(
+      marginProp,
+      breakpoint
+    ),
+    [marginProp, breakpoint]
+  );
+  const currentContainerPadding = useMemo(() => {
+    if (containerPaddingProp === null) {
+      return null;
+    }
+    return getIndentationValue(
+      containerPaddingProp,
+      breakpoint
+    );
+  }, [containerPaddingProp, breakpoint]);
+  const synchronizedLayout = useMemo(
+    () => synchronizeLayoutWithChildren2(responsiveLayout, children, cols, compactor),
+    [responsiveLayout, children, cols, compactor]
+  );
+  const effectiveLayouts = useMemo(() => {
+    const currentLayout = layouts[breakpoint];
+    if (currentLayout && deepEqual(currentLayout, synchronizedLayout)) {
+      return layouts;
+    }
+    return {
+      ...layouts,
+      [breakpoint]: cloneLayout(synchronizedLayout)
+    };
+  }, [layouts, breakpoint, synchronizedLayout]);
+  useEffect(() => {
+    if (deepEqual(effectiveLayouts, layouts)) {
+      return;
+    }
+    setLayouts(effectiveLayouts);
+  }, [effectiveLayouts, layouts, setLayouts]);
+  useEffect(() => {
+    const widthChanged = width !== prevWidthRef.current;
+    const breakpointChanged = breakpoint !== prevBreakpointRef.current;
+    const breakpointsChanged = !deepEqual(breakpoints, prevBreakpointsRef.current);
+    const colsChanged = !deepEqual(colsConfig, prevColsRef.current);
+    if (widthChanged || breakpointChanged || breakpointsChanged || colsChanged) {
+      if (breakpointChanged || breakpointsChanged || colsChanged) {
+        onBreakpointChange(breakpoint, cols);
+        onLayoutChange(synchronizedLayout, effectiveLayouts);
+      }
+      onWidthChange(width, currentMargin, cols, currentContainerPadding);
+    }
+    prevWidthRef.current = width;
+    prevBreakpointRef.current = breakpoint;
+    prevBreakpointsRef.current = breakpoints;
+    prevColsRef.current = colsConfig;
+  }, [
+    width,
+    breakpoint,
+    cols,
+    breakpoints,
+    colsConfig,
+    currentMargin,
+    currentContainerPadding,
+    effectiveLayouts,
+    synchronizedLayout,
+    onBreakpointChange,
+    onLayoutChange,
+    onWidthChange
+  ]);
+  useEffect(() => {
+    if (compactor.type === prevCompactTypeRef.current) {
+      return;
+    }
+    prevCompactTypeRef.current = compactor.type;
+    onLayoutChange(synchronizedLayout, effectiveLayouts);
+  }, [compactor.type, synchronizedLayout, effectiveLayouts, onLayoutChange]);
+  const handleLayoutChange = useCallback(
+    (layout) => {
+      const nextLayouts = {
+        ...effectiveLayouts,
+        [breakpoint]: cloneLayout(layout)
+      };
+      setLayouts(nextLayouts);
+      onLayoutChange(layout, nextLayouts);
+    },
+    [effectiveLayouts, breakpoint, setLayouts, onLayoutChange]
+  );
+  const gridConfig = useMemo(
+    () => ({
+      cols,
+      rowHeight,
+      maxRows,
+      margin: currentMargin,
+      containerPadding: currentContainerPadding
+    }),
+    [cols, rowHeight, maxRows, currentMargin, currentContainerPadding]
+  );
+  return /* @__PURE__ */ jsx(
+    GridLayout,
+    {
+      ...restProps,
+      width,
+      gridConfig,
+      compactor,
+      onLayoutChange: handleLayoutChange,
+      layout: synchronizedLayout,
+      children
+    }
+  );
+}
+
+export { DEFAULT_BREAKPOINTS, DEFAULT_COLS, GridItem, GridLayout, ResponsiveGridLayout, useGridLayout, useResponsiveLayout };