@aiquants/resize-panels 2.0.0 → 2.1.0

package/src/Panel.tsx

@@ -1,297 +0,0 @@
-/**
- * @file Panel component for custom resizable panels
- * カスタムリサイズ可能パネルのための Panel コンポーネント
- */
-
-import { type CSSProperties, memo, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef } from "react"
-import { twMerge } from "tailwind-merge"
-import { resolvePanelBounds } from "./allocateLayout"
-import { usePanelGroup } from "./context"
-import { PanelDebugInfo } from "./PanelDebugInfo"
-import { type CollapsibleConfig, PANEL_ALLOCATION_EPSILON, type PanelLayoutData, type PanelProps, type PanelRegistration, type SizeConfig } from "./types"
-import { getContainerSize, normalizeSizeConfig, toRoundedPercentage } from "./utils"
-import { Logger, LogLevel } from "./utils/simple-logger"
-
-const logger = new Logger(LogLevel.INFO, "[resize-panels]")
-
-/**
- * Directional collapse flags derived from the collapsible configuration.
- * 折りたたみ設定から導出した方向フラグ。
- */
-type CollapseFlags = {
-    collapseFromStart: boolean
-    collapseFromEnd: boolean
-}
-
-const COLLAPSE_FLAGS: Record<CollapsibleConfig["from"], CollapseFlags> = {
-    both: { collapseFromStart: true, collapseFromEnd: true },
-    start: { collapseFromStart: true, collapseFromEnd: false },
-    end: { collapseFromStart: false, collapseFromEnd: true },
-}
-
-/**
- * Normalize collapsible configuration into directional flags.
- * 折りたたみ設定を方向フラグへ正規化する処理。
- *
- * @param config - Collapsible configuration from props / props で指定された折りたたみ設定
- * @returns Directional collapse flags / 方向ごとの折りたたみ可否
- * @throws When the configuration names an unsupported direction / 未対応の方向が指定された場合
- */
-const normalizeCollapsibleConfig = (config: CollapsibleConfig | undefined): CollapseFlags => {
-    if (!config) {
-        return { collapseFromStart: false, collapseFromEnd: false }
-    }
-    const flags = COLLAPSE_FLAGS[config.from]
-    if (!flags) {
-        throw new Error("Invalid collapsible configuration: unsupported 'from' value")
-    }
-    return flags
-}
-
-/**
- * Split a normalized default size into the preference fields of the layout state.
- * 正規化済みの既定サイズを、レイアウト状態の希望値フィールドへ分解する処理。
- *
- * Exactly one of the two preferences carries meaning, selected by the unit, so the state never holds the
- * same intent twice.
- * 意味を持つ希望値は単位によって選ばれる 1 つだけであり、状態が同じ意図を二重に持つことはない。
- *
- * @param defaultSize - Normalized default size / 正規化済みの既定サイズ
- * @returns Size unit and both preference fields / サイズ単位と 2 つの希望値フィールド
- */
-const toPreference = (defaultSize: SizeConfig): Pick<PanelRegistration, "sizeUnit" | "preferredPercentageSize" | "preferredPixelSize"> => {
-    const value = Math.max(0, defaultSize.value)
-    return defaultSize.unit === "pixels" ? { sizeUnit: "pixels", preferredPixelSize: value, preferredPercentageSize: 0 } : { sizeUnit: "percentage", preferredPercentageSize: value, preferredPixelSize: 0 }
-}
-
-/**
- * Flex triple a panel renders: the allocated length plus the weights that absorb a container change.
- * パネルが描画する flex の三つ組: 配分された長さと、コンテナ変化を吸収する重み。
- */
-type PanelFlexStyle = Required<Pick<CSSProperties, "flexBasis" | "flexGrow" | "flexShrink">>
-
-type ResolvePanelFlexArgs = {
-    size: number
-    panel: PanelLayoutData | undefined
-    registration: PanelRegistration
-    containerSize: number
-    isCollapsed: boolean
-}
-
-/**
- * Resolve the flex triple that renders a panel's current state.
- * パネルの現在の状態を描画する flex の三つ組を解決する処理。
- *
- * The basis is always the allocated length, so the rendered geometry is the allocator's answer and nothing
- * else. The weights are the first-order continuation of that answer: a panel grows with its ratio weight
- * until it reaches its maximum and shrinks only while it is strictly between its bounds, which is exactly
- * how the allocator would move it for a small container change.
- * basis は常に配分された長さであり、描画される幾何は配分器の答えそのものとなる。重みはその答えの
- * 一次近似であり、上限に達するまでは比率の重みで伸び、上下限の内側にいる間だけ縮む。これは小さな
- * コンテナ変化に対して配分器が動かす量と一致する。
- *
- * @param args - Allocated size, panel state, registration and container length / 配分サイズ・パネル状態・登録情報・コンテナ長
- * @returns Flex basis, grow and shrink to render / 描画する flex basis・grow・shrink
- */
-export const resolvePanelFlex = ({ size, panel, registration, containerSize, isCollapsed }: ResolvePanelFlexArgs): PanelFlexStyle => {
-    if (isCollapsed) {
-        return { flexBasis: "0px", flexGrow: 0, flexShrink: 0 }
-    }
-
-    if (!panel || containerSize <= 0) {
-        // まだ計測できていない間は宣言された既定サイズで描く。サーバー描画や初回フレームで
-        // 幅ゼロのパネルが一瞬見えるのを防ぎ、計測後の配分結果と連続した見た目になる
-        const isPixelRegistration = registration.sizeUnit === "pixels"
-        return {
-            flexBasis: isPixelRegistration ? `${registration.preferredPixelSize}px` : `${registration.preferredPercentageSize}%`,
-            flexGrow: isPixelRegistration ? 0 : registration.preferredPercentageSize,
-            flexShrink: isPixelRegistration ? 0 : 1,
-        }
-    }
-
-    if (panel.sizeUnit === "pixels") {
-        // 固定長パネルはコンテナ変化を引き受けない。引き受けると配分器の答えと描画がずれる
-        return { flexBasis: `${size}px`, flexGrow: 0, flexShrink: 0 }
-    }
-
-    // 内側にいるパネルの縮小重みが一律 1 で正しいのは、CSS の縮小配分が「重み × basis」であり
-    // basis が配分結果 (= λ × 重み) だからで、結果として重みの比で縮むため
-    const bounds = resolvePanelBounds(panel, containerSize)
-    const canGrow = size < bounds.max - PANEL_ALLOCATION_EPSILON
-    const isInterior = canGrow && size > bounds.min + PANEL_ALLOCATION_EPSILON
-    return { flexBasis: `${size}px`, flexGrow: canGrow ? panel.preferredPercentageSize : 0, flexShrink: isInterior ? 1 : 0 }
-}
-
-/**
- * Render a resizable panel whose size is decided by the group's allocator.
- * グループの配分器が決めたサイズで描画されるリサイズ可能パネル。
- *
- * The panel publishes what it wants (its preference and constraints) and renders what it was given. Its
- * flex basis is the allocated length itself, while `flex-grow` / `flex-shrink` describe how it should
- * absorb a container change during the frames before the allocator runs again — a growth weight that
- * vanishes at the panel's maximum and a shrink weight that vanishes at either bound, which is exactly how
- * the allocator would move this panel for a small change.
- * パネルは希望と制約を公開し、与えられたサイズで描画する。flex basis は配分結果そのもので、
- * `flex-grow` / `flex-shrink` は配分器が再実行されるまでの数フレームでコンテナ変化をどう吸収するかを表す
- * (上限で消える成長重みと、上下限のいずれかで消える縮小重み)。これは小さな変化に対して配分器が動かす量と一致する。
- */
-export const Panel = memo(
-    ({ id: providedId, defaultSize = { value: 50, unit: "percentage" }, minSize, maxSize, className, style, children, collapsible, defaultCollapsed = false, pixelAdjustPriority, flexAdjustPriority, contentOverflow = "auto", ...elementProps }: PanelProps) => {
-        const { direction, registerPanel, unregisterPanel, getPanel, containerSize, showDebugInfo, reportPanelMeasurement } = usePanelGroup()
-        const panelRef = useRef<HTMLDivElement>(null)
-        const generatedId = useId()
-        const panelIdRef = useRef(providedId || `panel-${generatedId}`)
-        const panelId = panelIdRef.current
-
-        useEffect(() => {
-            // id はマウント後に変更できない (登録・DOM 属性・計測が初期 id に固定されるため)
-            if (providedId && providedId !== panelId) {
-                logger.warn("Panel id prop change after mount is ignored.", { currentId: panelId, attemptedId: providedId })
-            }
-        }, [providedId, panelId])
-
-        const collapseFlags = useMemo(() => normalizeCollapsibleConfig(collapsible), [collapsible])
-        const isCollapsible = collapseFlags.collapseFromStart || collapseFlags.collapseFromEnd
-
-        useEffect(() => {
-            if (defaultCollapsed && !isCollapsible) {
-                logger.warn("Panel defaultCollapsed is ignored because collapsible configuration is not provided.", { panelId })
-            }
-        }, [defaultCollapsed, isCollapsible, panelId])
-
-        const registration = useMemo<PanelRegistration>(() => {
-            const normalized = normalizeSizeConfig(defaultSize) ?? { value: 50, unit: "percentage" as const }
-            return {
-                id: panelId,
-                ...toPreference(normalized),
-                minSize,
-                maxSize,
-                ...collapseFlags,
-                collapsed: isCollapsible && defaultCollapsed,
-                pixelAdjustPriority,
-                flexAdjustPriority,
-            }
-        }, [panelId, defaultSize, minSize, maxSize, collapseFlags, isCollapsible, defaultCollapsed, pixelAdjustPriority, flexAdjustPriority])
-
-        useLayoutEffect(() => {
-            registerPanel(registration)
-        }, [registerPanel, registration])
-
-        useLayoutEffect(() => {
-            // 登録と同じフェーズで解除する。パッシブ効果だと、同一コミット内で同じ id が
-            // 貼り替わったとき「新しい登録 → 古い解除」の順になり、パネルが状態から消えたまま戻らない
-            return () => {
-                unregisterPanel(panelId)
-            }
-        }, [unregisterPanel, panelId])
-
-        const panel = getPanel(panelId)
-        const size = panel?.size ?? 0
-        const isCollapsed = panel?.collapsed ?? false
-
-        /**
-         * Measure the rendered length and report it for the debug overlay.
-         * 描画後の実寸を計測し、デバッグオーバーレイへ報告する処理。
-         */
-        const containerSizeRef = useRef(containerSize)
-        containerSizeRef.current = containerSize
-        const measure = useCallback(() => {
-            const element = panelRef.current
-            if (!element) {
-                return
-            }
-            const pixelSize = getContainerSize(element, direction).border
-            reportPanelMeasurement(panelId, { pixelSize, percentageSize: toRoundedPercentage(pixelSize, containerSizeRef.current) })
-        }, [direction, panelId, reportPanelMeasurement])
-
-        useEffect(() => {
-            // 実測値はデバッグ表示専用であり、レイアウトへは戻さない。
-            // 表示していないときに監視すると、全パネルで無用な強制レイアウトを起こす
-            if (!showDebugInfo) {
-                reportPanelMeasurement(panelId, null)
-                return
-            }
-            const element = panelRef.current
-            if (!element || typeof ResizeObserver === "undefined") {
-                measure()
-                return
-            }
-            const observer = new ResizeObserver(measure)
-            observer.observe(element)
-            measure()
-            return () => {
-                observer.disconnect()
-                reportPanelMeasurement(panelId, null)
-            }
-        }, [showDebugInfo, measure, panelId, reportPanelMeasurement])
-
-        const panelStyle = useMemo<CSSProperties>(() => {
-            // 見た目に関わる既定値は利用者が上書きできる。
-            // `isolation` はパネル内部の z-index がハンドルより手前に出ないようにするための既定値だが、
-            // パネルの外まで覆う overlay (position: fixed の最大化表示など) を置きたい利用者は
-            // `isolation: "auto"` で降りられる (その場合、内容がハンドルを覆いうることを引き受ける)
-            const presentation: CSSProperties = { overflow: "hidden", isolation: "isolate" }
-            const collapsed: CSSProperties = isCollapsed ? { ...(direction === "horizontal" ? { width: "0px" } : { height: "0px" }), pointerEvents: "none", visibility: "hidden", display: "none" } : {}
-
-            return {
-                ...presentation,
-                ...style,
-                // ここから下はレイアウトの前提そのもの。利用者のスタイルやクラスで変わると配分結果と
-                // 描画が一致しなくなるため、最後に適用して上書きを受け付けない:
-                // flex の三つ組は配分器が決めた長さそのもの、margin はパネルの合計に含まれない隙間を作り、
-                // order は DOM 順と視覚順をずらす
-                ...resolvePanelFlex({ size, panel, registration, containerSize, isCollapsed }),
-                order: 0,
-                margin: 0,
-                // 内容を通常フローで内容ボックスいっぱいに伸ばすための入れ物 (パディングを効かせる唯一の形)
-                display: "flex",
-                flexDirection: "column",
-                position: "relative",
-                boxSizing: "border-box",
-                // 主軸の縮小をコンテンツの固有幅に妨げられないようにし、
-                // 上限側のクランプ (max-w-* のようなユーティリティクラスを含む) も受け付けない。
-                // 配分器が配った長さより短く描くと、状態と描画が食い違ったままハンドルが動かなくなる
-                minWidth: 0,
-                minHeight: 0,
-                maxWidth: "none",
-                maxHeight: "none",
-                ...(direction === "horizontal" ? { height: "100%" } : { width: "100%" }),
-                ...collapsed,
-            }
-        }, [size, direction, isCollapsed, panel, registration, containerSize, style])
-
-        const contentWrapperStyle = useMemo<CSSProperties>(
-            () => ({
-                // 内容は通常フローの伸縮子として置く。絶対配置にするとパディングボックスを基準にしてしまい、
-                // 利用者がパネルへ与えたパディングが何の効果も持たなくなる
-                flex: "1 1 auto",
-                position: "relative",
-                overflow: contentOverflow,
-                display: "flex",
-                flexDirection: "column",
-                minWidth: "0px",
-                minHeight: "0px",
-            }),
-            [contentOverflow],
-        )
-
-        return (
-            <div
-                {...elementProps}
-                ref={panelRef}
-                className={twMerge("panel", className)}
-                style={panelStyle}
-                data-panel-id={panelId}
-                data-panel-size={size}
-                data-panel-size-unit={panel?.sizeUnit ?? "percentage"}
-                data-panel-collapsible={isCollapsible}
-                data-panel-collapse-start={collapseFlags.collapseFromStart}
-                data-panel-collapse-end={collapseFlags.collapseFromEnd}
-                data-panel-collapsed={isCollapsed}
-                aria-hidden={isCollapsed}>
-                <div style={contentWrapperStyle}>{children}</div>
-                {showDebugInfo && <PanelDebugInfo panel={panel} containerAxisSize={containerSize} direction={direction} />}
-            </div>
-        )
-    },
-)

