npm - @helping-ai-workflow/md2doc - Versions diffs - 2.4.2 → 2.6.0 - Mend

@helping-ai-workflow/md2doc 2.4.2 → 2.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md CHANGED Viewed

@@ -98,6 +98,25 @@ A reference with no file on disk keeps its original `src` and prints
 Each reference carries its own copy of the payload, so re-using one large diagram
 in several places grows the HTML accordingly. PDF output is unaffected.
+### Viewing diagrams
+Click any image, Mermaid, Graphviz or WaveDrom graphic in the rendered HTML to open it
+full-screen.
+| Input | Action |
+|---|---|
+| Wheel / shift+wheel | Scroll vertically / horizontally |
+| Ctrl (or ⌘) + wheel | Zoom around the pointer |
+| Drag | Pan |
+| `+` `-` | Zoom in / out |
+| `0` `1` | Fit to window / actual size |
+| Double-click | Toggle fit ↔ 100% |
+| `Esc`, ✕, backdrop click | Close |
+Vector diagrams open scaled to fill the window; raster images open at actual size. An
+image wrapped in a link stays a link. The overlay is hidden in print and never reaches
+the PDF output.
 ### Migration from md2html / md2pdf (v1.x → v2.0.0)
 | Old | New |

package/lib/md2doc.js CHANGED Viewed

@@ -706,7 +706,7 @@ ${itemsHtml}
     const tocTree = buildTocTree(tocItems);
     tocHtml = `<aside class="reader-sidebar" data-reader-sidebar>
   <section class="reader-tools">
-    <label class="reader-search-label" for="doc-search-input">Search this spec</label>
+    <label class="reader-search-label" for="doc-search-input">Search</label>
     <div class="reader-search-row">
       <input type="search" id="doc-search-input" placeholder="Enter keyword and press Enter">
       <button id="doc-search-submit" type="button">Search</button>
@@ -733,7 +733,8 @@ ${itemsHtml}
     </div>
     ${renderTocNodes(tocTree)}
   </nav>
-</aside>`;
+</aside>
+<div class="sidebar-splitter" id="sidebar-splitter" role="separator" aria-orientation="vertical" aria-label="Resize sidebar"></div>`;
   }
 } catch (e) {
   console.error('[ERROR] marked not found — install with: npm install marked');
@@ -765,7 +766,9 @@ const html = `<!DOCTYPE html>
   .page-layout {
     display: flex;
     align-items: flex-start;
-    gap: 32px;
+    /* Sidebar/content spacing is carried by .sidebar-splitter (32px), not gap,
+       so the drag handle can live inside the visual gutter. */
+    gap: 0;
     margin: 0;
     padding: 24px 24px 48px;
     max-width: 100%;
@@ -774,9 +777,9 @@ const html = `<!DOCTYPE html>
   .reader-sidebar {
     position: sticky;
     top: 24px;
-    flex: 0 1 300px;
-    width: clamp(220px, 22vw, 300px);
-    min-width: 220px;
+    flex: 0 0 auto;
+    width: var(--md2doc-sidebar-w, clamp(220px, 22vw, 300px));
+    min-width: 0;
     height: calc(100vh - 48px);
     overflow: hidden;
     padding-right: 8px;
@@ -817,6 +820,32 @@ const html = `<!DOCTYPE html>
   body[data-toc-collapsed] .toc-header-actions {
     justify-content: center;
   }
+  .sidebar-splitter {
+    flex: 0 0 32px;
+    align-self: stretch;
+    cursor: col-resize;
+    display: flex;
+    justify-content: center;
+    touch-action: none;
+    user-select: none;
+  }
+  .sidebar-splitter::before {
+    content: '';
+    width: 3px;
+    border-radius: 2px;
+    background: transparent;
+    transition: background 0.15s ease;
+  }
+  .sidebar-splitter:hover::before,
+  .sidebar-splitter.is-dragging::before {
+    background: #93c5fd;
+  }
+  body[data-toc-collapsed] .sidebar-splitter {
+    cursor: default;
+  }
+  body[data-toc-collapsed] .sidebar-splitter::before {
+    display: none;
+  }
   #toc-collapse-toggle {
     margin-left: 0;
     padding: 2px 8px;
@@ -1032,6 +1061,16 @@ const html = `<!DOCTYPE html>
     font-size: 0.82em;
     color: #57606a;
     line-height: 1.35;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .search-result-snippet mark {
+    background: #fde68a;
+    color: inherit;
+    padding: 0 1px;
+    border-radius: 2px;
   }
   .search-empty {
     margin: 0;
@@ -1056,6 +1095,8 @@ const html = `<!DOCTYPE html>
     flex: 1 1 auto;
     min-height: 0;
     overflow-y: auto;
+    /* Horizontal peek: no scrollbar, position driven by shift+wheel only. */
+    overflow-x: hidden;
   }
   .toc ul {
     list-style: none;
@@ -1074,21 +1115,19 @@ const html = `<!DOCTYPE html>
   }
   .toc a {
     display: block;
-    max-width: 100%;
+    /* Full natural width (no ellipsis) so shift+wheel can peek clipped tails;
+       min-width keeps hover/match backgrounds covering the whole row. */
+    width: max-content;
+    min-width: 100%;
     color: #57606a;
     text-decoration: none;
     padding: 2px 0;
     line-height: 1.4;
     white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
     box-sizing: border-box;
   }
-  /* Parent rows put the anchor inside a flex <summary>; default flex min-width
-     is auto, which would block ellipsis. Allow the anchor to shrink + clip. */
   .toc summary > a {
-    min-width: 0;
-    flex: 0 1 auto;
+    flex: 0 0 auto;
   }
   .toc summary {
     min-width: 0;
@@ -1282,6 +1321,82 @@ const html = `<!DOCTYPE html>
     height: auto;
     margin: 0 auto;
   }
