react-grid-layout 1.5.3 → 2.0.0

package/dist/chunk-ZCXE6SR5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react/hooks/useContainerWidth.ts","../src/react/hooks/useGridLayout.ts","../src/react/hooks/useResponsiveLayout.ts"],"names":["useRef","useState","useCallback","useEffect","useMemo","layout","deepEqual"],"mappings":"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","file":"chunk-ZCXE6SR5.mjs","sourcesContent":["/**\n * useContainerWidth hook\n *\n * Observes container width using ResizeObserver and provides\n * reactive width updates for responsive layouts.\n */\n\nimport {\n  useState,\n  useEffect,\n  useRef,\n  useCallback,\n  type RefObject\n} from \"react\";\n\nexport interface UseContainerWidthOptions {\n  /**\n   * If true, delays initial render until width is measured.\n   * Useful for SSR or when you need accurate initial measurements.\n   */\n  measureBeforeMount?: boolean;\n\n  /**\n   * Initial width to use before measurement.\n   * Defaults to 1280.\n   */\n  initialWidth?: number;\n}\n\nexport interface UseContainerWidthResult {\n  /**\n   * Current container width in pixels.\n   */\n  width: number;\n\n  /**\n   * Whether the container has been measured at least once.\n   */\n  mounted: boolean;\n\n  /**\n   * Ref to attach to the container element.\n   */\n  containerRef: RefObject<HTMLDivElement | null>;\n\n  /**\n   * Manually trigger a width measurement.\n   * Useful when the container size might change without a resize event.\n   */\n  measureWidth: () => void;\n}\n\n/**\n * Hook to observe and track container width.\n *\n * Replaces the WidthProvider HOC with a more composable approach.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n *   const { width, containerRef, mounted } = useContainerWidth();\n *\n *   return (\n *     <div ref={containerRef}>\n *       {mounted && <GridLayout width={width} {...props} />}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useContainerWidth(\n  options: UseContainerWidthOptions = {}\n): UseContainerWidthResult {\n  const { measureBeforeMount = false, initialWidth = 1280 } = options;\n\n  const [width, setWidth] = useState(initialWidth);\n  const [mounted, setMounted] = useState(!measureBeforeMount);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const observerRef = useRef<ResizeObserver | null>(null);\n\n  const measureWidth = useCallback(() => {\n    const node = containerRef.current;\n    if (node) {\n      const newWidth = node.offsetWidth;\n      setWidth(newWidth);\n      if (!mounted) {\n        setMounted(true);\n      }\n    }\n  }, [mounted]);\n\n  useEffect(() => {\n    const node = containerRef.current;\n    if (!node) return;\n\n    // Initial measurement\n    measureWidth();\n\n    // Set up ResizeObserver\n    if (typeof ResizeObserver !== \"undefined\") {\n      observerRef.current = new ResizeObserver(entries => {\n        const entry = entries[0];\n        if (entry) {\n          // Use contentRect.width for consistent measurements\n          const newWidth = entry.contentRect.width;\n          setWidth(newWidth);\n        }\n      });\n\n      observerRef.current.observe(node);\n    }\n\n    return () => {\n      if (observerRef.current) {\n        observerRef.current.disconnect();\n        observerRef.current = null;\n      }\n    };\n  }, [measureWidth]);\n\n  return {\n    width,\n    mounted,\n    containerRef,\n    measureWidth\n  };\n}\n\nexport default useContainerWidth;\n","/**\n * useGridLayout hook\n *\n * Core hook for managing grid layout state, including drag, resize, and drop operations.\n * This extracts the state management logic from ReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useMemo, useRef, useEffect } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n  Layout,\n  LayoutItem,\n  CompactType,\n  DroppingPosition,\n  Compactor,\n  Mutable\n} from \"../../core/types.js\";\nimport {\n  cloneLayout,\n  cloneLayoutItem,\n  moveElement,\n  correctBounds,\n  bottom,\n  getLayoutItem\n} from \"../../core/layout.js\";\nimport { compact } from \"../../core/compact-compat.js\";\nimport { getCompactor } from \"../../core/compactors.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface DragState {\n  /** Currently dragging item placeholder */\n  activeDrag: LayoutItem | null;\n  /** Original item before drag started */\n  oldDragItem: LayoutItem | null;\n  /** Layout before drag started */\n  oldLayout: Layout | null;\n}\n\nexport interface ResizeState {\n  /** Whether a resize is in progress */\n  resizing: boolean;\n  /** Original item before resize started */\n  oldResizeItem: LayoutItem | null;\n  /** Layout before resize started */\n  oldLayout: Layout | null;\n}\n\nexport interface DropState {\n  /** DOM node for the dropping placeholder */\n  droppingDOMNode: React.ReactElement | null;\n  /** Current drop position */\n  droppingPosition: DroppingPosition | null;\n}\n\nexport interface UseGridLayoutOptions {\n  /** Initial layout */\n  layout: Layout;\n  /** Number of columns */\n  cols: number;\n  /** Compaction type: 'vertical', 'horizontal', or null */\n  compactType?: CompactType;\n  /** Allow items to overlap */\n  allowOverlap?: boolean;\n  /** Prevent collisions when moving items */\n  preventCollision?: boolean;\n  /** Called when layout changes */\n  onLayoutChange?: (layout: Layout) => void;\n}\n\nexport interface UseGridLayoutResult {\n  /** Current layout */\n  layout: Layout;\n  /** Set layout directly */\n  setLayout: (layout: Layout) => void;\n  /** Drag state */\n  dragState: DragState;\n  /** Resize state */\n  resizeState: ResizeState;\n  /** Drop state */\n  dropState: DropState;\n  /** Start dragging an item */\n  onDragStart: (itemId: string, x: number, y: number) => LayoutItem | null;\n  /** Update drag position */\n  onDrag: (itemId: string, x: number, y: number) => void;\n  /** Stop dragging */\n  onDragStop: (itemId: string, x: number, y: number) => void;\n  /** Start resizing an item */\n  onResizeStart: (itemId: string) => LayoutItem | null;\n  /** Update resize dimensions */\n  onResize: (\n    itemId: string,\n    w: number,\n    h: number,\n    x?: number,\n    y?: number\n  ) => void;\n  /** Stop resizing */\n  onResizeStop: (itemId: string, w: number, h: number) => void;\n  /** Start dropping (external drag-in) */\n  onDropDragOver: (\n    droppingItem: LayoutItem,\n    position: DroppingPosition\n  ) => void;\n  /** Update drop position */\n  onDropDragLeave: () => void;\n  /** Complete drop */\n  onDrop: (droppingItem: LayoutItem) => void;\n  /** Container height in rows */\n  containerHeight: number;\n  /** Whether any drag/resize is active */\n  isInteracting: boolean;\n  /** Get the compactor being used */\n  compactor: Compactor;\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing grid layout state.\n *\n * Handles all layout state including drag, resize, and drop operations.\n * Uses immutable updates and provides callbacks for all interactions.\n *\n * @example\n * ```tsx\n * function MyGrid() {\n *   const {\n *     layout,\n *     onDragStart,\n *     onDrag,\n *     onDragStop,\n *     containerHeight\n *   } = useGridLayout({\n *     layout: initialLayout,\n *     cols: 12,\n *     compactType: 'vertical'\n *   });\n *\n *   return (\n *     <div style={{ height: containerHeight }}>\n *       {layout.map(item => (\n *         <GridItem\n *           key={item.i}\n *           {...item}\n *           onDragStart={() => onDragStart(item.i, item.x, item.y)}\n *         />\n *       ))}\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useGridLayout(\n  options: UseGridLayoutOptions\n): UseGridLayoutResult {\n  const {\n    layout: propsLayout,\n    cols,\n    compactType = \"vertical\",\n    allowOverlap = false,\n    preventCollision = false,\n    onLayoutChange\n  } = options;\n\n  // Get the appropriate compactor\n  const compactor = useMemo(\n    () => getCompactor(compactType, allowOverlap),\n    [compactType, allowOverlap]\n  );\n\n  // Track if we're currently dragging to block prop updates\n  const isDraggingRef = useRef(false);\n\n  // Initialize layout with compaction\n  const [layout, setLayoutState] = useState<Layout>(() => {\n    const corrected = correctBounds(cloneLayout(propsLayout), { cols });\n    return compact(corrected, compactType, cols, allowOverlap);\n  });\n\n  // Drag state\n  const [dragState, setDragState] = useState<DragState>({\n    activeDrag: null,\n    oldDragItem: null,\n    oldLayout: null\n  });\n\n  // Resize state\n  const [resizeState, setResizeState] = useState<ResizeState>({\n    resizing: false,\n    oldResizeItem: null,\n    oldLayout: null\n  });\n\n  // Drop state\n  const [dropState, setDropState] = useState<DropState>({\n    droppingDOMNode: null,\n    droppingPosition: null\n  });\n\n  // Track previous layout for change detection\n  const prevLayoutRef = useRef<Layout>(layout);\n\n  // Set layout with optional compaction\n  const setLayout = useCallback(\n    (newLayout: Layout) => {\n      const corrected = correctBounds(cloneLayout(newLayout), { cols });\n      const compacted = compact(corrected, compactType, cols, allowOverlap);\n      setLayoutState(compacted);\n    },\n    [cols, compactType, allowOverlap]\n  );\n\n  // Sync layout from props when not dragging\n  useEffect(() => {\n    if (isDraggingRef.current) return;\n\n    if (!deepEqual(propsLayout, prevLayoutRef.current)) {\n      setLayout(propsLayout);\n    }\n  }, [propsLayout, setLayout]);\n\n  // Notify layout changes\n  useEffect(() => {\n    if (!deepEqual(layout, prevLayoutRef.current)) {\n      prevLayoutRef.current = layout;\n      onLayoutChange?.(layout);\n    }\n  }, [layout, onLayoutChange]);\n\n  // ============================================================================\n  // Drag Handlers\n  // ============================================================================\n\n  const onDragStart = useCallback(\n    (itemId: string, x: number, y: number): LayoutItem | null => {\n      const item = getLayoutItem(layout, itemId);\n      if (!item) return null;\n\n      isDraggingRef.current = true;\n\n      const placeholder: LayoutItem = {\n        ...cloneLayoutItem(item),\n        x,\n        y,\n        static: false,\n        moved: false\n      };\n\n      setDragState({\n        activeDrag: placeholder,\n        oldDragItem: cloneLayoutItem(item),\n        oldLayout: cloneLayout(layout)\n      });\n\n      return placeholder;\n    },\n    [layout]\n  );\n\n  const onDrag = useCallback(\n    (itemId: string, x: number, y: number) => {\n      const item = getLayoutItem(layout, itemId);\n      if (!item) return;\n\n      // Update placeholder position\n      setDragState(prev => ({\n        ...prev,\n        activeDrag: prev.activeDrag ? { ...prev.activeDrag, x, y } : null\n      }));\n\n      // Move element and update layout\n      const newLayout = moveElement(\n        layout,\n        item,\n        x,\n        y,\n        true, // isUserAction\n        preventCollision,\n        compactType,\n        cols,\n        allowOverlap\n      );\n\n      // Compact layout\n      const compacted = allowOverlap\n        ? newLayout\n        : compact(newLayout, compactType, cols);\n\n      setLayoutState(compacted);\n    },\n    [layout, cols, compactType, preventCollision, allowOverlap]\n  );\n\n  const onDragStop = useCallback(\n    (itemId: string, x: number, y: number) => {\n      const item = getLayoutItem(layout, itemId);\n      if (!item) return;\n\n      // Final move\n      const newLayout = moveElement(\n        layout,\n        item,\n        x,\n        y,\n        true,\n        preventCollision,\n        compactType,\n        cols,\n        allowOverlap\n      );\n\n      // Compact and finalize\n      const compacted = compact(newLayout, compactType, cols, allowOverlap);\n\n      isDraggingRef.current = false;\n\n      setDragState({\n        activeDrag: null,\n        oldDragItem: null,\n        oldLayout: null\n      });\n\n      setLayoutState(compacted);\n    },\n    [layout, cols, compactType, preventCollision, allowOverlap]\n  );\n\n  // ============================================================================\n  // Resize Handlers\n  // ============================================================================\n\n  const onResizeStart = useCallback(\n    (itemId: string): LayoutItem | null => {\n      const item = getLayoutItem(layout, itemId);\n      if (!item) return null;\n\n      setResizeState({\n        resizing: true,\n        oldResizeItem: cloneLayoutItem(item),\n        oldLayout: cloneLayout(layout)\n      });\n\n      return item;\n    },\n    [layout]\n  );\n\n  const onResize = useCallback(\n    (itemId: string, w: number, h: number, x?: number, y?: number) => {\n      const newLayout = layout.map(item => {\n        if (item.i === itemId) {\n          const updated: LayoutItem = {\n            ...item,\n            w,\n            h\n          };\n          if (x !== undefined) (updated as Mutable<LayoutItem>).x = x;\n          if (y !== undefined) (updated as Mutable<LayoutItem>).y = y;\n          return updated;\n        }\n        return item;\n      });\n\n      // Correct bounds and compact\n      const corrected = correctBounds(newLayout, { cols });\n      const compacted = compact(corrected, compactType, cols, allowOverlap);\n\n      setLayoutState(compacted);\n    },\n    [layout, cols, compactType, allowOverlap]\n  );\n\n  const onResizeStop = useCallback(\n    (itemId: string, w: number, h: number) => {\n      // Apply final resize\n      onResize(itemId, w, h);\n\n      setResizeState({\n        resizing: false,\n        oldResizeItem: null,\n        oldLayout: null\n      });\n    },\n    [onResize]\n  );\n\n  // ============================================================================\n  // Drop Handlers\n  // ============================================================================\n\n  const onDropDragOver = useCallback(\n    (droppingItem: LayoutItem, position: DroppingPosition) => {\n      // Check if item already exists in layout\n      const existingItem = getLayoutItem(layout, droppingItem.i);\n\n      if (!existingItem) {\n        // Add dropping item to layout\n        const newLayout = [...layout, droppingItem];\n        const corrected = correctBounds(newLayout, { cols });\n        const compacted = compact(corrected, compactType, cols, allowOverlap);\n        setLayoutState(compacted);\n      }\n\n      setDropState({\n        droppingDOMNode: null, // Will be set by component\n        droppingPosition: position\n      });\n    },\n    [layout, cols, compactType, allowOverlap]\n  );\n\n  const onDropDragLeave = useCallback(() => {\n    // Remove dropping placeholder from layout\n    const newLayout = layout.filter(item => item.i !== \"__dropping-elem__\");\n    setLayoutState(newLayout);\n\n    setDropState({\n      droppingDOMNode: null,\n      droppingPosition: null\n    });\n  }, [layout]);\n\n  const onDrop = useCallback(\n    (droppingItem: LayoutItem) => {\n      // Replace placeholder with actual item\n      const newLayout = layout.map(item => {\n        if (item.i === \"__dropping-elem__\") {\n          return {\n            ...item,\n            i: droppingItem.i,\n            static: false\n          };\n        }\n        return item;\n      });\n\n      const corrected = correctBounds(newLayout, { cols });\n      const compacted = compact(corrected, compactType, cols, allowOverlap);\n      setLayoutState(compacted);\n\n      setDropState({\n        droppingDOMNode: null,\n        droppingPosition: null\n      });\n    },\n    [layout, cols, compactType, allowOverlap]\n  );\n\n  // ============================================================================\n  // Computed Values\n  // ============================================================================\n\n  const containerHeight = useMemo(() => bottom(layout), [layout]);\n\n  const isInteracting =\n    dragState.activeDrag !== null ||\n    resizeState.resizing ||\n    dropState.droppingPosition !== null;\n\n  return {\n    layout,\n    setLayout,\n    dragState,\n    resizeState,\n    dropState,\n    onDragStart,\n    onDrag,\n    onDragStop,\n    onResizeStart,\n    onResize,\n    onResizeStop,\n    onDropDragOver,\n    onDropDragLeave,\n    onDrop,\n    containerHeight,\n    isInteracting,\n    compactor\n  };\n}\n\nexport default useGridLayout;\n","/**\n * useResponsiveLayout hook\n *\n * Manages responsive breakpoints and layout generation for different screen sizes.\n * Extracts state management from ResponsiveReactGridLayout into a reusable hook.\n */\n\nimport { useState, useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { deepEqual } from \"fast-equals\";\nimport type {\n  Layout,\n  Breakpoint,\n  Breakpoints,\n  ResponsiveLayouts,\n  CompactType\n} from \"../../core/types.js\";\nimport { cloneLayout } from \"../../core/layout.js\";\nimport {\n  getBreakpointFromWidth,\n  getColsFromBreakpoint,\n  findOrGenerateResponsiveLayout,\n  sortBreakpoints\n} from \"../../core/responsive.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/** Default breakpoint names */\nexport type DefaultBreakpoints = \"lg\" | \"md\" | \"sm\" | \"xs\" | \"xxs\";\n\n/** Default breakpoint widths */\nexport const DEFAULT_BREAKPOINTS: Breakpoints<DefaultBreakpoints> = {\n  lg: 1200,\n  md: 996,\n  sm: 768,\n  xs: 480,\n  xxs: 0\n};\n\n/** Default column counts per breakpoint */\nexport const DEFAULT_COLS: Breakpoints<DefaultBreakpoints> = {\n  lg: 12,\n  md: 10,\n  sm: 6,\n  xs: 4,\n  xxs: 2\n};\n\nexport interface UseResponsiveLayoutOptions<\n  B extends Breakpoint = DefaultBreakpoints\n> {\n  /** Current container width */\n  width: number;\n  /** Breakpoint definitions (name → min-width) */\n  breakpoints?: Breakpoints<B>;\n  /** Column counts per breakpoint */\n  cols?: Breakpoints<B>;\n  /** Layouts for each breakpoint */\n  layouts?: ResponsiveLayouts<B>;\n  /** Compaction type */\n  compactType?: CompactType;\n  /** Called when breakpoint changes */\n  onBreakpointChange?: (newBreakpoint: B, cols: number) => void;\n  /** Called when layout changes */\n  onLayoutChange?: (layout: Layout, layouts: ResponsiveLayouts<B>) => void;\n  /** Called when width changes */\n  onWidthChange?: (\n    width: number,\n    margin: readonly [number, number],\n    cols: number,\n    containerPadding: readonly [number, number] | null\n  ) => void;\n}\n\nexport interface UseResponsiveLayoutResult<\n  B extends Breakpoint = DefaultBreakpoints\n> {\n  /** Current layout for the active breakpoint */\n  layout: Layout;\n  /** All layouts by breakpoint */\n  layouts: ResponsiveLayouts<B>;\n  /** Current active breakpoint */\n  breakpoint: B;\n  /** Column count for the current breakpoint */\n  cols: number;\n  /** Update layouts for a specific breakpoint */\n  setLayoutForBreakpoint: (breakpoint: B, layout: Layout) => void;\n  /** Update all layouts */\n  setLayouts: (layouts: ResponsiveLayouts<B>) => void;\n  /** Sorted array of breakpoint names (smallest to largest) */\n  sortedBreakpoints: B[];\n}\n\n// ============================================================================\n// Hook Implementation\n// ============================================================================\n\n/**\n * Hook for managing responsive grid layouts.\n *\n * Automatically selects the appropriate layout based on container width\n * and generates layouts for new breakpoints from existing ones.\n *\n * @example\n * ```tsx\n * function MyResponsiveGrid() {\n *   const { width, containerRef } = useContainerWidth();\n *   const { layout, breakpoint, cols } = useResponsiveLayout({\n *     width,\n *     layouts: {\n *       lg: [...],\n *       md: [...],\n *       sm: [...]\n *     }\n *   });\n *\n *   return (\n *     <div ref={containerRef}>\n *       <GridLayout\n *         width={width}\n *         cols={cols}\n *         layout={layout}\n *       />\n *     </div>\n *   );\n * }\n * ```\n */\nexport function useResponsiveLayout<B extends Breakpoint = DefaultBreakpoints>(\n  options: UseResponsiveLayoutOptions<B>\n): UseResponsiveLayoutResult<B> {\n  const {\n    width,\n    breakpoints = DEFAULT_BREAKPOINTS as unknown as Breakpoints<B>,\n    cols: colsConfig = DEFAULT_COLS as unknown as Breakpoints<B>,\n    layouts: propsLayouts = {} as ResponsiveLayouts<B>,\n    compactType = \"vertical\",\n    onBreakpointChange,\n    onLayoutChange,\n    onWidthChange\n  } = options;\n\n  // Sorted breakpoints for consistent ordering\n  const sortedBreakpoints = useMemo(\n    () => sortBreakpoints(breakpoints),\n    [breakpoints]\n  );\n\n  // Calculate initial breakpoint and cols\n  const initialBreakpoint = useMemo(\n    () => getBreakpointFromWidth(breakpoints, width),\n    // Only calculate on mount, not on width changes\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    []\n  );\n\n  const initialCols = useMemo(\n    () => getColsFromBreakpoint(initialBreakpoint, colsConfig),\n    [initialBreakpoint, colsConfig]\n  );\n\n  // State\n  const [breakpoint, setBreakpoint] = useState<B>(initialBreakpoint);\n  const [cols, setCols] = useState<number>(initialCols);\n  const [layouts, setLayoutsState] = useState<ResponsiveLayouts<B>>(() => {\n    // Clone initial layouts\n    const cloned = {} as ResponsiveLayouts<B>;\n    for (const bp of sortedBreakpoints) {\n      const layout = propsLayouts[bp];\n      if (layout) {\n        (cloned as Record<B, Layout>)[bp] = cloneLayout(layout);\n      }\n    }\n    return cloned;\n  });\n\n  // Track previous values for change detection\n  const prevWidthRef = useRef(width);\n  const prevBreakpointRef = useRef(breakpoint);\n  const prevLayoutsRef = useRef(layouts);\n\n  // Current layout for the active breakpoint\n  const layout = useMemo(() => {\n    return findOrGenerateResponsiveLayout(\n      layouts,\n      breakpoints,\n      breakpoint,\n      prevBreakpointRef.current,\n      cols,\n      compactType\n    );\n  }, [layouts, breakpoints, breakpoint, cols, compactType]);\n\n  // Set layout for a specific breakpoint\n  const setLayoutForBreakpoint = useCallback((bp: B, newLayout: Layout) => {\n    setLayoutsState((prev: ResponsiveLayouts<B>) => ({\n      ...prev,\n      [bp]: cloneLayout(newLayout)\n    }));\n  }, []);\n\n  // Set all layouts\n  const setLayouts = useCallback((newLayouts: ResponsiveLayouts<B>) => {\n    const cloned = {} as ResponsiveLayouts<B>;\n    for (const bp of Object.keys(newLayouts) as B[]) {\n      const layoutForBp = newLayouts[bp];\n      if (layoutForBp) {\n        (cloned as Record<B, Layout>)[bp] = cloneLayout(layoutForBp);\n      }\n    }\n    setLayoutsState(cloned);\n  }, []);\n\n  // Handle width changes\n  useEffect(() => {\n    if (prevWidthRef.current === width) return;\n    prevWidthRef.current = width;\n\n    // Determine new breakpoint\n    const newBreakpoint = getBreakpointFromWidth(breakpoints, width);\n    const newCols = getColsFromBreakpoint(newBreakpoint, colsConfig);\n\n    // Notify width change\n    onWidthChange?.(width, [10, 10], newCols, null);\n\n    // Check if breakpoint changed\n    if (newBreakpoint !== breakpoint) {\n      // Generate layout for new breakpoint\n      const newLayout = findOrGenerateResponsiveLayout(\n        layouts,\n        breakpoints,\n        newBreakpoint,\n        breakpoint,\n        newCols,\n        compactType\n      );\n\n      // Update layouts with the new breakpoint layout\n      const updatedLayouts: ResponsiveLayouts<B> = {\n        ...layouts,\n        [newBreakpoint]: newLayout\n      };\n\n      setLayoutsState(updatedLayouts);\n      setBreakpoint(newBreakpoint);\n      setCols(newCols);\n\n      // Notify breakpoint change\n      onBreakpointChange?.(newBreakpoint, newCols);\n\n      prevBreakpointRef.current = newBreakpoint;\n    }\n  }, [\n    width,\n    breakpoints,\n    colsConfig,\n    breakpoint,\n    layouts,\n    compactType,\n    onBreakpointChange,\n    onWidthChange\n  ]);\n\n  // Sync with prop layouts when they change\n  useEffect(() => {\n    if (!deepEqual(propsLayouts, prevLayoutsRef.current)) {\n      setLayouts(propsLayouts);\n      prevLayoutsRef.current = propsLayouts;\n    }\n  }, [propsLayouts, setLayouts]);\n\n  // Notify layout changes\n  useEffect(() => {\n    if (!deepEqual(layouts, prevLayoutsRef.current)) {\n      prevLayoutsRef.current = layouts;\n      onLayoutChange?.(layout, layouts);\n    }\n  }, [layout, layouts, onLayoutChange]);\n\n  return {\n    layout,\n    layouts,\n    breakpoint,\n    cols,\n    setLayoutForBreakpoint,\n    setLayouts,\n    sortedBreakpoints\n  };\n}\n\nexport default useResponsiveLayout;\n"]}

