@codename/deck 0.2.0 → 0.4.0

package/src/pptx.js

@@ -2,8 +2,11 @@
 // 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
+// points or a radar as PowerPoint's own chart, its numbers in the file to change; a mind map as
+// PowerPoint's own shapes, its words in boxes joined by curves; a figure (cards, key figures, a
+// timeline, chevrons, a programme, a pyramid, a bento, parts face to face or in a matrix, the
+// deck's contents) as PowerPoint's own shapes and boxes of words, where the slide has them; anything else (a
+// diagram, another chart, a picture) as a picture, a layout's art too, on its slide layout; 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.
@@ -14,19 +17,23 @@ const W = 13.333, H = 7.5
 // Words: a paragraph that is a picture alone on its line is the picture.
 const TEXT = 'h1, h2, h3, h4, h5, h6, .deck-h, p:not(.deck-picture), ul, ol, blockquote'
 
-/** @param {string} value rgb(…) or #… @returns {string} six hex digits */
+/** @param {string} value rgb(…), color(srgb …) 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()
+  const srgb = /color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/.exec(value)
+  if (srgb) return [srgb[1], srgb[2], srgb[3]].map((n) => Math.round(Number(n) * 255).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)
+/** A colour's alpha, from rgba(…, a) or color(srgb … / a), else 1. @param {string} value */
+const alphaOf = (value) => { const m = /rgba\((?:[^,]*,){3}\s*([\d.]+)\s*\)|\/\s*([\d.]+)\s*\)/.exec(value); return value === 'transparent' ? 0 : Number(m?.[1] ?? m?.[2] ?? 1) }
 
 /**
  * @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 } }>}
+ * @returns {Promise<{ blob: Blob, report: { slides: number, charts: number, pictures: number, tables: number, placeholders: number, maps: number, figures: number } }>}
  */
 export async function toPptx(view, { PptxGenJS, JSZip }) {
   const pres = new PptxGenJS()
@@ -36,7 +43,7 @@ export async function toPptx(view, { PptxGenJS, JSZip }) {
   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 report = { slides: 0, charts: 0, pictures: 0, tables: 0, placeholders: 0, maps: 0, figures: 0 }
   const rtl = view.dir === 'rtl'
   const slides = view.slides()
   const masters = new Map()
@@ -57,6 +64,21 @@ export async function toPptx(view, { PptxGenJS, JSZip }) {
       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 }
     }
+    // A chart as PowerPoint's own, else as a picture; a diagram or a picture as a picture.
+    const figure = async (/** @type {Element} */ block, /** @type {{ x: number, y: number, w: number, h: number }} */ at) => {
+      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++ }
+        return
+      }
+      const img = block.querySelector('img')
+      if (!img) return
+      // A slide's pictures are read as they come near the screen: one not read yet is read now, so that it has its size.
+      if (!img.complete) { img.loading = 'eager'; await img.decode().catch(() => {}) }
+      const data = await pictureOf(img.src, img.clientWidth * 2, img.clientHeight * 2)
+      if (data) { slide.addImage({ data, ...place(img), altText: img.alt }); report.pictures++ }
+    }
     // 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
