@aiquants/drag-drop-panels 0.7.2 → 0.8.0

package/src/drag-drop/types.ts

@@ -0,0 +1,248 @@
+/**
+ * ドラッグ&ドロップ機能の型定義
+ * DragDropLayout と useDragDropColumns で共通で使用される型を統合して定義
+ */
+
+import type { ComponentType, DragEvent, MouseEvent, RefObject, TouchEvent } from "react"
+
+export interface ElementWithResizeObserver extends HTMLElement {
+    __resizeObserver?: ResizeObserver
+}
+
+export type ReactMouseEvent = import("react").MouseEvent<Element>
+export type ReactDragEvent = import("react").DragEvent<Element>
+export type ReactTouchEvent = import("react").TouchEvent<Element>
+
+export type DOMMouseEvent = globalThis.MouseEvent
+export type DOMDragEvent = globalThis.DragEvent
+export type DOMTouchEvent = globalThis.TouchEvent
+
+export interface DebugConfig {
+    showDebugPanel?: boolean
+    showMousePosition?: boolean
+    showPanelSizes?: boolean
+    showPlaceholderInfo?: boolean
+    showDropZoneOutlines?: boolean
+    logLevel?: 0 | 1 | 2
+}
+
+export const DEFAULT_DEBUG_CONFIG: Required<DebugConfig> = {
+    showDebugPanel: false,
+    showMousePosition: false,
+    showPanelSizes: false,
+    showPlaceholderInfo: false,
+    showDropZoneOutlines: false,
+    logLevel: 0,
+}
+
+export interface DragOverPosition {
+    columnIndex: number
+    insertIndex: number
+}
+
+export interface OriginalPanelPosition {
+    columnIndex: number
+    panelIndex: number
+}
+
+export interface DragState {
+    isDragging: boolean
+    draggedPanel: string | null
+    dragOverColumn: number | null
+}
+
+export interface ColumnConfig {
+    id: string
+    key: string
+    minWidth?: number
+    maxWidth?: number
+    className?: string
+    label?: string
+    title?: string
+    initialWidth?: number
+    resizable?: boolean
+}
+
+export interface PanelConfig {
+    id: string
+    component: ComponentType<Record<string, unknown>>
+    title: string
+    props?: Record<string, unknown>
+    dragMode?: "normal" | "custom"
+    minHeight?: string
+    maxHeight?: string
+}
+
+export interface PanelSizeInfo {
+    width: number
+    height: number
+    x: number
+    y: number
+    minHeight: string
+    maxHeight: string
+}
+
+export interface TouchDragState {
+    isTouchDragging: boolean
+    panelId?: string | null
+    startX: number
+    startY: number
+    currentX: number
+    currentY: number
+    draggedElement: HTMLElement | null
+}
+
+export interface ClickState {
+    isClicked: boolean
+    panelId: string | null
+}
+
+export interface MousePosition {
+    x: number
+    y: number
+    isVisible: boolean
+}
+
+export interface CustomDragState {
+    isActive: boolean
+    panelId: string
+    startX: number
+    startY: number
+}
+
+export interface DragDropHookReturn {
+    dragState: DragState
+    dragOverPosition: DragOverPosition | null
+    originalPanelPosition: OriginalPanelPosition | null
+    touchDragState: TouchDragState
+    customDrag: CustomDragState
+    clickState: ClickState
+    mousePosition: MousePosition
+    dragModes: Record<string, "normal" | "custom">
+    panelSizes: Record<string, PanelSizeInfo>
+    handleDragStart: (e: ReactDragEvent, panelId: string) => void
+    handleDragEnd: (e: ReactDragEvent) => void
+    handleClick: (e: ReactMouseEvent, panelId: string) => void
+    handleMouseDown: (e: ReactMouseEvent, panelId: string) => void
+    handleTouchStart: (e: ReactTouchEvent, panelId: string) => void
+    handleTouchMove: (e: ReactTouchEvent) => void
+    handleTouchEnd: (e: ReactTouchEvent) => void
+    handlePlaceholderDragEnter: (columnIndex: number, insertIndex: number) => void
+    handlePlaceholderDragLeave: (e: ReactDragEvent, columnIndex: number, insertIndex: number) => void
+    toggleDragMode: (panelId: string) => void
+    setDragOverPosition: (position: DragOverPosition | null) => void
+    setPanelRef: (panelId: string, el: ElementWithResizeObserver | null) => void
+    findPanelPosition: (panelId: string) => OriginalPanelPosition | null
+    dragOverPositionRef: RefObject<DragOverPosition | null>
+}
+
+export interface DragDropEventHandlers {
+    onDragStart: (e: DragEvent<Element>, panelId: string) => void
+    onDragEnd: () => void
+    onPlaceholderDragEnter: (columnIndex: number, insertIndex: number) => void
+    onPlaceholderDragLeave: (e?: DragEvent<Element>, columnIndex?: number, insertIndex?: number) => void
+    onDragOverWithInsert: (e: DragEvent<Element>, columnIndex: number) => void
+    onDropWithInsert: (e: DragEvent<Element>, targetColumn: string) => void
+    onColumnDragLeave: (e: DragEvent<Element>) => void
+    onPanelClick?: (e: MouseEvent<Element>, panelId: string) => void
+    onPanelMouseDown?: (e: MouseEvent<Element>, panelId: string) => void
+    onTouchStart?: (e: TouchEvent<Element>, panelId: string) => void
+    onTouchMove?: (e: TouchEvent<Element>) => void
+    onTouchEnd?: (e: TouchEvent<Element>) => void
+    onPanelSizeInfoClick?: (e: MouseEvent<Element> | TouchEvent<Element>, panelId: string) => void
+    onToggleDragMode?: (panelId: string) => void
+    /**
+     * Optional close handler. When provided, the panel header shows an X button that the
+     * consumer uses to REMOVE the panel (unlike the EyeOff button, which only hides the
+     * panel into the restore bar).
+     *
+     * 指定時のみパネルヘッダに ✕(完全クローズ)ボタンを表示する。
+     * EyeOff(非表示 + 復元バー)とは別の「パネルを取り除く」意味論。
+     */
+    onPanelClose?: (panelId: string) => void
+    /**
+     * Optional maximize handler (controlled). When provided, the panel header shows a
+     * maximize/restore button and the panel whose id equals `maximizedPanel` is rendered
+     * as a viewport-filling fixed overlay (OS-window-like maximize). Called with the
+     * panelId to maximize, or null to restore. Escape and header double-click also restore.
+     *
+     * 指定時のみパネルヘッダに最大化/復元ボタンを表示する (制御型)。`maximizedPanel` に
+     * 一致するパネルはビューポート全面の fixed オーバーレイとして描画される (OS ウインドウの
+     * 最大化と同様)。最大化するときは panelId、復元するときは null で呼ばれる。
+     * Escape キーとヘッダのダブルクリックでも復元/最大化をトグルする。
+     */
+    onPanelMaximizeChange?: (panelId: string | null) => void
+}
+
+/**
+ * Where the HTML5 drag can be initiated from (dragMode "normal" only).
+ * - "panel" (default): the whole panel is draggable — current behavior.
+ * - "header": only the panel header is draggable, so text inside the panel body
+ *   can be selected/copied (essential for document-viewer panels).
+ *
+ * HTML5 ドラッグの開始領域。"header" 指定でパネル本文のテキスト選択が可能になる
+ * (ドキュメントビューア用途で必須)。既定は従来どおり "panel" 全体。
+ */
+export type PanelDragHandle = "panel" | "header"
+
+export interface DragDropState {
+    columnPanels: Record<string, string[]>
+    panelVisibility: Record<string, boolean>
+    dragModes: Record<string, "normal" | "custom">
+    dragState: DragState
+    dragOverPosition: DragOverPosition | null
+    originalPanelPosition: OriginalPanelPosition | null
+    panelSizes: Record<string, PanelSizeInfo>
+    customDrag?: CustomDragState
+}
+
+export interface DragDropStateUpdaters {
+    onColumnPanelsChange: (newColumnPanels: Record<string, string[]>) => void
+    onPanelVisibilityChange: (newVisibility: Record<string, boolean>) => void
+    setPanelRef?: (panelId: string, el: HTMLDivElement | null) => void
+}
+
+export interface UseDragDropColumnsReturn {
+    columnPanels: Record<string, string[]>
+    panelVisibility: Record<string, boolean>
+    dragModes: Record<string, "normal" | "custom">
+    dragState: DragState
+    dragOverPosition: DragOverPosition | null
+    originalPanelPosition: OriginalPanelPosition | null
+    touchDragState: TouchDragState
+    customDrag: CustomDragState
+    clickState: ClickState
+    mousePosition: MousePosition
+    panelSizes: Record<string, PanelSizeInfo>
+    setColumnPanels: (newColumnPanels: Record<string, string[]>) => void
+    setPanelVisibility: (newVisibility: Record<string, boolean>) => void
+    setDragModes: (newDragModes: Record<string, "normal" | "custom">) => void
+    setPanelRef: (panelId: string, el: HTMLDivElement | null) => void
+    handleDragStart: (e: DragEvent<Element>, panelId: string) => void
+    handleDragEnd: () => void
+    handleMouseDown: (e: MouseEvent<Element>, panelId: string) => void
+    handleTouchStart: (e: TouchEvent<Element>, panelId: string) => void
+    handleTouchMove: (e: TouchEvent) => void
+    handleTouchEnd: (e: TouchEvent) => void
+    handlePlaceholderDragEnter: (columnIndex: number, insertIndex: number) => void
+    handlePlaceholderDragLeave: (e?: DragEvent<Element>, columnIndex?: number, insertIndex?: number) => void
+    handleDragOverWithInsert: (e: DragEvent<Element>, columnIndex: number) => void
+    handleDropWithInsert: (e: DragEvent<Element>, targetColumn: string) => void
+    handleColumnDragLeave: (e: DragEvent<Element>) => void
+    handlePanelSizeInfoClick: (e: MouseEvent<Element> | TouchEvent<Element>, panelId: string) => void
+    toggleDragMode: (panelId: string) => void
+    findPanelPosition: (panelId: string) => OriginalPanelPosition | null
+}
+
+export interface ResizeConfig {
+    enableResize?: boolean
+    columnWidths?: Record<string, number>
+    onColumnWidthChange?: (columnId: string, width: number) => void
+    onResizeStart?: (columnId: string, startX: number) => void
+    onResize?: (currentX: number) => void
+    onResizeEnd?: () => void
+    isResizing?: boolean
+    resizingColumn?: string | null
+}
+
+export type DragMode = "normal" | "custom"

