panelgrid 0.2.0 → 0.3.0

package/README.md

@@ -11,6 +11,7 @@ A flexible and performant React grid layout library with drag-and-drop and resiz
 - 🔧 **TypeScript**: Full type safety with comprehensive type definitions
 - 📦 **Tree-shakeable**: ESM and CommonJS builds available
 - 🎛️ **Customizable Rearrangement**: Override default collision resolution logic
+- ⚛️ **React Server Components**: Full support for Next.js App Router and RSC
 
 ## Documentation & Demo
 
@@ -60,6 +61,8 @@ const initialPanels: PanelCoordinate[] = [
   { id: 3, x: 0, y: 2, w: 1, h: 1 },
 ];
 
+// Mark panel component with "use client" for Next.js App Router
+"use client";
 function PanelContent({ id }: { id: number | string }) {
   return <div>Panel {id}</div>;
 }
@@ -71,7 +74,7 @@ function App() {
       columnCount={4}
       gap={8}
     >
-      <PanelGridRenderer itemRenderer={PanelContent} />
+      <PanelGridRenderer>{PanelContent}</PanelGridRenderer>
     </PanelGridProvider>
   );
 }
@@ -79,6 +82,53 @@ function App() {
 
 **Note:** Don't forget to import the CSS file to enable proper styling for the panels.
 
+### Next.js App Router / React Server Components
+
+PanelGrid is fully compatible with Next.js App Router and React Server Components. The library exports are marked with `"use client"` where necessary.
+
+**Important:** Your panel content components must also be marked with `"use client"` if they:
+- Use React hooks (`useState`, `useEffect`, etc.)
+- Access browser APIs
+- Use event handlers
+
+```tsx
+// app/dashboard/page.tsx (Server Component)
+import { PanelGridProvider, PanelGridRenderer } from 'panelgrid';
+import { PanelContent } from './PanelContent'; // Client Component
+import 'panelgrid/styles.css';
+
+export default function DashboardPage() {
+  const panels = [
+    { id: 1, x: 0, y: 0, w: 2, h: 2 },
+    { id: 2, x: 2, y: 0, w: 2, h: 2 },
+  ];
+
+  return (
+    <PanelGridProvider panels={panels} columnCount={4} gap={8}>
+      <PanelGridRenderer>{PanelContent}</PanelGridRenderer>
+    </PanelGridProvider>
+  );
+}
+```
+
+```tsx
+// app/dashboard/PanelContent.tsx (Client Component)
+"use client";
+import { usePanelGridControls } from 'panelgrid';
+import type { PanelId } from 'panelgrid';
+
+export function PanelContent({ id }: { id: PanelId }) {
+  const { removePanel } = usePanelGridControls();
+
+  return (
+    <div>
+      <h3>Panel {id}</h3>
+      <button onClick={() => removePanel(id)}>Remove</button>
+    </div>
+  );
+}
+```
+
 ## Advanced Usage
 
 ### Custom Rearrangement Logic
@@ -116,7 +166,7 @@ function App() {
       gap={8}
       rearrangement={customRearrange}
     >
-      <PanelGridRenderer itemRenderer={PanelContent} />
+      <PanelGridRenderer>{PanelContent}</PanelGridRenderer>
     </PanelGridProvider>
   );
 }
@@ -281,7 +331,30 @@ Renderer component that displays the panels.
 
 **Props:**
 
-- `itemRenderer`: `React.ComponentType<{ id: PanelId }>` - Component to render each panel
+- `children`: `React.ComponentType<{ id: PanelId }>` - Component type (not instance) to render each panel
+
+**Example:**
+
+```tsx
+"use client";
+function MyPanel({ id }: { id: PanelId }) {
+  return <div>Panel {id}</div>;
+}
+
+// Pass the component type (not JSX)
+<PanelGridRenderer>{MyPanel}</PanelGridRenderer>
+```
+
+For panels with custom props, create a wrapper component:
+
+```tsx
+"use client";
+function CustomPanel({ id }: { id: PanelId }) {
+  return <MyPanel id={id} customProp="value" />;
+}
+
+<PanelGridRenderer>{CustomPanel}</PanelGridRenderer>
+```
 
 ### `usePanelGridControls()`
 

package/dist/helpers/rearrangement.cjs