@@ -72,6 +94,9 @@ export async function toPptx(view, { PptxGenJS, JSZip }) {
     const masterName = `${definition ? labelOf(definition, layout, view.lang) : layout}${element.classList.contains('deck-class-invert') ? ' (dark)' : ''}`
     if (!masters.has(masterName)) {
       const objects = []
+      // The layout's art, its layers as one picture on its paper behind the rest: a slide added in PowerPoint has it too.
+      const art = [...element.querySelectorAll('img.deck-art')].map((one) => /** @type {HTMLImageElement} */ (one).src), backdrop = art.length && await pictureOf(art, W * 150, H * 150, false, style.backgroundColor)
+      if (backdrop) { objects.push({ image: { data: backdrop, x: 0, y: 0, w: W, h: H } }); report.pictures++ }
       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)
@@ -98,6 +123,9 @@ export async function toPptx(view, { PptxGenJS, JSZip }) {
       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++ }
+      // The veil over it, as a quote has: the words read on it.
+      const veil = getComputedStyle(background, '::after')
+      if (veil.content !== 'none' && alphaOf(veil.backgroundColor) > 0) slide.addShape(pres.shapes.RECTANGLE, { ...place(background), fill: { color: hexOf(veil.backgroundColor), transparency: Math.round((1 - alphaOf(veil.backgroundColor)) * 100) }, line: { type: 'none' } })
     }
     if (title && names.has('title')) {
       slide.addText(runs(title, { pt, rtl, lang: view.lang }), { placeholder: 'title' })
@@ -119,19 +147,13 @@ export async function toPptx(view, { PptxGenJS, JSZip }) {
         } 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) {
-            // A slide's pictures are read as they come near the screen: one not read yet is read now, so that it has its size.
-            if (!img.complete) { img.loading = 'eager'; await img.decode().catch(() => {}) }
-            const data = await pictureOf(img.src, img.clientWidth * 2, img.clientHeight * 2)
-            if (data) { slide.addImage({ data, ...place(img), altText: img.alt }); report.pictures++ }
-          }
-        }
+        } else if (block.matches('.deck-mindmap')) {
+          await mindmap(pres, slide, /** @type {HTMLElement} */ (block), place, { pt, rtl, lang: view.lang }, figure)
+          report.maps++
+        } else if (block.matches('.deck-figure')) {
+          await drawing(pres, slide, block, place, { pt, rtl, lang: view.lang }, figure)
+          report.figures++
+        } else await figure(block, at)
       }
     }
     const notes = view.deck.slides[i]?.notes
@@ -159,6 +181,102 @@ export async function toPptx(view, { PptxGenJS, JSZip }) {
   return { blob, report }
 }
 
