mdv-live 0.5.16 → 0.5.18

package/CHANGELOG.md

@@ -5,6 +5,79 @@ 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.18] - 2026-05-12
+
+### Fixed — Offline operation
+
+ビューワがネットワーク接続なしでも完全に動くようになった。これまで
+`index.html` が 5 つの CDN (highlight.js / Mermaid / html2pdf.js / Tailwind /
+hljs テーマ CSS) を直接読み込んでいたため、Wi-Fi 切断時はシンタックスハイ
+ライト・図表・PDF 出力・全 UI スタイルが死ぬ状態だった。
+
+- `src/static/vendor/` に各ライブラリのオフライン版を同梱
+- `scripts/sync-vendor.js` でメンテナが version bump 時に node_modules /
+  Tailwind Play CDN から再生成 (`node scripts/sync-vendor.js`)
+- Tailwind は v3.4.17 で pin (v4 系は `tailwind.config` 構文が変わるため)
+- `index.html` と `app.js` (`HLJS_THEMES`) の CDN URL を `/static/vendor/...`
+  に置換
+- 各ライブラリのライセンス本文を `vendor/licenses/` に同梱、
+  html2pdf bundle が名指しする `html2pdf.bundle.min.js.LICENSE.txt` も sidecar 配置
+- `@highlightjs/cdn-assets` / `mermaid` / `html2pdf.js` は **devDependencies**
+  (vendor 元、runtime では使わないので global install 時にダウンロードされない)
+- `tests/test-offline-assets.js` で「served HTML/JS に外部 CDN URL がない」
+  「必須 vendor ファイル / license 一式が揃う」「vendor-only パッケージが
+  dependencies に逆流していない」を 14 件の assert で常時保証
+
+### Verified
+
+- 272 テスト 全 PASS (既存 258 + 新規 14)
+- Playwright dogfood (`docs/dogfood-offline-2026-05-11/`): 非 localhost への
+  リクエスト 0 件、code highlight / mermaid / Tailwind / edit autosave /
+  theme 切替 / Marp split layout / inline notes すべて回帰なし
+- Codex review 2 round で「No actionable regressions」収束
+
+## [0.5.17] - 2026-05-10
+
+### Added — Edit-mode Autosave
+
+Markdown エディタを **入力 → 1500ms debounce で自動保存** に。これまで Cmd+S を
+押し忘れると未保存で View に戻すと内容が消える挙動だった。
+
+- `input` で 1500ms debounce → `EditorManager.save()` が `/api/file` に POST
+- toolbar status の遷移: `Modified → Saving... → Saved! → (2s 後) Ready`
+- **Cmd+S** は引き続き使えて、押すと pending な debounce を即 flush
+- View 切替 / タブ切替 / 別ファイル open 時に **flush + await** で未保存破棄事故を防止
+- save 中の連続 input は serialize（chain）。古い save が後着して新しい save を
+  上書きしないよう、各 save 自身の Promise を chain tail にして flush は末尾まで drain
+- save 失敗時は `hide()` / `switch()` / `open()` がすべて navigation を中止して
+  Edit mode を維持。toolbar に `Error: ...` を表示してリトライ余地を残す
+- discard-on-close ダイアログ: AbortController で in-flight POST も abort。
+  ただしサーバーが既に request 受信済みの race window は残るため、ダイアログ
+  メッセージで「自動保存処理中の場合、その時点までの内容がファイルに残る可能性が
+  あります」と明示
+
+### Changed
+
+- `MDVApi.saveFile(path, content, signal?)` に AbortSignal 引数追加（既存
+  caller は signal 省略で動作継続）
+- `TabManager.switch()` を `async` 化（path で target を pin → flush await →
+  index 再 lookup で navigation race 回避）
+- save 成功時に `MDVApi.fetchFile(path)` を chain 内で await して
+  `tab.{content,css,notes,notesMultiplicity,etag,isMarp}` を更新（古い fetch
+  が新しい fetch の後に到着して content を上書きする race を排除）
+
+### Fixed (codex review round 1〜14 で潰した issues)
+
+- 保存中に typing 続いた場合の dirty フラグ誤クリア（live editor とのテキスト一致
+  を確認してから "Saved!" 表示）
+- 連続 autosave で古い ETag の POST が新しい save の後に到着して overwrite
+- BroadcastChannel 経由じゃない、HTTP 経路独自の serialize chain
+- 編集中のタブを close したときに edit mode flag が残る regression
+- discard-on-close で saveTimer / inFlight 両方 abort + lastAutosaveError も clear
+- open() で fetch 中の typing をブロック（textarea.readOnly）+ error 時に restore
+- debounce-fired save が silent fail したまま flushAutosave が成功扱いする問題
+  （`lastAutosaveError` を保持し、navigation 時に再 throw）
+
 ## [0.5.16] - 2026-05-09
 
 ### Added — Inline Speaker Notes (PowerPoint-style)

