feat(mdviewer): add print button with light theme and proper page layout

- Add printer icon button to both reader and edit mode toolbars
- Force light theme CSS variables in @media print for readable output
- Hide toolbar and all UI chrome during print via CSS
- Override height/overflow constraints so full content prints
- Add allow-modals to mdviewer sandbox for window.print()
- Standard page margins (20mm top/bottom, 25mm left/right)

Author: abose

src-mdviewer/src/components/embedded-toolbar.js

@@ -29,7 +29,8 @@ import {
     MoreHorizontal,
     BookOpen,
     Link2,
-    Link2Off
+    Link2Off,
+    Printer
 } from "lucide";
 import { on, emit } from "../core/events.js";
 import { getState, setState } from "../core/state.js";
@@ -46,7 +47,7 @@ const THRESHOLD_LISTS = 520;   // then lists
 const THRESHOLD_TEXT = 420;    // finally text formatting
 
 const allIcons = { Bold, Italic, Strikethrough, Underline, Code, Link, List, ListOrdered,
-    ListChecks, Quote, Minus, Table, FileCode, ChevronDown, Type, MoreHorizontal, Pencil, BookOpen, Link2, Link2Off };
+    ListChecks, Quote, Minus, Table, FileCode, ChevronDown, Type, MoreHorizontal, Pencil, BookOpen, Link2, Link2Off, Printer };
 
 export function initEmbeddedToolbar() {
     toolbar = document.getElementById("toolbar");
@@ -79,6 +80,9 @@ function render() {
 function renderReadMode() {
     toolbar.innerHTML = `<div class="embedded-toolbar">
         <div class="toolbar-spacer"></div>
+        <button class="toolbar-btn print-btn" id="emb-print-btn" data-tooltip="${t("toolbar.print") || "Print"}">
+            <i data-lucide="printer"></i>
+        </button>
         <button class="toolbar-btn cursor-sync-btn${cursorSyncEnabled ? " active" : ""}" id="emb-cursor-sync" data-tooltip="${t("toolbar.cursor_sync") || "Cursor sync"}" aria-pressed="${cursorSyncEnabled}">
             <i data-lucide="link-2" class="sync-on-icon"${cursorSyncEnabled ? "" : ' style="display:none"'}></i>
             <i data-lucide="link-2-off" class="sync-off-icon"${cursorSyncEnabled ? ' style="display:none"' : ""}></i>
@@ -94,6 +98,7 @@ function renderReadMode() {
     toolbar.querySelectorAll("svg[data-lucide]").forEach(svg => svg.removeAttribute("data-lucide"));
 
     wireCursorSyncButton();
+    wirePrintButton();
 
     const editBtn = document.getElementById("emb-edit-btn");
     if (editBtn) {
@@ -179,6 +184,9 @@ function renderEditMode(level) {
     toolbar.innerHTML = `<div class="embedded-toolbar">
         ${formatRow}
         <div class="toolbar-spacer"></div>
+        <button class="toolbar-btn print-btn" id="emb-print-btn" data-tooltip="${t("toolbar.print") || "Print"}">
+            <i data-lucide="printer"></i>
+        </button>
         <button class="toolbar-btn cursor-sync-btn${cursorSyncEnabled ? " active" : ""}" id="emb-cursor-sync" data-tooltip="${t("toolbar.cursor_sync") || "Cursor sync"}" aria-pressed="${cursorSyncEnabled}">
             <i data-lucide="link-2" class="sync-on-icon"${cursorSyncEnabled ? "" : ' style="display:none"'}></i>
             <i data-lucide="link-2-off" class="sync-off-icon"${cursorSyncEnabled ? ' style="display:none"' : ""}></i>
@@ -199,6 +207,7 @@ function renderEditMode(level) {
         wireDropdowns();
     }
     wireCursorSyncButton();
+    wirePrintButton();
     wireDoneButton();
 }
 
@@ -287,6 +296,15 @@ function wireCursorSyncButton() {
     }
 }
 
+function wirePrintButton() {
+    const printBtn = document.getElementById("emb-print-btn");
+    if (printBtn) {
+        printBtn.addEventListener("click", () => {
+            window.print();
+        });
+    }
+}
+
 function wireDoneButton() {
     const doneBtn = document.getElementById("emb-done-btn");
     if (doneBtn) {

src-mdviewer/src/locales/en.json

@@ -19,6 +19,7 @@
     "switch_to_reader": "Switch to reader mode",
     "switch_to_edit": "Switch to edit mode",
     "cursor_sync": "Toggle cursor sync",
+    "print": "Print",
     "empty_line_hint": "Type / to insert"
   },
   "sidebar": {

src-mdviewer/src/styles/editor.css

@@ -1243,6 +1243,41 @@
 
 /* ===== Print ===== */
 @media print {
+  @page {
+    margin: 20mm 25mm;
+  }
+
+  /* Force light theme colors for print */
+  :root, [data-theme] {
+    --color-bg: #ffffff !important;
+    --color-bg-secondary: #f6f8fa !important;
+    --color-bg-tertiary: #eaeef2 !important;
+    --color-surface: #ffffff !important;
+    --color-text: #1f2328 !important;
+    --color-text-secondary: #656d76 !important;
+    --color-text-tertiary: #8b949e !important;
+    --color-accent: #0969da !important;
+    --color-border: #d0d7de !important;
+    --color-border-subtle: #e8ecf0 !important;
+    --color-code-bg: #f6f8fa !important;
+    --color-code-text: #1f2328 !important;
+    --color-code-border: #d0d7de !important;
+    --color-link: #0969da !important;
+    --color-alert-note: #0969da !important;
+    --color-alert-note-bg: #ddf4ff !important;
+    --color-alert-tip: #1a7f37 !important;
+    --color-alert-tip-bg: #dafbe1 !important;
+    --color-alert-important: #8250df !important;
+    --color-alert-important-bg: #fbefff !important;
+    --color-alert-warning: #9a6700 !important;
+    --color-alert-warning-bg: #fff8c5 !important;
+    --color-alert-caution: #d1242f !important;
+    --color-alert-caution-bg: #ffebe9 !important;
+    --color-table-border: #d0d7de !important;
+    --color-table-row-alt: #f6f8fa !important;
+  }
+
+  #toolbar,
   .raw-editor-panel,
   .raw-editor-panel .cm-editor,
   .toolbar-edit-group,
@@ -1266,4 +1301,28 @@
   .toast {
     display: none !important;
   }
+
+  html, body {
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+  #app {
+    display: block !important;
+    height: auto !important;
+    overflow: visible !important;
+  }
+
+  .app-viewer {
+    overflow: visible !important;
+    height: auto !important;
+    min-height: 0 !important;
+  }
+
+  #viewer-content {
+    padding: 0 !important;
+    margin: 0 !important;
+    overflow: visible !important;
+    height: auto !important;
+  }
 }

src/extensionsIntegrated/Phoenix-live-preview/main.js

@@ -140,7 +140,7 @@ define(function (require, exports, module) {
     // no allow-forms, allow-modals, allow-pointer-lock (not needed for markdown editing).
     // Communication works via MarkdownSync's own message handler (bypasses EventManager origin check).
     const _mdSandboxAttr = Phoenix.isTestWindow ? "" :
-        'sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox"';
+        'sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-modals"';
     const MDVIEWR_IFRAME_HTML = `
     <iframe id="${LIVE_PREVIEW_IFRAME_ID}" title="Live Preview" style="border: none"
              width="100%" height="100%" seamless="true"