package/src/drag-drop/utils/columnIdUtils.ts

@@ -0,0 +1,104 @@
+/**
+ * @fileoverview Column ID management utilities for consistent column identification across the application.
+ * カラムID管理ユーティリティ - アプリケーション全体でのカラム識別の一貫性を保つ。
+ */
+
+export interface ColumnIdConfig {
+    prefix: string
+    startIndex: number
+    separator: string
+}
+
+export const DEFAULT_COLUMN_ID_CONFIG: ColumnIdConfig = {
+    prefix: "column",
+    startIndex: 1,
+    separator: "_",
+}
+
+export const generateColumnId = (index: number, config: ColumnIdConfig = DEFAULT_COLUMN_ID_CONFIG): string => {
+    const { prefix, startIndex, separator } = config
+    const columnNumber = index + startIndex
+    return `${prefix}${separator}${columnNumber}`
+}
+
+export const generateColumnIds = (count: number, config: ColumnIdConfig = DEFAULT_COLUMN_ID_CONFIG): string[] => {
+    return Array.from({ length: count }, (_, index) => generateColumnId(index, config))
+}
+
+export const parseColumnId = (columnId: string, config: ColumnIdConfig = DEFAULT_COLUMN_ID_CONFIG): number | null => {
+    const { prefix, startIndex, separator } = config
+    const expectedPrefix = `${prefix}${separator}`
+
+    if (!columnId.startsWith(expectedPrefix)) {
+        return null
+    }
+
+    const numberPart = columnId.slice(expectedPrefix.length)
+    const columnNumber = parseInt(numberPart, 10)
+
+    if (Number.isNaN(columnNumber) || columnNumber < startIndex) {
+        return null
+    }
+
+    return columnNumber - startIndex
+}
+
+export const isValidColumnId = (columnId: string, config: ColumnIdConfig = DEFAULT_COLUMN_ID_CONFIG): boolean => {
+    return parseColumnId(columnId, config) !== null
+}
+
+export const getNextColumnId = (existingIds: string[], config: ColumnIdConfig = DEFAULT_COLUMN_ID_CONFIG): string => {
+    const indices = existingIds
+        .map((id) => parseColumnId(id, config))
+        .filter((index): index is number => index !== null)
+        .sort((a, b) => a - b)
+
+    for (let i = 0; i < indices.length; i++) {
+        if (indices[i] !== i) {
+            return generateColumnId(i, config)
+        }
+    }
+
+    return generateColumnId(indices.length, config)
+}
+
+export const sortColumnIds = (columnIds: string[], config: ColumnIdConfig = DEFAULT_COLUMN_ID_CONFIG): string[] => {
+    return columnIds.sort((a, b) => {
+        const indexA = parseColumnId(a, config) ?? -1
+        const indexB = parseColumnId(b, config) ?? -1
+        return indexA - indexB
+    })
+}
+
+export const createColumnIdMapping = (oldIds: string[], config: ColumnIdConfig = DEFAULT_COLUMN_ID_CONFIG): Record<string, string> => {
+    const mapping: Record<string, string> = {}
+
+    oldIds.forEach((oldId, index) => {
+        const newId = generateColumnId(index, config)
+        mapping[oldId] = newId
+    })
+
+    return mapping
+}
+
+export const normalizeColumnPanels = (columnPanels: Record<string, string[]>, newColumnCount: number, config: ColumnIdConfig = DEFAULT_COLUMN_ID_CONFIG): Record<string, string[]> => {
+    const allPanels: string[] = []
+    Object.values(columnPanels).forEach((panels) => {
+        allPanels.push(...panels)
+    })
+
+    const newColumnPanels: Record<string, string[]> = {}
+    const newColumnIds = generateColumnIds(newColumnCount, config)
+
+    newColumnIds.forEach((columnId) => {
+        newColumnPanels[columnId] = []
+    })
+
+    allPanels.forEach((panelId, index) => {
+        const targetColumnIndex = index % newColumnCount
+        const targetColumnId = newColumnIds[targetColumnIndex]
+        newColumnPanels[targetColumnId].push(panelId)
+    })
+
+    return newColumnPanels
+}

