@mdzip/editor 1.3.21 → 1.4.4

package/dist/view.js

@@ -1,9 +1,9 @@
 import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
 import { markdown } from '@codemirror/lang-markdown';
-import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { HighlightStyle, syntaxHighlighting, syntaxTree } from '@codemirror/language';
 import { closeSearchPanel, openSearchPanel, search, searchKeymap } from '@codemirror/search';
-import { Compartment, EditorState } from '@codemirror/state';
-import { Decoration, EditorView, MatchDecorator, ViewPlugin, dropCursor, keymap, lineNumbers } from '@codemirror/view';
+import { Compartment, EditorState, RangeSetBuilder, StateEffect, StateField } from '@codemirror/state';
+import { Decoration, EditorView, MatchDecorator, ViewPlugin, WidgetType, dropCursor, keymap, lineNumbers } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 import { Bold, Check, ChevronDown, ChevronRight, ClipboardPaste, ClipboardType, Code, Columns2, Copy, Eraser, Eye, File, FileBraces, FileImage, Folder, FolderOpen, Hash, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlighter, ImagePlus, Info, Italic, Link2Off, Link, List, ListOrdered, CornerDownLeft, Moon, PackagePlus, PanelLeft, Pilcrow, Quote, Save, Scissors, Search, SpellCheck, SquareCode, SquarePen, Strikethrough, Sun, TextSelect, ZoomIn } from 'lucide';
 import { browserClipboardHasImage, readBrowserClipboardImage } from './browser.js';
@@ -13,7 +13,9 @@ import { MD_MARKDOWN_ICON } from './icons/md-markdown.js';
 import { MDZIP_RUNTIME_LIBRARIES } from './library-info.js';
 import { MdzipWorkspaceService, extensionForMime, normalizeArchivePath, relativeArchivePath } from './workspace.js';
 import { buildMdzipNavTree, canEditMdzipPath, escapeHtml, isOrphanedMdzipAsset, mdzipEntryIconKind, isMdzipManifestPath, resolveMdzipArchiveLinkTarget, renderMdzipPreviewHtml } from './workspace-view.js';
-import { MdzipRenderingService, defaultSafeMarkdownRenderer } from './rendering.js';
+import { escapeMarkdownImageAlt, findImageReferenceAtOffset, formatImageEditMarkdown } from './image-edit.js';
+import { MdzipRenderingService, defaultSafeMarkdownRenderer, groupTokensIntoChunks, chunkSourceKey, tokenEmbedsImage, tokenIsHeading } from './rendering.js';
+import { mdzipFrontMatterExtension } from './front-matter-extension.js';
 import { WORKSPACE_CSS } from './view-css.js';
 const STYLE_ATTR = 'data-mdzip-ws-styles';
 const IMAGE_EXTENSIONS = /\.(jpg|jpeg|png|gif|webp|svg|bmp|ico|tiff?)$/i;
@@ -31,6 +33,7 @@ const IMAGE_ICON_HTML = lucideIcon(FileImage, NAV_ICON_CLASS);
 const FILE_ICON_HTML = lucideIcon(File, NAV_ICON_CLASS);
 const ORPHAN_ICON_HTML = lucideIcon(Link2Off, '');
 const SOURCE_EDIT_ICON_HTML = lucideIcon(SquarePen, TOOLBAR_ICON_CLASS);
+const IMAGE_EDIT_AFFORDANCE_ICON_HTML = lucideIcon(SquarePen, 'mdzip-image-edit-affordance-icon');
 const SOURCE_MARKDOWN_ICON_HTML = lucideIcon(Hash, TOOLBAR_ICON_CLASS);
 const NAV_TOGGLE_ICON_HTML = lucideIcon(PanelLeft, `${TOOLBAR_ICON_CLASS} nav-toggle-icon`);
 const CONVERT_TO_MDZ_ICON_HTML = lucideIcon(PackagePlus, `${TOOLBAR_ICON_CLASS} convert-mdz-icon`);
