@mdzip/editor 1.4.7 → 1.5.0

package/dist/view.js

@@ -12,7 +12,7 @@ import { MdzipAssetSession, mdzipArchiveSourceId, sniffImageSize } from './asset
 import { MD_MARKDOWN_ICON } from './icons/md-markdown.js';
 import { MDZIP_RUNTIME_LIBRARIES } from './library-info.js';
 import { MdzipWorkspaceService, extensionForMime, normalizeArchivePath, relativeArchivePath } from './workspace.js';
-import { buildMdzipNavTree, canEditMdzipPath, escapeHtml, isOrphanedMdzipAsset, mdzipEntryIconKind, isMdzipManifestPath, isMdzipWorkspaceRelativeLink, resolveMdzipArchiveLinkTarget, renderMdzipPreviewHtml } from './workspace-view.js';
+import { buildMdzipNavTree, canEditMdzipPath, escapeHtml, isOrphanedMdzipAsset, mdzipEntryIconKind, isMdzipManifestPath, isMdzipDefaultPolicyExternalLink, isMdzipExternalLink, isMdzipWorkspaceRelativeLink, parseMdzipLink, renderMdzipPreviewHtml } from './workspace-view.js';
 import { escapeMarkdownImageAlt, findImageReferenceAtOffset, formatImageEditMarkdown } from './image-edit.js';
 import { MdzipRenderingService, defaultSafeMarkdownRenderer, groupTokensIntoChunks, chunkSourceKey, collectMdzipHeadingIds, MDZIP_HEADING_ID_PREFIX, tokenEmbedsImage, tokenIsHeading } from './rendering.js';
 import { mdzipFrontMatterExtension } from './front-matter-extension.js';
@@ -23,6 +23,14 @@ const isImageFile = (path) => IMAGE_EXTENSIONS.test(path);
 function isThenable(value) {
     return typeof value?.then === 'function';
 }
+function restoreAttribute(element, name, value) {
+    if (value === null) {
+        element.removeAttribute(name);
+    }
+    else {
+        element.setAttribute(name, value);
+    }
+}
 const NAV_ICON_CLASS = 'nav-lucide-icon';
 const TOOLBAR_ICON_CLASS = 'toggle-icon';
 const MANIFEST_ICON_HTML = lucideIcon(FileBraces, NAV_ICON_CLASS);
@@ -746,19 +754,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];
@@ -766,14 +774,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
@@ -1006,6 +1014,21 @@ export class MdzipWorkspaceView {
         // until that document's preview has mounted so there is a heading to scroll
         // to. Consumed by firePreviewRendered.
         this.pendingAnchorFragment = null;
+        // The previewGeneration whose preview last mounted (or was claimed by an
+        // entry renderer); scrollToAnchor() waits until it catches up.
+        this.previewMountedGeneration = -1;
+        this.previewMountWaiters = [];
+        // True while onPreviewRendered runs — see scrollToAnchor().
+        this.firingPreviewRendered = false;
+        this.destroyed = false;
+        // 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
+        // scrolls either pane or the preview re-renders.
+        this.anchorPin = null;
+        // Each link's own target/rel from before the external-link policy touched
+        // it, so a policy change can restore them before re-applying.
+        this.externalLinkOriginals = new WeakMap();
         // Guards syncScrollToPreviewBottom against overlapping drains: set to the
         // chunkedRenderState generation currently being force-drained, null when
         // none is in flight. A second bottom-edge sync that arrives mid-drain
@@ -1283,7 +1306,12 @@ export class MdzipWorkspaceView {
                 void this.notifyChanged(event);
             });
             this.render();