package/README.md

@@ -11,11 +11,13 @@
 - 📄 Markdownをリアルタイムレンダリング
 - 🎬 **Marp完全対応**（公式テーマ・ディレクティブ・数式）
 - 🎤 **Presenter View**（スピーカーノート別ウィンドウ・自動保存・タイマー） — `P` キーで起動
+- 🪟 **PowerPoint 風 Split Layout** — 上にスライド / 下にスピーカーノート、間にドラッグハンドルでサイズ変更（0.5.16+）
+- 📝 **Inline Speaker Notes Editor** — メイン画面で直接ノート編集 → 800ms デバウンスで自動保存（0.5.16+）
 - 🔄 ファイル更新時に自動リロード（WebSocket）
 - 🎨 シンタックスハイライト（highlight.js）
 - 📊 Mermaid図のレンダリング
 - 🌙 ダーク/ライトテーマ切り替え
-- ✏️ インラインエディタ（Cmd+E）
+- ✏️ **インラインエディタ + 自動保存** — `Cmd+E` で編集モード、入力 → 1500ms で自動保存（0.5.17+）
 - ✅ タスクリスト（チェックボックス）対応
 - 📥 PDF出力（Cmd+P / CLI convert）
 - 🎛️ PDF用CSS・PDF options指定（CLI / Web UI）
@@ -216,6 +218,23 @@ paginate: true
 - **数式**: KaTeX対応（インライン `$...$`、ブロック `$$...$$`）
 - **スピーカーノート**: HTML コメント (`<!-- ... -->`) で記述
 
+## Inline Speaker Notes (PowerPoint-style Split Layout)
+
+Marp ファイルを開くとメイン画面が **上下 2 ペイン** に分かれます。上がスライド、下がスピーカーノートエディタ、間に **ドラッグ可能な仕切り**。Presenter View を別ウィンドウで開かなくても、その場でノート編集できます。
+
+### 使い方
+
+- **仕切りをドラッグ**: スライド / ノートの比率を変更
+- **仕切りをダブルクリック**: 240px (デフォルト) にリセット
+- **完全に閉じる**: 仕切りを画面下まで → ノート 0px (リロードしても復元)
+- **ノートをクリックして入力**: 800ms デバウンスで自動保存。マークダウンソースの `<!-- ... -->` コメントが書き換わります
+- **保存ステータス**: 編集中… / 保存中… / 保存済み / 失敗 (パネル右上に表示)
+- **スライド切替で連動**: ナビ ←/→ または `Space` で active スライドが切り替わるとノートも対応スライドのものに
+
+### Presenter View との関係
+
+別ウィンドウの Presenter View (`P` キー) と **同じノートを共有**します。両方同時に開いて編集することも可能ですが、ETag 楽観ロックで **STALE 検出** されます (片方が STALE になったら後勝ちで上書きせず、ローカルストレージに退避)。
+
 ## Presenter View
 
 Marp ファイルを開いた状態で **`P` キー** を押すと、別ウィンドウで登壇者ビューが起動します。
