dsh-mega-chat-nav 0.1.1

package/lib/client/components/settings/SettingsPage.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// 完整配置页（mega-settings 成员页与自足入口共用）
+import { useEffect, useState } from 'react';
+import { ALIGN_OPTIONS, CARD_ITEM_OPTIONS, CARD_OPTIONS, MARK_TONE_OPTIONS, SCROLL_OPTIONS, SEARCH_SCOPE_OPTIONS, SHOW_OPTIONS, STYLE_OPTIONS, STYLE_CAPABILITIES } from "../../settings.js";
+function Seg(props) {
+    return (_jsx("div", { className: "mgcn-segmented", role: "radiogroup", children: props.options.map((o) => (_jsx("button", { type: "button", role: "radio", "aria-checked": props.value === o, className: props.value === o ? 'mgcn-segment mgcn-segmentActive' : 'mgcn-segment', onClick: () => props.onPick(o), children: props.labels[String(o)] ?? String(o) }, String(o)))) }));
+}
+function Field({ label, desc, children }) {
+    return (_jsxs("div", { className: "mgcn-settingsRow", children: [_jsxs("div", { className: "mgcn-settingsLabel", children: [_jsx("p", { className: "mgcn-settingsTitle", children: label }), desc !== undefined ? _jsx("p", { className: "mgcn-settingsDesc", children: desc }) : null] }), _jsx("div", { className: "mgcn-settingsControl", children: children })] }));
+}
+function useSettingsTick(subscribe) {
+    const [, bump] = useState(0);
+    useEffect(() => subscribe(() => bump((n) => n + 1)), [subscribe]);
+}
+export function SettingsPage(props) {
+    const { injected, t, hosted } = props;
+    useSettingsTick(injected.subscribeSettings);
+    if (hosted === true) {
+        return _jsx("div", { className: "mgcn-settings", children: t('settings.hosted') });
+    }
+    return (_jsxs("div", { className: "mgcn-settings", children: [_jsx(Field, { label: t('config.style'), children: _jsx(Seg, { options: STYLE_OPTIONS, value: injected.style(), labels: { minimal: t('config.style.minimal'), codex: t('config.style.codex'), deepseek: t('config.style.deepseek') }, onPick: (v) => injected.setStyle(v) }) }), _jsx(Field, { label: t('config.railOffset'), desc: t('config.railOffset.desc'), children: _jsxs("div", { className: "mgcn-sliderRow", children: [_jsx("input", { type: "range", min: "0", max: "32", step: "1", value: injected.railOffset(), onChange: (e) => injected.setRailOffset(Number(e.target.value)) }), _jsxs("span", { className: "mgcn-sliderValue", children: [injected.railOffset(), "px"] })] }) }), _jsx(Field, { label: t('config.align'), desc: t('settings.align.desc'), children: _jsx(Seg, { options: ALIGN_OPTIONS, value: injected.align(), labels: { left: t('settings.align.left'), right: t('settings.align.right') }, onPick: (v) => injected.setAlign(v) }) }), _jsx(Field, { label: t('config.scrollBehavior'), desc: t('config.scrollBehavior.desc'), children: _jsx(Seg, { options: SCROLL_OPTIONS, value: injected.scrollBehavior(), labels: { smooth: t('config.scrollBehavior.smooth'), instant: t('config.scrollBehavior.instant') }, onPick: (v) => injected.setScrollMode(v) }) }), STYLE_CAPABILITIES[injected.style()].hoverCards ? (_jsxs(_Fragment, { children: [_jsx(Field, { label: t('config.cardCount'), desc: t('config.cardCount.desc'), children: _jsx(Seg, { options: CARD_OPTIONS, value: injected.cardCount(), labels: { 1: '1', 3: '3', 5: '5' }, onPick: (v) => injected.setCardCount(v) }) }), _jsx(Field, { label: t('config.cardItems'), desc: t('config.cardItems.desc'), children: _jsx("div", { className: "mgcn-checkGroup", children: CARD_ITEM_OPTIONS.map((item) => {
+                                const on = injected.cardItems().includes(item);
+                                return (_jsxs("label", { className: "mgcn-checkItem", children: [_jsx("input", { type: "checkbox", checked: on, onChange: (e) => {
+                                                const items = e.target.checked
+                                                    ? [...injected.cardItems(), item]
+                                                    : injected.cardItems().filter((x) => x !== item);
+                                                injected.setCardItems(items);
+                                            } }), _jsx("span", { children: t('config.cardItems.' + item) })] }, item));
+                            }) }) })] })) : null, injected.style() === 'codex' ? (_jsx(Field, { label: t('config.markTone'), desc: t('config.markTone.desc'), children: _jsx(Seg, { options: MARK_TONE_OPTIONS, value: injected.markTone(), labels: { soft: t('config.markTone.soft'), deep: t('config.markTone.deep') }, onPick: (v) => injected.setMarkTone(v) }) })) : null, _jsx(Field, { label: t('config.searchScopes'), desc: t('config.searchScopes.desc'), children: _jsx("div", { className: "mgcn-checkGroup", children: SEARCH_SCOPE_OPTIONS.map((scope) => {
+                        const on = injected.searchScopes().includes(scope);
+                        const locked = scope === 'user'; // 用户必选，不可取消
+                        return (_jsxs("label", { className: "mgcn-checkItem", children: [_jsx("input", { type: "checkbox", checked: on, disabled: locked, onChange: (e) => {
+                                        const items = e.target.checked
+                                            ? [...injected.searchScopes(), scope]
+                                            : injected.searchScopes().filter((x) => x !== scope);
+                                        injected.setSearchScopes(items);
+                                    } }), _jsx("span", { children: t('config.searchScopes.' + scope) })] }, scope));
+                    }) }) }), _jsx(Field, { label: t('config.showQuickSettings'), children: _jsx(ModeSeg, { value: injected.showQuickSettings(), onChange: (v) => injected.setShowQuickSettings(v), t: t }) }), _jsx(Field, { label: t('config.showSearch'), children: _jsx(ModeSeg, { value: injected.showSearch(), onChange: (v) => injected.setShowSearch(v), t: t }) }), _jsx(Field, { label: t('config.showFavorites'), children: _jsx(ModeSeg, { value: injected.showFavorites(), onChange: (v) => injected.setShowFavorites(v), t: t }) }), _jsx(Field, { label: t('config.showCount'), children: _jsx(ModeSeg, { value: injected.showCount(), onChange: (v) => injected.setShowCount(v), t: t }) }), STYLE_CAPABILITIES[injected.style()].paging ? (_jsx(Field, { label: t('config.showPaging'), children: _jsx(ModeSeg, { value: injected.showPaging(), onChange: (v) => injected.setShowPaging(v), t: t }) })) : null] }));
+}
+function ModeSeg({ value, onChange, t }) {
+    return (_jsx(Seg, { options: SHOW_OPTIONS, value: value, labels: {
+            show: t('config.showMode.show'),
+            peek: t('config.showMode.peek'),
+            hide: t('config.showMode.hide'),
+        }, onPick: (v) => onChange(v) }));
+}

