mdv-live 0.5.4 → 0.5.8

package/src/server.js

@@ -10,11 +10,13 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 
 import { setupFileRoutes } from './api/file.js';
+import { setupMarpNoteRoutes } from './api/marpNote.js';
 import { setupPdfRoutes } from './api/pdf.js';
 import { setupTreeRoutes } from './api/tree.js';
 import { setupUploadRoutes } from './api/upload.js';
 import { setupWatcher } from './watcher.js';
 import { setupWebSocket } from './websocket.js';
+import { sweepStaleTemps } from './utils/atomicWrite.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const STATIC_DIR = path.join(__dirname, 'static');
@@ -26,11 +28,12 @@ const { version: VERSION } = JSON.parse(
  * Setup API routes for the Express app
  * @param {express.Application} app - Express application instance
  */
-function setupApiRoutes(app) {
+function setupApiRoutes(app, options) {
   setupTreeRoutes(app);
   setupFileRoutes(app);
   setupUploadRoutes(app);
   setupPdfRoutes(app);
+  setupMarpNoteRoutes(app, { port: options.port });
 
   app.get('/api/info', (req, res) => {
     res.json({
@@ -61,11 +64,31 @@ export function createMdvServer(options) {
 
   app.locals.rootDir = path.resolve(rootDir);
 
-  app.use(express.json());
-  app.use(express.urlencoded({ extended: true }));
+  app.use(express.json({ limit: '128kb' }));
+  app.use(express.urlencoded({ extended: true, limit: '128kb' }));
   app.use('/static', express.static(STATIC_DIR));
 
-  setupApiRoutes(app);
+  setupApiRoutes(app, { port });
+
+  // Body-parser error handler (size limit, malformed JSON) must come AFTER
+  // the routes so route-level errors fall through to the default handler.
+  app.use((err, req, res, next) => {
+    if (err && err.type === 'entity.too.large') {
+      return res.status(413).json({
+        ok: false,
+        code: 'PAYLOAD_TOO_LARGE',
+        error: 'request body exceeds limit'
+      });
+    }
+    if (err && err.type === 'entity.parse.failed') {
+      return res.status(400).json({
+        ok: false,
+        code: 'INVALID_NOTE',
+        error: 'malformed JSON'
+      });
+    }
+    next(err);
+  });
 
   // Catch-all: serve index.html for SPA (path-based routing)
   // Express matches routes in order, so API/static routes above take priority
@@ -80,6 +103,8 @@ export function createMdvServer(options) {
   app.locals.wss = wss;
 
   function start() {
+    // Best-effort sweep of stale temp files left by a previous crashed write.
+    sweepStaleTemps(app.locals.rootDir).catch(() => {});
     return new Promise((resolve) => {
       server.listen(port, () => {
         console.log(`MDV server running at http://localhost:${port}`);

package/src/static/app.js

@@ -11,7 +11,9 @@
 
     const STORAGE_KEYS = {
         THEME: 'mdv-theme',
-        SIDEBAR_WIDTH: 'mdv-sidebar-width'
+        SIDEBAR_WIDTH: 'mdv-sidebar-width',
+        PDF_STYLE_PATH: 'mdv-pdf-style-path',
+        PDF_OPTIONS_PATH: 'mdv-pdf-options-path'
     };
 
     const HLJS_THEMES = {
@@ -85,7 +87,9 @@
         isResizing: false,
         skipScrollRestore: false,
         uploadTargetPath: '',
-        rootPath: ''
+        rootPath: '',
+        pdfStylePath: localStorage.getItem(STORAGE_KEYS.PDF_STYLE_PATH) || '',
+        pdfOptionsPath: localStorage.getItem(STORAGE_KEYS.PDF_OPTIONS_PATH) || ''
     };
 
     // ============================================================
@@ -121,6 +125,12 @@
         statusText: document.getElementById('statusText'),
         resizeHandle: document.getElementById('resizeHandle'),
         editToggle: document.getElementById('editToggle'),
+        pdfStyleToggle: document.getElementById('pdfStyleToggle'),
+        pdfStylePanel: document.getElementById('pdfStylePanel'),
+        pdfStylePath: document.getElementById('pdfStylePath'),
+        pdfOptionsPath: document.getElementById('pdfOptionsPath'),
+        pdfStyleApply: document.getElementById('pdfStyleApply'),
+        pdfStyleClear: document.getElementById('pdfStyleClear'),
         editLabel: document.getElementById('editLabel'),
         editorStatus: document.getElementById('editorStatus'),
         shutdownBtn: document.getElementById('shutdownBtn'),
@@ -163,6 +173,10 @@
         });
     }
 
+    function normalizeUserPath(path) {
+        return path.trim().replace(/^\/+/, '');
+    }
+
     async function apiRequest(url, options = {}) {
         const response = await fetch(url, options);
         const data = await response.json();
@@ -235,6 +249,101 @@
         }
     };
 
+    // ============================================================
+    // PDF Style Preview
+    // ============================================================
+
+    const PdfStyleManager = {
+        scopedCssId: 'pdf-style-preview-css',
+
+        init() {
+            elements.pdfStylePath.value = state.pdfStylePath;
+            elements.pdfOptionsPath.value = state.pdfOptionsPath;
+            elements.pdfStyleToggle.addEventListener('click', () => {
+                elements.pdfStylePanel.classList.toggle('hidden');
+            });
+            elements.pdfStyleApply.addEventListener('click', () => this.applyFromInputs());
+            elements.pdfStyleClear.addEventListener('click', () => this.clear());
+            elements.pdfStylePath.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter') this.applyFromInputs();
+            });
+            elements.pdfOptionsPath.addEventListener('keydown', (event) => {
+                if (event.key === 'Enter') this.applyFromInputs();
+            });
+            this.loadPreviewCss();
+        },
+
+        getExportOptions() {
+            return {
+                stylePath: normalizeUserPath(state.pdfStylePath),
+                pdfOptionsPath: normalizeUserPath(state.pdfOptionsPath)
+            };
+        },
+
+        async applyFromInputs() {
+            state.pdfStylePath = normalizeUserPath(elements.pdfStylePath.value);
+            state.pdfOptionsPath = normalizeUserPath(elements.pdfOptionsPath.value);
+            elements.pdfStylePath.value = state.pdfStylePath;
+            elements.pdfOptionsPath.value = state.pdfOptionsPath;
+            localStorage.setItem(STORAGE_KEYS.PDF_STYLE_PATH, state.pdfStylePath);
+            localStorage.setItem(STORAGE_KEYS.PDF_OPTIONS_PATH, state.pdfOptionsPath);
+            await this.loadPreviewCss();
+            TabManager.renderActive();
+        },
+
+        clear() {
+            state.pdfStylePath = '';
+            state.pdfOptionsPath = '';
+            elements.pdfStylePath.value = '';
+            elements.pdfOptionsPath.value = '';
+            localStorage.removeItem(STORAGE_KEYS.PDF_STYLE_PATH);
+            localStorage.removeItem(STORAGE_KEYS.PDF_OPTIONS_PATH);
+            const oldStyle = document.getElementById(this.scopedCssId);
+            if (oldStyle) oldStyle.remove();
+            TabManager.renderActive();
+            elements.statusText.textContent = 'PDF style cleared';
+            setTimeout(() => { elements.statusText.textContent = 'Connected'; }, 1600);
+        },
+
+        async loadPreviewCss() {
+            const oldStyle = document.getElementById(this.scopedCssId);
+            if (oldStyle) oldStyle.remove();
+            if (!state.pdfStylePath) return;
+
+            try {
+                const response = await fetch(`/raw/${state.pdfStylePath}`);
+                if (!response.ok) throw new Error('CSS file not found');
+                const cssText = await response.text();
+                const style = document.createElement('style');
+                style.id = this.scopedCssId;
+                style.textContent = this.scopeCss(cssText);
+                document.head.appendChild(style);
+                elements.statusText.textContent = 'PDF style applied';
+                setTimeout(() => { elements.statusText.textContent = 'Connected'; }, 1600);
+            } catch (error) {
+                console.error('PDF style preview error:', error);
+                elements.statusText.textContent = 'PDF style failed';
+                setTimeout(() => { elements.statusText.textContent = 'Connected'; }, 2500);
+            }
+        },
+
+        scopeCss(cssText) {
+            const scope = '.markdown-body.pdf-style-preview';
+            const withoutComments = cssText.replace(/\/\*[\s\S]*?\*\//g, '');
+            return withoutComments.replace(/([^{}]+)\{/g, (match, selectorText) => {
+                const selectors = selectorText.trim();
+                if (!selectors || selectors.startsWith('@')) return match;
+                const scopedSelectors = selectors.split(',').map((selector) => {
+                    const trimmed = selector.trim();
+                    if (trimmed === ':root' || trimmed === 'body') return scope;
+                    if (trimmed.startsWith(scope)) return trimmed;
+                    return `${scope} ${trimmed}`;
+                });
+                return `${scopedSelectors.join(', ')} {`;
+            });
+        }
+    };
+
     // ============================================================
     // Sidebar Management
     // ============================================================
@@ -371,7 +480,13 @@
 
             if (tab.isMarp) {
                 if (data.css) tab.css = data.css;
+                if (data.notes) tab.notes = data.notes;
+                if (data.notesMultiplicity) tab.notesMultiplicity = data.notesMultiplicity;
+                if (data.etag) tab.etag = data.etag;
+                if (data.lineEnding) tab.lineEnding = data.lineEnding;
+                if (typeof data.hasBom !== 'undefined') tab.hasBom = !!data.hasBom;
                 ContentRenderer.renderMarp(data.content, tab.css);
+                PresenterView.broadcastSlides();
             } else {
                 const currentScroll = saveScrollPosition(elements.content);
                 ContentRenderer.render(data.content, data.fileType || tab.fileType);
@@ -388,7 +503,7 @@
         async load(retries = 5) {
             for (let i = 0; i < retries; i++) {
                 try {
-                    const response = await fetch('/api/tree');
+                    const response = await MDVApi.fetchTree();
                     if (!response.ok) throw new Error(`HTTP ${response.status}`);
                     const tree = await response.json();
                     elements.fileTree.innerHTML = this.renderItems(tree);
@@ -406,7 +521,7 @@
 
         async refresh() {
             try {
-                const response = await fetch('/api/tree');
+                const response = await MDVApi.fetchTree();
                 if (!response.ok) throw new Error(`HTTP ${response.status}`);
                 const tree = await response.json();
                 await this.update(tree);
@@ -480,7 +595,7 @@
 
         async expandDirectory(path, childrenContainer) {
             try {
-                const response = await fetch(`/api/tree/expand?path=${encodeURIComponent(path)}`);
+                const response = await MDVApi.expandTree(path);
                 const children = await response.json();
                 childrenContainer.innerHTML = this.renderItems(children);
 
@@ -560,11 +675,214 @@
     let marpCurrentSlide = 0;
     let marpKeyHandler = null;
 
+    // ============================================================
+    // Presenter View (separate window with speaker notes)
+    // ============================================================
+
+    const PresenterView = {
+        channel: null,
+        presenterWindow: null,
+        saveQueue: null,            // MDVSaveQueue instance (created in init)
+        lastSavedEtag: new Map(),   // Map<path, etag> — own-save chain rebase
+
+        init() {
+            if (typeof BroadcastChannel === 'undefined') return;
+            if (!window.MDVPresenterChannel || !window.MDVSaveQueue) return;
+            this.channel = window.MDVPresenterChannel.create();
+            if (!this.channel) return;
+
+            // saveQueue rebases queued edits onto the etag of our last own
+            // save when there has been no external watcher update. If an
+            // external edit arrives, fallback to the originally-pinned etag
+            // so optimistic locking can detect the conflict via 412.
+            this.saveQueue = window.MDVSaveQueue.createSaveQueue({
+                saveFn: (path, slideIndex, note, etag) => {
+                    const tab = state.tabs.find((t) => t.path === path);
+                    const own = this.lastSavedEtag.get(path);
+                    const useEtag = (tab && own && tab.etag === own) ? own : etag;
+                    return this.saveNote(path, slideIndex, note, useEtag);
+                }
+            });
+
+            this.channel.addEventListener('message', (e) => {
+                const msg = e.data || {};
+                if (msg.type === 'request-slides') {
+                    this.broadcastSlides();
+                } else if (msg.type === 'goto') {
+                    this.gotoSlide(msg.index);
+                } else if (msg.type === 'edit-note') {
+                    if (!msg.path) return;
+                    this.saveQueue.enqueue(msg.path, msg.slideIndex, msg.note, msg.etag || null);
+                }
+            });
+
+            // When a tab closes, drop its queued saves and own-etag entry to
+            // prevent a slow leak under long sessions with many decks.
+            if (window.MDVTabRegistry) {
+                window.MDVTabRegistry.onTabClosed((path) => {
+                    if (this.saveQueue) this.saveQueue.dropPath(path);
+                    this.lastSavedEtag.delete(path);
+                });
+            }
+
+            window.addEventListener('beforeunload', () => {
+                if (this.presenterWindow && !this.presenterWindow.closed) {
+                    this.presenterWindow.close();
+                }
+            });
+        },
+
+        // Persist a speaker note edit via the Marpit-token-based API. The
+        // server resolves the path, validates ETag, and rewrites surgically.
+        // `editTimeEtag` is the etag captured by the presenter at edit start;
+        // we send that as If-Match (NOT the live tab.etag) so a watcher
+        // refresh during the debounce can't smuggle a write past the lock.
+        async saveNote(path, slideIndex, note, editTimeEtag) {
+            const tab = state.tabs.find((t) => t.path === path);
+            if (!tab || !tab.isMarp) return;
+            const ifMatch = editTimeEtag || tab.etag;
+            if (!ifMatch) {
+                // GET degrade or no etag yet — refuse without writing.
+                this.channel.postMessage({
+                    type: 'note-saved',
+                    slideIndex,
+                    ok: false,
+                    reason: 'Deck not parseable (degraded mode)'
+                });
+                return;
+            }
+
+            let res, data;
+            try {
+                ({ res, data } = await window.MDVApi.saveMarpNote(path, slideIndex, note, ifMatch));
+            } catch (err) {
+                console.error('saveNote network error', err);
+                this.channel.postMessage({
+                    type: 'note-saved', slideIndex, ok: false, reason: 'Network error'
+                });
+                return;
+            }
+
+            if (res.status === 412 && data.code === 'STALE') {
+                // The file changed under us. Do NOT update tab.etag here —
+                // tab.content/notes/slideRanges are still the pre-conflict
+                // version, so adopting the new etag would let the next edit
+                // pass If-Match while the deck index is wrong. The watcher's
+                // file_update event will refresh tab.{content,notes,etag}
+                // together once chokidar sees the change. Until then, all
+                // PUTs from this tab keep returning 412.
+                this.channel.postMessage({
+                    type: 'note-saved',
+                    slideIndex,
+                    ok: false,
+                    reason: 'STALE — file changed externally; please reload'
+                });
+                return;
+            }
+
+            if (res.ok && data.ok) {
+                // Update local tab state from the server's authoritative
+                // post-rewrite payload so re-broadcasts and the editor
+                // immediately see the saved content. Otherwise raw/notes
+                // would lag until the watcher's file_update event arrives.
+                tab.etag = data.etag;
+                this.lastSavedEtag.set(path, data.etag);
+                if (typeof data.source === 'string') tab.raw = data.source;
+                if (Array.isArray(data.notes)) tab.notes = data.notes;
+                if (Array.isArray(data.notesMultiplicity)) {
+                    tab.notesMultiplicity = data.notesMultiplicity;
+                }
+                this.channel.postMessage({
+                    type: 'note-saved',
+                    slideIndex,
+                    ok: true,
+                    etag: data.etag,
+                    normalizedNote: data.normalizedNote
+                });
+                // Re-broadcast so the presenter window picks up the new
+                // notes/etag without waiting for the watcher event.
+                this.broadcastSlides();
+                return;
+            }
+
+            const reason = data && (data.error || data.code) || 'Save failed';
+            this.channel.postMessage({
+                type: 'note-saved', slideIndex, ok: false, reason
+            });
+        },
+
+        open() {
+            const tab = state.tabs[state.activeTabIndex];
+            if (!tab || !tab.isMarp) return;
+
+            if (this.presenterWindow && !this.presenterWindow.closed) {
+                this.presenterWindow.focus();
+                this.broadcastSlides();
+                return;
+            }
+
+            this.presenterWindow = window.open(
+                '/static/presenter.html',
+                'mdv-presenter',
+                'width=1280,height=720,resizable=yes,scrollbars=yes'
+            );
+
+            // presenter sends `request-slides` on load, but broadcast as a fallback
+            setTimeout(() => this.broadcastSlides(), 300);
+        },
+
+        broadcastSlides() {
+            if (!this.channel) return;
+            const tab = state.tabs[state.activeTabIndex];
+            if (!tab || !tab.isMarp) {
+                // Active tab is not a Marp deck (or no tab) — clear the
+                // presenter so it doesn't keep showing stale slides /
+                // accept edits against the wrong file.
+                this.channel.postMessage({
+                    type: 'slides',
+                    empty: true,
+                    reason: 'main-switched-away'
+                });
+                return;
+            }
+            this.channel.postMessage({
+                type: 'slides',
+                path: tab.path,
+                html: tab.content,
+                css: tab.css,
+                notes: tab.notes || [],
+                notesMultiplicity: tab.notesMultiplicity || [],
+                etag: tab.etag || null,
+                current: marpCurrentSlide
+            });
+        },
+
+        broadcastIndex(index) {
+            if (!this.channel) return;
+            this.channel.postMessage({ type: 'index', index });
+        },
+
+        gotoSlide(index) {
+            const slides = elements.content.querySelectorAll('.marpit > svg[data-marpit-svg]');
+            if (!slides.length || index < 0 || index >= slides.length) return;
+            slides.forEach((s, i) => s.classList.toggle('active', i === index));
+            marpCurrentSlide = index;
+            const counter = elements.content.querySelector('.slide-counter');
+            if (counter) counter.textContent = `${index + 1} / ${slides.length}`;
+            const prevBtn = elements.content.querySelector('.marp-prev');
+            const nextBtn = elements.content.querySelector('.marp-next');
+            if (prevBtn) prevBtn.disabled = index === 0;
+            if (nextBtn) nextBtn.disabled = index === slides.length - 1;
+        }
+    };
+
     const ContentRenderer = {
         render(htmlContent, fileType) {
             const containerClass = fileType === 'code'
                 ? 'markdown-body code-view-container'
-                : 'markdown-body';
+                : fileType === 'markdown'
+                    ? 'markdown-body pdf-style-preview'
+                    : 'markdown-body';
             elements.content.innerHTML = `<div class="${containerClass}">${htmlContent}</div>`;
 
             elements.content.querySelectorAll('pre code').forEach(block => {
@@ -661,6 +979,11 @@
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" />
                         </svg>
                     </button>
+                    <button class="marp-presenter-btn" title="Presenter View (P)">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                        </svg>
+                    </button>
                     <button class="marp-close-nav" title="Hide (N to show)">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
@@ -706,6 +1029,7 @@
                 }
                 if (prevBtn) prevBtn.disabled = index === 0;
                 if (nextBtn) nextBtn.disabled = index === slides.length - 1;
+                PresenterView.broadcastIndex(index);
             };
 
             const nextSlide = () => {
@@ -750,6 +1074,10 @@
             };
             if (fullscreenBtn) fullscreenBtn.addEventListener('click', toggleFullscreen);
 
+            // Presenter view button
+            const presenterBtn = elements.content.querySelector('.marp-presenter-btn');
+            if (presenterBtn) presenterBtn.addEventListener('click', () => PresenterView.open());
+
             // Make nav draggable and closeable
             const nav = elements.content.querySelector('.marp-nav');
             if (nav) {
@@ -818,6 +1146,11 @@
                 } else if (e.key === 'n' || e.key === 'N') {
                     e.preventDefault();
                     if (nav) nav.classList.toggle('hidden');
+                } else if ((e.key === 'p' || e.key === 'P') && !e.metaKey && !e.ctrlKey && !e.altKey) {
+                    // Skip if modifiers are held — Cmd/Ctrl+P is the print
+                    // shortcut and must not also open the presenter view.
+                    e.preventDefault();
+                    PresenterView.open();
                 } else if (e.key === 'Escape') {
                     e.preventDefault();
                     if (document.body.classList.contains('marp-fullscreen')) {
@@ -955,7 +1288,7 @@
                 return;
             }
 
-            const response = await fetch(`/api/file?path=${encodeURIComponent(path)}`);
+            const response = await MDVApi.fetchFile(path);
             const data = await response.json();
 
             if (data.error) {
@@ -971,6 +1304,11 @@
                 fileType: data.fileType,
                 isMarp: data.isMarp || false,
                 css: data.css || null,  // Marp CSS from marp-core
+                notes: data.notes || [],  // Marp speaker notes per slide
+                notesMultiplicity: data.notesMultiplicity || [],
+                etag: data.etag || null,
+                lineEnding: data.lineEnding || '\n',
+                hasBom: !!data.hasBom,
                 imageUrl: data.imageUrl,
                 pdfUrl: data.pdfUrl,
                 htmlUrl: data.htmlUrl,
@@ -1040,7 +1378,11 @@
                 });
                 return;
             }
+            const closingPath = state.tabs[index] && state.tabs[index].path;
             state.tabs.splice(index, 1);
+            if (closingPath && window.MDVTabRegistry) {
+                window.MDVTabRegistry.notifyClosed(closingPath);
+            }
 
             if (state.tabs.length === 0) {
                 state.activeTabIndex = -1;
@@ -1094,6 +1436,7 @@
 
             if (tab.isMarp) {
                 ContentRenderer.renderMarp(tab.content, tab.css);
+                PresenterView.broadcastSlides();
                 return;
             }
 
@@ -1231,10 +1574,17 @@
             elements.editorStatus.style.display = 'none';
 
             try {
-                const response = await fetch(`/api/file?path=${encodeURIComponent(tab.path)}`);
+                const response = await MDVApi.fetchFile(tab.path);
                 const data = await response.json();
                 if (data.content) tab.content = data.content;
                 if (data.raw) tab.raw = data.raw;
+                if (data.css) tab.css = data.css;
+                if (data.notes) tab.notes = data.notes;
+                if (data.notesMultiplicity) tab.notesMultiplicity = data.notesMultiplicity;
+                if (data.etag) tab.etag = data.etag;
+                if (data.lineEnding) tab.lineEnding = data.lineEnding;
+                if (typeof data.hasBom !== 'undefined') tab.hasBom = !!data.hasBom;
+                if (typeof data.isMarp !== 'undefined') tab.isMarp = data.isMarp;
             } catch (e) {
                 console.error('Failed to fetch updated content:', e);
             }
@@ -1301,11 +1651,7 @@
                 elements.editorStatus.textContent = 'Saving...';
                 elements.editorStatus.className = 'editor-status';
 
-                const response = await fetch('/api/file', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ path: tab.path, content: newContent })
-                });
+                const response = await MDVApi.saveFile(tab.path, newContent);
 
                 const result = await response.json();
 
@@ -1360,9 +1706,11 @@
             }
 
             if (tab.isMarp || this.isMarpPresentation()) {
-                await this.exportMarpPdf(tab.path);
+                await this.exportPdf(tab.path);
             } else if (this.isHtmlPreview()) {
                 this.printHtmlPreview(tab.name);
+            } else if (tab.fileType === 'markdown') {
+                await this.exportPdf(tab.path);
             } else {
                 this.browserPrint(tab.name);
             }
@@ -1384,18 +1732,15 @@
             }
         },
 
-        async exportMarpPdf(filePath) {
+        async exportPdf(filePath) {
             const statusText = elements.statusText;
             const originalStatus = statusText.textContent;
 
             try {
                 statusText.textContent = 'Generating PDF...';
+                const exportOptions = PdfStyleManager.getExportOptions();
 
-                const response = await fetch('/api/pdf/export', {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify({ filePath })
-                });
+                const response = await MDVApi.exportPdf({ filePath, ...exportOptions });
 
                 if (!response.ok) {
                     const error = await response.json();
@@ -2002,7 +2347,7 @@
         WebSocketManager.watchFile(tab.path);
 
         try {
-            const response = await fetch(`/api/file?path=${encodeURIComponent(tab.path)}`);
+            const response = await MDVApi.fetchFile(tab.path);
             const data = await response.json();
             if (data.content && data.content !== tab.content) {
                 tab.content = data.content;
@@ -2021,6 +2366,7 @@
     async function init() {
         // Initialize all managers
         ThemeManager.init();
+        PdfStyleManager.init();
         SidebarManager.init();
         ResizeHandler.init();
         EditorManager.init();
@@ -2030,6 +2376,7 @@
         ContextMenuManager.init();
         DragDropManager.init();
         KeyboardManager.init();
+        PresenterView.init();
 
         // Warn before leaving with unsaved changes
         window.addEventListener('beforeunload', (e) => {
@@ -2041,7 +2388,7 @@
         TabManager.render();
 
         try {
-            const infoResponse = await fetch('/api/info');
+            const infoResponse = await MDVApi.fetchInfo();
             const info = await infoResponse.json();
             state.rootPath = info.rootPath;
         } catch (e) {