@@ -89,38 +89,85 @@ function constrainToGrid(panel, columnCount) {
 /**
 * Rearrange panels to resolve collisions when a panel is moved or resized
 * Panels are moved horizontally first, then vertically if needed
+* For compound resizes (both width and height change), uses two-phase processing
 * パネルの移動・リサイズ時に衝突を解決するようにパネルを再配置
 * 横方向を優先し、必要に応じて縦方向に移動
+* 幅と高さが同時に変更される場合は、二段階処理を使用
 */
 function rearrangePanels(movingPanel, allPanels, columnCount) {
 	const constrainedMovingPanel = constrainToGrid(movingPanel, columnCount);
+	const originalPanel = allPanels.find((p) => p.id === movingPanel.id);
+	if (originalPanel) {
+		const widthChanged = originalPanel.w !== constrainedMovingPanel.w;
+		const heightChanged = originalPanel.h !== constrainedMovingPanel.h;
+		if (widthChanged && heightChanged) {
+			const afterWidthChange = rearrangePanelsInternal({
+				...constrainedMovingPanel,
+				h: originalPanel.h
+			}, allPanels, columnCount);
+			return rearrangePanelsInternal({
+				...constrainedMovingPanel,
+				x: afterWidthChange.find((p) => p.id === movingPanel.id)?.x ?? constrainedMovingPanel.x,
+				y: afterWidthChange.find((p) => p.id === movingPanel.id)?.y ?? constrainedMovingPanel.y
+			}, afterWidthChange, columnCount);
+		}
+	}
+	return rearrangePanelsInternal(constrainedMovingPanel, allPanels, columnCount);
+}
+/**
+* Internal implementation of panel rearrangement
+* パネル再配置の内部実装
+*/
+function rearrangePanelsInternal(movingPanel, allPanels, columnCount) {
 	const panelMap = /* @__PURE__ */ new Map();
 	for (const panel of allPanels) panelMap.set(panel.id, { ...panel });
-	panelMap.set(constrainedMovingPanel.id, { ...constrainedMovingPanel });
-	const queue = [{ ...constrainedMovingPanel }];
+	panelMap.set(movingPanel.id, { ...movingPanel });
+	const queue = [{ ...movingPanel }];
 	const processed = /* @__PURE__ */ new Set();
+	const processCount = /* @__PURE__ */ new Map();
+	const MAX_PROCESS_COUNT = 10;
 	while (queue.length > 0) {
 		const current = queue.shift();
+		const count = processCount.get(current.id) || 0;
+		if (count >= MAX_PROCESS_COUNT) continue;
+		processCount.set(current.id, count + 1);
+		const currentInMap = panelMap.get(current.id);
+		if (currentInMap && (currentInMap.x !== current.x || currentInMap.y !== current.y)) continue;
 		if (processed.has(current.id)) continue;
-		processed.add(current.id);
 		const collidingIds = detectCollisions(current, panelMap);
 		if (collidingIds.length === 0) {
 			panelMap.set(current.id, current);
+			processed.add(current.id);
 			continue;
 		}
-		for (const collidingId of collidingIds) {
+		const sortedCollidingIds = collidingIds.sort((a, b) => {
+			const panelA = panelMap.get(a);
+			const panelB = panelMap.get(b);
+			if (panelA.y !== panelB.y) return panelA.y - panelB.y;
+			return panelA.x - panelB.x;
+		});
+		const pushedInIteration = /* @__PURE__ */ new Set();
+		for (const collidingId of sortedCollidingIds) {
 			const colliding = panelMap.get(collidingId);
 			if (!colliding) continue;
 			const newPos = findNewPosition(colliding, current, columnCount);
-			const updated = {
+			const candidate = {
 				...colliding,
 				x: newPos.x,
 				y: newPos.y
 			};
-			panelMap.set(collidingId, updated);
-			queue.push(updated);
+			let wouldCollideWithPushed = false;
+			for (const pushedId of pushedInIteration) if (rectanglesOverlap(candidate, panelMap.get(pushedId))) {
+				wouldCollideWithPushed = true;
+				break;
+			}
+			if (wouldCollideWithPushed) continue;
+			panelMap.set(collidingId, candidate);
+			queue.push(candidate);
+			pushedInIteration.add(collidingId);
 		}
 		panelMap.set(current.id, current);
+		processed.add(current.id);
 	}
 	return Array.from(panelMap.values());
 }

package/dist/helpers/rearrangement.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"rearrangement.cjs","names":["queue: PanelCoordinate[]","candidate: PanelCoordinate"],"sources":["../../src/helpers/rearrangement.ts"],"sourcesContent":["import type { PanelCoordinate, PanelId } from \"../types\";\n\n/**\n * Check if two rectangles overlap using AABB (Axis-Aligned Bounding Box) test\n * 2つの矩形が重なっているかをAABBテストで判定\n */\nexport function rectanglesOverlap(\n  a: { x: number; y: number; w: number; h: number },\n  b: { x: number; y: number; w: number; h: number }\n): boolean {\n  return !(\n    (\n      a.x + a.w <= b.x || // a is to the left of b\n      b.x + b.w <= a.x || // b is to the left of a\n      a.y + a.h <= b.y || // a is above b\n      b.y + b.h <= a.y\n    ) // b is above a\n  );\n}\n\n/**\n * Detect all panels that collide with the given panel\n * 指定されたパネルと衝突する全てのパネルを検出\n */\nexport function detectCollisions(panel: PanelCoordinate, panelMap: Map<PanelId, PanelCoordinate>): PanelId[] {\n  const collisions = new Set<PanelId>();\n\n  for (const [id, other] of panelMap) {\n    if (id === panel.id) continue;\n\n    if (rectanglesOverlap(panel, other)) {\n      collisions.add(id);\n    }\n  }\n\n  return Array.from(collisions);\n}\n\n/**\n * Check if a panel at the given position would collide with any existing panels\n * 指定された位置にパネルを配置した場合に衝突があるかをチェック\n */\nexport function hasCollision(\n  candidate: { x: number; y: number; w: number; h: number },\n  excludeId: PanelId,\n  panelMap: Map<PanelId, PanelCoordinate>\n): boolean {\n  for (const [id, panel] of panelMap) {\n    if (id === excludeId) continue;\n    if (rectanglesOverlap(candidate, panel)) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Calculate the minimum distance to push a panel to avoid collision\n * パネルを押しのけるための最小距離を計算\n */\nfunction calculatePushDistance(\n  pusher: PanelCoordinate,\n  pushed: PanelCoordinate,\n  columnCount: number\n): { direction: \"right\" | \"down\"; distance: number } | null {\n  // Calculate how far to push horizontally (to the right)\n  // 横方向（右）にどれだけ押すか計算\n  const pushRight = pusher.x + pusher.w - pushed.x;\n  const canPushRight = pushed.x + pushed.w + pushRight <= columnCount;\n\n  // Calculate how far to push vertically (down)\n  // 縦方向（下）にどれだけ押すか計算\n  const pushDown = pusher.y + pusher.h - pushed.y;\n\n  // Priority 1: Horizontal push if possible\n  // 優先順位1: 可能なら横方向に押す\n  if (canPushRight && pushRight > 0) {\n    return { direction: \"right\", distance: pushRight };\n  }\n\n  // Priority 2: Vertical push\n  // 優先順位2: 縦方向に押す\n  if (pushDown > 0) {\n    return { direction: \"down\", distance: pushDown };\n  }\n\n  return null;\n}\n\n/**\n * Find a new position for a panel by pushing it away from the colliding panel\n * Priority: horizontal (right) first, then vertical (down)\n * 衝突したパネルを押しのける方向に移動させる\n * 優先順位: 横方向（右）→縦方向（下）\n */\nexport function findNewPosition(\n  panel: PanelCoordinate,\n  pusher: PanelCoordinate,\n  columnCount: number\n): { x: number; y: number } {\n  const pushInfo = calculatePushDistance(pusher, panel, columnCount);\n\n  if (!pushInfo) {\n    // No push needed or can't determine direction\n    // Fallback: move down\n    return { x: panel.x, y: panel.y + 1 };\n  }\n\n  if (pushInfo.direction === \"right\") {\n    // Push horizontally to the right\n    // 横方向（右）に押す\n    const newX = panel.x + pushInfo.distance;\n    if (newX + panel.w <= columnCount) {\n      return { x: newX, y: panel.y };\n    }\n    // Can't fit horizontally, push down instead\n    // 横方向に入らない場合は下に押す\n  }\n\n  // Push vertically down\n  // 縦方向（下）に押す\n  return { x: panel.x, y: panel.y + pushInfo.distance };\n}\n\n/**\n * Constrain a panel to stay within grid boundaries\n * パネルをグリッド境界内に制約\n */\nfunction constrainToGrid(panel: PanelCoordinate, columnCount: number): PanelCoordinate {\n  // Ensure x + w doesn't exceed columnCount\n  // x + w が columnCount を超えないようにする\n  const maxX = Math.max(0, columnCount - panel.w);\n  const constrainedX = Math.max(0, Math.min(panel.x, maxX));\n\n  // Ensure y is non-negative\n  // y が負にならないようにする\n  const constrainedY = Math.max(0, panel.y);\n\n  return {\n    ...panel,\n    x: constrainedX,\n    y: constrainedY,\n  };\n}\n\n/**\n * Rearrange panels to resolve collisions when a panel is moved or resized\n * Panels are moved horizontally first, then vertically if needed\n * パネルの移動・リサイズ時に衝突を解決するようにパネルを再配置\n * 横方向を優先し、必要に応じて縦方向に移動\n */\nexport function rearrangePanels(\n  movingPanel: PanelCoordinate,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): PanelCoordinate[] {\n  // Constrain the moving panel to grid boundaries\n  // 移動中のパネルをグリッド境界内に制約\n  const constrainedMovingPanel = constrainToGrid(movingPanel, columnCount);\n\n  // Create a map for fast panel lookup\n  // パネルIDから座標への高速マップを作成\n  const panelMap = new Map<PanelId, PanelCoordinate>();\n  for (const panel of allPanels) {\n    panelMap.set(panel.id, { ...panel });\n  }\n\n  // Update the moving panel's position in the map\n  // 移動中のパネルの位置をマップに反映\n  panelMap.set(constrainedMovingPanel.id, { ...constrainedMovingPanel });\n\n  // Queue for processing panels that need to be repositioned\n  // 再配置が必要なパネルの処理キュー\n  const queue: PanelCoordinate[] = [{ ...constrainedMovingPanel }];\n  const processed = new Set<PanelId>();\n\n  // Process panels until no more collisions\n  // 衝突がなくなるまでパネルを処理\n  while (queue.length > 0) {\n    const current = queue.shift()!;\n\n    // Skip if already processed\n    if (processed.has(current.id)) {\n      continue;\n    }\n    processed.add(current.id);\n\n    // Detect collisions with current panel position\n    // 現在のパネル位置での衝突を検出\n    const collidingIds = detectCollisions(current, panelMap);\n\n    if (collidingIds.length === 0) {\n      // No collisions, keep current position\n      // 衝突なし、現在の位置を維持\n      panelMap.set(current.id, current);\n      continue;\n    }\n\n    // Resolve collisions by pushing colliding panels\n    // 衝突したパネルを押しのけて衝突を解決\n    for (const collidingId of collidingIds) {\n      const colliding = panelMap.get(collidingId);\n      if (!colliding) continue;\n\n      // Find new position by pushing the colliding panel away\n      // 衝突したパネルを押しのける方向に移動\n      const newPos = findNewPosition(colliding, current, columnCount);\n\n      // Update the panel's position\n      // パネルの位置を更新\n      const updated = { ...colliding, x: newPos.x, y: newPos.y };\n      panelMap.set(collidingId, updated);\n\n      // Add to queue for further collision checking\n      // 再度衝突チェックのためキューに追加\n      queue.push(updated);\n    }\n\n    // Confirm current panel's position\n    // 現在のパネルの位置を確定\n    panelMap.set(current.id, current);\n  }\n\n  // Return the rearranged panels\n  // 再配置後のパネルを返す\n  return Array.from(panelMap.values());\n}\n\n/**\n * Find a new position for a panel to be added\n * 追加するパネルの新しい位置を見つける\n */\nexport function findNewPositionToAddPanel(\n  panelToAdd: Partial<PanelCoordinate>,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): { x: number; y: number } {\n  const id = panelToAdd.id || Math.random().toString(36).substring(2, 15);\n  const w = panelToAdd.w || 1;\n  const h = panelToAdd.h || 1;\n\n  // Create a map for fast panel lookup\n  const panelMap = new Map<PanelId, PanelCoordinate>();\n  for (const panel of allPanels) {\n    panelMap.set(panel.id, panel);\n  }\n\n  // Calculate maximum row based on existing panels\n  // Add some buffer rows to ensure we can find a position\n  const maxExistingY = allPanels.length > 0 ? Math.max(...allPanels.map((p) => p.y + p.h)) : 0;\n  const MAX_ROWS = Math.max(maxExistingY + 100, 1000);\n\n  // Try to find a position starting from top-left\n  for (let y = 0; y < MAX_ROWS; y++) {\n    for (let x = 0; x <= columnCount - w; x++) {\n      const candidate: PanelCoordinate = {\n        id,\n        x,\n        y,\n        w,\n        h,\n      };\n\n      // Check if this position has any collisions\n      if (!hasCollision(candidate, candidate.id, panelMap)) {\n        return { x, y };\n      }\n    }\n  }\n\n  // Fallback: if no position found, place at the bottom\n  return { x: 0, y: maxExistingY };\n}\n"],"mappings":"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"}
+{"version":3,"file":"rearrangement.cjs","names":["queue: PanelCoordinate[]","candidate: PanelCoordinate"],"sources":["../../src/helpers/rearrangement.ts"],"sourcesContent":["import type { PanelCoordinate, PanelId } from \"../types\";\n\n/**\n * Check if two rectangles overlap using AABB (Axis-Aligned Bounding Box) test\n * 2つの矩形が重なっているかをAABBテストで判定\n */\nexport function rectanglesOverlap(\n  a: { x: number; y: number; w: number; h: number },\n  b: { x: number; y: number; w: number; h: number }\n): boolean {\n  return !(\n    (\n      a.x + a.w <= b.x || // a is to the left of b\n      b.x + b.w <= a.x || // b is to the left of a\n      a.y + a.h <= b.y || // a is above b\n      b.y + b.h <= a.y\n    ) // b is above a\n  );\n}\n\n/**\n * Detect all panels that collide with the given panel\n * 指定されたパネルと衝突する全てのパネルを検出\n */\nexport function detectCollisions(panel: PanelCoordinate, panelMap: Map<PanelId, PanelCoordinate>): PanelId[] {\n  const collisions = new Set<PanelId>();\n\n  for (const [id, other] of panelMap) {\n    if (id === panel.id) continue;\n\n    if (rectanglesOverlap(panel, other)) {\n      collisions.add(id);\n    }\n  }\n\n  return Array.from(collisions);\n}\n\n/**\n * Check if a panel at the given position would collide with any existing panels\n * 指定された位置にパネルを配置した場合に衝突があるかをチェック\n */\nexport function hasCollision(\n  candidate: { x: number; y: number; w: number; h: number },\n  excludeId: PanelId,\n  panelMap: Map<PanelId, PanelCoordinate>\n): boolean {\n  for (const [id, panel] of panelMap) {\n    if (id === excludeId) continue;\n    if (rectanglesOverlap(candidate, panel)) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Calculate the minimum distance to push a panel to avoid collision\n * パネルを押しのけるための最小距離を計算\n */\nfunction calculatePushDistance(\n  pusher: PanelCoordinate,\n  pushed: PanelCoordinate,\n  columnCount: number\n): { direction: \"right\" | \"down\"; distance: number } | null {\n  // Calculate how far to push horizontally (to the right)\n  // 横方向（右）にどれだけ押すか計算\n  const pushRight = pusher.x + pusher.w - pushed.x;\n  const canPushRight = pushed.x + pushed.w + pushRight <= columnCount;\n\n  // Calculate how far to push vertically (down)\n  // 縦方向（下）にどれだけ押すか計算\n  const pushDown = pusher.y + pusher.h - pushed.y;\n\n  // Priority 1: Horizontal push if possible\n  // 優先順位1: 可能なら横方向に押す\n  if (canPushRight && pushRight > 0) {\n    return { direction: \"right\", distance: pushRight };\n  }\n\n  // Priority 2: Vertical push\n  // 優先順位2: 縦方向に押す\n  if (pushDown > 0) {\n    return { direction: \"down\", distance: pushDown };\n  }\n\n  return null;\n}\n\n/**\n * Find a new position for a panel by pushing it away from the colliding panel\n * Priority: horizontal (right) first, then vertical (down)\n * 衝突したパネルを押しのける方向に移動させる\n * 優先順位: 横方向（右）→縦方向（下）\n */\nexport function findNewPosition(\n  panel: PanelCoordinate,\n  pusher: PanelCoordinate,\n  columnCount: number\n): { x: number; y: number } {\n  const pushInfo = calculatePushDistance(pusher, panel, columnCount);\n\n  if (!pushInfo) {\n    // No push needed or can't determine direction\n    // Fallback: move down\n    return { x: panel.x, y: panel.y + 1 };\n  }\n\n  if (pushInfo.direction === \"right\") {\n    // Push horizontally to the right\n    // 横方向（右）に押す\n    const newX = panel.x + pushInfo.distance;\n    if (newX + panel.w <= columnCount) {\n      return { x: newX, y: panel.y };\n    }\n    // Can't fit horizontally, push down instead\n    // 横方向に入らない場合は下に押す\n  }\n\n  // Push vertically down\n  // 縦方向（下）に押す\n  return { x: panel.x, y: panel.y + pushInfo.distance };\n}\n\n/**\n * Constrain a panel to stay within grid boundaries\n * パネルをグリッド境界内に制約\n */\nfunction constrainToGrid(panel: PanelCoordinate, columnCount: number): PanelCoordinate {\n  // Ensure x + w doesn't exceed columnCount\n  // x + w が columnCount を超えないようにする\n  const maxX = Math.max(0, columnCount - panel.w);\n  const constrainedX = Math.max(0, Math.min(panel.x, maxX));\n\n  // Ensure y is non-negative\n  // y が負にならないようにする\n  const constrainedY = Math.max(0, panel.y);\n\n  return {\n    ...panel,\n    x: constrainedX,\n    y: constrainedY,\n  };\n}\n\n/**\n * Rearrange panels to resolve collisions when a panel is moved or resized\n * Panels are moved horizontally first, then vertically if needed\n * For compound resizes (both width and height change), uses two-phase processing\n * パネルの移動・リサイズ時に衝突を解決するようにパネルを再配置\n * 横方向を優先し、必要に応じて縦方向に移動\n * 幅と高さが同時に変更される場合は、二段階処理を使用\n */\nexport function rearrangePanels(\n  movingPanel: PanelCoordinate,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): PanelCoordinate[] {\n  // Constrain the moving panel to grid boundaries\n  // 移動中のパネルをグリッド境界内に制約\n  const constrainedMovingPanel = constrainToGrid(movingPanel, columnCount);\n\n  // Check if this is a compound resize (both width and height changed)\n  // 幅と高さの両方が変更されたかチェック\n  const originalPanel = allPanels.find((p) => p.id === movingPanel.id);\n  if (originalPanel) {\n    const widthChanged = originalPanel.w !== constrainedMovingPanel.w;\n    const heightChanged = originalPanel.h !== constrainedMovingPanel.h;\n\n    if (widthChanged && heightChanged) {\n      // Two-phase processing: width first, then height\n      // 二段階処理: 幅を先に、次に高さ\n\n      // Phase 1: Apply width change only\n      // フェーズ1: 幅の変更のみを適用\n      const widthOnlyPanel = {\n        ...constrainedMovingPanel,\n        h: originalPanel.h, // Keep original height\n      };\n      const afterWidthChange = rearrangePanelsInternal(widthOnlyPanel, allPanels, columnCount);\n\n      // Phase 2: Apply height change to the result\n      // フェーズ2: 結果に高さの変更を適用\n      const heightChangedPanel = {\n        ...constrainedMovingPanel,\n        // Use the new position if panel-1 was moved during width phase\n        x: afterWidthChange.find((p) => p.id === movingPanel.id)?.x ?? constrainedMovingPanel.x,\n        y: afterWidthChange.find((p) => p.id === movingPanel.id)?.y ?? constrainedMovingPanel.y,\n      };\n      return rearrangePanelsInternal(heightChangedPanel, afterWidthChange, columnCount);\n    }\n  }\n\n  // Single dimension change or move - use normal processing\n  // 単一次元の変更または移動 - 通常の処理を使用\n  return rearrangePanelsInternal(constrainedMovingPanel, allPanels, columnCount);\n}\n\n/**\n * Internal implementation of panel rearrangement\n * パネル再配置の内部実装\n */\nfunction rearrangePanelsInternal(\n  movingPanel: PanelCoordinate,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): PanelCoordinate[] {\n  // Create a map for fast panel lookup\n  // パネルIDから座標への高速マップを作成\n  const panelMap = new Map<PanelId, PanelCoordinate>();\n  for (const panel of allPanels) {\n    panelMap.set(panel.id, { ...panel });\n  }\n\n  // Update the moving panel's position in the map\n  // 移動中のパネルの位置をマップに反映\n  panelMap.set(movingPanel.id, { ...movingPanel });\n\n  // Queue for processing panels that need to be repositioned\n  // 再配置が必要なパネルの処理キュー\n  const queue: PanelCoordinate[] = [{ ...movingPanel }];\n\n  // Track processed panels to avoid reprocessing unnecessarily\n  // 不要な再処理を避けるため処理済みパネルを追跡\n  const processed = new Set<PanelId>();\n\n  // Track processing count to prevent infinite loops\n  // 無限ループを防ぐため処理回数を追跡\n  const processCount = new Map<PanelId, number>();\n  const MAX_PROCESS_COUNT = 10;\n\n  // Process panels until no more collisions\n  // 衝突がなくなるまでパネルを処理\n  while (queue.length > 0) {\n    const current = queue.shift()!;\n\n    // Safety check: prevent infinite loops\n    // 安全チェック: 無限ループを防止\n    const count = processCount.get(current.id) || 0;\n    if (count >= MAX_PROCESS_COUNT) continue;\n    processCount.set(current.id, count + 1);\n\n    // Skip if the position in queue doesn't match current position in map (outdated entry)\n    // キューの位置がマップの現在位置と一致しない場合はスキップ（古いエントリ）\n    const currentInMap = panelMap.get(current.id);\n    if (currentInMap && (currentInMap.x !== current.x || currentInMap.y !== current.y)) {\n      continue;\n    }\n\n    // Skip if already processed at this position\n    // この位置で既に処理済みの場合はスキップ\n    if (processed.has(current.id)) {\n      continue;\n    }\n\n    // Detect collisions with current panel position\n    // 現在のパネル位置での衝突を検出\n    const collidingIds = detectCollisions(current, panelMap);\n\n    if (collidingIds.length === 0) {\n      panelMap.set(current.id, current);\n      processed.add(current.id);\n      continue;\n    }\n\n    // Sort colliding panels by position (top-left to bottom-right) for consistent processing\n    // 一貫した処理のため、衝突パネルを位置順（左上から右下）にソート\n    const sortedCollidingIds = collidingIds.sort((a, b) => {\n      const panelA = panelMap.get(a)!;\n      const panelB = panelMap.get(b)!;\n      if (panelA.y !== panelB.y) return panelA.y - panelB.y;\n      return panelA.x - panelB.x;\n    });\n\n    // Track panels pushed in this iteration to detect secondary collisions\n    // この反復で押されたパネルを追跡し、二次衝突を検出\n    const pushedInIteration = new Set<PanelId>();\n\n    // Resolve collisions by pushing colliding panels\n    // 衝突したパネルを押しのけて衝突を解決\n    for (const collidingId of sortedCollidingIds) {\n      const colliding = panelMap.get(collidingId);\n      if (!colliding) continue;\n\n      // Calculate new position for the colliding panel\n      // 衝突パネルの新しい位置を計算\n      const newPos = findNewPosition(colliding, current, columnCount);\n      const candidate = { ...colliding, x: newPos.x, y: newPos.y };\n\n      // Check if this would collide with a panel we just pushed in this same iteration\n      // 同じ反復内で押したパネルと衝突するかチェック\n      let wouldCollideWithPushed = false;\n      for (const pushedId of pushedInIteration) {\n        const pushedPanel = panelMap.get(pushedId)!;\n        if (rectanglesOverlap(candidate, pushedPanel)) {\n          wouldCollideWithPushed = true;\n          break;\n        }\n      }\n\n      if (wouldCollideWithPushed) {\n        // Skip pushing this panel to avoid creating secondary collisions\n        // Let the queue handle it in a subsequent iteration\n        continue;\n      }\n\n      // Update panel map and add to queue for further processing\n      // パネルマップを更新し、さらなる処理のためキューに追加\n      panelMap.set(collidingId, candidate);\n      queue.push(candidate);\n      pushedInIteration.add(collidingId);\n    }\n\n    panelMap.set(current.id, current);\n    processed.add(current.id);\n  }\n\n  // Return the rearranged panels\n  // 再配置後のパネルを返す\n  return Array.from(panelMap.values());\n}\n\n/**\n * Find a new position for a panel to be added\n * 追加するパネルの新しい位置を見つける\n */\nexport function findNewPositionToAddPanel(\n  panelToAdd: Partial<PanelCoordinate>,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): { x: number; y: number } {\n  const id = panelToAdd.id || Math.random().toString(36).substring(2, 15);\n  const w = panelToAdd.w || 1;\n  const h = panelToAdd.h || 1;\n\n  // Create a map for fast panel lookup\n  const panelMap = new Map<PanelId, PanelCoordinate>();\n  for (const panel of allPanels) {\n    panelMap.set(panel.id, panel);\n  }\n\n  // Calculate maximum row based on existing panels\n  // Add some buffer rows to ensure we can find a position\n  const maxExistingY = allPanels.length > 0 ? Math.max(...allPanels.map((p) => p.y + p.h)) : 0;\n  const MAX_ROWS = Math.max(maxExistingY + 100, 1000);\n\n  // Try to find a position starting from top-left\n  for (let y = 0; y < MAX_ROWS; y++) {\n    for (let x = 0; x <= columnCount - w; x++) {\n      const candidate: PanelCoordinate = {\n        id,\n        x,\n        y,\n        w,\n        h,\n      };\n\n      // Check if this position has any collisions\n      if (!hasCollision(candidate, candidate.id, panelMap)) {\n        return { x, y };\n      }\n    }\n  }\n\n  // Fallback: if no position found, place at the bottom\n  return { x: 0, y: maxExistingY };\n}\n"],"mappings":"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"}

package/dist/helpers/rearrangement.d.cts

@@ -5,8 +5,10 @@ import { PanelCoordinate } from "../types.cjs";
 /**
  * Rearrange panels to resolve collisions when a panel is moved or resized
  * Panels are moved horizontally first, then vertically if needed
+ * For compound resizes (both width and height change), uses two-phase processing
  * パネルの移動・リサイズ時に衝突を解決するようにパネルを再配置
  * 横方向を優先し、必要に応じて縦方向に移動
+ * 幅と高さが同時に変更される場合は、二段階処理を使用
  */
 declare function rearrangePanels(movingPanel: PanelCoordinate, allPanels: PanelCoordinate[], columnCount: number): PanelCoordinate[];
 //#endregion

package/dist/helpers/rearrangement.d.mts

@@ -5,8 +5,10 @@ import { PanelCoordinate } from "../types.mjs";
 /**
  * Rearrange panels to resolve collisions when a panel is moved or resized
  * Panels are moved horizontally first, then vertically if needed
+ * For compound resizes (both width and height change), uses two-phase processing
  * パネルの移動・リサイズ時に衝突を解決するようにパネルを再配置
  * 横方向を優先し、必要に応じて縦方向に移動
+ * 幅と高さが同時に変更される場合は、二段階処理を使用
  */
 declare function rearrangePanels(movingPanel: PanelCoordinate, allPanels: PanelCoordinate[], columnCount: number): PanelCoordinate[];
 //#endregion

package/dist/helpers/rearrangement.mjs

@@ -88,38 +88,85 @@ function constrainToGrid(panel, columnCount) {
 /**
 * Rearrange panels to resolve collisions when a panel is moved or resized
 * Panels are moved horizontally first, then vertically if needed
+* For compound resizes (both width and height change), uses two-phase processing
 * パネルの移動・リサイズ時に衝突を解決するようにパネルを再配置
 * 横方向を優先し、必要に応じて縦方向に移動
+* 幅と高さが同時に変更される場合は、二段階処理を使用
 */
 function rearrangePanels(movingPanel, allPanels, columnCount) {
 	const constrainedMovingPanel = constrainToGrid(movingPanel, columnCount);
+	const originalPanel = allPanels.find((p) => p.id === movingPanel.id);
+	if (originalPanel) {
+		const widthChanged = originalPanel.w !== constrainedMovingPanel.w;
+		const heightChanged = originalPanel.h !== constrainedMovingPanel.h;
+		if (widthChanged && heightChanged) {
+			const afterWidthChange = rearrangePanelsInternal({
+				...constrainedMovingPanel,
+				h: originalPanel.h
+			}, allPanels, columnCount);
+			return rearrangePanelsInternal({
+				...constrainedMovingPanel,
+				x: afterWidthChange.find((p) => p.id === movingPanel.id)?.x ?? constrainedMovingPanel.x,
+				y: afterWidthChange.find((p) => p.id === movingPanel.id)?.y ?? constrainedMovingPanel.y
+			}, afterWidthChange, columnCount);
+		}
+	}
+	return rearrangePanelsInternal(constrainedMovingPanel, allPanels, columnCount);
+}
+/**
+* Internal implementation of panel rearrangement
+* パネル再配置の内部実装
+*/
+function rearrangePanelsInternal(movingPanel, allPanels, columnCount) {
 	const panelMap = /* @__PURE__ */ new Map();
 	for (const panel of allPanels) panelMap.set(panel.id, { ...panel });
-	panelMap.set(constrainedMovingPanel.id, { ...constrainedMovingPanel });
-	const queue = [{ ...constrainedMovingPanel }];
+	panelMap.set(movingPanel.id, { ...movingPanel });
+	const queue = [{ ...movingPanel }];
 	const processed = /* @__PURE__ */ new Set();
+	const processCount = /* @__PURE__ */ new Map();
+	const MAX_PROCESS_COUNT = 10;
 	while (queue.length > 0) {
 		const current = queue.shift();
+		const count = processCount.get(current.id) || 0;
+		if (count >= MAX_PROCESS_COUNT) continue;
+		processCount.set(current.id, count + 1);
+		const currentInMap = panelMap.get(current.id);
+		if (currentInMap && (currentInMap.x !== current.x || currentInMap.y !== current.y)) continue;
 		if (processed.has(current.id)) continue;
-		processed.add(current.id);
 		const collidingIds = detectCollisions(current, panelMap);
 		if (collidingIds.length === 0) {
 			panelMap.set(current.id, current);
+			processed.add(current.id);
 			continue;
 		}
-		for (const collidingId of collidingIds) {
+		const sortedCollidingIds = collidingIds.sort((a, b) => {
+			const panelA = panelMap.get(a);
+			const panelB = panelMap.get(b);
+			if (panelA.y !== panelB.y) return panelA.y - panelB.y;
+			return panelA.x - panelB.x;
+		});
+		const pushedInIteration = /* @__PURE__ */ new Set();
+		for (const collidingId of sortedCollidingIds) {
 			const colliding = panelMap.get(collidingId);
 			if (!colliding) continue;
 			const newPos = findNewPosition(colliding, current, columnCount);
-			const updated = {
+			const candidate = {
 				...colliding,
 				x: newPos.x,
 				y: newPos.y
 			};
-			panelMap.set(collidingId, updated);
-			queue.push(updated);
+			let wouldCollideWithPushed = false;
+			for (const pushedId of pushedInIteration) if (rectanglesOverlap(candidate, panelMap.get(pushedId))) {
+				wouldCollideWithPushed = true;
+				break;
+			}
+			if (wouldCollideWithPushed) continue;
+			panelMap.set(collidingId, candidate);
+			queue.push(candidate);
+			pushedInIteration.add(collidingId);
 		}
 		panelMap.set(current.id, current);
+		processed.add(current.id);
 	}
 	return Array.from(panelMap.values());
 }

package/dist/helpers/rearrangement.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"rearrangement.mjs","names":["queue: PanelCoordinate[]","candidate: PanelCoordinate"],"sources":["../../src/helpers/rearrangement.ts"],"sourcesContent":["import type { PanelCoordinate, PanelId } from \"../types\";\n\n/**\n * Check if two rectangles overlap using AABB (Axis-Aligned Bounding Box) test\n * 2つの矩形が重なっているかをAABBテストで判定\n */\nexport function rectanglesOverlap(\n  a: { x: number; y: number; w: number; h: number },\n  b: { x: number; y: number; w: number; h: number }\n): boolean {\n  return !(\n    (\n      a.x + a.w <= b.x || // a is to the left of b\n      b.x + b.w <= a.x || // b is to the left of a\n      a.y + a.h <= b.y || // a is above b\n      b.y + b.h <= a.y\n    ) // b is above a\n  );\n}\n\n/**\n * Detect all panels that collide with the given panel\n * 指定されたパネルと衝突する全てのパネルを検出\n */\nexport function detectCollisions(panel: PanelCoordinate, panelMap: Map<PanelId, PanelCoordinate>): PanelId[] {\n  const collisions = new Set<PanelId>();\n\n  for (const [id, other] of panelMap) {\n    if (id === panel.id) continue;\n\n    if (rectanglesOverlap(panel, other)) {\n      collisions.add(id);\n    }\n  }\n\n  return Array.from(collisions);\n}\n\n/**\n * Check if a panel at the given position would collide with any existing panels\n * 指定された位置にパネルを配置した場合に衝突があるかをチェック\n */\nexport function hasCollision(\n  candidate: { x: number; y: number; w: number; h: number },\n  excludeId: PanelId,\n  panelMap: Map<PanelId, PanelCoordinate>\n): boolean {\n  for (const [id, panel] of panelMap) {\n    if (id === excludeId) continue;\n    if (rectanglesOverlap(candidate, panel)) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Calculate the minimum distance to push a panel to avoid collision\n * パネルを押しのけるための最小距離を計算\n */\nfunction calculatePushDistance(\n  pusher: PanelCoordinate,\n  pushed: PanelCoordinate,\n  columnCount: number\n): { direction: \"right\" | \"down\"; distance: number } | null {\n  // Calculate how far to push horizontally (to the right)\n  // 横方向（右）にどれだけ押すか計算\n  const pushRight = pusher.x + pusher.w - pushed.x;\n  const canPushRight = pushed.x + pushed.w + pushRight <= columnCount;\n\n  // Calculate how far to push vertically (down)\n  // 縦方向（下）にどれだけ押すか計算\n  const pushDown = pusher.y + pusher.h - pushed.y;\n\n  // Priority 1: Horizontal push if possible\n  // 優先順位1: 可能なら横方向に押す\n  if (canPushRight && pushRight > 0) {\n    return { direction: \"right\", distance: pushRight };\n  }\n\n  // Priority 2: Vertical push\n  // 優先順位2: 縦方向に押す\n  if (pushDown > 0) {\n    return { direction: \"down\", distance: pushDown };\n  }\n\n  return null;\n}\n\n/**\n * Find a new position for a panel by pushing it away from the colliding panel\n * Priority: horizontal (right) first, then vertical (down)\n * 衝突したパネルを押しのける方向に移動させる\n * 優先順位: 横方向（右）→縦方向（下）\n */\nexport function findNewPosition(\n  panel: PanelCoordinate,\n  pusher: PanelCoordinate,\n  columnCount: number\n): { x: number; y: number } {\n  const pushInfo = calculatePushDistance(pusher, panel, columnCount);\n\n  if (!pushInfo) {\n    // No push needed or can't determine direction\n    // Fallback: move down\n    return { x: panel.x, y: panel.y + 1 };\n  }\n\n  if (pushInfo.direction === \"right\") {\n    // Push horizontally to the right\n    // 横方向（右）に押す\n    const newX = panel.x + pushInfo.distance;\n    if (newX + panel.w <= columnCount) {\n      return { x: newX, y: panel.y };\n    }\n    // Can't fit horizontally, push down instead\n    // 横方向に入らない場合は下に押す\n  }\n\n  // Push vertically down\n  // 縦方向（下）に押す\n  return { x: panel.x, y: panel.y + pushInfo.distance };\n}\n\n/**\n * Constrain a panel to stay within grid boundaries\n * パネルをグリッド境界内に制約\n */\nfunction constrainToGrid(panel: PanelCoordinate, columnCount: number): PanelCoordinate {\n  // Ensure x + w doesn't exceed columnCount\n  // x + w が columnCount を超えないようにする\n  const maxX = Math.max(0, columnCount - panel.w);\n  const constrainedX = Math.max(0, Math.min(panel.x, maxX));\n\n  // Ensure y is non-negative\n  // y が負にならないようにする\n  const constrainedY = Math.max(0, panel.y);\n\n  return {\n    ...panel,\n    x: constrainedX,\n    y: constrainedY,\n  };\n}\n\n/**\n * Rearrange panels to resolve collisions when a panel is moved or resized\n * Panels are moved horizontally first, then vertically if needed\n * パネルの移動・リサイズ時に衝突を解決するようにパネルを再配置\n * 横方向を優先し、必要に応じて縦方向に移動\n */\nexport function rearrangePanels(\n  movingPanel: PanelCoordinate,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): PanelCoordinate[] {\n  // Constrain the moving panel to grid boundaries\n  // 移動中のパネルをグリッド境界内に制約\n  const constrainedMovingPanel = constrainToGrid(movingPanel, columnCount);\n\n  // Create a map for fast panel lookup\n  // パネルIDから座標への高速マップを作成\n  const panelMap = new Map<PanelId, PanelCoordinate>();\n  for (const panel of allPanels) {\n    panelMap.set(panel.id, { ...panel });\n  }\n\n  // Update the moving panel's position in the map\n  // 移動中のパネルの位置をマップに反映\n  panelMap.set(constrainedMovingPanel.id, { ...constrainedMovingPanel });\n\n  // Queue for processing panels that need to be repositioned\n  // 再配置が必要なパネルの処理キュー\n  const queue: PanelCoordinate[] = [{ ...constrainedMovingPanel }];\n  const processed = new Set<PanelId>();\n\n  // Process panels until no more collisions\n  // 衝突がなくなるまでパネルを処理\n  while (queue.length > 0) {\n    const current = queue.shift()!;\n\n    // Skip if already processed\n    if (processed.has(current.id)) {\n      continue;\n    }\n    processed.add(current.id);\n\n    // Detect collisions with current panel position\n    // 現在のパネル位置での衝突を検出\n    const collidingIds = detectCollisions(current, panelMap);\n\n    if (collidingIds.length === 0) {\n      // No collisions, keep current position\n      // 衝突なし、現在の位置を維持\n      panelMap.set(current.id, current);\n      continue;\n    }\n\n    // Resolve collisions by pushing colliding panels\n    // 衝突したパネルを押しのけて衝突を解決\n    for (const collidingId of collidingIds) {\n      const colliding = panelMap.get(collidingId);\n      if (!colliding) continue;\n\n      // Find new position by pushing the colliding panel away\n      // 衝突したパネルを押しのける方向に移動\n      const newPos = findNewPosition(colliding, current, columnCount);\n\n      // Update the panel's position\n      // パネルの位置を更新\n      const updated = { ...colliding, x: newPos.x, y: newPos.y };\n      panelMap.set(collidingId, updated);\n\n      // Add to queue for further collision checking\n      // 再度衝突チェックのためキューに追加\n      queue.push(updated);\n    }\n\n    // Confirm current panel's position\n    // 現在のパネルの位置を確定\n    panelMap.set(current.id, current);\n  }\n\n  // Return the rearranged panels\n  // 再配置後のパネルを返す\n  return Array.from(panelMap.values());\n}\n\n/**\n * Find a new position for a panel to be added\n * 追加するパネルの新しい位置を見つける\n */\nexport function findNewPositionToAddPanel(\n  panelToAdd: Partial<PanelCoordinate>,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): { x: number; y: number } {\n  const id = panelToAdd.id || Math.random().toString(36).substring(2, 15);\n  const w = panelToAdd.w || 1;\n  const h = panelToAdd.h || 1;\n\n  // Create a map for fast panel lookup\n  const panelMap = new Map<PanelId, PanelCoordinate>();\n  for (const panel of allPanels) {\n    panelMap.set(panel.id, panel);\n  }\n\n  // Calculate maximum row based on existing panels\n  // Add some buffer rows to ensure we can find a position\n  const maxExistingY = allPanels.length > 0 ? Math.max(...allPanels.map((p) => p.y + p.h)) : 0;\n  const MAX_ROWS = Math.max(maxExistingY + 100, 1000);\n\n  // Try to find a position starting from top-left\n  for (let y = 0; y < MAX_ROWS; y++) {\n    for (let x = 0; x <= columnCount - w; x++) {\n      const candidate: PanelCoordinate = {\n        id,\n        x,\n        y,\n        w,\n        h,\n      };\n\n      // Check if this position has any collisions\n      if (!hasCollision(candidate, candidate.id, panelMap)) {\n        return { x, y };\n      }\n    }\n  }\n\n  // Fallback: if no position found, place at the bottom\n  return { x: 0, y: maxExistingY };\n}\n"],"mappings":"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"}
+{"version":3,"file":"rearrangement.mjs","names":["queue: PanelCoordinate[]","candidate: PanelCoordinate"],"sources":["../../src/helpers/rearrangement.ts"],"sourcesContent":["import type { PanelCoordinate, PanelId } from \"../types\";\n\n/**\n * Check if two rectangles overlap using AABB (Axis-Aligned Bounding Box) test\n * 2つの矩形が重なっているかをAABBテストで判定\n */\nexport function rectanglesOverlap(\n  a: { x: number; y: number; w: number; h: number },\n  b: { x: number; y: number; w: number; h: number }\n): boolean {\n  return !(\n    (\n      a.x + a.w <= b.x || // a is to the left of b\n      b.x + b.w <= a.x || // b is to the left of a\n      a.y + a.h <= b.y || // a is above b\n      b.y + b.h <= a.y\n    ) // b is above a\n  );\n}\n\n/**\n * Detect all panels that collide with the given panel\n * 指定されたパネルと衝突する全てのパネルを検出\n */\nexport function detectCollisions(panel: PanelCoordinate, panelMap: Map<PanelId, PanelCoordinate>): PanelId[] {\n  const collisions = new Set<PanelId>();\n\n  for (const [id, other] of panelMap) {\n    if (id === panel.id) continue;\n\n    if (rectanglesOverlap(panel, other)) {\n      collisions.add(id);\n    }\n  }\n\n  return Array.from(collisions);\n}\n\n/**\n * Check if a panel at the given position would collide with any existing panels\n * 指定された位置にパネルを配置した場合に衝突があるかをチェック\n */\nexport function hasCollision(\n  candidate: { x: number; y: number; w: number; h: number },\n  excludeId: PanelId,\n  panelMap: Map<PanelId, PanelCoordinate>\n): boolean {\n  for (const [id, panel] of panelMap) {\n    if (id === excludeId) continue;\n    if (rectanglesOverlap(candidate, panel)) {\n      return true;\n    }\n  }\n  return false;\n}\n\n/**\n * Calculate the minimum distance to push a panel to avoid collision\n * パネルを押しのけるための最小距離を計算\n */\nfunction calculatePushDistance(\n  pusher: PanelCoordinate,\n  pushed: PanelCoordinate,\n  columnCount: number\n): { direction: \"right\" | \"down\"; distance: number } | null {\n  // Calculate how far to push horizontally (to the right)\n  // 横方向（右）にどれだけ押すか計算\n  const pushRight = pusher.x + pusher.w - pushed.x;\n  const canPushRight = pushed.x + pushed.w + pushRight <= columnCount;\n\n  // Calculate how far to push vertically (down)\n  // 縦方向（下）にどれだけ押すか計算\n  const pushDown = pusher.y + pusher.h - pushed.y;\n\n  // Priority 1: Horizontal push if possible\n  // 優先順位1: 可能なら横方向に押す\n  if (canPushRight && pushRight > 0) {\n    return { direction: \"right\", distance: pushRight };\n  }\n\n  // Priority 2: Vertical push\n  // 優先順位2: 縦方向に押す\n  if (pushDown > 0) {\n    return { direction: \"down\", distance: pushDown };\n  }\n\n  return null;\n}\n\n/**\n * Find a new position for a panel by pushing it away from the colliding panel\n * Priority: horizontal (right) first, then vertical (down)\n * 衝突したパネルを押しのける方向に移動させる\n * 優先順位: 横方向（右）→縦方向（下）\n */\nexport function findNewPosition(\n  panel: PanelCoordinate,\n  pusher: PanelCoordinate,\n  columnCount: number\n): { x: number; y: number } {\n  const pushInfo = calculatePushDistance(pusher, panel, columnCount);\n\n  if (!pushInfo) {\n    // No push needed or can't determine direction\n    // Fallback: move down\n    return { x: panel.x, y: panel.y + 1 };\n  }\n\n  if (pushInfo.direction === \"right\") {\n    // Push horizontally to the right\n    // 横方向（右）に押す\n    const newX = panel.x + pushInfo.distance;\n    if (newX + panel.w <= columnCount) {\n      return { x: newX, y: panel.y };\n    }\n    // Can't fit horizontally, push down instead\n    // 横方向に入らない場合は下に押す\n  }\n\n  // Push vertically down\n  // 縦方向（下）に押す\n  return { x: panel.x, y: panel.y + pushInfo.distance };\n}\n\n/**\n * Constrain a panel to stay within grid boundaries\n * パネルをグリッド境界内に制約\n */\nfunction constrainToGrid(panel: PanelCoordinate, columnCount: number): PanelCoordinate {\n  // Ensure x + w doesn't exceed columnCount\n  // x + w が columnCount を超えないようにする\n  const maxX = Math.max(0, columnCount - panel.w);\n  const constrainedX = Math.max(0, Math.min(panel.x, maxX));\n\n  // Ensure y is non-negative\n  // y が負にならないようにする\n  const constrainedY = Math.max(0, panel.y);\n\n  return {\n    ...panel,\n    x: constrainedX,\n    y: constrainedY,\n  };\n}\n\n/**\n * Rearrange panels to resolve collisions when a panel is moved or resized\n * Panels are moved horizontally first, then vertically if needed\n * For compound resizes (both width and height change), uses two-phase processing\n * パネルの移動・リサイズ時に衝突を解決するようにパネルを再配置\n * 横方向を優先し、必要に応じて縦方向に移動\n * 幅と高さが同時に変更される場合は、二段階処理を使用\n */\nexport function rearrangePanels(\n  movingPanel: PanelCoordinate,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): PanelCoordinate[] {\n  // Constrain the moving panel to grid boundaries\n  // 移動中のパネルをグリッド境界内に制約\n  const constrainedMovingPanel = constrainToGrid(movingPanel, columnCount);\n\n  // Check if this is a compound resize (both width and height changed)\n  // 幅と高さの両方が変更されたかチェック\n  const originalPanel = allPanels.find((p) => p.id === movingPanel.id);\n  if (originalPanel) {\n    const widthChanged = originalPanel.w !== constrainedMovingPanel.w;\n    const heightChanged = originalPanel.h !== constrainedMovingPanel.h;\n\n    if (widthChanged && heightChanged) {\n      // Two-phase processing: width first, then height\n      // 二段階処理: 幅を先に、次に高さ\n\n      // Phase 1: Apply width change only\n      // フェーズ1: 幅の変更のみを適用\n      const widthOnlyPanel = {\n        ...constrainedMovingPanel,\n        h: originalPanel.h, // Keep original height\n      };\n      const afterWidthChange = rearrangePanelsInternal(widthOnlyPanel, allPanels, columnCount);\n\n      // Phase 2: Apply height change to the result\n      // フェーズ2: 結果に高さの変更を適用\n      const heightChangedPanel = {\n        ...constrainedMovingPanel,\n        // Use the new position if panel-1 was moved during width phase\n        x: afterWidthChange.find((p) => p.id === movingPanel.id)?.x ?? constrainedMovingPanel.x,\n        y: afterWidthChange.find((p) => p.id === movingPanel.id)?.y ?? constrainedMovingPanel.y,\n      };\n      return rearrangePanelsInternal(heightChangedPanel, afterWidthChange, columnCount);\n    }\n  }\n\n  // Single dimension change or move - use normal processing\n  // 単一次元の変更または移動 - 通常の処理を使用\n  return rearrangePanelsInternal(constrainedMovingPanel, allPanels, columnCount);\n}\n\n/**\n * Internal implementation of panel rearrangement\n * パネル再配置の内部実装\n */\nfunction rearrangePanelsInternal(\n  movingPanel: PanelCoordinate,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): PanelCoordinate[] {\n  // Create a map for fast panel lookup\n  // パネルIDから座標への高速マップを作成\n  const panelMap = new Map<PanelId, PanelCoordinate>();\n  for (const panel of allPanels) {\n    panelMap.set(panel.id, { ...panel });\n  }\n\n  // Update the moving panel's position in the map\n  // 移動中のパネルの位置をマップに反映\n  panelMap.set(movingPanel.id, { ...movingPanel });\n\n  // Queue for processing panels that need to be repositioned\n  // 再配置が必要なパネルの処理キュー\n  const queue: PanelCoordinate[] = [{ ...movingPanel }];\n\n  // Track processed panels to avoid reprocessing unnecessarily\n  // 不要な再処理を避けるため処理済みパネルを追跡\n  const processed = new Set<PanelId>();\n\n  // Track processing count to prevent infinite loops\n  // 無限ループを防ぐため処理回数を追跡\n  const processCount = new Map<PanelId, number>();\n  const MAX_PROCESS_COUNT = 10;\n\n  // Process panels until no more collisions\n  // 衝突がなくなるまでパネルを処理\n  while (queue.length > 0) {\n    const current = queue.shift()!;\n\n    // Safety check: prevent infinite loops\n    // 安全チェック: 無限ループを防止\n    const count = processCount.get(current.id) || 0;\n    if (count >= MAX_PROCESS_COUNT) continue;\n    processCount.set(current.id, count + 1);\n\n    // Skip if the position in queue doesn't match current position in map (outdated entry)\n    // キューの位置がマップの現在位置と一致しない場合はスキップ（古いエントリ）\n    const currentInMap = panelMap.get(current.id);\n    if (currentInMap && (currentInMap.x !== current.x || currentInMap.y !== current.y)) {\n      continue;\n    }\n\n    // Skip if already processed at this position\n    // この位置で既に処理済みの場合はスキップ\n    if (processed.has(current.id)) {\n      continue;\n    }\n\n    // Detect collisions with current panel position\n    // 現在のパネル位置での衝突を検出\n    const collidingIds = detectCollisions(current, panelMap);\n\n    if (collidingIds.length === 0) {\n      panelMap.set(current.id, current);\n      processed.add(current.id);\n      continue;\n    }\n\n    // Sort colliding panels by position (top-left to bottom-right) for consistent processing\n    // 一貫した処理のため、衝突パネルを位置順（左上から右下）にソート\n    const sortedCollidingIds = collidingIds.sort((a, b) => {\n      const panelA = panelMap.get(a)!;\n      const panelB = panelMap.get(b)!;\n      if (panelA.y !== panelB.y) return panelA.y - panelB.y;\n      return panelA.x - panelB.x;\n    });\n\n    // Track panels pushed in this iteration to detect secondary collisions\n    // この反復で押されたパネルを追跡し、二次衝突を検出\n    const pushedInIteration = new Set<PanelId>();\n\n    // Resolve collisions by pushing colliding panels\n    // 衝突したパネルを押しのけて衝突を解決\n    for (const collidingId of sortedCollidingIds) {\n      const colliding = panelMap.get(collidingId);\n      if (!colliding) continue;\n\n      // Calculate new position for the colliding panel\n      // 衝突パネルの新しい位置を計算\n      const newPos = findNewPosition(colliding, current, columnCount);\n      const candidate = { ...colliding, x: newPos.x, y: newPos.y };\n\n      // Check if this would collide with a panel we just pushed in this same iteration\n      // 同じ反復内で押したパネルと衝突するかチェック\n      let wouldCollideWithPushed = false;\n      for (const pushedId of pushedInIteration) {\n        const pushedPanel = panelMap.get(pushedId)!;\n        if (rectanglesOverlap(candidate, pushedPanel)) {\n          wouldCollideWithPushed = true;\n          break;\n        }\n      }\n\n      if (wouldCollideWithPushed) {\n        // Skip pushing this panel to avoid creating secondary collisions\n        // Let the queue handle it in a subsequent iteration\n        continue;\n      }\n\n      // Update panel map and add to queue for further processing\n      // パネルマップを更新し、さらなる処理のためキューに追加\n      panelMap.set(collidingId, candidate);\n      queue.push(candidate);\n      pushedInIteration.add(collidingId);\n    }\n\n    panelMap.set(current.id, current);\n    processed.add(current.id);\n  }\n\n  // Return the rearranged panels\n  // 再配置後のパネルを返す\n  return Array.from(panelMap.values());\n}\n\n/**\n * Find a new position for a panel to be added\n * 追加するパネルの新しい位置を見つける\n */\nexport function findNewPositionToAddPanel(\n  panelToAdd: Partial<PanelCoordinate>,\n  allPanels: PanelCoordinate[],\n  columnCount: number\n): { x: number; y: number } {\n  const id = panelToAdd.id || Math.random().toString(36).substring(2, 15);\n  const w = panelToAdd.w || 1;\n  const h = panelToAdd.h || 1;\n\n  // Create a map for fast panel lookup\n  const panelMap = new Map<PanelId, PanelCoordinate>();\n  for (const panel of allPanels) {\n    panelMap.set(panel.id, panel);\n  }\n\n  // Calculate maximum row based on existing panels\n  // Add some buffer rows to ensure we can find a position\n  const maxExistingY = allPanels.length > 0 ? Math.max(...allPanels.map((p) => p.y + p.h)) : 0;\n  const MAX_ROWS = Math.max(maxExistingY + 100, 1000);\n\n  // Try to find a position starting from top-left\n  for (let y = 0; y < MAX_ROWS; y++) {\n    for (let x = 0; x <= columnCount - w; x++) {\n      const candidate: PanelCoordinate = {\n        id,\n        x,\n        y,\n        w,\n        h,\n      };\n\n      // Check if this position has any collisions\n      if (!hasCollision(candidate, candidate.id, panelMap)) {\n        return { x, y };\n      }\n    }\n  }\n\n  // Fallback: if no position found, place at the bottom\n  return { x: 0, y: maxExistingY };\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelgrid",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "A flexible and performant React grid layout library with drag-and-drop and resize capabilities",
   "type": "module",
   "main": "./dist/index.cjs",