@@ -259,13 +278,25 @@ Marp ファイルを開いた状態で **`P` キー** を押すと、別ウィ
 | `Space / PageDown` | 次のスライド |
 | `Home / End` | 最初 / 最後のスライド |
 
+## Editor (Edit モード)
+
+`Cmd+E` で **編集モード** に入ると textarea が開きます。**入力 → 1500ms で自動保存**するので、`Cmd+S` を押し忘れて変更が消える心配はありません。
+
+### 自動保存の挙動
+
+- **入力 → 1500ms debounce → POST `/api/file`** → ステータスバー: `Modified → Saving... → Saved! → Ready`
+- **`Cmd+S`** は引き続き使えます。押すと **debounce を待たず即時 flush**
+- **View 切替 / タブ切替 / 別ファイル open** 時に **flush + await** — 保存完了するまで遷移しません
+- **保存失敗時** (ネットワーク断など) はエディタを閉じず Edit モードに留まります。`Error: ...` が表示されたらリトライしてください
+- **Discard-on-close** (✕ で未保存タブを閉じる): 確認ダイアログが出ます。サーバーが既にリクエストを受信した直後の race window では、その時点までの内容がファイルに残る可能性があります（ダイアログに注記あり）
+
 ## Keyboard Shortcuts
 
 | ショートカット | 機能 |
 |---------------|------|
 | Cmd/Ctrl + B | サイドバー表示切替 |
-| Cmd/Ctrl + E | 編集モード切替 |
-| Cmd/Ctrl + S | 保存（編集モード時） |
+| Cmd/Ctrl + E | 編集モード切替 (open: textarea / close: flush + 再 fetch + render) |
+| Cmd/Ctrl + S | **保存を即時 flush** (編集モード時。autosave debounce 中なら待たずに POST) |
 | Cmd/Ctrl + P | PDF出力 |
 | Cmd/Ctrl + W | タブを閉じる |
 | ← / → | スライド移動（Marp時） |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.16",
+  "version": "0.5.18",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {
@@ -59,5 +59,10 @@
   "optionalDependencies": {
     "@marp-team/marp-cli": "^4.0.3",
     "md-to-pdf": "^5.2.5"
+  },
+  "devDependencies": {
+    "@highlightjs/cdn-assets": "^11.11.1",
+    "html2pdf.js": "^0.14.0",
+    "mermaid": "^11.15.0"
   }
 }

