@aiquants/resize-panels 1.8.1 → 2.0.0

package/src/utils.ts

@@ -4,7 +4,7 @@
  */
 
 import { roundHalfToEven } from "./roundHalfToEven"
-import { type ContainerAxisMeasurement, type FlexibleSize, PANEL_COLLAPSE_THRESHOLD_MAX, PANEL_COLLAPSE_THRESHOLD_RATIO, PANEL_MIN_SNAP_THRESHOLD, PANEL_SNAP_THRESHOLD, type PanelDirection, type PanelLayoutData, type SizeConfig, type SizeUnit } from "./types"
+import { type ContainerAxisMeasurement, type FlexibleSize, PANEL_COLLAPSE_THRESHOLD_MAX, PANEL_COLLAPSE_THRESHOLD_RATIO, PANEL_SNAP_THRESHOLD, type PanelDirection, type PersistedPanelSize, type SizeConfig, type SizeUnit } from "./types"
 
 /**
  * Number of significant fractional digits to preserve when rounding percentage-based sizes.
@@ -13,23 +13,30 @@ import { type ContainerAxisMeasurement, type FlexibleSize, PANEL_COLLAPSE_THRESH
 export const PERCENTAGE_DIGITS = 6
 
 /**
- * Convert a pixel measurement to a percentage of the container using banker’s rounding.
+ * Convert a pixel measurement to a percentage of the container using banker's rounding.
  * ピクセル寸法をバンカーズラウンディングでコンテナ比率のパーセンテージへ変換する。
+ *
+ * @param size - Length in pixels / 長さ (px)
+ * @param base - Container length the percentage is relative to / 基準となるコンテナ長
+ * @returns Percentage of the container, 0 when the base is not positive / コンテナ比 (%)、基準が非正なら 0
  */
 export const toRoundedPercentage = (size: number, base: number): number => {
     if (base <= 0) {
         return 0
     }
-    const percentage = roundHalfToEven((size / base) * 100, PERCENTAGE_DIGITS)
-    return percentage
+    return roundHalfToEven((size / base) * 100, PERCENTAGE_DIGITS)
 }
 
 /**
  * Translate a percentage-based size back into pixels relative to the container.
  * パーセンテージ指定のサイズをコンテナ基準のピクセル値へ変換する。
+ *
+ * @param percentage - Share of the container in percent / コンテナ比 (%)
+ * @param base - Container length the percentage is relative to / 基準となるコンテナ長
+ * @returns Length in pixels / 長さ (px)
  */