+  /* Anything the reader can pop out. The click handler uses the same
+     selectors, so this cursor and that behaviour cannot drift apart. */
+  .content img,
+  .content .mermaid,
+  .content .graphviz,
+  .content [id^="WaveDrom_Display_"] { cursor: zoom-in; }
+  .content a img { cursor: pointer; }
+  .lightbox {
+    position: fixed;
+    inset: 0;
+    z-index: 200;
+    display: flex;
+    flex-direction: column;
+    background: rgba(16, 18, 21, 0.92);
+  }
+  .lightbox[hidden] { display: none; }
+  .lightbox-bar {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 6px;
+    padding: 8px 12px;
+    background: rgba(0, 0, 0, 0.35);
+    color: #e6edf3;
+    font-size: 13px;
+  }
+  .lightbox-bar button {
+    min-width: 32px;
+    height: 28px;
+    padding: 0 10px;
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.08);
+    color: inherit;
+    font: inherit;
+    line-height: 1;
+    cursor: pointer;
+  }
+  .lightbox-bar button:hover { background: rgba(255, 255, 255, 0.18); }
+  .lightbox-zoom-value {
+    min-width: 56px;
+    text-align: center;
+    font-variant-numeric: tabular-nums;
+  }
+  .lightbox-hint {
+    margin-right: auto;
+    opacity: 0.7;
+    font-size: 12px;
+  }
+  /* position: relative makes the stage the canvas's offsetParent, which the
+     cursor-anchored zoom maths depends on. */
+  .lightbox-stage {
+    position: relative;
+    flex: 1 1 auto;
+    overflow: auto;
+    cursor: grab;
+    overscroll-behavior: contain;
+  }
+  .lightbox-stage[data-panning] { cursor: grabbing; }
+  .lightbox-canvas { margin: 0 auto; }
+  /* Sized in px by the runtime; the child follows, so the scroll extent grows
+     with the zoom. A CSS transform would scale the pixels and leave the scroll
+     area at the original size, stranding the edges out of reach. */
+  .lightbox-canvas > * {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    background: #ffffff;
+  }
+  body[data-lightbox-open] { overflow: hidden; }
+  @media print { .lightbox { display: none !important; } }
   @media (max-width: 1080px) {
     .sidebar-toggle { display: inline-flex; align-items: center; }
     .page-layout {
@@ -1311,6 +1426,7 @@ const html = `<!DOCTYPE html>
       flex: initial;
     }
     body[data-sidebar-open] .reader-sidebar { transform: translateX(0); }
+    .sidebar-splitter { display: none; }
     .heading-anchor { opacity: 1; }
   }
   @media print {
@@ -1323,6 +1439,7 @@ const html = `<!DOCTYPE html>
     }
     .reader-sidebar,
     .sidebar-toggle,
+    .sidebar-splitter,
     .sidebar-scrim { display: none !important; }
     .content { max-width: 100%; }
     .heading-anchor { display: none; }
@@ -1539,14 +1656,24 @@ ${mermaidInitTag}` : ''}
     const lower = haystack.toLowerCase();
     const index = lower.indexOf(query);
     if (index === -1) {
-      return haystack.slice(0, 140);
+      return { text: haystack.slice(0, 80), matchStart: -1, matchLength: 0 };
     }
-    const start = Math.max(0, index - 50);
-    const end = Math.min(haystack.length, index + query.length + 70);
-    let snippet = haystack.slice(start, end).trim();
-    if (start > 0) snippet = '…' + snippet;
-    if (end < haystack.length) snippet += '…';
-    return snippet;
+    const start = Math.max(0, index - 25);
+    const end = Math.min(haystack.length, index + query.length + 45);
+    let text = haystack.slice(start, end);
+    let matchStart = index - start;
+    if (start > 0) { text = '…' + text; matchStart += 1; }
+    if (end < haystack.length) text += '…';
+    return { text, matchStart, matchLength: query.length };
+  }
+  function renderSnippetHtml(snippet) {
+    if (!snippet) return '';
+    if (snippet.matchStart < 0) return escapeHtml(snippet.text);
+    const before = snippet.text.slice(0, snippet.matchStart);
+    const hit = snippet.text.slice(snippet.matchStart, snippet.matchStart + snippet.matchLength);
+    const after = snippet.text.slice(snippet.matchStart + snippet.matchLength);
+    return escapeHtml(before) + '<mark>' + escapeHtml(hit) + '</mark>' + escapeHtml(after);
   }
   function clearMatchedTocState() {
@@ -1608,7 +1735,7 @@ ${mermaidInitTag}` : ''}
     list.innerHTML = readerState.results.map((result, index) => (
       '<button class="search-result-item' + (index === readerState.selectedResultIndex ? ' is-active' : '') + '" data-result-index="' + index + '" type="button">'
       + '<span class="search-result-title">' + escapeHtml(result.title) + '</span>'
-      + '<span class="search-result-snippet">' + escapeHtml(result.snippet) + '</span>'
+      + '<span class="search-result-snippet">' + renderSnippetHtml(result.snippet) + '</span>'
       + '</button>'
     )).join('');
   }
