@aseity/idocs-preview 0.3.0 → 0.5.0

package/dist/view/workspace.js

@@ -0,0 +1,1121 @@
+import { mountEditor, } from './editor.js';
+import { decodeImages, paintPage } from './index.js';
+import { ensureWorkspaceStyles } from './workspace-styles.js';
+const SVG_NS = 'http://www.w3.org/2000/svg';
+const ICONS = {
+    rail: '<path d="M6.835 4c-.451.004-.82.012-1.137.038-.386.032-.659.085-.876.162l-.2.086c-.44.224-.807.564-1.063.982l-.103.184c-.126.247-.206.562-.248 1.076-.043.523-.043 1.19-.043 2.135v2.664c0 .944 0 1.612.043 2.135.042.515.122.829.248 1.076l.103.184c.256.418.624.758 1.063.982l.2.086c.217.077.49.13.876.162.316.026.685.034 1.136.038zm11.33 7.327c0 .922 0 1.654-.048 2.243-.043.522-.125.977-.305 1.395l-.082.177a4 4 0 0 1-1.473 1.593l-.276.155c-.465.237-.974.338-1.57.387-.59.048-1.322.048-2.244.048H7.833c-.922 0-1.654 0-2.243-.048-.522-.042-.977-.126-1.395-.305l-.176-.082a4 4 0 0 1-1.594-1.473l-.154-.275c-.238-.466-.34-.975-.388-1.572-.048-.589-.048-1.32-.048-2.243V8.663c0-.922 0-1.654.048-2.243.049-.597.15-1.106.388-1.571l.154-.276a4 4 0 0 1 1.594-1.472l.176-.083c.418-.18.873-.263 1.395-.305.589-.048 1.32-.048 2.243-.048h4.334c.922 0 1.654 0 2.243.048.597.049 1.106.15 1.571.388l.276.154a4 4 0 0 1 1.473 1.594l.082.176c.18.418.262.873.305 1.395.048.589.048 1.32.048 2.243zm-10 4.668h4.002c.944 0 1.612 0 2.135-.043.514-.042.829-.122 1.076-.248l.184-.103c.418-.256.758-.624.982-1.063l.086-.2c.077-.217.13-.49.162-.876.043-.523.043-1.19.043-2.135V8.663c0-.944 0-1.612-.043-2.135-.032-.386-.085-.659-.162-.876l-.086-.2a2.67 2.67 0 0 0-.982-1.063l-.184-.103c-.247-.126-.562-.206-1.076-.248-.523-.043-1.19-.043-2.135-.043H8.164L8.165 4z"/>',
+    undo: '<path d="M15.916 10.833a4.25 4.25 0 0 0-4.25-4.25H5.144l2.053 2.054.051.056a.75.75 0 0 1-1.054 1.055l-.058-.05-3.333-3.335a.75.75 0 0 1 0-1.06L6.136 1.97l.058-.052a.75.75 0 0 1 1.054 1.056l-.051.056-2.053 2.053h6.522a5.75 5.75 0 0 1 0 11.5H8.333a.75.75 0 0 1 0-1.5h3.333a4.25 4.25 0 0 0 4.25-4.25"/>',
+    redo: '<path d="M4.084 10.833a4.25 4.25 0 0 1 4.25-4.25h6.522l-2.053 2.054-.051.056a.75.75 0 0 0 1.054 1.055l.058-.05 3.333-3.335a.75.75 0 0 0 0-1.06L13.864 1.97l-.058-.052a.75.75 0 0 0-1.054 1.056l.051.056 2.053 2.053H8.334a5.75 5.75 0 0 0 0 11.5h3.333a.75.75 0 1 0 0-1.5H8.334a4.25 4.25 0 0 1-4.25-4.25"/>',
+    bold: '<path d="M6.33 10h4.17a3 3 0 0 0 0-6H6.33v12H11a3 3 0 0 0 0-6" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/>',
+    italic: '<path d="M8 4h6M6 16h6M12 4L8 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
+    underline: '<path d="M5.67 3.33v6a4.33 4.33 0 0 0 8.66 0v-6M4.67 17h10.66" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>',
+    strike: '<path d="M14 5.33c-.67-1.17-2.04-1.83-4-1.83-2.33 0-4 1.17-4 3 0 1.67 1.5 2.67 4 3.5s4 1.83 4 3.5c0 1.83-1.67 3-4 3-1.96 0-3.33-.66-4-1.83M4.33 10h11.34" fill="none" stroke="currentColor" stroke-width="1.45" stroke-linecap="round" stroke-linejoin="round"/>',
+    align: '<path d="M3 5h14M3 10h10M3 15h12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+    zoomOut: '<path d="M4.5 10h11" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+    zoomIn: '<path d="M10 4.5v11M4.5 10h11" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>',
+    fit: '<path d="M4.335 11a.665.665 0 0 1 1.33 0v3.335H9l.134.014a.665.665 0 0 1 0 1.302L9 15.665H5A.665.665 0 0 1 4.335 15zm10-2V5.665H11a.665.665 0 0 1 0-1.33h4l.134.014c.303.062.531.33.531.651v4a.665.665 0 1 1-1.33 0"/>',
+    search: '<circle cx="8.8" cy="8.8" r="5" fill="none" stroke="currentColor" stroke-width="1.5"/><path d="M12.6 12.6l3.8 3.8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>',
+    paragraph: '<path d="M6.75 4.75h10M3.25 8.25h13.5M3.25 11.75h13.5M3.25 15.25h8.5"/>',
+    heading: '<path d="M5 4v12M15 4v12M5 10h10"/>',
+    table: '<rect x="3" y="4" width="14" height="12" rx="2"/><path d="M3 8h14M3 12h14M10 8v8"/>',
+    callout: '<rect x="3" y="3.5" width="14" height="13" rx="2.25"/><path d="M7 7v3M10.5 8h3M10.5 12h3"/><circle cx="7" cy="12.75" r="0.75" fill="currentColor" stroke="none"/>',
+    image: '<rect x="3" y="3" width="14" height="14" rx="2.25"/><circle cx="12.75" cy="7.25" r="1.5"/><path d="m3 13 3.5-3.5a1.4 1.4 0 0 1 2 0l7.1 7.1"/>',
+    pageBreak: '<path d="M4 7V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2M4 13v2a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-2M3 10h2m4 0h2m4 0h2"/>',
+    chevronDown: '<path d="M15.78 7.404a.666.666 0 0 1 .94.942L10.766 14.3a1.08 1.08 0 0 1-1.53 0L3.28 8.346a.666.666 0 0 1 .942-.942L10 13.184z"/>',
+    check: '<path d="M14.445 5.038a.665.665 0 0 1 1.1.748l-6.14 9.03a.815.815 0 0 1-1.25.117L4.528 11.3a.665.665 0 0 1 .942-.94l3.184 3.192z"/>',
+    ask: '<path fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="1.45" d="M10 16.83c4.004 0 7.25-3.058 7.25-6.83S14.004 3.17 10 3.17 2.75 6.228 2.75 10a6.55 6.55 0 0 0 1.484 4.141c-.147.781-.39 1.537-.678 2.287a13.5 13.5 0 0 0 2.877-.48A7.56 7.56 0 0 0 10 16.83Z"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.45" d="M5.888 9C6.278 7.575 7.478 6.457 9 6.11"/>',
+};
+export function formatAskAssistantLabel(assistantName) {
+    const resolved = assistantName?.trim() || 'AI';
+    return /^[\x00-\x7f]/.test(resolved) ? `询问 ${resolved}` : `询问${resolved}`;
+}
+function makeSvgIcon(markup, size = 16) {
+    const svg = document.createElementNS(SVG_NS, 'svg');
+    svg.setAttribute('width', String(size));
+    svg.setAttribute('height', String(size));
+    svg.setAttribute('viewBox', '0 0 20 20');
+    svg.setAttribute('fill', 'currentColor');
+    svg.setAttribute('aria-hidden', 'true');
+    svg.innerHTML = markup;
+    return svg;
+}
+function el(tag, className, text) {
+    const node = document.createElement(tag);
+    if (className)
+        node.className = className;
+    if (text !== undefined)
+        node.textContent = text;
+    return node;
+}
+function mountToolbarScroller(toolbar, history, zoom, onScrollOrResize) {
+    const center = el('div', 'idocs-ws-tb-center');
+    const viewport = el('div', 'idocs-ws-toolbar-viewport');
+    const strip = el('div', 'idocs-ws-toolbar-strip');
+    const content = el('div', 'idocs-ws-toolbar-content');
+    const scrollButton = (direction, label) => {
+        const button = el('button', 'idocs-ws-icon-btn idocs-ws-toolbar-arrow');
+        button.type = 'button';
+        button.hidden = true;
+        button.title = label;
+        button.setAttribute('aria-label', label);
+        button.append(makeSvgIcon(ICONS.chevronDown, 14));
+        button.addEventListener('mousedown', (event) => event.preventDefault());
+        button.addEventListener('click', () => {
+            viewport.scrollBy({
+                left: direction * viewport.clientWidth * 0.75,
+                behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth',
+            });
+        });
+        return button;
+    };
+    const left = scrollButton(-1, '向左滚动格式工具栏');
+    const right = scrollButton(1, '向右滚动格式工具栏');
+    strip.append(content);
+    viewport.append(strip);
+    center.append(left, viewport, right);
+    toolbar.append(history, center, zoom);
+    const syncEdges = () => {
+        left.disabled = viewport.scrollLeft <= 1;
+        right.disabled = viewport.scrollLeft + viewport.clientWidth >= viewport.scrollWidth - 1;
+        onScrollOrResize();
+    };
+    let compact = false;
+    const resize = new ResizeObserver(() => {
+        const { paddingLeft, paddingRight, columnGap } = getComputedStyle(toolbar);
+        const innerWidth = toolbar.clientWidth - parseFloat(paddingLeft) - parseFloat(paddingRight);
+        const available = innerWidth - history.offsetWidth - zoom.offsetWidth - 2 * parseFloat(columnGap);
+        const nextCompact = available < Math.min(144, content.offsetWidth);
+        if (nextCompact !== compact) {
+            compact = nextCompact;
+            if (compact) {
+                strip.prepend(history);
+                strip.append(zoom);
+            }
+            else {
+                toolbar.prepend(history);
+                toolbar.append(zoom);
+            }
+        }
+        const overflow = strip.offsetWidth > center.clientWidth;
+        left.hidden = !overflow;
+        right.hidden = !overflow;
+        syncEdges();
+    });
+    for (const element of [toolbar, content, history, zoom])
+        resize.observe(element);
+    viewport.addEventListener('scroll', syncEdges, { passive: true });
+    return {
+        content,
+        viewport,
+        destroy() {
+            resize.disconnect();
+            viewport.removeEventListener('scroll', syncEdges);
+        },
+    };
+}
+function headingLevelFromStyle(style) {
+    switch (style) {
+        case 'heading1':
+            return 1;
+        case 'heading2':
+            return 2;
+        case 'heading3':
+            return 3;
+        default:
+            return null;
+    }
+}
+export function extractOutline(doc) {
+    const entries = [];
+    let lastPath = '';
+    for (let pageIndex = 0; pageIndex < doc.pages.length; pageIndex += 1) {
+        for (const line of doc.pages[pageIndex].lines) {
+            if (line.story !== 'body')
+                continue;
+            const seg = line.sourceSegments?.find((s) => s.source.kind === 'editable');
+            if (!seg || seg.source.kind !== 'editable')
+                continue;
+            const level = headingLevelFromStyle(seg.source.blockStyle);
+            if (!level)
+                continue;
+            const fragment = line.sourceSegments
+                ?.filter((s) => s.source.kind === 'editable')
+                .map((s) => line.text.slice(s.start, s.end))
+                .join('')
+                .trim();
+            const piece = fragment || line.text.trim();
+            if (entries.length > 0 && line.path === lastPath) {
+                const prev = entries[entries.length - 1];
+                entries[entries.length - 1] = {
+                    ...prev,
+                    text: piece ? `${prev.text}${prev.text ? ' ' : ''}${piece}` : prev.text,
+                };
+            }
+            else {
+                lastPath = line.path;
+                entries.push({
+                    path: line.path,
+                    level,
+                    text: piece || `标题 ${entries.length + 1}`,
+                    page: pageIndex,
+                    anchor: seg.source.stops[0]?.anchor,
+                });
+            }
+        }
+    }
+    return entries;
+}
+export function isTableCellPath(path) {
+    return /\.rows\.\d+\.cells\.\d+(?:\.|$)/.test(path);
+}
+function findEditableLineMeta(doc, page, flow) {
+    const targetPage = doc?.pages[page];
+    if (!targetPage)
+        return {};
+    for (const line of targetPage.lines) {
+        for (const seg of line.sourceSegments ?? []) {
+            if (seg.source.kind === 'editable' && seg.source.stops.some((stop) => stop.anchor.flow === flow)) {
+                return {
+                    blockStyle: seg.source.blockStyle,
+                    align: seg.source.align,
+                };
+            }
+        }
+    }
+    return {};
+}
+export function resolveToolbarContext(input) {
+    if (input.readOnly) {
+        const processing = input.processing ?? Boolean(input.busyLabel);
+        return {
+            kind: 'readOnly',
+            processing,
+            label: input.busyLabel || (processing ? '正在修订文档' : '只读'),
+        };
+    }
+    if (input.readOnlyTarget) {
+        return { kind: 'readOnlyTarget', target: input.readOnlyTarget };
+    }
+    if (input.selectedImage) {
+        return { kind: 'image', target: input.selectedImage };
+    }
+    if (input.selection) {
+        const { range } = input.selection.selection;
+        const collapsed = range.start.flow === range.end.flow && range.start.offset === range.end.offset;
+        const meta = findEditableLineMeta(input.document, input.selection.page, range.start.flow);
+        return {
+            kind: 'editable',
+            inTable: isTableCellPath(input.selection.path),
+            blockStyle: meta.blockStyle,
+            align: meta.align,
+            collapsed,
+        };
+    }
+    return { kind: 'empty' };
+}
+function sameImageList(a, b) {
+    if (!a || a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i += 1) {
+        if (a[i].missing !== b[i].missing ||
+            a[i].format !== b[i].format ||
+            a[i].washout !== b[i].washout ||
+            a[i].bytes !== b[i].bytes) {
+            return false;
+        }
+    }
+    return true;
+}
+function toolbarRenderKey(ctx, tableModePreferred) {
+    switch (ctx.kind) {
+        case 'readOnly':
+            return `ro:${ctx.processing}:${ctx.label}`;
+        case 'editable':
+            if (ctx.inTable && tableModePreferred)
+                return 'table';
+            return `ed:${ctx.inTable}:${ctx.blockStyle ?? ''}:${ctx.align ?? ''}:${ctx.collapsed}`;
+        case 'empty':
+            return 'empty';
+        case 'readOnlyTarget':
+        case 'image':
+            return null;
+    }
+}
+export function mountEditorWorkspace(container, session, options = {}) {
+    ensureWorkspaceStyles();
+    let readOnly = options.readOnly === true;
+    let busyLabel = options.busyLabel;
+    let processing = readOnly && (options.processing ?? Boolean(options.busyLabel));
+    let railOpen = options.railOpen ?? false;
+    let railTab = 'pages';
+    let tableModePreferred = false;
+    let lastToolbarKey = '';
+    let lastOutlinePath;
+    let activeDoc;
+    let renderedRailDoc;
+    let renderedRailTab;
+    let thumbImages = [];
+    let lastThumbImages = [];
+    let destroyed = false;
+    const root = el('div', 'idocs-ws');
+    root.classList.toggle('is-readonly', readOnly);
+    root.classList.toggle('is-processing', processing);
+    const toolbar = el('nav', 'idocs-ws-toolbar');
+    toolbar.setAttribute('aria-label', '文档格式工具栏');
+    const tbLeft = el('div', 'idocs-ws-tb-left');
+    const tbRight = el('div', 'idocs-ws-tb-right');
+    let openToolbarMenu;
+    const closeToolbarMenu = () => {
+        if (!openToolbarMenu)
+            return;
+        openToolbarMenu.trigger.setAttribute('aria-expanded', 'false');
+        openToolbarMenu.menu.hidden = true;
+        openToolbarMenu = undefined;
+    };
+    const positionToolbarMenu = () => {
+        if (!openToolbarMenu)
+            return;
+        const { trigger, menu } = openToolbarMenu;
+        const anchor = trigger.getBoundingClientRect();
+        const visible = toolbarScroller.viewport.getBoundingClientRect();
+        if (anchor.right <= visible.left || anchor.left >= visible.right) {
+            closeToolbarMenu();
+            return;
+        }
+        const frame = toolbar.getBoundingClientRect();
+        const gutter = 4;
+        const anchorLeft = Math.max(anchor.left, visible.left) - frame.left;
+        menu.style.left = `${Math.max(gutter, Math.min(anchorLeft, toolbar.clientWidth - menu.offsetWidth - gutter))}px`;
+        menu.style.top = `${anchor.bottom - frame.top + 6}px`;
+    };
+    const toolbarScroller = mountToolbarScroller(toolbar, tbLeft, tbRight, positionToolbarMenu);
+    const tbContent = toolbarScroller.content;
+    const toggleToolbarMenu = (trigger, menu, open) => {
+        closeAllPopovers();
+        if (!open)
+            return;
+        trigger.setAttribute('aria-expanded', 'true');
+        menu.hidden = false;
+        openToolbarMenu = { trigger, menu };
+        positionToolbarMenu();
+    };
+    const railToggleBtn = el('button', 'idocs-ws-icon-btn');
+    railToggleBtn.type = 'button';
+    const initialRailLabel = railOpen ? '收起页面列表' : '展开页面列表';
+    railToggleBtn.title = initialRailLabel;
+    railToggleBtn.setAttribute('aria-label', initialRailLabel);
+    railToggleBtn.setAttribute('aria-expanded', String(railOpen));
+    railToggleBtn.append(makeSvgIcon(ICONS.rail, 16));
+    const undoBtn = el('button', 'idocs-ws-icon-btn');
+    undoBtn.type = 'button';
+    undoBtn.title = '撤销';
+    undoBtn.setAttribute('aria-label', '撤销');
+    undoBtn.append(makeSvgIcon(ICONS.undo, 16));
+    const redoBtn = el('button', 'idocs-ws-icon-btn');
+    redoBtn.type = 'button';
+    redoBtn.title = '重做';
+    redoBtn.setAttribute('aria-label', '重做');
+    redoBtn.append(makeSvgIcon(ICONS.redo, 16));
+    tbLeft.append(railToggleBtn, undoBtn, redoBtn);
+    const zoomOutBtn = el('button', 'idocs-ws-icon-btn');
+    zoomOutBtn.type = 'button';
+    zoomOutBtn.title = '缩小';
+    zoomOutBtn.setAttribute('aria-label', '缩小');
+    zoomOutBtn.append(makeSvgIcon(ICONS.zoomOut));
+    const zoomLabel = el('span', 'idocs-ws-zoom-label', '100%');
+    const zoomInBtn = el('button', 'idocs-ws-icon-btn');
+    zoomInBtn.type = 'button';
+    zoomInBtn.title = '放大';
+    zoomInBtn.setAttribute('aria-label', '放大');
+    zoomInBtn.append(makeSvgIcon(ICONS.zoomIn));
+    const fitWidthBtn = el('button', 'idocs-ws-icon-btn');
+    fitWidthBtn.type = 'button';
+    fitWidthBtn.title = '适应宽度';
+    fitWidthBtn.setAttribute('aria-label', '适应宽度');
+    fitWidthBtn.append(makeSvgIcon(ICONS.fit, 18));
+    const findBtn = el('button', 'idocs-ws-icon-btn');
+    findBtn.type = 'button';
+    findBtn.title = '查找';
+    findBtn.setAttribute('aria-label', '查找');
+    findBtn.append(makeSvgIcon(ICONS.search));
+    const zoomDivider = el('span', 'idocs-ws-divider');
+    zoomDivider.setAttribute('aria-hidden', 'true');
+    tbRight.append(zoomOutBtn, zoomLabel, zoomInBtn, zoomDivider, fitWidthBtn, findBtn);
+    const body = el('div', 'idocs-ws-body');
+    body.classList.toggle('is-rail-collapsed', !railOpen);
+    const railSlot = el('div', 'idocs-ws-rail-slot');
+    const rail = el('aside', 'idocs-ws-rail');
+    if ('inert' in rail)
+        rail.inert = !railOpen;
+    rail.setAttribute('aria-hidden', String(!railOpen));
+    const railTabs = el('div', 'idocs-ws-rail-tabs');
+    railTabs.setAttribute('role', 'tablist');
+    const pagesTabBtn = el('button', 'idocs-ws-rail-tab', '页面');
+    pagesTabBtn.type = 'button';
+    pagesTabBtn.setAttribute('role', 'tab');
+    pagesTabBtn.setAttribute('aria-selected', 'true');
+    const outlineTabBtn = el('button', 'idocs-ws-rail-tab', '大纲');
+    outlineTabBtn.type = 'button';
+    outlineTabBtn.setAttribute('role', 'tab');
+    outlineTabBtn.setAttribute('aria-selected', 'false');
+    railTabs.append(pagesTabBtn, outlineTabBtn);
+    const railList = el('div', 'idocs-ws-rail-list');
+    rail.append(railTabs, railList);
+    const stage = el('div', 'idocs-ws-stage');
+    const editorHost = el('div', 'idocs-ws-editor-host');
+    const askLabel = formatAskAssistantLabel(options.assistantName);
+    const selPill = el('div', 'idocs-ws-sel-pill');
+    selPill.hidden = true;
+    const pillQuoteBtn = options.onQuoteSelection ? el('button', 'idocs-ws-sel-pill-btn') : null;
+    if (pillQuoteBtn) {
+        pillQuoteBtn.type = 'button';
+        const askSvg = makeSvgIcon(ICONS.ask, 16);
+        askSvg.classList.add('idocs-ws-sel-pill-icon');
+        pillQuoteBtn.append(askSvg, el('span', undefined, askLabel));
+        pillQuoteBtn.addEventListener('mousedown', (event) => event.preventDefault());
+        selPill.append(pillQuoteBtn);
+    }
+    const dock = el('nav', 'idocs-ws-dock');
+    dock.setAttribute('aria-label', '插入内容');
+    dock.hidden = readOnly;
+    const insertButtons = [];
+    const makeDockButton = (icon, label, activate, popup) => {
+        const container = el('span');
+        const className = 'idocs-ws-dock-btn';
+        const svg = makeSvgIcon(icon, 20);
+        const bind = (button) => {
+            if (!button)
+                return;
+            if (popup)
+                button.setAttribute('aria-expanded', String(!popup.hidden));
+            button.append(svg);
+        };
+        if (options.mountInsertButtons) {
+            insertButtons.push({ container, label, className, activate, bind });
+        }
+        else {
+            const button = el('button', className);
+            button.type = 'button';
+            button.title = label;
+            button.setAttribute('aria-label', label);
+            button.addEventListener('click', activate);
+            bind(button);
+            container.append(button);
+        }
+        return container;
+    };
+    const tableAnchor = el('div', 'idocs-ws-popover-anchor');
+    const tablePopover = el('div', 'idocs-ws-popover is-up idocs-ws-table-popover');
+    tablePopover.hidden = true;
+    const tableGridHead = el('div', 'idocs-ws-table-grid-head', '3 × 3 表格');
+    const tableGrid = el('div', 'idocs-ws-table-grid');
+    const tableCells = [];
+    let hoverRows = 3;
+    let hoverCols = 3;
+    for (let r = 1; r <= 6; r += 1) {
+        for (let c = 1; c <= 6; c += 1) {
+            const cell = el('button', 'idocs-ws-table-cell');
+            cell.type = 'button';
+            cell.dataset.rows = String(r);
+            cell.dataset.cols = String(c);
+            cell.setAttribute('aria-label', `${r} 行 ${c} 列`);
+            tableCells.push(cell);
+            tableGrid.append(cell);
+        }
+    }
+    tablePopover.append(tableGridHead, tableGrid);
+    tableAnchor.append(tablePopover);
+    stage.append(editorHost, selPill, dock);
+    railSlot.append(rail);
+    body.append(railSlot, stage);
+    root.append(toolbar, body);
+    container.append(root);
+    const paintTableGrid = (rows, cols) => {
+        hoverRows = rows;
+        hoverCols = cols;
+        tableGridHead.textContent = `${rows} × ${cols} 表格`;
+        for (const cell of tableCells) {
+            const r = Number(cell.dataset.rows);
+            const c = Number(cell.dataset.cols);
+            cell.classList.toggle('is-hot', r <= rows && c <= cols);
+        }
+    };
+    paintTableGrid(3, 3);
+    const setTablePopoverOpen = (open) => {
+        tablePopover.hidden = !open;
+        tableAnchor.querySelector('.idocs-ws-dock-btn')?.setAttribute('aria-expanded', String(open));
+    };
+    const closeAllPopovers = () => {
+        setTablePopoverOpen(false);
+        closeToolbarMenu();
+    };
+    let view;
+    const syncZoom = () => {
+        zoomLabel.textContent = `${Math.round(view.zoom * 100)}%`;
+    };
+    const updatePill = (sel) => {
+        if (readOnly ||
+            view?.dragging ||
+            !sel ||
+            !sel.clientRect ||
+            !pillQuoteBtn ||
+            !sel.excerpt?.trim()) {
+            selPill.hidden = true;
+            return;
+        }
+        selPill.hidden = false;
+        const stageRect = stage.getBoundingClientRect();
+        const pillWidth = selPill.offsetWidth || 92;
+        const pillHeight = selPill.offsetHeight || 32;
+        const left = Math.max(8, Math.min(stageRect.width - pillWidth - 8, sel.clientRect.left - stageRect.left + sel.clientRect.width / 2 - pillWidth / 2));
+        const top = Math.max(8, sel.clientRect.top - stageRect.top - pillHeight - 8);
+        selPill.style.left = `${Math.round(left)}px`;
+        selPill.style.top = `${Math.round(top)}px`;
+    };
+    const renderToolbarCenter = () => {
+        const sel = view.selection();
+        const ctx = resolveToolbarContext({
+            readOnly,
+            processing,
+            busyLabel,
+            readOnlyTarget: view.readOnlyTarget(),
+            selectedImage: view.selectedImage(),
+            selection: sel,
+            document: activeDoc,
+        });
+        const nextKey = toolbarRenderKey(ctx, tableModePreferred);
+        if (nextKey !== null && nextKey === lastToolbarKey) {
+            return;
+        }
+        lastToolbarKey = nextKey ?? '';
+        closeToolbarMenu();
+        tbContent.replaceChildren();
+        if (ctx.kind === 'readOnly') {
+            if (ctx.processing) {
+                const status = el('span', 'idocs-ws-processing-indicator');
+                status.setAttribute('role', 'status');
+                status.setAttribute('aria-label', ctx.label);
+                status.title = ctx.label;
+                const ring = el('span', 'idocs-ws-spinner');
+                ring.setAttribute('aria-hidden', 'true');
+                status.append(ring);
+                tbContent.append(status);
+            }
+            return;
+        }
+        if (ctx.kind === 'readOnlyTarget') {
+            const box = el('div', 'idocs-ws-ctx is-readonly-target');
+            box.append(el('span', 'idocs-ws-badge is-warn', '此内容暂不支持编辑'));
+            if (options.onQuoteSelection && ctx.target.excerpt?.trim()) {
+                const quoteBtn = el('button', 'idocs-ws-pill-btn');
+                quoteBtn.type = 'button';
+                quoteBtn.append(makeSvgIcon(ICONS.ask, 15), el('span', undefined, askLabel));
+                quoteBtn.addEventListener('click', () => {
+                    const target = view.readOnlyTarget();
+                    if (!target?.excerpt?.trim())
+                        return;
+                    options.onQuoteSelection?.({ text: target.excerpt, path: target.path, page: target.page });
+                });
+                box.append(quoteBtn);
+            }
+            const clearBtn = el('button', 'idocs-ws-pill-btn', '取消选中');
+            clearBtn.type = 'button';
+            clearBtn.addEventListener('click', () => {
+                view.clearReadOnlyTarget();
+                view.focus();
+            });
+            box.append(clearBtn);
+            tbContent.append(box);
+            return;
+        }
+        if (ctx.kind === 'image') {
+            const box = el('div', 'idocs-ws-ctx');
+            box.append(el('span', 'idocs-ws-badge', '插图'));
+            for (const ratio of [0.5, 0.75, 1]) {
+                const btn = el('button', 'idocs-ws-pill-btn', `宽度 ${Math.round(ratio * 100)}%`);
+                btn.type = 'button';
+                btn.addEventListener('click', () => {
+                    void view.editImage(ctx.target.path, { widthRatio: ratio });
+                });
+                box.append(btn);
+            }
+            box.append(el('span', 'idocs-ws-divider'));
+            for (const [align, label] of [
+                ['left', '左对齐'],
+                ['center', '居中'],
+                ['right', '右对齐'],
+            ]) {
+                const btn = el('button', 'idocs-ws-pill-btn', label);
+                btn.type = 'button';
+                btn.addEventListener('click', () => {
+                    void view.editImage(ctx.target.path, { align });
+                });
+                box.append(btn);
+            }
+            if (options.onPickImage) {
+                const replaceBtn = el('button', 'idocs-ws-pill-btn', '替换图片');
+                replaceBtn.type = 'button';
+                replaceBtn.addEventListener('click', async () => {
+                    const picked = await options.onPickImage?.();
+                    if (picked && !destroyed) {
+                        await view.editImage(ctx.target.path, { src: picked.src, alt: picked.alt });
+                    }
+                });
+                box.append(replaceBtn);
+            }
+            const doneBtn = el('button', 'idocs-ws-pill-btn', '完成');
+            doneBtn.type = 'button';
+            doneBtn.addEventListener('click', () => view.clearSelectedImage());
+            box.append(doneBtn);
+            tbContent.append(box);
+            return;
+        }
+        const inTable = ctx.kind === 'editable' && ctx.inTable;
+        const showTable = inTable && tableModePreferred;
+        const box = el('div', showTable ? 'idocs-ws-ctx is-table' : 'idocs-ws-ctx');
+        if (inTable) {
+            const seg = el('div', 'idocs-ws-seg');
+            const textTab = el('button', 'idocs-ws-seg-btn', '文字');
+            textTab.type = 'button';
+            textTab.setAttribute('aria-pressed', String(!showTable));
+            textTab.addEventListener('click', () => {
+                tableModePreferred = false;
+                renderToolbarCenter();
+            });
+            const tableTab = el('button', 'idocs-ws-seg-btn', '表格');
+            tableTab.type = 'button';
+            tableTab.setAttribute('aria-pressed', String(showTable));
+            tableTab.addEventListener('click', () => {
+                tableModePreferred = true;
+                renderToolbarCenter();
+            });
+            seg.append(textTab, tableTab);
+            box.append(seg, el('span', 'idocs-ws-divider'));
+        }
+        if (showTable) {
+            const tableActions = [
+                ['insertRowAbove', '上方插入行'],
+                ['insertRowBelow', '下方插入行'],
+                ['insertColumnLeft', '左侧插入列'],
+                ['insertColumnRight', '右侧插入列'],
+                ['deleteRow', '删除行', true],
+                ['deleteColumn', '删除列', true],
+                ['toggleHeaderRow', '重复表头'],
+            ];
+            for (const [action, label, danger] of tableActions) {
+                const btn = el('button', danger ? 'idocs-ws-pill-btn is-danger' : 'idocs-ws-pill-btn', label);
+                btn.type = 'button';
+                if (action === 'toggleHeaderRow')
+                    btn.title = '开启或关闭跨页重复表头';
+                btn.addEventListener('click', () => {
+                    void view.editTable(action);
+                });
+                box.append(btn);
+            }
+            tbContent.append(box);
+            return;
+        }
+        const styleOptions = [
+            ['body', '正文'],
+            ['heading1', '一级标题'],
+            ['heading2', '二级标题'],
+            ['heading3', '三级标题'],
+        ];
+        const activeStyle = ctx.kind === 'editable' ? ctx.blockStyle : undefined;
+        const selectedStyle = activeStyle ?? 'body';
+        const selectedLabel = styleOptions.find(([v]) => v === selectedStyle)?.[1] ?? '正文';
+        const styleTrigger = el('button', 'idocs-ws-select-trigger');
+        styleTrigger.type = 'button';
+        styleTrigger.setAttribute('role', 'combobox');
+        styleTrigger.setAttribute('aria-haspopup', 'listbox');
+        styleTrigger.setAttribute('aria-expanded', 'false');
+        styleTrigger.setAttribute('aria-label', '段落样式');
+        styleTrigger.disabled = ctx.kind !== 'editable' || activeStyle === undefined;
+        const styleValueSpan = el('span', 'idocs-ws-select-value', selectedLabel);
+        const chevronSvg = makeSvgIcon(ICONS.chevronDown, 14);
+        chevronSvg.classList.add('idocs-ws-select-chevron');
+        styleTrigger.append(styleValueSpan, chevronSvg);
+        styleTrigger.addEventListener('mousedown', (event) => event.preventDefault());
+        const stylePopover = el('div', 'idocs-ws-popover is-down idocs-ws-style-popover');
+        stylePopover.setAttribute('role', 'listbox');
+        stylePopover.setAttribute('aria-label', '段落样式');
+        stylePopover.hidden = true;
+        const styleItems = [];
+        let highlightedStyleIdx = Math.max(0, styleOptions.findIndex(([v]) => v === selectedStyle));
+        const syncStyleHighlight = (nextIdx) => {
+            highlightedStyleIdx = (nextIdx + styleItems.length) % styleItems.length;
+            styleItems.forEach((item, idx) => {
+                if (idx === highlightedStyleIdx)
+                    item.dataset.highlighted = 'true';
+                else
+                    delete item.dataset.highlighted;
+            });
+        };
+        for (let idx = 0; idx < styleOptions.length; idx += 1) {
+            const [val, label] = styleOptions[idx];
+            const isSelected = val === selectedStyle;
+            const item = el('button', isSelected ? 'idocs-ws-menu-item is-active' : 'idocs-ws-menu-item');
+            item.type = 'button';
+            item.setAttribute('role', 'option');
+            item.setAttribute('aria-selected', String(isSelected));
+            item.dataset.value = val;
+            item.append(el('span', 'idocs-ws-menu-label', label));
+            if (isSelected) {
+                const checkWrap = el('span', 'idocs-ws-menu-check');
+                checkWrap.setAttribute('aria-hidden', 'true');
+                checkWrap.append(makeSvgIcon(ICONS.check, 14));
+                item.append(checkWrap);
+            }
+            item.addEventListener('mousedown', (event) => event.preventDefault());
+            item.addEventListener('mouseenter', () => syncStyleHighlight(idx));
+            item.addEventListener('click', (event) => {
+                event.stopPropagation();
+                closeAllPopovers();
+                void view.setBlockStyle(val);
+            });
+            styleItems.push(item);
+            stylePopover.append(item);
+        }
+        const toggleStylePopover = (forceOpen) => {
+            if (styleTrigger.disabled)
+                return;
+            const shouldOpen = forceOpen ?? Boolean(stylePopover.hidden);
+            toggleToolbarMenu(styleTrigger, stylePopover, shouldOpen);
+            if (shouldOpen) {
+                syncStyleHighlight(Math.max(0, styleOptions.findIndex(([v]) => v === selectedStyle)));
+            }
+        };
+        styleTrigger.addEventListener('click', (event) => {
+            event.stopPropagation();
+            toggleStylePopover();
+        });
+        styleTrigger.addEventListener('keydown', (event) => {
+            if (event.key === 'ArrowDown') {
+                event.preventDefault();
+                if (stylePopover.hidden)
+                    toggleStylePopover(true);
+                else
+                    syncStyleHighlight(highlightedStyleIdx + 1);
+            }
+            else if (event.key === 'ArrowUp') {
+                event.preventDefault();
+                if (stylePopover.hidden)
+                    toggleStylePopover(true);
+                else
+                    syncStyleHighlight(highlightedStyleIdx - 1);
+            }
+            else if ((event.key === 'Enter' || event.key === ' ') && !stylePopover.hidden) {
+                event.preventDefault();
+                const picked = styleOptions[highlightedStyleIdx]?.[0];
+                closeAllPopovers();
+                if (picked)
+                    void view.setBlockStyle(picked);
+            }
+            else if (event.key === 'Escape' && !stylePopover.hidden) {
+                event.preventDefault();
+                event.stopPropagation();
+                closeAllPopovers();
+            }
+        });
+        stylePopover.addEventListener('click', (event) => event.stopPropagation());
+        box.append(styleTrigger, stylePopover, el('span', 'idocs-ws-divider'));
+        const collapsed = ctx.kind !== 'editable' || ctx.collapsed;
+        const marks = [
+            ['bold', '粗体', ICONS.bold],
+            ['italic', '斜体', ICONS.italic],
+            ['underline', '下划线', ICONS.underline],
+            ['strike', '删除线', ICONS.strike],
+        ];
+        for (const [mark, label, icon] of marks) {
+            const btn = el('button', 'idocs-ws-icon-btn');
+            btn.type = 'button';
+            btn.title = label;
+            btn.setAttribute('aria-label', label);
+            btn.disabled = collapsed;
+            btn.append(makeSvgIcon(icon));
+            btn.addEventListener('mousedown', (event) => event.preventDefault());
+            btn.addEventListener('click', () => {
+                void view.toggleMark(mark);
+            });
+            box.append(btn);
+        }
+        box.append(el('span', 'idocs-ws-divider'));
+        const alignBtn = el('button', 'idocs-ws-icon-btn');
+        alignBtn.type = 'button';
+        alignBtn.title = '对齐方式';
+        alignBtn.setAttribute('aria-label', '对齐方式');
+        alignBtn.setAttribute('aria-haspopup', 'menu');
+        alignBtn.setAttribute('aria-expanded', 'false');
+        alignBtn.disabled = ctx.kind !== 'editable';
+        alignBtn.append(makeSvgIcon(ICONS.align));
+        alignBtn.addEventListener('mousedown', (event) => event.preventDefault());
+        const alignPopover = el('div', 'idocs-ws-popover is-down idocs-ws-align-popover');
+        alignPopover.setAttribute('role', 'menu');
+        alignPopover.hidden = true;
+        const currentAlign = ctx.kind === 'editable' ? (ctx.align ?? 'left') : undefined;
+        for (const [align, label] of [
+            ['left', '左对齐'],
+            ['center', '居中对齐'],
+            ['right', '右对齐'],
+            ['justify', '两端对齐'],
+        ]) {
+            const isSelected = currentAlign === align;
+            const item = el('button', isSelected ? 'idocs-ws-menu-item is-active' : 'idocs-ws-menu-item');
+            item.type = 'button';
+            item.setAttribute('role', 'menuitemradio');
+            item.setAttribute('aria-checked', String(isSelected));
+            item.append(el('span', 'idocs-ws-menu-label', label));
+            if (isSelected) {
+                const checkWrap = el('span', 'idocs-ws-menu-check');
+                checkWrap.setAttribute('aria-hidden', 'true');
+                checkWrap.append(makeSvgIcon(ICONS.check, 14));
+                item.append(checkWrap);
+            }
+            item.addEventListener('mousedown', (event) => event.preventDefault());
+            item.addEventListener('click', (event) => {
+                event.stopPropagation();
+                closeAllPopovers();
+                void view.setAlignment(align);
+            });
+            alignPopover.append(item);
+        }
+        alignBtn.addEventListener('click', (event) => {
+            event.stopPropagation();
+            toggleToolbarMenu(alignBtn, alignPopover, Boolean(alignPopover.hidden));
+        });
+        alignPopover.addEventListener('click', (event) => event.stopPropagation());
+        box.append(alignBtn, alignPopover);
+        tbContent.append(box);
+    };
+    const paintThumbnails = () => {
+        if (!railOpen || !activeDoc || railTab !== 'pages')
+            return;
+        const canvases = railList.querySelectorAll('.idocs-ws-thumb-canvas');
+        const dpr = Math.max(1, Math.min(2, globalThis.devicePixelRatio || 1));
+        canvases.forEach((canvas, idx) => {
+            const page = activeDoc?.pages[idx];
+            if (!page)
+                return;
+            const cssWidth = Math.max(120, Math.round(canvas.clientWidth || 164));
+            const scale = cssWidth / page.width;
+            const cssHeight = Math.max(40, Math.round(page.height * scale));
+            const pxPerPt = scale * dpr;
+            canvas.width = Math.max(1, Math.round(cssWidth * dpr));
+            canvas.height = Math.max(1, Math.round(cssHeight * dpr));
+            canvas.style.aspectRatio = `${page.width} / ${page.height}`;
+            const ctx = canvas.getContext('2d');
+            if (!ctx)
+                return;
+            paintPage(ctx, page, pxPerPt, thumbImages, activeDoc?.glyphOutlines ?? []);
+        });
+    };
+    const updateRailHighlight = (pageIndex) => {
+        const cards = railList.querySelectorAll('.idocs-ws-thumb-card');
+        cards.forEach((card, idx) => {
+            const active = idx === pageIndex;
+            card.classList.toggle('is-active', active);
+            if (active)
+                card.setAttribute('aria-current', 'page');
+            else
+                card.removeAttribute('aria-current');
+        });
+    };
+    const updateOutlineHighlight = (activePath) => {
+        if (railTab !== 'outline' || activePath === lastOutlinePath)
+            return;
+        lastOutlinePath = activePath;
+        const items = railList.querySelectorAll('.idocs-ws-outline-item');
+        items.forEach((item) => {
+            item.classList.toggle('is-active', Boolean(activePath && item.dataset.path === activePath));
+        });
+    };
+    const renderRail = () => {
+        if (!railOpen || (renderedRailDoc === activeDoc && renderedRailTab === railTab))
+            return;
+        renderedRailDoc = activeDoc;
+        renderedRailTab = railTab;
+        lastOutlinePath = undefined;
+        pagesTabBtn.setAttribute('aria-selected', String(railTab === 'pages'));
+        outlineTabBtn.setAttribute('aria-selected', String(railTab === 'outline'));
+        railList.classList.toggle('is-outline', railTab === 'outline');
+        railList.innerHTML = '';
+        if (railTab === 'pages') {
+            if (!sameImageList(lastThumbImages, activeDoc?.images ?? [])) {
+                const nextImages = activeDoc?.images ?? [];
+                lastThumbImages = nextImages;
+                for (const image of thumbImages)
+                    image?.close();
+                thumbImages = [];
+                if (nextImages.length > 0) {
+                    void decodeImages(nextImages).then((decoded) => {
+                        if (destroyed || lastThumbImages !== nextImages) {
+                            for (const image of decoded)
+                                image?.close();
+                            return;
+                        }
+                        thumbImages = decoded;
+                        if (railOpen)
+                            paintThumbnails();
+                        else
+                            renderedRailDoc = undefined;
+                    });
+                }
+            }
+            const pages = activeDoc?.pages ?? [];
+            if (pages.length === 0) {
+                railList.append(el('div', 'idocs-ws-empty', '正在加载页面…'));
+                return;
+            }
+            pages.forEach((_, idx) => {
+                const card = el('button', 'idocs-ws-thumb-card');
+                card.type = 'button';
+                card.setAttribute('aria-label', `第 ${idx + 1} 页`);
+                if (idx === view.currentPage) {
+                    card.classList.add('is-active');
+                    card.setAttribute('aria-current', 'page');
+                }
+                const sheet = el('span', 'idocs-ws-thumb-sheet');
+                sheet.setAttribute('aria-hidden', 'true');
+                const canvas = el('canvas', 'idocs-ws-thumb-canvas');
+                sheet.append(canvas);
+                const label = el('span', 'idocs-ws-thumb-label', String(idx + 1));
+                label.setAttribute('aria-hidden', 'true');
+                card.append(label, sheet);
+                card.addEventListener('click', () => view.goToPage(idx, { behavior: 'smooth' }));
+                railList.append(card);
+            });
+            paintThumbnails();
+            return;
+        }
+        const entries = activeDoc ? extractOutline(activeDoc) : [];
+        if (entries.length === 0) {
+            railList.append(el('div', 'idocs-ws-empty', '暂无标题，可将段落设为一级至三级标题'));
+            return;
+        }
+        const activePath = view.selection()?.path;
+        for (const entry of entries) {
+            const item = el('button', `idocs-ws-outline-item level-${entry.level}`, entry.text);
+            item.type = 'button';
+            item.dataset.path = entry.path;
+            item.classList.toggle('is-active', activePath === entry.path);
+            item.title = entry.text;
+            item.addEventListener('click', () => {
+                view.goToPage(entry.page, { behavior: 'smooth' });
+                if (entry.anchor) {
+                    void view.selectAnchors(entry.anchor);
+                }
+            });
+            railList.append(item);
+        }
+    };
+    const syncHistoryButtons = (state) => {
+        undoBtn.disabled = readOnly || !state.canUndo;
+        redoBtn.disabled = readOnly || !state.canRedo;
+    };
+    const syncDocument = (doc) => {
+        if (doc === activeDoc)
+            return;
+        activeDoc = doc;
+        renderRail();
+        renderToolbarCenter();
+    };
+    view = mountEditor(editorHost, session, {
+        ...options.view,
+        bottomInset: options.view?.bottomInset ?? 68,
+        readOnly,
+        onPageChange: (page, doc) => {
+            updateRailHighlight(page);
+            options.view?.onPageChange?.(page, doc);
+        },
+        onZoomChange: (next) => {
+            syncZoom();
+            if (!selPill.hidden)
+                updatePill(view.selection());
+            options.view?.onZoomChange?.(next);
+        },
+        onSelectionChange: (sel) => {
+            updatePill(sel);
+            updateOutlineHighlight(sel?.path);
+            renderToolbarCenter();
+            options.view?.onSelectionChange?.(sel);
+        },
+        onReadOnlyTarget: (target) => {
+            updatePill(null);
+            renderToolbarCenter();
+            options.view?.onReadOnlyTarget?.(target);
+        },
+        onImageSelect: (target) => {
+            updatePill(null);
+            renderToolbarCenter();
+            options.view?.onImageSelect?.(target);
+        },
+    });
+    const onSessionState = (state) => {
+        if (destroyed)
+            return;
+        syncHistoryButtons(state);
+        if (state.layout.kind === 'ready') {
+            syncDocument(state.layout.frame.document);
+        }
+        else if (state.layout.kind === 'pending' && !activeDoc && state.layout.previous) {
+            syncDocument(state.layout.previous.document);
+        }
+    };
+    const unsubscribe = session.subscribe(onSessionState);
+    onSessionState(session.state());
+    syncZoom();
+    const onDocClick = (event) => {
+        if (!event.composedPath().includes(tableAnchor))
+            closeAllPopovers();
+    };
+    const onDocKeydown = (event) => {
+        if (event.key === 'Escape')
+            closeAllPopovers();
+    };
+    document.addEventListener('click', onDocClick);
+    document.addEventListener('keydown', onDocKeydown);
+    const applyRailOpen = (open) => {
+        railOpen = open;
+        body.classList.toggle('is-rail-collapsed', !open);
+        if ('inert' in rail)
+            rail.inert = !open;
+        rail.setAttribute('aria-hidden', String(!open));
+        const label = open ? '收起页面列表' : '展开页面列表';
+        railToggleBtn.title = label;
+        railToggleBtn.setAttribute('aria-label', label);
+        railToggleBtn.setAttribute('aria-expanded', String(open));
+        if (open) {
+            renderRail();
+            if (railTab === 'pages')
+                updateRailHighlight(view.currentPage);
+            else
+                updateOutlineHighlight(view.selection()?.path);
+        }
+    };
+    editorHost
+        .querySelector('.idocs-preview-scroller')
+        ?.addEventListener('scroll', () => {
+        if (!selPill.hidden)
+            updatePill(view.selection());
+    }, { passive: true });
+    railSlot.addEventListener('transitionend', () => updatePill(view.selection()));
+    railToggleBtn.addEventListener('click', () => applyRailOpen(!railOpen));
+    pagesTabBtn.addEventListener('click', () => {
+        if (railTab === 'pages')
+            return;
+        railTab = 'pages';
+        renderRail();
+    });
+    outlineTabBtn.addEventListener('click', () => {
+        if (railTab === 'outline')
+            return;
+        railTab = 'outline';
+        renderRail();
+    });
+    undoBtn.addEventListener('click', () => void view.undo());
+    redoBtn.addEventListener('click', () => void view.redo());
+    zoomOutBtn.addEventListener('click', () => {
+        view.setZoom(Math.max(0.25, view.zoom - 0.15));
+        syncZoom();
+    });
+    zoomInBtn.addEventListener('click', () => {
+        view.setZoom(Math.min(4, view.zoom + 0.15));
+        syncZoom();
+    });
+    fitWidthBtn.addEventListener('click', () => {
+        view.setZoom(view.fitWidthZoom);
+        syncZoom();
+    });
+    findBtn.addEventListener('click', () => view.find.open());
+    pillQuoteBtn?.addEventListener('click', () => {
+        const sel = view.selection();
+        const text = sel?.excerpt;
+        if (!sel || !text?.trim())
+            return;
+        options.onQuoteSelection?.({ text, path: sel.path, page: sel.page });
+    });
+    const insertAndFocus = async (block) => {
+        const active = document.activeElement;
+        const commit = await view.insertBlock(block);
+        if (commit?.selection && !destroyed && !readOnly && document.activeElement === active)
+            view.focus();
+    };
+    dock.append(makeDockButton(ICONS.paragraph, '段落', () => void insertAndFocus({ kind: 'paragraph' })), makeDockButton(ICONS.heading, '标题', () => void insertAndFocus({ kind: 'heading', level: 2 })));
+    tableAnchor.prepend(makeDockButton(ICONS.table, '表格', () => {
+        closeToolbarMenu();
+        setTablePopoverOpen(Boolean(tablePopover.hidden));
+    }, tablePopover));
+    dock.append(tableAnchor, makeDockButton(ICONS.callout, '提示框', () => void insertAndFocus({ kind: 'callout', colors: options.calloutColors })));
+    if (options.onPickImage) {
+        dock.append(makeDockButton(ICONS.image, '图片', async () => {
+            const picked = await options.onPickImage?.();
+            if (picked && !destroyed) {
+                await view.insertBlock({ kind: 'image', src: picked.src, alt: picked.alt });
+            }
+        }));
+    }
+    dock.append(makeDockButton(ICONS.pageBreak, '分页符', () => void view.insertBlock({ kind: 'pageBreak' })));
+    const detachInsertButtons = options.mountInsertButtons?.(insertButtons);
+    tableGrid.addEventListener('mouseover', (event) => {
+        const cell = event.target?.closest('.idocs-ws-table-cell');
+        if (!cell)
+            return;
+        paintTableGrid(Number(cell.dataset.rows), Number(cell.dataset.cols));
+    });
+    tableGrid.addEventListener('click', (event) => {
+        const cell = event.target?.closest('.idocs-ws-table-cell');
+        const rows = cell ? Number(cell.dataset.rows) : hoverRows;
+        const cols = cell ? Number(cell.dataset.cols) : hoverCols;
+        closeAllPopovers();
+        void view.insertBlock({ kind: 'table', rows, cols });
+    });
+    return {
+        view,
+        get readOnly() {
+            return readOnly;
+        },
+        get processing() {
+            return processing;
+        },
+        setReadOnly(next, nextBusyLabel, nextProcessing) {
+            if (destroyed)
+                return;
+            readOnly = next;
+            busyLabel = nextBusyLabel;
+            processing = next ? (nextProcessing ?? Boolean(nextBusyLabel)) : false;
+            root.classList.toggle('is-readonly', readOnly);
+            root.classList.toggle('is-processing', processing);
+            view.setReadOnly(next);
+            dock.hidden = next;
+            if (next) {
+                selPill.hidden = true;
+                closeAllPopovers();
+            }
+            else {
+                updatePill(view.selection());
+            }
+            syncHistoryButtons(session.state());
+            renderToolbarCenter();
+        },
+        setRailOpen(open) {
+            if (destroyed)
+                return;
+            applyRailOpen(open);
+        },
+        destroy() {
+            if (destroyed)
+                return;
+            destroyed = true;
+            toolbarScroller.destroy();
+            document.removeEventListener('click', onDocClick);
+            document.removeEventListener('keydown', onDocKeydown);
+            unsubscribe();
+            view.destroy();
+            detachInsertButtons?.();
+            for (const img of thumbImages)
+                img?.close();
+            thumbImages = [];
+            root.remove();
+        },
+    };
+}