memd-cli 3.3.0 → 3.4.1

package/.claude/settings.local.json

@@ -0,0 +1,7 @@
+{
+  "permissions": {
+    "allow": [
+      "WebFetch(domain:github.com)"
+    ]
+  }
+}

package/main.js

@@ -622,10 +622,12 @@ async function main() {
 
       if (options.html) {
         // 3a. HTML path
-        const { renderToHTML, MERMAID_MODAL_SCRIPT } = await import('./render-shared.js');
+        const { renderToHTML, MERMAID_MODAL_SCRIPT, WIDTH_TOGGLE_SCRIPT } = await import('./render-shared.js');
         const combined = markdownParts.join('\n\n');
         let html = renderToHTML(combined, diagramColors);
-        html = html.replace('<!--memd:scripts-->', html.includes('mermaid-diagram') ? `<script>${MERMAID_MODAL_SCRIPT}</script>` : '');
+        let inlineScripts = WIDTH_TOGGLE_SCRIPT;
+        if (html.includes('mermaid-diagram')) inlineScripts += MERMAID_MODAL_SCRIPT;
+        html = html.replace('<!--memd:scripts-->', `<script>${inlineScripts}</script>`);
         process.stdout.write(html);
       } else {
         // 3b. Terminal path
@@ -763,7 +765,7 @@ async function main() {
         console.error('Invalid --workers: must be a positive integer');
         process.exit(1);
       }
-      const { MERMAID_MODAL_SCRIPT: mermaidModalScript } = await import('./render-shared.js');
+      const { MERMAID_MODAL_SCRIPT: mermaidModalScript, WIDTH_TOGGLE_SCRIPT: widthToggleScript } = await import('./render-shared.js');
       const poolSize = options.workers ?? Math.min(Math.max(1, os.cpus().length - 1), 4);
       const workerPath = new URL('./render-worker.js', import.meta.url);
       const pool = createRenderPool(workerPath, poolSize, {
@@ -873,7 +875,10 @@ async function main() {
 .memd-sidebar a { color: ${t.accent}; text-decoration: none; display: block; padding: 0.15rem 0.5rem; border-radius: 4px; font-size: 0.9rem; }
 .memd-sidebar a:hover { background: color-mix(in srgb, ${t.fg} 5%, ${t.bg}); }
 .memd-sidebar a[aria-current="page"] { background: color-mix(in srgb, ${t.accent} 12%, ${t.bg}); }
-.memd-content { max-width: 800px; padding: 2rem 1rem; }
+.memd-content { max-width: 70%; padding: 2rem 1rem; margin: 0 auto; }
+@media (max-width: 1024px) { .memd-content { max-width: 85%; } }
+@media (max-width: 768px) { .memd-content { max-width: 100%; } }
+body.memd-full-width .memd-content { max-width: none; margin: 0; }
 body:has(.memd-layout) { max-width: none; margin: 0; padding: 0; }
 .memd-hamburger { display: none; position: fixed; top: 0.5rem; left: 0.5rem; z-index: 10; background: color-mix(in srgb, ${t.fg} 8%, ${t.bg}); border: 1px solid ${t.line}; color: ${t.fg}; padding: 0.3rem 0.5rem; cursor: pointer; border-radius: 4px; font-size: 1.2rem; }
 @media (max-width: 768px) {
@@ -896,7 +901,7 @@ body:has(.memd-layout) { max-width: none; margin: 0; padding: 0; }
           res.end();
           return;
         }
-        let scripts = '';
+        let scripts = widthToggleScript;
         if (options.watch) {
           scripts += 'new EventSource("/_memd/events").onmessage=function(){location.reload()};';
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memd-cli",
-  "version": "3.3.0",
+  "version": "3.4.1",
   "type": "module",
   "main": "main.js",
   "bin": {

package/render-shared.js

@@ -3,6 +3,8 @@ import { Marked } from 'marked';
 import { renderMermaidSVG } from '@ktrysmt/beautiful-mermaid';
 import { escapeHtml, resolveThemeColors } from './render-utils.js';
 
+export const WIDTH_TOGGLE_SCRIPT = "(function(){var b=document.body,g=document.querySelector('.memd-width-toggle');if(!g)return;var sb=document.querySelector('.memd-sidebar');if(sb){sb.insertBefore(g,sb.firstChild);g.style.position='static';g.style.margin='0 0 0.5rem 0';g.style.width='auto'}var btns=g.querySelectorAll('.memd-wt-btn');function u(){var f=b.classList.contains('memd-full-width');btns.forEach(function(n){n.classList.toggle('active',n.dataset.mode===(f?'full':'smart'))})}if(localStorage.getItem('memd-width')==='full')b.classList.add('memd-full-width');u();btns.forEach(function(n){n.onclick=function(){if(n.dataset.mode==='full'){b.classList.add('memd-full-width');localStorage.setItem('memd-width','full')}else{b.classList.remove('memd-full-width');localStorage.setItem('memd-width','smart')}u()}})})();";
+
 export const MERMAID_MODAL_SCRIPT = [
   "document.addEventListener('click',function(e){var d=e.target.closest('.mermaid-diagram');if(d){var o=document.createElement('div');o.className='mermaid-modal';o.innerHTML=d.querySelector('svg').outerHTML;o.onclick=function(){o.remove()};document.body.appendChild(o)}});",
   "document.addEventListener('keydown',function(e){if(e.key==='Escape'){var m=document.querySelector('.mermaid-modal');if(m)m.remove()}});",
@@ -66,7 +68,16 @@ export function renderToHTML(markdown, diagramColors) {
 <meta name="viewport" content="width=device-width, initial-scale=1">
 ${title ? `<title>${escapeHtml(title)}</title>` : ''}
 <style>
-body { background: ${t.bg}; color: ${t.fg}; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; max-width: 800px; margin: 2rem auto; padding: 0 1rem; }
+body { background: ${t.bg}; color: ${t.fg}; font-family: system-ui, -apple-system, sans-serif; line-height: 1.6; max-width: 70%; margin: 0 auto; padding: 2rem 1rem; }
+@media (max-width: 1024px) { body { max-width: 85%; } }
+@media (max-width: 768px) { body { max-width: 100%; } }
+body.memd-full-width { max-width: none; margin: 0; }
+.memd-width-toggle { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 11; display: inline-flex; border-radius: 6px; overflow: hidden; border: 1px solid ${t.line}; font-size: 0; }
+.memd-wt-btn { background: color-mix(in srgb, ${t.fg} 5%, ${t.bg}); border: none; color: ${t.muted}; padding: 0.25rem 0.5rem; cursor: pointer; font-size: 0.7rem; display: inline-flex; align-items: center; gap: 0.25rem; line-height: 1; }
+.memd-wt-btn + .memd-wt-btn { border-left: 1px solid ${t.line}; }
+.memd-wt-btn:hover { background: color-mix(in srgb, ${t.fg} 12%, ${t.bg}); }
+.memd-wt-btn.active { background: color-mix(in srgb, ${t.accent} 18%, ${t.bg}); color: ${t.accent}; }
+.memd-wt-btn svg { width: 12px; height: 12px; flex-shrink: 0; }
 a { color: ${t.accent}; }
 hr { border-color: ${t.line}; }
 blockquote { border-left: 3px solid ${t.line}; color: ${t.muted}; padding-left: 1rem; }
@@ -85,6 +96,7 @@ th { background: color-mix(in srgb, ${t.fg} 5%, ${t.bg}); }
 <!--memd:head-->
 </head>
 <body>
+<div class="memd-width-toggle" role="group" aria-label="Width toggle"><button class="memd-wt-btn" data-mode="smart"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 8h5m4 0h5"/><path d="M4 5l3 3-3 3m8-6l-3 3 3 3"/></svg>Smart</button><button class="memd-wt-btn" data-mode="full"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M1 8h14"/><path d="M4 5L1 8l3 3m8-6l3 3-3 3"/></svg>Full</button></div>
 <!--memd:content-->
 ${body.trimEnd()}
 <!--/memd:content-->

package/test/memd.test.js

@@ -26,7 +26,7 @@ function runSync(args) {
 describe('memd CLI', () => {
   it.concurrent('--version', async () => {
     const output = await run(['-v'])
-    expect(output).toContain('3.2.1')
+    expect(output).toContain('3.4.0')
   })
 
   it.concurrent('--help', async () => {
@@ -200,6 +200,20 @@ describe('memd CLI', () => {
       expect(output).toMatch(/id="m1-/)
     })
 
+    it('--html contains segmented width toggle with Smart/Full buttons', () => {
+      const output = runSync(['--html', 'test/test1.md'])
+      // Segmented toggle container
+      expect(output).toContain('class="memd-width-toggle"')
+      // Two buttons with data-mode attributes
+      expect(output).toContain('class="memd-wt-btn" data-mode="smart"')
+      expect(output).toContain('class="memd-wt-btn" data-mode="full"')
+      // SVG icons present in each button
+      const btnMatches = output.match(/memd-wt-btn/g)
+      expect(btnMatches.length).toBeGreaterThanOrEqual(4) // 2 in HTML + 2+ in CSS
+      // Toggle script sets active class
+      expect(output).toContain("classList.toggle('active'")
+    })
+
     it('--html + multiple files -> combined single HTML', () => {
       const output = runSync(['--html', 'test/test1.md', 'test/test2.md'])
       expect(output).toContain('<!DOCTYPE html>')