package/dist/chunk-ZWN22PS2.mjs

@@ -0,0 +1,3 @@
+
+//# sourceMappingURL=chunk-ZWN22PS2.mjs.map
+//# sourceMappingURL=chunk-ZWN22PS2.mjs.map

package/dist/chunk-ZWN22PS2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-ZWN22PS2.mjs"}

package/dist/core.d.mts

@@ -0,0 +1,33 @@
+import { L as Layout, C as CompactType, a as LayoutItem } from './types-Cxf4nHNr.mjs';
+export { A as ArrayElement, B as Breakpoint, n as BreakpointCols, b as Breakpoints, c as Compactor, p as DeepPartial, k as DragConfig, h as DragOverEvent, m as DropConfig, D as DroppingPosition, E as EventCallback, j as GridConfig, G as GridDragEvent, e as GridResizeEvent, M as Mutable, o as OnBreakpointChangeCallback, O as OnLayoutChangeCallback, f as PartialPosition, P as Position, i as PositionStrategy, g as ReactDraggableCallbackData, l as ResizeConfig, d as ResizeHandleAxis, R as ResponsiveLayouts, S as Size, r as defaultDragConfig, t as defaultDropConfig, q as defaultGridConfig, s as defaultResizeConfig } from './types-Cxf4nHNr.mjs';
+export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, j as getIndentationValue, i as sortBreakpoints, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-CJxefsYw.mjs';
+export { z as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, t as compactItemHorizontal, q as compactItemVertical, k as correctBounds, A as createScaledStrategy, B as defaultPositionStrategy, d as getCompactor, g as getLayoutItem, i as getStatics, h as horizontalCompactor, p as horizontalOverlapCompactor, j as modifyLayout, m as moveElement, l as moveElementAwayFromCollision, n as noCompactor, u as perc, x as resizeItemInDirection, r as resolveCompactionCollision, f as setTopLeft, s as setTransform, y as transformStrategy, v as validateLayout, e as verticalCompactor, o as verticalOverlapCompactor, w as withLayoutItem } from './position-BmN1z36J.mjs';
+export { d as GridCellConfig, G as GridCellDimensions, P as PositionParams, h as calcGridCellDimensions, e as calcGridColWidth, c as calcGridItemPosition, f as calcGridItemWHPx, b as calcWH, a as calcXY, g as clamp } from './calculate-CwYDW8na.mjs';
+
+/**
+ * Legacy compaction API - backwards compatibility layer.
+ *
+ * This file implements the exact v1 compaction algorithm for backwards compatibility.
+ * The algorithm matches lib/utils.js compact/compactItem functions exactly.
+ */
+
+/**
+ * Compact a layout by removing gaps between items.
+ *
+ * This is the exact algorithm from lib/utils.js compact function.
+ *
+ * @param layout - Layout to compact
+ * @param compactType - 'vertical', 'horizontal', or null
+ * @param cols - Number of columns in the grid
+ * @param allowOverlap - If true, overlapping is allowed
+ * @returns Compacted layout
+ */
+declare function compact(layout: Layout, compactType: CompactType, cols: number, allowOverlap?: boolean): LayoutItem[];
+/**
+ * Compact a single item within the layout.
+ *
+ * @deprecated Use compact() instead, which handles the full layout.
+ */
+declare function compactItem(compareWith: Layout, l: LayoutItem, compactType: CompactType, cols: number, fullLayout: Layout, allowOverlap: boolean | undefined, maxY: number | undefined): LayoutItem;
+
+export { CompactType, Layout, LayoutItem, compact, compactItem };

