mdv-live 0.5.11 → 0.5.13

package/CHANGELOG.md

@@ -5,6 +5,56 @@ 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.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
+
+- **Server fails to boot when `@marp-team/marp-cli` is missing** (codex P1):
+  - 0.5.11 で `require.resolve('@marp-team/marp-cli/package.json')` を
+    `src/api/pdf.js` の **module top-level** で実行していたため、optionalDependency
+    が欠ける環境 (`npm install --omit=optional`、platform 起因の install 失敗等)
+    で `import` 時に throw → サーバー全体が起動不能
+  - 解決を `runMarp()` 呼出時の lazy 実行に変更 (`resolveMarpEntry()`)
+  - 解決失敗時は `code: 'MARP_CLI_UNAVAILABLE'` を投げ、route handler 側で
+    503 (+ 案内メッセージ) に変換。markdown / 415 経路は marp 不在でも動く
+
+### Tests
+
+- 243 → **244 件 (+1)**: `src/api/pdf.js` の import が throw しない regression test
+
 ## [0.5.11] - 2026-05-09
 
 ### Fixed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.11",
+  "version": "0.5.13",
   "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,35 +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);
-// marp-cli は npm hoisting によりインストール先が変わる (top-level / nested)。
-// require.resolve でパッケージの実体を特定し、その bin スクリプトを node で
-// 直接実行する。`node_modules/.bin/marp` 直叩きは fresh install で nested
-// パスが無い時に ENOENT する罠。
-const marpEntry = (() => {
-  const pkgPath = require.resolve('@marp-team/marp-cli/package.json');
-  const pkg = require('@marp-team/marp-cli/package.json');
-  const binRel = typeof pkg.bin === 'string' ? pkg.bin : pkg.bin?.marp;
+const highlightStylesheet = path.resolve(path.dirname(require.resolve('highlight.js')), '..', 'styles', 'atom-one-dark.css');
+const PDF_EXPORT_TIMEOUT_MS = 180000;
+
+/**
+ * Lazily resolve a package's bin script via require.resolve.
+ *
+ * 0.5.10〜0.5.12 の hoist 罠 + optionalDependencies 欠如対応:
+ * - npm hoisting で実体パスが top-level / nested いずれにもなる
+ * - optionalDep が欠ける環境 (--omit=optional) では import 時に throw すると
+ *   サーバー起動が壊れる → request 時に lazy で解決し、欠ければ 503
+ *
+ * @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 resolvePkgBin(pkgName, binName) {
+  let pkgPath;
+  try {
+    pkgPath = require.resolve(`${pkgName}/package.json`);
+  } catch (err) {
+    const e = new Error(`${pkgName} is not installed.`);
+    e.code = 'PDF_TOOL_UNAVAILABLE';
+    e.cause = err;
+    throw e;
+  }
+  const pkg = require(`${pkgName}/package.json`);
+  const bin = pkg.bin;
+  const binRel = typeof bin === 'string' ? bin : bin?.[binName];
   if (!binRel) {
-    throw new Error('@marp-team/marp-cli does not declare a "marp" bin entry');
+    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);
-})();
-const PDF_EXPORT_TIMEOUT_MS = 180000;
+}
 
 /**
- * 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) {
+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(() => {
@@ -46,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);
       }
@@ -58,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}
@@ -72,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' });
@@ -81,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');
@@ -99,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);
@@ -114,6 +222,11 @@ export function setupPdfRoutes(app) {
     } catch (err) {
       console.error('PDF export error:', err);
       try { await fs.unlink(outputPath); } catch { /* ignore */ }
+      if (err.code === 'PDF_TOOL_UNAVAILABLE') {
+        return res.status(503).json({
+          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,106 @@
         }
     };
 
+    // ============================================================
+    // 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();
+        },
+
+        // Style 設定があるか (PDF dispatch を server vs print dialog で切り替えるため)
+        hasStyle() {
+            return !!(normalizeUserPath(state.pdfStylePath) || 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) 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
     // ============================================================
@@ -771,7 +885,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 +1714,11 @@
                 await this.exportPdf(tab.path);
             } else if (this.isHtmlPreview()) {
                 this.printHtmlPreview(tab.name);
+            } else if (tab.fileType === 'markdown' && PdfStyleManager.hasStyle()) {
+                // Style パネルで CSS / PDF options が設定されている場合のみ
+                // サーバー側 md-to-pdf で styled PDF を生成 (Watanabe 設計)。
+                // 設定がなければデフォルトの印刷ダイアログ経路に落とす。
+                await this.exportPdf(tab.path);
             } else {
                 this.browserPrint(tab.name);
             }
@@ -1625,8 +1746,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();
@@ -2252,6 +2374,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="src/styles/report.example.css">
+                </label>
+                <label>
+                    <span>PDF options</span>
+                    <input type="text" id="pdfOptionsPath" placeholder="src/styles/report.pdf-options.example.json">
+                </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;