@mdzip/editor 1.5.0 → 2.1.0

package/dist/view.js

@@ -5,11 +5,13 @@ import { closeSearchPanel, openSearchPanel, search, searchKeymap } from '@codemi
 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 { 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, Monitor, Moon, PackagePlus, PanelLeft, Pilcrow, Quote, Save, Scissors, Search, SpellCheck, SquareCode, SquarePen, Strikethrough, Sun, TextSelect, ZoomIn } from 'lucide';
+import { samePath } from '@mdzip/core-js';
 import { browserClipboardHasImage, readBrowserClipboardImage } from './browser.js';
 import { buildPackedArchiveBytes, isMarkdownArchivePath, resolveMarkdownEntryPoint } from './archive-utils.js';
 import { MdzipAssetSession, mdzipArchiveSourceId, sniffImageSize } from './asset-cache.js';
 import { MD_MARKDOWN_ICON } from './icons/md-markdown.js';
+import { PAGE_WIDTH_DEFAULT_ICON, PAGE_WIDTH_FULL_ICON, PAGE_WIDTH_NARROW_ICON, PAGE_WIDTH_WIDE_ICON } from './icons/page-width.js';
 import { MDZIP_RUNTIME_LIBRARIES } from './library-info.js';
 import { MdzipWorkspaceService, extensionForMime, normalizeArchivePath, relativeArchivePath } from './workspace.js';
 import { buildMdzipNavTree, canEditMdzipPath, escapeHtml, isOrphanedMdzipAsset, mdzipEntryIconKind, isMdzipManifestPath, isMdzipDefaultPolicyExternalLink, isMdzipExternalLink, isMdzipWorkspaceRelativeLink, parseMdzipLink, renderMdzipPreviewHtml } from './workspace-view.js';
@@ -52,6 +54,11 @@ const SEARCH_ICON_HTML = lucideIcon(Search, TOOLBAR_ICON_CLASS);
 const ZOOM_ICON_HTML = lucideIcon(ZoomIn, TOOLBAR_ICON_CLASS);
 const DARK_THEME_ICON_HTML = lucideIcon(Moon, TOOLBAR_ICON_CLASS);
 const LIGHT_THEME_ICON_HTML = lucideIcon(Sun, TOOLBAR_ICON_CLASS);
+const SYSTEM_THEME_ICON_HTML = lucideIcon(Monitor, TOOLBAR_ICON_CLASS);
+const PAGE_WIDTH_NARROW_ICON_HTML = lucideIcon(PAGE_WIDTH_NARROW_ICON, TOOLBAR_ICON_CLASS);
+const PAGE_WIDTH_DEFAULT_ICON_HTML = lucideIcon(PAGE_WIDTH_DEFAULT_ICON, TOOLBAR_ICON_CLASS);
+const PAGE_WIDTH_WIDE_ICON_HTML = lucideIcon(PAGE_WIDTH_WIDE_ICON, TOOLBAR_ICON_CLASS);
+const PAGE_WIDTH_FULL_ICON_HTML = lucideIcon(PAGE_WIDTH_FULL_ICON, TOOLBAR_ICON_CLASS);
 const FORMAT_ICON_CLASS = 'format-icon';
 const BOLD_ICON_HTML = lucideIcon(Bold, FORMAT_ICON_CLASS);
 const ITALIC_ICON_HTML = lucideIcon(Italic, FORMAT_ICON_CLASS);