package/src/drag-drop/utils/edgeScrollUtils.ts

@@ -0,0 +1,124 @@
+/**
+ * @fileoverview Utility functions for implementing edge scrolling during drag operations.
+ * This provides auto-scrolling functionality when the cursor reaches the edge of the viewport.
+ *
+ * ドラッグ操作中のエッジスクロール機能を実装するためのユーティリティ関数。
+ * カーソルがビューポートの端に到達した際の自動スクロール機能を提供します。
+ */
+
+export interface EdgeScrollConfig {
+    triggerDistance: number
+    scrollSpeed: number
+    maxScrollSpeed: number
+}
+
+export const DEFAULT_EDGE_SCROLL_CONFIG: EdgeScrollConfig = {
+    triggerDistance: 80,
+    scrollSpeed: 5,
+    maxScrollSpeed: 20,
+}
+
+export interface ScrollVector {
+    x: number
+    y: number
+}
+
+export const calculateScrollVector = (clientX: number, clientY: number, config: EdgeScrollConfig = DEFAULT_EDGE_SCROLL_CONFIG, scrollElement?: HTMLElement): ScrollVector => {
+    const { triggerDistance, scrollSpeed, maxScrollSpeed } = config
+
+    let elementBounds: DOMRect
+    if (scrollElement) {
+        elementBounds = scrollElement.getBoundingClientRect()
+    } else {
+        elementBounds = new DOMRect(0, 0, window.innerWidth, window.innerHeight)
+    }
+
+    const { left, top, right, bottom } = elementBounds
+
+    let scrollX = 0
+    let scrollY = 0
+
+    if (clientX >= left && clientX <= right && clientY >= top && clientY <= bottom) {
+        if (clientX < left + triggerDistance) {
+            const intensity = Math.max(0, (left + triggerDistance - clientX) / triggerDistance)
+            scrollX = -Math.min(maxScrollSpeed, scrollSpeed + intensity * (maxScrollSpeed - scrollSpeed))
+        } else if (clientX > right - triggerDistance) {
+            const intensity = Math.max(0, (clientX - (right - triggerDistance)) / triggerDistance)
+            scrollX = Math.min(maxScrollSpeed, scrollSpeed + intensity * (maxScrollSpeed - scrollSpeed))
+        }
+
+        if (clientY < top + triggerDistance) {
+            const intensity = Math.max(0, (top + triggerDistance - clientY) / triggerDistance)
+            scrollY = -Math.min(maxScrollSpeed, scrollSpeed + intensity * (maxScrollSpeed - scrollSpeed))
+        } else if (clientY > bottom - triggerDistance) {
+            const intensity = Math.max(0, (clientY - (bottom - triggerDistance)) / triggerDistance)
+            scrollY = Math.min(maxScrollSpeed, scrollSpeed + intensity * (maxScrollSpeed - scrollSpeed))
+        }
+    }
+
+    return { x: scrollX, y: scrollY }
+}
+
+export const performScroll = (scrollVector: ScrollVector, scrollElement?: HTMLElement): void => {
+    if (scrollVector.x !== 0 || scrollVector.y !== 0) {
+        if (scrollElement) {
+            scrollElement.scrollBy(scrollVector.x, scrollVector.y)
+        } else {
+            window.scrollBy(scrollVector.x, scrollVector.y)
+        }
+    }
+}
+
+export class EdgeScrollManager {
+    private intervalId: number | null = null
+    private config: EdgeScrollConfig
+    private isActive = false
+    private scrollElement?: HTMLElement
+
+    constructor(config: EdgeScrollConfig = DEFAULT_EDGE_SCROLL_CONFIG, scrollElement?: HTMLElement) {
+        this.config = config
+        this.scrollElement = scrollElement
+    }
+
+    setScrollElement(element?: HTMLElement): void {
+        this.scrollElement = element
+    }
+
+    start(clientX: number, clientY: number): void {
+        if (this.isActive) {
+            return
+        }
+
+        this.isActive = true
+        this.intervalId = window.setInterval(() => {
+            const scrollVector = calculateScrollVector(clientX, clientY, this.config, this.scrollElement)
+            performScroll(scrollVector, this.scrollElement)
+        }, 16)
+    }
+
+    update(clientX: number, clientY: number): void {
+        const scrollVector = calculateScrollVector(clientX, clientY, this.config, this.scrollElement)
+
+        if ((scrollVector.x !== 0 || scrollVector.y !== 0) && !this.isActive) {
+            this.start(clientX, clientY)
+        } else if (scrollVector.x === 0 && scrollVector.y === 0 && this.isActive) {
+            this.stop()
+        }
+    }
+
+    stop(): void {
+        if (this.intervalId !== null) {
+            clearInterval(this.intervalId)
+            this.intervalId = null
+        }
+        this.isActive = false
+    }
+
+    isScrolling(): boolean {
+        return this.isActive
+    }
+
+    updateConfig(newConfig: EdgeScrollConfig): void {
+        this.config = newConfig
+    }
+}