@@ -1857,6 +1984,7 @@ ${mermaidInitTag}` : ''}
     sidebarScrim.addEventListener('click', () => setSidebarOpen(false));
   }
   document.addEventListener('keydown', (event) => {
+    if (lightboxIsOpen()) return;
     if (event.key === 'Escape' && document.body.hasAttribute('data-sidebar-open')) {
       setSidebarOpen(false);
     }
@@ -1869,6 +1997,70 @@ ${mermaidInitTag}` : ''}
     }
   });
+  // ── Sidebar splitter: drag to resize, persisted; double-click resets ─────
+  const sidebarEl = document.querySelector('.reader-sidebar');
+  const splitterEl = document.getElementById('sidebar-splitter');
+  const SIDEBAR_WIDTH_KEY = 'md2doc.sidebar.width';
+  function clampSidebarWidth(px) {
+    return Math.min(Math.max(px, 180), Math.round(window.innerWidth * 0.5));
+  }
+  function applySidebarWidth(px) {
+    document.documentElement.style.setProperty('--md2doc-sidebar-w', px + 'px');
+  }
+  try {
+    const storedWidth = parseInt(localStorage.getItem(SIDEBAR_WIDTH_KEY), 10);
+    if (Number.isFinite(storedWidth)) applySidebarWidth(clampSidebarWidth(storedWidth));
+  } catch (e) { /* storage unavailable */ }
+  if (splitterEl && sidebarEl) {
+    let dragging = false;
+    let dragMoved = false;
+    let dragStartX = 0;
+    let dragStartWidth = 0;
+    splitterEl.addEventListener('pointerdown', (event) => {
+      if (document.body.hasAttribute('data-toc-collapsed')) return;
+      dragging = true;
+      dragMoved = false;
+      dragStartX = event.clientX;
+      dragStartWidth = sidebarEl.offsetWidth;
+      splitterEl.classList.add('is-dragging');
+      if (splitterEl.setPointerCapture) splitterEl.setPointerCapture(event.pointerId);
+      event.preventDefault();
+    });
+    splitterEl.addEventListener('pointermove', (event) => {
+      if (!dragging) return;
+      const delta = event.clientX - dragStartX;
+      if (Math.abs(delta) >= 3) dragMoved = true;
+      if (dragMoved) applySidebarWidth(clampSidebarWidth(dragStartWidth + delta));
+    });
+    function endSidebarDrag() {
+      if (!dragging) return;
+      dragging = false;
+      splitterEl.classList.remove('is-dragging');
+      if (!dragMoved) return;
+      try { localStorage.setItem(SIDEBAR_WIDTH_KEY, String(sidebarEl.offsetWidth)); }
+      catch (e) { /* storage unavailable */ }
+    }
+    splitterEl.addEventListener('pointerup', endSidebarDrag);
+    splitterEl.addEventListener('pointercancel', endSidebarDrag);
+    splitterEl.addEventListener('dblclick', () => {
+      document.documentElement.style.removeProperty('--md2doc-sidebar-w');
+      try { localStorage.removeItem(SIDEBAR_WIDTH_KEY); }
+      catch (e) { /* storage unavailable */ }
+    });
+  }
+  // ── TOC horizontal peek: shift+wheel scrolls a hidden-overflow x-axis ─────
+  const tocScrollEl = document.querySelector('.toc > .toc-list');
+  if (tocScrollEl) {
+    tocScrollEl.addEventListener('wheel', (event) => {
+      if (!event.shiftKey) return;
+      const delta = event.deltaX !== 0 ? event.deltaX : event.deltaY;
+      if (!delta) return;
+      event.preventDefault();
+      tocScrollEl.scrollLeft += delta;
+    }, { passive: false });
+  }
   // ── Zoom / resize scroll anchoring ────────────────────────────────────────
   // Browser zoom (and any window resize) reflows the column but leaves the
   // pixel scroll offset untouched, so the passage being read slides out of
