@helping-ai-workflow/md2doc 1.0.3 → 1.1.1

package/lib/md2doc.js

@@ -214,6 +214,65 @@ ${itemsHtml}
       .join('');
   }
 
+  function unbreakableRun(s) {
+    // Treat `_` as a break point — identifiers like `pmac_tx_*` are unbreakable in CSS but breakable for classification.
+    const matches = String(s || '').match(/[A-Za-z0-9\-./@:]+/g);
+    if (!matches) return 0;
+    let max = 0;
+    for (const m of matches) if (m.length > max) max = m.length;
+    return max;
+  }
+
+  function cellRawText(cell) {
+    if (!cell) return '';
+    if (Array.isArray(cell.tokens)) return flattenTokenText(cell.tokens);
+    return String(cell.text || '');
+  }
+
+  function classifyColumns(token) {
+    const colCount = (token.header || []).length;
+    const classes = [];
+    for (let i = 0; i < colCount; i++) {
+      const allCells = [];
+      if (token.header && token.header[i]) allCells.push(token.header[i]);
+      const dataCells = [];
+      if (Array.isArray(token.rows)) {
+        for (const row of token.rows) {
+          if (row && row[i]) {
+            allCells.push(row[i]);
+            dataCells.push(row[i]);
+          }
+        }
+      }
+      const allTexts = allCells.map(cellRawText);
+      const dataTexts = dataCells.map(cellRawText);
+      // Header labels (e.g. "Clock Domain") often contain whitespace not representative of cell content; use data rows for the heuristic and fall back to header only when the column has no data.
+      const heuristicTexts = dataTexts.length > 0 ? dataTexts : allTexts;
+      let maxTokenLen = 0;
+      let totalLen = 0;
+      let hasWhitespace = false;
+      let hasSentence = false;
+      for (const t of heuristicTexts) {
+        const r = unbreakableRun(t);
+        if (r > maxTokenLen) maxTokenLen = r;
+        totalLen += t.length;
+        if (/\s/.test(t)) hasWhitespace = true;
+        if (/。|\. /.test(t)) hasSentence = true;
+      }
+      const avgCellLen = heuristicTexts.length ? (totalLen / heuristicTexts.length) : 0;
+
+      // Narrow takes precedence over prose (tie-break: prefer narrow / conservative).
+      if (maxTokenLen <= 12 && !hasWhitespace) {
+        classes.push('col-narrow');
+      } else if (avgCellLen > 40 || hasSentence) {
+        classes.push('col-prose');
+      } else {
+        classes.push('col-default');
+      }
+    }
+    return classes;
+  }
+
   function stripHtmlTags(value) {
     return String(value || '').replace(/<[^>]*>/g, '');
   }
@@ -256,13 +315,11 @@ ${itemsHtml}
       const r = spawnSync('dot', ['-Tsvg'], { input: code, encoding: 'utf8', timeout: 10000 });
       if (r.status === 0) {
         // Strip XML declaration / DOCTYPE; keep only the <svg> element.
-        // Remove fixed width/height attrs so CSS max-width:100% + height:auto
-        // can scale the diagram to content width; viewBox preserves aspect ratio.
+        // Keep intrinsic width/height so small diagrams render at their natural
+        // size; max-width:100% in CSS still shrinks oversized ones to container.
         const svg = r.stdout
           .replace(/<\?xml[^>]*\?>/g, '')
           .replace(/<!DOCTYPE[^>]*>/g, '')
-          .replace(/(<svg\b[^>]*?)\s+width="[^"]*"/i, '$1')
-          .replace(/(<svg\b[^>]*?)\s+height="[^"]*"/i, '$1')
           .trim();
         return `\n<div class="graphviz">${svg}</div>\n`;
       }
@@ -308,7 +365,6 @@ ${itemsHtml}
     return baseBlockquote(token);
   };
 
-  const baseTable = renderer.table.bind(renderer);
   renderer.table = function(token) {
     collectCellText(token.header);
     if (Array.isArray(token.rows)) {
@@ -316,7 +372,41 @@ ${itemsHtml}
         collectCellText(row);
       }
     }
-    return baseTable(token);
+
+    const classes = classifyColumns(token);
+    const colHtml = classes
+      .map((c) => (c === 'col-default' ? '<col>' : `<col class="${c}">`))
+      .join('');
+    const cellClassAttr = (i) => {
+      const c = classes[i];
+      if (c === 'col-narrow') return ' class="cell-narrow"';
+      if (c === 'col-prose')  return ' class="cell-prose"';
+      return '';
+    };
+    const alignStyle = (cell) => (cell && cell.align)
+      ? ` style="text-align:${cell.align}"`
+      : '';
+
+    const headerCells = (token.header || []).map((cell, i) => {
+      const inner = cell && Array.isArray(cell.tokens)
+        ? this.parser.parseInline(cell.tokens)
+        : '';
+      return `<th${cellClassAttr(i)}${alignStyle(cell)}>${inner}</th>`;
+    }).join('');
+    const headerHtml = `<thead><tr>${headerCells}</tr></thead>`;
+
+    const bodyRows = Array.isArray(token.rows) ? token.rows.map((row) => {
+      const cells = (row || []).map((cell, i) => {
+        const inner = cell && Array.isArray(cell.tokens)
+          ? this.parser.parseInline(cell.tokens)
+          : '';
+        return `<td${cellClassAttr(i)}${alignStyle(cell)}>${inner}</td>`;
+      }).join('');
+      return `<tr>${cells}</tr>`;
+    }).join('') : '';
+    const bodyHtmlPart = `<tbody>${bodyRows}</tbody>`;
+
+    return `<table>\n<colgroup>${colHtml}</colgroup>\n${headerHtml}\n${bodyHtmlPart}\n</table>\n`;
   };
 
   marked.setOptions({ gfm: true, breaks: false, renderer });