package/scripts/sync-vendor.js

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+// Populates src/static/vendor/ with offline copies of the libraries that
+// index.html used to load from CDN. Run manually when bumping versions.
+//
+//   node scripts/sync-vendor.js
+//
+// Source map files are skipped to keep the npm tarball small.
+
+import { cp, mkdir, rm, writeFile } from 'node:fs/promises';
+import { existsSync } from 'node:fs';
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import https from 'node:https';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(__dirname, '..');
+const vendorDir = resolve(repoRoot, 'src/static/vendor');
+
+const TAILWIND_VERSION = '3.4.17';
+const TAILWIND_URL = `https://cdn.tailwindcss.com/${TAILWIND_VERSION}`;
+const TAILWIND_LICENSE_URL = `https://raw.githubusercontent.com/tailwindlabs/tailwindcss/v${TAILWIND_VERSION}/LICENSE`;
+
+async function copyFromNodeModules(relSource, relDest) {
+  const src = resolve(repoRoot, 'node_modules', relSource);
+  const dest = resolve(vendorDir, relDest);
+  if (!existsSync(src)) {
+    throw new Error(`Missing source file: ${src} (did you run npm install?)`);
+  }
+  await mkdir(dirname(dest), { recursive: true });
+  await cp(src, dest);
+  console.log(`copied  ${relSource} -> vendor/${relDest}`);
+}
+
+function downloadToString(url) {
+  return new Promise((resolveDownload, rejectDownload) => {
+    https.get(url, { headers: { 'User-Agent': 'mdv-live sync-vendor' } }, (res) => {
+      if (res.statusCode && res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
+        res.resume();
+        resolveDownload(downloadToString(res.headers.location));
+        return;
+      }
+      if (res.statusCode !== 200) {
+        rejectDownload(new Error(`GET ${url} -> ${res.statusCode}`));
+        res.resume();
+        return;
+      }
+      const chunks = [];
+      res.on('data', (c) => chunks.push(c));
+      res.on('end', () => resolveDownload(Buffer.concat(chunks)));
+      res.on('error', rejectDownload);
+    }).on('error', rejectDownload);
+  });
+}
+
+async function downloadTailwind() {
+  const dest = resolve(vendorDir, 'tailwind.min.js');
+  const body = await downloadToString(TAILWIND_URL);
+  const header = `/*! Tailwind CSS Play CDN ${TAILWIND_VERSION} - downloaded from ${TAILWIND_URL} */\n`;
+  await mkdir(dirname(dest), { recursive: true });
+  await writeFile(dest, header + body.toString('utf8'));
+  console.log(`downloaded tailwind ${TAILWIND_VERSION} -> vendor/tailwind.min.js (${body.length} bytes)`);
+}
+
+async function downloadTailwindLicense() {
+  const dest = resolve(vendorDir, 'licenses/tailwindcss.LICENSE');
+  const body = await downloadToString(TAILWIND_LICENSE_URL);
+  await mkdir(dirname(dest), { recursive: true });
+  await writeFile(dest, body);
+  console.log(`downloaded tailwind LICENSE -> vendor/licenses/tailwindcss.LICENSE (${body.length} bytes)`);
+}
+
+async function main() {
+  if (existsSync(vendorDir)) {
+    await rm(vendorDir, { recursive: true, force: true });
+  }
+  await mkdir(vendorDir, { recursive: true });
+
+  await copyFromNodeModules('@highlightjs/cdn-assets/highlight.min.js', 'highlight.min.js');
+  await copyFromNodeModules('@highlightjs/cdn-assets/styles/github.min.css', 'highlight/github.min.css');
+  await copyFromNodeModules('@highlightjs/cdn-assets/styles/github-dark.min.css', 'highlight/github-dark.min.css');
+  await copyFromNodeModules('mermaid/dist/mermaid.min.js', 'mermaid.min.js');
+  await copyFromNodeModules('html2pdf.js/dist/html2pdf.bundle.min.js', 'html2pdf.bundle.min.js');
+
+  // Third-party license notices. html2pdf.bundle.min.js has an inline pointer
+  // ("For license information please see html2pdf.bundle.min.js.LICENSE.txt")
+  // that would otherwise dangle once the bundle ships in src/static/vendor/.
+  await copyFromNodeModules(
+    'html2pdf.js/dist/html2pdf.bundle.min.js.LICENSE.txt',
+    'html2pdf.bundle.min.js.LICENSE.txt',
+  );
+  await copyFromNodeModules('html2pdf.js/LICENSE', 'licenses/html2pdf.js.LICENSE');
+  await copyFromNodeModules('mermaid/LICENSE', 'licenses/mermaid.LICENSE');
+  await copyFromNodeModules('@highlightjs/cdn-assets/LICENSE', 'licenses/highlight.js.LICENSE');
+
+  await downloadTailwind();
+  await downloadTailwindLicense();
+
+  const readme = `# vendor/
+
+This directory holds offline copies of third-party browser libraries that
+index.html used to load from CDN. Regenerate it with:
+
+    node scripts/sync-vendor.js
+
+Sources and licenses (full text in vendor/licenses/):
+- highlight.min.js / highlight/*.css — @highlightjs/cdn-assets (BSD-3-Clause)
+- mermaid.min.js — mermaid (MIT)
+- html2pdf.bundle.min.js — html2pdf.js (MIT); see also
+  html2pdf.bundle.min.js.LICENSE.txt for embedded notices
+- tailwind.min.js — Tailwind CSS Play CDN ${TAILWIND_VERSION} (MIT)
+`;
+  await writeFile(resolve(vendorDir, 'README.md'), readme);
+  console.log('wrote   vendor/README.md');
+}
+
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});