package/lib/client/components/settings/SettingsTab.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 设置页（settings.plugins.tab）：对齐 + 翻页数量
+import { useEffect, useState } from 'react';
+import { AlignOptions, AnchorRuleOptions, PageSizeOptions, ScrollModeOptions } from "../../../core/config.js";
+function useSettingsTick(subscribe) {
+    const [, bump] = useState(0);
+    useEffect(() => subscribe(() => bump((n) => n + 1)), [subscribe]);
+}
+export function SettingsTab(props) {
+    useSettingsTick(props.subscribeSettings);
+    const align = props.align();
+    const pageSize = props.pageSize();
+    const anchorRule = props.anchorRule();
+    const scrollBehavior = props.scrollBehavior();
+    const t = props.t;
+    return (_jsxs("div", { className: "mgs-settings", children: [_jsx("p", { className: "mgs-settingsTitle", children: t('settings.align.title') }), _jsx("p", { className: "mgs-settingsDesc", children: t('settings.align.desc') }), _jsx("div", { className: "mgs-segmented", role: "radiogroup", "aria-label": t('settings.align.title'), children: AlignOptions.map((option) => (_jsx("button", { type: "button", role: "radio", "aria-checked": align === option, className: align === option ? 'mgs-segment mgs-segmentActive' : 'mgs-segment', onClick: () => props.setAlign(option), children: t(option === 'left' ? 'settings.align.left' : 'settings.align.right') }, option))) }), _jsx("p", { className: "mgs-settingsTitle", children: t('settings.pagesize.title') }), _jsx("p", { className: "mgs-settingsDesc", children: t('settings.pagesize.desc') }), _jsx("div", { className: "mgs-segmented", role: "radiogroup", "aria-label": t('settings.pagesize.title'), children: PageSizeOptions.map((option) => (_jsx("button", { type: "button", role: "radio", "aria-checked": pageSize === option, className: pageSize === option ? 'mgs-segment mgs-segmentActive' : 'mgs-segment', onClick: () => props.setPageSize(option), children: option }, option))) }), _jsx("p", { className: "mgs-settingsTitle", children: t('config.anchorRule') }), _jsx("p", { className: "mgs-settingsDesc", children: t('config.anchorRule.desc') }), _jsx("div", { className: "mgs-segmented", role: "radiogroup", "aria-label": t('config.anchorRule'), children: AnchorRuleOptions.map((option) => (_jsx("button", { type: "button", role: "radio", "aria-checked": anchorRule === option, className: anchorRule === option ? 'mgs-segment mgs-segmentActive' : 'mgs-segment', onClick: () => props.setAnchorRule(option), children: t('config.anchorRule.' + option) }, option))) }), _jsx("p", { className: "mgs-settingsTitle", children: t('config.scrollBehavior') }), _jsx("p", { className: "mgs-settingsDesc", children: t('config.scrollBehavior.desc') }), _jsx("div", { className: "mgs-segmented", role: "radiogroup", "aria-label": t('config.scrollBehavior'), children: ScrollModeOptions.map((option) => (_jsx("button", { type: "button", role: "radio", "aria-checked": scrollBehavior === option, className: scrollBehavior === option ? 'mgs-segment mgs-segmentActive' : 'mgs-segment', onClick: () => props.setScrollMode(option), children: t('config.scrollBehavior.' + option) }, option))) })] }));
+}

