@codename/deck 0.0.0-stage → 0.1.0

package/src/pptx.js

@@ -0,0 +1,310 @@
+// A deck as a PowerPoint file to change in PowerPoint, Keynote or Google Slides: each layout a
+// slide layout of its own (a master, in PptxGenJS's words) with a placeholder for its title and
+// each of its slots, so a slide added there looks like the deck's; words as PowerPoint's own text,
+// a list's levels as its levels; a table as a table; a chart of bars, lines, areas, pies, rings,
+// points or a radar as PowerPoint's own chart, its numbers in the file to change; anything else (a
+// diagram, another chart, a picture) as a picture; the speaker's notes as notes; each slide's
+// transition as PowerPoint's (Morph where it has one, a fade where it hasn't); the look's colours
+// as the file's theme. Read from the deck as drawn, each box where the browser put it, so the file
+// looks like the slides, in the scheme shown. PptxGenJS (with its JSZip) is the host's to load.
+
+import { labelOf } from './kit.js'
+
+const W = 13.333, H = 7.5
+const TEXT = 'h1, h2, h3, h4, h5, h6, .deck-h, p, ul, ol, blockquote'
+
+/** @param {string} value rgb(…) or #… @returns {string} six hex digits */
+function hexOf(value) {
+  const m = /rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)/.exec(value)
+  if (m) return [m[1], m[2], m[3]].map((n) => Math.round(Number(n)).toString(16).padStart(2, '0')).join('').toUpperCase()
+  return value.replace('#', '').toUpperCase().slice(0, 6) || '000000'
+}
+/** @param {string} value */
+const opaque = (value) => !/rgba\([^)]*,\s*0\)|transparent/.test(value)
+
+/**
+ * @param {import('./deck.js').DeckView} view
+ * @param {{ PptxGenJS: any, JSZip: any }} libraries
+ * @returns {Promise<{ blob: Blob, report: { slides: number, charts: number, pictures: number, tables: number, placeholders: number } }>}
+ */
+export async function toPptx(view, { PptxGenJS, JSZip }) {
+  const pres = new PptxGenJS()
+  pres.layout = 'LAYOUT_WIDE'
+  pres.title = view.deck.slides[0]?.title ?? ''
+  pres.rtlMode = view.dir === 'rtl'
+  const rootStyle = getComputedStyle(view.root)
+  const firstFont = (/** @type {string} */ stack) => stack.split(',').map((f) => f.trim().replace(/^["']|["']$/g, '')).find((f) => !/^(ui-|system-ui|-apple|sans-serif|serif|monospace)/.test(f)) ?? 'Arial'
+  pres.theme = { headFontFace: firstFont(rootStyle.getPropertyValue('--deck-heading')), bodyFontFace: firstFont(rootStyle.getPropertyValue('--deck-body')) }
+  const report = { slides: 0, charts: 0, pictures: 0, tables: 0, placeholders: 0 }
+  const rtl = view.dir === 'rtl'
+  const slides = view.slides()
+  const masters = new Map()
+  const transitions = []
+
+  for (const [i, element] of slides.entries()) {
+    const box = element.getBoundingClientRect()
+    const sx = W / box.width
+    const place = (/** @type {Element} */ el) => {
+      const r = el.getBoundingClientRect()
+      return { x: (r.left - box.left) * sx, y: (r.top - box.top) * sx, w: r.width * sx, h: r.height * sx }
+    }
+    // Words as wide as their slot, never as their line: PowerPoint sets type a little wider than a browser.
+    const across = (/** @type {Element} */ el) => {
+      const slot = el.closest('.deck-slot') ?? el
+      const { x, w } = place(slot), { y, h } = place(el)
+      const pad = getComputedStyle(slot)
+      const start = parseFloat(pad.paddingInlineStart) * sx, end = parseFloat(pad.paddingInlineEnd) * sx
+      return { x: x + (rtl ? end : start), y, w: w - start - end, h: h * 1.08 }
+    }
+    // Where a layout centres its words, PowerPoint's box centres them too.
+    const anchor = (/** @type {Element} */ slot) => (getComputedStyle(slot).justifyContent === 'center' ? 'middle' : 'top')
+    const pt = (/** @type {number} */ px) => Math.round(px * sx * 72 * 10) / 10
+    const style = getComputedStyle(element)
+    const layout = element.dataset.layout ?? 'default'
+    const slots = /** @type {HTMLElement[]} */ ([...element.querySelectorAll('.deck-slot')])
+    const firstBlock = slots[0]?.firstElementChild
+    const title = firstBlock && firstBlock.matches('h1, h2, h3, .deck-h') ? firstBlock : null
+
+    // One master a layout, its placeholders where the first slide of it has its title and slots.
+    // Named as the kit names the layout, in the deck's language, so PowerPoint's Layout menu reads it.
+    const definition = view.kit.layouts[layout]
+    const masterName = `${definition ? labelOf(definition, layout, view.lang) : layout}${element.classList.contains('deck-class-invert') ? ' (dark)' : ''}`
+    if (!masters.has(masterName)) {
+      const objects = []
+      if (title) objects.push({ placeholder: { options: { name: 'title', type: 'title', ...across(title), valign: 'bottom', margin: 0, fontFace: pres.theme.headFontFace, color: hexOf(getComputedStyle(title).color), align: rtl ? 'right' : 'left' }, text: '' } })
+      for (const slot of slots) {
+        const r = place(slot)
+        const top = title && slot === slots[0] ? place(title).y + place(title).h : r.y
+        const inner = slot.firstElementChild && slot.firstElementChild !== title ? across(slot.firstElementChild) : { x: r.x, w: r.w }
+        objects.push({ placeholder: { options: { name: `body-${slot.dataset.slot}`, type: 'body', x: inner.x, y: top + 0.08, w: inner.w, h: Math.max(0.3, r.y + r.h - top - 0.08), margin: 0, valign: anchor(slot), color: hexOf(getComputedStyle(slot).color) }, text: '' } })
+      }
+      pres.defineSlideMaster({
+        title: masterName, background: { color: hexOf(style.backgroundColor) }, objects,
+        slideNumber: definition?.numbered !== false ? { x: rtl ? 0.3 : W - 0.9, y: H - 0.55, w: 0.6, h: 0.3, fontSize: 10, color: hexOf(rootStyle.getPropertyValue('--deck-muted').trim() || '#666666') } : undefined,
+      })
+      masters.set(masterName, new Set(objects.map((o) => o.placeholder.options.name)))
+    }
+    const names = masters.get(masterName)
+    const slide = pres.addSlide({ masterName })
+    report.slides++
+
+    const background = element.querySelector('.deck-image')
+    if (background) {
+      const url = /url\("?(.*?)"?\)/.exec(getComputedStyle(background).backgroundImage)?.[1]
+      const data = url && await pictureOf(url, background.clientWidth * 2, background.clientHeight * 2, true)
+      if (data) { slide.addImage({ data, ...place(background) }); report.pictures++ }
+    }
+    if (title && names.has('title')) {
+      slide.addText(runs(title, { pt, rtl, lang: view.lang }), { placeholder: 'title' })
+      report.placeholders++
+    }
+    for (const slot of slots) {
+      const blocks = [...slot.children].filter((child) => child !== title)
+      const textOnly = blocks.length > 0 && blocks.every((child) => child.matches(TEXT))
+      if (textOnly && names.has(`body-${slot.dataset.slot}`)) {
+        slide.addText(blocks.flatMap((block) => runs(block, { pt, rtl, lang: view.lang })), { placeholder: `body-${slot.dataset.slot}`, valign: anchor(slot), ...(spaced(slot)) })
+        report.placeholders++
+        continue
+      }
+      for (const block of blocks) {
+        const at = place(block)
+        if (block.matches(TEXT)) slide.addText(runs(block, { pt, rtl, lang: view.lang }), { ...across(block), valign: 'top', margin: 0, ...(spaced(slot)) })
+        else if (block.matches('pre')) {
+          slide.addText(block.textContent?.replace(/\n$/, '') ?? '', { ...at, fontFace: 'Consolas', fontSize: pt(parseFloat(getComputedStyle(block).fontSize)), color: hexOf(getComputedStyle(block).color), fill: { color: hexOf(getComputedStyle(block).backgroundColor) }, valign: 'top', margin: 6, rtlMode: false, align: 'left' })
+        } else if (block.matches('.deck-table')) {
+          table(slide, block, at, { pt, rtl, lang: view.lang })
+          report.tables++
+        } else if (block.matches('.deck-echarts') && /** @type {any} */ (block).chart) {
+          const chart = /** @type {any} */ (block).chart
+          if (nativeChart(pres, slide, chart, at, { pt, rtl, lang: view.lang, ink: hexOf(style.color) })) report.charts++
+          else { slide.addImage({ data: await pictureOf(`data:image/svg+xml;charset=utf-8,${encodeURIComponent(chart.renderToSVGString())}`, at.w / sx * 2, at.h / sx * 2), ...at }); report.pictures++ }
+        } else {
+          const img = block.querySelector('img')
+          if (img) {
+            const data = await pictureOf(img.src, img.clientWidth * 2, img.clientHeight * 2)
+            if (data) { slide.addImage({ data, ...place(img), altText: img.alt }); report.pictures++ }
+          }
+        }
+      }
+    }
+    const notes = view.deck.slides[i]?.notes
+    if (notes) slide.addNotes(notes)
+    const settings = view.deck.slides[i]?.settings ?? {}
+    transitions.push(String(settings.transition ?? view.deck.settings.transition ?? 'none').split('|')[0].trim())
+  }
+
+  // What PptxGenJS doesn't write: each slide's transition, and the look's colours as the theme.
+  const zip = await JSZip.loadAsync(await pres.write({ outputType: 'arraybuffer', compression: true }))
+  for (const [i, kind] of transitions.entries()) {
+    const path = `ppt/slides/slide${i + 1}.xml`
+    const xml = await zip.file(path)?.async('string')
+    if (!xml || kind === 'none') continue
+    zip.file(path, xml.replace(/<\/p:clrMapOvr>|(?=<p:timing|<\/p:sld>)/, (/** @type {string} */ found) => `${found}${transitionXml(kind, rtl)}`))
+  }
+  const theme = await zip.file('ppt/theme/theme1.xml')?.async('string')
+  if (theme) {
+    const colour = (/** @type {string} */ name) => hexOf(rootStyle.getPropertyValue(`--deck-${name}`).trim())
+    const series = [colour('fill'), ...[2, 3, 4, 5, 6].map((n) => colour(`series-${n}`))]
+    const scheme = `<a:clrScheme name="Deck"><a:dk1><a:srgbClr val="${colour('ink')}"/></a:dk1><a:lt1><a:srgbClr val="${colour('paper')}"/></a:lt1><a:dk2><a:srgbClr val="${colour('ink')}"/></a:dk2><a:lt2><a:srgbClr val="${colour('soft')}"/></a:lt2>${series.map((c, n) => `<a:accent${n + 1}><a:srgbClr val="${c}"/></a:accent${n + 1}>`).join('')}<a:hlink><a:srgbClr val="${colour('primary')}"/></a:hlink><a:folHlink><a:srgbClr val="${colour('primary')}"/></a:folHlink></a:clrScheme>`
+    zip.file('ppt/theme/theme1.xml', theme.replace(/<a:clrScheme[\s\S]*?<\/a:clrScheme>/, scheme))
+  }
+  const blob = await zip.generateAsync({ type: 'blob', compression: 'DEFLATE', mimeType: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' })
+  return { blob, report }
+}
+
+/** A slot's paragraphs' spacing, from the space under its first block. @param {HTMLElement} slot */
+function spaced(slot) {
+  const first = slot.firstElementChild
+  const after = first ? parseFloat(getComputedStyle(first).marginBlockEnd) : 0
+  return { paraSpaceAfter: Math.round(after * 0.5) }
+}
+
+/**
+ * A block's words as PowerPoint's runs: each paragraph or list item ends its line; bold, italics,
+ * code and links kept; a list's level as its indent level.
+ * @param {Element} block @param {{ pt: (px: number) => number, rtl: boolean, lang: string }} how @returns {any[]}
+ */
+function runs(block, how) {
+  /** @type {any[]} */
+  const out = []
+  const paragraph = (/** @type {Element} */ el, /** @type {Record<string, any>} */ extra) => {
+    const style = getComputedStyle(el)
+    const base = { fontSize: how.pt(parseFloat(style.fontSize)), color: hexOf(style.color), bold: Number(style.fontWeight) >= 600, lang: how.lang, rtlMode: how.rtl, align: style.textAlign === 'center' ? 'center' : how.rtl ? 'right' : 'left', ...extra }
+    const pieces = inlineRuns(el, base)
+    if (!pieces.length) return
+    pieces[pieces.length - 1].options.breakLine = true
+    out.push(...pieces)
+  }
+  const list = (/** @type {Element} */ el, /** @type {number} */ level) => {
+    let n = 0
+    for (const li of el.children) {
+      n++
+      const nested = [...li.children].filter((c) => c.matches('ul, ol'))
+      const clone = /** @type {Element} */ (li.cloneNode(true))
+      for (const c of [...clone.children]) if (c.matches('ul, ol, input')) c.remove()
+      li.after(clone)
+      paragraph(clone, { bullet: el.tagName === 'OL' ? { type: 'number', startAt: n === 1 ? Number(el.getAttribute('start') ?? 1) : undefined } : true, indentLevel: level })
+      clone.remove()
+      for (const sub of nested) list(sub, level + 1)
+    }
+  }
+  if (block.matches('ul, ol')) list(block, 0)
+  else if (block.matches('blockquote')) for (const p of block.children) paragraph(p, { italic: getComputedStyle(p).fontStyle === 'italic' })
+  else paragraph(block, {})
+  return out
+}
+
+/** @param {Node} node @param {Record<string, any>} base @returns {any[]} */
+function inlineRuns(node, base) {
+  /** @type {any[]} */
+  const out = []
+  const walk = (/** @type {Node} */ n, /** @type {Record<string, any>} */ options) => {
+    if (n.nodeType === Node.TEXT_NODE) {
+      const text = (n.textContent ?? '').replace(/\s+/g, ' ')
+      if (text) out.push({ text, options: { ...options } })
+      return
+    }
+    if (!(n instanceof HTMLElement)) return
+    if (n.tagName === 'BR') { if (out.length) out[out.length - 1].options.breakLine = true; return }
+    const own = { ...options }
+    if (n.matches('strong, b')) { own.bold = true; own.color = hexOf(getComputedStyle(n).color) }
+    if (n.matches('em, i')) own.italic = true
+    if (n.matches('del, s')) own.strike = 'sngStrike'
+    if (n.matches('code')) own.fontFace = 'Consolas'
+    if (n.matches('a[href]')) own.hyperlink = { url: n.getAttribute('href') }
+    for (const child of n.childNodes) walk(child, own)
+  }
+  for (const child of node.childNodes) walk(child, base)
+  if (out.length) { out[0].text = out[0].text.trimStart(); out[out.length - 1].text = out[out.length - 1].text.trimEnd() }
+  return out.filter((run) => run.text)
+}
+
+/** @param {any} slide @param {Element} block @param {{ x: number, y: number, w: number, h: number }} at @param {{ pt: (px: number) => number, rtl: boolean, lang: string }} how */
+function table(slide, block, at, how) {
+  const rows = [...block.querySelectorAll('tr')].map((tr) => [...tr.children].map((cell) => {
+    const style = getComputedStyle(cell)
+    const align = cell.getAttribute('data-align')
+    return { text: cell.textContent?.trim() ?? '', options: {
+      bold: cell.tagName === 'TH', fontSize: how.pt(parseFloat(style.fontSize)), color: hexOf(style.color), lang: how.lang, rtlMode: how.rtl,
+      align: align === 'center' ? 'center' : (align === 'right') !== how.rtl ? 'right' : 'left',
+      border: [{ type: 'none' }, { type: 'none' }, { type: 'solid', pt: cell.tagName === 'TH' ? 1.5 : 0.75, color: hexOf(style.borderBlockEndColor) }, { type: 'none' }],
+    } }
+  }))
+  const widths = [...(block.querySelector('tr')?.children ?? [])].map((cell) => cell.getBoundingClientRect().width)
+  const total = widths.reduce((a, b) => a + b, 0) || 1
+  slide.addTable(how.rtl ? rows.map((r) => r.reverse()) : rows, { ...at, colW: (how.rtl ? widths.reverse() : widths).map((w) => (w / total) * at.w), margin: 0.06 })
+}
+
+/**
+ * An ECharts chart as PowerPoint's own, when it is one PowerPoint draws: bars, lines, areas, a pie
+ * or a ring, points, a radar; false when it isn't. @returns {boolean}
+ */
+function nativeChart(/** @type {any} */ pres, /** @type {any} */ slide, /** @type {any} */ chart, /** @type {{ x: number, y: number, w: number, h: number }} */ at, /** @type {{ pt: (px: number) => number, rtl: boolean, lang: string, ink: string }} */ how) {
+  const option = chart.getOption()
+  const series = /** @type {any[]} */ (option.series ?? [])
+  if (!series.length) return false
+  const types = new Set(series.map((s) => s.type))
+  const colours = /** @type {string[]} */ (option.color ?? []).map(hexOf)
+  const value = (/** @type {any} */ v) => (Array.isArray(v) ? Number(v.at(-1)) : typeof v === 'object' && v !== null ? Number(v.value) : Number(v))
+  const common = { ...at, showLegend: series.length > 1 || types.has('pie'), legendPos: 'b', legendFontSize: 12, legendColor: how.ink, chartColors: colours, showTitle: Boolean(option.title?.[0]?.text), title: option.title?.[0]?.text, titleFontSize: 16, titleColor: how.ink, catAxisLabelColor: how.ink, valAxisLabelColor: how.ink, dataLabelColor: how.ink, lang: how.lang }
+  if (types.size === 1 && (types.has('pie'))) {
+    const pie = series[0]
+    const ring = Array.isArray(pie.radius) && parseFloat(pie.radius[0]) > 0
+    slide.addChart(ring ? pres.charts.DOUGHNUT : pres.charts.PIE, [{ name: pie.name ?? '', labels: pie.data.map((/** @type {any} */ d) => d.name), values: pie.data.map(value) }], { ...common, showPercent: true, showLegend: true, holeSize: ring ? 55 : undefined })
+    return true
+  }
+  if ([...types].every((t) => t === 'bar' || t === 'line')) {
+    const horizontal = option.yAxis?.[0]?.type === 'category'
+    const labels = (horizontal ? option.yAxis : option.xAxis)?.[0]?.data ?? []
+    const of = (/** @type {any} */ s) => [{ name: s.name ?? '', labels: labels.map(String), values: s.data.map(value) }]
+    const kind = (/** @type {any} */ s) => (s.type === 'bar' ? pres.charts.BAR : s.areaStyle ? pres.charts.AREA : pres.charts.LINE)
+    const axes = { catAxisLabelFontSize: 11, valAxisLabelFontSize: 11, valGridLine: { color: 'D9D9D9', size: 0.5 }, catAxisOrientation: how.rtl && !horizontal ? 'maxMin' : 'minMax', valAxisLabelFormatCode: '#,##0' }
+    if (types.size === 1) {
+      const data = series.flatMap(of)
+      slide.addChart(kind(series[0]), data, { ...common, ...axes, barDir: horizontal ? 'bar' : 'col', barGrouping: series.some((s) => s.stack) ? 'stacked' : 'clustered', lineDataSymbol: 'circle', lineSize: 2 })
+    } else slide.addChart(series.map((s) => ({ type: kind(s), data: of(s), options: { barDir: horizontal ? 'bar' : 'col', chartColors: [colours[series.indexOf(s) % colours.length]] } })), { ...common, ...axes })
+    return true
+  }
+  if (types.size === 1 && types.has('scatter')) {
+    const points = series[0].data.map((/** @type {any} */ d) => (Array.isArray(d) ? d : [d.value?.[0], d.value?.[1]]))
+    slide.addChart(pres.charts.SCATTER, [{ name: 'X', values: points.map((/** @type {any[]} */ p) => p[0]) }, { name: series[0].name ?? 'Y', values: points.map((/** @type {any[]} */ p) => p[1]) }], { ...common, lineSize: 0, lineDataSymbolSize: 8 })
+    return true
+  }
+  if (types.size === 1 && types.has('radar')) {
+    const indicators = option.radar?.[0]?.indicator ?? []
+    slide.addChart(pres.charts.RADAR, series[0].data.map((/** @type {any} */ d) => ({ name: d.name ?? '', labels: indicators.map((/** @type {any} */ i) => i.name), values: d.value })), { ...common, showLegend: true, radarStyle: 'standard' })
+    return true
+  }
+  return false
+}
+
+/** PowerPoint's transition for Slidev's name: Morph (with a fade where it isn't known), a fade, a push. @param {string} kind @param {boolean} rtl */
+function transitionXml(kind, rtl) {
+  const push = (/** @type {string} */ dir) => `<p:transition spd="med"><p:push dir="${dir}"/></p:transition>`
+  if (kind === 'view-transition' || kind === 'morph') return '<mc:AlternateContent xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"><mc:Choice xmlns:p159="http://schemas.microsoft.com/office/powerpoint/2015/09/main" Requires="p159"><p:transition spd="slow"><p159:morph option="byObject"/></p:transition></mc:Choice><mc:Fallback><p:transition spd="slow"><p:fade/></p:transition></mc:Fallback></mc:AlternateContent>'
+  if (kind === 'slide-left') return push(rtl ? 'r' : 'l')
+  if (kind === 'slide-right') return push(rtl ? 'l' : 'r')
+  if (kind === 'slide-up') return push('u')
+  if (kind === 'slide-down') return push('d')
+  return '<p:transition spd="med"><p:fade/></p:transition>'
+}
+
+/** A picture's data as PNG, drawn at a size; null when it can't be read (another site's, unshared). @param {string} src @param {number} w @param {number} h @param {boolean} [cover] */
+async function pictureOf(src, w, h, cover = false) {
+  try {
+    const img = new Image()
+    img.crossOrigin = 'anonymous'
+    img.src = src
+    await img.decode()
+    const canvas = document.createElement('canvas')
+    canvas.width = Math.max(1, Math.round(w))
+    canvas.height = Math.max(1, Math.round(h))
+    const ctx = /** @type {CanvasRenderingContext2D} */ (canvas.getContext('2d'))
+    const iw = img.naturalWidth || w, ih = img.naturalHeight || h
+    const scale = cover ? Math.max(canvas.width / iw, canvas.height / ih) : Math.min(canvas.width / iw, canvas.height / ih)
+    ctx.drawImage(img, (canvas.width - iw * scale) / 2, (canvas.height - ih * scale) / 2, iw * scale, ih * scale)
+    return canvas.toDataURL('image/png')
+  } catch {
+    return null
+  }
+}

package/src/render.js

@@ -0,0 +1,242 @@
+// A slide drawn from its Markdown: marked's tokens made into elements with the DOM's own calls, so
+// nothing here needs innerHTML, a style attribute or a Trusted Types policy, and a page under any
+// policy can draw a deck. Each block that can be changed by hand says where its words are in the
+// source (data-edit, offsets), so an edit made on the slide goes back into the Markdown. HTML a
+// deck holds is not drawn: Slidev's <v-click> and <v-clicks> become steps, <br> a line break, and
+// any other tag gives up its words alone. ```echarts and ```mermaid go to the host's drawers.
+import { Lexer } from 'marked'
+import { STANDARD, inferLayout, ALIASES } from './kit.js'
+
+/** @typedef {import('./parse.js').Slide} Slide */
+/** @typedef {import('./parse.js').Slot} Slot */
+/** @typedef {(element: HTMLElement, source: string) => void | Promise<void>} Drawer */
+/** @typedef {{ blocks: Record<string, Drawer>, resolve: (src: string) => string | null, headings: 'real' | 'aria', number: (n: number) => string, total: number, kit: import('./kit.js').Kit }} Context */
+
+/**
+ * @param {string} tag @param {Record<string, string | number | boolean | undefined>} [attributes]
+ * @param {(Node | string | null | undefined | false)[]} [children]
+ */
+export function h(tag, attributes = {}, children = []) {
+  const element = document.createElement(tag)
+  for (const [name, value] of Object.entries(attributes)) if (value !== undefined && value !== false) element.setAttribute(name, value === true ? '' : String(value))
+  for (const child of children) if (child || child === '') element.append(child)
+  return element
+}
+
+/** An address a slide may show: the web's, a picture held in the file, or one beside it. @param {string} href */
+export function safeUrl(href) {
+  const url = String(href ?? '').trim()
+  if (/^(https?:|mailto:|blob:|#)/i.test(url) || /^data:image\/(png|jpe?g|gif|webp|avif|svg\+xml);/i.test(url)) return url
+  if (/^[a-z][\w+.-]*:/i.test(url)) return null
+  return url
+}
+
+/**
+ * A slide, laid out by its layout, with its slots, steps and number.
+ * @param {Slide} slide @param {Context} context @returns {{ element: HTMLElement, steps: number }}
+ */
+export function renderSlide(slide, context) {
+  // The layout the slide names, by its name or a name brains give it, else the one its content suits.
+  const asked = String(slide.settings.layout ?? '').trim().toLowerCase()
+  const layout = context.kit.layouts[asked] ? asked : context.kit.layouts[ALIASES[asked]] ? ALIASES[asked] : inferLayout(slide)
+  const definition = context.kit.layouts[layout] ?? STANDARD.layouts.default
+  const classes = String(slide.settings.class ?? '').split(/\s+/).filter((name) => ['invert', 'text-center', 'text-left'].includes(name))
+  const counter = { step: 0 }
+  const slots = new Map(slide.slots.map((slot) => [slot.name, slot]))
+  const names = definition.slots
+  const section = h('section', {
+    class: ['deck-slide', `deck-layout-${layout}`, ...classes.map((name) => `deck-class-${name}`)].join(' '),
+    'data-index': slide.index, 'data-layout': layout, 'data-paper': definition.paper, 'data-align': definition.align, 'data-justify': definition.justify, 'data-title': definition.title,
+    'aria-roledescription': 'slide', role: 'group',
+  })
+  // Its grid, from the layout's definition, through the CSSOM: areas named s-<slot>, as `default` is no name CSS allows.
+  const canvas = h('div', { class: 'deck-canvas' })
+  canvas.style.setProperty('grid-template-areas', definition.areas.map((row) => `"${row.map((cell) => (cell === '.' ? '.' : `s-${cell}`)).join(' ')}"`).join(' '))
+  canvas.style.setProperty('grid-template-columns', definition.columns.join(' '))
+  canvas.style.setProperty('grid-template-rows', definition.rows.join(' '))
+  section.append(canvas)
+  const image = slide.settings.image ?? slide.settings.background
+  if (typeof image === 'string' && ['image-left', 'image-right', 'image', 'cover'].includes(layout)) {
+    const url = context.resolve(image)
+    if (url) {
+      const picture = h('div', { class: 'deck-image', role: 'img', 'aria-label': String(slide.settings.alt ?? '') || undefined })
+      picture.style.setProperty('--deck-image', `url("${url.replace(/["\\\n]/g, encodeURIComponent)}")`)
+      canvas.append(picture)
+      section.classList.add('has-image')
+    }
+  }
+  for (const name of names) {
+    const slot = slots.get(name)
+    const element = h('div', { class: 'deck-slot', 'data-slot': name }, slot ? blocks(slot, context, counter) : [])
+    element.style.setProperty('grid-area', `s-${name}`)
+    canvas.append(element)
+  }
+  // Slots a layout doesn't have still show, under the rest, rather than being lost.
+  for (const slot of slide.slots) if (!names.includes(slot.name)) canvas.append(h('div', { class: 'deck-slot', 'data-slot': slot.name }, blocks(slot, context, counter)))
+  if (definition.numbered && slide.settings.paginate !== false) section.append(h('span', { class: 'deck-number', 'aria-hidden': 'true' }, [context.number(slide.index + 1)]))
+  return { element: section, steps: counter.step }
+}
+
+/** @param {Slot} slot @param {Context} context @param {{ step: number }} counter @returns {Node[]} */
+function blocks(slot, context, counter) {
+  const tokens = new Lexer({ gfm: true }).lex(slot.text)
+  /** @type {Node[]} */
+  const out = []
+  let at = slot.start, mode = /** @type {'' | 'click' | 'clicks'} */ ('')
+  for (const token of tokens) {
+    const start = at
+    at += token.raw.length
+    // Pandoc's fences: `::: incremental` shows its list a point a click, as <v-clicks> does; the others, nothing.
+    const fences = token.type === 'paragraph' ? token.raw.trim().split('\n').map((/** @type {string} */ line) => line.trim()) : []
+    if (fences.length && fences.every((/** @type {string} */ line) => /^:{3,}/.test(line))) {
+      for (const fence of fences) {
+        if (/^:{3,}[ \t]*\{?[ \t]*\.?incremental\b/.test(fence)) mode = 'clicks'
+        else if (/^:{3,}\s*$/.test(fence) && mode === 'clicks') mode = ''
+      }
+      continue
+    }
+    if (token.type === 'html') {
+      const tag = /^\s*<(\/?)(v-clicks?|br)\b[^>]*>\s*$/i.exec(token.raw)
+      if (tag && tag[2] === 'br') out.push(h('br'))
+      else if (tag) mode = tag[1] ? '' : /** @type {'click' | 'clicks'} */ (tag[2].toLowerCase() === 'v-clicks' ? 'clicks' : 'click')
+      else if (/<li\b/i.test(token.raw)) {
+        // A list written as HTML, as brains write Slidev's steps (<li v-click>): its items' words, each
+        // a step when it asks to be one.
+        const list = h(/<ol\b/i.test(token.raw) ? 'ol' : 'ul', { dir: 'auto' })
+        for (const [, attrs, inner] of token.raw.matchAll(/<li\b([^>]*)>([\s\S]*?)(?=<\/li>|<li\b|<\/[ou]l>|$)/gi)) {
+          const words = inner.replace(/<!--[\s\S]*?-->/g, '').replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
+          if (!words) continue
+          const li = h('li', { dir: 'auto' }, [words])
+          if (/\bv-click\b/.test(attrs) || mode === 'clicks') step(li, ++counter.step)
+          list.append(li)
+        }
+        if (list.childElementCount) out.push(list)
+      } else {
+        const words = token.raw.replace(/<!--[\s\S]*?-->/g, '').replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
+        if (words) out.push(h('p', {}, [words]))
+      }
+      continue
+    }
+    const element = block(token, start, context, mode === 'clicks' ? counter : null)
+    if (!element) continue
+    if (mode === 'click' || (mode === 'clicks' && token.type !== 'list')) step(element, ++counter.step)
+    out.push(element)
+  }
+  return out
+}
+
+/** @param {Element} element @param {number} n */
+const step = (element, n) => { element.classList.add('deck-step'); element.setAttribute('data-step', String(n)) }
+
+/**
+ * @param {any} token @param {number} start where its raw starts in the source
+ * @param {Context} context @param {{ step: number } | null} stepped list items each a step
+ * @returns {HTMLElement | null}
+ */
+function block(token, start, context, stepped) {
+  switch (token.type) {
+    case 'heading': {
+      const head = /^\s*#{1,6}[ \t]+/.exec(token.raw)
+      const edit = head ? range(start + head[0].length, start + token.raw.replace(/\s*#*\s*$/, '').length) : undefined
+      return context.headings === 'real'
+        ? h(`h${token.depth}`, { dir: 'auto', 'data-edit': edit }, inline(token.tokens, context))
+        : h('p', { class: `deck-h deck-h${token.depth}`, role: 'heading', 'aria-level': Math.min(6, token.depth + 2), dir: 'auto', 'data-edit': edit }, inline(token.tokens, context))
+    }
+    case 'paragraph': {
+      const lone = token.tokens.length === 1 && token.tokens[0].type === 'image'
+      return h('p', { dir: 'auto', class: lone ? 'deck-picture' : undefined, 'data-edit': lone ? undefined : range(start, start + token.raw.trimEnd().length) }, inline(token.tokens, context))
+    }
+    case 'text': return h('p', { dir: 'auto' }, inline(token.tokens ?? [{ type: 'text', text: token.text }], context))
+    // No dir=auto here: the browser would skip its paragraphs, which have their own, and find no letter.
+    case 'blockquote': return h('blockquote', {}, children(token.tokens, start, token.raw, context))
+    case 'list': {
+      let from = 0
+      const list = h(token.ordered ? 'ol' : 'ul', { start: token.ordered && token.start !== 1 ? token.start : undefined, class: token.items.some((/** @type {any} */ item) => item.task) ? 'deck-tasks' : undefined })
+      for (const item of token.items) {
+        const offset = token.raw.indexOf(item.raw, from)
+        from = offset + item.raw.length
+        const itemStart = start + Math.max(0, offset)
+        const marker = /^\s*(?:[-*+]|\d+[.)])\s+(?:\[[ xX]\]\s+)?/.exec(item.raw)
+        const simple = item.tokens.length === 1 && item.tokens[0].type === 'text' && !/\n\s*\S/.test(item.raw.trim().split('\n').slice(1).join('\n'))
+        const li = h('li', { dir: 'auto', 'data-edit': simple && marker ? range(itemStart + marker[0].length, itemStart + item.raw.trimEnd().length) : undefined }, [
+          item.task ? h('input', { type: 'checkbox', checked: item.checked, disabled: true, 'aria-label': item.text }) : null,
+          ...item.tokens.flatMap((/** @type {any} */ inner) => inner.type === 'text' ? inline(inner.tokens ?? [{ type: 'text', text: inner.text }], context)
+            : [block(inner, itemStart + Math.max(0, item.raw.indexOf(inner.raw)), context, null)]),
+        ])
+        if (stepped) step(li, ++stepped.step)
+        list.append(li)
+      }
+      return list
+    }
+    case 'code': {
+      const info = /^(\S*)\s*(?:\{([^}]*)\})?/.exec(token.lang ?? '') ?? []
+      const lang = (info[1] ?? '').toLowerCase()
+      const drawer = context.blocks[lang]
+      if (drawer) {
+        const box = h('div', { class: `deck-block deck-${lang}`, 'data-source': token.text })
+        box.append(h('pre', { class: 'deck-block-source', dir: 'ltr' }, [h('code', {}, [token.text])]))
+        queueMicrotask(() => Promise.resolve(drawer(box, token.text)).catch(() => box.classList.add('is-failed')))
+        return box
+      }
+      const marked = lines(info[2] ?? '')
+      const code = h('code', { class: lang ? `language-${lang}` : undefined })
+      for (const [i, line] of token.text.split('\n').entries()) code.append(h('span', { class: marked.has(i + 1) ? 'deck-line is-marked' : 'deck-line' }, [line, '\n']))
+      return h('pre', { dir: 'ltr', class: marked.size ? 'has-marks' : undefined, tabindex: 0 }, [code])
+    }
+    case 'table': {
+      const align = (/** @type {string | null} */ a) => a ?? undefined
+      return h('div', { class: 'deck-table' }, [h('table', {}, [
+        h('thead', {}, [h('tr', {}, token.header.map((/** @type {any} */ cell, /** @type {number} */ i) => h('th', { 'data-align': align(token.align[i]), dir: 'auto' }, inline(cell.tokens, context))))]),
+        h('tbody', {}, token.rows.map((/** @type {any[]} */ row) => h('tr', {}, row.map((cell, i) => h('td', { 'data-align': align(token.align[i]), dir: 'auto' }, inline(cell.tokens, context)))))),
+      ])])
+    }
+    default: return null
+  }
+}
+
+/** @param {any[]} tokens @param {number} start @param {string} raw @param {Context} context */
+function children(tokens, start, raw, context) {
+  let from = 0
+  return tokens.map((token) => {
+    const offset = raw.indexOf(token.raw, from)
+    from = Math.max(from, offset + token.raw.length)
+    return block(token, start + Math.max(0, offset), context, null)
+  })
+}
+
+/** Line numbers as Slidev marks them, `{2,4-5}`; `|` steps are read as all their lines at once. @param {string} text */
+function lines(text) {
+  const marked = new Set()
+  for (const part of text.split(/[,|]/)) {
+    const [a, b] = part.split('-').map((n) => parseInt(n, 10))
+    if (Number.isFinite(a)) for (let n = a; n <= (Number.isFinite(b) ? b : a); n++) marked.add(n)
+  }
+  return marked
+}
+
+/** @param {number} from @param {number} to */
+const range = (from, to) => (to > from ? `${from}-${to}` : undefined)
+
+/** @param {any[]} tokens @param {Context} context @returns {Node[]} */
+export function inline(tokens = [], context) {
+  return tokens.flatMap((token) => {
+    switch (token.type) {
+      case 'text': case 'escape': return token.tokens ? inline(token.tokens, context) : [token.text.replace(/&(amp|lt|gt|quot|#39);/g, (/** @type {string} */ _, /** @type {string} */ e) => ({ amp: '&', lt: '<', gt: '>', quot: '"', '#39': "'" })[/** @type {'amp'} */ (e)])]
+      case 'strong': return [h('strong', {}, inline(token.tokens, context))]
+      case 'em': return [h('em', {}, inline(token.tokens, context))]
+      case 'del': return [h('del', {}, inline(token.tokens, context))]
+      case 'codespan': return [h('code', {}, [token.text.replace(/&(amp|lt|gt|quot|#39);/g, (/** @type {string} */ _, /** @type {string} */ e) => ({ amp: '&', lt: '<', gt: '>', quot: '"', '#39': "'" })[/** @type {'amp'} */ (e)])])]
+      case 'br': return [h('br')]
+      case 'link': {
+        const href = safeUrl(token.href)
+        return href ? [h('a', { href, rel: 'noopener noreferrer', target: href.startsWith('#') ? undefined : '_blank' }, inline(token.tokens, context))] : inline(token.tokens, context)
+      }
+      case 'image': {
+        const src = context.resolve(token.href)
+        return src ? [h('img', { src, alt: token.text, loading: 'lazy' })] : [token.text]
+      }
+      case 'html': return /^<br\s*\/?>$/i.test(token.raw) ? [h('br')] : []
+      default: return token.text ? [token.text] : []
+    }
+  })
+}

package/src/repair.js

@@ -0,0 +1,51 @@
+// What brains get wrong when they write a deck, mended before it is read:
+// - a deck fenced as ```markdown, ```md, ```slidev or with nothing, three backticks around a
+//   chart's three (an inner block is closed by the next bare fence);
+// - a slide's settings written after an empty line (`---`, ``, `layout: fact`, `---`), which
+//   Slidev would show as words;
+// - <v-clicks> and </v-clicks> without the empty lines that keep the list a list;
+// - a chart fenced as ```json (an ECharts option: it has `series`);
+// - a slot's marker with words after it on its line (`::right:: The canal`).
+// Pure. Returns the deck and what was mended, so a test set can count both.
+
+const OUTER = /^(`{3,}|~{3,})[ \t]*(deck|slidev|markdown|md)?[ \t]*$/
+const KEYS = 'layout|transition|class|image|background|clicks|title|level|hide|zoom|theme|colorSchema|lang|themeConfig|paginate|alt'
+
+/** The deck an answer holds, or null. @param {string} answer @returns {{ source: string, mended: string[] } | null} */
+export function deckIn(answer) {
+  const lines = answer.replace(/\r\n?/g, '\n').split('\n')
+  /** @type {{ tag: string, body: string[] }[]} */
+  const found = []
+  for (let i = 0; i < lines.length; i++) {
+    const open = OUTER.exec(lines[i])
+    if (!open) continue
+    const fence = open[1]
+    let j = i + 1, inner = false
+    const body = []
+    for (; j < lines.length; j++) {
+      const line = lines[j].trimEnd()
+      if (!inner && line === fence) break
+      if (/^(`{3,}|~{3,})\s*\S/.test(line) && !inner) inner = true
+      else if (inner && /^(`{3,}|~{3,})\s*$/.test(line)) inner = false
+      body.push(lines[j])
+    }
+    found.push({ tag: open[2] ?? '', body })
+    i = j
+  }
+  const deck = found.find((f) => f.tag === 'deck') ?? found.find((f) => f.body.filter((l) => /^---\s*$/.test(l)).length >= 2)
+  if (!deck) return null
+  /** @type {string[]} */
+  const mended = []
+  if (deck.tag !== 'deck') mended.push(`fenced as ${deck.tag || 'nothing'}`)
+  let source = deck.body.join('\n')
+  const mend = (/** @type {string} */ what, /** @type {RegExp} */ pattern, /** @type {string} */ by) => {
+    const next = source.replace(pattern, by)
+    if (next !== source) { mended.push(what); source = next }
+  }
+  mend('settings after an empty line', new RegExp(`^---[ \\t]*\\n\\s*\\n((?:(?:${KEYS})\\s*:.*\\n(?:[ \\t]+\\S.*\\n)*)+)---[ \\t]*$`, 'gm'), '---\n$1---')
+  mend('steps without empty lines', /^[ \t]*(<\/?v-clicks?>)[ \t]*$/gm, '\n$1\n')
+  const charts = source.replace(/^```json[ \t]*\n([\s\S]*?)^```/gm, (block, body) => (body.includes('"series"') ? `\`\`\`echarts\n${body}\`\`\`` : block))
+  if (charts !== source) { mended.push('a chart fenced as json'); source = charts }
+  mend('words after a slot marker', /^::([\w-]+)::[ \t]+(\S.*)$/gm, '::$1::\n\n$2')
+  return { source, mended }
+}