package/dist/core.d.ts

@@ -0,0 +1,33 @@
+import { L as Layout, C as CompactType, a as LayoutItem } from './types-Cxf4nHNr.js';
+export { A as ArrayElement, B as Breakpoint, n as BreakpointCols, b as Breakpoints, c as Compactor, p as DeepPartial, k as DragConfig, h as DragOverEvent, m as DropConfig, D as DroppingPosition, E as EventCallback, j as GridConfig, G as GridDragEvent, e as GridResizeEvent, M as Mutable, o as OnBreakpointChangeCallback, O as OnLayoutChangeCallback, f as PartialPosition, P as Position, i as PositionStrategy, g as ReactDraggableCallbackData, l as ResizeConfig, d as ResizeHandleAxis, R as ResponsiveLayouts, S as Size, r as defaultDragConfig, t as defaultDropConfig, q as defaultGridConfig, s as defaultResizeConfig } from './types-Cxf4nHNr.js';
+export { c as collides, h as findOrGenerateResponsiveLayout, a as getAllCollisions, e as getBreakpointFromWidth, f as getColsFromBreakpoint, g as getFirstCollision, j as getIndentationValue, i as sortBreakpoints, s as sortLayoutItems, d as sortLayoutItemsByColRow, b as sortLayoutItemsByRowCol } from './responsive-C4L1ESlm.js';
+export { z as absoluteStrategy, b as bottom, c as cloneLayout, a as cloneLayoutItem, t as compactItemHorizontal, q as compactItemVertical, k as correctBounds, A as createScaledStrategy, B as defaultPositionStrategy, d as getCompactor, g as getLayoutItem, i as getStatics, h as horizontalCompactor, p as horizontalOverlapCompactor, j as modifyLayout, m as moveElement, l as moveElementAwayFromCollision, n as noCompactor, u as perc, x as resizeItemInDirection, r as resolveCompactionCollision, f as setTopLeft, s as setTransform, y as transformStrategy, v as validateLayout, e as verticalCompactor, o as verticalOverlapCompactor, w as withLayoutItem } from './position-Dk2b4ZMS.js';
+export { d as GridCellConfig, G as GridCellDimensions, P as PositionParams, h as calcGridCellDimensions, e as calcGridColWidth, c as calcGridItemPosition, f as calcGridItemWHPx, b as calcWH, a as calcXY, g as clamp } from './calculate-mgLpNJ5O.js';
+
+/**
+ * Legacy compaction API - backwards compatibility layer.
+ *
+ * This file implements the exact v1 compaction algorithm for backwards compatibility.
+ * The algorithm matches lib/utils.js compact/compactItem functions exactly.
+ */
+
+/**
+ * Compact a layout by removing gaps between items.
+ *
+ * This is the exact algorithm from lib/utils.js compact function.
+ *
+ * @param layout - Layout to compact
+ * @param compactType - 'vertical', 'horizontal', or null
+ * @param cols - Number of columns in the grid
+ * @param allowOverlap - If true, overlapping is allowed
+ * @returns Compacted layout
+ */
+declare function compact(layout: Layout, compactType: CompactType, cols: number, allowOverlap?: boolean): LayoutItem[];
+/**
+ * Compact a single item within the layout.
+ *
+ * @deprecated Use compact() instead, which handles the full layout.
+ */
+declare function compactItem(compareWith: Layout, l: LayoutItem, compactType: CompactType, cols: number, fullLayout: Layout, allowOverlap: boolean | undefined, maxY: number | undefined): LayoutItem;
+
+export { CompactType, Layout, LayoutItem, compact, compactItem };

