@aiquants/drag-drop-panels 0.7.2 → 0.8.0

package/src/DragDropLayout.tsx

@@ -0,0 +1,751 @@
+/**
+ * @fileoverview This file defines the main layout component for the drag and drop interface.
+ * It orchestrates columns, panels, drag events, and FLIP animations to provide a fully interactive user experience.
+ *
+ * このファイルは、ドラッグ＆ドロップインターフェースのメインレイアウトコンポーネントを定義します。
+ * カラム、パネル、ドラッグイベント、FLIPアニメーションを統合し、完全にインタラクティブなユーザーエクスペリエンスを提供します。
+ */
+import { Eye, EyeOff, Maximize2, Minimize2, MousePointer, MousePointerClick, X } from "lucide-react"
+import { type CSSProperties, type DragEvent, Fragment, type MouseEvent, memo, type TouchEvent, useEffect, useLayoutEffect, useMemo, useRef } from "react"
+import { debugLog, PanelSizeDisplay } from "./drag-drop/DebugComponents"
+import { DropZoneDebugOverlay, InsertPlaceholder } from "./drag-drop/DebugOverlay"
+import "./drag-drop/DragDropLayout.css"
+import { useFitScale } from "./drag-drop/hooks/useFitScale"
+import { ResizeHandle } from "./drag-drop/ResizeHandle"
+import type { ColumnConfig, CustomDragState, DebugConfig, DragDropEventHandlers, DragDropStateUpdaters, DragOverPosition, DragState, OriginalPanelPosition, PanelConfig, PanelDragHandle, 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
+
+    // ドラッグ開始領域 (既定 "panel" = パネル全体。"header" でヘッダのみ = 本文テキスト選択可)
+    dragHandle?: PanelDragHandle
+
+    // 最大化中のパネル id (制御型。onPanelMaximizeChange とセットで使用)
+    maximizedPanel?: string | null
+
+    // 全パネルの外枠へ追記するクラス (末尾追記のみ。既定ユーティリティと競合するクラスは
+    // 生成 CSS の順序依存になるため、ring/outline 等の非競合ユーティリティを推奨)
+    panelClassName?: string
+
+    // 表示倍率 (制御型。1.0 = 等倍、0.5 = 50% 縮小)
+    scale?: number
+
+    // 自動縮小設定 (コンテンツ領域が必要幅を下回る場合に自動で scale を調整する)
+    autoScale?: {
+        requiredWidth: number
+        minScale?: number
+    }
+
+    // 倍率が変化した時の通知
+    onScaleChange?: (scale: number) => void
+}
+
+/**
+ * A memoized version of InsertPlaceholder for local use within this layout.
+ * This prevents unnecessary re-renders of the placeholder components.
+ *
+ * このレイアウト内でローカルに使用するための、メモ化された InsertPlaceholder。
+ * プレースホルダーコンポーネントの不要な再レンダリングを防ぎます。
+ */
+const LocalInsertPlaceholder = memo(
+    ({
+        index,
+        columnIndex,
+        isDragging,
+        dragOverPosition,
+        originalPosition,
+        onDragEnter,
+        onDragLeave,
+        debugConfig,
+        customDrag,
+    }: {
+        index: number
+        columnIndex: number
+        isDragging: boolean
+        dragOverPosition: DragOverPosition | null
+        originalPosition: OriginalPanelPosition | null
+        onDragEnter: (columnIndex: number, insertIndex: number) => void
+        onDragLeave: (e?: DragEvent, columnIndex?: number, insertIndex?: number) => void
+        debugConfig: DebugConfig
+        customDrag?: {
+            isActive: boolean
+            panelId: string
+        }
+    }) => {
+        return <InsertPlaceholder index={index} columnIndex={columnIndex} isDragging={isDragging} dragOverPosition={dragOverPosition} originalPosition={originalPosition} onDragEnter={onDragEnter} onDragLeave={onDragLeave} config={debugConfig} customDrag={customDrag} />
+    },
+)
+
+LocalInsertPlaceholder.displayName = "LocalInsertPlaceholder"
+
+/**
+ * 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 const DragDropLayout = ({
+    columns,
+    panels,
+    columnPanels,
+    // onColumnPanelsChange,
+    panelVisibility,
+    onPanelVisibilityChange,
+    dragState,
+    dragOverPosition,
+    originalPanelPosition,
+    dragModes,
+    onDragStart,
+    onDragEnd,
+    onPlaceholderDragEnter,
+    onPlaceholderDragLeave,
+    onDragOverWithInsert,
+    onDropWithInsert,
+    onColumnDragLeave,
+    onPanelClick,
+    onPanelMouseDown,
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    debugConfig,
+    panelSizes,
+    setPanelRef,
+    enableResize = false,
+    columnWidths,
+    // onColumnWidthChange,
+    onResizeStart,
+    onResize,
+    onResizeEnd,
+    isResizing = false,
+    resizingColumn,
+    onPanelSizeInfoClick,
+    onToggleDragMode,
+    onPanelClose,
+    onPanelMaximizeChange,
+    customDrag,
+    dragHandle = "panel",
+    maximizedPanel = null,
+    panelClassName = "",
+    scale: propScale,
+    autoScale,
+    onScaleChange,
+}: DragDropLayoutProps) => {
+    // debugConfig の ref を作成して依存関係の問題を解決
+    const debugConfigRef = useRef(debugConfig)
+    useEffect(() => {
+        debugConfigRef.current = debugConfig
+    }, [debugConfig])
+
+    // 自動縮小設定がある場合は ResizeObserver を回して倍率を計算する
+    const { containerRef: autoScaleRef, scale: calculatedScale } = useFitScale(autoScale?.requiredWidth ?? 0, autoScale?.minScale)
+
+    // 有効な倍率を決定する (最大化中は強制的に 1.0)
+    const rawScale = maximizedPanel ? 1.0 : (propScale ?? (autoScale ? calculatedScale : 1.0))
+    // 0 / 負値 / NaN / Infinity は縮小無効 (=1.0) にフォールバックする。
+    // これらをそのまま使うと width: `${100/scale}%` が Infinity%、transform: scale(0) で不可視化しレイアウトが壊れる。
+    const currentScale = Number.isFinite(rawScale) && rawScale > 0 ? rawScale : 1.0
+
+    // FLIP の useLayoutEffect (依存 = [columnPanels]) から最新倍率を読むための ref。
+    // currentScale を直接参照すると exhaustive-deps 上は依存に含めるべきだが、依存へ入れると
+    // リサイズ由来の倍率変化のたびに FLIP が再計測されてしまう。並び替え時 (columnPanels 変化時) に
+    // 最新値を読めれば十分なので ref 経由にする。
+    const currentScaleRef = useRef(currentScale)
+    currentScaleRef.current = currentScale
+
+    // 倍率が変化したことを通知する
+    useEffect(() => {
+        if (onScaleChange) {
+            onScaleChange(currentScale)
+        }
+    }, [currentScale, onScaleChange])
+
+    // スケール適用時のラッパースタイル
+    const scaleWrapperStyle: CSSProperties | undefined =
+        currentScale < 1
+            ? {
+                  width: `${100 / currentScale}%`,
+                  height: `${100 / currentScale}%`,
+                  transform: `scale(${currentScale})`,
+                  transformOrigin: "top left",
+              }
+            : undefined
+
+    // FLIPアニメーション用のRef
+    const panelRefs = useRef<Record<string, HTMLDivElement | null>>({})
+    const prevLayoutMapRef = useRef(new Map<string, { rect: DOMRect; height: number; width: number }>())
+
+    // デバッグ用: dragModesの変化を監視
+    useEffect(() => {
+        debugLog(debugConfigRef.current, 1, "🎨 DragDropLayout - dragModes props changed:", {
+            dragModes,
+            timestamp: new Date().toISOString(),
+            keys: Object.keys(dragModes),
+            values: Object.values(dragModes),
+        })
+    }, [dragModes])
+
+    // パネルコンポーネントのマッピングを作成
+    const panelComponentMap = useMemo(() => {
+        const map: Record<string, PanelConfig> = {}
+        panels.forEach((panel) => {
+            map[panel.id] = panel
+        })
+        return map
+    }, [panels])
+
+    // 最大化中は Escape キーで元のサイズに戻す (OS ウインドウ風の操作性)
+    useEffect(() => {
+        if (!(maximizedPanel && onPanelMaximizeChange)) {
+            return
+        }
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                onPanelMaximizeChange(null)
+            }
+        }
+        document.addEventListener("keydown", handleKeyDown)
+        return () => document.removeEventListener("keydown", handleKeyDown)
+    }, [maximizedPanel, onPanelMaximizeChange])
+
+    // FLIP (First, Last, Invert, Play) アニメーション効果
+    useLayoutEffect(() => {
+        // 現在のレイアウト情報を取得 (Last)
+        const currentLayoutMap = new Map<string, { rect: DOMRect; height: number; width: number }>()
+        Object.keys(panelRefs.current).forEach((panelId) => {
+            const el = panelRefs.current[panelId]
+            if (el) {
+                const rect = el.getBoundingClientRect()
+                currentLayoutMap.set(panelId, {
+                    rect,
+                    height: el.offsetHeight,
+                    width: el.offsetWidth,
+                })
+            }
+        })
+
+        const prevLayoutMap = prevLayoutMapRef.current
+        const animationDuration = 300 // 0.3秒
+
+        // 現在表示されているパネルIDのセットを取得
+        const currentPanelIds = new Set<string>()
+        Object.values(columnPanels).forEach((panelList) => {
+            panelList.forEach((panelId) => {
+                currentPanelIds.add(panelId)
+            })
+        })
+
+        // 不要になったパネルの情報をクリーンアップ
+        const prevPanelIds = new Set(prevLayoutMap.keys())
+        prevPanelIds.forEach((panelId) => {
+            if (!currentPanelIds.has(panelId)) {
+                debugLog(debugConfigRef.current, 1, "パネル削除検出 - クリーンアップ:", panelId)
+                prevLayoutMap.delete(panelId)
+                if (panelRefs.current[panelId]) {
+                    delete panelRefs.current[panelId]
+                }
+            }
+        })
+
+        // 移動したパネルのアニメーション処理
+        currentLayoutMap.forEach((newLayout, panelId) => {
+            const prevLayout = prevLayoutMap.get(panelId)
+
+            if (prevLayout) {
+                // 既存パネルの移動を検出
+                const dx = prevLayout.rect.left - newLayout.rect.left
+                const dy = prevLayout.rect.top - newLayout.rect.top
+
+                if (dx !== 0 || dy !== 0) {
+                    debugLog(debugConfigRef.current, 2, "パネル移動検出 - アニメーション開始:", panelId, { dx, dy })
+                    const element = panelRefs.current[panelId]
+                    if (element) {
+                        // dx/dy は getBoundingClientRect 由来の画面座標 (縮小ラッパ配下では既に ×scale 済み)。
+                        // element への transform は縮小ラッパのローカル座標系で適用されさらに ×scale されるため、
+                        // 目的の画面移動量にするには scale で割り戻す (等倍時は割り戻し無し)。
+                        const flipScale = currentScaleRef.current || 1
+                        // First: 変換を適用してアニメーション開始前の位置に強制移動
+                        element.style.transform = `translate(${dx / flipScale}px, ${dy / flipScale}px)`
+                        element.style.transition = "none"
+                        element.classList.add("is-moving") // アニメーション中のクラスを追加
+
+                        // Play: アニメーションを有効にして最終位置に移動
+                        requestAnimationFrame(() => {
+                            element.style.transition = `transform ${animationDuration}ms cubic-bezier(0.2, 0, 0.2, 1)`
+                            element.style.transform = "translate(0, 0)"
+
+                            // Invert: アニメーション完了後にスタイルをクリーンアップ
+                            setTimeout(() => {
+                                element.style.transition = ""
+                                element.style.transform = ""
+                                element.classList.remove("is-moving") // アニメーション中のクラスを削除
+                            }, animationDuration)
+                        })
+                    }
+                }
+            } else {
+                // 新しく追加されたパネルのフェードインアニメーション
+                debugLog(debugConfigRef.current, 1, "新規パネル検出 - フェードインアニメーション:", panelId)
+                const element = panelRefs.current[panelId]
+                if (element) {
+                    // First: 初期状態を不可視に設定
+                    element.style.opacity = "0"
+                    element.style.transition = "none"
+
+                    // Play: アニメーションを有効にして表示
+                    requestAnimationFrame(() => {
+                        element.style.transition = `opacity ${animationDuration}ms ease-out`
+                        element.style.opacity = "1"
+
+                        // Invert: アニメーション完了後にスタイルをクリーンアップ
+                        setTimeout(() => {
+                            element.style.transition = ""
+                            element.style.opacity = ""
+                        }, animationDuration)
+                    })
+                }
+            }
+        })
+
+        // 次のレンダリングのために現在のレイアウトを保存 (First)
+        prevLayoutMapRef.current = currentLayoutMap
+    }, [columnPanels])
+
+    // 縮小率が変わると全パネルの画面座標 (getBoundingClientRect) も変わる。FLIP のベースライン
+    // (prevLayoutMapRef) をアニメーション無しで取り直しておかないと、scale 変更直後の初回並び替えで
+    // dx/dy を旧 scale のベースラインから算出してしまい、誤った開始位置から滑る (300ms で自己回復するが
+    // ちらつく)。並び替え演出は上の本体 FLIP 効果 ([columnPanels]) が担当し、ここは scale 変化のみを
+    // 契機にベースラインを最新化する (アニメーションはしない)。
+    useLayoutEffect(() => {
+        const refreshed = new Map<string, { rect: DOMRect; height: number; width: number }>()
+        Object.keys(panelRefs.current).forEach((panelId) => {
+            const el = panelRefs.current[panelId]
+            if (el) {
+                refreshed.set(panelId, { rect: el.getBoundingClientRect(), height: el.offsetHeight, width: el.offsetWidth })
+            }
+        })
+        prevLayoutMapRef.current = refreshed
+    }, [currentScale])
+
+    /**
+     * Renders a single draggable panel.
+     *
+     * 個々のドラッグ可能なパネルを描画します。
+     * @param {string} panelId - The ID of the panel to render.
+     * @returns {JSX.Element | null} The rendered panel component or null if not visible.
+     */
+    const renderPanel = (panelId: string) => {
+        if (!panelVisibility[panelId]) return null
+
+        const panelConfig = panelComponentMap[panelId]
+        if (!panelConfig) {
+            debugLog(debugConfigRef.current, 1, `Panel config not found for panelId: ${panelId}`)
+            return null
+        }
+
+        const PanelComponent = panelConfig.component
+        const title = panelConfig.title
+        const isDragging = dragState.draggedPanel === panelId
+        const dragMode = dragModes[panelId] || "normal"
+
+        // デバッグ用: 各パネルのドラッグモード状態をログ出力
+        debugLog(debugConfigRef.current, 2, `🎨 renderPanel - ${panelId}:`, {
+            panelId,
+            dragMode,
+            timestamp: new Date().toISOString(),
+        })
+
+        // panelRefsにRefを登録し、親コンポーネントのセッターも呼び出す
+        const setPanelRefLocal = (el: HTMLDivElement | null) => {
+            panelRefs.current[panelId] = el
+            if (setPanelRef) {
+                setPanelRef(panelId, el)
+            }
+            // パネルがマウントされた際にサイズ情報を更新
+            if (el && debugConfig.showPanelSizes) {
+                // 次のフレームでサイズ更新を実行（レンダリング後にサイズを取得）
+                requestAnimationFrame(() => {
+                    const rect = el.getBoundingClientRect()
+                    const computedStyle = window.getComputedStyle(el)
+                    debugLog(debugConfigRef.current, 1, `Panel ${panelId} mounted with size:`, {
+                        width: rect.width,
+                        height: rect.height,
+                        x: rect.left,
+                        y: rect.top,
+                        minHeight: computedStyle.minHeight,
+                        maxHeight: computedStyle.maxHeight,
+                    })
+                })
+            }
+        }
+
+        const sizeInfo = panelSizes[panelId]
+
+        // 最大化: 対象パネルを DOM ツリー上の位置を変えずに (unmount/remount させずに)
+        // fixed オーバーレイとしてビューポート全面に描画する。React の再親付けが起きないため
+        // パネル内コンポーネントの state (fetch 済みコンテンツ・スクロール位置等) は保持される。
+        const isMaximized = maximizedPanel === panelId
+        const isMaximizeEnabled = !!onPanelMaximizeChange
+        const toggleMaximize = () => onPanelMaximizeChange?.(isMaximized ? null : panelId)
+
+        // PanelConfig.minHeight/maxHeight 指定時は従来のハードコード既定 (200px/500px) を上書きする。
+        // 未指定時は既定値を inline style で適用するため、既存コンシューマの見た目は不変。
+        const heightStyle: CSSProperties = isMaximized
+            ? { position: "fixed", inset: 0, zIndex: 50, minHeight: 0, maxHeight: "none" }
+            : {
+                  minHeight: panelConfig.minHeight ?? "200px",
+                  maxHeight: panelConfig.maxHeight ?? "500px",
+              }
+
+        // dragHandle="header" ではヘッダのみをドラッグ開始領域にし、本文のテキスト選択を可能にする
+        const isDragFromHeader = dragHandle === "header"
+        const isPanelDraggable = dragMode === "normal" && !isDragFromHeader && !isMaximized
+        const isHeaderDraggable = dragMode === "normal" && isDragFromHeader && !isMaximized
+        const grabCursorClass = isDragging ? "cursor-grabbing" : "cursor-grab"
+
+        const basePanelClass = `panel-draggable group relative flex flex-col overflow-hidden border border-slate-200 text-left shadow-lg backdrop-blur-lg ${dragMode === "custom" ? "select-none" : ""}`
+        const panelClass = isMaximized
+            ? // 最大化中: 角丸・ホバー演出・grab カーソル無し、背景は不透過寄りで下のレイアウトを遮蔽
+              `${basePanelClass} rounded-none bg-white/95 p-4 ${panelClassName}`
+            : `${basePanelClass} rounded-2xl bg-white/80 p-4 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${isDragFromHeader ? "" : grabCursorClass} ${panelClassName}`
+
+        return (
+            // biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素
+            <div
+                key={panelId}
+                ref={setPanelRefLocal}
+                data-panel-id={panelId}
+                data-dragging={isDragging}
+                data-maximized={isMaximized || undefined}
+                role="presentation"
+                draggable={isPanelDraggable}
+                onDragStart={(e) => isPanelDraggable && onDragStart(e, panelId)}
+                onDragEnd={onDragEnd}
+                onClick={(e) => onPanelClick?.(e, panelId)}
+                onMouseDown={(e) => onPanelMouseDown?.(e, panelId)}
+                onTouchStart={(e) => onTouchStart?.(e, panelId)}
+                onTouchMove={onTouchMove}
+                onTouchEnd={onTouchEnd}
+                style={heightStyle}
+                className={panelClass}>
+                {/* パネルヘッダー (dragHandle="header" 時はここがドラッグハンドル。ダブルクリックで最大化トグル) */}
+                {/* biome-ignore lint/a11y/noStaticElementInteractions: ドラッグハンドルとしての静的要素 */}
+                <div
+                    className={`group relative mb-3 flex items-center justify-between ${isDragFromHeader && !isMaximized ? grabCursorClass : ""}`}
+                    draggable={isHeaderDraggable}
+                    onDragStart={(e) => isHeaderDraggable && onDragStart(e, panelId)}
+                    onDoubleClick={
+                        isMaximizeEnabled
+                            ? (e) => {
+                                  e.stopPropagation()
+                                  toggleMaximize()
+                              }
+                            : undefined
+                    }>
+                    <div className="flex items-center space-x-2">
+                        <h3 className="font-semibold text-lg text-slate-700 transition-colors group-hover:text-slate-900">{title}</h3>
+
+                        {/* カスタムドラッグモードのバッジ */}
+                        {dragMode === "custom" && <span className="rounded-md bg-orange-100 px-2 py-1 font-medium text-orange-600 text-xs">Custom</span>}
+                    </div>
+
+                    {/* パネル操作ボタン (ホバー時に表示) */}
+                    <div className="flex items-center space-x-1 opacity-0 transition-opacity group-hover:opacity-100">
+                        {/* ドラッグモード切り替えボタン */}
+                        <button
+                            type="button"
+                            onClick={(e) => {
+                                e.stopPropagation()
+                                if (onToggleDragMode) {
+                                    onToggleDragMode(panelId)
+                                }
+                            }}
+                            onKeyDown={(e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault()
+                                    e.stopPropagation()
+                                    if (onToggleDragMode) {
+                                        onToggleDragMode(panelId)
+                                    }
+                                }
+                            }}
+                            tabIndex={0}
+                            className={`cursor-pointer rounded p-1 text-xs transition-colors ${dragMode === "custom" ? "bg-orange-100 text-orange-600 hover:bg-orange-200" : "text-slate-400 hover:bg-slate-100 hover:text-slate-600"}`}
+                            title={dragMode === "custom" ? "通常ドラッグモードに戻す" : "カスタムドラッグモードに切り替え"}>
+                            {dragMode === "custom" ? <MousePointerClick className="h-4 w-4" /> : <MousePointer className="h-4 w-4" />}
+                        </button>
+
+                        {/* パネル非表示ボタン (最大化中は非表示 — 最大化とオーバーレイ状態が矛盾するため) */}
+                        {!isMaximized && (
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    onPanelVisibilityChange({
+                                        ...panelVisibility,
+                                        [panelId]: false,
+                                    })
+                                }}
+                                className="rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
+                                title="パネルを非表示">
+                                <EyeOff className="h-4 w-4" />
+                            </button>
+                        )}
+
+                        {/* パネル最大化/復元ボタン (onPanelMaximizeChange 指定時のみ表示) */}
+                        {isMaximizeEnabled && (
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    toggleMaximize()
+                                }}
+                                className="rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-slate-600"
+                                title={isMaximized ? "元のサイズに戻す" : "パネルを最大化"}>
+                                {isMaximized ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
+                            </button>
+                        )}
+
+                        {/* パネルクローズボタン (onPanelClose 指定時のみ表示。非表示と異なりパネルを取り除く) */}
+                        {onPanelClose && (
+                            <button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation()
+                                    onPanelClose(panelId)
+                                }}
+                                className="rounded p-1 text-slate-400 transition-colors hover:bg-slate-100 hover:text-red-500"
+                                title="パネルを閉じる">
+                                <X className="h-4 w-4" />
+                            </button>
+                        )}
+                    </div>
+                </div>
+
+                {/* パネルコンテンツ */}
+                <div data-aqdd-scroll-area className="panel-scroll-area min-h-0 flex-1 overflow-y-auto">
+                    <PanelComponent {...(panelConfig.props || {})} />
+                </div>
+
+                {/* デバッグ用サイズ表示 */}
+                <PanelSizeDisplay config={debugConfig} panelId={panelId} sizeInfo={sizeInfo} onSizeInfoClick={(e) => onPanelSizeInfoClick?.(e as MouseEvent | TouchEvent, panelId)} />
+            </div>
+        )
+    }
+
+    /**
+     * Renders a drop zone for a specific column.
+     *
+     * 特定のカラムのドロップゾーンを描画します。
+     * @param {string} columnKey - The key of the column.
+     * @param {number} columnIndex - The index of the column.
+     * @returns {JSX.Element} The rendered drop zone component.
+     */
+    const renderDropZone = (columnKey: string, columnIndex: number) => {
+        const panelIds = columnPanels[columnKey] || []
+
+        let hasVisiblePanels = false
+        for (const panelId of panelIds) {
+            if (panelVisibility[panelId]) {
+                hasVisiblePanels = true
+                break
+            }
+        }
+
+        // 通常ドラッグまたはカスタムドラッグがアクティブな場合にドラッグ中と判定
+        const isAnyDragActive = dragState.isDragging || (customDrag?.isActive ?? false)
+
+        return (
+            <DropZoneDebugOverlay columnIndex={columnIndex} isDragging={isAnyDragActive} dragOverPosition={dragOverPosition} config={debugConfig}>
+                <section
+                    data-drop-zone="true"
+                    data-column-key={columnKey}
+                    data-column-index={columnIndex}
+                    aria-label={`Drop zone for column ${columnIndex + 1}`}
+                    onDragOver={(e) => onDragOverWithInsert(e, columnIndex)}
+                    onDrop={(e) => onDropWithInsert(e, columnKey)}
+                    onDragLeave={onColumnDragLeave}
+                    className="relative flex h-full flex-col transition-all duration-200">
+                    {/* カラムの先頭に配置されるプレースホルダー */}
+                    <div className="placeholder-container">
+                        <LocalInsertPlaceholder
+                            index={0}
+                            columnIndex={columnIndex}
+                            isDragging={isAnyDragActive}
+                            dragOverPosition={dragOverPosition}
+                            originalPosition={originalPanelPosition}
+                            onDragEnter={onPlaceholderDragEnter}
+                            onDragLeave={onPlaceholderDragLeave}
+                            debugConfig={debugConfig}
+                            customDrag={customDrag}
+                        />
+                    </div>
+
+                    {/* パネルとプレースホルダーを交互に配置 */}
+                    {panelIds.map((panelId, index) => {
+                        const isVisible = panelVisibility[panelId]
+                        const isHiddenAndIdle = !(isVisible || isAnyDragActive)
+
+                        return (
+                            <div key={`panel-${panelId}`} className={`panel-with-placeholder ${isHiddenAndIdle ? "m-0 h-0 overflow-hidden p-0" : ""}`} data-panel-hidden={isHiddenAndIdle ? "true" : undefined} aria-hidden={isHiddenAndIdle ? "true" : undefined}>
+                                {isVisible ? (
+                                    renderPanel(panelId)
+                                ) : isAnyDragActive ? (
+                                    /* ドラッグ中のみ隠されたパネルのダミー表示 */
+                                    <div className="hidden-panel-placeholder relative h-[120px] rounded-2xl border-2 border-amber-300 border-dashed bg-gradient-to-br from-amber-50 to-orange-50 p-3 text-left shadow-lg backdrop-blur-lg">
+                                        {/* ダミーパネルヘッダー */}
+                                        <div className="mb-2 flex items-center space-x-2">
+                                            <h3 className="font-semibold text-amber-700 text-base">{panelComponentMap[panelId]?.title || panelId}</h3>
+                                            <span className="rounded-md bg-amber-100 px-2 py-1 font-medium text-amber-600 text-xs">非表示</span>
+                                        </div>
+
+                                        {/* ダミーコンテンツ */}
+                                        <div className="flex-1 overflow-hidden">
+                                            <div className="flex h-full items-center justify-center">
+                                                <div className="text-center text-amber-600">
+                                                    <EyeOff className="mx-auto h-6 w-6 opacity-50" />
+                                                    <p className="mt-1 text-xs">このパネルは非表示です</p>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ) : null}
+
+                                {/* 各パネルの後に配置されるプレースホルダー */}
+                                <LocalInsertPlaceholder
+                                    index={index + 1}
+                                    columnIndex={columnIndex}
+                                    isDragging={isAnyDragActive}
+                                    dragOverPosition={dragOverPosition}
+                                    originalPosition={originalPanelPosition}
+                                    onDragEnter={onPlaceholderDragEnter}
+                                    onDragLeave={onPlaceholderDragLeave}
+                                    debugConfig={debugConfig}
+                                    customDrag={customDrag}
+                                />
+                            </div>
+                        )
+                    })}
+
+                    {/* カラムが空で、かつドラッグ中でない場合に表示されるメッセージ */}
+                    {!(hasVisiblePanels || isAnyDragActive) && (
+                        <div className="flex-shrink-0 rounded-xl border-2 border-slate-200 border-dashed bg-white/30 p-8 text-center text-slate-400 transition-all duration-200">
+                            <div className="text-sm">このエリアは空です</div>
+                        </div>
+                    )}
+                </section>
+            </DropZoneDebugOverlay>
+        )
+    }
+
+    // 非表示パネルのリストを取得
+    const hiddenPanels = Object.keys(panelVisibility).filter((key) => !panelVisibility[key])
+
+    return (
+        <div className="flex h-full flex-col">
+            {/* 非表示パネルを再表示するためのUI */}
+            {hiddenPanels.length > 0 && (
+                <div className="border-slate-200 border-b bg-white/70 px-4 py-2 backdrop-blur-lg">
+                    <div className="flex flex-wrap gap-2">
+                        <span className="mr-2 text-slate-600 text-sm">非表示のパネル:</span>
+                        {hiddenPanels.map((panelId) => {
+                            const panelConfig = panelComponentMap[panelId]
+                            const title = panelConfig?.title || panelId
+
+                            return (
+                                <button
+                                    type="button"
+                                    key={panelId}
+                                    onClick={() =>
+                                        onPanelVisibilityChange({
+                                            ...panelVisibility,
+                                            [panelId]: true,
+                                        })
+                                    }
+                                    className="flex items-center space-x-1 rounded-lg border border-sky-300 bg-gradient-to-r from-sky-500 to-indigo-500 px-3 py-1 text-sm text-white shadow-md transition-all duration-200 hover:from-sky-600 hover:to-indigo-600 hover:shadow-lg">
+                                    <Eye className="h-3 w-3" />
+                                    <span>{title}</span>
+                                </button>
+                            )
+                        })}
+                    </div>
+                </div>
+            )}
+
+            {/* メインコンテンツエリア。
+                autoScaleRef を計測 + クリップ用の外枠 (overflow-hidden) に置き、縮小ラッパ
+                (transform: scale で拡大したレイアウト幅 width:100/scale% を持つ) をその内側に閉じ込める。
+                scroll コンテナである <main> の直接の内容 (columns 行) は常に main 幅に収まるため、
+                縮小表示中でも main / ページに横スクロール (scrollWidth 超過) が発生しない
+                (縮小を route 側の overflow-hidden ラッパでクリップしていた従来トポロジをパッケージ内で再現)。 */}
+            <div ref={autoScaleRef} className="relative min-h-0 flex-1 overflow-hidden">
+                <div className="h-full w-full" style={scaleWrapperStyle}>
+                    <main data-aqdd-scroll-root className="no-scrollbar h-full max-w-full flex-1 overflow-auto px-4 py-6 sm:px-6">
+                        <div className="relative flex h-full items-start gap-6 pr-4">
+                            {columns.map((column, index) => {
+                                const columnWidth = columnWidths?.[column.id] || column.initialWidth || 350
+                                const canResize = enableResize && (column.resizable ?? true)
+
+                                return (
+                                    <Fragment key={column.id}>
+                                        <div
+                                            className={`column relative ${column.className || ""} ${enableResize ? "resize-enabled-column" : "auto-width-column"} ${isResizing && resizingColumn === column.id ? "column-resizing-active" : ""}`}
+                                            data-column={index}
+                                            data-column-id={column.id}
+                                            data-min-width={column.minWidth || 350}
+                                            data-max-width={column.maxWidth}
+                                            data-column-width={enableResize ? columnWidth : undefined}
+                                            {...(enableResize && {
+                                                style: { "--column-width": `${columnWidth}px` } as CSSProperties,
+                                            })}>
+                                            {renderDropZone(column.key, index)}
+
+                                            {/* リサイズハンドル (リサイズが有効な場合) */}
+                                            {canResize && onResizeStart && onResize && onResizeEnd && (
+                                                <ResizeHandle columnId={column.id} onResizeStart={onResizeStart} onResize={onResize} onResizeEnd={onResizeEnd} isResizing={isResizing && resizingColumn === column.id} position="right" debug={debugConfig} />
+                                            )}
+                                        </div>
+                                    </Fragment>
+                                )
+                            })}
+                        </div>
+                    </main>
+                </div>
+            </div>
+        </div>
+    )
+}