@aiquants/daily-report 0.20.0 → 0.21.0

package/src/client/hooks/use-daily-report.ts

@@ -1,549 +0,0 @@
-/**
- * Suspense-friendly daily report detail loader (fetch-driven).
- * fetch ベースの日報詳細ローダー。
- */
-import { useCallback, useEffect, useRef, useState } from "react"
-import { normalizeBusinessDateKey } from "../../shared/business-date"
-import { createLogger, LogLevel } from "../../shared/logger"
-import type { DailyReportDetail } from "../../shared/types"
-import { useDailyReportConfig } from "../config-context"
-import { DAILY_REPORT_FETCH_DEBOUNCE_MS } from "../utils/constants"
-
-const logger = createLogger(LogLevel.INFO, "use-daily-report")
-
-// --- Configuration & Constants ---
-/**
- * Retrieve global configuration or default.
- * グローバル設定またはデフォルト値を取得する。
- */
-const getGlobal = (k: string, d: number): number => {
-    if (typeof window === "undefined") return d
-    const v = (window as unknown as Record<string, unknown>)[k]
-    return typeof v === "number" && !Number.isNaN(v) ? v : d
-}
-const TTL = getGlobal("__DAILY_REPORT_CACHE_TTL__", 300_000)
-const REVIVE_MS = getGlobal("__DAILY_REPORT_CACHE_REVIVE_MS__", 60_000)
-
-// --- Cache Store (Centralized State) ---
-type CacheEntry<T> = { data: T; expiresAt: number }
-
-export const DailyReportCache = {
-    reports: new Map<number, CacheEntry<DailyReportDetail>>(),
-    lists: new Map<string, CacheEntry<DailyReportDetail[]>>(),
-    pendingLists: new Map<string, Promise<DailyReportDetail[]>>(),
-    pendingReports: new Map<number, Promise<DailyReportDetail>>(),
-    listeners: new Set<(id: number) => void>(),
-    locks: new Set<number>(),
-    lastMutations: new Map<number, number>(),
-    recentDeletes: new Map<number, number>(),
-    lastPrune: 0,
-
-    /**
-     * Prune expired entries from the cache.
-     * キャッシュから期限切れのエントリを削除する。
-     */
-    prune() {
-        const now = Date.now()
-        // Prune at most once per minute
-        if (now - this.lastPrune < 60_000) return
-        this.lastPrune = now
-
-        // SWR のために古いデータを保持する。TTL 超過後すぐには削除せず、十分に古い（例えば 1時間経過した）データのみを破棄する
-        const GC_THRESHOLD = 60 * 60 * 1000 // 1 hour
-        for (const [id, entry] of this.reports) {
-            if (now - entry.expiresAt > GC_THRESHOLD) this.reports.delete(id)
-        }
-        for (const [key, entry] of this.lists) {
-            if (now - entry.expiresAt > GC_THRESHOLD) this.lists.delete(key)
-        }
-    },
-
-    /**
-     * Clear all cached entries and pending requests.
-     * すべてのキャッシュエントリおよび待機中リクエストをクリアする。
-     */
-    clear() {
-        this.reports.clear()
-        this.lists.clear()
-        this.pendingLists.clear()
-        this.pendingReports.clear()
-        this.locks.clear()
-        this.lastMutations.clear()
-        this.recentDeletes.clear()
-        this.listeners.forEach((listener) => {
-            listener(-1)
-        })
-    },
-
-    /**
-     * Check if the cache entry is still valid.
-     * キャッシュエントリがまだ有効かを確認する。
-     */
-    isValid: (ex: number) => ex > Date.now(),
-    /**
-     * Notify all listeners of a report update.
-     * レポートの更新をすべてのリスナーに通知する。
-     */
-    notify: (id: number) => {
-        DailyReportCache.listeners.forEach((l) => {
-            l(id)
-        })
-    },
-
-    /**
-     * Retrieve a cached report by ID.
-     * ID でキャッシュされたレポートを取得する。
-     */
-    getReport(id: number, ignoreExpiry = false) {
-        const e = this.reports.get(id)
-        return e && (ignoreExpiry || this.isValid(e.expiresAt)) ? e.data : null
-    },
-
-    /**
-     * Retrieve a cached list of reports by business date key.
-     * 営業日キーでレポートのキャッシュリストを取得する。
-     */
-    getList(dateKey: string | null, ignoreExpiry = false) {
-        const e = dateKey && this.lists.get(dateKey)
-        return e && (ignoreExpiry || this.isValid(e.expiresAt)) ? e.data : null
-    },
-
-    /**
-     * Set a report in the cache and optionally sync with the list cache.
-     * キャッシュにレポートを設定し、必要に応じてリストキャッシュと同期する。
-     */
-    set(report: DailyReportDetail, expiresAt: number, syncList = true) {
-        this.reports.set(report.reportHubId, { data: report, expiresAt })
-        if (syncList) {
-            const dateKey = normalizeBusinessDateKey(report.date)
-            const listEntry = dateKey ? this.lists.get(dateKey) : null
-            if (listEntry && dateKey) {
-                const exists = listEntry.data.some((r) => r.reportHubId === report.reportHubId)
-                const data = exists ? listEntry.data.map((r) => (r.reportHubId === report.reportHubId ? report : r)) : [report, ...listEntry.data]
-                this.lists.set(dateKey, { ...listEntry, data })
-            }
-        }
-        this.notify(report.reportHubId)
-    },
-
-    /**
-     * Update a cached report with partial data.
-     * 部分的なデータでキャッシュされたレポートを更新する。
-     */
-    update(id: number, updates: Partial<DailyReportDetail>, strict = true) {
-        const entry = this.reports.get(id)
-        if (!entry?.data) return
-
-        if (strict && updates.updatedAt && entry.data.updatedAt) {
-            if (new Date(updates.updatedAt).getTime() < new Date(entry.data.updatedAt).getTime()) {
-                logger.warn(`[DailyReportCache] Stale update skipped id=${id}`)
-                return
-            }
-        }
-        this.set({ ...entry.data, ...updates } as DailyReportDetail, Math.max(entry.expiresAt, Date.now() + REVIVE_MS))
-    },
-
-    /**
-     * Delete a report from the cache and update the corresponding list.
-     * キャッシュからレポートを削除し、対応するリストを更新する。
-     */
-    delete(id: number, date: string) {
-        this.reports.delete(id)
-        const dateKey = normalizeBusinessDateKey(date)
-        const list = dateKey && this.lists.get(dateKey)
-        if (list && dateKey) {
-            this.lists.set(dateKey, { ...list, data: list.data.filter((r) => r.reportHubId !== id) })
-        }
-        this.notify(id)
-    },
-
-    /**
-     * Merge server report with cached report to handle optimistic updates and zombies.
-     * サーバーレポートとキャッシュレポートをマージして、楽観的更新とゾンビコメントを処理する。
-     */
-    merge(serverReport: DailyReportDetail, cachedReport?: DailyReportDetail | null) {
-        let report = serverReport
-        // Filter zombies
-        if (report.postedComments.some((c) => this.recentDeletes.has(c.id))) {
-            report = { ...report, postedComments: report.postedComments.filter((c) => !this.recentDeletes.has(c.id)) }
-        }
-        // Restore missing "my comments"
-        if (cachedReport) {
-            const serverIds = new Set(report.postedComments.map((c) => c.id))
-            const missing = cachedReport.postedComments.filter((c) => !serverIds.has(c.id) && c.isMine && Date.now() - new Date(c.createdAt || 0).getTime() < 10000)
-            if (missing.length > 0) {
-                report = {
-                    ...report,
-                    postedComments: [...report.postedComments, ...missing].sort((a, b) => new Date(a.createdAt || 0).getTime() - new Date(b.createdAt || 0).getTime()),
-                }
-            }
-        }
-        return report
-    },
-
-    /**
-     * Hydrate the cache with fetched reports, handling comment merges and locks.
-     * フェッチされたレポートでキャッシュをハイドレートし、コメントのマージとロックを処理する。
-     */
-    cacheMany(reports: DailyReportDetail[], dateKey: string | null, fetchStart: number) {
-        // ❗ 0 件でも一覧としてキャッシュする (「その営業日には 1 件も無い」は正当な結果)。
-        //    以前の早期 return は末尾の lists.set ごと飛ばしており、空の営業日が毎回
-        //    フェッチになるうえ、SSE 放送の種まき (set の syncList) の差し込み先も
-        //    存在しなかった。意図の記録が無い実装事故だったため除去した
-        this.prune()
-        const now = Date.now(),
-            expiresAt = now + TTL
-        for (const [id, t] of this.recentDeletes) if (now - t > 10000) this.recentDeletes.delete(id)
-
-        const processed = reports.map((r) => {
-            // Original logic: If locked, return server data directly (don't update cache, don't merge)
-            // ロックされている場合はサーバーデータをそのまま返す（キャッシュ更新せず、マージもしない）
-            if (this.locks.has(r.reportHubId)) return r
-
-            // Original logic: If recently mutated locally, prefer cached data
-            // 最近ローカルで変更された場合は、キャッシュデータを優先する
-            const lastMut = this.lastMutations.get(r.reportHubId)
-            if (lastMut && fetchStart > 0 && lastMut > fetchStart) {
-                return this.reports.get(r.reportHubId)?.data ?? r
-            }
-
-            const cached = this.reports.get(r.reportHubId)?.data
-            const merged = this.merge(r, cached)
-            this.set(merged, expiresAt, false)
-            return merged
-        })
-        if (dateKey) this.lists.set(dateKey, { data: processed, expiresAt })
-        return processed
-    },
-}
-
-// --- Public API Exports ---
-/**
- * Update the cache for a single report.
- * 単一レポートのキャッシュを更新する。
- */
-export const writeCache = (r: DailyReportDetail, exp: number, sync = true) => DailyReportCache.set(r, exp, sync)
-/**
- * Get a cached report by ID.
- * ID でキャッシュされたレポートを取得する。
- */
-export const getCachedReport = (id: number, opts?: { ignoreExpiry?: boolean }) => DailyReportCache.getReport(id, opts?.ignoreExpiry)
-/**
- * Update specific fields of a cached report.
- * キャッシュされたレポートの特定のフィールドを更新する。
- */
-export const updateDailyReportCache = (id: number, u: Partial<DailyReportDetail>) => DailyReportCache.update(id, u)
-/**
- * Delete a report from the cache.
- * キャッシュからレポートを削除する。
- */
-export const deleteDailyReportCache = (id: number, d: string) => DailyReportCache.delete(id, d)
-/**
- * Clear all daily report cache store entries.
- * 日報の全キャッシュストアを消去する。
- */
-export const clearDailyReportCache = () => {
-    DailyReportCache.clear()
-    // 不在確認の台帳も一緒に捨てる。ユーザー切替でここが残ると、新しいユーザーの
-    // 最初の不在確認が最大 10 秒抑止され、その間だけ安全弁が盲目のままになる
-    absenceConfirms.clear()
-}
-
-export const acquireMutationLock = (id: number) => {
-    DailyReportCache.locks.add(id)
-    DailyReportCache.lastMutations.set(id, Date.now())
-}
-export const releaseMutationLock = (id: number) => {
-    DailyReportCache.locks.delete(id)
-    DailyReportCache.lastMutations.set(id, Date.now())
-}
-export const registerRecentDeletion = (cId: number) => DailyReportCache.recentDeletes.set(cId, Date.now())
-
-/**
- * Subscribe to cache-ready events for a specific report.
- * Returns an unsubscribe function.
- *
- * 特定レポートのキャッシュ書き込みを監視する。
- * 解除関数を返す。
- */
-export const subscribeCacheReady = (reportHubId: number, callback: () => void): (() => void) => {
-    const listener = (id: number) => {
-        if (id === reportHubId) {
-            callback()
-        }
-    }
-    DailyReportCache.listeners.add(listener)
-    return () => {
-        DailyReportCache.listeners.delete(listener)
-    }
-}
-
-export const applyDailyReportServerUpdates = (_reportHubId: number, report: DailyReportDetail) => {
-    DailyReportCache.prune()
-    DailyReportCache.set(report, Date.now() + TTL)
-}
-
-/**
- * Applies a broadcast (cross-user SSE) report while preserving the viewer's own per-viewer state.
- * 全ユーザー放送 (SSE) の report を、受信者自身の per-viewer 状態を保持したまま反映する処理。
- *
- * SSE の report-create/update/publish が運ぶ isRead/isStarred は**操作した本人の状態**。
- * そのまま書くと受信者の既読/スター表示が他人の状態で上書きされる。共有フィールドだけを
- * 取り込み、per-viewer フィールドは受信者のキャッシュ値を保持する。ローカルに無い日報は
- * 種まきしない (送信者の per-viewer 値で汚すより、次のフェッチが受信者視点の正しい値を
- * 取るのに任せるほうが安全)。
- *
- * ❗ 信頼できる経路 (自分の HTTP 応答・recipient フィルタ済みの自分宛 status-update) は
- * {@link applyDailyReportServerUpdates} を使うこと — そちらは値をそのまま書く。
- */
-export const applyBroadcastReportUpdate = (report: DailyReportDetail) => {
-    DailyReportCache.prune()
-    const cached = DailyReportCache.getReport(report.reportHubId, true)
-    // per-viewer フィールド (isRead / isStarred / postedComments[].isMine) は送信者視点なので
-    // 受信者のキャッシュ値を保持し、未キャッシュなら中立値 (false) で置く。共有フィールドは配信値。
-    // ❗ 未キャッシュでも必ず書く: 書かないと鮮度窓内のリストキャッシュに新 id が載らず、
-    //   作成/公開された他ユーザーの日報が stale 安全弁でトゥームストーン化され、閲覧中の
-    //   受信者の一覧から恒久的に消える (set は既定で syncList=true = リストにも反映する)
-    const cachedMine = new Map<number | string, boolean>()
-    for (const c of cached?.postedComments ?? []) {
-        cachedMine.set(c.id, c.isMine ?? false)
-    }
-    const postedComments = (report.postedComments ?? []).map((c) => ({ ...c, isMine: cachedMine.get(c.id) ?? false }))
-    DailyReportCache.set({ ...report, isRead: cached?.isRead ?? false, isStarred: cached?.isStarred ?? false, postedComments }, Date.now() + TTL)
-}
-
-// --- Data Loading ---
-/**
- * Fetch a single report by ID.
- * ID で単一のレポートを取得する。
- */
-const fetchReportById = async (apiBasePath: string, id: number) => {
-    // 1. Cache Check
-    const cached = DailyReportCache.getReport(id)
-    if (cached) return cached
-
-    // 2. Prevent Duplicate Requests
-    const pending = DailyReportCache.pendingReports.get(id)
-    if (pending) return pending
-
-    // 3. Fetch
-    const start = Date.now()
-    const p = fetch(`${apiBasePath}/report?reportHubId=${id}`, { cache: "no-cache" })
-        .then((res) => (res.ok ? res.json() : Promise.reject(`HTTP ${res.status}`)))
-        .then((data) => {
-            if (data.error) throw new Error(data.error.message)
-            const report = data.report as DailyReportDetail
-            // 単一レポートの取得時にキャッシュを一括更新する
-            return DailyReportCache.cacheMany([report], null, start)[0]
-        })
-        .finally(() => DailyReportCache.pendingReports.delete(id))
-    DailyReportCache.pendingReports.set(id, p)
-    return p
-}
-
-/**
- * Fetch reports by date key.
- * 日付キーでレポートを取得する。
- */
-/**
- * 営業日キーごとの不在確認 (強制再取得) の台帳。
- *
- * 安全弁は描画中の行ごとに発火しうるため、無条件に確認すると 1 画面分の行が一斉に
- * 強制再取得を撃つ。営業日単位で間引きつつ、**進行中の確認があれば後続はそれへ合流する** —
- * タイムスタンプだけで諦めると、確認 1 本目の完了直後に作成された行の確認が次の窓まで
- * 塞がれ、その行が stale 安全弁でトゥームストーン化される余地が広がる。
- */
-const absenceConfirms = new Map<string, { at: number; inFlight: Promise<DailyReportDetail[]> | null }>()
-
-/** 不在確認の再実行を抑える間隔 (ms)。 */
-const ABSENCE_CONFIRM_INTERVAL_MS = 10_000
-
-/**
- * Confirms a row's absence against fresh server data, throttled per business date.
- * 営業日ごとに間引きながら、行の不在を実データで確認する処理。
- *
- * - 窓内に進行中の確認があればそれへ**合流**する (二重フェッチも切り捨ても起こさない)。
- * - 窓内で確認が完了済みなら null を返す (諦め — 残余窓は仕様書 §5 に明記)。
- *
- * @param apiBasePath API base path. API ベースパス。
- * @param dateKey Business date key. 営業日キー。
- * @returns Fresh list, or null when throttled with no in-flight confirm. 新鮮な一覧 (窓内諦めなら null)。
- */
-const confirmAbsence = (apiBasePath: string, dateKey: string): Promise<DailyReportDetail[]> | null => {
-    const entry = absenceConfirms.get(dateKey)
-    const now = Date.now()
-    if (entry && now - entry.at < ABSENCE_CONFIRM_INTERVAL_MS) {
-        return entry.inFlight
-    }
-    const inFlight = fetchReportsByDate(apiBasePath, dateKey, { forceRefresh: true })
-    const record = { at: now, inFlight: inFlight as Promise<DailyReportDetail[]> | null }
-    absenceConfirms.set(dateKey, record)
-    // 完了後は「窓内・進行中なし」へ移行する (合流先が無くなり、窓明けまで諦めになる)。
-    // ❗ .finally() は**元の拒否理由で再拒否する派生 Promise** を返す。呼び出し側が catch するのは
-    //    return した元の Promise だけなので、派生側を捨て置くとフェッチ失敗のたびに
-    //    Unhandled promise rejection が出る。派生鎖だけを飲み込む (元の拒否は呼び出し側へ届く)
-    inFlight
-        .finally(() => {
-            if (absenceConfirms.get(dateKey) === record) {
-                record.inFlight = null
-            }
-        })
-        .catch(() => {})
-    return inFlight
-}
-
-const fetchReportsByDate = async (apiBasePath: string, dateKey: string, options: { forceRefresh?: boolean } = {}) => {
-    const list = options.forceRefresh ? null : DailyReportCache.getList(dateKey)
-    if (list) return list
-
-    const pending = DailyReportCache.pendingLists.get(dateKey)
-    if (pending) return pending
-
-    const start = Date.now()
-    const p = fetch(`${apiBasePath}/business-date?businessDate=${encodeURIComponent(dateKey)}`, { cache: "no-cache" })
-        .then((res) => (res.ok ? res.json() : Promise.reject(`HTTP ${res.status}`)))
-        .then((data) => {
-            if (data.error) throw new Error(data.error.message)
-            return DailyReportCache.cacheMany(data.reports ?? [], dateKey, start)
-        })
-        .finally(() => DailyReportCache.pendingLists.delete(dateKey))
-    DailyReportCache.pendingLists.set(dateKey, p)
-    return p
-}
-
-// --- Hooks ---
-export type DailyReportDetailResource = { report: DailyReportDetail | null; error: Error | null; isLoading: boolean; isRefetching: boolean }
-
-/**
- * Provides a fetcher-driven daily report detail reader with business-date aware caching.
- * 営業日キャッシュ対応の日報詳細取得フック。
- */
-export const useDailyReportDetail = (reportHubId: number, businessDate: string | null): DailyReportDetailResource => {
-    const { apiBasePath } = useDailyReportConfig()
-    const [report, setReport] = useState<DailyReportDetail | null>(() => DailyReportCache.getReport(reportHubId))
-    const [error, setError] = useState<Error | null>(null)
-    const [isLoading, setIsLoading] = useState(false)
-    const [isRefetching, setIsRefetching] = useState(false)
-    const reqRef = useRef({ id: reportHubId, token: 0 })
-
-    // 1. Cache Subscription
-    // キャッシュの購読: グローバルな DailyReportCache が更新されたときにローカルの状態を反応的に更新する。
-    // 依存関係: [reportHubId] - 対象のレポート ID が変更されたときのみ再購読する。
-    // クリーンアップ: メモリリークを防ぐためにリスナーを解除する。
-    useEffect(() => {
-        const onUpdate = (uid: number) => {
-            if (uid === reportHubId) {
-                const r = DailyReportCache.getReport(reportHubId, true)
-                setReport(r)
-            }
-        }
-        DailyReportCache.listeners.add(onUpdate)
-        return () => {
-            DailyReportCache.listeners.delete(onUpdate)
-        }
-    }, [reportHubId])
-
-    // 2. Data Loading & Stale Check
-    // データのロードと有効期限切れチェック: データのフェッチサイクル、 stale-while-revalidate ロジック、リクエストのデバウンスを管理する。
-    // 依存関係: [reportHubId, businessDate, apiBasePath]
-    useEffect(() => {
-        const dateKey = normalizeBusinessDateKey(businessDate)
-        const token = (reqRef.current.token || 0) + 1
-        reqRef.current = { id: reportHubId, token }
-
-        if (reportHubId <= 0) {
-            setReport(null)
-            setError(reportHubId === 0 ? new Error("Invalid ID") : null)
-            setIsLoading(false)
-            setIsRefetching(false)
-            return
-        }
-
-        // Cache Check
-        let cached = DailyReportCache.getReport(reportHubId, true)
-        let isStale = false
-        if (cached) {
-            isStale = !DailyReportCache.isValid(DailyReportCache.reports.get(reportHubId)?.expiresAt ?? 0)
-        } else if (dateKey) {
-            const list = DailyReportCache.getList(dateKey, true)
-            const found = list?.find((r) => r.reportHubId === reportHubId)
-            if (found) {
-                cached = found
-                isStale = !DailyReportCache.isValid(DailyReportCache.lists.get(dateKey)?.expiresAt ?? 0)
-            }
-        }
-        setReport(cached)
-
-        // If cached and valid, we are done
-        if (cached && !isStale) {
-            setError(null)
-            setIsLoading(false)
-            setIsRefetching(false)
-            return
-        }
-
-        setIsLoading(!cached)
-        setIsRefetching(true)
-
-        // 未キャッシュ (骨組み表示中) の初回取得は即時に走らせる。デバウンスはスクロール連打の
-        // 無駄取りを抑える目的なので、スクロール churn の無い初回に効かせると純粋な遅延になる。
-        // キャッシュ済み (内容表示中) の stale 再取得だけデバウンスして churn を吸収する
-        const debounceMs = cached ? DAILY_REPORT_FETCH_DEBOUNCE_MS : 0
-
-        const timer = setTimeout(async () => {
-            if (reqRef.current.token !== token) return
-            try {
-                let r: DailyReportDetail | null = null
-                if (dateKey) {
-                    const servedFromCache = DailyReportCache.getList(dateKey) !== null
-                    const res = await fetchReportsByDate(apiBasePath, dateKey)
-                    r = res.find((item) => item.reportHubId === reportHubId) ?? null
-                    // ❗ 一覧キャッシュ (既定 5 分) に無いことは「サーバーに無い」の証拠にならない。
-                    //    キャッシュ構築後に作成/公開された行はここで必ず取りこぼし、`report=null` が
-                    //    そのまま呼び出し側の stale 安全弁の発火条件になる。安全弁は
-                    //    トゥームストーンを刻み常駐ストリームからも行を落とすため、**生きている行が
-                    //    能動的に削除される**。不在を確定させる前に一度だけ実データで確認する
-                    if (!r && servedFromCache) {
-                        const fresh = await confirmAbsence(apiBasePath, dateKey)
-                        if (fresh) {
-                            r = fresh.find((item) => item.reportHubId === reportHubId) ?? null
-                        }
-                    }
-                } else {
-                    r = await fetchReportById(apiBasePath, reportHubId)
-                }
-
-                if (reqRef.current.token === token) {
-                    setReport(r)
-                    setError(null)
-                }
-            } catch (e) {
-                if (reqRef.current.token === token) setError(e instanceof Error ? e : new Error("Load failed"))
-            } finally {
-                if (reqRef.current.token === token) {
-                    setIsLoading(false)
-                    setIsRefetching(false)
-                }
-            }
-        }, debounceMs)
-
-        return () => clearTimeout(timer)
-    }, [reportHubId, businessDate, apiBasePath])
-
-    return { report, error, isLoading, isRefetching }
-}
-
-/**
- * Provides a business-date aware prefetch helper.
- * 営業日キャッシュを活用した日報プリフェッチ補助フック。
- */
-export const useDailyReportPrefetch = () => {
-    const { apiBasePath } = useDailyReportConfig()
-    return useCallback(
-        (date: string | null) => {
-            const k = normalizeBusinessDateKey(date)
-            if (k && !DailyReportCache.getList(k)) fetchReportsByDate(apiBasePath, k).catch((e) => logger.warn("Prefetch error", k, e))
-        },
-        [apiBasePath],
-    )
-}

