Types & config

type Layout = LayoutItem[];
 
interface LayoutItem {
  i: string;            // unique id — matches the child's key
  x: number;            // column (0-based)
  y: number;            // row (0-based)
  w: number;            // width in columns
  h: number;            // height in rows
  minW?: number;        // resize limits (columns)
  maxW?: number;
  minH?: number;        // resize limits (rows)
  maxH?: number;
  static?: boolean;     // pinned: never moves/resizes; others flow around it
  isDraggable?: boolean; // per-item override of the grid default
  isResizable?: boolean;
  resizeHandles?: ResizeHandleAxis[]; // per-item handle set
}

interface GridConfig {
  cols: number;                              // default 12
  rowHeight: number;                         // default 150 (px)
  margin: [number, number];                  // default [10, 10] — [x, y] gap
  containerPadding: [number, number] | null; // default null → falls back to margin
  maxRows: number;                           // default Infinity
}

interface DragConfig {
  enabled?: boolean;    // default true
  bounded?: boolean;    // default false — keep within the container
  handle?: string;      // CSS selector for a drag handle
  cancel?: string;      // CSS selector for regions that cancel a drag
  threshold?: number;   // default 3 — px before a drag starts
  snapToGrid?: boolean; // default false — snap the dragged tile itself
}

interface ResizeConfig {
  enabled?: boolean;             // default true
  handles?: ResizeHandleAxis[];  // default ["se"]
}
 
type ResizeHandleAxis = "s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne";

interface DropConfig {
  enabled?: boolean;                          // default false
  defaultItem?: { w: number; h: number };     // default { w: 1, h: 1 }
  accept?: (source: DragSourceInfo) => boolean;
}
 
interface GridDropData {  // carried on the external draggable's data.snapGridDrop
  i?: string;
  w?: number;
  h?: number;
}

interface Compactor {
  type: "vertical" | "horizontal" | "wrap" | null;
  compact(layout: Layout, cols: number): Layout;
  allowOverlap?: boolean;
  preventCollision?: boolean;
}

type Breakpoints = Record<string, number>;       // name → min width (px)
type BreakpointCols = Record<string, number>;     // name → column count
type ResponsiveLayouts = Partial<Record<string, Layout>>; // breakpoint → layout

type GridEventCallback = (
  layout: Layout,
  oldItem: LayoutItem | null,
  newItem: LayoutItem | null,
  placeholder: LayoutItem | null,
  event: Event | null,
  node: HTMLElement | null,
) => void;