-export const percentageToPixels = (percentage: number | undefined, base: number): number => {
-    if (!percentage || base <= 0) {
+export const percentageToPixels = (percentage: number, base: number): number => {
+    if (base <= 0) {
         return 0
     }
     return (percentage / 100) * base
@@ -38,9 +45,15 @@ export const percentageToPixels = (percentage: number | undefined, base: number)
 /**
  * Normalize a flexible size into a size configuration object.
  * 柔軟なサイズ指定をサイズ設定オブジェクトへ正規化する。
+ *
+ * @param size - Author-provided size / 利用者が指定したサイズ
+ * @param defaultUnit - Unit applied to bare numbers / 数値のみの指定に適用する単位
+ * @returns Normalized configuration, or undefined when nothing was provided / 正規化後の設定、未指定なら undefined
  */
 export const normalizeSizeConfig = (size: FlexibleSize | undefined, defaultUnit: SizeUnit = "percentage"): SizeConfig | undefined => {
-    if (size === undefined) return undefined
+    if (size === undefined) {
+        return undefined
+    }
     if (typeof size === "number") {
         return { value: size, unit: defaultUnit }
     }
@@ -50,9 +63,16 @@ export const normalizeSizeConfig = (size: FlexibleSize | undefined, defaultUnit:
 /**
  * Convert flexible size constraints into pixel values based on container size.
  * 柔軟サイズ制約をコンテナサイズ基準のピクセル値へ変換する。
+ *
+ * @param size - Constraint to resolve; bare numbers are percentages / 解決する制約 (数値のみの指定はパーセンテージ)
+ * @param defaultValue - Value used when the constraint is absent / 制約が無い場合の値
+ * @param containerSize - Container content-box length / コンテナ内容領域長
+ * @returns Constraint in pixels / ピクセル換算した制約
  */
 export const getConstraintInPixels = (size: FlexibleSize | undefined, defaultValue: number, containerSize: number): number => {
-    if (!size) return defaultValue
+    if (size === undefined) {
+        return defaultValue
+    }
     if (typeof size === "number") {
         return (size / 100) * containerSize
     }
@@ -65,6 +85,11 @@ export const getConstraintInPixels = (size: FlexibleSize | undefined, defaultVal
 /**
  * Clamp a numeric value between the provided bounds.
  * 数値を指定した範囲に収めるためのクリッピング処理。
+ *
+ * @param value - Value to clamp / 収める値
+ * @param min - Lower bound / 下限
+ * @param max - Upper bound / 上限
+ * @returns Clamped value / 範囲内へ収めた値
  */
 export const clamp = (value: number, min: number, max: number): number => {
     return Math.min(Math.max(value, min), max)
@@ -73,205 +98,221 @@ export const clamp = (value: number, min: number, max: number): number => {
 /**
  * Derive a snap-to-zero threshold from the container axis length using shared heuristics.
  * 共通ヒューリスティクスに基づきコンテナ軸長からゼロスナップ閾値を算出する。
+ *
+ * @param axisSize - Container content-box length along the axis / 軸方向のコンテナ内容領域長
+ * @returns Threshold in pixels below which a panel snaps closed / 閉じたとみなすピクセル閾値
  */
 export const calculateSnapThreshold = (axisSize: number): number => {
     if (!Number.isFinite(axisSize) || axisSize <= 0) {
-        return PANEL_MIN_SNAP_THRESHOLD
+        return 0
     }
-    const thresholdFromRatio = axisSize * PANEL_COLLAPSE_THRESHOLD_RATIO
-    const cappedThreshold = Math.min(PANEL_SNAP_THRESHOLD, PANEL_COLLAPSE_THRESHOLD_MAX, thresholdFromRatio)
-    return Math.max(PANEL_MIN_SNAP_THRESHOLD, cappedThreshold)
+    return Math.max(0, Math.min(PANEL_SNAP_THRESHOLD, PANEL_COLLAPSE_THRESHOLD_MAX, axisSize * PANEL_COLLAPSE_THRESHOLD_RATIO))
 }
 
 /**
- * Adjust pixel-based panels in priority order to absorb remaining space.
- * 残余スペースを吸収するためにピクセル基準パネルを優先度順に調整する。
+ * Parse a CSS pixel string and return the numeric portion.
+ * CSS ピクセル表現から数値を抽出する処理。
  */
-type AdjustPixelOptions = {
-    enforceAutoMinSize?: boolean
+const parsePixelValue = (value: string | null | undefined): number => {
+    if (!value) {
+        return 0
+    }
+    const parsed = Number.parseFloat(value)
+    return Number.isFinite(parsed) ? parsed : 0
 }
 
-export const adjustPixelPanelsByPriority = (panels: PanelLayoutData[], sizeDiff: number, containerSize: number, options: AdjustPixelOptions = {}): number => {
-    if (Math.abs(sizeDiff) <= 0) {
-        return sizeDiff
-    }
+/**
+ * Measure a container along one axis, returning its content-box and border-box lengths.
+ * 指定軸でコンテナを計測し、内容領域長と境界領域長を返す処理。
+ *
+ * The content box is the authority for every layout number in this package: a panel's `flex-basis` resolves
+ * against it, so the allocator must fill exactly this length for the rendered geometry and the reducer state
+ * to agree. The measurement is therefore taken in LAYOUT pixels — `getBoundingClientRect` reports the visual
+ * rect, so a scaled ancestor would otherwise make the group allocate a container it does not have.
+ * このパッケージのレイアウト数値の基準は内容領域である。パネルの `flex-basis` はこの領域に解決されるため、
+ * 描画結果とリデューサー状態を一致させるには配分器がこの長さを満たす必要がある。計測は**レイアウトピクセル**で
+ * 行う: `getBoundingClientRect` は視覚上の矩形を返すため、拡大縮小された祖先の下では存在しない長さを配ってしまう。
+ *
+ * @param element - Element to measure / 計測対象の要素
+ * @param direction - Axis to measure along / 計測する軸
+ * @param entry - Observation that triggered the measurement, when it came from a ResizeObserver / 計測契機となった観測結果
+ * @returns Content-box and border-box lengths in pixels / 内容領域長と境界領域長 (px)
+ */
+export const getContainerSize = (element: HTMLElement, direction: PanelDirection, entry?: ResizeObserverEntry): ContainerAxisMeasurement => {
+    const isHorizontal = direction === "horizontal"
+    const styles = typeof window !== "undefined" ? window.getComputedStyle(element) : null
+    const padding = styles ? (isHorizontal ? parsePixelValue(styles.paddingLeft) + parsePixelValue(styles.paddingRight) : parsePixelValue(styles.paddingTop) + parsePixelValue(styles.paddingBottom)) : 0
+    const borders = styles ? (isHorizontal ? parsePixelValue(styles.borderLeftWidth) + parsePixelValue(styles.borderRightWidth) : parsePixelValue(styles.borderTopWidth) + parsePixelValue(styles.borderBottomWidth)) : 0
 
-    const enforceAutoMinSize = options.enforceAutoMinSize ?? false
+    // ResizeObserver の内容ボックス寸法はレイアウトピクセルの厳密値なので、得られるときは最優先で使う
+    const observedContent = entry?.contentBoxSize?.[0]
+    const observed = observedContent ? (isHorizontal ? observedContent.inlineSize : observedContent.blockSize) : undefined
+    // clientWidth / clientHeight もレイアウトピクセルだが整数に丸められる。端数を持つコンテナのために
+    // 内容ボックス寸法を優先し、無い環境でのみこちらへ落とす
+    const clientLength = isHorizontal ? element.clientWidth : element.clientHeight
+    const fallback = clientLength > 0 ? Math.max(0, clientLength - padding) : Math.max(0, (isHorizontal ? element.offsetWidth : element.offsetHeight) - padding - borders)
+    const content = observed ?? fallback
 
-    // ピクセル指定パネルを抽出してインデックスを保持
-    const pixelPanels = panels.map((panel, index) => ({ panel, index })).filter(({ panel }) => !panel.collapsed && (panel.sizeUnit === "pixels" || panel.originalPixelSize !== undefined))
+    return { content: Math.max(0, content), border: Math.max(0, content + padding + borders) }
+}
 
-    if (pixelPanels.length === 0) {
-        return sizeDiff
-    }
+/**
+ * Selector that identifies a panel group element.
+ * パネルグループ要素を特定するセレクタ。
+ */
+const GROUP_SELECTOR = "[data-panel-group-direction]"
 
-    // 優先度順にソート (優先度が同じ場合はインデックス順)
-    const isGrowing = sizeDiff > 0
-    const sortedPanels = [...pixelPanels].sort((a, b) => {
-        const priorityA = a.panel.pixelAdjustPriority ?? a.index + 1
-        const priorityB = b.panel.pixelAdjustPriority ?? b.index + 1
-        if (priorityA === priorityB) {
-            return isGrowing ? b.index - a.index : a.index - b.index
-        }
-        return isGrowing ? priorityB - priorityA : priorityA - priorityB
-    })
+/**
+ * Selector that matches the elements a group lays out: its panels and its handle anchors.
+ * グループが配置する要素 (パネルとハンドルのアンカー) に一致するセレクタ。
+ */
+export const LAYOUT_ELEMENT_SELECTOR = "[data-panel-id], [data-resize-handle-anchor]"
 
-    let remaining = sizeDiff
+/**
+ * Selector that matches a panel element.
+ * パネル要素に一致するセレクタ。
+ */
+const PANEL_SELECTOR = "[data-panel-id]"
 
-    /**
-     * Execute a single adjustment pass for pixel panels.
-     * ピクセルパネル調整処理
-     */
-    const adjustPass = (respectPreferred: boolean) => {
-        for (const { index } of sortedPanels) {
-            if (Math.abs(remaining) <= 0) {
-                break
-            }
+/**
+ * Resolve the innermost panel group that owns an element.
+ * ある要素を所有する最も内側のパネルグループを解決する処理。
+ *
+ * The owner is never simply the parent: a wrapper element (including `display: contents`, which flex layout
+ * flattens away) sits between the group and its panels without changing the geometry, and nested groups make
+ * "the closest group" the only answer that is right in both directions.
+ * 所有者は単なる親要素ではない。中間要素 (フレックスレイアウトが畳む `display: contents` を含む) は幾何を
+ * 変えずにグループとパネルの間へ入り込み、入れ子グループもあるため「最も近いグループ」だけが正解となる。
+ *
+ * @param element - Element to resolve the owner for / 所有者を解決する対象の要素
+ * @returns Owning group element, or null when the element is outside every group / 所有するグループ要素、どのグループにも属さないなら null
+ */
+export const findOwningGroup = (element: HTMLElement | null | undefined): HTMLElement | null => element?.closest<HTMLElement>(GROUP_SELECTOR) ?? null
 
-            const panel = panels[index]
-            if (!panel || panel.collapsed) {
+/**
+ * Collect the panels and handle anchors a group owns, in document order.
+ * グループが所有するパネルとハンドルのアンカーを、文書順で収集する処理。
+ *
+ * Direct children are not enough: a wrapper (including `display: contents`, which flex layout flattens away)
+ * leaves the geometry intact while hiding the panels from a sibling scan, and the handle would silently lose
+ * its neighbours.
+ * 直下の子だけでは足りない。中間要素 (フレックスレイアウトが畳む `display: contents` を含む) があると幾何は
+ * 保たれたままパネルが兄弟走査から消え、ハンドルが隣接パネルを見失う。
+ *
+ * @param group - Group element / グループ要素
+ * @returns Owned panel and anchor elements in document order / 所有するパネル・アンカー要素 (文書順)
+ */
+export const getGroupLayoutElements = (group: HTMLElement): HTMLElement[] =>
+    Array.from(group.querySelectorAll<HTMLElement>(LAYOUT_ELEMENT_SELECTOR)).filter((element) => {
+        if (findOwningGroup(element) !== group) {
+            return false
+        }
+        // `data-panel-id` は他パッケージも出力する。パネルの中に現れたものを配置要素と見なすと、
+        // ハンドルが本物の隣を見失って動かなくなる
+        const enclosingPanel = element.parentElement?.closest<HTMLElement>(PANEL_SELECTOR)
+        return !(enclosingPanel && group.contains(enclosingPanel))
+    })
+
+/**
+ * Report whether a DOM mutation touched an element the group lays out.
+ * DOM の変更がグループの配置要素に触れたかどうかを判定する処理。
+ *
+ * Content inside a panel changes constantly (a virtualised list recycles rows every frame), so a group-wide
+ * rescan on every mutation costs time proportional to the whole subtree for changes that can never move a
+ * panel. Only additions and removals that carry a layout element can.
+ * パネルの内容は絶え間なく変わる (仮想化リストは毎フレーム行を入れ替える) ため、変更のたびにグループ全体を
+ * 走査すると、パネルを動かしようのない変更に対して部分木全体に比例した時間を払う。配置要素を含む
+ * 追加・削除だけがパネルを動かしうる。
+ *
+ * @param records - Mutation records delivered by the observer / オブザーバーが届けた変更記録
+ * @returns True when at least one record added or removed a layout element / 配置要素の追加・削除が 1 件でもあれば true
+ */
+export const touchesLayoutElements = (records: ReadonlyArray<MutationRecord>): boolean => {
+    const carriesLayoutElement = (nodes: NodeList): boolean => {
+        for (const node of Array.from(nodes)) {
+            if (!(node instanceof Element)) {
                 continue
             }
-
-            // パネルの最小・最大サイズをピクセル値へ変換
-            // bare number は他の全経路 (getConstraintInPixels) と同じくパーセンテージとして解釈する
-            const minSizeFromConstraint = getConstraintInPixels(panel.minSize, 0, containerSize)
-            const maxSize = getConstraintInPixels(panel.maxSize, containerSize, containerSize)
-            const autoMinSize = enforceAutoMinSize ? getConstraintInPixels(panel.autoMinSize, 0, containerSize) : 0
-            const minSize = Math.max(minSizeFromConstraint, autoMinSize)
-            const preferredPixel = panel.preferredPixelSize !== undefined ? clamp(panel.preferredPixelSize, minSize, maxSize) : panel.size
-
-            const panelIsCollapsible = panel.collapseFromStart || panel.collapseFromEnd
-            if (remaining > 0) {
-                // パネルサイズがゼロかどうかを判定
-                const isZero = Math.abs(panel.size) <= 0 && (panel.percentageSize ?? 0) <= 0
-                // ゼロのパネルはスキップ
-                if (isZero) {
-                    continue
-                }
-
-                const targetSize = Math.max(panel.size, preferredPixel)
-                const effectiveMax = respectPreferred ? Math.min(maxSize, targetSize) : maxSize
-                const expansionCapacity = Math.max(0, effectiveMax - panel.size)
-                if (expansionCapacity <= 0) {
-                    continue
-                }
-                const applied = Math.min(expansionCapacity, remaining)
-                if (applied <= 0) {
-                    continue
-                }
-                const nextSize = panel.size + applied
-                const nextPercentage = toRoundedPercentage(nextSize, containerSize)
-                const nextSizeBeforeCollapse = panelIsCollapsible ? nextSize : panel.sizeBeforeCollapse
-                const nextMeasuredPixelBeforeCollapse = panelIsCollapsible ? (panel.measuredPixelSizeBeforeCollapse ?? panel.measuredPixelSize ?? nextSize) : panel.measuredPixelSizeBeforeCollapse
-                panels[index] = {
-                    ...panel,
-                    size: nextSize,
-                    percentageSize: nextPercentage,
-                    sizeBeforeCollapse: nextSizeBeforeCollapse,
-                    measuredPixelSizeBeforeCollapse: nextMeasuredPixelBeforeCollapse,
-                    measuredPixelSize: undefined,
-                    measuredPercentageSize: undefined,
-                }
-                remaining -= applied
-            } else {
-                const shrinkFloor = respectPreferred ? preferredPixel : minSize
-                const reductionCapacity = Math.max(0, panel.size - shrinkFloor)
-                if (reductionCapacity <= 0) {
-                    continue
-                }
-                const applied = Math.min(reductionCapacity, Math.abs(remaining))
-                if (applied <= 0) {
-                    continue
-                }
-                const nextSize = panel.size - applied
-                const nextPercentage = toRoundedPercentage(nextSize, containerSize)
-                const nextSizeBeforeCollapse = panelIsCollapsible ? nextSize : panel.sizeBeforeCollapse
-                const nextMeasuredPixelBeforeCollapse = panelIsCollapsible ? (panel.measuredPixelSizeBeforeCollapse ?? panel.measuredPixelSize ?? nextSize) : panel.measuredPixelSizeBeforeCollapse
-                panels[index] = {
-                    ...panel,
-                    size: nextSize,
-                    percentageSize: nextPercentage,
-                    sizeBeforeCollapse: nextSizeBeforeCollapse,
-                    measuredPixelSizeBeforeCollapse: nextMeasuredPixelBeforeCollapse,
-                    measuredPixelSize: undefined,
-                    measuredPercentageSize: undefined,
-                }
-                remaining += applied
+            if (node.matches(LAYOUT_ELEMENT_SELECTOR) || node.querySelector(LAYOUT_ELEMENT_SELECTOR) !== null) {
+                return true
             }
         }
+        return false
     }
-
-    adjustPass(true)
-
-    if ((isGrowing && remaining > 0) || (!isGrowing && remaining < 0)) {
-        adjustPass(false)
-    }
-
-    return remaining
+    return records.some((record) => carriesLayoutElement(record.addedNodes) || carriesLayoutElement(record.removedNodes))
 }
 
 /**
- * Parse a CSS pixel string and return the numeric portion.
- * CSS ピクセル表現から数値を抽出する処理。
+ * Ratio between visual pixels (pointer coordinates) and layout pixels (the lengths the allocator hands out).
+ * 視覚ピクセル (ポインタ座標) とレイアウトピクセル (配分器が配る長さ) の比。
+ *
+ * A transformed ancestor scales pointer coordinates but not the lengths the layout is computed in, so a drag
+ * delta read straight from the pointer moves the boundary by `travel × scale` instead of `travel` — the grab
+ * point slides out from under the cursor, and the error grows without bound as the gesture continues.
+ * 変形された祖先の下ではポインタ座標だけが拡大縮小され、レイアウトが計算される長さは変わらない。
+ * ポインタの変位をそのまま使うと境界は `移動量 × 倍率` しか動かず、掴んだ点がカーソルから滑り出し、
+ * その誤差はジェスチャーが続く限り増え続ける。
+ *
+ * @param element - Element whose box is compared in both spaces / 双方の空間で矩形を比べる要素
+ * @param direction - Axis to measure along / 計測する軸
+ * @returns Visual length divided by layout length, 1 when either is unavailable / 視覚長 ÷ レイアウト長 (いずれか不明なら 1)
  */
-const parsePixelValue = (value: string | null): number => {
-    if (!value) {
-        return 0
+export const getVisualScale = (element: HTMLElement, direction: PanelDirection): number => {
+    if (typeof window === "undefined") {
+        return 1
     }
-    const parsed = parseFloat(value)
-    return Number.isFinite(parsed) ? parsed : 0
-}
-
-/**
- * Measure container size in a given direction, returning inner (borderless) and outer dimensions.
- * 指定方向で枠線控除後と控除前の両方の寸法を測定して返す。
- */
-export const getContainerSize = (element: HTMLElement, direction: PanelDirection): ContainerAxisMeasurement => {
+    const isHorizontal = direction === "horizontal"
     const rect = element.getBoundingClientRect()
-    const styles = typeof window !== "undefined" ? window.getComputedStyle(element) : null
-    const horizontalBorder = styles ? parsePixelValue(styles.borderLeftWidth) + parsePixelValue(styles.borderRightWidth) : 0
-    const verticalBorder = styles ? parsePixelValue(styles.borderTopWidth) + parsePixelValue(styles.borderBottomWidth) : 0
-    if (direction === "horizontal") {
-        const rectWidth = rect.width > 0 ? rect.width : element.offsetWidth
-        const innerWidth = rect.width > 0 ? Math.max(0, rect.width - horizontalBorder) : element.clientWidth
-        const outerWidthFallback = element.offsetWidth > 0 ? element.offsetWidth : element.clientWidth + horizontalBorder
-        // 枠線の厚みを控除した実効幅と控除前の幅をそれぞれ算出
-        return {
-            inner: innerWidth > 0 ? innerWidth : Math.max(0, element.clientWidth),
-            outer: rectWidth > 0 ? rectWidth : Math.max(0, outerWidthFallback),
-        }
-    }
-    const rectHeight = rect.height > 0 ? rect.height : element.offsetHeight
-    const innerHeight = rect.height > 0 ? Math.max(0, rect.height - verticalBorder) : element.clientHeight
-    const outerHeightFallback = element.offsetHeight > 0 ? element.offsetHeight : element.clientHeight + verticalBorder
-    // 枠線控除後の高さと控除前の高さを併せて返却
-    return {
-        inner: innerHeight > 0 ? innerHeight : Math.max(0, element.clientHeight),
-        outer: rectHeight > 0 ? rectHeight : Math.max(0, outerHeightFallback),
+    const visual = isHorizontal ? rect.width : rect.height
+    const styles = window.getComputedStyle(element)
+    // グループは box-sizing: border-box を所有するため、計算値の幅・高さは視覚矩形と同じ境界領域を指す。
+    // ただし配置されていない要素では指定値 (`100%` など) が返るため、px でなければ換算しない
+    const declared = isHorizontal ? styles.width : styles.height
+    if (!declared.endsWith("px")) {
+        return 1
     }
+    const layout = Number.parseFloat(declared)
+    return visual > 0 && Number.isFinite(layout) && layout > 0 ? visual / layout : 1
 }
 
 /**
- * Persist panel layout sizes to local storage.
- * パネルレイアウトのサイズをローカルストレージへ保存する。
+ * Persist a panel layout to local storage.
+ * パネルレイアウトをローカルストレージへ保存する。
+ *
+ * @param id - Auto-save identifier / 自動保存の識別子
+ * @param entries - Panel lengths with their identifiers, in DOM order / DOM 順の識別子つきパネル長
  */
-export const saveLayout = (id: string, sizes: number[]): void => {
+export const saveLayout = (id: string, entries: PersistedPanelSize[]): void => {
     try {
-        localStorage.setItem(`panel-layout-${id}`, JSON.stringify(sizes))
+        localStorage.setItem(`panel-layout-${id}`, JSON.stringify(entries))
     } catch (error) {
         console.warn("Failed to save panel layout:", error)
     }
 }
 
 /**
- * Restore panel layout sizes from local storage.
- * パネルレイアウトのサイズをローカルストレージから復元する。
+ * Restore a panel layout from local storage.
+ * パネルレイアウトをローカルストレージから復元する。
+ *
+ * A stored layout is only usable when every entry names the panel it belongs to, so a payload written by a
+ * different panel set is rejected instead of being applied by position.
+ * 保存レイアウトは各項目が所属パネルを名指ししている場合にだけ利用できる。別構成が書いた内容は位置で当てはめず拒否する。
+ *
+ * @param id - Auto-save identifier / 自動保存の識別子
+ * @returns Stored layout, or null when nothing usable is stored / 保存済みレイアウト、利用できなければ null
  */
-export const loadLayout = (id: string): number[] | null => {
+export const loadLayout = (id: string): PersistedPanelSize[] | null => {
     try {
         const saved = localStorage.getItem(`panel-layout-${id}`)
-        return saved ? JSON.parse(saved) : null
+        if (!saved) {
+            return null
+        }
+        const parsed: unknown = JSON.parse(saved)
+        if (!Array.isArray(parsed)) {
+            return null
+        }
+        const isEntry = (value: unknown): value is PersistedPanelSize => typeof value === "object" && value !== null && typeof (value as PersistedPanelSize).id === "string" && Number.isFinite((value as PersistedPanelSize).size)
+        return parsed.every(isEntry) ? parsed : null
     } catch (error) {
         console.warn("Failed to load panel layout:", error)
         return null

package/dist/GlobalDebugOverlay-afs0vF-Q.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),A=require("react"),R=require("react-dom"),x=require("./debugOverlayStore-Dkl-fHoa.cjs"),P=require("./index-xTV-c0PN.cjs"),o=(n,r)=>typeof n!="number"||!Number.isFinite(n)?"—":`${(n<0?0:n).toFixed(8)}${r}`,T={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"},Y={display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:"12px"},w={display:"flex",flexDirection:"column",gap:"4px"},D={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",cursor:"pointer",transition:"background-color 0.18s ease, border-color 0.18s ease"},C={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"},N={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"},p={display:"flex",justifyContent:"space-between",alignItems:"center",gap:"6px"},k={display:"grid",gridTemplateColumns:"auto 1fr",gap:"2px 10px",color:"#e2e8f0"},G={padding:"2px 6px",borderRadius:"9999px",fontSize:"10px",textTransform:"uppercase"},I=({groupId:n})=>x.useDebugOverlayOwnerId()!==n?null:e.jsx(u,{}),u=()=>{const r=x.useDebugOverlaySnapshot().groups,[t,g]=A.useState(!0);if(r.length===0||typeof document>"u")return null;const b=r.reduce((i,a)=>i+a.panels.length,0),h=r.reduce((i,a)=>i+(a.handles?.length??0),0),m=()=>g(i=>!i),f=e.jsxs("div",{style:{...T,padding:t?"10px 18px":"14px 18px",maxHeight:t?"52px":"min(65vh, 520px)",transition:"max-height 0.24s ease, padding 0.24s ease"},children:[e.jsxs("div",{style:{...Y,marginBottom:t?0:"12px"},children:[e.jsxs("div",{style:w,children:[e.jsx("span",{style:{fontWeight:700,fontSize:"12px",letterSpacing:"0.03em"},children:"Panel Overview"}),e.jsxs("span",{style:{color:"#cbd5f5"},children:["groups: ",r.length," / panels: ",b," / resizers: ",h]})]}),e.jsx("button",{type:"button",onClick:m,style:{...D,backgroundColor:t?"rgba(59, 130, 246, 0.2)":"rgba(71, 85, 105, 0.45)"},title:t?"Panel Overview を開く":"Panel Overview を閉じる",children:t?"開く":"閉じる"})]}),!t&&e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"12px",maxHeight:"45vh",overflowY:"auto",paddingRight:"6px"},children:r.map((i,a)=>{const l=i.direction==="horizontal"?i.containerSize.width:i.containerSize.height;return e.jsxs("div",{style:C,children:[e.jsxs("div",{style:{...p,flexWrap:"wrap",gap:"10px",color:"#dbeafe"},children:[e.jsxs("span",{style:{fontWeight:600,fontSize:"11px",letterSpacing:"0.02em",textTransform:"uppercase"},children:["group ",a+1,": ",i.displayName]}),e.jsxs("span",{children:["direction: ",i.direction," / container: ",o(i.containerSize.width,"px")," × ",o(i.containerSize.height,"px")]})]}),e.jsx("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(220px, 1fr))",gap:"10px"},children:i.panels.map((s,y)=>{const d=s.measuredPixelSize??s.size,S=s.size,j=o(S,"px"),v=s.percentageSize??(l>0?s.size/l*100:void 0),O=s.measuredPercentageSize!==void 0?s.measuredPercentageSize:l>0?d/l*100:void 0,c=s.collapsed||d<=P.PANEL_SNAP_THRESHOLD,E=s.collapsed?"collapsed":c?"hidden":"visible",z=o(v,"%"),L=o(O,"%"),_=o(d,"px");return e.jsxs("div",{style:N,children:[e.jsxs("div",{style:p,children:[e.jsx("span",{style:{flex:1,minWidth:0,overflow:"hidden",textOverflow:"ellipsis"},children:s.id}),e.jsx("span",{style:{...G,backgroundColor:s.collapsed?"rgba(251, 113, 133, 0.25)":c?"rgba(250, 204, 21, 0.25)":"rgba(74, 222, 128, 0.25)",color:s.collapsed?"#fecdd3":c?"#fef08a":"#bbf7d0"},children:E})]}),e.jsxs("div",{style:k,children:[e.jsx("span",{children:"size (state):"}),e.jsx("span",{children:j}),e.jsx("span",{children:"size (measured):"}),e.jsx("span",{children:_}),e.jsx("span",{children:"percentage (state):"}),e.jsx("span",{children:z}),e.jsx("span",{children:"percentage (measured):"}),e.jsx("span",{children:L}),e.jsx("span",{children:"unit:"}),e.jsx("span",{children:s.sizeUnit}),e.jsx("span",{children:"min:"}),e.jsx("span",{children:s.minSize!==void 0?JSON.stringify(s.minSize):"—"}),e.jsx("span",{children:"auto min:"}),e.jsx("span",{children:s.autoMinSize!==void 0?JSON.stringify(s.autoMinSize):"—"}),e.jsx("span",{children:"max:"}),e.jsx("span",{children:s.maxSize!==void 0?JSON.stringify(s.maxSize):"—"}),e.jsx("span",{children:"priority:"}),e.jsx("span",{children:s.pixelAdjustPriority??"—"}),e.jsx("span",{children:"flex priority:"}),e.jsx("span",{children:s.flexAdjustPriority??"—"})]})]},s.id||y)})})]},i.groupId)})})]});return R.createPortal(f,document.body)};exports.GlobalDebugOverlay=u;exports.GlobalDebugOverlayGate=I;

package/dist/GlobalDebugOverlay.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GlobalDebugOverlay.d.ts","sourceRoot":"","sources":["../src/GlobalDebugOverlay.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAyGH;;;;GAIG;AACH,eAAO,MAAM,sBAAsB,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,uCAMtE,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,kBAAkB,0CA2J9B,CAAA"}

package/dist/Panel.d.ts

@@ -1,7 +0,0 @@
-import { PanelProps } from './types';
-/**
- * Render a resizable panel within a managed group, keeping DOM measurements in sync with reducer state.
- * 管理対象グループ内で DOM 計測とリデューサー状態を同期させながらリサイズ可能パネルを描画するコンポーネント。
- */
-export declare const Panel: import('react').MemoExoticComponent<({ id: providedId, defaultSize, minSize, maxSize, autoMinSize, className, style, children, order, collapsible, defaultCollapsed, pixelAdjustPriority, flexAdjustPriority, contentOverflow }: PanelProps) => import("react").JSX.Element>;
-//# sourceMappingURL=Panel.d.ts.map

package/dist/Panel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAA6C,UAAU,EAAE,MAAM,SAAS,CAAA;AA6FpF;;;GAGG;AACH,eAAO,MAAM,KAAK,mOACwO,UAAU,iCA+gBnQ,CAAA"}

package/dist/PanelDebugInfo.d.ts

@@ -1,26 +0,0 @@
-import { PanelDirection, PanelLayoutData } from './types';
-type PanelDebugInfoProps = {
-    panel: PanelLayoutData | undefined;
-    measuredPixelSize: number;
-    measuredPercentageSize: number;
-    containerAxisSize: number;
-    direction: PanelDirection;
-};
-type FormatPanelDebugInfoArgs = {
-    panel: PanelLayoutData | undefined;
-    measuredPixelSize: number;
-    measuredPercentageSize: number;
-    containerAxisSize: number;
-    containerLabel: string;
-};
-type FormattedPanelDebugInfo = {
-    stateValueDisplay: string;
-    measuredValueDisplay: string;
-    containerDisplay: string;
-    headlineLabel: string;
-    titleText: string;
-};
-export declare const formatPanelDebugInfo: ({ panel, measuredPixelSize, measuredPercentageSize, containerAxisSize, containerLabel }: FormatPanelDebugInfoArgs) => FormattedPanelDebugInfo;
-export declare const PanelDebugInfo: import('react').MemoExoticComponent<({ panel, measuredPixelSize, measuredPercentageSize, containerAxisSize, direction }: PanelDebugInfoProps) => import("react").JSX.Element>;
-export {};
-//# sourceMappingURL=PanelDebugInfo.d.ts.map

package/dist/PanelDebugInfo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PanelDebugInfo.d.ts","sourceRoot":"","sources":["../src/PanelDebugInfo.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAE9D,KAAK,mBAAmB,GAAG;IACvB,KAAK,EAAE,eAAe,GAAG,SAAS,CAAA;IAClC,iBAAiB,EAAE,MAAM,CAAA;IACzB,sBAAsB,EAAE,MAAM,CAAA;IAC9B,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,EAAE,cAAc,CAAA;CAC5B,CAAA;AAED,KAAK,wBAAwB,GAAG;IAC5B,KAAK,EAAE,eAAe,GAAG,SAAS,CAAA;IAClC,iBAAiB,EAAE,MAAM,CAAA;IACzB,sBAAsB,EAAE,MAAM,CAAA;IAC9B,iBAAiB,EAAE,MAAM,CAAA;IACzB,cAAc,EAAE,MAAM,CAAA;CACzB,CAAA;AAED,KAAK,uBAAuB,GAAG;IAC3B,iBAAiB,EAAE,MAAM,CAAA;IACzB,oBAAoB,EAAE,MAAM,CAAA;IAC5B,gBAAgB,EAAE,MAAM,CAAA;IACxB,aAAa,EAAE,MAAM,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,oBAAoB,GAAI,yFAAyF,wBAAwB,KAAG,uBAkBxJ,CAAA;AAED,eAAO,MAAM,cAAc,2HAA6F,mBAAmB,iCA+FzI,CAAA"}

package/dist/PanelGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PanelGroup.d.ts","sourceRoot":"","sources":["../src/PanelGroup.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AA2E9C;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,gCA2KhD,CAAA"}

package/dist/PanelResizeHandle.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"PanelResizeHandle.d.ts","sourceRoot":"","sources":["../src/PanelResizeHandle.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EAUH,KAAK,sBAAsB,EAE9B,MAAM,SAAS,CAAA;AAGhB;;;GAGG;AACH,eAAO,MAAM,iBAAiB,iGAA2E,sBAAsB,iCAkrB7H,CAAA"}

package/dist/context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAErD;;;GAGG;AACH,eAAO,MAAM,iBAAiB,wDAAqD,CAAA;AAEnF;;;GAGG;AACH,eAAO,MAAM,aAAa,8BAMzB,CAAA"}