slides-grab 1.0.0

package/src/resolve.js

@@ -0,0 +1,159 @@
+/**
+ * Path resolution for slides-grab.
+ *
+ * Resolution order:
+ *   1. Local (user's CWD) — per-project overrides
+ *   2. Package root — built-in defaults
+ *
+ * slides directory, slide-outline.md, style-config.md → always local (CWD)
+ * templates/, themes/ → local first, package fallback
+ * scripts/ → always package
+ */
+
+import { existsSync, readdirSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const PACKAGE_ROOT = resolve(__dirname, '..');
+
+/**
+ * Get the package root directory (where slides-grab is installed).
+ */
+export function getPackageRoot() {
+  return PACKAGE_ROOT;
+}
+
+/**
+ * Get the user's working directory (where slides are created).
+ */
+export function getCwd() {
+  return process.cwd();
+}
+
+/**
+ * Resolve the slides directory in CWD.
+ * @param {string} [slidesDir='slides'] - relative or absolute slides directory path
+ */
+export function getSlidesDir(slidesDir = process.env.PPT_AGENT_SLIDES_DIR || 'slides') {
+  return resolve(getCwd(), slidesDir);
+}
+
+/**
+ * Resolve a template file. Local first, then package fallback.
+ * @param {string} name — template name without extension (e.g. "cover")
+ * @returns {{ path: string, source: 'local' | 'package' } | null}
+ */
+export function resolveTemplate(name) {
+  const fileName = name.endsWith('.html') ? name : `${name}.html`;
+
+  const localPath = join(getCwd(), 'templates', fileName);
+  if (existsSync(localPath)) {
+    return { path: localPath, source: 'local' };
+  }
+
+  const packagePath = join(PACKAGE_ROOT, 'templates', fileName);
+  if (existsSync(packagePath)) {
+    return { path: packagePath, source: 'package' };
+  }
+
+  return null;
+}
+
+/**
+ * Resolve a theme file. Local first, then package fallback.
+ * @param {string} name — theme name without extension (e.g. "modern-dark")
+ * @returns {{ path: string, source: 'local' | 'package' } | null}
+ */
+export function resolveTheme(name) {
+  const fileName = name.endsWith('.css') ? name : `${name}.css`;
+
+  const localPath = join(getCwd(), 'themes', fileName);
+  if (existsSync(localPath)) {
+    return { path: localPath, source: 'local' };
+  }
+
+  const packagePath = join(PACKAGE_ROOT, 'themes', fileName);
+  if (existsSync(packagePath)) {
+    return { path: packagePath, source: 'package' };
+  }
+
+  return null;
+}
+
+/**
+ * List all available templates (local + package, deduplicated).
+ * @returns {Array<{ name: string, source: 'local' | 'package' }>}
+ */
+export function listTemplates() {
+  const seen = new Map();
+
+  // Local templates first (take priority)
+  const localDir = join(getCwd(), 'templates');
+  if (existsSync(localDir)) {
+    for (const f of readdirSync(localDir)) {
+      if (f.endsWith('.html')) {
+        seen.set(f, { name: f.replace('.html', ''), source: 'local' });
+      }
+    }
+  }
+
+  // Also check local custom/ subdirectory
+  const localCustomDir = join(localDir, 'custom');
+  if (existsSync(localCustomDir)) {
+    for (const f of readdirSync(localCustomDir)) {
+      if (f.endsWith('.html')) {
+        const key = `custom/${f}`;
+        seen.set(key, { name: `custom/${f.replace('.html', '')}`, source: 'local' });
+      }
+    }
+  }
+
+  // Package templates (only if not already overridden)
+  const pkgDir = join(PACKAGE_ROOT, 'templates');
+  if (existsSync(pkgDir)) {
+    for (const f of readdirSync(pkgDir)) {
+      if (f.endsWith('.html') && !seen.has(f)) {
+        seen.set(f, { name: f.replace('.html', ''), source: 'package' });
+      }
+    }
+  }
+
+  return Array.from(seen.values()).sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * List all available themes (local + package, deduplicated).
+ * @returns {Array<{ name: string, source: 'local' | 'package' }>}
+ */
+export function listThemes() {
+  const seen = new Map();
+
+  const localDir = join(getCwd(), 'themes');
+  if (existsSync(localDir)) {
+    for (const f of readdirSync(localDir)) {
+      if (f.endsWith('.css')) {
+        seen.set(f, { name: f.replace('.css', ''), source: 'local' });
+      }
+    }
+  }
+
+  const pkgDir = join(PACKAGE_ROOT, 'themes');
+  if (existsSync(pkgDir)) {
+    for (const f of readdirSync(pkgDir)) {
+      if (f.endsWith('.css') && !seen.has(f)) {
+        seen.set(f, { name: f.replace('.css', ''), source: 'package' });
+      }
+    }
+  }
+
+  return Array.from(seen.values()).sort((a, b) => a.name.localeCompare(b.name));
+}
+
+/**
+ * Resolve a script path. Always from package.
+ * @param {string} relativePath — e.g. "scripts/validate-slides.js"
+ */
+export function resolveScript(relativePath) {
+  return join(PACKAGE_ROOT, relativePath);
+}

package/templates/chart.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 720pt;
+      height: 405pt;
+      font-family: 'Pretendard', sans-serif;
+      background: #ffffff;
+      padding: 36pt 40pt;
+      display: flex;
+      flex-direction: column;
+      color: #111827;
+    }
+    .chart-grid {
+      flex: 1;
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 14pt;
+      margin-top: 18pt;
+    }
+    .chart-card {
+      border: 1px solid #e5e7eb;
+      border-radius: 10pt;
+      padding: 10pt;
+      display: flex;
+      flex-direction: column;
+    }
+    .chart-canvas-wrap {
+      flex: 1;
+      min-height: 0;
+      position: relative;
+    }
+    canvas {
+      width: 100% !important;
+      height: 100% !important;
+    }
+  </style>
+</head>
+<body>
+  <div style="display: flex; justify-content: space-between; align-items: baseline;">
+    <h2 style="font-size: 28pt; font-weight: 700; letter-spacing: -0.01em;">Quarterly Performance</h2>
+    <p style="font-size: 10pt; color: #6b7280;">DATA / CHART.JS</p>
+  </div>
+
+  <p style="font-size: 12pt; color: #4b5563; margin-top: 8pt;">
+    Bar, line, pie 차트를 하나의 슬라이드에서 비교하는 템플릿
+  </p>
+
+  <div class="chart-grid">
+    <div class="chart-card">
+      <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Bar Chart</p>
+      <div class="chart-canvas-wrap">
+        <canvas id="barChart"></canvas>
+      </div>
+    </div>
+    <div class="chart-card">
+      <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Line Chart</p>
+      <div class="chart-canvas-wrap">
+        <canvas id="lineChart"></canvas>
+      </div>
+    </div>
+    <div class="chart-card">
+      <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Pie Chart</p>
+      <div class="chart-canvas-wrap">
+        <canvas id="pieChart"></canvas>
+      </div>
+    </div>
+  </div>
+
+  <p style="font-size: 9pt; color: #9ca3af; margin-top: 10pt;">Source: Sample Dataset</p>
+
+  <script>
+    const labels = ['Q1', 'Q2', 'Q3', 'Q4'];
+    const values = [14, 22, 19, 27];
+    const colors = ['#2563eb', '#10b981', '#f59e0b', '#ef4444'];
+    const shared = { animation: false, responsive: true, maintainAspectRatio: false };
+
+    new Chart(document.getElementById('barChart'), {
+      type: 'bar',
+      data: { labels, datasets: [{ data: values, backgroundColor: colors, borderRadius: 4 }] },
+      options: {
+        ...shared,
+        plugins: { legend: { display: false } },
+        scales: { y: { beginAtZero: true, grid: { color: '#e5e7eb' } } }
+      }
+    });
+
+    new Chart(document.getElementById('lineChart'), {
+      type: 'line',
+      data: {
+        labels,
+        datasets: [{
+          data: values,
+          borderColor: '#2563eb',
+          backgroundColor: 'rgba(37,99,235,0.15)',
+          fill: true,
+          tension: 0.35
+        }]
+      },
+      options: {
+        ...shared,
+        plugins: { legend: { display: false } },
+        scales: { y: { beginAtZero: true, grid: { color: '#e5e7eb' } } }
+      }
+    });
+
+    new Chart(document.getElementById('pieChart'), {
+      type: 'pie',
+      data: { labels, datasets: [{ data: [34, 26, 21, 19], backgroundColor: colors }] },
+      options: {
+        ...shared,
+        plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 9 } } } }
+      }
+    });
+  </script>
+</body>
+</html>

