@aiquants/resize-panels 1.9.0 → 2.0.1

package/src/PanelResizeHandle.tsx

@@ -1,797 +0,0 @@
-/**
- * @file PanelResizeHandle component for custom resizable panels
- * カスタムリサイズ可能パネルのための PanelResizeHandle コンポーネント
- */
-
-import { type CSSProperties, memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react"
-import { twMerge } from "tailwind-merge"
-import { usePanelGroup } from "./context"
-import { roundHalfToEven } from "./roundHalfToEven"
-import {
-    PANEL_COLLAPSE_THRESHOLD_MAX,
-    PANEL_COLLAPSE_THRESHOLD_RATIO,
-    PANEL_EXPAND_THRESHOLD_MAX,
-    PANEL_EXPAND_THRESHOLD_RATIO,
-    PANEL_HANDLE_DRAG_THROTTLE_MS,
-    PANEL_HANDLE_THICKNESS,
-    PANEL_HANDLE_VISIBILITY_THRESHOLD,
-    PANEL_INDICATOR_BAR_LENGTH_HORIZONTAL,
-    PANEL_INDICATOR_BAR_LENGTH_VERTICAL,
-    PANEL_INDICATOR_BAR_THICKNESS,
-    PANEL_INDICATOR_LENGTH_HORIZONTAL,
-    PANEL_INDICATOR_LENGTH_VERTICAL,
-    PANEL_INDICATOR_THICKNESS,
-    PANEL_KEYBOARD_RESIZE_STEP,
-    PANEL_VISIBLE_INDICATOR_SPACING,
-    type PanelResizeHandleProps,
-    type ResizeHandleLayoutData,
-} from "./types"
-import { calculateSnapThreshold, getConstraintInPixels, getContainerSize } from "./utils"
-
-/**
- * Common styles applied to hide the handle and its interactive area entirely.
- * 非表示時のハンドルおよび操作領域全体に適用する共通スタイル定数。
- */
-const HIDDEN_HANDLE_STYLE: CSSProperties = {
-    display: "none",
-    pointerEvents: "none",
-    visibility: "hidden",
-}
-
-/**
- * Common styles applied to collapse the visual indicator.
- * 視覚インジケーターを非表示にする共通スタイル定数。
- */
-const HIDDEN_INDICATOR_STYLE: CSSProperties = {
-    display: "none",
-}
-
-/**
- * Sanitize an optional dimension to ensure a positive finite number.
- * オプション寸法を正の有限数値へ正規化する。
- */
-const sanitizeDimension = (value: unknown, defaultValue: number): number => {
-    if (typeof value !== "number" || !Number.isFinite(value) || value <= 0) {
-        return defaultValue
-    }
-    return value
-}
-
-/**
- * Ensure a numeric spacing value is an even integer for symmetric pixel alignment.
- * ピクセル配置の対称性を担保するため数値を偶数整数に整流する。
- */
-const ensureEven = (value: number): number => {
-    const rounded = Math.round(value)
-    return rounded % 2 === 0 ? rounded : rounded + 1
-}
-
-/**
- * Render an interactive divider that manages adjacent panel resizing gestures.
- * 隣接パネルのリサイズ操作を管理するインタラクティブなディバイダーを描画するコンポーネント。
- */
-export const PanelResizeHandle = memo((props: PanelResizeHandleProps) => {
-    const { id, disabled = false, className, style, children, onDragging, thickness, indicator = true, indicatorThickness, indicatorLength, indicatorBarThickness, indicatorBarLength, title } = props
-    const { direction, resizePanels, getPanel, collapsePanel, expandPanel, panels, reportHandleMeasurement, containerSize, layoutConstraintViolation } = usePanelGroup()
-    const [isDragging, setIsDragging] = useState(false)
-    const handleRef = useRef<HTMLButtonElement>(null)
-    const containerRef = useRef<HTMLElement | null>(null)
-
-    const leftPanelId = useRef<string>("")
-    const rightPanelId = useRef<string>("")
-    // 進行中ドラッグの後始末関数。アンマウント時や次のドラッグ開始時の残留リスナー掃除に使う
-    const dragCleanupRef = useRef<(() => void) | null>(null)
-    // RTL コンテキストでは DOM 順 (論理順) と視覚順が反転するため、座標計算の符号とオーバーレイ位置を切り替える
-    const [isRtl, setIsRtl] = useState(false)
-    const [adjacentPanelIds, setAdjacentPanelIds] = useState<{ left: string | null; right: string | null }>({ left: null, right: null })
-    const generatedId = useId()
-    const handleIdRef = useRef(id ?? `resize-handle-${generatedId}`)
-    const lastHandleMeasurementRef = useRef<ResizeHandleLayoutData | null>(null)
-    const resolvedHandleId = id ?? handleIdRef.current
-    const hasLayoutConstraintViolation = Boolean(layoutConstraintViolation)
-    const isHandleDisabled = disabled || hasLayoutConstraintViolation
-
-    /**
-     * Detect the panels adjacent to this handle by scanning sibling DOM elements.
-     * DOM の兄弟要素を走査してこのハンドルに隣接する左右のパネルを検出する。
-     */
-    const detectAdjacentPanels = useCallback(() => {
-        const handleElement = handleRef.current
-        if (!handleElement) return
-
-        const parent = handleElement.parentElement
-        if (!parent) return
-
-        containerRef.current = parent
-        if (typeof window !== "undefined") {
-            setIsRtl(window.getComputedStyle(parent).direction === "rtl")
-        }
-        const childrenElements = Array.from(parent.children)
-        const index = childrenElements.indexOf(handleElement)
-
-        let leftPanelElement: HTMLElement | null = null
-        let rightPanelElement: HTMLElement | null = null
-
-        for (let i = index - 1; i >= 0; i -= 1) {
-            const element = childrenElements[i] as HTMLElement
-            if (element.dataset.panelId) {
-                leftPanelElement = element
-                break
-            }
-        }
-
-        for (let i = index + 1; i < childrenElements.length; i += 1) {
-            const element = childrenElements[i] as HTMLElement
-            if (element.dataset.panelId) {
-                rightPanelElement = element
-                break
-            }
-        }
-
-        const nextLeftId = leftPanelElement?.dataset.panelId || ""
-        const nextRightId = rightPanelElement?.dataset.panelId || ""
-
-        if (nextLeftId === leftPanelId.current && nextRightId === rightPanelId.current) {
-            return
-        }
-
-        leftPanelId.current = nextLeftId
-        rightPanelId.current = nextRightId
-
-        setAdjacentPanelIds({
-            left: nextLeftId || null,
-            right: nextRightId || null,
-        })
-    }, [])
-
-    // パネル構成 (ID 列) の変化を検知するためのキー。ドラッグ中のサイズ更新では変化しない
-    const panelIdsKey = useMemo(() => panels.map((panel) => panel.id).join("|"), [panels])
-
-    useEffect(() => {
-        // マウント時とパネルの増減・並び替え時に隣接パネルを再検出する
-        // (マウント時のみだと兄弟 Panel の条件付き追加/削除でハンドルが古い ID を掴んだままになる)
-        detectAdjacentPanels()
-    }, [detectAdjacentPanels, panelIdsKey])
-
-    useEffect(() => {
-        // ハンドル ID が外部から変更された場合に、旧 ID の測定結果をクリーンアップする
-        if (resolvedHandleId === handleIdRef.current) {
-            return
-        }
-
-        const previousId = handleIdRef.current
-        handleIdRef.current = resolvedHandleId
-        lastHandleMeasurementRef.current = null
-
-        if (previousId !== resolvedHandleId) {
-            reportHandleMeasurement(previousId, null)
-        }
-    }, [reportHandleMeasurement, resolvedHandleId])
-
-    useEffect(() => {
-        // コンポーネントのアンマウント時に、このハンドルの測定結果を破棄する
-        const finalId = handleIdRef.current
-        return () => {
-            reportHandleMeasurement(finalId, null)
-        }
-    }, [reportHandleMeasurement])
-
-    useEffect(() => {
-        // ドラッグ中にアンマウントされた場合も document リスナーとドラッグ状態を確実に破棄する
-        return () => {
-            dragCleanupRef.current?.()
-        }
-    }, [])
-
-    /**
-     * Initiates a resize drag interaction when the handle receives a pointer down event.
-     * リサイズハンドルがポインタダウンを受けた際にドラッグ操作を開始する処理。
-     */
-    const handlePointerDown = useCallback(
-        (event: React.PointerEvent<HTMLButtonElement>) => {
-            if (isHandleDisabled || !containerRef.current) return
-
-            // 既にドラッグ中の場合は 2 本目のポインタで新たなドラッグを開始しない
-            if (dragCleanupRef.current) return
-
-            event.preventDefault()
-            event.stopPropagation()
-
-            const container = containerRef.current
-            const { inner: containerSize } = getContainerSize(container, direction)
-            const startPosition = { x: event.clientX, y: event.clientY }
-
-            const leftPanel = getPanel(leftPanelId.current)
-            const rightPanel = getPanel(rightPanelId.current)
-
-            if (!(leftPanel && rightPanel)) return
-
-            const initialLeftSize = leftPanel.size
-            const initialRightSize = rightPanel.size
-
-            let lastUpdateTime = 0
-            const throttleMs = PANEL_HANDLE_DRAG_THROTTLE_MS
-
-            setIsDragging(true)
-            onDragging?.(true)
-
-            // このドラッグを開始したポインタだけを追跡する (2 本目のタッチ等の混入を防ぐ)
-            const dragPointerId = event.pointerId
-            const captureTarget = event.currentTarget
-
-            // RTL では DOM 順 (論理順) と視覚順が反転するため、水平ドラッグの変位符号を反転する
-            const isRtlDrag = direction === "horizontal" && typeof window !== "undefined" && window.getComputedStyle(container).direction === "rtl"
-
-            // ポインタキャプチャを取得してドラッグ中のイベント配送を固定
-            captureTarget.setPointerCapture(dragPointerId)
-
-            /**
-             * Handle pointer move events emitted during an active resize drag interaction.
-             * リサイズドラッグ操作中に発生するポインタ移動イベントを処理する関数。
-             */
-            const handlePointerMove = (moveEvent: PointerEvent) => {
-                // 別ポインタのイベントはドラッグ計算に混入させない
-                if (moveEvent.pointerId !== dragPointerId) return
-                if (!handleRef.current) return
-
-                moveEvent.preventDefault()
-                moveEvent.stopPropagation()
-
-                const now = performance.now()
-                if (now - lastUpdateTime < throttleMs) return
-                lastUpdateTime = now
-
-                const rawPixelDelta = direction === "horizontal" ? moveEvent.clientX - startPosition.x : moveEvent.clientY - startPosition.y
-                const pixelDelta = isRtlDrag ? -rawPixelDelta : rawPixelDelta
-                if (pixelDelta === 0) {
-                    return
-                }
-
-                const newLeftSizeInPixels = initialLeftSize + pixelDelta
-                const newRightSizeInPixels = initialRightSize - pixelDelta
-
-                const updatedLeftPanel = getPanel(leftPanelId.current)
-                const updatedRightPanel = getPanel(rightPanelId.current)
-
-                if (updatedLeftPanel && updatedRightPanel && leftPanelId.current && rightPanelId.current) {
-                    const leftMinSizePixels = getConstraintInPixels(updatedLeftPanel.minSize, 0, containerSize)
-                    const rightMinSizePixels = getConstraintInPixels(updatedRightPanel.minSize, 0, containerSize)
-
-                    const collapseThresholdPixels = Math.min(containerSize * PANEL_COLLAPSE_THRESHOLD_RATIO, PANEL_COLLAPSE_THRESHOLD_MAX)
-                    const expandThresholdPixels = Math.min(containerSize * PANEL_EXPAND_THRESHOLD_RATIO, PANEL_EXPAND_THRESHOLD_MAX)
-
-                    const rightCanCollapseFromStart = updatedRightPanel.collapseFromStart
-                    const rightCollapseDirection = updatedRightPanel.collapsedByDirection ?? "start"
-                    if (rightCanCollapseFromStart && !updatedRightPanel.collapsed && newRightSizeInPixels <= Math.max(rightMinSizePixels * 0.3, collapseThresholdPixels)) {
-                        collapsePanel(rightPanelId.current, "start")
-                        return
-                    }
-
-                    const leftCanCollapseFromEnd = updatedLeftPanel.collapseFromEnd
-                    const leftCollapseDirection = updatedLeftPanel.collapsedByDirection ?? "end"
-                    if (leftCanCollapseFromEnd && !updatedLeftPanel.collapsed && newLeftSizeInPixels <= Math.max(leftMinSizePixels * 0.3, collapseThresholdPixels)) {
-                        collapsePanel(leftPanelId.current, "end")
-                        return
-                    }
-
-                    if (updatedRightPanel.collapsed && newRightSizeInPixels > Math.max(rightMinSizePixels * 0.3, expandThresholdPixels)) {
-                        expandPanel(rightPanelId.current, rightCollapseDirection, newRightSizeInPixels)
-                        return
-                    }
-
-                    if (updatedLeftPanel.collapsed && newLeftSizeInPixels > Math.max(leftMinSizePixels * 0.3, expandThresholdPixels)) {
-                        expandPanel(leftPanelId.current, leftCollapseDirection, newLeftSizeInPixels)
-                        return
-                    }
-
-                    if (containerSize > 0) {
-                        const totalPanelPixels = updatedLeftPanel.size + updatedRightPanel.size
-                        const snapThreshold = calculateSnapThreshold(containerSize)
-                        let snapped = false
-
-                        if (leftMinSizePixels <= snapThreshold && newLeftSizeInPixels <= snapThreshold && initialLeftSize !== 0) {
-                            const snappedLeft = 0
-                            const snappedRight = Math.max(0, totalPanelPixels - snappedLeft)
-
-                            if (snappedRight >= rightMinSizePixels) {
-                                resizePanels(leftPanelId.current, rightPanelId.current, snappedLeft, snappedRight)
-                                snapped = true
-                            }
-                        } else if (rightMinSizePixels <= snapThreshold && newRightSizeInPixels <= snapThreshold && initialRightSize !== 0) {
-                            const snappedRight = 0
-                            const snappedLeft = Math.max(0, totalPanelPixels - snappedRight)
-
-                            if (snappedLeft >= leftMinSizePixels) {
-                                resizePanels(leftPanelId.current, rightPanelId.current, snappedLeft, snappedRight)
-                                snapped = true
-                            }
-                        }
-
-                        if (snapped) {
-                            return
-                        }
-                    }
-
-                    if (updatedLeftPanel.collapsed || updatedRightPanel.collapsed) {
-                        return
-                    }
-
-                    resizePanels(leftPanelId.current, rightPanelId.current, newLeftSizeInPixels, newRightSizeInPixels)
-                }
-            }
-
-            /**
-             * Tear down the active drag: remove listeners, release capture, and reset state.
-             * 進行中ドラッグの後始末: リスナー除去・キャプチャ解放・状態リセットを一括で行う。
-             * pointerup / pointercancel / lostpointercapture / アンマウントのどこから呼ばれても一度だけ実行される。
-             */
-            let dragActive = true
-            const stopDragging = () => {
-                if (!dragActive) return
-                dragActive = false
-                dragCleanupRef.current = null
-
-                setIsDragging(false)
-                onDragging?.(false)
-
-                document.removeEventListener("pointermove", handlePointerMove)
-                document.removeEventListener("pointerup", handlePointerUp)
-                document.removeEventListener("pointercancel", handlePointerCancel)
-                captureTarget.removeEventListener("lostpointercapture", handleLostPointerCapture)
-                if (captureTarget.hasPointerCapture?.(dragPointerId)) {
-                    captureTarget.releasePointerCapture(dragPointerId)
-                }
-            }
-
-            const handlePointerUp = (upEvent: PointerEvent) => {
-                // 別ポインタの離上ではドラッグを終了しない
-                if (upEvent.pointerId !== dragPointerId) return
-                stopDragging()
-            }
-
-            const handlePointerCancel = (cancelEvent: PointerEvent) => {
-                // OS 割込み (タッチジェスチャ奪取等) でキャンセルされた場合もドラッグ状態を残さない
-                if (cancelEvent.pointerId !== dragPointerId) return
-                stopDragging()
-            }
-
-            const handleLostPointerCapture = (lostEvent: PointerEvent) => {
-                // キャプチャ喪失 (要素の DOM 離脱等) 時のフォールバック終了処理
-                if (lostEvent.pointerId !== dragPointerId) return
-                stopDragging()
-            }
-
-            document.addEventListener("pointermove", handlePointerMove)
-            document.addEventListener("pointerup", handlePointerUp)
-            document.addEventListener("pointercancel", handlePointerCancel)
-            captureTarget.addEventListener("lostpointercapture", handleLostPointerCapture)
-            dragCleanupRef.current = stopDragging
-        },
-        [isHandleDisabled, direction, resizePanels, getPanel, collapsePanel, expandPanel, onDragging],
-    )
-
-    /**
-     * Resize adjacent panels with arrow keys for keyboard accessibility.
-     * キーボード (矢印キー) で隣接パネルをリサイズするアクセシビリティ対応。
-     * Shift 併用で 5 倍のステップ幅を適用する。
-     */
-    const handleKeyDown = useCallback(
-        (event: React.KeyboardEvent<HTMLButtonElement>) => {
-            if (isHandleDisabled) return
-
-            const isHorizontalDirection = direction === "horizontal"
-            const decreaseKey = isHorizontalDirection ? "ArrowLeft" : "ArrowUp"
-            const increaseKey = isHorizontalDirection ? "ArrowRight" : "ArrowDown"
-            if (event.key !== decreaseKey && event.key !== increaseKey) return
-
-            event.preventDefault()
-            event.stopPropagation()
-
-            let delta = (event.key === increaseKey ? 1 : -1) * (event.shiftKey ? PANEL_KEYBOARD_RESIZE_STEP * 5 : PANEL_KEYBOARD_RESIZE_STEP)
-            // RTL では DOM 順 (論理順) と視覚順が反転するため符号を反転する (ドラッグ開始時と同様に押下時点の値を都度参照)
-            const isRtlNow = isHorizontalDirection && typeof window !== "undefined" && containerRef.current !== null && window.getComputedStyle(containerRef.current).direction === "rtl"
-            if (isRtlNow) {
-                delta = -delta
-            }
-
-            const leftPanel = getPanel(leftPanelId.current)
-            const rightPanel = getPanel(rightPanelId.current)
-            if (!(leftPanel && rightPanel) || leftPanel.collapsed || rightPanel.collapsed) return
-
-            // 制約の最終判定はリデューサー側で行われる
-            resizePanels(leftPanelId.current, rightPanelId.current, leftPanel.size + delta, rightPanel.size - delta)
-        },
-        [isHandleDisabled, direction, getPanel, resizePanels],
-    )
-
-    const isHorizontal = direction === "horizontal"
-    const cursor = isHorizontal ? "cursor-col-resize" : "cursor-row-resize"
-
-    const baseHandleClasses = useMemo(
-        () =>
-            twMerge(
-                "group absolute z-20 flex select-none items-center justify-center border-none bg-transparent transition-colors duration-150 overflow-visible",
-                cursor,
-                isHorizontal ? "h-full" : "w-full",
-                !isHandleDisabled && "hover:bg-gray-200/70 dark:hover:bg-gray-700/70",
-                !isHandleDisabled && "active:bg-blue-300/60 dark:active:bg-blue-700/60",
-                isDragging && "bg-blue-200/80 dark:bg-blue-800/60",
-                isHandleDisabled && "cursor-not-allowed opacity-50",
-                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50",
-                className,
-            ),
-        [cursor, isHorizontal, isHandleDisabled, isDragging, className],
-    )
-
-    const adjacentIndices = useMemo(() => {
-        const findIndex = (panelId: string | null) => {
-            if (!panelId) {
-                return -1
-            }
-            for (let index = 0; index < panels.length; index += 1) {
-                if (panels[index].id === panelId) {
-                    return index
-                }
-            }
-            return -1
-        }
-
-        return {
-            left: findIndex(adjacentPanelIds.left),
-            right: findIndex(adjacentPanelIds.right),
-        }
-    }, [adjacentPanelIds.left, adjacentPanelIds.right, panels])
-
-    const containerLength = isHorizontal ? containerSize.width : containerSize.height
-
-    const boundaryOffset = useMemo(() => {
-        const safeSum = (startIndex: number, endIndexInclusive: number) => {
-            if (startIndex > endIndexInclusive) {
-                return 0
-            }
-            let total = 0
-            for (let index = startIndex; index <= endIndexInclusive; index += 1) {
-                const panel = panels[index]
-                if (!panel) {
-                    continue
-                }
-                const candidateSize = panel.size ?? 0
-                const sanitizedSize = Math.max(0, candidateSize)
-                total += panel.collapsed ? 0 : sanitizedSize
-            }
-            return total
-        }
-
-        if (adjacentIndices.left >= 0) {
-            return safeSum(0, adjacentIndices.left)
-        }
-
-        if (adjacentIndices.right > 0) {
-            return safeSum(0, adjacentIndices.right - 1)
-        }
-
-        return 0
-    }, [adjacentIndices.left, adjacentIndices.right, panels])
-
-    const clampedOffset = useMemo(() => {
-        if (!Number.isFinite(boundaryOffset) || boundaryOffset < 0) {
-            return 0
-        }
-        if (containerLength > 0 && boundaryOffset > containerLength) {
-            return containerLength
-        }
-        return boundaryOffset
-    }, [boundaryOffset, containerLength])
-
-    const indicatorConfig = typeof indicator === "object" && indicator !== null ? indicator : undefined
-    const isIndicatorExplicitlyHidden = indicator === false || indicatorConfig?.visible === false
-
-    const rawThickness = sanitizeDimension(thickness, PANEL_HANDLE_THICKNESS)
-    const defaultIndicatorLength = isHorizontal ? PANEL_INDICATOR_LENGTH_HORIZONTAL : PANEL_INDICATOR_LENGTH_VERTICAL
-    const defaultBarLength = isHorizontal ? PANEL_INDICATOR_BAR_LENGTH_HORIZONTAL : PANEL_INDICATOR_BAR_LENGTH_VERTICAL
-
-    const rawIndicatorThickness = sanitizeDimension(indicatorThickness ?? indicatorConfig?.thickness, PANEL_INDICATOR_THICKNESS)
-    const rawIndicatorLength = sanitizeDimension(indicatorLength ?? indicatorConfig?.length, defaultIndicatorLength)
-    const rawBarThickness = sanitizeDimension(indicatorBarThickness ?? indicatorConfig?.barThickness, PANEL_INDICATOR_BAR_THICKNESS)
-    const rawBarLength = sanitizeDimension(indicatorBarLength ?? indicatorConfig?.barLength, defaultBarLength)
-
-    // 幾何学的内包不変条件: 内部バー寸法がインジケーター外枠およびハンドル操作領域を超えないようクランプ
-    const resolvedThickness = Math.max(1, rawThickness)
-    const resolvedIndicatorThickness = Math.min(resolvedThickness, Math.max(1, rawIndicatorThickness))
-    const resolvedIndicatorLength = Math.max(1, rawIndicatorLength)
-    const resolvedBarThickness = Math.min(resolvedIndicatorThickness, Math.max(1, rawBarThickness))
-    const resolvedBarLength = Math.min(resolvedIndicatorLength, Math.max(1, rawBarLength))
-
-    // 静的 CSS 変数はドラッグ中に変化しないため、スタイル再計算時の不要なプロパティ再設定を防止
-    const customProperties = useMemo<Record<string, string>>(
-        () => ({
-            "--rp-handle-thickness": `${resolvedThickness}px`,
-            "--rp-indicator-thickness": `${resolvedIndicatorThickness}px`,
-            "--rp-indicator-length": `${resolvedIndicatorLength}px`,
-            "--rp-indicator-bar-thickness": `${resolvedBarThickness}px`,
-            "--rp-indicator-bar-length": `${resolvedBarLength}px`,
-        }),
-        [resolvedThickness, resolvedIndicatorThickness, resolvedIndicatorLength, resolvedBarThickness, resolvedBarLength],
-    )
-
-    const overlayBaseStyle = useMemo<CSSProperties>(() => {
-        // RTL では右端起点から論理距離を差し引いた位置が物理境界中心線となる
-        const centerLine = isHorizontal && isRtl && containerLength > 0 ? containerLength - clampedOffset : clampedOffset
-
-        // transform: translate(-50%) による 0.5px サブピクセル滲みを防ぐため、中心線から半厚みを引き銀行丸めで整数ピクセル原点を決定
-        const startCoord = roundHalfToEven(centerLine - resolvedThickness / 2, 0)
-
-        const base: CSSProperties = {
-            position: "absolute",
-            zIndex: 20,
-            touchAction: "none",
-            ...customProperties,
-        }
-
-        if (isHorizontal) {
-            base.top = 0
-            base.left = `${startCoord}px`
-            base.width = `${resolvedThickness}px`
-            base.height = "100%"
-        } else {
-            base.left = 0
-            base.top = `${startCoord}px`
-            base.height = `${resolvedThickness}px`
-            base.width = "100%"
-        }
-
-        return base
-    }, [clampedOffset, isHorizontal, isRtl, containerLength, resolvedThickness, customProperties])
-
-    const indicatorGrouping = useMemo(() => {
-        const snapThreshold = calculateSnapThreshold(containerLength)
-        const isEffectivelyCollapsed = (panelIndex: number) => {
-            if (panelIndex < 0 || panelIndex >= panels.length) {
-                return false
-            }
-            const target = panels[panelIndex]
-            if (!target) {
-                return false
-            }
-            if (target.collapsed) {
-                return true
-            }
-            return target.size <= snapThreshold
-        }
-
-        const countCollapsed = (startIndex: number, step: 1 | -1) => {
-            if (!isEffectivelyCollapsed(startIndex)) {
-                return 0
-            }
-
-            let count = 0
-            for (let index = startIndex; index >= 0 && index < panels.length; index += step) {
-                if (!isEffectivelyCollapsed(index)) {
-                    break
-                }
-                count += 1
-            }
-            return count
-        }
-
-        const leftIndex = adjacentIndices.left
-        const rightIndex = adjacentIndices.right
-        const leftCollapsedCount = leftIndex >= 0 ? countCollapsed(leftIndex, -1) : 0
-        const rightCollapsedCount = rightIndex >= 0 ? countCollapsed(rightIndex, 1) : 0
-        const groupSize = leftCollapsedCount + rightCollapsedCount + 1
-        const overlapIndex = leftCollapsedCount
-
-        return {
-            groupSize,
-            overlapIndex,
-        }
-    }, [adjacentIndices.left, adjacentIndices.right, panels, containerLength])
-
-    const shouldHideHandle = useMemo(() => {
-        if (hasLayoutConstraintViolation) {
-            return true
-        }
-        if (indicatorGrouping.groupSize <= 1) {
-            return false
-        }
-        // 折りたたみ重なり時の視覚重複を防ぐため端点以外の重複ハンドルを不可視化
-        const lastIndex = indicatorGrouping.groupSize - 1
-        return indicatorGrouping.overlapIndex > 0 && indicatorGrouping.overlapIndex < lastIndex
-    }, [indicatorGrouping, hasLayoutConstraintViolation])
-
-    const indicatorOffset = useMemo(() => {
-        if (indicatorGrouping.groupSize <= 1 || shouldHideHandle) {
-            return 0
-        }
-
-        const visibleCount = indicatorGrouping.groupSize > 1 ? 2 : 1
-        if (visibleCount === 1) {
-            return 0
-        }
-
-        // 半ピクセル除算による非対称性を防ぐため偶数スペーシングを保証
-        const dynamicSpacing = ensureEven(Math.max(PANEL_VISIBLE_INDICATOR_SPACING, resolvedIndicatorThickness + 4))
-        const visibleIndex = indicatorGrouping.overlapIndex === 0 ? 0 : visibleCount - 1
-        const centerIndex = (visibleCount - 1) / 2
-        const rawOffset = (visibleIndex - centerIndex) * dynamicSpacing
-
-        // 水平かつ RTL の環境では start パネルが物理右側にあるため論理順の正シフトを物理左方向（負）へ反転
-        return isHorizontal && isRtl ? -rawOffset : rawOffset
-    }, [indicatorGrouping, shouldHideHandle, resolvedIndicatorThickness, isHorizontal, isRtl])
-
-    const indicatorWrapperStyle = useMemo<CSSProperties>(() => {
-        if (shouldHideHandle || isIndicatorExplicitlyHidden) {
-            return HIDDEN_INDICATOR_STYLE
-        }
-
-        const width = isHorizontal ? resolvedIndicatorThickness : resolvedIndicatorLength
-        const height = isHorizontal ? resolvedIndicatorLength : resolvedIndicatorThickness
-
-        const dynamicStyle: CSSProperties = {
-            width: `${width}px`,
-            height: `${height}px`,
-            flexShrink: 0,
-        }
-
-        if (indicatorOffset !== 0) {
-            dynamicStyle.transform = isHorizontal ? `translateX(${indicatorOffset}px)` : `translateY(${indicatorOffset}px)`
-        }
-
-        return dynamicStyle
-    }, [shouldHideHandle, isIndicatorExplicitlyHidden, isHorizontal, resolvedIndicatorThickness, resolvedIndicatorLength, indicatorOffset])
-
-    const indicatorBarStyle = useMemo<CSSProperties>(() => {
-        const width = isHorizontal ? resolvedBarThickness : resolvedBarLength
-        const height = isHorizontal ? resolvedBarLength : resolvedBarThickness
-
-        return {
-            width: `${width}px`,
-            height: `${height}px`,
-            flexShrink: 0,
-        }
-    }, [isHorizontal, resolvedBarThickness, resolvedBarLength])
-
-    const indicatorWrapperClasses = useMemo(
-        () =>
-            twMerge(
-                "pointer-events-none flex items-center justify-center rounded-full bg-white text-slate-700 ring-1 ring-inset ring-white/80 backdrop-blur-sm transition-colors duration-150 shadow-[0_0_0_1px_rgba(255,255,255,0.85),0_1px_3px_rgba(15,23,42,0.18)]",
-                "dark:bg-slate-800/95 dark:text-slate-200 dark:ring-slate-500/60 dark:shadow-[0_0_0_1px_rgba(148,163,184,0.45),0_1px_3px_rgba(2,6,23,0.55)]",
-                isDragging && "bg-blue-200/80 ring-blue-300 shadow-[0_0_0_1px_rgba(191,219,254,0.65),0_1px_4px_rgba(59,130,246,0.45)] dark:bg-blue-900/70 dark:ring-blue-400 dark:shadow-[0_0_0_1px_rgba(147,197,253,0.5),0_1px_4px_rgba(59,130,246,0.55)]",
-                indicatorConfig?.className,
-            ),
-        [isDragging, indicatorConfig?.className],
-    )
-
-    const indicatorBarClasses = useMemo(
-        () =>
-            twMerge(
-                "pointer-events-none rounded-full bg-slate-600 transition-colors duration-150 shadow-[0_0_0_1px_rgba(255,255,255,0.9)] dark:bg-slate-200 dark:shadow-[0_0_0_1px_rgba(15,23,42,0.55)]",
-                isDragging && "bg-blue-500 dark:bg-blue-300",
-                !isHandleDisabled && "group-hover:bg-slate-700 dark:group-hover:bg-slate-100",
-                indicatorConfig?.barClassName,
-            ),
-        [isDragging, isHandleDisabled, indicatorConfig?.barClassName],
-    )
-
-    const updateHandleMeasurement = useCallback(() => {
-        const element = handleRef.current
-        if (!element) {
-            return
-        }
-
-        let thickness = 0
-
-        if (!shouldHideHandle) {
-            const baseSize = direction === "horizontal" ? element.offsetWidth : element.offsetHeight
-            let marginStart = 0
-            let marginEnd = 0
-
-            if (typeof window !== "undefined") {
-                const computedStyle = window.getComputedStyle(element)
-                if (direction === "horizontal") {
-                    marginStart = Number.parseFloat(computedStyle.marginLeft || "0")
-                    marginEnd = Number.parseFloat(computedStyle.marginRight || "0")
-                } else {
-                    marginStart = Number.parseFloat(computedStyle.marginTop || "0")
-                    marginEnd = Number.parseFloat(computedStyle.marginBottom || "0")
-                }
-            }
-
-            const candidates = [baseSize, marginStart, marginEnd]
-            thickness = candidates.reduce((sum, value) => {
-                if (!Number.isFinite(value)) {
-                    return sum
-                }
-                return sum + value
-            }, 0)
-        }
-
-        if (!Number.isFinite(thickness) || thickness < 0) {
-            thickness = 0
-        }
-
-        const measurement: ResizeHandleLayoutData = {
-            id: resolvedHandleId,
-            thickness,
-            direction,
-            visible: !shouldHideHandle && thickness > PANEL_HANDLE_VISIBILITY_THRESHOLD,
-            startPanelId: adjacentPanelIds.left,
-            endPanelId: adjacentPanelIds.right,
-        }
-
-        const lastMeasurement = lastHandleMeasurementRef.current
-
-        if (
-            lastMeasurement &&
-            Math.abs(lastMeasurement.thickness - measurement.thickness) <= 0.25 &&
-            lastMeasurement.visible === measurement.visible &&
-            lastMeasurement.direction === measurement.direction &&
-            lastMeasurement.startPanelId === measurement.startPanelId &&
-            lastMeasurement.endPanelId === measurement.endPanelId
-        ) {
-            return
-        }
-
-        lastHandleMeasurementRef.current = measurement
-        reportHandleMeasurement(resolvedHandleId, measurement)
-    }, [direction, adjacentPanelIds.left, adjacentPanelIds.right, reportHandleMeasurement, resolvedHandleId, shouldHideHandle])
-
-    useEffect(() => {
-        updateHandleMeasurement()
-    }, [updateHandleMeasurement])
-
-    useEffect(() => {
-        const element = handleRef.current
-        if (!element) {
-            return
-        }
-
-        if (typeof ResizeObserver === "undefined") {
-            updateHandleMeasurement()
-            return
-        }
-
-        const observer = new ResizeObserver(() => {
-            updateHandleMeasurement()
-        })
-
-        observer.observe(element)
-
-        return () => {
-            observer.disconnect()
-        }
-    }, [updateHandleMeasurement])
-
-    const combinedStyle = useMemo<CSSProperties>(() => {
-        const merged = style ? { ...overlayBaseStyle, ...style } : overlayBaseStyle
-        if (shouldHideHandle) {
-            return {
-                ...merged,
-                ...HIDDEN_HANDLE_STYLE,
-            }
-        }
-        return merged
-    }, [overlayBaseStyle, shouldHideHandle, style])
-
-    return (
-        <button
-            type="button"
-            ref={handleRef}
-            className={baseHandleClasses}
-            style={combinedStyle}
-            onPointerDown={handlePointerDown}
-            onKeyDown={handleKeyDown}
-            disabled={isHandleDisabled}
-            aria-hidden={shouldHideHandle || undefined}
-            aria-label={`Resize ${isHorizontal ? "columns" : "rows"} - Drag or use arrow keys to resize, drag to the edge to collapse/expand panels`}
-            data-resize-handle-id={resolvedHandleId}
-            title={title ?? `Resize ${isHorizontal ? "columns" : "rows"} - Drag or use arrow keys to resize, drag to the edge to collapse/expand panels`}>
-            {children ||
-                (!isIndicatorExplicitlyHidden && (
-                    <div className={indicatorWrapperClasses} style={indicatorWrapperStyle} data-resize-handle-indicator="" aria-hidden="true">
-                        <span className={indicatorBarClasses} style={indicatorBarStyle} data-resize-handle-indicator-bar="" aria-hidden="true" />
-                    </div>
-                ))}
-        </button>
-    )
-})