mdv-live 0.5.4 → 0.5.8

package/src/static/index.html

@@ -95,6 +95,13 @@
                     PDF
                 </button>
 
+                <button class="toolbar-btn" id="pdfStyleToggle" title="PDF style settings" aria-label="PDF style settings">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
+                    </svg>
+                    Style
+                </button>
+
                 <div class="toolbar-spacer"></div>
 
                 <span class="editor-status" id="editorStatus" style="display: none;">Ready</span>
@@ -110,6 +117,19 @@
                 </div>
             </div>
 
+            <div class="pdf-style-panel hidden" id="pdfStylePanel">
+                <label>
+                    <span>CSS</span>
+                    <input type="text" id="pdfStylePath" placeholder="src/styles/report.example.css">
+                </label>
+                <label>
+                    <span>PDF options</span>
+                    <input type="text" id="pdfOptionsPath" placeholder="src/styles/report.pdf-options.example.json">
+                </label>
+                <button class="toolbar-btn" id="pdfStyleApply">Apply</button>
+                <button class="toolbar-btn" id="pdfStyleClear">Clear</button>
+            </div>
+
             <!-- Tab bar -->
             <div class="tab-bar" id="tabBar" role="tablist" aria-label="Open files"></div>
 
@@ -157,6 +177,10 @@
     <!-- Hidden File Input -->
     <input type="file" id="fileInput" multiple hidden>
 
+    <script src="/static/lib/presenterChannel.js"></script>
+    <script src="/static/lib/apiClient.js"></script>
+    <script src="/static/lib/saveQueue.js"></script>
+    <script src="/static/lib/tabRegistry.js"></script>
     <script src="/static/app.js"></script>
 </body>
 </html>

package/src/static/lib/apiClient.js

@@ -0,0 +1,73 @@
+/**
+ * Thin HTTP client used by the main MDV window.
+ *
+ * Centralizes URL construction, common headers (If-Match), JSON parsing, and
+ * error normalization. Loaded as a classic `<script>` so the API is exposed
+ * on `window.MDVApi`.
+ */
+(function () {
+  'use strict';
+
+  async function jsonOrEmpty(res) {
+    try { return await res.json(); } catch { return {}; }
+  }
+
+  /** GET /api/marp/decks/:path */
+  async function getDeck(path) {
+    const res = await fetch('/api/marp/decks/' + encodeURIComponent(path));
+    return { res, data: await jsonOrEmpty(res) };
+  }
+
+  /** PUT /api/marp/decks/:path/slides/:N/note (If-Match required) */
+  async function saveMarpNote(path, slideIndex, note, ifMatch) {
+    const url = '/api/marp/decks/' + encodeURIComponent(path)
+      + '/slides/' + slideIndex + '/note';
+    const res = await fetch(url, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+        'If-Match': ifMatch
+      },
+      body: JSON.stringify({ note })
+    });
+    return { res, data: await jsonOrEmpty(res) };
+  }
+
+  // --- Other MDV endpoints used throughout the app -------------------------
+
+  function fetchTree() { return fetch('/api/tree'); }
+  function expandTree(path) {
+    return fetch('/api/tree/expand?path=' + encodeURIComponent(path));
+  }
+  function fetchFile(path) {
+    return fetch('/api/file?path=' + encodeURIComponent(path));
+  }
+  function saveFile(path, content) {
+    return fetch('/api/file', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ path, content })
+    });
+  }
+  function fetchInfo() { return fetch('/api/info'); }
+  function exportPdf(payload) {
+    return fetch('/api/pdf/export', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+  }
+
+  if (typeof globalThis !== 'undefined') {
+    globalThis.MDVApi = {
+      getDeck,
+      saveMarpNote,
+      fetchTree,
+      expandTree,
+      fetchFile,
+      saveFile,
+      fetchInfo,
+      exportPdf
+    };
+  }
+})();

package/src/static/lib/presenterChannel.js