package/templates/closing.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 720pt;
+      height: 405pt;
+      font-family: 'Pretendard', sans-serif;
+      background: #1a1a1a;
+      padding: 48pt;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  </style>
+</head>
+<body>
+  <!-- 로고 -->
+  <div style="display: flex; align-items: center; gap: 8pt;">
+    <div style="width: 20pt; height: 20pt; background: #fff; border-radius: 4pt; display: flex; align-items: center; justify-content: center;">
+      <p style="color: #1a1a1a; font-size: 12pt;">*</p>
+    </div>
+    <p style="font-size: 12pt; font-weight: 600; color: #ffffff;">LogoName</p>
+  </div>
+
+  <!-- 메인 메시지 -->
+  <div>
+    <h1 style="font-size: 56pt; font-weight: 500; color: #ffffff; letter-spacing: -0.02em; line-height: 1.1;">
+      Thank You
+    </h1>
+    <p style="font-size: 16pt; color: #888; margin-top: 16pt;">
+      Questions? Let's discuss.
+    </p>
+  </div>
+
+  <!-- 연락처 정보 -->
+  <div style="display: flex; gap: 64pt;">
+    <div>
+      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Email</p>
+      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">hello@company.com</p>
+    </div>
+    <div>
+      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Phone</p>
+      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">+82 10-1234-5678</p>
+    </div>
+    <div>
+      <p style="font-size: 9pt; color: #666; margin-bottom: 4pt;">Website</p>
+      <p style="font-size: 12pt; font-weight: 500; color: #ffffff;">www.company.com</p>
+    </div>
+  </div>
+</body>
+</html>

