diff --git a/.gitignore b/.gitignore
index ec8061cc..85fe151d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,12 +10,6 @@ test-results/
 .pytest_cache/
 __pycache__/
 
-# Local-only generated test harness
-/package.json
-/package-lock.json
-/playwright.config.*
-/tests/
-
 # Local AI/tooling state
 .agents/
 
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 00000000..2bd5a0a9
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+22
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c1625b0..a1a265da 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable code changes to **Markdown Viewer** are documented here.
 Non-code commits (documentation, planning, README-only updates) are excluded.
 
+## Unreleased
+
+- **Testing:** Published the root Playwright harness for contributor-run local testing with locked dependencies, a cross-platform test server, static validation, documentation, Chromium end-to-end coverage, and cross-browser smoke coverage.
+- **Security & Compatibility:** Updated DOMPurify and js-yaml to patched releases, switched deterministic browser assets to valid integrity-checked CDN endpoints, kept the desktop offline bundle synchronized, and restored WebKit support for local HTTP development.
+- **Reliability:** Added an explicit application-ready lifecycle signal and made Markdown clipboard feedback wait for the actual copy result.
+
+---
+
 ## v3.10.0
 
 - **Description:** Introduced scalable local document storage, complete workspace backup and recovery, and a rebuilt GitHub importer with secure private-repository access.
diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 354bdbd5..ef73df36 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; object-src 'none'; form-action 'none'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh 'sha256-DgMFO4QE+qqf2xNgeNb5gMKG6BtiiQFniYj21c88yME=' 'sha256-NnbK2LG1LUwYyZ1xgJN7k3oK4oTvHY4o9852VxwNA/o='; script-src-attr 'none'; worker-src 'self'; connect-src 'self' https://markdownviewer.pages.dev https://api.github.com https://raw.githubusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh https://kroki.io https://www.plantuml.com https://mermaid.ink https://paulrosen.github.io wss://markdownviewer.pages.dev ws://localhost:* ws://127.0.0.1:*; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src-attr 'unsafe-inline'; font-src 'self' data: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; media-src 'self' blob: data: https:; manifest-src 'self'; frame-src 'none'; upgrade-insecure-requests">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; object-src 'none'; form-action 'none'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh 'sha256-DgMFO4QE+qqf2xNgeNb5gMKG6BtiiQFniYj21c88yME=' 'sha256-NnbK2LG1LUwYyZ1xgJN7k3oK4oTvHY4o9852VxwNA/o='; script-src-attr 'none'; worker-src 'self'; connect-src 'self' https://markdownviewer.pages.dev https://api.github.com https://raw.githubusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh https://kroki.io https://www.plantuml.com https://mermaid.ink https://paulrosen.github.io wss://markdownviewer.pages.dev ws://localhost:* ws://127.0.0.1:*; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src-attr 'unsafe-inline'; font-src 'self' data: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; media-src 'self' blob: data: https:; manifest-src 'self'; frame-src 'none'">
     <!-- PERF-015: Preload critical-path resources for faster discovery -->
     <link rel="preload" href="/styles.css" as="style">
     <link rel="preload" href="/js/workspace-storage.js" as="script">
@@ -19,7 +19,7 @@
     <link href="/assets/icon.jpg" rel="icon" type="image/jpg">
     <!-- Updated libraries to latest versions with Subresource Integrity (SRI) -->
     <link rel="stylesheet" href="/libs/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <link rel="stylesheet" href="/libs/github-markdown.min.css" integrity="sha384-hZuxRjC/Dsr4zEx1JlUhDQqkvqBPp2VLHsgXfnxPq1ULDy1eIdWCiux7nvO1RIZP" crossorigin="anonymous">
+    <link rel="stylesheet" href="/libs/github-markdown.css" integrity="sha384-iACWXAClUhXj3tp/AQeas7im7qS6k8zAMbCeLrK+mfQ0YUsh41TpB+OhLRqAX5N3" crossorigin="anonymous">
     <link rel="stylesheet" href="/assets/lucide-icons.css">
     <link rel="stylesheet" href="/styles.css">
     
@@ -27,10 +27,10 @@
     <script src="/libs/marked.min.js" integrity="sha384-odPBjvtXVM/5hOYIr3A1dB+flh0c3wAT3bSesIOqEGmyUA4JoKf/YTWy0XKOYAY7" crossorigin="anonymous" defer></script>
     <script src="/libs/highlight.min.js" integrity="sha384-F/bZzf7p3Joyp5psL90p/p89AZJsndkSoGwRpXcZhleCWhd8SnRuoYo4d0yirjJp" crossorigin="anonymous" defer></script>
     <script src="/libs/powershell.min.js" integrity="sha384-LWJZQx0dgGhEK7snfNYrQs5K+QKD1sOmE02sOQCz4br9UmqSJDvPLoUVFaUyFnjq" crossorigin="anonymous" defer></script>
-    <script src="/libs/purify.min.js" integrity="sha384-3HPB1XT51W3gGRxAmZ+qbZwRpRlFQL632y8x+adAqCr4Wp3TaWwCLSTAJJKbyWEK" crossorigin="anonymous" defer></script>
+    <script src="/libs/purify.min.js" integrity="sha384-ZuC+DIACqSIZTsp+7YF57cR5Y+6qXa7YFbEKdA/EHA/R0T+41dtorqucYl71Zp+t" crossorigin="anonymous" defer></script>
     <script src="/libs/FileSaver.min.js" integrity="sha384-PlRSzpewlarQuj5alIadXwjNUX+2eNMKwr0f07ShWYLy8B6TjEbm7ZlcN/ScSbwy" crossorigin="anonymous" defer></script>
     <!-- PERF-002: MathJax, Mermaid, JoyPixels, jsPDF, html2canvas, pako are now lazy-loaded by script.js on first use -->
-    <script src="/libs/js-yaml.min.js" integrity="sha384-+pxiN6T7yvpryuJmE1gM9PX7yQit15auDb+ZwwvJOd/4be2Cie5/IuVXgQb/S9du" crossorigin="anonymous" defer></script>
+    <script src="/libs/js-yaml.min.js" integrity="sha384-S9ICdlb+JXmKnf3zbM1G+PBNWbhB7ARTUpJyvroFrHHHR8JsKt4oO+kPyfzbT+TM" crossorigin="anonymous" defer></script>
 </head>
 <body>
     <div class="app-container">
@@ -95,7 +95,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     </button>
 
                     <div class="dropdown settings-dropdown">
-                        <button class="header-icon-command" type="button" id="workspaceSettingsDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Workspace settings" aria-label="Open workspace settings">
+                        <button class="header-icon-command" type="button" id="workspaceSettingsDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Workspace settings (Ctrl/Cmd+,)" aria-label="Open workspace settings" aria-keyshortcuts="Control+, Meta+,">
                             <i class="lucide lucide-settings" aria-hidden="true"></i>
                         </button>
                         <div class="dropdown-menu dropdown-menu-end settings-menu" aria-labelledby="workspaceSettingsDropdown">
@@ -330,7 +330,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
             <label class="visually-hidden" for="document-sidebar-search">Search files</label>
             <div class="document-sidebar-search-wrap">
               <i class="lucide lucide-search" aria-hidden="true"></i>
-              <input id="document-sidebar-search" type="search" autocomplete="off" placeholder="Search files" />
+              <input id="document-sidebar-search" type="search" autocomplete="off" placeholder="Search files" title="Quick open (Ctrl/Cmd+P)" aria-keyshortcuts="Control+P Meta+P" />
               <button id="document-sidebar-search-clear" type="button" aria-label="Clear document search" title="Clear search" hidden>
                 <i class="lucide lucide-x" aria-hidden="true"></i>
               </button>
@@ -366,7 +366,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
           <div class="document-editor-area" id="document-editor-area">
             <!-- Tab Bar -->
             <div class="tab-bar" id="tab-bar">
-              <button id="document-sidebar-open" class="tool-button document-sidebar-open" type="button" title="Close Explorer" aria-label="Close Explorer" aria-controls="document-sidebar" aria-expanded="true">
+              <button id="document-sidebar-open" class="tool-button document-sidebar-open" type="button" title="Close Explorer (Ctrl/Cmd+Shift+L)" aria-label="Close Explorer" aria-keyshortcuts="Control+Shift+L Meta+Shift+L" aria-controls="document-sidebar" aria-expanded="true">
                 <i class="lucide lucide-panel-left-close" aria-hidden="true"></i>
               </button>
               <span class="document-sidebar-tab-divider" aria-hidden="true"></span>
@@ -379,8 +379,8 @@ <h2 id="document-sidebar-title">Explorer</h2>
         <!-- Markdown Formatting Toolbar -->
         <div class="markdown-format-toolbar" id="markdown-format-toolbar" role="toolbar" aria-label="Markdown formatting toolbar for plain-text editing">
           <div class="markdown-toolbar-group" role="group" aria-label="History">
-            <button type="button" class="markdown-tool-btn" data-md-action="undo" title="Undo" aria-label="Undo"><i class="lucide lucide-undo-2"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="redo" title="Redo" aria-label="Redo"><i class="lucide lucide-redo-2"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="undo" title="Undo (Ctrl/Cmd+Z)" aria-label="Undo" aria-keyshortcuts="Control+Z Meta+Z"><i class="lucide lucide-undo-2"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="redo" title="Redo (Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y)" aria-label="Redo" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z Control+Y Meta+Y"><i class="lucide lucide-redo-2"></i></button>
           </div>
           <div class="markdown-toolbar-group" role="group" aria-label="Common formatting">
             <div class="markdown-tool-dropdown">
@@ -388,17 +388,17 @@ <h2 id="document-sidebar-title">Explorer</h2>
                 <span class="markdown-tool-select-label">H</span><i class="lucide lucide-chevron-down" aria-hidden="true"></i>
               </button>
               <div class="markdown-tool-menu markdown-tool-menu--heading" data-toolbar-menu="heading" role="menu" aria-label="Heading levels">
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="1"><span class="markdown-tool-menu-symbol">H1</span><span>Heading 1</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="2"><span class="markdown-tool-menu-symbol">H2</span><span>Heading 2</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="3"><span class="markdown-tool-menu-symbol">H3</span><span>Heading 3</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="4"><span class="markdown-tool-menu-symbol">H4</span><span>Heading 4</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="5"><span class="markdown-tool-menu-symbol">H5</span><span>Heading 5</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="6"><span class="markdown-tool-menu-symbol">H6</span><span>Heading 6</span></button>
+                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="1" title="Desktop: Ctrl/Cmd+1" aria-keyshortcuts="Control+1 Meta+1"><span class="markdown-tool-menu-symbol">H1</span><span>Heading 1</span></button>
+                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="2" title="Desktop: Ctrl/Cmd+2" aria-keyshortcuts="Control+2 Meta+2"><span class="markdown-tool-menu-symbol">H2</span><span>Heading 2</span></button>
+                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="3" title="Desktop: Ctrl/Cmd+3" aria-keyshortcuts="Control+3 Meta+3"><span class="markdown-tool-menu-symbol">H3</span><span>Heading 3</span></button>
+                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="4" title="Desktop: Ctrl/Cmd+4" aria-keyshortcuts="Control+4 Meta+4"><span class="markdown-tool-menu-symbol">H4</span><span>Heading 4</span></button>
+                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="5" title="Desktop: Ctrl/Cmd+5" aria-keyshortcuts="Control+5 Meta+5"><span class="markdown-tool-menu-symbol">H5</span><span>Heading 5</span></button>
+                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="heading" data-md-level="6" title="Desktop: Ctrl/Cmd+6" aria-keyshortcuts="Control+6 Meta+6"><span class="markdown-tool-menu-symbol">H6</span><span>Heading 6</span></button>
               </div>
             </div>
-            <button type="button" class="markdown-tool-btn" data-md-action="bold" title="Bold" aria-label="Bold"><i class="lucide lucide-bold"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="italic" title="Italic" aria-label="Italic"><i class="lucide lucide-italic"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="strike" title="Strikethrough" aria-label="Strikethrough"><i class="lucide lucide-strikethrough"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="bold" title="Bold (Ctrl/Cmd+B)" aria-label="Bold" aria-keyshortcuts="Control+B Meta+B"><i class="lucide lucide-bold"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="italic" title="Italic (Ctrl/Cmd+I)" aria-label="Italic" aria-keyshortcuts="Control+I Meta+I"><i class="lucide lucide-italic"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="strike" title="Strikethrough (Alt+Shift+5)" aria-label="Strikethrough" aria-keyshortcuts="Alt+Shift+5"><i class="lucide lucide-strikethrough"></i></button>
           </div>
           <div class="markdown-toolbar-group" role="group" aria-label="Text layout">
             <div class="markdown-tool-dropdown">
@@ -421,12 +421,12 @@ <h2 id="document-sidebar-title">Explorer</h2>
             </div>
           </div>
           <div class="markdown-toolbar-group" role="group" aria-label="Content structure">
-            <button type="button" class="markdown-tool-btn" data-md-action="quote" title="Blockquote" aria-label="Blockquote"><i class="lucide lucide-quote" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="unordered-list" title="Bulleted list" aria-label="Bulleted list"><i class="lucide lucide-list"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="ordered-list" title="Numbered list" aria-label="Numbered list"><i class="lucide lucide-list-ordered"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="inline-code" title="Inline code" aria-label="Inline code"><i class="lucide lucide-code-2" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="quote" title="Blockquote (Ctrl+Shift+Q / Cmd+Option+Q)" aria-label="Blockquote" aria-keyshortcuts="Control+Shift+Q Meta+Alt+Q"><i class="lucide lucide-quote" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="unordered-list" title="Bulleted list (Ctrl+Shift+] / Cmd+Option+U)" aria-label="Bulleted list" aria-keyshortcuts="Control+Shift+] Meta+Alt+U"><i class="lucide lucide-list"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="ordered-list" title="Numbered list (Ctrl+Shift+[ / Cmd+Option+O)" aria-label="Numbered list" aria-keyshortcuts="Control+Shift+[ Meta+Alt+O"><i class="lucide lucide-list-ordered"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="inline-code" title="Inline code (Ctrl/Cmd+Shift+`)" aria-label="Inline code" aria-keyshortcuts="Control+Shift+` Meta+Shift+`"><i class="lucide lucide-code-2" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="table" title="Table" aria-label="Table"><i class="lucide lucide-table-2" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="link" title="Link" aria-label="Link"><i class="lucide lucide-link-2"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="link" title="Link (Ctrl/Cmd+K)" aria-label="Link" aria-keyshortcuts="Control+K Meta+K"><i class="lucide lucide-link-2"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="image" title="Image, GIF, or video" aria-label="Insert image, GIF, or video"><i class="lucide lucide-image" aria-hidden="true"></i></button>
           </div>
           <div class="markdown-toolbar-group" role="group" aria-label="Advanced insertion">
@@ -435,7 +435,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
               <button type="button" class="markdown-tool-btn markdown-tool-select markdown-tool-select--insert" data-toolbar-menu-toggle="insert" aria-haspopup="menu" aria-expanded="false" title="More tools" aria-label="More tools"><i class="lucide lucide-ellipsis" aria-hidden="true"></i></button>
               <div class="markdown-tool-menu markdown-tool-menu--wide" data-toolbar-menu="insert" role="menu" aria-label="More tools">
                 <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="reference"><i class="lucide lucide-bookmark" aria-hidden="true"></i><span>Reference</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="code-block"><i class="lucide lucide-square-code" aria-hidden="true"></i><span>Code block</span></button>
+                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="code-block" title="Ctrl+Shift+K / Cmd+Option+C" aria-keyshortcuts="Control+Shift+K Meta+Alt+C"><i class="lucide lucide-square-code" aria-hidden="true"></i><span>Code block</span></button>
                 <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="terminal-block"><i class="lucide lucide-square-terminal" aria-hidden="true"></i><span>Terminal block</span></button>
                 <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="horizontal-rule"><i class="lucide lucide-minus" aria-hidden="true"></i><span>Horizontal rule</span></button>
                 <div class="markdown-tool-menu-separator" role="separator"></div>
@@ -447,14 +447,14 @@ <h2 id="document-sidebar-title">Explorer</h2>
             </div>
           </div>
           <div class="markdown-toolbar-group workspace-format-actions" role="group" aria-label="Workspace actions">
-            <button type="button" class="markdown-tool-btn" data-md-action="find" title="Find and replace" aria-label="Find and replace"><i class="lucide lucide-search" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="fullscreen" title="Fullscreen" aria-label="Enter fullscreen"><i class="lucide lucide-maximize" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="find" title="Find and replace (Ctrl/Cmd+F)" aria-label="Find and replace" aria-keyshortcuts="Control+F Meta+F"><i class="lucide lucide-search" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="fullscreen" title="Fullscreen (F11 / Cmd+Option+F)" aria-label="Enter fullscreen" aria-keyshortcuts="F11 Meta+Alt+F"><i class="lucide lucide-maximize" aria-hidden="true"></i></button>
           </div>
           <div class="markdown-toolbar-group markdown-toolbar-group--document markdown-toolbar-group--utilities" role="group" aria-label="Document utilities and view mode">
-            <button id="toggle-sync" class="tool-button document-command-btn sync-enabled sync-active" type="button" title="Disable synchronized scrolling" aria-label="Disable synchronized scrolling" aria-pressed="true">
+            <button id="toggle-sync" class="tool-button document-command-btn sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
               <i class="lucide lucide-refresh-cw" aria-hidden="true"></i><span class="btn-text">Sync Off</span>
             </button>
-            <button id="copy-markdown-button" class="tool-button document-command-btn" type="button" title="Copy Markdown" aria-label="Copy Markdown">
+            <button id="copy-markdown-button" class="tool-button document-command-btn" type="button" title="Copy Markdown (Ctrl/Cmd+Shift+C)" aria-label="Copy Markdown" aria-keyshortcuts="Control+Shift+C Meta+Shift+C">
               <i class="lucide lucide-copy" aria-hidden="true"></i><span class="btn-text">Copy Markdown</span>
             </button>
             <button id="review-toggle" class="tool-button document-command-btn" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
@@ -462,9 +462,9 @@ <h2 id="document-sidebar-title">Explorer</h2>
             </button>
             <span class="document-command-divider" aria-hidden="true"></span>
             <div class="view-toolbar markdown-view-toolbar" role="group" aria-label="View mode">
-              <button class="tool-button view-toggle-btn" data-view-mode="editor" aria-pressed="false" title="Edit" aria-label="Edit Markdown"><i class="lucide lucide-square-pen" aria-hidden="true"></i></button>
+              <button class="tool-button view-toggle-btn" data-view-mode="editor" aria-pressed="false" title="Edit (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Edit Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-square-pen" aria-hidden="true"></i></button>
               <button class="tool-button view-toggle-btn is-active" data-view-mode="split" aria-pressed="true" title="Split" aria-label="Split editor and preview"><i class="lucide lucide-columns-2" aria-hidden="true"></i></button>
-              <button class="tool-button view-toggle-btn" data-view-mode="preview" aria-pressed="false" title="Preview" aria-label="Preview Markdown"><i class="lucide lucide-eye" aria-hidden="true"></i></button>
+              <button class="tool-button view-toggle-btn" data-view-mode="preview" aria-pressed="false" title="Preview (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Preview Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-eye" aria-hidden="true"></i></button>
             </div>
           </div>
         </div>
@@ -815,10 +815,16 @@ <h3 class="modal-section-title">Markdown tips</h3>
               <div class="modal-section">
                 <h3 class="modal-section-title">Keyboard shortcuts</h3>
                 <ul class="modal-list">
