mdv-live 0.5.13 → 0.5.14

package/CHANGELOG.md

@@ -5,6 +5,38 @@ 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

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.13",
+  "version": "0.5.14",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/static/app.js

@@ -273,9 +273,12 @@
             this.loadPreviewCss();
         },
 
-        // Style 設定があるか (PDF dispatch を server vs print dialog で切り替えるため)
-        hasStyle() {
-            return !!(normalizeUserPath(state.pdfStylePath) || normalizeUserPath(state.pdfOptionsPath));
+        // PDF dispatch 切替: PDF options JSON が指定されている時だけサーバー
+        // md-to-pdf を使う。CSS のみ (or 何もなし) の場合は印刷ダイアログ経由
+        // で OS のページ設定を活かしつつ、preview に当たっている CSS が
+        // そのまま print engine に渡って styled PDF が出る。
+        shouldUseServerPdf() {
+            return !!normalizeUserPath(state.pdfOptionsPath);
         },
 
         getExportOptions() {
@@ -317,7 +320,12 @@
 
             try {
                 const response = await fetch(`/raw/${state.pdfStylePath}`);
-                if (!response.ok) throw new Error('CSS file not found');
+                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;
@@ -327,8 +335,10 @@
                 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);
+                // エラー詳細を status に出す (Claude Code 連携時の自己解決を助ける)
+                const detail = (error.message || 'unknown error').slice(0, 100);
+                elements.statusText.textContent = `Style failed: ${detail}`;
+                setTimeout(() => { elements.statusText.textContent = 'Connected'; }, 4500);
             }
         },
 
@@ -1714,10 +1724,10 @@
                 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 設計)。
-                // 設定がなければデフォルトの印刷ダイアログ経路に落とす。
+            } 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);
@@ -1772,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);
             }
         },
 

package/src/static/index.html

@@ -120,11 +120,11 @@
             <div class="pdf-style-panel hidden" id="pdfStylePanel">
                 <label>
                     <span>CSS</span>
-                    <input type="text" id="pdfStylePath" placeholder="src/styles/report.example.css">
+                    <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="src/styles/report.pdf-options.example.json">
+                    <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>

package/src/static/styles.css

@@ -808,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;