html2pptx-local-mcp 1.1.17

package/app/docs/content.js

@@ -0,0 +1,2082 @@
+export const DOCS_LANGUAGES = ['en', 'ja'];
+
+/* ------------------------------------------------------------------ */
+/*  Code samples                                                       */
+/* ------------------------------------------------------------------ */
+
+const CURL_EXAMPLE = `curl -X POST https://html2pptx.app/api/export/jobs \\
+  -H "Authorization: Bearer sk_live_xxxx" \\
+  -H "Content-Type: application/json" \\
+  -H "Idempotency-Key: my-unique-request-id-123" \\
+  -d '{
+    "fileName": "quarterly-review.pptx",
+    "html": "<section class=\\"slide\\" style=\\"width:1600px;height:900px;padding:64px\\"><h1>Hello</h1><p>Generated via API</p></section>",
+    "css": ".slide { font-family: Arial, sans-serif; background: #fff; }",
+    "autoEmbedFonts": false,
+    "responseFormat": "url",
+    "metadata": {
+      "channel": "api",
+      "source": "docs-quickstart"
+    }
+  }'
+
+# Response (200 OK):
+# {
+#   "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32",
+#   "status": "queued",
+#   "createdAt": "2026-04-02T10:30:00Z",
+#   "fileName": "quarterly-review.pptx",
+#   "slideCount": 1
+# }
+# Response headers include: x-request-id: req_abc123...
+
+# Poll for completion:
+curl -s https://html2pptx.app/api/export/jobs/5d934729-a0db-4aa9-bc65-e7a3e7e52b32 \\
+  -H "Authorization: Bearer sk_live_xxxx"
+
+# Response (200 OK, when completed with responseFormat "url"):
+# {
+#   "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32",
+#   "status": "completed",
+#   "createdAt": "2026-04-02T10:30:00Z",
+#   "completedAt": "2026-04-02T10:30:12Z",
+#   "fileName": "quarterly-review.pptx",
+#   "slideCount": 1,
+#   "mimeType": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+#   "downloadUrl": "https://storage.example.com/quarterly-review.pptx?token=..."
+# }`;
+
+const JS_EXAMPLE = `const response = await fetch("https://html2pptx.app/api/export/jobs", {
+  method: "POST",
+  headers: {
+    "Authorization": "Bearer sk_live_xxxx",
+    "Content-Type": "application/json",
+    "Idempotency-Key": "my-unique-request-id-123",
+  },
+  body: JSON.stringify({
+    fileName: "quarterly-review.pptx",
+    html: \`<section class="slide" style="width:1600px;height:900px">
+  <h1>Hello World</h1>
+  <p>Generated via API</p>
+</section>\`,
+    css: ".slide { font-family: Arial, sans-serif; background: #fff; }",
+    autoEmbedFonts: false,
+    responseFormat: "url",
+    metadata: { channel: "api", source: "docs-js" },
+  }),
+});
+
+const { jobId } = await response.json();
+const requestId = response.headers.get("x-request-id");
+console.log("Job created:", jobId, "Request ID:", requestId);
+
+// Poll for completion
+const poll = async (id) => {
+  const res = await fetch(\`https://html2pptx.app/api/export/jobs/\${id}\`, {
+    headers: { "Authorization": "Bearer sk_live_xxxx" },
+  });
+  const data = await res.json();
+  if (data.status === "completed") return data;
+  if (data.status === "failed") throw new Error(data.message || data.error);
+  await new Promise(r => setTimeout(r, 2000));
+  return poll(id);
+};
+
+const completed = await poll(jobId);
+// With responseFormat "url", use downloadUrl directly
+console.log("Download URL:", completed.downloadUrl);
+// With responseFormat "base64", decode fileBase64
+// const bytes = Uint8Array.from(atob(completed.fileBase64), c => c.charCodeAt(0));`;
+
+const PYTHON_EXAMPLE = `import requests
+import time
+
+API_KEY = "sk_live_xxxx"
+BASE_URL = "https://html2pptx.app"
+
+# 1. Create export job
+resp = requests.post(
+    f"{BASE_URL}/api/export/jobs",
+    headers={
+        "Authorization": f"Bearer {API_KEY}",
+        "Content-Type": "application/json",
+        "Idempotency-Key": "my-unique-request-id-123",
+    },
+    json={
+        "fileName": "quarterly-review.pptx",
+        "html": '<section class="slide" style="width:1600px;height:900px"><h1>Hello</h1></section>',
+        "css": ".slide { font-family: Arial, sans-serif; }",
+        "autoEmbedFonts": False,
+        "responseFormat": "url",
+        "metadata": {"channel": "api", "source": "docs-python"},
+    },
+)
+job_id = resp.json()["jobId"]
+request_id = resp.headers.get("x-request-id")
+print(f"Job created: {job_id} (request-id: {request_id})")
+
+# 2. Poll for completion
+while True:
+    status_resp = requests.get(
+        f"{BASE_URL}/api/export/jobs/{job_id}",
+        headers={"Authorization": f"Bearer {API_KEY}"},
+    )
+    data = status_resp.json()
+    if data["status"] == "completed":
+        break
+    if data["status"] == "failed":
+        raise RuntimeError(data.get("message") or data.get("error"))
+    time.sleep(2)
+
+# 3. Download the PPTX file (responseFormat "url")
+download_resp = requests.get(data["downloadUrl"])
+with open("output.pptx", "wb") as f:
+    f.write(download_resp.content)
+print("Saved to output.pptx")`;
+
+const JOB_RESPONSE_EXAMPLE = `{
+  "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32",
+  "status": "queued",
+  "createdAt": "2026-04-02T10:30:00Z",
+  "fileName": "quarterly-review.pptx",
+  "slideCount": 1
+}`;
+
+const JOB_STATUS_EXAMPLE = `{
+  "jobId": "5d934729-a0db-4aa9-bc65-e7a3e7e52b32",
+  "status": "completed",
+  "createdAt": "2026-04-02T10:30:00Z",
+  "completedAt": "2026-04-02T10:30:12Z",
+  "fileName": "quarterly-review.pptx",
+  "slideCount": 3,
+  "mimeType": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+  "downloadUrl": "https://storage.example.com/quarterly-review.pptx?token=..."
+}`;
+
+const SLIDE_SAMPLE_CODE = `<section class="slide" style="width: 1600px; height: 900px;">
+  <header class="hero">
+    <div class="eyebrow">Quarterly review</div>
+    <h1>Presentation-ready HTML</h1>
+    <p>Build the layout once, confirm it in the preview, then export.</p>
+  </header>
+
+  <section class="grid">
+    <article class="card">...</article>
+    <article class="card">...</article>
+  </section>
+</section>`;
+
+const SKILL_INSTALL_COMMAND_EN = `# Choose the command for your agent
+# Claude Code
+npx skills add https://html2pptx.app -a claude-code
+
+# Codex
+npx skills add https://html2pptx.app -a codex
+
+# Cursor
+npx skills add https://html2pptx.app -a cursor
+
+# Windsurf
+npx skills add https://html2pptx.app -a windsurf
+
+# Preview published skills without installing
+npx skills add https://html2pptx.app --list
+
+# More agents / multiple targets: use the interactive selector
+npx skills add https://html2pptx.app
+
+# Install remote MCP and local MCP for edit-slide
+npx -y html2pptx-local-mcp@latest html2pptx-install-mcp claude`;
+
+const SKILL_INSTALL_COMMAND_JA = `# 使うエージェントのコマンドを選択
+# Claude Code
+npx skills add https://html2pptx.app -a claude-code
+
+# Codex
+npx skills add https://html2pptx.app -a codex
+
+# Cursor
+npx skills add https://html2pptx.app -a cursor
+
+# Windsurf
+npx skills add https://html2pptx.app -a windsurf
+
+# インストールせずに公開Skillを確認
+npx skills add https://html2pptx.app --list
+
+# その他のエージェント / 複数指定は対話形式で選択
+npx skills add https://html2pptx.app
+
+# Remote MCP と edit-slide 用 Local MCP をまとめて追加
+npx -y html2pptx-local-mcp@latest html2pptx-install-mcp claude`;
+
+const SKILL_INVOCATION_EXAMPLE = `# 例: Claude Code でスライド作成 → PPTX出力
+
+> 「この会議メモから5枚のプレゼンを作って、PPTXで出力して」
+
+# エージェントが自動で実行するフロー:
+# 1. SKILL.md を読み込み、html2pptx.app のHTML契約を理解
+# 2. 会議メモを解析し、スライド構成を設計
+# 3. .slide クラス + 明示サイズ付きのスライドセーフHTMLを生成（1600x900 はデフォルト例）
+# 4. diagnose でマークアップを検証（safe / needs-rewrite / out-of-scope）
+# 5. html2pptx.app API にエクスポートジョブを送信
+# 6. 完了をポーリングし、completed payload をユーザーに返却
+
+# APIキーの設定（環境変数）
+export HTML2PPTX_API_KEY="sk_live_xxxx"`;
+
+const SKILL_AVAILABLE_LIST = [
+  {
+    name: 'html-to-pptx-slide-authoring',
+    description: 'スライド用HTML/CSSの作成・診断・修正。HTMLがPPTXに正しく変換されるかを事前チェックし、問題があれば自動で書き換え。',
+    capabilities: ['HTML診断（safe / needs-rewrite / out-of-scope）', 'マークアップ自動書き換え', 'スライドHTML新規生成', '入力バリデーション'],
+  },
+  {
+    name: 'pptx-studio-export-automation',
+    description: 'APIジョブの作成・ステータス管理・エラーハンドリング。REST API / MCP の使い分け判断も含む。',
+    capabilities: ['エクスポートジョブ作成', 'ポーリング＆完了待機', 'エラー分析＆リトライ', 'プラン制限の事前チェック'],
+  },
+  {
+    name: 'edit-slide',
+    description: 'ローカルHTMLスライドをlocalhost上のvisual editorで開き、localhost bridge 経由で同じファイルに保存。',
+    capabilities: ['html2pptx_open_local_slide_editor', 'PowerPoint風UIで視覚編集', 'ローカルHTMLへの自動保存', '変更検知と競合防止'],
+  },
+];
+
+const MCP_INSTALL_EXAMPLE = `# Remote MCP と edit-slide 用 Local MCP をまとめて追加
+npx -y html2pptx-local-mcp@latest html2pptx-install-mcp claude`;
+
+const MCP_CONFIG_EXAMPLE = `// 方法2: 設定ファイルに手動追加
+
+// Claude Desktop: ~/Library/Application Support/Claude/claude_desktop_config.json
+// VS Code: .vscode/mcp.json
+// Claude Code: .claude/settings.json → mcpServers
+
+{
+  "mcpServers": {
+    "html2pptx-local": {
+      "type": "stdio",
+      "command": "node",
+      "args": [
+        "/Users/<you>/.html2pptx/bin/html2pptx-local-mcp-launcher.mjs"
+      ],
+      "env": {}
+    }
+  }
+}`;
+
+const MCP_USAGE_EXAMPLE = `# Example conversation in Claude Desktop with html2pptx.app MCP:
+
+User: "Create a presentation about our Q1 2026 results."
+
+Claude (via MCP):
+1. Calls html2pptx_list_export_plans to inspect available plans
+2. Generates slide HTML from the conversation context
+3. Calls html2pptx_create_export_job with the HTML payload
+4. Calls html2pptx_wait_for_export_job to poll until completion
+5. Returns the resulting PPTX payload or follow-up instructions
+
+# Behind the scenes, the MCP tools handle:
+# - Authentication with your configured API key
+# - Proper HTML contract formatting (.slide class, explicit slide dimensions)
+# - Status polling with exponential backoff
+# - Error handling and retry logic`;
+
+const REPORT_EXAMPLE = `const slides = quarterly_data.map((quarter, i) => \`
+  <section class="slide" style="width:1600px;height:900px;padding:60px;font-family:'Noto Sans JP',sans-serif;">
+    <h2 style="color:#1a1a2e;font-size:36px;">Q\${i+1} Results</h2>
+    <div style="display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:40px;">
+      <div style="background:#f0f4ff;border-radius:16px;padding:32px;">
+        <p style="font-size:14px;color:#6b7280;">Revenue</p>
+        <p style="font-size:48px;font-weight:700;color:#1a1a2e;">\${quarter.revenue}</p>
+      </div>
+      <div style="background:#f0fdf4;border-radius:16px;padding:32px;">
+        <p style="font-size:14px;color:#6b7280;">Growth</p>
+        <p style="font-size:48px;font-weight:700;color:#16a34a;">\${quarter.growth}%</p>
+      </div>
+    </div>
+  </section>
+\`).join("\\n");
+
+const resp = await fetch("/api/export/jobs", {
+  method: "POST",
+  headers: { "Authorization": "Bearer sk_live_xxxx", "Content-Type": "application/json" },
+  body: JSON.stringify({ fileName: "q-report.pptx", html: slides }),
+});`;
+
+const PROPOSAL_TEMPLATE_EXAMPLE = `// Sales proposal template with dynamic client data
+function generateProposal(client) {
+  return \`
+    <section class="slide" style="width:1600px;height:900px;padding:60px;background:linear-gradient(135deg,#1a1a2e,#16213e);">
+      <h1 style="color:#fff;font-size:48px;">\${client.companyName} 御中</h1>
+      <p style="color:#a0aec0;font-size:24px;margin-top:20px;">ご提案書 - \${client.projectName}</p>
+      <div style="position:absolute;bottom:60px;left:60px;color:#718096;font-size:14px;">
+        \${new Date().toLocaleDateString('ja-JP')} | Confidential
+      </div>
+    </section>
+    <section class="slide" style="width:1600px;height:900px;padding:60px;">
+      <h2 style="font-size:36px;color:#1a1a2e;">提案概要</h2>
+      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;margin-top:40px;">
+        \${client.features.map(f => \`
+          <div style="background:#f7fafc;border-radius:12px;padding:24px;">
+            <h3 style="font-size:20px;color:#2d3748;">\${f.title}</h3>
+            <p style="font-size:14px;color:#718096;margin-top:8px;">\${f.description}</p>
+          </div>
+        \`).join('')}
+      </div>
+    </section>
+  \`;
+}`;
+
+const SAAS_EMBED_EXAMPLE = `// Backend route: POST /api/dashboard/export-pptx
+app.post("/api/dashboard/export-pptx", async (req, res) => {
+  const { dashboardId } = req.body;
+  const dashboard = await getDashboard(dashboardId);
+
+  // Render each widget as a slide
+  const slides = dashboard.widgets.map(widget => \`
+    <section class="slide" style="width:1600px;height:900px;padding:40px;">
+      <h2 style="font-size:28px;color:#1a1a2e;">\${widget.title}</h2>
+      <div style="margin-top:20px;">\${widget.renderToHTML()}</div>
+    </section>
+  \`).join("");
+
+  // Call html2pptx.app API
+  const job = await fetch(process.env.HTML2PPTX_API_URL + "/api/export/jobs", {
+    method: "POST",
+    headers: {
+      "Authorization": \`Bearer \${process.env.HTML2PPTX_API_KEY}\`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      fileName: \`\${dashboard.name}.pptx\`,
+      html: slides,
+    }),
+  });
+
+  const { jobId } = await job.json();
+  res.json({ jobId, statusUrl: \`/api/export/jobs/\${jobId}\` });
+});`;
+
+const ERROR_CODES_EXAMPLE = `{
+  "type": "https://html2pptx.app/errors/slides-limit-exceeded",
+  "status": 422,
+  "title": "Slides limit exceeded",
+  "detail": "Plan Starter supports up to 200 slides per job. You submitted 260 slides.",
+  "instance": "/api/export/jobs",
+  "error": "slides_limit_exceeded",
+  "message": "Plan Starter supports up to 200 slides per job.",
+  "slideCount": 260
+}`;
+
+const PLANS_RESPONSE_EXAMPLE = `{
+  "recommendedPlanId": "founding_beta",
+  "plans": [
+    {
+      "id": "free_web",
+      "name": "Free Preview",
+      "includes": { "api": true, "skills": true, "mcp": true },
+      "limits": {
+        "requestsPerMinute": 3,
+        "dailyRequestLimit": 100,
+        "monthlyRequestLimit": 0,
+        "monthlyReviewThreshold": 1000,
+        "monthlyUpgradePromptThreshold": 2000,
+        "maxSlidesPerJob": 50,
+        "concurrentJobs": 1,
+        "apiKeys": 1,
+        "maxPayloadBytes": 1048576
+      }
+    }
+  ],
+  "note": "Free Preview is generous for personal use. Paid tiers unlock commercial operation, team sharing, automation throughput, and support."
+}`;
+
+const WEB_EXPORT_EXAMPLE = `const create = await fetch("/api/web-export/jobs", {
+  method: "POST",
+  headers: { "Content-Type": "application/json" },
+  body: JSON.stringify({
+    fileName: "studio-export.pptx",
+    html: document.querySelector("#slides-root").innerHTML,
+    css: ".slide { width: 1600px; height: 900px; }",
+  }),
+});
+
+const queued = await create.json();
+console.log("Hosted web export job:", queued.jobId);`;
+
+/* ------------------------------------------------------------------ */
+/*  Docs copy -- English                                                */
+/* ------------------------------------------------------------------ */
+
+export const DOCS_COPY = {
+  en: {
+    lang: 'en',
+    languageLabel: 'English',
+    metaTitle: 'Documentation | html2pptx.app',
+    metaDescription:
+      'Comprehensive documentation for html2pptx.app: the only API that converts HTML/CSS to fully editable PowerPoint files. REST API, Skills integration, MCP protocol, quickstart guides, and the HTML contract for reliable PowerPoint generation.',
+
+    navSections: [
+      { id: 'overview', label: 'Service Overview', children: [
+        { id: 'overview-channels', label: 'Channels' },
+        { id: 'overview-comparison', label: 'Comparison' },
+        { id: 'overview-css', label: 'CSS Support' },
+      ]},
+      { id: 'quickstart', label: 'Quick Start' },
+      { id: 'api-reference', label: 'API Reference', children: [
+        { id: 'api-html-elements', label: 'HTML Elements' },
+        { id: 'api-html-forbidden', label: 'Forbidden' },
+      ]},
+	      { id: 'skills', label: 'Skills Integration', children: [
+	        { id: 'skills-setup', label: 'Setup' },
+	        { id: 'skills-local-editor', label: 'Local Visual Editor' },
+	        { id: 'skills-capabilities', label: 'Capabilities' },
+	      ]},
+      { id: 'mcp', label: 'MCP Integration', children: [
+        { id: 'mcp-setup', label: 'Setup' },
+        { id: 'mcp-auth', label: 'Authentication' },
+        { id: 'mcp-tools', label: 'Tools' },
+        { id: 'mcp-example', label: 'Example' },
+      ]},
+      { id: 'cli', label: 'CLI Tool', children: [
+        { id: 'cli-install', label: 'Installation' },
+        { id: 'cli-commands', label: 'Commands' },
+        { id: 'cli-examples', label: 'Examples' },
+      ]},
+      { id: 'use-cases', label: 'Use Cases' },
+      { id: 'plans', label: 'Plans & Pricing', children: [
+        { id: 'plans-rate-limits', label: 'Rate Limits' },
+      ]},
+      { id: 'security', label: 'Security & Limits', children: [
+        { id: 'security-checklist', label: 'Checklist' },
+      ]},
+      { id: 'faq', label: 'FAQ', children: [
+        { id: 'faq-troubleshoot', label: 'Troubleshoot' },
+      ]},
+    ],
+
+    /* --- Section 1: Service Overview --- */
+    overviewTitle: 'Service Overview',
+    overviewSubtitle: 'What is html2pptx.app',
+    overviewDescription:
+      'html2pptx.app converts your HTML and CSS into fully editable PowerPoint files -- not screenshots. Your text stays editable, layouts are preserved, and CSS properties like Flexbox, Grid, gradients, and shadows are faithfully reproduced. The result is a production-ready presentation file.',
+    overviewHighlight: 'html2pptx.app is the only API that produces fully editable PowerPoint from HTML/CSS.',
+    overviewArchTitle: 'Architecture',
+    overviewArchDescription: 'html2pptx.app follows a four-stage pipeline that separates concerns for reliability and scalability:',
+    overviewArchSteps: [
+      { label: 'Client', detail: 'Your application, agent, or script sends HTML/CSS via REST API. Any language or platform that can make HTTP requests works.' },
+      { label: 'API Gateway', detail: 'Handles authentication (Bearer / X-API-Key), rate limiting per plan tier, request validation, and the initial job creation request.' },
+      { label: 'Durable Queue', detail: 'Job metadata is stored in Convex, large request payloads are stored in object storage, and Cloud Tasks can dispatch processing without losing jobs on worker restart.' },
+      { label: 'Private Worker', detail: 'The private renderer loads the saved job, converts your HTML/CSS into a fully editable PowerPoint file, and updates the durable job state as it progresses.' },
+      { label: 'PPTX Output', detail: 'The generated PowerPoint file is uploaded to cloud storage and a time-limited signed URL is returned for download. Files are retained for 24 hours.' },
+    ],
+    overviewComparisonTitle: 'How html2pptx.app Compares',
+    overviewComparison: [
+      { feature: 'Conversion method', html2pptx: 'Fully editable PowerPoint output', others: 'Screenshot/raster image per slide' },
+      { feature: 'Text editability', html2pptx: 'Fully editable text boxes', others: 'Flat image -- no text editing' },
+      { feature: 'CSS support', html2pptx: 'Flexbox, Grid, gradients, shadows, transforms', others: 'Limited or none' },
+      { feature: 'SVG handling', html2pptx: 'Converted to high-quality PNG images', others: 'Converted to PNG' },
+      { feature: 'File size', html2pptx: 'Usually compact, depends on embedded imagery', others: 'Large (embedded images)' },
+      { feature: 'Font embedding', html2pptx: 'Automatic web font embedding', others: 'Not supported' },
+    ],
+    overviewChannelsTitle: 'Three Integration Channels',
+    overviewChannels: [
+      {
+        title: 'REST API',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+        body: 'Standard HTTP endpoints for creating HTML-to-PPTX export jobs and polling status. Best for backend integrations, internal tools, and SaaS embedding. Works with any language -- curl, JavaScript, Python, Go, Ruby, and more. Template publishing is not a REST API surface.',
+      },
+      {
+        title: 'Skills',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/claude/default.svg',
+        body: 'Register the html2pptx skill for agent tools like Claude Code and Codex. The agent can diagnose, rewrite, export slide-safe HTML, open local editing, and publish HTML template drafts through the built-in remote MCP workflow. Ideal for AI-powered workflows where the agent manages the full pipeline.',
+      },
+      {
+        title: 'MCP (Model Context Protocol)',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14"/></svg>',
+        body: 'Expose the backend to AI agents via the MCP protocol. Use the remote HTTP endpoint at /mcp for export, docs, catalog, and template publishing tools; use local stdio MCP or direct CLI for opening local HTML in edit-slide. HTML template drafts must be created through remote MCP after validation.',
+      },
+    ],
+    overviewCssTitle: 'Supported CSS Features',
+    overviewCssFeatures: [
+      { category: 'Layout', features: 'display: flex, display: grid, position: absolute/relative, gap, align-items, justify-content' },
+      { category: 'Box Model', features: 'padding, margin, width, height, box-sizing, overflow: hidden' },
+      { category: 'Background', features: 'background-color, linear-gradient(), radial-gradient(), background-image (URL/base64)' },
+      { category: 'Border', features: 'border, border-radius (including per-corner), border-color, border-width' },
+      { category: 'Shadow', features: 'box-shadow (single and multiple), text-shadow' },
+      { category: 'Typography', features: 'font-family, font-size, font-weight, color, text-align, line-height, letter-spacing' },
+      { category: 'Transform', features: 'transform: rotate(), scale(), translate(), skew()' },
+      { category: 'Visual', features: 'opacity, visibility, z-index, object-fit' },
+    ],
+    overviewUseCasesTitle: 'Use Cases',
+    overviewUseCases: [
+      'Automated report generation from live data sources',
+      'Agent-powered presentation creation from text prompts',
+      'Internal tool integration for recurring slide decks',
+      'SaaS export feature embedding (dashboard-to-PPTX)',
+      'Brand-compliant template population',
+      'Meeting notes to presentation conversion via AI agents',
+    ],
+    overviewFeaturesTitle: 'Supported Features',
+    overviewFeatures: [
+      'SVGs are converted to high-quality images for reliable output',
+      'Automatic web font embedding (Google Fonts, custom fonts)',
+      'Flexbox and CSS Grid layout support with faithful PowerPoint reproduction',
+      'Gradients, shadows, and border-radius faithfully reproduced in PowerPoint',
+      'Base64 and URL image handling with automatic optimization',
+      'Explicit slide canvases with custom width/height/layout support. 1600x900px (13.333in x 7.5in) remains the default example',
+      'Multi-slide support (each .slide element becomes one PPTX slide)',
+      'Japanese font support (Noto Sans JP, Yu Gothic, Meiryo)',
+      'Hosted Studio and hosted web export for manual use in the browser',
+    ],
+
+    /* --- Section 2: Quick Start --- */
+    quickstartTitle: 'Quick Start',
+    quickstartSubtitle: 'Your first authenticated export in 4 steps',
+    quickstartIntro: 'The REST API is asynchronous: create a job, poll status, then decode the returned fileBase64 when the job is completed.',
+    quickstartSteps: [
+      {
+        step: '1',
+        title: 'Sign Up',
+        body: 'Create an account at <a href="https://html2pptx.app" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline hover:text-blue-800">html2pptx.app</a>. Free Preview lets you validate output quality, and Founder Beta unlocks API keys for real API usage.',
+      },
+      {
+        step: '2',
+        title: 'Get API Key',
+        body: 'Navigate to the Dashboard and click "Create API Key". Copy and store it securely -- it will only be shown once. Your key starts with sk_live_ and should be treated as a secret.',
+      },
+      {
+        step: '3',
+        title: 'Send First Request',
+        body: 'POST your HTML slide content to /api/export/jobs with your API key in the Authorization header. The API returns a jobId that you can use to track the export.',
+      },
+      {
+        step: '4',
+        title: 'Download PPTX',
+        body: 'Poll GET /api/export/jobs/{jobId} until status is "completed" (typically 5-15 seconds). The response includes a downloadUrl for the PPTX file. Use responseFormat: "base64" if you need the file content inline.',
+      },
+    ],
+    quickstartCurlTitle: 'curl',
+    quickstartCurlCode: CURL_EXAMPLE,
+    quickstartJsTitle: 'JavaScript (fetch)',
+    quickstartJsCode: JS_EXAMPLE,
+    quickstartPythonTitle: 'Python (requests)',
+    quickstartPythonCode: PYTHON_EXAMPLE,
+    quickstartCodeTabs: [
+      { label: 'curl', code: CURL_EXAMPLE },
+      { label: 'JavaScript', icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/javascript/default.svg', code: JS_EXAMPLE },
+      { label: 'Python', icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/python/default.svg', code: PYTHON_EXAMPLE },
+    ],
+
+    /* --- Section 3: API Reference --- */
+    apiTitle: 'API Reference',
+    apiBaseUrl: 'Base URL: https://html2pptx.app',
+    apiContentType: 'All request and response bodies use application/json. The create endpoint accepts top-level html/css/fileName fields plus optional width/height/layout controls; there is no nested payload wrapper.',
+
+    apiAuthTitle: 'Authentication',
+    apiAuthDescription:
+      'All commercial API endpoints require authentication. Include your API key in one of the following headers. Keys are scoped per environment (test vs. production) and can be rotated from the Dashboard.',
+    apiAuthMethods: [
+      { header: 'Authorization', value: 'Bearer sk_live_xxxx', note: 'Recommended -- standard Bearer token format used by most HTTP clients and libraries' },
+      { header: 'X-API-Key', value: 'sk_live_xxxx', note: 'Alternative header for environments where Authorization is reserved (e.g., API gateways, proxies)' },
+    ],
+    apiRateLimitTitle: 'Rate Limiting',
+    apiRateLimitDescription: 'Every REST API response includes headers that describe your current per-minute window, daily limit, and monthly fair-use status. Limits are enforced per API key for REST calls and per authenticated principal for remote MCP calls.',
+    apiRateLimitHeaders: [
+      { header: 'x-request-id', description: 'Unique request identifier included in every API response. Useful for debugging and when contacting support.' },
+      { header: 'X-Plan-Id', description: 'The effective plan ID applied to the request.' },
+      { header: 'X-RateLimit-Limit', description: 'Maximum requests allowed in the current one-minute window.' },
+      { header: 'X-RateLimit-Remaining', description: 'Requests remaining in the current window.' },
+      { header: 'Retry-After', description: 'Seconds to wait before retrying after a 429 response.' },
+      { header: 'X-Daily-Limit', description: 'Returned on plans with a daily export cap.' },
+      { header: 'X-Daily-Remaining', description: 'Remaining jobs in the current UTC day.' },
+      { header: 'X-Monthly-Used', description: 'Exports accepted in the current UTC month.' },
+      { header: 'X-Fair-Use-State', description: 'Monthly fair-use status such as normal, review, or upgrade_recommended.' },
+    ],
+    apiOperationalTitle: 'Job Lifecycle Notes',
+    apiOperationalItems: [
+      'POST /api/export/jobs returns immediately with a queued job descriptor. It does not block until the PPTX is finished.',
+      'Use the public status route at GET /api/export/jobs/{jobId}. Do not rely on any upstream worker URL that may appear in internal payloads.',
+      'The completed REST response currently includes fileBase64 and mimeType. Decode fileBase64 to write the PPTX to disk or return it to the browser.',
+      'Job ownership is bound to the API key or authenticated MCP principal that created the job. A different key cannot read the same jobId.',
+      'Slide count is derived server-side from sanitized .slide roots. Client-provided counts are ignored for enforcement.',
+    ],
+
+    apiEndpoints: [
+      {
+        method: 'POST',
+        path: '/api/export/jobs',
+        title: 'Create Export Job',
+        description: 'Creates a new PPTX export job from top-level HTML/CSS fields plus optional presentation size controls. The response is a queued job descriptor; use GET /api/export/jobs/{jobId} to retrieve terminal results.',
+        requestTitle: 'Request Body',
+        requestFields: [
+          { field: 'fileName', type: 'string', required: false, default: 'export.pptx', description: 'Output filename for the generated PPTX. Must end with .pptx extension.' },
+          { field: 'html', type: 'string', required: true, default: '--', description: 'HTML content containing one or more elements with .slide class. Each .slide becomes one PPTX slide. Required.' },
+          { field: 'css', type: 'string', required: false, default: '""', description: 'Optional CSS applied globally to the submitted HTML.' },
+          { field: 'autoEmbedFonts', type: 'boolean', required: false, default: 'false', description: 'Attempt to detect and embed fonts into the generated PPTX.' },
+          { field: 'width', type: 'number', required: false, default: '--', description: 'Optional PPTX slide width in inches. Use with height for custom presentation sizes.' },
+          { field: 'height', type: 'number', required: false, default: '--', description: 'Optional PPTX slide height in inches. Use with width for custom presentation sizes.' },
+          { field: 'layout', type: 'string', required: false, default: '--', description: 'Optional PPTX layout preset or custom layout name. Common presets: LAYOUT_16x9, LAYOUT_16x10, LAYOUT_4x3, LAYOUT_WIDE.' },
+          { field: 'metadata', type: 'object', required: false, default: '{}', description: 'Opaque metadata forwarded to the worker. Useful for request tracing on your side.' },
+          { field: 'responseFormat', type: 'string', required: false, default: '"url"', description: 'Controls how the completed PPTX file is delivered. "url" returns a presigned download URL (default). "base64" returns the file inline as base64. "both" returns both. Replaces the deprecated includeFileBase64 parameter.' },
+          { field: 'callbackUrl', type: 'string', required: false, default: '--', description: 'An HTTPS URL to receive a webhook POST when the job completes or fails. The worker sends the full job result to this URL with an x-signature-sha256 HMAC header for verification. Only https:// URLs are accepted.' },
+        ],
+        requestHeaders: [
+          { header: 'Idempotency-Key', description: 'Optional. A unique string to prevent duplicate job creation on retries. The server caches the response for 24 hours; sending the same key returns the original response without creating a new job.' },
+        ],
+        responseTitle: 'Response (200 OK)',
+        responseCode: JOB_RESPONSE_EXAMPLE,
+        errors: [
+          { code: '400', description: 'Invalid request body -- missing required fields or malformed JSON.' },
+          { code: '401', description: 'Missing or invalid API key. Ensure the Authorization or X-API-Key header is set with a valid sk_live_ key.' },
+          { code: '403', description: 'API key does not have permission for this operation. Check plan limits or key scope.' },
+          { code: '413', description: 'Request entity too large. The total request body exceeds your plan limit or the worker hard cap.' },
+          { code: '422', description: 'The sanitized HTML resolves to more slides than your plan allows.' },
+          { code: '429', description: 'Rate limit exceeded, daily limit exceeded, monthly fair-use review triggered, or concurrent job limit exceeded. Check Retry-After and usage headers.' },
+          { code: '502', description: 'Bad gateway -- the worker backend is temporarily unavailable. Retry after a short delay.' },
+          { code: '503', description: 'Service unavailable -- the system is under maintenance or experiencing high load. Retry with exponential backoff.' },
+        ],
+      },
+      {
+        method: 'GET',
+        path: '/api/export/jobs/{jobId}',
+        title: 'Check Job Status',
+        description: 'Retrieves the current status of an export job. Poll this endpoint until status is "completed" or "failed". When the job completes, the REST API returns the PPTX as fileBase64.',
+        requestTitle: 'Path Parameters',
+        requestFields: [
+          { field: 'jobId', type: 'string', required: true, default: '--', description: 'The job ID returned from the POST /api/export/jobs endpoint.' },
+        ],
+        responseTitle: 'Response (200 OK)',
+        responseCode: JOB_STATUS_EXAMPLE,
+        statusValues: [
+          { status: 'queued', description: 'Job is waiting in the processing queue.' },
+          { status: 'processing', description: 'Worker is actively converting HTML to PowerPoint.' },
+          { status: 'completed', description: 'Conversion finished successfully. fileBase64 and mimeType are available.' },
+          { status: 'failed', description: 'Conversion failed. The message field contains a human-readable description.' },
+        ],
+        errors: [
+          { code: '401', description: 'Missing or invalid API key.' },
+          { code: '404', description: 'Job not found -- either the jobId is invalid or the job belongs to a different API key.' },
+          { code: '429', description: 'Status polling rate limit exceeded.' },
+        ],
+      },
+      {
+        method: 'GET',
+        path: '/api/export/plans',
+        title: 'List Plans',
+        description: 'Returns the public plan catalog plus the recommended default plan. No authentication required.',
+        requestTitle: 'Parameters',
+        requestFields: [],
+        responseTitle: 'Response (200 OK)',
+        responseCode: PLANS_RESPONSE_EXAMPLE,
+        errors: [],
+      },
+      {
+        method: 'GET',
+        path: '/api/openapi.json',
+        title: 'OpenAPI Specification',
+        description: 'Returns the OpenAPI 3.x specification for the html2pptx.app API. Useful for generating client SDKs, importing into Postman, or browsing the API schema.',
+        requestTitle: 'Parameters',
+        requestFields: [],
+        responseTitle: 'Response (200 OK)',
+        responseCode: '// Returns the full OpenAPI 3.x JSON document',
+        errors: [],
+      },
+    ],
+
+    apiVersioningTitle: 'API Versioning',
+    apiVersioningDescription: 'Versioned endpoints are available under the /api/v1/ prefix. The original unversioned endpoints remain fully supported for backwards compatibility.',
+    apiVersioningEndpoints: [
+      { path: '/api/v1/export/jobs', description: 'Create export job (POST) or list jobs' },
+      { path: '/api/v1/export/jobs/{jobId}', description: 'Get job status by ID' },
+      { path: '/api/v1/export/plans', description: 'List available plans' },
+      { path: '/api/v1/export/usage', description: 'Get current usage and quota' },
+      { path: '/api/v1/export/keys', description: 'Manage API keys' },
+    ],
+
+    apiIdempotencyTitle: 'Idempotency',
+    apiIdempotencyDescription: 'Send an Idempotency-Key header with POST /api/export/jobs to prevent duplicate job creation on retries. The server caches the response for 24 hours. If the same key is sent again within that window, the original response is returned without creating a new job. Keys must be unique strings (UUIDs recommended).',
+
+    apiWebhookTitle: 'Webhook Callback',
+    apiWebhookDescription: 'Add a callbackUrl field (HTTPS only) to the POST /api/export/jobs request body. When the job completes or fails, the worker sends a POST request to your callback URL with the full job result as the JSON body. The request includes an x-signature-sha256 header containing an HMAC-SHA256 signature for payload verification. This eliminates the need for polling in many integration scenarios.',
+
+    apiErrorsTitle: 'Error Response Format',
+    apiErrorsDescription: 'All error responses follow the RFC 9457 Problem Details format with additional legacy fields for backwards compatibility:',
+    apiErrorsCode: ERROR_CODES_EXAMPLE,
+
+    apiContractTitle: 'HTML Contract',
+    apiContractDescription: 'The HTML you send must follow these rules for reliable conversion.',
+    apiContractRules: [
+      'Each slide must have the class .slide -- this is the boundary marker for slide separation',
+      'Each .slide must have explicit dimensions. 1600px x 900px (16:9 ratio at 13.333in x 7.5in) is the default example, and API/MCP callers can also set width, height, or layout for portrait/custom output',
+      'Supported CSS: flexbox, grid, linear-gradient, radial-gradient, box-shadow, text-shadow, border-radius, transform (rotate, scale, translate, skew), opacity',
+      'Fonts: system fonts (Arial, Helvetica, Noto Sans JP) work by default. Enable autoEmbedFonts for Google Fonts or custom @font-face declarations',
+      'Images: both base64 data URIs and absolute URLs are supported. Relative paths will fail -- always use absolute URLs',
+      'SVGs: inline SVG elements are supported and are converted to high-quality PNG images',
+      'Avoid: script tags, iframes, canvas elements, anchor tags, form elements, SVG external references, CSS animations, @keyframes, and runtime-dependent state',
+      'Nesting: deeply nested elements (> 10 levels) may impact output quality. Keep your HTML structure flat where possible',
+      'Text wrapping: text boxes default to no-wrap to prevent unexpected line breaks in PPTX. If you need text to wrap within a container (e.g. long paragraphs), add white-space: normal to that element',
+    ],
+
+    apiHtmlElementsTitle: 'Supported HTML Elements',
+    apiHtmlElementsDescription: 'Each HTML element is converted to the most appropriate PowerPoint object for maximum editability.',
+    apiHtmlElements: [
+      { element: 'div, section, article', pptx: 'Shape with fill', notes: 'Background colors, gradients, borders, and rounded corners are preserved.' },
+      { element: 'p, h1-h6, span, b, em, strong, i, small', pptx: 'Text box', notes: 'Text is fully editable in PowerPoint. Font size, weight, style, color, alignment, and line-height are all converted. Inline elements (span, b, em, etc.) become styled text runs within the same text box.' },
+      { element: 'img', pptx: 'Image', notes: 'Supports absolute URLs and base64 data URIs. CSS object-fit (contain, cover, fill, scale-down) and object-position are respected. Rounded corners are applied via clipping.' },
+      { element: 'table, tr, td, th', pptx: 'Native PPTX table', notes: 'Full table support with cell-level text styling, background fill, borders (solid/dashed/dotted), padding, text alignment, and colspan/rowspan.' },
+      { element: 'ul, ol, li', pptx: 'Bulleted / Numbered list', notes: 'Simple lists become editable bullet or numbered lists. Complex lists (with images or flex/grid inside) are converted as images.' },
+      { element: 'svg', pptx: 'Image (PNG)', notes: 'SVGs are converted to high-quality PNG images.' },
+      { element: 'canvas', pptx: 'Image (PNG)', notes: 'Canvas content is embedded as a PNG image.' },
+      { element: 'Icon elements (FontAwesome, Material Icons, etc.)', pptx: 'Image', notes: 'Icon fonts are automatically detected and converted to images.' },
+    ],
+    apiHtmlForbiddenTitle: 'Forbidden Elements',
+    apiHtmlForbiddenDescription: 'The following elements are stripped during input sanitization for security and compatibility:',
+    apiHtmlForbidden: [
+      { element: 'script, iframe, object, embed', reason: 'Security: active content removed' },
+      { element: 'link, meta, base', reason: 'Security: external references removed' },
+      { element: 'form', reason: 'Interactive elements not supported in PPTX' },
+      { element: 'style', reason: 'Use inline styles or the css parameter instead' },
+      { element: 'a', reason: 'Anchor tags stripped for security' },
+      { element: 'foreignobject, image (SVG), feimage, use', reason: 'SVG external references removed' },
+      { element: 'animate, animateMotion, animateTransform, set, discard, mpath', reason: 'SVG animations not supported' },
+    ],
+
+    /* --- Section 4: Skills Integration --- */
+    skillsTitle: 'Skills Integration',
+    skillsSubtitle: 'What are Skills',
+    skillsDescription:
+      'Skills are packaged capabilities that extend AI coding agents with domain-specific knowledge and workflows. The html2pptx.app skill teaches your agent how to author slide-safe HTML, validate it against the PPTX conversion contract, optionally open the local visual editor, export through the remote MCP workflow, and publish HTML template drafts through its built-in remote MCP publishing workflow. Install once, and your agent can convert natural language instructions into production-ready PowerPoint files or creator-owned HTML drafts.',
+    skillsHowItWorks: 'The skill bundles four core capabilities: (1) HTML authoring knowledge -- the rules for writing HTML/CSS that converts cleanly to editable PowerPoint, (2) MCP-based export automation -- connecting to the remote html2pptx.app MCP server to create jobs, poll status, and retrieve results, (3) local visual editing -- opening edit-slide through a localhost bridge when the user wants to inspect or tweak the HTML before export, and (4) template publishing -- requiring HTML drafts to go through the remote MCP validate/publish loop. The agent should ask before adding a local MCP server because that changes the user’s MCP configuration.',
+    skillsCompatibility: 'Works with 18+ AI agents including Claude Code, Cursor, GitHub Copilot, Windsurf, Cline, Codex, and more. Use the skills CLI command for the specific agent you use, or the interactive selector for other supported agents.',
+    skillsWorkflowTitle: 'Workflow',
+	    skillsWorkflow: [
+	      'Agent receives a user request (e.g., "Create a deck from these meeting notes")',
+	      'Agent reads the skill definition to understand the html2pptx.app HTML contract',
+	      'Agent generates slide-safe HTML with .slide class elements and explicit dimensions. 1600x900 is the default example',
+	      'Agent validates the markup against the conversion contract',
+	      'If visual review is needed, the agent opens the local edit-slide editor through local stdio MCP, then re-reads the edited HTML from disk',
+	      'Agent connects to remote MCP and calls html2pptx_create_export_job',
+	      'Agent polls with html2pptx_wait_for_export_job until completed',
+	      'If the user wants to create an HTML template draft, the agent uses the html2pptx skill and remote MCP: infer title/tags from the HTML, run AI security preflight, validate, fix errors, save a draft, then return draftUrl for dashboard review',
+	      'Agent returns the completed job summary to the user',
+	    ],
+	    skillsLocalEditorTitle: 'Local Visual Editor',
+	    skillsLocalEditorLead:
+	      'The edit-slide skill lets an agent open a local HTML slide deck in a PowerPoint-style visual editor served from an available loopback origin such as http://localhost:<port>. Hosted edit-slide is not allowed for local file editing. The local dev script chooses a free port and registers it in .html2pptx/edit-slide/editor-server.json inside the current project. The deck file stays on the user machine and is read/written through a localhost bridge started by the local stdio MCP tool. If the local MCP server is not already configured, the agent should explain that it will change MCP settings and ask the user before adding it.',
+	    skillsLocalEditorCode: `# Use the local MCP tool only
+html2pptx_open_local_slide_editor({ "filePath": "html2pptx/slides.html" })
+
+# Claude Code local MCP setup
+npx -y html2pptx-local-mcp@latest html2pptx-install-mcp claude`,
+	    skillsLocalEditorFlowTitle: 'How the local editor flow works',
+	    skillsLocalEditorFlow: [
+	      { label: '1. Choose remote or local MCP', detail: 'Use remote MCP for normal PPTX export and catalog/docs tools. Use local stdio MCP or `html2pptx edit <file>` when the agent must open or edit a local `.html` / `.htm` file through edit-slide. If local MCP is missing, use direct CLI when the local editor app is running or ask before installing it.' },
+	      { label: '2. Start bridge', detail: '`html2pptx_open_local_slide_editor` starts a tiny HTTP server on `127.0.0.1`. Unless a port is specified, the OS assigns a free port. Access is scoped to the current working directory.' },
+	      { label: '3. Open editor', detail: 'The command opens `http://localhost:<editor-port>/edit-slide?file=...&bridge=http://127.0.0.1:<bridge-port>#bridgeToken=...`. The one-time token is kept in the URL fragment and the editor removes it from the address bar after startup.' },
+	      { label: '4. Load local file', detail: 'The browser editor presents the token and fetches the selected `.html` or `.htm` file from the localhost bridge. No marketplace draft or public page is created.' },
+	      { label: '5. Edit visually', detail: 'Users can click slide elements and adjust text, typography, color, size, padding, margin, radius, border, opacity, and other properties from the right panel.' },
+	      { label: '6. Save to disk', detail: 'Edits are serialized back into the same HTML file through the bridge with an optimistic file hash. No version history, backups, or audit log are created.' },
+	      { label: '7. Continue with the agent', detail: 'After manual edits, the agent should re-read the HTML file from disk. If the user wants PowerPoint output, handle it as a separate agent task with the html2pptx skills.' },
+	    ],
+	    skillsLocalEditorPrivacyTitle: 'Privacy and file access model',
+	    skillsLocalEditorPrivacy: [
+	      'The bridge binds to `127.0.0.1` only. Other users cannot open the local bridge from the network.',
+	      'Each bridge run generates a per-session token that the editor must present for local reads and writes. The visible URL is redacted after startup.',
+	      'The slide preview uses no-referrer handling so external images or fonts do not receive the tokenized editor URL.',
+	      'Only `.html` and `.htm` files under the current working directory are accepted.',
+	      'Sensitive project directories such as `app/`, `components/`, `lib/`, `.git/`, `.next/`, and `node_modules/` are blocked.',
+	      'Visual editing does not publish or upload the deck. The Export PPTX button only displays a prompt telling the user to ask Claude Code or another agent to use the html2pptx skills for PowerPoint output.',
+	      'Adding the local stdio MCP server is a configuration change in the user’s agent environment. Skills and agents should not add it silently; ask first, then proceed only after confirmation.',
+	      'Editor state is project-local under `.html2pptx/edit-slide/`. No version history, backups, or audit log are created.',
+	    ],
+	    skillsLocalEditorTroubleshootingTitle: 'Common issues',
+	    skillsLocalEditorTroubleshooting: [
+	      { issue: 'The local editor tool is not available', fix: 'Ask before adding local MCP with `npx -y html2pptx-local-mcp@latest html2pptx-install-mcp claude`.' },
+	      { issue: '`html2pptx edit` cannot find the local editor', fix: 'Start `node scripts/dev-studio.mjs` first, or pass the active loopback URL with `--base-url http://localhost:<port>`. Hosted edit-slide is never used.' },
+	      { issue: 'The editor opens but the deck does not load', fix: 'Confirm the path is relative to the directory where the command was run and the file extension is `.html` or `.htm`.' },
+	      { issue: 'Changes do not save', fix: 'Keep the local MCP session running. Stopping it stops the localhost bridge.' },
+	      { issue: 'The agent wants to add local MCP', fix: 'Confirm with the user first. Local MCP is optional and only needed for MCP-driven local edit-slide sessions; remote MCP can still export PPTX without local file access.' },
+	      { issue: 'Another tab is read-only', fix: 'The editor uses a local tab lock to avoid two tabs writing to the same file. Use the active tab or click the transfer edit control.' },
+	    ],
+	    skillsSetupTitle: 'Setup',
+    skillsSetupSteps: [
+      {
+        step: '1',
+        title: 'Install MCP + Skill',
+        icons: ['claude-code', 'codex', 'cursor', 'windsurf'],
+        body: 'Choose the command for the agent you actually use: Claude Code, Codex, Cursor, or Windsurf. For other supported agents or multiple targets, use the interactive selector. Avoid --yes unless you intentionally want to install into every detected agent directory.',
+        code: SKILL_INSTALL_COMMAND_EN,
+      },
+      {
+        step: '2',
+        title: 'Configure API key',
+        body: 'Create an API key in the html2pptx.app dashboard and set it as an environment variable.',
+        code: `# Set API key as environment variable
+export HTML2PPTX_API_KEY="sk_live_xxxx"
+
+# Or add to your .env file
+echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
+      },
+      {
+        step: '3',
+        title: 'Try it out',
+        body: 'Launch your editor and give it a natural language instruction to create slides. The skill handles everything automatically.',
+        code: SKILL_INVOCATION_EXAMPLE,
+      },
+    ],
+    skillsAvailableTitle: 'Available Skills',
+    skillsAvailable: SKILL_AVAILABLE_LIST,
+    skillsCapabilitiesTitle: 'Skill Capabilities',
+    skillsCapabilities: [
+      { title: 'Diagnose HTML', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>', body: 'Classify markup as safe, needs-rewrite, or out-of-scope before attempting export. Catches issues like missing .slide elements, unsupported CSS, or dynamic content.' },
+      { title: 'Rewrite Markup', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>', body: 'Transform web-shaped HTML (responsive layouts, percentage-based sizing, scroll containers) into fixed-size .slide structures suitable for PPTX conversion.' },
+      { title: 'Generate Slides', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>', body: 'Create new slide-safe HTML from scratch given a text prompt, topic outline, or data payload. Applies best practices for visual hierarchy and readability.' },
+      { title: 'Validate Output', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>', body: 'Run the generated HTML through a pre-flight check against the html2pptx.app HTML contract before making the API call, preventing wasted export quota on invalid input.' },
+      { title: 'Publish Templates', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 8 5-5 5 5"/><path d="M5 21h14"/></svg>', body: 'For marketplace HTML drafts, the html2pptx skill includes AI security preflight, remote MCP validation, and draft creation. Web, CLI, local MCP, and generic REST flows do not create template drafts.' },
+    ],
+
+    /* --- Section 5: MCP Integration --- */
+    mcpTitle: 'MCP Integration',
+    mcpSubtitle: 'What is MCP',
+    mcpDescription:
+      'MCP (Model Context Protocol) is an open protocol that exposes backend capabilities to AI agents through a standardized tool interface. html2pptx.app supports two MCP surfaces: the remote HTTP MCP endpoint at /mcp for export, usage, docs, templates, catalog, and HTML template publishing workflows, and the local stdio MCP server for local edit-slide sessions through a localhost bridge. Use remote MCP when the agent needs to convert HTML to PPTX or create an HTML template draft. Use local stdio MCP or `html2pptx edit <file>` when the agent must open, preview, or edit a local HTML file on the user machine; local MCP does not publish templates.',
+    mcpSetupTitle: 'Installation & Setup',
+    mcpSetupLead: 'Claude Code users can run the one-command installer to add both remote MCP and local edit-slide MCP. Use the remote-only command when local visual editing is not needed.',
+    mcpEditorTabs: [
+      {
+        id: 'claude-code',
+        label: 'Claude Code',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/claude/default.svg',
+        recommended: true,
+        steps: [
+          { title: 'Set up the remote server (recommended)', body: 'Run the following command in your terminal.', code: `claude mcp add --transport http html2pptx https://html2pptx.app/mcp` },
+          { title: 'Manual setup for Claude Code', body: 'If the command above does not work, run the following to add the MCP server manually.', code: `claude mcp add html2pptx --transport http https://html2pptx.app/mcp` },
+          { title: 'One-command remote + local setup', body: 'Installs the remote MCP for exports/docs/templates and the local MCP for edit-slide. It runs from the published package, so no repository checkout is required. The local MCP is registered through a stable launcher for reliable Claude Code startup.', code: `npx -y html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
+        ],
+        tip: 'To make the MCP server available across all projects, install it with the --scope user flag:\nclaude mcp add --scope user --transport http html2pptx https://html2pptx.app/mcp',
+      },
+      {
+        id: 'codex',
+        label: 'Codex',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/openai/light.svg',
+        steps: [
+          { title: 'Run the CLI command (recommended)', body: 'Run the following command in your terminal. OAuth authentication will start automatically.', code: `codex mcp add html2pptx --url https://html2pptx.app/mcp` },
+          { title: 'Optional local stdio MCP for edit-slide', body: 'Use this when Codex needs to launch local edit-slide for a `.html` file. It runs from the published package, so no repository checkout is required. The editor app and localhost bridge use free ports. Codex should ask before adding it because it modifies the local MCP configuration.', code: `codex mcp add html2pptx-local -- npx -y html2pptx-local-mcp@latest html2pptx-mcp` },
+          { title: 'Manual setup via codex.json', body: 'Alternatively, create or edit codex.json in your project root.', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "type": "url",\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+        ],
+      },
+      {
+        id: 'cursor',
+        label: 'Cursor',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/cursor/light.svg',
+        steps: [
+          { title: 'Add to .cursor/mcp.json', body: 'Create .cursor/mcp.json in your project root and add the following.', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+        ],
+      },
+      {
+        id: 'vscode',
+        label: 'VS Code',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/visual-studio-code/default.svg',
+        steps: [
+          { title: 'Run the CLI command (recommended)', body: 'Run the following command in your terminal.', code: `code --add-mcp '{"name":"html2pptx","type":"http","url":"https://html2pptx.app/mcp"}'` },
+          { title: 'Manual setup via .vscode/mcp.json', body: 'Alternatively, create .vscode/mcp.json in your project root.', code: `{\n  "servers": {\n    "html2pptx": {\n      "type": "http",\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+        ],
+      },
+      {
+        id: 'windsurf',
+        label: 'Windsurf',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/windsurf/default.svg',
+        steps: [
+          { title: 'Add to mcp_config.json', body: 'Edit ~/.codeium/windsurf/mcp_config.json and add the following. Restart Windsurf after saving.', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "serverUrl": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+        ],
+      },
+      {
+        id: 'cline',
+        label: 'Cline',
+        steps: [
+          { title: 'Add via Cline sidebar', body: 'Open the Cline sidebar > Configure tab > "Configure MCP Servers" and add the following.', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "url": "https://html2pptx.app/mcp",\n      "type": "streamableHttp"\n    }\n  }\n}` },
+        ],
+      },
+    ],
+    mcpToolsTitle: 'Available MCP Tools',
+    mcpTools: [
+      { tool: 'html2pptx_list_export_plans', description: 'List the current commercial plan catalog and recommended plan.' },
+      { tool: 'html2pptx_create_export_job', description: 'Create an export job from HTML/CSS content. Supports optional width, height, layout, waitForCompletion, timeoutMs, and responseFormat ("url" | "base64" | "both").' },
+      { tool: 'html2pptx_get_export_job', description: 'Get the current status of an export job by jobId.' },
+      { tool: 'html2pptx_wait_for_export_job', description: 'Poll until the job completes or fails. Handles retries and backoff inside the tool.' },
+      { tool: 'html2pptx_get_docs', description: 'Fetch html2pptx.app documentation to understand the API contract, HTML requirements, and integration guides.' },
+      { tool: 'html2pptx_get_usage', description: 'Fetch the current usage and quota status for your plan. Shows weekly export count, remaining quota, plan limits, and reset timing.' },
+      { tool: 'html2pptx_list_templates', description: 'List available marketplace templates with metadata and optional category filtering.' },
+      { tool: 'html2pptx_get_template_html', description: 'Fetch a template source HTML and design prompt so agents can study or remix it.' },
+      { tool: 'html2pptx_validate_template_html', description: 'Dry-run marketplace HTML validation after AI security preflight. Required before creating an HTML template draft.' },
+      { tool: 'html2pptx_publish_template', description: 'Upload validated HTML, infer missing title/description/category/tags, and create a creator-owned HTML draft by default. The tool returns draftUrl; the user reviews and presses the final publish button in the dashboard.' },
+      { tool: 'html2pptx_open_local_slide_editor', description: 'Local stdio MCP only. Starts the existing CLI localhost bridge for a local .html/.htm slide file and opens the no-code editor without publishing the HTML. Not available from remote /mcp because remote servers cannot access user files.' },
+      { tool: 'html2pptx_stop_local_slide_editor', description: 'Local stdio MCP only. Stops a local editor bridge session started by html2pptx_open_local_slide_editor.' },
+    ],
+    mcpResourcesTitle: 'MCP Resources (Documentation)',
+    mcpResourcesDescription: 'The MCP server provides documentation as Resources. Agents can read these before creating export jobs to understand the API contract and HTML requirements.',
+    mcpResources: [
+      { uri: 'docs://html2pptx/overview', name: 'Service Overview', description: 'Architecture, CSS support, comparison with alternatives' },
+      { uri: 'docs://html2pptx/quickstart', name: 'Quickstart', description: 'First API call in 4 steps' },
+      { uri: 'docs://html2pptx/api-reference', name: 'API Reference', description: 'Endpoints, authentication, error codes' },
+      { uri: 'docs://html2pptx/html-contract', name: 'HTML Contract', description: 'HTML structure requirements and supported CSS' },
+      { uri: 'docs://html2pptx/skills', name: 'Skills Integration', description: 'Skill definitions for AI agents' },
+      { uri: 'docs://html2pptx/mcp', name: 'MCP Integration', description: 'MCP server setup and usage' },
+    ],
+    mcpLlmsTxtTitle: 'llms.txt (AI-Optimized Docs)',
+    mcpLlmsTxtDescription: 'html2pptx.app supports the llms.txt standard. Structured Markdown documentation optimized for AI agents and LLMs to efficiently understand the service.',
+    mcpLlmsTxtEndpoints: [
+      { url: 'https://html2pptx.app/llms.txt', description: 'Concise index (~100 lines) — service overview, API spec, supported CSS' },
+      { url: 'https://html2pptx.app/llms-full.txt', description: 'Complete documentation (~900 lines) — full Markdown of all sections' },
+    ],
+    mcpProgressTitle: 'Progress & Logging',
+    mcpProgressDescription: 'The MCP server provides real-time feedback during job processing:',
+    mcpProgressItems: [
+      { feature: 'notifications/progress', description: 'Sent during job polling to indicate progress percentage and current status. MCP clients can display a progress bar or status indicator.' },
+      { feature: 'notifications/message', description: 'Sent for job lifecycle events such as job created, processing started, completed, or failed. Provides human-readable log messages for debugging.' },
+    ],
+
+    mcpResourceLinkTitle: 'ResourceLink',
+    mcpResourceLinkDescription: 'When a job completes with a downloadUrl, the MCP response includes a resource content block with a ResourceLink. This enables MCP clients to natively handle the generated file -- for example, offering a direct download button or embedding the file reference in the conversation context.',
+
+    mcpAuthTitle: 'Authentication',
+    mcpAuthDescription: 'The MCP server supports two authentication methods. Choose the one that best fits your use case. API keys are fine for export, docs, usage, and catalog tools, but html2pptx_publish_template requires a WorkOS-bound user token because template drafts need a creator identity.',
+    mcpAuthMethods: [
+      {
+        method: 'API Key (Recommended)',
+        description: 'Use an API key from the dashboard. API keys do not expire (unless you set an expiration date), so you never need to re-authenticate. This is the recommended method for regular export/docs/catalog MCP usage. It cannot create creator-owned template drafts.',
+        setup: 'Generate an API key from the dashboard, then pass it as a Bearer token. Most MCP clients handle this automatically when you add the server.',
+        pros: ['No token expiration — stable, long-lived sessions', 'Simple setup — just paste the key', 'Best for daily use and automation'],
+      },
+      {
+        method: 'OAuth (Browser Login)',
+        description: 'Sign in with your Google or email account via WorkOS AuthKit. The access token is valid for 24 hours, after which you will need to re-authenticate. This identity-bound method is required for html2pptx_publish_template.',
+        setup: 'When you add the MCP server, your browser will open the login page automatically. Sign in to authorize.',
+        pros: ['No API key management needed', 'Good for quick trials and evaluation'],
+        note: 'OAuth sessions expire after 24 hours of inactivity. For uninterrupted access, we recommend using an API key instead.',
+      },
+    ],
+
+    mcpErrorRecoveryTitle: 'Error Recovery Guidance',
+    mcpErrorRecoveryDescription: 'MCP error messages include actionable guidance designed for LLM agents to self-recover. For example: "Wait 30s and retry" for rate limits, "Call html2pptx_get_docs for the HTML contract" for validation errors, or "Reduce slide count to N" for plan limit errors. This enables agents to automatically diagnose and resolve issues without user intervention.',
+
+    mcpExampleTitle: 'Example Usage',
+    mcpExampleCode: MCP_USAGE_EXAMPLE,
+
+    /* --- Section 6: Studio & Web Export --- */
+    studioTitle: 'Studio & Hosted Web Export',
+    studioLead: 'html2pptx.app also includes a browser-facing Studio and a hosted same-origin web export route. Use these surfaces for manual authoring, visual checks, and lightweight in-browser export flows.',
+    studioCards: [
+      {
+        title: 'Studio',
+        body: 'The Studio is the manual authoring environment. It is useful when you want to paste HTML/CSS, inspect the visual result, iterate on layout, and export without building your own API client first.',
+      },
+      {
+        title: 'Hosted Web Export',
+        body: 'The hosted web export route is a browser-oriented wrapper around the same backend worker. It is designed for same-origin web app usage, not for backend-to-backend automation or third-party embedding.',
+      },
+      {
+        title: 'When to use each',
+        body: 'Use REST API for product integrations and backend automation, Skills/MCP for agent workflows, Studio for manual authoring, and hosted web export for first-party browser UI flows.',
+      },
+    ],
+    studioWorkflowTitle: 'How these public surfaces fit together',
+    studioWorkflow: [
+      'Studio is public and can be used to write or preview slide-oriented HTML manually.',
+      'Hosted web export calls /api/web-export/jobs from the browser and is guarded as a same-origin web surface.',
+      'REST API remains the canonical automation contract for backend systems and production pipelines.',
+      'If you need reproducible server-side exports, prefer the authenticated REST API over hosted web export.',
+      'The same core worker and sanitization pipeline sit behind Studio previews, hosted web export, API, Skills, and MCP.',
+      'Template publishing is deliberately narrower: web UI, CLI, local MCP, and REST API cannot create marketplace drafts. Draft creation is HTML-only and must go through remote MCP validation and draft saving. The agent can infer title/tags from the HTML, but the user presses the final dashboard publish button.',
+    ],
+    studioExampleTitle: 'Hosted web export example',
+    studioExampleCode: WEB_EXPORT_EXAMPLE,
+
+    /* --- Section 6b: CLI Tool --- */
+    cliTitle: 'CLI Tool',
+    cliSubtitle: 'What is the CLI',
+    cliDescription:
+      'The html2pptx CLI lets you convert HTML files to PowerPoint directly from your terminal, open local HTML in edit-slide, and browse templates. It supports both interactive mode (guided prompts for first-time users) and direct mode (flags for scripting, CI/CD, and AI agents like Claude Code). Template draft creation is HTML-only via remote MCP and is intentionally rejected by the CLI.',
+    cliInstallTitle: 'Installation',
+    cliInstallSteps: [
+      { label: 'Install globally', command: 'npm install -g html2pptx-cli' },
+      { label: 'Or run directly with npx', command: 'npx html2pptx-cli convert slides.html' },
+    ],
+    cliSetupTitle: 'Initial Setup',
+    cliSetupDescription: 'Before converting files, configure your API key. This is a one-time setup that saves your credentials to ~/.html2pptx/config.json (owner-only permissions).',
+    cliSetupCode: 'html2pptx init',
+    cliCommandsTitle: 'Commands',
+    cliCommands: [
+      { command: 'html2pptx login', description: 'Configure your API key interactively. Shows a link to the dashboard where you can generate a key.' },
+      { command: 'html2pptx logout', description: 'Remove your stored API key from ~/.html2pptx/config.json.' },
+      { command: 'html2pptx convert [file]', description: 'Convert an HTML file to PPTX. Run without arguments for interactive mode, or pass a file path for direct mode.' },
+      { command: 'html2pptx status', description: 'Check your current usage, remaining quota, rate limits, and plan details.' },
+      { command: 'html2pptx whoami', description: 'Verify your API key and show authentication status, plan name, and usage.' },
+      { command: 'html2pptx config', description: 'Display current configuration (API key, base URL).' },
+      { command: 'html2pptx templates list', description: 'Browse all available templates with title, category, and slide count.' },
+      { command: 'html2pptx templates get <id>', description: 'Get template details including download URLs. Use --prompt for the design prompt, --html for source code.' },
+      { command: 'html2pptx templates publish', description: 'Disabled. Template publishing is HTML-only via remote MCP.' },
+      { command: 'html2pptx --help', description: 'Show help and available commands.' },
+      { command: 'html2pptx --version', description: 'Show the installed CLI version.' },
+    ],
+    cliOptionsTitle: 'Convert Options',
+    cliOptions: [
+      { flag: '-o, --output <file>', description: 'Output PPTX filename (default: input filename with .pptx extension)' },
+      { flag: '-s, --size <size>', description: 'Slide size: "16:9", "4:3", or custom "WxH" (e.g. 1920x1080)' },
+      { flag: '--css <file>', description: 'External CSS file to include alongside the HTML' },
+      { flag: '--json', description: 'Output result as JSON for scripting and CI/CD pipelines' },
+      { flag: '--open', description: 'Automatically open the PPTX file after conversion' },
+      { flag: '--base-url <url>', description: 'API base URL (default: https://html2pptx.app)' },
+    ],
+    cliExamplesTitle: 'Examples',
+    cliExamples: [
+      { title: 'Direct mode (for scripts & AI agents)', code: '# One-liner conversion\nhtml2pptx convert ./slides.html -o presentation.pptx -s 16:9\n\n# With external CSS\nhtml2pptx convert ./slides.html --css ./styles.css -o deck.pptx\n\n# JSON output for scripting\nhtml2pptx convert ./slides.html --json\n# {"success":true,"file":"slides.pptx","size":"1.2 MB","duration":"3.2s"}' },
+      { title: 'Interactive mode (for first-time users)', code: '# Just run convert without arguments\nhtml2pptx convert\n\n# The CLI will guide you through:\n#   > HTML file to convert\n#   > Slide size selection\n#   > Output filename' },
+      { title: 'Account management', code: '# Check authentication\nhtml2pptx whoami\n#   Plan: Starter\n#   Usage: 1 / 120 exports today\n#   Remaining: 119\n\n# Check detailed usage\nhtml2pptx status\n#   Plan: Starter\n#   Daily Usage: 42 / 120 exports  ████████████░░░░░░░░\n#   Remaining: 78\n#   Rate Limit: 5 req/min\n#   Max Slides: 50 per job\n\n# Remove credentials\nhtml2pptx logout' },
+      { title: 'Templates', code: '# List all templates\nhtml2pptx templates list\n\n# Get template with design prompt\nhtml2pptx templates get atlantis-pizza-corp --prompt\n\n# Get template with HTML source (JSON output)\nhtml2pptx templates get atlantis-pizza-corp --prompt --html --json\n\n# Draft creation is remote-MCP-only:\n# AI security preflight -> html2pptx_validate_template_html -> html2pptx_publish_template -> dashboard review' },
+    ],
+
+    /* --- Section 7: Use Cases --- */
+    useCasesTitle: 'Use Cases & Examples',
+    useCasesIntro: 'html2pptx.app is designed for automated, repeatable slide generation. Here are the most common integration patterns:',
+    useCases: [
+      {
+        title: 'Automated Quarterly Reports',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>',
+        body: 'Generate quarterly performance decks from live data. Pull metrics from your database, format them as slide HTML with charts and KPI cards, and export via the API. Schedule with cron or trigger from your BI pipeline for fully hands-off reporting.',
+        code: REPORT_EXAMPLE,
+      },
+      {
+        title: 'Sales Proposal Templates',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>',
+        body: 'Define brand-compliant slide templates in HTML/CSS once, then populate them with dynamic content for each campaign or client pitch. Variables like company name, project details, and pricing are injected at generation time. Marketing teams maintain the templates; sales reps get pixel-perfect branded decks instantly.',
+        code: PROPOSAL_TEMPLATE_EXAMPLE,
+      },
+      {
+        title: 'Agent-Powered Presentations',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><line x1="8" y1="16" x2="8" y2="16.01"/><line x1="16" y1="16" x2="16" y2="16.01"/></svg>',
+        body: 'Let AI agents create presentation decks from meeting notes, research summaries, or project briefs. Using Skills or MCP integration, the agent understands the html2pptx.app HTML contract, generates compliant slides, and delivers a download link. Users simply describe what they want in natural language.',
+        code: null,
+      },
+      {
+        title: 'SaaS Export Embedding',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
+        body: 'Add "Export to PowerPoint" functionality to your SaaS product. Render your app\'s dashboards, analytics views, or reports as slide HTML and call the html2pptx.app API from your backend. Users get native PPTX files with editable text and shapes -- not flat screenshots.',
+        code: SAAS_EMBED_EXAMPLE,
+      },
+    ],
+
+    /* --- Section 8: Plans & Pricing --- */
+    plansTitle: 'Plans & Pricing',
+    plansDescription: 'Choose the plan that fits your usage. The current public catalog is defined in code and enforced in the API gateway: requests per minute, daily guardrails, maximum slides per job, concurrent jobs, API key count, and payload size all vary by plan.',
+    plansTable: [
+      { plan: 'Free Preview', exports: '100 per day / 3 rpm', slides: '50 per job', support: 'Community', price: '¥0' },
+      { plan: 'Founder Beta', exports: '300 per day / 5 rpm', slides: '100 per job', support: 'Self-serve', price: '¥980/mo' },
+      { plan: 'Starter', exports: '1,000 per day / 15 rpm', slides: '200 per job', support: 'Email', price: '¥2,980/mo' },
+      { plan: 'Business', exports: '5,000 per day / 60 rpm', slides: '300 per job', support: 'Priority', price: '¥9,800/mo' },
+      { plan: 'Enterprise / OEM', exports: 'Custom', slides: '500+ per job', support: 'Dedicated', price: '¥49,800/mo〜' },
+    ],
+    plansUpgradeNote: 'Upgrade anytime from the Dashboard. Changes take effect immediately with prorated billing. Downgrade at the end of the current billing period.',
+
+    plansRateLimitsTitle: 'Rate Limits & Quotas by Plan',
+    plansRateLimitsDescription: 'Each plan enforces the following limits. All channels (REST API, Skills, MCP) share the same quotas.',
+    plansRateLimits: [
+      {
+        plan: 'Free Preview',
+        rpm: '3 req/min',
+        daily: '100/day',
+        monthly: 'Unlimited*',
+        slidesPerJob: '50 slides',
+        concurrent: '1 job',
+        apiKeys: '1 key',
+        payload: '1 MB',
+        fairUse: 'Review at 1,000/mo, prompt at 2,000/mo',
+      },
+      {
+        plan: 'Founder Beta',
+        rpm: '5 req/min',
+        daily: '300/day',
+        monthly: 'Unlimited*',
+        slidesPerJob: '100 slides',
+        concurrent: '2 jobs',
+        apiKeys: '3 keys',
+        payload: '2 MB',
+        fairUse: 'Review at 3,000/mo, prompt at 5,000/mo',
+      },
+      {
+        plan: 'Starter',
+        rpm: '15 req/min',
+        daily: '1,000/day',
+        monthly: 'Unlimited*',
+        slidesPerJob: '200 slides',
+        concurrent: '5 jobs',
+        apiKeys: '10 keys',
+        payload: '5 MB',
+        fairUse: 'Review at 10,000/mo, prompt at 20,000/mo',
+      },
+      {
+        plan: 'Business',
+        rpm: '60 req/min',
+        daily: '5,000/day',
+        monthly: 'Unlimited*',
+        slidesPerJob: '300 slides',
+        concurrent: '20 jobs',
+        apiKeys: '50 keys',
+        payload: '10 MB',
+        fairUse: 'Review at 50,000/mo, prompt at 100,000/mo',
+      },
+      {
+        plan: 'Enterprise / OEM',
+        rpm: '120 req/min',
+        daily: 'Custom',
+        monthly: 'Custom',
+        slidesPerJob: '500 slides',
+        concurrent: '50 jobs',
+        apiKeys: '100 keys',
+        payload: '25 MB',
+        fairUse: 'Custom terms',
+      },
+    ],
+    plansRateLimitsNote: '* Unlimited = within fair-use policy. MCP protocol requests are rate-limited at 3x the plan RPM to account for protocol overhead (initialize, tools/list, etc.).',
+
+    /* --- Section 9: Security --- */
+    securityTitle: 'Security & Limits',
+    securityLead: 'Public API, Skills, MCP, Studio, and hosted web export are all routed through the same security-sensitive conversion pipeline. The practical controls below are the ones that matter when you integrate or expose the product.',
+    securityLayers: [
+      {
+        title: 'Authentication and authorization',
+        body: 'REST API uses API keys. Remote MCP supports commercial API keys or WorkOS-backed authenticated sessions. Job lookup is bound to the same API key or authenticated principal that created the job.',
+      },
+      {
+        title: 'SVG and untrusted markup',
+        body: 'Public API and MCP sanitize incoming HTML. Inline SVG is converted to PNG images for reliable output.',
+      },
+      {
+        title: 'Worker isolation',
+        body: 'Export jobs run in isolated contexts with enforced request body limits and automatic cleanup of expired jobs.',
+      },
+      {
+        title: 'Usage controls',
+        body: 'Per-minute rate limiting, daily guardrails, monthly fair-use review thresholds, maximum slides per job, maximum payload size, and concurrent job limits are all enforced server-side based on the active plan.',
+      },
+    ],
+    securityChecklistTitle: 'Recommended production practices',
+    securityChecklist: [
+      'Treat API keys as secrets and rotate them from the dashboard when they are exposed.',
+      'Use the REST API for backend automation and same-origin hosted web export only for first-party browser flows.',
+      'Poll the public job status route with backoff instead of hammering the status endpoint.',
+      'Keep slide markup deterministic: explicit slide dimensions, predictable CSS, and no runtime-dependent content. 1600x900 remains the default example.',
+      'With responseFormat: "base64", fileBase64 can be large; decode it in streaming or binary-safe code paths on your side.',
+      'For agent integrations, decide whether the client should use local stdio MCP or remote /mcp before rollout.',
+    ],
+
+    /* --- Section 10: FAQ --- */
+    faqTitle: 'FAQ',
+    faqItems: [
+      {
+        question: 'How is html2pptx.app different from other HTML-to-PPTX solutions?',
+        answer: 'Most alternatives take a screenshot of your HTML and embed it as a flat image in each slide. html2pptx.app produces fully editable PowerPoint output -- CSS properties like flexbox, gradients, border-radius, and shadows are faithfully reproduced. The result is editable text, high-quality shapes, and smaller file sizes.',
+      },
+      {
+        question: 'Can I convert any HTML to PPTX?',
+        answer: 'Not reliably. html2pptx.app is optimized for slide-oriented HTML with .slide class elements and explicit dimensions. 1600x900 is the default example, but portrait and other custom sizes are also supported. Arbitrary web pages, interactive apps, scroll-based layouts, and pages with JavaScript-dependent rendering are not supported. The HTML contract section describes the exact requirements.',
+      },
+      {
+        question: 'What becomes a separate slide?',
+        answer: 'Each element with the .slide class becomes one slide in the output PPTX. If your HTML contains 5 elements with class="slide", the output will have 5 slides. Define clear slide boundaries for predictable results.',
+      },
+      {
+        question: 'Will exported content remain editable in PowerPoint?',
+        answer: 'Yes, in most cases. Text stays fully editable and shapes remain adjustable in PowerPoint. Inline SVG is converted to high-quality PNG images for reliable output.',
+      },
+      {
+        question: 'How long does export take?',
+        answer: 'Most single-slide jobs complete in 3-5 seconds. Multi-slide decks (10-50 slides) typically take 8-20 seconds depending on complexity, image count, and font embedding. The worker processes slides in parallel where possible. Poll the job status endpoint every 2 seconds for optimal responsiveness.',
+      },
+      {
+        question: 'Which fonts are supported?',
+        answer: 'System fonts (Arial, Helvetica, Times New Roman, etc.) work by default. For web fonts, enable autoEmbedFonts: true -- html2pptx.app will download the font files from Google Fonts or your custom @font-face URLs and embed them into the PPTX. Japanese fonts like Noto Sans JP, Yu Gothic, Meiryo, and Hiragino are fully supported.',
+      },
+      {
+        question: 'Is there a free plan?',
+        answer: 'Yes. The current public catalog includes an Early Access tier with limited API, Skills, and MCP usage. Check GET /api/export/plans for the current plan metadata because limits are enforced from code and may evolve during early rollout.',
+      },
+      {
+        question: 'Can I use SVGs in my slides?',
+        answer: 'Yes. Inline SVG is supported and is converted to high-quality PNG images for reliable output across all PowerPoint environments.',
+      },
+      {
+        question: 'What is the maximum file size?',
+        answer: 'The HTML payload should stay under 5MB. Generated PPTX files vary by content but typically range from 100KB to 10MB. Jobs with many high-resolution images embedded as base64 will produce larger files. Consider using URL references for large images.',
+      },
+      {
+        question: 'How secure is the service?',
+        answer: 'html2pptx.app implements multiple security layers: jobs are bound to the creating principal; API keys are hashed at rest; request body limits and concurrent job limits are enforced server-side. Use the REST API for server-side automation and treat hosted web export as a browser surface.',
+      },
+      {
+        question: 'Does html2pptx.app support Japanese text and CJK characters?',
+        answer: 'Yes, fully. Japanese, Chinese, and Korean characters render correctly. For best results, specify a CJK font in your CSS (e.g., font-family: "Noto Sans JP", sans-serif) and enable autoEmbedFonts to ensure portable rendering on machines without the font installed.',
+      },
+      {
+        question: 'How do I handle errors?',
+        answer: 'Check the job status endpoint. If status is "failed", the error field contains a human-readable description. All API errors return a structured JSON body following RFC 9457 Problem Details format with type, status, title, detail, and instance fields, plus legacy error and message fields for backwards compatibility. Common issues: missing .slide elements (400), expired API key (401), rate limit exceeded (429), oversized content (413).',
+      },
+      {
+        question: 'Can I use CSS Grid for complex slide layouts?',
+        answer: 'Yes. CSS Grid is fully supported including grid-template-columns, grid-template-rows, gap, and grid placement properties. This makes it easy to create multi-column layouts, dashboard-style cards, and complex visual arrangements that convert cleanly to PPTX.',
+      },
+      {
+        question: 'Is there a webhook for job completion?',
+        answer: 'Yes. Add a callbackUrl field (HTTPS only) to your POST /api/export/jobs request. The worker will POST the full job result to your callback URL when the job completes or fails, with an x-signature-sha256 HMAC header for verification. Alternatively, you can still use polling on GET /api/export/jobs/{jobId} with a 2-second interval. For MCP users, html2pptx_wait_for_export_job handles polling automatically.',
+      },
+    ],
+    faqTroubleshootTitle: 'Troubleshooting',
+    faqTroubleshootItems: [
+      { issue: 'Job stuck in "queued" status', solution: 'The private worker may be offline or overloaded. Wait 30 seconds and retry. If persistent, check worker health from the Dashboard or contact support.' },
+      { issue: 'Slides appear blank', solution: 'Ensure your HTML contains elements with class="slide" and that those elements have visible content. Also verify that CSS is included in the payload and not relying on external stylesheets.' },
+      { issue: 'Fonts look different in PPTX', solution: 'Enable autoEmbedFonts: true to embed web fonts. If using custom fonts, ensure the @font-face URLs are publicly accessible. Fallback to system-safe fonts like Arial or Noto Sans for maximum compatibility.' },
+      { issue: '429 Rate limit error', solution: 'Check the X-RateLimit-Reset header for when your window resets. Implement exponential backoff in your polling logic. Upgrade your plan for higher request limits.' },
+      { issue: 'Layout differs from browser preview', solution: 'Use explicit dimensions on .slide elements with inline styles. 1600x900 is the default example, but custom aspect ratios also work when your slide HTML and requested width/height/layout match. Avoid responsive/percentage-based layouts, media queries, and viewport-relative units (vh, vw).' },
+      { issue: 'Images not appearing in PPTX', solution: 'Use absolute URLs (https://...) or base64 data URIs for images. Relative paths and localhost URLs will fail. Ensure image URLs are publicly accessible from the worker.' },
+      { issue: 'PPTX file size is too large', solution: 'Large files are usually caused by embedded base64 images or image-heavy content. Use URL references instead, or compress images before embedding.' },
+    ],
+  },
+
+  /* ------------------------------------------------------------------ */
+  /*  Docs copy -- Japanese                                              */
+  /* ------------------------------------------------------------------ */
+  ja: {
+    lang: 'ja',
+    languageLabel: '日本語',
+    metaTitle: 'ドキュメント | html2pptx.app',
+    metaDescription:
+      'html2pptx.app の包括的なドキュメント。HTML/CSSを完全に編集可能なPowerPointファイルに変換する唯一のAPI。REST API、Skills統合、MCPプロトコル、クイックスタートガイド、HTML変換契約を網羅しています。',
+
+    navSections: [
+      { id: 'overview', label: 'サービス概要', children: [
+        { id: 'overview-channels', label: 'チャネル' },
+        { id: 'overview-comparison', label: '比較' },
+        { id: 'overview-css', label: 'CSS対応' },
+      ]},
+      { id: 'quickstart', label: 'クイックスタート' },
+      { id: 'api-reference', label: 'APIリファレンス', children: [
+        { id: 'api-html-elements', label: '対応HTML要素' },
+        { id: 'api-html-forbidden', label: '使用禁止要素' },
+      ]},
+	      { id: 'skills', label: 'Skills統合', children: [
+	        { id: 'skills-setup', label: 'セットアップ' },
+	        { id: 'skills-local-editor', label: 'ローカル編集' },
+	        { id: 'skills-capabilities', label: '機能一覧' },
+	      ]},
+      { id: 'mcp', label: 'MCP統合', children: [
+        { id: 'mcp-setup', label: 'セットアップ' },
+        { id: 'mcp-auth', label: '認証方法' },
+        { id: 'mcp-tools', label: 'ツール一覧' },
+        { id: 'mcp-example', label: '使用例' },
+      ]},
+      { id: 'cli', label: 'CLIツール', children: [
+        { id: 'cli-install', label: 'インストール' },
+        { id: 'cli-commands', label: 'コマンド' },
+        { id: 'cli-examples', label: '使用例' },
+      ]},
+      { id: 'use-cases', label: '活用事例' },
+      { id: 'plans', label: 'プラン・料金', children: [
+        { id: 'plans-rate-limits', label: 'レート制限' },
+      ]},
+      { id: 'security', label: 'セキュリティ・制限', children: [
+        { id: 'security-checklist', label: 'チェックリスト' },
+      ]},
+      { id: 'faq', label: 'FAQ', children: [
+        { id: 'faq-troubleshoot', label: 'トラブルシュート' },
+      ]},
+    ],
+
+    /* --- Section 1: サービス概要 --- */
+    overviewTitle: 'サービス概要',
+    overviewSubtitle: 'html2pptx.app とは',
+    overviewDescription:
+      'html2pptx.app はHTML/CSSを完全に編集可能なPowerPointファイルに変換します -- スクリーンショットではありません。テキストは編集可能なまま、レイアウトは保持され、Flexbox、Grid、グラデーション、シャドウなどのCSSプロパティが忠実に再現されます。結果は本番利用可能なプレゼンテーションファイルです。',
+    overviewHighlight: 'html2pptx.app は、HTML/CSSから完全に編集可能なPowerPointを生成する唯一のAPIです。',
+    overviewArchTitle: 'アーキテクチャ',
+    overviewArchDescription: 'html2pptx.app は信頼性とスケーラビリティのために関心事を分離した4段階パイプラインを採用しています:',
+    overviewArchSteps: [
+      { label: 'Client', detail: 'アプリケーション、エージェント、またはスクリプトがREST API経由でHTML/CSSを送信。HTTPリクエストが可能な言語やプラットフォームであればすべて対応。' },
+      { label: 'API Gateway', detail: '認証 (Bearer / X-API-Key)、プランごとのレート制限、リクエストバリデーション、耐久性のあるメッセージキューへのジョブキューイングを処理。' },
+      { label: 'Private Worker', detail: 'HTML/CSSを完全に編集可能なPowerPointファイルに変換。テキストは編集可能なまま、レイアウトは保持され、CSSスタイリングが忠実に再現されます。' },
+      { label: 'PPTX Output', detail: '生成されたPowerPointファイルはクラウドストレージにアップロードされ、時間制限付き署名URLが返されます。ファイルは24時間保持。' },
+    ],
+    overviewComparisonTitle: 'html2pptx.app と他社の比較',
+    overviewComparison: [
+      { feature: '変換方式', html2pptx: '完全に編集可能なPowerPoint出力', others: 'スクリーンショット/ラスター画像' },
+      { feature: 'テキスト編集', html2pptx: '完全に編集可能なテキストボックス', others: 'フラット画像 -- テキスト編集不可' },
+      { feature: 'CSS対応', html2pptx: 'Flexbox、Grid、グラデーション、シャドウ、transform', others: '限定的または非対応' },
+      { feature: 'SVG処理', html2pptx: '高品質なPNG画像に変換', others: 'PNG画像に変換' },
+      { feature: 'ファイルサイズ', html2pptx: '通常はコンパクト（埋め込み画像量に依存）', others: '大きい（埋め込み画像）' },
+      { feature: 'フォント埋め込み', html2pptx: 'Webフォント自動埋め込み', others: '非対応' },
+    ],
+    overviewChannelsTitle: '3つの統合チャネル',
+    overviewChannels: [
+      {
+        title: 'REST API',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>',
+        body: 'HTML-to-PPTX エクスポートジョブの作成とステータスポーリングのための標準HTTPエンドポイント。バックエンド統合、社内ツール、SaaS組み込みに最適。curl、JavaScript、Python、Go、Rubyなど、あらゆる言語で利用可能。テンプレート公開は REST API の役割ではありません。',
+      },
+      {
+        title: 'Skills',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/claude/default.svg',
+        body: 'Claude Code や Codex などのエージェントツール向けに html2pptx スキルを登録。エージェントがHTMLの診断、書き換え、エクスポート、ローカル編集、HTMLテンプレートdraft公開まで内蔵のremote MCPワークフローで実行。AIワークフローでエージェントがパイプライン全体を管理する場合に最適。',
+      },
+      {
+        title: 'MCP (Model Context Protocol)',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="2"/><path d="M16.24 7.76a6 6 0 010 8.49m-8.48-.01a6 6 0 010-8.49m11.31-2.82a10 10 0 010 14.14m-14.14 0a10 10 0 010-14.14"/></svg>',
+        body: 'MCPプロトコル経由でAIエージェントにバックエンドを公開。remote HTTP MCP (`/mcp`) はエクスポート、docs、catalog、テンプレート公開に使い、local stdio MCP はローカルHTMLを edit-slide で開く場合だけ使います。HTMLテンプレートdraftは、検証後にremote MCP経由で作成します。',
+      },
+    ],
+    overviewCssTitle: '対応CSSプロパティ',
+    overviewCssFeatures: [
+      { category: 'レイアウト', features: 'display: flex, display: grid, position: absolute/relative, gap, align-items, justify-content' },
+      { category: 'ボックスモデル', features: 'padding, margin, width, height, box-sizing, overflow: hidden' },
+      { category: '背景', features: 'background-color, linear-gradient(), radial-gradient(), background-image (URL/base64)' },
+      { category: 'ボーダー', features: 'border, border-radius (各角個別指定対応), border-color, border-width' },
+      { category: 'シャドウ', features: 'box-shadow (単一・複数対応), text-shadow' },
+      { category: 'タイポグラフィ', features: 'font-family, font-size, font-weight, color, text-align, line-height, letter-spacing' },
+      { category: 'トランスフォーム', features: 'transform: rotate(), scale(), translate(), skew()' },
+      { category: 'ビジュアル', features: 'opacity, visibility, z-index, object-fit' },
+    ],
+    overviewUseCasesTitle: 'ユースケース',
+    overviewUseCases: [
+      'ライブデータからの自動レポート生成',
+      'テキストプロンプトからのエージェント連携プレゼン作成',
+      '定期スライドデッキの社内ツール統合',
+      'SaaSダッシュボードからPPTXへのエクスポート機能',
+      'ブランド準拠テンプレートへの動的コンテンツ投入',
+      'AIエージェントによる会議メモからプレゼン変換',
+    ],
+    overviewFeaturesTitle: '対応機能',
+    overviewFeatures: [
+      'SVGは高品質な画像に変換され、安定した出力を実現',
+      'Webフォント自動埋め込み（Google Fonts、カスタムフォント）',
+      'Flexbox / CSS Grid レイアウトのPowerPointへの忠実な再現',
+      'グラデーション・シャドウ・border-radiusのPowerPointでの忠実な再現',
+      'Base64 / URL画像の自動最適化ハンドリング',
+      '明示サイズのスライドキャンバスに対応。1600x900px (13.333in x 7.5in) はデフォルト例で、width / height / layout によるカスタムサイズも利用可能',
+      'マルチスライド対応（各 .slide 要素が1枚のPPTXスライドに）',
+      '日本語フォント対応（Noto Sans JP、游ゴシック、メイリオ）',
+      'Studio と Hosted Web Export をブラウザからそのまま利用可能',
+    ],
+
+    /* --- Section 2: クイックスタート --- */
+    quickstartTitle: 'クイックスタート',
+    quickstartSubtitle: '4ステップで最初の認証付きエクスポート',
+    quickstartIntro: 'REST API は非同期です。まずジョブを作成し、状態をポーリングし、completed になったら downloadUrl から .pptx をダウンロードします。',
+    quickstartSteps: [
+      {
+        step: '1',
+        title: 'サインアップ',
+        body: '<a href="https://html2pptx.app" target="_blank" rel="noopener noreferrer" class="text-blue-600 underline hover:text-blue-800">html2pptx.app</a> でアカウントを作成します。Free Preview で出力品質を確認し、API利用が必要になったら Founder Beta へ進みます。',
+      },
+      {
+        step: '2',
+        title: 'APIキーの取得',
+        body: 'ダッシュボードに移動し、「APIキーを作成」をクリック。コピーして安全に保管してください。キーは一度だけ表示されます。sk_live_ で始まるキーはシークレットとして扱ってください。',
+      },
+      {
+        step: '3',
+        title: '最初のリクエストを送信',
+        body: 'HTMLスライドコンテンツを /api/export/jobs にPOSTします。Authorizationヘッダーにアプリキーを含めてください。APIはエクスポートを追跡するためのjobIdを返します。',
+      },
+      {
+        step: '4',
+        title: 'PPTXをダウンロード',
+        body: 'GET /api/export/jobs/{jobId} をポーリングし、statusが "completed" になるまで待ちます（通常5-15秒）。レスポンスに含まれる downloadUrl から .pptx ファイルをダウンロードします。responseFormat: "base64" を指定すれば fileBase64 でも取得可能です。',
+      },
+    ],
+    quickstartCurlTitle: 'curl',
+    quickstartCurlCode: CURL_EXAMPLE,
+    quickstartJsTitle: 'JavaScript (fetch)',
+    quickstartJsCode: JS_EXAMPLE,
+    quickstartPythonTitle: 'Python (requests)',
+    quickstartPythonCode: PYTHON_EXAMPLE,
+    quickstartCodeTabs: [
+      { label: 'curl', code: CURL_EXAMPLE },
+      { label: 'JavaScript', icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/javascript/default.svg', code: JS_EXAMPLE },
+      { label: 'Python', icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/python/default.svg', code: PYTHON_EXAMPLE },
+    ],
+
+    /* --- Section 3: APIリファレンス --- */
+    apiTitle: 'APIリファレンス',
+    apiBaseUrl: 'ベースURL: https://html2pptx.app',
+    apiContentType: 'すべてのリクエスト・レスポンスボディは application/json を使用します。作成エンドポイントは html/css/fileName に加えて optional な width / height / layout もトップレベルで受け取り、payload ラッパーは使いません。',
+
+    apiAuthTitle: '認証',
+    apiAuthDescription:
+      'すべての商用APIエンドポイントは認証が必要です。以下のいずれかのヘッダーにAPIキーを含めてください。キーは環境ごと（テスト/本番）にスコープされ、ダッシュボードからローテーション可能です。',
+    apiAuthMethods: [
+      { header: 'Authorization', value: 'Bearer sk_live_xxxx', note: '推奨 -- ほとんどのHTTPクライアント・ライブラリで使用される標準的なBearerトークン形式' },
+      { header: 'X-API-Key', value: 'sk_live_xxxx', note: '代替 -- Authorizationが予約されている環境（APIゲートウェイ、プロキシなど）向け' },
+    ],
+    apiRateLimitTitle: 'レート制限',
+    apiRateLimitDescription: 'すべてのREST APIレスポンスには、現在の1分ウィンドウ、日次上限、月次の公平利用状態を示すヘッダーが含まれます。REST は API キー単位、remote MCP は認証済み principal 単位で制限されます。',
+    apiRateLimitHeaders: [
+      { header: 'x-request-id', description: 'すべてのAPIレスポンスに含まれるリクエスト識別子。デバッグやサポートへの問い合わせ時に有用。' },
+      { header: 'X-Plan-Id', description: 'このリクエストに適用されたプランID。' },
+      { header: 'X-RateLimit-Limit', description: '現在の1分ウィンドウで許可される最大リクエスト数。' },
+      { header: 'X-RateLimit-Remaining', description: '現在のウィンドウの残りリクエスト数。' },
+      { header: 'Retry-After', description: '429 を受けたあとに再試行するまで待つ秒数。' },
+      { header: 'X-Daily-Limit', description: '日次ジョブ上限を持つプランで返される。' },
+      { header: 'X-Daily-Remaining', description: '現在のUTC日次ウィンドウで残っているジョブ数。' },
+      { header: 'X-Monthly-Used', description: '現在のUTC月次ウィンドウで受け付けたジョブ数。' },
+      { header: 'X-Fair-Use-State', description: 'normal / review / upgrade_recommended のような月次公平利用状態。' },
+    ],
+    apiOperationalTitle: '運用上のポイント',
+    apiOperationalItems: [
+      'POST /api/export/jobs は同期完了ではなく、queued 状態のジョブ記述子を即時返します。',
+      'ジョブ確認は GET /api/export/jobs/{jobId} を使用してください。上流ワーカー由来の内部URLには依存しないでください。',
+      'REST の completed レスポンスには downloadUrl が含まれます。responseFormat: "base64" を指定した場合は fileBase64 も含まれます。',
+      'ジョブ参照は、作成した API キーまたは remote MCP principal に結び付けられています。別キーでは同じ jobId を読めません。',
+      'スライド数制限は、サニタイズ後の .slide 数からサーバー側で再計算され、クライアント申告値は使われません。',
+    ],
+
+    apiEndpoints: [
+      {
+        method: 'POST',
+        path: '/api/export/jobs',
+        title: 'エクスポートジョブの作成',
+        description: 'トップレベルの HTML/CSS フィールドと optional なプレゼンサイズ指定から新しいPPTXエクスポートジョブを作成します。レスポンスは queued 状態のジョブ記述子で、最終結果は GET /api/export/jobs/{jobId} で取得します。',
+        requestTitle: 'リクエストボディ',
+        requestFields: [
+          { field: 'fileName', type: 'string', required: false, default: 'export.pptx', description: '生成されるPPTXの出力ファイル名。.pptx拡張子で終わる必要あり。' },
+          { field: 'html', type: 'string', required: true, default: '--', description: '.slideクラスを持つ要素を1つ以上含むHTMLコンテンツ。各 .slide が1枚のPPTXスライドに変換されます。' },
+          { field: 'css', type: 'string', required: false, default: '""', description: '送信したHTMLにグローバル適用されるCSS。' },
+          { field: 'autoEmbedFonts', type: 'boolean', required: false, default: 'false', description: 'フォントを検出してPPTXへ埋め込むかどうか。' },
+          { field: 'width', type: 'number', required: false, default: '--', description: 'PPTXスライド幅（インチ）。カスタムサイズ指定時は height とセットで使用。' },
+          { field: 'height', type: 'number', required: false, default: '--', description: 'PPTXスライド高さ（インチ）。カスタムサイズ指定時は width とセットで使用。' },
+          { field: 'layout', type: 'string', required: false, default: '--', description: 'PPTXレイアウトのプリセットまたはカスタム名。代表例: LAYOUT_16x9, LAYOUT_16x10, LAYOUT_4x3, LAYOUT_WIDE。' },
+          { field: 'metadata', type: 'object', required: false, default: '{}', description: 'ワーカーへ透過的に渡される任意メタデータ。追跡用途に便利です。' },
+          { field: 'responseFormat', type: 'string', required: false, default: '"url"', description: '完成したPPTXの配信方法を制御。"url"（デフォルト）は署名付きダウンロードURL、"base64"はインラインbase64、"both"は両方を返します。非推奨の includeFileBase64 パラメータを置き換えます。' },
+          { field: 'callbackUrl', type: 'string', required: false, default: '--', description: 'ジョブ完了/失敗時にWebhook POSTを受け取るHTTPS URL。ワーカーがジョブ結果をこのURLにPOSTし、x-signature-sha256 HMACヘッダーで検証可能。https:// URLのみ受け付け。' },
+        ],
+        requestHeaders: [
+          { header: 'Idempotency-Key', description: '任意。リトライ時の重複ジョブ作成を防ぐ一意の文字列。サーバーは24時間レスポンスをキャッシュし、同じキーで再送すると新しいジョブを作成せず元のレスポンスを返します。' },
+        ],
+        responseTitle: 'レスポンス (200 OK)',
+        responseCode: JOB_RESPONSE_EXAMPLE,
+        errors: [
+          { code: '400', description: '無効なリクエストボディ -- 必須フィールドの欠落または JSON 形式不正。' },
+          { code: '401', description: 'APIキーが未設定または無効。AuthorizationまたはX-API-Keyヘッダーに有効なsk_live_キーが設定されているか確認。' },
+          { code: '403', description: 'APIキーにこの操作の権限がない。プラン制限またはキースコープを確認。' },
+          { code: '413', description: 'リクエストエンティティが大きすぎる。プラン上限またはワーカーのハード上限を超過しています。' },
+          { code: '422', description: 'サニタイズ後のHTMLがプランの最大スライド数を超えています。' },
+          { code: '429', description: 'レート制限、日次上限、月次公平利用ポリシー、または concurrentJobs の上限を超えています。Retry-After や usage ヘッダーを確認してください。' },
+          { code: '502', description: 'バッドゲートウェイ -- ワーカーバックエンドが一時的に利用不可。短い遅延後にリトライ。' },
+          { code: '503', description: 'サービス利用不可 -- システムがメンテナンス中または高負荷状態。指数バックオフでリトライ。' },
+        ],
+      },
+      {
+        method: 'GET',
+        path: '/api/export/jobs/{jobId}',
+        title: 'ジョブステータスの確認',
+        description: 'エクスポートジョブの現在のステータスを取得します。status が "completed" または "failed" になるまでポーリングしてください。REST API では completed 時に fileBase64 が返ります。',
+        requestTitle: 'パスパラメータ',
+        requestFields: [
+          { field: 'jobId', type: 'string', required: true, default: '--', description: 'POST /api/export/jobs から返されたジョブID。' },
+        ],
+        responseTitle: 'レスポンス (200 OK)',
+        responseCode: JOB_STATUS_EXAMPLE,
+        statusValues: [
+          { status: 'queued', description: 'ジョブが処理キューで待機中。' },
+          { status: 'processing', description: 'ワーカーがHTMLのレンダリングとPPTXシェイプへの変換を実行中。' },
+          { status: 'completed', description: '変換が正常に完了。fileBase64 と mimeType が利用可能。' },
+          { status: 'failed', description: '変換失敗。message フィールドに人間が読める説明が入ります。' },
+        ],
+        errors: [
+          { code: '401', description: 'APIキーが未設定または無効' },
+          { code: '404', description: 'ジョブが見つからない -- jobIdが無効か、別のAPIキーに属するジョブ' },
+          { code: '429', description: 'ステータスポーリングのレート制限超過。' },
+        ],
+      },
+      {
+        method: 'GET',
+        path: '/api/export/plans',
+        title: 'プラン一覧の取得',
+        description: 'recommendedPlanId を含む公開プランカタログを返します。認証不要です。',
+        requestTitle: 'パラメータ',
+        requestFields: [],
+        responseTitle: 'レスポンス (200 OK)',
+        responseCode: PLANS_RESPONSE_EXAMPLE,
+        errors: [],
+      },
+      {
+        method: 'GET',
+        path: '/api/openapi.json',
+        title: 'OpenAPI仕様',
+        description: 'html2pptx.app APIのOpenAPI 3.x仕様を返します。クライアントSDKの生成、Postmanへのインポート、APIスキーマの参照に便利です。',
+        requestTitle: 'パラメータ',
+        requestFields: [],
+        responseTitle: 'レスポンス (200 OK)',
+        responseCode: '// OpenAPI 3.x JSONドキュメント全体を返します',
+        errors: [],
+      },
+    ],
+
+    apiVersioningTitle: 'APIバージョニング',
+    apiVersioningDescription: 'バージョン付きエンドポイントが /api/v1/ プレフィックスで利用可能です。元のバージョンなしエンドポイントも後方互換性のため引き続きサポートされます。',
+    apiVersioningEndpoints: [
+      { path: '/api/v1/export/jobs', description: 'エクスポートジョブの作成（POST）またはジョブ一覧' },
+      { path: '/api/v1/export/jobs/{jobId}', description: 'IDでジョブステータスを取得' },
+      { path: '/api/v1/export/plans', description: '利用可能なプラン一覧' },
+      { path: '/api/v1/export/usage', description: '現在の使用状況とクォータを取得' },
+      { path: '/api/v1/export/keys', description: 'APIキーの管理' },
+    ],
+
+    apiIdempotencyTitle: 'べき等性（Idempotency）',
+    apiIdempotencyDescription: 'POST /api/export/jobs に Idempotency-Key ヘッダーを送信すると、リトライ時の重複ジョブ作成を防止できます。サーバーは24時間レスポンスをキャッシュします。同じキーが再度送信された場合、新しいジョブを作成せずに元のレスポンスを返します。キーにはUUID等の一意の文字列を推奨します。',
+
+    apiWebhookTitle: 'Webhookコールバック',
+    apiWebhookDescription: 'POST /api/export/jobs のリクエストボディに callbackUrl フィールド（HTTPSのみ）を追加できます。ジョブが完了または失敗すると、ワーカーがコールバックURLにジョブ結果全体をJSONボディとしてPOSTします。リクエストには x-signature-sha256 ヘッダー（HMAC-SHA256署名）が含まれ、ペイロードの検証が可能です。多くの統合シナリオでポーリングが不要になります。',
+
+    apiErrorsTitle: 'エラーレスポンス形式',
+    apiErrorsDescription: 'すべてのエラーレスポンスはRFC 9457 Problem Details形式に従い、後方互換性のためのレガシーフィールドも含みます:',
+    apiErrorsCode: ERROR_CODES_EXAMPLE,
+
+    apiContractTitle: 'HTML契約',
+    apiContractDescription: '信頼性の高い変換のために、送信するHTMLは以下のルールに従う必要があります。',
+    apiContractRules: [
+      '各スライドには .slide クラスが必要 -- これがスライド分割の境界マーカー',
+      '各 .slide には明示サイズが必要。1600px x 900px (16:9比率、13.333in x 7.5in) はデフォルト例で、API/MCP では width / height / layout による縦長・カスタム出力も指定可能',
+      '対応CSS: flexbox、grid、linear-gradient、radial-gradient、box-shadow、text-shadow、border-radius、transform (rotate、scale、translate、skew)、opacity',
+      'フォント: システムフォント (Arial、Helvetica、Noto Sans JP) はデフォルトで動作。Google Fontsやカスタム@font-face宣言にはautoEmbedFontsを有効化',
+      '画像: base64データURIと絶対URLの両方に対応。相対パスは失敗する -- 必ず絶対URLを使用',
+      'SVG: インラインSVG要素に対応。高品質なPNG画像に変換されます',
+      '使用不可: scriptタグ、iframe、canvas要素、アンカータグ、form要素、SVG外部参照、CSSアニメーション、@keyframes、ランタイム依存のstate',
+      'ネスト: 深くネストされた要素（10レベル超）は出力品質に影響する可能性あり。HTML構造はできるだけフラットに',
+      'テキスト折り返し: テキストボックスはデフォルトで折り返しなし（nowrap）。長い段落など折り返しが必要な場合は、その要素に white-space: normal を指定してください',
+    ],
+
+    apiHtmlElementsTitle: '対応HTML要素',
+    apiHtmlElementsDescription: '各HTML要素は、最大限の編集性を確保するため、最適なPowerPointオブジェクトに変換されます。',
+    apiHtmlElements: [
+      { element: 'div, section, article', pptx: 'シェイプ（塗りつぶし）', notes: '背景色、グラデーション、ボーダー、角丸が保持されます。' },
+      { element: 'p, h1-h6, span, b, em, strong, i, small', pptx: 'テキストボックス', notes: 'テキストはPowerPointで完全に編集可能。フォントサイズ、太さ、スタイル、色、配置、行間がすべて変換されます。インライン要素（span, b, em等）は同じテキストボックス内のスタイル付きテキストランになります。' },
+      { element: 'img', pptx: '画像', notes: '絶対URLとbase64データURIに対応。CSS object-fit（contain, cover, fill, scale-down）とobject-positionが適用されます。角丸はクリッピングで再現。' },
+      { element: 'table, tr, td, th', pptx: 'ネイティブPPTXテーブル', notes: 'セル単位のテキストスタイル、背景塗りつぶし、ボーダー（solid/dashed/dotted）、パディング、テキスト配置、colspan/rowspanに完全対応。' },
+      { element: 'ul, ol, li', pptx: '箇条書き / 番号リスト', notes: 'シンプルなリストは編集可能な箇条書き・番号リストに変換。複雑なリスト（画像やflex/gridを含む場合）は画像として変換されます。' },
+      { element: 'svg', pptx: '画像（PNG）', notes: 'SVGは高品質なPNG画像に変換されます。' },
+      { element: 'canvas', pptx: '画像（PNG）', notes: 'Canvas内容はPNG画像として埋め込まれます。' },
+      { element: 'アイコン要素（FontAwesome, Material Icons等）', pptx: '画像', notes: 'アイコンフォントは自動検出され、画像に変換されます。' },
+    ],
+    apiHtmlForbiddenTitle: '使用禁止要素',
+    apiHtmlForbiddenDescription: '以下の要素はセキュリティと互換性のため、入力サニタイズ時に自動的に除去されます:',
+    apiHtmlForbidden: [
+      { element: 'script, iframe, object, embed', reason: 'セキュリティ: アクティブコンテンツを除去' },
+      { element: 'link, meta, base', reason: 'セキュリティ: 外部参照を除去' },
+      { element: 'form', reason: 'インタラクティブ要素はPPTX非対応' },
+      { element: 'style', reason: 'インラインスタイルまたはcssパラメータを使用してください' },
+      { element: 'a', reason: 'セキュリティ: アンカータグを除去' },
+      { element: 'foreignobject, image (SVG), feimage, use', reason: 'SVG外部参照を除去' },
+      { element: 'animate, animateMotion, animateTransform, set, discard, mpath', reason: 'SVGアニメーションは非対応' },
+    ],
+
+    /* --- Section 4: Skills統合 --- */
+    skillsTitle: 'Skills統合ガイド',
+    skillsSubtitle: 'Skillsとは',
+    skillsDescription:
+      'Skillsは、AIコーディングエージェントにドメイン固有の知識とワークフローを追加するパッケージ機能です。html2pptx.app のスキルをインストールすると、エージェントがスライド用HTMLの作成方法を理解し、PPTX変換契約に対する検証を行い、必要に応じてローカル Visual Editor を開き、remote MCP のワークフローでエクスポートし、内蔵のremote MCP公開ワークフローでHTMLテンプレートdraftを作成できます。自然言語の指示だけで、本番品質のPowerPointファイルや作成者所有のHTML draftを生成できます。',
+    skillsHowItWorks: 'スキルには4つのコア機能がバンドルされています: (1) HTMLオーサリング知識 -- 高品質なPowerPointに変換されるHTML/CSSの書き方ルール、(2) MCPベースのエクスポート自動化 -- remote MCP に接続してジョブ作成・ステータスポーリング・結果取得を行う仕組み、(3) ローカル Visual Editor -- ユーザーがPPTX出力前にHTMLを目視確認・微調整したい場合に edit-slide を localhost bridge 経由で開く仕組み、(4) テンプレート公開 -- HTML draft を remote MCP の validate/publish ループに限定する仕組みです。local MCP の追加はユーザーのMCP設定を変更するため、エージェントは必ず事前に確認します。',
+    skillsCompatibility: 'Claude Code、Cursor、GitHub Copilot、Windsurf、Cline、Codex 等 18以上のAIエージェントに対応。使うエージェントに対応する skills CLI コマンドを選ぶか、その他の対応エージェントは対話形式で選択します。',
+    skillsWorkflowTitle: 'ワークフロー',
+	    skillsWorkflow: [
+	      'エージェントがユーザーリクエストを受信（例: 「この会議メモからデッキを作成して」）',
+	      'エージェントがスキル定義を読み取り、html2pptx.appのHTML契約を理解',
+	      'エージェントが .slide クラス要素と明示サイズ付きのスライドセーフHTMLを生成。1600x900 はデフォルト例',
+	      'エージェントが変換契約に対してマークアップを検証',
+	      '目視確認が必要な場合は、local stdio MCP で edit-slide を開き、編集後のHTMLをディスクから再読み込み',
+	      'エージェントが remote MCP に接続し html2pptx_create_export_job を呼び出し',
+	      'エージェントが html2pptx_wait_for_export_job で完了をポーリング',
+	      'HTMLテンプレートdraftを作る場合は、html2pptx スキルと remote MCP でHTMLから題名・タグを推定し、AIセキュリティ事前診断、検証、エラー修正、下書き保存を行い、draftUrlを返却',
+	      'エージェントが completed 状態のジョブサマリーをユーザーに返却',
+	    ],
+	    skillsLocalEditorTitle: 'ローカル Visual Editor',
+	    skillsLocalEditorLead:
+	      'edit-slide スキルを使うと、エージェントが作成したローカルHTMLスライドを、http://localhost:<port> のような空き loopback origin で動くPowerPoint風のノーコード編集画面で開けます。ローカルファイル編集に hosted edit-slide は使えません。ローカル dev script が空きポートを選び、現在のプロジェクト内の .html2pptx/edit-slide/editor-server.json に登録します。スライドHTMLファイルはユーザーのPC上に残り、CLI または local stdio MCP が起動する localhost bridge 経由で読み書きされます。local MCP が未設定の場合は、local editor が動いていれば `html2pptx edit <file>` を使い、MCP設定を変更する場合はユーザー確認を取ってから追加します。',
+	    skillsLocalEditorCode: `# local MCP tool だけを使う
+html2pptx_open_local_slide_editor({ "filePath": "html2pptx/slides.html" })
+
+# Claude Code local MCP setup
+npx -y html2pptx-local-mcp@latest html2pptx-install-mcp claude`,
+	    skillsLocalEditorFlowTitle: 'ローカル編集の仕組み',
+	    skillsLocalEditorFlow: [
+	      { label: '1. remote / local MCP を選ぶ', detail: '通常のPPTX出力、docs、template、usage 取得は remote MCP を使えます。ローカル `.html` / `.htm` を edit-slide で開いて編集する場合は local stdio MCP または `html2pptx edit <file>` を使います。local MCP が未設定なら、直接CLIを使うか、追加前にユーザーへ確認します。' },
+	      { label: '2. bridge を起動', detail: '`html2pptx_open_local_slide_editor` が `127.0.0.1` に小さなHTTPサーバーを起動します。ポートは指定しない限りOSが選ぶ空きポートになります。アクセス範囲はコマンドを実行したカレントディレクトリ内に限定されます。' },
+	      { label: '3. エディタを開く', detail: 'コマンドが `http://localhost:<editor-port>/edit-slide?file=...&bridge=http://127.0.0.1:<bridge-port>#bridgeToken=...` を開きます。ワンタイム token は URL fragment に置かれ、起動後にエディタがアドレスバーから消します。' },
+	      { label: '4. ローカルHTMLを読み込む', detail: 'ブラウザの編集画面が token を提示し、localhost bridge から対象の `.html` / `.htm` ファイルを取得します。マーケットプレイス下書きや公開ページは作成されません。' },
+	      { label: '5. ノーコードで編集', detail: 'スライド上の要素をクリックし、右パネルからテキスト、タイポグラフィ、色、サイズ、余白、角丸、ボーダー、不透明度などを調整できます。' },
+	      { label: '6. 同じファイルへ保存', detail: '編集内容はHTMLとして再シリアライズされ、楽観的ロック用のファイルハッシュ付きで同じHTMLファイルへ保存されます。バージョン履歴、バックアップ、監査ログは作成されません。' },
+	      { label: '7. エージェント作業へ戻る', detail: 'ユーザーが画面で編集した後は、エージェントがHTMLファイルを再読み込みします。PowerPoint出力が必要なら、html2pptx skills を使う別のエージェント作業として実行します。' },
+	    ],
+	    skillsLocalEditorPrivacyTitle: 'プライバシーとファイルアクセス',
+	    skillsLocalEditorPrivacy: [
+	      'bridge は `127.0.0.1` のみに bind します。ネットワーク上の他ユーザーはその bridge を開けません。',
+	      'bridge 起動ごとにセッショントークンを生成し、エディタはローカル読み書き時にその token を提示する必要があります。表示URLからは起動後に token を除去します。',
+	      'スライドプレビューは no-referrer を使うため、外部画像やフォントに token 付き editor URL が送られにくくなっています。',
+	      '読み書きできるのは、カレントディレクトリ配下の `.html` / `.htm` ファイルだけです。',
+	      '`app/`、`components/`、`lib/`、`.git/`、`.next/`、`node_modules/` などのプロジェクトソースや内部ディレクトリはブロックされます。',
+	      'ノーコード編集だけではデッキは公開・アップロードされません。Export PPTX ボタンは `Claude Codeや各エージェントに、html2pptx skillsを使って、HTMLをPowerPoint出力してください。` という案内だけを表示し、直接変換は行いません。',
+	      'local stdio MCP の追加はユーザーのエージェント環境設定を変更します。Skills やエージェントは黙って追加せず、事前に確認してから実行します。',
+	      'エディタ状態はプロジェクトごとに `.html2pptx/edit-slide/` に保存されます。バージョン履歴、バックアップ、監査ログは作成されません。',
+	    ],
+	    skillsLocalEditorTroubleshootingTitle: 'よくあるつまずき',
+	    skillsLocalEditorTroubleshooting: [
+	      { issue: 'local editor tool が使えない', fix: '`npx -y html2pptx-local-mcp@latest html2pptx-install-mcp claude` で local MCP を追加してよいか、先にユーザーへ確認してください。' },
+	      { issue: '`html2pptx edit` が local editor を見つけられない', fix: '`node scripts/dev-studio.mjs` を先に起動するか、`--base-url http://localhost:<port>` で loopback URL を渡してください。hosted edit-slide は使いません。' },
+	      { issue: '画面は開くがスライドが読み込まれない', fix: 'コマンドを実行したディレクトリからの相対パスになっているか、拡張子が `.html` / `.htm` かを確認してください。' },
+	      { issue: '編集内容が保存されない', fix: 'local MCP セッションを終了しないでください。bridge が止まると保存できません。' },
+	      { issue: 'エージェントが local MCP を追加しようとする', fix: '先にユーザーへ確認してください。local MCP は MCP 経由でローカル edit-slide を開く場合だけ必要です。CLI の `html2pptx edit <file>` でも local editor を開けます。' },
+	      { issue: '別タブが読み取り専用になる', fix: '同じHTMLを複数タブで編集して競合しないよう、エディタはタブロックを使います。編集権限のあるタブを使うか、画面上の移譲操作を行ってください。' },
+	    ],
+	    skillsSetupTitle: 'セットアップ',
+    skillsSetupSteps: [
+      {
+        step: '1',
+        title: 'MCP + スキルをインストール',
+        icons: ['claude-code', 'codex', 'cursor', 'windsurf'],
+        body: 'Claude Code、Codex、Cursor、Windsurf のうち、実際に使うエージェントのコマンドを選んで実行してください。その他の対応エージェントや複数指定の場合は対話形式で選択します。--yes は検出された全エージェントのディレクトリへ入るため、全対応が必要な場合以外は使わないでください。',
+        code: SKILL_INSTALL_COMMAND_JA,
+      },
+      {
+        step: '2',
+        title: 'APIキーの設定',
+        body: 'html2pptx.app ダッシュボードでAPIキーを作成し、環境変数に設定します。',
+        code: `# 環境変数にAPIキーを設定
+export HTML2PPTX_API_KEY="sk_live_xxxx"
+
+# または .env ファイルに追加
+echo 'HTML2PPTX_API_KEY=sk_live_xxxx' >> .env`,
+      },
+      {
+        step: '3',
+        title: '使ってみる',
+        body: 'エディタを起動して、自然言語でスライド作成を指示するだけ。スキルが自動でHTMLの生成・検証・API呼び出し・PPTX出力まで処理します。',
+        code: SKILL_INVOCATION_EXAMPLE,
+      },
+    ],
+    skillsAvailableTitle: '利用可能なスキル',
+    skillsAvailable: SKILL_AVAILABLE_LIST,
+    skillsCapabilitiesTitle: 'スキルの機能詳細',
+    skillsCapabilities: [
+      { title: 'HTML診断', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>', body: 'エクスポート前にマークアップをsafe、needs-rewrite、out-of-scopeに分類。.slide要素の欠落、非対応CSS、動的コンテンツなどの問題を検出。' },
+      { title: 'マークアップ書き換え', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>', body: 'Web形式のHTML（レスポンシブレイアウト、パーセントベースのサイジング、スクロールコンテナ）をPPTX変換に適した固定サイズの.slide構造に変換。' },
+      { title: 'スライド生成', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>', body: 'テキストプロンプト、トピックアウトライン、データペイロードからスライドセーフHTMLを新規作成。視覚的階層と可読性のベストプラクティスを適用。' },
+      { title: '出力検証', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><polyline points="9 12 11 14 15 10"/></svg>', body: '生成されたHTMLを html2pptx.app のHTML契約に対してプリフライトチェックし、無効な入力によるエクスポートクォータの無駄遣いを防止。' },
+      { title: 'テンプレート公開', icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12"/><path d="m7 8 5-5 5 5"/><path d="M5 21h14"/></svg>', body: 'マーケットプレイス向けHTML draftは、html2pptx スキル内のAIセキュリティ事前診断、remote MCP検証、draft作成フローで扱います。Web、CLI、local MCP、汎用RESTではテンプレートdraftを作成しません。' },
+    ],
+
+    /* --- Section 5: MCP統合 --- */
+    mcpTitle: 'MCP統合ガイド',
+    mcpSubtitle: 'MCPとは',
+    mcpDescription:
+      'MCP (Model Context Protocol) は、標準化されたツールインターフェースを通じてAIエージェントにバックエンド機能を公開するオープンプロトコルです。html2pptx.app は2種類のMCPサーフェスを提供します。remote HTTP MCP (`/mcp`) はエクスポート、usage、docs、templates、catalog、HTMLテンプレート公開に使います。local stdio MCP は localhost bridge 経由でローカルHTMLを edit-slide で開くために使います。HTMLをPPTXに変換する、またはHTMLテンプレートdraftを作るなら remote MCP、ユーザーPC上の `.html` を開いてプレビュー・編集するなら local MCP を選びます。local MCP はテンプレート公開には使いません。',
+    mcpSetupTitle: 'インストール & セットアップ',
+    mcpSetupLead: 'Claude Code では1コマンドインストーラで remote MCP と edit-slide 用 local MCP をまとめて追加できます。ローカル編集が不要な場合だけ remote-only コマンドを使ってください。',
+    mcpEditorTabs: [
+      {
+        id: 'claude-code',
+        label: 'Claude Code',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/claude/default.svg',
+        recommended: true,
+        steps: [
+          { title: 'リモートサーバーをセットアップ（推奨）', body: 'ターミナルで以下のコマンドを実行してください。', code: `claude mcp add --transport http html2pptx https://html2pptx.app/mcp` },
+          { title: '手動セットアップ', body: 'コマンドが使えない場合は、以下を実行してMCPサーバーを手動で追加してください。', code: `claude mcp add html2pptx --transport http https://html2pptx.app/mcp` },
+          { title: 'Remote + Local を1コマンドで追加', body: 'PPTX出力・docs・templates 用の remote MCP と、edit-slide 用の local MCP をまとめて追加します。公開パッケージから導入するため、リポジトリの checkout は不要です。local MCP は Claude Code が安定して起動できるよう stable launcher として登録されます。', code: `npx -y html2pptx-local-mcp@latest html2pptx-install-mcp claude` },
+        ],
+        tip: 'すべてのプロジェクトでMCPサーバーを使用するには --scope user フラグを追加してください:\nclaude mcp add --scope user --transport http html2pptx https://html2pptx.app/mcp',
+      },
+      {
+        id: 'codex',
+        label: 'Codex',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/openai/light.svg',
+        steps: [
+          { title: 'CLIコマンドで追加（推奨）', body: 'ターミナルで以下のコマンドを実行してください。OAuth認証が自動的に開始されます。', code: `codex mcp add html2pptx --url https://html2pptx.app/mcp` },
+          { title: 'edit-slide 用 local stdio MCP（任意）', body: 'Codex がローカル `.html` を edit-slide で開く必要がある場合だけ追加します。公開パッケージから起動するため、リポジトリのcheckoutは不要です。エディタ本体と localhost bridge は空きポートを使います。MCP設定を変更するため、Codex は実行前にユーザー確認を取ってください。', code: `codex mcp add html2pptx-local -- npx -y html2pptx-local-mcp@latest html2pptx-mcp` },
+          { title: 'codex.json で手動セットアップ', body: 'コマンドが使えない場合は、プロジェクトルートの codex.json に以下を追加してください。', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "type": "url",\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+        ],
+      },
+      {
+        id: 'cursor',
+        label: 'Cursor',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/cursor/light.svg',
+        steps: [
+          { title: '.cursor/mcp.json に追加', body: 'プロジェクトルートに .cursor/mcp.json を作成し、以下を追加してください。', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+        ],
+      },
+      {
+        id: 'vscode',
+        label: 'VS Code',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/visual-studio-code/default.svg',
+        steps: [
+          { title: 'CLIコマンドで追加（推奨）', body: 'ターミナルで以下のコマンドを実行してください。', code: `code --add-mcp '{"name":"html2pptx","type":"http","url":"https://html2pptx.app/mcp"}'` },
+          { title: '.vscode/mcp.json で手動セットアップ', body: 'コマンドが使えない場合は、プロジェクトルートに .vscode/mcp.json を作成してください。', code: `{\n  "servers": {\n    "html2pptx": {\n      "type": "http",\n      "url": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+        ],
+      },
+      {
+        id: 'windsurf',
+        label: 'Windsurf',
+        icon: 'https://cdn.jsdelivr.net/gh/glincker/thesvg@main/public/icons/windsurf/default.svg',
+        steps: [
+          { title: 'mcp_config.json に追加', body: '~/.codeium/windsurf/mcp_config.json を編集し、以下を追加してください。保存後 Windsurf を再起動してください。', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "serverUrl": "https://html2pptx.app/mcp"\n    }\n  }\n}` },
+        ],
+      },
+      {
+        id: 'cline',
+        label: 'Cline',
+        steps: [
+          { title: 'Cline サイドバーから追加', body: 'Cline サイドバー > Configure タブ > 「Configure MCP Servers」を開き、以下を追加してください。', code: `{\n  "mcpServers": {\n    "html2pptx": {\n      "url": "https://html2pptx.app/mcp",\n      "type": "streamableHttp"\n    }\n  }\n}` },
+        ],
+      },
+    ],
+    mcpToolsTitle: '利用可能なMCPツール',
+    mcpTools: [
+      { tool: 'html2pptx_list_export_plans', description: '現在の商用プラン一覧と推奨プランを取得。' },
+      { tool: 'html2pptx_create_export_job', description: 'HTML/CSS からエクスポートジョブを作成。width、height、layout、waitForCompletion、timeoutMs、responseFormat ("url" | "base64" | "both") などのオプションにも対応。' },
+      { tool: 'html2pptx_get_export_job', description: 'jobId を指定してジョブの現在状態を取得。' },
+      { tool: 'html2pptx_wait_for_export_job', description: '完了または失敗までジョブを自動ポーリング。内部でリトライとバックオフを処理。' },
+      { tool: 'html2pptx_get_docs', description: 'html2pptx.app のドキュメントを取得。API契約、HTML要件、統合ガイドを理解するために使用。' },
+      { tool: 'html2pptx_get_usage', description: '現在のプランの使用状況とクォータを取得。週間エクスポート数、残りクォータ、プラン制限、リセットタイミングを表示。' },
+      { tool: 'html2pptx_list_templates', description: '利用可能なマーケットプレイステンプレートを、メタデータと任意のカテゴリ絞り込み付きで取得。' },
+      { tool: 'html2pptx_get_template_html', description: 'テンプレートのHTMLソースとデザインプロンプトを取得。エージェントが研究・リミックスするために使用。' },
+      { tool: 'html2pptx_validate_template_html', description: 'AIセキュリティ事前診断後に行うマーケットプレイスHTMLのdry-run検証。HTMLテンプレートdraft作成前に必須。' },
+      { tool: 'html2pptx_publish_template', description: '検証済みHTMLをアップロードし、不足している題名・説明・カテゴリ・タグを推定して、作成者所有のHTML draftをデフォルト作成。draftUrlを返し、最終公開ボタンはユーザーがdashboardで押します。' },
+      { tool: 'html2pptx_open_local_slide_editor', description: 'ローカル stdio MCP 専用。既存CLIの localhost bridge をローカル .html/.htm スライドファイル向けに起動し、HTMLを公開せずノーコードエディタを開く。remote /mcp ではユーザーPC上のファイルにアクセスできないため、このツールは提供されません。' },
+      { tool: 'html2pptx_stop_local_slide_editor', description: 'ローカル stdio MCP 専用。html2pptx_open_local_slide_editor で開始したローカル編集 bridge セッションを停止。' },
+    ],
+    mcpResourcesTitle: 'MCP Resources（ドキュメント参照）',
+    mcpResourcesDescription: 'MCPサーバーはドキュメントをResourcesとして提供します。エージェントはエクスポート前にこれらを読み込んで、API契約やHTML要件を理解できます。',
+    mcpResources: [
+      { uri: 'docs://html2pptx/overview', name: 'サービス概要', description: 'アーキテクチャ、CSS対応、他社比較' },
+      { uri: 'docs://html2pptx/quickstart', name: 'クイックスタート', description: '4ステップで最初のAPIコール' },
+      { uri: 'docs://html2pptx/api-reference', name: 'APIリファレンス', description: 'エンドポイント、認証、エラーコード' },
+      { uri: 'docs://html2pptx/html-contract', name: 'HTML契約', description: 'HTML構造要件と対応CSSプロパティ' },
+      { uri: 'docs://html2pptx/skills', name: 'Skills統合', description: 'AIエージェント向けスキル定義' },
+      { uri: 'docs://html2pptx/mcp', name: 'MCP統合', description: 'MCPサーバーの設定と使い方' },
+    ],
+    mcpLlmsTxtTitle: 'llms.txt（AI向けドキュメント）',
+    mcpLlmsTxtDescription: 'html2pptx.app は llms.txt 標準に対応しています。AIエージェントやLLMがサービスの仕様を効率的に理解するための、構造化されたMarkdownドキュメントを提供します。',
+    mcpLlmsTxtEndpoints: [
+      { url: 'https://html2pptx.app/llms.txt', description: '簡潔なインデックス（約100行）— サービス概要、API仕様、対応CSS一覧' },
+      { url: 'https://html2pptx.app/llms-full.txt', description: '完全なドキュメント（約900行）— 全セクションのMarkdown版' },
+    ],
+    mcpProgressTitle: '進捗通知・ログ',
+    mcpProgressDescription: 'MCPサーバーはジョブ処理中にリアルタイムのフィードバックを提供します:',
+    mcpProgressItems: [
+      { feature: 'notifications/progress', description: 'ジョブポーリング中に進捗率と現在のステータスを通知。MCPクライアントはプログレスバーやステータスインジケーターを表示可能。' },
+      { feature: 'notifications/message', description: 'ジョブ作成、処理開始、完了、失敗などのライフサイクルイベントを通知。デバッグ用の人間が読めるログメッセージを提供。' },
+    ],
+
+    mcpResourceLinkTitle: 'ResourceLink',
+    mcpResourceLinkDescription: 'ジョブが downloadUrl 付きで完了すると、MCPレスポンスに ResourceLink を含む resource コンテンツブロックが追加されます。これにより、MCPクライアントが生成ファイルをネイティブに処理可能になります -- 例えば、直接ダウンロードボタンの表示や、会話コンテキストへのファイル参照の埋め込みなど。',
+
+    mcpAuthTitle: '認証方法',
+    mcpAuthDescription: 'MCPサーバーは2つの認証方法に対応しています。用途に合わせて選択してください。APIキーはエクスポート、docs、usage、catalog には使えますが、html2pptx_publish_template は作成者IDが必要なため WorkOS-bound user token が必要です。',
+    mcpAuthMethods: [
+      {
+        method: 'APIキー（推奨）',
+        description: 'ダッシュボードで発行したAPIキーを使用します。APIキーには有効期限がない（設定しない限り）ため、再認証の必要がありません。エクスポート、docs、catalog の日常的なMCP利用にはこちらを推奨します。作成者所有のテンプレートdraftは作成できません。',
+        setup: 'ダッシュボードでAPIキーを発行し、Bearerトークンとして設定してください。ほとんどのMCPクライアントはサーバー追加時に自動で処理します。',
+        pros: ['トークン期限切れなし — 安定した長期セッション', 'シンプルな設定 — キーを貼るだけ', '日常利用や自動化に最適'],
+      },
+      {
+        method: 'OAuth（ブラウザログイン）',
+        description: 'WorkOS AuthKit経由でGoogleアカウントやメールアドレスでログインします。アクセストークンの有効期限は24時間で、期限切れ後は再認証が必要です。html2pptx_publish_template にはこの identity-bound な認証が必要です。',
+        setup: 'MCPサーバーを追加すると、ブラウザでログイン画面が自動的に開きます。サインインして認証を完了してください。',
+        pros: ['APIキー管理が不要', 'お試しや評価に最適'],
+        note: 'OAuthセッションは24時間で期限切れになります。途切れないアクセスが必要な場合は、APIキーの利用を推奨します。',
+      },
+    ],
+
+    mcpErrorRecoveryTitle: 'エラーリカバリーガイダンス',
+    mcpErrorRecoveryDescription: 'MCPのエラーメッセージには、LLMエージェントが自己回復するための実行可能なガイダンスが含まれます。例: レート制限時は「30秒待ってリトライ」、バリデーションエラー時は「html2pptx_get_docs を呼んでHTML契約を確認」、プラン制限エラー時は「スライド数をN枚に削減」など。エージェントがユーザーの介入なしに問題を自動診断・解決できます。',
+
+    mcpExampleTitle: '使用例',
+    mcpExampleCode: MCP_USAGE_EXAMPLE,
+
+    /* --- Section 6: Studio & Hosted Web Export --- */
+    studioTitle: 'Studio・Hosted Web Export',
+    studioLead: 'html2pptx.app には、ブラウザから使う Studio と Hosted Web Export もあります。これらは手動編集、目視確認、軽量なブラウザ内エクスポート向けの公開サーフェスです。',
+    studioCards: [
+      {
+        title: 'Studio',
+        body: 'Studio は手動オーサリング環境です。HTML/CSS を貼り付けて見た目を調整し、ブラウザ上で確認してからエクスポートできます。',
+      },
+      {
+        title: 'Hosted Web Export',
+        body: 'Hosted Web Export は、同一オリジンのWebアプリから使うためのブラウザ向けエンドポイントです。バックエンド自動化や外部公開APIの代わりではありません。',
+      },
+      {
+        title: '使い分け',
+        body: 'バックエンド連携は REST API、エージェント連携は Skills/MCP、手動編集は Studio、ファーストパーティのブラウザUIからの軽量エクスポートは Hosted Web Export を使うのが基本です。',
+      },
+    ],
+    studioWorkflowTitle: '公開サーフェスの役割分担',
+    studioWorkflow: [
+      'Studio は公開された手動編集UIです。',
+      'Hosted Web Export は /api/web-export/jobs を使う same-origin ブラウザ向けサーフェスです。',
+      'REST API はサーバー連携・自動化の正式インターフェースです。',
+      '再現性の高い本番自動化には Hosted Web Export ではなく REST API を使用してください。',
+      'Studio、Hosted Web Export、API、Skills、MCP はすべて同じ変換品質とセキュリティ基準を共有します。',
+      'テンプレート公開だけは意図的に狭くしています。Web UI、CLI、local MCP、REST API は marketplace draft を作れません。draft作成はHTMLのみで、remote MCP の検証・下書き保存フローを通します。エージェントはHTMLから題名・タグを推定できますが、最終公開ボタンはユーザーがdashboardで押します。',
+    ],
+    studioExampleTitle: 'Hosted Web Export の例',
+    studioExampleCode: WEB_EXPORT_EXAMPLE,
+
+    /* --- Section 6b: CLIツール --- */
+    cliTitle: 'CLIツール',
+    cliSubtitle: 'CLIとは',
+    cliDescription:
+      'html2pptx CLI を使えば、ターミナルから直接HTMLファイルをPowerPointに変換し、ローカルHTMLを edit-slide で開き、テンプレートを参照できます。初めてのユーザー向けの対話モード（ガイド付きプロンプト）と、スクリプト・CI/CD・AIエージェント（Claude Code等）向けのダイレクトモード（フラグ指定）の両方に対応しています。テンプレートdraft作成はHTMLのみremote MCP限定で、CLIでは意図的に拒否します。',
+    cliInstallTitle: 'インストール',
+    cliInstallSteps: [
+      { label: 'グローバルインストール', command: 'npm install -g html2pptx-cli' },
+      { label: 'npxで直接実行', command: 'npx html2pptx-cli convert slides.html' },
+    ],
+    cliSetupTitle: '初期設定',
+    cliSetupDescription: 'ファイルを変換する前に、APIキーを設定してください。この設定は一度だけ行えば ~/.html2pptx/config.json に保存されます（所有者のみアクセス可）。',
+    cliSetupCode: 'html2pptx init',
+    cliCommandsTitle: 'コマンド一覧',
+    cliCommands: [
+      { command: 'html2pptx login', description: 'APIキーを対話的に設定します。ダッシュボードへのリンクが表示され、キーを生成できます。' },
+      { command: 'html2pptx logout', description: '保存されたAPIキーを ~/.html2pptx/config.json から削除します。' },
+      { command: 'html2pptx convert [file]', description: 'HTMLファイルをPPTXに変換します。引数なしで対話モード、ファイルパス指定でダイレクトモードになります。' },
+      { command: 'html2pptx status', description: '現在の使用量、残りクォータ、レート制限、プラン詳細を確認します。' },
+      { command: 'html2pptx whoami', description: 'APIキーの有効性を検証し、認証状態・プラン名・使用量を表示します。' },
+      { command: 'html2pptx config', description: '現在の設定（APIキー、ベースURL）を表示します。' },
+      { command: 'html2pptx templates list', description: '利用可能なテンプレート一覧を表示します。' },
+      { command: 'html2pptx templates get <id>', description: 'テンプレートの詳細を取得します。--prompt でデザインプロンプト、--html でソースコードを含めます。' },
+      { command: 'html2pptx templates publish', description: '無効化されています。テンプレート公開はHTMLのみremote MCP経由です。' },
+      { command: 'html2pptx --help', description: 'ヘルプとコマンド一覧を表示します。' },
+      { command: 'html2pptx --version', description: 'インストール済みのCLIバージョンを表示します。' },
+    ],
+    cliOptionsTitle: 'convert オプション',
+    cliOptions: [
+      { flag: '-o, --output <file>', description: '出力PPTXファイル名（デフォルト: 入力ファイル名の拡張子を .pptx に変更）' },
+      { flag: '-s, --size <size>', description: 'スライドサイズ: "16:9"、"4:3"、またはカスタム "WxH"（例: 1920x1080）' },
+      { flag: '--css <file>', description: 'HTMLと一緒に適用する外部CSSファイル' },
+      { flag: '--json', description: 'スクリプトやCI/CDパイプライン向けにJSON形式で結果を出力' },
+      { flag: '--open', description: '変換後にPPTXファイルを自動で開く' },
+      { flag: '--base-url <url>', description: 'APIベースURL（デフォルト: https://html2pptx.app）' },
+    ],
+    cliExamplesTitle: '使用例',
+    cliExamples: [
+      { title: 'ダイレクトモード（スクリプト・AIエージェント向け）', code: '# ワンライナーで変換\nhtml2pptx convert ./slides.html -o presentation.pptx -s 16:9\n\n# 外部CSSを指定\nhtml2pptx convert ./slides.html --css ./styles.css -o deck.pptx\n\n# JSON出力（スクリプト連携用）\nhtml2pptx convert ./slides.html --json\n# {"success":true,"file":"slides.pptx","size":"1.2 MB","duration":"3.2s"}' },
+      { title: '対話モード（初めてのユーザー向け）', code: '# 引数なしで実行するだけ\nhtml2pptx convert\n\n# CLIがガイドします:\n#   > 変換するHTMLファイル\n#   > スライドサイズの選択\n#   > 出力ファイル名' },
+      { title: 'アカウント管理', code: '# 認証状態を確認\nhtml2pptx whoami\n#   Plan: Starter\n#   Usage: 1 / 120 exports today\n#   Remaining: 119\n\n# 詳細な使用量を確認\nhtml2pptx status\n#   Plan: Starter\n#   Daily Usage: 42 / 120 exports  ████████████░░░░░░░░\n#   Remaining: 78\n#   Rate Limit: 5 req/min\n#   Max Slides: 50 per job\n\n# ログアウト\nhtml2pptx logout' },
+      { title: 'テンプレート', code: '# テンプレート一覧\nhtml2pptx templates list\n\n# デザインプロンプト付きで取得\nhtml2pptx templates get atlantis-pizza-corp --prompt\n\n# HTMLソース付きでJSON出力\nhtml2pptx templates get atlantis-pizza-corp --prompt --html --json\n\n# 下書き作成はremote MCP限定:\n# AI security preflight -> html2pptx_validate_template_html -> html2pptx_publish_template -> dashboard review' },
+    ],
+
+    /* --- Section 7: 活用事例 --- */
+    useCasesTitle: '活用事例',
+    useCasesIntro: 'html2pptx.app は自動化された反復可能なスライド生成のために設計されています。最も一般的な統合パターンをご紹介します:',
+    useCases: [
+      {
+        title: '四半期レポートの自動生成',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>',
+        body: 'ライブデータから四半期パフォーマンスデッキを自動生成。データベースからメトリクスを取得し、チャートやKPIカードを含むスライドHTMLにフォーマットしてAPI経由でエクスポート。cronでスケジュールするか、BIパイプラインからトリガーすることで完全にハンズフリーのレポーティングを実現。',
+        code: REPORT_EXAMPLE,
+      },
+      {
+        title: '営業提案書のテンプレート化',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>',
+        body: 'ブランド準拠のスライドテンプレートをHTML/CSSで一度定義し、キャンペーンやクライアントピッチごとに動的コンテンツを投入。会社名、プロジェクト詳細、価格などの変数は生成時にインジェクション。マーケティングチームがテンプレートを管理し、営業担当者はピクセルパーフェクトなブランデッドデッキを即座に取得。',
+        code: PROPOSAL_TEMPLATE_EXAMPLE,
+      },
+      {
+        title: 'AIエージェントによるプレゼン自動作成',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="3"/><line x1="8" y1="16" x2="8" y2="16.01"/><line x1="16" y1="16" x2="16" y2="16.01"/></svg>',
+        body: 'AIエージェントに会議メモ、リサーチサマリー、プロジェクト概要からプレゼンテーションデッキを作成させます。Skills またはMCP統合により、エージェントは html2pptx.app のHTML契約を理解し、準拠したスライドを生成してダウンロードリンクを提供。ユーザーは自然言語で欲しいものを説明するだけ。',
+        code: null,
+      },
+      {
+        title: 'SaaSアプリへのPPTXエクスポート機能追加',
+        icon: '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
+        body: 'SaaS製品に「PowerPointにエクスポート」機能を追加。ダッシュボード、分析ビュー、レポートをスライドHTMLとしてレンダリングし、バックエンドから html2pptx.app API を呼び出します。ユーザーはフラットなスクリーンショットではなく、編集可能なテキストとシェイプを含むネイティブPPTXファイルを取得。',
+        code: SAAS_EMBED_EXAMPLE,
+      },
+    ],
+
+    /* --- Section 8: プラン・料金 --- */
+    plansTitle: 'プラン・料金',
+    plansDescription: '利用状況に合ったプランを選択してください。現在の公開カタログはコードで定義されており、requests per minute、日次ガードレール、最大スライド数、concurrentJobs、API キー数、payload サイズがプランごとに異なります。',
+    plansTable: [
+      { plan: 'Free Preview', exports: '日100件 / 3 rpm', slides: '50枚/ジョブ', support: 'コミュニティ', price: '0円' },
+      { plan: 'Founder Beta', exports: '日300件 / 5 rpm', slides: '100枚/ジョブ', support: 'セルフサービス', price: '980円/月' },
+      { plan: 'Starter', exports: '日1,000件 / 15 rpm', slides: '200枚/ジョブ', support: 'メール', price: '2,980円/月' },
+      { plan: 'Business', exports: '日5,000件 / 60 rpm', slides: '300枚/ジョブ', support: '優先', price: '9,800円/月' },
+      { plan: 'Enterprise / OEM', exports: '個別設計', slides: '500枚+/ジョブ', support: '専任', price: '49,800円/月〜' },
+    ],
+    plansUpgradeNote: 'ダッシュボードからいつでもアップグレード可能。変更は即時反映され、日割り請求となります。ダウングレードは現在の請求期間終了時に適用。',
+
+    plansRateLimitsTitle: 'プラン別レート制限・クォータ',
+    plansRateLimitsDescription: '各プランには以下の制限が適用されます。全チャネル（REST API、Skills、MCP）で共通のクォータです。',
+    plansRateLimits: [
+      {
+        plan: 'Free Preview',
+        rpm: '3回/分',
+        daily: '100回/日',
+        monthly: '無制限*',
+        slidesPerJob: '50枚',
+        concurrent: '1ジョブ',
+        apiKeys: '1個',
+        payload: '1 MB',
+        fairUse: '月1,000回でレビュー、月2,000回でアップグレード提案',
+      },
+      {
+        plan: 'Founder Beta',
+        rpm: '5回/分',
+        daily: '300回/日',
+        monthly: '無制限*',
+        slidesPerJob: '100枚',
+        concurrent: '2ジョブ',
+        apiKeys: '3個',
+        payload: '2 MB',
+        fairUse: '月3,000回でレビュー、月5,000回でアップグレード提案',
+      },
+      {
+        plan: 'Starter',
+        rpm: '15回/分',
+        daily: '1,000回/日',
+        monthly: '無制限*',
+        slidesPerJob: '200枚',
+        concurrent: '5ジョブ',
+        apiKeys: '10個',
+        payload: '5 MB',
+        fairUse: '月10,000回でレビュー、月20,000回でアップグレード提案',
+      },
+      {
+        plan: 'Business',
+        rpm: '60回/分',
+        daily: '5,000回/日',
+        monthly: '無制限*',
+        slidesPerJob: '300枚',
+        concurrent: '20ジョブ',
+        apiKeys: '50個',
+        payload: '10 MB',
+        fairUse: '月50,000回でレビュー、月100,000回でアップグレード提案',
+      },
+      {
+        plan: 'Enterprise / OEM',
+        rpm: '120回/分',
+        daily: '個別設計',
+        monthly: '個別設計',
+        slidesPerJob: '500枚',
+        concurrent: '50ジョブ',
+        apiKeys: '100個',
+        payload: '25 MB',
+        fairUse: '個別契約',
+      },
+    ],
+    plansRateLimitsNote: '* 無制限 = 公平利用ポリシーの範囲内です。MCPプロトコルのリクエストはプランRPMの3倍でレート制限されます（initialize、tools/list等のプロトコルオーバーヘッド分）。',
+
+    /* --- Section 9: セキュリティ --- */
+    securityTitle: 'セキュリティ・制限',
+    securityLead: '公開 API、Skills、MCP、Studio、Hosted Web Export は、同じ変換パイプラインの上にあります。実際に重要なのは、認証、ジョブ所有権、SVG 方針、ワーカー隔離、サーバー側制限の理解です。',
+    securityLayers: [
+      {
+        title: '認証と認可',
+        body: 'REST API は API キー、remote MCP は商用 API キーまたは WorkOS 認証済みセッションを利用します。ジョブ参照は、そのジョブを作成した API キーまたは principal に紐付きます。',
+      },
+      {
+        title: 'SVG と未信頼マークアップ',
+        body: '公開 API と MCP は受信HTMLをサニタイズし、インライン SVG を安全に処理します。SVG は高品質な PNG 画像に変換されます。',
+      },
+      {
+        title: 'ワーカー隔離',
+        body: 'プライベートワーカーは分離ブラウザコンテキストでレンダリングし、任意の外部ネットワーク要求を遮断し、リクエストボディ上限と job TTL を適用します。',
+      },
+      {
+        title: '利用制御',
+        body: '1分あたりのリクエスト数、日次ガードレール、月次の公平利用レビュー閾値、1ジョブあたりの最大スライド数、最大 payload サイズ、同時実行数はすべてサーバー側で強制されます。',
+      },
+    ],
+    securityChecklistTitle: '本番運用での推奨事項',
+    securityChecklist: [
+      'API キーはシークレットとして扱い、露出時はダッシュボードからローテーションしてください。',
+      'バックエンド自動化には REST API を使い、Hosted Web Export はファーストパーティのブラウザ用サーフェスとして扱ってください。',
+      'status ポーリングは 2 秒程度の間隔とバックオフを前提にしてください。',
+      'スライドHTMLは明示サイズ、決定的な CSS、ランタイム依存の少ない構造にしてください。1600x900 はデフォルト例です。',
+      'fileBase64 は大きくなる場合があります。保存側はバイナリ安全なコードパスで処理してください。',
+      'エージェント連携では、ローカル stdio MCP と remote /mcp のどちらを使うかを事前に決めてください。',
+    ],
+
+    /* --- Section 10: FAQ --- */
+    faqTitle: 'FAQ',
+    faqItems: [
+      {
+        question: '他社のHTML-to-PPTXソリューションとの違いは？',
+        answer: 'ほとんどの代替サービスはHTMLのスクリーンショットを撮り、各スライドにフラット画像として埋め込みます。html2pptx.app はネイティブシェイプ変換を行います -- CSSを解析し、flexbox、グラデーション、border-radius、シャドウなどのプロパティをネイティブPPTX Officeシェイプにマッピングします。結果は完全に編集可能なテキスト、スケーラブルなベクターグラフィックス、小さいファイルサイズです。',
+      },
+      {
+        question: 'どんなHTMLでもPPTXに変換できますか？',
+        answer: '安定した変換は保証されません。html2pptx.app は .slide クラス要素と明示サイズを持つスライド指向のHTMLに最適化されています。1600x900 はデフォルト例ですが、縦長やカスタムサイズにも対応しています。任意のWebページ、インタラクティブアプリ、スクロールベースのレイアウト、JavaScript依存のレンダリングを持つページは非対応です。HTML契約セクションに正確な要件が記載されています。',
+      },
+      {
+        question: '何が1枚のスライドになりますか？',
+        answer: '.slide クラスを持つ各要素が出力PPTXの1スライドになります。HTMLに class="slide" を持つ要素が5つあれば、出力は5スライドになります。予測可能な結果のために、明確なスライド境界を定義してください。',
+      },
+      {
+        question: 'エクスポート後のコンテンツはPowerPointで編集可能ですか？',
+        answer: 'はい、ほとんどの場合。テキストは編集可能なテキストボックスに変換され、シンプルな図形もPowerPoint上で編集できます。インラインSVGは高品質なPNG画像に変換されます。',
+      },
+      {
+        question: 'エクスポートにはどのくらい時間がかかりますか？',
+        answer: '単一スライドのジョブは通常3-5秒で完了します。マルチスライドデッキ（10-50スライド）は、複雑さ、画像数、フォント埋め込みに応じて8-20秒かかります。ワーカーは可能な場合スライドを並列処理します。最適なレスポンシブ性のため、ジョブステータスエンドポイントを2秒間隔でポーリングしてください。',
+      },
+      {
+        question: 'どのフォントに対応していますか？',
+        answer: 'システムフォント（Arial、Helvetica、Times New Romanなど）はデフォルトで動作します。Webフォントの場合、autoEmbedFonts: true を有効にしてください -- html2pptx.app がGoogle Fontsやカスタム@font-face URLからフォントファイルをダウンロードしてPPTXに埋め込みます。Noto Sans JP、游ゴシック、メイリオ、ヒラギノなどの日本語フォントにも完全対応しています。',
+      },
+      {
+        question: '無料プランはありますか？',
+        answer: 'はい。現在の公開カタログには Early Access ティアがあり、制限付きで API / Skills / MCP を利用できます。正確な上限はコードと GET /api/export/plans のレスポンスが正です。',
+      },
+      {
+        question: 'スライドでSVGは使えますか？',
+        answer: 'はい。インラインSVGに対応しています。公開APIでは安全のためPNG画像に変換されます。',
+      },
+      {
+        question: '最大ファイルサイズは？',
+        answer: 'HTMLペイロードは5MB以下を推奨。生成されるPPTXファイルはコンテンツにより異なりますが、通常100KB〜10MBの範囲です。多数の高解像度画像をbase64で埋め込んだジョブはファイルサイズが大きくなります。大きな画像にはURL参照の使用を検討してください。',
+      },
+      {
+        question: 'セキュリティ対策は？',
+        answer: '複数の防御を実装しています。ワーカーの外部要求遮断、ジョブ所有者バインディング、APIキーのハッシュ保存、リクエストボディ上限、同時実行数制限、公開SVGのサニタイズとPNG化などです。バックエンド自動化では Hosted Web Export ではなく REST API を使うのが推奨です。',
+      },
+      {
+        question: '日本語テキストやCJK文字に対応していますか？',
+        answer: 'はい、完全対応しています。日本語、中国語、韓国語の文字は正しくレンダリングされます。最良の結果のためには、CSSでCJKフォントを指定し（例: font-family: "Noto Sans JP", sans-serif）、autoEmbedFontsを有効にしてフォントがインストールされていないマシンでもポータブルなレンダリングを確保してください。',
+      },
+      {
+        question: 'エラーの対処方法は？',
+        answer: 'ジョブステータスエンドポイントを確認してください。statusが "failed" の場合、errorフィールドに人間が読める説明が含まれます。すべてのAPIエラーはRFC 9457 Problem Details形式に準拠し、type、status、title、detail、instanceフィールドに加え、後方互換のためのerrorとmessageフィールドも返します。一般的な問題: .slide要素の欠落 (400)、期限切れAPIキー (401)、レート制限超過 (429)、コンテンツの超過サイズ (413)。',
+      },
+      {
+        question: 'CSS Gridで複雑なスライドレイアウトは作れますか？',
+        answer: 'はい。CSS Gridは grid-template-columns、grid-template-rows、gap、グリッド配置プロパティを含め完全に対応しています。マルチカラムレイアウト、ダッシュボードスタイルのカード、複雑なビジュアル配置を簡単に作成でき、PPTXにクリーンに変換されます。',
+      },
+      {
+        question: 'ジョブ完了のWebhookはありますか？',
+        answer: 'はい。POST /api/export/jobs のリクエストボディに callbackUrl フィールド（HTTPSのみ）を追加してください。ジョブ完了または失敗時に、ワーカーがコールバックURLにジョブ結果全体をPOSTします（x-signature-sha256 HMACヘッダー付き）。あるいは従来通り GET /api/export/jobs/{jobId} を2秒間隔でポーリングすることも可能です。MCPユーザーの場合、html2pptx_wait_for_export_job がポーリングを自動処理します。',
+      },
+    ],
+    faqTroubleshootTitle: 'トラブルシューティング',
+    faqTroubleshootItems: [
+      { issue: 'ジョブが "queued" ステータスのまま', solution: 'プライベートワーカーがオフラインまたは過負荷の可能性があります。30秒待ってリトライしてください。続く場合はダッシュボードからワーカーの状態を確認するか、サポートにお問い合わせください。' },
+      { issue: 'スライドが空白で表示される', solution: 'HTMLに class="slide" を持つ要素が含まれ、それらの要素に可視コンテンツがあることを確認。CSSがペイロードに含まれ、外部スタイルシートに依存していないかも確認。' },
+      { issue: 'PPTXでフォントが異なる', solution: 'autoEmbedFonts: true を有効にしてWebフォントを埋め込み。カスタムフォント使用時は@font-face URLが公開アクセス可能であることを確認。最大の互換性にはArial、Noto Sansなどのシステムセーフフォントを使用。' },
+      { issue: '429レート制限エラー', solution: 'X-RateLimit-Resetヘッダーでウィンドウリセット時刻を確認。ポーリングロジックに指数バックオフを実装。より高いリクエスト制限にはプランのアップグレードを検討。' },
+      { issue: 'レイアウトがブラウザプレビューと異なる', solution: '.slide要素にはインラインスタイルで明示サイズを指定してください。1600x900 はデフォルト例ですが、width / height / layout と一致するカスタム比率でも問題ありません。レスポンシブ/パーセントベースのレイアウト、メディアクエリ、ビューポート相対単位（vh、vw）は避けてください。' },
+      { issue: '画像がPPTXに表示されない', solution: '画像には絶対URL（https://...）またはbase64データURIを使用。相対パスやlocalhostのURLは失敗します。画像URLがワーカーから公開アクセス可能であることを確認。' },
+      { issue: 'PPTXファイルサイズが大きすぎる', solution: '大きなファイルは通常、埋め込みbase64画像や画像の多いコンテンツが原因。代わりにURL参照を使用するか、埋め込み前に画像を圧縮してください。' },
+    ],
+  },
+};