-                  <li><kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>Z</kbd> &mdash; Undo</li>
-                  <li><kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> &mdash; Redo</li>
-                  <li><kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>F</kbd> &mdash; Open Find &amp; Replace</li>
-                  <li><kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>C</kbd>/<kbd>V</kbd> &mdash; Copy/Paste</li>
+                  <li><kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Z</kbd> &mdash; Undo; add <kbd>Shift</kbd> (or use <kbd>Y</kbd>) to redo.</li>
+                  <li><kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>B</kbd>, <kbd>I</kbd>, or <kbd>K</kbd> &mdash; Toggle bold, toggle italic, or insert a link.</li>
+                  <li><kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>`</kbd> &mdash; Toggle inline code; <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>5</kbd> toggles strikethrough.</li>
+                  <li><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd>/<kbd>Q</kbd> &mdash; Code block/blockquote on Windows and Linux; macOS uses <kbd>Cmd</kbd> + <kbd>Option</kbd> + <kbd>C</kbd>/<kbd>Q</kbd>.</li>
+                  <li><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>[</kbd>/<kbd>]</kbd> &mdash; Numbered/bulleted list on Windows and Linux; macOS uses <kbd>Cmd</kbd> + <kbd>Option</kbd> + <kbd>O</kbd>/<kbd>U</kbd>.</li>
+                  <li><kbd>Tab</kbd>/<kbd>Shift</kbd> + <kbd>Tab</kbd> &mdash; Indent/outdent; desktop <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>0</kbd>&ndash;<kbd>6</kbd> applies paragraph or heading levels.</li>
+                  <li><kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>F</kbd>/<kbd>H</kbd> &mdash; Find/replace; <kbd>F3</kbd>/<kbd>Shift</kbd> + <kbd>F3</kbd> moves through matches.</li>
+                  <li><kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>P</kbd>, <kbd>O</kbd>, <kbd>E</kbd>, or <kbd>,</kbd> &mdash; Quick open, import, toggle Edit/Preview, or open Settings.</li>
+                  <li><kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>/<kbd>L</kbd> &mdash; Copy Markdown or toggle Explorer.</li>
+                  <li><kbd>F11</kbd> (or <kbd>Cmd</kbd> + <kbd>Option</kbd> + <kbd>F</kbd>) &mdash; Fullscreen. Desktop also supports new, close, and next/previous document shortcuts.</li>
                 </ul>
               </div>
             </div>
@@ -1951,7 +1957,7 @@ <h3 id="review-composer-title">Add feedback</h3>
 Add a [link](https://github.com/ThisIs-Developer/Markdown-Viewer) to important resources.
 
 Embed an image:
-<img alt="Markdown Logo" src="https://markdownviewer.pages.dev/assets/icon.jpg" width="120" height="120">
+<img alt="Markdown Logo" src="assets/icon.jpg" width="120" height="120">
 
 ### **Blockquotes**
 
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 0c51ac67..80594c39 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -5965,7 +5965,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       openButton.setAttribute('aria-expanded', sidebarOpen ? 'true' : 'false');
       const icon = openButton.querySelector('i');
       if (icon) icon.className = sidebarOpen ? 'lucide lucide-panel-left-close' : 'lucide lucide-panel-left-open';
-      openButton.title = sidebarOpen ? 'Close Explorer' : 'Open Explorer';
+      openButton.title = (sidebarOpen ? 'Close Explorer' : 'Open Explorer') + ' (Ctrl/Cmd+Shift+L)';
       openButton.setAttribute('aria-label', sidebarOpen ? 'Close Explorer' : 'Open Explorer');
     }
     if (backdrop) backdrop.hidden = !mobileOpen;
@@ -13376,7 +13376,7 @@ ${selector} .arrowheadPath {
       : 'Enable synchronized scrolling';
     toggleSyncButton.setAttribute('aria-pressed', String(syncScrollingEnabled));
     toggleSyncButton.setAttribute('aria-label', syncActionLabel);
-    toggleSyncButton.setAttribute('title', syncActionLabel);
+    toggleSyncButton.setAttribute('title', syncActionLabel + ' (Ctrl/Cmd+Shift+S)');
     if (mobileToggleSyncButton) {
       mobileToggleSyncButton.classList.toggle('is-active', syncScrollingEnabled);
       mobileToggleSyncButton.setAttribute('aria-pressed', String(syncScrollingEnabled));
@@ -13902,45 +13902,268 @@ ${selector} .arrowheadPath {
     }
   }
 
-  function wrapEditorSelection(prefix, suffix, placeholder) {
-    const start = markdownEditor.selectionStart;
-    const end = markdownEditor.selectionEnd;
-    const selected = markdownEditor.value.slice(start, end) || placeholder;
-    const replacement = prefix + selected + suffix;
+  function countRepeatedMarkerBefore(value, index, markerCharacter) {
+    let count = 0;
+    for (let cursor = index - 1; cursor >= 0 && value[cursor] === markerCharacter; cursor -= 1) {
+      count += 1;
+    }
+    return count;
+  }
+
+  function countRepeatedMarkerAfter(value, index, markerCharacter) {
+    let count = 0;
+    for (let cursor = index; cursor < value.length && value[cursor] === markerCharacter; cursor += 1) {
+      count += 1;
+    }
+    return count;
+  }
+
+  function markerRunIncludesFormat(runLength, markerLength) {
+    return markerLength === 1 ? runLength % 2 === 1 : runLength >= markerLength;
+  }
+
+  function selectionIncludesMarkdownMarkers(selected, prefix, suffix) {
+    if (!selected || selected.length < prefix.length + suffix.length) return false;
+    const repeatedMarker = prefix === suffix && prefix.split('').every(function(character) {
+      return character === prefix[0];
+    });
+    if (!repeatedMarker) return selected.startsWith(prefix) && selected.endsWith(suffix);
+
+    const leadingRun = countRepeatedMarkerAfter(selected, 0, prefix[0]);
+    const trailingRun = countRepeatedMarkerBefore(selected, selected.length, prefix[0]);
+    return markerRunIncludesFormat(leadingRun, prefix.length)
+      && markerRunIncludesFormat(trailingRun, suffix.length);
+  }
+
+  function selectionIsSurroundedByMarkdownMarkers(value, start, end, prefix, suffix) {
+    const repeatedMarker = prefix === suffix && prefix.split('').every(function(character) {
+      return character === prefix[0];
+    });
+    if (!repeatedMarker) {
+      return value.slice(Math.max(0, start - prefix.length), start) === prefix
+        && value.slice(end, end + suffix.length) === suffix;
+    }
+
+    const leadingRun = countRepeatedMarkerBefore(value, start, prefix[0]);
+    const trailingRun = countRepeatedMarkerAfter(value, end, suffix[0]);
+    return markerRunIncludesFormat(leadingRun, prefix.length)
+      && markerRunIncludesFormat(trailingRun, suffix.length);
+  }
+
+  function replaceMarkdownEditorRange(editor, start, end, replacement, selectionStart, selectionEnd) {
+    if (editor === markdownEditor) {
+      replaceEditorRange(start, end, replacement, selectionStart, selectionEnd);
+      return;
+    }
+    editor.focus();
+    editor.setRangeText(replacement, start, end, 'end');
+    editor.setSelectionRange(selectionStart, selectionEnd);
+    editor.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+
+  function toggleMarkdownSelection(editor, prefix, suffix, placeholder) {
+    const value = editor.value;
+    const start = editor.selectionStart;
+    const end = editor.selectionEnd;
+    const selected = value.slice(start, end);
+
+    if (selectionIncludesMarkdownMarkers(selected, prefix, suffix)) {
+      const replacement = selected.slice(prefix.length, selected.length - suffix.length);
+      replaceMarkdownEditorRange(editor, start, end, replacement, start, start + replacement.length);
+      return;
+    }
+
+    if (selectionIsSurroundedByMarkdownMarkers(value, start, end, prefix, suffix)) {
+      const replacementStart = start - prefix.length;
+      const replacementEnd = end + suffix.length;
+      replaceMarkdownEditorRange(editor, replacementStart, replacementEnd, selected, replacementStart, replacementStart + selected.length);
+      return;
+    }
+
+    const content = selected || placeholder;
+    const replacement = prefix + content + suffix;
     const selectionStart = start + prefix.length;
-    const selectionEnd = selectionStart + selected.length;
-    replaceEditorRange(start, end, replacement, selectionStart, selectionEnd);
+    replaceMarkdownEditorRange(editor, start, end, replacement, selectionStart, selectionStart + content.length);
   }
 
-  function getCurrentLineRange() {
-    const value = markdownEditor.value;
-    const start = markdownEditor.selectionStart;
+  function isMacShortcutPlatform() {
+    const platform = (navigator.userAgentData && navigator.userAgentData.platform) || navigator.platform || '';
+    return /mac|iphone|ipad|ipod/i.test(platform);
+  }
+
+  function isMarkdownEditorEditable(editor) {
+    if (editor === markdownEditor) return canMutateEditor();
+    return editor === documentSplitEditor && Boolean(secondarySplitTabId) && !editor.readOnly;
+  }
+
+  function getMarkdownEditorShortcutAction(event) {
+    if (event.defaultPrevented || event.isComposing) return null;
+    const key = event.key.toLowerCase();
+    const primary = event.ctrlKey || event.metaKey;
+    const isMac = isMacShortcutPlatform();
+    const desktop = typeof Neutralino !== 'undefined';
+
+    if (primary && !event.altKey && !event.shiftKey) {
+      if (key === 'b') return 'bold';
+      if (key === 'i') return 'italic';
+      if (key === 'k') return 'link';
+      if (event.code === 'Backslash' || key === '\\') return 'clear-formatting-selection';
+      if (desktop && /^Digit[0-6]$/.test(event.code)) {
+        const level = Number(event.code.slice(-1));
+        return level === 0 ? 'paragraph' : 'heading-' + level;
+      }
+    }
+
+    if (!isMac && event.ctrlKey && !event.metaKey && event.shiftKey && !event.altKey) {
+      if (event.code === 'Backquote') return 'inline-code';
+      if (key === 'k') return 'code-block';
+      if (key === 'q') return 'quote';
+      if (event.code === 'BracketLeft') return 'ordered-list';
+      if (event.code === 'BracketRight') return 'unordered-list';
+    }
+
+    if (isMac && event.metaKey && !event.ctrlKey && !event.shiftKey && event.altKey) {
+      if (key === 'c') return 'code-block';
+      if (key === 'q') return 'quote';
+      if (key === 'o') return 'ordered-list';
+      if (key === 'u') return 'unordered-list';
+    }
+
+    if (isMac && event.metaKey && !event.ctrlKey && event.shiftKey && !event.altKey && event.code === 'Backquote') {
+      return 'inline-code';
+    }
+    if (event.altKey && event.shiftKey && !event.ctrlKey && !event.metaKey && event.code === 'Digit5') {
+      return 'strike';
+    }
+    if (isMac && event.ctrlKey && !event.metaKey && event.shiftKey && !event.altKey && event.code === 'Backquote') {
+      return 'strike';
+    }
+    return null;
+  }
+
+  function clearMarkdownFormattingSelection(editor) {
+    let start = editor.selectionStart;
+    let end = editor.selectionEnd;
+    const hadSelection = start !== end;
+    if (!hadSelection) {
+      const line = getCurrentLineRange(editor);
+      start = line.start;
+      end = line.end;
+    }
+    const replacement = stripMarkdownFormatting(editor.value.slice(start, end));
+    const nextStart = hadSelection ? start : start + replacement.length;
+    const nextEnd = hadSelection ? start + replacement.length : nextStart;
+    replaceMarkdownEditorRange(editor, start, end, replacement, nextStart, nextEnd);
+  }
+
+  function insertMarkdownCodeBlock(editor) {
+    const start = editor.selectionStart;
+    const end = editor.selectionEnd;
+    const selected = editor.value.slice(start, end) || 'code';
+    insertMarkdownBlock('```\n' + selected + '\n```\n', start, end, editor);
+  }
+
+  function runMarkdownEditorShortcut(action, editor) {
+    if (action === 'bold') toggleMarkdownSelection(editor, '**', '**', 'bold text');
+    else if (action === 'italic') toggleMarkdownSelection(editor, '*', '*', 'italic text');
+    else if (action === 'strike') toggleMarkdownSelection(editor, '~~', '~~', 'struck text');
+    else if (action === 'inline-code') toggleMarkdownSelection(editor, '`', '`', 'code');
+    else if (action === 'link') insertMarkdownLink(editor);
+    else if (action === 'clear-formatting-selection') clearMarkdownFormattingSelection(editor);
+    else if (action === 'quote') transformEditorLines(function(line) { return line ? '> ' + line.replace(/^>\s?/, '') : '>'; }, editor);
+    else if (action === 'ordered-list') applyMarkdownList('ordered', editor);
+    else if (action === 'unordered-list') applyMarkdownList('unordered', editor);
+    else if (action === 'code-block') insertMarkdownCodeBlock(editor);
+    else if (action === 'paragraph') transformEditorLines(function(line) { return line.replace(/^#{1,6}\s+/, ''); }, editor);
+    else if (action.indexOf('heading-') === 0) {
+      const level = Math.max(1, Math.min(6, Number(action.slice('heading-'.length)) || 1));
+      const marker = '#'.repeat(level) + ' ';
+      transformEditorLines(function(line) { return marker + line.replace(/^#{1,6}\s+/, ''); }, editor);
+    }
+  }
+
+  function handleMarkdownFormatShortcut(event) {
+    const action = getMarkdownEditorShortcutAction(event);
+    if (!action) return;
+    event.preventDefault();
+    const editor = event.currentTarget;
+    if (!isMarkdownEditorEditable(editor)) {
+      announceToScreenReader(getEditorReadOnlyMessage());
+      return;
+    }
+    runMarkdownEditorShortcut(action, editor);
+  }
+
+  function adjustMarkdownEditorIndent(editor, outdent) {
+    const start = editor.selectionStart;
+    const end = editor.selectionEnd;
+    if (!outdent && start === end) {
+      replaceMarkdownEditorRange(editor, start, end, '  ', start + 2, start + 2);
+      return;
+    }
+
+    const range = getSelectedLineRange(editor);
+    const replacement = range.text.split('\n').map(function(line) {
+      if (!outdent) return '  ' + line;
+      return line.replace(/^(?: {1,2}|\t)/, '');
+    }).join('\n');
+
+    if (start !== end) {
+      replaceMarkdownEditorRange(editor, range.start, range.end, replacement, range.start, range.start + replacement.length);
+      return;
+    }
+
+    const removedLength = range.text.length - replacement.length;
+    const caret = Math.max(range.start, start - Math.max(0, removedLength));
+    replaceMarkdownEditorRange(editor, range.start, range.end, replacement, caret, caret);
+  }
+
+  function handleMarkdownEditorStructureKeydown(event) {
+    const editor = event.currentTarget;
+    if (editor === markdownEditor && handleListEnter(event)) return;
+    if (event.key !== 'Tab') return;
+    if (!isMarkdownEditorEditable(editor)) {
+      event.preventDefault();
+      announceToScreenReader(getEditorReadOnlyMessage());
+      return;
+    }
+    event.preventDefault();
+    adjustMarkdownEditorIndent(editor, event.shiftKey);
+  }
+
+  function getCurrentLineRange(editorOverride) {
+    const editor = editorOverride || markdownEditor;
+    const value = editor.value;
+    const start = editor.selectionStart;
     const lineStart = value.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
     let lineEnd = value.indexOf('\n', start);
     if (lineEnd === -1) lineEnd = value.length;
     return { start: lineStart, end: lineEnd, text: value.slice(lineStart, lineEnd) };
   }
 
-  function getSelectedLineRange() {
-    const value = markdownEditor.value;
-    const start = markdownEditor.selectionStart;
-    const end = markdownEditor.selectionEnd;
+  function getSelectedLineRange(editorOverride) {
+    const editor = editorOverride || markdownEditor;
+    const value = editor.value;
+    const start = editor.selectionStart;
+    const end = editor.selectionEnd;
     const lineStart = value.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
     let lineEnd = value.indexOf('\n', end);
     if (lineEnd === -1) lineEnd = value.length;
     return { start: lineStart, end: lineEnd, text: value.slice(lineStart, lineEnd) };
   }
 
-  function transformEditorLines(transformer) {
-    const range = getSelectedLineRange();
+  function transformEditorLines(transformer, editorOverride) {
+    const editor = editorOverride || markdownEditor;
+    const range = getSelectedLineRange(editor);
     const replacement = range.text.split('\n').map(transformer).join('\n');
-    replaceEditorRange(range.start, range.end, replacement, range.start, range.start + replacement.length);
+    replaceMarkdownEditorRange(editor, range.start, range.end, replacement, range.start, range.start + replacement.length);
   }
 
-  function getListLineRange() {
-    const value = markdownEditor.value;
-    const start = markdownEditor.selectionStart;
-    const end = markdownEditor.selectionEnd;
+  function getListLineRange(editorOverride) {
+    const editor = editorOverride || markdownEditor;
+    const value = editor.value;
+    const start = editor.selectionStart;
+    const end = editor.selectionEnd;
     const effectiveEnd = end > start && value[end - 1] === '\n' ? end - 1 : end;
     const lineStart = value.lastIndexOf('\n', Math.max(0, start - 1)) + 1;
     let lineEnd = value.indexOf('\n', effectiveEnd);
@@ -13972,26 +14195,28 @@ ${selector} .arrowheadPath {
     return { indent: match ? match[1] : '', body: match ? match[2] : line };
   }
 
-  function getPreviousLineInfo(lineStart) {
+  function getPreviousLineInfo(lineStart, editorOverride) {
     if (lineStart <= 0) return null;
-    const value = markdownEditor.value;
+    const editor = editorOverride || markdownEditor;
+    const value = editor.value;
     const previousEnd = lineStart - 1;
     const previousStart = previousEnd > 0 ? value.lastIndexOf('\n', previousEnd - 1) + 1 : 0;
     return { start: previousStart, text: value.slice(previousStart, previousEnd) };
   }
 
-  function getOrderedListStartNumber(lineStart) {
-    const previousLine = getPreviousLineInfo(lineStart);
+  function getOrderedListStartNumber(lineStart, editorOverride) {
+    const previousLine = getPreviousLineInfo(lineStart, editorOverride);
     if (!previousLine || !previousLine.text.trim()) return 1;
     const parsed = parseMarkdownListItem(previousLine.text);
     return parsed && parsed.type === 'ordered' ? parsed.number + 1 : 1;
   }
 
-  function applyMarkdownList(type) {
-    const range = getListLineRange();
-    const hadSelection = markdownEditor.selectionStart !== markdownEditor.selectionEnd;
+  function applyMarkdownList(type, editorOverride) {
+    const editor = editorOverride || markdownEditor;
+    const range = getListLineRange(editor);
+    const hadSelection = editor.selectionStart !== editor.selectionEnd;
     const lines = range.text.split('\n');
-    let nextNumber = type === 'ordered' ? getOrderedListStartNumber(range.start) : 1;
+    let nextNumber = type === 'ordered' ? getOrderedListStartNumber(range.start, editor) : 1;
     let firstPrefixLength = null;
 
     const replacement = lines.map(function(line) {
@@ -14008,7 +14233,7 @@ ${selector} .arrowheadPath {
       ? range.start + (firstPrefixLength || 0)
       : range.start + replacement.length;
 
-    replaceEditorRange(range.start, range.end, replacement, caret, caret);
+    replaceMarkdownEditorRange(editor, range.start, range.end, replacement, caret, caret);
   }
 
   function renumberOrderedListAfterPosition(position, nextNumber) {
@@ -14562,15 +14787,16 @@ ${selector} .arrowheadPath {
     replaceEditorRange(start, end, replacement, contentStart, hasSelection ? contentEnd : contentStart);
   }
 
-  function insertMarkdownBlock(block, startOverride, endOverride) {
-    const value = markdownEditor.value;
-    const start = typeof startOverride === 'number' ? startOverride : markdownEditor.selectionStart;
-    const end = typeof endOverride === 'number' ? endOverride : markdownEditor.selectionEnd;
+  function insertMarkdownBlock(block, startOverride, endOverride, editorOverride) {
+    const editor = editorOverride || markdownEditor;
+    const value = editor.value;
+    const start = typeof startOverride === 'number' ? startOverride : editor.selectionStart;
+    const end = typeof endOverride === 'number' ? endOverride : editor.selectionEnd;
     const needsLeadingBreak = start > 0 && value[start - 1] !== '\n';
     const needsTrailingBreak = end < value.length && value[end] !== '\n';
     const replacement = (needsLeadingBreak ? '\n' : '') + block + (needsTrailingBreak ? '\n' : '');
     const caret = start + replacement.length;
-    replaceEditorRange(start, end, replacement, caret, caret);
+    replaceMarkdownEditorRange(editor, start, end, replacement, caret, caret);
   }
 
   function clampNumber(value, min, max, fallback) {
@@ -16478,16 +16704,17 @@ ${selector} .arrowheadPath {
     openAppModal(modal, { focusTarget: searchInput, returnFocus: opener, onClose: closeModal });
   }
 
-  function insertMarkdownLink() {
+  function insertMarkdownLink(editorOverride) {
+    const editor = editorOverride || markdownEditor;
     const modal = document.getElementById('link-modal');
     const urlInput = document.getElementById('link-modal-url');
     const textInput = document.getElementById('link-modal-text');
     const confirmBtn = document.getElementById('link-modal-apply');
     const cancelBtn = document.getElementById('link-modal-cancel');
     if (!modal || !urlInput || !textInput || !confirmBtn || !cancelBtn) return;
-    const start = markdownEditor.selectionStart;
-    const end = markdownEditor.selectionEnd;
-    const selected = markdownEditor.value.slice(start, end);
+    const start = editor.selectionStart;
+    const end = editor.selectionEnd;
+    const selected = editor.value.slice(start, end);
     urlInput.value = 'https://';
     textInput.value = selected || '';
     modal.style.display = 'flex';
@@ -16498,7 +16725,7 @@ ${selector} .arrowheadPath {
       const replacement = '[' + linkText + '](' + url + ')';
       modal.style.display = 'none';
       cleanup();
-      replaceEditorRange(start, end, replacement, start + replacement.length, start + replacement.length);
+      replaceMarkdownEditorRange(editor, start, end, replacement, start + replacement.length, start + replacement.length);
     }
 
     function closeModal() {
@@ -18333,9 +18560,9 @@ ${selector} .arrowheadPath {
       return;
     }
 
-    if (action === 'bold') wrapEditorSelection('**', '**', 'bold text');
-    else if (action === 'strike') wrapEditorSelection('~~', '~~', 'struck text');
-    else if (action === 'italic') wrapEditorSelection('*', '*', 'italic text');
+    if (action === 'bold') toggleMarkdownSelection(markdownEditor, '**', '**', 'bold text');
+    else if (action === 'strike') toggleMarkdownSelection(markdownEditor, '~~', '~~', 'struck text');
+    else if (action === 'italic') toggleMarkdownSelection(markdownEditor, '*', '*', 'italic text');
     else if (action === 'quote') transformEditorLines(function(line) { return line ? '> ' + line.replace(/^>\s?/, '') : '>'; });
     else if (action === 'align-left') insertAlignmentBlock('left');
     else if (action === 'align-center') insertAlignmentBlock('center');
@@ -18358,7 +18585,7 @@ ${selector} .arrowheadPath {
     else if (action === 'link') insertMarkdownLink();
     else if (action === 'reference') insertMarkdownReference();
     else if (action === 'image') insertMarkdownImage();
-    else if (action === 'inline-code') wrapEditorSelection('`', '`', 'code');
+    else if (action === 'inline-code') toggleMarkdownSelection(markdownEditor, '`', '`', 'code');
     else if (action === 'code-block') insertMarkdownBlock('```js\n' + (markdownEditor.value.slice(markdownEditor.selectionStart, markdownEditor.selectionEnd) || 'console.log("Hello, Markdown!");') + '\n```\n');
     else if (action === 'table') openTableModal();
     else if (action === 'date-time') {
@@ -19165,7 +19392,7 @@ ${selector} .arrowheadPath {
     const isFullscreen = Boolean(document.fullscreenElement);
     const label = isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen';
     const icon = fullscreenButton.querySelector('i');
-    fullscreenButton.setAttribute('title', label);
+    fullscreenButton.setAttribute('title', label + ' (F11 / Cmd+Option+F)');
     fullscreenButton.setAttribute('aria-label', label);
     if (icon) icon.className = isFullscreen ? 'lucide lucide-minimize' : 'lucide lucide-maximize';
   });
@@ -19174,33 +19401,12 @@ ${selector} .arrowheadPath {
     headerAboutButton.addEventListener('click', openAboutModal);
   }
   
-  // Editor key handlers for list continuation and indentation
-  markdownEditor.addEventListener("keydown", function(e) {
-    if (!canMutateEditor()) return;
-    if (handleListEnter(e)) {
-      return;
-    }
+  markdownEditor.addEventListener('keydown', handleMarkdownFormatShortcut);
+  if (documentSplitEditor) documentSplitEditor.addEventListener('keydown', handleMarkdownFormatShortcut);
 
-    if (e.key === 'Tab') {
-      e.preventDefault();
-      
-      const start = this.selectionStart;
-      const end = this.selectionEnd;
-      const value = this.value;
-      
-      // Insert 2 spaces
-      const indent = '  '; // 2 spaces
-      
-      // Update textarea value
-      this.value = value.substring(0, start) + indent + value.substring(end);
-      
-      // Update cursor position
-      this.selectionStart = this.selectionEnd = start + indent.length;
-      
-      // Trigger input event to update preview
-      this.dispatchEvent(new Event('input'));
-    }
-  });
+  // Editor key handlers for list continuation and indentation
+  markdownEditor.addEventListener('keydown', handleMarkdownEditorStructureKeydown);
+  if (documentSplitEditor) documentSplitEditor.addEventListener('keydown', handleMarkdownEditorStructureKeydown);
   
   markdownEditor.addEventListener("scroll", function() {
     cachedScrollTop = this.scrollTop;
@@ -21469,11 +21675,11 @@ ${selector} .arrowheadPath {
     }
   });
 
-  copyMarkdownButton.addEventListener("click", function () {
+  copyMarkdownButton.addEventListener("click", async function () {
     if (blockShareSnapshotSourceAccess()) return;
     try {
-      const markdownText = markdownEditor.value;
-      copyToClipboard(markdownText);
+      await copyTextToClipboard(markdownEditor.value);
+      showCopiedMessage();
     } catch (e) {
       console.error("Copy failed:", e);
       alert("Failed to copy Markdown: " + e.message);
@@ -21499,16 +21705,6 @@ ${selector} .arrowheadPath {
     }
   }
 
-  async function copyToClipboard(text) {
-    try {
-      await copyTextToClipboard(text);
-      showCopiedMessage();
-    } catch (err) {
-      console.error("Copy failed:", err);
-      alert("Failed to copy HTML: " + err.message);
-    }
-  }
-
   function showCopiedMessage() {
     const icon = copyMarkdownButton.querySelector('i');
     const label = copyMarkdownButton.querySelector('.btn-text');
@@ -24218,8 +24414,94 @@ ${selector} .arrowheadPath {
   }
 
   document.addEventListener("keydown", function (e) {
+    if (e.defaultPrevented) return;
+    const isCmdOrCtrl = e.ctrlKey || e.metaKey;
+    const isDesktop = typeof Neutralino !== 'undefined';
+    const key = e.key.toLowerCase();
+
+    if (e.key === 'F3') {
+      e.preventDefault();
+      if (!isFindModalOpen) openFindReplaceModal();
+      requestAnimationFrame(function() { cycleFindMatch(e.shiftKey ? -1 : 1); });
+      return;
+    }
+
+    if (isCmdOrCtrl && !e.shiftKey && !e.altKey && key === 'p') {
+      e.preventDefault();
+      openDocumentSidebar();
+      requestAnimationFrame(function() {
+        const searchInput = document.getElementById('document-sidebar-search');
+        if (searchInput) {
+          searchInput.focus();
+          searchInput.select();
+        }
+      });
+      return;
+    }
+
+    if (isCmdOrCtrl && !e.shiftKey && !e.altKey && (e.code === 'Comma' || key === ',')) {
+      e.preventDefault();
+      const settingsToggle = document.getElementById('workspaceSettingsDropdown');
+      if (settingsToggle) settingsToggle.click();
+      return;
+    }
+
+    if (isCmdOrCtrl && !e.shiftKey && !e.altKey && key === 'e') {
+      e.preventDefault();
+      setViewMode(currentViewMode === 'preview' ? 'editor' : 'preview');
+      return;
+    }
+
+    if (isCmdOrCtrl && !e.shiftKey && !e.altKey && key === 'o') {
+      e.preventDefault();
+      if (isDesktop) nativeImportMarkdown();
+      else fileInput.click();
+      return;
+    }
+
+    if (isCmdOrCtrl && e.shiftKey && !e.altKey && key === 'c') {
+      e.preventDefault();
+      const focusedEditor = document.activeElement === documentSplitEditor ? documentSplitEditor : markdownEditor;
+      const selected = focusedEditor.value.slice(focusedEditor.selectionStart, focusedEditor.selectionEnd);
+      copyTextToClipboard(selected || focusedEditor.value)
+        .then(function() { announceToScreenReader(selected ? 'Selected Markdown copied.' : 'Markdown copied.'); })
+        .catch(function(error) { console.warn('Copy Markdown shortcut failed:', error); });
+      return;
+    }
+
+    if (isCmdOrCtrl && e.shiftKey && !e.altKey && key === 'l') {
+      e.preventDefault();
+      toggleDocumentSidebarFromTabBar();
+      return;
+    }
+
+    if (e.key === 'F11' || (isMacShortcutPlatform() && e.metaKey && e.altKey && !e.shiftKey && key === 'f')) {
+      e.preventDefault();
+      runMarkdownTool('fullscreen');
+      return;
+    }
+
+    if (isDesktop && isCmdOrCtrl && !e.shiftKey && !e.altKey && key === 'n') {
+      e.preventDefault();
+      newTab();
+      return;
+    }
+
+    const switchWithControlTab = isDesktop && e.ctrlKey && !e.metaKey && !e.altKey && e.code === 'Tab';
+    const switchWithCommandBackquote = isDesktop && isMacShortcutPlatform() && e.metaKey && !e.ctrlKey && !e.altKey && e.code === 'Backquote';
+    if (switchWithControlTab || switchWithCommandBackquote) {
+      e.preventDefault();
+      const openTabs = getOpenTabs();
+      const activeIndex = openTabs.findIndex(function(tab) { return tab.id === activeTabId; });
+      if (openTabs.length > 1 && activeIndex !== -1) {
+        const direction = e.shiftKey ? -1 : 1;
+        const nextIndex = (activeIndex + direction + openTabs.length) % openTabs.length;
+        switchTab(openTabs[nextIndex].id);
+      }
+      return;
+    }
+
     if (document.activeElement === markdownEditor) {
-      const isCmdOrCtrl = e.ctrlKey || e.metaKey;
       if (!canMutateEditor() && isCmdOrCtrl && ['z', 'y'].indexOf(e.key.toLowerCase()) !== -1) {
         e.preventDefault();
         announceToScreenReader(getEditorReadOnlyMessage());
@@ -24236,11 +24518,11 @@ ${selector} .arrowheadPath {
       }
     }
 
-    if ((e.ctrlKey || e.metaKey) && e.key === "s") {
+    if (isCmdOrCtrl && !e.shiftKey && key === 's') {
       e.preventDefault();
       exportMd.click();
     }
-    if ((e.ctrlKey || e.metaKey) && e.key === "c") {
+    if (isCmdOrCtrl && key === 'c') {
       const activeEl = document.activeElement;
       const isTextControl = activeEl && (activeEl.tagName === "TEXTAREA" || activeEl.tagName === "INPUT");
       const hasSelection = window.getSelection && window.getSelection().toString().trim().length > 0;
@@ -24251,20 +24533,19 @@ ${selector} .arrowheadPath {
       }
     }
     // Story 1.2: Only allow sync toggle shortcut when in split view
-    if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === "s") {
+    if (isCmdOrCtrl && e.shiftKey && key === 's') {
       e.preventDefault();
       if (currentViewMode === 'split') {
         toggleSyncScrolling();
       }
     }
-    const isDesktop = typeof Neutralino !== 'undefined';
     // New tab (Ctrl+T on desktop, Alt+Shift+T on web/desktop)
-    if ((isDesktop && (e.ctrlKey || e.metaKey) && e.key === "t") || (e.altKey && e.shiftKey && e.key.toLowerCase() === "t")) {
+    if ((isDesktop && isCmdOrCtrl && key === 't') || (e.altKey && e.shiftKey && key === 't')) {
       e.preventDefault();
       newTab();
     }
     // Close tab (Ctrl+W on desktop, Alt+Shift+W on web/desktop)
-    if ((isDesktop && (e.ctrlKey || e.metaKey) && e.key === "w") || (e.altKey && e.shiftKey && e.key.toLowerCase() === "w")) {
+    if ((isDesktop && isCmdOrCtrl && key === 'w') || (e.altKey && e.shiftKey && key === 'w')) {
       e.preventDefault();
       closeTab(activeTabId);
     }
@@ -26475,9 +26756,9 @@ ${selector} .arrowheadPath {
     if (mTabResetLabel) mTabResetLabel.textContent = translateUiString('Reset workspace');
 
     // View toggle buttons title tooltips
-    document.querySelectorAll('[data-view-mode="editor"]').forEach(b => b.title = translateUiString('Edit Markdown'));
+    document.querySelectorAll('[data-view-mode="editor"]').forEach(b => b.title = translateUiString('Edit Markdown') + ' (Ctrl/Cmd+E toggles Edit/Preview)');
     document.querySelectorAll('[data-view-mode="split"]').forEach(b => b.title = translateUiString('Split editor and live preview'));
-    document.querySelectorAll('[data-view-mode="preview"]').forEach(b => b.title = translateUiString('Markdown preview only'));
+    document.querySelectorAll('[data-view-mode="preview"]').forEach(b => b.title = translateUiString('Markdown preview only') + ' (Ctrl/Cmd+E toggles Edit/Preview)');
     document.querySelectorAll('.mobile-view-mode-btn[data-mode="editor"] span').forEach(s => s.textContent = translateUiString('Edit'));
     document.querySelectorAll('.mobile-view-mode-btn[data-mode="split"] span').forEach(s => s.textContent = translateUiString('Split'));
     document.querySelectorAll('.mobile-view-mode-btn[data-mode="preview"] span').forEach(s => s.textContent = translateUiString('Preview'));
@@ -26805,4 +27086,6 @@ ${selector} .arrowheadPath {
       activate: releaseNotesLaunch.activate
     });
   }
+  document.documentElement.dataset.appReady = 'true';
+  window.dispatchEvent(new Event('markdown-viewer:ready'));
 });
diff --git a/index.html b/index.html
index 1ea29cb0..b57ca427 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; object-src 'none'; form-action 'none'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh 'sha256-DgMFO4QE+qqf2xNgeNb5gMKG6BtiiQFniYj21c88yME=' 'sha256-NnbK2LG1LUwYyZ1xgJN7k3oK4oTvHY4o9852VxwNA/o='; script-src-attr 'none'; worker-src 'self'; connect-src 'self' https://markdownviewer.pages.dev https://api.github.com https://raw.githubusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh https://kroki.io https://www.plantuml.com https://mermaid.ink https://paulrosen.github.io wss://markdownviewer.pages.dev ws://localhost:* ws://127.0.0.1:*; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src-attr 'unsafe-inline'; font-src 'self' data: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; media-src 'self' blob: data: https:; manifest-src 'self'; frame-src 'none'; upgrade-insecure-requests">
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; base-uri 'self'; object-src 'none'; form-action 'none'; script-src 'self' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh 'sha256-DgMFO4QE+qqf2xNgeNb5gMKG6BtiiQFniYj21c88yME=' 'sha256-NnbK2LG1LUwYyZ1xgJN7k3oK4oTvHY4o9852VxwNA/o='; script-src-attr 'none'; worker-src 'self'; connect-src 'self' https://markdownviewer.pages.dev https://api.github.com https://raw.githubusercontent.com https://cdnjs.cloudflare.com https://cdn.jsdelivr.net https://esm.sh https://kroki.io https://www.plantuml.com https://mermaid.ink https://paulrosen.github.io wss://markdownviewer.pages.dev ws://localhost:* ws://127.0.0.1:*; img-src 'self' data: blob: https:; style-src 'self' 'unsafe-inline' https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; style-src-attr 'unsafe-inline'; font-src 'self' data: https://cdnjs.cloudflare.com https://cdn.jsdelivr.net; media-src 'self' blob: data: https:; manifest-src 'self'; frame-src 'none'">
     <!-- DNS Prefetch & Preconnect CDN Origins to Warm Up Latency -->
     <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
     <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
@@ -115,7 +115,7 @@
     <link href="assets/icon.jpg" rel="icon" type="image/jpg">
     <!-- Updated libraries to latest versions with Subresource Integrity (SRI) -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.3.0/github-markdown.min.css" integrity="sha384-hZuxRjC/Dsr4zEx1JlUhDQqkvqBPp2VLHsgXfnxPq1ULDy1eIdWCiux7nvO1RIZP" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.3.0/github-markdown.css" integrity="sha384-iACWXAClUhXj3tp/AQeas7im7qS6k8zAMbCeLrK+mfQ0YUsh41TpB+OhLRqAX5N3" crossorigin="anonymous">
     <link rel="stylesheet" href="assets/lucide-icons.css">
     <link rel="stylesheet" href="styles.css">
     
@@ -123,10 +123,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js" integrity="sha384-odPBjvtXVM/5hOYIr3A1dB+flh0c3wAT3bSesIOqEGmyUA4JoKf/YTWy0XKOYAY7" crossorigin="anonymous" defer></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js" integrity="sha384-F/bZzf7p3Joyp5psL90p/p89AZJsndkSoGwRpXcZhleCWhd8SnRuoYo4d0yirjJp" crossorigin="anonymous" defer></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/powershell.min.js" integrity="sha384-LWJZQx0dgGhEK7snfNYrQs5K+QKD1sOmE02sOQCz4br9UmqSJDvPLoUVFaUyFnjq" crossorigin="anonymous" defer></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.9/purify.min.js" integrity="sha384-3HPB1XT51W3gGRxAmZ+qbZwRpRlFQL632y8x+adAqCr4Wp3TaWwCLSTAJJKbyWEK" crossorigin="anonymous" defer></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.4.13/purify.min.js" integrity="sha384-ZuC+DIACqSIZTsp+7YF57cR5Y+6qXa7YFbEKdA/EHA/R0T+41dtorqucYl71Zp+t" crossorigin="anonymous" defer></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha384-PlRSzpewlarQuj5alIadXwjNUX+2eNMKwr0f07ShWYLy8B6TjEbm7ZlcN/ScSbwy" crossorigin="anonymous" defer></script>
     <!-- PERF-002: MathJax, Mermaid, JoyPixels, jsPDF, html2canvas, pako are now lazy-loaded by script.js on first use -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js" integrity="sha384-+pxiN6T7yvpryuJmE1gM9PX7yQit15auDb+ZwwvJOd/4be2Cie5/IuVXgQb/S9du" crossorigin="anonymous" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/js-yaml@4.3.1/dist/js-yaml.min.js" integrity="sha384-S9ICdlb+JXmKnf3zbM1G+PBNWbhB7ARTUpJyvroFrHHHR8JsKt4oO+kPyfzbT+TM" crossorigin="anonymous" defer></script>
 </head>
 <body>
     <div class="app-container">
@@ -2050,7 +2050,7 @@ <h3 id="review-composer-title">Add feedback</h3>
 Add a [link](https://github.com/ThisIs-Developer/Markdown-Viewer) to important resources.
 
 Embed an image:
-<img alt="Markdown Logo" src="https://markdownviewer.pages.dev/assets/icon.jpg" width="120" height="120">
+<img alt="Markdown Logo" src="assets/icon.jpg" width="120" height="120">
 
 ### **Blockquotes**
 
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..0d20e8dc
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,343 @@
+{
+  "name": "markdown-viewer",
+  "version": "3.10.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "markdown-viewer",
+      "version": "3.10.0",
+      "devDependencies": {
+        "@highlightjs/cdn-assets": "11.9.0",
+        "@playwright/test": "1.61.1",
+        "bootstrap": "5.3.2",
+        "dompurify": "3.4.13",
+        "file-saver": "2.0.5",
+        "github-markdown-css": "5.3.0",
+        "highlight.js": "11.9.0",
+        "js-yaml": "4.3.1",
+        "jszip": "3.10.1",
+        "marked": "9.1.6",
+        "pako": "2.1.0"
+      },
+      "engines": {
+        "node": ">=22 <27"
+      }
+    },
+    "node_modules/@highlightjs/cdn-assets": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/@highlightjs/cdn-assets/-/cdn-assets-11.9.0.tgz",
+      "integrity": "sha512-F1vJKVAkLwj2Uz2ik1PDc+mDbkrecLI6gcBlAxSRUjyDpMPJjeDBanT9Y2B+xpNe1MT6zSG204Ohm/+nUMCApQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.61.1.tgz",
+      "integrity": "sha512-8nKv6+0RJSL9FE4jYOEGXnPeM/Hg12qZpmqzZjRh3qM0Y7c3z1mrOTfFLids72RDQYVh9WpLEfR5WdpNX4fkig==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
+    "node_modules/@types/trusted-types": {
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
+      "integrity": "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==",
+      "dev": true,
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true,
+      "license": "Python-2.0"
+    },
+    "node_modules/bootstrap": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+      "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "@popperjs/core": "^2.11.8"
+      }
+    },
+    "node_modules/core-util-is": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
+      "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/dompurify": {
+      "version": "3.4.13",
+      "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.4.13.tgz",
+      "integrity": "sha512-2vmYIoqjze2d+kakP8S/nS5shfsl587kzwEjcGlTdiksUVgFHnFCsLYDVj/JNqJVOQZGSYBTmuycv0PodwmnMQ==",
+      "dev": true,
+      "license": "(MPL-2.0 OR Apache-2.0)",
+      "optionalDependencies": {
+        "@types/trusted-types": "^2.0.7"
+      }
+    },
+    "node_modules/file-saver": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz",
+      "integrity": "sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/github-markdown-css": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-5.3.0.tgz",
+      "integrity": "sha512-WI+6puEQJnC8JoIveA8R8PiwH/wJwlneE88j7Q+ojMfzWcqRJF01vrVvo8PoWc6Y4aDF+kG4WGZi3RHXymyzJg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.9.0.tgz",
+      "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true,
+      "license": "ISC"
+    },
+    "node_modules/isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/js-yaml": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.3.1.tgz",
+      "integrity": "sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/puzrin"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/nodeca"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dev": true,
+      "license": "(MIT OR GPL-3.0-or-later)",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
+    "node_modules/jszip/node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==",
+      "dev": true,
+      "license": "(MIT AND Zlib)"
+    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
+    "node_modules/marked": {
+      "version": "9.1.6",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-9.1.6.tgz",
+      "integrity": "sha512-jcByLnIFkd5gSXZmjNvS1TlmRhCXZjIzHYlaGkPlLIekG55JDR2Z4va9tZwCiP+/RDERiNhMOFu01xd6O5ct1Q==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
+    "node_modules/pako": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "dev": true,
+      "license": "(MIT AND Zlib)"
+    },
+    "node_modules/playwright": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.61.1.tgz",
+      "integrity": "sha512-DWnY5o3YbLWK4GovuAVwpqL+1VwGNdUGrRr++8j8PtQQzvAVZUIMjKQ90fY689sEJZJBbZVw1rXaOKSTitkzPQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.61.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.61.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.61.1.tgz",
+      "integrity": "sha512-h7Qlt6m4REp25qvIdvbDtVmD4LqVXfpRxhORv9L0jzETM05p4fuPJ3dKyuSXQxDSbXnmS79HAgi9589lGSpLkg==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/process-nextick-args": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
+      "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/readable-stream": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.8.tgz",
+      "integrity": "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.3",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~2.0.0",
+        "safe-buffer": "~5.1.1",
+        "string_decoder": "~1.1.1",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/string_decoder": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+      "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "safe-buffer": "~5.1.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..8fc94c4d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "markdown-viewer",
+  "version": "3.10.0",
+  "private": true,
+  "description": "Development and automated testing tools for Markdown Viewer.",
+  "engines": {
+    "node": ">=22 <27"
+  },
+  "scripts": {
+    "build": "npm run check:static",
+    "check:static": "node tests/helpers/static-build-check.mjs",
+    "test": "npm run check:static && npm run test:e2e",
+    "test:install": "playwright install chromium firefox webkit",
+    "test:e2e": "playwright test --project=chromium",
+    "test:e2e:smoke": "playwright test tests/e2e/smoke.spec.js --project=chromium",
+    "test:e2e:cross-browser": "playwright test tests/e2e/smoke.spec.js",
+    "test:e2e:ui": "playwright test --project=chromium --ui",
+    "test:e2e:headed": "playwright test --project=chromium --headed",
+    "test:e2e:report": "playwright show-report"
+  },
+  "devDependencies": {
+    "@highlightjs/cdn-assets": "11.9.0",
+    "@playwright/test": "1.61.1",
+    "bootstrap": "5.3.2",
+    "dompurify": "3.4.13",
+    "file-saver": "2.0.5",
+    "github-markdown-css": "5.3.0",
+    "highlight.js": "11.9.0",
+    "js-yaml": "4.3.1",
+    "jszip": "3.10.1",
+    "marked": "9.1.6",
+    "pako": "2.1.0"
+  }
+}
diff --git a/playwright.config.js b/playwright.config.js
new file mode 100644
index 00000000..7adda799
--- /dev/null
+++ b/playwright.config.js
@@ -0,0 +1,46 @@
+const { defineConfig, devices } = require('@playwright/test');
+
+const PORT = Number(process.env.MARKDOWN_VIEWER_TEST_PORT || 4173);
+const HOST = '127.0.0.1';
+const browserChannel = process.env.PLAYWRIGHT_CHANNEL || undefined;
+
+module.exports = defineConfig({
+  testDir: './tests/e2e',
+  timeout: 60_000,
+  expect: {
+    timeout: 15_000
+  },
+  fullyParallel: false,
+  reporter: [['list'], ['html', { open: 'never' }]],
+  webServer: {
+    command: 'node tests/helpers/static-server.mjs',
+    url: `http://${HOST}:${PORT}/`,
+    reuseExistingServer: true,
+    stdout: 'pipe',
+    stderr: 'pipe'
+  },
+  use: {
+    baseURL: `http://${HOST}:${PORT}`,
+    serviceWorkers: 'block',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure'
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+        channel: browserChannel
+      }
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] }
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] }
+    }
+  ]
+});
diff --git a/script.js b/script.js
index 1e03daca..80594c39 100644
--- a/script.js
+++ b/script.js
@@ -21675,11 +21675,11 @@ ${selector} .arrowheadPath {
     }
   });
 
