feat: add Page View (A4 Document Mode) with split layout

- New 'Page' view mode: editor left, A4 page frames right
- Reflow engine splits rendered markdown into 210×297mm page frames
- <- Reflow engine splits rendered markdown into 210×297mm page frames pagebreak --> markers force new pages
- Page counter, zoom dropdown (50%–125%), Export PDF button
- Dark mode, responsive mobile, page numbers
- New files: css/page-view.css, js/page-view.js
- Modified: index.html, ui-panels.js, renderer.js, main.js

Author: ijbo

README.md

@@ -22,7 +22,7 @@
 
 | Category | Features |
 |:---------|:---------|
-| **Editor** | Live preview, split/editor/preview modes, sync scrolling, formatting toolbar, find & replace (regex), word wrap toggle, draggable resize divider |
+| **Editor** | Live preview, split/editor/preview/page modes, sync scrolling, formatting toolbar, find & replace (regex), word wrap toggle, draggable resize divider |
 | **Writing Modes** | Zen mode (distraction-free fullscreen), Focus mode (dimmed paragraphs), Dark mode, multiple preview themes (GitHub, GitLab, Notion, Dracula, Solarized, Evergreen) |
 | **Rendering** | GitHub-style Markdown, syntax highlighting (180+ languages), LaTeX math (MathJax), Mermaid diagrams (zoom/pan/export), PlantUML diagrams, callout blocks, footnotes, emoji, anchor links |
 | **🎬 Media Embedding** | Video playback via `![alt](video.mp4)` image syntax (`.mp4`, `.webm`, `.ogg`, `.mov`, `.m4v`); YouTube/Vimeo embeds auto-detected; `embed` code block for responsive media grids (`cols=1-4`, `height=N`); Video.js v10 lazy-loaded with native `<video>` fallback; website URLs render as rich link preview cards with favicon + "Open ↗" button |
@@ -459,6 +459,7 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------|
+| **2026-03-16** | | 📄 **Page View (A4 Document Mode)** — new split-layout "Page" view mode (editor left, A4 page frames right) with automatic content reflow into 210×297mm page frames; `<!-- pagebreak -->` HTML comment markers force new pages; page counter, zoom dropdown (50%–125%), and Export PDF button in page header; `page-view.js` reflow engine measures element heights and distributes across pages; `page-view.css` with shadows, page numbers, dark mode, responsive mobile; button added to header/mobile/QAB; `setViewMode()` extended with `view-page` class and enter/exit lifecycle |
 | **2026-03-16** | | 📱 **Mobile Layout Gap Fix** — eliminated a massive white gap that appeared between the toolbar and editor/presentation preview on mobile devices (≤1080px) by fixing a CSS flexbox bug where the closed workspace sidebar still consumed vertical height in column mode |
 | **2026-03-16** | | 🐛 **File-Switch State Reset** — fixed Run All button staying in "Stop" mode when switching .md files; fixed document variables leaking across files; new `resetFileSessionState()` in `workspace.js` aborts execution, force-resets `_running` flag, clears Run All button/progress bar/variables/exec context on every file switch; new `forceReset()` in `exec-controller.js` for immediate hard-reset of internal state |
 | **2026-03-15** | | 🚀 **Run All Engine & TTS UX** — pre-execution model readiness check auto-loads all required models (AI + Kokoro TTS) before block execution starts; detailed `[RunAll]` console logging with `console.table` block summary, per-block timing, variable resolution status (✅/⚠), and completion summary; Stop button now works during model loading via `M._execAborted` cross-module flag; `ensureModelReadyAsync()` rewritten with fail-fast on missing consent/API key; compact preflight dialog (960px, smaller fonts, all 8 columns visible); `waitForModelReady()` handles Kokoro TTS via `M.tts.isKokoroReady()`; TTS card split into 3 buttons: ▶ Run (generate audio only), ▷ Play (replay stored audio), 💾 Save (download WAV); new `M.tts.generate()`, `playLastAudio()`, `isKokoroReady()`, `initKokoro()` APIs; AI model fallback in `run-requirements.js` correctly defaults to text models |

