@aiquants/drag-drop-panels 0.7.2 → 0.8.0

package/src/drag-drop/DebugOverlay.tsx

@@ -0,0 +1,250 @@
+/**
+ * @fileoverview Defines debug overlay components for the drag-and-drop layout.
+ * This includes a placeholder for insertions and a debug overlay for drop zones.
+ *
+ * ドラッグ＆ドロップレイアウト用のデバッグオーバーレイコンポーネントを定義します。
+ * これには、挿入用のプレースホルダーやドロップゾーンのデバッグオーバーレイが含まれます。
+ */
+import React, { useEffect, useRef, useState } from "react"
+import { debugLog } from "./DebugComponents"
+import type { 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 const InsertPlaceholder = React.memo<InsertPlaceholderProps>(({ index, columnIndex, isDragging, dragOverPosition, originalPosition, onDragEnter, onDragLeave, config, customDrag }) => {
+    // ドラッグ中のパネルの元の位置と同じ場所、またはそのすぐ下のプレースホルダーは無効化する
+    const isSameAsOriginalPosition = originalPosition && originalPosition.columnIndex === columnIndex && (originalPosition.panelIndex === index || originalPosition.panelIndex + 1 === index)
+
+    // 現在のプレースホルダーがハイライトされるべきかどうかの判定
+    const isHighlighted = !isSameAsOriginalPosition && dragOverPosition?.columnIndex === columnIndex && dragOverPosition?.insertIndex === index
+
+    const placeholderRef = useRef<HTMLDivElement>(null)
+    const [sizeInfo, setSizeInfo] = useState<{ width: number; height: number; x: number; y: number } | null>(null)
+
+    // 表示状態の制御（CSS アニメーション用）
+    const shouldShow = isDragging || (customDrag?.isActive ?? false)
+
+    // プレースホルダーのサイズと位置情報を計算・更新
+    useEffect(() => {
+        if (placeholderRef.current) {
+            const rect = placeholderRef.current.getBoundingClientRect()
+            const newSizeInfo = {
+                width: Math.round(rect.width),
+                height: Math.round(rect.height),
+                x: Math.round(rect.left),
+                y: Math.round(rect.top),
+            }
+
+            setSizeInfo(newSizeInfo)
+
+            // ハイライトされたプレースホルダーの詳細情報をログ出力
+            if (isHighlighted) {
+                debugLog(config, 1, `🎯 アクティブプレースホルダー ${index}-${columnIndex}:`, {
+                    size: `${newSizeInfo.width}×${newSizeInfo.height}`,
+                    position: `(${newSizeInfo.x}, ${newSizeInfo.y})`,
+                    bottomRight: `(${newSizeInfo.x + newSizeInfo.width}, ${newSizeInfo.y + newSizeInfo.height})`,
+                    center: `(${newSizeInfo.x + newSizeInfo.width / 2}, ${newSizeInfo.y + newSizeInfo.height / 2})`,
+                })
+            }
+        }
+    }, [isHighlighted, index, columnIndex, config])
+
+    debugLog(config, 2, `プレースホルダー${index}-${columnIndex}: 表示中`, { isHighlighted, isDragging, dragOverPosition, shouldShow })
+
+    return (
+        // biome-ignore lint/a11y/noStaticElementInteractions: ドラッグイベントを処理するための対話的な要素。デバッグ目的のため、キーボード操作は必須ではない。
+        <div
+            ref={placeholderRef}
+            data-placeholder-index={index}
+            data-placeholder-column={columnIndex}
+            onDragEnter={() => onDragEnter(columnIndex, index)}
+            onDragLeave={(e) => onDragLeave(e, columnIndex, index)}
+            className={`relative flex w-full items-center justify-center transition-all duration-0 ${
+                isSameAsOriginalPosition
+                    ? "pointer-events-none h-0 overflow-hidden opacity-0"
+                    : !shouldShow
+                      ? "pointer-events-none h-0 overflow-hidden opacity-0"
+                      : isHighlighted
+                        ? "my-2 scale-[1.02] rounded-xl border-4 border-sky-500 border-dashed bg-sky-200 px-4 py-6 shadow-lg ring-2 ring-sky-400 ring-opacity-50"
+                        : "my-2 rounded-xl border-2 border-sky-300 border-dashed bg-sky-50/70 px-2 py-4 opacity-80"
+            }`}>
+            {/* デバッグ用サイズ情報（プレースホルダー用） */}
+            {!isSameAsOriginalPosition && shouldShow && config.showPlaceholderInfo && sizeInfo && (
+                <div className="absolute top-1 right-1 z-10 rounded-md bg-blue-500/90 px-2 py-1 font-mono text-white text-xs leading-tight shadow-lg">
+                    <div>
+                        {sizeInfo.width}×{sizeInfo.height}
+                    </div>
+                    <div>
+                        X:{sizeInfo.x} Y:{sizeInfo.y}
+                    </div>
+                    <div className="text-[10px] opacity-80">min:200px max:500px</div>
+                    <div className="mt-0.5 text-[10px] opacity-80">
+                        PH-{columnIndex}-{index} {isHighlighted ? "ACTIVE" : "IDLE"}
+                    </div>
+                </div>
+            )}
+            {/* ドロップ指示のUI */}
+            {!isSameAsOriginalPosition && shouldShow && (
+                <div className="flex items-center space-x-2 text-sky-600">
+                    <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <title>パネルをここにドロップ</title>
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
+                    </svg>
+                    <span className="font-medium text-sm">パネルをここにドロップ</span>
+                </div>
+            )}
+        </div>
+    )
+})
+
+InsertPlaceholder.displayName = "InsertPlaceholder"
+
+/**
+ * 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 const DropZoneDebugOverlay = ({ columnIndex, isDragging, dragOverPosition, children, config }: DropZoneDebugOverlayProps) => {
+    const debugRef = useRef<HTMLDivElement>(null)
+    const [zoneInfo, setZoneInfo] = useState<{
+        width: number
+        height: number
+        x: number
+        y: number
+        isActive: boolean
+    } | null>(null)
+
+    // ドロップゾーンの情報を計算・更新
+    useEffect(() => {
+        if (debugRef.current && isDragging) {
+            const rect = debugRef.current.getBoundingClientRect()
+            const isActive = dragOverPosition?.columnIndex === columnIndex
+
+            const newZoneInfo = {
+                width: Math.round(rect.width),
+                height: Math.round(rect.height),
+                x: Math.round(rect.left),
+                y: Math.round(rect.top),
+                isActive,
+            }
+
+            setZoneInfo(newZoneInfo)
+
+            // アクティブなドロップゾーンの情報をログ出力
+            if (isActive) {
+                debugLog(config, 1, `🎯 アクティブドロップゾーン ${columnIndex}:`, {
+                    size: `${newZoneInfo.width}×${newZoneInfo.height}`,
+                    position: `(${newZoneInfo.x}, ${newZoneInfo.y})`,
+                    bottomRight: `(${newZoneInfo.x + newZoneInfo.width}, ${newZoneInfo.y + newZoneInfo.height})`,
+                    center: `(${newZoneInfo.x + newZoneInfo.width / 2}, ${newZoneInfo.y + newZoneInfo.height / 2})`,
+                })
+            }
+        }
+    }, [isDragging, dragOverPosition, columnIndex, config])
+
+    return (
+        <div ref={debugRef} className="relative">
+            {children}
+
+            {/* デバッグ用オーバーレイ - ドラッグ中かつデバッグ設定が有効な場合のみ表示 */}
+            {isDragging && zoneInfo && config.showDropZoneOutlines && (
+                <>
+                    {/* ドロップゾーン境界線 */}
+                    <div className={`pointer-events-none absolute inset-0 rounded-lg border-2 border-dashed transition-all duration-200 ${zoneInfo.isActive ? "border-red-500 bg-red-100/20 shadow-lg" : "border-gray-400 bg-gray-100/10"}`} />
+
+                    {/* ドロップゾーン情報表示 */}
+                    <div className={`absolute top-2 left-2 z-20 rounded-md px-2 py-1 font-mono text-xs leading-tight shadow-lg transition-all duration-200 ${zoneInfo.isActive ? "bg-red-500/90 text-white" : "bg-gray-500/90 text-white"}`}>
+                        <div className="font-bold">DropZone-{columnIndex}</div>
+                        <div>
+                            {zoneInfo.width}×{zoneInfo.height}
+                        </div>
+                        <div>
+                            X:{zoneInfo.x} Y:{zoneInfo.y}
+                        </div>
+                        <div className="mt-0.5 text-[10px] opacity-80">{zoneInfo.isActive ? "ACTIVE" : "IDLE"}</div>
+                    </div>
+
+                    {/* 中央座標マーカー */}
+                    <div
+                        className={`pointer-events-none absolute transition-all duration-200 ${zoneInfo.isActive ? "opacity-100" : "opacity-50"}`}
+                        style={
+                            {
+                                left: `${zoneInfo.width / 2 - 6}px`,
+                                top: `${zoneInfo.height / 2 - 6}px`,
+                            } as React.CSSProperties
+                        }>
+                        <div className={`h-3 w-3 rounded-full border-2 ${zoneInfo.isActive ? "border-red-700 bg-red-500" : "border-gray-700 bg-gray-500"}`} />
+                    </div>
+
+                    {/* 四隅のマーカー */}
+                    {zoneInfo.isActive && (
+                        <>
+                            <div className="pointer-events-none absolute top-0 left-0 h-2 w-2 rounded-full bg-red-500" />
+                            <div className="pointer-events-none absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500" />
+                            <div className="pointer-events-none absolute bottom-0 left-0 h-2 w-2 rounded-full bg-red-500" />
+                            <div className="pointer-events-none absolute right-0 bottom-0 h-2 w-2 rounded-full bg-red-500" />
+                        </>
+                    )}
+                </>
+            )}
+        </div>
+    )
+}
+
+DropZoneDebugOverlay.displayName = "DropZoneDebugOverlay"

