dsh-ppt 0.5.1 → 0.6.0

package/skills/dsh-ppt/scripts/deck-core.mjs

@@ -16,21 +16,24 @@
 
 import { existsSync, mkdirSync, readdirSync, readFileSync, renameSync, rmSync, writeFileSync } from 'node:fs'
 import { resolve as resolvePath, join as joinPath } from 'node:path'
-import { deflateRawSync } from 'node:zlib'
+import { deflateRawSync } from 'node:zlib'
+import { MEDIA_LAYOUTS, MEDIA_CSS, normalizeMediaSlide, renderMediaHtml, mediaBoxes } from './deck-media.mjs'
 
 /**
  * manifest 版本跟随发布包 package.json；把 skills/dsh-ppt 独立复制到其他
  * harness（没有 package.json）时回退为 0.0.0，避免版本号悄悄漂移。
  */
-function readDeckVersion() {
-  try {
-    const pkg = JSON.parse(readFileSync(new URL('../../../package.json', import.meta.url), 'utf8'))
-    const version = String(pkg.version ?? '').trim()
-    return version !== '' ? version : '0.0.0'
-  } catch {
-    return '0.0.0'
-  }
-}
+function readDeckVersion() {
+  for (const file of ['../../../package.json', '../package.json']) {
+    try {
+      const pkg = JSON.parse(readFileSync(new URL(file, import.meta.url), 'utf8'))
+      if (!['dsh-ppt', 'dsh-ppt-skill'].includes(pkg.name)) continue
+      const version = String(pkg.version ?? '').trim()
+      if (version) return version
+    } catch { /* Copied skill may have no parent manifest. */ }
+  }
+  return '0.0.0'
+}
 
 export const DECK_VERSION = readDeckVersion()
 
@@ -430,7 +433,7 @@ const DECK_ARTIFACT_EXTENSIONS = ['.html', '.pptx', '.json']
  * 为三件套选择同一个可用文件名前缀。默认不覆盖：任一产物已存在时，
  * 整组改用 -1/-2… 后缀，避免新旧 deck 被静默混写。
  */
