mdv-live 0.5.12 → 0.5.14

package/CHANGELOG.md

@@ -5,6 +5,71 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.5.14] - 2026-05-09
+
+### Changed — Style PDF dispatch をリファイン
+
+`PdfStyleManager` の dispatch 判定を **「PDF options JSON の有無」** に変更
+(これまでは「CSS or JSON のいずれか」で server PDF 経路に切り替わっていた)。
+
+| CSS | PDF options | PDF ボタン押下で |
+|---|---|---|
+| 空 | 空 | 印刷ダイアログ |
+| 入れる | 空 | **印刷ダイアログ** (preview CSS が styled DOM で print engine に渡る) |
+| 入れる/空 | 入れる | サーバー md-to-pdf で styled PDF 自動 DL |
+
+JSON は margin/format/printBackground 等の細かい制御用。CSS だけ当てて
+PDF にしたい普通のケースは印刷ダイアログで十分なので、md-to-pdf 経路に
+無闇に流さない。`shouldUseServerPdf()` メソッドに rename。
+
+### UX improvements
+
+- **Style パネルの placeholder/tooltip** を rootDir 相対パス前提のヒント
+  に変更 (`report.css (rootDir からの相対パス)` 等)。Claude Code 等で
+  ファイル生成して入力する人が迷わないように
+- **失敗時のステータスメッセージ詳細化**: 旧「Style failed」→ 新
+  「Style failed: CSS not found: <path>」のように原因を出す。表示時間
+  も 2.5s → 4.5s に延長 (読み切る時間)
+- **PDF export 失敗時** もサーバーから返されたエラーメッセージを
+  ステータスバーに表示
+
+### Docs
+
+- README の `Web UI` 節を全面改訂: dispatch テーブル + Claude Code 連携手順
+
+## [0.5.13] - 2026-05-09
+
+### Restored
+
+- **PDF Style customization (Watanabe @watanko `933147f` の機能)**:
+  0.5.10 で僕が誤って "orphan" と判断し削除してしまった機能を復元。
+  README にも記載されている公開機能を黙って消したのは判断ミス。
+
+  - Web UI: `Style` ボタン + パネル (CSS path / PDF options JSON 入力)
+  - サーバー: `/api/pdf/export` の Markdown 経路 (md-to-pdf 経由) を復活
+  - `md-to-pdf` を `dependencies` に再追加
+
+### Added — A2 dispatch
+
+  Markdown PDF ボタンの動きを **Style 設定の有無** で切り替える:
+  - **Style 未設定** (デフォルト) → 印刷ダイアログ (`window.print()`) ← 0.5.10 の岡本意図
+  - **Style 設定済** (CSS or PDF options 入力 + Apply) → サーバー md-to-pdf
+    で styled PDF DL ← 渡邉さん設計
+
+  実装: `PdfStyleManager.hasStyle()` を新設し、`PrintManager.print()` の
+  Markdown 分岐で分岐。Marp は引き続きサーバー一択。
+
+### Fixed
+
+- `src/api/pdf.js` の md-to-pdf bin 解決を hoist 安全 + lazy 化:
+  `node_modules/.bin/md-to-pdf` 直叩きをやめ、`require.resolve('md-to-pdf/package.json')`
+  で解決。Marp 側と同じ `resolvePkgBin()` ヘルパに統一。
+  欠如時は `code: 'PDF_TOOL_UNAVAILABLE'` で 503 (Marp と同じパス)
+
+### Tests
+
+- 244 件全 PASS (plain markdown PDF テスト復活、415 テスト削除)
+
 ## [0.5.12] - 2026-05-09
 
 ### Fixed

package/README.md

@@ -107,12 +107,34 @@ mdv convert \
 
 ### Web UI
 
-ビューア上部の `Style` から以下を指定できます。
+ビューア上部の `Style` ボタンを押すとパネルが開き、以下を指定できます。
 
