@mdzip/editor 1.3.18 → 1.3.20

package/dist/view.js

@@ -5,8 +5,9 @@ import { closeSearchPanel, openSearchPanel, search, searchKeymap } from '@codemi
 import { Compartment, EditorState } from '@codemirror/state';
 import { Decoration, EditorView, MatchDecorator, ViewPlugin, dropCursor, keymap, lineNumbers } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
-import { Bold, Check, ChevronDown, ChevronRight, ClipboardPaste, ClipboardType, Code, Columns2, Copy, Eraser, Eye, File, FileBraces, FileImage, Folder, FolderOpen, Hash, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlighter, ImagePlus, Info, Italic, Link2Off, Link, List, ListOrdered, CornerDownLeft, Moon, PackagePlus, PanelLeft, Pilcrow, Quote, Save, Scissors, Search, SquareCode, SquarePen, Strikethrough, Sun, TextSelect, ZoomIn } from 'lucide';
+import { Bold, Check, ChevronDown, ChevronRight, ClipboardPaste, ClipboardType, Code, Columns2, Copy, Eraser, Eye, File, FileBraces, FileImage, Folder, FolderOpen, Hash, Heading1, Heading2, Heading3, Heading4, Heading5, Heading6, Highlighter, ImagePlus, Info, Italic, Link2Off, Link, List, ListOrdered, CornerDownLeft, Moon, PackagePlus, PanelLeft, Pilcrow, Quote, Save, Scissors, Search, SpellCheck, SquareCode, SquarePen, Strikethrough, Sun, TextSelect, ZoomIn } from 'lucide';
 import { browserClipboardHasImage, readBrowserClipboardImage } from './browser.js';
+import { buildPackedArchiveBytes, isMarkdownArchivePath, resolveMarkdownEntryPoint } from './archive-utils.js';
 import { MdzipAssetSession, mdzipArchiveSourceId, sniffImageSize } from './asset-cache.js';
 import { MD_MARKDOWN_ICON } from './icons/md-markdown.js';
 import { MDZIP_RUNTIME_LIBRARIES } from './library-info.js';
@@ -71,6 +72,7 @@ const MENU_COPY_ICON_HTML = lucideIcon(Copy, MENU_ICON_CLASS);
 const MENU_PASTE_ICON_HTML = lucideIcon(ClipboardPaste, MENU_ICON_CLASS);
 const MENU_PASTE_PLAIN_ICON_HTML = lucideIcon(ClipboardType, MENU_ICON_CLASS);
 const MENU_SELECT_ALL_ICON_HTML = lucideIcon(TextSelect, MENU_ICON_CLASS);
+const MENU_SPELLCHECK_ICON_HTML = lucideIcon(SpellCheck, MENU_ICON_CLASS);
 const MENU_BOLD_ICON_HTML = lucideIcon(Bold, MENU_ICON_CLASS);
 const MENU_ITALIC_ICON_HTML = lucideIcon(Italic, MENU_ICON_CLASS);
 const MENU_STRIKE_ICON_HTML = lucideIcon(Strikethrough, MENU_ICON_CLASS);
