@aiquants/drag-drop-panels 0.7.2 → 0.8.0

package/src/drag-drop/ColumnControlPanel.tsx

@@ -0,0 +1,123 @@
+/**
+ * @fileoverview Defines the ColumnControlPanel component.
+ * This component provides UI controls for managing the number of columns,
+ * auto-balancing panels, and resetting column widths in a drag-and-drop layout.
+ *
+ * ColumnControlPanel コンポーネントを定義します。
+ * このコンポーネントは、ドラッグ＆ドロップレイアウトにおいて、カラム数の管理、
+ * パネルの自動バランス調整、およびカラム幅のリセットを行うためのUIコントロールを提供します。
+ */
+import { Grid3X3, Minus, Plus, RotateCcw } from "lucide-react"
+
+/**
+ * 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 const ColumnControlPanel = ({ columnCount, onColumnCountChange, onAutoBalance, onResetWidths, minColumns = 2, maxColumns = 6, isResizing = false, isResponsiveMode = false, responsiveColumnCount }: ColumnControlPanelProps) => {
+    // カラムを減らせるかどうかのフラグ（レスポンシブモード時は無効）
+    const canDecreaseColumns = columnCount > minColumns && !isResponsiveMode
+    // カラムを増やせるかどうかのフラグ（レスポンシブモード時は無効）
+    const canIncreaseColumns = columnCount < maxColumns && !isResponsiveMode
+
+    return (
+        <div className="flex items-center gap-3 rounded-lg border border-slate-200 bg-white/80 px-4 py-2 shadow-sm backdrop-blur-lg">
+            {/* カラム数制御 */}
+            <div className="flex items-center gap-2">
+                <span className="font-medium text-slate-700 text-sm">カラム数:</span>
+
+                {/* カラム減少ボタン */}
+                <button
+                    type="button"
+                    onClick={() => canDecreaseColumns && onColumnCountChange(columnCount - 1)}
+                    disabled={!canDecreaseColumns || isResizing}
+                    className={`rounded p-1 text-xs transition-colors ${canDecreaseColumns && !isResizing ? "border border-slate-300 text-slate-600 hover:border-red-300 hover:bg-red-50 hover:text-red-600" : "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`}
+                    title={isResponsiveMode ? "レスポンシブモード中：カラム数は自動調整されます" : `カラムを削除 (最小: ${minColumns}列)`}>
+                    <Minus className="h-3 w-3" />
+                </button>
+
+                {/* 現在のカラム数表示 */}
+                <div className={`min-w-[2rem] rounded border px-3 py-1 text-center font-mono text-sm ${isResponsiveMode ? "border-blue-300 bg-blue-50 text-blue-700" : "border-slate-300 bg-slate-100 text-slate-700"}`}>
+                    {isResponsiveMode ? (responsiveColumnCount ?? columnCount) : columnCount}
+                    {isResponsiveMode && <span className="ml-1 text-xs">自動</span>}
+                </div>
+
+                {/* カラム増加ボタン */}
+                <button
+                    type="button"
+                    onClick={() => canIncreaseColumns && onColumnCountChange(columnCount + 1)}
+                    disabled={!canIncreaseColumns || isResizing}
+                    className={`rounded p-1 text-xs transition-colors ${canIncreaseColumns && !isResizing ? "border border-slate-300 text-slate-600 hover:border-blue-300 hover:bg-blue-50 hover:text-blue-600" : "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`}
+                    title={isResponsiveMode ? "レスポンシブモード中：カラム数は自動調整されます" : `カラムを追加 (最大: ${maxColumns}列)`}>
+                    <Plus className="h-3 w-3" />
+                </button>
+            </div>
+
+            {/* 区切り線 */}
+            <div className="h-6 w-px bg-slate-300" />
+
+            {/* レイアウト制御ボタン */}
+            <div className="flex items-center gap-2">
+                {/* 自動バランス調整 */}
+                <button
+                    type="button"
+                    onClick={onAutoBalance}
+                    disabled={isResizing}
+                    className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${!isResizing ? "border border-slate-300 text-slate-600 hover:border-green-300 hover:bg-green-50 hover:text-green-600" : "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`}
+                    title="パネルを全カラムに均等分散">
+                    <Grid3X3 className="h-3 w-3" />
+                    <span>バランス</span>
+                </button>
+
+                {/* 幅リセット */}
+                <button
+                    type="button"
+                    onClick={onResetWidths}
+                    disabled={isResizing}
+                    className={`flex items-center gap-1 rounded px-2 py-1 text-xs transition-colors ${!isResizing ? "border border-slate-300 text-slate-600 hover:border-orange-300 hover:bg-orange-50 hover:text-orange-600" : "cursor-not-allowed border border-slate-200 bg-slate-50 text-slate-300"}`}
+                    title="カラム幅を初期値にリセット">
+                    <RotateCcw className="h-3 w-3" />
+                    <span>幅リセット</span>
+                </button>
+            </div>
+
+            {/* リサイズ中インジケーター */}
+            {isResizing && (
+                <div className="flex items-center gap-1 text-blue-600 text-xs">
+                    <div className="h-2 w-2 animate-pulse rounded-full bg-blue-500" />
+                    <span>リサイズ中...</span>
+                </div>
+            )}
+        </div>
+    )
+}

