// ==UserScript==
// @name         MarkWeb - 网页笔记与高亮
// @namespace    https://github.com/AexZero/markweb
// @version      1.15.0
// @description  选中文字即可高亮、添加备注并永久保存，支持批注管理和 Markdown 导出。
// @author       AexZero
// @match        http://*/*
// @match        https://*/*
// @exclude      http://0.0.0.0:8999/*
// @exclude      *://google.com/*
// @exclude      *://*.google.com/*
// @run-at       document-idle
// @grant        GM_getValue
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_listValues
// @grant        GM_registerMenuCommand
// ==/UserScript==

(function () {
    'use strict';

    const APP_ID = 'markweb-app';
    const MARK_CLASS = 'markweb-highlight';
    const STORAGE_PREFIX = 'markweb:page:v1:';
    const CATALOG_KEY = 'markweb:catalog:v1';
    const SETTINGS_KEY = 'markweb:settings:v1';
    const CONTEXT_LENGTH = 48;
    const DEFAULT_COLORS = ['#ffddea', '#c3faff', '#ffffdd', '#ffe2ff', '#c7fff0', '#fdf89b'];
    const LEGACY_COLOR_SLOTS = {
        '#facd5a': 0,
        '#69b0f2': 1,
        '#b8d194': 2,
        '#fd9de7': 3,
        coral: 4,
        '#fdf89b': 5
    };
    const DEFAULT_COLOR = DEFAULT_COLORS[0];
    const MARGIN_FONT_OPTIONS = [
        { id: 'xingkai', label: '行楷-简', stack: '"行楷-简","Xingkai SC",STXingkai,"Kaiti SC",STKaiti,KaiTi,cursive' },
        { id: 'kaiti', label: '楷体', stack: '"Kaiti SC",STKaiti,KaiTi,serif' },
        { id: 'songti', label: '宋体', stack: '"Songti SC",STSong,SimSun,serif' },
        { id: 'heiti', label: '黑体', stack: '"PingFang SC","Microsoft YaHei",sans-serif' },
        { id: 'system', label: '系统字体', stack: '-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif' },
        { id: 'cursive', label: '手写体', stack: 'cursive' },
        { id: 'custom', label: '自定义字体', stack: '' }
    ];
    const DEFAULT_SETTINGS = {
        version: 2,
        palette: DEFAULT_COLORS.slice(),
        marginNotes: { enabled: true, fontSize: 18, distance: 32, side: 'auto', font: 'xingkai', customFont: '' }
    };

    let activePageKey = getPageKey();
    let pageState = emptyState();
    let pendingSelection = null;
    let activeNoteId = null;
    let searchText = '';
    let panelMode = 'page';
    let settingsReturnMode = 'page';
    let allPages = [];
    let allPagesLoading = false;
    let allPagesLoadToken = 0;
    const expandedNoteIds = new Set();
    let deletedSnapshot = null;
    let settings = cloneDefaultSettings();
    let saveTimer;
    let settingsSaveTimer;
    let cardClickTimer;
    let highlightRestoreTimer;
    let marginLayoutFrame;
    let mutationTimer;
    let pageResizeObserver;
    let pageMutationObserver;

    const ui = createUI();
    injectPageStyle();
    bindEvents();
    registerScriptMenu();
    void boot();

    async function boot() {
        const requestedKey = activePageKey;
        const [savedSettings, savedPage] = await Promise.all([
            getStored(SETTINGS_KEY, null),
            getStored(STORAGE_PREFIX + requestedKey, null)
        ]);
        settings = normalizeSettings(savedSettings);
        syncMarginNotesToggle();
        syncPaletteButtons();
        scheduleMarginNoteLayout();
        if (requestedKey === activePageKey) applyLoadedPage(savedPage, requestedKey);
        observePageLayout();
    }

    function cloneDefaultSettings() {
        return {
            version: DEFAULT_SETTINGS.version,
            palette: DEFAULT_SETTINGS.palette.slice(),
            marginNotes: { ...DEFAULT_SETTINGS.marginNotes }
        };
    }

    function normalizeSettings(saved) {
        const defaults = cloneDefaultSettings();
        const legacyMarginEnabled = typeof saved?.marginNotes === 'boolean' ? saved.marginNotes : undefined;
        const palette = Array.isArray(saved?.palette) && saved.palette.length === DEFAULT_COLORS.length
            ? saved.palette.map((color, index) => normalizeHexColor(color) || defaults.palette[index])
            : defaults.palette;
        const margin = saved?.marginNotes && typeof saved.marginNotes === 'object' ? saved.marginNotes : {};
        return {
            version: 2,
            palette,
            marginNotes: {
                enabled: typeof margin.enabled === 'boolean' ? margin.enabled : (legacyMarginEnabled ?? defaults.marginNotes.enabled),
                fontSize: clampNumber(margin.fontSize, 12, 30, defaults.marginNotes.fontSize),
                distance: clampNumber(margin.distance, 8, 120, defaults.marginNotes.distance),
                side: ['auto', 'left', 'right'].includes(margin.side) ? margin.side : defaults.marginNotes.side,
                font: MARGIN_FONT_OPTIONS.some((option) => option.id === margin.font) ? margin.font : defaults.marginNotes.font,
                customFont: typeof margin.customFont === 'string' ? margin.customFont.slice(0, 80) : defaults.marginNotes.customFont
            }
        };
    }

    function marginNoteFontStack() {
        if (settings.marginNotes.font === 'custom') {
            const fontName = settings.marginNotes.customFont.trim().replace(/["\\]/g, '');
            if (fontName) return `"${fontName}",cursive`;
        }
        return MARGIN_FONT_OPTIONS.find((option) => option.id === settings.marginNotes.font)?.stack
            || MARGIN_FONT_OPTIONS[0].stack;
    }

    function clampNumber(value, minimum, maximum, fallback) {
        const number = Number(value);
        return Number.isFinite(number) ? Math.max(minimum, Math.min(maximum, number)) : fallback;
    }

    function normalizeHexColor(value) {
        const match = String(value || '').trim().match(/^#([\da-f]{3}|[\da-f]{6})$/i);
        if (!match) return null;
        const hex = match[1].length === 3 ? Array.from(match[1], (char) => char + char).join('') : match[1];
        return `#${hex.toLowerCase()}`;
    }

    function getPageKey() {
        const url = new URL(location.href);
        url.hash = '';
        return url.href;
    }

    function emptyState() {
        return {
            version: 1,
            url: getPageKey(),
            title: document.title,
            updatedAt: new Date().toISOString(),
            notes: []
        };
    }

    function withTimeout(value, milliseconds, message) {
        return new Promise((resolve, reject) => {
            const timer = window.setTimeout(() => reject(new Error(message)), milliseconds);
            Promise.resolve(value).then(
                (result) => {
                    window.clearTimeout(timer);
                    resolve(result);
                },
                (error) => {
                    window.clearTimeout(timer);
                    reject(error);
                }
            );
        });
    }

    async function getStored(key, fallback) {
        try {
            if (typeof GM_getValue === 'function') {
                return await withTimeout(GM_getValue(key, fallback), 6000, '读取笔记超时');
            }
            const raw = localStorage.getItem(key);
            return raw ? JSON.parse(raw) : fallback;
        } catch (error) {
            console.warn('[MarkWeb] 读取失败：', error);
            return fallback;
        }
    }

    async function setStored(key, value) {
        try {
            if (typeof GM_setValue === 'function') {
                await withTimeout(GM_setValue(key, value), 6000, '保存笔记超时');
            }
            else localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.warn('[MarkWeb] 保存失败：', error);
            toast('保存失败，请检查脚本权限');
        }
    }

    async function deleteStored(key) {
        try {
            if (typeof GM_deleteValue === 'function') {
                await withTimeout(GM_deleteValue(key), 6000, '删除笔记数据超时');
            } else {
                localStorage.removeItem(key);
            }
        } catch (error) {
            console.warn('[MarkWeb] 删除存储失败：', error);
            toast('删除存储失败，请检查脚本权限');
        }
    }

    async function listStoredKeys() {
        try {
            if (typeof GM_listValues === 'function') {
                return await withTimeout(GM_listValues(), 6000, '读取笔记列表超时');
            }
            return Object.keys(localStorage);
        } catch (error) {
            console.warn('[MarkWeb] 获取笔记索引失败：', error);
            toast('读取全部笔记失败，请刷新后重试');
            return [];
        }
    }

    async function loadAllPages() {
        if (allPagesLoading) return;
        const loadToken = ++allPagesLoadToken;
        allPagesLoading = true;
        renderPanel();
        const watchdog = window.setTimeout(() => {
            if (loadToken !== allPagesLoadToken) return;
            allPagesLoadToken += 1;
            allPagesLoading = false;
            renderPanel();
            toast('读取超过 10 秒，已自动停止，请重试');
        }, 10000);
        try {
            // 先写入当前页的最新状态，保证总览不会漏掉刚刚添加的笔记。
            pageState.title = document.title;
            pageState.updatedAt = new Date().toISOString();
            const currentStorageKey = STORAGE_PREFIX + activePageKey;
            const existingCurrentPage = await getStored(currentStorageKey, null);
            if (pageState.notes.length || existingCurrentPage) {
                await savePageState(activePageKey, pageState);
            }

            const catalog = await getStored(CATALOG_KEY, null);
            const hasCompleteCatalog = catalog?.migrated === true && Array.isArray(catalog.pages);
            const keys = hasCompleteCatalog
                ? [...new Set(catalog.pages.map((item) => item?.key).filter((key) => typeof key === 'string' && key.startsWith(STORAGE_PREFIX)))]
                : (await listStoredKeys()).filter((key) => key.startsWith(STORAGE_PREFIX));
            const pages = await Promise.all(keys.map(async (key) => {
                const saved = await getStored(key, null);
                if (!saved || !Array.isArray(saved.notes)) return null;
                const notes = saved.notes.filter(validNote).map((item) => {
                    const colorId = resolveColorId(item);
                    return {
                        ...item,
                        colorId,
                        color: settings.palette[colorId],
                        note: typeof item.note === 'string' ? item.note : ''
                    };
                });
                if (!notes.length) {
                    await deleteStored(key);
                    return null;
                }
                return {
                    storageKey: key,
                    url: typeof saved.url === 'string' ? saved.url : key.slice(STORAGE_PREFIX.length),
                    title: typeof saved.title === 'string' && saved.title ? saved.title : '未命名网页',
                    updatedAt: saved.updatedAt || '',
                    notes
                };
            }));
            if (loadToken !== allPagesLoadToken) return;
            allPages = pages.filter(Boolean).sort((a, b) => String(b.updatedAt).localeCompare(String(a.updatedAt)));
            await setStored(CATALOG_KEY, {
                version: 1,
                migrated: true,
                pages: allPages.map((page) => ({
                    key: page.storageKey,
                    url: page.url,
                    title: page.title,
                    updatedAt: page.updatedAt,
                    noteCount: page.notes.length
                }))
            });
        } catch (error) {
            console.warn('[MarkWeb] 全部笔记加载失败：', error);
            if (loadToken === allPagesLoadToken) toast('全部笔记加载失败，请刷新后重试');
        } finally {
            window.clearTimeout(watchdog);
            if (loadToken === allPagesLoadToken) {
                allPagesLoading = false;
                renderPanel();
            }
        }
    }

    async function loadPage() {
        const requestedKey = activePageKey;
        const saved = await getStored(STORAGE_PREFIX + requestedKey, null);
        applyLoadedPage(saved, requestedKey);
    }

    function applyLoadedPage(saved, requestedKey) {
        if (requestedKey !== activePageKey) return;
        pageState = normalizeState(saved);
        restoreHighlights();
        renderPanel();
        window.setTimeout(() => {
            if (requestedKey === activePageKey) restoreHighlights();
        }, 1500);
    }

    function normalizeState(saved) {
        const state = saved && typeof saved === 'object' ? saved : emptyState();
        return {
            version: 1,
            url: activePageKey,
            title: typeof state.title === 'string' ? state.title : document.title,
            updatedAt: state.updatedAt || new Date().toISOString(),
            notes: Array.isArray(state.notes) ? state.notes.filter(validNote).map((item) => {
                const colorId = resolveColorId(item);
                return {
                    id: item.id,
                    quote: item.quote,
                    prefix: item.prefix || '',
                    suffix: item.suffix || '',
                    position: Number.isFinite(item.position) ? item.position : 0,
                    colorId,
                    color: settings.palette[colorId],
                    note: typeof item.note === 'string' ? item.note : '',
                    createdAt: item.createdAt || new Date().toISOString(),
                    updatedAt: item.updatedAt || item.createdAt || new Date().toISOString()
                };
            }) : []
        };
    }

    function validNote(item) {
        return item && typeof item.id === 'string' && typeof item.quote === 'string' && item.quote.length;
    }

    function resolveColorId(item) {
        const storedId = Number(item?.colorId);
        if (Number.isInteger(storedId) && storedId >= 0 && storedId < DEFAULT_COLORS.length) return storedId;
        const rawColor = String(item?.color || '').trim().toLowerCase();
        if (Number.isInteger(LEGACY_COLOR_SLOTS[rawColor])) return LEGACY_COLOR_SLOTS[rawColor];
        const color = normalizeHexColor(item?.color);
        if (!color) return 0;
        const currentIndex = settings.palette.indexOf(color);
        if (currentIndex >= 0) return currentIndex;
        const defaultIndex = DEFAULT_COLORS.indexOf(color);
        if (defaultIndex >= 0) return defaultIndex;
        const target = hexToRgb(color);
        return settings.palette
            .map((candidate, index) => {
                const rgb = hexToRgb(candidate);
                const distance = (rgb.r - target.r) ** 2 + (rgb.g - target.g) ** 2 + (rgb.b - target.b) ** 2;
                return { index, distance };
            })
            .sort((a, b) => a.distance - b.distance)[0]?.index || 0;
    }

    function noteHighlightColor(note) {
        return settings.palette[resolveColorId(note)] || settings.palette[0] || DEFAULT_COLOR;
    }

    function hexToRgb(color) {
        const normalized = normalizeHexColor(color) || DEFAULT_COLOR;
        return {
            r: Number.parseInt(normalized.slice(1, 3), 16),
            g: Number.parseInt(normalized.slice(3, 5), 16),
            b: Number.parseInt(normalized.slice(5, 7), 16)
        };
    }

    function rgbToHex(red, green, blue) {
        return `#${[red, green, blue].map((value) => Math.round(Math.max(0, Math.min(255, value))).toString(16).padStart(2, '0')).join('')}`;
    }

    function accentColor(color) {
        const { r, g, b } = hexToRgb(color);
        const red = r / 255;
        const green = g / 255;
        const blue = b / 255;
        const maximum = Math.max(red, green, blue);
        const minimum = Math.min(red, green, blue);
        const delta = maximum - minimum;
        let hue = 0;
        if (delta) {
            if (maximum === red) hue = ((green - blue) / delta) % 6;
            else if (maximum === green) hue = (blue - red) / delta + 2;
            else hue = (red - green) / delta + 4;
            hue = (hue * 60 + 360) % 360;
        }
        const lightness = (maximum + minimum) / 2;
        const saturation = delta ? delta / (1 - Math.abs(2 * lightness - 1)) : 0;
        const targetSaturation = delta ? Math.max(0.76, Math.min(1, saturation * 1.08)) : 0;
        const targetLightness = hue >= 42 && hue <= 78 ? 0.38 : 0.48;
        return hslToHex(hue, targetSaturation, targetLightness);
    }

    function hslToHex(hue, saturation, lightness) {
        const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation;
        const part = hue / 60;
        const intermediate = chroma * (1 - Math.abs(part % 2 - 1));
        let values = [0, 0, 0];
        if (part < 1) values = [chroma, intermediate, 0];
        else if (part < 2) values = [intermediate, chroma, 0];
        else if (part < 3) values = [0, chroma, intermediate];
        else if (part < 4) values = [0, intermediate, chroma];
        else if (part < 5) values = [intermediate, 0, chroma];
        else values = [chroma, 0, intermediate];
        const match = lightness - chroma / 2;
        return rgbToHex(...values.map((value) => (value + match) * 255));
    }

    function contrastTextColor(color) {
        const background = relativeLuminance(color);
        const dark = relativeLuminance('#1d1d1f');
        const light = relativeLuminance('#ffffff');
        const darkContrast = (Math.max(background, dark) + 0.05) / (Math.min(background, dark) + 0.05);
        const lightContrast = (Math.max(background, light) + 0.05) / (Math.min(background, light) + 0.05);
        return darkContrast >= lightContrast ? '#1d1d1f' : '#ffffff';
    }

    function relativeLuminance(color) {
        const { r, g, b } = hexToRgb(color);
        const channels = [r, g, b].map((value) => {
            const channel = value / 255;
            return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4;
        });
        return channels[0] * 0.2126 + channels[1] * 0.7152 + channels[2] * 0.0722;
    }

    function scheduleSave() {
        window.clearTimeout(saveTimer);
        const key = activePageKey;
        saveTimer = window.setTimeout(() => {
            if (key !== activePageKey) return;
            pageState.title = document.title;
            pageState.updatedAt = new Date().toISOString();
            void savePageState(key, pageState);
        }, 120);
    }

    function scheduleSettingsSave() {
        window.clearTimeout(settingsSaveTimer);
        settingsSaveTimer = window.setTimeout(() => {
            settingsSaveTimer = 0;
            void setStored(SETTINGS_KEY, settings);
        }, 150);
    }

    async function savePageState(url, state) {
        const storageKey = STORAGE_PREFIX + url;
        if (Array.isArray(state.notes) && state.notes.length) {
            await setStored(storageKey, state);
        } else {
            await deleteStored(storageKey);
        }
        await updateCatalog(storageKey, state);
    }

    async function updateCatalog(storageKey, state) {
        const savedCatalog = await getStored(CATALOG_KEY, null);
        const catalog = savedCatalog && Array.isArray(savedCatalog.pages)
            ? savedCatalog
            : { version: 1, migrated: false, pages: [] };
        const pages = catalog.pages.filter((item) => item && item.key !== storageKey);
        if (Array.isArray(state.notes) && state.notes.length) {
            pages.push({
                key: storageKey,
                url: state.url,
                title: state.title,
                updatedAt: state.updatedAt,
                noteCount: state.notes.length
            });
        }
        await setStored(CATALOG_KEY, { ...catalog, pages });
    }

    function injectPageStyle() {
        if (document.getElementById('markweb-page-style')) return;
        const style = document.createElement('style');
        style.id = 'markweb-page-style';
        style.textContent = `
            mark.${MARK_CLASS} {
                background: var(--markweb-color, ${DEFAULT_COLOR}) !important;
                color: var(--markweb-text-color, #1d1d1f) !important;
                -webkit-text-fill-color: var(--markweb-text-color, #1d1d1f) !important;
                text-shadow: none !important;
                padding-left: 0.25rem !important;
                padding-right: 0.25rem !important;
                border-radius: 0.2rem !important;
                border: 1px solid #ede !important;
                box-decoration-break: clone;
                -webkit-box-decoration-break: clone;
                cursor: pointer !important;
                transition: filter 120ms ease, box-shadow 120ms ease;
            }
            mark.${MARK_CLASS}:hover, mark.${MARK_CLASS}:focus-visible {
                filter: saturate(1.12) brightness(.96);
                box-shadow: 0 0 0 2px var(--markweb-color, ${DEFAULT_COLOR});
                outline: none !important;
            }
        `;
        (document.head || document.documentElement).appendChild(style);
    }

    function createUI() {
        const host = document.createElement('div');
        host.id = APP_ID;
        const root = host.attachShadow({ mode: 'open' });
        const style = document.createElement('style');
        style.textContent = `
            :host { all: initial; }
            * { box-sizing: border-box; }
            button, input, textarea, select { font: inherit; }
            .layer { position:fixed; inset:0; z-index:2147483647; pointer-events:none; color:#242424; font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
            .margin-connectors { position:fixed; inset:0; z-index:1; width:100vw; height:100vh; overflow:visible; pointer-events:none; }
            .margin-notes { position:fixed; inset:0; z-index:2; pointer-events:none; }
            .margin-note { position:fixed; display:-webkit-box; max-height:128px; padding:2px 4px; overflow:hidden; color:var(--margin-color); background:transparent; border:0; border-radius:0; box-shadow:none; font-size:18px; font-weight:600; line-height:1.55; letter-spacing:.025em; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; -webkit-box-orient:vertical; -webkit-line-clamp:4; cursor:pointer; pointer-events:auto; transition:filter 120ms ease,opacity 120ms ease; }
            .margin-note:hover { background:transparent; filter:saturate(1.15) brightness(.86); }
            .margin-note.active { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
            .palette { position:fixed; z-index:6; display:none; align-items:center; gap:8px; min-height:34px; padding:5px 8px; background:linear-gradient(135deg,rgba(18,21,28,.84),rgba(4,6,10,.76)); border:1px solid rgba(255,255,255,.16); border-radius:11px; box-shadow:0 14px 38px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.08); backdrop-filter:blur(24px) saturate(160%); -webkit-backdrop-filter:blur(24px) saturate(160%); pointer-events:auto; }
            .palette.visible { display:flex; animation:appear 120ms ease-out; }
            @keyframes appear { from { opacity:0; transform:translateY(4px) scale(.98); } }
            .color-button { width:20px; height:20px; padding:0; border:1.5px solid rgba(255,255,255,.72); border-radius:50%; cursor:pointer; transition:transform 100ms ease; }
            .color-button:hover,.color-button:focus-visible { transform:scale(1.16); outline:none; }
            .panel { position:fixed; z-index:5; top:14px; right:14px; bottom:14px; width:min(370px,calc(100vw - 28px)); display:flex; flex-direction:column; overflow:hidden; pointer-events:auto; background:rgba(250,250,252,.92); border:1px solid rgba(255,255,255,.72); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.62); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); transform:translateX(calc(100% + 24px)); transition:transform 180ms ease; }
            .panel.open { transform:translateX(0); }
            .panel-header { padding:10px 12px; background:rgba(250,250,252,.42); border-bottom:1px solid rgba(0,0,0,.08); }
            .header-row { display:grid; grid-template-columns:30px minmax(0,1fr) 30px; align-items:center; gap:8px; }
            .count { color:#777; font-size:12px; text-align:center; white-space:nowrap; }
            .icon-button,.text-button { border:1px solid rgba(0,0,0,.11); background:rgba(255,255,255,.62); color:#333; border-radius:8px; cursor:pointer; }
            .icon-button { display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; font-size:18px; line-height:0; }
            .icon-button svg { display:block; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
            .text-button { padding:6px 10px; font-size:12px; }
            .icon-button:hover,.text-button:hover { background:rgba(255,255,255,.9); border-color:rgba(0,0,0,.2); }
            .clear-button:hover { color:#cf1322; background:#fff1f0; border-color:#ffccc7; }
            .settings-wrap { position:relative; }
            .settings-menu { position:absolute; top:calc(100% + 7px); right:0; display:none; width:168px; padding:5px; background:rgba(250,250,252,.82); border:1px solid rgba(255,255,255,.72); border-radius:10px; box-shadow:0 12px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.55); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); z-index:3; }
            .settings-menu.open { display:block; animation:appear 100ms ease-out; }
            .menu-item { display:flex; align-items:center; gap:9px; width:100%; padding:8px 9px; border:0; border-radius:7px; color:#333; background:transparent; cursor:pointer; text-align:left; }
            .menu-item:hover { background:rgba(255,255,255,.72); }
            .menu-item svg { flex:none; width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
            .menu-state { margin-left:auto; color:#777; font-size:11px; }
            .search { display:none; width:100%; margin-top:10px; padding:8px 10px; border:1px solid rgba(0,0,0,.12); border-radius:9px; outline:none; background:rgba(255,255,255,.68); }
            .search.open { display:block; animation:search-in 120ms ease-out; }
            @keyframes search-in { from { opacity:0; transform:translateY(-3px); } }
            .search:focus,.note-input:focus { border-color:#69b1ff; box-shadow:0 0 0 2px #e6f4ff; }
            .notes { flex:1; overflow:auto; padding:12px; overscroll-behavior:contain; }
            .empty { padding:48px 20px; color:#888; text-align:center; }
            .settings-page { display:grid; gap:12px; }
            .settings-section { padding:13px; border:1px solid rgba(0,0,0,.075); border-radius:12px; background:rgba(255,255,255,.58); }
            .settings-section h3 { margin:0 0 12px; font-size:14px; }
            .settings-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; min-height:34px; }
            .settings-row + .settings-row { margin-top:10px; }
            .settings-label { min-width:0; }
            .settings-range-row { grid-template-columns:1fr; gap:7px; }
            .settings-range-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
            .settings-range { display:flex; align-items:center; width:100%; }
            .settings-range input[type="range"] { --range-progress:0%; --range-rest:rgba(0,0,0,.12); appearance:none; -webkit-appearance:none; width:100%; height:20px; margin:0; padding:0; background:transparent; cursor:pointer; }
            .settings-range input[type="range"]::-webkit-slider-runnable-track { height:5px; background:linear-gradient(to right,#1677ff 0 var(--range-progress),var(--range-rest) var(--range-progress) 100%); border-radius:999px; }
            .settings-range input[type="range"]::-webkit-slider-thumb { width:17px; height:17px; margin-top:-6px; appearance:none; -webkit-appearance:none; background:#fff; border:2px solid #1677ff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.2); transition:transform 100ms ease,box-shadow 100ms ease; }
            .settings-range input[type="range"]:hover::-webkit-slider-thumb,.settings-range input[type="range"]:focus-visible::-webkit-slider-thumb { transform:scale(1.1); box-shadow:0 0 0 4px rgba(22,119,255,.14); }
            .settings-range input[type="range"]::-moz-range-track { height:5px; background:var(--range-rest); border-radius:999px; }
            .settings-range input[type="range"]::-moz-range-progress { height:5px; background:#1677ff; border-radius:999px; }
            .settings-range input[type="range"]::-moz-range-thumb { width:15px; height:15px; background:#fff; border:2px solid #1677ff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.2); }
            .settings-row select,.settings-text-input { min-width:150px; padding:7px 28px 7px 9px; color:#333; background:rgba(255,255,255,.74); border:1px solid rgba(0,0,0,.12); border-radius:8px; outline:none; }
            .settings-text-input { width:170px; padding-right:9px; }
            .settings-row select:focus,.settings-text-input:focus { border-color:#69b1ff; box-shadow:0 0 0 2px #e6f4ff; }
            .settings-value { min-width:48px; padding:2px 7px; color:#555; background:rgba(0,0,0,.055); border-radius:999px; font-size:11px; text-align:center; }
            .switch-input { width:18px; height:18px; accent-color:#1677ff; cursor:pointer; }
            .palette-settings { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
            .palette-setting { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:center; gap:8px; padding:7px; border:1px solid rgba(0,0,0,.07); border-radius:9px; background:rgba(255,255,255,.45); }
            .palette-input-wrap { position:relative; display:grid; place-items:center; width:34px; height:34px; color:var(--preview-text); border-radius:9px; background:var(--preview-color); box-shadow:inset 0 0 0 1px rgba(0,0,0,.1); overflow:hidden; }
            .palette-input-wrap::after { content:"Aa"; font-size:11px; font-weight:700; pointer-events:none; }
            .palette-input { position:absolute; inset:-8px; width:50px; height:50px; opacity:0; cursor:pointer; }
            .palette-meta { min-width:0; }
            .palette-meta strong { display:block; font-size:12px; }
            .palette-meta code { display:block; overflow:hidden; color:#777; font:10px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; text-overflow:ellipsis; white-space:nowrap; }
            .accent-preview { display:inline-block; width:9px; height:9px; margin-right:4px; background:var(--preview-accent); border-radius:50%; vertical-align:-1px; }
            .settings-actions { display:flex; justify-content:flex-end; margin-top:10px; }
            .settings-reset { padding:5px 8px; color:#666; background:transparent; border:1px solid rgba(0,0,0,.1); border-radius:7px; cursor:pointer; font-size:11px; }
            .settings-reset:hover { color:#1677ff; border-color:#91caff; }
            .shortcut-section { padding-bottom:7px; }
            .shortcut-list { display:grid; }
            .shortcut-row { display:grid; grid-template-columns:minmax(128px,auto) minmax(0,1fr); align-items:center; gap:10px; min-height:39px; padding:7px 0; border-bottom:1px solid rgba(0,0,0,.065); }
            .shortcut-row:last-child { border-bottom:0; }
            .shortcut-keys { display:flex; align-items:center; gap:4px; min-width:0; }
            .key-combo { display:inline-flex; align-items:center; gap:3px; white-space:nowrap; }
            .shortcut-or { color:#aaa; font-size:10px; }
            .shortcut-action { color:#666; font-size:12px; text-align:right; }
            .shortcut-section kbd { display:inline-grid; place-items:center; min-width:23px; height:23px; padding:0 6px; color:#444; background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(245,245,247,.86)); border:1px solid rgba(0,0,0,.14); border-bottom-color:rgba(0,0,0,.24); border-radius:6px; box-shadow:0 1px 0 rgba(0,0,0,.12),inset 0 1px 0 #fff; font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace; }
            .card { position:relative; margin-bottom:10px; padding:11px 11px 11px 18px; border:1px solid rgba(0,0,0,.075); border-radius:11px; background:rgba(255,255,255,.62); box-shadow:0 1px 1px rgba(0,0,0,.025); cursor:pointer; }
            .card::before { content:""; position:absolute; top:6px; bottom:6px; left:6px; width:4px; background:var(--card-color); border-radius:999px; }
            .card.active { border-color:#69b1ff; box-shadow:0 0 0 2px #e6f4ff; }
            .quote { margin:0 0 9px; padding-left:0; color:#555; font-size:13px; overflow-wrap:anywhere; }
            .note-input { width:100%; min-height:70px; resize:vertical; padding:8px; border:1px solid rgba(0,0,0,.12); border-radius:8px; outline:none; color:#333; background:rgba(255,255,255,.72); }
            .note-preview { margin:0 0 8px; padding:8px 9px; color:#333; background:rgba(255,255,255,.5); border-radius:8px; white-space:pre-wrap; overflow-wrap:anywhere; }
            .spacer { flex:1; }
            .link-button { padding:3px 5px; border:0; background:transparent; color:#777; cursor:pointer; font-size:12px; }
            .link-button:hover { color:#1677ff; } .link-button.danger:hover { color:#cf1322; }
            .page-group { margin-bottom:12px; overflow:hidden; border:1px solid rgba(0,0,0,.075); border-radius:12px; background:rgba(255,255,255,.58); }
            .page-heading { padding:10px 11px; background:rgba(255,255,255,.38); }
            .page-title-row { display:flex; align-items:center; gap:8px; min-width:0; }
            .page-title { flex:1; min-width:0; margin:0; font-size:14px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
            .page-note-count { flex:none; color:#888; font-size:12px; }
            .toast { position:fixed; z-index:7; left:50%; bottom:28px; max-width:calc(100vw - 32px); padding:9px 14px; color:#fff; background:rgba(20,20,20,.92); border-radius:9px; opacity:0; transform:translate(-50%,10px); transition:150ms ease; pointer-events:none; }
            .toast.show { opacity:1; transform:translate(-50%,0); }
            .toast.with-action { display:flex; align-items:center; gap:14px; pointer-events:auto; }
            .toast-action { padding:0; border:0; color:#91caff; background:transparent; font-weight:600; cursor:pointer; }
            .toast-action:hover { color:#fff; }
            @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) {
                .panel { background:rgba(250,250,252,.8); }
            }
            @media (prefers-color-scheme:dark) {
                .panel { color:#eee; background:rgba(22,22,23,.88); border-color:rgba(255,255,255,.14); box-shadow:0 20px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.1); }
                .panel-header { background:rgba(22,22,23,.42); border-color:rgba(255,255,255,.1); } .card,.page-group { background:rgba(44,44,46,.68); border-color:rgba(255,255,255,.1); } .quote { color:#d1d1d6; }
                .page-heading { background:rgba(58,58,60,.42); }
                .search,.note-input,.icon-button,.text-button { color:#eee; background:rgba(44,44,46,.72); border-color:rgba(255,255,255,.14); }
                .note-preview { color:#eee; background:rgba(58,58,60,.56); }
                .settings-section { background:rgba(44,44,46,.68); border-color:rgba(255,255,255,.1); }
                .settings-value { color:#bbb; background:rgba(255,255,255,.08); }
                .palette-meta code { color:#aaa; }
                .settings-range input[type="range"] { --range-rest:rgba(255,255,255,.18); }
                .settings-row select,.settings-text-input { color:#eee; background:rgba(44,44,46,.8); border-color:rgba(255,255,255,.14); }
                .palette-setting { background:rgba(58,58,60,.46); border-color:rgba(255,255,255,.08); }
                .settings-reset { color:#bbb; border-color:rgba(255,255,255,.14); }
                .shortcut-row { border-color:rgba(255,255,255,.08); }
                .shortcut-action { color:#bbb; }
                .shortcut-or { color:#777; }
                .shortcut-section kbd { color:#eee; background:linear-gradient(180deg,rgba(78,78,82,.95),rgba(48,48,51,.92)); border-color:rgba(255,255,255,.16); border-bottom-color:rgba(255,255,255,.25); box-shadow:0 1px 0 rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08); }
                .settings-menu { background:rgba(44,44,46,.82); border-color:rgba(255,255,255,.14); }
                .menu-item { color:#eee; } .menu-item:hover { background:rgba(255,255,255,.1); }
                .menu-state { color:#aaa; }
                .margin-note { color:var(--margin-color); background:transparent; }
                .margin-note:hover { background:transparent; filter:saturate(1.12) brightness(1.18); }
                @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))) { .panel { background:rgba(22,22,23,.8); } }
            }
            @media (max-width:959px) { .margin-connectors,.margin-notes { display:none; } }
            @media (max-width:520px) { .panel { top:8px; right:8px; bottom:8px; width:calc(100vw - 16px); } .palette { max-width:calc(100vw - 16px); } }
        `;

        const layer = document.createElement('div');
        layer.className = 'layer';
        layer.innerHTML = `
            <svg class="margin-connectors" aria-hidden="true"></svg>
            <div class="margin-notes" aria-label="网页页边备注"></div>
            <div class="palette" role="toolbar" aria-label="MarkWeb 高亮工具"></div>
            <aside class="panel" aria-label="MarkWeb 批注列表">
                <div class="panel-header">
                    <div class="header-row"><button class="icon-button all-pages-button" type="button" title="全部网页" aria-label="全部网页">${panelIcon('home')}</button><span class="count"></span><div class="settings-wrap"><button class="icon-button settings-toggle" type="button" title="设置" aria-label="设置">${panelIcon('settings')}</button><div class="settings-menu"><button class="menu-item open-settings-button" type="button">${panelIcon('sliders')}<span>设置</span></button><button class="menu-item margin-notes-toggle" type="button" aria-pressed="true">${panelIcon('annotation')}<span>页边备注</span><span class="menu-state">开</span></button><button class="menu-item export-button" type="button">${panelIcon('download')}<span>导出笔记</span></button><button class="menu-item export-content-button" type="button" title="导出含正文">${panelIcon('document')}<span>导出含正文</span></button><button class="menu-item clear-button" type="button">${panelIcon('trash')}<span>清空本页</span></button><button class="menu-item search-toggle" type="button">${panelIcon('search')}<span>搜索</span></button></div></div></div>
                    <input class="search" type="search" placeholder="搜索原文或备注…" aria-label="搜索批注">
                </div>
                <div class="notes"></div>
            </aside>
            <div class="toast" role="status"></div>
        `;
        root.append(style, layer);
        (document.body || document.documentElement).appendChild(host);

        const palette = layer.querySelector('.palette');
        DEFAULT_COLORS.forEach((color, index) => {
            const button = document.createElement('button');
            button.type = 'button';
            button.className = 'color-button';
            button.dataset.colorId = String(index);
            button.style.background = color;
            button.title = `高亮颜色 ${index + 1}`;
            button.setAttribute('aria-label', button.title);
            palette.appendChild(button);
        });
        return {
            host, root, layer, palette,
            marginNotes: layer.querySelector('.margin-notes'),
            marginConnectors: layer.querySelector('.margin-connectors'),
            panel: layer.querySelector('.panel'),
            notes: layer.querySelector('.notes'),
            count: layer.querySelector('.count'),
            search: layer.querySelector('.search'),
            toast: layer.querySelector('.toast')
        };
    }

    function bindEvents() {
        document.addEventListener('mouseup', (event) => {
            if (!isUIEvent(event) && event.button === 0) window.setTimeout(showPaletteForSelection, 0);
        }, true);
        document.addEventListener('keyup', (event) => {
            if (isNoteShortcutActive()) return;
            if (!isUIEvent(event) && (event.key.startsWith('Arrow') || event.key === 'Shift')) {
                window.setTimeout(showPaletteForSelection, 0);
            }
        }, true);
        document.addEventListener('pointerdown', (event) => {
            if (!isUIEvent(event) && !closestHighlight(event.target)) {
                closeSettingsMenu();
                hidePalette();
                if (activeNoteId && ui.panel.classList.contains('open')) {
                    activeNoteId = null;
                    expandedNoteIds.clear();
                    renderPanel();
                }
            }
        }, true);
        document.addEventListener('click', handleHighlightClick, true);
        document.addEventListener('keydown', (event) => {
            const noteInput = event.composedPath().find((node) => node instanceof Element && node.matches('.note-input'));
            if (noteInput && event.key === 'Escape') {
                event.preventDefault();
                event.stopPropagation();
                expandedNoteIds.delete(noteInput.closest('.card')?.dataset.id);
                noteInput.blur();
                renderPanel();
            } else if (handleNoteShortcut(event)) {
                return;
            } else if ((event.metaKey || event.altKey) && event.key.toLowerCase() === 'm') {
                event.preventDefault();
                event.stopPropagation();
                if (event.altKey && event.shiftKey) openAllPages();
                else togglePanel();
            } else if (event.key === 'Escape') {
                hidePalette(); closePanel();
            }
        }, true);
        window.addEventListener('scroll', handleViewportChange, true);
        window.addEventListener('resize', handleViewportChange);
        window.addEventListener('popstate', checkRoute);
        window.addEventListener('hashchange', checkRoute);

        ui.palette.addEventListener('mousedown', (event) => event.preventDefault());
        ui.palette.addEventListener('click', handlePaletteClick);
        ui.root.querySelector('.settings-toggle').addEventListener('click', toggleSettingsMenu);
        ui.root.querySelector('.open-settings-button').addEventListener('click', openSettings);
        ui.root.querySelector('.margin-notes-toggle').addEventListener('click', toggleMarginNotes);
        ui.root.querySelector('.search-toggle').addEventListener('click', () => { closeSettingsMenu(); toggleSearch(); });
        ui.root.querySelector('.all-pages-button').addEventListener('click', handlePanelBackNavigation);
        ui.root.querySelector('.export-button').addEventListener('click', () => { closeSettingsMenu(); void exportMarkdown(); });
        ui.root.querySelector('.export-content-button').addEventListener('click', () => { closeSettingsMenu(); exportMarkdownWithContent(); });
        ui.root.querySelector('.clear-button').addEventListener('click', () => { closeSettingsMenu(); clearPage(); });
        ui.search.addEventListener('input', () => {
            searchText = ui.search.value.trim().toLowerCase();
            renderPanel();
        });
        ui.notes.addEventListener('click', handlePanelClick);
        ui.notes.addEventListener('dblclick', handlePanelDoubleClick);
        ui.notes.addEventListener('input', handlePanelInput);
        ui.notes.addEventListener('change', handleSettingsInput);
        ui.marginNotes.addEventListener('click', handleMarginNoteClick);
        ui.layer.addEventListener('pointerdown', (event) => {
            if (!event.target.closest('.settings-wrap')) closeSettingsMenu();
        });
        ui.toast.addEventListener('click', (event) => {
            if (event.target.closest('[data-action="undo-delete"]')) undoLastDelete();
        });

        const routeTimer = window.setInterval(checkRoute, 1000);
        window.addEventListener('pagehide', () => {
            if (settingsSaveTimer) void setStored(SETTINGS_KEY, settings);
            window.clearInterval(routeTimer);
            window.clearTimeout(mutationTimer);
            window.clearTimeout(cardClickTimer);
            window.clearTimeout(highlightRestoreTimer);
            window.clearTimeout(settingsSaveTimer);
            window.cancelAnimationFrame(marginLayoutFrame);
            pageResizeObserver?.disconnect();
            pageMutationObserver?.disconnect();
        }, { once: true });
    }

    function handleViewportChange() {
        hidePalette();
        scheduleMarginNoteLayout();
    }

    function observePageLayout() {
        if (typeof ResizeObserver === 'function') {
            pageResizeObserver = new ResizeObserver(scheduleMarginNoteLayout);
            pageResizeObserver.observe(document.documentElement);
            if (document.body) pageResizeObserver.observe(document.body);
        }
        if (typeof MutationObserver === 'function' && document.body) {
            pageMutationObserver = new MutationObserver(() => {
                window.clearTimeout(mutationTimer);
                mutationTimer = window.setTimeout(scheduleMarginNoteLayout, 100);
                scheduleHighlightRestore();
            });
            pageMutationObserver.observe(document.body, { childList: true, subtree: true, characterData: true });
        }
        scheduleMarginNoteLayout();
    }

    function registerScriptMenu() {
        if (typeof GM_registerMenuCommand !== 'function') return;
        GM_registerMenuCommand('打开全部网页笔记', openAllPages);
        GM_registerMenuCommand('打开当前网页笔记', () => {
            panelMode = 'page';
            ui.panel.classList.add('open');
            renderPanel();
        });
    }

    function isUIEvent(event) {
        return event.composedPath().includes(ui.host);
    }

    function isNoteShortcutActive() {
        return ui.panel.classList.contains('open') && panelMode === 'page' && Boolean(activeNoteId);
    }

    function handleNoteShortcut(event) {
        if (!isNoteShortcutActive() || event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return false;
        if (event.composedPath().some((node) => node instanceof Element && node.matches('input,textarea,select,[contenteditable="true"]'))) return false;
        if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Enter', 'Backspace'].includes(event.key)) return false;

        event.preventDefault();
        event.stopPropagation();
        if (event.key === 'ArrowUp') moveActiveNote(-1);
        if (event.key === 'ArrowDown') moveActiveNote(1);
        if (event.key === 'ArrowLeft') changeActiveColor(-1);
        if (event.key === 'ArrowRight') changeActiveColor(1);
        if (event.key === 'Enter') toggleNoteEditor(activeNoteId);
        if (event.key === 'Backspace') deleteNote(activeNoteId);
        return true;
    }

    function getVisiblePageNotes() {
        return pageState.notes
            .filter((item) => !searchText || `${item.quote}\n${item.note}`.toLowerCase().includes(searchText))
            .slice()
            .reverse();
    }

    function moveActiveNote(direction) {
        const notes = getVisiblePageNotes();
        if (!notes.length) return;
        const currentIndex = notes.findIndex((item) => item.id === activeNoteId);
        const nextIndex = currentIndex === -1
            ? (direction > 0 ? 0 : notes.length - 1)
            : (currentIndex + direction + notes.length) % notes.length;
        locateOnPage(notes[nextIndex].id);
    }

    function changeActiveColor(direction) {
        const item = pageState.notes.find((note) => note.id === activeNoteId);
        if (!item) return;
        const currentIndex = resolveColorId(item);
        const nextIndex = (currentIndex + direction + settings.palette.length) % settings.palette.length;
        updateColor(item.id, nextIndex);
    }

    function showPaletteForSelection() {
        const selection = window.getSelection();
        if (!selection || !selection.rangeCount || selection.isCollapsed) return;
        const range = selection.getRangeAt(0);
        if (!isUsableRange(range)) return;
        const snapshot = captureRange(range);
        if (!snapshot || !snapshot.quote.trim()) return;

        pendingSelection = snapshot;
        positionPalette(getSelectionEndRect(selection, range));
    }

    function isUsableRange(range) {
        const container = range.commonAncestorContainer.nodeType === Node.ELEMENT_NODE ? range.commonAncestorContainer : range.commonAncestorContainer.parentElement;
        if (!container || !document.body.contains(container) || ui.host.contains(container)) return false;
        if (container.closest('input,textarea,select,[contenteditable="true"],script,style,noscript')) return false;
        return !getRangeSegments(range).some((item) => item.node.parentElement?.closest(`mark.${MARK_CLASS}`));
    }

    function captureRange(range) {
        const index = buildTextIndex();
        const segments = getRangeSegments(range, index.records);
        if (!segments.length) return null;
        const start = segments[0].absoluteStart;
        const last = segments.at(-1);
        const end = last.absoluteStart + last.end - last.start;
        return {
            range: range.cloneRange(),
            quote: segments.map((item) => item.node.data.slice(item.start, item.end)).join(''),
            prefix: index.text.slice(Math.max(0, start - CONTEXT_LENGTH), start),
            suffix: index.text.slice(end, end + CONTEXT_LENGTH),
            position: index.text.length ? start / index.text.length : 0
        };
    }

    function getSelectionEndRect(selection, range) {
        try {
            const focusRange = document.createRange();
            focusRange.setStart(selection.focusNode, selection.focusOffset);
            focusRange.collapse(true);
            const focusRects = Array.from(focusRange.getClientRects()).filter((item) => item.width || item.height);
            const focusRect = focusRects[0] || focusRange.getBoundingClientRect();
            if (focusRect && (focusRect.width || focusRect.height)) return focusRect;
        } catch (_) {
            // 某些复杂 DOM 无法为折叠选区返回坐标，下面使用选区末端兜底。
        }
        const rects = Array.from(range.getClientRects()).filter((item) => item.width || item.height);
        return rects.at(-1) || range.getBoundingClientRect();
    }

    function positionPalette(rect) {
        ui.palette.classList.add('visible');
        ui.palette.style.visibility = 'hidden';
        const size = ui.palette.getBoundingClientRect();
        const anchorX = rect.right || rect.left;
        let left = anchorX + 9;
        let top = rect.top - size.height - 9;
        if (left + size.width > innerWidth - 8) left = anchorX - size.width - 9;
        if (top < 8) top = rect.bottom + 9;
        ui.palette.style.left = `${Math.max(8, Math.min(left, innerWidth - size.width - 8))}px`;
        ui.palette.style.top = `${Math.max(8, Math.min(top, innerHeight - size.height - 8))}px`;
        ui.palette.style.visibility = '';
    }

    function hidePalette() {
        ui.palette.classList.remove('visible');
        pendingSelection = null;
    }

    function handlePaletteClick(event) {
        const colorButton = event.target.closest('[data-color-id]');
        if (!colorButton) return;
        addHighlight(Number(colorButton.dataset.colorId));
    }

    function addHighlight(colorId) {
        if (!pendingSelection || !document.contains(pendingSelection.range.commonAncestorContainer)) {
            hidePalette(); return null;
        }
        const safeColorId = Number.isInteger(colorId) && colorId >= 0 && colorId < settings.palette.length ? colorId : 0;
        const now = new Date().toISOString();
        const note = {
            id: globalThis.crypto?.randomUUID?.() || `mw-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`,
            quote: pendingSelection.quote,
            prefix: pendingSelection.prefix,
            suffix: pendingSelection.suffix,
            position: pendingSelection.position,
            colorId: safeColorId,
            color: settings.palette[safeColorId],
            note: '',
            createdAt: now,
            updatedAt: now
        };
        if (!wrapRange(pendingSelection.range, note)) {
            toast('这段内容暂时无法标记'); hidePalette(); return null;
        }
        pageState.notes.push(note);
        scheduleSave(); renderPanel();
        window.getSelection()?.removeAllRanges();
        hidePalette(); toast('高亮已保存');
        return note;
    }

    function buildTextIndex() {
        const records = [];
        let text = '';
        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_TEXT, {
            acceptNode(node) {
                const parent = node.parentElement;
                if (!node.data || !parent || parent.closest(`#${APP_ID},script,style,noscript,textarea,input,select,option,canvas,svg,[contenteditable="true"]`)) return NodeFilter.FILTER_REJECT;
                return NodeFilter.FILTER_ACCEPT;
            }
        });
        let node;
        while ((node = walker.nextNode())) {
            records.push({ node, start: text.length, end: text.length + node.data.length });
            text += node.data;
        }
        return { text, records };
    }

    function getRangeSegments(range, records = buildTextIndex().records) {
        const segments = [];
        for (const record of records) {
            let intersects;
            try { intersects = range.intersectsNode(record.node); } catch (_) { continue; }
            if (!intersects) continue;
            const start = record.node === range.startContainer ? range.startOffset : 0;
            const end = record.node === range.endContainer ? range.endOffset : record.node.data.length;
            if (end > start) segments.push({ node: record.node, start, end, absoluteStart: record.start + start });
        }
        return segments;
    }

    function wrapRange(range, note) {
        const segments = getRangeSegments(range);
        if (!segments.length || segments.some((item) => item.node.parentElement?.closest(`mark.${MARK_CLASS}`))) return false;
        for (const item of segments.reverse()) {
            let node = item.node;
            if (item.end < node.length) node.splitText(item.end);
            if (item.start > 0) node = node.splitText(item.start);
            if (!node.data) continue;
            const mark = document.createElement('mark');
            mark.className = MARK_CLASS;
            mark.dataset.markwebId = note.id;
            const color = noteHighlightColor(note);
            mark.style.setProperty('--markweb-color', color);
            mark.style.setProperty('--markweb-text-color', contrastTextColor(color));
            mark.tabIndex = 0;
            mark.title = note.note || '点击编辑批注';
            node.parentNode.insertBefore(mark, node);
            mark.appendChild(node);
        }
        return true;
    }

    function restoreHighlights(render = true) {
        let restored = false;
        for (const note of pageState.notes) {
            if (findMarks(note.id).length) continue;
            const range = locateNote(note);
            if (range && wrapRange(range, note)) restored = true;
        }
        if (render) renderPanel();
        else if (restored) scheduleMarginNoteLayout();
        return restored;
    }

    function scheduleHighlightRestore(delay = 350) {
        window.clearTimeout(highlightRestoreTimer);
        if (!pageState.notes.length) return;
        const requestedKey = activePageKey;
        highlightRestoreTimer = window.setTimeout(() => {
            if (requestedKey !== activePageKey || !pageState.notes.length) return;
            const restoredIds = new Set(Array.from(document.querySelectorAll(`mark.${MARK_CLASS}`), (mark) => mark.dataset.markwebId));
            if (pageState.notes.some((note) => !restoredIds.has(note.id))) restoreHighlights(false);
        }, delay);
    }

    function locateNote(note) {
        const index = buildTextIndex();
        const candidates = [];
        let from = 0;
        while (from <= index.text.length) {
            const found = index.text.indexOf(note.quote, from);
            if (found < 0) break;
            candidates.push(found);
            from = found + Math.max(1, note.quote.length);
            if (candidates.length >= 100) break;
        }
        const expected = Math.round(note.position * index.text.length);
        candidates.sort((a, b) => score(b, note, index.text, expected) - score(a, note, index.text, expected));
        for (const start of candidates) {
            const range = rangeFromOffsets(index.records, start, start + note.quote.length);
            if (range && !getRangeSegments(range, index.records).some((item) => item.node.parentElement?.closest(`mark.${MARK_CLASS}`))) return range;
        }
        return null;
    }

    function score(start, note, text, expected) {
        let value = -Math.abs(start - expected) / Math.max(1, text.length);
        if (note.prefix && text.slice(Math.max(0, start - note.prefix.length), start) === note.prefix) value += 4;
        const end = start + note.quote.length;
        if (note.suffix && text.slice(end, end + note.suffix.length) === note.suffix) value += 4;
        return value;
    }

    function rangeFromOffsets(records, start, end) {
        let first;
        let last;
        for (const record of records) {
            if (!first && start >= record.start && start < record.end) first = record;
            if (end > record.start && end <= record.end) { last = record; break; }
        }
        if (!first || !last) return null;
        const range = document.createRange();
        range.setStart(first.node, start - first.start);
        range.setEnd(last.node, end - last.start);
        return range;
    }

    function closestHighlight(target) {
        return target instanceof Element ? target.closest(`mark.${MARK_CLASS}`) : target?.parentElement?.closest(`mark.${MARK_CLASS}`);
    }

    function handleHighlightClick(event) {
        if (isUIEvent(event)) return;
        const mark = closestHighlight(event.target);
        if (!mark) return;
        event.preventDefault();
        openNote(mark.dataset.markwebId);
    }

    function findMarks(id) {
        return Array.from(document.querySelectorAll(`mark.${MARK_CLASS}`)).filter((mark) => mark.dataset.markwebId === id);
    }

    function scheduleMarginNoteLayout() {
        if (marginLayoutFrame) return;
        marginLayoutFrame = window.requestAnimationFrame(() => {
            marginLayoutFrame = 0;
            renderMarginNotes();
        });
    }

    function clearMarginNotes() {
        ui.marginNotes.replaceChildren();
        ui.marginConnectors.replaceChildren();
    }

    function visibleHighlightAnchor(id) {
        const candidates = findMarks(id)
            .flatMap((mark) => Array.from(mark.getClientRects()).map((rect) => ({ mark, rect })))
            .filter(({ rect }) => rect.width > 0 && rect.height > 0 && rect.bottom > 8 && rect.top < innerHeight - 8 && rect.right > 0 && rect.left < innerWidth);
        if (!candidates.length) return null;
        const selected = candidates.sort((a, b) => {
            const aCenter = a.rect.top + a.rect.height / 2;
            const bCenter = b.rect.top + b.rect.height / 2;
            return Math.abs(aCenter - innerHeight / 2) - Math.abs(bCenter - innerHeight / 2);
        })[0];
        return {
            rect: selected.rect,
            contentRect: closestContentRect(selected.mark, selected.rect)
        };
    }

    function closestContentRect(mark, fallbackRect) {
        const blockDisplays = new Set(['block', 'list-item', 'flow-root', 'table-cell', 'flex', 'grid']);
        let element = mark.parentElement;
        while (element && element !== document.body && element !== document.documentElement) {
            const rect = element.getBoundingClientRect();
            if (rect.width > 0 && rect.height > 0 && blockDisplays.has(getComputedStyle(element).display)) {
                return rect;
            }
            element = element.parentElement;
        }
        return fallbackRect;
    }

    function renderMarginNotes() {
        clearMarginNotes();
        if (!settings.marginNotes.enabled || innerWidth < 960 || innerHeight < 360) return;

        const panelBoundary = ui.panel.classList.contains('open')
            ? innerWidth - ui.panel.offsetWidth - 26
            : innerWidth - 12;
        const entries = [];
        const fragment = document.createDocumentFragment();

        for (const item of pageState.notes) {
            const text = item.note.trim();
            if (!text) continue;
            const anchor = visibleHighlightAnchor(item.id);
            if (!anchor) continue;
            const { rect, contentRect } = anchor;

            const leftSpace = contentRect.left - 12;
            const rightSpace = panelBoundary - contentRect.right;
            const side = settings.marginNotes.side === 'auto'
                ? (rightSpace > leftSpace ? 'right' : 'left')
                : settings.marginNotes.side;
            const available = side === 'left' ? leftSpace : rightSpace;
            const noteGap = settings.marginNotes.distance;
            if (available < noteGap + 142) continue;

            const width = Math.min(220, Math.floor(available - noteGap));
            const left = side === 'left' ? contentRect.left - noteGap - width : contentRect.right + noteGap;
            const element = document.createElement('button');
            element.type = 'button';
            element.className = `margin-note${item.id === activeNoteId ? ' active' : ''}`;
            element.dataset.id = item.id;
            element.style.setProperty('--margin-color', cardColor(item));
            element.style.fontSize = `${settings.marginNotes.fontSize}px`;
            element.style.fontFamily = marginNoteFontStack();
            element.style.width = `${width}px`;
            element.style.left = `${left}px`;
            element.style.top = '0';
            element.style.visibility = 'hidden';
            element.textContent = text;
            element.title = `${text}\n\n点击打开对应笔记`;
            element.setAttribute('aria-label', `备注：${shorten(text, 80)}`);
            fragment.appendChild(element);
            entries.push({
                item, element, side, left, width,
                anchorX: side === 'left' ? rect.left - 2 : rect.right + 2,
                anchorY: rect.top + rect.height / 2,
                desiredY: rect.top + rect.height / 2
            });
        }

        ui.marginNotes.appendChild(fragment);
        for (const entry of entries) entry.height = entry.element.getBoundingClientRect().height;
        const visibleEntries = [
            ...packMarginColumn(entries.filter((entry) => entry.side === 'left')),
            ...packMarginColumn(entries.filter((entry) => entry.side === 'right'))
        ];

        ui.marginConnectors.setAttribute('viewBox', `0 0 ${innerWidth} ${innerHeight}`);
        ui.marginConnectors.setAttribute('width', String(innerWidth));
        ui.marginConnectors.setAttribute('height', String(innerHeight));
        const connectorFragment = document.createDocumentFragment();
        for (const entry of visibleEntries) {
            entry.element.style.top = `${entry.top}px`;
            entry.element.style.visibility = '';
            const noteX = entry.side === 'left' ? entry.left + entry.width + 3 : entry.left - 3;
            const noteY = entry.top + entry.height / 2;
            const middleX = (entry.anchorX + noteX) / 2;
            const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            path.setAttribute('d', `M ${entry.anchorX} ${entry.anchorY} C ${middleX} ${entry.anchorY}, ${middleX} ${noteY}, ${noteX} ${noteY}`);
            path.setAttribute('fill', 'none');
            path.setAttribute('stroke', cardColor(entry.item));
            path.setAttribute('stroke-width', entry.item.id === activeNoteId ? '2.2' : '1.6');
            path.setAttribute('stroke-dasharray', '4 5');
            path.setAttribute('stroke-linecap', 'round');
            path.setAttribute('opacity', entry.item.id === activeNoteId ? '1' : '.92');
            connectorFragment.appendChild(path);
        }
        ui.marginConnectors.appendChild(connectorFragment);
    }

    function packMarginColumn(entries) {
        if (!entries.length) return [];
        const edge = 12;
        const gap = 10;
        const availableHeight = innerHeight - edge * 2;
        let usedHeight = 0;
        const selected = entries
            .slice()
            .sort((a, b) => Math.abs(a.desiredY - innerHeight / 2) - Math.abs(b.desiredY - innerHeight / 2))
            .filter((entry) => {
                const nextHeight = usedHeight + entry.height + (usedHeight ? gap : 0);
                if (nextHeight > availableHeight) {
                    entry.element.remove();
                    return false;
                }
                usedHeight = nextHeight;
                return true;
            })
            .sort((a, b) => a.desiredY - b.desiredY);

        let cursor = edge;
        for (const entry of selected) {
            const idealTop = Math.max(edge, Math.min(entry.desiredY - entry.height / 2, innerHeight - edge - entry.height));
            entry.top = Math.max(idealTop, cursor);
            cursor = entry.top + entry.height + gap;
        }
        cursor = innerHeight - edge;
        for (let index = selected.length - 1; index >= 0; index -= 1) {
            const entry = selected[index];
            entry.top = Math.min(entry.top, cursor - entry.height);
            cursor = entry.top - gap;
        }
        return selected;
    }

    function handleMarginNoteClick(event) {
        const marginNote = event.target.closest('.margin-note');
        if (!marginNote) return;
        event.preventDefault();
        event.stopPropagation();
        openNote(marginNote.dataset.id);
    }

    function openNote(id) {
        panelMode = 'page';
        activeNoteId = id;
        ui.panel.classList.add('open');
        renderPanel();
        window.setTimeout(() => {
            const card = Array.from(ui.notes.querySelectorAll('.card')).find((item) => item.dataset.id === id);
            card?.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }, 0);
    }

    function togglePanel() {
        ui.panel.classList.toggle('open');
        closeSettingsMenu();
        if (ui.panel.classList.contains('open')) renderPanel();
        else {
            activeNoteId = null;
            expandedNoteIds.clear();
            resetSearch();
        }
        scheduleMarginNoteLayout();
    }

    function closePanel() {
        ui.panel.classList.remove('open');
        closeSettingsMenu();
        activeNoteId = null;
        expandedNoteIds.clear();
        resetSearch();
        scheduleMarginNoteLayout();
    }

    function toggleSettingsMenu() {
        ui.root.querySelector('.settings-menu').classList.toggle('open');
    }

    function syncPaletteButtons() {
        ui.palette.querySelectorAll('[data-color-id]').forEach((button) => {
            const index = Number(button.dataset.colorId);
            const color = settings.palette[index] || DEFAULT_COLORS[index];
            button.style.background = color;
            button.title = `高亮颜色 ${index + 1}：${color.toUpperCase()}`;
            button.setAttribute('aria-label', button.title);
        });
    }

    function syncMarginNotesToggle() {
        const button = ui.root.querySelector('.margin-notes-toggle');
        if (!button) return;
        button.setAttribute('aria-pressed', String(settings.marginNotes.enabled));
        button.querySelector('.menu-state').textContent = settings.marginNotes.enabled ? '开' : '关';
    }

    function toggleMarginNotes() {
        settings.marginNotes.enabled = !settings.marginNotes.enabled;
        syncMarginNotesToggle();
        closeSettingsMenu();
        scheduleSettingsSave();
        scheduleMarginNoteLayout();
        if (panelMode === 'settings') renderSettingsPage();
        toast(settings.marginNotes.enabled ? '已显示页边备注' : '已隐藏页边备注');
    }

    function closeSettingsMenu() {
        ui.root.querySelector('.settings-menu').classList.remove('open');
    }

    function toggleSearch() {
        if (ui.search.classList.contains('open')) {
            resetSearch();
            renderPanel();
            return;
        }
        ui.search.classList.add('open');
        window.setTimeout(() => ui.search.focus(), 0);
    }

    function resetSearch() {
        searchText = '';
        ui.search.value = '';
        ui.search.classList.remove('open');
    }

    function openSettings() {
        settingsReturnMode = panelMode === 'all' ? 'all' : 'page';
        panelMode = 'settings';
        activeNoteId = null;
        expandedNoteIds.clear();
        resetSearch();
        closeSettingsMenu();
        renderPanel();
    }

    function handlePanelBackNavigation() {
        closeSettingsMenu();
        if (panelMode === 'settings') {
            panelMode = settingsReturnMode;
            renderPanel();
            if (panelMode === 'all' && !allPages.length) void loadAllPages();
            return;
        }
        void toggleAllPages();
    }

    function renderPanel() {
        scheduleMarginNoteLayout();
        const allButton = ui.root.querySelector('.all-pages-button');
        const settingsWrap = ui.root.querySelector('.settings-wrap');
        const exportButton = ui.root.querySelector('.export-button');
        const exportContentButton = ui.root.querySelector('.export-content-button');
        const clearButton = ui.root.querySelector('.clear-button');
        const isAll = panelMode === 'all';
        const isSettings = panelMode === 'settings';
        ui.search.placeholder = isAll ? '搜索网页标题…' : '搜索原文或备注…';
        allButton.innerHTML = panelIcon(isAll || isSettings ? 'back' : 'home');
        allButton.title = isSettings ? '返回' : (isAll ? '返回本页' : '全部网页');
        allButton.setAttribute('aria-label', allButton.title);
        settingsWrap.style.visibility = isSettings ? 'hidden' : '';
        exportButton.title = isAll ? '导出全部' : '导出笔记';
        exportButton.setAttribute('aria-label', exportButton.title);
        exportButton.querySelector('span').textContent = exportButton.title;
        exportContentButton.style.display = isAll || isSettings ? 'none' : '';
        clearButton.style.display = isAll || isSettings ? 'none' : '';
        if (isSettings) {
            ui.count.textContent = '设置';
            ui.search.classList.remove('open');
            renderSettingsPage();
            return;
        }
        if (isAll) {
            renderAllPages();
            return;
        }

        ui.count.textContent = `${pageState.notes.length} 条`;
        if (ui.search.value !== searchText) ui.search.value = searchText;
        const notes = getVisiblePageNotes();
        if (!notes.length) {
            ui.notes.innerHTML = `<div class="empty">${pageState.notes.length ? '没有匹配的批注' : '选中网页文字，即可开始高亮和记录。'}</div>`;
            return;
        }
        ui.notes.innerHTML = notes.map((item) => {
            const editorOpen = expandedNoteIds.has(item.id);
            return `
            <article class="card${item.id === activeNoteId ? ' active' : ''}" data-id="${escapeHTML(item.id)}" style="--card-color:${cardColor(item)}" title="单击定位；双击复制；Enter 编辑备注；方向键切换；Backspace 删除">
                <blockquote class="quote">${escapeHTML(shorten(item.quote, 240))}</blockquote>
                ${editorOpen
                    ? `<textarea class="note-input" data-role="note" placeholder="写下你的想法…">${escapeHTML(item.note)}</textarea>`
                    : (item.note.trim() ? `<p class="note-preview">${escapeHTML(item.note)}</p>` : '')}
            </article>`;
        }).join('');
    }

    function renderSettingsPage() {
        const fontSizeProgress = ((settings.marginNotes.fontSize - 12) / (30 - 12)) * 100;
        const distanceProgress = ((settings.marginNotes.distance - 8) / (120 - 8)) * 100;
        const fontOptions = MARGIN_FONT_OPTIONS.map((option) =>
            `<option value="${option.id}" ${settings.marginNotes.font === option.id ? 'selected' : ''}>${option.label}</option>`
        ).join('');
        const paletteRows = settings.palette.map((color, index) => `
            <label class="palette-setting" style="--preview-color:${color};--preview-text:${contrastTextColor(color)};--preview-accent:${accentColor(color)}">
                <span class="palette-input-wrap">
                    <input class="palette-input" type="color" value="${color}" data-setting="palette" data-index="${index}" aria-label="设置高亮颜色 ${index + 1}">
                </span>
                <span class="palette-meta"><strong>颜色 ${index + 1}</strong><code><span class="accent-preview"></span><span data-color-value>${color.toUpperCase()}</span></code></span>
            </label>
        `).join('');
        ui.notes.innerHTML = `
            <div class="settings-page">
                <section class="settings-section">
                    <h3>高亮颜色</h3>
                    <div class="palette-settings">${paletteRows}</div>
                    <div class="settings-actions"><button class="settings-reset" type="button" data-action="reset-colors">恢复默认颜色</button></div>
                </section>
                <section class="settings-section">
                    <h3>页边备注</h3>
                    <label class="settings-row">
                        <span class="settings-label">显示页边备注</span>
                        <input class="switch-input" type="checkbox" data-setting="margin-enabled" ${settings.marginNotes.enabled ? 'checked' : ''}>
                    </label>
                    <label class="settings-row">
                        <span class="settings-label">备注字体</span>
                        <select data-setting="margin-font">${fontOptions}</select>
                    </label>
                    ${settings.marginNotes.font === 'custom' ? `
                    <label class="settings-row">
                        <span class="settings-label">字体名称</span>
                        <input class="settings-text-input" type="text" maxlength="80" value="${escapeHTML(settings.marginNotes.customFont)}" placeholder="输入已安装字体" data-setting="margin-custom-font">
                    </label>` : ''}
                    <label class="settings-row settings-range-row">
                        <span class="settings-range-head"><span class="settings-label">字体大小</span><output class="settings-value">${settings.marginNotes.fontSize}px</output></span>
                        <span class="settings-range"><input type="range" min="12" max="30" step="1" value="${settings.marginNotes.fontSize}" style="--range-progress:${fontSizeProgress}%" data-setting="margin-font-size"></span>
                    </label>
                    <label class="settings-row settings-range-row">
                        <span class="settings-range-head"><span class="settings-label">正文距离</span><output class="settings-value">${settings.marginNotes.distance}px</output></span>
                        <span class="settings-range"><input type="range" min="8" max="120" step="1" value="${settings.marginNotes.distance}" style="--range-progress:${distanceProgress}%" data-setting="margin-distance"></span>
                    </label>
                    <label class="settings-row">
                        <span class="settings-label">显示位置</span>
                        <select data-setting="margin-side">
                            <option value="auto" ${settings.marginNotes.side === 'auto' ? 'selected' : ''}>自动</option>
                            <option value="left" ${settings.marginNotes.side === 'left' ? 'selected' : ''}>正文左侧</option>
                            <option value="right" ${settings.marginNotes.side === 'right' ? 'selected' : ''}>正文右侧</option>
                        </select>
                    </label>
                    <div class="settings-actions"><button class="settings-reset" type="button" data-action="reset-margin-notes">恢复默认设置</button></div>
                </section>
                <section class="settings-section shortcut-section">
                    <h3>快捷键</h3>
                    <div class="shortcut-list">
                        <div class="shortcut-row">
                            <span class="shortcut-keys"><span class="key-combo"><kbd>⌘</kbd><kbd>M</kbd></span><span class="shortcut-or">/</span><span class="key-combo"><kbd>Alt</kbd><kbd>M</kbd></span></span>
                            <span class="shortcut-action">打开或关闭面板</span>
                        </div>
                        <div class="shortcut-row">
                            <span class="shortcut-keys"><span class="key-combo"><kbd>Alt</kbd><kbd>Shift</kbd><kbd>M</kbd></span></span>
                            <span class="shortcut-action">全部网页笔记</span>
                        </div>
                        <div class="shortcut-row">
                            <span class="shortcut-keys"><kbd>↑</kbd><kbd>↓</kbd></span>
                            <span class="shortcut-action">切换并定位笔记</span>
                        </div>
                        <div class="shortcut-row">
                            <span class="shortcut-keys"><kbd>←</kbd><kbd>→</kbd></span>
                            <span class="shortcut-action">切换高亮颜色</span>
                        </div>
                        <div class="shortcut-row">
                            <span class="shortcut-keys"><kbd>Enter</kbd></span>
                            <span class="shortcut-action">编辑备注</span>
                        </div>
                        <div class="shortcut-row">
                            <span class="shortcut-keys"><kbd>Backspace</kbd></span>
                            <span class="shortcut-action">删除笔记</span>
                        </div>
                        <div class="shortcut-row">
                            <span class="shortcut-keys"><kbd>Esc</kbd></span>
                            <span class="shortcut-action">收起编辑或面板</span>
                        </div>
                    </div>
                </section>
            </div>
        `;
    }

    async function toggleAllPages() {
        panelMode = panelMode === 'all' ? 'page' : 'all';
        activeNoteId = null;
        expandedNoteIds.clear();
        resetSearch();
        renderPanel();
        if (panelMode === 'all') await loadAllPages();
    }

    function openAllPages() {
        panelMode = 'all';
        activeNoteId = null;
        expandedNoteIds.clear();
        resetSearch();
        ui.panel.classList.add('open');
        renderPanel();
        void loadAllPages();
    }

    function renderAllPages() {
        if (allPagesLoading) {
            ui.count.textContent = '';
            ui.notes.innerHTML = '<div class="empty">正在读取全部笔记…</div>';
            return;
        }

        const groups = allPages.filter((page) => !searchText || page.title.toLowerCase().includes(searchText));
        const totalNotes = allPages.reduce((sum, page) => sum + page.notes.length, 0);
        ui.count.textContent = `${allPages.length} 页 · ${totalNotes} 条`;

        if (!groups.length) {
            ui.notes.innerHTML = `<div class="empty">${allPages.length ? '没有匹配的笔记' : '还没有保存过网页笔记。'}</div>`;
            return;
        }

        ui.notes.innerHTML = groups.map((page) => `
            <section class="page-group">
                <header class="page-heading">
                    <div class="page-title-row">
                        <h3 class="page-title" title="${escapeHTML(page.title)}">${escapeHTML(page.title)}</h3>
                        <span class="page-note-count">${page.notes.length} 条</span>
                        <button class="text-button" type="button" data-action="open-url" data-url="${escapeHTML(page.url)}" title="打开">打开网页</button>
                    </div>
                </header>
            </section>
        `).join('');
    }

    function escapeHTML(value) {
        return String(value).replace(/[&<>"]/g, (char) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[char]);
    }

    function cardColor(noteOrColor) {
        const color = typeof noteOrColor === 'object'
            ? noteHighlightColor(noteOrColor)
            : (normalizeHexColor(noteOrColor) || settings.palette[0] || DEFAULT_COLOR);
        return accentColor(color);
    }

    function panelIcon(name) {
        const paths = {
            home: '<path d="m3 11 9-8 9 8"/><path d="M5 10v11h14V10M9 21v-7h6v7"/>',
            back: '<path d="m15 18-6-6 6-6"/>',
            annotation: '<path d="M4 5h16v11H9l-5 4V5Z"/><path d="M8 9h8M8 12h5"/>',
            download: '<path d="M12 3v12M7 10l5 5 5-5M5 21h14"/>',
            document: '<path d="M6 3h8l4 4v14H6V3Z"/><path d="M14 3v5h5M9 12h6M9 16h6"/>',
            trash: '<path d="M3 6h18M8 6V4h8v2M19 6l-1 15H6L5 6M10 11v5M14 11v5"/>',
            search: '<circle cx="11" cy="11" r="7"/><path d="m20 20-4-4"/>',
            sliders: '<path d="M4 7h10M18 7h2M4 17h2M10 17h10"/><circle cx="16" cy="7" r="2"/><circle cx="8" cy="17" r="2"/>',
            settings: '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .34 1.88l.06.06-2.83 2.83-.06-.06a1.7 1.7 0 0 0-1.88-.34 1.7 1.7 0 0 0-1.03 1.56V21h-4v-.09A1.7 1.7 0 0 0 8.94 19.4a1.7 1.7 0 0 0-1.88.34l-.06.06-2.83-2.83.06-.06A1.7 1.7 0 0 0 4.6 15 1.7 1.7 0 0 0 3 14H3v-4h.09A1.7 1.7 0 0 0 4.6 8.94a1.7 1.7 0 0 0-.34-1.88L4.2 7l2.83-2.83.06.06A1.7 1.7 0 0 0 9 4.6 1.7 1.7 0 0 0 10 3h4v.09A1.7 1.7 0 0 0 15.06 4.6a1.7 1.7 0 0 0 1.88-.34L17 4.2 19.8 7l-.06.06A1.7 1.7 0 0 0 19.4 9c.18.61.73 1 1.36 1H21v4h-.09a1.7 1.7 0 0 0-1.51 1Z"/>'
        };
        return `<svg viewBox="0 0 24 24" aria-hidden="true">${paths[name] || ''}</svg>`;
    }

    function shorten(text, limit) {
        return text.length > limit ? `${text.slice(0, limit)}…` : text;
    }

    function handlePanelInput(event) {
        if (event.target.matches('[data-setting]')) {
            handleSettingsInput(event);
            return;
        }
        if (!event.target.matches('[data-role="note"]')) return;
        const item = pageState.notes.find((note) => note.id === event.target.closest('.card')?.dataset.id);
        if (!item) return;
        item.note = event.target.value;
        item.updatedAt = new Date().toISOString();
        findMarks(item.id).forEach((mark) => { mark.title = item.note || '点击编辑批注'; });
        scheduleMarginNoteLayout();
        scheduleSave();
    }

    function handleSettingsInput(event) {
        const target = event.target;
        if (!(target instanceof Element) || !target.matches('[data-setting]')) return;
        const setting = target.dataset.setting;
        if (setting === 'palette') {
            const index = Number(target.dataset.index);
            const color = normalizeHexColor(target.value);
            if (!Number.isInteger(index) || index < 0 || index >= settings.palette.length || !color) return;
            settings.palette[index] = color;
            const row = target.closest('.palette-setting');
            row?.style.setProperty('--preview-color', color);
            row?.style.setProperty('--preview-text', contrastTextColor(color));
            row?.style.setProperty('--preview-accent', accentColor(color));
            const colorValue = row?.querySelector('[data-color-value]');
            if (colorValue) colorValue.textContent = color.toUpperCase();
            syncPaletteButtons();
            applyPaletteToCurrentPage();
        } else if (setting === 'margin-enabled') {
            settings.marginNotes.enabled = target.checked;
            syncMarginNotesToggle();
            scheduleMarginNoteLayout();
        } else if (setting === 'margin-font') {
            settings.marginNotes.font = MARGIN_FONT_OPTIONS.some((option) => option.id === target.value) ? target.value : 'xingkai';
            scheduleMarginNoteLayout();
            renderSettingsPage();
        } else if (setting === 'margin-custom-font') {
            settings.marginNotes.customFont = target.value.slice(0, 80);
            scheduleMarginNoteLayout();
        } else if (setting === 'margin-font-size') {
            settings.marginNotes.fontSize = clampNumber(target.value, 12, 30, DEFAULT_SETTINGS.marginNotes.fontSize);
            target.style.setProperty('--range-progress', `${((settings.marginNotes.fontSize - 12) / (30 - 12)) * 100}%`);
            const output = target.closest('.settings-range-row')?.querySelector('.settings-value');
            if (output) output.textContent = `${settings.marginNotes.fontSize}px`;
            scheduleMarginNoteLayout();
        } else if (setting === 'margin-distance') {
            settings.marginNotes.distance = clampNumber(target.value, 8, 120, DEFAULT_SETTINGS.marginNotes.distance);
            target.style.setProperty('--range-progress', `${((settings.marginNotes.distance - 8) / (120 - 8)) * 100}%`);
            const output = target.closest('.settings-range-row')?.querySelector('.settings-value');
            if (output) output.textContent = `${settings.marginNotes.distance}px`;
            scheduleMarginNoteLayout();
        } else if (setting === 'margin-side') {
            settings.marginNotes.side = ['auto', 'left', 'right'].includes(target.value) ? target.value : 'auto';
            scheduleMarginNoteLayout();
        } else {
            return;
        }
        scheduleSettingsSave();
    }

    function applyPaletteToCurrentPage() {
        for (const item of pageState.notes) {
            item.colorId = resolveColorId(item);
            item.color = settings.palette[item.colorId];
            const color = noteHighlightColor(item);
            findMarks(item.id).forEach((mark) => {
                mark.style.setProperty('--markweb-color', color);
                mark.style.setProperty('--markweb-text-color', contrastTextColor(color));
            });
        }
        scheduleSave();
        scheduleMarginNoteLayout();
    }

    function resetPaletteSettings() {
        settings.palette = DEFAULT_COLORS.slice();
        syncPaletteButtons();
        applyPaletteToCurrentPage();
        scheduleSettingsSave();
        renderSettingsPage();
        toast('高亮颜色已恢复默认');
    }

    function resetMarginNoteSettings() {
        settings.marginNotes = { ...DEFAULT_SETTINGS.marginNotes };
        syncMarginNotesToggle();
        scheduleMarginNoteLayout();
        scheduleSettingsSave();
        renderSettingsPage();
        toast('页边备注设置已恢复默认');
    }

    function handlePanelClick(event) {
        const button = event.target.closest('[data-action]');
        if (button?.dataset.action === 'reset-colors') {
            resetPaletteSettings();
            return;
        }
        if (button?.dataset.action === 'reset-margin-notes') {
            resetMarginNoteSettings();
            return;
        }
        if (button?.dataset.action === 'open-url') {
            try {
                const url = new URL(button.dataset.url);
                if (url.protocol === 'http:' || url.protocol === 'https:') {
                    window.open(url.href, '_blank', 'noopener,noreferrer');
                }
            } catch (_) {
                toast('网址无效，无法打开');
            }
            return;
        }
        const card = event.target.closest('.card');
        if (!button && card && !event.target.closest('textarea')) {
            window.clearTimeout(cardClickTimer);
            const id = card.dataset.id;
            cardClickTimer = window.setTimeout(() => locateOnPage(id), 220);
            return;
        }
        const id = card?.dataset.id;
        if (!button || !id) return;
    }

    function handlePanelDoubleClick(event) {
        const card = event.target.closest('.card');
        if (!card || event.target.closest('textarea')) return;
        event.preventDefault();
        event.stopPropagation();
        window.clearTimeout(cardClickTimer);
        void copyNote(card.dataset.id);
    }

    async function copyNote(id) {
        const item = pageState.notes.find((note) => note.id === id);
        if (!item) return;
        const remark = item.note.trim();
        const text = remark ? `${item.quote}\n\n${remark}` : item.quote;
        try {
            if (!navigator.clipboard?.writeText) throw new Error('Clipboard API unavailable');
            await navigator.clipboard.writeText(text);
            toast('笔记已复制');
        } catch (_) {
            const textarea = document.createElement('textarea');
            textarea.value = text;
            textarea.setAttribute('readonly', '');
            textarea.style.cssText = 'position:fixed;left:-9999px;top:0;opacity:0;';
            (document.body || document.documentElement).appendChild(textarea);
            textarea.select();
            let copied = false;
            try { copied = document.execCommand('copy'); } catch (_) { /* 使用失败提示兜底。 */ }
            textarea.remove();
            toast(copied ? '笔记已复制' : '复制失败，请手动复制');
        }
    }

    function toggleNoteEditor(id) {
        if (expandedNoteIds.has(id)) {
            expandedNoteIds.delete(id);
            renderPanel();
            return;
        }
        expandedNoteIds.clear();
        expandedNoteIds.add(id);
        activeNoteId = id;
        renderPanel();
        window.setTimeout(() => {
            const card = Array.from(ui.notes.querySelectorAll('.card')).find((item) => item.dataset.id === id);
            card?.querySelector('.note-input')?.focus();
        }, 0);
    }

    function updateColor(id, colorId) {
        const item = pageState.notes.find((note) => note.id === id);
        if (!item || !Number.isInteger(colorId) || colorId < 0 || colorId >= settings.palette.length) return;
        item.colorId = colorId;
        item.color = settings.palette[colorId];
        item.updatedAt = new Date().toISOString();
        findMarks(id).forEach((mark) => {
            mark.style.setProperty('--markweb-color', item.color);
            mark.style.setProperty('--markweb-text-color', contrastTextColor(item.color));
        });
        scheduleSave(); renderPanel();
    }

    function locateOnPage(id) {
        expandedNoteIds.clear();
        activeNoteId = id;
        renderPanel();
        const card = Array.from(ui.notes.querySelectorAll('.card')).find((item) => item.dataset.id === id);
        card?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
        const mark = findMarks(id)[0];
        if (!mark) { toast('网页内容可能已变化，暂时无法定位'); return; }
        mark.scrollIntoView({ behavior: 'smooth', block: 'center' });
        mark.animate([{ boxShadow: '0 0 0 2px #1677ff' }, { boxShadow: '0 0 0 10px transparent' }], { duration: 900 });
    }

    function deleteNote(id) {
        const index = pageState.notes.findIndex((item) => item.id === id);
        if (index < 0) return;
        const [note] = pageState.notes.splice(index, 1);
        deletedSnapshot = { type: 'single', note, index, pageKey: activePageKey };
        unwrapMarks(id);
        expandedNoteIds.delete(id);
        if (activeNoteId === id) activeNoteId = null;
        scheduleSave(); renderPanel(); showUndoToast('笔记已删除');
    }

    function undoLastDelete() {
        const snapshot = deletedSnapshot;
        if (!snapshot || snapshot.pageKey !== activePageKey) {
            toast('无法恢复这条笔记');
            return;
        }
        deletedSnapshot = null;
        window.clearTimeout(toast.timer);
        if (snapshot.type === 'page') {
            pageState.notes = snapshot.notes;
        } else {
            pageState.notes.splice(Math.min(snapshot.index, pageState.notes.length), 0, snapshot.note);
        }
        scheduleSave();
        restoreHighlights();
        activeNoteId = snapshot.type === 'single' ? snapshot.note.id : null;
        renderPanel();
        if (snapshot.type === 'single') locateOnPage(snapshot.note.id);
        toast('笔记已恢复');
    }

    function unwrapMarks(id = null) {
        const marks = id ? findMarks(id) : Array.from(document.querySelectorAll(`mark.${MARK_CLASS}`));
        marks.forEach((mark) => {
            const parent = mark.parentNode;
            if (!parent) return;
            while (mark.firstChild) parent.insertBefore(mark.firstChild, mark);
            mark.remove();
            parent.normalize();
        });
    }

    function clearPage() {
        if (!pageState.notes.length) return;
        deletedSnapshot = { type: 'page', notes: pageState.notes.slice(), pageKey: activePageKey };
        pageState.notes = [];
        unwrapMarks();
        activeNoteId = null;
        expandedNoteIds.clear();
        scheduleSave(); renderPanel(); showUndoToast('本页笔记已清空');
    }

    async function exportMarkdown() {
        if (panelMode === 'all') {
            if (allPagesLoading) { toast('正在读取全部笔记，请稍候'); return; }
            if (!allPages.length) await loadAllPages();
            if (!allPages.length) { toast('还没有可导出的笔记'); return; }

            const lines = ['# MarkWeb 全部网页笔记', '', `- 导出时间：${new Date().toLocaleString()}`, ''];
            allPages.forEach((page) => {
                lines.push(`## ${page.title}`, '', `- 来源：${page.url}`, '');
                page.notes.forEach((item, index) => {
                    lines.push(`### 批注 ${index + 1}`, '', `> ${item.quote.replace(/\n/g, '\n> ')}`, '');
                    if (item.note.trim()) lines.push(item.note.trim(), '');
                });
            });
            downloadMarkdown(lines, `MarkWeb-全部笔记-${new Date().toISOString().slice(0, 10)}.md`);
            toast('全部笔记已导出');
            return;
        }

        if (!pageState.notes.length) { toast('本页还没有可导出的批注'); return; }
        const lines = buildCurrentPageNoteLines();
        downloadMarkdown(lines, `${safeFilename(document.title || 'MarkWeb-网页笔记')}.md`);
        toast('笔记已导出');
    }

    function buildCurrentPageNoteLines(linkedNoteIds = null) {
        const lines = [`# ${document.title || '网页笔记'}`, '', `- 来源：${activePageKey}`, `- 导出时间：${new Date().toLocaleString()}`, ''];
        pageState.notes.forEach((item, index) => {
            lines.push(`## 批注 ${index + 1}`, '', `> ${item.quote.replace(/\n/g, '\n> ')}`, '');
            if (linkedNoteIds?.has(item.id)) lines.push(`[跳转到正文标注](#${exportNoteAnchorId(index)})`, '');
            if (item.note.trim()) lines.push(item.note.trim(), '');
        });
        return lines;
    }

    function exportNoteAnchorId(index) {
        return `markweb-note-${index + 1}`;
    }

    function exportMarkdownWithContent() {
        if (panelMode !== 'page') { toast('含正文导出仅支持当前网页'); return; }
        if (!pageState.notes.length) { toast('本页还没有可导出的批注'); return; }
        try {
            restoreHighlights(false);
            const { markdown, anchoredNoteIds } = extractPageContentMarkdown();
            if (!markdown) { toast('没有识别到可导出的网页正文'); return; }
            const lines = buildCurrentPageNoteLines(anchoredNoteIds);
            lines.push('---', '', '## 网页正文全文', '', markdown, '');
            downloadMarkdown(lines, `${safeFilename(document.title || 'MarkWeb-网页笔记')}-含正文.md`);
            toast('笔记和正文已导出');
        } catch (error) {
            console.warn('[MarkWeb] 正文导出失败：', error);
            toast('正文提取失败，请使用普通导出');
        }
    }

    function extractPageContentMarkdown() {
        const root = findReadableContentRoot();
        if (!root) return { markdown: '', anchoredNoteIds: new Set() };
        const clone = root.cloneNode(true);
        removeContentElements(clone, [
            `#${APP_ID}`, 'script', 'style', 'noscript', 'template', 'svg', 'canvas',
            'iframe', 'video', 'audio', 'picture', 'img', 'form', 'button', 'input',
            'textarea', 'select', 'option', 'nav', 'aside', '[hidden]',
            '[aria-hidden="true"]', '[role="navigation"]', '[role="toolbar"]',
            '[role="dialog"]', '[role="button"]', '[role="banner"]',
            '[role="complementary"]', '[role="contentinfo"]', '[role="search"]'
        ]);
        if (!isChatGPTPage()) removeNewsPageNoise(clone);
        const anchoredNoteIds = new Set();
        return { markdown: contentNodeToMarkdown(clone, anchoredNoteIds), anchoredNoteIds };
    }

    function findReadableContentRoot() {
        const mainCandidates = [...new Set(document.querySelectorAll('main,[role="main"]'))];
        if (isChatGPTPage()) return bestByTextLength(mainCandidates) || document.body;

        const selectors = [
            'article', '[itemprop="articleBody"]', '[data-testid*="article-body" i]',
            '[class*="article-body" i]', '[class*="article__body" i]',
            '[class*="article-content" i]', '[class*="article_content" i]',
            '[id*="article-body" i]', '[id*="article_body" i]',
            '[id*="article-content" i]', '[class*="post-content" i]',
            '[class*="post_body" i]', '[class*="entry-content" i]',
            '[class*="story-body" i]', '[class*="story-content" i]',
            '[class*="content-body" i]', 'main', '[role="main"]'
        ];
        const candidates = [...new Set(document.querySelectorAll(selectors.join(',')))];
        const scored = candidates
            .map((element) => ({ element, score: readableContentScore(element) }))
            .filter((item) => item.score > 0)
            .sort((a, b) => b.score - a.score);
        const explicitBody = scored.find((item) => item.element.matches([
            '[itemprop="articleBody"]', '[data-testid*="article-body" i]',
            '[class*="article-body" i]', '[class*="article__body" i]',
            '[class*="article-content" i]', '[class*="post-content" i]',
            '[class*="entry-content" i]', '[class*="story-body" i]',
            '[class*="story-content" i]', '[class*="content-body" i]'
        ].join(',')));
        const highlightedRoot = findHighlightedContentRoot();
        const paragraphRoot = findParagraphContentRoot();
        const article = scored.find((item) => item.element.tagName.toLowerCase() === 'article');
        return explicitBody?.element || highlightedRoot || paragraphRoot || article?.element || scored[0]?.element || bestByTextLength(mainCandidates) || document.body;
    }

    function readableTextLength(element) {
        return String(element?.innerText || element?.textContent || '').trim().length;
    }

    function bestByTextLength(elements) {
        return elements
            .map((element) => ({ element, length: readableTextLength(element) }))
            .filter((item) => item.length > 0)
            .sort((a, b) => b.length - a.length)[0]?.element || null;
    }

    function isChatGPTPage() {
        return location.hostname === 'chatgpt.com' || location.hostname === 'chat.openai.com';
    }

    function readableContentScore(element) {
        const textLength = readableTextLength(element);
        if (textLength < 80) return -1;
        const paragraphCount = element.querySelectorAll('p').length;
        const linkLength = Array.from(element.querySelectorAll('a')).reduce((sum, link) => sum + readableTextLength(link), 0);
        const linkDensity = linkLength / Math.max(1, textLength);
        const identity = `${element.id} ${element.className}`.toLowerCase();
        const isArticle = element.tagName.toLowerCase() === 'article';
        const hasBodyIdentity = /(article|post|entry|story|content)[-_\s]*(body|content|text)/i.test(identity);
        const hasExplicitBodyRole = element.matches('[itemprop="articleBody"],[data-testid*="article-body" i]');
        if (isArticle && !hasBodyIdentity && !hasExplicitBodyRole && textLength < 260 && paragraphCount < 2) return -1;
        const weightedLength = Math.min(textLength, 16000);
        let score = weightedLength + Math.min(paragraphCount, 40) * 140 - linkDensity * weightedLength * 1.8;
        if (element.matches('[itemprop="articleBody"]')) score += 5000;
        if (element.matches('[data-testid*="article-body" i]')) score += 4200;
        if (hasBodyIdentity) score += 3200;
        if (isArticle && (textLength >= 400 || paragraphCount >= 3)) score += 2200;
        if (/comment|sidebar|related|recommend|advert|promo|footer|header|nav|menu/i.test(identity)) score -= 6000;
        return score;
    }

    function findParagraphContentRoot() {
        const candidates = new Map();
        const paragraphs = Array.from(document.querySelectorAll('p,pre,td')).filter((element) => {
            if (element.closest(`#${APP_ID},nav,aside,footer,form,[role="navigation"],[role="complementary"],[role="contentinfo"]`)) return false;
            const length = readableTextLength(element);
            return length >= 60 && contentLinkDensity(element) < 0.5;
        });

        for (const paragraph of paragraphs) {
            const text = String(paragraph.innerText || paragraph.textContent || '').trim();
            const punctuation = (text.match(/[,.，。！？!?；;：:]/g) || []).length;
            const baseScore = 1 + Math.min(4, Math.floor(text.length / 100)) + Math.min(4, punctuation * 0.18);
            let ancestor = paragraph.parentElement;
            [1, 0.68, 0.38].forEach((weight) => {
                if (!ancestor || ancestor === document.body || ancestor === document.documentElement) return;
                const current = candidates.get(ancestor) || contentIdentityWeight(ancestor);
                candidates.set(ancestor, current + baseScore * weight);
                ancestor = ancestor.parentElement;
            });
        }

        const ranked = Array.from(candidates, ([element, rawScore]) => {
            const length = readableTextLength(element);
            const paragraphCount = element.querySelectorAll('p').length;
            const density = contentLinkDensity(element);
            const score = rawScore * (1 - Math.min(0.9, density)) + Math.min(length, 10000) / 900 + Math.min(paragraphCount, 20) * 0.4;
            return { element, score, length, paragraphCount };
        }).filter((item) => item.length >= 180 && item.paragraphCount >= 2)
            .sort((a, b) => b.score - a.score);
        return ranked[0]?.element || null;
    }

    function findHighlightedContentRoot() {
        const marks = Array.from(document.querySelectorAll(`mark.${MARK_CLASS}`));
        if (!marks.length) return null;
        let element = marks[0].parentElement;
        while (element && element !== document.body && element !== document.documentElement) {
            const containsEveryMark = marks.every((mark) => element.contains(mark));
            const textLength = readableTextLength(element);
            const paragraphCount = element.querySelectorAll('p').length;
            const isArticle = element.tagName.toLowerCase() === 'article';
            if (containsEveryMark && textLength >= 180 && (paragraphCount >= 2 || isArticle) && contentLinkDensity(element) < 0.45 && contentIdentityWeight(element) > -30) {
                return element;
            }
            element = element.parentElement;
        }
        return null;
    }

    function contentIdentityWeight(element) {
        const identity = [element.id, typeof element.className === 'string' ? element.className : ''].join(' ').toLowerCase();
        let weight = 0;
        if (/(article|body|content|entry|main|post|story|text)/i.test(identity)) weight += 18;
        if (/(comment|discussion|footer|header|menu|nav|recommend|related|sidebar|social|advert|promo|share)/i.test(identity)) weight -= 35;
        if (/(评论|推荐|广告|侧栏|导航|页脚|底部|分享)/.test(identity)) weight -= 35;
        const headingText = Array.from(element.querySelectorAll(':scope > h1,:scope > h2,:scope > h3'))
            .map((heading) => heading.textContent.replace(/\s+/g, ' ').trim())
            .join(' ');
        if (/评论|相关阅读|相关推荐|推荐阅读|comments?|discussion|related|recommended/i.test(headingText)) weight -= 45;
        if (element.querySelector(':scope > h1')) weight += 8;
        return weight;
    }

    function contentLinkDensity(element) {
        const textLength = readableTextLength(element);
        if (!textLength) return 0;
        const linkLength = Array.from(element.querySelectorAll('a')).reduce((sum, link) => sum + readableTextLength(link), 0);
        return linkLength / textLength;
    }

    function removeContentElements(root, selectors) {
        root.querySelectorAll(selectors.join(',')).forEach((element) => element.remove());
    }

    function removeNewsPageNoise(root) {
        removeContentElements(root, ['footer', '[data-ad]', '[data-ad-slot]', '[data-ad-unit]', '[data-testid*="comment" i]', '[data-testid*="recommend" i]', '[data-testid*="related" i]']);

        const noisePattern = /(^|[-_\s])(ad|ads|advert|advertisement|banner|breadcrumb|comments?|discussion|footer|masthead|menu|modal|newsletter|pagination|paywall|popup|promo|recommend(?:ation|ed)?|related|share|sharing|sidebar|social|sponsor(?:ed)?|subscribe|subscription|toolbar|topics?|trending|cookie|consent|overlay|reaction|rating|author-bio)([-_\s]|$)/i;
        Array.from(root.querySelectorAll('*')).forEach((element) => {
            const identity = [
                element.id,
                typeof element.className === 'string' ? element.className : '',
                element.getAttribute('role') || '',
                element.getAttribute('aria-label') || '',
                element.getAttribute('data-testid') || ''
            ].join(' ');
            if (noisePattern.test(identity)) element.remove();
        });

        Array.from(root.querySelectorAll('section,div,ul,ol')).reverse().forEach((element) => {
            const textLength = readableTextLength(element);
            const linkCount = element.querySelectorAll('a').length;
            if (linkCount >= 3 && textLength > 0 && textLength < 6000 && contentLinkDensity(element) > 0.48) element.remove();
        });

        const shortNoisePattern = /^(广告|广告内容|推广|赞助内容|ADVERTISEMENT|SPONSORED|分享|分享到|订阅|登录|注册|展开全文|打开APP|下载APP|返回顶部|加载更多)$/i;
        Array.from(root.querySelectorAll('div,section,p,span')).reverse().forEach((element) => {
            const text = element.textContent.replace(/\s+/g, ' ').trim();
            if (text.length <= 40 && shortNoisePattern.test(text)) element.remove();
        });

        const trailingHeadingPattern = /^(评论|全部评论|网友评论|热门评论|相关阅读|相关推荐|推荐阅读|更多阅读|猜你喜欢|comments?|discussion|related(?: stories| articles)?|recommended|you may also like)$/i;
        Array.from(root.querySelectorAll('h1,h2,h3,h4,h5,h6')).forEach((heading) => {
            const label = heading.textContent.replace(/\s+/g, ' ').trim();
            if (!trailingHeadingPattern.test(label)) return;
            const section = heading.closest('section,[class],[id]') || heading.parentElement;
            if (section && section !== root) {
                section.remove();
                return;
            }
            let sibling = heading;
            while (sibling) {
                const next = sibling.nextSibling;
                sibling.remove();
                sibling = next;
            }
        });

        Array.from(root.querySelectorAll('header')).forEach((header) => {
            if (!header.querySelector('h1')) header.remove();
        });
    }

    function contentNodeToMarkdown(root, anchoredNoteIds = new Set()) {
        const codeBlocks = [];
        const exportedNotes = new Map(pageState.notes.map((note, index) => [note.id, { note, index }]));
        const childMarkdown = (node) => Array.from(node.childNodes, walk).join('');
        const block = (value) => value.trim() ? `\n\n${value.trim()}\n\n` : '';

        function walk(node) {
            if (node.nodeType === Node.TEXT_NODE) return node.data.replace(/\s+/g, ' ');
            if (node.nodeType !== Node.ELEMENT_NODE) return '';
            const tag = node.tagName.toLowerCase();
            if (tag === 'br') return '\n';
            if (tag === 'hr') return '\n\n---\n\n';
            if (tag === 'pre') {
                const language = node.querySelector('code')?.className.match(/(?:^|\s)language-([\w-]+)/)?.[1] || '';
                const source = node.textContent.replace(/^\n+|\n+$/g, '');
                const index = codeBlocks.push(`\`\`\`${language}\n${source}\n\`\`\``) - 1;
                return `\n\nMARKWEB_CODE_BLOCK_${index}_END\n\n`;
            }
            if (tag === 'mark' && node.classList.contains(MARK_CLASS)) {
                const noteId = node.dataset.markwebId;
                const entry = exportedNotes.get(noteId);
                const text = escapeHTML(node.textContent.replace(/\s+/g, ' '));
                if (!entry || !text) return text;
                const color = noteHighlightColor(entry.note);
                const textColor = contrastTextColor(color);
                const anchor = anchoredNoteIds.has(noteId) ? '' : ` id="${exportNoteAnchorId(entry.index)}"`;
                anchoredNoteIds.add(noteId);
                return `<mark${anchor} style="background-color:${color};color:${textColor};padding-left:0.25rem;padding-right:0.25rem;border-radius:0.2rem;border:1px solid #ede;">${text}</mark>`;
            }

            const inner = childMarkdown(node);
            if (/^h[1-6]$/.test(tag)) return block(`${'#'.repeat(Number(tag[1]))} ${inner.trim()}`);
            if (tag === 'p') return block(inner);
            if (tag === 'blockquote') {
                const quoted = inner.trim().split('\n').map((line) => `> ${line}`).join('\n');
                return block(quoted);
            }
            if (tag === 'ul' || tag === 'ol') {
                const items = Array.from(node.children).filter((item) => item.tagName.toLowerCase() === 'li');
                const list = items.map((item, index) => {
                    const marker = tag === 'ol' ? `${index + 1}.` : '-';
                    const value = childMarkdown(item).trim().replace(/\n{2,}/g, '\n').replace(/\n/g, '\n  ');
                    return `${marker} ${value}`;
                }).join('\n');
                return block(list);
            }
            if (tag === 'strong' || tag === 'b') return inner.trim() ? `**${inner.trim()}**` : '';
            if (tag === 'em' || tag === 'i') return inner.trim() ? `*${inner.trim()}*` : '';
            if (tag === 'del' || tag === 's') return inner.trim() ? `~~${inner.trim()}~~` : '';
            if (tag === 'code') return inner.trim() ? `\`${inner.trim().replace(/\`/g, '\\`')}\`` : '';
            if (tag === 'a') {
                const label = inner.trim();
                if (!label) return '';
                try {
                    const url = new URL(node.getAttribute('href'), location.href);
                    if (url.protocol === 'http:' || url.protocol === 'https:') return `[${label}](${url.href})`;
                } catch (_) { /* 无效链接只保留文字。 */ }
                return label;
            }
            if (tag === 'tr') {
                const cells = Array.from(node.children)
                    .filter((cell) => ['td', 'th'].includes(cell.tagName.toLowerCase()))
                    .map((cell) => childMarkdown(cell).trim());
                return cells.length ? `${cells.join(' | ')}\n` : inner;
            }
            if (['div', 'section', 'article', 'main', 'header', 'footer', 'figure', 'figcaption', 'details', 'summary', 'dl', 'dt', 'dd', 'table'].includes(tag)) return block(inner);
            return inner;
        }

        let markdown = walk(root)
            .replace(/\u00a0/g, ' ')
            .replace(/[ \t]+\n/g, '\n')
            .replace(/\n{3,}/g, '\n\n')
            .trim();
        markdown = markdown.replace(/MARKWEB_CODE_BLOCK_(\d+)_END/g, (_, index) => codeBlocks[Number(index)] || '');
        return markdown.trim();
    }

    function downloadMarkdown(lines, filename) {
        const blob = new Blob([lines.join('\n')], { type: 'text/markdown;charset=utf-8' });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = filename;
        link.click();
        window.setTimeout(() => URL.revokeObjectURL(link.href), 1000);
    }

    function safeFilename(name) {
        return name.replace(/[\\/:*?"<>|]/g, '-').replace(/\s+/g, ' ').trim().slice(0, 80) || 'MarkWeb-网页笔记';
    }

    function toast(message) {
        deletedSnapshot = null;
        ui.toast.textContent = message;
        ui.toast.classList.remove('with-action');
        ui.toast.classList.add('show');
        window.clearTimeout(toast.timer);
        toast.timer = window.setTimeout(() => ui.toast.classList.remove('show'), 1800);
    }

    function showUndoToast(message) {
        ui.toast.innerHTML = `<span>${escapeHTML(message)}</span><button class="toast-action" type="button" data-action="undo-delete">撤销</button>`;
        ui.toast.classList.add('show', 'with-action');
        window.clearTimeout(toast.timer);
        toast.timer = window.setTimeout(() => {
            deletedSnapshot = null;
            ui.toast.classList.remove('show', 'with-action');
        }, 5000);
    }

    function checkRoute() {
        const nextKey = getPageKey();
        if (nextKey === activePageKey) return;
        window.clearTimeout(saveTimer);
        window.clearTimeout(highlightRestoreTimer);
        unwrapMarks();
        activePageKey = nextKey;
        pageState = emptyState();
        pendingSelection = null;
        activeNoteId = null;
        deletedSnapshot = null;
        searchText = '';
        hidePalette(); closePanel();
        void loadPage();
    }
})();