@mdzip/editor 1.4.6 → 1.4.8

package/dist/view.js

@@ -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
@@ -1283,7 +1283,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) {
@@ -5794,7 +5799,7 @@ export class MdzipWorkspaceView {
         });
         editor.focus();
     }
-    async notifyChanged(event) {
+    async notifyChanged(event, { reportBytes = true } = {}) {
         if (!this.workspace) {
             return;
         }
@@ -5806,7 +5811,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 +6747,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