package/templates/content.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 720pt;
+      height: 405pt;
+      font-family: 'Pretendard', sans-serif;
+      background: #ffffff;
+      padding: 40pt 48pt;
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+</head>
+<body>
+  <!-- 헤더 -->
+  <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 32pt;">
+    <div style="display: flex; align-items: center; gap: 12pt;">
+      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
+      <h2 style="font-size: 24pt; font-weight: 600; color: #1a1a1a;">Main Topic</h2>
+    </div>
+    <p style="font-size: 10pt; color: #999;">02</p>
+  </div>
+
+  <!-- 콘텐츠 영역 -->
+  <div style="flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 32pt;">
+    <div>
+      <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point One</h3>
+      <p style="font-size: 13pt; color: #666; line-height: 1.7;">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.
+      </p>
+    </div>
+    <div>
+      <h3 style="font-size: 18pt; font-weight: 600; color: #1a1a1a; margin-bottom: 16pt;">Key Point Two</h3>
+      <p style="font-size: 13pt; color: #666; line-height: 1.7;">
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
+      </p>
+    </div>
+  </div>
+
+  <!-- 푸터 -->
+  <div style="display: flex; justify-content: space-between; align-items: center; padding-top: 16pt; border-top: 1px solid #eee;">
+    <p style="font-size: 9pt; color: #999;">www.yourwebsite.com</p>
+    <p style="font-size: 9pt; color: #999;">©2025 YOUR BRAND</p>
+  </div>
+</body>
+</html>