package/src/PanelDebugInfo.tsx

@@ -1,94 +0,0 @@
-/**
- * @file Debug info overlay component for panels
- * パネル用デバッグ情報オーバーレイコンポーネント
- */
-
-import { type CSSProperties, memo, useMemo } from "react"
-import { resolvePanelBounds } from "./allocateLayout"
-import type { PanelDirection, PanelLayoutData } from "./types"
-import { toRoundedPercentage } from "./utils"
-
-type PanelDebugInfoProps = {
-    panel: PanelLayoutData | undefined
-    containerAxisSize: number
-    direction: PanelDirection
-}
-
-type FormatPanelDebugInfoArgs = {
-    panel: PanelLayoutData | undefined
-    containerAxisSize: number
-    containerLabel: string
-}
-
-type FormattedPanelDebugInfo = {
-    sizeDisplay: string
-    preferenceDisplay: string
-    boundsDisplay: string
-    containerDisplay: string
-    headlineLabel: string
-    titleText: string
-}
-
-/**
- * Format one panel's allocation for the debug overlay.
- * デバッグ表示用に 1 枚のパネルの配分結果を整形する処理。
- *
- * @param args - Panel, container length and the axis label / パネル・コンテナ長・軸ラベル
- * @returns Display strings for the overlay / オーバーレイ表示用の文字列群
- */
-export const formatPanelDebugInfo = ({ panel, containerAxisSize, containerLabel }: FormatPanelDebugInfoArgs): FormattedPanelDebugInfo => {
-    if (!panel) {
-        return { sizeDisplay: "-", preferenceDisplay: "-", boundsDisplay: "-", containerDisplay: "-", headlineLabel: "Unregistered", titleText: "Unregistered" }
-    }
-
-    const isPixel = panel.sizeUnit === "pixels"
-    const sizeDisplay = `${panel.size.toFixed(3)}px / ${toRoundedPercentage(panel.size, containerAxisSize).toFixed(3)}%`
-    const preferenceDisplay = isPixel ? `${panel.preferredPixelSize.toFixed(3)}px` : `${panel.preferredPercentageSize.toFixed(3)}%`
-    const bounds = resolvePanelBounds(panel, containerAxisSize)
-    const boundsDisplay = `${bounds.min.toFixed(1)} - ${bounds.max.toFixed(1)}px`
-    const containerDisplay = Number.isFinite(containerAxisSize) ? `${containerAxisSize.toFixed(3)}px` : "-"
-    const headlineLabel = isPixel ? "Fixed" : "Flexible"
-    const titleText = [headlineLabel, `${containerLabel}: ${containerDisplay}`, `size: ${sizeDisplay}`, `preference: ${preferenceDisplay}`, `bounds: ${boundsDisplay}`].join("\n")
-
-    return { sizeDisplay, preferenceDisplay, boundsDisplay, containerDisplay, headlineLabel, titleText }
-}
-
-/**
- * Render the per-panel debug badge inside a panel.
- * パネル内にパネル単位のデバッグバッジを描画するコンポーネント。
- */
-export const PanelDebugInfo = memo(({ panel, containerAxisSize, direction }: PanelDebugInfoProps) => {
-    const containerLabel = direction === "horizontal" ? "container width" : "container height"
-    const { sizeDisplay, preferenceDisplay, boundsDisplay, containerDisplay, headlineLabel, titleText } = useMemo(() => formatPanelDebugInfo({ panel, containerAxisSize, containerLabel }), [panel, containerAxisSize, containerLabel])
-
-    const badgeStyle: CSSProperties = {
-        position: "absolute",
-        top: 2,
-        left: 2,
-        zIndex: 30,
-        pointerEvents: "none",
-        maxWidth: "calc(100% - 4px)",
-        padding: "2px 4px",
-        borderRadius: 4,
-        border: "1px solid rgba(255,255,255,0.1)",
-        backgroundColor: "rgba(15, 23, 42, 0.78)",
-        color: "#e2e8f0",
-        fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
-        fontSize: 10,
-        lineHeight: 1.35,
-        whiteSpace: "pre",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-    }
-
-    return (
-        <div style={badgeStyle} title={titleText} data-panel-debug-info="">
-            <div>
-                {headlineLabel} · {containerLabel}: {containerDisplay}
-            </div>
-            <div>size: {sizeDisplay}</div>
-            <div>preference: {preferenceDisplay}</div>
-            <div>bounds: {boundsDisplay}</div>
-        </div>
-    )
-})

