@mdzip/editor 1.4.4 → 1.4.5

package/dist/view.js

@@ -12,9 +12,9 @@ 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, resolveMdzipArchiveLinkTarget, renderMdzipPreviewHtml } from './workspace-view.js';
+import { buildMdzipNavTree, canEditMdzipPath, escapeHtml, isOrphanedMdzipAsset, mdzipEntryIconKind, isMdzipManifestPath, isMdzipWorkspaceRelativeLink, resolveMdzipArchiveLinkTarget, renderMdzipPreviewHtml } from './workspace-view.js';
 import { escapeMarkdownImageAlt, findImageReferenceAtOffset, formatImageEditMarkdown } from './image-edit.js';
-import { MdzipRenderingService, defaultSafeMarkdownRenderer, groupTokensIntoChunks, chunkSourceKey, tokenEmbedsImage, tokenIsHeading } from './rendering.js';
+import { MdzipRenderingService, defaultSafeMarkdownRenderer, groupTokensIntoChunks, chunkSourceKey, collectMdzipHeadingIds, MDZIP_HEADING_ID_PREFIX, tokenEmbedsImage, tokenIsHeading } from './rendering.js';
 import { mdzipFrontMatterExtension } from './front-matter-extension.js';
 import { WORKSPACE_CSS } from './view-css.js';
 const STYLE_ATTR = 'data-mdzip-ws-styles';
@@ -746,19 +746,19 @@ depth = 0) {
                 : isImageFile(node.entry.path)
                     ? IMAGE_ICON_HTML
                     : FILE_ICON_HTML;
-        const orphanBtnHtml = isOrphaned && options.allowOrphanActions ? `
-      <span class="nav-orphan-button" role="button" tabindex="0"
-        title="Orphaned asset" aria-label="Orphaned asset actions"
-        data-orphan-path="${safePath}">
-        ${ORPHAN_ICON_HTML}
+        const orphanBtnHtml = isOrphaned && options.allowOrphanActions ? `
+      <span class="nav-orphan-button" role="button" tabindex="0"
+        title="Orphaned asset" aria-label="Orphaned asset actions"
+        data-orphan-path="${safePath}">
+        ${ORPHAN_ICON_HTML}
       </span>` : '';
         const draggable = options.allowDrag && !isManifest;
-        return `<button type="button" class="${classes}" title="${title}"
-      data-nav-path="${safePath}" data-orphan="${isOrphaned ? 'true' : ''}"${draggable ? ' draggable="true"' : ''}>
-      ${guides}<span class="nav-caret"></span>
-      <span class="nav-file-icon ${iconKind}">${iconHtml}</span>
-      ${orphanBtnHtml}
-      <span class="nav-label">${safeName}</span>
+        return `<button type="button" class="${classes}" title="${title}"
+      data-nav-path="${safePath}" data-orphan="${isOrphaned ? 'true' : ''}"${draggable ? ' draggable="true"' : ''}>
+      ${guides}<span class="nav-caret"></span>
+      <span class="nav-file-icon ${iconKind}">${iconHtml}</span>
+      ${orphanBtnHtml}
+      <span class="nav-label">${safeName}</span>
     </button>`;
     }
     const childTrail = depth === 0 ? [] : [...trail, !isLast];