package/lib/client/components/settings/StandaloneSettings.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// 自足完整配置入口：宿主（mega-settings）已收纳时让位提示，否则渲染完整配置页
+import { useEffect, useState } from 'react';
+import { SettingsPage } from "./SettingsPage.js";
+export function StandaloneSettings(props) {
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+        const check = () => {
+            const n = props.slots?.entries?.('mega.settings.member')?.length ?? 0;
+            setHosted(n > 0);
+        };
+        check();
+        return props.slots?.subscribe?.('mega.settings.member', check);
+    }, [props.slots]);
+    return _jsx(SettingsPage, { injected: props.injected, t: props.t, hosted: hosted });
+}

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

@@ -0,0 +1,26 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+import { focusCardMetrics, formatNavTime } from "../shared/hooks.js";
+export function Cascade(props) {
+    const { focus, align, onJump, onEnter, onLeave } = props;
+    return createPortal(_jsx("div", { className: align === 'right' ? 'mgs-cascade mgs-cascadeRight' : 'mgs-cascade', style: {
+            ...(focus.left !== undefined ? { left: focus.left } : {}),
+            ...(focus.right !== undefined ? { right: focus.right } : {}),
+            top: focus.centerY,
+            transform: 'translateY(-50%)',
+        }, onMouseEnter: onEnter, onMouseLeave: onLeave, children: focus.items.map((item) => {
+            const metrics = focusCardMetrics(item.distance);
+            if (metrics === null)
+                return null;
+            const isSelected = item.distance === 0;
+            const text = item.dot.texts.join(' · ');
+            const cls = isSelected
+                ? 'mgs-card mgs-cardSelected' + (align === 'right' ? ' mgs-cardSelectedRight' : '')
+                : 'mgs-card';
+            return (_jsxs("div", { className: cls, role: "button", tabIndex: -1, style: { width: metrics.widthPx }, onClick: () => onJump(item.dot), children: [isSelected && item.dot.turn !== null ? (_jsxs("div", { className: "mgs-cardTitle", children: ["Turn ", item.dot.turn] })) : null, _jsx("div", { className: isSelected ? 'mgs-cardBody' : 'mgs-cardClamp', style: isSelected
+                            ? undefined
+                            : { WebkitLineClamp: metrics.maxLines, fontSize: metrics.fontSize }, children: isSelected
+                            ? item.dot.texts.map((line, lineIndex) => (_jsx("div", { className: "mgs-cardLine", children: line }, lineIndex)))
+                            : text }), _jsx("div", { className: "mgs-cardTime", children: formatNavTime(item.dot.time, Date.now()) })] }, item.dot.key));
+        }) }), document.body);
+}

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

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ⚙ 组件内面板：高频配置（对齐方式/节点栏高度/悬停卡片数/显示模式）
+import { useEffect, useState } from 'react';
+import { AlignOptions, BandHeightOptions, CardCountOptions, ShowModeOptions } from "../../../core/config.js";
+function Seg(props) {
+    return (_jsx("div", { className: "mgs-segmented", role: "radiogroup", children: props.options.map((o) => (_jsx("button", { type: "button", role: "radio", "aria-checked": props.value === o, className: props.value === o ? 'mgs-segment mgs-segmentActive' : 'mgs-segment', onClick: () => props.onPick(o), children: props.labels[String(o)] ?? String(o) }, o))) }));
+}
+function useSettingsTick(subscribe) {
+    const [, bump] = useState(0);
+    useEffect(() => subscribe(() => bump((n) => n + 1)), [subscribe]);
+}
+export function ConfigPanel(props) {
+    const { injected, t, onClose } = props;
+    useSettingsTick(injected.subscribeSettings);
+    return (_jsxs("div", { className: "mgs-config-panel", role: "dialog", "aria-label": t('config.title'), children: [_jsxs("div", { className: "mgs-config-head", children: [_jsxs("span", { className: "mgs-config-title", children: [t('config.style.' + injected.style()), " \u00B7 ", t('config.settings')] }), _jsx("button", { type: "button", className: "mgs-config-close", "aria-label": t('config.close'), onClick: onClose, children: "\u2715" })] }), _jsxs("div", { className: "mgs-config-row", children: [_jsx("span", { className: "mgs-config-label", children: t('config.align') }), _jsx(Seg, { options: AlignOptions, value: injected.align(), labels: { left: t('settings.align.left'), right: t('settings.align.right') }, onPick: (v) => injected.setAlign(v) })] }), _jsxs("div", { className: "mgs-config-row", children: [_jsx("span", { className: "mgs-config-label", children: t('config.bandHeight') }), _jsx(Seg, { options: BandHeightOptions, value: injected.bandHeight(), labels: {
+                            compact: t('config.bandHeight.compact'),
+                            standard: t('config.bandHeight.standard'),
+                            tall: t('config.bandHeight.tall'),
+                        }, onPick: (v) => injected.setBandHeight(v) })] }), _jsxs("div", { className: "mgs-config-row", children: [_jsx("span", { className: "mgs-config-label", children: t('config.cardCount') }), _jsx(Seg, { options: CardCountOptions, value: injected.cardCount(), labels: { 1: '1', 3: '3', 5: '5' }, onPick: (v) => injected.setCardCount(v) })] }), _jsx("div", { className: "mgs-config-sep" }), _jsxs("div", { className: "mgs-config-row", children: [_jsx("span", { className: "mgs-config-label", children: t('config.showCount') }), _jsx(ModeSeg, { value: injected.showCount(), onChange: (v) => injected.setShowCount(v), t: t })] }), _jsxs("div", { className: "mgs-config-row", children: [_jsx("span", { className: "mgs-config-label", children: t('config.showSearch') }), _jsx(ModeSeg, { value: injected.showSearch(), onChange: (v) => injected.setShowSearch(v), t: t })] }), _jsxs("div", { className: "mgs-config-row", children: [_jsx("span", { className: "mgs-config-label", children: t('config.showQuickSettings') }), _jsx(ModeSeg, { value: injected.showQuickSettings(), onChange: (v) => injected.setShowQuickSettings(v), t: t })] })] }));
+}
+function ModeSeg({ value, onChange, t }) {
+    return (_jsx(Seg, { options: ShowModeOptions, value: value, labels: {
+            show: t('config.showMode.show'),
+            peek: t('config.showMode.peek'),
+            hide: t('config.showMode.hide'),
+        }, onPick: (v) => onChange(v) }));
+}

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Dot(props) {
+    const { scale, className, label, index, keyName, focused, revealed, onEnter, onClick } = props;
+    return (_jsx("button", { type: "button", className: className, style: {
+            transform: 'scale(' + scale + ')',
+            ...(revealed !== undefined ? { animationDelay: revealed.order * 35 + 'ms' } : {}),
+        }, "data-mega-chat-nav-focused": focused ? 'true' : undefined, "data-mega-chat-nav-index": index, "data-mega-chat-nav-key": keyName, "aria-label": label, onMouseEnter: (e) => onEnter(e.currentTarget), onClick: onClick }));
+}

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createPortal } from 'react-dom';
+export function Hint({ text, align }) {
+    return createPortal(_jsx("div", { className: "mgs-hint", style: align === 'right' ? { right: 60, top: 20 } : { left: 60, top: 20 }, children: text }), document.body);
+}

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

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function PagingButton(props) {
+    const cls = props.dir === -1 ? 'mgs-navBtn mgs-navUp' : 'mgs-navBtn mgs-navDown';
+    return (_jsx("button", { type: "button", className: cls, "aria-label": props.label, style: { visibility: props.visible ? 'visible' : 'hidden' }, onMouseEnter: props.onEnter, onMouseLeave: props.onLeave, onClick: props.onClick }));
+}

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