package/src/drag-drop/DragDropLayout.css

@@ -0,0 +1,130 @@
+/* DragDropLayout コンポーネント全体のカスタムスタイル */
+
+/* 固定幅カラムの幅を固定し縮小を防止 */
+.resize-enabled-column {
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: var(--column-width, 350px);
+}
+
+/* 残余スペースを埋めるカラム設定 */
+.auto-width-column {
+  flex: 1;
+}
+
+/* リサイズ操作中にカーソル形状を統一 */
+.resizing-cursor {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+
+/* リサイズ中カラムの視覚変化を柔らかく付与 */
+.column-resizing {
+  opacity: 0.8;
+  transition: opacity 0.2s ease;
+}
+
+/* アクティブリサイズ中のカラムを強調表示 */
+.column-resizing-active {
+  opacity: 1;
+  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
+  transition: none;
+}
+
+/* 全体リサイズ時にボディカーソルを固定 */
+body.resizing {
+  cursor: col-resize !important;
+  user-select: none !important;
+}
+/* カスタムドラッグ中のカーソルと選択状態を固定 */
+body.custom-dragging,
+body.custom-dragging * {
+  cursor: grabbing !important;
+  user-select: none !important;
+}
+
+/* カスタムドラッグ中に疑似要素も同じカーソルを使用 */
+body.custom-dragging *::before,
+body.custom-dragging *::after {
+  cursor: grabbing !important;
+}
+
+/* ドラッグ対象パネルの演出を設定 */
+.panel-draggable[data-dragging="true"] {
+  transform: rotate(1deg);
+  opacity: 0.2;
+  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.5);
+  transition:
+    transform 1s ease,
+    opacity 1s ease,
+    box-shadow 1s ease;
+}
+
+/* 移動中パネル内部のオーバーフローを抑制 */
+.panel.is-moving * {
+  overflow: hidden !important;
+}
+
+/* プレースホルダー非表示時に寸法と余白をゼロ化 */
+.panel-with-placeholder[data-panel-hidden="true"] {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  height: 0 !important;
+  opacity: 0;
+}
+
+/* ドロップ領域内のプレースホルダー表示間隔を調整 */
+[data-drop-zone="true"] > .panel-with-placeholder {
+  margin-top: 0;
+  transition: margin 0.2s ease;
+}
+
+/* ドロップ領域内の複数プレースホルダー間に余白を確保 */
+[data-drop-zone="true"] > .panel-with-placeholder:not([data-panel-hidden="true"]) ~ .panel-with-placeholder:not([data-panel-hidden="true"]) {
+  margin-top: 1rem;
+}
+
+/* パネルスクロール領域のスクロールバーを細く設定 */
+.panel-scroll-area {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(15, 23, 42, 0.25) transparent;
+}
+
+/* ホバー時にスクロールバー色を強調 */
+.panel-scroll-area:hover {
+  scrollbar-color: rgba(15, 23, 42, 0.35) transparent;
+}
+
+/* WebKit 系ブラウザでスクロールバー幅を細く定義 */
+.panel-scroll-area::-webkit-scrollbar {
+  width: 6px;
+}
+
+/* WebKit 系ブラウザでスクロールバーのトラックを透明化 */
+.panel-scroll-area::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* WebKit 系ブラウザでスクロールバーつまみの形状と色を指定 */
+.panel-scroll-area::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+  background-color: rgba(15, 23, 42, 0.25);
+}
+
+/* ホバー時の WebKit 系スクロールバーつまみ色を変更 */
+.panel-scroll-area:hover::-webkit-scrollbar-thumb {
+  background-color: rgba(15, 23, 42, 0.35);
+}
+
+/* スクロールバーを完全に非表示にするユーティリティ */
+.no-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+/* WebKit 系ブラウザでスクロールバーを消去 */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}

