mdv-live 0.5.19 → 0.5.21

package/CHANGELOG.md

@@ -5,6 +5,72 @@ 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.21] - 2026-05-22
+
+### Fixed — Marp スライドが横長ペインで上下に見切れる
+
+ウィンドウ表示（split モード）で、スライドペインがスライドのアスペクト比
+（16:9）より横長になると、スライド（特に全面画像）の上下が見切れていた。
+
+- 原因: スライドペイン内の `.marpit` に確定した高さがなく、active SVG の
+  `max-height: 100%` が無効化されていた。SVG が「幅 100%」だけで決まるため、
+  ペインが 16:9 より横長だと縦にあふれて上下がクリップされていた
+  （フルスクリーン表示は `.marpit` が `height: 100vh` を持つため影響なし）。
+- 修正: `.marpit` に `height: 100%` を与え、active SVG を
+  `width/height: auto` + `max-width/height: 100%` の真の "contain" に変更。
+  ペインが横長・縦長どちらでもスライド全体が必ず収まる。
+
+### Added — トラックパッドのピンチズーム / パン
+
+Marp スライド表示で、トラックパッドのピンチ操作（macOS では ctrl+wheel、
+マウスの ctrl+スクロールも同様）でスライドを拡大・縮小できるように。
+
+- 二本指スクロールでパン（ペインのネイティブ overflow スクロール）。ピンチと
+  パンは分離（ctrl 付き wheel のみズーム）。
+- カーソル位置を中心にズーム。ズーム範囲は fit（等倍）〜6倍。
+- ダブルクリック / `0` キーで全体表示（fit）に復帰。`=` / `-` キーでも増減。
+- スライド送り・フルスクリーン切替・ペインのリサイズで自動的に fit に追従。
+- ズーム計算（contain fit / クランプ / wheel→zoom）は DOM 非依存の
+  `src/static/lib/marpZoom.js` に分離し、単体テスト（`tests/test-marp-zoom.js`、
+  12 件）を追加。
+
+## [0.5.20] - 2026-05-18
+
+### Fixed — Presenter View のノート編集が毎回 STALE エラー
+
+Presenter View で speaker note を編集すると、毎回一瞬
+`保存失敗: STALE — file changed externally; please reload`（赤）が出る
+バグを修正。同じ deck を mdv のタブ/ウィンドウで 2 つ以上開いていると
+必ず発生していた。
+
+- 原因: Presenter View はノート保存を自前で行わず、`BroadcastChannel` の
+  `edit-note` メッセージで **メインウィンドウに保存を委譲** する。この
+  メッセージは同一ブラウザの **全メインウィンドウ** に届くため、deck を
+  複数ウィンドウで開いていると **全員が同じ `If-Match` で PUT** し、サーバの
+  楽観ロックで 1 つだけ成功、残りが 412 STALE になっていた。負けた側が
+  `note-saved {ok:false, STALE}` を Presenter にブロードキャストし、赤い
+  エラー表示になっていた（保存自体は 1 つ成功するため「一瞬だけ」見える）
+- 各メインウィンドウに一意な `windowId` を付与。`slides` メッセージに
+  `sourceWindowId` を載せ、Presenter は最初に deck を返したウィンドウを
+  saver として固定、`edit-note` に `targetWindowId` を載せて **その 1
+  ウィンドウだけが保存** するようルーティング
+- saver ウィンドウが閉じた/凍結した場合は保存タイムアウト（6 秒）で
+  検知し、`find-saver` 問い合わせで deck を持つ別ウィンドウ（非アクティブ
+  な背景タブ含む）を探して再ピン・再送するフェイルオーバーを実装
+- 各 `edit-note` に一意な `requestId` を付与し `note-saved` で echo。
+  古い保存の ack が新しい保存のフェイルオーバー監視を誤って解除する問題を
+  防止
+- `saveNote` が「対象 Marp タブなし」のとき `note-saved` をブロードキャスト
+  せず return していたため Presenter が `保存中…` のまま固まり得た問題も
+  併せて修正（`code:'NO_DECK'` を返してフェイルオーバーを誘発）
+
+### Verified
+
+- 既存 278 + 新規 3（`tests/test-presenter-channel.js`: `newWindowId` の
+  一意性 / フォールバック / モジュール API）
+- Playwright dogfood: メインウィンドウ 2 枚 + Presenter で speaker note を
+  編集 → STALE が出ないこと、メインウィンドウ 1 枚で回帰がないことを実機確認
+
 ## [0.5.19] - 2026-05-16
 
 ### Fixed — Marp `![bg]` background images

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdv-live",
-  "version": "0.5.19",
+  "version": "0.5.21",
   "description": "Markdown Viewer - File tree + Live preview + Marp support + Hot reload",
   "main": "src/server.js",
   "bin": {

package/src/static/app.js

@@ -1206,12 +1206,146 @@
         }
     };
 
