@a3s-lab/office 0.1.0 → 0.2.2

package/dist/0~document-editor.js

@@ -2,11 +2,11 @@ import { __webpack_require__ } from "./0~rslib-runtime.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import extension_placeholder from "@tiptap/extension-placeholder";
 import { EditorContent, useEditor } from "@tiptap/react";
-import { Fragment as external_react_Fragment, forwardRef, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { Fragment as external_react_Fragment, forwardRef, useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 import { Extension } from "@tiptap/core";
 import { NodeSelection, Plugin, PluginKey, TextSelection } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
-import { AArrowDown, AArrowUp, AlignCenter, AlignJustify, AlignLeft, AlignRight, AlignVerticalJustifyCenter, AlignVerticalJustifyEnd, AlignVerticalJustifyStart, ArrowDown, ArrowUp, BetweenHorizontalEnd, BetweenHorizontalStart, BetweenVerticalEnd, BetweenVerticalStart, Bold, BookMarked, BookOpen, Check, CheckCheck, CheckCircle2, ChevronDown, ChevronRight, Cloud, Columns3, Eraser, FileDiff, FilePlus2, FileText, Globe2, Grid2X2, Hash, Highlighter, Image, IndentDecrease, IndentIncrease, Italic, Link2, List, ListChecks, ListOrdered, MessageSquarePlus, MessageSquareReply, MessagesSquare, MoveVertical, Palette, PanelBottom, PanelBottomOpen, PanelLeftOpen, PanelTop, PanelTopOpen, Pilcrow, PilcrowLeft, PilcrowRight, Plus, Quote, Redo2, RefreshCw, Replace, ReplaceAll, RotateCcw, Rows3, Ruler, ScanText, Search, Settings2, Strikethrough, Subscript, Superscript, Table2, TableCellsMerge, TableCellsSplit, TextWrap, Trash2, Underline, Undo2, Unlink, X, XCircle, ZoomIn, ZoomOut } from "lucide-react";
+import { AArrowDown, AArrowUp, AlignCenter, AlignJustify, AlignLeft, AlignRight, AlignVerticalJustifyCenter, AlignVerticalJustifyEnd, AlignVerticalJustifyStart, ArrowDown, ArrowUp, BetweenHorizontalEnd, BetweenHorizontalStart, BetweenVerticalEnd, BetweenVerticalStart, Bold, BookMarked, BookOpen, Check, CheckCheck, CheckCircle2, ChevronDown, ChevronRight, Cloud, Columns3, Eraser, FileDiff, FilePlus2, FileText, Globe2, Grid2X2, Hash, Highlighter, Image, IndentDecrease, IndentIncrease, Italic, Link2, List, ListChecks, ListOrdered, MessageSquarePlus, MessageSquareReply, MessagesSquare, MoveVertical, Palette, PanelBottom, PanelBottomOpen, PanelLeftOpen, PanelTop, PanelTopOpen, Pilcrow, PilcrowLeft, PilcrowRight, Plus, Quote, Redo2, RefreshCw, Replace, ReplaceAll, RotateCcw, Rows3, Ruler, Search, Settings2, Strikethrough, Subscript, Superscript, Table2, TableCellsMerge, TableCellsSplit, TableProperties, TextWrap, Trash2, Underline, Undo2, Unlink, X, XCircle, ZoomIn, ZoomOut } from "lucide-react";
 import extension_color from "@tiptap/extension-color";
 import extension_image from "@tiptap/extension-image";
 import { TableKit } from "@tiptap/extension-table";
@@ -16,18 +16,18 @@ import extension_underline from "@tiptap/extension-underline";
 import starter_kit from "@tiptap/starter-kit";
 import { BubbleMenu } from "@tiptap/react/menus";
 import { TableMap, isInTable, selectedRect } from "@tiptap/pm/tables";
-import { nextDocumentTabAlignment, normalizedTabPosition, documentParagraphTabStops, documentImageLayoutOptions, documentImageAlternativeText, normalizeDocumentTabStops } from "./0~8155.js";
-import { documentTableSizing, documentTableRowRepeats, documentTableRowOptions, documentTableCellFormat, activeDocumentTableStyle, DEFAULT_DOCUMENT_TABLE_CELL_FORMAT, documentTableRowCantSplit, documentTableHorizontalAlignment, DOCUMENT_TABLE_STYLE_OPTIONS, canSetDocumentTableRowRepeatHeader } from "./0~6552.js";
-import { normalizeDocumentHtml, documentInitialSectionLayout, isValidDocumentCitationTag, sanitizeDocumentPageChromeHtml, resolveWorkDocumentEditorInput, createDocumentBibliography, syncDocumentContentFromHtml, clampDocumentMargin, documentMargins, millimetersToPixels as work_document_layout_millimetersToPixels, documentCitationStyleDetails, updateDocumentPageChromeVariant, normalizeDocumentColumns, documentPageChromeLegacyFields, resolveDocumentPageChrome, setCustomDocumentColumns, documentCitationStyle, normalizeDocumentPageChrome, createWorkDocumentModel, documentSectionLayoutFromNodeAttributes, updateDocumentColumnWidth } from "./4704.js";
+import { nextDocumentTabAlignment, normalizedTabPosition, documentParagraphTabStops, DEFAULT_DOCUMENT_TABLE_CELL_MARGINS, documentImageLayoutOptions, documentImageProperties, normalizeDocumentTabStops } from "./0~4750.js";
+import { documentTableRowRepeats, documentTableRowOptions, documentTableCellFormat, activeDocumentTableStyle, DEFAULT_DOCUMENT_TABLE_CELL_FORMAT, documentTableRowCantSplit, documentTableHorizontalAlignment, DOCUMENT_TABLE_STYLE_OPTIONS, canSetDocumentTableRowRepeatHeader } from "./0~2582.js";
+import { normalizeDocumentHtml, documentInitialSectionLayout, isValidDocumentCitationTag, sanitizeDocumentPageChromeHtml, mountWorkLiveDocumentCapture, resolveWorkDocumentEditorInput, createDocumentBibliography, syncDocumentContentFromHtml, clampDocumentMargin, documentMargins, millimetersToPixels as work_document_layout_millimetersToPixels, documentCitationStyleDetails, updateDocumentPageChromeVariant, normalizeDocumentColumns, documentPageChromeLegacyFields, resolveDocumentPageChrome, setCustomDocumentColumns, documentCitationStyle, normalizeDocumentPageChrome, createWorkDocumentModel, documentSectionLayoutFromNodeAttributes, updateDocumentColumnWidth } from "./2881.js";
 import { useOfficeTaskPaneEscape, normalizeOfficeFontFamily, OfficeCheckbox, useOfficeDialog, useOfficeTaskPaneModal, CommittedOfficeNumberField, officeFontFamilyLabel, officeFontFamilies, CollectionState, createOfficeKernelClient, OfficeNumberField } from "./0~7048.js";
 import { office_text_field_OfficeTextArea, Popover, officeOverlayPortalRoot, button_Button, icon_button_IconButton, office_text_field_OfficeTextField, useDialogFocusScope, useOfficeEditorWheelZoom, office_text_field_OfficeFileInput } from "./0~9512.js";
 import { WorkOfficePreviewBar, isWorkspaceContextMenuKeyboardEvent, Tabs, WorkOfficeZoomControls, WorkOfficeStatusBar, Dialog, WorkOfficeRibbon, workspaceContextMenuPosition, OfficeSelect, WorkspaceContextMenu, WorkOfficeRibbonGroup, WorkOfficeRibbonButton } from "./0~4595.js";
 import { createOfficeId as createWorkId } from "./1134.js";
-import { canInsertDocumentComment, activeDocumentSection, documentCommentViews, retainAnchoredDocumentComments, DocumentSubscript, documentCitationCount, documentBulletListStyle, editorDocumentCaptionTargets, collectDocumentChanges, collectDocumentCommentAnchors, documentTabLeaderLabel, documentOrderedListState, MAX_DOCUMENT_NUMBERING_START, documentCommentDraftRange, DocumentSuperscript, documentSectionById, createWorkDocumentExtensions } from "./0~work-document-extensions.js";
+import { canInsertDocumentComment, documentTableSizing, activeDocumentSection, documentCommentViews, retainAnchoredDocumentComments, DocumentSubscript, documentCitationCount, documentBulletListStyle, editorDocumentCaptionTargets, collectDocumentChanges, collectDocumentCommentAnchors, documentTabLeaderLabel, documentOrderedListState, MAX_DOCUMENT_NUMBERING_START, documentCommentDraftRange, DocumentSuperscript, documentSectionById, createWorkDocumentExtensions } from "./0~work-document-extensions.js";
 import { normalizeDocumentHref, DOCUMENT_LINK_VALIDATION_MESSAGE } from "./0~work-document-links.js";
 import { OfficeColorPicker, isOfficeShortcutBlocked } from "./0~3635.js";
 import { OfficeTableInsertPopover, readOfficeFileAsDataUrl } from "./0~9445.js";
-import { documentParagraphSpacing, normalizeDocumentParagraphIndent, documentParagraphDirection, documentParagraphPagination, documentParagraphIndent, canChangeDocumentIndent } from "./0~work-document-paragraph-formatting.js";
+import { documentParagraphSpacing, normalizeDocumentParagraphIndent, documentParagraphDirection, documentParagraphPagination, documentParagraphIndent, canChangeDocumentIndent } from "./0~5861.js";
 import { createWorkDocumentSelectionAction, documentPlainTextAsHtml, mergeOfficeTiptapExtensions, documentCurrentPage, documentAgentMenuItems, clampDocumentZoom, documentPageCount, documentWordCount, documentCustomSelectionMenuItems, createWorkDocumentSelectionSnapshot } from "./0~5050.js";
 import { OFFICE_DOCUMENT_LAYOUT_HEBREW_FONT_ID, WorkEditorLoadingState, OFFICE_DOCUMENT_LAYOUT_FONT_ID, OFFICE_DOCUMENT_LAYOUT_ARABIC_FONT_ID, documentLayoutFontKey, OFFICE_DOCUMENT_LAYOUT_LATIN_FONT_ID } from "./432.js";
 import { useOfficeDraft } from "./0~use-office-draft.js";
@@ -934,7 +934,7 @@ function createDocumentTableRowFragmentPlan(cells, rowHeight, maximumFragmentedR
                     ] : [])
             }
         ];
-    if (!cells.length || !Number.isFinite(maximumFragmentedRowHeight) || height > maximumFragmentedRowHeight) return atomic();
+    if (!cells.length || !Number.isFinite(maximumFragmentedRowHeight) || maximumFragmentedRowHeight <= 0) return atomic();
     const candidates = normalizedDocumentTableBreakCoordinates(cells.flatMap((cell)=>cell.boundaries.slice(1, -1).map((boundary)=>boundary.y).filter((y)=>y > 0.5 && y < height - 0.5))).slice(0, MAX_DOCUMENT_TABLE_ROW_FRAGMENTS - 1);
     if (!candidates.length) return atomic();
     const coordinates = [
@@ -1530,6 +1530,266 @@ function reusableDocumentListLayoutBlocks(previous, listId, nodeTo, dirtyFrom) {
             }
         }));
 }
+const DOCUMENT_NAVIGATION_COLLECTION_WINDOW_THRESHOLD = 48;
+const DOCUMENT_NAVIGATION_COLLECTION_WINDOW_LIMIT = 32;
+const DOCUMENT_NAVIGATION_COLLECTION_WINDOW_OVERSCAN = 4;
+const DOCUMENT_NAVIGATION_FALLBACK_VIEWPORT_HEIGHT = 720;
+function useDocumentNavigationWindow({ estimatedItemHeight, itemGap, keys, listPaddingTop, onRovingKeyChange, pinnedKeys = [], rovingKey }) {
+    const viewportRef = useRef(null);
+    const itemRefs = useRef(new Map());
+    const keysRef = useRef(keys);
+    const pendingFocusKeyRef = useRef(null);
+    const rovingIndex = rovingKey ? keys.indexOf(rovingKey) : -1;
+    const [anchorIndex, setAnchorIndex] = useState(Math.max(0, rovingIndex));
+    const [viewportHeight, setViewportHeight] = useState(DOCUMENT_NAVIGATION_FALLBACK_VIEWPORT_HEIGHT);
+    keysRef.current = keys;
+    useEffect(()=>{
+        if (rovingIndex < 0) return;
+        setAnchorIndex(rovingIndex);
+    }, [
+        rovingIndex,
+        rovingKey
+    ]);
+    useLayoutEffect(()=>{
+        const viewport = viewportRef.current;
+        if (!viewport) return;
+        const update = ()=>{
+            const nextHeight = viewport.clientHeight || DOCUMENT_NAVIGATION_FALLBACK_VIEWPORT_HEIGHT;
+            setViewportHeight((current)=>current === nextHeight ? current : nextHeight);
+        };
+        update();
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(update);
+        observer.observe(viewport);
+        return ()=>observer.disconnect();
+    }, [
+        keys.length
+    ]);
+    const itemHeights = useMemo(()=>Array.from({
+            length: keys.length
+        }, ()=>Math.max(1, estimatedItemHeight)), [
+        estimatedItemHeight,
+        keys.length
+    ]);
+    const itemStarts = useMemo(()=>documentNavigationItemStarts(itemHeights, itemGap), [
+        itemGap,
+        itemHeights
+    ]);
+    const averageItemHeight = itemHeights.length ? (itemStarts[itemStarts.length - 1] ?? 1) / itemHeights.length : 1;
+    const range = useMemo(()=>calculateDocumentNavigationWindowRange({
+            anchorIndex,
+            averageItemHeight,
+            itemCount: keys.length,
+            limit: DOCUMENT_NAVIGATION_COLLECTION_WINDOW_LIMIT,
+            overscan: DOCUMENT_NAVIGATION_COLLECTION_WINDOW_OVERSCAN,
+            threshold: DOCUMENT_NAVIGATION_COLLECTION_WINDOW_THRESHOLD,
+            viewportHeight
+        }), [
+        anchorIndex,
+        averageItemHeight,
+        keys.length,
+        viewportHeight
+    ]);
+    const pinnedIndices = useMemo(()=>{
+        const indices = new Set();
+        if (rovingIndex >= 0) indices.add(rovingIndex);
+        for (const key of pinnedKeys){
+            if (!key) continue;
+            const index = keys.indexOf(key);
+            if (index >= 0) indices.add(index);
+        }
+        return [
+            ...indices
+        ];
+    }, [
+        keys,
+        pinnedKeys,
+        rovingIndex
+    ]);
+    const mountedIndices = useMemo(()=>documentNavigationWindowIndices({
+            itemCount: keys.length,
+            pinnedIndices,
+            range
+        }), [
+        keys.length,
+        pinnedIndices,
+        range
+    ]);
+    const entries = useMemo(()=>documentNavigationWindowEntries(mountedIndices, itemStarts, keys.length, itemGap), [
+        itemGap,
+        itemStarts,
+        keys.length,
+        mountedIndices
+    ]);
+    const mountedIndicesKey = mountedIndices.join(',');
+    const registerItem = useCallback((key, element)=>{
+        if (element) itemRefs.current.set(key, element);
+        else itemRefs.current.delete(key);
+    }, []);
+    const focusAt = useCallback((requestedIndex)=>{
+        const currentKeys = keysRef.current;
+        if (!currentKeys.length) return;
+        const index = Math.min(currentKeys.length - 1, Math.max(0, Math.floor(requestedIndex)));
+        const key = currentKeys[index];
+        if (!key) return;
+        setAnchorIndex(index);
+        onRovingKeyChange(key);
+        const mounted = itemRefs.current.get(key);
+        if (mounted) {
+            pendingFocusKeyRef.current = null;
+            focusDocumentNavigationItem(mounted);
+            return;
+        }
+        pendingFocusKeyRef.current = key;
+    }, [
+        onRovingKeyChange
+    ]);
+    const onItemFocus = useCallback((index)=>{
+        const key = keysRef.current[index];
+        if (!key) return;
+        pendingFocusKeyRef.current = null;
+        setAnchorIndex(index);
+        onRovingKeyChange(key);
+    }, [
+        onRovingKeyChange
+    ]);
+    useLayoutEffect(()=>{
+        const pendingKey = pendingFocusKeyRef.current;
+        if (!pendingKey) return;
+        if (!keys.includes(pendingKey)) {
+            pendingFocusKeyRef.current = null;
+            return;
+        }
+        const element = itemRefs.current.get(pendingKey);
+        if (!element) return;
+        pendingFocusKeyRef.current = null;
+        focusDocumentNavigationItem(element);
+    }, [
+        keys,
+        mountedIndicesKey,
+        rovingKey
+    ]);
+    const onScroll = useCallback((event)=>{
+        if (!range.windowed) return;
+        const nextAnchor = documentNavigationIndexAtOffset(itemStarts, Math.max(0, event.currentTarget.scrollTop - listPaddingTop), keys.length);
+        setAnchorIndex((current)=>current === nextAnchor ? current : nextAnchor);
+    }, [
+        itemStarts,
+        keys.length,
+        listPaddingTop,
+        range.windowed
+    ]);
+    return {
+        entries,
+        focusAt,
+        mountedCount: mountedIndices.length,
+        onItemFocus,
+        onScroll,
+        range,
+        registerItem,
+        rovingIndex,
+        viewportRef
+    };
+}
+function DocumentNavigationWindowSpacer({ entry }) {
+    return /*#__PURE__*/ jsx("li", {
+        "aria-hidden": "true",
+        className: "work-document-navigation-window-spacer",
+        "data-document-navigation-spacer": entry.position,
+        "data-document-navigation-spacer-end": entry.end,
+        "data-document-navigation-spacer-start": entry.start + 1,
+        role: "presentation",
+        style: {
+            height: `${entry.height}px`
+        }
+    });
+}
+function calculateDocumentNavigationWindowRange({ anchorIndex, averageItemHeight, itemCount, limit, overscan, threshold, viewportHeight }) {
+    const count = Math.max(0, Math.floor(itemCount));
+    if (count <= Math.max(0, Math.floor(threshold))) return {
+        end: count,
+        start: 0,
+        windowed: false
+    };
+    const visibleCount = Math.max(1, Math.ceil(Math.max(1, viewportHeight) / Math.max(1, averageItemHeight)));
+    const boundedOverscan = Math.max(0, Math.floor(overscan));
+    const windowCount = Math.min(count, Math.max(1, Math.floor(limit)), visibleCount + 2 * boundedOverscan);
+    const boundedAnchor = Math.min(count - 1, Math.max(0, Math.floor(anchorIndex)));
+    const start = Math.min(count - windowCount, Math.max(0, boundedAnchor - boundedOverscan));
+    return {
+        end: start + windowCount,
+        start,
+        windowed: true
+    };
+}
+function documentNavigationItemStarts(itemHeights, itemGap) {
+    const starts = [
+        0
+    ];
+    const gap = Math.max(0, itemGap);
+    for (const height of itemHeights)starts.push((starts[starts.length - 1] ?? 0) + Math.max(1, height) + gap);
+    return starts;
+}
+function documentNavigationWindowIndices({ itemCount, pinnedIndices, range }) {
+    const count = Math.max(0, Math.floor(itemCount));
+    if (!range.windowed) return Array.from({
+        length: count
+    }, (_, index)=>index);
+    const mounted = new Set();
+    for(let index = range.start; index < range.end; index += 1)if (index >= 0 && index < count) mounted.add(index);
+    for (const index of pinnedIndices)if (index >= 0 && index < count) mounted.add(index);
+    return [
+        ...mounted
+    ].sort((left, right)=>left - right);
+}
+function documentNavigationWindowEntries(mountedIndices, itemStarts, itemCount, itemGap) {
+    const entries = [];
+    let cursor = 0;
+    for (const index of mountedIndices){
+        if (index > cursor) entries.push(documentNavigationWindowSpacerEntry(cursor, index, itemStarts, itemCount, itemGap));
+        entries.push({
+            index,
+            kind: 'item'
+        });
+        cursor = index + 1;
+    }
+    if (cursor < itemCount) entries.push(documentNavigationWindowSpacerEntry(cursor, itemCount, itemStarts, itemCount, itemGap));
+    return entries;
+}
+function documentNavigationIndexAtOffset(itemStarts, offset, itemCount) {
+    if (itemCount <= 1) return 0;
+    let low = 0;
+    let high = itemCount - 1;
+    while(low <= high){
+        const middle = Math.floor((low + high) / 2);
+        const start = itemStarts[middle] ?? 0;
+        const next = itemStarts[middle + 1] ?? 1 / 0;
+        if (offset < start) high = middle - 1;
+        else {
+            if (!(offset >= next)) return middle;
+            low = middle + 1;
+        }
+    }
+    return Math.min(itemCount - 1, Math.max(0, low));
+}
+function documentNavigationWindowSpacerEntry(start, end, itemStarts, itemCount, itemGap) {
+    return {
+        end,
+        height: Math.max(0, (itemStarts[end] ?? 0) - (itemStarts[start] ?? 0) - Math.max(0, itemGap)),
+        kind: 'spacer',
+        position: 0 === start ? 'before' : end === itemCount ? 'after' : 'between',
+        start
+    };
+}
+function focusDocumentNavigationItem(element) {
+    element.focus({
+        preventScroll: true
+    });
+    element.scrollIntoView?.({
+        block: 'nearest',
+        inline: 'nearest'
+    });
+}
 function DocumentTaskPane({ ariaLabel, title, description, closeLabel, className, children, onClose, onKeyDown }) {
     const titleId = useId();
     const descriptionId = useId();
@@ -1582,37 +1842,69 @@ function DocumentTaskPane({ ariaLabel, title, description, closeLabel, className
         ]
     });
 }
+const DOCUMENT_CHANGE_ITEM_HEIGHT = 84;
+const DOCUMENT_CHANGE_ITEM_GAP = 7;
+const DOCUMENT_CHANGE_LIST_PADDING_TOP = 10;
 function DocumentChangesPanel({ editor, changes, trackChanges, onTrackChangesChange, onClose }) {
     const officeDialog = useOfficeDialog();
     const decisionButtonRefs = useRef(new Map());
     const pendingFocusRef = useRef(null);
+    const changeKeys = useMemo(()=>changes.map(documentChangeWindowKey), [
+        changes
+    ]);
+    const [rovingChangeKey, setRovingChangeKey] = useState(()=>changeKeys[0] ?? null);
+    const effectiveRovingChangeKey = rovingChangeKey && changeKeys.includes(rovingChangeKey) ? rovingChangeKey : changeKeys[0] ?? null;
+    const changeWindow = useDocumentNavigationWindow({
+        estimatedItemHeight: DOCUMENT_CHANGE_ITEM_HEIGHT,
+        itemGap: DOCUMENT_CHANGE_ITEM_GAP,
+        keys: changeKeys,
+        listPaddingTop: DOCUMENT_CHANGE_LIST_PADDING_TOP,
+        onRovingKeyChange: setRovingChangeKey,
+        rovingKey: effectiveRovingChangeKey
+    });
     useLayoutEffect(()=>{
         const pending = pendingFocusRef.current;
         if (!pending) return;
-        pendingFocusRef.current = null;
-        const nextButton = pending.changeId ? decisionButtonRefs.current.get(documentChangeDecisionKey(pending.changeId, pending.decision)) : void 0;
+        const nextButton = pending.changeKey ? decisionButtonRefs.current.get(documentChangeDecisionKey(pending.changeKey, pending.decision)) : void 0;
         if (nextButton) {
+            pendingFocusRef.current = null;
             nextButton.focus({
                 preventScroll: true
             });
             nextButton.scrollIntoView({
                 block: 'nearest'
             });
-        } else if (!editor.isDestroyed) editor.view.dom.focus({
-            preventScroll: true
-        });
+        } else if (!pending.changeKey && !editor.isDestroyed) {
+            pendingFocusRef.current = null;
+            editor.view.dom.focus({
+                preventScroll: true
+            });
+        }
     }, [
+        changeWindow.mountedCount,
         changes,
         editor
     ]);
     const decideChange = (change, index, decision)=>{
         const nextChange = changes[index + 1] ?? changes[index - 1] ?? null;
+        const currentChangeKey = documentChangeWindowKey(change);
+        const nextChangeKey = nextChange ? documentChangeWindowKey(nextChange) : null;
         pendingFocusRef.current = {
-            changeId: nextChange?.id ?? null,
+            changeKey: nextChangeKey,
             decision
         };
+        setRovingChangeKey(nextChangeKey);
         const handled = 'accept' === decision ? editor.commands.acceptDocumentChange(change.id) : editor.commands.rejectDocumentChange(change.id);
-        if (!handled) pendingFocusRef.current = null;
+        if (!handled) {
+            pendingFocusRef.current = null;
+            setRovingChangeKey(currentChangeKey);
+        }
+    };
+    const handleSummaryKeyDown = (event, index)=>{
+        const nextIndex = documentChangeKeyboardDestination(event.key, index, changes.length);
+        if (null === nextIndex) return;
+        event.preventDefault();
+        changeWindow.focusAt(nextIndex);
     };
     const acceptAll = async ()=>{
         const confirmed = await officeDialog.confirm({
@@ -1675,87 +1967,111 @@ function DocumentChangesPanel({ editor, changes, trackChanges, onTrackChangesCha
                             })
                         ]
                     }),