-  copyMarkdownButton.addEventListener("click", function () {
+  copyMarkdownButton.addEventListener("click", async function () {
     if (blockShareSnapshotSourceAccess()) return;
     try {
-      const markdownText = markdownEditor.value;
-      copyToClipboard(markdownText);
+      await copyTextToClipboard(markdownEditor.value);
+      showCopiedMessage();
     } catch (e) {
       console.error("Copy failed:", e);
       alert("Failed to copy Markdown: " + e.message);
@@ -21705,16 +21705,6 @@ ${selector} .arrowheadPath {
     }
   }
 
-  async function copyToClipboard(text) {
-    try {
-      await copyTextToClipboard(text);
-      showCopiedMessage();
-    } catch (err) {
-      console.error("Copy failed:", err);
-      alert("Failed to copy HTML: " + err.message);
-    }
-  }
-
   function showCopiedMessage() {
     const icon = copyMarkdownButton.querySelector('i');
     const label = copyMarkdownButton.querySelector('.btn-text');
@@ -27096,4 +27086,6 @@ ${selector} .arrowheadPath {
       activate: releaseNotesLaunch.activate
     });
   }
+  document.documentElement.dataset.appReady = 'true';
+  window.dispatchEvent(new Event('markdown-viewer:ready'));
 });
diff --git a/tests/README.md b/tests/README.md
new file mode 100644
index 00000000..4316d2bf
--- /dev/null
+++ b/tests/README.md
@@ -0,0 +1,69 @@
+# Automated Test Suite
+
+Markdown Viewer is a static browser application with a Neutralino desktop wrapper. The shared test suite uses Playwright to exercise editing, preview rendering, tabs, import/export, sharing, responsive layout, browser storage, and accessibility behavior.
+
+## Prerequisites
+
+- Node.js 22 (see `.nvmrc`)
+- npm
+
+Install the locked dependencies and Playwright browsers once:
+
+```bash
+npm ci
+npm run test:install
+```
+
+Use `npx playwright install --with-deps` instead on Linux when system browser dependencies are not already installed.
+
+## Commands
+
+```bash
+npm run build                  # static assets, JSON, HTML IDs/references, and JavaScript syntax
+npm run test:e2e               # complete Chromium suite
+npm test                       # static validation plus the complete Chromium suite
+npm run test:e2e:smoke         # fast Chromium smoke suite
+npm run test:e2e:cross-browser # smoke suite in Chromium, Firefox, and WebKit
+```
+
+Run one file or a matching test:
+
+```bash
+npm run test:e2e -- tests/e2e/editor.spec.js
+npm run test:e2e -- --grep "workspace backup"
+```
+
+For interactive debugging:
+
+```bash
+npm run test:e2e:ui
+npm run test:e2e:headed
+npm run test:e2e:report
+```
+
+The Playwright configuration starts a cross-platform Node static server automatically. Core browser libraries are fulfilled from locked npm packages during tests. External renderer, GitHub, and Live Share calls are mocked in the specifications that exercise those integrations.
+
+## Coverage
+
+- Static validation and application startup
+- Markdown editing, GFM rendering, formatting, tabs, and file import
+- Mermaid, PlantUML, Graphviz/DOT, D2, Vega-Lite, WaveDrom, Markmap, math, ABC notation, maps, and STL surfaces
+- Share Snapshot and locally mocked Live Share access behavior
+- Markdown, HTML, PNG, and browser-print PDF export paths
+- Workspace storage, migration, backup/restore, Private mode, and responsive behavior
+- Explorer, toolbar, dialogs, keyboard interaction, accessible names, and focus management
+
+Live Share tests use a local WebSocket/Yjs substitute and do not replace a Cloudflare Durable Object integration test. Production CDN availability and deployed Cloudflare bindings should be monitored separately from the deterministic local suite.
+
+## Contributor Workflow
+
+Before changing application behavior, run the focused specification for the affected area. Before opening a pull request, run:
+
+```bash
+npm test
+npm run test:e2e:cross-browser
+```
+
+Tests must be isolated, deterministic, and runnable locally on Windows, macOS, and Linux. Prefer user-facing roles and labels over DOM implementation selectors. Store fixtures under `tests/fixtures/`; never write artifacts to user-specific paths. Playwright captures screenshots and videos on failure under the ignored `test-results/` directory and writes its local HTML report to `playwright-report/`.
+
+This repository intentionally does not run the Playwright suite in GitHub Actions. Contributors are responsible for running the checks locally before requesting review or merging a change.
diff --git a/tests/e2e/document-sidebar.spec.js b/tests/e2e/document-sidebar.spec.js
new file mode 100644
index 00000000..39b199a3
--- /dev/null
+++ b/tests/e2e/document-sidebar.spec.js
@@ -0,0 +1,300 @@
+const { test, expect } = require('@playwright/test');
+const { openApp } = require('../helpers/app');
+
+test('file sidebar toggle lives beside the tab list and remains available', async ({ page }) => {
+  const errors = await openApp(page);
+  const tabBar = page.locator('#tab-bar');
+  const toggle = page.locator('#document-sidebar-open');
+
+  await expect(tabBar.locator(':scope > #document-sidebar-open')).toBeVisible();
+  await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  await expect(toggle).not.toHaveClass(/is-active/);
+  await expect(toggle).toHaveAttribute('aria-label', 'Close Explorer');
+  await expect(toggle.locator('i')).toHaveClass(/lucide-panel-left-close$/);
+
+  await toggle.click();
+  await expect(page.locator('body')).toHaveClass(/document-sidebar-collapsed/);
+  await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+  await expect(toggle).toHaveAttribute('aria-label', 'Open Explorer');
+  await expect(toggle.locator('i')).toHaveClass(/lucide-panel-left-open/);
+  await expect(page.locator('#document-sidebar')).toBeHidden();
+
+  await toggle.click();
+  await expect(page.locator('body')).not.toHaveClass(/document-sidebar-collapsed/);
+  await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  await expect(page.locator('#document-sidebar')).toBeVisible();
+  expect(errors).toEqual([]);
+});
+
+test('sidebar resizer matches the editor divider and remains keyboard operable', async ({ page }) => {
+  await openApp(page);
+  const sidebarResizer = page.locator('#document-sidebar-resizer');
+  const editorDivider = page.locator('.resize-divider');
+  await expect(sidebarResizer.locator('.resize-divider-handle')).toHaveCount(1);
+
+  const metrics = await page.evaluate(() => {
+    const sidebar = document.querySelector('#document-sidebar-resizer');
+    const divider = document.querySelector('.resize-divider');
+    const sidebarHandle = sidebar.querySelector('.resize-divider-handle');
+    const dividerHandle = divider.querySelector('.resize-divider-handle');
+    return {
+      sidebar: [getComputedStyle(sidebar).width, getComputedStyle(sidebarHandle).width, getComputedStyle(sidebarHandle).height],
+      divider: [getComputedStyle(divider).width, getComputedStyle(dividerHandle).width, getComputedStyle(dividerHandle).height]
+    };
+  });
+  expect(metrics.sidebar).toEqual(metrics.divider);
+
+  const initialValue = Number(await sidebarResizer.getAttribute('aria-valuenow'));
+  await sidebarResizer.focus();
+  await sidebarResizer.press('ArrowRight');
+  await expect(sidebarResizer).toHaveAttribute('aria-valuenow', String(initialValue + 10));
+});
+
+test('sidebar uses toolbar-sized Markdown icons and full-row interaction states', async ({ page }) => {
+  await openApp(page);
+
+  const iconSizes = await page.evaluate(() => {
+    const toolbarIcon = document.querySelector('.toolbar .tool-button i');
+    const documentIcon = document.querySelector('.document-tree-row[data-tree-type="document"] .document-tree-main > i');
+    return {
+      toolbar: getComputedStyle(toolbarIcon).fontSize,
+      document: getComputedStyle(documentIcon).fontSize
+    };
+  });
+  expect(iconSizes).toEqual({ toolbar: '14px', document: '14px' });
+
+  const secretRow = page.locator('.document-tree-row[data-tree-id="workspace_secret"]');
+  const secretMenu = secretRow.locator('.document-tree-action');
+  await expect(secretMenu).toHaveCSS('opacity', '0');
+  await secretRow.hover();
+  await expect(secretMenu).toHaveCSS('opacity', '1');
+
+  const background = await secretRow.evaluate(row => getComputedStyle(row).backgroundColor);
+  expect(background).not.toBe('rgba(0, 0, 0, 0)');
+});
+
+test('documents open on a single click and collapse all is available', async ({ page }) => {
+  await openApp(page);
+
+  const welcomeId = await page.locator('.document-tree-row[data-tree-type="document"]').first().getAttribute('data-document-id');
+  const welcomeRow = page.locator(`.document-tree-row[data-document-id="${welcomeId}"]`);
+  await page.locator('#tab-new-btn').click();
+  await expect(welcomeRow).not.toHaveClass(/is-active/);
+
+  await welcomeRow.locator('.document-tree-main').click();
+  await expect(welcomeRow).toHaveClass(/is-active/);
+  await expect(page.locator(`.tab-item[data-tab-id="${welcomeId}"]`)).toHaveClass(/active/);
+
+  const workspaceRow = page.locator('.document-tree-row[data-tree-id="workspace_default"]');
+  await expect(workspaceRow).toHaveAttribute('aria-expanded', 'true');
+  const openFolderIcon = workspaceRow.locator('.document-tree-main > i.lucide-folder-open');
+  await expect(openFolderIcon).toHaveCount(1);
+  const openFolderColor = await openFolderIcon.evaluate(icon => getComputedStyle(icon).color);
+  await page.locator('#document-sidebar-collapse-all').click();
+  await expect(workspaceRow).toHaveAttribute('aria-expanded', 'false');
+  const closedFolderIcon = workspaceRow.locator('.document-tree-main > i.lucide-folder');
+  await expect(closedFolderIcon).toHaveCount(1);
+  const closedFolderColor = await closedFolderIcon.evaluate(icon => getComputedStyle(icon).color);
+  expect(closedFolderColor).not.toBe(openFolderColor);
+  await expect(page.locator('#document-sidebar-collapse-all')).toHaveAttribute('aria-label', 'Expand all folders');
+  await expect(page.locator('#document-sidebar-collapse-all i')).toHaveClass(/lucide-unfold-vertical/);
+  await page.locator('#document-sidebar-collapse-all').click();
+  await expect(workspaceRow).toHaveAttribute('aria-expanded', 'true');
+  await expect(page.locator('#document-sidebar-collapse-all')).toHaveAttribute('aria-label', 'Collapse all folders');
+});
+
+test('workspace rows toggle from their name and keyboard', async ({ page }) => {
+  await openApp(page);
+  let workspace = page.locator('.document-tree-row[data-tree-id="workspace_default"]');
+  await expect(workspace).toHaveAttribute('aria-expanded', 'true');
+
+  await workspace.locator('.document-tree-label').click();
+  workspace = page.locator('.document-tree-row[data-tree-id="workspace_default"]');
+  await expect(workspace).toHaveAttribute('aria-expanded', 'false');
+
+  await workspace.focus();
+  await workspace.press('Enter');
+  workspace = page.locator('.document-tree-row[data-tree-id="workspace_default"]');
+  await expect(workspace).toHaveAttribute('aria-expanded', 'true');
+});
+
+test('folder menus contain management actions without a redundant Open action', async ({ page }) => {
+  await openApp(page);
+  await page.locator('#sidebar-new-folder').click();
+  await page.locator('#document-name-modal-input').fill('Menu folder');
+  await page.locator('#document-name-modal-confirm').click();
+
+  const folder = page.locator('.document-tree-row[data-tree-type="folder"]', { hasText: 'Menu folder' });
+  await folder.click({ button: 'right' });
+  const menu = page.locator('.document-menu-context.open');
+  await expect(menu).toBeVisible();
+  await expect(menu.getByRole('menuitem')).toContainText(['New file', 'New folder', 'Rename', 'Delete']);
+  await expect(menu.getByRole('menuitem', { name: /^Open$/ })).toHaveCount(0);
+});
+
+test('folder rows toggle from the label and keyboard while keeping aria-expanded current', async ({ page }) => {
+  await openApp(page);
+  await page.locator('#sidebar-new-folder').click();
+  await page.locator('#document-name-modal-input').fill('Keyboard folder');
+  await page.locator('#document-name-modal-confirm').click();
+
+  let folder = page.locator('.document-tree-row[data-tree-type="folder"]', { hasText: 'Keyboard folder' });
+  await expect(folder).toHaveAttribute('aria-expanded', 'true');
+  await folder.locator('.document-tree-label').click();
+  folder = page.locator('.document-tree-row[data-tree-type="folder"]', { hasText: 'Keyboard folder' });
+  await expect(folder).toHaveAttribute('aria-expanded', 'false');
+  await folder.focus();
+  await folder.press('Enter');
+  folder = page.locator('.document-tree-row[data-tree-type="folder"]', { hasText: 'Keyboard folder' });
+  await expect(folder).toHaveAttribute('aria-expanded', 'true');
+  await folder.focus();
+  await folder.press('Space');
+  await expect(page.locator('.document-tree-row[data-tree-type="folder"]', { hasText: 'Keyboard folder' })).toHaveAttribute('aria-expanded', 'false');
+});
+
+test('Explorer supports modifier selection, contextual bulk delete, and selection clearing', async ({ page }) => {
+  await openApp(page);
+  await page.locator('#tab-new-btn').click();
+  await page.locator('#tab-new-btn').click();
+  const rows = page.locator('.document-tree-row[data-tree-type="document"]:not(.document-tree-temporary)');
+  await expect(rows).toHaveCount(3);
+
+  await rows.nth(0).focus();
+  await rows.nth(0).press('Shift+F10');
+  await expect(page.locator('.document-menu-context.open')).toHaveCount(1);
+  await page.keyboard.press('Escape');
+  await expect(rows.nth(0)).toBeFocused();
+
+  await rows.nth(0).click();
+  await rows.nth(1).click({ modifiers: ['Control'] });
+  await expect(page.locator('.document-tree-row.is-selected')).toHaveCount(2);
+  await rows.nth(2).click({ modifiers: ['Meta'] });
+  await expect(page.locator('.document-tree-row.is-selected')).toHaveCount(3);
+  await rows.nth(2).click({ modifiers: ['Meta'] });
+  await expect(page.locator('.document-tree-row.is-selected')).toHaveCount(2);
+  await rows.nth(0).click();
+  await rows.nth(2).click({ modifiers: ['Shift'] });
+  await expect(page.locator('.document-tree-row.is-selected')).toHaveCount(3);
+
+  await rows.nth(1).click({ button: 'right' });
+  const contextMenu = page.locator('.document-menu-context.open');
+  await expect(contextMenu).toHaveCount(1);
+  await expect(contextMenu.getByRole('menuitem')).toHaveText([
+    'Open all',
+    'Move to…',
+    'Delete 3 selected items'
+  ]);
+  await contextMenu.getByRole('menuitem', { name: 'Move to…' }).click();
+  await expect(page.locator('#document-move-modal')).toBeVisible();
+  await expect(page.locator('#document-move-modal-title')).toHaveText('Move 3 selected files');
+  await page.locator('#document-move-modal-cancel').click();
+
+  await rows.nth(1).click({ button: 'right' });
+  await page.locator('.document-menu-context.open').getByRole('menuitem', { name: 'Delete 3 selected items' }).click();
+  await expect(page.locator('#document-confirm-modal')).toBeVisible();
+  await expect(page.locator('#document-confirm-modal-title')).toHaveText('Delete 3 selected items?');
+  await page.locator('#document-confirm-modal-cancel').click();
+
+  await rows.nth(1).click({ button: 'right' });
+  await page.locator('.document-menu-context.open').getByRole('menuitem', { name: 'Delete 3 selected items' }).click();
+  await page.locator('#document-confirm-modal-confirm').click();
+  await expect(page.locator('.document-tree-row[data-tree-type="document"]:not(.document-tree-temporary)')).toHaveCount(0);
+
+  await page.locator('#document-tree').evaluate(tree => tree.dispatchEvent(new MouseEvent('click', { bubbles: true })));
+  await expect(page.locator('.document-tree-row.is-selected')).toHaveCount(0);
+});
+
+test('Explorer opens and moves multiple selected documents', async ({ page }) => {
+  await openApp(page);
+  await page.locator('#sidebar-new-folder').click();
+  await page.locator('#document-name-modal-input').fill('Bulk destination');
+  await page.locator('#document-name-modal-confirm').click();
+
+  await page.locator('#tab-new-btn').click();
+  const firstId = await page.locator('#tab-list .tab-item.active').getAttribute('data-tab-id');
+  await page.locator('#tab-new-btn').click();
+  const secondId = await page.locator('#tab-list .tab-item.active').getAttribute('data-tab-id');
+  await page.locator(`#tab-list .tab-item[data-tab-id="${secondId}"] .tab-close-btn`).click();
+  await page.locator(`#tab-list .tab-item[data-tab-id="${firstId}"] .tab-close-btn`).click();
+
+  const firstRow = page.locator(`.document-tree-row[data-document-id="${firstId}"]`);
+  const secondRow = page.locator(`.document-tree-row[data-document-id="${secondId}"]`);
+  await firstRow.click();
+  await secondRow.click({ modifiers: ['Control'] });
+  await secondRow.click({ button: 'right' });
+  await page.locator('.document-menu-context.open').getByRole('menuitem', { name: 'Open all' }).click();
+  await expect(page.locator(`#tab-list .tab-item[data-tab-id="${firstId}"]`)).toBeVisible();
+  await expect(page.locator(`#tab-list .tab-item[data-tab-id="${secondId}"]`)).toBeVisible();
+
+  await firstRow.click();
+  await secondRow.click({ modifiers: ['Control'] });
+  await secondRow.click({ button: 'right' });
+  await page.locator('.document-menu-context.open').getByRole('menuitem', { name: 'Move to…' }).click();
+  await page.locator('#document-move-destination').selectOption({ label: 'Workspace / Bulk destination' });
+  await page.locator('#document-move-modal-confirm').click();
+  await expect(firstRow).toHaveAttribute('data-tree-depth', '2');
+  await expect(secondRow).toHaveAttribute('data-tree-depth', '2');
+});
+
+test('sidebar filters use a compact three-part segmented control', async ({ page }) => {
+  await openApp(page);
+  const filters = page.locator('.document-sidebar-filters');
+  await expect(filters.locator('.document-filter-btn')).toHaveText(['All', 'Recent', 'Favs']);
+  const layout = await filters.evaluate(element => {
+    const style = getComputedStyle(element);
+    return {
+      columns: style.gridTemplateColumns.split(' ').length,
+      radius: style.borderRadius,
+      borderStyle: style.borderStyle
+    };
+  });
+  expect(layout.columns).toBe(3);
+  expect(layout.radius).toBe('6px');
+  expect(layout.borderStyle).toBe('solid');
+  await page.locator('[data-document-filter="recent"]').click();
+  await expect(page.locator('[data-document-filter="recent"]')).toHaveClass(/is-active/);
+  await expect(page.locator('[data-document-filter="all"]')).not.toHaveClass(/is-active/);
+});
+
+test('mobile keeps a touch-sized sidebar toggle in the tab bar', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await openApp(page);
+
+  const toggle = page.locator('#document-sidebar-open');
+  await expect(page.locator('#tab-bar')).toBeVisible();
+  await expect(toggle).toBeVisible();
+  await expect(toggle).toHaveAttribute('aria-expanded', 'false');
+
+  const box = await toggle.boundingBox();
+  expect(box.width).toBeGreaterThanOrEqual(44);
+  expect(box.height).toBeGreaterThanOrEqual(44);
+
+  await toggle.click();
+  await expect(page.locator('body')).toHaveClass(/document-sidebar-mobile-open/);
+  await expect(toggle).toHaveAttribute('aria-expanded', 'true');
+  await expect(page.locator('#document-sidebar-search')).not.toBeFocused();
+  await page.locator('#document-sidebar-close').click();
+  await expect(page.locator('body')).not.toHaveClass(/document-sidebar-mobile-open/);
+
+  const overflow = await page.evaluate(() => ({
+    viewport: document.documentElement.clientWidth,
+    page: document.documentElement.scrollWidth
+  }));
+  expect(overflow.page).toBeLessThanOrEqual(overflow.viewport);
+});
+
+test('sidebar remains usable on a small landscape viewport with reduced motion', async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await page.setViewportSize({ width: 667, height: 375 });
+  await openApp(page);
+
+  await expect(page.locator('#document-sidebar-open')).toBeVisible();
+  const transitionDuration = await page.locator('.document-tree-row').first().evaluate(row => getComputedStyle(row).transitionDuration);
+  expect(transitionDuration).toBe('0s');
+
+  const overflow = await page.evaluate(() => ({
+    viewport: document.documentElement.clientWidth,
+    page: document.documentElement.scrollWidth
+  }));
+  expect(overflow.page).toBeLessThanOrEqual(overflow.viewport);
+});
diff --git a/tests/e2e/editor.spec.js b/tests/e2e/editor.spec.js
new file mode 100644
index 00000000..f7cc1ec9
--- /dev/null
+++ b/tests/e2e/editor.spec.js
@@ -0,0 +1,121 @@
+const { test, expect } = require('@playwright/test');
+const {
+  fixture,
+  openApp,
+  setEditorContent,
+  editorValue,
+  storedDocuments,
+  waitForPreviewText
+} = require('../helpers/app');
+
+test.beforeEach(async ({ page }) => {
+  await openApp(page);
+});
+
+test('typing markdown updates the live preview', async ({ page }) => {
+  await setEditorContent(page, await fixture('basic.md'));
+
+  await expect(page.locator('#markdown-preview h1')).toHaveText('Local Test Document');
+  await expect(page.locator('#markdown-preview strong')).toContainText('bold text');
+  await expect(page.locator('#markdown-preview blockquote')).toContainText('A blockquote');
+});
+
+test('renders verified GFM features', async ({ page }) => {
+  await setEditorContent(page, await fixture('gfm.md'));
+
+  await expect(page.locator('#markdown-preview h1')).toHaveText('GFM Coverage');
+  await expect(page.locator('#markdown-preview table').filter({ hasText: 'Tables' })).toBeVisible();
+  await expect(page.locator('#markdown-preview input[type="checkbox"]')).toHaveCount(2);
+  await expect(page.locator('#markdown-preview pre code')).toContainText('console.log');
+  await expect(page.locator('#markdown-preview a[href="https://example.com"]')).toContainText('Example link');
+  await expect(page.locator('#markdown-preview blockquote')).toContainText('GitHub-style blockquote');
+  await expect(page.locator('#markdown-preview .footnotes')).toContainText('Footnote body');
+});
+
+test('view mode buttons switch editor, split, and preview layouts', async ({ page }) => {
+  const container = page.locator('.content-container');
+
+  await page.getByRole('button', { name: 'Edit Markdown' }).click();
+  await expect(container).toHaveClass(/view-editor-only/);
+  await expect(page.getByRole('button', { name: 'Edit Markdown' })).toHaveAttribute('aria-pressed', 'true');
+
+  await page.getByRole('button', { name: 'Preview Markdown' }).click();
+  await expect(container).toHaveClass(/view-preview-only/);
+  await expect(page.getByRole('button', { name: 'Preview Markdown' })).toHaveAttribute('aria-pressed', 'true');
+
+  await page.getByRole('button', { name: 'Split editor and preview' }).click();
+  await expect(container).toHaveClass(/view-split/);
+});
+
+test('formatting toolbar applies bold to the selected text', async ({ page }) => {
+  await setEditorContent(page, 'bold me');
+  await page.locator('#markdown-editor').evaluate(editor => {
+    editor.focus();
+    editor.setSelectionRange(0, editor.value.length);
+  });
+
+  await page.getByRole('button', { name: 'Bold' }).click();
+
+  await expect.poll(() => editorValue(page)).toBe('**bold me**');
+  await expect(page.locator('#markdown-preview strong')).toHaveText('bold me');
+});
+
+test('tabs can be created, renamed, duplicated, and deleted', async ({ page }) => {
+  await page.locator('#tab-new-btn').click();
+  await expect(page.locator('#tab-list [role="tab"]')).toHaveCount(2);
+
+  await setEditorContent(page, '# Tab Content');
+  await page.locator('#tab-list .tab-item.active .tab-menu-btn').click();
+  await page.locator('.tab-menu-dropdown.open [data-action="rename"]').click();
+  await page.locator('#rename-modal-input').fill('Renamed Test Tab');
+  await page.locator('#rename-modal-confirm').click();
+  await expect(page.locator('#tab-list .tab-item.active .tab-title')).toHaveText('Renamed Test Tab');
+
+  await page.locator('#tab-list .tab-item.active .tab-menu-btn').click();
+  await page.locator('.tab-menu-dropdown.open [data-action="duplicate"]').click();
+  await expect(page.locator('#tab-list [role="tab"]')).toHaveCount(3);
+  await expect(page.locator('#tab-list .tab-item.active .tab-title')).toHaveText('Renamed Test Tab (copy)');
+  await waitForPreviewText(page, 'Tab Content');
+
+  await page.locator('#tab-list .tab-item.active .tab-menu-btn').click();
+  await page.locator('.tab-menu-dropdown.open [data-action="close"]').click();
+  await expect(page.locator('#tab-list [role="tab"]')).toHaveCount(2);
+});
+
+test('imports a local Markdown file into Explorer without opening a tab', async ({ page }) => {
+  const initialTabCount = await page.locator('#tab-list [role="tab"]').count();
+  await page.locator('#file-input').setInputFiles('tests/fixtures/imported-file.md');
+
+  await expect(page.locator('#tab-list [role="tab"]')).toHaveCount(initialTabCount);
+  await expect(page.locator('#tab-list .tab-title').filter({ hasText: 'imported-file' })).toHaveCount(0);
+  await expect.poll(async () => (await storedDocuments(page)).some(document => document.title === 'imported-file' && document.isOpen === false)).toBe(true);
+  const importedRow = page.locator('.document-tree-row[data-document-id]').filter({ hasText: 'imported-file' });
+  await expect(importedRow).toBeVisible();
+  await importedRow.locator('.document-tree-main').click();
+  await expect(page.locator('#tab-list .tab-item.active .tab-title')).toHaveText('imported-file');
+  await expect(page.locator('#markdown-preview h1')).toHaveText('Imported Fixture');
+});
+
+test('imports a dropped Markdown file into Explorer without opening a tab', async ({ page }) => {
+  const body = await fixture('imported-file.md');
+  const initialTabCount = await page.locator('#tab-list [role="tab"]').count();
+  const dataTransfer = await page.evaluateHandle(({ name, body }) => {
+    const transfer = new DataTransfer();
+    transfer.items.add(new File([body], name, { type: 'text/markdown' }));
+    return transfer;
+  }, { name: 'dropped-file.md', body });
+
+  await page.dispatchEvent('body', 'dragenter', { dataTransfer });
+  await expect(page.locator('#drag-overlay')).toHaveClass(/active/);
+
+  await page.dispatchEvent('body', 'drop', { dataTransfer });
+
+  await expect(page.locator('#drag-overlay')).not.toHaveClass(/active/);
+  await expect(page.locator('#tab-list [role="tab"]')).toHaveCount(initialTabCount);
+  await expect(page.locator('#tab-list .tab-title').filter({ hasText: 'dropped-file' })).toHaveCount(0);
+  await expect.poll(async () => (await storedDocuments(page)).some(document => document.title === 'dropped-file' && document.isOpen === false)).toBe(true);
+  const droppedRow = page.locator('.document-tree-row[data-document-id]').filter({ hasText: 'dropped-file' });
+  await droppedRow.locator('.document-tree-main').click();
+  await expect(page.locator('#tab-list .tab-item.active .tab-title')).toHaveText('dropped-file');
+  await expect(page.locator('#markdown-preview h1')).toHaveText('Imported Fixture');
+});
diff --git a/tests/e2e/export.spec.js b/tests/e2e/export.spec.js
new file mode 100644
index 00000000..7d14d9cb
--- /dev/null
+++ b/tests/e2e/export.spec.js
@@ -0,0 +1,59 @@
+const { test, expect } = require('@playwright/test');
+const {
+  fixture,
+  openApp,
+  setEditorContent,
+  stubExportLibraries
+} = require('../helpers/app');
+
+test.beforeEach(async ({ page }) => {
+  await stubExportLibraries(page);
+  await openApp(page);
+  await setEditorContent(page, await fixture('export.md'));
+  await page.evaluate(() => {
+    window.__savedFiles = [];
+    window.saveAs = (blob, name) => {
+      window.__savedFiles.push({
+        name,
+        type: blob && blob.type ? blob.type : '',
+        size: blob && typeof blob.size === 'number' ? blob.size : 0
+      });
+    };
+  });
+});
+
+test('exports Markdown as a download', async ({ page }) => {
+  await page.locator('#export-md').dispatchEvent('click');
+
+  await expect.poll(() => page.evaluate(() => window.__savedFiles.at(-1))).toMatchObject({
+    name: expect.stringMatching(/\.md$/),
+    type: expect.stringContaining('text/markdown')
+  });
+});
+
+test('exports rendered HTML as a download', async ({ page }) => {
+  await page.locator('#export-html').dispatchEvent('click');
+
+  await expect.poll(() => page.evaluate(() => window.__savedFiles.at(-1))).toMatchObject({
+    name: expect.stringMatching(/\.html$/),
+    type: expect.stringContaining('text/html')
+  });
+});
+
+test('browser PDF export opens options and triggers window.print for vector mode', async ({ page }) => {
+  await page.locator('#export-pdf').dispatchEvent('click');
+  await expect(page.locator('#pdf-export-modal')).toHaveClass(/is-visible/);
+  await expect(page.locator('#pdf-export-mode-vector')).toBeChecked();
+
+  await page.locator('#pdf-export-confirm').click();
+  await expect.poll(() => page.evaluate(() => window.__printCalled)).toBeGreaterThan(0);
+});
+
+test('PNG export produces an image download with a mocked local canvas renderer', async ({ page }) => {
+  await page.locator('#export-png').dispatchEvent('click');
+
+  await expect.poll(() => page.evaluate(() => window.__savedFiles.at(-1)), { timeout: 20_000 }).toMatchObject({
+    name: expect.stringMatching(/\.png$/),
+    type: expect.stringContaining('image/png')
+  });
+});
diff --git a/tests/e2e/github-import.spec.js b/tests/e2e/github-import.spec.js
new file mode 100644
index 00000000..25dcd65f
--- /dev/null
+++ b/tests/e2e/github-import.spec.js
@@ -0,0 +1,913 @@
+const { test, expect } = require('@playwright/test');
+const { openApp, storedDocuments } = require('../helpers/app');
+
+const TEST_COMMITS = {
+  handbook: '1111111111111111111111111111111111111111',
+  large: '2222222222222222222222222222222222222222',
+  importable: '3333333333333333333333333333333333333333',
+  mobile: '4444444444444444444444444444444444444444'
+};
+
+async function openGitHubImporter(page) {
+  if (await page.locator('#importDropdown').isVisible()) {
+    await page.locator('#importDropdown').click();
+    await page.locator('#import-from-github').click();
+  } else {
+    await page.locator('#mobile-menu-toggle').click();
+    await page.locator('[aria-controls="mobile-menu-new-panel"]').click();
+    await page.locator('#mobile-import-github-button').click();
+  }
+  await expect(page.locator('#github-import-modal')).toHaveClass(/is-visible/);
+}
+
+async function fulfillGitHubUser(route) {
+  await route.fulfill({
+    status: 200,
+    contentType: 'application/json',
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    body: JSON.stringify({ login: 'octocat' })
+  });
+}
+
+test('shows every Markdown file returned by a large repository tree', async ({ page }) => {
+  let releaseRepositoryRequest;
+  const repositoryRequestGate = new Promise(resolve => { releaseRepositoryRequest = resolve; });
+  let releaseTreeRequest;
+  const treeRequestGate = new Promise(resolve => { releaseTreeRequest = resolve; });
+  const markdownFiles = Array.from({ length: 2717 }, (_, index) => ({
+    path: `docs/guide-${String(index + 1).padStart(4, '0')}.md`,
+    type: 'blob',
+    sha: `file-${index + 1}`
+  }));
+
+  await page.route('https://api.github.com/**', async route => {
+    const url = new URL(route.request().url());
+    if (url.pathname === '/repos/acme/handbook') {
+      await repositoryRequestGate;
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ default_branch: 'main', private: false })
+      });
+      return;
+    }
+    if (decodeURIComponent(url.pathname) === '/repos/acme/handbook/commits/main') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ sha: TEST_COMMITS.handbook })
+      });
+      return;
+    }
+    if (url.pathname === `/repos/acme/handbook/git/trees/${TEST_COMMITS.handbook}` && url.searchParams.get('recursive') === '1') {
+      await treeRequestGate;
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ truncated: false, tree: markdownFiles })
+      });
+      return;
+    }
+    await route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
+  });
+
+  await openApp(page);
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await openGitHubImporter(page);
+  await expect(page.locator('#github-import-modal .reset-modal-box')).toHaveCSS('max-width', '520px');
+  await page.locator('#github-import-url').fill('https://github.com/acme/handbook/tree/main');
+  await page.locator('#github-import-submit').click();
+  await expect(page.locator('#github-import-submit .github-import-button-spinner')).toBeVisible();
+  await expect(page.locator('#github-import-submit')).toContainText('Loading');
+  await expect(page.locator('#github-import-modal .reset-modal-box')).toHaveAttribute('aria-busy', 'true');
+  await expect(page.locator('#github-import-modal')).not.toHaveClass(/is-selection-step/);
+  releaseRepositoryRequest();
+
+  await expect(page.locator('#github-import-modal')).toHaveClass(/is-selection-step/);
+  await expect(page.locator('#github-import-modal')).toHaveClass(/is-selection-loading/);
+  await expect(page.locator('#github-import-tree .github-import-tree-skeleton')).toBeVisible();
+  await expect(page.locator('#github-import-repository-name')).toHaveText('acme/handbook');
+  await expect(page.locator('#github-import-ref')).toHaveText('main');
+  releaseTreeRequest();
+
+  const fileButtons = page.locator('#github-import-tree .github-tree-file-btn');
+  await expect(fileButtons).toHaveCount(2717);
+  await expect(page.locator('#github-import-modal')).not.toHaveClass(/is-selection-loading/);
+  await expect(page.locator('#github-import-submit .github-import-button-spinner')).toHaveCount(0);
+  await expect(page.locator('#github-import-submit')).toHaveText('Import Selected');
+  await expect(page.locator('#github-import-modal .reset-modal-box')).toHaveAttribute('aria-busy', 'false');
+  await expect(page.locator('#github-import-error')).toBeHidden();
+  await expect(fileButtons.filter({ hasText: 'guide-0001.md' })).toHaveCount(1);
+  await expect(fileButtons.filter({ hasText: 'guide-2717.md' })).toHaveCount(1);
+  await expect(page.locator('#github-import-total-count')).toHaveCount(0);
+  await expect(page.locator('#github-import-selected-count')).toHaveText('1 selected');
+  await expect(page.locator('.github-tree-folder-icon').first()).toHaveClass(/lucide-folder-open/);
+  await expect(page.locator('.github-tree-file-icon').first()).toHaveClass(/lucide-file-text/);
+  await expect(page.locator('.github-tree-folder-icon').first()).toHaveCSS('width', '14px');
+  await expect(page.locator('.github-tree-folder-icon').first()).toHaveCSS('height', '14px');
+  await expect(page.locator('.github-tree-file-icon').first()).toHaveCSS('width', '14px');
+  await expect(page.locator('.github-tree-file-icon').first()).toHaveCSS('height', '14px');
+  await expect(page.locator('#github-import-toggle-folders .lucide')).toHaveCSS('width', '14px');
+  await expect(page.locator('#github-import-select-all .lucide')).toHaveCSS('width', '14px');
+  await expect(page.locator('#github-import-repository-name')).toHaveText('acme/handbook');
+  await expect(page.locator('#github-import-commit')).toHaveText(TEST_COMMITS.handbook.slice(0, 7));
+  await expect(page.locator('#github-import-ref')).toHaveText('main');
+  await expect(page.locator('#github-import-ref-item')).toBeVisible();
+  await expect(page.locator('.github-import-tree-name').first()).toHaveCSS('font-size', '12px');
+
+  const modalGeometry = await page.locator('#github-import-modal .reset-modal-box').evaluate(element => ({
+    width: element.getBoundingClientRect().width
+  }));
+  expect(modalGeometry.width).toBeGreaterThan(520);
+  expect(modalGeometry.width).toBeLessThanOrEqual(760);
+
+  const folderToggleButton = page.locator('#github-import-toggle-folders');
+  const folderLabels = page.locator('#github-import-tree .github-tree-folder-label');
+  const firstFolderIcon = page.locator('.github-tree-folder-icon').first();
+  await expect(folderToggleButton).toHaveClass(/tool-button/);
+  const normalFolderToggleColor = await folderToggleButton.evaluate(button => getComputedStyle(button).color);
+  const expandedFolderColor = await firstFolderIcon.evaluate(icon => getComputedStyle(icon).color);
+  await folderToggleButton.click();
+  await expect(folderToggleButton).toHaveAttribute('aria-label', 'Expand all folders');
+  await expect(folderToggleButton).not.toHaveAttribute('aria-pressed');
+  await expect(folderToggleButton.locator('i')).toHaveClass(/lucide-unfold-vertical/);
+  await expect(folderToggleButton).toHaveCSS('color', normalFolderToggleColor);
+  await expect(folderLabels.first()).toHaveAttribute('aria-expanded', 'false');
+  await expect(firstFolderIcon).toHaveClass(/lucide-folder(?!-open)/);
+  const collapsedFolderColor = await firstFolderIcon.evaluate(icon => getComputedStyle(icon).color);
+  expect(collapsedFolderColor).not.toBe(expandedFolderColor);
+  await folderToggleButton.click();
+  await expect(folderToggleButton).toHaveAttribute('aria-label', 'Collapse all folders');
+  await expect(folderLabels.first()).toHaveAttribute('aria-expanded', 'true');
+  await expect(firstFolderIcon).toHaveClass(/lucide-folder-open/);
+  await expect(firstFolderIcon).toHaveCSS('color', expandedFolderColor);
+
+  const selectAllButton = page.locator('#github-import-select-all');
+  await expect(selectAllButton).toHaveClass(/tool-button/);
+  await selectAllButton.click();
+  await expect(page.locator('#github-import-selected-count')).toHaveText('2,717 selected');
+  await expect(selectAllButton).toHaveAttribute('aria-label', 'Deselect all files');
+  await expect(selectAllButton.locator('i')).toHaveClass(/lucide-check-check/);
+  await expect(selectAllButton).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
+  await selectAllButton.click();
+  await expect(page.locator('#github-import-selected-count')).toHaveText('0 selected');
+  await expect(selectAllButton).toHaveAttribute('aria-label', 'Select all files');
+
+  await page.locator('#github-import-search').fill('guide-2717');
+  await expect(fileButtons).toHaveCount(1);
+  await expect(fileButtons).toContainText('guide-2717.md');
+  await page.locator('#github-import-search').press('Escape');
+  await expect(fileButtons).toHaveCount(2717);
+});
+
+test('walks every subtree when GitHub marks the recursive tree response as truncated', async ({ page }) => {
+  const requestedTrees = [];
+
+  await page.route('https://api.github.com/**', async route => {
+    const url = new URL(route.request().url());
+    requestedTrees.push(url.pathname + url.search);
+
+    if (url.pathname === '/repos/acme/large-repo') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ default_branch: 'main', private: false })
+      });
+      return;
+    }
+    if (decodeURIComponent(url.pathname) === '/repos/acme/large-repo/commits/main') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ sha: TEST_COMMITS.large })
+      });
+      return;
+    }
+    if (url.pathname === `/repos/acme/large-repo/git/trees/${TEST_COMMITS.large}` && url.searchParams.get('recursive') === '1') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ truncated: true, tree: [] })
+      });
+      return;
+    }
+    if (url.pathname === `/repos/acme/large-repo/git/trees/${TEST_COMMITS.large}`) {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          truncated: false,
+          tree: [
+            { path: 'README.md', type: 'blob', sha: 'readme' },
+            { path: 'docs', type: 'tree', sha: 'docs-tree' },
+            { path: 'src', type: 'tree', sha: 'src-tree' }
+          ]
+        })
+      });
+      return;
+    }
+    if (url.pathname === '/repos/acme/large-repo/git/trees/docs-tree') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          truncated: false,
+          tree: [
+            { path: 'getting-started.md', type: 'blob', sha: 'guide' },
+            { path: 'reference.markdown', type: 'blob', sha: 'reference' },
+            { path: 'logo.png', type: 'blob', sha: 'logo' }
+          ]
+        })
+      });
+      return;
+    }
+    if (url.pathname === '/repos/acme/large-repo/git/trees/src-tree') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          truncated: false,
+          tree: [{ path: 'index.js', type: 'blob', sha: 'source' }]
+        })
+      });
+      return;
+    }
+    await route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
+  });
+
+  await openApp(page);
+  await openGitHubImporter(page);
+  await page.locator('#github-import-url').fill('https://github.com/acme/large-repo');
+  await page.locator('#github-import-submit').click();
+
+  await expect(page.locator('#github-import-tree .github-tree-file-btn')).toHaveCount(3);
+  await expect(page.locator('#github-import-error')).toBeHidden();
+  await expect(page.locator('#github-import-ref-item')).toBeVisible();
+  await expect(page.locator('#github-import-ref')).toHaveText('main');
+  await expect(page.locator('#github-import-commit')).toHaveText(TEST_COMMITS.large.slice(0, 7));
+  expect(requestedTrees).toContain(`/repos/acme/large-repo/git/trees/${TEST_COMMITS.large}?recursive=1`);
+  expect(requestedTrees).toContain(`/repos/acme/large-repo/git/trees/${TEST_COMMITS.large}`);
+  expect(requestedTrees).toContain('/repos/acme/large-repo/git/trees/docs-tree');
+  expect(requestedTrees).toContain('/repos/acme/large-repo/git/trees/src-tree');
+});
+
+test('resolves slash-containing branches and shows the immutable commit beside the repository', async ({ page }) => {
+  const commitSha = 'abcdef1234567890abcdef1234567890abcdef12';
+  const branchName = 'release/2026/very-long-production-branch';
+  const attemptedRefs = [];
+
+  await page.route('https://api.github.com/**', async route => {
+    const url = new URL(route.request().url());
+    const pathname = decodeURIComponent(url.pathname);
+    if (pathname === '/repos/acme/branch-repo') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ default_branch: 'main', private: false })
+      });
+      return;
+    }
+    if (pathname.startsWith('/repos/acme/branch-repo/commits/')) {
+      const ref = pathname.slice('/repos/acme/branch-repo/commits/'.length);
+      attemptedRefs.push(ref);
+      if (ref === branchName) {
+        await route.fulfill({
+          status: 200,
+          contentType: 'application/json',
+          body: JSON.stringify({ sha: commitSha })
+        });
+      } else {
+        await route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
+      }
+      return;
+    }
+    if (pathname === `/repos/acme/branch-repo/git/trees/${commitSha}` && url.searchParams.get('recursive') === '1') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          truncated: false,
+          tree: [
+            { path: 'docs/one.md', type: 'blob', sha: 'one' },
+            { path: 'docs/two.markdown', type: 'blob', sha: 'two' }
+          ]
+        })
+      });
+      return;
+    }
+    await route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
+  });
+
+  await openApp(page);
+  await openGitHubImporter(page);
+  const compactWidth = await page.locator('#github-import-modal .reset-modal-box').evaluate(element => element.getBoundingClientRect().width);
+  expect(compactWidth).toBeLessThanOrEqual(520);
+
+  await page.locator('#github-import-url').fill(`https://github.com/acme/branch-repo/tree/${branchName}/docs`);
+  await page.locator('#github-import-submit').click();
+
+  await expect(page.locator('#github-import-title')).toHaveText('Select Markdown files to import');
+  await expect(page.locator('#github-import-modal')).toHaveClass(/is-selection-step/);
+  await expect(page.locator('#github-import-repository-name')).toHaveText('acme/branch-repo');
+  await expect(page.locator('#github-import-commit')).toHaveText('abcdef1');
+  await expect(page.locator('#github-import-ref')).toHaveText(branchName);
+  await expect(page.locator('#github-import-ref-item')).toBeVisible();
+  await expect(page.locator('#github-import-ref-item')).toHaveAttribute('title', branchName);
+  await expect(page.locator('#github-import-ref-item')).toHaveAttribute('aria-label', branchName);
+  await expect(page.locator('#github-import-base-path')).toHaveText('/ docs');
+  await expect(page.locator('#github-import-commit-link')).toHaveAttribute('href', `https://github.com/acme/branch-repo/tree/${commitSha}`);
+  expect(attemptedRefs).toEqual([`${branchName}/docs`, branchName]);
+  const truncatedRef = await page.locator('#github-import-ref').evaluate(element => element.scrollWidth > element.clientWidth);
+  expect(truncatedRef).toBe(true);
+  const refGeometry = await page.locator('#github-import-repository-context').evaluate(context => {
+    const name = context.querySelector('#github-import-repository-name').getBoundingClientRect();
+    const branch = context.querySelector('.github-import-ref').getBoundingClientRect();
+    const commit = context.querySelector('.github-import-commit-link').getBoundingClientRect();
+    return {
+      nameCenter: name.top + (name.height / 2),
+      branchCenter: branch.top + (branch.height / 2),
+      commitCenter: commit.top + (commit.height / 2),
+      branchWidth: branch.width,
+      branchBesideName: name.right <= branch.left,
+      branchBeforeCommit: branch.right <= commit.left
+    };
+  });
+  expect(Math.abs(refGeometry.nameCenter - refGeometry.branchCenter)).toBeLessThanOrEqual(1);
+  expect(Math.abs(refGeometry.branchCenter - refGeometry.commitCenter)).toBeLessThanOrEqual(1);
+  expect(refGeometry.branchWidth).toBeGreaterThan(120);
+  expect(refGeometry.branchBesideName).toBe(true);
+  expect(refGeometry.branchBeforeCommit).toBe(true);
+  const repositoryLine = await page.locator('#github-import-repository-context').evaluate(context => {
+    const copy = context.querySelector('.github-import-repository-copy').getBoundingClientRect();
+    const heading = context.querySelector('.github-import-repository-heading').getBoundingClientRect();
+    const meta = context.querySelector('.github-import-repository-meta').getBoundingClientRect();
+    const bounds = context.getBoundingClientRect();
+    return {
+      headingCenter: heading.top + (heading.height / 2),
+      metaCenter: meta.top + (meta.height / 2),
+      copyBeforeMeta: copy.right <= meta.left,
+      staysInsideContext: meta.right <= bounds.right,
+      height: bounds.height
+    };
+  });
+  expect(Math.abs(repositoryLine.headingCenter - repositoryLine.metaCenter)).toBeLessThanOrEqual(1);
+  expect(repositoryLine.copyBeforeMeta).toBe(true);
+  expect(repositoryLine.staysInsideContext).toBe(true);
+  expect(repositoryLine.height).toBeLessThanOrEqual(40);
+
+  const selectionControls = await page.locator('#github-import-selection-toolbar').evaluate(toolbar => {
+    const search = toolbar.querySelector('.github-import-search').getBoundingClientRect();
+    const actions = toolbar.querySelector('.github-import-selection-actions').getBoundingClientRect();
+    const count = toolbar.querySelector('#github-import-selected-count').getBoundingClientRect();
+    const buttons = Array.from(toolbar.querySelectorAll('.github-import-toolbar-btn'));
+    const buttonStyles = buttons.map(button => {
+      const style = getComputedStyle(button);
+      return {
+        width: button.getBoundingClientRect().width,
+        height: button.getBoundingClientRect().height,
+        borderColor: style.borderTopColor,
+        fontSize: style.fontSize
+      };
+    });
+    return {
+      countCenter: count.top + (count.height / 2),
+      actionCenter: buttons[0].getBoundingClientRect().top + (buttons[0].getBoundingClientRect().height / 2),
+      searchCenter: search.top + (search.height / 2),
+      actionsCenter: actions.top + (actions.height / 2),
+      countBackground: getComputedStyle(toolbar.querySelector('#github-import-selected-count')).backgroundColor,
+      actionsRightOfSearch: search.right <= actions.left,
+      buttonStyles
+    };
+  });
+  expect(Math.abs(selectionControls.countCenter - selectionControls.actionCenter)).toBeLessThanOrEqual(1);
+  expect(Math.abs(selectionControls.searchCenter - selectionControls.actionsCenter)).toBeLessThanOrEqual(1);
+  expect(selectionControls.countBackground).toBe('rgba(0, 0, 0, 0)');
+  expect(selectionControls.actionsRightOfSearch).toBe(true);
+  expect(selectionControls.buttonStyles).toEqual([
+    { width: 30, height: 30, borderColor: 'rgba(0, 0, 0, 0)', fontSize: '13px' },
+    { width: 30, height: 30, borderColor: 'rgba(0, 0, 0, 0)', fontSize: '13px' }
+  ]);
+
+  const selectionWidth = await page.locator('#github-import-modal .reset-modal-box').evaluate(element => element.getBoundingClientRect().width);
+  expect(selectionWidth).toBeGreaterThan(520);
+  expect(selectionWidth).toBeLessThanOrEqual(760);
+});
+
+test('localizes the GitHub importer in every supported interface language', async ({ page }) => {
+  test.setTimeout(180_000);
+  const locales = ['en', 'de', 'es', 'fr', 'it', 'ja', 'ko', 'pl', 'pt', 'ru', 'tr', 'tw', 'uk', 'zh'];
+  const catalogs = Object.fromEntries(locales.map(locale => [
+    locale,
+    locale === 'en' ? null : require(`../../assets/i18n/${locale}.json`)
+  ]));
+  const commitSha = '6666666666666666666666666666666666666666';
+
+  await page.route('https://api.github.com/**', async route => {
+    const url = new URL(route.request().url());
+    const pathname = decodeURIComponent(url.pathname);
+    if (pathname === '/repos/acme/i18n') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ default_branch: 'main', private: false })
+      });
+      return;
+    }
+    if (pathname === '/repos/acme/i18n/commits/main') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ sha: commitSha })
+      });
+      return;
+    }
+    if (pathname === `/repos/acme/i18n/git/trees/${commitSha}` && url.searchParams.get('recursive') === '1') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          truncated: false,
+          tree: [
+            { path: 'docs/guide.md', type: 'blob', sha: 'guide' },
+            { path: 'README.md', type: 'blob', sha: 'readme' }
+          ]
+        })
+      });
+      return;
+    }
+    await route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
+  });
+
+  for (const locale of locales) {
+    const translate = source => catalogs[locale]?.[source] || source;
+    const languageTag = locale === 'zh' ? 'zh-Hans' : (locale === 'tw' ? 'zh-Hant' : locale);
+    await openApp(page, `/?lang=${locale}`);
+    await expect(page.locator('html')).toHaveAttribute('lang', languageTag);
+    await openGitHubImporter(page);
+    await expect(page.locator('#github-import-title')).toHaveText(translate('Import Markdown from GitHub'));
+    await expect(page.locator('#github-import-subtitle')).toHaveText(translate('Paste a GitHub file or repository URL.'));
+    await expect(page.locator('#github-import-url-label')).toHaveText(translate('GitHub URL'));
+    await expect(page.locator('#github-import-access-title')).toHaveText(translate('Private repository access'));
+    await expect(page.locator('#github-import-submit')).toHaveText(translate('Import'));
+
+    await page.locator('#github-import-url').fill('https://github.com/acme/i18n');
+    await page.locator('#github-import-submit').click();
+    await expect(page.locator('#github-import-title')).toHaveText(translate('Select Markdown files to import'));
+    await expect(page.locator('#github-import-subtitle')).toHaveText(
+      translate('{{0}} Markdown files found. Choose what to save to Explorer.').replace('{{0}}', '2')
+    );
+    await expect(page.locator('#github-import-search')).toHaveAttribute('placeholder', translate('Search Markdown files'));
+    await expect(page.locator('#github-import-selected-count-text')).toHaveText(
+      translate('{{0}} selected').replace('{{0}}', '1')
+    );
+    await expect(page.locator('#github-import-select-all')).toHaveAttribute('aria-label', translate('Select all files'));
+    await expect(page.locator('#github-import-toggle-folders')).toHaveAttribute('aria-label', translate('Collapse all folders'));
+    await expect(page.locator('#github-import-submit')).toHaveText(translate('Import Selected'));
+    await expect(page.locator('#github-import-ref')).toHaveText('main');
+    await expect(page.locator('#github-import-ref-item')).toHaveAttribute('title', 'main');
+  }
+});
+
+test('uses a compact add-then-select flow for multiple named access tokens', async ({ page }) => {
+  await page.route('https://api.github.com/user', route => fulfillGitHubUser(route));
+  await openApp(page);
+  await page.setViewportSize({ width: 533, height: 535 });
+  await openGitHubImporter(page);
+  await page.locator('#github-import-access-toggle').click();
+
+  await expect(page.locator('#github-import-pat-type')).toHaveCount(0);
+  await expect(page.locator('#github-import-pat-retention')).toHaveCount(0);
+  await expect(page.locator('#github-import-pat-passphrase')).toHaveCount(0);
+  await expect(page.locator('#github-import-access-unlock')).toHaveCount(0);
+  await expect(page.locator('#github-import-access-status')).toHaveCount(0);
+  await expect(page.locator('#github-import-pat-expiry')).toHaveCount(0);
+  await expect(page.getByText('Available for this session')).toHaveCount(0);
+  await expect(page.locator('#github-import-access-panel a')).toHaveCount(0);
+  const addFieldLayout = await page.locator('#github-import-access-form').evaluate(form => {
+    const name = form.querySelector('#github-import-pat-name').getBoundingClientRect();
+    const token = form.querySelector('#github-import-pat').getBoundingClientRect();
+    return {
+      stacked: name.bottom <= token.top,
+      equalWidth: Math.abs(name.width - token.width)
+    };
+  });
+  expect(addFieldLayout.stacked).toBe(true);
+  expect(addFieldLayout.equalWidth).toBeLessThanOrEqual(2);
+
+  const initialLayout = await page.locator('#github-import-modal').evaluate(modal => {
+    const box = modal.querySelector('.reset-modal-box');
+    const body = modal.querySelector('.github-import-modal-body');
+    const footer = modal.querySelector('.reset-modal-actions');
+    return {
+      modalBottom: box.getBoundingClientRect().bottom,
+      footerBottom: footer.getBoundingClientRect().bottom,
+      viewportHeight: window.innerHeight,
+      bodyClientHeight: body.clientHeight,
+      bodyScrollHeight: body.scrollHeight
+    };
+  });
+  expect(initialLayout.modalBottom).toBeLessThanOrEqual(initialLayout.viewportHeight);
+  expect(initialLayout.footerBottom).toBeLessThanOrEqual(initialLayout.viewportHeight);
+  expect(initialLayout.bodyScrollHeight).toBeGreaterThanOrEqual(initialLayout.bodyClientHeight);
+  await page.locator('.github-import-modal-body').evaluate(body => {
+    body.scrollTop = body.scrollHeight;
+  });
+  await expect(page.locator('#github-import-pat-save')).toBeInViewport();
+
+  await page.locator('#github-import-pat-name').fill('My first access token');
+  await page.locator('#github-import-pat').fill('short-token');
+  await page.locator('#github-import-pat-save').click();
+  const accessToast = page.locator('#app-toast-region .app-toast');
+  await expect(accessToast).toBeVisible();
+  await expect(accessToast).toHaveAttribute('data-tone', 'error');
+  await expect(accessToast.locator('.app-toast-title')).toHaveText('GitHub access not added');
+  await expect(accessToast.locator('.app-toast-message')).toContainText('Enter a valid personal access token');
+  await expect(accessToast.locator('.app-toast-icon-shell .bi-github')).toBeVisible();
+  await expect(page.locator('#github-import-access-form')).toBeVisible();
+
+  await page.locator('#github-import-pat-name').fill('My first access token');
+  await page.locator('#github-import-pat').fill('github_pat_first_mock_12345678901234567890');
+  await page.locator('#github-import-pat-save').click();
+  await expect(accessToast).toHaveAttribute('data-tone', 'success');
+  await expect(accessToast.locator('.app-toast-title')).toHaveText('GitHub access added');
+  await expect(accessToast.locator('.app-toast-message'))
+    .toHaveText('"My first access token" was added. You can select or remove it anytime.');
+  await expect(accessToast.locator('.app-toast-icon-shell .bi-github')).toBeVisible();
+  await expect(page.locator('#github-import-access-form')).toBeHidden();
+  await expect(page.locator('#github-import-access-manage')).toBeVisible();
+  await expect(page.locator('#github-import-pat-select')).toHaveText('My first access token');
+  await expect(page.locator('#github-import-access-summary')).toContainText('My first access token');
+  await expect(page.locator('#github-import-token-expiry')).toHaveCount(0);
+  await expect(page.locator('#github-import-access-selected-meta')).toHaveCount(0);
+  await expect(page.locator('#github-import-pat-add-another')).toHaveClass(/tool-button/);
+  await expect(page.locator('#github-import-pat-remove')).toHaveClass(/tool-button/);
+
+  const actionLayout = await page.locator('#github-import-access-manage').evaluate(manage => {
+    const add = manage.querySelector('#github-import-pat-add-another').getBoundingClientRect();
+    const remove = manage.querySelector('#github-import-pat-remove').getBoundingClientRect();
+    const select = manage.querySelector('#github-import-pat-select').getBoundingClientRect();
+    return {
+      sameRow: Math.abs(add.top - remove.top),
+      actionsAboveSelect: Math.max(add.bottom, remove.bottom) <= select.top
+    };
+  });
+  expect(actionLayout.sameRow).toBeLessThanOrEqual(2);
+  expect(actionLayout.actionsAboveSelect).toBe(true);
+  const accessButtonStyles = await page.locator('#github-import-access-manage .github-import-toolbar-btn').evaluateAll(buttons => (
+    buttons.map(button => {
+      const style = getComputedStyle(button);
+      return {
+        width: button.getBoundingClientRect().width,
+        height: button.getBoundingClientRect().height,
+        borderColor: style.borderTopColor,
+        fontSize: style.fontSize
+      };
+    })
+  ));
+  expect(accessButtonStyles).toEqual([
+    { width: 44, height: 44, borderColor: 'rgba(0, 0, 0, 0)', fontSize: '13px' },
+    { width: 44, height: 44, borderColor: 'rgba(0, 0, 0, 0)', fontSize: '13px' }
+  ]);
+
+  await page.locator('#github-import-pat-add-another').click();
+  await expect(page.locator('#github-import-access-form')).toBeVisible();
+  await expect(page.locator('#github-import-pat-add-cancel')).toBeVisible();
+  await page.locator('#github-import-pat-name').fill('Work classic token');
+  await page.locator('#github-import-pat').fill('ghp_second_mock_123456789012345678901234');
+  await page.locator('#github-import-pat-save').click();
+  await expect(page.locator('#github-import-pat-select option')).toHaveCount(2);
+  await expect(page.locator('#github-import-pat-select')).toHaveValue(/github_access_/);
+  await expect(accessToast.locator('.app-toast-message')).toContainText('Work classic token');
+
+  await page.locator('#github-import-pat-select').selectOption({ label: 'My first access token' });
+  await page.locator('#github-import-pat-remove').click();
+  await expect(accessToast.locator('.app-toast-title')).toHaveText('GitHub access removed');
+  await expect(accessToast.locator('.app-toast-message')).toHaveText('"My first access token" was removed.');
+  await expect(accessToast.locator('.app-toast-icon-shell .bi-github')).toBeVisible();
+  await expect(page.locator('#github-import-pat-select option')).toHaveCount(1);
+  await expect(page.locator('#github-import-pat-select')).toHaveText('Work classic token');
+  await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+});
+
+test('uses a saved PAT only with api.github.com for private repositories', async ({ page }) => {
+  const token = 'github_pat_private_test_12345678901234567890';
+  const commitSha = '5555555555555555555555555555555555555555';
+  const authenticatedApiPaths = [];
+  let rawRequestCount = 0;
+
+  await page.route('https://raw.githubusercontent.com/**', async route => {
+    rawRequestCount++;
+    await route.fulfill({ status: 500, body: 'private content must not use the raw host' });
+  });
+  await page.route('https://api.github.com/**', async route => {
+    const request = route.request();
+    const url = new URL(request.url());
+    const pathname = decodeURIComponent(url.pathname);
+    const authorization = request.headers().authorization || '';
+    if (authorization) authenticatedApiPaths.push(pathname);
+
+    if (pathname === '/user' && authorization === `Bearer ${token}`) {
+      await fulfillGitHubUser(route);
+      return;
+    }
+    if (pathname === '/repos/acme/private-notes' && !authorization) {
+      await route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
+      return;
+    }
+    if (pathname === '/repos/acme/private-notes' && authorization === `Bearer ${token}`) {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ default_branch: 'main', private: true })
+      });
+      return;
+    }
+    if (pathname === '/repos/acme/private-notes/commits/main' && authorization === `Bearer ${token}`) {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ sha: commitSha })
+      });
+      return;
+    }
+    if (pathname === `/repos/acme/private-notes/git/trees/${commitSha}` && authorization === `Bearer ${token}`) {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          truncated: false,
+          tree: [
+            { path: 'README.md', type: 'blob', sha: 'readme' },
+            { path: 'docs/private.md', type: 'blob', sha: 'private' }
+          ]
+        })
+      });
+      return;
+    }
+    if (pathname.startsWith('/repos/acme/private-notes/contents/') && authorization === `Bearer ${token}`) {
+      expect(request.headers().accept).toBe('application/vnd.github.raw+json');
+      expect(url.searchParams.get('ref')).toBe(commitSha);
+      await route.fulfill({ status: 200, contentType: 'text/markdown', body: '# Private import' });
+      return;
+    }
+    await route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
+  });
+
+  await openApp(page);
+  await openGitHubImporter(page);
+  await page.locator('#github-import-access-toggle').click();
+  await page.locator('#github-import-pat-name').fill('Private notes');
+  await page.locator('#github-import-pat').fill(token);
+  await page.locator('#github-import-pat-save').click();
+  const accessToast = page.locator('#app-toast-region .app-toast');
+  await expect(accessToast.locator('.app-toast-title')).toHaveText('GitHub access added');
+  await expect(accessToast.locator('.app-toast-message'))
+    .toHaveText('"Private notes" was added. You can select or remove it anytime.');
+  await expect(accessToast.locator('.app-toast-icon-shell .bi-github')).toBeVisible();
+  await expect(page.locator('#github-import-token-expiry')).toHaveCount(0);
+  await expect(page.locator('#github-import-pat')).toHaveValue('');
+
+  const persistedText = await page.evaluate(async () => {
+    const local = JSON.stringify(localStorage);
+    const database = await new Promise((resolve, reject) => {
+      const request = indexedDB.open('markdownViewerWorkspace');
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    const records = await new Promise((resolve, reject) => {
+      const request = database.transaction('metadata', 'readonly').objectStore('metadata').getAll();
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    database.close();
+    return local + JSON.stringify(records);
+  });
+  expect(persistedText).not.toContain(token);
+
+  await page.locator('#github-import-url').fill('https://github.com/acme/private-notes/tree/main');
+  await page.locator('#github-import-submit').click();
+  await page.locator('#github-import-select-all').click();
+  await page.locator('#github-import-submit').click();
+
+  await expect.poll(async () => {
+    const documents = await storedDocuments(page);
+    return documents.filter(document => ['README', 'private'].includes(document.title)).length;
+  }).toBe(2);
+  expect(rawRequestCount).toBe(0);
+  expect(authenticatedApiPaths).toContain('/repos/acme/private-notes');
+  expect(authenticatedApiPaths).toContain('/repos/acme/private-notes/commits/main');
+  expect(authenticatedApiPaths).toContain(`/repos/acme/private-notes/git/trees/${commitSha}`);
+});
+
+test('persists encrypted PATs across refresh and removes retired saved access records', async ({ page }) => {
+  await page.route('https://api.github.com/user', route => route.fulfill({
+    status: 200,
+    contentType: 'application/json',
+    headers: { 'Access-Control-Allow-Origin': '*' },
+    body: JSON.stringify({ login: 'octocat' })
+  }));
+  await openApp(page);
+  await page.evaluate(async () => {
+    const database = await new Promise((resolve, reject) => {
+      const request = indexedDB.open('markdownViewerWorkspace');
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    await new Promise((resolve, reject) => {
+      const transaction = database.transaction('metadata', 'readwrite');
+      const store = transaction.objectStore('metadata');
+      store.put({ key: 'githubAccessVaultV2', value: { version: 2, entries: [{ ciphertext: 'retired' }] } });
+      store.put({ key: 'githubAccessRecordV1', value: { ciphertext: 'retired' } });
+      transaction.oncomplete = resolve;
+      transaction.onerror = () => reject(transaction.error);
+    });
+    database.close();
+  });
+
+  await page.reload();
+  await expect(page.locator('#markdown-editor')).toBeVisible();
+  await openGitHubImporter(page);
+  await expect(page.locator('#github-import-access-summary')).toHaveText('No access token added');
+  await page.locator('#github-import-access-toggle').click();
+  await expect(page.locator('#github-import-pat-type')).toHaveCount(0);
+  await expect(page.locator('#github-import-pat-passphrase')).toHaveCount(0);
+  await expect(page.locator('#github-import-access-unlock')).toHaveCount(0);
+
+  const retiredRecords = await page.evaluate(async () => {
+    const database = await new Promise((resolve, reject) => {
+      const request = indexedDB.open('markdownViewerWorkspace');
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    const values = await Promise.all(['githubAccessVaultV2', 'githubAccessRecordV1'].map(key => new Promise((resolve, reject) => {
+      const request = database.transaction('metadata', 'readonly').objectStore('metadata').get(key);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    })));
+    database.close();
+    return values;
+  });
+  expect(retiredRecords).toEqual([undefined, undefined]);
+
+  const token = 'ghp_session_mock_123456789012345678901234';
+  await page.locator('#github-import-pat-name').fill('Session token');
+  await page.locator('#github-import-pat').fill(token);
+  await page.locator('#github-import-pat-save').click();
+  await expect(page.locator('#github-import-access-summary')).toContainText('Session token');
+  await expect(page.locator('#github-import-token-expiry')).toHaveCount(0);
+
+  const encryptedVault = await page.evaluate(async () => {
+    const database = await new Promise((resolve, reject) => {
+      const request = indexedDB.open('markdownViewerWorkspace');
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    const record = await new Promise((resolve, reject) => {
+      const request = database.transaction('metadata', 'readonly').objectStore('metadata').get('githubAccessVaultV3');
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    database.close();
+    return record && record.value;
+  });
+  expect(encryptedVault.version).toBe(3);
+  expect(encryptedVault.entries).toHaveLength(1);
+  expect(encryptedVault.entries[0].ciphertext).toBeTruthy();
+  expect(encryptedVault.entries[0].token).toBeUndefined();
+  expect(JSON.stringify(encryptedVault)).not.toContain(token);
+  expect(await page.evaluate(() => JSON.stringify(localStorage))).not.toContain(token);
+
+  await page.reload();
+  await expect(page.locator('#markdown-editor')).toBeVisible();
+  await openGitHubImporter(page);
+  await expect(page.locator('#github-import-access-summary')).toHaveText('Session token · Ready');
+  await page.locator('#github-import-access-toggle').click();
+  await expect(page.locator('#github-import-pat-select')).toHaveText('Session token');
+  await page.locator('#github-import-pat-remove').click();
+  await expect(page.locator('#github-import-access-summary')).toHaveText('No access token added');
+
+  await page.reload();
+  await expect(page.locator('#markdown-editor')).toBeVisible();
+  await openGitHubImporter(page);
+  await expect(page.locator('#github-import-access-summary')).toHaveText('No access token added');
+});
+
+test('saves selected GitHub files to Explorer without opening tabs', async ({ page }) => {
+  await page.route('https://api.github.com/**', async route => {
+    const url = new URL(route.request().url());
+    if (url.pathname === '/repos/acme/importable') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ default_branch: 'main', private: false })
+      });
+      return;
+    }
+    if (decodeURIComponent(url.pathname) === '/repos/acme/importable/commits/main') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ sha: TEST_COMMITS.importable })
+      });
+      return;
+    }
+    if (url.pathname === `/repos/acme/importable/git/trees/${TEST_COMMITS.importable}` && url.searchParams.get('recursive') === '1') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          truncated: false,
+          tree: [
+            { path: 'README.md', type: 'blob', sha: 'readme' },
+            { path: 'docs/guide.md', type: 'blob', sha: 'guide' }
+          ]
+        })
+      });
+      return;
+    }
+    await route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
+  });
+  await page.route('https://raw.githubusercontent.com/**', route => {
+    route.fulfill({ status: 200, contentType: 'text/markdown', body: '# Imported from GitHub' });
+  });
+
+  await openApp(page);
+  await openGitHubImporter(page);
+  await page.locator('#github-import-url').fill('https://github.com/acme/importable/tree/main');
+  await page.locator('#github-import-submit').click();
+  await page.locator('#github-import-select-all').click();
+  await page.locator('#github-import-submit').click();
+
+  await expect(page.locator('#github-import-modal')).not.toHaveClass(/is-visible/);
+  await expect.poll(async () => {
+    const documents = await storedDocuments(page);
+    return documents.filter(document => ['README', 'guide'].includes(document.title) && document.isOpen === false).length;
+  }).toBe(2);
+  await expect(page.locator('#tab-list .tab-title').filter({ hasText: /README|guide/ })).toHaveCount(0);
+});
+
+test('keeps the searchable picker usable on a small phone', async ({ page }) => {
+  await page.route('https://api.github.com/**', async route => {
+    const url = new URL(route.request().url());
+    if (url.pathname === '/repos/acme/mobile') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ default_branch: 'main', private: false })
+      });
+      return;
+    }
+    if (decodeURIComponent(url.pathname) === '/repos/acme/mobile/commits/main') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({ sha: TEST_COMMITS.mobile })
+      });
+      return;
+    }
+    if (url.pathname === `/repos/acme/mobile/git/trees/${TEST_COMMITS.mobile}` && url.searchParams.get('recursive') === '1') {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify({
+          truncated: false,
+          tree: [
+            { path: 'README.md', type: 'blob', sha: 'readme' },
+            { path: 'docs/guide.md', type: 'blob', sha: 'guide' }
+          ]
+        })
+      });
+      return;
+    }
+    await route.fulfill({ status: 404, contentType: 'application/json', body: '{}' });
+  });
+
+  await openApp(page);
+  await page.setViewportSize({ width: 375, height: 812 });
+  await openGitHubImporter(page);
+  await page.locator('#github-import-url').fill('https://github.com/acme/mobile/tree/main');
+  await page.locator('#github-import-submit').click();
+  await expect(page.locator('#github-import-title')).toHaveText('Select Markdown files to import');
+
+  for (const viewport of [{ width: 375, height: 812 }, { width: 812, height: 375 }]) {
+    await page.setViewportSize(viewport);
+    const layout = await page.locator('#github-import-modal .reset-modal-box').evaluate(modal => ({
+      width: modal.getBoundingClientRect().width,
+      height: modal.getBoundingClientRect().height,
+      viewportWidth: document.documentElement.clientWidth,
+      viewportHeight: document.documentElement.clientHeight,
+      pageOverflow: document.documentElement.scrollWidth > document.documentElement.clientWidth,
+      searchHeight: document.querySelector('#github-import-search').getBoundingClientRect().height,
+      selectAllHeight: document.querySelector('#github-import-select-all').getBoundingClientRect().height,
+      folderToggleHeight: document.querySelector('#github-import-toggle-folders').getBoundingClientRect().height
+    }));
+    expect(layout.width).toBeLessThanOrEqual(layout.viewportWidth);
+    expect(layout.height).toBeLessThanOrEqual(layout.viewportHeight);
+    expect(layout.pageOverflow).toBe(false);
+    expect(layout.searchHeight).toBeGreaterThanOrEqual(44);
+    expect(layout.selectAllHeight).toBeGreaterThanOrEqual(44);
+    expect(layout.folderToggleHeight).toBeGreaterThanOrEqual(44);
+  }
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await expect(page.locator('#github-import-select-all')).toHaveCSS('transition-duration', '0s');
+});
diff --git a/tests/e2e/responsive-storage.spec.js b/tests/e2e/responsive-storage.spec.js
new file mode 100644
index 00000000..c5638b2a
--- /dev/null
+++ b/tests/e2e/responsive-storage.spec.js
@@ -0,0 +1,431 @@
+const { test, expect } = require('@playwright/test');
+const {
+  fixture,
+  openApp,
+  setEditorContent,
+  readWorkspaceStore,
+  storedDocuments,
+  waitForAppReady
+} = require('../helpers/app');
+
+test('theme switching stores and restores the selected theme', async ({ page }) => {
+  await openApp(page);
+
+  const initialTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+  await page.getByRole('button', { name: 'Open workspace settings' }).click();
+  await page.locator('#theme-toggle').click();
+  const toggledTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+
+  expect(toggledTheme).not.toBe(initialTheme);
+  await expect.poll(() => page.evaluate(() => JSON.parse(localStorage.getItem('markdownViewerGlobalState') || '{}').theme)).toBe(toggledTheme);
+
+  await page.reload();
+  await expect(page.locator('#markdown-editor')).toBeVisible();
+  await expect.poll(() => page.evaluate(() => document.documentElement.getAttribute('data-theme'))).toBe(toggledTheme);
+});
+
+test('document tabs persist across reload in normal mode', async ({ page }) => {
+  await openApp(page);
+  await setEditorContent(page, '# Persistence Check\n\nSaved locally.');
+
+  await expect.poll(async () => JSON.stringify(await storedDocuments(page))).toContain('Persistence Check');
+  await page.reload();
+  await expect(page.locator('#markdown-editor')).toHaveValue(/Persistence Check/);
+  await expect(page.locator('#markdown-preview')).toContainText('Saved locally.');
+});
+
+test('private mode pauses writes without deleting existing saved documents', async ({ page }) => {
+  await openApp(page);
+  await setEditorContent(page, '# Persisted Before Private Mode\n\nKeep this document.');
+  await expect.poll(async () => JSON.stringify(await storedDocuments(page))).toContain('Persisted Before Private Mode');
+
+  await page.getByRole('button', { name: 'Open workspace settings' }).click();
+  await page.locator('#private-mode-toggle').click();
+  await expect(page.locator('#private-mode-toggle')).toHaveAttribute('aria-pressed', 'true');
+  await expect(page.locator('#private-mode-description')).toHaveText('Session activity is not persisted');
+  await page.keyboard.press('Escape');
+
+  await setEditorContent(page, '# Private Content\n\nDo not store this.');
+  await page.waitForTimeout(750);
+
+  const stored = JSON.stringify(await storedDocuments(page));
+  expect(stored).toContain('Persisted Before Private Mode');
+  expect(stored).not.toContain('Private Content');
+});
+
+test('reset workspace permanently deletes documents and blocks repeated clicks', async ({ page }) => {
+  await openApp(page);
+  await setEditorContent(page, '# Delete On Reset\n\nThis document must be removed.');
+  await expect.poll(async () => JSON.stringify(await storedDocuments(page))).toContain('Delete On Reset');
+  await page.evaluate(async () => {
+    localStorage.setItem('find-replace-docked', 'true');
+    const storage = new window.MarkdownWorkspaceStorage();
+    await storage.init();
+    await storage.saveSecretRecord('reset_secret', {
+      version: 2,
+      iv: 'cmVzZXQtaXY=',
+      ciphertext: 'cmVzZXQtY2lwaGVydGV4dA=='
+    });
+    await storage.setSecretManifest({
+      version: 2,
+      salt: 'cmVzZXQtc2FsdA==',
+      iterations: 250000,
+      documentCount: 1,
+      folderCount: 0
+    });
+  });
+
+  await page.getByRole('button', { name: 'Open workspace settings' }).click();
+  await page.locator('#tab-reset-btn').click();
+  await expect(page.locator('#reset-modal-description')).toContainText('permanently deletes all documents');
+  await page.locator('#reset-modal-backup').click();
+  await expect(page.locator('#storage-settings-title')).toHaveText('Storage and Backup');
+  await page.locator('#storage-settings-close').click();
+  await page.getByRole('button', { name: 'Open workspace settings' }).click();
+  await page.locator('#tab-reset-btn').click();
+  const reloadPromise = page.waitForEvent('load');
+  await page.locator('#reset-modal-confirm').click();
+  await expect(page.locator('#reset-modal-confirm')).toBeDisabled();
+  await expect(page.locator('#reset-modal-confirm')).toHaveClass(/is-loading/);
+  await reloadPromise;
+  await waitForAppReady(page);
+
+  await expect.poll(async () => JSON.stringify(await storedDocuments(page)), {
+    timeout: 15_000
+  }).not.toContain('Delete On Reset');
+  await expect.poll(() => page.evaluate(() => localStorage.getItem('find-replace-docked'))).toBeNull();
+  await expect.poll(() => page.evaluate(async () => {
+    const storage = new window.MarkdownWorkspaceStorage();
+    await storage.init();
+    return (await storage.listSecretRecords()).length;
+  })).toBe(0);
+});
+
+test('workspace backup ZIP restores documents and folder organization', async ({ page }) => {
+  await openApp(page);
+  await page.locator('#sidebar-new-folder').click();
+  await page.locator('#document-name-modal-input').fill('Backup Folder');
+  await page.locator('#document-name-modal-confirm').click();
+  await setEditorContent(page, '# Backup Round Trip\n\nRestore this content.');
+  await expect.poll(async () => JSON.stringify(await storedDocuments(page))).toContain('Backup Round Trip');
+  await page.evaluate(async () => {
+    const storage = new window.MarkdownWorkspaceStorage();
+    await storage.init();
+    await storage.saveSecretRecord('encrypted_test', {
+      version: 2,
+      iv: 'c2FtZS1pdg==',
+      ciphertext: 'c2FtZS1jaXBoZXJ0ZXh0'
+    });
+    await storage.setSecretManifest({
+      version: 2,
+      salt: 'c2FtZS1zYWx0',
+      iterations: 250000,
+      documentCount: 1,
+      folderCount: 0
+    });
+  });
+
+  await page.getByRole('button', { name: 'Open workspace settings' }).click();
+  await page.locator('#storage-settings-button').click();
+  await expect(page.locator('#storage-settings-title')).toHaveText('Storage and Backup');
+  await expect(page.locator('#storage-include-secure')).toBeHidden();
+  await page.locator('#storage-backup-button').click();
+  await expect(page.locator('#storage-backup-options-modal')).toHaveClass(/is-visible/);
+  await expect(page.locator('#storage-include-secure')).toBeChecked();
+  expect(await page.evaluate(() => Boolean(window.JSZip))).toBe(false);
+  const downloadPromise = page.waitForEvent('download');
+  await page.locator('#storage-backup-options-confirm').click();
+  const download = await downloadPromise;
+  expect(await page.evaluate(() => Boolean(window.JSZip))).toBe(true);
+  const backupPath = await download.path();
+  expect(backupPath).toBeTruthy();
+
+  await page.evaluate(async () => {
+    const storage = new window.MarkdownWorkspaceStorage();
+    await storage.init();
+    await storage.resetAllData();
+  });
+  await page.reload();
+  await page.getByRole('button', { name: 'Open workspace settings' }).click();
+  await page.locator('#storage-settings-button').click();
+  await page.locator('#storage-backup-file-input').setInputFiles(backupPath);
+  await expect(page.locator('#storage-import-confirm-modal')).toHaveClass(/is-visible/);
+  await expect(page.locator('#storage-import-confirm-title')).toHaveText('Replace current workspace?');
+  await expect(page.locator('#storage-import-confirm-cancel')).toBeFocused();
+  await page.locator('#storage-import-confirm-confirm').click();
+
+  await expect(page.locator('#import-progress-title')).toHaveText(/Import (complete|failed)/, { timeout: 20_000 });
+  await expect(page.locator('#import-progress-title')).toHaveText('Import complete');
+  await page.waitForEvent('load');
+  await expect(page.locator('#markdown-editor')).toHaveValue(/Backup Round Trip/);
+  await expect(page.locator('.document-tree-row[data-tree-type="folder"]')).toContainText('Backup Folder');
+  await expect.poll(() => page.evaluate(async () => {
+    const storage = new window.MarkdownWorkspaceStorage();
+    await storage.init();
+    const records = await storage.listSecretRecords();
+    return records.find(record => record.id === 'encrypted_test')?.envelope?.ciphertext || '';
+  })).toBe('c2FtZS1jaXBoZXJ0ZXh0');
+});
+
+test('legacy localStorage workspaces migrate once into per-document storage', async ({ page }) => {
+  await page.addInitScript(() => {
+    localStorage.setItem('markdownViewerTabs', JSON.stringify([{
+      id: 'legacy_document_1',
+      title: 'Migrated Legacy Document',
+      content: '# Migrated\n\nLegacy content survives.',
+      workspaceId: 'workspace_default',
+      folderId: null,
+      isOpen: true,
+      viewMode: 'split',
+      createdAt: 1,
+      lastOpenedAt: 1,
+      lastEditedAt: 1
+    }]));
+    localStorage.setItem('markdownViewerActiveTab', 'legacy_document_1');
+  });
+  await openApp(page);
+
+  await expect(page.locator('#markdown-editor')).toHaveValue(/Legacy content survives/);
+  await expect.poll(async () => JSON.stringify(await storedDocuments(page))).toContain('Migrated Legacy Document');
+  await expect.poll(() => page.evaluate(() => localStorage.getItem('markdownViewerTabs'))).toBeNull();
+});
+
+test('workspace storage accepts more than the former 50-document limit', async ({ page }) => {
+  await openApp(page);
+
+  for (let index = 0; index < 55; index += 1) {
+    await page.locator('#tab-new-btn').click();
+  }
+
+  await expect.poll(async () => (await readWorkspaceStore(page, 'documents')).length, {
+    timeout: 30_000
+  }).toBeGreaterThan(50);
+  await page.getByRole('button', { name: 'Open workspace settings' }).click();
+  await page.locator('#storage-settings-button').click();
+  await expect(page.locator('#storage-settings-modal')).toHaveClass(/is-visible/);
+  await expect(page.locator('#storage-backend-value')).toHaveText('Browser IndexedDB');
+  await expect(page.locator('.storage-status-list dt')).toHaveText([
+    'Storage',
+    'Documents',
+    'Location',
+    'Usage',
+    'Persistence'
+  ]);
+  await expect(page.locator('#storage-document-count-value')).toHaveText(/^\d+ normal, 0 secret$/);
+  await expect(page.locator('#storage-location-value')).toHaveText('Browser profile · IndexedDB');
+  await expect(page.locator('#storage-usage-value')).toContainText('used locally');
+  await expect(page.locator('#storage-usage-value')).not.toContainText('Browser quota');
+  await expect(page.locator('#storage-persistence-value')).toContainText(/Best-effort browser storage|Persistent browser storage/);
+  await expect(page.locator('#storage-recovery-note')).toHaveText(
+    "Clearing this site's browser data will delete local documents."
+  );
+  await expect(page.locator('#storage-settings-description')).toHaveCount(0);
+  await expect(page.locator('#storage-request-persistence')).toHaveCount(0);
+  await expect(page.locator('#storage-locate-vault')).toHaveCount(0);
+  await expect(page.locator('.storage-backup-options')).toHaveCount(0);
+  await expect(page.locator('.storage-secure-option')).toBeHidden();
+  await page.locator('#storage-backup-button').click();
+  await expect(page.locator('#storage-backup-options-title')).toHaveText('Create workspace backup');
+  await expect(page.locator('.storage-secure-option')).toBeVisible();
+  await expect(page.locator('#storage-secure-note')).toHaveText(
+    'Secure workspace files will remain encrypted in the backup. They can only be accessed after importing the backup into Markdown Viewer and unlocking them with the correct password.'
+  );
+  await expect(page.locator('#storage-secure-note .lucide-shield-check')).toBeVisible();
+  const noteStyles = await page.evaluate(() => {
+    const recovery = getComputedStyle(document.querySelector('.storage-recovery-note'));
+    const secure = getComputedStyle(document.querySelector('#storage-secure-note'));
+    return {
+      recovery: [recovery.backgroundColor, recovery.borderColor, recovery.color],
+      secure: [secure.backgroundColor, secure.borderColor, secure.color]
+    };
+  });
+  expect(noteStyles.recovery).toEqual(['rgb(255, 248, 197)', 'rgb(212, 167, 44)', 'rgb(99, 60, 1)']);
+  expect(noteStyles.secure).toEqual(['rgb(221, 244, 255)', 'rgb(84, 174, 255)', 'rgb(5, 80, 174)']);
+  await expect(page.locator('#storage-backup-options-modal .reset-modal-box')).toHaveCSS('width', '420px');
+});
+
+test('storage and backup remains usable on phone portrait and landscape layouts', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await openApp(page);
+  await page.locator('#mobile-menu-toggle').click();
+  await page.locator('[data-mobile-menu-section-toggle]', { hasText: 'Settings' }).click();
+  await page.locator('#mobile-storage-settings-button').click();
+
+  await expect(page.locator('#storage-backup-button')).toBeVisible();
+  await expect(page.locator('#storage-import-button')).toBeVisible();
+  await expect(page.locator('.storage-secure-option')).toBeHidden();
+  await page.locator('#storage-backup-button').click();
+  await expect(page.locator('.storage-secure-option')).toBeVisible();
+  await expect(page.locator('#storage-secure-note')).toBeVisible();
+  await expect(page.locator('#storage-backup-options-confirm')).toBeVisible();
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true);
+  expect((await page.locator('#storage-backup-options-modal .reset-modal-box').boundingBox()).width).toBeLessThanOrEqual(351);
+
+  await page.setViewportSize({ width: 812, height: 375 });
+  await expect(page.locator('#storage-backup-options-title')).toBeVisible();
+  await expect(page.locator('.storage-secure-option')).toBeVisible();
+  await expect(page.locator('#storage-backup-options-cancel')).toBeVisible();
+  await expect(page.locator('#storage-backup-options-confirm')).toBeVisible();
+  await expect(page.locator('#storage-backup-options-modal .reset-modal-box')).toHaveCSS('width', '420px');
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true);
+
+  await page.locator('#storage-backup-options-cancel').click();
+  await expect(page.locator('#storage-settings-modal')).toHaveClass(/is-visible/);
+  await page.locator('#storage-backup-file-input').setInputFiles({
+    name: 'workspace-backup.zip',
+    mimeType: 'application/zip',
+    buffer: Buffer.from('not parsed before confirmation')
+  });
+  await expect(page.locator('#storage-import-confirm-modal')).toHaveClass(/is-visible/);
+  await expect(page.locator('#storage-import-confirm-title')).toHaveText('Replace current workspace?');
+  await expect(page.locator('#storage-import-confirm-cancel')).toBeFocused();
+  await expect(page.locator('#storage-import-confirm-modal .reset-modal-box')).toHaveCSS('width', '420px');
+
+  await page.setViewportSize({ width: 375, height: 812 });
+  await expect(page.locator('#storage-import-confirm-confirm')).toBeVisible();
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= document.documentElement.clientWidth)).toBe(true);
+  await page.keyboard.press('Escape');
+  await expect(page.locator('#storage-settings-modal')).toHaveClass(/is-visible/);
+});
+
+test('large workspaces page Explorer rows instead of blocking on the full DOM', async ({ page }) => {
+  await openApp(page);
+  await page.evaluate(async () => {
+    const storage = new window.MarkdownWorkspaceStorage();
+    await storage.init();
+    await storage.clearNormalDocuments();
+    const documents = Array.from({ length: 600 }, (_, index) => ({
+      id: `large_document_${index}`,
+      title: `Large document ${String(index).padStart(3, '0')}`,
+      content: `# Document ${index}`,
+      contentLoaded: true,
+      workspaceId: 'workspace_default',
+      folderId: null,
+      isOpen: index === 0,
+      viewMode: 'split',
+      createdAt: index + 1,
+      lastOpenedAt: index + 1,
+      lastEditedAt: index + 1
+    }));
+    await storage.saveDocuments(documents, null, { fullSnapshot: true, forceContent: true });
+    localStorage.removeItem('markdownViewerActiveTab');
+  });
+  await page.reload();
+
+  await expect(page.locator('#document-sidebar-count')).toHaveText(/60[01] files/);
+  const documentCount = Number(((await page.locator('#document-sidebar-count').textContent()) || '').match(/\d+/)?.[0]);
+  expect(documentCount).toBeGreaterThanOrEqual(600);
+  await expect(page.locator('#document-tree .document-tree-row[data-tree-type="document"]')).toHaveCount(250);
+  await expect(page.locator('.document-tree-load-more')).toContainText(`Show ${documentCount - 250} more`);
+  await page.locator('.document-tree-load-more').click();
+  await expect(page.locator('#document-tree .document-tree-row[data-tree-type="document"]')).toHaveCount(documentCount);
+  await expect(page.locator('.document-tree-load-more')).toHaveCount(0);
+});
+
+test('mobile layout exposes menu controls at 375px width', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await openApp(page);
+  await setEditorContent(page, await fixture('basic.md'));
+
+  await expect(page.locator('.app-brand > .github-link')).toBeVisible();
+  await expect(page.locator('#stats-container')).toBeHidden();
+
+  await page.locator('#mobile-menu-toggle').click();
+  await expect(page.locator('#mobile-menu-panel')).toHaveClass(/active/);
+  await expect(page.locator('#mobile-stats-container')).toBeVisible();
+  await expect(page.locator('#mobile-tab-list')).toHaveCount(0);
+  await expect(page.locator('#mobile-menu-panel')).toHaveCSS('position', 'fixed');
+  await expect(page.locator('#mobile-menu-panel')).toHaveCSS('border-radius', '0px');
+  await expect(page.locator('#mobile-menu-title')).toHaveText('Workspace menu');
+  await expect(page.locator('.mobile-menu-group-label')).toHaveText(['View', 'Document tools', 'Actions']);
+  await expect(page.locator('.mobile-menu-accordion')).toHaveCSS('border-radius', '10px');
+  await expect(page.locator('#mobile-stats-container')).toHaveCSS('border-top-style', 'solid');
+  const menuOrder = await page.locator('.mobile-menu-accordion').evaluate(element =>
+    Array.from(element.children).map(child => {
+      const toggle = child.querySelector(':scope > .mobile-menu-section-toggle');
+      return (toggle || child).textContent.replace(/\s+/g, ' ').trim();
+    })
+  );
+  expect(menuOrder).toEqual(['New', 'Export', 'Share Snapshot', 'Live Share', 'Report', 'About', 'Settings']);
+
+  const newSection = page.locator('[data-mobile-menu-section-toggle]', { hasText: 'New' });
+  const exportSection = page.locator('[data-mobile-menu-section-toggle]', { hasText: 'Export' });
+  const settingsSection = page.locator('[data-mobile-menu-section-toggle]', { hasText: 'Settings' });
+  await newSection.click();
+  await expect(newSection).toHaveAttribute('aria-expanded', 'true');
+  await exportSection.click();
+  await expect(newSection).toHaveAttribute('aria-expanded', 'false');
+  await expect(exportSection).toHaveAttribute('aria-expanded', 'true');
+  await settingsSection.click();
+  await expect(exportSection).toHaveAttribute('aria-expanded', 'false');
+  await expect(settingsSection).toHaveAttribute('aria-expanded', 'true');
+  await expect(page.locator('#mobile-toggle-sync')).toBeVisible();
+  await expect(page.locator('#mobile-copy-markdown')).toBeVisible();
+  await expect(page.locator('#mobile-review-toggle')).toBeVisible();
+  await expect(page.locator('#mobile-private-mode-toggle')).toBeVisible();
+  await expect(page.locator('#mobile-theme-toggle .settings-switch')).toBeVisible();
+  await expect(page.locator('#mobile-private-mode-toggle .settings-switch')).toBeVisible();
+  const settingsOrder = await page.locator('#mobile-menu-settings-panel > *').evaluateAll(elements =>
+    elements.filter(element => element.matches('button, .mobile-menu-language')).map(element => element.id || element.className)
+  );
+  expect(settingsOrder[0]).toBe('mobile-theme-toggle');
+  expect(settingsOrder[1]).toContain('mobile-menu-language');
+  expect(settingsOrder[2]).toBe('mobile-private-mode-toggle');
+  expect(settingsOrder[3]).toBe('mobile-storage-settings-button');
+  expect(settingsOrder[4]).toBe('mobile-tab-reset-btn');
+  await expect(page.locator('#mobile-tab-reset-btn')).toBeVisible();
+  await expect(page.locator('#mobile-about-button')).toBeVisible();
+
+  await page.locator('#close-mobile-menu').click();
+  await expect(settingsSection).toHaveAttribute('aria-expanded', 'false');
+  await page.locator('#mobile-menu-toggle').click();
+  await expect(settingsSection).toHaveAttribute('aria-expanded', 'false');
+
+  await page.locator('#mobile-about-button').click();
+  await expect(page.locator('#about-modal')).toHaveClass(/is-visible/);
+  await page.locator('#about-modal-close').click();
+  await page.locator('#mobile-menu-toggle').click();
+
+  await page.locator('#mobile-menu-panel .mobile-view-mode-btn[data-mode="preview"]').click();
+  await expect(page.locator('.content-container')).toHaveClass(/view-preview-only/);
+  await expect(page.locator('#markdown-preview')).toContainText('Local Test Document');
+});
+
+test('mobile drawer resets state across dismissal and responsive changes', async ({ page }) => {
+  await page.setViewportSize({ width: 812, height: 375 });
+  await openApp(page);
+
+  const toggle = page.locator('#mobile-menu-toggle');
+  const panel = page.locator('#mobile-menu-panel');
+  const newSection = page.locator('[data-mobile-menu-section-toggle]', { hasText: 'New' });
+  const settingsSection = page.locator('[data-mobile-menu-section-toggle]', { hasText: 'Settings' });
+  const languageToggle = page.locator('#mobileLanguageDropdown');
+
+  await toggle.click();
+  const panelBox = await panel.boundingBox();
+  expect(panelBox.height).toBe(375);
+  expect(panelBox.width).toBeLessThanOrEqual(340);
+
+  await settingsSection.click();
+  await languageToggle.click();
+  await expect(languageToggle).toHaveAttribute('aria-expanded', 'true');
+  await newSection.click();
+  await expect(settingsSection).toHaveAttribute('aria-expanded', 'false');
+  await expect(languageToggle).toHaveAttribute('aria-expanded', 'false');
+  await expect(newSection).toHaveAttribute('aria-expanded', 'true');
+
+  await page.keyboard.press('Escape');
+  await expect(panel).toHaveAttribute('aria-hidden', 'true');
+  await expect(toggle).toBeFocused();
+
+  await toggle.click();
+  await expect(newSection).toHaveAttribute('aria-expanded', 'false');
+  await page.locator('#mobile-menu-overlay').click({ position: { x: 8, y: 8 } });
+  await expect(panel).toHaveAttribute('aria-hidden', 'true');
+
+  await toggle.click();
+  await newSection.click();
+  await page.setViewportSize({ width: 1080, height: 700 });
+  await expect(panel).toHaveAttribute('aria-hidden', 'true');
+  await expect(newSection).toHaveAttribute('aria-expanded', 'false');
+});
diff --git a/tests/e2e/review-mode.spec.js b/tests/e2e/review-mode.spec.js
new file mode 100644
index 00000000..4d61f102
--- /dev/null
+++ b/tests/e2e/review-mode.spec.js
@@ -0,0 +1,283 @@
+const { test, expect } = require('@playwright/test');
+const {
+  openApp,
+  setEditorContent,
+  editorValue,
+  storedDocuments,
+  stubLazyRendererLibraries
+} = require('../helpers/app');
+
+const reviewMarkdown = `# Review heading
+
+Paragraph for focused feedback.
+
+\`\`\`javascript
+console.log('review');
+\`\`\`
+
+\`\`\`mermaid
+flowchart LR
+  A --> B
+\`\`\``;
+
+test.beforeEach(async ({ page }) => {
+  await stubLazyRendererLibraries(page);
+  await openApp(page);
+  await setEditorContent(page, reviewMarkdown);
+  await expect(page.locator('#markdown-preview h1')).toHaveText('Review heading');
+});
+
+test('adds persistent comments and suggestions without changing Markdown', async ({ page }) => {
+  const original = await editorValue(page);
+  await page.locator('#review-toggle').click();
+
+  await expect(page.locator('#review-panel')).toBeVisible();
+  await expect(page.locator('#markdown-editor')).toHaveAttribute('readonly', '');
+  await expect(page.locator('#review-pins-layer .review-target-button')).toHaveCount(4);
+  const pinWidths = await page.locator('#review-pins-layer .review-target-button').evaluateAll((pins) => (
+    pins.map((pin) => pin.getBoundingClientRect().width)
+  ));
+  expect(Math.max(...pinWidths)).toBeLessThanOrEqual(44);
+  await expect(page.locator('#markdown-preview > h1.review-target')).toHaveText('Review heading');
+
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="heading:"]').click();
+  await page.locator('#review-feedback-input').fill('Clarify the audience for this section.');
+  await page.locator('#review-feedback-submit').click();
+  await expect(page.locator('.review-thread')).toContainText('Clarify the audience');
+
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="paragraph:"]').click();
+  await page.locator('[data-review-kind="suggestion"]').click();
+  await page.locator('#review-feedback-input').fill('Use a shorter opening sentence.');
+  await page.locator('#review-feedback-submit').click();
+
+  await expect(page.locator('.review-thread[data-kind="suggestion"]')).toContainText('Use a shorter opening');
+  await expect(page.locator('.review-thread-dates')).toHaveCount(2);
+  await expect(page.locator('.review-thread-dates').first()).toContainText('Opened:');
+  await expect(page.locator('.review-thread-dates').first()).toContainText('Closed: Not closed');
+  await expect(page.locator('#review-toolbar-count')).toHaveText('2');
+  const reviewButtonMetrics = await page.locator('#review-toggle').evaluate((button) => {
+    const rect = button.getBoundingClientRect();
+    const count = button.querySelector('#review-toolbar-count');
+    return {
+      height: rect.height,
+      width: rect.width,
+      countVisible: count && getComputedStyle(count).display !== 'none',
+      countText: count && count.textContent,
+      active: button.classList.contains('is-active')
+    };
+  });
+  expect(reviewButtonMetrics.height).toBe(30);
+  expect(reviewButtonMetrics.width).toBeGreaterThan(30);
+  expect(reviewButtonMetrics).toMatchObject({ countVisible: true, countText: '2', active: true });
+  await page.evaluate(() => {
+    Object.defineProperty(navigator, 'clipboard', {
+      configurable: true,
+      value: { writeText: async (text) => { window.__copiedReviewSummary = text; } }
+    });
+  });
+  await page.locator('#review-copy-summary').click();
+  const copiedSummary = await page.evaluate(() => window.__copiedReviewSummary);
+  expect(copiedSummary).toContain('Generated:');
+  expect(copiedSummary).toContain('Total items: 2');
+  expect(copiedSummary).toContain('Open items: 2');
+  expect(copiedSummary).toContain('Resolved items: 0');
+  expect(copiedSummary).toContain('Opened:');
+  expect(copiedSummary).toContain('Closed: Not closed');
+  await expect.poll(() => editorValue(page)).toBe(original);
+  await expect.poll(async () => JSON.stringify(await storedDocuments(page))).toContain('Clarify the audience');
+
+  await page.reload();
+  await expect(page.locator('#markdown-editor')).toBeVisible();
+  await page.locator('#review-toggle').click();
+  await expect(page.locator('.review-thread')).toHaveCount(2);
+  await expect(page.locator('#review-toolbar-count')).toHaveText('2');
+});
+
+test('uses an in-app confirmation modal when deleting a review item', async ({ page }) => {
+  await page.evaluate(() => {
+    window.confirm = () => { throw new Error('Native confirm should not be used for review deletion.'); };
+  });
+  await page.locator('#review-toggle').click();
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="heading:"]').click();
+  await page.locator('#review-feedback-input').fill('Delete this through the app modal.');
+  await page.locator('#review-feedback-submit').click();
+
+  await page.locator('[data-review-action="delete"]').click();
+  await expect(page.locator('#review-delete-modal')).toBeVisible();
+  await expect(page.locator('#review-delete-modal')).toHaveAttribute('aria-hidden', 'false');
+  await expect(page.locator('#review-delete-title')).toHaveText('Delete review item?');
+  await expect.poll(() => page.evaluate(() => document.activeElement && document.activeElement.id)).toBe('review-delete-cancel');
+
+  await page.locator('#review-delete-modal').press('Escape');
+  await expect(page.locator('#review-delete-modal')).toBeHidden();
+  await expect(page.locator('#review-panel')).toBeVisible();
+  await expect(page.locator('.review-thread')).toHaveCount(1);
+
+  await page.locator('[data-review-action="delete"]').click();
+  await page.locator('#review-delete-confirm').click();
+  await expect(page.locator('.review-thread')).toHaveCount(0);
+  await expect(page.locator('#review-toolbar-count')).toBeHidden();
+  await expect(page.locator('#review-delete-modal')).toBeHidden();
+});
+
+test('resolves and deletes all review items from the panel toolbar', async ({ page }) => {
+  await page.locator('#review-toggle').click();
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="heading:"]').click();
+  await page.locator('#review-feedback-input').fill('First bulk review item.');
+  await page.locator('#review-feedback-submit').click();
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="paragraph:"]').click();
+  await page.locator('#review-feedback-input').fill('Second bulk review item.');
+  await page.locator('#review-feedback-submit').click();
+
+  await expect(page.locator('#review-resolve-all')).toBeEnabled();
+  await expect(page.locator('#review-delete-all')).toBeEnabled();
+  await page.locator('#review-resolve-all').click();
+  await expect(page.locator('#review-toolbar-count')).toBeHidden();
+  await expect(page.locator('#review-panel-summary')).toHaveText('All feedback resolved');
+  await page.locator('[data-review-filter="resolved"]').click();
+  await expect(page.locator('.review-thread')).toHaveCount(2);
+  await expect(page.locator('.review-thread-dates').first()).toContainText('Closed:');
+  await expect(page.locator('.review-thread-dates').first()).not.toContainText('Closed: Not closed');
+  const readResolvedAtValues = async () => {
+    const documents = await storedDocuments(page);
+    return documents.flatMap((tab) => (tab.reviewThreads || []).map((thread) => thread.resolvedAt));
+  };
+  await expect.poll(async () => (await readResolvedAtValues()).length).toBe(2);
+  const resolvedAtValues = await readResolvedAtValues();
+  expect(resolvedAtValues).toHaveLength(2);
+  expect(resolvedAtValues.every(Number.isFinite)).toBe(true);
+
+  await page.locator('#review-delete-all').click();
+  await expect(page.locator('#review-delete-title')).toHaveText('Delete all review items?');
+  await expect(page.locator('#review-delete-description')).toContainText('All 2 review items in this document');
+  await page.locator('#review-delete-cancel').click();
+  await expect(page.locator('.review-thread')).toHaveCount(2);
+
+  await page.locator('#review-delete-all').click();
+  await page.locator('#review-delete-confirm').click();
+  await expect(page.locator('.review-thread')).toHaveCount(0);
+  await expect(page.locator('#review-copy-summary')).toBeDisabled();
+  await expect(page.locator('#review-resolve-all')).toBeDisabled();
+  await expect(page.locator('#review-delete-all')).toBeDisabled();
+});
+
+test('resolves feedback and retains an orphaned thread when its block changes', async ({ page }) => {
+  await page.locator('#review-toggle').click();
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="heading:"]').click();
+  await page.locator('#review-feedback-input').fill('Rework this heading.');
+  await page.locator('#review-feedback-submit').click();
+
+  await page.locator('.review-thread-action', { hasText: 'Resolve' }).click();
+  await expect(page.locator('#review-toolbar-count')).toBeHidden();
+  await page.locator('[data-review-filter="resolved"]').click();
+  await expect(page.locator('.review-thread')).toContainText('Resolved');
+
+  await page.locator('#review-panel-close').click();
+  await setEditorContent(page, reviewMarkdown.replace('# Review heading', '# Replacement heading'));
+  await expect(page.locator('#markdown-preview h1')).toHaveText('Replacement heading');
+  await page.locator('#review-toggle').click();
+  await page.locator('[data-review-filter="all"]').click();
+  await expect(page.locator('.review-thread')).toHaveClass(/is-orphaned/);
+  await expect(page.locator('.review-thread-anchor')).toContainText('Anchor no longer in preview');
+});
+
+test('does not duplicate review mode inside mobile settings', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.locator('#mobile-menu-toggle').click();
+  await page.locator('[data-mobile-menu-section-toggle]', { hasText: 'Settings' }).click();
+
+  await expect(page.locator('#mobile-review-toggle')).toHaveCount(1);
+  await expect(page.locator('#review-toggle')).toBeAttached();
+});
+
+test('keeps feedback orphaned when the number of identical blocks changes', async ({ page }) => {
+  await setEditorContent(page, '# Duplicates\n\nRepeated paragraph.\n\nRepeated paragraph.');
+  await expect(page.locator('#markdown-preview p')).toHaveCount(2);
+  await page.locator('#review-toggle').click();
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="paragraph:"]').nth(1).click();
+  await page.locator('#review-feedback-input').fill('Feedback for the second copy.');
+  await page.locator('#review-feedback-submit').click();
+  await page.locator('#review-panel-close').click();
+
+  await setEditorContent(page, '# Duplicates\n\nRepeated paragraph.\n\nRepeated paragraph.\n\nRepeated paragraph.');
+  await expect(page.locator('#markdown-preview p')).toHaveCount(3);
+  await page.locator('#review-toggle').click();
+  await expect(page.locator('.review-thread')).toHaveClass(/is-orphaned/);
+});
+
+test('keeps feedback orphaned when identical blocks are reordered', async ({ page }) => {
+  const firstOrder = '# First\n\nRepeated paragraph.\n\n# Second\n\nRepeated paragraph.';
+  const secondOrder = '# Second\n\nRepeated paragraph.\n\n# First\n\nRepeated paragraph.';
+  await setEditorContent(page, firstOrder);
+  await expect(page.locator('#markdown-preview p')).toHaveCount(2);
+  await page.locator('#review-toggle').click();
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="paragraph:"]').nth(1).click();
+  await page.locator('#review-feedback-input').fill('Feedback for the paragraph under Second.');
+  await page.locator('#review-feedback-submit').click();
+  await page.locator('#review-panel-close').click();
+
+  await setEditorContent(page, secondOrder);
+  await expect(page.locator('#markdown-preview h1').first()).toHaveText('Second');
+  await page.locator('#review-toggle').click();
+  await expect(page.locator('.review-thread')).toHaveClass(/is-orphaned/);
+});
+
+test('keeps feedback attached when content near a unique block changes', async ({ page }) => {
+  await setEditorContent(page, '# Stable\n\nUnique reviewed paragraph.\n\nOriginal neighbor.');
+  await page.locator('#review-toggle').click();
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="paragraph:"]').first().click();
+  await page.locator('#review-feedback-input').fill('Keep this attached to the unique paragraph.');
+  await page.locator('#review-feedback-submit').click();
+  await page.locator('#review-panel-close').click();
+
+  await setEditorContent(page, '# Stable\n\nUnique reviewed paragraph.\n\nInserted neighbor.\n\nOriginal neighbor.');
+  await page.locator('#review-toggle').click();
+  await expect(page.locator('.review-thread')).not.toHaveClass(/is-orphaned/);
+  await expect(page.locator('.review-thread-anchor')).not.toContainText('Anchor no longer in preview');
+});
+
+test('keeps math feedback attached after asynchronous typesetting and reload', async ({ page }) => {
+  const installMathJaxStub = () => {
+    window.MathJax = {
+      startup: { promise: Promise.resolve() },
+      typesetClear() {},
+      async typesetPromise(targets) {
+        await new Promise((resolve) => setTimeout(resolve, 30));
+        targets.forEach((target) => {
+          target.innerHTML = 'Typeset equation <mjx-container>output</mjx-container>';
+        });
+      }
+    };
+  };
+  await page.addInitScript(installMathJaxStub);
+  await page.evaluate(installMathJaxStub);
+  await setEditorContent(page, '# Math review\n\nEquation $x^2$ stays anchored.');
+  await expect(page.locator('#markdown-preview p')).toContainText('Typeset equation output');
+
+  await page.locator('#review-toggle').click();
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="paragraph:"]').click();
+  await page.locator('#review-feedback-input').fill('Check the exponent notation.');
+  await page.locator('#review-feedback-submit').click();
+  await expect(page.locator('.review-thread')).not.toHaveClass(/is-orphaned/);
+
+  await page.reload();
+  await expect(page.locator('#markdown-preview p')).toContainText('Typeset equation output');
+  await page.locator('#review-toggle').click();
+  await expect(page.locator('.review-thread')).not.toHaveClass(/is-orphaned/);
+  await expect(page.locator('.review-thread-anchor')).not.toContainText('Anchor no longer in preview');
+});
+
+test('closes Review mode for a new tab and restores the previous tab view', async ({ page }) => {
+  await page.getByRole('button', { name: 'Edit Markdown' }).click();
+  await expect(page.locator('.content-container')).toHaveClass(/view-editor-only/);
+  await page.locator('#review-toggle').click();
+  await expect(page.locator('.content-container')).toHaveClass(/view-preview-only/);
+
+  await page.locator('#tab-new-btn').click();
+  await expect(page.locator('#review-panel')).toBeHidden();
+  await expect(page.locator('#review-toggle')).toHaveAttribute('aria-pressed', 'false');
+  await expect(page.locator('.content-container')).toHaveClass(/view-split/);
+
+  await page.locator('#tab-list [role="tab"]').filter({ hasText: 'Welcome to Markdown' }).click();
+  await expect(page.locator('.content-container')).toHaveClass(/view-editor-only/);
+});
diff --git a/tests/e2e/rich-content.spec.js b/tests/e2e/rich-content.spec.js
new file mode 100644
index 00000000..3f9d37a4
--- /dev/null
+++ b/tests/e2e/rich-content.spec.js
@@ -0,0 +1,181 @@
+const { test, expect } = require('@playwright/test');
+const {
+  fixture,
+  openApp,
+  setEditorContent,
+  stubRemoteDiagramServices,
+  stubLazyRendererLibraries
+} = require('../helpers/app');
+
+test.beforeEach(async ({ page }) => {
+  await stubRemoteDiagramServices(page);
+  await stubLazyRendererLibraries(page);
+  await openApp(page);
+});
+
+test('renders Mermaid diagrams', async ({ page }) => {
+  await setEditorContent(page, await fixture('mermaid.md'));
+
+  await expect(page.locator('.mermaid-container svg').first()).toBeVisible();
+  await expect(page.locator('.mermaid-container').first()).toContainText(/Mermaid test diagram|Write Markdown/);
+});
+
+test('renders Mermaid diagrams in the secondary document split preview', async ({ page }) => {
+  const markdown = await fixture('mermaid.md');
+  const primaryTab = page.locator('#tab-list .tab-item').first();
+  await page.locator('#tab-new-btn').click();
+  await setEditorContent(page, markdown);
+  const secondaryTabId = await page.locator('#tab-list .tab-item.active').getAttribute('data-tab-id');
+
+  await primaryTab.click({ button: 'right' });
+  await page.getByRole('menuitem', { name: 'Open in split view' }).click();
+  await page.locator('#document-split-destination').selectOption(secondaryTabId);
+  await page.locator('#document-split-modal-confirm').click();
+  await page.locator('.view-toolbar [data-view-mode="preview"]').click();
+
+  await expect(page.locator('#document-split-preview')).toBeVisible();
+  await expect(page.locator('#document-split-preview .mermaid-container svg')).toBeVisible();
+  await expect(page.locator('#document-split-preview .mermaid-container')).not.toHaveClass(/is-loading/);
+});
+
+test('renders WaveDrom diagrams in the secondary document split preview', async ({ page }) => {
+  const markdown = await fixture('wavedrom.md');
+  const primaryTab = page.locator('#tab-list .tab-item').first();
+  await page.locator('#tab-new-btn').click();
+  await setEditorContent(page, markdown);
+  const secondaryTabId = await page.locator('#tab-list .tab-item.active').getAttribute('data-tab-id');
+
+  await primaryTab.click({ button: 'right' });
+  await page.getByRole('menuitem', { name: 'Open in split view' }).click();
+  await page.locator('#document-split-destination').selectOption(secondaryTabId);
+  await page.locator('#document-split-modal-confirm').click();
+  await page.locator('.view-toolbar [data-view-mode="preview"]').click();
+
+  await expect(page.locator('#document-split-preview')).toBeVisible();
+  await expect(page.locator('#document-split-preview .kroki-container svg')).toBeVisible();
+  await expect(page.locator('#document-split-preview .kroki-container')).not.toHaveClass(/is-loading/);
+});
+
+test('renders LaTeX and ABC notation in the secondary document split preview', async ({ page }) => {
+  const markdown = '# Math and music\n\nInline math: $x^2 + y^2 = z^2$.\n\n```abc\nX:1\nT:Split score\nM:4/4\nK:C\nCDEF GABc|\n```';
+  const primaryTab = page.locator('#tab-list .tab-item').first();
+  await page.locator('#tab-new-btn').click();
+  await setEditorContent(page, markdown);
+  const secondaryTabId = await page.locator('#tab-list .tab-item.active').getAttribute('data-tab-id');
+
+  await primaryTab.click({ button: 'right' });
+  await page.getByRole('menuitem', { name: 'Open in split view' }).click();
+  await page.locator('#document-split-destination').selectOption(secondaryTabId);
+  await page.locator('#document-split-modal-confirm').click();
+  await page.locator('.view-toolbar [data-view-mode="preview"]').click();
+
+  await expect(page.locator('#document-split-preview mjx-container')).toBeVisible();
+  await expect(page.locator('#document-split-preview .abc-container svg')).toBeVisible();
+  await expect(page.locator('#document-split-preview .abc-container')).not.toHaveClass(/is-loading/);
+});
+
+test('renders GeoJSON maps and STL models in the secondary document split preview', async ({ page }) => {
+  await page.evaluate(() => {
+    window.L = {
+      map(node) {
+        const pane = document.createElement('div');
+        pane.className = 'leaflet-map-pane';
+        pane.textContent = 'Rendered GeoJSON map';
+        node.appendChild(pane);
+        return {
+          remove() { pane.remove(); },
+          fitBounds() {},
+          setView() {},
+          eachLayer() {},
+          attributionControl: {
+            addAttribution() {},
+            removeAttribution() {}
+          }
+        };
+      },
+      tileLayer() {
+        return { addTo() { return this; } };
+      },
+      geoJSON() {
+        return {
+          addTo() { return this; },
+          getBounds() {
+            return { isValid() { return false; } };
+          }
+        };
+      }
+    };
+    window.topojson = {
+      feature() {
+        return { type: 'FeatureCollection', features: [] };
+      }
+    };
+  });
+  const markdown = '# Map and model\n\n```geojson\n{"type":"FeatureCollection","features":[]}\n```\n\n'
+    + '```topojson\n{"type":"Topology","objects":{"sample":{}},"arcs":[]}\n```\n\n'
+    + await fixture('stl.md');
+  const primaryTab = page.locator('#tab-list .tab-item').first();
+  await page.locator('#tab-new-btn').click();
+  await setEditorContent(page, markdown);
+  const secondaryTabId = await page.locator('#tab-list .tab-item.active').getAttribute('data-tab-id');
+
+  await primaryTab.click({ button: 'right' });
+  await page.getByRole('menuitem', { name: 'Open in split view' }).click();
+  await page.locator('#document-split-destination').selectOption(secondaryTabId);
+  await page.locator('#document-split-modal-confirm').click();
+  await page.locator('.view-toolbar [data-view-mode="preview"]').click();
+
+  const mapPanes = page.locator('#document-split-preview .leaflet-map-pane');
+  await expect(mapPanes).toHaveCount(2);
+  await expect(mapPanes.first()).toBeVisible();
+  await expect(mapPanes.last()).toBeVisible();
+  await expect(page.locator('#document-split-preview .geojson-container')).not.toHaveClass(/is-loading/);
+  await expect(page.locator('#document-split-preview .topojson-container')).not.toHaveClass(/is-loading/);
+  await expect(page.locator('#document-split-preview .stl-container canvas')).toBeVisible();
+  await expect(page.locator('#document-split-preview .stl-toolbar')).toBeVisible();
+  await expect(page.locator('#document-split-preview .stl-container')).not.toHaveClass(/is-loading/);
+});
+
+const remoteDiagramCases = [
+  { name: 'PlantUML', fixtureName: 'plantuml.md', selector: '.plantuml-container svg', text: 'PlantUML test diagram' },
+  { name: 'Graphviz DOT', fixtureName: 'graphviz.md', selector: '.graphviz-container svg', text: 'Graphviz test diagram' },
+  { name: 'D2', fixtureName: 'd2.md', selector: '.d2-container svg', text: 'D2 test diagram' },
+  { name: 'Vega-Lite', fixtureName: 'vega-lite.md', roleName: 'Vega-Lite diagram' },
+  { name: 'WaveDrom', fixtureName: 'wavedrom.md', roleName: 'WaveDrom diagram' }
+];
+
+for (const diagram of remoteDiagramCases) {
+  test(`renders ${diagram.name} through the diagram adapter`, async ({ page }) => {
+    await setEditorContent(page, await fixture(diagram.fixtureName));
+
+    if (diagram.roleName) {
+      const image = page.getByRole('img', { name: diagram.roleName }).first();
+      await expect(image).toBeVisible();
+      await expect(image).toContainText(diagram.name === 'Vega-Lite' ? 'Vega-Lite test chart' : 'WaveDrom test diagram');
+    } else {
+      await expect(page.locator(diagram.selector).first()).toBeVisible();
+      await expect(page.locator(diagram.selector).first()).toContainText(diagram.text);
+    }
+  });
+}
+
+test('renders Markmap mind maps', async ({ page }) => {
+  await setEditorContent(page, await fixture('markmap.md'));
+
+  await expect(page.locator('.markmap-container svg').first()).toBeVisible();
+  await expect(page.locator('.markmap-container svg').first()).toContainText('Markmap test mind map');
+});
+
+test('renders ABC notation as visible sheet music', async ({ page }) => {
+  await setEditorContent(page, await fixture('abc.md'));
+
+  await expect(page.locator('.abc-container svg').first()).toBeVisible();
+  await expect(page.locator('.abc-container').first()).toContainText('ABC notation test score');
+});
+
+test('renders STL content into a 3D preview surface', async ({ page }) => {
+  await setEditorContent(page, await fixture('stl.md'));
+
+  await expect(page.locator('.stl-container canvas').first()).toBeVisible();
+  await expect(page.locator('.stl-toolbar').first()).toBeVisible();
+});
diff --git a/tests/e2e/share-live.spec.js b/tests/e2e/share-live.spec.js
new file mode 100644
index 00000000..67ed6956
--- /dev/null
+++ b/tests/e2e/share-live.spec.js
@@ -0,0 +1,147 @@
+const { test, expect } = require('@playwright/test');
+const {
+  fixture,
+  openApp,
+  setEditorContent,
+  storedDocuments,
+  stubLiveShareRuntime
+} = require('../helpers/app');
+
+function localizeAppLink(url, baseURL) {
+  const parsed = new URL(url);
+  return `${baseURL}/${parsed.hash}`;
+}
+
+test('Share Snapshot creates a view-only hash link that opens without permanent tab persistence', async ({ browser, page, baseURL }) => {
+  await openApp(page);
+  await setEditorContent(page, await fixture('share.md'));
+
+  await page.locator('#share-button').click();
+  await expect(page.locator('#share-modal')).toHaveClass(/is-visible/);
+  await page.locator('#share-generate-btn').click();
+  await expect(page.locator('#share-url-input')).toHaveValue(/#share=/);
+
+  const generatedUrl = await page.locator('#share-url-input').inputValue();
+  const sharedContext = await browser.newContext();
+  const sharedPage = await sharedContext.newPage();
+  await openApp(sharedPage, localizeAppLink(generatedUrl, baseURL), { expectEditorVisible: false });
+
+  await expect(sharedPage.locator('.content-container')).toHaveClass(/view-preview-only/);
+  await expect(sharedPage.locator('#markdown-editor')).toHaveJSProperty('readOnly', true);
+  await expect(sharedPage.locator('#markdown-preview')).toContainText('This text should survive a snapshot round trip.');
+
+  const storedTabs = JSON.stringify(await storedDocuments(sharedPage));
+  expect(storedTabs).not.toContain('This text should survive a snapshot round trip.');
+
+  await sharedContext.close();
+});
+
+test('Share Snapshot edit links open with editable source', async ({ browser, page, baseURL }) => {
+  await openApp(page);
+  await setEditorContent(page, await fixture('share.md'));
+
+  await page.locator('#share-button').click();
+  await page.locator('#share-mode-edit').check();
+  await page.locator('#share-generate-btn').click();
+  await expect(page.locator('#share-url-input')).toHaveValue(/edit=1/);
+
+  const generatedUrl = await page.locator('#share-url-input').inputValue();
+  const sharedContext = await browser.newContext();
+  const sharedPage = await sharedContext.newPage();
+  await openApp(sharedPage, localizeAppLink(generatedUrl, baseURL));
+
+  await expect(sharedPage.locator('.content-container')).toHaveClass(/view-split/);
+  await expect(sharedPage.locator('#markdown-editor')).toHaveJSProperty('readOnly', false);
+  await expect(sharedPage.locator('#markdown-editor')).toHaveValue(/Share Snapshot Fixture/);
+
+  await sharedContext.close();
+});
+
+test('Live Share host and guest can use a local mocked view-only room', async ({ browser, page, baseURL }) => {
+  await stubLiveShareRuntime(page);
+  await openApp(page);
+  await setEditorContent(page, '# Live Share Local Mock\n\nHost content.');
+
+  await page.locator('#live-share-button').click();
+  await page.locator('input[name="live-share-access-mode"][value="view"]').check();
+  await page.locator('#live-share-display-name').fill('Host');
+  await page.locator('#live-share-start-btn').click();
+
+  await expect(page.locator('#live-share-status-text')).toContainText(/Connected|Room active|waiting/i);
+  await expect(page.locator('#live-share-access-label')).toContainText('View only');
+  await expect(page.locator('#live-share-url-input')).toHaveValue(/#live=/);
+  const inviteUrl = await page.locator('#live-share-url-input').inputValue();
+  expect(inviteUrl).toContain('access=view');
+  expect(inviteUrl).toContain('role=view');
+
+  const guestPage = await page.context().newPage();
+  await stubLiveShareRuntime(guestPage);
+  await openApp(guestPage, localizeAppLink(inviteUrl, baseURL));
+
+  await expect(guestPage.locator('#live-share-button')).toHaveAttribute('aria-pressed', 'true');
+  await expect(guestPage.locator('#live-share-status-text')).toContainText(/Connected|Room active|waiting/i);
+
+  await page.locator('#live-share-end-btn').click();
+  await expect(page.locator('#live-share-status-text')).toContainText(/No live room active|Ending/i);
+
+  await guestPage.close();
+});
+
+test('Live Share synchronizes Review feedback with view-only participants', async ({ browser, page, baseURL }) => {
+  const markdown = '# Live review sync\n\nParagraph for shared feedback.';
+  await stubLiveShareRuntime(page);
+  await openApp(page);
+  await setEditorContent(page, markdown);
+
+  await page.locator('#live-share-button').click();
+  await page.locator('input[name="live-share-access-mode"][value="view"]').check();
+  await page.locator('#live-share-display-name').fill('Host');
+  await page.locator('#live-share-start-btn').click();
+  await expect(page.locator('#live-share-url-input')).toHaveValue(/#live=/);
+  const inviteUrl = await page.locator('#live-share-url-input').inputValue();
+  await page.locator('#live-share-modal-close-icon').click();
+
+  const guestPage = await page.context().newPage();
+  await stubLiveShareRuntime(guestPage);
+  await openApp(guestPage, localizeAppLink(inviteUrl, baseURL));
+  await expect(guestPage.locator('#markdown-preview h1')).toHaveText('Live review sync');
+  await expect(guestPage.locator('#markdown-editor')).toHaveJSProperty('readOnly', true);
+
+  await guestPage.locator('#review-toggle').click();
+  await guestPage.locator('#review-pins-layer .review-target-button[data-review-anchor^="heading:"]').click();
+  await guestPage.locator('#review-feedback-input').fill('Participant comment for the host.');
+  await guestPage.locator('#review-feedback-submit').click();
+
+  await expect(page.locator('#review-toolbar-count')).toHaveText('1');
+  await page.locator('#review-toggle').click();
+  await expect(page.locator('.review-thread')).toContainText('Participant comment for the host.');
+  await page.locator('#review-pins-layer .review-target-button[data-review-anchor^="paragraph:"]').click();
+  await page.locator('[data-review-kind="suggestion"]').click();
+  await page.locator('#review-feedback-input').fill('Host suggestion for the participant.');
+  await page.locator('#review-feedback-submit').click();
+
+  await expect(guestPage.locator('#review-toolbar-count')).toHaveText('2');
+  await expect(page.locator('.review-thread')).toHaveCount(2);
+  await expect(page.locator('.review-thread').filter({ hasText: 'Participant comment for the host.' })).toBeVisible();
+  await expect(guestPage.locator('.review-thread').filter({ hasText: 'Host suggestion for the participant.' })).toBeVisible();
+
+  const participantComment = page.locator('.review-thread').filter({ hasText: 'Participant comment for the host.' });
+  await participantComment.locator('[data-review-action="toggle-resolved"]').click();
+  await expect(guestPage.locator('#review-toolbar-count')).toHaveText('1');
+  await guestPage.locator('[data-review-filter="resolved"]').click();
+  await expect(guestPage.locator('.review-thread')).toContainText('Participant comment for the host.');
+  await expect(guestPage.locator('.review-thread-dates')).toContainText('Closed:');
+  await expect(guestPage.locator('.review-thread-dates')).not.toContainText('Closed: Not closed');
+
+  await guestPage.locator('[data-review-filter="open"]').click();
+  await guestPage.locator('.review-thread').filter({ hasText: 'Host suggestion for the participant.' }).locator('[data-review-action="delete"]').click();
+  await guestPage.locator('#review-delete-confirm').click();
+  await page.locator('[data-review-filter="all"]').click();
+  await expect(page.locator('.review-thread')).toHaveCount(1);
+  await expect(page.locator('.review-thread')).toContainText('Participant comment for the host.');
+  await expect.poll(() => page.locator('#markdown-editor').inputValue()).toBe(markdown);
+
+  await page.locator('#live-share-button').click();
+  await page.locator('#live-share-end-btn').click();
+  await guestPage.close();
+});
diff --git a/tests/e2e/smoke.spec.js b/tests/e2e/smoke.spec.js
new file mode 100644
index 00000000..aff00d74
--- /dev/null
+++ b/tests/e2e/smoke.spec.js
@@ -0,0 +1,32 @@
+const { test, expect } = require('@playwright/test');
+const { execFileSync } = require('node:child_process');
+const { openApp } = require('../helpers/app');
+
+test('static build smoke check passes', () => {
+  const output = execFileSync('node', ['tests/helpers/static-build-check.mjs'], {
+    cwd: process.cwd(),
+    encoding: 'utf8'
+  });
+  expect(output).toContain('Static build smoke check passed.');
+});
+
+test('app starts, loads the main UI, and has no critical first-load errors', async ({ page }) => {
+  const criticalErrors = await openApp(page);
+
+  await expect(page.getByRole('heading', { name: 'Markdown Viewer', exact: true })).toBeVisible();
+  await expect(page.locator('#markdown-editor')).toBeVisible();
+  await expect(page.locator('#markdown-preview')).toBeVisible();
+  await expect(page.locator('#tab-list [role="tab"]')).toHaveCount(1);
+
+  expect(criticalErrors).toEqual([]);
+});
+
+test('first run opens release notes in the background without stealing editor focus', async ({ page }) => {
+  const criticalErrors = await openApp(page, '/', { showReleaseNotes: true });
+
+  await expect(page.locator('#tab-list [role="tab"]')).toHaveCount(2);
+  await expect(page.locator('#tab-list .tab-item', { hasText: 'Release Notes:' })).toHaveCount(1);
+  await expect(page.locator('#tab-list .tab-item.active')).not.toContainText('Release Notes:');
+  await expect(page.locator('#markdown-editor')).toBeEditable();
+  expect(criticalErrors).toEqual([]);
+});
diff --git a/tests/e2e/status-toolbar-followup.spec.js b/tests/e2e/status-toolbar-followup.spec.js
new file mode 100644
index 00000000..d8c97873
--- /dev/null
+++ b/tests/e2e/status-toolbar-followup.spec.js
@@ -0,0 +1,173 @@
+const { test, expect } = require('@playwright/test');
+const { appVersion, openApp, stubClipboard } = require('../helpers/app');
+
+test.beforeEach(async ({ page }) => {
+  await openApp(page);
+});
+
+test('header and formatting toolbar expose the requested actions in order', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  const header = page.locator('.header-right');
+  await expect(page.locator('.app-header h1')).toBeVisible();
+  expect(await page.locator('.app-header h1').evaluate(title => title.getBoundingClientRect().width)).toBeGreaterThan(115);
+  expect(await page.locator('#document-sidebar').evaluate(sidebar => sidebar.getBoundingClientRect().width)).toBeGreaterThanOrEqual(220);
+  for (const selector of ['#importDropdown', '#share-button', '#live-share-button', '#header-about-button', '#workspaceSettingsDropdown']) {
+    await expect(header.locator(selector)).toBeVisible();
+  }
+  await expect(header.locator('[aria-label="Report an issue"]')).toBeVisible();
+  await expect(header.locator('#exportDropdown')).toBeVisible();
+  await expect(header.locator('#toggle-sync, #copy-markdown-button')).toHaveCount(0);
+
+  const toolbar = page.locator('#markdown-format-toolbar');
+  await expect(toolbar.locator('.workspace-format-actions [data-md-action="find"]')).toBeVisible();
+  await expect(toolbar.locator('.workspace-format-actions [data-md-action="fullscreen"]')).toBeVisible();
+  await expect(toolbar.locator('.workspace-format-actions [data-md-action="find"] i')).toHaveClass(/lucide-search/);
+  await expect(toolbar.locator('.workspace-format-actions [data-md-action="fullscreen"] i')).toHaveClass(/lucide-maximize/);
+  await expect(toolbar.locator('#review-toggle')).toBeVisible();
+  await expect(toolbar.locator('#toggle-sync, #copy-markdown-button')).toHaveCount(2);
+  await expect(toolbar.locator('#exportDropdown')).toHaveCount(0);
+
+  await toolbar.locator('.workspace-format-actions [data-md-action="find"]').click();
+  await expect(page.locator('#find-replace-modal')).toBeVisible();
+  await page.locator('#find-replace-close-icon').click();
+  await expect(page.locator('#find-replace-modal')).toBeHidden();
+
+  const fullscreen = toolbar.locator('.workspace-format-actions [data-md-action="fullscreen"]');
+  await fullscreen.click();
+  await expect.poll(() => page.evaluate(() => Boolean(document.fullscreenElement))).toBe(true);
+  await expect(fullscreen).toHaveAttribute('aria-label', 'Exit fullscreen');
+  await fullscreen.click();
+  await expect.poll(() => page.evaluate(() => Boolean(document.fullscreenElement))).toBe(false);
+
+  await toolbar.locator('#toggle-sync').click();
+  await expect(toolbar.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'false');
+  await toolbar.locator('#toggle-sync').click();
+  await expect(toolbar.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'true');
+  await stubClipboard(page);
+  await toolbar.locator('#copy-markdown-button').click();
+  await expect(toolbar.locator('#copy-markdown-button')).toHaveAttribute('aria-label', 'Copied');
+  await expect.poll(() => page.evaluate(() => window.__copiedText)).not.toBe('');
+
+  await header.locator('#importDropdown').click();
+  const newMenu = page.locator('[aria-labelledby="importDropdown"]');
+  await expect(newMenu).toBeVisible();
+  await expect(newMenu.locator('.app-menu-label')).toHaveText(['New document', 'From files', 'From GitHub']);
+  const newWidth = await newMenu.evaluate(menu => menu.getBoundingClientRect().width);
+  expect(newWidth).toBeGreaterThanOrEqual(167.5);
+  expect(newWidth).toBeLessThanOrEqual(220);
+  await page.keyboard.press('Escape');
+
+  await header.locator('#exportDropdown').click();
+  const exportMenu = page.locator('[aria-labelledby="exportDropdown"]');
+  await expect(exportMenu).toBeVisible();
+  await expect(exportMenu.locator('.app-menu-label')).toHaveText(['Markdown (.md)', 'HTML', 'PDF', 'Image (.png)']);
+  await expect(exportMenu.locator('.settings-menu-header, .app-menu-description')).toHaveCount(0);
+  const exportWidth = await exportMenu.evaluate(menu => menu.getBoundingClientRect().width);
+  expect(exportWidth).toBeGreaterThanOrEqual(167.5);
+  expect(exportWidth).toBeLessThanOrEqual(220);
+});
+
+test('bottom bar centers statistics and announces saving then saved', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await expect(page.locator('.app-status-bar')).toBeVisible();
+  await expect(page.locator('#stats-container')).toBeVisible();
+  await expect(page.locator('#save-status')).toHaveAttribute('data-state', 'saved');
+  await expect(page.locator('#save-status-text')).toHaveText('All changes saved');
+  await expect(page.locator('#save-status-icon')).toHaveClass(/lucide-check/);
+
+  const alignment = await page.evaluate(() => {
+    const viewportCenter = window.innerWidth / 2;
+    const stats = document.querySelector('#stats-container').getBoundingClientRect();
+    const save = document.querySelector('#save-status').getBoundingClientRect();
+    return {
+      statsCenter: stats.left + stats.width / 2,
+      viewportCenter,
+      saveRight: save.right,
+      viewportRight: window.innerWidth
+    };
+  });
+  expect(Math.abs(alignment.statsCenter - alignment.viewportCenter)).toBeLessThanOrEqual(1);
+  expect(alignment.viewportRight - alignment.saveRight).toBeLessThanOrEqual(12);
+
+  await page.locator('#markdown-editor').fill('# Saving status test');
+  await expect(page.locator('#save-status')).toHaveAttribute('data-state', 'saving');
+  await expect(page.locator('#save-status-text')).toHaveText('Saving...');
+  await expect(page.locator('#save-status-icon')).toHaveClass(/lucide-refresh-cw/);
+  await expect(page.locator('#save-status')).toHaveAttribute('data-state', 'saved', { timeout: 3000 });
+  await expect(page.locator('#save-status-text')).toHaveText('All changes saved');
+
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+  await page.locator('#markdown-editor').fill('# Reduced motion status test');
+  await expect(page.locator('#save-status')).toHaveAttribute('data-state', 'saving');
+  await expect(page.locator('#save-status-icon')).toHaveCSS('animation-name', 'none');
+  await expect(page.locator('#save-status')).toHaveAttribute('data-state', 'saved', { timeout: 3000 });
+
+  const contrast = await page.locator('#save-status').evaluate(status => {
+    const parse = value => value.match(/[\d.]+/g).slice(0, 3).map(Number);
+    const luminance = rgb => {
+      const values = rgb.map(value => {
+        const channel = value / 255;
+        return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);
+      });
+      return values[0] * 0.2126 + values[1] * 0.7152 + values[2] * 0.0722;
+    };
+    const foreground = luminance(parse(getComputedStyle(status).color));
+    const background = luminance(parse(getComputedStyle(status.closest('.app-status-bar')).backgroundColor));
+    return (Math.max(foreground, background) + 0.05) / (Math.min(foreground, background) + 0.05);
+  });
+  expect(contrast).toBeGreaterThanOrEqual(4.5);
+});
+
+test('about presents compact production information and project links', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.locator('#header-about-button').click();
+  const about = page.locator('#about-modal');
+  await expect(about).toBeVisible();
+  await expect(about).toContainText('A browser-based Markdown editor, viewer, previewer, and reader.');
+  await expect(page.locator('#about-version')).toHaveText(await appVersion());
+  await expect(about).toContainText('Open source');
+  await expect(about.getByRole('link', { name: 'GitHub Repository' })).toHaveAttribute('href', 'https://github.com/ThisIs-Developer/Markdown-Viewer');
+  await expect(about.getByRole('link', { name: 'Apache License 2.0' })).toHaveAttribute('href', /LICENSE$/);
+  await expect(about.getByRole('button', { name: 'Show Release Notes' })).toBeVisible();
+  await expect(about.getByRole('link', { name: 'FAQ' })).toHaveAttribute('href', /\/wiki\/FAQ$/);
+  await expect(about).not.toContainText('Technology stack');
+  await expect(about).not.toContainText('Storage privacy');
+  await expect(about).not.toContainText('Clear local data');
+  await expect(about.locator('#private-mode-toggle')).toHaveCount(0);
+});
+
+for (const viewport of [
+  { width: 320, height: 720 },
+  { width: 375, height: 812 },
+  { width: 768, height: 1024 },
+  { width: 1080, height: 720 },
+  { width: 1440, height: 900 }
+]) {
+  test(`status and toolbar avoid horizontal overflow at ${viewport.width}px`, async ({ page }) => {
+    await page.setViewportSize(viewport);
+    await expect(page.locator('.app-status-bar')).toBeVisible();
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+    if (viewport.width < 1080) {
+      await expect(page.locator('#stats-container')).toBeHidden();
+      await expect(page.locator('#save-status')).toBeVisible();
+    } else {
+      await expect(page.locator('#stats-container')).toBeVisible();
+      await expect(page.locator('.header-right')).toBeVisible();
+      const headerLayout = await page.evaluate(() => {
+        const title = document.querySelector('.app-header h1').getBoundingClientRect();
+        const toolbar = document.querySelector('.header-right').getBoundingClientRect();
+        const visibleControls = Array.from(document.querySelectorAll('.header-right > *')).filter(element => {
+          const style = getComputedStyle(element);
+          return style.display !== 'none' && !element.hidden && element.getBoundingClientRect().width > 0;
+        }).map(element => element.getBoundingClientRect());
+        return {
+          noOverlap: title.right <= toolbar.left,
+          controlsInViewport: visibleControls.every(rect => rect.left >= 0 && rect.right <= window.innerWidth)
+        };
+      });
+      expect(headerLayout.noOverlap).toBe(true);
+      expect(headerLayout.controlsInViewport).toBe(true);
+    }
+  });
+}
diff --git a/tests/e2e/tab-split-sidebar-update.spec.js b/tests/e2e/tab-split-sidebar-update.spec.js
new file mode 100644
index 00000000..2879b8d4
--- /dev/null
+++ b/tests/e2e/tab-split-sidebar-update.spec.js
@@ -0,0 +1,470 @@
+const { test, expect } = require('@playwright/test');
+const { openApp, setEditorContent, storedDocuments, stubClipboard } = require('../helpers/app');
+
+test.beforeEach(async ({ page }) => {
+  await openApp(page);
+});
+
+test('tab bar uses standard file, menu, and close controls', async ({ page }) => {
+  const tab = page.locator('#tab-list .tab-item.active');
+  await expect(tab.locator('.tab-file-icon')).toHaveClass(/lucide-file-text/);
+  await expect(tab.locator('.tab-menu-btn i')).toHaveClass(/lucide-ellipsis/);
+  await expect(tab.locator('.tab-close-btn')).toBeVisible();
+  await expect(page.locator('#document-sidebar-open i')).toHaveClass(/lucide-panel-left-close/);
+
+  const order = await tab.evaluate(node => Array.from(node.children).map(child => child.className));
+  expect(order.at(-2)).toContain('tab-menu-btn');
+  expect(order.at(-1)).toContain('tab-close-btn');
+
+  const sizing = await page.evaluate(() => {
+    const sidebarButton = document.querySelector('#document-sidebar-open');
+    const toolbarButton = document.querySelector('.header-icon-command');
+    const sidebarStyle = getComputedStyle(sidebarButton);
+    const toolbarStyle = getComputedStyle(toolbarButton);
+    return {
+      sidebar: [sidebarStyle.width, sidebarStyle.height, sidebarStyle.borderRadius],
+      toolbar: [toolbarStyle.width, toolbarStyle.height, toolbarStyle.borderRadius]
+    };
+  });
+  expect(sizing.sidebar).toEqual(sizing.toolbar);
+});
+
+test('right-click tab menu exposes split and scoped close commands', async ({ page }) => {
+  await page.locator('#tab-new-btn').click();
+  await page.locator('#tab-new-btn').click();
+  const middleTab = page.locator('#tab-list .tab-item').nth(1);
+  await middleTab.click({ button: 'right' });
+
+  const menu = page.locator('[data-tab-context-menu="true"]');
+  await expect(menu).toBeVisible();
+  await expect(menu.locator('.tab-menu-item')).toHaveText([
+    'Open in split view',
+    'Close',
+    'Close others',
+    'Close to the right',
+    'Close to the left',
+    'Close all'
+  ]);
+  await page.keyboard.press('Escape');
+  const tabListBox = await page.locator('#tab-list').boundingBox();
+  await page.locator('#tab-list').click({ button: 'right', position: { x: tabListBox.width - 4, y: tabListBox.height / 2 } });
+  await expect(page.locator('[data-tab-context-menu="true"]')).toBeVisible();
+});
+
+test('split view uses one combined tab and offers only edit or preview modes', async ({ page }) => {
+  const firstTab = page.locator('#tab-list .tab-item').first();
+  await firstTab.locator('.tab-menu-btn').click();
+  await page.locator('.tab-menu-dropdown.open [data-action="rename"]').click();
+  await page.locator('#rename-modal-input').fill('Primary architecture decision record for the document sidebar');
+  await page.locator('#rename-modal-confirm').click();
+  await expect(firstTab.locator('.tab-title')).toContainText('Primary architecture decision record');
+  await page.locator('#tab-new-btn').click();
+  const secondaryContent = '# Secondary implementation notes for synchronized preview\n\n' + Array.from({ length: 120 }, (_, index) => `Line ${index + 1}: synchronized split content`).join('\n\n');
+  await setEditorContent(page, secondaryContent);
+  const secondTab = page.locator('#tab-list .tab-item.active');
+  await secondTab.locator('.tab-menu-btn').click();
+  await page.locator('.tab-menu-dropdown.open [data-action="rename"]').click();
+  await page.locator('#rename-modal-input').fill('Secondary implementation notes for synchronized preview');
+  await page.locator('#rename-modal-confirm').click();
+  const secondTabId = await page.locator('#tab-list .tab-item.active').getAttribute('data-tab-id');
+
+  await firstTab.click({ button: 'right' });
+  await page.getByRole('menuitem', { name: 'Open in split view' }).click();
+  await page.locator('#document-split-destination').selectOption(secondTabId);
+  await page.locator('#document-split-modal-confirm').click();
+
+  await expect(page.locator('.content-container')).toHaveClass(/document-split-active/);
+  await expect(page.locator('#document-split-pane')).toBeVisible();
+  await expect(page.locator('#document-split-editor')).toHaveValue(secondaryContent);
+  await expect(page.locator('.document-split-header')).toHaveCount(0);
+  await expect(page.locator('#document-split-close')).toHaveCount(0);
+  const splitTab = page.locator('#tab-list .tab-item.is-document-split');
+  await expect(splitTab).toHaveCount(1);
+  await expect(splitTab.locator('.tab-file-icon')).toHaveClass(/lucide-columns-2/);
+  await expect(splitTab.locator('.tab-split-title')).toHaveCount(2);
+  await expect(page.locator('.view-toolbar [data-view-mode="split"]')).toBeVisible();
+  await expect(page.locator('.view-toolbar [data-view-mode="split"]')).toBeDisabled();
+  await expect(page.locator('.view-toolbar [data-view-mode="editor"]')).toBeVisible();
+  await expect(page.locator('.view-toolbar [data-view-mode="preview"]')).toBeVisible();
+  await expect(page.locator('#toggle-sync')).toBeVisible();
+  await expect(page.locator('#toggle-sync')).toBeEnabled();
+  await expect(page.locator('#markdown-editor')).toBeVisible();
+  await expect(page.locator('#document-split-editor')).toBeVisible();
+  await expect(page.locator('#document-split-preview')).toBeHidden();
+  await page.locator('#markdown-editor').evaluate(editor => { editor.scrollTop = editor.scrollHeight; editor.dispatchEvent(new Event('scroll')); });
+  await expect.poll(() => page.locator('#document-split-editor').evaluate(editor => editor.scrollTop)).toBeGreaterThan(0);
+  await expect(splitTab.locator('.tab-split-title').first()).toHaveCSS('text-overflow', 'ellipsis');
+  const splitTabWidth = await splitTab.evaluate(tab => tab.getBoundingClientRect().width);
+  expect(splitTabWidth).toBeGreaterThanOrEqual(350);
+  expect(splitTabWidth).toBeLessThanOrEqual(360);
+  await page.locator('.view-toolbar [data-view-mode="preview"]').click();
+  await expect(page.locator('#markdown-preview')).toBeVisible();
+  await expect(page.locator('#markdown-editor')).toBeHidden();
+  await expect(page.locator('#document-split-pane')).toBeVisible();
+  await expect(page.locator('#document-split-editor')).toBeHidden();
+  await expect(page.locator('#document-split-preview')).toBeVisible();
+  await expect(page.locator('#document-split-preview')).toContainText('Secondary implementation notes');
+  await page.locator('.preview-pane').evaluate(preview => { preview.scrollTop = preview.scrollHeight; preview.dispatchEvent(new Event('scroll')); });
+  await expect.poll(() => page.locator('#document-split-preview').evaluate(preview => preview.scrollTop)).toBeGreaterThan(0);
+  await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+  await page.locator('.view-toolbar [data-view-mode="editor"]').click();
+  await page.locator('#document-split-editor').fill('# Edited in split');
+
+  await page.locator(`.document-tree-row[data-document-id="${secondTabId}"] .document-tree-main`).click();
+  await expect(page.locator('#markdown-editor')).toHaveValue('# Edited in split');
+  await expect(page.locator('#document-split-pane')).toBeVisible();
+  await page.locator('#tab-list .tab-item.is-document-split').click({ button: 'right' });
+  await page.getByRole('menuitem', { name: 'Exit split view' }).click();
+  await expect(page.locator('#document-split-pane')).toBeHidden();
+  await expect(page.locator('.view-toolbar [data-view-mode="split"]')).toBeEnabled();
+});
+
+test('header keeps global actions concise and settings groups workspace preferences', async ({ page }) => {
+  const header = page.locator('.header-right');
+  await expect(header.locator('#importDropdown')).toBeVisible();
+  await expect(header.locator('#share-button')).toBeVisible();
+  await expect(header.locator('#live-share-button')).toBeVisible();
+  await expect(header.locator('[aria-label="Report an issue"]')).toBeVisible();
+  await expect(header.locator('#header-about-button')).toBeVisible();
+  await expect(header.locator('#workspaceSettingsDropdown')).toBeVisible();
+  await expect(header.locator('#exportDropdown')).toBeVisible();
+  await expect(header.locator('#toggle-sync, #review-toggle, #copy-markdown-button')).toHaveCount(0);
+  const headerActions = await header.locator(':scope > button, :scope > a, :scope > .dropdown > button').evaluateAll(elements =>
+    elements.map(element => element.id || element.getAttribute('aria-label'))
+  );
+  expect(headerActions).toEqual([
+    'importDropdown',
+    'exportDropdown',
+    'share-button',
+    'live-share-button',
+    'Report an issue',
+    'header-about-button',
+    'workspaceSettingsDropdown'
+  ]);
+
+  const formatToolbar = page.locator('#markdown-format-toolbar');
+  await expect(formatToolbar.locator('#toggle-sync')).toBeVisible();
+  await expect(formatToolbar.locator('#copy-markdown-button')).toBeVisible();
+  await expect(formatToolbar.locator('#review-toggle')).toBeVisible();
+  await expect(formatToolbar.locator('#exportDropdown')).toHaveCount(0);
+  await expect(formatToolbar.locator('#documentActionsDropdown')).toHaveCount(0);
+  await expect(page.locator('.app-brand-logo')).toHaveCount(0);
+
+  const utilityOrder = await formatToolbar.locator('.markdown-toolbar-group--utilities').evaluate(group =>
+    Array.from(group.children).map(element => element.id || element.className)
+  );
+  expect(utilityOrder.slice(0, 4)).toEqual(['toggle-sync', 'copy-markdown-button', 'review-toggle', 'document-command-divider']);
+  await formatToolbar.locator('#toggle-sync').click();
+  await expect(formatToolbar.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'false');
+  await expect(formatToolbar.locator('#toggle-sync')).toHaveAttribute('aria-label', 'Enable synchronized scrolling');
+  await formatToolbar.locator('#toggle-sync').click();
+  await expect(formatToolbar.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'true');
+  await stubClipboard(page);
+  await formatToolbar.locator('#copy-markdown-button').click();
+  await expect(formatToolbar.locator('#copy-markdown-button')).toHaveAttribute('aria-label', 'Copied');
+  await expect(formatToolbar.locator('#copy-markdown-button i')).toHaveClass(/lucide-check/);
+  await expect.poll(() => page.evaluate(() => window.__copiedText)).not.toBe('');
+
+  const initialTabCount = await page.locator('#tab-list .tab-item').count();
+  await header.locator('#importDropdown').click();
+  const newMenu = header.locator('[aria-labelledby="importDropdown"]');
+  await expect(newMenu).toBeVisible();
+  await expect(newMenu.locator('.app-menu-label')).toHaveText(['New document', 'From files', 'From GitHub']);
+  await expect(newMenu.locator('.settings-menu-header, .app-menu-description')).toHaveCount(0);
+  await newMenu.locator('#header-new-document').click();
+  await expect(page.locator('#tab-list .tab-item')).toHaveCount(initialTabCount + 1);
+
+  await page.locator('#workspaceSettingsDropdown').click();
+  const settings = page.locator('.settings-menu');
+  await expect(settings).toBeVisible();
+  await expect(settings).toContainText('Workspace settings');
+  await expect(settings).not.toContainText('Appearance and preferences');
+  await expect(settings.locator('#theme-toggle')).toContainText('Appearance');
+  await expect(settings.locator('#languageDropdown')).toBeVisible();
+  await expect(settings.locator('#private-mode-toggle')).toBeVisible();
+  await expect(settings.locator('#storage-settings-button')).toContainText('Storage and Backup');
+  await expect(settings.locator('#tab-reset-btn')).toContainText('Reset workspace');
+  await settings.locator('#theme-toggle').click();
+  await expect(settings.locator('#theme-toggle')).toContainText('Appearance');
+  await page.locator('#workspaceSettingsDropdown').click();
+
+  const insertToggle = formatToolbar.locator('.markdown-tool-select--insert');
+  await expect(insertToggle).toHaveAttribute('aria-label', 'More tools');
+  await expect(insertToggle).not.toContainText('Insert');
+  await expect(formatToolbar.locator('[data-md-action="diagram"]')).toHaveCount(1);
+  await expect(formatToolbar.locator('[data-toolbar-menu="insert"] [data-md-action="diagram"]')).toHaveCount(0);
+  await insertToggle.press('Enter');
+  await expect(formatToolbar.locator('[data-toolbar-menu="insert"]')).toHaveClass(/open/);
+  await page.keyboard.press('Escape');
+
+  await header.locator('#exportDropdown').click();
+  const exportMenu = page.locator('[aria-labelledby="exportDropdown"]');
+  await expect(exportMenu).toBeVisible();
+  await expect(exportMenu).not.toHaveClass(/toolbar-portal-menu/);
+  await expect(exportMenu).toBeInViewport();
+
+  await expect(formatToolbar.locator('.markdown-view-toolbar .view-toggle-btn')).toHaveCount(3);
+  expect(await formatToolbar.locator('.markdown-view-toolbar .view-toggle-btn').evaluateAll(buttons =>
+    buttons.map(button => button.getAttribute('data-view-mode'))
+  )).toEqual(['editor', 'split', 'preview']);
+  const activeStyle = await page.locator('.view-toggle-btn.is-active').evaluate(button => ({
+    borderWidth: getComputedStyle(button).borderTopWidth,
+    boxShadow: getComputedStyle(button).boxShadow,
+    backgroundColor: getComputedStyle(button).backgroundColor
+  }));
+  expect(activeStyle.borderWidth).toBe('0px');
+  expect(activeStyle.boxShadow).not.toBe('none');
+  expect(activeStyle.backgroundColor).not.toBe('rgba(0, 0, 0, 0)');
+});
+
+test('secret workspace accepts pasted 8-character access keys without password fields', async ({ page }) => {
+  await page.locator('.document-tree-row[data-tree-id="workspace_secret"] .document-tree-main').click();
+  const password = page.locator('#secret-workspace-key');
+  const confirmation = page.locator('#secret-workspace-key-confirm');
+  await password.fill('12345678');
+  await page.context().grantPermissions(['clipboard-read', 'clipboard-write'], { origin: new URL(page.url()).origin });
+  await page.evaluate(async () => await navigator.clipboard.writeText('12345678'));
+  await confirmation.focus();
+  await confirmation.press('ControlOrMeta+v');
+  await expect(confirmation).toHaveValue('12345678');
+  await expect(password).toHaveAttribute('autocomplete', 'off');
+  await expect(page.locator('#secret-workspace-modal').locator('input[type="password"]')).toHaveCount(0);
+  await expect(page.locator('#secret-workspace-key-guidance')).toHaveText('Use at least 8 characters.');
+  await page.locator('#secret-workspace-modal-confirm').click();
+  await expect(page.locator('#secret-workspace-modal')).toBeHidden();
+});
+
+test('closing a tab keeps the document in Files and reopening restores the tab', async ({ page }) => {
+  await page.locator('#tab-new-btn').click();
+  const closedTabId = await page.locator('#tab-list .tab-item.active').getAttribute('data-tab-id');
+  await setEditorContent(page, '# Kept document');
+  await page.locator('#tab-list .tab-item.active .tab-close-btn').click();
+
+  await expect(page.locator(`.tab-item[data-tab-id="${closedTabId}"]`)).toHaveCount(0);
+  await expect(page.locator(`.document-tree-row[data-document-id="${closedTabId}"]`)).toHaveCount(1);
+  await page.reload();
+  await expect(page.locator('#markdown-editor')).toBeVisible();
+  await expect(page.locator(`.tab-item[data-tab-id="${closedTabId}"]`)).toHaveCount(0);
+  await expect(page.locator(`.document-tree-row[data-document-id="${closedTabId}"]`)).toHaveCount(1);
+  await page.locator(`.document-tree-row[data-document-id="${closedTabId}"] .document-tree-main`).click();
+  await expect(page.locator(`.tab-item[data-tab-id="${closedTabId}"]`)).toBeVisible();
+  await expect(page.locator('#markdown-editor')).toHaveValue('# Kept document');
+
+  const reopenedRow = page.locator(`.document-tree-row[data-document-id="${closedTabId}"]`);
+  await reopenedRow.hover();
+  await reopenedRow.locator('.document-menu-btn').click();
+  await page.locator('.document-menu-dropdown.open [data-action="delete"]').click();
+  await expect(reopenedRow).toHaveCount(0);
+});
+
+test('format toolbar consolidates heading, case, alignment, and insert actions', async ({ page }) => {
+  await expect(page.locator('[data-md-action="clear-formatting"]')).toHaveCount(0);
+  await expect(page.locator('[data-md-action="help"]')).toHaveCount(0);
+  await expect(page.locator('[data-md-action="info"]')).toBeVisible();
+  await expect(page.locator('[data-toolbar-menu-toggle="heading"]')).toBeVisible();
+  await expect(page.locator('[data-toolbar-menu-toggle="case"]')).toBeVisible();
+  await expect(page.locator('[data-toolbar-menu-toggle="alignment"]')).toBeVisible();
+  await expect(page.locator('[data-toolbar-menu-toggle="insert"]')).toBeVisible();
+
+  await setEditorContent(page, 'toolbar heading');
+  await page.locator('[data-toolbar-menu-toggle="heading"]').click();
+  await expect(page.locator('[data-toolbar-menu="heading"] .markdown-tool-menu-item')).toHaveCount(6);
+  await expect(page.locator('[data-toolbar-menu="heading"] [data-md-action="paragraph"]')).toHaveCount(0);
+  await page.locator('[data-toolbar-menu="heading"] [data-md-level="2"]').click();
+  await expect(page.locator('#markdown-editor')).toHaveValue('## toolbar heading');
+
+  await page.locator('#markdown-editor').evaluate(editor => {
+    editor.focus();
+    editor.setSelectionRange(3, editor.value.length);
+  });
+  await page.locator('[data-toolbar-menu-toggle="case"]').click();
+  await page.locator('[data-toolbar-menu="case"] [data-md-action="uppercase"]').click();
+  await expect(page.locator('#markdown-editor')).toHaveValue('## TOOLBAR HEADING');
+  await page.locator('[data-md-action="info"]').click();
+  await expect(page.locator('#about-modal-title')).toHaveText('About Markdown Viewer');
+  await expect(page.locator('#about-modal')).toContainText('Open source');
+  await expect(page.locator('#about-modal').getByRole('link', { name: 'GitHub Repository' })).toBeVisible();
+  await expect(page.locator('#about-modal')).not.toContainText('Clear local data');
+  await expect(page.locator('#about-modal #private-mode-toggle')).toHaveCount(0);
+  await page.locator('#about-modal-close').click();
+});
+
+test('preview code and terminal blocks show language labels and copy controls', async ({ page }) => {
+  await setEditorContent(page, [
+    '```javascript',
+    'const answer = 42;',
+    '```',
+    '',
+    '```python',
+    'print("hello")',
+    '```',
+    '',
+    '```bash',
+    'npm run dev',
+    '```'
+  ].join('\n'));
+  await page.locator('.view-toolbar [data-view-mode="preview"]').click();
+  const blocks = page.locator('#markdown-preview .code-preview-block');
+  await expect(blocks).toHaveCount(3);
+  await expect(blocks.locator('.code-preview-language')).toHaveText(['JS', 'PY', 'SH']);
+  await expect(blocks.nth(0).locator('.code-preview-language')).toHaveAttribute('title', 'JavaScript');
+  await expect(blocks.nth(2)).toHaveClass(/is-terminal/);
+  await expect(blocks.locator('.code-preview-copy')).toHaveCount(3);
+  await page.evaluate(() => {
+    window.__copiedPreviewText = '';
+    navigator.clipboard.writeText = text => {
+      window.__copiedPreviewText = text;
+      return Promise.resolve();
+    };
+  });
+  await blocks.nth(0).locator('.code-preview-copy').click();
+  await expect(blocks.nth(0).locator('.code-preview-copy')).toContainText('Copied');
+  await expect.poll(() => page.evaluate(() => window.__copiedPreviewText)).toBe('const answer = 42;');
+});
+
+test('Files tree highlights only the active file and draws nesting guides', async ({ page }) => {
+  await page.locator('#sidebar-new-folder').click();
+  await page.locator('#document-name-modal-input').fill('Research');
+  await page.locator('#document-name-modal-confirm').click();
+  const folderRow = page.locator('.document-tree-row[data-tree-type="folder"]', { hasText: 'Research' });
+  await page.locator('#sidebar-new-document').click();
+
+  const activeRow = page.locator('.document-tree-row.is-active');
+  await activeRow.hover();
+  await activeRow.locator('.document-menu-btn').click();
+  await page.locator('.document-menu-dropdown.open [data-action="favorite"]').click();
+
+  await expect(activeRow).toHaveCount(1);
+  await expect(activeRow).toHaveAttribute('data-tree-type', 'document');
+  await expect(page.locator('.document-tree-row[data-tree-type="workspace"].is-active')).toHaveCount(0);
+  await expect(page.locator('.document-tree-row[data-tree-type="folder"].is-active')).toHaveCount(0);
+  await expect(page.locator('.document-tree-row[data-tree-type="document"][data-tree-depth="2"]')).toHaveCount(1);
+  await expect(activeRow.locator('.document-favorite-indicator')).toHaveClass(/lucide-star-filled/);
+  const activeVisuals = await activeRow.evaluate(row => {
+    const rowStyle = getComputedStyle(row);
+    const mainStyle = getComputedStyle(row.querySelector('.document-tree-main'));
+    const starStyle = getComputedStyle(row.querySelector('.document-favorite-indicator'));
+    return { rowBackground: rowStyle.backgroundColor, mainBackground: mainStyle.backgroundColor, starColor: starStyle.color };
+  });
+  expect(activeVisuals.rowBackground).toBe('rgba(0, 0, 0, 0)');
+  expect(activeVisuals.mainBackground).not.toBe('rgba(0, 0, 0, 0)');
+  expect(activeVisuals.starColor).toBe('rgb(217, 119, 6)');
+  await expect(folderRow.locator('.document-tree-main > i')).toHaveClass(/lucide-folder-open/);
+  await folderRow.locator('.document-tree-toggle').click();
+  await expect(page.locator('.document-tree-row[data-tree-type="folder"]', { hasText: 'Research' }).locator('.document-tree-main > i')).toHaveClass(/lucide-folder$/);
+  await page.locator('.document-tree-row[data-tree-type="folder"]', { hasText: 'Research' }).locator('.document-tree-toggle').click();
+  const guideColor = await page.locator('.document-tree-group--folder').evaluate(group => getComputedStyle(group, '::before').backgroundColor);
+  expect(guideColor).not.toBe('rgba(0, 0, 0, 0)');
+  await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+  await expect(activeRow.locator('.document-favorite-indicator')).toHaveCSS('color', 'rgb(251, 191, 36)');
+});
+
+test('close all produces an empty editor state without deleting files', async ({ page }) => {
+  await page.locator('#tab-new-btn').click();
+  const fileCount = await page.locator('.document-tree-row[data-document-id]').count();
+  await page.locator('#tab-list .tab-item.active').click({ button: 'right' });
+  await page.getByRole('menuitem', { name: 'Close all' }).click();
+
+  await expect(page.locator('#tab-list .tab-item')).toHaveCount(0);
+  await expect(page.locator('#no-open-document')).toBeVisible();
+  await expect(page.locator('.document-tree-row[data-document-id]')).toHaveCount(fileCount);
+  await expect(page.locator('#no-open-document-new')).toHaveClass(/no-open-document-action/);
+  await page.locator('#no-open-document').focus();
+  await page.keyboard.press('Tab');
+  await expect(page.locator('#no-open-document-explorer')).toBeFocused();
+  await page.keyboard.press('Tab');
+  await expect(page.locator('#no-open-document-new')).toBeFocused();
+  expect(await page.locator('#no-open-document-new').evaluate(button => getComputedStyle(button).outlineStyle)).not.toBe('none');
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await expect(page.locator('#no-open-document-new')).toHaveCSS('transition-duration', '0s');
+  for (const viewport of [{ width: 375, height: 812 }, { width: 812, height: 375 }]) {
+    await page.setViewportSize(viewport);
+    const metrics = await page.locator('#no-open-document').evaluate(emptyState => ({
+      horizontalOverflow: document.documentElement.scrollWidth > document.documentElement.clientWidth,
+      buttonHeights: Array.from(emptyState.querySelectorAll('.no-open-document-action'), button => button.getBoundingClientRect().height)
+    }));
+    expect(metrics.horizontalOverflow).toBe(false);
+    expect(metrics.buttonHeights.every(height => height >= 44)).toBe(true);
+  }
+  await page.locator('#no-open-document-new').click();
+  await expect(page.locator('#tab-list .tab-item')).toHaveCount(1);
+  await expect(page.locator('.document-tree-row[data-document-id]')).toHaveCount(fileCount + 1);
+});
+
+test('close all batches 400 open tabs without blocking the page', async ({ page }) => {
+  const seededCount = 400;
+  await page.evaluate(async count => {
+    const database = await new Promise((resolve, reject) => {
+      const request = indexedDB.open('markdownViewerWorkspace');
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    const transaction = database.transaction(['documents', 'contents'], 'readwrite');
+    const documents = transaction.objectStore('documents');
+    const contents = transaction.objectStore('contents');
+    const now = Date.now();
+    for (let index = 0; index < count; index++) {
+      const id = `bulk_${String(index).padStart(3, '0')}`;
+      documents.put({
+        id,
+        title: `Bulk ${index + 1}`,
+        scrollPos: 0,
+        viewMode: 'split',
+        reviewThreads: [],
+        favorite: false,
+        isOpen: true,
+        createdAt: now + index,
+        lastOpenedAt: now + index,
+        lastEditedAt: now + index,
+        workspaceId: 'workspace_default',
+        folderId: null,
+        contentLoaded: false,
+        contentSize: 8
+      });
+      contents.put({ id, content: '# Bulk', updatedAt: now });
+    }
+    await new Promise((resolve, reject) => {
+      transaction.oncomplete = resolve;
+      transaction.onerror = () => reject(transaction.error);
+      transaction.onabort = () => reject(transaction.error);
+    });
+    database.close();
+    localStorage.setItem('markdownViewerActiveTab', `bulk_${String(count - 1).padStart(3, '0')}`);
+  }, seededCount);
+  await page.reload();
+  await expect(page.locator('#tab-list .tab-item')).toHaveCount(seededCount + 1);
+
+  await page.locator('#tab-list .tab-item.active').click({ button: 'right' });
+  const startedAt = Date.now();
+  await page.getByRole('menuitem', { name: 'Close all' }).click();
+  await expect(page.locator('#tab-list .tab-item')).toHaveCount(0);
+  expect(Date.now() - startedAt).toBeLessThan(3000);
+  await expect(page.locator('#no-open-document')).toBeVisible();
+  await expect.poll(async () => (await storedDocuments(page)).filter(document => document.isOpen === false).length).toBeGreaterThanOrEqual(seededCount);
+});
+
+test('toolbar stays usable on phone and landscape widths', async ({ page }) => {
+  await page.setViewportSize({ width: 375, height: 812 });
+  await expect(page.locator('#markdown-format-toolbar')).toBeVisible();
+  await expect(page.locator('[data-toolbar-menu-toggle="heading"]')).toBeVisible();
+  await page.locator('[data-toolbar-menu-toggle="heading"]').click();
+  await expect(page.locator('[data-toolbar-menu="heading"]')).toBeVisible();
+  await page.keyboard.press('Escape');
+  await page.locator('#markdown-format-toolbar').evaluate(toolbar => { toolbar.scrollLeft = toolbar.scrollWidth; });
+  const utilityPlacement = await page.evaluate(() => {
+    const toolbar = document.querySelector('#markdown-format-toolbar').getBoundingClientRect();
+    const utilities = document.querySelector('.markdown-toolbar-group--utilities').getBoundingClientRect();
+    return {
+      toolbarLeft: Math.round(toolbar.left),
+      toolbarRight: Math.round(toolbar.right),
+      utilitiesRight: Math.round(utilities.right),
+      utilitiesLeft: Math.round(utilities.left)
+    };
+  });
+  expect(utilityPlacement.utilitiesRight).toBeLessThanOrEqual(utilityPlacement.toolbarRight);
+  expect(utilityPlacement.utilitiesLeft).toBeGreaterThanOrEqual(utilityPlacement.toolbarLeft);
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+
+  await page.setViewportSize({ width: 844, height: 390 });
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+});
diff --git a/tests/e2e/ui-toolbar-redesign.spec.js b/tests/e2e/ui-toolbar-redesign.spec.js
new file mode 100644
index 00000000..eb8f19c3
--- /dev/null
+++ b/tests/e2e/ui-toolbar-redesign.spec.js
@@ -0,0 +1,324 @@
+const { test, expect } = require('@playwright/test');
+const { openApp } = require('../helpers/app');
+
+test.beforeEach(async ({ page }) => {
+  await openApp(page);
+});
+
+test('Explorer labels and sidebar toggle describe the next action', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await expect(page.locator('#document-sidebar-title')).toHaveText('Explorer');
+  await expect(page.locator('.document-sidebar-heading i')).toHaveCount(0);
+  await expect(page.locator('.document-tree-row[data-tree-id="workspace_default"] .document-tree-label')).toHaveText('Workspace');
+
+  const toggle = page.locator('#document-sidebar-open');
+  await expect(toggle).not.toHaveClass(/is-active/);
+  await expect(toggle).toHaveAttribute('aria-label', 'Close Explorer');
+  await expect(toggle.locator('i')).toHaveClass(/lucide-panel-left-close$/);
+
+  await toggle.click();
+  await expect(page.locator('body')).toHaveClass(/document-sidebar-collapsed/);
+  await expect(toggle).toHaveAttribute('aria-label', 'Open Explorer');
+  await expect(toggle.locator('i')).toHaveClass(/lucide-panel-left-open/);
+  await expect(toggle).not.toHaveClass(/is-active/);
+
+  await toggle.click();
+  await expect(page.locator('body')).not.toHaveClass(/document-sidebar-collapsed/);
+  await expect(toggle).toHaveAttribute('aria-label', 'Close Explorer');
+  await expect(toggle.locator('i')).toHaveClass(/lucide-panel-left-close$/);
+});
+
+test('application header keeps its height while showing the compact product identity', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await expect(page.locator('.app-brand-icon')).toHaveAttribute('src', 'assets/icon.jpg');
+  await expect(page.locator('.app-brand-title-row h1')).toContainText('Markdown Viewer');
+  await expect(page.locator('.app-brand-subtitle')).toHaveText('Write. Preview. Share.');
+
+  const geometry = await page.evaluate(() => ({
+    headerHeight: document.querySelector('.app-header').getBoundingClientRect().height,
+    iconWidth: document.querySelector('.app-brand-icon').getBoundingClientRect().width,
+    iconHeight: document.querySelector('.app-brand-icon').getBoundingClientRect().height
+  }));
+  expect(geometry.headerHeight).toBeGreaterThanOrEqual(40);
+  expect(geometry.headerHeight).toBeLessThanOrEqual(45);
+  expect([geometry.iconWidth, geometry.iconHeight]).toEqual([32, 32]);
+  await expect(page.locator('.app-brand .github-link i')).toHaveCSS('font-size', '20px');
+  await expect(page.locator('#tab-new-btn')).toHaveCSS('width', '25px');
+  await expect(page.locator('#tab-new-btn')).toHaveCSS('height', '25px');
+});
+
+test('shared application overlays use compact type, spacing, and surface styling', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await page.locator('#share-button').click();
+  const shareSurface = await page.locator('#share-modal .reset-modal-box').evaluate(element => {
+    const style = getComputedStyle(element);
+    return { radius: style.borderRadius, padding: style.padding, fontSize: style.fontSize };
+  });
+  expect(shareSurface).toEqual({ radius: '12px', padding: '0px', fontSize: '12px' });
+  await page.locator('#share-modal-close-icon').click();
+
+  await page.locator('#importDropdown').click();
+  await page.locator('#import-from-github').click();
+  await expect(page.locator('#github-import-modal')).toHaveClass(/is-visible/);
+  await expect(page.locator('#github-import-modal .reset-modal-message')).toHaveCSS('font-size', '13px');
+  await expect(page.locator('#github-import-modal .reset-modal-box')).toHaveCSS('max-width', '520px');
+  await page.locator('#github-import-close').click();
+
+  await page.locator('#header-about-button').click();
+  await expect(page.locator('.about-description')).toHaveText('A browser-based Markdown editor, viewer, previewer, and reader.');
+  await expect(page.locator('.about-actions')).toContainText('Apache License 2.0');
+  await expect(page.locator('.about-actions')).toContainText('FAQ');
+  await expect(page.locator('.about-support')).toContainText('Developed and maintained by ThisIs-Developer.');
+  await page.locator('#about-modal-close').click();
+
+  await page.locator('.markdown-tool-select--insert').click();
+  await page.locator('[data-toolbar-menu="insert"] [data-md-action="alert"]').click();
+  await expect(page.locator('#alert-modal')).toHaveClass(/is-visible/);
+  await expect(page.locator('#alert-modal .alert-option').first()).toBeFocused();
+  await page.keyboard.press('Escape');
+  await expect(page.locator('#alert-modal')).toBeHidden();
+
+  await page.locator('[data-md-action="table"]').click();
+  const tableSurface = await page.locator('#table-modal .reset-modal-box').evaluate(element => {
+    const style = getComputedStyle(element);
+    return { radius: style.borderRadius, padding: style.padding, fontSize: style.fontSize };
+  });
+  expect(tableSurface).toEqual(shareSurface);
+  await page.locator('#table-modal [data-modal-cancel]').click();
+  await expect(page.locator('#table-modal')).toBeHidden();
+
+  await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+  await page.locator('#share-button').click();
+  await expect(page.locator('#share-modal .reset-modal-box')).toHaveCSS('background-color', 'rgb(22, 27, 34)');
+  await expect(page.locator('#share-modal .reset-modal-message')).toHaveCSS('color', 'rgb(201, 209, 217)');
+  await page.locator('#share-modal-close-icon').click();
+});
+
+test('every application dialog uses the shared alert modal shell', async ({ page }) => {
+  const dialogShells = await page.locator('.reset-modal-overlay[role="dialog"] .reset-modal-box').evaluateAll(elements =>
+    elements.map(element => ({
+      id: element.closest('[role="dialog"]')?.id,
+      sharedShell: element.classList.contains('app-modal-box'),
+      header: Boolean(element.querySelector(':scope > .modal-header')),
+      close: Boolean(element.querySelector(':scope > .modal-header .modal-close-btn')),
+      footer: Boolean(element.querySelector(':scope > .reset-modal-actions')),
+      padding: getComputedStyle(element).padding
+    }))
+  );
+
+  expect(dialogShells.length).toBeGreaterThanOrEqual(26);
+  expect(dialogShells.filter(dialog => !dialog.sharedShell || !dialog.header || !dialog.close || !dialog.footer || dialog.padding !== '0px')).toEqual([]);
+});
+
+test('toolbar groups preserve actions while simplifying Insert and promoting diagrams', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  const toolbar = page.locator('#markdown-format-toolbar');
+  const utilityOrder = await toolbar.locator('.markdown-toolbar-group--utilities').evaluate(group =>
+    Array.from(group.children).map(element => element.id || element.className)
+  );
+  expect(utilityOrder.slice(0, 4)).toEqual([
+    'toggle-sync',
+    'copy-markdown-button',
+    'review-toggle',
+    'document-command-divider'
+  ]);
+
+  const insertToggle = toolbar.locator('.markdown-tool-select--insert');
+  await expect(insertToggle).toHaveText('');
+  await expect(insertToggle).toHaveAttribute('title', 'More tools');
+  await expect(insertToggle.locator('.lucide-ellipsis')).toHaveCount(1);
+  await expect(toolbar.locator('[data-md-action="diagram"]')).toHaveCount(1);
+  await expect(toolbar.locator('[data-toolbar-menu="insert"] [data-md-action="diagram"]')).toHaveCount(0);
+
+  await insertToggle.press('Enter');
+  const insertMenu = toolbar.locator('[data-toolbar-menu="insert"]');
+  await expect(insertMenu).toHaveClass(/open/);
+  await expect(insertMenu.locator('.markdown-tool-menu-item').first()).toBeFocused();
+  await page.keyboard.press('Escape');
+  await expect(insertMenu).not.toHaveClass(/open/);
+  await expect(insertToggle).toBeFocused();
+
+  await insertToggle.click();
+  await insertMenu.locator('[data-md-action="emoji"]').click();
+  await expect(page.locator('#emoji-modal')).toBeVisible();
+  await page.locator('#emoji-modal-search').press('Escape');
+  await expect(page.locator('#emoji-modal')).toBeHidden();
+
+  const diagramTrigger = toolbar.locator('[data-md-action="diagram"]');
+  await diagramTrigger.click();
+  await expect(page.locator('#diagram-modal')).toBeVisible();
+  await expect(page.locator('#diagram-modal-search')).toBeFocused();
+  await page.keyboard.press('Escape');
+  await expect(page.locator('#diagram-modal')).toBeHidden();
+  await expect(diagramTrigger).toBeFocused();
+
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  await diagramTrigger.click();
+  await expect(page.locator('#diagram-modal-search')).toBeFocused();
+  await page.keyboard.press('Escape');
+  await expect(diagramTrigger).toBeFocused();
+});
+
+test('Lucide icons use the local 1.5-pixel system with the branded GitHub exception', async ({ page }) => {
+  const liveShareIcon = page.locator('#live-share-button i');
+  await expect(liveShareIcon).toHaveAttribute('data-lucide', 'radio');
+  await expect(liveShareIcon).toHaveClass(/lucide-radio/);
+  await expect(page.locator('.github-link i')).toHaveClass(/bi-github/);
+  await expect(page.locator('.github-link i')).not.toHaveClass(/lucide/);
+  const rendering = await liveShareIcon.evaluate(icon => ({
+    size: getComputedStyle(icon).fontSize,
+    mask: getComputedStyle(icon).maskImage,
+    runtime: typeof window.lucide
+  }));
+  expect(rendering.size).toBe('14px');
+  expect(rendering.mask).not.toBe('none');
+  expect(rendering.runtime).toBe('undefined');
+});
+
+test('shared interface roles use the application type and icon scale', async ({ page }) => {
+  const sizing = await page.evaluate(() => {
+    const uniqueFontSizes = selector => Array.from(new Set(
+      Array.from(document.querySelectorAll(selector), element => getComputedStyle(element).fontSize)
+    ));
+    const rootStyle = getComputedStyle(document.documentElement);
+    return {
+      tokens: Object.fromEntries([
+        '--ui-font-xs', '--ui-font-sm', '--ui-font-md', '--ui-font-lg', '--ui-font-xl',
+        '--ui-icon-size-xs', '--ui-icon-size-sm', '--ui-icon-size-md', '--ui-icon-size-lg',
+        '--ui-icon-size-xl', '--ui-icon-size-brand'
+      ].map(token => [token, rootStyle.getPropertyValue(token).trim()])),
+      headerButtons: uniqueFontSizes('#importDropdown, #exportDropdown, .header-right > .tool-button'),
+      menuLabels: uniqueFontSizes('.app-menu-label'),
+      menuDescriptions: uniqueFontSizes('.app-menu-description'),
+      menuIcons: uniqueFontSizes('.app-menu-item > i:first-child, .settings-menu-item > i'),
+      modalTitles: uniqueFontSizes('.reset-modal-message'),
+      modalText: uniqueFontSizes('.modal-subtext, .reset-modal-label, .reset-modal-btn'),
+      modalIcons: uniqueFontSizes('.modal-close-btn .lucide'),
+      explorerLabels: uniqueFontSizes('.document-tree-label'),
+      explorerIcons: uniqueFontSizes('.document-tree-main > i'),
+      mobileText: uniqueFontSizes('.mobile-menu-item'),
+      mobileIcons: uniqueFontSizes('.mobile-menu-item > i, .mobile-menu-item-label > i')
+    };
+  });
+
+  expect(sizing.tokens).toEqual({
+    '--ui-font-xs': '10px',
+    '--ui-font-sm': '11px',
+    '--ui-font-md': '12px',
+    '--ui-font-lg': '13px',
+    '--ui-font-xl': '16px',
+    '--ui-icon-size-xs': '9px',
+    '--ui-icon-size-sm': '12px',
+    '--ui-icon-size-md': '14px',
+    '--ui-icon-size-lg': '16px',
+    '--ui-icon-size-xl': '18px',
+    '--ui-icon-size-brand': '20px'
+  });
+  expect(sizing.headerButtons).toEqual(['13px']);
+  expect(sizing.menuLabels).toEqual(['12px']);
+  expect(sizing.menuDescriptions).toEqual(['11px']);
+  expect(sizing.menuIcons).toEqual(['14px']);
+  expect(sizing.modalTitles).toEqual(['13px']);
+  expect(sizing.modalText).toEqual(['12px']);
+  expect(sizing.modalIcons).toEqual(['14px']);
+  expect(sizing.explorerLabels).toEqual(['12px']);
+  expect(sizing.explorerIcons).toEqual(['14px']);
+  expect(sizing.mobileText).toEqual(['12px']);
+  expect(sizing.mobileIcons).toEqual(['14px']);
+});
+
+test('New, Export, and formatting menus share one visual system and keyboard dismissal', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+
+  await page.locator('#importDropdown').click();
+  const newMenu = page.locator('[aria-labelledby="importDropdown"]');
+  await expect(newMenu).toBeVisible();
+  const newSurface = await newMenu.evaluate(menu => {
+    const style = getComputedStyle(menu);
+    return [style.backgroundColor, style.borderColor, style.borderRadius, style.boxShadow];
+  });
+  await page.keyboard.press('Escape');
+  await expect(newMenu).toBeHidden();
+
+  await page.locator('#exportDropdown').click();
+  const exportMenu = page.locator('[aria-labelledby="exportDropdown"]');
+  await expect(exportMenu).toBeVisible();
+  const exportSurface = await exportMenu.evaluate(menu => {
+    const style = getComputedStyle(menu);
+    return [style.backgroundColor, style.borderColor, style.borderRadius, style.boxShadow];
+  });
+  expect(exportSurface).toEqual(newSurface);
+  await page.keyboard.press('Escape');
+
+  const insertToggle = page.locator('.markdown-tool-select--insert');
+  await insertToggle.click();
+  const insertMenu = page.locator('[data-toolbar-menu="insert"]');
+  const insertSurface = await insertMenu.evaluate(menu => {
+    const style = getComputedStyle(menu);
+    return [style.backgroundColor, style.borderColor, style.borderRadius, style.boxShadow];
+  });
+  expect(insertSurface).toEqual(newSurface);
+  await page.locator('#markdown-editor').click();
+  await expect(insertMenu).not.toHaveClass(/open/);
+});
+
+test('toolbar uses theme surfaces and remains usable at desktop and phone widths', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  const toolbar = page.locator('#markdown-format-toolbar');
+  await expect(toolbar).toHaveCSS('background-color', 'rgb(255, 255, 255)');
+  const desktopSizing = await page.evaluate(() => {
+    const toolbar = document.querySelector('#markdown-format-toolbar');
+    const formatButton = toolbar.querySelector('.markdown-tool-btn');
+    const utilityButton = toolbar.querySelector('.markdown-toolbar-group--document .tool-button');
+    const viewButton = toolbar.querySelector('.markdown-view-toolbar .view-toggle-btn');
+    return {
+      toolbarHeight: toolbar.getBoundingClientRect().height,
+      formatButton: [formatButton.getBoundingClientRect().width, formatButton.getBoundingClientRect().height],
+      utilityButton: [utilityButton.getBoundingClientRect().width, utilityButton.getBoundingClientRect().height],
+      viewButton: [viewButton.getBoundingClientRect().width, viewButton.getBoundingClientRect().height]
+    };
+  });
+  await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'dark'));
+  await expect(toolbar).toHaveCSS('background-color', 'rgb(22, 27, 34)');
+
+  await page.evaluate(() => document.documentElement.setAttribute('data-theme', 'light'));
+  await page.setViewportSize({ width: 375, height: 812 });
+  const mobileSizing = await page.evaluate(() => {
+    const toolbar = document.querySelector('#markdown-format-toolbar');
+    const buttons = Array.from(toolbar.querySelectorAll('button')).filter(button => button.getBoundingClientRect().height > 0);
+    return {
+      documentOverflow: document.documentElement.scrollWidth > window.innerWidth,
+      toolbarScrollable: toolbar.scrollWidth > toolbar.clientWidth,
+      toolbarHeight: toolbar.getBoundingClientRect().height,
+      formatButton: (() => {
+        const button = toolbar.querySelector('.markdown-tool-btn');
+        return [button.getBoundingClientRect().width, button.getBoundingClientRect().height];
+      })(),
+      utilityButton: (() => {
+        const button = toolbar.querySelector('.markdown-toolbar-group--document .tool-button');
+        return [button.getBoundingClientRect().width, button.getBoundingClientRect().height];
+      })(),
+      viewButton: (() => {
+        const button = toolbar.querySelector('.markdown-view-toolbar .view-toggle-btn');
+        return [button.getBoundingClientRect().width, button.getBoundingClientRect().height];
+      })(),
+      minimumTarget: Math.min(...buttons.map(button => button.getBoundingClientRect().height))
+    };
+  });
+  expect(mobileSizing.documentOverflow).toBe(false);
+  expect(mobileSizing.toolbarScrollable).toBe(true);
+  expect(mobileSizing.toolbarHeight).toBe(desktopSizing.toolbarHeight);
+  expect(mobileSizing.formatButton).toEqual(desktopSizing.formatButton);
+  expect(mobileSizing.utilityButton).toEqual(desktopSizing.utilityButton);
+  expect(mobileSizing.viewButton).toEqual(desktopSizing.viewButton);
+  expect(mobileSizing.minimumTarget).toBeGreaterThanOrEqual(26);
+
+  await page.evaluate(() => { document.documentElement.style.fontSize = '20px'; });
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+  await expect(page.locator('#document-sidebar-open')).toBeVisible();
+  await page.evaluate(() => { document.documentElement.style.fontSize = ''; });
+
+  await page.setViewportSize({ width: 812, height: 375 });
+  expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
+  expect(await toolbar.evaluate(element => element.scrollWidth > element.clientWidth)).toBe(true);
+});
diff --git a/tests/e2e/workspace-redesign.spec.js b/tests/e2e/workspace-redesign.spec.js
new file mode 100644
index 00000000..edc972d7
--- /dev/null
+++ b/tests/e2e/workspace-redesign.spec.js
@@ -0,0 +1,61 @@
+const { test, expect } = require('@playwright/test');
+const { openApp } = require('../helpers/app');
+
+const requiredViewports = [320, 375, 768, 1024, 1440];
+
+for (const width of requiredViewports) {
+  test(`workspace redesign has no page overflow at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width, height: width < 768 ? 812 : 900 });
+    const errors = await openApp(page);
+
+    await expect(page.locator('#document-workspace-shell')).toBeVisible();
+    await expect(page.locator('#markdown-format-toolbar')).toBeVisible();
+    await expect(page.locator('#document-sidebar-status')).toBeAttached();
+
+    const overflow = await page.evaluate(() => ({
+      viewport: document.documentElement.clientWidth,
+      page: document.documentElement.scrollWidth
+    }));
+    expect(overflow.page).toBeLessThanOrEqual(overflow.viewport);
+    expect(errors).toEqual([]);
+  });
+}
+
+test('mobile workspace switches between editor, split, and preview', async ({ page }) => {
+  await page.setViewportSize({ width: 320, height: 812 });
+  await openApp(page);
+
+  const container = page.locator('.content-container');
+  const openMobileViewMenu = async () => {
+    await page.locator('#mobile-menu-toggle').click();
+    await expect(page.locator('#mobile-menu-panel')).toHaveClass(/active/);
+  };
+
+  await openMobileViewMenu();
+  await page.locator('.mobile-view-mode-btn[data-mode="preview"]').click();
+  await expect(container).toHaveClass(/view-preview-only/);
+  await expect(page.locator('#markdown-preview')).toBeVisible();
+
+  await openMobileViewMenu();
+  await page.locator('.mobile-view-mode-btn[data-mode="editor"]').click();
+  await expect(container).toHaveClass(/view-editor-only/);
+  await expect(page.locator('#markdown-editor')).toBeVisible();
+
+  await openMobileViewMenu();
+  await page.locator('.mobile-view-mode-btn[data-mode="split"]').click();
+  await expect(container).toHaveClass(/view-split/);
+  await expect(page.locator('#markdown-preview')).toBeVisible();
+});
+
+test('workspace search and sidebar commands remain interactive', async ({ page }) => {
+  await openApp(page);
+
+  const sidebarSearch = page.locator('#document-sidebar-search');
+  await sidebarSearch.focus();
+  await expect(sidebarSearch).toBeFocused();
+  await sidebarSearch.fill('Welcome');
+  await expect(page.locator('#document-sidebar-status')).toContainText('result');
+
+  await page.locator('[data-md-action="table"]').click();
+  await expect(page.locator('#table-modal')).toBeVisible();
+});
diff --git a/tests/fixtures/abc.md b/tests/fixtures/abc.md
new file mode 100644
index 00000000..51da30be
--- /dev/null
+++ b/tests/fixtures/abc.md
@@ -0,0 +1,10 @@
+# ABC Notation
+
+```abc
+X:1
+T:Scale
+M:4/4
+L:1/4
+K:C
+C D E F | G A B c |
+```
diff --git a/tests/fixtures/basic.md b/tests/fixtures/basic.md
new file mode 100644
index 00000000..d9aa3a1f
--- /dev/null
+++ b/tests/fixtures/basic.md
@@ -0,0 +1,9 @@
+# Local Test Document
+
+This document verifies **bold text**, _italic text_, and a short list.
+
+- Alpha
+- Beta
+- Gamma
+
+> A blockquote for the preview.
diff --git a/tests/fixtures/d2.md b/tests/fixtures/d2.md
new file mode 100644
index 00000000..ef0f8983
--- /dev/null
+++ b/tests/fixtures/d2.md
@@ -0,0 +1,7 @@
+# D2
+
+```d2
+editor: Markdown Editor
+preview: Live Preview
+editor -> preview: renders
+```
diff --git a/tests/fixtures/export.md b/tests/fixtures/export.md
new file mode 100644
index 00000000..11e210f2
--- /dev/null
+++ b/tests/fixtures/export.md
@@ -0,0 +1,8 @@
+# Export Fixture
+
+Export this **Markdown** document.
+
+| Type | Expected |
+| --- | --- |
+| Markdown | Download |
+| HTML | Download |
diff --git a/tests/fixtures/gfm.md b/tests/fixtures/gfm.md
new file mode 100644
index 00000000..1c4971ec
--- /dev/null
+++ b/tests/fixtures/gfm.md
@@ -0,0 +1,21 @@
+# GFM Coverage
+
+| Feature | Status |
+| --- | --- |
+| Tables | Works |
+| Task lists | Works |
+
+- [x] Checked item
+- [ ] Open item
+
+```js
+console.log("highlight me");
+```
+
+[Example link](https://example.com)
+
+> GitHub-style blockquote
+
+Footnote reference[^one].
+
+[^one]: Footnote body.
diff --git a/tests/fixtures/graphviz.md b/tests/fixtures/graphviz.md
new file mode 100644
index 00000000..04d5c18a
--- /dev/null
+++ b/tests/fixtures/graphviz.md
@@ -0,0 +1,8 @@
+# Graphviz
+
+```dot
+digraph G {
+  rankdir=LR;
+  Markdown -> Preview -> Export;
+}
+```
diff --git a/tests/fixtures/imported-file.md b/tests/fixtures/imported-file.md
new file mode 100644
index 00000000..7e2d5f2a
--- /dev/null
+++ b/tests/fixtures/imported-file.md
@@ -0,0 +1,3 @@
+# Imported Fixture
+
+This file was loaded through the file input.
diff --git a/tests/fixtures/long-document.md b/tests/fixtures/long-document.md
new file mode 100644
index 00000000..791e9792
--- /dev/null
+++ b/tests/fixtures/long-document.md
@@ -0,0 +1,45 @@
+# Long Document Smoke
+
+This fixture is intentionally repetitive so preview rendering and scrolling have a realistic amount of content.
+
+<!-- repeated content starts -->
+
+## Section 1
+
+Paragraph 1 with **bold**, `code`, and [a link](https://example.com).
+
+## Section 2
+
+Paragraph 2 with **bold**, `code`, and [a link](https://example.com).
+
+## Section 3
+
+Paragraph 3 with **bold**, `code`, and [a link](https://example.com).
+
+## Section 4
+
+Paragraph 4 with **bold**, `code`, and [a link](https://example.com).
+
+## Section 5
+
+Paragraph 5 with **bold**, `code`, and [a link](https://example.com).
+
+## Section 6
+
+Paragraph 6 with **bold**, `code`, and [a link](https://example.com).
+
+## Section 7
+
+Paragraph 7 with **bold**, `code`, and [a link](https://example.com).
+
+## Section 8
+
+Paragraph 8 with **bold**, `code`, and [a link](https://example.com).
+
+## Section 9
+
+Paragraph 9 with **bold**, `code`, and [a link](https://example.com).
+
+## Section 10
+
+Paragraph 10 with **bold**, `code`, and [a link](https://example.com).
diff --git a/tests/fixtures/markmap.md b/tests/fixtures/markmap.md
new file mode 100644
index 00000000..25e8d3fa
--- /dev/null
+++ b/tests/fixtures/markmap.md
@@ -0,0 +1,8 @@
+# Markmap
+
+```markmap
+# Test Mind Map
+## Editor
+## Preview
+### Diagrams
+```
diff --git a/tests/fixtures/mermaid.md b/tests/fixtures/mermaid.md
new file mode 100644
index 00000000..8f9333c9
--- /dev/null
+++ b/tests/fixtures/mermaid.md
@@ -0,0 +1,7 @@
+# Mermaid
+
+```mermaid
+flowchart TD
+  A[Write Markdown] --> B[Preview]
+  B --> C[Export]
+```
diff --git a/tests/fixtures/plantuml.md b/tests/fixtures/plantuml.md
new file mode 100644
index 00000000..63b46719
--- /dev/null
+++ b/tests/fixtures/plantuml.md
@@ -0,0 +1,8 @@
+# PlantUML
+
+```plantuml
+@startuml
+Alice -> Bob: Hello from tests
+Bob --> Alice: Rendered
+@enduml
+```
diff --git a/tests/fixtures/share.md b/tests/fixtures/share.md
new file mode 100644
index 00000000..854ac5e5
--- /dev/null
+++ b/tests/fixtures/share.md
@@ -0,0 +1,6 @@
+# Share Snapshot Fixture
+
+This text should survive a snapshot round trip.
+
+- Snapshot mode
+- Temporary shared tab
diff --git a/tests/fixtures/stl.md b/tests/fixtures/stl.md
new file mode 100644
index 00000000..3ccfdac3
--- /dev/null
+++ b/tests/fixtures/stl.md
@@ -0,0 +1,13 @@
+# STL Preview
+
+```stl
+solid triangle
+  facet normal 0 0 1
+    outer loop
+      vertex 0 0 0
+      vertex 1 0 0
+      vertex 0 1 0
+    endloop
+  endfacet
+endsolid triangle
+```
diff --git a/tests/fixtures/vega-lite.md b/tests/fixtures/vega-lite.md
new file mode 100644
index 00000000..1c635656
--- /dev/null
+++ b/tests/fixtures/vega-lite.md
@@ -0,0 +1,16 @@
+# Vega-Lite
+
+```vega-lite
+{
+  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
+  "data": { "values": [
+    { "category": "A", "value": 3 },
+    { "category": "B", "value": 7 }
+  ]},
+  "mark": "bar",
+  "encoding": {
+    "x": { "field": "category", "type": "nominal" },
+    "y": { "field": "value", "type": "quantitative" }
+  }
+}
+```
diff --git a/tests/fixtures/wavedrom.md b/tests/fixtures/wavedrom.md
new file mode 100644
index 00000000..e60cb16c
--- /dev/null
+++ b/tests/fixtures/wavedrom.md
@@ -0,0 +1,8 @@
+# WaveDrom
+
+```wavedrom
+{ signal: [
+  { name: "clk", wave: "p....." },
+  { name: "data", wave: "x.345x", data: ["A", "B", "C"] }
+]}
+```
diff --git a/tests/helpers/app.js b/tests/helpers/app.js
new file mode 100644
index 00000000..07d67c15
--- /dev/null
+++ b/tests/helpers/app.js
@@ -0,0 +1,640 @@
+const fs = require('node:fs/promises');
+const path = require('node:path');
+const { expect } = require('@playwright/test');
+
+const rootDir = path.resolve(__dirname, '../..');
+const fixturesDir = path.join(rootDir, 'tests', 'fixtures');
+const routedPages = new WeakSet();
+const assetBodyCache = new Map();
+let appVersionPromise;
+
+const localBrowserAssets = [
+  ['https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css', 'node_modules/bootstrap/dist/css/bootstrap.min.css', 'text/css'],
+  ['https://cdn.jsdelivr.net/npm/github-markdown-css@5.3.0/github-markdown.css', 'node_modules/github-markdown-css/github-markdown.css', 'text/css'],
+  ['https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js', 'node_modules/marked/marked.min.js', 'application/javascript'],
+  ['https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js', 'node_modules/@highlightjs/cdn-assets/highlight.min.js', 'application/javascript'],
+  ['https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/powershell.min.js', 'node_modules/@highlightjs/cdn-assets/languages/powershell.min.js', 'application/javascript'],
+  ['https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.4.13/purify.min.js', 'node_modules/dompurify/dist/purify.min.js', 'application/javascript'],
+  ['https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js', 'node_modules/file-saver/dist/FileSaver.min.js', 'application/javascript'],
+  ['https://cdn.jsdelivr.net/npm/js-yaml@4.3.1/dist/js-yaml.min.js', 'node_modules/js-yaml/dist/js-yaml.min.js', 'application/javascript'],
+  ['https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js', 'node_modules/bootstrap/dist/js/bootstrap.bundle.min.js', 'application/javascript'],
+  ['https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js', 'node_modules/jszip/dist/jszip.min.js', 'application/javascript'],
+  ['https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js', 'node_modules/pako/dist/pako.min.js', 'application/javascript']
+];
+
+async function appVersion() {
+  if (!appVersionPromise) {
+    appVersionPromise = fs.readFile(path.join(rootDir, 'script.js'), 'utf8').then(source => {
+      const match = source.match(/const APP_VERSION = '([^']+)'/);
+      if (!match) throw new Error('Unable to read APP_VERSION from script.js');
+      return match[1];
+    });
+  }
+  return appVersionPromise;
+}
+
+async function installLocalBrowserAssets(page) {
+  if (routedPages.has(page)) return;
+  routedPages.add(page);
+
+  for (const [url, relativePath, contentType] of localBrowserAssets) {
+    await page.route(url, async route => {
+      if (!assetBodyCache.has(relativePath)) {
+        assetBodyCache.set(relativePath, fs.readFile(path.join(rootDir, relativePath)));
+      }
+      await route.fulfill({
+        status: 200,
+        contentType,
+        body: await assetBodyCache.get(relativePath)
+      });
+    });
+  }
+
+  await page.addInitScript(() => {
+    window.MathJax = {
+      startup: { promise: Promise.resolve() },
+      typesetPromise(targets = []) {
+        targets.forEach(target => {
+          if (target.querySelector('mjx-container[data-test-renderer]')) return;
+          const rendered = document.createElement('mjx-container');
+          rendered.dataset.testRenderer = 'true';
+          rendered.textContent = 'Rendered math';
+          target.appendChild(rendered);
+        });
+        return Promise.resolve();
+      },
+      typesetClear(targets = []) {
+        targets.forEach(target => {
+          target.querySelectorAll('mjx-container[data-test-renderer]').forEach(node => node.remove());
+        });
+      }
+    };
+  });
+}
+
+async function waitForAppReady(page) {
+  await page.waitForFunction(() => window.marked && window.DOMPurify);
+  await page.waitForFunction(() => document.documentElement.dataset.appReady === 'true');
+}
+
+async function fixture(name) {
+  return fs.readFile(path.join(fixturesDir, name), 'utf8');
+}
+
+function isCriticalBrowserMessage(message) {
+  const text = message.text();
+  return message.type() === 'error' &&
+    !/Failed to load resource: the server responded with a status of 404.*favicon/i.test(text) &&
+    !/Failed to load resource: net::ERR_BLOCKED_BY_RESPONSE\.NotSameSite/i.test(text);
+}
+
+async function openApp(page, url = '/', options = {}) {
+  const expectEditorVisible = options.expectEditorVisible !== false;
+  const criticalErrors = [];
+  await installLocalBrowserAssets(page);
+  if (options.showReleaseNotes !== true) {
+    const version = await appVersion();
+    await page.addInitScript(currentVersion => {
+      localStorage.setItem('markdownViewerLastVersion', currentVersion);
+      localStorage.setItem('markdownViewerReleaseNotesSeenVersion', currentVersion);
+      localStorage.removeItem('markdownViewerPendingReleaseNotesVersion');
+      localStorage.removeItem('markdownViewerPendingReleaseNotesMode');
+    }, version);
+  }
+  page.on('console', message => {
+    if (isCriticalBrowserMessage(message)) {
+      criticalErrors.push(message.text());
+    }
+  });
+  page.on('pageerror', error => {
+    criticalErrors.push(error.message);
+  });
+
+  await page.goto(url);
+  if (expectEditorVisible) {
+    await expect(page.locator('#markdown-editor')).toBeVisible();
+  } else {
+    await expect(page.locator('#markdown-editor')).toBeAttached();
+  }
+  await expect(page.locator('#markdown-preview')).toBeVisible();
+  await waitForAppReady(page);
+  return criticalErrors;
+}
+
+async function setEditorContent(page, markdown) {
+  await page.locator('#markdown-editor').evaluate((editor, value) => {
+    editor.focus();
+    editor.value = value;
+    editor.dispatchEvent(new Event('input', { bubbles: true }));
+  }, markdown);
+}
+
+async function stubClipboard(page) {
+  await page.evaluate(() => {
+    window.__copiedText = '';
+    navigator.clipboard.writeText = text => {
+      window.__copiedText = text;
+      return Promise.resolve();
+    };
+  });
+}
+
+async function editorValue(page) {
+  return page.locator('#markdown-editor').inputValue();
+}
+
+async function readWorkspaceStore(page, storeName) {
+  return page.evaluate(async name => {
+    const database = await new Promise((resolve, reject) => {
+      const request = indexedDB.open('markdownViewerWorkspace');
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+    try {
+      return await new Promise((resolve, reject) => {
+        const transaction = database.transaction(name, 'readonly');
+        const request = transaction.objectStore(name).getAll();
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+      });
+    } finally {
+      database.close();
+    }
+  }, storeName);
+}
+
+async function storedDocuments(page) {
+  const [metadata, contents] = await Promise.all([
+    readWorkspaceStore(page, 'documents'),
+    readWorkspaceStore(page, 'contents')
+  ]);
+  const contentById = new Map(contents.map(record => [record.id, record.content]));
+  return metadata.map(record => ({
+    ...record,
+    content: contentById.get(record.id) || ''
+  }));
+}
+
+async function waitForPreviewText(page, text) {
+  await expect(page.locator('#markdown-preview')).toContainText(text);
+}
+
+async function selectedDownloadName(downloadPromise, clickPromise) {
+  const [download] = await Promise.all([downloadPromise, clickPromise]);
+  return download.suggestedFilename();
+}
+
+function svgResponse(label) {
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="320" height="120" viewBox="0 0 320 120" role="img" aria-label="${label}">
+  <rect width="320" height="120" fill="#f6f8fa" stroke="#57606a"/>
+  <circle cx="74" cy="60" r="24" fill="#0969da"/>
+  <path d="M104 60H214" stroke="#24292f" stroke-width="4"/>
+  <polygon points="214,48 244,60 214,72" fill="#24292f"/>
+  <text x="160" y="104" text-anchor="middle" font-family="Arial" font-size="16" fill="#24292f">${label}</text>
+</svg>`;
+}
+
+async function stubRemoteDiagramServices(page) {
+  await page.route('https://www.plantuml.com/plantuml/svg/**', route => {
+    route.fulfill({
+      status: 200,
+      contentType: 'image/svg+xml',
+      body: svgResponse('PlantUML test diagram')
+    });
+  });
+
+  await page.route('https://kroki.io/**', route => {
+    const url = route.request().url();
+    const label = url.includes('/d2/') ? 'D2 test diagram'
+      : url.includes('/graphviz/') ? 'Graphviz test diagram'
+        : url.includes('/vegalite/') ? 'Vega-Lite test chart'
+          : url.includes('/wavedrom/') ? 'WaveDrom test diagram'
+            : 'Kroki test diagram';
+    route.fulfill({
+      status: 200,
+      contentType: 'image/svg+xml',
+      body: svgResponse(label)
+    });
+  });
+}
+
+async function stubLazyRendererLibraries(page) {
+  await page.addInitScript(() => {
+    window.pako = window.pako || {
+      deflate() { return new Uint8Array([1, 2, 3, 4]); },
+      inflate(bytes) { return bytes; }
+    };
+
+    window.mermaid = window.mermaid || {
+      initialize() {},
+      render(id) {
+        return Promise.resolve({
+          svg: '<svg id="' + id + '" xmlns="http://www.w3.org/2000/svg" width="260" height="100" role="img"><rect width="260" height="100" fill="#ddf4ff"></rect><text x="130" y="55" text-anchor="middle">Mermaid test diagram</text></svg>'
+        });
+      }
+    };
+
+    window.ABCJS = window.ABCJS || {
+      renderAbc(target) {
+        const node = typeof target === 'string' ? document.getElementById(target) : target;
+        node.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="90" role="img"><text x="20" y="45">ABC notation test score</text><path d="M20 60H260" stroke="black"></path></svg>';
+        return [{}];
+      }
+    };
+
+    window.d3 = window.d3 || {};
+    window.markmap = window.markmap || {};
+    window.markmap.Transformer = window.markmap.Transformer || class {
+      transform() {
+        return {
+          root: { content: 'Markmap test mind map', children: [{ content: 'Branch', children: [] }] },
+          features: {},
+          frontmatter: {}
+        };
+      }
+      getUsedAssets() {
+        return {};
+      }
+    };
+    window.markmap.loadCSS = window.markmap.loadCSS || function() {};
+    window.markmap.loadJS = window.markmap.loadJS || function() { return Promise.resolve(); };
+    window.markmap.deriveOptions = window.markmap.deriveOptions || function(options) { return options || {}; };
+    window.markmap.Markmap = window.markmap.Markmap || class {
+      constructor(svg) {
+        this.svg = svg;
+        this.state = { rect: { x1: 0, y1: 0, x2: 240, y2: 120 } };
+      }
+      async setData() {
+        this.svg.innerHTML = '<g><circle cx="80" cy="45" r="20" fill="#2da44e"></circle><text x="115" y="50">Markmap test mind map</text></g>';
+      }
+      fit() {}
+      static create(svg) {
+        const instance = new window.markmap.Markmap(svg);
+        instance.setData();
+        return instance;
+      }
+    };
+
+    class Vector3 {
+      constructor(x = 0, y = 0, z = 0) { this.x = x; this.y = y; this.z = z; }
+      set(x, y, z) { this.x = x; this.y = y; this.z = z; return this; }
+      normalize() { return this; }
+      clone() { return new Vector3(this.x, this.y, this.z); }
+      sub(v) { this.x -= v.x || 0; this.y -= v.y || 0; this.z -= v.z || 0; return this; }
+    }
+    class Scene { constructor() { this.children = []; } add(node) { this.children.push(node); } }
+    class PerspectiveCamera {
+      constructor(fov) { this.fov = fov; this.position = new Vector3(); }
+      lookAt() {}
+      updateProjectionMatrix() {}
+    }
+    class WebGLRenderer {
+      constructor() { this.domElement = document.createElement('canvas'); this.domElement.width = 400; this.domElement.height = 400; }
+      setSize(width, height) { this.domElement.width = width; this.domElement.height = height; }
+      setPixelRatio() {}
+      render() {
+        const ctx = this.domElement.getContext('2d');
+        if (ctx) { ctx.fillStyle = '#ddf4ff'; ctx.fillRect(0, 0, this.domElement.width, this.domElement.height); }
+      }
+      dispose() {}
+    }
+    class Light { constructor() { this.position = new Vector3(); } }
+    class GridHelper { constructor() { this.position = new Vector3(); this.geometry = { dispose() {} }; this.material = { dispose() {} }; } }
+    class Material { dispose() {} }
+    class Mesh { constructor(geometry, material) { this.geometry = geometry; this.material = material; this.position = new Vector3(); } }
+    class STLLoader {
+      parse() {
+        return {
+          getAttribute() { return { array: new Float32Array([0, 0, 0, 1, 0, 0, 0, 1, 0]), count: 3 }; },
+          rotateX() {},
+          computeBoundingBox() {
+            this.boundingBox = {
+              getCenter(target) { target.set(0.5, 0.5, 0); },
+              getSize(target) { target.set(1, 1, 1); }
+            };
+          },
+          computeVertexNormals() {},
+          dispose() {}
+        };
+      }
+    }
+    class OrbitControls {
+      constructor() { this.target = new Vector3(); }
+      update() {}
+      dispose() {}
+    }
+    window.THREE = window.THREE || {
+      Vector3,
+      Scene,
+      PerspectiveCamera,
+      WebGLRenderer,
+      AmbientLight: Light,
+      DirectionalLight: Light,
+      GridHelper,
+      MeshStandardMaterial: Material,
+      MeshNormalMaterial: Material,
+      MeshBasicMaterial: Material,
+      Mesh,
+      STLLoader,
+      OrbitControls
+    };
+  });
+
+  await page.route(/mermaid.*mermaid\.min\.js/, route => {
+    route.fulfill({
+      contentType: 'application/javascript',
+      body: `
+        window.mermaid = {
+          initialize() {},
+          render(id, source) {
+            return Promise.resolve({
+              svg: '<svg id="' + id + '" xmlns="http://www.w3.org/2000/svg" width="260" height="100" role="img"><rect width="260" height="100" fill="#ddf4ff"/><text x="130" y="55" text-anchor="middle">Mermaid test diagram</text></svg>'
+            });
+          }
+        };
+      `
+    });
+  });
+
+  await page.route(/abcjs-basic-min\.js/, route => {
+    route.fulfill({
+      contentType: 'application/javascript',
+      body: `
+        window.ABCJS = {
+          renderAbc(target, code) {
+            const node = typeof target === 'string' ? document.getElementById(target) : target;
+            node.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="300" height="90" role="img"><text x="20" y="45">ABC notation test score</text><path d="M20 60H260" stroke="black"/></svg>';
+            return [{}];
+          }
+        };
+      `
+    });
+  });
+
+  await page.route(/d3.*\.min\.js/, route => {
+    route.fulfill({ contentType: 'application/javascript', body: 'window.d3 = window.d3 || {};' });
+  });
+
+  await page.route(/markmap-lib.*\.js|markmap-lib.*\.iife\.js/, route => {
+    route.fulfill({
+      contentType: 'application/javascript',
+      body: `
+        window.markmap = window.markmap || {};
+        window.markmap.Transformer = class {
+          transform(source) {
+            return {
+              root: { content: 'Markmap test mind map', children: [{ content: 'Branch', children: [] }] },
+              features: {},
+              frontmatter: {}
+            };
+          }
+          getUsedAssets() { return {}; }
+        };
+        window.markmap.loadCSS = function() {};
+        window.markmap.loadJS = function() { return Promise.resolve(); };
+        window.markmap.deriveOptions = function(options) { return options || {}; };
+      `
+    });
+  });
+
+  await page.route(/markmap-view.*\.js/, route => {
+    route.fulfill({
+      contentType: 'application/javascript',
+      body: `
+        window.markmap = window.markmap || {};
+        window.markmap.Markmap = class {
+          constructor(svg) { this.svg = svg; this.state = { rect: { x1: 0, y1: 0, x2: 240, y2: 120 } }; }
+          async setData() { this.svg.innerHTML = '<g><circle cx="80" cy="45" r="20" fill="#2da44e"></circle><text x="115" y="50">Markmap test mind map</text></g>'; }
+          fit() {}
+          static create(svg) {
+            const instance = new window.markmap.Markmap(svg);
+            instance.setData();
+            return instance;
+          }
+        };
+      `
+    });
+  });
+
+  await page.route(/three\.min\.js/, route => {
+    route.fulfill({
+      contentType: 'application/javascript',
+      body: `
+        (function() {
+          class Vector3 {
+            constructor(x = 0, y = 0, z = 0) { this.x = x; this.y = y; this.z = z; }
+            set(x, y, z) { this.x = x; this.y = y; this.z = z; return this; }
+            normalize() { return this; }
+            clone() { return new Vector3(this.x, this.y, this.z); }
+            sub(v) { this.x -= v.x || 0; this.y -= v.y || 0; this.z -= v.z || 0; return this; }
+          }
+          class Scene { constructor() { this.children = []; } add(node) { this.children.push(node); } }
+          class PerspectiveCamera {
+            constructor(fov) { this.fov = fov; this.position = new Vector3(); }
+            lookAt() {}
+            updateProjectionMatrix() {}
+          }
+          class WebGLRenderer {
+            constructor() { this.domElement = document.createElement('canvas'); this.domElement.width = 400; this.domElement.height = 400; }
+            setSize(width, height) { this.domElement.width = width; this.domElement.height = height; }
+            setPixelRatio() {}
+            render() {
+              const ctx = this.domElement.getContext('2d');
+              if (ctx) { ctx.fillStyle = '#ddf4ff'; ctx.fillRect(0, 0, this.domElement.width, this.domElement.height); }
+            }
+            dispose() {}
+          }
+          class Light { constructor() { this.position = new Vector3(); } }
+          class GridHelper { constructor() { this.position = new Vector3(); this.geometry = { dispose() {} }; this.material = { dispose() {} }; } }
+          class Material { dispose() {} }
+          class Mesh { constructor(geometry, material) { this.geometry = geometry; this.material = material; this.position = new Vector3(); } }
+          window.THREE = {
+            Vector3,
+            Scene,
+            PerspectiveCamera,
+            WebGLRenderer,
+            AmbientLight: Light,
+            DirectionalLight: Light,
+            GridHelper,
+            MeshStandardMaterial: Material,
+            MeshNormalMaterial: Material,
+            MeshBasicMaterial: Material,
+            Mesh
+          };
+        })();
+      `
+    });
+  });
+
+  await page.route(/STLLoader\.js/, route => {
+    route.fulfill({
+      contentType: 'application/javascript',
+      body: `
+        window.THREE.STLLoader = class {
+          parse() {
+            return {
+              getAttribute() { return { array: new Float32Array([0,0,0, 1,0,0, 0,1,0]), count: 3 }; },
+              rotateX() {},
+              computeBoundingBox() {
+                this.boundingBox = {
+                  getCenter(target) { target.set(0.5, 0.5, 0); },
+                  getSize(target) { target.set(1, 1, 1); }
+                };
+              },
+              computeVertexNormals() {},
+              dispose() {}
+            };
+          }
+        };
+      `
+    });
+  });
+
+  await page.route(/OrbitControls\.js/, route => {
+    route.fulfill({
+      contentType: 'application/javascript',
+      body: `
+        window.THREE.OrbitControls = class {
+          constructor() { this.target = new window.THREE.Vector3(); }
+          update() {}
+          dispose() {}
+        };
+      `
+    });
+  });
+}
+
+async function stubExportLibraries(page) {
+  await page.addInitScript(() => {
+    window.__printCalled = 0;
+    window.print = () => {
+      window.__printCalled += 1;
+      window.dispatchEvent(new Event('afterprint'));
+    };
+    window.html2canvas = async () => {
+      const canvas = document.createElement('canvas');
+      canvas.width = 320;
+      canvas.height = 180;
+      const ctx = canvas.getContext('2d');
+      ctx.fillStyle = '#ffffff';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.fillStyle = '#0969da';
+      ctx.fillText('PNG export test', 20, 40);
+      return canvas;
+    };
+  });
+}
+
+async function stubLiveShareRuntime(page) {
+  await page.route('https://esm.sh/yjs@13.6.10/es2022/yjs.mjs', route => {
+    route.fulfill({
+      contentType: 'application/javascript',
+      body: `
+        const encoder = new TextEncoder();
+        const decoder = new TextDecoder();
+        class FakeText {
+          constructor(doc) { this.doc = doc; this.value = ''; this.observers = new Set(); }
+          get length() { return this.value.length; }
+          toString() { return this.value; }
+          insert(index, text) { this.value = this.value.slice(0, index) + text + this.value.slice(index); this.doc._notify(); }
+          delete(index, length) { this.value = this.value.slice(0, index) + this.value.slice(index + length); this.doc._notify(); }
+          observe(fn) { this.observers.add(fn); }
+          unobserve(fn) { this.observers.delete(fn); }
+        }
+        class FakeMap {
+          constructor(doc) { this.doc = doc; this.values = new Map(); this.observers = new Set(); }
+          get(key) { return this.values.get(key); }
+          set(key, value) { this.values.set(key, value); this.doc._notifyMap(); }
+          delete(key) { const deleted = this.values.delete(key); if (deleted) this.doc._notifyMap(); return deleted; }
+          forEach(fn) { this.values.forEach(fn); }
+          observe(fn) { this.observers.add(fn); }
+          unobserve(fn) { this.observers.delete(fn); }
+        }
+        export class Doc {
+          constructor() { this.handlers = new Set(); this.origin = null; this.text = new FakeText(this); this.map = new FakeMap(this); }
+          getText() { return this.text; }
+          getMap() { return this.map; }
+          on(type, fn) { if (type === 'update') this.handlers.add(fn); }
+          off(type, fn) { if (type === 'update') this.handlers.delete(fn); }
+          transact(fn, origin) { const previous = this.origin; this.origin = origin; fn(); this.origin = previous; this._emitUpdate(origin); }
+          _notify() { const event = { transaction: { origin: this.origin } }; this.text.observers.forEach(fn => fn(event)); this._emitUpdate(this.origin); }
+          _notifyMap() { const event = { transaction: { origin: this.origin } }; this.map.observers.forEach(fn => fn(event, event.transaction)); this._emitUpdate(this.origin); }
+          _emitUpdate(origin) { const update = encodeStateAsUpdate(this); this.handlers.forEach(fn => fn(update, origin)); }
+        }
+        export function encodeStateAsUpdate(doc) {
+          const session = {};
+          doc.map.values.forEach((value, key) => { session[key] = value; });
+          return encoder.encode(JSON.stringify({ text: doc.text.value, session }));
+        }
+        export function applyUpdate(doc, update, origin) {
+          const payload = JSON.parse(decoder.decode(update));
+          doc.origin = origin;
+          doc.text.value = payload.text || '';
+          doc.map.values = new Map(Object.entries(payload.session || {}));
+          const event = { transaction: { origin } };
+          doc.text.observers.forEach(fn => fn(event));
+          doc.map.observers.forEach(fn => fn(event, event.transaction));
+          doc.origin = null;
+        }
+        export function createRelativePositionFromTypeIndex(type, index) { return { index }; }
+        export function encodeRelativePosition(position) { return encoder.encode(JSON.stringify(position)); }
+        export function decodeRelativePosition(bytes) { return JSON.parse(decoder.decode(bytes)); }
+        export function createAbsolutePositionFromRelativePosition(position, doc) { return { index: Math.min(position.index || 0, doc.text.value.length) }; }
+      `
+    });
+  });
+
+  await page.addInitScript(() => {
+    class FakeWebSocket extends EventTarget {
+      constructor(url) {
+        super();
+        this.url = url;
+        this.readyState = FakeWebSocket.CONNECTING;
+        this.id = Math.random().toString(36).slice(2);
+        const parsed = new URL(url);
+        const roomId = parsed.pathname.split('/').filter(Boolean).pop() || 'default';
+        this.channel = new BroadcastChannel('playwright-live-share-' + roomId);
+        this.channel.onmessage = event => {
+          if (!event.data || event.data.sender === this.id) return;
+          this.dispatchEvent(new MessageEvent('message', { data: event.data.payload }));
+        };
+        setTimeout(() => {
+          this.readyState = FakeWebSocket.OPEN;
+          this.dispatchEvent(new Event('open'));
+        }, 0);
+      }
+      send(payload) {
+        this.channel.postMessage({ sender: this.id, payload });
+      }
+      close() {
+        this.readyState = FakeWebSocket.CLOSED;
+        this.channel.close();
+        this.dispatchEvent(new Event('close'));
+      }
+    }
+    FakeWebSocket.CONNECTING = 0;
+    FakeWebSocket.OPEN = 1;
+    FakeWebSocket.CLOSING = 2;
+    FakeWebSocket.CLOSED = 3;
+    window.WebSocket = FakeWebSocket;
+  });
+}
+
+module.exports = {
+  appVersion,
+  fixture,
+  openApp,
+  setEditorContent,
+  stubClipboard,
+  editorValue,
+  readWorkspaceStore,
+  storedDocuments,
+  waitForPreviewText,
+  selectedDownloadName,
+  waitForAppReady,
+  stubRemoteDiagramServices,
+  stubLazyRendererLibraries,
+  stubExportLibraries,
+  stubLiveShareRuntime
+};
diff --git a/tests/helpers/static-build-check.mjs b/tests/helpers/static-build-check.mjs
new file mode 100644
index 00000000..f9c26123
--- /dev/null
+++ b/tests/helpers/static-build-check.mjs
@@ -0,0 +1,138 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { execFileSync } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const rootDir = path.resolve(__dirname, '../..');
+
+const requiredFiles = [
+  'index.html',
+  'workspace-storage.js',
+  'script.js',
+  'preview-worker.js',
+  'styles.css',
+  'sw.js',
+  'manifest.json',
+  'vercel.json',
+  'desktop-app/resources/index.html',
+  'functions/api/share/[[id]].js',
+  'workers/live-room-worker.js'
+];
+
+for (const relativePath of requiredFiles) {
+  const fullPath = path.join(rootDir, relativePath);
+  if (!fs.existsSync(fullPath)) {
+    throw new Error(`Missing required project file: ${relativePath}`);
+  }
+}
+
+const syntaxCheckedFiles = [
+  'script.js',
+  'workspace-storage.js',
+  'preview-worker.js',
+  'sw.js',
+  'desktop-app/resources/js/main.js',
+  'desktop-app/resources/js/script.js',
+  'desktop-app/resources/js/workspace-storage.js',
+  'desktop-app/resources/js/preview-worker.js',
+  'assets/i18n/generate-ui-locales.mjs',
+  'assets/i18n/audit-ui-locales.mjs'
+];
+
+for (const relativePath of syntaxCheckedFiles) {
+  execFileSync(process.execPath, ['--check', path.join(rootDir, relativePath)], {
+    encoding: 'utf8',
+    stdio: 'pipe'
+  });
+}
+
+for (const [sourcePath, desktopPath] of [
+  ['script.js', 'desktop-app/resources/js/script.js'],
+  ['workspace-storage.js', 'desktop-app/resources/js/workspace-storage.js'],
+  ['preview-worker.js', 'desktop-app/resources/js/preview-worker.js'],
+  ['styles.css', 'desktop-app/resources/styles.css']
+]) {
+  const source = fs.readFileSync(path.join(rootDir, sourcePath));
+  const desktopCopy = fs.readFileSync(path.join(rootDir, desktopPath));
+  if (!source.equals(desktopCopy)) {
+    throw new Error(`Desktop resource is stale: ${desktopPath}. Run node desktop-app/prepare.js.`);
+  }
+}
+
+for (const relativePath of ['manifest.json', 'vercel.json', ...fs.readdirSync(path.join(rootDir, 'assets', 'i18n'))
+  .filter(name => name.endsWith('.json'))
+  .map(name => path.join('assets', 'i18n', name))]) {
+  JSON.parse(fs.readFileSync(path.join(rootDir, relativePath), 'utf8'));
+}
+
+const indexHtml = fs.readFileSync(path.join(rootDir, 'index.html'), 'utf8');
+const appJs = fs.readFileSync(path.join(rootDir, 'script.js'), 'utf8');
+const storageJs = fs.readFileSync(path.join(rootDir, 'workspace-storage.js'), 'utf8');
+
+const requiredIndexMarkers = [
+  'id="markdown-editor"',
+  'id="markdown-preview"',
+  'id="tab-list"',
+  'id="share-modal"',
+  'id="live-share-modal"',
+  'src="script.js"',
+  'src="workspace-storage.js"',
+  'href="styles.css"'
+];
+
+for (const marker of requiredIndexMarkers) {
+  if (!indexHtml.includes(marker)) {
+    throw new Error(`index.html is missing expected marker: ${marker}`);
+  }
+}
+
+const seenIds = new Set();
+for (const match of indexHtml.matchAll(/\bid="([^"]+)"/g)) {
+  if (seenIds.has(match[1])) throw new Error(`index.html contains duplicate id: ${match[1]}`);
+  seenIds.add(match[1]);
+}
+
+for (const match of indexHtml.matchAll(/\b(?:href|src)="([^"]+)"/g)) {
+  const reference = match[1];
+  if (/^(?:https?:|data:|blob:|#)/.test(reference)) continue;
+  const relativePath = reference.split(/[?#]/, 1)[0].replace(/^\/+/, '');
+  if (!relativePath || !fs.existsSync(path.join(rootDir, relativePath))) {
+    throw new Error(`index.html references missing local asset: ${reference}`);
+  }
+}
+
+for (const marker of [
+  'class MarkdownWorkspaceStorage',
+  'indexedDB.open',
+  'Markdown Viewer Vault',
+  'listDocumentMetadata',
+  'loadDocumentContent'
+]) {
+  if (!storageJs.includes(marker)) {
+    throw new Error(`workspace-storage.js is missing expected marker: ${marker}`);
+  }
+}
+
+const requiredScriptMarkers = [
+  'marked.setOptions',
+  'preview-worker.js',
+  'function renderMarkdown',
+  'function importMarkdownFile',
+  'exportMd.addEventListener',
+  'exportHtml.addEventListener',
+  'exportPdf.addEventListener',
+  'exportPng.addEventListener',
+  'function encodeMarkdownForShare',
+  'function startLiveSession',
+  'function loadFromShareHash',
+  'function loadFromLiveHash'
+];
+
+for (const marker of requiredScriptMarkers) {
+  if (!appJs.includes(marker)) {
+    throw new Error(`script.js is missing expected marker: ${marker}`);
+  }
+}
+
+console.log('Static build smoke check passed.');
diff --git a/tests/helpers/static-server.mjs b/tests/helpers/static-server.mjs
new file mode 100644
index 00000000..19d379a5
--- /dev/null
+++ b/tests/helpers/static-server.mjs
@@ -0,0 +1,79 @@
+import { createReadStream } from 'node:fs';
+import { stat } from 'node:fs/promises';
+import { createServer } from 'node:http';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const host = '127.0.0.1';
+const port = Number(process.env.MARKDOWN_VIEWER_TEST_PORT || 4173);
+const rootDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '../..');
+
+const contentTypes = new Map([
+  ['.css', 'text/css; charset=utf-8'],
+  ['.gif', 'image/gif'],
+  ['.html', 'text/html; charset=utf-8'],
+  ['.ico', 'image/x-icon'],
+  ['.jpg', 'image/jpeg'],
+  ['.jpeg', 'image/jpeg'],
+  ['.js', 'text/javascript; charset=utf-8'],
+  ['.json', 'application/json; charset=utf-8'],
+  ['.map', 'application/json; charset=utf-8'],
+  ['.md', 'text/markdown; charset=utf-8'],
+  ['.mjs', 'text/javascript; charset=utf-8'],
+  ['.png', 'image/png'],
+  ['.svg', 'image/svg+xml'],
+  ['.txt', 'text/plain; charset=utf-8'],
+  ['.webmanifest', 'application/manifest+json; charset=utf-8'],
+  ['.woff', 'font/woff'],
+  ['.woff2', 'font/woff2']
+]);
+
+function resolveRequestPath(requestUrl) {
+  const pathname = decodeURIComponent(new URL(requestUrl || '/', `http://${host}:${port}`).pathname);
+  const relativePath = pathname === '/' ? 'index.html' : pathname.replace(/^\/+/, '');
+  const resolved = path.resolve(rootDir, relativePath);
+  const relative = path.relative(rootDir, resolved);
+  if (relative.startsWith('..') || path.isAbsolute(relative)) return null;
+  return resolved;
+}
+
+const server = createServer(async (request, response) => {
+  if (request.method !== 'GET' && request.method !== 'HEAD') {
+    response.writeHead(405, { Allow: 'GET, HEAD' });
+    response.end('Method not allowed');
+    return;
+  }
+
+  const filePath = resolveRequestPath(request.url);
+  if (!filePath) {
+    response.writeHead(403);
+    response.end('Forbidden');
+    return;
+  }
+
+  try {
+    const fileStats = await stat(filePath);
+    if (!fileStats.isFile()) throw new Error('Not a file');
+    response.writeHead(200, {
+      'Cache-Control': 'no-store',
+      'Content-Length': fileStats.size,
+      'Content-Type': contentTypes.get(path.extname(filePath).toLowerCase()) || 'application/octet-stream'
+    });
+    if (request.method === 'HEAD') response.end();
+    else createReadStream(filePath).pipe(response);
+  } catch (_) {
+    response.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+    response.end('Not found');
+  }
+});
+
+server.listen(port, host, () => {
+  console.log(`Markdown Viewer test server listening on http://${host}:${port}`);
+});
+
+function shutdown() {
+  server.close(() => process.exit(0));
+}
+
+process.on('SIGINT', shutdown);
+process.on('SIGTERM', shutdown);
diff --git a/vercel.json b/vercel.json
new file mode 100644
index 00000000..a0d79c9c
--- /dev/null
+++ b/vercel.json
@@ -0,0 +1,4 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "outputDirectory": "."
+}
diff --git a/wiki/Contributing.md b/wiki/Contributing.md
index e3f0c9b2..712eaef6 100644
--- a/wiki/Contributing.md
+++ b/wiki/Contributing.md
@@ -133,14 +133,25 @@ Before publishing a release:
 
 ## Testing
 
+Install the locked test dependencies and browser binaries once:
+
+```bash
+npm ci
+npm run test:install
+```
+
 Choose checks that match the change:
 
 ```bash
 npm run build
 npm run test:e2e
+npm run test:e2e:smoke
+npm run test:e2e:cross-browser
 ```
 
-`npm run build` runs the repository static asset validator. `npm run test:e2e` runs Playwright, and `npm test` runs both. Use a focused Playwright spec while iterating, then the broader applicable suite before a pull request.
+`npm run build` validates required assets, JSON, HTML references and IDs, and JavaScript syntax. `npm run test:e2e` runs the complete Chromium Playwright suite, `npm run test:e2e:cross-browser` runs smoke coverage in Chromium, Firefox, and WebKit, and `npm test` runs static validation plus the complete Chromium suite. Use a focused Playwright spec while iterating, then run `npm test` and the cross-browser smoke suite before a pull request.
+
+Tests start their own Node static server and must not depend on Python, machine-specific paths, developer credentials, or live third-party APIs. The suite is intentionally local-only: contributors must run the relevant checks before requesting review or merging a change. Playwright stores failure diagnostics in the ignored `test-results/` directory and writes its local HTML report to `playwright-report/`.
 
 For documentation:
 