package/src/drag-drop/utils/simple-logger.ts

@@ -0,0 +1,162 @@
+/**
+ * @module utils/logger
+ * @description Logger utility for consistent log management across the library.
+ * @description ライブラリ全体で一貫したログ管理を行うためのロガーユーティリティ。
+ */
+
+/**
+ * @enum LogLevel
+ * @description Log levels for filtering output.
+ * @description 出力をフィルタリングするためのログレベル。
+ */
+export enum LogLevel {
+    DEBUG = 0,
+    INFO = 1,
+    WARN = 2,
+    ERROR = 3,
+    NONE = 4,
+}
+
+/**
+ * @interface ILogger
+ * @description Interface for a logger object compatible with Console.
+ * @description Console と互換性のあるロガーオブジェクトのインターフェース。
+ */
+export interface ILogger {
+    debug(message?: unknown, ...optionalParams: unknown[]): void
+    info(message?: unknown, ...optionalParams: unknown[]): void
+    warn(message?: unknown, ...optionalParams: unknown[]): void
+    error(message?: unknown, ...optionalParams: unknown[]): void
+}
+
+/**
+ * @class Logger
+ * @description A wrapper class for handling logging with levels and prefixes.
+ * @description レベルとプレフィックスを使用したログ記録を処理するためのラッパークラス。
+ */
+export class Logger implements ILogger {
+    private level: LogLevel
+    private prefix: string
+    private impl: ILogger
+
+    /**
+     * @constructor
+     * @param {LogLevel} [level=LogLevel.WARN] - The minimum log level to output.
+     * @param {string} [prefix="[drag-drop-panels]"] - The prefix to add to all log messages.
+     * @param {ILogger} [impl=console] - The implementation to use for logging.
+     */
+    constructor(level: LogLevel = LogLevel.WARN, prefix: string = "[drag-drop-panels]", impl: ILogger = console) {
+        this.level = level
+        this.prefix = prefix
+        this.impl = impl
+    }
+
+    private static instance: Logger = new Logger(LogLevel.WARN, "[drag-drop-panels]")
+
+    /**
+     * @method setLevel
+     * @description Updates the current log level for the static instance.
+     * @description 静的インスタンスの現在のログレベルを更新します。
+     * @param {LogLevel} level - The new log level.
+     */
+    static setLevel(level: LogLevel): void {
+        Logger.instance.setLevel(level)
+    }
+
+    /**
+     * @method setLevel
+     * @description Updates the current log level.
+     * @description 現在のログレベルを更新します。
+     * @param {LogLevel} level - The new log level.
+     */
+    setLevel(level: LogLevel): void {
+        this.level = level
+    }
+
+    /**
+     * @method setImplementation
+     * @description Updates the logger implementation for the static instance.
+     * @description 静的インスタンスのロガーの実装を更新します。
+     * @param {ILogger} impl - The new logger implementation.
+     */
+    static setImplementation(impl: ILogger): void {
+        Logger.instance.setImplementation(impl)
+    }
+
+    /**
+     * @method setImplementation
+     * @description Updates the logger implementation.
+     * @description ロガーの実装を更新します。
+     * @param {ILogger} impl - The new logger implementation.
+     */
+    setImplementation(impl: ILogger): void {
+        this.impl = impl
+    }
+
+    /**
+     * @method setPrefix
+     * @description Updates the log prefix for the static instance.
+     * @description 静的インスタンスのログのプレフィックスを更新します。
+     * @param {string} prefix - The new prefix.
+     */
+    static setPrefix(prefix: string): void {
+        Logger.instance.setPrefix(prefix)
+    }
+
+    /**
+     * @method setPrefix
+     * @description Updates the log prefix.
+     * @description ログのプレフィックスを更新します。
+     * @param {string} prefix - The new prefix.
+     */
+    setPrefix(prefix: string): void {
+        this.prefix = prefix
+    }
+
+    private formatMessage(message: unknown): unknown[] {
+        if (typeof message === "string") {
+            return [`${this.prefix} ${message}`]
+        }
+        return [this.prefix, message]
+    }
+
+    static debug(message?: unknown, ...optionalParams: unknown[]): void {
+        Logger.instance.debug(message, ...optionalParams)
+    }
+
+    debug(message?: unknown, ...optionalParams: unknown[]): void {
+        if (this.level <= LogLevel.DEBUG) {
+            this.impl.debug(...this.formatMessage(message), ...optionalParams)
+        }
+    }
+
+    static info(message?: unknown, ...optionalParams: unknown[]): void {
+        Logger.instance.info(message, ...optionalParams)
+    }
+
+    info(message?: unknown, ...optionalParams: unknown[]): void {
+        if (this.level <= LogLevel.INFO) {
+            this.impl.info(...this.formatMessage(message), ...optionalParams)
+        }
+    }
+
+    static warn(message?: unknown, ...optionalParams: unknown[]): void {
+        Logger.instance.warn(message, ...optionalParams)
+    }
+
+    warn(message?: unknown, ...optionalParams: unknown[]): void {
+        if (this.level <= LogLevel.WARN) {
+            this.impl.warn(...this.formatMessage(message), ...optionalParams)
+        }
+    }
+
+    static error(message?: unknown, ...optionalParams: unknown[]): void {
+        Logger.instance.error(message, ...optionalParams)
+    }
+
+    error(message?: unknown, ...optionalParams: unknown[]): void {
+        if (this.level <= LogLevel.ERROR) {
+            this.impl.error(...this.formatMessage(message), ...optionalParams)
+        }
+    }
+}