-- CSS ファイルパス
-- PDF options JSON ファイルパス
+- **CSS** — サーバー起動時の `rootDir` からの相対パス (例: `report.css`、`subdir/style.css`)
+- **PDF options** — `rootDir` からの相対パス (例: `pdf-options.json`)。省略可
 
-CSS は Markdown プレビューにも反映されます。指定を解除する場合は `Clear` を押してください。
+`Apply` を押すと CSS は Markdown プレビューにも反映されます。`Clear` で解除。
+
+#### PDF ボタン押下時の挙動 (Markdown ファイル)
+
+| CSS | PDF options | PDF ボタン押下で |
+|---|---|---|
+| 空 | 空 | OS の **印刷ダイアログ** (`window.print()`) |
+| 入れる | 空 | OS の印刷ダイアログ。preview の CSS が styled DOM として print engine に渡る |
+| 入れる/空 | **入れる** | サーバー側 `md-to-pdf` で **styled PDF を自動 DL** (`@page` で margin/format を JSON 制御したいときの本格モード) |
+
+`PDF options` を入れない限り印刷ダイアログ経由になるので、ふだんは CSS だけ指定すれば OK。
+
+#### Claude Code との連携
+
+CSS を Claude Code に生成させるとき、**サーバーの `rootDir` 配下** に保存して相対パスを Style パネルに入力してください。例:
+
+```
+$ mdv ~/notes        # rootDir = ~/notes
+# Claude Code で ~/notes/report.css を生成
+# Style パネル CSS 欄に "report.css" を入力 → Apply
+```
+
+ファイルが見つからない場合 `Style failed: CSS not found: <path>` がステータスバーに出ます。
 
 ### ポート自動増分
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.12",
+  "version": "0.5.14",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {
@@ -51,6 +51,7 @@
     "highlight.js": "^11.10.0",
     "markdown-it": "^14.1.0",
     "markdown-it-task-lists": "^2.1.1",
+    "md-to-pdf": "^5.2.5",
     "mime-types": "^2.1.35",
     "multer": "^1.4.5-lts.1",
     "open": "^10.1.0",

package/src/api/pdf.js

@@ -4,58 +4,63 @@ import path from 'path';
 import os from 'os';
 import { createRequire } from 'module';
 import { isMarp } from '../rendering/markdown.js';
-import { validatePath } from '../utils/path.js';
+import { validatePath, validatePathReal } from '../utils/path.js';
+import { resolvePdfOptions } from '../styles/index.js';
 
 const require = createRequire(import.meta.url);
+const highlightStylesheet = path.resolve(path.dirname(require.resolve('highlight.js')), '..', 'styles', 'atom-one-dark.css');
 const PDF_EXPORT_TIMEOUT_MS = 180000;
 
 /**
- * Lazily resolve the marp-cli bin script.
+ * Lazily resolve a package's bin script via require.resolve.
  *
- * `@marp-team/marp-cli` は optionalDependencies。`npm install --omit=optional` や
- * platform 起因の install 失敗で欠けることがあるため、サーバー起動時に解決
- * すると import 段階で throw → サーバー全体が起動できなくなる。PDF export
- * 経路でだけ解決し、欠けていれば export だけ 503 を返す設計に倒す。
+ * 0.5.10〜0.5.12 の hoist 罠 + optionalDependencies 欠如対応:
+ * - npm hoisting で実体パスが top-level / nested いずれにもなる
+ * - optionalDep が欠ける環境 (--omit=optional) では import 時に throw すると
+ *   サーバー起動が壊れる → request 時に lazy で解決し、欠ければ 503
  *
- * npm hoisting により実体パスは top-level / nested で変わる。`node_modules/
- * .bin/marp` 直叩きは fresh install で ENOENT に落ちる罠なので、package.json
- * の bin エントリ経由で解決する。
- *
- * @returns {string} Absolute path to the marp-cli bin script.
- * @throws {Error} `code === 'MARP_CLI_UNAVAILABLE'` if the package is missing.
+ * @param {string} pkgName - npm package name (e.g. '@marp-team/marp-cli')
+ * @param {string} binName - bin entry key (matches package.json bin)
+ * @returns {string} Absolute path to the bin script
+ * @throws {Error} `code === 'PDF_TOOL_UNAVAILABLE'` if package missing
  */
-function resolveMarpEntry() {
+function resolvePkgBin(pkgName, binName) {
   let pkgPath;
   try {
-    pkgPath = require.resolve('@marp-team/marp-cli/package.json');
+    pkgPath = require.resolve(`${pkgName}/package.json`);
   } catch (err) {
-    const e = new Error('@marp-team/marp-cli is not installed (optionalDependency missing).');
-    e.code = 'MARP_CLI_UNAVAILABLE';
+    const e = new Error(`${pkgName} is not installed.`);
+    e.code = 'PDF_TOOL_UNAVAILABLE';
     e.cause = err;
     throw e;
   }
-  const pkg = require('@marp-team/marp-cli/package.json');
-  const binRel = typeof pkg.bin === 'string' ? pkg.bin : pkg.bin?.marp;
+  const pkg = require(`${pkgName}/package.json`);
+  const bin = pkg.bin;
+  const binRel = typeof bin === 'string' ? bin : bin?.[binName];
   if (!binRel) {
-    const e = new Error('@marp-team/marp-cli does not declare a "marp" bin entry.');
-    e.code = 'MARP_CLI_UNAVAILABLE';
+    const e = new Error(`${pkgName} does not declare a "${binName}" bin entry.`);
+    e.code = 'PDF_TOOL_UNAVAILABLE';
     throw e;
   }
   return path.join(path.dirname(pkgPath), binRel);
 }
 
 /**
- * Spawn marp-cli with stdin closed.
+ * Spawn a PDF tool with stdin closed.
  *
- * 注意: execFile は stdio オプションを受け付けない (Node 仕様) ため spawn を使う。
+ * 注意: execFile は stdio オプションを受け付けない (Node 仕様)。md-to-pdf は
+ * 内部で get-stdin を呼ぶため、stdin が pipe のままだと EOF を永遠に待ち続けて
+ * ハングする。spawn で stdin を 'ignore' (= /dev/null) に明示的に縛る。
  */
-function runMarp(args) {
-  const marpEntry = resolveMarpEntry();
+function runPdfTool(bin, args, { cwd } = {}) {
   return new Promise((resolve, reject) => {
-    const child = spawn(process.execPath, [marpEntry, ...args], {
+    const child = spawn(process.execPath, [bin, ...args], {
+      cwd,
       stdio: ['ignore', 'pipe', 'pipe'],
     });
+    let stdout = '';
     let stderr = '';
+    child.stdout.on('data', (chunk) => { stdout += chunk.toString(); });
     child.stderr.on('data', (chunk) => { stderr += chunk.toString(); });
 
     const timer = setTimeout(() => {
@@ -69,11 +74,12 @@ function runMarp(args) {
     child.on('close', (code, signal) => {
       clearTimeout(timer);
       if (code === 0) {
-        resolve();
+        resolve({ stdout, stderr });
       } else {
-        const err = new Error(`marp exited with code=${code} signal=${signal}`);
+        const err = new Error(`${path.basename(bin)} exited with code=${code} signal=${signal}`);
         err.code = code;
         err.signal = signal;
+        err.stdout = stdout;
         err.stderr = stderr;
         reject(err);
       }
@@ -81,12 +87,83 @@ function runMarp(args) {
   });
 }
 
+/**
+ * Resolve an optional user-selected file path under the server root.
+ * @param {string | undefined} relativePath - Path supplied by the web UI.
+ * @param {string} rootDir - Server root directory.
+ * @returns {Promise<string | null>} Absolute path or null.
+ */
+async function resolveOptionalUserFile(relativePath, rootDir) {
+  if (!relativePath) return null;
+  if (!await validatePathReal(relativePath, rootDir)) {
+    throw new Error(`Access denied: ${relativePath}`);
+  }
+  const fullPath = path.join(rootDir, relativePath);
+  const stat = await fs.stat(fullPath);
+  if (!stat.isFile()) {
+    throw new Error(`Not a file: ${relativePath}`);
+  }
+  return fullPath;
+}
+
+/**
+ * Export a regular markdown document with md-to-pdf.
+ *
+ * 注意 1: md-to-pdf CLI は出力ファイルを **ソース隣に同名 .pdf で書く** 仕様
+ * (例: foo.md → foo.pdf next to source)。既存の foo.pdf があると上書き
+ * してから temp に rename = ユーザーのワークスペース汚染 + 読み取り専用
+ * dir で失敗。これを避けるためソースを **temp dir にコピー** してそこで
+ * md-to-pdf を実行し、生成 PDF だけを最終 outputPath に rename する。
+ *
+ * 注意 2: JS API (mdToPdf()) を使う方法もあるが、puppeteer プロセスが
+ * 残って Node test runner が event loop drain 待ちで cancel される。
+ * spawn 経由なら子プロセスが exit するので確実に cleanup される。
+ *
+ * 注意 3: temp copy なので markdown 内の **相対パス画像/CSS** は壊れる。
+ * Style 機能は CSS で見た目を整える用途を想定しており、相対パス画像を
+ * 多用する markdown は対象外として割り切る。
+ */
+async function exportMarkdownPdf(inputPath, outputPath, stylesheetPath, pdfOptionsPath) {
+  const mdToPdfBin = resolvePkgBin('md-to-pdf', 'md-to-pdf');
+  const pdfOptions = await resolvePdfOptions(pdfOptionsPath || undefined);
+
+  const tempSourceDir = await fs.mkdtemp(path.join(os.tmpdir(), 'mdv-md-'));
+  try {
+    const tempSourcePath = path.join(tempSourceDir, path.basename(inputPath));
+    await fs.copyFile(inputPath, tempSourcePath);
+
+    const args = [tempSourcePath, '--pdf-options', JSON.stringify(pdfOptions)];
+    if (stylesheetPath) {
+      args.push('--stylesheet', highlightStylesheet);
+      args.push('--stylesheet', stylesheetPath);
+      args.push('--highlight-style', 'atom-one-dark');
+    }
+
+    await runPdfTool(mdToPdfBin, args, { cwd: tempSourceDir });
+
+    const generatedPdf = tempSourcePath.replace(/\.(md|markdown)$/i, '.pdf');
+    await fs.rename(generatedPdf, outputPath);
+  } finally {
+    await fs.rm(tempSourceDir, { recursive: true, force: true });
+  }
+}
+
+/**
+ * Export a Marp slide deck with marp-cli.
+ *
+ * `@marp-team/marp-cli` is an optionalDependency. When missing the route
+ * returns a 503; that is surfaced by the caller.
+ */
+async function exportMarpPdf(inputPath, outputPath) {
+  const marpBin = resolvePkgBin('@marp-team/marp-cli', 'marp');
+  await runPdfTool(marpBin, [inputPath, '-o', outputPath, '--html', '--allow-local-files', '--no-stdin']);
+}
+
 /**
  * Setup PDF export routes.
  *
- * Web UI からは Marp ファイルのみがこの経路を使う。通常 Markdown は
- * クライアント側で window.print() (OS 印刷ダイアログ) に流す設計のため、
- * このエンドポイントは Marp 以外を 415 で拒否する。
+ * - Marp files → `marp-cli` (slide PDF, landscape, themed)
+ * - Plain Markdown → `md-to-pdf` (document PDF, optional CSS / PDF options)
  *
  * @param {Express} app - Express application
  * @returns {void}
@@ -95,7 +172,7 @@ export function setupPdfRoutes(app) {
   const { rootDir } = app.locals;
 
   app.post('/api/pdf/export', async (req, res) => {
-    const { filePath } = req.body;
+    const { filePath, stylePath, pdfOptionsPath } = req.body;
 
     if (!filePath) {
       return res.status(400).json({ error: 'filePath is required' });
@@ -104,6 +181,10 @@ export function setupPdfRoutes(app) {
     if (!validatePath(filePath, rootDir)) {
       return res.status(403).json({ error: 'Access denied' });
     }
+    // realpath check: symlink で root 外を指す source を拒否
+    if (!await validatePathReal(filePath, rootDir)) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
 
     const fullPath = path.join(rootDir, filePath);
     const baseName = path.basename(fullPath, '.md');
@@ -122,12 +203,16 @@ export function setupPdfRoutes(app) {
       }
 
       const content = await fs.readFile(fullPath, 'utf-8');
-      if (!isMarp(content)) {
-        return res.status(415).json({ error: 'Server-side PDF export supports Marp files only. Use the browser print dialog for regular Markdown.' });
+      if (isMarp(content)) {
+        await exportMarpPdf(fullPath, outputPath);
+      } else {
+        const [stylesheetPath, resolvedPdfOptionsPath] = await Promise.all([
+          resolveOptionalUserFile(stylePath, rootDir),
+          resolveOptionalUserFile(pdfOptionsPath, rootDir),
+        ]);
+        await exportMarkdownPdf(fullPath, outputPath, stylesheetPath, resolvedPdfOptionsPath);
       }
 
-      await runMarp([fullPath, '-o', outputPath, '--html', '--allow-local-files', '--no-stdin']);
-
       res.download(outputPath, outputFileName, async (err) => {
         if (err) {
           console.error('Download error:', err);
@@ -137,9 +222,9 @@ export function setupPdfRoutes(app) {
     } catch (err) {
       console.error('PDF export error:', err);
       try { await fs.unlink(outputPath); } catch { /* ignore */ }
-      if (err.code === 'MARP_CLI_UNAVAILABLE') {
+      if (err.code === 'PDF_TOOL_UNAVAILABLE') {
         return res.status(503).json({
-          error: 'Marp PDF export is unavailable: install @marp-team/marp-cli or run `npm install` without --omit=optional.',
+          error: `PDF tool unavailable: ${err.message} Run \`npm install\` (without --omit=optional) and retry.`,
         });
       }
       res.status(500).json({ error: 'PDF export failed' });

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,116 @@
         }
     };
 
+    // ============================================================
+    // 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();
+        },
+
+        // PDF dispatch 切替: PDF options JSON が指定されている時だけサーバー
+        // md-to-pdf を使う。CSS のみ (or 何もなし) の場合は印刷ダイアログ経由
+        // で OS のページ設定を活かしつつ、preview に当たっている CSS が
+        // そのまま print engine に渡って styled PDF が出る。
+        shouldUseServerPdf() {
+            return !!normalizeUserPath(state.pdfOptionsPath);
+        },
+
+        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) {
+                    if (response.status === 404) {
+                        throw new Error(`CSS not found: ${state.pdfStylePath}`);
+                    }
+                    throw new Error(`CSS load error (HTTP ${response.status}): ${state.pdfStylePath}`);
+                }
+                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);
+                // エラー詳細を status に出す (Claude Code 連携時の自己解決を助ける)
+                const detail = (error.message || 'unknown error').slice(0, 100);
+                elements.statusText.textContent = `Style failed: ${detail}`;
+                setTimeout(() => { elements.statusText.textContent = 'Connected'; }, 4500);
+            }
+        },
+
+        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
     // ============================================================
@@ -771,7 +895,9 @@
         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 => {
@@ -1598,6 +1724,11 @@
                 await this.exportPdf(tab.path);
             } else if (this.isHtmlPreview()) {
                 this.printHtmlPreview(tab.name);
+            } else if (tab.fileType === 'markdown' && PdfStyleManager.shouldUseServerPdf()) {
+                // PDF options JSON が指定されている時のみサーバー md-to-pdf。
+                // CSS だけ / 何もなしの場合は printDialog で OS にページ制御
+                // を委ね、preview の CSS injection が styled PDF を作る。
+                await this.exportPdf(tab.path);
             } else {
                 this.browserPrint(tab.name);
             }
@@ -1625,8 +1756,9 @@
 
             try {
                 statusText.textContent = 'Generating PDF...';
+                const exportOptions = PdfStyleManager.getExportOptions();
 
-                const response = await MDVApi.exportPdf({ filePath });
+                const response = await MDVApi.exportPdf({ filePath, ...exportOptions });
 
                 if (!response.ok) {
                     const error = await response.json();
@@ -1650,10 +1782,13 @@
                 }, 2000);
             } catch (error) {
                 console.error('PDF export error:', error);
-                statusText.textContent = 'PDF export failed';
+                // サーバーが返したエラーメッセージを status に表示
+                // (Claude Code 連携などで「何が悪いか分からない」を防ぐ)
+                const detail = (error.message || 'unknown error').slice(0, 100);
+                statusText.textContent = `PDF export failed: ${detail}`;
                 setTimeout(() => {
                     statusText.textContent = originalStatus;
-                }, 3000);
+                }, 4500);
             }
         },
 