changelogs/CHANGELOG-page-view.md

@@ -0,0 +1,53 @@
+# Page View — A4 Document Mode
+
+- Added new "Page" view mode (split layout: editor left, A4 page frames right)
+- New `css/page-view.css` — A4 page frame styling with shadows, page numbers, zoom levels, dark mode, responsive mobile layout
+- New `js/page-view.js` — reflow engine splits rendered markdown into A4-sized page frames using element height measurement
+- `<!-- pagebreak -->` HTML comments converted to visible markers that force new page breaks in page view
+- Page view header bar with page counter ("X pages"), zoom dropdown (50%–125%), and Export PDF button
+- `data-pagebreak` attribute added to DOMPurify whitelist in `renderer.js`
+- Page view button added to header, mobile menu, and Quick Action Bar (icon: `bi-file-earmark-richtext`)
+- `setViewMode()` in `ui-panels.js` extended with `view-page` CSS class and `enterPageMode()`/`exitPageMode()` lifecycle
+- Live reflow: page frames update on editor input (debounced)
+- Hidden render container technique for accurate element height measurement before page distribution
+
+---
+
+## Summary
+
+New "Page" view mode that renders markdown as discrete A4-sized page frames in a side-by-side split layout (editor + pages). Writers can see exactly how their content will look on printed pages, with automatic page breaking, manual `<!-- pagebreak -->` markers, zoom control, and one-click PDF export.
+
+---
+
+## 1. Page View CSS
+**Files:** `css/page-view.css`
+**What:** New stylesheet with `.page-frame` elements sized at 210×297mm (A4), `.page-view-header` bar, `.page-view-scroll` container with dot-grid background, zoom transform rules, page number positioning, dark mode variants, and responsive breakpoints for mobile.
+**Impact:** Users see professional A4 page frames with shadows, margins, and page numbers — visually matching printed output.
+
+## 2. Page View Engine
+**Files:** `js/page-view.js`
+**What:** New module implementing `enterPageMode()`, `exitPageMode()`, and `reflowPages()`. Uses a hidden off-screen container to render markdown via `renderMarkdownToContainer()`, measures each top-level element's height, and distributes them across A4-sized page frame divs based on a ~970px content height per page. Respects `.page-break-marker` elements for forced page breaks.
+**Impact:** Content is automatically split into realistic A4 pages in real-time as the user types.
+
+## 3. View Mode Integration
+**Files:** `index.html`, `js/ui-panels.js`, `src/main.js`
+**What:** Added Page button (`data-mode="page"`) to all three view-mode button groups. Extended `setViewMode()` with `view-page` class and enter/exit lifecycle. Added `#page-view-container` HTML with header bar (counter, zoom, export). Wired CSS/JS imports in `main.js`.
+**Impact:** Page view is accessible from all view mode controls and integrates seamlessly with the existing mode switching system.
+
+## 4. Pagebreak Marker Support
+**Files:** `js/renderer.js`
+**What:** Added regex preprocessing to convert `<!-- pagebreak -->` HTML comments into `<div class="page-break-marker" data-pagebreak="true">` before `marked.parse()`. Added `data-pagebreak` to DOMPurify's `ADD_ATTR` whitelist.
+**Impact:** Users can insert `<!-- pagebreak -->` anywhere in their markdown to force a new page in page view and PDF export.
+
+---
+
+## Files Changed (6 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `css/page-view.css` | +185 | New — A4 page frame styling |
+| `js/page-view.js` | +195 | New — reflow engine |
+| `index.html` | +33 | Page button (3 locations) + container HTML |
+| `src/main.js` | +2 | CSS/JS imports |
+| `js/ui-panels.js` | +10 −2 | Page mode in setViewMode() |
+| `js/renderer.js` | +5 −1 | Pagebreak preprocessor + DOMPurify attr |