mdv-live 0.5.15 → 0.5.17

package/src/static/app.js

@@ -13,9 +13,17 @@
         THEME: 'mdv-theme',
         SIDEBAR_WIDTH: 'mdv-sidebar-width',
         PDF_STYLE_PATH: 'mdv-pdf-style-path',
-        PDF_OPTIONS_PATH: 'mdv-pdf-options-path'
+        PDF_OPTIONS_PATH: 'mdv-pdf-options-path',
+        NOTES_ROW_PX: 'mdv-notes-row-px',
+        NOTES_STALE_BACKUP: 'mdv-notes-stale-backup'
     };
 
+    const NOTES_AUTOSAVE_DEBOUNCE_MS = 800;
+    const NOTES_ROW_DEFAULT_PX = 240;
+    const NOTES_ROW_MIN_PX = 0;
+    const SPLIT_HANDLE_PX = 8;
+    const SLIDE_ROW_MIN_PX = 80;
+
     const HLJS_THEMES = {
         light: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css',
         dark: 'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css'
@@ -500,6 +508,29 @@
                 if (data.etag) tab.etag = data.etag;
                 if (data.lineEnding) tab.lineEnding = data.lineEnding;
                 if (typeof data.hasBom !== 'undefined') tab.hasBom = !!data.hasBom;
+
+                // If the user is mid-edit in the inline notes panel for THIS
+                // deck, suppress the re-render so their cursor isn't yanked
+                // out of contenteditable mid-keystroke. tab.{notes,etag,…}
+                // have already been refreshed above so the next render after
+                // blur will show fresh data; the presenter window still gets
+                // the broadcast and updates immediately because that path
+                // has its own `if (!editing)` guard.
+                //
+                // We mark a deferred render on the tab so that when the user
+                // blurs the editor (handleFocusOut → render hook), the slide
+                // SVGs catch up to whatever external edit landed during the
+                // edit session. Without this, an external write to the same
+                // file leaves the slide pane stale until the next full
+                // navigation.
+                if (InlineNotesPanel.editing
+                    && InlineNotesPanel.editingPath === tab.path) {
+                    tab.pendingRender = true;
+                    PresenterView.broadcastSlides();
+                    return;
+                }
+
+                tab.pendingRender = false;
                 ContentRenderer.renderMarp(data.content, tab.css);
                 PresenterView.broadcastSlides();
             } else {
@@ -690,6 +721,491 @@
     let marpCurrentSlide = 0;
     let marpKeyHandler = null;
 
+    // ============================================================
+    // Inline Speaker Notes Panel (under each Marp slide in the main view)
+    // ============================================================
+
+    // contenteditable inserts <div>/<br> nodes for line breaks; textContent
+    // flattens those without separators. Walk the DOM and emit \n at block
+    // boundaries so two-line edits arrive as `line1\nline2`. Mirrors the
+    // implementation in presenter.html.
+    function readEditableText(el) {
+        let out = '';
+        function walk(node) {
+            if (node.nodeType === Node.TEXT_NODE) {
+                out += node.textContent;
+                return;
+            }
+            if (node.nodeType !== Node.ELEMENT_NODE) return;
+            const tag = node.tagName;
+            if (tag === 'BR') { out += '\n'; return; }
+            const isBlock = tag === 'DIV' || tag === 'P' || tag === 'LI';
+            if (isBlock && out && !out.endsWith('\n')) out += '\n';
+            for (const child of node.childNodes) walk(child);
+            if (isBlock && !out.endsWith('\n')) out += '\n';
+        }
+        for (const child of el.childNodes) walk(child);
+        return out.replace(/\n+$/, '');
+    }
+
+    const InlineNotesPanel = {
+        attached: false,
+        editing: false,
+        editingSlideIndex: -1,
+        editingPath: '',
+        editingEtag: null,
+        saveTimer: null,
+        // Auto-clear save status text after a delay (one timer per slide).
+        statusClearTimers: new Map(),
+
+        // Build a panel for one slide. Caller appends it to the notes area.
+        // The editor's text is set via textContent (NOT innerHTML) so a note
+        // containing HTML-like characters can never inject markup. Status
+        // (保存中… / 保存済み / 失敗) floats in the panel's top-right via CSS
+        // — no header chrome eats vertical space.
+        buildPanel(slideIndex, noteText, multiplicity, hasEtag) {
+            const canEdit = hasEtag && multiplicity <= 1;
+            const panel = document.createElement('aside');
+            panel.className = 'speaker-notes-panel';
+            panel.dataset.slideIndex = String(slideIndex);
+            panel.innerHTML = `
+                <span class="speaker-notes-status" data-role="status" aria-live="polite"></span>
+                <div class="speaker-notes-banner" data-role="banner" hidden></div>
+                <div class="speaker-notes-editor"
+                     data-role="editor"
+                     data-placeholder="（ノートなし）"
+                     spellcheck="false"
+                     role="textbox"
+                     aria-label="Speaker notes for slide ${slideIndex + 1}"></div>
+            `;
+            const editor = panel.querySelector('[data-role="editor"]');
+            editor.textContent = noteText || '';
+            editor.contentEditable = canEdit ? 'true' : 'false';
+
+            if (!canEdit) {
+                const banner = panel.querySelector('[data-role="banner"]');
+                let msg = '';
+                if (!hasEtag) {
+                    msg = 'このファイルは現在解析できないため自動保存は無効です。';
+                } else if (multiplicity > 1) {
+                    msg = 'このスライドは複数のコメントを含むため自動保存を無効化しています（markdown editor で直接編集してください）。';
+                }
+                banner.textContent = msg;
+                banner.hidden = false;
+            }
+            return panel;
+        },
+
+        // Attach event delegation to the content area. Idempotent: calling
+        // attach() twice is a no-op until detach() runs.
+        attach() {
+            if (this.attached) return;
+            elements.content.addEventListener('focusin', this.handleFocusIn);
+            elements.content.addEventListener('focusout', this.handleFocusOut);
+            elements.content.addEventListener('input', this.handleInput);
+            elements.content.addEventListener('keydown', this.handleKeydown);
+            this.attached = true;
+        },
+
+        detach() {
+            // Always run flush even if attached=false: a previous detach call
+            // already removed the listeners but the editor could still be in
+            // the DOM with a pending timer (race during fast tab switching).
+            this.flush();
+            if (!this.attached) return;
+            elements.content.removeEventListener('focusin', this.handleFocusIn);
+            elements.content.removeEventListener('focusout', this.handleFocusOut);
+            elements.content.removeEventListener('input', this.handleInput);
+            elements.content.removeEventListener('keydown', this.handleKeydown);
+            this.attached = false;
+            this.statusClearTimers.forEach((t) => clearTimeout(t));
+            this.statusClearTimers.clear();
+            this.editing = false;
+            this.editingSlideIndex = -1;
+            this.editingPath = '';
+            this.editingEtag = null;
+        },
+
+        flush() {
+            if (this.saveTimer) {
+                clearTimeout(this.saveTimer);
+                this.saveTimer = null;
+                this.sendSave();
+            }
+        },
+
+        scheduleSave(editor) {
+            this.setStatus(editor, '編集中…', '');
+            if (this.saveTimer) clearTimeout(this.saveTimer);
+            this.saveTimer = setTimeout(() => {
+                this.saveTimer = null;
+                this.sendSave();
+            }, NOTES_AUTOSAVE_DEBOUNCE_MS);
+        },
+
+        async sendSave() {
+            const idx = this.editingSlideIndex;
+            const path = this.editingPath;
+            const etag = this.editingEtag;
+            if (idx < 0 || !path || !etag) return;
+            const editor = this.findEditor(idx);
+            if (!editor) return;
+            const value = readEditableText(editor);
+            this.setStatus(editor, '保存中…', '');
+
+            // Use the same saveQueue as the presenter window so concurrent
+            // edits to the same deck are serialized. The Promise resolves
+            // with the saveFn result (saveNote returns {ok, etag, reason}).
+            const saveQueue = PresenterView.saveQueue;
+            if (!saveQueue) {
+                this.setStatus(editor, '保存失敗: queue 未初期化', 'err');
+                return;
+            }
+            // Tag the request as 'inline' so the Presenter window's
+            // note-saved handler ignores it (otherwise an inline save
+            // would overwrite the Presenter's pinned editingEtag and
+            // skip the STALE conflict its next autosave should hit).
+            const result = await saveQueue.enqueue(path, idx, value, etag, 'inline');
+
+            // The user may have switched tabs while the save was in flight.
+            // Only touch DOM/UI for the deck we actually saved against —
+            // findEditor() runs against elements.content which always shows
+            // the active tab, so we must verify the active tab still matches
+            // `path` before treating the editor as ours. Otherwise a status
+            // string for deck A would land on deck B's panel and a STALE
+            // backup could be filled with text from the wrong deck.
+            const activeTab = state.tabs[state.activeTabIndex];
+            const activeTabMatches = !!(activeTab && activeTab.path === path);
+            const liveEditor = activeTabMatches ? this.findEditor(idx) : null;
+            if (!result || result.reason === 'COALESCED') {
+                // A newer enqueue superseded us. The newer one will update
+                // status when it resolves; don't overwrite "保存中…" here.
+                return;
+            }
+            if (result.ok) {
+                if (this.editing
+                    && this.editingPath === path
+                    && this.editingSlideIndex === idx
+                    && result.etag) {
+                    this.editingEtag = result.etag;
+                }
+                if (liveEditor) {
+                    // Only show "保存済み" when the live editor still
+                    // matches what we just saved AND no newer autosave is
+                    // pending. Otherwise the user has already typed more
+                    // and the success message would be a lie about which
+                    // text is actually durable; leave the status as-is so
+                    // the upcoming save's "編集中…/保存中…/保存済み" can
+                    // describe the truth.
+                    const liveText = readEditableText(liveEditor);
+                    if (liveText === value && !this.saveTimer) {
+                        this.setStatus(liveEditor, '保存済み', 'ok', 1800);
+                    }
+                }
+            } else {
+                const isStale = result.code === 'STALE'
+                    || (typeof result.reason === 'string' && result.reason.indexOf('STALE') === 0);
+                if (isStale) {
+                    // Back up the in-progress text so the user can recover
+                    // after reloading. Mirror presenter.html behavior. Use
+                    // the captured `value` (text we tried to save) — never
+                    // read from the live DOM here, because by the time we
+                    // resolve the user may have switched tabs and the
+                    // editor in the DOM belongs to a different deck.
+                    try {
+                        if (value) {
+                            const key = STORAGE_KEYS.NOTES_STALE_BACKUP + ':' + path + '#' + idx;
+                            localStorage.setItem(key, value);
+                        }
+                    } catch (e) { /* ignore */ }
+                }
+                const reason = result.reason || 'Save failed';
+                if (liveEditor) {
+                    // STALE messages stay until the next edit; transient
+                    // errors auto-clear after 5s.
+                    this.setStatus(liveEditor, '保存失敗: ' + reason, 'err', isStale ? 0 : 5000);
+                }
+            }
+        },
+
+        findEditor(slideIndex) {
+            return elements.content.querySelector(
+                `.speaker-notes-panel[data-slide-index="${slideIndex}"] [data-role="editor"]`
+            );
+        },
+
+        setStatus(editor, text, kind, autoClearMs) {
+            const panel = editor.closest('.speaker-notes-panel');
+            if (!panel) return;
+            const status = panel.querySelector('[data-role="status"]');
+            if (!status) return;
+            status.textContent = text || '';
+            status.classList.remove('ok', 'err');
+            if (kind) status.classList.add(kind);
+
+            const idx = Number(panel.dataset.slideIndex);
+            const prev = this.statusClearTimers.get(idx);
+            if (prev) clearTimeout(prev);
+            this.statusClearTimers.delete(idx);
+            if (autoClearMs && autoClearMs > 0) {
+                const t = setTimeout(() => {
+                    if (status.textContent === text) {
+                        status.textContent = '';
+                        status.classList.remove('ok', 'err');
+                    }
+                    this.statusClearTimers.delete(idx);
+                }, autoClearMs);
+                this.statusClearTimers.set(idx, t);
+            }
+        },
+
+        // ----- Event handlers (arrow funcs to keep `this` bound) -----------
+
+        handleFocusIn: (event) => {
+            const editor = event.target.closest('[data-role="editor"]');
+            if (!editor) return;
+            const panel = editor.closest('.speaker-notes-panel');
+            if (!panel) return;
+            if (editor.contentEditable !== 'true') return;
+            const tab = state.tabs[state.activeTabIndex];
+            if (!tab || !tab.isMarp) return;
+            InlineNotesPanel.editing = true;
+            InlineNotesPanel.editingSlideIndex = Number(panel.dataset.slideIndex);
+            InlineNotesPanel.editingPath = tab.path;
+            // Pin the etag at edit start, NOT the live tab.etag — a watcher
+            // refresh during the debounce would otherwise smuggle a write
+            // past the optimistic lock with the post-refresh etag.
+            InlineNotesPanel.editingEtag = tab.etag || null;
+        },
+
+        handleFocusOut: (event) => {
+            const editor = event.target.closest('[data-role="editor"]');
+            if (!editor) return;
+            const justEditedPath = InlineNotesPanel.editingPath;
+            InlineNotesPanel.editing = false;
+            InlineNotesPanel.flush();
+            InlineNotesPanel.editingSlideIndex = -1;
+            InlineNotesPanel.editingPath = '';
+            InlineNotesPanel.editingEtag = null;
+
+            // If a watcher update arrived for this deck while the user was
+            // editing, we suppressed the re-render to avoid yanking their
+            // cursor. Now that focus is gone, catch the slide pane up.
+            // Defer to a microtask so the active blur completes first
+            // (re-rendering inside focusout can re-target focus weirdly in
+            // some browsers).
+            const tab = state.tabs[state.activeTabIndex];
+            if (tab && tab.isMarp
+                && tab.path === justEditedPath
+                && tab.pendingRender) {
+                tab.pendingRender = false;
+                queueMicrotask(() => {
+                    // Re-check before firing: the user could have switched
+                    // tabs in the same tick.
+                    const t = state.tabs[state.activeTabIndex];
+                    if (t && t.path === justEditedPath && t.isMarp) {
+                        ContentRenderer.renderMarp(t.content, t.css);
+                        PresenterView.broadcastSlides();
+                    }
+                });
+            }
+        },
+
+        handleInput: (event) => {
+            const editor = event.target.closest('[data-role="editor"]');
+            if (!editor) return;
+            const panel = editor.closest('.speaker-notes-panel');
+            if (!panel) return;
+            // Pin at first input as a safety net (focusin should already
+            // have set these but defenders add belts to suspenders).
+            if (InlineNotesPanel.editingSlideIndex < 0) {
+                const tab = state.tabs[state.activeTabIndex];
+                if (!tab || !tab.isMarp) return;
+                InlineNotesPanel.editing = true;
+                InlineNotesPanel.editingSlideIndex = Number(panel.dataset.slideIndex);
+                InlineNotesPanel.editingPath = tab.path;
+                InlineNotesPanel.editingEtag = tab.etag || null;
+            }
+            // Mirror local cache so a subsequent slide-switch + re-render
+            // doesn't immediately overwrite the just-typed value.
+            const tab = state.tabs[state.activeTabIndex];
+            if (tab && Array.isArray(tab.notes)) {
+                tab.notes[InlineNotesPanel.editingSlideIndex] = readEditableText(editor);
+            }
+            InlineNotesPanel.scheduleSave(editor);
+        },
+
+        handleKeydown: (event) => {
+            // Stop Marp's slide-navigation shortcuts (←/→/Space/F/N/P) from
+            // firing while the user is typing in the notes editor.
+            const editor = event.target.closest('[data-role="editor"]');
+            if (!editor) return;
+            event.stopPropagation();
+        }
+    };
+
+    // ============================================================
+    // Marp Split-Pane Drag Handle (PowerPoint-style)
+    // ============================================================
+
+    // Drives the horizontal divider between the slide pane and the speaker
+    // notes pane. The notes-row height is a CSS custom property so that
+    // CSS Grid (.marp-split) automatically reflows the slide row to occupy
+    // the remaining space. Persisted in localStorage so the chosen ratio
+    // survives reloads / tab switches.
+    const MarpSplitHandle = {
+        dragging: false,
+        startY: 0,
+        startNotesPx: 0,
+        splitEl: null,
+        handleEl: null,
+        // Bound listener references — module-level so we can detach the
+        // exact same function instance even if attach() is called twice.
+        onMouseMove: null,
+        onMouseUp: null,
+
+        // Read the persisted notes row height. Returns NOTES_ROW_DEFAULT_PX
+        // only when the value is missing or non-finite. A literal stored
+        // `0` (user dragged the pane fully closed) is a valid value and is
+        // preserved as 0.
+        getSavedNotesPx() {
+            const raw = localStorage.getItem(STORAGE_KEYS.NOTES_ROW_PX);
+            if (raw === null) return NOTES_ROW_DEFAULT_PX;
+            const n = parseFloat(raw);
+            if (!Number.isFinite(n) || n < 0) return NOTES_ROW_DEFAULT_PX;
+            return n;
+        },
+
+        setNotesPx(px) {
+            if (!this.splitEl) return;
+            this.splitEl.style.setProperty('--marp-notes-row', `${px}px`);
+        },
+
+        clampNotesPx(notesPx, totalHeight) {
+            const max = Math.max(0, totalHeight - SPLIT_HANDLE_PX - SLIDE_ROW_MIN_PX);
+            if (notesPx < NOTES_ROW_MIN_PX) return NOTES_ROW_MIN_PX;
+            if (notesPx > max) return max;
+            return notesPx;
+        },
+
+        // Always clear any body-level drag chrome we may have set so we
+        // can't leak a row-resize cursor / userSelect:none into the rest
+        // of the app even if the mouseup handler never gets a chance to
+        // run (re-render mid-drag, tab switch, etc.).
+        clearDragChrome() {
+            this.dragging = false;
+            if (this.handleEl) this.handleEl.classList.remove('dragging');
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        },
+
+        attach(splitEl, handleEl) {
+            this.detach();
+            this.splitEl = splitEl;
+            this.handleEl = handleEl;
+            // Clamp the restored value against the current split height —
+            // a value persisted on a tall window should not collapse the
+            // slide pane to nothing when the deck is reopened on a smaller
+            // viewport. We can't measure before the element is in the DOM,
+            // so do it lazily on the next animation frame.
+            const requested = this.getSavedNotesPx();
+            requestAnimationFrame(() => {
+                if (!this.splitEl) return;
+                const totalHeight = this.splitEl.getBoundingClientRect().height;
+                const clamped = totalHeight > 0
+                    ? this.clampNotesPx(requested, totalHeight)
+                    : requested;
+                this.setNotesPx(clamped);
+            });
+
+            this.onMouseMove = (e) => {
+                if (!this.dragging) return;
+                const dy = e.clientY - this.startY;
+                const totalHeight = this.splitEl.getBoundingClientRect().height;
+                const next = this.clampNotesPx(this.startNotesPx - dy, totalHeight);
+                this.setNotesPx(next);
+            };
+            this.onMouseUp = () => {
+                if (!this.dragging) return;
+                this.clearDragChrome();
+                // Persist the resolved px (read from CSS var, not the drag
+                // delta) so a clamp at the edge is what we save, not the
+                // unbounded value. Use an explicit Number.isFinite check
+                // — `||` would coerce a legitimate 0 (pane fully closed)
+                // back to the default and stop the user's choice from
+                // surviving a reload.
+                const computed = getComputedStyle(this.splitEl)
+                    .getPropertyValue('--marp-notes-row');
+                const parsed = parseFloat(computed);
+                const px = Number.isFinite(parsed) && parsed >= 0
+                    ? parsed
+                    : NOTES_ROW_DEFAULT_PX;
+                localStorage.setItem(STORAGE_KEYS.NOTES_ROW_PX, String(px));
+            };
+
+            handleEl.addEventListener('mousedown', this.onMouseDown);
+            handleEl.addEventListener('dblclick', this.onDoubleClick);
+            document.addEventListener('mousemove', this.onMouseMove);
+            document.addEventListener('mouseup', this.onMouseUp);
+        },
+
+        detach() {
+            // If the user is mid-drag when we tear down (re-render mid-
+            // gesture, tab switch, etc.), the document mouseup handler
+            // we registered would never fire — clean up the body chrome
+            // ourselves so the cursor and userSelect don't get stuck.
+            if (this.dragging) this.clearDragChrome();
+            if (this.handleEl) {
+                this.handleEl.removeEventListener('mousedown', this.onMouseDown);
+                this.handleEl.removeEventListener('dblclick', this.onDoubleClick);
+            }
+            if (this.onMouseMove) document.removeEventListener('mousemove', this.onMouseMove);
+            if (this.onMouseUp) document.removeEventListener('mouseup', this.onMouseUp);
+            this.dragging = false;
+            this.splitEl = null;
+            this.handleEl = null;
+            this.onMouseMove = null;
+            this.onMouseUp = null;
+        },
+
+        onMouseDown: (e) => {
+            const self = MarpSplitHandle;
+            if (!self.splitEl || !self.handleEl) return;
+            self.dragging = true;
+            self.startY = e.clientY;
+            // Use an explicit finite-number check so a stored 0 (the user
+            // has previously collapsed the pane) isn't coerced to DEFAULT
+            // by `||`. Otherwise the next drag jumps from 240px instead
+            // of resizing from the collapsed state.
+            const computed = getComputedStyle(self.splitEl)
+                .getPropertyValue('--marp-notes-row');
+            const parsed = parseFloat(computed);
+            self.startNotesPx = Number.isFinite(parsed) && parsed >= 0
+                ? parsed
+                : NOTES_ROW_DEFAULT_PX;
+            self.handleEl.classList.add('dragging');
+            document.body.style.cursor = 'row-resize';
+            document.body.style.userSelect = 'none';
+            e.preventDefault();
+        },
+
+        onDoubleClick: () => {
+            const self = MarpSplitHandle;
+            // Clamp the default against the current split height so the
+            // reset can't violate SLIDE_ROW_MIN_PX in a short viewport.
+            // Drag / restore paths already clamp; doubleclick used to
+            // skip it and could shrink the slide pane to zero.
+            const totalHeight = self.splitEl
+                ? self.splitEl.getBoundingClientRect().height
+                : 0;
+            const target = totalHeight > 0
+                ? self.clampNotesPx(NOTES_ROW_DEFAULT_PX, totalHeight)
+                : NOTES_ROW_DEFAULT_PX;
+            self.setNotesPx(target);
+            localStorage.setItem(STORAGE_KEYS.NOTES_ROW_PX, String(target));
+        }
+    };
+
     // ============================================================
     // Presenter View (separate window with speaker notes)
     // ============================================================
@@ -698,36 +1214,52 @@
         channel: null,
         presenterWindow: null,
         saveQueue: null,            // MDVSaveQueue instance (created in init)
-        lastSavedEtag: new Map(),   // Map<path, etag> — own-save chain rebase
+        // Map<path, etag> — own-save chain rebase. We track presenter and
+        // inline saves separately so that a successful save from one editor
+        // doesn't let the other editor rebase past a stale pinned etag and
+        // silently overwrite the other editor's in-flight changes.
+        lastSavedEtag: new Map(),
+        lastSavedInlineEtag: new Map(),
 
         init() {
-            if (typeof BroadcastChannel === 'undefined') return;
-            if (!window.MDVPresenterChannel || !window.MDVSaveQueue) return;
-            this.channel = window.MDVPresenterChannel.create();
-            if (!this.channel) return;
+            if (!window.MDVSaveQueue) return;
 
             // saveQueue rebases queued edits onto the etag of our last own
             // save when there has been no external watcher update. If an
             // external edit arrives, fallback to the originally-pinned etag
             // so optimistic locking can detect the conflict via 412.
+            //
+            // IMPORTANT: the rebase only applies to Presenter-originated
+            // saves. Inline-panel saves (origin === 'inline') always use
+            // the etag pinned at edit start so a concurrent presenter edit
+            // gets the STALE conflict it deserves. Without this guard a
+            // successful inline save would mark its post-save etag as
+            // "own" for the shared queue, and the presenter's next save
+            // would silently overwrite the inline edit.
+            //
+            // The 5th arg (`origin`) is forwarded to saveNote so the
+            // note-saved broadcast can be filtered correctly on the
+            // presenter side.
+            //
+            // The queue is created unconditionally — independent of
+            // BroadcastChannel availability — so the inline notes panel
+            // 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) => {
+                saveFn: (path, slideIndex, note, etag, origin) => {
+                    let useEtag = etag;
                     const tab = state.tabs.find((t) => t.path === path);
-                    const own = this.lastSavedEtag.get(path);
-                    const useEtag = (tab && own && tab.etag === own) ? own : etag;
-                    return this.saveNote(path, slideIndex, note, useEtag);
-                }
-            });
-
-            this.channel.addEventListener('message', (e) => {
-                const msg = e.data || {};
-                if (msg.type === 'request-slides') {
-                    this.broadcastSlides();
-                } else if (msg.type === 'goto') {
-                    this.gotoSlide(msg.index);
-                } else if (msg.type === 'edit-note') {
-                    if (!msg.path) return;
-                    this.saveQueue.enqueue(msg.path, msg.slideIndex, msg.note, msg.etag || null);
+                    // Pick the "own etag" map that matches this save's
+                    // origin, so a presenter save can't rebase past an
+                    // inline edit (and vice versa). The same-origin check
+                    // — `tab.etag === own` — is what tells us no other
+                    // editor wrote in between, making the rebase safe.
+                    const ownMap = origin === 'inline'
+                        ? this.lastSavedInlineEtag
+                        : this.lastSavedEtag;
+                    const own = ownMap.get(path);
+                    if (tab && own && tab.etag === own) useEtag = own;
+                    return this.saveNote(path, slideIndex, note, useEtag, origin);
                 }
             });
 
