@aiquants/drag-drop-panels 0.2.0

package/README.md

@@ -0,0 +1,186 @@
+# Drag & Drop Panel Package
+
+再利用可能な Drag & Drop パネルレイアウトコンポーネントパッケージです。
+
+## パッケージ情報
+
+- **名前**: `@aiquants/drag-drop-panels`
+- **バージョン**: 0.1.0
+- **場所**: `/workspace/packages/drag-drop-panels`
+
+## 機能
+
+- 複数カラムのドラッグ&ドロップレイアウト
+- パネルの並び替え
+- カラム間でのパネル移動
+- カラム幅のリサイズ
+- パネルの表示/非表示切り替え
+- カスタムドラッグハンドラーのサポート
+- FLIP アニメーション
+- エッジスクロール機能
+- デバッグオーバーレイ
+
+## インストール
+
+```json
+{
+  "dependencies": {
+  "@aiquants/drag-drop-panels": "workspace:*"
+  }
+}
+```
+
+```bash
+pnpm install
+```
+
+## 使用方法
+
+### 基本的な使用例
+
+```tsx
+import { DragDropLayout } from "@aiquants/drag-drop-panels"
+import type { ColumnConfig, DragOverPosition } from "@aiquants/drag-drop-panels"
+import "@aiquants/drag-drop-panels/dist/drag-drop-panels.css"
+
+function MyApp() {
+  // カラム設定
+  const columns: ColumnConfig[] = [
+    {
+      id: "column-1",
+      key: "column1",
+      initialWidth: 400,
+      minWidth: 300,
+      maxWidth: 600,
+      resizable: true,
+    },
+  ]
+
+  // カラムごとのパネルID配置
+  const [columnPanels, setColumnPanels] = useState({
+    column1: ["panel1", "panel2"],
+  })
+
+  // パネルの可視性
+  const [panelVisibility, setPanelVisibility] = useState({
+    panel1: true,
+    panel2: true,
+  })
+
+  // パネルコンポーネントのマッピング
+  const panelComponentMap = {
+    panel1: { component: MyPanel1, title: "Panel 1" },
+    panel2: { component: MyPanel2, title: "Panel 2" },
+  }
+
+  return (
+    <DragDropLayout
+      columns={columns}
+      columnPanels={columnPanels}
+      onColumnPanelsChange={setColumnPanels}
+      panelVisibility={panelVisibility}
+      onPanelVisibilityChange={setPanelVisibility}
+      panelComponentMap={panelComponentMap}
+      enableResize={true}
+    />
+  )
+}
+```
+
+## デモページ
+
+`quants-react-router` アプリケーションでデモページを確認できます。
+
+### デモページへのアクセス
+
+1. `quants-react-router` を起動:
+
+```bash
+cd /workspace/apps/quants-react-router
+pnpm dev
+```
+
+2. ブラウザで以下の URL にアクセス:
+
+```
+http://localhost:5173/drag-drop-demo
+```
+
+### デモページの機能
+
+- 3 カラムのレイアウト
+- 4 つのサンプルパネル
+- ドラッグ&ドロップによるパネル移動
+- カラム幅のリサイズ
+- パネルの表示/非表示切り替え
+
+## API リファレンス
+
+### DragDropLayout Props
+
+| プロパティ | 型 | 必須 | 説明 |
+|-----------|-----|------|------|
+| `columns` | `ColumnConfig[]` | ✓ | カラムの設定配列 |
+| `columnPanels` | `Record<string, string[]>` | ✓ | カラムごとのパネル ID 配列 |
+| `onColumnPanelsChange` | `(panels: Record<string, string[]>) => void` | ✓ | パネル配置変更時のコールバック |
+| `panelVisibility` | `Record<string, boolean>` | ✓ | パネルの可視性 |
+| `onPanelVisibilityChange` | `(visibility: Record<string, boolean>) => void` | ✓ | 可視性変更時のコールバック |
+| `panelComponentMap` | `Record<string, PanelConfig>` | ✓ | パネルコンポーネントのマッピング |
+| `columnWidths` | `Record<string, number>` | - | カラム幅 |
+| `onColumnWidthsChange` | `(widths: Record<string, number>) => void` | - | カラム幅変更時のコールバック |
+| `enableResize` | `boolean` | - | リサイズ機能の有効化 (デフォルト: false) |
+| `debugConfig` | `DebugConfig` | - | デバッグ設定 |
+
+### ColumnConfig
+
+```typescript
+interface ColumnConfig {
+  id: string              // カラムの一意な ID
+  key: string             // カラムのキー (columnPanels で使用)
+  initialWidth?: number   // 初期幅 (px)
+  minWidth?: number       // 最小幅 (px)
+  maxWidth?: number       // 最大幅 (px)
+  resizable?: boolean     // リサイズ可能かどうか
+  className?: string      // カスタム CSS クラス
+}
+```
+
+### PanelConfig
+
+```typescript
+interface PanelConfig {
+  component: ComponentType  // パネルのコンポーネント
+  title: string            // パネルのタイトル
+  props?: Record<string, unknown>  // コンポーネントに渡す props
+}
+```
+
+## ビルド
+
+```bash
+cd /workspace/packages/drag-drop-panels
+pnpm build
+```
+
+ビルド出力:
+
+- `dist/index.es.js` - ES モジュール
+- `dist/index.umd.js` - UMD モジュール
+- `dist/index.d.ts` - TypeScript 型定義
+- `dist/drag-drop-panels.css` - スタイルシート
+
+## 開発
+
+### パッケージの修正
+
+1. `/workspace/packages/drag-drop-panels/src` でソースを編集
+2. ビルド: `pnpm build`
+3. `quants-react-router` でテスト
+
+### 既知の問題
+
+現時点では特にありません。
+
+## ライセンス
+
+MIT