-                    /*#__PURE__*/ jsxs("div", {
+                    changes.length > 0 ? /*#__PURE__*/ jsx("ol", {
+                        ref: changeWindow.viewportRef,
                         className: "work-document-change-list work-document-task-pane-body",
-                        children: [
-                            changes.map((change, index)=>/*#__PURE__*/ jsxs("article", {
-                                    className: change.kind,
-                                    children: [
-                                        /*#__PURE__*/ jsxs("button", {
-                                            type: "button",
-                                            className: "work-document-change-summary",
-                                            "aria-label": `定位修订 ${index + 1}`,
-                                            onClick: ()=>editor.chain().focus().setTextSelection({
-                                                    from: Math.min(change.from, editor.state.doc.content.size),
-                                                    to: Math.min(change.to, editor.state.doc.content.size)
-                                                }).run(),
-                                            children: [
-                                                /*#__PURE__*/ jsx("span", {
-                                                    children: 'insertion' === change.kind ? '插入' : '删除'
-                                                }),
-                                                /*#__PURE__*/ jsx("strong", {
-                                                    children: change.text.trim() || '（空白字符）'
-                                                }),
-                                                /*#__PURE__*/ jsxs("small", {
-                                                    children: [
-                                                        change.author,
-                                                        change.date ? ` · ${formatChangeDate(change.date)}` : ''
-                                                    ]
-                                                })
-                                            ]
-                                        }),
-                                        /*#__PURE__*/ jsxs("div", {
-                                            children: [
-                                                /*#__PURE__*/ jsxs(button_Button, {
-                                                    ref: (element)=>{
-                                                        const key = documentChangeDecisionKey(change.id, 'accept');
-                                                        if (element) decisionButtonRefs.current.set(key, element);
-                                                        else decisionButtonRefs.current.delete(key);
-                                                    },
-                                                    tone: "quiet",
-                                                    "aria-label": `接受修订 ${index + 1}`,
-                                                    onClick: ()=>decideChange(change, index, 'accept'),
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(Check, {
-                                                            size: 13
-                                                        }),
-                                                        "接受"
-                                                    ]
-                                                }),
-                                                /*#__PURE__*/ jsxs(button_Button, {
-                                                    ref: (element)=>{
-                                                        const key = documentChangeDecisionKey(change.id, 'reject');
-                                                        if (element) decisionButtonRefs.current.set(key, element);
-                                                        else decisionButtonRefs.current.delete(key);
-                                                    },
-                                                    tone: "quiet",
-                                                    "aria-label": `拒绝修订 ${index + 1}`,
-                                                    onClick: ()=>decideChange(change, index, 'reject'),
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(XCircle, {
-                                                            size: 13
-                                                        }),
-                                                        "拒绝"
-                                                    ]
-                                                })
-                                            ]
-                                        })
-                                    ]
-                                }, `${change.kind}-${change.id}`)),
-                            !changes.length && /*#__PURE__*/ jsx(CollectionState, {
-                                className: "work-document-changes-empty",
-                                icon: /*#__PURE__*/ jsx(FileDiff, {}),
-                                actions: /*#__PURE__*/ jsx(button_Button, {
-                                    size: "compact",
-                                    tone: trackChanges ? 'quiet' : 'primary',
-                                    onClick: ()=>onTrackChangesChange(!trackChanges),
-                                    children: trackChanges ? '停止记录' : '开启修订'
-                                }),
-                                tone: trackChanges ? 'info' : 'neutral',
-                                role: "status",
-                                children: trackChanges ? '正在记录新的改动。' : '当前没有记录新的改动。'
-                            })
-                        ]
+                        "aria-label": "待处理修订",
+                        "data-document-change-count": changes.length,
+                        "data-document-change-mounted-count": changeWindow.mountedCount,
+                        "data-document-change-window-end": changeWindow.range.end,
+                        "data-document-change-window-limit": 32,
+                        "data-document-change-window-start": changeWindow.range.start,
+                        "data-document-change-windowed": changeWindow.range.windowed ? 'true' : 'false',
+                        onScroll: changeWindow.onScroll,
+                        children: changeWindow.entries.map((entry)=>{
+                            if ('spacer' === entry.kind) return /*#__PURE__*/ jsx(DocumentChangeWindowSpacer, {
+                                entry: entry
+                            }, `spacer-${entry.start}-${entry.end}`);
+                            const change = changes[entry.index];
+                            if (!change) return null;
+                            const changeKey = documentChangeWindowKey(change);
+                            return /*#__PURE__*/ jsxs("li", {
+                                "aria-posinset": entry.index + 1,
+                                "aria-setsize": changes.length,
+                                className: `work-document-change-item ${change.kind}`,
+                                "data-document-change-item": entry.index + 1,
+                                onFocusCapture: ()=>changeWindow.onItemFocus(entry.index),
+                                children: [
+                                    /*#__PURE__*/ jsxs("button", {
+                                        ref: (element)=>changeWindow.registerItem(changeKey, element),
+                                        type: "button",
+                                        className: "work-document-change-summary",
+                                        tabIndex: changeWindow.rovingIndex === entry.index ? 0 : -1,
+                                        "aria-label": `定位修订 ${entry.index + 1}`,
+                                        onKeyDown: (event)=>handleSummaryKeyDown(event, entry.index),
+                                        onClick: ()=>editor.chain().focus().setTextSelection({
+                                                from: Math.min(change.from, editor.state.doc.content.size),
+                                                to: Math.min(change.to, editor.state.doc.content.size)
+                                            }).run(),
+                                        children: [
+                                            /*#__PURE__*/ jsx("span", {
+                                                children: 'insertion' === change.kind ? '插入' : '删除'
+                                            }),
+                                            /*#__PURE__*/ jsx("strong", {
+                                                children: change.text.trim() || '（空白字符）'
+                                            }),
+                                            /*#__PURE__*/ jsxs("small", {
+                                                children: [
+                                                    change.author,
+                                                    change.date ? ` · ${formatChangeDate(change.date)}` : ''
+                                                ]
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ jsxs("div", {
+                                        children: [
+                                            /*#__PURE__*/ jsxs(button_Button, {
+                                                ref: (element)=>{
+                                                    const key = documentChangeDecisionKey(changeKey, 'accept');
+                                                    if (element) decisionButtonRefs.current.set(key, element);
+                                                    else decisionButtonRefs.current.delete(key);
+                                                },
+                                                tone: "quiet",
+                                                "aria-label": `接受修订 ${entry.index + 1}`,
+                                                onClick: ()=>decideChange(change, entry.index, 'accept'),
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Check, {
+                                                        size: 13
+                                                    }),
+                                                    "接受"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ jsxs(button_Button, {
+                                                ref: (element)=>{
+                                                    const key = documentChangeDecisionKey(changeKey, 'reject');
+                                                    if (element) decisionButtonRefs.current.set(key, element);
+                                                    else decisionButtonRefs.current.delete(key);
+                                                },
+                                                tone: "quiet",
+                                                "aria-label": `拒绝修订 ${entry.index + 1}`,
+                                                onClick: ()=>decideChange(change, entry.index, 'reject'),
+                                                children: [
+                                                    /*#__PURE__*/ jsx(XCircle, {
+                                                        size: 13
+                                                    }),
+                                                    "拒绝"
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }, changeKey);
+                        })
+                    }) : /*#__PURE__*/ jsx("div", {
+                        className: "work-document-change-list work-document-task-pane-body",
+                        children: /*#__PURE__*/ jsx(CollectionState, {
+                            className: "work-document-changes-empty",
+                            icon: /*#__PURE__*/ jsx(FileDiff, {}),
+                            actions: /*#__PURE__*/ jsx(button_Button, {
+                                size: "compact",
+                                tone: trackChanges ? 'quiet' : 'primary',
+                                onClick: ()=>onTrackChangesChange(!trackChanges),
+                                children: trackChanges ? '停止记录' : '开启修订'
+                            }),
+                            tone: trackChanges ? 'info' : 'neutral',
+                            role: "status",
+                            children: trackChanges ? '正在记录新的改动。' : '当前没有记录新的改动。'
+                        })
                     })
                 ]
             }),
@@ -1763,8 +2079,34 @@ function DocumentChangesPanel({ editor, changes, trackChanges, onTrackChangesCha
         ]
     });
 }
-function documentChangeDecisionKey(changeId, decision) {
-    return `${changeId}:${decision}`;
+function documentChangeDecisionKey(changeKey, decision) {
+    return `${changeKey}:${decision}`;
+}
+function documentChangeWindowKey(change) {
+    return `${change.kind}:${change.id}`;
+}
+function documentChangeKeyboardDestination(key, index, itemCount) {
+    if (!itemCount) return null;
+    if ('ArrowDown' === key) return Math.min(itemCount - 1, index + 1);
+    if ('ArrowUp' === key) return Math.max(0, index - 1);
+    if ('PageDown' === key) return Math.min(itemCount - 1, index + 8);
+    if ('PageUp' === key) return Math.max(0, index - 8);
+    if ('Home' === key) return 0;
+    if ('End' === key) return itemCount - 1;
+    return null;
+}
+function DocumentChangeWindowSpacer({ entry }) {
+    return /*#__PURE__*/ jsx("li", {
+        "aria-hidden": "true",
+        className: "work-document-change-window-spacer",
+        "data-document-change-spacer": entry.position,
+        "data-document-change-spacer-end": entry.end,
+        "data-document-change-spacer-start": entry.start + 1,
+        role: "presentation",
+        style: {
+            height: `${entry.height}px`
+        }
+    });
 }
 function formatChangeDate(value) {
     const time = Date.parse(value);
@@ -2614,6 +2956,191 @@ const document_comment_composer_DocumentCommentComposer = /*#__PURE__*/ forwardR
         ]
     });
 });
+const DOCUMENT_COMMENT_WINDOW_THRESHOLD = 48;
+const DOCUMENT_COMMENT_WINDOW_LIMIT = 32;
+const DOCUMENT_COMMENT_WINDOW_OVERSCAN = 4;
+function useDocumentCommentWindow({ keys, onRovingKeyChange, pinnedKeys = [], rovingKey }) {
+    const itemRefs = useRef(new Map());
+    const keysRef = useRef(keys);
+    const pendingFocusKeyRef = useRef(null);
+    const rovingIndex = rovingKey ? keys.indexOf(rovingKey) : -1;
+    const [anchorIndex, setAnchorIndex] = useState(Math.max(0, rovingIndex));
+    keysRef.current = keys;
+    useEffect(()=>{
+        if (rovingIndex < 0) return;
+        setAnchorIndex(rovingIndex);
+    }, [
+        rovingIndex,
+        rovingKey
+    ]);
+    const range = useMemo(()=>calculateDocumentCommentWindowRange({
+            anchorIndex,
+            itemCount: keys.length
+        }), [
+        anchorIndex,
+        keys.length
+    ]);
+    const pinnedIndices = useMemo(()=>{
+        const indices = new Set();
+        if (rovingIndex >= 0) indices.add(rovingIndex);
+        for (const key of pinnedKeys){
+            if (!key) continue;
+            const index = keys.indexOf(key);
+            if (index >= 0) indices.add(index);
+        }
+        return [
+            ...indices
+        ];
+    }, [
+        keys,
+        pinnedKeys,
+        rovingIndex
+    ]);
+    const mountedIndices = useMemo(()=>documentCommentWindowIndices({
+            itemCount: keys.length,
+            pinnedIndices,
+            range
+        }), [
+        keys.length,
+        pinnedIndices,
+        range
+    ]);
+    const mountedIndicesKey = mountedIndices.join(',');
+    const registerItem = useCallback((key, element)=>{
+        if (element) itemRefs.current.set(key, element);
+        else itemRefs.current.delete(key);
+    }, []);
+    const focusAt = useCallback((requestedIndex)=>{
+        const currentKeys = keysRef.current;
+        if (!currentKeys.length) return;
+        const index = Math.min(currentKeys.length - 1, Math.max(0, Math.floor(requestedIndex)));
+        const key = currentKeys[index];
+        if (!key) return;
+        setAnchorIndex(index);
+        onRovingKeyChange(key);
+        const mounted = itemRefs.current.get(key);
+        if (mounted) {
+            pendingFocusKeyRef.current = null;
+            focusDocumentCommentItem(mounted);
+            return;
+        }
+        pendingFocusKeyRef.current = key;
+    }, [
+        onRovingKeyChange
+    ]);
+    const onItemFocus = useCallback((index)=>{
+        const key = keysRef.current[index];
+        if (!key) return;
+        pendingFocusKeyRef.current = null;
+        setAnchorIndex(index);
+        onRovingKeyChange(key);
+    }, [
+        onRovingKeyChange
+    ]);
+    const onViewportAnchorChange = useCallback((index)=>{
+        setAnchorIndex((current)=>current === index ? current : index);
+    }, []);
+    useLayoutEffect(()=>{
+        const pendingKey = pendingFocusKeyRef.current;
+        if (!pendingKey) return;
+        if (!keys.includes(pendingKey)) {
+            pendingFocusKeyRef.current = null;
+            return;
+        }
+        const element = itemRefs.current.get(pendingKey);
+        if (!element) return;
+        pendingFocusKeyRef.current = null;
+        focusDocumentCommentItem(element);
+    }, [
+        keys,
+        mountedIndicesKey,
+        rovingKey
+    ]);
+    return {
+        focusAt,
+        mountedIndices,
+        onItemFocus,
+        onViewportAnchorChange,
+        range,
+        registerItem,
+        rovingIndex
+    };
+}
+function calculateDocumentCommentWindowRange({ anchorIndex, itemCount, limit = DOCUMENT_COMMENT_WINDOW_LIMIT, overscan = DOCUMENT_COMMENT_WINDOW_OVERSCAN, threshold = DOCUMENT_COMMENT_WINDOW_THRESHOLD }) {
+    const count = Math.max(0, Math.floor(itemCount));
+    if (count <= Math.max(0, Math.floor(threshold))) return {
+        end: count,
+        start: 0,
+        windowed: false
+    };
+    const windowCount = Math.min(count, Math.max(1, Math.floor(limit)));
+    const boundedAnchor = Math.min(count - 1, Math.max(0, Math.floor(anchorIndex)));
+    const start = Math.min(count - windowCount, Math.max(0, boundedAnchor - Math.max(0, Math.floor(overscan))));
+    return {
+        end: start + windowCount,
+        start,
+        windowed: true
+    };
+}
+function documentCommentWindowIndices({ itemCount, pinnedIndices, range }) {
+    const count = Math.max(0, Math.floor(itemCount));
+    if (!range.windowed) return Array.from({
+        length: count
+    }, (_, index)=>index);
+    const mounted = new Set();
+    for(let index = range.start; index < range.end; index += 1)if (index >= 0 && index < count) mounted.add(index);
+    for (const index of pinnedIndices)if (index >= 0 && index < count) mounted.add(index);
+    return [
+        ...mounted
+    ].sort((left, right)=>left - right);
+}
+function documentCommentKeyboardDestination(key, index, itemCount) {
+    if (!itemCount) return null;
+    if ('ArrowDown' === key) return Math.min(itemCount - 1, index + 1);
+    if ('ArrowUp' === key) return Math.max(0, index - 1);
+    if ('PageDown' === key) return Math.min(itemCount - 1, index + 8);
+    if ('PageUp' === key) return Math.max(0, index - 8);
+    if ('Home' === key) return 0;
+    if ('End' === key) return itemCount - 1;
+    return null;
+}
+function focusDocumentCommentItem(element) {
+    element.focus({
+        preventScroll: true
+    });
+    scrollDocumentCommentItemIntoView(element);
+}
+function scrollDocumentCommentItemIntoView(element) {
+    const panel = element.closest('.work-document-comments-panel');
+    const view = element.ownerDocument.defaultView;
+    const panelOverflow = panel ? view?.getComputedStyle(panel).overflowY : void 0;
+    const panelOwnsScroll = Boolean(panel) && /^(auto|scroll)$/.test(panelOverflow ?? '') && (panel?.scrollHeight ?? 0) > (panel?.clientHeight ?? 0) + 1;
+    const scrollContainer = panelOwnsScroll ? panel : panel?.closest('.work-document-scroll');
+    if (!scrollContainer) return void element.scrollIntoView?.({
+        block: 'nearest'
+    });
+    const scrollTarget = element.closest('.work-document-comment-card') ?? element;
+    const elementRect = scrollTarget.getBoundingClientRect();
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const header = panel?.querySelector(':scope > header');
+    const headerHeight = header?.getBoundingClientRect().height ?? 0;
+    const visibleTop = containerRect.top + headerHeight + 8;
+    const visibleBottom = containerRect.bottom - 8;
+    let nextScrollTop = null;
+    if (elementRect.top < visibleTop) nextScrollTop = scrollContainer.scrollTop + elementRect.top - visibleTop;
+    else if (elementRect.bottom > visibleBottom) nextScrollTop = scrollContainer.scrollTop + elementRect.bottom - visibleBottom;
+    if (null === nextScrollTop) return;
+    const top = Math.max(0, nextScrollTop);
+    if ('function' == typeof scrollContainer.scrollTo) return void scrollContainer.scrollTo({
+        behavior: 'instant',
+        top
+    });
+    const previousScrollBehavior = scrollContainer.style.scrollBehavior;
+    scrollContainer.style.scrollBehavior = 'auto';
+    view?.getComputedStyle(scrollContainer).scrollBehavior;
+    scrollContainer.scrollTop = top;
+    scrollContainer.style.scrollBehavior = previousScrollBehavior;
+}
 const emptyLayout = {
     width: 1,
     height: 1,
@@ -2628,8 +3155,15 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
     const panelRef = useRef(null);
     const trackRef = useRef(null);
     const cardRefs = useRef(new Map());
+    const anchorRefs = useRef(new Map());
+    const measuredCardHeightsRef = useRef(new Map());
+    const layoutRef = useRef(emptyLayout);
     const completedDraftIdRef = useRef(null);
+    const pendingFocusRef = useRef(null);
+    const pendingRevealCommentIdRef = useRef(null);
     const frameRef = useRef(0);
+    const pendingFocusFrameRef = useRef(0);
+    const windowFrameRef = useRef(0);
     const officeDialog = useOfficeDialog();
     const modal = useOfficeTaskPaneModal();
     const modalAttributes = modal ? {
@@ -2639,6 +3173,51 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
     const unresolved = comments.filter((comment)=>!comment.resolved).length;
     const repliesDirty = Object.values(drafts).some((value)=>Boolean(value.trim()));
     const commentsDirty = draftDirty || repliesDirty;
+    const commentsById = useMemo(()=>new Map(comments.map((comment)=>[
+                comment.id,
+                comment
+            ])), [
+        comments
+    ]);
+    const commentKeys = useMemo(()=>comments.map((comment)=>comment.id), [
+        comments
+    ]);
+    const commentIndexById = useMemo(()=>new Map(commentKeys.map((id, index)=>[
+                id,
+                index
+            ])), [
+        commentKeys
+    ]);
+    const effectiveActiveCommentId = activeCommentId && commentsById.has(activeCommentId) ? activeCommentId : comments.find((comment)=>!comment.resolved)?.id ?? comments[0]?.id ?? null;
+    const dirtyReplyKeys = useMemo(()=>Object.entries(drafts).filter(([, value])=>Boolean(value.trim())).map(([id])=>id), [
+        drafts
+    ]);
+    const commentWindow = useDocumentCommentWindow({
+        keys: commentKeys,
+        onRovingKeyChange: setActiveCommentId,
+        pinnedKeys: dirtyReplyKeys,
+        rovingKey: effectiveActiveCommentId
+    });
+    const mountedCommentIndicesKey = commentWindow.mountedIndices.join(',');
+    const mountedCommentIds = useMemo(()=>new Set(commentWindow.mountedIndices.flatMap((index)=>{
+            const id = commentKeys[index];
+            return id ? [
+                id
+            ] : [];
+        })), [
+        commentKeys,
+        commentWindow.mountedIndices
+    ]);
+    const layoutItemsById = useMemo(()=>new Map(layout.items.map((item)=>[
+                item.id,
+                item
+            ])), [
+        layout.items
+    ]);
+    const visibleConnectorItems = useMemo(()=>layout.items.filter((item)=>'draft' === item.kind || mountedCommentIds.has(item.id)), [
+        layout.items,
+        mountedCommentIds
+    ]);
     useEffect(()=>{
         onDirtyChange?.(commentsDirty);
     }, [
@@ -2696,6 +3275,10 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
         });
         if (!confirmed) return;
         const nextComment = comments[index + 1] ?? comments[index - 1];
+        pendingFocusRef.current = {
+            commentId: nextComment?.id ?? null
+        };
+        setActiveCommentId(nextComment?.id ?? null);
         setDrafts((current)=>{
             const next = {
                 ...current
@@ -2704,15 +3287,15 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
             return next;
         });
         onDelete(commentId);
-        requestAnimationFrame(()=>{
-            const nextTarget = nextComment ? cardRefs.current.get(nextComment.id)?.querySelector('.work-document-comment-anchor') : panelRef.current?.querySelector('.ds-icon-button.close');
-            if (nextTarget) nextTarget.focus({
-                preventScroll: true
-            });
-            else if (!editor.isDestroyed) editor.view.dom.focus({
-                preventScroll: true
-            });
-        });
+        if (nextComment) selectDocumentComment(editor, nextComment);
+    };
+    const handleCommentAnchorKeyDown = (event, index)=>{
+        const nextIndex = documentCommentKeyboardDestination(event.key, index, comments.length);
+        if (null === nextIndex) return;
+        event.preventDefault();
+        const nextComment = comments[nextIndex];
+        if (nextComment) selectDocumentComment(editor, nextComment);
+        commentWindow.focusAt(nextIndex);
     };
     const measure = useCallback(()=>{
         if (editor.isDestroyed) return;
@@ -2730,34 +3313,30 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
         const trackOffset = trackRect.top - surfaceRect.top;
         const visibleTrackTop = Math.max(8, Math.max(scrollRect?.top ?? trackRect.top, panelHeaderRect?.bottom ?? trackRect.top) - trackRect.top + 8);
         const visibleTrackBottom = Math.min(scrollRect?.bottom ?? trackRect.bottom, panelRect.bottom) - trackRect.top - 8;
-        const commentsById = new Map(comments.map((comment)=>[
-                comment.id,
-                comment
-            ]));
         const marks = [
             ...editor.view.dom.querySelectorAll('[data-document-comment][data-comment-id]')
         ];
+        const anchorRectsById = new Map();
         for (const mark of marks){
             const id = mark.dataset.commentId ?? '';
-            mark.classList.toggle('is-active-comment', id === activeCommentId);
+            mark.classList.toggle('is-active-comment', id === effectiveActiveCommentId);
             mark.classList.toggle('is-resolved-comment', Boolean(commentsById.get(id)?.resolved));
+            const anchorRect = [
+                ...mark.getClientRects()
+            ].at(-1);
+            if (id && anchorRect) anchorRectsById.set(id, {
+                right: anchorRect.right,
+                top: anchorRect.top,
+                height: anchorRect.height
+            });
         }
-        const entries = comments.map((comment)=>{
-            const anchorRect = marks.filter((mark)=>mark.dataset.commentId === comment.id).flatMap((mark)=>[
-                    ...mark.getClientRects()
-                ]).at(-1);
-            return {
+        const entries = comments.map((comment)=>({
                 id: comment.id,
                 kind: 'comment',
                 commentId: comment.id,
                 from: comment.from,
-                anchorRect: anchorRect ? {
-                    right: anchorRect.right,
-                    top: anchorRect.top,
-                    height: anchorRect.height
-                } : void 0
-            };
-        });
+                anchorRect: anchorRectsById.get(comment.id)
+            }));
         if (draft) {
             const range = documentCommentDraftRange(editor) ?? draft;
             entries.push({
@@ -2771,7 +3350,15 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
         let nextCardTop = 8;
         const items = entries.map((entry)=>{
             const { anchorRect } = entry;
-            const cardHeight = cardRefs.current.get(entry.id)?.getBoundingClientRect().height ?? ('draft' === entry.kind ? 164 : 112);
+            const card = cardRefs.current.get(entry.id);
+            const measuredCardHeight = card?.getBoundingClientRect().height ?? 0;
+            let cardHeight = 164;
+            if ('comment' === entry.kind) {
+                const comment = commentsById.get(entry.id);
+                const measurementKey = comment ? commentCardMeasurementKey(comment, comment.id === effectiveActiveCommentId) : entry.id;
+                if (measuredCardHeight > 0) measuredCardHeightsRef.current.set(measurementKey, measuredCardHeight);
+                cardHeight = measuredCardHeightsRef.current.get(measurementKey) ?? (comment ? estimateCommentCardHeight(comment, comment.id === effectiveActiveCommentId) : 112);
+            } else if (measuredCardHeight > 0) cardHeight = measuredCardHeight;
             const preferredTop = anchorRect ? anchorRect.top - trackRect.top - 18 : nextCardTop;
             const minimumTop = Math.max(8, nextCardTop);
             let cardTop = Math.max(minimumTop, preferredTop);
@@ -2801,12 +3388,14 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
             trackHeight: Math.max(1, nextCardTop),
             items
         };
+        layoutRef.current = nextLayout;
         setLayout((current)=>sameCommentTrackLayout(current, nextLayout) ? current : nextLayout);
     }, [
-        activeCommentId,
         comments,
+        commentsById,
         draft,
         editor,
+        effectiveActiveCommentId,
         surfaceRef
     ]);
     const scheduleMeasure = useCallback(()=>{
@@ -2815,9 +3404,47 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
     }, [
         measure
     ]);
+    const updateWindowFromViewport = useCallback(()=>{
+        const surface = surfaceRef.current;
+        const panel = panelRef.current;
+        const track = trackRef.current;
+        if (!surface || !panel || !track) return;
+        const focusedCard = panel.ownerDocument.activeElement?.closest('.work-document-comment-card[data-comment-id]');
+        const focusedCommentId = focusedCard?.dataset.commentId;
+        const focusedIndex = focusedCommentId ? commentIndexById.get(focusedCommentId) : void 0;
+        if (void 0 !== focusedIndex) return void commentWindow.onViewportAnchorChange(focusedIndex);
+        const scroll = surface.closest('.work-document-scroll');
+        const scrollRect = scroll?.getBoundingClientRect();
+        const panelRect = panel.getBoundingClientRect();
+        const trackRect = track.getBoundingClientRect();
+        const panelHeader = panel.firstElementChild;
+        const panelHeaderRect = panelHeader instanceof HTMLElement ? panelHeader.getBoundingClientRect() : void 0;
+        const visibleTop = Math.max(scrollRect?.top ?? trackRect.top, panelRect.top, panelHeaderRect?.bottom ?? panelRect.top) - trackRect.top;
+        const visibleComments = layoutRef.current.items.filter((item)=>'comment' === item.kind);
+        let anchor = visibleComments[0];
+        for (const item of visibleComments){
+            if (item.cardTop > visibleTop + 8) break;
+            anchor = item;
+        }
+        const index = anchor ? commentIndexById.get(anchor.id) : void 0;
+        if (void 0 !== index) commentWindow.onViewportAnchorChange(index);
+    }, [
+        commentIndexById,
+        commentWindow.onViewportAnchorChange,
+        surfaceRef
+    ]);
+    const scheduleWindowUpdate = useCallback(()=>{
+        cancelAnimationFrame(windowFrameRef.current);
+        windowFrameRef.current = requestAnimationFrame(updateWindowFromViewport);
+    }, [
+        updateWindowFromViewport
+    ]);
     useLayoutEffect(()=>{
         measure();
-        return ()=>cancelAnimationFrame(frameRef.current);
+        return ()=>{
+            cancelAnimationFrame(frameRef.current);
+            cancelAnimationFrame(windowFrameRef.current);
+        };
     }, [
         measure
     ]);
@@ -2840,6 +3467,35 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
         comments,
         draft
     ]);
+    useLayoutEffect(()=>{
+        const pending = pendingFocusRef.current;
+        if (!pending || pendingFocusFrameRef.current) return;
+        pendingFocusFrameRef.current = requestAnimationFrame(()=>{
+            pendingFocusFrameRef.current = 0;
+            const current = pendingFocusRef.current;
+            if (!current) return;
+            const target = current.commentId ? anchorRefs.current.get(current.commentId) : panelRef.current?.querySelector('.ds-icon-button.close');
+            if (!target) return;
+            pendingFocusRef.current = null;
+            focusDocumentCommentItem(target);
+        });
+    }, [
+        comments,
+        effectiveActiveCommentId,
+        mountedCommentIndicesKey
+    ]);
+    useEffect(()=>()=>cancelAnimationFrame(pendingFocusFrameRef.current), []);
+    useLayoutEffect(()=>{
+        const commentId = pendingRevealCommentIdRef.current;
+        if (!commentId) return;
+        const card = cardRefs.current.get(commentId);
+        if (!card) return;
+        pendingRevealCommentIdRef.current = null;
+        scrollDocumentCommentItemIntoView(card);
+    }, [
+        effectiveActiveCommentId,
+        mountedCommentIndicesKey
+    ]);
     useEffect(()=>{
         const surface = surfaceRef.current;
         const panel = panelRef.current;
@@ -2857,19 +3513,27 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
             subtree: true
         });
         const scroll = surface.closest('.work-document-scroll');
-        scroll?.addEventListener('scroll', scheduleMeasure, {
+        const handleScroll = draft ? scheduleMeasure : scheduleWindowUpdate;
+        scroll?.addEventListener('scroll', handleScroll, {
+            passive: true
+        });
+        panel.addEventListener('scroll', handleScroll, {
             passive: true
         });
         window.addEventListener('resize', scheduleMeasure);
         return ()=>{
             observer?.disconnect();
             mutationObserver?.disconnect();
-            scroll?.removeEventListener('scroll', scheduleMeasure);
+            scroll?.removeEventListener('scroll', handleScroll);
+            panel.removeEventListener('scroll', handleScroll);
             window.removeEventListener('resize', scheduleMeasure);
         };
     }, [
+        draft,
         editor,
+        mountedCommentIndicesKey,
         scheduleMeasure,
+        scheduleWindowUpdate,
         surfaceRef
     ]);
     useEffect(()=>{
@@ -2880,7 +3544,10 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
             if (!(target instanceof Element)) return;
             const anchor = target.closest('[data-document-comment][data-comment-id]');
             const id = anchor?.dataset.commentId;
-            if (id && comments.some((comment)=>comment.id === id)) setActiveCommentId(id);
+            if (id && comments.some((comment)=>comment.id === id)) {
+                pendingRevealCommentIdRef.current = id;
+                setActiveCommentId(id);
+            }
         };
         editorDom.addEventListener('click', openAnchoredComment);
         return ()=>editorDom.removeEventListener('click', openAnchoredComment);
@@ -2895,12 +3562,12 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
                 viewBox: `0 0 ${layout.width} ${layout.height}`,
                 preserveAspectRatio: "none",
                 "aria-hidden": "true",
-                children: layout.items.map((item)=>{
-                    const comment = comments.find((candidate)=>candidate.id === item.commentId);
+                children: visibleConnectorItems.map((item)=>{
+                    const comment = item.commentId ? commentsById.get(item.commentId) : void 0;
                     const bendX = Math.max(item.startX + 16, item.endX - 28);
                     const className = [
                         comment?.resolved ? 'resolved' : '',
-                        activeCommentId === item.commentId ? 'active' : '',
+                        effectiveActiveCommentId === item.commentId ? 'active' : '',
                         'draft' === item.kind ? 'draft active' : ''
                     ].filter(Boolean).join(' ');
                     return /*#__PURE__*/ jsxs("g", {
@@ -2947,50 +3614,72 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
                             })
                         ]
                     }),
-                    /*#__PURE__*/ jsxs("div", {
+                    /*#__PURE__*/ jsxs("ol", {
                         ref: trackRef,
                         className: "work-document-comment-track",
+                        "aria-label": "文档批注",
+                        "data-document-comment-count": comments.length,
+                        "data-document-comment-mounted-count": commentWindow.mountedIndices.length,
+                        "data-document-comment-track-height": Math.round(layout.trackHeight),
+                        "data-document-comment-window-end": commentWindow.range.end,
+                        "data-document-comment-window-limit": 32,
+                        "data-document-comment-window-start": commentWindow.range.start,
+                        "data-document-comment-windowed": commentWindow.range.windowed ? 'true' : 'false',
                         style: {
                             minHeight: `${layout.trackHeight}px`
                         },
                         children: [
-                            draft && /*#__PURE__*/ jsx(document_comment_composer_DocumentCommentComposer, {
-                                ref: (element)=>{
-                                    const id = `draft:${draft.id}`;
-                                    if (element) cardRefs.current.set(id, element);
-                                    else cardRefs.current.delete(id);
-                                },
-                                draft: draft,
-                                top: layout.items.find((item)=>'draft' === item.kind)?.cardTop ?? 8,
-                                onCancel: ()=>void cancelDraft(),
-                                onDirtyChange: setDraftDirty,
-                                onSubmit: onSubmitDraft
+                            draft && /*#__PURE__*/ jsx("li", {
+                                className: "work-document-comment-draft-item",
+                                children: /*#__PURE__*/ jsx(document_comment_composer_DocumentCommentComposer, {
+                                    ref: (element)=>{
+                                        const id = `draft:${draft.id}`;
+                                        if (element) cardRefs.current.set(id, element);
+                                        else cardRefs.current.delete(id);
+                                    },
+                                    draft: draft,
+                                    top: layoutItemsById.get(`draft:${draft.id}`)?.cardTop ?? 8,
+                                    onCancel: ()=>void cancelDraft(),
+                                    onDirtyChange: setDraftDirty,
+                                    onSubmit: onSubmitDraft
+                                })
                             }, draft.id),
-                            comments.map((comment, index)=>{
-                                const item = layout.items.find((candidate)=>candidate.id === comment.id);
-                                const active = activeCommentId === comment.id;
-                                return /*#__PURE__*/ jsxs("article", {
+                            commentWindow.mountedIndices.map((index)=>{
+                                const comment = comments[index];
+                                if (!comment) return null;
+                                const item = layoutItemsById.get(comment.id);
+                                const active = effectiveActiveCommentId === comment.id;
+                                return /*#__PURE__*/ jsxs("li", {
+                                    "aria-posinset": index + 1,
+                                    "aria-setsize": comments.length,
                                     ref: (element)=>{
                                         if (element) cardRefs.current.set(comment.id, element);
                                         else cardRefs.current.delete(comment.id);
                                     },
-                                    className: `${comment.resolved ? 'resolved' : ''}${active ? ' active' : ''}`,
+                                    className: `work-document-comment-card${comment.resolved ? ' resolved' : ''}${active ? ' active' : ''}`,
                                     "data-comment-id": comment.id,
+                                    "data-document-comment-card-top": Math.round(item?.cardTop ?? 8),
+                                    "data-document-comment-item": index + 1,
                                     style: {
                                         top: `${item?.cardTop ?? 8}px`
                                     },
-                                    onFocusCapture: ()=>setActiveCommentId(comment.id),
+                                    onFocusCapture: ()=>commentWindow.onItemFocus(index),
                                     children: [
                                         /*#__PURE__*/ jsxs("button", {
+                                            ref: (element)=>{
+                                                commentWindow.registerItem(comment.id, element);
+                                                if (element) anchorRefs.current.set(comment.id, element);
+                                                else anchorRefs.current.delete(comment.id);
+                                            },
                                             type: "button",
                                             className: "work-document-comment-anchor",
                                             "aria-label": `定位批注 ${index + 1}`,
+                                            "aria-current": active ? 'location' : void 0,
+                                            tabIndex: commentWindow.rovingIndex === index ? 0 : -1,
+                                            onKeyDown: (event)=>handleCommentAnchorKeyDown(event, index),
                                             onClick: ()=>{
                                                 setActiveCommentId(comment.id);
-                                                editor.chain().focus().setTextSelection({
-                                                    from: Math.min(comment.from, editor.state.doc.content.size),
-                                                    to: Math.min(comment.to, editor.state.doc.content.size)
-                                                }).run();
+                                                editor.chain().focus().setTextSelection(documentCommentSelection(editor, comment)).run();
                                             },
                                             children: [
                                                 /*#__PURE__*/ jsx("span", {
@@ -3107,10 +3796,13 @@ function DocumentCommentsPanel({ editor, comments, draft, surfaceRef, onReply, o
                                     ]
                                 }, comment.id);
                             }),
-                            !comments.length && !draft && /*#__PURE__*/ jsx(CollectionState, {
-                                className: "work-document-comments-empty",
-                                role: "status",
-                                children: "选择文字并添加批注。"
+                            !comments.length && !draft && /*#__PURE__*/ jsx("li", {
+                                className: "work-document-comment-empty-item",
+                                children: /*#__PURE__*/ jsx(CollectionState, {
+                                    className: "work-document-comments-empty",
+                                    role: "status",
+                                    children: "选择文字并添加批注。"
+                                })
                             })
                         ]
                     })
@@ -3140,6 +3832,29 @@ function sameCommentTrackLayout(current, next) {
         return candidate?.id === item.id && candidate.kind === item.kind && candidate.commentId === item.commentId && Math.abs(candidate.cardTop - item.cardTop) <= 0.5 && Math.abs(candidate.startX - item.startX) <= 0.5 && Math.abs(candidate.startY - item.startY) <= 0.5 && Math.abs(candidate.endX - item.endX) <= 0.5 && Math.abs(candidate.endY - item.endY) <= 0.5;
     });
 }
+function commentCardMeasurementKey(comment, active) {
+    const replies = (comment.replies ?? []).map((reply)=>`${reply.id}:${reply.text.length}`).join('|');
+    return `${comment.id}:${active ? 'active' : 'idle'}:${comment.text.length}:${replies}`;
+}
+function estimateCommentCardHeight(comment, active) {
+    const bodyLines = estimatedWrappedLines(comment.text, 34);
+    const replyHeight = (comment.replies ?? []).reduce((height, reply)=>height + 32 + 14 * estimatedWrappedLines(reply.text, 31), 0);
+    return 78 + 15 * bodyLines + replyHeight + (active ? 92 : 0);
+}
+function selectDocumentComment(editor, comment) {
+    if (editor.isDestroyed) return;
+    editor.commands.setTextSelection(documentCommentSelection(editor, comment));
+}
+function documentCommentSelection(editor, comment) {
+    const maximum = Math.max(1, editor.state.doc.content.size - 1);
+    return {
+        from: Math.min(comment.from, maximum),
+        to: Math.min(comment.to, maximum)
+    };
+}
+function estimatedWrappedLines(value, charactersPerLine) {
+    return Math.max(1, value.split('\n').reduce((lines, line)=>lines + Math.max(1, Math.ceil(line.length / charactersPerLine)), 0));
+}
 function commentAuthorInitials(author) {
     const words = author.trim().split(/\s+/).filter(Boolean);
     if (!words.length) return '审';
@@ -4543,43 +5258,401 @@ function normalizedDocumentHeadingText(value) {
 function normalizedDocumentOutlineQuery(value) {
     return value.normalize('NFKC').trim().toLocaleLowerCase();
 }
-function DocumentPageNavigation({ currentPage, pages, onSelectPage }) {
+const DOCUMENT_OUTLINE_ITEM_HEIGHT = 31;
+const DOCUMENT_OUTLINE_LIST_PADDING_TOP = 6;
+const document_outline_navigation_DocumentOutlineNavigation = /*#__PURE__*/ forwardRef(function({ activeItemId, collapsedIds, items, rovingId, onNavigate, onRovingIdChange, onToggleCollapsed }, ref) {
+    const keys = useMemo(()=>items.map((item)=>item.id), [
+        items
+    ]);
+    const pinnedKeys = useMemo(()=>[
+            activeItemId
+        ], [
+        activeItemId
+    ]);
+    const navigation = useDocumentNavigationWindow({
+        estimatedItemHeight: DOCUMENT_OUTLINE_ITEM_HEIGHT,
+        itemGap: 0,
+        keys,
+        listPaddingTop: DOCUMENT_OUTLINE_LIST_PADDING_TOP,
+        onRovingKeyChange: onRovingIdChange,
+        pinnedKeys,
+        rovingKey: rovingId
+    });
+    useImperativeHandle(ref, ()=>({
+            focusFirst: ()=>navigation.focusAt(0),
+            focusLast: ()=>navigation.focusAt(items.length - 1)
+        }), [
+        items.length,
+        navigation.focusAt
+    ]);
+    const handleItemKeyDown = (event, item, index)=>{
+        if ('ArrowDown' === event.key) {
+            event.preventDefault();
+            navigation.focusAt(Math.min(items.length - 1, index + 1));
+        } else if ('ArrowUp' === event.key) {
+            event.preventDefault();
+            navigation.focusAt(Math.max(0, index - 1));
+        } else if ('Home' === event.key) {
+            event.preventDefault();
+            navigation.focusAt(0);
+        } else if ('End' === event.key) {
+            event.preventDefault();
+            navigation.focusAt(items.length - 1);
+        } else if ('ArrowRight' === event.key && item.hasChildren && collapsedIds.has(item.id)) {
+            event.preventDefault();
+            onToggleCollapsed(item.id);
+        } else if ('ArrowRight' === event.key && item.hasChildren) {
+            event.preventDefault();
+            const child = items[index + 1];
+            if (child?.depth > item.depth) navigation.focusAt(index + 1);
+        } else if ('ArrowLeft' === event.key) {
+            event.preventDefault();
+            if (item.hasChildren && !collapsedIds.has(item.id)) onToggleCollapsed(item.id);
+            else if (item.parentId) navigation.focusAt(items.findIndex((candidate)=>candidate.id === item.parentId));
+        }
+    };
+    return /*#__PURE__*/ jsx("nav", {
+        ref: navigation.viewportRef,
+        className: "work-document-task-pane-body work-document-outline",
+        "aria-label": "文档标题",
+        "data-document-navigation-collection": "outline",
+        "data-document-navigation-item-count": items.length,
+        "data-document-navigation-mounted-count": navigation.mountedCount,
+        "data-document-navigation-window-end": navigation.range.end,
+        "data-document-navigation-window-limit": 32,
+        "data-document-navigation-window-start": navigation.range.start,
+        "data-document-navigation-windowed": navigation.range.windowed ? 'true' : 'false',
+        onScroll: navigation.onScroll,
+        children: items.length ? /*#__PURE__*/ jsx("ol", {
+            children: navigation.entries.map((entry)=>{
+                if ('spacer' === entry.kind) return /*#__PURE__*/ jsx(DocumentNavigationWindowSpacer, {
+                    entry: entry
+                }, `spacer-${entry.start}-${entry.end}`);
+                const item = items[entry.index];
+                if (!item) return null;
+                const collapsed = collapsedIds.has(item.id);
+                return /*#__PURE__*/ jsxs("li", {
+                    "aria-posinset": entry.index + 1,
+                    "aria-setsize": items.length,
+                    className: activeItemId === item.id ? 'active' : void 0,
+                    "data-document-navigation-item": entry.index + 1,
+                    style: {
+                        '--work-document-outline-indent': `${14 * item.depth}px`
+                    },
+                    children: [
+                        item.hasChildren ? /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            tabIndex: -1,
+                            className: "work-document-outline-toggle",
+                            "aria-label": `${collapsed ? '展开' : '折叠'} ${item.text}`,
+                            title: collapsed ? '展开下级标题' : '折叠下级标题',
+                            onClick: ()=>onToggleCollapsed(item.id),
+                            children: collapsed ? /*#__PURE__*/ jsx(ChevronRight, {
+                                size: 13
+                            }) : /*#__PURE__*/ jsx(ChevronDown, {
+                                size: 13
+                            })
+                        }) : /*#__PURE__*/ jsx("span", {
+                            className: "work-document-outline-toggle-spacer"
+                        }),
+                        /*#__PURE__*/ jsx("button", {
+                            ref: (element)=>navigation.registerItem(item.id, element),
+                            type: "button",
+                            className: "work-document-outline-item",
+                            tabIndex: navigation.rovingIndex === entry.index ? 0 : -1,
+                            "aria-current": activeItemId === item.id ? 'location' : void 0,
+                            "aria-expanded": item.hasChildren ? !collapsed : void 0,
+                            title: item.text,
+                            onFocus: ()=>navigation.onItemFocus(entry.index),
+                            onKeyDown: (event)=>handleItemKeyDown(event, item, entry.index),
+                            onClick: ()=>onNavigate(item.from),
+                            children: item.text
+                        })
+                    ]
+                }, item.id);
+            })
+        }) : /*#__PURE__*/ jsx("div", {
+            className: "work-document-outline-empty",
+            children: "应用标题样式后，可在这里快速跳转"
+        })
+    });
+});
+let thumbnailCaptureQueue = Promise.resolve();
+function DocumentPageThumbnail({ backgroundColor, fallbackText, orientation, pageIndex, priority = false, source, renderThumbnail = renderDocumentPageThumbnail }) {
+    const rootRef = useRef(null);
+    const nearViewport = useNearThumbnailViewport(rootRef);
+    const captureActive = priority || nearViewport;
+    const sourceMutation = useThumbnailSourceMutation(source, captureActive);
+    const [image, setImage] = useState(null);
+    const [state, setState] = useState(source ? 'loading' : 'idle');
+    useEffect(()=>{
+        if (!source || !captureActive) {
+            setImage(null);
+            setState('idle');
+            return;
+        }
+        if (pageIndex < 0 || pageIndex >= source.pageCount) {
+            setImage(null);
+            setState('failed');
+            return;
+        }
+        let cancelled = false;
+        setState((current)=>'ready' === current ? 'refreshing' : 'loading');
+        const targetPixelWidth = 'landscape' === orientation ? 340 : 276;
+        const task = async ()=>{
+            if (cancelled) return;
+            const nextImage = await renderThumbnail(source, pageIndex, targetPixelWidth);
+            if (cancelled) return;
+            setImage(nextImage);
+            setState('ready');
+        };
+        const queued = thumbnailCaptureQueue.then(task, task);
+        thumbnailCaptureQueue = queued.catch(()=>void 0);
+        queued.catch(()=>{
+            if (cancelled) return;
+            setImage(null);
+            setState('failed');
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        captureActive,
+        orientation,
+        pageIndex,
+        renderThumbnail,
+        source?.element,
+        source?.pageCount,
+        source?.pageGap,
+        source?.pageHeight,
+        source?.pageWidth,
+        source?.revision,
+        sourceMutation
+    ]);
+    return /*#__PURE__*/ jsx("span", {
+        ref: rootRef,
+        className: `work-document-page-thumbnail ${orientation}`,
+        "data-testid": "document-page-thumbnail",
+        "data-thumbnail-source": source ? 'live-page' : 'text-fallback',
+        "data-thumbnail-state": state,
+        "aria-hidden": "true",
+        style: {
+            aspectRatio: source ? `${source.pageWidth} / ${source.pageHeight}` : void 0,
+            backgroundColor
+        },
+        children: image ? /*#__PURE__*/ jsx("img", {
+            alt: "",
+            "data-document-page-raster": pageIndex + 1,
+            draggable: false,
+            src: image
+        }) : /*#__PURE__*/ jsx("span", {
+            className: "work-document-page-thumbnail-fallback",
+            children: fallbackText || '空白页'
+        })
+    });
+}
+async function renderDocumentPageThumbnail(source, pageIndex, targetPixelWidth, renderCanvas = renderDocumentPageCanvas) {
+    if (!Number.isSafeInteger(pageIndex) || pageIndex < 0 || pageIndex >= source.pageCount) throw new Error('The requested document thumbnail page is out of range.');
+    const capture = mountWorkLiveDocumentCapture(source, pageIndex);
+    try {
+        const scale = Math.max(0.1, Math.min(1, targetPixelWidth / source.pageWidth));
+        const canvas = await renderCanvas(capture.viewport, {
+            backgroundColor: capture.backgroundColor,
+            fontReadyTimeout: 0,
+            height: source.pageHeight,
+            logging: false,
+            scale,
+            useCORS: true,
+            width: source.pageWidth,
+            windowHeight: Math.ceil(source.pageHeight),
+            windowWidth: Math.ceil(source.pageWidth)
+        });
+        return canvas.toDataURL('image/png');
+    } finally{
+        capture.host.remove();
+    }
+}
+async function renderDocumentPageCanvas(element, options) {
+    const { default: html2canvas } = await import("html2canvas");
+    return html2canvas(element, options);
+}
+function useNearThumbnailViewport(rootRef) {
+    const [nearViewport, setNearViewport] = useState(()=>"u" < typeof IntersectionObserver);
+    useEffect(()=>{
+        const element = rootRef.current;
+        if (!element) return;
+        if ("u" < typeof IntersectionObserver) return void setNearViewport(true);
+        const root = element.closest('.work-document-page-navigation');
+        const observer = new IntersectionObserver((entries)=>{
+            const entry = entries[0];
+            if (entry) setNearViewport(entry.isIntersecting);
+        }, {
+            root,
+            rootMargin: '280px 0px'
+        });
+        observer.observe(element);
+        return ()=>observer.disconnect();
+    }, [
+        rootRef
+    ]);
+    return nearViewport;
+}
+function useThumbnailSourceMutation(source, active) {
+    const [revision, setRevision] = useState(0);
+    useEffect(()=>{
+        if (!source || !active || "u" < typeof MutationObserver) return;
+        let timer = 0;
+        const observer = new MutationObserver(()=>{
+            window.clearTimeout(timer);
+            timer = window.setTimeout(()=>setRevision((current)=>current + 1), 160);
+        });
+        observer.observe(source.element, {
+            attributes: true,
+            characterData: true,
+            childList: true,
+            subtree: true
+        });
+        return ()=>{
+            observer.disconnect();
+            window.clearTimeout(timer);
+        };
+    }, [
+        active,
+        source?.element,
+        source?.revision
+    ]);
+    return revision;
+}
+const DOCUMENT_PAGE_WINDOW_THRESHOLD = 48;
+const DOCUMENT_PAGE_WINDOW_OVERSCAN = 4;
+const DOCUMENT_PAGE_FALLBACK_VIEWPORT_HEIGHT = 720;
+const DOCUMENT_PAGE_LIST_PADDING_TOP = 12;
+const DOCUMENT_PAGE_ITEM_GAP = 12;
+const DOCUMENT_PAGE_PORTRAIT_WIDTH = 138;
+const DOCUMENT_PAGE_LANDSCAPE_WIDTH = 170;
+const DOCUMENT_PAGE_BUTTON_CHROME_HEIGHT = 36;
+const DOCUMENT_PAGE_WINDOW_LIMIT = 24;
+function DocumentPageNavigation({ currentPage, pages, thumbnailSource, onSelectPage }) {
+    const viewportRef = useRef(null);
     const pageRefs = useRef(new Map());
-    const [selectedPage, setSelectedPage] = useState(currentPage);
-    const [rovingPage, setRovingPage] = useState(currentPage);
+    const pagesRef = useRef(pages);
+    const pendingFocusPageRef = useRef(null);
+    const initialIndex = documentPageIndex(pages, currentPage);
+    const initialPhysicalPage = pages[initialIndex]?.physicalPage ?? currentPage;
+    const [selectedPage, setSelectedPage] = useState(initialPhysicalPage);
+    const [rovingPage, setRovingPage] = useState(initialPhysicalPage);
+    const [anchorIndex, setAnchorIndex] = useState(Math.max(0, initialIndex));
+    const [viewportHeight, setViewportHeight] = useState(DOCUMENT_PAGE_FALLBACK_VIEWPORT_HEIGHT);
+    pagesRef.current = pages;
+    const currentPageIndex = documentPageIndex(pages, currentPage);
+    const resolvedCurrentPage = pages[currentPageIndex]?.physicalPage ?? null;
     useEffect(()=>{
-        setSelectedPage(currentPage);
-        setRovingPage(currentPage);
+        if (null === resolvedCurrentPage) return;
+        setSelectedPage(resolvedCurrentPage);
+        setRovingPage(resolvedCurrentPage);
+        setAnchorIndex(currentPageIndex);
     }, [
-        currentPage
+        currentPageIndex,
+        resolvedCurrentPage
     ]);
     useEffect(()=>{
-        if (pages.some((page)=>page.physicalPage === rovingPage)) return;
-        const fallback = pages.find((page)=>page.physicalPage === currentPage) ?? pages[0];
-        if (fallback) setRovingPage(fallback.physicalPage);
+        if (!pages.length) return;
+        const fallback = pages[Math.max(0, currentPageIndex)] ?? pages[0];
+        if (!fallback) return;
+        if (!pages.some((page)=>page.physicalPage === selectedPage)) setSelectedPage(fallback.physicalPage);
+        if (!pages.some((page)=>page.physicalPage === rovingPage)) setRovingPage(fallback.physicalPage);
     }, [
-        currentPage,
+        currentPageIndex,
         pages,
-        rovingPage
+        rovingPage,
+        selectedPage
     ]);
-    useEffect(()=>{
-        pageRefs.current.get(selectedPage)?.scrollIntoView({
+    useLayoutEffect(()=>{
+        const viewport = viewportRef.current;
+        if (!viewport) return;
+        const update = ()=>{
+            const nextHeight = viewport.clientHeight || DOCUMENT_PAGE_FALLBACK_VIEWPORT_HEIGHT;
+            setViewportHeight((current)=>current === nextHeight ? current : nextHeight);
+        };
+        update();
+        if ("u" < typeof ResizeObserver) return;
+        const observer = new ResizeObserver(update);
+        observer.observe(viewport);
+        return ()=>observer.disconnect();
+    }, []);
+    const itemHeights = useMemo(()=>pages.map((page)=>estimatedDocumentPageItemHeight(page, thumbnailSource)), [
+        pages,
+        thumbnailSource?.pageHeight,
+        thumbnailSource?.pageWidth
+    ]);
+    const pageStarts = useMemo(()=>documentNavigationItemStarts(itemHeights, DOCUMENT_PAGE_ITEM_GAP), [
+        itemHeights
+    ]);
+    const averageItemHeight = itemHeights.length ? (pageStarts[pageStarts.length - 1] ?? 1) / itemHeights.length : 1;
+    const range = useMemo(()=>calculateDocumentPageRange({
+            anchorIndex,
+            averageItemHeight,
+            pageCount: pages.length,
+            viewportHeight
+        }), [
+        anchorIndex,
+        averageItemHeight,
+        pages.length,
+        viewportHeight
+    ]);
+    const mountedIndices = useMemo(()=>documentNavigationWindowIndices({
+            itemCount: pages.length,
+            pinnedIndices: [
+                documentPageIndex(pages, selectedPage),
+                documentPageIndex(pages, rovingPage)
+            ],
+            range
+        }), [
+        pages,
+        range,
+        rovingPage,
+        selectedPage
+    ]);
+    const listEntries = useMemo(()=>documentNavigationWindowEntries(mountedIndices, pageStarts, pages.length, DOCUMENT_PAGE_ITEM_GAP), [
+        mountedIndices,
+        pageStarts,
+        pages.length
+    ]);
+    const mountedPageKey = mountedIndices.join(',');
+    useLayoutEffect(()=>{
+        pageRefs.current.get(selectedPage)?.scrollIntoView?.({
             block: 'nearest',
             inline: 'nearest'
         });
     }, [
         selectedPage
     ]);
+    useLayoutEffect(()=>{
+        const pendingPage = pendingFocusPageRef.current;
+        if (null === pendingPage) return;
+        const element = pageRefs.current.get(pendingPage);
+        if (!element) return;
+        pendingFocusPageRef.current = null;
+        focusDocumentPageButton(element);
+    }, [
+        mountedPageKey,
+        rovingPage
+    ]);
     const focusPage = useCallback((pageNumber)=>{
+        const pageIndex = documentPageIndex(pagesRef.current, pageNumber);
+        if (pageIndex < 0) return;
         setRovingPage(pageNumber);
-        requestAnimationFrame(()=>{
-            pageRefs.current.get(pageNumber)?.focus({
-                preventScroll: true
-            });
-        });
+        setAnchorIndex(pageIndex);
+        const mounted = pageRefs.current.get(pageNumber);
+        if (mounted) {
+            pendingFocusPageRef.current = null;
+            focusDocumentPageButton(mounted);
+            return;
+        }
+        pendingFocusPageRef.current = pageNumber;
     }, []);
     const handleKeyDown = (event, page)=>{
-        const index = pages.findIndex((candidate)=>candidate.physicalPage === page.physicalPage);
+        const index = documentPageIndex(pages, page.physicalPage);
         const focusAt = (requestedIndex)=>{
             const next = pages[requestedIndex];
             if (next) focusPage(next.physicalPage);
@@ -4599,12 +5672,41 @@ function DocumentPageNavigation({ currentPage, pages, onSelectPage }) {
         }
     };
     return /*#__PURE__*/ jsx("nav", {
+        ref: viewportRef,
         className: "work-document-task-pane-body work-document-page-navigation",
         "aria-label": "文档页面",
+        "data-document-page-count": pages.length,
+        "data-document-page-mounted-count": mountedIndices.length,
+        "data-document-page-window-end": range.end,
+        "data-document-page-window-limit": DOCUMENT_PAGE_WINDOW_LIMIT,
+        "data-document-page-window-start": range.start,
+        "data-document-page-windowed": range.windowed ? 'true' : 'false',
+        onScroll: (event)=>{
+            if (!range.windowed) return;
+            const nextAnchor = documentNavigationIndexAtOffset(pageStarts, Math.max(0, event.currentTarget.scrollTop - DOCUMENT_PAGE_LIST_PADDING_TOP), pages.length);
+            setAnchorIndex((current)=>current === nextAnchor ? current : nextAnchor);
+        },
         children: pages.length ? /*#__PURE__*/ jsx("ol", {
-            children: pages.map((page)=>{
+            children: listEntries.map((entry)=>{
+                if ('spacer' === entry.kind) return /*#__PURE__*/ jsx("li", {
+                    "aria-hidden": "true",
+                    className: "work-document-page-navigation-spacer",
+                    "data-document-page-spacer": entry.position,
+                    "data-document-page-spacer-end": entry.end,
+                    "data-document-page-spacer-start": entry.start + 1,
+                    role: "presentation",
+                    style: {
+                        height: `${entry.height}px`
+                    }
+                }, `spacer-${entry.start}-${entry.end}`);
+                const page = pages[entry.index];
+                if (!page) return null;
                 const current = page.physicalPage === selectedPage;
                 return /*#__PURE__*/ jsx("li", {
+                    "aria-posinset": entry.index + 1,
+                    "aria-setsize": pages.length,
+                    "data-document-page-item": page.physicalPage,
+                    "data-document-page-orientation": page.orientation,
                     children: /*#__PURE__*/ jsxs("button", {
                         ref: (element)=>{
                             if (element) pageRefs.current.set(page.physicalPage, element);
@@ -4620,18 +5722,17 @@ function DocumentPageNavigation({ currentPage, pages, onSelectPage }) {
                         onKeyDown: (event)=>handleKeyDown(event, page),
                         onClick: ()=>{
                             setSelectedPage(page.physicalPage);
+                            setAnchorIndex(entry.index);
                             onSelectPage(page);
                         },
                         children: [
-                            /*#__PURE__*/ jsx("span", {
-                                className: `work-document-page-thumbnail ${page.orientation}`,
-                                "aria-hidden": "true",
-                                style: {
-                                    backgroundColor: page.backgroundColor
-                                },
-                                children: /*#__PURE__*/ jsx("span", {
-                                    children: page.previewText || '空白页'
-                                })
+                            /*#__PURE__*/ jsx(DocumentPageThumbnail, {
+                                backgroundColor: page.backgroundColor,
+                                fallbackText: page.previewText,
+                                orientation: page.orientation,
+                                pageIndex: page.physicalPage - 1,
+                                priority: Math.abs(page.physicalPage - selectedPage) <= 1,
+                                source: thumbnailSource
                             }),
                             /*#__PURE__*/ jsxs("span", {
                                 className: "work-document-page-thumbnail-label",
@@ -4657,11 +5758,151 @@ function DocumentPageNavigation({ currentPage, pages, onSelectPage }) {
         })
     });
 }
-function DocumentNavigationPanel({ currentPage = 1, editor, modal = false, pages = [], onClose }) {
+function calculateDocumentPageRange({ anchorIndex, averageItemHeight, pageCount, viewportHeight }) {
+    return calculateDocumentNavigationWindowRange({
+        anchorIndex,
+        averageItemHeight,
+        itemCount: pageCount,
+        limit: DOCUMENT_PAGE_WINDOW_LIMIT,
+        overscan: DOCUMENT_PAGE_WINDOW_OVERSCAN,
+        threshold: DOCUMENT_PAGE_WINDOW_THRESHOLD,
+        viewportHeight
+    });
+}
+function documentPageIndex(pages, physicalPage) {
+    return pages.findIndex((page)=>page.physicalPage === physicalPage);
+}
+function estimatedDocumentPageItemHeight(page, source) {
+    const width = 'landscape' === page.orientation ? DOCUMENT_PAGE_LANDSCAPE_WIDTH : DOCUMENT_PAGE_PORTRAIT_WIDTH;
+    const sourceRatio = source && source.pageWidth > 0 && source.pageHeight > 0 ? source.pageHeight / source.pageWidth : null;
+    const fallbackRatio = 'landscape' === page.orientation ? 210 / 297 : 297 / 210;
+    return Math.ceil(width * (sourceRatio ?? fallbackRatio) + DOCUMENT_PAGE_BUTTON_CHROME_HEIGHT);
+}
+function focusDocumentPageButton(element) {
+    element.focus({
+        preventScroll: true
+    });
+    element.scrollIntoView?.({
+        block: 'nearest',
+        inline: 'nearest'
+    });
+}
+const DOCUMENT_SEARCH_RESULT_HEIGHT = 56;
+const DOCUMENT_SEARCH_RESULT_GAP = 5;
+const DOCUMENT_SEARCH_LIST_PADDING_TOP = 7;
+const document_search_navigation_DocumentSearchNavigation = /*#__PURE__*/ forwardRef(function({ matches, outline, rovingId, selectedMatchIndex, onRovingIdChange, onSelect }, ref) {
+    const keys = useMemo(()=>matches.map(documentNavigationMatchId), [
+        matches
+    ]);
+    const selectedMatch = matches[selectedMatchIndex];
+    const selectedKey = selectedMatch ? documentNavigationMatchId(selectedMatch) : null;
+    const pinnedKeys = useMemo(()=>[
+            selectedKey
+        ], [
+        selectedKey
+    ]);
+    const navigation = useDocumentNavigationWindow({
+        estimatedItemHeight: DOCUMENT_SEARCH_RESULT_HEIGHT,
+        itemGap: DOCUMENT_SEARCH_RESULT_GAP,
+        keys,
+        listPaddingTop: DOCUMENT_SEARCH_LIST_PADDING_TOP,
+        onRovingKeyChange: onRovingIdChange,
+        pinnedKeys,
+        rovingKey: rovingId
+    });
+    useImperativeHandle(ref, ()=>({
+            focusFirst: ()=>navigation.focusAt(0),
+            focusLast: ()=>navigation.focusAt(matches.length - 1)
+        }), [
+        matches.length,
+        navigation.focusAt
+    ]);
+    const handleResultKeyDown = (event, index)=>{
+        if ('ArrowDown' === event.key) {
+            event.preventDefault();
+            navigation.focusAt(Math.min(matches.length - 1, index + 1));
+        } else if ('ArrowUp' === event.key) {
+            event.preventDefault();
+            navigation.focusAt(Math.max(0, index - 1));
+        } else if ('Home' === event.key) {
+            event.preventDefault();
+            navigation.focusAt(0);
+        } else if ('End' === event.key) {
+            event.preventDefault();
+            navigation.focusAt(matches.length - 1);
+        }
+    };
+    return /*#__PURE__*/ jsx("nav", {
+        ref: navigation.viewportRef,
+        className: "work-document-task-pane-body work-document-search-results",
+        "aria-label": "文档搜索结果",
+        "data-document-navigation-collection": "search",
+        "data-document-navigation-item-count": matches.length,
+        "data-document-navigation-mounted-count": navigation.mountedCount,
+        "data-document-navigation-window-end": navigation.range.end,
+        "data-document-navigation-window-limit": 32,
+        "data-document-navigation-window-start": navigation.range.start,
+        "data-document-navigation-windowed": navigation.range.windowed ? 'true' : 'false',
+        onScroll: navigation.onScroll,
+        children: matches.length ? /*#__PURE__*/ jsx("ol", {
+            children: navigation.entries.map((entry)=>{
+                if ('spacer' === entry.kind) return /*#__PURE__*/ jsx(DocumentNavigationWindowSpacer, {
+                    entry: entry
+                }, `spacer-${entry.start}-${entry.end}`);
+                const match = matches[entry.index];
+                if (!match) return null;
+                const resultId = documentNavigationMatchId(match);
+                const section = currentWorkDocumentOutlineItem(outline, match.from)?.text ?? '文档开头';
+                return /*#__PURE__*/ jsx("li", {
+                    "aria-posinset": entry.index + 1,
+                    "aria-setsize": matches.length,
+                    "data-document-navigation-item": entry.index + 1,
+                    children: /*#__PURE__*/ jsxs("button", {
+                        ref: (element)=>navigation.registerItem(resultId, element),
+                        type: "button",
+                        className: "work-document-search-result",
+                        tabIndex: navigation.rovingIndex === entry.index ? 0 : -1,
+                        "aria-label": `第 ${entry.index + 1} 个匹配：${match.matchedText}`,
+                        "aria-current": selectedMatchIndex === entry.index ? 'location' : void 0,
+                        onFocus: ()=>navigation.onItemFocus(entry.index),
+                        onKeyDown: (event)=>handleResultKeyDown(event, entry.index),
+                        onClick: ()=>onSelect(match),
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                className: "work-document-search-section",
+                                children: section
+                            }),
+                            /*#__PURE__*/ jsxs("span", {
+                                className: "work-document-search-excerpt",
+                                children: [
+                                    match.truncatedBefore && '…',
+                                    match.before,
+                                    /*#__PURE__*/ jsx("mark", {
+                                        children: match.matchedText
+                                    }),
+                                    match.after,
+                                    match.truncatedAfter && '…'
+                                ]
+                            })
+                        ]
+                    })
+                }, resultId);
+            })
+        }) : /*#__PURE__*/ jsx("div", {
+            className: "work-document-outline-empty",
+            children: "尝试更短或不同的文字"
+        })
+    });
+});
+function documentNavigationMatchId(match) {
+    return `match-${match.from}-${match.to}`;
+}
+const instantDocumentScrollStates = new WeakMap();
+function DocumentNavigationPanel({ currentPage = 1, editor, modal = false, pages = [], pageThumbnailSource, onClose }) {
     const tabsId = useId();
     const searchRef = useRef(null);
-    const itemRefs = useRef(new Map());
-    const resultRefs = useRef(new Map());
+    const outlineNavigationRef = useRef(null);
+    const searchNavigationRef = useRef(null);
     const [, renderEditorState] = useState(0);
     const [navigationView, setNavigationView] = useState('headings');
     const [query, setQuery] = useState('');
@@ -4732,28 +5973,12 @@ function DocumentNavigationPanel({ currentPage = 1, editor, modal = false, pages
     ]);
     useEffect(()=>{
         if (!normalizedQuery) return;
-        const validResultIds = new Set(matches.map(documentMatchId));
-        setRovingResultId((current)=>current && validResultIds.has(current) ? current : matches[0] ? documentMatchId(matches[0]) : null);
+        const validResultIds = new Set(matches.map(documentNavigationMatchId));
+        setRovingResultId((current)=>current && validResultIds.has(current) ? current : matches[0] ? documentNavigationMatchId(matches[0]) : null);
     }, [
         matches,
         normalizedQuery
     ]);
-    const focusItem = useCallback((itemId)=>{
-        setRovingId(itemId);
-        requestAnimationFrame(()=>{
-            itemRefs.current.get(itemId)?.focus({
-                preventScroll: true
-            });
-        });
-    }, []);
-    const focusResult = useCallback((resultId)=>{
-        setRovingResultId(resultId);
-        requestAnimationFrame(()=>{
-            resultRefs.current.get(resultId)?.focus({
-                preventScroll: true
-            });
-        });
-    }, []);
     const toggleCollapsed = useCallback((itemId)=>{
         setCollapsedIds((current)=>{
             const next = new Set(current);
@@ -4762,45 +5987,15 @@ function DocumentNavigationPanel({ currentPage = 1, editor, modal = false, pages
             return next;
         });
     }, []);
-    const handleItemKeyDown = (event, item)=>{
-        const index = visibleItems.findIndex((candidate)=>candidate.id === item.id);
-        const focusAt = (requestedIndex)=>{
-            const next = visibleItems[requestedIndex];
-            if (next) focusItem(next.id);
-        };
-        if ('ArrowDown' === event.key) {
-            event.preventDefault();
-            focusAt(Math.min(visibleItems.length - 1, index + 1));
-        } else if ('ArrowUp' === event.key) {
-            event.preventDefault();
-            focusAt(Math.max(0, index - 1));
-        } else if ('Home' === event.key) {
-            event.preventDefault();
-            focusAt(0);
-        } else if ('End' === event.key) {
-            event.preventDefault();
-            focusAt(visibleItems.length - 1);
-        } else if ('ArrowRight' === event.key && !normalizedQuery && item.hasChildren && collapsedIds.has(item.id)) {
-            event.preventDefault();
-            toggleCollapsed(item.id);
-        } else if ('ArrowRight' === event.key && !normalizedQuery && item.hasChildren) {
-            event.preventDefault();
-            const child = visibleItems[index + 1];
-            if (child?.depth > item.depth) focusItem(child.id);
-        } else if ('ArrowLeft' === event.key && !normalizedQuery) {
-            event.preventDefault();
-            if (item.hasChildren && !collapsedIds.has(item.id)) toggleCollapsed(item.id);
-            else if (item.parentId) focusItem(item.parentId);
-        }
-    };
-    const navigateTo = async (selection)=>{
+    const navigateTo = async (selection, focusEditor = true)=>{
+        const resolvedSelection = 'number' == typeof selection ? TextSelection.near(editor.state.doc.resolve(Math.min(editor.state.doc.content.size, Math.max(0, selection))), 1).from : selection;
         const chain = editor.chain();
-        if (!modal) chain.focus();
-        chain.setTextSelection(selection).scrollIntoView().run();
+        if (!modal && focusEditor) chain.focus();
+        runWithInstantDocumentScroll(editor, ()=>chain.setTextSelection(resolvedSelection).scrollIntoView().run());
         if (!modal) return;
         await onClose();
         requestAnimationFrame(()=>{
-            if (!editor.isDestroyed) editor.chain().focus().scrollIntoView().run();
+            if (!editor.isDestroyed) runWithInstantDocumentScroll(editor, ()=>editor.chain().focus().scrollIntoView().run());
         });
     };
     const selectMatch = (match)=>{
@@ -4809,26 +6004,6 @@ function DocumentNavigationPanel({ currentPage = 1, editor, modal = false, pages
             to: match.to
         });
     };
-    const handleResultKeyDown = (event, match)=>{
-        const index = matches.findIndex((candidate)=>documentMatchId(candidate) === documentMatchId(match));
-        const focusAt = (requestedIndex)=>{
-            const next = matches[requestedIndex];
-            if (next) focusResult(documentMatchId(next));
-        };
-        if ('ArrowDown' === event.key) {
-            event.preventDefault();
-            focusAt(Math.min(matches.length - 1, index + 1));
-        } else if ('ArrowUp' === event.key) {
-            event.preventDefault();
-            focusAt(Math.max(0, index - 1));
-        } else if ('Home' === event.key) {
-            event.preventDefault();
-            focusAt(0);
-        } else if ('End' === event.key) {
-            event.preventDefault();
-            focusAt(matches.length - 1);
-        }
-    };
     return /*#__PURE__*/ jsxs(DocumentTaskPane, {
         ariaLabel: "文档导航",
         className: "work-document-navigation-panel",
@@ -4873,7 +6048,8 @@ function DocumentNavigationPanel({ currentPage = 1, editor, modal = false, pages
                     /*#__PURE__*/ jsx(DocumentPageNavigation, {
                         currentPage: currentPage,
                         pages: pages,
-                        onSelectPage: (page)=>navigateTo(page.selectionPosition)
+                        thumbnailSource: pageThumbnailSource,
+                        onSelectPage: (page)=>navigateTo(page.selectionPosition, false)
                     })
                 ]
             }) : /*#__PURE__*/ jsxs("div", {
@@ -4901,11 +6077,10 @@ function DocumentNavigationPanel({ currentPage = 1, editor, modal = false, pages
                                         event.preventDefault();
                                         selectMatch(matches[0]);
                                     } else if ('ArrowDown' === event.key) {
-                                        const firstTarget = normalizedQuery ? matches[0] ? documentMatchId(matches[0]) : null : visibleItems[0]?.id;
-                                        if (!firstTarget) return;
+                                        const target = normalizedQuery ? searchNavigationRef.current : outlineNavigationRef.current;
+                                        if (!target) return;
                                         event.preventDefault();
-                                        if (normalizedQuery) focusResult(firstTarget);
-                                        else focusItem(firstTarget);
+                                        target.focusFirst();
                                     }
                                 }
                             })
@@ -4916,112 +6091,58 @@ function DocumentNavigationPanel({ currentPage = 1, editor, modal = false, pages
                         "aria-live": "polite",
                         children: normalizedQuery ? matches.length ? `${matches.length} 个匹配` : '没有匹配内容' : `${outline.length} 个标题`
                     }),
-                    normalizedQuery ? /*#__PURE__*/ jsx("nav", {
-                        className: "work-document-task-pane-body work-document-search-results",
-                        "aria-label": "文档搜索结果",
-                        children: matches.length ? /*#__PURE__*/ jsx("ol", {
-                            children: matches.map((match, index)=>{
-                                const resultId = documentMatchId(match);
-                                const section = currentWorkDocumentOutlineItem(outline, match.from)?.text ?? '文档开头';
-                                return /*#__PURE__*/ jsx("li", {
-                                    children: /*#__PURE__*/ jsxs("button", {
-                                        ref: (element)=>{
-                                            if (element) resultRefs.current.set(resultId, element);
-                                            else resultRefs.current.delete(resultId);
-                                        },
-                                        type: "button",
-                                        className: "work-document-search-result",
-                                        tabIndex: resultId === rovingResultId ? 0 : -1,
-                                        "aria-label": `第 ${index + 1} 个匹配：${match.matchedText}`,
-                                        "aria-current": selectedMatchIndex === index ? 'location' : void 0,
-                                        onFocus: ()=>setRovingResultId(resultId),
-                                        onKeyDown: (event)=>handleResultKeyDown(event, match),
-                                        onClick: ()=>selectMatch(match),
-                                        children: [
-                                            /*#__PURE__*/ jsx("span", {
-                                                className: "work-document-search-section",
-                                                children: section
-                                            }),
-                                            /*#__PURE__*/ jsxs("span", {
-                                                className: "work-document-search-excerpt",
-                                                children: [
-                                                    match.truncatedBefore && '…',
-                                                    match.before,
-                                                    /*#__PURE__*/ jsx("mark", {
-                                                        children: match.matchedText
-                                                    }),
-                                                    match.after,
-                                                    match.truncatedAfter && '…'
-                                                ]
-                                            })
-                                        ]
-                                    })
-                                }, resultId);
-                            })
-                        }) : /*#__PURE__*/ jsx("div", {
-                            className: "work-document-outline-empty",
-                            children: "尝试更短或不同的文字"
-                        })
-                    }) : /*#__PURE__*/ jsx("nav", {
-                        className: "work-document-task-pane-body work-document-outline",
-                        "aria-label": "文档标题",
-                        children: visibleItems.length ? /*#__PURE__*/ jsx("ol", {
-                            children: visibleItems.map((item)=>{
-                                const collapsed = collapsedIds.has(item.id);
-                                return /*#__PURE__*/ jsxs("li", {
-                                    className: activeItem?.id === item.id ? 'active' : void 0,
-                                    style: {
-                                        '--work-document-outline-indent': `${14 * item.depth}px`
-                                    },
-                                    children: [
-                                        item.hasChildren ? /*#__PURE__*/ jsx("button", {
-                                            type: "button",
-                                            tabIndex: -1,
-                                            className: "work-document-outline-toggle",
-                                            "aria-label": `${collapsed ? '展开' : '折叠'} ${item.text}`,
-                                            title: collapsed ? '展开下级标题' : '折叠下级标题',
-                                            onClick: ()=>toggleCollapsed(item.id),
-                                            children: collapsed ? /*#__PURE__*/ jsx(ChevronRight, {
-                                                size: 13
-                                            }) : /*#__PURE__*/ jsx(ChevronDown, {
-                                                size: 13
-                                            })
-                                        }) : /*#__PURE__*/ jsx("span", {
-                                            className: "work-document-outline-toggle-spacer"
-                                        }),
-                                        /*#__PURE__*/ jsx("button", {
-                                            ref: (element)=>{
-                                                if (element) itemRefs.current.set(item.id, element);
-                                                else itemRefs.current.delete(item.id);
-                                            },
-                                            type: "button",
-                                            className: "work-document-outline-item",
-                                            tabIndex: item.id === rovingId ? 0 : -1,
-                                            "aria-current": activeItem?.id === item.id ? 'location' : void 0,
-                                            "aria-expanded": item.hasChildren ? !collapsed : void 0,
-                                            title: item.text,
-                                            onFocus: ()=>setRovingId(item.id),
-                                            onKeyDown: (event)=>handleItemKeyDown(event, item),
-                                            onClick: ()=>{
-                                                navigateTo(item.from);
-                                            },
-                                            children: item.text
-                                        })
-                                    ]
-                                }, item.id);
-                            })
-                        }) : /*#__PURE__*/ jsx("div", {
-                            className: "work-document-outline-empty",
-                            children: "应用标题样式后，可在这里快速跳转"
-                        })
+                    normalizedQuery ? /*#__PURE__*/ jsx(document_search_navigation_DocumentSearchNavigation, {
+                        ref: searchNavigationRef,
+                        matches: matches,
+                        outline: outline,
+                        rovingId: rovingResultId,
+                        selectedMatchIndex: selectedMatchIndex,
+                        onRovingIdChange: setRovingResultId,
+                        onSelect: selectMatch
+                    }) : /*#__PURE__*/ jsx(document_outline_navigation_DocumentOutlineNavigation, {
+                        ref: outlineNavigationRef,
+                        activeItemId: activeItem?.id ?? null,
+                        collapsedIds: collapsedIds,
+                        items: visibleItems,
+                        rovingId: rovingId,
+                        onNavigate: (position)=>void navigateTo(position),
+                        onRovingIdChange: setRovingId,
+                        onToggleCollapsed: toggleCollapsed
                     })
                 ]
             })
         ]
     });
 }
-function documentMatchId(match) {
-    return `match-${match.from}-${match.to}`;
+function runWithInstantDocumentScroll(editor, run) {
+    const scrollSurface = editor.view.dom.closest('.work-document-scroll');
+    if (!scrollSurface) return run();
+    let state = instantDocumentScrollStates.get(scrollSurface);
+    if (state) {
+        if (null !== state.restoreFrame && 'function' == typeof cancelAnimationFrame) {
+            cancelAnimationFrame(state.restoreFrame);
+            state.restoreFrame = null;
+        }
+    } else {
+        state = {
+            previousBehavior: scrollSurface.style.scrollBehavior,
+            restoreFrame: null
+        };
+        instantDocumentScrollStates.set(scrollSurface, state);
+    }
+    scrollSurface.style.scrollBehavior = 'auto';
+    scrollSurface.getBoundingClientRect();
+    try {
+        return run();
+    } finally{
+        const restore = ()=>{
+            if (instantDocumentScrollStates.get(scrollSurface) !== state) return;
+            scrollSurface.style.scrollBehavior = state.previousBehavior;
+            instantDocumentScrollStates.delete(scrollSurface);
+        };
+        if ('function' == typeof requestAnimationFrame) state.restoreFrame = requestAnimationFrame(restore);
+        else restore();
+    }
 }
 function DocumentPageStack({ pageColor, pageCount, pageGap, pageHeight }) {
     const count = Math.max(1, Math.trunc(pageCount));
@@ -6421,7 +7542,11 @@ function runDocumentListMenuCommand(editor, close, command) {
     const handled = command();
     if (!handled) return false;
     close();
-    editor.commands.focus();
+    queueMicrotask(()=>{
+        if (!editor.isDestroyed) editor.commands.focus(void 0, {
+            scrollIntoView: false
+        });
+    });
     return true;
 }
 function handleGalleryKeyDown(event, index, count, columns, refs, setFocusIndex, select) {
@@ -7439,11 +8564,457 @@ function documentPaginationSnapshot(editor) {
         }
     });
 }
-const imageWrapDistanceOptions = [
-    {
-        value: '0',
-        label: '无间距'
-    },
+const IMAGE_PIXELS_PER_CENTIMETER = 96 / 2.54;
+const FALLBACK_IMAGE_WIDTH_PIXELS = 320;
+const FALLBACK_IMAGE_HEIGHT_PIXELS = 180;
+const MINIMUM_IMAGE_SIZE_CENTIMETERS = 0.01;
+const MAXIMUM_IMAGE_SIZE_CENTIMETERS = 55.87;
+const MAXIMUM_WRAP_DISTANCE_MILLIMETERS = 25;
+function createDocumentPicturePropertiesDraft(source) {
+    const width = effectiveDimension(source.properties.width, source.renderedWidth, FALLBACK_IMAGE_WIDTH_PIXELS);
+    const height = effectiveDimension(source.properties.height, source.renderedHeight, FALLBACK_IMAGE_HEIGHT_PIXELS);
+    return {
+        width: document_picture_properties_dialog_model_centimeters(width),
+        height: document_picture_properties_dialog_model_centimeters(height),
+        lockAspectRatio: source.properties.lockAspectRatio,
+        aspectRatio: validAspectRatio(width, height),
+        layout: source.properties.layout,
+        alignment: source.properties.alignment,
+        wrapDistance: formatNumber(source.properties.wrapDistance),
+        alternativeText: source.properties.alternativeText
+    };
+}
+function withDocumentPictureDimension(draft, dimension, value) {
+    const next = {
+        ...draft,
+        [dimension]: value
+    };
+    const numeric = numericDraft(value);
+    if (!draft.lockAspectRatio || null === numeric) return next;
+    if ('width' === dimension) return {
+        ...next,
+        height: formatNumber(numeric / draft.aspectRatio)
+    };
+    return {
+        ...next,
+        width: formatNumber(numeric * draft.aspectRatio)
+    };
+}
+function withDocumentPictureAspectRatioLock(draft, lockAspectRatio) {
+    if (!lockAspectRatio) return {
+        ...draft,
+        lockAspectRatio: false
+    };
+    const width = numericDraft(draft.width);
+    const height = numericDraft(draft.height);
+    return {
+        ...draft,
+        lockAspectRatio: true,
+        aspectRatio: null !== width && null !== height ? validAspectRatio(width, height) : draft.aspectRatio
+    };
+}
+function documentPicturePropertiesErrors(draft) {
+    return {
+        width: imageDimensionError(draft.width),
+        height: imageDimensionError(draft.height),
+        wrapDistance: 'inline' === draft.layout || validNumber(draft.wrapDistance, 0, MAXIMUM_WRAP_DISTANCE_MILLIMETERS) ? null : '请输入 0 到 25 之间的毫米数。'
+    };
+}
+function hasDocumentPicturePropertiesErrors(errors) {
+    return Boolean(errors.width || errors.height || errors.wrapDistance);
+}
+function documentPicturePropertyChanges(initial, current) {
+    const errors = documentPicturePropertiesErrors(current);
+    if (hasDocumentPicturePropertiesErrors(errors)) return null;
+    const changes = {};
+    if (!sameDraftNumber(initial.width, current.width)) changes.width = rounded(Number(current.width) * IMAGE_PIXELS_PER_CENTIMETER);
+    if (!sameDraftNumber(initial.height, current.height)) changes.height = rounded(Number(current.height) * IMAGE_PIXELS_PER_CENTIMETER);
+    if (initial.lockAspectRatio !== current.lockAspectRatio) changes.lockAspectRatio = current.lockAspectRatio;
+    if (initial.layout !== current.layout) changes.layout = current.layout;
+    if (initial.alignment !== current.alignment) changes.alignment = current.alignment;
+    if (!sameDraftNumber(initial.wrapDistance, current.wrapDistance)) changes.wrapDistance = Number(current.wrapDistance);
+    const alternativeText = current.alternativeText.trim();
+    if (initial.alternativeText.trim() !== alternativeText) changes.alternativeText = alternativeText;
+    return Object.keys(changes).length ? changes : null;
+}
+function effectiveDimension(explicit, rendered, fallback) {
+    if (null !== explicit && Number.isFinite(explicit) && explicit > 0) return explicit;
+    if (void 0 !== rendered && Number.isFinite(rendered) && rendered > 0) return rendered;
+    return fallback;
+}
+function imageDimensionError(value) {
+    return validNumber(value, MINIMUM_IMAGE_SIZE_CENTIMETERS, MAXIMUM_IMAGE_SIZE_CENTIMETERS) ? null : '请输入 0.01 到 55.87 之间的厘米数。';
+}
+function validNumber(value, minimum, maximum) {
+    const number = numericDraft(value);
+    return null !== number && number >= minimum && number <= maximum;
+}
+function numericDraft(value) {
+    if (!value.trim()) return null;
+    const number = Number(value);
+    return Number.isFinite(number) && number >= 0 ? number : null;
+}
+function sameDraftNumber(left, right) {
+    if (!left.trim() || !right.trim()) return left === right;
+    return Number(left) === Number(right);
+}
+function validAspectRatio(width, height) {
+    const ratio = width / height;
+    return Number.isFinite(ratio) && ratio > 0 ? ratio : 1;
+}
+function document_picture_properties_dialog_model_centimeters(pixels) {
+    return formatNumber(pixels / IMAGE_PIXELS_PER_CENTIMETER);
+}
+function formatNumber(value) {
+    return Number.isFinite(value) ? value.toFixed(2).replace(/\.?0+$/, '') : '';
+}
+function rounded(value) {
+    return Math.round(100 * value) / 100;
+}
+const document_picture_properties_dialog_layoutOptions = [
+    {
+        value: 'inline',
+        label: '嵌入文字',
+        icon: Rows3
+    },
+    {
+        value: 'square',
+        label: '四周环绕',
+        icon: TextWrap
+    },
+    {
+        value: 'topBottom',
+        label: '上下环绕',
+        icon: Rows3
+    }
+];
+const alignmentOptions = [
+    {
+        value: 'left',
+        label: '左对齐',
+        icon: AlignLeft
+    },
+    {
+        value: 'center',
+        label: '居中',
+        icon: AlignCenter
+    },
+    {
+        value: 'right',
+        label: '右对齐',
+        icon: AlignRight
+    }
+];
+function DocumentPicturePropertiesControl({ editor }) {
+    const [source, setSource] = useState(null);
+    const triggerRef = useRef(null);
+    const openDialog = (event)=>{
+        const position = selectedDocumentImagePosition(editor);
+        if (null === position) return;
+        const rendered = selectedDocumentImageDimensions(editor, position);
+        triggerRef.current = event.currentTarget;
+        setSource({
+            position,
+            properties: documentImageProperties(editor),
+            renderedWidth: rendered?.width,
+            renderedHeight: rendered?.height
+        });
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(WorkOfficeRibbonButton, {
+                label: "图片属性",
+                visibleLabel: "图片属性",
+                disabled: !editor.isActive('image'),
+                onClick: openDialog,
+                children: /*#__PURE__*/ jsx(Settings2, {
+                    size: 18
+                })
+            }),
+            source && /*#__PURE__*/ jsx(DocumentPicturePropertiesDialog, {
+                editor: editor,
+                source: source,
+                restoreFocusTarget: ()=>triggerRef.current,
+                onClose: ()=>setSource(null)
+            })
+        ]
+    });
+}
+function DocumentPicturePropertiesDialog({ editor, source, restoreFocusTarget, onClose }) {
+    const [initial] = useState(()=>createDocumentPicturePropertiesDraft(source));
+    const [draft, setDraft] = useState(initial);
+    const formId = useId();
+    const alternativeTextId = useId();
+    const errors = documentPicturePropertiesErrors(draft);
+    const invalid = hasDocumentPicturePropertiesErrors(errors);
+    const submit = (event)=>{
+        event?.preventDefault();
+        if (invalid) return;
+        const changes = documentPicturePropertyChanges(initial, draft);
+        if (!changes) return void onClose();
+        if (editor.state.doc.nodeAt(source.position)?.type.name !== 'image') return void onClose();
+        const applied = editor.chain().setNodeSelection(source.position).setDocumentImageProperties(changes, {
+            restoreFocus: false
+        }).run();
+        if (applied) onClose();
+    };
+    return /*#__PURE__*/ jsx(Dialog, {
+        title: "图片属性",
+        description: "调整当前图片的大小、排列方式和辅助说明。",
+        className: "work-document-picture-properties-dialog",
+        restoreFocusTarget: restoreFocusTarget,
+        onClose: onClose,
+        footer: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(button_Button, {
+                    tone: "quiet",
+                    onClick: onClose,
+                    children: "取消"
+                }),
+                /*#__PURE__*/ jsx(button_Button, {
+                    tone: "primary",
+                    type: "submit",
+                    form: formId,
+                    disabled: invalid,
+                    children: "确定"
+                })
+            ]
+        }),
+        children: /*#__PURE__*/ jsxs("form", {
+            id: formId,
+            onSubmit: submit,
+            children: [
+                /*#__PURE__*/ jsx(PictureSizeSection, {
+                    draft: draft,
+                    errors: errors,
+                    onDraftChange: setDraft
+                }),
+                /*#__PURE__*/ jsx(PictureLayoutSection, {
+                    draft: draft,
+                    onDraftChange: setDraft
+                }),
+                /*#__PURE__*/ jsx(PictureAlignmentSection, {
+                    draft: draft,
+                    onDraftChange: setDraft
+                }),
+                /*#__PURE__*/ jsxs("label", {
+                    className: "work-document-picture-properties-alt-text",
+                    htmlFor: alternativeTextId,
+                    children: [
+                        /*#__PURE__*/ jsx("span", {
+                            children: "替代文字"
+                        }),
+                        /*#__PURE__*/ jsx(office_text_field_OfficeTextArea, {
+                            id: alternativeTextId,
+                            "aria-label": "图片替代文字",
+                            value: draft.alternativeText,
+                            maxLength: 512,
+                            placeholder: "描述图片中的关键信息；装饰性图片可留空",
+                            onChange: (event)=>{
+                                const alternativeText = event.currentTarget.value;
+                                setDraft((current)=>({
+                                        ...current,
+                                        alternativeText
+                                    }));
+                            }
+                        }),
+                        /*#__PURE__*/ jsx("small", {
+                            children: "供屏幕阅读器使用，不会显示在正文中。"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+}
+function PictureSizeSection({ draft, errors, onDraftChange }) {
+    return /*#__PURE__*/ jsxs("fieldset", {
+        className: "work-document-picture-properties-section size",
+        children: [
+            /*#__PURE__*/ jsx("legend", {
+                children: "大小"
+            }),
+            /*#__PURE__*/ jsx(PictureNumberRow, {
+                label: "宽度",
+                ariaLabel: "图片宽度（厘米）",
+                value: draft.width,
+                unit: "厘米",
+                min: 0.01,
+                max: 55.87,
+                step: 0.1,
+                invalid: Boolean(errors.width),
+                onValueChange: (width)=>onDraftChange((current)=>withDocumentPictureDimension(current, 'width', width))
+            }),
+            errors.width && /*#__PURE__*/ jsx("p", {
+                role: "alert",
+                children: errors.width
+            }),
+            /*#__PURE__*/ jsx(PictureNumberRow, {
+                label: "高度",
+                ariaLabel: "图片高度（厘米）",
+                value: draft.height,
+                unit: "厘米",
+                min: 0.01,
+                max: 55.87,
+                step: 0.1,
+                invalid: Boolean(errors.height),
+                onValueChange: (height)=>onDraftChange((current)=>withDocumentPictureDimension(current, 'height', height))
+            }),
+            errors.height && /*#__PURE__*/ jsx("p", {
+                role: "alert",
+                children: errors.height
+            }),
+            /*#__PURE__*/ jsx(OfficeCheckbox, {
+                ariaLabel: "锁定纵横比",
+                checked: draft.lockAspectRatio,
+                onCheckedChange: (locked)=>onDraftChange((current)=>withDocumentPictureAspectRatioLock(current, locked)),
+                children: "锁定纵横比"
+            })
+        ]
+    });
+}
+function PictureLayoutSection({ draft, onDraftChange }) {
+    const errors = documentPicturePropertiesErrors(draft);
+    return /*#__PURE__*/ jsxs("fieldset", {
+        className: "work-document-picture-properties-section layout",
+        children: [
+            /*#__PURE__*/ jsx("legend", {
+                children: "文字环绕"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "work-document-picture-properties-choice-grid",
+                children: document_picture_properties_dialog_layoutOptions.map((option)=>{
+                    const Icon = option.icon;
+                    return /*#__PURE__*/ jsxs("label", {
+                        children: [
+                            /*#__PURE__*/ jsx("input", {
+                                type: "radio",
+                                name: "picture-properties-layout",
+                                value: option.value,
+                                checked: draft.layout === option.value,
+                                onChange: ()=>onDraftChange((current)=>({
+                                            ...current,
+                                            layout: option.value
+                                        }))
+                            }),
+                            /*#__PURE__*/ jsxs("span", {
+                                children: [
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        size: 16,
+                                        "aria-hidden": "true"
+                                    }),
+                                    option.label
+                                ]
+                            })
+                        ]
+                    }, option.value);
+                })
+            }),
+            /*#__PURE__*/ jsx(PictureNumberRow, {
+                label: "文字距离",
+                ariaLabel: "图片与文字距离（毫米）",
+                value: draft.wrapDistance,
+                unit: "毫米",
+                min: 0,
+                max: 25,
+                step: 0.5,
+                disabled: 'inline' === draft.layout,
+                invalid: Boolean(errors.wrapDistance),
+                onValueChange: (wrapDistance)=>onDraftChange((current)=>({
+                            ...current,
+                            wrapDistance
+                        }))
+            }),
+            errors.wrapDistance && /*#__PURE__*/ jsx("p", {
+                role: "alert",
+                children: errors.wrapDistance
+            })
+        ]
+    });
+}
+function PictureAlignmentSection({ draft, onDraftChange }) {
+    return /*#__PURE__*/ jsxs("fieldset", {
+        className: "work-document-picture-properties-section position",
+        children: [
+            /*#__PURE__*/ jsx("legend", {
+                children: "位置"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "work-document-picture-properties-choice-grid",
+                children: alignmentOptions.map((option)=>{
+                    const Icon = option.icon;
+                    return /*#__PURE__*/ jsxs("label", {
+                        children: [
+                            /*#__PURE__*/ jsx("input", {
+                                type: "radio",
+                                name: "picture-properties-alignment",
+                                value: option.value,
+                                checked: draft.alignment === option.value,
+                                onChange: ()=>onDraftChange((current)=>({
+                                            ...current,
+                                            alignment: option.value
+                                        }))
+                            }),
+                            /*#__PURE__*/ jsxs("span", {
+                                children: [
+                                    /*#__PURE__*/ jsx(Icon, {
+                                        size: 16,
+                                        "aria-hidden": "true"
+                                    }),
+                                    option.label
+                                ]
+                            })
+                        ]
+                    }, option.value);
+                })
+            })
+        ]
+    });
+}
+function PictureNumberRow({ label, ariaLabel, value, unit, min, max, step, disabled = false, invalid, onValueChange }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "work-document-picture-properties-number-row",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(OfficeNumberField, {
+                ariaLabel: ariaLabel,
+                value: value,
+                min: min,
+                max: max,
+                step: step,
+                disabled: disabled,
+                validationInvalid: invalid,
+                onValueChange: onValueChange
+            }),
+            /*#__PURE__*/ jsx("small", {
+                children: unit
+            })
+        ]
+    });
+}
+function selectedDocumentImagePosition(editor) {
+    const selection = editor.state.selection;
+    return selection instanceof NodeSelection && 'image' === selection.node.type.name ? selection.from : null;
+}
+function selectedDocumentImageDimensions(editor, position) {
+    const node = editor.view.nodeDOM(position);
+    const image = node instanceof HTMLImageElement ? node : node instanceof HTMLElement ? node.querySelector('img') : null;
+    if (!(image instanceof HTMLImageElement)) return null;
+    const bounds = image.getBoundingClientRect();
+    const width = bounds.width || image.width || image.naturalWidth;
+    const height = bounds.height || image.height || image.naturalHeight;
+    return width > 0 && height > 0 ? {
+        width,
+        height
+    } : null;
+}
+const imageWrapDistanceOptions = [
+    {
+        value: '0',
+        label: '无间距'
+    },
     {
         value: '2',
         label: '2 毫米'
@@ -7465,7 +9036,6 @@ function DocumentPictureRibbon({ editor }) {
     const image = documentImageLayoutOptions(editor);
     const imageSelected = editor.isActive('image');
     const wrapDistanceValue = String(image.wrapDistance);
-    const officeDialog = useOfficeDialog();
     const updateLayout = (layout)=>editor.commands.setDocumentImageLayoutOptions({
             layout
         });
@@ -7486,143 +9056,1034 @@ function DocumentPictureRibbon({ editor }) {
                             size: 18
                         })
                     }),
-                    /*#__PURE__*/ jsx(PictureButton, {
-                        label: "四周环绕",
-                        active: 'square' === image.layout,
-                        disabled: !imageSelected,
-                        onClick: ()=>updateLayout('square'),
-                        children: /*#__PURE__*/ jsx(TextWrap, {
-                            size: 18
-                        })
+                    /*#__PURE__*/ jsx(PictureButton, {
+                        label: "四周环绕",
+                        active: 'square' === image.layout,
+                        disabled: !imageSelected,
+                        onClick: ()=>updateLayout('square'),
+                        children: /*#__PURE__*/ jsx(TextWrap, {
+                            size: 18
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(PictureButton, {
+                        label: "上下环绕",
+                        active: 'topBottom' === image.layout,
+                        disabled: !imageSelected,
+                        onClick: ()=>updateLayout('topBottom'),
+                        children: /*#__PURE__*/ jsx(Rows3, {
+                            size: 18
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs(WorkOfficeRibbonGroup, {
+                label: "位置",
+                children: [
+                    /*#__PURE__*/ jsx(PictureButton, {
+                        label: "左对齐",
+                        active: 'left' === image.alignment,
+                        disabled: !imageSelected,
+                        onClick: ()=>updateAlignment('left'),
+                        children: /*#__PURE__*/ jsx(AlignLeft, {
+                            size: 18
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(PictureButton, {
+                        label: "居中",
+                        active: 'center' === image.alignment,
+                        disabled: !imageSelected,
+                        onClick: ()=>updateAlignment('center'),
+                        children: /*#__PURE__*/ jsx(AlignCenter, {
+                            size: 18
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(PictureButton, {
+                        label: "右对齐",
+                        active: 'right' === image.alignment,
+                        disabled: !imageSelected,
+                        onClick: ()=>updateAlignment('right'),
+                        children: /*#__PURE__*/ jsx(AlignRight, {
+                            size: 18
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(WorkOfficeRibbonGroup, {
+                label: "与文字距离",
+                children: /*#__PURE__*/ jsx(OfficeSelect, {
+                    ariaLabel: "图片与文字距离",
+                    value: wrapDistanceValue,
+                    options: imageWrapDistanceOptionsForValue(wrapDistanceValue),
+                    disabled: !imageSelected || 'inline' === image.layout,
+                    onValueChange: (value)=>editor.commands.setDocumentImageLayoutOptions({
+                            wrapDistance: Number(value)
+                        })
+                })
+            }),
+            /*#__PURE__*/ jsxs(WorkOfficeRibbonGroup, {
+                label: "图片",
+                children: [
+                    /*#__PURE__*/ jsx(DocumentPicturePropertiesControl, {
+                        editor: editor
+                    }),
+                    /*#__PURE__*/ jsx(PictureButton, {
+                        label: "删除图片",
+                        disabled: !imageSelected,
+                        onClick: ()=>editor.chain().focus().deleteSelection().run(),
+                        children: /*#__PURE__*/ jsx(Trash2, {
+                            size: 18
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function imageWrapDistanceOptionsForValue(value) {
+    if (imageWrapDistanceOptions.some((option)=>option.value === value)) return imageWrapDistanceOptions;
+    return [
+        ...imageWrapDistanceOptions,
+        {
+            value,
+            label: `${value} 毫米`
+        }
+    ];
+}
+function PictureButton({ label, active = false, disabled = false, onClick, children }) {
+    return /*#__PURE__*/ jsx(WorkOfficeRibbonButton, {
+        label: label,
+        displayLabel: true,
+        active: active,
+        disabled: disabled,
+        onClick: onClick,
+        children: children
+    });
+}
+function DocumentTableInsertPopover({ editor }) {
+    return /*#__PURE__*/ jsx(OfficeTableInsertPopover, {
+        className: "work-document-table-insert-popover",
+        label: "插入表格",
+        onInsert: (dimensions)=>editor.commands.insertDocumentTable(dimensions)
+    });
+}
+const PIXELS_PER_CENTIMETER = 96 / 2.54;
+const document_table_margins_popover_marginFields = [
+    {
+        side: 'top',
+        label: '上',
+        ariaLabel: '单元格上边距（厘米）'
+    },
+    {
+        side: 'bottom',
+        label: '下',
+        ariaLabel: '单元格下边距（厘米）'
+    },
+    {
+        side: 'left',
+        label: '左',
+        ariaLabel: '单元格左边距（厘米）'
+    },
+    {
+        side: 'right',
+        label: '右',
+        ariaLabel: '单元格右边距（厘米）'
+    }
+];
+function DocumentTableMarginsPopover({ editor }) {
+    const margins = currentMargins(editor);
+    const [open, setOpen] = useState(false);
+    const [drafts, setDrafts] = useState(()=>marginDrafts(margins));
+    const customized = !sameMargins(margins, DEFAULT_DOCUMENT_TABLE_CELL_MARGINS);
+    const commit = (side, rawValue)=>{
+        const centimeters = Number(rawValue);
+        if (!Number.isFinite(centimeters) || centimeters < 0 || centimeters > 5) return void setDrafts(marginDrafts(currentMargins(editor)));
+        const value = Math.round(centimeters * PIXELS_PER_CENTIMETER * 100) / 100;
+        const next = {
+            ...currentMargins(editor),
+            [side]: value
+        };
+        editor.commands.setDocumentTableCellMargins(next) ? setDrafts(marginDrafts(next)) : setDrafts(marginDrafts(currentMargins(editor)));
+    };
+    const restoreDefault = ()=>{
+        const next = {
+            ...DEFAULT_DOCUMENT_TABLE_CELL_MARGINS
+        };
+        if (editor.commands.setDocumentTableCellMargins(next)) setDrafts(marginDrafts(next));
+    };
+    return /*#__PURE__*/ jsx(Popover, {
+        label: "单元格边距",
+        panelLabel: "单元格边距设置",
+        panelRole: "dialog",
+        portal: true,
+        open: open,
+        onOpenChange: (nextOpen)=>{
+            setOpen(nextOpen);
+            if (nextOpen) setDrafts(marginDrafts(currentMargins(editor)));
+        },
+        focusFirstOnOpen: true,
+        className: "work-document-table-margins-popover",
+        panelClassName: "work-document-table-margins-panel",
+        trigger: (triggerProps, { open: popoverOpen })=>/*#__PURE__*/ jsxs("button", {
+                ...triggerProps,
+                className: `with-label${customized || popoverOpen ? ' active' : ''}`,
+                "aria-pressed": customized,
+                children: [
+                    /*#__PURE__*/ jsx(Grid2X2, {
+                        size: 18
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: "单元格边距"
+                    })
+                ]
+            }),
+        children: /*#__PURE__*/ jsxs("fieldset", {
+            children: [
+                /*#__PURE__*/ jsx("legend", {
+                    children: "单元格边距"
+                }),
+                /*#__PURE__*/ jsx("p", {
+                    children: "设置文字到单元格边框的距离。"
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "work-document-table-margins-grid",
+                    children: document_table_margins_popover_marginFields.map(({ side, label, ariaLabel })=>/*#__PURE__*/ jsxs("fieldset", {
+                            className: "work-document-table-margin-field",
+                            children: [
+                                /*#__PURE__*/ jsxs("legend", {
+                                    className: "sr-only",
+                                    children: [
+                                        label,
+                                        "边距"
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    "aria-hidden": "true",
+                                    children: label
+                                }),
+                                /*#__PURE__*/ jsx(OfficeNumberField, {
+                                    ariaLabel: ariaLabel,
+                                    value: drafts[side],
+                                    min: 0,
+                                    max: 5,
+                                    step: 0.05,
+                                    onValueChange: (value)=>setDrafts((current)=>({
+                                                ...current,
+                                                [side]: value
+                                            })),
+                                    onCommit: (value)=>commit(side, value),
+                                    onCancel: ()=>setDrafts(marginDrafts(currentMargins(editor)))
+                                }),
+                                /*#__PURE__*/ jsx("small", {
+                                    children: "厘米"
+                                })
+                            ]
+                        }, side))
+                }),
+                /*#__PURE__*/ jsx("button", {
+                    type: "button",
+                    className: "work-document-table-margins-reset",
+                    disabled: !customized,
+                    onClick: restoreDefault,
+                    children: "恢复标准边距"
+                })
+            ]
+        })
+    });
+}
+function currentMargins(editor) {
+    return documentTableSizing(editor.state)?.cellMargins ?? {
+        ...DEFAULT_DOCUMENT_TABLE_CELL_MARGINS
+    };
+}
+function marginDrafts(margins) {
+    return {
+        top: document_table_margins_popover_centimeters(margins.top),
+        right: document_table_margins_popover_centimeters(margins.right),
+        bottom: document_table_margins_popover_centimeters(margins.bottom),
+        left: document_table_margins_popover_centimeters(margins.left)
+    };
+}
+function document_table_margins_popover_centimeters(pixels) {
+    return (pixels / PIXELS_PER_CENTIMETER).toFixed(2).replace(/\.?0+$/, '');
+}
+function sameMargins(left, right) {
+    return document_table_margins_popover_marginFields.every(({ side })=>Math.abs(left[side] - right[side]) < 0.01);
+}
+const document_table_properties_dialog_model_PIXELS_PER_CENTIMETER = 96 / 2.54;
+const FALLBACK_TABLE_WIDTH_CENTIMETERS = 15;
+const FALLBACK_ROW_HEIGHT_CENTIMETERS = 0.95;
+const FALLBACK_COLUMN_WIDTH_CENTIMETERS = 3.18;
+const marginSides = [
+    'top',
+    'right',
+    'bottom',
+    'left'
+];
+function createDocumentTablePropertiesDraft(source) {
+    const widthType = source.sizing.preferredWidthType;
+    const effectiveMargins = effectiveCellMargins(source.cellFormat, source.sizing.cellMargins);
+    return {
+        table: {
+            widthType,
+            width: 'percent' === widthType ? document_table_properties_dialog_model_formatNumber(source.sizing.preferredWidth ?? 100) : 'pixels' === widthType ? document_table_properties_dialog_model_centimeters(source.sizing.preferredWidth ?? source.renderedTableWidth ?? FALLBACK_TABLE_WIDTH_CENTIMETERS * document_table_properties_dialog_model_PIXELS_PER_CENTIMETER) : '',
+            alignment: source.sizing.alignment,
+            indent: document_table_properties_dialog_model_centimeters(source.sizing.indent)
+        },
+        row: {
+            heightEnabled: null !== source.sizing.rowHeight,
+            height: document_table_properties_dialog_model_centimeters(source.sizing.rowHeight ?? source.renderedRowHeight ?? FALLBACK_ROW_HEIGHT_CENTIMETERS * document_table_properties_dialog_model_PIXELS_PER_CENTIMETER),
+            heightRule: source.sizing.rowHeightRule ?? 'atLeast',
+            cantSplit: source.rowOptions.cantSplit,
+            repeatHeader: source.rowOptions.repeatHeader
+        },
+        column: {
+            width: document_table_properties_dialog_model_centimeters(source.renderedColumnWidth ?? source.sizing.columnWidth ?? FALLBACK_COLUMN_WIDTH_CENTIMETERS * document_table_properties_dialog_model_PIXELS_PER_CENTIMETER)
+        },
+        cell: {
+            verticalAlign: source.cellFormat.verticalAlign,
+            useTableMargins: null === source.cellFormat.margins,
+            margins: document_table_properties_dialog_model_marginDrafts(effectiveMargins)
+        }
+    };
+}
+function documentTablePropertiesErrors(draft) {
+    const cellMargins = {};
+    if (!draft.cell.useTableMargins) {
+        for (const side of marginSides)if (!document_table_properties_dialog_model_validNumber(draft.cell.margins[side], 0, 5)) cellMargins[side] = '请输入 0 到 5 之间的厘米数。';
+    }
+    return {
+        tableWidth: tableWidthError(draft),
+        tableIndent: tableIndentError(draft),
+        rowHeight: draft.row.heightEnabled ? dimensionError(draft.row.height) : null,
+        columnWidth: dimensionError(draft.column.width),
+        cellMargins
+    };
+}
+function hasDocumentTablePropertiesErrors(errors) {
+    return Boolean(errors.tableWidth || errors.tableIndent || errors.rowHeight || errors.columnWidth || Object.keys(errors.cellMargins).length);
+}
+function draftForTableWidthType(current, widthType, renderedTableWidth) {
+    if (widthType === current.table.widthType) return current;
+    const width = 'auto' === widthType ? '' : 'percent' === widthType ? '100' : document_table_properties_dialog_model_centimeters(renderedTableWidth ?? FALLBACK_TABLE_WIDTH_CENTIMETERS * document_table_properties_dialog_model_PIXELS_PER_CENTIMETER);
+    return {
+        ...current,
+        table: {
+            ...current.table,
+            widthType,
+            width
+        }
+    };
+}
+function documentTablePropertyChanges(initial, current, source) {
+    const errors = documentTablePropertiesErrors(current);
+    if (hasDocumentTablePropertiesErrors(errors)) return null;
+    const changes = {};
+    const tableChanged = initial.table.widthType !== current.table.widthType || !document_table_properties_dialog_model_sameDraftNumber(initial.table.width, current.table.width) || initial.table.alignment !== current.table.alignment || !document_table_properties_dialog_model_sameDraftNumber(initial.table.indent, current.table.indent);
+    if (tableChanged) changes.table = tablePropertiesForChanges(initial, current, source.sizing);
+    const rowChanged = initial.row.heightEnabled !== current.row.heightEnabled || current.row.heightEnabled && !document_table_properties_dialog_model_sameDraftNumber(initial.row.height, current.row.height) || initial.row.heightRule !== current.row.heightRule || initial.row.cantSplit !== current.row.cantSplit || source.canRepeatHeader && initial.row.repeatHeader !== current.row.repeatHeader;
+    if (rowChanged) changes.row = {
+        height: rowHeightForChanges(initial, current, source.sizing),
+        heightRule: current.row.heightRule,
+        cantSplit: current.row.cantSplit,
+        ...source.canRepeatHeader ? {
+            repeatHeader: current.row.repeatHeader
+        } : {}
+    };
+    if (!document_table_properties_dialog_model_sameDraftNumber(initial.column.width, current.column.width)) changes.column = {
+        width: document_table_properties_dialog_model_rounded(Number(current.column.width) * document_table_properties_dialog_model_PIXELS_PER_CENTIMETER),
+        renderedColumnWidths: source.renderedColumnWidths
+    };
+    const marginsChanged = initial.cell.useTableMargins !== current.cell.useTableMargins || !current.cell.useTableMargins && marginSides.some((side)=>!document_table_properties_dialog_model_sameDraftNumber(initial.cell.margins[side], current.cell.margins[side]));
+    if (initial.cell.verticalAlign !== current.cell.verticalAlign || marginsChanged) changes.cell = {
+        verticalAlign: current.cell.verticalAlign,
+        margins: cellMarginsForChanges(initial, current, source)
+    };
+    return Object.keys(changes).length ? changes : null;
+}
+function tablePropertiesForChanges(initial, current, sizing) {
+    const widthType = current.table.widthType;
+    const preserveWidth = initial.table.widthType === widthType && document_table_properties_dialog_model_sameDraftNumber(initial.table.width, current.table.width) && sizing.preferredWidthType === widthType;
+    const widthValue = 'auto' === widthType ? null : preserveWidth && null !== sizing.preferredWidth ? sizing.preferredWidth : 'percent' === widthType ? Number(current.table.width) : Number(current.table.width) * document_table_properties_dialog_model_PIXELS_PER_CENTIMETER;
+    return {
+        width: {
+            type: widthType,
+            value: null === widthValue ? null : document_table_properties_dialog_model_rounded(widthValue)
+        },
+        alignment: current.table.alignment,
+        indent: document_table_properties_dialog_model_sameDraftNumber(initial.table.indent, current.table.indent) ? sizing.indent : document_table_properties_dialog_model_rounded(Number(current.table.indent) * document_table_properties_dialog_model_PIXELS_PER_CENTIMETER)
+    };
+}
+function rowHeightForChanges(initial, current, sizing) {
+    if (!current.row.heightEnabled) return null;
+    if (initial.row.heightEnabled && document_table_properties_dialog_model_sameDraftNumber(initial.row.height, current.row.height) && null !== sizing.rowHeight) return sizing.rowHeight;
+    return document_table_properties_dialog_model_rounded(Number(current.row.height) * document_table_properties_dialog_model_PIXELS_PER_CENTIMETER);
+}
+function cellMarginsForChanges(initial, current, source) {
+    if (current.cell.useTableMargins) return null;
+    const margins = initial.cell.useTableMargins ? {
+        ...source.sizing.cellMargins
+    } : {
+        ...source.cellFormat.margins ?? {}
+    };
+    for (const side of marginSides)if (!document_table_properties_dialog_model_sameDraftNumber(initial.cell.margins[side], current.cell.margins[side])) margins[side] = document_table_properties_dialog_model_rounded(Number(current.cell.margins[side]) * document_table_properties_dialog_model_PIXELS_PER_CENTIMETER);
+    return margins;
+}
+function effectiveCellMargins(format, tableMargins) {
+    return {
+        top: format.margins?.top ?? tableMargins.top,
+        right: format.margins?.right ?? tableMargins.right,
+        bottom: format.margins?.bottom ?? tableMargins.bottom,
+        left: format.margins?.left ?? tableMargins.left
+    };
+}
+function document_table_properties_dialog_model_marginDrafts(margins) {
+    return {
+        top: document_table_properties_dialog_model_centimeters(margins.top),
+        right: document_table_properties_dialog_model_centimeters(margins.right),
+        bottom: document_table_properties_dialog_model_centimeters(margins.bottom),
+        left: document_table_properties_dialog_model_centimeters(margins.left)
+    };
+}
+function tableWidthError(draft) {
+    if ('auto' === draft.table.widthType) return null;
+    if ('percent' === draft.table.widthType) return document_table_properties_dialog_model_validNumber(draft.table.width, 1, 100) ? null : '请输入 1 到 100 之间的百分比。';
+    return document_table_properties_dialog_model_validNumber(draft.table.width, 0.5, 30) ? null : '请输入 0.5 到 30 之间的厘米数。';
+}
+function tableIndentError(draft) {
+    if ('left' !== draft.table.alignment) return null;
+    return document_table_properties_dialog_model_validNumber(draft.table.indent, 0, 30) ? null : '请输入 0 到 30 之间的厘米数。';
+}
+function dimensionError(value) {
+    return document_table_properties_dialog_model_validNumber(value, 0.5, 30) ? null : '请输入 0.5 到 30 之间的厘米数。';
+}
+function document_table_properties_dialog_model_validNumber(value, minimum, maximum) {
+    if (!value.trim()) return false;
+    const numeric = Number(value);
+    return Number.isFinite(numeric) && numeric >= minimum && numeric <= maximum;
+}
+function document_table_properties_dialog_model_sameDraftNumber(left, right) {
+    if (!left.trim() || !right.trim()) return left === right;
+    return Number(left) === Number(right);
+}
+function document_table_properties_dialog_model_centimeters(pixels) {
+    return document_table_properties_dialog_model_formatNumber(pixels / document_table_properties_dialog_model_PIXELS_PER_CENTIMETER);
+}
+function document_table_properties_dialog_model_formatNumber(value) {
+    return Number.isFinite(value) ? value.toFixed(2).replace(/\.?0+$/, '') : '';
+}
+function document_table_properties_dialog_model_rounded(value) {
+    return Math.round(100 * value) / 100;
+}
+const tabs = [
+    {
+        value: 'table',
+        label: '表格'
+    },
+    {
+        value: 'row',
+        label: '行'
+    },
+    {
+        value: 'column',
+        label: '列'
+    },
+    {
+        value: 'cell',
+        label: '单元格'
+    }
+];
+const widthOptions = [
+    {
+        value: 'auto',
+        label: '自动'
+    },
+    {
+        value: 'percent',
+        label: '百分比'
+    },
+    {
+        value: 'pixels',
+        label: '厘米'
+    }
+];
+const document_table_properties_dialog_sections_alignmentOptions = [
+    {
+        value: 'left',
+        label: '左对齐',
+        icon: AlignLeft
+    },
+    {
+        value: 'center',
+        label: '居中',
+        icon: AlignCenter
+    },
+    {
+        value: 'right',
+        label: '右对齐',
+        icon: AlignRight
+    }
+];
+const rowHeightRuleOptions = [
+    {
+        value: 'atLeast',
+        label: '最小值'
+    },
+    {
+        value: 'exact',
+        label: '固定值'
+    }
+];
+const verticalAlignmentOptions = [
+    {
+        value: 'top',
+        label: '顶端',
+        icon: AlignVerticalJustifyStart
+    },
+    {
+        value: 'middle',
+        label: '居中',
+        icon: AlignVerticalJustifyCenter
+    },
+    {
+        value: 'bottom',
+        label: '底端',
+        icon: AlignVerticalJustifyEnd
+    }
+];
+const document_table_properties_dialog_sections_marginFields = [
+    {
+        side: 'top',
+        label: '上',
+        ariaLabel: '当前单元格上边距（厘米）'
+    },
+    {
+        side: 'bottom',
+        label: '下',
+        ariaLabel: '当前单元格下边距（厘米）'
+    },
+    {
+        side: 'left',
+        label: '左',
+        ariaLabel: '当前单元格左边距（厘米）'
+    },
+    {
+        side: 'right',
+        label: '右',
+        ariaLabel: '当前单元格右边距（厘米）'
+    }
+];
+function DocumentTablePropertiesTabs({ activeTab, idBase, onTabChange }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: "work-document-table-properties-tabs",
+        role: "tablist",
+        "aria-label": "表格属性分类",
+        children: tabs.map((tab)=>/*#__PURE__*/ jsx("button", {
+                type: "button",
+                id: `${idBase}-${tab.value}-tab`,
+                role: "tab",
+                "aria-controls": `${idBase}-${tab.value}-panel`,
+                "aria-selected": activeTab === tab.value,
+                tabIndex: activeTab === tab.value ? 0 : -1,
+                onClick: ()=>onTabChange(tab.value),
+                children: tab.label
+            }, tab.value))
+    });
+}
+function DocumentTablePropertiesPanel({ activeTab, idBase, ...props }) {
+    return /*#__PURE__*/ jsxs("section", {
+        id: `${idBase}-${activeTab}-panel`,
+        className: "work-document-table-properties-panel",
+        role: "tabpanel",
+        "aria-labelledby": `${idBase}-${activeTab}-tab`,
+        tabIndex: -1,
+        children: [
+            'table' === activeTab && /*#__PURE__*/ jsx(TableSection, {
+                ...props
+            }),
+            'row' === activeTab && /*#__PURE__*/ jsx(RowSection, {
+                ...props
+            }),
+            'column' === activeTab && /*#__PURE__*/ jsx(ColumnSection, {
+                ...props
+            }),
+            'cell' === activeTab && /*#__PURE__*/ jsx(CellSection, {
+                ...props
+            })
+        ]
+    });
+}
+function TableSection({ draft, setDraft, errors, source }) {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("fieldset", {
+                className: "work-document-table-properties-section",
+                children: [
+                    /*#__PURE__*/ jsx("legend", {
+                        children: "首选宽度"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "work-document-table-properties-choice-grid width",
+                        children: widthOptions.map((option)=>/*#__PURE__*/ jsxs("label", {
+                                children: [
+                                    /*#__PURE__*/ jsx("input", {
+                                        type: "radio",
+                                        name: "table-properties-width",
+                                        value: option.value,
+                                        checked: draft.table.widthType === option.value,
+                                        "data-autofocus": draft.table.widthType === option.value || void 0,
+                                        onChange: ()=>setDraft((current)=>draftForTableWidthType(current, option.value, source.renderedTableWidth))
+                                    }),
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: option.label
+                                    })
+                                ]
+                            }, option.value))
+                    }),
+                    'auto' !== draft.table.widthType && /*#__PURE__*/ jsx(NumberRow, {
+                        label: "宽度",
+                        ariaLabel: 'percent' === draft.table.widthType ? '表格宽度（百分比）' : '表格宽度（厘米）',
+                        value: draft.table.width,
+                        unit: 'percent' === draft.table.widthType ? '%' : '厘米',
+                        min: 'percent' === draft.table.widthType ? 1 : 0.5,
+                        max: 'percent' === draft.table.widthType ? 100 : 30,
+                        step: 'percent' === draft.table.widthType ? 1 : 0.1,
+                        invalid: Boolean(errors.tableWidth),
+                        onValueChange: (width)=>setDraft((current)=>({
+                                    ...current,
+                                    table: {
+                                        ...current.table,
+                                        width
+                                    }
+                                }))
+                    }),
+                    errors.tableWidth && /*#__PURE__*/ jsx("p", {
+                        role: "alert",
+                        children: errors.tableWidth
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("fieldset", {
+                className: "work-document-table-properties-section",
+                children: [
+                    /*#__PURE__*/ jsx("legend", {
+                        children: "位置"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "work-document-table-properties-choice-grid alignment",
+                        children: document_table_properties_dialog_sections_alignmentOptions.map((option)=>{
+                            const Icon = option.icon;
+                            return /*#__PURE__*/ jsxs("label", {
+                                children: [
+                                    /*#__PURE__*/ jsx("input", {
+                                        type: "radio",
+                                        name: "table-properties-alignment",
+                                        value: option.value,
+                                        checked: draft.table.alignment === option.value,
+                                        onChange: ()=>setDraft((current)=>({
+                                                    ...current,
+                                                    table: {
+                                                        ...current.table,
+                                                        alignment: option.value
+                                                    }
+                                                }))
+                                    }),
+                                    /*#__PURE__*/ jsxs("span", {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Icon, {
+                                                size: 16,
+                                                "aria-hidden": "true"
+                                            }),
+                                            option.label
+                                        ]
+                                    })
+                                ]
+                            }, option.value);
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(NumberRow, {
+                        label: "左缩进",
+                        ariaLabel: "表格左缩进（厘米）",
+                        value: draft.table.indent,
+                        unit: "厘米",
+                        min: 0,
+                        max: 30,
+                        step: 0.1,
+                        disabled: 'left' !== draft.table.alignment,
+                        invalid: Boolean(errors.tableIndent),
+                        onValueChange: (indent)=>setDraft((current)=>({
+                                    ...current,
+                                    table: {
+                                        ...current.table,
+                                        indent
+                                    }
+                                }))
+                    }),
+                    errors.tableIndent && /*#__PURE__*/ jsx("p", {
+                        role: "alert",
+                        children: errors.tableIndent
+                    })
+                ]
+            })
+        ]
+    });
+}
+function RowSection({ draft, setDraft, errors, source }) {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("fieldset", {
+                className: "work-document-table-properties-section",
+                children: [
+                    /*#__PURE__*/ jsx("legend", {
+                        children: "当前行尺寸"
+                    }),
+                    /*#__PURE__*/ jsx(OfficeCheckbox, {
+                        ariaLabel: "指定行高",
+                        checked: draft.row.heightEnabled,
+                        onCheckedChange: (heightEnabled)=>setDraft((current)=>({
+                                    ...current,
+                                    row: {
+                                        ...current.row,
+                                        heightEnabled
+                                    }
+                                })),
+                        children: "指定行高"
+                    }),
+                    /*#__PURE__*/ jsx(NumberRow, {
+                        label: "行高",
+                        ariaLabel: "当前行高（厘米）",
+                        value: draft.row.height,
+                        unit: "厘米",
+                        min: 0.5,
+                        max: 30,
+                        step: 0.1,
+                        disabled: !draft.row.heightEnabled,
+                        invalid: Boolean(errors.rowHeight),
+                        onValueChange: (height)=>setDraft((current)=>({
+                                    ...current,
+                                    row: {
+                                        ...current.row,
+                                        height
+                                    }
+                                }))
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "work-document-table-properties-select-row",
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                children: "行高规则"
+                            }),
+                            /*#__PURE__*/ jsx(OfficeSelect, {
+                                ariaLabel: "行高规则",
+                                value: draft.row.heightRule,
+                                options: rowHeightRuleOptions,
+                                disabled: !draft.row.heightEnabled,
+                                onValueChange: (heightRule)=>setDraft((current)=>({
+                                            ...current,
+                                            row: {
+                                                ...current.row,
+                                                heightRule
+                                            }
+                                        }))
+                            })
+                        ]
                     }),
-                    /*#__PURE__*/ jsx(PictureButton, {
-                        label: "上下环绕",
-                        active: 'topBottom' === image.layout,
-                        disabled: !imageSelected,
-                        onClick: ()=>updateLayout('topBottom'),
-                        children: /*#__PURE__*/ jsx(Rows3, {
-                            size: 18
-                        })
+                    errors.rowHeight && /*#__PURE__*/ jsx("p", {
+                        role: "alert",
+                        children: errors.rowHeight
                     })
                 ]
             }),
-            /*#__PURE__*/ jsxs(WorkOfficeRibbonGroup, {
-                label: "位置",
+            /*#__PURE__*/ jsxs("fieldset", {
+                className: "work-document-table-properties-section",
                 children: [
-                    /*#__PURE__*/ jsx(PictureButton, {
-                        label: "左对齐",
-                        active: 'left' === image.alignment,
-                        disabled: !imageSelected,
-                        onClick: ()=>updateAlignment('left'),
-                        children: /*#__PURE__*/ jsx(AlignLeft, {
-                            size: 18
-                        })
-                    }),
-                    /*#__PURE__*/ jsx(PictureButton, {
-                        label: "居中",
-                        active: 'center' === image.alignment,
-                        disabled: !imageSelected,
-                        onClick: ()=>updateAlignment('center'),
-                        children: /*#__PURE__*/ jsx(AlignCenter, {
-                            size: 18
-                        })
+                    /*#__PURE__*/ jsx("legend", {
+                        children: "分页"
                     }),
-                    /*#__PURE__*/ jsx(PictureButton, {
-                        label: "右对齐",
-                        active: 'right' === image.alignment,
-                        disabled: !imageSelected,
-                        onClick: ()=>updateAlignment('right'),
-                        children: /*#__PURE__*/ jsx(AlignRight, {
-                            size: 18
-                        })
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "work-document-table-properties-checkboxes",
+                        children: [
+                            /*#__PURE__*/ jsx(OfficeCheckbox, {
+                                ariaLabel: "允许跨页断行",
+                                checked: !draft.row.cantSplit,
+                                onCheckedChange: (allowSplit)=>setDraft((current)=>({
+                                            ...current,
+                                            row: {
+                                                ...current.row,
+                                                cantSplit: !allowSplit
+                                            }
+                                        })),
+                                children: "允许跨页断行"
+                            }),
+                            /*#__PURE__*/ jsx(OfficeCheckbox, {
+                                ariaLabel: "在各页顶端重复标题行",
+                                checked: draft.row.repeatHeader,
+                                disabled: !source.canRepeatHeader,
+                                onCheckedChange: (repeatHeader)=>setDraft((current)=>({
+                                            ...current,
+                                            row: {
+                                                ...current.row,
+                                                repeatHeader
+                                            }
+                                        })),
+                                children: "在各页顶端重复标题行"
+                            })
+                        ]
                     })
                 ]
+            })
+        ]
+    });
+}
+function ColumnSection({ draft, setDraft, errors }) {
+    return /*#__PURE__*/ jsxs("fieldset", {
+        className: "work-document-table-properties-section",
+        children: [
+            /*#__PURE__*/ jsx("legend", {
+                children: "当前列尺寸"
             }),
-            /*#__PURE__*/ jsx(WorkOfficeRibbonGroup, {
-                label: "与文字距离",
-                children: /*#__PURE__*/ jsx(OfficeSelect, {
-                    ariaLabel: "图片与文字距离",
-                    value: wrapDistanceValue,
-                    options: imageWrapDistanceOptionsForValue(wrapDistanceValue),
-                    disabled: !imageSelected || 'inline' === image.layout,
-                    onValueChange: (value)=>editor.commands.setDocumentImageLayoutOptions({
-                            wrapDistance: Number(value)
-                        })
-                })
+            /*#__PURE__*/ jsx(NumberRow, {
+                label: "列宽",
+                ariaLabel: "当前列宽（厘米）",
+                value: draft.column.width,
+                unit: "厘米",
+                min: 0.5,
+                max: 30,
+                step: 0.1,
+                invalid: Boolean(errors.columnWidth),
+                onValueChange: (width)=>setDraft((current)=>({
+                            ...current,
+                            column: {
+                                width
+                            }
+                        }))
             }),
-            /*#__PURE__*/ jsxs(WorkOfficeRibbonGroup, {
-                label: "图片",
+            errors.columnWidth && /*#__PURE__*/ jsx("p", {
+                role: "alert",
+                children: errors.columnWidth
+            })
+        ]
+    });
+}
+function CellSection({ draft, setDraft, errors }) {
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("fieldset", {
+                className: "work-document-table-properties-section",
                 children: [
-                    /*#__PURE__*/ jsx(PictureButton, {
-                        label: "替代文字",
-                        disabled: !imageSelected,
-                        onClick: ()=>{
-                            const imagePosition = selectedDocumentImagePosition(editor);
-                            officeDialog.prompt({
-                                title: '图片说明',
-                                description: '简要描述图片中的关键信息，留空表示装饰性图片。',
-                                fieldLabel: '图片替代文字',
-                                initialValue: documentImageAlternativeText(editor),
-                                multiline: true,
-                                confirmLabel: '保存'
-                            }).then((value)=>{
-                                if (!restoreDocumentImageSelection(editor, imagePosition)) return;
-                                if (null !== value) editor.commands.setDocumentImageAlternativeText(value, {
-                                    restoreFocus: false
-                                });
-                            });
-                        },
-                        children: /*#__PURE__*/ jsx(ScanText, {
-                            size: 18
-                        })
+                    /*#__PURE__*/ jsx("legend", {
+                        children: "垂直对齐"
                     }),
-                    /*#__PURE__*/ jsx(PictureButton, {
-                        label: "删除图片",
-                        disabled: !imageSelected,
-                        onClick: ()=>editor.chain().focus().deleteSelection().run(),
-                        children: /*#__PURE__*/ jsx(Trash2, {
-                            size: 18
+                    /*#__PURE__*/ jsx("div", {
+                        className: "work-document-table-properties-choice-grid alignment",
+                        children: verticalAlignmentOptions.map((option)=>{
+                            const Icon = option.icon;
+                            return /*#__PURE__*/ jsxs("label", {
+                                children: [
+                                    /*#__PURE__*/ jsx("input", {
+                                        type: "radio",
+                                        name: "table-properties-vertical-alignment",
+                                        value: option.value,
+                                        checked: draft.cell.verticalAlign === option.value,
+                                        onChange: ()=>setDraft((current)=>({
+                                                    ...current,
+                                                    cell: {
+                                                        ...current.cell,
+                                                        verticalAlign: option.value
+                                                    }
+                                                }))
+                                    }),
+                                    /*#__PURE__*/ jsxs("span", {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Icon, {
+                                                size: 16,
+                                                "aria-hidden": "true"
+                                            }),
+                                            option.label
+                                        ]
+                                    })
+                                ]
+                            }, option.value);
                         })
                     })
                 ]
             }),
-            officeDialog.dialog
+            /*#__PURE__*/ jsxs("fieldset", {
+                className: "work-document-table-properties-section",
+                children: [
+                    /*#__PURE__*/ jsx("legend", {
+                        children: "单元格边距"
+                    }),
+                    /*#__PURE__*/ jsx(OfficeCheckbox, {
+                        ariaLabel: "使用表格默认边距",
+                        checked: draft.cell.useTableMargins,
+                        onCheckedChange: (useTableMargins)=>setDraft((current)=>({
+                                    ...current,
+                                    cell: {
+                                        ...current.cell,
+                                        useTableMargins
+                                    }
+                                })),
+                        children: "使用表格默认边距"
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "work-document-table-properties-margin-grid",
+                        children: document_table_properties_dialog_sections_marginFields.map(({ side, label, ariaLabel })=>/*#__PURE__*/ jsxs("div", {
+                                className: "work-document-table-properties-margin",
+                                children: [
+                                    /*#__PURE__*/ jsx("span", {
+                                        children: label
+                                    }),
+                                    /*#__PURE__*/ jsx(OfficeNumberField, {
+                                        ariaLabel: ariaLabel,
+                                        value: draft.cell.margins[side],
+                                        min: 0,
+                                        max: 5,
+                                        step: 0.05,
+                                        disabled: draft.cell.useTableMargins,
+                                        validationInvalid: Boolean(errors.cellMargins[side]),
+                                        onValueChange: (value)=>setDraft((current)=>({
+                                                    ...current,
+                                                    cell: {
+                                                        ...current.cell,
+                                                        margins: {
+                                                            ...current.cell.margins,
+                                                            [side]: value
+                                                        }
+                                                    }
+                                                }))
+                                    }),
+                                    /*#__PURE__*/ jsx("small", {
+                                        children: "厘米"
+                                    }),
+                                    errors.cellMargins[side] && /*#__PURE__*/ jsx("p", {
+                                        role: "alert",
+                                        children: errors.cellMargins[side]
+                                    })
+                                ]
+                            }, side))
+                    })
+                ]
+            })
         ]
     });
 }
-function selectedDocumentImagePosition(editor) {
-    const selection = editor.state.selection;
-    return selection instanceof NodeSelection && 'image' === selection.node.type.name ? selection.from : null;
-}
-function restoreDocumentImageSelection(editor, position) {
-    if (null === position || editor.isDestroyed || editor.state.doc.nodeAt(position)?.type.name !== 'image') return false;
-    return editor.commands.setNodeSelection(position);
-}
-function imageWrapDistanceOptionsForValue(value) {
-    if (imageWrapDistanceOptions.some((option)=>option.value === value)) return imageWrapDistanceOptions;
-    return [
-        ...imageWrapDistanceOptions,
-        {
-            value,
-            label: `${value} 毫米`
-        }
-    ];
+function NumberRow({ label, ariaLabel, value, unit, min, max, step, disabled = false, invalid = false, onValueChange }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: "work-document-table-properties-number-row",
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(OfficeNumberField, {
+                ariaLabel: ariaLabel,
+                value: value,
+                min: min,
+                max: max,
+                step: step,
+                disabled: disabled,
+                validationInvalid: invalid,
+                onValueChange: onValueChange
+            }),
+            /*#__PURE__*/ jsx("small", {
+                children: unit
+            })
+        ]
+    });
 }
-function PictureButton({ label, active = false, disabled = false, onClick, children }) {
-    return /*#__PURE__*/ jsx(WorkOfficeRibbonButton, {
-        label: label,
-        displayLabel: true,
-        active: active,
-        disabled: disabled,
-        onClick: onClick,
-        children: children
+function DocumentTablePropertiesControl({ editor, renderedTableWidth, renderedRowHeight, renderedColumnWidth, renderedColumnWidths }) {
+    const [source, setSource] = useState(null);
+    const triggerRef = useRef(null);
+    const openDialog = (event)=>{
+        const sizing = documentTableSizing(editor.state);
+        const cellFormat = documentTableCellFormat(editor.state);
+        if (!sizing || !cellFormat) return;
+        triggerRef.current = event.currentTarget;
+        setSource({
+            sizing,
+            cellFormat,
+            rowOptions: documentTableRowOptions(editor),
+            canRepeatHeader: canSetDocumentTableRowRepeatHeader(editor),
+            renderedTableWidth,
+            renderedRowHeight,
+            renderedColumnWidth,
+            renderedColumnWidths
+        });
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(WorkOfficeRibbonButton, {
+                label: "表格属性",
+                visibleLabel: "表格属性",
+                disabled: !documentTableSizing(editor.state),
+                onClick: openDialog,
+                children: /*#__PURE__*/ jsx(TableProperties, {
+                    size: 18
+                })
+            }),
+            source && /*#__PURE__*/ jsx(DocumentTablePropertiesDialog, {
+                editor: editor,
+                source: source,
+                restoreFocusTarget: ()=>triggerRef.current,
+                onClose: ()=>setSource(null)
+            })
+        ]
     });
 }
-function DocumentTableInsertPopover({ editor }) {
-    return /*#__PURE__*/ jsx(OfficeTableInsertPopover, {
-        className: "work-document-table-insert-popover",
-        label: "插入表格",
-        onInsert: (dimensions)=>editor.commands.insertDocumentTable(dimensions)
+function DocumentTablePropertiesDialog({ editor, source, restoreFocusTarget, onClose }) {
+    const [initial] = useState(()=>createDocumentTablePropertiesDraft(source));
+    const [draft, setDraft] = useState(initial);
+    const [activeTab, setActiveTab] = useState('table');
+    const formId = useId();
+    const idBase = `document-table-properties-${useId().replaceAll(':', '')}`;
+    const errors = documentTablePropertiesErrors(draft);
+    const invalid = hasDocumentTablePropertiesErrors(errors);
+    const submit = (event)=>{
+        event?.preventDefault();
+        if (invalid) return;
+        const changes = documentTablePropertyChanges(initial, draft, source);
+        if (!changes || editor.commands.setDocumentTablePropertyChanges(changes)) onClose();
+    };
+    return /*#__PURE__*/ jsxs(Dialog, {
+        title: "表格属性",
+        description: "设置当前表格、行、列和单元格。",
+        className: "work-document-table-properties-dialog",
+        restoreFocusTarget: restoreFocusTarget,
+        onClose: onClose,
+        footer: /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(button_Button, {
+                    tone: "quiet",
+                    onClick: onClose,
+                    children: "取消"
+                }),
+                /*#__PURE__*/ jsx(button_Button, {
+                    tone: "primary",
+                    type: "submit",
+                    form: formId,
+                    disabled: invalid,
+                    children: "确定"
+                })
+            ]
+        }),
+        children: [
+            /*#__PURE__*/ jsx(DocumentTablePropertiesTabs, {
+                activeTab: activeTab,
+                idBase: idBase,
+                onTabChange: setActiveTab
+            }),
+            /*#__PURE__*/ jsx("form", {
+                id: formId,
+                onSubmit: submit,
+                children: /*#__PURE__*/ jsx(DocumentTablePropertiesPanel, {
+                    activeTab: activeTab,
+                    idBase: idBase,
+                    draft: draft,
+                    setDraft: setDraft,
+                    errors: errors,
+                    source: source
+                })
+            })
+        ]
     });
 }
 const borderOptions = [
@@ -7655,12 +10116,48 @@ const borderOptions = [
         label: '双线',
         style: 'double',
         width: 2
+    }
+];
+const borderTargetOptions = [
+    {
+        value: 'clear',
+        label: '无框线'
+    },
+    {
+        value: 'all',
+        label: '所有框线'
+    },
+    {
+        value: 'outside',
+        label: '外侧框线'
+    },
+    {
+        value: 'inside',
+        label: '内部框线'
+    },
+    {
+        value: 'top',
+        label: '上框线'
     },
     {
-        value: 'none-0',
-        label: '无边框',
-        style: 'none',
-        width: 0
+        value: 'bottom',
+        label: '下框线'
+    },
+    {
+        value: 'left',
+        label: '左框线'
+    },
+    {
+        value: 'right',
+        label: '右框线'
+    },
+    {
+        value: 'insideHorizontal',
+        label: '内部横框线'
+    },
+    {
+        value: 'insideVertical',
+        label: '内部竖框线'
     }
 ];
 const tableLayoutOptions = [
@@ -7677,11 +10174,22 @@ const tableLayoutOptions = [
         label: '固定列宽'
     }
 ];
-const PIXELS_PER_CENTIMETER = 96 / 2.54;
+const currentTableLayoutOption = {
+    value: 'current',
+    label: '当前宽度',
+    disabled: true
+};
+const document_table_ribbon_PIXELS_PER_CENTIMETER = 96 / 2.54;
 function DocumentTableDesignRibbon({ editor }) {
     const format = documentTableCellFormat(editor.state) ?? DEFAULT_DOCUMENT_TABLE_CELL_FORMAT;
-    const borderValue = borderOptionValue(format.borderStyle, format.borderWidth);
-    const currentBorderOptions = borderOptionsForFormat(format.borderStyle, format.borderWidth);
+    const [borderPen, setBorderPen] = useState(()=>({
+            color: format.borderColor,
+            style: 'none' === format.borderStyle ? 'solid' : format.borderStyle,
+            width: 'none' === format.borderStyle || 0 === format.borderWidth ? 1 : format.borderWidth
+        }));
+    const [borderTarget, setBorderTarget] = useState('all');
+    const borderValue = borderOptionValue(borderPen.style, borderPen.width);
+    const currentBorderOptions = borderOptionsForFormat(borderPen.style, borderPen.width);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(document_table_ribbon_RibbonGroup, {
@@ -7722,10 +10230,11 @@ function DocumentTableDesignRibbon({ editor }) {
                         ariaLabel: "边框颜色",
                         className: "work-document-table-color-picker",
                         compact: true,
-                        value: format.borderColor,
-                        onValueChange: (borderColor)=>editor.chain().focus().setDocumentTableCellFormat({
-                                borderColor
-                            }).run()
+                        value: borderPen.color,
+                        onValueChange: (borderColor)=>setBorderPen((current)=>({
+                                    ...current,
+                                    color: borderColor
+                                }))
                     }),
                     /*#__PURE__*/ jsx(OfficeSelect, {
                         ariaLabel: "边框样式",
@@ -7735,10 +10244,26 @@ function DocumentTableDesignRibbon({ editor }) {
                         onValueChange: (value)=>{
                             const option = currentBorderOptions.find((candidate)=>candidate.value === value);
                             if (!option) return;
-                            editor.chain().focus().setDocumentTableCellFormat({
-                                borderStyle: option.style,
-                                borderWidth: option.width
-                            }).run();
+                            setBorderPen((current)=>({
+                                    ...current,
+                                    style: option.style,
+                                    width: option.width
+                                }));
+                        }
+                    }),
+                    /*#__PURE__*/ jsx(OfficeSelect, {
+                        ariaLabel: "应用边框",
+                        className: "work-document-table-border-target-select",
+                        value: borderTarget,
+                        options: borderTargetOptions,
+                        onValueChange: (value)=>{
+                            setBorderTarget(value);
+                            const clear = 'clear' === value;
+                            editor.chain().focus().setDocumentTableBorders(clear ? 'all' : value, clear ? {
+                                color: borderPen.color,
+                                style: 'none',
+                                width: 0
+                            } : borderPen).run();
                         }
                     })
                 ]
@@ -7847,6 +10372,21 @@ function DocumentTableLayoutRibbon({ editor }) {
                 editor: editor,
                 sizing: sizing
             }),
+            /*#__PURE__*/ jsxs(document_table_ribbon_RibbonGroup, {
+                label: "表格属性",
+                children: [
+                    /*#__PURE__*/ jsx(DocumentTablePropertiesControl, {
+                        editor: editor,
+                        renderedTableWidth: measuredTableWidth(editor),
+                        renderedRowHeight: measuredCurrentTableDimension(editor, 'rows') ?? void 0,
+                        renderedColumnWidth: measuredCurrentTableDimension(editor, 'columns') ?? void 0,
+                        renderedColumnWidths: measuredTableColumnWidths(editor)
+                    }),
+                    /*#__PURE__*/ jsx(DocumentTableMarginsPopover, {
+                        editor: editor
+                    })
+                ]
+            }),
             /*#__PURE__*/ jsxs(document_table_ribbon_RibbonGroup, {
                 label: "单元格对齐",
                 children: [
@@ -7955,6 +10495,13 @@ function DocumentTableLayoutRibbon({ editor }) {
 function DocumentTableSizeRibbonGroup({ editor, sizing }) {
     const measuredRowSelection = measuredTableSelectionSize(editor, 'rows');
     const measuredColumnSelection = measuredTableSelectionSize(editor, 'columns');
+    const measuredColumnWidth = measuredCurrentTableDimension(editor, 'columns');
+    const displayedColumnWidth = sizing?.layoutAlgorithm === 'autofit' ? measuredColumnWidth ?? sizing.columnWidth : sizing?.columnWidth ?? measuredColumnWidth;
+    const tableLayoutValue = sizing?.layoutAlgorithm === 'autofit' && 'fixed' === sizing.layoutMode ? 'current' : sizing?.layoutMode ?? 'window';
+    const displayedTableLayoutOptions = 'current' === tableLayoutValue ? [
+        currentTableLayoutOption,
+        ...tableLayoutOptions
+    ] : tableLayoutOptions;
     const canDistributeRows = editor.can().chain().focus().distributeDocumentTableRows(measuredRowSelection).run();
     const canDistributeColumns = editor.can().chain().focus().distributeDocumentTableColumns(measuredColumnSelection).run();
     return /*#__PURE__*/ jsxs(document_table_ribbon_RibbonGroup, {
@@ -7972,7 +10519,7 @@ function DocumentTableSizeRibbonGroup({ editor, sizing }) {
                     /*#__PURE__*/ jsx(TableDimensionField, {
                         label: "宽度",
                         ariaLabel: "列宽（厘米）",
-                        value: sizing?.columnWidth ?? measuredCurrentTableDimension(editor, 'columns'),
+                        value: displayedColumnWidth,
                         onValueChange: (width)=>editor.chain().focus().setDocumentTableColumnWidth(width, measuredTableColumnWidths(editor)).run()
                     })
                 ]
@@ -7980,9 +10527,12 @@ function DocumentTableSizeRibbonGroup({ editor, sizing }) {
             /*#__PURE__*/ jsx(OfficeSelect, {
                 ariaLabel: "表格自动调整",
                 className: "work-document-table-layout-select",
-                value: sizing?.layoutMode ?? 'window',
-                options: tableLayoutOptions,
-                onValueChange: (layoutMode)=>editor.chain().focus().setDocumentTableLayoutMode(layoutMode, 'fixed' === layoutMode ? measuredTableWidth(editor) : void 0).run()
+                value: tableLayoutValue,
+                options: displayedTableLayoutOptions,
+                onValueChange: (layoutMode)=>{
+                    if ('current' === layoutMode) return;
+                    editor.chain().focus().setDocumentTableLayoutMode(layoutMode, 'fixed' === layoutMode ? measuredTableWidth(editor) : void 0).run();
+                }
             }),
             /*#__PURE__*/ jsx(RibbonButton, {
                 label: "平均分布行",
@@ -8006,7 +10556,7 @@ function DocumentTableSizeRibbonGroup({ editor, sizing }) {
     });
 }
 function TableDimensionField({ label, ariaLabel, value, onValueChange }) {
-    const formattedValue = null === value ? '' : document_table_ribbon_formatCentimeters(value / PIXELS_PER_CENTIMETER);
+    const formattedValue = null === value ? '' : document_table_ribbon_formatCentimeters(value / document_table_ribbon_PIXELS_PER_CENTIMETER);
     const { cancelDraft, dirty, draft, replaceDraft, setDraft, syncDraft } = useOfficeDraft(()=>formattedValue);
     useEffect(()=>syncDraft(formattedValue), [
         formattedValue,
@@ -8032,7 +10582,7 @@ function TableDimensionField({ label, ariaLabel, value, onValueChange }) {
                     const centimeters = Number(nextValue);
                     if (!Number.isFinite(centimeters) || centimeters < 0.5 || centimeters > 30) return void cancelDraft();
                     const normalizedDraft = document_table_ribbon_formatCentimeters(centimeters);
-                    const committed = onValueChange(Math.round(centimeters * PIXELS_PER_CENTIMETER * 100) / 100);
+                    const committed = onValueChange(Math.round(centimeters * document_table_ribbon_PIXELS_PER_CENTIMETER * 100) / 100);
                     if (committed) replaceDraft(normalizedDraft);
                     else cancelDraft();
                 }
@@ -8334,13 +10884,14 @@ function DocumentToolbar({ editor, layoutOpen, layoutFonts = [], navigationOpen,
             if (event.defaultPrevented || event.repeat || event.altKey || isOfficeShortcutBlocked(event.target) || !(event.metaKey || event.ctrlKey)) return;
             const key = event.key.toLowerCase();
             const insideEditor = event.target instanceof Node && Boolean(editorDom?.contains(event.target));
-            if (insideEditor && 'z' === key) {
+            const documentHistoryTarget = insideEditor || !isDocumentNativeTextUndoTarget(event.target);
+            if (documentHistoryTarget && 'z' === key) {
                 event.preventDefault();
                 const command = event.shiftKey ? editor.chain().focus().redo() : editor.chain().focus().undo();
                 command.run();
                 return;
             }
-            if (insideEditor && 'y' === key && !event.shiftKey) {
+            if (documentHistoryTarget && 'y' === key && !event.shiftKey) {
                 event.preventDefault();
                 editor.chain().focus().redo().run();
                 return;
@@ -8822,6 +11373,24 @@ function DocumentToolbar({ editor, layoutOpen, layoutFonts = [], navigationOpen,
         ]
     });
 }
+function isDocumentNativeTextUndoTarget(target) {
+    if (!(target instanceof HTMLElement)) return false;
+    return target instanceof HTMLInputElement && documentNativeUndoInputTypes.has(target.type) || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target.isContentEditable || Boolean(target.closest('[contenteditable="true"]'));
+}
+const documentNativeUndoInputTypes = new Set([
+    'date',
+    'datetime-local',
+    'email',
+    'month',
+    'number',
+    'password',
+    'search',
+    'tel',
+    'text',
+    'time',
+    'url',
+    'week'
+]);
 function document_toolbar_ToolbarButton({ label, title, shortcut, ariaKeyShortcuts, active = false, disabled = false, displayLabel = false, onClick, children }) {
     return /*#__PURE__*/ jsx(WorkOfficeRibbonButton, {
         label: label,
@@ -9219,7 +11788,9 @@ function useDocumentPagination({ editor, documentRevision, enabled, layoutKey, p
                     delete editorDom.dataset.paginationLaidOutBlocks;
                     delete editorDom.dataset.paginationPages;
                     delete editorDom.dataset.paginationReusedBlocks;
+                    delete editorDom.dataset.paginationReusedPageChrome;
                     delete editorDom.dataset.paginationReusedPages;
+                    delete editorDom.dataset.paginationDerivedPageChrome;
                     delete editorDom.dataset.paginationShapedParagraphs;
                     delete editorDom.dataset.paginationShapedRuns;
                     delete editorDom.dataset.paginationTextCandidates;
@@ -9275,6 +11846,8 @@ function useDocumentPagination({ editor, documentRevision, enabled, layoutKey, p
             activeRequest.current = controller;
             editor.commands.clearDocumentPagination(nextRevision);
             editorDom.dataset.paginationState = 'measuring';
+            editorDom.dataset.paginationReusedPageChrome = '0';
+            editorDom.dataset.paginationDerivedPageChrome = '0';
             delete editorDom.dataset.paginationError;
             const measurementStart = dirtyMeasurementFrom.current;
             dirtyMeasurementFrom.current = 1 / 0;
@@ -9349,7 +11922,10 @@ function useDocumentPagination({ editor, documentRevision, enabled, layoutKey, p
                         block.block.id,
                         block
                     ]));
-                const pages = documentPaginationPageDescriptors(layout, snapshot.blocks, editor.state.doc);
+                const pageDescriptorDerivation = deriveDocumentPaginationPageDescriptors(layout, snapshot.blocks, editor.state.doc, previousPagination?.pages, layoutPlan.reusedPageCount);
+                const pages = pageDescriptorDerivation.pages;
+                editorDom.dataset.paginationReusedPageChrome = String(pageDescriptorDerivation.reusedPageCount);
+                editorDom.dataset.paginationDerivedPageChrome = String(pageDescriptorDerivation.derivedPageCount);
                 const pageByIndex = new Map(pages.map((descriptor)=>[
                         descriptor.pageIndex,
                         descriptor
@@ -9467,13 +12043,20 @@ function useDocumentPagination({ editor, documentRevision, enabled, layoutKey, p
         selectionVersion
     ]);
 }
-function documentPaginationPageDescriptors(layout, blocks, documentNode) {
+function deriveDocumentPaginationPageDescriptors(layout, blocks, documentNode, previousPages = [], requestedReusedPageCount = 0) {
     const blockById = new Map(blocks.map((candidate)=>[
             candidate.block.id,
             candidate
         ]));
+    const previousPageByIndex = new Map(previousPages.map((page)=>[
+            page.pageIndex,
+            page
+        ]));
+    const reusablePhysicalPageCount = Number.isSafeInteger(requestedReusedPageCount) ? Math.max(0, Math.min(requestedReusedPageCount, layout.pages.length)) : 0;
     const sectionPages = new Map();
     const descriptors = [];
+    let reuseOpen = reusablePhysicalPageCount > 0;
+    let reusedPageCount = 0;
     for (const page of layout.pages){
         const pageBlocks = Array.from(new Map(page.placements.flatMap((placement)=>{
             const block = blockById.get(placement.blockId);
@@ -9501,6 +12084,13 @@ function documentPaginationPageDescriptors(layout, blocks, documentNode) {
         const previousPageNumber = descriptors.at(-1)?.pageNumber ?? 0;
         const firstSectionPage = 1 === sectionPage;
         const pageNumber = firstSectionPage && void 0 !== section.layout.pageNumberStart ? section.layout.pageNumberStart : Math.max(1, previousPageNumber + 1);
+        const previousPage = previousPageByIndex.get(page.index);
+        if (reuseOpen && page.index < reusablePhysicalPageCount && previousPage && reusableDocumentPageDescriptor(previousPage, physicalPage, pageNumber, sectionPage, section.id, section.index, section.layout)) {
+            descriptors.push(previousPage);
+            reusedPageCount += 1;
+            continue;
+        }
+        if (page.index < reusablePhysicalPageCount) reuseOpen = false;
         descriptors.push({
             pageIndex: page.index,
             physicalPage,
@@ -9514,7 +12104,14 @@ function documentPaginationPageDescriptors(layout, blocks, documentNode) {
             pageChrome: resolveDocumentPageChrome(section.layout, sectionPage, physicalPage)
         });
     }
-    return descriptors;
+    return {
+        pages: descriptors,
+        reusedPageCount,
+        derivedPageCount: descriptors.length - reusedPageCount
+    };
+}
+function reusableDocumentPageDescriptor(candidate, physicalPage, pageNumber, sectionPage, sectionId, sectionIndex, layout) {
+    return candidate.pageIndex === physicalPage - 1 && candidate.physicalPage === physicalPage && candidate.pageNumber === pageNumber && candidate.sectionPage === sectionPage && candidate.sectionId === sectionId && candidate.sectionIndex === sectionIndex && JSON.stringify(candidate.layout) === JSON.stringify(layout);
 }
 function documentPagePreviewText(blocks, documentNode) {
     const measuredText = documentNode ? documentPageTextRanges(blocks).reduce((preview, range)=>{
@@ -10150,6 +12747,7 @@ function DocumentEditor({ artifactId, content, extensions = EMPTY_DOCUMENT_EXTEN
     const pageFooterRef = useRef(null);
     const workspaceRef = useRef(null);
     const reviewSurfaceRef = useRef(null);
+    const pageSurfaceRef = useRef(null);
     const taskPaneInvokerRef = useRef(null);
     const commentsDraftFocusRef = useRef(null);
     const citationsDraftFocusRef = useRef(null);
@@ -10253,6 +12851,13 @@ function DocumentEditor({ artifactId, content, extensions = EMPTY_DOCUMENT_EXTEN
         const active = document.activeElement;
         if (active instanceof HTMLElement && active.isConnected) taskPaneInvokerRef.current = active;
     }, []);
+    const taskPaneRestoreTarget = useCallback(()=>{
+        const invoker = taskPaneInvokerRef.current;
+        if (invoker?.isConnected && !invoker.matches(':disabled') && !invoker.closest('[hidden], [aria-hidden="true"]')) return invoker;
+        return editor && !editor.isDestroyed ? editor.view.dom : null;
+    }, [
+        editor
+    ]);
     const rememberTaskPaneDraftFocus = useCallback((event)=>{
         const target = event.target;
         if (!(target instanceof HTMLElement) || !target.matches('input:not([type="hidden"]), textarea, [contenteditable="true"], [role="combobox"]')) return;
@@ -10317,25 +12922,31 @@ function DocumentEditor({ artifactId, content, extensions = EMPTY_DOCUMENT_EXTEN
         taskPane,
         taskPaneDialog.confirm
     ]);
-    const closeTaskPane = useCallback(async ()=>{
-        if (!await requestEditorViewChange(null, false)) return;
-        if (!taskPaneModal) requestAnimationFrame(()=>{
-            if (editor && !editor.isDestroyed) editor.view.dom.focus();
+    const restoreClosedTaskPaneFocus = useCallback(()=>{
+        requestAnimationFrame(()=>{
+            const target = taskPaneModal ? taskPaneRestoreTarget() : editor && !editor.isDestroyed ? editor.view.dom : null;
+            target?.focus({
+                preventScroll: true
+            });
         });
     }, [
         editor,
+        taskPaneModal,
+        taskPaneRestoreTarget
+    ]);
+    const closeTaskPane = useCallback(async ()=>{
+        if (!await requestEditorViewChange(null, false)) return;
+        restoreClosedTaskPaneFocus();
+    }, [
         requestEditorViewChange,
-        taskPaneModal
+        restoreClosedTaskPaneFocus
     ]);
     const closeCommentsPanel = useCallback(async ()=>{
         if (!await requestEditorViewChange(null, true)) return;
-        if (!taskPaneModal) requestAnimationFrame(()=>{
-            if (editor && !editor.isDestroyed) editor.view.dom.focus();
-        });
+        restoreClosedTaskPaneFocus();
     }, [
-        editor,
         requestEditorViewChange,
-        taskPaneModal
+        restoreClosedTaskPaneFocus
     ]);
     const toggleTaskPane = useCallback(async (pane)=>{
         if (taskPane !== pane) rememberTaskPaneInvoker();
@@ -10398,11 +13009,7 @@ function DocumentEditor({ artifactId, content, extensions = EMPTY_DOCUMENT_EXTEN
             return pane?.querySelector('.ds-icon-button.close') ?? null;
         },
         getActiveScope: activeTaskPaneElement,
-        restoreFocusTarget: ()=>{
-            const invoker = taskPaneInvokerRef.current;
-            if (invoker?.isConnected && !invoker.matches(':disabled') && !invoker.closest('[hidden], [aria-hidden="true"]')) return invoker;
-            return editor && !editor.isDestroyed ? editor.view.dom : null;
-        }
+        restoreFocusTarget: taskPaneRestoreTarget
     });
     useOfficeTaskPaneEscape(Boolean(taskPane) && !taskPaneModal, closeTaskPane);
     useOfficeTaskPaneEscape(documentComments.open && !documentComments.draft && !taskPaneModal, closeCommentsPanel);
@@ -10703,6 +13310,14 @@ function DocumentEditor({ artifactId, content, extensions = EMPTY_DOCUMENT_EXTEN
                         currentPage: currentPage,
                         editor: editor,
                         modal: taskPaneModal,
+                        pageThumbnailSource: pageSurfaceRef.current && pagination.pageCount ? {
+                            element: pageSurfaceRef.current,
+                            pageCount: pagination.pageCount,
+                            pageGap: kernelPage.pageGap,
+                            pageHeight: kernelPage.height,
+                            pageWidth: kernelPage.width,
+                            revision: editorInput.sourceKey
+                        } : void 0,
                         pages: (pagination.pages.length ? pagination.pages : [
                             firstPageDescriptor
                         ]).map((page)=>({
@@ -10748,6 +13363,7 @@ function DocumentEditor({ artifactId, content, extensions = EMPTY_DOCUMENT_EXTEN
                                                     onLayoutChange: updateLayout
                                                 }),
                                                 /*#__PURE__*/ jsxs("article", {
+                                                    ref: pageSurfaceRef,
                                                     className: `work-document-page${preview ? ' work-document-preview-page' : ''} ${layout.pageSize} ${layout.orientation}${pagination.pageCount ? ' paginated' : ''}${!preview && pageChromeEditing ? ' page-chrome-editing' : ''}`,
                                                     "data-work-pdf-live-document": artifactId && pagination.pageCount ? '' : void 0,
                                                     "data-pdf-orientation": artifactId && pagination.pageCount ? layout.orientation : void 0,