package/dist/core.js

@@ -0,0 +1,218 @@
+'use strict';
+
+require('./chunk-PBQSHIID.js');
+var chunk3WO4SAYB_js = require('./chunk-3WO4SAYB.js');
+var chunkF6NQPYKT_js = require('./chunk-F6NQPYKT.js');
+
+
+
+Object.defineProperty(exports, "absoluteStrategy", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.absoluteStrategy; }
+});
+Object.defineProperty(exports, "bottom", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.bottom; }
+});
+Object.defineProperty(exports, "cloneLayout", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.cloneLayout; }
+});
+Object.defineProperty(exports, "cloneLayoutItem", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.cloneLayoutItem; }
+});
+Object.defineProperty(exports, "collides", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.collides; }
+});
+Object.defineProperty(exports, "compact", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.compact; }
+});
+Object.defineProperty(exports, "compactItem", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.compactItem; }
+});
+Object.defineProperty(exports, "compactItemHorizontal", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.compactItemHorizontal; }
+});
+Object.defineProperty(exports, "compactItemVertical", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.compactItemVertical; }
+});
+Object.defineProperty(exports, "correctBounds", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.correctBounds; }
+});
+Object.defineProperty(exports, "createScaledStrategy", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.createScaledStrategy; }
+});
+Object.defineProperty(exports, "defaultDragConfig", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.defaultDragConfig; }
+});
+Object.defineProperty(exports, "defaultDropConfig", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.defaultDropConfig; }
+});
+Object.defineProperty(exports, "defaultGridConfig", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.defaultGridConfig; }
+});
+Object.defineProperty(exports, "defaultPositionStrategy", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.defaultPositionStrategy; }
+});
+Object.defineProperty(exports, "defaultResizeConfig", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.defaultResizeConfig; }
+});
+Object.defineProperty(exports, "findOrGenerateResponsiveLayout", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.findOrGenerateResponsiveLayout; }
+});
+Object.defineProperty(exports, "getAllCollisions", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getAllCollisions; }
+});
+Object.defineProperty(exports, "getBreakpointFromWidth", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getBreakpointFromWidth; }
+});
+Object.defineProperty(exports, "getColsFromBreakpoint", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getColsFromBreakpoint; }
+});
+Object.defineProperty(exports, "getCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getCompactor; }
+});
+Object.defineProperty(exports, "getFirstCollision", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getFirstCollision; }
+});
+Object.defineProperty(exports, "getIndentationValue", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getIndentationValue; }
+});
+Object.defineProperty(exports, "getLayoutItem", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getLayoutItem; }
+});
+Object.defineProperty(exports, "getStatics", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.getStatics; }
+});
+Object.defineProperty(exports, "horizontalCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.horizontalCompactor; }
+});
+Object.defineProperty(exports, "horizontalOverlapCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.horizontalOverlapCompactor; }
+});
+Object.defineProperty(exports, "modifyLayout", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.modifyLayout; }
+});
+Object.defineProperty(exports, "moveElement", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.moveElement; }
+});
+Object.defineProperty(exports, "moveElementAwayFromCollision", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.moveElementAwayFromCollision; }
+});
+Object.defineProperty(exports, "noCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.noCompactor; }
+});
+Object.defineProperty(exports, "perc", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.perc; }
+});
+Object.defineProperty(exports, "resizeItemInDirection", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.resizeItemInDirection; }
+});
+Object.defineProperty(exports, "resolveCompactionCollision", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.resolveCompactionCollision; }
+});
+Object.defineProperty(exports, "setTopLeft", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.setTopLeft; }
+});
+Object.defineProperty(exports, "setTransform", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.setTransform; }
+});
+Object.defineProperty(exports, "sortBreakpoints", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.sortBreakpoints; }
+});
+Object.defineProperty(exports, "sortLayoutItems", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.sortLayoutItems; }
+});
+Object.defineProperty(exports, "sortLayoutItemsByColRow", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.sortLayoutItemsByColRow; }
+});
+Object.defineProperty(exports, "sortLayoutItemsByRowCol", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.sortLayoutItemsByRowCol; }
+});
+Object.defineProperty(exports, "transformStrategy", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.transformStrategy; }
+});
+Object.defineProperty(exports, "validateLayout", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.validateLayout; }
+});
+Object.defineProperty(exports, "verticalCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.verticalCompactor; }
+});
+Object.defineProperty(exports, "verticalOverlapCompactor", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.verticalOverlapCompactor; }
+});
+Object.defineProperty(exports, "withLayoutItem", {
+  enumerable: true,
+  get: function () { return chunk3WO4SAYB_js.withLayoutItem; }
+});
+Object.defineProperty(exports, "calcGridCellDimensions", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.calcGridCellDimensions; }
+});
+Object.defineProperty(exports, "calcGridColWidth", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.calcGridColWidth; }
+});
+Object.defineProperty(exports, "calcGridItemPosition", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.calcGridItemPosition; }
+});
+Object.defineProperty(exports, "calcGridItemWHPx", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.calcGridItemWHPx; }
+});
+Object.defineProperty(exports, "calcWH", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.calcWH; }
+});
+Object.defineProperty(exports, "calcXY", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.calcXY; }
+});
+Object.defineProperty(exports, "clamp", {
+  enumerable: true,
+  get: function () { return chunkF6NQPYKT_js.clamp; }
+});
+//# sourceMappingURL=core.js.map
+//# sourceMappingURL=core.js.map

