dsh-mega-chat-nav 0.1.1

package/lib/client/components/shared/hooks.js

@@ -0,0 +1,427 @@
+// 共享 hooks：数据装配 / 布局钉位 / scroll-spy / 翻页 / 聚焦 / 提示（各风格复用）
+import { useEffect, useRef, useState } from 'react';
+import { groupByTurn, mergeLiveEntries } from "../../../core/model/turns.js";
+import { READING_LINE_TOP, nearestReadDot } from "../../../core/logic/active-dot.js";
+import { DOT_GAP, DOT_SIZE, clampScrollTop, pageStep } from "../../../core/utils/measure.js";
+import { FOCUS_RADIUS, focusCardMetrics, focusScale, focusTier } from "../../../core/logic/focus.js";
+import { formatNavTime } from "../../../core/utils/time.js";
+/** 会话可见性守卫：当前会话存在且非空白 */
+export function useVisibleSession(useSessions) {
+    const current = useSessions?.((s) => s.current);
+    const summary = useSessions?.((s) => (current === undefined ? undefined : s.byId?.[String(current)]));
+    return {
+        sessionId: current,
+        visible: current !== undefined && summary !== undefined && summary.blank !== true,
+    };
+}
+/** 投影值 → 提问条目（结构守卫） */
+function projectionEntries(face) {
+    const value = face?.getSnapshot();
+    if (!Array.isArray(value))
+        return [];
+    return value.filter((item) => typeof item === 'object' && item !== null
+        && typeof item.id === 'string'
+        && typeof item.seq === 'number'
+        && typeof item.turn === 'number');
+}
+/** 圆点列表装配：投影（全量）+ 活窗口合并；同内容复用引用（React bail out） */
+export function useSessionDots(injected, sessionId, visible) {
+    const [dots, setDots] = useState([]);
+    const lastRef = useRef([]);
+    useEffect(() => {
+        if (!visible || sessionId === undefined || injected === undefined) {
+            setDots([]);
+            lastRef.current = [];
+            return;
+        }
+        const face = injected.questionProjection(sessionId);
+        const refresh = () => {
+            const grouped = groupByTurn(projectionEntries(face));
+            const next = mergeLiveEntries(grouped, injected.readQuestions(sessionId));
+            if (sameDotLists(next, lastRef.current)) {
+                setDots(lastRef.current);
+                return;
+            }
+            lastRef.current = next;
+            setDots(next);
+        };
+        refresh();
+        const unsubProjection = face?.subscribe(refresh) ?? (() => { });
+        const unsubContent = injected.subscribeContent(sessionId, refresh);
+        return () => {
+            unsubProjection();
+            unsubContent();
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [injected, sessionId, visible]);
+    return dots;
+}
+/** 结构相等：memberKeys 全等即内容一致 */
+function sameDotLists(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        const da = a[i];
+        const db = b[i];
+        if (da.key !== db.key || da.memberKeys.length !== db.memberKeys.length)
+            return false;
+        for (let j = 0; j < da.memberKeys.length; j++) {
+            if (da.memberKeys[j] !== db.memberKeys[j])
+                return false;
+        }
+    }
+    return true;
+}
+/** 会话滚动容器（钉位基准） */
+export function findConvRoot() {
+    return document.querySelector('[data-slot="conversation"] > div[data-phase]');
+}
+/**
+ * 布局钉位：布局校正循环把 rail 钉到对话列（rAF 连续 3 帧稳定停车；
+ * ResizeObserver 观察 frame 与对话根；resize 唤醒）。直接写 panel.style。
+ */
+export function useRailLayout(panelRef, visible, align) {
+    useEffect(() => {
+        if (!visible)
+            return;
+        let raf = 0;
+        let idle = 0;
+        let stopped = false;
+        let observer = null;
+        const observed = { frame: null, convRoot: null };
+        const applyLayout = () => {
+            const panel = panelRef.current;
+            if (panel === null)
+                return false;
+            const frame = panel.closest('[data-shell-overlay]')?.parentElement ?? null;
+            const convRoot = findConvRoot();
+            if (frame === null || convRoot === null)
+                return true;
+            if (observer !== null) {
+                if (observed.frame !== frame) {
+                    observer.observe(frame, { box: 'border-box' });
+                    observed.frame = frame;
+                }
+                if (observed.convRoot !== convRoot) {
+                    observer.observe(convRoot, { box: 'border-box' });
+                    observed.convRoot = convRoot;
+                }
+            }
+            const frameRect = frame.getBoundingClientRect();
+            const convRect = convRoot.getBoundingClientRect();
+            if (convRect.height <= 0 || convRect.width <= 0)
+                return true;
+            const top = `${convRect.top - frameRect.top}px`;
+            const height = `${convRect.height}px`;
+            if (align === 'right') {
+                const right = `${frameRect.right - convRect.right}px`;
+                if (panel.style.top === top && panel.style.height === height
+                    && panel.style.right === right && panel.style.left === '')
+                    return false;
+                panel.style.top = top;
+                panel.style.height = height;
+                panel.style.right = right;
+                panel.style.left = '';
+                return true;
+            }
+            const left = `${convRect.left - frameRect.left}px`;
+            if (panel.style.top === top && panel.style.height === height
+                && panel.style.left === left && panel.style.right === '')
+                return false;
+            panel.style.top = top;
+            panel.style.height = height;
+            panel.style.left = left;
+            panel.style.right = '';
+            return true;
+        };
+        const loop = () => {
+            if (stopped)
+                return;
+            raf = 0;
+            idle = applyLayout() ? 0 : idle + 1;
+            if (idle < 3)
+                raf = requestAnimationFrame(loop);
+        };
+        const wake = () => {
+            if (stopped)
+                return;
+            idle = 0;
+            if (raf === 0)
+                raf = requestAnimationFrame(loop);
+        };
+        observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(wake);
+        if (observer !== null) {
+            const panel = panelRef.current;
+            const frame = panel?.closest('[data-shell-overlay]')?.parentElement ?? null;
+            const convRoot = findConvRoot();
+            if (frame !== null) {
+                observer.observe(frame, { box: 'border-box' });
+                observed.frame = frame;
+            }
+            if (convRoot !== null) {
+                observer.observe(convRoot, { box: 'border-box' });
+                observed.convRoot = convRoot;
+            }
+        }
+        wake();
+        window.addEventListener('resize', wake);
+        return () => {
+            stopped = true;
+            if (raf !== 0)
+                cancelAnimationFrame(raf);
+            observer?.disconnect();
+            window.removeEventListener('resize', wake);
+        };
+    }, [panelRef, visible, align]);
+}
+/**
+ * scroll-spy：标记阅读位置所在 turn（35% 视口线，core/active-dot 判据）。
+ * 仅已渲染行参与；rAF 合并 + 捕获式 scroll + ResizeObserver 跟踪 flow 重挂载。
+ */
+export function useScrollSpyDot(visible, dots) {
+    const [currentKey, setCurrentKey] = useState(null);
+    useEffect(() => {
+        if (!visible || dots.length === 0) {
+            setCurrentKey(null);
+            return;
+        }
+        let raf = 0;
+        let disposed = false;
+        let observedFlow = null;
+        const compute = () => {
+            raf = 0;
+            const scrollport = document.querySelector('[data-conversation-scroll]');
+            const flow = document.querySelector('[data-chat-flow]');
+            if (scrollport === null || flow === null) {
+                setCurrentKey(null);
+                return;
+            }
+            if (observer !== null && observedFlow !== flow) {
+                observer.disconnect();
+                observer.observe(flow);
+                observedFlow = flow;
+            }
+            const portRect = scrollport.getBoundingClientRect();
+            if (portRect.height <= 0)
+                return;
+            const rendered = new Map();
+            for (const row of flow.querySelectorAll('[data-chat-anchor-key]')) {
+                const key = row.dataset.chatAnchorKey;
+                if (key !== undefined && !rendered.has(key))
+                    rendered.set(key, row);
+            }
+            const rows = [];
+            for (const dot of dots) {
+                for (const memberKey of dot.memberKeys) {
+                    const row = rendered.get(memberKey);
+                    if (row !== undefined) {
+                        rows.push({ key: dot.key, top: row.getBoundingClientRect().top - portRect.top });
+                        break;
+                    }
+                }
+            }
+            const next = nearestReadDot(rows, READING_LINE_TOP);
+            setCurrentKey((prev) => (prev === next ? prev : next));
+        };
+        const schedule = () => {
+            if (!disposed && raf === 0)
+                raf = requestAnimationFrame(compute);
+        };
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(schedule);
+        compute();
+        document.addEventListener('scroll', schedule, true);
+        window.addEventListener('resize', schedule);
+        return () => {
+            disposed = true;
+            if (raf !== 0)
+                cancelAnimationFrame(raf);
+            observer?.disconnect();
+            document.removeEventListener('scroll', schedule, true);
+            window.removeEventListener('resize', schedule);
+        };
+    }, [visible, dots]);
+    return [currentKey, setCurrentKey];
+}
+/** 设置订阅：align / bandHeight / scrollBehavior / 显示开关 跟随 */
+export function useNavSettings(injected) {
+    const [style, setStyle] = useState(() => injected?.style() ?? 'minimal');
+    const [align, setAlign] = useState(() => injected?.align() ?? 'left');
+    const [bandHeight, setBandHeight] = useState(() => injected?.bandHeight() ?? 'standard');
+    const [cardCount, setCardCount] = useState(() => injected?.cardCount() ?? 5);
+    const [scrollBehavior, setScrollBehavior] = useState(() => injected?.scrollBehavior() ?? 'smooth');
+    const [showCount, setShowCount] = useState(() => injected?.showCount() ?? 'show');
+    const [showSearch, setShowSearch] = useState(() => injected?.showSearch() ?? 'show');
+    const [showQuickSettings, setShowQuickSettings] = useState(() => injected?.showQuickSettings() ?? 'show');
+    useEffect(() => {
+        if (injected === undefined)
+            return;
+        return injected.subscribeSettings(() => {
+            setStyle(injected.style());
+            setAlign(injected.align());
+            setBandHeight(injected.bandHeight());
+            setCardCount(injected.cardCount());
+            setScrollBehavior(injected.scrollBehavior());
+            setShowCount(injected.showCount());
+            setShowSearch(injected.showSearch());
+            setShowQuickSettings(injected.showQuickSettings());
+        });
+    }, [injected]);
+    return { style, align, bandHeight, cardCount, scrollBehavior, showCount, showSearch, showQuickSettings };
+}
+/** 翻页模型：▲/▼ 步进 + 溢出检测 + 错峰弹出动画 */
+export function usePaging(listRef, dots, align) {
+    const [scrollable, setScrollable] = useState(false);
+    const [scrollPos, setScrollPos] = useState({ top: 0, max: 0 });
+    const [revealed, setRevealed] = useState(null);
+    const revealTimerRef = useRef(null);
+    const syncScroll = () => {
+        const list = listRef.current;
+        if (list === null)
+            return;
+        setScrollPos({ top: list.scrollTop, max: Math.max(0, list.scrollHeight - list.clientHeight) });
+    };
+    const pageBy = (dir) => {
+        const list = listRef.current;
+        if (list === null)
+            return;
+        const max = Math.max(0, list.scrollHeight - list.clientHeight);
+        const target = clampScrollTop(list.scrollTop + dir * pageStep(DOT_SIZE, DOT_GAP), max); // 固定 5 节点/页
+        if (target === list.scrollTop)
+            return;
+        const band = list.getBoundingClientRect();
+        const els = Array.from(list.querySelectorAll('[data-mega-chat-nav-key]'));
+        const wasVisible = els.map((el) => {
+            const r = el.getBoundingClientRect();
+            return r.bottom > band.top && r.top < band.bottom;
+        });
+        list.scrollTop = target;
+        syncScroll();
+        const next = new Map();
+        const fresh = [];
+        els.forEach((el, i) => {
+            if (wasVisible[i])
+                return;
+            const r = el.getBoundingClientRect();
+            const key = el.dataset.megaChatNavKey;
+            if (key !== undefined && r.bottom > band.top && r.top < band.bottom)
+                fresh.push(key);
+        });
+        if (dir === 1)
+            fresh.reverse();
+        fresh.forEach((key, order) => next.set(key, { dir, order }));
+        if (next.size === 0)
+            return;
+        setRevealed(next);
+        if (revealTimerRef.current !== null)
+            window.clearTimeout(revealTimerRef.current);
+        revealTimerRef.current = window.setTimeout(() => setRevealed(null), 320 + next.size * 35 + 120);
+    };
+    // 溢出检测：dots 或布局变化时重测
+    useEffect(() => {
+        const list = listRef.current;
+        if (list === null)
+            return;
+        const check = () => {
+            setScrollable(list.scrollHeight > list.clientHeight + 1);
+            syncScroll();
+        };
+        check();
+        if (typeof ResizeObserver === 'undefined')
+            return;
+        const observer = new ResizeObserver(check);
+        observer.observe(list);
+        return () => observer.disconnect();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dots, align]);
+    useEffect(() => () => {
+        if (revealTimerRef.current !== null)
+            window.clearTimeout(revealTimerRef.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return {
+        scrollable,
+        scrollPos,
+        revealed,
+        syncScroll,
+        pageBy,
+        canPageUp: scrollable && scrollPos.top > 0,
+        canPageDown: scrollable && scrollPos.top < scrollPos.max - 1, // 1px 容差：滚动到底不再显示 ▼
+    };
+}
+/** 悬停聚焦：选中点 + 邻居窗口 + 级联几何；240ms 清焦延迟（鼠标可移入级联卡） */
+export function useFocus(dots, align, radius = FOCUS_RADIUS) {
+    const [focus, setFocus] = useState(null);
+    const clearTimerRef = useRef(null);
+    const cancelClearFocus = () => {
+        if (clearTimerRef.current !== null) {
+            window.clearTimeout(clearTimerRef.current);
+            clearTimerRef.current = null;
+        }
+    };
+    const scheduleClearFocus = () => {
+        cancelClearFocus();
+        clearTimerRef.current = window.setTimeout(() => setFocus(null), 240);
+    };
+    const openFocus = (dot, target) => {
+        const index = dots.findIndex((d) => d.key === dot.key);
+        if (index < 0)
+            return;
+        cancelClearFocus();
+        const r = target.getBoundingClientRect();
+        const horizontal = align === 'right'
+            ? { right: window.innerWidth - r.left + 10 }
+            : { left: r.right + 10 };
+        const lo = Math.max(0, index - radius);
+        const hi = Math.min(dots.length - 1, index + radius);
+        const items = [];
+        for (let i = lo; i <= hi; i++) {
+            items.push({ dot: dots[i], distance: Math.abs(i - index) });
+        }
+        setFocus({ key: dot.key, items, centerY: r.top + r.height / 2, ...horizontal });
+    };
+    // 半径（卡片数）变化时重算已打开的聚焦窗口
+    useEffect(() => {
+        if (focus === null)
+            return;
+        const index = dots.findIndex((d) => d.key === focus.key);
+        if (index < 0)
+            return;
+        const lo = Math.max(0, index - radius);
+        const hi = Math.min(dots.length - 1, index + radius);
+        const items = [];
+        for (let i = lo; i <= hi; i++) {
+            items.push({ dot: dots[i], distance: Math.abs(i - index) });
+        }
+        setFocus((prev) => (prev !== null && prev.key === focus.key ? { ...prev, items } : prev));
+    }, [radius, dots, focus?.key]);
+    useEffect(() => () => {
+        if (clearTimerRef.current !== null)
+            window.clearTimeout(clearTimerRef.current);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return { focus, openFocus, cancelClearFocus, scheduleClearFocus };
+}
+/** 跳转失败提示：监听 mega-chat-nav:jump-failed 事件 */
+export function useJumpHint(t) {
+    const [hint, setHint] = useState(null);
+    const timerRef = useRef(null);
+    useEffect(() => {
+        const onJumpFailed = (event) => {
+            const code = event.detail;
+            const key = code ?? 'TIMEOUT';
+            const text = t(['jump.inactive', 'jump.hidden', 'jump.notfound', 'jump.timeout'].includes(key) ? key : 'jump.timeout');
+            setHint(text);
+            if (timerRef.current !== null)
+                window.clearTimeout(timerRef.current);
+            timerRef.current = window.setTimeout(() => setHint(null), 1800);
+        };
+        window.addEventListener('mega-chat-nav:jump-failed', onJumpFailed);
+        return () => {
+            window.removeEventListener('mega-chat-nav:jump-failed', onJumpFailed);
+            if (timerRef.current !== null)
+                window.clearTimeout(timerRef.current);
+        };
+    }, [t]);
+    return { hint };
+}
+export { formatNavTime, focusCardMetrics, focusScale, focusTier };

package/lib/client/components/shared/types.js

@@ -0,0 +1 @@
+export {};

package/lib/client/config.js

@@ -0,0 +1 @@
+export {};

package/lib/client/engines/jump.js

@@ -0,0 +1,34 @@
+/** 在滚动容器内按锚点 key 定位行元素（持久 id 精确 → 13:input-message 前缀兜底） */
+export function findAnchorRow(scrollHost, key) {
+    const esc = (k) => CSS.escape(k);
+    let el = scrollHost.querySelector('[data-chat-anchor-key="' + esc(key) + '"]');
+    if (el)
+        return el;
+    // 兜底：持久 id 以 13:input-message 前缀挂在行上（kind 前缀公式）
+    el = scrollHost.querySelector('[data-chat-anchor-key*="' + esc(key) + '"]');
+    if (el)
+        return el;
+    // 兜底：seq 形式（seq:<n>）
+    if (key.startsWith('seq:')) {
+        const n = key.slice(4);
+        el = scrollHost.querySelector('[data-chat-anchor-key*="' + n + '"]');
+        if (el)
+            return el;
+    }
+    return null;
+}
+/** 平滑滚动到行（reduced-motion 用瞬时；返回是否成功） */
+export function scrollToRow(scrollHost, row, behavior) {
+    const rowRect = row.getBoundingClientRect();
+    const hostRect = scrollHost.getBoundingClientRect();
+    const target = scrollHost;
+    const top = target.scrollTop + (rowRect.top - hostRect.top) - 16;
+    scrollHost.scrollTo({ top: Math.max(0, top), behavior });
+    return true;
+}
+/** 原文脉冲高亮：给目标行挂临时 class，pulseMs 后移除 */
+export function pulseRow(row, pulseMs) {
+    row.classList.add('mgs-jump-flash');
+    const timer = setTimeout(() => row.classList.remove('mgs-jump-flash'), pulseMs);
+    return () => { clearTimeout(timer); row.classList.remove('mgs-jump-flash'); };
+}

package/lib/client/engines/useAtBottom.js

@@ -0,0 +1,25 @@
+// 触底判定（新消息跟随用）：scrollTop+clientHeight >= scrollHeight-阈值
+import { useEffect, useRef, useState } from 'react';
+export function useAtBottom(threshold = 24) {
+    const [atBottom, setAtBottom] = useState(true);
+    const ref = useRef(true);
+    ref.current = atBottom;
+    useEffect(() => {
+        const host = document.querySelector('[data-conversation-scroll]');
+        if (!host)
+            return;
+        const el = host;
+        const check = () => {
+            const next = el.scrollTop + el.clientHeight >= el.scrollHeight - threshold;
+            setAtBottom((prev) => (prev === next ? prev : next));
+        };
+        check();
+        el.addEventListener('scroll', check, { passive: true });
+        const iv = setInterval(check, 2000);
+        return () => {
+            el.removeEventListener('scroll', check);
+            clearInterval(iv);
+        };
+    }, [threshold]);
+    return atBottom;
+}

package/lib/client/engines/useJump.js

@@ -0,0 +1,40 @@
+// 共用跳转 hook：窗口内定位 → 未命中按需扩窗（guard + 串行 loadOlder）→ 原文脉冲高亮
+import { useState } from 'react';
+import { findAnchorRow, scrollToRow, pulseRow } from "./jump.js";
+export function useJump(scrollBehavior, pulseMs, opts) {
+    const [failed, setFailed] = useState(false);
+    const [jumping, setJumping] = useState(false);
+    const jump = async (key) => {
+        const host = document.querySelector('[data-conversation-scroll]');
+        if (!host) {
+            setFailed(true);
+            return;
+        }
+        let row = findAnchorRow(host, key);
+        // 窗口外：按需 loadOlder 逐页补载，以目标 key 出现为界（guard 快速失败）
+        if (!row && opts?.getSession) {
+            const session = opts.getSession();
+            const guard = opts.maxPages ?? 120;
+            for (let i = 0; i < guard && session; i++) {
+                const snap = session.getSnapshot();
+                if (!snap.hasMore || snap.loadingOlder)
+                    break;
+                setJumping(true);
+                await session.loadOlder();
+                row = findAnchorRow(host, key);
+                if (row)
+                    break;
+            }
+            setJumping(false);
+        }
+        if (!row) {
+            setFailed(true);
+            return;
+        }
+        setJumping(true);
+        scrollToRow(host, row, scrollBehavior);
+        const clear = pulseRow(row, pulseMs);
+        setTimeout(() => { clear(); setJumping(false); setFailed(false); }, Math.max(pulseMs, 800));
+    };
+    return { failed, jumping, jump };
+}

package/lib/client/engines/useScrollSpy.js

@@ -0,0 +1,88 @@
+// ScrollSpyEngine：40% 视口线判据 + rAF 单帧合并 + 行锚点缓存（只改 class 不重建 DOM）
+import { useEffect, useRef, useState } from 'react';
+import { readingLineY, nearestIndex } from "../pure.js";
+/** 行锚点缓存：一次扫描建立 key → 行元素（MutationObserver 失效重扫） */
+export function scanAnchors(root) {
+    const map = new Map();
+    for (const el of root.querySelectorAll('[data-chat-anchor-key]')) {
+        const k = el.dataset.chatAnchorKey;
+        if (k)
+            map.set(k, el);
+    }
+    return map;
+}
+export function useScrollSpy(opts) {
+    const [activeKey, setActiveKey] = useState(null);
+    const state = useRef(opts);
+    state.current = opts;
+    const anchorsRef = useRef(null);
+    const dirtyRef = useRef(true);
+    useEffect(() => {
+        if (!opts.enabled || opts.keys.length === 0) {
+            setActiveKey(null);
+            return;
+        }
+        const host = document.querySelector('[data-conversation-scroll]');
+        if (!host)
+            return;
+        let raf = 0;
+        let lastRun = 0;
+        let stopped = false;
+        const THROTTLE_MS = 60;
+        const ensureAnchors = () => {
+            if (dirtyRef.current || !anchorsRef.current) {
+                anchorsRef.current = scanAnchors(host);
+                dirtyRef.current = false;
+            }
+            return anchorsRef.current;
+        };
+        const compute = () => {
+            if (stopped)
+                return;
+            const s = state.current;
+            if (s.keys.length === 0)
+                return;
+            const anchors = ensureAnchors();
+            const rect = host.getBoundingClientRect();
+            const line = readingLineY({ top: rect.top, height: rect.height }, s.rule);
+            const ys = [];
+            for (const k of s.keys) {
+                const el = anchors.get(k);
+                ys.push(el ? el.getBoundingClientRect().top : Infinity);
+            }
+            const idx = nearestIndex(ys.length, line, (i) => ys[i]);
+            let key = idx >= 0 ? s.keys[idx] : null;
+            if (s.atBottom?.() && s.keys.length > 0)
+                key = s.keys[s.keys.length - 1];
+            setActiveKey((prev) => (prev === key ? prev : key));
+        };
+        const schedule = () => {
+            const now = performance.now();
+            if (now - lastRun >= THROTTLE_MS) {
+                lastRun = now;
+                compute();
+            }
+            else {
+                cancelAnimationFrame(raf);
+                raf = requestAnimationFrame(schedule);
+            }
+        };
+        const onScroll = () => {
+            cancelAnimationFrame(raf);
+            raf = requestAnimationFrame(schedule);
+        };
+        const mo = new MutationObserver(() => { dirtyRef.current = true; });
+        mo.observe(host, { subtree: true, childList: true });
+        host.addEventListener('scroll', onScroll, { passive: true });
+        const iv = setInterval(compute, 2000);
+        compute();
+        return () => {
+            stopped = true;
+            cancelAnimationFrame(raf);
+            clearInterval(iv);
+            mo.disconnect();
+            host.removeEventListener('scroll', onScroll);
+        };
+    }, [opts.enabled, opts.keys.length]);
+    return activeKey;
+}

package/lib/client/hooks.js

@@ -0,0 +1,11 @@
+// 共享 hooks
+import { useEffect, useState } from 'react';
+export function useScope(scope) {
+    const [, force] = useState(0);
+    useEffect(() => {
+        if (!scope)
+            return;
+        return scope.subscribe(() => force((n) => n + 1));
+    }, [scope]);
+    return scope?.getSnapshot().value;
+}