package/src/index.ts

@@ -0,0 +1,60 @@
+/**
+ * @package @aiquants/drag-drop-panels
+ * @description Reusable drag-and-drop panel layout components and utilities
+ *
+ * 再利用可能なドラッグ&ドロップパネルレイアウトコンポーネントとユーティリティ
+ */
+
+export type { DragDropLayoutProps } from "./DragDropLayout"
+export { DragDropLayout } from "./DragDropLayout"
+export { ColumnControlPanel } from "./drag-drop/ColumnControlPanel"
+export { ColumnInsertPanel } from "./drag-drop/ColumnInsertPanel"
+export { debugLog, PanelSizeDisplay } from "./drag-drop/DebugComponents"
+export { DebugControlPanel } from "./drag-drop/DebugControlPanel"
+export { DropZoneDebugOverlay, InsertPlaceholder } from "./drag-drop/DebugOverlay"
+export type { ColumnConfig, ColumnLayoutState, UseColumnLayoutProps, UseColumnLayoutReturn } from "./drag-drop/hooks/useColumnLayout"
+export { useColumnLayout } from "./drag-drop/hooks/useColumnLayout"
+export { useCustomDragHandlers } from "./drag-drop/hooks/useCustomDragHandlers"
+export type { UseDragDropColumnsProps } from "./drag-drop/hooks/useDragDropColumns"
+export { useDragDropColumns } from "./drag-drop/hooks/useDragDropColumns"
+export { useDragDropState } from "./drag-drop/hooks/useDragDropState"
+export { useMouseTracking } from "./drag-drop/hooks/useMouseTracking"
+export { useNormalDragHandlers } from "./drag-drop/hooks/useNormalDragHandlers"
+export { usePanelManagement } from "./drag-drop/hooks/usePanelManagement"
+export type { UseResponsiveColumnsProps, UseResponsiveColumnsReturn } from "./drag-drop/hooks/useResponsiveColumns"
+export { useResponsiveColumns } from "./drag-drop/hooks/useResponsiveColumns"
+export type { ResizableColumnProps, ResizeHandleProps } from "./drag-drop/ResizeHandle"
+export { ResizableColumn, ResizeHandle } from "./drag-drop/ResizeHandle"
+export { ResponsiveControl } from "./drag-drop/ResponsiveControl"
+export type {
+    ClickState,
+    ColumnConfig as ColumnConfigType,
+    CustomDragState,
+    DebugConfig,
+    DOMDragEvent,
+    DOMMouseEvent,
+    DOMTouchEvent,
+    DragDropEventHandlers,
+    DragDropHookReturn,
+    DragDropState,
+    DragDropStateUpdaters,
+    DragMode,
+    DragOverPosition,
+    DragState,
+    ElementWithResizeObserver,
+    MousePosition,
+    OriginalPanelPosition,
+    PanelConfig,
+    PanelSizeInfo,
+    ReactDragEvent,
+    ReactMouseEvent,
+    ReactTouchEvent,
+    ResizeConfig,
+    TouchDragState,
+    UseDragDropColumnsReturn,
+} from "./drag-drop/types"
+export { DEFAULT_DEBUG_CONFIG } from "./drag-drop/types"
+export type { ColumnIdConfig } from "./drag-drop/utils/columnIdUtils"
+export { createColumnIdMapping, DEFAULT_COLUMN_ID_CONFIG, generateColumnId, generateColumnIds, getNextColumnId, isValidColumnId, normalizeColumnPanels, parseColumnId, sortColumnIds } from "./drag-drop/utils/columnIdUtils"
+export type { EdgeScrollConfig, ScrollVector } from "./drag-drop/utils/edgeScrollUtils"
+export { calculateScrollVector, DEFAULT_EDGE_SCROLL_CONFIG, EdgeScrollManager, performScroll } from "./drag-drop/utils/edgeScrollUtils"