-function resolveDeckFileName(outputDir, requestedFileName, overwrite) {
+export function resolveDeckFileName(outputDir, requestedFileName, overwrite) {
   // 一次 readdir 建集，替代逐个候选 existsSync 探测（最坏 ~3000 次 stat）；
   // 统一小写比较，避免 Windows 大小写不敏感文件系统把已占用的名字判成可用。
   const existing = new Set(readdirSync(outputDir).map((name) => name.toLowerCase()))
@@ -794,11 +797,11 @@ export function parseMarkdownDeck(titleInput, content, lang = 'zh') {
   return { title: coverTitle || 'Untitled', subtitle: coverSubtitle, slides }
 }
 
-const SLIDE_LAYOUTS = new Set(['cover', 'section', 'bullets', 'statement', 'closing', 'quote', 'table'])
+const SLIDE_LAYOUTS = new Set(['cover', 'section', 'bullets', 'statement', 'closing', 'quote', 'table', ...MEDIA_LAYOUTS])
 
 function normalizeSlide(raw, index) {
   const source = (raw !== null && typeof raw === 'object') ? raw : {}
-  const layout = SLIDE_LAYOUTS.has(source.layout) ? source.layout : 'bullets'
+  const layout = SLIDE_LAYOUTS.has(source.layout) ? source.layout : source.chart ? 'chart' : source.image ? 'image-right' : 'bullets'
   const title = stripInlineMarkdown(source.title ?? '')
   const subtitle = stripInlineMarkdown(source.subtitle ?? '')
   const kicker = stripInlineMarkdown(source.kicker ?? '')
@@ -808,9 +811,10 @@ function normalizeSlide(raw, index) {
   let bullets = []
   if (Array.isArray(source.bullets)) {
     bullets = source.bullets.map((item) => stripInlineMarkdown(String(item))).filter(Boolean)
-  } else if (typeof source.bullets === 'string' && source.bullets.trim() !== '') {
-    bullets = splitSentences(source.bullets)
-  }
+  } else if (typeof source.bullets === 'string' && source.bullets.trim() !== '') {
+    bullets = splitSentences(source.bullets)
+  }
+  if (MEDIA_LAYOUTS.has(layout)) return normalizeMediaSlide(source, { layout, kicker, title, subtitle, text, bullets, ...(notes !== '' ? { notes } : {}) }, index)
   if (layout === 'statement' && title === '' && text !== '') {
     return { layout, kicker, title: text, subtitle: subtitle || '', bullets, ...(notes !== '' ? { notes } : {}) }
   }
@@ -891,7 +895,7 @@ export function normalizeBuildOptions(options = {}) {
  * 任一步失败都清理临时文件，并把已提交的目标恢复为调用前的内容，
  * 避免出现「json/html 已更新、pptx 还是旧的」这类混版状态。
  */
-function commitDeckArtifacts(artifacts) {
+export function commitDeckArtifacts(artifacts) {
   const stamp = process.pid.toString(36) + '-' + Date.now().toString(36) + '-' + Math.random().toString(36).slice(2, 8)
   const items = artifacts.map((item, index) => ({ ...item, tempPath: item.path + '.' + stamp + '-' + index + '.tmp' }))
   const removeTemp = (item) => {
@@ -944,7 +948,10 @@ function commitDeckArtifacts(artifacts) {
   }
 }
 
-export function buildDeck(options = {}) {
+export function buildDeck(options = {}) {
+  if (options.brand || options.template || options.slides?.some(slide => MEDIA_LAYOUTS.has(slide.layout) || slide.image || slide.chart)) {
+    throw new Error('dsh-ppt：图片、图表、模板与品牌请使用异步 buildDeckAsync 或 ppt_create / CLI')
+  }
   const normalized = normalizeBuildOptions(options)
   const { title, theme, language, motion, deck, outputDir, overwrite } = normalized
   mkdirSync(outputDir, { recursive: true })
@@ -1009,7 +1016,7 @@ body.motion .bullets li{
   const slides = manifest.slides.map((slide, index) => {
     const label = slide.title || slide.kicker || (ui.slide + ' ' + (index + 1))
     return '<div class="slide-frame" data-frame="' + (index + 1) + '" tabindex="-1" role="button" aria-label="' + escapeHtml(String(label)) + '">' +
-      renderHtmlSlide(slide, index, ui, lang.id) + '</div>'
+      renderHtmlSlide(slide, index, ui, lang.id, manifest, theme) + '</div>'
   }).join('\n')
   const themeLabel = t.name[lang.id] ?? t.name.en
   const total = manifest.slides.length
@@ -1054,6 +1061,7 @@ body{
 }
 .slide.is-active{display:flex}
 ${motionCss}
+${MEDIA_CSS}
 .kicker{
   color:var(--accent);font-weight:700;letter-spacing:.18em;text-transform:uppercase;
   font-size:clamp(12px,1.3vw,18px);margin-bottom:22px;
@@ -1167,6 +1175,7 @@ body.blank-black #hud,body.blank-white #hud{visibility:hidden;pointer-events:non
 :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 body.overview #stage{
   display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;
+  grid-auto-rows:var(--deck-thumb-height,180px);
   padding:18px 18px 92px;position:fixed;inset:0;overflow:auto;align-content:start;
 }
 body.overview .slide-frame{
@@ -1184,11 +1193,12 @@ body.overview .slide-frame::after{
   padding:1px 7px;font-variant-numeric:tabular-nums;
 }
 body.overview .slide{
-  display:flex !important;position:absolute;inset:0;width:100vw;height:100vh;
+  display:flex !important;position:absolute;inset:0;width:1280px;height:720px;
   transform:scale(var(--deck-thumb-scale,.25));transform-origin:top left;pointer-events:none;
   animation:none !important;
 }
 body.overview .bullets li{opacity:1 !important;animation:none !important}
+body.overview .media-canvas{width:1280px;height:720px}
 body.overview #notes-panel,body.presenting #notes-panel{display:none !important}
 body.presenting #notes-toggle{opacity:.55}
 body.presenting #hud{opacity:0;pointer-events:none;transition:opacity .25s}
@@ -1362,7 +1372,10 @@ ${slides}
     if (!document.body.classList.contains('overview')) return;
     requestAnimationFrame(function () {
       const width = frames[0] ? frames[0].getBoundingClientRect().width : 0;
-      if (width > 0) document.documentElement.style.setProperty('--deck-thumb-scale', String(width / window.innerWidth));
+      if (width > 0) {
+        document.documentElement.style.setProperty('--deck-thumb-scale', String(width / 1280));
+        document.documentElement.style.setProperty('--deck-thumb-height', String(width * 9 / 16) + 'px');
+      }
     });
   }
 
@@ -1630,14 +1643,20 @@ ${slides}
 </body>
 </html>`
 }
-function renderHtmlSlide(slide, index, ui, langId) {
+function renderHtmlSlide(slide, index, ui, langId, manifest = {}, theme) {
   const kicker = slide.kicker || (slide.layout === 'cover' ? ui.coverKicker : '')
   const title = slide.title || ''
   const subtitle = slide.subtitle || ''
   const bullets = Array.isArray(slide.bullets) ? slide.bullets : []
   const number = String(index + 1).padStart(2, '0')
   let inner = ''
-  switch (slide.layout) {
+  switch (slide.layout) {
+    case 'image':
+    case 'image-left':
+    case 'image-right':
+    case 'chart':
+      inner = renderMediaHtml(slide, manifest, theme)
+      break
     case 'cover':
       inner = '<div class="kicker">' + escapeHtml(kicker) + '</div>' +
         '<h1>' + escapeHtml(title) + '</h1>' +
@@ -1692,8 +1711,10 @@ function renderHtmlSlide(slide, index, ui, langId) {
   const notesAttr = typeof slide.notes === 'string' && slide.notes.trim() !== ''
     ? ' data-notes="' + escapeHtml(slide.notes) + '"'
     : ''
-  return '<section class="slide slide--' + escapeHtml(slide.layout || 'bullets') + '" data-index="' + number + '"' + notesAttr + '>' +
-    '<div class="slide-inner">' + inner + '</div></section>'
+  return '<section class="slide slide--' + escapeHtml(slide.layout || 'bullets') + '" data-index="' + number + '"' + notesAttr + '>' +
+    '<div class="slide-inner">' + inner + '</div>' +
+    (manifest.brand?.logoAssetId ? '<img class="brand-logo" src="' + escapeHtml(manifest.assets?.[manifest.brand.logoAssetId]?.data ?? '') + '" alt="' + escapeHtml(manifest.brand.name || 'Logo') + '"/>' : '') +
+    (manifest.brand?.footer ? '<div class="brand-footer">' + escapeHtml(manifest.brand.footer) + '</div>' : '') + '</section>'
 }
 
 function hexToRgba(hex, alpha) {
@@ -1717,10 +1738,29 @@ function hex(value) {
   return String(value).replace('#', '').toUpperCase()
 }
 
-function pptxFontName(value) {
-  const match = /"?([^",]+)"?/.exec(String(value ?? ''))
-  return match?.[1]?.trim() || 'Arial'
-}
+export function pptxFontName(value) {
+  const names = String(value ?? '').split(',').map(name => name.trim().replace(/^["']|["']$/g, '')).filter(Boolean)
+  // A CSS stack may start with an optional web font. Office receives one actual
+  // family, so select a platform fallback instead of copying the first name.
+  if (names.length === 1 && !['serif', 'sans-serif', 'system-ui'].includes(names[0])) return names[0]
+  const available = process.platform === 'win32'
+    ? ['Segoe UI', 'Arial', 'Arial Black', 'Impact', 'Georgia', 'Times New Roman', 'Microsoft YaHei', 'SimSun']
+    : process.platform === 'darwin'
+      ? ['Helvetica Neue', 'Arial', 'Impact', 'Georgia', 'Times New Roman', 'Avenir Next', 'PingFang SC', 'Songti SC']
+      : ['Liberation Sans', 'Liberation Serif', 'Noto Sans', 'Noto Sans CJK SC', 'Noto Serif CJK SC']
+  return names.find(name => available.includes(name)) || (names.includes('serif')
+    ? process.platform === 'linux' ? 'Liberation Serif' : 'Georgia'
+    : process.platform === 'win32' ? 'Segoe UI' : process.platform === 'darwin' ? 'Helvetica Neue' : 'Liberation Sans')
+}
+
+export function pptxEastAsianFont(value) {
+  const font = pptxFontName(value)
+  if (/Microsoft YaHei|SimSun|SimHei|PingFang|Songti|Heiti|Noto (Sans|Serif) CJK|[\u3400-\u9fff]/i.test(font)) return font
+  const serif = /Georgia|Times New Roman|Cambria|Liberation Serif/i.test(font)
+  return process.platform === 'win32' ? serif ? 'SimSun' : 'Microsoft YaHei'
+    : process.platform === 'darwin' ? serif ? 'Songti SC' : 'PingFang SC'
+    : serif ? 'Noto Serif CJK SC' : 'Noto Sans CJK SC'
+}
 
 function paragraphXml(text, options = {}) {
   const {
@@ -1735,20 +1775,14 @@ function paragraphXml(text, options = {}) {
     spaceAfter = 0,
   } = options
   const runFont = pptxFontName(font)
-    let pPr = ''
-  if (bullet) {
-    pPr = '<a:pPr marL="285750" indent="-285750"><a:buFont typeface="Arial" panose="020B0604020202020204"/><a:buChar char="•"/></a:pPr>'
-  } else {
-    const parts = [] // align 与 spacing 二选一
-    if (align !== 'l') parts.push('algn="' + align + '"')
-    if (spaceBefore > 0) parts.push('<a:spcBef><a:spcPts val="' + (spaceBefore / 100) + '"/></a:spcBef>')
-    if (spaceAfter > 0) parts.push('<a:spcAft><a:spcPts val="' + (spaceAfter / 100) + '"/></a:spcAft>')
-    pPr = '<a:pPr' + (parts.length > 0 ? ' ' + parts.join(' ') : '') + '><a:buNone/></a:pPr>'
-  }
+  const spacing = (spaceBefore > 0 ? '<a:spcBef><a:spcPts val="' + spaceBefore + '"/></a:spcBef>' : '') +
+    (spaceAfter > 0 ? '<a:spcAft><a:spcPts val="' + spaceAfter + '"/></a:spcAft>' : '')
+  const pPr = '<a:pPr' + (bullet ? ' marL="285750" indent="-285750"' : align !== 'l' ? ' algn="' + align + '"' : '') + '>' + spacing +
+    (bullet ? '<a:buFont typeface="Arial" panose="020B0604020202020204"/><a:buChar char="•"/>' : '<a:buNone/>') + '</a:pPr>'
   return '<a:p>' + pPr +
     '<a:r><a:rPr lang="' + lang + '" sz="' + size + '" b="' + (bold ? 1 : 0) + '" dirty="0">' +
     '<a:solidFill><a:srgbClr val="' + hex(color) + '"/></a:solidFill>' +
-    '<a:latin typeface="' + escapeXml(runFont) + '"/><a:ea typeface="' + escapeXml(runFont) + '"/></a:rPr>' +
+    '<a:latin typeface="' + escapeXml(runFont) + '"/><a:ea typeface="' + escapeXml(pptxEastAsianFont(font)) + '"/></a:rPr>' +
     '<a:t>' + escapeXml(text) + '</a:t></a:r></a:p>'
 }
 
@@ -1778,15 +1812,16 @@ function tableGraphicXml(id, name, box, rows, theme, langId) {
   const lang = langId || 'zh-CN'
   const font = pptxFontName(theme.fonts.body)
   const safeRows = rows.length > 0 ? rows : [['']]
-  const cols = Math.max(1, safeRows[0].length)
+  const cols = Math.max(1, safeRows[0].length)
+  const fontSize = cols <= 6 ? 1700 : 1400
   const colW = Math.floor(box.w / cols)
   const grid = Array.from({ length: cols }, () => '<a:gridCol w="' + colW + '"/>').join('')
   const rowH = 420000
   const cellXml = (text, fill, color, bold) =>
     '<a:tc><a:txBody><a:bodyPr anchor="ctr"/><a:lstStyle/><a:p><a:pPr algn="l"><a:buNone/></a:pPr>' +
-    '<a:r><a:rPr lang="' + lang + '" sz="1400" b="' + (bold ? 1 : 0) + '" dirty="0">' +
+    '<a:r><a:rPr lang="' + lang + '" sz="' + fontSize + '" b="' + (bold ? 1 : 0) + '" dirty="0">' +
     '<a:solidFill><a:srgbClr val="' + hex(color) + '"/></a:solidFill>' +
-    '<a:latin typeface="' + escapeXml(font) + '"/><a:ea typeface="' + escapeXml(font) + '"/></a:rPr>' +
+    '<a:latin typeface="' + escapeXml(font) + '"/><a:ea typeface="' + escapeXml(pptxEastAsianFont(theme.fonts.body)) + '"/></a:rPr>' +
     '<a:t>' + escapeXml(text) + '</a:t></a:r></a:p></a:txBody>' +
     '<a:tcPr marL="91440" marR="91440" anchor="ctr">' +
     (fill !== '' ? '<a:solidFill><a:srgbClr val="' + hex(fill) + '"/></a:solidFill>' : '<a:noFill/>') +
@@ -1824,7 +1859,17 @@ function slideShapeList(slide, index, total, theme, langId) {
   const idBase = (index + 1) * 10
   const footer = String(index + 1).padStart(2, '0') + ' / ' + String(total).padStart(2, '0')
 
-  if (slide.layout === 'cover') {
+  if (MEDIA_LAYOUTS.has(slide.layout)) {
+    const boxes = mediaBoxes(slide.layout)
+    const emu = box => Object.fromEntries(Object.entries(box).map(([key, value]) => [key, Math.round(value * 914400)]))
+    shapes.push(textShapeXml(idBase + 2, 'Title', emu(boxes.title), [para(title, { size: 3400, color: p.fg, bold: true, font })]))
+    if (boxes.body) shapes.push(textShapeXml(idBase + 3, 'Body', emu(boxes.body), [
+      ...(subtitle ? [para(subtitle, { size: 2000, color: p.fg, font: bodyFont })] : []),
+      ...bullets.map(bullet => para(bullet, { size: 2000, color: p.fg, bullet: true, font: bodyFont, spaceAfter: 600 })),
+    ]))
+    const caption = slide.chart?.caption || slide.image?.caption
+    if (caption) shapes.push(textShapeXml(idBase + 4, 'Caption', emu(boxes.caption), [para(caption, { size: 1400, color: p.muted, font: bodyFont })]))
+  } else if (slide.layout === 'cover') {
     shapes.push(accentBarXml(idBase + 1, 'Accent bar', { x: 914400, y: 2250000, w: 240000, h: 1600000 }, p.accent))
     shapes.push(textShapeXml(idBase + 2, 'Title', { x: 1550000, y: 2160000, w: 9250000, h: 1800000 }, [
       para(title, { size: 4400, color: p.fg, bold: true, font }),
@@ -1877,8 +1922,8 @@ function slideShapeList(slide, index, total, theme, langId) {
       ]))
     }
   } else if (slide.layout === 'table') {
-    const hasTitle = title !== '' && title !== kicker
-    if (kicker !== '') {
+    const hasTitle = title !== ''
+    if (kicker !== '' && kicker !== title) {
       shapes.push(textShapeXml(idBase + 1, 'Kicker', { x: 900000, y: 420000, w: 10000000, h: 420000 }, [
         para(kicker, { size: 1400, color: p.accent, bold: true, font: theme.fonts.body }),
       ]))
@@ -2073,7 +2118,7 @@ function slideMasterXml(theme) {
   const levels = Array.from({ length: 9 }, (_, i) => {
     const sz = Math.max(1100, 2000 - i * 100)
     return '<a:lvl' + (i + 1) + 'pPr marL="' + (342900 + i * 342900) + '" indent="' + (-342900 - i * 0) + '">' +
-      '<a:defRPr sz="' + sz + '"><a:solidFill><a:srgbClr val="' + hex(p.fg) + '"/></a:solidFill><a:latin typeface="' + escapeXml(pptxFontName(theme.fonts.body)) + '"/></a:defRPr></a:lvl' + (i + 1) + 'pPr>'
+      '<a:defRPr sz="' + sz + '"><a:solidFill><a:srgbClr val="' + hex(p.fg) + '"/></a:solidFill><a:latin typeface="' + escapeXml(pptxFontName(theme.fonts.body)) + '"/><a:ea typeface="' + escapeXml(pptxEastAsianFont(theme.fonts.body)) + '"/></a:defRPr></a:lvl' + (i + 1) + 'pPr>'
   }).join('')
   return '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' +
     '<p:sldMaster xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" ' +
@@ -2128,8 +2173,8 @@ function themeXml(theme) {
     color('hlink', p.accent) + color('folHlink', p.accent2) +
     '</a:clrScheme>' +
     '<a:fontScheme name="dsh-ppt">' +
-    '<a:majorFont><a:latin typeface="' + escapeXml(pptxFontName(theme.fonts.heading)) + '"/><a:ea typeface=""/><a:cs typeface=""/></a:majorFont>' +
-    '<a:minorFont><a:latin typeface="' + escapeXml(pptxFontName(theme.fonts.body)) + '"/><a:ea typeface=""/><a:cs typeface=""/></a:minorFont>' +
+    '<a:majorFont><a:latin typeface="' + escapeXml(pptxFontName(theme.fonts.heading)) + '"/><a:ea typeface="' + escapeXml(pptxEastAsianFont(theme.fonts.heading)) + '"/><a:cs typeface=""/></a:majorFont>' +
+    '<a:minorFont><a:latin typeface="' + escapeXml(pptxFontName(theme.fonts.body)) + '"/><a:ea typeface="' + escapeXml(pptxEastAsianFont(theme.fonts.body)) + '"/><a:cs typeface=""/></a:minorFont>' +
     '</a:fontScheme>' +
     '<a:fmtScheme name="dsh-ppt">' +
     '<a:fillStyleLst>' +

package/skills/dsh-ppt/scripts/deck-media.mjs

@@ -0,0 +1,160 @@
+// Shared geometry and chart data for the offline player and native PPTX export.
+export const MEDIA_LAYOUTS = new Set(['image', 'image-left', 'image-right', 'chart'])
+export const CANVAS = { w: 13.3333333333, h: 7.5 }
+export const LOGO_BOX = { x: 11.55, y: 0.12, w: 0.95, h: 0.42 }
+export const FOOTER_BOX = { x: 0.85, y: 6.95, w: 9.3, h: 0.3 }
+
+export function mediaBoxes(layout) {
+  const title = { x: 0.85, y: 0.64, w: 11.6, h: 0.85 }
+  const left = { x: 0.85, y: 1.85, w: 5.55, h: 4.65 }
+  const right = { x: 6.88, y: 1.85, w: 5.6, h: 4.65 }
+  const full = { x: 0.85, y: 1.85, w: 11.6, h: 4.65 }
+  return { title, image: { ...(layout === 'image-left' ? left : layout === 'image-right' ? right : full), h: 4.45 },
+    body: layout === 'image-left' ? right : layout === 'image-right' ? left : null,
+    chart: { ...full, h: 4.45 }, caption: { x: 0.85, y: 6.38, w: 11.6, h: 0.35 } }
+}
+
+function numeric(value, page) {
+  if (typeof value !== 'number' && !(typeof value === 'string' && /^[+-]?(?:\d+(?:\.\d*)?|\.\d+)(?:e[+-]?\d+)?$/i.test(value.trim()))) {
+    throw new Error(`dsh-ppt：第 ${page} 页图表有非数值数据：${String(value).slice(0, 40)}`)
+  }
+  const result = Number(value)
+  if (!Number.isFinite(result)) throw new Error(`dsh-ppt：第 ${page} 页图表数值必须有限`)
+  return result
+}
+
+export function normalizeChart(input, page = 1) {
+  if (!input || typeof input !== 'object' || Array.isArray(input)) throw new Error(`dsh-ppt：第 ${page} 页缺少 chart 对象`)
+  const kind = input.kind ?? 'column'
+  if (!['column', 'bar', 'line', 'pie'].includes(kind)) throw new Error(`dsh-ppt：第 ${page} 页未知图表类型 ${kind}`)
+  let categories = input.categories
+  let series = input.series
+  if (input.rows !== undefined) {
+    const rows = input.rows
+    if (!Array.isArray(rows) || rows.length < 2 || !Array.isArray(rows[0]) || rows[0].length < 2
+      || rows.some(row => !Array.isArray(row) || row.length !== rows[0].length)) {
+      throw new Error(`dsh-ppt：第 ${page} 页图表 rows 需包含表头、类别和数值列，各行列数一致`)
+    }
+    categories = rows.slice(1).map(row => row[0])
+    series = rows[0].slice(1).map((name, column) => ({ name, values: rows.slice(1).map(row => row[column + 1]) }))
+  }
+  if (!Array.isArray(categories) || categories.length < 1 || categories.length > 24 || categories.some(c => String(c ?? '').trim() === '')) {
+    throw new Error(`dsh-ppt：第 ${page} 页图表需 1–24 个非空类别`)
+  }
+  if (!Array.isArray(series) || series.length < 1 || series.length > 6) throw new Error(`dsh-ppt：第 ${page} 页图表需 1–6 个数据系列`)
+  const clean = series.map((s, i) => {
+    if (!s || !Array.isArray(s.values) || s.values.length !== categories.length) throw new Error(`dsh-ppt：第 ${page} 页图表第 ${i + 1} 个系列与类别数量不一致`)
+    return { name: String(s.name ?? `系列 ${i + 1}`).trim() || `系列 ${i + 1}`, values: s.values.map(v => numeric(v, page)) }
+  })
+  if (kind === 'pie' && (clean.length !== 1 || categories.length > 12 || clean[0].values.some(v => v < 0) || clean[0].values.reduce((a, b) => a + b, 0) <= 0)) {
+    throw new Error(`dsh-ppt：第 ${page} 页饼图只支持一个系列、最多 12 个类别，数值需非负且总和大于零`)
+  }
+  return { kind, categories: categories.map(c => String(c).trim()), series: clean,
+    ...(input.unit ? { unit: String(input.unit) } : {}), ...(input.caption ? { caption: String(input.caption) } : {}) }
+}
+
+export function normalizeMediaSlide(source, normalized, index) {
+  if (!MEDIA_LAYOUTS.has(normalized.layout)) return normalized
+  if (normalized.layout === 'chart') return { ...normalized, chart: normalizeChart(source.chart, index + 1) }
+  const image = typeof source.image === 'string' ? { src: source.image } : source.image
+  if (!image || typeof image !== 'object' || (!image.src && !image.assetId)) throw new Error(`dsh-ppt：第 ${index + 1} 页缺少 image.src`)
+  const fit = image.fit ?? 'contain'
+  if (!['contain', 'cover'].includes(fit)) throw new Error(`dsh-ppt：第 ${index + 1} 页 image.fit 仅支持 contain / cover`)
+  return { ...normalized, image: { ...(image.src ? { src: String(image.src) } : {}), ...(image.assetId ? { assetId: String(image.assetId) } : {}),
+    alt: String(image.alt ?? normalized.title ?? ''), fit, ...(image.caption ? { caption: String(image.caption) } : {}) } }
+}
+
+const esc = value => String(value ?? '').replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#39;')
+const position = box => `left:${box.x / CANVAS.w * 100}%;top:${box.y / CANVAS.h * 100}%;width:${box.w / CANVAS.w * 100}%;height:${box.h / CANVAS.h * 100}%`
+export function chartColors(theme) { return [theme.palette.accent, theme.palette.accent2, '#55B5AA', '#A580D3', '#E67979', '#7EA4C4'] }
+
+export function renderChartSvg(chart, theme) {
+  const colors = chartColors(theme), fg = theme.palette.fg, muted = theme.palette.muted
+  const width = 1120, height = 430, n = chart.categories.length
+  const rect = (x, y, w, h, color) => `<rect x="${x}" y="${y}" width="${w}" height="${Math.max(0, h)}" fill="${color}"/>`
+  const text = (x, y, content, anchor = 'start', color = fg, size = 18) => `<text x="${x}" y="${y}" text-anchor="${anchor}" fill="${color}" font-size="${size}">${esc(content)}</text>`
+  const line = (x1, y1, x2, y2, color = muted) => `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${color}" stroke-width="1"/>`
+  let shapes = ''
+  if (chart.kind === 'pie') {
+    const values = chart.series[0].values, sum = values.reduce((a, b) => a + b, 0)
+    let angle = -Math.PI / 2
+    values.forEach((value, i) => {
+      const next = angle + value / sum * Math.PI * 2
+      if (value === sum) shapes += `<circle cx="350" cy="205" r="173" fill="${colors[i % colors.length]}"/>`
+      else if (value > 0) shapes += `<path d="M 350 205 L ${350 + Math.cos(angle) * 173} ${205 + Math.sin(angle) * 173} A 173 173 0 ${next - angle > Math.PI ? 1 : 0} 1 ${350 + Math.cos(next) * 173} ${205 + Math.sin(next) * 173} Z" fill="${colors[i % colors.length]}"/>`
+      angle = next
+      const y = 35 + i * 30
+      shapes += rect(625, y - 15, 15, 15, colors[i % colors.length]) + text(651, y, chart.categories[i])
+        + text(1095, y, `${(value / sum * 100).toFixed(1)}%`, 'end')
+    })
+  } else {
+    const values = chart.series.flatMap(s => s.values), min = Math.min(0, ...values), max = Math.max(0, ...values)
+    const span = max - min || 1, left = chart.kind === 'bar' ? 170 : 82, right = 1090, top = 18, bottom = 340
+    const y = value => bottom - (value - min) / span * (bottom - top)
+    const x = value => left + (value - min) / span * (right - left)
+    for (let tick = 0; tick <= 4; tick++) {
+      const value = min + span * tick / 4, label = Number(value.toPrecision(4)).toLocaleString('en-US')
+      if (chart.kind === 'bar') shapes += line(x(value), top, x(value), bottom, `${muted}66`) + text(x(value), bottom + 28, label, 'middle', muted, 16)
+      else shapes += line(left, y(value), right, y(value), `${muted}66`) + text(left - 12, y(value) + 6, label, 'end', muted, 16)
+    }
+    chart.categories.forEach((category, i) => {
+      if (chart.kind === 'bar') shapes += text(left - 14, top + (i + 0.5) * (bottom - top) / n + 6, category, 'end', fg, 16)
+      else shapes += text(left + (i + 0.5) * (right - left) / n, bottom + 30, category, 'middle', fg, 16)
+    })
+    chart.series.forEach((series, s) => {
+      const color = colors[s % colors.length]
+      if (chart.kind === 'line') {
+        const points = series.values.map((v, i) => `${left + (i + 0.5) * (right - left) / n},${y(v)}`).join(' ')
+        shapes += `<polyline points="${points}" fill="none" stroke="${color}" stroke-width="4"/>`
+        series.values.forEach((v, i) => { shapes += `<circle cx="${left + (i + 0.5) * (right - left) / n}" cy="${y(v)}" r="5" fill="${color}"/>` })
+      } else series.values.forEach((v, i) => {
+        if (chart.kind === 'bar') {
+          const group = (bottom - top) / n, h = group * 0.7 / chart.series.length
+          shapes += rect(Math.min(x(0), x(v)), top + i * group + group * 0.15 + s * h, Math.abs(x(v) - x(0)), Math.max(1, h - 2), color)
+        } else {
+          const group = (right - left) / n, w = group * 0.7 / chart.series.length
+          shapes += rect(left + i * group + group * 0.15 + s * w, Math.min(y(0), y(v)), Math.max(1, w - 3), Math.abs(y(v) - y(0)), color)
+        }
+      })
+    })
+    shapes += chart.kind === 'bar' ? line(x(0), top, x(0), bottom, fg) : line(left, y(0), right, y(0), fg)
+    chart.series.forEach((s, i) => { shapes += rect(left + i * 175, 397, 14, 14, colors[i % colors.length]) + text(left + 22 + i * 175, 410, s.name, 'start', fg, 17) })
+  }
+  if (chart.unit) shapes += text(1095, 428, chart.unit, 'end', muted, 16)
+  // Accessible data remains available even when SVG cannot be viewed.
+  const table = '<table class="chart-data"><caption>' + esc(chart.caption || 'Chart data') + '</caption><thead><tr><th></th>' + chart.series.map(s => `<th>${esc(s.name)}</th>`).join('') + '</tr></thead><tbody>'
+    + chart.categories.map((c, i) => `<tr><th>${esc(c)}</th>${chart.series.map(s => `<td>${s.values[i]}</td>`).join('')}</tr>`).join('') + '</tbody></table>'
+  return `<svg class="native-chart" viewBox="0 0 ${width} ${height}" role="img" aria-label="${esc(chart.caption || chart.kind + ' chart')}"><title>${esc(chart.caption || chart.kind)}</title>${shapes}</svg>${table}`
+}
+
+export function renderMediaHtml(slide, manifest, theme) {
+  const boxes = mediaBoxes(slide.layout)
+  let body = `<h2 class="media-title" style="${position(boxes.title)}">${esc(slide.title)}</h2>`
+  if (slide.layout === 'chart') {
+    body += `<div class="media-chart" style="${position(boxes.chart)}">${renderChartSvg(slide.chart, theme)}</div>`
+    if (slide.chart.caption) body += `<div class="media-caption" style="${position(boxes.caption)}">${esc(slide.chart.caption)}</div>`
+  } else {
+    const image = slide.image, asset = manifest.assets?.[image?.assetId]
+    body += `<figure class="media-image" style="${position(boxes.image)}"><img src="${esc(asset?.data ?? '')}" alt="${esc(image?.alt)}" style="object-fit:${image?.fit || 'contain'}"/></figure>`
+    if (boxes.body) body += `<div class="media-body" style="${position(boxes.body)}">${slide.subtitle ? `<p>${esc(slide.subtitle)}</p>` : ''}${slide.bullets?.length ? `<ul>${slide.bullets.map(b => `<li>${esc(b)}</li>`).join('')}</ul>` : ''}</div>`
+    if (image?.caption) body += `<div class="media-caption" style="${position(boxes.caption)}">${esc(image.caption)}</div>`
+  }
+  return `<div class="media-canvas">${body}</div>`
+}
+
+export const MEDIA_CSS = `
+.slide--image,.slide--image-left,.slide--image-right,.slide--chart{padding:0;align-items:center}
+.slide--image .slide-inner,.slide--image-left .slide-inner,.slide--image-right .slide-inner,.slide--chart .slide-inner{width:100%;display:flex;justify-content:center}
+.media-canvas{position:relative;width:min(100vw,177.7778vh);height:min(100vh,56.25vw);container-type:inline-size}
+.media-title,.media-image,.media-body,.media-chart,.media-caption{position:absolute;margin:0;max-width:none;box-sizing:border-box}
+.media-title{font-size:3.54cqw;line-height:1.17;overflow-wrap:anywhere}
+.media-image img{width:100%;height:100%;display:block}
+.media-body{font-size:2.083cqw;line-height:1.45;overflow-wrap:anywhere}
+.media-body p{margin:0 0 1.2em}.media-body ul{margin:0;padding-left:1.1em}.media-body li{margin-bottom:.6em}
+.media-caption{color:var(--muted);font-size:1.4cqw;line-height:1.2}
+.native-chart{width:100%;height:100%;font-family:var(--font-body)}
+.chart-data{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
+.brand-logo{position:absolute;right:6.2%;top:1.6%;width:7.1%;height:5.6%;object-fit:contain;pointer-events:none}
+.brand-footer{position:absolute;left:6.4%;bottom:3.4%;max-width:69%;font-size:clamp(10px,1vw,15px);color:var(--muted)}
+body.printing .brand-footer{display:block}
+`