@snapgridjs/react 0.1.0

package/dist/index.mjs

@@ -0,0 +1,999 @@
+import { DragDropProvider, useDragDropMonitor, useDraggable, useDraggable as useDraggable$1, useDroppable, useDroppable as useDroppable$1 } from "@dnd-kit/react";
+import { beginDrag, beginReceive, beginResize, bottom, calcGridItemPosition, calcXY, commitLayout, defaultGridConfig, dragResize, dragTo, findOrGenerateResponsiveLayout, getBreakpointFromWidth, getColsFromBreakpoint, getCompactor, horizontalCompactor, noCompactor, nudge, removeItemWithCompactor, toPositionParams, verticalCompactor, verticalCompactor as verticalCompactor$1 } from "@snapgridjs/core";
+import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Feedback, Feedback as Feedback$1, KeyboardSensor, KeyboardSensor as KeyboardSensor$1, PointerActivationConstraints, PointerSensor, PointerSensor as PointerSensor$1 } from "@dnd-kit/dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/context.ts
+const GridContext = createContext(null);
+/** Read the grid runtime; throws if used outside a `SnapGridProvider`. */
+function useGridRuntime() {
+	const runtime = useContext(GridContext);
+	if (!runtime) throw new Error("snapgrid: hooks and components must be rendered inside a <SnapGridProvider> (or <GridLayout>).");
+	return runtime;
+}
+//#endregion
+//#region src/dragFlow.ts
+/**
+* Pure decision helpers for the drag interaction, extracted from
+* {@link SnapGridProvider} so the tricky bits — grab-offset cell mapping and the
+* cross-grid drop lifecycle — are unit-testable without a DOM or dnd-kit.
+*/
+/**
+* Map a client-space pointer to a grid cell, accounting for where *within* the
+* dragged tile the pointer grabbed it. Subtracting the grab offset means the
+* tile's top-left (not the cursor) maps to the cell, so a received tile's
+* placeholder aligns with the floating overlay instead of jumping its corner to
+* the cursor. External drops pass `{ x: 0, y: 0 }` (no meaningful grab point).
+*/
+function receiveCell(pointer, gridRect, grabOffset, w, h, pp) {
+	return calcXY(pp, pointer.y - grabOffset.y - gridRect.top, pointer.x - grabOffset.x - gridRect.left, w, h);
+}
+/** Pure classification of a drag end. See {@link DropAction}. */
+function classifyDrop(s) {
+	if (s.canceled) {
+		if (s.kind === "resize") return "cancel-resize";
+		if (s.ownsItem) return "cancel-move";
+		return "noop";
+	}
+	if (s.kind === "resize") return "commit-resize";
+	if (s.ownsItem && s.hasData) {
+		if (s.dest === s.myId && s.kind === "move") return "commit-in-grid";
+		if (s.dest) return "remove-source";
+		return "revert";
+	}
+	if (s.dest === s.myId && s.kind === "move") return s.hasData ? "commit-dest" : "external-drop";
+	return "noop";
+}
+//#endregion
+//#region src/grouping.ts
+function createGridRegistry() {
+	const grids = /* @__PURE__ */ new Map();
+	let grabOffset = null;
+	return {
+		register(id, getRect) {
+			grids.set(id, getRect);
+			return () => {
+				if (grids.get(id) === getRect) grids.delete(id);
+			};
+		},
+		gridAt(point) {
+			for (const [id, getRect] of grids) {
+				const r = getRect();
+				if (r && point.x >= r.left && point.x <= r.right && point.y >= r.top && point.y <= r.bottom) return id;
+			}
+			return null;
+		},
+		setGrabOffset(offset) {
+			grabOffset = offset;
+		},
+		getGrabOffset() {
+			return grabOffset ?? {
+				x: 0,
+				y: 0
+			};
+		}
+	};
+}
+/** Non-null when grids are wrapped in a `<SnapGridGroup>` (shared cross-grid registry). */
+const SnapGridGroupContext = createContext(null);
+//#endregion
+//#region src/hooks/dndShared.ts
+/** Marker attribute placed on resize-handle elements. */
+const RESIZE_HANDLE_ATTR = "data-snapgrid-resize-handle";
+const NO_FEEDBACK = [Feedback$1.configure({ feedback: "none" })];
+/**
+* Whether a pointer-down on `target` should NOT start an item move. Pure and
+* exported for testing. Honors three rules, in order:
+*  - never start a move from a resize handle;
+*  - never start from a region matching `dragConfig.cancel`;
+*  - if `dragConfig.handle` is set, only start from within it.
+*/
+function shouldPreventItemDrag(target, cfg) {
+	if (!(target instanceof Element)) return false;
+	if (target.closest(`[data-snapgrid-resize-handle]`)) return true;
+	if (cfg?.cancel && target.closest(cfg.cancel)) return true;
+	if (cfg?.handle && !target.closest(cfg.handle)) return true;
+	return false;
+}
+/**
+* Sensors for item (move) draggables, built from the drag config: a distance
+* activation threshold (so clicks don't start drags) plus handle/cancel/resize
+* gating, with the keyboard sensor kept for accessibility.
+*/
+function buildItemSensors(threshold, getDragConfig) {
+	return [PointerSensor$1.configure({
+		activationConstraints: () => threshold > 0 ? [new PointerActivationConstraints.Distance({ value: threshold })] : void 0,
+		preventActivation: (event) => shouldPreventItemDrag(event.target, getDragConfig())
+	}), KeyboardSensor$1];
+}
+//#endregion
+//#region src/SnapGridProvider.tsx
+const DEFAULT_HANDLES = ["se"];
+/** Read snapgrid's payload off a dnd-kit drag source. */
+function dragData(event) {
+	return (event.operation.source?.data)?.snapGrid;
+}
+/** Size/id spec for an external (non-grid) draggable the grid may accept, or null. */
+function externalDropSpec(source, dropConfig) {
+	if (!dropConfig?.enabled || !source) return null;
+	const data = source.data;
+	if (data?.snapGrid) return null;
+	if (dropConfig.accept && !dropConfig.accept(source)) return null;
+	const spec = data?.snapGridDrop;
+	return {
+		i: spec?.i,
+		w: spec?.w ?? dropConfig.defaultItem?.w ?? 1,
+		h: spec?.h ?? dropConfig.defaultItem?.h ?? 1
+	};
+}
+/**
+* Headless provider for a grid. Standalone grids get their own isolated dnd-kit
+* provider; grids inside a {@link SnapGridGroup} share that group's provider and
+* registry so tiles can be dragged between them. Owns this grid's drag/resize
+* session; the consumer owns all markup/styling.
+*/
+function SnapGridProvider(props) {
+	const groupRegistry = useContext(SnapGridGroupContext);
+	const runtime = /* @__PURE__ */ jsx(SnapGridRuntime, {
+		groupRegistry,
+		...props
+	});
+	return groupRegistry ? runtime : /* @__PURE__ */ jsx(DragDropProvider, { children: runtime });
+}
+function SnapGridRuntime(props) {
+	const autoId = useId();
+	const containerId = props.id ?? autoId;
+	const gridConfig = useMemo(() => ({
+		...defaultGridConfig,
+		...props.gridConfig
+	}), [props.gridConfig]);
+	const positionParams = useMemo(() => toPositionParams(gridConfig, props.width), [gridConfig, props.width]);
+	const compactor = props.compactor ?? verticalCompactor$1;
+	const [session, setSession] = useState(null);
+	const [overlay, setOverlay] = useState(null);
+	const propsRef = useRef(props);
+	propsRef.current = props;
+	const ppRef = useRef(positionParams);
+	ppRef.current = positionParams;
+	const gridRef = useRef(gridConfig);
+	gridRef.current = gridConfig;
+	const compactorRef = useRef(compactor);
+	compactorRef.current = compactor;
+	const containerIdRef = useRef(containerId);
+	containerIdRef.current = containerId;
+	const sessionRef = useRef(null);
+	const containerElRef = useRef(null);
+	const keyboardRef = useRef(false);
+	const dropSpecRef = useRef(null);
+	const dropCounterRef = useRef(0);
+	const localRegistryRef = useRef(null);
+	if (!localRegistryRef.current) localRegistryRef.current = createGridRegistry();
+	const registry = props.groupRegistry ?? localRegistryRef.current;
+	const registryRef = useRef(registry);
+	registryRef.current = registry;
+	useEffect(() => registry.register(containerId, () => containerElRef.current?.getBoundingClientRect() ?? null), [registry, containerId]);
+	const committedById = useMemo(() => new Map(props.layout.map((it) => [it.i, it])), [props.layout]);
+	const committedByIdRef = useRef(committedById);
+	committedByIdRef.current = committedById;
+	const setSessionBoth = useCallback((next) => {
+		sessionRef.current = next;
+		setSession(next);
+	}, []);
+	const setContainerElement = useCallback((element) => {
+		containerElRef.current = element;
+	}, []);
+	/**
+	* Is THIS grid the one under `p` (client coords)? Resolved through the
+	* registry (not a self-only rect test) so the move-phase preview and the
+	* drop-phase commit — which both go through `gridAt` — always agree on which
+	* grid wins when grids overlap (`gridAt` returns a single first match).
+	*/
+	const overMe = useCallback((p) => registryRef.current.gridAt(p) === containerIdRef.current, []);
+	/** Map a client-space pointer to a grid cell within THIS grid (see {@link receiveCell}). */
+	const cellFromPointer = useCallback((p, item) => {
+		const el = containerElRef.current;
+		if (!el) return null;
+		return receiveCell(p, el.getBoundingClientRect(), registryRef.current.getGrabOffset(), item.w, item.h, ppRef.current);
+	}, []);
+	const ctx = useCallback(() => ({
+		positionParams: ppRef.current,
+		compactor: compactorRef.current,
+		cols: gridRef.current.cols
+	}), []);
+	const handleDragStart = useCallback((event) => {
+		keyboardRef.current = false;
+		const data = dragData(event);
+		if (!data) {
+			const spec = externalDropSpec(event.operation.source, propsRef.current.dropConfig);
+			if (spec) {
+				dropCounterRef.current += 1;
+				dropSpecRef.current = {
+					i: spec.i ?? `${containerIdRef.current}-dropped-${dropCounterRef.current}`,
+					w: spec.w,
+					h: spec.h
+				};
+			} else dropSpecRef.current = null;
+			return;
+		}
+		dropSpecRef.current = null;
+		const layout = propsRef.current.layout;
+		const item = layout.find((it) => it.i === data.itemId);
+		const p = event.operation.position.current;
+		const pointer = {
+			x: p.x,
+			y: p.y
+		};
+		if (data.kind === "resize") {
+			if (!item) return;
+			setSessionBoth(beginResize(layout, {
+				item,
+				rect: calcGridItemPosition(ppRef.current, item.x, item.y, item.w, item.h),
+				pointer
+			}, data.handle));
+			propsRef.current.onResizeStart?.(layout, item, item, item, event.operation.activatorEvent, null);
+			return;
+		}
+		if (item) {
+			keyboardRef.current = event.operation.activatorEvent instanceof KeyboardEvent;
+			const rect = calcGridItemPosition(ppRef.current, item.x, item.y, item.w, item.h);
+			setSessionBoth(beginDrag(layout, {
+				item,
+				left: rect.left,
+				top: rect.top,
+				pointer
+			}));
+			const cr = (event.operation.source?.element)?.getBoundingClientRect();
+			if (cr) {
+				registryRef.current.setGrabOffset({
+					x: pointer.x - cr.left,
+					y: pointer.y - cr.top
+				});
+				setOverlay({
+					item,
+					left: cr.left,
+					top: cr.top,
+					width: cr.width,
+					height: cr.height
+				});
+			}
+			propsRef.current.onDragStart?.(layout, item, item, item, event.operation.activatorEvent, null);
+		}
+	}, [setSessionBoth]);
+	const handleDragMove = useCallback((event) => {
+		if (keyboardRef.current) return;
+		const p = event.operation.position.current;
+		const pointer = {
+			x: p.x,
+			y: p.y
+		};
+		const current = sessionRef.current;
+		if (current?.kind === "resize") {
+			const next = dragResize(current, pointer, ctx());
+			setSessionBoth(next);
+			propsRef.current.onResize?.(next.preview, next.anchor.item, next.placeholder, next.placeholder, event.operation.activatorEvent, null);
+			return;
+		}
+		const data = dragData(event);
+		if (!data) {
+			const spec = dropSpecRef.current;
+			if (spec && overMe(pointer)) {
+				const foreign = {
+					i: spec.i,
+					x: 0,
+					y: 0,
+					w: spec.w,
+					h: spec.h
+				};
+				const committed = propsRef.current.layout;
+				const cell = cellFromPointer(pointer, foreign) ?? {
+					x: 0,
+					y: 0
+				};
+				setSessionBoth(beginReceive(committed, foreign, cell.x, cell.y, pointer, ctx()));
+			} else if (sessionRef.current) setSessionBoth(null);
+			return;
+		}
+		if (data.kind !== "move") return;
+		const here = overMe(pointer);
+		if (committedByIdRef.current.has(data.itemId)) {
+			const source = current?.kind === "move" ? current : null;
+			if (!source) return;
+			let next;
+			if (here) next = dragTo(source, pointer, ctx());
+			else next = {
+				...source,
+				preview: source.committed,
+				placeholder: null
+			};
+			setSessionBoth(next);
+			const grab = registryRef.current.getGrabOffset();
+			let oLeft = pointer.x - grab.x;
+			let oTop = pointer.y - grab.y;
+			if (propsRef.current.dragConfig?.snapToGrid && here && next.placeholder) {
+				const rect = containerElRef.current?.getBoundingClientRect();
+				if (rect) {
+					const cell = calcGridItemPosition(ppRef.current, next.placeholder.x, next.placeholder.y, next.placeholder.w, next.placeholder.h);
+					oLeft = rect.left + cell.left;
+					oTop = rect.top + cell.top;
+				}
+			}
+			setOverlay((o) => o ? {
+				...o,
+				left: oLeft,
+				top: oTop
+			} : o);
+			propsRef.current.onDrag?.(next.preview, next.anchor.item, next.placeholder, next.placeholder, event.operation.activatorEvent, null);
+			return;
+		}
+		if (here) {
+			const foreign = data.item;
+			const committed = propsRef.current.layout;
+			const cell = cellFromPointer(pointer, foreign) ?? {
+				x: 0,
+				y: 0
+			};
+			setSessionBoth(beginReceive(committed, foreign, cell.x, cell.y, pointer, ctx()));
+		} else if (sessionRef.current) setSessionBoth(null);
+	}, [
+		setSessionBoth,
+		overMe,
+		cellFromPointer,
+		ctx
+	]);
+	const handleDragEnd = useCallback((event) => {
+		const current = sessionRef.current;
+		const data = dragData(event);
+		const p = event.operation.position.current;
+		const myId = containerIdRef.current;
+		const dest = keyboardRef.current ? myId : registryRef.current.gridAt({
+			x: p.x,
+			y: p.y
+		});
+		const ownsItem = data ? committedByIdRef.current.has(data.itemId) : false;
+		setOverlay(null);
+		registryRef.current.setGrabOffset(null);
+		const native = event.nativeEvent ?? null;
+		const p2 = propsRef.current;
+		const action = classifyDrop({
+			kind: current?.kind ?? null,
+			canceled: event.canceled,
+			ownsItem,
+			hasData: !!data,
+			dest,
+			myId
+		});
+		switch (action) {
+			case "cancel-resize":
+				p2.onResizeStop?.(p2.layout, current?.anchor.item ?? null, null, null, native, null);
+				break;
+			case "cancel-move":
+				p2.onDragStop?.(p2.layout, current?.anchor.item ?? null, null, null, native, null);
+				break;
+			case "commit-resize":
+				if (current) {
+					p2.onLayoutChange?.(commitLayout(current));
+					p2.onResizeStop?.(current.preview, current.anchor.item, current.placeholder, current.placeholder, native, null);
+				}
+				break;
+			case "commit-in-grid":
+			case "remove-source":
+			case "revert":
+				if (action === "commit-in-grid" && current) p2.onLayoutChange?.(commitLayout(current));
+				else if (action === "remove-source" && data) {
+					const { compactor: c, cols } = ctx();
+					p2.onLayoutChange?.(removeItemWithCompactor(p2.layout, data.itemId, {
+						compactor: c,
+						cols
+					}));
+				}
+				p2.onDragStop?.(current?.preview ?? p2.layout, current?.anchor.item ?? null, current?.placeholder ?? null, current?.placeholder ?? null, native, null);
+				break;
+			case "commit-dest":
+				if (current) p2.onLayoutChange?.(commitLayout(current));
+				break;
+			case "external-drop":
+				if (current) {
+					const committed = commitLayout(current);
+					const dropped = committed.find((it) => it.i === current.activeId);
+					if (dropped) p2.onDrop?.(committed, dropped, native);
+				}
+				break;
+		}
+		dropSpecRef.current = null;
+		keyboardRef.current = false;
+		setSessionBoth(null);
+	}, [setSessionBoth, ctx]);
+	useEffect(() => {
+		const STEP = {
+			ArrowLeft: [-1, 0],
+			ArrowRight: [1, 0],
+			ArrowUp: [0, -1],
+			ArrowDown: [0, 1]
+		};
+		const onKeyDown = (e) => {
+			if (!keyboardRef.current) return;
+			const session = sessionRef.current;
+			if (!session || session.kind !== "move") return;
+			const step = STEP[e.key];
+			if (!step) return;
+			e.preventDefault();
+			e.stopImmediatePropagation();
+			const next = nudge(session, step[0], step[1], ctx());
+			setSessionBoth(next);
+			const cell = next.placeholder;
+			const rect = containerElRef.current?.getBoundingClientRect();
+			if (cell && rect) {
+				const pos = calcGridItemPosition(ppRef.current, cell.x, cell.y, cell.w, cell.h);
+				setOverlay((o) => o ? {
+					...o,
+					left: rect.left + pos.left,
+					top: rect.top + pos.top,
+					width: pos.width,
+					height: pos.height
+				} : o);
+			}
+		};
+		window.addEventListener("keydown", onKeyDown, true);
+		return () => window.removeEventListener("keydown", onKeyDown, true);
+	}, [ctx, setSessionBoth]);
+	useDragDropMonitor(useMemo(() => ({
+		onDragStart: handleDragStart,
+		onDragMove: handleDragMove,
+		onDragEnd: handleDragEnd
+	}), [
+		handleDragStart,
+		handleDragMove,
+		handleDragEnd
+	]));
+	const dragThreshold = props.dragConfig?.threshold ?? 3;
+	const itemSensors = useMemo(() => buildItemSensors(dragThreshold, () => propsRef.current.dragConfig), [dragThreshold]);
+	const renderedLayout = session ? session.preview : props.layout;
+	const itemsById = useMemo(() => new Map(renderedLayout.map((it) => [it.i, it])), [renderedLayout]);
+	const gridDraggable = props.isDraggable ?? true;
+	const dragEnabled = props.dragConfig?.enabled ?? true;
+	const isItemDraggable = useCallback((id) => {
+		const it = committedById.get(id);
+		if (!it) return false;
+		return gridDraggable && dragEnabled && (it.isDraggable ?? true) && !it.static;
+	}, [
+		committedById,
+		gridDraggable,
+		dragEnabled
+	]);
+	const gridResizable = props.isResizable ?? true;
+	const resizeEnabled = props.resizeConfig?.enabled ?? true;
+	const isItemResizable = useCallback((id) => {
+		const it = committedById.get(id);
+		if (!it) return false;
+		return gridResizable && resizeEnabled && (it.isResizable ?? true) && !it.static;
+	}, [
+		committedById,
+		gridResizable,
+		resizeEnabled
+	]);
+	const defaultHandles = props.resizeConfig?.handles;
+	const resizeHandlesFor = useCallback((id) => committedById.get(id)?.resizeHandles ?? defaultHandles ?? DEFAULT_HANDLES, [committedById, defaultHandles]);
+	const runtime = useMemo(() => ({
+		containerId,
+		width: props.width,
+		autoSize: props.autoSize ?? true,
+		gridConfig,
+		positionParams,
+		renderedLayout,
+		itemsById,
+		session,
+		isItemDraggable,
+		isItemResizable,
+		resizeHandlesFor,
+		itemSensors,
+		setContainerElement,
+		overlay
+	}), [
+		containerId,
+		props.width,
+		props.autoSize,
+		gridConfig,
+		positionParams,
+		renderedLayout,
+		itemsById,
+		session,
+		isItemDraggable,
+		isItemResizable,
+		resizeHandlesFor,
+		itemSensors,
+		setContainerElement,
+		overlay
+	]);
+	return /* @__PURE__ */ jsx(GridContext.Provider, {
+		value: runtime,
+		children: props.children
+	});
+}
+//#endregion
+//#region src/SnapGridGroup.tsx
+/**
+* Wrap multiple grids to let tiles be dragged **between** them. Provides one
+* shared dnd-kit `DragDropProvider` and a registry so each grid can tell which
+* grid the pointer is over.
+*
+* Item ids must be unique across all grids in a group (they share one manager).
+*/
+function SnapGridGroup({ children }) {
+	const registryRef = useRef(null);
+	if (!registryRef.current) registryRef.current = createGridRegistry();
+	return /* @__PURE__ */ jsx(DragDropProvider, { children: /* @__PURE__ */ jsx(SnapGridGroupContext.Provider, {
+		value: registryRef.current,
+		children
+	}) });
+}
+//#endregion
+//#region src/hooks/useGridContainer.ts
+/** Total container height in pixels for the given number of occupied rows. */
+function containerHeight(rows, grid) {
+	const padY = (grid.containerPadding ?? grid.margin)[1];
+	if (rows <= 0) return padY * 2;
+	return padY * 2 + rows * grid.rowHeight + (rows - 1) * grid.margin[1];
+}
+/**
+* Headless hook for the grid container. Registers the droppable surface (the
+* seam for cross-grid drops) and returns props (ref + sizing style) to spread
+* onto your own container element.
+*/
+function useGridContainer() {
+	const rt = useGridRuntime();
+	const { ref, isDropTarget } = useDroppable$1({
+		id: rt.containerId,
+		type: "grid",
+		accept: "grid-item"
+	});
+	const setContainerElement = rt.setContainerElement;
+	const setRef = useCallback((element) => {
+		ref(element);
+		setContainerElement(element);
+	}, [ref, setContainerElement]);
+	const height = rt.autoSize ? containerHeight(bottom(rt.renderedLayout), rt.gridConfig) : void 0;
+	return {
+		containerProps: {
+			ref: setRef,
+			style: {
+				position: "relative",
+				width: rt.width,
+				height
+			},
+			"data-drop-target": isDropTarget || void 0
+		},
+		isDropTarget
+	};
+}
+//#endregion
+//#region src/hooks/useGridItem.ts
+const REFLOW_TRANSITION = "transform 150ms ease, width 150ms ease, height 150ms ease";
+/**
+* Headless hook for a single grid item. Returns a ref, a positioning `style`,
+* and drag state — spread them onto whatever element you render. You own the
+* tag, className, content, and any cosmetic styling.
+*/
+function useGridItem(id) {
+	const rt = useGridRuntime();
+	const item = rt.itemsById.get(id);
+	const { ref, isDragging } = useDraggable$1({
+		id,
+		type: "grid-item",
+		disabled: !rt.isItemDraggable(id),
+		sensors: rt.itemSensors,
+		plugins: NO_FEEDBACK,
+		data: { snapGrid: {
+			kind: "move",
+			itemId: id,
+			item
+		} }
+	});
+	const active = rt.session?.activeId === id;
+	let style = {
+		position: "absolute",
+		touchAction: "none"
+	};
+	if (item) {
+		const pos = calcGridItemPosition(rt.positionParams, item.x, item.y, item.w, item.h);
+		style = {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			width: pos.width,
+			height: pos.height,
+			transform: `translate(${pos.left}px, ${pos.top}px)`,
+			visibility: active ? "hidden" : void 0,
+			transition: active ? "none" : REFLOW_TRANSITION,
+			touchAction: "none"
+		};
+	}
+	return {
+		ref,
+		style,
+		isDragging,
+		item
+	};
+}
+//#endregion
+//#region src/hooks/useGridPlaceholder.ts
+/**
+* Headless hook returning where the drag placeholder should be rendered, or
+* `null` when no drag is in progress. You render the element however you like.
+*/
+function useGridPlaceholder() {
+	const rt = useGridRuntime();
+	const placeholder = rt.session?.placeholder;
+	if (!placeholder) return null;
+	const pos = calcGridItemPosition(rt.positionParams, placeholder.x, placeholder.y, placeholder.w, placeholder.h);
+	return {
+		item: placeholder,
+		style: {
+			position: "absolute",
+			left: 0,
+			top: 0,
+			width: pos.width,
+			height: pos.height,
+			transform: `translate(${pos.left}px, ${pos.top}px)`,
+			pointerEvents: "none"
+		}
+	};
+}
+//#endregion
+//#region src/hooks/useGridResizeHandle.ts
+/**
+* Headless hook for a single resize handle. Model a handle as its own draggable;
+* dragging it resizes the item from the given edge/corner. Position and style
+* the handle however you like — spread `ref` and `handleProps` onto it.
+*/
+function useGridResizeHandle(itemId, handle) {
+	const rt = useGridRuntime();
+	const { ref } = useDraggable$1({
+		id: `${itemId}::resize::${handle}`,
+		disabled: !rt.isItemResizable(itemId),
+		plugins: NO_FEEDBACK,
+		data: { snapGrid: {
+			kind: "resize",
+			itemId,
+			handle
+		} }
+	});
+	const isResizing = rt.session?.kind === "resize" && rt.session.activeId === itemId;
+	return {
+		ref,
+		handleProps: { [RESIZE_HANDLE_ATTR]: true },
+		isResizing
+	};
+}
+//#endregion
+//#region src/hooks/useGridDragOverlay.ts
+/**
+* Headless hook for the floating drag preview. Returns `null` unless this grid
+* is the source of an in-progress drag. Render the returned `item` with `style`
+* in a portal at `document.body` so it can float across grids unclipped (see
+* {@link GridDragOverlay} for the convenience component).
+*/
+function useGridDragOverlay() {
+	const o = useGridRuntime().overlay;
+	if (!o) return null;
+	return {
+		item: o.item,
+		style: {
+			position: "fixed",
+			left: o.left,
+			top: o.top,
+			width: o.width,
+			height: o.height,
+			pointerEvents: "none",
+			zIndex: 1e3
+		}
+	};
+}
+//#endregion
+//#region src/hooks/useResponsiveLayout.ts
+/** react-grid-layout's default breakpoints (px) and column counts. */
+const DEFAULT_BREAKPOINTS = {
+	lg: 1200,
+	md: 996,
+	sm: 768,
+	xs: 480,
+	xxs: 0
+};
+const DEFAULT_BREAKPOINT_COLS = {
+	lg: 12,
+	md: 10,
+	sm: 6,
+	xs: 4,
+	xxs: 2
+};
+/**
+* Headless responsive layout engine: resolves the active breakpoint and its
+* column count/layout from the container width, generating a layout for the
+* active breakpoint from the nearest one when missing.
+*/
+function useResponsiveLayout(options) {
+	const { width, layouts, breakpoints = DEFAULT_BREAKPOINTS, cols = DEFAULT_BREAKPOINT_COLS, compactor = verticalCompactor$1, onLayoutChange, onBreakpointChange } = options;
+	const breakpoint = getBreakpointFromWidth(breakpoints, width);
+	const colCount = getColsFromBreakpoint(breakpoint, cols);
+	const layout = useMemo(() => {
+		let source = breakpoint;
+		let sourceWidth = Number.NEGATIVE_INFINITY;
+		for (const [bp, minWidth] of Object.entries(breakpoints)) if (layouts[bp] && minWidth > sourceWidth) {
+			sourceWidth = minWidth;
+			source = bp;
+		}
+		return findOrGenerateResponsiveLayout(layouts, breakpoints, breakpoint, source, colCount, compactor);
+	}, [
+		layouts,
+		breakpoints,
+		breakpoint,
+		colCount,
+		compactor
+	]);
+	const onBreakpointChangeRef = useRef(onBreakpointChange);
+	onBreakpointChangeRef.current = onBreakpointChange;
+	const firedBreakpointRef = useRef(breakpoint);
+	useEffect(() => {
+		if (firedBreakpointRef.current !== breakpoint) {
+			firedBreakpointRef.current = breakpoint;
+			onBreakpointChangeRef.current?.(breakpoint, colCount);
+		}
+	}, [breakpoint, colCount]);
+	return {
+		breakpoint,
+		cols: colCount,
+		layout,
+		onLayoutChange: useCallback((next) => {
+			onLayoutChange?.(next, {
+				...layouts,
+				[breakpoint]: next
+			});
+		}, [
+			onLayoutChange,
+			layouts,
+			breakpoint
+		])
+	};
+}
+//#endregion
+//#region src/GridDragOverlay.tsx
+/**
+* Renders the floating drag preview in a portal at `document.body` — so it
+* follows the pointer across grids without being clipped by any container.
+* Renders nothing when this grid isn't the drag source.
+*/
+function GridDragOverlay({ children, className, style }) {
+	const overlay = useGridDragOverlay();
+	if (typeof document === "undefined" || !overlay) return null;
+	return createPortal(/* @__PURE__ */ jsx("div", {
+		className: className ? `snapgrid-overlay ${className}` : "snapgrid-overlay",
+		style: style ? {
+			...overlay.style,
+			...style
+		} : overlay.style,
+		children: children(overlay.item)
+	}), document.body);
+}
+//#endregion
+//#region src/GridItem.tsx
+const HANDLE_CURSOR = {
+	n: "ns-resize",
+	s: "ns-resize",
+	e: "ew-resize",
+	w: "ew-resize",
+	se: "nwse-resize",
+	nw: "nwse-resize",
+	ne: "nesw-resize",
+	sw: "nesw-resize"
+};
+const SIDE = 14;
+function handleStyle(handle) {
+	const s = {
+		position: "absolute",
+		width: SIDE,
+		height: SIDE,
+		cursor: HANDLE_CURSOR[handle],
+		touchAction: "none",
+		zIndex: 4
+	};
+	if (handle.includes("n")) s.top = -14 / 2;
+	if (handle.includes("s")) s.bottom = -14 / 2;
+	if (handle.includes("e")) s.right = -14 / 2;
+	if (handle.includes("w")) s.left = -14 / 2;
+	if (handle === "n" || handle === "s") s.left = `calc(50% - ${SIDE / 2}px)`;
+	if (handle === "e" || handle === "w") s.top = `calc(50% - ${SIDE / 2}px)`;
+	return s;
+}
+function DefaultResizeHandle({ itemId, handle }) {
+	const { ref, handleProps } = useGridResizeHandle(itemId, handle);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		...handleProps,
+		className: `snapgrid-resize-handle snapgrid-resize-handle--${handle}`,
+		style: handleStyle(handle)
+	});
+}
+/**
+* Convenience wrapper over {@link useGridItem}: an absolutely-positioned `<div>`
+* with stable hooks (`.snapgrid-item`, `data-grid-id`, `data-dragging`) and the
+* configured resize handles. For full control, use the hooks directly.
+*/
+function GridItem({ id, children, className, style }) {
+	const rt = useGridRuntime();
+	const { ref, style: positionStyle, isDragging } = useGridItem(id);
+	const handles = rt.isItemResizable(id) ? rt.resizeHandlesFor(id) : [];
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-grid-id": id,
+		"data-dragging": isDragging || void 0,
+		className: className ? `snapgrid-item ${className}` : "snapgrid-item",
+		style: style ? {
+			...positionStyle,
+			...style
+		} : positionStyle,
+		children: [children, handles.map((handle) => /* @__PURE__ */ jsx(DefaultResizeHandle, {
+			itemId: id,
+			handle
+		}, handle))]
+	});
+}
+//#endregion
+//#region src/GridPlaceholder.tsx
+const DEFAULT_LOOK = {
+	background: "rgba(99, 102, 241, 0.2)",
+	border: "1px dashed rgba(99, 102, 241, 0.6)",
+	borderRadius: 4,
+	boxSizing: "border-box",
+	zIndex: 2,
+	transition: "transform 150ms ease, width 150ms ease, height 150ms ease"
+};
+/**
+* Convenience placeholder rendered from {@link useGridPlaceholder}. Renders
+* nothing when no drag is active. For a custom placeholder, call the hook
+* directly and render your own element with the returned `style`.
+*/
+function GridPlaceholder({ className, style }) {
+	const placeholder = useGridPlaceholder();
+	if (!placeholder) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": "true",
+		className: className ? `snapgrid-placeholder ${className}` : "snapgrid-placeholder",
+		style: {
+			...placeholder.style,
+			...DEFAULT_LOOK,
+			...style
+		}
+	});
+}
+//#endregion
+//#region src/GridLayout.tsx
+/** Strip the namespacing prefix React applies to keys inside `Children.map`. */
+function keyToId(key) {
+	return key.startsWith(".$") ? key.slice(2) : key;
+}
+/** The default surface: positioned container + mapped items + placeholder. */
+function GridSurface({ className, style, children }) {
+	const { containerProps } = useGridContainer();
+	const childById = /* @__PURE__ */ new Map();
+	Children.forEach(children, (child) => {
+		if (isValidElement(child) && child.key != null) childById.set(keyToId(String(child.key)), child);
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...containerProps,
+		className: className ? `snapgrid ${className}` : "snapgrid",
+		style: style ? {
+			...containerProps.style,
+			...style
+		} : containerProps.style,
+		children: [
+			Children.map(children, (child) => {
+				if (!isValidElement(child) || child.key == null) return child;
+				return /* @__PURE__ */ jsx(GridItem, {
+					id: keyToId(String(child.key)),
+					children: child
+				}, child.key);
+			}),
+			/* @__PURE__ */ jsx(GridPlaceholder, {}),
+			/* @__PURE__ */ jsx(GridDragOverlay, { children: (item) => childById.get(item.i) ?? null })
+		]
+	});
+}
+/**
+* Drop-in grid component: a controlled, react-grid-layout v2-compatible layout
+* backed by dnd-kit. A thin shell over {@link SnapGridProvider} and the headless
+* hooks — children are keyed by their layout item's `i`. For full control over
+* markup/styling, use the provider + hooks directly.
+*/
+function GridLayout(props) {
+	const { className, style, children, ...providerProps } = props;
+	return /* @__PURE__ */ jsx(SnapGridProvider, {
+		...providerProps,
+		children: /* @__PURE__ */ jsx(GridSurface, {
+			className,
+			style,
+			children
+		})
+	});
+}
+//#endregion
+//#region src/ResponsiveGridLayout.tsx
+/**
+* A responsive grid: switches column count and layout by breakpoint as `width`
+* changes, generating a breakpoint's layout from the nearest one when absent.
+* A thin wrapper over {@link useResponsiveLayout} + {@link GridLayout}; mirrors
+* react-grid-layout v2's `ResponsiveGridLayout`.
+*/
+function ResponsiveGridLayout(props) {
+	const { cols, layout, onLayoutChange } = useResponsiveLayout({
+		width: props.width,
+		layouts: props.layouts,
+		breakpoints: props.breakpoints,
+		cols: props.cols,
+		compactor: props.compactor,
+		onLayoutChange: props.onLayoutChange,
+		onBreakpointChange: props.onBreakpointChange
+	});
+	const gridConfig = useMemo(() => ({
+		cols,
+		rowHeight: props.rowHeight ?? 150,
+		margin: props.margin ?? [10, 10],
+		containerPadding: props.containerPadding ?? null
+	}), [
+		cols,
+		props.rowHeight,
+		props.margin,
+		props.containerPadding
+	]);
+	return /* @__PURE__ */ jsx(GridLayout, {
+		layout,
+		width: props.width,
+		onLayoutChange,
+		gridConfig,
+		compactor: props.compactor,
+		dragConfig: props.dragConfig,
+		resizeConfig: props.resizeConfig,
+		isDraggable: props.isDraggable,
+		isResizable: props.isResizable,
+		autoSize: props.autoSize,
+		className: props.className,
+		style: props.style,
+		children: props.children
+	});
+}
+//#endregion
+//#region src/hooks/useContainerWidth.ts
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+/**
+* Measure a container's width with a `ResizeObserver`. Replaces react-grid-layout's
+* `WidthProvider` HOC with a hook, mirroring RGL v2's `useContainerWidth`.
+*/
+function useContainerWidth(options = {}) {
+	const { initialWidth = 1280 } = options;
+	const [width, setWidth] = useState(initialWidth);
+	const [mounted, setMounted] = useState(false);
+	const [element, setElement] = useState(null);
+	const containerRef = useCallback((node) => setElement(node), []);
+	useIsomorphicLayoutEffect(() => {
+		if (!element || typeof ResizeObserver === "undefined") return;
+		const measure = () => {
+			const next = element.getBoundingClientRect().width;
+			if (next > 0) {
+				setWidth(next);
+				setMounted(true);
+			}
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(element);
+		return () => observer.disconnect();
+	}, [element]);
+	return {
+		width,
+		mounted,
+		containerRef
+	};
+}
+//#endregion
+export { DEFAULT_BREAKPOINTS, DEFAULT_BREAKPOINT_COLS, Feedback, GridDragOverlay, GridItem, GridLayout, GridPlaceholder, KeyboardSensor, PointerSensor, ResponsiveGridLayout, SnapGridGroup, SnapGridProvider, getCompactor, horizontalCompactor, noCompactor, useContainerWidth, useDraggable, useDroppable, useGridContainer, useGridDragOverlay, useGridItem, useGridPlaceholder, useGridResizeHandle, useResponsiveLayout, verticalCompactor };
+
+//# sourceMappingURL=index.mjs.map