@@ -766,14 +766,14 @@ depth = 0) {
         .map((child, index) => renderNavNode(child, state, options, childTrail, index === node.children.length - 1, depth + 1))
         .join('');
     const pending = options.pendingFolders.has(node.path.toLowerCase());
-    return `<details class="nav-directory${pending ? ' pending-folder' : ''}" open data-nav-dir="${escapeHtml(node.path)}">
-    <summary${pending ? ` title="${escapeHtml(node.path)} — not saved until it contains a file"` : ''}>
-      ${guides}<span class="nav-caret" aria-hidden="true"></span>
-      <span class="nav-folder-icon closed">${FOLDER_CLOSED_ICON_HTML}</span>
-      <span class="nav-folder-icon open">${FOLDER_OPEN_ICON_HTML}</span>
-      <span class="nav-label">${escapeHtml(node.name)}</span>
-    </summary>
-    <div class="nav-directory-children">${children}</div>
+    return `<details class="nav-directory${pending ? ' pending-folder' : ''}" open data-nav-dir="${escapeHtml(node.path)}">
+    <summary${pending ? ` title="${escapeHtml(node.path)} — not saved until it contains a file"` : ''}>
+      ${guides}<span class="nav-caret" aria-hidden="true"></span>
+      <span class="nav-folder-icon closed">${FOLDER_CLOSED_ICON_HTML}</span>
+      <span class="nav-folder-icon open">${FOLDER_OPEN_ICON_HTML}</span>
+      <span class="nav-label">${escapeHtml(node.name)}</span>
+    </summary>
+    <div class="nav-directory-children">${children}</div>
   </details>`;
 }
 // Inserts view-local pending (not yet saved) folders into the nav tree so they
@@ -1002,6 +1002,10 @@ export class MdzipWorkspaceView {
         // cold-start, progressive, eager, mermaid-triggered or not) already calls
         // once its content is back in the DOM.
         this.pendingPreviewScrollRestore = null;
+        // A #fragment from a link into another document (`other.md#heading`), held
+        // until that document's preview has mounted so there is a heading to scroll
+        // to. Consumed by firePreviewRendered.
+        this.pendingAnchorFragment = null;
         // Guards syncScrollToPreviewBottom against overlapping drains: set to the
         // chunkedRenderState generation currently being force-drained, null when
         // none is in flight. A second bottom-edge sync that arrives mid-drain
@@ -2220,7 +2224,7 @@ export class MdzipWorkspaceView {
         let cursor = middleStart;
         let mountedRoots = [];
         while (cursor < middleEnd) {
-            const batch = await this.renderAndMountChunkBatch(records, cursor, context, generation, insertBeforeNode);
+            const batch = await this.renderAndMountChunkBatch(records, cursor, context, generation, insertBeforeNode, middleEnd);
             if (generation !== this.previewGeneration || context.signal.aborted)
                 return;
             if (batch.cursor === cursor)
@@ -2390,7 +2394,12 @@ export class MdzipWorkspaceView {
      * included here; see {@link mountChunkBatch} and
      * {@link drainRemainingChunks} for the two different ways callers pace it.
      */
-    async renderAndMountChunkBatch(records, startCursor, context, generation, insertBeforeNode = null) {
+    async renderAndMountChunkBatch(records, startCursor, context, generation, insertBeforeNode = null, 
+    // Exclusive upper bound. Reconciliation mounts just its replacement
+    // "middle"; the records after it are surviving suffix chunks that are
+    // already in the DOM, and running on into them would mount each a second
+    // time (orphaning the first copy's root, which nothing would ever remove).
+    endCursor = records.length) {
         const BATCH_CHAR_BUDGET = 4000;
         const BATCH_TIME_BUDGET_MS = 10;
         const clock = this.elPreviewContent.ownerDocument.defaultView?.performance ?? performance;
@@ -2399,7 +2408,7 @@ export class MdzipWorkspaceView {
         let renderedChars = 0;
         const mountedRoots = [];
         const batchStartCursor = startCursor;
-        while (cursor < records.length
+        while (cursor < Math.min(endCursor, records.length)
             && renderedChars < BATCH_CHAR_BUDGET
             && (mountedRoots.length === 0 || clock.now() - batchStart < BATCH_TIME_BUDGET_MS)) {
             if (generation !== this.previewGeneration || context.signal.aborted)
@@ -2798,6 +2807,7 @@ export class MdzipWorkspaceView {
             return;
         }
         this.restorePendingPreviewScroll(generation);
+        this.flushPendingAnchorSoon();
         try {
             this.options.onPreviewRendered?.(snapshot);
         }
@@ -3819,7 +3829,27 @@ export class MdzipWorkspaceView {
             const clampedTop = Math.max(margin, Math.min(naturalTop, win.innerHeight - margin - submenu.offsetHeight));
             submenu.style.top = `${clampedTop - rect.top}px`;
         });
+        // Chromium treats a Shift+mousedown as "extend the selection", right
+        // button included, so Shift+right-click would first stretch the selection
+        // from the caret to the click — and the native menu reports no misspelled
+        // word (hence no suggestions) unless the selection is collapsed or just
+        // the word. Cancelling that mousedown leaves the selection alone and lets
+        // the browser resolve the word under the pointer itself. Capture phase so
+        // it runs before CodeMirror's own handlers; focus is restored by hand
+        // since the cancelled mousedown no longer moves it.
+        this.elEditorHost.addEventListener('mousedown', (e) => {
+            if (e.button === 2 && e.shiftKey) {
+                e.preventDefault();
+                this.cmEditor?.focus();
+            }
+        }, true);
         this.elEditorHost.addEventListener('contextmenu', (e) => {
+            // Shift+right-click bypasses our own formatting menu so the host's
+            // native context menu (spell-check suggestions, etc.) shows instead —
+            // without this, preventDefault() below suppresses it unconditionally.
+            if (e.shiftKey) {
+                return;
+            }
             if (!this.controlPolicy.contextMenu.editor) {
                 return;
             }
@@ -3927,12 +3957,24 @@ export class MdzipWorkspaceView {
             if (!link || !snapshot) {
                 return;
             }
-            const targetPath = resolveMdzipArchiveLinkTarget(link.getAttribute('href') ?? '', snapshot.currentPath, snapshot.content.paths);
-            if (!targetPath) {
+            const href = link.getAttribute('href') ?? '';
+            if (href.startsWith('#')) {
+                event.preventDefault();
+                void this.scrollPreviewToAnchor(href.slice(1));
                 return;
             }
-            event.preventDefault();
-            void this.openPath(targetPath);
+            const targetPath = resolveMdzipArchiveLinkTarget(href, snapshot.currentPath, snapshot.content.paths);
+            if (targetPath) {
+                event.preventDefault();
+                const hashIndex = href.indexOf('#');
+                const fragment = hashIndex >= 0 ? href.slice(hashIndex + 1) : '';
+                void this.openPathAndScrollToAnchor(targetPath, fragment);
+                return;
+            }
+            if (this.options.onUnresolvedLinkClick && isMdzipWorkspaceRelativeLink(href)) {
+                event.preventDefault();
+                this.options.onUnresolvedLinkClick(href, snapshot);
+            }
         });
         this.elRoot.addEventListener('pointerover', (event) => this.handleTooltipPointer(event));
         this.elRoot.addEventListener('pointerout', (event) => {
@@ -3966,6 +4008,99 @@ export class MdzipWorkspaceView {
             element.removeAttribute('title');
         });
     }
+    async openPathAndScrollToAnchor(path, fragment) {
+        const generationBefore = this.previewGeneration;
+        this.pendingAnchorFragment = fragment || null;
+        await this.openPath(path);
+        // No new render started (already on that document, or the open failed):
+        // nothing will call firePreviewRendered, so apply the anchor now.
+        if (this.pendingAnchorFragment !== null && this.previewGeneration === generationBefore) {
+            const pending = this.pendingAnchorFragment;
+            this.pendingAnchorFragment = null;
+            await this.scrollPreviewToAnchor(pending);
+        }
+    }
+    // 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.
+    flushPendingAnchorSoon() {
+        if (this.pendingAnchorFragment === null) {
+            return;
+        }
+        const generation = this.previewGeneration;
+        requestAnimationFrame(() => {
+            if (generation !== this.previewGeneration || this.pendingAnchorFragment === null) {
+                return;
+            }
+            const pending = this.pendingAnchorFragment;
+            this.pendingAnchorFragment = null;
+            void this.scrollPreviewToAnchor(pending);
+        });
+    }
+    findPreviewAnchor(fragment) {
+        const wanted = new Set([fragment, MDZIP_HEADING_ID_PREFIX + fragment]);
+        const wantedLower = new Set([...wanted].map((value) => value.toLowerCase()));
+        let caseInsensitiveMatch = null;
+        for (const element of Array.from(this.elPreviewContent.querySelectorAll('[id],[name]'))) {
+            for (const value of [element.getAttribute('id'), element.getAttribute('name')]) {
+                if (!value)
+                    continue;
+                if (wanted.has(value))
+                    return element;
+                if (!caseInsensitiveMatch && wantedLower.has(value.toLowerCase()))
+                    caseInsensitiveMatch = element;
+            }
+        }
+        return caseInsensitiveMatch;
+    }
+    recordMayContainAnchor(record, fragment) {
+        const lower = fragment.toLowerCase();
+        if (collectMdzipHeadingIds(record.tokens).some((id) => id.toLowerCase() === lower)) {
+            return true;
+        }
+        // An explicit <a id="x"> / <a name="x"> anchor written in the source.
+        const escaped = fragment.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        return new RegExp(`(?:id|name)\\s*=\\s*["']${escaped}["']`, 'i').test(record.key);
+    }
+    /**
+     * Scrolls the preview to the heading (or explicit id/name anchor) a
+     * `#fragment` link names. Under progressive rendering the target may sit in
+     * a chunk that hasn't been mounted yet, so this mounts everything up to and
+     * including that chunk first. Returns whether an anchor was found.
+     */
+    async scrollPreviewToAnchor(rawFragment) {
+        let fragment = rawFragment;
+        try {
+            fragment = decodeURIComponent(rawFragment);
+        }
+        catch {
+            // Malformed escape — use it as written.
+        }
+        let target = fragment ? this.findPreviewAnchor(fragment) : null;
+        const pending = this.chunkedRenderState;
+        if (!target && fragment && pending && pending.cursor < pending.records.length) {
+            const index = pending.records.findIndex((record, i) => i >= pending.cursor && this.recordMayContainAnchor(record, fragment));
+            if (index >= 0) {
+                await this.drainRemainingChunks(pending, () => { }, new AbortController().signal, index);
+                const remaining = this.chunkedRenderState;
+                if (remaining && remaining.generation === pending.generation && !remaining.sentinelHandle
+                    && remaining.cursor < remaining.records.length) {
+                    this.armChunkSentinel(remaining.records, remaining.cursor, remaining.context, remaining.generation, remaining.animateImageHydration);
+                }
+                target = this.findPreviewAnchor(fragment);
+            }
+        }
+        const pane = this.elPreviewPane;
+        if (!target) {
+            // `#` and `#top` mean the top of the document, as in a browser.
+            if (!fragment || fragment.toLowerCase() === 'top') {
+                pane.scrollTop = 0;
+            }
+            return false;
+        }
+        pane.scrollTop += target.getBoundingClientRect().top - pane.getBoundingClientRect().top;
+        return true;
+    }
     async openPath(path) {
         if (!this.workspace) {
             return;
@@ -4733,7 +4868,7 @@ export class MdzipWorkspaceView {
         // spelling suggestions live — there's no API to read the browser's
         // dictionary suggestions into a custom menu. Point at the escape hatch
         // instead of silently dropping the feature.
-        if (editable) {
+        if (editable && this.options.showSpellingSuggestionsHint !== false) {
             groups.push([{
                     action: 'editor-spelling-suggestions-hint',
                     label: 'Spelling Suggestions',
@@ -5256,7 +5391,7 @@ export class MdzipWorkspaceView {
      * pass over every image at the end avoids the pile-up entirely, without
      * making Copy All wait on it.
      */
-    async drainRemainingChunks(state, onProgress, signal) {
+    async drainRemainingChunks(state, onProgress, signal, stopAfterRecordIndex) {
         const { records, context, generation, animateImageHydration } = state;
         // Draining is instead of the scroll-driven continuation, not alongside
         // it — tearing down any armed sentinel first stops the two from racing
@@ -5271,7 +5406,9 @@ export class MdzipWorkspaceView {
         }
         const allPending = [];
         try {
-            while (this.chunkedRenderState?.generation === generation && this.chunkedRenderState.cursor < records.length) {
+            while (this.chunkedRenderState?.generation === generation
+                && this.chunkedRenderState.cursor < records.length
+                && (stopAfterRecordIndex === undefined || this.chunkedRenderState.cursor <= stopAfterRecordIndex)) {
                 if (signal.aborted || generation !== this.previewGeneration || context.signal.aborted)
                     return;
                 const cursor = this.chunkedRenderState.cursor;
@@ -6587,325 +6724,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