package/templates/contents.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 720pt;
+      height: 405pt;
+      font-family: 'Pretendard', sans-serif;
+      background: #b8c4b8;
+      padding: 48pt;
+      display: grid;
+      grid-template-columns: 1fr 1.8fr;
+      gap: 48pt;
+    }
+  </style>
+</head>
+<body>
+  <!-- 왼쪽: 타이틀 -->
+  <div style="display: flex; flex-direction: column; justify-content: flex-end;">
+    <p style="font-size: 9pt; color: #3d3d3d; margin-bottom: 16pt;">©2025 YOUR BRAND. ALL RIGHTS RESERVED.</p>
+    <h1 style="font-size: 56pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
+      Our<br>Contents
+    </h1>
+    <div style="width: 32pt; height: 32pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: 24pt;">
+      <p style="font-size: 14pt; color: #1a1a1a;">↗</p>
+    </div>
+  </div>
+
+  <!-- 오른쪽: 목차 리스트 -->
+  <div style="display: flex; flex-direction: column; justify-content: center; gap: 16pt;">
+    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
+      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 1</p>
+      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
+      <p style="font-size: 14pt; color: #666;">(1)</p>
+    </div>
+    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
+      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 2</p>
+      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
+      <p style="font-size: 14pt; color: #666;">(2)</p>
+    </div>
+    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
+      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 3</p>
+      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
+      <p style="font-size: 14pt; color: #666;">(3)</p>
+    </div>
+    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0; border-bottom: 1px solid rgba(0,0,0,0.1);">
+      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 4</p>
+      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
+      <p style="font-size: 14pt; color: #666;">(4)</p>
+    </div>
+    <div style="display: flex; align-items: center; gap: 16pt; padding: 12pt 0;">
+      <p style="display: inline-block; padding: 4pt 10pt; background: #1a1a1a; color: #fff; border-radius: 4pt; font-size: 8pt; font-weight: 600;">SECTION 5</p>
+      <p style="flex: 1; font-size: 14pt; font-weight: 500; color: #1a1a1a;">SECTION TITLE</p>
+      <p style="font-size: 14pt; color: #666;">(5)</p>
+    </div>
+  </div>
+</body>
+</html>

package/templates/cover.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 720pt;
+      height: 405pt;
+      font-family: 'Pretendard', sans-serif;
+      background: #f5f5f0;
+      padding: 32pt 48pt;
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+</head>
+<body>
+  <!-- 헤더 -->
+  <div style="display: flex; justify-content: space-between; align-items: center;">
+    <div style="display: flex; align-items: center; gap: 16pt;">
+      <div style="display: flex; align-items: center; gap: 8pt;">
+        <div style="width: 18pt; height: 18pt; background: #1a1a1a; border-radius: 3pt; display: flex; align-items: center; justify-content: center;">
+          <p style="color: #fff; font-size: 10pt;">*</p>
+        </div>
+        <p style="font-size: 11pt; font-weight: 600; color: #1a1a1a;">LogoName</p>
+      </div>
+      <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">PRESENTATION</p>
+    </div>
+    <div style="display: flex; align-items: center; gap: 8pt;">
+      <p style="display: inline-block; padding: 4pt 10pt; border: 1px solid #1a1a1a; border-radius: 12pt; font-size: 9pt; font-weight: 500;">OUR PROJECT</p>
+      <div style="width: 28pt; height: 28pt; border: 1px solid #1a1a1a; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
+        <p style="font-size: 12pt; color: #1a1a1a;">↘</p>
+      </div>
+    </div>
+  </div>
+
+  <!-- 메인 타이틀 -->
+  <div style="flex: 1; display: flex; flex-direction: column; justify-content: center;">
+    <h1 style="font-size: 72pt; font-weight: 500; color: #1a1a1a; letter-spacing: -0.02em; line-height: 1.1;">
+      Business Deck
+    </h1>
+    <p style="font-size: 14pt; color: #666; margin-top: 24pt;">
+      <span style="color: #999;">Presented by</span>  <span style="font-weight: 500; color: #1a1a1a;">Luna Martinez</span>
+    </p>
+  </div>
+
+  <!-- 푸터 정보 -->
+  <div style="display: flex; gap: 64pt;">
+    <div>
+      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Contact</p>
+      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">334556774</p>
+    </div>
+    <div>
+      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Date</p>
+      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">March 2025</p>
+    </div>
+    <div>
+      <p style="font-size: 9pt; color: #999; margin-bottom: 4pt;">Website</p>
+      <p style="font-size: 11pt; font-weight: 500; color: #1a1a1a;">www.yourwebsite.com</p>
+    </div>
+  </div>
+</body>
+</html>

