@mdzip/editor 1.3.13 → 1.3.16

package/dist/view.js

@@ -1,10 +1,11 @@
 import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
 import { markdown } from '@codemirror/lang-markdown';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { closeSearchPanel, openSearchPanel, search, searchKeymap } from '@codemirror/search';
 import { Compartment, EditorState } from '@codemirror/state';
 import { Decoration, EditorView, MatchDecorator, ViewPlugin, dropCursor, keymap, lineNumbers } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
-import { Bold, 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, 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, Moon, PackagePlus, PanelLeft, Pilcrow, Quote, Save, Scissors, Search, SquareCode, SquarePen, Strikethrough, Sun, TextSelect, ZoomIn } from 'lucide';
 import { browserClipboardHasImage, readBrowserClipboardImage } from './browser.js';
 import { MdzipAssetSession, mdzipArchiveSourceId, sniffImageSize } from './asset-cache.js';
 import { MD_MARKDOWN_ICON } from './icons/md-markdown.js';
@@ -35,6 +36,7 @@ const CONVERT_TO_MDZ_ICON_HTML = lucideIcon(PackagePlus, `${TOOLBAR_ICON_CLASS}
 const PREVIEW_ICON_HTML = lucideIcon(Eye, TOOLBAR_ICON_CLASS);
 const SPLIT_ICON_HTML = lucideIcon(Columns2, TOOLBAR_ICON_CLASS);
 const SAVE_ICON_HTML = lucideIcon(Save, TOOLBAR_ICON_CLASS);
+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);
@@ -52,6 +54,16 @@ const LINK_ICON_HTML = lucideIcon(Link, FORMAT_ICON_CLASS);
 const IMAGE_FORMAT_ICON_HTML = lucideIcon(ImagePlus, FORMAT_ICON_CLASS);
 const CHEVRON_ICON_HTML = lucideIcon(ChevronDown, 'format-chevron');
 const INFO_ICON_HTML = lucideIcon(Info, 'document-info-icon');
+const CODE_BLOCK_ICON_CLASS = 'mdzip-code-block-icon';
+const CODE_BLOCK_COPY_ICON_HTML = lucideIcon(Copy, CODE_BLOCK_ICON_CLASS);
+const CODE_BLOCK_COPIED_ICON_HTML = lucideIcon(Check, CODE_BLOCK_ICON_CLASS);
+const CODE_BLOCK_COLLAPSE_ICON_HTML = lucideIcon(ChevronDown, CODE_BLOCK_ICON_CLASS);
+// Below this, collapsing (240px / ~12 visible lines) would have no visible
+// effect, so the collapse button isn't shown at all rather than appearing to
+// do nothing when clicked.
+const CODE_BLOCK_COLLAPSIBLE_MIN_LINES = 15;
+// Blocks taller than this start collapsed; still manually expandable either way.
+const CODE_BLOCK_AUTO_COLLAPSE_LINES = 25;
 // Leading icons for context-menu items (Obsidian-style icon column).
 const MENU_ICON_CLASS = 'nav-menu-icon';
 const MENU_CUT_ICON_HTML = lucideIcon(Scissors, MENU_ICON_CLASS);
@@ -179,7 +191,9 @@ const CONTROL_PRESETS = {
         zoom: false,
         colorScheme: false,
         orphanActions: false,
-        fileActions: false
+        fileActions: false,
+        search: false,
+        codeBlockTools: true
     },
     viewer: {
         preset: 'viewer',
@@ -193,7 +207,9 @@ const CONTROL_PRESETS = {
         zoom: true,
         colorScheme: true,
         orphanActions: false,
-        fileActions: false
+        fileActions: false,
+        search: true,
+        codeBlockTools: true
     },
     'standalone-editor': {
         preset: 'standalone-editor',
@@ -207,7 +223,9 @@ const CONTROL_PRESETS = {
         zoom: true,
         colorScheme: true,
         orphanActions: true,
-        fileActions: true
+        fileActions: true,
+        search: true,
+        codeBlockTools: true
     },
     'hosted-editor': {
         preset: 'hosted-editor',
@@ -221,7 +239,9 @@ const CONTROL_PRESETS = {
         zoom: true,
         colorScheme: true,
         orphanActions: true,
-        fileActions: true
+        fileActions: true,
+        search: true,
+        codeBlockTools: true
     }
 };
 export function resolveMdzipControlPolicy(controls) {
@@ -367,6 +387,73 @@ const mdzipEditorTheme = EditorView.theme({
         color: 'var(--mdzip-muted-foreground-color)',
         opacity: '0.65',
     },
+    '.cm-panels': {
+        background: 'var(--mdzip-widget-background-color)',
+        color: 'var(--mdzip-editor-foreground-color)',
+        zIndex: '2',
+    },
+    '.cm-panels.cm-panels-top': {
+        borderBottom: '1px solid var(--mdzip-border-color)',
+    },
+    '.cm-search': {
+        display: 'flex',
+        flexWrap: 'wrap',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '10px 14px',
+        fontSize: '13px',
+    },
+    // CodeMirror separates the find and replace rows with a bare <br>; in a
+    // flex container that collapses to zero width instead of breaking the
+    // line, so force it to take the full row.
+    '.cm-search br': {
+        flexBasis: '100%',
+        height: '0',
+    },
+    '.cm-search label': {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '5px',
+        color: 'var(--mdzip-muted-foreground-color)',
+    },
+    '.cm-search input[type="checkbox"]': {
+        width: '14px',
+        height: '14px',
+        accentColor: 'var(--mdzip-accent-color)',
+    },
+    '.cm-textfield': {
+        background: 'var(--mdzip-editor-background-color)',
+        color: 'var(--mdzip-editor-foreground-color)',
+        border: '1px solid var(--mdzip-border-color)',
+        borderRadius: '5px',
+        padding: '5px 9px',
+        fontSize: 'inherit',
+        width: '220px',
+    },
+    '.cm-textfield:focus-visible': {
+        outline: '1px solid var(--mdzip-focus-outline-color)',
+        outlineOffset: '-1px',
+    },
+    '.cm-button': {
+        background: 'var(--mdzip-widget-background-color)',
+        backgroundImage: 'none',
+        color: 'var(--mdzip-control-foreground-color)',
+        border: '1px solid var(--mdzip-border-color)',
+        borderRadius: '5px',
+        padding: '5px 12px',
+        fontSize: 'inherit',
+        cursor: 'pointer',
+    },
+    '.cm-button:hover': {
+        background: 'var(--mdzip-control-hover-background-color)',
+    },
+    '.cm-searchMatch': {
+        backgroundColor: 'rgba(255, 214, 0, 0.35)',
+    },
+    '.cm-searchMatch-selected': {
+        backgroundColor: 'var(--mdzip-accent-color)',
+        color: 'var(--mdzip-accent-foreground-color)',
+    },
 });
 const mdzipMarkdownHighlight = HighlightStyle.define([
     { tag: [tags.heading1, tags.heading2, tags.heading3, tags.heading4, tags.heading5, tags.heading6],
@@ -376,7 +463,7 @@ const mdzipMarkdownHighlight = HighlightStyle.define([
     { tag: tags.emphasis, color: '#008b8b', fontStyle: 'italic' },
     { tag: tags.strikethrough, color: '#57606a', textDecoration: 'line-through' },
     { tag: tags.link, color: '#0969da' },
-    { tag: tags.url, color: '#0969da' },
+    { tag: tags.url, color: '#6e7781' },
     { tag: tags.monospace, color: '#8a8f00' },
     { tag: tags.quote, color: '#7a5c00' },
     { tag: tags.contentSeparator, color: '#6a9955' },
@@ -398,6 +485,27 @@ const hardBreakMarkerHighlight = ViewPlugin.fromClass(class {
 }, {
     decorations: value => value.decorations
 });
+// Matches raw HTML tags other than <br> (which hardBreakMarkerMatcher already
+// covers) so authors can visually distinguish raw HTML from Markdown prose.
+// Excludes autolinks like <https://example.com> — those have no space before
+// '>' and no closing '/', so the tag-name-only branch requires the char after
+// the name to be '>' directly, which a URL's ':' never satisfies.
+const htmlTagMarkerMatcher = new MatchDecorator({
+    regexp: /<\/?(?!br\b)[a-zA-Z][a-zA-Z0-9-]*(?:\s[^<>]*)?\/?>/gi,
+    decoration: Decoration.mark({ class: 'mdzip-hard-break-marker' })
+});
+const htmlTagMarkerHighlight = ViewPlugin.fromClass(class {
+    constructor(view) {
+        this.decorations = htmlTagMarkerMatcher.createDeco(view);
+    }
+    update(update) {
+        if (update.docChanged || update.viewportChanged) {
+            this.decorations = htmlTagMarkerMatcher.updateDeco(update, this.decorations);
+        }
+    }
+}, {
+    decorations: value => value.decorations
+});
 function injectStyles(doc) {
     const existing = doc.querySelector(`style[${STYLE_ATTR}]`);
     if (existing) {
@@ -469,19 +577,19 @@ depth = 0) {
                 : isImageFile(node.entry.path)
                     ? IMAGE_ICON_HTML
                     : FILE_ICON_HTML;
-        const orphanBtnHtml = isOrphaned && options.allowOrphanActions ? `
-      <span class="nav-orphan-button" role="button" tabindex="0"
-        title="Orphaned asset" aria-label="Orphaned asset actions"
-        data-orphan-path="${safePath}">
-        ${ORPHAN_ICON_HTML}
+        const orphanBtnHtml = isOrphaned && options.allowOrphanActions ? `
+      <span class="nav-orphan-button" role="button" tabindex="0"
+        title="Orphaned asset" aria-label="Orphaned asset actions"
+        data-orphan-path="${safePath}">
+        ${ORPHAN_ICON_HTML}
       </span>` : '';
         const draggable = options.allowDrag && !isManifest;
-        return `<button type="button" class="${classes}" title="${title}"
-      data-nav-path="${safePath}" data-orphan="${isOrphaned ? 'true' : ''}"${draggable ? ' draggable="true"' : ''}>
-      ${guides}<span class="nav-caret"></span>
-      <span class="nav-file-icon ${iconKind}">${iconHtml}</span>
-      ${orphanBtnHtml}
-      <span class="nav-label">${safeName}</span>
+        return `<button type="button" class="${classes}" title="${title}"
+      data-nav-path="${safePath}" data-orphan="${isOrphaned ? 'true' : ''}"${draggable ? ' draggable="true"' : ''}>
+      ${guides}<span class="nav-caret"></span>
+      <span class="nav-file-icon ${iconKind}">${iconHtml}</span>
+      ${orphanBtnHtml}
+      <span class="nav-label">${safeName}</span>
     </button>`;
     }
     const childTrail = depth === 0 ? [] : [...trail, !isLast];
@@ -489,14 +597,14 @@ depth = 0) {
         .map((child, index) => renderNavNode(child, state, options, childTrail, index === node.children.length - 1, depth + 1))
         .join('');
     const pending = options.pendingFolders.has(node.path.toLowerCase());
-    return `<details class="nav-directory${pending ? ' pending-folder' : ''}" open data-nav-dir="${escapeHtml(node.path)}">
-    <summary${pending ? ` title="${escapeHtml(node.path)} — not saved until it contains a file"` : ''}>
-      ${guides}<span class="nav-caret" aria-hidden="true"></span>
-      <span class="nav-folder-icon closed">${FOLDER_CLOSED_ICON_HTML}</span>
-      <span class="nav-folder-icon open">${FOLDER_OPEN_ICON_HTML}</span>
-      <span class="nav-label">${escapeHtml(node.name)}</span>
-    </summary>
-    <div class="nav-directory-children">${children}</div>
+    return `<details class="nav-directory${pending ? ' pending-folder' : ''}" open data-nav-dir="${escapeHtml(node.path)}">
+    <summary${pending ? ` title="${escapeHtml(node.path)} — not saved until it contains a file"` : ''}>
+      ${guides}<span class="nav-caret" aria-hidden="true"></span>
+      <span class="nav-folder-icon closed">${FOLDER_CLOSED_ICON_HTML}</span>
+      <span class="nav-folder-icon open">${FOLDER_OPEN_ICON_HTML}</span>
+      <span class="nav-label">${escapeHtml(node.name)}</span>
+    </summary>
+    <div class="nav-directory-children">${children}</div>
   </details>`;
 }
 // Inserts view-local pending (not yet saved) folders into the nav tree so they
