yumiamd 0.1.10 → 0.1.13

package/README.md

@@ -49,23 +49,35 @@ pnpm add yumiamd
 Once installed globally or locally, the `yumia` / `yumiamd` commands are available in your terminal:
 
 ```bash
-# Initialize a new presentation template
-yumia init my-presentation
+# Initialize a new presentation template (supports --theme and custom color overrides)
+yumia init my-presentation --theme cyberpunk --primary "#FF2E88"
+
+# Start instant live-reload dev server with HTML preview (zero config!)
+yumia dev presentation.yumia.md --open
+
+# Compile to native editable PowerPoint (.pptx)
+yumia build presentation.yumia.md --out dist/presentation.pptx
+
+# Compile to crisp vector PDF document (.pdf)
+yumia build presentation.yumia.md --format pdf --out dist/presentation.pdf
+
+# Compile to standalone interactive HTML5 presentation deck (.html)
+yumia build presentation.yumia.md --format html --out dist/presentation.html
+
+# Watch presentation file and recompile automatically on save
+yumia watch presentation.yumia.md --format pdf
 
 # Validate markdown syntax and AST structure (supports --json for CI & AI agents)
 yumia validate presentation.yumia.md --json
 
-# Lint presentation for vertical overflow and layout issues
-yumia lint presentation.yumia.md --json
+# Lint presentation for overflow, high density, and layout issues
+yumia lint presentation.yumia.md --strict
 
 # Inspect parsed AST and computed layout bounding boxes
 yumia inspect presentation.yumia.md --layout
 
 # Export machine-readable JSON schema for LLMs & AI prompt generation
 yumia schema
-
-# Compile to native editable PowerPoint (.pptx)
-yumia build presentation.yumia.md --out dist/presentation.pptx
 ```
 
 ---

package/dist/bin.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 import {
   runCli
-} from "./chunk-PQYPVPV2.js";
+} from "./chunk-6GEDN7OB.js";
 
 // src/bin.ts
 var result = await runCli(process.argv);

package/dist/{chunk-PQYPVPV2.js → chunk-6GEDN7OB.js}