@@ -151,7 +158,8 @@ function renderContextMenuItem(item) {
         ? `<span class="nav-menu-shortcut">${escapeHtml(item.shortcut)}</span>`
         : '';
     const disabledAttrs = item.disabled ? ' disabled aria-disabled="true"' : '';
-    return `<button type="button" role="menuitem" data-menu-action="${escapeHtml(item.action)}"${disabledAttrs}>${icon}${label}${shortcut}</button>`;
+    const tooltipAttr = item.tooltip ? ` data-tooltip="${escapeHtml(item.tooltip)}"` : '';
+    return `<button type="button" role="menuitem" data-menu-action="${escapeHtml(item.action)}"${disabledAttrs}${tooltipAttr}>${icon}${label}${shortcut}</button>`;
 }
 function renderContextMenuItems(items) {
     return items
@@ -163,11 +171,28 @@ const PREVIEW_MAX_WIDTH_ALIASES = {
     default: 900,
     wide: 1200,
 };
-function resolvePreviewMaxWidthPx(value) {
-    if (value === undefined)
+/** The CSS value for --mdzip-preview-content-max-width, or undefined for the built-in default. */
+function previewMaxWidthCss(value) {
+    if (value === undefined || value === 'default')
         return undefined;
-    return typeof value === 'number' ? value : PREVIEW_MAX_WIDTH_ALIASES[value];
+    if (typeof value === 'number')
+        return `${value}px`;
+    if (value === 'full')
+        return 'none';
+    return `calc(${PREVIEW_MAX_WIDTH_ALIASES[value]}px * var(--mdz-zoom, 1))`;
 }
+const PREVIEW_WIDTH_LABELS = {
+    narrow: 'Narrow',
+    default: 'Default',
+    wide: 'Wide',
+    full: 'Full Width'
+};
+const PREVIEW_WIDTH_ICONS_HTML = {
+    narrow: PAGE_WIDTH_NARROW_ICON_HTML,
+    default: PAGE_WIDTH_DEFAULT_ICON_HTML,
+    wide: PAGE_WIDTH_WIDE_ICON_HTML,
+    full: PAGE_WIDTH_FULL_ICON_HTML
+};
 const ALL_HEADINGS = [1, 2, 3, 4, 5, 6];
 const ALL_LAYOUT_CONTROLS = {
     source: true,
@@ -218,6 +243,7 @@ const CONTROL_PRESETS = {
         lineNumbers: false,
         save: false,
         zoom: false,
+        previewWidth: false,
         colorScheme: false,
         orphanActions: false,
         fileActions: false,
@@ -235,6 +261,7 @@ const CONTROL_PRESETS = {
         lineNumbers: true,
         save: false,
         zoom: true,
+        previewWidth: true,
         colorScheme: true,
         orphanActions: false,
         fileActions: false,
@@ -252,6 +279,7 @@ const CONTROL_PRESETS = {
         lineNumbers: true,
         save: true,
         zoom: true,
+        previewWidth: true,
         colorScheme: true,
         orphanActions: true,
         fileActions: true,
@@ -269,6 +297,7 @@ const CONTROL_PRESETS = {
         lineNumbers: true,
         save: false,
         zoom: true,
+        previewWidth: true,
         colorScheme: true,
         orphanActions: true,
         fileActions: true,
@@ -631,6 +660,44 @@ const noSpellcheckHighlight = ViewPlugin.fromClass(class {
 // 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';
+/** Holds an archive image's original `src` in the preview, whose `src` becomes a blob: URL. */
+const PREVIEW_IMAGE_SOURCE_ATTRIBUTE = 'data-mdzip-source';
+// Preview chrome the editor adds around rendered content: removed, or
+// unwrapped (children kept), when the selection is copied as HTML.
+const PREVIEW_CHROME_REMOVE_SELECTOR = [
+    '.mdzip-code-block-header',
+    '.mdzip-chunk-sentinel',
+    '[data-mdzip-image-edit-affordance]'
+].join(',');
+// Subtrees left out of a plain-text copy: the chrome above, plus markup whose
+// text isn't document text (a drawn diagram's SVG carries its stylesheet).
+const PLAIN_TEXT_SKIP_SELECTOR = `${PREVIEW_CHROME_REMOVE_SELECTOR},style,script,template,svg,button`;
+/**
+ * The text of rendered preview markup for a plain-text copy: the document's
+ * own text, without style or script contents, drawn diagrams or the editor's
+ * chrome. Walks the DOM (no clone), so it's cheap on a large live preview.
+ */
+function previewPlainText(root) {
+    const parts = [];
+    // NodeFilter: SHOW_ELEMENT | SHOW_TEXT; FILTER_ACCEPT 1, REJECT 2 (skips the subtree), SKIP 3.
+    const walker = root.ownerDocument.createTreeWalker(root, 0x1 | 0x4, {
+        acceptNode: (node) => node.nodeType === 1
+            ? (node.matches(PLAIN_TEXT_SKIP_SELECTOR) ? 2 : 3)
+            : 1
+    });
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+        parts.push(node.data);
+    }
+    return parts.join('');
+}
+const PLAIN_TEXT_TOOLTIP = 'Text only, for Notepad or a code editor';
+const FORMATTED_TEXT_TOOLTIP = 'Headings, styles and images, for Word, Google Docs or email';
+const PREVIEW_CHROME_UNWRAP_SELECTOR = [
+    '.mdzip-chunk',
+    '.mdzip-code-block',
+    '.mdzip-code-block-body',
+    '.mdzip-image-slot'
+].join(',');
 const imageEditAffordanceEffect = StateEffect.define();
 class ImageEditAffordanceWidget extends WidgetType {
     constructor(from, to) {
@@ -694,6 +761,14 @@ function injectStyles(doc) {
     style.textContent = WORKSPACE_CSS;
     (doc.head ?? doc.documentElement).appendChild(style);
 }
+/**
+ * Sets a control's tooltip after startup. prepareTooltips() turns `title` into
+ * `data-tooltip` only once, so a later `title` would show a stale tooltip.
+ */
+function setTooltip(element, text) {
+    element.dataset['tooltip'] = text;
+    element.removeAttribute('title');
+}
 function lucideIcon(icon, className) {
     const classAttr = className ? ` class="${escapeHtml(className)}"` : '';
     const children = icon
@@ -754,34 +829,34 @@ 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];
     const children = node.children
         .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>
+    const pending = options.pendingFolders.has(node.path);
+    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
@@ -796,7 +871,8 @@ function mergePendingFolders(nodes, pendingPaths) {
         let prefix = '';
         for (const segment of path.split('/').filter(Boolean)) {
             prefix = prefix ? `${prefix}/${segment}` : segment;
-            let dir = children.find((n) => !n.entry && n.path.toLowerCase() === prefix.toLowerCase());
+            // Folders that differ only in case are different folders (spec 1.2.0 §5.4.1).
+            let dir = children.find((n) => !n.entry && n.path === prefix);
             if (!dir) {
                 dir = { name: segment, path: prefix, children: [] };
                 children.push(dir);
@@ -857,6 +933,24 @@ export class MdzipWorkspaceView {
         this.navVisible = true;
         this.zoom = 1;
         this.zoomOpen = false;
+        this.themeMenuOpen = false;
+        this.widthMenuOpen = false;
+        /** Choice whose icon the page-width button shows, so render() only swaps it on change. */
+        this.widthMenuIconChoice = null;
+        /** Choice whose icon the theme menu button shows, so render() only swaps it on change. */
+        this.themeMenuIconPreference = null;
+        this.colorSchemePreference = 'system';
+        /** Re-resolves the scheme when the OS setting changes while 'system' is chosen. */
+        this.onSystemColorSchemeChange = () => {
+            if (this.colorSchemePreference !== 'system' || this.destroyed) {
+                return;
+            }
+            const next = this.resolveColorScheme('system');
+            if (next !== this.colorScheme) {
+                this.colorScheme = next;
+                this.render();
+            }
+        };
         this.titleDialogOpen = false;
         this.metadataDialogOpen = false;
         this.titleDraft = '';
@@ -1021,6 +1115,10 @@ export class MdzipWorkspaceView {
         // True while onPreviewRendered runs — see scrollToAnchor().
         this.firingPreviewRendered = false;
         this.destroyed = false;
+        /** Counts preview Ctrl+C copies, so a late image upgrade never overwrites a newer copy. */
+        this.previewCopyId = 0;
+        /** The preview Ctrl+A selection's boundaries; Ctrl+C copies the whole document while it's unchanged. */
+        this.previewSelectAll = null;
         // After an anchor scroll, content above the target can still change height
         // (images loading or easing open, a diagram rendering) and push it out of
         // view. This holds the target at the pane's top edge until the user
@@ -1049,6 +1147,8 @@ export class MdzipWorkspaceView {
         this.previewMemo = null;
         this.previewGeneration = 0;
         this.previewAbort = null;
+        /** Aborts an in-flight in-place re-theme (see rethemePreview). */
+        this.rethemeAbort = null;
         this.previewHandles = [];
         // Whether the latest preview generation has finished mounting and hydrating
         // its images; drives `whenRendered()` and gates the hydration callback.
@@ -1068,10 +1168,10 @@ export class MdzipWorkspaceView {
         this.contentDensity = options.contentDensity ?? 'comfortable';
         this.previewMaxWidth = options.previewMaxWidth;
         this.layout = options.initialLayout ?? defaultLayoutForPolicy(this.controlPolicy);
-        this.colorScheme = options.initialColorScheme
-            ?? (container.ownerDocument.defaultView?.matchMedia('(prefers-color-scheme: dark)').matches
-                ? 'dark'
-                : 'light');
+        this.systemColorSchemeQuery = container.ownerDocument.defaultView?.matchMedia?.('(prefers-color-scheme: dark)') ?? null;
+        this.systemColorSchemeQuery?.addEventListener?.('change', this.onSystemColorSchemeChange);
+        this.colorSchemePreference = options.initialColorScheme ?? 'system';
+        this.colorScheme = this.resolveColorScheme(this.colorSchemePreference);
         this.navVisible = options.navigationButtonActive ?? this.navVisible;
         this.markdownRenderer = options.markdownRenderer;
         this.markdownExtensions = options.markdownExtensions ?? [];
@@ -1099,8 +1199,16 @@ export class MdzipWorkspaceView {
         this.elSaveBtn = q('[data-ref="save-btn"]');
         this.elSearchBtn = q('[data-ref="search-btn"]');
         this.elZoomBtn = q('[data-ref="zoom-btn"]');
+        this.elWidthControls = q('[data-ref="width-controls"]');
+        this.elWidthMenuBtn = q('[data-ref="width-menu-btn"]');
+        this.elWidthMenuIcon = q('[data-ref="width-menu-icon"]');
+        this.elWidthPopover = q('[data-ref="width-popover"]');
         this.elThemeControls = q('[data-ref="theme-controls"]');
         this.elDarkThemeBtn = q('[data-ref="dark-theme-btn"]');
+        this.elThemeMenuBtn = q('[data-ref="theme-menu-btn"]');
+        this.elThemeMenuIcon = q('[data-ref="theme-menu-icon"]');
+        this.elThemePopover = q('[data-ref="theme-popover"]');
+        this.elSystemThemeBtn = q('[data-ref="system-theme-btn"]');
         this.elLightThemeBtn = q('[data-ref="light-theme-btn"]');
         this.elZoomPopover = q('[data-ref="zoom-popover"]');
         this.elZoomLevel = q('[data-ref="zoom-level"]');
@@ -1451,6 +1559,7 @@ export class MdzipWorkspaceView {
         this.cmEditor?.focus();
     }
     destroy() {
+        this.systemColorSchemeQuery?.removeEventListener?.('change', this.onSystemColorSchemeChange);
         this.conversionDocumentGeneration += 1;
         this.resolveImageInsertDialog(null);
         this.resolvePackFilesDialog(null);
@@ -1601,10 +1710,11 @@ export class MdzipWorkspaceView {
         this.applyDensityClasses();
     }
     /**
-     * Sets the preview reading-column width. Developer-facing only — there is
-     * no toolbar UI for this. Pass `undefined` to return to the built-in
-     * default (which scales with zoom); any other value is used exactly as
-     * given and does not scale with zoom (see {@link MdzipPreviewMaxWidth}).
+     * Sets the preview reading-column width, as the toolbar's page-width menu
+     * does: `'narrow'`, `'default'`, `'wide'` (all scale with zoom) or `'full'`.
+     * A number is an exact pixel width that doesn't scale with zoom, and leaves
+     * no menu item checked. `undefined` is `'default'` (see
+     * {@link MdzipPreviewMaxWidth}).
      */
     setPreviewMaxWidth(value) {
         if (value === this.previewMaxWidth) {
@@ -1691,6 +1801,8 @@ export class MdzipWorkspaceView {
     resetPreviewState() {
         this.previewAbort?.abort();
         this.previewAbort = null;
+        this.rethemeAbort?.abort();
+        this.rethemeAbort = null;
         this.previewGeneration += 1;
         this.destroyPreviewHandles();
         this.previewMemo = null;
@@ -1740,6 +1852,64 @@ export class MdzipWorkspaceView {
             && memo.text === snapshot.currentText
             && memo.colorScheme === this.colorScheme;
     }
+    /**
+     * True when only the color scheme changed since `memo`, and the preview can
+     * be kept: the default renderer (whose HTML doesn't depend on the scheme),
+     * every extension that transforms or mounts content can re-theme in place,
+     * and the current render has finished mounting (otherwise its chunks were
+     * rendered, or are still rendering, with the old scheme).
+     */
+    canRethemePreviewInPlace(memo, snapshot) {
+        return memo.colorScheme !== this.colorScheme
+            && memo.path === snapshot.currentPath
+            && memo.pathType === snapshot.currentPathType
+            && memo.text === snapshot.currentText
+            && this.renderingService.supportsChunking
+            && this.previewMountedGeneration === this.previewGeneration
+            && !this.chunkedRenderState?.mounting
+            && this.markdownExtensions.every((extension) => !!extension.updateColorScheme
+                || !(extension.transformMarkdown || extension.transformHtml || extension.mount));
+    }
+    /**
+     * Applies a scheme-only change without re-rendering: the root's theme class
+     * (set in render()) re-colors the DOM; chunks not mounted yet will render
+     * with the new scheme; cached chunk HTML (which may hold old-scheme diagram
+     * SVG) is dropped; and each extension re-themes its mounted output.
+     */
+    rethemePreview(snapshot, memo) {
+        memo.colorScheme = this.colorScheme;
+        if (this.chunkedRenderState) {
+            this.chunkedRenderState.context = { ...this.chunkedRenderState.context, colorScheme: this.colorScheme };
+        }
+        this.chunkHtmlCache = null;
+        if (snapshot.currentPathType !== 'markdown') {
+            return;
+        }
+        this.rethemeAbort?.abort();
+        const abort = new AbortController();
+        this.rethemeAbort = abort;
+        const context = this.createMarkdownContext(snapshot, abort.signal);
+        const generation = this.previewGeneration;
+        const report = (error) => {
+            if (generation === this.previewGeneration && !abort.signal.aborted) {
+                this.options.onFailed?.(error);
+            }
+        };
+        for (const extension of this.markdownExtensions) {
+            if (!extension.updateColorScheme) {
+                continue;
+            }
+            try {
+                const result = extension.updateColorScheme(this.elPreviewContent, context);
+                if (isThenable(result)) {
+                    void Promise.resolve(result).catch(report);
+                }
+            }
+            catch (error) {
+                report(error);
+            }
+        }
+    }
     updatePreview(snapshot, entryClaimed) {
         this.lastContentChangeTime = performance.now();
         // Captured before anything below can move it — see
@@ -1764,6 +1934,12 @@ export class MdzipWorkspaceView {
             // mounted extension handles.
             return;
         }
+        if (memo && this.canRethemePreviewInPlace(memo, snapshot)) {
+            // Only the color scheme changed: CSS re-colors the existing DOM, and
+            // extensions re-theme their own output, so nothing moves.
+            this.rethemePreview(snapshot, memo);
+            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
@@ -1787,6 +1963,8 @@ export class MdzipWorkspaceView {
         const priorChunkedState = reconcileEligible ? this.chunkedRenderState : null;
         this.previewAbort?.abort();
         this.previewAbort = null;
+        this.rethemeAbort?.abort();
+        this.rethemeAbort = null;
         if (!priorChunkedState) {
             this.destroyPreviewHandles();
         }
@@ -1958,6 +2136,8 @@ export class MdzipWorkspaceView {
                     }
                     continue;
                 }
+                // The src is replaced by a blob: URL; Copy as HTML restores it from here.
+                image.setAttribute(PREVIEW_IMAGE_SOURCE_ATTRIBUTE, source);
                 const known = this.assetSession.resolveKnownImage(source, context.currentPath);
                 if (known) {
                     if (known.width && known.height && !image.hasAttribute('width') && !image.hasAttribute('height')) {
@@ -2598,10 +2778,15 @@ export class MdzipWorkspaceView {
             // 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.
+            // The live context, not the one captured when this sentinel was armed:
+            // a color scheme change since then (rethemePreview) replaces it, and
+            // chunks mounted from here on must render with the new scheme.
+            let liveContext = context;
             if (this.chunkedRenderState?.generation === generation) {
                 this.chunkedRenderState.mounting = true;
+                liveContext = this.chunkedRenderState.context;
             }
-            void this.mountChunkBatch(records, nextCursor, context, generation, animateImageHydration, () => { })
+            void this.mountChunkBatch(records, nextCursor, liveContext, generation, animateImageHydration, () => { })
                 .then((newCursor) => {
                 // Record whatever this batch actually mounted regardless of
                 // whether a newer edit has since landed — recordChunkProgress's
@@ -2620,7 +2805,7 @@ export class MdzipWorkspaceView {
                     this.chunkedRenderState.mounting = false;
                 }
                 if (newCursor < records.length) {
-                    this.armChunkSentinel(records, newCursor, context, generation, animateImageHydration);
+                    this.armChunkSentinel(records, newCursor, liveContext, generation, animateImageHydration);
                 }
             });
         };
@@ -3300,6 +3485,13 @@ export class MdzipWorkspaceView {
         const showSaveControl = this.controlPolicy.save && snapshot.mode !== 'read-only';
         const showZoomControl = this.controlPolicy.zoom;
         const showColorSchemeControl = this.controlPolicy.colorScheme;
+        // Only the rendered Markdown preview has a reading column to size, so the
+        // menu is hidden in edit (source) layout and for images and other files.
+        const showWidthControl = this.controlPolicy.previewWidth && !entryClaimed
+            && snapshot.currentPathType === 'markdown' && this.layout !== 'source';
+        if (!showWidthControl) {
+            this.widthMenuOpen = false;
+        }
         const showSearchControl = this.controlPolicy.search
             && canShowSource && snapshot.currentPathType === 'markdown';
         const showEditControls = canEdit
@@ -3308,14 +3500,15 @@ export class MdzipWorkspaceView {
             && hasFormattingControls(this.controlPolicy.formatting);
         const showToolbar = this.controlPolicy.toolbar
             && (showNavigationControl || showLayoutControls || showSaveControl
-                || showZoomControl || showColorSchemeControl || showSearchControl || showEditControls);
+                || showZoomControl || showWidthControl || showColorSchemeControl || showSearchControl
+                || showEditControls);
         this.elDocumentStrip.hidden = !showTitleControl;
         this.elToolbar.hidden = !showToolbar;
         this.elToolbarLeft.hidden = !showNavigationControl;
         this.elEditToolbar.hidden = !showEditControls;
         this.elLayoutControls.hidden = !showLayoutControls;
         this.elToolbarControls.hidden = !showSaveControl && !showZoomControl
-            && !showColorSchemeControl && !showSearchControl;
+            && !showWidthControl && !showColorSchemeControl && !showSearchControl;
         this.elNavBtn.hidden = !showNavigationControl;
         this.elPreviewBtn.hidden = !this.controlPolicy.layout.preview;
         this.elSplitBtn.hidden = !this.controlPolicy.layout.split;
@@ -3323,16 +3516,17 @@ export class MdzipWorkspaceView {
         this.elSaveBtn.hidden = !showSaveControl;
         this.elSearchBtn.hidden = !showSearchControl;
         this.elZoomBtn.hidden = !showZoomControl;
+        this.elWidthControls.hidden = !showWidthControl;
         this.elThemeControls.hidden = !showColorSchemeControl;
         this.elRoot.style.setProperty('--mdz-zoom', String(this.zoom));
         this.elRoot.style.setProperty('--nav-pane-width', `${this.navPaneWidth}px`);
         this.elRoot.style.setProperty('--split-edit-ratio', String(this.splitRatio));
-        const previewMaxWidthPx = resolvePreviewMaxWidthPx(this.previewMaxWidth);
-        if (previewMaxWidthPx === undefined) {
+        const previewMaxWidth = previewMaxWidthCss(this.previewMaxWidth);
+        if (previewMaxWidth === undefined) {
             this.elRoot.style.removeProperty('--mdzip-preview-content-max-width');
         }
         else {
-            this.elRoot.style.setProperty('--mdzip-preview-content-max-width', `${previewMaxWidthPx}px`);
+            this.elRoot.style.setProperty('--mdzip-preview-content-max-width', previewMaxWidth);
         }
         this.elRoot.classList.toggle('resizing', this.resizing);
         this.elRoot.classList.toggle('mdzip-theme-dark', this.colorScheme === 'dark');
@@ -3392,10 +3586,41 @@ export class MdzipWorkspaceView {
             this.elNavBtn.setAttribute('aria-pressed', String(this.navVisible));
         }
         this.elZoomBtn.classList.toggle('active', this.zoomOpen);
-        this.elDarkThemeBtn.classList.toggle('active', this.colorScheme === 'dark');
-        this.elLightThemeBtn.classList.toggle('active', this.colorScheme === 'light');
-        this.elDarkThemeBtn.setAttribute('aria-pressed', String(this.colorScheme === 'dark'));
-        this.elLightThemeBtn.setAttribute('aria-pressed', String(this.colorScheme === 'light'));
+        for (const [button, preference] of this.themeMenuItems()) {
+            button.classList.toggle('active', this.colorSchemePreference === preference);
+            button.setAttribute('aria-checked', String(this.colorSchemePreference === preference));
+        }
+        if (this.themeMenuIconPreference !== this.colorSchemePreference) {
+            this.themeMenuIconPreference = this.colorSchemePreference;
+            this.elThemeMenuIcon.innerHTML = this.colorSchemePreference === 'system'
+                ? SYSTEM_THEME_ICON_HTML
+                : this.colorSchemePreference === 'dark' ? DARK_THEME_ICON_HTML : LIGHT_THEME_ICON_HTML;
+        }
+        const schemeLabel = this.colorSchemePreference === 'system'
+            ? `System (${this.colorScheme})`
+            : this.colorSchemePreference === 'dark' ? 'Dark' : 'Light';
+        setTooltip(this.elThemeMenuBtn, `Color scheme: ${schemeLabel}`);
+        this.elThemeMenuBtn.setAttribute('aria-label', `Color scheme: ${schemeLabel}`);
+        this.elThemeMenuBtn.classList.toggle('active', this.themeMenuOpen);
+        this.elThemeMenuBtn.setAttribute('aria-expanded', String(this.themeMenuOpen));
+        this.elThemePopover.hidden = !this.themeMenuOpen;
+        const widthChoice = this.previewWidthChoice();
+        for (const [button, choice] of this.widthMenuItems()) {
+            button.classList.toggle('active', widthChoice === choice);
+            button.setAttribute('aria-checked', String(widthChoice === choice));
+        }
+        // A custom pixel width (set by the host) shows the default icon, with no item checked.
+        const widthIconChoice = widthChoice ?? 'default';
+        if (this.widthMenuIconChoice !== widthIconChoice) {
+            this.widthMenuIconChoice = widthIconChoice;
+            this.elWidthMenuIcon.innerHTML = PREVIEW_WIDTH_ICONS_HTML[widthIconChoice];
+        }
+        // Measuring the pane forces layout, so only while the menu is open; hover
+        // and focus on the button refresh the labels too.
+        this.updateWidthLabels(this.widthMenuOpen);
+        this.elWidthMenuBtn.classList.toggle('active', this.widthMenuOpen);
+        this.elWidthMenuBtn.setAttribute('aria-expanded', String(this.widthMenuOpen));
+        this.elWidthPopover.hidden = !this.widthMenuOpen;
         this.elZoomPopover.hidden = !this.zoomOpen;
         this.elZoomLevel.textContent = `${Math.round(this.zoom * 100)}%`;
         const showNavigationPane = this.controlPolicy.navigation
@@ -3415,7 +3640,7 @@ export class MdzipWorkspaceView {
             allowOrphanActions,
             allowFileActions,
             allowDrag: snapshot.mode !== 'read-only' && snapshot.sourceFormat === 'mdz',
-            pendingFolders: new Set([...this.pendingNewFolders].map((path) => path.toLowerCase()))
+            pendingFolders: new Set(this.pendingNewFolders)
         };
         this.elNavTree.innerHTML = navTree
             .map((n, i) => renderNavNode(n, snapshot, navRenderOptions, [], i === navTree.length - 1, 0))
@@ -3552,9 +3777,9 @@ export class MdzipWorkspaceView {
             this.pendingNewFolders.clear();
             return;
         }
-        const lowerPaths = snapshot.content.paths.map((entry) => entry.path.toLowerCase());
+        const paths = snapshot.content.paths.map((entry) => entry.path);
         for (const folder of [...this.pendingNewFolders]) {
-            if (lowerPaths.some((path) => path.startsWith(`${folder.toLowerCase()}/`))) {
+            if (paths.some((path) => path.startsWith(`${folder}/`))) {
                 this.pendingNewFolders.delete(folder);
             }
         }
@@ -3563,8 +3788,10 @@ export class MdzipWorkspaceView {
         const doc = this.elRoot.ownerDocument;
         doc.addEventListener('click', () => {
             this.closeFormatMenus();
-            if (this.zoomOpen || this.contextMenuState) {
+            if (this.zoomOpen || this.themeMenuOpen || this.widthMenuOpen || this.contextMenuState) {
                 this.zoomOpen = false;
+                this.themeMenuOpen = false;
+                this.widthMenuOpen = false;
                 this.contextMenuState = null;
                 this.render();
             }
@@ -3573,6 +3800,12 @@ export class MdzipWorkspaceView {
             if (e.key !== 'Escape') {
                 return;
             }
+            if (this.themeMenuOpen) {
+                this.closeThemeMenu(true);
+            }
+            if (this.widthMenuOpen) {
+                this.closeWidthMenu(true);
+            }
             if (this.contextMenuState || this.deleteDialogState || this.nameDialogState) {
                 this.contextMenuState = null;
                 this.deleteDialogState = null;
@@ -3581,11 +3814,12 @@ export class MdzipWorkspaceView {
             }
         });
         // Ctrl/Cmd+A normally selects the whole page, which in split layout grabs
-        // 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.
+        // both panes' text at once. With focus inside the preview pane (see the
+        // mousedown handler below for how it gets there) it selects just the
+        // rendered content; the source editor keeps its own defaultKeymap binding
+        // since CodeMirror's content root sits outside this element. The
+        // selection is remembered so the copy handler can copy the whole
+        // document, including chunks not mounted yet, while it's unchanged.
         doc.addEventListener('keydown', (e) => {
             if (e.key.toLowerCase() !== 'a' || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) {
                 return;
@@ -3594,7 +3828,7 @@ export class MdzipWorkspaceView {
                 return;
             }
             e.preventDefault();
-            void this.copyAllPreviewContent();
+            this.selectAllPreview();
         });
         this.elNavBtn.addEventListener('click', () => {
             if (!this.controlPolicy.navigation) {
@@ -3661,6 +3895,8 @@ export class MdzipWorkspaceView {
             }
             e.stopPropagation();
             this.zoomOpen = !this.zoomOpen;
+            this.themeMenuOpen = false;
+            this.widthMenuOpen = false;
             this.render();
         });
         this.elZoomPopover.addEventListener('click', (e) => e.stopPropagation());
@@ -3670,8 +3906,47 @@ export class MdzipWorkspaceView {
             .addEventListener('click', () => this.setZoom(this.zoom + 0.1));
         this.elZoomPopover.querySelector('[data-action="zoom-reset"]')
             .addEventListener('click', () => this.setZoom(1));
-        this.elDarkThemeBtn.addEventListener('click', () => this.setColorSchemeFromToolbar('dark'));
-        this.elLightThemeBtn.addEventListener('click', () => this.setColorSchemeFromToolbar('light'));
+        this.elThemeMenuBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.themeMenuOpen = !this.themeMenuOpen;
+            this.zoomOpen = false;
+            this.widthMenuOpen = false;
+            this.render();
+            // Keyboard activation (Enter/Space reports detail 0) moves focus into the
+            // menu; a mouse click doesn't, so no focus tooltip covers the icons.
+            if (this.themeMenuOpen && e.detail === 0) {
+                this.themeMenuItems().find(([, preference]) => preference === this.colorSchemePreference)?.[0].focus();
+            }
+        });
+        this.elThemePopover.addEventListener('click', (e) => e.stopPropagation());
+        this.elThemePopover.addEventListener('keydown', (e) => {
+            this.moveMenuFocus(e, this.themeMenuItems().map(([button]) => button));
+        });
+        for (const [button, preference] of this.themeMenuItems()) {
+            button.addEventListener('click', () => this.chooseColorSchemeFromMenu(preference));
+        }
+        this.elWidthMenuBtn.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.widthMenuOpen = !this.widthMenuOpen;
+            this.zoomOpen = false;
+            this.themeMenuOpen = false;
+            this.render();
+            // As with the theme menu, only keyboard activation moves focus inside.
+            if (this.widthMenuOpen && e.detail === 0) {
+                const items = this.widthMenuItems();
+                const choice = this.previewWidthChoice() ?? 'default';
+                (items.find(([, item]) => item === choice) ?? items[0])[0].focus();
+            }
+        });
+        this.elWidthMenuBtn.addEventListener('pointerenter', () => this.updateWidthLabels(true));
+        this.elWidthMenuBtn.addEventListener('focus', () => this.updateWidthLabels(true));
+        this.elWidthPopover.addEventListener('click', (e) => e.stopPropagation());
+        this.elWidthPopover.addEventListener('keydown', (e) => {
+            this.moveMenuFocus(e, this.widthMenuItems().map(([button]) => button));
+        });
+        for (const [button, choice] of this.widthMenuItems()) {
+            button.addEventListener('click', () => this.choosePreviewWidthFromMenu(choice));
+        }
         this.elEditToolbar.addEventListener('click', (event) => {
             const menuToggle = event.target
                 .closest('[data-format-menu-toggle]');
@@ -3973,6 +4248,41 @@ export class MdzipWorkspaceView {
             e.stopPropagation();
             this.render();
         });
+        // Ctrl+C on a preview selection copies Formatted Text, like the menu item:
+        // clean markup and plain text now (the copy event is synchronous), then,
+        // when the selection has images, the same copy again with them embedded,
+        // since the preview's own blob: URLs only resolve inside this view.
+        doc.addEventListener('copy', (e) => {
+            const selection = doc.defaultView?.getSelection();
+            if (this.destroyed || !e.clipboardData || !selection || selection.isCollapsed || selection.rangeCount === 0
+                || !this.elPreviewContent.contains(selection.anchorNode)
+                || this.workspace?.snapshot().currentPathType !== 'markdown') {
+                return;
+            }
+            const range = selection.getRangeAt(0);
+            const all = this.previewSelectAll;
+            if (all && range.startContainer === all.start && range.startOffset === all.startOffset
+                && range.endContainer === all.end && range.endOffset === all.endOffset) {
+                // Ctrl+A, Ctrl+C: the whole document as Formatted Text, like Copy All >
+                // Formatted Text, so chunks not mounted yet are copied too. Nothing
+                // goes on the clipboard synchronously: the mounted part alone would
+                // be a silently partial copy.
+                e.preventDefault();
+                void this.copyAllWithImagesPreviewContent();
+                return;
+            }
+            const { text, html } = this.previewSelectionContent(range);
+            if (!html) {
+                return;
+            }
+            e.preventDefault();
+            e.clipboardData.setData('text/plain', text);
+            e.clipboardData.setData('text/html', html);
+            const copyId = (this.previewCopyId += 1);
+            if (this.assetSession && /<img\b/i.test(html)) {
+                void this.upgradePreviewCopyImages(copyId, html, text);
+            }
+        });
         this.elPreviewPane.addEventListener('contextmenu', (e) => {
             if (!this.controlPolicy.contextMenu.preview) {
                 return;
@@ -3981,11 +4291,12 @@ export class MdzipWorkspaceView {
             // button collapses the browser selection before the action runs (same
             // reason the editor menu captures its CodeMirror range up front).
             const domSelection = this.elPreviewPane.ownerDocument.defaultView?.getSelection();
-            const text = domSelection && !domSelection.isCollapsed
-                && this.elPreviewContent.contains(domSelection.anchorNode)
-                ? domSelection.toString()
-                : '';
-            this.contextMenuState = { kind: 'preview', text, x: e.clientX, y: e.clientY };
+            const selected = domSelection && !domSelection.isCollapsed
+                && this.elPreviewContent.contains(domSelection.anchorNode);
+            const { text, html } = selected && domSelection.rangeCount > 0
+                ? this.previewSelectionContent(domSelection.getRangeAt(0))
+                : { text: '', html: '' };
+            this.contextMenuState = { kind: 'preview', text, html, x: e.clientX, y: e.clientY };
             if (this.previewMenuItems().length === 0) {
                 this.contextMenuState = null;
                 return;
@@ -4117,7 +4428,7 @@ export class MdzipWorkspaceView {
     async openPathAndScrollToAnchor(path, fragment) {
         const generationBefore = this.previewGeneration;
         this.pendingAnchorFragment = fragment || null;
-        await this.openPath(path);
+        await this.openPathOnly(path);
         // No new render started (already on that document, or the open failed):
         // nothing will call firePreviewRendered, so apply the anchor now.
         if (this.pendingAnchorFragment !== null && this.previewGeneration === generationBefore) {
@@ -4290,6 +4601,10 @@ export class MdzipWorkspaceView {
         if (collectMdzipHeadingIds(record.tokens).some((id) => id.toLowerCase() === lower)) {
             return true;
         }
+        // The footnotes section (#58) renders footnote-<label> targets.
+        if (lower.startsWith('footnote-') && record.tokens.some((token) => token.type === 'footnotes')) {
+            return true;
+        }
         // An explicit <a id="x"> / <a name="x"> anchor written in the source.
         const escaped = fragment.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
         return new RegExp(`(?:id|name)\\s*=\\s*["']${escaped}["']`, 'i').test(record.key);
@@ -4359,9 +4674,53 @@ export class MdzipWorkspaceView {
         this.anchorPin?.disconnect();
         this.anchorPin = null;
     }
-    async openPath(path) {
+    /**
+     * Opens another file of the current workspace, as clicking it in the file
+     * tree does, optionally landing on a heading or anchor in it (#53). Paths
+     * match the archive exactly (case-sensitive after NFC normalization).
+     *
+     * Resolves `true` once the file is shown and, when `anchor` is given, the
+     * preview has scrolled to it — with the same pinning as {@link scrollToAnchor}
+     * while images above it load. Resolves `false` for a path that isn't in the
+     * workspace (the current file stays open) or an anchor that isn't found
+     * (the file stays open at its top).
+     */
+    async openPath(path, options = {}) {
+        if (!(await this.openPathOnly(path))) {
+            return false;
+        }
+        return options.anchor === undefined ? true : this.scrollToAnchor(options.anchor);
+    }
+    /**
+     * Changes the file name shown in the title bar and used to save, without
+     * reopening the workspace or changing the selected file, e.g. after Save As
+     * (#51). Returns false, changing nothing, when no workspace is open or the
+     * new name implies a different format (`.md` vs `.mdz`): that needs a reopen.
+     */
+    setFileName(fileName) {
+        const snapshot = this.workspace?.snapshot();
+        if (!this.workspace || !snapshot) {
+            return false;
+        }
+        const lower = fileName.toLowerCase();
+        const impliedFormat = /\.(?:md|markdown|mdown|mkd)$/.test(lower)
+            ? 'markdown'
+            : lower.endsWith('.mdz') ? 'mdz' : snapshot.sourceFormat;
+        if (impliedFormat !== snapshot.sourceFormat) {
+            return false;
+        }
+        if (this.workspace.setFileName(fileName)) {
+            this.render();
+        }
+        return true;
+    }
+    /** The archive path of the file currently shown, or null before a workspace opens. */
+    getCurrentPath() {
+        return this.workspace?.snapshot().currentPath ?? null;
+    }
+    async openPathOnly(path) {
         if (!this.workspace) {
-            return;
+            return false;
         }
         try {
             const opened = await this.workspace.openPath(path);
@@ -4369,9 +4728,11 @@ export class MdzipWorkspaceView {
                 this.layout = this.validLayoutForSnapshot(this.layout, this.workspace.snapshot());
                 this.render();
             }
+            return opened;
         }
         catch (error) {
             this.options.onFailed?.(error);
+            return false;
         }
     }
     handleTooltipPointer(event) {
@@ -4403,9 +4764,16 @@ export class MdzipWorkspaceView {
     }
     showTooltipForElementNow(element) {
         const rect = element.getBoundingClientRect();
-        this.showTooltip(element.dataset['tooltip'] ?? '', rect.left + rect.width / 2, rect.top);
+        // A menu item's tip goes beside it, so it doesn't cover the items above.
+        const placement = element.closest('.nav-context-menu') ? 'side' : 'above';
+        this.showTooltip(element.dataset['tooltip'] ?? '', rect.left + rect.width / 2, rect.top, placement, rect);
     }
-    showTooltip(text, anchorX, anchorY) {
+    /**
+     * Shows the tooltip centered above (anchorX, anchorY), or, with `side`
+     * placement, beside `anchorRect` (to its right, or its left when there's no
+     * room), vertically centered on it.
+     */
+    showTooltip(text, anchorX, anchorY, placement = 'above', anchorRect) {
         if (!text) {
             this.hideTooltip();
             return;
@@ -4418,9 +4786,23 @@ export class MdzipWorkspaceView {
         const offset = 8;
         this.elTooltip.textContent = text;
         this.elTooltip.hidden = false;
+        // Measured at the origin, so its previous position doesn't make it wrap early.
+        this.elTooltip.style.left = '0px';
+        this.elTooltip.style.top = '0px';
         const rect = this.elTooltip.getBoundingClientRect();
-        const x = Math.max(viewportPadding, Math.min(anchorX - rect.width / 2, window.innerWidth - rect.width - viewportPadding));
-        const y = Math.max(viewportPadding, anchorY - rect.height - offset);
+        let x;
+        let y;
+        if (placement === 'side' && anchorRect) {
+            const right = anchorRect.right + offset;
+            x = right + rect.width <= window.innerWidth - viewportPadding
+                ? right
+                : Math.max(viewportPadding, anchorRect.left - offset - rect.width);
+            y = Math.max(viewportPadding, Math.min(anchorRect.top + (anchorRect.height - rect.height) / 2, window.innerHeight - rect.height - viewportPadding));
+        }
+        else {
+            x = Math.max(viewportPadding, Math.min(anchorX - rect.width / 2, window.innerWidth - rect.width - viewportPadding));
+            y = Math.max(viewportPadding, anchorY - rect.height - offset);
+        }
         this.tooltipState = { text, x, y };
         this.elTooltip.style.left = `${Math.round(x)}px`;
         this.elTooltip.style.top = `${Math.round(y)}px`;
@@ -5222,21 +5604,43 @@ export class MdzipWorkspaceView {
             return [];
         }
         const items = [];
-        if (state.text) {
-            items.push({ action: 'preview-copy', label: 'Copy', icon: MENU_COPY_ICON_HTML, shortcut: this.editorShortcut('C') });
-            items.push(null);
-        }
-        items.push({
-            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
-        });
+        const markdown = this.workspace?.snapshot().currentPathType === 'markdown';
+        // Copy: the selection, in the same formats as Copy All below (no
+        // Markdown: see there). A selection of only an image has no text, but
+        // still has markup.
+        const copy = [];
+        if (state.text.trim()) {
+            copy.push({ action: 'preview-copy', label: 'Plain Text', tooltip: PLAIN_TEXT_TOOLTIP });
+        }
+        if (markdown && state.html) {
+            copy.push({
+                action: 'preview-copy-selection-formatted',
+                label: 'Formatted Text',
+                shortcut: this.editorShortcut('C'),
+                tooltip: FORMATTED_TEXT_TOOLTIP
+            }, { action: 'preview-copy-selection-html', label: 'HTML', tooltip: "The selection's HTML markup, as text" });
+        }
+        if (copy.length > 0) {
+            items.push({ action: 'preview-copy-menu', label: 'Copy', icon: MENU_COPY_ICON_HTML, submenu: copy }, null);
+        }
+        // Copy All: the whole document, in the format each item names. Markdown
+        // and HTML are source copies (#56); the preview can't map a selection
+        // back to exact Markdown (the source pane's own Copy does that).
+        const copyAll = [
+            { action: 'preview-copy-all', label: 'Plain Text', tooltip: PLAIN_TEXT_TOOLTIP },
+            {
+                action: 'preview-copy-all-images',
+                label: 'Formatted Text',
+                shortcut: `${this.editorShortcut('A')}, ${this.editorShortcut('C')}`,
+                tooltip: FORMATTED_TEXT_TOOLTIP
+            }
+        ];
+        if (markdown) {
+            copyAll.push({ action: 'preview-copy-markdown', label: 'Markdown', tooltip: "The document's Markdown source" }, { action: 'preview-copy-html', label: 'HTML', tooltip: "The document's HTML markup, as text" });
+        }
+        items.push({ action: 'preview-copy-all-menu', label: 'Copy All', icon: MENU_COPY_ICON_HTML, submenu: copyAll });
+        // Same item and group as the source editor's menu.
+        items.push(null, { action: 'preview-select-all', label: 'Select All', icon: MENU_SELECT_ALL_ICON_HTML, shortcut: this.editorShortcut('A') });
         return items;
     }
     handlePreviewMenuAction(action) {
@@ -5253,6 +5657,27 @@ export class MdzipWorkspaceView {
             case 'preview-copy-all-images':
                 void this.copyAllWithImagesPreviewContent();
                 break;
+            case 'preview-copy-html':
+                void this.copyHtmlPreviewContent();
+                break;
+            case 'preview-copy-markdown': {
+                const markdown = this.workspace?.snapshot().currentText ?? '';
+                void this.writeClipboardText(markdown, 'Markdown copied to clipboard')
+                    .then((outcome) => this.finishCopyNotification(false, outcome));
+                break;
+            }
+            case 'preview-select-all':
+                this.elPreviewPane.focus({ preventScroll: true });
+                this.selectAllPreview();
+                break;
+            case 'preview-copy-selection-formatted':
+                void this.copyPreviewSelectionFormatted(state.html, state.text)
+                    .then((outcome) => this.finishCopyNotification(false, outcome));
+                break;
+            case 'preview-copy-selection-html':
+                void this.writeClipboardText(state.html, 'HTML copied to clipboard as text')
+                    .then((outcome) => this.finishCopyNotification(false, outcome));
+                break;
             case 'preview-copy':
                 // Partial Copy never shows the render dialog (there's nothing to
                 // drain), so its confirmation is always the brief toast.
@@ -5331,19 +5756,198 @@ export class MdzipWorkspaceView {
         }
     }
     /** 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) {
+    copyPreviewSelection(text) {
+        return this.writeClipboardText(text, 'Plain text copied to clipboard');
+    }
+    /**
+     * A preview selection as the Copy items copy it. `html`: the selected
+     * markup inside its enclosing elements (so part of a list item is still
+     * `<ul><li>…`), without the editor's own chrome (code-block headers, image
+     * slots and edit buttons, chunk wrappers) and with archive images' `src`
+     * back to their archive paths instead of blob: URLs. `text`: its plain
+     * text, cleaned the same way as Copy All's (see previewPlainText).
+     */
+    previewSelectionContent(range) {
+        const doc = this.elPreviewContent.ownerDocument;
+        let content = range.cloneContents();
+        let ancestor = range.commonAncestorContainer;
+        if (ancestor.nodeType !== 1) {
+            ancestor = ancestor.parentNode;
+        }
+        while (ancestor && ancestor.nodeType === 1 && ancestor !== this.elPreviewContent
+            && this.elPreviewContent.contains(ancestor)) {
+            const wrapper = ancestor.cloneNode(false);
+            wrapper.appendChild(content);
+            content = wrapper;
+            ancestor = ancestor.parentNode;
+        }
+        const container = doc.createElement('div');
+        container.appendChild(content);
+        const text = previewPlainText(container);
+        for (const element of Array.from(container.querySelectorAll(PREVIEW_CHROME_REMOVE_SELECTOR))) {
+            element.remove();
+        }
+        for (const element of Array.from(container.querySelectorAll(PREVIEW_CHROME_UNWRAP_SELECTOR))) {
+            element.replaceWith(...Array.from(element.childNodes));
+        }
+        for (const image of Array.from(container.querySelectorAll('img'))) {
+            const source = image.getAttribute(PREVIEW_IMAGE_SOURCE_ATTRIBUTE);
+            if (source !== null) {
+                image.setAttribute('src', source);
+                image.removeAttribute(PREVIEW_IMAGE_SOURCE_ATTRIBUTE);
+            }
+            for (const name of Array.from(image.classList)) {
+                if (name === 'mdzip-image-loading') {
+                    image.classList.remove(name);
+                }
+            }
+            if (!image.classList.length) {
+                image.removeAttribute('class');
+            }
+        }
+        return { text, html: container.innerHTML.trim() };
+    }
+    /**
+     * Selects all of the rendered document (Ctrl+A and the menu's Select All),
+     * remembering the selection so Ctrl+C copies the whole document while it's
+     * unchanged (see the copy handler).
+     */
+    selectAllPreview() {
+        const doc = this.elPreviewContent.ownerDocument;
+        const selection = doc.defaultView?.getSelection();
+        if (!selection) {
+            return;
+        }
+        const range = doc.createRange();
+        range.selectNodeContents(this.elPreviewContent);
+        selection.removeAllRanges();
+        selection.addRange(range);
+        this.previewSelectAll = {
+            start: range.startContainer, startOffset: range.startOffset,
+            end: range.endContainer, endOffset: range.endOffset
+        };
+    }
+    /**
+     * Re-copies a Ctrl+C selection with its images embedded. Best effort: the
+     * synchronous copy already on the clipboard stays if this fails, and it's
+     * skipped if another copy happened meanwhile.
+     */
+    async upgradePreviewCopyImages(copyId, html, text) {
+        const snapshot = this.workspace?.snapshot();
+        const clipboard = this.editorClipboard();
+        const ClipboardItemCtor = this.elPreviewContent.ownerDocument.defaultView?.ClipboardItem;
+        if (!this.assetSession || !snapshot || !clipboard || !ClipboardItemCtor || !('write' in clipboard)) {
+            return;
+        }
+        try {
+            const embedded = await this.assetSession.rewriteHtmlEmbeddingImages(html, snapshot.currentPath, new AbortController().signal);
+            if (copyId !== this.previewCopyId || this.destroyed) {
+                return;
+            }
+            await clipboard.write([new ClipboardItemCtor({
+                    'text/html': new Blob([embedded], { type: 'text/html' }),
+                    'text/plain': new Blob([text], { type: 'text/plain' })
+                })]);
+        }
+        catch {
+            // The plain copy is already on the clipboard.
+        }
+    }
+    /**
+     * Copies a preview selection as formatted text (Copy > Formatted Text, and
+     * Ctrl+C's image upgrade): its HTML with archive images embedded as data:
+     * URLs, so they survive pasting into Word or email, plus its plain text.
+     */
+    async copyPreviewSelectionFormatted(html, text) {
+        const snapshot = this.workspace?.snapshot();
+        let imageCount = 0;
+        let embedded = html;
+        if (this.assetSession && snapshot && /<img\b/i.test(html)) {
+            try {
+                embedded = await this.assetSession.rewriteHtmlEmbeddingImages(html, snapshot.currentPath, new AbortController().signal, (_done, total) => { imageCount = total; });
+            }
+            catch (error) {
+                this.options.onFailed?.(error);
+            }
+        }
+        return this.writeRichClipboard(embedded, text, imageCount);
+    }
+    /** `writeText` with the same timeout and outcome reporting as {@link copyPreviewSelection}; `message` is the success confirmation. */
+    async writeClipboardText(text, message) {
         if (!text) {
             return null;
         }
         try {
             await this.withTimeout(Promise.resolve(this.editorClipboard()?.writeText(text)), this.clipboardFallbackWriteTimeoutMs, 'Clipboard write timed out.');
-            return { message: 'Plain text copied to clipboard' };
+            return { message };
         }
         catch (error) {
             this.options.onFailed?.(error);
             return { error: error instanceof Error ? error.message : String(error) };
         }
     }
+    /**
+     * Copies the whole document's rendered HTML markup as plain text (#56), so
+     * any paste target, Notepad included, gets the raw `<h1>…</h1><p>…</p>`.
+     * Rendered fresh like Copy All with Images, not read from the live preview
+     * (which holds hydrated `blob:` image URLs, lazy-mount sentinels and
+     * code-block chrome): images keep their archive-relative `src`, and
+     * extension `mount()` output (e.g. mermaid diagrams) copies as its
+     * pre-render markup. Large documents get the same cancelable progress
+     * dialog and "ready to copy" step. A host's custom (non-chunking) renderer
+     * renders the document in one pass instead.
+     */
+    async copyHtmlPreviewContent() {
+        const snapshot = this.workspace?.snapshot();
+        if (!snapshot || snapshot.currentPathType !== 'markdown') {
+            return;
+        }
+        const message = 'HTML copied to clipboard as text';
+        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);
+        let html;
+        try {
+            const context = this.createMarkdownContext(snapshot, abort.signal);
+            if (this.renderingService.supportsChunking) {
+                const cacheGeneration = this.previewMemoMatchesSnapshot(snapshot) ? this.previewGeneration : null;
+                html = await this.renderFullDocumentHtml(snapshot, context, abort.signal, cacheGeneration, (done, total) => {
+                    if (!dialogShown)
+                        return;
+                    this.copyRenderDialogState = { done, total, label: 'Rendering the document', abort };
+                    this.updateCopyRenderDialogProgress();
+                });
+            }
+            else {
+                html = await this.renderingService.renderMarkdown(snapshot.currentText, context);
+            }
+        }
+        catch (error) {
+            clearTimeout(showDialogTimer);
+            if (error?.name === 'AbortError') {
+                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);
+        if (dialogShown) {
+            this.armCopyReady(() => this.writeClipboardText(html, message));
+            return;
+        }
+        const outcome = await this.writeClipboardText(html, message);
+        this.finishCopyNotification(false, outcome);
+    }
     /** 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) {
@@ -5369,7 +5973,7 @@ export class MdzipWorkspaceView {
     async copyAllPreviewContent() {
         const pending = this.chunkedRenderState;
         if (!pending || pending.cursor >= pending.records.length) {
-            const outcome = await this.copyPreviewSelection(this.elPreviewContent.textContent ?? '');
+            const outcome = await this.copyPreviewSelection(previewPlainText(this.elPreviewContent));
             this.finishCopyNotification(false, outcome);
             return;
         }
@@ -5415,10 +6019,10 @@ export class MdzipWorkspaceView {
             // 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 ?? ''));
+            this.armCopyReady(() => this.copyPreviewSelection(previewPlainText(this.elPreviewContent)));
             return;
         }
-        const outcome = await this.copyPreviewSelection(this.elPreviewContent.textContent ?? '');
+        const outcome = await this.copyPreviewSelection(previewPlainText(this.elPreviewContent));
         this.finishCopyNotification(false, outcome);
     }
     /**
@@ -5577,7 +6181,7 @@ export class MdzipWorkspaceView {
         clearTimeout(showDialogTimer);
         const scratch = this.elPreviewContent.ownerDocument.createElement('div');
         scratch.innerHTML = finalHtml;
-        const plainText = scratch.textContent ?? '';
+        const plainText = previewPlainText(scratch);
         if (dialogShown) {
             // Same reasoning as copyAllPreviewContent: the prepare phase (often
             // the slower of the two here, once image embedding is involved) has
@@ -5621,8 +6225,8 @@ export class MdzipWorkspaceView {
                 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'
+                        ? `Formatted text with ${imageCount} image${imageCount === 1 ? '' : 's'} copied to clipboard`
+                        : 'Formatted text copied to clipboard'
                 };
             }
             catch (error) {
@@ -6121,22 +6725,122 @@ export class MdzipWorkspaceView {
      * reacting to `data-vscode-theme-kind` changes via MutationObserver — so the
      * editor follows the host theme without being recreated (recreation would
      * destroy the CodeMirror instance and lose unsaved edits). No-op when the
-     * scheme is unchanged. Does not fire `onColorSchemeChanged`, which only
-     * reports user-initiated toggles from the built-in toolbar buttons.
+     * scheme is unchanged. `'system'` follows the operating system's setting
+     * from then on. Does not fire `onColorSchemeChanged` or
+     * `onColorSchemePreferenceChanged`, which only report choices made in the
+     * built-in toolbar menu.
      */
     setColorScheme(colorScheme) {
-        if (this.colorScheme === colorScheme) {
+        const next = this.resolveColorScheme(colorScheme);
+        if (this.colorSchemePreference === colorScheme && this.colorScheme === next) {
+            return;
+        }
+        this.colorSchemePreference = colorScheme;
+        this.colorScheme = next;
+        this.render();
+    }
+    /** The light/dark scheme a choice means right now; `'system'` reads the OS setting. */
+    resolveColorScheme(preference) {
+        if (preference !== 'system') {
+            return preference;
+        }
+        return this.systemColorSchemeQuery?.matches ? 'dark' : 'light';
+    }
+    themeMenuItems() {
+        return [
+            [this.elLightThemeBtn, 'light'],
+            [this.elDarkThemeBtn, 'dark'],
+            [this.elSystemThemeBtn, 'system']
+        ];
+    }
+    /** Arrow keys cycle focus through a toolbar menu's items. */
+    moveMenuFocus(e, buttons) {
+        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
+            return;
+        }
+        e.preventDefault();
+        const current = buttons.indexOf(this.elRoot.ownerDocument.activeElement);
+        const step = e.key === 'ArrowDown' ? 1 : -1;
+        buttons[(current + step + buttons.length) % buttons.length].focus();
+    }
+    widthMenuItems() {
+        return Array.from(this.elWidthPopover.querySelectorAll('[data-width]'))
+            .map((button) => [button, button.dataset['width']]);
+    }
+    /** The menu choice matching the current width, or null for a custom pixel width. */
+    previewWidthChoice() {
+        if (this.previewMaxWidth === undefined) {
+            return 'default';
+        }
+        return typeof this.previewMaxWidth === 'number' ? null : this.previewMaxWidth;
+    }
+    /**
+     * A choice's label: its own width (base width times zoom) and, when `measure`
+     * is set and the preview pane is narrower than that, the width it fits to.
+     * Full Width has no number: it is always the pane's width.
+     */
+    previewWidthLabel(choice, measure) {
+        if (choice === 'full') {
+            return PREVIEW_WIDTH_LABELS[choice];
+        }
+        const width = Math.round(PREVIEW_MAX_WIDTH_ALIASES[choice] * this.zoom);
+        const pane = measure ? this.elPreviewPane.clientWidth : 0;
+        const fit = pane > 0 && pane < width ? `, fits to ${pane} px` : '';
+        return `${PREVIEW_WIDTH_LABELS[choice]} (${width} px${fit})`;
+    }
+    /** Labels each width menu item, and the button, with the pixel width it gives. */
+    updateWidthLabels(measure) {
+        for (const [button, choice] of this.widthMenuItems()) {
+            const label = this.previewWidthLabel(choice, measure);
+            setTooltip(button, label);
+            button.setAttribute('aria-label', label);
+        }
+        const choice = this.previewWidthChoice();
+        const label = `Page width: ${choice ? this.previewWidthLabel(choice, measure) : `${this.previewMaxWidth} px`}`;
+        setTooltip(this.elWidthMenuBtn, label);
+        this.elWidthMenuBtn.setAttribute('aria-label', label);
+    }
+    choosePreviewWidthFromMenu(choice) {
+        const changed = this.previewWidthChoice() !== choice;
+        this.previewMaxWidth = choice;
+        this.closeWidthMenu(true);
+        if (changed) {
+            this.options.onPreviewWidthChanged?.(choice);
+        }
+    }
+    /** Closes the page-width menu; `refocus` returns focus to its button (keyboard use). */
+    closeWidthMenu(refocus) {
+        this.widthMenuOpen = false;
+        this.render();
+        if (refocus) {
+            this.elWidthMenuBtn.focus();
+        }
+    }
+    chooseColorSchemeFromMenu(preference) {
+        this.setColorSchemeFromToolbar(preference);
+        this.closeThemeMenu(true);
+    }
+    /** Closes the color scheme menu; `refocus` returns focus to its button (keyboard use). */
+    closeThemeMenu(refocus) {
+        if (!this.themeMenuOpen) {
             return;
         }
-        this.colorScheme = colorScheme;
+        this.themeMenuOpen = false;
         this.render();
+        if (refocus) {
+            this.elThemeMenuBtn.focus();
+        }
     }
-    setColorSchemeFromToolbar(colorScheme) {
-        if (this.colorScheme === colorScheme) {
+    setColorSchemeFromToolbar(preference) {
+        if (this.colorSchemePreference === preference) {
             return;
         }
-        this.setColorScheme(colorScheme);
-        this.options.onColorSchemeChanged?.(colorScheme);
+        const before = this.colorScheme;
+        this.setColorScheme(preference);
+        this.options.onColorSchemePreferenceChanged?.(preference);
+        if (this.colorScheme !== before) {
+            this.options.onColorSchemeChanged?.(this.colorScheme);
+        }
     }
     async setLayout(requested) {
         const snapshot = this.workspace?.snapshot();
@@ -6160,7 +6864,7 @@ export class MdzipWorkspaceView {
         return { kind: 'directory', path: '' };
     }
     fileMenuTarget(path, snapshot) {
-        const entry = snapshot.content.paths.find((item) => item.path.toLowerCase() === path.toLowerCase());
+        const entry = snapshot.content.paths.find((item) => samePath(item.path, path));
         if (!entry) {
             return null;
         }
@@ -6168,9 +6872,9 @@ export class MdzipWorkspaceView {
             kind: 'file',
             path: entry.path,
             orphaned: snapshot.content.orphanedAssetPaths
-                .some((orphan) => orphan.toLowerCase() === entry.path.toLowerCase()),
+                .some((orphan) => samePath(orphan, entry.path)),
             isMarkdown: entry.isMarkdown,
-            isEntryPoint: entry.path.toLowerCase() === snapshot.content.entryPoint.toLowerCase(),
+            isEntryPoint: samePath(entry.path, snapshot.content.entryPoint),
             isImage: entry.isImage,
             isManifest: isMdzipManifestPath(entry.path)
         };
@@ -6216,7 +6920,7 @@ export class MdzipWorkspaceView {
             }
             if (target.isImage) {
                 const cover = snapshot.content.manifest?.cover;
-                stateGroup.push(cover && cover.toLowerCase() === target.path.toLowerCase()
+                stateGroup.push(cover && samePath(cover.replace(/^\.\//, ''), target.path)
                     ? { action: 'remove-cover', label: 'Remove Cover Image' }
                     : { action: 'set-cover', label: 'Set as Cover Image' });
             }
@@ -6469,7 +7173,7 @@ export class MdzipWorkspaceView {
         if (!editor || !snapshot || snapshot.sourceFormat !== 'mdz') {
             return;
         }
-        const entry = snapshot.content.paths.find((item) => item.path.toLowerCase() === archivePath.toLowerCase());
+        const entry = snapshot.content.paths.find((item) => samePath(item.path, archivePath));
         if (!entry || isMdzipManifestPath(entry.path)) {
             return;
         }
@@ -6622,7 +7326,7 @@ export class MdzipWorkspaceView {
     async moveFileToDirectory(path, targetDir) {
         const baseName = path.slice(path.lastIndexOf('/') + 1);
         const newPath = targetDir ? `${targetDir}/${baseName}` : baseName;
-        if (newPath.toLowerCase() === path.toLowerCase()) {
+        if (newPath === path) {
             return;
         }
         try {
@@ -7000,325 +7704,348 @@ 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="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>
+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="toolbar-menu width-menu" data-ref="width-controls">
+        <button type="button" class="icon-toggle toolbar-menu-toggle" data-ref="width-menu-btn"
+          title="Page width" aria-label="Page width" aria-haspopup="menu" aria-expanded="false">
+          <span class="toolbar-menu-icon" data-ref="width-menu-icon">${PAGE_WIDTH_DEFAULT_ICON_HTML}</span>
+        </button>
+        <div class="toolbar-popover" data-ref="width-popover" role="menu" aria-label="Page width" hidden>
+          ${['narrow', 'default', 'wide', 'full'].map((choice) => `
+          <button type="button" role="menuitemradio" class="icon-toggle toolbar-menu-item" data-width="${choice}"
+            title="${PREVIEW_WIDTH_LABELS[choice]}" aria-label="${PREVIEW_WIDTH_LABELS[choice]}" aria-checked="false">
+            ${PREVIEW_WIDTH_ICONS_HTML[choice]}
+          </button>`).join('')}
+        </div>
+      </div>
+      <div class="theme-menu" data-ref="theme-controls">
+        <button type="button" class="icon-toggle theme-menu-toggle" data-ref="theme-menu-btn"
+          title="Color scheme" aria-label="Color scheme" aria-haspopup="menu" aria-expanded="false">
+          <span class="theme-menu-icon" data-ref="theme-menu-icon">${SYSTEM_THEME_ICON_HTML}</span>
+        </button>
+        <div class="theme-popover" data-ref="theme-popover" role="menu" aria-label="Color scheme" hidden>
+          <button type="button" role="menuitemradio" class="icon-toggle theme-toggle" data-ref="light-theme-btn"
+            title="Light mode" aria-label="Light mode" aria-checked="false">
+            ${LIGHT_THEME_ICON_HTML}
+          </button>
+          <button type="button" role="menuitemradio" class="icon-toggle theme-toggle" data-ref="dark-theme-btn"
+            title="Dark mode" aria-label="Dark mode" aria-checked="false">
+            ${DARK_THEME_ICON_HTML}
+          </button>
+          <button type="button" role="menuitemradio" class="icon-toggle theme-toggle" data-ref="system-theme-btn"
+            title="System setting" aria-label="System setting" aria-checked="false">
+            ${SYSTEM_THEME_ICON_HTML}
+          </button>
+        </div>
+      </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