+    // ============================================================
+    // Marp Slide Zoom (trackpad pinch-to-zoom + pan)
+    // ============================================================
+    //
+    // At fit (zoom === 1) the slide is sized entirely by the CSS "contain"
+    // rules so the whole slide — image and all — is always visible. Zooming
+    // past 1 switches the active SVG to explicit pixel dimensions
+    // (fitSize * zoom); the pane's native overflow then lets a two-finger
+    // scroll pan around the enlarged slide. macOS trackpad pinch arrives as a
+    // `wheel` event with `ctrlKey` set, so ctrl+scroll on a mouse zooms too.
+    const MarpZoom = {
+        area: null,
+        zoom: 1,
+        onWheel: null,
+        onDblClick: null,
+        ro: null,
+
+        // Pure zoom math lives in lib/marpZoom.js (globalThis.MDVMarpZoom) so
+        // it can be unit-tested without a DOM. If that script failed to load,
+        // the CSS-only fit still works; we just skip wiring the gestures.
+        lib() { return (typeof globalThis !== 'undefined') ? globalThis.MDVMarpZoom : null; },
+
+        init(area) {
+            this.detach();
+            if (!this.lib()) return;
+            this.area = area;
+            this.zoom = 1;
+            this.onWheel = (e) => {
+                // Plain two-finger scroll is left to the pane so it pans the
+                // zoomed slide natively. Only a pinch (ctrlKey) zooms.
+                if (!e.ctrlKey) return;
+                e.preventDefault();
+                this.zoomTo(this.lib().zoomForWheel(this.zoom, e.deltaY), e.clientX, e.clientY);
+            };
+            // Double-click anywhere on the slide snaps back to fit.
+            this.onDblClick = () => this.reset();
+            area.addEventListener('wheel', this.onWheel, { passive: false });
+            area.addEventListener('dblclick', this.onDblClick);
+            // Re-apply the pixel size when the pane is resized (window resize,
+            // dragging the notes splitter) so a zoomed slide tracks the new
+            // fit instead of freezing at a stale size.
+            if (typeof ResizeObserver !== 'undefined') {
+                this.ro = new ResizeObserver(() => {
+                    if (!this.lib().isFit(this.zoom)) this.zoomTo(this.zoom);
+                });
+                this.ro.observe(area);
+            }
+        },
+
+        detach() {
+            if (this.area && this.onWheel) {
+                this.area.removeEventListener('wheel', this.onWheel);
+                this.area.removeEventListener('dblclick', this.onDblClick);
+            }
+            if (this.ro) { this.ro.disconnect(); this.ro = null; }
+            this.area = null;
+            this.onWheel = null;
+            this.onDblClick = null;
+            this.zoom = 1;
+        },
+
+        activeSvg() {
+            return this.area
+                ? this.area.querySelector('.marpit > svg[data-marpit-svg].active')
+                : null;
+        },
+
+        // Slide dimensions at fit (zoom 1), resolved the same way the CSS
+        // "contain" rule does — so the 1.0 → 1.01 transition doesn't jump.
+        fitSize(svg) {
+            const cs = getComputedStyle(this.area);
+            const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
+            const padY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);
+            const aw = this.area.clientWidth - padX;
+            const ah = this.area.clientHeight - padY;
+            const vb = svg.viewBox && svg.viewBox.baseVal;
+            const ratio = (vb && vb.width) ? vb.height / vb.width : 9 / 16;
+            return this.lib().containFit(aw, ah, ratio);
+        },
+
+        // Apply `z` around a focal point (defaults to the pane centre). The
+        // before/after rects already fold in centring and scroll offsets, so
+        // the point under the cursor stays put as the slide grows.
+        zoomTo(z, focalX, focalY) {
+            const svg = this.activeSvg();
+            if (!svg) return;
+            z = this.lib().clampZoom(z);
+            if (this.lib().isFit(z)) { this.reset(); return; }
+
+            if (focalX == null) {
+                const r = this.area.getBoundingClientRect();
+                focalX = r.left + r.width / 2;
+                focalY = r.top + r.height / 2;
+            }
+            const before = svg.getBoundingClientRect();
+            const relX = before.width ? (focalX - before.left) / before.width : 0.5;
+            const relY = before.height ? (focalY - before.top) / before.height : 0.5;
+
+            this.zoom = z;
+            const fit = this.fitSize(svg);
+            svg.style.width = (fit.w * z) + 'px';
+            svg.style.height = (fit.h * z) + 'px';
+            this.area.classList.add('marp-zoomed');
+
+            const after = svg.getBoundingClientRect();
+            this.area.scrollLeft += (after.left + relX * after.width) - focalX;
+            this.area.scrollTop += (after.top + relY * after.height) - focalY;
+        },
+
+        // Step zoom for keyboard (+/-): dir > 0 zooms in, else out.
+        nudge(dir) {
+            if (!this.lib()) return;
+            this.zoomTo(this.lib().zoomForStep(this.zoom, dir));
+        },
+
+        // Back to fit: clear the pixel sizing on every slide (the active one
+        // may have changed since we zoomed) and hand sizing back to CSS.
+        reset() {
+            this.zoom = 1;
+            if (!this.area) return;
+            this.area.querySelectorAll('.marpit > svg[data-marpit-svg]').forEach(s => {
+                s.style.width = '';
+                s.style.height = '';
+            });
+            this.area.classList.remove('marp-zoomed');
+            this.area.scrollLeft = 0;
+            this.area.scrollTop = 0;
+        }
+    };
+
     // ============================================================
     // Presenter View (separate window with speaker notes)
     // ============================================================
 
     const PresenterView = {
         channel: null,
+        // Unique id for this main window. The presenter echoes it back as
+        // `edit-note.targetWindowId` so that exactly one main window saves,
+        // even when the same deck is open in several windows.
+        windowId: null,
         presenterWindow: null,
         saveQueue: null,            // MDVSaveQueue instance (created in init)
         // Map<path, etag> — own-save chain rebase. We track presenter and
@@ -1246,7 +1380,7 @@
             // can autosave in environments (older browsers / sandboxed
             // webviews) where the Presenter window cannot be opened.
             this.saveQueue = window.MDVSaveQueue.createSaveQueue({
-                saveFn: (path, slideIndex, note, etag, origin) => {
+                saveFn: (path, slideIndex, note, etag, origin, requestId) => {
                     let useEtag = etag;
                     const tab = state.tabs.find((t) => t.path === path);
                     // Pick the "own etag" map that matches this save's
@@ -1259,7 +1393,7 @@
                         : this.lastSavedEtag;
                     const own = ownMap.get(path);
                     if (tab && own && tab.etag === own) useEtag = own;
-                    return this.saveNote(path, slideIndex, note, useEtag, origin);
+                    return this.saveNote(path, slideIndex, note, useEtag, origin, requestId);
                 }
             });
 
@@ -1279,6 +1413,7 @@
             // their channel.postMessage calls (channel === null).
             if (typeof BroadcastChannel !== 'undefined'
                 && window.MDVPresenterChannel) {
+                this.windowId = window.MDVPresenterChannel.newWindowId();
                 this.channel = window.MDVPresenterChannel.create();
                 if (this.channel) {
                     this.channel.addEventListener('message', (e) => {
@@ -1287,11 +1422,38 @@
                             this.broadcastSlides();
                         } else if (msg.type === 'goto') {
                             this.gotoSlide(msg.index);
+                        } else if (msg.type === 'find-saver') {
+                            // Failover discovery: the presenter lost its
+                            // saver and asks who can save `path`. Answer if
+                            // this window holds that deck in ANY tab —
+                            // saveNote() resolves by path, so an inactive
+                            // background tab counts (broadcastSlides only
+                            // reports the active tab and would miss it).
+                            if (msg.path
+                                && state.tabs.some((t) => t.path === msg.path && t.isMarp)) {
+                                this.channel.postMessage({
+                                    type: 'saver-here',
+                                    path: msg.path,
+                                    windowId: this.windowId
+                                });
+                            }
                         } else if (msg.type === 'edit-note') {
                             if (!msg.path) return;
+                            // Route: only the main window the presenter
+                            // picked as its saver performs the save. Without
+                            // this, every main window showing the same deck
+                            // fires its own PUT and all but one collide on
+                            // the optimistic lock → spurious "STALE" in the
+                            // presenter. A missing targetWindowId (older
+                            // presenter build) falls back to handling it so
+                            // saves still work, just without dedup.
+                            if (msg.targetWindowId
+                                && msg.targetWindowId !== this.windowId) {
+                                return;
+                            }
                             this.saveQueue.enqueue(
                                 msg.path, msg.slideIndex, msg.note,
-                                msg.etag || null, 'presenter'
+                                msg.etag || null, 'presenter', msg.requestId
                             );
                         }
                     });
@@ -1317,11 +1479,16 @@
         // next autosave would skip the STALE conflict it should otherwise
         // hit and silently overwrite the inline edit).
         //
+        // `requestId` is the opaque token from the presenter's edit-note;
+        // echoing it back in note-saved lets the presenter match this
+        // result to the exact save it sent (older saves' acks then can't
+        // cancel a newer save's failover timer).
+        //
         // Returns { ok, etag?, normalizedNote?, reason?, code? } so saveQueue
         // can forward the result to enqueue() awaiters (the main-window inline
         // notes panel reads this). The presenter window still gets results via
         // the existing channel.postMessage('note-saved') broadcast.
-        async saveNote(path, slideIndex, note, editTimeEtag, origin) {
+        async saveNote(path, slideIndex, note, editTimeEtag, origin, requestId) {
             const broadcast = (payload) => {
                 // No-op when BroadcastChannel was unavailable at init —
                 // inline autosaves still work because callers also read
@@ -1329,15 +1496,28 @@
                 if (!this.channel) return;
                 this.channel.postMessage({
                     type: 'note-saved',
+                    path,
                     slideIndex,
                     origin: origin || 'unknown',
+                    sourceWindowId: this.windowId,
+                    requestId,
                     ...payload
                 });
             };
 
             const tab = state.tabs.find((t) => t.path === path);
             if (!tab || !tab.isMarp) {
-                return { ok: false, reason: 'No active Marp tab' };
+                // This window no longer holds the deck (tab closed / switched
+                // away). Broadcast a NO_DECK failure so a presenter that
+                // routed here can fail over to another window instead of
+                // hanging on "保存中…" or surfacing a dead-end error.
+                const result = {
+                    ok: false,
+                    code: 'NO_DECK',
+                    reason: 'No active Marp tab'
+                };
+                broadcast(result);
+                return result;
             }
             const ifMatch = editTimeEtag || tab.etag;
             if (!ifMatch) {
@@ -1447,7 +1627,8 @@
                 this.channel.postMessage({
                     type: 'slides',
                     empty: true,
-                    reason: 'main-switched-away'
+                    reason: 'main-switched-away',
+                    sourceWindowId: this.windowId
                 });
                 return;
             }
@@ -1459,7 +1640,8 @@
                 notes: tab.notes || [],
                 notesMultiplicity: tab.notesMultiplicity || [],
                 etag: tab.etag || null,
-                current: marpCurrentSlide
+                current: marpCurrentSlide,
+                sourceWindowId: this.windowId
             });
         },
 
@@ -1471,6 +1653,8 @@
         gotoSlide(index) {
             const slides = elements.content.querySelectorAll('.marpit > svg[data-marpit-svg]');
             if (!slides.length || index < 0 || index >= slides.length) return;
+            // Each slide opens at fit; clear any zoom carried from the last one.
+            MarpZoom.reset();
             slides.forEach((s, i) => s.classList.toggle('active', i === index));
             const panels = elements.content.querySelectorAll(
                 '#marpNotesArea > .speaker-notes-panel'
@@ -1567,6 +1751,12 @@
                 MarpSplitHandle.attach(splitEl, handleEl);
             }
 
+            // Enable trackpad pinch-to-zoom / pan on the slide pane.
+            const slideArea = document.getElementById('marpSlideArea');
+            if (slideArea) {
+                MarpZoom.init(slideArea);
+            }
+
             // Add navigation controls. The nav is appended to .content (NOT
             // marpit) so its `position: fixed` doesn't get clipped by the
             // grid container's overflow:hidden rule.
@@ -1640,6 +1830,8 @@
             );
 
             const showSlide = (index) => {
+                // Each slide opens at fit; clear any zoom from the last one.
+                MarpZoom.reset();
                 slides.forEach((slide, i) => {
                     slide.classList.toggle('active', i === index);
                 });
@@ -1679,6 +1871,11 @@
             const expandIcon = '<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="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>';
             const shrinkIcon = '<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="M9 9V4m0 5H4m5 0L4 4m11 5h5m-5 0V4m0 5l5-5M9 15v5m0-5H4m5 0l-5 5m11-5h5m-5 0v5m0-5l5 5" /></svg>';
             const toggleFullscreen = () => {
+                // Snap back to fit across the transition: the fullscreen and
+                // windowed panes have different sizes, and the fullscreen CSS
+                // owns the fit there, so a leftover pixel zoom would mis-size
+                // the slide. The user can re-pinch on either side.
+                MarpZoom.reset();
                 document.body.classList.toggle('marp-fullscreen');
                 const isFullscreen = document.body.classList.contains('marp-fullscreen');
                 if (fullscreenBtn) {
@@ -1774,6 +1971,17 @@
                     // shortcut and must not also open the presenter view.
                     e.preventDefault();
                     PresenterView.open();
+                } else if ((e.key === '+' || e.key === '=') && !e.metaKey && !e.ctrlKey) {
+                    // Keyboard zoom (centre-anchored) mirrors the pinch gesture.
+                    // Skip Cmd/Ctrl which the browser owns for page zoom.
+                    e.preventDefault();
+                    MarpZoom.nudge(1);
+                } else if ((e.key === '-' || e.key === '_') && !e.metaKey && !e.ctrlKey) {
+                    e.preventDefault();
+                    MarpZoom.nudge(-1);
+                } else if (e.key === '0' && !e.metaKey && !e.ctrlKey) {
+                    e.preventDefault();
+                    MarpZoom.reset();
                 } else if (e.key === 'Escape') {
                     e.preventDefault();
                     if (document.body.classList.contains('marp-fullscreen')) {
@@ -1791,6 +1999,7 @@
             // 800ms save timer doesn't fire after the editor element is gone.
             InlineNotesPanel.detach();
             MarpSplitHandle.detach();
+            MarpZoom.detach();
             elements.content.classList.remove('marp-viewer');
             document.body.classList.remove('marp-fullscreen');
             if (marpKeyHandler) {

package/src/static/index.html

@@ -181,6 +181,7 @@
     <script src="/static/lib/apiClient.js"></script>
     <script src="/static/lib/saveQueue.js"></script>
     <script src="/static/lib/tabRegistry.js"></script>
+    <script src="/static/lib/marpZoom.js"></script>
     <script src="/static/app.js"></script>
 </body>
 </html>

package/src/static/lib/marpZoom.js

@@ -0,0 +1,84 @@
+/**
+ * Pure math for the Marp slide zoom (src/static/app.js → MarpZoom).
+ *
+ * Imported from a `<script>` tag (no module loader), so the functions are
+ * exposed on `globalThis.MDVMarpZoom`. Kept DOM-free so the contain/clamp
+ * logic — the part that decides whether the whole slide stays visible — can
+ * be unit-tested without a browser (see tests/test-marp-zoom.js).
+ */
+(function () {
+  'use strict';
+
+  const ZOOM_MIN = 1;
+  const ZOOM_MAX = 6;
+
+  // Per-wheel-delta zoom sensitivity. Pinch deltas are small and frequent;
+  // the exponential keeps each step proportional so the gesture feels even
+  // across the whole range instead of accelerating near the top. Tuned for a
+  // snappy pinch (a 120-delta notch ≈ +62%; was 0.0015 ≈ +20%, 0.0025 ≈ +35%).
+  const WHEEL_FACTOR = 0.004;
+
+  // Keyboard +/- step ratio (zoom in / zoom out).
+  const STEP_IN = 1.25;
+  const STEP_OUT = 0.8;
+
+  /**
+   * "Contain" fit: the largest w×h with aspect `ratio` (= height/width) that
+   * fits inside areaW×areaH. Mirrors the CSS `max-width/height:100%` +
+   * `width/height:auto` resolution so the JS-driven zoom (≥1) starts exactly
+   * where the CSS fit (=1) leaves off — no jump at the 1.0 boundary.
+   *
+   * @param {number} areaW  available content width (px)
+   * @param {number} areaH  available content height (px)
+   * @param {number} ratio  slide height / slide width (e.g. 720/1280)
+   * @returns {{w:number,h:number}} fitted slide size, never below 1px
+   */
+  function containFit(areaW, areaH, ratio) {
+    if (!(areaW > 0) || !(areaH > 0) || !(ratio > 0)) {
+      return { w: 1, h: 1 };
+    }
+    let w = areaW;
+    let h = areaW * ratio;
+    if (h > areaH) {
+      h = areaH;
+      w = areaH / ratio;
+    }
+    return { w: Math.max(1, w), h: Math.max(1, h) };
+  }
+
+  /** Clamp a zoom level to [ZOOM_MIN, ZOOM_MAX]. */
+  function clampZoom(z) {
+    if (!Number.isFinite(z)) return ZOOM_MIN;
+    return Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, z));
+  }
+
+  /**
+   * Next zoom level for a wheel/pinch delta. Negative deltaY (pinch open /
+   * scroll up) zooms in. Result is already clamped.
+   */
+  function zoomForWheel(current, deltaY) {
+    return clampZoom(current * Math.exp(-deltaY * WHEEL_FACTOR));
+  }
+
+  /** Next zoom level for a keyboard step. dir > 0 zooms in, else out. */
+  function zoomForStep(current, dir) {
+    return clampZoom(current * (dir > 0 ? STEP_IN : STEP_OUT));
+  }
+
+  /** True when a zoom level is effectively the fit (no pixel sizing needed). */
+  function isFit(z) {
+    return z <= ZOOM_MIN + 0.001;
+  }
+
+  if (typeof globalThis !== 'undefined') {
+    globalThis.MDVMarpZoom = {
+      ZOOM_MIN,
+      ZOOM_MAX,
+      containFit,
+      clampZoom,
+      zoomForWheel,
+      zoomForStep,
+      isFit,
+    };
+  }
+})();

package/src/static/lib/presenterChannel.js

@@ -8,15 +8,33 @@
  * Message types (discriminated by `type`):
  *
  *   main → presenter
- *     { type: 'slides', path, html, css, etag, notes, notesMultiplicity, current }
- *     { type: 'slides', empty: true, reason }                    ← clear / no-deck
+ *     { type: 'slides', path, html, css, etag, notes, notesMultiplicity,
+ *       current, sourceWindowId }
+ *     { type: 'slides', empty: true, reason, sourceWindowId }   ← clear / no-deck
  *     { type: 'index', index }
- *     { type: 'note-saved', slideIndex, ok, etag?, normalizedNote?, code?, reason? }
+ *     { type: 'note-saved', path, slideIndex, ok, etag?, normalizedNote?,
+ *       code?, reason?, origin, sourceWindowId, requestId }
+ *     { type: 'saver-here', path, windowId }                    ← failover reply
  *
  *   presenter → main
  *     { type: 'request-slides' }
  *     { type: 'goto', index }
- *     { type: 'edit-note', path, etag, slideIndex, note }
+ *     { type: 'edit-note', path, etag, slideIndex, note, requestId,
+ *       targetWindowId }
+ *     { type: 'find-saver', path }                              ← failover query
+ *
+ * Window routing: every main window has a unique `windowId`. Each `slides`
+ * message carries the broadcasting window's id as `sourceWindowId`; the
+ * presenter pins the first one that can serve the deck and echoes it back as
+ * `edit-note.targetWindowId`. Only that one main window performs the save.
+ * Without this, N main windows showing the same deck each fire their own PUT
+ * and all but one collide on the optimistic lock → spurious "STALE" errors.
+ *
+ * Failover: if the pinned saver stops answering, the presenter broadcasts
+ * `find-saver`; any main window holding the deck (active OR background tab)
+ * replies `saver-here` and the presenter re-pins it. Each `edit-note` carries
+ * a unique `requestId` echoed back in `note-saved` so the presenter matches a
+ * result to the exact save that produced it.
  */
 (function () {
   'use strict';
@@ -27,7 +45,17 @@
     return new BroadcastChannel(CHANNEL_NAME);
   }
 
+  // Per-window identifier used to route presenter saves to a single main
+  // window. crypto.randomUUID is available on localhost (a secure context);
+  // the fallback keeps things working in any odd environment.
+  function newWindowId() {
+    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+      return crypto.randomUUID();
+    }
+    return 'w-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 10);
+  }
+
   if (typeof globalThis !== 'undefined') {
-    globalThis.MDVPresenterChannel = { CHANNEL_NAME, create };
+    globalThis.MDVPresenterChannel = { CHANNEL_NAME, create, newWindowId };
   }
 })();

package/src/static/lib/saveQueue.js

@@ -11,10 +11,12 @@
  * - Crucially, coalescing is scoped per origin: an inline save and a
  *   presenter save for the same slide do NOT replace each other. Both run
  *   serially so neither editor silently loses a draft.
- * - `saveFn(path, slideIndex, note, etag, origin)` is supplied by the
- *   caller; `origin` is an optional tag (e.g. 'presenter' / 'inline') the
+ * - `saveFn(path, slideIndex, note, etag, origin, requestId)` is supplied by
+ *   the caller; `origin` is an optional tag (e.g. 'presenter' / 'inline') the
  *   queue uses for keying and also forwards verbatim so saveFn can route
- *   notifications back to the right editor.
+ *   notifications back to the right editor. `requestId` is an optional
+ *   opaque token forwarded verbatim so a caller can correlate the save's
+ *   result with the request that triggered it.
  * - enqueue() returns a Promise that resolves with the saveFn's result (or a
  *   COALESCED sentinel). Existing callers that ignore the return value or
  *   skip the origin argument keep working unchanged.
@@ -32,7 +34,7 @@
     /** @type {Map<string, { pending: Map<string, {slideIndex:number, note:string, etag:string|null, origin:string|undefined, resolve:Function}>, isDraining: boolean }>} */
     const queue = new Map();
 
-    function enqueue(path, slideIndex, note, etag, origin) {
+    function enqueue(path, slideIndex, note, etag, origin, requestId) {
       return new Promise((resolve) => {
         let entry = queue.get(path);
         if (!entry) {
@@ -44,7 +46,7 @@
         if (existing) {
           existing.resolve({ ok: false, reason: 'COALESCED' });
         }
-        entry.pending.set(key, { slideIndex, note, etag, origin, resolve });
+        entry.pending.set(key, { slideIndex, note, etag, origin, requestId, resolve });
         if (!entry.isDraining) drain(path);
       });
     }
@@ -62,7 +64,8 @@
           let result;
           try {
             result = await saveFn(
-              path, payload.slideIndex, payload.note, payload.etag, payload.origin
+              path, payload.slideIndex, payload.note, payload.etag,
+              payload.origin, payload.requestId
             );
           } catch (err) {
             console.error('saveQueue saveFn error', err);

package/src/static/presenter.html

@@ -287,6 +287,33 @@
   let deckPath = '';
   let saveTimer = null;
 
+  // Window-routing + failover state: the presenter delegates saving to
+  // ONE main window (saverWindowId — the first that can serve this deck).
+  // saveAckTimer detects when that window stops answering. inflightSave /
+  // pendingSave hold a FROZEN copy of the edit ({path, slideIndex, note,
+  // etag, requestId}) so a failover resends the original edit, not
+  // whatever the editor shows after a later blur / slide navigation.
+  let saverWindowId = null;
+  let saveAckTimer = null;
+  let findSaverTimer = null; // bounds the wait for a find-saver reply
+  let inflightSave = null;   // routed, awaiting ack | null
+  let pendingSave = null;    // deferred until a saver is (re)pinned | null
+  const SAVE_ACK_TIMEOUT_MS = 6000;
+  const FIND_SAVER_TIMEOUT_MS = 3000;
+
+  // Each edit-note carries a globally-unique requestId so its note-saved
+  // ack matches the exact save that produced it — an older save's ack
+  // must never clear a newer save's failover timer. The presenterId
+  // prefix keeps ids distinct across multiple presenter windows.
+  const presenterId = (window.MDVPresenterChannel && window.MDVPresenterChannel.newWindowId)
+    ? window.MDVPresenterChannel.newWindowId()
+    : ('p-' + Date.now().toString(36) + Math.random().toString(36).slice(2, 8));
+  let saveRequestSeq = 0;
+  function newRequestId() {
+    saveRequestSeq += 1;
+    return presenterId + ':' + saveRequestSeq;
+  }
+
   const notesBanner = document.getElementById('notesBanner');
 
   function applyCss(css) {
@@ -384,21 +411,16 @@
 
   function loadSlides(payload) {
     if (payload.empty) {
-      // Main window switched to a non-Marp tab or closed the deck — clear
-      // everything so the user can't keep editing notes that would land in
-      // the wrong file. saveQueue retains nothing because path mismatches.
-      slidesHtml = '';
-      cssText = '';
-      applyCss('');
+      // Once a deck is shown, the presenter never blanks itself on an
+      // `empty`: with multiple main windows `request-slides` is global and
+      // any window on a non-Marp tab — including the pinned saver, which
+      // can still save the deck from a background tab — broadcasts `empty`.
+      // Blanking mid-presentation on that noise is wrong; keep the current
+      // slides and let save routing / failover handle reachability. Only
+      // an `empty` arriving before any deck has loaded shows the hint.
+      if (deckPath !== '') return;
       fillStage(stageCurrent, '<div class="empty-state">メイン画面で Marp ファイルを開いてください。</div>');
       fillStage(stageNext, '');
-      notes = [];
-      notesMultiplicity = [];
-      deckEtag = null;
-      deckPath = '';
-      slideCount = 0;
-      counter.textContent = '– / –';
-      setNotesText('');
       applyReadOnlyState();
       return;
     }
@@ -416,7 +438,20 @@
     notes = Array.isArray(payload.notes) ? payload.notes : [];
     notesMultiplicity = Array.isArray(payload.notesMultiplicity) ? payload.notesMultiplicity : [];
     deckEtag = payload.etag || null;
+    // Detect a deck switch BEFORE updating deckPath: the presenter window
+    // can be reused by another main window for another deck, and the old
+    // saver may not hold the new deck (→ "No active Marp tab", no retry).
+    const deckChanged = !!payload.path && payload.path !== deckPath;
     deckPath = payload.path || deckPath;
+    // Pin the window serving this deck as our saver, so edit-note saves
+    // route to exactly one window (no duplicate PUTs). A non-empty
+    // `slides` proves the sender holds the deck. Re-pin on a deck switch
+    // (the presenter window can be reused by another main window).
+    // Failover (saver gone) is handled separately via find-saver /
+    // saver-here, which also discovers inactive background deck tabs.
+    if (payload.sourceWindowId && (saverWindowId === null || deckChanged)) {
+      saverWindowId = payload.sourceWindowId;
+    }
     slideCount = stageCurrent.querySelectorAll('.marpit > svg[data-marpit-svg]').length;
     render(typeof payload.current === 'number' ? payload.current : currentIndex);
   }
@@ -451,24 +486,97 @@
     }
   }
 
+  // Broadcast a find-saver query for `path` and bound the wait: a deck
+  // open in ANY window's tab (active OR background) answers `saver-here`;
+  // if none does within the timeout the deck has no reachable window, so
+  // surface an honest error instead of spinning on 保存中… forever.
+  function requestSaver(path) {
+    channel.postMessage({ type: 'find-saver', path });
+    if (findSaverTimer !== null) clearTimeout(findSaverTimer);
+    findSaverTimer = setTimeout(() => {
+      findSaverTimer = null;
+      if (pendingSave !== null) {
+        pendingSave = null;
+        setSaveStatus('保存失敗: 保存先ウィンドウが見つかりません', 'err');
+      }
+    }, FIND_SAVER_TIMEOUT_MS);
+  }
+
+  // Re-pin a live saver and resend `payload` (the exact edit that could
+  // not be delivered). Used when the saver window stops answering or no
+  // longer holds the deck.
+  function failOver(payload) {
+    if (saveAckTimer !== null) {
+      clearTimeout(saveAckTimer);
+      saveAckTimer = null;
+    }
+    saverWindowId = null;
+    inflightSave = null;
+    if (!payload) return;
+    pendingSave = payload;
+    requestSaver(payload.path);
+  }
+
+  // The saver window never acknowledged our edit-note (it was closed or
+  // frozen). Fail over, resending the exact edit that timed out.
+  function onSaveAckTimeout() {
+    saveAckTimer = null;
+    failOver(inflightSave);
+  }
+
   function sendNoteSave() {
-    // Use the slide / deck / etag captured when the user started editing —
-    // not the live values, which can change under us if the main window
-    // navigates, switches tabs, or receives a watcher update during the
-    // debounce. Sending the live etag would let a watcher-refreshed etag
-    // pass If-Match against the post-edit deck.
+    // Freeze the slide / deck / etag captured when the user started
+    // editing — not the live values, which can change under us if the
+    // main window navigates, switches tabs, or receives a watcher update
+    // during the debounce. The frozen payload also lets a failover resend
+    // the exact edit even after a later blur / slide navigation.
     const idx = editingSlideIndex >= 0 ? editingSlideIndex : currentIndex;
-    const path = editingPath || deckPath;
-    const etag = editingEtag || deckEtag;
     const value = getNotesText();
     notes[idx] = value.trim();
+    postEditNote({
+      path: editingPath || deckPath,
+      slideIndex: idx,
+      note: value,
+      etag: editingEtag || deckEtag
+    });
+  }
+
+  // Route one frozen edit payload to the pinned saver, or defer it until
+  // a saver is (re)pinned.
+  function postEditNote(payload) {
     setSaveStatus('保存中…');
+
+    // No live saver pinned yet (first edit before slides arrived, or the
+    // previous saver window went away). Routing an edit-note without a
+    // targetWindowId would let EVERY main window save it and collide on
+    // the optimistic lock — the exact bug this routing fixes. Instead ask
+    // who can serve this deck; the saver-here handler re-pins and resends.
+    if (saverWindowId === null) {
+      pendingSave = payload;
+      requestSaver(payload.path);
+      return;
+    }
+
+    // Fresh requestId per actual send: a failover resend must NOT reuse
+    // the timed-out original's id, or that original's late ack would be
+    // mistaken for the resend's ack.
+    inflightSave = {
+      path: payload.path,
+      slideIndex: payload.slideIndex,
+      note: payload.note,
+      etag: payload.etag,
+      requestId: newRequestId()
+    };
+    if (saveAckTimer !== null) clearTimeout(saveAckTimer);
+    saveAckTimer = setTimeout(onSaveAckTimeout, SAVE_ACK_TIMEOUT_MS);
     channel.postMessage({
       type: 'edit-note',
-      path,
-      etag,
-      slideIndex: idx,
-      note: value
+      path: inflightSave.path,
+      etag: inflightSave.etag,
+      slideIndex: inflightSave.slideIndex,
+      note: inflightSave.note,
+      requestId: inflightSave.requestId,
+      targetWindowId: saverWindowId
     });
   }
 
@@ -533,7 +641,56 @@
       // the new etag came from our own successful save.
     } else if (msg.type === 'index') {
       render(msg.index);
+    } else if (msg.type === 'saver-here') {
+      // A window answered our find-saver query. Pin it and resend the
+      // deferred edit — but only if it serves the exact deck that edit
+      // targets (find-saver is path-scoped, yet guard defensively). The
+      // first answer wins; later answers find pendingSave already null.
+      if (pendingSave !== null
+          && msg.windowId
+          && msg.path === pendingSave.path) {
+        if (findSaverTimer !== null) {
+          clearTimeout(findSaverTimer);
+          findSaverTimer = null;
+        }
+        saverWindowId = msg.windowId;
+        const queued = pendingSave;
+        pendingSave = null;
+        postEditNote(queued);
+      }
     } else if (msg.type === 'note-saved') {
+      // Is this the answer to OUR routed save? Match on the unique
+      // requestId so an older save's ack can't clear a newer save's
+      // failover timer, and a foreign save (e.g. an inline edit) for the
+      // same slide is ignored — inline saves carry no requestId.
+      const isOwnAck = inflightSave !== null
+        && msg.requestId != null
+        && msg.requestId === inflightSave.requestId;
+      // A note-saved that carries a requestId but isn't our current
+      // inflight save is a superseded / timed-out save's late ack — drop
+      // it so it can't overwrite status / backup / editingEtag for the
+      // current edit. requestId-less acks (inline edits) still fall
+      // through to the observer logic below.
+      if (!isOwnAck && msg.requestId != null) return;
+      if (isOwnAck) {
+        // The pinned saver no longer holds this deck (tab closed / switched
+        // away). It IS alive, but cannot save — fail over to a window that
+        // can, resending the same edit, instead of surfacing an error.
+        if (msg.code === 'NO_DECK') {
+          failOver(inflightSave);
+          return;
+        }
+        // A real answer (success OR genuine STALE) — stop the failover
+        // timer and let the status handling below run.
+        if (saveAckTimer !== null) {
+          clearTimeout(saveAckTimer);
+          saveAckTimer = null;
+        }
+        inflightSave = null;
+      }
+      // Ignore results for a different deck — a second presenter window,
+      // or the main window having switched decks mid-flight.
+      if (msg.path && deckPath && msg.path !== deckPath) return;
       const targetIdx = editingSlideIndex >= 0 ? editingSlideIndex : currentIndex;
       if (msg.slideIndex !== targetIdx) return;
       // Only OUR own successful saves should advance editingEtag. The

package/src/static/styles.css

@@ -1080,24 +1080,38 @@ body.marp-fullscreen .marpit > svg[data-marpit-svg] {
 .marp-slide-area {
     overflow: auto;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    /* `safe` keeps the slide reachable when zoomed larger than the pane:
+       plain `center` would push the overflowing top/left out of the scroll
+       range so you could never scroll back to them. */
+    align-items: safe center;
+    justify-content: safe center;
     padding: 20px;
     min-height: 0;
 }
 
+/* The pane is the trackpad-zoom focus target. Pinch (ctrl+wheel) zooms the
+   slide; two-finger scroll then pans via the pane's native overflow. */
+.marp-slide-area.marp-zoomed { cursor: grab; }
+.marp-slide-area.marp-zoomed.marp-panning { cursor: grabbing; }
+
 .marp-slide-area .marpit {
+    /* Definite height (the pane's height is definite) so the active SVG's
+       `max-height: 100%` actually clamps — without it the SVG was sized by
+       width alone and overflowed vertically on wide/short panes. */
     width: 100%;
-    max-height: 100%;
+    height: 100%;
     display: flex;
-    align-items: center;
-    justify-content: center;
+    align-items: safe center;
+    justify-content: safe center;
 }
 
 .marp-slide-area .marpit > svg[data-marpit-svg] {
     display: none;
+    /* width:auto + height:auto + the two max-* caps give "contain": the SVG
+       (intrinsic 16:9 viewBox) scales down to fit BOTH pane dimensions. */
     max-width: 100%;
     max-height: 100%;
+    width: auto;
     height: auto;
     box-shadow: 0 4px 20px rgba(0,0,0,0.15);
     border-radius: 4px;
@@ -1107,6 +1121,14 @@ body.marp-fullscreen .marpit > svg[data-marpit-svg] {
     display: block;
 }
 
+/* When zoomed past fit, MarpZoom sets explicit px width/height on the active
+   SVG. The caps must be lifted or they'd clamp it back to the pane size. */
+.marp-slide-area.marp-zoomed .marpit { width: auto; height: auto; }
+.marp-slide-area.marp-zoomed .marpit > svg[data-marpit-svg].active {
+    max-width: none;
+    max-height: none;
+}
+
 .marp-split-handle {
     cursor: row-resize;
     background: var(--border);