@@ -0,0 +1,78 @@
+// RailShell：跨风格装配壳——会话/数据/布局/滚动/聚焦/提示全部在此组合，
+// 通过 render-prop 把状态交给风格组件（样式与形态由风格组件自持）。
+import { useEffect, useRef, useState } from 'react';
+import { useVisibleSession, useSessionDots, useRailLayout, useScrollSpyDot, useNavSettings, usePaging, useFocus, useJumpHint } from "./hooks.js";
+import { DOT_GAP, DOT_SIZE } from "../../../core/utils/measure.js";
+export function RailShell(props) {
+    const { injected, useSessions, t } = props;
+    const panelRef = useRef(null);
+    const listRef = useRef(null);
+    const [jumpingKey, setJumpingKey] = useState(null);
+    const { sessionId, visible } = useVisibleSession(useSessions);
+    const dots = useSessionDots(injected, sessionId, visible);
+    const { style, align, bandHeight, cardCount, scrollBehavior, showCount, showSearch, showQuickSettings } = useNavSettings(injected);
+    useRailLayout(panelRef, visible, align);
+    const [currentKey] = useScrollSpyDot(visible, dots);
+    const focusRadius = Math.floor((cardCount - 1) / 2);
+    const { focus, openFocus, cancelClearFocus, scheduleClearFocus } = useFocus(dots, align, focusRadius);
+    const { hint } = useJumpHint(t);
+    const { scrollable, revealed, syncScroll, pageBy, canPageUp, canPageDown } = usePaging(listRef, dots, align);
+    // 激活节点跟随（居中定位，参考实现 scrollNavToDot）：
+    // 点击跳转后不冻结——正文平滑滚动时激活随正文实时联动，导航列表持续跟随，
+    // 滚动稳定后激活落在目标节点。点击瞬间已由 forceKey 高亮目标。
+    useEffect(() => {
+        const list = listRef.current;
+        if (list === null || currentKey === null)
+            return;
+        const index = dots.findIndex((d) => d.key === currentKey);
+        if (index < 0)
+            return;
+        const step = DOT_SIZE + DOT_GAP;
+        const dotTop = 8 + index * step; // 列表上内边距 8px + 节点位置
+        const contentHeight = 16 + dots.length * step - DOT_GAP;
+        const maxScroll = Math.max(0, contentHeight - list.clientHeight);
+        let target = dotTop - list.clientHeight / 2 + step / 2;
+        target = Math.max(0, Math.min(target, maxScroll));
+        if (Math.abs(target - list.scrollTop) < 2)
+            return;
+        list.scrollTo({ top: target, behavior: 'smooth' });
+    }, [currentKey, dots, listRef]);
+    if (!visible || injected === undefined)
+        return null;
+    const onJump = (dot) => {
+        if (sessionId === undefined)
+            return;
+        setJumpingKey(dot.key);
+        injected.jump(sessionId, dot.key);
+        window.setTimeout(() => setJumpingKey((k) => (k === dot.key ? null : k)), 600);
+    };
+    return props.children({
+        injected,
+        sessionId,
+        dots,
+        style,
+        align,
+        bandHeight,
+        scrollBehavior,
+        showCount,
+        showSearch,
+        showQuickSettings,
+        cardCount,
+        currentKey,
+        hint,
+        scrollable,
+        canPageUp,
+        canPageDown,
+        revealed,
+        jumpingKey,
+        panelRef,
+        listRef,
+        focus,
+        openFocus,
+        cancelClearFocus,
+        scheduleClearFocus,
+        syncScroll,
+        pageBy,
+        onJump,
+    });
+}

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