@@ -137,7 +139,8 @@ function renderContextMenuItem(item) {
     const shortcut = item.shortcut
         ? `<span class="nav-menu-shortcut">${escapeHtml(item.shortcut)}</span>`
         : '';
-    return `<button type="button" role="menuitem" data-menu-action="${escapeHtml(item.action)}">${icon}${label}${shortcut}</button>`;
+    const disabledAttrs = item.disabled ? ' disabled aria-disabled="true"' : '';
+    return `<button type="button" role="menuitem" data-menu-action="${escapeHtml(item.action)}"${disabledAttrs}>${icon}${label}${shortcut}</button>`;
 }
 function renderContextMenuItems(items) {
     return items
@@ -150,6 +153,10 @@ const ALL_LAYOUT_CONTROLS = {
     split: true,
     preview: true
 };
+const ALL_CONTEXT_MENU_CONTROLS = {
+    editor: true,
+    preview: true
+};
 const ALL_FORMATTING_CONTROLS = {
     bold: true,
     italic: true,
@@ -186,6 +193,7 @@ const CONTROL_PRESETS = {
         title: { visible: false, editable: false },
         layout: { source: false, split: false, preview: false },
         formatting: { ...NO_FORMATTING_CONTROLS },
+        contextMenu: { ...ALL_CONTEXT_MENU_CONTROLS },
         lineNumbers: false,
         save: false,
         zoom: false,
@@ -202,6 +210,7 @@ const CONTROL_PRESETS = {
         title: { visible: true, editable: false },
         layout: { ...ALL_LAYOUT_CONTROLS },
         formatting: { ...NO_FORMATTING_CONTROLS },
+        contextMenu: { ...ALL_CONTEXT_MENU_CONTROLS },
         lineNumbers: true,
         save: false,
         zoom: true,
@@ -218,6 +227,7 @@ const CONTROL_PRESETS = {
         title: { visible: true, editable: true },
         layout: { ...ALL_LAYOUT_CONTROLS },
         formatting: { ...ALL_FORMATTING_CONTROLS },
+        contextMenu: { ...ALL_CONTEXT_MENU_CONTROLS },
         lineNumbers: true,
         save: true,
         zoom: true,
@@ -234,6 +244,7 @@ const CONTROL_PRESETS = {
         title: { visible: true, editable: true },
         layout: { ...ALL_LAYOUT_CONTROLS },
         formatting: { ...ALL_FORMATTING_CONTROLS },
+        contextMenu: { ...ALL_CONTEXT_MENU_CONTROLS },
         lineNumbers: true,
         save: false,
         zoom: true,
@@ -267,7 +278,8 @@ export function resolveMdzipControlPolicy(controls) {
         preset,
         title: resolveTitleControls(base.title, controls.title),
         layout: resolveLayoutControls(base.layout, controls.layout),
-        formatting: resolveFormattingControls(base.formatting, controls.formatting)
+        formatting: resolveFormattingControls(base.formatting, controls.formatting),
+        contextMenu: resolveContextMenuControls(base.contextMenu, controls.contextMenu)
     };
 }
 function defaultLayoutForPolicy(policy) {
@@ -284,7 +296,8 @@ function cloneResolvedControlPolicy(policy) {
         formatting: {
             ...policy.formatting,
             headings: [...policy.formatting.headings]
-        }
+        },
+        contextMenu: { ...policy.contextMenu }
     };
 }
 function resolveTitleControls(base, override) {
@@ -308,6 +321,21 @@ function resolveLayoutControls(base, override) {
             : base;
     return { ...resolvedBase, ...controls };
 }
+function resolveContextMenuControls(base, override) {
+    if (typeof override === 'boolean') {
+        return { editor: override, preview: override };
+    }
+    if (!override) {
+        return { ...base };
+    }
+    const { enabled, ...controls } = override;
+    const resolvedBase = enabled === false
+        ? { editor: false, preview: false }
+        : enabled === true
+            ? { ...ALL_CONTEXT_MENU_CONTROLS }
+            : base;
+    return { ...resolvedBase, ...controls };
+}
 function resolveFormattingControls(base, override) {
     if (typeof override === 'boolean') {
         return override
@@ -492,7 +520,10 @@ const hardBreakMarkerHighlight = ViewPlugin.fromClass(class {
 // the name to be '>' directly, which a URL's ':' never satisfies.
 const htmlTagMarkerMatcher = new MatchDecorator({
     regexp: /<\/?(?!br\b)[a-zA-Z][a-zA-Z0-9-]*(?:\s[^<>]*)?\/?>/gi,
-    decoration: Decoration.mark({ class: 'mdzip-hard-break-marker' })
+    // spellcheck="false" on the wrapping span opts this range out of the
+    // container-wide spellcheck attribute — tag/attribute names (img, src,
+    // align, citation, ...) aren't prose and shouldn't get underlined.
+    decoration: Decoration.mark({ class: 'mdzip-hard-break-marker', attributes: { spellcheck: 'false' } })
 });
 const htmlTagMarkerHighlight = ViewPlugin.fromClass(class {
     constructor(view) {
@@ -683,6 +714,12 @@ export class MdzipWorkspaceView {
         this.titleDraft = '';
         this.conversionAction = null;
         this.imageInsertDialogState = null;
+        // Promise-based, like imageInsertDialogState — packFilesAsWorkspace is an
+        // explicit awaited call building a brand-new archive from an
+        // already-captured file list, so (unlike conversionAction's fire-and-forget
+        // trigger) there's no "currently open document" to race against and no
+        // de-dupe/staleness guard is needed.
+        this.packFilesDialogState = null;
         this.navPaneWidth = 280;
         this.splitRatio = 0.5;
         this.resizing = false;
@@ -811,6 +848,11 @@ export class MdzipWorkspaceView {
         this.elImageInsertSizeValueInput = q('[data-ref="image-insert-size-value"]');
         this.elImageInsertPositionSelect = q('[data-ref="image-insert-position"]');
         this.elImageInsertConfirmBtn = q('[data-ref="image-insert-confirm-btn"]');
+        this.elPackFilesDialog = q('[data-ref="pack-files-dialog"]');
+        this.elPackFilesModeDocument = q('[data-ref="pack-files-mode-document"]');
+        this.elPackFilesModeProject = q('[data-ref="pack-files-mode-project"]');
+        this.elPackFilesEntrySelect = q('[data-ref="pack-files-entry"]');
+        this.elPackFilesConfirmBtn = q('[data-ref="pack-files-confirm-btn"]');
         this.elNavMenu = q('[data-ref="nav-menu"]');
         this.elNameDialog = q('[data-ref="name-dialog"]');
         this.elNameDialogHeading = q('[data-ref="name-dialog-heading"]');
@@ -1105,6 +1147,7 @@ export class MdzipWorkspaceView {
     destroy() {
         this.conversionDocumentGeneration += 1;
         this.resolveImageInsertDialog(null);
+        this.resolvePackFilesDialog(null);
         try {
             this.unsub?.();
         }
@@ -1161,6 +1204,14 @@ export class MdzipWorkspaceView {
         const next = resolveMdzipControlPolicy(controls);
         const lineNumbersChanged = next.lineNumbers !== this.controlPolicy.lineNumbers;
         const searchChanged = next.search !== this.controlPolicy.search;
+        // codeBlockTools chrome is only attached when the preview HTML actually
+        // re-mounts (mountPreviewHtml/mountProgressivePreview), which updatePreview()
+        // skips via its memo when nothing document-facing changed. Unlike
+        // lineNumbers/search (live CodeMirror compartment reconfigures), there's
+        // no live DOM toggle for already-rendered code blocks, so the memo has to
+        // be busted to pick up the new policy — same reason
+        // setImageHydrationAnimation calls resetPreviewState() below.
+        const codeBlockToolsChanged = next.codeBlockTools !== this.controlPolicy.codeBlockTools;
         this.controlPolicy = next;
         if (lineNumbersChanged && this.cmEditor) {
             this.cmEditor.dispatch({
@@ -1175,6 +1226,9 @@ export class MdzipWorkspaceView {
                 effects: this.searchCompartment.reconfigure(next.search ? [search({ top: true }), keymap.of(searchKeymap)] : [])
             });
         }
+        if (codeBlockToolsChanged) {
+            this.resetPreviewState();
+        }
         const snapshot = this.workspace?.snapshot();
         if (snapshot) {
             this.layout = this.validLayoutForSnapshot(this.layout, snapshot);
@@ -1917,6 +1971,9 @@ export class MdzipWorkspaceView {
                 htmlTagMarkerHighlight,
                 EditorView.lineWrapping,
                 dropCursor(),
+                // Content is contenteditable, but browsers don't agree on a default
+                // for unconfigured spellcheck there — set it explicitly (#33).
+                EditorView.contentAttributes.of({ spellcheck: 'true' }),
                 mdzipEditorTheme,
                 this.readOnlyCompartment.of(EditorState.readOnly.of(mode === 'read-only')),
                 EditorView.updateListener.of((update) => {
@@ -2169,11 +2226,23 @@ export class MdzipWorkspaceView {
             this.elImageInsertPositionSelect.value = 'inline';
             this.updateImageInsertOptionControls();
         }
+        this.elPackFilesDialog.hidden = this.packFilesDialogState === null;
+        if (this.packFilesDialogState) {
+            const { request } = this.packFilesDialogState;
+            this.elPackFilesEntrySelect.innerHTML = request.markdownFiles
+                .map((p) => `<option value="${escapeHtml(p)}">${escapeHtml(p)}</option>`)
+                .join('');
+            this.elPackFilesEntrySelect.value = request.suggestedEntryPoint;
+            this.elPackFilesModeDocument.checked = true;
+            this.elPackFilesModeProject.checked = false;
+        }
         this.elMetadataDialog.hidden = !this.metadataDialogOpen;
         if (this.contextMenuState) {
             const items = this.contextMenuState.kind === 'nav'
                 ? this.navMenuItems(this.contextMenuState.target, snapshot)
-                : this.editorMenuItems(snapshot);
+                : this.contextMenuState.kind === 'editor'
+                    ? this.editorMenuItems(snapshot)
+                    : this.previewMenuItems();
             if (items.length === 0) {
                 this.contextMenuState = null;
             }
@@ -2258,6 +2327,21 @@ export class MdzipWorkspaceView {
                 this.render();
             }
         });
+        // Ctrl/Cmd+A normally selects the whole page, which in split layout grabs
+        // both panes' text at once. Scope it to the rendered content instead when
+        // focus is inside the preview pane (see the mousedown handler below for
+        // how it gets there); the source editor keeps its own defaultKeymap
+        // binding since CodeMirror's content root sits outside this element.
+        doc.addEventListener('keydown', (e) => {
+            if (e.key.toLowerCase() !== 'a' || !(e.ctrlKey || e.metaKey) || e.shiftKey || e.altKey) {
+                return;
+            }
+            if (!doc.activeElement || !this.elPreviewPane.contains(doc.activeElement)) {
+                return;
+            }
+            e.preventDefault();
+            this.selectAllPreviewContent();
+        });
         this.elNavBtn.addEventListener('click', () => {
             if (!this.controlPolicy.navigation) {
                 return;
@@ -2520,6 +2604,13 @@ export class MdzipWorkspaceView {
             this.resetImageInsertSizeValue();
             this.updateImageInsertOptionControls();
         });
+        this.elPackFilesDialog.querySelector('[data-action="cancel-pack-files"]')
+            .addEventListener('click', () => {
+            this.resolvePackFilesDialog(null);
+        });
+        this.elPackFilesConfirmBtn.addEventListener('click', () => {
+            this.resolvePackFilesDialog(this.readPackFilesDialogDecision());
+        });
         this.elNavMenu.addEventListener('click', (e) => {
             e.stopPropagation();
             const item = e.target.closest('[data-menu-action]');
@@ -2530,6 +2621,9 @@ export class MdzipWorkspaceView {
             if (this.contextMenuState?.kind === 'editor') {
                 void this.handleEditorMenuAction(action);
             }
+            else if (this.contextMenuState?.kind === 'preview') {
+                this.handlePreviewMenuAction(action);
+            }
             else {
                 void this.handleNavMenuAction(action);
             }
@@ -2560,6 +2654,9 @@ export class MdzipWorkspaceView {
             submenu.style.top = `${clampedTop - rect.top}px`;
         });
         this.elEditorHost.addEventListener('contextmenu', (e) => {
+            if (!this.controlPolicy.contextMenu.editor) {
+                return;
+            }
             const snapshot = this.workspace?.snapshot();
             if (!snapshot || !this.cmEditor) {
                 return;
@@ -2580,6 +2677,27 @@ export class MdzipWorkspaceView {
             e.stopPropagation();
             this.render();
         });
+        this.elPreviewPane.addEventListener('contextmenu', (e) => {
+            if (!this.controlPolicy.contextMenu.preview) {
+                return;
+            }
+            // Captured now, not read live in the click handler: clicking the menu
+            // button collapses the browser selection before the action runs (same
+            // reason the editor menu captures its CodeMirror range up front).
+            const domSelection = this.elPreviewPane.ownerDocument.defaultView?.getSelection();
+            const text = domSelection && !domSelection.isCollapsed
+                && this.elPreviewContent.contains(domSelection.anchorNode)
+                ? domSelection.toString()
+                : '';
+            this.contextMenuState = { kind: 'preview', text, x: e.clientX, y: e.clientY };
+            if (this.previewMenuItems().length === 0) {
+                this.contextMenuState = null;
+                return;
+            }
+            e.preventDefault();
+            e.stopPropagation();
+            this.render();
+        });
         this.elNameInput.addEventListener('input', () => {
             if (!this.nameDialogState) {
                 return;
@@ -2626,6 +2744,12 @@ export class MdzipWorkspaceView {
             }
         });
         this.elPreviewPane.addEventListener('scroll', () => this.syncScrollFromPreview());
+        // Gives the pane logical focus on click so a subsequent Ctrl/Cmd+A (below)
+        // can be scoped to it. tabindex="-1" keeps it out of Tab order; this is
+        // the only way it becomes focused.
+        this.elPreviewPane.addEventListener('mousedown', () => {
+            this.elPreviewPane.focus({ preventScroll: true });
+        });
         this.elPreviewPane.addEventListener('click', (event) => {
             const link = event.target.closest('a[href]');
             const snapshot = this.workspace?.snapshot();
@@ -2989,6 +3113,86 @@ export class MdzipWorkspaceView {
         }
         this.elImageInput.click();
     }
+    /**
+     * Packs an already-collected file list (e.g. from a host folder picker)
+     * into a new .mdz workspace. With 0 or 1 Markdown files among `files`,
+     * packs Document mode immediately with no prompt. With more than one,
+     * asks `onPackRequested` (if set) to decide Document vs. Project mode and
+     * the entry point; falls back to a built-in dialog if the hook is absent,
+     * declines, or throws. Document mode opens the result in memory; Project
+     * mode returns the archive bytes without opening them, since only the
+     * host knows where a project archive should be saved.
+     */
+    async packFilesAsWorkspace(files, options = {}) {
+        const markdownFiles = files.filter((f) => isMarkdownArchivePath(f.path)).map((f) => f.path);
+        if (markdownFiles.length <= 1) {
+            const entryPoint = markdownFiles[0] ?? 'index.md';
+            return this.applyPackDecision(files, { mode: 'document', entryPoint }, options);
+        }
+        const suggestedEntryPoint = resolveMarkdownEntryPoint(markdownFiles);
+        const request = { files, markdownFiles, suggestedEntryPoint };
+        const hook = this.options.onPackRequested;
+        if (hook) {
+            const context = this.createPackFilesContext(files, options);
+            let applied = null;
+            const wrappedContext = {
+                applyDecision: async (decision) => {
+                    applied = await context.applyDecision(decision);
+                    return applied;
+                }
+            };
+            let handled = false;
+            try {
+                handled = await hook(request, wrappedContext);
+            }
+            catch (error) {
+                this.options.onFailed?.(error);
+            }
+            if (handled) {
+                return applied;
+            }
+        }
+        const decision = await this.openPackFilesDialog(request);
+        return decision ? this.applyPackDecision(files, decision, options) : null;
+    }
+    createPackFilesContext(files, options) {
+        return { applyDecision: (decision) => this.applyPackDecision(files, decision, options) };
+    }
+    async applyPackDecision(files, decision, options) {
+        const archiveBytes = await buildPackedArchiveBytes(files, {
+            mode: decision.mode,
+            entryPoint: decision.entryPoint,
+            title: options.title ?? 'document'
+        });
+        if (decision.mode === 'document') {
+            await this.open(archiveBytes, { mode: 'editable', fileName: options.fileName ?? 'document.mdz' });
+            return { mode: 'document', entryPoint: decision.entryPoint, archiveBytes, opened: true };
+        }
+        return { mode: 'project', entryPoint: decision.entryPoint, archiveBytes, opened: false };
+    }
+    openPackFilesDialog(request) {
+        return new Promise((resolve) => {
+            this.resolvePackFilesDialog(null); // cancel any prior pending dialog, same as image-insert
+            this.packFilesDialogState = { request, files: request.files, resolve };
+            this.render();
+            requestAnimationFrame(() => this.elPackFilesConfirmBtn.focus());
+        });
+    }
+    resolvePackFilesDialog(decision) {
+        const state = this.packFilesDialogState;
+        if (!state) {
+            return;
+        }
+        this.packFilesDialogState = null;
+        this.render();
+        state.resolve(decision);
+    }
+    readPackFilesDialogDecision() {
+        return {
+            mode: this.elPackFilesModeProject.checked ? 'project' : 'document',
+            entryPoint: this.elPackFilesEntrySelect.value
+        };
+    }
     async handlePaste(event) {
         const snapshot = this.workspace?.snapshot();
         if (!snapshot || snapshot.mode === 'read-only' || snapshot.currentPathType !== 'markdown') {
@@ -3267,6 +3471,19 @@ export class MdzipWorkspaceView {
             groups.push([{ action: 'editor-clear-format', label: 'Clear Formatting', icon: MENU_CLEAR_FORMAT_ICON_HTML }]);
         }
         groups.push([{ action: 'editor-select-all', label: 'Select All', icon: MENU_SELECT_ALL_ICON_HTML, shortcut: this.editorShortcut('A') }]);
+        // This menu replaces the browser's native one, which is the only place
+        // 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) {
+            groups.push([{
+                    action: 'editor-spelling-suggestions-hint',
+                    label: 'Spelling Suggestions',
+                    icon: MENU_SPELLCHECK_ICON_HTML,
+                    shortcut: 'Shift+Right-Click',
+                    disabled: true
+                }]);
+        }
         return groups.flatMap((group, index) => (index === 0 ? group : [null, ...group]));
     }
     async handleEditorMenuAction(action) {
@@ -3332,6 +3549,72 @@ export class MdzipWorkspaceView {
                 break;
         }
     }
+    // Items for the rendered-preview selection menu. Taking over `contextmenu`
+    // to offer Select All also suppresses the browser's native menu — which is
+    // the only thing that was otherwise offering Copy on a right-click — so
+    // Copy has to be reinstated explicitly whenever there's a selection.
+    previewMenuItems() {
+        const state = this.contextMenuState;
+        if (state?.kind !== 'preview' || !this.elPreviewContent.textContent?.trim()) {
+            return [];
+        }
+        const items = [];
+        if (state.text) {
+            items.push({ action: 'preview-copy', label: 'Copy', icon: MENU_COPY_ICON_HTML, shortcut: this.editorShortcut('C') });
+            items.push(null);
+        }
+        items.push({
+            action: 'preview-select-all',
+            label: 'Select All',
+            icon: MENU_SELECT_ALL_ICON_HTML,
+            shortcut: this.editorShortcut('A')
+        });
+        return items;
+    }
+    handlePreviewMenuAction(action) {
+        const state = this.contextMenuState;
+        this.contextMenuState = null;
+        this.render();
+        if (state?.kind !== 'preview') {
+            return;
+        }
+        switch (action) {
+            case 'preview-select-all':
+                this.selectAllPreviewContent();
+                break;
+            case 'preview-copy':
+                void this.copyPreviewSelection(state.text);
+                break;
+        }
+    }
+    async copyPreviewSelection(text) {
+        if (!text) {
+            return;
+        }
+        try {
+            await this.editorClipboard()?.writeText(text);
+        }
+        catch (error) {
+            this.options.onFailed?.(error);
+        }
+    }
+    // Selects the full rendered content of the preview pane, scoped to that
+    // pane rather than the whole page (native Ctrl+A / right-click Select All
+    // would otherwise grab the source editor's text too in split layout).
+    selectAllPreviewContent() {
+        const doc = this.elPreviewContent.ownerDocument;
+        const selection = doc.defaultView?.getSelection();
+        if (!selection) {
+            return;
+        }
+        // Focus before selecting: focusing the pane after building the range
+        // collapses the selection right back out.
+        this.elPreviewPane.focus({ preventScroll: true });
+        const range = doc.createRange();
+        range.selectNodeContents(this.elPreviewContent);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
     // Inserts a fenced code block, carrying the chosen language as the fence info
     // string. An empty language produces a plain ```` ``` ```` block.
     insertCodeBlock(language) {
@@ -4599,7 +4882,7 @@ const SHELL_HTML = `
       </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">
+      <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>
@@ -4693,6 +4976,35 @@ const SHELL_HTML = `
     </div>
   </div>
 
+  <div class="title-dialog-backdrop" data-ref="pack-files-dialog" hidden
+    role="dialog" aria-modal="true" aria-labelledby="mdzip-pack-files-dialog-heading">
+    <div class="title-dialog pack-files-dialog">
+      <h3 id="mdzip-pack-files-dialog-heading">Package Markdown Files</h3>
+      <p>These files contain more than one Markdown document. Choose how to package them.</p>
+      <fieldset class="pack-files-options">
+        <legend>Mode</legend>
+        <label>
+          <input type="radio" name="mdzip-pack-files-mode" value="document"
+            data-ref="pack-files-mode-document" checked />
+          Document — one primary page; the rest are attached
+        </label>
+        <label>
+          <input type="radio" name="mdzip-pack-files-mode" value="project"
+            data-ref="pack-files-mode-project" />
+          Project — a set of related documents
+        </label>
+      </fieldset>
+      <label class="pack-files-field">
+        <span>Entry point</span>
+        <select data-ref="pack-files-entry"></select>
+      </label>
+      <div class="title-dialog-actions">
+        <button type="button" data-action="cancel-pack-files">Cancel</button>
+        <button type="button" class="save-title" data-ref="pack-files-confirm-btn">Package</button>
+      </div>
+    </div>
+  </div>
+
   <div class="title-dialog-backdrop" data-ref="metadata-dialog" hidden
     role="dialog" aria-modal="true" aria-labelledby="mdzip-metadata-dialog-heading">
     <div class="title-dialog metadata-dialog">