package/src/drag-drop/ResizeHandle.tsx

@@ -0,0 +1,208 @@
+import { type MouseEvent as ReactMouseEvent, type ReactNode, type TouchEvent as ReactTouchEvent, useCallback, useEffect, useRef } from "react"
+import { debugLog } from "./DebugComponents"
+import type { DebugConfig } from "./types"
+import "./resize-handle.css"
+
+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 const ResizeHandle = ({ columnId, onResizeStart, onResize, onResizeEnd, isResizing = false, position = "right", className = "", debug = {} }: ResizeHandleProps) => {
+    const isDragging = useRef(false)
+    const handleRef = useRef<HTMLDivElement>(null)
+
+    // 外部からリサイズ状態が解除された場合の処理
+    useEffect(() => {
+        if (!isResizing && isDragging.current) {
+            debugLog(debug, 1, "外部からのリサイズ解除を検出、ドラッグ状態を強制解除:", columnId)
+
+            isDragging.current = false
+
+            document.body.style.cursor = ""
+            document.body.style.userSelect = ""
+            document.body.classList.remove("resizing-column")
+        }
+    }, [isResizing, columnId, debug])
+
+    // マウスダウンでリサイズ開始
+    const handleMouseDown = useCallback(
+        (e: ReactMouseEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+
+            debugLog(debug, 2, "リサイズハンドル マウスダウン:", columnId)
+
+            isDragging.current = true
+            onResizeStart(columnId, e.clientX)
+
+            document.body.style.cursor = "col-resize"
+            document.body.style.userSelect = "none"
+            document.body.classList.add("resizing-column")
+        },
+        [columnId, onResizeStart, debug],
+    )
+
+    // グローバルマウスイベントの処理
+    useEffect(() => {
+        const handleMouseMove = (e: MouseEvent) => {
+            if (!isDragging.current) return
+
+            e.preventDefault()
+            onResize(e.clientX)
+        }
+
+        const handleMouseUp = () => {
+            if (!isDragging.current) return
+
+            debugLog(debug, 2, "リサイズハンドル マウスアップ:", columnId)
+
+            isDragging.current = false
+            onResizeEnd()
+
+            document.body.style.cursor = ""
+            document.body.style.userSelect = ""
+            document.body.classList.remove("resizing-column")
+        }
+
+        document.addEventListener("mousemove", handleMouseMove)
+        document.addEventListener("mouseup", handleMouseUp)
+
+        return () => {
+            document.removeEventListener("mousemove", handleMouseMove)
+            document.removeEventListener("mouseup", handleMouseUp)
+        }
+    }, [columnId, onResize, onResizeEnd, debug])
+
+    // タッチイベント対応
+    const handleTouchStart = useCallback(
+        (e: ReactTouchEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+
+            const touch = e.touches[0]
+            debugLog(debug, 2, "リサイズハンドル タッチスタート:", columnId)
+
+            isDragging.current = true
+            onResizeStart(columnId, touch.clientX)
+
+            document.body.style.cursor = "col-resize"
+            document.body.style.userSelect = "none"
+            document.body.classList.add("resizing-column")
+        },
+        [columnId, onResizeStart, debug],
+    )
+
+    useEffect(() => {
+        const handleTouchMove = (e: TouchEvent) => {
+            if (!isDragging.current) return
+
+            e.preventDefault()
+            const touch = e.touches[0]
+            onResize(touch.clientX)
+        }
+
+        const handleTouchEnd = () => {
+            if (!isDragging.current) return
+
+            debugLog(debug, 2, "リサイズハンドル タッチエンド:", columnId)
+
+            isDragging.current = false
+            onResizeEnd()
+
+            document.body.style.cursor = ""
+            document.body.style.userSelect = ""
+            document.body.classList.remove("resizing-column")
+        }
+
+        document.addEventListener("touchmove", handleTouchMove, { passive: false })
+        document.addEventListener("touchend", handleTouchEnd)
+
+        return () => {
+            document.removeEventListener("touchmove", handleTouchMove)
+            document.removeEventListener("touchend", handleTouchEnd)
+        }
+    }, [columnId, onResize, onResizeEnd, debug])
+
+    // コンポーネントアンマウント時のクリーンアップ
+    useEffect(() => {
+        return () => {
+            if (isDragging.current) {
+                debugLog(debug, 1, "リサイズハンドルアンマウント時のクリーンアップ:", columnId)
+                document.body.style.cursor = ""
+                document.body.style.userSelect = ""
+                document.body.classList.remove("resizing-column")
+            }
+        }
+    }, [columnId, debug])
+
+    const handleClassName = ["resize-handle", position, isResizing ? "resizing" : "", className].filter(Boolean).join(" ")
+
+    return (
+        // biome-ignore lint/a11y/useFocusableInteractive: リサイズハンドルとして機能するためインタラクティブである必要がある
+        // biome-ignore lint/a11y/useSemanticElements: divを使用するが、aria-roleでセマンティックな意味を提供している
+        // biome-ignore lint/a11y/useAriaPropsForRole: リサイズハンドルのため、値の範囲を指定することが難しい
+        <div ref={handleRef} className={handleClassName} onMouseDown={handleMouseDown} onTouchStart={handleTouchStart} data-column-id={columnId} data-position={position} aria-label={`${columnId}のカラム幅を調整`} role="separator" aria-orientation="vertical">
+            <div className="resize-handle-bar" />
+
+            {/* デバッグ情報表示 */}
+            {debug.showPanelSizes && (
+                <div className="resize-handle-debug-info">
+                    {columnId}
+                    {isResizing && " (resizing)"}
+                </div>
+            )}
+        </div>
+    )
+}
+
+// リサイズハンドル付きラッパーコンポーネント
+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 const ResizableColumn = ({ columnId, width, minWidth = 100, maxWidth = 800, onResizeStart, onResize, onResizeEnd, isResizing = false, resizable = true, className = "", debug = {}, children }: ResizableColumnProps) => {
+    const columnClassName = ["resizable-column", isResizing ? "resizing" : "", className].filter(Boolean).join(" ")
+
+    useEffect(() => {
+        const element = document.querySelector(`[data-column-id="${columnId}"]`) as HTMLElement
+        if (element) {
+            element.style.setProperty("--column-width", `${width}px`)
+            element.style.setProperty("--column-min-width", `${minWidth}px`)
+            element.style.setProperty("--column-max-width", `${maxWidth}px`)
+        }
+    }, [columnId, width, minWidth, maxWidth])
+
+    return (
+        <div className={columnClassName} data-column-id={columnId} data-width={width} data-min-width={minWidth} data-max-width={maxWidth}>
+            {children}
+
+            {resizable && <ResizeHandle columnId={columnId} onResizeStart={onResizeStart} onResize={onResize} onResizeEnd={onResizeEnd} isResizing={isResizing} position="right" debug={debug} />}
+
+            {/* デバッグ情報 */}
+            {debug.showPanelSizes && (
+                <div className="column-debug-size">
+                    {width}px
+                    {isResizing && " ↔"}
+                </div>
+            )}
+        </div>
+    )
+}

