panelgrid 0.2.0 → 0.4.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,11 +82,60 @@ 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
 
-You can override the default collision resolution logic by providing a custom `rearrangement` function:
+You can override the default collision resolution logic by providing a custom `rearrangement` function.
+
+For advanced use cases, PanelGrid exports [helper functions](./docs/helpers.md) for collision detection, grid calculations, and more. See the [Helper Functions API Reference](./docs/helpers.md) for detailed documentation and examples.
 
 ```tsx
 import { PanelGridProvider, rearrangePanels } from 'panelgrid';
@@ -116,7 +168,7 @@ function App() {
       gap={8}
       rearrangement={customRearrange}
     >
-      <PanelGridRenderer itemRenderer={PanelContent} />
+      <PanelGridRenderer>{PanelContent}</PanelGridRenderer>
     </PanelGridProvider>
   );
 }
@@ -281,7 +333,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()`
 
@@ -316,8 +391,25 @@ type RearrangementFunction = (
 
 ### Exported Functions
 
+**Main Export:**
 - `rearrangePanels(movingPanel, allPanels, columnCount)`: Default rearrangement function that can be imported and extended
 
+**Helper Functions:**
+
+PanelGrid exports a comprehensive set of helper functions for building custom rearrangement logic, including collision detection, grid calculations, panel detection, and animation utilities.
+
+See the [Helper Functions API Reference](./docs/helpers.md) for complete documentation.
+
+Quick example:
+```tsx
+import {
+  detectCollisions,
+  hasCollision,
+  snapToGrid,
+  findNewPosition
+} from 'panelgrid/helpers';
+```
+
 ## Development
 
 ```bash

package/dist/helpers/animation.d.cts

@@ -0,0 +1,20 @@
+//#region src/helpers/animation.d.ts
+/**
+ * Options for applying snap-back animation
+ */
+interface ApplySnapAnimationOptions {
+  element: HTMLElement;
+  droppedLeft: number;
+  droppedTop: number;
+  nextLeft: number;
+  nextTop: number;
+  originalTransition: string;
+}
+/**
+ * Applies snap-back animation to element
+ * Smoothly animates the element from its dropped position to the snapped grid position
+ */
+declare function applySnapAnimation(options: ApplySnapAnimationOptions): void;
+//#endregion
+export { applySnapAnimation };
+//# sourceMappingURL=animation.d.cts.map

package/dist/helpers/animation.d.mts

@@ -0,0 +1,20 @@
+//#region src/helpers/animation.d.ts
+/**
+ * Options for applying snap-back animation
+ */
+interface ApplySnapAnimationOptions {
+  element: HTMLElement;
+  droppedLeft: number;
+  droppedTop: number;
+  nextLeft: number;
+  nextTop: number;
+  originalTransition: string;
+}
+/**
+ * Applies snap-back animation to element
+ * Smoothly animates the element from its dropped position to the snapped grid position
+ */
+declare function applySnapAnimation(options: ApplySnapAnimationOptions): void;
+//#endregion
+export { applySnapAnimation };
+//# sourceMappingURL=animation.d.mts.map

package/dist/helpers/gridCalculations.cjs

@@ -60,6 +60,16 @@ function gridPositionToPixels(gridCoord, baseSize, gap) {
 	return Math.max(0, gridCoord * (baseSize + gap));
 }
 /**
+* Snaps a pixel value to the nearest grid position
+* Useful for aligning elements to the grid after drag/resize operations
+*
+* ピクセル値を最も近いグリッド位置にスナップします。
+* ドラッグ・リサイズ操作後に要素をグリッドに整列させる際に利用する。
+*/
+function snapToGrid(pixels, baseSize, gap) {
+	return gridPositionToPixels(pixelsToGridPosition(pixels, baseSize, gap), baseSize, gap);
+}
+/**
 * Gets the maximum Y coordinate of the panels
 * パネルの最大Y座標を取得します。
 */
@@ -73,4 +83,5 @@ exports.gridPositionToPixels = gridPositionToPixels;
 exports.gridToPixels = gridToPixels;
 exports.pixelsToGridPosition = pixelsToGridPosition;
 exports.pixelsToGridSize = pixelsToGridSize;
+exports.snapToGrid = snapToGrid;
 //# sourceMappingURL=gridCalculations.cjs.map

package/dist/helpers/gridCalculations.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"gridCalculations.cjs","names":[],"sources":["../../src/helpers/gridCalculations.ts"],"sourcesContent":["import type { PanelCoordinate } from \"../types\";\n\n/**\n * Converts a pixel value to grid units by dividing by the cell size (baseSize + gap)\n * and rounding up with Math.ceil. Ensures the result is at least 1 and does not exceed available space.\n * When columnCount and xPosition are provided, ensures x + width <= columnCount.\n *\n * ピクセル値をグリッド単位に変換します。セルサイズ (baseSize + gap) で割り、小数点は切り上げて整数にします。\n * 結果は最小1で、columnCountとxPositionが指定された場合はx + width <= columnCountを満たすように制限されます。\n */\nexport function pixelsToGridSize(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  xPosition?: number\n): number {\n  const gridSize = Math.ceil(pixels / (baseSize + gap));\n  const constrainedSize = Math.max(1, gridSize);\n\n  if (columnCount !== undefined && xPosition !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxWidth = Math.max(1, columnCount - xPosition);\n    return Math.min(constrainedSize, maxWidth);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount\n    return Math.min(constrainedSize, columnCount);\n  }\n\n  return constrainedSize;\n}\n\n/**\n * Converts a pixel coordinate to grid coordinate by dividing by the cell size\n * and rounding down with Math.floor, ensuring the result is not negative and does not cause overflow.\n * When columnCount and width are provided, ensures x + width <= columnCount\n *\n * ピクセル座標をグリッド座標に変換します。セルサイズで割り、小数点は切り捨てて整数にします。\n * 結果が負にならず、columnCountとwidthが指定された場合はx + width <= columnCountを満たすようにします。\n */\nexport function pixelsToGridPosition(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  width?: number\n): number {\n  const gridPosition = Math.max(0, Math.floor(pixels / (baseSize + gap)));\n\n  if (columnCount !== undefined && width !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxPosition = Math.max(0, columnCount - width);\n    return Math.min(gridPosition, maxPosition);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount - 1\n    return Math.min(gridPosition, columnCount - 1);\n  }\n\n  return gridPosition;\n}\n\n/**\n * Converts grid units to pixels\n * Formula: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * This accounts for gaps between grid cells but not after the last cell\n *\n * グリッド単位をピクセルに変換します。\n * 計算式: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * グリッドセル間の gap を考慮しますが、最後のセルの後には gap を含めません。\n */\nexport function gridToPixels(gridUnits: number, baseSize: number, gap: number): number {\n  return gridUnits * baseSize + Math.max(0, gridUnits - 1) * gap;\n}\n\n/**\n * Converts grid coordinate to pixel coordinate for positioning\n * Formula: max(0, gridCoord * (baseSize + gap))\n * This includes the gap after each cell for proper positioning in the grid\n *\n * グリッド座標をピクセル座標に変換します（位置計算用）。\n * 計算式: max(0, gridCoord * (baseSize + gap))\n * 各セルの後に gap を含めて、グリッド内での適切な位置決めを行います。\n */\nexport function gridPositionToPixels(gridCoord: number, baseSize: number, gap: number): number {\n  return Math.max(0, gridCoord * (baseSize + gap));\n}\n\n/**\n * Snaps a pixel value to the nearest grid position\n * Useful for aligning elements to the grid after drag/resize operations\n *\n * ピクセル値を最も近いグリッド位置にスナップします。\n * ドラッグ・リサイズ操作後に要素をグリッドに整列させる際に利用する。\n */\nexport function snapToGrid(pixels: number, baseSize: number, gap: number): number {\n  const gridPosition = pixelsToGridPosition(pixels, baseSize, gap);\n  return gridPositionToPixels(gridPosition, baseSize, gap);\n}\n\n/**\n * Gets the maximum Y coordinate of the panels\n * パネルの最大Y座標を取得します。\n */\nexport function getGridRowCount(panels: PanelCoordinate[]): number {\n  return Math.max(...panels.map((p) => p.y + p.h));\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,iBACd,QACA,UACA,KACA,aACA,WACQ;CACR,MAAM,WAAW,KAAK,KAAK,UAAU,WAAW,KAAK;CACrD,MAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAE7C,KAAI,gBAAgB,UAAa,cAAc,QAAW;EAExD,MAAM,WAAW,KAAK,IAAI,GAAG,cAAc,UAAU;AACrD,SAAO,KAAK,IAAI,iBAAiB,SAAS;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,iBAAiB,YAAY;AAG/C,QAAO;;;;;;;;;;AAWT,SAAgB,qBACd,QACA,UACA,KACA,aACA,OACQ;CACR,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,WAAW,KAAK,CAAC;AAEvE,KAAI,gBAAgB,UAAa,UAAU,QAAW;EAEpD,MAAM,cAAc,KAAK,IAAI,GAAG,cAAc,MAAM;AACpD,SAAO,KAAK,IAAI,cAAc,YAAY;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,cAAc,cAAc,EAAE;AAGhD,QAAO;;;;;;;;;;;AAYT,SAAgB,aAAa,WAAmB,UAAkB,KAAqB;AACrF,QAAO,YAAY,WAAW,KAAK,IAAI,GAAG,YAAY,EAAE,GAAG;;;;;;;;;;;AAY7D,SAAgB,qBAAqB,WAAmB,UAAkB,KAAqB;AAC7F,QAAO,KAAK,IAAI,GAAG,aAAa,WAAW,KAAK;;;;;;AAmBlD,SAAgB,gBAAgB,QAAmC;AACjE,QAAO,KAAK,IAAI,GAAG,OAAO,KAAK,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC"}
+{"version":3,"file":"gridCalculations.cjs","names":[],"sources":["../../src/helpers/gridCalculations.ts"],"sourcesContent":["import type { PanelCoordinate } from \"../types\";\n\n/**\n * Converts a pixel value to grid units by dividing by the cell size (baseSize + gap)\n * and rounding up with Math.ceil. Ensures the result is at least 1 and does not exceed available space.\n * When columnCount and xPosition are provided, ensures x + width <= columnCount.\n *\n * ピクセル値をグリッド単位に変換します。セルサイズ (baseSize + gap) で割り、小数点は切り上げて整数にします。\n * 結果は最小1で、columnCountとxPositionが指定された場合はx + width <= columnCountを満たすように制限されます。\n */\nexport function pixelsToGridSize(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  xPosition?: number\n): number {\n  const gridSize = Math.ceil(pixels / (baseSize + gap));\n  const constrainedSize = Math.max(1, gridSize);\n\n  if (columnCount !== undefined && xPosition !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxWidth = Math.max(1, columnCount - xPosition);\n    return Math.min(constrainedSize, maxWidth);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount\n    return Math.min(constrainedSize, columnCount);\n  }\n\n  return constrainedSize;\n}\n\n/**\n * Converts a pixel coordinate to grid coordinate by dividing by the cell size\n * and rounding down with Math.floor, ensuring the result is not negative and does not cause overflow.\n * When columnCount and width are provided, ensures x + width <= columnCount\n *\n * ピクセル座標をグリッド座標に変換します。セルサイズで割り、小数点は切り捨てて整数にします。\n * 結果が負にならず、columnCountとwidthが指定された場合はx + width <= columnCountを満たすようにします。\n */\nexport function pixelsToGridPosition(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  width?: number\n): number {\n  const gridPosition = Math.max(0, Math.floor(pixels / (baseSize + gap)));\n\n  if (columnCount !== undefined && width !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxPosition = Math.max(0, columnCount - width);\n    return Math.min(gridPosition, maxPosition);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount - 1\n    return Math.min(gridPosition, columnCount - 1);\n  }\n\n  return gridPosition;\n}\n\n/**\n * Converts grid units to pixels\n * Formula: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * This accounts for gaps between grid cells but not after the last cell\n *\n * グリッド単位をピクセルに変換します。\n * 計算式: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * グリッドセル間の gap を考慮しますが、最後のセルの後には gap を含めません。\n */\nexport function gridToPixels(gridUnits: number, baseSize: number, gap: number): number {\n  return gridUnits * baseSize + Math.max(0, gridUnits - 1) * gap;\n}\n\n/**\n * Converts grid coordinate to pixel coordinate for positioning\n * Formula: max(0, gridCoord * (baseSize + gap))\n * This includes the gap after each cell for proper positioning in the grid\n *\n * グリッド座標をピクセル座標に変換します（位置計算用）。\n * 計算式: max(0, gridCoord * (baseSize + gap))\n * 各セルの後に gap を含めて、グリッド内での適切な位置決めを行います。\n */\nexport function gridPositionToPixels(gridCoord: number, baseSize: number, gap: number): number {\n  return Math.max(0, gridCoord * (baseSize + gap));\n}\n\n/**\n * Snaps a pixel value to the nearest grid position\n * Useful for aligning elements to the grid after drag/resize operations\n *\n * ピクセル値を最も近いグリッド位置にスナップします。\n * ドラッグ・リサイズ操作後に要素をグリッドに整列させる際に利用する。\n */\nexport function snapToGrid(pixels: number, baseSize: number, gap: number): number {\n  const gridPosition = pixelsToGridPosition(pixels, baseSize, gap);\n  return gridPositionToPixels(gridPosition, baseSize, gap);\n}\n\n/**\n * Gets the maximum Y coordinate of the panels\n * パネルの最大Y座標を取得します。\n */\nexport function getGridRowCount(panels: PanelCoordinate[]): number {\n  return Math.max(...panels.map((p) => p.y + p.h));\n}\n"],"mappings":";;;;;;;;;;AAUA,SAAgB,iBACd,QACA,UACA,KACA,aACA,WACQ;CACR,MAAM,WAAW,KAAK,KAAK,UAAU,WAAW,KAAK;CACrD,MAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAE7C,KAAI,gBAAgB,UAAa,cAAc,QAAW;EAExD,MAAM,WAAW,KAAK,IAAI,GAAG,cAAc,UAAU;AACrD,SAAO,KAAK,IAAI,iBAAiB,SAAS;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,iBAAiB,YAAY;AAG/C,QAAO;;;;;;;;;;AAWT,SAAgB,qBACd,QACA,UACA,KACA,aACA,OACQ;CACR,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,WAAW,KAAK,CAAC;AAEvE,KAAI,gBAAgB,UAAa,UAAU,QAAW;EAEpD,MAAM,cAAc,KAAK,IAAI,GAAG,cAAc,MAAM;AACpD,SAAO,KAAK,IAAI,cAAc,YAAY;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,cAAc,cAAc,EAAE;AAGhD,QAAO;;;;;;;;;;;AAYT,SAAgB,aAAa,WAAmB,UAAkB,KAAqB;AACrF,QAAO,YAAY,WAAW,KAAK,IAAI,GAAG,YAAY,EAAE,GAAG;;;;;;;;;;;AAY7D,SAAgB,qBAAqB,WAAmB,UAAkB,KAAqB;AAC7F,QAAO,KAAK,IAAI,GAAG,aAAa,WAAW,KAAK;;;;;;;;;AAUlD,SAAgB,WAAW,QAAgB,UAAkB,KAAqB;AAEhF,QAAO,qBADc,qBAAqB,QAAQ,UAAU,IAAI,EACtB,UAAU,IAAI;;;;;;AAO1D,SAAgB,gBAAgB,QAAmC;AACjE,QAAO,KAAK,IAAI,GAAG,OAAO,KAAK,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC"}

package/dist/helpers/gridCalculations.d.cts

@@ -0,0 +1,53 @@
+import "../types.cjs";
+
+//#region src/helpers/gridCalculations.d.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を満たすように制限されます。
+ */
+declare function pixelsToGridSize(pixels: number, baseSize: number, gap: number, columnCount?: number, xPosition?: number): number;
+/**
+ * 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を満たすようにします。
+ */
+declare function pixelsToGridPosition(pixels: number, baseSize: number, gap: number, columnCount?: number, width?: number): number;
+/**
+ * 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 を含めません。
+ */
+declare function gridToPixels(gridUnits: number, baseSize: number, gap: number): number;
+/**
+ * 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 を含めて、グリッド内での適切な位置決めを行います。
+ */
+declare function gridPositionToPixels(gridCoord: number, baseSize: number, gap: number): number;
+/**
+ * Snaps a pixel value to the nearest grid position
+ * Useful for aligning elements to the grid after drag/resize operations
+ *
+ * ピクセル値を最も近いグリッド位置にスナップします。
+ * ドラッグ・リサイズ操作後に要素をグリッドに整列させる際に利用する。
+ */
+declare function snapToGrid(pixels: number, baseSize: number, gap: number): number;
+//#endregion
+export { gridPositionToPixels, gridToPixels, pixelsToGridPosition, pixelsToGridSize, snapToGrid };
+//# sourceMappingURL=gridCalculations.d.cts.map

package/dist/helpers/gridCalculations.d.mts

@@ -0,0 +1,53 @@
+import "../types.mjs";
+
+//#region src/helpers/gridCalculations.d.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を満たすように制限されます。
+ */
+declare function pixelsToGridSize(pixels: number, baseSize: number, gap: number, columnCount?: number, xPosition?: number): number;
+/**
+ * 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を満たすようにします。
+ */
+declare function pixelsToGridPosition(pixels: number, baseSize: number, gap: number, columnCount?: number, width?: number): number;
+/**
+ * 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 を含めません。
+ */
+declare function gridToPixels(gridUnits: number, baseSize: number, gap: number): number;
+/**
+ * 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 を含めて、グリッド内での適切な位置決めを行います。
+ */
+declare function gridPositionToPixels(gridCoord: number, baseSize: number, gap: number): number;
+/**
+ * Snaps a pixel value to the nearest grid position
+ * Useful for aligning elements to the grid after drag/resize operations
+ *
+ * ピクセル値を最も近いグリッド位置にスナップします。
+ * ドラッグ・リサイズ操作後に要素をグリッドに整列させる際に利用する。
+ */
+declare function snapToGrid(pixels: number, baseSize: number, gap: number): number;
+//#endregion
+export { gridPositionToPixels, gridToPixels, pixelsToGridPosition, pixelsToGridSize, snapToGrid };
+//# sourceMappingURL=gridCalculations.d.mts.map

package/dist/helpers/gridCalculations.mjs

@@ -59,6 +59,16 @@ function gridPositionToPixels(gridCoord, baseSize, gap) {
 	return Math.max(0, gridCoord * (baseSize + gap));
 }
 /**
+* Snaps a pixel value to the nearest grid position
+* Useful for aligning elements to the grid after drag/resize operations
+*
+* ピクセル値を最も近いグリッド位置にスナップします。
+* ドラッグ・リサイズ操作後に要素をグリッドに整列させる際に利用する。
+*/
+function snapToGrid(pixels, baseSize, gap) {
+	return gridPositionToPixels(pixelsToGridPosition(pixels, baseSize, gap), baseSize, gap);
+}
+/**
 * Gets the maximum Y coordinate of the panels
 * パネルの最大Y座標を取得します。
 */
@@ -67,5 +77,5 @@ function getGridRowCount(panels) {
 }
 
 //#endregion
-export { getGridRowCount, gridPositionToPixels, gridToPixels, pixelsToGridPosition, pixelsToGridSize };
+export { getGridRowCount, gridPositionToPixels, gridToPixels, pixelsToGridPosition, pixelsToGridSize, snapToGrid };
 //# sourceMappingURL=gridCalculations.mjs.map

package/dist/helpers/gridCalculations.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"gridCalculations.mjs","names":[],"sources":["../../src/helpers/gridCalculations.ts"],"sourcesContent":["import type { PanelCoordinate } from \"../types\";\n\n/**\n * Converts a pixel value to grid units by dividing by the cell size (baseSize + gap)\n * and rounding up with Math.ceil. Ensures the result is at least 1 and does not exceed available space.\n * When columnCount and xPosition are provided, ensures x + width <= columnCount.\n *\n * ピクセル値をグリッド単位に変換します。セルサイズ (baseSize + gap) で割り、小数点は切り上げて整数にします。\n * 結果は最小1で、columnCountとxPositionが指定された場合はx + width <= columnCountを満たすように制限されます。\n */\nexport function pixelsToGridSize(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  xPosition?: number\n): number {\n  const gridSize = Math.ceil(pixels / (baseSize + gap));\n  const constrainedSize = Math.max(1, gridSize);\n\n  if (columnCount !== undefined && xPosition !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxWidth = Math.max(1, columnCount - xPosition);\n    return Math.min(constrainedSize, maxWidth);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount\n    return Math.min(constrainedSize, columnCount);\n  }\n\n  return constrainedSize;\n}\n\n/**\n * Converts a pixel coordinate to grid coordinate by dividing by the cell size\n * and rounding down with Math.floor, ensuring the result is not negative and does not cause overflow.\n * When columnCount and width are provided, ensures x + width <= columnCount\n *\n * ピクセル座標をグリッド座標に変換します。セルサイズで割り、小数点は切り捨てて整数にします。\n * 結果が負にならず、columnCountとwidthが指定された場合はx + width <= columnCountを満たすようにします。\n */\nexport function pixelsToGridPosition(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  width?: number\n): number {\n  const gridPosition = Math.max(0, Math.floor(pixels / (baseSize + gap)));\n\n  if (columnCount !== undefined && width !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxPosition = Math.max(0, columnCount - width);\n    return Math.min(gridPosition, maxPosition);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount - 1\n    return Math.min(gridPosition, columnCount - 1);\n  }\n\n  return gridPosition;\n}\n\n/**\n * Converts grid units to pixels\n * Formula: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * This accounts for gaps between grid cells but not after the last cell\n *\n * グリッド単位をピクセルに変換します。\n * 計算式: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * グリッドセル間の gap を考慮しますが、最後のセルの後には gap を含めません。\n */\nexport function gridToPixels(gridUnits: number, baseSize: number, gap: number): number {\n  return gridUnits * baseSize + Math.max(0, gridUnits - 1) * gap;\n}\n\n/**\n * Converts grid coordinate to pixel coordinate for positioning\n * Formula: max(0, gridCoord * (baseSize + gap))\n * This includes the gap after each cell for proper positioning in the grid\n *\n * グリッド座標をピクセル座標に変換します（位置計算用）。\n * 計算式: max(0, gridCoord * (baseSize + gap))\n * 各セルの後に gap を含めて、グリッド内での適切な位置決めを行います。\n */\nexport function gridPositionToPixels(gridCoord: number, baseSize: number, gap: number): number {\n  return Math.max(0, gridCoord * (baseSize + gap));\n}\n\n/**\n * Snaps a pixel value to the nearest grid position\n * Useful for aligning elements to the grid after drag/resize operations\n *\n * ピクセル値を最も近いグリッド位置にスナップします。\n * ドラッグ・リサイズ操作後に要素をグリッドに整列させる際に利用する。\n */\nexport function snapToGrid(pixels: number, baseSize: number, gap: number): number {\n  const gridPosition = pixelsToGridPosition(pixels, baseSize, gap);\n  return gridPositionToPixels(gridPosition, baseSize, gap);\n}\n\n/**\n * Gets the maximum Y coordinate of the panels\n * パネルの最大Y座標を取得します。\n */\nexport function getGridRowCount(panels: PanelCoordinate[]): number {\n  return Math.max(...panels.map((p) => p.y + p.h));\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,iBACd,QACA,UACA,KACA,aACA,WACQ;CACR,MAAM,WAAW,KAAK,KAAK,UAAU,WAAW,KAAK;CACrD,MAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAE7C,KAAI,gBAAgB,UAAa,cAAc,QAAW;EAExD,MAAM,WAAW,KAAK,IAAI,GAAG,cAAc,UAAU;AACrD,SAAO,KAAK,IAAI,iBAAiB,SAAS;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,iBAAiB,YAAY;AAG/C,QAAO;;;;;;;;;;AAWT,SAAgB,qBACd,QACA,UACA,KACA,aACA,OACQ;CACR,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,WAAW,KAAK,CAAC;AAEvE,KAAI,gBAAgB,UAAa,UAAU,QAAW;EAEpD,MAAM,cAAc,KAAK,IAAI,GAAG,cAAc,MAAM;AACpD,SAAO,KAAK,IAAI,cAAc,YAAY;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,cAAc,cAAc,EAAE;AAGhD,QAAO;;;;;;;;;;;AAYT,SAAgB,aAAa,WAAmB,UAAkB,KAAqB;AACrF,QAAO,YAAY,WAAW,KAAK,IAAI,GAAG,YAAY,EAAE,GAAG;;;;;;;;;;;AAY7D,SAAgB,qBAAqB,WAAmB,UAAkB,KAAqB;AAC7F,QAAO,KAAK,IAAI,GAAG,aAAa,WAAW,KAAK;;;;;;AAmBlD,SAAgB,gBAAgB,QAAmC;AACjE,QAAO,KAAK,IAAI,GAAG,OAAO,KAAK,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC"}
+{"version":3,"file":"gridCalculations.mjs","names":[],"sources":["../../src/helpers/gridCalculations.ts"],"sourcesContent":["import type { PanelCoordinate } from \"../types\";\n\n/**\n * Converts a pixel value to grid units by dividing by the cell size (baseSize + gap)\n * and rounding up with Math.ceil. Ensures the result is at least 1 and does not exceed available space.\n * When columnCount and xPosition are provided, ensures x + width <= columnCount.\n *\n * ピクセル値をグリッド単位に変換します。セルサイズ (baseSize + gap) で割り、小数点は切り上げて整数にします。\n * 結果は最小1で、columnCountとxPositionが指定された場合はx + width <= columnCountを満たすように制限されます。\n */\nexport function pixelsToGridSize(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  xPosition?: number\n): number {\n  const gridSize = Math.ceil(pixels / (baseSize + gap));\n  const constrainedSize = Math.max(1, gridSize);\n\n  if (columnCount !== undefined && xPosition !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxWidth = Math.max(1, columnCount - xPosition);\n    return Math.min(constrainedSize, maxWidth);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount\n    return Math.min(constrainedSize, columnCount);\n  }\n\n  return constrainedSize;\n}\n\n/**\n * Converts a pixel coordinate to grid coordinate by dividing by the cell size\n * and rounding down with Math.floor, ensuring the result is not negative and does not cause overflow.\n * When columnCount and width are provided, ensures x + width <= columnCount\n *\n * ピクセル座標をグリッド座標に変換します。セルサイズで割り、小数点は切り捨てて整数にします。\n * 結果が負にならず、columnCountとwidthが指定された場合はx + width <= columnCountを満たすようにします。\n */\nexport function pixelsToGridPosition(\n  pixels: number,\n  baseSize: number,\n  gap: number,\n  columnCount?: number,\n  width?: number\n): number {\n  const gridPosition = Math.max(0, Math.floor(pixels / (baseSize + gap)));\n\n  if (columnCount !== undefined && width !== undefined) {\n    // Ensure x + width <= columnCount\n    const maxPosition = Math.max(0, columnCount - width);\n    return Math.min(gridPosition, maxPosition);\n  }\n\n  if (columnCount !== undefined) {\n    // Legacy behavior: constrain to columnCount - 1\n    return Math.min(gridPosition, columnCount - 1);\n  }\n\n  return gridPosition;\n}\n\n/**\n * Converts grid units to pixels\n * Formula: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * This accounts for gaps between grid cells but not after the last cell\n *\n * グリッド単位をピクセルに変換します。\n * 計算式: gridUnits * baseSize + max(0, gridUnits - 1) * gap\n * グリッドセル間の gap を考慮しますが、最後のセルの後には gap を含めません。\n */\nexport function gridToPixels(gridUnits: number, baseSize: number, gap: number): number {\n  return gridUnits * baseSize + Math.max(0, gridUnits - 1) * gap;\n}\n\n/**\n * Converts grid coordinate to pixel coordinate for positioning\n * Formula: max(0, gridCoord * (baseSize + gap))\n * This includes the gap after each cell for proper positioning in the grid\n *\n * グリッド座標をピクセル座標に変換します（位置計算用）。\n * 計算式: max(0, gridCoord * (baseSize + gap))\n * 各セルの後に gap を含めて、グリッド内での適切な位置決めを行います。\n */\nexport function gridPositionToPixels(gridCoord: number, baseSize: number, gap: number): number {\n  return Math.max(0, gridCoord * (baseSize + gap));\n}\n\n/**\n * Snaps a pixel value to the nearest grid position\n * Useful for aligning elements to the grid after drag/resize operations\n *\n * ピクセル値を最も近いグリッド位置にスナップします。\n * ドラッグ・リサイズ操作後に要素をグリッドに整列させる際に利用する。\n */\nexport function snapToGrid(pixels: number, baseSize: number, gap: number): number {\n  const gridPosition = pixelsToGridPosition(pixels, baseSize, gap);\n  return gridPositionToPixels(gridPosition, baseSize, gap);\n}\n\n/**\n * Gets the maximum Y coordinate of the panels\n * パネルの最大Y座標を取得します。\n */\nexport function getGridRowCount(panels: PanelCoordinate[]): number {\n  return Math.max(...panels.map((p) => p.y + p.h));\n}\n"],"mappings":";;;;;;;;;AAUA,SAAgB,iBACd,QACA,UACA,KACA,aACA,WACQ;CACR,MAAM,WAAW,KAAK,KAAK,UAAU,WAAW,KAAK;CACrD,MAAM,kBAAkB,KAAK,IAAI,GAAG,SAAS;AAE7C,KAAI,gBAAgB,UAAa,cAAc,QAAW;EAExD,MAAM,WAAW,KAAK,IAAI,GAAG,cAAc,UAAU;AACrD,SAAO,KAAK,IAAI,iBAAiB,SAAS;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,iBAAiB,YAAY;AAG/C,QAAO;;;;;;;;;;AAWT,SAAgB,qBACd,QACA,UACA,KACA,aACA,OACQ;CACR,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,MAAM,UAAU,WAAW,KAAK,CAAC;AAEvE,KAAI,gBAAgB,UAAa,UAAU,QAAW;EAEpD,MAAM,cAAc,KAAK,IAAI,GAAG,cAAc,MAAM;AACpD,SAAO,KAAK,IAAI,cAAc,YAAY;;AAG5C,KAAI,gBAAgB,OAElB,QAAO,KAAK,IAAI,cAAc,cAAc,EAAE;AAGhD,QAAO;;;;;;;;;;;AAYT,SAAgB,aAAa,WAAmB,UAAkB,KAAqB;AACrF,QAAO,YAAY,WAAW,KAAK,IAAI,GAAG,YAAY,EAAE,GAAG;;;;;;;;;;;AAY7D,SAAgB,qBAAqB,WAAmB,UAAkB,KAAqB;AAC7F,QAAO,KAAK,IAAI,GAAG,aAAa,WAAW,KAAK;;;;;;;;;AAUlD,SAAgB,WAAW,QAAgB,UAAkB,KAAqB;AAEhF,QAAO,qBADc,qBAAqB,QAAQ,UAAU,IAAI,EACtB,UAAU,IAAI;;;;;;AAO1D,SAAgB,gBAAgB,QAAmC;AACjE,QAAO,KAAK,IAAI,GAAG,OAAO,KAAK,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC"}

package/dist/helpers/index.cjs

@@ -0,0 +1,17 @@
+const require_rearrangement = require('./rearrangement.cjs');
+const require_animation = require('./animation.cjs');
+const require_gridCalculations = require('./gridCalculations.cjs');
+const require_panelDetection = require('./panelDetection.cjs');
+
+exports.applySnapAnimation = require_animation.applySnapAnimation;
+exports.detectAnimatingPanels = require_panelDetection.detectAnimatingPanels;
+exports.detectCollisions = require_rearrangement.detectCollisions;
+exports.findNewPosition = require_rearrangement.findNewPosition;
+exports.gridPositionToPixels = require_gridCalculations.gridPositionToPixels;
+exports.gridToPixels = require_gridCalculations.gridToPixels;
+exports.hasCollision = require_rearrangement.hasCollision;
+exports.pixelsToGridPosition = require_gridCalculations.pixelsToGridPosition;
+exports.pixelsToGridSize = require_gridCalculations.pixelsToGridSize;
+exports.rearrangePanels = require_rearrangement.rearrangePanels;
+exports.rectanglesOverlap = require_rearrangement.rectanglesOverlap;
+exports.snapToGrid = require_gridCalculations.snapToGrid;

package/dist/helpers/index.d.cts

@@ -0,0 +1,5 @@
+import { applySnapAnimation } from "./animation.cjs";
+import { gridPositionToPixels, gridToPixels, pixelsToGridPosition, pixelsToGridSize, snapToGrid } from "./gridCalculations.cjs";
+import { detectAnimatingPanels } from "./panelDetection.cjs";
+import { detectCollisions, findNewPosition, hasCollision, rearrangePanels, rectanglesOverlap } from "./rearrangement.cjs";
+export { applySnapAnimation, detectAnimatingPanels, detectCollisions, findNewPosition, gridPositionToPixels, gridToPixels, hasCollision, pixelsToGridPosition, pixelsToGridSize, rearrangePanels, rectanglesOverlap, snapToGrid };

package/dist/helpers/index.d.mts

@@ -0,0 +1,5 @@
+import { applySnapAnimation } from "./animation.mjs";
+import { gridPositionToPixels, gridToPixels, pixelsToGridPosition, pixelsToGridSize, snapToGrid } from "./gridCalculations.mjs";
+import { detectAnimatingPanels } from "./panelDetection.mjs";
+import { detectCollisions, findNewPosition, hasCollision, rearrangePanels, rectanglesOverlap } from "./rearrangement.mjs";
+export { applySnapAnimation, detectAnimatingPanels, detectCollisions, findNewPosition, gridPositionToPixels, gridToPixels, hasCollision, pixelsToGridPosition, pixelsToGridSize, rearrangePanels, rectanglesOverlap, snapToGrid };

package/dist/helpers/index.mjs

@@ -0,0 +1,6 @@
+import { detectCollisions, findNewPosition, hasCollision, rearrangePanels, rectanglesOverlap } from "./rearrangement.mjs";
+import { applySnapAnimation } from "./animation.mjs";
+import { gridPositionToPixels, gridToPixels, pixelsToGridPosition, pixelsToGridSize, snapToGrid } from "./gridCalculations.mjs";
+import { detectAnimatingPanels } from "./panelDetection.mjs";
+
+export { applySnapAnimation, detectAnimatingPanels, detectCollisions, findNewPosition, gridPositionToPixels, gridToPixels, hasCollision, pixelsToGridPosition, pixelsToGridSize, rearrangePanels, rectanglesOverlap, snapToGrid };

package/dist/helpers/panelDetection.d.cts

@@ -0,0 +1,20 @@
+import { PanelCoordinate, PanelId } from "../types.cjs";
+
+//#region src/helpers/panelDetection.d.ts
+
+/**
+ * Options for detecting animating panels
+ */
+interface DetectAnimatingPanelsOptions {
+  oldPanels: PanelCoordinate[];
+  newPanels: PanelCoordinate[];
+  excludePanelId: PanelId;
+}
+/**
+ * Detects which panels have changed position/size and marks them for animation
+ * Returns a Set of panel IDs that should be animated
+ */
+declare function detectAnimatingPanels(options: DetectAnimatingPanelsOptions): Set<PanelId>;
+//#endregion
+export { detectAnimatingPanels };
+//# sourceMappingURL=panelDetection.d.cts.map

package/dist/helpers/panelDetection.d.mts

@@ -0,0 +1,20 @@
+import { PanelCoordinate, PanelId } from "../types.mjs";
+
+//#region src/helpers/panelDetection.d.ts
+
+/**
+ * Options for detecting animating panels
+ */
+interface DetectAnimatingPanelsOptions {
+  oldPanels: PanelCoordinate[];
+  newPanels: PanelCoordinate[];
+  excludePanelId: PanelId;
+}
+/**
+ * Detects which panels have changed position/size and marks them for animation
+ * Returns a Set of panel IDs that should be animated
+ */
+declare function detectAnimatingPanels(options: DetectAnimatingPanelsOptions): Set<PanelId>;
+//#endregion
+export { detectAnimatingPanels };
+//# sourceMappingURL=panelDetection.d.mts.map

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());
 }
@@ -156,6 +203,10 @@ function findNewPositionToAddPanel(panelToAdd, allPanels, columnCount) {
 }
 
 //#endregion
+exports.detectCollisions = detectCollisions;
+exports.findNewPosition = findNewPosition;
 exports.findNewPositionToAddPanel = findNewPositionToAddPanel;
+exports.hasCollision = hasCollision;
 exports.rearrangePanels = rearrangePanels;
+exports.rectanglesOverlap = rectanglesOverlap;
 //# sourceMappingURL=rearrangement.cjs.map

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":";;;;;;AAMA,SAAgB,kBACd,GACA,GACS;AACT,QAAO,EAEH,EAAE,IAAI,EAAE,KAAK,EAAE,KACf,EAAE,IAAI,EAAE,KAAK,EAAE,KACf,EAAE,IAAI,EAAE,KAAK,EAAE,KACf,EAAE,IAAI,EAAE,KAAK,EAAE;;;;;;AASrB,SAAgB,iBAAiB,OAAwB,UAAoD;CAC3G,MAAM,6BAAa,IAAI,KAAc;AAErC,MAAK,MAAM,CAAC,IAAI,UAAU,UAAU;AAClC,MAAI,OAAO,MAAM,GAAI;AAErB,MAAI,kBAAkB,OAAO,MAAM,CACjC,YAAW,IAAI,GAAG;;AAItB,QAAO,MAAM,KAAK,WAAW;;;;;;AAO/B,SAAgB,aACd,WACA,WACA,UACS;AACT,MAAK,MAAM,CAAC,IAAI,UAAU,UAAU;AAClC,MAAI,OAAO,UAAW;AACtB,MAAI,kBAAkB,WAAW,MAAM,CACrC,QAAO;;AAGX,QAAO;;;;;;AAOT,SAAS,sBACP,QACA,QACA,aAC0D;CAG1D,MAAM,YAAY,OAAO,IAAI,OAAO,IAAI,OAAO;CAC/C,MAAM,eAAe,OAAO,IAAI,OAAO,IAAI,aAAa;CAIxD,MAAM,WAAW,OAAO,IAAI,OAAO,IAAI,OAAO;AAI9C,KAAI,gBAAgB,YAAY,EAC9B,QAAO;EAAE,WAAW;EAAS,UAAU;EAAW;AAKpD,KAAI,WAAW,EACb,QAAO;EAAE,WAAW;EAAQ,UAAU;EAAU;AAGlD,QAAO;;;;;;;;AAST,SAAgB,gBACd,OACA,QACA,aAC0B;CAC1B,MAAM,WAAW,sBAAsB,QAAQ,OAAO,YAAY;AAElE,KAAI,CAAC,SAGH,QAAO;EAAE,GAAG,MAAM;EAAG,GAAG,MAAM,IAAI;EAAG;AAGvC,KAAI,SAAS,cAAc,SAAS;EAGlC,MAAM,OAAO,MAAM,IAAI,SAAS;AAChC,MAAI,OAAO,MAAM,KAAK,YACpB,QAAO;GAAE,GAAG;GAAM,GAAG,MAAM;GAAG;;AAQlC,QAAO;EAAE,GAAG,MAAM;EAAG,GAAG,MAAM,IAAI,SAAS;EAAU;;;;;;AAOvD,SAAS,gBAAgB,OAAwB,aAAsC;CAGrF,MAAM,OAAO,KAAK,IAAI,GAAG,cAAc,MAAM,EAAE;CAC/C,MAAM,eAAe,KAAK,IAAI,GAAG,KAAK,IAAI,MAAM,GAAG,KAAK,CAAC;CAIzD,MAAM,eAAe,KAAK,IAAI,GAAG,MAAM,EAAE;AAEzC,QAAO;EACL,GAAG;EACH,GAAG;EACH,GAAG;EACJ;;;;;;;;;;AAWH,SAAgB,gBACd,aACA,WACA,aACmB;CAGnB,MAAM,yBAAyB,gBAAgB,aAAa,YAAY;CAIxE,MAAM,gBAAgB,UAAU,MAAM,MAAM,EAAE,OAAO,YAAY,GAAG;AACpE,KAAI,eAAe;EACjB,MAAM,eAAe,cAAc,MAAM,uBAAuB;EAChE,MAAM,gBAAgB,cAAc,MAAM,uBAAuB;AAEjE,MAAI,gBAAgB,eAAe;GAUjC,MAAM,mBAAmB,wBAJF;IACrB,GAAG;IACH,GAAG,cAAc;IAClB,EACgE,WAAW,YAAY;AAUxF,UAAO,wBANoB;IACzB,GAAG;IAEH,GAAG,iBAAiB,MAAM,MAAM,EAAE,OAAO,YAAY,GAAG,EAAE,KAAK,uBAAuB;IACtF,GAAG,iBAAiB,MAAM,MAAM,EAAE,OAAO,YAAY,GAAG,EAAE,KAAK,uBAAuB;IACvF,EACkD,kBAAkB,YAAY;;;AAMrF,QAAO,wBAAwB,wBAAwB,WAAW,YAAY;;;;;;AAOhF,SAAS,wBACP,aACA,WACA,aACmB;CAGnB,MAAM,2BAAW,IAAI,KAA+B;AACpD,MAAK,MAAM,SAAS,UAClB,UAAS,IAAI,MAAM,IAAI,EAAE,GAAG,OAAO,CAAC;AAKtC,UAAS,IAAI,YAAY,IAAI,EAAE,GAAG,aAAa,CAAC;CAIhD,MAAMA,QAA2B,CAAC,EAAE,GAAG,aAAa,CAAC;CAIrD,MAAM,4BAAY,IAAI,KAAc;CAIpC,MAAM,+BAAe,IAAI,KAAsB;CAC/C,MAAM,oBAAoB;AAI1B,QAAO,MAAM,SAAS,GAAG;EACvB,MAAM,UAAU,MAAM,OAAO;EAI7B,MAAM,QAAQ,aAAa,IAAI,QAAQ,GAAG,IAAI;AAC9C,MAAI,SAAS,kBAAmB;AAChC,eAAa,IAAI,QAAQ,IAAI,QAAQ,EAAE;EAIvC,MAAM,eAAe,SAAS,IAAI,QAAQ,GAAG;AAC7C,MAAI,iBAAiB,aAAa,MAAM,QAAQ,KAAK,aAAa,MAAM,QAAQ,GAC9E;AAKF,MAAI,UAAU,IAAI,QAAQ,GAAG,CAC3B;EAKF,MAAM,eAAe,iBAAiB,SAAS,SAAS;AAExD,MAAI,aAAa,WAAW,GAAG;AAC7B,YAAS,IAAI,QAAQ,IAAI,QAAQ;AACjC,aAAU,IAAI,QAAQ,GAAG;AACzB;;EAKF,MAAM,qBAAqB,aAAa,MAAM,GAAG,MAAM;GACrD,MAAM,SAAS,SAAS,IAAI,EAAE;GAC9B,MAAM,SAAS,SAAS,IAAI,EAAE;AAC9B,OAAI,OAAO,MAAM,OAAO,EAAG,QAAO,OAAO,IAAI,OAAO;AACpD,UAAO,OAAO,IAAI,OAAO;IACzB;EAIF,MAAM,oCAAoB,IAAI,KAAc;AAI5C,OAAK,MAAM,eAAe,oBAAoB;GAC5C,MAAM,YAAY,SAAS,IAAI,YAAY;AAC3C,OAAI,CAAC,UAAW;GAIhB,MAAM,SAAS,gBAAgB,WAAW,SAAS,YAAY;GAC/D,MAAM,YAAY;IAAE,GAAG;IAAW,GAAG,OAAO;IAAG,GAAG,OAAO;IAAG;GAI5D,IAAI,yBAAyB;AAC7B,QAAK,MAAM,YAAY,kBAErB,KAAI,kBAAkB,WADF,SAAS,IAAI,SAAS,CACG,EAAE;AAC7C,6BAAyB;AACzB;;AAIJ,OAAI,uBAGF;AAKF,YAAS,IAAI,aAAa,UAAU;AACpC,SAAM,KAAK,UAAU;AACrB,qBAAkB,IAAI,YAAY;;AAGpC,WAAS,IAAI,QAAQ,IAAI,QAAQ;AACjC,YAAU,IAAI,QAAQ,GAAG;;AAK3B,QAAO,MAAM,KAAK,SAAS,QAAQ,CAAC;;;;;;AAOtC,SAAgB,0BACd,YACA,WACA,aAC0B;CAC1B,MAAM,KAAK,WAAW,MAAM,KAAK,QAAQ,CAAC,SAAS,GAAG,CAAC,UAAU,GAAG,GAAG;CACvE,MAAM,IAAI,WAAW,KAAK;CAC1B,MAAM,IAAI,WAAW,KAAK;CAG1B,MAAM,2BAAW,IAAI,KAA+B;AACpD,MAAK,MAAM,SAAS,UAClB,UAAS,IAAI,MAAM,IAAI,MAAM;CAK/B,MAAM,eAAe,UAAU,SAAS,IAAI,KAAK,IAAI,GAAG,UAAU,KAAK,MAAM,EAAE,IAAI,EAAE,EAAE,CAAC,GAAG;CAC3F,MAAM,WAAW,KAAK,IAAI,eAAe,KAAK,IAAK;AAGnD,MAAK,IAAI,IAAI,GAAG,IAAI,UAAU,IAC5B,MAAK,IAAI,IAAI,GAAG,KAAK,cAAc,GAAG,KAAK;EACzC,MAAMC,YAA6B;GACjC;GACA;GACA;GACA;GACA;GACD;AAGD,MAAI,CAAC,aAAa,WAAW,UAAU,IAAI,SAAS,CAClD,QAAO;GAAE;GAAG;GAAG;;AAMrB,QAAO;EAAE,GAAG;EAAG,GAAG;EAAc"}

package/dist/helpers/rearrangement.d.cts

@@ -1,14 +1,56 @@
-import { PanelCoordinate } from "../types.cjs";
+import { PanelCoordinate, PanelId } from "../types.cjs";
 
 //#region src/helpers/rearrangement.d.ts
 
+/**
+ * Check if two rectangles overlap using AABB (Axis-Aligned Bounding Box) test
+ * 2つの矩形が重なっているかをAABBテストで判定
+ */
+declare function rectanglesOverlap(a: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}, b: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}): boolean;
+/**
+ * Detect all panels that collide with the given panel
+ * 指定されたパネルと衝突する全てのパネルを検出
+ */
+declare function detectCollisions(panel: PanelCoordinate, panelMap: Map<PanelId, PanelCoordinate>): PanelId[];
+/**
+ * Check if a panel at the given position would collide with any existing panels
+ * 指定された位置にパネルを配置した場合に衝突があるかをチェック
+ */
+declare function hasCollision(candidate: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}, excludeId: PanelId, panelMap: Map<PanelId, PanelCoordinate>): boolean;
+/**
+ * Find a new position for a panel by pushing it away from the colliding panel
+ * Priority: horizontal (right) first, then vertical (down)
+ * 衝突したパネルを押しのける方向に移動させる
+ * 優先順位: 横方向（右）→縦方向（下）
+ */
+declare function findNewPosition(panel: PanelCoordinate, pusher: PanelCoordinate, columnCount: number): {
+  x: number;
+  y: number;
+};
 /**
  * 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
-export { rearrangePanels };
+export { detectCollisions, findNewPosition, hasCollision, rearrangePanels, rectanglesOverlap };
 //# sourceMappingURL=rearrangement.d.cts.map

package/dist/helpers/rearrangement.d.mts

@@ -1,14 +1,56 @@
-import { PanelCoordinate } from "../types.mjs";
+import { PanelCoordinate, PanelId } from "../types.mjs";
 
 //#region src/helpers/rearrangement.d.ts
 
+/**
+ * Check if two rectangles overlap using AABB (Axis-Aligned Bounding Box) test
+ * 2つの矩形が重なっているかをAABBテストで判定
+ */
+declare function rectanglesOverlap(a: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}, b: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}): boolean;
+/**
+ * Detect all panels that collide with the given panel
+ * 指定されたパネルと衝突する全てのパネルを検出
+ */
+declare function detectCollisions(panel: PanelCoordinate, panelMap: Map<PanelId, PanelCoordinate>): PanelId[];
+/**
+ * Check if a panel at the given position would collide with any existing panels
+ * 指定された位置にパネルを配置した場合に衝突があるかをチェック
+ */
+declare function hasCollision(candidate: {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}, excludeId: PanelId, panelMap: Map<PanelId, PanelCoordinate>): boolean;
+/**
+ * Find a new position for a panel by pushing it away from the colliding panel
+ * Priority: horizontal (right) first, then vertical (down)
+ * 衝突したパネルを押しのける方向に移動させる
+ * 優先順位: 横方向（右）→縦方向（下）
+ */
+declare function findNewPosition(panel: PanelCoordinate, pusher: PanelCoordinate, columnCount: number): {
+  x: number;
+  y: number;
+};
 /**
  * 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
-export { rearrangePanels };
+export { detectCollisions, findNewPosition, hasCollision, rearrangePanels, rectanglesOverlap };
 //# sourceMappingURL=rearrangement.d.mts.map

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());
 }
@@ -155,5 +202,5 @@ function findNewPositionToAddPanel(panelToAdd, allPanels, columnCount) {
 }
 
 //#endregion
-export { findNewPositionToAddPanel, rearrangePanels };
+export { detectCollisions, findNewPosition, findNewPositionToAddPanel, hasCollision, rearrangePanels, rectanglesOverlap };
 //# sourceMappingURL=rearrangement.mjs.map

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.4.0",
   "description": "A flexible and performant React grid layout library with drag-and-drop and resize capabilities",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -19,6 +19,16 @@
       },
       "default": "./dist/index.mjs"
     },
+    "./helpers": {
+      "import": {
+        "types": "./dist/helpers/index.d.mts",
+        "default": "./dist/helpers/index.mjs"
+      },
+      "require": {
+        "types": "./dist/helpers/index.d.cts",
+        "default": "./dist/helpers/index.cjs"
+      }
+    },
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
@@ -62,7 +72,12 @@
     "typecheck": "tsc -b --noEmit",
     "preview": "vite preview",
     "test": "vitest",
-    "prepublishOnly": "yarn test run && yarn typecheck && yarn lint && yarn build"
+    "prepublishOnly": "yarn test run && yarn typecheck && yarn lint && yarn build",
+    "release": "commit-and-tag-version",
+    "release:patch": "commit-and-tag-version --release-as patch",
+    "release:minor": "commit-and-tag-version --release-as minor",
+    "release:major": "commit-and-tag-version --release-as major",
+    "release:dry-run": "commit-and-tag-version --dry-run"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
@@ -86,6 +101,7 @@
     "@types/react": "^19.1.16",
     "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react-swc": "^4.1.0",
+    "commit-and-tag-version": "^12.6.1",
     "husky": "^9.1.7",
     "jsdom": "^27.0.1",
     "lint-staged": "^16.2.6",