@@ -0,0 +1,33 @@
+/**
+ * Single source of truth for the BroadcastChannel name and message schemas
+ * used between the main MDV window and the Presenter window.
+ *
+ * Imported from a `<script>` tag (no module loader) so we expose globals on
+ * `window.MDVPresenterChannel`.
+ *
+ * Message types (discriminated by `type`):
+ *
+ *   main → presenter
+ *     { type: 'slides', path, html, css, etag, notes, notesMultiplicity, current }
+ *     { type: 'slides', empty: true, reason }                    ← clear / no-deck
+ *     { type: 'index', index }
+ *     { type: 'note-saved', slideIndex, ok, etag?, normalizedNote?, code?, reason? }
+ *
+ *   presenter → main
+ *     { type: 'request-slides' }
+ *     { type: 'goto', index }
+ *     { type: 'edit-note', path, etag, slideIndex, note }
+ */
+(function () {
+  'use strict';
+  const CHANNEL_NAME = 'mdv-marp-presenter';
+
+  function create() {
+    if (typeof BroadcastChannel === 'undefined') return null;
+    return new BroadcastChannel(CHANNEL_NAME);
+  }
+
+  if (typeof globalThis !== 'undefined') {
+    globalThis.MDVPresenterChannel = { CHANNEL_NAME, create };
+  }
+})();

package/src/static/lib/saveQueue.js

@@ -0,0 +1,71 @@
+/**
+ * Per-deck save queue with per-slide 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.
+ *
+ * Loaded as a classic <script>; exposes window.MDVSaveQueue.
+ */
+(function () {
+  'use strict';
+
+  function createSaveQueue({ saveFn }) {
+    /** @type {Map<string, { pendingBySlide: Map<number, {note:string, etag:string|null}>, 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);
+    }
+
+    async function drain(path) {
+      const entry = queue.get(path);
+      if (!entry || entry.isDraining) return;
+      entry.isDraining = true;
+      try {
+        while (entry.pendingBySlide.size > 0) {
+          const it = entry.pendingBySlide.entries().next();
+          if (it.done) break;
+          const [slideIndex, payload] = it.value;
+          entry.pendingBySlide.delete(slideIndex);
+          try {
+            await saveFn(path, slideIndex, payload.note, payload.etag);
+          } catch (err) {
+            // Caller logs; never let drain break.
+            console.error('saveQueue saveFn error', err);
+          }
+        }
+      } finally {
+        entry.isDraining = false;
+        if (entry.pendingBySlide.size === 0) queue.delete(path);
+      }
+    }
+
+    /** Drop all pending edits for a path (e.g. when its tab is closed). */
+    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.
+      if (!entry.isDraining) queue.delete(path);
+    }
+
+    /** Test/observation helper. */
+    function _size() { return queue.size; }
+
+    return { enqueue, drain, dropPath, _size };
+  }
+
+  if (typeof globalThis !== 'undefined') {
+    globalThis.MDVSaveQueue = { createSaveQueue };
+  }
+})();

package/src/static/lib/tabRegistry.js

@@ -0,0 +1,32 @@
+/**
+ * Lightweight tab life-cycle hub.
+ *
+ * Subscribers (e.g. PresenterView) register cleanup callbacks once at init
+ * time, and TabManager fires `notifyClosed(path)` when a tab is closed.
+ * Solves the memory leak the audit found in `lastSavedEtag` and the save
+ * queue when users open and close many decks.
+ */
+(function () {
+  'use strict';
+
+  const closeListeners = [];
+  const switchListeners = [];
+
+  function onTabClosed(fn) { if (typeof fn === 'function') closeListeners.push(fn); }
+  function onTabSwitched(fn) { if (typeof fn === 'function') switchListeners.push(fn); }
+
+  function notifyClosed(path) {
+    for (const fn of closeListeners) {
+      try { fn(path); } catch (err) { console.error('tabRegistry close listener error', err); }
+    }
+  }
+  function notifySwitched(activePath) {
+    for (const fn of switchListeners) {
+      try { fn(activePath); } catch (err) { console.error('tabRegistry switch listener error', err); }
+    }
+  }
+
+  if (typeof globalThis !== 'undefined') {
+    globalThis.MDVTabRegistry = { onTabClosed, onTabSwitched, notifyClosed, notifySwitched };
+  }
+})();