@@ -2252,6 +2387,7 @@
     async function init() {
         // Initialize all managers
         ThemeManager.init();
+        PdfStyleManager.init();
         SidebarManager.init();
         ResizeHandler.init();
         EditorManager.init();

package/src/static/index.html

@@ -95,6 +95,13 @@
                     PDF
                 </button>
 
+                <button class="toolbar-btn" id="pdfStyleToggle" title="PDF style settings" aria-label="PDF style settings">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                    </svg>
+                    Style
+                </button>
+
                 <div class="toolbar-spacer"></div>
 
                 <span class="editor-status" id="editorStatus" style="display: none;">Ready</span>
@@ -110,6 +117,19 @@
                 </div>
             </div>
 
+            <div class="pdf-style-panel hidden" id="pdfStylePanel">
+                <label>
+                    <span>CSS</span>
+                    <input type="text" id="pdfStylePath" placeholder="report.css (rootDir からの相対パス)" title="rootDir 配下の .css ファイルパス。例: report.css または subdir/style.css">
+                </label>
+                <label>
+                    <span>PDF options</span>
+                    <input type="text" id="pdfOptionsPath" placeholder="pdf-options.json (省略可。空なら印刷ダイアログ)" title="rootDir 配下の .json ファイルパス。指定すると md-to-pdf が margin/format を適用してサーバー PDF 自動 DL。空なら印刷ダイアログ経路。">
+                </label>
+                <button class="toolbar-btn" id="pdfStyleApply">Apply</button>
+                <button class="toolbar-btn" id="pdfStyleClear">Clear</button>
+            </div>
+
             <!-- Tab bar -->
             <div class="tab-bar" id="tabBar" role="tablist" aria-label="Open files"></div>
 

package/src/static/styles.css

@@ -241,6 +241,40 @@ body {
 
 .toolbar-spacer { flex: 1; }
 
+.pdf-style-panel {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 16px;
+    border-bottom: 1px solid var(--border);
+    background: var(--bg-secondary);
+}
+
+.pdf-style-panel label {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    color: var(--text-secondary);
+    font-size: 12px;
+}
+
+.pdf-style-panel input {
+    width: min(34vw, 360px);
+    min-width: 160px;
+    padding: 6px 8px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text-primary);
+    font-size: 12px;
+}
+
+.pdf-style-panel input:focus {
+    border-color: var(--accent);
+    outline: none;
+}
+
 .status {
     display: flex;
     align-items: center;
@@ -774,7 +808,7 @@ body {
         padding: 0 !important;
     }
 
-    .sidebar, .resize-handle, .toolbar, .tab-bar { display: none !important; }
+    .sidebar, .resize-handle, .toolbar, .tab-bar, .pdf-style-panel { display: none !important; }
 
     body {
         height: auto !important;