package/src/drag-drop/ResponsiveControl.tsx

@@ -0,0 +1,33 @@
+import { Monitor, Smartphone } from "lucide-react"
+
+export interface ResponsiveControlProps {
+    isResponsiveMode: boolean
+    responsiveColumnCount: number
+    currentColumnCount: number
+    screenWidth: number
+    onToggleResponsive: () => void
+}
+
+export const ResponsiveControl = ({ isResponsiveMode, responsiveColumnCount, currentColumnCount, screenWidth, onToggleResponsive }: ResponsiveControlProps) => {
+    return (
+        <div className="flex items-center gap-2 rounded-lg border border-slate-300 bg-white/90 px-3 py-1">
+            <button
+                type="button"
+                onClick={onToggleResponsive}
+                className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${isResponsiveMode ? "border border-blue-300 bg-blue-100 text-blue-700" : "border border-slate-300 text-slate-600 hover:bg-blue-50 hover:text-blue-600"}`}
+                title={isResponsiveMode ? "レスポンシブモードを無効化" : "レスポンシブモードを有効化"}>
+                {isResponsiveMode ? <Smartphone className="h-3 w-3" /> : <Monitor className="h-3 w-3" />}
+                <span>{isResponsiveMode ? "レスポンシブ" : "固定"}</span>
+            </button>
+
+            {isResponsiveMode && (
+                <div className="flex items-center gap-1 text-slate-600 text-xs">
+                    <span className="font-mono">{screenWidth}px</span>
+                    <span>→</span>
+                    <span className="font-semibold text-blue-600">{responsiveColumnCount}列</span>
+                    {responsiveColumnCount !== currentColumnCount && <span className="text-orange-600">(変更予定)</span>}
+                </div>
+            )}
+        </div>
+    )
+}