@@ -360,6 +450,7 @@ ${itemsHtml}
       <span class="toc-title">Contents</span>
       <button id="toc-expand-all" type="button" aria-label="Expand all">⊞</button>
       <button id="toc-collapse-all" type="button" aria-label="Collapse all">⊟</button>
+      <button id="toc-collapse-toggle" type="button" aria-label="Collapse table of contents" title="Collapse / expand sidebar">◀</button>
     </div>
     ${renderTocNodes(tocTree)}
   </nav>
@@ -404,16 +495,52 @@ const html = `<!DOCTYPE html>
   .reader-sidebar {
     position: sticky;
     top: 24px;
-    width: 320px;
+    flex: 0 1 300px;
+    width: clamp(220px, 22vw, 300px);
+    min-width: 220px;
     height: calc(100vh - 48px);
     overflow: hidden;
-    flex: 0 0 320px;
     padding-right: 8px;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
     gap: 12px;
   }
+  body[data-toc-collapsed] .reader-sidebar {
+    flex-basis: 36px;
+    width: 36px;
+    min-width: 36px;
+    padding-right: 0;
+  }
+  body[data-toc-collapsed] .reader-tools,
+  body[data-toc-collapsed] .search-results,
+  body[data-toc-collapsed] .toc > .toc-list,
+  body[data-toc-collapsed] .toc-title {
+    display: none;
+  }
+  body[data-toc-collapsed] #toc-collapse-toggle {
+    transform: rotate(180deg);
+  }
+  #toc-collapse-toggle {
+    margin-left: 0;
+    padding: 2px 8px;
+    font: inherit;
+    font-size: 0.9em;
+    line-height: 1;
+    border: 1px solid #d0d7de;
+    border-radius: 6px;
+    background: #ffffff;
+    color: #57606a;
+    cursor: pointer;
+    transition: transform 0.15s ease;
+  }
+  #toc-collapse-toggle:hover {
+    background: #eef2f6;
+    color: #24292e;
+  }
+  @media (max-width: 1080px) {
+    #toc-collapse-toggle { display: none; }
+  }
   .reader-tools { flex: 0 0 auto; }
   .sidebar-toggle {
     display: none;
@@ -698,6 +825,10 @@ const html = `<!DOCTYPE html>
   .content {
     min-width: 0;
     flex: 1 1 auto;
+  }
+  .content p,
+  .content li,
+  .content blockquote {
     overflow-wrap: anywhere;
     word-break: break-word;
   }
@@ -753,6 +884,36 @@ const html = `<!DOCTYPE html>
   th, td { border: 1px solid #dfe2e5; padding: 7px 14px; text-align: left; }
   th { background: #f6f8fa; font-weight: 600; }
   tr:nth-child(even) { background: #fafbfc; }
+  .content table th,
+  .content table td {
+    overflow-wrap: normal;
+    word-break: normal;
+  }
+  .content table th {
+    white-space: nowrap;
+  }
+  .content table td code,
+  .content table th code {
+    white-space: nowrap;
+  }
+  .content table { table-layout: auto; }
+  .content table col.col-narrow { width: 1%; }
+  .content table col.col-prose { width: auto; }
+  .content table th.cell-narrow,
+  .content table td.cell-narrow { white-space: nowrap; }
+  .content table tbody td:first-child,
+  .content table thead th:first-child {
+    position: sticky;
+    left: 0;
+    z-index: 1;
+    background: #ffffff;
+  }
+  .content table thead th:first-child {
+    background: #f6f8fa;
+  }
+  .content table tbody tr:nth-child(even) td:first-child {
+    background: #fafbfc;
+  }
   blockquote {
     border-left: 4px solid #dfe2e5;
     padding: 0 16px;
@@ -960,6 +1121,25 @@ ${mermaidInitTag}
     });
   }
 
+  function readTocCollapsed() {
+    try { return localStorage.getItem('md2doc.toc.collapsed') === '1'; }
+    catch (_) { return false; }
+  }
+  function writeTocCollapsed(v) {
+    try { localStorage.setItem('md2doc.toc.collapsed', v ? '1' : '0'); }
+    catch (_) { /* private mode / quota — ignore */ }
+  }
+  if (readTocCollapsed()) {
+    document.body.setAttribute('data-toc-collapsed', '');
+  }
+  const tocCollapseBtn = document.getElementById('toc-collapse-toggle');
+  if (tocCollapseBtn) {
+    tocCollapseBtn.addEventListener('click', () => {
+      const nowCollapsed = document.body.toggleAttribute('data-toc-collapsed');
+      writeTocCollapsed(nowCollapsed);
+    });
+  }
+
   const SKIP_SELECTOR = 'svg, .mermaid, .graphviz, script, style';
 
   function buildSnippet(section, query) {

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "@helping-ai-workflow/md2doc",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "description": "Markdown → HTML / PDF renderer with WaveDrom, Mermaid, and Graphviz support",
-  "keywords": ["markdown", "html", "pdf", "renderer", "wavedrom", "mermaid", "graphviz"],
+  "keywords": [
+    "markdown",
+    "html",
+    "pdf",
+    "renderer",
+    "wavedrom",
+    "mermaid",
+    "graphviz"
+  ],
   "main": "lib/md2doc.js",
   "bin": {
     "md2html": "bin/md2html.js",
-    "md2pdf":  "bin/md2pdf.js"
+    "md2pdf": "bin/md2pdf.js"
   },
   "files": [
     "lib/",