package/src/client/hooks/use-dynamic-viewport-height.ts

@@ -1,127 +0,0 @@
-/**
- * Shared hook for calculating viewport height of virtual scroll containers.
- * 仮想スクロールコンテナのビューポート高さを計測する共通フック。
- */
-import { type RefObject, useCallback, useEffect, useState } from "react"
-
-type UseDynamicViewportHeightOptions = {
-    enableMutationObserver?: boolean
-    bottomGap?: number
-    minFallbackHeight?: number
-}
-
-type UseDynamicViewportHeightResult = {
-    viewportHeight: number
-    updateViewportHeight: () => void
-}
-
-/**
- * Computes and updates the viewport height for scroll containers while reacting to layout changes.
- * レイアウト変化に追従しながらスクロールコンテナのビューポート高さを算出して更新する関数。
- */
-export const useDynamicViewportHeight = (containerRef: RefObject<HTMLDivElement | null>, options?: UseDynamicViewportHeightOptions): UseDynamicViewportHeightResult => {
-    const { enableMutationObserver = false, bottomGap = 4, minFallbackHeight = 240 } = options ?? {}
-    const [viewportHeight, setViewportHeight] = useState(600)
-
-    const updateViewportHeight = useCallback(() => {
-        if (typeof window === "undefined") {
-            return
-        }
-
-        const target = containerRef.current
-        if (!target) {
-            return
-        }
-
-        // 要素が非表示の場合は計測しない (display: none など)
-        if (target.offsetParent === null && window.getComputedStyle(target).position !== "fixed") {
-            return
-        }
-
-        const toNumber = (value: string) => Number.parseFloat(value) || 0
-        const { top: containerTop } = target.getBoundingClientRect()
-        const parentRect = target.parentElement?.getBoundingClientRect()
-        const rootStyle = window.getComputedStyle(document.documentElement)
-        const footerHeight = toNumber(rootStyle.getPropertyValue("--footer-height"))
-        const headerHeight = toNumber(rootStyle.getPropertyValue("--header-height"))
-        const scrollbarHeight = toNumber(rootStyle.getPropertyValue("--scrollbar-height"))
-        const containerStyle = window.getComputedStyle(target)
-        const marginBottom = toNumber(containerStyle.marginBottom)
-        const paddingBottom = toNumber(containerStyle.paddingBottom)
-        const viewportBottom = window.innerHeight - footerHeight - scrollbarHeight - bottomGap
-        const effectiveBottom = parentRect ? Math.min(parentRect.bottom, viewportBottom) : viewportBottom
-        const layoutTop = parentRect ? Math.max(parentRect.top, headerHeight) : headerHeight
-        const effectiveTop = Math.max(containerTop, layoutTop)
-        const availableHeight = effectiveBottom - effectiveTop - marginBottom - paddingBottom
-        const safeAvailableHeight = Number.isFinite(availableHeight) ? Math.floor(availableHeight) : 0
-        const clampedHeight = safeAvailableHeight > 0 ? safeAvailableHeight : minFallbackHeight
-
-        if (clampedHeight > 0 && Number.isFinite(clampedHeight)) {
-            setViewportHeight((previous) => (Math.abs(previous - clampedHeight) > 1 ? clampedHeight : previous))
-        }
-    }, [bottomGap, containerRef, minFallbackHeight])
-
-    useEffect(() => {
-        if (typeof window === "undefined") {
-            return
-        }
-
-        let frameId: number | null = null
-        let timeoutId: number | null = null
-        let resizeObserver: ResizeObserver | null = null
-        let mutationObserver: MutationObserver | null = null
-        const scheduleUpdate = () => {
-            if (frameId !== null) {
-                window.cancelAnimationFrame(frameId)
-            }
-            frameId = window.requestAnimationFrame(() => {
-                updateViewportHeight()
-            })
-        }
-
-        // 初期表示直後とわずかな遅延後に計測して安定させる
-        scheduleUpdate()
-        timeoutId = window.setTimeout(() => {
-            scheduleUpdate()
-        }, 150)
-
-        const containerElement = containerRef.current
-        if (typeof ResizeObserver !== "undefined" && containerElement) {
-            resizeObserver = new ResizeObserver(() => {
-                // コンテナと親要素のリサイズ変化に追従する
-                scheduleUpdate()
-            })
-            resizeObserver.observe(containerElement)
-            if (containerElement.parentElement) {
-                resizeObserver.observe(containerElement.parentElement)
-            }
-        }
-
-        if (enableMutationObserver && typeof MutationObserver !== "undefined") {
-            mutationObserver = new MutationObserver(() => {
-                // ルートのスタイル変更にも追従する
-                scheduleUpdate()
-            })
-            mutationObserver.observe(document.documentElement, { attributes: true, attributeFilter: ["style"] })
-        }
-
-        window.addEventListener("resize", scheduleUpdate)
-
-        return () => {
-            if (frameId !== null) {
-                window.cancelAnimationFrame(frameId)
-            }
-            if (timeoutId !== null) {
-                window.clearTimeout(timeoutId)
-            }
-            window.removeEventListener("resize", scheduleUpdate)
-            resizeObserver?.disconnect()
-            mutationObserver?.disconnect()
-        }
-    }, [enableMutationObserver, updateViewportHeight, containerRef])
-
-    return {
-        viewportHeight,
-        updateViewportHeight,
-    }
-}