@@ -2393,15 +2393,16 @@ var HtmlRenderer = class {
       right: 24px;
       display: flex;
       align-items: center;
-      gap: 12px;
-      background: rgba(15, 23, 42, 0.85);
+      gap: 10px;
+      background: rgba(15, 23, 42, 0.88);
       backdrop-filter: blur(12px);
-      padding: 8px 16px;
+      padding: 6px 14px;
       border-radius: 30px;
       border: 1px solid rgba(255, 255, 255, 0.15);
       z-index: 1000;
       font-size: 13px;
       color: #e2e8f0;
+      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5);
     }
 
     .yumia-btn {
@@ -2409,17 +2410,18 @@ var HtmlRenderer = class {
       border: none;
       color: #f8fafc;
       cursor: pointer;
-      padding: 4px 8px;
+      padding: 5px 9px;
       border-radius: 6px;
       font-size: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
-      transition: background 0.15s ease;
+      transition: background 0.15s ease, transform 0.1s ease;
     }
 
     .yumia-btn:hover {
       background: rgba(255, 255, 255, 0.15);
+      transform: translateY(-1px);
     }
 
     .yumia-progress-bar {
@@ -2437,47 +2439,291 @@ var HtmlRenderer = class {
       bottom: 0;
       left: 0;
       right: 0;
-      max-height: 220px;
-      background: rgba(10, 10, 18, 0.95);
+      max-height: 240px;
+      background: rgba(10, 10, 18, 0.96);
       backdrop-filter: blur(16px);
-      border-top: 1px solid var(--yumia-primary);
-      padding: 16px 24px;
+      border-top: 2px solid var(--yumia-primary);
+      padding: 18px 28px;
       overflow-y: auto;
       display: none;
       z-index: 2000;
-      font-size: 14px;
+      font-size: 15px;
       line-height: 1.6;
       color: #cbd5e1;
+      box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
     }
 
     .yumia-notes-drawer.open {
       display: block;
     }
+
+    /* Slide Overview Modal */
+    .yumia-overview-modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100vw;
+      height: 100vh;
+      background: rgba(5, 5, 10, 0.94);
+      backdrop-filter: blur(20px);
+      z-index: 3000;
+      display: none;
+      flex-direction: column;
+      padding: 40px;
+      overflow-y: auto;
+    }
+
+    .yumia-overview-modal.open {
+      display: flex;
+    }
+
+    .yumia-overview-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 30px;
+      color: #fff;
+    }
+
+    .yumia-overview-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 24px;
+      width: 100%;
+    }
+
+    .yumia-overview-card {
+      aspect-ratio: var(--yumia-ratio);
+      background-color: var(--yumia-bg);
+      border: 2px solid rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      padding: 16px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+      transform-origin: center;
+      transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .yumia-overview-card:hover {
+      transform: scale(1.04);
+      border-color: var(--yumia-primary);
+      box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.8), 0 0 15px var(--yumia-primary);
+    }
+
+    .yumia-overview-card.current {
+      border-color: var(--yumia-accent);
+      box-shadow: 0 0 0 2px var(--yumia-accent);
+    }
+
+    .yumia-overview-badge {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      background: rgba(0, 0, 0, 0.6);
+      color: #fff;
+      font-size: 11px;
+      font-weight: 700;
+      padding: 2px 8px;
+      border-radius: 10px;
+    }
+
+    /* Speaker View Layout (When loaded in speaker mode ?speaker=true) */
+    .speaker-layout {
+      display: grid;
+      grid-template-rows: 60px 1fr;
+      width: 100vw;
+      height: 100vh;
+      background: #09090f;
+      color: #f8fafc;
+      overflow: hidden;
+    }
+
+    .speaker-topbar {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 24px;
+      background: #11111b;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .speaker-timer-group {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      font-family: var(--yumia-font-code);
+      font-size: 18px;
+    }
+
+    .speaker-timer-btn {
+      background: rgba(255, 255, 255, 0.1);
+      color: #fff;
+      border: none;
+      padding: 4px 10px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+
+    .speaker-timer-btn:hover {
+      background: var(--yumia-primary);
+    }
+
+    .speaker-main-grid {
+      display: grid;
+      grid-template-columns: 55% 45%;
+      gap: 20px;
+      padding: 20px;
+      height: calc(100vh - 60px);
+      box-sizing: border-box;
+    }
+
+    .speaker-pane {
+      background: #151522;
+      border-radius: 10px;
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .speaker-pane-title {
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      color: var(--yumia-muted);
+      margin-bottom: 12px;
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .speaker-preview-box {
+      flex: 1;
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #000;
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .speaker-preview-box .yumia-slide-wrapper {
+      display: flex !important;
+      transform: scale(0.6);
+      width: 160% !important;
+      height: 160% !important;
+    }
+
+    .speaker-notes-box {
+      flex: 1;
+      background: #11111a;
+      border-radius: 8px;
+      padding: 16px;
+      font-size: 16px;
+      line-height: 1.7;
+      color: #e2e8f0;
+      overflow-y: auto;
+    }
   </style>
 </head>
 <body>
-  <div id="yumia-deck">
-    ${slidesHtml}
+  <div id="deck-container">
+    <div id="yumia-deck">
+      ${slidesHtml}
+    </div>
+
+    <div class="yumia-controls" id="deck-controls">
+      <button class="yumia-btn" id="btn-prev" title="Previous Slide (\u2190)">\u25C0</button>
+      <span id="slide-indicator">1 / ${presentation.slides.length}</span>
+      <button class="yumia-btn" id="btn-next" title="Next Slide (\u2192)">\u25B6</button>
+      <button class="yumia-btn" id="btn-overview" title="Slide Overview (ESC / O)">\u25A6</button>
+      <button class="yumia-btn" id="btn-speaker" title="Speaker View (S)">\u{1F3A4}</button>
+      <button class="yumia-btn" id="btn-notes" title="Toggle Notes (N)">\u{1F4DD}</button>
+      <button class="yumia-btn" id="btn-fs" title="Fullscreen (F)">\u26F6</button>
+    </div>
+
+    <div id="notes-drawer" class="yumia-notes-drawer"></div>
+
+    <div id="overview-modal" class="yumia-overview-modal">
+      <div class="yumia-overview-header">
+        <h2>Slide Overview</h2>
+        <button class="yumia-btn" id="btn-close-overview" style="font-size: 18px;">\u2715 Close (ESC)</button>
+      </div>
+      <div class="yumia-overview-grid" id="overview-grid"></div>
+    </div>
   </div>
 
-  <div class="yumia-controls">
-    <button class="yumia-btn" id="btn-prev" title="Previous Slide (\u2190)">\u25C0</button>
-    <span id="slide-indicator">1 / ${presentation.slides.length}</span>
-    <button class="yumia-btn" id="btn-next" title="Next Slide (\u2192)">\u25B6</button>
-    <button class="yumia-btn" id="btn-notes" title="Toggle Notes (N)">\u{1F4DD}</button>
-    <button class="yumia-btn" id="btn-fs" title="Fullscreen (F)">\u26F6</button>
-  </div>
-
-  <div id="notes-drawer" class="yumia-notes-drawer"></div>
-
   <script>
     (function() {
-      const slides = document.querySelectorAll('.yumia-slide-wrapper');
+      const isSpeakerMode = new URLSearchParams(window.location.search).get('speaker') === 'true';
+      const slides = Array.from(document.querySelectorAll('.yumia-slide-wrapper'));
       const indicator = document.getElementById('slide-indicator');
       const notesDrawer = document.getElementById('notes-drawer');
+      const overviewModal = document.getElementById('overview-modal');
+      const overviewGrid = document.getElementById('overview-grid');
       let currentIdx = 0;
 
-      function updateSlide(newIdx) {
+      // Real-time synchronization channel
+      let syncChannel = null;
+      try {
+        syncChannel = new BroadcastChannel('yumia_presentation_sync');
+        syncChannel.onmessage = function(e) {
+          if (e.data && typeof e.data.index === 'number') {
+            goToSlide(e.data.index, false);
+          }
+        };
+      } catch (err) {
+        // Fallback if BroadcastChannel unavailable
+      }
+
+      function buildOverviewGrid() {
+        if (!overviewGrid) return;
+        overviewGrid.innerHTML = '';
+        slides.forEach((slide, idx) => {
+          const card = document.createElement('div');
+          card.className = 'yumia-overview-card' + (idx === currentIdx ? ' current' : '');
+          const badge = document.createElement('span');
+          badge.className = 'yumia-overview-badge';
+          badge.textContent = (idx + 1);
+          
+          const heading = slide.querySelector('h1, h2, h3');
+          const titleText = heading ? heading.textContent : 'Slide ' + (idx + 1);
+          
+          const titleDiv = document.createElement('div');
+          titleDiv.style.fontWeight = '600';
+          titleDiv.style.fontSize = '14px';
+          titleDiv.style.color = 'var(--yumia-primary)';
+          titleDiv.textContent = titleText;
+
+          card.appendChild(badge);
+          card.appendChild(titleDiv);
+
+          card.addEventListener('click', () => {
+            goToSlide(idx);
+            toggleOverview(false);
+          });
+          overviewGrid.appendChild(card);
+        });
+      }
+
+      function toggleOverview(force) {
+        if (!overviewModal) return;
+        const isOpen = force !== undefined ? force : !overviewModal.classList.contains('open');
+        if (isOpen) {
+          buildOverviewGrid();
+          overviewModal.classList.add('open');
+        } else {
+          overviewModal.classList.remove('open');
+        }
+      }
+
+      function goToSlide(newIdx, broadcast = true) {
         if (newIdx < 0 || newIdx >= slides.length) return;
         slides[currentIdx]?.classList.remove('active');
         currentIdx = newIdx;
@@ -2490,23 +2736,166 @@ var HtmlRenderer = class {
         const currentSlide = slides[currentIdx];
         const notes = currentSlide ? currentSlide.getAttribute('data-notes') : '';
         if (notesDrawer) {
-          notesDrawer.innerHTML = notes ? '<strong>Speaker Notes:</strong><br>' + notes : '<em>No notes for this slide.</em>';
+          notesDrawer.innerHTML = notes ? '<strong>Speaker Notes:</strong><br>' + notes : '<em>No speaker notes for this slide.</em>';
         }
 
         window.location.hash = '#' + (currentIdx + 1);
+
+        if (broadcast && syncChannel) {
+          syncChannel.postMessage({ index: currentIdx });
+        }
+      }
+
+      function openSpeakerWindow() {
+        const url = new URL(window.location.href);
+        url.searchParams.set('speaker', 'true');
+        window.open(url.toString(), 'yumia_speaker_' + Date.now(), 'width=1180,height=760,menubar=no,toolbar=no');
+      }
+
+      function initSpeakerLayout() {
+        document.body.innerHTML = \`
+          <div class="speaker-layout">
+            <div class="speaker-topbar">
+              <div style="font-weight:700; color:var(--yumia-primary); display:flex; align-items:center; gap:8px;">
+                <span>\u{1F399}\uFE0F YumiaMD Speaker View</span>
+              </div>
+              <div class="speaker-timer-group">
+                <span id="speaker-clock">00:00:00</span>
+                <span style="color:var(--yumia-muted);">|</span>
+                <span id="speaker-timer" style="color:var(--yumia-accent);">00:00</span>
+                <button class="speaker-timer-btn" id="btn-timer-toggle">Pause</button>
+                <button class="speaker-timer-btn" id="btn-timer-reset">Reset</button>
+              </div>
+              <div>
+                <span id="speaker-slide-num" style="font-weight:600;">1 / \${slides.length}</span>
+              </div>
+            </div>
+            <div class="speaker-main-grid">
+              <div class="speaker-pane">
+                <div class="speaker-pane-title">Current Slide</div>
+                <div class="speaker-preview-box" id="speaker-current-box"></div>
+              </div>
+              <div style="display:grid; grid-template-rows: 45% 55%; gap:20px;">
+                <div class="speaker-pane">
+                  <div class="speaker-pane-title">Next Slide Preview</div>
+                  <div class="speaker-preview-box" id="speaker-next-box"></div>
+                </div>
+                <div class="speaker-pane">
+                  <div class="speaker-pane-title">Speaker Notes</div>
+                  <div class="speaker-notes-box" id="speaker-notes-content"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        \`;
+
+        // Live Clock
+        setInterval(() => {
+          const now = new Date();
+          const clockEl = document.getElementById('speaker-clock');
+          if (clockEl) clockEl.textContent = now.toLocaleTimeString();
+        }, 1000);
+
+        // Elapsed Timer
+        let elapsedSeconds = 0;
+        let timerRunning = true;
+        let timerInterval = setInterval(() => {
+          if (!timerRunning) return;
+          elapsedSeconds++;
+          const mins = String(Math.floor(elapsedSeconds / 60)).padStart(2, '0');
+          const secs = String(elapsedSeconds % 60).padStart(2, '0');
+          const timerEl = document.getElementById('speaker-timer');
+          if (timerEl) timerEl.textContent = \`\${mins}:\${secs}\`;
+        }, 1000);
+
+        document.getElementById('btn-timer-toggle')?.addEventListener('click', (e) => {
+          timerRunning = !timerRunning;
+          e.target.textContent = timerRunning ? 'Pause' : 'Start';
+        });
+
+        document.getElementById('btn-timer-reset')?.addEventListener('click', () => {
+          elapsedSeconds = 0;
+          const timerEl = document.getElementById('speaker-timer');
+          if (timerEl) timerEl.textContent = '00:00';
+        });
+
+        function updateSpeakerView(idx) {
+          currentIdx = idx;
+          const numEl = document.getElementById('speaker-slide-num');
+          if (numEl) numEl.textContent = (currentIdx + 1) + ' / ' + slides.length;
+
+          // Render current slide
+          const curBox = document.getElementById('speaker-current-box');
+          if (curBox && slides[currentIdx]) {
+            curBox.innerHTML = slides[currentIdx].outerHTML;
+            curBox.firstElementChild?.classList.add('active');
+          }
+
+          // Render next slide
+          const nextBox = document.getElementById('speaker-next-box');
+          if (nextBox) {
+            if (slides[currentIdx + 1]) {
+              nextBox.innerHTML = slides[currentIdx + 1].outerHTML;
+              nextBox.firstElementChild?.classList.add('active');
+            } else {
+              nextBox.innerHTML = '<div style="color:var(--yumia-muted); font-size:14px;">End of presentation</div>';
+            }
+          }
+
+          // Render notes
+          const notesBox = document.getElementById('speaker-notes-content');
+          if (notesBox && slides[currentIdx]) {
+            const rawNotes = slides[currentIdx].getAttribute('data-notes');
+            notesBox.innerHTML = rawNotes ? rawNotes : '<em style="color:var(--yumia-muted);">No notes provided for this slide.</em>';
+          }
+        }
+
+        window.addEventListener('keydown', (e) => {
+          if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
+            e.preventDefault();
+            if (currentIdx < slides.length - 1) {
+              goToSlide(currentIdx + 1);
+              updateSpeakerView(currentIdx);
+            }
+          } else if (e.key === 'ArrowLeft' || e.key === 'Backspace' || e.key === 'PageUp') {
+            e.preventDefault();
+            if (currentIdx > 0) {
+              goToSlide(currentIdx - 1);
+              updateSpeakerView(currentIdx);
+            }
+          }
+        });
+
+        if (syncChannel) {
+          syncChannel.onmessage = (e) => {
+            if (e.data && typeof e.data.index === 'number') {
+              updateSpeakerView(e.data.index);
+            }
+          };
+        }
+
+        const initialHash = parseInt(window.location.hash.replace('#', ''), 10) - 1;
+        updateSpeakerView(isNaN(initialHash) ? 0 : initialHash);
       }
 
       function init() {
+        if (isSpeakerMode) {
+          initSpeakerLayout();
+          return;
+        }
+
         const hash = window.location.hash.replace('#', '');
         const initialIdx = parseInt(hash, 10) - 1;
-        updateSlide(isNaN(initialIdx) ? 0 : initialIdx);
+        goToSlide(isNaN(initialIdx) ? 0 : initialIdx, false);
       }
 
       window.deckController = {
         init: init,
-        next: function() { updateSlide(currentIdx + 1); },
-        prev: function() { updateSlide(currentIdx - 1); },
+        next: function() { goToSlide(currentIdx + 1); },
+        prev: function() { goToSlide(currentIdx - 1); },
         toggleNotes: function() { notesDrawer?.classList.toggle('open'); },
+        toggleOverview: function() { toggleOverview(); },
+        openSpeaker: openSpeakerWindow,
         toggleFs: function() {
           if (!document.fullscreenElement) {
             document.documentElement.requestFullscreen().catch(() => {});
@@ -2519,19 +2908,33 @@ var HtmlRenderer = class {
       document.getElementById('btn-next')?.addEventListener('click', window.deckController.next);
       document.getElementById('btn-prev')?.addEventListener('click', window.deckController.prev);
       document.getElementById('btn-notes')?.addEventListener('click', window.deckController.toggleNotes);
+      document.getElementById('btn-overview')?.addEventListener('click', window.deckController.toggleOverview);
+      document.getElementById('btn-close-overview')?.addEventListener('click', () => toggleOverview(false));
+      document.getElementById('btn-speaker')?.addEventListener('click', window.deckController.openSpeaker);
       document.getElementById('btn-fs')?.addEventListener('click', window.deckController.toggleFs);
 
       window.addEventListener('keydown', function(e) {
-        if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown') {
+        if (overviewModal && overviewModal.classList.contains('open')) {
+          if (e.key === 'Escape' || e.key.toLowerCase() === 'o') {
+            toggleOverview(false);
+          }
+          return;
+        }
+
+        if (e.key === 'ArrowRight' || e.key === ' ' || e.key === 'PageDown' || e.key.toLowerCase() === 'l') {
           e.preventDefault();
           window.deckController.next();
-        } else if (e.key === 'ArrowLeft' || e.key === 'Backspace' || e.key === 'PageUp') {
+        } else if (e.key === 'ArrowLeft' || e.key === 'Backspace' || e.key === 'PageUp' || e.key.toLowerCase() === 'h') {
           e.preventDefault();
           window.deckController.prev();
         } else if (e.key.toLowerCase() === 'f') {
           window.deckController.toggleFs();
+        } else if (e.key.toLowerCase() === 's') {
+          window.deckController.openSpeaker();
         } else if (e.key.toLowerCase() === 'n') {
           window.deckController.toggleNotes();
+        } else if (e.key === 'Escape' || e.key.toLowerCase() === 'o') {
+          window.deckController.toggleOverview();
         }
       });
 
@@ -2667,6 +3070,268 @@ var HtmlRenderer = class {
   }
 };
 
+// ../renderer-pdf/dist/renderer.js
+import PDFDocument from "pdfkit";
+var PdfRenderer = class {
+  name = "PdfRenderer";
+  targetFormat = "pdf";
+  async render(presentation, context = {}) {
+    const colorOverrides = presentation.metadata.colors ? { colors: presentation.metadata.colors } : void 0;
+    const resolvedTheme = resolveTheme(presentation.metadata.theme, colorOverrides);
+    const theme = context.theme || resolvedTheme || defaultTheme;
+    const is43 = presentation.metadata.aspectRatio === "4:3";
+    const pageWidth = is43 ? 720 : 960;
+    const pageHeight = 540;
+    return new Promise((resolvePromise, rejectPromise) => {
+      try {
+        const doc = new PDFDocument({
+          autoFirstPage: false,
+          margin: 0,
+          info: {
+            Title: presentation.metadata.title || "YumiaMD Presentation",
+            Author: presentation.metadata.author || "YumiaMD",
+            Creator: "YumiaMD Vector PDF Compiler"
+          }
+        });
+        const chunks = [];
+        doc.on("data", (chunk) => chunks.push(chunk));
+        doc.on("end", () => {
+          const buffer = Buffer.concat(chunks);
+          resolvePromise({
+            format: "pdf",
+            data: new Uint8Array(buffer),
+            pageCount: presentation.slides.length,
+            slideCount: presentation.slides.length
+          });
+        });
+        doc.on("error", (err) => rejectPromise(err));
+        const totalSlides = presentation.slides.length;
+        for (let i = 0; i < totalSlides; i++) {
+          const slide = presentation.slides[i];
+          this.renderSlide(doc, slide, i + 1, totalSlides, pageWidth, pageHeight, theme);
+        }
+        doc.end();
+      } catch (err) {
+        rejectPromise(err);
+      }
+    });
+  }
+  renderSlide(doc, slide, slideNum, totalSlides, pageWidth, pageHeight, theme) {
+    doc.addPage({
+      size: [pageWidth, pageHeight],
+      margins: { top: 0, bottom: 0, left: 0, right: 0 }
+    });
+    doc.rect(0, 0, pageWidth, pageHeight).fill(theme.colors.background);
+    const padX = pageWidth * 0.06;
+    const padY = pageHeight * 0.08;
+    const contentWidth = pageWidth - padX * 2;
+    let cursorY = padY;
+    for (const element of slide.elements) {
+      cursorY = this.renderElement(doc, element, padX, cursorY, contentWidth, theme);
+      cursorY += 12;
+    }
+    const progressWidth = slideNum / totalSlides * pageWidth;
+    doc.rect(0, pageHeight - 4, progressWidth, 4).fill(theme.colors.primary);
+    doc.font("Helvetica").fontSize(10).fillColor(theme.colors.muted || "#888888").text(`${slideNum} / ${totalSlides}`, pageWidth - padX - 60, pageHeight - 24, {
+      width: 60,
+      align: "right"
+    });
+  }
+  renderElement(doc, element, x, y, width, theme) {
+    switch (element.type) {
+      case "heading": {
+        const h = element;
+        const fontSize = h.level === 1 ? 28 : h.level === 2 ? 22 : 18;
+        const color = h.level === 1 ? theme.colors.primary : theme.colors.text;
+        doc.font("Helvetica-Bold").fontSize(fontSize).fillColor(color);
+        doc.text(this.stripFormatting(h.text), x, y, { width, lineGap: 4 });
+        const height = doc.heightOfString(this.stripFormatting(h.text), { width });
+        return y + height;
+      }
+      case "paragraph": {
+        const p = element;
+        doc.font("Helvetica").fontSize(14).fillColor(theme.colors.text);
+        doc.text(this.stripFormatting(p.text), x, y, { width, lineGap: 4 });
+        const height = doc.heightOfString(this.stripFormatting(p.text), { width });
+        return y + height;
+      }
+      case "list": {
+        const l = element;
+        let currentY = y;
+        const itemGap = 6;
+        l.items.forEach((item, idx) => {
+          const bullet = l.ordered ? `${idx + 1}.` : "\u2022";
+          doc.font("Helvetica-Bold").fontSize(13).fillColor(theme.colors.primary).text(bullet, x, currentY, { width: 18 });
+          doc.font("Helvetica").fontSize(13).fillColor(theme.colors.text).text(this.stripFormatting(item.text), x + 20, currentY, {
+            width: width - 20,
+            lineGap: 3
+          });
+          const itemHeight = Math.max(18, doc.heightOfString(this.stripFormatting(item.text), { width: width - 20 }));
+          currentY += itemHeight + itemGap;
+        });
+        return currentY;
+      }
+      case "quote": {
+        const q = element;
+        const quoteText = `\u201C${this.stripFormatting(q.text)}\u201D`;
+        const authorText = q.author ? `\u2014 ${this.stripFormatting(q.author)}` : "";
+        doc.font("Helvetica-Oblique").fontSize(13).fillColor(theme.colors.muted || "#aaaaaa");
+        const textHeight = doc.heightOfString(quoteText, { width: width - 24 });
+        const authorHeight = authorText ? 18 : 0;
+        const totalHeight = textHeight + authorHeight + 16;
+        doc.roundedRect(x, y, width, totalHeight, 6).fill(theme.colors.surface || "rgba(255,255,255,0.05)");
+        doc.rect(x, y, 4, totalHeight).fill(theme.colors.accent || theme.colors.primary);
+        doc.font("Helvetica-Oblique").fontSize(13).fillColor(theme.colors.text).text(quoteText, x + 16, y + 8, { width: width - 28 });
+        if (authorText) {
+          doc.font("Helvetica").fontSize(11).fillColor(theme.colors.muted || "#888888").text(authorText, x + 16, y + 8 + textHeight + 4, { width: width - 28 });
+        }
+        return y + totalHeight;
+      }
+      case "code": {
+        const c = element;
+        const codeText = c.code;
+        doc.font("Courier").fontSize(11);
+        const textHeight = doc.heightOfString(codeText, { width: width - 24 });
+        const boxHeight = textHeight + 20;
+        doc.roundedRect(x, y, width, boxHeight, 6).fill("#0a0a10").strokeColor(theme.colors.border || "rgba(255,255,255,0.1)").stroke();
+        doc.font("Courier").fontSize(11).fillColor(theme.colors.accent || "#38bdf8").text(codeText, x + 12, y + 10, { width: width - 24 });
+        return y + boxHeight;
+      }
+      case "card": {
+        const card = element;
+        const variantColor = this.getVariantColor(card.variant, theme);
+        const cardPad = 14;
+        let cardCursorY = y + cardPad;
+        if (card.title) {
+          doc.font("Helvetica-Bold").fontSize(15).fillColor(variantColor).text(this.stripFormatting(card.title), x + cardPad, cardCursorY, {
+            width: width - cardPad * 2
+          });
+          cardCursorY += 22;
+        }
+        if (card.elements) {
+          for (const child of card.elements) {
+            cardCursorY = this.renderElement(doc, child, x + cardPad, cardCursorY, width - cardPad * 2, theme);
+            cardCursorY += 8;
+          }
+        }
+        const totalCardHeight = Math.max(70, cardCursorY - y + cardPad);
+        doc.save();
+        doc.roundedRect(x, y, width, totalCardHeight, 8).fill(theme.colors.surface || "rgba(255,255,255,0.06)");
+        doc.roundedRect(x, y, width, totalCardHeight, 8).lineWidth(1.5).strokeColor(variantColor).stroke();
+        doc.restore();
+        let renderTop = y + cardPad;
+        if (card.title) {
+          doc.font("Helvetica-Bold").fontSize(15).fillColor(variantColor).text(this.stripFormatting(card.title), x + cardPad, renderTop, {
+            width: width - cardPad * 2
+          });
+          renderTop += 22;
+        }
+        if (card.elements) {
+          for (const child of card.elements) {
+            renderTop = this.renderElement(doc, child, x + cardPad, renderTop, width - cardPad * 2, theme);
+            renderTop += 8;
+          }
+        }
+        return y + totalCardHeight;
+      }
+      case "metric": {
+        const m = element;
+        const variantColor = this.getVariantColor(m.variant, theme);
+        const boxHeight = 90;
+        doc.roundedRect(x, y, width, boxHeight, 8).fill(theme.colors.surface || "rgba(255,255,255,0.06)");
+        doc.roundedRect(x, y, width, boxHeight, 8).lineWidth(1.5).strokeColor(variantColor).stroke();
+        doc.font("Helvetica-Bold").fontSize(11).fillColor(theme.colors.muted || "#888888").text(m.label.toUpperCase(), x + 16, y + 14, { width: width - 32 });
+        const displayVal = m.unit ? `${m.value} ${m.unit}` : m.value;
+        doc.font("Helvetica-Bold").fontSize(28).fillColor(theme.colors.primary).text(displayVal, x + 16, y + 32, { width: width - 32 });
+        if (m.change) {
+          const changeColor = m.change.startsWith("+") ? "#10b981" : "#ef4444";
+          doc.font("Helvetica-Bold").fontSize(12).fillColor(changeColor).text(m.change, x + width - 90, y + 38, { width: 74, align: "right" });
+        }
+        return y + boxHeight;
+      }
+      case "columns": {
+        const cols = element;
+        const colCount = cols.columns.length;
+        const gap = 16;
+        const availableWidth = width - gap * (colCount - 1);
+        let ratios = Array(colCount).fill(1);
+        if (cols.ratios) {
+          const parsed = cols.ratios.split(":").map((r) => parseFloat(r) || 1);
+          if (parsed.length === colCount)
+            ratios = parsed;
+        }
+        const totalRatio = ratios.reduce((a, b) => a + b, 0);
+        let curX = x;
+        let maxY = y;
+        for (let i = 0; i < colCount; i++) {
+          const col = cols.columns[i];
+          const colWidth = ratios[i] / totalRatio * availableWidth;
+          let colCursorY = y;
+          for (const child of col.elements) {
+            colCursorY = this.renderElement(doc, child, curX, colCursorY, colWidth, theme);
+            colCursorY += 8;
+          }
+          if (colCursorY > maxY)
+            maxY = colCursorY;
+          curX += colWidth + gap;
+        }
+        return maxY;
+      }
+      case "table": {
+        const t = element;
+        const headers = t.headers || [];
+        const rows = t.rows || [];
+        const colCount = Math.max(headers.length, ...rows.map((r) => r.length), 1);
+        const colWidth = width / colCount;
+        const rowHeight = 26;
+        let curY = y;
+        if (headers.length > 0) {
+          doc.rect(x, curY, width, rowHeight).fill(theme.colors.primary);
+          headers.forEach((h, idx) => {
+            doc.font("Helvetica-Bold").fontSize(12).fillColor("#ffffff").text(this.stripFormatting(h), x + idx * colWidth + 6, curY + 6, {
+              width: colWidth - 12
+            });
+          });
+          curY += rowHeight;
+        }
+        rows.forEach((row, rowIdx) => {
+          const isEven = rowIdx % 2 === 0;
+          const rowBg = isEven ? theme.colors.surface || "rgba(255,255,255,0.04)" : "rgba(255,255,255,0.01)";
+          doc.rect(x, curY, width, rowHeight).fill(rowBg);
+          row.forEach((cell, idx) => {
+            doc.font("Helvetica").fontSize(11).fillColor(theme.colors.text).text(this.stripFormatting(cell), x + idx * colWidth + 6, curY + 6, {
+              width: colWidth - 12
+            });
+          });
+          curY += rowHeight;
+        });
+        doc.rect(x, y, width, curY - y).strokeColor(theme.colors.border || "rgba(255,255,255,0.1)").stroke();
+        return curY;
+      }
+      default:
+        return y;
+    }
+  }
+  getVariantColor(variant, theme) {
+    switch (variant) {
+      case "warning":
+        return theme.colors.warning || "#f59e0b";
+      case "info":
+        return theme.colors.info || "#3b82f6";
+      case "success":
+        return theme.colors.success || "#10b981";
+      case "danger":
+        return theme.colors.danger || "#ef4444";
+      case "primary":
+      default:
+        return theme.colors.primary;
+    }
+  }
+  stripFormatting(text) {
+    return text.replace(/\*\*(.*?)\*\*/g, "$1").replace(/\*(.*?)\*/g, "$1").replace(/`(.*?)`/g, "$1");
+  }
+};
+
 // src/dev-server.ts
 import { createServer } from "http";
 import { readFileSync, watch } from "fs";
@@ -2766,7 +3431,7 @@ function startDevServer(filePath, options = {}) {
 // src/cli.ts
 import { mkdirSync, readFileSync as readFileSync2, watch as fsWatch, writeFileSync } from "fs";
 import { basename, dirname, extname, join, resolve as resolve2 } from "path";
-var VERSION = "0.1.10";
+var VERSION = "0.1.13";
 function printHelp() {
   return `
 YumiaMD \u2014 Markdown-based presentation compiler (v${VERSION})
@@ -2782,7 +3447,7 @@ Commands:
   lint <file>        Analyze presentation for layout overflows and accessibility
   inspect <file>     Inspect the AST and geometric layout tree
   schema             Output machine-readable JSON schema for AI agents
-  build <file>       Compile a presentation to PowerPoint (.pptx) or HTML (.html)
+  build <file>       Compile a presentation to PowerPoint (.pptx), PDF (.pdf), or HTML (.html)
 
 Theming & Color Options:
   --theme, -t <name> Base theme: default | cyberpunk | minimal | corporate | terminal | academic
@@ -2797,7 +3462,7 @@ Server & Compiler Options:
   --open             Open default browser automatically in dev mode
   --watch, -w        Watch for file changes during compilation
   --out, -o <file>   Specify output file path (default: dist/<name>.<format>)
-  --format, -f <fmt> Target output format: pptx (default) | html
+  --format, -f <fmt> Target output format: pptx (default) | pdf | html
   --strict           Enforce zero warnings in 'lint' (exits with code 1 on warning)
   --json             Output results formatted as JSON for CI/CD and AI tools
   --layout           Show computed geometric bounding boxes in 'inspect'
@@ -3120,7 +3785,8 @@ ${summary}${isStrict && report.warnings.length > 0 ? " (failed due to --strict)"
     try {
       const resolvedInput = resolve2(process.cwd(), target);
       const isHtml = cliFormat === "html";
-      const targetExtension = isHtml ? ".html" : ".pptx";
+      const isPdf = cliFormat === "pdf";
+      const targetExtension = isHtml ? ".html" : isPdf ? ".pdf" : ".pptx";
       let outputPath = "";
       const outFlagIndex = args.findIndex((a) => a === "--out" || a === "-o");
       if (outFlagIndex !== -1 && args[outFlagIndex + 1]) {
@@ -3149,6 +3815,14 @@ ${summary}${isStrict && report.warnings.length > 0 ? " (failed due to --strict)"
           });
           writeFileSync(outputPath, result2.html, "utf-8");
           return { slideCount: result2.slideCount, format: result2.format };
+        } else if (isPdf) {
+          const pdfRenderer = new PdfRenderer();
+          const result2 = await compiler.compile(source, pdfRenderer, {
+            ...renderTheme ? { renderContext: { theme: renderTheme } } : {}
+          });
+          const buffer = result2.data instanceof Uint8Array ? Buffer.from(result2.data) : Buffer.from(new Uint8Array(result2.data));
+          writeFileSync(outputPath, buffer);
+          return { slideCount: result2.slideCount, format: result2.format };
         } else {
           const pptxRenderer = new PptxRenderer();
           const result2 = await compiler.compile(source, pptxRenderer, {
@@ -3186,9 +3860,10 @@ ${summary}${isStrict && report.warnings.length > 0 ? " (failed due to --strict)"
         };
       }
       const watchMsg = command === "watch" || isWatch ? " [Watching for changes...]" : "";
+      const formatDesc = isHtml ? "interactive HTML slides" : isPdf ? "vector PDF slides" : "native editable slides";
       return {
         exitCode: 0,
-        output: `\u2713 Successfully compiled '${target}' \u2794 '${outputPath}' (${result.slideCount} ${isHtml ? "interactive HTML slides" : "native editable slides"})${watchMsg}`
+        output: `\u2713 Successfully compiled '${target}' \u2794 '${outputPath}' (${result.slideCount} ${formatDesc})${watchMsg}`
       };
     } catch (err) {
       const msg = err instanceof Error ? err.message : String(err);
@@ -3243,6 +3918,7 @@ export {
   parseInlineMarkdown,
   PptxRenderer,
   HtmlRenderer,
+  PdfRenderer,
   startDevServer,
   VERSION,
   printHelp,

package/dist/index.d.ts

@@ -7,8 +7,9 @@ export * from '@yumiamd/layout';
 export * from '@yumiamd/renderer';
 export * from '@yumiamd/renderer-pptx';
 export * from '@yumiamd/renderer-html';
+export * from '@yumiamd/renderer-pdf';
 
-declare const VERSION = "0.1.10";
+declare const VERSION = "0.1.13";
 declare function printHelp(): string;
 declare function runCli(argv: string[]): Promise<{
     exitCode: number;

package/dist/index.js

@@ -3,6 +3,7 @@ import {
   DefaultLayoutEngine,
   DefaultYumiaParser,
   HtmlRenderer,
+  PdfRenderer,
   PptxRenderer,
   THEME_REGISTRY,
   VERSION,
@@ -38,12 +39,13 @@ import {
   runCli,
   startDevServer,
   terminalTheme
-} from "./chunk-PQYPVPV2.js";
+} from "./chunk-6GEDN7OB.js";
 export {
   DEFAULT_VIEWPORT,
   DefaultLayoutEngine,
   DefaultYumiaParser,
   HtmlRenderer,
+  PdfRenderer,
   PptxRenderer,
   THEME_REGISTRY,
   VERSION,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yumiamd",
-  "version": "0.1.10",
+  "version": "0.1.13",
   "description": "Command line interface and compiler for YumiaMD presentations",
   "type": "module",
   "main": "./dist/index.js",
@@ -16,18 +16,20 @@
     }
   },
   "dependencies": {
+    "pdfkit": "^0.20.2",
     "pptxgenjs": "^4.0.1"
   },
   "devDependencies": {
     "tsup": "^8.5.1",
-    "@yumiamd/ast": "0.1.10",
-    "@yumiamd/layout": "0.1.10",
-    "@yumiamd/core": "0.1.10",
-    "@yumiamd/parser": "0.1.10",
-    "@yumiamd/renderer": "0.1.10",
-    "@yumiamd/renderer-pptx": "0.1.10",
-    "@yumiamd/renderer-html": "0.1.10",
-    "@yumiamd/theme": "0.1.10"
+    "@yumiamd/core": "0.1.13",
+    "@yumiamd/parser": "0.1.13",
+    "@yumiamd/renderer": "0.1.13",
+    "@yumiamd/ast": "0.1.13",
+    "@yumiamd/layout": "0.1.13",
+    "@yumiamd/renderer-html": "0.1.13",
+    "@yumiamd/renderer-pdf": "0.1.13",
+    "@yumiamd/renderer-pptx": "0.1.13",
+    "@yumiamd/theme": "0.1.13"
   },
   "keywords": [
     "yumia",
@@ -53,7 +55,7 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "tsup src/bin.ts src/index.ts --format esm --dts --clean --external pptxgenjs",
+    "build": "tsup src/bin.ts src/index.ts --format esm --dts --clean --external pptxgenjs,pdfkit",
     "typecheck": "tsc --noEmit"
   }
 }