package/dist/core.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"core.js"}

package/dist/core.mjs

@@ -0,0 +1,5 @@
+import './chunk-ZWN22PS2.mjs';
+export { absoluteStrategy, bottom, cloneLayout, cloneLayoutItem, collides, compact, compactItem, compactItemHorizontal, compactItemVertical, correctBounds, createScaledStrategy, defaultDragConfig, defaultDropConfig, defaultGridConfig, defaultPositionStrategy, defaultResizeConfig, findOrGenerateResponsiveLayout, getAllCollisions, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, getFirstCollision, getIndentationValue, getLayoutItem, getStatics, horizontalCompactor, horizontalOverlapCompactor, modifyLayout, moveElement, moveElementAwayFromCollision, noCompactor, perc, resizeItemInDirection, resolveCompactionCollision, setTopLeft, setTransform, sortBreakpoints, sortLayoutItems, sortLayoutItemsByColRow, sortLayoutItemsByRowCol, transformStrategy, validateLayout, verticalCompactor, verticalOverlapCompactor, withLayoutItem } from './chunk-4HNUMWQK.mjs';
+export { calcGridCellDimensions, calcGridColWidth, calcGridItemPosition, calcGridItemWHPx, calcWH, calcXY, clamp } from './chunk-2KUHNJXF.mjs';
+//# sourceMappingURL=core.mjs.map
+//# sourceMappingURL=core.mjs.map