@@ -1945,6 +2137,251 @@ ${mermaidInitTag}` : ''}
   });
   captureScrollAnchor();
+  // ── Diagram / image lightbox ──────────────────────────────────────────────
+  // Specs are read at 100% but their block diagrams and waveforms are drawn far
+  // wider than the column, so the inline copy is unreadably small. Clicking one
+  // pops it into a modal stage that zooms and scrolls.
+  var LIGHTBOX_TARGETS = 'img, .mermaid, .graphviz, [id^="WaveDrom_Display_"]';
+  var LIGHTBOX_MIN_ZOOM = 0.05;
+  var LIGHTBOX_MAX_ZOOM = 8;
+  var LIGHTBOX_STEP = 1.25;
+  var lightboxEl = null;
+  var lightboxStage = null;
+  var lightboxCanvas = null;
+  var lightboxZoomValue = null;
+  var lightboxZoom = 1;
+  var lightboxFitZoom = 1;
+  var lightboxNaturalW = 1;
+  var lightboxNaturalH = 1;
+  var lightboxReturnScroll = 0;
+  function lightboxIsOpen() {
+    return !!lightboxEl && !lightboxEl.hidden;
+  }
+  function lightboxButton(label, title, onClick) {
+    var button = document.createElement('button');
+    button.type = 'button';
+    button.textContent = label;
+    button.title = title;
+    button.setAttribute('aria-label', title);
+    button.addEventListener('click', onClick);
+    return button;
+  }
+  function computeLightboxFit(isVector) {
+    var pad = 24;
+    var byWidth = (lightboxStage.clientWidth - pad) / lightboxNaturalW;
+    var byHeight = (lightboxStage.clientHeight - pad) / lightboxNaturalH;
+    var fit = Math.min(byWidth, byHeight);
+    if (!isFinite(fit) || fit <= 0) return 1;
+    // Vector art fills the window — a waveform authored at 480px wide is the
+    // whole reason for popping it out. A raster image stops at actual size,
+    // where enlarging past 100% only buys blur.
+    return isVector ? fit : Math.min(fit, 1);
+  }
+  function setLightboxZoom(next, anchorX, anchorY) {
+    if (!lightboxCanvas) return;
+    var clamped = Math.min(LIGHTBOX_MAX_ZOOM, Math.max(LIGHTBOX_MIN_ZOOM, next));
+    var stage = lightboxStage;
+    var ax = (typeof anchorX === 'number') ? anchorX : stage.clientWidth / 2;
+    var ay = (typeof anchorY === 'number') ? anchorY : stage.clientHeight / 2;
+    // Keep whatever sits under the anchor point pinned across the zoom.
+    var contentX = stage.scrollLeft + ax - lightboxCanvas.offsetLeft;
+    var contentY = stage.scrollTop + ay - lightboxCanvas.offsetTop;
+    var ratio = clamped / lightboxZoom;
+    lightboxZoom = clamped;
+    // Width in px, not a transform: the scroll extent has to grow with the
+    // zoom, or the enlarged edges can never be scrolled into view.
+    lightboxCanvas.style.width = Math.max(1, Math.round(lightboxNaturalW * clamped)) + 'px';
+    if (lightboxZoomValue) {
+      lightboxZoomValue.textContent = Math.round(clamped * 100) + '%';
+    }
+    stage.scrollLeft = contentX * ratio - ax + lightboxCanvas.offsetLeft;
+    stage.scrollTop = contentY * ratio - ay + lightboxCanvas.offsetTop;
+  }
+  function zoomLightboxBy(factor, anchorX, anchorY) {
+    setLightboxZoom(lightboxZoom * factor, anchorX, anchorY);
+  }
+  function buildLightbox() {
+    if (lightboxEl) return;
+    lightboxEl = document.createElement('div');
+    lightboxEl.className = 'lightbox';
+    lightboxEl.hidden = true;
+    lightboxEl.setAttribute('role', 'dialog');
+    lightboxEl.setAttribute('aria-modal', 'true');
+    var bar = document.createElement('div');
+    bar.className = 'lightbox-bar';
+    var hint = document.createElement('span');
+    hint.className = 'lightbox-hint';
+    hint.textContent = 'scroll to pan · shift+scroll sideways · ctrl+scroll to zoom · drag to pan · esc to close';
+    lightboxZoomValue = document.createElement('span');
+    lightboxZoomValue.className = 'lightbox-zoom-value';
+    lightboxZoomValue.setAttribute('data-lightbox-zoom-value', '');
+    bar.appendChild(hint);
+    bar.appendChild(lightboxButton('−', 'Zoom out', function () { zoomLightboxBy(1 / LIGHTBOX_STEP); }));
+    bar.appendChild(lightboxZoomValue);
+    bar.appendChild(lightboxButton('+', 'Zoom in', function () { zoomLightboxBy(LIGHTBOX_STEP); }));
+    bar.appendChild(lightboxButton('Fit', 'Fit to window', function () { setLightboxZoom(lightboxFitZoom); }));
+    bar.appendChild(lightboxButton('1:1', 'Actual size', function () { setLightboxZoom(1); }));
+    bar.appendChild(lightboxButton('✕', 'Close', closeLightbox));
+    lightboxStage = document.createElement('div');
+    lightboxStage.className = 'lightbox-stage';
+    lightboxCanvas = document.createElement('div');
+    lightboxCanvas.className = 'lightbox-canvas';
+    lightboxStage.appendChild(lightboxCanvas);
+    lightboxEl.appendChild(bar);
+    lightboxEl.appendChild(lightboxStage);
+    document.body.appendChild(lightboxEl);
+    var panning = false;
+    var panX = 0;
+    var panY = 0;
+    var panDistance = 0;
+    lightboxStage.addEventListener('wheel', function (event) {
+      // Plain and shift+wheel stay native scrolling — that is the pan.
+      if (!event.ctrlKey && !event.metaKey) return;
+      event.preventDefault();
+      var rect = lightboxStage.getBoundingClientRect();
+      zoomLightboxBy(
+        event.deltaY < 0 ? LIGHTBOX_STEP : 1 / LIGHTBOX_STEP,
+        event.clientX - rect.left,
+        event.clientY - rect.top
+      );
+    }, { passive: false });
+    lightboxStage.addEventListener('mousedown', function (event) {
+      if (event.button !== 0) return;
+      panning = true;
+      panDistance = 0;
+      panX = event.clientX;
+      panY = event.clientY;
+      lightboxStage.setAttribute('data-panning', '');
+      event.preventDefault();
+    });
+    document.addEventListener('mousemove', function (event) {
+      if (!panning) return;
+      var dx = event.clientX - panX;
+      var dy = event.clientY - panY;
+      panX = event.clientX;
+      panY = event.clientY;
+      panDistance += Math.abs(dx) + Math.abs(dy);
+      lightboxStage.scrollLeft -= dx;
+      lightboxStage.scrollTop -= dy;
+    });
+    document.addEventListener('mouseup', function () {
+      if (!panning) return;
+      panning = false;
+      lightboxStage.removeAttribute('data-panning');
+    });
+    lightboxStage.addEventListener('click', function (event) {
+      if (panDistance > 4) return;
+      // Only the empty backdrop closes; a click on the artwork must not.
+      if (event.target === lightboxStage) closeLightbox();
+    });
+    lightboxStage.addEventListener('dblclick', function (event) {
+      event.preventDefault();
+      setLightboxZoom(Math.abs(lightboxZoom - 1) < 0.001 ? lightboxFitZoom : 1);
+    });
+  }
+  function lightboxSourceOf(node) {
+    if (node.tagName === 'IMG') return node;
+    return node.querySelector('svg') || node;
+  }
+  function lightboxNaturalSize(source) {
+    if (source.tagName === 'IMG') {
+      return { w: source.naturalWidth || source.clientWidth || 1, h: source.naturalHeight || source.clientHeight || 1 };
+    }
+    var box = source.viewBox ? source.viewBox.baseVal : null;
+    if (box && box.width) return { w: box.width, h: box.height };
+    var rect = source.getBoundingClientRect();
+    return { w: rect.width || 1, h: rect.height || 1 };
+  }
+  function openLightbox(node) {
+    buildLightbox();
+    var source = lightboxSourceOf(node);
+    var size = lightboxNaturalSize(source);
+    lightboxNaturalW = Math.max(1, Math.round(size.w));
+    lightboxNaturalH = Math.max(1, Math.round(size.h));
+    var isVector = !!(source.tagName && source.tagName.toLowerCase() === 'svg');
+    var clone = source.cloneNode(true);
+    clone.removeAttribute('id');
+    clone.removeAttribute('class');
+    clone.removeAttribute('style');
+    clone.removeAttribute('width');
+    clone.removeAttribute('height');
+    if (isVector && !clone.getAttribute('viewBox')) {
+      clone.setAttribute('viewBox', '0 0 ' + lightboxNaturalW + ' ' + lightboxNaturalH);
+    }
+    while (lightboxCanvas.firstChild) {
+      lightboxCanvas.removeChild(lightboxCanvas.firstChild);
+    }
+    lightboxCanvas.appendChild(clone);
+    lightboxReturnScroll = window.scrollY;
+    suppressAnchorCapture = true;
+    document.body.setAttribute('data-lightbox-open', '');
+    lightboxEl.hidden = false;
+    lightboxStage.scrollTop = 0;
+    lightboxStage.scrollLeft = 0;
+    lightboxZoom = 1;
+    lightboxFitZoom = computeLightboxFit(isVector);
+    setLightboxZoom(lightboxFitZoom);
+  }
+  function closeLightbox() {
+    if (!lightboxIsOpen()) return;
+    lightboxEl.hidden = true;
+    document.body.removeAttribute('data-lightbox-open');
+    while (lightboxCanvas.firstChild) {
+      lightboxCanvas.removeChild(lightboxCanvas.firstChild);
+    }
+    window.scrollTo(window.scrollX, lightboxReturnScroll);
+    window.requestAnimationFrame(function () {
+      suppressAnchorCapture = false;
+      captureScrollAnchor();
+    });
+  }
+  if (contentEl) {
+    contentEl.addEventListener('click', function (event) {
+      if (event.defaultPrevented || event.button !== 0) return;
+      if (event.ctrlKey || event.metaKey || event.shiftKey || event.altKey) return;
+      var target = (event.target && event.target.closest) ? event.target.closest(LIGHTBOX_TARGETS) : null;
+      if (!target) return;
+      // A linked image is a link first.
+      if (target.closest('a[href]')) return;
+      event.preventDefault();
+      openLightbox(target);
+    });
+  }
+  document.addEventListener('keydown', function (event) {
+    if (!lightboxIsOpen()) return;
+    if (event.key === 'Escape') { event.preventDefault(); closeLightbox(); return; }
+    if (event.key === '+' || event.key === '=') { event.preventDefault(); zoomLightboxBy(LIGHTBOX_STEP); return; }
+    if (event.key === '-' || event.key === '_') { event.preventDefault(); zoomLightboxBy(1 / LIGHTBOX_STEP); return; }
+    if (event.key === '0') { event.preventDefault(); setLightboxZoom(lightboxFitZoom); return; }
+    if (event.key === '1') { event.preventDefault(); setLightboxZoom(1); }
+  });
+  window.addEventListener('resize', function () {
+    if (!lightboxIsOpen()) return;
+    var shown = lightboxCanvas.firstElementChild;
+    lightboxFitZoom = computeLightboxFit(!!(shown && shown.tagName.toLowerCase() === 'svg'));
+  });
 })();
 </script>
 </body>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "2.4.2",
+  "version": "2.6.0",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, and Graphviz support",
   "keywords": [
     "markdown",
@@ -36,7 +36,7 @@
   },
   "scripts": {
     "preinstall": "node scripts/preinstall.js",
-    "test": "node test/md2doc.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/cli.test.js && node test/code-operator.test.js"
+    "test": "node test/md2doc.test.js && node test/images.test.js && node test/scroll-anchor.test.js && node test/lightbox.test.js && node test/reader-panels.test.js && node test/cli.test.js && node test/code-operator.test.js"
   },
   "repository": {
     "type": "git",