package/src/drag-drop/ColumnInsertPanel.tsx

@@ -0,0 +1,106 @@
+/**
+ * @fileoverview Defines the ColumnInsertPanel component.
+ * This component provides UI controls for inserting and deleting columns at specific positions
+ * in a drag-and-drop layout.
+ *
+ * ColumnInsertPanel コンポーネントを定義します。
+ * このコンポーネントは、ドラッグ＆ドロップレイアウトにおいて、
+ * 特定の位置にカラムを挿入・削除するためのUIコントロールを提供します。
+ */
+import { Plus, X } from "lucide-react"
+
+/**
+ * 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 const ColumnInsertPanel = ({ columnCount, onInsertColumn, onDeleteColumn, minColumns = 1, maxColumns = 6, isResizing = false, disabled = false }: ColumnInsertPanelProps) => {
+    // カラムを増やせるかどうかのフラグ
+    const canInsertColumns = columnCount < maxColumns && !disabled
+    // カラムを減らせるかどうかのフラグ
+    const canDeleteColumns = columnCount > minColumns && !disabled
+
+    return (
+        <div className={`flex items-center justify-center gap-1 rounded-lg border border-slate-200 px-4 py-2 shadow-sm backdrop-blur-lg ${disabled ? "bg-slate-100/80 opacity-60" : "bg-white/80"}`}>
+            {disabled && (
+                <div className="flex items-center gap-2 text-slate-500 text-xs">
+                    <span>レスポンシブモード有効中：カラム数は自動調整されます</span>
+                </div>
+            )}
+
+            {!disabled && (
+                <>
+                    {/* 最初の位置に挿入ボタン */}
+                    <button
+                        type="button"
+                        onClick={() => canInsertColumns && onInsertColumn(0)}
+                        disabled={!canInsertColumns || isResizing}
+                        className={`flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${
+                            canInsertColumns && !isResizing ? "border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50" : "cursor-not-allowed border-slate-200 text-slate-300"
+                        }`}
+                        title="この位置に新しいカラムを挿入">
+                        <Plus className="h-4 w-4" />
+                    </button>
+
+                    {Array.from({ length: columnCount }, (_, index) => (
+                        <div key={`column-${index}`} className="flex items-center gap-1">
+                            {/* カラム表示と削除ボタン */}
+                            <div className="relative flex h-8 w-12 items-center justify-center rounded border border-slate-300 bg-slate-100">
+                                <span className="font-medium font-mono text-slate-700 text-xs">{index + 1}</span>
+                                {canDeleteColumns && !isResizing && (
+                                    <button
+                                        type="button"
+                                        onClick={() => onDeleteColumn(index)}
+                                        className="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full border border-red-300 bg-red-100 text-red-600 hover:bg-red-200"
+                                        title={`カラム ${index + 1} を削除`}>
+                                        <X className="h-2.5 w-2.5" />
+                                    </button>
+                                )}
+                            </div>
+
+                            {/* カラムの後に挿入ボタン */}
+                            <button
+                                type="button"
+                                onClick={() => canInsertColumns && onInsertColumn(index + 1)}
+                                disabled={!canInsertColumns || isResizing}
+                                className={`flex h-8 w-8 items-center justify-center rounded border-2 border-dashed text-xs transition-colors ${
+                                    canInsertColumns && !isResizing ? "border-blue-300 text-blue-600 hover:border-blue-500 hover:bg-blue-50" : "cursor-not-allowed border-slate-200 text-slate-300"
+                                }`}
+                                title="この位置に新しいカラムを挿入">
+                                <Plus className="h-4 w-4" />
+                            </button>
+                        </div>
+                    ))}
+                </>
+            )}
+        </div>
+    )
+}

