@codename/deck 0.3.0 → 0.4.0

package/src/mindmap.js

@@ -0,0 +1,208 @@
+// A mind map, from lists as a slide holds them: each item a node, its indentation its branching,
+// every list on the slide merged into one tree, as items of the same words at the same place are
+// one node, under one root (the item the lists share, else the slide's heading). Laid out as maps
+// are drawn by hand: the root in the middle, its branches shared out to either side, the first on
+// the side a line ends, clockwise, each branch a tidy tree going outwards. Pure, but for
+// `watchMap`, which measures a map's words on its slide and places them, again whenever their size
+// or its box's changes, in em of the map's own type, so it holds at any size.
+
+/** @typedef {{ text: string, start: number, end: number, children: Item[], blocks?: { lang: string, text: string }[], step?: boolean, element?: HTMLElement }} Item */
+/** @typedef {{ w: number, h: number, children: Box[], x?: number, y?: number, side?: number, span?: number, inner?: number }} Box */
+/** @typedef {{ branch: number, depth: number, x1: number, y1: number, x2: number, y2: number }} Line */
+
+const ITEM = /^([ \t]*)(?:[-*+]|\d{1,9}[.)])(?:[ \t]+(?:\[[ xX]\][ \t]+)?|$)/
+
+/**
+ * A list's items as a tree, by their indentation, as written: each item's words where they are in the source, from
+ * `start` (where the list's own text starts), a line that is no item going on with the item above it, a fenced block
+ * under an item (a chart, a diagram) that item's to draw.
+ * @param {string} raw @param {number} start @returns {Item[]}
+ */
+export function itemsOf(raw, start) {
+  /** @type {Item[]} */
+  const top = []
+  /** @type {{ indent: number, item: Item }[]} */
+  const open = []
+  let at = start
+  /** @type {{ fence: string, indent: number, lang: string, lines: string[] } | null} */
+  let fenced = null
+  for (const line of raw.split('\n')) {
+    const from = at
+    at += line.length + 1
+    if (fenced) {
+      if (line.trimStart().startsWith(fenced.fence) && !line.trim().slice(fenced.fence.length).trim()) {
+        const item = /** @type {{ item: Item }} */ (open.at(-1)).item
+        ;(item.blocks ??= []).push({ lang: fenced.lang, text: fenced.lines.join('\n') })
+        fenced = null
+      } else fenced.lines.push(line.slice(Math.min(fenced.indent, /^[ \t]*/.exec(line)?.[0].length ?? 0)))
+      continue
+    }
+    const fence = /^([ \t]*)(`{3,}|~{3,})(.*)$/.exec(line)
+    if (fence && open.length) { fenced = { fence: fence[2], indent: fence[1].length, lang: fence[3].trim(), lines: [] }; continue }
+    const marker = ITEM.exec(line)
+    if (marker) {
+      const indent = marker[1].replace(/\t/g, '    ').length
+      const item = { text: line.slice(marker[0].length).trim(), start: from + marker[0].length, end: from + line.trimEnd().length, children: [] }
+      while (open.length && /** @type {{ indent: number }} */ (open.at(-1)).indent >= indent) open.pop()
+      ;(open.at(-1)?.item.children ?? top).push(item)
+      open.push({ indent, item })
+    } else if (line.trim() && open.length) {
+      const item = /** @type {{ item: Item }} */ (open.at(-1)).item
+      item.text = `${item.text} ${line.trim()}`.trim()
+      item.end = from + line.trimEnd().length
+    }
+  }
+  return top
+}
+
+/** An item's words as they are compared: no emphasis, no case, one space. @param {string} text */
+export const keyOf = (text) => text.normalize('NFC').replace(/[*_`~]/g, '').replace(/\s+/g, ' ').trim().toLowerCase()
+
+/**
+ * Items merged: of siblings with the same words, the first keeps the others' children, at every level; a step if any
+ * was one. Items without words stay apart. @param {Item[]} items @returns {Item[]}
+ */
+export function mergeItems(items) {
+  /** @type {Item[]} */
+  const out = []
+  /** @type {Map<string, Item>} */
+  const seen = new Map()
+  for (const item of items) {
+    const key = keyOf(item.text), same = key ? seen.get(key) : undefined
+    if (same) { same.children.push(...item.children); same.step = same.step || item.step; continue }
+    const copy = { ...item, children: [...item.children] }
+    if (key) seen.set(key, copy)
+    out.push(copy)
+  }
+  for (const item of out) item.children = mergeItems(item.children)
+  return out
+}
+
+/**
+ * A map laid out, its boxes' sizes given (in em): the root's centre at the middle, its branches shared out to the end
+ * side (top to bottom) and the start side (bottom to top) so the two are as tall as they can be alike, each child a gap
+ * beyond its parent, siblings stacked and centred on it, spaced out further (up to four times) where the map would be
+ * flatter than its box (`aspect`, its width over its height). Each box gets its `x` and `y` (its top start corner, from the
+ * map's top start corner, mirrored if `rtl`) and its `side` (1 right of the root, -1 left); gives the map's size and its
+ * lines, each from a parent's side to its child's.
+ * @param {Box} root @param {{ rtl?: boolean, aspect?: number }} [how] @returns {{ width: number, height: number, lines: Line[] }}
+ */
+export function layoutMap(root, { rtl = false, aspect = 0 } = {}) {
+  let laid = layoutAt(root, rtl, 1)
+  if (aspect > 0 && laid.width / laid.height > aspect && layoutAt(root, rtl, 4).height < laid.width / aspect) laid = layoutAt(root, rtl, 4)
+  else if (aspect > 0 && laid.width / laid.height > aspect) {
+    let low = 1, high = 4
+    for (let n = 0; n < 12; n++) { const mid = (low + high) / 2; if (layoutAt(root, rtl, mid).height < laid.width / aspect) low = mid; else high = mid }
+    laid = layoutAt(root, rtl, low)
+  }
+  return laid
+}
+
+/** The map laid out with its siblings' spaces so many times the usual. @param {Box} root @param {boolean} rtl @param {number} spread */
+function layoutAt(root, rtl, spread) {
+  const gap = (/** @type {number} */ depth) => (depth <= 1 ? 2.4 : 1.5)
+  const space = (/** @type {number} */ depth) => (depth <= 1 ? 0.8 * spread : 0.3 * Math.sqrt(spread))
+  const measure = (/** @type {Box} */ box, /** @type {number} */ depth) => {
+    box.inner = box.children.reduce((sum, child) => sum + measure(child, depth + 1), 0) + space(depth + 1) * Math.max(0, box.children.length - 1)
+    box.span = Math.max(box.h, box.inner)
+    return box.span
+  }
+  /** @type {Line[]} */
+  const lines = []
+  // A box at its near edge `x`, in a band from `top`, going out to `side` (1 the end, -1 the start).
+  const place = (/** @type {Box} */ box, /** @type {number} */ x, /** @type {number} */ top, /** @type {number} */ side, /** @type {number} */ depth, /** @type {number} */ branch) => {
+    const middle = top + /** @type {number} */ (box.span) / 2
+    box.x = side > 0 ? x : x - box.w
+    box.side = rtl ? -side : side
+    box.y = middle - box.h / 2
+    let y = middle - /** @type {number} */ (box.inner) / 2
+    const far = x + side * box.w
+    for (const child of box.children) {
+      const near = far + side * gap(depth + 1)
+      place(child, near, y, side, depth + 1, branch)
+      lines.push({ branch, depth: depth + 1, x1: far, y1: middle, x2: near, y2: y + /** @type {number} */ (child.span) / 2 })
+      y += /** @type {number} */ (child.span) + space(depth + 1)
+    }
+  }
+  for (const child of root.children) measure(child, 1)
+  root.span = root.h
+  root.side = 0
+  root.x = -root.w / 2
+  root.y = -root.h / 2
+  // The branches to the end side, then the rest to the start: the split that makes the two sides nearest in height.
+  const tall = (/** @type {Box[]} */ some) => some.reduce((sum, b) => sum + /** @type {number} */ (b.span), 0) + space(1) * Math.max(0, some.length - 1)
+  const count = root.children.length
+  let split = count
+  for (let k = Math.ceil(count / 2); k <= count; k++) if (Math.max(tall(root.children.slice(0, k)), tall(root.children.slice(k))) < Math.max(tall(root.children.slice(0, split)), tall(root.children.slice(split)))) split = k
+  for (const [side, some] of /** @type {[number, Box[]][]} */ ([[1, root.children.slice(0, split)], [-1, root.children.slice(split).reverse()]])) {
+    let y = -tall(some) / 2
+    for (const child of some) {
+      const near = side * (root.w / 2 + gap(1))
+      place(child, near, y, side, 1, root.children.indexOf(child))
+      lines.push({ branch: root.children.indexOf(child), depth: 1, x1: side * root.w / 2, y1: 0, x2: near, y2: y + /** @type {number} */ (child.span) / 2 })
+      y += /** @type {number} */ (child.span) + space(1)
+    }
+  }
+  // From the map's top start corner.
+  /** @type {Box[]} */
+  const all = []
+  const walk = (/** @type {Box} */ box) => { all.push(box); box.children.forEach(walk) }
+  walk(root)
+  const left = Math.min(...all.map((b) => /** @type {number} */ (b.x))), right = Math.max(...all.map((b) => /** @type {number} */ (b.x) + b.w))
+  const top = Math.min(...all.map((b) => /** @type {number} */ (b.y))), bottom = Math.max(...all.map((b) => /** @type {number} */ (b.y) + b.h))
+  const width = right - left
+  const x = (/** @type {number} */ v) => (rtl ? width - (v - left) : v - left)
+  for (const box of all) { box.x = rtl ? width - (/** @type {number} */ (box.x) - left) - box.w : /** @type {number} */ (box.x) - left; box.y = /** @type {number} */ (box.y) - top }
+  for (const line of lines) Object.assign(line, { x1: x(line.x1), x2: x(line.x2), y1: line.y1 - top, y2: line.y2 - top })
+  return { width, height: bottom - top, lines }
+}
+
+/** A line as a curve leaving its parent and reaching its child level. @param {Line} line */
+export const curveOf = ({ x1, y1, x2, y2 }) => `M${x1.toFixed(3)} ${y1.toFixed(3)}C${((x1 + x2) / 2).toFixed(3)} ${y1.toFixed(3)} ${((x1 + x2) / 2).toFixed(3)} ${y2.toFixed(3)} ${x2.toFixed(3)} ${y2.toFixed(3)}`
+
+/**
+ * A map drawn by render.js (`.deck-mindmap`, its plane, its lines' SVG with a group a branch, its tree as lists, each
+ * item's words a `.deck-map-node`) placed once it is on a page, and again as its words or its box change size: its
+ * words where the layout puts them, its lines, the whole shrunk to its box. @param {HTMLElement} map
+ */
+export function watchMap(map) {
+  const plane = /** @type {HTMLElement} */ (map.querySelector('.deck-map-plane'))
+  const svg = /** @type {SVGSVGElement} */ (plane.querySelector('.deck-map-lines'))
+  const root = /** @type {HTMLElement} */ (plane.querySelector('.deck-map-tree > li'))
+  const place = () => {
+    if (!map.clientWidth || !map.clientHeight) return
+    const em = parseFloat(getComputedStyle(plane).fontSize) || 16
+    /** @type {[HTMLElement, Box][]} */
+    const placed = []
+    const boxOf = (/** @type {Element} */ li) => {
+      const node = /** @type {HTMLElement} */ (li.firstElementChild)
+      const list = li.lastElementChild?.tagName === 'UL' ? [...li.lastElementChild.children] : []
+      /** @type {Box} */
+      const box = { w: node.offsetWidth / em, h: node.offsetHeight / em, children: list.map(boxOf) }
+      placed.push([node, box])
+      return box
+    }
+    const { width, height, lines } = layoutMap(boxOf(root), { rtl: getComputedStyle(map).direction === 'rtl', aspect: map.clientWidth / map.clientHeight })
+    // As shares of the plane: a node's own em is its own type's.
+    for (const [node, box] of placed) {
+      node.style.setProperty('left', `${(/** @type {number} */ (box.x) / width) * 100}%`)
+      node.style.setProperty('top', `${(/** @type {number} */ (box.y) / height) * 100}%`)
+      node.setAttribute('data-side', box.side === 1 ? 'right' : box.side === -1 ? 'left' : 'middle')
+    }
+    plane.style.setProperty('width', `${width}em`)
+    plane.style.setProperty('height', `${height}em`)
+    svg.setAttribute('viewBox', `0 0 ${width.toFixed(3)} ${height.toFixed(3)}`)
+    const groups = [...svg.children]
+    for (const group of groups) group.replaceChildren()
+    for (const line of lines) {
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+      path.setAttribute('d', curveOf(line))
+      path.setAttribute('data-depth', String(line.depth))
+      groups[line.branch]?.append(path)
+    }
+    plane.style.setProperty('scale', String(Math.min(1, map.clientWidth / (width * em), map.clientHeight / (height * em))))
+  }
+  const watcher = new ResizeObserver(place)
+  watcher.observe(map)
+  for (const node of plane.querySelectorAll('.deck-map-node')) watcher.observe(node)
+}

package/src/pptx.js

@@ -2,7 +2,10 @@
 // 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
+// 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
@@ -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
@@ -101,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' })
@@ -122,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
@@ -162,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