mdv-live 0.5.14 → 0.5.16

package/src/static/lib/saveQueue.js

@@ -1,30 +1,52 @@
 /**
- * Per-deck save queue with per-slide coalescing.
+ * Per-deck save queue with per-slide-per-origin coalescing.
  *
  * - Saves to the same deck are processed strictly serially (the server has
  *   a per-path mutex, but client-side serialization keeps user-visible
  *   ordering intuitive).
- * - New edits for the same slideIndex overwrite any pending value (coalesce).
- * - Other slides' pending edits keep their place in insertion order.
- * - `saveFn(path, slideIndex, note, etag)` is supplied by the caller.
+ * - New edits for the same (slideIndex, origin) pair overwrite any pending
+ *   value (coalesce). The superseded enqueue() Promise resolves with
+ *   { ok: false, reason: 'COALESCED' } so callers awaiting the older write
+ *   can drop their stale UI state instead of hanging forever.
+ * - Crucially, coalescing is scoped per origin: an inline save and a
+ *   presenter save for the same slide do NOT replace each other. Both run
+ *   serially so neither editor silently loses a draft.
+ * - `saveFn(path, slideIndex, note, etag, origin)` is supplied by the
+ *   caller; `origin` is an optional tag (e.g. 'presenter' / 'inline') the
+ *   queue uses for keying and also forwards verbatim so saveFn can route
+ *   notifications back to the right editor.
+ * - enqueue() returns a Promise that resolves with the saveFn's result (or a
+ *   COALESCED sentinel). Existing callers that ignore the return value or
+ *   skip the origin argument keep working unchanged.
  *
  * Loaded as a classic <script>; exposes window.MDVSaveQueue.
  */
 (function () {
   'use strict';
 
+  function buildKey(slideIndex, origin) {
+    return slideIndex + '|' + (origin || '');
+  }
+
   function createSaveQueue({ saveFn }) {
-    /** @type {Map<string, { pendingBySlide: Map<number, {note:string, etag:string|null}>, isDraining: boolean }>} */
+    /** @type {Map<string, { pending: Map<string, {slideIndex:number, note:string, etag:string|null, origin:string|undefined, resolve:Function}>, isDraining: boolean }>} */
     const queue = new Map();
 
-    function enqueue(path, slideIndex, note, etag) {
-      let entry = queue.get(path);
-      if (!entry) {
-        entry = { pendingBySlide: new Map(), isDraining: false };
-        queue.set(path, entry);
-      }
-      entry.pendingBySlide.set(slideIndex, { note, etag });
-      if (!entry.isDraining) drain(path);
+    function enqueue(path, slideIndex, note, etag, origin) {
+      return new Promise((resolve) => {
+        let entry = queue.get(path);
+        if (!entry) {
+          entry = { pending: new Map(), isDraining: false };
+          queue.set(path, entry);
+        }
+        const key = buildKey(slideIndex, origin);
+        const existing = entry.pending.get(key);
+        if (existing) {
+          existing.resolve({ ok: false, reason: 'COALESCED' });
+        }
+        entry.pending.set(key, { slideIndex, note, etag, origin, resolve });
+        if (!entry.isDraining) drain(path);
+      });
     }
 
     async function drain(path) {
@@ -32,21 +54,25 @@
       if (!entry || entry.isDraining) return;
       entry.isDraining = true;
       try {
-        while (entry.pendingBySlide.size > 0) {
-          const it = entry.pendingBySlide.entries().next();
+        while (entry.pending.size > 0) {
+          const it = entry.pending.entries().next();
           if (it.done) break;
-          const [slideIndex, payload] = it.value;
-          entry.pendingBySlide.delete(slideIndex);
+          const [key, payload] = it.value;
+          entry.pending.delete(key);
+          let result;
           try {
-            await saveFn(path, slideIndex, payload.note, payload.etag);
+            result = await saveFn(
+              path, payload.slideIndex, payload.note, payload.etag, payload.origin
+            );
           } catch (err) {
-            // Caller logs; never let drain break.
             console.error('saveQueue saveFn error', err);
+            result = { ok: false, reason: String(err && err.message || err) };
           }
+          payload.resolve(result);
         }
       } finally {
         entry.isDraining = false;
-        if (entry.pendingBySlide.size === 0) queue.delete(path);
+        if (entry.pending.size === 0) queue.delete(path);
       }
     }
 
@@ -54,8 +80,11 @@
     function dropPath(path) {
       const entry = queue.get(path);
       if (!entry) return;
-      entry.pendingBySlide.clear();
-      // If a drain is isDraining, it will exit cleanly when the map is empty.
+      entry.pending.forEach((payload) => {
+        payload.resolve({ ok: false, reason: 'DROPPED' });
+      });
+      entry.pending.clear();
+      // If a drain is in-flight, it will exit cleanly once the map is empty.
       if (!entry.isDraining) queue.delete(path);
     }
 

package/src/static/presenter.html

@@ -536,10 +536,29 @@
     } else if (msg.type === 'note-saved') {
       const targetIdx = editingSlideIndex >= 0 ? editingSlideIndex : currentIndex;
       if (msg.slideIndex !== targetIdx) return;
-      // On our OWN successful save, advance editingEtag to the post-save
-      // etag so the next autosave in this focus session is not stale.
-      // External-edit broadcasts deliberately do NOT update editingEtag.
-      if (msg.ok && editing && msg.etag) editingEtag = msg.etag;
+      // Only OUR own successful saves should advance editingEtag. The
+      // inline notes panel in the main window goes through the same
+      // saveNote path and broadcasts the same shape; without this guard
+      // we'd rebase the presenter's pinned etag onto an inline save and
+      // the presenter's next autosave would silently overwrite the
+      // inline edit instead of returning a STALE conflict. Treat
+      // legacy/missing origin tags as our own to stay backwards-
+      // compatible with broadcasts from older builds.
+      const isOwnSave = !msg.origin
+        || msg.origin === 'presenter'
+        || msg.origin === 'unknown';
+
+      // While the presenter is mid-edit, don't let an inline save's
+      // result overwrite our save status / STALE backup. Showing
+      // 保存済み for someone else's save would mask the presenter's own
+      // pending draft, and an inline STALE backup would be written with
+      // the presenter's in-progress text under the wrong key. We also
+      // don't want to advance editingEtag for foreign saves (already
+      // gated by isOwnSave above). Bail out before the status / backup
+      // logic when the result isn't ours.
+      if (!isOwnSave && editing) return;
+
+      if (msg.ok && editing && isOwnSave && msg.etag) editingEtag = msg.etag;
 
       // STALE: back up the in-progress text to localStorage so the user can
       // recover after reloading the deck.

package/src/static/styles.css

@@ -911,9 +911,13 @@ body {
 .marp-slide img { max-width: 100%; max-height: 60vh; }
 .marp-slide .mermaid { margin: 16px 0; }
 
-/* Navigation Controls */
+/* Navigation Controls.
+   `position: fixed` keeps it visible while the user scrolls through long
+   speaker notes. The slide and notes panel use full width, so the nav
+   intentionally floats over them with a translucent backdrop — opacity
+   bumps to 1 on hover so it never blocks reading the content underneath. */
 .marp-nav {
-    position: absolute;
+    position: fixed;
     bottom: 24px;
     right: 24px;
     display: flex;
@@ -926,6 +930,14 @@ body {
     border: 1px solid var(--border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     user-select: none;
+    opacity: 0.85;
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    transition: opacity 0.15s ease;
+}
+
+.marp-nav:hover {
+    opacity: 1;
 }
 
 .marp-nav button {
@@ -1050,26 +1062,222 @@ body.marp-fullscreen .marpit > svg[data-marpit-svg] {
     display: none !important;
 }
 
+/* PowerPoint-style split layout: slide on top, speaker notes on bottom,
+   draggable horizontal handle in between. The notes row's height is a
+   CSS variable (--marp-notes-row, default 240px) that JS updates while
+   dragging and persists in localStorage. Setting it to 0 effectively
+   "closes" the notes pane; dragging the handle to the very top maxes it
+   out. The slide row uses 1fr so it absorbs the remaining height — making
+   notes bigger automatically shrinks the slide. */
+.marp-split {
+    display: grid;
+    grid-template-rows: 1fr 8px var(--marp-notes-row, 240px);
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+}
+
+.marp-slide-area {
+    overflow: auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px;
+    min-height: 0;
+}
+
+.marp-slide-area .marpit {
+    width: 100%;
+    max-height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.marp-slide-area .marpit > svg[data-marpit-svg] {
+    display: none;
+    max-width: 100%;
+    max-height: 100%;
+    height: auto;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    border-radius: 4px;
+}
+
+.marp-slide-area .marpit > svg[data-marpit-svg].active {
+    display: block;
+}
+
+.marp-split-handle {
+    cursor: row-resize;
+    background: var(--border);
+    position: relative;
+    user-select: none;
+    transition: background 0.15s ease;
+}
+
+.marp-split-handle::before {
+    content: '';
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 60px;
+    height: 3px;
+    background: var(--text-muted);
+    border-radius: 2px;
+    opacity: 0.45;
+}
+
+.marp-split-handle:hover {
+    background: var(--accent);
+}
+
+.marp-split-handle:hover::before {
+    background: white;
+    opacity: 1;
+}
+
+.marp-split-handle.dragging {
+    background: var(--accent);
+}
+
+.marp-notes-area {
+    overflow: auto;
+    background: var(--bg-secondary);
+    border-top: 1px solid var(--border);
+    min-height: 0;
+}
+
+.speaker-notes-panel {
+    display: none;
+    position: relative;
+    margin: 0;
+    padding: 12px 20px 20px;
+    font-size: 14px;
+    color: var(--text-primary);
+}
+
+.speaker-notes-panel.active {
+    display: block;
+}
+
+.speaker-notes-status {
+    position: absolute;
+    top: 12px;
+    right: 24px;
+    font-size: 12px;
+    color: var(--text-muted);
+    min-height: 16px;
+    font-weight: 400;
+    pointer-events: none;
+    user-select: none;
+}
+
+.speaker-notes-status:empty { display: none; }
+.speaker-notes-status.ok { color: var(--success, #2da44e); }
+.speaker-notes-status.err { color: var(--danger, #c93636); }
+
+.speaker-notes-banner {
+    margin: 0 0 8px;
+    padding: 8px 12px;
+    background: rgba(232, 152, 50, 0.12);
+    color: #c8851e;
+    border: 1px solid rgba(232, 152, 50, 0.3);
+    border-radius: 4px;
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.speaker-notes-banner[hidden] { display: none; }
+
+.speaker-notes-editor {
+    min-height: 60px;
+    padding: 10px 12px;
+    background: var(--bg-primary);
+    border: 1px solid var(--border);
+    border-radius: 4px;
+    line-height: 1.7;
+    white-space: pre-wrap;
+    word-break: break-word;
+    outline: none;
+    color: var(--text-primary);
+    caret-color: var(--accent);
+    cursor: text;
+}
+
+.speaker-notes-editor:focus {
+    border-color: var(--accent);
+    box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.15);
+}
+
+.speaker-notes-editor[contenteditable="false"] {
+    cursor: default;
+    color: var(--text-muted);
+    background: var(--bg-tertiary);
+}
+
+/* CSS pseudo-element placeholder — never enters textContent so editing
+   can never accidentally save the placeholder string as a real note. */
+.speaker-notes-editor[data-placeholder]:empty::before {
+    content: attr(data-placeholder);
+    color: var(--text-muted);
+    font-style: italic;
+    pointer-events: none;
+}
+
+body.marp-fullscreen .marp-split {
+    grid-template-rows: 1fr 0 0;
+}
+
+body.marp-fullscreen .marp-split-handle,
+body.marp-fullscreen .marp-notes-area {
+    display: none !important;
+}
+
 /* Print styles for Marp */
 @media print {
-    .marp-nav { display: none !important; }
+    .marp-nav,
+    .marp-split-handle,
+    .marp-notes-area,
+    .speaker-notes-panel { display: none !important; }
+
+    .marp-split {
+        display: block !important;
+        height: auto !important;
+        overflow: visible !important;
+    }
+
+    .marp-slide-area {
+        display: block !important;
+        overflow: visible !important;
+        padding: 0 !important;
+    }
 
     .marpit {
         padding: 0 !important;
         background: transparent !important;
+        /* The runtime layout makes .marpit a row-oriented flex container
+           so the active SVG can be centered; for printing, force it back
+           to block flow so each `display: block` SVG honors page-break-
+           after and lands on its own page (otherwise multi-slide PDFs
+           collapse into a single wide row). */
+        display: block !important;
     }
 
+    .marp-slide-area .marpit > svg[data-marpit-svg],
     .marpit > svg[data-marpit-svg] {
         display: block !important;
         width: 100% !important;
         height: auto !important;
         max-width: none !important;
+        max-height: none !important;
         box-shadow: none !important;
         border-radius: 0 !important;
         page-break-after: always;
         page-break-inside: avoid;
     }
 
+    .marp-slide-area .marpit > svg[data-marpit-svg]:last-child,
     .marpit > svg[data-marpit-svg]:last-child { page-break-after: avoid; }
 
     .marp-presentation { height: auto !important; }