@helping-ai-workflow/md2doc 3.16.0 → 3.16.1

package/lib/md2doc.js

@@ -2905,6 +2905,34 @@ const html = `<!DOCTYPE html>
     max-width: 100%;
     margin: 0 auto;
   }
+  /* v3.16.1: a capture tool hides every sticky element after its first slice,
+     so a sticky first column came out blank from the second screen down. The
+     runtime also widens each box that scrolls sideways (fitWideBoxes); the
+     rules below are its last resort, for a box still wider than the screen. */
+  body[data-capture-mode] .content table tbody td:first-child,
+  body[data-capture-mode] .content table thead th:first-child {
+    position: static;
+  }
+  body[data-capture-mode] .content table.capture-wrap th:not(.cell-narrow),
+  body[data-capture-mode] .content table.capture-wrap td:not(.cell-narrow),
+  body[data-capture-mode] .content table.capture-wrap td:not(.cell-narrow) code {
+    white-space: normal;
+    overflow-wrap: break-word;
+    min-width: 0;
+  }
+  body[data-capture-mode] .content table.capture-wrap th,
+  body[data-capture-mode] .content table.capture-wrap td {
+    padding: 0.4em 0.6em;
+  }
+  body[data-capture-mode] .content pre.capture-wrap,
+  body[data-capture-mode] .content pre.capture-wrap code {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  body[data-capture-mode] .content .diagram-scroll.capture-wrap > svg {
+    max-width: 100% !important;
+    height: auto;
+  }
   .capture-toast {
     position: fixed;
     top: 16px;
@@ -5103,11 +5131,49 @@ ${mermaidInitTag}`)
   // and the reading position holds. Esc leaves; a reload never comes back in it.
   const captureBtn = document.getElementById('capture-mode-toggle');
   let captureToastTimer = 0;
+  // A capture tool only sees the part of a sideways-scrolling box that is in
+  // view, so each one (a wide table, a long code line, a wide diagram) is
+  // widened to its full width, centred on the screen, at most the screen less
+  // a 16px gutter each side; the prose keeps its reading width. One still too
+  // wide wraps (.capture-wrap), and a table still too wide after that gets
+  // smaller type. Each box's own style attribute is kept and put back on exit.
+  let captureFitted = [];
+  function fitWideBoxes() {
+    const vw = document.documentElement.clientWidth;
+    const boxes = document.querySelectorAll('main.content table, main.content pre, main.content .diagram-scroll');
+    for (const el of boxes) {
+      if (el.scrollWidth <= el.clientWidth + 1) continue;
+      captureFitted.push({ el: el, style: el.getAttribute('style') });
+      const w = Math.min(el.scrollWidth, vw - 32);
+      el.style.boxSizing = 'border-box';
+      el.style.width = w + 'px';
+      el.style.maxWidth = 'none';
+      const margin = parseFloat(getComputedStyle(el).marginLeft) || 0;
+      el.style.marginLeft = (margin + (vw - w) / 2 - el.getBoundingClientRect().left) + 'px';
+      if (el.scrollWidth > el.clientWidth + 1) el.classList.add('capture-wrap');
+      // Many columns on a narrow screen can stay too wide even wrapped: shrink
+      // the table's type (the wrap rule's cell padding is in em) until it fits.
+      let size = parseFloat(getComputedStyle(el).fontSize);
+      for (let i = 0; i < 8 && el.tagName === 'TABLE' && el.scrollWidth > el.clientWidth + 1; i++) {
+        size = size * el.clientWidth / el.scrollWidth * 0.98;
+        el.style.fontSize = size + 'px';
+      }
+    }
+  }
+  function unfitWideBoxes() {
+    for (const f of captureFitted) {
+      f.el.classList.remove('capture-wrap');
+      if (f.style === null) f.el.removeAttribute('style');
+      else f.el.setAttribute('style', f.style);
+    }
+    captureFitted = [];
+  }
   function setCaptureMode(on) {
     clearTimeout(captureToastTimer);
     const oldToast = document.querySelector('.capture-toast');
     if (oldToast) oldToast.remove();
     if (!on) {
+      unfitWideBoxes();
       document.body.removeAttribute('data-capture-mode');
       document.body.style.removeProperty('--md2doc-capture-w');
       return;
@@ -5116,6 +5182,8 @@ ${mermaidInitTag}`)
     const w = document.querySelector('main.content').getBoundingClientRect().width;
     document.body.style.setProperty('--md2doc-capture-w', w + 'px');
     document.body.setAttribute('data-capture-mode', '');
+    unfitWideBoxes();
+    fitWideBoxes();
     const toast = document.createElement('div');
     toast.className = 'capture-toast';
     toast.setAttribute('role', 'status');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "3.16.0",
+  "version": "3.16.1",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, Graphviz, and draw.io support",
   "keywords": [
     "markdown",