@aiquants/resize-panels 2.0.0 → 2.0.1

package/src/GlobalDebugOverlay.tsx

@@ -1,284 +0,0 @@
-/**
- * @file Global debug overlay for resizable panel groups.
- * リサイズパネルグループ用のグローバルデバッグオーバーレイ。
- *
- * PanelGroup 本体から dynamic import で遅延読み込みされる。
- * showDebugInfo を使わないアプリのバンドルにオーバーレイ UI とストア購読を含めないための分離。
- */
-
-import { useState } from "react"
-import { createPortal } from "react-dom"
-import { useDebugOverlayOwnerId, useDebugOverlaySnapshot } from "./debugOverlayStore"
-import { PANEL_SNAP_THRESHOLD } from "./types"
-
-const formatNumericValue = (value: number | null | undefined, suffix: string) => {
-    if (typeof value !== "number" || !Number.isFinite(value)) {
-        return "—"
-    }
-    const clamped = value < 0 ? 0 : value
-    return `${clamped.toFixed(8)}${suffix}`
-}
-
-const OVERLAY_CONTAINER_BASE_STYLE = {
-    position: "fixed",
-    left: "50%",
-    bottom: "20px",
-    transform: "translate(-50%, 0)",
-    zIndex: 100,
-    maxWidth: "min(90vw, 1120px)",
-    width: "100%",
-    borderRadius: "14px",
-    backgroundColor: "rgba(15, 23, 42, 0.72)",
-    color: "#e2e8f0",
-    fontFamily: "monospace",
-    fontSize: "11px",
-    lineHeight: 1.6,
-    boxShadow: "0 22px 45px rgba(15,23,42,0.45)",
-    border: "1px solid rgba(148, 163, 184, 0.22)",
-    backdropFilter: "blur(10px)",
-    WebkitBackdropFilter: "blur(10px)",
-    pointerEvents: "auto",
-    overflow: "auto",
-} as const
-
-const OVERLAY_HEADER_STYLE = {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    flexWrap: "wrap",
-    gap: "12px",
-} as const
-
-const OVERLAY_SUMMARY_STYLE = {
-    display: "flex",
-    flexDirection: "column",
-    gap: "4px",
-} as const
-
-const OVERLAY_BUTTON_BASE_STYLE = {
-    padding: "6px 10px",
-    borderRadius: "9999px",
-    border: "1px solid rgba(148, 163, 184, 0.35)",
-    color: "#e2e8f0",
-    fontWeight: 600,
-    fontSize: "10px",
-    letterSpacing: "0.03em",
-    textTransform: "uppercase" as const,
-    cursor: "pointer",
-    transition: "background-color 0.18s ease, border-color 0.18s ease",
-} as const
-
-const OVERLAY_GROUP_CARD_STYLE = {
-    padding: "10px 12px",
-    borderRadius: "10px",
-    backgroundColor: "rgba(30, 41, 59, 0.55)",
-    border: "1px solid rgba(148, 163, 184, 0.18)",
-    display: "flex",
-    flexDirection: "column",
-    gap: "10px",
-} as const
-
-const OVERLAY_PANEL_CARD_STYLE = {
-    padding: "8px 10px",
-    borderRadius: "8px",
-    backgroundColor: "rgba(15, 23, 42, 0.55)",
-    border: "1px solid rgba(148, 163, 184, 0.16)",
-    display: "flex",
-    flexDirection: "column",
-    gap: "4px",
-} as const
-
-const OVERLAY_PANEL_HEADER_STYLE = {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center",
-    gap: "6px",
-} as const
-
-const OVERLAY_PANEL_GRID_STYLE = {
-    display: "grid",
-    gridTemplateColumns: "auto 1fr",
-    gap: "2px 10px",
-    color: "#e2e8f0",
-} as const
-
-const OVERLAY_STATUS_BADGE_STYLE = {
-    padding: "2px 6px",
-    borderRadius: "9999px",
-    fontSize: "10px",
-    textTransform: "uppercase" as const,
-} as const
-
-/**
- * Render the overlay only for the group that currently owns it.
- * オーバーレイの所有権を持つグループの場合のみ描画するゲート。
- * 所有権ストアの購読をこの遅延モジュール内へ閉じ込め、非デバッグ利用時の購読を発生させない。
- */
-export const GlobalDebugOverlayGate = ({ groupId }: { groupId: string }) => {
-    const ownerId = useDebugOverlayOwnerId()
-    if (ownerId !== groupId) {
-        return null
-    }
-    return <GlobalDebugOverlay />
-}
-
-/**
- * Render global debug overlay displaying state for all active panel groups.
- * すべてのアクティブなパネルグループの状態を表示するグローバルデバッグオーバーレイを描画。
- */
-export const GlobalDebugOverlay = () => {
-    const debugOverlaySnapshot = useDebugOverlaySnapshot()
-    const debugOverlayGroups = debugOverlaySnapshot.groups
-    const [isCollapsed, setIsCollapsed] = useState(true)
-
-    if (debugOverlayGroups.length === 0) {
-        return null
-    }
-
-    if (typeof document === "undefined") {
-        return null
-    }
-
-    const totalPanels = debugOverlayGroups.reduce((sum, group) => sum + group.panels.length, 0)
-    const totalHandles = debugOverlayGroups.reduce((sum, group) => sum + (group.handles?.length ?? 0), 0)
-
-    const toggleCollapsed = () => setIsCollapsed((previous) => !previous)
-
-    const debugOverlayContent = (
-        <div
-            style={{
-                ...OVERLAY_CONTAINER_BASE_STYLE,
-                padding: isCollapsed ? "10px 18px" : "14px 18px",
-                maxHeight: isCollapsed ? "52px" : "min(65vh, 520px)",
-                transition: "max-height 0.24s ease, padding 0.24s ease",
-            }}>
-            <div
-                style={{
-                    ...OVERLAY_HEADER_STYLE,
-                    marginBottom: isCollapsed ? 0 : "12px",
-                }}>
-                <div style={OVERLAY_SUMMARY_STYLE}>
-                    <span
-                        style={{
-                            fontWeight: 700,
-                            fontSize: "12px",
-                            letterSpacing: "0.03em",
-                        }}>
-                        Panel Overview
-                    </span>
-                    <span style={{ color: "#cbd5f5" }}>
-                        groups: {debugOverlayGroups.length} / panels: {totalPanels} / resizers: {totalHandles}
-                    </span>
-                </div>
-                <button
-                    type="button"
-                    onClick={toggleCollapsed}
-                    style={{
-                        ...OVERLAY_BUTTON_BASE_STYLE,
-                        backgroundColor: isCollapsed ? "rgba(59, 130, 246, 0.2)" : "rgba(71, 85, 105, 0.45)",
-                    }}
-                    title={isCollapsed ? "Panel Overview を開く" : "Panel Overview を閉じる"}>
-                    {isCollapsed ? "開く" : "閉じる"}
-                </button>
-            </div>
-            {!isCollapsed && (
-                <div
-                    style={{
-                        display: "flex",
-                        flexDirection: "column",
-                        gap: "12px",
-                        maxHeight: "45vh",
-                        overflowY: "auto",
-                        paddingRight: "6px",
-                    }}>
-                    {debugOverlayGroups.map((group, groupIndex) => {
-                        const axisSize = group.direction === "horizontal" ? group.containerSize.width : group.containerSize.height
-                        return (
-                            <div key={group.groupId} style={OVERLAY_GROUP_CARD_STYLE}>
-                                <div
-                                    style={{
-                                        ...OVERLAY_PANEL_HEADER_STYLE,
-                                        flexWrap: "wrap",
-                                        gap: "10px",
-                                        color: "#dbeafe",
-                                    }}>
-                                    <span
-                                        style={{
-                                            fontWeight: 600,
-                                            fontSize: "11px",
-                                            letterSpacing: "0.02em",
-                                            textTransform: "uppercase",
-                                        }}>
-                                        group {groupIndex + 1}: {group.displayName}
-                                    </span>
-                                    <span>
-                                        direction: {group.direction} / container: {formatNumericValue(group.containerSize.width, "px")} × {formatNumericValue(group.containerSize.height, "px")}
-                                    </span>
-                                </div>
-                                <div
-                                    style={{
-                                        display: "grid",
-                                        gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))",
-                                        gap: "10px",
-                                    }}>
-                                    {group.panels.map((panel, panelIndex) => {
-                                        const measuredPixel = panel.measuredPixelSize ?? panel.size
-                                        const statePixel = panel.size
-                                        const statePixelLabel = formatNumericValue(statePixel, "px")
-                                        const statePercentage = axisSize > 0 ? (panel.size / axisSize) * 100 : undefined
-                                        const measuredPercentage = panel.measuredPercentageSize !== undefined ? panel.measuredPercentageSize : axisSize > 0 ? (measuredPixel / axisSize) * 100 : undefined
-                                        const isHidden = panel.collapsed || measuredPixel <= PANEL_SNAP_THRESHOLD
-                                        const statusLabel = panel.collapsed ? "collapsed" : isHidden ? "hidden" : "visible"
-                                        const percentageLabel = formatNumericValue(statePercentage, "%")
-                                        const measuredPercentageLabel = formatNumericValue(measuredPercentage, "%")
-                                        const measuredPixelLabel = formatNumericValue(measuredPixel, "px")
-
-                                        return (
-                                            <div key={panel.id || panelIndex} style={OVERLAY_PANEL_CARD_STYLE}>
-                                                <div style={OVERLAY_PANEL_HEADER_STYLE}>
-                                                    <span style={{ flex: 1, minWidth: 0, overflow: "hidden", textOverflow: "ellipsis" }}>{panel.id}</span>
-                                                    <span
-                                                        style={{
-                                                            ...OVERLAY_STATUS_BADGE_STYLE,
-                                                            backgroundColor: panel.collapsed ? "rgba(251, 113, 133, 0.25)" : isHidden ? "rgba(250, 204, 21, 0.25)" : "rgba(74, 222, 128, 0.25)",
-                                                            color: panel.collapsed ? "#fecdd3" : isHidden ? "#fef08a" : "#bbf7d0",
-                                                        }}>
-                                                        {statusLabel}
-                                                    </span>
-                                                </div>
-                                                <div style={OVERLAY_PANEL_GRID_STYLE}>
-                                                    <span>size (state):</span>
-                                                    <span>{statePixelLabel}</span>
-                                                    <span>size (measured):</span>
-                                                    <span>{measuredPixelLabel}</span>
-                                                    <span>percentage (state):</span>
-                                                    <span>{percentageLabel}</span>
-                                                    <span>preference:</span>
-                                                    <span>{panel.sizeUnit === "pixels" ? formatNumericValue(panel.preferredPixelSize, "px") : formatNumericValue(panel.preferredPercentageSize, "%")}</span>
-                                                    <span>percentage (measured):</span>
-                                                    <span>{measuredPercentageLabel}</span>
-                                                    <span>unit:</span>
-                                                    <span>{panel.sizeUnit}</span>
-                                                    <span>min:</span>
-                                                    <span>{panel.minSize !== undefined ? JSON.stringify(panel.minSize) : "—"}</span>
-                                                    <span>max:</span>
-                                                    <span>{panel.maxSize !== undefined ? JSON.stringify(panel.maxSize) : "—"}</span>
-                                                    <span>priority:</span>
-                                                    <span>{panel.pixelAdjustPriority ?? "—"}</span>
-                                                    <span>flex priority:</span>
-                                                    <span>{panel.flexAdjustPriority ?? "—"}</span>
-                                                </div>
-                                            </div>
-                                        )
-                                    })}
-                                </div>
-                            </div>
-                        )
-                    })}
-                </div>
-            )}
-        </div>
-    )
-
-    return createPortal(debugOverlayContent, document.body)
-}

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>
-    )
-})