@@ -532,6 +640,35 @@ function navNodeOrder(a, b) {
         return 1;
     return a.name.localeCompare(b.name);
 }
+// Browsers apply raw HTML width/height attributes as presentational sizing
+// hints, but the preview's `img { height: auto }` rule (for responsive
+// scaling) overrides that hint via the normal CSS cascade — so an author's
+// `<img height="300">` was silently ignored. Re-applying numeric, unitless
+// width/height attributes as inline pixel styles restores that sizing
+// without touching an author-supplied inline style.
+function applyRawHtmlImageSizeAttributes(image) {
+    const width = image.getAttribute('width');
+    if (width && /^\d+$/.test(width) && !image.style.width) {
+        image.style.width = `${width}px`;
+    }
+    const height = image.getAttribute('height');
+    if (height && /^\d+$/.test(height) && !image.style.height) {
+        image.style.height = `${height}px`;
+    }
+}
+// Maps the legacy raw HTML `align="left"|"right"` attribute (or the editor's
+// own wrap classes) to a layout direction, for images that skip archive
+// hydration — external, data, and fragment sources — and so never get a slot.
+function rawHtmlImageAlignClass(image) {
+    const align = image.getAttribute('align')?.toLowerCase();
+    if (align === 'left' || image.classList.contains('mdzip-image-wrap-left')) {
+        return 'mdzip-image-left';
+    }
+    if (align === 'right' || image.classList.contains('mdzip-image-wrap-right')) {
+        return 'mdzip-image-right';
+    }
+    return null;
+}
 export class MdzipWorkspaceView {
     constructor(container, options = {}) {
         this.workspace = null;
@@ -574,6 +711,7 @@ export class MdzipWorkspaceView {
         this.cmEditor = null;
         this.readOnlyCompartment = new Compartment();
         this.lineNumbersCompartment = new Compartment();
+        this.searchCompartment = new Compartment();
         this.updatingCm = false;
         this.syncing = false;
         this.markdownExtensions = [];
@@ -630,6 +768,7 @@ export class MdzipWorkspaceView {
         this.elSourceBtn = q('[data-ref="source-btn"]');
         this.elSourceIcon = q('[data-ref="source-icon"]');
         this.elSaveBtn = q('[data-ref="save-btn"]');
+        this.elSearchBtn = q('[data-ref="search-btn"]');
         this.elZoomBtn = q('[data-ref="zoom-btn"]');
         this.elThemeControls = q('[data-ref="theme-controls"]');
         this.elDarkThemeBtn = q('[data-ref="dark-theme-btn"]');
@@ -907,6 +1046,40 @@ export class MdzipWorkspaceView {
         this.applyMarkdownFormat(command);
         return true;
     }
+    /**
+     * Opens CodeMirror's find/replace panel for the current document. Unlike
+     * {@link executeCommand}, this works in read-only (Viewer) hosts too —
+     * searching doesn't require edit access, only a visible source pane. If
+     * the current layout is preview-only, switches to split/source first so
+     * the panel has somewhere to render.
+     */
+    async openSearch() {
+        if (!this.controlPolicy.search) {
+            return false;
+        }
+        const snapshot = this.workspace?.snapshot();
+        if (!snapshot || snapshot.currentPathType !== 'markdown') {
+            return false;
+        }
+        if (this.layout === 'preview') {
+            const nextLayout = this.controlPolicy.layout.split
+                ? 'split'
+                : this.controlPolicy.layout.source ? 'source' : null;
+            if (!nextLayout) {
+                return false;
+            }
+            await this.setLayout(nextLayout);
+        }
+        const editor = await this.ensureCmEditor(true);
+        if (!editor) {
+            return false;
+        }
+        editor.focus();
+        return openSearchPanel(editor);
+    }
+    closeSearch() {
+        return this.cmEditor ? closeSearchPanel(this.cmEditor) : false;
+    }
     async convertToMdz() {
         if (!this.workspace || this.workspace.mode === 'read-only') {
             return false;
@@ -982,12 +1155,21 @@ export class MdzipWorkspaceView {
     setControls(controls) {
         const next = resolveMdzipControlPolicy(controls);
         const lineNumbersChanged = next.lineNumbers !== this.controlPolicy.lineNumbers;
+        const searchChanged = next.search !== this.controlPolicy.search;
         this.controlPolicy = next;
         if (lineNumbersChanged && this.cmEditor) {
             this.cmEditor.dispatch({
                 effects: this.lineNumbersCompartment.reconfigure(next.lineNumbers ? lineNumbers() : [])
             });
         }
+        if (searchChanged && this.cmEditor) {
+            if (!next.search) {
+                closeSearchPanel(this.cmEditor);
+            }
+            this.cmEditor.dispatch({
+                effects: this.searchCompartment.reconfigure(next.search ? [search({ top: true }), keymap.of(searchKeymap)] : [])
+            });
+        }
         const snapshot = this.workspace?.snapshot();
         if (snapshot) {
             this.layout = this.validLayoutForSnapshot(this.layout, snapshot);
@@ -1170,6 +1352,10 @@ export class MdzipWorkspaceView {
     mountPreviewHtml(html, snapshot, context, generation) {
         this.elPreviewContent.innerHTML = html;
         this.mountPreviewExtensions(context, generation);
+        const codeBlockHandle = this.mountCodeBlockControls();
+        if (codeBlockHandle) {
+            this.previewHandles.push(codeBlockHandle);
+        }
         // No archive images to resolve on this path: the preview is ready now.
         this.firePreviewRendered(snapshot, generation);
         this.fireAssetsHydrated(snapshot, generation);
@@ -1186,9 +1372,14 @@ export class MdzipWorkspaceView {
         const document = this.elPreviewContent.ownerDocument;
         const pending = [];
         for (const image of Array.from(this.elPreviewContent.querySelectorAll('img'))) {
+            applyRawHtmlImageSizeAttributes(image);
             const source = image.getAttribute('src');
             // Leave external, protocol-relative, data, and fragment URLs untouched.
             if (!source || /^(?:[a-z][a-z\d+.-]*:|\/\/|#)/i.test(source)) {
+                const alignClass = rawHtmlImageAlignClass(image);
+                if (alignClass) {
+                    image.classList.add(alignClass);
+                }
                 continue;
             }
             // Drop the archive-relative src so the browser does not fetch the bad
@@ -1203,11 +1394,11 @@ export class MdzipWorkspaceView {
             slot.className = animateImageHydration
                 ? 'mdzip-image-slot'
                 : 'mdzip-image-slot mdzip-image-open mdzip-image-animation-off';
-            const align = image.getAttribute('align')?.toLowerCase();
-            if (align === 'left' || image.classList.contains('mdzip-image-wrap-left')) {
+            const alignClass = rawHtmlImageAlignClass(image);
+            if (alignClass === 'mdzip-image-left') {
                 slot.classList.add('mdzip-image-align-left');
             }
-            else if (align === 'right' || image.classList.contains('mdzip-image-wrap-right')) {
+            else if (alignClass === 'mdzip-image-right') {
                 slot.classList.add('mdzip-image-align-right');
             }
             image.parentNode?.insertBefore(slot, image);
@@ -1215,6 +1406,10 @@ export class MdzipWorkspaceView {
             pending.push({ image, slot, source });
         }
         this.mountPreviewExtensions(context, generation);
+        const codeBlockHandle = this.mountCodeBlockControls();
+        if (codeBlockHandle) {
+            this.previewHandles.push(codeBlockHandle);
+        }
         this.firePreviewRendered(snapshot, generation);
         if (!session || pending.length === 0) {
             this.fireAssetsHydrated(snapshot, generation);
@@ -1358,6 +1553,130 @@ export class MdzipWorkspaceView {
             }
         }
     }
+    /**
+     * Built-in preview affordances for rendered code blocks: a language-name
+     * header, a copy-to-clipboard button, and (on long enough blocks) a
+     * collapse/expand toggle. Gated by `controlPolicy.codeBlockTools`.
+     *
+     * Deliberately not a `markdownExtensions` entry (unlike the Mermaid
+     * extension) — every consumer gets this automatically, gated by policy
+     * rather than opt-in wiring. Runs after `mountPreviewExtensions` so any
+     * extension-provided `pre > code` blocks already exist in the DOM. See #29.
+     */
+    mountCodeBlockControls() {
+        if (!this.controlPolicy.codeBlockTools) {
+            return null;
+        }
+        const codeEls = Array.from(this.elPreviewContent.querySelectorAll('pre > code'));
+        if (codeEls.length === 0) {
+            return null;
+        }
+        const doc = this.elPreviewContent.ownerDocument;
+        // Resolve AbortController from the document's own realm, not the ambient
+        // global: addEventListener's `signal` option is validated against the
+        // listener target's realm, so a controller from a different realm (e.g.
+        // Node's global AbortController against a jsdom-hosted element in a
+        // server-side/test environment) fails that check even though both are
+        // spec-compliant AbortControllers.
+        const AbortControllerCtor = doc.defaultView?.AbortController ?? AbortController;
+        const controller = new AbortControllerCtor();
+        for (const code of codeEls) {
+            const pre = code.parentElement;
+            if (pre) {
+                this.enhanceCodeBlock(pre, code, doc, controller.signal);
+            }
+        }
+        return { destroy: () => controller.abort() };
+    }
+    /**
+     * Wraps one `pre > code` block with a header (language label + action
+     * buttons) and a collapsible body, in place. `pre` itself is relocated
+     * (not cloned) into the new structure, so existing references to it and
+     * its `code` child stay valid.
+     */
+    enhanceCodeBlock(pre, code, doc, signal) {
+        const language = /language-([\w-]+)/.exec(code.className)?.[1] ?? '';
+        const wrapper = doc.createElement('div');
+        wrapper.className = 'mdzip-code-block';
+        const header = doc.createElement('div');
+        header.className = 'mdzip-code-block-header';
+        const label = doc.createElement('span');
+        label.className = 'mdzip-code-block-lang';
+        label.textContent = language || 'text';
+        header.appendChild(label);
+        const actions = doc.createElement('div');
+        actions.className = 'mdzip-code-block-actions';
+        header.appendChild(actions);
+        const body = doc.createElement('div');
+        body.className = 'mdzip-code-block-body';
+        pre.replaceWith(wrapper);
+        wrapper.append(header, body);
+        body.appendChild(pre);
+        // Collapse toggle: only shown when the block has enough lines that
+        // collapsing is actually visible — the collapsed body still shows ~12
+        // lines (240px, see .mdzip-code-block-collapsed in view-css.ts), so a
+        // button that collapses a block shorter than that would visibly do
+        // nothing, which is more confusing than not offering it at all. Blocks
+        // past the longer auto-collapse threshold start pre-collapsed; anything
+        // between the two thresholds is collapsible but starts open.
+        const lineCount = (code.textContent ?? '').split('\n').length;
+        if (lineCount > CODE_BLOCK_COLLAPSIBLE_MIN_LINES) {
+            if (lineCount > CODE_BLOCK_AUTO_COLLAPSE_LINES) {
+                wrapper.classList.add('mdzip-code-block-collapsed');
+            }
+            const collapseBtn = doc.createElement('button');
+            collapseBtn.type = 'button';
+            collapseBtn.className = 'mdzip-code-block-btn';
+            collapseBtn.innerHTML = CODE_BLOCK_COLLAPSE_ICON_HTML;
+            const syncCollapseLabel = () => {
+                const collapsed = wrapper.classList.contains('mdzip-code-block-collapsed');
+                collapseBtn.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+                collapseBtn.setAttribute('aria-label', collapsed ? 'Expand code block' : 'Collapse code block');
+            };
+            syncCollapseLabel();
+            collapseBtn.title = 'Collapse/expand';
+            collapseBtn.addEventListener('click', () => {
+                wrapper.classList.toggle('mdzip-code-block-collapsed');
+                syncCollapseLabel();
+            }, { signal });
+            actions.appendChild(collapseBtn);
+        }
+        // Copy button: icon swaps to a confirmation state for a beat, then reverts.
+        // The revert timer is cleared on unmount so it never touches a stale button
+        // after the preview re-renders.
+        const copyBtn = doc.createElement('button');
+        copyBtn.type = 'button';
+        copyBtn.className = 'mdzip-code-block-btn';
+        copyBtn.innerHTML = CODE_BLOCK_COPY_ICON_HTML;
+        copyBtn.setAttribute('aria-label', 'Copy code');
+        copyBtn.title = 'Copy code';
+        // Re-check clipboard availability at click time rather than capturing it
+        // once at mount: a host can grant/attach clipboard access after the
+        // preview first renders, and this way there is nothing to keep in sync.
+        let copiedTimer;
+        copyBtn.addEventListener('click', () => {
+            const clip = doc.defaultView?.navigator.clipboard;
+            if (!clip) {
+                return;
+            }
+            void clip.writeText(code.textContent ?? '').then(() => {
+                copyBtn.innerHTML = CODE_BLOCK_COPIED_ICON_HTML;
+                copyBtn.classList.add('mdzip-code-block-btn-copied');
+                copyBtn.setAttribute('aria-label', 'Copied');
+                clearTimeout(copiedTimer);
+                copiedTimer = setTimeout(() => {
+                    copyBtn.innerHTML = CODE_BLOCK_COPY_ICON_HTML;
+                    copyBtn.classList.remove('mdzip-code-block-btn-copied');
+                    copyBtn.setAttribute('aria-label', 'Copy code');
+                }, 1500);
+            }).catch(() => {
+                // Write can fail (permissions, insecure context); leave the button
+                // as-is rather than showing a false confirmation.
+            });
+        }, { signal });
+        signal.addEventListener('abort', () => clearTimeout(copiedTimer), { once: true });
+        actions.appendChild(copyBtn);
+    }
     firePreviewRendered(snapshot, generation) {
         if (generation !== this.previewGeneration) {
             return;
@@ -1579,6 +1898,7 @@ export class MdzipWorkspaceView {
             doc: initialText,
             extensions: [
                 this.lineNumbersCompartment.of(this.controlPolicy.lineNumbers ? lineNumbers() : []),
+                this.searchCompartment.of(this.controlPolicy.search ? [search({ top: true }), keymap.of(searchKeymap)] : []),
                 history(),
                 keymap.of([
                     { key: 'Mod-b', run: () => self.runFormatShortcut('bold') },
@@ -1589,6 +1909,7 @@ export class MdzipWorkspaceView {
                 markdown(),
                 syntaxHighlighting(mdzipMarkdownHighlight),
                 hardBreakMarkerHighlight,
+                htmlTagMarkerHighlight,
                 EditorView.lineWrapping,
                 dropCursor(),
                 mdzipEditorTheme,
@@ -1682,24 +2003,28 @@ export class MdzipWorkspaceView {
         const showSaveControl = this.controlPolicy.save && snapshot.mode !== 'read-only';
         const showZoomControl = this.controlPolicy.zoom;
         const showColorSchemeControl = this.controlPolicy.colorScheme;
+        const showSearchControl = this.controlPolicy.search
+            && canShowSource && snapshot.currentPathType === 'markdown';
         const showEditControls = canEdit
             && snapshot.currentPathType === 'markdown'
             && this.layout !== 'preview'
             && hasFormattingControls(this.controlPolicy.formatting);
         const showToolbar = this.controlPolicy.toolbar
-            && (showNavigationControl || showLayoutControls
-                || showSaveControl || showZoomControl || showColorSchemeControl || showEditControls);
+            && (showNavigationControl || showLayoutControls || showSaveControl
+                || showZoomControl || 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;
+        this.elToolbarControls.hidden = !showSaveControl && !showZoomControl
+            && !showColorSchemeControl && !showSearchControl;
         this.elNavBtn.hidden = !showNavigationControl;
         this.elPreviewBtn.hidden = !this.controlPolicy.layout.preview;
         this.elSplitBtn.hidden = !this.controlPolicy.layout.split;
         this.elSourceBtn.hidden = !this.controlPolicy.layout.source;
         this.elSaveBtn.hidden = !showSaveControl;
+        this.elSearchBtn.hidden = !showSearchControl;
         this.elZoomBtn.hidden = !showZoomControl;
         this.elThemeControls.hidden = !showColorSchemeControl;
         this.elRoot.style.setProperty('--mdz-zoom', String(this.zoom));
@@ -1984,6 +2309,9 @@ export class MdzipWorkspaceView {
                 void this.save();
             }
         });
+        this.elSearchBtn.addEventListener('click', () => {
+            void this.openSearch();
+        });
         this.elZoomBtn.addEventListener('click', (e) => {
             if (!this.controlPolicy.zoom) {
                 return;
@@ -4117,267 +4445,270 @@ 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="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">
-        <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="metadata-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-metadata-dialog-heading">
-    <div class="title-dialog metadata-dialog">
-      <h3 id="mdzip-metadata-dialog-heading">Document Information</h3>
-      <dl data-ref="metadata-list"></dl>
-      <h4>Libraries</h4>
-      <dl data-ref="library-list"></dl>
-      <div class="title-dialog-actions">
-        <button type="button" class="save-title" data-action="close-metadata">Close</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="name-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-name-dialog-heading">
-    <div class="title-dialog">
-      <h3 id="mdzip-name-dialog-heading" data-ref="name-dialog-heading">New Markdown File</h3>
-      <input type="text" maxlength="260" data-ref="name-input" aria-label="File name" />
-      <p class="title-dialog-validation" data-ref="name-validation" hidden></p>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-name">Cancel</button>
-        <button type="button" class="save-title" data-ref="name-confirm-btn">Create</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="delete-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-delete-dialog-heading">
-    <div class="title-dialog">
-      <h3 id="mdzip-delete-dialog-heading">Delete File?</h3>
-      <p data-ref="delete-dialog-text"></p>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-delete">Cancel</button>
-        <button type="button" class="danger-action" data-ref="delete-confirm-btn">Delete</button>
-      </div>
-    </div>
-  </div>
-
-  <input type="file" data-ref="replace-input" hidden />
-
-  <div class="nav-context-menu" data-ref="nav-menu" hidden role="menu"></div>
-
-  <div class="mdzip-tooltip" data-ref="tooltip" role="tooltip" hidden></div>
-
-  <p class="mdzip-empty" data-ref="empty-state">No MDZip workspace loaded.</p>
-</section>
+const SHELL_HTML = `
+<section class="mdzip-root">
+  <div class="document-strip" data-ref="document-strip" hidden>
+    <button type="button" class="title-button" data-ref="title-btn"></button>
+    <button type="button" class="document-info-button" data-ref="document-info-btn"
+      title="Document information" aria-label="Document information">
+      ${INFO_ICON_HTML}
+    </button>
+  </div>
+
+  <header class="toolbar" data-ref="toolbar" hidden>
+    <div class="toolbar-start">
+      <div class="toolbar-left">
+        <button type="button" class="icon-toggle nav-toggle" data-ref="nav-btn" title="Toggle contents" aria-label="Toggle contents">
+          ${NAV_TOGGLE_ICON_HTML}
+        </button>
+      </div>
+
+      <div class="edit-toolbar" data-ref="edit-toolbar" role="toolbar" aria-label="Markdown formatting">
+        <div class="edit-toolbar-group">
+          <button type="button" data-format="bold" data-format-control="bold" title="Bold" aria-label="Bold">${BOLD_ICON_HTML}</button>
+          <button type="button" data-format="italic" data-format-control="italic" title="Italic" aria-label="Italic">${ITALIC_ICON_HTML}</button>
+          <button type="button" data-format="strike" data-format-control="strikethrough" title="Strikethrough" aria-label="Strikethrough">${STRIKE_ICON_HTML}</button>
+          <div class="format-menu" data-format-control="headings">
+            <button type="button" class="format-menu-toggle" data-format-menu-toggle
+              aria-label="Heading" aria-haspopup="menu" aria-expanded="false">
+              ${HEADING_ICON_HTML}${CHEVRON_ICON_HTML}
+            </button>
+            <div class="format-menu-popover" data-format-menu role="menu" aria-label="Heading level" hidden>
+              <button type="button" role="menuitem" data-format="paragraph">Paragraph</button>
+              <button type="button" role="menuitem" data-format="heading-1" data-heading-level="1"><strong>H1</strong> Heading 1</button>
+              <button type="button" role="menuitem" data-format="heading-2" data-heading-level="2"><strong>H2</strong> Heading 2</button>
+              <button type="button" role="menuitem" data-format="heading-3" data-heading-level="3"><strong>H3</strong> Heading 3</button>
+              <button type="button" role="menuitem" data-format="heading-4" data-heading-level="4"><strong>H4</strong> Heading 4</button>
+              <button type="button" role="menuitem" data-format="heading-5" data-heading-level="5"><strong>H5</strong> Heading 5</button>
+              <button type="button" role="menuitem" data-format="heading-6" data-heading-level="6"><strong>H6</strong> Heading 6</button>
+            </div>
+          </div>
+        </div>
+        <span class="edit-toolbar-divider" aria-hidden="true"></span>
+        <div class="edit-toolbar-group">
+          <button type="button" data-format="bullet-list" data-format-control="bulletList" title="Bulleted list" aria-label="Bulleted list">${BULLET_LIST_ICON_HTML}</button>
+          <button type="button" data-format="ordered-list" data-format-control="orderedList" title="Numbered list" aria-label="Numbered list">${ORDERED_LIST_ICON_HTML}</button>
+          <div class="format-menu" data-format-control="code">
+            <button type="button" class="format-menu-toggle" data-format-menu-toggle
+              aria-label="Code" aria-haspopup="menu" aria-expanded="false">
+              ${CODE_ICON_HTML}${CHEVRON_ICON_HTML}
+            </button>
+            <div class="format-menu-popover" data-format-menu role="menu" aria-label="Code format" hidden>
+              <button type="button" role="menuitem" data-format="code" data-code-kind="inline">Inline code</button>
+              <button type="button" role="menuitem" data-format="code-block" data-code-kind="block">Code block</button>
+            </div>
+          </div>
+          <button type="button" data-format="quote" data-format-control="blockquote" title="Blockquote" aria-label="Blockquote">${QUOTE_ICON_HTML}</button>
+          <button type="button" data-format="line-break" data-format-control="lineBreak" title="Line break" aria-label="Line break">${LINE_BREAK_ICON_HTML}</button>
+        </div>
+        <span class="edit-toolbar-divider" aria-hidden="true"></span>
+        <div class="edit-toolbar-group">
+          <button type="button" data-format="link" data-format-control="link" title="Link" aria-label="Link">${LINK_ICON_HTML}</button>
+          <button type="button" data-format="image" data-format-control="image" title="Image" aria-label="Image">${IMAGE_FORMAT_ICON_HTML}</button>
+          <input type="file" data-ref="image-input" accept="image/*" hidden />
+        </div>
+      </div>
+    </div>
+
+    <div class="toolbar-buttons view-mode-toggle-group" data-ref="layout-controls" role="group" aria-label="Editor layout">
+      <button type="button" class="icon-toggle view-mode-toggle" data-ref="source-btn" title="Edit" aria-label="Edit" aria-pressed="false">
+        <span class="commandbar-flex-container" data-ref="source-icon">${SOURCE_EDIT_ICON_HTML}</span>
+      </button>
+      <button type="button" class="icon-toggle view-mode-toggle" data-ref="split-btn" title="Split" aria-label="Split" aria-pressed="false">
+        <span class="commandbar-flex-container">
+          ${SPLIT_ICON_HTML}
+        </span>
+      </button>
+      <button type="button" class="icon-toggle view-mode-toggle" data-ref="preview-btn" title="View" aria-label="View" aria-pressed="false">
+        <span class="commandbar-flex-container">
+          ${PREVIEW_ICON_HTML}
+        </span>
+      </button>
+    </div>
+
+    <div class="toolbar-controls" data-ref="toolbar-controls">
+      <button type="button" class="icon-toggle" data-ref="search-btn" title="Find/replace (Mod-F)" aria-label="Find/replace">
+        ${SEARCH_ICON_HTML}
+      </button>
+      <button type="button" class="icon-toggle" data-ref="save-btn" title="Save" aria-label="Save">
+        ${SAVE_ICON_HTML}
+      </button>
+      <button type="button" class="icon-toggle zoom-toggle" data-ref="zoom-btn" title="Zoom controls" aria-label="Zoom controls">
+        ${ZOOM_ICON_HTML}
+      </button>
+      <div class="theme-toggle-group" data-ref="theme-controls" role="group" aria-label="Color scheme">
+        <button type="button" class="icon-toggle theme-toggle" data-ref="dark-theme-btn"
+          title="Dark mode" aria-label="Dark mode" aria-pressed="false">
+          ${DARK_THEME_ICON_HTML}
+        </button>
+        <button type="button" class="icon-toggle theme-toggle" data-ref="light-theme-btn"
+          title="Light mode" aria-label="Light mode" aria-pressed="false">
+          ${LIGHT_THEME_ICON_HTML}
+        </button>
+      </div>
+      <div class="zoom-popover" data-ref="zoom-popover" hidden role="group" aria-label="Zoom">
+        <span class="zoom-level" data-ref="zoom-level">100%</span>
+        <span class="zoom-stepper">
+          <button type="button" data-action="zoom-out" title="Zoom out" aria-label="Zoom out">-</button>
+          <button type="button" data-action="zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
+        </span>
+        <button type="button" class="zoom-reset" data-action="zoom-reset" title="Reset zoom">Reset</button>
+      </div>
+    </div>
+  </header>
+
+  <div class="workspace-shell" data-ref="workspace-shell" hidden>
+    <aside class="nav-pane" data-ref="nav-pane" aria-label="Package contents">
+      <div class="nav-tree" data-ref="nav-tree"></div>
+    </aside>
+    <div class="nav-resizer" data-ref="nav-resizer"
+      role="separator" aria-orientation="vertical" aria-label="Resize contents pane"></div>
+
+    <div class="pane-stack" data-ref="pane-stack">
+      <section class="pane edit-pane" data-ref="edit-pane">
+        <div class="editor-host" data-ref="editor-host"></div>
+      </section>
+      <div class="split-resizer" data-ref="split-resizer"
+        role="separator" aria-orientation="vertical" aria-label="Resize split panes"></div>
+      <section class="pane preview-pane" data-ref="preview-pane">
+        <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="metadata-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-metadata-dialog-heading">
+    <div class="title-dialog metadata-dialog">
+      <h3 id="mdzip-metadata-dialog-heading">Document Information</h3>
+      <dl data-ref="metadata-list"></dl>
+      <h4>Libraries</h4>
+      <dl data-ref="library-list"></dl>
+      <div class="title-dialog-actions">
+        <button type="button" class="save-title" data-action="close-metadata">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="name-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-name-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-name-dialog-heading" data-ref="name-dialog-heading">New Markdown File</h3>
+      <input type="text" maxlength="260" data-ref="name-input" aria-label="File name" />
+      <p class="title-dialog-validation" data-ref="name-validation" hidden></p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-name">Cancel</button>
+        <button type="button" class="save-title" data-ref="name-confirm-btn">Create</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="delete-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-delete-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-delete-dialog-heading">Delete File?</h3>
+      <p data-ref="delete-dialog-text"></p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-delete">Cancel</button>
+        <button type="button" class="danger-action" data-ref="delete-confirm-btn">Delete</button>
+      </div>
+    </div>
+  </div>
+
+  <input type="file" data-ref="replace-input" hidden />
+
+  <div class="nav-context-menu" data-ref="nav-menu" hidden role="menu"></div>
+
+  <div class="mdzip-tooltip" data-ref="tooltip" role="tooltip" hidden></div>
+
+  <p class="mdzip-empty" data-ref="empty-state">No MDZip workspace loaded.</p>
+</section>
 `;
 //# sourceMappingURL=view.js.map