package/dist/core.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"core.mjs"}

package/dist/extras.d.mts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { d as GridCellConfig } from './calculate-CwYDW8na.mjs';
+import './types-Cxf4nHNr.mjs';
+
+/**
+ * GridBackground component
+ *
+ * Renders an SVG grid background that aligns with GridLayout cells.
+ * Use this to visualize the grid structure behind your layout.
+ */
+
+interface GridBackgroundProps extends GridCellConfig {
+    /**
+     * Number of rows to display. If "auto", calculates based on height.
+     * @default 10
+     */
+    rows?: number | "auto";
+    /**
+     * Height of the background in pixels. Used when rows="auto".
+     */
+    height?: number;
+    /**
+     * Color of the grid cell backgrounds.
+     * @default "#e0e0e0"
+     */
+    color?: string;
+    /**
+     * Border radius of grid cells in pixels.
+     * @default 4
+     */
+    borderRadius?: number;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Additional inline styles.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * SVG grid background component.
+ *
+ * Renders a visual grid that aligns with GridLayout cells. Position this
+ * behind your GridLayout using CSS positioning.
+ *
+ * @example
+ * ```tsx
+ * import { GridBackground } from 'react-grid-layout/extras';
+ *
+ * function MyGrid() {
+ *   const { width, containerRef, mounted } = useContainerWidth();
+ *
+ *   return (
+ *     <div ref={containerRef} style={{ position: 'relative' }}>
+ *       {mounted && (
+ *         <>
+ *           <GridBackground
+ *             width={width}
+ *             cols={12}
+ *             rowHeight={30}
+ *             margin={[10, 10]}
+ *             rows={10}
+ *             color="#f0f0f0"
+ *           />
+ *           <GridLayout width={width} gridConfig={{ cols: 12, rowHeight: 30 }}>
+ *             {children}
+ *           </GridLayout>
+ *         </>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function GridBackground({ width, cols, rowHeight, margin, containerPadding, rows, height, color, borderRadius, className, style }: GridBackgroundProps): React.ReactElement;
+
+export { GridBackground, type GridBackgroundProps };

package/dist/extras.d.ts

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { d as GridCellConfig } from './calculate-mgLpNJ5O.js';
+import './types-Cxf4nHNr.js';
+
+/**
+ * GridBackground component
+ *
+ * Renders an SVG grid background that aligns with GridLayout cells.
+ * Use this to visualize the grid structure behind your layout.
+ */
+
+interface GridBackgroundProps extends GridCellConfig {
+    /**
+     * Number of rows to display. If "auto", calculates based on height.
+     * @default 10
+     */
+    rows?: number | "auto";
+    /**
+     * Height of the background in pixels. Used when rows="auto".
+     */
+    height?: number;
+    /**
+     * Color of the grid cell backgrounds.
+     * @default "#e0e0e0"
+     */
+    color?: string;
+    /**
+     * Border radius of grid cells in pixels.
+     * @default 4
+     */
+    borderRadius?: number;
+    /**
+     * Additional CSS class name.
+     */
+    className?: string;
+    /**
+     * Additional inline styles.
+     */
+    style?: React.CSSProperties;
+}
+/**
+ * SVG grid background component.
+ *
+ * Renders a visual grid that aligns with GridLayout cells. Position this
+ * behind your GridLayout using CSS positioning.
+ *
+ * @example
+ * ```tsx
+ * import { GridBackground } from 'react-grid-layout/extras';
+ *
+ * function MyGrid() {
+ *   const { width, containerRef, mounted } = useContainerWidth();
+ *
+ *   return (
+ *     <div ref={containerRef} style={{ position: 'relative' }}>
+ *       {mounted && (
+ *         <>
+ *           <GridBackground
+ *             width={width}
+ *             cols={12}
+ *             rowHeight={30}
+ *             margin={[10, 10]}
+ *             rows={10}
+ *             color="#f0f0f0"
+ *           />
+ *           <GridLayout width={width} gridConfig={{ cols: 12, rowHeight: 30 }}>
+ *             {children}
+ *           </GridLayout>
+ *         </>
+ *       )}
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function GridBackground({ width, cols, rowHeight, margin, containerPadding, rows, height, color, borderRadius, className, style }: GridBackgroundProps): React.ReactElement;
+
+export { GridBackground, type GridBackgroundProps };

package/dist/extras.js

@@ -0,0 +1,91 @@
+'use strict';
+
+var chunkF6NQPYKT_js = require('./chunk-F6NQPYKT.js');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function GridBackground({
+  width,
+  cols,
+  rowHeight,
+  margin = [10, 10],
+  containerPadding,
+  rows = 10,
+  height,
+  color = "#e0e0e0",
+  borderRadius = 4,
+  className,
+  style
+}) {
+  const dims = react.useMemo(
+    () => chunkF6NQPYKT_js.calcGridCellDimensions({
+      width,
+      cols,
+      rowHeight,
+      margin,
+      containerPadding
+    }),
+    [width, cols, rowHeight, margin, containerPadding]
+  );
+  const rowCount = react.useMemo(() => {
+    if (rows !== "auto") return rows;
+    if (height) {
+      const padding = containerPadding ?? margin;
+      return Math.ceil(
+        (height - padding[1] * 2 + margin[1]) / (rowHeight + margin[1])
+      );
+    }
+    return 10;
+  }, [rows, height, rowHeight, margin, containerPadding]);
+  const totalHeight = react.useMemo(() => {
+    const padding = containerPadding ?? margin;
+    return padding[1] * 2 + rowCount * rowHeight + (rowCount - 1) * margin[1];
+  }, [rowCount, rowHeight, margin, containerPadding]);
+  const cells = react.useMemo(() => {
+    const rects = [];
+    const { cellWidth, cellHeight, offsetX, offsetY, gapX, gapY } = dims;
+    for (let row = 0; row < rowCount; row++) {
+      for (let col = 0; col < cols; col++) {
+        const x = offsetX + col * (cellWidth + gapX);
+        const y = offsetY + row * (cellHeight + gapY);
+        rects.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x,
+              y,
+              width: cellWidth,
+              height: cellHeight,
+              rx: borderRadius,
+              ry: borderRadius,
+              fill: color
+            },
+            `${row}-${col}`
+          )
+        );
+      }
+    }
+    return rects;
+  }, [dims, rowCount, cols, borderRadius, color]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      className,
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width,
+        height: totalHeight,
+        pointerEvents: "none",
+        ...style
+      },
+      "aria-hidden": "true",
+      children: cells
+    }
+  );
+}
+
+exports.GridBackground = GridBackground;
+//# sourceMappingURL=extras.js.map
+//# sourceMappingURL=extras.js.map