@@ -0,0 +1,63 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// 搜索浮层：防抖 + AbortController + 命中词高亮 + 点击直达
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { formatNavTime } from "../../../core/utils/time.js";
+export function SearchBox(props) {
+    const [q, setQ] = useState('');
+    const [results, setResults] = useState([]);
+    const [busy, setBusy] = useState(false);
+    const [empty, setEmpty] = useState(false);
+    const abortRef = useRef(null);
+    const timerRef = useRef(null);
+    const inputRef = useRef(null);
+    const run = useCallback((query) => {
+        abortRef.current?.abort();
+        const ac = new AbortController();
+        abortRef.current = ac;
+        const trimmed = query.trim();
+        if (trimmed.length < 1) {
+            setResults([]);
+            setEmpty(false);
+            setBusy(false);
+            return;
+        }
+        setBusy(true);
+        const url = '/mega-chat-nav/search?session=' + encodeURIComponent(props.sessionId ?? '')
+            + '&q=' + encodeURIComponent(trimmed) + '&limit=20';
+        fetch(url, { signal: ac.signal })
+            .then((resp) => resp.json())
+            .then((data) => {
+            if (!data.ok) {
+                setResults([]);
+                setEmpty(false);
+                return;
+            }
+            const hits = data.hits ?? [];
+            setResults(hits);
+            setEmpty(hits.length === 0);
+        })
+            .catch((e) => {
+            if (e.name !== 'AbortError') {
+                setResults([]);
+                setEmpty(false);
+            }
+        })
+            .finally(() => setBusy(false));
+    }, [props.sessionId]);
+    const onChange = (v) => {
+        setQ(v);
+        if (timerRef.current !== null)
+            window.clearTimeout(timerRef.current);
+        timerRef.current = window.setTimeout(() => run(v), 200);
+    };
+    useEffect(() => {
+        inputRef.current?.focus();
+        return () => {
+            if (timerRef.current !== null)
+                window.clearTimeout(timerRef.current);
+            abortRef.current?.abort();
+        };
+    }, []);
+    return (_jsxs("div", { className: "mgs-search", role: "dialog", "aria-label": props.t('search.placeholder'), children: [_jsx("input", { ref: inputRef, className: "mgs-search-input", value: q, placeholder: props.t('search.placeholder'), onChange: (e) => onChange(e.target.value), onKeyDown: (e) => { if (e.key === 'Escape')
+                    props.onClose(); } }), busy ? _jsx("div", { className: "mgs-search-busy", children: "\u2026" }) : null, _jsxs("div", { className: "mgs-search-results", children: [empty ? _jsx("div", { className: "mgs-search-empty", children: props.t('search.empty') }) : null, results.map((hit) => (_jsxs("button", { type: "button", className: "mgs-search-hit", onClick: () => props.onJump(hit.key), children: [_jsx("span", { className: 'mgs-search-role mgs-search-role--' + hit.role, "aria-hidden": "true" }), _jsx("span", { className: "mgs-search-text", children: hit.hitStart >= 0 && hit.hitLen > 0 ? (_jsxs(_Fragment, { children: [hit.snippet.slice(0, hit.hitStart), _jsx("mark", { className: "mgs-search-mark", children: hit.snippet.slice(hit.hitStart, hit.hitStart + hit.hitLen) }), hit.snippet.slice(hit.hitStart + hit.hitLen)] })) : hit.snippet }), _jsx("span", { className: "mgs-search-time", children: formatNavTime(hit.time, Date.now()) })] }, hit.key + ':' + hit.seq)))] })] }));
+}