panelgrid 0.1.0

package/dist/index.mjs

@@ -0,0 +1,644 @@
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/helpers/rearrangement.ts
+/**
+* Check if two rectangles overlap using AABB (Axis-Aligned Bounding Box) test
+* 2つの矩形が重なっているかをAABBテストで判定
+*/
+function rectanglesOverlap(a, b) {
+	return !(a.x + a.w <= b.x || b.x + b.w <= a.x || a.y + a.h <= b.y || b.y + b.h <= a.y);
+}
+/**
+* Detect all panels that collide with the given panel
+* 指定されたパネルと衝突する全てのパネルを検出
+*/
+function detectCollisions(panel, panelMap) {
+	const collisions = /* @__PURE__ */ new Set();
+	for (const [id, other] of panelMap) {
+		if (id === panel.id) continue;
+		if (rectanglesOverlap(panel, other)) collisions.add(id);
+	}
+	return Array.from(collisions);
+}
+/**
+* Check if a panel at the given position would collide with any existing panels
+* 指定された位置にパネルを配置した場合に衝突があるかをチェック
+*/
+function hasCollision(candidate, excludeId, panelMap) {
+	for (const [id, panel] of panelMap) {
+		if (id === excludeId) continue;
+		if (rectanglesOverlap(candidate, panel)) return true;
+	}
+	return false;
+}
+/**
+* Calculate the minimum distance to push a panel to avoid collision
+* パネルを押しのけるための最小距離を計算
+*/
+function calculatePushDistance(pusher, pushed, columnCount) {
+	const pushRight = pusher.x + pusher.w - pushed.x;
+	const canPushRight = pushed.x + pushed.w + pushRight <= columnCount;
+	const pushDown = pusher.y + pusher.h - pushed.y;
+	if (canPushRight && pushRight > 0) return {
+		direction: "right",
+		distance: pushRight
+	};
+	if (pushDown > 0) return {
+		direction: "down",
+		distance: pushDown
+	};
+	return null;
+}
+/**
+* Find a new position for a panel by pushing it away from the colliding panel
+* Priority: horizontal (right) first, then vertical (down)
+* 衝突したパネルを押しのける方向に移動させる
+* 優先順位: 横方向（右）→縦方向（下）
+*/
+function findNewPosition(panel, pusher, columnCount) {
+	const pushInfo = calculatePushDistance(pusher, panel, columnCount);
+	if (!pushInfo) return {
+		x: panel.x,
+		y: panel.y + 1
+	};
+	if (pushInfo.direction === "right") {
+		const newX = panel.x + pushInfo.distance;
+		if (newX + panel.w <= columnCount) return {
+			x: newX,
+			y: panel.y
+		};
+	}
+	return {
+		x: panel.x,
+		y: panel.y + pushInfo.distance
+	};
+}
+/**
+* Constrain a panel to stay within grid boundaries
+* パネルをグリッド境界内に制約
+*/
+function constrainToGrid(panel, columnCount) {
+	const maxX = Math.max(0, columnCount - panel.w);
+	const constrainedX = Math.max(0, Math.min(panel.x, maxX));
+	const constrainedY = Math.max(0, panel.y);
+	return {
+		...panel,
+		x: constrainedX,
+		y: constrainedY
+	};
+}
+/**
+* Rearrange panels to resolve collisions when a panel is moved or resized
+* Panels are moved horizontally first, then vertically if needed
+* パネルの移動・リサイズ時に衝突を解決するようにパネルを再配置
+* 横方向を優先し、必要に応じて縦方向に移動
+*/
+function rearrangePanels(movingPanel, allPanels, columnCount) {
+	const constrainedMovingPanel = constrainToGrid(movingPanel, columnCount);
+	const panelMap = /* @__PURE__ */ new Map();
+	for (const panel of allPanels) panelMap.set(panel.id, { ...panel });
+	panelMap.set(constrainedMovingPanel.id, { ...constrainedMovingPanel });
+	const queue = [{ ...constrainedMovingPanel }];
+	const processed = /* @__PURE__ */ new Set();
+	while (queue.length > 0) {
+		const current = queue.shift();
+		if (processed.has(current.id)) continue;
+		processed.add(current.id);
+		const collidingIds = detectCollisions(current, panelMap);
+		if (collidingIds.length === 0) {
+			panelMap.set(current.id, current);
+			continue;
+		}
+		for (const collidingId of collidingIds) {
+			const colliding = panelMap.get(collidingId);
+			if (!colliding) continue;
+			const newPos = findNewPosition(colliding, current, columnCount);
+			const updated = {
+				...colliding,
+				x: newPos.x,
+				y: newPos.y
+			};
+			panelMap.set(collidingId, updated);
+			queue.push(updated);
+		}
+		panelMap.set(current.id, current);
+	}
+	return Array.from(panelMap.values());
+}
+/**
+* Find a new position for a panel to be added
+* 追加するパネルの新しい位置を見つける
+*/
+function findNewPositionToAddPanel(panelToAdd, allPanels, columnCount) {
+	const id = panelToAdd.id || Math.random().toString(36).substring(2, 15);
+	const w = panelToAdd.w || 1;
+	const h = panelToAdd.h || 1;
+	const panelMap = /* @__PURE__ */ new Map();
+	for (const panel of allPanels) panelMap.set(panel.id, panel);
+	const maxExistingY = allPanels.length > 0 ? Math.max(...allPanels.map((p) => p.y + p.h)) : 0;
+	const MAX_ROWS = Math.max(maxExistingY + 100, 1e3);
+	for (let y = 0; y < MAX_ROWS; y++) for (let x = 0; x <= columnCount - w; x++) {
+		const candidate = {
+			id,
+			x,
+			y,
+			w,
+			h
+		};
+		if (!hasCollision(candidate, candidate.id, panelMap)) return {
+			x,
+			y
+		};
+	}
+	return {
+		x: 0,
+		y: maxExistingY
+	};
+}
+
+//#endregion
+//#region src/helpers/animation.ts
+/**
+* Applies snap-back animation to element
+* Smoothly animates the element from its dropped position to the snapped grid position
+*/
+function applySnapAnimation(options) {
+	const { element, droppedLeft, droppedTop, nextLeft, nextTop, originalTransition } = options;
+	const deltaX = droppedLeft - nextLeft;
+	const deltaY = droppedTop - nextTop;
+	element.style.transform = `translate3D(${deltaX}px, ${deltaY}px, 0)`;
+	element.style.transition = "";
+	window.requestAnimationFrame(() => {
+		element.style.transform = "translate3D(0, 0, 0)";
+		element.style.transition = "transform 0.1s ease-out";
+	});
+	element.style.left = `${nextLeft}px`;
+	element.style.top = `${nextTop}px`;
+	element.style.transition = originalTransition;
+}
+
+//#endregion
+//#region src/helpers/gridCalculations.ts
+/**
+* Converts a pixel value to grid units by dividing by the cell size (baseSize + gap)
+* and rounding up with Math.ceil. Ensures the result is at least 1 and does not exceed available space.
+* When columnCount and xPosition are provided, ensures x + width <= columnCount.
+*
+* ピクセル値をグリッド単位に変換します。セルサイズ (baseSize + gap) で割り、小数点は切り上げて整数にします。
+* 結果は最小1で、columnCountとxPositionが指定された場合はx + width <= columnCountを満たすように制限されます。
+*/
+function pixelsToGridSize(pixels, baseSize, gap, columnCount, xPosition) {
+	const gridSize = Math.ceil(pixels / (baseSize + gap));
+	const constrainedSize = Math.max(1, gridSize);
+	if (columnCount !== void 0 && xPosition !== void 0) {
+		const maxWidth = Math.max(1, columnCount - xPosition);
+		return Math.min(constrainedSize, maxWidth);
+	}
+	if (columnCount !== void 0) return Math.min(constrainedSize, columnCount);
+	return constrainedSize;
+}
+/**
+* Converts a pixel coordinate to grid coordinate by dividing by the cell size
+* and rounding down with Math.floor, ensuring the result is not negative and does not cause overflow.
+* When columnCount and width are provided, ensures x + width <= columnCount
+*
+* ピクセル座標をグリッド座標に変換します。セルサイズで割り、小数点は切り捨てて整数にします。
+* 結果が負にならず、columnCountとwidthが指定された場合はx + width <= columnCountを満たすようにします。
+*/
+function pixelsToGridPosition(pixels, baseSize, gap, columnCount, width) {
+	const gridPosition = Math.max(0, Math.floor(pixels / (baseSize + gap)));
+	if (columnCount !== void 0 && width !== void 0) {
+		const maxPosition = Math.max(0, columnCount - width);
+		return Math.min(gridPosition, maxPosition);
+	}
+	if (columnCount !== void 0) return Math.min(gridPosition, columnCount - 1);
+	return gridPosition;
+}
+/**
+* Converts grid units to pixels
+* Formula: gridUnits * baseSize + max(0, gridUnits - 1) * gap
+* This accounts for gaps between grid cells but not after the last cell
+*
+* グリッド単位をピクセルに変換します。
+* 計算式: gridUnits * baseSize + max(0, gridUnits - 1) * gap
+* グリッドセル間の gap を考慮しますが、最後のセルの後には gap を含めません。
+*/
+function gridToPixels(gridUnits, baseSize, gap) {
+	return gridUnits * baseSize + Math.max(0, gridUnits - 1) * gap;
+}
+/**
+* Converts grid coordinate to pixel coordinate for positioning
+* Formula: max(0, gridCoord * (baseSize + gap))
+* This includes the gap after each cell for proper positioning in the grid
+*
+* グリッド座標をピクセル座標に変換します（位置計算用）。
+* 計算式: max(0, gridCoord * (baseSize + gap))
+* 各セルの後に gap を含めて、グリッド内での適切な位置決めを行います。
+*/
+function gridPositionToPixels(gridCoord, baseSize, gap) {
+	return Math.max(0, gridCoord * (baseSize + gap));
+}
+/**
+* Gets the maximum Y coordinate of the panels
+* パネルの最大Y座標を取得します。
+*/
+function getGridRowCount(panels) {
+	return Math.max(...panels.map((p) => p.y + p.h));
+}
+
+//#endregion
+//#region src/helpers/panelDetection.ts
+/**
+* Detects which panels have changed position/size and marks them for animation
+* Returns a Set of panel IDs that should be animated
+*/
+function detectAnimatingPanels(options) {
+	const { oldPanels, newPanels, excludePanelId } = options;
+	const animatingPanels = /* @__PURE__ */ new Set();
+	oldPanels.forEach((oldPanel) => {
+		const newPanel = newPanels.find((p) => p.id === oldPanel.id);
+		if (newPanel && oldPanel.id !== excludePanelId) {
+			if (oldPanel.x !== newPanel.x || oldPanel.y !== newPanel.y || oldPanel.w !== newPanel.w || oldPanel.h !== newPanel.h) animatingPanels.add(oldPanel.id);
+		}
+	});
+	return animatingPanels;
+}
+
+//#endregion
+//#region src/usePanelGrid.ts
+const ANIMATION_DURATION = 300;
+function usePanelGrid({ panels, columnCount, baseSize, gap, rearrangement }) {
+	const [state, setState] = useState({ panels });
+	const ghostPanelRef = useRef(null);
+	const animationTimeoutsRef = useRef(/* @__PURE__ */ new Set());
+	const internalState = useRef({
+		activePanelId: null,
+		draggableElements: {},
+		animatingPanels: /* @__PURE__ */ new Set()
+	}).current;
+	useEffect(() => {
+		return () => {
+			animationTimeoutsRef.current.forEach((timeoutId) => clearTimeout(timeoutId));
+			animationTimeoutsRef.current.clear();
+		};
+	}, []);
+	const showGhostPanel = useCallback((left, top, width, height) => {
+		if (!ghostPanelRef.current) return;
+		ghostPanelRef.current.style.display = "block";
+		ghostPanelRef.current.style.left = `${left}px`;
+		ghostPanelRef.current.style.top = `${top}px`;
+		ghostPanelRef.current.style.width = `${width}px`;
+		ghostPanelRef.current.style.height = `${height}px`;
+		ghostPanelRef.current.style.outline = "1px dashed rgba(0, 0, 0, 0.2)";
+	}, []);
+	const updateGhostPanelPosition = useCallback((left, top) => {
+		if (!ghostPanelRef.current) return;
+		ghostPanelRef.current.style.left = `${left}px`;
+		ghostPanelRef.current.style.top = `${top}px`;
+	}, []);
+	const updateGhostPanelSize = useCallback((width, height) => {
+		if (!ghostPanelRef.current) return;
+		ghostPanelRef.current.style.width = `${width}px`;
+		ghostPanelRef.current.style.height = `${height}px`;
+	}, []);
+	const hideGhostPanel = useCallback(() => {
+		if (!ghostPanelRef.current) return;
+		ghostPanelRef.current.style.display = "none";
+	}, []);
+	const updatePanelsWithAnimation = useCallback((updatedPanel, currentPanels) => {
+		const nextPanels = (rearrangement || rearrangePanels)(updatedPanel, currentPanels, columnCount);
+		internalState.animatingPanels = detectAnimatingPanels({
+			oldPanels: currentPanels,
+			newPanels: nextPanels,
+			excludePanelId: updatedPanel.id
+		});
+		setState((current) => ({
+			...current,
+			panels: nextPanels
+		}));
+		const timeoutId = setTimeout(() => {
+			internalState.animatingPanels.clear();
+			animationTimeoutsRef.current.delete(timeoutId);
+		}, ANIMATION_DURATION);
+		animationTimeoutsRef.current.add(timeoutId);
+	}, [
+		columnCount,
+		internalState,
+		rearrangement
+	]);
+	const createDragHandler = useCallback((panel) => (e) => {
+		internalState.activePanelId = panel.id;
+		const draggingElement = internalState.draggableElements[panel.id];
+		if (!draggingElement) return;
+		let isDragging = true;
+		const initialX = e.clientX;
+		const initialY = e.clientY;
+		const offsetX = draggingElement.offsetLeft;
+		const offsetY = draggingElement.offsetTop;
+		const originalTransition = draggingElement.style.transition;
+		draggingElement.classList.add("panelgrid-panel--dragging");
+		draggingElement.style.transition = "";
+		showGhostPanel(offsetX, offsetY, draggingElement.offsetWidth, draggingElement.offsetHeight);
+		const mouseUpListenerCtrl = new AbortController();
+		const mouseMoveListenerCtrl = new AbortController();
+		const onMouseMove = (e$1) => {
+			if (!isDragging) return;
+			if (!draggingElement) return;
+			const currentX = e$1.clientX;
+			const currentY = e$1.clientY;
+			const deltaX = currentX - initialX;
+			const deltaY = currentY - initialY;
+			draggingElement.style.left = offsetX + deltaX + "px";
+			draggingElement.style.top = offsetY + deltaY + "px";
+			const droppedLeft = offsetX + deltaX;
+			const droppedTop = offsetY + deltaY;
+			const nextGridX = pixelsToGridPosition(droppedLeft, baseSize, gap, columnCount, panel.w);
+			const nextGridY = pixelsToGridPosition(droppedTop, baseSize, gap);
+			updateGhostPanelPosition(gridPositionToPixels(nextGridX, baseSize, gap), gridPositionToPixels(nextGridY, baseSize, gap));
+			e$1.preventDefault();
+		};
+		const onMouseUp = () => {
+			if (!draggingElement) return;
+			isDragging = false;
+			draggingElement.classList.remove("panelgrid-panel--dragging");
+			hideGhostPanel();
+			const droppedLeft = parseFloat(draggingElement.style.left) || 0;
+			const droppedTop = parseFloat(draggingElement.style.top) || 0;
+			const nextGridX = pixelsToGridPosition(droppedLeft, baseSize, gap, columnCount, panel.w);
+			const nextGridY = pixelsToGridPosition(droppedTop, baseSize, gap);
+			applySnapAnimation({
+				element: draggingElement,
+				droppedLeft,
+				droppedTop,
+				nextLeft: gridPositionToPixels(nextGridX, baseSize, gap),
+				nextTop: gridPositionToPixels(nextGridY, baseSize, gap),
+				originalTransition
+			});
+			updatePanelsWithAnimation({
+				...panel,
+				x: nextGridX,
+				y: nextGridY
+			}, state.panels);
+			internalState.activePanelId = null;
+			mouseMoveListenerCtrl.abort();
+			mouseUpListenerCtrl.abort();
+		};
+		document.addEventListener("mousemove", onMouseMove, { signal: mouseMoveListenerCtrl.signal });
+		document.addEventListener("mouseup", onMouseUp, { signal: mouseUpListenerCtrl.signal });
+	}, [
+		baseSize,
+		gap,
+		internalState,
+		state.panels,
+		updatePanelsWithAnimation,
+		showGhostPanel,
+		updateGhostPanelPosition,
+		hideGhostPanel,
+		columnCount
+	]);
+	const createResizeHandler = useCallback((panel) => (e) => {
+		e.stopPropagation();
+		let isResizing = true;
+		internalState.activePanelId = panel.id;
+		const draggingElement = internalState.draggableElements[panel.id];
+		if (!draggingElement) return;
+		const startX = e.clientX;
+		const startY = e.clientY;
+		const initialWidth = draggingElement.offsetWidth;
+		const initialHeight = draggingElement.offsetHeight;
+		const initialZIndex = draggingElement.style.zIndex;
+		draggingElement.style.cursor = "nwse-resize";
+		draggingElement.style.transition = "";
+		showGhostPanel(draggingElement.offsetLeft, draggingElement.offsetTop, initialWidth, initialHeight);
+		const mouseMoveController = new AbortController();
+		const mouseUpController = new AbortController();
+		const onMouseMove = (e$1) => {
+			if (!isResizing) return;
+			if (!draggingElement) return;
+			const deltaX = e$1.clientX - startX;
+			const deltaY = e$1.clientY - startY;
+			draggingElement.style.width = `${initialWidth + deltaX}px`;
+			draggingElement.style.height = `${initialHeight + deltaY}px`;
+			draggingElement.style.zIndex = "calc(infinity)";
+			const newWidth = initialWidth + deltaX;
+			const newHeight = initialHeight + deltaY;
+			const nextGridW = pixelsToGridSize(newWidth, baseSize, gap, columnCount, panel.x);
+			const nextGridH = pixelsToGridSize(newHeight, baseSize, gap);
+			updateGhostPanelSize(gridToPixels(nextGridW, baseSize, gap), gridToPixels(nextGridH, baseSize, gap));
+		};
+		const onMouseUp = () => {
+			if (!draggingElement) return;
+			hideGhostPanel();
+			const rect = draggingElement.getBoundingClientRect();
+			const nextGridW = pixelsToGridSize(rect.width, baseSize, gap, columnCount, panel.x);
+			const nextGridH = pixelsToGridSize(rect.height, baseSize, gap);
+			const width = gridToPixels(nextGridW, baseSize, gap);
+			const height = gridToPixels(nextGridH, baseSize, gap);
+			draggingElement.style.width = `${rect.width}px`;
+			draggingElement.style.height = `${rect.height}px`;
+			draggingElement.style.cursor = "default";
+			draggingElement.style.transition = "";
+			window.requestAnimationFrame(() => {
+				draggingElement.style.width = `${width}px`;
+				draggingElement.style.height = `${height}px`;
+				draggingElement.style.zIndex = initialZIndex;
+				draggingElement.style.transition = "width 0.1s ease-out, height 0.1s ease-out";
+			});
+			updatePanelsWithAnimation({
+				...panel,
+				w: nextGridW,
+				h: nextGridH
+			}, state.panels);
+			isResizing = false;
+			internalState.activePanelId = null;
+			mouseMoveController.abort();
+			mouseUpController.abort();
+		};
+		document.addEventListener("mousemove", onMouseMove, { signal: mouseMoveController.signal });
+		document.addEventListener("mouseup", onMouseUp, { signal: mouseUpController.signal });
+	}, [
+		baseSize,
+		gap,
+		internalState,
+		state.panels,
+		updatePanelsWithAnimation,
+		showGhostPanel,
+		updateGhostPanelSize,
+		hideGhostPanel,
+		columnCount
+	]);
+	const createRefCallback = useCallback((panelId) => (element) => {
+		if (!element) return;
+		if (!internalState.draggableElements[panelId]) internalState.draggableElements[panelId] = element;
+	}, [internalState]);
+	return {
+		panels: useMemo(() => {
+			return state.panels.map((panel) => {
+				const isAnimating = internalState.animatingPanels.has(panel.id);
+				const isActive = internalState.activePanelId === panel.id;
+				return {
+					panelProps: {
+						key: panel.id,
+						x: panel.x,
+						y: panel.y,
+						w: panel.w,
+						h: panel.h,
+						style: {
+							top: gridPositionToPixels(panel.y, baseSize, gap),
+							left: gridPositionToPixels(panel.x, baseSize, gap),
+							width: gridToPixels(panel.w, baseSize, gap),
+							height: gridToPixels(panel.h, baseSize, gap),
+							transition: isAnimating && !isActive ? "top 0.3s ease-out, left 0.3s ease-out, width 0.3s ease-out, height 0.3s ease-out" : void 0
+						},
+						ref: createRefCallback(panel.id),
+						onMouseDown: createDragHandler(panel)
+					},
+					resizeHandleProps: { onMouseDown: createResizeHandler(panel) }
+				};
+			});
+		}, [
+			state.panels,
+			baseSize,
+			gap,
+			internalState.animatingPanels,
+			internalState.activePanelId,
+			createRefCallback,
+			createDragHandler,
+			createResizeHandler
+		]),
+		ghostPanelRef,
+		addPanel: useCallback((panel) => {
+			setState((current) => {
+				const newPosition = findNewPositionToAddPanel(panel, current.panels, columnCount);
+				const newPanel = {
+					id: panel.id || Math.random().toString(36).substring(2, 15),
+					x: newPosition.x,
+					y: newPosition.y,
+					w: panel.w || 1,
+					h: panel.h || 1
+				};
+				return {
+					...current,
+					panels: [...current.panels, newPanel]
+				};
+			});
+		}, [columnCount]),
+		removePanel: useCallback((id) => {
+			setState((current) => ({
+				...current,
+				panels: current.panels.filter((panel) => panel.id !== id)
+			}));
+		}, []),
+		exportState: useCallback(() => {
+			return state.panels;
+		}, [state.panels])
+	};
+}
+
+//#endregion
+//#region src/PanelGridProvider.tsx
+const PanelGridStateContext = createContext(void 0);
+const PanelGridControlsContext = createContext(void 0);
+function PanelGridProvider({ panels: initialPanels, columnCount, gap, children, rearrangement }) {
+	const [baseSize, setBaseSize] = useState(null);
+	const { panels, addPanel, removePanel, exportState, ghostPanelRef } = usePanelGrid({
+		panels: initialPanels,
+		columnCount,
+		baseSize: baseSize || 256,
+		gap,
+		rearrangement
+	});
+	return /* @__PURE__ */ jsx(PanelGridStateContext.Provider, {
+		value: {
+			panels,
+			columnCount,
+			gap,
+			baseSize,
+			ghostPanelRef
+		},
+		children: /* @__PURE__ */ jsx(PanelGridControlsContext.Provider, {
+			value: {
+				setBaseSize,
+				addPanel,
+				removePanel,
+				exportState
+			},
+			children
+		})
+	});
+}
+function usePanelGridState() {
+	const context = useContext(PanelGridStateContext);
+	if (!context) throw new Error("usePanelGridState must be used within a PanelGridProvider");
+	return context;
+}
+function usePanelGridControls() {
+	const context = useContext(PanelGridControlsContext);
+	if (!context) throw new Error("usePanelGridControls must be used within a PanelGridProvider");
+	return context;
+}
+
+//#endregion
+//#region src/PanelGridRenderer.tsx
+function PanelGridRenderer({ itemRenderer: ItemRenderer }) {
+	const { panels, columnCount, gap, baseSize, ghostPanelRef } = usePanelGridState();
+	const { setBaseSize } = usePanelGridControls();
+	const containerRef = useRef(null);
+	const rowCount = getGridRowCount(panels.map(({ panelProps: p }) => ({
+		id: p.key,
+		x: p.x,
+		y: p.y,
+		w: p.w,
+		h: p.h
+	})));
+	const count = Math.max(columnCount * (rowCount + 1), columnCount * columnCount);
+	useLayoutEffect(() => {
+		if (!containerRef.current) return;
+		const observer = new ResizeObserver((entries) => {
+			const [entry] = entries;
+			const rect = entry.contentRect;
+			setBaseSize(Math.floor((rect.width - gap * (columnCount - 1)) / columnCount));
+		});
+		observer.observe(containerRef.current);
+		return () => observer.disconnect();
+	}, [
+		columnCount,
+		gap,
+		setBaseSize
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "panelgrid-renderer",
+		style: {
+			"--column-count": `${columnCount}`,
+			"--gap": `${gap}px`,
+			opacity: baseSize ? 1 : 0
+		},
+		ref: containerRef,
+		children: [
+			Array.from({ length: count }).map((_, i) => {
+				return /* @__PURE__ */ jsx("div", { className: "panelgrid-panel-placeholder" }, i);
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "panelgrid-panel-ghost",
+				ref: ghostPanelRef
+			}),
+			panels.map((panel) => {
+				const { panelProps: _panelProps, resizeHandleProps } = panel;
+				const { key,...panelProps } = _panelProps;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "panelgrid-panel",
+					...panelProps,
+					children: [/* @__PURE__ */ jsx(ItemRenderer, { id: key }), /* @__PURE__ */ jsx("span", {
+						className: "panelgrid-resize-handle",
+						...resizeHandleProps
+					})]
+				}, key);
+			})
+		]
+	});
+}
+
+//#endregion
+export { PanelGridProvider, PanelGridRenderer, rearrangePanels, usePanelGridControls, usePanelGridState };
+//# sourceMappingURL=index.mjs.map