package/src/PanelGroup.tsx

@@ -1,245 +0,0 @@
-/**
- * @file PanelGroup component for custom resizable panels
- * カスタムリサイズ可能パネルのための PanelGroup コンポーネント
- */
-
-import { lazy, Suspense, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
-import { twMerge } from "tailwind-merge"
-import { PanelGroupContext } from "./context"
-import type { DebugPanelSnapshot } from "./debugOverlayStore"
-import { useResizablePanels } from "./hooks"
-import type { PanelGroupProps, PanelLayoutData } from "./types"
-import { getContainerSize } from "./utils"
-
-// デバッグオーバーレイ (UI とストア) は dynamic import で遅延読み込みする。
-// showDebugInfo を使わないアプリのバンドルへオーバーレイ一式を含めず、ストア購読も発生させないための分離
-const LazyDebugOverlayGate = lazy(() => import("./GlobalDebugOverlay").then((module) => ({ default: module.GlobalDebugOverlayGate })))
-
-type DebugOverlayStoreModule = typeof import("./debugOverlayStore")
-
-/** Stable empty collections used while the debug overlay is off. デバッグ表示が無効な間に使う不変の空コレクション。 */
-const EMPTY_PANELS: ReadonlyArray<PanelLayoutData> = []
-const EMPTY_MEASUREMENTS: Record<string, never> = {}
-
-let debugGroupIdCounter = 0
-
-/**
- * Generate unique debug group identifier for panel groups without explicit IDs.
- * 明示的な ID を持たないパネルグループ用の一意なデバッググループ識別子を生成。
- */
-const generateDebugGroupId = () => {
-    debugGroupIdCounter += 1
-    return `panel-group-${debugGroupIdCounter}`
-}
-
-type ResizablePanelsContextValue = ReturnType<typeof useResizablePanels>["contextValue"]
-type LayoutConstraintViolation = NonNullable<ResizablePanelsContextValue["layoutConstraintViolation"]>
-type DebugPanelMeasurementMap = ResizablePanelsContextValue["panelMeasurements"]
-
-/**
- * Builds summary and detail labels for layout constraint placeholders.
- * レイアウト制約プレースホルダー用のサマリーと詳細ラベルを生成。
- */
-const buildConstraintCopy = (violation: LayoutConstraintViolation) => {
-    const isMinimum = violation.reason === "minimum-exceeded"
-    const summary = isMinimum ? "Layout unavailable: minimum panel sizes exceed the container." : "Layout unavailable: panels cannot fill the container with their maximum sizes."
-    const detail = isMinimum ? `Min required: ${Math.ceil(violation.totalMinimumSize)}px | Available: ${Math.floor(violation.availableContainerSize)}px` : `Max total: ${Math.floor(violation.totalMaximumSize)}px | Needed: ${Math.floor(violation.availableContainerSize)}px`
-    return { summary, detail }
-}
-
-/**
- * Synchronizes measured panel dimensions into overlay panel descriptors.
- * 測定済みパネル寸法をオーバーレイ用パネル情報へ同期。
- */
-const mergePanelMeasurements = (panels: ReadonlyArray<PanelLayoutData>, measurementMap: DebugPanelMeasurementMap): DebugPanelSnapshot[] =>
-    panels.map((panel) => {
-        const measurement = measurementMap[panel.id]
-        if (!measurement) {
-            return panel
-        }
-        return { ...panel, measuredPixelSize: measurement.pixelSize, measuredPercentageSize: measurement.percentageSize }
-    })
-
-/**
- * Measures overlay container dimensions with graceful fallbacks.
- * フォールバックを考慮しつつオーバーレイ用コンテナ寸法を計測。
- */
-const measureDebugOverlayContainerSize = (element: HTMLElement, fallbackWidth?: number, fallbackHeight?: number) => {
-    const horizontal = getContainerSize(element, "horizontal")
-    const vertical = getContainerSize(element, "vertical")
-    const rect = element.getBoundingClientRect()
-    const width = horizontal.content > 0 ? horizontal.content : (fallbackWidth ?? rect.width)
-    const height = vertical.content > 0 ? vertical.content : (fallbackHeight ?? rect.height)
-    return { width, height }
-}
-
-/**
- * Provide layout context and container for coordinated panels.
- * 連動するパネルのためのレイアウトコンテキストとコンテナを提供するコンポーネント。
- */
-export const PanelGroup = (props: PanelGroupProps) => {
-    const { id, className, style, children, direction, onLayout, autoSaveId, showDebugInfo, ...elementProps } = props
-    const { groupRef, contextValue, groupStyle } = useResizablePanels(props)
-
-    const [debugOverlayContainerSize, setDebugOverlayContainerSize] = useState({ width: 0, height: 0 })
-
-    const constraintViolation = contextValue.layoutConstraintViolation
-    const shouldRenderPlaceholder = Boolean(constraintViolation)
-    const placeholderInner = useMemo(() => {
-        if (!constraintViolation) {
-            return null
-        }
-        const { summary, detail } = buildConstraintCopy(constraintViolation)
-        return (
-            <div
-                className="flex w-full flex-1 flex-col items-center justify-center gap-2 rounded-lg border border-slate-300 border-dashed bg-slate-100/70 px-6 py-8 text-center text-slate-600 text-sm dark:border-slate-600 dark:bg-slate-800/50 dark:text-slate-200"
-                data-panel-group-placeholder="constraint-violation">
-                <span>{summary}</span>
-                <span className="text-slate-500 text-xs dark:text-slate-400">{detail}</span>
-            </div>
-        )
-    }, [constraintViolation])
-
-    // useRef の引数は毎レンダー評価されるため、そこで採番するとレンダーが純粋でなくなる
-    const debugGroupIdRef = useRef<string | null>(null)
-    if (debugGroupIdRef.current === null) {
-        debugGroupIdRef.current = id ?? generateDebugGroupId()
-    }
-    const debugGroupId = debugGroupIdRef.current
-    const debugDisplayName = id ?? debugGroupId
-
-    const shouldShowDebugOverlay = contextValue.showDebugInfo && contextValue.panels.length > 0
-    // 無効時に空のリテラルを作ると参照が毎レンダー変わり、下流の useMemo が無駄に再計算される
-    const debugOverlayPanels = shouldShowDebugOverlay ? contextValue.panels : EMPTY_PANELS
-    const debugOverlayMeasurementMap = shouldShowDebugOverlay ? contextValue.panelMeasurements : EMPTY_MEASUREMENTS
-    const debugOverlayHandles = useMemo(() => {
-        if (!shouldShowDebugOverlay) {
-            return []
-        }
-        const handles = Object.values(contextValue.handleMeasurements)
-        if (handles.length <= 1) {
-            return handles
-        }
-        return handles.slice().sort((a, b) => a.id.localeCompare(b.id))
-    }, [contextValue.handleMeasurements, shouldShowDebugOverlay])
-    const debugOverlayContainerWidth = debugOverlayContainerSize.width
-    const debugOverlayContainerHeight = debugOverlayContainerSize.height
-
-    useLayoutEffect(() => {
-        // shouldShowDebugOverlay と groupRef に応じてデバッグオーバーレイ用コンテナ寸法を監視
-        if (!shouldShowDebugOverlay) {
-            setDebugOverlayContainerSize({ width: 0, height: 0 })
-            return
-        }
-        if (typeof window === "undefined" || typeof ResizeObserver === "undefined") {
-            return
-        }
-        const element = groupRef.current
-        if (!element) {
-            return
-        }
-        const updateSize = (nextSize: { width: number; height: number }) => {
-            setDebugOverlayContainerSize((previous) => (previous.width === nextSize.width && previous.height === nextSize.height ? previous : nextSize))
-        }
-        const observer = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.target !== element) {
-                    continue
-                }
-                const nextSize = measureDebugOverlayContainerSize(element, entry.contentRect.width, entry.contentRect.height)
-                updateSize(nextSize)
-            }
-        })
-        observer.observe(element)
-        updateSize(measureDebugOverlayContainerSize(element))
-        return () => {
-            observer.disconnect()
-        }
-    }, [groupRef, shouldShowDebugOverlay])
-
-    const debugOverlayPanelsWithMeasurements = useMemo(() => mergePanelMeasurements(debugOverlayPanels, debugOverlayMeasurementMap), [debugOverlayPanels, debugOverlayMeasurementMap])
-
-    useEffect(() => {
-        // shouldShowDebugOverlay と debugGroupId に応じてデバッグオーバーレイ有効状態を同期
-        // ストアは遅延読み込みのため、有効化されるまで import しない (未読込なら解除処理も不要)
-        if (!shouldShowDebugOverlay) {
-            return
-        }
-
-        let cancelled = false
-        let loadedStore: DebugOverlayStoreModule | null = null
-        import("./debugOverlayStore").then((storeModule) => {
-            if (cancelled) {
-                return
-            }
-            loadedStore = storeModule
-            storeModule.enableDebugOverlayGroup(debugGroupId)
-        })
-
-        return () => {
-            cancelled = true
-            if (loadedStore) {
-                loadedStore.disableDebugOverlayGroup(debugGroupId)
-                loadedStore.removeDebugOverlayGroup(debugGroupId)
-            }
-        }
-    }, [shouldShowDebugOverlay, debugGroupId])
-
-    useEffect(() => {
-        // 依存配列の変化ごとに最新のオーバーレイ集計をストアへ送出
-        if (!shouldShowDebugOverlay) {
-            return
-        }
-
-        let cancelled = false
-        import("./debugOverlayStore").then((storeModule) => {
-            if (cancelled) {
-                return
-            }
-            storeModule.updateDebugOverlayGroup(debugGroupId, {
-                displayName: debugDisplayName,
-                direction,
-                containerSize: {
-                    width: debugOverlayContainerWidth,
-                    height: debugOverlayContainerHeight,
-                },
-                panels: debugOverlayPanelsWithMeasurements,
-                handles: debugOverlayHandles,
-            })
-        })
-        return () => {
-            cancelled = true
-        }
-    }, [shouldShowDebugOverlay, debugGroupId, debugDisplayName, direction, debugOverlayContainerWidth, debugOverlayContainerHeight, debugOverlayPanelsWithMeasurements, debugOverlayHandles])
-
-    return (
-        <PanelGroupContext.Provider value={contextValue}>
-            <div {...elementProps} ref={groupRef} className={twMerge("panel-group", direction === "horizontal" ? "flex-row" : "flex-col", className)} style={groupStyle} data-panel-group-id={id} data-panel-group-direction={direction}>
-                {children}
-                {shouldRenderPlaceholder && placeholderInner ? (
-                    <div
-                        className="pointer-events-auto"
-                        style={{
-                            position: "absolute",
-                            inset: 0,
-                            // パネル内部要素 (VirtualScroll のスクロールバー z-50 等) を完全に隠蔽するため zIndex を 60 に設定
-                            zIndex: 60,
-                            display: "flex",
-                            flexDirection: "column",
-                            alignItems: "center",
-                            justifyContent: "center",
-                            backgroundColor: "rgba(248, 250, 252, 0.82)",
-                            backdropFilter: "blur(2px)",
-                        }}>
-                        {placeholderInner}
-                    </div>
-                ) : null}
-            </div>
-            {shouldShowDebugOverlay && (
-                <Suspense fallback={null}>
-                    <LazyDebugOverlayGate groupId={debugGroupId} />
-                </Suspense>
-            )}
-        </PanelGroupContext.Provider>
-    )
-}