mdv-live 0.5.15 → 0.5.16

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) {