+/**
+ * A mind map as PowerPoint's own shapes, where the slide has them: each line a curve in its branch's colour, each of its
+ * words a box, filled and outlined as on the slide (the root, the first branches), its words as runs, a chart or a
+ * diagram in it as the slide's are.
+ * @param {any} pres @param {any} slide @param {HTMLElement} map @param {(el: Element) => { x: number, y: number, w: number, h: number }} place
+ * @param {{ pt: (px: number) => number, rtl: boolean, lang: string }} how
+ * @param {(block: Element, at: { x: number, y: number, w: number, h: number }) => Promise<void>} figure
+ */
+async function mindmap(pres, slide, map, place, how, figure) {
+  const plane = /** @type {HTMLElement} */ (map.querySelector('.deck-map-plane')), svg = /** @type {SVGSVGElement} */ (map.querySelector('.deck-map-lines'))
+  // The plane is shrunk to its box: its type and lines are so much smaller on the slide.
+  const scale = plane.getBoundingClientRect().width / (plane.offsetWidth || 1)
+  const area = place(svg), units = Number(svg.getAttribute('viewBox')?.split(' ')[2]) || 1, inch = area.w / units
+  for (const path of svg.querySelectorAll('path')) {
+    const [x1, y1, , , , , x2, y2] = (path.getAttribute('d')?.match(/-?[\d.]+/g) ?? []).map((n, i) => (i % 2 ? area.y : area.x) + Number(n) * inch)
+    const x = Math.min(x1, x2), y = Math.min(y1, y2), middle = (x1 + x2) / 2 - x
+    const stroke = getComputedStyle(path)
+    slide.addShape(pres.shapes.CUSTOM_GEOMETRY, {
+      x, y, w: Math.max(0.01, Math.abs(x2 - x1)), h: Math.max(0.01, Math.abs(y2 - y1)), line: { color: hexOf(stroke.stroke), width: Math.round(parseFloat(stroke.strokeWidth) * inch * 72 * 10) / 10 },
+      points: [{ x: x1 - x, y: y1 - y }, { x: x2 - x, y: y2 - y, curve: { type: 'cubic', x1: middle, y1: y1 - y, x2: middle, y2: y2 - y } }],
+    })
+  }
+  const small = { ...how, pt: (/** @type {number} */ px) => how.pt(px * scale) }
+  for (const node of /** @type {NodeListOf<HTMLElement>} */ (map.querySelectorAll('.deck-map-node'))) {
+    const style = getComputedStyle(node), at = place(node)
+    const align = style.textAlign === 'left' || style.textAlign === 'right' ? style.textAlign : style.textAlign === 'center' ? 'center' : how.rtl ? 'right' : 'left'
+    // A node holding a chart: its words alone, over its box, the chart where it is.
+    const label = node.matches('.has-block') ? node.querySelector('.deck-map-words') : node
+    const words = label ? runs(label, small).map((run) => ({ ...run, options: { ...run.options, align } })) : []
+    const border = parseFloat(style.borderTopWidth) || 0, pad = small.pt(parseFloat(style.paddingInlineStart) || 0) / 72
+    const fill = alphaOf(style.backgroundColor) > 0 ? { color: hexOf(style.backgroundColor), transparency: Math.round((1 - alphaOf(style.backgroundColor)) * 100) } : undefined
+    // PowerPoint sets type a little wider than a browser: words with no box grow away from their line.
+    const wide = fill || border ? at.w * 0.04 : at.w * 0.08
+    const x = align === 'left' ? at.x : align === 'right' ? at.x - wide : at.x - wide / 2
+    slide.addText(label === node && words.length ? words : '', {
+      x, y: at.y, w: at.w + wide, h: at.h, margin: [pad * 72, pad * 72, 0, 0], valign: 'middle', align, wrap: true,
+      ...(fill || border ? { shape: pres.shapes.ROUNDED_RECTANGLE, rectRadius: Math.min(at.h / 2, small.pt(parseFloat(style.borderTopLeftRadius) || 0) / 72), fill } : {}),
+      ...(border ? { line: { color: hexOf(style.borderTopColor), width: Math.round(small.pt(border) * 10) / 10 } } : {}),
+    })
+    if (label === node) continue
+    if (label) slide.addText(words, { ...place(label), margin: 0, valign: 'middle', align: 'center', wrap: true })
+    for (const block of node.querySelectorAll('.deck-block')) await figure(block, place(block))
+  }
+}
+
+/**
+ * A figure as PowerPoint's own shapes, as the slide draws them: each shape (a card, a chevron, a level, a dot, a rule) its
+ * box, or its polygon, filled and outlined as on the slide, a side's rule a line; then each of its words a box of words
+ * where they are, a table as a table, a chart or a diagram as the slide's are.
+ * @param {any} pres @param {any} slide @param {Element} root @param {(el: Element) => { x: number, y: number, w: number, h: number }} place
+ * @param {{ pt: (px: number) => number, rtl: boolean, lang: string }} how
+ * @param {(block: Element, at: { x: number, y: number, w: number, h: number }) => Promise<void>} figure
+ */
+async function drawing(pres, slide, root, place, how, figure) {
+  const inches = (/** @type {number} */ px) => how.pt(px) / 72
+  // In the order the slide stacks them: a medallion over the parts it sits between.
+  const layer = (/** @type {Element} */ el) => parseInt(getComputedStyle(el).zIndex, 10) || 0
+  for (const shape of [...root.querySelectorAll('.deck-shape')].sort((a, b) => layer(a) - layer(b))) {
+    const style = getComputedStyle(shape), at = place(shape), box = shape.getBoundingClientRect()
+    const fill = alphaOf(style.backgroundColor) > 0 ? { color: hexOf(style.backgroundColor), transparency: Math.round((1 - alphaOf(style.backgroundColor)) * 100) } : undefined
+    const sides = /** @type {const} */ (['Top', 'Right', 'Bottom', 'Left']).map((side) => ({ side, width: parseFloat(style[`border${side}Width`]) || 0, colour: style[`border${side}Color`] })).map((one) => ({ ...one, width: alphaOf(one.colour) > 0 ? one.width : 0 }))
+    const even = sides.every((one) => Math.abs(one.width - sides[0].width) < 0.1)
+    const line = even && sides[0].width > 0 ? { color: hexOf(sides[0].colour), width: Math.round(how.pt(sides[0].width) * 10) / 10 } : { type: 'none' }
+    const polygon = /^polygon\((.*)\)$/.exec(style.clipPath)?.[1]
+    if (polygon && (fill || even && sides[0].width)) {
+      // Its points as the slide clips it: lengths and shares of its box, calc() as CSS writes it.
+      const length = (/** @type {string} */ text, /** @type {number} */ size) => [...text.replace(/^calc\(|\)$/g, '').matchAll(/([+-]?)\s*([\d.]+)(%|px)?/g)].reduce((sum, [, sign, n, unit]) => sum + (sign === '-' ? -1 : 1) * (unit === '%' ? (Number(n) / 100) * size : inches(Number(n))), 0)
+      const points = polygon.split(/,(?![^(]*\))/).map((pair) => pair.trim().match(/calc\([^)]*\)|[-\d.]+(?:%|px)?/g) ?? []).map(([x = '0', y = '0']) => ({ x: length(x, at.w), y: length(y, at.h) }))
+      slide.addShape(pres.shapes.CUSTOM_GEOMETRY, { ...at, fill, line, points: [...points, { close: true }] })
+    } else if (fill || line.width) {
+      const radius = style.borderTopLeftRadius.endsWith('%') ? (Math.min(box.width, box.height) * parseFloat(style.borderTopLeftRadius)) / 100 : parseFloat(style.borderTopLeftRadius) || 0
+      const round = radius >= Math.min(box.width, box.height) / 2 - 0.5
+      const kind = round && Math.abs(box.width - box.height) < 1 ? pres.shapes.OVAL : radius > 0 ? pres.shapes.ROUNDED_RECTANGLE : pres.shapes.RECTANGLE
+      slide.addShape(kind, { ...at, fill, line, ...(kind === pres.shapes.ROUNDED_RECTANGLE ? { rectRadius: Math.min(at.h / 2, at.w / 2, inches(radius)) } : {}) })
+    }
+    // A rule on one side alone, as a line.
+    if (!even) for (const { side, width, colour } of sides) {
+      if (!width) continue
+      const thick = inches(width)
+      const edge = { Top: { x: at.x, y: at.y + thick / 2, w: at.w, h: 0 }, Bottom: { x: at.x, y: at.y + at.h - thick / 2, w: at.w, h: 0 }, Left: { x: at.x + thick / 2, y: at.y, w: 0, h: at.h }, Right: { x: at.x + at.w - thick / 2, y: at.y, w: 0, h: at.h } }[side]
+      slide.addShape(pres.shapes.LINE, { ...edge, line: { color: hexOf(colour), width: Math.round(how.pt(width) * 10) / 10 } })
+    }
+  }
+  for (const words of root.querySelectorAll('.deck-words')) {
+    if (words.parentElement?.closest('.deck-words') || !words.textContent?.trim()) continue
+    const style = getComputedStyle(words), at = place(words)
+    const align = style.textAlign === 'center' ? 'center' : style.textAlign === 'left' || style.textAlign === 'right' ? style.textAlign : (style.textAlign === 'end') !== how.rtl ? 'right' : 'left'
+    // PowerPoint sets type a little wider than a browser: words grow away from where they are aligned.
+    const wide = at.w * 0.08, x = align === 'left' ? at.x : align === 'right' ? at.x - wide : at.x - wide / 2
+    // Words in a shape of their own (a number in its circle) in its middle; others from their top, as their lines may be fewer.
+    slide.addText(runs(words, how).map((run) => ({ ...run, options: { ...run.options, align } })), { x, y: at.y, w: at.w + wide, h: at.h, margin: 0, valign: words.matches('.deck-shape') ? 'middle' : 'top', align, wrap: true })
+  }
+  for (const one of root.querySelectorAll('.deck-table')) table(slide, one, place(one), how)
+  for (const block of root.querySelectorAll('.deck-block')) await figure(block, place(block))
+}
+
 /** A slot's paragraphs' spacing, from the space under its first block. @param {HTMLElement} slot */
 function spaced(slot) {
   const first = slot.firstElementChild
@@ -296,21 +414,34 @@ function transitionXml(kind, rtl) {
   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) {
+/**
+ * A picture's data as PNG, drawn at a size, or a layout's art, its layers, as JPEG on its paper; null when it can't be read
+ * (another site's, unshared). @param {string | string[]} src @param {number} w @param {number} h @param {boolean} [cover] @param {string} [paper]
+ */
+async function pictureOf(src, w, h, cover = false, paper = '') {
   try {
-    const img = new Image()
-    img.crossOrigin = 'anonymous'
-    img.src = src
-    await img.decode()
+    const images = await Promise.all([src].flat().map(async (one) => {
+      const img = new Image()
+      img.crossOrigin = 'anonymous'
+      img.src = one
+      await img.decode()
+      return img
+    }))
+    const img = images[0]
     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')
+    if (!paper) ctx.drawImage(img, (canvas.width - iw * scale) / 2, (canvas.height - ih * scale) / 2, iw * scale, ih * scale)
+    else {
+      // Art, stretched over the slide as it is drawn there, on its paper, as a JPEG: photographs stay small.
+      ctx.fillStyle = paper
+      ctx.fillRect(0, 0, canvas.width, canvas.height)
+      for (const layer of images) ctx.drawImage(layer, 0, 0, canvas.width, canvas.height)
+    }
+    return canvas.toDataURL(paper ? 'image/jpeg' : 'image/png', 0.9)
   } catch {
     return null
   }

package/src/render.js

@@ -3,13 +3,19 @@
 // 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 { STANDARD, CORNERS, inferLayout, ALIASES } from './kit.js'
+// any other tag gives up its words alone. ```echarts and ```mermaid go to the host's drawers. A
+// layout that draws its lists as a mind map has a slot's lists merged into one map (mindmap.js);
+// one that draws them as a figure (cards, numbers, a timeline…), or sets its parts face to face or
+// in a matrix, or shows the deck's contents, has them drawn so (figures.js).
+import { STANDARD, CORNERS, layoutNameOf } from './kit.js'
+import { itemsOf, mergeItems, keyOf, watchMap } from './mindmap.js'
+import { entriesOf, boldLines, listFigure, partHeads, partsFigure, contentsFigure } from './figures.js'
+import { parseYaml } from './yaml.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, lex: (markdown: string) => any[], slide: string }} Context */
+/** @typedef {(element: HTMLElement, source: string, options?: Record<string, any>) => 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, lex: (markdown: string) => any[], slide: string, deck?: import('./parse.js').Deck }} Context */
 
 /**
  * @param {string} tag @param {Record<string, string | number | boolean | undefined>} [attributes]
@@ -36,18 +42,20 @@ export function safeUrl(href) {
  */
 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 layout = layoutNameOf(slide, context.kit)
   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 art = (definition.art ?? []).map((name) => context.kit.pictures?.[name]).filter(Boolean)
   const section = h('section', {
-    class: ['deck-slide', `deck-layout-${layout}`, ...classes.map((name) => `deck-class-${name}`)].join(' '),
+    class: ['deck-slide', `deck-layout-${layout}`, ...classes.map((name) => `deck-class-${name}`), ...(art.length ? ['has-art'] : [])].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': context.slide, role: 'group',
   })
+  // Its art, as its template draws it, layer over layer behind the rest.
+  for (const src of art) section.append(h('img', { class: 'deck-art', src, alt: '', 'aria-hidden': 'true' }))
   // 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(' '))
@@ -55,7 +63,7 @@ export function renderSlide(slide, context) {
   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)) {
+  if (typeof image === 'string' && ['image-left', 'image-right', 'image', 'cover', 'quote'].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 })
@@ -66,10 +74,13 @@ export function renderSlide(slide, context) {
   }
   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) : [])