-            void this.notifyChanged(this.initialWorkspaceEvent(ws.snapshot()));
+            // A lazy workspace handed over without archiveBytes can only be exported
+            // by rebuilding it, reading every lazy document first — and the host that
+            // passed it in already holds those bytes. Skip reporting them on open.
+            const initialBytesNeedRebuild = !options.archiveBytes?.length
+                && workspace.documents.some((document) => document.isLazy);
+            void this.notifyChanged(this.initialWorkspaceEvent(ws.snapshot()), { reportBytes: !initialBytesNeedRebuild });
         }
         catch (error) {
             if (generation !== this.openGeneration) {
@@ -1437,6 +1465,9 @@ export class MdzipWorkspaceView {
         this.teardownEntryRenderer();
         // Release any whenRendered() waiters so their promises do not hang.
         this.flushRenderedWaiters();
+        this.destroyed = true;
+        this.markPreviewMounted();
+        this.releaseAnchorPin();
         try {
             this.workspace?.dispose();
         }
@@ -1589,6 +1620,54 @@ export class MdzipWorkspaceView {
     setImageEditOptions(options) {
         this.options.imageEditHandler = options.imageEditHandler;
     }
+    /**
+     * Replaces the external-link rendering policy and re-applies it to the
+     * links already in the preview, without re-rendering. `undefined` restores
+     * every link's own `target`/`rel`.
+     */
+    setExternalLinks(policy) {
+        this.options.externalLinks = policy;
+        this.applyExternalLinkPolicy(this.elPreviewContent);
+    }
+    applyExternalLinkPolicy(root) {
+        const policy = this.options.externalLinks;
+        for (const link of Array.from(root.querySelectorAll('a[href]'))) {
+            const original = this.externalLinkOriginals.get(link);
+            if (original) {
+                this.externalLinkOriginals.delete(link);
+                restoreAttribute(link, 'target', original.target);
+                restoreAttribute(link, 'rel', original.rel);
+            }
+            if (!policy) {
+                continue;
+            }
+            const rel = policy.rel ?? (policy.target === '_blank' ? 'noopener noreferrer' : undefined);
+            if (policy.target === undefined && rel === undefined) {
+                continue;
+            }
+            const href = link.getAttribute('href') ?? '';
+            if (!isMdzipExternalLink(href)) {
+                continue;
+            }
+            let external = false;
+            try {
+                external = policy.predicate ? policy.predicate(href) : isMdzipDefaultPolicyExternalLink(href);
+            }
+            catch (error) {
+                this.options.onFailed?.(error);
+            }
+            if (!external) {
+                continue;
+            }
+            this.externalLinkOriginals.set(link, { target: link.getAttribute('target'), rel: link.getAttribute('rel') });
+            if (policy.target !== undefined) {
+                link.setAttribute('target', policy.target);
+            }
+            if (rel !== undefined) {
+                link.setAttribute('rel', rel);
+            }
+        }
+    }
     applyDensityClasses() {
         this.elRoot.classList.remove('toolbar-density-comfortable', 'toolbar-density-compact', 'toolbar-density-dense', 'content-density-comfortable', 'content-density-compact');
         this.elRoot.classList.add(`toolbar-density-${this.toolbarDensity}`);
@@ -1676,6 +1755,7 @@ export class MdzipWorkspaceView {
             // There is no built-in preview to wait for; release any waiters.
             this.previewHydrated = true;
             this.flushRenderedWaiters();
+            this.markPreviewMounted();
             return;
         }
         const memo = this.previewMemo;
@@ -1811,6 +1891,7 @@ export class MdzipWorkspaceView {
         if (codeBlockHandle) {
             this.previewHandles.push(codeBlockHandle);
         }
+        this.applyExternalLinkPolicy(this.elPreviewContent);
         // No archive images to resolve on this path: the preview is ready now.
         this.firePreviewRendered(snapshot, generation);
         this.fireAssetsHydrated(snapshot, generation);
@@ -1833,6 +1914,7 @@ export class MdzipWorkspaceView {
         if (codeBlockHandle) {
             this.previewHandles.push(codeBlockHandle);
         }
+        this.applyExternalLinkPolicy(this.elPreviewContent);
         this.firePreviewRendered(snapshot, generation);
         this.hydrateImages(pending, context, generation, animateImageHydration, () => {
             this.fireAssetsHydrated(snapshot, generation);
@@ -2461,6 +2543,7 @@ export class MdzipWorkspaceView {
             if (codeBlockHandle) {
                 record.handles.push(codeBlockHandle);
             }
+            this.applyExternalLinkPolicy(record.root);
         }
         return { cursor, mountedRoots };
     }
@@ -2808,12 +2891,26 @@ export class MdzipWorkspaceView {
         }
         this.restorePendingPreviewScroll(generation);
         this.flushPendingAnchorSoon();
+        this.markPreviewMounted();
+        this.firingPreviewRendered = true;
         try {
             this.options.onPreviewRendered?.(snapshot);
         }
         catch (error) {
             this.options.onFailed?.(error);
         }
+        finally {
+            this.firingPreviewRendered = false;
+        }
+    }
+    /** Releases {@link scrollToAnchor} calls waiting for the current preview to mount. */
+    markPreviewMounted() {
+        this.previewMountedGeneration = this.previewGeneration;
+        const waiters = this.previewMountWaiters;
+        this.previewMountWaiters = [];
+        for (const resolve of waiters) {
+            resolve();
+        }
     }
     /** See `pendingPreviewScrollRestore`'s doc comment. */
     restorePendingPreviewScroll(generation) {
@@ -3142,7 +3239,10 @@ export class MdzipWorkspaceView {
             // scroll, on every keystroke. Wheel/touch/mousedown (which also covers
             // a scrollbar-thumb drag, since that lands on this same element) are
             // unambiguous and cover the vast majority of real scrolling.
-            const markEditorGesture = () => { self.lastEditorGestureTime = performance.now(); };
+            const markEditorGesture = () => {
+                self.lastEditorGestureTime = performance.now();
+                self.releaseAnchorPin();
+            };
             scroller.addEventListener('wheel', markEditorGesture, { passive: true });
             scroller.addEventListener('touchstart', markEditorGesture, { passive: true });
             scroller.addEventListener('mousedown', markEditorGesture);
@@ -3939,7 +4039,10 @@ export class MdzipWorkspaceView {
                 void this.replaceFileFromPicker(path, file);
             }
         });
-        const markPreviewGesture = () => { this.lastPreviewGestureTime = performance.now(); };
+        const markPreviewGesture = () => {
+            this.lastPreviewGestureTime = performance.now();
+            this.releaseAnchorPin();
+        };
         this.elPreviewPane.addEventListener('wheel', markPreviewGesture, { passive: true });
         this.elPreviewPane.addEventListener('touchstart', markPreviewGesture, { passive: true });
         this.elPreviewPane.addEventListener('mousedown', markPreviewGesture);
@@ -3958,17 +4061,20 @@ export class MdzipWorkspaceView {
                 return;
             }
             const href = link.getAttribute('href') ?? '';
+            const parsed = parseMdzipLink(href, snapshot.currentPath, snapshot.content.paths);
+            if (this.options.onLinkActivated && this.dispatchLinkActivated(event, link, href, parsed, snapshot)) {
+                return;
+            }
             if (href.startsWith('#')) {
                 event.preventDefault();
                 void this.scrollPreviewToAnchor(href.slice(1));
                 return;
             }
-            const targetPath = resolveMdzipArchiveLinkTarget(href, snapshot.currentPath, snapshot.content.paths);
-            if (targetPath) {
+            if (parsed.targetPath) {
                 event.preventDefault();
                 const hashIndex = href.indexOf('#');
                 const fragment = hashIndex >= 0 ? href.slice(hashIndex + 1) : '';
-                void this.openPathAndScrollToAnchor(targetPath, fragment);
+                void this.openPathAndScrollToAnchor(parsed.targetPath, fragment);
                 return;
             }
             if (this.options.onUnresolvedLinkClick && isMdzipWorkspaceRelativeLink(href)) {
@@ -4020,6 +4126,132 @@ export class MdzipWorkspaceView {
             await this.scrollPreviewToAnchor(pending);
         }
     }
+    /** Returns true when the host prevented the click, ending all further handling. */
+    dispatchLinkActivated(domEvent, link, href, parsed, snapshot) {
+        let prevented = false;
+        const event = {
+            href,
+            text: (link.textContent ?? '').trim(),
+            kind: parsed.kind,
+            isExternal: parsed.kind === 'external',
+            isAnchor: parsed.kind === 'anchor',
+            path: parsed.path,
+            anchor: parsed.anchor,
+            sourcePath: snapshot.currentPath,
+            targetPath: parsed.targetPath,
+            ctrlKey: domEvent.ctrlKey,
+            metaKey: domEvent.metaKey,
+            shiftKey: domEvent.shiftKey,
+            altKey: domEvent.altKey,
+            domEvent,
+            snapshot,
+            preventDefault: () => {
+                prevented = true;
+            },
+            get defaultPrevented() {
+                return prevented;
+            }
+        };
+        try {
+            this.options.onLinkActivated?.(event);
+        }
+        catch (error) {
+            this.options.onFailed?.(error);
+        }
+        if (prevented) {
+            domEvent.preventDefault();
+        }
+        return prevented;
+    }
+    /**
+     * Scrolls the preview to a heading or an explicit `id`/`name` anchor.
+     * Accepts the fragment with or without its leading `#` and matches it the
+     * way a clicked `#fragment` link does: case-insensitive, percent-decoded,
+     * against both bare and `user-content-`-prefixed heading ids.
+     *
+     * Safe to call at any point — straight after `open()`/`openWorkspace()`,
+     * or from `onPreviewRendered`: it waits for the current document's
+     * preview to mount, and under progressive rendering mounts the chunks up
+     * to the target first. Resolves `true` when it scrolled to a matching
+     * anchor (`''` and `'top'` scroll to the top and resolve `true`), and
+     * `false` when nothing matches, an entry renderer owns the pane, or the
+     * view is destroyed first.
+     */
+    async scrollToAnchor(anchor) {
+        const fragment = anchor.startsWith('#') ? anchor.slice(1) : anchor;
+        // onPreviewRendered runs inside the first chunk batch's completion,
+        // before the lazy-continuation sentinel is armed — same race as
+        // flushPendingAnchorSoon, so a call from it (or one that had to wait for
+        // the mount) is deferred a frame.
+        let deferFrame = this.firingPreviewRendered;
+        while (!this.destroyed && this.previewMountedGeneration !== this.previewGeneration) {
+            deferFrame = true;
+            await new Promise((resolve) => this.previewMountWaiters.push(resolve));
+        }
+        if (this.destroyed) {
+            return false;
+        }
+        if (deferFrame) {
+            const generation = this.previewGeneration;
+            await new Promise((resolve) => requestAnimationFrame(() => resolve()));
+            if (this.destroyed) {
+                return false;
+            }
+            if (generation !== this.previewGeneration) {
+                return this.scrollToAnchor(anchor);
+            }
+        }
+        if (this.entryState) {
+            return false;
+        }
+        const found = await this.scrollPreviewToAnchor(fragment);
+        return found || !fragment || fragment.toLowerCase() === 'top';
+    }
+    /**
+     * The anchors {@link scrollToAnchor} can reach in the current preview, in
+     * document order: every heading id (without the `user-content-` prefix),
+     * including headings in chunks progressive rendering hasn't mounted yet,
+     * plus explicit `id`/`name` anchors on links in the mounted preview.
+     * Empty before the preview first mounts.
+     */
+    getAvailableAnchors() {
+        if (this.entryState) {
+            return [];
+        }
+        const anchors = [];
+        const seen = new Set();
+        const add = (value) => {
+            if (!value)
+                return;
+            const bare = value.startsWith(MDZIP_HEADING_ID_PREFIX) ? value.slice(MDZIP_HEADING_ID_PREFIX.length) : value;
+            if (bare && !seen.has(bare)) {
+                seen.add(bare);
+                anchors.push(bare);
+            }
+        };
+        const fromDom = (root) => {
+            for (const element of Array.from(root.querySelectorAll('h1[id],h2[id],h3[id],h4[id],h5[id],h6[id],a[id],a[name]'))) {
+                add(element.getAttribute('id'));
+                add(element.getAttribute('name'));
+            }
+        };
+        const state = this.chunkedRenderState;
+        if (state && state.generation === this.previewGeneration) {
+            // Walk records in order so unmounted chunks' headings land in place.
+            state.records.forEach((record) => {
+                if (record.root) {
+                    fromDom(record.root);
+                }
+                else {
+                    collectMdzipHeadingIds(record.tokens).forEach(add);
+                }
+            });
+        }
+        else {
+            fromDom(this.elPreviewContent);
+        }
+        return anchors;
+    }
     // Deferred a frame: firePreviewRendered runs inside the first chunk batch's
     // completion callback, before the lazy-continuation sentinel for the rest is
     // armed. Scrolling then (which may need to drain those chunks) would race it.
@@ -4098,9 +4330,35 @@ export class MdzipWorkspaceView {
             }
             return false;
         }
-        pane.scrollTop += target.getBoundingClientRect().top - pane.getBoundingClientRect().top;
+        this.scrollPaneToElement(target);
+        this.pinPreviewAnchor(target);
         return true;
     }
+    scrollPaneToElement(target) {
+        const pane = this.elPreviewPane;
+        pane.scrollTop += target.getBoundingClientRect().top - pane.getBoundingClientRect().top;
+    }
+    /** See `anchorPin`. */
+    pinPreviewAnchor(target) {
+        this.releaseAnchorPin();
+        if (typeof ResizeObserver === 'undefined') {
+            return;
+        }
+        const generation = this.previewGeneration;
+        const observer = new ResizeObserver(() => {
+            if (generation !== this.previewGeneration || !target.isConnected) {
+                this.releaseAnchorPin();
+                return;
+            }
+            this.scrollPaneToElement(target);
+        });
+        observer.observe(this.elPreviewContent);
+        this.anchorPin = observer;
+    }
+    releaseAnchorPin() {
+        this.anchorPin?.disconnect();
+        this.anchorPin = null;
+    }
     async openPath(path) {
         if (!this.workspace) {
             return;
@@ -5794,7 +6052,7 @@ export class MdzipWorkspaceView {
         });
         editor.focus();
     }
-    async notifyChanged(event) {
+    async notifyChanged(event, { reportBytes = true } = {}) {
         if (!this.workspace) {
             return;
         }
@@ -5806,7 +6064,13 @@ export class MdzipWorkspaceView {
             const delegatedToManifestHandler = this.options.onManifestChanged
                 && event.changes.length === 1
                 && event.changes[0] === 'manifest';
-            if (this.options.onChanged && !delegatedToManifestHandler) {
+            // Opening another path changes nothing in the archive, so there are no
+            // new bytes to report. Exporting anyway rebuilt the whole archive on
+            // every navigation when opened without archiveBytes — reading every
+            // lazy document's text first (752 host round-trips on a 153MB archive,
+            // which starved the one read the user actually asked for).
+            const selectionOnly = event.changes.every((change) => change === 'selection');
+            if (this.options.onChanged && reportBytes && !delegatedToManifestHandler && !selectionOnly) {
                 const bytes = await this.workspace.exportBytes();
                 this.options.onChanged(bytes, snapshot);
             }
@@ -6736,325 +7000,325 @@ function formatMetadataValue(value) {
     }
     return 'Not available';
 }
-const SHELL_HTML = `
-<section class="mdzip-root">
-  <div class="document-strip" data-ref="document-strip" hidden>
-    <button type="button" class="title-button" data-ref="title-btn"></button>
-    <button type="button" class="document-info-button" data-ref="document-info-btn"
-      title="Document information" aria-label="Document information">
-      ${INFO_ICON_HTML}
-    </button>
-  </div>
-
-  <header class="toolbar" data-ref="toolbar" hidden>
-    <div class="toolbar-start">
-      <div class="toolbar-left">
-        <button type="button" class="icon-toggle nav-toggle" data-ref="nav-btn" title="Toggle contents" aria-label="Toggle contents">
-          ${NAV_TOGGLE_ICON_HTML}
-        </button>
-      </div>
-
-      <div class="edit-toolbar" data-ref="edit-toolbar" role="toolbar" aria-label="Markdown formatting">
-        <div class="edit-toolbar-group">
-          <button type="button" data-format="bold" data-format-control="bold" title="Bold" aria-label="Bold">${BOLD_ICON_HTML}</button>
-          <button type="button" data-format="italic" data-format-control="italic" title="Italic" aria-label="Italic">${ITALIC_ICON_HTML}</button>
-          <button type="button" data-format="strike" data-format-control="strikethrough" title="Strikethrough" aria-label="Strikethrough">${STRIKE_ICON_HTML}</button>
-          <div class="format-menu" data-format-control="headings">
-            <button type="button" class="format-menu-toggle" data-format-menu-toggle
-              aria-label="Heading" aria-haspopup="menu" aria-expanded="false">
-              ${HEADING_ICON_HTML}${CHEVRON_ICON_HTML}
-            </button>
-            <div class="format-menu-popover" data-format-menu role="menu" aria-label="Heading level" hidden>
-              <button type="button" role="menuitem" data-format="paragraph">Paragraph</button>
-              <button type="button" role="menuitem" data-format="heading-1" data-heading-level="1"><strong>H1</strong> Heading 1</button>
-              <button type="button" role="menuitem" data-format="heading-2" data-heading-level="2"><strong>H2</strong> Heading 2</button>
-              <button type="button" role="menuitem" data-format="heading-3" data-heading-level="3"><strong>H3</strong> Heading 3</button>
-              <button type="button" role="menuitem" data-format="heading-4" data-heading-level="4"><strong>H4</strong> Heading 4</button>
-              <button type="button" role="menuitem" data-format="heading-5" data-heading-level="5"><strong>H5</strong> Heading 5</button>
-              <button type="button" role="menuitem" data-format="heading-6" data-heading-level="6"><strong>H6</strong> Heading 6</button>
-            </div>
-          </div>
-        </div>
-        <span class="edit-toolbar-divider" aria-hidden="true"></span>
-        <div class="edit-toolbar-group">
-          <button type="button" data-format="bullet-list" data-format-control="bulletList" title="Bulleted list" aria-label="Bulleted list">${BULLET_LIST_ICON_HTML}</button>
-          <button type="button" data-format="ordered-list" data-format-control="orderedList" title="Numbered list" aria-label="Numbered list">${ORDERED_LIST_ICON_HTML}</button>
-          <div class="format-menu" data-format-control="code">
-            <button type="button" class="format-menu-toggle" data-format-menu-toggle
-              aria-label="Code" aria-haspopup="menu" aria-expanded="false">
-              ${CODE_ICON_HTML}${CHEVRON_ICON_HTML}
-            </button>
-            <div class="format-menu-popover" data-format-menu role="menu" aria-label="Code format" hidden>
-              <button type="button" role="menuitem" data-format="code" data-code-kind="inline">Inline code</button>
-              <button type="button" role="menuitem" data-format="code-block" data-code-kind="block">Code block</button>
-            </div>
-          </div>
-          <button type="button" data-format="quote" data-format-control="blockquote" title="Blockquote" aria-label="Blockquote">${QUOTE_ICON_HTML}</button>
-          <button type="button" data-format="line-break" data-format-control="lineBreak" title="Line break" aria-label="Line break">${LINE_BREAK_ICON_HTML}</button>
-        </div>
-        <span class="edit-toolbar-divider" aria-hidden="true"></span>
-        <div class="edit-toolbar-group">
-          <button type="button" data-format="link" data-format-control="link" title="Link" aria-label="Link">${LINK_ICON_HTML}</button>
-          <button type="button" data-format="image" data-format-control="image" title="Image" aria-label="Image">${IMAGE_FORMAT_ICON_HTML}</button>
-          <input type="file" data-ref="image-input" accept="image/*" hidden />
-        </div>
-      </div>
-    </div>
-
-    <div class="toolbar-buttons view-mode-toggle-group" data-ref="layout-controls" role="group" aria-label="Editor layout">
-      <button type="button" class="icon-toggle view-mode-toggle" data-ref="source-btn" title="Edit" aria-label="Edit" aria-pressed="false">
-        <span class="commandbar-flex-container" data-ref="source-icon">${SOURCE_EDIT_ICON_HTML}</span>
-      </button>
-      <button type="button" class="icon-toggle view-mode-toggle" data-ref="split-btn" title="Split" aria-label="Split" aria-pressed="false">
-        <span class="commandbar-flex-container">
-          ${SPLIT_ICON_HTML}
-        </span>
-      </button>
-      <button type="button" class="icon-toggle view-mode-toggle" data-ref="preview-btn" title="View" aria-label="View" aria-pressed="false">
-        <span class="commandbar-flex-container">
-          ${PREVIEW_ICON_HTML}
-        </span>
-      </button>
-    </div>
-
-    <div class="toolbar-controls" data-ref="toolbar-controls">
-      <button type="button" class="icon-toggle" data-ref="search-btn" title="Find/replace (Mod-F)" aria-label="Find/replace">
-        ${SEARCH_ICON_HTML}
-      </button>
-      <button type="button" class="icon-toggle" data-ref="save-btn" title="Save" aria-label="Save">
-        ${SAVE_ICON_HTML}
-      </button>
-      <button type="button" class="icon-toggle zoom-toggle" data-ref="zoom-btn" title="Zoom controls" aria-label="Zoom controls">
-        ${ZOOM_ICON_HTML}
-      </button>
-      <div class="theme-toggle-group" data-ref="theme-controls" role="group" aria-label="Color scheme">
-        <button type="button" class="icon-toggle theme-toggle" data-ref="dark-theme-btn"
-          title="Dark mode" aria-label="Dark mode" aria-pressed="false">
-          ${DARK_THEME_ICON_HTML}
-        </button>
-        <button type="button" class="icon-toggle theme-toggle" data-ref="light-theme-btn"
-          title="Light mode" aria-label="Light mode" aria-pressed="false">
-          ${LIGHT_THEME_ICON_HTML}
-        </button>
-      </div>
-      <div class="zoom-popover" data-ref="zoom-popover" hidden role="group" aria-label="Zoom">
-        <span class="zoom-level" data-ref="zoom-level">100%</span>
-        <span class="zoom-stepper">
-          <button type="button" data-action="zoom-out" title="Zoom out" aria-label="Zoom out">-</button>
-          <button type="button" data-action="zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
-        </span>
-        <button type="button" class="zoom-reset" data-action="zoom-reset" title="Reset zoom">Reset</button>
-      </div>
-    </div>
-  </header>
-
-  <div class="workspace-shell" data-ref="workspace-shell" hidden>
-    <aside class="nav-pane" data-ref="nav-pane" aria-label="Package contents">
-      <div class="nav-tree" data-ref="nav-tree"></div>
-    </aside>
-    <div class="nav-resizer" data-ref="nav-resizer"
-      role="separator" aria-orientation="vertical" aria-label="Resize contents pane"></div>
-
-    <div class="pane-stack" data-ref="pane-stack">
-      <section class="pane edit-pane" data-ref="edit-pane">
-        <div class="editor-host" data-ref="editor-host"></div>
-      </section>
-      <div class="split-resizer" data-ref="split-resizer"
-        role="separator" aria-orientation="vertical" aria-label="Resize split panes"></div>
-      <section class="pane preview-pane" data-ref="preview-pane" tabindex="-1">
-        <article class="preview-content" data-ref="preview-content"></article>
-      </section>
-      <section class="pane entry-pane" data-ref="entry-pane"></section>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="title-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-title-dialog-heading">
-    <div class="title-dialog">
-      <h3 id="mdzip-title-dialog-heading">Set Document Title</h3>
-      <p>This is the package-level title stored in manifest.json.</p>
-      <input type="text" maxlength="120" data-ref="title-input" aria-label="Document title" />
-      <p class="title-dialog-validation" data-ref="title-validation" hidden>Title cannot be empty.</p>
-      <p>If unset, consumers may fall back to entry point, filename, or first heading.</p>
-      <div class="title-dialog-actions">
-        <button type="button" class="reset-title" data-ref="title-reset-btn">Reset</button>
-        <button type="button" data-action="cancel-title">Cancel</button>
-        <button type="button" class="save-title" data-ref="title-save-btn">Save</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="conversion-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-conversion-dialog-heading">
-    <div class="title-dialog">
-      <h3 id="mdzip-conversion-dialog-heading">Convert to MDZ?</h3>
-      <p>
-        Regular Markdown files contain only text. Convert this document to an
-        MDZ package to add images, package navigation, and document metadata.
-      </p>
-      <p>The next save will produce an .mdz file.</p>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-conversion">Cancel</button>
-        <button type="button" class="save-title" data-ref="conversion-confirm-btn">Convert</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="image-insert-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-image-insert-dialog-heading">
-    <div class="title-dialog image-insert-dialog">
-      <h3 id="mdzip-image-insert-dialog-heading">Insert Image</h3>
-      <p>Choose the Markdown inserted for this image.</p>
-      <fieldset class="image-insert-options">
-        <legend>Output</legend>
-        <label>
-          <input type="radio" name="mdzip-image-insert-mode" value="markdown"
-            data-ref="image-insert-mode-markdown" checked />
-          Markdown image
-        </label>
-        <label>
-          <input type="radio" name="mdzip-image-insert-mode" value="html"
-            data-ref="image-insert-mode-html" />
-          HTML &lt;img&gt; with sizing
-        </label>
-      </fieldset>
-      <label class="image-insert-field">
-        <span>Alt text</span>
-        <input type="text" data-ref="image-insert-alt" />
-      </label>
-      <div class="image-insert-grid">
-        <label class="image-insert-field">
-          <span>Size by</span>
-          <select data-ref="image-insert-size-mode">
-            <option value="original">Original size</option>
-            <option value="width" selected>Width</option>
-            <option value="height">Height</option>
-            <option value="percent">Percent</option>
-          </select>
-        </label>
-        <label class="image-insert-field">
-          <span>Value</span>
-          <input type="number" min="1" step="1" data-ref="image-insert-size-value" />
-        </label>
-      </div>
-      <label class="image-insert-field">
-        <span>Position</span>
-        <select data-ref="image-insert-position">
-          <option value="inline">Inline/default</option>
-          <option value="left">Left</option>
-          <option value="center">Center</option>
-          <option value="right">Right</option>
-          <option value="wrap-left">Wrap left</option>
-          <option value="wrap-right">Wrap right</option>
-        </select>
-      </label>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-image-insert">Cancel</button>
-        <button type="button" class="save-title" data-ref="image-insert-confirm-btn">Insert</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="pack-files-dialog" hidden
-    role="dialog" aria-modal="true" aria-labelledby="mdzip-pack-files-dialog-heading">
-    <div class="title-dialog pack-files-dialog">
-      <h3 id="mdzip-pack-files-dialog-heading">Package Markdown Files</h3>
-      <p>These files contain more than one Markdown document. Choose how to package them.</p>
-      <fieldset class="pack-files-options">
-        <legend>Mode</legend>
-        <label>
-          <input type="radio" name="mdzip-pack-files-mode" value="document"
-            data-ref="pack-files-mode-document" checked />
-          Document — one primary page; the rest are attached
-        </label>
-        <label>
-          <input type="radio" name="mdzip-pack-files-mode" value="project"
-            data-ref="pack-files-mode-project" />
-          Project — a set of related documents
-        </label>
-      </fieldset>
-      <label class="pack-files-field">
-        <span>Entry point</span>
-        <select data-ref="pack-files-entry"></select>
-      </label>
-      <div class="title-dialog-actions">
-        <button type="button" data-action="cancel-pack-files">Cancel</button>
-        <button type="button" class="save-title" data-ref="pack-files-confirm-btn">Package</button>
-      </div>
-    </div>
-  </div>
-
-  <div class="title-dialog-backdrop" data-ref="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="theme-toggle-group" data-ref="theme-controls" role="group" aria-label="Color scheme">
+        <button type="button" class="icon-toggle theme-toggle" data-ref="dark-theme-btn"
+          title="Dark mode" aria-label="Dark mode" aria-pressed="false">
+          ${DARK_THEME_ICON_HTML}
+        </button>
+        <button type="button" class="icon-toggle theme-toggle" data-ref="light-theme-btn"
+          title="Light mode" aria-label="Light mode" aria-pressed="false">
+          ${LIGHT_THEME_ICON_HTML}
+        </button>
+      </div>
+      <div class="zoom-popover" data-ref="zoom-popover" hidden role="group" aria-label="Zoom">
+        <span class="zoom-level" data-ref="zoom-level">100%</span>
+        <span class="zoom-stepper">
+          <button type="button" data-action="zoom-out" title="Zoom out" aria-label="Zoom out">-</button>
+          <button type="button" data-action="zoom-in" title="Zoom in" aria-label="Zoom in">+</button>
+        </span>
+        <button type="button" class="zoom-reset" data-action="zoom-reset" title="Reset zoom">Reset</button>
+      </div>
+    </div>
+  </header>
+
+  <div class="workspace-shell" data-ref="workspace-shell" hidden>
+    <aside class="nav-pane" data-ref="nav-pane" aria-label="Package contents">
+      <div class="nav-tree" data-ref="nav-tree"></div>
+    </aside>
+    <div class="nav-resizer" data-ref="nav-resizer"
+      role="separator" aria-orientation="vertical" aria-label="Resize contents pane"></div>
+
+    <div class="pane-stack" data-ref="pane-stack">
+      <section class="pane edit-pane" data-ref="edit-pane">
+        <div class="editor-host" data-ref="editor-host"></div>
+      </section>
+      <div class="split-resizer" data-ref="split-resizer"
+        role="separator" aria-orientation="vertical" aria-label="Resize split panes"></div>
+      <section class="pane preview-pane" data-ref="preview-pane" tabindex="-1">
+        <article class="preview-content" data-ref="preview-content"></article>
+      </section>
+      <section class="pane entry-pane" data-ref="entry-pane"></section>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="title-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-title-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-title-dialog-heading">Set Document Title</h3>
+      <p>This is the package-level title stored in manifest.json.</p>
+      <input type="text" maxlength="120" data-ref="title-input" aria-label="Document title" />
+      <p class="title-dialog-validation" data-ref="title-validation" hidden>Title cannot be empty.</p>
+      <p>If unset, consumers may fall back to entry point, filename, or first heading.</p>
+      <div class="title-dialog-actions">
+        <button type="button" class="reset-title" data-ref="title-reset-btn">Reset</button>
+        <button type="button" data-action="cancel-title">Cancel</button>
+        <button type="button" class="save-title" data-ref="title-save-btn">Save</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="conversion-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-conversion-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-conversion-dialog-heading">Convert to MDZ?</h3>
+      <p>
+        Regular Markdown files contain only text. Convert this document to an
+        MDZ package to add images, package navigation, and document metadata.
+      </p>
+      <p>The next save will produce an .mdz file.</p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-conversion">Cancel</button>
+        <button type="button" class="save-title" data-ref="conversion-confirm-btn">Convert</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="image-insert-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-image-insert-dialog-heading">
+    <div class="title-dialog image-insert-dialog">
+      <h3 id="mdzip-image-insert-dialog-heading">Insert Image</h3>
+      <p>Choose the Markdown inserted for this image.</p>
+      <fieldset class="image-insert-options">
+        <legend>Output</legend>
+        <label>
+          <input type="radio" name="mdzip-image-insert-mode" value="markdown"
+            data-ref="image-insert-mode-markdown" checked />
+          Markdown image
+        </label>
+        <label>
+          <input type="radio" name="mdzip-image-insert-mode" value="html"
+            data-ref="image-insert-mode-html" />
+          HTML &lt;img&gt; with sizing
+        </label>
+      </fieldset>
+      <label class="image-insert-field">
+        <span>Alt text</span>
+        <input type="text" data-ref="image-insert-alt" />
+      </label>
+      <div class="image-insert-grid">
+        <label class="image-insert-field">
+          <span>Size by</span>
+          <select data-ref="image-insert-size-mode">
+            <option value="original">Original size</option>
+            <option value="width" selected>Width</option>
+            <option value="height">Height</option>
+            <option value="percent">Percent</option>
+          </select>
+        </label>
+        <label class="image-insert-field">
+          <span>Value</span>
+          <input type="number" min="1" step="1" data-ref="image-insert-size-value" />
+        </label>
+      </div>
+      <label class="image-insert-field">
+        <span>Position</span>
+        <select data-ref="image-insert-position">
+          <option value="inline">Inline/default</option>
+          <option value="left">Left</option>
+          <option value="center">Center</option>
+          <option value="right">Right</option>
+          <option value="wrap-left">Wrap left</option>
+          <option value="wrap-right">Wrap right</option>
+        </select>
+      </label>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-image-insert">Cancel</button>
+        <button type="button" class="save-title" data-ref="image-insert-confirm-btn">Insert</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="pack-files-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-pack-files-dialog-heading">
+    <div class="title-dialog pack-files-dialog">
+      <h3 id="mdzip-pack-files-dialog-heading">Package Markdown Files</h3>
+      <p>These files contain more than one Markdown document. Choose how to package them.</p>
+      <fieldset class="pack-files-options">
+        <legend>Mode</legend>
+        <label>
+          <input type="radio" name="mdzip-pack-files-mode" value="document"
+            data-ref="pack-files-mode-document" checked />
+          Document — one primary page; the rest are attached
+        </label>
+        <label>
+          <input type="radio" name="mdzip-pack-files-mode" value="project"
+            data-ref="pack-files-mode-project" />
+          Project — a set of related documents
+        </label>
+      </fieldset>
+      <label class="pack-files-field">
+        <span>Entry point</span>
+        <select data-ref="pack-files-entry"></select>
+      </label>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-pack-files">Cancel</button>
+        <button type="button" class="save-title" data-ref="pack-files-confirm-btn">Package</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="copy-render-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-copy-render-dialog-heading">
+    <div class="title-dialog copy-render-dialog">
+      <h3 id="mdzip-copy-render-dialog-heading" data-ref="copy-render-heading">Copying document...</h3>
+      <div data-ref="copy-render-progress-section">
+        <p data-ref="copy-render-progress-text">Rendering the full document...</p>
+        <div class="copy-render-progress-track">
+          <div class="copy-render-progress-bar" data-ref="copy-render-progress-bar"></div>
+        </div>
+      </div>
+      <p data-ref="copy-render-ready-text" hidden>
+        The document is ready. Browsers only allow a clipboard write right after a click, so this needs one more —
+        click Copy to finish.
+      </p>
+      <p data-ref="copy-render-done-text" hidden></p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-copy-render" data-ref="copy-render-cancel-btn">Cancel</button>
+        <button type="button" data-action="cancel-copy-ready" data-ref="copy-render-ready-cancel-btn" hidden>Cancel</button>
+        <button type="button" class="save-title" data-action="confirm-copy-ready" data-ref="copy-render-confirm-btn" hidden>Copy</button>
+        <button type="button" class="save-title" data-action="dismiss-copy-render" data-ref="copy-render-dismiss-btn" hidden>Dismiss</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="metadata-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-metadata-dialog-heading">
+    <div class="title-dialog metadata-dialog">
+      <h3 id="mdzip-metadata-dialog-heading">Document Information</h3>
+      <dl data-ref="metadata-list"></dl>
+      <h4>Libraries</h4>
+      <dl data-ref="library-list"></dl>
+      <div class="title-dialog-actions">
+        <button type="button" class="save-title" data-action="close-metadata">Close</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="name-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-name-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-name-dialog-heading" data-ref="name-dialog-heading">New Markdown File</h3>
+      <input type="text" maxlength="260" data-ref="name-input" aria-label="File name" />
+      <p class="title-dialog-validation" data-ref="name-validation" hidden></p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-name">Cancel</button>
+        <button type="button" class="save-title" data-ref="name-confirm-btn">Create</button>
+      </div>
+    </div>
+  </div>
+
+  <div class="title-dialog-backdrop" data-ref="delete-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-delete-dialog-heading">
+    <div class="title-dialog">
+      <h3 id="mdzip-delete-dialog-heading">Delete File?</h3>
+      <p data-ref="delete-dialog-text"></p>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-delete">Cancel</button>
+        <button type="button" class="danger-action" data-ref="delete-confirm-btn">Delete</button>
+      </div>
+    </div>
+  </div>
+
+  <input type="file" data-ref="replace-input" hidden />
+
+  <div class="nav-context-menu" data-ref="nav-menu" hidden role="menu"></div>
+
+  <div class="mdzip-tooltip" data-ref="tooltip" role="tooltip" hidden></div>
+
+  <div class="mdzip-copy-toast" data-ref="copy-toast" role="status" aria-live="polite" hidden></div>
+
+  <p class="mdzip-empty" data-ref="empty-state">No MDZip workspace loaded.</p>
+</section>
 `;
 //# sourceMappingURL=view.js.map