@@ -737,9 +1269,35 @@
                 window.MDVTabRegistry.onTabClosed((path) => {
                     if (this.saveQueue) this.saveQueue.dropPath(path);
                     this.lastSavedEtag.delete(path);
+                    this.lastSavedInlineEtag.delete(path);
                 });
             }
 
+            // BroadcastChannel powers the cross-window presenter view.
+            // Where it's missing we keep the inline path working with
+            // saveQueue alone — broadcastSlides / saveNote then no-op
+            // their channel.postMessage calls (channel === null).
+            if (typeof BroadcastChannel !== 'undefined'
+                && window.MDVPresenterChannel) {
+                this.channel = window.MDVPresenterChannel.create();
+                if (this.channel) {
+                    this.channel.addEventListener('message', (e) => {
+                        const msg = e.data || {};
+                        if (msg.type === 'request-slides') {
+                            this.broadcastSlides();
+                        } else if (msg.type === 'goto') {
+                            this.gotoSlide(msg.index);
+                        } else if (msg.type === 'edit-note') {
+                            if (!msg.path) return;
+                            this.saveQueue.enqueue(
+                                msg.path, msg.slideIndex, msg.note,
+                                msg.etag || null, 'presenter'
+                            );
+                        }
+                    });
+                }
+            }
+
             window.addEventListener('beforeunload', () => {
                 if (this.presenterWindow && !this.presenterWindow.closed) {
                     this.presenterWindow.close();
@@ -749,22 +1307,47 @@
 
         // Persist a speaker note edit via the Marpit-token-based API. The
         // server resolves the path, validates ETag, and rewrites surgically.
-        // `editTimeEtag` is the etag captured by the presenter at edit start;
-        // we send that as If-Match (NOT the live tab.etag) so a watcher
-        // refresh during the debounce can't smuggle a write past the lock.
-        async saveNote(path, slideIndex, note, editTimeEtag) {
+        // `editTimeEtag` is the etag captured at edit start; we send that as
+        // If-Match (NOT the live tab.etag) so a watcher refresh during the
+        // debounce can't smuggle a write past the lock.
+        //
+        // `origin` is forwarded into the note-saved broadcast so the
+        // Presenter window can refuse to advance its editingEtag onto a
+        // save that came from the inline panel (otherwise the Presenter's
+        // next autosave would skip the STALE conflict it should otherwise
+        // hit and silently overwrite the inline edit).
+        //
+        // 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) {
+            const broadcast = (payload) => {
+                // No-op when BroadcastChannel was unavailable at init —
+                // inline autosaves still work because callers also read
+                // the saveFn return value via saveQueue.enqueue().then().
+                if (!this.channel) return;
+                this.channel.postMessage({
+                    type: 'note-saved',
+                    slideIndex,
+                    origin: origin || 'unknown',
+                    ...payload
+                });
+            };
+
             const tab = state.tabs.find((t) => t.path === path);
-            if (!tab || !tab.isMarp) return;
+            if (!tab || !tab.isMarp) {
+                return { ok: false, reason: 'No active Marp tab' };
+            }
             const ifMatch = editTimeEtag || tab.etag;
             if (!ifMatch) {
                 // GET degrade or no etag yet — refuse without writing.
-                this.channel.postMessage({
-                    type: 'note-saved',
-                    slideIndex,
+                const result = {
                     ok: false,
                     reason: 'Deck not parseable (degraded mode)'
-                });
-                return;
+                };
+                broadcast(result);
+                return result;
             }
 
             let res, data;
@@ -772,10 +1355,9 @@
                 ({ res, data } = await window.MDVApi.saveMarpNote(path, slideIndex, note, ifMatch));
             } catch (err) {
                 console.error('saveNote network error', err);
-                this.channel.postMessage({
-                    type: 'note-saved', slideIndex, ok: false, reason: 'Network error'
-                });
-                return;
+                const result = { ok: false, reason: 'Network error' };
+                broadcast(result);
+                return result;
             }
 
             if (res.status === 412 && data.code === 'STALE') {
@@ -786,13 +1368,13 @@
                 // file_update event will refresh tab.{content,notes,etag}
                 // together once chokidar sees the change. Until then, all
                 // PUTs from this tab keep returning 412.
-                this.channel.postMessage({
-                    type: 'note-saved',
-                    slideIndex,
+                const result = {
                     ok: false,
+                    code: 'STALE',
                     reason: 'STALE — file changed externally; please reload'
-                });
-                return;
+                };
+                broadcast(result);
+                return result;
             }
 
             if (res.ok && data.ok) {
@@ -801,29 +1383,38 @@
                 // immediately see the saved content. Otherwise raw/notes
                 // would lag until the watcher's file_update event arrives.
                 tab.etag = data.etag;
-                this.lastSavedEtag.set(path, data.etag);
+                // Track post-save etag separately per origin. The shared
+                // queue uses this map to rebase queued same-origin
+                // autosaves onto our own post-save etag (so a user typing
+                // continuously gets through), but recording into the OTHER
+                // origin's map would let it skip STALE and overwrite an
+                // in-flight edit from the concurrent editor.
+                if (origin === 'inline') {
+                    this.lastSavedInlineEtag.set(path, data.etag);
+                } else {
+                    this.lastSavedEtag.set(path, data.etag);
+                }
                 if (typeof data.source === 'string') tab.raw = data.source;
                 if (Array.isArray(data.notes)) tab.notes = data.notes;
                 if (Array.isArray(data.notesMultiplicity)) {
                     tab.notesMultiplicity = data.notesMultiplicity;
                 }
-                this.channel.postMessage({
-                    type: 'note-saved',
-                    slideIndex,
+                const result = {
                     ok: true,
                     etag: data.etag,
                     normalizedNote: data.normalizedNote
-                });
+                };
+                broadcast(result);
                 // Re-broadcast so the presenter window picks up the new
                 // notes/etag without waiting for the watcher event.
                 this.broadcastSlides();
-                return;
+                return result;
             }
 
             const reason = data && (data.error || data.code) || 'Save failed';
-            this.channel.postMessage({
-                type: 'note-saved', slideIndex, ok: false, reason
-            });
+            const result = { ok: false, reason };
+            broadcast(result);
+            return result;
         },
 
         open() {
@@ -881,6 +1472,10 @@
             const slides = elements.content.querySelectorAll('.marpit > svg[data-marpit-svg]');
             if (!slides.length || index < 0 || index >= slides.length) return;
             slides.forEach((s, i) => s.classList.toggle('active', i === index));
+            const panels = elements.content.querySelectorAll(
+                '#marpNotesArea > .speaker-notes-panel'
+            );
+            panels.forEach((p, i) => p.classList.toggle('active', i === index));
             marpCurrentSlide = index;
             const counter = elements.content.querySelector('.slide-counter');
             if (counter) counter.textContent = `${index + 1} / ${slides.length}`;
@@ -924,56 +1519,57 @@
                 // Add new Marp style with navigation overrides
                 const style = document.createElement('style');
                 style.id = 'marp-style';
-                // Add slide navigation CSS
-                const navOverrides = `
-                    /* Marp slide navigation */
-                    .marpit {
-                        position: relative;
-                        display: flex;
-                        flex-direction: column;
-                        align-items: center;
-                        padding: 20px;
-                        padding-bottom: 80px;
-                    }
-                    .marpit > svg[data-marpit-svg] {
-                        display: none;
-                        max-width: 100%;
-                        height: auto;
-                        box-shadow: 0 4px 20px rgba(0,0,0,0.15);
-                        border-radius: 4px;
-                    }
-                    .marpit > svg[data-marpit-svg].active {
-                        display: block;
-                    }
-                    @media print {
-                        .marpit {
-                            padding: 0 !important;
-                            background: transparent !important;
-                        }
-                        .marpit > svg[data-marpit-svg] {
-                            display: block !important;
-                            width: 100% !important;
-                            height: auto !important;
-                            max-width: none !important;
-                            box-shadow: none !important;
-                            border-radius: 0 !important;
-                            page-break-after: always;
-                            page-break-inside: avoid;
-                        }
-                        .marpit > svg[data-marpit-svg]:last-child {
-                            page-break-after: avoid;
-                        }
-                        .marp-nav { display: none !important; }
-                    }
-                `;
-                style.textContent = css + navOverrides;
+                // marp-core's per-deck CSS is injected unmodified; the split
+                // layout / responsive sizing rules live in styles.css so they
+                // load once and don't need to be repeated per render.
+                style.textContent = css;
                 document.head.appendChild(style);
             }
 
-            elements.content.innerHTML = htmlContent;
+            // PowerPoint-style split: top = slide stage, bottom = notes
+            // editor, with a draggable horizontal handle between them. The
+            // marp-core HTML (`<div class="marpit">…</div>`) lives inside
+            // .marp-slide-area; speaker-notes panels stack inside
+            // .marp-notes-area and the active one is shown via JS.
+            elements.content.innerHTML = `
+                <div class="marp-split" id="marpSplit">
+                    <div class="marp-slide-area" id="marpSlideArea">${htmlContent}</div>
+                    <div class="marp-split-handle" id="marpSplitHandle" title="ドラッグでスライド/ノートの比率を変更（ダブルクリックでリセット）"></div>
+                    <div class="marp-notes-area" id="marpNotesArea"></div>
+                </div>
+            `;
 
-            // Add navigation controls to marpit container
             const marpit = elements.content.querySelector('.marpit');
+            const notesArea = document.getElementById('marpNotesArea');
+            if (marpit && notesArea) {
+                const tab = state.tabs[state.activeTabIndex];
+                const notes = (tab && Array.isArray(tab.notes)) ? tab.notes : [];
+                const multiplicity = (tab && Array.isArray(tab.notesMultiplicity))
+                    ? tab.notesMultiplicity : [];
+                const hasEtag = !!(tab && tab.etag);
+                const svgs = marpit.querySelectorAll('svg[data-marpit-svg]');
+                svgs.forEach((_svg, i) => {
+                    const panel = InlineNotesPanel.buildPanel(
+                        i,
+                        notes[i] || '',
+                        multiplicity[i] || 0,
+                        hasEtag
+                    );
+                    notesArea.appendChild(panel);
+                });
+                InlineNotesPanel.attach();
+            }
+
+            // Wire up the split-pane drag handle.
+            const splitEl = document.getElementById('marpSplit');
+            const handleEl = document.getElementById('marpSplitHandle');
+            if (splitEl && handleEl) {
+                MarpSplitHandle.attach(splitEl, handleEl);
+            }
+
+            // 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.
             if (marpit) {
                 const nav = document.createElement('div');
                 nav.className = 'marp-nav';
@@ -1005,7 +1601,10 @@
                         </svg>
                     </button>
                 `;
-                marpit.appendChild(nav);
+                // Append to .content directly (NOT marpit) so it sits
+                // outside .marp-split — fixed positioning + overflow:hidden
+                // on the grid container would otherwise interact poorly.
+                elements.content.appendChild(nav);
             }
 
             // Initialize slide navigation
@@ -1034,10 +1633,19 @@
                 marpCurrentSlide = 0;
             }
 
+            // Cache the panels alongside the slides so flipping the active
+            // class is one DOM read instead of a fresh query per click.
+            const panels = elements.content.querySelectorAll(
+                '#marpNotesArea > .speaker-notes-panel'
+            );
+
             const showSlide = (index) => {
                 slides.forEach((slide, i) => {
                     slide.classList.toggle('active', i === index);
                 });
+                panels.forEach((panel, i) => {
+                    panel.classList.toggle('active', i === index);
+                });
                 marpCurrentSlide = index;
                 if (counter) {
                     counter.textContent = `${index + 1} / ${slides.length}`;
@@ -1179,6 +1787,10 @@
         },
 
         cleanupMarp() {
+            // Flush + detach BEFORE the DOM is wiped so a pending
+            // 800ms save timer doesn't fire after the editor element is gone.
+            InlineNotesPanel.detach();
+            MarpSplitHandle.detach();
             elements.content.classList.remove('marp-viewer');
             document.body.classList.remove('marp-fullscreen');
             if (marpKeyHandler) {
@@ -1299,14 +1911,57 @@
         async open(path) {
             const existingIndex = state.tabs.findIndex(t => t.path === path);
             if (existingIndex >= 0) {
-                this.switch(existingIndex);
+                await this.switch(existingIndex);
                 return;
             }
 
-            const response = await MDVApi.fetchFile(path);
-            const data = await response.json();
+            // The not-yet-open path used to skip the outgoing-tab flush
+            // that switch() does. If the user types and then clicks a
+            // brand-new file within the 1.5s debounce, the textarea is
+            // ripped out before the timer fires and the last edits are
+            // lost. Mirror switch()'s outgoing flush + raw capture here,
+            // including the abort-on-flush-failure behavior so a failed
+            // save doesn't quietly kick the user off the tab they were
+            // editing.
+            let outgoingTextarea = null;
+            if (state.activeTabIndex >= 0
+                && state.activeTabIndex < state.tabs.length
+                && state.isEditMode) {
+                try {
+                    await EditorManager.flushAutosave();
+                } catch (_e) {
+                    return;
+                }
+                outgoingTextarea = document.getElementById('editorTextarea');
+                if (outgoingTextarea) {
+                    state.tabs[state.activeTabIndex].raw = outgoingTextarea.value;
+                    // Lock the editor while the new file loads. Without
+                    // this, slow file loads let the user type more text
+                    // that schedules a fresh autosave, then open() tears
+                    // the textarea out before that timer ever fires and
+                    // the last keystrokes are lost.
+                    outgoingTextarea.readOnly = true;
+                }
+            }
+
+            // Always restore the outgoing textarea's editability if we
+            // bail out below. On the success path the textarea will be
+            // wiped by render() anyway, so the unlock is harmless then.
+            const unlockOnFailure = () => {
+                if (outgoingTextarea) outgoingTextarea.readOnly = false;
+            };
+
+            let response, data;
+            try {
+                response = await MDVApi.fetchFile(path);
+                data = await response.json();
+            } catch (e) {
+                unlockOnFailure();
+                throw e;
+            }
 
             if (data.error) {
+                unlockOnFailure();
                 alert('Error: ' + data.error);
                 return;
             }
@@ -1345,9 +2000,31 @@
             updateUrlPath(path);
         },
 
-        switch(index) {
+        async switch(index) {
+            // Pin the target by PATH (not by index) before any await:
+            // the user could close a tab while we're flushing, which
+            // would shift the indices and turn `index` into either the
+            // wrong tab or an out-of-bounds dereference.
+            const targetPath = state.tabs[index] && state.tabs[index].path;
+            if (!targetPath) return;
+
             if (state.activeTabIndex >= 0 && state.activeTabIndex < state.tabs.length) {
                 if (state.isEditMode) {
+                    // Flush a pending autosave for the OUTGOING tab before
+                    // we render it out. Otherwise the debounce timer
+                    // captures #editorTextarea at fire time, finds it
+                    // gone, and the last keystrokes are stuck only in
+                    // tab.raw without ever reaching disk.
+                    //
+                    // If the flush rejects, the user's edits did NOT
+                    // reach disk; aborting the switch keeps them in
+                    // edit mode so they can retry instead of losing
+                    // work behind a tab they walked away from.
+                    try {
+                        await EditorManager.flushAutosave();
+                    } catch (_e) {
+                        return;
+                    }
                     const textarea = document.getElementById('editorTextarea');
                     if (textarea) {
                         state.tabs[state.activeTabIndex].raw = textarea.value;
@@ -1368,19 +2045,30 @@
                 EditorManager.updateButton();
             }
 
-            state.activeTabIndex = index;
+            // Re-resolve the target by path post-await — its index may
+            // have shifted (or it may have been closed entirely) during
+            // the flush.
+            const newIndex = state.tabs.findIndex((t) => t.path === targetPath);
+            if (newIndex < 0) return;
+            state.activeTabIndex = newIndex;
             this.render();
             this.renderActive();
-            WebSocketManager.watchFile(state.tabs[index].path);
+            WebSocketManager.watchFile(state.tabs[newIndex].path);
             FileTreeManager.updateHighlight();
-            updateUrlPath(state.tabs[index].path);
+            updateUrlPath(state.tabs[newIndex].path);
         },
 
         close(index) {
             // Warn about unsaved changes
             if (state.isEditMode && state.hasUnsavedChanges && index === state.activeTabIndex) {
                 DialogManager.show('未保存の変更', {
-                    message: '変更を保存せずにタブを閉じますか？',
+                    // The autosave runs every 1.5s. If a POST is already
+                    // in flight when the user discards, the server may
+                    // have received the request before our AbortController
+                    // can cancel it — so the discarded text can still
+                    // land on disk in that small window. Be honest about
+                    // it rather than promising a guarantee we can't keep.
+                    message: '変更を保存せずにタブを閉じますか？\n（自動保存処理中の場合、その時点までの内容がファイルに残る可能性があります）',
                     isConfirm: true,
                     danger: true,
                     confirmText: '閉じる',
@@ -1388,11 +2076,28 @@
                         state.hasUnsavedChanges = false;
                         state.isEditMode = false;
                         EditorManager.updateButton();
+                        // Drop the pending debounce so a queued autosave
+                        // can't fire after the tab is gone and persist
+                        // text the user explicitly chose to discard.
+                        EditorManager.cancelPendingAutosave();
                         TabManager.close(index);
                     }
                 });
                 return;
             }
+            // The clean-close path skips the confirm dialog entirely (no
+            // unsaved changes thanks to autosave). It still has to exit
+            // edit mode if we're closing the ACTIVE tab — otherwise
+            // state.isEditMode stays true, the next tab renders in edit
+            // mode (HTML files show source instead of preview, the
+            // toolbar / shortcuts misbehave), and a fresh edit session
+            // is needed to recover.
+            if (state.isEditMode && index === state.activeTabIndex) {
+                state.isEditMode = false;
+                EditorManager.updateButton();
+                EditorManager.cancelPendingAutosave();
+            }
+
             const closingPath = state.tabs[index] && state.tabs[index].path;
             state.tabs.splice(index, 1);
             if (closingPath && window.MDVTabRegistry) {
@@ -1480,7 +2185,28 @@
     // Editor Manager
     // ============================================================
 
+    const EDITOR_AUTOSAVE_DEBOUNCE_MS = 1500;
+
     const EditorManager = {
+        // Debounced-autosave state. saveTimer is the pending input→save
+        // schedule; savedStatusTimer auto-clears the "Saved!" toast so the
+        // toolbar doesn't pin a stale success message. inFlight serializes
+        // overlapping save() calls so a slow earlier POST can't reach the
+        // last-write-wins server endpoint after a faster newer POST and
+        // overwrite the user's newer text. saveAbortController abort()s
+        // every save sharing the chain, so an explicit discard (close-
+        // without-saving) can cancel an in-flight POST instead of letting
+        // it persist text the user just discarded. lastAutosaveError
+        // remembers a failure that was thrown from a debounce-fired save
+        // (whose own caller silently caught it because the toolbar
+        // status had already been updated) so a later flushAutosave for
+        // navigation can refuse to drop the user's buffer.
+        saveTimer: null,
+        savedStatusTimer: null,
+        inFlight: null,
+        saveAbortController: null,
+        lastAutosaveError: null,
+
         async toggle() {
             if (state.activeTabIndex < 0) return;
             const tab = state.tabs[state.activeTabIndex];
@@ -1495,6 +2221,96 @@
             state.isEditMode ? this.show() : await this.hide();
         },
 
+        scheduleAutosave() {
+            if (this.saveTimer) clearTimeout(this.saveTimer);
+            this.saveTimer = setTimeout(() => {
+                this.saveTimer = null;
+                // Debounce-fired saves swallow rejections — the toolbar
+                // status already reflects the error, and there is no
+                // caller waiting for the Promise. Without this catch
+                // every failed autosave would surface as an
+                // "Unhandled Promise rejection" in the console.
+                this.save().catch(() => { /* status already shown */ });
+            }, EDITOR_AUTOSAVE_DEBOUNCE_MS);
+        },
+
+        // Cancel a pending debounce AND any in-flight POST so a discard-
+        // on-close is fully honored. The aborted save() resolves silently
+        // (its catch maps AbortError → no-op), so the chain unblocks and
+        // no toolbar status mutation runs.
+        cancelPendingAutosave() {
+            if (this.saveTimer) {
+                clearTimeout(this.saveTimer);
+                this.saveTimer = null;
+            }
+            if (this.saveAbortController) {
+                this.saveAbortController.abort();
+                this.saveAbortController = null;
+            }
+            // Drop any stored failure too — discard means "I don't care
+            // about that buffer anymore." Without this, the next edit
+            // session for an unrelated file would inherit the prior
+            // failure and flushAutosave would throw on its first
+            // navigation, blocking work that has nothing to do with
+            // the discarded tab.
+            this.lastAutosaveError = null;
+        },
+
+        // Flush a pending autosave NOW (instead of waiting for the
+        // debounce timer). Used by Cmd+S, hide(), and tab switching so
+        // leaving edit mode never silently drops the last unsaved
+        // keystrokes — and so a slow in-flight save can't run its
+        // post-success "clear dirty / show Saved!" branch after the user
+        // has already moved on to a different tab (the global
+        // hasUnsavedChanges flag would clobber the new editor's state).
+        //
+        // The loop keeps draining until both the debounce queue and the
+        // in-flight chain are empty: while we await an in-flight POST
+        // the textarea is still editable, so a new keystroke can arm a
+        // fresh saveTimer. We have to re-check after each await or the
+        // tail of typing escapes the flush and the eventual save() call
+        // returns no-op because the textarea has been removed by the
+        // navigation that triggered us.
+        async flushAutosave() {
+            // Surface a previously-silenced autosave failure first.
+            // If the last debounce-fired save threw and nobody else
+            // has seen it (its caller .catch'd silently), we MUST
+            // throw before letting navigation continue — otherwise
+            // hide() would refetch over the unsaved buffer.
+            if (this.lastAutosaveError) {
+                throw this.lastAutosaveError;
+            }
+            let lastError = null;
+            while (this.saveTimer || this.inFlight) {
+                if (this.saveTimer) {
+                    clearTimeout(this.saveTimer);
+                    this.saveTimer = null;
+                    try {
+                        await this.save();
+                    } catch (e) {
+                        // First failure aborts the drain. Re-trying
+                        // the same chain would just replay the failure
+                        // and risk an infinite loop if the user keeps
+                        // typing. The next input will arm a fresh
+                        // saveTimer and we can flush again on the next
+                        // navigation attempt.
+                        lastError = e;
+                        break;
+                    }
+                } else {
+                    try {
+                        await this.inFlight;
+                    } catch (e) {
+                        lastError = e;
+                        break;
+                    }
+                }
+            }
+            // Propagate so navigation callers (hide / switch / open) can
+            // bail out instead of silently dropping the user's buffer.
+            if (lastError) throw lastError;
+        },
+
         updateButton() {
             elements.editToggle.classList.toggle('active', state.isEditMode);
             elements.editLabel.textContent = state.isEditMode ? 'View' : 'Edit';
@@ -1526,6 +2342,7 @@
                 state.hasUnsavedChanges = true;
                 elements.editorStatus.textContent = 'Modified';
                 elements.editorStatus.className = 'editor-status modified';
+                EditorManager.scheduleAutosave();
             });
 
             setTimeout(() => {
@@ -1573,6 +2390,29 @@
             if (state.activeTabIndex < 0) return;
             const tab = state.tabs[state.activeTabIndex];
 
+            // Flush any pending autosave BEFORE we read the textarea +
+            // re-fetch the file. Otherwise the post-fetch render would
+            // overwrite tab.raw with the on-disk version while the user's
+            // last keystrokes (still inside the debounce window) are
+            // silently discarded.
+            //
+            // If the flush throws (a write failed somewhere in the chain),
+            // bail out: the on-disk content does NOT match the user's
+            // textarea, so swapping back to View mode would refetch the
+            // older version and lose the in-progress edits. Stay in edit
+            // mode with the existing 'Error: ...' status visible so the
+            // user can retry / fix the underlying issue. Re-throw so
+            // toggle()'s callers (PrintManager.print and friends) can
+            // detect the failure instead of silently exporting from the
+            // pre-edit on-disk content.
+            try {
+                await this.flushAutosave();
+            } catch (e) {
+                state.isEditMode = true;
+                this.updateButton();
+                throw e;
+            }
+
             const textarea = document.getElementById('editorTextarea');
             let topLineNumber = -1;
             let scrollPercentage = 0;
@@ -1654,46 +2494,179 @@
         },
 
         async save() {
-            if (state.activeTabIndex < 0 || !state.isEditMode) return;
+            if (state.activeTabIndex < 0) return;
 
-            const tab = state.tabs[state.activeTabIndex];
-            const textarea = document.getElementById('editorTextarea');
-            if (!textarea) return;
+            // Cancel any pending debounce; whether we got here via the
+            // timer, Cmd+S, or flushAutosave, this single save covers it.
+            if (this.saveTimer) {
+                clearTimeout(this.saveTimer);
+                this.saveTimer = null;
+            }
 
-            const newContent = textarea.value;
+            // Pin tab, path, and content NOW. We must not re-read these
+            // after the prior save completes, because by then the active
+            // tab and textarea may have changed under us — and we still
+            // need to persist the snapshot the user actually authored
+            // when this save() was invoked.
+            const initialTab = state.tabs[state.activeTabIndex];
+            const textarea = document.getElementById('editorTextarea');
+            if (!initialTab || !textarea) return;
+            const path = initialTab.path;
+            const content = textarea.value;
+
+            // One AbortController governs the whole chain: cancel-pending
+            // calls .abort() once and every queued / in-flight save sees
+            // the same signal. We only create a fresh one when the chain
+            // is currently empty (or has been previously aborted+cleared).
+            if (!this.saveAbortController) {
+                this.saveAbortController = new AbortController();
+            }
+            const signal = this.saveAbortController.signal;
+
+            // Chain after the previous save's Promise so concurrent saves
+            // reach the last-write-wins endpoint in invocation order.
+            // flushAutosave() awaits this.inFlight to drain the entire
+            // chain (not just the head), so any number of queued saves
+            // are guaranteed to complete before navigation proceeds.
+            const prior = this.inFlight;
+            const self = this;
+            const mine = (async () => {
+                if (prior) {
+                    try { await prior; } catch (_e) { /* ignore */ }
+                }
+                // If the chain was aborted while we were waiting in line,
+                // skip the POST entirely.
+                if (signal.aborted) return;
+                try {
+                    elements.editorStatus.textContent = 'Saving...';
+                    elements.editorStatus.className = 'editor-status';
 
-            try {
-                elements.editorStatus.textContent = 'Saving...';
-                elements.editorStatus.className = 'editor-status';
+                    const response = await MDVApi.saveFile(path, content, signal);
+                    const result = await response.json();
 
-                const response = await MDVApi.saveFile(tab.path, newContent);
+                    if (result.error) {
+                        // Only paint status onto the toolbar if the user
+                        // is still on the deck we tried to save.
+                        const active = state.tabs[state.activeTabIndex];
+                        if (active && active.path === path) {
+                            elements.editorStatus.textContent = 'Error: ' + result.error;
+                            elements.editorStatus.className = 'editor-status modified';
+                        }
+                        // Throw so flushAutosave / hide() can detect that
+                        // the write failed and avoid silently overwriting
+                        // the user's edits with the on-disk content.
+                        throw new Error(result.error);
+                    }
 
-                const result = await response.json();
+                    // Mirror the saved content into the deck's tab even
+                    // if the user has navigated away — the on-disk file
+                    // and tab.raw should agree on what was persisted.
+                    const target = state.tabs.find((t) => t.path === path);
+                    if (target) {
+                        target.raw = content;
+                        // Re-fetch rendered HTML / Marp metadata INLINE,
+                        // not fire-and-forget. The save chain is
+                        // serialized per-tab; awaiting the refresh here
+                        // ensures the older save's refresh can never
+                        // arrive after a newer save's refresh and
+                        // overwrite the newer rendered state. The
+                        // perceived latency cost is the round trip,
+                        // which only blocks a *follow-up* autosave (the
+                        // user's typing is unblocked the instant we
+                        // dispatched POST).
+                        try {
+                            const refreshRes = await MDVApi.fetchFile(path);
+                            const data = await refreshRes.json();
+                            const t = state.tabs.find((x) => x.path === path);
+                            if (t) {
+                                if (typeof data.content === 'string') t.content = data.content;
+                                if (typeof data.css !== 'undefined') t.css = data.css;
+                                if (Array.isArray(data.notes)) t.notes = data.notes;
+                                if (Array.isArray(data.notesMultiplicity)) t.notesMultiplicity = data.notesMultiplicity;
+                                if (data.etag) t.etag = data.etag;
+                                if (typeof data.isMarp !== 'undefined') t.isMarp = data.isMarp;
+                            }
+                        } catch (_e) { /* watcher will catch up */ }
+                    }
 
-                if (result.error) {
-                    elements.editorStatus.textContent = 'Error: ' + result.error;
-                    elements.editorStatus.className = 'editor-status modified';
-                    return;
+                    // Global hasUnsavedChanges and the toolbar are tied
+                    // to the ACTIVE tab. Don't clear them on behalf of a
+                    // save whose deck the user has already left, and
+                    // don't clear them when the user has typed more text
+                    // since this save was scheduled — the next debounce
+                    // is already requeued and will settle state itself.
+                    const active = state.tabs[state.activeTabIndex];
+                    if (active && active.path === path) {
+                        const liveTextarea = document.getElementById('editorTextarea');
+                        const stillFresh = liveTextarea && liveTextarea.value === content;
+                        if (stillFresh) {
+                            state.hasUnsavedChanges = false;
+                            elements.editorStatus.textContent = 'Saved!';
+                            elements.editorStatus.className = 'editor-status saved';
+                            if (self.savedStatusTimer) clearTimeout(self.savedStatusTimer);
+                            self.savedStatusTimer = setTimeout(() => {
+                                if (elements.editorStatus.textContent === 'Saved!') {
+                                    elements.editorStatus.textContent = 'Ready';
+                                    elements.editorStatus.className = 'editor-status';
+                                }
+                                self.savedStatusTimer = null;
+                            }, 2000);
+                        }
+                    }
+                    // Whatever earlier failure we may have remembered is
+                    // moot now — the chain went through.
+                    self.lastAutosaveError = null;
+                } catch (e) {
+                    // Abort is intentional (discard-on-close cancelled
+                    // us). Don't treat that as a failure.
+                    if (e.name === 'AbortError') return;
+                    const active = state.tabs[state.activeTabIndex];
+                    if (active && active.path === path) {
+                        elements.editorStatus.textContent = 'Error: ' + e.message;
+                        elements.editorStatus.className = 'editor-status modified';
+                    }
+                    // Remember the failure so a later flushAutosave —
+                    // even one fired AFTER saveTimer/inFlight have both
+                    // settled — can surface it. Without this a debounced
+                    // save that fails silently (its caller's `.catch(()
+                    // => {})`) would leave hasUnsavedChanges=true with
+                    // no observable error, and hide()'s subsequent flush
+                    // would return success and refetch the on-disk file
+                    // over the user's unsaved buffer.
+                    self.lastAutosaveError = e;
+                    // Re-throw so a flushAutosave caller (hide / switch /
+                    // open / Cmd+S) can react and refuse to discard the
+                    // unsaved buffer.
+                    throw e;
                 }
+            })();
 
-                tab.raw = newContent;
-                state.hasUnsavedChanges = false;
-                elements.editorStatus.textContent = 'Saved!';
-                elements.editorStatus.className = 'editor-status saved';
-
-                setTimeout(() => {
-                    elements.editorStatus.textContent = 'Ready';
-                    elements.editorStatus.className = 'editor-status';
-                }, 2000);
-
-            } catch (e) {
-                elements.editorStatus.textContent = 'Error: ' + e.message;
-                elements.editorStatus.className = 'editor-status modified';
+            // Make `mine` the new chain tail. flushAutosave awaits whatever
+            // is at the tail, so as long as each save replaces the tail
+            // with a Promise that internally awaits its predecessor, the
+            // caller always waits for the entire pending chain.
+            this.inFlight = mine;
+            try {
+                await mine;
+            } finally {
+                // Only the tail clears inFlight. If a newer save has
+                // chained on after us, leave its Promise in place — and
+                // leave the shared AbortController in place too so the
+                // newer save can still be cancelled via the same handle.
+                if (this.inFlight === mine) {
+                    this.inFlight = null;
+                    if (this.saveAbortController
+                        && this.saveAbortController.signal === signal) {
+                        this.saveAbortController = null;
+                    }
+                }
             }
         },
 
         init() {
-            elements.editToggle.addEventListener('click', () => this.toggle());
+            elements.editToggle.addEventListener('click', () => {
+                this.toggle().catch(() => { /* status already shown */ });
+            });
         }
     };
 
@@ -1715,9 +2688,15 @@
 
             const tab = state.tabs[state.activeTabIndex];
 
-            // editモード中は閉じてからPDF生成
+            // editモード中は閉じてからPDF生成。autosave が失敗していた
+            // ら toggle() が throw する → 印刷を中止して edit モード維持
+            // (古い on-disk 内容で勝手に PDF 化しないように)。
             if (state.isEditMode) {
-                await EditorManager.toggle();
+                try {
+                    await EditorManager.toggle();
+                } catch (_e) {
+                    return;
+                }
             }
 
             if (tab.isMarp || this.isMarpPresentation()) {
@@ -2256,7 +3235,7 @@
         shortcuts: {
             'b': { handler: () => SidebarManager.toggle() },
             'w': { handler: () => TabManager.close(state.activeTabIndex), requiresTab: true },
-            'e': { handler: () => EditorManager.toggle(), requiresTab: true },
+            'e': { handler: () => EditorManager.toggle().catch(() => { /* status already shown */ }), requiresTab: true },
             's': { handler: () => EditorManager.save(), requiresEditMode: true },
             'p': { handler: () => PrintManager.print(), requiresTab: true }
         },