package/templates/custom/README.md

@@ -0,0 +1,7 @@
+# Custom Templates
+
+사용자 커스텀 템플릿을 이 디렉토리에 추가하세요.
+
+- 파일 형식: `.html`
+- 권장 명명: `kebab-case.html`
+- 기본 템플릿은 상위 `templates/` 디렉토리를 참고해 복사/수정하세요.

package/templates/diagram.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+  <script src="https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.min.js"></script>
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 720pt;
+      height: 405pt;
+      font-family: 'Pretendard', sans-serif;
+      background: #ffffff;
+      padding: 36pt 40pt;
+      display: flex;
+      flex-direction: column;
+      color: #111827;
+    }
+    .diagram-grid {
+      flex: 1;
+      min-height: 0;
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 14pt;
+      margin-top: 18pt;
+    }
+    .diagram-card {
+      border: 1px solid #e5e7eb;
+      border-radius: 10pt;
+      padding: 10pt;
+      display: flex;
+      flex-direction: column;
+      min-height: 0;
+    }
+    .diagram-wrap {
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+    pre.mermaid {
+      width: 100%;
+      height: 100%;
+      font-family: 'Pretendard', sans-serif;
+      background: #ffffff;
+    }
+  </style>
+</head>
+<body>
+  <div style="display: flex; justify-content: space-between; align-items: baseline;">
+    <h2 style="font-size: 28pt; font-weight: 700; letter-spacing: -0.01em;">Process Diagram</h2>
+    <p style="font-size: 10pt; color: #6b7280;">DIAGRAM / MERMAID</p>
+  </div>
+
+  <p style="font-size: 12pt; color: #4b5563; margin-top: 8pt;">
+    Flowchart와 sequence diagram을 한 장에 배치하는 템플릿
+  </p>
+
+  <div class="diagram-grid">
+    <div class="diagram-card">
+      <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Flowchart</p>
+      <div class="diagram-wrap">
+        <pre class="mermaid">
+flowchart TD
+  A[요청 수신] --> B[아웃라인 생성]
+  B --> C[디자인 슬라이드 생성]
+  C --> D[PPTX 변환]
+  D --> E[검토]
+        </pre>
+      </div>
+    </div>
+    <div class="diagram-card">
+      <p style="font-size: 10pt; color: #374151; margin-bottom: 6pt;">Sequence Diagram</p>
+      <div class="diagram-wrap">
+        <pre class="mermaid">
+sequenceDiagram
+  participant User
+  participant Agent
+  participant Converter
+  User->>Agent: 슬라이드 생성 요청
+  Agent->>Converter: HTML 전달
+  Converter-->>Agent: PPTX 반환
+  Agent-->>User: 결과 전달
+        </pre>
+      </div>
+    </div>
+  </div>
+
+  <p style="font-size: 9pt; color: #9ca3af; margin-top: 10pt;">Rendered with Mermaid</p>
+
+  <script>
+    mermaid.initialize({
+      startOnLoad: true,
+      securityLevel: 'loose',
+      theme: 'default',
+      fontFamily: 'Pretendard'
+    });
+  </script>
+</body>
+</html>

package/templates/quote.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 720pt;
+      height: 405pt;
+      font-family: 'Pretendard', sans-serif;
+      background: #1a1a1a;
+      padding: 64pt;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+  <p style="font-size: 48pt; color: #444; margin-bottom: 24pt;">"</p>
+  <h2 style="font-size: 28pt; font-weight: 400; color: #ffffff; letter-spacing: -0.01em; line-height: 1.5; max-width: 540pt;">
+    The best way to predict the future is to create it.
+  </h2>
+  <div style="margin-top: 40pt;">
+    <p style="font-size: 13pt; font-weight: 500; color: #ffffff;">Peter Drucker</p>
+    <p style="font-size: 11pt; color: #666; margin-top: 4pt;">Management Consultant</p>
+  </div>
+</body>
+</html>