+    const element = h('div', { class: 'deck-slot', 'data-slot': name }, slot ? blocks(slot, context, counter, definition.lists, definition.parts) : [])
     element.style.setProperty('grid-area', `s-${name}`)
     canvas.append(element)
   }
+  // The deck's contents, under the words of the slot they open.
+  const contents = definition.contents && contentsFigure(context, slide.index, Number(slide.settings.maxDepth) || undefined)
+  if (contents) canvas.querySelector(`.deck-slot[data-slot="${names[0]}"]`)?.append(contents)
   // 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)]))
@@ -84,15 +95,50 @@ export function renderSlide(slide, context) {
   return { element: section, steps: counter.step }
 }
 
-/** @param {Slot} slot @param {Context} context @param {{ step: number }} counter @returns {Node[]} */
-function blocks(slot, context, counter) {
+/**
+ * @param {Slot} slot @param {Context} context @param {{ step: number }} counter
+ * @param {import('./kit.js').List} [kind] how its lists are drawn @param {'none' | 'versus' | 'matrix'} [parted] how its parts are set @returns {Node[]}
+ */
+function blocks(slot, context, counter, kind = 'bullets', parted = 'none') {
   const tokens = context.lex(slot.text)
   /** @type {Node[]} */
   const out = []
+  // Its parts, each from its heading, and where they go; the blocks of the part being drawn go to it.
+  const heads = parted === 'none' ? new Set() : partHeads(tokens, parted === 'versus' ? 2 : 4)
+  /** @type {Node[][]} */
+  const parts = []
+  let sink = out, partsAt = -1
+  const mapped = kind === 'mindmap' && !heads.size, figured = kind !== 'bullets' && kind !== 'mindmap' && !heads.size
+  // A figure's entries, and where it goes.
+  /** @type {import('./figures.js').Entry[]} */
+  const entries = []
+  let figureAt = -1
+  // A mind map's lists, each with its heading when one comes just before it, and where the map goes.
+  /** @type {{ items: import('./mindmap.js').Item[], step: boolean }[]} */
+  const lists = []
+  let mapAt = -1, label = /** @type {HTMLElement | null} */ (null)
   let at = slot.start, mode = /** @type {'' | 'click' | 'clicks'} */ ('')
-  for (const token of tokens) {
+  for (const [i, token] of tokens.entries()) {
     const start = at
     at += token.raw.length
+    if (heads.has(i)) { if (partsAt < 0) partsAt = out.length; parts.push(sink = []) }
+    if (figured && (token.type === 'list' || boldLines(token))) {
+      if (figureAt < 0) figureAt = out.length
+      // A click an entry in <v-clicks>, one for them all in <v-click>, numbered where they are.
+      const found = entriesOf(token, start, context.lex), once = mode === 'click' ? ++counter.step : 0
+      for (const entry of found) entry.step = once || (mode === 'clicks' ? ++counter.step : 0)
+      entries.push(...found)
+      continue
+    }
+    if (mapped && (token.type === 'list' || (token.type === 'heading' && out.length && tokens.slice(i + 1).find((/** @type {any} */ t) => t.type !== 'space')?.type === 'list'))) {
+      if (mapAt < 0) mapAt = out.length
+      if (token.type === 'heading') { label = /** @type {HTMLElement} */ (block(token, start, context, null)); continue }
+      const items = itemsOf(token.raw, start)
+      for (const item of items) if (mode === 'clicks') item.step = true
+      lists.push({ items: label ? [{ text: label.textContent ?? '', start, end: start, children: items, element: label, step: mode === 'clicks' }] : items, step: mode === 'clicks' })
+      label = null
+      continue
+    }
     // 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))) {
@@ -104,7 +150,7 @@ function blocks(slot, context, counter) {
     }
     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'))
+      if (tag && tag[2] === 'br') sink.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
@@ -117,30 +163,79 @@ function blocks(slot, context, counter) {
           if (/\bv-click\b/.test(attrs) || mode === 'clicks') step(li, ++counter.step)
           list.append(li)
         }
-        if (list.childElementCount) out.push(list)
+        if (list.childElementCount) sink.push(list)
       } else {
         const words = token.raw.replace(/<!--[\s\S]*?-->/g, '').replace(/<[^>]*>/g, ' ').replace(/\s+/g, ' ').trim()
-        if (words) out.push(h('p', {}, [words]))
+        if (words) sink.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)
+    sink.push(element)
   }
+  if (lists.length) mindmap(out, lists.flatMap((list) => list.items), context, counter, mapAt)
+  if (entries.length) out.splice(figureAt, 0, listFigure(kind, entries, context))
+  if (parts.length) out.splice(partsAt, 0, partsFigure(parted, parts))
   return out
 }
 
+/**
+ * A slot's lists as one mind map, put among its other blocks where the first list was: merged, under the item they share, else under the heading the slot opens with, taken
+ * from the slot into the map; a heading other than that one stays the slide's. Each branch is a step when its list was
+ * one a click. Its words keep where they are in the source, so they change in place as a list's do; a chart or a
+ * diagram fenced under an item is drawn in its node, under its words.
+ * @param {Node[]} out the slot's other blocks @param {import('./mindmap.js').Item[]} items @param {Context} context
+ * @param {{ step: number }} counter @param {number} at where the map goes
+ */
+function mindmap(out, items, context, counter, at) {
+  const merged = mergeItems(items)
+  const opening = at > 0 && out[0] instanceof HTMLElement && out[0].matches('h1, h2, h3, h4, h5, h6, .deck-h') ? out[0] : null
+  /** @type {import('./mindmap.js').Item} */
+  let root
+  if (merged.length === 1 && (!opening || keyOf(opening.textContent ?? '') === keyOf(merged[0].text))) root = { ...merged[0], element: opening ?? merged[0].element }
+  else if (merged.length === 1) root = merged[0]
+  else root = { text: opening?.textContent ?? '', start: 0, end: 0, children: merged, element: opening ?? undefined }
+  if (opening && root.element === opening) { out.shift(); at-- }
+  const node = (/** @type {import('./mindmap.js').Item} */ item, /** @type {number} */ depth) => {
+    if (item.element) { item.element.classList.add('deck-map-node'); item.element.setAttribute('data-depth', String(depth)); return item.element }
+    const [first] = item.text ? context.lex(item.text) : []
+    const words = inline(first?.tokens ?? [{ type: 'text', text: item.text }], context)
+    if (!item.blocks?.length) return h('span', { class: 'deck-map-node', 'data-depth': depth, dir: 'auto', 'data-edit': range(item.start, item.end) }, words)
+    return h('div', { class: 'deck-map-node has-block', 'data-depth': depth }, [
+      item.text ? h('span', { class: 'deck-map-words', dir: 'auto', 'data-edit': range(item.start, item.end) }, words) : null,
+      ...item.blocks.map((one) => block({ type: 'code', lang: one.lang, text: one.text, raw: one.text }, item.start, context, null)),
+    ])
+  }
+  /** @type {(item: import('./mindmap.js').Item, depth: number) => HTMLElement} */
+  const tree = (item, depth) => h('li', {}, [node(item, depth), item.children.length ? h('ul', {}, item.children.map((child) => tree(child, depth + 1))) : null])
+  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+  svg.setAttribute('class', 'deck-map-lines')
+  svg.setAttribute('aria-hidden', 'true')
+  svg.setAttribute('preserveAspectRatio', 'none')
+  const branches = root.children.map((child, n) => {
+    const li = tree(child, 1), group = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+    for (const one of [li, group]) one.setAttribute('data-branch', String((n % 6) + 1))
+    if (child.step) { const k = ++counter.step; step(li, k); step(group, k) }
+    svg.append(group)
+    return li
+  })
+  const top = h('li', {}, [node(root, 0), branches.length ? h('ul', {}, branches) : null])
+  const map = h('div', { class: 'deck-mindmap' }, [h('div', { class: 'deck-map-plane' }, [svg, h('ul', { class: 'deck-map-tree' }, [top])])])
+  watchMap(map)
+  out.splice(at, 0, map)
+}
+
 /** @param {Element} element @param {number} n */
-const step = (element, n) => { element.classList.add('deck-step'); element.setAttribute('data-step', String(n)) }
+export 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) {
+export function block(token, start, context, stepped) {
   switch (token.type) {
     case 'heading': {
       const head = /^\s*#{1,6}[ \t]+/.exec(token.raw)
@@ -182,7 +277,7 @@ function block(token, start, context, stepped) {
       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')))
+        queueMicrotask(() => Promise.resolve(drawer(box, token.text, optionsOf(token.lang ?? ''))).catch(() => box.classList.add('is-failed')))
         return box
       }
       const marked = lines(info[2] ?? '')
@@ -211,6 +306,17 @@ function children(tokens, start, raw, context) {
   })
 }
 
+/**
+ * The options after a fence's language, as Slidev writes them (`mermaid {theme: 'neutral', scale: 0.8}`), read as YAML's
+ * flow, which JSON is too; none if they don't read. @param {string} info @returns {Record<string, any>}
+ */
+export function optionsOf(info) {
+  const braces = /\{[\s\S]*\}/.exec(info)?.[0]
+  if (!braces) return {}
+  const read = parseYaml(`options: ${braces.replace(/\n/g, ' ')}`).options
+  return read && typeof read === 'object' && !Array.isArray(read) ? read : {}
+}
+
 /** 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()
@@ -222,7 +328,7 @@ function lines(text) {
 }
 
 /** @param {number} from @param {number} to */
-const range = (from, to) => (to > from ? `${from}-${to}` : undefined)
+export const range = (from, to) => (to > from ? `${from}-${to}` : undefined)
 
 /** @param {any[]} tokens @param {Context} context @returns {Node[]} */
 export function inline(tokens = [], context) {