@@ -433,6 +436,29 @@ const mdzipEditorTheme = EditorView.theme({
         color: 'var(--mdzip-muted-foreground-color)',
         opacity: '0.65',
     },
+    '.mdzip-image-edit-affordance': {
+        display: 'inline-flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        width: '20px',
+        height: '20px',
+        marginLeft: '2px',
+        padding: '0',
+        verticalAlign: 'middle',
+        border: 'none',
+        borderRadius: '4px',
+        background: 'var(--mdzip-widget-background-color)',
+        color: 'var(--mdzip-muted-foreground-color)',
+        cursor: 'pointer',
+    },
+    '.mdzip-image-edit-affordance:hover': {
+        background: 'var(--mdzip-control-hover-background-color)',
+        color: 'var(--mdzip-control-foreground-color)',
+    },
+    '.mdzip-image-edit-affordance-icon': {
+        width: '13px',
+        height: '13px',
+    },
     '.cm-panels': {
         background: 'var(--mdzip-widget-background-color)',
         color: 'var(--mdzip-editor-foreground-color)',
@@ -555,6 +581,100 @@ const htmlTagMarkerHighlight = ViewPlugin.fromClass(class {
 }, {
     decorations: value => value.decorations
 });
+// Fenced/indented code blocks, inline code spans, and link/image URLs aren't
+// prose — the browser's spellchecker has no dictionary for shell syntax or
+// filenames, so it just underlines everything. Syntax-tree node ranges (not
+// a MatchDecorator regexp) are required here because MatchDecorator only
+// matches within a single line, and fenced code blocks span many.
+const NO_SPELLCHECK_NODE_NAMES = new Set(['FencedCode', 'CodeBlock', 'InlineCode', 'URL']);
+const noSpellcheckMark = Decoration.mark({ attributes: { spellcheck: 'false' } });
+function buildNoSpellcheckDecorations(view) {
+    const builder = new RangeSetBuilder();
+    for (const { from, to } of view.visibleRanges) {
+        syntaxTree(view.state).iterate({
+            from,
+            to,
+            enter: (node) => {
+                if (NO_SPELLCHECK_NODE_NAMES.has(node.name)) {
+                    builder.add(node.from, node.to, noSpellcheckMark);
+                    return false;
+                }
+                return true;
+            }
+        });
+    }
+    return builder.finish();
+}
+const noSpellcheckHighlight = ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.decorations = buildNoSpellcheckDecorations(view);
+    }
+    update(update) {
+        if (update.docChanged || update.viewportChanged || syntaxTree(update.state) !== syntaxTree(update.startState)) {
+            this.decorations = buildNoSpellcheckDecorations(update.view);
+        }
+    }
+}, {
+    decorations: value => value.decorations
+});
+// Click-to-edit affordance for existing image references. Populated
+// on-click (not continuously, since the trigger is click not hover) via a
+// StateEffect dispatched from the editor's `click` domEventHandler in
+// createCmEditor. Fully inert unless a host imageEditHandler is set — see
+// that click handler's own gate.
+const IMAGE_EDIT_AFFORDANCE_CLICK_EVENT = 'mdzip-image-edit-affordance-click';
+const imageEditAffordanceEffect = StateEffect.define();
+class ImageEditAffordanceWidget extends WidgetType {
+    constructor(from, to) {
+        super();
+        this.from = from;
+        this.to = to;
+    }
+    eq(other) {
+        return other.from === this.from && other.to === this.to;
+    }
+    toDOM() {
+        const btn = document.createElement('button');
+        btn.type = 'button';
+        btn.className = 'mdzip-image-edit-affordance';
+        btn.setAttribute('aria-label', 'Edit image');
+        btn.setAttribute('data-mdzip-image-edit-affordance', '');
+        btn.innerHTML = IMAGE_EDIT_AFFORDANCE_ICON_HTML;
+        // Buttons are natively focusable; without this, clicking one moves DOM
+        // focus onto it and blurs the CodeMirror content — which would clear
+        // (and remove from the DOM) this very widget via the blur handler below
+        // before its own click event has a chance to fire.
+        btn.addEventListener('mousedown', (event) => event.preventDefault());
+        btn.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            btn.dispatchEvent(new CustomEvent(IMAGE_EDIT_AFFORDANCE_CLICK_EVENT, {
+                bubbles: true,
+                detail: { from: this.from, to: this.to }
+            }));
+        });
+        return btn;
+    }
+}
+function imageEditAffordanceDeco(from, to) {
+    return Decoration.set([Decoration.widget({ widget: new ImageEditAffordanceWidget(from, to), side: 1 }).range(to)]);
+}
+const imageEditAffordanceField = StateField.define({
+    create: () => Decoration.none,
+    update(value, tr) {
+        value = value.map(tr.changes);
+        if (tr.docChanged) {
+            value = Decoration.none;
+        }
+        for (const effect of tr.effects) {
+            if (effect.is(imageEditAffordanceEffect)) {
+                value = effect.value ? imageEditAffordanceDeco(effect.value.from, effect.value.to) : Decoration.none;
+            }
+        }
+        return value;
+    },
+    provide: (field) => EditorView.decorations.from(field)
+});
 function injectStyles(doc) {
     const existing = doc.querySelector(`style[${STYLE_ATTR}]`);
     if (existing) {
@@ -626,19 +746,19 @@ depth = 0) {
                 : isImageFile(node.entry.path)
                     ? IMAGE_ICON_HTML
                     : FILE_ICON_HTML;
-        const orphanBtnHtml = isOrphaned && options.allowOrphanActions ? `
-      <span class="nav-orphan-button" role="button" tabindex="0"
-        title="Orphaned asset" aria-label="Orphaned asset actions"
-        data-orphan-path="${safePath}">
-        ${ORPHAN_ICON_HTML}
+        const orphanBtnHtml = isOrphaned && options.allowOrphanActions ? `
+      <span class="nav-orphan-button" role="button" tabindex="0"
+        title="Orphaned asset" aria-label="Orphaned asset actions"
+        data-orphan-path="${safePath}">
+        ${ORPHAN_ICON_HTML}
       </span>` : '';
         const draggable = options.allowDrag && !isManifest;
-        return `<button type="button" class="${classes}" title="${title}"
-      data-nav-path="${safePath}" data-orphan="${isOrphaned ? 'true' : ''}"${draggable ? ' draggable="true"' : ''}>
-      ${guides}<span class="nav-caret"></span>
-      <span class="nav-file-icon ${iconKind}">${iconHtml}</span>
-      ${orphanBtnHtml}
-      <span class="nav-label">${safeName}</span>
+        return `<button type="button" class="${classes}" title="${title}"
+      data-nav-path="${safePath}" data-orphan="${isOrphaned ? 'true' : ''}"${draggable ? ' draggable="true"' : ''}>
+      ${guides}<span class="nav-caret"></span>
+      <span class="nav-file-icon ${iconKind}">${iconHtml}</span>
+      ${orphanBtnHtml}
+      <span class="nav-label">${safeName}</span>
     </button>`;
     }
     const childTrail = depth === 0 ? [] : [...trail, !isLast];
@@ -646,14 +766,14 @@ depth = 0) {
         .map((child, index) => renderNavNode(child, state, options, childTrail, index === node.children.length - 1, depth + 1))
         .join('');
     const pending = options.pendingFolders.has(node.path.toLowerCase());
-    return `<details class="nav-directory${pending ? ' pending-folder' : ''}" open data-nav-dir="${escapeHtml(node.path)}">
-    <summary${pending ? ` title="${escapeHtml(node.path)} — not saved until it contains a file"` : ''}>
-      ${guides}<span class="nav-caret" aria-hidden="true"></span>
-      <span class="nav-folder-icon closed">${FOLDER_CLOSED_ICON_HTML}</span>
-      <span class="nav-folder-icon open">${FOLDER_OPEN_ICON_HTML}</span>
-      <span class="nav-label">${escapeHtml(node.name)}</span>
-    </summary>
-    <div class="nav-directory-children">${children}</div>
+    return `<details class="nav-directory${pending ? ' pending-folder' : ''}" open data-nav-dir="${escapeHtml(node.path)}">
+    <summary${pending ? ` title="${escapeHtml(node.path)} — not saved until it contains a file"` : ''}>
+      ${guides}<span class="nav-caret" aria-hidden="true"></span>
+      <span class="nav-folder-icon closed">${FOLDER_CLOSED_ICON_HTML}</span>
+      <span class="nav-folder-icon open">${FOLDER_OPEN_ICON_HTML}</span>
+      <span class="nav-label">${escapeHtml(node.name)}</span>
+    </summary>
+    <div class="nav-directory-children">${children}</div>
   </details>`;
 }
 // Inserts view-local pending (not yet saved) folders into the nav tree so they
@@ -719,6 +839,8 @@ function rawHtmlImageAlignClass(image) {
     return null;
 }
 export class MdzipWorkspaceView {
+    static { this.SCROLL_SYNC_SETTLE_MS = 250; }
+    static { this.SCROLL_SYNC_GESTURE_WINDOW_MS = 500; }
     constructor(container, options = {}) {
         this.workspace = null;
         this.assetSession = null;
@@ -738,6 +860,60 @@ export class MdzipWorkspaceView {
         // trigger) there's no "currently open document" to race against and no
         // de-dupe/staleness guard is needed.
         this.packFilesDialogState = null;
+        // Tracks an in-progress progressive (chunked) preview render so Copy All
+        // can force-drain whatever's left unmounted. `cursor` is how many of
+        // `records` are mounted so far; null once everything's mounted (or when
+        // progressive rendering isn't active at all) — that's Copy All's signal
+        // to skip the dialog and copy instantly. `sentinelHandle` is the
+        // scroll-driven continuation's IntersectionObserver, if one is currently
+        // armed; Copy All tears it down before manually draining so the two don't
+        // race and double-mount the same chunk.
+        //
+        // Each record carries its own mounted DOM root and extension/code-block
+        // handles (rather than those living only in the flat `previewHandles`
+        // array below) so that a same-document text edit can reconcile against the
+        // *previous* render's records: chunks whose `chunkSourceKey` didn't change
+        // keep their existing `root`/`handles` untouched — see
+        // `applyChunkReconciliation`.
+        this.chunkedRenderState = null;
+        // Per-generation memo of renderChunk's raw HTML output, keyed by chunk
+        // index, shared between the DOM-mount path (renderAndMountChunkBatch) and
+        // Copy All with Images (renderFullDocumentHtml) so whichever renders a
+        // given chunk first is the only one that pays for it. A chunk's HTML is
+        // written at most once per generation, never recomputed-and-compared: the
+        // shipped mermaid extension mints each diagram's SVG id from a counter
+        // that lives on the extension instance for the view's whole lifetime, so
+        // re-rendering the same chunk twice yields different-but-valid output —
+        // only a genuine write-once cache is safe to share across call sites.
+        // Deliberately a separate field from chunkedRenderState (not nested in
+        // it): that becomes null as soon as every chunk is mounted, but this
+        // needs to stay alive for the whole generation, including after mounting
+        // finishes — an idle, fully-mounted document is exactly when Copy All
+        // should get full reuse.
+        this.chunkHtmlCache = null;
+        // Promise-based like packFilesDialogState, but there's no caller awaiting
+        // a decision here — `abort` is Copy All's own cancellation switch, wired
+        // to the dialog's Cancel button. `label` distinguishes Copy All's single
+        // "Rendering the full document" phase from Copy All with Images' two
+        // phases ("Rendering the document" then "Embedding images").
+        this.copyRenderDialogState = null;
+        // Third state sharing the same dialog element as copyRenderDialogState
+        // (all three are mutually exclusive) — set once rendering/embedding
+        // finishes for a copy that showed the progress dialog. The clipboard
+        // write itself is deliberately *not* fired automatically: the async
+        // Clipboard API requires a recent user gesture, and by the time a
+        // multi-second (sometimes multi-minute) prepare phase finishes, the
+        // gesture that triggered Copy All has expired — Chrome rejects the write
+        // with "blocked due to lack of user activation". Waiting for the user to
+        // click the dialog's own Copy button gives the write a fresh gesture to
+        // run inside. `perform` does the actual write when that happens.
+        this.copyReadyState = null;
+        // Set once a copy that showed the progress dialog finishes (a rejection
+        // included — see `copyReadyState` above for why that write happens from
+        // a button click, not automatically), so the completion message stays up
+        // until the user dismisses it, rather than a fleeting toast easy to miss
+        // after a long wait.
+        this.copyRenderDoneState = null;
         this.navPaneWidth = 280;
         this.splitRatio = 0.5;
         this.resizing = false;
@@ -763,6 +939,12 @@ export class MdzipWorkspaceView {
         this.tooltipState = null;
         this.tooltipShowTimer = null;
         this.tooltipHideTimer = null;
+        this.copyToastHideTimer = null;
+        // Not readonly: tests override these to keep the "clipboard write hangs
+        // forever" case fast rather than actually waiting out the real production
+        // timeouts.
+        this.clipboardWriteTimeoutMs = 30000;
+        this.clipboardFallbackWriteTimeoutMs = 15000;
         this.cmEditor = null;
         this.readOnlyCompartment = new Compartment();
         this.lineNumbersCompartment = new Compartment();
@@ -774,7 +956,64 @@ export class MdzipWorkspaceView {
         // syncScrollFromPreview/syncScrollToPreview).
         this.lastSyncedEditorScrollTop = null;
         this.lastSyncedPreviewScrollTop = null;
+        // Timestamp of the most recent updatePreview() call (edit-driven or
+        // otherwise). A content change that alters a mounted element's rendered
+        // height (a chunk reconcile re-rendering a mermaid diagram, an image
+        // finishing decode, CodeMirror re-measuring line heights after the edit
+        // that triggered it) can cause a 'scroll' event with no explicit write
+        // behind it — the browser's own scroll anchoring, or CodeMirror's internal
+        // viewport/anchor recalculation, adjusting scrollTop on its own to keep
+        // content visually pinned. That's indistinguishable from a real user
+        // scroll to the listeners below, so within a brief window after a content
+        // change we treat scroll events as noise from settling layout rather than
+        // sync-worthy user intent — otherwise this class's own ratio-based writes
+        // (raw pixel values that don't correspond to any document position
+        // CodeMirror has actually measured) can themselves destabilize
+        // CodeMirror's virtualized viewport measurement mid-settle.
+        this.lastContentChangeTime = 0;
+        // Timestamp of the most recent genuine user-input gesture (wheel, touch,
+        // mousedown — including a scrollbar-thumb drag, which lands on the same
+        // element — or a key press) on each pane. Content-change-adjacent 'scroll'
+        // events (see lastContentChangeTime above) turned out to be one of several
+        // distinct ways a non-user-driven scroll can fire: native CSS scroll
+        // anchoring reacting to an unrelated element's height changing — a chunk
+        // reconcile, an image decode, or (confirmed live) an image/mermaid reveal
+        // transition finishing several seconds after the edit that triggered it —
+        // can smoothly drive scrollTop, frame by frame, all the way to a pane's
+        // absolute end, entirely decoupled from any edit and well outside any
+        // settle window. Rather than continuing to special-case each newly
+        // discovered non-user cause after the fact, sync is now gated on positive
+        // evidence of real user intent: a 'scroll' event is only treated as
+        // sync-worthy if a genuine input gesture on that same pane happened very
+        // recently. Everything else — anchoring, our own reconcile restores,
+        // CodeMirror's internal viewport correction — is left alone by definition.
+        this.lastEditorGestureTime = 0;
+        this.lastPreviewGestureTime = 0;
+        // Every preview re-render — whether reconciled or a full cold-start reset
+        // (mountChunkedPreview unconditionally does `elPreviewContent.
+        // replaceChildren()`) — has a real window where the preview is shorter
+        // than before (old DOM torn down, replacement mounted asynchronously: a
+        // chunk reconcile, a full reset, mermaid's async completion). If the
+        // current scroll position no longer fits that transient shrink, the
+        // browser clamps scrollTop to what does fit and never un-clamps once the
+        // replacement's DOM restores the true height. Captured once per
+        // updatePreview() call (before anything moves), restored in
+        // firePreviewRendered — the one point every rendering path (reconcile,
+        // cold-start, progressive, eager, mermaid-triggered or not) already calls
+        // once its content is back in the DOM.
+        this.pendingPreviewScrollRestore = null;
+        // Guards syncScrollToPreviewBottom against overlapping drains: set to the
+        // chunkedRenderState generation currently being force-drained, null when
+        // none is in flight. A second bottom-edge sync that arrives mid-drain
+        // (e.g. repeated wheel events once the editor is already pinned at max
+        // scrollTop) just no-ops — the in-flight call already owns finishing the
+        // job for that generation.
+        this.bottomDrainGeneration = null;
+        // Non-null while the scroll-to-bottom catch-up toast is showing (past its
+        // debounce) — see syncScrollToPreviewBottom.
+        this.scrollCatchUpState = null;
         this.markdownExtensions = [];
+        this.frontMatterOptions = {};
         this.entryRenderers = [];
         this.renderingService = new MdzipRenderingService();
         // Preview render memo: the preview pipeline only re-runs when one of these
@@ -797,6 +1036,7 @@ export class MdzipWorkspaceView {
         this.controlPolicy = resolveMdzipControlPolicy(options.controls);
         this.navigationMode = options.navigationMode ?? 'editor';
         this.imageHydrationAnimation = options.imageHydrationAnimation ?? 'auto';
+        this.progressiveTextRendering = options.progressiveTextRendering ?? false;
         this.toolbarDensity = options.toolbarDensity ?? 'comfortable';
         this.contentDensity = options.contentDensity ?? 'comfortable';
         this.previewMaxWidth = options.previewMaxWidth;
@@ -808,8 +1048,9 @@ export class MdzipWorkspaceView {
         this.navVisible = options.navigationButtonActive ?? this.navVisible;
         this.markdownRenderer = options.markdownRenderer;
         this.markdownExtensions = options.markdownExtensions ?? [];
+        this.frontMatterOptions = options.frontMatter ?? {};
         this.entryRenderers = options.entryRenderers ?? [];
-        this.renderingService = new MdzipRenderingService(this.markdownRenderer ?? defaultSafeMarkdownRenderer, this.markdownExtensions);
+        this.renderingService = new MdzipRenderingService(this.markdownRenderer ?? defaultSafeMarkdownRenderer, this.pipelineMarkdownExtensions());
         injectStyles(container.ownerDocument);
         container.replaceChildren();
         container.innerHTML = SHELL_HTML;
@@ -872,6 +1113,17 @@ export class MdzipWorkspaceView {
         this.elPackFilesModeProject = q('[data-ref="pack-files-mode-project"]');
         this.elPackFilesEntrySelect = q('[data-ref="pack-files-entry"]');
         this.elPackFilesConfirmBtn = q('[data-ref="pack-files-confirm-btn"]');
+        this.elCopyRenderDialog = q('[data-ref="copy-render-dialog"]');
+        this.elCopyRenderHeading = q('[data-ref="copy-render-heading"]');
+        this.elCopyRenderProgressSection = q('[data-ref="copy-render-progress-section"]');
+        this.elCopyRenderProgressBar = q('[data-ref="copy-render-progress-bar"]');
+        this.elCopyRenderProgressText = q('[data-ref="copy-render-progress-text"]');
+        this.elCopyRenderReadyText = q('[data-ref="copy-render-ready-text"]');
+        this.elCopyRenderDoneText = q('[data-ref="copy-render-done-text"]');
+        this.elCopyRenderCancelBtn = q('[data-ref="copy-render-cancel-btn"]');
+        this.elCopyRenderReadyCancelBtn = q('[data-ref="copy-render-ready-cancel-btn"]');
+        this.elCopyRenderConfirmBtn = q('[data-ref="copy-render-confirm-btn"]');
+        this.elCopyRenderDismissBtn = q('[data-ref="copy-render-dismiss-btn"]');
         this.elNavMenu = q('[data-ref="nav-menu"]');
         this.elNameDialog = q('[data-ref="name-dialog"]');
         this.elNameDialogHeading = q('[data-ref="name-dialog-heading"]');
@@ -883,6 +1135,7 @@ export class MdzipWorkspaceView {
         this.elDeleteConfirmBtn = q('[data-ref="delete-confirm-btn"]');
         this.elReplaceInput = q('[data-ref="replace-input"]');
         this.elTooltip = q('[data-ref="tooltip"]');
+        this.elCopyToast = q('[data-ref="copy-toast"]');
         this.elEmptyState = q('[data-ref="empty-state"]');
         this.prepareTooltips();
         this.attachEvents();
@@ -904,6 +1157,7 @@ export class MdzipWorkspaceView {
         this.resetRenderingState();
         this.cmEditor?.destroy();
         this.cmEditor = null;
+        this.workspace?.dispose();
         this.workspace = null;
         this.replaceAssetSession(null);
         this.conversionDocumentGeneration += 1;
@@ -985,6 +1239,7 @@ export class MdzipWorkspaceView {
         this.resetRenderingState();
         this.cmEditor?.destroy();
         this.cmEditor = null;
+        this.workspace?.dispose();
         this.workspace = null;
         this.replaceAssetSession(null);
         this.conversionDocumentGeneration += 1;
@@ -1178,6 +1433,12 @@ export class MdzipWorkspaceView {
         this.teardownEntryRenderer();
         // Release any whenRendered() waiters so their promises do not hang.
         this.flushRenderedWaiters();
+        try {
+            this.workspace?.dispose();
+        }
+        catch {
+            // Ignore worker teardown errors
+        }
         try {
             this.cmEditor?.destroy();
         }
@@ -1204,15 +1465,46 @@ export class MdzipWorkspaceView {
         if (options.markdownExtensions) {
             this.markdownExtensions = options.markdownExtensions;
         }
+        if (options.frontMatter) {
+            this.frontMatterOptions = options.frontMatter;
+        }
         if (options.entryRenderers) {
             this.entryRenderers = options.entryRenderers;
         }
-        this.renderingService = new MdzipRenderingService(this.markdownRenderer ?? defaultSafeMarkdownRenderer, this.markdownExtensions);
+        this.renderingService = new MdzipRenderingService(this.markdownRenderer ?? defaultSafeMarkdownRenderer, this.pipelineMarkdownExtensions());
         this.resetPreviewState();
         this.teardownEntryRenderer();
         this.entryMatchMissKey = null;
         this.render();
     }
+    /**
+     * The extensions actually handed to `MdzipRenderingService`: the front
+     * matter extension first (always on — see `frontMatterOptions`), then
+     * whatever extensions the host passed via `markdownExtensions`. A fresh
+     * front matter extension instance is created each time this runs (view
+     * construction, `setRenderingOptions`), which is fine — its per-render
+     * state lives in a `WeakMap` keyed by the render context, not on the
+     * extension instance across renders.
+     */
+    pipelineMarkdownExtensions() {
+        return [mdzipFrontMatterExtension(this.frontMatterOptions), ...this.markdownExtensions];
+    }
+    /**
+     * Chunking options combining every registered extension's
+     * {@link MdzipMarkdownRenderExtension.shouldIsolateChunk} — see that doc
+     * comment for why a token an extension owns needs its own chunk regardless
+     * of the size budget — with the same treatment built in for any token that
+     * embeds an image ({@link tokenEmbedsImage}'s doc comment), plus a forced
+     * chunk boundary at every heading ({@link tokenIsHeading}'s doc comment)
+     * so unrelated sections never share a chunk.
+     */
+    chunkOptions() {
+        const extensions = this.pipelineMarkdownExtensions();
+        return {
+            shouldIsolate: (token) => tokenEmbedsImage(token) || extensions.some((ext) => ext.shouldIsolateChunk?.(token)),
+            shouldStartChunk: tokenIsHeading
+        };
+    }
     /**
      * Replaces the view control policy without recreating the workspace or
      * CodeMirror editor. In particular, `lineNumbers` is reconfigured through a
@@ -1290,6 +1582,9 @@ export class MdzipWorkspaceView {
         this.options.imageInsertMode = options.imageInsertMode;
         this.options.imageInsertHandler = options.imageInsertHandler;
     }
+    setImageEditOptions(options) {
+        this.options.imageEditHandler = options.imageEditHandler;
+    }
     applyDensityClasses() {
         this.elRoot.classList.remove('toolbar-density-comfortable', 'toolbar-density-compact', 'toolbar-density-dense', 'content-density-comfortable', 'content-density-compact');
         this.elRoot.classList.add(`toolbar-density-${this.toolbarDensity}`);
@@ -1328,8 +1623,45 @@ export class MdzipWorkspaceView {
                 this.options.onFailed?.(error);
             }
         }
+        // Per-chunk handles live on their own records (see MdzipChunkRecord), not
+        // in the flat array above — a full reset must still destroy every one of
+        // them, the same as it always destroyed everything in previewHandles.
+        for (const record of this.chunkedRenderState?.records ?? []) {
+            for (const handle of record.handles) {
+                try {
+                    handle.destroy();
+                }
+                catch (error) {
+                    this.options.onFailed?.(error);
+                }
+            }
+        }
+        // A new render generation invalidates any in-progress chunk draining —
+        // Copy All's own abort check unwinds it and hides the dialog. It also
+        // invalidates a "ready to copy" or "done" dialog left over from a
+        // previous document: `copyReadyState.perform` closes over that
+        // document's already-built HTML/text, and clicking Copy against a
+        // now-superseded document would silently copy the wrong content.
+        this.chunkedRenderState = null;
+        this.chunkHtmlCache = null;
+        this.copyRenderDialogState?.abort.abort();
+        this.copyReadyState = null;
+        this.copyRenderDoneState = null;
+    }
+    /** True when `this.previewMemo` — and by extension `this.previewGeneration` — still represents `snapshot`: nothing that feeds the preview (path, pathType, text, colorScheme) has changed since it was last rendered. */
+    previewMemoMatchesSnapshot(snapshot) {
+        const memo = this.previewMemo;
+        return !!memo
+            && memo.path === snapshot.currentPath
+            && memo.pathType === snapshot.currentPathType
+            && memo.text === snapshot.currentText
+            && memo.colorScheme === this.colorScheme;
     }
     updatePreview(snapshot, entryClaimed) {
+        this.lastContentChangeTime = performance.now();
+        // Captured before anything below can move it — see
+        // `pendingPreviewScrollRestore`'s doc comment.
+        const previewScrollTopBeforeUpdate = this.elPreviewPane.scrollTop;
         if (entryClaimed) {
             // The entry renderer owns the pane stack; release preview resources so
             // a later fallback re-renders from scratch.
@@ -1343,20 +1675,39 @@ export class MdzipWorkspaceView {
             return;
         }
         const memo = this.previewMemo;
-        if (memo
-            && memo.path === snapshot.currentPath
-            && memo.pathType === snapshot.currentPathType
-            && memo.text === snapshot.currentText
-            && memo.colorScheme === this.colorScheme) {
+        if (this.previewMemoMatchesSnapshot(snapshot)) {
             // Nothing that feeds the preview changed; keep the existing DOM and any
             // mounted extension handles.
             return;
         }
         const animateImageHydration = this.shouldAnimateImageHydration(memo, snapshot);
+        // A same-document, text-only edit with an existing chunked structure can
+        // be reconciled against (only the chunks whose source actually changed
+        // get touched) instead of torn down and rebuilt from scratch. Every
+        // other case — first render, a path/pathType/colorScheme change, a
+        // non-default renderer, a prior explicit reset that already cleared
+        // chunkedRenderState, or an edit-triggered batch mount still in flight
+        // for the current generation (`mounting` — see its doc comment: its
+        // `cursor` doesn't yet reflect where that mount actually is, so
+        // reconciling against it risks orphaned duplicate DOM) — falls through
+        // to today's full reset + cold start, unchanged.
+        const reconcileEligible = !!memo
+            && memo.path === snapshot.currentPath
+            && memo.pathType === snapshot.currentPathType
+            && memo.colorScheme === this.colorScheme
+            && snapshot.currentPathType === 'markdown'
+            && this.renderingService.supportsChunking
+            && !!this.chunkedRenderState
+            && this.chunkedRenderState.generation === this.previewGeneration
+            && !this.chunkedRenderState.mounting;
+        const priorChunkedState = reconcileEligible ? this.chunkedRenderState : null;
         this.previewAbort?.abort();
         this.previewAbort = null;
-        this.destroyPreviewHandles();
+        if (!priorChunkedState) {
+            this.destroyPreviewHandles();
+        }
         const generation = ++this.previewGeneration;
+        this.pendingPreviewScrollRestore = { scrollTop: previewScrollTopBeforeUpdate, generation };
         this.previewHydrated = false;
         this.previewMemo = {
             path: snapshot.currentPath,
@@ -1388,6 +1739,15 @@ export class MdzipWorkspaceView {
         const abort = new AbortController();
         this.previewAbort = abort;
         const context = this.createMarkdownContext(snapshot, abort.signal);
+        if (this.renderingService.supportsChunking) {
+            if (priorChunkedState) {
+                this.reconcileChunkedPreview(snapshot, context, generation, animateImageHydration, priorChunkedState);
+            }
+            else {
+                this.renderChunkedPreview(snapshot, context, generation, animateImageHydration);
+            }
+            return;
+        }
         let result;
         try {
             result = this.renderingService.renderMarkdown(snapshot.currentText, context);
@@ -1459,28 +1819,113 @@ export class MdzipWorkspaceView {
      */
     mountProgressivePreview(html, snapshot, context, generation, animateImageHydration) {
         this.elPreviewContent.innerHTML = html;
-        const session = this.assetSession;
-        const document = this.elPreviewContent.ownerDocument;
+        // Cheap pass over every <img> happens before extensions/code-block
+        // controls mount, same relative order as always — see
+        // collectPendingImages for why it's split from the (expensive) slot
+        // creation that follows.
+        const pending = this.collectPendingImages([this.elPreviewContent], context, generation, animateImageHydration);
+        this.mountPreviewExtensions(context, generation);
+        const codeBlockHandle = this.mountCodeBlockControls();
+        if (codeBlockHandle) {
+            this.previewHandles.push(codeBlockHandle);
+        }
+        this.firePreviewRendered(snapshot, generation);
+        this.hydrateImages(pending, context, generation, animateImageHydration, () => {
+            this.fireAssetsHydrated(snapshot, generation);
+        });
+    }
+    /**
+     * Cheap, attribute-only pass over every `<img>` under `roots`: no DOM tree
+     * mutation. Archive-relative sources have their `src` stripped here
+     * (immediately, so the browser never fires a bad network request for the
+     * archive-relative path) and are returned for {@link hydrateImages};
+     * external/data/fragment sources are left untouched (just get their align
+     * class, if any — they never get a slot). Returns `[]` without touching
+     * anything when there's no asset session to resolve archive images
+     * against, matching `mountPreviewHtml`'s no-op image handling.
+     *
+     * An image this session has *already* resolved once (e.g. it was already
+     * on screen before an edit elsewhere caused its chunk to remount) is
+     * applied immediately here via `resolveKnownImage` — no slot, no loading
+     * class, no `hydrateImages`/`IntersectionObserver` round trip — instead of
+     * being handed to the async placeholder-then-swap path meant for an image
+     * that's genuinely being resolved for the first time. Skipping that path
+     * for a re-mount of an already-known image is what actually avoids the
+     * visible flash; still going through it (even instantly) briefly blanks
+     * the image, since a fresh `<img>` element never carries over its
+     * predecessor's already-resolved `src`.
+     */
+    collectPendingImages(roots, context, generation, animateImageHydration) {
+        if (!this.assetSession) {
+            return [];
+        }
         const pending = [];
-        for (const image of Array.from(this.elPreviewContent.querySelectorAll('img'))) {
-            applyRawHtmlImageSizeAttributes(image);
-            const source = image.getAttribute('src');
-            // Leave external, protocol-relative, data, and fragment URLs untouched.
-            if (!source || /^(?:[a-z][a-z\d+.-]*:|\/\/|#)/i.test(source)) {
-                const alignClass = rawHtmlImageAlignClass(image);
-                if (alignClass) {
-                    image.classList.add(alignClass);
+        for (const root of roots) {
+            for (const image of Array.from(root.querySelectorAll('img'))) {
+                applyRawHtmlImageSizeAttributes(image);
+                const source = image.getAttribute('src');
+                // Leave external, protocol-relative, data, and fragment URLs untouched.
+                if (!source || /^(?:[a-z][a-z\d+.-]*:|\/\/|#)/i.test(source)) {
+                    const alignClass = rawHtmlImageAlignClass(image);
+                    if (alignClass) {
+                        image.classList.add(alignClass);
+                    }
+                    continue;
                 }
-                continue;
+                const known = this.assetSession.resolveKnownImage(source, context.currentPath);
+                if (known) {
+                    if (known.width && known.height && !image.hasAttribute('width') && !image.hasAttribute('height')) {
+                        image.setAttribute('width', String(known.width));
+                        image.setAttribute('height', String(known.height));
+                    }
+                    // No slot wrapper on this path — same direct-on-image alignment as
+                    // the external-URL branch above, not the slot's own align classes.
+                    const alignClass = rawHtmlImageAlignClass(image);
+                    if (alignClass) {
+                        image.classList.add(alignClass);
+                    }
+                    this.attachImageLoadHandlers(image, source, known.url, context, generation);
+                    image.setAttribute('src', known.url);
+                    continue;
+                }
+                image.removeAttribute('src');
+                if (animateImageHydration) {
+                    image.classList.add('mdzip-image-loading');
+                }
+                pending.push({ image, source });
             }
-            // Drop the archive-relative src so the browser does not fetch the bad
-            // path. Wrap the image in a collapsed slot so the text stays compact and
-            // immediately readable; the slot eases open to the reserved height once
-            // the image resolves.
-            image.removeAttribute('src');
-            if (animateImageHydration) {
-                image.classList.add('mdzip-image-loading');
+        }
+        return pending;
+    }
+    /**
+     * Slot-wraps and resolves `pending` images (from {@link collectPendingImages}),
+     * only decompressing/resolving ones near the viewport up front — a
+     * document with a few hundred distinct embedded images would otherwise
+     * decompress and blob-URL every one of them synchronously, freezing the UI
+     * for as long as that takes. Falls back to eager resolution when
+     * IntersectionObserver isn't available (e.g. non-browser hosts). Calls
+     * `onSettled` once every image in `pending` has resolved (or immediately
+     * if `pending` is empty) — callers that want a single "hydrated" signal
+     * for a whole preview pass `pending` from every root at once; callers
+     * mounting one chunk among several within the same generation (see
+     * {@link mountChunkBatch}) pass a no-op instead, so the signal only fires
+     * once, for the batch it's semantically tied to.
+     */
+    hydrateImages(pending, context, generation, animateImageHydration, onSettled) {
+        const session = this.assetSession;
+        if (!session || pending.length === 0) {
+            onSettled();
+            return;
+        }
+        const document = this.elPreviewContent.ownerDocument;
+        let remaining = pending.length;
+        const settle = () => {
+            remaining -= 1;
+            if (remaining === 0) {
+                onSettled();
             }
+        };
+        const createImageSlot = (image) => {
             const slot = document.createElement('span');
             slot.className = animateImageHydration
                 ? 'mdzip-image-slot'
@@ -1494,26 +1939,9 @@ export class MdzipWorkspaceView {
             }
             image.parentNode?.insertBefore(slot, image);
             slot.appendChild(image);
-            pending.push({ image, slot, source });
-        }
-        this.mountPreviewExtensions(context, generation);
-        const codeBlockHandle = this.mountCodeBlockControls();
-        if (codeBlockHandle) {
-            this.previewHandles.push(codeBlockHandle);
-        }
-        this.firePreviewRendered(snapshot, generation);
-        if (!session || pending.length === 0) {
-            this.fireAssetsHydrated(snapshot, generation);
-            return;
-        }
-        let remaining = pending.length;
-        const settle = () => {
-            remaining -= 1;
-            if (remaining === 0) {
-                this.fireAssetsHydrated(snapshot, generation);
-            }
+            return slot;
         };
-        for (const { image, slot, source } of pending) {
+        const hydrate = (image, slot, source) => {
             void session.resolveImage(source, context.currentPath).then((resolved) => {
                 if (generation !== this.previewGeneration || context.signal.aborted) {
                     settle();
@@ -1545,6 +1973,593 @@ export class MdzipWorkspaceView {
                 this.openImageSlot(slot);
                 settle();
             });
+        };
+        const observerWindow = document.defaultView;
+        if (!observerWindow?.IntersectionObserver) {
+            for (const { image, source } of pending) {
+                hydrate(image, createImageSlot(image), source);
+            }
+            return;
+        }
+        const bySlot = new Map();
+        const observer = new observerWindow.IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (!entry.isIntersecting)
+                    continue;
+                observer.unobserve(entry.target);
+                const item = bySlot.get(entry.target);
+                if (item)
+                    hydrate(item.image, entry.target, item.source);
+            }
+        }, { root: this.elPreviewPane, rootMargin: '600px 0px' });
+        this.previewHandles.push({ destroy: () => observer.disconnect() });
+        // Slot creation + observer registration is a real DOM tree mutation per
+        // image (as opposed to the cheap attribute-only pass in
+        // collectPendingImages), and at thousands of occurrences (e.g. a chat
+        // export where a handful of distinct avatars repeat across every row)
+        // doing it all synchronously blocks the main thread for seconds.
+        // Time-budget it across animation frames instead — the first chunk
+        // still runs synchronously as part of this call (no yield before it),
+        // so small documents (every existing test) see their slots exist
+        // immediately, same as before.
+        const CHUNK_BUDGET_MS = 8;
+        let cursor = 0;
+        const processChunk = () => {
+            if (generation !== this.previewGeneration || context.signal.aborted)
+                return;
+            const chunkStart = observerWindow.performance.now();
+            while (cursor < pending.length && observerWindow.performance.now() - chunkStart < CHUNK_BUDGET_MS) {
+                const item = pending[cursor];
+                cursor += 1;
+                const slot = createImageSlot(item.image);
+                bySlot.set(slot, item);
+                observer.observe(slot);
+            }
+            if (cursor < pending.length) {
+                observerWindow.requestAnimationFrame(processChunk);
+            }
+        };
+        processChunk();
+    }
+    /**
+     * Opt-in (`progressiveTextRendering`) alternative to the whole-document
+     * `renderMarkdown()` path above: tokenizes the markdown once, then renders
+     * and mounts it in chunks near the viewport instead of all at once — see
+     * {@link mountChunkedPreview}. Only reachable when
+     * `renderingService.supportsChunking` is true (the default marked-based
+     * renderer); the caller already checked that.
+     */
+    renderChunkedPreview(snapshot, context, generation, animateImageHydration) {
+        let tokens;
+        try {
+            tokens = this.renderingService.tokenizeMarkdown(snapshot.currentText, context);
+        }
+        catch (error) {
+            this.options.onFailed?.(error);
+            this.elPreviewContent.innerHTML = renderMdzipPreviewHtml(snapshot);
+            this.firePreviewRendered(snapshot, generation);
+            this.fireAssetsHydrated(snapshot, generation);
+            return;
+        }
+        if (Array.isArray(tokens)) {
+            this.mountChunkedPreview(tokens, snapshot, context, generation, animateImageHydration);
+            return;
+        }
+        void tokens.then((resolved) => {
+            if (generation !== this.previewGeneration || context.signal.aborted)
+                return;
+            this.mountChunkedPreview(resolved, snapshot, context, generation, animateImageHydration);
+        }).catch((error) => {
+            if (generation !== this.previewGeneration || context.signal.aborted)
+                return;
+            if (error?.name !== 'AbortError') {
+                this.options.onFailed?.(error);
+            }
+        });
+    }
+    /**
+     * Same-document, text-only-edit counterpart to {@link renderChunkedPreview}:
+     * tokenizes the new text, then reconciles against the *previous* render's
+     * records (`priorState`) instead of tearing everything down. Only reachable
+     * when `updatePreview` determined the prior chunked structure is still
+     * reuse-eligible (same path/pathType/colorScheme); the caller already
+     * checked that.
+     */
+    reconcileChunkedPreview(snapshot, context, generation, animateImageHydration, priorState) {
+        let tokens;
+        try {
+            tokens = this.renderingService.tokenizeMarkdown(snapshot.currentText, context);
+        }
+        catch (error) {
+            this.options.onFailed?.(error);
+            // Can't reconcile without tokens — fall back to a hard reset.
+            this.destroyPreviewHandles();
+            this.elPreviewContent.innerHTML = renderMdzipPreviewHtml(snapshot);
+            this.firePreviewRendered(snapshot, generation);
+            this.fireAssetsHydrated(snapshot, generation);
+            return;
+        }
+        const proceed = (resolvedTokens) => {
+            if (generation !== this.previewGeneration || context.signal.aborted)
+                return;
+            this.applyChunkReconciliation(resolvedTokens, snapshot, context, generation, animateImageHydration, priorState);
+        };
+        if (Array.isArray(tokens)) {
+            proceed(tokens);
+            return;
+        }
+        void tokens.then(proceed).catch((error) => {
+            if (generation !== this.previewGeneration || context.signal.aborted)
+                return;
+            if (error?.name !== 'AbortError') {
+                this.options.onFailed?.(error);
+            }
+        });
+    }
+    /** Destroys one chunk record's mounted DOM and handles (but not the record object itself). */
+    teardownChunkRecord(record) {
+        for (const handle of record.handles) {
+            try {
+                handle.destroy();
+            }
+            catch (error) {
+                this.options.onFailed?.(error);
+            }
+        }
+        record.root?.remove();
+    }
+    /**
+     * Diffs the new tokenize pass's chunks against `priorState.records` by
+     * source-text identity (`chunkSourceKey`) and reconciles: chunks in the
+     * matched leading/trailing run keep their existing DOM and handles
+     * untouched (never re-rendered, never re-mounted — see
+     * `chunkSourceKey`'s doc comment for why that matters for extensions like
+     * mermaid); only the "middle" range that actually changed is torn down and
+     * remounted. Uses prefix/suffix matching rather than a general LCS — a
+     * text editor's edits are localized, so this is both simpler and correct
+     * for the real-world case.
+     */
+    applyChunkReconciliation(tokens, snapshot, context, generation, animateImageHydration, priorState) {
+        // Tear down any live sentinel from the prior state before touching DOM —
+        // same reasoning as drainRemainingChunks: stops it from racing this
+        // reconciliation and double-mounting a chunk.
+        priorState.sentinelHandle?.destroy();
+        this.previewHandles = this.previewHandles.filter((h) => h !== priorState.sentinelHandle);
+        const newChunks = groupTokensIntoChunks(tokens, this.chunkOptions());
+        const oldRecords = priorState.records;
+        const oldCursor = priorState.cursor;
+        if (newChunks.length === 0) {
+            // Whole document collapsed to nothing renderable — nothing to reuse.
+            for (const record of oldRecords) {
+                this.teardownChunkRecord(record);
+            }
+            this.elPreviewContent.replaceChildren();
+            this.chunkedRenderState = null;
+            this.firePreviewRendered(snapshot, generation);
+            this.fireAssetsHydrated(snapshot, generation);
+            return;
+        }
+        const oldKeys = oldRecords.map((r) => r.key);
+        const newKeys = newChunks.map((c) => chunkSourceKey(c));
+        const maxMatch = Math.min(oldKeys.length, newKeys.length);
+        let prefixLen = 0;
+        while (prefixLen < maxMatch && oldKeys[prefixLen] === newKeys[prefixLen])
+            prefixLen += 1;
+        const maxSuffix = maxMatch - prefixLen;
+        let suffixLen = 0;
+        while (suffixLen < maxSuffix
+            && oldKeys[oldKeys.length - 1 - suffixLen] === newKeys[newKeys.length - 1 - suffixLen])
+            suffixLen += 1;
+        const oldMiddleStart = prefixLen;
+        const oldMiddleEnd = oldRecords.length - suffixLen;
+        const newMiddleStart = prefixLen;
+        const newMiddleEnd = newChunks.length - suffixLen;
+        const newRecords = [];
+        for (let i = 0; i < prefixLen; i += 1) {
+            newRecords.push({ ...oldRecords[i], key: newKeys[i], tokens: newChunks[i] });
+        }
+        for (let i = newMiddleStart; i < newMiddleEnd; i += 1) {
+            newRecords.push({ key: newKeys[i], tokens: newChunks[i], root: null, html: null, handles: [] });
+        }
+        for (let i = 0; i < suffixLen; i += 1) {
+            const oi = oldRecords.length - suffixLen + i;
+            const ni = newChunks.length - suffixLen + i;
+            newRecords.push({ ...oldRecords[oi], key: newKeys[ni], tokens: newChunks[ni] });
+        }
+        // Destroy DOM+handles for old-middle records that were actually mounted
+        // (bounded by the old cursor — everything from there on was still
+        // waiting in the lazy-load tail, never mounted, nothing to destroy).
+        const oldMountedMiddleEnd = Math.min(oldCursor, oldMiddleEnd);
+        for (let i = oldMiddleStart; i < oldMountedMiddleEnd; i += 1) {
+            this.teardownChunkRecord(oldRecords[i]);
+        }
+        const oldMountedMiddleCount = Math.max(0, oldMountedMiddleEnd - oldMiddleStart);
+        // Reference node for splicing in the new middle's DOM: the first
+        // surviving *mounted* suffix record (mounted suffix records are
+        // contiguous from newMiddleEnd by construction), else null (append).
+        let insertBeforeNode = null;
+        for (let i = newMiddleEnd; i < newRecords.length; i += 1) {
+            if (newRecords[i].root) {
+                insertBeforeNode = newRecords[i].root;
+                break;
+            }
+        }
+        this.chunkedRenderState = {
+            records: newRecords,
+            cursor: oldCursor,
+            context,
+            generation,
+            animateImageHydration,
+            sentinelHandle: null,
+            mounting: oldMountedMiddleCount > 0
+        };
+        if (oldMountedMiddleCount === 0) {
+            // The edit is entirely beyond what was mounted (progressive mode,
+            // still in the lazy-load tail) — nothing was destroyed, nothing needs
+            // mounting now. Cursor is unaffected: every index below it is an
+            // untouched prefix survivor, valid at the same index in newRecords. The
+            // old sentinel was already torn down above, so a fresh one has to be
+            // armed to keep the lazy-load tail continuing.
+            if (oldCursor < newRecords.length) {
+                this.armChunkSentinel(newRecords, oldCursor, context, generation, animateImageHydration);
+            }
+            this.firePreviewRendered(snapshot, generation);
+            this.fireAssetsHydrated(snapshot, generation);
+            return;
+        }
+        void this.mountReconciledMiddle(newRecords, newMiddleStart, newMiddleEnd, insertBeforeNode, context, generation, animateImageHydration, snapshot, oldCursor, oldMiddleEnd);
+    }
+    /**
+     * Mounts a reconciliation's replacement "middle" range in full (uncapped —
+     * a single edit only ever touches 1-2 chunks in practice; see the plan's
+     * disclosed v1 risk for the pathological large-paste case), then carries
+     * forward however much of the surviving suffix was already mounted before
+     * reconciling, and re-arms the sentinel for whatever's still left.
+     */
+    async mountReconciledMiddle(records, middleStart, middleEnd, insertBeforeNode, context, generation, animateImageHydration, snapshot, oldCursor, oldMiddleEnd) {
+        let cursor = middleStart;
+        let mountedRoots = [];
+        while (cursor < middleEnd) {
+            const batch = await this.renderAndMountChunkBatch(records, cursor, context, generation, insertBeforeNode);
+            if (generation !== this.previewGeneration || context.signal.aborted)
+                return;
+            if (batch.cursor === cursor)
+                break; // Aborted/superseded mid-loop with no progress.
+            cursor = batch.cursor;
+            mountedRoots = mountedRoots.concat(batch.mountedRoots);
+        }
+        const carriedSuffixMounted = Math.max(0, oldCursor - oldMiddleEnd);
+        const finalCursor = Math.min(records.length, Math.max(cursor, middleEnd) + carriedSuffixMounted);
+        // See armChunkSentinel's mountNext for why this is recorded before the
+        // staleness check: finalCursor already correctly folds in the carried-
+        // forward suffix (chunks beyond the reconciled middle that were already
+        // mounted), so discarding it here just because a newer edit has since
+        // landed would regress chunkedRenderState.cursor back down — causing the
+        // next reconcile to re-arm a sentinel from that stale, lower cursor and
+        // re-mount (duplicate) chunks that are already correctly in the DOM.
+        this.recordChunkProgress(generation, records, finalCursor);
+        if (generation !== this.previewGeneration || context.signal.aborted)
+            return;
+        if (this.chunkedRenderState?.generation === generation) {
+            this.chunkedRenderState.mounting = false;
+        }
+        const pending = this.collectPendingImages(mountedRoots, context, generation, animateImageHydration);
+        this.hydrateImages(pending, context, generation, animateImageHydration, () => {
+            this.fireAssetsHydrated(snapshot, generation);
+        });
+        this.firePreviewRendered(snapshot, generation);
+        if (this.chunkedRenderState?.generation === generation && finalCursor < records.length) {
+            this.armChunkSentinel(records, finalCursor, context, generation, animateImageHydration);
+        }
+    }
+    /**
+     * Groups tokens into chunks and mounts them: an initial batch synchronously
+     * (enough for a small document to behave exactly like the non-chunked
+     * path), then the rest as the user scrolls near a trailing sentinel
+     * element, via the same `IntersectionObserver` + time-budgeted-rAF pattern
+     * already used for image hydration — just for "need more text" instead of
+     * "need this image". `onAssetsHydrated` fires once for the initial batch's
+     * images only (not re-fired per later chunk) — `onPreviewRendered` still
+     * means "the initial batch is in the DOM", same intent as the non-chunked
+     * path, just proportional to the viewport instead of the whole document.
+     */
+    mountChunkedPreview(tokens, snapshot, context, generation, animateImageHydration) {
+        this.elPreviewContent.replaceChildren();
+        // Also called with no options in renderFullDocumentHtml — see the
+        // comment there; keep both call sites' chunking in sync.
+        const chunks = groupTokensIntoChunks(tokens, this.chunkOptions());
+        if (chunks.length === 0) {
+            this.chunkedRenderState = null;
+            this.firePreviewRendered(snapshot, generation);
+            this.fireAssetsHydrated(snapshot, generation);
+            return;
+        }
+        const records = chunks.map((chunkTokens) => ({
+            key: chunkSourceKey(chunkTokens),
+            tokens: chunkTokens,
+            root: null,
+            html: null,
+            handles: []
+        }));
+        this.chunkedRenderState = {
+            records, cursor: 0, context, generation, animateImageHydration, sentinelHandle: null,
+            // Set for the whole initial batch/eager mount below — see the field's
+            // doc comment: an edit landing before this settles must not reconcile
+            // against a `cursor` that doesn't yet reflect this in-flight mount.
+            mounting: true
+        };
+        if (this.progressiveTextRendering) {
+            // Mount an initial batch synchronously (enough for a small document to
+            // behave exactly like a non-progressive mount), then lazily continue
+            // the rest as the user scrolls near a trailing sentinel.
+            void this.mountChunkBatch(records, 0, context, generation, animateImageHydration, () => {
+                this.fireAssetsHydrated(snapshot, generation);
+            }).then((cursor) => {
+                // See armChunkSentinel's mountNext for why this is recorded before
+                // the staleness check below.
+                this.recordChunkProgress(generation, records, cursor);
+                if (generation !== this.previewGeneration || context.signal.aborted)
+                    return;
+                if (this.chunkedRenderState?.generation === generation) {
+                    this.chunkedRenderState.mounting = false;
+                }
+                this.firePreviewRendered(snapshot, generation);
+                if (cursor < records.length) {
+                    this.armChunkSentinel(records, cursor, context, generation, animateImageHydration);
+                }
+            });
+            return;
+        }
+        // Not opted into lazy-load-on-scroll: mount every chunk up front, same
+        // visible end state as the old monolithic non-chunked path, but yielding
+        // a frame between batches (mirroring drainRemainingChunks) instead of
+        // blocking the main thread for one giant synchronous render — see the
+        // plan's disclosed cold-start tradeoff.
+        void this.mountAllChunksEagerly(records, context, generation, animateImageHydration, snapshot);
+    }
+    /**
+     * Mounts every chunk of a non-progressive (`progressiveTextRendering:
+     * false`) document up front — same end state as the old monolithic
+     * non-chunked path (the whole document mounted before `onPreviewRendered`
+     * fires), but yielding a frame between batches (mirroring
+     * `drainRemainingChunks`) instead of blocking the main thread for one
+     * giant synchronous render.
+     */
+    async mountAllChunksEagerly(records, context, generation, animateImageHydration, snapshot) {
+        const allPending = [];
+        while (generation === this.previewGeneration && !context.signal.aborted) {
+            const cursorBefore = this.chunkedRenderState?.generation === generation
+                ? this.chunkedRenderState.cursor
+                : records.length;
+            if (cursorBefore >= records.length)
+                break;
+            const { cursor, mountedRoots } = await this.renderAndMountChunkBatch(records, cursorBefore, context, generation);
+            // See armChunkSentinel's mountNext for why this is recorded before the
+            // staleness check: the chunks this batch appended are physically in
+            // the DOM regardless of whether a newer edit has since landed, and
+            // recordChunkProgress's own generation check keeps this a safe no-op
+            // once chunkedRenderState has moved on.
+            this.recordChunkProgress(generation, records, cursor);
+            if (generation !== this.previewGeneration || context.signal.aborted)
+                return;
+            allPending.push(...this.collectPendingImages(mountedRoots, context, generation, animateImageHydration));
+            if (cursor >= records.length)
+                break;
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+        }
+        if (generation === this.previewGeneration && !context.signal.aborted) {
+            if (this.chunkedRenderState?.generation === generation) {
+                this.chunkedRenderState.mounting = false;
+            }
+            this.firePreviewRendered(snapshot, generation);
+            this.hydrateImages(allPending, context, generation, animateImageHydration, () => {
+                this.fireAssetsHydrated(snapshot, generation);
+            });
+        }
+    }
+    /**
+     * Updates `chunkedRenderState.cursor` after a batch mounts. A no-op if a
+     * newer render generation has already superseded this one. Deliberately
+     * never nulls `chunkedRenderState` out just because `cursor` reached
+     * `records.length` — the records stay alive for the whole generation so a
+     * later same-document edit can reconcile against them (see
+     * `applyChunkReconciliation`). Callers that need "is there still an
+     * unmounted lazy tail" (Copy All's instant path, the scroll-to-bottom fast
+     * path) check `cursor < records.length` directly instead of this field's
+     * truthiness.
+     */
+    recordChunkProgress(generation, records, cursor) {
+        if (this.chunkedRenderState?.generation !== generation)
+            return;
+        this.chunkedRenderState.cursor = cursor;
+    }
+    /**
+     * Renders+appends chunks starting at `startCursor` up to a char budget
+     * (enough for one screenful, roughly) *or* a wall-clock time budget,
+     * whichever comes first — char count alone is a poor proxy for cost on a
+     * document where some chunks are plain text and others are dense with
+     * `<img>` tags (parsing + sanitizing + inserting into an already-huge
+     * `elPreviewContent` gets measurably more expensive per chunk as an
+     * image-heavy document's accumulated DOM grows); the time budget catches
+     * what the char budget alone misses. Mounts extensions/code-block controls
+     * for exactly the chunks it appended (never re-scanning earlier ones), and
+     * returns the cursor to resume from plus those chunks' roots (for the
+     * caller to run `collectPendingImages` on). Shared by every caller that
+     * mounts chunk batches — the initial batch, every later sentinel-triggered
+     * continuation, and Copy All's drain — image hydration itself is *not*
+     * included here; see {@link mountChunkBatch} and
+     * {@link drainRemainingChunks} for the two different ways callers pace it.
+     */
+    async renderAndMountChunkBatch(records, startCursor, context, generation, insertBeforeNode = null) {
+        const BATCH_CHAR_BUDGET = 4000;
+        const BATCH_TIME_BUDGET_MS = 10;
+        const clock = this.elPreviewContent.ownerDocument.defaultView?.performance ?? performance;
+        const batchStart = clock.now();
+        let cursor = startCursor;
+        let renderedChars = 0;
+        const mountedRoots = [];
+        const batchStartCursor = startCursor;
+        while (cursor < records.length
+            && renderedChars < BATCH_CHAR_BUDGET
+            && (mountedRoots.length === 0 || clock.now() - batchStart < BATCH_TIME_BUDGET_MS)) {
+            if (generation !== this.previewGeneration || context.signal.aborted)
+                return { cursor, mountedRoots };
+            const chunkTokens = records[cursor].tokens;
+            const chunkIndex = cursor;
+            cursor += 1;
+            let html;
+            let cacheHit;
+            try {
+                cacheHit = this.chunkHtmlCache?.generation === generation
+                    ? this.chunkHtmlCache.html.get(chunkIndex)
+                    : undefined;
+                if (cacheHit !== undefined) {
+                    html = cacheHit;
+                }
+                else {
+                    const result = this.renderingService.renderChunk(chunkTokens, context);
+                    html = typeof result === 'string' ? result : await result;
+                }
+            }
+            catch (error) {
+                if (error?.name !== 'AbortError') {
+                    this.options.onFailed?.(error);
+                }
+                continue;
+            }
+            if (generation !== this.previewGeneration || context.signal.aborted)
+                return { cursor, mountedRoots };
+            if (cacheHit === undefined) {
+                // groupTokensIntoChunks is also called with no options in
+                // renderFullDocumentHtml — keep both call sites' chunking in sync,
+                // since chunk index is this cache's only key.
+                if (this.chunkHtmlCache?.generation !== generation) {
+                    this.chunkHtmlCache = { generation, html: new Map() };
+                }
+                this.chunkHtmlCache.html.set(chunkIndex, html);
+            }
+            const root = this.appendChunkHtml(html, insertBeforeNode);
+            records[chunkIndex].root = root;
+            records[chunkIndex].html = html;
+            mountedRoots.push(root);
+            renderedChars += html.length;
+        }
+        for (const record of records.slice(batchStartCursor, cursor)) {
+            if (!record.root)
+                continue;
+            this.mountPreviewExtensions(context, generation, record.root, record.handles);
+            const codeBlockHandle = this.mountCodeBlockControls(record.root);
+            if (codeBlockHandle) {
+                record.handles.push(codeBlockHandle);
+            }
+        }
+        return { cursor, mountedRoots };
+    }
+    /**
+     * `renderAndMountChunkBatch` plus its own immediate, independent
+     * `hydrateImages` pass — the shape every caller except Copy All's drain
+     * wants: mount a batch, then hydrate whatever images it contained,
+     * decoupled from mounting the next batch. Scroll-paced callers (the
+     * initial batch, every sentinel continuation) are naturally rate-limited
+     * by how fast the user scrolls, so one independent hydration loop per
+     * batch never has a chance to pile up against another.
+     */
+    async mountChunkBatch(records, startCursor, context, generation, animateImageHydration, onImagesSettled) {
+        const { cursor, mountedRoots } = await this.renderAndMountChunkBatch(records, startCursor, context, generation);
+        // Same relative order as the non-chunked path: cheap image pass, then
+        // the (expensive) slot/observe pass.
+        const pending = this.collectPendingImages(mountedRoots, context, generation, animateImageHydration);
+        this.hydrateImages(pending, context, generation, animateImageHydration, onImagesSettled);
+        return cursor;
+    }
+    /**
+     * Wraps one chunk's rendered HTML in a mount boundary and appends it (or,
+     * given `beforeNode`, splices it in ahead of that still-attached node —
+     * used by reconciliation to insert a replacement chunk ahead of a
+     * surviving mounted suffix). See the `.mdzip-chunk` CSS rules for why.
+     */
+    appendChunkHtml(html, beforeNode = null) {
+        const doc = this.elPreviewContent.ownerDocument;
+        const wrapper = doc.createElement('div');
+        wrapper.className = 'mdzip-chunk';
+        wrapper.innerHTML = html;
+        if (beforeNode && beforeNode.parentNode === this.elPreviewContent) {
+            this.elPreviewContent.insertBefore(wrapper, beforeNode);
+        }
+        else {
+            this.elPreviewContent.appendChild(wrapper);
+        }
+        return wrapper;
+    }
+    /**
+     * Appends a trailing sentinel and mounts the next chunk batch once it's
+     * within `rootMargin` of the viewport — a larger margin than images'
+     * (`hydrateImages`' 600px) since keeping text ahead of scroll is cheap
+     * relative to keeping images ahead. Re-arms itself after each batch until
+     * every chunk is mounted. Falls back to mounting everything immediately
+     * when IntersectionObserver isn't available, matching `hydrateImages`.
+     */
+    armChunkSentinel(records, cursor, context, generation, animateImageHydration) {
+        const doc = this.elPreviewContent.ownerDocument;
+        const observerWindow = doc.defaultView;
+        const mountNext = (nextCursor) => {
+            // Same race this field guards against everywhere else: an edit landing
+            // while this scroll-triggered continuation is mid-flight must not
+            // reconcile against a cursor that doesn't yet reflect it.
+            if (this.chunkedRenderState?.generation === generation) {
+                this.chunkedRenderState.mounting = true;
+            }
+            void this.mountChunkBatch(records, nextCursor, context, generation, animateImageHydration, () => { })
+                .then((newCursor) => {
+                // Record whatever this batch actually mounted regardless of
+                // whether a newer edit has since landed — recordChunkProgress's
+                // own generation check already makes this a safe no-op once
+                // chunkedRenderState has moved on. Skipping this call when stale
+                // was a real bug: the chunks this batch appended are physically in
+                // the DOM either way, but a newer edit's reconcile still saw the
+                // *old*, un-advanced cursor and re-armed a sentinel from the same
+                // starting point — re-rendering and re-appending (duplicating)
+                // chunks that were already mounted, visible as an already-settled
+                // image flashing back to broken as a fresh duplicate replaced it.
+                this.recordChunkProgress(generation, records, newCursor);
+                if (generation !== this.previewGeneration || context.signal.aborted)
+                    return;
+                if (this.chunkedRenderState?.generation === generation) {
+                    this.chunkedRenderState.mounting = false;
+                }
+                if (newCursor < records.length) {
+                    this.armChunkSentinel(records, newCursor, context, generation, animateImageHydration);
+                }
+            });
+        };
+        if (!observerWindow?.IntersectionObserver) {
+            mountNext(cursor);
+            return;
+        }
+        const sentinel = doc.createElement('div');
+        sentinel.className = 'mdzip-chunk-sentinel';
+        this.elPreviewContent.appendChild(sentinel);
+        const observer = new observerWindow.IntersectionObserver((entries) => {
+            for (const entry of entries) {
+                if (!entry.isIntersecting)
+                    continue;
+                observer.disconnect();
+                sentinel.remove();
+                if (this.chunkedRenderState?.generation === generation) {
+                    this.chunkedRenderState.sentinelHandle = null;
+                }
+                mountNext(cursor);
+            }
+        }, { root: this.elPreviewPane, rootMargin: '1600px 0px' });
+        observer.observe(sentinel);
+        // Stored on both previewHandles (torn down on the next render generation,
+        // like every other preview handle) and chunkedRenderState.sentinelHandle
+        // (torn down early by Copy All so its own manual drain doesn't race this
+        // observer and double-mount a chunk).
+        const handle = { destroy: () => { observer.disconnect(); sentinel.remove(); } };
+        this.previewHandles.push(handle);
+        if (this.chunkedRenderState?.generation === generation) {
+            this.chunkedRenderState.sentinelHandle = handle;
         }
     }
     /**
@@ -1607,13 +2622,20 @@ export class MdzipWorkspaceView {
             + 'CSP-restricted host (e.g. a VS Code webview), ensure img-src permits '
             + 'blob: and data:.'));
     }
-    mountPreviewExtensions(context, generation) {
+    /**
+     * `root` scopes extension `mount()` calls to a specific chunk instead of
+     * the whole preview — used by chunked rendering (see
+     * {@link mountChunkedPreview}), where extensions run once per newly
+     * appended chunk rather than once over the whole document. Defaults to
+     * the whole preview content, matching the non-chunked path exactly.
+     */
+    mountPreviewExtensions(context, generation, root = this.elPreviewContent, collector = this.previewHandles) {
         for (const extension of this.markdownExtensions) {
             if (!extension.mount) {
                 continue;
             }
             try {
-                const mounted = extension.mount(this.elPreviewContent, context);
+                const mounted = extension.mount(root, context);
                 if (isThenable(mounted)) {
                     void Promise.resolve(mounted).then((handle) => {
                         if (!handle) {
@@ -1628,7 +2650,7 @@ export class MdzipWorkspaceView {
                             }
                             return;
                         }
-                        this.previewHandles.push(handle);
+                        collector.push(handle);
                     }).catch((error) => {
                         if (generation === this.previewGeneration) {
                             this.options.onFailed?.(error);
@@ -1636,7 +2658,7 @@ export class MdzipWorkspaceView {
                     });
                 }
                 else if (mounted) {
-                    this.previewHandles.push(mounted);
+                    collector.push(mounted);
                 }
             }
             catch (error) {
@@ -1653,12 +2675,15 @@ export class MdzipWorkspaceView {
      * extension) — every consumer gets this automatically, gated by policy
      * rather than opt-in wiring. Runs after `mountPreviewExtensions` so any
      * extension-provided `pre > code` blocks already exist in the DOM. See #29.
+     *
+     * `root` scopes the scan to a specific chunk instead of the whole preview
+     * — see {@link mountPreviewExtensions} for why.
      */
-    mountCodeBlockControls() {
+    mountCodeBlockControls(root = this.elPreviewContent) {
         if (!this.controlPolicy.codeBlockTools) {
             return null;
         }
-        const codeEls = Array.from(this.elPreviewContent.querySelectorAll('pre > code'));
+        const codeEls = Array.from(root.querySelectorAll('pre > code'));
         if (codeEls.length === 0) {
             return null;
         }
@@ -1772,6 +2797,7 @@ export class MdzipWorkspaceView {
         if (generation !== this.previewGeneration) {
             return;
         }
+        this.restorePendingPreviewScroll(generation);
         try {
             this.options.onPreviewRendered?.(snapshot);
         }
@@ -1779,6 +2805,20 @@ export class MdzipWorkspaceView {
             this.options.onFailed?.(error);
         }
     }
+    /** See `pendingPreviewScrollRestore`'s doc comment. */
+    restorePendingPreviewScroll(generation) {
+        const pending = this.pendingPreviewScrollRestore;
+        if (!pending || pending.generation !== generation) {
+            return;
+        }
+        this.pendingPreviewScrollRestore = null;
+        if (this.elPreviewPane.scrollTop !== pending.scrollTop) {
+            this.syncing = true;
+            this.lastSyncedPreviewScrollTop = pending.scrollTop;
+            this.elPreviewPane.scrollTop = pending.scrollTop;
+            this.syncing = false;
+        }
+    }
     fireAssetsHydrated(snapshot, generation) {
         if (generation !== this.previewGeneration) {
             return;
@@ -2001,6 +3041,8 @@ export class MdzipWorkspaceView {
                 syntaxHighlighting(mdzipMarkdownHighlight),
                 hardBreakMarkerHighlight,
                 htmlTagMarkerHighlight,
+                noSpellcheckHighlight,
+                imageEditAffordanceField,
                 EditorView.lineWrapping,
                 dropCursor(),
                 // Content is contenteditable, but browsers don't agree on a default
@@ -2056,6 +3098,23 @@ export class MdzipWorkspaceView {
                             void self.handleEditorImageDrop(file, event.clientX, event.clientY);
                             return true;
                         }
+                    },
+                    click(event, view) {
+                        // Fully inert unless a host has opted in — no parse cost, no
+                        // widget, matching #39's "default editor behavior unchanged".
+                        if (!self.options.imageEditHandler) {
+                            return;
+                        }
+                        const target = event.target;
+                        if (target.closest('[data-mdzip-image-edit-affordance]')) {
+                            return;
+                        }
+                        const pos = view.posAtCoords({ x: event.clientX, y: event.clientY });
+                        const hit = pos === null ? null : findImageReferenceAtOffset(view.state, pos);
+                        view.dispatch({ effects: imageEditAffordanceEffect.of(hit ? { from: hit.from, to: hit.to } : null) });
+                    },
+                    blur(_event, view) {
+                        view.dispatch({ effects: imageEditAffordanceEffect.of(null) });
                     }
                 }),
             ],
@@ -2064,8 +3123,25 @@ export class MdzipWorkspaceView {
         // Attach scroll listener to sync with preview
         const scroller = editor.dom.querySelector('.cm-scroller');
         if (scroller) {
+            // No 'keydown' here, deliberately: .cm-scroller receives every keystroke
+            // typed into the editor, not just navigation keys, so it can't tell
+            // "user pressed PageDown to scroll" apart from "user typed a letter" —
+            // confirmed live, where ordinary typing was arming this gesture window
+            // and letting CodeMirror's own small post-edit viewport-correction
+            // scroll (a real native behavior) through as if it were a deliberate
+            // scroll, on every keystroke. Wheel/touch/mousedown (which also covers
+            // a scrollbar-thumb drag, since that lands on this same element) are
+            // unambiguous and cover the vast majority of real scrolling.
+            const markEditorGesture = () => { self.lastEditorGestureTime = performance.now(); };
+            scroller.addEventListener('wheel', markEditorGesture, { passive: true });
+            scroller.addEventListener('touchstart', markEditorGesture, { passive: true });
+            scroller.addEventListener('mousedown', markEditorGesture);
             scroller.addEventListener('scroll', () => self.syncScrollToPreview());
         }
+        editor.dom.addEventListener(IMAGE_EDIT_AFFORDANCE_CLICK_EVENT, (event) => {
+            const { from, to } = event.detail;
+            void self.openImageEditFlow(from, to);
+        });
         return editor;
     }
     async ensureCmEditor(force = false) {
@@ -2081,6 +3157,23 @@ export class MdzipWorkspaceView {
         const snapshot = this.workspace?.snapshot() ?? null;
         this.elEmptyState.hidden = snapshot !== null;
         this.elWorkspaceShell.hidden = snapshot === null;
+        // Must run before the no-snapshot early return below: the pack-files dialog is
+        // deciding how to create a workspace, so it opens (via openPackFilesDialog ->
+        // render()) precisely when no workspace exists yet. Bug found 2026-08-19 —
+        // this used to live after the return, making it dead code for this dialog's
+        // entire lifetime; the dialog's state was set correctly but never reached the
+        // DOM, leaving the empty-state placeholder showing and the caller's promise
+        // hanging forever.
+        this.elPackFilesDialog.hidden = this.packFilesDialogState === null;
+        if (this.packFilesDialogState) {
+            const { request } = this.packFilesDialogState;
+            this.elPackFilesEntrySelect.innerHTML = request.markdownFiles
+                .map((p) => `<option value="${escapeHtml(p)}">${escapeHtml(p)}</option>`)
+                .join('');
+            this.elPackFilesEntrySelect.value = request.suggestedEntryPoint;
+            this.elPackFilesModeDocument.checked = true;
+            this.elPackFilesModeProject.checked = false;
+        }
         if (!snapshot) {
             this.elDocumentStrip.hidden = true;
             this.elToolbar.hidden = true;
@@ -2265,15 +3358,26 @@ export class MdzipWorkspaceView {
             this.elImageInsertPositionSelect.value = 'inline';
             this.updateImageInsertOptionControls();
         }
-        this.elPackFilesDialog.hidden = this.packFilesDialogState === null;
-        if (this.packFilesDialogState) {
-            const { request } = this.packFilesDialogState;
-            this.elPackFilesEntrySelect.innerHTML = request.markdownFiles
-                .map((p) => `<option value="${escapeHtml(p)}">${escapeHtml(p)}</option>`)
-                .join('');
-            this.elPackFilesEntrySelect.value = request.suggestedEntryPoint;
-            this.elPackFilesModeDocument.checked = true;
-            this.elPackFilesModeProject.checked = false;
+        this.elCopyRenderDialog.hidden = this.copyRenderDialogState === null
+            && this.copyReadyState === null
+            && this.copyRenderDoneState === null;
+        this.elCopyRenderProgressSection.hidden = this.copyRenderDialogState === null;
+        this.elCopyRenderReadyText.hidden = this.copyReadyState === null;
+        this.elCopyRenderDoneText.hidden = this.copyRenderDoneState === null;
+        this.elCopyRenderCancelBtn.hidden = this.copyRenderDialogState === null;
+        this.elCopyRenderReadyCancelBtn.hidden = this.copyReadyState === null;
+        this.elCopyRenderConfirmBtn.hidden = this.copyReadyState === null;
+        this.elCopyRenderDismissBtn.hidden = this.copyRenderDoneState === null;
+        if (this.copyRenderDialogState) {
+            this.elCopyRenderHeading.textContent = 'Copying document...';
+            this.updateCopyRenderDialogProgress();
+        }
+        else if (this.copyReadyState) {
+            this.elCopyRenderHeading.textContent = 'Ready to copy';
+        }
+        else if (this.copyRenderDoneState) {
+            this.elCopyRenderHeading.textContent = 'Done';
+            this.elCopyRenderDoneText.textContent = this.copyRenderDoneState.message;
         }
         this.elMetadataDialog.hidden = !this.metadataDialogOpen;
         if (this.contextMenuState) {
@@ -2367,10 +3471,11 @@ export class MdzipWorkspaceView {
             }
         });
         // Ctrl/Cmd+A normally selects the whole page, which in split layout grabs
-        // both panes' text at once. Scope it to the rendered content instead when
-        // focus is inside the preview pane (see the mousedown handler below for
-        // how it gets there); the source editor keeps its own defaultKeymap
-        // binding since CodeMirror's content root sits outside this element.
+        // both panes' text at once. Scope it to a Copy All of the rendered
+        // content instead when focus is inside the preview pane (see the
+        // mousedown handler below for how it gets there); the source editor
+        // keeps its own defaultKeymap binding since CodeMirror's content root
+        // sits outside this element.
         doc.addEventListener('keydown', (e) => {
             if (e.key.toLowerCase() !== 'a' || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) {
                 return;
@@ -2379,7 +3484,7 @@ export class MdzipWorkspaceView {
                 return;
             }
             e.preventDefault();
-            this.selectAllPreviewContent();
+            void this.copyAllPreviewContent();
         });
         this.elNavBtn.addEventListener('click', () => {
             if (!this.controlPolicy.navigation) {
@@ -2650,6 +3755,28 @@ export class MdzipWorkspaceView {
         this.elPackFilesConfirmBtn.addEventListener('click', () => {
             this.resolvePackFilesDialog(this.readPackFilesDialogDecision());
         });
+        this.elCopyRenderDialog.querySelector('[data-action="cancel-copy-render"]')
+            .addEventListener('click', () => {
+            this.copyRenderDialogState?.abort.abort();
+        });
+        this.elCopyRenderDialog.querySelector('[data-action="cancel-copy-ready"]')
+            .addEventListener('click', () => {
+            this.copyReadyState = null;
+            this.render();
+        });
+        this.elCopyRenderDialog.querySelector('[data-action="confirm-copy-ready"]')
+            .addEventListener('click', () => {
+            // Must call the actual write synchronously from this handler (no
+            // awaits ahead of it) — this click is the fresh user gesture the
+            // Clipboard API needs; losing it to another async hop before the
+            // write starts would defeat the entire reason this button exists.
+            void this.performReadyCopy();
+        });
+        this.elCopyRenderDialog.querySelector('[data-action="dismiss-copy-render"]')
+            .addEventListener('click', () => {
+            this.copyRenderDoneState = null;
+            this.render();
+        });
         this.elNavMenu.addEventListener('click', (e) => {
             e.stopPropagation();
             const item = e.target.closest('[data-menu-action]');
@@ -2782,6 +3909,11 @@ export class MdzipWorkspaceView {
                 void this.replaceFileFromPicker(path, file);
             }
         });
+        const markPreviewGesture = () => { this.lastPreviewGestureTime = performance.now(); };
+        this.elPreviewPane.addEventListener('wheel', markPreviewGesture, { passive: true });
+        this.elPreviewPane.addEventListener('touchstart', markPreviewGesture, { passive: true });
+        this.elPreviewPane.addEventListener('mousedown', markPreviewGesture);
+        this.elPreviewPane.addEventListener('keydown', markPreviewGesture);
         this.elPreviewPane.addEventListener('scroll', () => this.syncScrollFromPreview());
         // Gives the pane logical focus on click so a subsequent Ctrl/Cmd+A (below)
         // can be scoped to it. tabindex="-1" keeps it out of Tab order; this is
@@ -2915,6 +4047,18 @@ export class MdzipWorkspaceView {
             this.tooltipHideTimer = null;
         }, 40);
     }
+    /** Briefly shows a status message (e.g. "Text copied to clipboard") near the bottom of the view, auto-hiding after a couple of seconds. */
+    showCopyToast(message) {
+        if (this.copyToastHideTimer) {
+            clearTimeout(this.copyToastHideTimer);
+        }
+        this.elCopyToast.textContent = message;
+        this.elCopyToast.hidden = false;
+        this.copyToastHideTimer = setTimeout(() => {
+            this.elCopyToast.hidden = true;
+            this.copyToastHideTimer = null;
+        }, 2000);
+    }
     async save() {
         try {
             const workspace = this.workspace;
@@ -2969,15 +4113,35 @@ export class MdzipWorkspaceView {
     }
     renderMetadata(snapshot) {
         const manifest = snapshot.content.manifest;
+        const isMdz = snapshot.sourceFormat === 'mdz';
         const fields = [
             ['Filename', snapshot.fileName],
-            ['Format', snapshot.sourceFormat === 'mdz' ? 'MDZ package' : 'Markdown'],
+            ['Format', isMdz ? 'MDZ package' : 'Markdown'],
+            // For .mdz, archiveBytes really is what a save right now would write —
+            // current in-memory bytes, edits included, not a stale re-read of disk.
+            // For plain Markdown, archiveBytes is *not* that: it's some internally
+            // wrapped representation with its own fixed overhead (verified: a
+            // 5-byte markdown document reported 462 "archive" bytes) — use the
+            // actual text's encoded size instead, which is what a .md save writes.
+            ['Size', formatByteSize(isMdz ? snapshot.archiveBytes.length : new TextEncoder().encode(snapshot.currentText).length)],
             ['Document title', snapshot.displayTitle],
             ['First heading', snapshot.headingFallback ?? 'Not found'],
             ['Created', formatMetadataValue(manifest?.created)],
             ['Modified', formatMetadataValue(manifest?.modified)],
-            ['Entry point', snapshot.sourceFormat === 'mdz' ? snapshot.content.entryPoint : 'Not applicable']
+            ['Entry point', isMdz ? snapshot.content.entryPoint : 'Not applicable'],
+            ['Documents', isMdz ? String(snapshot.workspace.documents.length) : 'Not applicable'],
+            ['Assets', isMdz ? String(snapshot.workspace.assets.length) : 'Not applicable']
         ];
+        // Only shown when actually read-only — most documents are editable, and a
+        // "Read-only: No" row for the common case would just be noise. Spelled
+        // out as a filesystem condition rather than an editor state: this mode is
+        // driven entirely by the host (see MdzipWorkspaceOpenOptions.mode) — most
+        // often because a host checked the file's OS/disk permissions, as the
+        // vscode extension does — not something toggled inside the editor itself,
+        // so the wording should point users at their file, not at this UI.
+        if (snapshot.mode === 'read-only') {
+            fields.splice(1, 0, ['Read-only', 'Yes — the file on disk (or its host) is not writable']);
+        }
         this.elMetadataList.replaceChildren(...fields.map(([label, value]) => {
             return this.createMetadataRow(label, value);
         }));
@@ -3293,6 +4457,61 @@ export class MdzipWorkspaceView {
             this.cmEditor.focus();
         }
     }
+    /**
+     * Handles a click on an existing image's edit affordance (see
+     * `imageEditAffordanceField`/the `click` domEventHandler in
+     * createCmEditor). Only reachable when `imageEditHandler` is set — the
+     * click handler that dispatches the affordance already gates on that.
+     */
+    async openImageEditFlow(from, to) {
+        const editor = this.cmEditor;
+        const handler = this.options.imageEditHandler;
+        if (!editor || !handler) {
+            return;
+        }
+        const parsed = findImageReferenceAtOffset(editor.state, from);
+        if (!parsed || parsed.from !== from || parsed.to !== to) {
+            return;
+        }
+        const request = {
+            src: parsed.src,
+            altText: parsed.altText,
+            width: parsed.width,
+            height: parsed.height,
+            position: parsed.position,
+            mode: parsed.kind
+        };
+        let decision;
+        try {
+            decision = normalizeImageInsertDecision(await handler(request));
+        }
+        catch (error) {
+            this.options.onFailed?.(error);
+            decision = null;
+        }
+        this.cmEditor?.dispatch({ effects: imageEditAffordanceEffect.of(null) });
+        if (!decision) {
+            return; // cancelled
+        }
+        const current = this.cmEditor;
+        if (!current) {
+            return;
+        }
+        // The handler may have awaited arbitrarily long — revalidate against the
+        // live doc instead of trusting the captured range/text, in case it
+        // changed underneath while the dialog was open.
+        const revalidated = findImageReferenceAtOffset(current.state, from);
+        if (!revalidated || revalidated.raw !== parsed.raw) {
+            this.options.onFailed?.(new Error('Image reference changed before the edit could be applied.'));
+            return;
+        }
+        const replacement = formatImageEditMarkdown(revalidated.src, decision);
+        current.dispatch({
+            changes: { from: revalidated.from, to: revalidated.to, insert: replacement },
+            selection: { anchor: revalidated.from + replacement.length }
+        });
+        current.focus();
+    }
     async resolveImageInsertDecision(bytes, mimeType, options) {
         const size = sniffImageSize(bytes, mimeType);
         const request = {
@@ -3589,7 +4808,7 @@ export class MdzipWorkspaceView {
         }
     }
     // Items for the rendered-preview selection menu. Taking over `contextmenu`
-    // to offer Select All also suppresses the browser's native menu — which is
+    // to offer Copy All also suppresses the browser's native menu — which is
     // the only thing that was otherwise offering Copy on a right-click — so
     // Copy has to be reinstated explicitly whenever there's a selection.
     previewMenuItems() {
@@ -3603,11 +4822,16 @@ export class MdzipWorkspaceView {
             items.push(null);
         }
         items.push({
-            action: 'preview-select-all',
-            label: 'Select All',
-            icon: MENU_SELECT_ALL_ICON_HTML,
+            action: 'preview-copy-all',
+            label: 'Copy All',
+            icon: MENU_COPY_ICON_HTML,
             shortcut: this.editorShortcut('A')
         });
+        items.push({
+            action: 'preview-copy-all-images',
+            label: 'Copy All with Images',
+            icon: MENU_COPY_ICON_HTML
+        });
         return items;
     }
     handlePreviewMenuAction(action) {
@@ -3618,41 +4842,458 @@ export class MdzipWorkspaceView {
             return;
         }
         switch (action) {
-            case 'preview-select-all':
-                this.selectAllPreviewContent();
+            case 'preview-copy-all':
+                void this.copyAllPreviewContent();
+                break;
+            case 'preview-copy-all-images':
+                void this.copyAllWithImagesPreviewContent();
                 break;
             case 'preview-copy':
-                void this.copyPreviewSelection(state.text);
+                // Partial Copy never shows the render dialog (there's nothing to
+                // drain), so its confirmation is always the brief toast.
+                void this.copyPreviewSelection(state.text).then((outcome) => this.finishCopyNotification(false, outcome));
                 break;
         }
     }
+    /**
+     * Shows the copy confirmation either as a brief auto-hiding toast (an
+     * instant copy — nothing for the user to have looked away from) or, if
+     * the render dialog was showing, by switching that same dialog into a
+     * dismissable "done" state instead of hiding it — a copy that took long
+     * enough to need a progress dialog shouldn't end in a 2-second toast the
+     * user may not be looking at. `outcome` null means there was nothing to
+     * copy (empty selection) — silently clean up the dialog if one was
+     * showing, no confirmation needed. An `error` outcome carries the actual
+     * failure text inline (`onFailed` is a host callback with no guaranteed
+     * visible surface — this component has no other way to guarantee the
+     * user ever sees why it failed).
+     */
+    finishCopyNotification(dialogWasShown, outcome) {
+        if (!outcome) {
+            if (dialogWasShown) {
+                this.copyRenderDialogState = null;
+                this.render();
+            }
+            return;
+        }
+        const text = 'error' in outcome ? `Copy failed: ${outcome.error}` : outcome.message;
+        if (dialogWasShown) {
+            this.copyRenderDialogState = null;
+            this.copyRenderDoneState = { message: text };
+            this.render();
+        }
+        else {
+            this.showCopyToast(text);
+        }
+    }
+    /** Switches the render dialog into its "ready to copy" state, holding `perform` until the user clicks Copy — see `copyReadyState` for why the write can't just happen automatically here. */
+    armCopyReady(perform) {
+        this.copyRenderDialogState = null;
+        this.copyReadyState = { perform };
+        this.render();
+    }
+    /** Runs the held write from `copyReadyState` — called directly from the dialog's Copy button click, which is what makes the write's own user-activation check pass. */
+    async performReadyCopy() {
+        const ready = this.copyReadyState;
+        if (!ready)
+            return;
+        this.copyReadyState = null;
+        const outcome = await ready.perform();
+        // Always the dialog path: copyReadyState only ever gets armed for a
+        // copy that already showed the progress dialog.
+        this.finishCopyNotification(true, outcome);
+    }
+    /**
+     * Races `promise` against a timer, rejecting with `timeoutMessage` if the
+     * timer wins. The async Clipboard API has no built-in timeout, and a
+     * write large enough to strain a real OS clipboard (a document with
+     * thousands of embedded images can build a HTML payload well over
+     * 100MB) can apparently hang indefinitely on some machines rather than
+     * rejecting — without this, that leaves the operation permanently
+     * pending, and the progress dialog never resolves into either a done or
+     * a failure state.
+     */
+    async withTimeout(promise, timeoutMs, timeoutMessage) {
+        let timer;
+        const timeout = new Promise((_, reject) => {
+            timer = setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs);
+        });
+        try {
+            return await Promise.race([promise, timeout]);
+        }
+        finally {
+            clearTimeout(timer);
+        }
+    }
+    /** Writes `text` to the clipboard. Returns null if there was nothing to copy (a true no-op, not a failure); otherwise a success message or the failure text (also reported via `onFailed`, but that's a host callback with no guaranteed visible surface — the caller needs the text itself to show the user). */
     async copyPreviewSelection(text) {
         if (!text) {
-            return;
+            return null;
         }
         try {
-            await this.editorClipboard()?.writeText(text);
+            await this.withTimeout(Promise.resolve(this.editorClipboard()?.writeText(text)), this.clipboardFallbackWriteTimeoutMs, 'Clipboard write timed out.');
+            return { message: 'Plain text copied to clipboard' };
         }
         catch (error) {
             this.options.onFailed?.(error);
+            return { error: error instanceof Error ? error.message : String(error) };
         }
     }
-    // Selects the full rendered content of the preview pane, scoped to that
-    // pane rather than the whole page (native Ctrl+A / right-click Select All
-    // would otherwise grab the source editor's text too in split layout).
-    selectAllPreviewContent() {
-        const doc = this.elPreviewContent.ownerDocument;
-        const selection = doc.defaultView?.getSelection();
-        if (!selection) {
+    /** Syncs just the copy-render dialog's progress bar/text from `copyRenderDialogState` — see `copyAllPreviewContent` for why this bypasses `render()`. No-op while the dialog isn't showing. */
+    updateCopyRenderDialogProgress() {
+        if (!this.copyRenderDialogState) {
+            return;
+        }
+        const { done, total, label } = this.copyRenderDialogState;
+        const percent = total > 0 ? Math.round((done / total) * 100) : 0;
+        this.elCopyRenderProgressBar.style.width = `${percent}%`;
+        this.elCopyRenderProgressText.textContent = total > 0 ? `${label} (${done} / ${total})...` : `${label}...`;
+    }
+    /**
+     * Copies the entire rendered document as plain text (same fidelity as
+     * `copyPreviewSelection` — no HTML, no `ClipboardItem`), regardless of how
+     * much of it is currently mounted under progressive rendering. If
+     * everything's already mounted (small doc, eager/non-progressive mount, or
+     * the user already scrolled through it) this is instant —
+     * `chunkedRenderState` is either null (no markdown open, or a non-default
+     * renderer) or has nothing left to mount (`cursor >= records.length`) in
+     * exactly that case. Otherwise it force-drains the rest first, showing a
+     * cancelable progress dialog once the wait clears a short debounce so fast
+     * documents never flicker it into view.
+     */
+    async copyAllPreviewContent() {
+        const pending = this.chunkedRenderState;
+        if (!pending || pending.cursor >= pending.records.length) {
+            const outcome = await this.copyPreviewSelection(this.elPreviewContent.textContent ?? '');
+            this.finishCopyNotification(false, outcome);
+            return;
+        }
+        const total = pending.records.length;
+        const abort = new AbortController();
+        let dialogShown = false;
+        const label = 'Rendering the full document';
+        const showDialogTimer = setTimeout(() => {
+            dialogShown = true;
+            this.copyRenderDialogState = { done: pending.cursor, total, label, abort };
+            this.render();
+        }, 200);
+        // Progress ticks update the dialog's progress bar/text directly instead
+        // of going through the view's full `render()` — profiling a drain on a
+        // 15,000-image document showed `render()` alone (it re-syncs the whole
+        // shell, e.g. rebuilding the nav tree) costing ~870ms of self-time over
+        // a 4s sample even throttled to 10/sec, dwarfing the actual chunk-mount
+        // work it was meant to make room for.
+        await this.drainRemainingChunks(pending, (done) => {
+            if (!dialogShown)
+                return;
+            this.copyRenderDialogState = { done, total, label, abort };
+            this.updateCopyRenderDialogProgress();
+        }, abort.signal);
+        clearTimeout(showDialogTimer);
+        if (abort.signal.aborted) {
+            if (dialogShown) {
+                this.copyRenderDialogState = null;
+                this.render();
+            }
+            // Cancelled partway through — whatever's left stays unmounted, so
+            // re-arm the usual scroll-driven continuation for it.
+            const remaining = this.chunkedRenderState;
+            if (remaining && remaining.generation === pending.generation && !remaining.sentinelHandle
+                && remaining.cursor < remaining.records.length) {
+                this.armChunkSentinel(remaining.records, remaining.cursor, remaining.context, remaining.generation, remaining.animateImageHydration);
+            }
+            return;
+        }
+        if (dialogShown) {
+            // The prepare phase above can take anywhere from seconds to minutes —
+            // long enough that the click which started this has lost its user
+            // activation by now, so the actual write waits for a fresh one
+            // (the dialog's own Copy button) instead of firing automatically.
+            // See copyReadyState's doc comment.
+            this.armCopyReady(() => this.copyPreviewSelection(this.elPreviewContent.textContent ?? ''));
             return;
         }
-        // Focus before selecting: focusing the pane after building the range
-        // collapses the selection right back out.
-        this.elPreviewPane.focus({ preventScroll: true });
-        const range = doc.createRange();
-        range.selectNodeContents(this.elPreviewContent);
-        selection.removeAllRanges();
-        selection.addRange(range);
+        const outcome = await this.copyPreviewSelection(this.elPreviewContent.textContent ?? '');
+        this.finishCopyNotification(false, outcome);
+    }
+    /**
+     * Renders the *entire* current document to one HTML string, independent
+     * of whatever's mounted in `elPreviewContent` — no DOM reads or writes.
+     * Copy All with Images needs pristine `<img src="original/path">` markup
+     * to hand to `MdzipAssetSession.rewriteHtmlEmbeddingImages`, and an
+     * already-mounted, possibly-hydrated `<img>` in the live preview may have
+     * had its `src` swapped for a `blob:` URL or stripped entirely pending lazy
+     * load — either way the original archive path is gone. Time-budgeted and
+     * yielded like `renderAndMountChunkBatch`, for the same reason: some
+     * chunks cost far more to render+sanitize than others. Extension `mount()`
+     * hooks are not run — they render into a live DOM (e.g. mermaid diagrams
+     * turning marked-up code fences into SVG), which this never touches, so a
+     * mermaid diagram will paste as its pre-render markup, not a rendered
+     * diagram. Only reachable when `renderingService.supportsChunking` is
+     * true; the caller checks that first.
+     */
+    async renderFullDocumentHtml(snapshot, context, signal, cacheGeneration, onProgress) {
+        const tokensResult = this.renderingService.tokenizeMarkdown(snapshot.currentText, context);
+        const tokens = Array.isArray(tokensResult) ? tokensResult : await tokensResult;
+        if (signal.aborted) {
+            throw new DOMException('Rendering aborted.', 'AbortError');
+        }
+        // groupTokensIntoChunks is also called with no options in
+        // renderAndMountChunkBatch's caller (mountChunkedPreview) — keep both
+        // call sites' chunking in sync, since chunk index is chunkHtmlCache's
+        // only key.
+        const chunks = groupTokensIntoChunks(tokens, this.chunkOptions());
+        const view = this.elPreviewContent.ownerDocument.defaultView;
+        const clock = view?.performance ?? performance;
+        const BATCH_TIME_BUDGET_MS = 10;
+        let html = '';
+        let cursor = 0;
+        while (cursor < chunks.length) {
+            if (signal.aborted) {
+                throw new DOMException('Rendering aborted.', 'AbortError');
+            }
+            const batchStart = clock.now();
+            let processedInBatch = 0;
+            while (cursor < chunks.length && (processedInBatch === 0 || clock.now() - batchStart < BATCH_TIME_BUDGET_MS)) {
+                const chunkIndex = cursor;
+                const cacheHit = cacheGeneration !== null && this.chunkHtmlCache?.generation === cacheGeneration
+                    ? this.chunkHtmlCache.html.get(chunkIndex)
+                    : undefined;
+                let chunkHtml;
+                if (cacheHit !== undefined) {
+                    chunkHtml = cacheHit;
+                }
+                else {
+                    const result = this.renderingService.renderChunk(chunks[chunkIndex], context);
+                    chunkHtml = typeof result === 'string' ? result : await result;
+                    // Only populate the shared cache if this generation is *still*
+                    // the live one at the moment this (possibly async) render
+                    // finished — checked per-chunk, not once up front, since the
+                    // outer loop yields via requestAnimationFrame and individual
+                    // chunk renders (mermaid) can themselves be async. If the
+                    // document was edited mid-copy, cacheGeneration is now stale
+                    // even though this render (for the snapshot Copy All captured)
+                    // legitimately continues to completion — never write it back
+                    // under a generation number that's no longer current.
+                    if (cacheGeneration !== null && cacheGeneration === this.previewGeneration) {
+                        if (this.chunkHtmlCache?.generation !== cacheGeneration) {
+                            this.chunkHtmlCache = { generation: cacheGeneration, html: new Map() };
+                        }
+                        this.chunkHtmlCache.html.set(chunkIndex, chunkHtml);
+                    }
+                }
+                html += chunkHtml;
+                cursor += 1;
+                processedInBatch += 1;
+            }
+            onProgress?.(cursor, chunks.length);
+            if (cursor >= chunks.length) {
+                break;
+            }
+            if (signal.aborted) {
+                throw new DOMException('Rendering aborted.', 'AbortError');
+            }
+            await new Promise((resolve) => {
+                if (view?.requestAnimationFrame)
+                    view.requestAnimationFrame(() => resolve());
+                else
+                    setTimeout(resolve, 0);
+            });
+        }
+        return html;
+    }
+    /**
+     * Like `copyAllPreviewContent`, but writes a rich `text/html` clipboard
+     * representation (alongside the same `text/plain` fallback) with every
+     * archive image re-embedded as a self-contained `data:` URL — the format
+     * an external app like Word needs, since this document's own `blob:` URLs
+     * only resolve inside this tab. Two phases share one debounced, cancelable
+     * dialog: render the document fresh (`renderFullDocumentHtml`), then embed
+     * its images (`rewriteHtmlEmbeddingImages`). Falls back to
+     * `copyAllPreviewContent`'s plain-text-only behavior when there's no
+     * default renderer to re-render from (a host-supplied custom renderer,
+     * the same escape hatch `progressiveTextRendering` already has) — or, if
+     * the clipboard rejects the rich write for any reason (unsupported
+     * browser, payload too large), falls back to a plain-text write so the
+     * user still gets *something* rather than nothing.
+     */
+    async copyAllWithImagesPreviewContent() {
+        const snapshot = this.workspace?.snapshot();
+        if (!snapshot || snapshot.currentPathType !== 'markdown' || !this.renderingService.supportsChunking) {
+            await this.copyAllPreviewContent();
+            return;
+        }
+        const abort = new AbortController();
+        let dialogShown = false;
+        const showDialogTimer = setTimeout(() => {
+            dialogShown = true;
+            this.copyRenderDialogState = { done: 0, total: 0, label: 'Rendering the document', abort };
+            this.render();
+        }, 200);
+        const updateProgress = (done, total, label) => {
+            if (!dialogShown)
+                return;
+            this.copyRenderDialogState = { done, total, label, abort };
+            this.updateCopyRenderDialogProgress();
+        };
+        let finalHtml;
+        let imageCount = 0;
+        try {
+            const context = this.createMarkdownContext(snapshot, abort.signal);
+            // Only trust chunkHtmlCache if the live preview generation still
+            // represents this exact snapshot — if the preview hasn't caught up to
+            // it yet, or the document has since changed, render fully fresh
+            // rather than risk splicing in HTML for different content.
+            const cacheGeneration = this.previewMemoMatchesSnapshot(snapshot) ? this.previewGeneration : null;
+            let html = await this.renderFullDocumentHtml(snapshot, context, abort.signal, cacheGeneration, (done, total) => updateProgress(done, total, 'Rendering the document'));
+            if (this.assetSession) {
+                html = await this.assetSession.rewriteHtmlEmbeddingImages(html, snapshot.currentPath, abort.signal, (done, total) => {
+                    imageCount = total;
+                    updateProgress(done, total, 'Embedding images');
+                });
+            }
+            finalHtml = html;
+        }
+        catch (error) {
+            clearTimeout(showDialogTimer);
+            if (error?.name === 'AbortError') {
+                // Deliberate cancel — just close, no failure to report.
+                if (dialogShown) {
+                    this.copyRenderDialogState = null;
+                    this.render();
+                }
+            }
+            else {
+                this.finishCopyNotification(dialogShown, { error: error instanceof Error ? error.message : String(error) });
+                this.options.onFailed?.(error);
+            }
+            return;
+        }
+        clearTimeout(showDialogTimer);
+        const scratch = this.elPreviewContent.ownerDocument.createElement('div');
+        scratch.innerHTML = finalHtml;
+        const plainText = scratch.textContent ?? '';
+        if (dialogShown) {
+            // Same reasoning as copyAllPreviewContent: the prepare phase (often
+            // the slower of the two here, once image embedding is involved) has
+            // long since burned through the click's user activation.
+            this.armCopyReady(() => this.writeRichClipboard(finalHtml, plainText, imageCount));
+            return;
+        }
+        const outcome = await this.writeRichClipboard(finalHtml, plainText, imageCount);
+        this.finishCopyNotification(false, outcome);
+    }
+    /**
+     * Writes an HTML+plain-text `ClipboardItem` when the browser supports it,
+     * falling back to a plain-text-only `writeText` (same as
+     * `copyPreviewSelection`, which reports itself as "Plain text") when it
+     * doesn't, or if the rich write itself throws (e.g. a payload too large
+     * for the OS clipboard) — either way the user ends up with *something* on
+     * their clipboard rather than nothing. Returns the confirmation message
+     * for the caller to show (see `finishCopyNotification`), naming the
+     * actual MIME type that ended up on the clipboard ("HTML" for a
+     * successful rich write, "Plain text" for the fallback) so the user knows
+     * what they're about to paste — `imageCount` only adds to the "HTML"
+     * wording, since even a rich write with zero images is still HTML, not
+     * plain text.
+     */
+    async writeRichClipboard(html, plainText, imageCount) {
+        const clipboard = this.editorClipboard();
+        const view = this.elPreviewContent.ownerDocument.defaultView;
+        const ClipboardItemCtor = view?.ClipboardItem;
+        if (clipboard && ClipboardItemCtor && 'write' in clipboard) {
+            try {
+                const item = new ClipboardItemCtor({
+                    'text/html': new Blob([html], { type: 'text/html' }),
+                    'text/plain': new Blob([plainText], { type: 'text/plain' })
+                });
+                // A document with thousands of repeated images (e.g. an avatar
+                // reused across every row of a chat export) can build a payload
+                // well over 100MB, since each occurrence embeds its own full copy
+                // — the clipboard format has no way to reference a shared resource.
+                // 30s is generous for a legitimate slow write; the real purpose is
+                // making sure this can't hang forever with the dialog stuck mid-copy.
+                await this.withTimeout(clipboard.write([item]), this.clipboardWriteTimeoutMs, 'Clipboard write timed out.');
+                return {
+                    message: imageCount > 0
+                        ? `HTML with ${imageCount} image${imageCount === 1 ? '' : 's'} copied to clipboard`
+                        : 'HTML copied to clipboard'
+                };
+            }
+            catch (error) {
+                this.options.onFailed?.(error);
+                // Fall through to the plain-text fallback rather than surfacing
+                // this error directly — if that also fails, its error is more
+                // relevant (it's the one actually blocking the user from getting
+                // anything at all), and the plain-text path already reports this
+                // one to onFailed for anyone watching that.
+            }
+        }
+        return await this.copyPreviewSelection(plainText);
+    }
+    /**
+     * Mounts every chunk from `state.cursor` onward, yielding to a fresh
+     * animation frame between batches (unlike the sentinel path's rAF-time-
+     * budgeted-per-batch loop, this has no viewport to wait on — it has to
+     * plow through the whole rest of the document, so the explicit yield is
+     * what keeps a huge draw from locking up the tab while it does). Stops
+     * early if `signal` aborts, a newer render generation supersedes this one,
+     * or the chunk state's own render context aborts.
+     *
+     * Deliberately uses `renderAndMountChunkBatch` instead of `mountChunkBatch`
+     * and defers image hydration until the whole drain finishes, running it
+     * once over every image the drain mounted, instead of once per batch:
+     * Copy All only needs the mounted chunks' *text* (`elPreviewContent
+     * .textContent`, which images never contribute to), so there's no reason
+     * to wait on `hydrateImages`' async image resolution at all here — and
+     * racing through batches as fast as this loop can while each one fires
+     * its own independent, un-awaited `hydrateImages` background loop (as
+     * `mountChunkBatch` does for the scroll-paced callers, where that's fine —
+     * scrolling naturally rate-limits how many can ever be in flight at once)
+     * lets dozens of those loops pile up concurrently on an image-heavy
+     * document, each spending its own `CHUNK_BUDGET_MS` in the same frame —
+     * measured 100-200ms frame gaps on a 15,000-image document. One combined
+     * pass over every image at the end avoids the pile-up entirely, without
+     * making Copy All wait on it.
+     */
+    async drainRemainingChunks(state, onProgress, signal) {
+        const { records, context, generation, animateImageHydration } = state;
+        // Draining is instead of the scroll-driven continuation, not alongside
+        // it — tearing down any armed sentinel first stops the two from racing
+        // and double-mounting the same chunk.
+        state.sentinelHandle?.destroy();
+        if (this.chunkedRenderState?.generation === generation) {
+            this.chunkedRenderState.sentinelHandle = null;
+            // Same race the `mounting` field guards against elsewhere: an edit
+            // landing mid-drain must not reconcile against a cursor this loop is
+            // actively advancing out from under it.
+            this.chunkedRenderState.mounting = true;
+        }
+        const allPending = [];
+        try {
+            while (this.chunkedRenderState?.generation === generation && this.chunkedRenderState.cursor < records.length) {
+                if (signal.aborted || generation !== this.previewGeneration || context.signal.aborted)
+                    return;
+                const cursor = this.chunkedRenderState.cursor;
+                const { cursor: newCursor, mountedRoots } = await this.renderAndMountChunkBatch(records, cursor, context, generation);
+                if (generation !== this.previewGeneration || context.signal.aborted)
+                    return;
+                allPending.push(...this.collectPendingImages(mountedRoots, context, generation, animateImageHydration));
+                this.recordChunkProgress(generation, records, newCursor);
+                onProgress(newCursor, records.length);
+                if (signal.aborted)
+                    return;
+                await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+            }
+        }
+        finally {
+            if (this.chunkedRenderState?.generation === generation) {
+                this.chunkedRenderState.mounting = false;
+            }
+            if (generation === this.previewGeneration && !context.signal.aborted) {
+                this.hydrateImages(allPending, context, generation, animateImageHydration, () => { });
+            }
+        }
     }
     // Inserts a fenced code block, carrying the chosen language as the fence info
     // string. An empty language produces a plain ```` ``` ```` block.
@@ -4619,6 +6260,12 @@ export class MdzipWorkspaceView {
         if (this.syncing || !this.cmEditor || this.layout !== 'split') {
             return;
         }
+        if (performance.now() - this.lastPreviewGestureTime > MdzipWorkspaceView.SCROLL_SYNC_GESTURE_WINDOW_MS) {
+            return;
+        }
+        if (performance.now() - this.lastContentChangeTime < MdzipWorkspaceView.SCROLL_SYNC_SETTLE_MS) {
+            return;
+        }
         const currentTop = this.elPreviewPane.scrollTop;
         // Recognize this event as the echo of our own prior write (from
         // syncScrollToPreview) by comparing values instead of racing timing.
@@ -4649,6 +6296,12 @@ export class MdzipWorkspaceView {
         if (this.syncing || !this.cmEditor || this.layout !== 'split') {
             return;
         }
+        if (performance.now() - this.lastEditorGestureTime > MdzipWorkspaceView.SCROLL_SYNC_GESTURE_WINDOW_MS) {
+            return;
+        }
+        if (performance.now() - this.lastContentChangeTime < MdzipWorkspaceView.SCROLL_SYNC_SETTLE_MS) {
+            return;
+        }
         const cmScroller = this.cmEditor.dom.querySelector('.cm-scroller');
         if (!cmScroller) {
             return;
@@ -4658,8 +6311,44 @@ export class MdzipWorkspaceView {
         if (this.lastSyncedEditorScrollTop !== null && Math.abs(currentTop - this.lastSyncedEditorScrollTop) < 2) {
             return;
         }
-        this.syncing = true;
         const editorHeight = cmScroller.scrollHeight - cmScroller.clientHeight;
+        // The editor is at its true bottom, but under progressive rendering the
+        // preview's scrollHeight only accounts for chunks mounted so far — a
+        // plain ratio jump would only reach the bottom of whatever happens to be
+        // mounted right now, not the document's actual end. Force-drain the rest
+        // first so this edge is reliable regardless of how much has been
+        // scrolled-into-view on the preview side.
+        //
+        // "At the bottom" is detected via CodeMirror's own viewport, not a
+        // scrollHeight/scrollTop pixel comparison: CodeMirror estimates the
+        // height of not-yet-measured (virtualized) lines, and on a huge document
+        // that estimate can be tens of pixels off from where it actually clamps
+        // scrollTop — confirmed live against a real 88,000-line file, where a
+        // small fixed pixel epsilon never matched. `viewport.to` is what
+        // CodeMirror has actually decided to draw for the current scroll
+        // position, so comparing it to the document length is exact regardless
+        // of any height estimation drift.
+        //
+        // `viewport.to >= doc.length` alone is a false positive whenever the
+        // whole document already fits within the editor's visible area — there
+        // is no scrolling at all in that case, so `viewport.to` trivially covers
+        // the full document from position 0 regardless of scroll intent. Without
+        // the overflow check below, a short-to-medium document (especially one
+        // with images, which slow down per-chunk mounting enough to leave a real
+        // window where `cursor < records.length`) could hit this branch off of
+        // an incidental scroll event fired mid-edit — e.g. focus or cursor
+        // movement nudging `scrollTop` by a sub-pixel amount — and force-drain
+        // plus jump the preview to its bottom for no reason the user asked for,
+        // which (via the echo-breaking reflow that follows, since late-arriving
+        // image layout shifts the "bottom" after the jump) can drag the editor's
+        // own scroll down to match through `syncScrollFromPreview`'s echo path.
+        const hasScrollableOverflow = editorHeight > 0;
+        const atDocEnd = hasScrollableOverflow && this.cmEditor.viewport.to >= this.cmEditor.state.doc.length;
+        if (atDocEnd && this.chunkedRenderState && this.chunkedRenderState.cursor < this.chunkedRenderState.records.length) {
+            void this.syncScrollToPreviewBottom();
+            return;
+        }
+        this.syncing = true;
         const scrollRatio = editorHeight > 0 ? currentTop / editorHeight : 0;
         const previewHeight = this.elPreviewPane.scrollHeight - this.elPreviewPane.clientHeight;
         const target = scrollRatio * previewHeight;
@@ -4667,6 +6356,84 @@ export class MdzipWorkspaceView {
         this.elPreviewPane.scrollTop = target;
         this.syncing = false;
     }
+    /**
+     * Handles syncScrollToPreview's bottom edge when the preview still has
+     * unmounted chunks: force-mounts the rest (same drain Copy All uses) so
+     * the preview's scrollHeight reflects the whole document, then jumps to
+     * its real bottom — instead of the ordinary ratio-based jump, which would
+     * only land at the bottom of whatever was mounted the instant the sync
+     * fired. Re-checks that the editor is still at its bottom and the document
+     * hasn't changed before applying the jump, since the drain can take long
+     * enough on a huge document for either to no longer hold.
+     *
+     * On the most extreme real documents this drain has been measured at
+     * ~106s (thousands of chunks, tens of thousands of images each needing a
+     * real DOM slot + IntersectionObserver registration) — long enough that a
+     * silent wait looks indistinguishable from a frozen preview pane. Past a
+     * short debounce (so ordinary documents never see it), a small status
+     * toast shows progress, reusing the same element Copy All's confirmation
+     * messages use.
+     */
+    async syncScrollToPreviewBottom() {
+        const state = this.chunkedRenderState;
+        if (!state || this.bottomDrainGeneration === state.generation) {
+            return;
+        }
+        const generation = state.generation;
+        this.bottomDrainGeneration = generation;
+        if (this.copyToastHideTimer) {
+            clearTimeout(this.copyToastHideTimer);
+            this.copyToastHideTimer = null;
+        }
+        let showToastTimer = setTimeout(() => {
+            showToastTimer = null;
+            this.scrollCatchUpState = { done: state.cursor, total: state.records.length };
+            this.updateScrollCatchUpToast();
+        }, 200);
+        try {
+            await this.drainRemainingChunks(state, (done, total) => {
+                if (!this.scrollCatchUpState)
+                    return;
+                this.scrollCatchUpState = { done, total };
+                this.updateScrollCatchUpToast();
+            }, new AbortController().signal);
+        }
+        finally {
+            if (showToastTimer) {
+                clearTimeout(showToastTimer);
+            }
+            if (this.scrollCatchUpState) {
+                this.scrollCatchUpState = null;
+                this.elCopyToast.hidden = true;
+            }
+            if (this.bottomDrainGeneration === generation) {
+                this.bottomDrainGeneration = null;
+            }
+        }
+        if (generation !== this.previewGeneration || this.layout !== 'split' || !this.cmEditor) {
+            return;
+        }
+        // See the comment in syncScrollToPreview on why this is viewport-based
+        // rather than a scrollHeight/scrollTop pixel comparison.
+        if (this.cmEditor.viewport.to < this.cmEditor.state.doc.length) {
+            return;
+        }
+        this.syncing = true;
+        const target = this.elPreviewPane.scrollHeight - this.elPreviewPane.clientHeight;
+        this.lastSyncedPreviewScrollTop = target;
+        this.elPreviewPane.scrollTop = target;
+        this.syncing = false;
+    }
+    /** Syncs the catch-up toast's text from `scrollCatchUpState`, bypassing `render()` — see `updateCopyRenderDialogProgress` for why. No-op while the toast isn't showing. */
+    updateScrollCatchUpToast() {
+        if (!this.scrollCatchUpState) {
+            return;
+        }
+        const { done, total } = this.scrollCatchUpState;
+        const percent = total > 0 ? Math.round((done / total) * 100) : 0;
+        this.elCopyToast.textContent = total > 0 ? `Catching up the preview... (${percent}%)` : 'Catching up the preview...';
+        this.elCopyToast.hidden = false;
+    }
 }
 function canShowSourceLayout(snapshot) {
     return canEditMdzipPath(snapshot.currentPathType, snapshot.currentPath, 'editable');
@@ -4791,8 +6558,24 @@ function padHtmlImageBlock(html, currentText, selectionStart, selectionEnd) {
         : after.startsWith('\n') ? '\n' : '\n\n';
     return `${prefix}${html}${suffix}`;
 }
-function escapeMarkdownImageAlt(value) {
-    return value.replace(/\\/g, '\\\\').replace(/]/g, '\\]');
+function formatByteSize(bytes) {
+    if (!Number.isFinite(bytes) || bytes < 0) {
+        return 'Not available';
+    }
+    if (bytes < 1024) {
+        return `${bytes} B`;
+    }
+    const units = ['KB', 'MB', 'GB'];
+    let value = bytes / 1024;
+    let unitIndex = 0;
+    while (value >= 1024 && unitIndex < units.length - 1) {
+        value /= 1024;
+        unitIndex += 1;
+    }
+    // One decimal below 10 of a unit (e.g. "1.4 MB"), none above (e.g. "23 MB") —
+    // matches how OS file managers commonly round these.
+    const formatted = value < 10 ? value.toFixed(1) : Math.round(value).toString();
+    return `${formatted} ${units[unitIndex]}`;
 }
 function formatMetadataValue(value) {
     if (typeof value === 'string' && value.trim()) {
@@ -4804,299 +6587,325 @@ function formatMetadataValue(value) {
     }
     return 'Not available';
 }
-const SHELL_HTML = `
-<section class="mdzip-root">
-  <div class="document-strip" data-ref="document-strip" hidden>
-    <button type="button" class="title-button" data-ref="title-btn"></button>
-    <button type="button" class="document-info-button" data-ref="document-info-btn"
-      title="Document information" aria-label="Document information">
-      ${INFO_ICON_HTML}
-    </button>
-  </div>
-
-  <header class="toolbar" data-ref="toolbar" hidden>
-    <div class="toolbar-start">
-      <div class="toolbar-left">
-        <button type="button" class="icon-toggle nav-toggle" data-ref="nav-btn" title="Toggle contents" aria-label="Toggle contents">
-          ${NAV_TOGGLE_ICON_HTML}
-        </button>
-      </div>
-
-      <div class="edit-toolbar" data-ref="edit-toolbar" role="toolbar" aria-label="Markdown formatting">
-        <div class="edit-toolbar-group">
-          <button type="button" data-format="bold" data-format-control="bold" title="Bold" aria-label="Bold">${BOLD_ICON_HTML}</button>
-          <button type="button" data-format="italic" data-format-control="italic" title="Italic" aria-label="Italic">${ITALIC_ICON_HTML}</button>
-          <button type="button" data-format="strike" data-format-control="strikethrough" title="Strikethrough" aria-label="Strikethrough">${STRIKE_ICON_HTML}</button>
-          <div class="format-menu" data-format-control="headings">
-            <button type="button" class="format-menu-toggle" data-format-menu-toggle
-              aria-label="Heading" aria-haspopup="menu" aria-expanded="false">
-              ${HEADING_ICON_HTML}${CHEVRON_ICON_HTML}
-            </button>
-            <div class="format-menu-popover" data-format-menu role="menu" aria-label="Heading level" hidden>
-              <button type="button" role="menuitem" data-format="paragraph">Paragraph</button>
-              <button type="button" role="menuitem" data-format="heading-1" data-heading-level="1"><strong>H1</strong> Heading 1</button>
-              <button type="button" role="menuitem" data-format="heading-2" data-heading-level="2"><strong>H2</strong> Heading 2</button>
-              <button type="button" role="menuitem" data-format="heading-3" data-heading-level="3"><strong>H3</strong> Heading 3</button>
-              <button type="button" role="menuitem" data-format="heading-4" data-heading-level="4"><strong>H4</strong> Heading 4</button>
-              <button type="button" role="menuitem" data-format="heading-5" data-heading-level="5"><strong>H5</strong> Heading 5</button>
-              <button type="button" role="menuitem" data-format="heading-6" data-heading-level="6"><strong>H6</strong> Heading 6</button>
-            </div>
-          </div>
-        </div>
-        <span class="edit-toolbar-divider" aria-hidden="true"></span>
-        <div class="edit-toolbar-group">
-          <button type="button" data-format="bullet-list" data-format-control="bulletList" title="Bulleted list" aria-label="Bulleted list">${BULLET_LIST_ICON_HTML}</button>
-          <button type="button" data-format="ordered-list" data-format-control="orderedList" title="Numbered list" aria-label="Numbered list">${ORDERED_LIST_ICON_HTML}</button>
-          <div class="format-menu" data-format-control="code">
-            <button type="button" class="format-menu-toggle" data-format-menu-toggle
-              aria-label="Code" aria-haspopup="menu" aria-expanded="false">
-              ${CODE_ICON_HTML}${CHEVRON_ICON_HTML}
-            </button>
-            <div class="format-menu-popover" data-format-menu role="menu" aria-label="Code format" hidden>
-              <button type="button" role="menuitem" data-format="code" data-code-kind="inline">Inline code</button>
-              <button type="button" role="menuitem" data-format="code-block" data-code-kind="block">Code block</button>
-            </div>
-          </div>
-          <button type="button" data-format="quote" data-format-control="blockquote" title="Blockquote" aria-label="Blockquote">${QUOTE_ICON_HTML}</button>
-          <button type="button" data-format="line-break" data-format-control="lineBreak" title="Line break" aria-label="Line break">${LINE_BREAK_ICON_HTML}</button>
-        </div>
-        <span class="edit-toolbar-divider" aria-hidden="true"></span>
-        <div class="edit-toolbar-group">
-          <button type="button" data-format="link" data-format-control="link" title="Link" aria-label="Link">${LINK_ICON_HTML}</button>
-          <button type="button" data-format="image" data-format-control="image" title="Image" aria-label="Image">${IMAGE_FORMAT_ICON_HTML}</button>
-          <input type="file" data-ref="image-input" accept="image/*" hidden />
-        </div>
-      </div>
-    </div>
-
-    <div class="toolbar-buttons view-mode-toggle-group" data-ref="layout-controls" role="group" aria-label="Editor layout">
-      <button type="button" class="icon-toggle view-mode-toggle" data-ref="source-btn" title="Edit" aria-label="Edit" aria-pressed="false">
-        <span class="commandbar-flex-container" data-ref="source-icon">${SOURCE_EDIT_ICON_HTML}</span>
-      </button>
-      <button type="button" class="icon-toggle view-mode-toggle" data-ref="split-btn" title="Split" aria-label="Split" aria-pressed="false">
-        <span class="commandbar-flex-container">
-          ${SPLIT_ICON_HTML}
-        </span>
-      </button>
-      <button type="button" class="icon-toggle view-mode-toggle" data-ref="preview-btn" title="View" aria-label="View" aria-pressed="false">
-        <span class="commandbar-flex-container">
-          ${PREVIEW_ICON_HTML}
-        </span>
-      </button>
-    </div>
-
-    <div class="toolbar-controls" data-ref="toolbar-controls">
-      <button type="button" class="icon-toggle" data-ref="search-btn" title="Find/replace (Mod-F)" aria-label="Find/replace">
-        ${SEARCH_ICON_HTML}
-      </button>
-      <button type="button" class="icon-toggle" data-ref="save-btn" title="Save" aria-label="Save">
-        ${SAVE_ICON_HTML}
-      </button>
-      <button type="button" class="icon-toggle zoom-toggle" data-ref="zoom-btn" title="Zoom controls" aria-label="Zoom controls">
-        ${ZOOM_ICON_HTML}
-      </button>
-      <div class="theme-toggle-group" data-ref="theme-controls" role="group" aria-label="Color scheme">
-        <button type="button" class="icon-toggle theme-toggle" data-ref="dark-theme-btn"
-          title="Dark mode" aria-label="Dark mode" aria-pressed="false">
-          ${DARK_THEME_ICON_HTML}
-        </button>
-        <button type="button" class="icon-toggle theme-toggle" data-ref="light-theme-btn"
-          title="Light mode" aria-label="Light mode" aria-pressed="false">
-          ${LIGHT_THEME_ICON_HTML}
-        </button>
-      </div>
-      <div class="zoom-popover" data-ref="zoom-popover" hidden role="group" aria-label="Zoom">
-        <span class="zoom-level" data-ref="zoom-level">100%</span>
-        <span class="zoom-stepper">
-          <button type="button" data-action="zoom-out" title="Zoom out" aria-label="Zoom out">-</button>
-          <button type="button" data-action="zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
-        </span>
-        <button type="button" class="zoom-reset" data-action="zoom-reset" title="Reset zoom">Reset</button>
-      </div>
-    </div>
-  </header>
-
-  <div class="workspace-shell" data-ref="workspace-shell" hidden>
-    <aside class="nav-pane" data-ref="nav-pane" aria-label="Package contents">
-      <div class="nav-tree" data-ref="nav-tree"></div>
-    </aside>
-    <div class="nav-resizer" data-ref="nav-resizer"
-      role="separator" aria-orientation="vertical" aria-label="Resize contents pane"></div>
-
-    <div class="pane-stack" data-ref="pane-stack">
-      <section class="pane edit-pane" data-ref="edit-pane">
-        <div class="editor-host" data-ref="editor-host"></div>
-      </section>
-      <div class="split-resizer" data-ref="split-resizer"
-        role="separator" aria-orientation="vertical" aria-label="Resize split panes"></div>
-      <section class="pane preview-pane" data-ref="preview-pane" tabindex="-1">
-        <article class="preview-content" data-ref="preview-content"></article>
-      </section>
-      <section class="pane entry-pane" data-ref="entry-pane"></section>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="title-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-title-dialog-heading">
-    <div class="title-dialog">
-      <h3 id="mdzip-title-dialog-heading">Set Document Title</h3>
-      <p>This is the package-level title stored in manifest.json.</p>
-      <input type="text" maxlength="120" data-ref="title-input" aria-label="Document title" />
-      <p class="title-dialog-validation" data-ref="title-validation" hidden>Title cannot be empty.</p>
-      <p>If unset, consumers may fall back to entry point, filename, or first heading.</p>
-      <div class="title-dialog-actions">
-        <button type="button" class="reset-title" data-ref="title-reset-btn">Reset</button>
-        <button type="button" data-action="cancel-title">Cancel</button>
-        <button type="button" class="save-title" data-ref="title-save-btn">Save</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="conversion-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-conversion-dialog-heading">
-    <div class="title-dialog">
-      <h3 id="mdzip-conversion-dialog-heading">Convert to MDZ?</h3>
-      <p>
-        Regular Markdown files contain only text. Convert this document to an
-        MDZ package to add images, package navigation, and document metadata.
-      </p>
-      <p>The next save will produce an .mdz file.</p>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-conversion">Cancel</button>
-        <button type="button" class="save-title" data-ref="conversion-confirm-btn">Convert</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="image-insert-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-image-insert-dialog-heading">
-    <div class="title-dialog image-insert-dialog">
-      <h3 id="mdzip-image-insert-dialog-heading">Insert Image</h3>
-      <p>Choose the Markdown inserted for this image.</p>
-      <fieldset class="image-insert-options">
-        <legend>Output</legend>
-        <label>
-          <input type="radio" name="mdzip-image-insert-mode" value="markdown"
-            data-ref="image-insert-mode-markdown" checked />
-          Markdown image
-        </label>
-        <label>
-          <input type="radio" name="mdzip-image-insert-mode" value="html"
-            data-ref="image-insert-mode-html" />
-          HTML &lt;img&gt; with sizing
-        </label>
-      </fieldset>
-      <label class="image-insert-field">
-        <span>Alt text</span>
-        <input type="text" data-ref="image-insert-alt" />
-      </label>
-      <div class="image-insert-grid">
-        <label class="image-insert-field">
-          <span>Size by</span>
-          <select data-ref="image-insert-size-mode">
-            <option value="original">Original size</option>
-            <option value="width" selected>Width</option>
-            <option value="height">Height</option>
-            <option value="percent">Percent</option>
-          </select>
-        </label>
-        <label class="image-insert-field">
-          <span>Value</span>
-          <input type="number" min="1" step="1" data-ref="image-insert-size-value" />
-        </label>
-      </div>
-      <label class="image-insert-field">
-        <span>Position</span>
-        <select data-ref="image-insert-position">
-          <option value="inline">Inline/default</option>
-          <option value="left">Left</option>
-          <option value="center">Center</option>
-          <option value="right">Right</option>
-          <option value="wrap-left">Wrap left</option>
-          <option value="wrap-right">Wrap right</option>
-        </select>
-      </label>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-image-insert">Cancel</button>
-        <button type="button" class="save-title" data-ref="image-insert-confirm-btn">Insert</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="pack-files-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-pack-files-dialog-heading">
-    <div class="title-dialog pack-files-dialog">
-      <h3 id="mdzip-pack-files-dialog-heading">Package Markdown Files</h3>
-      <p>These files contain more than one Markdown document. Choose how to package them.</p>
-      <fieldset class="pack-files-options">
-        <legend>Mode</legend>
-        <label>
-          <input type="radio" name="mdzip-pack-files-mode" value="document"
-            data-ref="pack-files-mode-document" checked />
-          Document — one primary page; the rest are attached
-        </label>
-        <label>
-          <input type="radio" name="mdzip-pack-files-mode" value="project"
-            data-ref="pack-files-mode-project" />
-          Project — a set of related documents
-        </label>
-      </fieldset>
-      <label class="pack-files-field">
-        <span>Entry point</span>
-        <select data-ref="pack-files-entry"></select>
-      </label>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-pack-files">Cancel</button>
-        <button type="button" class="save-title" data-ref="pack-files-confirm-btn">Package</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="metadata-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-metadata-dialog-heading">
-    <div class="title-dialog metadata-dialog">
-      <h3 id="mdzip-metadata-dialog-heading">Document Information</h3>
-      <dl data-ref="metadata-list"></dl>
-      <h4>Libraries</h4>
-      <dl data-ref="library-list"></dl>
-      <div class="title-dialog-actions">
-        <button type="button" class="save-title" data-action="close-metadata">Close</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="name-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-name-dialog-heading">
-    <div class="title-dialog">
-      <h3 id="mdzip-name-dialog-heading" data-ref="name-dialog-heading">New Markdown File</h3>
-      <input type="text" maxlength="260" data-ref="name-input" aria-label="File name" />
-      <p class="title-dialog-validation" data-ref="name-validation" hidden></p>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-name">Cancel</button>
-        <button type="button" class="save-title" data-ref="name-confirm-btn">Create</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="delete-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-delete-dialog-heading">
-    <div class="title-dialog">
-      <h3 id="mdzip-delete-dialog-heading">Delete File?</h3>
-      <p data-ref="delete-dialog-text"></p>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-delete">Cancel</button>
-        <button type="button" class="danger-action" data-ref="delete-confirm-btn">Delete</button>
-      </div>
-    </div>
-  </div>
-
-  <input type="file" data-ref="replace-input" hidden />
-
-  <div class="nav-context-menu" data-ref="nav-menu" hidden role="menu"></div>
-
-  <div class="mdzip-tooltip" data-ref="tooltip" role="tooltip" hidden></div>
-
-  <p class="mdzip-empty" data-ref="empty-state">No MDZip workspace loaded.</p>
-</section>
+const SHELL_HTML = `
+<section class="mdzip-root">
+  <div class="document-strip" data-ref="document-strip" hidden>
+    <button type="button" class="title-button" data-ref="title-btn"></button>
+    <button type="button" class="document-info-button" data-ref="document-info-btn"
+      title="Document information" aria-label="Document information">
+      ${INFO_ICON_HTML}
+    </button>
+  </div>
+
+  <header class="toolbar" data-ref="toolbar" hidden>
+    <div class="toolbar-start">
+      <div class="toolbar-left">
+        <button type="button" class="icon-toggle nav-toggle" data-ref="nav-btn" title="Toggle contents" aria-label="Toggle contents">
+          ${NAV_TOGGLE_ICON_HTML}
+        </button>
+      </div>
+
+      <div class="edit-toolbar" data-ref="edit-toolbar" role="toolbar" aria-label="Markdown formatting">
+        <div class="edit-toolbar-group">
+          <button type="button" data-format="bold" data-format-control="bold" title="Bold" aria-label="Bold">${BOLD_ICON_HTML}</button>
+          <button type="button" data-format="italic" data-format-control="italic" title="Italic" aria-label="Italic">${ITALIC_ICON_HTML}</button>
+          <button type="button" data-format="strike" data-format-control="strikethrough" title="Strikethrough" aria-label="Strikethrough">${STRIKE_ICON_HTML}</button>
+          <div class="format-menu" data-format-control="headings">
+            <button type="button" class="format-menu-toggle" data-format-menu-toggle
+              aria-label="Heading" aria-haspopup="menu" aria-expanded="false">
+              ${HEADING_ICON_HTML}${CHEVRON_ICON_HTML}
+            </button>
+            <div class="format-menu-popover" data-format-menu role="menu" aria-label="Heading level" hidden>
+              <button type="button" role="menuitem" data-format="paragraph">Paragraph</button>
+              <button type="button" role="menuitem" data-format="heading-1" data-heading-level="1"><strong>H1</strong> Heading 1</button>
+              <button type="button" role="menuitem" data-format="heading-2" data-heading-level="2"><strong>H2</strong> Heading 2</button>
+              <button type="button" role="menuitem" data-format="heading-3" data-heading-level="3"><strong>H3</strong> Heading 3</button>
+              <button type="button" role="menuitem" data-format="heading-4" data-heading-level="4"><strong>H4</strong> Heading 4</button>
+              <button type="button" role="menuitem" data-format="heading-5" data-heading-level="5"><strong>H5</strong> Heading 5</button>
+              <button type="button" role="menuitem" data-format="heading-6" data-heading-level="6"><strong>H6</strong> Heading 6</button>
+            </div>
+          </div>
+        </div>
+        <span class="edit-toolbar-divider" aria-hidden="true"></span>
+        <div class="edit-toolbar-group">
+          <button type="button" data-format="bullet-list" data-format-control="bulletList" title="Bulleted list" aria-label="Bulleted list">${BULLET_LIST_ICON_HTML}</button>
+          <button type="button" data-format="ordered-list" data-format-control="orderedList" title="Numbered list" aria-label="Numbered list">${ORDERED_LIST_ICON_HTML}</button>
+          <div class="format-menu" data-format-control="code">
+            <button type="button" class="format-menu-toggle" data-format-menu-toggle
+              aria-label="Code" aria-haspopup="menu" aria-expanded="false">
+              ${CODE_ICON_HTML}${CHEVRON_ICON_HTML}
+            </button>
+            <div class="format-menu-popover" data-format-menu role="menu" aria-label="Code format" hidden>
+              <button type="button" role="menuitem" data-format="code" data-code-kind="inline">Inline code</button>
+              <button type="button" role="menuitem" data-format="code-block" data-code-kind="block">Code block</button>
+            </div>
+          </div>
+          <button type="button" data-format="quote" data-format-control="blockquote" title="Blockquote" aria-label="Blockquote">${QUOTE_ICON_HTML}</button>
+          <button type="button" data-format="line-break" data-format-control="lineBreak" title="Line break" aria-label="Line break">${LINE_BREAK_ICON_HTML}</button>
+        </div>
+        <span class="edit-toolbar-divider" aria-hidden="true"></span>
+        <div class="edit-toolbar-group">
+          <button type="button" data-format="link" data-format-control="link" title="Link" aria-label="Link">${LINK_ICON_HTML}</button>
+          <button type="button" data-format="image" data-format-control="image" title="Image" aria-label="Image">${IMAGE_FORMAT_ICON_HTML}</button>
+          <input type="file" data-ref="image-input" accept="image/*" hidden />
+        </div>
+      </div>
+    </div>
+
+    <div class="toolbar-buttons view-mode-toggle-group" data-ref="layout-controls" role="group" aria-label="Editor layout">
+      <button type="button" class="icon-toggle view-mode-toggle" data-ref="source-btn" title="Edit" aria-label="Edit" aria-pressed="false">
+        <span class="commandbar-flex-container" data-ref="source-icon">${SOURCE_EDIT_ICON_HTML}</span>
+      </button>
+      <button type="button" class="icon-toggle view-mode-toggle" data-ref="split-btn" title="Split" aria-label="Split" aria-pressed="false">
+        <span class="commandbar-flex-container">
+          ${SPLIT_ICON_HTML}
+        </span>
+      </button>
+      <button type="button" class="icon-toggle view-mode-toggle" data-ref="preview-btn" title="View" aria-label="View" aria-pressed="false">
+        <span class="commandbar-flex-container">
+          ${PREVIEW_ICON_HTML}
+        </span>
+      </button>
+    </div>
+
+    <div class="toolbar-controls" data-ref="toolbar-controls">
+      <button type="button" class="icon-toggle" data-ref="search-btn" title="Find/replace (Mod-F)" aria-label="Find/replace">
+        ${SEARCH_ICON_HTML}
+      </button>
+      <button type="button" class="icon-toggle" data-ref="save-btn" title="Save" aria-label="Save">
+        ${SAVE_ICON_HTML}
+      </button>
+      <button type="button" class="icon-toggle zoom-toggle" data-ref="zoom-btn" title="Zoom controls" aria-label="Zoom controls">
+        ${ZOOM_ICON_HTML}
+      </button>
+      <div class="theme-toggle-group" data-ref="theme-controls" role="group" aria-label="Color scheme">
+        <button type="button" class="icon-toggle theme-toggle" data-ref="dark-theme-btn"
+          title="Dark mode" aria-label="Dark mode" aria-pressed="false">
+          ${DARK_THEME_ICON_HTML}
+        </button>
+        <button type="button" class="icon-toggle theme-toggle" data-ref="light-theme-btn"
+          title="Light mode" aria-label="Light mode" aria-pressed="false">
+          ${LIGHT_THEME_ICON_HTML}
+        </button>
+      </div>
+      <div class="zoom-popover" data-ref="zoom-popover" hidden role="group" aria-label="Zoom">
+        <span class="zoom-level" data-ref="zoom-level">100%</span>
+        <span class="zoom-stepper">
+          <button type="button" data-action="zoom-out" title="Zoom out" aria-label="Zoom out">-</button>
+          <button type="button" data-action="zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
+        </span>
+        <button type="button" class="zoom-reset" data-action="zoom-reset" title="Reset zoom">Reset</button>
+      </div>
+    </div>
+  </header>
+
+  <div class="workspace-shell" data-ref="workspace-shell" hidden>
+    <aside class="nav-pane" data-ref="nav-pane" aria-label="Package contents">
+      <div class="nav-tree" data-ref="nav-tree"></div>
+    </aside>
+    <div class="nav-resizer" data-ref="nav-resizer"
+      role="separator" aria-orientation="vertical" aria-label="Resize contents pane"></div>
+
+    <div class="pane-stack" data-ref="pane-stack">
+      <section class="pane edit-pane" data-ref="edit-pane">
+        <div class="editor-host" data-ref="editor-host"></div>
+      </section>
+      <div class="split-resizer" data-ref="split-resizer"
+        role="separator" aria-orientation="vertical" aria-label="Resize split panes"></div>
+      <section class="pane preview-pane" data-ref="preview-pane" tabindex="-1">
+        <article class="preview-content" data-ref="preview-content"></article>
+      </section>
+      <section class="pane entry-pane" data-ref="entry-pane"></section>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="title-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-title-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-title-dialog-heading">Set Document Title</h3>
+      <p>This is the package-level title stored in manifest.json.</p>
+      <input type="text" maxlength="120" data-ref="title-input" aria-label="Document title" />
+      <p class="title-dialog-validation" data-ref="title-validation" hidden>Title cannot be empty.</p>
+      <p>If unset, consumers may fall back to entry point, filename, or first heading.</p>
+      <div class="title-dialog-actions">
+        <button type="button" class="reset-title" data-ref="title-reset-btn">Reset</button>
+        <button type="button" data-action="cancel-title">Cancel</button>
+        <button type="button" class="save-title" data-ref="title-save-btn">Save</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="conversion-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-conversion-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-conversion-dialog-heading">Convert to MDZ?</h3>
+      <p>
+        Regular Markdown files contain only text. Convert this document to an
+        MDZ package to add images, package navigation, and document metadata.
+      </p>
+      <p>The next save will produce an .mdz file.</p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-conversion">Cancel</button>
+        <button type="button" class="save-title" data-ref="conversion-confirm-btn">Convert</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="image-insert-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-image-insert-dialog-heading">
+    <div class="title-dialog image-insert-dialog">
+      <h3 id="mdzip-image-insert-dialog-heading">Insert Image</h3>
+      <p>Choose the Markdown inserted for this image.</p>
+      <fieldset class="image-insert-options">
+        <legend>Output</legend>
+        <label>
+          <input type="radio" name="mdzip-image-insert-mode" value="markdown"
+            data-ref="image-insert-mode-markdown" checked />
+          Markdown image
+        </label>
+        <label>
+          <input type="radio" name="mdzip-image-insert-mode" value="html"
+            data-ref="image-insert-mode-html" />
+          HTML &lt;img&gt; with sizing
+        </label>
+      </fieldset>
+      <label class="image-insert-field">
+        <span>Alt text</span>
+        <input type="text" data-ref="image-insert-alt" />
+      </label>
+      <div class="image-insert-grid">
+        <label class="image-insert-field">
+          <span>Size by</span>
+          <select data-ref="image-insert-size-mode">
+            <option value="original">Original size</option>
+            <option value="width" selected>Width</option>
+            <option value="height">Height</option>
+            <option value="percent">Percent</option>
+          </select>
+        </label>
+        <label class="image-insert-field">
+          <span>Value</span>
+          <input type="number" min="1" step="1" data-ref="image-insert-size-value" />
+        </label>
+      </div>
+      <label class="image-insert-field">
+        <span>Position</span>
+        <select data-ref="image-insert-position">
+          <option value="inline">Inline/default</option>
+          <option value="left">Left</option>
+          <option value="center">Center</option>
+          <option value="right">Right</option>
+          <option value="wrap-left">Wrap left</option>
+          <option value="wrap-right">Wrap right</option>
+        </select>
+      </label>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-image-insert">Cancel</button>
+        <button type="button" class="save-title" data-ref="image-insert-confirm-btn">Insert</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="pack-files-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-pack-files-dialog-heading">
+    <div class="title-dialog pack-files-dialog">
+      <h3 id="mdzip-pack-files-dialog-heading">Package Markdown Files</h3>
+      <p>These files contain more than one Markdown document. Choose how to package them.</p>
+      <fieldset class="pack-files-options">
+        <legend>Mode</legend>
+        <label>
+          <input type="radio" name="mdzip-pack-files-mode" value="document"
+            data-ref="pack-files-mode-document" checked />
+          Document — one primary page; the rest are attached
+        </label>
+        <label>
+          <input type="radio" name="mdzip-pack-files-mode" value="project"
+            data-ref="pack-files-mode-project" />
+          Project — a set of related documents
+        </label>
+      </fieldset>
+      <label class="pack-files-field">
+        <span>Entry point</span>
+        <select data-ref="pack-files-entry"></select>
+      </label>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-pack-files">Cancel</button>
+        <button type="button" class="save-title" data-ref="pack-files-confirm-btn">Package</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="copy-render-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-copy-render-dialog-heading">
+    <div class="title-dialog copy-render-dialog">
+      <h3 id="mdzip-copy-render-dialog-heading" data-ref="copy-render-heading">Copying document...</h3>
+      <div data-ref="copy-render-progress-section">
+        <p data-ref="copy-render-progress-text">Rendering the full document...</p>
+        <div class="copy-render-progress-track">
+          <div class="copy-render-progress-bar" data-ref="copy-render-progress-bar"></div>
+        </div>
+      </div>
+      <p data-ref="copy-render-ready-text" hidden>
+        The document is ready. Browsers only allow a clipboard write right after a click, so this needs one more —
+        click Copy to finish.
+      </p>
+      <p data-ref="copy-render-done-text" hidden></p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-copy-render" data-ref="copy-render-cancel-btn">Cancel</button>
+        <button type="button" data-action="cancel-copy-ready" data-ref="copy-render-ready-cancel-btn" hidden>Cancel</button>
+        <button type="button" class="save-title" data-action="confirm-copy-ready" data-ref="copy-render-confirm-btn" hidden>Copy</button>
+        <button type="button" class="save-title" data-action="dismiss-copy-render" data-ref="copy-render-dismiss-btn" hidden>Dismiss</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="metadata-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-metadata-dialog-heading">
+    <div class="title-dialog metadata-dialog">
+      <h3 id="mdzip-metadata-dialog-heading">Document Information</h3>
+      <dl data-ref="metadata-list"></dl>
+      <h4>Libraries</h4>
+      <dl data-ref="library-list"></dl>
+      <div class="title-dialog-actions">
+        <button type="button" class="save-title" data-action="close-metadata">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="name-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-name-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-name-dialog-heading" data-ref="name-dialog-heading">New Markdown File</h3>
+      <input type="text" maxlength="260" data-ref="name-input" aria-label="File name" />
+      <p class="title-dialog-validation" data-ref="name-validation" hidden></p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-name">Cancel</button>
+        <button type="button" class="save-title" data-ref="name-confirm-btn">Create</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="delete-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-delete-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-delete-dialog-heading">Delete File?</h3>
+      <p data-ref="delete-dialog-text"></p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-delete">Cancel</button>
+        <button type="button" class="danger-action" data-ref="delete-confirm-btn">Delete</button>
+      </div>
+    </div>
+  </div>
+
+  <input type="file" data-ref="replace-input" hidden />
+
+  <div class="nav-context-menu" data-ref="nav-menu" hidden role="menu"></div>
+
+  <div class="mdzip-tooltip" data-ref="tooltip" role="tooltip" hidden></div>
+
+  <div class="mdzip-copy-toast" data-ref="copy-toast" role="status" aria-live="polite" hidden></div>
+
+  <p class="mdzip-empty" data-ref="empty-state">No MDZip workspace loaded.</p>
+</section>
 `;
 //# sourceMappingURL=view.js.map