package/src/drag-drop/DebugComponents.tsx

@@ -0,0 +1,222 @@
+/**
+ * @fileoverview Defines debug components and helper functions for the drag-and-drop layout.
+ * These components provide visual feedback and logging for development and troubleshooting purposes.
+ *
+ * ドラッグ＆ドロップレイアウト用のデバッグコンポーネントとヘルパー関数を定義します。
+ * これらのコンポーネントは、開発およびトラブルシューティング目的で、視覚的なフィードバックとロギングを提供します。
+ */
+import type { CSSProperties, MouseEvent } from "react"
+import type { CustomDragState, DebugConfig, DragOverPosition, DragState, MousePosition, OriginalPanelPosition, TouchDragState } from "./types"
+import { Logger } from "./utils/simple-logger"
+
+/**
+ * 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 const DebugPanel = ({ config, dragState, dragOverPosition, originalPanelPosition, mousePosition, touchDragState, customDrag }: DebugPanelProps) => {
+    // デバッグパネルが表示設定でない場合は何もレンダリングしない
+    if (!config.showDebugPanel) {
+        return null
+    }
+
+    return (
+        <div className="fixed top-4 right-4 z-40 max-w-xs rounded-lg bg-black/80 px-3 py-2 font-mono text-white text-xs leading-tight shadow-xl">
+            <div className="mb-2 font-bold text-sm text-yellow-300">🐛 Debug Panel</div>
+
+            <div className="space-y-1">
+                {/* ドラッグ状態 */}
+                <div className="text-blue-300">Drag State:</div>
+                <div className="pl-2">
+                    <div>isDragging: {dragState.isDragging ? "✅" : "❌"}</div>
+                    <div>draggedPanel: {dragState.draggedPanel || "none"}</div>
+                    <div>dragOverColumn: {dragState.dragOverColumn ?? "null"}</div>
+                </div>
+
+                {/* 挿入位置 */}
+                <div className="mt-2 text-green-300">Insert Position:</div>
+                <div className="pl-2">
+                    <div>column: {dragOverPosition?.columnIndex ?? "null"}</div>
+                    <div>index: {dragOverPosition?.insertIndex ?? "null"}</div>
+                </div>
+
+                {/* 元の位置 */}
+                <div className="mt-2 text-purple-300">Original Position:</div>
+                <div className="pl-2">
+                    <div>column: {originalPanelPosition?.columnIndex ?? "null"}</div>
+                    <div>index: {originalPanelPosition?.panelIndex ?? "null"}</div>
+                </div>
+
+                {/* マウス位置 */}
+                <div className="mt-2 text-orange-300">Mouse Position:</div>
+                <div className="pl-2">
+                    <div>
+                        X: {mousePosition.x}, Y: {mousePosition.y}
+                    </div>
+                    <div>visible: {mousePosition.isVisible ? "👁️" : "🙈"}</div>
+                </div>
+
+                {/* タッチドラッグ状態 */}
+                <div className="mt-2 text-red-300">Touch Drag:</div>
+                <div className="pl-2">
+                    <div>active: {touchDragState.isTouchDragging ? "✅" : "❌"}</div>
+                    <div>element: {touchDragState.draggedElement ? "📱" : "none"}</div>
+                </div>
+
+                {/* カスタムドラッグ状態 */}
+                <div className="mt-2 text-cyan-300">Custom Drag:</div>
+                <div className="pl-2">
+                    <div>active: {customDrag.isActive ? "✅" : "❌"}</div>
+                    <div>panelId: {customDrag.panelId || "none"}</div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+/**
+ * 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 const MousePositionDisplay = ({ config, mousePosition, dragState }: MousePositionDisplayProps) => {
+    // マウス位置表示が無効、またはドラッグ中でない場合は何も表示しない
+    if (!(config.showMousePosition && dragState.isDragging)) {
+        return null
+    }
+
+    return (
+        <div
+            className="pointer-events-none fixed z-50 rounded-md bg-yellow-500/90 px-2 py-1 font-mono text-black text-xs leading-tight shadow-lg"
+            style={
+                {
+                    left: `${mousePosition.x + 10}px`,
+                    top: `${mousePosition.y - 30}px`,
+                } as CSSProperties
+            }>
+            <div>
+                Mouse: {mousePosition.x}, {mousePosition.y}
+            </div>
+            <div className="text-[10px] opacity-80">Dragging: {dragState.draggedPanel || "none"}</div>
+        </div>
+    )
+}
+
+/**
+ * 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 const PanelSizeDisplay = ({ config, panelId, sizeInfo, onSizeInfoClick }: PanelSizeDisplayProps) => {
+    // パネルサイズ表示が無効、またはサイズ情報がない場合は何も表示しない
+    if (!(config.showPanelSizes && sizeInfo)) {
+        return null
+    }
+
+    return (
+        // biome-ignore lint/a11y/noStaticElementInteractions: クリックイベントを持つ静的要素。デバッグ目的のため、インタラクティブ性は限定的。
+        // biome-ignore lint/a11y/useKeyWithClickEvents: キーボード操作はデバッグ機能では優先度が低い。
+        <div
+            className="absolute top-1 right-24 z-10 cursor-default rounded-md bg-red-500/90 px-2 py-1 font-mono text-white text-xs leading-tight shadow-lg"
+            onClick={onSizeInfoClick}
+            onMouseDown={onSizeInfoClick}
+            onTouchStart={(e) => e instanceof TouchEvent && onSizeInfoClick(e)}
+            onDragStart={onSizeInfoClick}>
+            {/* パネル識別子 */}
+            <div className="text-[10px] opacity-80">ID:{panelId}</div>
+            {/* 幅と高さ */}
+            <div>
+                {sizeInfo.width}×{sizeInfo.height}
+            </div>
+            {/* X, Y座標 */}
+            <div>
+                X:{sizeInfo.x} Y:{sizeInfo.y}
+            </div>
+            {/* 最小・最大高さ */}
+            <div className="text-[10px] opacity-80">
+                min:{sizeInfo.minHeight} max:{sizeInfo.maxHeight}
+            </div>
+        </div>
+    )
+}
+
+/**
+ * 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 const debugLog = (config: DebugConfig, level: 1 | 2, ...args: unknown[]) => {
+    // 設定されたログレベルがメッセージのレベル以上の場合にのみログ出力
+    if ((config.logLevel ?? 0) >= level) {
+        Logger.info(...args)
+    }
+}

package/src/drag-drop/DebugControlPanel.tsx

@@ -0,0 +1,200 @@
+/**
+ * @fileoverview Defines the DebugControlPanel component.
+ * This component provides a UI for toggling various debug visualizations and setting the log level
+ * for the drag-and-drop layout system.
+ *
+ * DebugControlPanel コンポーネントを定義します。
+ * このコンポーネントは、ドラッグ＆ドロップレイアウトシステムの様々なデバッグ表示を切り替えたり、
+ * ログレベルを設定したりするためのUIを提供します。
+ */
+import type { 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 const DebugControlPanel = ({ config, onConfigChange, isVisible, onToggleVisibility }: DebugControlPanelProps) => {
+    // パネルが非表示の場合、表示を切り替えるための小さなボタンのみをレンダリング
+    if (!isVisible) {
+        return (
+            <button type="button" onClick={onToggleVisibility} className="fixed right-4 bottom-4 z-50 rounded-lg bg-gray-800 p-2 text-white shadow-lg transition-colors hover:bg-gray-700" title="デバッグ設定を開く">
+                🛠️
+            </button>
+        )
+    }
+
+    // パネルが表示されている場合、すべての設定コントロールをレンダリング
+    return (
+        <div className="fixed right-4 bottom-4 z-50 max-w-sm rounded-lg border border-gray-300 bg-white p-4 shadow-xl">
+            {/* パネルヘッダー */}
+            <div className="mb-3 flex items-center justify-between">
+                <h3 className="font-bold text-gray-800 text-sm">🛠️ デバッグ設定</h3>
+                <button type="button" onClick={onToggleVisibility} className="text-gray-500 text-lg hover:text-gray-700" title="閉じる">
+                    ✕
+                </button>
+            </div>
+
+            <div className="space-y-2">
+                {/* 各種デバッグ表示のトグルスイッチ */}
+                <label className="flex items-center space-x-2 text-sm">
+                    <input
+                        type="checkbox"
+                        checked={config.showDebugPanel ?? false}
+                        onChange={(e) =>
+                            onConfigChange({
+                                ...config,
+                                showDebugPanel: e.target.checked,
+                            })
+                        }
+                        className="rounded"
+                    />
+                    <span>デバッグパネル表示</span>
+                </label>
+
+                <label className="flex items-center space-x-2 text-sm">
+                    <input
+                        type="checkbox"
+                        checked={config.showMousePosition ?? false}
+                        onChange={(e) =>
+                            onConfigChange({
+                                ...config,
+                                showMousePosition: e.target.checked,
+                            })
+                        }
+                        className="rounded"
+                    />
+                    <span>マウス位置表示</span>
+                </label>
+
+                <label className="flex items-center space-x-2 text-sm">
+                    <input
+                        type="checkbox"
+                        checked={config.showPanelSizes ?? false}
+                        onChange={(e) =>
+                            onConfigChange({
+                                ...config,
+                                showPanelSizes: e.target.checked,
+                            })
+                        }
+                        className="rounded"
+                    />
+                    <span>パネルサイズ情報</span>
+                </label>
+
+                <label className="flex items-center space-x-2 text-sm">
+                    <input
+                        type="checkbox"
+                        checked={config.showPlaceholderInfo ?? false}
+                        onChange={(e) =>
+                            onConfigChange({
+                                ...config,
+                                showPlaceholderInfo: e.target.checked,
+                            })
+                        }
+                        className="rounded"
+                    />
+                    <span>プレースホルダー詳細</span>
+                </label>
+
+                <label className="flex items-center space-x-2 text-sm">
+                    <input
+                        type="checkbox"
+                        checked={config.showDropZoneOutlines ?? false}
+                        onChange={(e) =>
+                            onConfigChange({
+                                ...config,
+                                showDropZoneOutlines: e.target.checked,
+                            })
+                        }
+                        className="rounded"
+                    />
+                    <span>ドロップゾーン境界</span>
+                </label>
+
+                {/* ログレベル設定スライダー */}
+                <div className="border-gray-200 border-t pt-2">
+                    <label htmlFor="log-level-slider" className="mb-1 block text-sm">
+                        ログレベル: {config.logLevel ?? 0}
+                    </label>
+                    <input
+                        id="log-level-slider"
+                        type="range"
+                        min="0"
+                        max="2"
+                        value={config.logLevel ?? 0}
+                        onChange={(e) =>
+                            onConfigChange({
+                                ...config,
+                                logLevel: parseInt(e.target.value, 10) as 0 | 1 | 2,
+                            })
+                        }
+                        className="w-full"
+                        aria-label="ログレベル設定"
+                    />
+                    <div className="mt-1 flex justify-between text-gray-500 text-xs">
+                        <span>無効</span>
+                        <span>基本</span>
+                        <span>詳細</span>
+                    </div>
+                </div>
+
+                {/* 一括設定ボタン */}
+                <div className="space-y-2 pt-2">
+                    <button
+                        type="button"
+                        onClick={() =>
+                            onConfigChange({
+                                showDebugPanel: true,
+                                showMousePosition: true,
+                                showPanelSizes: true,
+                                showPlaceholderInfo: true,
+                                showDropZoneOutlines: true,
+                                logLevel: 2,
+                            })
+                        }
+                        className="w-full rounded bg-blue-100 px-2 py-1 text-blue-700 text-sm transition-colors hover:bg-blue-200">
+                        すべて有効
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() =>
+                            onConfigChange({
+                                showDebugPanel: false,
+                                showMousePosition: false,
+                                showPanelSizes: false,
+                                showPlaceholderInfo: false,
+                                showDropZoneOutlines: false,
+                                logLevel: 0,
+                            })
+                        }
+                        className="w-full rounded bg-gray-100 px-2 py-1 text-gray-700 text-sm transition-colors hover:bg-gray-200">
+                        すべて無効
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}