package/dist/DragDropLayout.d.ts

@@ -0,0 +1,31 @@
+import { ColumnConfig, CustomDragState, DebugConfig, DragDropEventHandlers, DragDropStateUpdaters, DragOverPosition, DragState, OriginalPanelPosition, PanelConfig, PanelSizeInfo, ResizeConfig } from './drag-drop/types';
+
+/**
+ * Props for the DragDropLayout component.
+ *
+ * DragDropLayout コンポーネントのプロパティ。
+ */
+export interface DragDropLayoutProps extends DragDropEventHandlers, DragDropStateUpdaters, ResizeConfig {
+    columns: ColumnConfig[];
+    panels: PanelConfig[];
+    columnPanels: Record<string, string[]>;
+    panelVisibility: Record<string, boolean>;
+    dragState: DragState;
+    dragOverPosition: DragOverPosition | null;
+    originalPanelPosition: OriginalPanelPosition | null;
+    dragModes: Record<string, "normal" | "custom">;
+    debugConfig: DebugConfig;
+    panelSizes: Record<string, PanelSizeInfo>;
+    customDrag?: CustomDragState;
+}
+/**
+ * The main component for rendering the drag and drop layout.
+ * It manages the arrangement of columns and panels, handles all drag and drop logic,
+ * and implements FLIP animations for smooth transitions.
+ *
+ * ドラッグ＆ドロップレイアウトを描画するためのメインコンポーネント。
+ * カラムとパネルの配置を管理し、すべてのドラッグ＆ドロップロジックを処理し、
+ * スムーズなトランジションのためのFLIPアニメーションを実装します。
+ */
+export declare const DragDropLayout: ({ columns, panels, columnPanels, panelVisibility, onPanelVisibilityChange, dragState, dragOverPosition, originalPanelPosition, dragModes, onDragStart, onDragEnd, onPlaceholderDragEnter, onPlaceholderDragLeave, onDragOverWithInsert, onDropWithInsert, onColumnDragLeave, onPanelClick, onPanelMouseDown, onTouchStart, onTouchMove, onTouchEnd, debugConfig, panelSizes, setPanelRef, enableResize, columnWidths, onResizeStart, onResize, onResizeEnd, isResizing, resizingColumn, onPanelSizeInfoClick, onToggleDragMode, customDrag, }: DragDropLayoutProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DragDropLayout.d.ts.map

package/dist/DragDropLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDropLayout.d.ts","sourceRoot":"","sources":["../src/DragDropLayout.tsx"],"names":[],"mappings":"AAWA,OAAO,gCAAgC,CAAA;AAEvC,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,gBAAgB,EAAE,SAAS,EAAE,qBAAqB,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAE/N;;;;GAIG;AACH,MAAM,WAAW,mBAAoB,SAAQ,qBAAqB,EAAE,qBAAqB,EAAE,YAAY;IAEnG,OAAO,EAAE,YAAY,EAAE,CAAA;IAGvB,MAAM,EAAE,WAAW,EAAE,CAAA;IAGrB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;IAGtC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAGxC,SAAS,EAAE,SAAS,CAAA;IACpB,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,qBAAqB,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAGnD,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,QAAQ,GAAG,QAAQ,CAAC,CAAA;IAG9C,WAAW,EAAE,WAAW,CAAA;IAGxB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAA;IAGzC,UAAU,CAAC,EAAE,eAAe,CAAA;CAC/B;AAwCD;;;;;;;;GAQG;AACH,eAAO,MAAM,cAAc,GAAI,+gBAqC5B,mBAAmB,4CAubrB,CAAA"}

package/dist/drag-drop/ColumnControlPanel.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Props for the ColumnControlPanel component.
+ *
+ * ColumnControlPanel コンポーネントのプロパティ。
+ */
+export type ColumnControlPanelProps = {
+    /** The current number of columns. / 現在のカラム数。 */
+    columnCount: number;
+    /** Callback function when the column count changes. / カラム数が変更されたときのコールバック関数。 */
+    onColumnCountChange: (count: number) => void;
+    /** Callback function to auto-balance panels across columns. / パネルをカラム間で自動的にバランス調整するためのコールバック関数。 */
+    onAutoBalance: () => void;
+    /** Callback function to reset column widths to their initial state. / カラム幅を初期状態にリセットするためのコールバック関数。 */
+    onResetWidths: () => void;
+    /** The minimum number of columns allowed. Defaults to 2. / 許可される最小カラム数。デフォルトは2。 */
+    minColumns?: number;
+    /** The maximum number of columns allowed. Defaults to 6. / 許可される最大カラム数。デフォルトは6。 */
+    maxColumns?: number;
+    /** A flag indicating if a resize operation is in progress. / リサイズ操作が進行中かどうかを示すフラグ。 */
+    isResizing?: boolean;
+    /** A flag indicating if responsive mode is active (restricts manual column adjustments). / レスポンシブモードが有効かどうか（手動カラム調整を制限）。 */
+    isResponsiveMode?: boolean;
+    /** The responsive column count when responsive mode is active. / レスポンシブモード有効時のレスポンシブカラム数。 */
+    responsiveColumnCount?: number;
+};
+/**
+ * A UI component that provides controls for managing layout columns.
+ * It allows users to add or remove columns, balance panels, and reset widths.
+ *
+ * レイアウトカラムを管理するためのコントロールを提供するUIコンポーネント。
+ * ユーザーはカラムの追加・削除、パネルのバランス調整、幅のリセットができます。
+ * @param {ColumnControlPanelProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered column control panel.
+ */
+export declare const ColumnControlPanel: ({ columnCount, onColumnCountChange, onAutoBalance, onResetWidths, minColumns, maxColumns, isResizing, isResponsiveMode, responsiveColumnCount }: ColumnControlPanelProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColumnControlPanel.d.ts.map

package/dist/drag-drop/ColumnControlPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnControlPanel.d.ts","sourceRoot":"","sources":["../../src/drag-drop/ColumnControlPanel.tsx"],"names":[],"mappings":"AAWA;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG;IAClC,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAA;IACnB,gFAAgF;IAChF,mBAAmB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,mGAAmG;IACnG,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,sGAAsG;IACtG,aAAa,EAAE,MAAM,IAAI,CAAA;IACzB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sFAAsF;IACtF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4HAA4H;IAC5H,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,6FAA6F;IAC7F,qBAAqB,CAAC,EAAE,MAAM,CAAA;CACjC,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,kBAAkB,GAAI,iJAUhC,uBAAuB,4CAgFzB,CAAA"}

package/dist/drag-drop/ColumnInsertPanel.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Props for the ColumnInsertPanel component。
+ *
+ * ColumnInsertPanel コンポーネントのプロパティ。
+ */
+export type ColumnInsertPanelProps = {
+    /** The current number of columns. / 現在のカラム数。 */
+    columnCount: number;
+    /** Callback function to insert a column at a specific position. / 特定の位置にカラムを挿入するためのコールバック関数。 */
+    onInsertColumn: (position: number) => void;
+    /** Callback function to delete a column at a specific position. / 特定の位置のカラムを削除するためのコールバック関数。 */
+    onDeleteColumn: (position: number) => void;
+    /** The minimum number of columns allowed. Defaults to 1. / 許可される最小カラム数。デフォルトは1。 */
+    minColumns?: number;
+    /** The maximum number of columns allowed. Defaults to 6. / 許可される最大カラム数。デフォルトは6。 */
+    maxColumns?: number;
+    /** A flag indicating if a resize operation is in progress. / リサイズ操作が進行中かどうかを示すフラグ。 */
+    isResizing?: boolean;
+    /** A flag to disable the entire panel (e.g., during responsive mode). / パネル全体を無効化するフラグ（レスポンシブモード時など）。 */
+    disabled?: boolean;
+};
+/**
+ * A UI component that provides controls for inserting and deleting columns at specific positions.
+ * It shows visual indicators between columns where new columns can be inserted,
+ * and delete buttons on each column.
+ *
+ * 特定の位置でカラムの挿入・削除を行うためのコントロールを提供するUIコンポーネント。
+ * 新しいカラムを挿入できる位置にビジュアルインジケーターを表示し、
+ * 各カラムに削除ボタンを表示します。
+ * @param {ColumnInsertPanelProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered column insert panel。
+ */
+export declare const ColumnInsertPanel: ({ columnCount, onInsertColumn, onDeleteColumn, minColumns, maxColumns, isResizing, disabled, }: ColumnInsertPanelProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ColumnInsertPanel.d.ts.map

package/dist/drag-drop/ColumnInsertPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnInsertPanel.d.ts","sourceRoot":"","sources":["../../src/drag-drop/ColumnInsertPanel.tsx"],"names":[],"mappings":"AAWA;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG;IACjC,gDAAgD;IAChD,WAAW,EAAE,MAAM,CAAA;IACnB,gGAAgG;IAChG,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,gGAAgG;IAChG,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,mFAAmF;IACnF,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,sFAAsF;IACtF,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,yGAAyG;IACzG,QAAQ,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,GAAI,gGAQ/B,sBAAsB,4CAqExB,CAAA"}

package/dist/drag-drop/DebugComponents.d.ts

@@ -0,0 +1,93 @@
+import { MouseEvent } from 'react';
+import { CustomDragState, DebugConfig, DragOverPosition, DragState, MousePosition, OriginalPanelPosition, TouchDragState } from './types';
+
+/**
+ * Props for the DebugPanel component.
+ *
+ * DebugPanel コンポーネントのプロパティ。
+ */
+interface DebugPanelProps {
+    /** Debug configuration object. / デバッグ設定オブジェクト。 */
+    config: DebugConfig;
+    /** The current state of the drag operation. / ドラッグ操作の現在の状態。 */
+    dragState: DragState;
+    /** The position where the dragged panel is hovering over. / ドラッグ中のパネルがホバーしている位置。 */
+    dragOverPosition: DragOverPosition | null;
+    /** The original position of the panel being dragged. / ドラッグされているパネルの元の位置。 */
+    originalPanelPosition: OriginalPanelPosition | null;
+    /** The current mouse coordinates. / 現在のマウス座標。 */
+    mousePosition: MousePosition;
+    /** The state related to touch-based dragging. / タッチベースのドラッグに関連する状態。 */
+    touchDragState: TouchDragState;
+    /** The state for custom drag handling. / カスタムドラッグ処理の状態。 */
+    customDrag: CustomDragState;
+}
+/**
+ * A panel that displays various debug information related to the drag-and-drop state.
+ *
+ * ドラッグ＆ドロップの状態に関連する様々なデバッグ情報を表示するパネル。
+ * @param {DebugPanelProps} props - The props for the component.
+ * @returns {JSX.Element | null} The rendered debug panel or null if not enabled.
+ */
+export declare const DebugPanel: ({ config, dragState, dragOverPosition, originalPanelPosition, mousePosition, touchDragState, customDrag }: DebugPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Props for the MousePositionDisplay component.
+ *
+ * MousePositionDisplay コンポーネントのプロパティ。
+ */
+interface MousePositionDisplayProps {
+    /** Debug configuration object. / デバッグ設定オブジェクト。 */
+    config: DebugConfig;
+    /** The current mouse coordinates. / 現在のマウス座標。 */
+    mousePosition: MousePosition;
+    /** The current state of the drag operation. / ドラッグ操作の現在の状態。 */
+    dragState: DragState;
+}
+/**
+ * Displays the current mouse coordinates on the screen during a drag operation.
+ *
+ * ドラッグ操作中に画面上に現在のマウス座標を表示します。
+ * @param {MousePositionDisplayProps} props - The props for the component。
+ * @returns {JSX.Element | null} The rendered mouse position display or null if not enabled。
+ */
+export declare const MousePositionDisplay: ({ config, mousePosition, dragState }: MousePositionDisplayProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Props for the PanelSizeDisplay component。
+ *
+ * PanelSizeDisplay コンポーネントのプロパティ。
+ */
+interface PanelSizeDisplayProps {
+    /** Debug configuration object. / デバッグ設定オブジェクト。 */
+    config: DebugConfig;
+    panelId: string;
+    /** The size and position information of the panel. / パネルのサイズと位置情報。 */
+    sizeInfo: {
+        width: number;
+        height: number;
+        x: number;
+        y: number;
+        minHeight: string;
+        maxHeight: string;
+    } | undefined;
+    /** Callback function for click events on the size info display. / サイズ情報表示のクリックイベントのコールバック関数。 */
+    onSizeInfoClick: (e: MouseEvent | TouchEvent) => void;
+}
+/**
+ * Displays the size and position of a panel.
+ *
+ * パネルのサイズと位置を表示します。
+ * @param {PanelSizeDisplayProps} props - The props for the component。
+ * @returns {JSX.Element | null} The rendered panel size display or null if not enabled。
+ */
+export declare const PanelSizeDisplay: ({ config, panelId, sizeInfo, onSizeInfoClick }: PanelSizeDisplayProps) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * A helper function for logging debug messages to the console based on the configured log level.
+ *
+ * 設定されたログレベルに基づいてデバッグメッセージをコンソールに出力するためのヘルパー関数。
+ * @param {DebugConfig} config - The debug configuration object。
+ * @param {1 | 2} level - The log level of the message (1 for basic, 2 for verbose)。
+ * @param {...any[]} args - The arguments to log to the console。
+ */
+export declare const debugLog: (config: DebugConfig, level: 1 | 2, ...args: unknown[]) => void;
+export {};
+//# sourceMappingURL=DebugComponents.d.ts.map

package/dist/drag-drop/DebugComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugComponents.d.ts","sourceRoot":"","sources":["../../src/drag-drop/DebugComponents.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAK,EAAiB,UAAU,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,aAAa,EAAE,qBAAqB,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE9I;;;;GAIG;AACH,UAAU,eAAe;IACrB,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAA;IACnB,+DAA+D;IAC/D,SAAS,EAAE,SAAS,CAAA;IACpB,oFAAoF;IACpF,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,6EAA6E;IAC7E,qBAAqB,EAAE,qBAAqB,GAAG,IAAI,CAAA;IACnD,iDAAiD;IACjD,aAAa,EAAE,aAAa,CAAA;IAC5B,uEAAuE;IACvE,cAAc,EAAE,cAAc,CAAA;IAC9B,2DAA2D;IAC3D,UAAU,EAAE,eAAe,CAAA;CAC9B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GAAI,2GAA2G,eAAe,mDA0DpJ,CAAA;AAED;;;;GAIG;AACH,UAAU,yBAAyB;IAC/B,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAA;IACnB,iDAAiD;IACjD,aAAa,EAAE,aAAa,CAAA;IAC5B,+DAA+D;IAC/D,SAAS,EAAE,SAAS,CAAA;CACvB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB,GAAI,sCAAsC,yBAAyB,mDAqBnG,CAAA;AAED;;;;GAIG;AACH,UAAU,qBAAqB;IAC3B,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAA;IACnB,OAAO,EAAE,MAAM,CAAA;IACf,sEAAsE;IACtE,QAAQ,EACF;QACI,KAAK,EAAE,MAAM,CAAA;QACb,MAAM,EAAE,MAAM,CAAA;QACd,CAAC,EAAE,MAAM,CAAA;QACT,CAAC,EAAE,MAAM,CAAA;QACT,SAAS,EAAE,MAAM,CAAA;QACjB,SAAS,EAAE,MAAM,CAAA;KACpB,GACD,SAAS,CAAA;IACf,gGAAgG;IAChG,eAAe,EAAE,CAAC,CAAC,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,CAAA;CACxD;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,GAAI,gDAAgD,qBAAqB,mDA+BrG,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,GAAI,QAAQ,WAAW,EAAE,OAAO,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,OAAO,EAAE,SAK7E,CAAA"}

package/dist/drag-drop/DebugControlPanel.d.ts

@@ -0,0 +1,31 @@
+import { DebugConfig } from './types';
+
+/**
+ * Props for the DebugControlPanel component.
+ *
+ * DebugControlPanel コンポーネントのプロパティ。
+ */
+type DebugControlPanelProps = {
+    /** The current debug configuration object. / 現在のデバッグ設定オブジェクト。 */
+    config: DebugConfig;
+    /** Callback function to update the debug configuration. / デバッグ設定を更新するためのコールバック関数。 */
+    onConfigChange: (newConfig: DebugConfig) => void;
+    /** A flag indicating if the control panel is currently visible. / コントロールパネルが現在表示されているかどうかを示すフラグ。 */
+    isVisible: boolean;
+    /** Callback function to toggle the visibility of the control panel. / コントロールパネルの表示を切り替えるためのコールバック関数。 */
+    onToggleVisibility: () => void;
+};
+/**
+ * A floating panel with controls to manage debug settings.
+ * It can be toggled to show/hide and provides checkboxes and a slider
+ * to dynamically change the debug configuration.
+ *
+ * デバッグ設定を管理するためのコントロールを持つフローティングパネル。
+ * 表示・非表示を切り替えることができ、チェックボックスとスライダーで
+ * デバッグ設定を動的に変更できます。
+ * @param {DebugControlPanelProps} props - The props for the component.
+ * @returns {JSX.Element} The rendered debug control panel.
+ */
+export declare const DebugControlPanel: ({ config, onConfigChange, isVisible, onToggleVisibility }: DebugControlPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DebugControlPanel.d.ts.map

package/dist/drag-drop/DebugControlPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugControlPanel.d.ts","sourceRoot":"","sources":["../../src/drag-drop/DebugControlPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;GAIG;AACH,KAAK,sBAAsB,GAAG;IAC1B,iEAAiE;IACjE,MAAM,EAAE,WAAW,CAAA;IACnB,qFAAqF;IACrF,cAAc,EAAE,CAAC,SAAS,EAAE,WAAW,KAAK,IAAI,CAAA;IAChD,oGAAoG;IACpG,SAAS,EAAE,OAAO,CAAA;IAClB,wGAAwG;IACxG,kBAAkB,EAAE,MAAM,IAAI,CAAA;CACjC,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,iBAAiB,GAAI,2DAA2D,sBAAsB,4CAiKlH,CAAA"}

package/dist/drag-drop/DebugOverlay.d.ts

@@ -0,0 +1,71 @@
+import { default as React } from 'react';
+import { DebugConfig, DragOverPosition, OriginalPanelPosition } from './types';
+
+/**
+ * Props for the InsertPlaceholder component.
+ *
+ * InsertPlaceholder コンポーネントのプロパティ。
+ */
+interface InsertPlaceholderProps {
+    /** The index where the placeholder appears in the column. / カラム内でのプレースホルダーのインデックス。 */
+    index: number;
+    /** The index of the column containing the placeholder. / プレースホルダーが含まれるカラムのインデックス。 */
+    columnIndex: number;
+    /** A flag indicating if a drag operation is in progress. / ドラッグ操作が進行中かどうかを示すフラグ。 */
+    isDragging: boolean;
+    /** The position where the dragged panel is hovering over. / ドラッグ中のパネルがホバーしている位置。 */
+    dragOverPosition: DragOverPosition | null;
+    /** The original position of the panel being dragged. / ドラッグされているパネルの元の位置。 */
+    originalPosition: OriginalPanelPosition | null;
+    /** Callback when a dragged item enters the placeholder. / ドラッグアイテムがプレースホルダーに入ったときのコールバック。 */
+    onDragEnter: (columnIndex: number, insertIndex: number) => void;
+    /** Callback when a dragged item leaves the placeholder. / ドラッグアイテムがプレースホルダーから離れたときのコールバック。 */
+    onDragLeave: (e?: React.DragEvent, columnIndex?: number, insertIndex?: number) => void;
+    /** Debug configuration object. / デバッグ設定オブジェクト。 */
+    config: DebugConfig;
+    /** State for custom (non-HTML5) drag handling. / カスタム（非HTML5）ドラッグ処理の状態。 */
+    customDrag?: {
+        isActive: boolean;
+        panelId: string;
+    };
+}
+/**
+ * A component that renders a placeholder to indicate where a dragged panel can be dropped.
+ * It highlights when a panel is dragged over it and is hidden when no drag is active.
+ * Features smooth fade-in/fade-out animations for a polished user experience.
+ *
+ * ドラッグされたパネルをドロップできる場所を示すプレースホルダーをレンダリングするコンポーネント。
+ * パネルが上にドラッグされるとハイライトされ、ドラッグがアクティブでないときは非表示になります。
+ * 洗練されたユーザーエクスペリエンスのために、滑らかなフェードイン・フェードアウトアニメーションを特徴とします。
+ */
+export declare const InsertPlaceholder: React.NamedExoticComponent<InsertPlaceholderProps>;
+/**
+ * Props for the DropZoneDebugOverlay component.
+ *
+ * DropZoneDebugOverlay コンポーネントのプロパティ。
+ */
+interface DropZoneDebugOverlayProps {
+    /** The index of the column this overlay is for. / このオーバーレイが対象とするカラムのインデックス。 */
+    columnIndex: number;
+    /** A flag indicating if a drag operation is in progress. / ドラッグ操作が進行中かどうかを示すフラグ。 */
+    isDragging: boolean;
+    /** The position where the dragged panel is hovering over. / ドラッグ中のパネルがホバーしている位置。 */
+    dragOverPosition: DragOverPosition | null;
+    /** The child elements to be rendered within the overlay. / オーバーレイ内にレンダリングされる子要素。 */
+    children: React.ReactNode;
+    /** Debug configuration object. / デバッグ設定オブジェクト。 */
+    config: DebugConfig;
+}
+/**
+ * A component that renders a debug overlay over a drop zone (a column).
+ * It shows the boundaries and state (active/idle) of the drop zone during a drag operation。
+ *
+ * ドロップゾーン（カラム）の上にデバッグオーバーレイをレンダリングするコンポーネント。
+ * ドラッグ操作中にドロップゾーンの境界と状態（アクティブ/アイドル）を表示します。
+ */
+export declare const DropZoneDebugOverlay: {
+    ({ columnIndex, isDragging, dragOverPosition, children, config }: DropZoneDebugOverlayProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};
+//# sourceMappingURL=DebugOverlay.d.ts.map

package/dist/drag-drop/DebugOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugOverlay.d.ts","sourceRoot":"","sources":["../../src/drag-drop/DebugOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,KAAsC,MAAM,OAAO,CAAA;AAE1D,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAA;AAEnF;;;;GAIG;AACH,UAAU,sBAAsB;IAC5B,sFAAsF;IACtF,KAAK,EAAE,MAAM,CAAA;IACb,qFAAqF;IACrF,WAAW,EAAE,MAAM,CAAA;IACnB,oFAAoF;IACpF,UAAU,EAAE,OAAO,CAAA;IACnB,oFAAoF;IACpF,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,6EAA6E;IAC7E,gBAAgB,EAAE,qBAAqB,GAAG,IAAI,CAAA;IAC9C,6FAA6F;IAC7F,WAAW,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/D,8FAA8F;IAC9F,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,SAAS,EAAE,WAAW,CAAC,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACtF,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAA;IACnB,2EAA2E;IAC3E,UAAU,CAAC,EAAE;QACT,QAAQ,EAAE,OAAO,CAAA;QACjB,OAAO,EAAE,MAAM,CAAA;KAClB,CAAA;CACJ;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,oDAoF5B,CAAA;AAIF;;;;GAIG;AACH,UAAU,yBAAyB;IAC/B,+EAA+E;IAC/E,WAAW,EAAE,MAAM,CAAA;IACnB,oFAAoF;IACpF,UAAU,EAAE,OAAO,CAAA;IACnB,oFAAoF;IACpF,gBAAgB,EAAE,gBAAgB,GAAG,IAAI,CAAA;IACzC,oFAAoF;IACpF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,kDAAkD;IAClD,MAAM,EAAE,WAAW,CAAA;CACtB;AAED;;;;;;GAMG;AACH,eAAO,MAAM,oBAAoB;sEAAqE,yBAAyB;;CAqF9H,CAAA"}

package/dist/drag-drop/ResizeHandle.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { DebugConfig } from './types';
+
+export interface ResizeHandleProps {
+    columnId: string;
+    onResizeStart: (columnId: string, startX: number) => void;
+    onResize: (currentX: number) => void;
+    onResizeEnd: () => void;
+    isResizing?: boolean;
+    position?: "left" | "right";
+    className?: string;
+    debug?: DebugConfig;
+}
+export declare const ResizeHandle: ({ columnId, onResizeStart, onResize, onResizeEnd, isResizing, position, className, debug }: ResizeHandleProps) => import("react/jsx-runtime").JSX.Element;
+export interface ResizableColumnProps {
+    columnId: string;
+    width: number;
+    minWidth?: number;
+    maxWidth?: number;
+    onResizeStart: (columnId: string, startX: number) => void;
+    onResize: (currentX: number) => void;
+    onResizeEnd: () => void;
+    isResizing?: boolean;
+    resizable?: boolean;
+    className?: string;
+    debug?: DebugConfig;
+    children: ReactNode;
+}
+export declare const ResizableColumn: ({ columnId, width, minWidth, maxWidth, onResizeStart, onResize, onResizeEnd, isResizing, resizable, className, debug, children }: ResizableColumnProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResizeHandle.d.ts.map

package/dist/drag-drop/ResizeHandle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResizeHandle.d.ts","sourceRoot":"","sources":["../../src/drag-drop/ResizeHandle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAsC,KAAK,SAAS,EAAsE,MAAM,OAAO,CAAA;AAE9I,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,qBAAqB,CAAA;AAE5B,MAAM,WAAW,iBAAiB;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzD,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,WAAW,CAAA;CACtB;AAED,eAAO,MAAM,YAAY,GAAI,4FAAwH,iBAAiB,4CA0JrK,CAAA;AAGD,MAAM,WAAW,oBAAoB;IACjC,QAAQ,EAAE,MAAM,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzD,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAA;CACtB;AAED,eAAO,MAAM,eAAe,GAAI,kIAAuK,oBAAoB,4CA2B1N,CAAA"}

package/dist/drag-drop/ResponsiveControl.d.ts

@@ -0,0 +1,9 @@
+export interface ResponsiveControlProps {
+    isResponsiveMode: boolean;
+    responsiveColumnCount: number;
+    currentColumnCount: number;
+    screenWidth: number;
+    onToggleResponsive: () => void;
+}
+export declare const ResponsiveControl: ({ isResponsiveMode, responsiveColumnCount, currentColumnCount, screenWidth, onToggleResponsive }: ResponsiveControlProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ResponsiveControl.d.ts.map

package/dist/drag-drop/ResponsiveControl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ResponsiveControl.d.ts","sourceRoot":"","sources":["../../src/drag-drop/ResponsiveControl.tsx"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IACnC,gBAAgB,EAAE,OAAO,CAAA;IACzB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,kBAAkB,EAAE,MAAM,IAAI,CAAA;CACjC;AAED,eAAO,MAAM,iBAAiB,GAAI,kGAAkG,sBAAsB,4CAsBzJ,CAAA"}

package/dist/drag-drop/hooks/useColumnLayout.d.ts

@@ -0,0 +1,47 @@
+import { DebugConfig } from '../types';
+
+export interface ColumnConfig {
+    id: string;
+    title: string;
+    minWidth?: number;
+    maxWidth?: number;
+    initialWidth?: number;
+    resizable?: boolean;
+    collapsible?: boolean;
+}
+export interface ColumnLayoutState {
+    columns: ColumnConfig[];
+    columnWidths: Record<string, number>;
+    isResizing: boolean;
+    resizingColumn: string | null;
+    columnPanels: Record<string, string[]>;
+    showInsertPlaceholders: boolean;
+}
+export interface UseColumnLayoutProps {
+    initialColumns: ColumnConfig[];
+    initialPanels: Record<string, string[]>;
+    debug?: DebugConfig;
+    onLayoutChange?: (layout: ColumnLayoutState) => void;
+}
+export interface UseColumnLayoutReturn {
+    layoutState: ColumnLayoutState;
+    addColumn: (config: ColumnConfig, position?: number) => void;
+    removeColumn: (columnId: string) => void;
+    moveColumn: (fromIndex: number, toIndex: number) => void;
+    startResize: (columnId: string, startX: number) => void;
+    handleResize: (currentX: number) => void;
+    endResize: () => void;
+    setColumnWidth: (columnId: string, width: number) => void;
+    resetColumnWidths: () => void;
+    movePanel: (panelId: string, fromColumn: string, toColumn: string, insertIndex: number) => void;
+    addPanel: (panelId: string, columnId: string, insertIndex?: number) => void;
+    removePanel: (panelId: string) => void;
+    updateColumnCount: (count: number) => void;
+    autoBalanceColumns: () => void;
+    getColumnById: (columnId: string) => ColumnConfig | undefined;
+    getTotalWidth: () => number;
+    getColumnElement: (columnId: string) => HTMLElement | null;
+    setShowInsertPlaceholders: (show: boolean) => void;
+}
+export declare const useColumnLayout: ({ initialColumns, initialPanels, debug, onLayoutChange }: UseColumnLayoutProps) => UseColumnLayoutReturn;
+//# sourceMappingURL=useColumnLayout.d.ts.map

package/dist/drag-drop/hooks/useColumnLayout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useColumnLayout.d.ts","sourceRoot":"","sources":["../../../src/drag-drop/hooks/useColumnLayout.ts"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AAE3C,MAAM,WAAW,YAAY;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,MAAM,WAAW,iBAAiB;IAC9B,OAAO,EAAE,YAAY,EAAE,CAAA;IACvB,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IACpC,UAAU,EAAE,OAAO,CAAA;IACnB,cAAc,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;IACtC,sBAAsB,EAAE,OAAO,CAAA;CAClC;AAED,MAAM,WAAW,oBAAoB;IACjC,cAAc,EAAE,YAAY,EAAE,CAAA;IAC9B,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAA;IACvC,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAA;CACvD;AAED,MAAM,WAAW,qBAAqB;IAClC,WAAW,EAAE,iBAAiB,CAAA;IAC9B,SAAS,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5D,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,UAAU,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACxD,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACvD,YAAY,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,SAAS,EAAE,MAAM,IAAI,CAAA;IACrB,cAAc,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACzD,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/F,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3E,WAAW,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC1C,kBAAkB,EAAE,MAAM,IAAI,CAAA;IAC9B,aAAa,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,YAAY,GAAG,SAAS,CAAA;IAC7D,aAAa,EAAE,MAAM,MAAM,CAAA;IAC3B,gBAAgB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,WAAW,GAAG,IAAI,CAAA;IAC1D,yBAAyB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;CACrD;AAED,eAAO,MAAM,eAAe,GAAI,0DAA+D,oBAAoB,KAAG,qBAoZrH,CAAA"}